@salt-ds/lab 1.0.0-alpha.5 → 1.0.0-alpha.50

package/dist-es/packages/lab/src/color-chooser/Swatches.js

@@ -1,65 +0,0 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
-import { clsx } from 'clsx';
-import { makePrefixer } from '@salt-ds/core';
-import { AlphaInput } from './AlphaInputField.js';
-import { SwatchesPicker } from './SwatchesPicker.js';
-import './Swatches.css.js';
-
-const withBaseName = makePrefixer("saltColorChooserSwatches");
-const Swatches = ({
-  allColors,
-  color,
-  alpha,
-  handleColorChange,
-  displayColorName,
-  placeholder,
-  onDialogClosed
-}) => /* @__PURE__ */ jsxs("div", {
-  "data-testid": "swatches",
-  className: clsx(withBaseName("pickerDiv")),
-  children: [
-    /* @__PURE__ */ jsx(SwatchesPicker, {
-      allColors,
-      color,
-      onChange: handleColorChange,
-      alpha,
-      onDialogClosed
-    }),
-    /* @__PURE__ */ jsxs("div", {
-      className: clsx(withBaseName("textDiv")),
-      children: [
-        /* @__PURE__ */ jsxs("div", {
-          children: [
-            /* @__PURE__ */ jsx("span", {
-              className: clsx(withBaseName("colorTextDiv")),
-              children: "Color:"
-            }),
-            /* @__PURE__ */ jsx("span", {
-              className: clsx(withBaseName("colorNameTextDiv")),
-              children: displayColorName != null ? displayColorName : placeholder
-            })
-          ]
-        }),
-        /* @__PURE__ */ jsxs("div", {
-          children: [
-            /* @__PURE__ */ jsx("span", {
-              className: clsx(withBaseName("alphaTextDiv")),
-              children: "Opacity:"
-            }),
-            /* @__PURE__ */ jsx(AlphaInput, {
-              alphaValue: (color == null ? void 0 : color.rgba.a) === 0 ? 0 : alpha,
-              showAsOpacity: true,
-              onSubmit: (alpha2, e) => {
-                const newColor = color == null ? void 0 : color.setAlpha(alpha2);
-                handleColorChange(newColor, false, e);
-              }
-            })
-          ]
-        })
-      ]
-    })
-  ]
-});
-
-export { Swatches };
-//# sourceMappingURL=Swatches.js.map

package/dist-es/packages/lab/src/color-chooser/Swatches.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Swatches.js","sources":["../src/color-chooser/Swatches.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport { makePrefixer } from \"@salt-ds/core\";\nimport { AlphaInput } from \"./AlphaInputField\";\nimport { Color } from \"./Color\";\nimport { SwatchesPicker } from \"./SwatchesPicker\";\nimport \"./Swatches.css\";\n\nconst withBaseName = makePrefixer(\"saltColorChooserSwatches\");\n\nexport interface SwatchesTabProps {\n  allColors: string[][];\n  color: Color | undefined;\n  alpha: number;\n  handleColorChange: (\n    color: Color | undefined,\n    finalSelection: boolean,\n    e?: React.ChangeEvent\n  ) => void;\n  displayColorName: string | undefined;\n  placeholder: string | undefined;\n  onDialogClosed: () => void;\n}\n\nexport const Swatches = ({\n  allColors,\n  color,\n  alpha,\n  handleColorChange,\n  displayColorName,\n  placeholder,\n  onDialogClosed,\n}: SwatchesTabProps): JSX.Element => (\n  <div data-testid=\"swatches\" className={clsx(withBaseName(\"pickerDiv\"))}>\n    <SwatchesPicker\n      allColors={allColors}\n      color={color}\n      onChange={handleColorChange}\n      alpha={alpha}\n      onDialogClosed={onDialogClosed}\n    />\n    <div className={clsx(withBaseName(\"textDiv\"))}>\n      <div>\n        <span className={clsx(withBaseName(\"colorTextDiv\"))}>Color:</span>\n        <span className={clsx(withBaseName(\"colorNameTextDiv\"))}>\n          {displayColorName ?? placeholder}\n        </span>\n      </div>\n      <div>\n        <span className={clsx(withBaseName(\"alphaTextDiv\"))}>Opacity:</span>\n        <AlphaInput\n          alphaValue={color?.rgba.a === 0 ? 0 : alpha}\n          showAsOpacity={true}\n          onSubmit={(alpha: number, e?: React.ChangeEvent): void => {\n            const newColor = color?.setAlpha(alpha);\n            handleColorChange(newColor, false, e);\n          }}\n        />\n      </div>\n    </div>\n  </div>\n);\n"],"names":["alpha"],"mappings":";;;;;;;AAOA,MAAM,YAAA,GAAe,aAAa,0BAA0B,CAAA,CAAA;AAgBrD,MAAM,WAAW,CAAC;AAAA,EACvB,SAAA;AAAA,EACA,KAAA;AAAA,EACA,KAAA;AAAA,EACA,iBAAA;AAAA,EACA,gBAAA;AAAA,EACA,WAAA;AAAA,EACA,cAAA;AACF,CAAA,qBACG,IAAA,CAAA,KAAA,EAAA;AAAA,EAAI,aAAY,EAAA,UAAA;AAAA,EAAW,SAAW,EAAA,IAAA,CAAK,YAAa,CAAA,WAAW,CAAC,CAAA;AAAA,EACnE,QAAA,EAAA;AAAA,oBAAC,GAAA,CAAA,cAAA,EAAA;AAAA,MACC,SAAA;AAAA,MACA,KAAA;AAAA,MACA,QAAU,EAAA,iBAAA;AAAA,MACV,KAAA;AAAA,MACA,cAAA;AAAA,KACF,CAAA;AAAA,oBACC,IAAA,CAAA,KAAA,EAAA;AAAA,MAAI,SAAW,EAAA,IAAA,CAAK,YAAa,CAAA,SAAS,CAAC,CAAA;AAAA,MAC1C,QAAA,EAAA;AAAA,wBAAC,IAAA,CAAA,KAAA,EAAA;AAAA,UACC,QAAA,EAAA;AAAA,4BAAC,GAAA,CAAA,MAAA,EAAA;AAAA,cAAK,SAAW,EAAA,IAAA,CAAK,YAAa,CAAA,cAAc,CAAC,CAAA;AAAA,cAAG,QAAA,EAAA,QAAA;AAAA,aAAM,CAAA;AAAA,4BAC1D,GAAA,CAAA,MAAA,EAAA;AAAA,cAAK,SAAW,EAAA,IAAA,CAAK,YAAa,CAAA,kBAAkB,CAAC,CAAA;AAAA,cACnD,QAAoB,EAAA,gBAAA,IAAA,IAAA,GAAA,gBAAA,GAAA,WAAA;AAAA,aACvB,CAAA;AAAA,WAAA;AAAA,SACF,CAAA;AAAA,wBACC,IAAA,CAAA,KAAA,EAAA;AAAA,UACC,QAAA,EAAA;AAAA,4BAAC,GAAA,CAAA,MAAA,EAAA;AAAA,cAAK,SAAW,EAAA,IAAA,CAAK,YAAa,CAAA,cAAc,CAAC,CAAA;AAAA,cAAG,QAAA,EAAA,UAAA;AAAA,aAAQ,CAAA;AAAA,4BAC5D,GAAA,CAAA,UAAA,EAAA;AAAA,cACC,UAAY,EAAA,CAAA,KAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,KAAA,CAAO,IAAK,CAAA,CAAA,MAAM,IAAI,CAAI,GAAA,KAAA;AAAA,cACtC,aAAe,EAAA,IAAA;AAAA,cACf,QAAA,EAAU,CAACA,MAAAA,EAAe,CAAgC,KAAA;AACxD,gBAAM,MAAA,QAAA,GAAW,+BAAO,QAASA,CAAAA,MAAAA,CAAAA,CAAAA;AACjC,gBAAkB,iBAAA,CAAA,QAAA,EAAU,OAAO,CAAC,CAAA,CAAA;AAAA,eACtC;AAAA,aACF,CAAA;AAAA,WAAA;AAAA,SACF,CAAA;AAAA,OAAA;AAAA,KACF,CAAA;AAAA,GAAA;AAAA,CACF;;;;"}

package/dist-es/packages/lab/src/color-chooser/SwatchesPicker.js

@@ -1,56 +0,0 @@
-import { jsx } from 'react/jsx-runtime';
-import { Swatch } from './Swatch.js';
-import { convertColorMapValueToHex } from './ColorHelpers.js';
-import { isTransparent } from './color-utils.js';
-import './Swatch.css.js';
-
-const SwatchesGroup = ({
-  swatchGroup,
-  onClick,
-  onDialogClosed,
-  selectedColor,
-  alpha
-}) => {
-  var _a;
-  const isBlackOrWhite = (color) => {
-    return (selectedColor ? selectedColor.startsWith("#000000") : false) && color.toLowerCase() === "black" || (selectedColor ? selectedColor.toLowerCase().startsWith("#ffffff") : false) && color.toLowerCase() === "white";
-  };
-  const isActive = (color) => {
-    return color.toLowerCase() === (selectedColor == null ? void 0 : selectedColor.substring(0, 7).toString().toLowerCase()) || isBlackOrWhite(color);
-  };
-  return /* @__PURE__ */ jsx("div", {
-    style: { display: "flex", flexDirection: "column" },
-    children: (_a = swatchGroup == null ? void 0 : swatchGroup.map((color) => {
-      return convertColorMapValueToHex(color);
-    })) == null ? void 0 : _a.map((color) => /* @__PURE__ */ jsx(Swatch, {
-      active: isActive(color),
-      color,
-      onClick,
-      onDialogClosed,
-      alpha,
-      transparent: isTransparent(color)
-    }, color.toString()))
-  });
-};
-const SwatchesPicker = ({
-  allColors,
-  color,
-  alpha = 1,
-  onChange,
-  onDialogClosed
-}) => {
-  return /* @__PURE__ */ jsx("div", {
-    "data-testid": "swatches-picker",
-    style: { display: "flex", flexDirection: "row" },
-    children: allColors == null ? void 0 : allColors.map((swatchGroup) => /* @__PURE__ */ jsx(SwatchesGroup, {
-      swatchGroup,
-      selectedColor: color == null ? void 0 : color.hex,
-      onClick: onChange,
-      onDialogClosed,
-      alpha
-    }, swatchGroup.toString()))
-  });
-};
-
-export { SwatchesPicker };
-//# sourceMappingURL=SwatchesPicker.js.map

package/dist-es/packages/lab/src/color-chooser/SwatchesPicker.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"SwatchesPicker.js","sources":["../src/color-chooser/SwatchesPicker.tsx"],"sourcesContent":["import { Color } from \"./Color\";\nimport { Swatch } from \"./Swatch\";\nimport { convertColorMapValueToHex } from \"./ColorHelpers\";\nimport { isTransparent } from \"./color-utils\";\n\nimport \"./Swatch.css\";\n\ninterface SwatchesPickerProps {\n  allColors: string[][];\n  color: Color | undefined;\n  alpha?: number;\n  onChange: (\n    color: Color | undefined,\n    finalSelection: boolean,\n    e?: React.ChangeEvent\n  ) => void;\n  onDialogClosed: () => void;\n}\n\ninterface SwatchesGroupProps {\n  swatchGroup: string[];\n  selectedColor: string | undefined;\n  alpha: number;\n  onClick: (\n    color: Color | undefined,\n    finalSelection: boolean,\n    e?: React.ChangeEvent\n  ) => void;\n  onDialogClosed: () => void;\n}\n\nconst SwatchesGroup = ({\n  swatchGroup,\n  onClick,\n  onDialogClosed,\n  selectedColor,\n  alpha,\n}: SwatchesGroupProps): JSX.Element => {\n  const isBlackOrWhite = (color: string): boolean => {\n    return (\n      ((selectedColor ? selectedColor.startsWith(\"#000000\") : false) &&\n        color.toLowerCase() === \"black\") ||\n      ((selectedColor\n        ? selectedColor.toLowerCase().startsWith(\"#ffffff\")\n        : false) &&\n        color.toLowerCase() === \"white\")\n    );\n  };\n  const isActive = (color: string): boolean => {\n    return (\n      color.toLowerCase() ===\n        selectedColor?.substring(0, 7).toString().toLowerCase() ||\n      isBlackOrWhite(color)\n    );\n  };\n\n  return (\n    <div style={{ display: \"flex\", flexDirection: \"column\" }}>\n      {swatchGroup\n        ?.map((color) => {\n          return convertColorMapValueToHex(color);\n        })\n        ?.map((color) => (\n          <Swatch\n            key={color.toString()}\n            active={isActive(color)}\n            color={color}\n            onClick={onClick}\n            onDialogClosed={onDialogClosed}\n            alpha={alpha}\n            transparent={isTransparent(color)}\n          />\n        ))}\n    </div>\n  );\n};\n\nexport const SwatchesPicker = ({\n  allColors,\n  color,\n  alpha = 1,\n  onChange,\n  onDialogClosed,\n}: SwatchesPickerProps): JSX.Element => {\n  return (\n    <div\n      data-testid=\"swatches-picker\"\n      style={{ display: \"flex\", flexDirection: \"row\" }}\n    >\n      {allColors?.map((swatchGroup: string[]) => (\n        <SwatchesGroup\n          swatchGroup={swatchGroup}\n          key={swatchGroup.toString()}\n          selectedColor={color?.hex}\n          onClick={onChange}\n          onDialogClosed={onDialogClosed}\n          alpha={alpha}\n        />\n      ))}\n    </div>\n  );\n};\n"],"names":[],"mappings":";;;;;;AA+BA,MAAM,gBAAgB,CAAC;AAAA,EACrB,WAAA;AAAA,EACA,OAAA;AAAA,EACA,cAAA;AAAA,EACA,aAAA;AAAA,EACA,KAAA;AACF,CAAuC,KAAA;AArCvC,EAAA,IAAA,EAAA,CAAA;AAsCE,EAAM,MAAA,cAAA,GAAiB,CAAC,KAA2B,KAAA;AACjD,IACI,OAAA,CAAA,aAAA,GAAgB,cAAc,UAAW,CAAA,SAAS,IAAI,KACtD,KAAA,KAAA,CAAM,aAAkB,KAAA,OAAA,IAAA,CACxB,gBACE,aAAc,CAAA,WAAA,GAAc,UAAW,CAAA,SAAS,IAChD,KACF,KAAA,KAAA,CAAM,aAAkB,KAAA,OAAA,CAAA;AAAA,GAE9B,CAAA;AACA,EAAM,MAAA,QAAA,GAAW,CAAC,KAA2B,KAAA;AAC3C,IACE,OAAA,KAAA,CAAM,WAAY,EAAA,MAChB,aAAe,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,aAAA,CAAA,SAAA,CAAU,GAAG,CAAG,CAAA,CAAA,QAAA,EAAA,CAAW,WAC5C,EAAA,CAAA,IAAA,cAAA,CAAe,KAAK,CAAA,CAAA;AAAA,GAExB,CAAA;AAEA,EAAA,uBACG,GAAA,CAAA,KAAA,EAAA;AAAA,IAAI,KAAO,EAAA,EAAE,OAAS,EAAA,MAAA,EAAQ,eAAe,QAAS,EAAA;AAAA,IACpD,QAAA,EAAA,CAAA,EAAA,GAAA,WAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,WAAA,CACG,GAAI,CAAA,CAAC,KAAU,KAAA;AACf,MAAA,OAAO,0BAA0B,KAAK,CAAA,CAAA;AAAA,KAFzC,CAAA,KAAA,IAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAIG,GAAI,CAAA,CAAC,0BACJ,GAAA,CAAA,MAAA,EAAA;AAAA,MAEC,MAAA,EAAQ,SAAS,KAAK,CAAA;AAAA,MACtB,KAAA;AAAA,MACA,OAAA;AAAA,MACA,cAAA;AAAA,MACA,KAAA;AAAA,MACA,WAAA,EAAa,cAAc,KAAK,CAAA;AAAA,KAN3B,EAAA,KAAA,CAAM,UAOb,CAAA,CAAA;AAAA,GAEN,CAAA,CAAA;AAEJ,CAAA,CAAA;AAEO,MAAM,iBAAiB,CAAC;AAAA,EAC7B,SAAA;AAAA,EACA,KAAA;AAAA,EACA,KAAQ,GAAA,CAAA;AAAA,EACR,QAAA;AAAA,EACA,cAAA;AACF,CAAwC,KAAA;AACtC,EAAA,uBACG,GAAA,CAAA,KAAA,EAAA;AAAA,IACC,aAAY,EAAA,iBAAA;AAAA,IACZ,KAAO,EAAA,EAAE,OAAS,EAAA,MAAA,EAAQ,eAAe,KAAM,EAAA;AAAA,IAE9C,QAAW,EAAA,SAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,SAAA,CAAA,GAAA,CAAI,CAAC,WAAA,qBACd,GAAA,CAAA,aAAA,EAAA;AAAA,MACC,WAAA;AAAA,MAEA,eAAe,KAAO,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA;AAAA,MACtB,OAAS,EAAA,QAAA;AAAA,MACT,cAAA;AAAA,MACA,KAAA;AAAA,KAJK,EAAA,WAAA,CAAY,UAKnB,CAAA,CAAA;AAAA,GAEJ,CAAA,CAAA;AAEJ;;;;"}

package/dist-es/packages/lab/src/color-chooser/createTabsMapping.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"createTabsMapping.js","sources":["../src/color-chooser/createTabsMapping.ts"],"sourcesContent":["import { ChangeEvent } from \"react\";\nimport { Color } from \"./Color\";\nimport { ColorPicker } from \"./ColorPicker\";\nimport { DictTabsProps } from \"./DictTabs\";\nimport { Swatches } from \"./Swatches\";\n\ninterface TabsMappingProps {\n  swatches: boolean;\n  colorPicker: boolean;\n  disableAlphaChooser: boolean;\n  allColors: string[][];\n  color: Color | undefined;\n  alpha: number;\n  handleColorChange: (\n    color: Color | undefined,\n    finalSelection: boolean,\n    e?: ChangeEvent\n  ) => void;\n  displayColorName: string | undefined;\n  placeholder: string | undefined;\n  onDialogClosed: () => void;\n}\n\nexport const createTabsMapping = ({\n  swatches,\n  colorPicker,\n  disableAlphaChooser,\n  allColors,\n  color,\n  alpha,\n  handleColorChange,\n  displayColorName,\n  placeholder,\n  onDialogClosed,\n}: TabsMappingProps): DictTabsProps[\"tabs\"] => {\n  if (!swatches && !colorPicker) {\n    throw new Error(\"You cannot select no color chooser tabs\");\n  }\n\n  return {\n    ...(swatches && {\n      Swatches: {\n        Component: Swatches,\n        props: {\n          allColors,\n          color,\n          alpha,\n          handleColorChange,\n          displayColorName,\n          placeholder,\n          onDialogClosed,\n        },\n      },\n    }),\n    ...(colorPicker && {\n      \"Color Picker\": {\n        Component: ColorPicker,\n        props: {\n          disableAlphaChooser,\n          color,\n          alpha,\n          onChange: handleColorChange,\n          onDialogClosed,\n        },\n      },\n    }),\n  };\n};\n"],"names":[],"mappings":";;;AAuBO,MAAM,oBAAoB,CAAC;AAAA,EAChC,QAAA;AAAA,EACA,WAAA;AAAA,EACA,mBAAA;AAAA,EACA,SAAA;AAAA,EACA,KAAA;AAAA,EACA,KAAA;AAAA,EACA,iBAAA;AAAA,EACA,gBAAA;AAAA,EACA,WAAA;AAAA,EACA,cAAA;AACF,CAA+C,KAAA;AAC7C,EAAI,IAAA,CAAC,QAAY,IAAA,CAAC,WAAa,EAAA;AAC7B,IAAM,MAAA,IAAI,MAAM,yCAAyC,CAAA,CAAA;AAAA,GAC3D;AAEA,EAAO,OAAA;AAAA,IACL,GAAI,QAAY,IAAA;AAAA,MACd,QAAU,EAAA;AAAA,QACR,SAAW,EAAA,QAAA;AAAA,QACX,KAAO,EAAA;AAAA,UACL,SAAA;AAAA,UACA,KAAA;AAAA,UACA,KAAA;AAAA,UACA,iBAAA;AAAA,UACA,gBAAA;AAAA,UACA,WAAA;AAAA,UACA,cAAA;AAAA,SACF;AAAA,OACF;AAAA,KACF;AAAA,IACA,GAAI,WAAe,IAAA;AAAA,MACjB,cAAgB,EAAA;AAAA,QACd,SAAW,EAAA,WAAA;AAAA,QACX,KAAO,EAAA;AAAA,UACL,mBAAA;AAAA,UACA,KAAA;AAAA,UACA,KAAA;AAAA,UACA,QAAU,EAAA,iBAAA;AAAA,UACV,cAAA;AAAA,SACF;AAAA,OACF;AAAA,KACF;AAAA,GACF,CAAA;AACF;;;;"}

package/dist-es/packages/lab/src/combo-box/ComboBox.js

@@ -1,137 +0,0 @@
-import { jsx, jsxs } from 'react/jsx-runtime';
-import { useIdMemo } from '@salt-ds/core';
-import { forwardRef, useCallback } from 'react';
-import { DropdownBase } from '../dropdown/DropdownBase.js';
-import '../dropdown/DropdownButton.js';
-import '../dropdown/Dropdown.js';
-import '../responsive/useResizeObserver.js';
-import '../utils/useFloatingUI.js';
-import '../form-field-context/FormFieldContext.js';
-import '../list/Highlighter.js';
-import '../list/ListItem.js';
-import { List } from '../list/List.js';
-import { CollectionProvider } from '../common-hooks/collectionProvider.js';
-import '../common-hooks/keyUtils.js';
-import { useCollectionItems } from '../common-hooks/useCollectionItems.js';
-import '../list/VirtualizedList.js';
-import { Input } from '../input/Input.js';
-import '../input/StaticInputAdornment.js';
-import { useCombobox } from './useCombobox.js';
-
-const ComboBox = forwardRef(function Combobox({
-  InputProps: InputProps2,
-  ListProps: ListProps2,
-  ListItem,
-  "aria-label": ariaLabel,
-  allowFreeText,
-  children,
-  defaultIsOpen,
-  defaultValue,
-  disabled,
-  onBlur,
-  onFocus,
-  onChange,
-  onSelect,
-  getFilterRegex,
-  id: idProp,
-  isOpen: isOpenProp,
-  itemToString,
-  onOpenChange: onOpenChangeProp,
-  onSelectionChange,
-  selectionStrategy,
-  source,
-  stringToItem,
-  value: valueProp,
-  width = 180,
-  ...props
-}, forwardedRef) {
-  const id = useIdMemo(idProp);
-  const collectionHook = useCollectionItems({
-    id,
-    source,
-    children,
-    options: {
-      filterPattern: valueProp != null ? valueProp : defaultValue,
-      getFilterRegex,
-      itemToString
-    }
-  });
-  const {
-    focusVisible,
-    highlightedIndex,
-    inputProps,
-    isOpen,
-    listHandlers,
-    listControlProps: controlProps,
-    onOpenChange,
-    selected
-  } = useCombobox({
-    InputProps: InputProps2,
-    allowFreeText,
-    ariaLabel,
-    collectionHook,
-    defaultIsOpen,
-    defaultValue,
-    disabled,
-    onBlur,
-    onFocus,
-    onChange,
-    onSelect,
-    id,
-    isOpen: isOpenProp,
-    itemToString,
-    label: "ComboBox",
-    onOpenChange: onOpenChangeProp,
-    onSelectionChange,
-    selectionStrategy,
-    stringToItem,
-    value: valueProp
-  });
-  const collectionItemsToItem = useCallback(
-    (sel) => {
-      if (Array.isArray(sel)) {
-        return sel.map((i) => i.value);
-      } else if (sel) {
-        return sel.value;
-      } else {
-        return sel;
-      }
-    },
-    []
-  );
-  return /* @__PURE__ */ jsx(CollectionProvider, {
-    collectionHook,
-    children: /* @__PURE__ */ jsxs(DropdownBase, {
-      ...props,
-      fullWidth: true,
-      id,
-      isOpen,
-      onOpenChange,
-      openOnFocus: true,
-      ref: forwardedRef,
-      width,
-      children: [
-        /* @__PURE__ */ jsx(Input, {
-          ...inputProps,
-          disabled,
-          ...controlProps
-        }),
-        /* @__PURE__ */ jsx(List, {
-          ...ListProps2,
-          ListItem,
-          focusVisible,
-          highlightedIndex,
-          itemTextHighlightPattern: inputProps.value || void 0,
-          id: `${id}-list`,
-          listHandlers,
-          onSelectionChange,
-          selected: collectionItemsToItem(selected),
-          selectionStrategy
-        })
-      ]
-    })
-  });
-});
-
-export { ComboBox };
-//# sourceMappingURL=ComboBox.js.map

package/dist-es/packages/lab/src/combo-box/ComboBox.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"ComboBox.js","sources":["../src/combo-box/ComboBox.tsx"],"sourcesContent":["import { useIdMemo as useId } from \"@salt-ds/core\";\nimport { ForwardedRef, forwardRef, ReactElement, useCallback } from \"react\";\n\nimport { DropdownBase, DropdownBaseProps } from \"../dropdown\";\nimport { List, ListProps } from \"../list\";\nimport { Input, InputProps } from \"../input\";\n\nimport {\n  CollectionItem,\n  CollectionProvider,\n  SelectionProps,\n  SelectionStrategy,\n  SingleSelectionStrategy,\n  useCollectionItems,\n} from \"../common-hooks\";\nimport { useCombobox } from \"./useCombobox\";\n\nexport interface ComboBoxProps<\n  Item = string,\n  Selection extends SelectionStrategy = \"default\"\n> extends Omit<\n      DropdownBaseProps,\n      \"triggerComponent\" | \"onBlur\" | \"onChange\" | \"onFocus\"\n    >,\n    Pick<InputProps, \"onBlur\" | \"onChange\" | \"onFocus\" | \"onSelect\">,\n    Pick<\n      ListProps<Item, Selection>,\n      \"ListItem\" | \"itemToString\" | \"source\" | \"width\"\n    >,\n    Pick<\n      SelectionProps<Item, Selection>,\n      \"onSelectionChange\" | \"selectionStrategy\"\n    > {\n  InputProps?: InputProps;\n  ListProps?: Omit<\n    ListProps<Item, Selection>,\n    \"ListItem\" | \"itemToString\" | \"source\"\n  >;\n  allowFreeText?: boolean;\n  defaultValue?: string;\n  getFilterRegex?: (inputValue: string) => RegExp;\n  stringToItem?: (value?: string) => Item | null | undefined;\n  value?: string;\n}\n\nexport const ComboBox = forwardRef(function Combobox<\n  Item = string,\n  Selection extends SelectionStrategy = \"default\"\n>(\n  {\n    InputProps,\n    ListProps,\n    ListItem,\n    \"aria-label\": ariaLabel,\n    allowFreeText,\n    children,\n    defaultIsOpen,\n    defaultValue,\n    disabled,\n    onBlur,\n    onFocus,\n    onChange,\n    onSelect,\n    getFilterRegex,\n    id: idProp,\n    isOpen: isOpenProp,\n    itemToString,\n    onOpenChange: onOpenChangeProp,\n    onSelectionChange,\n    selectionStrategy,\n    source,\n    stringToItem,\n    value: valueProp,\n    width = 180,\n    ...props\n  }: ComboBoxProps<Item, Selection>,\n  forwardedRef: ForwardedRef<HTMLDivElement>\n) {\n  const id = useId(idProp);\n\n  const collectionHook = useCollectionItems<Item>({\n    id,\n    source,\n    children,\n    options: {\n      filterPattern: valueProp ?? defaultValue,\n      getFilterRegex,\n      itemToString,\n    },\n  });\n\n  const {\n    focusVisible,\n    highlightedIndex,\n    inputProps,\n    isOpen,\n    listHandlers,\n    listControlProps: controlProps,\n    onOpenChange,\n    selected,\n  } = useCombobox<Item, Selection>({\n    InputProps,\n    allowFreeText,\n    ariaLabel,\n    collectionHook,\n    defaultIsOpen,\n    defaultValue,\n    disabled,\n    onBlur,\n    onFocus,\n    onChange,\n    onSelect,\n    id,\n    isOpen: isOpenProp,\n    itemToString,\n    label: \"ComboBox\",\n    onOpenChange: onOpenChangeProp,\n    onSelectionChange,\n    selectionStrategy,\n    stringToItem,\n    value: valueProp,\n  });\n\n  const collectionItemsToItem = useCallback(\n    (\n      sel?: CollectionItem<Item> | null | CollectionItem<Item>[]\n    ):\n      | undefined\n      | (Selection extends SingleSelectionStrategy ? Item | null : Item[]) => {\n      type returnType = Selection extends SingleSelectionStrategy\n        ? Item | null\n        : Item[];\n      if (Array.isArray(sel)) {\n        return sel.map((i) => i.value) as returnType;\n      } else if (sel) {\n        return sel.value as returnType;\n      } else {\n        return sel as returnType;\n      }\n    },\n    []\n  );\n\n  return (\n    <CollectionProvider<Item> collectionHook={collectionHook}>\n      <DropdownBase\n        {...props}\n        fullWidth\n        id={id}\n        isOpen={isOpen}\n        onOpenChange={onOpenChange}\n        openOnFocus\n        ref={forwardedRef}\n        width={width}\n      >\n        <Input\n          {...inputProps}\n          disabled={disabled}\n          // ref={useForkRef(setInputRef, setHookInputRef)}\n          {...controlProps}\n        />\n\n        <List<Item, Selection>\n          {...ListProps}\n          ListItem={ListItem}\n          focusVisible={focusVisible}\n          highlightedIndex={highlightedIndex}\n          itemTextHighlightPattern={inputProps.value || undefined}\n          id={`${id}-list`}\n          listHandlers={listHandlers}\n          onSelectionChange={onSelectionChange}\n          selected={collectionItemsToItem(selected)}\n          selectionStrategy={selectionStrategy}\n        />\n      </DropdownBase>\n    </CollectionProvider>\n  );\n}) as <Item, Selection extends SelectionStrategy = \"default\">(\n  props: ComboBoxProps<Item, Selection> & {\n    ref?: ForwardedRef<HTMLDivElement>;\n  }\n) => ReactElement<ComboBoxProps<Item, Selection>>;\n"],"names":["InputProps","ListProps","useId"],"mappings":"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"}

package/dist-es/packages/lab/src/combo-box/useCombobox.js

@@ -1,359 +0,0 @@
-import { useControlled } from '@salt-ds/core';
-import { useRef, useCallback, useState, useEffect } from 'react';
-import '../list/Highlighter.js';
-import '../list/ListItem.js';
-import '../list/List.js';
-import { useList } from '../list/useList.js';
-import '../list/VirtualizedList.js';
-import '../common-hooks/collectionProvider.js';
-import { itemToString } from '../common-hooks/itemToString.js';
-import '../common-hooks/keyUtils.js';
-import '../utils/useFloatingUI.js';
-import 'react/jsx-runtime';
-import '../responsive/useResizeObserver.js';
-
-const NULL_REF = { current: null };
-const EnterOnly = ["Enter"];
-const useCombobox = ({
-  allowFreeText,
-  ariaLabel,
-  collectionHook,
-  defaultIsOpen,
-  defaultValue,
-  disabled,
-  onBlur,
-  onFocus,
-  onChange,
-  onSelect,
-  id,
-  isOpen: isOpenProp,
-  itemToString: itemToString$1 = itemToString,
-  onOpenChange,
-  onSelectionChange,
-  selectionStrategy,
-  stringToItem,
-  value: valueProp,
-  InputProps: inputProps = {
-    onBlur,
-    onFocus,
-    onChange,
-    onSelect
-  }
-}) => {
-  var _a;
-  const isMultiSelect = selectionStrategy === "multiple" || selectionStrategy === "extended";
-  const selectedValue = collectionHook.stringToCollectionItem(
-    (_a = valueProp != null ? valueProp : defaultValue) != null ? _a : null
-  );
-  const {
-    data: indexPositions,
-    itemToCollectionItem,
-    setFilterPattern,
-    stringToCollectionItem
-  } = collectionHook;
-  const setHighlightedIndexRef = useRef(null);
-  const setSelectedRef = useRef(null);
-  const ignoreSelectOnFocus = useRef(true);
-  const selectedRef = useRef(selectedValue);
-  const [isOpen, setIsOpen] = useControlled({
-    controlled: isOpenProp,
-    default: defaultIsOpen != null ? defaultIsOpen : false,
-    name: "useDropdownList"
-  });
-  const [value, setValue] = useControlled({
-    controlled: valueProp,
-    default: defaultValue != null ? defaultValue : "",
-    name: "ComboBox",
-    state: "value"
-  });
-  const collectionItemsToItem = useCallback(
-    (sel) => {
-      if (Array.isArray(sel)) {
-        return sel.map((i) => i.value);
-      } else if (sel) {
-        return sel.value;
-      } else {
-        return sel;
-      }
-    },
-    []
-  );
-  const [disableAriaActiveDescendant, setDisableAriaActiveDescendant] = useState(true);
-  const [quickSelection, setQuickSelection] = useState(false);
-  const highlightSelectedItem = useCallback(
-    (selected2 = selectedRef.current) => {
-      var _a2, _b;
-      if (Array.isArray(selected2)) {
-        console.log("TODO multi selection");
-      } else if (selected2 == null) {
-        (_a2 = setHighlightedIndexRef.current) == null ? void 0 : _a2.call(setHighlightedIndexRef, -1);
-      } else {
-        const indexOfSelectedItem = indexPositions.indexOf(selected2);
-        (_b = setHighlightedIndexRef.current) == null ? void 0 : _b.call(setHighlightedIndexRef, indexOfSelectedItem);
-      }
-    },
-    [indexPositions]
-  );
-  const setTextValue = useCallback(
-    (value2) => {
-      setValue(value2);
-      setFilterPattern(value2 === "" ? void 0 : value2);
-    },
-    [setFilterPattern, setValue]
-  );
-  const reconcileInput = useCallback(
-    (selected2 = selectedRef.current) => {
-      var _a2;
-      let value2 = "";
-      if (Array.isArray(selected2)) {
-        console.log("TODO multi selection");
-      } else if (selected2 != null && selected2.value !== null) {
-        value2 = itemToString$1(selected2.value);
-      }
-      setTextValue(value2);
-      if (value2 === "") {
-        (_a2 = setHighlightedIndexRef.current) == null ? void 0 : _a2.call(setHighlightedIndexRef, -1);
-      } else {
-        highlightSelectedItem(selected2);
-      }
-    },
-    [highlightSelectedItem, itemToString$1, setTextValue]
-  );
-  const applySelection = useCallback(
-    (evt, selected2) => {
-      if (!isMultiSelect) {
-        setIsOpen(false);
-      }
-      selectedRef.current = selected2;
-      reconcileInput(selected2);
-      onSelectionChange == null ? void 0 : onSelectionChange(evt, collectionItemsToItem(selected2 != null ? selected2 : null));
-    },
-    [
-      collectionItemsToItem,
-      isMultiSelect,
-      onSelectionChange,
-      reconcileInput,
-      setIsOpen
-    ]
-  );
-  const handleSelectionChange = useCallback(
-    (evt, selected2) => {
-      if (!isMultiSelect) {
-        const selectedCollectionItem = itemToCollectionItem(selected2);
-        applySelection(evt, selectedCollectionItem);
-      }
-    },
-    [applySelection, isMultiSelect, itemToCollectionItem]
-  );
-  const handleFirstItemSelection = useCallback(
-    (evt) => {
-      if (!allowFreeText && evt.key === "Enter" && quickSelection) {
-        const [firstItem] = indexPositions;
-        applySelection(evt, firstItem);
-      }
-    },
-    [allowFreeText, applySelection, indexPositions, quickSelection]
-  );
-  const handleInputKeyDown = useCallback(
-    (evt) => {
-      if ("Escape" === evt.key) {
-        if (allowFreeText) {
-          setTextValue("");
-        } else {
-          reconcileInput();
-        }
-      } else if ("Tab" === evt.key) {
-        if (!allowFreeText) {
-          reconcileInput();
-        }
-      }
-      handleFirstItemSelection(evt);
-    },
-    [allowFreeText, handleFirstItemSelection, reconcileInput, setTextValue]
-  );
-  const handleKeyboardNavigation = useCallback(() => {
-    setDisableAriaActiveDescendant(false);
-  }, []);
-  const {
-    focusVisible,
-    setHighlightedIndex,
-    highlightedIndex,
-    listControlProps,
-    listHandlers: listHookListHandlers,
-    selected,
-    setSelected
-  } = useList({
-    collectionHook,
-    defaultHighlightedIndex: -1,
-    disableAriaActiveDescendant,
-    disableHighlightOnFocus: true,
-    disableTypeToSelect: true,
-    onKeyboardNavigation: handleKeyboardNavigation,
-    onKeyDown: handleInputKeyDown,
-    onSelectionChange: handleSelectionChange,
-    containerRef: NULL_REF,
-    selected: selectedRef.current,
-    selectionKeys: EnterOnly,
-    selectionStrategy,
-    tabToSelect: !isMultiSelect
-  });
-  setHighlightedIndexRef.current = setHighlightedIndex;
-  setSelectedRef.current = setSelected;
-  const handleOpenChange = useCallback(
-    (open) => {
-      setIsOpen(open);
-      if (!open) {
-        setQuickSelection(false);
-      }
-      onOpenChange == null ? void 0 : onOpenChange(open);
-    },
-    [onOpenChange, setIsOpen]
-  );
-  const { onClick: listHandlersOnClick } = listHookListHandlers;
-  const handleListClick = useCallback(
-    (evt) => {
-      var _a2;
-      (_a2 = document.getElementById(`${id}-input`)) == null ? void 0 : _a2.focus();
-      console.log("handle list click");
-      listHandlersOnClick == null ? void 0 : listHandlersOnClick(evt);
-    },
-    [id, listHandlersOnClick]
-  );
-  const handleInputChange = useCallback(
-    (evt) => {
-      const newValue = evt.target.value;
-      setValue(newValue);
-      if (newValue && newValue.trim().length) {
-        setFilterPattern(newValue);
-      } else {
-        setFilterPattern(void 0);
-        selectedRef.current = null;
-        onSelectionChange == null ? void 0 : onSelectionChange(
-          evt,
-          null
-        );
-      }
-      setIsOpen(true);
-      setQuickSelection(newValue.length > 0 && !allowFreeText);
-    },
-    [allowFreeText, onSelectionChange, setFilterPattern, setIsOpen, setValue]
-  );
-  const { onFocus: inputOnFocus } = inputProps;
-  const { onFocus: listOnFocus } = listControlProps;
-  const handleInputFocus = useCallback(
-    (evt) => {
-      setDisableAriaActiveDescendant(false);
-      listOnFocus == null ? void 0 : listOnFocus(evt);
-      inputOnFocus == null ? void 0 : inputOnFocus(evt);
-    },
-    [inputOnFocus, listOnFocus]
-  );
-  const listFocused = useCallback(
-    (evt) => {
-      const element = evt.relatedTarget;
-      return (element == null ? void 0 : element.id) === `${id}-list`;
-    },
-    [id]
-  );
-  const selectInputValue = useCallback(
-    (evt) => {
-      var _a2;
-      const text = value.trim();
-      if (text) {
-        const selectedCollectionItem = stringToCollectionItem(
-          text
-        );
-        if (selectedCollectionItem) {
-          if (Array.isArray(selectedCollectionItem)) ; else if (selectedCollectionItem !== selected) {
-            (_a2 = setSelectedRef.current) == null ? void 0 : _a2.call(setSelectedRef, selectedCollectionItem);
-            onSelectionChange == null ? void 0 : onSelectionChange(
-              evt,
-              selectedCollectionItem.value
-            );
-          }
-        } else if (stringToItem) {
-          const item = stringToItem(text);
-          if (item) {
-            console.log("we have a new item");
-          }
-        }
-      }
-    },
-    [onSelectionChange, selected, stringToItem, stringToCollectionItem, value]
-  );
-  const { onBlur: inputOnBlur } = inputProps;
-  const { onBlur: listOnBlur } = listControlProps;
-  const handleInputBlur = useCallback(
-    (evt) => {
-      if (listFocused(evt)) ; else {
-        listOnBlur == null ? void 0 : listOnBlur(evt);
-        inputOnBlur == null ? void 0 : inputOnBlur(evt);
-        if (allowFreeText) {
-          selectInputValue(evt);
-        } else {
-          reconcileInput();
-        }
-        setDisableAriaActiveDescendant(true);
-        ignoreSelectOnFocus.current = true;
-      }
-    },
-    [
-      allowFreeText,
-      listFocused,
-      inputOnBlur,
-      listOnBlur,
-      reconcileInput,
-      selectInputValue
-    ]
-  );
-  const { onSelect: inputOnSelect } = inputProps;
-  const handleInputSelect = useCallback(
-    (event) => {
-      if (ignoreSelectOnFocus.current) {
-        ignoreSelectOnFocus.current = false;
-      } else {
-        setDisableAriaActiveDescendant(true);
-      }
-      inputOnSelect == null ? void 0 : inputOnSelect(event);
-    },
-    [inputOnSelect]
-  );
-  useEffect(() => {
-    highlightSelectedItem();
-    if (indexPositions.length === 0) {
-      setIsOpen(false);
-    }
-  }, [highlightSelectedItem, indexPositions.length, setIsOpen]);
-  const mergedInputProps = {
-    ...inputProps.inputProps,
-    "aria-label": ariaLabel
-  };
-  return {
-    focusVisible,
-    highlightedIndex,
-    isOpen,
-    onOpenChange: handleOpenChange,
-    inputProps: {
-      ...inputProps,
-      id: `${id}-input`,
-      inputProps: mergedInputProps,
-      onChange: handleInputChange,
-      onSelect: handleInputSelect,
-      role: "combobox",
-      value
-    },
-    listControlProps: {
-      ...listControlProps,
-      onBlur: handleInputBlur,
-      onFocus: handleInputFocus
-    },
-    listHandlers: {
-      ...listHookListHandlers,
-      onClick: handleListClick
-    },
-    selected
-  };
-};
-
-export { useCombobox };
-//# sourceMappingURL=useCombobox.js.map