@vuu-ui/vuu-table-extras 0.8.35 → 0.8.36

package/esm/table-settings/TableSettingsPanel.css

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

package/esm/table-settings/TableSettingsPanel.js

@@ -0,0 +1,112 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { FormField, FormFieldLabel, ToggleButtonGroup, ToggleButton, Button } from '@salt-ds/core';
+import { ColumnList } from '../column-list/ColumnList.js';
+import { useTableSettings } from './useTableSettings.js';
+import { VuuInput, Icon } from '@vuu-ui/vuu-ui-controls';
+
+const classBase = "vuuTableSettingsPanel";
+const TableSettingsPanel = ({
+  allowColumnLabelCase = true,
+  allowColumnDefaultWidth = true,
+  allowGridRowStyling = true,
+  availableColumns,
+  onAddCalculatedColumn,
+  onConfigChange,
+  onDataSourceConfigChange,
+  onNavigateToColumn,
+  tableConfig: tableConfigProp
+}) => {
+  const {
+    columnItems,
+    columnLabelsValue,
+    onChangeColumnLabels,
+    onChangeTableAttribute,
+    onColumnChange,
+    onCommitColumnWidth,
+    onMoveListItem,
+    tableConfig
+  } = useTableSettings({
+    availableColumns,
+    onConfigChange,
+    onDataSourceConfigChange,
+    tableConfig: tableConfigProp
+  });
+  return /* @__PURE__ */ jsxs("div", { className: classBase, children: [
+    allowColumnLabelCase || allowColumnDefaultWidth || allowGridRowStyling ? /* @__PURE__ */ jsx("div", { className: `${classBase}-header`, children: /* @__PURE__ */ jsx("span", { children: "Column Settings" }) }) : null,
+    allowColumnDefaultWidth ? /* @__PURE__ */ jsxs(FormField, { children: [
+      /* @__PURE__ */ jsx(FormFieldLabel, { children: "Column Width" }),
+      /* @__PURE__ */ jsx(
+        VuuInput,
+        {
+          className: "vuuInput",
+          "data-embedded": true,
+          onCommit: onCommitColumnWidth
+        }
+      )
+    ] }) : null,
+    allowColumnLabelCase ? /* @__PURE__ */ jsxs(FormField, { children: [
+      /* @__PURE__ */ jsx(FormFieldLabel, { children: "Column Labels" }),
+      /* @__PURE__ */ jsxs(
+        ToggleButtonGroup,
+        {
+          className: "vuuToggleButtonGroup",
+          onChange: onChangeColumnLabels,
+          value: columnLabelsValue,
+          children: [
+            /* @__PURE__ */ jsx(ToggleButton, { className: "vuuIconToggleButton", value: 0, children: /* @__PURE__ */ jsx(Icon, { name: "text-strikethrough", size: 48 }) }),
+            /* @__PURE__ */ jsx(ToggleButton, { className: "vuuIconToggleButton", value: 1, children: /* @__PURE__ */ jsx(Icon, { name: "text-Tt", size: 48 }) }),
+            /* @__PURE__ */ jsx(ToggleButton, { className: "vuuIconToggleButton", value: 2, children: /* @__PURE__ */ jsx(Icon, { name: "text-T", size: 48 }) })
+          ]
+        }
+      )
+    ] }) : null,
+    allowGridRowStyling ? /* @__PURE__ */ jsxs(FormField, { children: [
+      /* @__PURE__ */ jsx(FormFieldLabel, { children: "Grid separators" }),
+      /* @__PURE__ */ jsxs("div", { className: "saltToggleButtonGroup vuuStateButtonGroup saltToggleButtonGroup-horizontal", children: [
+        /* @__PURE__ */ jsx(
+          ToggleButton,
+          {
+            selected: tableConfig.zebraStripes ?? false,
+            onChange: onChangeTableAttribute,
+            value: "zebraStripes",
+            children: /* @__PURE__ */ jsx(Icon, { name: "row-striping", size: 16 })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          ToggleButton,
+          {
+            selected: tableConfig.rowSeparators ?? false,
+            onChange: onChangeTableAttribute,
+            value: "rowSeparators",
+            children: /* @__PURE__ */ jsx(Icon, { name: "row-lines", size: 16 })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          ToggleButton,
+          {
+            selected: tableConfig.columnSeparators ?? false,
+            onChange: onChangeTableAttribute,
+            value: "columnSeparators",
+            children: /* @__PURE__ */ jsx(Icon, { name: "col-lines", size: 16 })
+          }
+        )
+      ] })
+    ] }) : null,
+    /* @__PURE__ */ jsx(
+      ColumnList,
+      {
+        columnItems,
+        onChange: onColumnChange,
+        onMoveListItem,
+        onNavigateToColumn
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { className: `${classBase}-calculatedButtonbar`, children: [
+      /* @__PURE__ */ jsx(Button, { "data-icon": "plus", onClick: onAddCalculatedColumn }),
+      /* @__PURE__ */ jsx("span", { className: `${classBase}-calculatedLabel`, children: "Add calculated column" })
+    ] })
+  ] });
+};
+
+export { TableSettingsPanel };
+//# sourceMappingURL=TableSettingsPanel.js.map

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

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

package/esm/table-settings/useTableSettings.js

@@ -0,0 +1,180 @@
+import { updateTableConfig } from '@vuu-ui/vuu-table';
+import { moveItem, subscribedOnly, addColumnToSubscribedColumns, queryClosest, useLayoutEffectSkipFirst, isCalculatedColumn } from '@vuu-ui/vuu-utils';
+import { useState, useMemo, useCallback } from 'react';
+
+const sortOrderFromAvailableColumns = (availableColumns, columns) => {
+  const sortedColumns = [];
+  for (const { name } of availableColumns) {
+    const column = columns.find((col) => col.name === name);
+    if (column) {
+      sortedColumns.push(column);
+    }
+  }
+  return sortedColumns;
+};
+const buildColumnItems = (availableColumns, configuredColumns) => {
+  return availableColumns.map(({ name, serverDataType }) => {
+    const configuredColumn = configuredColumns.find((col) => col.name === name);
+    return {
+      hidden: configuredColumn?.hidden,
+      isCalculated: isCalculatedColumn(name),
+      label: configuredColumn?.label,
+      name,
+      serverDataType,
+      subscribed: configuredColumn !== void 0
+    };
+  });
+};
+const useTableSettings = ({
+  availableColumns: availableColumnsProp,
+  onConfigChange,
+  onDataSourceConfigChange,
+  tableConfig: tableConfigProp
+}) => {
+  const [{ availableColumns, tableConfig }, setColumnState] = useState({
+    availableColumns: availableColumnsProp,
+    tableConfig: tableConfigProp
+  });
+  const columnItems = useMemo(
+    () => buildColumnItems(availableColumns, tableConfig.columns),
+    [availableColumns, tableConfig.columns]
+  );
+  const handleMoveListItem = useCallback(
+    (fromIndex, toIndex) => {
+      setColumnState((state) => {
+        const newAvailableColumns = moveItem(
+          state.availableColumns,
+          fromIndex,
+          toIndex
+        );
+        const newColumns = sortOrderFromAvailableColumns(
+          newAvailableColumns,
+          tableConfig.columns
+        );
+        return {
+          availableColumns: newAvailableColumns,
+          tableConfig: {
+            ...state.tableConfig,
+            columns: newColumns
+          }
+        };
+      });
+    },
+    [tableConfig.columns]
+  );
+  const handleColumnChange = useCallback(
+    (name, property, value) => {
+      const columnItem = columnItems.find((col) => col.name === name);
+      if (property === "subscribed") {
+        if (columnItem?.subscribed) {
+          const subscribedColumns = tableConfig.columns.filter((col) => col.name !== name).map((col) => col.name);
+          setColumnState((state) => ({
+            ...state,
+            tableConfig: {
+              ...tableConfig,
+              columns: tableConfig.columns.filter(
+                subscribedOnly(subscribedColumns)
+              )
+            }
+          }));
+          onDataSourceConfigChange({
+            columns: subscribedColumns
+          });
+        } else {
+          const newConfig = {
+            ...tableConfig,
+            columns: addColumnToSubscribedColumns(
+              tableConfig.columns,
+              availableColumns,
+              name
+            )
+          };
+          setColumnState((state) => ({
+            ...state,
+            tableConfig: newConfig
+          }));
+          const subscribedColumns = newConfig.columns.map((col) => col.name);
+          onDataSourceConfigChange({
+            columns: subscribedColumns
+          });
+        }
+      } else if (columnItem?.subscribed) {
+        const column = tableConfig.columns.find((col) => col.name === name);
+        if (column) {
+          const newConfig = updateTableConfig(tableConfig, {
+            type: "column-prop",
+            property,
+            column,
+            value
+          });
+          setColumnState((state) => ({
+            ...state,
+            tableConfig: newConfig
+          }));
+        }
+      }
+    },
+    [availableColumns, columnItems, onDataSourceConfigChange, tableConfig]
+  );
+  const handleChangeColumnLabels = useCallback((evt) => {
+    const button = queryClosest(evt.target, "button");
+    if (button) {
+      const value = parseInt(button.value);
+      const columnFormatHeader = value === 0 ? void 0 : value === 1 ? "capitalize" : "uppercase";
+      setColumnState((state) => ({
+        ...state,
+        tableConfig: {
+          ...state.tableConfig,
+          columnFormatHeader
+        }
+      }));
+    }
+  }, []);
+  const handleChangeTableAttribute = useCallback(
+    (evt) => {
+      const button = queryClosest(evt.target, "button");
+      if (button) {
+        const { ariaPressed, value } = button;
+        console.log({ ariaPressed, value, button });
+        setColumnState((state) => ({
+          ...state,
+          tableConfig: {
+            ...state.tableConfig,
+            [value]: ariaPressed !== "true"
+          }
+        }));
+      }
+    },
+    []
+  );
+  const handleCommitColumnWidth = useCallback((_, value) => {
+    const columnDefaultWidth = parseInt(value);
+    if (!isNaN(columnDefaultWidth)) {
+      setColumnState((state) => ({
+        ...state,
+        tableConfig: {
+          ...state.tableConfig,
+          columnDefaultWidth
+        }
+      }));
+    }
+    console.log({ value });
+  }, []);
+  useLayoutEffectSkipFirst(() => {
+    onConfigChange?.(tableConfig);
+  }, [onConfigChange, tableConfig]);
+  const columnLabelsValue = tableConfig.columnFormatHeader === void 0 ? 0 : tableConfig.columnFormatHeader === "capitalize" ? 1 : 2;
+  return {
+    columnItems,
+    columnLabelsValue,
+    onChangeColumnLabels: handleChangeColumnLabels,
+    onChangeTableAttribute: handleChangeTableAttribute,
+    onColumnChange: handleColumnChange,
+    onCommitColumnWidth: handleCommitColumnWidth,
+    onMoveListItem: handleMoveListItem,
+    tableConfig
+  };
+};
+
+export { useTableSettings };
+//# sourceMappingURL=useTableSettings.js.map

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

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

package/package.json

@@ -1,21 +1,21 @@
 {
-  "version": "0.8.35",
+  "version": "0.8.36",
   "author": "heswell",
   "license": "Apache-2.0",
   "devDependencies": {
-    "@vuu-ui/vuu-filter-types": "0.8.35",
-    "@vuu-ui/vuu-protocol-types": "0.8.35"
+    "@vuu-ui/vuu-filter-types": "0.8.36",
+    "@vuu-ui/vuu-protocol-types": "0.8.36"
   },
   "dependencies": {
-    "@vuu-ui/vuu-codemirror": "0.8.35",
-    "@vuu-ui/vuu-data-react": "0.8.35",
-    "@vuu-ui/vuu-data-types": "0.8.35",
-    "@vuu-ui/vuu-table-types": "0.8.35",
-    "@vuu-ui/vuu-layout": "0.8.35",
-    "@vuu-ui/vuu-popups": "0.8.35",
-    "@vuu-ui/vuu-table": "0.8.35",
-    "@vuu-ui/vuu-utils": "0.8.35",
-    "@vuu-ui/vuu-ui-controls": "0.8.35",
+    "@vuu-ui/vuu-codemirror": "0.8.36",
+    "@vuu-ui/vuu-data-react": "0.8.36",
+    "@vuu-ui/vuu-data-types": "0.8.36",
+    "@vuu-ui/vuu-table-types": "0.8.36",
+    "@vuu-ui/vuu-layout": "0.8.36",
+    "@vuu-ui/vuu-popups": "0.8.36",
+    "@vuu-ui/vuu-table": "0.8.36",
+    "@vuu-ui/vuu-utils": "0.8.36",
+    "@vuu-ui/vuu-ui-controls": "0.8.36",
     "@lezer/lr": "1.3.4",
     "@salt-ds/core": "1.17.0"
   },
@@ -27,6 +27,8 @@
   "type": "module",
   "files": [
     "README.md",
+    "esm",
+    "cjs",
     "/types"
   ],
   "main": "cjs/index.js",