@vuu-ui/vuu-ui-controls 0.13.24 → 0.13.26

package/cjs/column-picker/ColumnSearch.js

@@ -7,6 +7,7 @@ var window = require('@salt-ds/window');
 var cx = require('clsx');
 var React = require('react');
 var ColumnSearch$1 = require('./ColumnSearch.css.js');
+var vuuUtils = require('@vuu-ui/vuu-utils');
 
 const classBase = "vuuColumnSearch";
 const searchIcon = /* @__PURE__ */ jsxRuntime.jsx("span", { "data-icon": "search" });
@@ -26,14 +27,33 @@ const ColumnSearch = React.forwardRef(
       css: ColumnSearch$1,
       window: targetWindow
     });
+    const selectedValues = React.useRef([]);
     const searchCallbackRef = React.useCallback((el) => {
       setTimeout(() => {
         el?.querySelector("input")?.focus();
       }, 100);
     }, []);
-    const handleChange = () => {
-      console.log(`handle change`);
-    };
+    const handleChange = React.useCallback(
+      (e) => {
+        const input = e.target;
+        const { columnName } = vuuUtils.queryClosest(
+          input,
+          "[data-column-name]",
+          true
+        ).dataset;
+        if (columnName) {
+          if (input.checked) {
+            selectedValues.current = selectedValues.current.concat(columnName);
+          } else {
+            selectedValues.current = selectedValues.current.filter(
+              (val) => val !== columnName
+            );
+          }
+          onSelectionChange?.(e, selectedValues.current);
+        }
+      },
+      [onSelectionChange]
+    );
     return /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
       {
@@ -48,7 +68,7 @@ const ColumnSearch = React.forwardRef(
               ref: autoFocus ? searchCallbackRef : null
             }
           ) }),
-          /* @__PURE__ */ jsxRuntime.jsx(core.ListBox, { children: columns.map((column) => /* @__PURE__ */ jsxRuntime.jsxs(core.Option, { value: column, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(core.ListBox, { children: columns.map((column) => /* @__PURE__ */ jsxRuntime.jsxs(core.Option, { "data-column-name": column, 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":["../../../../packages/vuu-ui-controls/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;;;;"}
+{"version":3,"file":"ColumnSearch.js","sources":["../../../../packages/vuu-ui-controls/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 {\n  FormEventHandler,\n  HTMLAttributes,\n  RefCallback,\n  forwardRef,\n  useCallback,\n  useRef,\n} from \"react\";\nimport { ListBox, Option } from \"@salt-ds/core\";\n\nimport searchableListCss from \"./ColumnSearch.css\";\nimport { queryClosest } from \"@vuu-ui/vuu-utils\";\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\n/**\n * @deprecated\n *\n * use ColumnList instead\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 selectedValues = useRef<string[]>([]);\n\n    const searchCallbackRef = useCallback<RefCallback<HTMLElement>>((el) => {\n      setTimeout(() => {\n        el?.querySelector(\"input\")?.focus();\n      }, 100);\n    }, []);\n\n    const handleChange = useCallback<FormEventHandler<HTMLInputElement>>(\n      (e) => {\n        const input = e.target as HTMLInputElement;\n        const { columnName } = queryClosest(\n          input,\n          \"[data-column-name]\",\n          true,\n        ).dataset;\n        if (columnName) {\n          if (input.checked) {\n            selectedValues.current = selectedValues.current.concat(columnName);\n          } else {\n            selectedValues.current = selectedValues.current.filter(\n              (val) => val !== columnName,\n            );\n          }\n          onSelectionChange?.(e, selectedValues.current);\n        }\n      },\n      [onSelectionChange],\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 data-column-name={column} 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","useRef","useCallback","queryClosest","jsxs","Input","ListBox","Option","Checkbox"],"mappings":";;;;;;;;;;;AAiBA,MAAM,SAAY,GAAA,iBAAA;AASlB,MAAM,UAAa,mBAAAA,cAAA,CAAC,MAAK,EAAA,EAAA,WAAA,EAAU,QAAS,EAAA,CAAA;AAOrC,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,cAAA,GAAiBC,YAAiB,CAAA,EAAE,CAAA;AAE1C,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,YAAe,GAAAA,iBAAA;AAAA,MACnB,CAAC,CAAM,KAAA;AACL,QAAA,MAAM,QAAQ,CAAE,CAAA,MAAA;AAChB,QAAM,MAAA,EAAE,YAAe,GAAAC,qBAAA;AAAA,UACrB,KAAA;AAAA,UACA,oBAAA;AAAA,UACA;AAAA,SACA,CAAA,OAAA;AACF,QAAA,IAAI,UAAY,EAAA;AACd,UAAA,IAAI,MAAM,OAAS,EAAA;AACjB,YAAA,cAAA,CAAe,OAAU,GAAA,cAAA,CAAe,OAAQ,CAAA,MAAA,CAAO,UAAU,CAAA;AAAA,WAC5D,MAAA;AACL,YAAe,cAAA,CAAA,OAAA,GAAU,eAAe,OAAQ,CAAA,MAAA;AAAA,cAC9C,CAAC,QAAQ,GAAQ,KAAA;AAAA,aACnB;AAAA;AAEF,UAAoB,iBAAA,GAAA,CAAA,EAAG,eAAe,OAAO,CAAA;AAAA;AAC/C,OACF;AAAA,MACA,CAAC,iBAAiB;AAAA,KACpB;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,0BAAAT,cAAA,CAAC,KAAI,EAAA,EAAA,SAAA,EAAW,CAAG,EAAA,SAAS,CAC1B,WAAA,CAAA,EAAA,QAAA,kBAAAA,cAAA;AAAA,YAACU,UAAA;AAAA,YAAA;AAAA,cAEC,cAAgB,EAAA,UAAA;AAAA,cAChB,GAAA,EAAK,YAAY,iBAAoB,GAAA;AAAA;AAAA,WAIzC,EAAA,CAAA;AAAA,0BACAV,cAAA,CAACW,YACE,EAAA,EAAA,QAAA,EAAA,OAAA,CAAQ,GAAI,CAAA,CAAC,MACZ,qBAAAF,eAAA,CAACG,WAAO,EAAA,EAAA,kBAAA,EAAkB,MAAqB,EAAA,KAAA,EAAO,MACpD,EAAA,QAAA,EAAA;AAAA,4BAACZ,cAAA,CAAAa,aAAA,EAAA,EAAS,UAAU,YAAc,EAAA,CAAA;AAAA,4BAClCb,cAAA,CAAC,UAAM,QAAO,EAAA,MAAA,EAAA;AAAA,WAFuB,EAAA,EAAA,MAGvC,CACD,CACH,EAAA;AAAA;AAAA;AAAA,KACF;AAAA;AAGN;;;;"}

package/cjs/index.js

@@ -9,6 +9,7 @@ var ColumnSearch = require('./column-picker/ColumnSearch.js');
 var useControlled = require('./common-hooks/useControlled.js');
 var useResizeObserver = require('./common-hooks/use-resize-observer.js');
 var selectionTypes = require('./common-hooks/selectionTypes.js');
+var ContextPanelProvider = require('./context-panel-provider/ContextPanelProvider.js');
 var CycleStateButton = require('./cycle-state-button/CycleStateButton.js');
 var DateInput = require('./date-input/DateInput.js');
 var DatePicker = require('./date-picker/DatePicker.js');
@@ -25,14 +26,16 @@ var Icon = require('./icon-button/Icon.js');
 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 MeasuredContainer = require('./measured-container/MeasuredContainer.js');
 var useMeasuredContainer = require('./measured-container/useMeasuredContainer.js');
 var OverflowContainer = require('./overflow-container/OverflowContainer.js');
 var overflowUtils = require('./overflow-container/overflow-utils.js');
 var PriceTicker = require('./price-ticker/PriceTicker.js');
+var Prompt = require('./prompt/Prompt.js');
+var SortableList = require('./sortable-list/SortableList.js');
 var SplitButton = require('./split-button/SplitButton.js');
 var SplitStateButton = require('./split-button/SplitStateButton.js');
+var TableSearch = require('./table-search/TableSearch.js');
 var TabNext = require('./tabs-next/TabNext.js');
 var TabListNext = require('./tabs-next/TabListNext.js');
 var TabsNext = require('./tabs-next/TabsNext.js');
@@ -43,6 +46,7 @@ var TabNextAction = require('./tabs-next/TabNextAction.js');
 var Tabstrip = require('./tabstrip/Tabstrip.js');
 var Tab = require('./tabstrip/Tab.js');
 var tabstripDomUtils = require('./tabstrip/tabstrip-dom-utils.js');
+var TimeInput = require('./time-input/TimeInput.js');
 var Toolbar = require('./toolbar/Toolbar.js');
 var escapeRegExp = require('./utils/escapeRegExp.js');
 var isOverflowElement = require('./utils/isOverflowElement.js');
@@ -50,9 +54,8 @@ var isPlainObject = require('./utils/isPlainObject.js');
 var forwardCallbackProps = require('./utils/forwardCallbackProps.js');
 var VuuDatePicker = require('./vuu-date-picker/VuuDatePicker.js');
 var VuuInput = require('./vuu-input/VuuInput.js');
+var VuuTimePicker = require('./vuu-time-picker/VuuTimePicker.js');
 var VuuTypeaheadInput = require('./vuu-typeahead-input/VuuTypeaheadInput.js');
-var ContextPanelProvider = require('./context-panel-provider/ContextPanelProvider.js');
-var SortableList = require('./sortable-list/SortableList.js');
 
 
 
@@ -77,6 +80,9 @@ exports.hasSelection = selectionTypes.hasSelection;
 exports.isMultiSelection = selectionTypes.isMultiSelection;
 exports.isSingleSelection = selectionTypes.isSingleSelection;
 exports.selectionIsDisallowed = selectionTypes.selectionIsDisallowed;
+exports.ContextPanelProvider = ContextPanelProvider.ContextPanelProvider;
+exports.useContextPanel = ContextPanelProvider.useContextPanel;
+exports.useHideContextPanel = ContextPanelProvider.useHideContextPanel;
 exports.CycleStateButton = CycleStateButton.CycleStateButton;
 exports.DateInput = DateInput.DateInput;
 exports.DatePicker = DatePicker.DatePicker;
@@ -111,7 +117,6 @@ exports.Icon = Icon.Icon;
 exports.IconButton = IconButton.IconButton;
 exports.ToggleIconButton = ToggleIconButton.ToggleIconButton;
 exports.TablePicker = TablePicker.TablePicker;
-exports.TableSearch = TableSearch.TableSearch;
 exports.MeasuredContainer = MeasuredContainer.MeasuredContainer;
 exports.reduceSizeHeight = useMeasuredContainer.reduceSizeHeight;
 exports.useMeasuredContainer = useMeasuredContainer.useMeasuredContainer;
@@ -130,8 +135,12 @@ exports.sortByScreenOrder = overflowUtils.sortByScreenOrder;
 exports.switchWrappedItemIntoView = overflowUtils.switchWrappedItemIntoView;
 exports.unmarkItemsWhichAreNoLongerWrapped = overflowUtils.unmarkItemsWhichAreNoLongerWrapped;
 exports.PriceTicker = PriceTicker.PriceTicker;
+exports.Prompt = Prompt.Prompt;
+exports.SortableList = SortableList.SortableList;
+exports.SortableOption = SortableList.SortableOption;
 exports.SplitButton = SplitButton.SplitButton;
 exports.SplitStateButton = SplitStateButton.SplitStateButton;
+exports.TableSearch = TableSearch.TableSearch;
 exports.TabNext = TabNext.TabNext;
 exports.TabListNext = TabListNext.TabListNext;
 exports.TabsNext = TabsNext.TabsNext;
@@ -143,6 +152,7 @@ exports.Tabstrip = Tabstrip.Tabstrip;
 exports.Tab = Tab.Tab;
 exports.getIndexOfEditedItem = tabstripDomUtils.getIndexOfEditedItem;
 exports.getIndexOfSelectedTab = tabstripDomUtils.getIndexOfSelectedTab;
+exports.TimeInput = TimeInput.TimeInput;
 exports.Toolbar = Toolbar.Toolbar;
 exports.escapeRegExp = escapeRegExp.escapeRegExp;
 exports.isOverflowElement = isOverflowElement.isOverflowElement;
@@ -150,10 +160,6 @@ exports.isPlainObject = isPlainObject.isPlainObject;
 exports.forwardCallbackProps = forwardCallbackProps.forwardCallbackProps;
 exports.VuuDatePicker = VuuDatePicker.VuuDatePicker;
 exports.VuuInput = VuuInput.VuuInput;
+exports.VuuTimePicker = VuuTimePicker.VuuTimePicker;
 exports.VuuTypeaheadInput = VuuTypeaheadInput.VuuTypeaheadInput;
-exports.ContextPanelProvider = ContextPanelProvider.ContextPanelProvider;
-exports.useContextPanel = ContextPanelProvider.useContextPanel;
-exports.useHideContextPanel = ContextPanelProvider.useHideContextPanel;
-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/instrument-picker/TablePicker.css.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var tablePickerCss = ".vuuTablePicker {\n  border-radius: 6px;\n  height: var(--salt-size-base);\n  padding: 1px;\n  box-sizing: content-box;\n}\n\n.vuuTablePicker-floating-table {\n  border: solid 1px var(--salt-container-secondary-borderColor);\n  border-radius: 4px;\n  overflow: auto;\n  padding: var(--salt-spacing-100) 0;\n  z-index: var(--salt-zIndex-popout);\n}\n";
+var tablePickerCss = ".vuuTablePicker {\n  border-radius: 6px;\n  height: var(--salt-size-base);\n  padding: 1px;\n  box-sizing: content-box;\n}\n\n.vuuTablePicker-floating-table {\n  border: solid 1px var(--salt-container-secondary-borderColor);\n  border-radius: 4px;\n  overflow: auto;\n  padding: var(--salt-spacing-100) 0;\n  z-index: var(--salt-zIndex-popout);\n}\n\n[data-floating-ui-portal] [data-floating-ui-portal] .vuuTablePicker-floating-table {\n  z-index: calc(var(--salt-zIndex-modal) + var(--salt-zIndex-popout));\n}\n";
 
 module.exports = tablePickerCss;
 //# sourceMappingURL=TablePicker.css.js.map

package/cjs/prompt/Prompt.css.js

@@ -0,0 +1,6 @@
+'use strict';
+
+var promptCss = ".vuuPrompt {\n    min-height: var(--vuuPrompt-minHeight, 257px);\n    min-width: var(--vuuPrompt-minWidth,380px);\n\n    .saltDialogHeader {\n        .vuuIcon {\n            width: 24px;\n            --vuu-icon-size: 20px;\n        }\n    }\n\n    .vuuPromptConfirmButton:focus {\n        outline-style: var(--salt-focused-outlineStyle);\n        outline-width: var(--salt-focused-outlineWidth);\n        outline-color: var(--salt-focused-outlineColor);\n        outline-offset: var(--salt-focused-outlineOffset);\n    }\n}\n\n.vuuPrompt.saltDialog-warning {\n    --salt-status-warning-borderColor: var(--vuu-color-yellow-20);   \n    --variant-color: var(--vuu-color-yellow-20);\n\n    border-radius: 4px !important;\n    min-height: var(--vuuPrompt-minHeight, 150px);\n    min-width: var(--vuuPrompt-minWidth, 280px);\n    padding-top:0 !important;\n\n    .saltDialogHeader {\n        background-color: var(--variant-color);\n        padding-left: var(--salt-spacing-100);\n        padding-bottom: var(--salt-spacing-100);\n        padding-right: var(--salt-spacing-100);\n\n        .saltDialogHeader-header {\n            align-items: end;\n            display: flex;\n            gap: var(--salt-spacing-100);\n        }\n    }\n\n    .saltDialogContent {\n        display: flex;\n        align-items: center;\n        justify-content: flex-start;\n    } \n}\n\n";
+
+module.exports = promptCss;
+//# sourceMappingURL=Prompt.css.js.map

package/cjs/prompt/Prompt.css.js.map

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

package/cjs/prompt/Prompt.js

@@ -0,0 +1,136 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var core = require('@salt-ds/core');
+var cx = require('clsx');
+var React = require('react');
+var Icon = require('../icon-button/Icon.js');
+var IconButton = require('../icon-button/IconButton.js');
+var styles = require('@salt-ds/styles');
+var window = require('@salt-ds/window');
+var Prompt$1 = require('./Prompt.css.js');
+
+const classBase = "vuuPrompt";
+const Prompt = ({
+  children,
+  className,
+  cancelButtonLabel = "Cancel",
+  cancelButtonProps,
+  confirmButtonLabel = "Confirm",
+  confirmButtonProps,
+  disableAccent,
+  icon,
+  initialFocusedItem,
+  onCancel,
+  onClose,
+  onConfirm,
+  onOpenChange,
+  open,
+  showCancelButton = true,
+  showCloseButton = true,
+  showConfirmButton = true,
+  status,
+  title,
+  ...htmlAttributes
+}) => {
+  const targetWindow = window.useWindow();
+  styles.useComponentCssInjection({
+    testId: "vuu-prompt-next",
+    css: Prompt$1,
+    window: targetWindow
+  });
+  const close = React.useCallback(() => {
+    onClose?.();
+    onOpenChange?.(false);
+  }, [onClose, onOpenChange]);
+  const callbackRef = React.useCallback(
+    (el) => {
+      if (el) {
+        let target = null;
+        if (initialFocusedItem === "confirm" && showConfirmButton) {
+          target = el.querySelector(".vuuPromptConfirmButton");
+        } else if (initialFocusedItem === "cancel" && showCancelButton) {
+          target = el.querySelector(".vuuPromptCancelButton");
+        } else if (initialFocusedItem === "close" && showCloseButton) {
+          target = el.querySelector(".vuuPromptCloseButton");
+        }
+        if (target) {
+          setTimeout(() => {
+            target.focus();
+          }, 200);
+        }
+      }
+    },
+    [initialFocusedItem, showCancelButton, showCloseButton, showConfirmButton]
+  );
+  const handleCancel = React.useCallback(() => {
+    onCancel?.();
+    close();
+  }, [close, onCancel]);
+  const handleConfirm = React.useCallback(() => {
+    onConfirm?.();
+    close();
+  }, [close, onConfirm]);
+  const actions = showCloseButton ? /* @__PURE__ */ jsxRuntime.jsx(
+    IconButton.IconButton,
+    {
+      appearance: "transparent",
+      className: "vuuPromptCloseButton",
+      "data-embedded": true,
+      icon: "close",
+      onClick: close
+    }
+  ) : null;
+  const header = icon ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { name: icon }),
+    /* @__PURE__ */ jsxRuntime.jsx("span", { children: title })
+  ] }) : title;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    core.Dialog,
+    {
+      ...htmlAttributes,
+      className: cx(classBase, className),
+      onOpenChange,
+      open,
+      ref: callbackRef,
+      status,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          core.DialogHeader,
+          {
+            disableAccent,
+            header,
+            actions
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(core.DialogContent, { children }),
+        /* @__PURE__ */ jsxRuntime.jsxs(core.DialogActions, { children: [
+          showCancelButton ? /* @__PURE__ */ jsxRuntime.jsx(
+            core.Button,
+            {
+              className: "vuuPromptCancelButton",
+              disabled: cancelButtonProps?.disabled,
+              onClick: handleCancel,
+              ref: cancelButtonProps?.ref,
+              children: cancelButtonProps?.label ?? cancelButtonLabel
+            }
+          ) : null,
+          showConfirmButton ? /* @__PURE__ */ jsxRuntime.jsx(
+            core.Button,
+            {
+              className: "vuuPromptConfirmButton",
+              disabled: confirmButtonProps?.disabled,
+              sentiment: "accented",
+              onClick: handleConfirm,
+              ref: confirmButtonProps?.ref,
+              children: confirmButtonProps?.label ?? confirmButtonLabel
+            }
+          ) : null
+        ] })
+      ]
+    }
+  );
+};
+
+exports.Prompt = Prompt;
+//# sourceMappingURL=Prompt.js.map

package/cjs/prompt/Prompt.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Prompt.js","sources":["../../../../packages/vuu-ui-controls/src/prompt/Prompt.tsx"],"sourcesContent":["import {\n  Button,\n  Dialog,\n  DialogActions,\n  DialogContent,\n  DialogHeader,\n  DialogHeaderProps,\n  DialogProps,\n} from \"@salt-ds/core\";\nimport cx from \"clsx\";\nimport {\n  HTMLAttributes,\n  MouseEventHandler,\n  RefCallback,\n  RefObject,\n  useCallback,\n} from \"react\";\nimport { Icon, IconButton } from \"../icon-button\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\n\nimport promptCss from \"./Prompt.css\";\n\nconst classBase = \"vuuPrompt\";\n\n/**\n * Allow fine grained configuration of Prompt buttons\n * The ref is provided to facilitate programmatic focus.\n */\nexport interface PromptButtonProps {\n  disabled?: boolean;\n  label?: string;\n  ref?: RefObject<HTMLButtonElement | null>;\n}\n\nexport interface PromptProps\n  extends Pick<DialogProps, \"onOpenChange\" | \"open\" | \"status\">,\n    Pick<DialogHeaderProps, \"disableAccent\">,\n    Omit<HTMLAttributes<HTMLDivElement>, \"content\" | \"title\"> {\n  /**\n   * For simple configuration, where just a cancel button label is required.\n   */\n  cancelButtonLabel?: string;\n  /**\n   * Allow fine grained configuration of cancel button\n   */\n  cancelButtonProps?: PromptButtonProps;\n  /**\n   * For simple configuration, where just a confirm button label is required.\n   */\n  confirmButtonLabel?: string;\n  /**\n   * Allow fine grained configuration of confirm button\n   */\n  confirmButtonProps?: PromptButtonProps;\n  icon?: string;\n  /**\n   * Set this prop if one of the three built-in buttons should receive initial focus.\n   * Allows user to quickly dismiss/confirm prompt from keyboard. If the prompt content\n   * contains focusable item(s), focus should be controlled by caller.\n   */\n  initialFocusedItem?: \"confirm\" | \"cancel\" | \"close\";\n  onCancel?: () => void;\n  onConfirm?: () => void;\n  onClose?: () => void;\n  showCancelButton?: boolean;\n  showCloseButton?: boolean;\n  showConfirmButton?: boolean;\n  title: string;\n}\n\nexport const Prompt = ({\n  children,\n  className,\n  cancelButtonLabel = \"Cancel\",\n  cancelButtonProps,\n  confirmButtonLabel = \"Confirm\",\n  confirmButtonProps,\n  disableAccent,\n  icon,\n  initialFocusedItem,\n  onCancel,\n  onClose,\n  onConfirm,\n  onOpenChange,\n  open,\n  showCancelButton = true,\n  showCloseButton = true,\n  showConfirmButton = true,\n  status,\n  title,\n\n  ...htmlAttributes\n}: PromptProps) => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-prompt-next\",\n    css: promptCss,\n    window: targetWindow,\n  });\n\n  const close = useCallback(() => {\n    onClose?.();\n    onOpenChange?.(false);\n  }, [onClose, onOpenChange]);\n\n  const callbackRef = useCallback<RefCallback<HTMLDivElement>>(\n    (el) => {\n      if (el) {\n        let target: HTMLButtonElement | null = null;\n        if (initialFocusedItem === \"confirm\" && showConfirmButton) {\n          target = el.querySelector(\".vuuPromptConfirmButton\");\n        } else if (initialFocusedItem === \"cancel\" && showCancelButton) {\n          target = el.querySelector(\".vuuPromptCancelButton\");\n        } else if (initialFocusedItem === \"close\" && showCloseButton) {\n          target = el.querySelector(\".vuuPromptCloseButton\");\n        }\n\n        if (target) {\n          setTimeout(() => {\n            target.focus();\n          }, 200);\n        }\n      }\n    },\n    [initialFocusedItem, showCancelButton, showCloseButton, showConfirmButton],\n  );\n\n  const handleCancel = useCallback<MouseEventHandler<HTMLButtonElement>>(() => {\n    onCancel?.();\n    close();\n  }, [close, onCancel]);\n\n  const handleConfirm = useCallback<\n    MouseEventHandler<HTMLButtonElement>\n  >(() => {\n    onConfirm?.();\n    close();\n  }, [close, onConfirm]);\n\n  const actions = showCloseButton ? (\n    <IconButton\n      appearance=\"transparent\"\n      className=\"vuuPromptCloseButton\"\n      data-embedded\n      icon=\"close\"\n      onClick={close}\n    />\n  ) : null;\n\n  const header = icon ? (\n    <>\n      <Icon name={icon} />\n      <span>{title}</span>\n    </>\n  ) : (\n    title\n  );\n\n  return (\n    <Dialog\n      {...htmlAttributes}\n      className={cx(classBase, className)}\n      onOpenChange={onOpenChange}\n      open={open}\n      ref={callbackRef}\n      status={status}\n    >\n      <DialogHeader\n        disableAccent={disableAccent}\n        header={header}\n        actions={actions}\n      />\n      <DialogContent>{children}</DialogContent>\n      <DialogActions>\n        {showCancelButton ? (\n          <Button\n            className=\"vuuPromptCancelButton\"\n            disabled={cancelButtonProps?.disabled}\n            onClick={handleCancel}\n            ref={cancelButtonProps?.ref}\n          >\n            {cancelButtonProps?.label ?? cancelButtonLabel}\n          </Button>\n        ) : null}\n        {showConfirmButton ? (\n          <Button\n            className=\"vuuPromptConfirmButton\"\n            disabled={confirmButtonProps?.disabled}\n            sentiment=\"accented\"\n            onClick={handleConfirm}\n            ref={confirmButtonProps?.ref}\n          >\n            {confirmButtonProps?.label ?? confirmButtonLabel}\n          </Button>\n        ) : null}\n      </DialogActions>\n    </Dialog>\n  );\n};\n"],"names":["useWindow","useComponentCssInjection","promptCss","useCallback","jsx","IconButton","jsxs","Fragment","Icon","Dialog","DialogHeader","DialogContent","DialogActions","Button"],"mappings":"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"}