@salt-ds/core 1.20.0 → 1.21.0

package/dist-es/tooltip/useTooltip.js.map

@@ -1 +1 @@
-{"version":3,"file":"useTooltip.js","sources":["../src/tooltip/useTooltip.ts"],"sourcesContent":["import {\n  arrow,\n  flip,\n  offset,\n  safePolygon,\n  shift,\n  useDismiss,\n  useFocus,\n  useHover,\n  useInteractions,\n  useRole,\n  limitShift,\n} from \"@floating-ui/react\";\nimport { HTMLProps, useRef } from \"react\";\nimport { useControlled, UseFloatingUIProps, useFloatingUI } from \"../utils\";\nimport { useAriaAnnounce } from \"./useAriaAnnounce\";\n\nexport interface UseTooltipProps\n  extends Partial<\n    Pick<UseFloatingUIProps, \"onOpenChange\" | \"open\" | \"placement\">\n  > {\n  /**\n   * Do not respond to focus events.\n   */\n  disableFocusListener?: boolean;\n  /**\n   * Do not respond to hover events.\n   */\n  disableHoverListener?: boolean;\n  /**\n   * The number of milliseconds to wait before showing the tooltip.\n   * This prop won't impact the enter touch delay (`enterTouchDelay`).\n   */\n  enterDelay?: number;\n  /**\n   * The number of milliseconds to wait before hiding the tooltip.\n   * This prop won't impact the leave touch delay (`leaveTouchDelay`).\n   */\n  leaveDelay?: number;\n}\n\nexport function useTooltip(props?: UseTooltipProps) {\n  const {\n    enterDelay,\n    leaveDelay,\n    open: openProp,\n    onOpenChange,\n    placement: placementProp,\n    disableHoverListener,\n    disableFocusListener,\n  } = props ?? {};\n\n  const arrowRef = useRef<SVGSVGElement | null>(null);\n\n  const [open, setOpen] = useControlled({\n    controlled: openProp,\n    default: false,\n    name: \"Tooltip\",\n    state: \"open\",\n  });\n  const handleOpenChange = (open: boolean) => {\n    setOpen(open);\n    onOpenChange?.(open);\n  };\n\n  const { floating, reference, x, y, strategy, placement, context, elements } =\n    useFloatingUI({\n      open,\n      onOpenChange: handleOpenChange,\n      placement: placementProp,\n      middleware: [\n        offset(8),\n        shift({ limiter: limitShift() }),\n        flip({\n          fallbackAxisSideDirection: \"end\",\n          fallbackStrategy: \"initialPlacement\",\n        }),\n        arrow({ element: arrowRef }),\n      ],\n    });\n\n  const { getReferenceProps, getFloatingProps } = useInteractions([\n    useHover(context, {\n      delay: {\n        open: enterDelay,\n        close: leaveDelay,\n      },\n      enabled: !disableHoverListener,\n      handleClose: safePolygon(),\n    }),\n    useFocus(context, { enabled: !disableFocusListener }),\n    useRole(context, { role: \"tooltip\" }),\n    useDismiss(context),\n    useAriaAnnounce(context, {\n      delay: {\n        open: enterDelay,\n        close: leaveDelay,\n      },\n    }),\n  ]);\n\n  const arrowProps = {\n    ref: arrowRef,\n    context,\n  };\n\n  const getTooltipProps = (): HTMLProps<HTMLDivElement> => {\n    // eslint-disable-next-line @typescript-eslint/no-unused-vars -- tabIndex raises false positives because it is set to \"-1\".\n    const { tabIndex, ...tooltipProps } = getFloatingProps({\n      // @ts-expect-error - `data-*` props need extra typing when not used on a DOM element.\n      \"data-placement\": placement,\n      ref: floating,\n    });\n\n    return tooltipProps;\n  };\n\n  const getTriggerProps = () =>\n    getReferenceProps({\n      ref: reference,\n    });\n\n  const getTooltipPosition = () => ({\n    top: y ?? 0,\n    left: x ?? 0,\n    position: strategy,\n    width: elements.floating?.offsetWidth,\n    height: elements.floating?.offsetHeight,\n  });\n\n  return {\n    arrowProps,\n    open,\n    floating,\n    reference,\n    getTooltipProps,\n    getTriggerProps,\n    getTooltipPosition,\n  };\n}\n"],"names":["open"],"mappings":";;;;;;;;;;AAyCO,SAAS,WAAW,KAAyB,EAAA;AAClD,EAAM,MAAA;AAAA,IACJ,UAAA;AAAA,IACA,UAAA;AAAA,IACA,IAAM,EAAA,QAAA;AAAA,IACN,YAAA;AAAA,IACA,SAAW,EAAA,aAAA;AAAA,IACX,oBAAA;AAAA,IACA,oBAAA;AAAA,GACF,GAAI,wBAAS,EAAC,CAAA;AAEd,EAAM,MAAA,QAAA,GAAW,OAA6B,IAAI,CAAA,CAAA;AAElD,EAAA,MAAM,CAAC,IAAA,EAAM,OAAO,CAAA,GAAI,aAAc,CAAA;AAAA,IACpC,UAAY,EAAA,QAAA;AAAA,IACZ,OAAS,EAAA,KAAA;AAAA,IACT,IAAM,EAAA,SAAA;AAAA,IACN,KAAO,EAAA,MAAA;AAAA,GACR,CAAA,CAAA;AACD,EAAM,MAAA,gBAAA,GAAmB,CAACA,KAAkB,KAAA;AAC1C,IAAA,OAAA,CAAQA,KAAI,CAAA,CAAA;AACZ,IAAeA,YAAAA,IAAAA,IAAAA,GAAAA,KAAAA,CAAAA,GAAAA,YAAAA,CAAAA,KAAAA,CAAAA,CAAAA;AAAA,GACjB,CAAA;AAEA,EAAM,MAAA,EAAE,QAAU,EAAA,SAAA,EAAW,CAAG,EAAA,CAAA,EAAG,UAAU,SAAW,EAAA,OAAA,EAAS,QAAS,EAAA,GACxE,aAAc,CAAA;AAAA,IACZ,IAAA;AAAA,IACA,YAAc,EAAA,gBAAA;AAAA,IACd,SAAW,EAAA,aAAA;AAAA,IACX,UAAY,EAAA;AAAA,MACV,OAAO,CAAC,CAAA;AAAA,MACR,KAAM,CAAA,EAAE,OAAS,EAAA,UAAA,IAAc,CAAA;AAAA,MAC/B,IAAK,CAAA;AAAA,QACH,yBAA2B,EAAA,KAAA;AAAA,QAC3B,gBAAkB,EAAA,kBAAA;AAAA,OACnB,CAAA;AAAA,MACD,KAAM,CAAA,EAAE,OAAS,EAAA,QAAA,EAAU,CAAA;AAAA,KAC7B;AAAA,GACD,CAAA,CAAA;AAEH,EAAA,MAAM,EAAE,iBAAA,EAAmB,gBAAiB,EAAA,GAAI,eAAgB,CAAA;AAAA,IAC9D,SAAS,OAAS,EAAA;AAAA,MAChB,KAAO,EAAA;AAAA,QACL,IAAM,EAAA,UAAA;AAAA,QACN,KAAO,EAAA,UAAA;AAAA,OACT;AAAA,MACA,SAAS,CAAC,oBAAA;AAAA,MACV,aAAa,WAAY,EAAA;AAAA,KAC1B,CAAA;AAAA,IACD,SAAS,OAAS,EAAA,EAAE,OAAS,EAAA,CAAC,sBAAsB,CAAA;AAAA,IACpD,OAAQ,CAAA,OAAA,EAAS,EAAE,IAAA,EAAM,WAAW,CAAA;AAAA,IACpC,WAAW,OAAO,CAAA;AAAA,IAClB,gBAAgB,OAAS,EAAA;AAAA,MACvB,KAAO,EAAA;AAAA,QACL,IAAM,EAAA,UAAA;AAAA,QACN,KAAO,EAAA,UAAA;AAAA,OACT;AAAA,KACD,CAAA;AAAA,GACF,CAAA,CAAA;AAED,EAAA,MAAM,UAAa,GAAA;AAAA,IACjB,GAAK,EAAA,QAAA;AAAA,IACL,OAAA;AAAA,GACF,CAAA;AAEA,EAAA,MAAM,kBAAkB,MAAiC;AAEvD,IAAA,MAAM,EAAE,QAAA,EAAA,GAAa,YAAa,EAAA,GAAI,gBAAiB,CAAA;AAAA,MAErD,gBAAkB,EAAA,SAAA;AAAA,MAClB,GAAK,EAAA,QAAA;AAAA,KACN,CAAA,CAAA;AAED,IAAO,OAAA,YAAA,CAAA;AAAA,GACT,CAAA;AAEA,EAAM,MAAA,eAAA,GAAkB,MACtB,iBAAkB,CAAA;AAAA,IAChB,GAAK,EAAA,SAAA;AAAA,GACN,CAAA,CAAA;AAEH,EAAA,MAAM,qBAAqB,MAAG;AA1HhC,IAAA,IAAA,EAAA,EAAA,EAAA,CAAA;AA0HoC,IAAA,OAAA;AAAA,MAChC,KAAK,CAAK,IAAA,IAAA,GAAA,CAAA,GAAA,CAAA;AAAA,MACV,MAAM,CAAK,IAAA,IAAA,GAAA,CAAA,GAAA,CAAA;AAAA,MACX,QAAU,EAAA,QAAA;AAAA,MACV,KAAA,EAAA,CAAO,EAAS,GAAA,QAAA,CAAA,QAAA,KAAT,IAAmB,GAAA,KAAA,CAAA,GAAA,EAAA,CAAA,WAAA;AAAA,MAC1B,MAAA,EAAA,CAAQ,EAAS,GAAA,QAAA,CAAA,QAAA,KAAT,IAAmB,GAAA,KAAA,CAAA,GAAA,EAAA,CAAA,YAAA;AAAA,KAC7B,CAAA;AAAA,GAAA,CAAA;AAEA,EAAO,OAAA;AAAA,IACL,UAAA;AAAA,IACA,IAAA;AAAA,IACA,QAAA;AAAA,IACA,SAAA;AAAA,IACA,eAAA;AAAA,IACA,eAAA;AAAA,IACA,kBAAA;AAAA,GACF,CAAA;AACF;;;;"}
+{"version":3,"file":"useTooltip.js","sources":["../src/tooltip/useTooltip.ts"],"sourcesContent":["import {\n  arrow,\n  flip,\n  offset,\n  safePolygon,\n  shift,\n  useDismiss,\n  useFocus,\n  useHover,\n  useInteractions,\n  useRole,\n  limitShift,\n} from \"@floating-ui/react\";\nimport { HTMLProps, useRef } from \"react\";\nimport { useControlled, UseFloatingUIProps, useFloatingUI } from \"../utils\";\nimport { useAriaAnnounce } from \"./useAriaAnnounce\";\n\nexport interface UseTooltipProps\n  extends Partial<\n    Pick<UseFloatingUIProps, \"onOpenChange\" | \"open\" | \"placement\">\n  > {\n  /**\n   * Do not respond to focus events.\n   */\n  disableFocusListener?: boolean;\n  /**\n   * Do not respond to hover events.\n   */\n  disableHoverListener?: boolean;\n  /**\n   * The number of milliseconds to wait before showing the tooltip.\n   * This prop won't impact the enter touch delay (`enterTouchDelay`).\n   */\n  enterDelay?: number;\n  /**\n   * The number of milliseconds to wait before hiding the tooltip.\n   * This prop won't impact the leave touch delay (`leaveTouchDelay`).\n   */\n  leaveDelay?: number;\n}\n\nexport function useTooltip(props?: UseTooltipProps) {\n  const {\n    enterDelay,\n    leaveDelay,\n    open: openProp,\n    onOpenChange,\n    placement: placementProp,\n    disableHoverListener,\n    disableFocusListener,\n  } = props ?? {};\n\n  const arrowRef = useRef<SVGSVGElement | null>(null);\n\n  const [open, setOpen] = useControlled({\n    controlled: openProp,\n    default: false,\n    name: \"Tooltip\",\n    state: \"open\",\n  });\n  const handleOpenChange = (open: boolean) => {\n    setOpen(open);\n    onOpenChange?.(open);\n  };\n\n  const { floating, reference, x, y, strategy, placement, context, elements } =\n    useFloatingUI({\n      open,\n      onOpenChange: handleOpenChange,\n      placement: placementProp,\n      middleware: [\n        offset(8),\n        shift({ limiter: limitShift() }),\n        flip({\n          fallbackAxisSideDirection: \"end\",\n          fallbackStrategy: \"initialPlacement\",\n        }),\n        arrow({ element: arrowRef }),\n      ],\n    });\n\n  const { getReferenceProps, getFloatingProps } = useInteractions([\n    useHover(context, {\n      delay: {\n        open: enterDelay,\n        close: leaveDelay,\n      },\n      enabled: !disableHoverListener,\n      handleClose: safePolygon(),\n    }),\n    useFocus(context, { enabled: !disableFocusListener }),\n    useRole(context, { role: \"tooltip\" }),\n    useDismiss(context),\n    useAriaAnnounce(context, {\n      delay: {\n        open: enterDelay,\n        close: leaveDelay,\n      },\n    }),\n  ]);\n\n  const arrowProps = {\n    ref: arrowRef,\n    context,\n  };\n\n  const getTooltipProps = (): HTMLProps<HTMLDivElement> => {\n    // eslint-disable-next-line @typescript-eslint/no-unused-vars -- tabIndex raises false positives because it is set to \"-1\".\n    const { tabIndex, ...tooltipProps } = getFloatingProps({\n      // @ts-expect-error - `data-*` props need extra typing when not used on a DOM element.\n      \"data-placement\": placement,\n      ref: floating,\n    });\n\n    return tooltipProps;\n  };\n\n  const getTriggerProps = () =>\n    getReferenceProps({\n      ref: reference,\n    });\n\n  const getTooltipPosition = () => ({\n    top: y ?? 0,\n    left: x ?? 0,\n    position: strategy,\n    width: elements.floating?.offsetWidth,\n    height: elements.floating?.offsetHeight,\n  });\n\n  return {\n    arrowProps,\n    open,\n    floating,\n    reference,\n    getTooltipProps,\n    getTriggerProps,\n    getTooltipPosition,\n  };\n}\n"],"names":["open"],"mappings":"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"}

package/dist-es/utils/ownerWindow.js.map

@@ -1 +1 @@
-{"version":3,"file":"ownerWindow.js","sources":["../src/utils/ownerWindow.ts"],"sourcesContent":["import { ownerDocument } from \"./ownerDocument\";\n\nexport function ownerWindow(node: Node | null | undefined): Window {\n  const doc = ownerDocument(node);\n  return doc.defaultView || window;\n}\n"],"names":[],"mappings":";;AAEO,SAAS,YAAY,IAAuC,EAAA;AACjE,EAAM,MAAA,GAAA,GAAM,cAAc,IAAI,CAAA,CAAA;AAC9B,EAAA,OAAO,IAAI,WAAe,IAAA,MAAA,CAAA;AAC5B;;;;"}
+{"version":3,"file":"ownerWindow.js","sources":["../src/utils/ownerWindow.ts"],"sourcesContent":["import { ownerDocument } from \"./ownerDocument\";\n\nexport function ownerWindow(node: Node | null | undefined) {\n  const doc = ownerDocument(node);\n  return doc.defaultView || window;\n}\n"],"names":[],"mappings":";;AAEO,SAAS,YAAY,IAA+B,EAAA;AACzD,EAAM,MAAA,GAAA,GAAM,cAAc,IAAI,CAAA,CAAA;AAC9B,EAAA,OAAO,IAAI,WAAe,IAAA,MAAA,CAAA;AAC5B;;;;"}

package/dist-es/utils/useEventCallback.js

@@ -0,0 +1,16 @@
+import { useRef, useCallback } from 'react';
+import { useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect.js';
+
+function useEventCallback(fn) {
+  const ref = useRef(fn);
+  useIsomorphicLayoutEffect(() => {
+    ref.current = fn;
+  });
+  return useCallback(
+    (...args) => (0, ref.current)(...args),
+    []
+  );
+}
+
+export { useEventCallback };
+//# sourceMappingURL=useEventCallback.js.map

package/dist-es/utils/useEventCallback.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useEventCallback.js","sources":["../src/utils/useEventCallback.ts"],"sourcesContent":["import { useRef, useCallback } from \"react\";\nimport { useIsomorphicLayoutEffect } from \"./useIsomorphicLayoutEffect\";\n\n/**\n * https://github.com/facebook/react/issues/14099#issuecomment-440013892\n */\nexport function useEventCallback<Args extends unknown[], Return>(\n  fn: (...args: Args) => Return\n): (...args: Args) => Return {\n  const ref = useRef(fn);\n  useIsomorphicLayoutEffect(() => {\n    ref.current = fn;\n  });\n  return useCallback(\n    (...args: Args) =>\n      // tslint:disable-next-line:ban-comma-operator\n      (void 0, ref.current)(...args),\n    []\n  );\n}\n"],"names":[],"mappings":";;;AAMO,SAAS,iBACd,EAC2B,EAAA;AAC3B,EAAM,MAAA,GAAA,GAAM,OAAO,EAAE,CAAA,CAAA;AACrB,EAAA,yBAAA,CAA0B,MAAM;AAC9B,IAAA,GAAA,CAAI,OAAU,GAAA,EAAA,CAAA;AAAA,GACf,CAAA,CAAA;AACD,EAAO,OAAA,WAAA;AAAA,IACL,IAAI,IAED,KAAA,IAAQ,GAAI,CAAA,OAAA,EAAS,GAAG,IAAI,CAAA;AAAA,IAC/B,EAAC;AAAA,GACH,CAAA;AACF;;;;"}

package/dist-es/utils/useResizeObserver.js

@@ -0,0 +1,25 @@
+import { useEffect } from 'react';
+import { ownerWindow } from './ownerWindow.js';
+
+function useResizeObserver({ ref, onResize }) {
+  useEffect(() => {
+    const element = ref == null ? void 0 : ref.current;
+    if (!element)
+      return;
+    const win = ownerWindow(element);
+    const resizeObserver = new win.ResizeObserver((entries) => {
+      if (entries.length === 0)
+        return;
+      onResize();
+    });
+    resizeObserver.observe(element);
+    return () => {
+      if (element) {
+        resizeObserver.unobserve(element);
+      }
+    };
+  }, [ref, onResize]);
+}
+
+export { useResizeObserver };
+//# sourceMappingURL=useResizeObserver.js.map

package/dist-es/utils/useResizeObserver.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useResizeObserver.js","sources":["../src/utils/useResizeObserver.ts"],"sourcesContent":["import { useEffect, RefObject } from \"react\";\nimport { ownerWindow } from \"./ownerWindow\";\n\nexport interface UseResizeObserverProps {\n  ref: RefObject<HTMLElement>;\n  onResize: () => void;\n}\n\nexport function useResizeObserver({ ref, onResize }: UseResizeObserverProps) {\n  useEffect(() => {\n    const element = ref?.current;\n    if (!element) return;\n\n    const win = ownerWindow(element);\n\n    const resizeObserver = new win.ResizeObserver((entries) => {\n      if (entries.length === 0) return;\n\n      onResize();\n    });\n    resizeObserver.observe(element);\n\n    return () => {\n      if (element) {\n        resizeObserver.unobserve(element);\n      }\n    };\n  }, [ref, onResize]);\n}\n"],"names":[],"mappings":";;;AAQO,SAAS,iBAAkB,CAAA,EAAE,GAAK,EAAA,QAAA,EAAoC,EAAA;AAC3E,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,MAAM,UAAU,GAAK,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,GAAA,CAAA,OAAA,CAAA;AACrB,IAAA,IAAI,CAAC,OAAA;AAAS,MAAA,OAAA;AAEd,IAAM,MAAA,GAAA,GAAM,YAAY,OAAO,CAAA,CAAA;AAE/B,IAAA,MAAM,cAAiB,GAAA,IAAI,GAAI,CAAA,cAAA,CAAe,CAAC,OAAY,KAAA;AACzD,MAAA,IAAI,QAAQ,MAAW,KAAA,CAAA;AAAG,QAAA,OAAA;AAE1B,MAAS,QAAA,EAAA,CAAA;AAAA,KACV,CAAA,CAAA;AACD,IAAA,cAAA,CAAe,QAAQ,OAAO,CAAA,CAAA;AAE9B,IAAA,OAAO,MAAM;AACX,MAAA,IAAI,OAAS,EAAA;AACX,QAAA,cAAA,CAAe,UAAU,OAAO,CAAA,CAAA;AAAA,OAClC;AAAA,KACF,CAAA;AAAA,GACC,EAAA,CAAC,GAAK,EAAA,QAAQ,CAAC,CAAA,CAAA;AACpB;;;;"}

package/dist-es/utils/useValueEffect.js

@@ -0,0 +1,120 @@
+import { useState, useRef } from 'react';
+import '../accordion/AccordionGroup.js';
+import '../accordion/AccordionPanel.js';
+import '../accordion/Accordion.js';
+import '../accordion/AccordionHeader.js';
+import '../aria-announcer/AriaAnnouncerContext.js';
+import 'react/jsx-runtime';
+import './useFloatingUI/useFloatingUI.js';
+import './useId.js';
+import { useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect.js';
+import '../salt-provider/SaltProvider.js';
+import '../viewport/ViewportProvider.js';
+import 'clsx';
+import { useEventCallback } from './useEventCallback.js';
+import '../avatar/Avatar.js';
+import '../badge/Badge.js';
+import '../banner/Banner.js';
+import '../banner/BannerActions.js';
+import '../banner/BannerContent.js';
+import '../border-item/BorderItem.js';
+import '../border-layout/BorderLayout.js';
+import '../button/Button.js';
+import '../card/Card.js';
+import '../card/InteractableCard.js';
+import '../checkbox/Checkbox.js';
+import '../checkbox/CheckboxGroup.js';
+import '@salt-ds/styles';
+import '@salt-ds/window';
+import '@salt-ds/icons';
+import '../combo-box/ComboBox.js';
+import '../dialog/Dialog.js';
+import '../status-indicator/StatusIndicator.js';
+import '../text/Text.js';
+import '../text/Display.js';
+import '../text/Headings.js';
+import '../text/Label.js';
+import '../text/TextNotation.js';
+import '../text/TextAction.js';
+import '../dialog/DialogContext.js';
+import '../dialog/DialogActions.js';
+import '../dialog/DialogContent.js';
+import '../dialog/DialogCloseButton.js';
+import '../drawer/Drawer.js';
+import '../drawer/DrawerCloseButton.js';
+import '../dropdown/Dropdown.js';
+import '../file-drop-zone/FileDropZone.js';
+import '../file-drop-zone/FileDropZoneIcon.js';
+import '../file-drop-zone/FileDropZoneTrigger.js';
+import '../flex-item/FlexItem.js';
+import '../flex-layout/FlexLayout.js';
+import '../flow-layout/FlowLayout.js';
+import '../form-field/FormField.js';
+import '../form-field-context/FormFieldContext.js';
+import '../grid-item/GridItem.js';
+import '../grid-layout/GridLayout.js';
+import '../input/Input.js';
+import '../link/Link.js';
+import '../link-card/LinkCard.js';
+import '../list-control/ListControlContext.js';
+import '../multiline-input/MultilineInput.js';
+import '../navigation-item/NavigationItem.js';
+import '../option/Option.js';
+import '../option/OptionGroup.js';
+import '../pagination/Pagination.js';
+import '../pagination/Paginator.js';
+import '../pagination/CompactInput.js';
+import '../pagination/CompactPaginator.js';
+import '../pagination/GoToInput.js';
+import '../panel/Panel.js';
+import '../pill/Pill.js';
+import '../progress/CircularProgress/CircularProgress.js';
+import '../progress/LinearProgress/LinearProgress.js';
+import '../radio-button/RadioButton.js';
+import '../radio-button/RadioButtonGroup.js';
+import '../scrim/Scrim.js';
+import '../spinner/Spinner.js';
+import '../stack-layout/StackLayout.js';
+import '../status-adornment/StatusAdornment.js';
+import '../toast/Toast.js';
+import '../toast/ToastContent.js';
+import '../split-layout/SplitLayout.js';
+import '../switch/Switch.js';
+import '../toggle-button/ToggleButton.js';
+import '../toggle-button-group/ToggleButtonGroup.js';
+import '../toggle-button-group/ToggleButtonGroupContext.js';
+import '../tooltip/Tooltip.js';
+import '@floating-ui/react';
+
+function useValueEffect(defaultValue) {
+  const [value, setValue] = useState(defaultValue);
+  const effect = useRef(null);
+  const nextRef = useEventCallback(() => {
+    if (!effect.current) {
+      return;
+    }
+    const newValue = effect.current.next();
+    if (newValue.done) {
+      effect.current = null;
+      return;
+    }
+    if (value === newValue.value) {
+      nextRef();
+    } else {
+      setValue(newValue.value);
+    }
+  });
+  useIsomorphicLayoutEffect(() => {
+    if (effect.current) {
+      nextRef();
+    }
+  });
+  const queue = useEventCallback((fn) => {
+    effect.current = fn(value);
+    nextRef();
+  });
+  return [value, queue];
+}
+
+export { useValueEffect };
+//# sourceMappingURL=useValueEffect.js.map

package/dist-es/utils/useValueEffect.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useValueEffect.js","sources":["../src/utils/useValueEffect.ts"],"sourcesContent":["/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport { Dispatch, MutableRefObject, useRef, useState } from \"react\";\nimport { useIsomorphicLayoutEffect } from \"../index\";\nimport { useEventCallback } from \"./useEventCallback\";\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\ntype SetValueAction<S> = (prev: S) => Generator<any, void, unknown>;\n\n// This hook works like `useState`, but when setting the value, you pass a generator function\n// that can yield multiple values. Each yielded value updates the state and waits for the next\n// layout effect, then continues the generator. This allows sequential updates to state to be\n// written linearly.\nexport function useValueEffect<S>(\n  defaultValue: S | (() => S)\n): [S, Dispatch<SetValueAction<S>>] {\n  const [value, setValue] = useState(defaultValue);\n  const effect: MutableRefObject<Generator<S> | null> =\n    useRef<Generator<S> | null>(null);\n\n  // Store the function in a ref so we can always access the current version\n  // which has the proper `value` in scope.\n  const nextRef = useEventCallback(() => {\n    if (!effect.current) {\n      return;\n    }\n    // Run the generator to the next yield.\n    const newValue = effect.current.next();\n\n    // If the generator is done, reset the effect.\n    if (newValue.done) {\n      effect.current = null;\n      return;\n    }\n\n    // If the value is the same as the current value,\n    // then continue to the next yield. Otherwise,\n    // set the value in state and wait for the next layout effect.\n    if (value === newValue.value) {\n      nextRef();\n    } else {\n      setValue(newValue.value);\n    }\n  });\n\n  useIsomorphicLayoutEffect(() => {\n    // If there is an effect currently running, continue to the next yield.\n    if (effect.current) {\n      nextRef();\n    }\n  });\n\n  const queue: Dispatch<SetValueAction<S>> = useEventCallback((fn) => {\n    effect.current = fn(value);\n    nextRef();\n  });\n\n  return [value, queue];\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAuBO,SAAS,eACd,YACkC,EAAA;AAClC,EAAA,MAAM,CAAC,KAAA,EAAO,QAAQ,CAAA,GAAI,SAAS,YAAY,CAAA,CAAA;AAC/C,EAAM,MAAA,MAAA,GACJ,OAA4B,IAAI,CAAA,CAAA;AAIlC,EAAM,MAAA,OAAA,GAAU,iBAAiB,MAAM;AACrC,IAAI,IAAA,CAAC,OAAO,OAAS,EAAA;AACnB,MAAA,OAAA;AAAA,KACF;AAEA,IAAM,MAAA,QAAA,GAAW,MAAO,CAAA,OAAA,CAAQ,IAAK,EAAA,CAAA;AAGrC,IAAA,IAAI,SAAS,IAAM,EAAA;AACjB,MAAA,MAAA,CAAO,OAAU,GAAA,IAAA,CAAA;AACjB,MAAA,OAAA;AAAA,KACF;AAKA,IAAI,IAAA,KAAA,KAAU,SAAS,KAAO,EAAA;AAC5B,MAAQ,OAAA,EAAA,CAAA;AAAA,KACH,MAAA;AACL,MAAA,QAAA,CAAS,SAAS,KAAK,CAAA,CAAA;AAAA,KACzB;AAAA,GACD,CAAA,CAAA;AAED,EAAA,yBAAA,CAA0B,MAAM;AAE9B,IAAA,IAAI,OAAO,OAAS,EAAA;AAClB,MAAQ,OAAA,EAAA,CAAA;AAAA,KACV;AAAA,GACD,CAAA,CAAA;AAED,EAAM,MAAA,KAAA,GAAqC,gBAAiB,CAAA,CAAC,EAAO,KAAA;AAClE,IAAO,MAAA,CAAA,OAAA,GAAU,GAAG,KAAK,CAAA,CAAA;AACzB,IAAQ,OAAA,EAAA,CAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAO,OAAA,CAAC,OAAO,KAAK,CAAA,CAAA;AACtB;;;;"}

package/dist-es/viewport/ViewportProvider.js

@@ -5,6 +5,84 @@ import '../utils/useId.js';
 import { useIsomorphicLayoutEffect } from '../utils/useIsomorphicLayoutEffect.js';
 import '../salt-provider/SaltProvider.js';
 import 'clsx';
+import '../accordion/AccordionGroup.js';
+import '../accordion/AccordionPanel.js';
+import '../accordion/Accordion.js';
+import '../accordion/AccordionHeader.js';
+import '../aria-announcer/AriaAnnouncerContext.js';
+import '../avatar/Avatar.js';
+import '../badge/Badge.js';
+import '../banner/Banner.js';
+import '../banner/BannerActions.js';
+import '../banner/BannerContent.js';
+import '../border-item/BorderItem.js';
+import '../border-layout/BorderLayout.js';
+import '../button/Button.js';
+import '../card/Card.js';
+import '../card/InteractableCard.js';
+import '../checkbox/Checkbox.js';
+import '../checkbox/CheckboxGroup.js';
+import '@salt-ds/styles';
+import '@salt-ds/window';
+import '@salt-ds/icons';
+import '../combo-box/ComboBox.js';
+import '../dialog/Dialog.js';
+import '../status-indicator/StatusIndicator.js';
+import '../text/Text.js';
+import '../text/Display.js';
+import '../text/Headings.js';
+import '../text/Label.js';
+import '../text/TextNotation.js';
+import '../text/TextAction.js';
+import '../dialog/DialogContext.js';
+import '../dialog/DialogActions.js';
+import '../dialog/DialogContent.js';
+import '../dialog/DialogCloseButton.js';
+import '../drawer/Drawer.js';
+import '../drawer/DrawerCloseButton.js';
+import '../dropdown/Dropdown.js';
+import '../file-drop-zone/FileDropZone.js';
+import '../file-drop-zone/FileDropZoneIcon.js';
+import '../file-drop-zone/FileDropZoneTrigger.js';
+import '../flex-item/FlexItem.js';
+import '../flex-layout/FlexLayout.js';
+import '../flow-layout/FlowLayout.js';
+import '../form-field/FormField.js';
+import '../form-field-context/FormFieldContext.js';
+import '../grid-item/GridItem.js';
+import '../grid-layout/GridLayout.js';
+import '../input/Input.js';
+import '../link/Link.js';
+import '../link-card/LinkCard.js';
+import '../list-control/ListControlContext.js';
+import '../multiline-input/MultilineInput.js';
+import '../navigation-item/NavigationItem.js';
+import '../option/Option.js';
+import '../option/OptionGroup.js';
+import '../pagination/Pagination.js';
+import '../pagination/Paginator.js';
+import '../pagination/CompactInput.js';
+import '../pagination/CompactPaginator.js';
+import '../pagination/GoToInput.js';
+import '../panel/Panel.js';
+import '../pill/Pill.js';
+import '../progress/CircularProgress/CircularProgress.js';
+import '../progress/LinearProgress/LinearProgress.js';
+import '../radio-button/RadioButton.js';
+import '../radio-button/RadioButtonGroup.js';
+import '../scrim/Scrim.js';
+import '../spinner/Spinner.js';
+import '../stack-layout/StackLayout.js';
+import '../status-adornment/StatusAdornment.js';
+import '../toast/Toast.js';
+import '../toast/ToastContent.js';
+import '../split-layout/SplitLayout.js';
+import '../switch/Switch.js';
+import '../toggle-button/ToggleButton.js';
+import '../toggle-button-group/ToggleButtonGroup.js';
+import '../toggle-button-group/ToggleButtonGroupContext.js';
+import '../tooltip/Tooltip.js';
+import '@floating-ui/react';
 
 const ViewportContext = createContext(null);
 const ViewportProvider = ({ children }) => {

package/dist-es/viewport/ViewportProvider.js.map

@@ -1 +1 @@
-{"version":3,"file":"ViewportProvider.js","sources":["../src/viewport/ViewportProvider.tsx"],"sourcesContent":["import { createContext, useState, useContext, ReactNode } from \"react\";\nimport { useIsomorphicLayoutEffect } from \"../utils\";\n\nconst ViewportContext = createContext<number | null>(null);\n\ntype ViewportProviderProps = {\n  children?: ReactNode;\n};\n\nconst ViewportProvider = ({ children }: ViewportProviderProps) => {\n  // Get value directly from the ViewportContext so we can detect if the value is null (no inherited ViewportProvider)\n  const existingViewport = useContext(ViewportContext);\n  const [viewport, setViewport] = useState(existingViewport);\n\n  const noExistingViewport = existingViewport === null;\n  const viewportValue = existingViewport || viewport || 0;\n\n  useIsomorphicLayoutEffect(() => {\n    let observer: ResizeObserver | null = null;\n\n    if (noExistingViewport) {\n      observer = new ResizeObserver(\n        (observerEntries: ResizeObserverEntry[]) => {\n          setViewport(observerEntries[0].contentRect.width);\n        }\n      );\n\n      observer.observe(document.body);\n      setViewport(document.body.getBoundingClientRect().width);\n    }\n\n    return () => {\n      if (observer) {\n        observer.disconnect();\n      }\n    };\n  }, [noExistingViewport]);\n\n  return (\n    <ViewportContext.Provider value={viewportValue}>\n      {children}\n    </ViewportContext.Provider>\n  );\n};\n\nconst useViewport = (): number => {\n  const value = useContext(ViewportContext);\n  return value === null ? 0 : value;\n};\n\nexport { ViewportProvider, ViewportContext, useViewport };\n"],"names":[],"mappings":";;;;;;;;AAGM,MAAA,eAAA,GAAkB,cAA6B,IAAI,EAAA;AAMzD,MAAM,gBAAmB,GAAA,CAAC,EAAE,QAAA,EAAsC,KAAA;AAEhE,EAAM,MAAA,gBAAA,GAAmB,WAAW,eAAe,CAAA,CAAA;AACnD,EAAA,MAAM,CAAC,QAAA,EAAU,WAAW,CAAA,GAAI,SAAS,gBAAgB,CAAA,CAAA;AAEzD,EAAA,MAAM,qBAAqB,gBAAqB,KAAA,IAAA,CAAA;AAChD,EAAM,MAAA,aAAA,GAAgB,oBAAoB,QAAY,IAAA,CAAA,CAAA;AAEtD,EAAA,yBAAA,CAA0B,MAAM;AAC9B,IAAA,IAAI,QAAkC,GAAA,IAAA,CAAA;AAEtC,IAAA,IAAI,kBAAoB,EAAA;AACtB,MAAA,QAAA,GAAW,IAAI,cAAA;AAAA,QACb,CAAC,eAA2C,KAAA;AAC1C,UAAY,WAAA,CAAA,eAAA,CAAgB,CAAG,CAAA,CAAA,WAAA,CAAY,KAAK,CAAA,CAAA;AAAA,SAClD;AAAA,OACF,CAAA;AAEA,MAAS,QAAA,CAAA,OAAA,CAAQ,SAAS,IAAI,CAAA,CAAA;AAC9B,MAAA,WAAA,CAAY,QAAS,CAAA,IAAA,CAAK,qBAAsB,EAAA,CAAE,KAAK,CAAA,CAAA;AAAA,KACzD;AAEA,IAAA,OAAO,MAAM;AACX,MAAA,IAAI,QAAU,EAAA;AACZ,QAAA,QAAA,CAAS,UAAW,EAAA,CAAA;AAAA,OACtB;AAAA,KACF,CAAA;AAAA,GACF,EAAG,CAAC,kBAAkB,CAAC,CAAA,CAAA;AAEvB,EACE,uBAAA,GAAA,CAAC,gBAAgB,QAAhB,EAAA;AAAA,IAAyB,KAAO,EAAA,aAAA;AAAA,IAC9B,QAAA;AAAA,GACH,CAAA,CAAA;AAEJ,EAAA;AAEA,MAAM,cAAc,MAAc;AAChC,EAAM,MAAA,KAAA,GAAQ,WAAW,eAAe,CAAA,CAAA;AACxC,EAAO,OAAA,KAAA,KAAU,OAAO,CAAI,GAAA,KAAA,CAAA;AAC9B;;;;"}
+{"version":3,"file":"ViewportProvider.js","sources":["../src/viewport/ViewportProvider.tsx"],"sourcesContent":["import { createContext, useState, useContext, ReactNode } from \"react\";\nimport { useIsomorphicLayoutEffect } from \"../utils\";\n\nconst ViewportContext = createContext<number | null>(null);\n\ntype ViewportProviderProps = {\n  children?: ReactNode;\n};\n\nconst ViewportProvider = ({ children }: ViewportProviderProps) => {\n  // Get value directly from the ViewportContext so we can detect if the value is null (no inherited ViewportProvider)\n  const existingViewport = useContext(ViewportContext);\n  const [viewport, setViewport] = useState(existingViewport);\n\n  const noExistingViewport = existingViewport === null;\n  const viewportValue = existingViewport || viewport || 0;\n\n  useIsomorphicLayoutEffect(() => {\n    let observer: ResizeObserver | null = null;\n\n    if (noExistingViewport) {\n      observer = new ResizeObserver(\n        (observerEntries: ResizeObserverEntry[]) => {\n          setViewport(observerEntries[0].contentRect.width);\n        }\n      );\n\n      observer.observe(document.body);\n      setViewport(document.body.getBoundingClientRect().width);\n    }\n\n    return () => {\n      if (observer) {\n        observer.disconnect();\n      }\n    };\n  }, [noExistingViewport]);\n\n  return (\n    <ViewportContext.Provider value={viewportValue}>\n      {children}\n    </ViewportContext.Provider>\n  );\n};\n\nconst useViewport = (): number => {\n  const value = useContext(ViewportContext);\n  return value === null ? 0 : value;\n};\n\nexport { ViewportProvider, ViewportContext, useViewport };\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAGM,MAAA,eAAA,GAAkB,cAA6B,IAAI,EAAA;AAMzD,MAAM,gBAAmB,GAAA,CAAC,EAAE,QAAA,EAAsC,KAAA;AAEhE,EAAM,MAAA,gBAAA,GAAmB,WAAW,eAAe,CAAA,CAAA;AACnD,EAAA,MAAM,CAAC,QAAA,EAAU,WAAW,CAAA,GAAI,SAAS,gBAAgB,CAAA,CAAA;AAEzD,EAAA,MAAM,qBAAqB,gBAAqB,KAAA,IAAA,CAAA;AAChD,EAAM,MAAA,aAAA,GAAgB,oBAAoB,QAAY,IAAA,CAAA,CAAA;AAEtD,EAAA,yBAAA,CAA0B,MAAM;AAC9B,IAAA,IAAI,QAAkC,GAAA,IAAA,CAAA;AAEtC,IAAA,IAAI,kBAAoB,EAAA;AACtB,MAAA,QAAA,GAAW,IAAI,cAAA;AAAA,QACb,CAAC,eAA2C,KAAA;AAC1C,UAAY,WAAA,CAAA,eAAA,CAAgB,CAAG,CAAA,CAAA,WAAA,CAAY,KAAK,CAAA,CAAA;AAAA,SAClD;AAAA,OACF,CAAA;AAEA,MAAS,QAAA,CAAA,OAAA,CAAQ,SAAS,IAAI,CAAA,CAAA;AAC9B,MAAA,WAAA,CAAY,QAAS,CAAA,IAAA,CAAK,qBAAsB,EAAA,CAAE,KAAK,CAAA,CAAA;AAAA,KACzD;AAEA,IAAA,OAAO,MAAM;AACX,MAAA,IAAI,QAAU,EAAA;AACZ,QAAA,QAAA,CAAS,UAAW,EAAA,CAAA;AAAA,OACtB;AAAA,KACF,CAAA;AAAA,GACF,EAAG,CAAC,kBAAkB,CAAC,CAAA,CAAA;AAEvB,EACE,uBAAA,GAAA,CAAC,gBAAgB,QAAhB,EAAA;AAAA,IAAyB,KAAO,EAAA,aAAA;AAAA,IAC9B,QAAA;AAAA,GACH,CAAA,CAAA;AAEJ,EAAA;AAEA,MAAM,cAAc,MAAc;AAChC,EAAM,MAAA,KAAA,GAAQ,WAAW,eAAe,CAAA,CAAA;AACxC,EAAO,OAAA,KAAA,KAAU,OAAO,CAAI,GAAA,KAAA,CAAA;AAC9B;;;;"}

package/dist-types/combo-box/ComboBox.d.ts

@@ -0,0 +1,17 @@
+import { ReactNode, Ref } from "react";
+import { UseComboBoxProps } from "./useComboBox";
+import { PillInputProps } from "../pill-input";
+export declare type ComboBoxProps<Item = string> = {
+    /**
+     * The options to display in the combo box.
+     */
+    children?: ReactNode;
+} & UseComboBoxProps<Item> & PillInputProps;
+export declare const ComboBox: <Item = string>(props: {
+    /**
+     * The options to display in the combo box.
+     */
+    children?: ReactNode;
+} & import("../list-control/ListControlState").ListControlProps<Item> & Pick<Omit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref">, "defaultValue" | "value"> & PillInputProps & {
+    ref?: Ref<HTMLDivElement> | undefined;
+}) => JSX.Element;

package/dist-types/combo-box/index.d.ts

@@ -0,0 +1 @@
+export * from "./ComboBox";

package/dist-types/combo-box/useComboBox.d.ts

@@ -0,0 +1,30 @@
+import { ComponentPropsWithoutRef, SyntheticEvent } from "react";
+import { ListControlProps } from "../list-control/ListControlState";
+import { OptionValue } from "../list-control/ListControlContext";
+export declare type UseComboBoxProps<Item> = ListControlProps<Item> & Pick<ComponentPropsWithoutRef<"input">, "value" | "defaultValue">;
+export declare function useComboBox<Item>(props: UseComboBoxProps<Item>): {
+    select: (event: SyntheticEvent, option: OptionValue<Item>) => void;
+    valueState: string | number | readonly string[] | undefined;
+    setValueState: import("react").Dispatch<import("react").SetStateAction<string | number | readonly string[] | undefined>>;
+    multiselect: boolean;
+    openState: boolean;
+    setOpen: (newOpen: boolean, reason?: import("../list-control/ListControlState").OpenChangeReason | undefined, key?: string | undefined) => void;
+    openKey: import("react").MutableRefObject<string | undefined>;
+    activeState: OptionValue<Item> | undefined;
+    setActive: (option?: OptionValue<Item> | undefined) => void;
+    selectedState: Item[];
+    setSelectedState: import("react").Dispatch<import("react").SetStateAction<Item[]>>;
+    clear: (event: SyntheticEvent<Element, Event>) => void;
+    focusVisibleState: boolean;
+    setFocusVisibleState: import("react").Dispatch<import("react").SetStateAction<boolean>>;
+    focusedState: boolean;
+    setFocusedState: import("react").Dispatch<import("react").SetStateAction<boolean>>;
+    listRef: import("react").RefObject<HTMLDivElement>;
+    options: HTMLElement[];
+    register: (optionValue: OptionValue<Item>, element: HTMLElement) => () => void;
+    getOptionAtIndex: (index: number) => OptionValue<Item>;
+    getIndexOfOption: (option: OptionValue<Item>) => number;
+    getOptionsMatching: (predicate: (option: OptionValue<Item>) => boolean) => OptionValue<Item>[];
+    getOptionFromSearch: (search: string, startFrom?: OptionValue<Item> | undefined) => OptionValue<Item> | undefined;
+    valueToString: (item: Item) => string;
+};

package/dist-types/dialog/DialogHeader.d.ts

@@ -1,6 +1,6 @@
 import { ReactNode, ComponentPropsWithoutRef } from "react";
 import { ValidationStatus } from "../status-indicator";
-interface DialogTitleProps extends ComponentPropsWithoutRef<"div"> {
+export interface DialogHeaderProps extends ComponentPropsWithoutRef<"div"> {
     /**
      * The status of the Dialog
      */
@@ -16,7 +16,5 @@ interface DialogTitleProps extends ComponentPropsWithoutRef<"div"> {
      * Displays the preheader just above the header
      **/
     preheader?: ReactNode;
-    className?: string;
 }
-export declare const DialogHeader: ({ className, header, preheader, disableAccent, status: statusProp, ...rest }: DialogTitleProps) => JSX.Element;
-export {};
+export declare const DialogHeader: ({ className, header, preheader, disableAccent, status: statusProp, ...rest }: DialogHeaderProps) => JSX.Element;

package/dist-types/dropdown/Dropdown.d.ts

@@ -0,0 +1,99 @@
+import { ComponentPropsWithoutRef, ReactNode, Ref } from "react";
+import { ListControlProps } from "../list-control/ListControlState";
+import { ValidationStatus } from "../status-indicator";
+export declare type DropdownProps<Item = string> = {
+    /**
+     * If `true`, the dropdown will be disabled.
+     */
+    disabled?: boolean;
+    /**
+     * If `true`, the dropdown will be read-only.
+     */
+    readOnly?: boolean;
+    /**
+     * The options to display in the dropdown.
+     */
+    children?: ReactNode;
+    /**
+     * The marker to use in an empty read only dropdown.
+     * Use `''` to disable this feature. Defaults to '—'.
+     */
+    emptyReadOnlyMarker?: string;
+    /**
+     * If `true`, the dropdown will be multiselect.
+     */
+    multiselect?: boolean;
+    /**
+     * The text shown when the dropdown has no value.
+     */
+    placeholder?: string;
+    /**
+     * If `true`, the dropdown will be required.
+     */
+    required?: boolean;
+    /**
+     * Start adornment component
+     */
+    startAdornment?: ReactNode;
+    /**
+     * Styling variant. Defaults to "primary".
+     */
+    variant?: "primary" | "secondary";
+    /**
+     * The content of the dropdown shown in the button. The component will be controlled if this prop is provided.
+     */
+    value?: string;
+    /**
+     * Validation status, one of "error" | "warning" | "success".
+     */
+    validationStatus?: Exclude<ValidationStatus, "info">;
+} & Omit<ComponentPropsWithoutRef<"button">, "value" | "defaultValue"> & ListControlProps<Item>;
+export declare const Dropdown: <Item = string>(props: {
+    /**
+     * If `true`, the dropdown will be disabled.
+     */
+    disabled?: boolean | undefined;
+    /**
+     * If `true`, the dropdown will be read-only.
+     */
+    readOnly?: boolean | undefined;
+    /**
+     * The options to display in the dropdown.
+     */
+    children?: ReactNode;
+    /**
+     * The marker to use in an empty read only dropdown.
+     * Use `''` to disable this feature. Defaults to '—'.
+     */
+    emptyReadOnlyMarker?: string | undefined;
+    /**
+     * If `true`, the dropdown will be multiselect.
+     */
+    multiselect?: boolean | undefined;
+    /**
+     * The text shown when the dropdown has no value.
+     */
+    placeholder?: string | undefined;
+    /**
+     * If `true`, the dropdown will be required.
+     */
+    required?: boolean | undefined;
+    /**
+     * Start adornment component
+     */
+    startAdornment?: ReactNode;
+    /**
+     * Styling variant. Defaults to "primary".
+     */
+    variant?: "primary" | "secondary" | undefined;
+    /**
+     * The content of the dropdown shown in the button. The component will be controlled if this prop is provided.
+     */
+    value?: string | undefined;
+    /**
+     * Validation status, one of "error" | "warning" | "success".
+     */
+    validationStatus?: "error" | "warning" | "success" | undefined;
+} & Omit<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref">, "defaultValue" | "value"> & ListControlProps<Item> & {
+    ref?: Ref<HTMLButtonElement> | undefined;
+}) => JSX.Element;

package/dist-types/dropdown/index.d.ts

@@ -0,0 +1 @@
+export * from "./Dropdown";

package/dist-types/index.d.ts

@@ -9,8 +9,10 @@ export * from "./breakpoints";
 export * from "./button";
 export * from "./card";
 export * from "./checkbox";
+export * from "./combo-box";
 export * from "./dialog";
 export * from "./drawer";
+export * from "./dropdown";
 export * from "./file-drop-zone";
 export * from "./flex-item";
 export * from "./flex-layout";
@@ -22,8 +24,10 @@ export * from "./grid-layout";
 export * from "./input";
 export * from "./link";
 export * from "./link-card";
+export { useListControlContext } from "./list-control";
 export * from "./multiline-input";
 export * from "./navigation-item";
+export * from "./option";
 export * from "./pagination";
 export * from "./panel";
 export * from "./pill";

package/dist-types/list-control/ListControlContext.d.ts

@@ -0,0 +1,21 @@
+import { SyntheticEvent } from "react";
+export interface OptionValue<Item> {
+    id: string;
+    disabled: boolean;
+    value: Item;
+}
+export declare type OpenChangeReason = "input" | "manual";
+export interface ListControlContextValue<Item> {
+    openState: boolean;
+    setOpen: (newOpen: boolean, openChangeReason?: OpenChangeReason) => void;
+    register: (optionValue: OptionValue<Item>, element: HTMLElement) => () => void;
+    selectedState: unknown[];
+    select: (event: SyntheticEvent, option: OptionValue<Item>) => void;
+    activeState?: OptionValue<Item>;
+    setActive: (option: OptionValue<Item>) => void;
+    multiselect: boolean;
+    focusVisibleState: boolean;
+    valueToString: (item: Item) => string;
+}
+export declare const ListControlContext: import("react").Context<ListControlContextValue<any>>;
+export declare function useListControlContext<Item>(): ListControlContextValue<Item>;

package/dist-types/list-control/ListControlState.d.ts

@@ -0,0 +1,70 @@
+import { SyntheticEvent } from "react";
+import { OptionValue } from "./ListControlContext";
+export declare type OpenChangeReason = "input" | "manual";
+export declare type ListControlProps<Item> = {
+    /**
+     * If true, the control will be disabled.
+     */
+    disabled?: boolean;
+    /**
+     * If true, the control will be read-only.
+     */
+    readOnly?: boolean;
+    /**
+     * If true, the list will be open by default.
+     */
+    defaultOpen?: boolean;
+    /**
+     * If true, the list will be open. Useful for controlling the component.
+     */
+    open?: boolean;
+    /**
+     * Callback fired when the open state changes.
+     */
+    onOpenChange?: (newOpen: boolean, reason?: OpenChangeReason) => void;
+    /**
+     * The default selected options. If this is provided `defaultValue` should be provided as well.
+     */
+    defaultSelected?: Item[];
+    /**
+     * The selected options. The component will be controlled if this prop is provided.
+     */
+    selected?: Item[];
+    /**
+     * Callback fired when the selected options change.
+     */
+    onSelectionChange?: (event: SyntheticEvent, newSelected: Item[]) => void;
+    /**
+     * If true, multiple options can be selected.
+     */
+    multiselect?: boolean;
+    /**
+     * Callback used to convert an option's `value` to a string. This is needed when the value is different to the display value or the value is not a string.
+     */
+    valueToString?: (item: Item) => string;
+};
+export declare function defaultValueToString<Item>(item: Item): string;
+export declare function useListControl<Item>(props: ListControlProps<Item>): {
+    multiselect: boolean;
+    openState: boolean;
+    setOpen: (newOpen: boolean, reason?: OpenChangeReason | undefined, key?: string | undefined) => void;
+    openKey: import("react").MutableRefObject<string | undefined>;
+    activeState: OptionValue<Item> | undefined;
+    setActive: (option?: OptionValue<Item> | undefined) => void;
+    selectedState: Item[];
+    setSelectedState: import("react").Dispatch<import("react").SetStateAction<Item[]>>;
+    select: (event: SyntheticEvent, option: OptionValue<Item>) => void;
+    clear: (event: SyntheticEvent) => void;
+    focusVisibleState: boolean;
+    setFocusVisibleState: import("react").Dispatch<import("react").SetStateAction<boolean>>;
+    focusedState: boolean;
+    setFocusedState: import("react").Dispatch<import("react").SetStateAction<boolean>>;
+    listRef: import("react").RefObject<HTMLDivElement>;
+    options: HTMLElement[];
+    register: (optionValue: OptionValue<Item>, element: HTMLElement) => () => void;
+    getOptionAtIndex: (index: number) => OptionValue<Item>;
+    getIndexOfOption: (option: OptionValue<Item>) => number;
+    getOptionsMatching: (predicate: (option: OptionValue<Item>) => boolean) => OptionValue<Item>[];
+    getOptionFromSearch: (search: string, startFrom?: OptionValue<Item> | undefined) => OptionValue<Item> | undefined;
+    valueToString: (item: Item) => string;
+};

package/dist-types/list-control/index.d.ts

@@ -0,0 +1 @@
+export { useListControlContext } from "./ListControlContext";

package/dist-types/option/Option.d.ts

@@ -0,0 +1,16 @@
+import { ComponentPropsWithoutRef, ReactNode } from "react";
+export interface OptionProps extends ComponentPropsWithoutRef<"div"> {
+    /**
+     * If `true`, the option will be disabled.
+     */
+    disabled?: boolean;
+    /**
+     * The value of the option.
+     */
+    value: unknown;
+    /**
+     * The content of the option.
+     */
+    children?: ReactNode;
+}
+export declare const Option: import("react").ForwardRefExoticComponent<OptionProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist-types/option/OptionGroup.d.ts

@@ -0,0 +1,12 @@
+import { ComponentPropsWithoutRef, ReactNode } from "react";
+export interface OptionGroupProps extends ComponentPropsWithoutRef<"div"> {
+    /**
+     * The label of the option group.
+     */
+    label?: string;
+    /**
+     * Options to be rendered inside the option group.
+     */
+    children?: ReactNode;
+}
+export declare const OptionGroup: import("react").ForwardRefExoticComponent<OptionGroupProps & import("react").RefAttributes<HTMLDivElement>>;