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

package/esm/packages/vuu-table-extras/src/table-provider/TableProvider.js

@@ -0,0 +1,56 @@
+import { jsx } from 'react/jsx-runtime';
+import { createContext, useContext } from 'react';
+
+const NullMenuActionHandler = (menuItemId) => {
+  console.log(
+    `[TableContext] no menu action handler installed (menuItemHandler invoked with ${menuItemId})`
+  );
+  return false;
+};
+const NullDataSource = {};
+const TableContext = createContext({
+  dataSource: NullDataSource,
+  menuActionHandler: NullMenuActionHandler
+});
+const TableProvider = ({
+  children,
+  dataSource,
+  menuActionHandler,
+  rowActionHandlers
+}) => {
+  return /* @__PURE__ */ jsx(
+    TableContext.Provider,
+    {
+      value: {
+        dataSource,
+        menuActionHandler,
+        rowActionHandlers
+      },
+      children
+    }
+  );
+};
+function useTableContext(throwIfNoDataSource = false) {
+  const { dataSource, menuActionHandler } = useContext(TableContext);
+  if (dataSource === NullDataSource && menuActionHandler == NullMenuActionHandler && throwIfNoDataSource) {
+    throw Error(`[TableProvider] no DataSourceProvider has been declared`);
+  } else {
+    return {
+      dataSource,
+      menuActionHandler
+    };
+  }
+}
+const useRowAction = (actionId) => {
+  const { rowActionHandlers } = useContext(TableContext);
+  if (rowActionHandlers?.[actionId]) {
+    return rowActionHandlers[actionId];
+  } else {
+    throw Error(
+      `[TableProvider] useRowAction, no action configured #${actionId}`
+    );
+  }
+};
+
+export { TableContext, TableProvider, useRowAction, useTableContext };
+//# sourceMappingURL=TableProvider.js.map

package/esm/packages/vuu-table-extras/src/table-provider/TableProvider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableProvider.js","sources":["../../../../../../../packages/vuu-table-extras/src/table-provider/TableProvider.tsx"],"sourcesContent":["import type { MenuActionHandler } from \"@vuu-ui/vuu-context-menu\";\nimport type { DataSource } from \"@vuu-ui/vuu-data-types\";\nimport type { TableProps } from \"@vuu-ui/vuu-table\";\nimport type { ColumnDescriptor } from \"@vuu-ui/vuu-table-types\";\nimport { createContext, ReactNode, useContext } from \"react\";\nimport type { ColumnMenuActionType } from \"../column-menu/column-menu-utils\";\n\nexport interface TableContextProps\n  extends Pick<TableProps, \"dataSource\" | \"rowActionHandlers\"> {\n  menuActionHandler: MenuActionHandler<ColumnMenuActionType, ColumnDescriptor>;\n}\n\nconst NullMenuActionHandler = (menuItemId: string) => {\n  console.log(\n    `[TableContext] no menu action handler installed (menuItemHandler invoked with ${menuItemId})`,\n  );\n  return false;\n};\nconst NullDataSource = {} as DataSource;\n\nexport const TableContext = createContext<TableContextProps>({\n  dataSource: NullDataSource,\n  menuActionHandler: NullMenuActionHandler,\n});\n\nexport const TableProvider = ({\n  children,\n  dataSource,\n  menuActionHandler,\n  rowActionHandlers,\n}: TableContextProps & {\n  children: ReactNode;\n}) => {\n  return (\n    <TableContext.Provider\n      value={{\n        dataSource,\n        menuActionHandler,\n        rowActionHandlers,\n      }}\n    >\n      {children}\n    </TableContext.Provider>\n  );\n};\n\nexport function useTableContext(throwIfNoDataSource = false) {\n  const { dataSource, menuActionHandler } = useContext(TableContext);\n  if (\n    dataSource === NullDataSource &&\n    menuActionHandler == NullMenuActionHandler &&\n    throwIfNoDataSource\n  ) {\n    throw Error(`[TableProvider] no DataSourceProvider has been declared`);\n  } else {\n    return {\n      dataSource,\n      menuActionHandler,\n    };\n  }\n}\n\nexport const useRowAction = (actionId: string) => {\n  const { rowActionHandlers } = useContext(TableContext);\n  if (rowActionHandlers?.[actionId]) {\n    return rowActionHandlers[actionId];\n  } else {\n    throw Error(\n      `[TableProvider] useRowAction, no action configured #${actionId}`,\n    );\n  }\n};\n"],"names":[],"mappings":";;;AAYA,MAAM,qBAAA,GAAwB,CAAC,UAAuB,KAAA;AACpD,EAAQ,OAAA,CAAA,GAAA;AAAA,IACN,iFAAiF,UAAU,CAAA,CAAA;AAAA,GAC7F;AACA,EAAO,OAAA,KAAA;AACT,CAAA;AACA,MAAM,iBAAiB,EAAC;AAEjB,MAAM,eAAe,aAAiC,CAAA;AAAA,EAC3D,UAAY,EAAA,cAAA;AAAA,EACZ,iBAAmB,EAAA;AACrB,CAAC;AAEM,MAAM,gBAAgB,CAAC;AAAA,EAC5B,QAAA;AAAA,EACA,UAAA;AAAA,EACA,iBAAA;AAAA,EACA;AACF,CAEM,KAAA;AACJ,EACE,uBAAA,GAAA;AAAA,IAAC,YAAa,CAAA,QAAA;AAAA,IAAb;AAAA,MACC,KAAO,EAAA;AAAA,QACL,UAAA;AAAA,QACA,iBAAA;AAAA,QACA;AAAA,OACF;AAAA,MAEC;AAAA;AAAA,GACH;AAEJ;AAEgB,SAAA,eAAA,CAAgB,sBAAsB,KAAO,EAAA;AAC3D,EAAA,MAAM,EAAE,UAAA,EAAY,iBAAkB,EAAA,GAAI,WAAW,YAAY,CAAA;AACjE,EAAA,IACE,UAAe,KAAA,cAAA,IACf,iBAAqB,IAAA,qBAAA,IACrB,mBACA,EAAA;AACA,IAAA,MAAM,MAAM,CAAyD,uDAAA,CAAA,CAAA;AAAA,GAChE,MAAA;AACL,IAAO,OAAA;AAAA,MACL,UAAA;AAAA,MACA;AAAA,KACF;AAAA;AAEJ;AAEa,MAAA,YAAA,GAAe,CAAC,QAAqB,KAAA;AAChD,EAAA,MAAM,EAAE,iBAAA,EAAsB,GAAA,UAAA,CAAW,YAAY,CAAA;AACrD,EAAI,IAAA,iBAAA,GAAoB,QAAQ,CAAG,EAAA;AACjC,IAAA,OAAO,kBAAkB,QAAQ,CAAA;AAAA,GAC5B,MAAA;AACL,IAAM,MAAA,KAAA;AAAA,MACJ,uDAAuD,QAAQ,CAAA;AAAA,KACjE;AAAA;AAEJ;;;;"}

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

@@ -0,0 +1,4 @@
+var tableSettingsPanelCss = ".vuuTableSettingsPanel {\n    --vuuScrollable-size: 6px;\n    --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>');\n    --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>');\n    --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>');\n    --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>');\n    --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>');\n    --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>');\n\n    display: flex;\n    flex-direction: column;\n    gap: 24px;\n    height: 100%;\n    max-width: 254px;\n    padding: 12px 2px var(--salt-spacing-200) 2px;\n}\n\n\n.vuuTableSettingsPanel [data-icon=\"text-strikethrough\"]{\n    --vuu-icon-svg: var(--vuu-svg-text-strikethrough);\n}\n.vuuTableSettingsPanel [data-icon=\"text-Tt\"]{\n    --vuu-icon-svg: var(--vuu-svg-text-Tt);\n}\n.vuuTableSettingsPanel [data-icon=\"text-T\"]{\n    --vuu-icon-svg: var(--vuu-svg-text-T);\n}\n.vuuTableSettingsPanel [data-icon=\"col-lines\"]{\n    --vuu-icon-svg: var(--vuu-svg-col-lines);\n}\n.vuuTableSettingsPanel [data-icon=\"row-lines\"]{\n    --vuu-icon-svg: var(--vuu-svg-row-lines);\n}\n.vuuTableSettingsPanel [data-icon=\"row-striping\"]{\n    --vuu-icon-svg: var(--vuu-svg-stripes);\n}\n\n.vuuTableSettingsPanel-header {\n    font-size: 14px;\n    font-weight: 600;\n    padding-top: 24px;\n}\n\n.vuuTableSettingsPanel-columnListContainer {\n\n    flex-grow: 1;\n    flex-shrink:  1;\n    flex-basis: 0;\n    position: relative;\n    overflow: auto;\n    .vuuColumnList {\n        height: 100%;\n    }\n}\n\n.vuuTableSettingsPanel-calculatedButtonbar {\n    --vuu-icon-size: 16px;\n    --saltButton-height: 24px;\n    --saltButton-width: 24px;\n    align-items: center;\n    display: flex;\n    flex: 0 0 32px;\n    gap: 12px;\n}\n\n\n\n\n\n\n";
+
+export { tableSettingsPanelCss as default };
+//# sourceMappingURL=TableSettingsPanel.css.js.map

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

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

package/esm/packages/vuu-table-extras/src/table-settings-panel/TableSettingsPanel.js

@@ -0,0 +1,112 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { FormField, FormFieldLabel, ToggleButtonGroup, ToggleButton } from '@salt-ds/core';
+import { useComponentCssInjection } from '@salt-ds/styles';
+import { useWindow } from '@salt-ds/window';
+import { useTableSettings } from './useTableSettings.js';
+import { VuuInput, Icon } from '@vuu-ui/vuu-ui-controls';
+import tableSettingsPanelCss from './TableSettingsPanel.css.js';
+
+const classBase = "vuuTableSettingsPanel";
+const defaultTableSettingsPermissions = {
+  allowColumnLabelCase: true,
+  allowColumnDefaultWidth: true,
+  allowGridSeparators: true
+};
+const noTableSettingsPermissions = {
+  allowColumnLabelCase: false,
+  allowColumnDefaultWidth: false,
+  allowGridSeparators: false
+};
+const TableSettingsPanel = ({
+  onDisplayAttributeChange,
+  tableDisplayAttributes: tableDisplayAttributesProp,
+  permissions: permissionsProp
+}) => {
+  const targetWindow = useWindow();
+  useComponentCssInjection({
+    testId: "vuu-table-settings-panel",
+    css: tableSettingsPanelCss,
+    window: targetWindow
+  });
+  const permissions = permissionsProp === void 0 || permissionsProp === true ? defaultTableSettingsPermissions : permissionsProp === false ? noTableSettingsPermissions : permissionsProp;
+  const {
+    columnLabelsValue,
+    onChangeColumnLabels,
+    onChangeTableAttribute,
+    onCommitColumnWidth,
+    tableDisplayAttributes
+  } = useTableSettings({
+    onDisplayAttributeChange,
+    tableDisplayAttributes: tableDisplayAttributesProp
+  });
+  const {
+    allowColumnLabelCase = true,
+    allowColumnDefaultWidth = true,
+    allowGridSeparators = true
+  } = permissions;
+  return /* @__PURE__ */ jsxs("div", { className: classBase, children: [
+    allowColumnDefaultWidth ? /* @__PURE__ */ jsxs(FormField, { children: [
+      /* @__PURE__ */ jsx(FormFieldLabel, { children: "Column Width" }),
+      /* @__PURE__ */ jsx(
+        VuuInput,
+        {
+          bordered: true,
+          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,
+    allowGridSeparators ? /* @__PURE__ */ jsxs(FormField, { children: [
+      /* @__PURE__ */ jsx(FormFieldLabel, { children: "Grid separators" }),
+      /* @__PURE__ */ jsxs("div", { className: "saltToggleButtonGroup vuuStateButtonGroup saltToggleButtonGroup-horizontal", children: [
+        /* @__PURE__ */ jsx(
+          ToggleButton,
+          {
+            selected: tableDisplayAttributes.zebraStripes ?? false,
+            onChange: onChangeTableAttribute,
+            value: "zebraStripes",
+            children: /* @__PURE__ */ jsx(Icon, { name: "row-striping", size: 16 })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          ToggleButton,
+          {
+            selected: tableDisplayAttributes.rowSeparators ?? false,
+            onChange: onChangeTableAttribute,
+            value: "rowSeparators",
+            children: /* @__PURE__ */ jsx(Icon, { name: "row-lines", size: 16 })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          ToggleButton,
+          {
+            selected: tableDisplayAttributes.columnSeparators ?? false,
+            onChange: onChangeTableAttribute,
+            value: "columnSeparators",
+            children: /* @__PURE__ */ jsx(Icon, { name: "col-lines", size: 16 })
+          }
+        )
+      ] })
+    ] }) : null
+  ] });
+};
+
+export { TableSettingsPanel, defaultTableSettingsPermissions, noTableSettingsPermissions };
+//# sourceMappingURL=TableSettingsPanel.js.map

package/esm/packages/vuu-table-extras/src/table-settings-panel/TableSettingsPanel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableSettingsPanel.js","sources":["../../../../../../../packages/vuu-table-extras/src/table-settings-panel/TableSettingsPanel.tsx"],"sourcesContent":["import {\n  FormField,\n  FormFieldLabel,\n  ToggleButton,\n  ToggleButtonGroup,\n} from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport {\n  TableDisplayAttributes,\n  TableSettingsPermissions,\n} from \"@vuu-ui/vuu-table-types\";\nimport { useTableSettings } from \"./useTableSettings\";\nimport { Icon } from \"@vuu-ui/vuu-ui-controls\";\nimport { VuuInput } from \"@vuu-ui/vuu-ui-controls\";\n\nimport tableSettingsPanelCss from \"./TableSettingsPanel.css\";\n\nconst classBase = \"vuuTableSettingsPanel\";\n\nexport const defaultTableSettingsPermissions: Readonly<TableSettingsPermissions> =\n  {\n    allowColumnLabelCase: true,\n    allowColumnDefaultWidth: true,\n    allowGridSeparators: true,\n  };\nexport const noTableSettingsPermissions: Readonly<TableSettingsPermissions> = {\n  allowColumnLabelCase: false,\n  allowColumnDefaultWidth: false,\n  allowGridSeparators: false,\n};\n\nexport type TableDisplayAttributeChangeHandler = (\n  displayAttributes: TableDisplayAttributes,\n) => void;\n\n/**\n * Describes the props for a Table Configuration Editor, for which\n * an implementation is provided in vuu-table-extras\n */\nexport interface TableSettingsPanelProps {\n  allowColumnLabelCase?: boolean;\n  allowColumnDefaultWidth?: boolean;\n  allowGridRowStyling?: boolean;\n  onDisplayAttributeChange: TableDisplayAttributeChangeHandler;\n  tableDisplayAttributes: TableDisplayAttributes;\n  permissions?: TableSettingsPermissions | boolean;\n}\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  onDisplayAttributeChange,\n  tableDisplayAttributes: tableDisplayAttributesProp,\n  permissions: permissionsProp,\n}: TableSettingsPanelProps) => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-table-settings-panel\",\n    css: tableSettingsPanelCss,\n    window: targetWindow,\n  });\n\n  const permissions =\n    permissionsProp === undefined || permissionsProp === true\n      ? defaultTableSettingsPermissions\n      : permissionsProp === false\n        ? noTableSettingsPermissions\n        : permissionsProp;\n\n  const {\n    columnLabelsValue,\n    onChangeColumnLabels,\n    onChangeTableAttribute,\n    onCommitColumnWidth,\n    tableDisplayAttributes,\n  } = useTableSettings({\n    onDisplayAttributeChange,\n    tableDisplayAttributes: tableDisplayAttributesProp,\n  });\n\n  const {\n    allowColumnLabelCase = true,\n    allowColumnDefaultWidth = true,\n    allowGridSeparators = true,\n  } = permissions;\n\n  return (\n    <div className={classBase}>\n      {allowColumnDefaultWidth ? (\n        <FormField>\n          <FormFieldLabel>Column Width</FormFieldLabel>\n          <VuuInput\n            bordered\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      {allowGridSeparators ? (\n        <FormField>\n          <FormFieldLabel>Grid separators</FormFieldLabel>\n          <div className=\"saltToggleButtonGroup vuuStateButtonGroup saltToggleButtonGroup-horizontal\">\n            <ToggleButton\n              selected={tableDisplayAttributes.zebraStripes ?? false}\n              onChange={onChangeTableAttribute}\n              value=\"zebraStripes\"\n            >\n              <Icon name=\"row-striping\" size={16} />\n            </ToggleButton>\n            <ToggleButton\n              selected={tableDisplayAttributes.rowSeparators ?? false}\n              onChange={onChangeTableAttribute}\n              value=\"rowSeparators\"\n            >\n              <Icon name=\"row-lines\" size={16} />\n            </ToggleButton>\n            <ToggleButton\n              selected={tableDisplayAttributes.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    </div>\n  );\n};\n"],"names":[],"mappings":"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"}

package/esm/packages/vuu-table-extras/src/table-settings-panel/useTableSettings.js

@@ -0,0 +1,58 @@
+import { queryClosest, useLayoutEffectSkipFirst } from '@vuu-ui/vuu-utils';
+import { useState, useCallback } from 'react';
+
+const useTableSettings = ({
+  onDisplayAttributeChange,
+  tableDisplayAttributes: tableDisplayAttributesProp
+}) => {
+  const [tableDisplayAttributes, setDisplayTableAttributes] = useState(tableDisplayAttributesProp);
+  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";
+      setDisplayTableAttributes((state) => ({
+        ...state,
+        columnFormatHeader
+      }));
+    }
+  }, []);
+  const handleChangeTableAttribute = useCallback(
+    (evt) => {
+      const button = queryClosest(evt.target, "button");
+      if (button) {
+        const { ariaPressed, value } = button;
+        setDisplayTableAttributes((state) => ({
+          ...state,
+          [value]: ariaPressed !== "true"
+        }));
+      }
+    },
+    []
+  );
+  const handleCommitColumnWidth = useCallback((_, value) => {
+    if (typeof value === "string") {
+      const columnDefaultWidth = parseInt(value);
+      if (!isNaN(columnDefaultWidth)) {
+        setDisplayTableAttributes((state) => ({
+          ...state,
+          columnDefaultWidth
+        }));
+      }
+    }
+  }, []);
+  useLayoutEffectSkipFirst(() => {
+    onDisplayAttributeChange?.(tableDisplayAttributes);
+  }, [onDisplayAttributeChange, tableDisplayAttributes]);
+  const columnLabelsValue = tableDisplayAttributes.columnFormatHeader === void 0 ? 0 : tableDisplayAttributes.columnFormatHeader === "capitalize" ? 1 : 2;
+  return {
+    columnLabelsValue,
+    onChangeColumnLabels: handleChangeColumnLabels,
+    onChangeTableAttribute: handleChangeTableAttribute,
+    onCommitColumnWidth: handleCommitColumnWidth,
+    tableDisplayAttributes
+  };
+};
+
+export { useTableSettings };
+//# sourceMappingURL=useTableSettings.js.map

package/esm/packages/vuu-table-extras/src/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":[],"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,GACtD,SAAiC,0BAA0B,CAAA;AAE7D,EAAM,MAAA,wBAAA,GAA2B,WAAY,CAAA,CAAC,GAAwB,KAAA;AACpE,IAAA,MAAM,MAAS,GAAA,YAAA,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,GAAA,WAAA;AAAA,IACjC,CAAC,GAAuC,KAAA;AACtC,MAAA,MAAM,MAAS,GAAA,YAAA,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,GAAA,WAAA,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,EAAA,wBAAA,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/package.json

@@ -1,21 +1,20 @@
 {
-  "version": "2.1.19-beta.2",
+  "version": "2.1.19-beta.3",
   "author": "heswell",
   "license": "Apache-2.0",
-  "type": "module",
   "devDependencies": {
-    "@vuu-ui/vuu-filter-types": "2.1.19-beta.2",
-    "@vuu-ui/vuu-protocol-types": "2.1.19-beta.2"
+    "@vuu-ui/vuu-filter-types": "2.1.19-beta.3",
+    "@vuu-ui/vuu-protocol-types": "2.1.19-beta.3"
   },
   "dependencies": {
-    "@vuu-ui/vuu-codemirror": "2.1.19-beta.2",
-    "@vuu-ui/vuu-data-react": "2.1.19-beta.2",
-    "@vuu-ui/vuu-data-types": "2.1.19-beta.2",
-    "@vuu-ui/vuu-table-types": "2.1.19-beta.2",
-    "@vuu-ui/vuu-popups": "2.1.19-beta.2",
-    "@vuu-ui/vuu-table": "2.1.19-beta.2",
-    "@vuu-ui/vuu-utils": "2.1.19-beta.2",
-    "@vuu-ui/vuu-ui-controls": "2.1.19-beta.2",
+    "@vuu-ui/vuu-codemirror": "2.1.19-beta.3",
+    "@vuu-ui/vuu-data-react": "2.1.19-beta.3",
+    "@vuu-ui/vuu-data-types": "2.1.19-beta.3",
+    "@vuu-ui/vuu-table-types": "2.1.19-beta.3",
+    "@vuu-ui/vuu-popups": "2.1.19-beta.3",
+    "@vuu-ui/vuu-table": "2.1.19-beta.3",
+    "@vuu-ui/vuu-utils": "2.1.19-beta.3",
+    "@vuu-ui/vuu-ui-controls": "2.1.19-beta.3",
     "@lezer/lr": "1.4.2",
     "@salt-ds/core": "1.54.1",
     "@salt-ds/lab": "1.0.0-alpha.83",
@@ -29,18 +28,22 @@
     "react": "^19.2.3",
     "react-dom": "^19.2.3"
   },
+  "type": "module",
   "files": [
     "README.md",
-    "src",
+    "esm",
+    "cjs",
     "/types"
   ],
   "exports": {
     ".": {
-      "import": "./src/index.js",
+      "require": "./cjs/packages/vuu-table-extras/src/index.js",
+      "import": "./esm/packages/vuu-table-extras/src/index.js",
       "types": "./types/index.d.ts"
     }
   },
-  "module": "index.js",
+  "main": "cjs/index.js",
+  "module": "esm/index.js",
   "name": "@vuu-ui/vuu-table-extras",
   "types": "types/index.d.ts"
 }

package/types/cell-renderers/background-cell/BackgroundCell.d.ts

@@ -1,2 +1,2 @@
 import { TableCellRendererProps } from "@vuu-ui/vuu-table-types";
-export declare const BackgroundCell: import("react").MemoExoticComponent<({ column, dataRow, }: TableCellRendererProps) => import("react/jsx-runtime").JSX.Element>;
+export declare const BackgroundCell: import("react").NamedExoticComponent<TableCellRendererProps>;

package/types/cell-renderers/dropdown-cell/DropdownCell.d.ts

@@ -1,2 +1,2 @@
 import { TableCellRendererProps } from "@vuu-ui/vuu-table-types";
-export declare const DropdownCell: import("react").MemoExoticComponent<({ column, dataRow, editedDuringCurrentSession, onEdit, }: TableCellRendererProps) => import("react/jsx-runtime").JSX.Element>;
+export declare const DropdownCell: import("react").NamedExoticComponent<TableCellRendererProps>;

package/types/cell-renderers/lookup-cell/LookupCell.d.ts

@@ -1,2 +1,2 @@
 import { TableCellRendererProps } from "@vuu-ui/vuu-table-types";
-export declare const LookupCell: import("react").MemoExoticComponent<({ column, dataRow, }: TableCellRendererProps) => import("react/jsx-runtime").JSX.Element>;
+export declare const LookupCell: import("react").NamedExoticComponent<TableCellRendererProps>;

package/types/column-expression-input/column-language-parser/generated/column-parser.d.ts

@@ -1,2 +1,2 @@
+export const parser: LRParser;
 import { LRParser } from "@lezer/lr";
-export declare const parser: LRParser;

package/types/column-expression-input/column-language-parser/generated/column-parser.terms.d.ts

@@ -1 +1,24 @@
-export declare const ColumnDefinitionExpression = 1, Column = 2, Number = 3, String = 4, True = 5, False = 6, ParenthesizedExpression = 7, OpenBrace = 8, CloseBrace = 9, ArithmeticExpression = 10, Divide = 11, Times = 12, Plus = 13, Minus = 14, ConditionalExpression = 15, If = 16, RelationalExpression = 17, RelationalOperator = 18, AndCondition = 19, OrCondition = 20, Comma = 21, CallExpression = 22, Function = 23, ArgList = 24;
+export const ColumnDefinitionExpression: 1;
+export const Column: 2;
+export const Number: 3;
+export const String: 4;
+export const True: 5;
+export const False: 6;
+export const ParenthesizedExpression: 7;
+export const OpenBrace: 8;
+export const CloseBrace: 9;
+export const ArithmeticExpression: 10;
+export const Divide: 11;
+export const Times: 12;
+export const Plus: 13;
+export const Minus: 14;
+export const ConditionalExpression: 15;
+export const If: 16;
+export const RelationalExpression: 17;
+export const RelationalOperator: 18;
+export const AndCondition: 19;
+export const OrCondition: 20;
+export const Comma: 21;
+export const CallExpression: 22;
+export const Function: 23;
+export const ArgList: 24;

package/types/column-expression-input/column-language-parser/test.d.mts

@@ -1 +1 @@
-export declare const walkTree: (tree: any, source: any) => void;
+export function walkTree(tree: any, source: any): void;

package/types/freeze-control/useFreezeControl.d.ts

@@ -4,7 +4,7 @@ export interface FreezeProps {
     dataSource: DataSource;
 }
 export declare const useFreezeControl: ({ dataSource }: FreezeProps) => {
+    onToggleChange: (evt: SyntheticEvent<HTMLButtonElement>) => void;
     isFrozen: boolean;
     newRecordCount: number;
-    onToggleChange: (evt: SyntheticEvent<HTMLButtonElement>) => void;
 };

package/src/calculated-column/CalculatedColumnPanel.js

@@ -1,95 +0,0 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import { Dropdown, FormField, FormFieldLabel, Input, Option } from "@salt-ds/core";
-import { useCalculatedColumnPanel } from "./useCalculatedColumnPanel.js";
-import { useCallback, useRef } from "react";
-import { getCalculatedColumnDetails } from "@vuu-ui/vuu-utils";
-import { ColumnExpressionInput, useColumnExpressionSuggestionProvider } from "../column-expression-input/index.js";
-const classBase = "vuuCalculatedColumnPanel";
-const CalculatedColumnPanel = ({ column: columnProp, columnModel, onChangeColumn, onChangeServerDataType: onChangeServerDataTypeProp, vuuTable })=>{
-    const typeRef = useRef(null);
-    const { column, onChangeExpression, onChangeName, onChangeServerDataType } = useCalculatedColumnPanel({
-        column: columnProp,
-        onChangeColumn,
-        onChangeServerDataType: onChangeServerDataTypeProp
-    });
-    const initialExpressionRef = useRef(getCalculatedColumnDetails(column).expression ?? "");
-    const suggestionProvider = useColumnExpressionSuggestionProvider({
-        columns: columnModel.selectedColumns,
-        table: vuuTable
-    });
-    const handleSubmitExpression = useCallback(()=>{
-        if (typeRef.current) typeRef.current?.querySelector("button")?.focus();
-    }, []);
-    const { name, serverDataType } = getCalculatedColumnDetails(column);
-    return /*#__PURE__*/ jsxs("div", {
-        className: classBase,
-        children: [
-            /*#__PURE__*/ jsx("div", {
-                children: column.name
-            }),
-            /*#__PURE__*/ jsxs(FormField, {
-                "data-field": "column-name",
-                children: [
-                    /*#__PURE__*/ jsx(FormFieldLabel, {
-                        children: "Column Label"
-                    }),
-                    /*#__PURE__*/ jsx(Input, {
-                        className: "vuuInput",
-                        onChange: onChangeName,
-                        value: name
-                    })
-                ]
-            }),
-            /*#__PURE__*/ jsxs(FormField, {
-                "data-field": "column-expression",
-                children: [
-                    /*#__PURE__*/ jsx(FormFieldLabel, {
-                        children: "Expression"
-                    }),
-                    /*#__PURE__*/ jsx(ColumnExpressionInput, {
-                        onChange: onChangeExpression,
-                        onSubmitExpression: handleSubmitExpression,
-                        source: initialExpressionRef.current,
-                        suggestionProvider: suggestionProvider
-                    })
-                ]
-            }),
-            /*#__PURE__*/ jsxs(FormField, {
-                "data-field": "type",
-                children: [
-                    /*#__PURE__*/ jsx(FormFieldLabel, {
-                        children: "Column type"
-                    }),
-                    /*#__PURE__*/ jsxs(Dropdown, {
-                        className: `${classBase}-type`,
-                        onSelectionChange: onChangeServerDataType,
-                        ref: typeRef,
-                        selected: serverDataType ? [
-                            serverDataType
-                        ] : [],
-                        value: serverDataType,
-                        children: [
-                            /*#__PURE__*/ jsx(Option, {
-                                value: "boolean",
-                                children: "Boolean"
-                            }),
-                            /*#__PURE__*/ jsx(Option, {
-                                value: "double",
-                                children: "Double"
-                            }),
-                            /*#__PURE__*/ jsx(Option, {
-                                value: "long",
-                                children: "Long"
-                            }),
-                            /*#__PURE__*/ jsx(Option, {
-                                value: "string",
-                                children: "String"
-                            })
-                        ]
-                    })
-                ]
-            })
-        ]
-    });
-};
-export { CalculatedColumnPanel };

package/src/calculated-column/useCalculatedColumnPanel.js

@@ -1,60 +0,0 @@
-import { getCalculatedColumnDetails, isVuuColumnDataType, setCalculatedColumnExpression, setCalculatedColumnName, setCalculatedColumnType } from "@vuu-ui/vuu-utils";
-import { useCallback, useRef, useState } from "react";
-const applyDefaults = (column)=>{
-    const { name, expression, serverDataType } = getCalculatedColumnDetails(column);
-    if (void 0 === serverDataType) return {
-        ...column,
-        name: `${name}:string:${expression}`
-    };
-    return column;
-};
-const useCalculatedColumnPanel = ({ column: columnProp, onChangeColumn, onChangeServerDataType: onChangeServerDataTypeProp })=>{
-    const [column, _setColumn] = useState(applyDefaults(columnProp));
-    const columnRef = useRef(columnProp);
-    const setColumn = useCallback((column)=>{
-        columnRef.current = column;
-        _setColumn(column);
-    }, []);
-    const onChangeName = useCallback((evt)=>{
-        const { value } = evt.target;
-        const newColumn = setCalculatedColumnName(column, value);
-        console.log(`name = ${newColumn.name}`);
-        setColumn(newColumn);
-        onChangeColumn(newColumn);
-    }, [
-        column,
-        onChangeColumn,
-        setColumn
-    ]);
-    const onChangeExpression = useCallback((value)=>{
-        console.log(`expression = ${value}`);
-        const expression = value.trim();
-        const { current: column } = columnRef;
-        const newColumn = setCalculatedColumnExpression(column, expression);
-        setColumn(newColumn);
-        onChangeColumn(newColumn);
-    }, [
-        onChangeColumn,
-        setColumn
-    ]);
-    const onChangeServerDataType = useCallback((_e, [serverDataType])=>{
-        if (isVuuColumnDataType(serverDataType)) {
-            const newColumn = setCalculatedColumnType(column, serverDataType);
-            setColumn(newColumn);
-            onChangeServerDataTypeProp?.(serverDataType);
-            onChangeColumn(newColumn);
-        }
-    }, [
-        column,
-        onChangeColumn,
-        onChangeServerDataTypeProp,
-        setColumn
-    ]);
-    return {
-        column,
-        onChangeExpression,
-        onChangeName,
-        onChangeServerDataType
-    };
-};
-export { useCalculatedColumnPanel };