@vuu-ui/vuu-table-extras 0.13.22 → 0.13.24

package/cjs/column-list/ColumnList.css.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var columnList = ".vuuColumnList {\n  --vuuMeasuredContainer-flex: 1 1 1px;\n  --vuu-svg-function: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 14 14\"><path d=\"M5.8625 10.5V9.625H6.72291L8.4875 7.59792L6.72291 5.54167H5.64375L4.60833 10.8792C4.53055 11.3167 4.36527 11.6545 4.1125 11.8927C3.85972 12.1309 3.53402 12.25 3.13541 12.25C2.7368 12.25 2.40382 12.1333 2.13645 11.9C1.86909 11.6667 1.73541 11.375 1.73541 11.025C1.73541 10.7625 1.80833 10.551 1.95416 10.3906C2.1 10.2302 2.28958 10.15 2.52291 10.15C2.72708 10.15 2.89479 10.2083 3.02604 10.325C3.15729 10.4417 3.22291 10.5972 3.22291 10.7917C3.22291 10.8986 3.20104 10.9983 3.15729 11.0906C3.11354 11.183 3.05277 11.2583 2.975 11.3167C3.01388 11.3361 3.0552 11.3507 3.09895 11.3604C3.1427 11.3701 3.18888 11.375 3.2375 11.375C3.36388 11.375 3.47083 11.3142 3.55833 11.1927C3.64583 11.0712 3.70902 10.9132 3.74791 10.7188L4.75416 5.54167H2.91666V4.66667H4.91458L5.22083 3.12083C5.30833 2.68333 5.48333 2.34549 5.74583 2.10729C6.00833 1.8691 6.33402 1.75 6.72291 1.75C7.12152 1.75 7.44965 1.86667 7.70729 2.1C7.96493 2.33333 8.09375 2.625 8.09375 2.975C8.09375 3.2375 8.02083 3.44896 7.875 3.60938C7.72916 3.76979 7.53958 3.85 7.30625 3.85C7.1118 3.85 6.94652 3.7941 6.81041 3.68229C6.6743 3.57049 6.60625 3.42222 6.60625 3.2375C6.60625 3.14028 6.62569 3.04549 6.66458 2.95312C6.70347 2.86076 6.75208 2.78542 6.81041 2.72708C6.79097 2.70764 6.7618 2.69063 6.72291 2.67604C6.68402 2.66146 6.64513 2.65417 6.60625 2.65417C6.47986 2.65417 6.37048 2.7125 6.27812 2.82917C6.18576 2.94583 6.12013 3.09653 6.08125 3.28125L5.81875 4.66667H8.575V5.54167H7.88958L9.1 6.94167L10.2375 5.54167H9.5375V4.66667H12.25V5.54167H11.4042L9.65416 7.59792L11.4042 9.625H12.25V10.5H9.5375V9.625H10.2375L9.07083 8.26875L7.875 9.625H8.575V10.5H5.8625Z\"/></svg>');\n  --vuuList-borderStyle: none;\n  --vuuListItem-padding: 0;\n  display: flex;\n  flex-direction: column;\n\n\n  .saltOption {\n    align-items: center;\n    background-color: var(--salt-container-primary-background);\n    border-bottom: var(--vuuColumnListItem-border, solid) 1px\n      var(--salt-separable-tertiary-borderColor);\n    gap: var(--salt-spacing-200);\n    padding: var(--salt-spacing-100) 0;\n\n    .vuuIcon {\n      --vuu-icon-color: var(--salt-content-secondary-foreground);\n    }\n  }\n\n  .vuuColumnList-text {\n    flex: 1 1 auto;\n  }\n\n}\n\n[data-icon=\"function\"] {\n  --vuu-icon-svg: var(--vuu-svg-function);\n}\n\n.vuuColumnList-withColumnNavgation {\n  .vuuColumnList-text:hover {\n    font-weight: 600;\n    text-decoration: underline;\n  }\n}\n\n.vuuColumnList-search {\n  padding: var(--salt-spacing-300);\n}\n\n.vuuColumnList-header {\n  border-top: solid 2px var(--vuu-color-gray-30);\n  flex: 0 0 40px;\n  font-size: 14px;\n  font-weight: 600;\n  padding-left: var(--salt-spacing-400);\n  padding-top: 24px;\n}\n\n.vuuColumnList-colHeadings {\n  border-bottom: solid 2px var(--vuu-color-gray-30);\n  color: var(--vuu-color-gray-50);\n  display: flex;\n  flex: 0 0 24px;\n  font-size: 10px;\n  justify-content: space-between;\n  margin-top: 16px;\n  padding-bottom: 8px;\n}\n";
+var cssColumnList = ".vuuColumnList {\n  --vuuMeasuredContainer-flex: 1 1 1px;\n  --vuu-svg-function: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 14 14\"><path d=\"M5.8625 10.5V9.625H6.72291L8.4875 7.59792L6.72291 5.54167H5.64375L4.60833 10.8792C4.53055 11.3167 4.36527 11.6545 4.1125 11.8927C3.85972 12.1309 3.53402 12.25 3.13541 12.25C2.7368 12.25 2.40382 12.1333 2.13645 11.9C1.86909 11.6667 1.73541 11.375 1.73541 11.025C1.73541 10.7625 1.80833 10.551 1.95416 10.3906C2.1 10.2302 2.28958 10.15 2.52291 10.15C2.72708 10.15 2.89479 10.2083 3.02604 10.325C3.15729 10.4417 3.22291 10.5972 3.22291 10.7917C3.22291 10.8986 3.20104 10.9983 3.15729 11.0906C3.11354 11.183 3.05277 11.2583 2.975 11.3167C3.01388 11.3361 3.0552 11.3507 3.09895 11.3604C3.1427 11.3701 3.18888 11.375 3.2375 11.375C3.36388 11.375 3.47083 11.3142 3.55833 11.1927C3.64583 11.0712 3.70902 10.9132 3.74791 10.7188L4.75416 5.54167H2.91666V4.66667H4.91458L5.22083 3.12083C5.30833 2.68333 5.48333 2.34549 5.74583 2.10729C6.00833 1.8691 6.33402 1.75 6.72291 1.75C7.12152 1.75 7.44965 1.86667 7.70729 2.1C7.96493 2.33333 8.09375 2.625 8.09375 2.975C8.09375 3.2375 8.02083 3.44896 7.875 3.60938C7.72916 3.76979 7.53958 3.85 7.30625 3.85C7.1118 3.85 6.94652 3.7941 6.81041 3.68229C6.6743 3.57049 6.60625 3.42222 6.60625 3.2375C6.60625 3.14028 6.62569 3.04549 6.66458 2.95312C6.70347 2.86076 6.75208 2.78542 6.81041 2.72708C6.79097 2.70764 6.7618 2.69063 6.72291 2.67604C6.68402 2.66146 6.64513 2.65417 6.60625 2.65417C6.47986 2.65417 6.37048 2.7125 6.27812 2.82917C6.18576 2.94583 6.12013 3.09653 6.08125 3.28125L5.81875 4.66667H8.575V5.54167H7.88958L9.1 6.94167L10.2375 5.54167H9.5375V4.66667H12.25V5.54167H11.4042L9.65416 7.59792L11.4042 9.625H12.25V10.5H9.5375V9.625H10.2375L9.07083 8.26875L7.875 9.625H8.575V10.5H5.8625Z\"/></svg>');\n  --vuuList-borderStyle: none;\n  --vuuListItem-padding: 0;\n  display: flex;\n  flex-direction: column;\n  padding: 0 var(--salt-spacing-100);\n\n  .saltListBox {\n    background-color: inherit;\n  }\n\n  .saltOption {\n    align-items: center;\n    background-color: inherit;\n    border-bottom: var(--vuuColumnListItem-border, solid) 1px\n      var(--salt-separable-tertiary-borderColor);\n    gap: var(--salt-spacing-200);\n    height: calc(var(--salt-size-base) + var(--salt-spacing-200));\n    .vuuIcon {\n      --vuu-icon-color: var(--salt-content-secondary-foreground);\n    }\n  }\n\n  .vuuColumnList-text {\n    flex: 1 1 auto;\n  }\n\n}\n\n[data-icon=\"function\"] {\n  --vuu-icon-svg: var(--vuu-svg-function);\n}\n\n.vuuColumnList-withColumnNavgation {\n  .vuuColumnList-text:hover {\n    font-weight: 600;\n    text-decoration: underline;\n  }\n}\n\n.vuuColumnList-search {\n  --saltInput-paddingLeft: var(--salt-spacing-300);\n  padding: var(--salt-spacing-200) var(--salt-spacing-300) var(--salt-spacing-300) var(--salt-spacing-300);\n}\n\n.vuuColumnList-header {\n  align-items: center;\n  border-top: solid 2px var(--vuu-color-gray-30);\n  display: flex;\n  font-size: 14px;\n  font-weight: 600;\n  flex: 0 0 var(--vuuColumnList-headerHeight, 32px);\n  padding-left: var(--salt-spacing-400);\n\n}\n\n.vuuColumnList-colHeadings {\n  border-bottom: solid 2px var(--vuu-color-gray-30);\n  color: var(--vuu-color-gray-50);\n  display: flex;\n  flex: 0 0 24px;\n  font-size: 10px;\n  justify-content: space-between;\n  margin-top: 16px;\n  padding-bottom: 8px;\n}\n";
 
-module.exports = columnList;
+module.exports = cssColumnList;
 //# sourceMappingURL=ColumnList.css.js.map

package/cjs/column-list/ColumnList.js

@@ -8,8 +8,8 @@ var vuuUiControls = require('@vuu-ui/vuu-ui-controls');
 var vuuUtils = require('@vuu-ui/vuu-utils');
 var cx = require('clsx');
 var react = require('react');
+var useColumnList = require('./useColumnList.js');
 var ColumnList$1 = require('./ColumnList.css.js');
-var useColumnList = require('../table-column-settings/useColumnList.js');
 
 const classBase = "vuuColumnList";
 const classBaseListItem = "vuuColumnListItem";
@@ -108,43 +108,26 @@ const ColumnList = ({
     window: targetWindow
   });
   const listRef = react.useRef(null);
-  const [permissions, hideOnly] = react.useMemo(
-    () => [
-      {
-        allowHideColumns,
-        allowRemoveColumns,
-        allowReorderColumns
-      },
-      allowHideColumns && !allowRemoveColumns
-    ],
+  const permissions = react.useMemo(
+    () => ({
+      allowHideColumns,
+      allowRemoveColumns,
+      allowReorderColumns
+    }),
     [allowHideColumns, allowRemoveColumns, allowReorderColumns]
   );
   const {
-    onChange: onSearchInputChange,
+    onChangeListItem,
+    onChangeSearchInput,
     searchState,
     visibleColumnItems
-  } = useColumnList.useColumnList({ columnItems });
-  const handleChange = react.useCallback(
-    ({ target }) => {
-      const input = target;
-      const listItem = vuuUtils.queryClosest(target, `.${classBaseListItem}`);
-      if (listItem) {
-        const {
-          dataset: { name }
-        } = listItem;
-        if (name) {
-          const saltCheckbox = vuuUtils.queryClosest(target, `.${classBase}-checkBox`);
-          const saltSwitch = vuuUtils.queryClosest(target, `.${classBase}-switch`);
-          if (saltCheckbox && !hideOnly) {
-            onChange(name, "subscribed", input.checked);
-          } else if (saltSwitch || hideOnly) {
-            onChange(name, "hidden", input.checked === false);
-          }
-        }
-      }
-    },
-    [hideOnly, onChange]
-  );
+  } = useColumnList.useColumnList({
+    classBase,
+    classBaseListItem,
+    columnItems,
+    permissions,
+    onChange
+  });
   const handleClick = react.useCallback(
     (evt) => {
       const targetEl = evt.target;
@@ -186,7 +169,7 @@ const ColumnList = ({
             placeholder: "Find column",
             ref: searchCallbackRef,
             value: searchState.searchText,
-            onChange: onSearchInputChange
+            onChange: onChangeSearchInput
           }
         ) }) : null,
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: `${classBase}-header`, children: /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Column Name" }) }),
@@ -199,7 +182,7 @@ const ColumnList = ({
           {
             item: columnItem,
             index,
-            onChange: handleChange,
+            onChange: onChangeListItem,
             onClick: handleClick,
             permissions,
             value: columnItem
@@ -212,4 +195,6 @@ const ColumnList = ({
 };
 
 exports.ColumnList = ColumnList;
+exports.classBase = classBase;
+exports.classBaseListItem = classBaseListItem;
 //# sourceMappingURL=ColumnList.js.map

package/cjs/column-list/ColumnList.js.map

@@ -1 +1 @@
-{"version":3,"file":"ColumnList.js","sources":["../../../../packages/vuu-table-extras/src/column-list/ColumnList.tsx"],"sourcesContent":["import {\n  Checkbox,\n  Input,\n  ListBox,\n  Option,\n  OptionProps,\n  Switch,\n} from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport {\n  ColumnDescriptor,\n  ColumnListPermissions,\n} from \"@vuu-ui/vuu-table-types\";\nimport { Icon, IconButton } from \"@vuu-ui/vuu-ui-controls\";\nimport {\n  DragDropProvider,\n  getColumnLabel,\n  queryClosest,\n  reorderColumnItems,\n  useSortable,\n} from \"@vuu-ui/vuu-utils\";\nimport cx from \"clsx\";\nimport {\n  HTMLAttributes,\n  MouseEventHandler,\n  RefCallback,\n  SyntheticEvent,\n  useCallback,\n  useMemo,\n  useRef,\n} from \"react\";\nimport { ColumnItem } from \"../table-column-settings/useTableSettings\";\n\nimport columnList from \"./ColumnList.css\";\nimport { useColumnList } from \"../table-column-settings/useColumnList\";\n\nconst classBase = \"vuuColumnList\";\nconst classBaseListItem = \"vuuColumnListItem\";\n\nconst searchIcon = <span data-icon=\"search\" />;\nconst NO_SELECTION: string[] = [] as const;\n\nconst useSorting = (id: string, index: number, allowSort = true) => {\n  const { handleRef: sortableHandleRef, ref: sortableRef } = useSortable({\n    id,\n    index,\n  });\n\n  const noopRef = useCallback(() => {\n    // do nothing\n  }, []);\n\n  const [handleRef, ref] = useMemo(() => {\n    return allowSort ? [sortableHandleRef, sortableRef] : [noopRef, noopRef];\n  }, [allowSort, noopRef, sortableHandleRef, sortableRef]);\n\n  return {\n    handleRef,\n    ref,\n  };\n};\n\nexport type ColumnChangeHandler = (\n  columnName: string,\n  propertyName: keyof ColumnDescriptor | \"subscribed\",\n  value: string | number | boolean,\n) => void;\n\nexport interface ColumnListProps\n  extends Omit<HTMLAttributes<HTMLDivElement>, \"onChange\"> {\n  columnItems: ColumnItem[];\n  onChange: ColumnChangeHandler;\n  onNavigateToColumn?: (columnName: string) => void;\n  onReorderColumnItems?: (columnItems: ColumnItem[]) => void;\n  permissions?: ColumnListPermissions;\n}\n\nconst defaultPermissions: ColumnListPermissions = {\n  allowColumnSearch: false,\n  allowHideColumns: true,\n  allowRemoveColumns: true,\n  allowReorderColumns: true,\n};\n\nconst ColumnListItem = ({\n  className: classNameProp,\n  index,\n  item,\n  permissions: { allowHideColumns, allowRemoveColumns, allowReorderColumns },\n  ...optionProps\n}: OptionProps & {\n  index: number;\n  item: ColumnItem;\n  permissions: ColumnListPermissions;\n}) => {\n  const hideOnly = allowHideColumns && !allowRemoveColumns;\n  const removeOnly = !allowHideColumns && allowRemoveColumns;\n  const hideAndRemove = allowHideColumns && allowRemoveColumns;\n\n  const { handleRef, ref } = useSorting(item.name, index, allowReorderColumns);\n  return (\n    <Option\n      {...optionProps}\n      className={cx(classNameProp, classBaseListItem)}\n      data-name={item.name}\n      id={item.name}\n      ref={ref}\n    >\n      {allowReorderColumns ? (\n        <IconButton\n          data-embedded\n          appearance=\"transparent\"\n          icon=\"draggable\"\n          ref={handleRef}\n          size={16}\n        />\n      ) : null}\n      {item?.isCalculated ? <Icon name=\"function\" /> : null}\n      {hideAndRemove || hideOnly || removeOnly ? (\n        <Checkbox\n          className={`${classBase}-checkBox`}\n          checked={hideOnly ? item?.hidden !== true : item?.subscribed}\n        />\n      ) : null}\n      <span className={`${classBase}-text`}>\n        {getColumnLabel(item as ColumnDescriptor)}\n      </span>\n      {hideAndRemove ? (\n        <Switch\n          className={`${classBase}-switch`}\n          checked={item?.hidden !== true}\n          disabled={item?.subscribed !== true}\n        />\n      ) : null}\n    </Option>\n  );\n};\n\nexport const ColumnList = ({\n  className,\n  columnItems,\n  onChange,\n  onNavigateToColumn,\n  onReorderColumnItems,\n  permissions: {\n    allowColumnSearch = defaultPermissions.allowColumnSearch,\n    allowHideColumns = defaultPermissions.allowHideColumns,\n    allowRemoveColumns = defaultPermissions.allowRemoveColumns,\n    allowReorderColumns = defaultPermissions.allowReorderColumns,\n  } = defaultPermissions,\n  ...htmlAttributes\n}: ColumnListProps) => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-column-list\",\n    css: columnList,\n    window: targetWindow,\n  });\n  const listRef = useRef<HTMLDivElement>(null);\n  const [permissions, hideOnly] = useMemo(\n    () => [\n      {\n        allowHideColumns,\n        allowRemoveColumns,\n        allowReorderColumns,\n      },\n      allowHideColumns && !allowRemoveColumns,\n    ],\n    [allowHideColumns, allowRemoveColumns, allowReorderColumns],\n  );\n\n  const {\n    onChange: onSearchInputChange,\n    searchState,\n    visibleColumnItems,\n  } = useColumnList({ columnItems });\n\n  const handleChange = useCallback(\n    ({ target }: SyntheticEvent) => {\n      const input = target as HTMLInputElement;\n      const listItem = queryClosest(target, `.${classBaseListItem}`);\n      if (listItem) {\n        const {\n          dataset: { name },\n        } = listItem;\n        if (name) {\n          const saltCheckbox = queryClosest(target, `.${classBase}-checkBox`);\n          const saltSwitch = queryClosest(target, `.${classBase}-switch`);\n\n          if (saltCheckbox && !hideOnly) {\n            onChange(name, \"subscribed\", input.checked);\n          } else if (saltSwitch || hideOnly) {\n            onChange(name, \"hidden\", input.checked === false);\n          }\n        }\n      }\n    },\n    [hideOnly, onChange],\n  );\n\n  const handleClick = useCallback<MouseEventHandler>(\n    (evt) => {\n      const targetEl = evt.target as HTMLElement;\n      if (targetEl.classList.contains(\"vuuColumnList-text\")) {\n        const listItemEl = targetEl.closest(\".vuuListItem\") as HTMLElement;\n        if (listItemEl?.dataset.name) {\n          onNavigateToColumn?.(listItemEl.dataset.name);\n        }\n      }\n    },\n    [onNavigateToColumn],\n  );\n\n  const handleDragEnd = useCallback(() => {\n    setTimeout(() => {\n      const listItems =\n        listRef.current?.querySelectorAll<HTMLDivElement>(\".saltOption\");\n      if (listItems) {\n        const orderedIds = Array.from(listItems).map(({ id }) => id);\n        onReorderColumnItems?.(reorderColumnItems(columnItems, orderedIds));\n      }\n    }, 300);\n  }, [columnItems, onReorderColumnItems]);\n\n  const searchCallbackRef = useCallback<RefCallback<HTMLElement>>((el) => {\n    setTimeout(() => {\n      el?.querySelector(\"input\")?.focus();\n    }, 100);\n  }, []);\n\n  return (\n    <DragDropProvider onDragEnd={handleDragEnd}>\n      <div\n        {...htmlAttributes}\n        className={cx(classBase, className, {\n          [`${classBase}-withColumnNavigation`]:\n            typeof onNavigateToColumn === \"function\",\n        })}\n      >\n        {allowColumnSearch ? (\n          <form className={`${classBase}-search`} role=\"search\">\n            <Input\n              // inputProps={{ onKeyDown }}\n              startAdornment={searchIcon}\n              placeholder=\"Find column\"\n              ref={searchCallbackRef}\n              value={searchState.searchText}\n              onChange={onSearchInputChange}\n            />\n          </form>\n        ) : null}\n        <div className={`${classBase}-header`}>\n          <span>Column Name</span>\n        </div>\n        {allowHideColumns && allowRemoveColumns ? (\n          <div className={`${classBase}-colHeadings`}>\n            <span>Column subscription</span>\n            <span>Visibility</span>\n          </div>\n        ) : null}\n        <ListBox ref={listRef} selected={NO_SELECTION}>\n          {visibleColumnItems.map((columnItem, index) => (\n            <ColumnListItem\n              item={columnItem}\n              index={index}\n              key={columnItem.name}\n              onChange={handleChange}\n              onClick={handleClick}\n              permissions={permissions}\n              value={columnItem}\n            />\n          ))}\n        </ListBox>\n      </div>\n    </DragDropProvider>\n  );\n};\n"],"names":["jsx","useSortable","useCallback","useMemo","jsxs","Option","IconButton","Icon","Checkbox","getColumnLabel","Switch","useWindow","useComponentCssInjection","columnList","useRef","useColumnList","queryClosest","reorderColumnItems","DragDropProvider","Input","ListBox"],"mappings":"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"}
+{"version":3,"file":"ColumnList.js","sources":["../../../../packages/vuu-table-extras/src/column-list/ColumnList.tsx"],"sourcesContent":["import {\n  Checkbox,\n  Input,\n  ListBox,\n  Option,\n  OptionProps,\n  Switch,\n} from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport {\n  ColumnDescriptor,\n  ColumnListPermissions,\n} from \"@vuu-ui/vuu-table-types\";\nimport { Icon, IconButton } from \"@vuu-ui/vuu-ui-controls\";\nimport {\n  DragDropProvider,\n  getColumnLabel,\n  reorderColumnItems,\n  useSortable,\n} from \"@vuu-ui/vuu-utils\";\nimport cx from \"clsx\";\nimport {\n  HTMLAttributes,\n  MouseEventHandler,\n  RefCallback,\n  useCallback,\n  useMemo,\n  useRef,\n} from \"react\";\nimport {\n  type ColumnItem,\n  type ColumnSearchProps,\n  useColumnList,\n} from \"./useColumnList\";\n\nimport cssColumnList from \"./ColumnList.css\";\n\nexport const classBase = \"vuuColumnList\";\nexport const classBaseListItem = \"vuuColumnListItem\";\n\nconst searchIcon = <span data-icon=\"search\" />;\nconst NO_SELECTION: string[] = [] as const;\n\nconst useSorting = (id: string, index: number, allowSort = true) => {\n  const { handleRef: sortableHandleRef, ref: sortableRef } = useSortable({\n    id,\n    index,\n  });\n\n  const noopRef = useCallback(() => {\n    // do nothing\n  }, []);\n\n  const [handleRef, ref] = useMemo(() => {\n    return allowSort ? [sortableHandleRef, sortableRef] : [noopRef, noopRef];\n  }, [allowSort, noopRef, sortableHandleRef, sortableRef]);\n\n  return {\n    handleRef,\n    ref,\n  };\n};\n\nexport interface ColumnListProps\n  extends Pick<ColumnSearchProps, \"columnItems\" | \"onChange\">,\n    Omit<HTMLAttributes<HTMLDivElement>, \"onChange\"> {\n  onNavigateToColumn?: (columnName: string) => void;\n  onReorderColumnItems?: (columnItems: ColumnItem[]) => void;\n  permissions?: ColumnListPermissions;\n}\n\nconst defaultPermissions: ColumnListPermissions = {\n  allowColumnSearch: false,\n  allowHideColumns: true,\n  allowRemoveColumns: true,\n  allowReorderColumns: true,\n};\n\nconst ColumnListItem = ({\n  className: classNameProp,\n  index,\n  item,\n  permissions: { allowHideColumns, allowRemoveColumns, allowReorderColumns },\n  ...optionProps\n}: OptionProps & {\n  index: number;\n  item: ColumnItem;\n  permissions: ColumnListPermissions;\n}) => {\n  const hideOnly = allowHideColumns && !allowRemoveColumns;\n  const removeOnly = !allowHideColumns && allowRemoveColumns;\n  const hideAndRemove = allowHideColumns && allowRemoveColumns;\n\n  const { handleRef, ref } = useSorting(item.name, index, allowReorderColumns);\n  return (\n    <Option\n      {...optionProps}\n      className={cx(classNameProp, classBaseListItem)}\n      data-name={item.name}\n      id={item.name}\n      ref={ref}\n    >\n      {allowReorderColumns ? (\n        <IconButton\n          data-embedded\n          appearance=\"transparent\"\n          icon=\"draggable\"\n          ref={handleRef}\n          size={16}\n        />\n      ) : null}\n      {item?.isCalculated ? <Icon name=\"function\" /> : null}\n      {hideAndRemove || hideOnly || removeOnly ? (\n        <Checkbox\n          className={`${classBase}-checkBox`}\n          checked={hideOnly ? item?.hidden !== true : item?.subscribed}\n        />\n      ) : null}\n      <span className={`${classBase}-text`}>\n        {getColumnLabel(item as ColumnDescriptor)}\n      </span>\n      {hideAndRemove ? (\n        <Switch\n          className={`${classBase}-switch`}\n          checked={item?.hidden !== true}\n          disabled={item?.subscribed !== true}\n        />\n      ) : null}\n    </Option>\n  );\n};\n\nexport const ColumnList = ({\n  className,\n  columnItems,\n  onChange,\n  onNavigateToColumn,\n  onReorderColumnItems,\n  permissions: {\n    allowColumnSearch = defaultPermissions.allowColumnSearch,\n    allowHideColumns = defaultPermissions.allowHideColumns,\n    allowRemoveColumns = defaultPermissions.allowRemoveColumns,\n    allowReorderColumns = defaultPermissions.allowReorderColumns,\n  } = defaultPermissions,\n  ...htmlAttributes\n}: ColumnListProps) => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-column-list\",\n    css: cssColumnList,\n    window: targetWindow,\n  });\n  const listRef = useRef<HTMLDivElement>(null);\n  const permissions = useMemo(\n    () => ({\n      allowHideColumns,\n      allowRemoveColumns,\n      allowReorderColumns,\n    }),\n    [allowHideColumns, allowRemoveColumns, allowReorderColumns],\n  );\n\n  const {\n    onChangeListItem,\n    onChangeSearchInput,\n    searchState,\n    visibleColumnItems,\n  } = useColumnList({\n    classBase,\n    classBaseListItem,\n    columnItems,\n    permissions,\n    onChange,\n  });\n\n  const handleClick = useCallback<MouseEventHandler>(\n    (evt) => {\n      const targetEl = evt.target as HTMLElement;\n      if (targetEl.classList.contains(\"vuuColumnList-text\")) {\n        const listItemEl = targetEl.closest(\".vuuListItem\") as HTMLElement;\n        if (listItemEl?.dataset.name) {\n          onNavigateToColumn?.(listItemEl.dataset.name);\n        }\n      }\n    },\n    [onNavigateToColumn],\n  );\n\n  const handleDragEnd = useCallback(() => {\n    setTimeout(() => {\n      const listItems =\n        listRef.current?.querySelectorAll<HTMLDivElement>(\".saltOption\");\n      if (listItems) {\n        const orderedIds = Array.from(listItems).map(({ id }) => id);\n        onReorderColumnItems?.(reorderColumnItems(columnItems, orderedIds));\n      }\n    }, 300);\n  }, [columnItems, onReorderColumnItems]);\n\n  const searchCallbackRef = useCallback<RefCallback<HTMLElement>>((el) => {\n    setTimeout(() => {\n      el?.querySelector(\"input\")?.focus();\n    }, 100);\n  }, []);\n\n  return (\n    <DragDropProvider onDragEnd={handleDragEnd}>\n      <div\n        {...htmlAttributes}\n        className={cx(classBase, className, {\n          [`${classBase}-withColumnNavigation`]:\n            typeof onNavigateToColumn === \"function\",\n        })}\n      >\n        {allowColumnSearch ? (\n          <form className={`${classBase}-search`} role=\"search\">\n            <Input\n              // inputProps={{ onKeyDown }}\n              startAdornment={searchIcon}\n              placeholder=\"Find column\"\n              ref={searchCallbackRef}\n              value={searchState.searchText}\n              onChange={onChangeSearchInput}\n            />\n          </form>\n        ) : null}\n        <div className={`${classBase}-header`}>\n          <span>Column Name</span>\n        </div>\n        {allowHideColumns && allowRemoveColumns ? (\n          <div className={`${classBase}-colHeadings`}>\n            <span>Column subscription</span>\n            <span>Visibility</span>\n          </div>\n        ) : null}\n        <ListBox ref={listRef} selected={NO_SELECTION}>\n          {visibleColumnItems.map((columnItem, index) => (\n            <ColumnListItem\n              item={columnItem}\n              index={index}\n              key={columnItem.name}\n              onChange={onChangeListItem}\n              onClick={handleClick}\n              permissions={permissions}\n              value={columnItem}\n            />\n          ))}\n        </ListBox>\n      </div>\n    </DragDropProvider>\n  );\n};\n"],"names":["jsx","useSortable","useCallback","useMemo","jsxs","Option","IconButton","Icon","Checkbox","getColumnLabel","Switch","useWindow","useComponentCssInjection","cssColumnList","useRef","useColumnList","reorderColumnItems","DragDropProvider","Input","ListBox"],"mappings":"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"}

package/cjs/column-list/useColumnList.js

@@ -0,0 +1,72 @@
+'use strict';
+
+var react = require('react');
+var vuuUtils = require('@vuu-ui/vuu-utils');
+
+const useColumnList = ({
+  classBase,
+  classBaseListItem,
+  columnItems,
+  onChange,
+  permissions: { allowHideColumns, allowRemoveColumns }
+}) => {
+  const [searchState, setSearchState] = react.useState({ searchText: "" });
+  const visibleColumnsRef = react.useRef(void 0);
+  const hideOnly = react.useMemo(
+    () => allowHideColumns && !allowRemoveColumns,
+    [allowHideColumns, allowRemoveColumns]
+  );
+  react.useMemo(() => {
+    if (searchState.searchText) {
+      visibleColumnsRef.current = columnItems.filter(
+        (item) => item.name.indexOf(searchState.searchText) !== -1
+      );
+    }
+  }, [columnItems, searchState.searchText]);
+  const handleChangeSearchInput = react.useCallback(
+    (evt) => {
+      const { value } = evt.target;
+      if (value) {
+        visibleColumnsRef.current = columnItems.filter(
+          (item) => item.name.indexOf(value) !== -1
+        );
+      } else {
+        visibleColumnsRef.current = void 0;
+      }
+      setSearchState({
+        searchText: value
+      });
+    },
+    [columnItems]
+  );
+  const handleChangeListItem = react.useCallback(
+    ({ target }) => {
+      const input = target;
+      const listItem = vuuUtils.queryClosest(target, `.${classBaseListItem}`);
+      if (listItem) {
+        const {
+          dataset: { name }
+        } = listItem;
+        if (name) {
+          const saltCheckbox = vuuUtils.queryClosest(target, `.${classBase}-checkBox`);
+          const saltSwitch = vuuUtils.queryClosest(target, `.${classBase}-switch`);
+          if (saltCheckbox && !hideOnly) {
+            onChange(name, "subscribed", input.checked);
+          } else if (saltSwitch || hideOnly) {
+            onChange(name, "hidden", input.checked === false);
+          }
+        }
+      }
+    },
+    [classBase, classBaseListItem, hideOnly, onChange]
+  );
+  return {
+    onChangeSearchInput: handleChangeSearchInput,
+    onChangeListItem: handleChangeListItem,
+    searchState,
+    visibleColumnItems: visibleColumnsRef.current ?? columnItems
+  };
+};
+
+exports.useColumnList = useColumnList;
+//# sourceMappingURL=useColumnList.js.map

package/cjs/column-list/useColumnList.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useColumnList.js","sources":["../../../../packages/vuu-table-extras/src/column-list/useColumnList.ts"],"sourcesContent":["import {\n  ColumnDescriptor,\n  ColumnListPermissions,\n} from \"@vuu-ui/vuu-table-types\";\nimport {\n  FormEventHandler,\n  SyntheticEvent,\n  useCallback,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\nimport { queryClosest } from \"@vuu-ui/vuu-utils\";\n\nexport type ColumnChangeHandler = (\n  columnName: string,\n  propertyName: keyof ColumnDescriptor | \"subscribed\",\n  value: string | number | boolean,\n) => void;\n\nexport type ColumnItem = Pick<\n  ColumnDescriptor,\n  \"hidden\" | \"label\" | \"name\" | \"serverDataType\"\n> & {\n  isCalculated: boolean;\n  subscribed: boolean;\n};\n\nexport interface ColumnSearchProps {\n  classBase: string;\n  classBaseListItem: string;\n  columnItems: ColumnItem[];\n  onChange: ColumnChangeHandler;\n  permissions: ColumnListPermissions;\n}\n\nexport const useColumnList = ({\n  classBase,\n  classBaseListItem,\n  columnItems,\n  onChange,\n  permissions: { allowHideColumns, allowRemoveColumns },\n}: ColumnSearchProps) => {\n  const [searchState, setSearchState] = useState<{\n    searchText: string;\n  }>({ searchText: \"\" });\n\n  const visibleColumnsRef = useRef<ColumnItem[] | undefined>(undefined);\n\n  const hideOnly = useMemo(\n    () => allowHideColumns && !allowRemoveColumns,\n    [allowHideColumns, allowRemoveColumns],\n  );\n\n  useMemo(() => {\n    if (searchState.searchText) {\n      visibleColumnsRef.current = columnItems.filter(\n        (item) => item.name.indexOf(searchState.searchText) !== -1,\n      );\n    }\n  }, [columnItems, searchState.searchText]);\n\n  const handleChangeSearchInput = useCallback<FormEventHandler>(\n    (evt) => {\n      const { value } = evt.target as HTMLInputElement;\n      if (value) {\n        visibleColumnsRef.current = columnItems.filter(\n          (item) => item.name.indexOf(value) !== -1,\n        );\n      } else {\n        visibleColumnsRef.current = undefined;\n      }\n      setSearchState({\n        searchText: value,\n      });\n    },\n    [columnItems],\n  );\n\n  const handleChangeListItem = useCallback(\n    ({ target }: SyntheticEvent) => {\n      const input = target as HTMLInputElement;\n      const listItem = queryClosest(target, `.${classBaseListItem}`);\n      if (listItem) {\n        const {\n          dataset: { name },\n        } = listItem;\n        if (name) {\n          const saltCheckbox = queryClosest(target, `.${classBase}-checkBox`);\n          const saltSwitch = queryClosest(target, `.${classBase}-switch`);\n\n          if (saltCheckbox && !hideOnly) {\n            onChange(name, \"subscribed\", input.checked);\n          } else if (saltSwitch || hideOnly) {\n            onChange(name, \"hidden\", input.checked === false);\n          }\n        }\n      }\n    },\n    [classBase, classBaseListItem, hideOnly, onChange],\n  );\n\n  return {\n    onChangeSearchInput: handleChangeSearchInput,\n    onChangeListItem: handleChangeListItem,\n    searchState,\n    visibleColumnItems: visibleColumnsRef.current ?? columnItems,\n  };\n};\n"],"names":["useState","useRef","useMemo","useCallback","queryClosest"],"mappings":";;;;;AAoCO,MAAM,gBAAgB,CAAC;AAAA,EAC5B,SAAA;AAAA,EACA,iBAAA;AAAA,EACA,WAAA;AAAA,EACA,QAAA;AAAA,EACA,WAAA,EAAa,EAAE,gBAAA,EAAkB,kBAAmB;AACtD,CAAyB,KAAA;AACvB,EAAM,MAAA,CAAC,aAAa,cAAc,CAAA,GAAIA,eAEnC,EAAE,UAAA,EAAY,IAAI,CAAA;AAErB,EAAM,MAAA,iBAAA,GAAoBC,aAAiC,KAAS,CAAA,CAAA;AAEpE,EAAA,MAAM,QAAW,GAAAC,aAAA;AAAA,IACf,MAAM,oBAAoB,CAAC,kBAAA;AAAA,IAC3B,CAAC,kBAAkB,kBAAkB;AAAA,GACvC;AAEA,EAAAA,aAAA,CAAQ,MAAM;AACZ,IAAA,IAAI,YAAY,UAAY,EAAA;AAC1B,MAAA,iBAAA,CAAkB,UAAU,WAAY,CAAA,MAAA;AAAA,QACtC,CAAC,IAAS,KAAA,IAAA,CAAK,KAAK,OAAQ,CAAA,WAAA,CAAY,UAAU,CAAM,KAAA,CAAA;AAAA,OAC1D;AAAA;AACF,GACC,EAAA,CAAC,WAAa,EAAA,WAAA,CAAY,UAAU,CAAC,CAAA;AAExC,EAAA,MAAM,uBAA0B,GAAAC,iBAAA;AAAA,IAC9B,CAAC,GAAQ,KAAA;AACP,MAAM,MAAA,EAAE,KAAM,EAAA,GAAI,GAAI,CAAA,MAAA;AACtB,MAAA,IAAI,KAAO,EAAA;AACT,QAAA,iBAAA,CAAkB,UAAU,WAAY,CAAA,MAAA;AAAA,UACtC,CAAC,IAAS,KAAA,IAAA,CAAK,IAAK,CAAA,OAAA,CAAQ,KAAK,CAAM,KAAA,CAAA;AAAA,SACzC;AAAA,OACK,MAAA;AACL,QAAA,iBAAA,CAAkB,OAAU,GAAA,KAAA,CAAA;AAAA;AAE9B,MAAe,cAAA,CAAA;AAAA,QACb,UAAY,EAAA;AAAA,OACb,CAAA;AAAA,KACH;AAAA,IACA,CAAC,WAAW;AAAA,GACd;AAEA,EAAA,MAAM,oBAAuB,GAAAA,iBAAA;AAAA,IAC3B,CAAC,EAAE,MAAA,EAA6B,KAAA;AAC9B,MAAA,MAAM,KAAQ,GAAA,MAAA;AACd,MAAA,MAAM,QAAW,GAAAC,qBAAA,CAAa,MAAQ,EAAA,CAAA,CAAA,EAAI,iBAAiB,CAAE,CAAA,CAAA;AAC7D,MAAA,IAAI,QAAU,EAAA;AACZ,QAAM,MAAA;AAAA,UACJ,OAAA,EAAS,EAAE,IAAK;AAAA,SACd,GAAA,QAAA;AACJ,QAAA,IAAI,IAAM,EAAA;AACR,UAAA,MAAM,YAAe,GAAAA,qBAAA,CAAa,MAAQ,EAAA,CAAA,CAAA,EAAI,SAAS,CAAW,SAAA,CAAA,CAAA;AAClE,UAAA,MAAM,UAAa,GAAAA,qBAAA,CAAa,MAAQ,EAAA,CAAA,CAAA,EAAI,SAAS,CAAS,OAAA,CAAA,CAAA;AAE9D,UAAI,IAAA,YAAA,IAAgB,CAAC,QAAU,EAAA;AAC7B,YAAS,QAAA,CAAA,IAAA,EAAM,YAAc,EAAA,KAAA,CAAM,OAAO,CAAA;AAAA,WAC5C,MAAA,IAAW,cAAc,QAAU,EAAA;AACjC,YAAA,QAAA,CAAS,IAAM,EAAA,QAAA,EAAU,KAAM,CAAA,OAAA,KAAY,KAAK,CAAA;AAAA;AAClD;AACF;AACF,KACF;AAAA,IACA,CAAC,SAAA,EAAW,iBAAmB,EAAA,QAAA,EAAU,QAAQ;AAAA,GACnD;AAEA,EAAO,OAAA;AAAA,IACL,mBAAqB,EAAA,uBAAA;AAAA,IACrB,gBAAkB,EAAA,oBAAA;AAAA,IAClB,WAAA;AAAA,IACA,kBAAA,EAAoB,kBAAkB,OAAW,IAAA;AAAA,GACnD;AACF;;;;"}

package/cjs/index.js

@@ -40,6 +40,8 @@ exports.DropdownCell = DropdownCell.DropdownCell;
 exports.LookupCell = LookupCell.LookupCell;
 exports.PctProgressCell = PctProgressCell.PctProgressCell;
 exports.ColumnList = ColumnList.ColumnList;
+exports.classBase = ColumnList.classBase;
+exports.classBaseListItem = ColumnList.classBaseListItem;
 exports.ColumnMenu = ColumnMenu.ColumnMenu;
 exports.useColumnActions = useColumnActions.useColumnActions;
 exports.ColumnSettingsPanel = ColumnSettingsPanel.ColumnSettingsPanel;

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/table-column-settings/TableSettingsPanel.css.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var tableSettingsPanelCss = ".vuuTableSettingsPanel {\n    --vuu-svg-text-strikethrough: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 48 24\"><path d=\"M28.3333 9.33334C28.8867 9.33334 29.3333 8.88668 29.3333 8.33334C29.3333 7.78001 28.8867 7.33334 28.3333 7.33334H20.26L22.26 9.33334H23.48L23.1133 10.1867L24.5067 11.58L25.4733 9.33334H28.3333ZM27.6267 16.5867L18.7467 7.70668C18.4867 7.44668 18.0667 7.44668 17.8067 7.70668C17.5467 7.96668 17.5467 8.38668 17.8067 8.64668L21.98 12.82L20.88 15.38C20.62 15.9933 21.0667 16.6667 21.7267 16.6667C22.0933 16.6667 22.4267 16.4467 22.5733 16.1067L23.38 14.22L26.68 17.52C26.94 17.78 27.36 17.78 27.62 17.52C27.8867 17.2667 27.8867 16.8467 27.6267 16.5867Z\"/></svg>');\n    --vuu-svg-text-Tt: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 48 24\"><path d=\"M17.6667 7.66666C17.6667 8.21999 18.1133 8.66666 18.6667 8.66666H21V15.6667C21 16.22 21.4467 16.6667 22 16.6667C22.5533 16.6667 23 16.22 23 15.6667V8.66666H25.3333C25.8867 8.66666 26.3333 8.21999 26.3333 7.66666C26.3333 7.11332 25.8867 6.66666 25.3333 6.66666H18.6667C18.1133 6.66666 17.6667 7.11332 17.6667 7.66666ZM29.3333 9.99999H25.3333C24.78 9.99999 24.3333 10.4467 24.3333 11C24.3333 11.5533 24.78 12 25.3333 12H26.3333V15.6667C26.3333 16.22 26.78 16.6667 27.3333 16.6667C27.8867 16.6667 28.3333 16.22 28.3333 15.6667V12H29.3333C29.8867 12 30.3333 11.5533 30.3333 11C30.3333 10.4467 29.8867 9.99999 29.3333 9.99999Z\" /></svg>');\n    --vuu-svg-text-T: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 48 24\"><path d=\"M19.3333 7.66666C19.3333 8.21999 19.78 8.66666 20.3333 8.66666H23V15.6667C23 16.22 23.4467 16.6667 24 16.6667C24.5533 16.6667 25 16.22 25 15.6667V8.66666H27.6667C28.22 8.66666 28.6667 8.21999 28.6667 7.66666C28.6667 7.11332 28.22 6.66666 27.6667 6.66666H20.3333C19.78 6.66666 19.3333 7.11332 19.3333 7.66666Z\"/></svg>');\n    --vuu-svg-stripes: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\"><rect x=\"2\" y=\"2\" width=\"12\" height=\"2\" rx=\"0.3\"/><rect x=\"2\" y=\"5\" width=\"12\" height=\"2\" rx=\"0.3\"/><rect x=\"2\" y=\"8\" width=\"12\" height=\"2\" rx=\"0.3\"/><rect x=\"2\" y=\"11\" width=\"12\" height=\"2\" rx=\"0.3\"/></svg>');\n    --vuu-svg-row-lines: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\"><rect x=\"2\" y=\"3\" width=\"12\" height=\"1\" rx=\"0.3\" /><rect x=\"2\" y=\"6\" width=\"12\" height=\"1\" rx=\"0.3\" /><rect x=\"2\" y=\"9\" width=\"12\" height=\"1\" rx=\"0.3\" /><rect x=\"2\" y=\"12\" width=\"12\" height=\"1\" rx=\"0.3\"/></svg>');\n    --vuu-svg-col-lines: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\"><rect x=\"3\" y=\"14\" width=\"12\" height=\"1\" rx=\"0.3\" transform=\"rotate(-90 3 14)\"/><rect x=\"6\" y=\"14\" width=\"12\" height=\"1\" rx=\"0.3\" transform=\"rotate(-90 6 14)\"/><rect x=\"9\" y=\"14\" width=\"12\" height=\"1\" rx=\"0.3\" transform=\"rotate(-90 9 14)\"/><rect x=\"12\" y=\"14\" width=\"12\" height=\"1\" rx=\"0.3\" transform=\"rotate(-90 12 14)\"/></svg>');\n\n    display: flex;\n    flex-direction: column;\n    gap: 24px;\n    height: 100%;\n    max-width: 254px;\n    padding: 24px 2px 0 2px;\n}\n\n\n.vuuTableSettingsPanel [data-icon=\"text-strikethrough\"]{\n    --vuu-icon-svg: var(--vuu-svg-text-strikethrough);\n}\n.vuuTableSettingsPanel [data-icon=\"text-Tt\"]{\n    --vuu-icon-svg: var(--vuu-svg-text-Tt);\n}\n.vuuTableSettingsPanel [data-icon=\"text-T\"]{\n    --vuu-icon-svg: var(--vuu-svg-text-T);\n}\n.vuuTableSettingsPanel [data-icon=\"col-lines\"]{\n    --vuu-icon-svg: var(--vuu-svg-col-lines);\n}\n.vuuTableSettingsPanel [data-icon=\"row-lines\"]{\n    --vuu-icon-svg: var(--vuu-svg-row-lines);\n}\n.vuuTableSettingsPanel [data-icon=\"row-striping\"]{\n    --vuu-icon-svg: var(--vuu-svg-stripes);\n}\n\n.vuuTableSettingsPanel-header {\n    border-top: solid 2px var(--vuu-color-gray-30);\n    font-size: 14px;\n    font-weight: 600;\n    padding-top: 24px;\n}\n\n.vuuTableSettingsPanel .vuuColumnList {\n    flex-grow: 1;\n    flex-shrink:  1;\n    flex-basis: 0;\n}\n\n.vuuTableSettingsPanel-calculatedButtonbar {\n    --vuu-icon-size: 16px;\n    --saltButton-height: 24px;\n    --saltButton-width: 24px;\n    align-items: center;\n    display: flex;\n    flex: 0 0 32px;\n    gap: 12px;\n}\n\n\n\n\n\n\n";
+var tableSettingsPanelCss = ".vuuTableSettingsPanel {\n    --vuuScrollable-size: 6px;\n    --vuu-svg-text-strikethrough: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 48 24\"><path d=\"M28.3333 9.33334C28.8867 9.33334 29.3333 8.88668 29.3333 8.33334C29.3333 7.78001 28.8867 7.33334 28.3333 7.33334H20.26L22.26 9.33334H23.48L23.1133 10.1867L24.5067 11.58L25.4733 9.33334H28.3333ZM27.6267 16.5867L18.7467 7.70668C18.4867 7.44668 18.0667 7.44668 17.8067 7.70668C17.5467 7.96668 17.5467 8.38668 17.8067 8.64668L21.98 12.82L20.88 15.38C20.62 15.9933 21.0667 16.6667 21.7267 16.6667C22.0933 16.6667 22.4267 16.4467 22.5733 16.1067L23.38 14.22L26.68 17.52C26.94 17.78 27.36 17.78 27.62 17.52C27.8867 17.2667 27.8867 16.8467 27.6267 16.5867Z\"/></svg>');\n    --vuu-svg-text-Tt: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 48 24\"><path d=\"M17.6667 7.66666C17.6667 8.21999 18.1133 8.66666 18.6667 8.66666H21V15.6667C21 16.22 21.4467 16.6667 22 16.6667C22.5533 16.6667 23 16.22 23 15.6667V8.66666H25.3333C25.8867 8.66666 26.3333 8.21999 26.3333 7.66666C26.3333 7.11332 25.8867 6.66666 25.3333 6.66666H18.6667C18.1133 6.66666 17.6667 7.11332 17.6667 7.66666ZM29.3333 9.99999H25.3333C24.78 9.99999 24.3333 10.4467 24.3333 11C24.3333 11.5533 24.78 12 25.3333 12H26.3333V15.6667C26.3333 16.22 26.78 16.6667 27.3333 16.6667C27.8867 16.6667 28.3333 16.22 28.3333 15.6667V12H29.3333C29.8867 12 30.3333 11.5533 30.3333 11C30.3333 10.4467 29.8867 9.99999 29.3333 9.99999Z\" /></svg>');\n    --vuu-svg-text-T: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 48 24\"><path d=\"M19.3333 7.66666C19.3333 8.21999 19.78 8.66666 20.3333 8.66666H23V15.6667C23 16.22 23.4467 16.6667 24 16.6667C24.5533 16.6667 25 16.22 25 15.6667V8.66666H27.6667C28.22 8.66666 28.6667 8.21999 28.6667 7.66666C28.6667 7.11332 28.22 6.66666 27.6667 6.66666H20.3333C19.78 6.66666 19.3333 7.11332 19.3333 7.66666Z\"/></svg>');\n    --vuu-svg-stripes: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\"><rect x=\"2\" y=\"2\" width=\"12\" height=\"2\" rx=\"0.3\"/><rect x=\"2\" y=\"5\" width=\"12\" height=\"2\" rx=\"0.3\"/><rect x=\"2\" y=\"8\" width=\"12\" height=\"2\" rx=\"0.3\"/><rect x=\"2\" y=\"11\" width=\"12\" height=\"2\" rx=\"0.3\"/></svg>');\n    --vuu-svg-row-lines: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\"><rect x=\"2\" y=\"3\" width=\"12\" height=\"1\" rx=\"0.3\" /><rect x=\"2\" y=\"6\" width=\"12\" height=\"1\" rx=\"0.3\" /><rect x=\"2\" y=\"9\" width=\"12\" height=\"1\" rx=\"0.3\" /><rect x=\"2\" y=\"12\" width=\"12\" height=\"1\" rx=\"0.3\"/></svg>');\n    --vuu-svg-col-lines: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\"><rect x=\"3\" y=\"14\" width=\"12\" height=\"1\" rx=\"0.3\" transform=\"rotate(-90 3 14)\"/><rect x=\"6\" y=\"14\" width=\"12\" height=\"1\" rx=\"0.3\" transform=\"rotate(-90 6 14)\"/><rect x=\"9\" y=\"14\" width=\"12\" height=\"1\" rx=\"0.3\" transform=\"rotate(-90 9 14)\"/><rect x=\"12\" y=\"14\" width=\"12\" height=\"1\" rx=\"0.3\" transform=\"rotate(-90 12 14)\"/></svg>');\n\n    display: flex;\n    flex-direction: column;\n    gap: 24px;\n    height: 100%;\n    max-width: 254px;\n    padding: 12px 2px var(--salt-spacing-200) 2px;\n}\n\n\n.vuuTableSettingsPanel [data-icon=\"text-strikethrough\"]{\n    --vuu-icon-svg: var(--vuu-svg-text-strikethrough);\n}\n.vuuTableSettingsPanel [data-icon=\"text-Tt\"]{\n    --vuu-icon-svg: var(--vuu-svg-text-Tt);\n}\n.vuuTableSettingsPanel [data-icon=\"text-T\"]{\n    --vuu-icon-svg: var(--vuu-svg-text-T);\n}\n.vuuTableSettingsPanel [data-icon=\"col-lines\"]{\n    --vuu-icon-svg: var(--vuu-svg-col-lines);\n}\n.vuuTableSettingsPanel [data-icon=\"row-lines\"]{\n    --vuu-icon-svg: var(--vuu-svg-row-lines);\n}\n.vuuTableSettingsPanel [data-icon=\"row-striping\"]{\n    --vuu-icon-svg: var(--vuu-svg-stripes);\n}\n\n.vuuTableSettingsPanel-header {\n    border-top: solid 2px var(--vuu-color-gray-30);\n    font-size: 14px;\n    font-weight: 600;\n    padding-top: 24px;\n}\n\n.vuuTableSettingsPanel-columnListContainer {\n\n    flex-grow: 1;\n    flex-shrink:  1;\n    flex-basis: 0;\n    position: relative;\n    overflow: auto;\n    .vuuColumnList {\n        height: 100%;\n    }\n}\n\n.vuuTableSettingsPanel-calculatedButtonbar {\n    --vuu-icon-size: 16px;\n    --saltButton-height: 24px;\n    --saltButton-width: 24px;\n    align-items: center;\n    display: flex;\n    flex: 0 0 32px;\n    gap: 12px;\n}\n\n\n\n\n\n\n";
 
 module.exports = tableSettingsPanelCss;
 //# sourceMappingURL=TableSettingsPanel.css.js.map

package/cjs/table-column-settings/TableSettingsPanel.js

@@ -7,6 +7,7 @@ var window = require('@salt-ds/window');
 var ColumnList = require('../column-list/ColumnList.js');
 var useTableSettings = require('./useTableSettings.js');
 var vuuUiControls = require('@vuu-ui/vuu-ui-controls');
+var cx = require('clsx');
 var TableSettingsPanel$1 = require('./TableSettingsPanel.css.js');
 
 const classBase = "vuuTableSettingsPanel";
@@ -117,7 +118,7 @@ const TableSettingsPanel = ({
         )
       ] })
     ] }) : null,
-    /* @__PURE__ */ jsxRuntime.jsx(
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: cx(`${classBase}-columnListContainer`, "vuuScrollable"), children: /* @__PURE__ */ jsxRuntime.jsx(
       ColumnList.ColumnList,
       {
         columnItems,
@@ -126,7 +127,7 @@ const TableSettingsPanel = ({
         onNavigateToColumn,
         onReorderColumnItems
       }
-    ),
+    ) }),
     allowCalculatedColumns ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `${classBase}-calculatedButtonbar`, children: [
       /* @__PURE__ */ jsxRuntime.jsx(core.Button, { "data-icon": "plus", onClick: onAddCalculatedColumn }),
       /* @__PURE__ */ jsxRuntime.jsx("span", { className: `${classBase}-calculatedLabel`, children: "Add calculated column" })

package/cjs/table-column-settings/TableSettingsPanel.js.map

@@ -1 +1 @@
-{"version":3,"file":"TableSettingsPanel.js","sources":["../../../../packages/vuu-table-extras/src/table-column-settings/TableSettingsPanel.tsx"],"sourcesContent":["import {\n  Button,\n  FormField,\n  FormFieldLabel,\n  ToggleButton,\n  ToggleButtonGroup,\n} from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport {\n  TableSettingsPermissions,\n  TableSettingsProps,\n} from \"@vuu-ui/vuu-table-types\";\nimport { ColumnList } from \"../column-list\";\nimport { useTableSettings } from \"./useTableSettings\";\nimport { Icon } from \"@vuu-ui/vuu-ui-controls\";\nimport { VuuInput } from \"@vuu-ui/vuu-ui-controls\";\n\nimport tableSettingsPanelCss from \"./TableSettingsPanel.css\";\n\nconst classBase = \"vuuTableSettingsPanel\";\n\nexport const defaultTableSettingsPermissions: Readonly<TableSettingsPermissions> =\n  {\n    allowColumnLabelCase: true,\n    allowColumnDefaultWidth: true,\n    allowGridSeparators: true,\n    allowReorderColumns: true,\n    allowRemoveColumns: true,\n    allowHideColumns: true,\n    allowCalculatedColumns: true,\n  };\n\n/**\n  The TableSettingsPanel assumes 'ownership' of the tableSettings.\n  It updates the settings in state locally and notifies caller of\n  every change via onChange callback\n */\nexport const TableSettingsPanel = ({\n  availableColumns,\n  onAddCalculatedColumn,\n  onConfigChange,\n  onDataSourceConfigChange,\n  onNavigateToColumn,\n  tableConfig: tableConfigProp,\n  permissions = defaultTableSettingsPermissions,\n}: TableSettingsProps) => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-table-settings-panel\",\n    css: tableSettingsPanelCss,\n    window: targetWindow,\n  });\n\n  const {\n    columnItems,\n    columnLabelsValue,\n    onChangeColumnLabels,\n    onChangeTableAttribute,\n    onReorderColumnItems,\n    onColumnChange,\n    onCommitColumnWidth,\n    tableConfig,\n  } = useTableSettings({\n    availableColumns,\n    onConfigChange,\n    onDataSourceConfigChange,\n    tableConfig: tableConfigProp,\n  });\n\n  const {\n    allowColumnLabelCase = true,\n    allowColumnDefaultWidth = true,\n    allowGridSeparators = true,\n    allowCalculatedColumns = true,\n    ...columnListPermissions\n  } = permissions;\n\n  return (\n    <div className={classBase}>\n      {allowColumnLabelCase ||\n      allowColumnDefaultWidth ||\n      allowGridSeparators ? (\n        <div className={`${classBase}-header`}>\n          <span>Column Settings</span>\n        </div>\n      ) : null}\n\n      {allowColumnDefaultWidth ? (\n        <FormField>\n          <FormFieldLabel>Column Width</FormFieldLabel>\n          <VuuInput\n            className=\"vuuInput\"\n            data-embedded\n            onCommit={onCommitColumnWidth}\n          />\n        </FormField>\n      ) : null}\n\n      {allowColumnLabelCase ? (\n        <FormField>\n          <FormFieldLabel>Column Labels</FormFieldLabel>\n          <ToggleButtonGroup\n            className=\"vuuToggleButtonGroup\"\n            onChange={onChangeColumnLabels}\n            value={columnLabelsValue}\n          >\n            <ToggleButton className=\"vuuIconToggleButton\" value={0}>\n              <Icon name=\"text-strikethrough\" size={48} />\n            </ToggleButton>\n            <ToggleButton className=\"vuuIconToggleButton\" value={1}>\n              <Icon name=\"text-Tt\" size={48} />\n            </ToggleButton>\n            <ToggleButton className=\"vuuIconToggleButton\" value={2}>\n              <Icon name=\"text-T\" size={48} />\n            </ToggleButton>\n          </ToggleButtonGroup>\n        </FormField>\n      ) : null}\n\n      {allowGridSeparators ? (\n        <FormField>\n          <FormFieldLabel>Grid separators</FormFieldLabel>\n          <div className=\"saltToggleButtonGroup vuuStateButtonGroup saltToggleButtonGroup-horizontal\">\n            <ToggleButton\n              selected={tableConfig.zebraStripes ?? false}\n              onChange={onChangeTableAttribute}\n              value=\"zebraStripes\"\n            >\n              <Icon name=\"row-striping\" size={16} />\n            </ToggleButton>\n            <ToggleButton\n              selected={tableConfig.rowSeparators ?? false}\n              onChange={onChangeTableAttribute}\n              value=\"rowSeparators\"\n            >\n              <Icon name=\"row-lines\" size={16} />\n            </ToggleButton>\n            <ToggleButton\n              selected={tableConfig.columnSeparators ?? false}\n              onChange={onChangeTableAttribute}\n              value=\"columnSeparators\"\n            >\n              <Icon name=\"col-lines\" size={16} />\n            </ToggleButton>\n          </div>\n        </FormField>\n      ) : null}\n\n      <ColumnList\n        columnItems={columnItems}\n        permissions={columnListPermissions}\n        onChange={onColumnChange}\n        onNavigateToColumn={onNavigateToColumn}\n        onReorderColumnItems={onReorderColumnItems}\n      />\n\n      {allowCalculatedColumns ? (\n        <div className={`${classBase}-calculatedButtonbar`}>\n          <Button data-icon=\"plus\" onClick={onAddCalculatedColumn} />\n          <span className={`${classBase}-calculatedLabel`}>\n            Add calculated column\n          </span>\n        </div>\n      ) : null}\n    </div>\n  );\n};\n"],"names":["useWindow","useComponentCssInjection","tableSettingsPanelCss","useTableSettings","jsxs","jsx","FormField","FormFieldLabel","VuuInput","ToggleButtonGroup","ToggleButton","Icon","ColumnList","Button"],"mappings":"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"}
+{"version":3,"file":"TableSettingsPanel.js","sources":["../../../../packages/vuu-table-extras/src/table-column-settings/TableSettingsPanel.tsx"],"sourcesContent":["import {\n  Button,\n  FormField,\n  FormFieldLabel,\n  ToggleButton,\n  ToggleButtonGroup,\n} from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport {\n  TableSettingsPermissions,\n  TableSettingsProps,\n} from \"@vuu-ui/vuu-table-types\";\nimport { ColumnList } from \"../column-list\";\nimport { useTableSettings } from \"./useTableSettings\";\nimport { Icon } from \"@vuu-ui/vuu-ui-controls\";\nimport { VuuInput } from \"@vuu-ui/vuu-ui-controls\";\nimport cx from \"clsx\";\n\nimport tableSettingsPanelCss from \"./TableSettingsPanel.css\";\n\nconst classBase = \"vuuTableSettingsPanel\";\n\nexport const defaultTableSettingsPermissions: Readonly<TableSettingsPermissions> =\n  {\n    allowColumnLabelCase: true,\n    allowColumnDefaultWidth: true,\n    allowGridSeparators: true,\n    allowReorderColumns: true,\n    allowRemoveColumns: true,\n    allowHideColumns: true,\n    allowCalculatedColumns: true,\n  };\n\n/**\n  The TableSettingsPanel assumes 'ownership' of the tableSettings.\n  It updates the settings in state locally and notifies caller of\n  every change via onChange callback\n */\nexport const TableSettingsPanel = ({\n  availableColumns,\n  onAddCalculatedColumn,\n  onConfigChange,\n  onDataSourceConfigChange,\n  onNavigateToColumn,\n  tableConfig: tableConfigProp,\n  permissions = defaultTableSettingsPermissions,\n}: TableSettingsProps) => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-table-settings-panel\",\n    css: tableSettingsPanelCss,\n    window: targetWindow,\n  });\n\n  const {\n    columnItems,\n    columnLabelsValue,\n    onChangeColumnLabels,\n    onChangeTableAttribute,\n    onReorderColumnItems,\n    onColumnChange,\n    onCommitColumnWidth,\n    tableConfig,\n  } = useTableSettings({\n    availableColumns,\n    onConfigChange,\n    onDataSourceConfigChange,\n    tableConfig: tableConfigProp,\n  });\n\n  const {\n    allowColumnLabelCase = true,\n    allowColumnDefaultWidth = true,\n    allowGridSeparators = true,\n    allowCalculatedColumns = true,\n    ...columnListPermissions\n  } = permissions;\n\n  return (\n    <div className={classBase}>\n      {allowColumnLabelCase ||\n      allowColumnDefaultWidth ||\n      allowGridSeparators ? (\n        <div className={`${classBase}-header`}>\n          <span>Column Settings</span>\n        </div>\n      ) : null}\n\n      {allowColumnDefaultWidth ? (\n        <FormField>\n          <FormFieldLabel>Column Width</FormFieldLabel>\n          <VuuInput\n            className=\"vuuInput\"\n            data-embedded\n            onCommit={onCommitColumnWidth}\n          />\n        </FormField>\n      ) : null}\n\n      {allowColumnLabelCase ? (\n        <FormField>\n          <FormFieldLabel>Column Labels</FormFieldLabel>\n          <ToggleButtonGroup\n            className=\"vuuToggleButtonGroup\"\n            onChange={onChangeColumnLabels}\n            value={columnLabelsValue}\n          >\n            <ToggleButton className=\"vuuIconToggleButton\" value={0}>\n              <Icon name=\"text-strikethrough\" size={48} />\n            </ToggleButton>\n            <ToggleButton className=\"vuuIconToggleButton\" value={1}>\n              <Icon name=\"text-Tt\" size={48} />\n            </ToggleButton>\n            <ToggleButton className=\"vuuIconToggleButton\" value={2}>\n              <Icon name=\"text-T\" size={48} />\n            </ToggleButton>\n          </ToggleButtonGroup>\n        </FormField>\n      ) : null}\n\n      {allowGridSeparators ? (\n        <FormField>\n          <FormFieldLabel>Grid separators</FormFieldLabel>\n          <div className=\"saltToggleButtonGroup vuuStateButtonGroup saltToggleButtonGroup-horizontal\">\n            <ToggleButton\n              selected={tableConfig.zebraStripes ?? false}\n              onChange={onChangeTableAttribute}\n              value=\"zebraStripes\"\n            >\n              <Icon name=\"row-striping\" size={16} />\n            </ToggleButton>\n            <ToggleButton\n              selected={tableConfig.rowSeparators ?? false}\n              onChange={onChangeTableAttribute}\n              value=\"rowSeparators\"\n            >\n              <Icon name=\"row-lines\" size={16} />\n            </ToggleButton>\n            <ToggleButton\n              selected={tableConfig.columnSeparators ?? false}\n              onChange={onChangeTableAttribute}\n              value=\"columnSeparators\"\n            >\n              <Icon name=\"col-lines\" size={16} />\n            </ToggleButton>\n          </div>\n        </FormField>\n      ) : null}\n\n      <div className={cx(`${classBase}-columnListContainer`, \"vuuScrollable\")}>\n        <ColumnList\n          columnItems={columnItems}\n          permissions={columnListPermissions}\n          onChange={onColumnChange}\n          onNavigateToColumn={onNavigateToColumn}\n          onReorderColumnItems={onReorderColumnItems}\n        />\n      </div>\n\n      {allowCalculatedColumns ? (\n        <div className={`${classBase}-calculatedButtonbar`}>\n          <Button data-icon=\"plus\" onClick={onAddCalculatedColumn} />\n          <span className={`${classBase}-calculatedLabel`}>\n            Add calculated column\n          </span>\n        </div>\n      ) : null}\n    </div>\n  );\n};\n"],"names":["useWindow","useComponentCssInjection","tableSettingsPanelCss","useTableSettings","jsxs","jsx","FormField","FormFieldLabel","VuuInput","ToggleButtonGroup","ToggleButton","Icon","ColumnList","Button"],"mappings":"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"}

package/cjs/table-column-settings/useTableSettings.js

@@ -5,17 +5,21 @@ var vuuUtils = require('@vuu-ui/vuu-utils');
 var react = require('react');
 
 const buildColumnItems = (availableColumns, configuredColumns) => {
-  return availableColumns.map(({ name, serverDataType }) => {
-    const configuredColumn = configuredColumns.find((col) => col.name === name);
-    return {
-      hidden: configuredColumn?.hidden,
-      isCalculated: vuuUtils.isCalculatedColumn(name),
-      label: configuredColumn?.label ?? name,
-      name,
-      serverDataType,
-      subscribed: configuredColumn !== void 0
-    };
-  });
+  return availableColumns.map(
+    ({ name, label = name, serverDataType }) => {
+      const configuredColumn = configuredColumns.find(
+        (col) => col.name === name
+      );
+      return {
+        hidden: configuredColumn?.hidden,
+        isCalculated: vuuUtils.isCalculatedColumn(name),
+        label: configuredColumn?.label ?? label,
+        name,
+        serverDataType,
+        subscribed: configuredColumn !== void 0
+      };
+    }
+  );
 };
 const useTableSettings = ({
   availableColumns: availableColumnsProp,

package/cjs/table-column-settings/useTableSettings.js.map

@@ -1 +1 @@
-{"version":3,"file":"useTableSettings.js","sources":["../../../../packages/vuu-table-extras/src/table-column-settings/useTableSettings.ts"],"sourcesContent":["import { SchemaColumn } from \"@vuu-ui/vuu-data-types\";\nimport { updateTableConfig } from \"@vuu-ui/vuu-table\";\nimport {\n  ColumnDescriptor,\n  TableConfig,\n  TableSettingsProps,\n} from \"@vuu-ui/vuu-table-types\";\nimport {\n  addColumnToSubscribedColumns,\n  queryClosest,\n  isCalculatedColumn,\n  subscribedOnly,\n  useLayoutEffectSkipFirst,\n  CommitHandler,\n  reorderColumnItems,\n} from \"@vuu-ui/vuu-utils\";\nimport {\n  MouseEvent,\n  SyntheticEvent,\n  useCallback,\n  useMemo,\n  useState,\n} from \"react\";\nimport { ColumnChangeHandler } from \"../column-list\";\n\nexport type ColumnLike = {\n  name: string;\n};\n\nexport type ColumnItem = Pick<\n  ColumnDescriptor,\n  \"hidden\" | \"label\" | \"name\" | \"serverDataType\"\n> & {\n  isCalculated: boolean;\n  subscribed: boolean;\n};\n\nconst buildColumnItems = (\n  availableColumns: SchemaColumn[],\n  configuredColumns: ColumnDescriptor[],\n): ColumnItem[] => {\n  return availableColumns.map<ColumnItem>(({ name, serverDataType }) => {\n    const configuredColumn = configuredColumns.find((col) => col.name === name);\n    return {\n      hidden: configuredColumn?.hidden,\n      isCalculated: isCalculatedColumn(name),\n      label: configuredColumn?.label ?? name,\n      name,\n      serverDataType,\n      subscribed: configuredColumn !== undefined,\n    };\n  });\n};\n\ntype ColumnState = {\n  availableColumns: SchemaColumn[];\n  tableConfig: TableConfig;\n};\n\nexport const useTableSettings = ({\n  availableColumns: availableColumnsProp,\n  onConfigChange,\n  onDataSourceConfigChange,\n  tableConfig: tableConfigProp,\n}: Omit<TableSettingsProps, \"onAddCalculatedColumn\">) => {\n  const [{ availableColumns, tableConfig }, setColumnState] =\n    useState<ColumnState>({\n      availableColumns: availableColumnsProp,\n      tableConfig: tableConfigProp,\n    });\n\n  const columnItems = useMemo(\n    () => buildColumnItems(availableColumns, tableConfig.columns),\n    [availableColumns, tableConfig.columns],\n  );\n\n  const handleReorderColumnItems = useCallback(\n    (columnItems: ColumnItem[]) => {\n      const orderedNames = columnItems.map((c) => c.name);\n      setColumnState((state) => {\n        const newAvailableColumns = reorderColumnItems(\n          state.availableColumns,\n          orderedNames,\n        );\n        const newColumns = reorderColumnItems(\n          tableConfig.columns,\n          orderedNames,\n        );\n        return {\n          availableColumns: newAvailableColumns,\n          tableConfig: {\n            ...state.tableConfig,\n            columns: newColumns,\n          },\n        };\n      });\n    },\n    [tableConfig.columns],\n  );\n\n  const handleColumnChange = useCallback<ColumnChangeHandler>(\n    (name, property, value) => {\n      // to be applied immediately\n      const columnItem = columnItems.find((col) => col.name === name);\n      if (property === \"subscribed\") {\n        if (columnItem?.subscribed) {\n          const subscribedColumns = tableConfig.columns\n            .filter((col) => col.name !== name)\n            .map((col) => col.name);\n          setColumnState((state) => ({\n            ...state,\n            tableConfig: {\n              ...tableConfig,\n              columns: tableConfig.columns.filter(\n                subscribedOnly(subscribedColumns),\n              ),\n            },\n          }));\n          onDataSourceConfigChange({\n            columns: subscribedColumns,\n          });\n        } else {\n          const newConfig = {\n            ...tableConfig,\n            columns: addColumnToSubscribedColumns(\n              tableConfig.columns,\n              availableColumns,\n              name,\n            ),\n          };\n          setColumnState((state) => ({\n            ...state,\n            tableConfig: newConfig,\n          }));\n\n          const subscribedColumns = newConfig.columns.map((col) => col.name);\n\n          onDataSourceConfigChange({\n            columns: subscribedColumns,\n          });\n        }\n      } else if (columnItem?.subscribed) {\n        const column = tableConfig.columns.find((col) => col.name === name);\n        if (column) {\n          const newConfig = updateTableConfig(tableConfig, {\n            type: \"column-prop\",\n            property,\n            column,\n            value,\n          });\n          setColumnState((state) => ({\n            ...state,\n            tableConfig: newConfig,\n          }));\n        }\n      }\n    },\n    [availableColumns, columnItems, onDataSourceConfigChange, tableConfig],\n  );\n\n  const handleChangeColumnLabels = useCallback((evt: SyntheticEvent) => {\n    const button = queryClosest<HTMLButtonElement>(evt.target, \"button\");\n    if (button) {\n      const value = parseInt(button.value);\n      const columnFormatHeader =\n        value === 0 ? undefined : value === 1 ? \"capitalize\" : \"uppercase\";\n      setColumnState((state) => ({\n        ...state,\n        tableConfig: {\n          ...state.tableConfig,\n          columnFormatHeader,\n        },\n      }));\n    }\n  }, []);\n\n  const handleChangeTableAttribute = useCallback(\n    (evt: MouseEvent<HTMLButtonElement>) => {\n      const button = queryClosest<HTMLButtonElement>(evt.target, \"button\");\n      if (button) {\n        const { ariaPressed, value } = button;\n        setColumnState((state) => ({\n          ...state,\n          tableConfig: {\n            ...state.tableConfig,\n            [value]: ariaPressed !== \"true\",\n          },\n        }));\n      }\n    },\n    [],\n  );\n\n  const handleCommitColumnWidth = useCallback<CommitHandler>((_, value) => {\n    if (typeof value === \"string\") {\n      const columnDefaultWidth = parseInt(value);\n      if (!isNaN(columnDefaultWidth)) {\n        setColumnState((state) => ({\n          ...state,\n          tableConfig: {\n            ...state.tableConfig,\n            columnDefaultWidth,\n          },\n        }));\n      }\n    }\n  }, []);\n\n  useLayoutEffectSkipFirst(() => {\n    onConfigChange?.(tableConfig);\n  }, [onConfigChange, tableConfig]);\n\n  const columnLabelsValue =\n    tableConfig.columnFormatHeader === undefined\n      ? 0\n      : tableConfig.columnFormatHeader === \"capitalize\"\n        ? 1\n        : 2;\n\n  return {\n    columnItems,\n    columnLabelsValue,\n    onChangeColumnLabels: handleChangeColumnLabels,\n    onChangeTableAttribute: handleChangeTableAttribute,\n    onColumnChange: handleColumnChange,\n    onCommitColumnWidth: handleCommitColumnWidth,\n    onReorderColumnItems: handleReorderColumnItems,\n    tableConfig,\n  };\n};\n"],"names":["isCalculatedColumn","useState","useMemo","useCallback","columnItems","reorderColumnItems","subscribedOnly","addColumnToSubscribedColumns","updateTableConfig","queryClosest","useLayoutEffectSkipFirst"],"mappings":"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"}
+{"version":3,"file":"useTableSettings.js","sources":["../../../../packages/vuu-table-extras/src/table-column-settings/useTableSettings.ts"],"sourcesContent":["import { SchemaColumn } from \"@vuu-ui/vuu-data-types\";\nimport { updateTableConfig } from \"@vuu-ui/vuu-table\";\nimport {\n  ColumnDescriptor,\n  TableConfig,\n  TableSettingsProps,\n} from \"@vuu-ui/vuu-table-types\";\nimport {\n  addColumnToSubscribedColumns,\n  queryClosest,\n  isCalculatedColumn,\n  subscribedOnly,\n  useLayoutEffectSkipFirst,\n  CommitHandler,\n  reorderColumnItems,\n} from \"@vuu-ui/vuu-utils\";\nimport {\n  MouseEvent,\n  SyntheticEvent,\n  useCallback,\n  useMemo,\n  useState,\n} from \"react\";\nimport { ColumnChangeHandler } from \"../column-list\";\nimport { ColumnItem } from \"../column-list/useColumnList\";\n\nexport type ColumnLike = {\n  name: string;\n};\n\nconst buildColumnItems = (\n  availableColumns: Array<SchemaColumn & { label?: string }>,\n  configuredColumns: ColumnDescriptor[],\n): ColumnItem[] => {\n  return availableColumns.map<ColumnItem>(\n    ({ name, label = name, serverDataType }) => {\n      const configuredColumn = configuredColumns.find(\n        (col) => col.name === name,\n      );\n      return {\n        hidden: configuredColumn?.hidden,\n        isCalculated: isCalculatedColumn(name),\n        label: configuredColumn?.label ?? label,\n        name,\n        serverDataType,\n        subscribed: configuredColumn !== undefined,\n      };\n    },\n  );\n};\n\ntype ColumnState = {\n  availableColumns: SchemaColumn[];\n  tableConfig: TableConfig;\n};\n\nexport const useTableSettings = ({\n  availableColumns: availableColumnsProp,\n  onConfigChange,\n  onDataSourceConfigChange,\n  tableConfig: tableConfigProp,\n}: Omit<TableSettingsProps, \"onAddCalculatedColumn\">) => {\n  const [{ availableColumns, tableConfig }, setColumnState] =\n    useState<ColumnState>({\n      availableColumns: availableColumnsProp,\n      tableConfig: tableConfigProp,\n    });\n\n  const columnItems = useMemo(\n    () => buildColumnItems(availableColumns, tableConfig.columns),\n    [availableColumns, tableConfig.columns],\n  );\n\n  const handleReorderColumnItems = useCallback(\n    (columnItems: ColumnItem[]) => {\n      const orderedNames = columnItems.map((c) => c.name);\n      setColumnState((state) => {\n        const newAvailableColumns = reorderColumnItems(\n          state.availableColumns,\n          orderedNames,\n        );\n        const newColumns = reorderColumnItems(\n          tableConfig.columns,\n          orderedNames,\n        );\n        return {\n          availableColumns: newAvailableColumns,\n          tableConfig: {\n            ...state.tableConfig,\n            columns: newColumns,\n          },\n        };\n      });\n    },\n    [tableConfig.columns],\n  );\n\n  const handleColumnChange = useCallback<ColumnChangeHandler>(\n    (name, property, value) => {\n      // to be applied immediately\n      const columnItem = columnItems.find((col) => col.name === name);\n      if (property === \"subscribed\") {\n        if (columnItem?.subscribed) {\n          const subscribedColumns = tableConfig.columns\n            .filter((col) => col.name !== name)\n            .map((col) => col.name);\n          setColumnState((state) => ({\n            ...state,\n            tableConfig: {\n              ...tableConfig,\n              columns: tableConfig.columns.filter(\n                subscribedOnly(subscribedColumns),\n              ),\n            },\n          }));\n          onDataSourceConfigChange({\n            columns: subscribedColumns,\n          });\n        } else {\n          const newConfig = {\n            ...tableConfig,\n            columns: addColumnToSubscribedColumns(\n              tableConfig.columns,\n              availableColumns,\n              name,\n            ),\n          };\n          setColumnState((state) => ({\n            ...state,\n            tableConfig: newConfig,\n          }));\n\n          const subscribedColumns = newConfig.columns.map((col) => col.name);\n\n          onDataSourceConfigChange({\n            columns: subscribedColumns,\n          });\n        }\n      } else if (columnItem?.subscribed) {\n        const column = tableConfig.columns.find((col) => col.name === name);\n        if (column) {\n          const newConfig = updateTableConfig(tableConfig, {\n            type: \"column-prop\",\n            property,\n            column,\n            value,\n          });\n          setColumnState((state) => ({\n            ...state,\n            tableConfig: newConfig,\n          }));\n        }\n      }\n    },\n    [availableColumns, columnItems, onDataSourceConfigChange, tableConfig],\n  );\n\n  const handleChangeColumnLabels = useCallback((evt: SyntheticEvent) => {\n    const button = queryClosest<HTMLButtonElement>(evt.target, \"button\");\n    if (button) {\n      const value = parseInt(button.value);\n      const columnFormatHeader =\n        value === 0 ? undefined : value === 1 ? \"capitalize\" : \"uppercase\";\n      setColumnState((state) => ({\n        ...state,\n        tableConfig: {\n          ...state.tableConfig,\n          columnFormatHeader,\n        },\n      }));\n    }\n  }, []);\n\n  const handleChangeTableAttribute = useCallback(\n    (evt: MouseEvent<HTMLButtonElement>) => {\n      const button = queryClosest<HTMLButtonElement>(evt.target, \"button\");\n      if (button) {\n        const { ariaPressed, value } = button;\n        setColumnState((state) => ({\n          ...state,\n          tableConfig: {\n            ...state.tableConfig,\n            [value]: ariaPressed !== \"true\",\n          },\n        }));\n      }\n    },\n    [],\n  );\n\n  const handleCommitColumnWidth = useCallback<CommitHandler>((_, value) => {\n    if (typeof value === \"string\") {\n      const columnDefaultWidth = parseInt(value);\n      if (!isNaN(columnDefaultWidth)) {\n        setColumnState((state) => ({\n          ...state,\n          tableConfig: {\n            ...state.tableConfig,\n            columnDefaultWidth,\n          },\n        }));\n      }\n    }\n  }, []);\n\n  useLayoutEffectSkipFirst(() => {\n    onConfigChange?.(tableConfig);\n  }, [onConfigChange, tableConfig]);\n\n  const columnLabelsValue =\n    tableConfig.columnFormatHeader === undefined\n      ? 0\n      : tableConfig.columnFormatHeader === \"capitalize\"\n        ? 1\n        : 2;\n\n  return {\n    columnItems,\n    columnLabelsValue,\n    onChangeColumnLabels: handleChangeColumnLabels,\n    onChangeTableAttribute: handleChangeTableAttribute,\n    onColumnChange: handleColumnChange,\n    onCommitColumnWidth: handleCommitColumnWidth,\n    onReorderColumnItems: handleReorderColumnItems,\n    tableConfig,\n  };\n};\n"],"names":["isCalculatedColumn","useState","useMemo","useCallback","columnItems","reorderColumnItems","subscribedOnly","addColumnToSubscribedColumns","updateTableConfig","queryClosest","useLayoutEffectSkipFirst"],"mappings":"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"}

package/esm/column-list/ColumnList.css.js

@@ -1,4 +1,4 @@
-var columnList = ".vuuColumnList {\n  --vuuMeasuredContainer-flex: 1 1 1px;\n  --vuu-svg-function: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 14 14\"><path d=\"M5.8625 10.5V9.625H6.72291L8.4875 7.59792L6.72291 5.54167H5.64375L4.60833 10.8792C4.53055 11.3167 4.36527 11.6545 4.1125 11.8927C3.85972 12.1309 3.53402 12.25 3.13541 12.25C2.7368 12.25 2.40382 12.1333 2.13645 11.9C1.86909 11.6667 1.73541 11.375 1.73541 11.025C1.73541 10.7625 1.80833 10.551 1.95416 10.3906C2.1 10.2302 2.28958 10.15 2.52291 10.15C2.72708 10.15 2.89479 10.2083 3.02604 10.325C3.15729 10.4417 3.22291 10.5972 3.22291 10.7917C3.22291 10.8986 3.20104 10.9983 3.15729 11.0906C3.11354 11.183 3.05277 11.2583 2.975 11.3167C3.01388 11.3361 3.0552 11.3507 3.09895 11.3604C3.1427 11.3701 3.18888 11.375 3.2375 11.375C3.36388 11.375 3.47083 11.3142 3.55833 11.1927C3.64583 11.0712 3.70902 10.9132 3.74791 10.7188L4.75416 5.54167H2.91666V4.66667H4.91458L5.22083 3.12083C5.30833 2.68333 5.48333 2.34549 5.74583 2.10729C6.00833 1.8691 6.33402 1.75 6.72291 1.75C7.12152 1.75 7.44965 1.86667 7.70729 2.1C7.96493 2.33333 8.09375 2.625 8.09375 2.975C8.09375 3.2375 8.02083 3.44896 7.875 3.60938C7.72916 3.76979 7.53958 3.85 7.30625 3.85C7.1118 3.85 6.94652 3.7941 6.81041 3.68229C6.6743 3.57049 6.60625 3.42222 6.60625 3.2375C6.60625 3.14028 6.62569 3.04549 6.66458 2.95312C6.70347 2.86076 6.75208 2.78542 6.81041 2.72708C6.79097 2.70764 6.7618 2.69063 6.72291 2.67604C6.68402 2.66146 6.64513 2.65417 6.60625 2.65417C6.47986 2.65417 6.37048 2.7125 6.27812 2.82917C6.18576 2.94583 6.12013 3.09653 6.08125 3.28125L5.81875 4.66667H8.575V5.54167H7.88958L9.1 6.94167L10.2375 5.54167H9.5375V4.66667H12.25V5.54167H11.4042L9.65416 7.59792L11.4042 9.625H12.25V10.5H9.5375V9.625H10.2375L9.07083 8.26875L7.875 9.625H8.575V10.5H5.8625Z\"/></svg>');\n  --vuuList-borderStyle: none;\n  --vuuListItem-padding: 0;\n  display: flex;\n  flex-direction: column;\n\n\n  .saltOption {\n    align-items: center;\n    background-color: var(--salt-container-primary-background);\n    border-bottom: var(--vuuColumnListItem-border, solid) 1px\n      var(--salt-separable-tertiary-borderColor);\n    gap: var(--salt-spacing-200);\n    padding: var(--salt-spacing-100) 0;\n\n    .vuuIcon {\n      --vuu-icon-color: var(--salt-content-secondary-foreground);\n    }\n  }\n\n  .vuuColumnList-text {\n    flex: 1 1 auto;\n  }\n\n}\n\n[data-icon=\"function\"] {\n  --vuu-icon-svg: var(--vuu-svg-function);\n}\n\n.vuuColumnList-withColumnNavgation {\n  .vuuColumnList-text:hover {\n    font-weight: 600;\n    text-decoration: underline;\n  }\n}\n\n.vuuColumnList-search {\n  padding: var(--salt-spacing-300);\n}\n\n.vuuColumnList-header {\n  border-top: solid 2px var(--vuu-color-gray-30);\n  flex: 0 0 40px;\n  font-size: 14px;\n  font-weight: 600;\n  padding-left: var(--salt-spacing-400);\n  padding-top: 24px;\n}\n\n.vuuColumnList-colHeadings {\n  border-bottom: solid 2px var(--vuu-color-gray-30);\n  color: var(--vuu-color-gray-50);\n  display: flex;\n  flex: 0 0 24px;\n  font-size: 10px;\n  justify-content: space-between;\n  margin-top: 16px;\n  padding-bottom: 8px;\n}\n";
+var cssColumnList = ".vuuColumnList {\n  --vuuMeasuredContainer-flex: 1 1 1px;\n  --vuu-svg-function: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 14 14\"><path d=\"M5.8625 10.5V9.625H6.72291L8.4875 7.59792L6.72291 5.54167H5.64375L4.60833 10.8792C4.53055 11.3167 4.36527 11.6545 4.1125 11.8927C3.85972 12.1309 3.53402 12.25 3.13541 12.25C2.7368 12.25 2.40382 12.1333 2.13645 11.9C1.86909 11.6667 1.73541 11.375 1.73541 11.025C1.73541 10.7625 1.80833 10.551 1.95416 10.3906C2.1 10.2302 2.28958 10.15 2.52291 10.15C2.72708 10.15 2.89479 10.2083 3.02604 10.325C3.15729 10.4417 3.22291 10.5972 3.22291 10.7917C3.22291 10.8986 3.20104 10.9983 3.15729 11.0906C3.11354 11.183 3.05277 11.2583 2.975 11.3167C3.01388 11.3361 3.0552 11.3507 3.09895 11.3604C3.1427 11.3701 3.18888 11.375 3.2375 11.375C3.36388 11.375 3.47083 11.3142 3.55833 11.1927C3.64583 11.0712 3.70902 10.9132 3.74791 10.7188L4.75416 5.54167H2.91666V4.66667H4.91458L5.22083 3.12083C5.30833 2.68333 5.48333 2.34549 5.74583 2.10729C6.00833 1.8691 6.33402 1.75 6.72291 1.75C7.12152 1.75 7.44965 1.86667 7.70729 2.1C7.96493 2.33333 8.09375 2.625 8.09375 2.975C8.09375 3.2375 8.02083 3.44896 7.875 3.60938C7.72916 3.76979 7.53958 3.85 7.30625 3.85C7.1118 3.85 6.94652 3.7941 6.81041 3.68229C6.6743 3.57049 6.60625 3.42222 6.60625 3.2375C6.60625 3.14028 6.62569 3.04549 6.66458 2.95312C6.70347 2.86076 6.75208 2.78542 6.81041 2.72708C6.79097 2.70764 6.7618 2.69063 6.72291 2.67604C6.68402 2.66146 6.64513 2.65417 6.60625 2.65417C6.47986 2.65417 6.37048 2.7125 6.27812 2.82917C6.18576 2.94583 6.12013 3.09653 6.08125 3.28125L5.81875 4.66667H8.575V5.54167H7.88958L9.1 6.94167L10.2375 5.54167H9.5375V4.66667H12.25V5.54167H11.4042L9.65416 7.59792L11.4042 9.625H12.25V10.5H9.5375V9.625H10.2375L9.07083 8.26875L7.875 9.625H8.575V10.5H5.8625Z\"/></svg>');\n  --vuuList-borderStyle: none;\n  --vuuListItem-padding: 0;\n  display: flex;\n  flex-direction: column;\n  padding: 0 var(--salt-spacing-100);\n\n  .saltListBox {\n    background-color: inherit;\n  }\n\n  .saltOption {\n    align-items: center;\n    background-color: inherit;\n    border-bottom: var(--vuuColumnListItem-border, solid) 1px\n      var(--salt-separable-tertiary-borderColor);\n    gap: var(--salt-spacing-200);\n    height: calc(var(--salt-size-base) + var(--salt-spacing-200));\n    .vuuIcon {\n      --vuu-icon-color: var(--salt-content-secondary-foreground);\n    }\n  }\n\n  .vuuColumnList-text {\n    flex: 1 1 auto;\n  }\n\n}\n\n[data-icon=\"function\"] {\n  --vuu-icon-svg: var(--vuu-svg-function);\n}\n\n.vuuColumnList-withColumnNavgation {\n  .vuuColumnList-text:hover {\n    font-weight: 600;\n    text-decoration: underline;\n  }\n}\n\n.vuuColumnList-search {\n  --saltInput-paddingLeft: var(--salt-spacing-300);\n  padding: var(--salt-spacing-200) var(--salt-spacing-300) var(--salt-spacing-300) var(--salt-spacing-300);\n}\n\n.vuuColumnList-header {\n  align-items: center;\n  border-top: solid 2px var(--vuu-color-gray-30);\n  display: flex;\n  font-size: 14px;\n  font-weight: 600;\n  flex: 0 0 var(--vuuColumnList-headerHeight, 32px);\n  padding-left: var(--salt-spacing-400);\n\n}\n\n.vuuColumnList-colHeadings {\n  border-bottom: solid 2px var(--vuu-color-gray-30);\n  color: var(--vuu-color-gray-50);\n  display: flex;\n  flex: 0 0 24px;\n  font-size: 10px;\n  justify-content: space-between;\n  margin-top: 16px;\n  padding-bottom: 8px;\n}\n";
 
-export { columnList as default };
+export { cssColumnList as default };
 //# sourceMappingURL=ColumnList.css.js.map

package/esm/column-list/ColumnList.js

@@ -3,11 +3,11 @@ import { Input, ListBox, Option, Checkbox, Switch } from '@salt-ds/core';
 import { useComponentCssInjection } from '@salt-ds/styles';
 import { useWindow } from '@salt-ds/window';
 import { IconButton, Icon } from '@vuu-ui/vuu-ui-controls';
-import { queryClosest, reorderColumnItems, DragDropProvider, getColumnLabel, useSortable } from '@vuu-ui/vuu-utils';
+import { reorderColumnItems, DragDropProvider, getColumnLabel, useSortable } from '@vuu-ui/vuu-utils';
 import cx from 'clsx';
 import { useRef, useMemo, useCallback } from 'react';
-import columnList from './ColumnList.css.js';
-import { useColumnList } from '../table-column-settings/useColumnList.js';
+import { useColumnList } from './useColumnList.js';
+import cssColumnList from './ColumnList.css.js';
 
 const classBase = "vuuColumnList";
 const classBaseListItem = "vuuColumnListItem";
@@ -102,47 +102,30 @@ const ColumnList = ({
   const targetWindow = useWindow();
   useComponentCssInjection({
     testId: "vuu-column-list",
-    css: columnList,
+    css: cssColumnList,
     window: targetWindow
   });
   const listRef = useRef(null);
-  const [permissions, hideOnly] = useMemo(
-    () => [
-      {
-        allowHideColumns,
-        allowRemoveColumns,
-        allowReorderColumns
-      },
-      allowHideColumns && !allowRemoveColumns
-    ],
+  const permissions = useMemo(
+    () => ({
+      allowHideColumns,
+      allowRemoveColumns,
+      allowReorderColumns
+    }),
     [allowHideColumns, allowRemoveColumns, allowReorderColumns]
   );
   const {
-    onChange: onSearchInputChange,
+    onChangeListItem,
+    onChangeSearchInput,
     searchState,
     visibleColumnItems
-  } = useColumnList({ columnItems });
-  const handleChange = useCallback(
-    ({ target }) => {
-      const input = target;
-      const listItem = queryClosest(target, `.${classBaseListItem}`);
-      if (listItem) {
-        const {
-          dataset: { name }
-        } = listItem;
-        if (name) {
-          const saltCheckbox = queryClosest(target, `.${classBase}-checkBox`);
-          const saltSwitch = queryClosest(target, `.${classBase}-switch`);
-          if (saltCheckbox && !hideOnly) {
-            onChange(name, "subscribed", input.checked);
-          } else if (saltSwitch || hideOnly) {
-            onChange(name, "hidden", input.checked === false);
-          }
-        }
-      }
-    },
-    [hideOnly, onChange]
-  );
+  } = useColumnList({
+    classBase,
+    classBaseListItem,
+    columnItems,
+    permissions,
+    onChange
+  });
   const handleClick = useCallback(
     (evt) => {
       const targetEl = evt.target;
@@ -184,7 +167,7 @@ const ColumnList = ({
             placeholder: "Find column",
             ref: searchCallbackRef,
             value: searchState.searchText,
-            onChange: onSearchInputChange
+            onChange: onChangeSearchInput
           }
         ) }) : null,
         /* @__PURE__ */ jsx("div", { className: `${classBase}-header`, children: /* @__PURE__ */ jsx("span", { children: "Column Name" }) }),
@@ -197,7 +180,7 @@ const ColumnList = ({
           {
             item: columnItem,
             index,
-            onChange: handleChange,
+            onChange: onChangeListItem,
             onClick: handleClick,
             permissions,
             value: columnItem
@@ -209,5 +192,5 @@ const ColumnList = ({
   ) });
 };
 
-export { ColumnList };
+export { ColumnList, classBase, classBaseListItem };
 //# sourceMappingURL=ColumnList.js.map

package/esm/column-list/ColumnList.js.map

@@ -1 +1 @@
-{"version":3,"file":"ColumnList.js","sources":["../../../../packages/vuu-table-extras/src/column-list/ColumnList.tsx"],"sourcesContent":["import {\n  Checkbox,\n  Input,\n  ListBox,\n  Option,\n  OptionProps,\n  Switch,\n} from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport {\n  ColumnDescriptor,\n  ColumnListPermissions,\n} from \"@vuu-ui/vuu-table-types\";\nimport { Icon, IconButton } from \"@vuu-ui/vuu-ui-controls\";\nimport {\n  DragDropProvider,\n  getColumnLabel,\n  queryClosest,\n  reorderColumnItems,\n  useSortable,\n} from \"@vuu-ui/vuu-utils\";\nimport cx from \"clsx\";\nimport {\n  HTMLAttributes,\n  MouseEventHandler,\n  RefCallback,\n  SyntheticEvent,\n  useCallback,\n  useMemo,\n  useRef,\n} from \"react\";\nimport { ColumnItem } from \"../table-column-settings/useTableSettings\";\n\nimport columnList from \"./ColumnList.css\";\nimport { useColumnList } from \"../table-column-settings/useColumnList\";\n\nconst classBase = \"vuuColumnList\";\nconst classBaseListItem = \"vuuColumnListItem\";\n\nconst searchIcon = <span data-icon=\"search\" />;\nconst NO_SELECTION: string[] = [] as const;\n\nconst useSorting = (id: string, index: number, allowSort = true) => {\n  const { handleRef: sortableHandleRef, ref: sortableRef } = useSortable({\n    id,\n    index,\n  });\n\n  const noopRef = useCallback(() => {\n    // do nothing\n  }, []);\n\n  const [handleRef, ref] = useMemo(() => {\n    return allowSort ? [sortableHandleRef, sortableRef] : [noopRef, noopRef];\n  }, [allowSort, noopRef, sortableHandleRef, sortableRef]);\n\n  return {\n    handleRef,\n    ref,\n  };\n};\n\nexport type ColumnChangeHandler = (\n  columnName: string,\n  propertyName: keyof ColumnDescriptor | \"subscribed\",\n  value: string | number | boolean,\n) => void;\n\nexport interface ColumnListProps\n  extends Omit<HTMLAttributes<HTMLDivElement>, \"onChange\"> {\n  columnItems: ColumnItem[];\n  onChange: ColumnChangeHandler;\n  onNavigateToColumn?: (columnName: string) => void;\n  onReorderColumnItems?: (columnItems: ColumnItem[]) => void;\n  permissions?: ColumnListPermissions;\n}\n\nconst defaultPermissions: ColumnListPermissions = {\n  allowColumnSearch: false,\n  allowHideColumns: true,\n  allowRemoveColumns: true,\n  allowReorderColumns: true,\n};\n\nconst ColumnListItem = ({\n  className: classNameProp,\n  index,\n  item,\n  permissions: { allowHideColumns, allowRemoveColumns, allowReorderColumns },\n  ...optionProps\n}: OptionProps & {\n  index: number;\n  item: ColumnItem;\n  permissions: ColumnListPermissions;\n}) => {\n  const hideOnly = allowHideColumns && !allowRemoveColumns;\n  const removeOnly = !allowHideColumns && allowRemoveColumns;\n  const hideAndRemove = allowHideColumns && allowRemoveColumns;\n\n  const { handleRef, ref } = useSorting(item.name, index, allowReorderColumns);\n  return (\n    <Option\n      {...optionProps}\n      className={cx(classNameProp, classBaseListItem)}\n      data-name={item.name}\n      id={item.name}\n      ref={ref}\n    >\n      {allowReorderColumns ? (\n        <IconButton\n          data-embedded\n          appearance=\"transparent\"\n          icon=\"draggable\"\n          ref={handleRef}\n          size={16}\n        />\n      ) : null}\n      {item?.isCalculated ? <Icon name=\"function\" /> : null}\n      {hideAndRemove || hideOnly || removeOnly ? (\n        <Checkbox\n          className={`${classBase}-checkBox`}\n          checked={hideOnly ? item?.hidden !== true : item?.subscribed}\n        />\n      ) : null}\n      <span className={`${classBase}-text`}>\n        {getColumnLabel(item as ColumnDescriptor)}\n      </span>\n      {hideAndRemove ? (\n        <Switch\n          className={`${classBase}-switch`}\n          checked={item?.hidden !== true}\n          disabled={item?.subscribed !== true}\n        />\n      ) : null}\n    </Option>\n  );\n};\n\nexport const ColumnList = ({\n  className,\n  columnItems,\n  onChange,\n  onNavigateToColumn,\n  onReorderColumnItems,\n  permissions: {\n    allowColumnSearch = defaultPermissions.allowColumnSearch,\n    allowHideColumns = defaultPermissions.allowHideColumns,\n    allowRemoveColumns = defaultPermissions.allowRemoveColumns,\n    allowReorderColumns = defaultPermissions.allowReorderColumns,\n  } = defaultPermissions,\n  ...htmlAttributes\n}: ColumnListProps) => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-column-list\",\n    css: columnList,\n    window: targetWindow,\n  });\n  const listRef = useRef<HTMLDivElement>(null);\n  const [permissions, hideOnly] = useMemo(\n    () => [\n      {\n        allowHideColumns,\n        allowRemoveColumns,\n        allowReorderColumns,\n      },\n      allowHideColumns && !allowRemoveColumns,\n    ],\n    [allowHideColumns, allowRemoveColumns, allowReorderColumns],\n  );\n\n  const {\n    onChange: onSearchInputChange,\n    searchState,\n    visibleColumnItems,\n  } = useColumnList({ columnItems });\n\n  const handleChange = useCallback(\n    ({ target }: SyntheticEvent) => {\n      const input = target as HTMLInputElement;\n      const listItem = queryClosest(target, `.${classBaseListItem}`);\n      if (listItem) {\n        const {\n          dataset: { name },\n        } = listItem;\n        if (name) {\n          const saltCheckbox = queryClosest(target, `.${classBase}-checkBox`);\n          const saltSwitch = queryClosest(target, `.${classBase}-switch`);\n\n          if (saltCheckbox && !hideOnly) {\n            onChange(name, \"subscribed\", input.checked);\n          } else if (saltSwitch || hideOnly) {\n            onChange(name, \"hidden\", input.checked === false);\n          }\n        }\n      }\n    },\n    [hideOnly, onChange],\n  );\n\n  const handleClick = useCallback<MouseEventHandler>(\n    (evt) => {\n      const targetEl = evt.target as HTMLElement;\n      if (targetEl.classList.contains(\"vuuColumnList-text\")) {\n        const listItemEl = targetEl.closest(\".vuuListItem\") as HTMLElement;\n        if (listItemEl?.dataset.name) {\n          onNavigateToColumn?.(listItemEl.dataset.name);\n        }\n      }\n    },\n    [onNavigateToColumn],\n  );\n\n  const handleDragEnd = useCallback(() => {\n    setTimeout(() => {\n      const listItems =\n        listRef.current?.querySelectorAll<HTMLDivElement>(\".saltOption\");\n      if (listItems) {\n        const orderedIds = Array.from(listItems).map(({ id }) => id);\n        onReorderColumnItems?.(reorderColumnItems(columnItems, orderedIds));\n      }\n    }, 300);\n  }, [columnItems, onReorderColumnItems]);\n\n  const searchCallbackRef = useCallback<RefCallback<HTMLElement>>((el) => {\n    setTimeout(() => {\n      el?.querySelector(\"input\")?.focus();\n    }, 100);\n  }, []);\n\n  return (\n    <DragDropProvider onDragEnd={handleDragEnd}>\n      <div\n        {...htmlAttributes}\n        className={cx(classBase, className, {\n          [`${classBase}-withColumnNavigation`]:\n            typeof onNavigateToColumn === \"function\",\n        })}\n      >\n        {allowColumnSearch ? (\n          <form className={`${classBase}-search`} role=\"search\">\n            <Input\n              // inputProps={{ onKeyDown }}\n              startAdornment={searchIcon}\n              placeholder=\"Find column\"\n              ref={searchCallbackRef}\n              value={searchState.searchText}\n              onChange={onSearchInputChange}\n            />\n          </form>\n        ) : null}\n        <div className={`${classBase}-header`}>\n          <span>Column Name</span>\n        </div>\n        {allowHideColumns && allowRemoveColumns ? (\n          <div className={`${classBase}-colHeadings`}>\n            <span>Column subscription</span>\n            <span>Visibility</span>\n          </div>\n        ) : null}\n        <ListBox ref={listRef} selected={NO_SELECTION}>\n          {visibleColumnItems.map((columnItem, index) => (\n            <ColumnListItem\n              item={columnItem}\n              index={index}\n              key={columnItem.name}\n              onChange={handleChange}\n              onClick={handleClick}\n              permissions={permissions}\n              value={columnItem}\n            />\n          ))}\n        </ListBox>\n      </div>\n    </DragDropProvider>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;;AAqCA,MAAM,SAAY,GAAA,eAAA;AAClB,MAAM,iBAAoB,GAAA,mBAAA;AAE1B,MAAM,UAAa,mBAAA,GAAA,CAAC,MAAK,EAAA,EAAA,WAAA,EAAU,QAAS,EAAA,CAAA;AAC5C,MAAM,eAAyB,EAAC;AAEhC,MAAM,UAAa,GAAA,CAAC,EAAY,EAAA,KAAA,EAAe,YAAY,IAAS,KAAA;AAClE,EAAA,MAAM,EAAE,SAAW,EAAA,iBAAA,EAAmB,GAAK,EAAA,WAAA,KAAgB,WAAY,CAAA;AAAA,IACrE,EAAA;AAAA,IACA;AAAA,GACD,CAAA;AAED,EAAM,MAAA,OAAA,GAAU,YAAY,MAAM;AAAA,GAElC,EAAG,EAAE,CAAA;AAEL,EAAA,MAAM,CAAC,SAAA,EAAW,GAAG,CAAA,GAAI,QAAQ,MAAM;AACrC,IAAA,OAAO,YAAY,CAAC,iBAAA,EAAmB,WAAW,CAAI,GAAA,CAAC,SAAS,OAAO,CAAA;AAAA,KACtE,CAAC,SAAA,EAAW,OAAS,EAAA,iBAAA,EAAmB,WAAW,CAAC,CAAA;AAEvD,EAAO,OAAA;AAAA,IACL,SAAA;AAAA,IACA;AAAA,GACF;AACF,CAAA;AAiBA,MAAM,kBAA4C,GAAA;AAAA,EAChD,iBAAmB,EAAA,KAAA;AAAA,EACnB,gBAAkB,EAAA,IAAA;AAAA,EAClB,kBAAoB,EAAA,IAAA;AAAA,EACpB,mBAAqB,EAAA;AACvB,CAAA;AAEA,MAAM,iBAAiB,CAAC;AAAA,EACtB,SAAW,EAAA,aAAA;AAAA,EACX,KAAA;AAAA,EACA,IAAA;AAAA,EACA,WAAa,EAAA,EAAE,gBAAkB,EAAA,kBAAA,EAAoB,mBAAoB,EAAA;AAAA,EACzE,GAAG;AACL,CAIM,KAAA;AACJ,EAAM,MAAA,QAAA,GAAW,oBAAoB,CAAC,kBAAA;AACtC,EAAM,MAAA,UAAA,GAAa,CAAC,gBAAoB,IAAA,kBAAA;AACxC,EAAA,MAAM,gBAAgB,gBAAoB,IAAA,kBAAA;AAE1C,EAAM,MAAA,EAAE,WAAW,GAAI,EAAA,GAAI,WAAW,IAAK,CAAA,IAAA,EAAM,OAAO,mBAAmB,CAAA;AAC3E,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,IAAI,IAAK,CAAA,IAAA;AAAA,MACT,GAAA;AAAA,MAEC,QAAA,EAAA;AAAA,QACC,mBAAA,mBAAA,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,SAEN,GAAA,IAAA;AAAA,QACH,MAAM,YAAe,mBAAA,GAAA,CAAC,IAAK,EAAA,EAAA,IAAA,EAAK,YAAW,CAAK,GAAA,IAAA;AAAA,QAChD,aAAA,IAAiB,YAAY,UAC5B,mBAAA,GAAA;AAAA,UAAC,QAAA;AAAA,UAAA;AAAA,YACC,SAAA,EAAW,GAAG,SAAS,CAAA,SAAA,CAAA;AAAA,YACvB,OAAS,EAAA,QAAA,GAAW,IAAM,EAAA,MAAA,KAAW,OAAO,IAAM,EAAA;AAAA;AAAA,SAElD,GAAA,IAAA;AAAA,wBACJ,GAAA,CAAC,UAAK,SAAW,EAAA,CAAA,EAAG,SAAS,CAC1B,KAAA,CAAA,EAAA,QAAA,EAAA,cAAA,CAAe,IAAwB,CAC1C,EAAA,CAAA;AAAA,QACC,aACC,mBAAA,GAAA;AAAA,UAAC,MAAA;AAAA,UAAA;AAAA,YACC,SAAA,EAAW,GAAG,SAAS,CAAA,OAAA,CAAA;AAAA,YACvB,OAAA,EAAS,MAAM,MAAW,KAAA,IAAA;AAAA,YAC1B,QAAA,EAAU,MAAM,UAAe,KAAA;AAAA;AAAA,SAE/B,GAAA;AAAA;AAAA;AAAA,GACN;AAEJ,CAAA;AAEO,MAAM,aAAa,CAAC;AAAA,EACzB,SAAA;AAAA,EACA,WAAA;AAAA,EACA,QAAA;AAAA,EACA,kBAAA;AAAA,EACA,oBAAA;AAAA,EACA,WAAa,EAAA;AAAA,IACX,oBAAoB,kBAAmB,CAAA,iBAAA;AAAA,IACvC,mBAAmB,kBAAmB,CAAA,gBAAA;AAAA,IACtC,qBAAqB,kBAAmB,CAAA,kBAAA;AAAA,IACxC,sBAAsB,kBAAmB,CAAA;AAAA,GACvC,GAAA,kBAAA;AAAA,EACJ,GAAG;AACL,CAAuB,KAAA;AACrB,EAAA,MAAM,eAAe,SAAU,EAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,iBAAA;AAAA,IACR,GAAK,EAAA,UAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AACD,EAAM,MAAA,OAAA,GAAU,OAAuB,IAAI,CAAA;AAC3C,EAAM,MAAA,CAAC,WAAa,EAAA,QAAQ,CAAI,GAAA,OAAA;AAAA,IAC9B,MAAM;AAAA,MACJ;AAAA,QACE,gBAAA;AAAA,QACA,kBAAA;AAAA,QACA;AAAA,OACF;AAAA,MACA,oBAAoB,CAAC;AAAA,KACvB;AAAA,IACA,CAAC,gBAAkB,EAAA,kBAAA,EAAoB,mBAAmB;AAAA,GAC5D;AAEA,EAAM,MAAA;AAAA,IACJ,QAAU,EAAA,mBAAA;AAAA,IACV,WAAA;AAAA,IACA;AAAA,GACE,GAAA,aAAA,CAAc,EAAE,WAAA,EAAa,CAAA;AAEjC,EAAA,MAAM,YAAe,GAAA,WAAA;AAAA,IACnB,CAAC,EAAE,MAAA,EAA6B,KAAA;AAC9B,MAAA,MAAM,KAAQ,GAAA,MAAA;AACd,MAAA,MAAM,QAAW,GAAA,YAAA,CAAa,MAAQ,EAAA,CAAA,CAAA,EAAI,iBAAiB,CAAE,CAAA,CAAA;AAC7D,MAAA,IAAI,QAAU,EAAA;AACZ,QAAM,MAAA;AAAA,UACJ,OAAA,EAAS,EAAE,IAAK;AAAA,SACd,GAAA,QAAA;AACJ,QAAA,IAAI,IAAM,EAAA;AACR,UAAA,MAAM,YAAe,GAAA,YAAA,CAAa,MAAQ,EAAA,CAAA,CAAA,EAAI,SAAS,CAAW,SAAA,CAAA,CAAA;AAClE,UAAA,MAAM,UAAa,GAAA,YAAA,CAAa,MAAQ,EAAA,CAAA,CAAA,EAAI,SAAS,CAAS,OAAA,CAAA,CAAA;AAE9D,UAAI,IAAA,YAAA,IAAgB,CAAC,QAAU,EAAA;AAC7B,YAAS,QAAA,CAAA,IAAA,EAAM,YAAc,EAAA,KAAA,CAAM,OAAO,CAAA;AAAA,WAC5C,MAAA,IAAW,cAAc,QAAU,EAAA;AACjC,YAAA,QAAA,CAAS,IAAM,EAAA,QAAA,EAAU,KAAM,CAAA,OAAA,KAAY,KAAK,CAAA;AAAA;AAClD;AACF;AACF,KACF;AAAA,IACA,CAAC,UAAU,QAAQ;AAAA,GACrB;AAEA,EAAA,MAAM,WAAc,GAAA,WAAA;AAAA,IAClB,CAAC,GAAQ,KAAA;AACP,MAAA,MAAM,WAAW,GAAI,CAAA,MAAA;AACrB,MAAA,IAAI,QAAS,CAAA,SAAA,CAAU,QAAS,CAAA,oBAAoB,CAAG,EAAA;AACrD,QAAM,MAAA,UAAA,GAAa,QAAS,CAAA,OAAA,CAAQ,cAAc,CAAA;AAClD,QAAI,IAAA,UAAA,EAAY,QAAQ,IAAM,EAAA;AAC5B,UAAqB,kBAAA,GAAA,UAAA,CAAW,QAAQ,IAAI,CAAA;AAAA;AAC9C;AACF,KACF;AAAA,IACA,CAAC,kBAAkB;AAAA,GACrB;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,QAAM,MAAA,UAAA,GAAa,KAAM,CAAA,IAAA,CAAK,SAAS,CAAA,CAAE,IAAI,CAAC,EAAE,EAAG,EAAA,KAAM,EAAE,CAAA;AAC3D,QAAuB,oBAAA,GAAA,kBAAA,CAAmB,WAAa,EAAA,UAAU,CAAC,CAAA;AAAA;AACpE,OACC,GAAG,CAAA;AAAA,GACL,EAAA,CAAC,WAAa,EAAA,oBAAoB,CAAC,CAAA;AAEtC,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,EACE,uBAAA,GAAA,CAAC,gBAAiB,EAAA,EAAA,SAAA,EAAW,aAC3B,EAAA,QAAA,kBAAA,IAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACE,GAAG,cAAA;AAAA,MACJ,SAAA,EAAW,EAAG,CAAA,SAAA,EAAW,SAAW,EAAA;AAAA,QAClC,CAAC,CAAG,EAAA,SAAS,CAAuB,qBAAA,CAAA,GAClC,OAAO,kBAAuB,KAAA;AAAA,OACjC,CAAA;AAAA,MAEA,QAAA,EAAA;AAAA,QAAA,iBAAA,uBACE,MAAK,EAAA,EAAA,SAAA,EAAW,GAAG,SAAS,CAAA,OAAA,CAAA,EAAW,MAAK,QAC3C,EAAA,QAAA,kBAAA,GAAA;AAAA,UAAC,KAAA;AAAA,UAAA;AAAA,YAEC,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,WAEd,CACE,GAAA,IAAA;AAAA,wBACJ,GAAA,CAAC,SAAI,SAAW,EAAA,CAAA,EAAG,SAAS,CAC1B,OAAA,CAAA,EAAA,QAAA,kBAAA,GAAA,CAAC,MAAK,EAAA,EAAA,QAAA,EAAA,aAAA,EAAW,CACnB,EAAA,CAAA;AAAA,QACC,oBAAoB,kBACnB,mBAAA,IAAA,CAAC,SAAI,SAAW,EAAA,CAAA,EAAG,SAAS,CAC1B,YAAA,CAAA,EAAA,QAAA,EAAA;AAAA,0BAAA,GAAA,CAAC,UAAK,QAAmB,EAAA,qBAAA,EAAA,CAAA;AAAA,0BACzB,GAAA,CAAC,UAAK,QAAU,EAAA,YAAA,EAAA;AAAA,SAAA,EAClB,CACE,GAAA,IAAA;AAAA,wBACJ,GAAA,CAAC,OAAQ,EAAA,EAAA,GAAA,EAAK,OAAS,EAAA,QAAA,EAAU,cAC9B,QAAmB,EAAA,kBAAA,CAAA,GAAA,CAAI,CAAC,UAAA,EAAY,KACnC,qBAAA,GAAA;AAAA,UAAC,cAAA;AAAA,UAAA;AAAA,YACC,IAAM,EAAA,UAAA;AAAA,YACN,KAAA;AAAA,YAEA,QAAU,EAAA,YAAA;AAAA,YACV,OAAS,EAAA,WAAA;AAAA,YACT,WAAA;AAAA,YACA,KAAO,EAAA;AAAA,WAAA;AAAA,UAJF,UAAW,CAAA;AAAA,SAMnB,CACH,EAAA;AAAA;AAAA;AAAA,GAEJ,EAAA,CAAA;AAEJ;;;;"}
+{"version":3,"file":"ColumnList.js","sources":["../../../../packages/vuu-table-extras/src/column-list/ColumnList.tsx"],"sourcesContent":["import {\n  Checkbox,\n  Input,\n  ListBox,\n  Option,\n  OptionProps,\n  Switch,\n} from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport {\n  ColumnDescriptor,\n  ColumnListPermissions,\n} from \"@vuu-ui/vuu-table-types\";\nimport { Icon, IconButton } from \"@vuu-ui/vuu-ui-controls\";\nimport {\n  DragDropProvider,\n  getColumnLabel,\n  reorderColumnItems,\n  useSortable,\n} from \"@vuu-ui/vuu-utils\";\nimport cx from \"clsx\";\nimport {\n  HTMLAttributes,\n  MouseEventHandler,\n  RefCallback,\n  useCallback,\n  useMemo,\n  useRef,\n} from \"react\";\nimport {\n  type ColumnItem,\n  type ColumnSearchProps,\n  useColumnList,\n} from \"./useColumnList\";\n\nimport cssColumnList from \"./ColumnList.css\";\n\nexport const classBase = \"vuuColumnList\";\nexport const classBaseListItem = \"vuuColumnListItem\";\n\nconst searchIcon = <span data-icon=\"search\" />;\nconst NO_SELECTION: string[] = [] as const;\n\nconst useSorting = (id: string, index: number, allowSort = true) => {\n  const { handleRef: sortableHandleRef, ref: sortableRef } = useSortable({\n    id,\n    index,\n  });\n\n  const noopRef = useCallback(() => {\n    // do nothing\n  }, []);\n\n  const [handleRef, ref] = useMemo(() => {\n    return allowSort ? [sortableHandleRef, sortableRef] : [noopRef, noopRef];\n  }, [allowSort, noopRef, sortableHandleRef, sortableRef]);\n\n  return {\n    handleRef,\n    ref,\n  };\n};\n\nexport interface ColumnListProps\n  extends Pick<ColumnSearchProps, \"columnItems\" | \"onChange\">,\n    Omit<HTMLAttributes<HTMLDivElement>, \"onChange\"> {\n  onNavigateToColumn?: (columnName: string) => void;\n  onReorderColumnItems?: (columnItems: ColumnItem[]) => void;\n  permissions?: ColumnListPermissions;\n}\n\nconst defaultPermissions: ColumnListPermissions = {\n  allowColumnSearch: false,\n  allowHideColumns: true,\n  allowRemoveColumns: true,\n  allowReorderColumns: true,\n};\n\nconst ColumnListItem = ({\n  className: classNameProp,\n  index,\n  item,\n  permissions: { allowHideColumns, allowRemoveColumns, allowReorderColumns },\n  ...optionProps\n}: OptionProps & {\n  index: number;\n  item: ColumnItem;\n  permissions: ColumnListPermissions;\n}) => {\n  const hideOnly = allowHideColumns && !allowRemoveColumns;\n  const removeOnly = !allowHideColumns && allowRemoveColumns;\n  const hideAndRemove = allowHideColumns && allowRemoveColumns;\n\n  const { handleRef, ref } = useSorting(item.name, index, allowReorderColumns);\n  return (\n    <Option\n      {...optionProps}\n      className={cx(classNameProp, classBaseListItem)}\n      data-name={item.name}\n      id={item.name}\n      ref={ref}\n    >\n      {allowReorderColumns ? (\n        <IconButton\n          data-embedded\n          appearance=\"transparent\"\n          icon=\"draggable\"\n          ref={handleRef}\n          size={16}\n        />\n      ) : null}\n      {item?.isCalculated ? <Icon name=\"function\" /> : null}\n      {hideAndRemove || hideOnly || removeOnly ? (\n        <Checkbox\n          className={`${classBase}-checkBox`}\n          checked={hideOnly ? item?.hidden !== true : item?.subscribed}\n        />\n      ) : null}\n      <span className={`${classBase}-text`}>\n        {getColumnLabel(item as ColumnDescriptor)}\n      </span>\n      {hideAndRemove ? (\n        <Switch\n          className={`${classBase}-switch`}\n          checked={item?.hidden !== true}\n          disabled={item?.subscribed !== true}\n        />\n      ) : null}\n    </Option>\n  );\n};\n\nexport const ColumnList = ({\n  className,\n  columnItems,\n  onChange,\n  onNavigateToColumn,\n  onReorderColumnItems,\n  permissions: {\n    allowColumnSearch = defaultPermissions.allowColumnSearch,\n    allowHideColumns = defaultPermissions.allowHideColumns,\n    allowRemoveColumns = defaultPermissions.allowRemoveColumns,\n    allowReorderColumns = defaultPermissions.allowReorderColumns,\n  } = defaultPermissions,\n  ...htmlAttributes\n}: ColumnListProps) => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-column-list\",\n    css: cssColumnList,\n    window: targetWindow,\n  });\n  const listRef = useRef<HTMLDivElement>(null);\n  const permissions = useMemo(\n    () => ({\n      allowHideColumns,\n      allowRemoveColumns,\n      allowReorderColumns,\n    }),\n    [allowHideColumns, allowRemoveColumns, allowReorderColumns],\n  );\n\n  const {\n    onChangeListItem,\n    onChangeSearchInput,\n    searchState,\n    visibleColumnItems,\n  } = useColumnList({\n    classBase,\n    classBaseListItem,\n    columnItems,\n    permissions,\n    onChange,\n  });\n\n  const handleClick = useCallback<MouseEventHandler>(\n    (evt) => {\n      const targetEl = evt.target as HTMLElement;\n      if (targetEl.classList.contains(\"vuuColumnList-text\")) {\n        const listItemEl = targetEl.closest(\".vuuListItem\") as HTMLElement;\n        if (listItemEl?.dataset.name) {\n          onNavigateToColumn?.(listItemEl.dataset.name);\n        }\n      }\n    },\n    [onNavigateToColumn],\n  );\n\n  const handleDragEnd = useCallback(() => {\n    setTimeout(() => {\n      const listItems =\n        listRef.current?.querySelectorAll<HTMLDivElement>(\".saltOption\");\n      if (listItems) {\n        const orderedIds = Array.from(listItems).map(({ id }) => id);\n        onReorderColumnItems?.(reorderColumnItems(columnItems, orderedIds));\n      }\n    }, 300);\n  }, [columnItems, onReorderColumnItems]);\n\n  const searchCallbackRef = useCallback<RefCallback<HTMLElement>>((el) => {\n    setTimeout(() => {\n      el?.querySelector(\"input\")?.focus();\n    }, 100);\n  }, []);\n\n  return (\n    <DragDropProvider onDragEnd={handleDragEnd}>\n      <div\n        {...htmlAttributes}\n        className={cx(classBase, className, {\n          [`${classBase}-withColumnNavigation`]:\n            typeof onNavigateToColumn === \"function\",\n        })}\n      >\n        {allowColumnSearch ? (\n          <form className={`${classBase}-search`} role=\"search\">\n            <Input\n              // inputProps={{ onKeyDown }}\n              startAdornment={searchIcon}\n              placeholder=\"Find column\"\n              ref={searchCallbackRef}\n              value={searchState.searchText}\n              onChange={onChangeSearchInput}\n            />\n          </form>\n        ) : null}\n        <div className={`${classBase}-header`}>\n          <span>Column Name</span>\n        </div>\n        {allowHideColumns && allowRemoveColumns ? (\n          <div className={`${classBase}-colHeadings`}>\n            <span>Column subscription</span>\n            <span>Visibility</span>\n          </div>\n        ) : null}\n        <ListBox ref={listRef} selected={NO_SELECTION}>\n          {visibleColumnItems.map((columnItem, index) => (\n            <ColumnListItem\n              item={columnItem}\n              index={index}\n              key={columnItem.name}\n              onChange={onChangeListItem}\n              onClick={handleClick}\n              permissions={permissions}\n              value={columnItem}\n            />\n          ))}\n        </ListBox>\n      </div>\n    </DragDropProvider>\n  );\n};\n"],"names":[],"mappings":"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"}

package/esm/column-list/useColumnList.js

@@ -0,0 +1,70 @@
+import { useState, useRef, useMemo, useCallback } from 'react';
+import { queryClosest } from '@vuu-ui/vuu-utils';
+
+const useColumnList = ({
+  classBase,
+  classBaseListItem,
+  columnItems,
+  onChange,
+  permissions: { allowHideColumns, allowRemoveColumns }
+}) => {
+  const [searchState, setSearchState] = useState({ searchText: "" });
+  const visibleColumnsRef = useRef(void 0);
+  const hideOnly = useMemo(
+    () => allowHideColumns && !allowRemoveColumns,
+    [allowHideColumns, allowRemoveColumns]
+  );
+  useMemo(() => {
+    if (searchState.searchText) {
+      visibleColumnsRef.current = columnItems.filter(
+        (item) => item.name.indexOf(searchState.searchText) !== -1
+      );
+    }
+  }, [columnItems, searchState.searchText]);
+  const handleChangeSearchInput = useCallback(
+    (evt) => {
+      const { value } = evt.target;
+      if (value) {
+        visibleColumnsRef.current = columnItems.filter(
+          (item) => item.name.indexOf(value) !== -1
+        );
+      } else {
+        visibleColumnsRef.current = void 0;
+      }
+      setSearchState({
+        searchText: value
+      });
+    },
+    [columnItems]
+  );
+  const handleChangeListItem = useCallback(
+    ({ target }) => {
+      const input = target;
+      const listItem = queryClosest(target, `.${classBaseListItem}`);
+      if (listItem) {
+        const {
+          dataset: { name }
+        } = listItem;
+        if (name) {
+          const saltCheckbox = queryClosest(target, `.${classBase}-checkBox`);
+          const saltSwitch = queryClosest(target, `.${classBase}-switch`);
+          if (saltCheckbox && !hideOnly) {
+            onChange(name, "subscribed", input.checked);
+          } else if (saltSwitch || hideOnly) {
+            onChange(name, "hidden", input.checked === false);
+          }
+        }
+      }
+    },
+    [classBase, classBaseListItem, hideOnly, onChange]
+  );
+  return {
+    onChangeSearchInput: handleChangeSearchInput,
+    onChangeListItem: handleChangeListItem,
+    searchState,
+    visibleColumnItems: visibleColumnsRef.current ?? columnItems
+  };
+};
+
+export { useColumnList };
+//# sourceMappingURL=useColumnList.js.map

package/esm/column-list/useColumnList.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useColumnList.js","sources":["../../../../packages/vuu-table-extras/src/column-list/useColumnList.ts"],"sourcesContent":["import {\n  ColumnDescriptor,\n  ColumnListPermissions,\n} from \"@vuu-ui/vuu-table-types\";\nimport {\n  FormEventHandler,\n  SyntheticEvent,\n  useCallback,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\nimport { queryClosest } from \"@vuu-ui/vuu-utils\";\n\nexport type ColumnChangeHandler = (\n  columnName: string,\n  propertyName: keyof ColumnDescriptor | \"subscribed\",\n  value: string | number | boolean,\n) => void;\n\nexport type ColumnItem = Pick<\n  ColumnDescriptor,\n  \"hidden\" | \"label\" | \"name\" | \"serverDataType\"\n> & {\n  isCalculated: boolean;\n  subscribed: boolean;\n};\n\nexport interface ColumnSearchProps {\n  classBase: string;\n  classBaseListItem: string;\n  columnItems: ColumnItem[];\n  onChange: ColumnChangeHandler;\n  permissions: ColumnListPermissions;\n}\n\nexport const useColumnList = ({\n  classBase,\n  classBaseListItem,\n  columnItems,\n  onChange,\n  permissions: { allowHideColumns, allowRemoveColumns },\n}: ColumnSearchProps) => {\n  const [searchState, setSearchState] = useState<{\n    searchText: string;\n  }>({ searchText: \"\" });\n\n  const visibleColumnsRef = useRef<ColumnItem[] | undefined>(undefined);\n\n  const hideOnly = useMemo(\n    () => allowHideColumns && !allowRemoveColumns,\n    [allowHideColumns, allowRemoveColumns],\n  );\n\n  useMemo(() => {\n    if (searchState.searchText) {\n      visibleColumnsRef.current = columnItems.filter(\n        (item) => item.name.indexOf(searchState.searchText) !== -1,\n      );\n    }\n  }, [columnItems, searchState.searchText]);\n\n  const handleChangeSearchInput = useCallback<FormEventHandler>(\n    (evt) => {\n      const { value } = evt.target as HTMLInputElement;\n      if (value) {\n        visibleColumnsRef.current = columnItems.filter(\n          (item) => item.name.indexOf(value) !== -1,\n        );\n      } else {\n        visibleColumnsRef.current = undefined;\n      }\n      setSearchState({\n        searchText: value,\n      });\n    },\n    [columnItems],\n  );\n\n  const handleChangeListItem = useCallback(\n    ({ target }: SyntheticEvent) => {\n      const input = target as HTMLInputElement;\n      const listItem = queryClosest(target, `.${classBaseListItem}`);\n      if (listItem) {\n        const {\n          dataset: { name },\n        } = listItem;\n        if (name) {\n          const saltCheckbox = queryClosest(target, `.${classBase}-checkBox`);\n          const saltSwitch = queryClosest(target, `.${classBase}-switch`);\n\n          if (saltCheckbox && !hideOnly) {\n            onChange(name, \"subscribed\", input.checked);\n          } else if (saltSwitch || hideOnly) {\n            onChange(name, \"hidden\", input.checked === false);\n          }\n        }\n      }\n    },\n    [classBase, classBaseListItem, hideOnly, onChange],\n  );\n\n  return {\n    onChangeSearchInput: handleChangeSearchInput,\n    onChangeListItem: handleChangeListItem,\n    searchState,\n    visibleColumnItems: visibleColumnsRef.current ?? columnItems,\n  };\n};\n"],"names":[],"mappings":";;;AAoCO,MAAM,gBAAgB,CAAC;AAAA,EAC5B,SAAA;AAAA,EACA,iBAAA;AAAA,EACA,WAAA;AAAA,EACA,QAAA;AAAA,EACA,WAAA,EAAa,EAAE,gBAAA,EAAkB,kBAAmB;AACtD,CAAyB,KAAA;AACvB,EAAM,MAAA,CAAC,aAAa,cAAc,CAAA,GAAI,SAEnC,EAAE,UAAA,EAAY,IAAI,CAAA;AAErB,EAAM,MAAA,iBAAA,GAAoB,OAAiC,KAAS,CAAA,CAAA;AAEpE,EAAA,MAAM,QAAW,GAAA,OAAA;AAAA,IACf,MAAM,oBAAoB,CAAC,kBAAA;AAAA,IAC3B,CAAC,kBAAkB,kBAAkB;AAAA,GACvC;AAEA,EAAA,OAAA,CAAQ,MAAM;AACZ,IAAA,IAAI,YAAY,UAAY,EAAA;AAC1B,MAAA,iBAAA,CAAkB,UAAU,WAAY,CAAA,MAAA;AAAA,QACtC,CAAC,IAAS,KAAA,IAAA,CAAK,KAAK,OAAQ,CAAA,WAAA,CAAY,UAAU,CAAM,KAAA,CAAA;AAAA,OAC1D;AAAA;AACF,GACC,EAAA,CAAC,WAAa,EAAA,WAAA,CAAY,UAAU,CAAC,CAAA;AAExC,EAAA,MAAM,uBAA0B,GAAA,WAAA;AAAA,IAC9B,CAAC,GAAQ,KAAA;AACP,MAAM,MAAA,EAAE,KAAM,EAAA,GAAI,GAAI,CAAA,MAAA;AACtB,MAAA,IAAI,KAAO,EAAA;AACT,QAAA,iBAAA,CAAkB,UAAU,WAAY,CAAA,MAAA;AAAA,UACtC,CAAC,IAAS,KAAA,IAAA,CAAK,IAAK,CAAA,OAAA,CAAQ,KAAK,CAAM,KAAA,CAAA;AAAA,SACzC;AAAA,OACK,MAAA;AACL,QAAA,iBAAA,CAAkB,OAAU,GAAA,KAAA,CAAA;AAAA;AAE9B,MAAe,cAAA,CAAA;AAAA,QACb,UAAY,EAAA;AAAA,OACb,CAAA;AAAA,KACH;AAAA,IACA,CAAC,WAAW;AAAA,GACd;AAEA,EAAA,MAAM,oBAAuB,GAAA,WAAA;AAAA,IAC3B,CAAC,EAAE,MAAA,EAA6B,KAAA;AAC9B,MAAA,MAAM,KAAQ,GAAA,MAAA;AACd,MAAA,MAAM,QAAW,GAAA,YAAA,CAAa,MAAQ,EAAA,CAAA,CAAA,EAAI,iBAAiB,CAAE,CAAA,CAAA;AAC7D,MAAA,IAAI,QAAU,EAAA;AACZ,QAAM,MAAA;AAAA,UACJ,OAAA,EAAS,EAAE,IAAK;AAAA,SACd,GAAA,QAAA;AACJ,QAAA,IAAI,IAAM,EAAA;AACR,UAAA,MAAM,YAAe,GAAA,YAAA,CAAa,MAAQ,EAAA,CAAA,CAAA,EAAI,SAAS,CAAW,SAAA,CAAA,CAAA;AAClE,UAAA,MAAM,UAAa,GAAA,YAAA,CAAa,MAAQ,EAAA,CAAA,CAAA,EAAI,SAAS,CAAS,OAAA,CAAA,CAAA;AAE9D,UAAI,IAAA,YAAA,IAAgB,CAAC,QAAU,EAAA;AAC7B,YAAS,QAAA,CAAA,IAAA,EAAM,YAAc,EAAA,KAAA,CAAM,OAAO,CAAA;AAAA,WAC5C,MAAA,IAAW,cAAc,QAAU,EAAA;AACjC,YAAA,QAAA,CAAS,IAAM,EAAA,QAAA,EAAU,KAAM,CAAA,OAAA,KAAY,KAAK,CAAA;AAAA;AAClD;AACF;AACF,KACF;AAAA,IACA,CAAC,SAAA,EAAW,iBAAmB,EAAA,QAAA,EAAU,QAAQ;AAAA,GACnD;AAEA,EAAO,OAAA;AAAA,IACL,mBAAqB,EAAA,uBAAA;AAAA,IACrB,gBAAkB,EAAA,oBAAA;AAAA,IAClB,WAAA;AAAA,IACA,kBAAA,EAAoB,kBAAkB,OAAW,IAAA;AAAA,GACnD;AACF;;;;"}

package/esm/index.js

@@ -6,7 +6,7 @@ export { DropdownCell } from './cell-renderers/dropdown-cell/DropdownCell.js';
 export { LookupCell } from './cell-renderers/lookup-cell/LookupCell.js';
 export { PctProgressCell } from './cell-renderers/pct-progress-cell/PctProgressCell.js';
 import './cell-renderers/progress-cell/ProgressCell.js';
-export { ColumnList } from './column-list/ColumnList.js';
+export { ColumnList, classBase, classBaseListItem } from './column-list/ColumnList.js';
 export { ColumnMenu } from './column-menu/ColumnMenu.js';
 export { useColumnActions } from './column-menu/useColumnActions.js';
 export { ColumnSettingsPanel } from './table-column-settings/ColumnSettingsPanel.js';

package/esm/table-column-settings/TableSettingsPanel.css.js

@@ -1,4 +1,4 @@
-var tableSettingsPanelCss = ".vuuTableSettingsPanel {\n    --vuu-svg-text-strikethrough: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 48 24\"><path d=\"M28.3333 9.33334C28.8867 9.33334 29.3333 8.88668 29.3333 8.33334C29.3333 7.78001 28.8867 7.33334 28.3333 7.33334H20.26L22.26 9.33334H23.48L23.1133 10.1867L24.5067 11.58L25.4733 9.33334H28.3333ZM27.6267 16.5867L18.7467 7.70668C18.4867 7.44668 18.0667 7.44668 17.8067 7.70668C17.5467 7.96668 17.5467 8.38668 17.8067 8.64668L21.98 12.82L20.88 15.38C20.62 15.9933 21.0667 16.6667 21.7267 16.6667C22.0933 16.6667 22.4267 16.4467 22.5733 16.1067L23.38 14.22L26.68 17.52C26.94 17.78 27.36 17.78 27.62 17.52C27.8867 17.2667 27.8867 16.8467 27.6267 16.5867Z\"/></svg>');\n    --vuu-svg-text-Tt: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 48 24\"><path d=\"M17.6667 7.66666C17.6667 8.21999 18.1133 8.66666 18.6667 8.66666H21V15.6667C21 16.22 21.4467 16.6667 22 16.6667C22.5533 16.6667 23 16.22 23 15.6667V8.66666H25.3333C25.8867 8.66666 26.3333 8.21999 26.3333 7.66666C26.3333 7.11332 25.8867 6.66666 25.3333 6.66666H18.6667C18.1133 6.66666 17.6667 7.11332 17.6667 7.66666ZM29.3333 9.99999H25.3333C24.78 9.99999 24.3333 10.4467 24.3333 11C24.3333 11.5533 24.78 12 25.3333 12H26.3333V15.6667C26.3333 16.22 26.78 16.6667 27.3333 16.6667C27.8867 16.6667 28.3333 16.22 28.3333 15.6667V12H29.3333C29.8867 12 30.3333 11.5533 30.3333 11C30.3333 10.4467 29.8867 9.99999 29.3333 9.99999Z\" /></svg>');\n    --vuu-svg-text-T: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 48 24\"><path d=\"M19.3333 7.66666C19.3333 8.21999 19.78 8.66666 20.3333 8.66666H23V15.6667C23 16.22 23.4467 16.6667 24 16.6667C24.5533 16.6667 25 16.22 25 15.6667V8.66666H27.6667C28.22 8.66666 28.6667 8.21999 28.6667 7.66666C28.6667 7.11332 28.22 6.66666 27.6667 6.66666H20.3333C19.78 6.66666 19.3333 7.11332 19.3333 7.66666Z\"/></svg>');\n    --vuu-svg-stripes: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\"><rect x=\"2\" y=\"2\" width=\"12\" height=\"2\" rx=\"0.3\"/><rect x=\"2\" y=\"5\" width=\"12\" height=\"2\" rx=\"0.3\"/><rect x=\"2\" y=\"8\" width=\"12\" height=\"2\" rx=\"0.3\"/><rect x=\"2\" y=\"11\" width=\"12\" height=\"2\" rx=\"0.3\"/></svg>');\n    --vuu-svg-row-lines: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\"><rect x=\"2\" y=\"3\" width=\"12\" height=\"1\" rx=\"0.3\" /><rect x=\"2\" y=\"6\" width=\"12\" height=\"1\" rx=\"0.3\" /><rect x=\"2\" y=\"9\" width=\"12\" height=\"1\" rx=\"0.3\" /><rect x=\"2\" y=\"12\" width=\"12\" height=\"1\" rx=\"0.3\"/></svg>');\n    --vuu-svg-col-lines: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\"><rect x=\"3\" y=\"14\" width=\"12\" height=\"1\" rx=\"0.3\" transform=\"rotate(-90 3 14)\"/><rect x=\"6\" y=\"14\" width=\"12\" height=\"1\" rx=\"0.3\" transform=\"rotate(-90 6 14)\"/><rect x=\"9\" y=\"14\" width=\"12\" height=\"1\" rx=\"0.3\" transform=\"rotate(-90 9 14)\"/><rect x=\"12\" y=\"14\" width=\"12\" height=\"1\" rx=\"0.3\" transform=\"rotate(-90 12 14)\"/></svg>');\n\n    display: flex;\n    flex-direction: column;\n    gap: 24px;\n    height: 100%;\n    max-width: 254px;\n    padding: 24px 2px 0 2px;\n}\n\n\n.vuuTableSettingsPanel [data-icon=\"text-strikethrough\"]{\n    --vuu-icon-svg: var(--vuu-svg-text-strikethrough);\n}\n.vuuTableSettingsPanel [data-icon=\"text-Tt\"]{\n    --vuu-icon-svg: var(--vuu-svg-text-Tt);\n}\n.vuuTableSettingsPanel [data-icon=\"text-T\"]{\n    --vuu-icon-svg: var(--vuu-svg-text-T);\n}\n.vuuTableSettingsPanel [data-icon=\"col-lines\"]{\n    --vuu-icon-svg: var(--vuu-svg-col-lines);\n}\n.vuuTableSettingsPanel [data-icon=\"row-lines\"]{\n    --vuu-icon-svg: var(--vuu-svg-row-lines);\n}\n.vuuTableSettingsPanel [data-icon=\"row-striping\"]{\n    --vuu-icon-svg: var(--vuu-svg-stripes);\n}\n\n.vuuTableSettingsPanel-header {\n    border-top: solid 2px var(--vuu-color-gray-30);\n    font-size: 14px;\n    font-weight: 600;\n    padding-top: 24px;\n}\n\n.vuuTableSettingsPanel .vuuColumnList {\n    flex-grow: 1;\n    flex-shrink:  1;\n    flex-basis: 0;\n}\n\n.vuuTableSettingsPanel-calculatedButtonbar {\n    --vuu-icon-size: 16px;\n    --saltButton-height: 24px;\n    --saltButton-width: 24px;\n    align-items: center;\n    display: flex;\n    flex: 0 0 32px;\n    gap: 12px;\n}\n\n\n\n\n\n\n";
+var tableSettingsPanelCss = ".vuuTableSettingsPanel {\n    --vuuScrollable-size: 6px;\n    --vuu-svg-text-strikethrough: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 48 24\"><path d=\"M28.3333 9.33334C28.8867 9.33334 29.3333 8.88668 29.3333 8.33334C29.3333 7.78001 28.8867 7.33334 28.3333 7.33334H20.26L22.26 9.33334H23.48L23.1133 10.1867L24.5067 11.58L25.4733 9.33334H28.3333ZM27.6267 16.5867L18.7467 7.70668C18.4867 7.44668 18.0667 7.44668 17.8067 7.70668C17.5467 7.96668 17.5467 8.38668 17.8067 8.64668L21.98 12.82L20.88 15.38C20.62 15.9933 21.0667 16.6667 21.7267 16.6667C22.0933 16.6667 22.4267 16.4467 22.5733 16.1067L23.38 14.22L26.68 17.52C26.94 17.78 27.36 17.78 27.62 17.52C27.8867 17.2667 27.8867 16.8467 27.6267 16.5867Z\"/></svg>');\n    --vuu-svg-text-Tt: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 48 24\"><path d=\"M17.6667 7.66666C17.6667 8.21999 18.1133 8.66666 18.6667 8.66666H21V15.6667C21 16.22 21.4467 16.6667 22 16.6667C22.5533 16.6667 23 16.22 23 15.6667V8.66666H25.3333C25.8867 8.66666 26.3333 8.21999 26.3333 7.66666C26.3333 7.11332 25.8867 6.66666 25.3333 6.66666H18.6667C18.1133 6.66666 17.6667 7.11332 17.6667 7.66666ZM29.3333 9.99999H25.3333C24.78 9.99999 24.3333 10.4467 24.3333 11C24.3333 11.5533 24.78 12 25.3333 12H26.3333V15.6667C26.3333 16.22 26.78 16.6667 27.3333 16.6667C27.8867 16.6667 28.3333 16.22 28.3333 15.6667V12H29.3333C29.8867 12 30.3333 11.5533 30.3333 11C30.3333 10.4467 29.8867 9.99999 29.3333 9.99999Z\" /></svg>');\n    --vuu-svg-text-T: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 48 24\"><path d=\"M19.3333 7.66666C19.3333 8.21999 19.78 8.66666 20.3333 8.66666H23V15.6667C23 16.22 23.4467 16.6667 24 16.6667C24.5533 16.6667 25 16.22 25 15.6667V8.66666H27.6667C28.22 8.66666 28.6667 8.21999 28.6667 7.66666C28.6667 7.11332 28.22 6.66666 27.6667 6.66666H20.3333C19.78 6.66666 19.3333 7.11332 19.3333 7.66666Z\"/></svg>');\n    --vuu-svg-stripes: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\"><rect x=\"2\" y=\"2\" width=\"12\" height=\"2\" rx=\"0.3\"/><rect x=\"2\" y=\"5\" width=\"12\" height=\"2\" rx=\"0.3\"/><rect x=\"2\" y=\"8\" width=\"12\" height=\"2\" rx=\"0.3\"/><rect x=\"2\" y=\"11\" width=\"12\" height=\"2\" rx=\"0.3\"/></svg>');\n    --vuu-svg-row-lines: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\"><rect x=\"2\" y=\"3\" width=\"12\" height=\"1\" rx=\"0.3\" /><rect x=\"2\" y=\"6\" width=\"12\" height=\"1\" rx=\"0.3\" /><rect x=\"2\" y=\"9\" width=\"12\" height=\"1\" rx=\"0.3\" /><rect x=\"2\" y=\"12\" width=\"12\" height=\"1\" rx=\"0.3\"/></svg>');\n    --vuu-svg-col-lines: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\"><rect x=\"3\" y=\"14\" width=\"12\" height=\"1\" rx=\"0.3\" transform=\"rotate(-90 3 14)\"/><rect x=\"6\" y=\"14\" width=\"12\" height=\"1\" rx=\"0.3\" transform=\"rotate(-90 6 14)\"/><rect x=\"9\" y=\"14\" width=\"12\" height=\"1\" rx=\"0.3\" transform=\"rotate(-90 9 14)\"/><rect x=\"12\" y=\"14\" width=\"12\" height=\"1\" rx=\"0.3\" transform=\"rotate(-90 12 14)\"/></svg>');\n\n    display: flex;\n    flex-direction: column;\n    gap: 24px;\n    height: 100%;\n    max-width: 254px;\n    padding: 12px 2px var(--salt-spacing-200) 2px;\n}\n\n\n.vuuTableSettingsPanel [data-icon=\"text-strikethrough\"]{\n    --vuu-icon-svg: var(--vuu-svg-text-strikethrough);\n}\n.vuuTableSettingsPanel [data-icon=\"text-Tt\"]{\n    --vuu-icon-svg: var(--vuu-svg-text-Tt);\n}\n.vuuTableSettingsPanel [data-icon=\"text-T\"]{\n    --vuu-icon-svg: var(--vuu-svg-text-T);\n}\n.vuuTableSettingsPanel [data-icon=\"col-lines\"]{\n    --vuu-icon-svg: var(--vuu-svg-col-lines);\n}\n.vuuTableSettingsPanel [data-icon=\"row-lines\"]{\n    --vuu-icon-svg: var(--vuu-svg-row-lines);\n}\n.vuuTableSettingsPanel [data-icon=\"row-striping\"]{\n    --vuu-icon-svg: var(--vuu-svg-stripes);\n}\n\n.vuuTableSettingsPanel-header {\n    border-top: solid 2px var(--vuu-color-gray-30);\n    font-size: 14px;\n    font-weight: 600;\n    padding-top: 24px;\n}\n\n.vuuTableSettingsPanel-columnListContainer {\n\n    flex-grow: 1;\n    flex-shrink:  1;\n    flex-basis: 0;\n    position: relative;\n    overflow: auto;\n    .vuuColumnList {\n        height: 100%;\n    }\n}\n\n.vuuTableSettingsPanel-calculatedButtonbar {\n    --vuu-icon-size: 16px;\n    --saltButton-height: 24px;\n    --saltButton-width: 24px;\n    align-items: center;\n    display: flex;\n    flex: 0 0 32px;\n    gap: 12px;\n}\n\n\n\n\n\n\n";
 
 export { tableSettingsPanelCss as default };
 //# sourceMappingURL=TableSettingsPanel.css.js.map

package/esm/table-column-settings/TableSettingsPanel.js

@@ -5,6 +5,7 @@ import { useWindow } from '@salt-ds/window';
 import { ColumnList } from '../column-list/ColumnList.js';
 import { useTableSettings } from './useTableSettings.js';
 import { VuuInput, Icon } from '@vuu-ui/vuu-ui-controls';
+import cx from 'clsx';
 import tableSettingsPanelCss from './TableSettingsPanel.css.js';
 
 const classBase = "vuuTableSettingsPanel";
@@ -115,7 +116,7 @@ const TableSettingsPanel = ({
         )
       ] })
     ] }) : null,
-    /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsx("div", { className: cx(`${classBase}-columnListContainer`, "vuuScrollable"), children: /* @__PURE__ */ jsx(
       ColumnList,
       {
         columnItems,
@@ -124,7 +125,7 @@ const TableSettingsPanel = ({
         onNavigateToColumn,
         onReorderColumnItems
       }
-    ),
+    ) }),
     allowCalculatedColumns ? /* @__PURE__ */ jsxs("div", { className: `${classBase}-calculatedButtonbar`, children: [
       /* @__PURE__ */ jsx(Button, { "data-icon": "plus", onClick: onAddCalculatedColumn }),
       /* @__PURE__ */ jsx("span", { className: `${classBase}-calculatedLabel`, children: "Add calculated column" })

package/esm/table-column-settings/TableSettingsPanel.js.map

@@ -1 +1 @@
-{"version":3,"file":"TableSettingsPanel.js","sources":["../../../../packages/vuu-table-extras/src/table-column-settings/TableSettingsPanel.tsx"],"sourcesContent":["import {\n  Button,\n  FormField,\n  FormFieldLabel,\n  ToggleButton,\n  ToggleButtonGroup,\n} from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport {\n  TableSettingsPermissions,\n  TableSettingsProps,\n} from \"@vuu-ui/vuu-table-types\";\nimport { ColumnList } from \"../column-list\";\nimport { useTableSettings } from \"./useTableSettings\";\nimport { Icon } from \"@vuu-ui/vuu-ui-controls\";\nimport { VuuInput } from \"@vuu-ui/vuu-ui-controls\";\n\nimport tableSettingsPanelCss from \"./TableSettingsPanel.css\";\n\nconst classBase = \"vuuTableSettingsPanel\";\n\nexport const defaultTableSettingsPermissions: Readonly<TableSettingsPermissions> =\n  {\n    allowColumnLabelCase: true,\n    allowColumnDefaultWidth: true,\n    allowGridSeparators: true,\n    allowReorderColumns: true,\n    allowRemoveColumns: true,\n    allowHideColumns: true,\n    allowCalculatedColumns: true,\n  };\n\n/**\n  The TableSettingsPanel assumes 'ownership' of the tableSettings.\n  It updates the settings in state locally and notifies caller of\n  every change via onChange callback\n */\nexport const TableSettingsPanel = ({\n  availableColumns,\n  onAddCalculatedColumn,\n  onConfigChange,\n  onDataSourceConfigChange,\n  onNavigateToColumn,\n  tableConfig: tableConfigProp,\n  permissions = defaultTableSettingsPermissions,\n}: TableSettingsProps) => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-table-settings-panel\",\n    css: tableSettingsPanelCss,\n    window: targetWindow,\n  });\n\n  const {\n    columnItems,\n    columnLabelsValue,\n    onChangeColumnLabels,\n    onChangeTableAttribute,\n    onReorderColumnItems,\n    onColumnChange,\n    onCommitColumnWidth,\n    tableConfig,\n  } = useTableSettings({\n    availableColumns,\n    onConfigChange,\n    onDataSourceConfigChange,\n    tableConfig: tableConfigProp,\n  });\n\n  const {\n    allowColumnLabelCase = true,\n    allowColumnDefaultWidth = true,\n    allowGridSeparators = true,\n    allowCalculatedColumns = true,\n    ...columnListPermissions\n  } = permissions;\n\n  return (\n    <div className={classBase}>\n      {allowColumnLabelCase ||\n      allowColumnDefaultWidth ||\n      allowGridSeparators ? (\n        <div className={`${classBase}-header`}>\n          <span>Column Settings</span>\n        </div>\n      ) : null}\n\n      {allowColumnDefaultWidth ? (\n        <FormField>\n          <FormFieldLabel>Column Width</FormFieldLabel>\n          <VuuInput\n            className=\"vuuInput\"\n            data-embedded\n            onCommit={onCommitColumnWidth}\n          />\n        </FormField>\n      ) : null}\n\n      {allowColumnLabelCase ? (\n        <FormField>\n          <FormFieldLabel>Column Labels</FormFieldLabel>\n          <ToggleButtonGroup\n            className=\"vuuToggleButtonGroup\"\n            onChange={onChangeColumnLabels}\n            value={columnLabelsValue}\n          >\n            <ToggleButton className=\"vuuIconToggleButton\" value={0}>\n              <Icon name=\"text-strikethrough\" size={48} />\n            </ToggleButton>\n            <ToggleButton className=\"vuuIconToggleButton\" value={1}>\n              <Icon name=\"text-Tt\" size={48} />\n            </ToggleButton>\n            <ToggleButton className=\"vuuIconToggleButton\" value={2}>\n              <Icon name=\"text-T\" size={48} />\n            </ToggleButton>\n          </ToggleButtonGroup>\n        </FormField>\n      ) : null}\n\n      {allowGridSeparators ? (\n        <FormField>\n          <FormFieldLabel>Grid separators</FormFieldLabel>\n          <div className=\"saltToggleButtonGroup vuuStateButtonGroup saltToggleButtonGroup-horizontal\">\n            <ToggleButton\n              selected={tableConfig.zebraStripes ?? false}\n              onChange={onChangeTableAttribute}\n              value=\"zebraStripes\"\n            >\n              <Icon name=\"row-striping\" size={16} />\n            </ToggleButton>\n            <ToggleButton\n              selected={tableConfig.rowSeparators ?? false}\n              onChange={onChangeTableAttribute}\n              value=\"rowSeparators\"\n            >\n              <Icon name=\"row-lines\" size={16} />\n            </ToggleButton>\n            <ToggleButton\n              selected={tableConfig.columnSeparators ?? false}\n              onChange={onChangeTableAttribute}\n              value=\"columnSeparators\"\n            >\n              <Icon name=\"col-lines\" size={16} />\n            </ToggleButton>\n          </div>\n        </FormField>\n      ) : null}\n\n      <ColumnList\n        columnItems={columnItems}\n        permissions={columnListPermissions}\n        onChange={onColumnChange}\n        onNavigateToColumn={onNavigateToColumn}\n        onReorderColumnItems={onReorderColumnItems}\n      />\n\n      {allowCalculatedColumns ? (\n        <div className={`${classBase}-calculatedButtonbar`}>\n          <Button data-icon=\"plus\" onClick={onAddCalculatedColumn} />\n          <span className={`${classBase}-calculatedLabel`}>\n            Add calculated column\n          </span>\n        </div>\n      ) : null}\n    </div>\n  );\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"TableSettingsPanel.js","sources":["../../../../packages/vuu-table-extras/src/table-column-settings/TableSettingsPanel.tsx"],"sourcesContent":["import {\n  Button,\n  FormField,\n  FormFieldLabel,\n  ToggleButton,\n  ToggleButtonGroup,\n} from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport {\n  TableSettingsPermissions,\n  TableSettingsProps,\n} from \"@vuu-ui/vuu-table-types\";\nimport { ColumnList } from \"../column-list\";\nimport { useTableSettings } from \"./useTableSettings\";\nimport { Icon } from \"@vuu-ui/vuu-ui-controls\";\nimport { VuuInput } from \"@vuu-ui/vuu-ui-controls\";\nimport cx from \"clsx\";\n\nimport tableSettingsPanelCss from \"./TableSettingsPanel.css\";\n\nconst classBase = \"vuuTableSettingsPanel\";\n\nexport const defaultTableSettingsPermissions: Readonly<TableSettingsPermissions> =\n  {\n    allowColumnLabelCase: true,\n    allowColumnDefaultWidth: true,\n    allowGridSeparators: true,\n    allowReorderColumns: true,\n    allowRemoveColumns: true,\n    allowHideColumns: true,\n    allowCalculatedColumns: true,\n  };\n\n/**\n  The TableSettingsPanel assumes 'ownership' of the tableSettings.\n  It updates the settings in state locally and notifies caller of\n  every change via onChange callback\n */\nexport const TableSettingsPanel = ({\n  availableColumns,\n  onAddCalculatedColumn,\n  onConfigChange,\n  onDataSourceConfigChange,\n  onNavigateToColumn,\n  tableConfig: tableConfigProp,\n  permissions = defaultTableSettingsPermissions,\n}: TableSettingsProps) => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-table-settings-panel\",\n    css: tableSettingsPanelCss,\n    window: targetWindow,\n  });\n\n  const {\n    columnItems,\n    columnLabelsValue,\n    onChangeColumnLabels,\n    onChangeTableAttribute,\n    onReorderColumnItems,\n    onColumnChange,\n    onCommitColumnWidth,\n    tableConfig,\n  } = useTableSettings({\n    availableColumns,\n    onConfigChange,\n    onDataSourceConfigChange,\n    tableConfig: tableConfigProp,\n  });\n\n  const {\n    allowColumnLabelCase = true,\n    allowColumnDefaultWidth = true,\n    allowGridSeparators = true,\n    allowCalculatedColumns = true,\n    ...columnListPermissions\n  } = permissions;\n\n  return (\n    <div className={classBase}>\n      {allowColumnLabelCase ||\n      allowColumnDefaultWidth ||\n      allowGridSeparators ? (\n        <div className={`${classBase}-header`}>\n          <span>Column Settings</span>\n        </div>\n      ) : null}\n\n      {allowColumnDefaultWidth ? (\n        <FormField>\n          <FormFieldLabel>Column Width</FormFieldLabel>\n          <VuuInput\n            className=\"vuuInput\"\n            data-embedded\n            onCommit={onCommitColumnWidth}\n          />\n        </FormField>\n      ) : null}\n\n      {allowColumnLabelCase ? (\n        <FormField>\n          <FormFieldLabel>Column Labels</FormFieldLabel>\n          <ToggleButtonGroup\n            className=\"vuuToggleButtonGroup\"\n            onChange={onChangeColumnLabels}\n            value={columnLabelsValue}\n          >\n            <ToggleButton className=\"vuuIconToggleButton\" value={0}>\n              <Icon name=\"text-strikethrough\" size={48} />\n            </ToggleButton>\n            <ToggleButton className=\"vuuIconToggleButton\" value={1}>\n              <Icon name=\"text-Tt\" size={48} />\n            </ToggleButton>\n            <ToggleButton className=\"vuuIconToggleButton\" value={2}>\n              <Icon name=\"text-T\" size={48} />\n            </ToggleButton>\n          </ToggleButtonGroup>\n        </FormField>\n      ) : null}\n\n      {allowGridSeparators ? (\n        <FormField>\n          <FormFieldLabel>Grid separators</FormFieldLabel>\n          <div className=\"saltToggleButtonGroup vuuStateButtonGroup saltToggleButtonGroup-horizontal\">\n            <ToggleButton\n              selected={tableConfig.zebraStripes ?? false}\n              onChange={onChangeTableAttribute}\n              value=\"zebraStripes\"\n            >\n              <Icon name=\"row-striping\" size={16} />\n            </ToggleButton>\n            <ToggleButton\n              selected={tableConfig.rowSeparators ?? false}\n              onChange={onChangeTableAttribute}\n              value=\"rowSeparators\"\n            >\n              <Icon name=\"row-lines\" size={16} />\n            </ToggleButton>\n            <ToggleButton\n              selected={tableConfig.columnSeparators ?? false}\n              onChange={onChangeTableAttribute}\n              value=\"columnSeparators\"\n            >\n              <Icon name=\"col-lines\" size={16} />\n            </ToggleButton>\n          </div>\n        </FormField>\n      ) : null}\n\n      <div className={cx(`${classBase}-columnListContainer`, \"vuuScrollable\")}>\n        <ColumnList\n          columnItems={columnItems}\n          permissions={columnListPermissions}\n          onChange={onColumnChange}\n          onNavigateToColumn={onNavigateToColumn}\n          onReorderColumnItems={onReorderColumnItems}\n        />\n      </div>\n\n      {allowCalculatedColumns ? (\n        <div className={`${classBase}-calculatedButtonbar`}>\n          <Button data-icon=\"plus\" onClick={onAddCalculatedColumn} />\n          <span className={`${classBase}-calculatedLabel`}>\n            Add calculated column\n          </span>\n        </div>\n      ) : null}\n    </div>\n  );\n};\n"],"names":[],"mappings":"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"}

package/esm/table-column-settings/useTableSettings.js

@@ -3,17 +3,21 @@ import { reorderColumnItems, subscribedOnly, addColumnToSubscribedColumns, query
 import { useState, useMemo, useCallback } from 'react';
 
 const buildColumnItems = (availableColumns, configuredColumns) => {
-  return availableColumns.map(({ name, serverDataType }) => {
-    const configuredColumn = configuredColumns.find((col) => col.name === name);
-    return {
-      hidden: configuredColumn?.hidden,
-      isCalculated: isCalculatedColumn(name),
-      label: configuredColumn?.label ?? name,
-      name,
-      serverDataType,
-      subscribed: configuredColumn !== void 0
-    };
-  });
+  return availableColumns.map(
+    ({ name, label = name, serverDataType }) => {
+      const configuredColumn = configuredColumns.find(
+        (col) => col.name === name
+      );
+      return {
+        hidden: configuredColumn?.hidden,
+        isCalculated: isCalculatedColumn(name),
+        label: configuredColumn?.label ?? label,
+        name,
+        serverDataType,
+        subscribed: configuredColumn !== void 0
+      };
+    }
+  );
 };
 const useTableSettings = ({
   availableColumns: availableColumnsProp,

package/esm/table-column-settings/useTableSettings.js.map

@@ -1 +1 @@
-{"version":3,"file":"useTableSettings.js","sources":["../../../../packages/vuu-table-extras/src/table-column-settings/useTableSettings.ts"],"sourcesContent":["import { SchemaColumn } from \"@vuu-ui/vuu-data-types\";\nimport { updateTableConfig } from \"@vuu-ui/vuu-table\";\nimport {\n  ColumnDescriptor,\n  TableConfig,\n  TableSettingsProps,\n} from \"@vuu-ui/vuu-table-types\";\nimport {\n  addColumnToSubscribedColumns,\n  queryClosest,\n  isCalculatedColumn,\n  subscribedOnly,\n  useLayoutEffectSkipFirst,\n  CommitHandler,\n  reorderColumnItems,\n} from \"@vuu-ui/vuu-utils\";\nimport {\n  MouseEvent,\n  SyntheticEvent,\n  useCallback,\n  useMemo,\n  useState,\n} from \"react\";\nimport { ColumnChangeHandler } from \"../column-list\";\n\nexport type ColumnLike = {\n  name: string;\n};\n\nexport type ColumnItem = Pick<\n  ColumnDescriptor,\n  \"hidden\" | \"label\" | \"name\" | \"serverDataType\"\n> & {\n  isCalculated: boolean;\n  subscribed: boolean;\n};\n\nconst buildColumnItems = (\n  availableColumns: SchemaColumn[],\n  configuredColumns: ColumnDescriptor[],\n): ColumnItem[] => {\n  return availableColumns.map<ColumnItem>(({ name, serverDataType }) => {\n    const configuredColumn = configuredColumns.find((col) => col.name === name);\n    return {\n      hidden: configuredColumn?.hidden,\n      isCalculated: isCalculatedColumn(name),\n      label: configuredColumn?.label ?? name,\n      name,\n      serverDataType,\n      subscribed: configuredColumn !== undefined,\n    };\n  });\n};\n\ntype ColumnState = {\n  availableColumns: SchemaColumn[];\n  tableConfig: TableConfig;\n};\n\nexport const useTableSettings = ({\n  availableColumns: availableColumnsProp,\n  onConfigChange,\n  onDataSourceConfigChange,\n  tableConfig: tableConfigProp,\n}: Omit<TableSettingsProps, \"onAddCalculatedColumn\">) => {\n  const [{ availableColumns, tableConfig }, setColumnState] =\n    useState<ColumnState>({\n      availableColumns: availableColumnsProp,\n      tableConfig: tableConfigProp,\n    });\n\n  const columnItems = useMemo(\n    () => buildColumnItems(availableColumns, tableConfig.columns),\n    [availableColumns, tableConfig.columns],\n  );\n\n  const handleReorderColumnItems = useCallback(\n    (columnItems: ColumnItem[]) => {\n      const orderedNames = columnItems.map((c) => c.name);\n      setColumnState((state) => {\n        const newAvailableColumns = reorderColumnItems(\n          state.availableColumns,\n          orderedNames,\n        );\n        const newColumns = reorderColumnItems(\n          tableConfig.columns,\n          orderedNames,\n        );\n        return {\n          availableColumns: newAvailableColumns,\n          tableConfig: {\n            ...state.tableConfig,\n            columns: newColumns,\n          },\n        };\n      });\n    },\n    [tableConfig.columns],\n  );\n\n  const handleColumnChange = useCallback<ColumnChangeHandler>(\n    (name, property, value) => {\n      // to be applied immediately\n      const columnItem = columnItems.find((col) => col.name === name);\n      if (property === \"subscribed\") {\n        if (columnItem?.subscribed) {\n          const subscribedColumns = tableConfig.columns\n            .filter((col) => col.name !== name)\n            .map((col) => col.name);\n          setColumnState((state) => ({\n            ...state,\n            tableConfig: {\n              ...tableConfig,\n              columns: tableConfig.columns.filter(\n                subscribedOnly(subscribedColumns),\n              ),\n            },\n          }));\n          onDataSourceConfigChange({\n            columns: subscribedColumns,\n          });\n        } else {\n          const newConfig = {\n            ...tableConfig,\n            columns: addColumnToSubscribedColumns(\n              tableConfig.columns,\n              availableColumns,\n              name,\n            ),\n          };\n          setColumnState((state) => ({\n            ...state,\n            tableConfig: newConfig,\n          }));\n\n          const subscribedColumns = newConfig.columns.map((col) => col.name);\n\n          onDataSourceConfigChange({\n            columns: subscribedColumns,\n          });\n        }\n      } else if (columnItem?.subscribed) {\n        const column = tableConfig.columns.find((col) => col.name === name);\n        if (column) {\n          const newConfig = updateTableConfig(tableConfig, {\n            type: \"column-prop\",\n            property,\n            column,\n            value,\n          });\n          setColumnState((state) => ({\n            ...state,\n            tableConfig: newConfig,\n          }));\n        }\n      }\n    },\n    [availableColumns, columnItems, onDataSourceConfigChange, tableConfig],\n  );\n\n  const handleChangeColumnLabels = useCallback((evt: SyntheticEvent) => {\n    const button = queryClosest<HTMLButtonElement>(evt.target, \"button\");\n    if (button) {\n      const value = parseInt(button.value);\n      const columnFormatHeader =\n        value === 0 ? undefined : value === 1 ? \"capitalize\" : \"uppercase\";\n      setColumnState((state) => ({\n        ...state,\n        tableConfig: {\n          ...state.tableConfig,\n          columnFormatHeader,\n        },\n      }));\n    }\n  }, []);\n\n  const handleChangeTableAttribute = useCallback(\n    (evt: MouseEvent<HTMLButtonElement>) => {\n      const button = queryClosest<HTMLButtonElement>(evt.target, \"button\");\n      if (button) {\n        const { ariaPressed, value } = button;\n        setColumnState((state) => ({\n          ...state,\n          tableConfig: {\n            ...state.tableConfig,\n            [value]: ariaPressed !== \"true\",\n          },\n        }));\n      }\n    },\n    [],\n  );\n\n  const handleCommitColumnWidth = useCallback<CommitHandler>((_, value) => {\n    if (typeof value === \"string\") {\n      const columnDefaultWidth = parseInt(value);\n      if (!isNaN(columnDefaultWidth)) {\n        setColumnState((state) => ({\n          ...state,\n          tableConfig: {\n            ...state.tableConfig,\n            columnDefaultWidth,\n          },\n        }));\n      }\n    }\n  }, []);\n\n  useLayoutEffectSkipFirst(() => {\n    onConfigChange?.(tableConfig);\n  }, [onConfigChange, tableConfig]);\n\n  const columnLabelsValue =\n    tableConfig.columnFormatHeader === undefined\n      ? 0\n      : tableConfig.columnFormatHeader === \"capitalize\"\n        ? 1\n        : 2;\n\n  return {\n    columnItems,\n    columnLabelsValue,\n    onChangeColumnLabels: handleChangeColumnLabels,\n    onChangeTableAttribute: handleChangeTableAttribute,\n    onColumnChange: handleColumnChange,\n    onCommitColumnWidth: handleCommitColumnWidth,\n    onReorderColumnItems: handleReorderColumnItems,\n    tableConfig,\n  };\n};\n"],"names":["columnItems"],"mappings":"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"}
+{"version":3,"file":"useTableSettings.js","sources":["../../../../packages/vuu-table-extras/src/table-column-settings/useTableSettings.ts"],"sourcesContent":["import { SchemaColumn } from \"@vuu-ui/vuu-data-types\";\nimport { updateTableConfig } from \"@vuu-ui/vuu-table\";\nimport {\n  ColumnDescriptor,\n  TableConfig,\n  TableSettingsProps,\n} from \"@vuu-ui/vuu-table-types\";\nimport {\n  addColumnToSubscribedColumns,\n  queryClosest,\n  isCalculatedColumn,\n  subscribedOnly,\n  useLayoutEffectSkipFirst,\n  CommitHandler,\n  reorderColumnItems,\n} from \"@vuu-ui/vuu-utils\";\nimport {\n  MouseEvent,\n  SyntheticEvent,\n  useCallback,\n  useMemo,\n  useState,\n} from \"react\";\nimport { ColumnChangeHandler } from \"../column-list\";\nimport { ColumnItem } from \"../column-list/useColumnList\";\n\nexport type ColumnLike = {\n  name: string;\n};\n\nconst buildColumnItems = (\n  availableColumns: Array<SchemaColumn & { label?: string }>,\n  configuredColumns: ColumnDescriptor[],\n): ColumnItem[] => {\n  return availableColumns.map<ColumnItem>(\n    ({ name, label = name, serverDataType }) => {\n      const configuredColumn = configuredColumns.find(\n        (col) => col.name === name,\n      );\n      return {\n        hidden: configuredColumn?.hidden,\n        isCalculated: isCalculatedColumn(name),\n        label: configuredColumn?.label ?? label,\n        name,\n        serverDataType,\n        subscribed: configuredColumn !== undefined,\n      };\n    },\n  );\n};\n\ntype ColumnState = {\n  availableColumns: SchemaColumn[];\n  tableConfig: TableConfig;\n};\n\nexport const useTableSettings = ({\n  availableColumns: availableColumnsProp,\n  onConfigChange,\n  onDataSourceConfigChange,\n  tableConfig: tableConfigProp,\n}: Omit<TableSettingsProps, \"onAddCalculatedColumn\">) => {\n  const [{ availableColumns, tableConfig }, setColumnState] =\n    useState<ColumnState>({\n      availableColumns: availableColumnsProp,\n      tableConfig: tableConfigProp,\n    });\n\n  const columnItems = useMemo(\n    () => buildColumnItems(availableColumns, tableConfig.columns),\n    [availableColumns, tableConfig.columns],\n  );\n\n  const handleReorderColumnItems = useCallback(\n    (columnItems: ColumnItem[]) => {\n      const orderedNames = columnItems.map((c) => c.name);\n      setColumnState((state) => {\n        const newAvailableColumns = reorderColumnItems(\n          state.availableColumns,\n          orderedNames,\n        );\n        const newColumns = reorderColumnItems(\n          tableConfig.columns,\n          orderedNames,\n        );\n        return {\n          availableColumns: newAvailableColumns,\n          tableConfig: {\n            ...state.tableConfig,\n            columns: newColumns,\n          },\n        };\n      });\n    },\n    [tableConfig.columns],\n  );\n\n  const handleColumnChange = useCallback<ColumnChangeHandler>(\n    (name, property, value) => {\n      // to be applied immediately\n      const columnItem = columnItems.find((col) => col.name === name);\n      if (property === \"subscribed\") {\n        if (columnItem?.subscribed) {\n          const subscribedColumns = tableConfig.columns\n            .filter((col) => col.name !== name)\n            .map((col) => col.name);\n          setColumnState((state) => ({\n            ...state,\n            tableConfig: {\n              ...tableConfig,\n              columns: tableConfig.columns.filter(\n                subscribedOnly(subscribedColumns),\n              ),\n            },\n          }));\n          onDataSourceConfigChange({\n            columns: subscribedColumns,\n          });\n        } else {\n          const newConfig = {\n            ...tableConfig,\n            columns: addColumnToSubscribedColumns(\n              tableConfig.columns,\n              availableColumns,\n              name,\n            ),\n          };\n          setColumnState((state) => ({\n            ...state,\n            tableConfig: newConfig,\n          }));\n\n          const subscribedColumns = newConfig.columns.map((col) => col.name);\n\n          onDataSourceConfigChange({\n            columns: subscribedColumns,\n          });\n        }\n      } else if (columnItem?.subscribed) {\n        const column = tableConfig.columns.find((col) => col.name === name);\n        if (column) {\n          const newConfig = updateTableConfig(tableConfig, {\n            type: \"column-prop\",\n            property,\n            column,\n            value,\n          });\n          setColumnState((state) => ({\n            ...state,\n            tableConfig: newConfig,\n          }));\n        }\n      }\n    },\n    [availableColumns, columnItems, onDataSourceConfigChange, tableConfig],\n  );\n\n  const handleChangeColumnLabels = useCallback((evt: SyntheticEvent) => {\n    const button = queryClosest<HTMLButtonElement>(evt.target, \"button\");\n    if (button) {\n      const value = parseInt(button.value);\n      const columnFormatHeader =\n        value === 0 ? undefined : value === 1 ? \"capitalize\" : \"uppercase\";\n      setColumnState((state) => ({\n        ...state,\n        tableConfig: {\n          ...state.tableConfig,\n          columnFormatHeader,\n        },\n      }));\n    }\n  }, []);\n\n  const handleChangeTableAttribute = useCallback(\n    (evt: MouseEvent<HTMLButtonElement>) => {\n      const button = queryClosest<HTMLButtonElement>(evt.target, \"button\");\n      if (button) {\n        const { ariaPressed, value } = button;\n        setColumnState((state) => ({\n          ...state,\n          tableConfig: {\n            ...state.tableConfig,\n            [value]: ariaPressed !== \"true\",\n          },\n        }));\n      }\n    },\n    [],\n  );\n\n  const handleCommitColumnWidth = useCallback<CommitHandler>((_, value) => {\n    if (typeof value === \"string\") {\n      const columnDefaultWidth = parseInt(value);\n      if (!isNaN(columnDefaultWidth)) {\n        setColumnState((state) => ({\n          ...state,\n          tableConfig: {\n            ...state.tableConfig,\n            columnDefaultWidth,\n          },\n        }));\n      }\n    }\n  }, []);\n\n  useLayoutEffectSkipFirst(() => {\n    onConfigChange?.(tableConfig);\n  }, [onConfigChange, tableConfig]);\n\n  const columnLabelsValue =\n    tableConfig.columnFormatHeader === undefined\n      ? 0\n      : tableConfig.columnFormatHeader === \"capitalize\"\n        ? 1\n        : 2;\n\n  return {\n    columnItems,\n    columnLabelsValue,\n    onChangeColumnLabels: handleChangeColumnLabels,\n    onChangeTableAttribute: handleChangeTableAttribute,\n    onColumnChange: handleColumnChange,\n    onCommitColumnWidth: handleCommitColumnWidth,\n    onReorderColumnItems: handleReorderColumnItems,\n    tableConfig,\n  };\n};\n"],"names":["columnItems"],"mappings":";;;;AA8BA,MAAM,gBAAA,GAAmB,CACvB,gBAAA,EACA,iBACiB,KAAA;AACjB,EAAA,OAAO,gBAAiB,CAAA,GAAA;AAAA,IACtB,CAAC,EAAE,IAAA,EAAM,KAAQ,GAAA,IAAA,EAAM,gBAAqB,KAAA;AAC1C,MAAA,MAAM,mBAAmB,iBAAkB,CAAA,IAAA;AAAA,QACzC,CAAC,GAAQ,KAAA,GAAA,CAAI,IAAS,KAAA;AAAA,OACxB;AACA,MAAO,OAAA;AAAA,QACL,QAAQ,gBAAkB,EAAA,MAAA;AAAA,QAC1B,YAAA,EAAc,mBAAmB,IAAI,CAAA;AAAA,QACrC,KAAA,EAAO,kBAAkB,KAAS,IAAA,KAAA;AAAA,QAClC,IAAA;AAAA,QACA,cAAA;AAAA,QACA,YAAY,gBAAqB,KAAA,KAAA;AAAA,OACnC;AAAA;AACF,GACF;AACF,CAAA;AAOO,MAAM,mBAAmB,CAAC;AAAA,EAC/B,gBAAkB,EAAA,oBAAA;AAAA,EAClB,cAAA;AAAA,EACA,wBAAA;AAAA,EACA,WAAa,EAAA;AACf,CAAyD,KAAA;AACvD,EAAA,MAAM,CAAC,EAAE,gBAAA,EAAkB,aAAe,EAAA,cAAc,IACtD,QAAsB,CAAA;AAAA,IACpB,gBAAkB,EAAA,oBAAA;AAAA,IAClB,WAAa,EAAA;AAAA,GACd,CAAA;AAEH,EAAA,MAAM,WAAc,GAAA,OAAA;AAAA,IAClB,MAAM,gBAAA,CAAiB,gBAAkB,EAAA,WAAA,CAAY,OAAO,CAAA;AAAA,IAC5D,CAAC,gBAAkB,EAAA,WAAA,CAAY,OAAO;AAAA,GACxC;AAEA,EAAA,MAAM,wBAA2B,GAAA,WAAA;AAAA,IAC/B,CAACA,YAA8B,KAAA;AAC7B,MAAA,MAAM,eAAeA,YAAY,CAAA,GAAA,CAAI,CAAC,CAAA,KAAM,EAAE,IAAI,CAAA;AAClD,MAAA,cAAA,CAAe,CAAC,KAAU,KAAA;AACxB,QAAA,MAAM,mBAAsB,GAAA,kBAAA;AAAA,UAC1B,KAAM,CAAA,gBAAA;AAAA,UACN;AAAA,SACF;AACA,QAAA,MAAM,UAAa,GAAA,kBAAA;AAAA,UACjB,WAAY,CAAA,OAAA;AAAA,UACZ;AAAA,SACF;AACA,QAAO,OAAA;AAAA,UACL,gBAAkB,EAAA,mBAAA;AAAA,UAClB,WAAa,EAAA;AAAA,YACX,GAAG,KAAM,CAAA,WAAA;AAAA,YACT,OAAS,EAAA;AAAA;AACX,SACF;AAAA,OACD,CAAA;AAAA,KACH;AAAA,IACA,CAAC,YAAY,OAAO;AAAA,GACtB;AAEA,EAAA,MAAM,kBAAqB,GAAA,WAAA;AAAA,IACzB,CAAC,IAAM,EAAA,QAAA,EAAU,KAAU,KAAA;AAEzB,MAAA,MAAM,aAAa,WAAY,CAAA,IAAA,CAAK,CAAC,GAAQ,KAAA,GAAA,CAAI,SAAS,IAAI,CAAA;AAC9D,MAAA,IAAI,aAAa,YAAc,EAAA;AAC7B,QAAA,IAAI,YAAY,UAAY,EAAA;AAC1B,UAAA,MAAM,iBAAoB,GAAA,WAAA,CAAY,OACnC,CAAA,MAAA,CAAO,CAAC,GAAQ,KAAA,GAAA,CAAI,IAAS,KAAA,IAAI,CACjC,CAAA,GAAA,CAAI,CAAC,GAAA,KAAQ,IAAI,IAAI,CAAA;AACxB,UAAA,cAAA,CAAe,CAAC,KAAW,MAAA;AAAA,YACzB,GAAG,KAAA;AAAA,YACH,WAAa,EAAA;AAAA,cACX,GAAG,WAAA;AAAA,cACH,OAAA,EAAS,YAAY,OAAQ,CAAA,MAAA;AAAA,gBAC3B,eAAe,iBAAiB;AAAA;AAClC;AACF,WACA,CAAA,CAAA;AACF,UAAyB,wBAAA,CAAA;AAAA,YACvB,OAAS,EAAA;AAAA,WACV,CAAA;AAAA,SACI,MAAA;AACL,UAAA,MAAM,SAAY,GAAA;AAAA,YAChB,GAAG,WAAA;AAAA,YACH,OAAS,EAAA,4BAAA;AAAA,cACP,WAAY,CAAA,OAAA;AAAA,cACZ,gBAAA;AAAA,cACA;AAAA;AACF,WACF;AACA,UAAA,cAAA,CAAe,CAAC,KAAW,MAAA;AAAA,YACzB,GAAG,KAAA;AAAA,YACH,WAAa,EAAA;AAAA,WACb,CAAA,CAAA;AAEF,UAAA,MAAM,oBAAoB,SAAU,CAAA,OAAA,CAAQ,IAAI,CAAC,GAAA,KAAQ,IAAI,IAAI,CAAA;AAEjE,UAAyB,wBAAA,CAAA;AAAA,YACvB,OAAS,EAAA;AAAA,WACV,CAAA;AAAA;AACH,OACF,MAAA,IAAW,YAAY,UAAY,EAAA;AACjC,QAAM,MAAA,MAAA,GAAS,YAAY,OAAQ,CAAA,IAAA,CAAK,CAAC,GAAQ,KAAA,GAAA,CAAI,SAAS,IAAI,CAAA;AAClE,QAAA,IAAI,MAAQ,EAAA;AACV,UAAM,MAAA,SAAA,GAAY,kBAAkB,WAAa,EAAA;AAAA,YAC/C,IAAM,EAAA,aAAA;AAAA,YACN,QAAA;AAAA,YACA,MAAA;AAAA,YACA;AAAA,WACD,CAAA;AACD,UAAA,cAAA,CAAe,CAAC,KAAW,MAAA;AAAA,YACzB,GAAG,KAAA;AAAA,YACH,WAAa,EAAA;AAAA,WACb,CAAA,CAAA;AAAA;AACJ;AACF,KACF;AAAA,IACA,CAAC,gBAAA,EAAkB,WAAa,EAAA,wBAAA,EAA0B,WAAW;AAAA,GACvE;AAEA,EAAM,MAAA,wBAAA,GAA2B,WAAY,CAAA,CAAC,GAAwB,KAAA;AACpE,IAAA,MAAM,MAAS,GAAA,YAAA,CAAgC,GAAI,CAAA,MAAA,EAAQ,QAAQ,CAAA;AACnE,IAAA,IAAI,MAAQ,EAAA;AACV,MAAM,MAAA,KAAA,GAAQ,QAAS,CAAA,MAAA,CAAO,KAAK,CAAA;AACnC,MAAA,MAAM,qBACJ,KAAU,KAAA,CAAA,GAAI,KAAY,CAAA,GAAA,KAAA,KAAU,IAAI,YAAe,GAAA,WAAA;AACzD,MAAA,cAAA,CAAe,CAAC,KAAW,MAAA;AAAA,QACzB,GAAG,KAAA;AAAA,QACH,WAAa,EAAA;AAAA,UACX,GAAG,KAAM,CAAA,WAAA;AAAA,UACT;AAAA;AACF,OACA,CAAA,CAAA;AAAA;AACJ,GACF,EAAG,EAAE,CAAA;AAEL,EAAA,MAAM,0BAA6B,GAAA,WAAA;AAAA,IACjC,CAAC,GAAuC,KAAA;AACtC,MAAA,MAAM,MAAS,GAAA,YAAA,CAAgC,GAAI,CAAA,MAAA,EAAQ,QAAQ,CAAA;AACnE,MAAA,IAAI,MAAQ,EAAA;AACV,QAAM,MAAA,EAAE,WAAa,EAAA,KAAA,EAAU,GAAA,MAAA;AAC/B,QAAA,cAAA,CAAe,CAAC,KAAW,MAAA;AAAA,UACzB,GAAG,KAAA;AAAA,UACH,WAAa,EAAA;AAAA,YACX,GAAG,KAAM,CAAA,WAAA;AAAA,YACT,CAAC,KAAK,GAAG,WAAgB,KAAA;AAAA;AAC3B,SACA,CAAA,CAAA;AAAA;AACJ,KACF;AAAA,IACA;AAAC,GACH;AAEA,EAAA,MAAM,uBAA0B,GAAA,WAAA,CAA2B,CAAC,CAAA,EAAG,KAAU,KAAA;AACvE,IAAI,IAAA,OAAO,UAAU,QAAU,EAAA;AAC7B,MAAM,MAAA,kBAAA,GAAqB,SAAS,KAAK,CAAA;AACzC,MAAI,IAAA,CAAC,KAAM,CAAA,kBAAkB,CAAG,EAAA;AAC9B,QAAA,cAAA,CAAe,CAAC,KAAW,MAAA;AAAA,UACzB,GAAG,KAAA;AAAA,UACH,WAAa,EAAA;AAAA,YACX,GAAG,KAAM,CAAA,WAAA;AAAA,YACT;AAAA;AACF,SACA,CAAA,CAAA;AAAA;AACJ;AACF,GACF,EAAG,EAAE,CAAA;AAEL,EAAA,wBAAA,CAAyB,MAAM;AAC7B,IAAA,cAAA,GAAiB,WAAW,CAAA;AAAA,GAC3B,EAAA,CAAC,cAAgB,EAAA,WAAW,CAAC,CAAA;AAEhC,EAAM,MAAA,iBAAA,GACJ,YAAY,kBAAuB,KAAA,KAAA,CAAA,GAC/B,IACA,WAAY,CAAA,kBAAA,KAAuB,eACjC,CACA,GAAA,CAAA;AAER,EAAO,OAAA;AAAA,IACL,WAAA;AAAA,IACA,iBAAA;AAAA,IACA,oBAAsB,EAAA,wBAAA;AAAA,IACtB,sBAAwB,EAAA,0BAAA;AAAA,IACxB,cAAgB,EAAA,kBAAA;AAAA,IAChB,mBAAqB,EAAA,uBAAA;AAAA,IACrB,oBAAsB,EAAA,wBAAA;AAAA,IACtB;AAAA,GACF;AACF;;;;"}

package/package.json

@@ -1,20 +1,20 @@
 {
-  "version": "0.13.22",
+  "version": "0.13.24",
   "author": "heswell",
   "license": "Apache-2.0",
   "devDependencies": {
-    "@vuu-ui/vuu-filter-types": "0.13.22",
-    "@vuu-ui/vuu-protocol-types": "0.13.22"
+    "@vuu-ui/vuu-filter-types": "0.13.24",
+    "@vuu-ui/vuu-protocol-types": "0.13.24"
   },
   "dependencies": {
-    "@vuu-ui/vuu-codemirror": "0.13.22",
-    "@vuu-ui/vuu-data-react": "0.13.22",
-    "@vuu-ui/vuu-data-types": "0.13.22",
-    "@vuu-ui/vuu-table-types": "0.13.22",
-    "@vuu-ui/vuu-popups": "0.13.22",
-    "@vuu-ui/vuu-table": "0.13.22",
-    "@vuu-ui/vuu-utils": "0.13.22",
-    "@vuu-ui/vuu-ui-controls": "0.13.22",
+    "@vuu-ui/vuu-codemirror": "0.13.24",
+    "@vuu-ui/vuu-data-react": "0.13.24",
+    "@vuu-ui/vuu-data-types": "0.13.24",
+    "@vuu-ui/vuu-table-types": "0.13.24",
+    "@vuu-ui/vuu-popups": "0.13.24",
+    "@vuu-ui/vuu-table": "0.13.24",
+    "@vuu-ui/vuu-utils": "0.13.24",
+    "@vuu-ui/vuu-ui-controls": "0.13.24",
     "@lezer/lr": "1.4.2",
     "@salt-ds/core": "1.43.0",
     "@salt-ds/styles": "0.2.1",

package/types/column-list/ColumnList.d.ts

@@ -1,10 +1,9 @@
-import { ColumnDescriptor, ColumnListPermissions } from "@vuu-ui/vuu-table-types";
+import { ColumnListPermissions } from "@vuu-ui/vuu-table-types";
 import { HTMLAttributes } from "react";
-import { ColumnItem } from "../table-column-settings/useTableSettings";
-export type ColumnChangeHandler = (columnName: string, propertyName: keyof ColumnDescriptor | "subscribed", value: string | number | boolean) => void;
-export interface ColumnListProps extends Omit<HTMLAttributes<HTMLDivElement>, "onChange"> {
-    columnItems: ColumnItem[];
-    onChange: ColumnChangeHandler;
+import { type ColumnItem, type ColumnSearchProps } from "./useColumnList";
+export declare const classBase = "vuuColumnList";
+export declare const classBaseListItem = "vuuColumnListItem";
+export interface ColumnListProps extends Pick<ColumnSearchProps, "columnItems" | "onChange">, Omit<HTMLAttributes<HTMLDivElement>, "onChange"> {
     onNavigateToColumn?: (columnName: string) => void;
     onReorderColumnItems?: (columnItems: ColumnItem[]) => void;
     permissions?: ColumnListPermissions;

package/types/column-list/index.d.ts

@@ -1 +1,2 @@
 export * from "./ColumnList";
+export type { ColumnChangeHandler, ColumnItem } from "./useColumnList";

package/types/column-list/useColumnList.d.ts

@@ -0,0 +1,22 @@
+import { ColumnDescriptor, ColumnListPermissions } from "@vuu-ui/vuu-table-types";
+import { FormEventHandler, SyntheticEvent } from "react";
+export type ColumnChangeHandler = (columnName: string, propertyName: keyof ColumnDescriptor | "subscribed", value: string | number | boolean) => void;
+export type ColumnItem = Pick<ColumnDescriptor, "hidden" | "label" | "name" | "serverDataType"> & {
+    isCalculated: boolean;
+    subscribed: boolean;
+};
+export interface ColumnSearchProps {
+    classBase: string;
+    classBaseListItem: string;
+    columnItems: ColumnItem[];
+    onChange: ColumnChangeHandler;
+    permissions: ColumnListPermissions;
+}
+export declare const useColumnList: ({ classBase, classBaseListItem, columnItems, onChange, permissions: { allowHideColumns, allowRemoveColumns }, }: ColumnSearchProps) => {
+    onChangeSearchInput: FormEventHandler;
+    onChangeListItem: ({ target }: SyntheticEvent) => void;
+    searchState: {
+        searchText: string;
+    };
+    visibleColumnItems: ColumnItem[];
+};

package/types/index.d.ts

@@ -7,7 +7,7 @@ export type { ColumnDisplayActionHandler, TableSettingsActionHandler, } from "./
 export { ColumnSettingsPanel } from "./table-column-settings/ColumnSettingsPanel";
 export { useColumnSettings } from "./table-column-settings/useColumnSettings";
 export { defaultTableSettingsPermissions, TableSettingsPanel, } from "./table-column-settings/TableSettingsPanel";
-export { type ColumnItem, useTableSettings, } from "./table-column-settings/useTableSettings";
+export { useTableSettings } from "./table-column-settings/useTableSettings";
 export { columnSettingsFromColumnMenuPermissions, tableSettingsFromColumnMenuPermissions, useTableAndColumnSettings, } from "./table-column-settings/useTableAndColumnSettings";
 export * from "./column-expression-input";
 export * from "./column-expression-panel";
@@ -15,3 +15,4 @@ export * from "./column-formatting-settings";
 export * from "./datasource-stats";
 export { TableProvider, useTableContext } from "./table-provider/TableProvider";
 export { FreezeControl } from "./freeze-control/FreezeControl";
+export { type ColumnChangeHandler, type ColumnItem, ColumnList, } from "./column-list";

package/types/table-column-settings/useTableSettings.d.ts

@@ -1,14 +1,11 @@
-import { ColumnDescriptor, TableConfig, TableSettingsProps } from "@vuu-ui/vuu-table-types";
+import { TableConfig, TableSettingsProps } from "@vuu-ui/vuu-table-types";
 import { CommitHandler } from "@vuu-ui/vuu-utils";
 import { MouseEvent, SyntheticEvent } from "react";
 import { ColumnChangeHandler } from "../column-list";
+import { ColumnItem } from "../column-list/useColumnList";
 export type ColumnLike = {
     name: string;
 };
-export type ColumnItem = Pick<ColumnDescriptor, "hidden" | "label" | "name" | "serverDataType"> & {
-    isCalculated: boolean;
-    subscribed: boolean;
-};
 export declare const useTableSettings: ({ availableColumns: availableColumnsProp, onConfigChange, onDataSourceConfigChange, tableConfig: tableConfigProp, }: Omit<TableSettingsProps, "onAddCalculatedColumn">) => {
     columnItems: ColumnItem[];
     columnLabelsValue: number;

package/cjs/table-column-settings/useColumnList.js

@@ -1,22 +0,0 @@
-'use strict';
-
-var react = require('react');
-
-const useColumnList = ({ columnItems }) => {
-  const [searchState, setSearchState] = react.useState({ searchText: "" });
-  const visibleColumnsRef = react.useRef(void 0);
-  const handleChange = react.useCallback((evt) => {
-    const { value } = evt.target;
-    setSearchState({
-      searchText: value
-    });
-  }, []);
-  return {
-    onChange: handleChange,
-    searchState,
-    visibleColumnItems: visibleColumnsRef.current ?? columnItems
-  };
-};
-
-exports.useColumnList = useColumnList;
-//# sourceMappingURL=useColumnList.js.map

package/cjs/table-column-settings/useColumnList.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"useColumnList.js","sources":["../../../../packages/vuu-table-extras/src/table-column-settings/useColumnList.ts"],"sourcesContent":["import { FormEventHandler, useCallback, useRef, useState } from \"react\";\nimport { ColumnItem } from \"./useTableSettings\";\n\nexport interface ColumnSearchProps {\n  columnItems: ColumnItem[];\n}\n\nexport const useColumnList = ({ columnItems }: ColumnSearchProps) => {\n  const [searchState, setSearchState] = useState<{\n    searchText: string;\n  }>({ searchText: \"\" });\n\n  const visibleColumnsRef = useRef<ColumnItem[] | undefined>(undefined);\n\n  const handleChange = useCallback<FormEventHandler>((evt) => {\n    const { value } = evt.target as HTMLInputElement;\n    setSearchState({\n      searchText: value,\n    });\n  }, []);\n\n  return {\n    onChange: handleChange,\n    searchState,\n    visibleColumnItems: visibleColumnsRef.current ?? columnItems,\n  };\n};\n"],"names":["useState","useRef","useCallback"],"mappings":";;;;AAOO,MAAM,aAAgB,GAAA,CAAC,EAAE,WAAA,EAAqC,KAAA;AACnE,EAAM,MAAA,CAAC,aAAa,cAAc,CAAA,GAAIA,eAEnC,EAAE,UAAA,EAAY,IAAI,CAAA;AAErB,EAAM,MAAA,iBAAA,GAAoBC,aAAiC,KAAS,CAAA,CAAA;AAEpE,EAAM,MAAA,YAAA,GAAeC,iBAA8B,CAAA,CAAC,GAAQ,KAAA;AAC1D,IAAM,MAAA,EAAE,KAAM,EAAA,GAAI,GAAI,CAAA,MAAA;AACtB,IAAe,cAAA,CAAA;AAAA,MACb,UAAY,EAAA;AAAA,KACb,CAAA;AAAA,GACH,EAAG,EAAE,CAAA;AAEL,EAAO,OAAA;AAAA,IACL,QAAU,EAAA,YAAA;AAAA,IACV,WAAA;AAAA,IACA,kBAAA,EAAoB,kBAAkB,OAAW,IAAA;AAAA,GACnD;AACF;;;;"}

package/esm/table-column-settings/useColumnList.js

@@ -1,20 +0,0 @@
-import { useState, useRef, useCallback } from 'react';
-
-const useColumnList = ({ columnItems }) => {
-  const [searchState, setSearchState] = useState({ searchText: "" });
-  const visibleColumnsRef = useRef(void 0);
-  const handleChange = useCallback((evt) => {
-    const { value } = evt.target;
-    setSearchState({
-      searchText: value
-    });
-  }, []);
-  return {
-    onChange: handleChange,
-    searchState,
-    visibleColumnItems: visibleColumnsRef.current ?? columnItems
-  };
-};
-
-export { useColumnList };
-//# sourceMappingURL=useColumnList.js.map

package/esm/table-column-settings/useColumnList.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"useColumnList.js","sources":["../../../../packages/vuu-table-extras/src/table-column-settings/useColumnList.ts"],"sourcesContent":["import { FormEventHandler, useCallback, useRef, useState } from \"react\";\nimport { ColumnItem } from \"./useTableSettings\";\n\nexport interface ColumnSearchProps {\n  columnItems: ColumnItem[];\n}\n\nexport const useColumnList = ({ columnItems }: ColumnSearchProps) => {\n  const [searchState, setSearchState] = useState<{\n    searchText: string;\n  }>({ searchText: \"\" });\n\n  const visibleColumnsRef = useRef<ColumnItem[] | undefined>(undefined);\n\n  const handleChange = useCallback<FormEventHandler>((evt) => {\n    const { value } = evt.target as HTMLInputElement;\n    setSearchState({\n      searchText: value,\n    });\n  }, []);\n\n  return {\n    onChange: handleChange,\n    searchState,\n    visibleColumnItems: visibleColumnsRef.current ?? columnItems,\n  };\n};\n"],"names":[],"mappings":";;AAOO,MAAM,aAAgB,GAAA,CAAC,EAAE,WAAA,EAAqC,KAAA;AACnE,EAAM,MAAA,CAAC,aAAa,cAAc,CAAA,GAAI,SAEnC,EAAE,UAAA,EAAY,IAAI,CAAA;AAErB,EAAM,MAAA,iBAAA,GAAoB,OAAiC,KAAS,CAAA,CAAA;AAEpE,EAAM,MAAA,YAAA,GAAe,WAA8B,CAAA,CAAC,GAAQ,KAAA;AAC1D,IAAM,MAAA,EAAE,KAAM,EAAA,GAAI,GAAI,CAAA,MAAA;AACtB,IAAe,cAAA,CAAA;AAAA,MACb,UAAY,EAAA;AAAA,KACb,CAAA;AAAA,GACH,EAAG,EAAE,CAAA;AAEL,EAAO,OAAA;AAAA,IACL,QAAU,EAAA,YAAA;AAAA,IACV,WAAA;AAAA,IACA,kBAAA,EAAoB,kBAAkB,OAAW,IAAA;AAAA,GACnD;AACF;;;;"}

package/types/table-column-settings/useColumnList.d.ts

@@ -1,12 +0,0 @@
-import { FormEventHandler } from "react";
-import { ColumnItem } from "./useTableSettings";
-export interface ColumnSearchProps {
-    columnItems: ColumnItem[];
-}
-export declare const useColumnList: ({ columnItems }: ColumnSearchProps) => {
-    onChange: FormEventHandler;
-    searchState: {
-        searchText: string;
-    };
-    visibleColumnItems: ColumnItem[];
-};