@vuu-ui/vuu-ui-controls 0.13.2 → 0.13.4

package/cjs/column-picker/ColumnPicker.js

@@ -78,7 +78,7 @@ const ColumnPicker = React.forwardRef(
     const handleChange = () => {
       console.log("handleChange");
     };
-    const handleMoveListItem = () => {
+    const handleReorderColumns = () => {
       console.log("handleMoveListItem");
     };
     return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
@@ -112,7 +112,7 @@ const ColumnPicker = React.forwardRef(
             {
               columns,
               onChange: handleChange,
-              onMoveListItem: handleMoveListItem,
+              onReorderColumns: handleReorderColumns,
               onSelectionChange,
               selected,
               style: { width: 220, height: 300 }

package/cjs/column-picker/ColumnPicker.js.map

@@ -1 +1 @@
-{"version":3,"file":"ColumnPicker.js","sources":["../../src/column-picker/ColumnPicker.tsx"],"sourcesContent":["import {\n  flip,\n  size,\n  useClick,\n  useDismiss,\n  useInteractions,\n} from \"@floating-ui/react\";\nimport {\n  FloatingComponentProps,\n  useFloatingComponent,\n  useFloatingUI,\n  useForkRef,\n  useIdMemo,\n} from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\n\nimport cx from \"clsx\";\nimport { forwardRef, useState } from \"react\";\nimport { IconButton, IconButtonProps } from \"../icon-button\";\nimport { ColumnSearch, ColumnSearchProps } from \"./ColumnSearch\";\n\nimport columnPickerCss from \"./ColumnPicker.css\";\n\nconst classBase = \"vuuColumnPicker\";\n\ninterface FloatingColumnSearchProps extends FloatingComponentProps {\n  collapsed?: boolean;\n}\n\nconst FloatingColumnSearch = forwardRef<\n  HTMLDivElement,\n  FloatingColumnSearchProps\n>(function FloatingColumnSearch(props, ref) {\n  const { children, className, collapsed, open, ...rest } = props;\n\n  const { Component: FloatingComponent } = useFloatingComponent();\n  return (\n    <FloatingComponent\n      className={cx(\n        classBase,\n        {\n          [`${classBase}-collapsed`]: collapsed,\n        },\n        className,\n      )}\n      role=\"listbox\"\n      open={open}\n      {...rest}\n      ref={ref}\n    >\n      {children}\n    </FloatingComponent>\n  );\n});\n\nexport interface ColumnPickerProps\n  extends Omit<IconButtonProps, \"icon\">,\n    Pick<ColumnSearchProps, \"columns\" | \"onSelectionChange\" | \"selected\"> {\n  icon?: string;\n  iconSize?: number;\n}\n\nexport const ColumnPicker = forwardRef<HTMLButtonElement, ColumnPickerProps>(\n  function ColumnPicker(\n    {\n      columns,\n      icon = \"add\",\n      iconSize,\n      onSelectionChange,\n      selected,\n      ...htmlAttributes\n    },\n    forwardedRef,\n  ) {\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"vuu-column-picker\",\n      css: columnPickerCss,\n      window: targetWindow,\n    });\n\n    const [open, setOpen] = useState(false);\n\n    const listId = useIdMemo();\n    const { context, x, y, strategy, elements, floating, reference } =\n      useFloatingUI({\n        open,\n        onOpenChange: setOpen,\n        placement: \"bottom-start\",\n        strategy: \"fixed\",\n        middleware: [\n          size({\n            apply({ rects, elements, availableHeight }) {\n              Object.assign(elements.floating.style, {\n                minWidth: `${rects.reference.width}px`,\n                maxHeight: `max(calc(${availableHeight}px - var(--salt-spacing-100)), calc((var(--salt-size-base) + var(--salt-spacing-100)) * 5))`,\n              });\n            },\n          }),\n          flip({ fallbackStrategy: \"initialPlacement\" }),\n        ],\n      });\n\n    const { getReferenceProps, getFloatingProps } = useInteractions([\n      useDismiss(context),\n      useClick(context, { keyboardHandlers: false, toggle: false }),\n    ]);\n\n    const handleButtonClick = () => {\n      setOpen((isOpen) => !isOpen);\n    };\n\n    const forkedRef = useForkRef<HTMLButtonElement>(reference, forwardedRef);\n\n    const handleChange = () => {\n      console.log(\"handleChange\");\n    };\n    const handleMoveListItem = () => {\n      console.log(\"handleMoveListItem\");\n    };\n\n    return (\n      <>\n        <IconButton\n          {...htmlAttributes}\n          {...getReferenceProps()}\n          icon={icon}\n          size={iconSize}\n          onClick={handleButtonClick}\n          ref={forkedRef}\n          variant=\"secondary\"\n        />\n        <FloatingColumnSearch\n          {...getFloatingProps()}\n          open={open}\n          collapsed={!open}\n          id={listId}\n          left={x}\n          position={strategy}\n          ref={floating}\n          top={y}\n          width={elements.floating?.offsetWidth}\n          height={elements.floating?.offsetHeight}\n        >\n          <ColumnSearch\n            columns={columns}\n            onChange={handleChange}\n            onMoveListItem={handleMoveListItem}\n            onSelectionChange={onSelectionChange}\n            selected={selected}\n            style={{ width: 220, height: 300 }}\n          />\n        </FloatingColumnSearch>\n      </>\n    );\n  },\n);\n"],"names":["forwardRef","FloatingColumnSearch","useFloatingComponent","jsx","ColumnPicker","useWindow","useComponentCssInjection","columnPickerCss","useState","useIdMemo","useFloatingUI","size","elements","flip","useInteractions","useDismiss","useClick","useForkRef","jsxs","Fragment","IconButton","ColumnSearch"],"mappings":"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"}
+{"version":3,"file":"ColumnPicker.js","sources":["../../src/column-picker/ColumnPicker.tsx"],"sourcesContent":["import {\n  flip,\n  size,\n  useClick,\n  useDismiss,\n  useInteractions,\n} from \"@floating-ui/react\";\nimport {\n  FloatingComponentProps,\n  useFloatingComponent,\n  useFloatingUI,\n  useForkRef,\n  useIdMemo,\n} from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\n\nimport cx from \"clsx\";\nimport { forwardRef, useState } from \"react\";\nimport { IconButton, IconButtonProps } from \"../icon-button\";\nimport { ColumnSearch, ColumnSearchProps } from \"./ColumnSearch\";\n\nimport columnPickerCss from \"./ColumnPicker.css\";\n\nconst classBase = \"vuuColumnPicker\";\n\ninterface FloatingColumnSearchProps extends FloatingComponentProps {\n  collapsed?: boolean;\n}\n\nconst FloatingColumnSearch = forwardRef<\n  HTMLDivElement,\n  FloatingColumnSearchProps\n>(function FloatingColumnSearch(props, ref) {\n  const { children, className, collapsed, open, ...rest } = props;\n\n  const { Component: FloatingComponent } = useFloatingComponent();\n  return (\n    <FloatingComponent\n      className={cx(\n        classBase,\n        {\n          [`${classBase}-collapsed`]: collapsed,\n        },\n        className,\n      )}\n      role=\"listbox\"\n      open={open}\n      {...rest}\n      ref={ref}\n    >\n      {children}\n    </FloatingComponent>\n  );\n});\n\nexport interface ColumnPickerProps\n  extends Omit<IconButtonProps, \"icon\">,\n    Pick<ColumnSearchProps, \"columns\" | \"onSelectionChange\" | \"selected\"> {\n  icon?: string;\n  iconSize?: number;\n}\n\nexport const ColumnPicker = forwardRef<HTMLButtonElement, ColumnPickerProps>(\n  function ColumnPicker(\n    {\n      columns,\n      icon = \"add\",\n      iconSize,\n      onSelectionChange,\n      selected,\n      ...htmlAttributes\n    },\n    forwardedRef,\n  ) {\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"vuu-column-picker\",\n      css: columnPickerCss,\n      window: targetWindow,\n    });\n\n    const [open, setOpen] = useState(false);\n\n    const listId = useIdMemo();\n    const { context, x, y, strategy, elements, floating, reference } =\n      useFloatingUI({\n        open,\n        onOpenChange: setOpen,\n        placement: \"bottom-start\",\n        strategy: \"fixed\",\n        middleware: [\n          size({\n            apply({ rects, elements, availableHeight }) {\n              Object.assign(elements.floating.style, {\n                minWidth: `${rects.reference.width}px`,\n                maxHeight: `max(calc(${availableHeight}px - var(--salt-spacing-100)), calc((var(--salt-size-base) + var(--salt-spacing-100)) * 5))`,\n              });\n            },\n          }),\n          flip({ fallbackStrategy: \"initialPlacement\" }),\n        ],\n      });\n\n    const { getReferenceProps, getFloatingProps } = useInteractions([\n      useDismiss(context),\n      useClick(context, { keyboardHandlers: false, toggle: false }),\n    ]);\n\n    const handleButtonClick = () => {\n      setOpen((isOpen) => !isOpen);\n    };\n\n    const forkedRef = useForkRef<HTMLButtonElement>(reference, forwardedRef);\n\n    const handleChange = () => {\n      console.log(\"handleChange\");\n    };\n    const handleReorderColumns = () => {\n      console.log(\"handleMoveListItem\");\n    };\n\n    return (\n      <>\n        <IconButton\n          {...htmlAttributes}\n          {...getReferenceProps()}\n          icon={icon}\n          size={iconSize}\n          onClick={handleButtonClick}\n          ref={forkedRef}\n          variant=\"secondary\"\n        />\n        <FloatingColumnSearch\n          {...getFloatingProps()}\n          open={open}\n          collapsed={!open}\n          id={listId}\n          left={x}\n          position={strategy}\n          ref={floating}\n          top={y}\n          width={elements.floating?.offsetWidth}\n          height={elements.floating?.offsetHeight}\n        >\n          <ColumnSearch\n            columns={columns}\n            onChange={handleChange}\n            onReorderColumns={handleReorderColumns}\n            onSelectionChange={onSelectionChange}\n            selected={selected}\n            style={{ width: 220, height: 300 }}\n          />\n        </FloatingColumnSearch>\n      </>\n    );\n  },\n);\n"],"names":["forwardRef","FloatingColumnSearch","useFloatingComponent","jsx","ColumnPicker","useWindow","useComponentCssInjection","columnPickerCss","useState","useIdMemo","useFloatingUI","size","elements","flip","useInteractions","useDismiss","useClick","useForkRef","jsxs","Fragment","IconButton","ColumnSearch"],"mappings":"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"}

package/cjs/column-picker/ColumnSearch.js

@@ -6,15 +6,6 @@ var styles = require('@salt-ds/styles');
 var window = require('@salt-ds/window');
 var cx = require('clsx');
 var React = require('react');
-require('../list/common-hooks/keyUtils.js');
-require('../common-hooks/collectionProvider.js');
-require('../common-hooks/use-resize-observer.js');
-require('@vuu-ui/vuu-utils');
-require('../list/Highlighter.js');
-require('../list/ListItem.js');
-var List = require('../list/List.js');
-require('../drag-drop/DragDropProvider.js');
-require('../drag-drop/Draggable.js');
 var ColumnSearch$1 = require('./ColumnSearch.css.js');
 
 const classBase = "vuuColumnSearch";
@@ -25,7 +16,6 @@ const ColumnSearch = React.forwardRef(
     className,
     columns,
     onChange,
-    onMoveListItem,
     onSelectionChange,
     selected,
     ...htmlAttributes
@@ -58,20 +48,10 @@ const ColumnSearch = React.forwardRef(
               ref: autoFocus ? searchCallbackRef : null
             }
           ) }),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            List.List,
-            {
-              allowDragDrop: true,
-              height: "auto",
-              onChange: handleChange,
-              onMoveListItem,
-              onSelectionChange,
-              selected,
-              selectionStrategy: "multiple",
-              source: columns,
-              itemHeight: 33
-            }
-          )
+          /* @__PURE__ */ jsxRuntime.jsx(core.ListBox, { children: columns.map((column) => /* @__PURE__ */ jsxRuntime.jsxs(core.Option, { value: column, children: [
+            /* @__PURE__ */ jsxRuntime.jsx(core.Checkbox, { onChange: handleChange }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { children: column })
+          ] }, column)) })
         ]
       }
     );

package/cjs/column-picker/ColumnSearch.js.map

@@ -1 +1 @@
-{"version":3,"file":"ColumnSearch.js","sources":["../../src/column-picker/ColumnSearch.tsx"],"sourcesContent":["import { Input } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport cx from \"clsx\";\nimport { HTMLAttributes, RefCallback, forwardRef, useCallback } from \"react\";\nimport { List, ListProps } from \"../list\";\n\nimport searchableListCss from \"./ColumnSearch.css\";\n\nconst classBase = \"vuuColumnSearch\";\n\nexport interface ColumnSearchProps\n  extends HTMLAttributes<HTMLDivElement>,\n    Pick<\n      ListProps<string, \"multiple\">,\n      \"onMoveListItem\" | \"onSelectionChange\" | \"selected\"\n    > {\n  columns: string[];\n}\n\nconst searchIcon = <span data-icon=\"search\" />;\n\nexport const ColumnSearch = forwardRef<HTMLDivElement, ColumnSearchProps>(\n  function ColumnSearch(\n    {\n      autoFocus = false,\n      className,\n      columns,\n      onChange,\n      onMoveListItem,\n      onSelectionChange,\n      selected,\n      ...htmlAttributes\n    },\n    forwardedRef\n  ) {\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"vuu-column-picker\",\n      css: searchableListCss,\n      window: targetWindow,\n    });\n\n    const searchCallbackRef = useCallback<RefCallback<HTMLElement>>((el) => {\n      setTimeout(() => {\n        el?.querySelector(\"input\")?.focus();\n      }, 100);\n    }, []);\n\n    const handleChange = () => {\n      console.log(`handle change`);\n    };\n\n    return (\n      <div\n        {...htmlAttributes}\n        className={cx(classBase, className)}\n        ref={forwardedRef}\n      >\n        <div className={`${classBase}-inputField`}>\n          <Input\n            // inputProps={{ onKeyDown }}\n            startAdornment={searchIcon}\n            ref={autoFocus ? searchCallbackRef : null}\n            // value={searchState.searchText}\n            // onChange={onChange}\n          />\n        </div>\n\n        <List<string, \"multiple\">\n          allowDragDrop\n          height=\"auto\"\n          onChange={handleChange}\n          onMoveListItem={onMoveListItem}\n          onSelectionChange={onSelectionChange}\n          selected={selected}\n          selectionStrategy=\"multiple\"\n          source={columns}\n          itemHeight={33}\n        />\n      </div>\n    );\n  }\n);\n"],"names":["jsx","forwardRef","ColumnSearch","useWindow","useComponentCssInjection","searchableListCss","useCallback","jsxs","Input","List"],"mappings":";;;;;;;;;;;;;;;;;;;AASA,MAAM,SAAY,GAAA,iBAAA;AAWlB,MAAM,UAAa,mBAAAA,cAAA,CAAC,MAAK,EAAA,EAAA,WAAA,EAAU,QAAS,EAAA,CAAA;AAErC,MAAM,YAAe,GAAAC,gBAAA;AAAA,EAC1B,SAASC,aACP,CAAA;AAAA,IACE,SAAY,GAAA,KAAA;AAAA,IACZ,SAAA;AAAA,IACA,OAAA;AAAA,IACA,QAAA;AAAA,IACA,cAAA;AAAA,IACA,iBAAA;AAAA,IACA,QAAA;AAAA,IACA,GAAG;AAAA,KAEL,YACA,EAAA;AACA,IAAA,MAAM,eAAeC,gBAAU,EAAA;AAC/B,IAAyBC,+BAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,mBAAA;AAAA,MACR,GAAK,EAAAC,cAAA;AAAA,MACL,MAAQ,EAAA;AAAA,KACT,CAAA;AAED,IAAM,MAAA,iBAAA,GAAoBC,iBAAsC,CAAA,CAAC,EAAO,KAAA;AACtE,MAAA,UAAA,CAAW,MAAM;AACf,QAAI,EAAA,EAAA,aAAA,CAAc,OAAO,CAAA,EAAG,KAAM,EAAA;AAAA,SACjC,GAAG,CAAA;AAAA,KACR,EAAG,EAAE,CAAA;AAEL,IAAA,MAAM,eAAe,MAAM;AACzB,MAAA,OAAA,CAAQ,IAAI,CAAe,aAAA,CAAA,CAAA;AAAA,KAC7B;AAEA,IACE,uBAAAC,eAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACE,GAAG,cAAA;AAAA,QACJ,SAAA,EAAW,EAAG,CAAA,SAAA,EAAW,SAAS,CAAA;AAAA,QAClC,GAAK,EAAA,YAAA;AAAA,QAEL,QAAA,EAAA;AAAA,0BAAAP,cAAA,CAAC,KAAI,EAAA,EAAA,SAAA,EAAW,CAAG,EAAA,SAAS,CAC1B,WAAA,CAAA,EAAA,QAAA,kBAAAA,cAAA;AAAA,YAACQ,UAAA;AAAA,YAAA;AAAA,cAEC,cAAgB,EAAA,UAAA;AAAA,cAChB,GAAA,EAAK,YAAY,iBAAoB,GAAA;AAAA;AAAA,WAIzC,EAAA,CAAA;AAAA,0BAEAR,cAAA;AAAA,YAACS,SAAA;AAAA,YAAA;AAAA,cACC,aAAa,EAAA,IAAA;AAAA,cACb,MAAO,EAAA,MAAA;AAAA,cACP,QAAU,EAAA,YAAA;AAAA,cACV,cAAA;AAAA,cACA,iBAAA;AAAA,cACA,QAAA;AAAA,cACA,iBAAkB,EAAA,UAAA;AAAA,cAClB,MAAQ,EAAA,OAAA;AAAA,cACR,UAAY,EAAA;AAAA;AAAA;AACd;AAAA;AAAA,KACF;AAAA;AAGN;;;;"}
+{"version":3,"file":"ColumnSearch.js","sources":["../../src/column-picker/ColumnSearch.tsx"],"sourcesContent":["import { Checkbox, Input, ListBoxProps } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport cx from \"clsx\";\nimport { HTMLAttributes, RefCallback, forwardRef, useCallback } from \"react\";\nimport { ListBox, Option } from \"@salt-ds/core\";\n\nimport searchableListCss from \"./ColumnSearch.css\";\n\nconst classBase = \"vuuColumnSearch\";\n\nexport interface ColumnSearchProps\n  extends HTMLAttributes<HTMLDivElement>,\n    Pick<ListBoxProps, \"onSelectionChange\" | \"selected\"> {\n  columns: string[];\n  onReorderColumns: (columns: string[]) => void;\n}\n\nconst searchIcon = <span data-icon=\"search\" />;\n\nexport const ColumnSearch = forwardRef<HTMLDivElement, ColumnSearchProps>(\n  function ColumnSearch(\n    {\n      autoFocus = false,\n      className,\n      columns,\n      onChange,\n      onSelectionChange,\n      selected,\n      ...htmlAttributes\n    },\n    forwardedRef,\n  ) {\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"vuu-column-picker\",\n      css: searchableListCss,\n      window: targetWindow,\n    });\n\n    const searchCallbackRef = useCallback<RefCallback<HTMLElement>>((el) => {\n      setTimeout(() => {\n        el?.querySelector(\"input\")?.focus();\n      }, 100);\n    }, []);\n\n    const handleChange = () => {\n      console.log(`handle change`);\n    };\n\n    return (\n      <div\n        {...htmlAttributes}\n        className={cx(classBase, className)}\n        ref={forwardedRef}\n      >\n        <div className={`${classBase}-inputField`}>\n          <Input\n            // inputProps={{ onKeyDown }}\n            startAdornment={searchIcon}\n            ref={autoFocus ? searchCallbackRef : null}\n            // value={searchState.searchText}\n            // onChange={onChange}\n          />\n        </div>\n        <ListBox>\n          {columns.map((column) => (\n            <Option key={column} value={column}>\n              <Checkbox onChange={handleChange} />\n              <span>{column}</span>\n            </Option>\n          ))}\n        </ListBox>\n      </div>\n    );\n  },\n);\n"],"names":["jsx","forwardRef","ColumnSearch","useWindow","useComponentCssInjection","searchableListCss","useCallback","jsxs","Input","ListBox","Option","Checkbox"],"mappings":";;;;;;;;;;AASA,MAAM,SAAY,GAAA,iBAAA;AASlB,MAAM,UAAa,mBAAAA,cAAA,CAAC,MAAK,EAAA,EAAA,WAAA,EAAU,QAAS,EAAA,CAAA;AAErC,MAAM,YAAe,GAAAC,gBAAA;AAAA,EAC1B,SAASC,aACP,CAAA;AAAA,IACE,SAAY,GAAA,KAAA;AAAA,IACZ,SAAA;AAAA,IACA,OAAA;AAAA,IACA,QAAA;AAAA,IACA,iBAAA;AAAA,IACA,QAAA;AAAA,IACA,GAAG;AAAA,KAEL,YACA,EAAA;AACA,IAAA,MAAM,eAAeC,gBAAU,EAAA;AAC/B,IAAyBC,+BAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,mBAAA;AAAA,MACR,GAAK,EAAAC,cAAA;AAAA,MACL,MAAQ,EAAA;AAAA,KACT,CAAA;AAED,IAAM,MAAA,iBAAA,GAAoBC,iBAAsC,CAAA,CAAC,EAAO,KAAA;AACtE,MAAA,UAAA,CAAW,MAAM;AACf,QAAI,EAAA,EAAA,aAAA,CAAc,OAAO,CAAA,EAAG,KAAM,EAAA;AAAA,SACjC,GAAG,CAAA;AAAA,KACR,EAAG,EAAE,CAAA;AAEL,IAAA,MAAM,eAAe,MAAM;AACzB,MAAA,OAAA,CAAQ,IAAI,CAAe,aAAA,CAAA,CAAA;AAAA,KAC7B;AAEA,IACE,uBAAAC,eAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACE,GAAG,cAAA;AAAA,QACJ,SAAA,EAAW,EAAG,CAAA,SAAA,EAAW,SAAS,CAAA;AAAA,QAClC,GAAK,EAAA,YAAA;AAAA,QAEL,QAAA,EAAA;AAAA,0BAAAP,cAAA,CAAC,KAAI,EAAA,EAAA,SAAA,EAAW,CAAG,EAAA,SAAS,CAC1B,WAAA,CAAA,EAAA,QAAA,kBAAAA,cAAA;AAAA,YAACQ,UAAA;AAAA,YAAA;AAAA,cAEC,cAAgB,EAAA,UAAA;AAAA,cAChB,GAAA,EAAK,YAAY,iBAAoB,GAAA;AAAA;AAAA,WAIzC,EAAA,CAAA;AAAA,0BACAR,cAAA,CAACS,gBACE,QAAQ,EAAA,OAAA,CAAA,GAAA,CAAI,CAAC,MACZ,qBAAAF,eAAA,CAACG,WAAoB,EAAA,EAAA,KAAA,EAAO,MAC1B,EAAA,QAAA,EAAA;AAAA,4BAACV,cAAA,CAAAW,aAAA,EAAA,EAAS,UAAU,YAAc,EAAA,CAAA;AAAA,4BAClCX,cAAA,CAAC,UAAM,QAAO,EAAA,MAAA,EAAA;AAAA,WAFH,EAAA,EAAA,MAGb,CACD,CACH,EAAA;AAAA;AAAA;AAAA,KACF;AAAA;AAGN;;;;"}

package/cjs/context-panel-provider/ContextPanelProvider.js

@@ -0,0 +1,55 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var vuuLayout = require('@vuu-ui/vuu-layout');
+var core = require('@salt-ds/core');
+
+const ContextPanelContext = React.createContext({
+  showContextPanel: () => {
+    console.warn(
+      "[ContextPanelContext] no implementation for showContextPanel, you need to add a ContextPanelProvider"
+    );
+  }
+});
+const ContextPanelProvider = ({
+  children,
+  showContextPanel: showContextPanelProp
+}) => {
+  const { showComponentInContextPanel } = vuuLayout.useLayoutOperation();
+  const [dialog, setDialog] = React.useState(null);
+  const showContextPanel = React.useCallback(
+    (componentType, title, props) => {
+      if (showContextPanelProp) {
+        console.log(`show context panel will use method from prop`);
+      } else if (!vuuLayout.isUnconfiguredProperty(showComponentInContextPanel)) {
+        showComponentInContextPanel(
+          { type: componentType, props },
+          title
+        );
+      } else {
+        const component = vuuLayout.layoutFromJson(
+          { type: componentType, props },
+          ""
+        );
+        setDialog(
+          /* @__PURE__ */ jsxRuntime.jsx(core.Dialog, { open: true, children: /* @__PURE__ */ jsxRuntime.jsx(core.DialogContent, { children: component }) })
+        );
+      }
+    },
+    [showComponentInContextPanel, showContextPanelProp]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsxs(ContextPanelContext.Provider, { value: { showContextPanel }, children: [
+    children,
+    dialog
+  ] });
+};
+function useContextPanel() {
+  const { showContextPanel } = React.useContext(ContextPanelContext);
+  return showContextPanel;
+}
+
+exports.ContextPanelContext = ContextPanelContext;
+exports.ContextPanelProvider = ContextPanelProvider;
+exports.useContextPanel = useContextPanel;
+//# sourceMappingURL=ContextPanelProvider.js.map

package/cjs/context-panel-provider/ContextPanelProvider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ContextPanelProvider.js","sources":["../../src/context-panel-provider/ContextPanelProvider.tsx"],"sourcesContent":["import {\n  createContext,\n  ReactElement,\n  ReactNode,\n  useCallback,\n  useContext,\n  useState,\n} from \"react\";\nimport {\n  isUnconfiguredProperty,\n  layoutFromJson,\n  useLayoutOperation,\n} from \"@vuu-ui/vuu-layout\";\nimport { LayoutJSON } from \"@vuu-ui/vuu-utils\";\nimport { Dialog, DialogContent } from \"@salt-ds/core\";\n\nexport type ShowContextPanel = (\n  componentType: string,\n  title: string,\n  componentProps: unknown,\n) => void;\n\nexport interface ContextPanelProps {\n  showContextPanel: ShowContextPanel;\n}\n\nexport const ContextPanelContext = createContext<ContextPanelProps>({\n  showContextPanel: () => {\n    console.warn(\n      \"[ContextPanelContext] no implementation for showContextPanel, you need to add a ContextPanelProvider\",\n    );\n  },\n});\n\nexport const ContextPanelProvider = ({\n  children,\n  showContextPanel: showContextPanelProp,\n}: Partial<ContextPanelProps> & {\n  children: ReactNode;\n}) => {\n  const { showComponentInContextPanel } = useLayoutOperation();\n  const [dialog, setDialog] = useState<ReactElement | null>(null);\n\n  const showContextPanel = useCallback<ShowContextPanel>(\n    (componentType, title, props) => {\n      if (showContextPanelProp) {\n        console.log(`show context panel will use method from prop`);\n      } else if (!isUnconfiguredProperty(showComponentInContextPanel)) {\n        showComponentInContextPanel(\n          { type: componentType, props } as LayoutJSON,\n          title,\n        );\n      } else {\n        const component = layoutFromJson(\n          { type: componentType, props } as LayoutJSON,\n          \"\",\n        );\n        setDialog(\n          <Dialog open={true}>\n            <DialogContent>{component}</DialogContent>\n          </Dialog>,\n        );\n      }\n    },\n    [showComponentInContextPanel, showContextPanelProp],\n  );\n\n  return (\n    <ContextPanelContext.Provider value={{ showContextPanel }}>\n      {children}\n      {dialog}\n    </ContextPanelContext.Provider>\n  );\n};\n\nexport function useContextPanel() {\n  const { showContextPanel } = useContext(ContextPanelContext);\n  return showContextPanel;\n}\n"],"names":["createContext","useLayoutOperation","useState","useCallback","isUnconfiguredProperty","layoutFromJson","Dialog","jsx","DialogContent","useContext"],"mappings":";;;;;;;AA0BO,MAAM,sBAAsBA,mBAAiC,CAAA;AAAA,EAClE,kBAAkB,MAAM;AACtB,IAAQ,OAAA,CAAA,IAAA;AAAA,MACN;AAAA,KACF;AAAA;AAEJ,CAAC;AAEM,MAAM,uBAAuB,CAAC;AAAA,EACnC,QAAA;AAAA,EACA,gBAAkB,EAAA;AACpB,CAEM,KAAA;AACJ,EAAM,MAAA,EAAE,2BAA4B,EAAA,GAAIC,4BAAmB,EAAA;AAC3D,EAAA,MAAM,CAAC,MAAA,EAAQ,SAAS,CAAA,GAAIC,eAA8B,IAAI,CAAA;AAE9D,EAAA,MAAM,gBAAmB,GAAAC,iBAAA;AAAA,IACvB,CAAC,aAAe,EAAA,KAAA,EAAO,KAAU,KAAA;AAC/B,MAAA,IAAI,oBAAsB,EAAA;AACxB,QAAA,OAAA,CAAQ,IAAI,CAA8C,4CAAA,CAAA,CAAA;AAAA,OACjD,MAAA,IAAA,CAACC,gCAAuB,CAAA,2BAA2B,CAAG,EAAA;AAC/D,QAAA,2BAAA;AAAA,UACE,EAAE,IAAM,EAAA,aAAA,EAAe,KAAM,EAAA;AAAA,UAC7B;AAAA,SACF;AAAA,OACK,MAAA;AACL,QAAA,MAAM,SAAY,GAAAC,wBAAA;AAAA,UAChB,EAAE,IAAM,EAAA,aAAA,EAAe,KAAM,EAAA;AAAA,UAC7B;AAAA,SACF;AACA,QAAA,SAAA;AAAA,yCACGC,WAAO,EAAA,EAAA,IAAA,EAAM,MACZ,QAAC,kBAAAC,cAAA,CAAAC,kBAAA,EAAA,EAAe,qBAAU,CAC5B,EAAA;AAAA,SACF;AAAA;AACF,KACF;AAAA,IACA,CAAC,6BAA6B,oBAAoB;AAAA,GACpD;AAEA,EAAA,uCACG,mBAAoB,CAAA,QAAA,EAApB,EAA6B,KAAO,EAAA,EAAE,kBACpC,EAAA,QAAA,EAAA;AAAA,IAAA,QAAA;AAAA,IACA;AAAA,GACH,EAAA,CAAA;AAEJ;AAEO,SAAS,eAAkB,GAAA;AAChC,EAAA,MAAM,EAAE,gBAAA,EAAqB,GAAAC,gBAAA,CAAW,mBAAmB,CAAA;AAC3D,EAAO,OAAA,gBAAA;AACT;;;;;;"}

package/cjs/index.js

@@ -6,9 +6,6 @@ var useCalendar = require('./calendar/useCalendar.js');
 var useSelection = require('./calendar/useSelection.js');
 var ColumnPicker = require('./column-picker/ColumnPicker.js');
 var ColumnSearch = require('./column-picker/ColumnSearch.js');
-var collectionProvider = require('./common-hooks/collectionProvider.js');
-var itemToString = require('./common-hooks/itemToString.js');
-var useCollectionItems = require('./common-hooks/useCollectionItems.js');
 var useControlled = require('./common-hooks/useControlled.js');
 var useResizeObserver = require('./common-hooks/use-resize-observer.js');
 var selectionTypes = require('./common-hooks/selectionTypes.js');
@@ -29,24 +26,6 @@ var IconButton = require('./icon-button/IconButton.js');
 var ToggleIconButton = require('./icon-button/ToggleIconButton.js');
 var TablePicker = require('./instrument-picker/TablePicker.js');
 var TableSearch = require('./table-search/TableSearch.js');
-var keyUtils = require('./list/common-hooks/keyUtils.js');
-var useCollapsibleGroups = require('./list/common-hooks/useCollapsibleGroups.js');
-var listDomUtils = require('./list/common-hooks/list-dom-utils.js');
-var useImperativeScrollingAPI = require('./list/common-hooks/useImperativeScrollingAPI.js');
-var useKeyboardNavigation = require('./list/common-hooks/useKeyboardNavigation.js');
-var useSelection$1 = require('./common-hooks/useSelection.js');
-var useTypeahead = require('./list/common-hooks/useTypeahead.js');
-var useViewportTracking = require('./list/common-hooks/useViewportTracking.js');
-var collectionItemUtils = require('./list/common-hooks/utils/collection-item-utils.js');
-var filterUtils = require('./list/common-hooks/utils/filter-utils.js');
-var isSelected = require('./list/common-hooks/utils/isSelected.js');
-var Highlighter = require('./list/Highlighter.js');
-var ListItem = require('./list/ListItem.js');
-var List = require('./list/List.js');
-var ListItemHeader = require('./list/ListItemHeader.js');
-var ListItemGroup = require('./list/ListItemGroup.js');
-var useList = require('./list/useList.js');
-var RadioIcon = require('./list/RadioIcon.js');
 var MeasuredContainer = require('./measured-container/MeasuredContainer.js');
 var useMeasuredContainer = require('./measured-container/useMeasuredContainer.js');
 var OverflowContainer = require('./overflow-container/OverflowContainer.js');
@@ -72,6 +51,8 @@ var forwardCallbackProps = require('./utils/forwardCallbackProps.js');
 var VuuDatePicker = require('./vuu-date-picker/VuuDatePicker.js');
 var VuuInput = require('./vuu-input/VuuInput.js');
 var VuuTypeaheadInput = require('./vuu-typeahead-input/VuuTypeaheadInput.js');
+var ContextPanelProvider = require('./context-panel-provider/ContextPanelProvider.js');
+var SortableList = require('./sortable-list/SortableList.js');
 
 
 
@@ -84,11 +65,6 @@ exports.useSelectionCalendar = useSelection.useSelectionCalendar;
 exports.useSelectionDay = useSelection.useSelectionDay;
 exports.ColumnPicker = ColumnPicker.ColumnPicker;
 exports.ColumnSearch = ColumnSearch.ColumnSearch;
-exports.CollectionContext = collectionProvider.CollectionContext;
-exports.CollectionProvider = collectionProvider.CollectionProvider;
-exports.useCollection = collectionProvider.useCollection;
-exports.itemToString = itemToString.itemToString;
-exports.useCollectionItems = useCollectionItems.useCollectionItems;
 exports.useControlled = useControlled.useControlled;
 exports.HeightOnly = useResizeObserver.HeightOnly;
 exports.WidthHeight = useResizeObserver.WidthHeight;
@@ -136,60 +112,6 @@ exports.IconButton = IconButton.IconButton;
 exports.ToggleIconButton = ToggleIconButton.ToggleIconButton;
 exports.TablePicker = TablePicker.TablePicker;
 exports.TableSearch = TableSearch.TableSearch;
-exports.ArrowDown = keyUtils.ArrowDown;
-exports.ArrowLeft = keyUtils.ArrowLeft;
-exports.ArrowRight = keyUtils.ArrowRight;
-exports.ArrowUp = keyUtils.ArrowUp;
-exports.End = keyUtils.End;
-exports.Enter = keyUtils.Enter;
-exports.Escape = keyUtils.Escape;
-exports.Home = keyUtils.Home;
-exports.PageDown = keyUtils.PageDown;
-exports.PageUp = keyUtils.PageUp;
-exports.Space = keyUtils.Space;
-exports.isCharacterKey = keyUtils.isCharacterKey;
-exports.isNavigationKey = keyUtils.isNavigationKey;
-exports.useCollapsibleGroups = useCollapsibleGroups.useCollapsibleGroups;
-exports.closestListItemId = listDomUtils.closestListItemId;
-exports.closestListItemIndex = listDomUtils.closestListItemIndex;
-exports.listItemElement = listDomUtils.listItemElement;
-exports.listItemId = listDomUtils.listItemId;
-exports.listItemIndex = listDomUtils.listItemIndex;
-exports.useImperativeScrollingAPI = useImperativeScrollingAPI.useImperativeScrollingAPI;
-exports.LIST_FOCUS_VISIBLE = useKeyboardNavigation.LIST_FOCUS_VISIBLE;
-exports.useKeyboardNavigation = useKeyboardNavigation.useKeyboardNavigation;
-exports.CHECKBOX = useSelection$1.CHECKBOX;
-exports.GROUP_SELECTION_CASCADE = useSelection$1.GROUP_SELECTION_CASCADE;
-exports.GROUP_SELECTION_NONE = useSelection$1.GROUP_SELECTION_NONE;
-exports.GROUP_SELECTION_SINGLE = useSelection$1.GROUP_SELECTION_SINGLE;
-exports.groupSelectionEnabled = useSelection$1.groupSelectionEnabled;
-exports.useSelection = useSelection$1.useSelection;
-exports.useTypeahead = useTypeahead.useTypeahead;
-exports.useViewportTracking = useViewportTracking.useViewportTracking;
-exports.childIsGroup = collectionItemUtils.childIsGroup;
-exports.childItems = collectionItemUtils.childItems;
-exports.countChildItems = collectionItemUtils.countChildItems;
-exports.getChildLabel = collectionItemUtils.getChildLabel;
-exports.getChildNodes = collectionItemUtils.getChildNodes;
-exports.isDisabled = collectionItemUtils.isDisabled;
-exports.isFocusable = collectionItemUtils.isFocusable;
-exports.isGroupNode = collectionItemUtils.isGroupNode;
-exports.isHeader = collectionItemUtils.isHeader;
-exports.isParentPath = collectionItemUtils.isParentPath;
-exports.replaceCollectionItem = collectionItemUtils.replaceCollectionItem;
-exports.sourceItemHasProp = collectionItemUtils.sourceItemHasProp;
-exports.sourceItems = collectionItemUtils.sourceItems;
-exports.getDefaultFilter = filterUtils.getDefaultFilter;
-exports.getDefaultFilterRegex = filterUtils.getDefaultFilterRegex;
-exports.isSelected = isSelected.isSelected;
-exports.Highlighter = Highlighter.Highlighter;
-exports.ListItem = ListItem.ListItem;
-exports.ListItemProxy = ListItem.ListItemProxy;
-exports.List = List.List;
-exports.ListItemHeader = ListItemHeader.ListItemHeader;
-exports.ListItemGroup = ListItemGroup.ListItemGroup;
-exports.useList = useList.useList;
-exports.RadioIcon = RadioIcon.RadioIcon;
 exports.MeasuredContainer = MeasuredContainer.MeasuredContainer;
 exports.reduceSizeHeight = useMeasuredContainer.reduceSizeHeight;
 exports.useMeasuredContainer = useMeasuredContainer.useMeasuredContainer;
@@ -229,4 +151,8 @@ exports.forwardCallbackProps = forwardCallbackProps.forwardCallbackProps;
 exports.VuuDatePicker = VuuDatePicker.VuuDatePicker;
 exports.VuuInput = VuuInput.VuuInput;
 exports.VuuTypeaheadInput = VuuTypeaheadInput.VuuTypeaheadInput;
+exports.ContextPanelProvider = ContextPanelProvider.ContextPanelProvider;
+exports.useContextPanel = ContextPanelProvider.useContextPanel;
+exports.SortableList = SortableList.SortableList;
+exports.SortableOption = SortableList.SortableOption;
 //# sourceMappingURL=index.js.map

package/cjs/index.js.map

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

package/cjs/sortable-list/SortableList.js

@@ -0,0 +1,38 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var core = require('@salt-ds/core');
+var sortable = require('@dnd-kit/react/sortable');
+var react = require('@dnd-kit/react');
+var React = require('react');
+
+const SortableOption = ({
+  id,
+  index,
+  value,
+  ...optionProps
+}) => {
+  const { ref } = sortable.useSortable({ id, index });
+  return /* @__PURE__ */ jsxRuntime.jsx(core.Option, { ...optionProps, id, ref, value });
+};
+const SortableList = ({
+  children,
+  onReorderListItems,
+  ...listBoxProps
+}) => {
+  const listRef = React.useRef(null);
+  const handleDragEnd = React.useCallback(() => {
+    setTimeout(() => {
+      const listItems = listRef.current?.querySelectorAll(".saltOption");
+      if (listItems) {
+        const items = Array.from(listItems).map(({ id }) => id);
+        onReorderListItems?.(items);
+      }
+    }, 300);
+  }, [onReorderListItems]);
+  return /* @__PURE__ */ jsxRuntime.jsx(react.DragDropProvider, { onDragEnd: handleDragEnd, children: /* @__PURE__ */ jsxRuntime.jsx(core.ListBox, { ...listBoxProps, ref: listRef, children }) });
+};
+
+exports.SortableList = SortableList;
+exports.SortableOption = SortableOption;
+//# sourceMappingURL=SortableList.js.map

package/cjs/sortable-list/SortableList.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SortableList.js","sources":["../../src/sortable-list/SortableList.tsx"],"sourcesContent":["import { ListBox, ListBoxProps, Option, OptionProps } from \"@salt-ds/core\";\nimport { useSortable } from \"@dnd-kit/react/sortable\";\nimport { DragDropProvider } from \"@dnd-kit/react\";\nimport { useCallback, useRef } from \"react\";\n\nexport const SortableOption = ({\n  id,\n  index,\n  value,\n  ...optionProps\n}: OptionProps & { id: string; index: number }) => {\n  const { ref } = useSortable({ id, index });\n  return <Option {...optionProps} id={id} ref={ref} value={value} />;\n};\n\nexport const SortableList = ({\n  children,\n  onReorderListItems,\n  ...listBoxProps\n}: ListBoxProps & {\n  onReorderListItems?: (listItems: unknown[]) => void;\n}) => {\n  const listRef = useRef<HTMLDivElement>(null);\n  const handleDragEnd = useCallback(() => {\n    setTimeout(() => {\n      const listItems = listRef.current?.querySelectorAll(\".saltOption\");\n      if (listItems) {\n        const items = Array.from(listItems).map(({ id }) => id);\n        onReorderListItems?.(items);\n      }\n    }, 300);\n  }, [onReorderListItems]);\n\n  return (\n    <DragDropProvider onDragEnd={handleDragEnd}>\n      <ListBox {...listBoxProps} ref={listRef}>\n        {children}\n      </ListBox>\n    </DragDropProvider>\n  );\n};\n"],"names":["useSortable","Option","useRef","useCallback","jsx","DragDropProvider","ListBox"],"mappings":";;;;;;;;AAKO,MAAM,iBAAiB,CAAC;AAAA,EAC7B,EAAA;AAAA,EACA,KAAA;AAAA,EACA,KAAA;AAAA,EACA,GAAG;AACL,CAAmD,KAAA;AACjD,EAAA,MAAM,EAAE,GAAI,EAAA,GAAIA,qBAAY,EAAE,EAAA,EAAI,OAAO,CAAA;AACzC,EAAA,sCAAQC,WAAQ,EAAA,EAAA,GAAG,WAAa,EAAA,EAAA,EAAQ,KAAU,KAAc,EAAA,CAAA;AAClE;AAEO,MAAM,eAAe,CAAC;AAAA,EAC3B,QAAA;AAAA,EACA,kBAAA;AAAA,EACA,GAAG;AACL,CAEM,KAAA;AACJ,EAAM,MAAA,OAAA,GAAUC,aAAuB,IAAI,CAAA;AAC3C,EAAM,MAAA,aAAA,GAAgBC,kBAAY,MAAM;AACtC,IAAA,UAAA,CAAW,MAAM;AACf,MAAA,MAAM,SAAY,GAAA,OAAA,CAAQ,OAAS,EAAA,gBAAA,CAAiB,aAAa,CAAA;AACjE,MAAA,IAAI,SAAW,EAAA;AACb,QAAM,MAAA,KAAA,GAAQ,KAAM,CAAA,IAAA,CAAK,SAAS,CAAA,CAAE,IAAI,CAAC,EAAE,EAAG,EAAA,KAAM,EAAE,CAAA;AACtD,QAAA,kBAAA,GAAqB,KAAK,CAAA;AAAA;AAC5B,OACC,GAAG,CAAA;AAAA,GACR,EAAG,CAAC,kBAAkB,CAAC,CAAA;AAEvB,EACE,uBAAAC,cAAA,CAACC,sBAAiB,EAAA,EAAA,SAAA,EAAW,aAC3B,EAAA,QAAA,kBAAAD,cAAA,CAACE,YAAS,EAAA,EAAA,GAAG,YAAc,EAAA,GAAA,EAAK,OAC7B,EAAA,QAAA,EACH,CACF,EAAA,CAAA;AAEJ;;;;;"}

package/cjs/toolbar/Toolbar.js.map

@@ -1 +1 @@
-{"version":3,"file":"Toolbar.js","sources":["../../src/toolbar/Toolbar.tsx"],"sourcesContent":["import { asReactElements, useId } from \"@vuu-ui/vuu-utils\";\nimport cx from \"clsx\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport React, { useMemo, useRef } from \"react\";\nimport {\n  OverflowContainer,\n  OverflowContainerProps,\n} from \"../overflow-container\";\nimport { useToolbar } from \"./useToolbar\";\nimport { forwardCallbackProps } from \"../utils\";\n\nimport toolbarCss from \"./Toolbar.css\";\nimport {\n  SelectionStrategy,\n  SpecialKeyMultipleSelection,\n} from \"../common-hooks\";\n\nconst classBase = \"vuuToolbar\";\n\nexport type ActiveItemChangeHandler = (itemIndex: number[]) => void;\n\nexport type NavigationOutOfBoundsHandler = (direction: \"start\" | \"end\") => void;\nexport interface ToolbarProps extends OverflowContainerProps {\n  activeItemIndex?: number[];\n  alignItems?: \"start\" | \"center\" | \"end\";\n  defaultActiveItemIndex?: number[];\n  onActiveChange?: ActiveItemChangeHandler;\n  /**\n   * Indicates that user has used Arrow key navigation to move beyond the\n   * last or before the first item. A higher level component may want to\n   * use this to implement a seamless navigation across components.\n   */\n  onNavigateOutOfBounds?: NavigationOutOfBoundsHandler;\n  selectionStrategy?: SelectionStrategy | SpecialKeyMultipleSelection;\n  showSeparators?: boolean;\n}\n\nexport const Toolbar = ({\n  activeItemIndex: activeItemIndexProp,\n  alignItems = \"start\",\n  defaultActiveItemIndex,\n  children,\n  className,\n  id: idProp,\n  onActiveChange,\n  onNavigateOutOfBounds,\n  orientation = \"horizontal\",\n  selectionStrategy = \"none\",\n  showSeparators = false,\n  ...props\n}: ToolbarProps) => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-toolbar\",\n    css: toolbarCss,\n    window: targetWindow,\n  });\n\n  const rootRef = useRef<HTMLDivElement>(null);\n  const {\n    activeItemIndex,\n    focusableIdx,\n    focusVisible,\n    itemProps,\n    ...toolbarHook\n  } = useToolbar({\n    activeItemIndex: activeItemIndexProp,\n    defaultActiveItemIndex,\n    containerRef: rootRef,\n    onActiveChange,\n    onNavigateOutOfBounds,\n    orientation,\n    selectionStrategy,\n  });\n\n  const id = useId(idProp);\n\n  const items = useMemo(\n    () =>\n      asReactElements(children).map((child, index) => {\n        const {\n          id: itemId = `${id}-tab-${index}`,\n          className: itemClassName,\n          ...ownProps\n        } = child.props as any;\n        const selected = activeItemIndex.includes(index);\n        return React.cloneElement(child, {\n          ...forwardCallbackProps(ownProps, itemProps),\n          className: cx(\"vuuToolbarItem\", itemClassName),\n          \"data-overflow-priority\": selected ? \"1\" : undefined,\n          id: itemId,\n          key: index,\n          \"aria-selected\": selected,\n          tabIndex: focusableIdx === index ? 0 : -1,\n        });\n      }),\n    [activeItemIndex, children, focusableIdx, id, itemProps],\n  );\n\n  return (\n    <OverflowContainer\n      {...props}\n      {...toolbarHook.containerProps}\n      className={cx(className, classBase, `${classBase}-${orientation}`, {\n        [`${classBase}-alignCenter`]: alignItems === \"center\",\n        [`${classBase}-alignEnd`]: alignItems === \"end\",\n        [`${classBase}-withSeparators`]: showSeparators,\n      })}\n      {...props}\n      ref={rootRef}\n    >\n      {items}\n    </OverflowContainer>\n  );\n};\n"],"names":["useWindow","useComponentCssInjection","toolbarCss","useRef","useToolbar","useId","useMemo","asReactElements","forwardCallbackProps","jsx","OverflowContainer"],"mappings":"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"}
+{"version":3,"file":"Toolbar.js","sources":["../../src/toolbar/Toolbar.tsx"],"sourcesContent":["import { asReactElements, useId } from \"@vuu-ui/vuu-utils\";\nimport cx from \"clsx\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport React, { useMemo, useRef } from \"react\";\nimport {\n  OverflowContainer,\n  OverflowContainerProps,\n} from \"../overflow-container\";\nimport { useToolbar } from \"./useToolbar\";\nimport { forwardCallbackProps } from \"../utils\";\nimport {\n  SelectionStrategy,\n  SpecialKeyMultipleSelection,\n} from \"../common-hooks\";\n\nimport toolbarCss from \"./Toolbar.css\";\n\nconst classBase = \"vuuToolbar\";\n\nexport type ActiveItemChangeHandler = (itemIndex: number[]) => void;\n\nexport type NavigationOutOfBoundsHandler = (direction: \"start\" | \"end\") => void;\nexport interface ToolbarProps extends OverflowContainerProps {\n  activeItemIndex?: number[];\n  alignItems?: \"start\" | \"center\" | \"end\";\n  defaultActiveItemIndex?: number[];\n  onActiveChange?: ActiveItemChangeHandler;\n  /**\n   * Indicates that user has used Arrow key navigation to move beyond the\n   * last or before the first item. A higher level component may want to\n   * use this to implement a seamless navigation across components.\n   */\n  onNavigateOutOfBounds?: NavigationOutOfBoundsHandler;\n  selectionStrategy?: SelectionStrategy | SpecialKeyMultipleSelection;\n  showSeparators?: boolean;\n}\n\nexport const Toolbar = ({\n  activeItemIndex: activeItemIndexProp,\n  alignItems = \"start\",\n  defaultActiveItemIndex,\n  children,\n  className,\n  id: idProp,\n  onActiveChange,\n  onNavigateOutOfBounds,\n  orientation = \"horizontal\",\n  selectionStrategy = \"none\",\n  showSeparators = false,\n  ...props\n}: ToolbarProps) => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-toolbar\",\n    css: toolbarCss,\n    window: targetWindow,\n  });\n\n  const rootRef = useRef<HTMLDivElement>(null);\n  const {\n    activeItemIndex,\n    focusableIdx,\n    focusVisible,\n    itemProps,\n    ...toolbarHook\n  } = useToolbar({\n    activeItemIndex: activeItemIndexProp,\n    defaultActiveItemIndex,\n    containerRef: rootRef,\n    onActiveChange,\n    onNavigateOutOfBounds,\n    orientation,\n    selectionStrategy,\n  });\n\n  const id = useId(idProp);\n\n  const items = useMemo(\n    () =>\n      asReactElements(children).map((child, index) => {\n        const {\n          id: itemId = `${id}-tab-${index}`,\n          className: itemClassName,\n          ...ownProps\n        } = child.props as any;\n        const selected = activeItemIndex.includes(index);\n        return React.cloneElement(child, {\n          ...forwardCallbackProps(ownProps, itemProps),\n          className: cx(\"vuuToolbarItem\", itemClassName),\n          \"data-overflow-priority\": selected ? \"1\" : undefined,\n          id: itemId,\n          key: index,\n          \"aria-selected\": selected,\n          tabIndex: focusableIdx === index ? 0 : -1,\n        });\n      }),\n    [activeItemIndex, children, focusableIdx, id, itemProps],\n  );\n\n  return (\n    <OverflowContainer\n      {...props}\n      {...toolbarHook.containerProps}\n      className={cx(className, classBase, `${classBase}-${orientation}`, {\n        [`${classBase}-alignCenter`]: alignItems === \"center\",\n        [`${classBase}-alignEnd`]: alignItems === \"end\",\n        [`${classBase}-withSeparators`]: showSeparators,\n      })}\n      {...props}\n      ref={rootRef}\n    >\n      {items}\n    </OverflowContainer>\n  );\n};\n"],"names":["useWindow","useComponentCssInjection","toolbarCss","useRef","useToolbar","useId","useMemo","asReactElements","forwardCallbackProps","jsx","OverflowContainer"],"mappings":";;;;;;;;;;;;;AAkBA,MAAM,SAAY,GAAA,YAAA;AAoBX,MAAM,UAAU,CAAC;AAAA,EACtB,eAAiB,EAAA,mBAAA;AAAA,EACjB,UAAa,GAAA,OAAA;AAAA,EACb,sBAAA;AAAA,EACA,QAAA;AAAA,EACA,SAAA;AAAA,EACA,EAAI,EAAA,MAAA;AAAA,EACJ,cAAA;AAAA,EACA,qBAAA;AAAA,EACA,WAAc,GAAA,YAAA;AAAA,EACd,iBAAoB,GAAA,MAAA;AAAA,EACpB,cAAiB,GAAA,KAAA;AAAA,EACjB,GAAG;AACL,CAAoB,KAAA;AAClB,EAAA,MAAM,eAAeA,gBAAU,EAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,aAAA;AAAA,IACR,GAAK,EAAAC,SAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EAAM,MAAA,OAAA,GAAUC,aAAuB,IAAI,CAAA;AAC3C,EAAM,MAAA;AAAA,IACJ,eAAA;AAAA,IACA,YAAA;AAAA,IACA,YAAA;AAAA,IACA,SAAA;AAAA,IACA,GAAG;AAAA,MACDC,qBAAW,CAAA;AAAA,IACb,eAAiB,EAAA,mBAAA;AAAA,IACjB,sBAAA;AAAA,IACA,YAAc,EAAA,OAAA;AAAA,IACd,cAAA;AAAA,IACA,qBAAA;AAAA,IACA,WAAA;AAAA,IACA;AAAA,GACD,CAAA;AAED,EAAM,MAAA,EAAA,GAAKC,eAAM,MAAM,CAAA;AAEvB,EAAA,MAAM,KAAQ,GAAAC,aAAA;AAAA,IACZ,MACEC,wBAAgB,CAAA,QAAQ,EAAE,GAAI,CAAA,CAAC,OAAO,KAAU,KAAA;AAC9C,MAAM,MAAA;AAAA,QACJ,EAAI,EAAA,MAAA,GAAS,CAAG,EAAA,EAAE,QAAQ,KAAK,CAAA,CAAA;AAAA,QAC/B,SAAW,EAAA,aAAA;AAAA,QACX,GAAG;AAAA,UACD,KAAM,CAAA,KAAA;AACV,MAAM,MAAA,QAAA,GAAW,eAAgB,CAAA,QAAA,CAAS,KAAK,CAAA;AAC/C,MAAO,OAAA,KAAA,CAAM,aAAa,KAAO,EAAA;AAAA,QAC/B,GAAGC,yCAAqB,CAAA,QAAA,EAAU,SAAS,CAAA;AAAA,QAC3C,SAAA,EAAW,EAAG,CAAA,gBAAA,EAAkB,aAAa,CAAA;AAAA,QAC7C,wBAAA,EAA0B,WAAW,GAAM,GAAA,KAAA,CAAA;AAAA,QAC3C,EAAI,EAAA,MAAA;AAAA,QACJ,GAAK,EAAA,KAAA;AAAA,QACL,eAAiB,EAAA,QAAA;AAAA,QACjB,QAAA,EAAU,YAAiB,KAAA,KAAA,GAAQ,CAAI,GAAA,CAAA;AAAA,OACxC,CAAA;AAAA,KACF,CAAA;AAAA,IACH,CAAC,eAAA,EAAiB,QAAU,EAAA,YAAA,EAAc,IAAI,SAAS;AAAA,GACzD;AAEA,EACE,uBAAAC,cAAA;AAAA,IAACC,mCAAA;AAAA,IAAA;AAAA,MACE,GAAG,KAAA;AAAA,MACH,GAAG,WAAY,CAAA,cAAA;AAAA,MAChB,SAAA,EAAW,GAAG,SAAW,EAAA,SAAA,EAAW,GAAG,SAAS,CAAA,CAAA,EAAI,WAAW,CAAI,CAAA,EAAA;AAAA,QACjE,CAAC,CAAA,EAAG,SAAS,CAAA,YAAA,CAAc,GAAG,UAAe,KAAA,QAAA;AAAA,QAC7C,CAAC,CAAA,EAAG,SAAS,CAAA,SAAA,CAAW,GAAG,UAAe,KAAA,KAAA;AAAA,QAC1C,CAAC,CAAA,EAAG,SAAS,CAAA,eAAA,CAAiB,GAAG;AAAA,OAClC,CAAA;AAAA,MACA,GAAG,KAAA;AAAA,MACJ,GAAK,EAAA,OAAA;AAAA,MAEJ,QAAA,EAAA;AAAA;AAAA,GACH;AAEJ;;;;"}

package/cjs/toolbar/useSelection.js

@@ -1,7 +1,6 @@
 'use strict';
 
 var React = require('react');
-require('../common-hooks/collectionProvider.js');
 require('../common-hooks/use-resize-observer.js');
 var selectionTypes = require('../common-hooks/selectionTypes.js');
 var core = require('@salt-ds/core');

package/cjs/toolbar/useSelection.js.map

@@ -1 +1 @@
-{"version":3,"file":"useSelection.js","sources":["../../src/toolbar/useSelection.ts"],"sourcesContent":["import { KeyboardEvent, MouseEvent, RefObject, useCallback } from \"react\";\nimport {\n  SelectionStrategy,\n  SpecialKeyMultipleSelection,\n  allowMultipleSelection,\n  deselectionIsAllowed,\n  selectionIsDisallowed,\n} from \"../common-hooks\";\nimport { useControlled } from \"@salt-ds/core\";\nimport { getClosestIndexItem, isSelectableElement } from \"@vuu-ui/vuu-utils\";\n\nconst defaultSelectionKeys = [\"Enter\", \" \"];\n\nexport interface SelectionHookProps {\n  containerRef: RefObject<HTMLElement | null>;\n  defaultSelected?: number[];\n  highlightedIdx: number;\n  itemQuery: string;\n  onSelectionChange?: (selectedIndices: number[]) => void;\n  selected?: number[];\n  selectionStrategy: SelectionStrategy | SpecialKeyMultipleSelection;\n}\n\nexport interface ItemHandlers {\n  onClick?: (e: MouseEvent, itemIndex: number) => void;\n  onKeyDown?: (event: React.KeyboardEvent) => void;\n}\n\nconst NO_SELECTION_HANDLERS: ItemHandlers = {};\n\nexport interface SelectionHookResult {\n  activateItem: (tabIndex: number) => void;\n  itemHandlers: ItemHandlers;\n  isControlled: boolean;\n  selected: number[];\n}\n\n// TODO use SelectionProps\nexport const useSelection = ({\n  defaultSelected,\n  highlightedIdx,\n  onSelectionChange,\n  selected: selectedProp,\n  selectionStrategy,\n}: SelectionHookProps): SelectionHookResult => {\n  const [selected, setSelected, isControlled] = useControlled({\n    controlled: selectedProp,\n    default: defaultSelected ?? [],\n    name: \"useSelection\",\n    state: \"selected\",\n  });\n\n  // const isSelectableElement = useMemo(\n  //   () =>\n  //     (el: HTMLElement): boolean =>\n  //       el && el.matches(`[class*=\"${itemQuery} \"]`),\n  //   [itemQuery]\n  // );\n\n  const isSelectionEvent = useCallback(\n    (evt: KeyboardEvent) => defaultSelectionKeys.includes(evt.key),\n    [],\n  );\n\n  const selectItem = useCallback(\n    (itemIndex: number, specialKey = false) => {\n      const newSelected = allowMultipleSelection(selectionStrategy, specialKey)\n        ? selected.concat(itemIndex)\n        : [itemIndex];\n\n      setSelected(newSelected);\n      onSelectionChange?.(newSelected);\n    },\n    [onSelectionChange, selected, selectionStrategy, setSelected],\n  );\n\n  const deselectItem = useCallback(\n    (itemIndex: number, specialKey = false) => {\n      const newSelected =\n        selectionStrategy === \"deselectable\" ||\n        (selectionStrategy === \"multiple-special-key\" && !specialKey)\n          ? []\n          : selected.filter((index) => index !== itemIndex);\n      setSelected(newSelected);\n      onSelectionChange?.(newSelected);\n    },\n    [onSelectionChange, selected, selectionStrategy, setSelected],\n  );\n\n  const handleKeyDown = useCallback(\n    (e: KeyboardEvent) => {\n      if (isSelectionEvent(e) && isSelectableElement(e.target as HTMLElement)) {\n        if (!selected.includes(highlightedIdx)) {\n          e.stopPropagation();\n          e.preventDefault();\n          selectItem(highlightedIdx, e.shiftKey);\n        } else if (deselectionIsAllowed(selectionStrategy)) {\n          e.stopPropagation();\n          e.preventDefault();\n          deselectItem(highlightedIdx, e.shiftKey);\n        }\n      }\n    },\n    [\n      isSelectionEvent,\n      selected,\n      highlightedIdx,\n      selectionStrategy,\n      selectItem,\n      deselectItem,\n    ],\n  );\n\n  const handleClick = useCallback(\n    (e: MouseEvent, itemIndex: number) => {\n      const element = getClosestIndexItem(e.target as HTMLElement);\n      if (isSelectableElement(element)) {\n        if (!selected.includes(itemIndex)) {\n          selectItem(itemIndex, e.shiftKey);\n        } else if (deselectionIsAllowed(selectionStrategy)) {\n          deselectItem(itemIndex, e.shiftKey);\n        }\n      }\n    },\n    [deselectItem, selectItem, selected, selectionStrategy],\n  );\n\n  const itemHandlers = selectionIsDisallowed(selectionStrategy)\n    ? NO_SELECTION_HANDLERS\n    : {\n        onClick: handleClick,\n        onKeyDown: handleKeyDown,\n      };\n\n  return {\n    activateItem: selectItem,\n    itemHandlers,\n    isControlled,\n    selected,\n  };\n};\n"],"names":["useControlled","useCallback","allowMultipleSelection","isSelectableElement","deselectionIsAllowed","getClosestIndexItem","selectionIsDisallowed"],"mappings":"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"}
+{"version":3,"file":"useSelection.js","sources":["../../src/toolbar/useSelection.ts"],"sourcesContent":["import { KeyboardEvent, MouseEvent, RefObject, useCallback } from \"react\";\nimport {\n  SelectionStrategy,\n  SpecialKeyMultipleSelection,\n  allowMultipleSelection,\n  deselectionIsAllowed,\n  selectionIsDisallowed,\n} from \"../common-hooks\";\nimport { useControlled } from \"@salt-ds/core\";\nimport { getClosestIndexItem, isSelectableElement } from \"@vuu-ui/vuu-utils\";\n\nconst defaultSelectionKeys = [\"Enter\", \" \"];\n\nexport interface SelectionHookProps {\n  containerRef: RefObject<HTMLElement | null>;\n  defaultSelected?: number[];\n  highlightedIdx: number;\n  itemQuery: string;\n  onSelectionChange?: (selectedIndices: number[]) => void;\n  selected?: number[];\n  selectionStrategy: SelectionStrategy | SpecialKeyMultipleSelection;\n}\n\nexport interface ItemHandlers {\n  onClick?: (e: MouseEvent, itemIndex: number) => void;\n  onKeyDown?: (event: React.KeyboardEvent) => void;\n}\n\nconst NO_SELECTION_HANDLERS: ItemHandlers = {};\n\nexport interface SelectionHookResult {\n  activateItem: (tabIndex: number) => void;\n  itemHandlers: ItemHandlers;\n  isControlled: boolean;\n  selected: number[];\n}\n\n// TODO use SelectionProps\nexport const useSelection = ({\n  defaultSelected,\n  highlightedIdx,\n  onSelectionChange,\n  selected: selectedProp,\n  selectionStrategy,\n}: SelectionHookProps): SelectionHookResult => {\n  const [selected, setSelected, isControlled] = useControlled({\n    controlled: selectedProp,\n    default: defaultSelected ?? [],\n    name: \"useSelection\",\n    state: \"selected\",\n  });\n\n  // const isSelectableElement = useMemo(\n  //   () =>\n  //     (el: HTMLElement): boolean =>\n  //       el && el.matches(`[class*=\"${itemQuery} \"]`),\n  //   [itemQuery]\n  // );\n\n  const isSelectionEvent = useCallback(\n    (evt: KeyboardEvent) => defaultSelectionKeys.includes(evt.key),\n    [],\n  );\n\n  const selectItem = useCallback(\n    (itemIndex: number, specialKey = false) => {\n      const newSelected = allowMultipleSelection(selectionStrategy, specialKey)\n        ? selected.concat(itemIndex)\n        : [itemIndex];\n\n      setSelected(newSelected);\n      onSelectionChange?.(newSelected);\n    },\n    [onSelectionChange, selected, selectionStrategy, setSelected],\n  );\n\n  const deselectItem = useCallback(\n    (itemIndex: number, specialKey = false) => {\n      const newSelected =\n        selectionStrategy === \"deselectable\" ||\n        (selectionStrategy === \"multiple-special-key\" && !specialKey)\n          ? []\n          : selected.filter((index) => index !== itemIndex);\n      setSelected(newSelected);\n      onSelectionChange?.(newSelected);\n    },\n    [onSelectionChange, selected, selectionStrategy, setSelected],\n  );\n\n  const handleKeyDown = useCallback(\n    (e: KeyboardEvent) => {\n      if (isSelectionEvent(e) && isSelectableElement(e.target as HTMLElement)) {\n        if (!selected.includes(highlightedIdx)) {\n          e.stopPropagation();\n          e.preventDefault();\n          selectItem(highlightedIdx, e.shiftKey);\n        } else if (deselectionIsAllowed(selectionStrategy)) {\n          e.stopPropagation();\n          e.preventDefault();\n          deselectItem(highlightedIdx, e.shiftKey);\n        }\n      }\n    },\n    [\n      isSelectionEvent,\n      selected,\n      highlightedIdx,\n      selectionStrategy,\n      selectItem,\n      deselectItem,\n    ],\n  );\n\n  const handleClick = useCallback(\n    (e: MouseEvent, itemIndex: number) => {\n      const element = getClosestIndexItem(e.target as HTMLElement);\n      if (isSelectableElement(element)) {\n        if (!selected.includes(itemIndex)) {\n          selectItem(itemIndex, e.shiftKey);\n        } else if (deselectionIsAllowed(selectionStrategy)) {\n          deselectItem(itemIndex, e.shiftKey);\n        }\n      }\n    },\n    [deselectItem, selectItem, selected, selectionStrategy],\n  );\n\n  const itemHandlers = selectionIsDisallowed(selectionStrategy)\n    ? NO_SELECTION_HANDLERS\n    : {\n        onClick: handleClick,\n        onKeyDown: handleKeyDown,\n      };\n\n  return {\n    activateItem: selectItem,\n    itemHandlers,\n    isControlled,\n    selected,\n  };\n};\n"],"names":["useControlled","useCallback","allowMultipleSelection","isSelectableElement","deselectionIsAllowed","getClosestIndexItem","selectionIsDisallowed"],"mappings":"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"}

package/esm/column-picker/ColumnPicker.js

@@ -76,7 +76,7 @@ const ColumnPicker = forwardRef(
     const handleChange = () => {
       console.log("handleChange");
     };
-    const handleMoveListItem = () => {
+    const handleReorderColumns = () => {
       console.log("handleMoveListItem");
     };
     return /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -110,7 +110,7 @@ const ColumnPicker = forwardRef(
             {
               columns,
               onChange: handleChange,
-              onMoveListItem: handleMoveListItem,
+              onReorderColumns: handleReorderColumns,
               onSelectionChange,
               selected,
               style: { width: 220, height: 300 }

package/esm/column-picker/ColumnPicker.js.map

@@ -1 +1 @@
-{"version":3,"file":"ColumnPicker.js","sources":["../../src/column-picker/ColumnPicker.tsx"],"sourcesContent":["import {\n  flip,\n  size,\n  useClick,\n  useDismiss,\n  useInteractions,\n} from \"@floating-ui/react\";\nimport {\n  FloatingComponentProps,\n  useFloatingComponent,\n  useFloatingUI,\n  useForkRef,\n  useIdMemo,\n} from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\n\nimport cx from \"clsx\";\nimport { forwardRef, useState } from \"react\";\nimport { IconButton, IconButtonProps } from \"../icon-button\";\nimport { ColumnSearch, ColumnSearchProps } from \"./ColumnSearch\";\n\nimport columnPickerCss from \"./ColumnPicker.css\";\n\nconst classBase = \"vuuColumnPicker\";\n\ninterface FloatingColumnSearchProps extends FloatingComponentProps {\n  collapsed?: boolean;\n}\n\nconst FloatingColumnSearch = forwardRef<\n  HTMLDivElement,\n  FloatingColumnSearchProps\n>(function FloatingColumnSearch(props, ref) {\n  const { children, className, collapsed, open, ...rest } = props;\n\n  const { Component: FloatingComponent } = useFloatingComponent();\n  return (\n    <FloatingComponent\n      className={cx(\n        classBase,\n        {\n          [`${classBase}-collapsed`]: collapsed,\n        },\n        className,\n      )}\n      role=\"listbox\"\n      open={open}\n      {...rest}\n      ref={ref}\n    >\n      {children}\n    </FloatingComponent>\n  );\n});\n\nexport interface ColumnPickerProps\n  extends Omit<IconButtonProps, \"icon\">,\n    Pick<ColumnSearchProps, \"columns\" | \"onSelectionChange\" | \"selected\"> {\n  icon?: string;\n  iconSize?: number;\n}\n\nexport const ColumnPicker = forwardRef<HTMLButtonElement, ColumnPickerProps>(\n  function ColumnPicker(\n    {\n      columns,\n      icon = \"add\",\n      iconSize,\n      onSelectionChange,\n      selected,\n      ...htmlAttributes\n    },\n    forwardedRef,\n  ) {\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"vuu-column-picker\",\n      css: columnPickerCss,\n      window: targetWindow,\n    });\n\n    const [open, setOpen] = useState(false);\n\n    const listId = useIdMemo();\n    const { context, x, y, strategy, elements, floating, reference } =\n      useFloatingUI({\n        open,\n        onOpenChange: setOpen,\n        placement: \"bottom-start\",\n        strategy: \"fixed\",\n        middleware: [\n          size({\n            apply({ rects, elements, availableHeight }) {\n              Object.assign(elements.floating.style, {\n                minWidth: `${rects.reference.width}px`,\n                maxHeight: `max(calc(${availableHeight}px - var(--salt-spacing-100)), calc((var(--salt-size-base) + var(--salt-spacing-100)) * 5))`,\n              });\n            },\n          }),\n          flip({ fallbackStrategy: \"initialPlacement\" }),\n        ],\n      });\n\n    const { getReferenceProps, getFloatingProps } = useInteractions([\n      useDismiss(context),\n      useClick(context, { keyboardHandlers: false, toggle: false }),\n    ]);\n\n    const handleButtonClick = () => {\n      setOpen((isOpen) => !isOpen);\n    };\n\n    const forkedRef = useForkRef<HTMLButtonElement>(reference, forwardedRef);\n\n    const handleChange = () => {\n      console.log(\"handleChange\");\n    };\n    const handleMoveListItem = () => {\n      console.log(\"handleMoveListItem\");\n    };\n\n    return (\n      <>\n        <IconButton\n          {...htmlAttributes}\n          {...getReferenceProps()}\n          icon={icon}\n          size={iconSize}\n          onClick={handleButtonClick}\n          ref={forkedRef}\n          variant=\"secondary\"\n        />\n        <FloatingColumnSearch\n          {...getFloatingProps()}\n          open={open}\n          collapsed={!open}\n          id={listId}\n          left={x}\n          position={strategy}\n          ref={floating}\n          top={y}\n          width={elements.floating?.offsetWidth}\n          height={elements.floating?.offsetHeight}\n        >\n          <ColumnSearch\n            columns={columns}\n            onChange={handleChange}\n            onMoveListItem={handleMoveListItem}\n            onSelectionChange={onSelectionChange}\n            selected={selected}\n            style={{ width: 220, height: 300 }}\n          />\n        </FloatingColumnSearch>\n      </>\n    );\n  },\n);\n"],"names":["FloatingColumnSearch","ColumnPicker","elements"],"mappings":"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"}
+{"version":3,"file":"ColumnPicker.js","sources":["../../src/column-picker/ColumnPicker.tsx"],"sourcesContent":["import {\n  flip,\n  size,\n  useClick,\n  useDismiss,\n  useInteractions,\n} from \"@floating-ui/react\";\nimport {\n  FloatingComponentProps,\n  useFloatingComponent,\n  useFloatingUI,\n  useForkRef,\n  useIdMemo,\n} from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\n\nimport cx from \"clsx\";\nimport { forwardRef, useState } from \"react\";\nimport { IconButton, IconButtonProps } from \"../icon-button\";\nimport { ColumnSearch, ColumnSearchProps } from \"./ColumnSearch\";\n\nimport columnPickerCss from \"./ColumnPicker.css\";\n\nconst classBase = \"vuuColumnPicker\";\n\ninterface FloatingColumnSearchProps extends FloatingComponentProps {\n  collapsed?: boolean;\n}\n\nconst FloatingColumnSearch = forwardRef<\n  HTMLDivElement,\n  FloatingColumnSearchProps\n>(function FloatingColumnSearch(props, ref) {\n  const { children, className, collapsed, open, ...rest } = props;\n\n  const { Component: FloatingComponent } = useFloatingComponent();\n  return (\n    <FloatingComponent\n      className={cx(\n        classBase,\n        {\n          [`${classBase}-collapsed`]: collapsed,\n        },\n        className,\n      )}\n      role=\"listbox\"\n      open={open}\n      {...rest}\n      ref={ref}\n    >\n      {children}\n    </FloatingComponent>\n  );\n});\n\nexport interface ColumnPickerProps\n  extends Omit<IconButtonProps, \"icon\">,\n    Pick<ColumnSearchProps, \"columns\" | \"onSelectionChange\" | \"selected\"> {\n  icon?: string;\n  iconSize?: number;\n}\n\nexport const ColumnPicker = forwardRef<HTMLButtonElement, ColumnPickerProps>(\n  function ColumnPicker(\n    {\n      columns,\n      icon = \"add\",\n      iconSize,\n      onSelectionChange,\n      selected,\n      ...htmlAttributes\n    },\n    forwardedRef,\n  ) {\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"vuu-column-picker\",\n      css: columnPickerCss,\n      window: targetWindow,\n    });\n\n    const [open, setOpen] = useState(false);\n\n    const listId = useIdMemo();\n    const { context, x, y, strategy, elements, floating, reference } =\n      useFloatingUI({\n        open,\n        onOpenChange: setOpen,\n        placement: \"bottom-start\",\n        strategy: \"fixed\",\n        middleware: [\n          size({\n            apply({ rects, elements, availableHeight }) {\n              Object.assign(elements.floating.style, {\n                minWidth: `${rects.reference.width}px`,\n                maxHeight: `max(calc(${availableHeight}px - var(--salt-spacing-100)), calc((var(--salt-size-base) + var(--salt-spacing-100)) * 5))`,\n              });\n            },\n          }),\n          flip({ fallbackStrategy: \"initialPlacement\" }),\n        ],\n      });\n\n    const { getReferenceProps, getFloatingProps } = useInteractions([\n      useDismiss(context),\n      useClick(context, { keyboardHandlers: false, toggle: false }),\n    ]);\n\n    const handleButtonClick = () => {\n      setOpen((isOpen) => !isOpen);\n    };\n\n    const forkedRef = useForkRef<HTMLButtonElement>(reference, forwardedRef);\n\n    const handleChange = () => {\n      console.log(\"handleChange\");\n    };\n    const handleReorderColumns = () => {\n      console.log(\"handleMoveListItem\");\n    };\n\n    return (\n      <>\n        <IconButton\n          {...htmlAttributes}\n          {...getReferenceProps()}\n          icon={icon}\n          size={iconSize}\n          onClick={handleButtonClick}\n          ref={forkedRef}\n          variant=\"secondary\"\n        />\n        <FloatingColumnSearch\n          {...getFloatingProps()}\n          open={open}\n          collapsed={!open}\n          id={listId}\n          left={x}\n          position={strategy}\n          ref={floating}\n          top={y}\n          width={elements.floating?.offsetWidth}\n          height={elements.floating?.offsetHeight}\n        >\n          <ColumnSearch\n            columns={columns}\n            onChange={handleChange}\n            onReorderColumns={handleReorderColumns}\n            onSelectionChange={onSelectionChange}\n            selected={selected}\n            style={{ width: 220, height: 300 }}\n          />\n        </FloatingColumnSearch>\n      </>\n    );\n  },\n);\n"],"names":["FloatingColumnSearch","ColumnPicker","elements"],"mappings":"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"}

package/esm/column-picker/ColumnSearch.js

@@ -1,18 +1,9 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { Input } from '@salt-ds/core';
+import { Input, ListBox, Option, Checkbox } from '@salt-ds/core';
 import { useComponentCssInjection } from '@salt-ds/styles';
 import { useWindow } from '@salt-ds/window';
 import cx from 'clsx';
 import { forwardRef, useCallback } from 'react';
-import '../list/common-hooks/keyUtils.js';
-import '../common-hooks/collectionProvider.js';
-import '../common-hooks/use-resize-observer.js';
-import '@vuu-ui/vuu-utils';
-import '../list/Highlighter.js';
-import '../list/ListItem.js';
-import { List } from '../list/List.js';
-import '../drag-drop/DragDropProvider.js';
-import '../drag-drop/Draggable.js';
 import searchableListCss from './ColumnSearch.css.js';
 
 const classBase = "vuuColumnSearch";
@@ -23,7 +14,6 @@ const ColumnSearch = forwardRef(
     className,
     columns,
     onChange,
-    onMoveListItem,
     onSelectionChange,
     selected,
     ...htmlAttributes
@@ -56,20 +46,10 @@ const ColumnSearch = forwardRef(
               ref: autoFocus ? searchCallbackRef : null
             }
           ) }),
-          /* @__PURE__ */ jsx(
-            List,
-            {
-              allowDragDrop: true,
-              height: "auto",
-              onChange: handleChange,
-              onMoveListItem,
-              onSelectionChange,
-              selected,
-              selectionStrategy: "multiple",
-              source: columns,
-              itemHeight: 33
-            }
-          )
+          /* @__PURE__ */ jsx(ListBox, { children: columns.map((column) => /* @__PURE__ */ jsxs(Option, { value: column, children: [
+            /* @__PURE__ */ jsx(Checkbox, { onChange: handleChange }),
+            /* @__PURE__ */ jsx("span", { children: column })
+          ] }, column)) })
         ]
       }
     );

package/esm/column-picker/ColumnSearch.js.map

@@ -1 +1 @@
-{"version":3,"file":"ColumnSearch.js","sources":["../../src/column-picker/ColumnSearch.tsx"],"sourcesContent":["import { Input } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport cx from \"clsx\";\nimport { HTMLAttributes, RefCallback, forwardRef, useCallback } from \"react\";\nimport { List, ListProps } from \"../list\";\n\nimport searchableListCss from \"./ColumnSearch.css\";\n\nconst classBase = \"vuuColumnSearch\";\n\nexport interface ColumnSearchProps\n  extends HTMLAttributes<HTMLDivElement>,\n    Pick<\n      ListProps<string, \"multiple\">,\n      \"onMoveListItem\" | \"onSelectionChange\" | \"selected\"\n    > {\n  columns: string[];\n}\n\nconst searchIcon = <span data-icon=\"search\" />;\n\nexport const ColumnSearch = forwardRef<HTMLDivElement, ColumnSearchProps>(\n  function ColumnSearch(\n    {\n      autoFocus = false,\n      className,\n      columns,\n      onChange,\n      onMoveListItem,\n      onSelectionChange,\n      selected,\n      ...htmlAttributes\n    },\n    forwardedRef\n  ) {\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"vuu-column-picker\",\n      css: searchableListCss,\n      window: targetWindow,\n    });\n\n    const searchCallbackRef = useCallback<RefCallback<HTMLElement>>((el) => {\n      setTimeout(() => {\n        el?.querySelector(\"input\")?.focus();\n      }, 100);\n    }, []);\n\n    const handleChange = () => {\n      console.log(`handle change`);\n    };\n\n    return (\n      <div\n        {...htmlAttributes}\n        className={cx(classBase, className)}\n        ref={forwardedRef}\n      >\n        <div className={`${classBase}-inputField`}>\n          <Input\n            // inputProps={{ onKeyDown }}\n            startAdornment={searchIcon}\n            ref={autoFocus ? searchCallbackRef : null}\n            // value={searchState.searchText}\n            // onChange={onChange}\n          />\n        </div>\n\n        <List<string, \"multiple\">\n          allowDragDrop\n          height=\"auto\"\n          onChange={handleChange}\n          onMoveListItem={onMoveListItem}\n          onSelectionChange={onSelectionChange}\n          selected={selected}\n          selectionStrategy=\"multiple\"\n          source={columns}\n          itemHeight={33}\n        />\n      </div>\n    );\n  }\n);\n"],"names":["ColumnSearch"],"mappings":";;;;;;;;;;;;;;;;;AASA,MAAM,SAAY,GAAA,iBAAA;AAWlB,MAAM,UAAa,mBAAA,GAAA,CAAC,MAAK,EAAA,EAAA,WAAA,EAAU,QAAS,EAAA,CAAA;AAErC,MAAM,YAAe,GAAA,UAAA;AAAA,EAC1B,SAASA,aACP,CAAA;AAAA,IACE,SAAY,GAAA,KAAA;AAAA,IACZ,SAAA;AAAA,IACA,OAAA;AAAA,IACA,QAAA;AAAA,IACA,cAAA;AAAA,IACA,iBAAA;AAAA,IACA,QAAA;AAAA,IACA,GAAG;AAAA,KAEL,YACA,EAAA;AACA,IAAA,MAAM,eAAe,SAAU,EAAA;AAC/B,IAAyB,wBAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,mBAAA;AAAA,MACR,GAAK,EAAA,iBAAA;AAAA,MACL,MAAQ,EAAA;AAAA,KACT,CAAA;AAED,IAAM,MAAA,iBAAA,GAAoB,WAAsC,CAAA,CAAC,EAAO,KAAA;AACtE,MAAA,UAAA,CAAW,MAAM;AACf,QAAI,EAAA,EAAA,aAAA,CAAc,OAAO,CAAA,EAAG,KAAM,EAAA;AAAA,SACjC,GAAG,CAAA;AAAA,KACR,EAAG,EAAE,CAAA;AAEL,IAAA,MAAM,eAAe,MAAM;AACzB,MAAA,OAAA,CAAQ,IAAI,CAAe,aAAA,CAAA,CAAA;AAAA,KAC7B;AAEA,IACE,uBAAA,IAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACE,GAAG,cAAA;AAAA,QACJ,SAAA,EAAW,EAAG,CAAA,SAAA,EAAW,SAAS,CAAA;AAAA,QAClC,GAAK,EAAA,YAAA;AAAA,QAEL,QAAA,EAAA;AAAA,0BAAA,GAAA,CAAC,KAAI,EAAA,EAAA,SAAA,EAAW,CAAG,EAAA,SAAS,CAC1B,WAAA,CAAA,EAAA,QAAA,kBAAA,GAAA;AAAA,YAAC,KAAA;AAAA,YAAA;AAAA,cAEC,cAAgB,EAAA,UAAA;AAAA,cAChB,GAAA,EAAK,YAAY,iBAAoB,GAAA;AAAA;AAAA,WAIzC,EAAA,CAAA;AAAA,0BAEA,GAAA;AAAA,YAAC,IAAA;AAAA,YAAA;AAAA,cACC,aAAa,EAAA,IAAA;AAAA,cACb,MAAO,EAAA,MAAA;AAAA,cACP,QAAU,EAAA,YAAA;AAAA,cACV,cAAA;AAAA,cACA,iBAAA;AAAA,cACA,QAAA;AAAA,cACA,iBAAkB,EAAA,UAAA;AAAA,cAClB,MAAQ,EAAA,OAAA;AAAA,cACR,UAAY,EAAA;AAAA;AAAA;AACd;AAAA;AAAA,KACF;AAAA;AAGN;;;;"}
+{"version":3,"file":"ColumnSearch.js","sources":["../../src/column-picker/ColumnSearch.tsx"],"sourcesContent":["import { Checkbox, Input, ListBoxProps } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport cx from \"clsx\";\nimport { HTMLAttributes, RefCallback, forwardRef, useCallback } from \"react\";\nimport { ListBox, Option } from \"@salt-ds/core\";\n\nimport searchableListCss from \"./ColumnSearch.css\";\n\nconst classBase = \"vuuColumnSearch\";\n\nexport interface ColumnSearchProps\n  extends HTMLAttributes<HTMLDivElement>,\n    Pick<ListBoxProps, \"onSelectionChange\" | \"selected\"> {\n  columns: string[];\n  onReorderColumns: (columns: string[]) => void;\n}\n\nconst searchIcon = <span data-icon=\"search\" />;\n\nexport const ColumnSearch = forwardRef<HTMLDivElement, ColumnSearchProps>(\n  function ColumnSearch(\n    {\n      autoFocus = false,\n      className,\n      columns,\n      onChange,\n      onSelectionChange,\n      selected,\n      ...htmlAttributes\n    },\n    forwardedRef,\n  ) {\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"vuu-column-picker\",\n      css: searchableListCss,\n      window: targetWindow,\n    });\n\n    const searchCallbackRef = useCallback<RefCallback<HTMLElement>>((el) => {\n      setTimeout(() => {\n        el?.querySelector(\"input\")?.focus();\n      }, 100);\n    }, []);\n\n    const handleChange = () => {\n      console.log(`handle change`);\n    };\n\n    return (\n      <div\n        {...htmlAttributes}\n        className={cx(classBase, className)}\n        ref={forwardedRef}\n      >\n        <div className={`${classBase}-inputField`}>\n          <Input\n            // inputProps={{ onKeyDown }}\n            startAdornment={searchIcon}\n            ref={autoFocus ? searchCallbackRef : null}\n            // value={searchState.searchText}\n            // onChange={onChange}\n          />\n        </div>\n        <ListBox>\n          {columns.map((column) => (\n            <Option key={column} value={column}>\n              <Checkbox onChange={handleChange} />\n              <span>{column}</span>\n            </Option>\n          ))}\n        </ListBox>\n      </div>\n    );\n  },\n);\n"],"names":["ColumnSearch"],"mappings":";;;;;;;;AASA,MAAM,SAAY,GAAA,iBAAA;AASlB,MAAM,UAAa,mBAAA,GAAA,CAAC,MAAK,EAAA,EAAA,WAAA,EAAU,QAAS,EAAA,CAAA;AAErC,MAAM,YAAe,GAAA,UAAA;AAAA,EAC1B,SAASA,aACP,CAAA;AAAA,IACE,SAAY,GAAA,KAAA;AAAA,IACZ,SAAA;AAAA,IACA,OAAA;AAAA,IACA,QAAA;AAAA,IACA,iBAAA;AAAA,IACA,QAAA;AAAA,IACA,GAAG;AAAA,KAEL,YACA,EAAA;AACA,IAAA,MAAM,eAAe,SAAU,EAAA;AAC/B,IAAyB,wBAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,mBAAA;AAAA,MACR,GAAK,EAAA,iBAAA;AAAA,MACL,MAAQ,EAAA;AAAA,KACT,CAAA;AAED,IAAM,MAAA,iBAAA,GAAoB,WAAsC,CAAA,CAAC,EAAO,KAAA;AACtE,MAAA,UAAA,CAAW,MAAM;AACf,QAAI,EAAA,EAAA,aAAA,CAAc,OAAO,CAAA,EAAG,KAAM,EAAA;AAAA,SACjC,GAAG,CAAA;AAAA,KACR,EAAG,EAAE,CAAA;AAEL,IAAA,MAAM,eAAe,MAAM;AACzB,MAAA,OAAA,CAAQ,IAAI,CAAe,aAAA,CAAA,CAAA;AAAA,KAC7B;AAEA,IACE,uBAAA,IAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACE,GAAG,cAAA;AAAA,QACJ,SAAA,EAAW,EAAG,CAAA,SAAA,EAAW,SAAS,CAAA;AAAA,QAClC,GAAK,EAAA,YAAA;AAAA,QAEL,QAAA,EAAA;AAAA,0BAAA,GAAA,CAAC,KAAI,EAAA,EAAA,SAAA,EAAW,CAAG,EAAA,SAAS,CAC1B,WAAA,CAAA,EAAA,QAAA,kBAAA,GAAA;AAAA,YAAC,KAAA;AAAA,YAAA;AAAA,cAEC,cAAgB,EAAA,UAAA;AAAA,cAChB,GAAA,EAAK,YAAY,iBAAoB,GAAA;AAAA;AAAA,WAIzC,EAAA,CAAA;AAAA,0BACA,GAAA,CAAC,WACE,QAAQ,EAAA,OAAA,CAAA,GAAA,CAAI,CAAC,MACZ,qBAAA,IAAA,CAAC,MAAoB,EAAA,EAAA,KAAA,EAAO,MAC1B,EAAA,QAAA,EAAA;AAAA,4BAAC,GAAA,CAAA,QAAA,EAAA,EAAS,UAAU,YAAc,EAAA,CAAA;AAAA,4BAClC,GAAA,CAAC,UAAM,QAAO,EAAA,MAAA,EAAA;AAAA,WAFH,EAAA,EAAA,MAGb,CACD,CACH,EAAA;AAAA;AAAA;AAAA,KACF;AAAA;AAGN;;;;"}