refactor(action-bar, action-pad, action-group): Remove use of getSlotted utility. #6059

Author: driskull

packages/calcite-components/src/components/action-bar/action-bar.tsx

@@ -17,7 +17,11 @@ import {
   connectConditionalSlotComponent,
   disconnectConditionalSlotComponent,
 } from "../../utils/conditionalSlot";
-import { focusFirstTabbable, getSlotted, slotChangeGetAssignedElements } from "../../utils/dom";
+import {
+  focusFirstTabbable,
+  slotChangeGetAssignedElements,
+  slotChangeHasAssignedElement,
+} from "../../utils/dom";
 import {
   componentFocusable,
   LoadableComponent,
@@ -176,6 +180,10 @@ export class ActionBar
 
   @State() effectiveLocale: string;
 
+  @State() hasActionsEnd = false;
+
+  @State() expandTooltip: HTMLCalciteTooltipElement;
+
   @Watch("effectiveLocale")
   effectiveLocaleChange(): void {
     updateMessages(this, this.effectiveLocale);
@@ -297,9 +305,7 @@ export class ActionBar
     this.setGroupLayout(actionGroups);
 
     const groupCount =
-      getSlotted(el, SLOTS.actionsEnd) || getSlotted(el, SLOTS.bottomActions) || !expandDisabled
-        ? actionGroups.length + 1
-        : actionGroups.length;
+      this.hasActionsEnd || !expandDisabled ? actionGroups.length + 1 : actionGroups.length;
 
     const { actionHeight, actionWidth } = geActionDimensions(actions);
 
@@ -345,6 +351,18 @@ export class ActionBar
     this.setGroupLayout(groups);
   };
 
+  handleActionsEndSlotChange = (event: Event): void => {
+    this.hasActionsEnd = slotChangeHasAssignedElement(event);
+  };
+
+  handleTooltipSlotChange = (event: Event): void => {
+    const tooltips = slotChangeGetAssignedElements(event).filter((el) =>
+      el?.matches("calcite-tooltip")
+    ) as HTMLCalciteTooltipElement[];
+
+    this.expandTooltip = tooltips[0];
+  };
+
   // --------------------------------------------------------------------------
   //
   //  Render Methods
@@ -354,8 +372,6 @@ export class ActionBar
   renderBottomActionGroup(): VNode {
     const { expanded, expandDisabled, el, position, toggleExpand, scale, layout, messages } = this;
 
-    const tooltip = getSlotted(el, SLOTS.expandTooltip) as HTMLCalciteTooltipElement;
-
     const expandToggleNode = !expandDisabled ? (
       <ExpandToggle
         collapseText={messages.collapse}
@@ -365,22 +381,25 @@ export class ActionBar
         position={position}
         scale={scale}
         toggle={toggleExpand}
-        tooltip={tooltip}
+        tooltip={this.expandTooltip}
         // eslint-disable-next-line react/jsx-sort-props
         ref={this.setExpandToggleRef}
       />
     ) : null;
 
-    return getSlotted(el, SLOTS.actionsEnd) ||
-      getSlotted(el, SLOTS.bottomActions) ||
-      expandToggleNode ? (
-      <calcite-action-group class={CSS.actionGroupEnd} layout={layout} scale={scale}>
-        <slot name={SLOTS.actionsEnd} />
-        <slot name={SLOTS.bottomActions} />
-        <slot name={SLOTS.expandTooltip} />
+    return (
+      <calcite-action-group
+        class={CSS.actionGroupEnd}
+        hidden={this.expandDisabled && !this.hasActionsEnd}
+        layout={layout}
+        scale={scale}
+      >
+        <slot name={SLOTS.actionsEnd} onSlotchange={this.handleActionsEndSlotChange} />
+        <slot name={SLOTS.bottomActions} onSlotchange={this.handleActionsEndSlotChange} />
+        <slot name={SLOTS.expandTooltip} onSlotchange={this.handleTooltipSlotChange} />
         {expandToggleNode}
       </calcite-action-group>
-    ) : null;
+    );
   }
 
   render(): VNode {

packages/calcite-components/src/components/action-group/action-group.tsx

@@ -5,7 +5,6 @@ import {
   connectConditionalSlotComponent,
   disconnectConditionalSlotComponent,
 } from "../../utils/conditionalSlot";
-import { getSlotted } from "../../utils/dom";
 import {
   componentFocusable,
   LoadableComponent,
@@ -25,6 +24,7 @@ import { Columns, Layout, Scale } from "../interfaces";
 import { ActionGroupMessages } from "./assets/action-group/t9n";
 import { ICONS, SLOTS } from "./resources";
 import { OverlayPositioning } from "../../utils/floating-ui";
+import { slotChangeHasAssignedElement } from "../../utils/dom";
 
 /**
  * @slot - A slot for adding a group of `calcite-action`s.
@@ -124,6 +124,8 @@ export class ActionGroup
 
   @State() defaultMessages: ActionGroupMessages;
 
+  @State() hasMenuActions = false;
+
   //--------------------------------------------------------------------------
   //
   //  Public Methods
@@ -169,22 +171,15 @@ export class ActionGroup
   //
   // --------------------------------------------------------------------------
 
-  renderTooltip(): VNode {
-    const { el } = this;
-    const hasTooltip = getSlotted(el, SLOTS.menuTooltip);
-
-    return hasTooltip ? <slot name={SLOTS.menuTooltip} slot={ACTION_MENU_SLOTS.tooltip} /> : null;
-  }
-
   renderMenu(): VNode {
-    const { el, expanded, menuOpen, scale, layout, messages, overlayPositioning } = this;
-
-    const hasMenuItems = getSlotted(el, SLOTS.menuActions);
+    const { expanded, menuOpen, scale, layout, messages, overlayPositioning, hasMenuActions } =
+      this;
 
-    return hasMenuItems ? (
+    return (
       <calcite-action-menu
         expanded={expanded}
         flipPlacements={["left", "right"]}
+        hidden={!hasMenuActions}
         label={messages.more}
         onCalciteActionMenuOpen={this.setMenuOpen}
         open={menuOpen}
@@ -199,10 +194,10 @@ export class ActionGroup
           text={messages.more}
           textEnabled={expanded}
         />
-        <slot name={SLOTS.menuActions} />
-        {this.renderTooltip()}
+        <slot name={SLOTS.menuActions} onSlotchange={this.handleMenuActionsSlotChange} />
+        <slot name={SLOTS.menuTooltip} slot={ACTION_MENU_SLOTS.tooltip} />
       </calcite-action-menu>
-    ) : null;
+    );
   }
 
   render(): VNode {
@@ -223,4 +218,8 @@ export class ActionGroup
   setMenuOpen = (event: CalciteActionMenuCustomEvent<void>): void => {
     this.menuOpen = !!(event.target as HTMLCalciteActionMenuElement).open;
   };
+
+  handleMenuActionsSlotChange = (event: Event): void => {
+    this.hasMenuActions = slotChangeHasAssignedElement(event);
+  };
 }

packages/calcite-components/src/components/action-pad/action-pad.tsx

@@ -16,7 +16,7 @@ import {
   connectConditionalSlotComponent,
   disconnectConditionalSlotComponent,
 } from "../../utils/conditionalSlot";
-import { getSlotted, slotChangeGetAssignedElements } from "../../utils/dom";
+import { slotChangeGetAssignedElements } from "../../utils/dom";
 import {
   componentFocusable,
   LoadableComponent,
@@ -131,6 +131,8 @@ export class ActionPad
 
   @Element() el: HTMLCalciteActionPadElement;
 
+  @State() expandTooltip: HTMLCalciteTooltipElement;
+
   mutationObserver = createObserver("mutation", () =>
     this.setGroupLayout(Array.from(this.el.querySelectorAll("calcite-action-group")))
   );
@@ -233,6 +235,14 @@ export class ActionPad
     this.setGroupLayout(groups);
   };
 
+  handleTooltipSlotChange = (event: Event): void => {
+    const tooltips = slotChangeGetAssignedElements(event).filter((el) =>
+      el?.matches("calcite-tooltip")
+    ) as HTMLCalciteTooltipElement[];
+
+    this.expandTooltip = tooltips[0];
+  };
+
   // --------------------------------------------------------------------------
   //
   //  Component Methods
@@ -242,8 +252,6 @@ export class ActionPad
   renderBottomActionGroup(): VNode {
     const { expanded, expandDisabled, messages, el, position, toggleExpand, scale, layout } = this;
 
-    const tooltip = getSlotted(el, SLOTS.expandTooltip) as HTMLCalciteTooltipElement;
-
     const expandToggleNode = !expandDisabled ? (
       <ExpandToggle
         collapseText={messages.collapse}
@@ -253,15 +261,15 @@ export class ActionPad
         position={position}
         scale={scale}
         toggle={toggleExpand}
-        tooltip={tooltip}
+        tooltip={this.expandTooltip}
         // eslint-disable-next-line react/jsx-sort-props
         ref={this.setExpandToggleRef}
       />
     ) : null;
 
     return expandToggleNode ? (
       <calcite-action-group class={CSS.actionGroupEnd} layout={layout} scale={scale}>
-        <slot name={SLOTS.expandTooltip} />
+        <slot name={SLOTS.expandTooltip} onSlotchange={this.handleTooltipSlotChange} />
         {expandToggleNode}
       </calcite-action-group>
     ) : null;