@salt-ds/core 1.20.0 → 1.21.0

package/dist-es/checkbox/CheckboxIcon.js

@@ -8,8 +8,83 @@ import { makePrefixer } from '../utils/makePrefixer.js';
 import '../utils/useFloatingUI/useFloatingUI.js';
 import '../utils/useId.js';
 import '../viewport/ViewportProvider.js';
+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.js';
+import './CheckboxGroup.js';
 import css_248z from './CheckboxIcon.css.js';
 import { SuccessSmallSolidIcon, SuccessSolidIcon, SuccessSmallIcon, SuccessIcon } from '@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 withBaseName = makePrefixer("saltCheckboxIcon");
 function CheckedIcon(props) {

package/dist-es/checkbox/CheckboxIcon.js.map

@@ -1 +1 @@
-{"version":3,"file":"CheckboxIcon.js","sources":["../src/checkbox/CheckboxIcon.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useDensity } from \"../salt-provider\";\nimport { AdornmentValidationStatus } from \"../status-adornment\";\nimport { makePrefixer } from \"../utils\";\nimport checkboxIconCss from \"./CheckboxIcon.css\";\nimport {\n  IconProps,\n  SuccessIcon,\n  SuccessSmallIcon,\n  SuccessSmallSolidIcon,\n  SuccessSolidIcon,\n} from \"@salt-ds/icons\";\n\nexport interface CheckboxIconProps {\n  checked?: boolean;\n  className?: string;\n  disabled?: boolean;\n  /**\n   * @deprecated Use validationStatus instead\n   */\n  error?: boolean;\n  indeterminate?: boolean;\n  readOnly?: boolean;\n  validationStatus?: AdornmentValidationStatus;\n}\n\nconst withBaseName = makePrefixer(\"saltCheckboxIcon\");\n\nfunction CheckedIcon(props: IconProps) {\n  const density = useDensity();\n  return density === \"high\" ? (\n    <SuccessSmallSolidIcon {...props} />\n  ) : (\n    <SuccessSolidIcon {...props} />\n  );\n}\n\nfunction CheckedReadOnlyIcon(props: IconProps) {\n  const density = useDensity();\n  return density === \"high\" ? (\n    <SuccessSmallIcon {...props} />\n  ) : (\n    <SuccessIcon {...props} />\n  );\n}\n\nexport const CheckboxIcon = ({\n  checked = false,\n  className,\n  disabled,\n  error,\n  indeterminate,\n  validationStatus,\n  readOnly,\n}: CheckboxIconProps): JSX.Element => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-checkbox-icon\",\n    css: checkboxIconCss,\n    window: targetWindow,\n  });\n\n  return (\n    <div\n      aria-hidden=\"true\"\n      className={clsx(\n        withBaseName(),\n        {\n          [withBaseName(\"checked\")]: checked,\n          [withBaseName(\"disabled\")]: disabled,\n          [withBaseName(\"error\")]: error,\n          [withBaseName(validationStatus || \"\")]: validationStatus,\n          [withBaseName(\"indeterminate\")]: indeterminate,\n          [withBaseName(\"readOnly\")]: readOnly,\n        },\n        className\n      )}\n    >\n      {checked && !indeterminate && !readOnly && (\n        <CheckedIcon className={withBaseName(\"icon\")} />\n      )}\n      {checked && !indeterminate && readOnly && (\n        <CheckedReadOnlyIcon className={withBaseName(\"icon\")} />\n      )}\n    </div>\n  );\n};\n"],"names":["checkboxIconCss"],"mappings":";;;;;;;;;;;;;AA4BA,MAAM,YAAA,GAAe,aAAa,kBAAkB,CAAA,CAAA;AAEpD,SAAS,YAAY,KAAkB,EAAA;AACrC,EAAA,MAAM,UAAU,UAAW,EAAA,CAAA;AAC3B,EAAO,OAAA,OAAA,KAAY,yBAChB,GAAA,CAAA,qBAAA,EAAA;AAAA,IAAuB,GAAG,KAAA;AAAA,GAAO,oBAEjC,GAAA,CAAA,gBAAA,EAAA;AAAA,IAAkB,GAAG,KAAA;AAAA,GAAO,CAAA,CAAA;AAEjC,CAAA;AAEA,SAAS,oBAAoB,KAAkB,EAAA;AAC7C,EAAA,MAAM,UAAU,UAAW,EAAA,CAAA;AAC3B,EAAO,OAAA,OAAA,KAAY,yBAChB,GAAA,CAAA,gBAAA,EAAA;AAAA,IAAkB,GAAG,KAAA;AAAA,GAAO,oBAE5B,GAAA,CAAA,WAAA,EAAA;AAAA,IAAa,GAAG,KAAA;AAAA,GAAO,CAAA,CAAA;AAE5B,CAAA;AAEO,MAAM,eAAe,CAAC;AAAA,EAC3B,OAAU,GAAA,KAAA;AAAA,EACV,SAAA;AAAA,EACA,QAAA;AAAA,EACA,KAAA;AAAA,EACA,aAAA;AAAA,EACA,gBAAA;AAAA,EACA,QAAA;AACF,CAAsC,KAAA;AACpC,EAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,oBAAA;AAAA,IACR,GAAK,EAAAA,QAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAA,uBACG,IAAA,CAAA,KAAA,EAAA;AAAA,IACC,aAAY,EAAA,MAAA;AAAA,IACZ,SAAW,EAAA,IAAA;AAAA,MACT,YAAa,EAAA;AAAA,MACb;AAAA,QACE,CAAC,YAAa,CAAA,SAAS,CAAI,GAAA,OAAA;AAAA,QAC3B,CAAC,YAAa,CAAA,UAAU,CAAI,GAAA,QAAA;AAAA,QAC5B,CAAC,YAAa,CAAA,OAAO,CAAI,GAAA,KAAA;AAAA,QACzB,CAAC,YAAA,CAAa,gBAAoB,IAAA,EAAE,CAAI,GAAA,gBAAA;AAAA,QACxC,CAAC,YAAa,CAAA,eAAe,CAAI,GAAA,aAAA;AAAA,QACjC,CAAC,YAAa,CAAA,UAAU,CAAI,GAAA,QAAA;AAAA,OAC9B;AAAA,MACA,SAAA;AAAA,KACF;AAAA,IAEC,QAAA,EAAA;AAAA,MAAA,OAAA,IAAW,CAAC,aAAA,IAAiB,CAAC,QAAA,oBAC5B,GAAA,CAAA,WAAA,EAAA;AAAA,QAAY,SAAA,EAAW,aAAa,MAAM,CAAA;AAAA,OAAG,CAAA;AAAA,MAE/C,OAAW,IAAA,CAAC,aAAiB,IAAA,QAAA,oBAC3B,GAAA,CAAA,mBAAA,EAAA;AAAA,QAAoB,SAAA,EAAW,aAAa,MAAM,CAAA;AAAA,OAAG,CAAA;AAAA,KAAA;AAAA,GAE1D,CAAA,CAAA;AAEJ;;;;"}
+{"version":3,"file":"CheckboxIcon.js","sources":["../src/checkbox/CheckboxIcon.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useDensity } from \"../salt-provider\";\nimport { AdornmentValidationStatus } from \"../status-adornment\";\nimport { makePrefixer } from \"../utils\";\nimport checkboxIconCss from \"./CheckboxIcon.css\";\nimport {\n  IconProps,\n  SuccessIcon,\n  SuccessSmallIcon,\n  SuccessSmallSolidIcon,\n  SuccessSolidIcon,\n} from \"@salt-ds/icons\";\n\nexport interface CheckboxIconProps {\n  checked?: boolean;\n  className?: string;\n  disabled?: boolean;\n  /**\n   * @deprecated Use validationStatus instead\n   */\n  error?: boolean;\n  indeterminate?: boolean;\n  readOnly?: boolean;\n  validationStatus?: AdornmentValidationStatus;\n}\n\nconst withBaseName = makePrefixer(\"saltCheckboxIcon\");\n\nfunction CheckedIcon(props: IconProps) {\n  const density = useDensity();\n  return density === \"high\" ? (\n    <SuccessSmallSolidIcon {...props} />\n  ) : (\n    <SuccessSolidIcon {...props} />\n  );\n}\n\nfunction CheckedReadOnlyIcon(props: IconProps) {\n  const density = useDensity();\n  return density === \"high\" ? (\n    <SuccessSmallIcon {...props} />\n  ) : (\n    <SuccessIcon {...props} />\n  );\n}\n\nexport const CheckboxIcon = ({\n  checked = false,\n  className,\n  disabled,\n  error,\n  indeterminate,\n  validationStatus,\n  readOnly,\n}: CheckboxIconProps): JSX.Element => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-checkbox-icon\",\n    css: checkboxIconCss,\n    window: targetWindow,\n  });\n\n  return (\n    <div\n      aria-hidden=\"true\"\n      className={clsx(\n        withBaseName(),\n        {\n          [withBaseName(\"checked\")]: checked,\n          [withBaseName(\"disabled\")]: disabled,\n          [withBaseName(\"error\")]: error,\n          [withBaseName(validationStatus || \"\")]: validationStatus,\n          [withBaseName(\"indeterminate\")]: indeterminate,\n          [withBaseName(\"readOnly\")]: readOnly,\n        },\n        className\n      )}\n    >\n      {checked && !indeterminate && !readOnly && (\n        <CheckedIcon className={withBaseName(\"icon\")} />\n      )}\n      {checked && !indeterminate && readOnly && (\n        <CheckedReadOnlyIcon className={withBaseName(\"icon\")} />\n      )}\n    </div>\n  );\n};\n"],"names":["checkboxIconCss"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA4BA,MAAM,YAAA,GAAe,aAAa,kBAAkB,CAAA,CAAA;AAEpD,SAAS,YAAY,KAAkB,EAAA;AACrC,EAAA,MAAM,UAAU,UAAW,EAAA,CAAA;AAC3B,EAAO,OAAA,OAAA,KAAY,yBAChB,GAAA,CAAA,qBAAA,EAAA;AAAA,IAAuB,GAAG,KAAA;AAAA,GAAO,oBAEjC,GAAA,CAAA,gBAAA,EAAA;AAAA,IAAkB,GAAG,KAAA;AAAA,GAAO,CAAA,CAAA;AAEjC,CAAA;AAEA,SAAS,oBAAoB,KAAkB,EAAA;AAC7C,EAAA,MAAM,UAAU,UAAW,EAAA,CAAA;AAC3B,EAAO,OAAA,OAAA,KAAY,yBAChB,GAAA,CAAA,gBAAA,EAAA;AAAA,IAAkB,GAAG,KAAA;AAAA,GAAO,oBAE5B,GAAA,CAAA,WAAA,EAAA;AAAA,IAAa,GAAG,KAAA;AAAA,GAAO,CAAA,CAAA;AAE5B,CAAA;AAEO,MAAM,eAAe,CAAC;AAAA,EAC3B,OAAU,GAAA,KAAA;AAAA,EACV,SAAA;AAAA,EACA,QAAA;AAAA,EACA,KAAA;AAAA,EACA,aAAA;AAAA,EACA,gBAAA;AAAA,EACA,QAAA;AACF,CAAsC,KAAA;AACpC,EAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,oBAAA;AAAA,IACR,GAAK,EAAAA,QAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAA,uBACG,IAAA,CAAA,KAAA,EAAA;AAAA,IACC,aAAY,EAAA,MAAA;AAAA,IACZ,SAAW,EAAA,IAAA;AAAA,MACT,YAAa,EAAA;AAAA,MACb;AAAA,QACE,CAAC,YAAa,CAAA,SAAS,CAAI,GAAA,OAAA;AAAA,QAC3B,CAAC,YAAa,CAAA,UAAU,CAAI,GAAA,QAAA;AAAA,QAC5B,CAAC,YAAa,CAAA,OAAO,CAAI,GAAA,KAAA;AAAA,QACzB,CAAC,YAAA,CAAa,gBAAoB,IAAA,EAAE,CAAI,GAAA,gBAAA;AAAA,QACxC,CAAC,YAAa,CAAA,eAAe,CAAI,GAAA,aAAA;AAAA,QACjC,CAAC,YAAa,CAAA,UAAU,CAAI,GAAA,QAAA;AAAA,OAC9B;AAAA,MACA,SAAA;AAAA,KACF;AAAA,IAEC,QAAA,EAAA;AAAA,MAAA,OAAA,IAAW,CAAC,aAAA,IAAiB,CAAC,QAAA,oBAC5B,GAAA,CAAA,WAAA,EAAA;AAAA,QAAY,SAAA,EAAW,aAAa,MAAM,CAAA;AAAA,OAAG,CAAA;AAAA,MAE/C,OAAW,IAAA,CAAC,aAAiB,IAAA,QAAA,oBAC3B,GAAA,CAAA,mBAAA,EAAA;AAAA,QAAoB,SAAA,EAAW,aAAa,MAAM,CAAA;AAAA,OAAG,CAAA;AAAA,KAAA;AAAA,GAE1D,CAAA,CAAA;AAEJ;;;;"}

package/dist-es/checkbox/internal/CheckboxGroupContext.js

@@ -5,6 +5,85 @@ import '../../utils/useId.js';
 import '../../salt-provider/SaltProvider.js';
 import '../../viewport/ViewportProvider.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 'react/jsx-runtime';
+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.js';
+import '../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 CheckboxGroupContext = createContext(
   "CheckboxGroupContext",

package/dist-es/checkbox/internal/CheckboxGroupContext.js.map

@@ -1 +1 @@
-{"version":3,"file":"CheckboxGroupContext.js","sources":["../src/checkbox/internal/CheckboxGroupContext.ts"],"sourcesContent":["import { AdornmentValidationStatus } from \"../../status-adornment\";\nimport { CheckboxGroupProps } from \"../CheckboxGroup\";\nimport { createContext } from \"../../utils\";\n\nexport interface CheckboxGroupState {\n  disabled?: boolean;\n  name?: CheckboxGroupProps[\"name\"];\n  onChange?: CheckboxGroupProps[\"onChange\"];\n  checkedValues?: CheckboxGroupProps[\"checkedValues\"];\n  readOnly?: boolean;\n  validationStatus?: AdornmentValidationStatus;\n}\n\nconst CheckboxGroupContext = createContext<CheckboxGroupState | undefined>(\n  \"CheckboxGroupContext\",\n  undefined\n);\n\nexport { CheckboxGroupContext };\n"],"names":[],"mappings":";;;;;;;;AAaA,MAAM,oBAAuB,GAAA,aAAA;AAAA,EAC3B,sBAAA;AAAA,EACA,KAAA,CAAA;AACF;;;;"}
+{"version":3,"file":"CheckboxGroupContext.js","sources":["../src/checkbox/internal/CheckboxGroupContext.ts"],"sourcesContent":["import { AdornmentValidationStatus } from \"../../status-adornment\";\nimport { CheckboxGroupProps } from \"../CheckboxGroup\";\nimport { createContext } from \"../../utils\";\n\nexport interface CheckboxGroupState {\n  disabled?: boolean;\n  name?: CheckboxGroupProps[\"name\"];\n  onChange?: CheckboxGroupProps[\"onChange\"];\n  checkedValues?: CheckboxGroupProps[\"checkedValues\"];\n  readOnly?: boolean;\n  validationStatus?: AdornmentValidationStatus;\n}\n\nconst CheckboxGroupContext = createContext<CheckboxGroupState | undefined>(\n  \"CheckboxGroupContext\",\n  undefined\n);\n\nexport { CheckboxGroupContext };\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAaA,MAAM,oBAAuB,GAAA,aAAA;AAAA,EAC3B,sBAAA;AAAA,EACA,KAAA,CAAA;AACF;;;;"}

package/dist-es/combo-box/ComboBox.css.js

@@ -0,0 +1,4 @@
+var css_248z = ".saltComboBox-focused {\n  outline: var(--salt-focused-outline);\n}\n";
+
+export { css_248z as default };
+//# sourceMappingURL=ComboBox.css.js.map

package/dist-es/combo-box/ComboBox.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ComboBox.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}

package/dist-es/combo-box/ComboBox.js

@@ -0,0 +1,439 @@
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { forwardRef, useRef, useEffect } from 'react';
+import { clsx } from 'clsx';
+import { size, flip, useInteractions, useDismiss, useFocus, useClick } from '@floating-ui/react';
+import { ChevronUpIcon, ChevronDownIcon } from '@salt-ds/icons';
+import { useWindow } from '@salt-ds/window';
+import { useComponentCssInjection } from '@salt-ds/styles';
+import { makePrefixer } from '../utils/makePrefixer.js';
+import { useFloatingUI } from '../utils/useFloatingUI/useFloatingUI.js';
+import { useForkRef } from '../utils/useForkRef.js';
+import { useId } from '../utils/useId.js';
+import '../salt-provider/SaltProvider.js';
+import '../viewport/ViewportProvider.js';
+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 } from '../button/Button.js';
+import '../card/Card.js';
+import '../card/InteractableCard.js';
+import '../checkbox/Checkbox.js';
+import '../checkbox/CheckboxGroup.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 { useFormFieldProps } from '../form-field-context/useFormFieldProps.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 { ListControlContext } from '../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 { defaultValueToString } from '../list-control/ListControlState.js';
+import { useComboBox } from './useComboBox.js';
+import { OptionList } from '../option/OptionList.js';
+import { PillInput } from '../pill-input/PillInput.js';
+import css_248z from './ComboBox.css.js';
+
+const withBaseName = makePrefixer("saltComboBox");
+const ComboBox = forwardRef(function ComboBox2(props, ref) {
+  var _a, _b;
+  const {
+    children,
+    className,
+    disabled: disabledProp,
+    endAdornment,
+    readOnly: readOnlyProp,
+    multiselect,
+    onSelectionChange,
+    selected,
+    defaultSelected,
+    defaultOpen,
+    onOpenChange,
+    onChange,
+    open,
+    inputProps: inputPropsProp,
+    variant = "primary",
+    onKeyDown,
+    onFocus,
+    onBlur,
+    value,
+    defaultValue,
+    valueToString = defaultValueToString,
+    truncate,
+    ...rest
+  } = props;
+  const targetWindow = useWindow();
+  useComponentCssInjection({
+    testId: "salt-combo-box",
+    css: css_248z,
+    window: targetWindow
+  });
+  const {
+    a11yProps: { "aria-labelledby": formFieldLabelledBy } = {},
+    disabled: formFieldDisabled,
+    readOnly: formFieldReadOnly
+  } = useFormFieldProps();
+  const disabled = Boolean(disabledProp) || formFieldDisabled;
+  const readOnly = Boolean(readOnlyProp) || formFieldReadOnly;
+  const inputRef = useRef(null);
+  const listControl = useComboBox({
+    open,
+    defaultOpen,
+    onOpenChange,
+    multiselect,
+    defaultSelected,
+    selected,
+    onSelectionChange,
+    value,
+    defaultValue,
+    disabled,
+    readOnly,
+    valueToString
+  });
+  const {
+    activeState,
+    setActive,
+    openState,
+    setOpen,
+    openKey,
+    getOptionAtIndex,
+    getIndexOfOption,
+    getOptionsMatching,
+    options,
+    selectedState,
+    select,
+    clear,
+    focusVisibleState,
+    setFocusVisibleState,
+    focusedState,
+    setFocusedState,
+    listRef,
+    valueState,
+    setValueState
+  } = listControl;
+  const handleOpenChange = (newOpen, _event, reason) => {
+    var _a2;
+    const focusNotBlur = reason === "focus" && newOpen;
+    if (reason == "focus") {
+      setFocusedState(newOpen);
+    }
+    if (reason == "focus" && !newOpen) {
+      setFocusVisibleState(false);
+    }
+    if (readOnly || focusNotBlur)
+      return;
+    setOpen(newOpen);
+    if (newOpen) {
+      (_a2 = inputRef.current) == null ? void 0 : _a2.focus();
+    }
+  };
+  const { x, y, strategy, elements, floating, reference, context } = useFloatingUI({
+    open: openState && !readOnly && children != void 0,
+    onOpenChange: handleOpenChange,
+    placement: "bottom-start",
+    strategy: "fixed",
+    middleware: [
+      size({
+        apply({ rects, elements: elements2, availableHeight }) {
+          Object.assign(elements2.floating.style, {
+            minWidth: `${rects.reference.width}px`,
+            maxHeight: `max(calc(${availableHeight}px - var(--salt-spacing-100)), calc((var(--salt-size-base) + var(--salt-spacing-100)) * 5))`
+          });
+        }
+      }),
+      flip({ fallbackStrategy: "initialPlacement" })
+    ]
+  });
+  const { getReferenceProps, getFloatingProps } = useInteractions([
+    useDismiss(context),
+    useFocus(context),
+    useClick(context, { keyboardHandlers: false, toggle: false })
+  ]);
+  const handleRef = useForkRef(reference, ref);
+  const handleButtonClick = (event) => {
+    if (!readOnly) {
+      event.stopPropagation();
+      setFocusVisibleState(false);
+      setOpen(!openState, "manual");
+    }
+  };
+  const handleButtonFocus = () => {
+    var _a2;
+    (_a2 = inputRef.current) == null ? void 0 : _a2.focus();
+  };
+  const handleKeyDown = (event) => {
+    const currentIndex = activeState ? getIndexOfOption(activeState) : -1;
+    const count = options.length - 1;
+    if (readOnly) {
+      return;
+    }
+    if (!openState) {
+      if (event.key === "ArrowDown" || event.key === "ArrowUp") {
+        setOpen(true, void 0, event.key);
+        return;
+      }
+    }
+    let newActive;
+    switch (event.key) {
+      case "ArrowDown":
+        newActive = getOptionAtIndex(Math.min(count, currentIndex + 1));
+        break;
+      case "ArrowUp":
+        newActive = getOptionAtIndex(Math.max(0, currentIndex - 1));
+        break;
+      case "Home":
+        newActive = getOptionAtIndex(0);
+        break;
+      case "End":
+        newActive = getOptionAtIndex(count);
+        break;
+      case "PageUp":
+        newActive = getOptionAtIndex(Math.max(0, currentIndex - 10));
+        break;
+      case "PageDown":
+        newActive = getOptionAtIndex(Math.min(count, currentIndex + 10));
+        break;
+      case "Enter":
+        if (openState && (activeState == null ? void 0 : activeState.disabled)) {
+          event.preventDefault();
+          return;
+        }
+        if (!openState || !activeState) {
+          return;
+        }
+        select(event, activeState);
+        if (!multiselect) {
+          event.preventDefault();
+        }
+        break;
+      case "Tab":
+        if (!multiselect && activeState) {
+          select(event, activeState);
+        }
+        break;
+    }
+    if (newActive) {
+      setFocusVisibleState(true);
+    }
+    if (newActive && (newActive == null ? void 0 : newActive.id) != (activeState == null ? void 0 : activeState.id)) {
+      event.preventDefault();
+      setActive(newActive);
+    }
+    onKeyDown == null ? void 0 : onKeyDown(event);
+  };
+  const handleFocus = (event) => {
+    setFocusedState(true);
+    onFocus == null ? void 0 : onFocus(event);
+  };
+  const handleChange = (event) => {
+    if (!openState) {
+      setOpen(true, "input");
+    }
+    if (event.target.value === "" && !multiselect) {
+      clear(event);
+    }
+    setValueState(event.target.value);
+    queueMicrotask(() => {
+      if (event.target.value !== "") {
+        const newOption = getOptionAtIndex(0);
+        if (newOption) {
+          setActive(newOption);
+        }
+      } else {
+        setActive(void 0);
+      }
+    });
+    onChange == null ? void 0 : onChange(event);
+  };
+  const handlePillRemove = (event, index) => {
+    event.stopPropagation();
+    const removed = selectedState[index];
+    select(event, getOptionsMatching((option) => option.value === removed)[0]);
+  };
+  const handleListMouseOver = () => {
+    setFocusVisibleState(false);
+  };
+  const handleListMouseLeave = () => {
+    setActive(void 0);
+  };
+  const handleFocusInput = () => {
+    var _a2;
+    (_a2 = inputRef.current) == null ? void 0 : _a2.focus();
+  };
+  useEffect(() => {
+    const activeIndex = activeState ? getIndexOfOption(activeState) : -1;
+    let newActive = void 0;
+    if (activeIndex > -1) {
+      return;
+    }
+    if (!openState) {
+      setActive(void 0);
+      return;
+    }
+    if (selectedState.length > 0) {
+      newActive = getOptionsMatching(
+        (option) => option.value === selectedState[0]
+      ).pop();
+    }
+    if (!newActive) {
+      if (openKey.current === "ArrowDown") {
+        newActive = getOptionAtIndex(0);
+        setFocusVisibleState(true);
+      } else if (openKey.current === "ArrowUp") {
+        newActive = getOptionAtIndex(options.length - 1);
+        setFocusVisibleState(true);
+      }
+    }
+    if (!newActive) {
+      newActive = getOptionAtIndex(0);
+    }
+    setActive(newActive);
+  }, [openState, children]);
+  const buttonId = useId();
+  const listId = useId();
+  const handleListRef = useForkRef(listRef, floating);
+  return /* @__PURE__ */ jsxs(ListControlContext.Provider, {
+    value: listControl,
+    children: [
+      /* @__PURE__ */ jsx(PillInput, {
+        tabIndex: -1,
+        className: clsx(
+          withBaseName(),
+          {
+            [withBaseName("focused")]: focusedState,
+            [withBaseName("focusVisible")]: focusVisibleState
+          },
+          className
+        ),
+        endAdornment: /* @__PURE__ */ jsxs(Fragment, {
+          children: [
+            endAdornment,
+            !readOnly ? /* @__PURE__ */ jsx(Button, {
+              "aria-labelledby": clsx(buttonId, formFieldLabelledBy),
+              "aria-label": "Show options",
+              "aria-expanded": openState,
+              "aria-controls": openState ? listId : void 0,
+              "aria-haspopup": "listbox",
+              disabled,
+              variant: "secondary",
+              onClick: handleButtonClick,
+              onFocus: handleButtonFocus,
+              tabIndex: -1,
+              children: openState ? /* @__PURE__ */ jsx(ChevronUpIcon, {
+                "aria-hidden": true
+              }) : /* @__PURE__ */ jsx(ChevronDownIcon, {
+                "aria-hidden": true
+              })
+            }) : void 0
+          ]
+        }),
+        onChange: handleChange,
+        role: "combobox",
+        disabled,
+        readOnly,
+        inputProps: {
+          role: "combobox",
+          "aria-expanded": openState,
+          "aria-multiselectable": multiselect,
+          "aria-controls": openState ? listId : void 0,
+          onKeyDown: handleKeyDown,
+          ...inputPropsProp
+        },
+        "aria-activedescendant": activeState == null ? void 0 : activeState.id,
+        variant,
+        inputRef,
+        value: valueState,
+        ref: handleRef,
+        ...getReferenceProps({
+          onBlur,
+          onFocus: handleFocus,
+          ...rest
+        }),
+        pills: multiselect ? selectedState.map((item) => valueToString(item)) : [],
+        truncate: truncate && !focusedState && !openState,
+        onPillRemove: handlePillRemove,
+        hidePillClose: !focusedState || readOnly,
+        emptyReadOnlyMarker: readOnly && selectedState.length > 0 ? "" : void 0
+      }),
+      /* @__PURE__ */ jsx(OptionList, {
+        open: (openState || focusedState) && !readOnly && children != void 0,
+        collapsed: !openState,
+        ref: handleListRef,
+        id: listId,
+        tabIndex: -1,
+        ...getFloatingProps({
+          onMouseOver: handleListMouseOver,
+          onFocus: handleFocusInput,
+          onClick: handleFocusInput,
+          onMouseLeave: handleListMouseLeave
+        }),
+        left: x != null ? x : 0,
+        top: y != null ? y : 0,
+        position: strategy,
+        width: (_a = elements.floating) == null ? void 0 : _a.offsetWidth,
+        height: (_b = elements.floating) == null ? void 0 : _b.offsetHeight,
+        children
+      })
+    ]
+  });
+});
+
+export { ComboBox };
+//# sourceMappingURL=ComboBox.js.map