@vuu-ui/vuu-table-extras 0.13.67 → 0.13.69

package/cjs/column-picker/ColumnPicker.js

@@ -6,11 +6,11 @@ var cx = require('clsx');
 var styles = require('@salt-ds/styles');
 var window = require('@salt-ds/window');
 var vuuUtils = require('@vuu-ui/vuu-utils');
-var ColumnPicker$1 = require('./ColumnPicker.css.js');
 var core = require('@salt-ds/core');
 var useColumnPicker = require('./useColumnPicker.js');
 var vuuUiControls = require('@vuu-ui/vuu-ui-controls');
 var vuuTable = require('@vuu-ui/vuu-table');
+var ColumnPicker$1 = require('./ColumnPicker.css.js');
 
 const classBase = "vuuColumnPicker";
 const classBaseListItem = "vuuColumnPickerListItem";

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

@@ -1 +1 @@
-{"version":3,"file":"ColumnPicker.js","sources":["../../../../packages/vuu-table-extras/src/column-picker/ColumnPicker.tsx"],"sourcesContent":["import { ColumnDescriptor } from \"@vuu-ui/vuu-table-types\";\nimport {\n  ForwardedRef,\n  forwardRef,\n  HTMLAttributes,\n  MouseEventHandler,\n  RefCallback,\n  useCallback,\n  useMemo,\n  useRef,\n} from \"react\";\nimport cx from \"clsx\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport {\n  DragDropProvider,\n  getColumnLabel,\n  reorderColumnItems,\n  useSortable,\n} from \"@vuu-ui/vuu-utils\";\n\nimport columnPickerCss from \"./ColumnPicker.css\";\nimport { Input, ListBox, Option, OptionProps } from \"@salt-ds/core\";\nimport {\n  ColumPickerHookProps,\n  SelectedColumnChangeType,\n  useColumnPicker,\n} from \"./useColumnPicker\";\nimport { IconButton } from \"@vuu-ui/vuu-ui-controls\";\nimport { useHighlighting } from \"@vuu-ui/vuu-table\";\n\nconst classBase = \"vuuColumnPicker\";\nexport const classBaseListItem = \"vuuColumnPickerListItem\";\n\nexport interface ColumnPickerProps\n  extends ColumPickerHookProps,\n    HTMLAttributes<HTMLDivElement> {}\n\nconst searchIcon = <span data-icon=\"search\" />;\nconst NO_SELECTION: string[] = [] as const;\n\nconst useSorting = (id: string, index: number) => {\n  const { handleRef: sortableHandleRef, ref: sortableRef } = useSortable({\n    id,\n    index,\n  });\n\n  const [handleRef, ref] = useMemo(() => {\n    return [sortableHandleRef, sortableRef];\n  }, [sortableHandleRef, sortableRef]);\n\n  return {\n    handleRef,\n    ref,\n  };\n};\n\nconst SelectedColumnListItem = ({\n  className: classNameProp,\n  index,\n  column: item,\n  onRemove,\n  searchPattern = \"\",\n  ...optionProps\n}: OptionProps & {\n  index: number;\n  column: ColumnDescriptor;\n  onRemove: MouseEventHandler<HTMLButtonElement>;\n  searchPattern?: Lowercase<string>;\n}) => {\n  const { handleRef, ref } = useSorting(item.name, index);\n  const value = getColumnLabel(item as ColumnDescriptor);\n  const valueWithHighlighting = useHighlighting(value, searchPattern);\n\n  return (\n    <Option\n      {...optionProps}\n      className={cx(classNameProp, classBaseListItem)}\n      data-name={item.name}\n      ref={ref}\n    >\n      <IconButton\n        data-embedded\n        appearance=\"transparent\"\n        icon=\"draggable\"\n        ref={handleRef}\n        size={16}\n      />\n      <span className={`${classBase}-text`}>{valueWithHighlighting}</span>\n      <IconButton\n        className={`${classBaseListItem}-action`}\n        data-embedded\n        appearance=\"transparent\"\n        icon=\"cross\"\n        onClick={onRemove}\n        size={16}\n      />\n    </Option>\n  );\n};\n\nconst AvailableColumnListItem = ({\n  className: classNameProp,\n  index,\n  column: item,\n  onAdd,\n  searchPattern = \"\",\n  ...optionProps\n}: OptionProps & {\n  index: number;\n  column: ColumnDescriptor;\n  onAdd: MouseEventHandler<HTMLButtonElement>;\n  searchPattern?: Lowercase<string>;\n}) => {\n  const value = getColumnLabel(item as ColumnDescriptor);\n  const valueWithHighlighting = useHighlighting(value, searchPattern);\n\n  return (\n    <Option\n      {...optionProps}\n      className={cx(classNameProp, classBaseListItem)}\n      data-name={item.name}\n    >\n      <span className={`${classBase}-text`}>{valueWithHighlighting}</span>\n      <IconButton\n        className={`${classBaseListItem}-action`}\n        data-embedded\n        appearance=\"transparent\"\n        icon=\"plus\"\n        onClick={onAdd}\n        size={16}\n      />\n    </Option>\n  );\n};\n\nexport const ColumnPicker = forwardRef(function ColumnPicker(\n  {\n    availableColumns: availableColumnsProp,\n    className,\n    defaultSelectedColumns,\n    onChangeSelectedColumns,\n    selectedColumns: selectedColumnsProp,\n    ...htmlAttributes\n  }: ColumnPickerProps,\n  forwardedRef: ForwardedRef<HTMLDivElement>,\n) {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-column-picker\",\n    css: columnPickerCss,\n    window: targetWindow,\n  });\n\n  const searchCallbackRef = useCallback<RefCallback<HTMLElement>>((el) => {\n    setTimeout(() => {\n      el?.querySelector(\"input\")?.focus();\n    }, 100);\n  }, []);\n\n  const {\n    availableColumns,\n    onAddItemToSelectedList,\n    onChangeSearchInput,\n    onRemoveItemFromSelectedList,\n    searchState,\n    selectedColumns,\n  } = useColumnPicker({\n    availableColumns: availableColumnsProp,\n    defaultSelectedColumns,\n    onChangeSelectedColumns,\n    selectedColumns: selectedColumnsProp,\n  });\n  const listRef = useRef<HTMLDivElement>(null);\n\n  const getOptionName = (option?: HTMLElement) => {\n    if (option) {\n      const { name } = option.dataset;\n      if (name) {\n        return name;\n      }\n    }\n    throw Error(\"[ColumnPicker] list option has no data-name\");\n  };\n\n  const handleDragEnd = useCallback(() => {\n    setTimeout(() => {\n      const listItems =\n        listRef.current?.querySelectorAll<HTMLDivElement>(\".saltOption\");\n      if (listItems) {\n        const orderedColumnNames = Array.from(listItems).map(getOptionName);\n        onChangeSelectedColumns?.(\n          reorderColumnItems(selectedColumns, orderedColumnNames),\n          SelectedColumnChangeType.ColumnsReordered,\n        );\n      }\n    }, 300);\n  }, [onChangeSelectedColumns, selectedColumns]);\n\n  return (\n    <div\n      {...htmlAttributes}\n      className={cx(classBase, className)}\n      ref={forwardedRef}\n    >\n      <form className={`${classBase}-search`} role=\"search\">\n        <Input\n          startAdornment={searchIcon}\n          placeholder=\"Find column\"\n          ref={searchCallbackRef}\n          value={searchState.searchText}\n          onChange={onChangeSearchInput}\n        />\n      </form>\n\n      <div className={`${classBase}-scrollContainer vuuScrollable`}>\n        <div className={`${classBase}-sectionHeader`}>Columns in view</div>\n        <DragDropProvider onDragEnd={handleDragEnd}>\n          <ListBox\n            className={`${classBase}-selectedList`}\n            ref={listRef}\n            selected={NO_SELECTION}\n          >\n            {selectedColumns.map((column, index) => (\n              <SelectedColumnListItem\n                column={column}\n                index={index}\n                key={column.name}\n                onRemove={onRemoveItemFromSelectedList}\n                searchPattern={\n                  searchState.searchText.toLowerCase() as Lowercase<string>\n                }\n                value={column}\n              />\n            ))}\n          </ListBox>\n        </DragDropProvider>\n\n        <div\n          className={cx(\n            `${classBase}-sectionHeader`,\n            `${classBase}-availableHeader`,\n          )}\n        >\n          Available columns\n        </div>\n        <ListBox\n          className={`${classBase}-availableList`}\n          selected={NO_SELECTION}\n        >\n          {availableColumns.map((column, index) => (\n            <AvailableColumnListItem\n              column={column}\n              index={index}\n              key={column.name}\n              onAdd={onAddItemToSelectedList}\n              searchPattern={\n                searchState.searchText.toLowerCase() as Lowercase<string>\n              }\n              value={column}\n            />\n          ))}\n        </ListBox>\n      </div>\n    </div>\n  );\n});\n"],"names":["jsx","useSortable","useMemo","getColumnLabel","useHighlighting","jsxs","Option","IconButton","forwardRef","ColumnPicker","useWindow","useComponentCssInjection","columnPickerCss","useCallback","useColumnPicker","useRef","reorderColumnItems","SelectedColumnChangeType","Input","DragDropProvider","ListBox"],"mappings":"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"}
+{"version":3,"file":"ColumnPicker.js","sources":["../../../../packages/vuu-table-extras/src/column-picker/ColumnPicker.tsx"],"sourcesContent":["import { ColumnDescriptor } from \"@vuu-ui/vuu-table-types\";\nimport {\n  ForwardedRef,\n  forwardRef,\n  HTMLAttributes,\n  MouseEventHandler,\n  RefCallback,\n  useCallback,\n  useMemo,\n  useRef,\n} from \"react\";\nimport cx from \"clsx\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport {\n  DragDropProvider,\n  getColumnLabel,\n  reorderColumnItems,\n  useSortable,\n} from \"@vuu-ui/vuu-utils\";\n\nimport { Input, ListBox, Option, OptionProps } from \"@salt-ds/core\";\nimport {\n  ColumPickerHookProps,\n  SelectedColumnChangeType,\n  useColumnPicker,\n} from \"./useColumnPicker\";\nimport { IconButton } from \"@vuu-ui/vuu-ui-controls\";\nimport { useHighlighting } from \"@vuu-ui/vuu-table\";\n\nimport columnPickerCss from \"./ColumnPicker.css\";\n\nconst classBase = \"vuuColumnPicker\";\nexport const classBaseListItem = \"vuuColumnPickerListItem\";\n\nexport interface ColumnPickerProps\n  extends ColumPickerHookProps,\n    HTMLAttributes<HTMLDivElement> {}\n\nconst searchIcon = <span data-icon=\"search\" />;\nconst NO_SELECTION: string[] = [] as const;\n\nconst useSorting = (id: string, index: number) => {\n  const { handleRef: sortableHandleRef, ref: sortableRef } = useSortable({\n    id,\n    index,\n  });\n\n  const [handleRef, ref] = useMemo(() => {\n    return [sortableHandleRef, sortableRef];\n  }, [sortableHandleRef, sortableRef]);\n\n  return {\n    handleRef,\n    ref,\n  };\n};\n\nconst SelectedColumnListItem = ({\n  className: classNameProp,\n  index,\n  column: item,\n  onRemove,\n  searchPattern = \"\",\n  ...optionProps\n}: OptionProps & {\n  index: number;\n  column: ColumnDescriptor;\n  onRemove: MouseEventHandler<HTMLButtonElement>;\n  searchPattern?: Lowercase<string>;\n}) => {\n  const { handleRef, ref } = useSorting(item.name, index);\n  const value = getColumnLabel(item as ColumnDescriptor);\n  const valueWithHighlighting = useHighlighting(value, searchPattern);\n\n  return (\n    <Option\n      {...optionProps}\n      className={cx(classNameProp, classBaseListItem)}\n      data-name={item.name}\n      ref={ref}\n    >\n      <IconButton\n        data-embedded\n        appearance=\"transparent\"\n        icon=\"draggable\"\n        ref={handleRef}\n        size={16}\n      />\n      <span className={`${classBase}-text`}>{valueWithHighlighting}</span>\n      <IconButton\n        className={`${classBaseListItem}-action`}\n        data-embedded\n        appearance=\"transparent\"\n        icon=\"cross\"\n        onClick={onRemove}\n        size={16}\n      />\n    </Option>\n  );\n};\n\nconst AvailableColumnListItem = ({\n  className: classNameProp,\n  index,\n  column: item,\n  onAdd,\n  searchPattern = \"\",\n  ...optionProps\n}: OptionProps & {\n  index: number;\n  column: ColumnDescriptor;\n  onAdd: MouseEventHandler<HTMLButtonElement>;\n  searchPattern?: Lowercase<string>;\n}) => {\n  const value = getColumnLabel(item as ColumnDescriptor);\n  const valueWithHighlighting = useHighlighting(value, searchPattern);\n\n  return (\n    <Option\n      {...optionProps}\n      className={cx(classNameProp, classBaseListItem)}\n      data-name={item.name}\n    >\n      <span className={`${classBase}-text`}>{valueWithHighlighting}</span>\n      <IconButton\n        className={`${classBaseListItem}-action`}\n        data-embedded\n        appearance=\"transparent\"\n        icon=\"plus\"\n        onClick={onAdd}\n        size={16}\n      />\n    </Option>\n  );\n};\n\nexport const ColumnPicker = forwardRef(function ColumnPicker(\n  {\n    availableColumns: availableColumnsProp,\n    className,\n    defaultSelectedColumns,\n    onChangeSelectedColumns,\n    selectedColumns: selectedColumnsProp,\n    ...htmlAttributes\n  }: ColumnPickerProps,\n  forwardedRef: ForwardedRef<HTMLDivElement>,\n) {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-column-picker\",\n    css: columnPickerCss,\n    window: targetWindow,\n  });\n\n  const searchCallbackRef = useCallback<RefCallback<HTMLElement>>((el) => {\n    setTimeout(() => {\n      el?.querySelector(\"input\")?.focus();\n    }, 100);\n  }, []);\n\n  const {\n    availableColumns,\n    onAddItemToSelectedList,\n    onChangeSearchInput,\n    onRemoveItemFromSelectedList,\n    searchState,\n    selectedColumns,\n  } = useColumnPicker({\n    availableColumns: availableColumnsProp,\n    defaultSelectedColumns,\n    onChangeSelectedColumns,\n    selectedColumns: selectedColumnsProp,\n  });\n  const listRef = useRef<HTMLDivElement>(null);\n\n  const getOptionName = (option?: HTMLElement) => {\n    if (option) {\n      const { name } = option.dataset;\n      if (name) {\n        return name;\n      }\n    }\n    throw Error(\"[ColumnPicker] list option has no data-name\");\n  };\n\n  const handleDragEnd = useCallback(() => {\n    setTimeout(() => {\n      const listItems =\n        listRef.current?.querySelectorAll<HTMLDivElement>(\".saltOption\");\n      if (listItems) {\n        const orderedColumnNames = Array.from(listItems).map(getOptionName);\n        onChangeSelectedColumns?.(\n          reorderColumnItems(selectedColumns, orderedColumnNames),\n          SelectedColumnChangeType.ColumnsReordered,\n        );\n      }\n    }, 300);\n  }, [onChangeSelectedColumns, selectedColumns]);\n\n  return (\n    <div\n      {...htmlAttributes}\n      className={cx(classBase, className)}\n      ref={forwardedRef}\n    >\n      <form className={`${classBase}-search`} role=\"search\">\n        <Input\n          startAdornment={searchIcon}\n          placeholder=\"Find column\"\n          ref={searchCallbackRef}\n          value={searchState.searchText}\n          onChange={onChangeSearchInput}\n        />\n      </form>\n\n      <div className={`${classBase}-scrollContainer vuuScrollable`}>\n        <div className={`${classBase}-sectionHeader`}>Columns in view</div>\n        <DragDropProvider onDragEnd={handleDragEnd}>\n          <ListBox\n            className={`${classBase}-selectedList`}\n            ref={listRef}\n            selected={NO_SELECTION}\n          >\n            {selectedColumns.map((column, index) => (\n              <SelectedColumnListItem\n                column={column}\n                index={index}\n                key={column.name}\n                onRemove={onRemoveItemFromSelectedList}\n                searchPattern={\n                  searchState.searchText.toLowerCase() as Lowercase<string>\n                }\n                value={column}\n              />\n            ))}\n          </ListBox>\n        </DragDropProvider>\n\n        <div\n          className={cx(\n            `${classBase}-sectionHeader`,\n            `${classBase}-availableHeader`,\n          )}\n        >\n          Available columns\n        </div>\n        <ListBox\n          className={`${classBase}-availableList`}\n          selected={NO_SELECTION}\n        >\n          {availableColumns.map((column, index) => (\n            <AvailableColumnListItem\n              column={column}\n              index={index}\n              key={column.name}\n              onAdd={onAddItemToSelectedList}\n              searchPattern={\n                searchState.searchText.toLowerCase() as Lowercase<string>\n              }\n              value={column}\n            />\n          ))}\n        </ListBox>\n      </div>\n    </div>\n  );\n});\n"],"names":["jsx","useSortable","useMemo","getColumnLabel","useHighlighting","jsxs","Option","IconButton","forwardRef","ColumnPicker","useWindow","useComponentCssInjection","columnPickerCss","useCallback","useColumnPicker","useRef","reorderColumnItems","SelectedColumnChangeType","Input","DragDropProvider","ListBox"],"mappings":"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"}

package/cjs/column-picker/useColumnPicker.js

@@ -10,6 +10,7 @@ const nonSelectedColumns = ({
 }) => availableColumns.filter(
   ({ name }) => selectedColumns.findIndex((c) => c.name === name) === -1
 );
+const byColumnName = ({ name: n1, label: l1 = n1 }, { name: n2, label: l2 = n2 }) => l1 > l2 ? 1 : l2 > l1 ? -1 : 0;
 const findColumn = (target, columns) => {
   const listItem = vuuUtils.queryClosest(target, ".saltOption", true);
   const { name } = listItem.dataset;
@@ -26,12 +27,16 @@ const SelectedColumnChangeType = {
   ColumnsReordered: "columns-reordered"
 };
 const useColumnPicker = ({
-  availableColumns,
+  availableColumns: availableColumnsProp,
   defaultSelectedColumns,
   onChangeSelectedColumns,
   selectedColumns: selectedColumnsProp
 }) => {
   const [searchState, setSearchState] = react.useState({ searchText: "" });
+  const availableColumns = react.useMemo(
+    () => availableColumnsProp.toSorted(byColumnName),
+    [availableColumnsProp]
+  );
   const [selectedColumns, setSelectedColumns] = core.useControlled({
     controlled: selectedColumnsProp,
     default: defaultSelectedColumns ?? [],

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

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

package/esm/column-picker/ColumnPicker.js

@@ -4,11 +4,11 @@ import cx from 'clsx';
 import { useComponentCssInjection } from '@salt-ds/styles';
 import { useWindow } from '@salt-ds/window';
 import { reorderColumnItems, DragDropProvider, getColumnLabel, useSortable } from '@vuu-ui/vuu-utils';
-import columnPickerCss from './ColumnPicker.css.js';
 import { Input, ListBox, Option } from '@salt-ds/core';
 import { useColumnPicker, SelectedColumnChangeType } from './useColumnPicker.js';
 import { IconButton } from '@vuu-ui/vuu-ui-controls';
 import { useHighlighting } from '@vuu-ui/vuu-table';
+import columnPickerCss from './ColumnPicker.css.js';
 
 const classBase = "vuuColumnPicker";
 const classBaseListItem = "vuuColumnPickerListItem";

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

@@ -1 +1 @@
-{"version":3,"file":"ColumnPicker.js","sources":["../../../../packages/vuu-table-extras/src/column-picker/ColumnPicker.tsx"],"sourcesContent":["import { ColumnDescriptor } from \"@vuu-ui/vuu-table-types\";\nimport {\n  ForwardedRef,\n  forwardRef,\n  HTMLAttributes,\n  MouseEventHandler,\n  RefCallback,\n  useCallback,\n  useMemo,\n  useRef,\n} from \"react\";\nimport cx from \"clsx\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport {\n  DragDropProvider,\n  getColumnLabel,\n  reorderColumnItems,\n  useSortable,\n} from \"@vuu-ui/vuu-utils\";\n\nimport columnPickerCss from \"./ColumnPicker.css\";\nimport { Input, ListBox, Option, OptionProps } from \"@salt-ds/core\";\nimport {\n  ColumPickerHookProps,\n  SelectedColumnChangeType,\n  useColumnPicker,\n} from \"./useColumnPicker\";\nimport { IconButton } from \"@vuu-ui/vuu-ui-controls\";\nimport { useHighlighting } from \"@vuu-ui/vuu-table\";\n\nconst classBase = \"vuuColumnPicker\";\nexport const classBaseListItem = \"vuuColumnPickerListItem\";\n\nexport interface ColumnPickerProps\n  extends ColumPickerHookProps,\n    HTMLAttributes<HTMLDivElement> {}\n\nconst searchIcon = <span data-icon=\"search\" />;\nconst NO_SELECTION: string[] = [] as const;\n\nconst useSorting = (id: string, index: number) => {\n  const { handleRef: sortableHandleRef, ref: sortableRef } = useSortable({\n    id,\n    index,\n  });\n\n  const [handleRef, ref] = useMemo(() => {\n    return [sortableHandleRef, sortableRef];\n  }, [sortableHandleRef, sortableRef]);\n\n  return {\n    handleRef,\n    ref,\n  };\n};\n\nconst SelectedColumnListItem = ({\n  className: classNameProp,\n  index,\n  column: item,\n  onRemove,\n  searchPattern = \"\",\n  ...optionProps\n}: OptionProps & {\n  index: number;\n  column: ColumnDescriptor;\n  onRemove: MouseEventHandler<HTMLButtonElement>;\n  searchPattern?: Lowercase<string>;\n}) => {\n  const { handleRef, ref } = useSorting(item.name, index);\n  const value = getColumnLabel(item as ColumnDescriptor);\n  const valueWithHighlighting = useHighlighting(value, searchPattern);\n\n  return (\n    <Option\n      {...optionProps}\n      className={cx(classNameProp, classBaseListItem)}\n      data-name={item.name}\n      ref={ref}\n    >\n      <IconButton\n        data-embedded\n        appearance=\"transparent\"\n        icon=\"draggable\"\n        ref={handleRef}\n        size={16}\n      />\n      <span className={`${classBase}-text`}>{valueWithHighlighting}</span>\n      <IconButton\n        className={`${classBaseListItem}-action`}\n        data-embedded\n        appearance=\"transparent\"\n        icon=\"cross\"\n        onClick={onRemove}\n        size={16}\n      />\n    </Option>\n  );\n};\n\nconst AvailableColumnListItem = ({\n  className: classNameProp,\n  index,\n  column: item,\n  onAdd,\n  searchPattern = \"\",\n  ...optionProps\n}: OptionProps & {\n  index: number;\n  column: ColumnDescriptor;\n  onAdd: MouseEventHandler<HTMLButtonElement>;\n  searchPattern?: Lowercase<string>;\n}) => {\n  const value = getColumnLabel(item as ColumnDescriptor);\n  const valueWithHighlighting = useHighlighting(value, searchPattern);\n\n  return (\n    <Option\n      {...optionProps}\n      className={cx(classNameProp, classBaseListItem)}\n      data-name={item.name}\n    >\n      <span className={`${classBase}-text`}>{valueWithHighlighting}</span>\n      <IconButton\n        className={`${classBaseListItem}-action`}\n        data-embedded\n        appearance=\"transparent\"\n        icon=\"plus\"\n        onClick={onAdd}\n        size={16}\n      />\n    </Option>\n  );\n};\n\nexport const ColumnPicker = forwardRef(function ColumnPicker(\n  {\n    availableColumns: availableColumnsProp,\n    className,\n    defaultSelectedColumns,\n    onChangeSelectedColumns,\n    selectedColumns: selectedColumnsProp,\n    ...htmlAttributes\n  }: ColumnPickerProps,\n  forwardedRef: ForwardedRef<HTMLDivElement>,\n) {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-column-picker\",\n    css: columnPickerCss,\n    window: targetWindow,\n  });\n\n  const searchCallbackRef = useCallback<RefCallback<HTMLElement>>((el) => {\n    setTimeout(() => {\n      el?.querySelector(\"input\")?.focus();\n    }, 100);\n  }, []);\n\n  const {\n    availableColumns,\n    onAddItemToSelectedList,\n    onChangeSearchInput,\n    onRemoveItemFromSelectedList,\n    searchState,\n    selectedColumns,\n  } = useColumnPicker({\n    availableColumns: availableColumnsProp,\n    defaultSelectedColumns,\n    onChangeSelectedColumns,\n    selectedColumns: selectedColumnsProp,\n  });\n  const listRef = useRef<HTMLDivElement>(null);\n\n  const getOptionName = (option?: HTMLElement) => {\n    if (option) {\n      const { name } = option.dataset;\n      if (name) {\n        return name;\n      }\n    }\n    throw Error(\"[ColumnPicker] list option has no data-name\");\n  };\n\n  const handleDragEnd = useCallback(() => {\n    setTimeout(() => {\n      const listItems =\n        listRef.current?.querySelectorAll<HTMLDivElement>(\".saltOption\");\n      if (listItems) {\n        const orderedColumnNames = Array.from(listItems).map(getOptionName);\n        onChangeSelectedColumns?.(\n          reorderColumnItems(selectedColumns, orderedColumnNames),\n          SelectedColumnChangeType.ColumnsReordered,\n        );\n      }\n    }, 300);\n  }, [onChangeSelectedColumns, selectedColumns]);\n\n  return (\n    <div\n      {...htmlAttributes}\n      className={cx(classBase, className)}\n      ref={forwardedRef}\n    >\n      <form className={`${classBase}-search`} role=\"search\">\n        <Input\n          startAdornment={searchIcon}\n          placeholder=\"Find column\"\n          ref={searchCallbackRef}\n          value={searchState.searchText}\n          onChange={onChangeSearchInput}\n        />\n      </form>\n\n      <div className={`${classBase}-scrollContainer vuuScrollable`}>\n        <div className={`${classBase}-sectionHeader`}>Columns in view</div>\n        <DragDropProvider onDragEnd={handleDragEnd}>\n          <ListBox\n            className={`${classBase}-selectedList`}\n            ref={listRef}\n            selected={NO_SELECTION}\n          >\n            {selectedColumns.map((column, index) => (\n              <SelectedColumnListItem\n                column={column}\n                index={index}\n                key={column.name}\n                onRemove={onRemoveItemFromSelectedList}\n                searchPattern={\n                  searchState.searchText.toLowerCase() as Lowercase<string>\n                }\n                value={column}\n              />\n            ))}\n          </ListBox>\n        </DragDropProvider>\n\n        <div\n          className={cx(\n            `${classBase}-sectionHeader`,\n            `${classBase}-availableHeader`,\n          )}\n        >\n          Available columns\n        </div>\n        <ListBox\n          className={`${classBase}-availableList`}\n          selected={NO_SELECTION}\n        >\n          {availableColumns.map((column, index) => (\n            <AvailableColumnListItem\n              column={column}\n              index={index}\n              key={column.name}\n              onAdd={onAddItemToSelectedList}\n              searchPattern={\n                searchState.searchText.toLowerCase() as Lowercase<string>\n              }\n              value={column}\n            />\n          ))}\n        </ListBox>\n      </div>\n    </div>\n  );\n});\n"],"names":["ColumnPicker"],"mappings":"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"}
+{"version":3,"file":"ColumnPicker.js","sources":["../../../../packages/vuu-table-extras/src/column-picker/ColumnPicker.tsx"],"sourcesContent":["import { ColumnDescriptor } from \"@vuu-ui/vuu-table-types\";\nimport {\n  ForwardedRef,\n  forwardRef,\n  HTMLAttributes,\n  MouseEventHandler,\n  RefCallback,\n  useCallback,\n  useMemo,\n  useRef,\n} from \"react\";\nimport cx from \"clsx\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport {\n  DragDropProvider,\n  getColumnLabel,\n  reorderColumnItems,\n  useSortable,\n} from \"@vuu-ui/vuu-utils\";\n\nimport { Input, ListBox, Option, OptionProps } from \"@salt-ds/core\";\nimport {\n  ColumPickerHookProps,\n  SelectedColumnChangeType,\n  useColumnPicker,\n} from \"./useColumnPicker\";\nimport { IconButton } from \"@vuu-ui/vuu-ui-controls\";\nimport { useHighlighting } from \"@vuu-ui/vuu-table\";\n\nimport columnPickerCss from \"./ColumnPicker.css\";\n\nconst classBase = \"vuuColumnPicker\";\nexport const classBaseListItem = \"vuuColumnPickerListItem\";\n\nexport interface ColumnPickerProps\n  extends ColumPickerHookProps,\n    HTMLAttributes<HTMLDivElement> {}\n\nconst searchIcon = <span data-icon=\"search\" />;\nconst NO_SELECTION: string[] = [] as const;\n\nconst useSorting = (id: string, index: number) => {\n  const { handleRef: sortableHandleRef, ref: sortableRef } = useSortable({\n    id,\n    index,\n  });\n\n  const [handleRef, ref] = useMemo(() => {\n    return [sortableHandleRef, sortableRef];\n  }, [sortableHandleRef, sortableRef]);\n\n  return {\n    handleRef,\n    ref,\n  };\n};\n\nconst SelectedColumnListItem = ({\n  className: classNameProp,\n  index,\n  column: item,\n  onRemove,\n  searchPattern = \"\",\n  ...optionProps\n}: OptionProps & {\n  index: number;\n  column: ColumnDescriptor;\n  onRemove: MouseEventHandler<HTMLButtonElement>;\n  searchPattern?: Lowercase<string>;\n}) => {\n  const { handleRef, ref } = useSorting(item.name, index);\n  const value = getColumnLabel(item as ColumnDescriptor);\n  const valueWithHighlighting = useHighlighting(value, searchPattern);\n\n  return (\n    <Option\n      {...optionProps}\n      className={cx(classNameProp, classBaseListItem)}\n      data-name={item.name}\n      ref={ref}\n    >\n      <IconButton\n        data-embedded\n        appearance=\"transparent\"\n        icon=\"draggable\"\n        ref={handleRef}\n        size={16}\n      />\n      <span className={`${classBase}-text`}>{valueWithHighlighting}</span>\n      <IconButton\n        className={`${classBaseListItem}-action`}\n        data-embedded\n        appearance=\"transparent\"\n        icon=\"cross\"\n        onClick={onRemove}\n        size={16}\n      />\n    </Option>\n  );\n};\n\nconst AvailableColumnListItem = ({\n  className: classNameProp,\n  index,\n  column: item,\n  onAdd,\n  searchPattern = \"\",\n  ...optionProps\n}: OptionProps & {\n  index: number;\n  column: ColumnDescriptor;\n  onAdd: MouseEventHandler<HTMLButtonElement>;\n  searchPattern?: Lowercase<string>;\n}) => {\n  const value = getColumnLabel(item as ColumnDescriptor);\n  const valueWithHighlighting = useHighlighting(value, searchPattern);\n\n  return (\n    <Option\n      {...optionProps}\n      className={cx(classNameProp, classBaseListItem)}\n      data-name={item.name}\n    >\n      <span className={`${classBase}-text`}>{valueWithHighlighting}</span>\n      <IconButton\n        className={`${classBaseListItem}-action`}\n        data-embedded\n        appearance=\"transparent\"\n        icon=\"plus\"\n        onClick={onAdd}\n        size={16}\n      />\n    </Option>\n  );\n};\n\nexport const ColumnPicker = forwardRef(function ColumnPicker(\n  {\n    availableColumns: availableColumnsProp,\n    className,\n    defaultSelectedColumns,\n    onChangeSelectedColumns,\n    selectedColumns: selectedColumnsProp,\n    ...htmlAttributes\n  }: ColumnPickerProps,\n  forwardedRef: ForwardedRef<HTMLDivElement>,\n) {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-column-picker\",\n    css: columnPickerCss,\n    window: targetWindow,\n  });\n\n  const searchCallbackRef = useCallback<RefCallback<HTMLElement>>((el) => {\n    setTimeout(() => {\n      el?.querySelector(\"input\")?.focus();\n    }, 100);\n  }, []);\n\n  const {\n    availableColumns,\n    onAddItemToSelectedList,\n    onChangeSearchInput,\n    onRemoveItemFromSelectedList,\n    searchState,\n    selectedColumns,\n  } = useColumnPicker({\n    availableColumns: availableColumnsProp,\n    defaultSelectedColumns,\n    onChangeSelectedColumns,\n    selectedColumns: selectedColumnsProp,\n  });\n  const listRef = useRef<HTMLDivElement>(null);\n\n  const getOptionName = (option?: HTMLElement) => {\n    if (option) {\n      const { name } = option.dataset;\n      if (name) {\n        return name;\n      }\n    }\n    throw Error(\"[ColumnPicker] list option has no data-name\");\n  };\n\n  const handleDragEnd = useCallback(() => {\n    setTimeout(() => {\n      const listItems =\n        listRef.current?.querySelectorAll<HTMLDivElement>(\".saltOption\");\n      if (listItems) {\n        const orderedColumnNames = Array.from(listItems).map(getOptionName);\n        onChangeSelectedColumns?.(\n          reorderColumnItems(selectedColumns, orderedColumnNames),\n          SelectedColumnChangeType.ColumnsReordered,\n        );\n      }\n    }, 300);\n  }, [onChangeSelectedColumns, selectedColumns]);\n\n  return (\n    <div\n      {...htmlAttributes}\n      className={cx(classBase, className)}\n      ref={forwardedRef}\n    >\n      <form className={`${classBase}-search`} role=\"search\">\n        <Input\n          startAdornment={searchIcon}\n          placeholder=\"Find column\"\n          ref={searchCallbackRef}\n          value={searchState.searchText}\n          onChange={onChangeSearchInput}\n        />\n      </form>\n\n      <div className={`${classBase}-scrollContainer vuuScrollable`}>\n        <div className={`${classBase}-sectionHeader`}>Columns in view</div>\n        <DragDropProvider onDragEnd={handleDragEnd}>\n          <ListBox\n            className={`${classBase}-selectedList`}\n            ref={listRef}\n            selected={NO_SELECTION}\n          >\n            {selectedColumns.map((column, index) => (\n              <SelectedColumnListItem\n                column={column}\n                index={index}\n                key={column.name}\n                onRemove={onRemoveItemFromSelectedList}\n                searchPattern={\n                  searchState.searchText.toLowerCase() as Lowercase<string>\n                }\n                value={column}\n              />\n            ))}\n          </ListBox>\n        </DragDropProvider>\n\n        <div\n          className={cx(\n            `${classBase}-sectionHeader`,\n            `${classBase}-availableHeader`,\n          )}\n        >\n          Available columns\n        </div>\n        <ListBox\n          className={`${classBase}-availableList`}\n          selected={NO_SELECTION}\n        >\n          {availableColumns.map((column, index) => (\n            <AvailableColumnListItem\n              column={column}\n              index={index}\n              key={column.name}\n              onAdd={onAddItemToSelectedList}\n              searchPattern={\n                searchState.searchText.toLowerCase() as Lowercase<string>\n              }\n              value={column}\n            />\n          ))}\n        </ListBox>\n      </div>\n    </div>\n  );\n});\n"],"names":["ColumnPicker"],"mappings":"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"}

package/esm/column-picker/useColumnPicker.js

@@ -1,6 +1,6 @@
 import { useControlled } from '@salt-ds/core';
 import { queryClosest } from '@vuu-ui/vuu-utils';
-import { useState, useRef, useMemo, useCallback } from 'react';
+import { useState, useMemo, useRef, useCallback } from 'react';
 
 const nonSelectedColumns = ({
   availableColumns,
@@ -8,6 +8,7 @@ const nonSelectedColumns = ({
 }) => availableColumns.filter(
   ({ name }) => selectedColumns.findIndex((c) => c.name === name) === -1
 );
+const byColumnName = ({ name: n1, label: l1 = n1 }, { name: n2, label: l2 = n2 }) => l1 > l2 ? 1 : l2 > l1 ? -1 : 0;
 const findColumn = (target, columns) => {
   const listItem = queryClosest(target, ".saltOption", true);
   const { name } = listItem.dataset;
@@ -24,12 +25,16 @@ const SelectedColumnChangeType = {
   ColumnsReordered: "columns-reordered"
 };
 const useColumnPicker = ({
-  availableColumns,
+  availableColumns: availableColumnsProp,
   defaultSelectedColumns,
   onChangeSelectedColumns,
   selectedColumns: selectedColumnsProp
 }) => {
   const [searchState, setSearchState] = useState({ searchText: "" });
+  const availableColumns = useMemo(
+    () => availableColumnsProp.toSorted(byColumnName),
+    [availableColumnsProp]
+  );
   const [selectedColumns, setSelectedColumns] = useControlled({
     controlled: selectedColumnsProp,
     default: defaultSelectedColumns ?? [],

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

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

package/package.json

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

package/types/column-picker/useColumnPicker.d.ts

@@ -26,7 +26,7 @@ export interface ColumPickerHookProps {
      */
     selectedColumns?: ColumnDescriptor[];
 }
-export declare const useColumnPicker: ({ availableColumns, defaultSelectedColumns, onChangeSelectedColumns, selectedColumns: selectedColumnsProp, }: ColumPickerHookProps) => {
+export declare const useColumnPicker: ({ availableColumns: availableColumnsProp, defaultSelectedColumns, onChangeSelectedColumns, selectedColumns: selectedColumnsProp, }: ColumPickerHookProps) => {
     availableColumns: ColumnDescriptor[];
     onAddItemToSelectedList: MouseEventHandler<HTMLButtonElement>;
     onRemoveItemFromSelectedList: MouseEventHandler<HTMLButtonElement>;