@vuu-ui/vuu-table-extras 0.13.64 → 0.13.66

package/esm/column-picker/ColumnPicker.js

@@ -0,0 +1,235 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { forwardRef, useCallback, useRef, useMemo } from 'react';
+import cx from 'clsx';
+import { useComponentCssInjection } from '@salt-ds/styles';
+import { useWindow } from '@salt-ds/window';
+import { reorderColumnItems, DragDropProvider, getColumnLabel, useSortable } from '@vuu-ui/vuu-utils';
+import columnPickerCss from './ColumnPicker.css.js';
+import { Input, ListBox, Option } from '@salt-ds/core';
+import { useColumnPicker, SelectedColumnChangeType } from './useColumnPicker.js';
+import { IconButton } from '@vuu-ui/vuu-ui-controls';
+import { useHighlighting } from '@vuu-ui/vuu-table';
+
+const classBase = "vuuColumnPicker";
+const classBaseListItem = "vuuColumnPickerListItem";
+const searchIcon = /* @__PURE__ */ jsx("span", { "data-icon": "search" });
+const NO_SELECTION = [];
+const useSorting = (id, index) => {
+  const { handleRef: sortableHandleRef, ref: sortableRef } = useSortable({
+    id,
+    index
+  });
+  const [handleRef, ref] = useMemo(() => {
+    return [sortableHandleRef, sortableRef];
+  }, [sortableHandleRef, sortableRef]);
+  return {
+    handleRef,
+    ref
+  };
+};
+const SelectedColumnListItem = ({
+  className: classNameProp,
+  index,
+  column: item,
+  onRemove,
+  searchPattern = "",
+  ...optionProps
+}) => {
+  const { handleRef, ref } = useSorting(item.name, index);
+  const value = getColumnLabel(item);
+  const valueWithHighlighting = useHighlighting(value, searchPattern);
+  return /* @__PURE__ */ jsxs(
+    Option,
+    {
+      ...optionProps,
+      className: cx(classNameProp, classBaseListItem),
+      "data-name": item.name,
+      ref,
+      children: [
+        /* @__PURE__ */ jsx(
+          IconButton,
+          {
+            "data-embedded": true,
+            appearance: "transparent",
+            icon: "draggable",
+            ref: handleRef,
+            size: 16
+          }
+        ),
+        /* @__PURE__ */ jsx("span", { className: `${classBase}-text`, children: valueWithHighlighting }),
+        /* @__PURE__ */ jsx(
+          IconButton,
+          {
+            className: `${classBaseListItem}-action`,
+            "data-embedded": true,
+            appearance: "transparent",
+            icon: "cross",
+            onClick: onRemove,
+            size: 16
+          }
+        )
+      ]
+    }
+  );
+};
+const AvailableColumnListItem = ({
+  className: classNameProp,
+  index,
+  column: item,
+  onAdd,
+  searchPattern = "",
+  ...optionProps
+}) => {
+  const value = getColumnLabel(item);
+  const valueWithHighlighting = useHighlighting(value, searchPattern);
+  return /* @__PURE__ */ jsxs(
+    Option,
+    {
+      ...optionProps,
+      className: cx(classNameProp, classBaseListItem),
+      "data-name": item.name,
+      children: [
+        /* @__PURE__ */ jsx("span", { className: `${classBase}-text`, children: valueWithHighlighting }),
+        /* @__PURE__ */ jsx(
+          IconButton,
+          {
+            className: `${classBaseListItem}-action`,
+            "data-embedded": true,
+            appearance: "transparent",
+            icon: "plus",
+            onClick: onAdd,
+            size: 16
+          }
+        )
+      ]
+    }
+  );
+};
+const ColumnPicker = forwardRef(function ColumnPicker2({
+  availableColumns: availableColumnsProp,
+  className,
+  defaultSelectedColumns,
+  onChangeSelectedColumns,
+  selectedColumns: selectedColumnsProp,
+  ...htmlAttributes
+}, forwardedRef) {
+  const targetWindow = useWindow();
+  useComponentCssInjection({
+    testId: "vuu-column-picker",
+    css: columnPickerCss,
+    window: targetWindow
+  });
+  const searchCallbackRef = useCallback((el) => {
+    setTimeout(() => {
+      el?.querySelector("input")?.focus();
+    }, 100);
+  }, []);
+  const {
+    availableColumns,
+    onAddItemToSelectedList,
+    onChangeSearchInput,
+    onRemoveItemFromSelectedList,
+    searchState,
+    selectedColumns
+  } = useColumnPicker({
+    availableColumns: availableColumnsProp,
+    defaultSelectedColumns,
+    onChangeSelectedColumns,
+    selectedColumns: selectedColumnsProp
+  });
+  const listRef = useRef(null);
+  const getOptionName = (option) => {
+    if (option) {
+      const { name } = option.dataset;
+      if (name) {
+        return name;
+      }
+    }
+    throw Error("[ColumnPicker] list option has no data-name");
+  };
+  const handleDragEnd = useCallback(() => {
+    setTimeout(() => {
+      const listItems = listRef.current?.querySelectorAll(".saltOption");
+      if (listItems) {
+        const orderedColumnNames = Array.from(listItems).map(getOptionName);
+        onChangeSelectedColumns?.(
+          reorderColumnItems(selectedColumns, orderedColumnNames),
+          SelectedColumnChangeType.ColumnsReordered
+        );
+      }
+    }, 300);
+  }, [onChangeSelectedColumns, selectedColumns]);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ...htmlAttributes,
+      className: cx(classBase, className),
+      ref: forwardedRef,
+      children: [
+        /* @__PURE__ */ jsx("form", { className: `${classBase}-search`, role: "search", children: /* @__PURE__ */ jsx(
+          Input,
+          {
+            startAdornment: searchIcon,
+            placeholder: "Find column",
+            ref: searchCallbackRef,
+            value: searchState.searchText,
+            onChange: onChangeSearchInput
+          }
+        ) }),
+        /* @__PURE__ */ jsxs("div", { className: `${classBase}-scrollContainer vuuScrollable`, children: [
+          /* @__PURE__ */ jsx("div", { className: `${classBase}-sectionHeader`, children: "Columns in view" }),
+          /* @__PURE__ */ jsx(DragDropProvider, { onDragEnd: handleDragEnd, children: /* @__PURE__ */ jsx(
+            ListBox,
+            {
+              className: `${classBase}-selectedList`,
+              ref: listRef,
+              selected: NO_SELECTION,
+              children: selectedColumns.map((column, index) => /* @__PURE__ */ jsx(
+                SelectedColumnListItem,
+                {
+                  column,
+                  index,
+                  onRemove: onRemoveItemFromSelectedList,
+                  searchPattern: searchState.searchText.toLowerCase(),
+                  value: column
+                },
+                column.name
+              ))
+            }
+          ) }),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: cx(
+                `${classBase}-sectionHeader`,
+                `${classBase}-availableHeader`
+              ),
+              children: "Available columns"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            ListBox,
+            {
+              className: `${classBase}-availableList`,
+              selected: NO_SELECTION,
+              children: availableColumns.map((column, index) => /* @__PURE__ */ jsx(
+                AvailableColumnListItem,
+                {
+                  column,
+                  index,
+                  onAdd: onAddItemToSelectedList,
+                  searchPattern: searchState.searchText.toLowerCase(),
+                  value: column
+                },
+                column.name
+              ))
+            }
+          )
+        ] })
+      ]
+    }
+  );
+});
+
+export { ColumnPicker, classBaseListItem };
+//# sourceMappingURL=ColumnPicker.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ColumnPicker.js","sources":["../../../../packages/vuu-table-extras/src/column-picker/ColumnPicker.tsx"],"sourcesContent":["import { ColumnDescriptor } from \"@vuu-ui/vuu-table-types\";\nimport {\n  ForwardedRef,\n  forwardRef,\n  HTMLAttributes,\n  MouseEventHandler,\n  RefCallback,\n  useCallback,\n  useMemo,\n  useRef,\n} from \"react\";\nimport cx from \"clsx\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport {\n  DragDropProvider,\n  getColumnLabel,\n  reorderColumnItems,\n  useSortable,\n} from \"@vuu-ui/vuu-utils\";\n\nimport columnPickerCss from \"./ColumnPicker.css\";\nimport { Input, ListBox, Option, OptionProps } from \"@salt-ds/core\";\nimport {\n  ColumPickerHookProps,\n  SelectedColumnChangeType,\n  useColumnPicker,\n} from \"./useColumnPicker\";\nimport { IconButton } from \"@vuu-ui/vuu-ui-controls\";\nimport { useHighlighting } from \"@vuu-ui/vuu-table\";\n\nconst classBase = \"vuuColumnPicker\";\nexport const classBaseListItem = \"vuuColumnPickerListItem\";\n\nexport interface ColumnPickerProps\n  extends ColumPickerHookProps,\n    HTMLAttributes<HTMLDivElement> {}\n\nconst searchIcon = <span data-icon=\"search\" />;\nconst NO_SELECTION: string[] = [] as const;\n\nconst useSorting = (id: string, index: number) => {\n  const { handleRef: sortableHandleRef, ref: sortableRef } = useSortable({\n    id,\n    index,\n  });\n\n  const [handleRef, ref] = useMemo(() => {\n    return [sortableHandleRef, sortableRef];\n  }, [sortableHandleRef, sortableRef]);\n\n  return {\n    handleRef,\n    ref,\n  };\n};\n\nconst SelectedColumnListItem = ({\n  className: classNameProp,\n  index,\n  column: item,\n  onRemove,\n  searchPattern = \"\",\n  ...optionProps\n}: OptionProps & {\n  index: number;\n  column: ColumnDescriptor;\n  onRemove: MouseEventHandler<HTMLButtonElement>;\n  searchPattern?: Lowercase<string>;\n}) => {\n  const { handleRef, ref } = useSorting(item.name, index);\n  const value = getColumnLabel(item as ColumnDescriptor);\n  const valueWithHighlighting = useHighlighting(value, searchPattern);\n\n  return (\n    <Option\n      {...optionProps}\n      className={cx(classNameProp, classBaseListItem)}\n      data-name={item.name}\n      ref={ref}\n    >\n      <IconButton\n        data-embedded\n        appearance=\"transparent\"\n        icon=\"draggable\"\n        ref={handleRef}\n        size={16}\n      />\n      <span className={`${classBase}-text`}>{valueWithHighlighting}</span>\n      <IconButton\n        className={`${classBaseListItem}-action`}\n        data-embedded\n        appearance=\"transparent\"\n        icon=\"cross\"\n        onClick={onRemove}\n        size={16}\n      />\n    </Option>\n  );\n};\n\nconst AvailableColumnListItem = ({\n  className: classNameProp,\n  index,\n  column: item,\n  onAdd,\n  searchPattern = \"\",\n  ...optionProps\n}: OptionProps & {\n  index: number;\n  column: ColumnDescriptor;\n  onAdd: MouseEventHandler<HTMLButtonElement>;\n  searchPattern?: Lowercase<string>;\n}) => {\n  const value = getColumnLabel(item as ColumnDescriptor);\n  const valueWithHighlighting = useHighlighting(value, searchPattern);\n\n  return (\n    <Option\n      {...optionProps}\n      className={cx(classNameProp, classBaseListItem)}\n      data-name={item.name}\n    >\n      <span className={`${classBase}-text`}>{valueWithHighlighting}</span>\n      <IconButton\n        className={`${classBaseListItem}-action`}\n        data-embedded\n        appearance=\"transparent\"\n        icon=\"plus\"\n        onClick={onAdd}\n        size={16}\n      />\n    </Option>\n  );\n};\n\nexport const ColumnPicker = forwardRef(function ColumnPicker(\n  {\n    availableColumns: availableColumnsProp,\n    className,\n    defaultSelectedColumns,\n    onChangeSelectedColumns,\n    selectedColumns: selectedColumnsProp,\n    ...htmlAttributes\n  }: ColumnPickerProps,\n  forwardedRef: ForwardedRef<HTMLDivElement>,\n) {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-column-picker\",\n    css: columnPickerCss,\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 {\n    availableColumns,\n    onAddItemToSelectedList,\n    onChangeSearchInput,\n    onRemoveItemFromSelectedList,\n    searchState,\n    selectedColumns,\n  } = useColumnPicker({\n    availableColumns: availableColumnsProp,\n    defaultSelectedColumns,\n    onChangeSelectedColumns,\n    selectedColumns: selectedColumnsProp,\n  });\n  const listRef = useRef<HTMLDivElement>(null);\n\n  const getOptionName = (option?: HTMLElement) => {\n    if (option) {\n      const { name } = option.dataset;\n      if (name) {\n        return name;\n      }\n    }\n    throw Error(\"[ColumnPicker] list option has no data-name\");\n  };\n\n  const handleDragEnd = useCallback(() => {\n    setTimeout(() => {\n      const listItems =\n        listRef.current?.querySelectorAll<HTMLDivElement>(\".saltOption\");\n      if (listItems) {\n        const orderedColumnNames = Array.from(listItems).map(getOptionName);\n        onChangeSelectedColumns?.(\n          reorderColumnItems(selectedColumns, orderedColumnNames),\n          SelectedColumnChangeType.ColumnsReordered,\n        );\n      }\n    }, 300);\n  }, [onChangeSelectedColumns, selectedColumns]);\n\n  return (\n    <div\n      {...htmlAttributes}\n      className={cx(classBase, className)}\n      ref={forwardedRef}\n    >\n      <form className={`${classBase}-search`} role=\"search\">\n        <Input\n          startAdornment={searchIcon}\n          placeholder=\"Find column\"\n          ref={searchCallbackRef}\n          value={searchState.searchText}\n          onChange={onChangeSearchInput}\n        />\n      </form>\n\n      <div className={`${classBase}-scrollContainer vuuScrollable`}>\n        <div className={`${classBase}-sectionHeader`}>Columns in view</div>\n        <DragDropProvider onDragEnd={handleDragEnd}>\n          <ListBox\n            className={`${classBase}-selectedList`}\n            ref={listRef}\n            selected={NO_SELECTION}\n          >\n            {selectedColumns.map((column, index) => (\n              <SelectedColumnListItem\n                column={column}\n                index={index}\n                key={column.name}\n                onRemove={onRemoveItemFromSelectedList}\n                searchPattern={\n                  searchState.searchText.toLowerCase() as Lowercase<string>\n                }\n                value={column}\n              />\n            ))}\n          </ListBox>\n        </DragDropProvider>\n\n        <div\n          className={cx(\n            `${classBase}-sectionHeader`,\n            `${classBase}-availableHeader`,\n          )}\n        >\n          Available columns\n        </div>\n        <ListBox\n          className={`${classBase}-availableList`}\n          selected={NO_SELECTION}\n        >\n          {availableColumns.map((column, index) => (\n            <AvailableColumnListItem\n              column={column}\n              index={index}\n              key={column.name}\n              onAdd={onAddItemToSelectedList}\n              searchPattern={\n                searchState.searchText.toLowerCase() as Lowercase<string>\n              }\n              value={column}\n            />\n          ))}\n        </ListBox>\n      </div>\n    </div>\n  );\n});\n"],"names":["ColumnPicker"],"mappings":";;;;;;;;;;;;AA+BA,MAAM,SAAY,GAAA,iBAAA;AACX,MAAM,iBAAoB,GAAA;AAMjC,MAAM,UAAa,mBAAA,GAAA,CAAC,MAAK,EAAA,EAAA,WAAA,EAAU,QAAS,EAAA,CAAA;AAC5C,MAAM,eAAyB,EAAC;AAEhC,MAAM,UAAA,GAAa,CAAC,EAAA,EAAY,KAAkB,KAAA;AAChD,EAAA,MAAM,EAAE,SAAW,EAAA,iBAAA,EAAmB,GAAK,EAAA,WAAA,KAAgB,WAAY,CAAA;AAAA,IACrE,EAAA;AAAA,IACA;AAAA,GACD,CAAA;AAED,EAAA,MAAM,CAAC,SAAA,EAAW,GAAG,CAAA,GAAI,QAAQ,MAAM;AACrC,IAAO,OAAA,CAAC,mBAAmB,WAAW,CAAA;AAAA,GACrC,EAAA,CAAC,iBAAmB,EAAA,WAAW,CAAC,CAAA;AAEnC,EAAO,OAAA;AAAA,IACL,SAAA;AAAA,IACA;AAAA,GACF;AACF,CAAA;AAEA,MAAM,yBAAyB,CAAC;AAAA,EAC9B,SAAW,EAAA,aAAA;AAAA,EACX,KAAA;AAAA,EACA,MAAQ,EAAA,IAAA;AAAA,EACR,QAAA;AAAA,EACA,aAAgB,GAAA,EAAA;AAAA,EAChB,GAAG;AACL,CAKM,KAAA;AACJ,EAAA,MAAM,EAAE,SAAW,EAAA,GAAA,KAAQ,UAAW,CAAA,IAAA,CAAK,MAAM,KAAK,CAAA;AACtD,EAAM,MAAA,KAAA,GAAQ,eAAe,IAAwB,CAAA;AACrD,EAAM,MAAA,qBAAA,GAAwB,eAAgB,CAAA,KAAA,EAAO,aAAa,CAAA;AAElE,EACE,uBAAA,IAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACE,GAAG,WAAA;AAAA,MACJ,SAAA,EAAW,EAAG,CAAA,aAAA,EAAe,iBAAiB,CAAA;AAAA,MAC9C,aAAW,IAAK,CAAA,IAAA;AAAA,MAChB,GAAA;AAAA,MAEA,QAAA,EAAA;AAAA,wBAAA,GAAA;AAAA,UAAC,UAAA;AAAA,UAAA;AAAA,YACC,eAAa,EAAA,IAAA;AAAA,YACb,UAAW,EAAA,aAAA;AAAA,YACX,IAAK,EAAA,WAAA;AAAA,YACL,GAAK,EAAA,SAAA;AAAA,YACL,IAAM,EAAA;AAAA;AAAA,SACR;AAAA,4BACC,MAAK,EAAA,EAAA,SAAA,EAAW,CAAG,EAAA,SAAS,SAAU,QAAsB,EAAA,qBAAA,EAAA,CAAA;AAAA,wBAC7D,GAAA;AAAA,UAAC,UAAA;AAAA,UAAA;AAAA,YACC,SAAA,EAAW,GAAG,iBAAiB,CAAA,OAAA,CAAA;AAAA,YAC/B,eAAa,EAAA,IAAA;AAAA,YACb,UAAW,EAAA,aAAA;AAAA,YACX,IAAK,EAAA,OAAA;AAAA,YACL,OAAS,EAAA,QAAA;AAAA,YACT,IAAM,EAAA;AAAA;AAAA;AACR;AAAA;AAAA,GACF;AAEJ,CAAA;AAEA,MAAM,0BAA0B,CAAC;AAAA,EAC/B,SAAW,EAAA,aAAA;AAAA,EACX,KAAA;AAAA,EACA,MAAQ,EAAA,IAAA;AAAA,EACR,KAAA;AAAA,EACA,aAAgB,GAAA,EAAA;AAAA,EAChB,GAAG;AACL,CAKM,KAAA;AACJ,EAAM,MAAA,KAAA,GAAQ,eAAe,IAAwB,CAAA;AACrD,EAAM,MAAA,qBAAA,GAAwB,eAAgB,CAAA,KAAA,EAAO,aAAa,CAAA;AAElE,EACE,uBAAA,IAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACE,GAAG,WAAA;AAAA,MACJ,SAAA,EAAW,EAAG,CAAA,aAAA,EAAe,iBAAiB,CAAA;AAAA,MAC9C,aAAW,IAAK,CAAA,IAAA;AAAA,MAEhB,QAAA,EAAA;AAAA,wBAAA,GAAA,CAAC,MAAK,EAAA,EAAA,SAAA,EAAW,CAAG,EAAA,SAAS,SAAU,QAAsB,EAAA,qBAAA,EAAA,CAAA;AAAA,wBAC7D,GAAA;AAAA,UAAC,UAAA;AAAA,UAAA;AAAA,YACC,SAAA,EAAW,GAAG,iBAAiB,CAAA,OAAA,CAAA;AAAA,YAC/B,eAAa,EAAA,IAAA;AAAA,YACb,UAAW,EAAA,aAAA;AAAA,YACX,IAAK,EAAA,MAAA;AAAA,YACL,OAAS,EAAA,KAAA;AAAA,YACT,IAAM,EAAA;AAAA;AAAA;AACR;AAAA;AAAA,GACF;AAEJ,CAAA;AAEa,MAAA,YAAA,GAAe,UAAW,CAAA,SAASA,aAC9C,CAAA;AAAA,EACE,gBAAkB,EAAA,oBAAA;AAAA,EAClB,SAAA;AAAA,EACA,sBAAA;AAAA,EACA,uBAAA;AAAA,EACA,eAAiB,EAAA,mBAAA;AAAA,EACjB,GAAG;AACL,CAAA,EACA,YACA,EAAA;AACA,EAAA,MAAM,eAAe,SAAU,EAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,mBAAA;AAAA,IACR,GAAK,EAAA,eAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EAAM,MAAA,iBAAA,GAAoB,WAAsC,CAAA,CAAC,EAAO,KAAA;AACtE,IAAA,UAAA,CAAW,MAAM;AACf,MAAI,EAAA,EAAA,aAAA,CAAc,OAAO,CAAA,EAAG,KAAM,EAAA;AAAA,OACjC,GAAG,CAAA;AAAA,GACR,EAAG,EAAE,CAAA;AAEL,EAAM,MAAA;AAAA,IACJ,gBAAA;AAAA,IACA,uBAAA;AAAA,IACA,mBAAA;AAAA,IACA,4BAAA;AAAA,IACA,WAAA;AAAA,IACA;AAAA,MACE,eAAgB,CAAA;AAAA,IAClB,gBAAkB,EAAA,oBAAA;AAAA,IAClB,sBAAA;AAAA,IACA,uBAAA;AAAA,IACA,eAAiB,EAAA;AAAA,GAClB,CAAA;AACD,EAAM,MAAA,OAAA,GAAU,OAAuB,IAAI,CAAA;AAE3C,EAAM,MAAA,aAAA,GAAgB,CAAC,MAAyB,KAAA;AAC9C,IAAA,IAAI,MAAQ,EAAA;AACV,MAAM,MAAA,EAAE,IAAK,EAAA,GAAI,MAAO,CAAA,OAAA;AACxB,MAAA,IAAI,IAAM,EAAA;AACR,QAAO,OAAA,IAAA;AAAA;AACT;AAEF,IAAA,MAAM,MAAM,6CAA6C,CAAA;AAAA,GAC3D;AAEA,EAAM,MAAA,aAAA,GAAgB,YAAY,MAAM;AACtC,IAAA,UAAA,CAAW,MAAM;AACf,MAAA,MAAM,SACJ,GAAA,OAAA,CAAQ,OAAS,EAAA,gBAAA,CAAiC,aAAa,CAAA;AACjE,MAAA,IAAI,SAAW,EAAA;AACb,QAAA,MAAM,qBAAqB,KAAM,CAAA,IAAA,CAAK,SAAS,CAAA,CAAE,IAAI,aAAa,CAAA;AAClE,QAAA,uBAAA;AAAA,UACE,kBAAA,CAAmB,iBAAiB,kBAAkB,CAAA;AAAA,UACtD,wBAAyB,CAAA;AAAA,SAC3B;AAAA;AACF,OACC,GAAG,CAAA;AAAA,GACL,EAAA,CAAC,uBAAyB,EAAA,eAAe,CAAC,CAAA;AAE7C,EACE,uBAAA,IAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACE,GAAG,cAAA;AAAA,MACJ,SAAA,EAAW,EAAG,CAAA,SAAA,EAAW,SAAS,CAAA;AAAA,MAClC,GAAK,EAAA,YAAA;AAAA,MAEL,QAAA,EAAA;AAAA,wBAAA,GAAA,CAAC,UAAK,SAAW,EAAA,CAAA,EAAG,SAAS,CAAA,OAAA,CAAA,EAAW,MAAK,QAC3C,EAAA,QAAA,kBAAA,GAAA;AAAA,UAAC,KAAA;AAAA,UAAA;AAAA,YACC,cAAgB,EAAA,UAAA;AAAA,YAChB,WAAY,EAAA,aAAA;AAAA,YACZ,GAAK,EAAA,iBAAA;AAAA,YACL,OAAO,WAAY,CAAA,UAAA;AAAA,YACnB,QAAU,EAAA;AAAA;AAAA,SAEd,EAAA,CAAA;AAAA,wBAEC,IAAA,CAAA,KAAA,EAAA,EAAI,SAAW,EAAA,CAAA,EAAG,SAAS,CAC1B,8BAAA,CAAA,EAAA,QAAA,EAAA;AAAA,0BAAA,GAAA,CAAC,KAAI,EAAA,EAAA,SAAA,EAAW,CAAG,EAAA,SAAS,kBAAkB,QAAe,EAAA,iBAAA,EAAA,CAAA;AAAA,0BAC7D,GAAA,CAAC,gBAAiB,EAAA,EAAA,SAAA,EAAW,aAC3B,EAAA,QAAA,kBAAA,GAAA;AAAA,YAAC,OAAA;AAAA,YAAA;AAAA,cACC,SAAA,EAAW,GAAG,SAAS,CAAA,aAAA,CAAA;AAAA,cACvB,GAAK,EAAA,OAAA;AAAA,cACL,QAAU,EAAA,YAAA;AAAA,cAET,QAAgB,EAAA,eAAA,CAAA,GAAA,CAAI,CAAC,MAAA,EAAQ,KAC5B,qBAAA,GAAA;AAAA,gBAAC,sBAAA;AAAA,gBAAA;AAAA,kBACC,MAAA;AAAA,kBACA,KAAA;AAAA,kBAEA,QAAU,EAAA,4BAAA;AAAA,kBACV,aAAA,EACE,WAAY,CAAA,UAAA,CAAW,WAAY,EAAA;AAAA,kBAErC,KAAO,EAAA;AAAA,iBAAA;AAAA,gBALF,MAAO,CAAA;AAAA,eAOf;AAAA;AAAA,WAEL,EAAA,CAAA;AAAA,0BAEA,GAAA;AAAA,YAAC,KAAA;AAAA,YAAA;AAAA,cACC,SAAW,EAAA,EAAA;AAAA,gBACT,GAAG,SAAS,CAAA,cAAA,CAAA;AAAA,gBACZ,GAAG,SAAS,CAAA,gBAAA;AAAA,eACd;AAAA,cACD,QAAA,EAAA;AAAA;AAAA,WAED;AAAA,0BACA,GAAA;AAAA,YAAC,OAAA;AAAA,YAAA;AAAA,cACC,SAAA,EAAW,GAAG,SAAS,CAAA,cAAA,CAAA;AAAA,cACvB,QAAU,EAAA,YAAA;AAAA,cAET,QAAiB,EAAA,gBAAA,CAAA,GAAA,CAAI,CAAC,MAAA,EAAQ,KAC7B,qBAAA,GAAA;AAAA,gBAAC,uBAAA;AAAA,gBAAA;AAAA,kBACC,MAAA;AAAA,kBACA,KAAA;AAAA,kBAEA,KAAO,EAAA,uBAAA;AAAA,kBACP,aAAA,EACE,WAAY,CAAA,UAAA,CAAW,WAAY,EAAA;AAAA,kBAErC,KAAO,EAAA;AAAA,iBAAA;AAAA,gBALF,MAAO,CAAA;AAAA,eAOf;AAAA;AAAA;AACH,SACF,EAAA;AAAA;AAAA;AAAA,GACF;AAEJ,CAAC;;;;"}

package/esm/column-picker/useColumnPicker.js

@@ -0,0 +1,101 @@
+import { useControlled } from '@salt-ds/core';
+import { queryClosest } from '@vuu-ui/vuu-utils';
+import { useState, useRef, useMemo, useCallback } from 'react';
+
+const nonSelectedColumns = ({
+  availableColumns,
+  selectedColumns
+}) => availableColumns.filter(
+  ({ name }) => selectedColumns.findIndex((c) => c.name === name) === -1
+);
+const findColumn = (target, columns) => {
+  const listItem = queryClosest(target, ".saltOption", true);
+  const { name } = listItem.dataset;
+  const column = columns.find((col) => col.name === name);
+  if (column) {
+    return column;
+  } else {
+    throw Error(`[useColumnPicker] column ${name} not found`);
+  }
+};
+const SelectedColumnChangeType = {
+  ColumnAdded: "column-added",
+  ColumnRemoved: "column-removed",
+  ColumnsReordered: "columns-reordered"
+};
+const useColumnPicker = ({
+  availableColumns,
+  defaultSelectedColumns,
+  onChangeSelectedColumns,
+  selectedColumns: selectedColumnsProp
+}) => {
+  const [searchState, setSearchState] = useState({ searchText: "" });
+  const [selectedColumns, setSelectedColumns] = useControlled({
+    controlled: selectedColumnsProp,
+    default: defaultSelectedColumns ?? [],
+    name: "ColumnPicker",
+    state: "selectedColumns"
+  });
+  const visibleColumnsRef = useRef({ availableColumns, selectedColumns });
+  useMemo(() => {
+    const value = searchState.searchText.toLowerCase();
+    if (value) {
+      const pattern = value.toLowerCase();
+      visibleColumnsRef.current = {
+        availableColumns: availableColumns.filter(
+          ({ name, label = name }) => label.toLowerCase().indexOf(pattern) !== -1
+        ),
+        selectedColumns: selectedColumns.filter(
+          ({ name, label = name }) => label.toLowerCase().indexOf(pattern) !== -1
+        )
+      };
+    } else {
+      visibleColumnsRef.current = { availableColumns, selectedColumns };
+    }
+  }, [availableColumns, selectedColumns, searchState.searchText]);
+  const handleChangeSearchInput = useCallback((evt) => {
+    const { value } = evt.target;
+    setSearchState({
+      searchText: value
+    });
+  }, []);
+  const handleAddItemToSelectedList = useCallback(
+    ({ target }) => {
+      const targetColumn = findColumn(target, availableColumns);
+      const newColumns = selectedColumns.concat(targetColumn);
+      onChangeSelectedColumns(newColumns, SelectedColumnChangeType.ColumnAdded);
+      setSelectedColumns(newColumns);
+    },
+    [
+      availableColumns,
+      onChangeSelectedColumns,
+      selectedColumns,
+      setSelectedColumns
+    ]
+  );
+  const handleRemoveItemFromSelectedList = useCallback(
+    ({ target }) => {
+      const targetColumn = findColumn(target, selectedColumns);
+      const newColumns = selectedColumns.filter(
+        (col) => col.name !== targetColumn.name
+      );
+      onChangeSelectedColumns(
+        newColumns,
+        SelectedColumnChangeType.ColumnRemoved
+      );
+      setSelectedColumns(newColumns);
+    },
+    [onChangeSelectedColumns, selectedColumns, setSelectedColumns]
+  );
+  return {
+    availableColumns: nonSelectedColumns(visibleColumnsRef.current),
+    onAddItemToSelectedList: handleAddItemToSelectedList,
+    onRemoveItemFromSelectedList: handleRemoveItemFromSelectedList,
+    onChangeSearchInput: handleChangeSearchInput,
+    searchState,
+    selectedColumns: visibleColumnsRef.current.selectedColumns
+  };
+};
+
+export { SelectedColumnChangeType, useColumnPicker };
+//# sourceMappingURL=useColumnPicker.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useColumnPicker.js","sources":["../../../../packages/vuu-table-extras/src/column-picker/useColumnPicker.tsx"],"sourcesContent":["import { useControlled } from \"@salt-ds/core\";\nimport { ColumnDescriptor } from \"@vuu-ui/vuu-table-types\";\nimport { queryClosest, ValueOf } from \"@vuu-ui/vuu-utils\";\nimport {\n  FormEventHandler,\n  MouseEventHandler,\n  useCallback,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\n\nexport type ColumnPickerAction = (column: ColumnDescriptor) => void;\n\nconst nonSelectedColumns = ({\n  availableColumns,\n  selectedColumns,\n}: {\n  availableColumns: ColumnDescriptor[];\n  selectedColumns: ColumnDescriptor[];\n}) =>\n  availableColumns.filter(\n    ({ name }) => selectedColumns.findIndex((c) => c.name === name) === -1,\n  );\n\nconst findColumn = (target: EventTarget, columns: ColumnDescriptor[]) => {\n  const listItem = queryClosest(target, \".saltOption\", true);\n  const { name } = listItem.dataset;\n  const column = columns.find((col) => col.name === name);\n  if (column) {\n    return column;\n  } else {\n    throw Error(`[useColumnPicker] column ${name} not found`);\n  }\n};\nexport const SelectedColumnChangeType = {\n  ColumnAdded: \"column-added\",\n  ColumnRemoved: \"column-removed\",\n  ColumnsReordered: \"columns-reordered\",\n} as const;\nexport type SelectedColumnChangeType = ValueOf<typeof SelectedColumnChangeType>;\nexport type SelectedColumnsChangeHandler = (\n  columns: ColumnDescriptor[],\n  changeType: SelectedColumnChangeType,\n) => void;\n\nexport interface ColumPickerHookProps {\n  /**\n   * All available columns, including selected columns.\n   */\n  availableColumns: ColumnDescriptor[];\n  /**\n   * Columns already selected and rendered in Table,\n   * columnPicker will be uncontrolled\n   */\n  defaultSelectedColumns?: ColumnDescriptor[];\n  onChangeSelectedColumns: SelectedColumnsChangeHandler;\n  /**\n   * Columns already selected and rendered in Table.\n   * columnPicker will be controlled\n   */\n  selectedColumns?: ColumnDescriptor[];\n}\n\nexport const useColumnPicker = ({\n  availableColumns,\n  defaultSelectedColumns,\n  onChangeSelectedColumns,\n  selectedColumns: selectedColumnsProp,\n}: ColumPickerHookProps) => {\n  const [searchState, setSearchState] = useState<{\n    searchText: string;\n  }>({ searchText: \"\" });\n\n  const [selectedColumns, setSelectedColumns] = useControlled({\n    controlled: selectedColumnsProp,\n    default: defaultSelectedColumns ?? [],\n    name: \"ColumnPicker\",\n    state: \"selectedColumns\",\n  });\n\n  const visibleColumnsRef = useRef({ availableColumns, selectedColumns });\n\n  useMemo(() => {\n    const value = searchState.searchText.toLowerCase();\n    if (value) {\n      const pattern = value.toLowerCase();\n      visibleColumnsRef.current = {\n        availableColumns: availableColumns.filter(\n          ({ name, label = name }) =>\n            label.toLowerCase().indexOf(pattern) !== -1,\n        ),\n        selectedColumns: selectedColumns.filter(\n          ({ name, label = name }) =>\n            label.toLowerCase().indexOf(pattern) !== -1,\n        ),\n      };\n    } else {\n      visibleColumnsRef.current = { availableColumns, selectedColumns };\n    }\n  }, [availableColumns, selectedColumns, searchState.searchText]);\n\n  const handleChangeSearchInput = useCallback<FormEventHandler>((evt) => {\n    const { value } = evt.target as HTMLInputElement;\n    setSearchState({\n      searchText: value,\n    });\n  }, []);\n\n  const handleAddItemToSelectedList = useCallback<\n    MouseEventHandler<HTMLButtonElement>\n  >(\n    ({ target }) => {\n      const targetColumn = findColumn(target, availableColumns);\n      const newColumns = selectedColumns.concat(targetColumn);\n      onChangeSelectedColumns(newColumns, SelectedColumnChangeType.ColumnAdded);\n      setSelectedColumns(newColumns);\n    },\n    [\n      availableColumns,\n      onChangeSelectedColumns,\n      selectedColumns,\n      setSelectedColumns,\n    ],\n  );\n\n  const handleRemoveItemFromSelectedList = useCallback<\n    MouseEventHandler<HTMLButtonElement>\n  >(\n    ({ target }) => {\n      const targetColumn = findColumn(target, selectedColumns);\n      const newColumns = selectedColumns.filter(\n        (col) => col.name !== targetColumn.name,\n      );\n      onChangeSelectedColumns(\n        newColumns,\n        SelectedColumnChangeType.ColumnRemoved,\n      );\n      setSelectedColumns(newColumns);\n    },\n    [onChangeSelectedColumns, selectedColumns, setSelectedColumns],\n  );\n\n  return {\n    availableColumns: nonSelectedColumns(visibleColumnsRef.current),\n    onAddItemToSelectedList: handleAddItemToSelectedList,\n    onRemoveItemFromSelectedList: handleRemoveItemFromSelectedList,\n    onChangeSearchInput: handleChangeSearchInput,\n    searchState,\n    selectedColumns: visibleColumnsRef.current.selectedColumns,\n  };\n};\n"],"names":[],"mappings":"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"}

package/esm/datasource-stats/DatasourceStats.css.js

@@ -1,4 +1,4 @@
-var dataSourceStats = ".vuuDatasourceStats {\n  align-items: center;\n  display: grid;\n  font-size: var(--vuuDatasourceStats-fontSize, 10px);\n  gap: var(--vuuDatasourceStats-gap, var(--salt-spacing-100));\n  grid-template-areas: \"panel-start panel-center panel-end\";\n  grid-template-columns: 1fr 1fr 1fr;\n  grid-template-rows: auto;\n  height: var(--vuuDatasourceStats-height, 100%);\n  padding: 0 var(--salt-spacing-200);\n\n  .vuuDatasourceStats-statsPanel {\n    align-items: center;\n    display: flex;\n    gap: var(--salt-spacing-100);\n    width: fit-content;\n  }\n\n  .vuuDatasourceStats-rowStats {\n    justify-self: flex-start;\n    grid-area: panel-start;\n  }\n  .vuuDatasourceStats-freezeStatus {\n    justify-self: flex-start;\n    grid-area: panel-start;\n  }\n  .vuuDatasourceStats-selectionStats {\n    justify-self: center;\n    grid-area: panel-center;\n  }\n\n.vuuDatasourceStats-label {\n  color: var(--salt-content-secondary-foreground);\n}\n\n.vuuDatasourceStats-value {\n  color: var(--salt-content-primary-foreground);\n}\n.vuuDatasourceStats-actions {\n  margin: 0 var(--salt-spacing-200);\n}\n\n}\n\n";
+var dataSourceStats = ".vuuDatasourceStats {\n  align-items: center;\n  background: var(--vuuDatasourceStats-background, var(--salt-container-secondary-background));\n  display: grid;\n  font-size: var(--vuuDatasourceStats-fontSize, 10px);\n  gap: var(--vuuDatasourceStats-gap, var(--salt-spacing-100));\n  grid-template-areas: \"panel-start panel-center panel-end\";\n  grid-template-columns: 1fr 1fr 1fr;\n  grid-template-rows: auto;\n  height: var(--vuuDatasourceStats-height, 100%);\n  padding: 0 var(--salt-spacing-200);\n\n    .vuuDatasourceStats-statsPanel {\n      align-items: center;\n      display: flex;\n      gap: var(--salt-spacing-100);\n      width: fit-content;\n    }\n\n    .vuuDatasourceStats-rowStats {\n      justify-self: flex-start;\n      grid-area: panel-start;\n    }\n    .vuuDatasourceStats-freezeStatus {\n      justify-self: flex-start;\n      grid-area: panel-start;\n    }\n    .vuuDatasourceStats-selectionStats {\n      justify-self: center;\n      grid-area: panel-center;\n    }\n\n  .vuuDatasourceStats-label {\n    color: var(--salt-content-secondary-foreground);\n  }\n\n  .vuuDatasourceStats-value {\n    color: var(--salt-content-primary-foreground);\n  }\n  .vuuDatasourceStats-tooltray {\n    justify-self: end;;\n    margin: 0 var(--salt-spacing-200);\n    grid-area: panel-end;\n  }\n\n}\n\n";
 
 export { dataSourceStats as default };
 //# sourceMappingURL=DatasourceStats.css.js.map

package/esm/datasource-stats/DatasourceStats.js

@@ -22,6 +22,7 @@ const DataSourceStats = ({
   showFreezeStatus = true,
   showRowStats = true,
   showSelectionStats = true,
+  tooltrayActions,
   ...htmlAttributes
 }) => {
   const targetWindow = useWindow();
@@ -84,7 +85,8 @@ const DataSourceStats = ({
                 /* @__PURE__ */ jsx("span", { className: `${classBase}-actions`, children })
               ]
             }
-          ) : null
+          ) : null,
+          tooltrayActions ? /* @__PURE__ */ jsx("div", { className: `${classBase}-statsPanel ${classBase}-tooltray`, children: /* @__PURE__ */ jsx("span", { className: `${classBase}-actions`, children: tooltrayActions }) }) : null
         ]
       }
     );

package/esm/datasource-stats/DatasourceStats.js.map

@@ -1 +1 @@
-{"version":3,"file":"DatasourceStats.js","sources":["../../../../packages/vuu-table-extras/src/datasource-stats/DatasourceStats.tsx"],"sourcesContent":["import cx from \"clsx\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { HTMLAttributes, ReactNode } from \"react\";\n\nimport dataSourceStats from \"./DatasourceStats.css\";\nimport {\n  DatasourceStatsHookProps,\n  useDatasourceStats,\n} from \"./useDatasourceStats\";\n\nexport type ItemLabel =\n  | string\n  | {\n      singlular: string;\n      plural: string;\n    };\n\nexport interface DataSourceStatsProps\n  extends DatasourceStatsHookProps,\n    Omit<HTMLAttributes<HTMLDivElement>, \"children\"> {\n  /**\n   * children will be displayed when selection present. Intended\n   * use case is display of action button(s) that will operate on\n   * selected rows.\n   */\n  children?: ReactNode;\n  /**\n   * Label will be used in display of selected row count, e.g\n   * '6 trades selected', where 'trade' is the itemLabel, will\n   *  default to 'row'\n   */\n  itemLabel?: ItemLabel;\n}\n\nconst classBase = \"vuuDatasourceStats\";\n\nconst numberFormatter = new Intl.NumberFormat();\n\nconst getLabel = (label: ItemLabel, count = 1) => {\n  if (count === 1) {\n    return typeof label === \"string\" ? label : label.singlular;\n  } else {\n    return typeof label === \"string\" ? `${label}s` : label.plural;\n  }\n};\n\nexport const DataSourceStats = ({\n  children,\n  className,\n  dataSource,\n  itemLabel = \"row\",\n  showFreezeStatus = true,\n  showRowStats = true,\n  showSelectionStats = true,\n  ...htmlAttributes\n}: DataSourceStatsProps) => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-datasource-stats\",\n    css: dataSourceStats,\n    window: targetWindow,\n  });\n\n  const { freezeTime, range, selectedCount, size } = useDatasourceStats({\n    dataSource,\n    showFreezeStatus,\n    showRowStats,\n    showSelectionStats,\n  });\n\n  const from = numberFormatter.format(range.firstRowInViewport);\n  const to = numberFormatter.format(Math.min(range.lastRowInViewport, size));\n  const value = numberFormatter.format(size);\n  const showSelection = showSelectionStats && selectedCount > 0;\n\n  if (size === 0) {\n    return (\n      <div {...htmlAttributes} className={cx(classBase, className)}>\n        <span className={`${classBase}-label`}>No Rows to display</span>\n      </div>\n    );\n  } else {\n    return (\n      <div\n        {...htmlAttributes}\n        className={cx(classBase, className, {\n          [`${classBase}-withSelection`]: showSelection,\n        })}\n      >\n        {showRowStats ? (\n          <div className={`${classBase}-statsPanel ${classBase}-rowStats`}>\n            <span className={`${classBase}-label`}>Row count</span>\n            <span className={`${classBase}-range`}>\n              <span className={`${classBase}-value`}>{from}</span>\n              <span className={`${classBase}-label`}>-</span>\n              <span className={`${classBase}-value`}>{to}</span>\n            </span>\n            <span className={`${classBase}-label`}>of</span>\n            <span className={`${classBase}-value`}>{value}</span>\n          </div>\n        ) : null}\n        {showFreezeStatus && freezeTime !== undefined ? (\n          <div className={`${classBase}-statsPanel ${classBase}-freezeStatus`}>\n            <span\n              className={`${classBase}-label`}\n            >{`(frozen at ${freezeTime})`}</span>\n          </div>\n        ) : null}\n        {showSelection ? (\n          <div\n            className={`${classBase}-statsPanel ${classBase}-selectionStats`}\n          >\n            <span className={`${classBase}-value`}>{selectedCount}</span>\n            <span\n              className={`${classBase}-label`}\n            >{`selected ${getLabel(itemLabel, selectedCount)}`}</span>\n            <span className={`${classBase}-actions`}>{children}</span>\n          </div>\n        ) : null}\n      </div>\n    );\n  }\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"DatasourceStats.js","sources":["../../../../packages/vuu-table-extras/src/datasource-stats/DatasourceStats.tsx"],"sourcesContent":["import cx from \"clsx\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { HTMLAttributes, ReactNode } from \"react\";\n\nimport dataSourceStats from \"./DatasourceStats.css\";\nimport {\n  DatasourceStatsHookProps,\n  useDatasourceStats,\n} from \"./useDatasourceStats\";\n\nexport type ItemLabel =\n  | string\n  | {\n      singlular: string;\n      plural: string;\n    };\n\nexport interface DataSourceStatsProps\n  extends DatasourceStatsHookProps,\n    Omit<HTMLAttributes<HTMLDivElement>, \"children\"> {\n  /**\n   * children will be displayed when selection present. Intended\n   * use case is display of action button(s) that will operate on\n   * selected rows.\n   */\n  children?: ReactNode;\n  /**\n   * Label will be used in display of selected row count, e.g\n   * '6 trades selected', where 'trade' is the itemLabel, will\n   *  default to 'row'\n   */\n  itemLabel?: ItemLabel;\n\n  selectionActions?: ReactNode;\n  tooltrayActions?: ReactNode;\n}\n\nconst classBase = \"vuuDatasourceStats\";\n\nconst numberFormatter = new Intl.NumberFormat();\n\nconst getLabel = (label: ItemLabel, count = 1) => {\n  if (count === 1) {\n    return typeof label === \"string\" ? label : label.singlular;\n  } else {\n    return typeof label === \"string\" ? `${label}s` : label.plural;\n  }\n};\n\nexport const DataSourceStats = ({\n  children,\n  className,\n  dataSource,\n  itemLabel = \"row\",\n  showFreezeStatus = true,\n  showRowStats = true,\n  showSelectionStats = true,\n  tooltrayActions,\n  ...htmlAttributes\n}: DataSourceStatsProps) => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-datasource-stats\",\n    css: dataSourceStats,\n    window: targetWindow,\n  });\n\n  const { freezeTime, range, selectedCount, size } = useDatasourceStats({\n    dataSource,\n    showFreezeStatus,\n    showRowStats,\n    showSelectionStats,\n  });\n\n  const from = numberFormatter.format(range.firstRowInViewport);\n  const to = numberFormatter.format(Math.min(range.lastRowInViewport, size));\n  const value = numberFormatter.format(size);\n  const showSelection = showSelectionStats && selectedCount > 0;\n\n  if (size === 0) {\n    return (\n      <div {...htmlAttributes} className={cx(classBase, className)}>\n        <span className={`${classBase}-label`}>No Rows to display</span>\n      </div>\n    );\n  } else {\n    return (\n      <div\n        {...htmlAttributes}\n        className={cx(classBase, className, {\n          [`${classBase}-withSelection`]: showSelection,\n        })}\n      >\n        {showRowStats ? (\n          <div className={`${classBase}-statsPanel ${classBase}-rowStats`}>\n            <span className={`${classBase}-label`}>Row count</span>\n            <span className={`${classBase}-range`}>\n              <span className={`${classBase}-value`}>{from}</span>\n              <span className={`${classBase}-label`}>-</span>\n              <span className={`${classBase}-value`}>{to}</span>\n            </span>\n            <span className={`${classBase}-label`}>of</span>\n            <span className={`${classBase}-value`}>{value}</span>\n          </div>\n        ) : null}\n        {showFreezeStatus && freezeTime !== undefined ? (\n          <div className={`${classBase}-statsPanel ${classBase}-freezeStatus`}>\n            <span\n              className={`${classBase}-label`}\n            >{`(frozen at ${freezeTime})`}</span>\n          </div>\n        ) : null}\n        {showSelection ? (\n          <div\n            className={`${classBase}-statsPanel ${classBase}-selectionStats`}\n          >\n            <span className={`${classBase}-value`}>{selectedCount}</span>\n            <span\n              className={`${classBase}-label`}\n            >{`selected ${getLabel(itemLabel, selectedCount)}`}</span>\n            <span className={`${classBase}-actions`}>{children}</span>\n          </div>\n        ) : null}\n        {tooltrayActions ? (\n          <div className={`${classBase}-statsPanel ${classBase}-tooltray`}>\n            <span className={`${classBase}-actions`}>{tooltrayActions}</span>\n          </div>\n        ) : null}\n      </div>\n    );\n  }\n};\n"],"names":[],"mappings":"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"}

package/esm/freeze-control/FreezeControl.css.js

@@ -1,4 +1,4 @@
-var freezeControlCss = "\n\n.FreezeControl {\n    align-items: center;\n    background-color: var(--vuuFreezeControl-background, var(--salt-container-secondary-background));\n    border-radius: 6px;\n    display: inline-grid;\n    grid-template-columns: 1fr auto 1fr;\n    grid-template-rows: var(--salt-size-base);\n    column-gap: var(--salt-spacing-200);\n    padding: 0 var(--salt-spacing-200);\n\n    .FreezeControl-label-active {\n        grid-area: 1/1/2/2;\n    }\n\n    .saltSwitch {\n        grid-area: 1/2/2/3;\n        .saltSwitch-track {\n            height: 24px;\n        }\n    }\n\n    .FreezeControl-label-frozen {\n        grid-area: 1/3/2/4;\n    }\n\n}\n\n";
+var freezeControlCss = ".FreezeControl {\n  display: inline-flex;\n  --freeze-control-flash-duration: 0.25s;\n\n  .FreezeControl-buttonRow {\n    background-color: var(--salt-container-secondary-background);\n    border: 1px solid var(--salt-container-secondary-borderColor);\n    border-radius: 50px;\n    display: flex;\n    height: var(--salt-size-base);\n    overflow: hidden;\n  }\n\n  .FreezeControl-buttonWrapper {\n    border-radius: 50px;\n    padding: 0 var(--salt-spacing-150);\n  }\n\n  .FreezeControl-buttonWrapper-active {\n    background-color: var(--salt-actionable-secondary-background-active);\n  }\n\n  .saltToggleButtonGroup.vuuStateButtonGroup\n    .saltToggleButton[aria-pressed=\"true\"] {\n    background-color: transparent;\n  }\n\n  .FreezeControl-customBadge {\n    background-color: var(--salt-container-primary-background);\n    border-radius: 50%;\n    color: var(--salt-text-primary-foreground);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    font-size: var(--salt-text-fontSize);\n    font-weight: bold;\n    height: var(--salt-size-base);\n    width: var(--salt-size-base);\n    min-width: var(--salt-size-base);\n    margin-left: var(--salt-spacing-100);\n  }\n\n  .FreezeControl-newOrders {\n    align-items: center;\n    background-color: transparent;\n    display: flex;\n    font-size: var(--salt-text-fontSize);\n    padding: 0 var(--salt-spacing-200);\n  }\n}\n\n.FreezeControl-customBadge-flashing {\n  animation: flashGreenRed var(--freeze-control-flash-duration, 0.25s)\n    steps(1, end) infinite;\n}\n\n@keyframes flashGreenRed {\n  0% {\n    background-color: var(--salt-status-success-background);\n  }\n  50% {\n    background-color: var(--salt-container-primary-background);\n  }\n  100% {\n    background-color: var(--salt-status-success-background);\n  }\n}\n";
 
 export { freezeControlCss as default };
 //# sourceMappingURL=FreezeControl.css.js.map

package/esm/freeze-control/FreezeControl.js

@@ -1,17 +1,17 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
+import { jsx, jsxs } from 'react/jsx-runtime';
 import { useComponentCssInjection } from '@salt-ds/styles';
 import { useWindow } from '@salt-ds/window';
-import { Switch } from '@salt-ds/core';
-import freezeControlCss from './FreezeControl.css.js';
+import { ToggleButtonGroup, ToggleButton } from '@salt-ds/core';
 import { useFreezeControl } from './useFreezeControl.js';
+import { useState, useRef, useEffect } from 'react';
 import cx from 'clsx';
+import freezeControlCss from './FreezeControl.css.js';
 
-const classBase = "FreezeControl";
+const FLASH_DURATION_MS = 3e3;
 const FreezeControl = ({
-  activeLabel = "Active",
   dataSource,
   className,
-  lockedLabel = "Locked",
+  flashDuration = 0.25,
   ...htmlAttributes
 }) => {
   const targetWindow = useWindow();
@@ -20,14 +20,75 @@ const FreezeControl = ({
     css: freezeControlCss,
     window: targetWindow
   });
-  const { frozen, onSwitchChange } = useFreezeControl({
+  const { isFrozen, newRecordCount, onToggleChange } = useFreezeControl({
     dataSource
   });
-  return /* @__PURE__ */ jsxs("div", { ...htmlAttributes, className: cx(classBase, className), children: [
-    /* @__PURE__ */ jsx("span", { className: `${classBase}-label-active`, children: activeLabel }),
-    /* @__PURE__ */ jsx(Switch, { checked: frozen, onChange: onSwitchChange, className: "vuuLarge" }),
-    /* @__PURE__ */ jsx("span", { className: `${classBase}-label-frozen`, children: lockedLabel })
-  ] });
+  const [isFlashing, setIsFlashing] = useState(false);
+  const flashTimeoutRef = useRef(null);
+  useEffect(() => {
+    if (isFrozen && newRecordCount > 0) {
+      setIsFlashing(true);
+      if (flashTimeoutRef.current) {
+        clearTimeout(flashTimeoutRef.current);
+      }
+      flashTimeoutRef.current = setTimeout(() => {
+        setIsFlashing(false);
+      }, FLASH_DURATION_MS);
+    }
+  }, [newRecordCount, isFrozen]);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ...htmlAttributes,
+      className: cx("FreezeControl", className),
+      style: {
+        ...htmlAttributes.style,
+        "--freeze-control-flash-duration": `${flashDuration}s`
+      },
+      children: /* @__PURE__ */ jsxs("div", { className: `FreezeControl-buttonRow`, children: [
+        /* @__PURE__ */ jsxs(
+          ToggleButtonGroup,
+          {
+            className: "vuuStateButtonGroup",
+            onChange: onToggleChange,
+            value: isFrozen ? "frozen" : "live",
+            children: [
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: cx(`FreezeControl-buttonWrapper`, {
+                    [`FreezeControl-buttonWrapper-active`]: !isFrozen
+                  }),
+                  children: /* @__PURE__ */ jsx(ToggleButton, { value: "live", children: "Live" })
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: cx(`FreezeControl-buttonWrapper`, {
+                    [`FreezeControl-buttonWrapper-active`]: isFrozen
+                  }),
+                  children: /* @__PURE__ */ jsx(ToggleButton, { value: "frozen", children: isFrozen ? "Frozen" : "Freeze" })
+                }
+              )
+            ]
+          }
+        ),
+        isFrozen && /* @__PURE__ */ jsxs("div", { className: `FreezeControl-newOrders`, children: [
+          "New Orders",
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: cx(`FreezeControl-customBadge`, {
+                [`FreezeControl-customBadge-flashing`]: isFlashing
+              }),
+              children: newRecordCount
+            }
+          )
+        ] })
+      ] })
+    }
+  );
 };
 
 export { FreezeControl };

package/esm/freeze-control/FreezeControl.js.map

@@ -1 +1 @@
-{"version":3,"file":"FreezeControl.js","sources":["../../../../packages/vuu-table-extras/src/freeze-control/FreezeControl.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { Switch } from \"@salt-ds/core\";\nimport freezeControlCss from \"./FreezeControl.css\";\nimport { useFreezeControl, type FreezeProps } from \"./useFreezeControl\";\nimport { HTMLAttributes } from \"react\";\nimport cx from \"clsx\";\n\nconst classBase = \"FreezeControl\";\n\nexport interface FreezeControlProps\n  extends HTMLAttributes<HTMLDivElement>,\n    FreezeProps {\n  activeLabel?: string;\n  lockedLabel?: string;\n}\n\nexport const FreezeControl = ({\n  activeLabel = \"Active\",\n  dataSource,\n  className,\n  lockedLabel = \"Locked\",\n  ...htmlAttributes\n}: FreezeControlProps) => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-freeze-control\",\n    css: freezeControlCss,\n    window: targetWindow,\n  });\n\n  const { frozen, onSwitchChange } = useFreezeControl({\n    dataSource,\n  });\n\n  return (\n    <div {...htmlAttributes} className={cx(classBase, className)}>\n      <span className={`${classBase}-label-active`}>{activeLabel}</span>\n      <Switch checked={frozen} onChange={onSwitchChange} className=\"vuuLarge\" />\n      <span className={`${classBase}-label-frozen`}>{lockedLabel}</span>\n    </div>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;AAQA,MAAM,SAAY,GAAA,eAAA;AASX,MAAM,gBAAgB,CAAC;AAAA,EAC5B,WAAc,GAAA,QAAA;AAAA,EACd,UAAA;AAAA,EACA,SAAA;AAAA,EACA,WAAc,GAAA,QAAA;AAAA,EACd,GAAG;AACL,CAA0B,KAAA;AACxB,EAAA,MAAM,eAAe,SAAU,EAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,oBAAA;AAAA,IACR,GAAK,EAAA,gBAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EAAA,MAAM,EAAE,MAAA,EAAQ,cAAe,EAAA,GAAI,gBAAiB,CAAA;AAAA,IAClD;AAAA,GACD,CAAA;AAED,EACE,uBAAA,IAAA,CAAC,SAAK,GAAG,cAAA,EAAgB,WAAW,EAAG,CAAA,SAAA,EAAW,SAAS,CACzD,EAAA,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,MAAK,EAAA,EAAA,SAAA,EAAW,CAAG,EAAA,SAAS,iBAAkB,QAAY,EAAA,WAAA,EAAA,CAAA;AAAA,wBAC1D,MAAO,EAAA,EAAA,OAAA,EAAS,QAAQ,QAAU,EAAA,cAAA,EAAgB,WAAU,UAAW,EAAA,CAAA;AAAA,wBACvE,MAAK,EAAA,EAAA,SAAA,EAAW,CAAG,EAAA,SAAS,iBAAkB,QAAY,EAAA,WAAA,EAAA;AAAA,GAC7D,EAAA,CAAA;AAEJ;;;;"}
+{"version":3,"file":"FreezeControl.js","sources":["../../../../packages/vuu-table-extras/src/freeze-control/FreezeControl.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { ToggleButton, ToggleButtonGroup } from \"@salt-ds/core\";\nimport { useFreezeControl, type FreezeProps } from \"./useFreezeControl\";\nimport { HTMLAttributes, useEffect, useRef, useState } from \"react\";\nimport cx from \"clsx\";\n\nimport freezeControlCss from \"./FreezeControl.css\";\n\n// Duration to keep flashing after last new record (in milliseconds)\nconst FLASH_DURATION_MS = 3000;\n\nexport interface FreezeControlProps\n  extends HTMLAttributes<HTMLDivElement>,\n    FreezeProps {\n  /**\n   * Duration of the flash animation for the badge (in seconds).\n   * @default 0.25\n   */\n  flashDuration?: number;\n}\n\nexport const FreezeControl = ({\n  dataSource,\n  className,\n  flashDuration = 0.25,\n  ...htmlAttributes\n}: FreezeControlProps) => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-freeze-control\",\n    css: freezeControlCss,\n    window: targetWindow,\n  });\n\n  const { isFrozen, newRecordCount, onToggleChange } = useFreezeControl({\n    dataSource,\n  });\n\n  const [isFlashing, setIsFlashing] = useState(false);\n  const flashTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n\n  // Check if we're frozen and have new records and set the flash with a 3 second timeout\n  useEffect(() => {\n    if (isFrozen && newRecordCount > 0) {\n      setIsFlashing(true);\n\n      if (flashTimeoutRef.current) {\n        clearTimeout(flashTimeoutRef.current);\n      }\n\n      flashTimeoutRef.current = setTimeout(() => {\n        setIsFlashing(false);\n      }, FLASH_DURATION_MS);\n    }\n  }, [newRecordCount, isFrozen]);\n\n  return (\n    <div\n      {...htmlAttributes}\n      className={cx(\"FreezeControl\", className)}\n      style={\n        {\n          ...htmlAttributes.style,\n          \"--freeze-control-flash-duration\": `${flashDuration}s`,\n        } as React.CSSProperties\n      }\n    >\n      <div className={`FreezeControl-buttonRow`}>\n        <ToggleButtonGroup\n          className=\"vuuStateButtonGroup\"\n          onChange={onToggleChange}\n          value={isFrozen ? \"frozen\" : \"live\"}\n        >\n          <div\n            className={cx(`FreezeControl-buttonWrapper`, {\n              [`FreezeControl-buttonWrapper-active`]: !isFrozen,\n            })}\n          >\n            <ToggleButton value=\"live\">Live</ToggleButton>\n          </div>\n          <div\n            className={cx(`FreezeControl-buttonWrapper`, {\n              [`FreezeControl-buttonWrapper-active`]: isFrozen,\n            })}\n          >\n            <ToggleButton value=\"frozen\">\n              {isFrozen ? \"Frozen\" : \"Freeze\"}\n            </ToggleButton>\n          </div>\n        </ToggleButtonGroup>\n        {isFrozen && (\n          <div className={`FreezeControl-newOrders`}>\n            New Orders\n            <div\n              className={cx(`FreezeControl-customBadge`, {\n                [`FreezeControl-customBadge-flashing`]: isFlashing,\n              })}\n            >\n              {newRecordCount}\n            </div>\n          </div>\n        )}\n      </div>\n    </div>\n  );\n};\n"],"names":[],"mappings":"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"}

package/esm/freeze-control/FrozenBanner.css.js

@@ -0,0 +1,4 @@
+var frozenBannerCss = ".FrozenBanner {\n  align-items: center;\n  background-color: var(--salt-actionable-secondary-background-active);\n  border-radius: 4px;\n  color: var(--salt-actionable-secondary-foreground-active);\n  display: flex;\n  font-size: var(--salt-text-fontSize);\n  height: var(--salt-size-base);\n  padding: 0 var(--salt-spacing-200);\n}\n";
+
+export { frozenBannerCss as default };
+//# sourceMappingURL=FrozenBanner.css.js.map

package/esm/freeze-control/FrozenBanner.css.js.map

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