@vuu-ui/vuu-table-extras 2.1.19-beta.1 → 2.1.19-beta.3

package/esm/packages/vuu-table-extras/src/column-picker/ColumnModel.js

@@ -0,0 +1,170 @@
+import { EventEmitter, reorderColumnItems } from '@vuu-ui/vuu-utils';
+
+var __defProp = Object.defineProperty;
+var __typeError = (msg) => {
+  throw TypeError(msg);
+};
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => __defNormalProp(obj, key + "" , value);
+var __accessCheck = (obj, member, msg) => member.has(obj) || __typeError("Cannot " + msg);
+var __privateGet = (obj, member, getter) => (__accessCheck(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
+var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
+var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "write to private field"), member.set(obj, value), value);
+var _searchPattern, _selectedColumns;
+const ColumnChangeSource = {
+  ColumnPicker: "column-picker",
+  ColumnSettings: "column-settings",
+  Table: "table"
+};
+const SelectedColumnChangeType = {
+  CalculatedColumnAdded: "calculated-column-added",
+  ColumnAdded: "column-added",
+  ColumnRemoved: "column-removed",
+  ColumnUpdated: "column-updated",
+  ColumnsReordered: "columns-reordered"
+};
+const isColumnAdded = (change) => change?.type === SelectedColumnChangeType.ColumnAdded;
+const isColumnRemoved = (change) => change?.type === SelectedColumnChangeType.ColumnRemoved;
+const isColumnsReordered = (change) => change?.type === SelectedColumnChangeType.ColumnsReordered;
+const byColumnName = ({ name: n1, label: l1 = n1 }, { name: n2, label: l2 = n2 }) => l1 > l2 ? 1 : l2 > l1 ? -1 : 0;
+const filterColumns = (columns, pattern) => {
+  if (pattern) {
+    const lowerCasePattern = pattern.toLowerCase();
+    return columns.filter(
+      ({ name, label = name }) => label.toLowerCase().indexOf(lowerCasePattern) !== -1
+    );
+  } else {
+    return columns;
+  }
+};
+class ColumnModel extends EventEmitter {
+  constructor(allColumns, selectedColumns) {
+    super();
+    this.allColumns = allColumns;
+    __privateAdd(this, _searchPattern, "");
+    __privateAdd(this, _selectedColumns);
+    __publicField(this, "notifyListeners", (columns, source, changeType) => {
+      this.emit("change", columns, source, changeType);
+      this.emit("render", {});
+    });
+    __privateSet(this, _selectedColumns, selectedColumns);
+  }
+  get availableColumns() {
+    return filterColumns(this.allColumns, __privateGet(this, _searchPattern)).filter(
+      ({ name }) => __privateGet(this, _selectedColumns).findIndex((c) => c.name === name) === -1
+    ).toSorted(byColumnName);
+  }
+  set searchPattern(pattern) {
+    const searchPattern = pattern;
+    if (searchPattern !== __privateGet(this, _searchPattern)) {
+      __privateSet(this, _searchPattern, searchPattern);
+      this.emit("render", {});
+    }
+  }
+  get searchPattern() {
+    return __privateGet(this, _searchPattern) ?? "";
+  }
+  get selectedColumns() {
+    return filterColumns(__privateGet(this, _selectedColumns), __privateGet(this, _searchPattern));
+  }
+  setSelectedColumns(selectedColumns, source, changeDescriptor) {
+    __privateSet(this, _selectedColumns, selectedColumns);
+    this.notifyListeners(selectedColumns, source, changeDescriptor);
+  }
+  getColumn(name) {
+    const col = __privateGet(this, _selectedColumns).find((col2) => col2.name === name);
+    if (col) {
+      return col;
+    }
+    throw Error(`[ColumnModel] columns does not contain column ${name}`);
+  }
+  addItemToSelectedColumns(name, source) {
+    const column = this.allColumns.find((col) => col.name === name);
+    if (column) {
+      __privateSet(this, _selectedColumns, __privateGet(this, _selectedColumns).concat(column));
+      this.notifyListeners(__privateGet(this, _selectedColumns), source, {
+        type: SelectedColumnChangeType.ColumnAdded,
+        column
+      });
+    } else {
+      throw Error(
+        `[ColumnModel] addItemToSelectedColumns, column '${name}' not found`
+      );
+    }
+  }
+  removeItemFromSelectedColumns(name, source) {
+    const column = __privateGet(this, _selectedColumns).find((col) => col.name === name);
+    if (column) {
+      const index = __privateGet(this, _selectedColumns).indexOf(column);
+      __privateSet(this, _selectedColumns, __privateGet(this, _selectedColumns).toSpliced(index, 1));
+      this.notifyListeners(__privateGet(this, _selectedColumns), source, {
+        type: SelectedColumnChangeType.ColumnRemoved,
+        column
+      });
+    } else {
+      throw Error(
+        `[ColumnModel] removeItemFromSelectedColumns, column '${name}' not found`
+      );
+    }
+  }
+  reorderSelectedColumns(orderedColumnNames, source) {
+    this.setSelectedColumns(
+      reorderColumnItems(__privateGet(this, _selectedColumns), orderedColumnNames),
+      source,
+      { type: SelectedColumnChangeType.ColumnsReordered }
+    );
+  }
+  updateColumn(column, newColumn = column) {
+    const allIndex = this.allColumns.findIndex(
+      (col) => col.name === column.name
+    );
+    const selectedIndex = __privateGet(this, _selectedColumns).findIndex(
+      (col) => col.name === column.name
+    );
+    if (selectedIndex !== -1) {
+      if (allIndex === -1) {
+        throw Error(
+          `[ColumnModel] updateColumn, selected column not in allColumns collection`
+        );
+      }
+      __privateSet(this, _selectedColumns, __privateGet(this, _selectedColumns).toSpliced(
+        selectedIndex,
+        1,
+        newColumn
+      ));
+      this.allColumns = this.allColumns.toSpliced(allIndex, 1, newColumn);
+      this.notifyListeners(__privateGet(this, _selectedColumns), "column-settings", {
+        type: SelectedColumnChangeType.ColumnUpdated,
+        column
+      });
+    } else {
+      throw Error(
+        `[ColumnModel] updateColumn, column ${column.name} not found`
+      );
+    }
+  }
+  /**
+   * Used when adding a calculated column
+   *
+   * @param column
+   *
+   * @param addToSelectedColumns
+   */
+  addColumn(column, addToSelectedColumns = false) {
+    console.log(`[ColumnModel] add column ${JSON.stringify(column)}`);
+    if (addToSelectedColumns) {
+      console.log(`add it to selected coliumns`);
+    }
+    this.allColumns = this.allColumns.concat(column);
+    __privateSet(this, _selectedColumns, __privateGet(this, _selectedColumns).concat(column));
+    this.notifyListeners(__privateGet(this, _selectedColumns), "column-picker", {
+      type: SelectedColumnChangeType.CalculatedColumnAdded,
+      column
+    });
+  }
+}
+_searchPattern = new WeakMap();
+_selectedColumns = new WeakMap();
+
+export { ColumnChangeSource, ColumnModel, SelectedColumnChangeType, isColumnAdded, isColumnRemoved, isColumnsReordered };
+//# sourceMappingURL=ColumnModel.js.map

package/esm/packages/vuu-table-extras/src/column-picker/ColumnModel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColumnModel.js","sources":["../../../../../../../packages/vuu-table-extras/src/column-picker/ColumnModel.ts"],"sourcesContent":["import { ColumnDescriptor } from \"@vuu-ui/vuu-table-types\";\nimport { EventEmitter, reorderColumnItems, ValueOf } from \"@vuu-ui/vuu-utils\";\n\nexport const ColumnChangeSource = {\n  ColumnPicker: \"column-picker\",\n  ColumnSettings: \"column-settings\",\n  Table: \"table\",\n} as const;\nexport type ColumnChangeSource = ValueOf<typeof ColumnChangeSource>;\n\nexport const SelectedColumnChangeType = {\n  CalculatedColumnAdded: \"calculated-column-added\",\n  ColumnAdded: \"column-added\",\n  ColumnRemoved: \"column-removed\",\n  ColumnUpdated: \"column-updated\",\n  ColumnsReordered: \"columns-reordered\",\n} as const;\nexport type SelectedColumnChangeType = ValueOf<typeof SelectedColumnChangeType>;\n\nexport interface SelectedColumnChangeColumnAdded {\n  type: Extract<SelectedColumnChangeType, \"column-added\">;\n  column: ColumnDescriptor;\n}\nexport interface SelectedColumnChangeCalculatedColumnAdded {\n  type: Extract<SelectedColumnChangeType, \"calculated-column-added\">;\n  column: ColumnDescriptor;\n}\nexport interface SelectedColumnChangeColumnUpdated {\n  type: Extract<SelectedColumnChangeType, \"column-updated\">;\n  column: ColumnDescriptor;\n}\n\nexport interface SelectedColumnChangeColumnRemoved {\n  type: Extract<SelectedColumnChangeType, \"column-removed\">;\n  column: ColumnDescriptor;\n}\n\nexport interface SelectedColumnChangeColumnsReordered {\n  type: Extract<SelectedColumnChangeType, \"columns-reordered\">;\n}\n\nexport type SelectedColumnChangeDescriptor =\n  | SelectedColumnChangeCalculatedColumnAdded\n  | SelectedColumnChangeColumnAdded\n  | SelectedColumnChangeColumnRemoved\n  | SelectedColumnChangeColumnUpdated\n  | SelectedColumnChangeColumnsReordered;\n\nexport const isColumnAdded = (\n  change?: SelectedColumnChangeDescriptor,\n): change is SelectedColumnChangeColumnAdded =>\n  change?.type === SelectedColumnChangeType.ColumnAdded;\nexport const isColumnRemoved = (\n  change?: SelectedColumnChangeDescriptor,\n): change is SelectedColumnChangeColumnRemoved =>\n  change?.type === SelectedColumnChangeType.ColumnRemoved;\nexport const isColumnUpdated = (\n  change?: SelectedColumnChangeDescriptor,\n): change is SelectedColumnChangeColumnUpdated =>\n  change?.type === SelectedColumnChangeType.ColumnUpdated;\nexport const isColumnsReordered = (\n  change?: SelectedColumnChangeDescriptor,\n): change is SelectedColumnChangeColumnsReordered =>\n  change?.type === SelectedColumnChangeType.ColumnsReordered;\n\nexport type ColumnsChangeHandler = (\n  columns: readonly ColumnDescriptor[],\n  changeSource: ColumnChangeSource,\n  changeDescriptor?: SelectedColumnChangeDescriptor,\n) => void;\nexport type ColumnEvents = {\n  change: ColumnsChangeHandler;\n  render: (o: object) => void;\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 filterColumns = (\n  columns: readonly ColumnDescriptor[],\n  pattern: string,\n) => {\n  if (pattern) {\n    const lowerCasePattern = pattern.toLowerCase();\n    return columns.filter(\n      ({ name, label = name }) =>\n        label.toLowerCase().indexOf(lowerCasePattern) !== -1,\n    );\n  } else {\n    return columns;\n  }\n};\n\nexport class ColumnModel extends EventEmitter<ColumnEvents> {\n  #searchPattern = \"\";\n  #selectedColumns: readonly ColumnDescriptor[];\n  constructor(\n    /**\n     * All available columns, including selected columns.\n     */\n    public allColumns: readonly ColumnDescriptor[],\n    /**\n     * Columns already selected and rendered in Table.\n     */\n    selectedColumns: readonly ColumnDescriptor[],\n  ) {\n    super();\n    this.#selectedColumns = selectedColumns;\n  }\n\n  get availableColumns(): ColumnDescriptor[] {\n    return filterColumns(this.allColumns, this.#searchPattern)\n      .filter(\n        ({ name }) =>\n          this.#selectedColumns.findIndex((c) => c.name === name) === -1,\n      )\n      .toSorted(byColumnName);\n  }\n\n  set searchPattern(pattern: string) {\n    const searchPattern = pattern;\n    if (searchPattern !== this.#searchPattern) {\n      this.#searchPattern = searchPattern;\n      this.emit(\"render\", {});\n    }\n  }\n\n  get searchPattern() {\n    return this.#searchPattern ?? \"\";\n  }\n\n  get selectedColumns() {\n    return filterColumns(this.#selectedColumns, this.#searchPattern);\n  }\n  setSelectedColumns(\n    selectedColumns: ColumnDescriptor[],\n    source: ColumnChangeSource,\n    changeDescriptor?: SelectedColumnChangeDescriptor,\n  ) {\n    this.#selectedColumns = selectedColumns;\n    this.notifyListeners(selectedColumns, source, changeDescriptor);\n  }\n\n  getColumn(name: string) {\n    const col = this.#selectedColumns.find((col) => col.name === name);\n    if (col) {\n      return col;\n    }\n    throw Error(`[ColumnModel] columns does not contain column ${name}`);\n  }\n\n  addItemToSelectedColumns(name: string, source: ColumnChangeSource) {\n    const column = this.allColumns.find((col) => col.name === name);\n    if (column) {\n      this.#selectedColumns = this.#selectedColumns.concat(column);\n      this.notifyListeners(this.#selectedColumns, source, {\n        type: SelectedColumnChangeType.ColumnAdded,\n        column,\n      });\n    } else {\n      throw Error(\n        `[ColumnModel] addItemToSelectedColumns, column '${name}' not found`,\n      );\n    }\n  }\n  removeItemFromSelectedColumns(name: string, source: ColumnChangeSource) {\n    const column = this.#selectedColumns.find((col) => col.name === name);\n    if (column) {\n      const index = this.#selectedColumns.indexOf(column);\n      this.#selectedColumns = this.#selectedColumns.toSpliced(index, 1);\n      this.notifyListeners(this.#selectedColumns, source, {\n        type: SelectedColumnChangeType.ColumnRemoved,\n        column,\n      });\n    } else {\n      throw Error(\n        `[ColumnModel] removeItemFromSelectedColumns, column '${name}' not found`,\n      );\n    }\n  }\n\n  reorderSelectedColumns(\n    orderedColumnNames: string[],\n    source: ColumnChangeSource,\n  ) {\n    this.setSelectedColumns(\n      reorderColumnItems(this.#selectedColumns, orderedColumnNames),\n      source,\n      { type: SelectedColumnChangeType.ColumnsReordered },\n    );\n  }\n\n  updateColumn(\n    currentColumn: ColumnDescriptor,\n    newColumn: ColumnDescriptor,\n  ): void;\n  updateColumn(column: ColumnDescriptor): void;\n  updateColumn(column: ColumnDescriptor, newColumn: ColumnDescriptor = column) {\n    const allIndex = this.allColumns.findIndex(\n      (col) => col.name === column.name,\n    );\n    const selectedIndex = this.#selectedColumns.findIndex(\n      (col) => col.name === column.name,\n    );\n\n    if (selectedIndex !== -1) {\n      if (allIndex === -1) {\n        throw Error(\n          `[ColumnModel] updateColumn, selected column not in allColumns collection`,\n        );\n      }\n\n      this.#selectedColumns = this.#selectedColumns.toSpliced(\n        selectedIndex,\n        1,\n        newColumn,\n      );\n      this.allColumns = this.allColumns.toSpliced(allIndex, 1, newColumn);\n\n      this.notifyListeners(this.#selectedColumns, \"column-settings\", {\n        type: SelectedColumnChangeType.ColumnUpdated,\n        column,\n      });\n    } else {\n      throw Error(\n        `[ColumnModel] updateColumn, column ${column.name} not found`,\n      );\n    }\n  }\n\n  /**\n   * Used when adding a calculated column\n   *\n   * @param column\n   *\n   * @param addToSelectedColumns\n   */\n  addColumn(column: ColumnDescriptor, addToSelectedColumns = false) {\n    console.log(`[ColumnModel] add column ${JSON.stringify(column)}`);\n    if (addToSelectedColumns) {\n      console.log(`add it to selected coliumns`);\n    }\n\n    this.allColumns = this.allColumns.concat(column);\n    this.#selectedColumns = this.#selectedColumns.concat(column);\n\n    this.notifyListeners(this.#selectedColumns, \"column-picker\", {\n      type: SelectedColumnChangeType.CalculatedColumnAdded,\n      column,\n    });\n  }\n\n  private notifyListeners: ColumnsChangeHandler = (\n    columns,\n    source,\n    changeType,\n  ) => {\n    this.emit(\"change\", columns, source, changeType);\n    this.emit(\"render\", {});\n  };\n}\n"],"names":["col"],"mappings":"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"}

package/esm/packages/vuu-table-extras/src/column-picker/ColumnPicker.css.js

@@ -0,0 +1,4 @@
+var columnPickerCss = ".vuuColumnPicker {\n\n    --label-margin-left: 0px;\n\n    --columnpicker-background: var(--vuuColumnPicker-background, var(--salt-container-primary-background));\n    background: var(--columnpicker-background);\n    container-type: inline-size;\n    display: flex;  \n    flex-direction: column;\n    gap: var(--salt-spacing-300);\n    height: var(--vuuColumnPicker-height, 100%);\n    overflow: hidden;\n    padding: var(--salt-spacing-300) 0;\n\n    &.vuuColumnPicker-withCalculated {\n        --label-margin-left: 8px;\n    }\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        .vuuCalculatedColumnIcon {\n            --vuu-icon-color: var(--salt-content-secondary-foreground);\n            left: 32px;\n            position: absolute;\n            top: 8px;\n        }\n\n        .vuuHighlight {\n            color: var(--vuu-color-blue-40);\n            text-decoration: underline;\n        }\n\n        .vuuColumnPicker-text {\n            margin-left: var(--label-margin-left);\n        }\n\n    }\n\n    .vuuColumnPickerListItem-action {\n        margin-left: auto;\n        visibility: hidden;\n    }\n\n    .saltOption:hover {\n        .vuuColumnPickerListItem-action {\n            visibility: visible;\n        }\n    }\n\n    .vuuColumnPicker-search {\n        --saltInput-paddingLeft: var(--salt-spacing-300);\n        padding: var(--salt-spacing-200) var(--salt-spacing-300) 0 var(--salt-spacing-300);\n    }\n\n    .vuuColumnPicker-scrollContainer {\n\n        flex: 1 1 0px;\n        overflow: auto;\n\n\n        .vuuColumnPicker-sectionHeader {\n            align-items: center;\n            background: var(--columnpicker-background);\n            display: flex;\n            height: 32px;\n            padding: 0 var(--salt-spacing-300);\n            position: sticky;\n            top:0;\n            z-index: 1;\n        }\n\n        .vuuColumnPicker-availableHeader {\n            top: 32px;\n        }\n\n\n        .vuuColumnPicker-availableList {\n            .saltOption {\n                padding-left: var(--salt-spacing-300);\n            }\n        }\n\n    }\n\n}";
+
+export { columnPickerCss as default };
+//# sourceMappingURL=ColumnPicker.css.js.map

package/esm/packages/vuu-table-extras/src/column-picker/ColumnPicker.css.js.map

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

package/esm/packages/vuu-table-extras/src/column-picker/ColumnPicker.js

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

package/esm/packages/vuu-table-extras/src/column-picker/ColumnPicker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColumnPicker.js","sources":["../../../../../../../packages/vuu-table-extras/src/column-picker/ColumnPicker.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { ColumnDescriptor } from \"@vuu-ui/vuu-table-types\";\nimport {\n  DragDropProvider,\n  getColumnLabel,\n  isCalculatedColumn,\n  useSortable,\n} from \"@vuu-ui/vuu-utils\";\nimport cx from \"clsx\";\nimport {\n  ForwardedRef,\n  forwardRef,\n  HTMLAttributes,\n  MouseEventHandler,\n  RefCallback,\n  useCallback,\n  useMemo,\n  useRef,\n} from \"react\";\n\nimport {\n  Button,\n  Input,\n  ListBox,\n  ListBoxProps,\n  Option,\n  OptionProps,\n} from \"@salt-ds/core\";\nimport { applyHighlighting } from \"@vuu-ui/vuu-table\";\nimport { Icon, IconButton } from \"@vuu-ui/vuu-ui-controls\";\nimport { ColumnChangeSource } from \"./ColumnModel\";\nimport { ColumnPickerHookProps, useColumnPicker } from \"./useColumnPicker\";\n\nimport columnPickerCss from \"./ColumnPicker.css\";\n\nconst classBase = \"vuuColumnPicker\";\nexport const classBaseListItem = \"vuuColumnPickerListItem\";\n\nexport interface ColumnPickerProps\n  extends ColumnPickerHookProps,\n    Pick<ListBoxProps<ColumnDescriptor>, \"selected\" | \"onSelectionChange\">,\n    HTMLAttributes<HTMLDivElement> {\n  allowCreateCalculatedColumn?: boolean;\n  onClickCreateCalculatedColumn?: MouseEventHandler<HTMLButtonElement>;\n}\n\nconst searchIcon = <span data-icon=\"search\" />;\nconst NO_SELECTION: ColumnDescriptor[] = [] 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,\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(column.name, index);\n  const value = getColumnLabel(column as ColumnDescriptor);\n  const valueWithHighlighting = applyHighlighting(value, searchPattern);\n\n  const handleRemoveButtonClick = useCallback<\n    MouseEventHandler<HTMLButtonElement>\n  >(\n    (e) => {\n      e.stopPropagation();\n      onRemove?.(e);\n    },\n    [onRemove],\n  );\n\n  return (\n    <Option\n      {...optionProps}\n      className={cx(classNameProp, classBaseListItem)}\n      data-name={column.name}\n      ref={ref}\n    >\n      <IconButton\n        data-embedded\n        appearance=\"transparent\"\n        icon=\"draggable\"\n        ref={handleRef}\n        size={16}\n      />\n      {isCalculatedColumn(column.name) ? (\n        <Icon className=\"vuuCalculatedColumnIcon\" name=\"function\" />\n      ) : null}\n      <span className={`${classBase}-text`}>{valueWithHighlighting}</span>\n      <IconButton\n        className={`${classBaseListItem}-action`}\n        data-embedded\n        appearance=\"transparent\"\n        icon=\"cross\"\n        onClick={handleRemoveButtonClick}\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 = applyHighlighting(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    allowCreateCalculatedColumn,\n    columnModel,\n    className,\n    onClickCreateCalculatedColumn,\n    onSelectionChange,\n    selected = NO_SELECTION,\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    searchText,\n    selectedColumns,\n  } = useColumnPicker({\n    columnModel: columnModel,\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        columnModel.reorderSelectedColumns(\n          orderedColumnNames,\n          ColumnChangeSource.ColumnPicker,\n        );\n      }\n    }, 300);\n  }, [columnModel]);\n\n  const oneOrMoreColumnsIsCalculated = selectedColumns.some((column) =>\n    isCalculatedColumn(column.name),\n  );\n  return (\n    <div\n      {...htmlAttributes}\n      className={cx(classBase, className, {\n        [`${classBase}-withCalculated`]: oneOrMoreColumnsIsCalculated,\n      })}\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={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            onSelectionChange={onSelectionChange}\n            ref={listRef}\n            selected={selected}\n          >\n            {selectedColumns.map((column, index) => (\n              <SelectedColumnListItem\n                column={column}\n                index={index}\n                key={column.name}\n                onRemove={onRemoveItemFromSelectedList}\n                searchPattern={searchText.toLowerCase() as Lowercase<string>}\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={searchText.toLowerCase() as Lowercase<string>}\n              value={column}\n            />\n          ))}\n        </ListBox>\n      </div>\n      {allowCreateCalculatedColumn ? (\n        <div className={`${classBase}-column-buttons`}>\n          <Button onClick={onClickCreateCalculatedColumn}>\n            Create calculated column\n          </Button>\n        </div>\n      ) : null}\n    </div>\n  );\n});\n"],"names":["ColumnPicker"],"mappings":"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"}

package/esm/packages/vuu-table-extras/src/column-picker/ColumnPickerAction.js

@@ -0,0 +1,32 @@
+import { jsx } from 'react/jsx-runtime';
+import { IconButton } from '@vuu-ui/vuu-ui-controls';
+import { useCallback } from 'react';
+import { useTableColumnPicker } from './useTableColumnPicker.js';
+
+const ColumnPickerAction = ({
+  appearance = "transparent",
+  columnModel,
+  icon = "settings",
+  sentiment = "neutral",
+  ...IconButtonProps2
+}) => {
+  const { showColumnPicker } = useTableColumnPicker({ columnModel });
+  const handleClick = useCallback(() => {
+    showColumnPicker();
+  }, [showColumnPicker]);
+  return /* @__PURE__ */ jsx(
+    IconButton,
+    {
+      ...IconButtonProps2,
+      appearance,
+      "data-action": "table-settings",
+      icon,
+      onClick: handleClick,
+      sentiment,
+      size: 20
+    }
+  );
+};
+
+export { ColumnPickerAction };
+//# sourceMappingURL=ColumnPickerAction.js.map

package/esm/packages/vuu-table-extras/src/column-picker/ColumnPickerAction.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColumnPickerAction.js","sources":["../../../../../../../packages/vuu-table-extras/src/column-picker/ColumnPickerAction.tsx"],"sourcesContent":["import { IconButton, IconButtonProps } from \"@vuu-ui/vuu-ui-controls\";\nimport { ColumnPickerHookProps } from \"./useColumnPicker\";\nimport { useCallback } from \"react\";\nimport { useTableColumnPicker } from \"./useTableColumnPicker\";\n\nexport interface ColumnPickerActionProps\n  extends Partial<IconButtonProps>,\n    ColumnPickerHookProps {}\n\nexport const ColumnPickerAction = ({\n  appearance = \"transparent\",\n  columnModel,\n  icon = \"settings\",\n  sentiment = \"neutral\",\n  ...IconButtonProps\n}: ColumnPickerActionProps) => {\n  const { showColumnPicker } = useTableColumnPicker({ columnModel });\n\n  const handleClick = useCallback(() => {\n    showColumnPicker();\n  }, [showColumnPicker]);\n\n  return (\n    <IconButton\n      {...IconButtonProps}\n      appearance={appearance}\n      data-action=\"table-settings\"\n      icon={icon}\n      onClick={handleClick}\n      sentiment={sentiment}\n      size={20}\n    />\n  );\n};\n"],"names":["IconButtonProps"],"mappings":";;;;;AASO,MAAM,qBAAqB,CAAC;AAAA,EACjC,UAAa,GAAA,aAAA;AAAA,EACb,WAAA;AAAA,EACA,IAAO,GAAA,UAAA;AAAA,EACP,SAAY,GAAA,SAAA;AAAA,EACZ,GAAGA;AACL,CAA+B,KAAA;AAC7B,EAAA,MAAM,EAAE,gBAAiB,EAAA,GAAI,oBAAqB,CAAA,EAAE,aAAa,CAAA;AAEjE,EAAM,MAAA,WAAA,GAAc,YAAY,MAAM;AACpC,IAAiB,gBAAA,EAAA;AAAA,GACnB,EAAG,CAAC,gBAAgB,CAAC,CAAA;AAErB,EACE,uBAAA,GAAA;AAAA,IAAC,UAAA;AAAA,IAAA;AAAA,MACE,GAAGA,gBAAAA;AAAA,MACJ,UAAA;AAAA,MACA,aAAY,EAAA,gBAAA;AAAA,MACZ,IAAA;AAAA,MACA,OAAS,EAAA,WAAA;AAAA,MACT,SAAA;AAAA,MACA,IAAM,EAAA;AAAA;AAAA,GACR;AAEJ;;;;"}

package/esm/packages/vuu-table-extras/src/column-picker/useColumnPicker.js

@@ -0,0 +1,53 @@
+import { queryClosest } from '@vuu-ui/vuu-utils';
+import { useState, useEffect, useCallback } from 'react';
+import { ColumnChangeSource } from './ColumnModel.js';
+
+const SOURCE = ColumnChangeSource.ColumnPicker;
+const columnName = (target) => {
+  const listItem = queryClosest(target, ".saltOption", true);
+  const { name } = listItem.dataset;
+  if (name) {
+    return name;
+  } else {
+    throw Error(
+      "[useColumnPicker] column name could not be identified, data-name attribute not found"
+    );
+  }
+};
+const useColumnPicker = ({
+  columnModel: model
+}) => {
+  const [, forceRender] = useState({});
+  useEffect(() => {
+    model.on("render", forceRender);
+    return () => {
+      model.removeListener("render", forceRender);
+    };
+  }, [model]);
+  const handleChangeSearchInput = useCallback(
+    (evt) => {
+      const { value } = evt.target;
+      model.searchPattern = value;
+    },
+    [model]
+  );
+  const handleAddItemToSelectedList = useCallback(
+    (e) => model.addItemToSelectedColumns(columnName(e.target), SOURCE),
+    [model]
+  );
+  const handleRemoveItemFromSelectedList = useCallback(
+    (e) => model.removeItemFromSelectedColumns(columnName(e.target), SOURCE),
+    [model]
+  );
+  return {
+    availableColumns: model.availableColumns,
+    onAddItemToSelectedList: handleAddItemToSelectedList,
+    onRemoveItemFromSelectedList: handleRemoveItemFromSelectedList,
+    onChangeSearchInput: handleChangeSearchInput,
+    searchText: model.searchPattern,
+    selectedColumns: model.selectedColumns
+  };
+};
+
+export { useColumnPicker };
+//# sourceMappingURL=useColumnPicker.js.map

package/esm/packages/vuu-table-extras/src/column-picker/useColumnPicker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useColumnPicker.js","sources":["../../../../../../../packages/vuu-table-extras/src/column-picker/useColumnPicker.tsx"],"sourcesContent":["import { ColumnDescriptor, TableSelectionModel } from \"@vuu-ui/vuu-table-types\";\nimport { queryClosest } from \"@vuu-ui/vuu-utils\";\nimport {\n  FormEventHandler,\n  MouseEventHandler,\n  useCallback,\n  useEffect,\n  useState,\n} from \"react\";\nimport {\n  ColumnChangeSource,\n  ColumnModel,\n  SelectedColumnChangeType,\n} from \"./ColumnModel\";\n\nexport type ColumnSelectionModel = Extract<\n  TableSelectionModel,\n  \"none\" | \"single\"\n>;\n\nconst SOURCE = ColumnChangeSource.ColumnPicker;\n\nconst columnName = (target: EventTarget) => {\n  const listItem = queryClosest(target, \".saltOption\", true);\n  const { name } = listItem.dataset;\n  if (name) {\n    return name;\n  } else {\n    throw Error(\n      \"[useColumnPicker] column name could not be identified, data-name attribute not found\",\n    );\n  }\n};\nexport type SelectedColumnsChangeHandler = (\n  columns: ColumnDescriptor[],\n  changeType: SelectedColumnChangeType,\n) => void;\n\nexport interface ColumnPickerHookProps {\n  columnModel: ColumnModel;\n}\n\nexport const useColumnPicker = ({\n  columnModel: model,\n}: ColumnPickerHookProps) => {\n  const [, forceRender] = useState({});\n  useEffect(() => {\n    model.on(\"render\", forceRender);\n    return () => {\n      model.removeListener(\"render\", forceRender);\n    };\n  }, [model]);\n\n  const handleChangeSearchInput = useCallback<FormEventHandler>(\n    (evt) => {\n      const { value } = evt.target as HTMLInputElement;\n      model.searchPattern = value;\n    },\n    [model],\n  );\n\n  const handleAddItemToSelectedList = useCallback<\n    MouseEventHandler<HTMLButtonElement>\n  >(\n    (e) => model.addItemToSelectedColumns(columnName(e.target), SOURCE),\n    [model],\n  );\n\n  const handleRemoveItemFromSelectedList = useCallback<\n    MouseEventHandler<HTMLButtonElement>\n  >(\n    (e) => model.removeItemFromSelectedColumns(columnName(e.target), SOURCE),\n    [model],\n  );\n\n  return {\n    availableColumns: model.availableColumns,\n    onAddItemToSelectedList: handleAddItemToSelectedList,\n    onRemoveItemFromSelectedList: handleRemoveItemFromSelectedList,\n    onChangeSearchInput: handleChangeSearchInput,\n    searchText: model.searchPattern,\n    selectedColumns: model.selectedColumns,\n  };\n};\n"],"names":[],"mappings":";;;;AAoBA,MAAM,SAAS,kBAAmB,CAAA,YAAA;AAElC,MAAM,UAAA,GAAa,CAAC,MAAwB,KAAA;AAC1C,EAAA,MAAM,QAAW,GAAA,YAAA,CAAa,MAAQ,EAAA,aAAA,EAAe,IAAI,CAAA;AACzD,EAAM,MAAA,EAAE,IAAK,EAAA,GAAI,QAAS,CAAA,OAAA;AAC1B,EAAA,IAAI,IAAM,EAAA;AACR,IAAO,OAAA,IAAA;AAAA,GACF,MAAA;AACL,IAAM,MAAA,KAAA;AAAA,MACJ;AAAA,KACF;AAAA;AAEJ,CAAA;AAUO,MAAM,kBAAkB,CAAC;AAAA,EAC9B,WAAa,EAAA;AACf,CAA6B,KAAA;AAC3B,EAAA,MAAM,GAAG,WAAW,CAAI,GAAA,QAAA,CAAS,EAAE,CAAA;AACnC,EAAA,SAAA,CAAU,MAAM;AACd,IAAM,KAAA,CAAA,EAAA,CAAG,UAAU,WAAW,CAAA;AAC9B,IAAA,OAAO,MAAM;AACX,MAAM,KAAA,CAAA,cAAA,CAAe,UAAU,WAAW,CAAA;AAAA,KAC5C;AAAA,GACF,EAAG,CAAC,KAAK,CAAC,CAAA;AAEV,EAAA,MAAM,uBAA0B,GAAA,WAAA;AAAA,IAC9B,CAAC,GAAQ,KAAA;AACP,MAAM,MAAA,EAAE,KAAM,EAAA,GAAI,GAAI,CAAA,MAAA;AACtB,MAAA,KAAA,CAAM,aAAgB,GAAA,KAAA;AAAA,KACxB;AAAA,IACA,CAAC,KAAK;AAAA,GACR;AAEA,EAAA,MAAM,2BAA8B,GAAA,WAAA;AAAA,IAGlC,CAAC,MAAM,KAAM,CAAA,wBAAA,CAAyB,WAAW,CAAE,CAAA,MAAM,GAAG,MAAM,CAAA;AAAA,IAClE,CAAC,KAAK;AAAA,GACR;AAEA,EAAA,MAAM,gCAAmC,GAAA,WAAA;AAAA,IAGvC,CAAC,MAAM,KAAM,CAAA,6BAAA,CAA8B,WAAW,CAAE,CAAA,MAAM,GAAG,MAAM,CAAA;AAAA,IACvE,CAAC,KAAK;AAAA,GACR;AAEA,EAAO,OAAA;AAAA,IACL,kBAAkB,KAAM,CAAA,gBAAA;AAAA,IACxB,uBAAyB,EAAA,2BAAA;AAAA,IACzB,4BAA8B,EAAA,gCAAA;AAAA,IAC9B,mBAAqB,EAAA,uBAAA;AAAA,IACrB,YAAY,KAAM,CAAA,aAAA;AAAA,IAClB,iBAAiB,KAAM,CAAA;AAAA,GACzB;AACF;;;;"}

package/esm/packages/vuu-table-extras/src/column-picker/useTableColumnPicker.js

@@ -0,0 +1,33 @@
+import { jsx } from 'react/jsx-runtime';
+import { useContextPanel, useHideContextPanel } from '@vuu-ui/vuu-ui-controls';
+import { useRef, useCallback, useEffect } from 'react';
+import { ColumnPicker } from './ColumnPicker.js';
+
+const useTableColumnPicker = ({
+  columnModel
+}) => {
+  const showContextPanel = useContextPanel();
+  const hideContextPanel = useHideContextPanel();
+  const contextPanelShowing = useRef(false);
+  const showColumnPicker = useCallback(
+    (title = "Column Picker") => {
+      contextPanelShowing.current = true;
+      showContextPanel(/* @__PURE__ */ jsx(ColumnPicker, { columnModel }), title);
+    },
+    [columnModel, showContextPanel]
+  );
+  useEffect(
+    () => () => {
+      if (contextPanelShowing.current) {
+        hideContextPanel?.();
+      }
+    },
+    [hideContextPanel]
+  );
+  return {
+    showColumnPicker
+  };
+};
+
+export { useTableColumnPicker };
+//# sourceMappingURL=useTableColumnPicker.js.map

package/esm/packages/vuu-table-extras/src/column-picker/useTableColumnPicker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useTableColumnPicker.js","sources":["../../../../../../../packages/vuu-table-extras/src/column-picker/useTableColumnPicker.tsx"],"sourcesContent":["import { useContextPanel, useHideContextPanel } from \"@vuu-ui/vuu-ui-controls\";\nimport { useCallback, useEffect, useRef } from \"react\";\nimport { ColumnPicker } from \"./ColumnPicker\";\nimport { ColumnModel } from \"./ColumnModel\";\n\nexport interface TableColumnPickerHookProps {\n  columnModel: ColumnModel;\n}\n\nexport const useTableColumnPicker = ({\n  columnModel,\n}: TableColumnPickerHookProps) => {\n  const showContextPanel = useContextPanel();\n  const hideContextPanel = useHideContextPanel();\n  const contextPanelShowing = useRef(false);\n\n  const showColumnPicker = useCallback(\n    (title = \"Column Picker\") => {\n      contextPanelShowing.current = true;\n      showContextPanel(<ColumnPicker columnModel={columnModel} />, title);\n    },\n    [columnModel, showContextPanel],\n  );\n\n  // TODO what's this for ?\n  useEffect(\n    () => () => {\n      if (contextPanelShowing.current) {\n        // It might already be closed, but this won't do any harm\n        hideContextPanel?.();\n      }\n    },\n    [hideContextPanel],\n  );\n\n  return {\n    showColumnPicker,\n  };\n};\n"],"names":[],"mappings":";;;;;AASO,MAAM,uBAAuB,CAAC;AAAA,EACnC;AACF,CAAkC,KAAA;AAChC,EAAA,MAAM,mBAAmB,eAAgB,EAAA;AACzC,EAAA,MAAM,mBAAmB,mBAAoB,EAAA;AAC7C,EAAM,MAAA,mBAAA,GAAsB,OAAO,KAAK,CAAA;AAExC,EAAA,MAAM,gBAAmB,GAAA,WAAA;AAAA,IACvB,CAAC,QAAQ,eAAoB,KAAA;AAC3B,MAAA,mBAAA,CAAoB,OAAU,GAAA,IAAA;AAC9B,MAAA,gBAAA,iBAAkB,GAAA,CAAA,YAAA,EAAA,EAAa,WAA0B,EAAA,CAAA,EAAI,KAAK,CAAA;AAAA,KACpE;AAAA,IACA,CAAC,aAAa,gBAAgB;AAAA,GAChC;AAGA,EAAA,SAAA;AAAA,IACE,MAAM,MAAM;AACV,MAAA,IAAI,oBAAoB,OAAS,EAAA;AAE/B,QAAmB,gBAAA,IAAA;AAAA;AACrB,KACF;AAAA,IACA,CAAC,gBAAgB;AAAA,GACnB;AAEA,EAAO,OAAA;AAAA,IACL;AAAA,GACF;AACF;;;;"}

package/esm/packages/vuu-table-extras/src/column-settings-panel/ColumnNameLabel.css.js

@@ -0,0 +1,4 @@
+var columnNameLabelCss = ".vuuColumnNameLabel-calculated {\n    cursor: pointer;\n    display: flex;\n    gap: 2px;\n}\n\n.vuuColumnNameLabel-edit {\n    margin-left: auto;\n}\n\n.vuuColumnNameLabel-placeholder {\n    color: var(--vuu-color-gray-35);\n}";
+
+export { columnNameLabelCss as default };
+//# sourceMappingURL=ColumnNameLabel.css.js.map

package/esm/packages/vuu-table-extras/src/column-settings-panel/ColumnNameLabel.css.js.map

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