@vuu-ui/vuu-table-extras 1.0.3 → 2.0.0

package/cjs/tabbed-table-config-panel/TabbedTableConfigPanel.js

@@ -0,0 +1,90 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var lab = require('@salt-ds/lab');
+var styles = require('@salt-ds/styles');
+var window = require('@salt-ds/window');
+var cx = require('clsx');
+var react = require('react');
+var useEditCalculatedColumn = require('../calculated-column/useEditCalculatedColumn.js');
+var ColumnPicker = require('../column-picker/ColumnPicker.js');
+var ColumnSettingsPanel = require('../column-settings-panel/ColumnSettingsPanel.js');
+var TableSettingsPanel = require('../table-settings-panel/TableSettingsPanel.js');
+var TabbedTableConfigPanel$1 = require('./TabbedTableConfigPanel.css.js');
+
+const classBase = "vuuTabbedTableConfigPanel";
+const TabbedTableConfigPanel = ({
+  allowCreateCalculatedColumn = false,
+  className,
+  columnModel,
+  config,
+  onDisplayAttributeChange,
+  selectedTab = "table-settings",
+  vuuTable,
+  ...htmlAttributes
+}) => {
+  const targetWindow = window.useWindow();
+  styles.useComponentCssInjection({
+    testId: "vuu-tabbed-table-config-panel",
+    css: TabbedTableConfigPanel$1,
+    window: targetWindow
+  });
+  const [columns, setColumns] = react.useState([]);
+  const [value, setValue] = react.useState(selectedTab);
+  const handleChange = react.useCallback(
+    (_e, value2) => {
+      setValue(value2);
+    },
+    []
+  );
+  const handleSelectionChange = react.useCallback(
+    (_e, selectedItems) => {
+      setColumns(selectedItems);
+    },
+    []
+  );
+  const handleSaveCalculatedColumn = react.useCallback((column) => {
+    setColumns([column]);
+  }, []);
+  const { onCreateCalculatedColumn, onEditCalculatedColumn } = useEditCalculatedColumn.useEditCalculatedColumn({
+    columnModel,
+    calculatedColumn: columns[0],
+    onSaveColumn: handleSaveCalculatedColumn,
+    vuuTable
+  });
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { ...htmlAttributes, className: cx(classBase, className), children: /* @__PURE__ */ jsxRuntime.jsxs(lab.TabsNext, { onChange: handleChange, value, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(lab.TabListNext, { appearance: "transparent", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(lab.TabNext, { value: "table-settings", children: /* @__PURE__ */ jsxRuntime.jsx(lab.TabNextTrigger, { children: "Table settings" }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(lab.TabNext, { value: "table-columns", children: /* @__PURE__ */ jsxRuntime.jsx(lab.TabNextTrigger, { children: "Table columns" }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(lab.TabNext, { disabled: columns.length === 0, value: "column-settings", children: /* @__PURE__ */ jsxRuntime.jsx(lab.TabNextTrigger, { children: "Column settings" }) })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(lab.TabNextPanel, { value: "table-settings", children: /* @__PURE__ */ jsxRuntime.jsx(
+      TableSettingsPanel.TableSettingsPanel,
+      {
+        onDisplayAttributeChange,
+        tableDisplayAttributes: config
+      }
+    ) }),
+    /* @__PURE__ */ jsxRuntime.jsx(lab.TabNextPanel, { value: "table-columns", children: /* @__PURE__ */ jsxRuntime.jsx(
+      ColumnPicker.ColumnPicker,
+      {
+        allowCreateCalculatedColumn,
+        columnModel,
+        onClickCreateCalculatedColumn: onCreateCalculatedColumn,
+        onSelectionChange: handleSelectionChange,
+        selected: columns
+      }
+    ) }),
+    /* @__PURE__ */ jsxRuntime.jsx(lab.TabNextPanel, { value: "column-settings", children: columns.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx(
+      ColumnSettingsPanel.ColumnSettingsPanel,
+      {
+        column: columns[0],
+        columnModel,
+        onClickEditCalculatedColumn: onEditCalculatedColumn
+      }
+    ) : null })
+  ] }) });
+};
+
+exports.TabbedTableConfigPanel = TabbedTableConfigPanel;
+//# sourceMappingURL=TabbedTableConfigPanel.js.map

package/cjs/tabbed-table-config-panel/TabbedTableConfigPanel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TabbedTableConfigPanel.js","sources":["../../../../packages/vuu-table-extras/src/tabbed-table-config-panel/TabbedTableConfigPanel.tsx"],"sourcesContent":["import {\n  TabListNext,\n  TabNext,\n  TabNextPanel,\n  TabNextTrigger,\n  TabsNext,\n} from \"@salt-ds/lab\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { VuuTable } from \"@vuu-ui/vuu-protocol-types\";\nimport type { TableProps } from \"@vuu-ui/vuu-table\";\nimport { ColumnDescriptor } from \"@vuu-ui/vuu-table-types\";\nimport cx from \"clsx\";\nimport { HTMLAttributes, SyntheticEvent, useCallback, useState } from \"react\";\nimport { useEditCalculatedColumn } from \"../calculated-column/useEditCalculatedColumn\";\nimport { ColumnPicker, ColumnPickerProps } from \"../column-picker/ColumnPicker\";\nimport { ColumnSettingsPanel } from \"../column-settings-panel/ColumnSettingsPanel\";\nimport {\n  TableSettingsPanel,\n  TableSettingsPanelProps,\n} from \"../table-settings-panel/TableSettingsPanel\";\n\nimport css from \"./TabbedTableConfigPanel.css\";\n\nconst TabLabels = {\n  \"table-settings\": \"Table\",\n  \"table-columns\": \"Columns\",\n} as const;\n\ntype TabName = keyof typeof TabLabels;\n\nconst classBase = \"vuuTabbedTableConfigPanel\";\nexport interface TabbedTableConfigPanelProps\n  extends ColumnPickerProps,\n    Pick<TableSettingsPanelProps, \"onDisplayAttributeChange\">,\n    Pick<TableProps, \"config\">,\n    HTMLAttributes<HTMLDivElement> {\n  allowCreateCalculatedColumn?: boolean;\n  selectedTab?: TabName;\n  vuuTable?: VuuTable;\n}\n\nexport const TabbedTableConfigPanel = ({\n  allowCreateCalculatedColumn = false,\n  className,\n  columnModel,\n  config,\n  onDisplayAttributeChange,\n  selectedTab = \"table-settings\",\n  vuuTable,\n  ...htmlAttributes\n}: TabbedTableConfigPanelProps) => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-tabbed-table-config-panel\",\n    css,\n    window: targetWindow,\n  });\n\n  const [columns, setColumns] = useState<ColumnDescriptor[]>([]);\n\n  const [value, setValue] = useState<string>(selectedTab);\n  const handleChange = useCallback(\n    (_e: SyntheticEvent | null, value: string) => {\n      setValue(value);\n    },\n    [],\n  );\n\n  const handleSelectionChange = useCallback(\n    (_e: SyntheticEvent, selectedItems: ColumnDescriptor[]) => {\n      setColumns(selectedItems);\n    },\n    [],\n  );\n\n  const handleSaveCalculatedColumn = useCallback((column: ColumnDescriptor) => {\n    setColumns([column]);\n  }, []);\n\n  const { onCreateCalculatedColumn, onEditCalculatedColumn } =\n    useEditCalculatedColumn({\n      columnModel,\n      calculatedColumn: columns[0],\n      onSaveColumn: handleSaveCalculatedColumn,\n      vuuTable,\n    });\n\n  return (\n    <div {...htmlAttributes} className={cx(classBase, className)}>\n      <TabsNext onChange={handleChange} value={value}>\n        <TabListNext appearance=\"transparent\">\n          <TabNext value=\"table-settings\">\n            <TabNextTrigger>Table settings</TabNextTrigger>\n          </TabNext>\n          <TabNext value=\"table-columns\">\n            <TabNextTrigger>Table columns</TabNextTrigger>\n          </TabNext>\n          <TabNext disabled={columns.length === 0} value=\"column-settings\">\n            <TabNextTrigger>Column settings</TabNextTrigger>\n          </TabNext>\n        </TabListNext>\n        <TabNextPanel value=\"table-settings\">\n          <TableSettingsPanel\n            onDisplayAttributeChange={onDisplayAttributeChange}\n            tableDisplayAttributes={config}\n          />\n        </TabNextPanel>\n        <TabNextPanel value=\"table-columns\">\n          <ColumnPicker\n            allowCreateCalculatedColumn={allowCreateCalculatedColumn}\n            columnModel={columnModel}\n            onClickCreateCalculatedColumn={onCreateCalculatedColumn}\n            onSelectionChange={handleSelectionChange}\n            selected={columns}\n          />\n        </TabNextPanel>\n        <TabNextPanel value=\"column-settings\">\n          {columns.length > 0 ? (\n            <ColumnSettingsPanel\n              column={columns[0]}\n              columnModel={columnModel}\n              onClickEditCalculatedColumn={onEditCalculatedColumn}\n            />\n          ) : null}\n        </TabNextPanel>\n      </TabsNext>\n    </div>\n  );\n};\n"],"names":["useWindow","useComponentCssInjection","css","useState","useCallback","value","useEditCalculatedColumn","jsx","jsxs","TabsNext","TabListNext","TabNext","TabNextTrigger","TabNextPanel","TableSettingsPanel","ColumnPicker","ColumnSettingsPanel"],"mappings":"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"}

package/cjs/tabbed-table-config-panel/TabbedTableSettingsAction.js

@@ -0,0 +1,44 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var vuuUiControls = require('@vuu-ui/vuu-ui-controls');
+var react = require('react');
+var useTabbedTableConfigPanel = require('./useTabbedTableConfigPanel.js');
+
+const TabbedTableSettingsAction = ({
+  allowCreateCalculatedColumn,
+  appearance = "transparent",
+  columnModel,
+  config,
+  icon = "settings",
+  onDisplayAttributeChange,
+  sentiment = "neutral",
+  vuuTable,
+  ...IconButtonProps2
+}) => {
+  const { showTabbedTableConfigPanel } = useTabbedTableConfigPanel.useTabbedTableConfigPanel({
+    allowCreateCalculatedColumn,
+    columnModel,
+    config,
+    onDisplayAttributeChange,
+    vuuTable
+  });
+  const handleClick = react.useCallback(() => {
+    showTabbedTableConfigPanel();
+  }, [showTabbedTableConfigPanel]);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    vuuUiControls.IconButton,
+    {
+      ...IconButtonProps2,
+      appearance,
+      "data-action": "table-settings",
+      icon,
+      onClick: handleClick,
+      sentiment,
+      size: 20
+    }
+  );
+};
+
+exports.TabbedTableSettingsAction = TabbedTableSettingsAction;
+//# sourceMappingURL=TabbedTableSettingsAction.js.map

package/cjs/tabbed-table-config-panel/TabbedTableSettingsAction.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TabbedTableSettingsAction.js","sources":["../../../../packages/vuu-table-extras/src/tabbed-table-config-panel/TabbedTableSettingsAction.tsx"],"sourcesContent":["import { IconButton, IconButtonProps } from \"@vuu-ui/vuu-ui-controls\";\nimport { useCallback } from \"react\";\nimport {\n  TabbedTableConfigPanelHookProps,\n  useTabbedTableConfigPanel,\n} from \"./useTabbedTableConfigPanel\";\nimport { TableDisplayAttributeChangeHandler } from \"../table-settings-panel/TableSettingsPanel\";\n\nexport interface TabbedTableSettingsActionProps\n  extends Partial<IconButtonProps>,\n    TabbedTableConfigPanelHookProps {\n  onDisplayAttributeChange: TableDisplayAttributeChangeHandler;\n}\n\nexport const TabbedTableSettingsAction = ({\n  allowCreateCalculatedColumn,\n  appearance = \"transparent\",\n  columnModel,\n  config,\n  icon = \"settings\",\n  onDisplayAttributeChange,\n  sentiment = \"neutral\",\n  vuuTable,\n  ...IconButtonProps\n}: TabbedTableSettingsActionProps) => {\n  const { showTabbedTableConfigPanel } = useTabbedTableConfigPanel({\n    allowCreateCalculatedColumn,\n    columnModel,\n    config,\n    onDisplayAttributeChange,\n    vuuTable,\n  });\n\n  const handleClick = useCallback(() => {\n    showTabbedTableConfigPanel();\n  }, [showTabbedTableConfigPanel]);\n\n  return (\n    <IconButton\n      {...IconButtonProps}\n      appearance={appearance}\n      data-action=\"table-settings\"\n      icon={icon}\n      onClick={handleClick}\n      sentiment={sentiment}\n      size={20}\n    />\n  );\n};\n"],"names":["IconButtonProps","useTabbedTableConfigPanel","useCallback","jsx","IconButton"],"mappings":";;;;;;;AAcO,MAAM,4BAA4B,CAAC;AAAA,EACxC,2BAAA;AAAA,EACA,UAAa,GAAA,aAAA;AAAA,EACb,WAAA;AAAA,EACA,MAAA;AAAA,EACA,IAAO,GAAA,UAAA;AAAA,EACP,wBAAA;AAAA,EACA,SAAY,GAAA,SAAA;AAAA,EACZ,QAAA;AAAA,EACA,GAAGA;AACL,CAAsC,KAAA;AACpC,EAAM,MAAA,EAAE,0BAA2B,EAAA,GAAIC,mDAA0B,CAAA;AAAA,IAC/D,2BAAA;AAAA,IACA,WAAA;AAAA,IACA,MAAA;AAAA,IACA,wBAAA;AAAA,IACA;AAAA,GACD,CAAA;AAED,EAAM,MAAA,WAAA,GAAcC,kBAAY,MAAM;AACpC,IAA2B,0BAAA,EAAA;AAAA,GAC7B,EAAG,CAAC,0BAA0B,CAAC,CAAA;AAE/B,EACE,uBAAAC,cAAA;AAAA,IAACC,wBAAA;AAAA,IAAA;AAAA,MACE,GAAGJ,gBAAAA;AAAA,MACJ,UAAA;AAAA,MACA,aAAY,EAAA,gBAAA;AAAA,MACZ,IAAA;AAAA,MACA,OAAS,EAAA,WAAA;AAAA,MACT,SAAA;AAAA,MACA,IAAM,EAAA;AAAA;AAAA,GACR;AAEJ;;;;"}

package/cjs/tabbed-table-config-panel/useTabbedTableConfigPanel.js

@@ -0,0 +1,49 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var vuuUiControls = require('@vuu-ui/vuu-ui-controls');
+var TabbedTableConfigPanel = require('./TabbedTableConfigPanel.js');
+
+const useTabbedTableConfigPanel = ({
+  allowCreateCalculatedColumn,
+  columnModel,
+  config,
+  onDisplayAttributeChange,
+  vuuTable
+}) => {
+  const showContextPanel = vuuUiControls.useContextPanel();
+  const contextPanelShowing = react.useRef(false);
+  const showTabbedTableConfigPanel = react.useCallback(
+    (title = "Table settings") => {
+      contextPanelShowing.current = true;
+      showContextPanel(
+        /* @__PURE__ */ jsxRuntime.jsx(
+          TabbedTableConfigPanel.TabbedTableConfigPanel,
+          {
+            allowCreateCalculatedColumn,
+            columnModel,
+            config,
+            onDisplayAttributeChange,
+            vuuTable
+          }
+        ),
+        title
+      );
+    },
+    [
+      allowCreateCalculatedColumn,
+      columnModel,
+      config,
+      onDisplayAttributeChange,
+      showContextPanel,
+      vuuTable
+    ]
+  );
+  return {
+    showTabbedTableConfigPanel
+  };
+};
+
+exports.useTabbedTableConfigPanel = useTabbedTableConfigPanel;
+//# sourceMappingURL=useTabbedTableConfigPanel.js.map

package/cjs/tabbed-table-config-panel/useTabbedTableConfigPanel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useTabbedTableConfigPanel.js","sources":["../../../../packages/vuu-table-extras/src/tabbed-table-config-panel/useTabbedTableConfigPanel.tsx"],"sourcesContent":["import { useCallback, useRef } from \"react\";\nimport { useContextPanel } from \"@vuu-ui/vuu-ui-controls\";\nimport { TabbedTableConfigPanel } from \"./TabbedTableConfigPanel\";\nimport { TableSettingsPanelProps } from \"../table-settings-panel/TableSettingsPanel\";\nimport { TableProps } from \"@vuu-ui/vuu-table\";\nimport { ColumnPickerProps } from \"../column-picker/ColumnPicker\";\nimport { VuuTable } from \"@vuu-ui/vuu-protocol-types\";\n\nexport interface TabbedTableConfigPanelHookProps\n  extends Pick<\n      ColumnPickerProps,\n      \"allowCreateCalculatedColumn\" | \"columnModel\"\n    >,\n    Pick<TableSettingsPanelProps, \"onDisplayAttributeChange\">,\n    Pick<TableProps, \"config\"> {\n  /**\n   * only required for calculated columns\n   */\n  vuuTable?: VuuTable;\n}\n\nexport const useTabbedTableConfigPanel = ({\n  allowCreateCalculatedColumn,\n  columnModel,\n  config,\n  onDisplayAttributeChange,\n  vuuTable,\n}: TabbedTableConfigPanelHookProps) => {\n  const showContextPanel = useContextPanel();\n  //   const hideContextPanel = useHideContextPanel();\n  const contextPanelShowing = useRef(false);\n\n  const showTabbedTableConfigPanel = useCallback(\n    (title = \"Table settings\") => {\n      contextPanelShowing.current = true;\n      showContextPanel(\n        <TabbedTableConfigPanel\n          allowCreateCalculatedColumn={allowCreateCalculatedColumn}\n          columnModel={columnModel}\n          config={config}\n          onDisplayAttributeChange={onDisplayAttributeChange}\n          vuuTable={vuuTable}\n        />,\n        title,\n      );\n    },\n    [\n      allowCreateCalculatedColumn,\n      columnModel,\n      config,\n      onDisplayAttributeChange,\n      showContextPanel,\n      vuuTable,\n    ],\n  );\n\n  return {\n    showTabbedTableConfigPanel,\n  };\n};\n"],"names":["useContextPanel","useRef","useCallback","jsx","TabbedTableConfigPanel"],"mappings":";;;;;;;AAqBO,MAAM,4BAA4B,CAAC;AAAA,EACxC,2BAAA;AAAA,EACA,WAAA;AAAA,EACA,MAAA;AAAA,EACA,wBAAA;AAAA,EACA;AACF,CAAuC,KAAA;AACrC,EAAA,MAAM,mBAAmBA,6BAAgB,EAAA;AAEzC,EAAM,MAAA,mBAAA,GAAsBC,aAAO,KAAK,CAAA;AAExC,EAAA,MAAM,0BAA6B,GAAAC,iBAAA;AAAA,IACjC,CAAC,QAAQ,gBAAqB,KAAA;AAC5B,MAAA,mBAAA,CAAoB,OAAU,GAAA,IAAA;AAC9B,MAAA,gBAAA;AAAA,wBACEC,cAAA;AAAA,UAACC,6CAAA;AAAA,UAAA;AAAA,YACC,2BAAA;AAAA,YACA,WAAA;AAAA,YACA,MAAA;AAAA,YACA,wBAAA;AAAA,YACA;AAAA;AAAA,SACF;AAAA,QACA;AAAA,OACF;AAAA,KACF;AAAA,IACA;AAAA,MACE,2BAAA;AAAA,MACA,WAAA;AAAA,MACA,MAAA;AAAA,MACA,wBAAA;AAAA,MACA,gBAAA;AAAA,MACA;AAAA;AACF,GACF;AAEA,EAAO,OAAA;AAAA,IACL;AAAA,GACF;AACF;;;;"}

package/cjs/table-footer/TableFooter.css.js

@@ -0,0 +1,6 @@
+'use strict';
+
+var tableFooterCss = ".vuuTableFooter {\n    background-color: var(--salt-container-secondary-background);\n    display: grid;\n    --table-footer-height: var(--vuuTableFooter-height, 32px);\n    flex: 0 0 var(--table-footer-height);\n    grid-template-areas: \"panel-start panel-center panel-end\";\n    grid-template-columns: 1fr 1fr 1fr;\n    grid-template-rows: auto;\n\n    height: var(--table-footer-height);\n\n    .vuuTableFooterTray {\n        align-items: center;\n        display: flex;\n        justify-self: end;;\n        margin: 0 var(--salt-spacing-200);\n        grid-area: panel-end;\n  }\n\n}\n";
+
+module.exports = tableFooterCss;
+//# sourceMappingURL=TableFooter.css.js.map

package/cjs/table-footer/TableFooter.css.js.map

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

package/cjs/table-footer/TableFooter.js

@@ -0,0 +1,34 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var cx = require('clsx');
+var styles = require('@salt-ds/styles');
+var window = require('@salt-ds/window');
+var TableFooter$1 = require('./TableFooter.css.js');
+
+const classBase = "vuuTableFooter";
+const TableFooterTray = ({ children }) => {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: `${classBase}Tray`, children });
+};
+const TableFooter = ({
+  children,
+  className,
+  onInvokeAction,
+  tooltrayActions,
+  ...htmlAttributes
+}) => {
+  const targetWindow = window.useWindow();
+  styles.useComponentCssInjection({
+    testId: "vuu-table-footer",
+    css: TableFooter$1,
+    window: targetWindow
+  });
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { ...htmlAttributes, className: cx(classBase, className), children: [
+    children,
+    tooltrayActions ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: `${classBase}-tooltray`, children: tooltrayActions }) : null
+  ] });
+};
+
+exports.TableFooter = TableFooter;
+exports.TableFooterTray = TableFooterTray;
+//# sourceMappingURL=TableFooter.js.map

package/cjs/table-footer/TableFooter.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableFooter.js","sources":["../../../../packages/vuu-table-extras/src/table-footer/TableFooter.tsx"],"sourcesContent":["import cx from \"clsx\";\nimport { HTMLAttributes, ReactNode } from \"react\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\n\nimport tableFooterCss from \"./TableFooter.css\";\n\nexport interface TableFooterProps extends HTMLAttributes<HTMLDivElement> {\n  onInvokeAction?: (action: string) => void;\n  tooltrayActions?: ReactNode;\n}\n\nconst classBase = \"vuuTableFooter\";\n\nexport const TableFooterTray = ({ children }: { children: ReactNode }) => {\n  return <div className={`${classBase}Tray`}>{children}</div>;\n};\n\nexport const TableFooter = ({\n  children,\n  className,\n  onInvokeAction,\n  tooltrayActions,\n  ...htmlAttributes\n}: TableFooterProps) => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-table-footer\",\n    css: tableFooterCss,\n    window: targetWindow,\n  });\n\n  return (\n    <div {...htmlAttributes} className={cx(classBase, className)}>\n      {children}\n      {tooltrayActions ? (\n        <div className={`${classBase}-tooltray`}>{tooltrayActions}</div>\n      ) : null}\n    </div>\n  );\n};\n"],"names":["useWindow","useComponentCssInjection","tableFooterCss","jsxs"],"mappings":";;;;;;;;AAYA,MAAM,SAAY,GAAA,gBAAA;AAEX,MAAM,eAAkB,GAAA,CAAC,EAAE,QAAA,EAAwC,KAAA;AACxE,EAAA,sCAAQ,KAAI,EAAA,EAAA,SAAA,EAAW,CAAG,EAAA,SAAS,QAAS,QAAS,EAAA,CAAA;AACvD;AAEO,MAAM,cAAc,CAAC;AAAA,EAC1B,QAAA;AAAA,EACA,SAAA;AAAA,EACA,cAAA;AAAA,EACA,eAAA;AAAA,EACA,GAAG;AACL,CAAwB,KAAA;AACtB,EAAA,MAAM,eAAeA,gBAAU,EAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,kBAAA;AAAA,IACR,GAAK,EAAAC,aAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EACE,uBAAAC,eAAA,CAAC,SAAK,GAAG,cAAA,EAAgB,WAAW,EAAG,CAAA,SAAA,EAAW,SAAS,CACxD,EAAA,QAAA,EAAA;AAAA,IAAA,QAAA;AAAA,IACA,eAAA,kCACE,KAAI,EAAA,EAAA,SAAA,EAAW,GAAG,SAAS,CAAA,SAAA,CAAA,EAAc,2BAAgB,CACxD,GAAA;AAAA,GACN,EAAA,CAAA;AAEJ;;;;;"}

package/cjs/{table-column-settings → table-settings-panel}/TableSettingsPanel.css.js

@@ -1,6 +1,6 @@
 'use strict';
 
-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    border-top: solid 2px var(--vuu-color-gray-30);\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";
+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";
 
 module.exports = tableSettingsPanelCss;
 //# sourceMappingURL=TableSettingsPanel.css.js.map

package/cjs/{table-column-settings → table-settings-panel}/TableSettingsPanel.js

@@ -4,38 +4,24 @@ var jsxRuntime = require('react/jsx-runtime');
 var core = require('@salt-ds/core');
 var styles = require('@salt-ds/styles');
 var window = require('@salt-ds/window');
-var ColumnList = require('../column-list/ColumnList.js');
 var useTableSettings = require('./useTableSettings.js');
 var vuuUiControls = require('@vuu-ui/vuu-ui-controls');
-var cx = require('clsx');
 var TableSettingsPanel$1 = require('./TableSettingsPanel.css.js');
 
 const classBase = "vuuTableSettingsPanel";
 const defaultTableSettingsPermissions = {
   allowColumnLabelCase: true,
   allowColumnDefaultWidth: true,
-  allowGridSeparators: true,
-  allowReorderColumns: true,
-  allowRemoveColumns: true,
-  allowHideColumns: true,
-  allowCalculatedColumns: true
+  allowGridSeparators: true
 };
 const noTableSettingsPermissions = {
   allowColumnLabelCase: false,
   allowColumnDefaultWidth: false,
-  allowGridSeparators: false,
-  allowReorderColumns: false,
-  allowRemoveColumns: false,
-  allowHideColumns: false,
-  allowCalculatedColumns: false
+  allowGridSeparators: false
 };
 const TableSettingsPanel = ({
-  availableColumns,
-  onAddCalculatedColumn,
-  onConfigChange,
-  onDataSourceConfigChange,
-  onNavigateToColumn,
-  tableConfig: tableConfigProp,
+  onDisplayAttributeChange,
+  tableDisplayAttributes: tableDisplayAttributesProp,
   permissions: permissionsProp
 }) => {
   const targetWindow = window.useWindow();
@@ -46,34 +32,27 @@ const TableSettingsPanel = ({
   });
   const permissions = permissionsProp === void 0 || permissionsProp === true ? defaultTableSettingsPermissions : permissionsProp === false ? noTableSettingsPermissions : permissionsProp;
   const {
-    columnItems,
     columnLabelsValue,
     onChangeColumnLabels,
     onChangeTableAttribute,
-    onReorderColumnItems,
-    onColumnChange,
     onCommitColumnWidth,
-    tableConfig
+    tableDisplayAttributes
   } = useTableSettings.useTableSettings({
-    availableColumns,
-    onConfigChange,
-    onDataSourceConfigChange,
-    tableConfig: tableConfigProp
+    onDisplayAttributeChange,
+    tableDisplayAttributes: tableDisplayAttributesProp
   });
   const {
     allowColumnLabelCase = true,
     allowColumnDefaultWidth = true,
-    allowGridSeparators = true,
-    allowCalculatedColumns = true,
-    ...columnListPermissions
+    allowGridSeparators = true
   } = permissions;
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: classBase, children: [
-    allowColumnLabelCase || allowColumnDefaultWidth || allowGridSeparators ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: `${classBase}-header`, children: /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Column Settings" }) }) : null,
     allowColumnDefaultWidth ? /* @__PURE__ */ jsxRuntime.jsxs(core.FormField, { children: [
       /* @__PURE__ */ jsxRuntime.jsx(core.FormFieldLabel, { children: "Column Width" }),
       /* @__PURE__ */ jsxRuntime.jsx(
         vuuUiControls.VuuInput,
         {
+          bordered: true,
           className: "vuuInput",
           "data-embedded": true,
           onCommit: onCommitColumnWidth
@@ -102,7 +81,7 @@ const TableSettingsPanel = ({
         /* @__PURE__ */ jsxRuntime.jsx(
           core.ToggleButton,
           {
-            selected: tableConfig.zebraStripes ?? false,
+            selected: tableDisplayAttributes.zebraStripes ?? false,
             onChange: onChangeTableAttribute,
             value: "zebraStripes",
             children: /* @__PURE__ */ jsxRuntime.jsx(vuuUiControls.Icon, { name: "row-striping", size: 16 })
@@ -111,7 +90,7 @@ const TableSettingsPanel = ({
         /* @__PURE__ */ jsxRuntime.jsx(
           core.ToggleButton,
           {
-            selected: tableConfig.rowSeparators ?? false,
+            selected: tableDisplayAttributes.rowSeparators ?? false,
             onChange: onChangeTableAttribute,
             value: "rowSeparators",
             children: /* @__PURE__ */ jsxRuntime.jsx(vuuUiControls.Icon, { name: "row-lines", size: 16 })
@@ -120,27 +99,13 @@ const TableSettingsPanel = ({
         /* @__PURE__ */ jsxRuntime.jsx(
           core.ToggleButton,
           {
-            selected: tableConfig.columnSeparators ?? false,
+            selected: tableDisplayAttributes.columnSeparators ?? false,
             onChange: onChangeTableAttribute,
             value: "columnSeparators",
             children: /* @__PURE__ */ jsxRuntime.jsx(vuuUiControls.Icon, { name: "col-lines", size: 16 })
           }
         )
       ] })
-    ] }) : null,
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: cx(`${classBase}-columnListContainer`, "vuuScrollable"), children: /* @__PURE__ */ jsxRuntime.jsx(
-      ColumnList.ColumnList,
-      {
-        columnItems,
-        permissions: columnListPermissions,
-        onChange: onColumnChange,
-        onNavigateToColumn,
-        onReorderColumnItems
-      }
-    ) }),
-    allowCalculatedColumns ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `${classBase}-calculatedButtonbar`, children: [
-      /* @__PURE__ */ jsxRuntime.jsx(core.Button, { "data-icon": "plus", onClick: onAddCalculatedColumn }),
-      /* @__PURE__ */ jsxRuntime.jsx("span", { className: `${classBase}-calculatedLabel`, children: "Add calculated column" })
     ] }) : null
   ] });
 };

package/cjs/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":["useWindow","useComponentCssInjection","tableSettingsPanelCss","useTableSettings","jsxs","FormField","jsx","FormFieldLabel","VuuInput","ToggleButtonGroup","ToggleButton","Icon"],"mappings":"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"}

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

@@ -0,0 +1,60 @@
+'use strict';
+
+var vuuUtils = require('@vuu-ui/vuu-utils');
+var react = require('react');
+
+const useTableSettings = ({
+  onDisplayAttributeChange,
+  tableDisplayAttributes: tableDisplayAttributesProp
+}) => {
+  const [tableDisplayAttributes, setDisplayTableAttributes] = react.useState(tableDisplayAttributesProp);
+  const handleChangeColumnLabels = react.useCallback((evt) => {
+    const button = vuuUtils.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 = react.useCallback(
+    (evt) => {
+      const button = vuuUtils.queryClosest(evt.target, "button");
+      if (button) {
+        const { ariaPressed, value } = button;
+        setDisplayTableAttributes((state) => ({
+          ...state,
+          [value]: ariaPressed !== "true"
+        }));
+      }
+    },
+    []
+  );
+  const handleCommitColumnWidth = react.useCallback((_, value) => {
+    if (typeof value === "string") {
+      const columnDefaultWidth = parseInt(value);
+      if (!isNaN(columnDefaultWidth)) {
+        setDisplayTableAttributes((state) => ({
+          ...state,
+          columnDefaultWidth
+        }));
+      }
+    }
+  }, []);
+  vuuUtils.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
+  };
+};
+
+exports.useTableSettings = useTableSettings;
+//# sourceMappingURL=useTableSettings.js.map

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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"}