@vuu-ui/vuu-table-extras 1.0.3 → 2.0.0-alpha.1

package/cjs/table-settings-panel/useTableSettings.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useTableSettings.js","sources":["../../../../packages/vuu-table-extras/src/table-settings-panel/useTableSettings.ts"],"sourcesContent":["import { TableDisplayAttributes } from \"@vuu-ui/vuu-table-types\";\nimport {\n  queryClosest,\n  useLayoutEffectSkipFirst,\n  CommitHandler,\n} from \"@vuu-ui/vuu-utils\";\nimport { MouseEvent, SyntheticEvent, useCallback, useState } from \"react\";\nimport { TableSettingsPanelProps } from \"./TableSettingsPanel\";\n\nexport type ColumnLike = {\n  name: string;\n};\n\nexport const useTableSettings = ({\n  onDisplayAttributeChange,\n  tableDisplayAttributes: tableDisplayAttributesProp,\n}: TableSettingsPanelProps) => {\n  const [tableDisplayAttributes, setDisplayTableAttributes] =\n    useState<TableDisplayAttributes>(tableDisplayAttributesProp);\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      setDisplayTableAttributes((state) => ({\n        ...state,\n        columnFormatHeader,\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        setDisplayTableAttributes((state) => ({\n          ...state,\n          [value]: ariaPressed !== \"true\",\n        }));\n      }\n    },\n    [],\n  );\n\n  const handleCommitColumnWidth = useCallback<CommitHandler>((_, value) => {\n    if (typeof value === \"string\") {\n      const columnDefaultWidth = parseInt(value);\n      if (!isNaN(columnDefaultWidth)) {\n        setDisplayTableAttributes((state) => ({\n          ...state,\n          columnDefaultWidth,\n        }));\n      }\n    }\n  }, []);\n\n  useLayoutEffectSkipFirst(() => {\n    onDisplayAttributeChange?.(tableDisplayAttributes);\n  }, [onDisplayAttributeChange, tableDisplayAttributes]);\n\n  const columnLabelsValue =\n    tableDisplayAttributes.columnFormatHeader === undefined\n      ? 0\n      : tableDisplayAttributes.columnFormatHeader === \"capitalize\"\n        ? 1\n        : 2;\n\n  return {\n    columnLabelsValue,\n    onChangeColumnLabels: handleChangeColumnLabels,\n    onChangeTableAttribute: handleChangeTableAttribute,\n    onCommitColumnWidth: handleCommitColumnWidth,\n    tableDisplayAttributes,\n  };\n};\n"],"names":["useState","useCallback","queryClosest","useLayoutEffectSkipFirst"],"mappings":";;;;;AAaO,MAAM,mBAAmB,CAAC;AAAA,EAC/B,wBAAA;AAAA,EACA,sBAAwB,EAAA;AAC1B,CAA+B,KAAA;AAC7B,EAAA,MAAM,CAAC,sBAAA,EAAwB,yBAAyB,CAAA,GACtDA,eAAiC,0BAA0B,CAAA;AAE7D,EAAM,MAAA,wBAAA,GAA2BC,iBAAY,CAAA,CAAC,GAAwB,KAAA;AACpE,IAAA,MAAM,MAAS,GAAAC,qBAAA,CAAgC,GAAI,CAAA,MAAA,EAAQ,QAAQ,CAAA;AACnE,IAAA,IAAI,MAAQ,EAAA;AACV,MAAM,MAAA,KAAA,GAAQ,QAAS,CAAA,MAAA,CAAO,KAAK,CAAA;AACnC,MAAA,MAAM,qBACJ,KAAU,KAAA,CAAA,GAAI,KAAY,CAAA,GAAA,KAAA,KAAU,IAAI,YAAe,GAAA,WAAA;AACzD,MAAA,yBAAA,CAA0B,CAAC,KAAW,MAAA;AAAA,QACpC,GAAG,KAAA;AAAA,QACH;AAAA,OACA,CAAA,CAAA;AAAA;AACJ,GACF,EAAG,EAAE,CAAA;AAEL,EAAA,MAAM,0BAA6B,GAAAD,iBAAA;AAAA,IACjC,CAAC,GAAuC,KAAA;AACtC,MAAA,MAAM,MAAS,GAAAC,qBAAA,CAAgC,GAAI,CAAA,MAAA,EAAQ,QAAQ,CAAA;AACnE,MAAA,IAAI,MAAQ,EAAA;AACV,QAAM,MAAA,EAAE,WAAa,EAAA,KAAA,EAAU,GAAA,MAAA;AAC/B,QAAA,yBAAA,CAA0B,CAAC,KAAW,MAAA;AAAA,UACpC,GAAG,KAAA;AAAA,UACH,CAAC,KAAK,GAAG,WAAgB,KAAA;AAAA,SACzB,CAAA,CAAA;AAAA;AACJ,KACF;AAAA,IACA;AAAC,GACH;AAEA,EAAA,MAAM,uBAA0B,GAAAD,iBAAA,CAA2B,CAAC,CAAA,EAAG,KAAU,KAAA;AACvE,IAAI,IAAA,OAAO,UAAU,QAAU,EAAA;AAC7B,MAAM,MAAA,kBAAA,GAAqB,SAAS,KAAK,CAAA;AACzC,MAAI,IAAA,CAAC,KAAM,CAAA,kBAAkB,CAAG,EAAA;AAC9B,QAAA,yBAAA,CAA0B,CAAC,KAAW,MAAA;AAAA,UACpC,GAAG,KAAA;AAAA,UACH;AAAA,SACA,CAAA,CAAA;AAAA;AACJ;AACF,GACF,EAAG,EAAE,CAAA;AAEL,EAAAE,iCAAA,CAAyB,MAAM;AAC7B,IAAA,wBAAA,GAA2B,sBAAsB,CAAA;AAAA,GAChD,EAAA,CAAC,wBAA0B,EAAA,sBAAsB,CAAC,CAAA;AAErD,EAAM,MAAA,iBAAA,GACJ,uBAAuB,kBAAuB,KAAA,KAAA,CAAA,GAC1C,IACA,sBAAuB,CAAA,kBAAA,KAAuB,eAC5C,CACA,GAAA,CAAA;AAER,EAAO,OAAA;AAAA,IACL,iBAAA;AAAA,IACA,oBAAsB,EAAA,wBAAA;AAAA,IACtB,sBAAwB,EAAA,0BAAA;AAAA,IACxB,mBAAqB,EAAA,uBAAA;AAAA,IACrB;AAAA,GACF;AACF;;;;"}

package/esm/{column-expression-panel/ColumnExpressionPanel.js → calculated-column/CalculatedColumnPanel.js}

@@ -1,7 +1,8 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { getCalculatedColumnDetails } from '@vuu-ui/vuu-utils';
 import { FormField, FormFieldLabel, Input, Dropdown, Option } from '@salt-ds/core';
+import { useCalculatedColumnPanel } from './useCalculatedColumnPanel.js';
 import { useRef, useCallback } from 'react';
+import { getCalculatedColumnDetails } from '@vuu-ui/vuu-utils';
 import { ColumnExpressionInput } from '../column-expression-input/ColumnExpressionInput.js';
 import '../column-expression-input/column-language-parser/ColumnExpressionLanguage.js';
 import '../column-expression-input/column-language-parser/ColumnExpressionTreeWalker.js';
@@ -10,27 +11,26 @@ import '@vuu-ui/vuu-codemirror';
 import '../column-expression-input/highlighting.js';
 import '../column-expression-input/theme.js';
 import { useColumnExpressionSuggestionProvider } from '../column-expression-input/useColumnExpressionSuggestionProvider.js';
-import { useColumnExpression } from './useColumnExpression.js';
 
-const classBase = "vuuColumnExpressionPanel";
-const ColumnExpressionPanel = ({
+const classBase = "vuuCalculatedColumnPanel";
+const CalculatedColumnPanel = ({
   column: columnProp,
-  onChangeName: onChangeNameProp,
+  columnModel,
+  onChangeColumn,
   onChangeServerDataType: onChangeServerDataTypeProp,
-  tableConfig,
   vuuTable
 }) => {
   const typeRef = useRef(null);
-  const { column, onChangeExpression, onChangeName, onChangeServerDataType } = useColumnExpression({
+  const { column, onChangeExpression, onChangeName, onChangeServerDataType } = useCalculatedColumnPanel({
     column: columnProp,
-    onChangeName: onChangeNameProp,
+    onChangeColumn,
     onChangeServerDataType: onChangeServerDataTypeProp
   });
   const initialExpressionRef = useRef(
     getCalculatedColumnDetails(column).expression ?? ""
   );
   const suggestionProvider = useColumnExpressionSuggestionProvider({
-    columns: tableConfig.columns,
+    columns: columnModel.selectedColumns,
     table: vuuTable
   });
   const handleSubmitExpression = useCallback(() => {
@@ -40,9 +40,9 @@ const ColumnExpressionPanel = ({
   }, []);
   const { name, serverDataType } = getCalculatedColumnDetails(column);
   return /* @__PURE__ */ jsxs("div", { className: classBase, children: [
-    /* @__PURE__ */ jsx("div", { className: "vuuColumnSettingsPanel-header", children: /* @__PURE__ */ jsx("span", { children: "Calculation" }) }),
+    /* @__PURE__ */ jsx("div", { children: column.name }),
     /* @__PURE__ */ jsxs(FormField, { "data-field": "column-name", children: [
-      /* @__PURE__ */ jsx(FormFieldLabel, { children: "Column Name" }),
+      /* @__PURE__ */ jsx(FormFieldLabel, { children: "Column Label" }),
       /* @__PURE__ */ jsx(Input, { className: "vuuInput", onChange: onChangeName, value: name })
     ] }),
     /* @__PURE__ */ jsxs(FormField, { "data-field": "column-expression", children: [
@@ -79,5 +79,5 @@ const ColumnExpressionPanel = ({
   ] });
 };
 
-export { ColumnExpressionPanel };
-//# sourceMappingURL=ColumnExpressionPanel.js.map
+export { CalculatedColumnPanel };
+//# sourceMappingURL=CalculatedColumnPanel.js.map

package/esm/calculated-column/CalculatedColumnPanel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CalculatedColumnPanel.js","sources":["../../../../packages/vuu-table-extras/src/calculated-column/CalculatedColumnPanel.tsx"],"sourcesContent":["import {\n  Dropdown,\n  FormField,\n  FormFieldLabel,\n  Input,\n  Option,\n} from \"@salt-ds/core\";\nimport { useCalculatedColumnPanel } from \"./useCalculatedColumnPanel\";\nimport { HTMLAttributes, useCallback, useRef } from \"react\";\nimport { ColumnDescriptor } from \"@vuu-ui/vuu-table-types\";\nimport { VuuColumnDataType, VuuTable } from \"@vuu-ui/vuu-protocol-types\";\nimport { getCalculatedColumnDetails } from \"@vuu-ui/vuu-utils\";\nimport {\n  ColumnExpressionInput,\n  ColumnExpressionSubmitHandler,\n  useColumnExpressionSuggestionProvider,\n} from \"../column-expression-input\";\nimport { ColumnModel } from \"../column-picker/ColumnModel\";\n\nconst classBase = \"vuuCalculatedColumnPanel\";\n\nexport interface CalculatedColumnPanelProps\n  extends HTMLAttributes<HTMLDivElement> {\n  column: ColumnDescriptor;\n  columnModel: ColumnModel;\n  onChangeColumn: (column: ColumnDescriptor) => void;\n  onChangeServerDataType?: (name: VuuColumnDataType) => void;\n  vuuTable: VuuTable;\n}\n\nexport const CalculatedColumnPanel = ({\n  column: columnProp,\n  columnModel,\n  onChangeColumn,\n  onChangeServerDataType: onChangeServerDataTypeProp,\n  vuuTable,\n}: CalculatedColumnPanelProps) => {\n  const typeRef = useRef<HTMLButtonElement>(null);\n\n  const { column, onChangeExpression, onChangeName, onChangeServerDataType } =\n    useCalculatedColumnPanel({\n      column: columnProp,\n      onChangeColumn,\n      onChangeServerDataType: onChangeServerDataTypeProp,\n    });\n  // The initial value to pass into the Expression Input. That is a\n  // CodeMirror editor and will manage its own state once initialised.\n  const initialExpressionRef = useRef<string>(\n    getCalculatedColumnDetails(column).expression ?? \"\",\n  );\n\n  const suggestionProvider = useColumnExpressionSuggestionProvider({\n    columns: columnModel.selectedColumns,\n    table: vuuTable,\n  });\n\n  const handleSubmitExpression =\n    useCallback<ColumnExpressionSubmitHandler>(() => {\n      if (typeRef.current) {\n        (\n          typeRef.current?.querySelector(\"button\") as HTMLButtonElement\n        )?.focus();\n      }\n    }, []);\n\n  const { name, serverDataType } = getCalculatedColumnDetails(column);\n\n  return (\n    <div className={classBase}>\n      <div>{column.name}</div>\n\n      <FormField data-field=\"column-name\">\n        <FormFieldLabel>Column Label</FormFieldLabel>\n        <Input className=\"vuuInput\" onChange={onChangeName} value={name} />\n      </FormField>\n\n      <FormField data-field=\"column-expression\">\n        <FormFieldLabel>Expression</FormFieldLabel>\n        <ColumnExpressionInput\n          onChange={onChangeExpression}\n          onSubmitExpression={handleSubmitExpression}\n          source={initialExpressionRef.current}\n          suggestionProvider={suggestionProvider}\n        />\n      </FormField>\n      <FormField data-field=\"type\">\n        <FormFieldLabel>Column type</FormFieldLabel>\n        <Dropdown\n          className={`${classBase}-type`}\n          onSelectionChange={onChangeServerDataType}\n          ref={typeRef}\n          selected={serverDataType ? [serverDataType] : []}\n          value={serverDataType}\n        >\n          <Option value=\"boolean\">Boolean</Option>\n          <Option value=\"double\">Double</Option>\n          <Option value=\"long\">Long</Option>\n          <Option value=\"string\">String</Option>\n        </Dropdown>\n      </FormField>\n    </div>\n  );\n};\n"],"names":[],"mappings":"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"}

package/esm/{column-expression-panel/useColumnExpression.js → calculated-column/useCalculatedColumnPanel.js}

@@ -12,9 +12,9 @@ const applyDefaults = (column) => {
     return column;
   }
 };
-const useColumnExpression = ({
+const useCalculatedColumnPanel = ({
   column: columnProp,
-  onChangeName: onChangeNameProp,
+  onChangeColumn,
   onChangeServerDataType: onChangeServerDataTypeProp
 }) => {
   const [column, _setColumn] = useState(
@@ -29,31 +29,33 @@ const useColumnExpression = ({
     (evt) => {
       const { value } = evt.target;
       const newColumn = setCalculatedColumnName(column, value);
+      console.log(`name = ${newColumn.name}`);
       setColumn(newColumn);
-      onChangeNameProp?.(newColumn.name);
+      onChangeColumn(newColumn);
     },
-    [column, onChangeNameProp, setColumn]
+    [column, onChangeColumn, setColumn]
   );
   const onChangeExpression = useCallback(
     (value) => {
+      console.log(`expression = ${value}`);
       const expression = value.trim();
       const { current: column2 } = columnRef;
       const newColumn = setCalculatedColumnExpression(column2, expression);
       setColumn(newColumn);
-      onChangeNameProp?.(newColumn.name);
+      onChangeColumn(newColumn);
     },
-    [onChangeNameProp, setColumn]
+    [onChangeColumn, setColumn]
   );
   const onChangeServerDataType = useCallback(
     (_e, [serverDataType]) => {
       if (isVuuColumnDataType(serverDataType)) {
         const newColumn = setCalculatedColumnType(column, serverDataType);
         setColumn(newColumn);
-        onChangeNameProp?.(newColumn.name);
         onChangeServerDataTypeProp?.(serverDataType);
+        onChangeColumn(newColumn);
       }
     },
-    [column, onChangeNameProp, onChangeServerDataTypeProp, setColumn]
+    [column, onChangeColumn, onChangeServerDataTypeProp, setColumn]
   );
   return {
     column,
@@ -63,5 +65,5 @@ const useColumnExpression = ({
   };
 };
 
-export { useColumnExpression };
-//# sourceMappingURL=useColumnExpression.js.map
+export { useCalculatedColumnPanel };
+//# sourceMappingURL=useCalculatedColumnPanel.js.map

package/esm/calculated-column/useCalculatedColumnPanel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useCalculatedColumnPanel.js","sources":["../../../../packages/vuu-table-extras/src/calculated-column/useCalculatedColumnPanel.ts"],"sourcesContent":["import { ColumnDescriptor } from \"@vuu-ui/vuu-table-types\";\nimport {\n  getCalculatedColumnDetails,\n  isVuuColumnDataType,\n  setCalculatedColumnExpression,\n  setCalculatedColumnName,\n  setCalculatedColumnType,\n} from \"@vuu-ui/vuu-utils\";\nimport {\n  FormEventHandler,\n  SyntheticEvent,\n  useCallback,\n  useRef,\n  useState,\n} from \"react\";\nimport { CalculatedColumnPanelProps } from \"./CalculatedColumnPanel\";\n\nexport type ColumnExpressionHookProps = Pick<\n  CalculatedColumnPanelProps,\n  \"column\" | \"onChangeColumn\" | \"onChangeServerDataType\"\n>;\n\nconst applyDefaults = (column: ColumnDescriptor) => {\n  const { name, expression, serverDataType } =\n    getCalculatedColumnDetails(column);\n  if (serverDataType === undefined) {\n    return {\n      ...column,\n      name: `${name}:string:${expression}`,\n    };\n  } else {\n    return column;\n  }\n};\n\nexport const useCalculatedColumnPanel = ({\n  column: columnProp,\n  onChangeColumn,\n  onChangeServerDataType: onChangeServerDataTypeProp,\n}: ColumnExpressionHookProps) => {\n  const [column, _setColumn] = useState<ColumnDescriptor>(\n    applyDefaults(columnProp),\n  );\n  const columnRef = useRef<ColumnDescriptor>(columnProp);\n  const setColumn = useCallback((column: ColumnDescriptor) => {\n    columnRef.current = column;\n    _setColumn(column);\n  }, []);\n\n  // We need to track column name in a ref because ColunExpressionInput\n  // is not a pure React component, it hosts a CodeMirror editor. We\n  // do not want to cause it to render mid-edit. Therefore it uses memo\n  // and only renders on initial load. onChangeExpression must be stable.\n  // const columnNameRef = useRef<string>(column.name);\n  // const expressionRef = useRef(getCalculatedColumnDetails(column)[1]);\n  const onChangeName = useCallback<FormEventHandler>(\n    (evt) => {\n      const { value } = evt.target as HTMLInputElement;\n      const newColumn = setCalculatedColumnName(column, value);\n      // columnNameRef.current = newColumn.name;\n      console.log(`name = ${newColumn.name}`);\n      setColumn(newColumn);\n      onChangeColumn(newColumn);\n    },\n    [column, onChangeColumn, setColumn],\n  );\n\n  const onChangeExpression = useCallback(\n    (value: string) => {\n      console.log(`expression = ${value}`);\n      // we do not set state when this changes as the codemirror editor\n      // manages state of the expression for us until complete\n      const expression = value.trim();\n      // expressionRef.current = expression;\n      // const [name, , type] = column.name.split(\":\");\n      // columnNameRef.current = `${name}:${expression}:${type}`;\n\n      const { current: column } = columnRef;\n      const newColumn = setCalculatedColumnExpression(column, expression);\n      setColumn(newColumn);\n\n      onChangeColumn(newColumn);\n    },\n    [onChangeColumn, setColumn],\n  );\n\n  const onChangeServerDataType = useCallback(\n    (_e: SyntheticEvent, [serverDataType]: string[]) => {\n      if (isVuuColumnDataType(serverDataType)) {\n        const newColumn = setCalculatedColumnType(column, serverDataType);\n        setColumn(newColumn);\n        onChangeServerDataTypeProp?.(serverDataType);\n        onChangeColumn(newColumn);\n      }\n    },\n    [column, onChangeColumn, onChangeServerDataTypeProp, setColumn],\n  );\n\n  return {\n    column,\n    onChangeExpression,\n    onChangeName,\n    onChangeServerDataType,\n  };\n};\n"],"names":["column"],"mappings":";;;AAsBA,MAAM,aAAA,GAAgB,CAAC,MAA6B,KAAA;AAClD,EAAA,MAAM,EAAE,IAAM,EAAA,UAAA,EAAY,cAAe,EAAA,GACvC,2BAA2B,MAAM,CAAA;AACnC,EAAA,IAAI,mBAAmB,KAAW,CAAA,EAAA;AAChC,IAAO,OAAA;AAAA,MACL,GAAG,MAAA;AAAA,MACH,IAAM,EAAA,CAAA,EAAG,IAAI,CAAA,QAAA,EAAW,UAAU,CAAA;AAAA,KACpC;AAAA,GACK,MAAA;AACL,IAAO,OAAA,MAAA;AAAA;AAEX,CAAA;AAEO,MAAM,2BAA2B,CAAC;AAAA,EACvC,MAAQ,EAAA,UAAA;AAAA,EACR,cAAA;AAAA,EACA,sBAAwB,EAAA;AAC1B,CAAiC,KAAA;AAC/B,EAAM,MAAA,CAAC,MAAQ,EAAA,UAAU,CAAI,GAAA,QAAA;AAAA,IAC3B,cAAc,UAAU;AAAA,GAC1B;AACA,EAAM,MAAA,SAAA,GAAY,OAAyB,UAAU,CAAA;AACrD,EAAM,MAAA,SAAA,GAAY,WAAY,CAAA,CAACA,OAA6B,KAAA;AAC1D,IAAA,SAAA,CAAU,OAAUA,GAAAA,OAAAA;AACpB,IAAA,UAAA,CAAWA,OAAM,CAAA;AAAA,GACnB,EAAG,EAAE,CAAA;AAQL,EAAA,MAAM,YAAe,GAAA,WAAA;AAAA,IACnB,CAAC,GAAQ,KAAA;AACP,MAAM,MAAA,EAAE,KAAM,EAAA,GAAI,GAAI,CAAA,MAAA;AACtB,MAAM,MAAA,SAAA,GAAY,uBAAwB,CAAA,MAAA,EAAQ,KAAK,CAAA;AAEvD,MAAA,OAAA,CAAQ,GAAI,CAAA,CAAA,OAAA,EAAU,SAAU,CAAA,IAAI,CAAE,CAAA,CAAA;AACtC,MAAA,SAAA,CAAU,SAAS,CAAA;AACnB,MAAA,cAAA,CAAe,SAAS,CAAA;AAAA,KAC1B;AAAA,IACA,CAAC,MAAQ,EAAA,cAAA,EAAgB,SAAS;AAAA,GACpC;AAEA,EAAA,MAAM,kBAAqB,GAAA,WAAA;AAAA,IACzB,CAAC,KAAkB,KAAA;AACjB,MAAQ,OAAA,CAAA,GAAA,CAAI,CAAgB,aAAA,EAAA,KAAK,CAAE,CAAA,CAAA;AAGnC,MAAM,MAAA,UAAA,GAAa,MAAM,IAAK,EAAA;AAK9B,MAAM,MAAA,EAAE,OAASA,EAAAA,OAAAA,EAAW,GAAA,SAAA;AAC5B,MAAM,MAAA,SAAA,GAAY,6BAA8BA,CAAAA,OAAAA,EAAQ,UAAU,CAAA;AAClE,MAAA,SAAA,CAAU,SAAS,CAAA;AAEnB,MAAA,cAAA,CAAe,SAAS,CAAA;AAAA,KAC1B;AAAA,IACA,CAAC,gBAAgB,SAAS;AAAA,GAC5B;AAEA,EAAA,MAAM,sBAAyB,GAAA,WAAA;AAAA,IAC7B,CAAC,EAAA,EAAoB,CAAC,cAAc,CAAgB,KAAA;AAClD,MAAI,IAAA,mBAAA,CAAoB,cAAc,CAAG,EAAA;AACvC,QAAM,MAAA,SAAA,GAAY,uBAAwB,CAAA,MAAA,EAAQ,cAAc,CAAA;AAChE,QAAA,SAAA,CAAU,SAAS,CAAA;AACnB,QAAA,0BAAA,GAA6B,cAAc,CAAA;AAC3C,QAAA,cAAA,CAAe,SAAS,CAAA;AAAA;AAC1B,KACF;AAAA,IACA,CAAC,MAAA,EAAQ,cAAgB,EAAA,0BAAA,EAA4B,SAAS;AAAA,GAChE;AAEA,EAAO,OAAA;AAAA,IACL,MAAA;AAAA,IACA,kBAAA;AAAA,IACA,YAAA;AAAA,IACA;AAAA,GACF;AACF;;;;"}

package/esm/calculated-column/useEditCalculatedColumn.js

@@ -0,0 +1,136 @@
+import { jsx } from 'react/jsx-runtime';
+import { useModal } from '@vuu-ui/vuu-ui-controls';
+import { useRef, useCallback } from 'react';
+import { CalculatedColumnPanel } from './CalculatedColumnPanel.js';
+
+const useEditCalculatedColumn = ({
+  calculatedColumn,
+  columnModel,
+  onSaveColumn,
+  vuuTable
+}) => {
+  if (vuuTable === void 0) {
+    throw Error(
+      `[useEditCalculatedColumn] vuuTable must be provided to create or edit a calculated column`
+    );
+  }
+  const { showPrompt } = useModal();
+  const calculatedColumnRef = useRef(
+    void 0
+  );
+  const handleChangeNewCalculatedColumn = useCallback(
+    (column) => {
+      if (calculatedColumnRef.current) {
+        calculatedColumnRef.current.newColumn = column;
+      } else {
+        throw Error(`[TabbedTableConfigPanel] handleChangeNewCalculatedColumn`);
+      }
+    },
+    []
+  );
+  const handleSaveNewCalculatedColumn = useCallback(() => {
+    if (calculatedColumnRef.current) {
+      const {
+        current: { newColumn: calculatedColumn3 }
+      } = calculatedColumnRef;
+      columnModel.addColumn(calculatedColumn3, true);
+      calculatedColumnRef.current = void 0;
+      onSaveColumn?.(calculatedColumn3);
+    }
+    const { current: calculatedColumn2 } = calculatedColumnRef;
+    if (calculatedColumn2) {
+      columnModel.addColumn(calculatedColumn2, true);
+      calculatedColumnRef.current = void 0;
+      onSaveColumn?.(calculatedColumn2);
+    }
+  }, [columnModel, onSaveColumn]);
+  const handleCreateCalculatedColumn = useCallback(() => {
+    if (vuuTable) {
+      const newColumn = {
+        name: "::",
+        serverDataType: "string"
+      };
+      calculatedColumnRef.current = { newColumn };
+      showPrompt(
+        /* @__PURE__ */ jsx(
+          CalculatedColumnPanel,
+          {
+            column: newColumn,
+            columnModel,
+            onChangeColumn: handleChangeNewCalculatedColumn,
+            vuuTable
+          }
+        ),
+        {
+          confirmButtonLabel: "Save column",
+          onConfirm: handleSaveNewCalculatedColumn,
+          title: "Calculated column"
+        }
+      );
+    }
+  }, [
+    columnModel,
+    handleChangeNewCalculatedColumn,
+    handleSaveNewCalculatedColumn,
+    showPrompt,
+    vuuTable
+  ]);
+  const handleSaveColumnEdits = useCallback(() => {
+    if (calculatedColumnRef.current) {
+      const { originalColumn, newColumn } = calculatedColumnRef.current;
+      if (originalColumn) {
+        calculatedColumnRef.current = void 0;
+        onSaveColumn?.(newColumn);
+        columnModel.updateColumn(originalColumn, newColumn);
+      }
+    }
+  }, [columnModel, onSaveColumn]);
+  const handleUpdateCalculatedColumn = useCallback(
+    (column) => {
+      if (calculatedColumnRef.current) {
+        calculatedColumnRef.current.newColumn = column;
+      } else {
+        throw Error("[TabbedTableConfigPanel] handleUpdateCalculatedColumn`");
+      }
+    },
+    []
+  );
+  const handleEditCalculatedColumn = useCallback(() => {
+    if (calculatedColumn && vuuTable) {
+      calculatedColumnRef.current = {
+        originalColumn: calculatedColumn,
+        newColumn: calculatedColumn
+      };
+      showPrompt(
+        /* @__PURE__ */ jsx(
+          CalculatedColumnPanel,
+          {
+            column: calculatedColumn,
+            columnModel,
+            onChangeColumn: handleUpdateCalculatedColumn,
+            vuuTable
+          }
+        ),
+        {
+          confirmButtonLabel: "Save column",
+          onConfirm: handleSaveColumnEdits,
+          title: "Calculated column"
+        }
+      );
+    }
+  }, [
+    calculatedColumn,
+    columnModel,
+    handleSaveColumnEdits,
+    handleUpdateCalculatedColumn,
+    showPrompt,
+    vuuTable
+  ]);
+  return {
+    onCreateCalculatedColumn: handleCreateCalculatedColumn,
+    onEditCalculatedColumn: handleEditCalculatedColumn
+  };
+};
+
+export { useEditCalculatedColumn };
+//# sourceMappingURL=useEditCalculatedColumn.js.map

package/esm/calculated-column/useEditCalculatedColumn.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useEditCalculatedColumn.js","sources":["../../../../packages/vuu-table-extras/src/calculated-column/useEditCalculatedColumn.tsx"],"sourcesContent":["import { VuuTable } from \"@vuu-ui/vuu-protocol-types\";\nimport { ColumnDescriptor } from \"@vuu-ui/vuu-table-types\";\nimport { useModal } from \"@vuu-ui/vuu-ui-controls\";\nimport { useCallback, useRef } from \"react\";\nimport { ColumnModel } from \"../column-picker/ColumnModel\";\nimport { CalculatedColumnPanel } from \"./CalculatedColumnPanel\";\n\ntype CalculatedColumnState = {\n  originalColumn?: ColumnDescriptor;\n  newColumn: ColumnDescriptor;\n};\n\nexport interface EditCalculatedColumnProps {\n  calculatedColumn?: ColumnDescriptor;\n  columnModel: ColumnModel;\n  onSaveColumn?: (caclulatedColumn: ColumnDescriptor) => void;\n  vuuTable?: VuuTable;\n}\n\nexport const useEditCalculatedColumn = ({\n  calculatedColumn,\n  columnModel,\n  onSaveColumn,\n  vuuTable,\n}: EditCalculatedColumnProps) => {\n  if (vuuTable === undefined) {\n    throw Error(\n      `[useEditCalculatedColumn] vuuTable must be provided to create or edit a calculated column`,\n    );\n  }\n  const { showPrompt } = useModal();\n\n  const calculatedColumnRef = useRef<CalculatedColumnState | undefined>(\n    undefined,\n  );\n\n  const handleChangeNewCalculatedColumn = useCallback(\n    (column: ColumnDescriptor) => {\n      if (calculatedColumnRef.current) {\n        calculatedColumnRef.current.newColumn = column;\n      } else {\n        throw Error(`[TabbedTableConfigPanel] handleChangeNewCalculatedColumn`);\n      }\n    },\n    [],\n  );\n\n  const handleSaveNewCalculatedColumn = useCallback(() => {\n    if (calculatedColumnRef.current) {\n      const {\n        current: { newColumn: calculatedColumn },\n      } = calculatedColumnRef;\n      columnModel.addColumn(calculatedColumn, true);\n      calculatedColumnRef.current = undefined;\n      onSaveColumn?.(calculatedColumn);\n    }\n    const { current: calculatedColumn } = calculatedColumnRef;\n    if (calculatedColumn) {\n      columnModel.addColumn(calculatedColumn, true);\n      calculatedColumnRef.current = undefined;\n      onSaveColumn?.(calculatedColumn);\n    }\n  }, [columnModel, onSaveColumn]);\n\n  const handleCreateCalculatedColumn = useCallback(() => {\n    if (vuuTable) {\n      const newColumn: ColumnDescriptor = {\n        name: \"::\",\n        serverDataType: \"string\",\n      };\n      calculatedColumnRef.current = { newColumn };\n      // TODO load this dynamically\n      showPrompt(\n        <CalculatedColumnPanel\n          column={newColumn}\n          columnModel={columnModel}\n          onChangeColumn={handleChangeNewCalculatedColumn}\n          vuuTable={vuuTable}\n        />,\n        {\n          confirmButtonLabel: \"Save column\",\n          onConfirm: handleSaveNewCalculatedColumn,\n          title: \"Calculated column\",\n        },\n      );\n    }\n  }, [\n    columnModel,\n    handleChangeNewCalculatedColumn,\n    handleSaveNewCalculatedColumn,\n    showPrompt,\n    vuuTable,\n  ]);\n\n  const handleSaveColumnEdits = useCallback(() => {\n    if (calculatedColumnRef.current) {\n      const { originalColumn, newColumn } = calculatedColumnRef.current;\n      if (originalColumn) {\n        calculatedColumnRef.current = undefined;\n        onSaveColumn?.(newColumn);\n\n        columnModel.updateColumn(originalColumn, newColumn);\n      }\n    }\n  }, [columnModel, onSaveColumn]);\n\n  const handleUpdateCalculatedColumn = useCallback(\n    (column: ColumnDescriptor) => {\n      if (calculatedColumnRef.current) {\n        calculatedColumnRef.current.newColumn = column;\n      } else {\n        throw Error(\"[TabbedTableConfigPanel] handleUpdateCalculatedColumn`\");\n      }\n    },\n    [],\n  );\n\n  const handleEditCalculatedColumn = useCallback(() => {\n    if (calculatedColumn && vuuTable) {\n      calculatedColumnRef.current = {\n        originalColumn: calculatedColumn,\n        newColumn: calculatedColumn,\n      };\n      // TODO load this dynamically\n      showPrompt(\n        <CalculatedColumnPanel\n          column={calculatedColumn}\n          columnModel={columnModel}\n          onChangeColumn={handleUpdateCalculatedColumn}\n          vuuTable={vuuTable}\n        />,\n        {\n          confirmButtonLabel: \"Save column\",\n          onConfirm: handleSaveColumnEdits,\n          title: \"Calculated column\",\n        },\n      );\n    }\n  }, [\n    calculatedColumn,\n    columnModel,\n    handleSaveColumnEdits,\n    handleUpdateCalculatedColumn,\n    showPrompt,\n    vuuTable,\n  ]);\n\n  return {\n    onCreateCalculatedColumn: handleCreateCalculatedColumn,\n    onEditCalculatedColumn: handleEditCalculatedColumn,\n  };\n};\n"],"names":["calculatedColumn"],"mappings":"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"}

package/esm/column-formatting-settings/BaseNumericFormattingSettings.js

@@ -59,6 +59,7 @@ const BaseNumericFormattingSettings = ({
       /* @__PURE__ */ jsx(
         Input,
         {
+          bordered: true,
           className: "vuuInput",
           onChange: handleChangeDecimals,
           onKeyDown: handleInputKeyDown,

package/esm/column-formatting-settings/BaseNumericFormattingSettings.js.map

@@ -1 +1 @@
-{"version":3,"file":"BaseNumericFormattingSettings.js","sources":["../../../../packages/vuu-table-extras/src/column-formatting-settings/BaseNumericFormattingSettings.tsx"],"sourcesContent":["import { FormField, FormFieldLabel, Input, Switch } from \"@salt-ds/core\";\nimport {\n  ColumnTypeFormatting,\n  FormattingSettingsProps,\n} from \"@vuu-ui/vuu-table-types\";\nimport { getTypeFormattingFromColumn } from \"@vuu-ui/vuu-utils\";\nimport {\n  ChangeEvent,\n  KeyboardEvent,\n  SyntheticEvent,\n  useCallback,\n  useState,\n} from \"react\";\n\nconst classBase = \"vuuFormattingSettings\";\n\nexport const BaseNumericFormattingSettings = ({\n  column,\n  onChangeFormatting: onChange,\n}: FormattingSettingsProps) => {\n  const [formattingSettings, setFormattingSettings] =\n    useState<ColumnTypeFormatting>(getTypeFormattingFromColumn(column));\n\n  const handleInputKeyDown = useCallback(\n    (evt: KeyboardEvent<HTMLInputElement>) => {\n      if (evt.key === \"Enter\" || evt.key === \"Tab\") {\n        onChange(formattingSettings);\n      }\n    },\n    [formattingSettings, onChange],\n  );\n\n  const handleChangeDecimals = useCallback(\n    (evt: SyntheticEvent) => {\n      const { value } = evt.target as HTMLFormElement;\n      const numericValue: number | undefined =\n        value === \"\"\n          ? undefined\n          : isNaN(parseInt(value))\n            ? undefined\n            : parseInt(value);\n\n      const newFormattingSettings = {\n        ...formattingSettings,\n        decimals: numericValue,\n      };\n      setFormattingSettings(newFormattingSettings);\n    },\n    [formattingSettings],\n  );\n\n  const handleChangeAlignDecimals = useCallback(\n    (evt: ChangeEvent<HTMLInputElement>) => {\n      const { checked } = evt.target as HTMLInputElement;\n      const newFormattingSettings = {\n        ...formattingSettings,\n        alignOnDecimals: checked,\n      };\n      setFormattingSettings(newFormattingSettings);\n      onChange(newFormattingSettings);\n    },\n    [formattingSettings, onChange],\n  );\n\n  const handleChangeZeroPad = useCallback(\n    (evt: ChangeEvent<HTMLInputElement>) => {\n      const { checked } = evt.target as HTMLInputElement;\n      const newFormattingSettings = {\n        ...formattingSettings,\n        zeroPad: checked,\n      };\n      setFormattingSettings(newFormattingSettings);\n      onChange(newFormattingSettings);\n    },\n    [formattingSettings, onChange],\n  );\n\n  return (\n    <div className={classBase}>\n      <FormField data-field=\"decimals\">\n        <FormFieldLabel>Number of decimals</FormFieldLabel>\n        <Input\n          className=\"vuuInput\"\n          onChange={handleChangeDecimals}\n          onKeyDown={handleInputKeyDown}\n          value={formattingSettings.decimals ?? \"\"}\n        />\n      </FormField>\n\n      <FormField labelPlacement=\"left\">\n        <FormFieldLabel>Align on decimals</FormFieldLabel>\n        <Switch\n          checked={formattingSettings.alignOnDecimals ?? false}\n          onChange={handleChangeAlignDecimals}\n          value=\"align-decimals\"\n        />\n      </FormField>\n      <FormField labelPlacement=\"left\">\n        <FormFieldLabel>Zero pad decimals</FormFieldLabel>\n        <Switch\n          checked={formattingSettings.zeroPad ?? false}\n          onChange={handleChangeZeroPad}\n          value=\"zero-pad\"\n        />\n      </FormField>\n    </div>\n  );\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"BaseNumericFormattingSettings.js","sources":["../../../../packages/vuu-table-extras/src/column-formatting-settings/BaseNumericFormattingSettings.tsx"],"sourcesContent":["import { FormField, FormFieldLabel, Input, Switch } from \"@salt-ds/core\";\nimport {\n  ColumnTypeFormatting,\n  FormattingSettingsProps,\n} from \"@vuu-ui/vuu-table-types\";\nimport { getTypeFormattingFromColumn } from \"@vuu-ui/vuu-utils\";\nimport {\n  ChangeEvent,\n  KeyboardEvent,\n  SyntheticEvent,\n  useCallback,\n  useState,\n} from \"react\";\n\nconst classBase = \"vuuFormattingSettings\";\n\nexport const BaseNumericFormattingSettings = ({\n  column,\n  onChangeFormatting: onChange,\n}: FormattingSettingsProps) => {\n  const [formattingSettings, setFormattingSettings] =\n    useState<ColumnTypeFormatting>(getTypeFormattingFromColumn(column));\n\n  const handleInputKeyDown = useCallback(\n    (evt: KeyboardEvent<HTMLInputElement>) => {\n      if (evt.key === \"Enter\" || evt.key === \"Tab\") {\n        onChange(formattingSettings);\n      }\n    },\n    [formattingSettings, onChange],\n  );\n\n  const handleChangeDecimals = useCallback(\n    (evt: SyntheticEvent) => {\n      const { value } = evt.target as HTMLFormElement;\n      const numericValue: number | undefined =\n        value === \"\"\n          ? undefined\n          : isNaN(parseInt(value))\n            ? undefined\n            : parseInt(value);\n\n      const newFormattingSettings = {\n        ...formattingSettings,\n        decimals: numericValue,\n      };\n      setFormattingSettings(newFormattingSettings);\n    },\n    [formattingSettings],\n  );\n\n  const handleChangeAlignDecimals = useCallback(\n    (evt: ChangeEvent<HTMLInputElement>) => {\n      const { checked } = evt.target as HTMLInputElement;\n      const newFormattingSettings = {\n        ...formattingSettings,\n        alignOnDecimals: checked,\n      };\n      setFormattingSettings(newFormattingSettings);\n      onChange(newFormattingSettings);\n    },\n    [formattingSettings, onChange],\n  );\n\n  const handleChangeZeroPad = useCallback(\n    (evt: ChangeEvent<HTMLInputElement>) => {\n      const { checked } = evt.target as HTMLInputElement;\n      const newFormattingSettings = {\n        ...formattingSettings,\n        zeroPad: checked,\n      };\n      setFormattingSettings(newFormattingSettings);\n      onChange(newFormattingSettings);\n    },\n    [formattingSettings, onChange],\n  );\n\n  return (\n    <div className={classBase}>\n      <FormField data-field=\"decimals\">\n        <FormFieldLabel>Number of decimals</FormFieldLabel>\n        <Input\n          bordered\n          className=\"vuuInput\"\n          onChange={handleChangeDecimals}\n          onKeyDown={handleInputKeyDown}\n          value={formattingSettings.decimals ?? \"\"}\n        />\n      </FormField>\n\n      <FormField labelPlacement=\"left\">\n        <FormFieldLabel>Align on decimals</FormFieldLabel>\n        <Switch\n          checked={formattingSettings.alignOnDecimals ?? false}\n          onChange={handleChangeAlignDecimals}\n          value=\"align-decimals\"\n        />\n      </FormField>\n      <FormField labelPlacement=\"left\">\n        <FormFieldLabel>Zero pad decimals</FormFieldLabel>\n        <Switch\n          checked={formattingSettings.zeroPad ?? false}\n          onChange={handleChangeZeroPad}\n          value=\"zero-pad\"\n        />\n      </FormField>\n    </div>\n  );\n};\n"],"names":[],"mappings":";;;;;AAcA,MAAM,SAAY,GAAA,uBAAA;AAEX,MAAM,gCAAgC,CAAC;AAAA,EAC5C,MAAA;AAAA,EACA,kBAAoB,EAAA;AACtB,CAA+B,KAAA;AAC7B,EAAA,MAAM,CAAC,kBAAoB,EAAA,qBAAqB,IAC9C,QAA+B,CAAA,2BAAA,CAA4B,MAAM,CAAC,CAAA;AAEpE,EAAA,MAAM,kBAAqB,GAAA,WAAA;AAAA,IACzB,CAAC,GAAyC,KAAA;AACxC,MAAA,IAAI,GAAI,CAAA,GAAA,KAAQ,OAAW,IAAA,GAAA,CAAI,QAAQ,KAAO,EAAA;AAC5C,QAAA,QAAA,CAAS,kBAAkB,CAAA;AAAA;AAC7B,KACF;AAAA,IACA,CAAC,oBAAoB,QAAQ;AAAA,GAC/B;AAEA,EAAA,MAAM,oBAAuB,GAAA,WAAA;AAAA,IAC3B,CAAC,GAAwB,KAAA;AACvB,MAAM,MAAA,EAAE,KAAM,EAAA,GAAI,GAAI,CAAA,MAAA;AACtB,MAAM,MAAA,YAAA,GACJ,KAAU,KAAA,EAAA,GACN,KACA,CAAA,GAAA,KAAA,CAAM,QAAS,CAAA,KAAK,CAAC,CAAA,GACnB,KACA,CAAA,GAAA,QAAA,CAAS,KAAK,CAAA;AAEtB,MAAA,MAAM,qBAAwB,GAAA;AAAA,QAC5B,GAAG,kBAAA;AAAA,QACH,QAAU,EAAA;AAAA,OACZ;AACA,MAAA,qBAAA,CAAsB,qBAAqB,CAAA;AAAA,KAC7C;AAAA,IACA,CAAC,kBAAkB;AAAA,GACrB;AAEA,EAAA,MAAM,yBAA4B,GAAA,WAAA;AAAA,IAChC,CAAC,GAAuC,KAAA;AACtC,MAAM,MAAA,EAAE,OAAQ,EAAA,GAAI,GAAI,CAAA,MAAA;AACxB,MAAA,MAAM,qBAAwB,GAAA;AAAA,QAC5B,GAAG,kBAAA;AAAA,QACH,eAAiB,EAAA;AAAA,OACnB;AACA,MAAA,qBAAA,CAAsB,qBAAqB,CAAA;AAC3C,MAAA,QAAA,CAAS,qBAAqB,CAAA;AAAA,KAChC;AAAA,IACA,CAAC,oBAAoB,QAAQ;AAAA,GAC/B;AAEA,EAAA,MAAM,mBAAsB,GAAA,WAAA;AAAA,IAC1B,CAAC,GAAuC,KAAA;AACtC,MAAM,MAAA,EAAE,OAAQ,EAAA,GAAI,GAAI,CAAA,MAAA;AACxB,MAAA,MAAM,qBAAwB,GAAA;AAAA,QAC5B,GAAG,kBAAA;AAAA,QACH,OAAS,EAAA;AAAA,OACX;AACA,MAAA,qBAAA,CAAsB,qBAAqB,CAAA;AAC3C,MAAA,QAAA,CAAS,qBAAqB,CAAA;AAAA,KAChC;AAAA,IACA,CAAC,oBAAoB,QAAQ;AAAA,GAC/B;AAEA,EACE,uBAAA,IAAA,CAAC,KAAI,EAAA,EAAA,SAAA,EAAW,SACd,EAAA,QAAA,EAAA;AAAA,oBAAC,IAAA,CAAA,SAAA,EAAA,EAAU,cAAW,UACpB,EAAA,QAAA,EAAA;AAAA,sBAAA,GAAA,CAAC,kBAAe,QAAkB,EAAA,oBAAA,EAAA,CAAA;AAAA,sBAClC,GAAA;AAAA,QAAC,KAAA;AAAA,QAAA;AAAA,UACC,QAAQ,EAAA,IAAA;AAAA,UACR,SAAU,EAAA,UAAA;AAAA,UACV,QAAU,EAAA,oBAAA;AAAA,UACV,SAAW,EAAA,kBAAA;AAAA,UACX,KAAA,EAAO,mBAAmB,QAAY,IAAA;AAAA;AAAA;AACxC,KACF,EAAA,CAAA;AAAA,oBAEA,IAAA,CAAC,SAAU,EAAA,EAAA,cAAA,EAAe,MACxB,EAAA,QAAA,EAAA;AAAA,sBAAA,GAAA,CAAC,kBAAe,QAAiB,EAAA,mBAAA,EAAA,CAAA;AAAA,sBACjC,GAAA;AAAA,QAAC,MAAA;AAAA,QAAA;AAAA,UACC,OAAA,EAAS,mBAAmB,eAAmB,IAAA,KAAA;AAAA,UAC/C,QAAU,EAAA,yBAAA;AAAA,UACV,KAAM,EAAA;AAAA;AAAA;AACR,KACF,EAAA,CAAA;AAAA,oBACA,IAAA,CAAC,SAAU,EAAA,EAAA,cAAA,EAAe,MACxB,EAAA,QAAA,EAAA;AAAA,sBAAA,GAAA,CAAC,kBAAe,QAAiB,EAAA,mBAAA,EAAA,CAAA;AAAA,sBACjC,GAAA;AAAA,QAAC,MAAA;AAAA,QAAA;AAAA,UACC,OAAA,EAAS,mBAAmB,OAAW,IAAA,KAAA;AAAA,UACvC,QAAU,EAAA,mBAAA;AAAA,UACV,KAAM,EAAA;AAAA;AAAA;AACR,KACF,EAAA;AAAA,GACF,EAAA,CAAA;AAEJ;;;;"}

package/esm/column-formatting-settings/ColumnFormattingPanel.js

@@ -59,6 +59,7 @@ const ColumnFormattingPanel = ({
       /* @__PURE__ */ jsx(
         Dropdown,
         {
+          bordered: true,
           className: cx(`${classBase}-renderer`),
           onSelectionChange: handleChangeRenderer,
           selected: selectedCellRenderer ? [selectedCellRenderer] : [],

package/esm/column-formatting-settings/ColumnFormattingPanel.js.map

@@ -1 +1 @@
-{"version":3,"file":"ColumnFormattingPanel.js","sources":["../../../../packages/vuu-table-extras/src/column-formatting-settings/ColumnFormattingPanel.tsx"],"sourcesContent":["import {\n  ColumnDescriptor,\n  ColumnDescriptorCustomRenderer,\n  ColumnTypeRendering,\n  FormattingSettingsProps,\n} from \"@vuu-ui/vuu-table-types\";\nimport {\n  CellRendererDescriptor,\n  ConfigurationEditorProps,\n  getCellRendererOptions,\n  getConfigurationEditor,\n  isColumnTypeRenderer,\n  isTypeDescriptor,\n} from \"@vuu-ui/vuu-utils\";\nimport { Dropdown, FormField, FormFieldLabel, Option } from \"@salt-ds/core\";\nimport cx from \"clsx\";\nimport { HTMLAttributes, SyntheticEvent, useCallback, useMemo } from \"react\";\nimport { BaseNumericFormattingSettings } from \"./BaseNumericFormattingSettings\";\nimport { LongTypeFormattingSettings } from \"./LongTypeFormattingSettings\";\nimport { DateTimeFormattingSettings } from \"./DateTimeFormattingSettings\";\n\nconst classBase = \"vuuColumnFormattingPanel\";\n\nexport interface ColumnFormattingPanelProps\n  extends HTMLAttributes<HTMLDivElement>,\n    FormattingSettingsProps {\n  availableRenderers: CellRendererDescriptor[];\n  column: ColumnDescriptor;\n  onChangeRendering: (renderProps: ColumnTypeRendering) => void;\n}\n\nexport const ColumnFormattingPanel = ({\n  availableRenderers,\n  className,\n  column,\n  onChangeFormatting,\n  onChangeColumnType,\n  onChangeRendering,\n  ...htmlAttributes\n}: ColumnFormattingPanelProps) => {\n  const formattingSettingsComponent = useMemo(\n    () =>\n      getFormattingSettingsComponent({\n        column,\n        onChangeFormatting,\n        onChangeColumnType,\n      }),\n    [column, onChangeColumnType, onChangeFormatting],\n  );\n\n  const ConfigEditor = useMemo<\n    React.FC<ConfigurationEditorProps> | undefined\n  >(() => {\n    const { type } = column;\n    if (isTypeDescriptor(type) && isColumnTypeRenderer(type.renderer)) {\n      const cellRendererOptions = getCellRendererOptions(type.renderer.name);\n      return getConfigurationEditor(cellRendererOptions?.configEditor);\n    }\n    return undefined;\n  }, [column]);\n\n  const selectedCellRenderer = useMemo(() => {\n    const { type } = column;\n    const [defaultRenderer] = availableRenderers;\n    const rendererName =\n      isTypeDescriptor(type) && isColumnTypeRenderer(type.renderer)\n        ? type.renderer.name\n        : undefined;\n    const configuredRenderer = availableRenderers.find(\n      (renderer) => renderer.name === rendererName,\n    );\n    return configuredRenderer ?? defaultRenderer;\n  }, [availableRenderers, column]);\n\n  const handleChangeRenderer = useCallback(\n    (\n      _e: SyntheticEvent,\n      [cellRendererDescriptor]: CellRendererDescriptor[],\n    ) => {\n      const renderProps: ColumnTypeRendering = {\n        name: cellRendererDescriptor.name,\n      };\n      onChangeRendering?.(renderProps);\n    },\n    [onChangeRendering],\n  );\n\n  const { serverDataType = \"string\" } = column;\n\n  return (\n    <div {...htmlAttributes} className={`vuuColumnSettingsPanel-header`}>\n      <div>Formatting</div>\n\n      <FormField>\n        <FormFieldLabel>\n          {`Renderer (data type ${column.serverDataType})`}\n        </FormFieldLabel>\n        <Dropdown<CellRendererDescriptor>\n          className={cx(`${classBase}-renderer`)}\n          onSelectionChange={handleChangeRenderer}\n          selected={selectedCellRenderer ? [selectedCellRenderer] : []}\n          value={selectedCellRenderer?.label ?? selectedCellRenderer?.name}\n        >\n          {availableRenderers.map((cellRenderer, i) => (\n            <Option key={i} value={cellRenderer}>\n              {cellRenderer.label ?? cellRenderer.name}\n            </Option>\n          ))}\n        </Dropdown>\n      </FormField>\n      <div\n        className={cx(classBase, className, `${classBase}-${serverDataType}`)}\n      >\n        {formattingSettingsComponent}\n        {ConfigEditor ? (\n          <ConfigEditor\n            column={column as ColumnDescriptorCustomRenderer}\n            onChangeRendering={onChangeRendering}\n          />\n        ) : null}\n      </div>\n    </div>\n  );\n};\n\nfunction getFormattingSettingsComponent(props: FormattingSettingsProps) {\n  const { column } = props;\n\n  switch (column.serverDataType) {\n    case \"double\":\n    case \"scaleddecimal2\":\n    case \"scaleddecimal4\":\n    case \"scaleddecimal6\":\n    case \"scaleddecimal8\":\n    case \"int\":\n      return <BaseNumericFormattingSettings {...props} />;\n    case \"long\":\n      return <LongTypeFormattingSettings {...props} />;\n    case \"epochtimestamp\":\n      return <DateTimeFormattingSettings {...props} />;\n    default:\n      return null;\n  }\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"ColumnFormattingPanel.js","sources":["../../../../packages/vuu-table-extras/src/column-formatting-settings/ColumnFormattingPanel.tsx"],"sourcesContent":["import {\n  ColumnDescriptor,\n  ColumnDescriptorCustomRenderer,\n  ColumnTypeRendering,\n  FormattingSettingsProps,\n} from \"@vuu-ui/vuu-table-types\";\nimport {\n  CellRendererDescriptor,\n  ConfigurationEditorProps,\n  getCellRendererOptions,\n  getConfigurationEditor,\n  isColumnTypeRenderer,\n  isTypeDescriptor,\n} from \"@vuu-ui/vuu-utils\";\nimport { Dropdown, FormField, FormFieldLabel, Option } from \"@salt-ds/core\";\nimport cx from \"clsx\";\nimport { HTMLAttributes, SyntheticEvent, useCallback, useMemo } from \"react\";\nimport { BaseNumericFormattingSettings } from \"./BaseNumericFormattingSettings\";\nimport { LongTypeFormattingSettings } from \"./LongTypeFormattingSettings\";\nimport { DateTimeFormattingSettings } from \"./DateTimeFormattingSettings\";\n\nconst classBase = \"vuuColumnFormattingPanel\";\n\nexport interface ColumnFormattingPanelProps\n  extends HTMLAttributes<HTMLDivElement>,\n    FormattingSettingsProps {\n  availableRenderers: CellRendererDescriptor[];\n  column: ColumnDescriptor;\n  onChangeRendering: (renderProps: ColumnTypeRendering) => void;\n}\n\nexport const ColumnFormattingPanel = ({\n  availableRenderers,\n  className,\n  column,\n  onChangeFormatting,\n  onChangeColumnType,\n  onChangeRendering,\n  ...htmlAttributes\n}: ColumnFormattingPanelProps) => {\n  const formattingSettingsComponent = useMemo(\n    () =>\n      getFormattingSettingsComponent({\n        column,\n        onChangeFormatting,\n        onChangeColumnType,\n      }),\n    [column, onChangeColumnType, onChangeFormatting],\n  );\n\n  const ConfigEditor = useMemo<\n    React.FC<ConfigurationEditorProps> | undefined\n  >(() => {\n    const { type } = column;\n    if (isTypeDescriptor(type) && isColumnTypeRenderer(type.renderer)) {\n      const cellRendererOptions = getCellRendererOptions(type.renderer.name);\n      return getConfigurationEditor(cellRendererOptions?.configEditor);\n    }\n    return undefined;\n  }, [column]);\n\n  const selectedCellRenderer = useMemo(() => {\n    const { type } = column;\n    const [defaultRenderer] = availableRenderers;\n    const rendererName =\n      isTypeDescriptor(type) && isColumnTypeRenderer(type.renderer)\n        ? type.renderer.name\n        : undefined;\n    const configuredRenderer = availableRenderers.find(\n      (renderer) => renderer.name === rendererName,\n    );\n    return configuredRenderer ?? defaultRenderer;\n  }, [availableRenderers, column]);\n\n  const handleChangeRenderer = useCallback(\n    (\n      _e: SyntheticEvent,\n      [cellRendererDescriptor]: CellRendererDescriptor[],\n    ) => {\n      const renderProps: ColumnTypeRendering = {\n        name: cellRendererDescriptor.name,\n      };\n      onChangeRendering?.(renderProps);\n    },\n    [onChangeRendering],\n  );\n\n  const { serverDataType = \"string\" } = column;\n\n  return (\n    <div {...htmlAttributes} className={`vuuColumnSettingsPanel-header`}>\n      <div>Formatting</div>\n\n      <FormField>\n        <FormFieldLabel>\n          {`Renderer (data type ${column.serverDataType})`}\n        </FormFieldLabel>\n        <Dropdown<CellRendererDescriptor>\n          bordered\n          className={cx(`${classBase}-renderer`)}\n          onSelectionChange={handleChangeRenderer}\n          selected={selectedCellRenderer ? [selectedCellRenderer] : []}\n          value={selectedCellRenderer?.label ?? selectedCellRenderer?.name}\n        >\n          {availableRenderers.map((cellRenderer, i) => (\n            <Option key={i} value={cellRenderer}>\n              {cellRenderer.label ?? cellRenderer.name}\n            </Option>\n          ))}\n        </Dropdown>\n      </FormField>\n      <div\n        className={cx(classBase, className, `${classBase}-${serverDataType}`)}\n      >\n        {formattingSettingsComponent}\n        {ConfigEditor ? (\n          <ConfigEditor\n            column={column as ColumnDescriptorCustomRenderer}\n            onChangeRendering={onChangeRendering}\n          />\n        ) : null}\n      </div>\n    </div>\n  );\n};\n\nfunction getFormattingSettingsComponent(props: FormattingSettingsProps) {\n  const { column } = props;\n\n  switch (column.serverDataType) {\n    case \"double\":\n    case \"scaleddecimal2\":\n    case \"scaleddecimal4\":\n    case \"scaleddecimal6\":\n    case \"scaleddecimal8\":\n    case \"int\":\n      return <BaseNumericFormattingSettings {...props} />;\n    case \"long\":\n      return <LongTypeFormattingSettings {...props} />;\n    case \"epochtimestamp\":\n      return <DateTimeFormattingSettings {...props} />;\n    default:\n      return null;\n  }\n}\n"],"names":[],"mappings":"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"}

package/esm/column-menu/ColumnMenu.js

@@ -5,7 +5,7 @@ import { useWindow } from '@salt-ds/window';
 import { IconButton } from '@vuu-ui/vuu-ui-controls';
 import cx from 'clsx';
 import { useCallback } from 'react';
-import { defaultTableSettingsPermissions } from '../table-column-settings/TableSettingsPanel.js';
+import { defaultTableSettingsPermissions } from '../table-settings-panel/TableSettingsPanel.js';
 import { useTableContext } from '../table-provider/TableProvider.js';
 import { getColumnMenuActionType, buildSortMenu, buildGroupMenu, buildAggregationMenuItems, buildVisibilityMenuItems, buildPinMenuItems, buildSettingsMenuItems } from './column-menu-utils.js';
 import columnMenuCss from './ColumnMenu.css.js';
@@ -80,8 +80,7 @@ const ColumnMenu = ({
   const settingsMenuItems = buildSettingsMenuItems(
     column,
     menuActionClickHandler,
-    allowColumnSettings,
-    allowTableSettings
+    allowColumnSettings
   );
   const handleClick = useCallback(
     (evt) => {

package/esm/column-menu/ColumnMenu.js.map

@@ -1 +1 @@
-{"version":3,"file":"ColumnMenu.js","sources":["../../../../packages/vuu-table-extras/src/column-menu/ColumnMenu.tsx"],"sourcesContent":["import { Menu, MenuPanel, MenuTrigger } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { MenuActionHandler } from \"@vuu-ui/vuu-context-menu\";\nimport {\n  ColumnDescriptor,\n  ColumnMenuPermissions,\n} from \"@vuu-ui/vuu-table-types\";\nimport { IconButton } from \"@vuu-ui/vuu-ui-controls\";\nimport cx from \"clsx\";\nimport { HTMLAttributes, MouseEventHandler, useCallback } from \"react\";\nimport { defaultTableSettingsPermissions } from \"../table-column-settings/TableSettingsPanel\";\nimport { useTableContext } from \"../table-provider/TableProvider\";\nimport {\n  buildAggregationMenuItems,\n  buildGroupMenu,\n  buildPinMenuItems,\n  buildSettingsMenuItems,\n  buildSortMenu,\n  buildVisibilityMenuItems,\n  ColumnMenuActionType,\n  getColumnMenuActionType,\n  type MenuItemClickHandler,\n} from \"./column-menu-utils\";\n\nimport columnMenuCss from \"./ColumnMenu.css\";\n\nconst classBase = \"vuuColumnMenu\";\n\nconst defaultColumnMenuPermissions: Readonly<ColumnMenuPermissions> = {\n  allowSort: true,\n  allowGroup: true,\n  allowAggregation: true,\n  allowHide: true,\n  allowRemove: true,\n  allowPin: true,\n  allowColumnSettings: true,\n  allowTableSettings: defaultTableSettingsPermissions,\n};\n\nexport interface ColumnMenuProps extends HTMLAttributes<HTMLSpanElement> {\n  column: ColumnDescriptor;\n  menuActionHandler?: MenuActionHandler<ColumnMenuActionType, ColumnDescriptor>;\n  menuPermissions?: ColumnMenuPermissions;\n}\n\nexport const ColumnMenu = ({\n  className,\n  column,\n  menuActionHandler: menuActionHandlerProp,\n  menuPermissions: {\n    allowSort,\n    allowGroup,\n    allowAggregation,\n    allowHide,\n    allowRemove,\n    allowPin,\n    allowColumnSettings,\n    allowTableSettings,\n  } = defaultColumnMenuPermissions,\n}: ColumnMenuProps) => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-column-menu\",\n    css: columnMenuCss,\n    window: targetWindow,\n  });\n\n  const { dataSource, menuActionHandler } = useTableContext(true);\n\n  const menuActionClickHandler = useCallback<MenuItemClickHandler>(\n    (evt) => {\n      const columnMenuActionType = getColumnMenuActionType(evt.target);\n      if (menuActionHandlerProp?.(columnMenuActionType, column) !== true) {\n        return menuActionHandler(columnMenuActionType, column);\n      }\n    },\n    [column, menuActionHandler, menuActionHandlerProp],\n  );\n\n  const sortMenu = buildSortMenu(\n    column,\n    dataSource,\n    menuActionClickHandler,\n    allowSort,\n  );\n  const groupMenu = buildGroupMenu(\n    column,\n    dataSource,\n    menuActionClickHandler,\n    allowGroup,\n  );\n  const aggregationMenu = buildAggregationMenuItems(\n    column,\n    dataSource,\n    menuActionClickHandler,\n    allowAggregation,\n  );\n  const visibilityMenuItems = buildVisibilityMenuItems(\n    column,\n    menuActionClickHandler,\n    allowHide,\n    allowRemove,\n  );\n  const pinMenu = buildPinMenuItems(column, menuActionClickHandler, allowPin);\n  const settingsMenuItems = buildSettingsMenuItems(\n    column,\n    menuActionClickHandler,\n    allowColumnSettings,\n    allowTableSettings,\n  );\n\n  const handleClick = useCallback<MouseEventHandler<HTMLButtonElement>>(\n    (evt) => {\n      // Prevent sort from triggering if the click were to bubble.\n      evt.stopPropagation();\n    },\n    [],\n  );\n\n  return (\n    <Menu>\n      <MenuTrigger>\n        <IconButton\n          appearance=\"transparent\"\n          className={cx(classBase, className)}\n          data-embedded\n          icon=\"more-vert\"\n          sentiment=\"neutral\"\n          aria-label=\"Open Column Menu\"\n          onClick={handleClick}\n        />\n      </MenuTrigger>\n      <MenuPanel>\n        {sortMenu}\n        {groupMenu}\n        {aggregationMenu}\n        {visibilityMenuItems}\n        {pinMenu}\n        {settingsMenuItems}\n      </MenuPanel>\n    </Menu>\n  );\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"ColumnMenu.js","sources":["../../../../packages/vuu-table-extras/src/column-menu/ColumnMenu.tsx"],"sourcesContent":["import { Menu, MenuPanel, MenuTrigger } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { MenuActionHandler } from \"@vuu-ui/vuu-context-menu\";\nimport {\n  ColumnDescriptor,\n  ColumnMenuPermissions,\n} from \"@vuu-ui/vuu-table-types\";\nimport { IconButton } from \"@vuu-ui/vuu-ui-controls\";\nimport cx from \"clsx\";\nimport { HTMLAttributes, MouseEventHandler, useCallback } from \"react\";\nimport { defaultTableSettingsPermissions } from \"../table-settings-panel/TableSettingsPanel\";\nimport { useTableContext } from \"../table-provider/TableProvider\";\nimport {\n  buildAggregationMenuItems,\n  buildGroupMenu,\n  buildPinMenuItems,\n  buildSettingsMenuItems,\n  buildSortMenu,\n  buildVisibilityMenuItems,\n  ColumnMenuActionType,\n  getColumnMenuActionType,\n  type MenuItemClickHandler,\n} from \"./column-menu-utils\";\n\nimport columnMenuCss from \"./ColumnMenu.css\";\n\nconst classBase = \"vuuColumnMenu\";\n\nconst defaultColumnMenuPermissions: Readonly<ColumnMenuPermissions> = {\n  allowSort: true,\n  allowGroup: true,\n  allowAggregation: true,\n  allowHide: true,\n  allowRemove: true,\n  allowPin: true,\n  allowColumnSettings: true,\n  allowTableSettings: defaultTableSettingsPermissions,\n};\n\nexport interface ColumnMenuProps extends HTMLAttributes<HTMLSpanElement> {\n  column: ColumnDescriptor;\n  menuActionHandler?: MenuActionHandler<ColumnMenuActionType, ColumnDescriptor>;\n  menuPermissions?: ColumnMenuPermissions;\n}\n\nexport const ColumnMenu = ({\n  className,\n  column,\n  menuActionHandler: menuActionHandlerProp,\n  menuPermissions: {\n    allowSort,\n    allowGroup,\n    allowAggregation,\n    allowHide,\n    allowRemove,\n    allowPin,\n    allowColumnSettings,\n    allowTableSettings,\n  } = defaultColumnMenuPermissions,\n}: ColumnMenuProps) => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-column-menu\",\n    css: columnMenuCss,\n    window: targetWindow,\n  });\n\n  const { dataSource, menuActionHandler } = useTableContext(true);\n\n  const menuActionClickHandler = useCallback<MenuItemClickHandler>(\n    (evt) => {\n      const columnMenuActionType = getColumnMenuActionType(evt.target);\n      if (menuActionHandlerProp?.(columnMenuActionType, column) !== true) {\n        return menuActionHandler(columnMenuActionType, column);\n      }\n    },\n    [column, menuActionHandler, menuActionHandlerProp],\n  );\n\n  const sortMenu = buildSortMenu(\n    column,\n    dataSource,\n    menuActionClickHandler,\n    allowSort,\n  );\n  const groupMenu = buildGroupMenu(\n    column,\n    dataSource,\n    menuActionClickHandler,\n    allowGroup,\n  );\n  const aggregationMenu = buildAggregationMenuItems(\n    column,\n    dataSource,\n    menuActionClickHandler,\n    allowAggregation,\n  );\n  const visibilityMenuItems = buildVisibilityMenuItems(\n    column,\n    menuActionClickHandler,\n    allowHide,\n    allowRemove,\n  );\n  const pinMenu = buildPinMenuItems(column, menuActionClickHandler, allowPin);\n  const settingsMenuItems = buildSettingsMenuItems(\n    column,\n    menuActionClickHandler,\n    allowColumnSettings,\n  );\n\n  const handleClick = useCallback<MouseEventHandler<HTMLButtonElement>>(\n    (evt) => {\n      // Prevent sort from triggering if the click were to bubble.\n      evt.stopPropagation();\n    },\n    [],\n  );\n\n  return (\n    <Menu>\n      <MenuTrigger>\n        <IconButton\n          appearance=\"transparent\"\n          className={cx(classBase, className)}\n          data-embedded\n          icon=\"more-vert\"\n          sentiment=\"neutral\"\n          aria-label=\"Open Column Menu\"\n          onClick={handleClick}\n        />\n      </MenuTrigger>\n      <MenuPanel>\n        {sortMenu}\n        {groupMenu}\n        {aggregationMenu}\n        {visibilityMenuItems}\n        {pinMenu}\n        {settingsMenuItems}\n      </MenuPanel>\n    </Menu>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;AA2BA,MAAM,SAAY,GAAA,eAAA;AAElB,MAAM,4BAAgE,GAAA;AAAA,EACpE,SAAW,EAAA,IAAA;AAAA,EACX,UAAY,EAAA,IAAA;AAAA,EACZ,gBAAkB,EAAA,IAAA;AAAA,EAClB,SAAW,EAAA,IAAA;AAAA,EACX,WAAa,EAAA,IAAA;AAAA,EACb,QAAU,EAAA,IAAA;AAAA,EACV,mBAAqB,EAAA,IAAA;AAAA,EACrB,kBAAoB,EAAA;AACtB,CAAA;AAQO,MAAM,aAAa,CAAC;AAAA,EACzB,SAAA;AAAA,EACA,MAAA;AAAA,EACA,iBAAmB,EAAA,qBAAA;AAAA,EACnB,eAAiB,EAAA;AAAA,IACf,SAAA;AAAA,IACA,UAAA;AAAA,IACA,gBAAA;AAAA,IACA,SAAA;AAAA,IACA,WAAA;AAAA,IACA,QAAA;AAAA,IACA,mBAAA;AAAA,IACA;AAAA,GACE,GAAA;AACN,CAAuB,KAAA;AACrB,EAAA,MAAM,eAAe,SAAU,EAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,iBAAA;AAAA,IACR,GAAK,EAAA,aAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EAAA,MAAM,EAAE,UAAA,EAAY,iBAAkB,EAAA,GAAI,gBAAgB,IAAI,CAAA;AAE9D,EAAA,MAAM,sBAAyB,GAAA,WAAA;AAAA,IAC7B,CAAC,GAAQ,KAAA;AACP,MAAM,MAAA,oBAAA,GAAuB,uBAAwB,CAAA,GAAA,CAAI,MAAM,CAAA;AAC/D,MAAA,IAAI,qBAAwB,GAAA,oBAAA,EAAsB,MAAM,CAAA,KAAM,IAAM,EAAA;AAClE,QAAO,OAAA,iBAAA,CAAkB,sBAAsB,MAAM,CAAA;AAAA;AACvD,KACF;AAAA,IACA,CAAC,MAAQ,EAAA,iBAAA,EAAmB,qBAAqB;AAAA,GACnD;AAEA,EAAA,MAAM,QAAW,GAAA,aAAA;AAAA,IACf,MAAA;AAAA,IACA,UAAA;AAAA,IACA,sBAAA;AAAA,IACA;AAAA,GACF;AACA,EAAA,MAAM,SAAY,GAAA,cAAA;AAAA,IAChB,MAAA;AAAA,IACA,UAAA;AAAA,IACA,sBAAA;AAAA,IACA;AAAA,GACF;AACA,EAAA,MAAM,eAAkB,GAAA,yBAAA;AAAA,IACtB,MAAA;AAAA,IACA,UAAA;AAAA,IACA,sBAAA;AAAA,IACA;AAAA,GACF;AACA,EAAA,MAAM,mBAAsB,GAAA,wBAAA;AAAA,IAC1B,MAAA;AAAA,IACA,sBAAA;AAAA,IACA,SAAA;AAAA,IACA;AAAA,GACF;AACA,EAAA,MAAM,OAAU,GAAA,iBAAA,CAAkB,MAAQ,EAAA,sBAAA,EAAwB,QAAQ,CAAA;AAC1E,EAAA,MAAM,iBAAoB,GAAA,sBAAA;AAAA,IACxB,MAAA;AAAA,IACA,sBAAA;AAAA,IACA;AAAA,GACF;AAEA,EAAA,MAAM,WAAc,GAAA,WAAA;AAAA,IAClB,CAAC,GAAQ,KAAA;AAEP,MAAA,GAAA,CAAI,eAAgB,EAAA;AAAA,KACtB;AAAA,IACA;AAAC,GACH;AAEA,EAAA,4BACG,IACC,EAAA,EAAA,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,WACC,EAAA,EAAA,QAAA,kBAAA,GAAA;AAAA,MAAC,UAAA;AAAA,MAAA;AAAA,QACC,UAAW,EAAA,aAAA;AAAA,QACX,SAAA,EAAW,EAAG,CAAA,SAAA,EAAW,SAAS,CAAA;AAAA,QAClC,eAAa,EAAA,IAAA;AAAA,QACb,IAAK,EAAA,WAAA;AAAA,QACL,SAAU,EAAA,SAAA;AAAA,QACV,YAAW,EAAA,kBAAA;AAAA,QACX,OAAS,EAAA;AAAA;AAAA,KAEb,EAAA,CAAA;AAAA,yBACC,SACE,EAAA,EAAA,QAAA,EAAA;AAAA,MAAA,QAAA;AAAA,MACA,SAAA;AAAA,MACA,eAAA;AAAA,MACA,mBAAA;AAAA,MACA,OAAA;AAAA,MACA;AAAA,KACH,EAAA;AAAA,GACF,EAAA,CAAA;AAEJ;;;;"}

package/esm/column-menu/column-menu-utils.js

@@ -23,8 +23,7 @@ const isColumnMenuActionType = (value) => value !== void 0 && [
   "unpin-column",
   "hide-column",
   "remove-column",
-  "column-settings",
-  "table-settings"
+  "column-settings"
 ].includes(value);
 const getColumnMenuActionType = (target) => {
   const { menuActionId } = target.dataset;
@@ -372,8 +371,8 @@ const buildPinMenuItems = (column, menuActionClickHandler, isAllowed = true) =>
   }
   return menuItems;
 };
-const buildSettingsMenuItems = (_, menuActionClickHandler, allowColumnSettings = true, allowTableSettings = true) => {
-  if (!allowColumnSettings && !allowTableSettings) {
+const buildSettingsMenuItems = (_, menuActionClickHandler, allowColumnSettings = true) => {
+  if (!allowColumnSettings) {
     return null;
   }
   const menuItems = [];
@@ -391,20 +390,6 @@ const buildSettingsMenuItems = (_, menuActionClickHandler, allowColumnSettings =
       )
     );
   }
-  if (allowTableSettings) {
-    menuItems.push(
-      /* @__PURE__ */ jsx(
-        MenuItem,
-        {
-          "data-icon": "settings",
-          "data-menu-action-id": "table-settings",
-          onClick: menuActionClickHandler,
-          children: "Table settings ..."
-        },
-        "table-settings"
-      )
-    );
-  }
   return menuItems;
 };
 function buildAggregationMenuItems(column, dataSource, menuActionClickHandler, isAllowed = true) {