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

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

@@ -1,6 +1,6 @@
 'use strict';
 
-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";
+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    .vuuHighlight {\n      color: var(--vuu-color-blue-40);\n      text-decoration: underline;\n    }\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 = cssColumnList;
 //# sourceMappingURL=ColumnList.css.js.map

package/cjs/column-list/ColumnList.js

@@ -10,6 +10,7 @@ var cx = require('clsx');
 var react = require('react');
 var useColumnList = require('./useColumnList.js');
 var ColumnList$1 = require('./ColumnList.css.js');
+var vuuTable = require('@vuu-ui/vuu-table');
 
 const classBase = "vuuColumnList";
 const classBaseListItem = "vuuColumnListItem";
@@ -41,12 +42,15 @@ const ColumnListItem = ({
   index,
   item,
   permissions: { allowHideColumns, allowRemoveColumns, allowReorderColumns },
+  searchPattern = "",
   ...optionProps
 }) => {
   const hideOnly = allowHideColumns && !allowRemoveColumns;
   const removeOnly = !allowHideColumns && allowRemoveColumns;
   const hideAndRemove = allowHideColumns && allowRemoveColumns;
   const { handleRef, ref } = useSorting(item.name, index, allowReorderColumns);
+  const value = vuuUtils.getColumnLabel(item);
+  const valueWithHighlighting = vuuTable.useHighlighting(value, searchPattern);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     core.Option,
     {
@@ -74,7 +78,7 @@ const ColumnListItem = ({
             checked: hideOnly ? item?.hidden !== true : item?.subscribed
           }
         ) : null,
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: `${classBase}-text`, children: vuuUtils.getColumnLabel(item) }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: `${classBase}-text`, children: valueWithHighlighting }),
         hideAndRemove ? /* @__PURE__ */ jsxRuntime.jsx(
           core.Switch,
           {
@@ -185,6 +189,7 @@ const ColumnList = ({
             onChange: onChangeListItem,
             onClick: handleClick,
             permissions,
+            searchPattern: searchState.searchText.toLowerCase(),
             value: columnItem
           },
           columnItem.name

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  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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"}
+{"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\";\nimport { useHighlighting } from \"@vuu-ui/vuu-table\";\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  searchPattern = \"\",\n  ...optionProps\n}: OptionProps & {\n  index: number;\n  item: ColumnItem;\n  permissions: ColumnListPermissions;\n  searchPattern?: Lowercase<string>;\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  const value = getColumnLabel(item as ColumnDescriptor);\n  const valueWithHighlighting = useHighlighting(value, searchPattern);\n\n  return (\n    <Option\n      {...optionProps}\n      className={cx(classNameProp, classBaseListItem)}\n      data-name={item.name}\n      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`}>{valueWithHighlighting}</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              searchPattern={\n                searchState.searchText.toLowerCase() as Lowercase<string>\n              }\n              value={columnItem}\n            />\n          ))}\n        </ListBox>\n      </div>\n    </DragDropProvider>\n  );\n};\n"],"names":["jsx","useSortable","useCallback","useMemo","getColumnLabel","useHighlighting","jsxs","Option","IconButton","Icon","Checkbox","Switch","useWindow","useComponentCssInjection","cssColumnList","useRef","useColumnList","reorderColumnItems","DragDropProvider","Input","ListBox"],"mappings":"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"}

package/cjs/column-list/useColumnList.js

@@ -17,28 +17,22 @@ const useColumnList = ({
     [allowHideColumns, allowRemoveColumns]
   );
   react.useMemo(() => {
-    if (searchState.searchText) {
+    const value = searchState.searchText.toLowerCase();
+    if (value) {
+      const pattern = value.toLowerCase();
       visibleColumnsRef.current = columnItems.filter(
-        (item) => item.name.indexOf(searchState.searchText) !== -1
+        ({ name, label = name }) => label.toLowerCase().indexOf(pattern) !== -1
       );
+    } else {
+      visibleColumnsRef.current = void 0;
     }
   }, [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 handleChangeSearchInput = react.useCallback((evt) => {
+    const { value } = evt.target;
+    setSearchState({
+      searchText: value
+    });
+  }, []);
   const handleChangeListItem = react.useCallback(
     ({ target }) => {
       const input = target;

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

@@ -1 +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;;;;"}
+{"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    const value = searchState.searchText.toLowerCase();\n    if (value) {\n      const pattern = value.toLowerCase();\n      visibleColumnsRef.current = columnItems.filter(\n        ({ name, label = name }) => label.toLowerCase().indexOf(pattern) !== -1,\n      );\n    } else {\n      visibleColumnsRef.current = undefined;\n    }\n  }, [columnItems, searchState.searchText]);\n\n  const handleChangeSearchInput = useCallback<FormEventHandler>((evt) => {\n    const { value } = evt.target as HTMLInputElement;\n    setSearchState({\n      searchText: value,\n    });\n  }, []);\n\n  const 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,IAAM,MAAA,KAAA,GAAQ,WAAY,CAAA,UAAA,CAAW,WAAY,EAAA;AACjD,IAAA,IAAI,KAAO,EAAA;AACT,MAAM,MAAA,OAAA,GAAU,MAAM,WAAY,EAAA;AAClC,MAAA,iBAAA,CAAkB,UAAU,WAAY,CAAA,MAAA;AAAA,QACtC,CAAC,EAAE,IAAA,EAAM,KAAQ,GAAA,IAAA,EAAW,KAAA,KAAA,CAAM,WAAY,EAAA,CAAE,OAAQ,CAAA,OAAO,CAAM,KAAA,CAAA;AAAA,OACvE;AAAA,KACK,MAAA;AACL,MAAA,iBAAA,CAAkB,OAAU,GAAA,KAAA,CAAA;AAAA;AAC9B,GACC,EAAA,CAAC,WAAa,EAAA,WAAA,CAAY,UAAU,CAAC,CAAA;AAExC,EAAM,MAAA,uBAAA,GAA0BC,iBAA8B,CAAA,CAAC,GAAQ,KAAA;AACrE,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,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/table-column-settings/useTableAndColumnSettings.js

@@ -92,7 +92,7 @@ const useTableAndColumnSettings = ({
     [showColumnSettingsPanel, tableConfig.columns]
   );
   showTableSettingsRef.current = react.useCallback(() => {
-    showContextPanel("TableSettings", "DataGrid Settings", {
+    showContextPanel("TableSettings", "Table Settings", {
       availableColumns: availableColumns ?? tableConfig.columns.map(({ name, serverDataType }) => ({
         name,
         serverDataType

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

@@ -1 +1 @@
-{"version":3,"file":"useTableAndColumnSettings.js","sources":["../../../../packages/vuu-table-extras/src/table-column-settings/useTableAndColumnSettings.ts"],"sourcesContent":["import { DataSourceConfig, SchemaColumn } from \"@vuu-ui/vuu-data-types\";\nimport {\n  ColumnDescriptor,\n  ColumnMenuPermissions,\n  ColumnSettingsProps,\n  SettingsPermissions,\n  TableConfig,\n  TableSettingsProps,\n} from \"@vuu-ui/vuu-table-types\";\nimport { getCalculatedColumnDetails } from \"@vuu-ui/vuu-utils\";\nimport { useCallback, useRef, useState } from \"react\";\nimport { DisplayColumnSettingsAction } from \"@vuu-ui/vuu-table-extras/src/column-menu/column-action-types\";\nimport { useContextPanel } from \"@vuu-ui/vuu-ui-controls\";\nimport { defaultTableSettingsPermissions } from \"./TableSettingsPanel\";\n\nexport interface TableAndColumnSettingsHookProps {\n  availableColumns: SchemaColumn[];\n  onAvailableColumnsChange?: (columns: SchemaColumn[]) => void;\n  onConfigChange: (config: TableConfig) => void;\n  onCreateCalculatedColumn: (column: ColumnDescriptor) => void;\n  onDataSourceConfigChange: (dataSourceConfig: DataSourceConfig) => void;\n  settingsPermissions?: SettingsPermissions;\n  tableConfig: TableConfig;\n}\n\nexport const columnSettingsFromColumnMenuPermissions = (\n  settings?: boolean | ColumnMenuPermissions,\n) =>\n  typeof settings === undefined\n    ? true\n    : typeof settings === \"boolean\"\n      ? settings\n      : (settings?.allowColumnSettings ?? true);\nexport const tableSettingsFromColumnMenuPermissions = (\n  settings?: boolean | ColumnMenuPermissions,\n) =>\n  typeof settings === undefined\n    ? defaultTableSettingsPermissions\n    : typeof settings === \"boolean\"\n      ? settings\n      : (settings?.allowTableSettings ?? defaultTableSettingsPermissions);\n\nexport const useTableAndColumnSettings = ({\n  availableColumns: availableColumnsProps,\n  settingsPermissions,\n  onAvailableColumnsChange,\n  onConfigChange,\n  onCreateCalculatedColumn,\n  onDataSourceConfigChange,\n  tableConfig,\n}: TableAndColumnSettingsHookProps) => {\n  const showTableSettingsRef = useRef<() => void>(undefined);\n\n  const [availableColumns, setAvailableColumns] = useState<SchemaColumn[]>(\n    availableColumnsProps,\n  );\n\n  const showContextPanel = useContextPanel();\n\n  const handleCancelCreateColumn = useCallback(() => {\n    requestAnimationFrame(() => {\n      showTableSettingsRef.current?.();\n    });\n  }, []);\n\n  const handleCreateCalculatedColumn = useCallback(\n    (column: ColumnDescriptor) => {\n      const { serverDataType } = getCalculatedColumnDetails(column);\n      if (serverDataType) {\n        const newAvailableColumns = availableColumns.concat({\n          name: column.name,\n          serverDataType,\n        });\n        setAvailableColumns(newAvailableColumns);\n        onAvailableColumnsChange?.(newAvailableColumns);\n        requestAnimationFrame(() => {\n          showTableSettingsRef.current?.();\n        });\n        onCreateCalculatedColumn(column);\n      } else {\n        throw Error(\n          \"Cannot create calculatec columns without valis serverDataType\",\n        );\n      }\n    },\n    [availableColumns, onAvailableColumnsChange, onCreateCalculatedColumn],\n  );\n\n  const showColumnSettingsPanel = useCallback(\n    (action: DisplayColumnSettingsAction) => {\n      showContextPanel(\"ColumnSettings\", \"Column Settings\", {\n        column: action.column,\n        onCancelCreateColumn: handleCancelCreateColumn,\n        onConfigChange,\n        onCreateCalculatedColumn: handleCreateCalculatedColumn,\n        tableConfig,\n        vuuTable: action.vuuTable,\n      } as ColumnSettingsProps);\n    },\n    [\n      handleCancelCreateColumn,\n      handleCreateCalculatedColumn,\n      onConfigChange,\n      showContextPanel,\n      tableConfig,\n    ],\n  );\n\n  const handleAddCalculatedColumn = useCallback(() => {\n    showColumnSettingsPanel({\n      column: {\n        name: \"::\",\n        serverDataType: \"string\",\n      },\n      type: \"column-settings\",\n      vuuTable: { module: \"SIMUL\", table: \"instruments\" },\n    });\n  }, [showColumnSettingsPanel]);\n\n  const handleNavigateToColumn = useCallback(\n    (columnName: string) => {\n      const column = tableConfig.columns.find((c) => c.name === columnName);\n      if (column) {\n        showColumnSettingsPanel({\n          type: \"column-settings\",\n          column,\n          //TODO where do we get this from\n          vuuTable: { module: \"SIMUL\", table: \"instruments\" },\n        });\n      }\n    },\n    [showColumnSettingsPanel, tableConfig.columns],\n  );\n\n  showTableSettingsRef.current = useCallback(() => {\n    showContextPanel(\"TableSettings\", \"DataGrid Settings\", {\n      availableColumns:\n        availableColumns ??\n        tableConfig.columns.map(({ name, serverDataType }) => ({\n          name,\n          serverDataType,\n        })),\n      onAddCalculatedColumn: handleAddCalculatedColumn,\n      onConfigChange,\n      onDataSourceConfigChange,\n      onNavigateToColumn: handleNavigateToColumn,\n      permissions: settingsPermissions?.allowTableSettings,\n      tableConfig,\n    } as TableSettingsProps);\n  }, [\n    availableColumns,\n    handleAddCalculatedColumn,\n    handleNavigateToColumn,\n    onConfigChange,\n    onDataSourceConfigChange,\n    settingsPermissions,\n    showContextPanel,\n    tableConfig,\n  ]);\n\n  return {\n    showColumnSettingsPanel,\n    showTableSettingsPanel: showTableSettingsRef.current,\n  };\n};\n"],"names":["defaultTableSettingsPermissions","useRef","useState","useContextPanel","useCallback","getCalculatedColumnDetails"],"mappings":"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"}
+{"version":3,"file":"useTableAndColumnSettings.js","sources":["../../../../packages/vuu-table-extras/src/table-column-settings/useTableAndColumnSettings.ts"],"sourcesContent":["import { DataSourceConfig, SchemaColumn } from \"@vuu-ui/vuu-data-types\";\nimport {\n  ColumnDescriptor,\n  ColumnMenuPermissions,\n  ColumnSettingsProps,\n  SettingsPermissions,\n  TableConfig,\n  TableSettingsProps,\n} from \"@vuu-ui/vuu-table-types\";\nimport { getCalculatedColumnDetails } from \"@vuu-ui/vuu-utils\";\nimport { useCallback, useRef, useState } from \"react\";\nimport { DisplayColumnSettingsAction } from \"@vuu-ui/vuu-table-extras/src/column-menu/column-action-types\";\nimport { useContextPanel } from \"@vuu-ui/vuu-ui-controls\";\nimport { defaultTableSettingsPermissions } from \"./TableSettingsPanel\";\n\nexport interface TableAndColumnSettingsHookProps {\n  availableColumns: SchemaColumn[];\n  onAvailableColumnsChange?: (columns: SchemaColumn[]) => void;\n  onConfigChange: (config: TableConfig) => void;\n  onCreateCalculatedColumn: (column: ColumnDescriptor) => void;\n  onDataSourceConfigChange: (dataSourceConfig: DataSourceConfig) => void;\n  settingsPermissions?: SettingsPermissions;\n  tableConfig: TableConfig;\n}\n\nexport const columnSettingsFromColumnMenuPermissions = (\n  settings?: boolean | ColumnMenuPermissions,\n) =>\n  typeof settings === undefined\n    ? true\n    : typeof settings === \"boolean\"\n      ? settings\n      : (settings?.allowColumnSettings ?? true);\nexport const tableSettingsFromColumnMenuPermissions = (\n  settings?: boolean | ColumnMenuPermissions,\n) =>\n  typeof settings === undefined\n    ? defaultTableSettingsPermissions\n    : typeof settings === \"boolean\"\n      ? settings\n      : (settings?.allowTableSettings ?? defaultTableSettingsPermissions);\n\nexport const useTableAndColumnSettings = ({\n  availableColumns: availableColumnsProps,\n  settingsPermissions,\n  onAvailableColumnsChange,\n  onConfigChange,\n  onCreateCalculatedColumn,\n  onDataSourceConfigChange,\n  tableConfig,\n}: TableAndColumnSettingsHookProps) => {\n  const showTableSettingsRef = useRef<() => void>(undefined);\n\n  const [availableColumns, setAvailableColumns] = useState<SchemaColumn[]>(\n    availableColumnsProps,\n  );\n\n  const showContextPanel = useContextPanel();\n\n  const handleCancelCreateColumn = useCallback(() => {\n    requestAnimationFrame(() => {\n      showTableSettingsRef.current?.();\n    });\n  }, []);\n\n  const handleCreateCalculatedColumn = useCallback(\n    (column: ColumnDescriptor) => {\n      const { serverDataType } = getCalculatedColumnDetails(column);\n      if (serverDataType) {\n        const newAvailableColumns = availableColumns.concat({\n          name: column.name,\n          serverDataType,\n        });\n        setAvailableColumns(newAvailableColumns);\n        onAvailableColumnsChange?.(newAvailableColumns);\n        requestAnimationFrame(() => {\n          showTableSettingsRef.current?.();\n        });\n        onCreateCalculatedColumn(column);\n      } else {\n        throw Error(\n          \"Cannot create calculatec columns without valis serverDataType\",\n        );\n      }\n    },\n    [availableColumns, onAvailableColumnsChange, onCreateCalculatedColumn],\n  );\n\n  const showColumnSettingsPanel = useCallback(\n    (action: DisplayColumnSettingsAction) => {\n      showContextPanel(\"ColumnSettings\", \"Column Settings\", {\n        column: action.column,\n        onCancelCreateColumn: handleCancelCreateColumn,\n        onConfigChange,\n        onCreateCalculatedColumn: handleCreateCalculatedColumn,\n        tableConfig,\n        vuuTable: action.vuuTable,\n      } as ColumnSettingsProps);\n    },\n    [\n      handleCancelCreateColumn,\n      handleCreateCalculatedColumn,\n      onConfigChange,\n      showContextPanel,\n      tableConfig,\n    ],\n  );\n\n  const handleAddCalculatedColumn = useCallback(() => {\n    showColumnSettingsPanel({\n      column: {\n        name: \"::\",\n        serverDataType: \"string\",\n      },\n      type: \"column-settings\",\n      vuuTable: { module: \"SIMUL\", table: \"instruments\" },\n    });\n  }, [showColumnSettingsPanel]);\n\n  const handleNavigateToColumn = useCallback(\n    (columnName: string) => {\n      const column = tableConfig.columns.find((c) => c.name === columnName);\n      if (column) {\n        showColumnSettingsPanel({\n          type: \"column-settings\",\n          column,\n          //TODO where do we get this from\n          vuuTable: { module: \"SIMUL\", table: \"instruments\" },\n        });\n      }\n    },\n    [showColumnSettingsPanel, tableConfig.columns],\n  );\n\n  showTableSettingsRef.current = useCallback(() => {\n    showContextPanel(\"TableSettings\", \"Table Settings\", {\n      availableColumns:\n        availableColumns ??\n        tableConfig.columns.map(({ name, serverDataType }) => ({\n          name,\n          serverDataType,\n        })),\n      onAddCalculatedColumn: handleAddCalculatedColumn,\n      onConfigChange,\n      onDataSourceConfigChange,\n      onNavigateToColumn: handleNavigateToColumn,\n      permissions: settingsPermissions?.allowTableSettings,\n      tableConfig,\n    } as TableSettingsProps);\n  }, [\n    availableColumns,\n    handleAddCalculatedColumn,\n    handleNavigateToColumn,\n    onConfigChange,\n    onDataSourceConfigChange,\n    settingsPermissions,\n    showContextPanel,\n    tableConfig,\n  ]);\n\n  return {\n    showColumnSettingsPanel,\n    showTableSettingsPanel: showTableSettingsRef.current,\n  };\n};\n"],"names":["defaultTableSettingsPermissions","useRef","useState","useContextPanel","useCallback","getCalculatedColumnDetails"],"mappings":"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"}

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

@@ -1,4 +1,4 @@
-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";
+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    .vuuHighlight {\n      color: var(--vuu-color-blue-40);\n      text-decoration: underline;\n    }\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 { cssColumnList as default };
 //# sourceMappingURL=ColumnList.css.js.map

package/esm/column-list/ColumnList.js

@@ -8,6 +8,7 @@ import cx from 'clsx';
 import { useRef, useMemo, useCallback } from 'react';
 import { useColumnList } from './useColumnList.js';
 import cssColumnList from './ColumnList.css.js';
+import { useHighlighting } from '@vuu-ui/vuu-table';
 
 const classBase = "vuuColumnList";
 const classBaseListItem = "vuuColumnListItem";
@@ -39,12 +40,15 @@ const ColumnListItem = ({
   index,
   item,
   permissions: { allowHideColumns, allowRemoveColumns, allowReorderColumns },
+  searchPattern = "",
   ...optionProps
 }) => {
   const hideOnly = allowHideColumns && !allowRemoveColumns;
   const removeOnly = !allowHideColumns && allowRemoveColumns;
   const hideAndRemove = allowHideColumns && allowRemoveColumns;
   const { handleRef, ref } = useSorting(item.name, index, allowReorderColumns);
+  const value = getColumnLabel(item);
+  const valueWithHighlighting = useHighlighting(value, searchPattern);
   return /* @__PURE__ */ jsxs(
     Option,
     {
@@ -72,7 +76,7 @@ const ColumnListItem = ({
             checked: hideOnly ? item?.hidden !== true : item?.subscribed
           }
         ) : null,
-        /* @__PURE__ */ jsx("span", { className: `${classBase}-text`, children: getColumnLabel(item) }),
+        /* @__PURE__ */ jsx("span", { className: `${classBase}-text`, children: valueWithHighlighting }),
         hideAndRemove ? /* @__PURE__ */ jsx(
           Switch,
           {
@@ -183,6 +187,7 @@ const ColumnList = ({
             onChange: onChangeListItem,
             onClick: handleClick,
             permissions,
+            searchPattern: searchState.searchText.toLowerCase(),
             value: columnItem
           },
           columnItem.name

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  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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"}
+{"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\";\nimport { useHighlighting } from \"@vuu-ui/vuu-table\";\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  searchPattern = \"\",\n  ...optionProps\n}: OptionProps & {\n  index: number;\n  item: ColumnItem;\n  permissions: ColumnListPermissions;\n  searchPattern?: Lowercase<string>;\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  const value = getColumnLabel(item as ColumnDescriptor);\n  const valueWithHighlighting = useHighlighting(value, searchPattern);\n\n  return (\n    <Option\n      {...optionProps}\n      className={cx(classNameProp, classBaseListItem)}\n      data-name={item.name}\n      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`}>{valueWithHighlighting}</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              searchPattern={\n                searchState.searchText.toLowerCase() as Lowercase<string>\n              }\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

@@ -15,28 +15,22 @@ const useColumnList = ({
     [allowHideColumns, allowRemoveColumns]
   );
   useMemo(() => {
-    if (searchState.searchText) {
+    const value = searchState.searchText.toLowerCase();
+    if (value) {
+      const pattern = value.toLowerCase();
       visibleColumnsRef.current = columnItems.filter(
-        (item) => item.name.indexOf(searchState.searchText) !== -1
+        ({ name, label = name }) => label.toLowerCase().indexOf(pattern) !== -1
       );
+    } else {
+      visibleColumnsRef.current = void 0;
     }
   }, [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 handleChangeSearchInput = useCallback((evt) => {
+    const { value } = evt.target;
+    setSearchState({
+      searchText: value
+    });
+  }, []);
   const handleChangeListItem = useCallback(
     ({ target }) => {
       const input = target;

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

@@ -1 +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;;;;"}
+{"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    const value = searchState.searchText.toLowerCase();\n    if (value) {\n      const pattern = value.toLowerCase();\n      visibleColumnsRef.current = columnItems.filter(\n        ({ name, label = name }) => label.toLowerCase().indexOf(pattern) !== -1,\n      );\n    } else {\n      visibleColumnsRef.current = undefined;\n    }\n  }, [columnItems, searchState.searchText]);\n\n  const handleChangeSearchInput = useCallback<FormEventHandler>((evt) => {\n    const { value } = evt.target as HTMLInputElement;\n    setSearchState({\n      searchText: value,\n    });\n  }, []);\n\n  const 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,IAAM,MAAA,KAAA,GAAQ,WAAY,CAAA,UAAA,CAAW,WAAY,EAAA;AACjD,IAAA,IAAI,KAAO,EAAA;AACT,MAAM,MAAA,OAAA,GAAU,MAAM,WAAY,EAAA;AAClC,MAAA,iBAAA,CAAkB,UAAU,WAAY,CAAA,MAAA;AAAA,QACtC,CAAC,EAAE,IAAA,EAAM,KAAQ,GAAA,IAAA,EAAW,KAAA,KAAA,CAAM,WAAY,EAAA,CAAE,OAAQ,CAAA,OAAO,CAAM,KAAA,CAAA;AAAA,OACvE;AAAA,KACK,MAAA;AACL,MAAA,iBAAA,CAAkB,OAAU,GAAA,KAAA,CAAA;AAAA;AAC9B,GACC,EAAA,CAAC,WAAa,EAAA,WAAA,CAAY,UAAU,CAAC,CAAA;AAExC,EAAM,MAAA,uBAAA,GAA0B,WAA8B,CAAA,CAAC,GAAQ,KAAA;AACrE,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,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/table-column-settings/useTableAndColumnSettings.js

@@ -90,7 +90,7 @@ const useTableAndColumnSettings = ({
     [showColumnSettingsPanel, tableConfig.columns]
   );
   showTableSettingsRef.current = useCallback(() => {
-    showContextPanel("TableSettings", "DataGrid Settings", {
+    showContextPanel("TableSettings", "Table Settings", {
       availableColumns: availableColumns ?? tableConfig.columns.map(({ name, serverDataType }) => ({
         name,
         serverDataType

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

@@ -1 +1 @@
-{"version":3,"file":"useTableAndColumnSettings.js","sources":["../../../../packages/vuu-table-extras/src/table-column-settings/useTableAndColumnSettings.ts"],"sourcesContent":["import { DataSourceConfig, SchemaColumn } from \"@vuu-ui/vuu-data-types\";\nimport {\n  ColumnDescriptor,\n  ColumnMenuPermissions,\n  ColumnSettingsProps,\n  SettingsPermissions,\n  TableConfig,\n  TableSettingsProps,\n} from \"@vuu-ui/vuu-table-types\";\nimport { getCalculatedColumnDetails } from \"@vuu-ui/vuu-utils\";\nimport { useCallback, useRef, useState } from \"react\";\nimport { DisplayColumnSettingsAction } from \"@vuu-ui/vuu-table-extras/src/column-menu/column-action-types\";\nimport { useContextPanel } from \"@vuu-ui/vuu-ui-controls\";\nimport { defaultTableSettingsPermissions } from \"./TableSettingsPanel\";\n\nexport interface TableAndColumnSettingsHookProps {\n  availableColumns: SchemaColumn[];\n  onAvailableColumnsChange?: (columns: SchemaColumn[]) => void;\n  onConfigChange: (config: TableConfig) => void;\n  onCreateCalculatedColumn: (column: ColumnDescriptor) => void;\n  onDataSourceConfigChange: (dataSourceConfig: DataSourceConfig) => void;\n  settingsPermissions?: SettingsPermissions;\n  tableConfig: TableConfig;\n}\n\nexport const columnSettingsFromColumnMenuPermissions = (\n  settings?: boolean | ColumnMenuPermissions,\n) =>\n  typeof settings === undefined\n    ? true\n    : typeof settings === \"boolean\"\n      ? settings\n      : (settings?.allowColumnSettings ?? true);\nexport const tableSettingsFromColumnMenuPermissions = (\n  settings?: boolean | ColumnMenuPermissions,\n) =>\n  typeof settings === undefined\n    ? defaultTableSettingsPermissions\n    : typeof settings === \"boolean\"\n      ? settings\n      : (settings?.allowTableSettings ?? defaultTableSettingsPermissions);\n\nexport const useTableAndColumnSettings = ({\n  availableColumns: availableColumnsProps,\n  settingsPermissions,\n  onAvailableColumnsChange,\n  onConfigChange,\n  onCreateCalculatedColumn,\n  onDataSourceConfigChange,\n  tableConfig,\n}: TableAndColumnSettingsHookProps) => {\n  const showTableSettingsRef = useRef<() => void>(undefined);\n\n  const [availableColumns, setAvailableColumns] = useState<SchemaColumn[]>(\n    availableColumnsProps,\n  );\n\n  const showContextPanel = useContextPanel();\n\n  const handleCancelCreateColumn = useCallback(() => {\n    requestAnimationFrame(() => {\n      showTableSettingsRef.current?.();\n    });\n  }, []);\n\n  const handleCreateCalculatedColumn = useCallback(\n    (column: ColumnDescriptor) => {\n      const { serverDataType } = getCalculatedColumnDetails(column);\n      if (serverDataType) {\n        const newAvailableColumns = availableColumns.concat({\n          name: column.name,\n          serverDataType,\n        });\n        setAvailableColumns(newAvailableColumns);\n        onAvailableColumnsChange?.(newAvailableColumns);\n        requestAnimationFrame(() => {\n          showTableSettingsRef.current?.();\n        });\n        onCreateCalculatedColumn(column);\n      } else {\n        throw Error(\n          \"Cannot create calculatec columns without valis serverDataType\",\n        );\n      }\n    },\n    [availableColumns, onAvailableColumnsChange, onCreateCalculatedColumn],\n  );\n\n  const showColumnSettingsPanel = useCallback(\n    (action: DisplayColumnSettingsAction) => {\n      showContextPanel(\"ColumnSettings\", \"Column Settings\", {\n        column: action.column,\n        onCancelCreateColumn: handleCancelCreateColumn,\n        onConfigChange,\n        onCreateCalculatedColumn: handleCreateCalculatedColumn,\n        tableConfig,\n        vuuTable: action.vuuTable,\n      } as ColumnSettingsProps);\n    },\n    [\n      handleCancelCreateColumn,\n      handleCreateCalculatedColumn,\n      onConfigChange,\n      showContextPanel,\n      tableConfig,\n    ],\n  );\n\n  const handleAddCalculatedColumn = useCallback(() => {\n    showColumnSettingsPanel({\n      column: {\n        name: \"::\",\n        serverDataType: \"string\",\n      },\n      type: \"column-settings\",\n      vuuTable: { module: \"SIMUL\", table: \"instruments\" },\n    });\n  }, [showColumnSettingsPanel]);\n\n  const handleNavigateToColumn = useCallback(\n    (columnName: string) => {\n      const column = tableConfig.columns.find((c) => c.name === columnName);\n      if (column) {\n        showColumnSettingsPanel({\n          type: \"column-settings\",\n          column,\n          //TODO where do we get this from\n          vuuTable: { module: \"SIMUL\", table: \"instruments\" },\n        });\n      }\n    },\n    [showColumnSettingsPanel, tableConfig.columns],\n  );\n\n  showTableSettingsRef.current = useCallback(() => {\n    showContextPanel(\"TableSettings\", \"DataGrid Settings\", {\n      availableColumns:\n        availableColumns ??\n        tableConfig.columns.map(({ name, serverDataType }) => ({\n          name,\n          serverDataType,\n        })),\n      onAddCalculatedColumn: handleAddCalculatedColumn,\n      onConfigChange,\n      onDataSourceConfigChange,\n      onNavigateToColumn: handleNavigateToColumn,\n      permissions: settingsPermissions?.allowTableSettings,\n      tableConfig,\n    } as TableSettingsProps);\n  }, [\n    availableColumns,\n    handleAddCalculatedColumn,\n    handleNavigateToColumn,\n    onConfigChange,\n    onDataSourceConfigChange,\n    settingsPermissions,\n    showContextPanel,\n    tableConfig,\n  ]);\n\n  return {\n    showColumnSettingsPanel,\n    showTableSettingsPanel: showTableSettingsRef.current,\n  };\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"useTableAndColumnSettings.js","sources":["../../../../packages/vuu-table-extras/src/table-column-settings/useTableAndColumnSettings.ts"],"sourcesContent":["import { DataSourceConfig, SchemaColumn } from \"@vuu-ui/vuu-data-types\";\nimport {\n  ColumnDescriptor,\n  ColumnMenuPermissions,\n  ColumnSettingsProps,\n  SettingsPermissions,\n  TableConfig,\n  TableSettingsProps,\n} from \"@vuu-ui/vuu-table-types\";\nimport { getCalculatedColumnDetails } from \"@vuu-ui/vuu-utils\";\nimport { useCallback, useRef, useState } from \"react\";\nimport { DisplayColumnSettingsAction } from \"@vuu-ui/vuu-table-extras/src/column-menu/column-action-types\";\nimport { useContextPanel } from \"@vuu-ui/vuu-ui-controls\";\nimport { defaultTableSettingsPermissions } from \"./TableSettingsPanel\";\n\nexport interface TableAndColumnSettingsHookProps {\n  availableColumns: SchemaColumn[];\n  onAvailableColumnsChange?: (columns: SchemaColumn[]) => void;\n  onConfigChange: (config: TableConfig) => void;\n  onCreateCalculatedColumn: (column: ColumnDescriptor) => void;\n  onDataSourceConfigChange: (dataSourceConfig: DataSourceConfig) => void;\n  settingsPermissions?: SettingsPermissions;\n  tableConfig: TableConfig;\n}\n\nexport const columnSettingsFromColumnMenuPermissions = (\n  settings?: boolean | ColumnMenuPermissions,\n) =>\n  typeof settings === undefined\n    ? true\n    : typeof settings === \"boolean\"\n      ? settings\n      : (settings?.allowColumnSettings ?? true);\nexport const tableSettingsFromColumnMenuPermissions = (\n  settings?: boolean | ColumnMenuPermissions,\n) =>\n  typeof settings === undefined\n    ? defaultTableSettingsPermissions\n    : typeof settings === \"boolean\"\n      ? settings\n      : (settings?.allowTableSettings ?? defaultTableSettingsPermissions);\n\nexport const useTableAndColumnSettings = ({\n  availableColumns: availableColumnsProps,\n  settingsPermissions,\n  onAvailableColumnsChange,\n  onConfigChange,\n  onCreateCalculatedColumn,\n  onDataSourceConfigChange,\n  tableConfig,\n}: TableAndColumnSettingsHookProps) => {\n  const showTableSettingsRef = useRef<() => void>(undefined);\n\n  const [availableColumns, setAvailableColumns] = useState<SchemaColumn[]>(\n    availableColumnsProps,\n  );\n\n  const showContextPanel = useContextPanel();\n\n  const handleCancelCreateColumn = useCallback(() => {\n    requestAnimationFrame(() => {\n      showTableSettingsRef.current?.();\n    });\n  }, []);\n\n  const handleCreateCalculatedColumn = useCallback(\n    (column: ColumnDescriptor) => {\n      const { serverDataType } = getCalculatedColumnDetails(column);\n      if (serverDataType) {\n        const newAvailableColumns = availableColumns.concat({\n          name: column.name,\n          serverDataType,\n        });\n        setAvailableColumns(newAvailableColumns);\n        onAvailableColumnsChange?.(newAvailableColumns);\n        requestAnimationFrame(() => {\n          showTableSettingsRef.current?.();\n        });\n        onCreateCalculatedColumn(column);\n      } else {\n        throw Error(\n          \"Cannot create calculatec columns without valis serverDataType\",\n        );\n      }\n    },\n    [availableColumns, onAvailableColumnsChange, onCreateCalculatedColumn],\n  );\n\n  const showColumnSettingsPanel = useCallback(\n    (action: DisplayColumnSettingsAction) => {\n      showContextPanel(\"ColumnSettings\", \"Column Settings\", {\n        column: action.column,\n        onCancelCreateColumn: handleCancelCreateColumn,\n        onConfigChange,\n        onCreateCalculatedColumn: handleCreateCalculatedColumn,\n        tableConfig,\n        vuuTable: action.vuuTable,\n      } as ColumnSettingsProps);\n    },\n    [\n      handleCancelCreateColumn,\n      handleCreateCalculatedColumn,\n      onConfigChange,\n      showContextPanel,\n      tableConfig,\n    ],\n  );\n\n  const handleAddCalculatedColumn = useCallback(() => {\n    showColumnSettingsPanel({\n      column: {\n        name: \"::\",\n        serverDataType: \"string\",\n      },\n      type: \"column-settings\",\n      vuuTable: { module: \"SIMUL\", table: \"instruments\" },\n    });\n  }, [showColumnSettingsPanel]);\n\n  const handleNavigateToColumn = useCallback(\n    (columnName: string) => {\n      const column = tableConfig.columns.find((c) => c.name === columnName);\n      if (column) {\n        showColumnSettingsPanel({\n          type: \"column-settings\",\n          column,\n          //TODO where do we get this from\n          vuuTable: { module: \"SIMUL\", table: \"instruments\" },\n        });\n      }\n    },\n    [showColumnSettingsPanel, tableConfig.columns],\n  );\n\n  showTableSettingsRef.current = useCallback(() => {\n    showContextPanel(\"TableSettings\", \"Table Settings\", {\n      availableColumns:\n        availableColumns ??\n        tableConfig.columns.map(({ name, serverDataType }) => ({\n          name,\n          serverDataType,\n        })),\n      onAddCalculatedColumn: handleAddCalculatedColumn,\n      onConfigChange,\n      onDataSourceConfigChange,\n      onNavigateToColumn: handleNavigateToColumn,\n      permissions: settingsPermissions?.allowTableSettings,\n      tableConfig,\n    } as TableSettingsProps);\n  }, [\n    availableColumns,\n    handleAddCalculatedColumn,\n    handleNavigateToColumn,\n    onConfigChange,\n    onDataSourceConfigChange,\n    settingsPermissions,\n    showContextPanel,\n    tableConfig,\n  ]);\n\n  return {\n    showColumnSettingsPanel,\n    showTableSettingsPanel: showTableSettingsRef.current,\n  };\n};\n"],"names":[],"mappings":";;;;;AAyBO,MAAM,uCAA0C,GAAA,CACrD,QAEA,KAAA,OAAO,QAAa,KAAA,KAAA,CAAA,GAChB,IACA,GAAA,OAAO,QAAa,KAAA,SAAA,GAClB,QACC,GAAA,QAAA,EAAU,mBAAuB,IAAA;AACnC,MAAM,sCAAyC,GAAA,CACpD,QAEA,KAAA,OAAO,QAAa,KAAA,KAAA,CAAA,GAChB,+BACA,GAAA,OAAO,QAAa,KAAA,SAAA,GAClB,QACC,GAAA,QAAA,EAAU,kBAAsB,IAAA;AAElC,MAAM,4BAA4B,CAAC;AAAA,EACxC,gBAAkB,EAAA,qBAAA;AAAA,EAClB,mBAAA;AAAA,EACA,wBAAA;AAAA,EACA,cAAA;AAAA,EACA,wBAAA;AAAA,EACA,wBAAA;AAAA,EACA;AACF,CAAuC,KAAA;AACrC,EAAM,MAAA,oBAAA,GAAuB,OAAmB,KAAS,CAAA,CAAA;AAEzD,EAAM,MAAA,CAAC,gBAAkB,EAAA,mBAAmB,CAAI,GAAA,QAAA;AAAA,IAC9C;AAAA,GACF;AAEA,EAAA,MAAM,mBAAmB,eAAgB,EAAA;AAEzC,EAAM,MAAA,wBAAA,GAA2B,YAAY,MAAM;AACjD,IAAA,qBAAA,CAAsB,MAAM;AAC1B,MAAA,oBAAA,CAAqB,OAAU,IAAA;AAAA,KAChC,CAAA;AAAA,GACH,EAAG,EAAE,CAAA;AAEL,EAAA,MAAM,4BAA+B,GAAA,WAAA;AAAA,IACnC,CAAC,MAA6B,KAAA;AAC5B,MAAA,MAAM,EAAE,cAAA,EAAmB,GAAA,0BAAA,CAA2B,MAAM,CAAA;AAC5D,MAAA,IAAI,cAAgB,EAAA;AAClB,QAAM,MAAA,mBAAA,GAAsB,iBAAiB,MAAO,CAAA;AAAA,UAClD,MAAM,MAAO,CAAA,IAAA;AAAA,UACb;AAAA,SACD,CAAA;AACD,QAAA,mBAAA,CAAoB,mBAAmB,CAAA;AACvC,QAAA,wBAAA,GAA2B,mBAAmB,CAAA;AAC9C,QAAA,qBAAA,CAAsB,MAAM;AAC1B,UAAA,oBAAA,CAAqB,OAAU,IAAA;AAAA,SAChC,CAAA;AACD,QAAA,wBAAA,CAAyB,MAAM,CAAA;AAAA,OAC1B,MAAA;AACL,QAAM,MAAA,KAAA;AAAA,UACJ;AAAA,SACF;AAAA;AACF,KACF;AAAA,IACA,CAAC,gBAAkB,EAAA,wBAAA,EAA0B,wBAAwB;AAAA,GACvE;AAEA,EAAA,MAAM,uBAA0B,GAAA,WAAA;AAAA,IAC9B,CAAC,MAAwC,KAAA;AACvC,MAAA,gBAAA,CAAiB,kBAAkB,iBAAmB,EAAA;AAAA,QACpD,QAAQ,MAAO,CAAA,MAAA;AAAA,QACf,oBAAsB,EAAA,wBAAA;AAAA,QACtB,cAAA;AAAA,QACA,wBAA0B,EAAA,4BAAA;AAAA,QAC1B,WAAA;AAAA,QACA,UAAU,MAAO,CAAA;AAAA,OACK,CAAA;AAAA,KAC1B;AAAA,IACA;AAAA,MACE,wBAAA;AAAA,MACA,4BAAA;AAAA,MACA,cAAA;AAAA,MACA,gBAAA;AAAA,MACA;AAAA;AACF,GACF;AAEA,EAAM,MAAA,yBAAA,GAA4B,YAAY,MAAM;AAClD,IAAwB,uBAAA,CAAA;AAAA,MACtB,MAAQ,EAAA;AAAA,QACN,IAAM,EAAA,IAAA;AAAA,QACN,cAAgB,EAAA;AAAA,OAClB;AAAA,MACA,IAAM,EAAA,iBAAA;AAAA,MACN,QAAU,EAAA,EAAE,MAAQ,EAAA,OAAA,EAAS,OAAO,aAAc;AAAA,KACnD,CAAA;AAAA,GACH,EAAG,CAAC,uBAAuB,CAAC,CAAA;AAE5B,EAAA,MAAM,sBAAyB,GAAA,WAAA;AAAA,IAC7B,CAAC,UAAuB,KAAA;AACtB,MAAM,MAAA,MAAA,GAAS,YAAY,OAAQ,CAAA,IAAA,CAAK,CAAC,CAAM,KAAA,CAAA,CAAE,SAAS,UAAU,CAAA;AACpE,MAAA,IAAI,MAAQ,EAAA;AACV,QAAwB,uBAAA,CAAA;AAAA,UACtB,IAAM,EAAA,iBAAA;AAAA,UACN,MAAA;AAAA;AAAA,UAEA,QAAU,EAAA,EAAE,MAAQ,EAAA,OAAA,EAAS,OAAO,aAAc;AAAA,SACnD,CAAA;AAAA;AACH,KACF;AAAA,IACA,CAAC,uBAAyB,EAAA,WAAA,CAAY,OAAO;AAAA,GAC/C;AAEA,EAAqB,oBAAA,CAAA,OAAA,GAAU,YAAY,MAAM;AAC/C,IAAA,gBAAA,CAAiB,iBAAiB,gBAAkB,EAAA;AAAA,MAClD,gBAAA,EACE,oBACA,WAAY,CAAA,OAAA,CAAQ,IAAI,CAAC,EAAE,IAAM,EAAA,cAAA,EAAsB,MAAA;AAAA,QACrD,IAAA;AAAA,QACA;AAAA,OACA,CAAA,CAAA;AAAA,MACJ,qBAAuB,EAAA,yBAAA;AAAA,MACvB,cAAA;AAAA,MACA,wBAAA;AAAA,MACA,kBAAoB,EAAA,sBAAA;AAAA,MACpB,aAAa,mBAAqB,EAAA,kBAAA;AAAA,MAClC;AAAA,KACqB,CAAA;AAAA,GACtB,EAAA;AAAA,IACD,gBAAA;AAAA,IACA,yBAAA;AAAA,IACA,sBAAA;AAAA,IACA,cAAA;AAAA,IACA,wBAAA;AAAA,IACA,mBAAA;AAAA,IACA,gBAAA;AAAA,IACA;AAAA,GACD,CAAA;AAED,EAAO,OAAA;AAAA,IACL,uBAAA;AAAA,IACA,wBAAwB,oBAAqB,CAAA;AAAA,GAC/C;AACF;;;;"}

package/package.json

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