refactor: move component types into component specific interfaces files (#9527)

**Related Issue:**
[#9526](#9526)

## Summary
Moves unshared types in
[interfaces](https://github.com/Esri/calcite-design-system/blob/main/packages/calcite-components/src/components/interfaces.ts)
into component-specific `interfaces.ts` files.

Author: aPreciado88

packages/calcite-components/.storybook/resources.ts

@@ -8,23 +8,23 @@ import {
   Kind,
   Width,
   SelectionMode,
-  ArrowType,
-  DisplayMode,
-  ToggleDisplay,
   Layout,
   Dir,
-  ButtonType,
-  InteractionMode,
   IconType,
-  DeterminateType,
-  FillType,
-  LabelType,
-  ClickType,
   CollapseDirection,
-  TextType,
-  Mode,
   SelectionAppearance,
 } from "../../calcite-components/src/components/interfaces.ts";
+import { ArrowType } from "../src/components/carousel/interfaces.ts";
+import { BlockSectionToggleDisplay } from "../src/components/block-section/interfaces.ts";
+import { TileSelectType } from "../src/components/tile-select/interfaces.ts";
+import { TableInteractionMode } from "../src/components/table/interfaces.ts";
+import { DeterminateType } from "../src/components/loader/interfaces.ts";
+import { MeterFillType, MeterLabelType } from "../src/components/meter/interfaces.ts";
+import { DropdownClickType } from "../src/components/dropdown/interfaces.ts";
+import { TextType } from "../src/components/input/interfaces.ts";
+import { TimeZoneMode } from "../src/components/input-time-zone/interfaces.ts";
+import { DisplayMode } from "../src/components/sheet/interfaces.ts";
+import { ShellDisplayMode } from "../src/components/shell/interfaces.ts";
 
 interface AttributeMetadata<T> {
   values: T[];
@@ -43,20 +43,21 @@ interface CommonAttributes {
   selectionMode: AttributeMetadata<SelectionMode>;
   arrowType: AttributeMetadata<ArrowType>;
   displayMode: AttributeMetadata<DisplayMode>;
-  toggleDisplay: AttributeMetadata<ToggleDisplay>;
+  toggleDisplay: AttributeMetadata<BlockSectionToggleDisplay>;
   layout: AttributeMetadata<Layout>;
   dir: AttributeMetadata<Dir>;
-  buttonType: AttributeMetadata<ButtonType>;
-  interactionMode: AttributeMetadata<InteractionMode>;
+  buttonType: AttributeMetadata<TileSelectType>;
+  interactionMode: AttributeMetadata<TableInteractionMode>;
   iconType: AttributeMetadata<IconType>;
   determinateType: AttributeMetadata<DeterminateType>;
-  fillType: AttributeMetadata<FillType>;
-  labelType: AttributeMetadata<LabelType>;
-  clickType: AttributeMetadata<ClickType>;
+  fillType: AttributeMetadata<MeterFillType>;
+  labelType: AttributeMetadata<MeterLabelType>;
+  clickType: AttributeMetadata<DropdownClickType>;
   collapseDirection: AttributeMetadata<CollapseDirection>;
   textType: AttributeMetadata<TextType>;
-  mode: AttributeMetadata<Mode>;
+  mode: AttributeMetadata<TimeZoneMode>;
   selectionAppearance: AttributeMetadata<SelectionAppearance>;
+  shellDisplayMode: AttributeMetadata<ShellDisplayMode>;
 }
 
 const logicalFlowPositionOptions: LogicalFlowPosition[] = ["inline-start", "inline-end", "block-start", "block-end"];
@@ -77,8 +78,8 @@ const selectionModeOptions: SelectionMode[] = [
   "multiple",
 ];
 const arrowTypeOptions: ArrowType[] = ["inline", "edge", "none"];
-const displayModeOptions: DisplayMode[] = ["dock", "float", "overlay"];
-const toggleDisplayOptions: ToggleDisplay[] = ["button", "switch"];
+const displayModeOptions: DisplayMode[] = ["float", "overlay"];
+const toggleDisplayOptions: BlockSectionToggleDisplay[] = ["button", "switch"];
 const layoutOptions: Layout[] = [
   "horizontal",
   "vertical",
@@ -91,13 +92,13 @@ const layoutOptions: Layout[] = [
   "horizontal-single",
 ];
 const dirOptions: Dir[] = ["ltr", "rtl"];
-const buttonTypeOptions: ButtonType[] = ["radio", "checkbox"];
-const interactionModeOptions: InteractionMode[] = ["interactive", "static"];
+const buttonTypeOptions: TileSelectType[] = ["radio", "checkbox"];
+const interactionModeOptions: TableInteractionMode[] = ["interactive", "static"];
 const iconTypeOptions: IconType[] = ["chevron", "caret", "ellipsis", "overflow", "plus-minus"];
 const determinateTypeOptions: DeterminateType[] = ["determinate", "indeterminate"];
-const fillTypeOptions: FillType[] = ["single", "range"];
-const labelTypeOptions: LabelType[] = ["percent", "units"];
-const clickTypeOptions: ClickType[] = ["click", "hover"];
+const fillTypeOptions: MeterFillType[] = ["single", "range"];
+const labelTypeOptions: MeterLabelType[] = ["percent", "units"];
+const clickTypeOptions: DropdownClickType[] = ["click", "hover"];
 const collapseDirectionOptions: CollapseDirection[] = ["down", "up"];
 const textTypeOptions: TextType[] = [
   "text",
@@ -111,8 +112,9 @@ const textTypeOptions: TextType[] = [
   "time",
   "date",
 ];
-const modeOptions: Mode[] = ["offset", "name"];
+const modeOptions: TimeZoneMode[] = ["offset", "name"];
 const selectionAppearanceOptions: SelectionAppearance[] = ["icon", "border"];
+const shellDisplayModeOptions: ShellDisplayMode[] = ["dock", "float", "overlay"];
 
 export const ATTRIBUTES: CommonAttributes = {
   alignment: {
@@ -215,4 +217,8 @@ export const ATTRIBUTES: CommonAttributes = {
     values: selectionAppearanceOptions,
     defaultValue: selectionAppearanceOptions[0],
   },
+  shellDisplayMode: {
+    values: shellDisplayModeOptions,
+    defaultValue: shellDisplayModeOptions[0],
+  },
 };

packages/calcite-components/src/components.d.ts

@@ -5,12 +5,13 @@
  * It contains typing information for all components that exist in this project.
  */
 import { HTMLStencilElement, JSXBase } from "@stencil/core/internal";
-import { Alignment, Appearance, Columns, FlipContext, IconType, Kind, Layout, LogicalFlowPosition, Position, Scale, SelectionAppearance as SelectionAppearance1, SelectionMode, Status, Width } from "./components/interfaces";
+import { Alignment, Appearance, CollapseDirection, FlipContext, IconType, Kind, Layout, LogicalFlowPosition, Position, Scale, SelectionAppearance as SelectionAppearance1, SelectionMode, Status, Width } from "./components/interfaces";
 import { RequestedItem } from "./components/accordion/interfaces";
 import { RequestedItem as RequestedItem1 } from "./components/accordion-item/interfaces";
 import { ActionMessages } from "./components/action/assets/action/t9n";
 import { EffectivePlacement, LogicalPlacement, MenuPlacement, OverlayPositioning, ReferenceElement } from "./utils/floating-ui";
 import { ActionBarMessages } from "./components/action-bar/assets/action-bar/t9n";
+import { Columns } from "./components/action-group/interfaces";
 import { ActionGroupMessages } from "./components/action-group/assets/action-group/t9n";
 import { ActionPadMessages } from "./components/action-pad/assets/action-pad/t9n";
 import { AlertDuration, Sync } from "./components/alert/interfaces";
@@ -61,7 +62,7 @@ import { ListItemMessages } from "./components/list-item/assets/list-item/t9n";
 import { MenuMessages } from "./components/menu/assets/menu/t9n";
 import { MenuItemMessages } from "./components/menu-item/assets/menu-item/t9n";
 import { MenuItemCustomEvent } from "./components/menu-item/interfaces";
-import { MeterLabelType } from "./components/meter/interfaces";
+import { MeterFillType, MeterLabelType } from "./components/meter/interfaces";
 import { ModalMessages } from "./components/modal/assets/modal/t9n";
 import { NoticeMessages } from "./components/notice/assets/notice/t9n";
 import { PaginationMessages } from "./components/pagination/assets/pagination/t9n";
@@ -95,12 +96,13 @@ import { TipManagerMessages } from "./components/tip-manager/assets/tip-manager/
 import { TreeItemSelectDetail } from "./components/tree-item/interfaces";
 import { ValueListMessages } from "./components/value-list/assets/value-list/t9n";
 import { ListItemAndHandle } from "./components/value-list-item/interfaces";
-export { Alignment, Appearance, Columns, FlipContext, IconType, Kind, Layout, LogicalFlowPosition, Position, Scale, SelectionAppearance as SelectionAppearance1, SelectionMode, Status, Width } from "./components/interfaces";
+export { Alignment, Appearance, CollapseDirection, FlipContext, IconType, Kind, Layout, LogicalFlowPosition, Position, Scale, SelectionAppearance as SelectionAppearance1, SelectionMode, Status, Width } from "./components/interfaces";
 export { RequestedItem } from "./components/accordion/interfaces";
 export { RequestedItem as RequestedItem1 } from "./components/accordion-item/interfaces";
 export { ActionMessages } from "./components/action/assets/action/t9n";
 export { EffectivePlacement, LogicalPlacement, MenuPlacement, OverlayPositioning, ReferenceElement } from "./utils/floating-ui";
 export { ActionBarMessages } from "./components/action-bar/assets/action-bar/t9n";
+export { Columns } from "./components/action-group/interfaces";
 export { ActionGroupMessages } from "./components/action-group/assets/action-group/t9n";
 export { ActionPadMessages } from "./components/action-pad/assets/action-pad/t9n";
 export { AlertDuration, Sync } from "./components/alert/interfaces";
@@ -151,7 +153,7 @@ export { ListItemMessages } from "./components/list-item/assets/list-item/t9n";
 export { MenuMessages } from "./components/menu/assets/menu/t9n";
 export { MenuItemMessages } from "./components/menu-item/assets/menu-item/t9n";
 export { MenuItemCustomEvent } from "./components/menu-item/interfaces";
-export { MeterLabelType } from "./components/meter/interfaces";
+export { MeterFillType, MeterLabelType } from "./components/meter/interfaces";
 export { ModalMessages } from "./components/modal/assets/modal/t9n";
 export { NoticeMessages } from "./components/notice/assets/notice/t9n";
 export { PaginationMessages } from "./components/pagination/assets/pagination/t9n";
@@ -247,7 +249,7 @@ export namespace Components {
         /**
           * Specifies the type of the icon in the header inherited from the `calcite-accordion`.
          */
-        "iconType": "chevron" | "caret" | "plus-minus";
+        "iconType": Extract<"chevron" | "caret" | "plus-minus", IconType>;
         /**
           * Specifies the size of the component inherited from the `calcite-accordion`.
          */
@@ -1858,7 +1860,7 @@ export namespace Components {
         /**
           * Specifies the direction of the collapse.
          */
-        "collapseDirection": "down" | "up";
+        "collapseDirection": CollapseDirection;
         /**
           * When `true`, hides the component's content area.
          */
@@ -3252,7 +3254,7 @@ export namespace Components {
         /**
           * Specifies the component's display, where `"single"` displays a single color and `"range"` displays a range of colors based on provided `low`, `high`, `min` or `max` values.
          */
-        "fillType": "single" | "range";
+        "fillType": MeterFillType;
         /**
           * The `id` of the form that will be associated with the component.  When not set, the component will be associated with its ancestor form element, if any.
          */
@@ -3630,7 +3632,7 @@ export namespace Components {
         /**
           * Specifies the direction of the collapse.
          */
-        "collapseDirection": "down" | "up";
+        "collapseDirection": CollapseDirection;
         /**
           * When `true`, hides the component's content area.
          */
@@ -7955,7 +7957,7 @@ declare namespace LocalJSX {
         /**
           * Specifies the type of the icon in the header inherited from the `calcite-accordion`.
          */
-        "iconType"?: "chevron" | "caret" | "plus-minus";
+        "iconType"?: Extract<"chevron" | "caret" | "plus-minus", IconType>;
         "onCalciteInternalAccordionItemClose"?: (event: CalciteAccordionItemCustomEvent<void>) => void;
         "onCalciteInternalAccordionItemSelect"?: (event: CalciteAccordionItemCustomEvent<RequestedItem1>) => void;
         /**
@@ -9653,7 +9655,7 @@ declare namespace LocalJSX {
         /**
           * Specifies the direction of the collapse.
          */
-        "collapseDirection"?: "down" | "up";
+        "collapseDirection"?: CollapseDirection;
         /**
           * When `true`, hides the component's content area.
          */
@@ -11153,7 +11155,7 @@ declare namespace LocalJSX {
         /**
           * Specifies the component's display, where `"single"` displays a single color and `"range"` displays a range of colors based on provided `low`, `high`, `min` or `max` values.
          */
-        "fillType"?: "single" | "range";
+        "fillType"?: MeterFillType;
         /**
           * The `id` of the form that will be associated with the component.  When not set, the component will be associated with its ancestor form element, if any.
          */
@@ -11526,7 +11528,7 @@ declare namespace LocalJSX {
         /**
           * Specifies the direction of the collapse.
          */
-        "collapseDirection"?: "down" | "up";
+        "collapseDirection"?: CollapseDirection;
         /**
           * When `true`, hides the component's content area.
          */

packages/calcite-components/src/components/accordion-item/accordion-item.tsx

@@ -23,7 +23,7 @@ import {
 } from "../../utils/dom";
 import { CSS_UTILITY } from "../../utils/resources";
 import { getIconScale } from "../../utils/component";
-import { FlipContext, Position, Scale, SelectionMode } from "../interfaces";
+import { FlipContext, Position, Scale, SelectionMode, IconType } from "../interfaces";
 import { componentFocusable } from "../../utils/component";
 import { SLOTS, CSS, IDS } from "./resources";
 import { RequestedItem } from "./interfaces";
@@ -74,7 +74,7 @@ export class AccordionItem implements ConditionalSlotComponent {
    *
    * @internal
    */
-  @Prop() iconType: "chevron" | "caret" | "plus-minus";
+  @Prop() iconType: Extract<"chevron" | "caret" | "plus-minus", IconType>;
 
   /**
    * The containing `accordion` element.

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

@@ -20,9 +20,10 @@ import {
   updateMessages,
 } from "../../utils/t9n";
 import { SLOTS as ACTION_MENU_SLOTS } from "../action-menu/resources";
-import { Columns, Layout, Scale } from "../interfaces";
+import { Layout, Scale } from "../interfaces";
 import { OverlayPositioning } from "../../utils/floating-ui";
 import { slotChangeHasAssignedElement } from "../../utils/dom";
+import { Columns } from "./interfaces";
 import { ActionGroupMessages } from "./assets/action-group/t9n";
 import { ICONS, SLOTS, CSS } from "./resources";
 

packages/calcite-components/src/components/action-group/interfaces.ts

@@ -0,0 +1 @@
+export type Columns = 1 | 2 | 3 | 4 | 5 | 6;

packages/calcite-components/src/components/dropdown/interfaces.ts

@@ -1,3 +1,5 @@
 export interface ItemKeyboardEvent {
   keyboardEvent: KeyboardEvent;
 }
+
+export type DropdownClickType = "click" | "hover";

packages/calcite-components/src/components/flow-item/flow-item.tsx

@@ -36,6 +36,7 @@ import {
 import { HeadingLevel } from "../functional/Heading";
 import { SLOTS as PANEL_SLOTS } from "../panel/resources";
 import { OverlayPositioning } from "../../utils/floating-ui";
+import { CollapseDirection } from "../interfaces";
 import { FlowItemMessages } from "./assets/flow-item/t9n";
 import { CSS, ICONS, SLOTS } from "./resources";
 
@@ -83,7 +84,7 @@ export class FlowItem
    *
    * @internal
    */
-  @Prop() collapseDirection: "down" | "up" = "down";
+  @Prop() collapseDirection: CollapseDirection = "down";
 
   /**
    * When `true`, the component is collapsible.

packages/calcite-components/src/components/input/interfaces.ts

@@ -1,3 +1,14 @@
 export type InputPlacement = "vertical" | "horizontal" | "none";
 export type NumberNudgeDirection = "up" | "down";
 export type SetValueOrigin = "initial" | "connected" | "user" | "reset" | "direct";
+export type TextType =
+  | "text"
+  | "textarea"
+  | "email"
+  | "password"
+  | "tel"
+  | "number"
+  | "search"
+  | "file"
+  | "time"
+  | "date";

packages/calcite-components/src/components/interfaces.ts

@@ -1,7 +1,6 @@
 /* Note: using `.d.ts` file extension will exclude it from the output build */
 export type Alignment = "start" | "center" | "end";
 export type Appearance = "solid" | "outline" | "outline-fill" | "transparent";
-export type Columns = 1 | 2 | 3 | 4 | 5 | 6;
 export type FlipContext = "both" | "start" | "end";
 export type Kind = "brand" | "danger" | "info" | "inverse" | "neutral" | "warning" | "success";
 export type Layout =
@@ -30,27 +29,6 @@ export type SelectionMode =
 export type Scale = "s" | "m" | "l";
 export type Status = "invalid" | "valid" | "idle";
 export type Width = "auto" | "half" | "full";
-export type ArrowType = "inline" | "edge" | "none";
-export type DisplayMode = "dock" | "float" | "overlay";
-export type ToggleDisplay = "button" | "switch";
-export type Dir = "ltr" | "rtl";
-export type ButtonType = "radio" | "checkbox";
-export type InteractionMode = "interactive" | "static";
 export type IconType = "chevron" | "caret" | "ellipsis" | "overflow" | "plus-minus";
-export type DeterminateType = "determinate" | "indeterminate";
-export type FillType = "single" | "range";
-export type LabelType = "percent" | "units";
-export type ClickType = "click" | "hover";
 export type CollapseDirection = "down" | "up";
-export type TextType =
-  | "text"
-  | "textarea"
-  | "email"
-  | "password"
-  | "tel"
-  | "number"
-  | "search"
-  | "file"
-  | "time"
-  | "date";
-export type Mode = "offset" | "name";
+export type Dir = "ltr" | "rtl";

packages/calcite-components/src/components/loader/interfaces.ts

@@ -0,0 +1 @@
+export type DeterminateType = "determinate" | "indeterminate";

packages/calcite-components/src/components/meter/interfaces.ts

@@ -1 +1,2 @@
 export type MeterLabelType = "percent" | "units";
+export type MeterFillType = "single" | "range";

packages/calcite-components/src/components/meter/meter.tsx

@@ -23,7 +23,7 @@ import {
 import { intersects } from "../../utils/dom";
 import { createObserver } from "../../utils/observers";
 import { CSS } from "./resources";
-import { MeterLabelType } from "./interfaces";
+import { MeterFillType, MeterLabelType } from "./interfaces";
 
 @Component({
   tag: "calcite-meter",
@@ -45,7 +45,7 @@ export class Meter implements FormComponent, LoadableComponent, LocalizedCompone
   @Prop({ reflect: true }) disabled = false;
 
   /** Specifies the component's display, where `"single"` displays a single color and `"range"` displays a range of colors based on provided `low`, `high`, `min` or `max` values. */
-  @Prop({ reflect: true }) fillType: "single" | "range" = "range";
+  @Prop({ reflect: true }) fillType: MeterFillType = "range";
 
   /**
    * The `id` of the form that will be associated with the component.

packages/calcite-components/src/components/panel/panel.tsx

@@ -42,6 +42,7 @@ import {
   updateMessages,
 } from "../../utils/t9n";
 import { OverlayPositioning } from "../../utils/floating-ui";
+import { CollapseDirection } from "../interfaces";
 import { PanelMessages } from "./assets/panel/t9n";
 import { CSS, ICONS, SLOTS } from "./resources";
 
@@ -94,7 +95,7 @@ export class Panel
    *
    * @internal
    */
-  @Prop() collapseDirection: "down" | "up" = "down";
+  @Prop() collapseDirection: CollapseDirection = "down";
 
   /**
    * When `true`, the component is collapsible.

packages/calcite-components/src/components/sheet/sheet.stories.ts

@@ -14,15 +14,15 @@ export default {
   args: {
     open: true,
     position: logicalFlowPosition.values[0],
-    displayMode: displayMode.values[2],
+    displayMode: displayMode.values[1],
   },
   argTypes: {
     position: {
       options: logicalFlowPosition.values,
       control: { type: "select" },
     },
     displayMode: {
-      options: displayMode.values.filter((option) => option !== "dock"),
+      options: displayMode.values,
       control: { type: "select" },
     },
   },