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

package/esm/table-settings/TableSettingsPanel.css

@@ -1,64 +0,0 @@
-.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

@@ -1,112 +0,0 @@
-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

@@ -1 +0,0 @@
-{"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

@@ -1,180 +0,0 @@
-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

@@ -1 +0,0 @@
-{"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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"}