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

package/esm/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"],"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,GAAI,yBAA0B,CAAA;AAAA,IAC/D,2BAAA;AAAA,IACA,WAAA;AAAA,IACA,MAAA;AAAA,IACA,wBAAA;AAAA,IACA;AAAA,GACD,CAAA;AAED,EAAM,MAAA,WAAA,GAAc,YAAY,MAAM;AACpC,IAA2B,0BAAA,EAAA;AAAA,GAC7B,EAAG,CAAC,0BAA0B,CAAC,CAAA;AAE/B,EACE,uBAAA,GAAA;AAAA,IAAC,UAAA;AAAA,IAAA;AAAA,MACE,GAAGA,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/esm/tabbed-table-config-panel/useTabbedTableConfigPanel.js

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

package/esm/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":[],"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,mBAAmB,eAAgB,EAAA;AAEzC,EAAM,MAAA,mBAAA,GAAsB,OAAO,KAAK,CAAA;AAExC,EAAA,MAAM,0BAA6B,GAAA,WAAA;AAAA,IACjC,CAAC,QAAQ,gBAAqB,KAAA;AAC5B,MAAA,mBAAA,CAAoB,OAAU,GAAA,IAAA;AAC9B,MAAA,gBAAA;AAAA,wBACE,GAAA;AAAA,UAAC,sBAAA;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/esm/table-footer/TableFooter.css.js

@@ -0,0 +1,4 @@
+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";
+
+export { tableFooterCss as default };
+//# sourceMappingURL=TableFooter.css.js.map

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

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

package/esm/table-footer/TableFooter.js

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

package/esm/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":[],"mappings":";;;;;;AAYA,MAAM,SAAY,GAAA,gBAAA;AAEX,MAAM,eAAkB,GAAA,CAAC,EAAE,QAAA,EAAwC,KAAA;AACxE,EAAA,2BAAQ,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,eAAe,SAAU,EAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,kBAAA;AAAA,IACR,GAAK,EAAA,cAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EACE,uBAAA,IAAA,CAAC,SAAK,GAAG,cAAA,EAAgB,WAAW,EAAG,CAAA,SAAA,EAAW,SAAS,CACxD,EAAA,QAAA,EAAA;AAAA,IAAA,QAAA;AAAA,IACA,eAAA,uBACE,KAAI,EAAA,EAAA,SAAA,EAAW,GAAG,SAAS,CAAA,SAAA,CAAA,EAAc,2BAAgB,CACxD,GAAA;AAAA,GACN,EAAA,CAAA;AAEJ;;;;"}

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

@@ -1,4 +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    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";
 
 export { tableSettingsPanelCss as default };
 //# sourceMappingURL=TableSettingsPanel.css.js.map

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

@@ -1,39 +1,25 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { FormField, FormFieldLabel, ToggleButtonGroup, ToggleButton, Button } from '@salt-ds/core';
+import { FormField, FormFieldLabel, ToggleButtonGroup, ToggleButton } from '@salt-ds/core';
 import { useComponentCssInjection } from '@salt-ds/styles';
 import { useWindow } from '@salt-ds/window';
-import { ColumnList } from '../column-list/ColumnList.js';
 import { useTableSettings } from './useTableSettings.js';
 import { VuuInput, Icon } from '@vuu-ui/vuu-ui-controls';
-import cx from 'clsx';
 import tableSettingsPanelCss from './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 = useWindow();
@@ -44,34 +30,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({
-    availableColumns,
-    onConfigChange,
-    onDataSourceConfigChange,
-    tableConfig: tableConfigProp
+    onDisplayAttributeChange,
+    tableDisplayAttributes: tableDisplayAttributesProp
   });
   const {
     allowColumnLabelCase = true,
     allowColumnDefaultWidth = true,
-    allowGridSeparators = true,
-    allowCalculatedColumns = true,
-    ...columnListPermissions
+    allowGridSeparators = true
   } = permissions;
   return /* @__PURE__ */ jsxs("div", { className: classBase, children: [
-    allowColumnLabelCase || allowColumnDefaultWidth || allowGridSeparators ? /* @__PURE__ */ jsx("div", { className: `${classBase}-header`, children: /* @__PURE__ */ jsx("span", { children: "Column Settings" }) }) : null,
     allowColumnDefaultWidth ? /* @__PURE__ */ jsxs(FormField, { children: [
       /* @__PURE__ */ jsx(FormFieldLabel, { children: "Column Width" }),
       /* @__PURE__ */ jsx(
         VuuInput,
         {
+          bordered: true,
           className: "vuuInput",
           "data-embedded": true,
           onCommit: onCommitColumnWidth
@@ -100,7 +79,7 @@ const TableSettingsPanel = ({
         /* @__PURE__ */ jsx(
           ToggleButton,
           {
-            selected: tableConfig.zebraStripes ?? false,
+            selected: tableDisplayAttributes.zebraStripes ?? false,
             onChange: onChangeTableAttribute,
             value: "zebraStripes",
             children: /* @__PURE__ */ jsx(Icon, { name: "row-striping", size: 16 })
@@ -109,7 +88,7 @@ const TableSettingsPanel = ({
         /* @__PURE__ */ jsx(
           ToggleButton,
           {
-            selected: tableConfig.rowSeparators ?? false,
+            selected: tableDisplayAttributes.rowSeparators ?? false,
             onChange: onChangeTableAttribute,
             value: "rowSeparators",
             children: /* @__PURE__ */ jsx(Icon, { name: "row-lines", size: 16 })
@@ -118,27 +97,13 @@ const TableSettingsPanel = ({
         /* @__PURE__ */ jsx(
           ToggleButton,
           {
-            selected: tableConfig.columnSeparators ?? false,
+            selected: tableDisplayAttributes.columnSeparators ?? false,
             onChange: onChangeTableAttribute,
             value: "columnSeparators",
             children: /* @__PURE__ */ jsx(Icon, { name: "col-lines", size: 16 })
           }
         )
       ] })
-    ] }) : null,
-    /* @__PURE__ */ jsx("div", { className: cx(`${classBase}-columnListContainer`, "vuuScrollable"), children: /* @__PURE__ */ jsx(
-      ColumnList,
-      {
-        columnItems,
-        permissions: columnListPermissions,
-        onChange: onColumnChange,
-        onNavigateToColumn,
-        onReorderColumnItems
-      }
-    ) }),
-    allowCalculatedColumns ? /* @__PURE__ */ jsxs("div", { className: `${classBase}-calculatedButtonbar`, children: [
-      /* @__PURE__ */ jsx(Button, { "data-icon": "plus", onClick: onAddCalculatedColumn }),
-      /* @__PURE__ */ jsx("span", { className: `${classBase}-calculatedLabel`, children: "Add calculated column" })
     ] }) : null
   ] });
 };

package/esm/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/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/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,22 +1,23 @@
 {
-  "version": "1.0.3",
+  "version": "2.0.0",
   "author": "heswell",
   "license": "Apache-2.0",
   "devDependencies": {
-    "@vuu-ui/vuu-filter-types": "1.0.3",
-    "@vuu-ui/vuu-protocol-types": "1.0.3"
+    "@vuu-ui/vuu-filter-types": "2.0.0",
+    "@vuu-ui/vuu-protocol-types": "2.0.0"
   },
   "dependencies": {
-    "@vuu-ui/vuu-codemirror": "1.0.3",
-    "@vuu-ui/vuu-data-react": "1.0.3",
-    "@vuu-ui/vuu-data-types": "1.0.3",
-    "@vuu-ui/vuu-table-types": "1.0.3",
-    "@vuu-ui/vuu-popups": "1.0.3",
-    "@vuu-ui/vuu-table": "1.0.3",
-    "@vuu-ui/vuu-utils": "1.0.3",
-    "@vuu-ui/vuu-ui-controls": "1.0.3",
+    "@vuu-ui/vuu-codemirror": "2.0.0",
+    "@vuu-ui/vuu-data-react": "2.0.0",
+    "@vuu-ui/vuu-data-types": "2.0.0",
+    "@vuu-ui/vuu-table-types": "2.0.0",
+    "@vuu-ui/vuu-popups": "2.0.0",
+    "@vuu-ui/vuu-table": "2.0.0",
+    "@vuu-ui/vuu-utils": "2.0.0",
+    "@vuu-ui/vuu-ui-controls": "2.0.0",
     "@lezer/lr": "1.4.2",
     "@salt-ds/core": "1.54.1",
+    "@salt-ds/lab": "1.0.0-alpha.83",
     "@salt-ds/styles": "0.2.1",
     "@salt-ds/window": "0.1.1"
   },

package/types/calculated-column/CalculatedColumnPanel.d.ts

@@ -0,0 +1,12 @@
+import { HTMLAttributes } from "react";
+import { ColumnDescriptor } from "@vuu-ui/vuu-table-types";
+import { VuuColumnDataType, VuuTable } from "@vuu-ui/vuu-protocol-types";
+import { ColumnModel } from "../column-picker/ColumnModel";
+export interface CalculatedColumnPanelProps extends HTMLAttributes<HTMLDivElement> {
+    column: ColumnDescriptor;
+    columnModel: ColumnModel;
+    onChangeColumn: (column: ColumnDescriptor) => void;
+    onChangeServerDataType?: (name: VuuColumnDataType) => void;
+    vuuTable: VuuTable;
+}
+export declare const CalculatedColumnPanel: ({ column: columnProp, columnModel, onChangeColumn, onChangeServerDataType: onChangeServerDataTypeProp, vuuTable, }: CalculatedColumnPanelProps) => import("react/jsx-runtime").JSX.Element;

package/types/calculated-column/useCalculatedColumnPanel.d.ts

@@ -0,0 +1,10 @@
+import { ColumnDescriptor } from "@vuu-ui/vuu-table-types";
+import { FormEventHandler, SyntheticEvent } from "react";
+import { CalculatedColumnPanelProps } from "./CalculatedColumnPanel";
+export type ColumnExpressionHookProps = Pick<CalculatedColumnPanelProps, "column" | "onChangeColumn" | "onChangeServerDataType">;
+export declare const useCalculatedColumnPanel: ({ column: columnProp, onChangeColumn, onChangeServerDataType: onChangeServerDataTypeProp, }: ColumnExpressionHookProps) => {
+    column: ColumnDescriptor;
+    onChangeExpression: (value: string) => void;
+    onChangeName: FormEventHandler;
+    onChangeServerDataType: (_e: SyntheticEvent, [serverDataType]: string[]) => void;
+};

package/types/calculated-column/useEditCalculatedColumn.d.ts

@@ -0,0 +1,13 @@
+import { VuuTable } from "@vuu-ui/vuu-protocol-types";
+import { ColumnDescriptor } from "@vuu-ui/vuu-table-types";
+import { ColumnModel } from "../column-picker/ColumnModel";
+export interface EditCalculatedColumnProps {
+    calculatedColumn?: ColumnDescriptor;
+    columnModel: ColumnModel;
+    onSaveColumn?: (caclulatedColumn: ColumnDescriptor) => void;
+    vuuTable?: VuuTable;
+}
+export declare const useEditCalculatedColumn: ({ calculatedColumn, columnModel, onSaveColumn, vuuTable, }: EditCalculatedColumnProps) => {
+    onCreateCalculatedColumn: () => void;
+    onEditCalculatedColumn: () => void;
+};

package/types/column-menu/ColumnMenu.d.ts

@@ -7,4 +7,4 @@ export interface ColumnMenuProps extends HTMLAttributes<HTMLSpanElement> {
     menuActionHandler?: MenuActionHandler<ColumnMenuActionType, ColumnDescriptor>;
     menuPermissions?: ColumnMenuPermissions;
 }
-export declare const ColumnMenu: ({ className, column, menuActionHandler: menuActionHandlerProp, menuPermissions: { allowSort, allowGroup, allowAggregation, allowHide, allowRemove, allowPin, allowColumnSettings, allowTableSettings, }, }: ColumnMenuProps) => import("react/jsx-runtime").JSX.Element;
+export declare const ColumnMenu: ({ className, column, menuActionHandler: menuActionHandlerProp, menuPermissions: { allowSort, allowGroup, allowAggregation, allowHide, allowRemove, allowPin, }, }: ColumnMenuProps) => import("react/jsx-runtime").JSX.Element;

package/types/column-menu/column-action-types.d.ts

@@ -1,14 +1,11 @@
 import { VuuTable } from "@vuu-ui/vuu-protocol-types";
 import { ColumnDescriptor, ColumnDisplayAction } from "@vuu-ui/vuu-table-types";
 export type ColumnDisplayActionHandler = (action: ColumnDisplayAction) => void;
-export type DisplayTableSettingsAction = {
-    type: "table-settings";
-};
 export type DisplayColumnSettingsAction = {
     type: "column-settings";
     column: ColumnDescriptor;
     /**  only for calculated columnn */
     vuuTable?: VuuTable;
 };
-export type DisplaySettingsAction = DisplayTableSettingsAction | DisplayColumnSettingsAction;
+export type DisplaySettingsAction = DisplayColumnSettingsAction;
 export type TableSettingsActionHandler = (action: DisplaySettingsAction) => void;

package/types/column-menu/column-menu-utils.d.ts

@@ -1,6 +1,6 @@
 import { Menu, MenuItem, MenuItemProps, MenuProps } from "@salt-ds/core";
 import { DataSource } from "@vuu-ui/vuu-data-types";
-import { ColumnDescriptor, TableSettingsPermissions } from "@vuu-ui/vuu-table-types";
+import { ColumnDescriptor } from "@vuu-ui/vuu-table-types";
 import { MouseEventHandler, ReactElement } from "react";
 type MenuElement = ReactElement<MenuProps, typeof Menu>;
 type MenuItemElement = ReactElement<MenuItemProps, typeof MenuItem>;
@@ -8,14 +8,13 @@ type MenuElements = Array<MenuElement | MenuItemElement>;
 export type MenuItemClickHandler = MouseEventHandler<HTMLDivElement>;
 export type DataSourceColumnMenuActionType = "agg-count" | "agg-distinct" | "agg-sum" | "agg-avg" | "agg-high" | "agg-low" | "sort-asc" | "sort-dsc" | "sort-add-asc" | "sort-add-dsc" | "remove-sort" | "group-column" | "remove-group" | "add-to-group" | "remove-from-group" | "remove-column";
 export type ColumnDisplayColumnMenuActionType = "pin-column-left" | "pin-column-right" | "unpin-column" | "hide-column";
-export type TableSettingsActionType = "column-settings" | "table-settings";
-export type ColumnMenuActionType = DataSourceColumnMenuActionType | ColumnDisplayColumnMenuActionType | TableSettingsActionType;
+export type ColumnSettingsActionType = "column-settings";
+export type ColumnMenuActionType = DataSourceColumnMenuActionType | ColumnDisplayColumnMenuActionType | ColumnSettingsActionType;
 export declare const isColumnMenuActionType: (value?: string) => value is ColumnMenuActionType;
 export declare const getColumnMenuActionType: (target: EventTarget | HTMLElement) => ColumnMenuActionType;
 export declare function buildSortMenu(column: ColumnDescriptor, dataSource: DataSource, menuActionClickHandler: MenuItemClickHandler, isAllowed?: boolean): MenuElement | null;
 export declare function buildGroupMenu(column: ColumnDescriptor, dataSource: DataSource, menuActionClickHandler: MenuItemClickHandler, isAllowed?: boolean): MenuElement | null;
 export declare const buildVisibilityMenuItems: (column: ColumnDescriptor, menuActionClickHandler: MenuItemClickHandler, allowHide?: boolean, allowRemove?: boolean) => MenuElements | null;
 export declare const buildPinMenuItems: (column: ColumnDescriptor, menuActionClickHandler: MenuItemClickHandler, isAllowed?: boolean) => MenuElements;
-export declare const buildSettingsMenuItems: (_: ColumnDescriptor, menuActionClickHandler: MenuItemClickHandler, allowColumnSettings?: boolean, allowTableSettings?: boolean | TableSettingsPermissions) => MenuElements | null;
 export declare function buildAggregationMenuItems(column: ColumnDescriptor, dataSource: DataSource, menuActionClickHandler: MenuItemClickHandler, isAllowed?: boolean): MenuElements | null;
 export {};

package/types/column-picker/ColumnModel.d.ts

@@ -2,12 +2,15 @@ import { ColumnDescriptor } from "@vuu-ui/vuu-table-types";
 import { EventEmitter, ValueOf } from "@vuu-ui/vuu-utils";
 export declare const ColumnChangeSource: {
     readonly ColumnPicker: "column-picker";
+    readonly ColumnSettings: "column-settings";
     readonly Table: "table";
 };
 export type ColumnChangeSource = ValueOf<typeof ColumnChangeSource>;
 export declare const SelectedColumnChangeType: {
+    readonly CalculatedColumnAdded: "calculated-column-added";
     readonly ColumnAdded: "column-added";
     readonly ColumnRemoved: "column-removed";
+    readonly ColumnUpdated: "column-updated";
     readonly ColumnsReordered: "columns-reordered";
 };
 export type SelectedColumnChangeType = ValueOf<typeof SelectedColumnChangeType>;
@@ -15,6 +18,14 @@ export interface SelectedColumnChangeColumnAdded {
     type: Extract<SelectedColumnChangeType, "column-added">;
     column: ColumnDescriptor;
 }
+export interface SelectedColumnChangeCalculatedColumnAdded {
+    type: Extract<SelectedColumnChangeType, "calculated-column-added">;
+    column: ColumnDescriptor;
+}
+export interface SelectedColumnChangeColumnUpdated {
+    type: Extract<SelectedColumnChangeType, "column-updated">;
+    column: ColumnDescriptor;
+}
 export interface SelectedColumnChangeColumnRemoved {
     type: Extract<SelectedColumnChangeType, "column-removed">;
     column: ColumnDescriptor;
@@ -22,9 +33,10 @@ export interface SelectedColumnChangeColumnRemoved {
 export interface SelectedColumnChangeColumnsReordered {
     type: Extract<SelectedColumnChangeType, "columns-reordered">;
 }
-export type SelectedColumnChangeDescriptor = SelectedColumnChangeColumnAdded | SelectedColumnChangeColumnRemoved | SelectedColumnChangeColumnsReordered;
+export type SelectedColumnChangeDescriptor = SelectedColumnChangeCalculatedColumnAdded | SelectedColumnChangeColumnAdded | SelectedColumnChangeColumnRemoved | SelectedColumnChangeColumnUpdated | SelectedColumnChangeColumnsReordered;
 export declare const isColumnAdded: (change?: SelectedColumnChangeDescriptor) => change is SelectedColumnChangeColumnAdded;
 export declare const isColumnRemoved: (change?: SelectedColumnChangeDescriptor) => change is SelectedColumnChangeColumnRemoved;
+export declare const isColumnUpdated: (change?: SelectedColumnChangeDescriptor) => change is SelectedColumnChangeColumnUpdated;
 export declare const isColumnsReordered: (change?: SelectedColumnChangeDescriptor) => change is SelectedColumnChangeColumnsReordered;
 export type ColumnsChangeHandler = (columns: readonly ColumnDescriptor[], changeSource: ColumnChangeSource, changeDescriptor?: SelectedColumnChangeDescriptor) => void;
 export type ColumnEvents = {
@@ -36,7 +48,7 @@ export declare class ColumnModel extends EventEmitter<ColumnEvents> {
     /**
      * All available columns, including selected columns.
      */
-    readonly allColumns: readonly ColumnDescriptor[];
+    allColumns: readonly ColumnDescriptor[];
     constructor(
     /**
      * All available columns, including selected columns.
@@ -45,14 +57,25 @@ export declare class ColumnModel extends EventEmitter<ColumnEvents> {
     /**
      * Columns already selected and rendered in Table.
      */
-    selectedColumns: ColumnDescriptor[]);
+    selectedColumns: readonly ColumnDescriptor[]);
     get availableColumns(): ColumnDescriptor[];
     set searchPattern(pattern: string);
     get searchPattern(): string;
     get selectedColumns(): readonly ColumnDescriptor[];
     setSelectedColumns(selectedColumns: ColumnDescriptor[], source: ColumnChangeSource, changeDescriptor?: SelectedColumnChangeDescriptor): void;
+    getColumn(name: string): ColumnDescriptor;
     addItemToSelectedColumns(name: string, source: ColumnChangeSource): void;
     removeItemFromSelectedColumns(name: string, source: ColumnChangeSource): void;
     reorderSelectedColumns(orderedColumnNames: string[], source: ColumnChangeSource): void;
+    updateColumn(currentColumn: ColumnDescriptor, newColumn: ColumnDescriptor): void;
+    updateColumn(column: ColumnDescriptor): void;
+    /**
+     * Used when adding a calculated column
+     *
+     * @param column
+     *
+     * @param addToSelectedColumns
+     */
+    addColumn(column: ColumnDescriptor, addToSelectedColumns?: boolean): void;
     private notifyListeners;
 }

package/types/column-picker/ColumnPicker.d.ts

@@ -1,6 +1,10 @@
-import { HTMLAttributes } from "react";
-import { ColumPickerHookProps } from "./useColumnPicker";
+import { ColumnDescriptor } from "@vuu-ui/vuu-table-types";
+import { HTMLAttributes, MouseEventHandler } from "react";
+import { ListBoxProps } from "@salt-ds/core";
+import { ColumnPickerHookProps } from "./useColumnPicker";
 export declare const classBaseListItem = "vuuColumnPickerListItem";
-export interface ColumnPickerProps extends ColumPickerHookProps, HTMLAttributes<HTMLDivElement> {
+export interface ColumnPickerProps extends ColumnPickerHookProps, Pick<ListBoxProps<ColumnDescriptor>, "selected" | "onSelectionChange">, HTMLAttributes<HTMLDivElement> {
+    allowCreateCalculatedColumn?: boolean;
+    onClickCreateCalculatedColumn?: MouseEventHandler<HTMLButtonElement>;
 }
 export declare const ColumnPicker: import("react").ForwardRefExoticComponent<ColumnPickerProps & import("react").RefAttributes<HTMLDivElement>>;

package/types/column-picker/ColumnPickerAction.d.ts

@@ -0,0 +1,5 @@
+import { IconButtonProps } from "@vuu-ui/vuu-ui-controls";
+import { ColumnPickerHookProps } from "./useColumnPicker";
+export interface ColumnPickerActionProps extends Partial<IconButtonProps>, ColumnPickerHookProps {
+}
+export declare const ColumnPickerAction: ({ appearance, columnModel, icon, sentiment, ...IconButtonProps }: ColumnPickerActionProps) => import("react/jsx-runtime").JSX.Element;

package/types/column-picker/useColumnPicker.d.ts

@@ -1,12 +1,12 @@
-import { ColumnDescriptor } from "@vuu-ui/vuu-table-types";
+import { ColumnDescriptor, TableSelectionModel } from "@vuu-ui/vuu-table-types";
 import { FormEventHandler, MouseEventHandler } from "react";
 import { ColumnModel, SelectedColumnChangeType } from "./ColumnModel";
-export type ColumnPickerAction = (column: ColumnDescriptor) => void;
+export type ColumnSelectionModel = Extract<TableSelectionModel, "none" | "single">;
 export type SelectedColumnsChangeHandler = (columns: ColumnDescriptor[], changeType: SelectedColumnChangeType) => void;
-export interface ColumPickerHookProps {
+export interface ColumnPickerHookProps {
     columnModel: ColumnModel;
 }
-export declare const useColumnPicker: ({ columnModel: model, }: ColumPickerHookProps) => {
+export declare const useColumnPicker: ({ columnModel: model, }: ColumnPickerHookProps) => {
     availableColumns: ColumnDescriptor[];
     onAddItemToSelectedList: MouseEventHandler<HTMLButtonElement>;
     onRemoveItemFromSelectedList: MouseEventHandler<HTMLButtonElement>;

package/types/column-picker/useTableColumnPicker.d.ts

@@ -0,0 +1,7 @@
+import { ColumnModel } from "./ColumnModel";
+export interface TableColumnPickerHookProps {
+    columnModel: ColumnModel;
+}
+export declare const useTableColumnPicker: ({ columnModel, }: TableColumnPickerHookProps) => {
+    showColumnPicker: (title?: string) => void;
+};