refactor: drop deprecated loadable component utilities (#11479)

**Related Issue:** #11333 ## Summary Remove the deprecated `loadable` util and use `componentOnReady` directly.
Esri · Feb 13, 2025 · d8489e7 · d8489e7
1 parent 5424f2d
commit d8489e7
Show file tree

Hide file tree

Showing 74 changed files with 160 additions and 1,092 deletions.
diff --git a/packages/calcite-components/src/components/accordion-item/accordion-item.tsx b/packages/calcite-components/src/components/accordion-item/accordion-item.tsx
@@ -8,12 +8,7 @@ import {
 import { CSS_UTILITY } from "../../utils/resources";
 import { getIconScale } from "../../utils/component";
 import { FlipContext, Position, Scale, SelectionMode, IconType } from "../interfaces";
-import {
-  componentFocusable,
-  LoadableComponent,
-  setComponentLoaded,
-  setUpLoadableComponent,
-} from "../../utils/loadable";
+import { componentFocusable } from "../../utils/component";
 import { IconNameOrString } from "../icon/interfaces";
 import type { Accordion } from "../accordion/accordion";
 import { SLOTS, CSS, IDS } from "./resources";
@@ -31,7 +26,7 @@ declare global {
  * @slot actions-end - A slot for adding `calcite-action`s or content to the end side of the component's header.
  * @slot actions-start - A slot for adding `calcite-action`s or content to the start side of the component's header.
  */
-export class AccordionItem extends LitElement implements LoadableComponent {
+export class AccordionItem extends LitElement {
   // #region Static Members
 
   static override styles = styles;
@@ -140,14 +135,6 @@ export class AccordionItem extends LitElement implements LoadableComponent {
     );
   }
 
-  load(): void {
-    setUpLoadableComponent(this);
-  }
-
-  loaded(): void {
-    setComponentLoaded(this);
-  }
-
   // #endregion
 
   // #region Private Methods

diff --git a/packages/calcite-components/src/components/action-bar/action-bar.tsx b/packages/calcite-components/src/components/action-bar/action-bar.tsx
@@ -16,12 +16,7 @@ import {
   slotChangeGetAssignedElements,
   slotChangeHasAssignedElement,
 } from "../../utils/dom";
-import {
-  componentFocusable,
-  LoadableComponent,
-  setComponentLoaded,
-  setUpLoadableComponent,
-} from "../../utils/loadable";
+import { componentFocusable } from "../../utils/component";
 import { createObserver } from "../../utils/observers";
 import { ExpandToggle, toggleChildActionText } from "../functional/ExpandToggle";
 import { Layout, Position, Scale } from "../interfaces";
@@ -47,7 +42,7 @@ declare global {
  * @slot actions-end - A slot for adding `calcite-action`s that will appear at the end of the component, prior to the collapse/expand button.
  * @slot expand-tooltip - A slot to set the `calcite-tooltip` for the expand toggle.
  */
-export class ActionBar extends LitElement implements LoadableComponent {
+export class ActionBar extends LitElement {
   // #region Static Members
 
   static override styles = styles;
@@ -212,10 +207,6 @@ export class ActionBar extends LitElement implements LoadableComponent {
     this.overflowActionsDisabledHandler(this.overflowActionsDisabled);
   }
 
-  async load(): Promise<void> {
-    setUpLoadableComponent(this);
-  }
-
   override willUpdate(changes: PropertyValues<this>): void {
     /* TODO: [MIGRATION] First time Lit calls willUpdate(), changes will include not just properties provided by the user, but also any default values your component set.
     To account for this semantics change, the checks for (this.hasUpdated || value != defaultValue) was added in this method
@@ -242,7 +233,6 @@ export class ActionBar extends LitElement implements LoadableComponent {
   }
 
   loaded(): void {
-    setComponentLoaded(this);
     this.overflowActions();
   }
 

diff --git a/packages/calcite-components/src/components/action-group/action-group.tsx b/packages/calcite-components/src/components/action-group/action-group.tsx
@@ -1,12 +1,7 @@
 // @ts-strict-ignore
 import { PropertyValues } from "lit";
 import { LitElement, property, h, method, state, JsxNode, ToEvents } from "@arcgis/lumina";
-import {
-  componentFocusable,
-  LoadableComponent,
-  setComponentLoaded,
-  setUpLoadableComponent,
-} from "../../utils/loadable";
+import { componentFocusable } from "../../utils/component";
 import { SLOTS as ACTION_MENU_SLOTS } from "../action-menu/resources";
 import { Layout, Scale } from "../interfaces";
 import { FlipPlacement, LogicalPlacement, OverlayPositioning } from "../../utils/floating-ui";
@@ -29,7 +24,7 @@ declare global {
  * @slot menu-actions - A slot for adding an overflow menu with `calcite-action`s inside a `calcite-dropdown`.
  * @slot menu-tooltip - A slot for adding a `calcite-tooltip` for the menu.
  */
-export class ActionGroup extends LitElement implements LoadableComponent {
+export class ActionGroup extends LitElement {
   // #region Static Members
 
   static override shadowRootOptions = { mode: "open" as const, delegatesFocus: true };
@@ -108,10 +103,6 @@ export class ActionGroup extends LitElement implements LoadableComponent {
 
   // #region Lifecycle
 
-  async load(): Promise<void> {
-    setUpLoadableComponent(this);
-  }
-
   override willUpdate(changes: PropertyValues<this>): void {
     /* TODO: [MIGRATION] First time Lit calls willUpdate(), changes will include not just properties provided by the user, but also any default values your component set.
     To account for this semantics change, the checks for (this.hasUpdated || value != defaultValue) was added in this method
@@ -121,11 +112,6 @@ export class ActionGroup extends LitElement implements LoadableComponent {
       this.menuOpen = false;
     }
   }
-
-  loaded(): void {
-    setComponentLoaded(this);
-  }
-
   // #endregion
 
   // #region Private Methods

diff --git a/packages/calcite-components/src/components/action-menu/action-menu.tsx b/packages/calcite-components/src/components/action-menu/action-menu.tsx
@@ -15,12 +15,7 @@ import { focusElement, toAriaBoolean } from "../../utils/dom";
 import { FlipPlacement, LogicalPlacement, OverlayPositioning } from "../../utils/floating-ui";
 import { guid } from "../../utils/guid";
 import { isActivationKey } from "../../utils/key";
-import {
-  componentFocusable,
-  LoadableComponent,
-  setComponentLoaded,
-  setUpLoadableComponent,
-} from "../../utils/loadable";
+import { componentFocusable } from "../../utils/component";
 import { Appearance, Scale } from "../interfaces";
 import type { Action } from "../action/action";
 import type { Tooltip } from "../tooltip/tooltip";
@@ -41,7 +36,7 @@ const SUPPORTED_MENU_NAV_KEYS = ["ArrowUp", "ArrowDown", "End", "Home"];
  * @slot trigger - A slot for adding a `calcite-action` to trigger opening the menu.
  * @slot tooltip - A slot for adding an tooltip for the menu.
  */
-export class ActionMenu extends LitElement implements LoadableComponent {
+export class ActionMenu extends LitElement {
   // #region Static Members
 
   static override styles = styles;
@@ -208,10 +203,6 @@ export class ActionMenu extends LitElement implements LoadableComponent {
     this.connectMenuButtonEl();
   }
 
-  load(): void {
-    setUpLoadableComponent(this);
-  }
-
   override willUpdate(changes: PropertyValues<this>): void {
     /* TODO: [MIGRATION] First time Lit calls willUpdate(), changes will include not just properties provided by the user, but also any default values your component set.
     To account for this semantics change, the checks for (this.hasUpdated || value != defaultValue) was added in this method
@@ -229,10 +220,6 @@ export class ActionMenu extends LitElement implements LoadableComponent {
     }
   }
 
-  loaded(): void {
-    setComponentLoaded(this);
-  }
-
   override disconnectedCallback(): void {
     this.disconnectMenuButtonEl();
   }

diff --git a/packages/calcite-components/src/components/action-pad/action-pad.tsx b/packages/calcite-components/src/components/action-pad/action-pad.tsx
@@ -2,12 +2,7 @@
 import { PropertyValues } from "lit";
 import { LitElement, property, createEvent, h, method, state, JsxNode } from "@arcgis/lumina";
 import { focusFirstTabbable, slotChangeGetAssignedElements } from "../../utils/dom";
-import {
-  componentFocusable,
-  LoadableComponent,
-  setComponentLoaded,
-  setUpLoadableComponent,
-} from "../../utils/loadable";
+import { componentFocusable } from "../../utils/component";
 import { ExpandToggle, toggleChildActionText } from "../functional/ExpandToggle";
 import { Layout, Position, Scale } from "../interfaces";
 import { createObserver } from "../../utils/observers";
@@ -29,7 +24,7 @@ declare global {
  * @slot - A slot for adding `calcite-action`s to the component.
  * @slot expand-tooltip - A slot to set the `calcite-tooltip` for the expand toggle.
  */
-export class ActionPad extends LitElement implements LoadableComponent {
+export class ActionPad extends LitElement {
   // #region Static Members
 
   static override shadowRootOptions = { mode: "open" as const, delegatesFocus: true };
@@ -128,10 +123,6 @@ export class ActionPad extends LitElement implements LoadableComponent {
     this.mutationObserver?.observe(this.el, { childList: true, subtree: true });
   }
 
-  async load(): Promise<void> {
-    setUpLoadableComponent(this);
-  }
-
   override willUpdate(changes: PropertyValues<this>): void {
     /* TODO: [MIGRATION] First time Lit calls willUpdate(), changes will include not just properties provided by the user, but also any default values your component set.
     To account for this semantics change, the checks for (this.hasUpdated || value != defaultValue) was added in this method
@@ -146,10 +137,6 @@ export class ActionPad extends LitElement implements LoadableComponent {
     }
   }
 
-  loaded(): void {
-    setComponentLoaded(this);
-  }
-
   override disconnectedCallback(): void {
     this.mutationObserver?.disconnect();
   }

diff --git a/packages/calcite-components/src/components/action/action.tsx b/packages/calcite-components/src/components/action/action.tsx
@@ -7,12 +7,7 @@ import {
   InteractiveContainer,
   updateHostInteraction,
 } from "../../utils/interactive";
-import {
-  componentFocusable,
-  LoadableComponent,
-  setComponentLoaded,
-  setUpLoadableComponent,
-} from "../../utils/loadable";
+import { componentFocusable } from "../../utils/component";
 import { createObserver } from "../../utils/observers";
 import { getIconScale } from "../../utils/component";
 import { Alignment, Appearance, Scale } from "../interfaces";
@@ -33,7 +28,7 @@ declare global {
  * @slot - A slot for adding a `calcite-icon`.
  * @slot tooltip - [Deprecated] Use the `calcite-tooltip` component instead.
  */
-export class Action extends LitElement implements InteractiveComponent, LoadableComponent {
+export class Action extends LitElement implements InteractiveComponent {
   // #region Static Members
 
   static override styles = styles;
@@ -139,18 +134,10 @@ export class Action extends LitElement implements InteractiveComponent, Loadable
     this.mutationObserver?.observe(this.el, { childList: true, subtree: true });
   }
 
-  async load(): Promise<void> {
-    setUpLoadableComponent(this);
-  }
-
   override updated(): void {
     updateHostInteraction(this);
   }
 
-  loaded(): void {
-    setComponentLoaded(this);
-  }
-
   override disconnectedCallback(): void {
     this.mutationObserver?.disconnect();
   }

diff --git a/packages/calcite-components/src/components/alert/alert.tsx b/packages/calcite-components/src/components/alert/alert.tsx
@@ -17,12 +17,7 @@ import {
 } from "../../utils/dom";
 import { MenuPlacement } from "../../utils/floating-ui";
 import { getIconScale } from "../../utils/component";
-import {
-  componentFocusable,
-  LoadableComponent,
-  setComponentLoaded,
-  setUpLoadableComponent,
-} from "../../utils/loadable";
+import { componentFocusable } from "../../utils/component";
 import { NumberingSystem, NumberStringFormat } from "../../utils/locale";
 import { onToggleOpenCloseComponent, OpenCloseComponent } from "../../utils/openCloseComponent";
 import { Kind, Scale } from "../interfaces";
@@ -52,7 +47,7 @@ const manager = new AlertManager();
  * @slot link - A slot for adding a `calcite-action` to take from the component such as: "undo", "try again", "link to page", etc.
  * @slot actions-end - A slot for adding `calcite-action`s to the end of the component. It is recommended to use two or fewer actions.
  */
-export class Alert extends LitElement implements OpenCloseComponent, LoadableComponent {
+export class Alert extends LitElement implements OpenCloseComponent {
   // #region Static Members
 
   static override styles = styles;
@@ -217,10 +212,6 @@ export class Alert extends LitElement implements OpenCloseComponent, LoadableCom
     };
   }
 
-  async load(): Promise<void> {
-    setUpLoadableComponent(this);
-  }
-
   override willUpdate(changes: PropertyValues<this>): void {
     /* TODO: [MIGRATION] First time Lit calls willUpdate(), changes will include not just properties provided by the user, but also any default values your component set.
     To account for this semantics change, the checks for (this.hasUpdated || value != defaultValue) was added in this method
@@ -254,10 +245,6 @@ export class Alert extends LitElement implements OpenCloseComponent, LoadableCom
     }
   }
 
-  loaded(): void {
-    setComponentLoaded(this);
-  }
-
   override disconnectedCallback(): void {
     manager.unregisterElement(this.el);
     this.clearAutoCloseTimeout();

diff --git a/packages/calcite-components/src/components/autocomplete-item/autocomplete-item.tsx b/packages/calcite-components/src/components/autocomplete-item/autocomplete-item.tsx
@@ -1,11 +1,6 @@
 // @ts-strict-ignore
 import { LitElement, property, createEvent, h, JsxNode } from "@arcgis/lumina";
 import { FlipContext, Scale } from "../interfaces";
-import {
-  LoadableComponent,
-  setComponentLoaded,
-  setUpLoadableComponent,
-} from "../../utils/loadable";
 import { getIconScale } from "../../utils/component";
 import {
   InteractiveComponent,
@@ -28,10 +23,7 @@ declare global {
  * @slot content-end - A slot for adding non-actionable elements after content of the component.
  * @slot content-start - A slot for adding non-actionable elements before content of the component.
  */
-export class AutocompleteItem
-  extends LitElement
-  implements InteractiveComponent, LoadableComponent
-{
+export class AutocompleteItem extends LitElement implements InteractiveComponent {
   // #region Static Members
 
   static override styles = styles;
@@ -111,18 +103,10 @@ export class AutocompleteItem
 
   // #region Lifecycle
 
-  load(): void {
-    setUpLoadableComponent(this);
-  }
-
   override updated(): void {
     updateHostInteraction(this);
   }
 
-  loaded(): void {
-    setComponentLoaded(this);
-  }
-
   // #endregion
 
   // #region Private Methods

diff --git a/packages/calcite-components/src/components/autocomplete/autocomplete.tsx b/packages/calcite-components/src/components/autocomplete/autocomplete.tsx
@@ -30,11 +30,6 @@ import {
   InteractiveContainer,
   updateHostInteraction,
 } from "../../utils/interactive";
-import {
-  LoadableComponent,
-  setComponentLoaded,
-  setUpLoadableComponent,
-} from "../../utils/loadable";
 import { onToggleOpenCloseComponent, OpenCloseComponent } from "../../utils/openCloseComponent";
 import { Alignment, Scale, Status } from "../interfaces";
 import { IconNameOrString } from "../icon/interfaces";
@@ -83,7 +78,6 @@ export class Autocomplete
     FormComponent,
     InteractiveComponent,
     LabelableComponent,
-    LoadableComponent,
     OpenCloseComponent,
     TextualInputComponent
 {
@@ -431,7 +425,6 @@ export class Autocomplete
   }
 
   async load(): Promise<void> {
-    setUpLoadableComponent(this);
     this.getAllItemsDebounced();
   }
 
@@ -491,7 +484,6 @@ export class Autocomplete
   loaded(): void {
     afterConnectDefaultValueSet(this, this.value || "");
     this.defaultInputValue = this.inputValue || "";
-    setComponentLoaded(this);
     connectFloatingUI(this);
   }
 

diff --git a/packages/calcite-components/src/components/block-group/block-group.tsx b/packages/calcite-components/src/components/block-group/block-group.tsx
@@ -14,7 +14,7 @@ import {
   disconnectSortableComponent,
   SortableComponent,
 } from "../../utils/sortableComponent";
-import { componentFocusable } from "../../utils/loadable";
+import { componentFocusable } from "../../utils/component";
 import { MoveEventDetail, MoveTo, ReorderEventDetail } from "../sort-handle/interfaces";
 import { DEBOUNCE } from "../../utils/resources";
 import { Block } from "../block/block";