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

package/esm/column-picker/useTableColumnPicker.js

@@ -0,0 +1,33 @@
+import { jsx } from 'react/jsx-runtime';
+import { useContextPanel, useHideContextPanel } from '@vuu-ui/vuu-ui-controls';
+import { useRef, useCallback, useEffect } from 'react';
+import { ColumnPicker } from './ColumnPicker.js';
+
+const useTableColumnPicker = ({
+  columnModel
+}) => {
+  const showContextPanel = useContextPanel();
+  const hideContextPanel = useHideContextPanel();
+  const contextPanelShowing = useRef(false);
+  const showColumnPicker = useCallback(
+    (title = "Column Picker") => {
+      contextPanelShowing.current = true;
+      showContextPanel(/* @__PURE__ */ jsx(ColumnPicker, { columnModel }), title);
+    },
+    [columnModel, showContextPanel]
+  );
+  useEffect(
+    () => () => {
+      if (contextPanelShowing.current) {
+        hideContextPanel?.();
+      }
+    },
+    [hideContextPanel]
+  );
+  return {
+    showColumnPicker
+  };
+};
+
+export { useTableColumnPicker };
+//# sourceMappingURL=useTableColumnPicker.js.map

package/esm/column-picker/useTableColumnPicker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useTableColumnPicker.js","sources":["../../../../packages/vuu-table-extras/src/column-picker/useTableColumnPicker.tsx"],"sourcesContent":["import { useContextPanel, useHideContextPanel } from \"@vuu-ui/vuu-ui-controls\";\nimport { useCallback, useEffect, useRef } from \"react\";\nimport { ColumnPicker } from \"./ColumnPicker\";\nimport { ColumnModel } from \"./ColumnModel\";\n\nexport interface TableColumnPickerHookProps {\n  columnModel: ColumnModel;\n}\n\nexport const useTableColumnPicker = ({\n  columnModel,\n}: TableColumnPickerHookProps) => {\n  const showContextPanel = useContextPanel();\n  const hideContextPanel = useHideContextPanel();\n  const contextPanelShowing = useRef(false);\n\n  const showColumnPicker = useCallback(\n    (title = \"Column Picker\") => {\n      contextPanelShowing.current = true;\n      showContextPanel(<ColumnPicker columnModel={columnModel} />, title);\n    },\n    [columnModel, showContextPanel],\n  );\n\n  // TODO what's this for ?\n  useEffect(\n    () => () => {\n      if (contextPanelShowing.current) {\n        // It might already be closed, but this won't do any harm\n        hideContextPanel?.();\n      }\n    },\n    [hideContextPanel],\n  );\n\n  return {\n    showColumnPicker,\n  };\n};\n"],"names":[],"mappings":";;;;;AASO,MAAM,uBAAuB,CAAC;AAAA,EACnC;AACF,CAAkC,KAAA;AAChC,EAAA,MAAM,mBAAmB,eAAgB,EAAA;AACzC,EAAA,MAAM,mBAAmB,mBAAoB,EAAA;AAC7C,EAAM,MAAA,mBAAA,GAAsB,OAAO,KAAK,CAAA;AAExC,EAAA,MAAM,gBAAmB,GAAA,WAAA;AAAA,IACvB,CAAC,QAAQ,eAAoB,KAAA;AAC3B,MAAA,mBAAA,CAAoB,OAAU,GAAA,IAAA;AAC9B,MAAA,gBAAA,iBAAkB,GAAA,CAAA,YAAA,EAAA,EAAa,WAA0B,EAAA,CAAA,EAAI,KAAK,CAAA;AAAA,KACpE;AAAA,IACA,CAAC,aAAa,gBAAgB;AAAA,GAChC;AAGA,EAAA,SAAA;AAAA,IACE,MAAM,MAAM;AACV,MAAA,IAAI,oBAAoB,OAAS,EAAA;AAE/B,QAAmB,gBAAA,IAAA;AAAA;AACrB,KACF;AAAA,IACA,CAAC,gBAAgB;AAAA,GACnB;AAEA,EAAO,OAAA;AAAA,IACL;AAAA,GACF;AACF;;;;"}

package/esm/column-settings-panel/ColumnNameLabel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColumnNameLabel.js","sources":["../../../../packages/vuu-table-extras/src/column-settings-panel/ColumnNameLabel.tsx"],"sourcesContent":["import { ColumnDescriptor } from \"@vuu-ui/vuu-table-types\";\nimport cx from \"clsx\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport {\n  getCalculatedColumnDetails,\n  isCalculatedColumn,\n} from \"@vuu-ui/vuu-utils\";\nimport { MouseEventHandler } from \"react\";\n\nimport columnNameLabelCss from \"./ColumnNameLabel.css\";\n\nconst classBase = \"vuuColumnNameLabel\";\n\nexport interface ColumnNameLabelProps {\n  column: ColumnDescriptor;\n  onClick?: MouseEventHandler;\n}\n\nexport const ColumnNameLabel = ({ column, onClick }: ColumnNameLabelProps) => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-column-label\",\n    css: columnNameLabelCss,\n    window: targetWindow,\n  });\n\n  if (isCalculatedColumn(column.name)) {\n    const { name, serverDataType, expression } =\n      getCalculatedColumnDetails(column);\n    const displayName = name || \"name\";\n    const displayExpression = \"=expression\";\n\n    const nameClass =\n      displayName === \"name\" ? `${classBase}-placeholder` : undefined;\n    const expressionClass =\n      expression === \"\" ? `${classBase}-placeholder` : undefined;\n    return (\n      <div\n        className={cx(classBase, `${classBase}-calculated`)}\n        onClick={onClick}\n      >\n        <span className={nameClass}>{displayName}</span>\n        <span>:</span>\n        <span>{serverDataType || \"string\"}</span>\n        <span>:</span>\n        <span className={expressionClass}>{displayExpression}</span>\n        <span className={`${classBase}-edit`} data-icon=\"edit\" />\n      </div>\n    );\n  } else {\n    return <div className={classBase}>{column.name}</div>;\n  }\n};\n"],"names":[],"mappings":";;;;;;;AAYA,MAAM,SAAY,GAAA,oBAAA;AAOX,MAAM,eAAkB,GAAA,CAAC,EAAE,MAAA,EAAQ,SAAoC,KAAA;AAC5E,EAAA,MAAM,eAAe,SAAU,EAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,kBAAA;AAAA,IACR,GAAK,EAAA,kBAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EAAI,IAAA,kBAAA,CAAmB,MAAO,CAAA,IAAI,CAAG,EAAA;AACnC,IAAA,MAAM,EAAE,IAAM,EAAA,cAAA,EAAgB,UAAW,EAAA,GACvC,2BAA2B,MAAM,CAAA;AACnC,IAAA,MAAM,cAAc,IAAQ,IAAA,MAAA;AAC5B,IAAA,MAAM,iBAAoB,GAAA,aAAA;AAE1B,IAAA,MAAM,SACJ,GAAA,WAAA,KAAgB,MAAS,GAAA,CAAA,EAAG,SAAS,CAAiB,YAAA,CAAA,GAAA,KAAA,CAAA;AACxD,IAAA,MAAM,eACJ,GAAA,UAAA,KAAe,EAAK,GAAA,CAAA,EAAG,SAAS,CAAiB,YAAA,CAAA,GAAA,KAAA,CAAA;AACnD,IACE,uBAAA,IAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,SAAW,EAAA,EAAA,CAAG,SAAW,EAAA,CAAA,EAAG,SAAS,CAAa,WAAA,CAAA,CAAA;AAAA,QAClD,OAAA;AAAA,QAEA,QAAA,EAAA;AAAA,0BAAC,GAAA,CAAA,MAAA,EAAA,EAAK,SAAW,EAAA,SAAA,EAAY,QAAY,EAAA,WAAA,EAAA,CAAA;AAAA,0BACzC,GAAA,CAAC,UAAK,QAAC,EAAA,GAAA,EAAA,CAAA;AAAA,0BACP,GAAA,CAAC,MAAM,EAAA,EAAA,QAAA,EAAA,cAAA,IAAkB,QAAS,EAAA,CAAA;AAAA,0BAClC,GAAA,CAAC,UAAK,QAAC,EAAA,GAAA,EAAA,CAAA;AAAA,0BACN,GAAA,CAAA,MAAA,EAAA,EAAK,SAAW,EAAA,eAAA,EAAkB,QAAkB,EAAA,iBAAA,EAAA,CAAA;AAAA,8BACpD,MAAK,EAAA,EAAA,SAAA,EAAW,GAAG,SAAS,CAAA,KAAA,CAAA,EAAS,aAAU,MAAO,EAAA;AAAA;AAAA;AAAA,KACzD;AAAA,GAEG,MAAA;AACL,IAAA,uBAAQ,GAAA,CAAA,KAAA,EAAA,EAAI,SAAW,EAAA,SAAA,EAAY,iBAAO,IAAK,EAAA,CAAA;AAAA;AAEnD;;;;"}

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

@@ -1,4 +1,4 @@
-var colunSettingsPanelCss = ".vuuColumnSettingsPanel {\n    --vuu-svg-align-left: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\"><path d=\"M9.33333 10H2.66667C2.3 10 2 10.3 2 10.6667C2 11.0333 2.3 11.3333 2.66667 11.3333H9.33333C9.7 11.3333 10 11.0333 10 10.6667C10 10.3 9.7 10 9.33333 10ZM9.33333 4.66667H2.66667C2.3 4.66667 2 4.96667 2 5.33333C2 5.7 2.3 6 2.66667 6H9.33333C9.7 6 10 5.7 10 5.33333C10 4.96667 9.7 4.66667 9.33333 4.66667ZM2.66667 8.66667H13.3333C13.7 8.66667 14 8.36667 14 8C14 7.63333 13.7 7.33333 13.3333 7.33333H2.66667C2.3 7.33333 2 7.63333 2 8C2 8.36667 2.3 8.66667 2.66667 8.66667ZM2.66667 14H13.3333C13.7 14 14 13.7 14 13.3333C14 12.9667 13.7 12.6667 13.3333 12.6667H2.66667C2.3 12.6667 2 12.9667 2 13.3333C2 13.7 2.3 14 2.66667 14ZM2 2.66667C2 3.03333 2.3 3.33333 2.66667 3.33333H13.3333C13.7 3.33333 14 3.03333 14 2.66667C14 2.3 13.7 2 13.3333 2H2.66667C2.3 2 2 2.3 2 2.66667Z\" /></svg>');\n    --vuu-svg-align-right: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\"><path d=\"M2.66667 14H13.3333C13.7 14 14 13.7 14 13.3333C14 12.9667 13.7 12.6667 13.3333 12.6667H2.66667C2.3 12.6667 2 12.9667 2 13.3333C2 13.7 2.3 14 2.66667 14ZM6.66667 11.3333H13.3333C13.7 11.3333 14 11.0333 14 10.6667C14 10.3 13.7 10 13.3333 10H6.66667C6.3 10 6 10.3 6 10.6667C6 11.0333 6.3 11.3333 6.66667 11.3333ZM2.66667 8.66667H13.3333C13.7 8.66667 14 8.36667 14 8C14 7.63333 13.7 7.33333 13.3333 7.33333H2.66667C2.3 7.33333 2 7.63333 2 8C2 8.36667 2.3 8.66667 2.66667 8.66667ZM6.66667 6H13.3333C13.7 6 14 5.7 14 5.33333C14 4.96667 13.7 4.66667 13.3333 4.66667H6.66667C6.3 4.66667 6 4.96667 6 5.33333C6 5.7 6.3 6 6.66667 6ZM2 2.66667C2 3.03333 2.3 3.33333 2.66667 3.33333H13.3333C13.7 3.33333 14 3.03333 14 2.66667C14 2.3 13.7 2 13.3333 2H2.66667C2.3 2 2 2.3 2 2.66667Z\" /></svg>');\n    --vuu-svg-pin-left: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\"><path d=\"M7.33333 9.86V8.66666H13.3333C13.7 8.66666 14 8.36666 14 8C14 7.63333 13.7 7.33333 13.3333 7.33333L7.33333 7.33333V6.14C7.33333 5.84 6.97333 5.69333 6.76667 5.90666L4.90667 7.76666C4.77333 7.89999 4.77333 8.10666 4.90667 8.24L6.76667 10.1C6.97333 10.3067 7.33333 10.16 7.33333 9.86ZM2.66667 13.3333C3.03333 13.3333 3.33333 13.0333 3.33333 12.6667L3.33333 3.33333C3.33333 2.96666 3.03333 2.66666 2.66667 2.66666C2.3 2.66666 2 2.96666 2 3.33333L2 12.6667C2 13.0333 2.3 13.3333 2.66667 13.3333Z\" /></svg>');\n    --vuu-svg-pin-float: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\"><path d=\"M6 4.66667H4.66667V6H6V4.66667ZM6 7.33333H4.66667V8.66667H6V7.33333ZM6 2C5.26 2 4.66667 2.6 4.66667 3.33333H6V2ZM8.66667 10H7.33333V11.3333H8.66667V10ZM12.6667 2V3.33333H14C14 2.6 13.4 2 12.6667 2ZM8.66667 2H7.33333V3.33333H8.66667V2ZM6 11.3333V10H4.66667C4.66667 10.7333 5.26 11.3333 6 11.3333ZM12.6667 8.66667H14V7.33333H12.6667V8.66667ZM12.6667 6H14V4.66667H12.6667V6ZM12.6667 11.3333C13.4 11.3333 14 10.7333 14 10H12.6667V11.3333ZM2.66667 4.66667C2.3 4.66667 2 4.96667 2 5.33333V12.6667C2 13.4 2.6 14 3.33333 14H10.6667C11.0333 14 11.3333 13.7 11.3333 13.3333C11.3333 12.9667 11.0333 12.6667 10.6667 12.6667H4C3.63333 12.6667 3.33333 12.3667 3.33333 12V5.33333C3.33333 4.96667 3.03333 4.66667 2.66667 4.66667ZM10 3.33333H11.3333V2H10V3.33333ZM10 11.3333H11.3333V10H10V11.3333Z\" /></svg>');\n    --vuu-svg-pin-right: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\"><path d=\"M8.66667 6.14V7.33333H2.66667C2.3 7.33333 2 7.63333 2 8C2 8.36666 2.3 8.66666 2.66667 8.66666H8.66667V9.86C8.66667 10.16 9.02667 10.3067 9.23333 10.0933L11.0933 8.23333C11.2267 8.1 11.2267 7.89333 11.0933 7.76L9.23333 5.9C9.02667 5.69333 8.66667 5.84 8.66667 6.14ZM13.3333 13.3333C13.7 13.3333 14 13.0333 14 12.6667V3.33333C14 2.96666 13.7 2.66666 13.3333 2.66666C12.9667 2.66666 12.6667 2.96666 12.6667 3.33333V12.6667C12.6667 13.0333 12.9667 13.3333 13.3333 13.3333Z\"/></svg>');\n    --vuuDropdown-height: 24px;\n    --vuuDropdown-width: 100%;\n    \n    display: flex;\n    flex-direction: column;\n    gap: 24px;\n    height: 100%;\n    padding-top: 24px;\n}\n\n.vuuColumnSettingsPanel-header {\n  border-top: solid 2px var(--vuu-color-gray-30);\n  font-size: 14px;\n  font-weight: 600;\n  padding: 24px 2px 0 2px;\n}\n\n\n.vuuColumnSettingsPanel-buttonBar {\n  align-items: center;\n  display: flex;\n  justify-content: space-between;\n  margin-top: auto;\n}\n\n.vuuColumnSettingsPanel-buttonBar[data-align=\"right\"]{\n  gap: 6px;\n  justify-content: flex-end;\n}\n\n.vuuColumnSettingsPanel-buttonNavPrev {\n  --vuu-icon-left: 6px;\n  padding-left: 24px\n}\n\n.vuuColumnSettingsPanel-buttonNavNext {\n  --vuu-icon-left: calc(100% - 18px);\n  padding-right: 24px\n}\n\n\n\n[data-icon='align-left'] {\n    --vuu-icon-svg: var(--vuu-svg-align-left);\n  }\n\n  [data-icon='align-right'] {\n    --vuu-icon-svg: var(--vuu-svg-align-right);\n  }\n\n  [data-icon='pin-left'] {\n    --vuu-icon-svg: var(--vuu-svg-pin-left);\n  }\n  [data-icon='pin-float'] {\n    --vuu-icon-svg: var(--vuu-svg-pin-float);\n  }\n  [data-icon='pin-right'] {\n    --vuu-icon-svg: var(--vuu-svg-pin-right);\n  }\n\n  .vuuColumnSettingsPanel-editing .vuuColumnNameLabel-edit {\n    display: none;\n  }\n  \n\n\n  \n  \n  \n  \n  \n";
+var colunSettingsPanelCss = ".vuuColumnSettingsPanel {\n    --vuu-svg-align-left: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\"><path d=\"M9.33333 10H2.66667C2.3 10 2 10.3 2 10.6667C2 11.0333 2.3 11.3333 2.66667 11.3333H9.33333C9.7 11.3333 10 11.0333 10 10.6667C10 10.3 9.7 10 9.33333 10ZM9.33333 4.66667H2.66667C2.3 4.66667 2 4.96667 2 5.33333C2 5.7 2.3 6 2.66667 6H9.33333C9.7 6 10 5.7 10 5.33333C10 4.96667 9.7 4.66667 9.33333 4.66667ZM2.66667 8.66667H13.3333C13.7 8.66667 14 8.36667 14 8C14 7.63333 13.7 7.33333 13.3333 7.33333H2.66667C2.3 7.33333 2 7.63333 2 8C2 8.36667 2.3 8.66667 2.66667 8.66667ZM2.66667 14H13.3333C13.7 14 14 13.7 14 13.3333C14 12.9667 13.7 12.6667 13.3333 12.6667H2.66667C2.3 12.6667 2 12.9667 2 13.3333C2 13.7 2.3 14 2.66667 14ZM2 2.66667C2 3.03333 2.3 3.33333 2.66667 3.33333H13.3333C13.7 3.33333 14 3.03333 14 2.66667C14 2.3 13.7 2 13.3333 2H2.66667C2.3 2 2 2.3 2 2.66667Z\" /></svg>');\n    --vuu-svg-align-right: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\"><path d=\"M2.66667 14H13.3333C13.7 14 14 13.7 14 13.3333C14 12.9667 13.7 12.6667 13.3333 12.6667H2.66667C2.3 12.6667 2 12.9667 2 13.3333C2 13.7 2.3 14 2.66667 14ZM6.66667 11.3333H13.3333C13.7 11.3333 14 11.0333 14 10.6667C14 10.3 13.7 10 13.3333 10H6.66667C6.3 10 6 10.3 6 10.6667C6 11.0333 6.3 11.3333 6.66667 11.3333ZM2.66667 8.66667H13.3333C13.7 8.66667 14 8.36667 14 8C14 7.63333 13.7 7.33333 13.3333 7.33333H2.66667C2.3 7.33333 2 7.63333 2 8C2 8.36667 2.3 8.66667 2.66667 8.66667ZM6.66667 6H13.3333C13.7 6 14 5.7 14 5.33333C14 4.96667 13.7 4.66667 13.3333 4.66667H6.66667C6.3 4.66667 6 4.96667 6 5.33333C6 5.7 6.3 6 6.66667 6ZM2 2.66667C2 3.03333 2.3 3.33333 2.66667 3.33333H13.3333C13.7 3.33333 14 3.03333 14 2.66667C14 2.3 13.7 2 13.3333 2H2.66667C2.3 2 2 2.3 2 2.66667Z\" /></svg>');\n    --vuu-svg-pin-left: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\"><path d=\"M7.33333 9.86V8.66666H13.3333C13.7 8.66666 14 8.36666 14 8C14 7.63333 13.7 7.33333 13.3333 7.33333L7.33333 7.33333V6.14C7.33333 5.84 6.97333 5.69333 6.76667 5.90666L4.90667 7.76666C4.77333 7.89999 4.77333 8.10666 4.90667 8.24L6.76667 10.1C6.97333 10.3067 7.33333 10.16 7.33333 9.86ZM2.66667 13.3333C3.03333 13.3333 3.33333 13.0333 3.33333 12.6667L3.33333 3.33333C3.33333 2.96666 3.03333 2.66666 2.66667 2.66666C2.3 2.66666 2 2.96666 2 3.33333L2 12.6667C2 13.0333 2.3 13.3333 2.66667 13.3333Z\" /></svg>');\n    --vuu-svg-pin-float: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\"><path d=\"M6 4.66667H4.66667V6H6V4.66667ZM6 7.33333H4.66667V8.66667H6V7.33333ZM6 2C5.26 2 4.66667 2.6 4.66667 3.33333H6V2ZM8.66667 10H7.33333V11.3333H8.66667V10ZM12.6667 2V3.33333H14C14 2.6 13.4 2 12.6667 2ZM8.66667 2H7.33333V3.33333H8.66667V2ZM6 11.3333V10H4.66667C4.66667 10.7333 5.26 11.3333 6 11.3333ZM12.6667 8.66667H14V7.33333H12.6667V8.66667ZM12.6667 6H14V4.66667H12.6667V6ZM12.6667 11.3333C13.4 11.3333 14 10.7333 14 10H12.6667V11.3333ZM2.66667 4.66667C2.3 4.66667 2 4.96667 2 5.33333V12.6667C2 13.4 2.6 14 3.33333 14H10.6667C11.0333 14 11.3333 13.7 11.3333 13.3333C11.3333 12.9667 11.0333 12.6667 10.6667 12.6667H4C3.63333 12.6667 3.33333 12.3667 3.33333 12V5.33333C3.33333 4.96667 3.03333 4.66667 2.66667 4.66667ZM10 3.33333H11.3333V2H10V3.33333ZM10 11.3333H11.3333V10H10V11.3333Z\" /></svg>');\n    --vuu-svg-pin-right: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\"><path d=\"M8.66667 6.14V7.33333H2.66667C2.3 7.33333 2 7.63333 2 8C2 8.36666 2.3 8.66666 2.66667 8.66666H8.66667V9.86C8.66667 10.16 9.02667 10.3067 9.23333 10.0933L11.0933 8.23333C11.2267 8.1 11.2267 7.89333 11.0933 7.76L9.23333 5.9C9.02667 5.69333 8.66667 5.84 8.66667 6.14ZM13.3333 13.3333C13.7 13.3333 14 13.0333 14 12.6667V3.33333C14 2.96666 13.7 2.66666 13.3333 2.66666C12.9667 2.66666 12.6667 2.96666 12.6667 3.33333V12.6667C12.6667 13.0333 12.9667 13.3333 13.3333 13.3333Z\"/></svg>');\n    --vuuDropdown-height: 24px;\n    --vuuDropdown-width: 100%;\n    \n    display: flex;\n    flex-direction: column;\n    gap: 24px;\n    height: 100%;\n}\n\n.vuuColumnSettingsPanel-header {\n  font-size: 14px;\n  font-weight: 600;\n  padding: 24px 2px 0 2px;\n}\n\n\n.vuuColumnSettingsPanel-buttonBar {\n  align-items: center;\n  display: flex;\n  justify-content: space-between;\n  margin-top: auto;\n}\n\n.vuuColumnSettingsPanel-buttonBar[data-align=\"right\"]{\n  gap: 6px;\n  justify-content: flex-end;\n}\n\n.vuuColumnSettingsPanel-buttonNavPrev {\n  --vuu-icon-left: 6px;\n  padding-left: 24px\n}\n\n.vuuColumnSettingsPanel-buttonNavNext {\n  --vuu-icon-left: calc(100% - 18px);\n  padding-right: 24px\n}\n\n\n\n[data-icon='align-left'] {\n    --vuu-icon-svg: var(--vuu-svg-align-left);\n  }\n\n  [data-icon='align-right'] {\n    --vuu-icon-svg: var(--vuu-svg-align-right);\n  }\n\n  [data-icon='pin-left'] {\n    --vuu-icon-svg: var(--vuu-svg-pin-left);\n  }\n  [data-icon='pin-float'] {\n    --vuu-icon-svg: var(--vuu-svg-pin-float);\n  }\n  [data-icon='pin-right'] {\n    --vuu-icon-svg: var(--vuu-svg-pin-right);\n  }\n\n  .vuuColumnSettingsPanel-editing .vuuColumnNameLabel-edit {\n    display: none;\n  }\n  \n\n\n  \n  \n  \n  \n  \n";
 
 export { colunSettingsPanelCss as default };
 //# sourceMappingURL=ColumnSettingsPanel.css.js.map

package/esm/column-settings-panel/ColumnSettingsPanel.js

@@ -0,0 +1,159 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { FormField, FormFieldLabel, ToggleButtonGroup, ToggleButton, Button } from '@salt-ds/core';
+import { useComponentCssInjection } from '@salt-ds/styles';
+import { useWindow } from '@salt-ds/window';
+import { VuuInput, Icon } from '@vuu-ui/vuu-ui-controls';
+import { getDefaultAlignment, isCalculatedColumn, getCalculatedColumnDetails } from '@vuu-ui/vuu-utils';
+import { ColumnFormattingPanel } from '../column-formatting-settings/ColumnFormattingPanel.js';
+import 'react';
+import { ColumnNameLabel } from './ColumnNameLabel.js';
+import { useColumnSettings } from './useColumnSettings.js';
+import colunSettingsPanelCss from './ColumnSettingsPanel.css.js';
+
+const classBase = "vuuColumnSettingsPanel";
+const getColumnLabel = (column) => {
+  const { name, label } = column;
+  if (isCalculatedColumn(name)) {
+    return label ?? getCalculatedColumnDetails(column).name;
+  } else {
+    return label ?? name;
+  }
+};
+const ColumnSettingsPanel = ({
+  column: columnProp,
+  columnModel,
+  onClickEditCalculatedColumn,
+  onConfigChange
+}) => {
+  const targetWindow = useWindow();
+  useComponentCssInjection({
+    testId: "vuu-column-settings-panel",
+    css: colunSettingsPanelCss,
+    window: targetWindow
+  });
+  const isNewCalculatedColumn = columnProp.name === "::";
+  const {
+    availableRenderers,
+    column,
+    navigateNextColumn,
+    navigatePrevColumn,
+    onChange,
+    onChangeFormatting,
+    onChangeRendering,
+    onChangeToggleButton,
+    onChangeType,
+    onInputCommit
+  } = useColumnSettings({
+    column: columnProp,
+    columnModel,
+    onConfigChange
+  });
+  const {
+    serverDataType,
+    align = getDefaultAlignment(serverDataType),
+    pin,
+    width = ""
+  } = column;
+  return /* @__PURE__ */ jsxs("div", { className: classBase, children: [
+    /* @__PURE__ */ jsx("div", { className: `${classBase}-header`, children: /* @__PURE__ */ jsx(
+      ColumnNameLabel,
+      {
+        column,
+        onClick: onClickEditCalculatedColumn
+      }
+    ) }),
+    /* @__PURE__ */ jsxs(FormField, { "data-field": "column-label", children: [
+      /* @__PURE__ */ jsx(FormFieldLabel, { children: "Column Label" }),
+      /* @__PURE__ */ jsx(
+        VuuInput,
+        {
+          bordered: true,
+          className: "vuuInput",
+          "data-embedded": true,
+          onChange,
+          onCommit: onInputCommit,
+          value: getColumnLabel(column)
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs(FormField, { "data-field": "column-width", children: [
+      /* @__PURE__ */ jsx(FormFieldLabel, { children: "Column Width" }),
+      /* @__PURE__ */ jsx(
+        VuuInput,
+        {
+          bordered: true,
+          className: "vuuInput",
+          "data-embedded": true,
+          onChange,
+          value: width,
+          onCommit: onInputCommit
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs(FormField, { "data-field": "column-alignment", children: [
+      /* @__PURE__ */ jsx(FormFieldLabel, { children: "Alignment" }),
+      /* @__PURE__ */ jsxs(ToggleButtonGroup, { onChange: onChangeToggleButton, value: align, children: [
+        /* @__PURE__ */ jsx(ToggleButton, { value: "left", children: /* @__PURE__ */ jsx(Icon, { name: "align-left", size: 16 }) }),
+        /* @__PURE__ */ jsx(ToggleButton, { value: "right", children: /* @__PURE__ */ jsx(Icon, { name: "align-right", size: 16 }) })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs(FormField, { "data-field": "column-pin", children: [
+      /* @__PURE__ */ jsx(FormFieldLabel, { children: "Pin Column" }),
+      /* @__PURE__ */ jsxs(
+        ToggleButtonGroup,
+        {
+          onChange: onChangeToggleButton,
+          value: pin || "false",
+          children: [
+            /* @__PURE__ */ jsx(ToggleButton, { value: "left", children: /* @__PURE__ */ jsx(Icon, { name: "pin-left", size: 16 }) }),
+            /* @__PURE__ */ jsx(ToggleButton, { value: "floating", children: /* @__PURE__ */ jsx(Icon, { name: "pin-float", size: 16 }) }),
+            /* @__PURE__ */ jsx(ToggleButton, { value: "right", children: /* @__PURE__ */ jsx(Icon, { name: "pin-right", size: 16 }) }),
+            /* @__PURE__ */ jsx(ToggleButton, { value: "", children: /* @__PURE__ */ jsx(Icon, { name: "cross-circle", size: 16 }) })
+          ]
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx(
+      ColumnFormattingPanel,
+      {
+        availableRenderers,
+        column,
+        onChangeFormatting,
+        onChangeRendering,
+        onChangeColumnType: onChangeType
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: `${classBase}-buttonBar`,
+        "data-align": isNewCalculatedColumn ? "right" : void 0,
+        children: [
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              className: `${classBase}-buttonNavPrev`,
+              variant: "secondary",
+              "data-icon": "arrow-left",
+              onClick: navigatePrevColumn,
+              children: "PREVIOUS"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              className: `${classBase}-buttonNavNext`,
+              variant: "secondary",
+              "data-icon": "arrow-right",
+              onClick: navigateNextColumn,
+              children: "NEXT"
+            }
+          )
+        ]
+      }
+    )
+  ] });
+};
+
+export { ColumnSettingsPanel };
+//# sourceMappingURL=ColumnSettingsPanel.js.map

package/esm/column-settings-panel/ColumnSettingsPanel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColumnSettingsPanel.js","sources":["../../../../packages/vuu-table-extras/src/column-settings-panel/ColumnSettingsPanel.tsx"],"sourcesContent":["import {\n  Button,\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 { ColumnDescriptor } from \"@vuu-ui/vuu-table-types\";\nimport { Icon, VuuInput } from \"@vuu-ui/vuu-ui-controls\";\nimport {\n  getCalculatedColumnDetails,\n  getDefaultAlignment,\n  isCalculatedColumn,\n} from \"@vuu-ui/vuu-utils\";\nimport { ColumnFormattingPanel } from \"../column-formatting-settings\";\nimport { ColumnNameLabel } from \"./ColumnNameLabel\";\nimport { ColumnSettingsProps, useColumnSettings } from \"./useColumnSettings\";\n\nimport colunSettingsPanelCss from \"./ColumnSettingsPanel.css\";\n\nconst classBase = \"vuuColumnSettingsPanel\";\n\nconst getColumnLabel = (column: ColumnDescriptor) => {\n  const { name, label } = column;\n  if (isCalculatedColumn(name)) {\n    return label ?? getCalculatedColumnDetails(column).name;\n  } else {\n    return label ?? name;\n  }\n};\n\nexport interface ColumnSettinsPanelProps extends ColumnSettingsProps {\n  onClickEditCalculatedColumn?: () => void;\n}\n\nexport const ColumnSettingsPanel = ({\n  column: columnProp,\n  columnModel,\n  onClickEditCalculatedColumn,\n  onConfigChange,\n}: ColumnSettinsPanelProps) => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-column-settings-panel\",\n    css: colunSettingsPanelCss,\n    window: targetWindow,\n  });\n\n  const isNewCalculatedColumn = columnProp.name === \"::\";\n  const {\n    availableRenderers,\n    column,\n    navigateNextColumn,\n    navigatePrevColumn,\n    onChange,\n    onChangeFormatting,\n    onChangeRendering,\n    onChangeToggleButton,\n    onChangeType,\n    onInputCommit,\n  } = useColumnSettings({\n    column: columnProp,\n    columnModel,\n    onConfigChange,\n  });\n\n  const {\n    serverDataType,\n    align = getDefaultAlignment(serverDataType),\n    pin,\n    width = \"\",\n  } = column;\n\n  return (\n    <div className={classBase}>\n      <div className={`${classBase}-header`}>\n        <ColumnNameLabel\n          column={column}\n          onClick={onClickEditCalculatedColumn}\n        />\n      </div>\n\n      <FormField data-field=\"column-label\">\n        <FormFieldLabel>Column Label</FormFieldLabel>\n        <VuuInput\n          bordered\n          className=\"vuuInput\"\n          data-embedded\n          onChange={onChange}\n          onCommit={onInputCommit}\n          value={getColumnLabel(column)}\n        />\n      </FormField>\n\n      <FormField data-field=\"column-width\">\n        <FormFieldLabel>Column Width</FormFieldLabel>\n        <VuuInput\n          bordered\n          className=\"vuuInput\"\n          data-embedded\n          onChange={onChange}\n          value={width}\n          onCommit={onInputCommit}\n        />\n      </FormField>\n      <FormField data-field=\"column-alignment\">\n        <FormFieldLabel>Alignment</FormFieldLabel>\n        <ToggleButtonGroup onChange={onChangeToggleButton} value={align}>\n          <ToggleButton value=\"left\">\n            <Icon name=\"align-left\" size={16} />\n          </ToggleButton>\n          <ToggleButton value=\"right\">\n            <Icon name=\"align-right\" size={16} />\n          </ToggleButton>\n        </ToggleButtonGroup>\n      </FormField>\n      <FormField data-field=\"column-pin\">\n        <FormFieldLabel>Pin Column</FormFieldLabel>\n        <ToggleButtonGroup\n          onChange={onChangeToggleButton}\n          value={pin || \"false\"}\n        >\n          <ToggleButton value=\"left\">\n            <Icon name=\"pin-left\" size={16} />\n          </ToggleButton>\n          <ToggleButton value=\"floating\">\n            <Icon name=\"pin-float\" size={16} />\n          </ToggleButton>\n          <ToggleButton value=\"right\">\n            <Icon name=\"pin-right\" size={16} />\n          </ToggleButton>\n          <ToggleButton value=\"\">\n            <Icon name=\"cross-circle\" size={16} />\n          </ToggleButton>\n        </ToggleButtonGroup>\n      </FormField>\n      <ColumnFormattingPanel\n        availableRenderers={availableRenderers}\n        column={column}\n        onChangeFormatting={onChangeFormatting}\n        onChangeRendering={onChangeRendering}\n        onChangeColumnType={onChangeType}\n      />\n\n      <div\n        className={`${classBase}-buttonBar`}\n        data-align={isNewCalculatedColumn ? \"right\" : undefined}\n      >\n        <Button\n          className={`${classBase}-buttonNavPrev`}\n          variant=\"secondary\"\n          data-icon=\"arrow-left\"\n          onClick={navigatePrevColumn}\n        >\n          PREVIOUS\n        </Button>\n        <Button\n          className={`${classBase}-buttonNavNext`}\n          variant=\"secondary\"\n          data-icon=\"arrow-right\"\n          onClick={navigateNextColumn}\n        >\n          NEXT\n        </Button>\n      </div>\n    </div>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;AAsBA,MAAM,SAAY,GAAA,wBAAA;AAElB,MAAM,cAAA,GAAiB,CAAC,MAA6B,KAAA;AACnD,EAAM,MAAA,EAAE,IAAM,EAAA,KAAA,EAAU,GAAA,MAAA;AACxB,EAAI,IAAA,kBAAA,CAAmB,IAAI,CAAG,EAAA;AAC5B,IAAO,OAAA,KAAA,IAAS,0BAA2B,CAAA,MAAM,CAAE,CAAA,IAAA;AAAA,GAC9C,MAAA;AACL,IAAA,OAAO,KAAS,IAAA,IAAA;AAAA;AAEpB,CAAA;AAMO,MAAM,sBAAsB,CAAC;AAAA,EAClC,MAAQ,EAAA,UAAA;AAAA,EACR,WAAA;AAAA,EACA,2BAAA;AAAA,EACA;AACF,CAA+B,KAAA;AAC7B,EAAA,MAAM,eAAe,SAAU,EAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,2BAAA;AAAA,IACR,GAAK,EAAA,qBAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EAAM,MAAA,qBAAA,GAAwB,WAAW,IAAS,KAAA,IAAA;AAClD,EAAM,MAAA;AAAA,IACJ,kBAAA;AAAA,IACA,MAAA;AAAA,IACA,kBAAA;AAAA,IACA,kBAAA;AAAA,IACA,QAAA;AAAA,IACA,kBAAA;AAAA,IACA,iBAAA;AAAA,IACA,oBAAA;AAAA,IACA,YAAA;AAAA,IACA;AAAA,MACE,iBAAkB,CAAA;AAAA,IACpB,MAAQ,EAAA,UAAA;AAAA,IACR,WAAA;AAAA,IACA;AAAA,GACD,CAAA;AAED,EAAM,MAAA;AAAA,IACJ,cAAA;AAAA,IACA,KAAA,GAAQ,oBAAoB,cAAc,CAAA;AAAA,IAC1C,GAAA;AAAA,IACA,KAAQ,GAAA;AAAA,GACN,GAAA,MAAA;AAEJ,EACE,uBAAA,IAAA,CAAC,KAAI,EAAA,EAAA,SAAA,EAAW,SACd,EAAA,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,KAAI,EAAA,EAAA,SAAA,EAAW,CAAG,EAAA,SAAS,CAC1B,OAAA,CAAA,EAAA,QAAA,kBAAA,GAAA;AAAA,MAAC,eAAA;AAAA,MAAA;AAAA,QACC,MAAA;AAAA,QACA,OAAS,EAAA;AAAA;AAAA,KAEb,EAAA,CAAA;AAAA,oBAEA,IAAA,CAAC,SAAU,EAAA,EAAA,YAAA,EAAW,cACpB,EAAA,QAAA,EAAA;AAAA,sBAAA,GAAA,CAAC,kBAAe,QAAY,EAAA,cAAA,EAAA,CAAA;AAAA,sBAC5B,GAAA;AAAA,QAAC,QAAA;AAAA,QAAA;AAAA,UACC,QAAQ,EAAA,IAAA;AAAA,UACR,SAAU,EAAA,UAAA;AAAA,UACV,eAAa,EAAA,IAAA;AAAA,UACb,QAAA;AAAA,UACA,QAAU,EAAA,aAAA;AAAA,UACV,KAAA,EAAO,eAAe,MAAM;AAAA;AAAA;AAC9B,KACF,EAAA,CAAA;AAAA,oBAEA,IAAA,CAAC,SAAU,EAAA,EAAA,YAAA,EAAW,cACpB,EAAA,QAAA,EAAA;AAAA,sBAAA,GAAA,CAAC,kBAAe,QAAY,EAAA,cAAA,EAAA,CAAA;AAAA,sBAC5B,GAAA;AAAA,QAAC,QAAA;AAAA,QAAA;AAAA,UACC,QAAQ,EAAA,IAAA;AAAA,UACR,SAAU,EAAA,UAAA;AAAA,UACV,eAAa,EAAA,IAAA;AAAA,UACb,QAAA;AAAA,UACA,KAAO,EAAA,KAAA;AAAA,UACP,QAAU,EAAA;AAAA;AAAA;AACZ,KACF,EAAA,CAAA;AAAA,oBACA,IAAA,CAAC,SAAU,EAAA,EAAA,YAAA,EAAW,kBACpB,EAAA,QAAA,EAAA;AAAA,sBAAA,GAAA,CAAC,kBAAe,QAAS,EAAA,WAAA,EAAA,CAAA;AAAA,sBACxB,IAAA,CAAA,iBAAA,EAAA,EAAkB,QAAU,EAAA,oBAAA,EAAsB,OAAO,KACxD,EAAA,QAAA,EAAA;AAAA,wBAAC,GAAA,CAAA,YAAA,EAAA,EAAa,OAAM,MAClB,EAAA,QAAA,kBAAA,GAAA,CAAC,QAAK,IAAK,EAAA,YAAA,EAAa,IAAM,EAAA,EAAA,EAAI,CACpC,EAAA,CAAA;AAAA,wBACA,GAAA,CAAC,YAAa,EAAA,EAAA,KAAA,EAAM,OAClB,EAAA,QAAA,kBAAA,GAAA,CAAC,QAAK,IAAK,EAAA,aAAA,EAAc,IAAM,EAAA,EAAA,EAAI,CACrC,EAAA;AAAA,OACF,EAAA;AAAA,KACF,EAAA,CAAA;AAAA,oBACA,IAAA,CAAC,SAAU,EAAA,EAAA,YAAA,EAAW,YACpB,EAAA,QAAA,EAAA;AAAA,sBAAA,GAAA,CAAC,kBAAe,QAAU,EAAA,YAAA,EAAA,CAAA;AAAA,sBAC1B,IAAA;AAAA,QAAC,iBAAA;AAAA,QAAA;AAAA,UACC,QAAU,EAAA,oBAAA;AAAA,UACV,OAAO,GAAO,IAAA,OAAA;AAAA,UAEd,QAAA,EAAA;AAAA,4BAAC,GAAA,CAAA,YAAA,EAAA,EAAa,OAAM,MAClB,EAAA,QAAA,kBAAA,GAAA,CAAC,QAAK,IAAK,EAAA,UAAA,EAAW,IAAM,EAAA,EAAA,EAAI,CAClC,EAAA,CAAA;AAAA,4BACA,GAAA,CAAC,YAAa,EAAA,EAAA,KAAA,EAAM,UAClB,EAAA,QAAA,kBAAA,GAAA,CAAC,QAAK,IAAK,EAAA,WAAA,EAAY,IAAM,EAAA,EAAA,EAAI,CACnC,EAAA,CAAA;AAAA,4BACA,GAAA,CAAC,YAAa,EAAA,EAAA,KAAA,EAAM,OAClB,EAAA,QAAA,kBAAA,GAAA,CAAC,QAAK,IAAK,EAAA,WAAA,EAAY,IAAM,EAAA,EAAA,EAAI,CACnC,EAAA,CAAA;AAAA,4BACA,GAAA,CAAC,YAAa,EAAA,EAAA,KAAA,EAAM,EAClB,EAAA,QAAA,kBAAA,GAAA,CAAC,QAAK,IAAK,EAAA,cAAA,EAAe,IAAM,EAAA,EAAA,EAAI,CACtC,EAAA;AAAA;AAAA;AAAA;AACF,KACF,EAAA,CAAA;AAAA,oBACA,GAAA;AAAA,MAAC,qBAAA;AAAA,MAAA;AAAA,QACC,kBAAA;AAAA,QACA,MAAA;AAAA,QACA,kBAAA;AAAA,QACA,iBAAA;AAAA,QACA,kBAAoB,EAAA;AAAA;AAAA,KACtB;AAAA,oBAEA,IAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,SAAA,EAAW,GAAG,SAAS,CAAA,UAAA,CAAA;AAAA,QACvB,YAAA,EAAY,wBAAwB,OAAU,GAAA,KAAA,CAAA;AAAA,QAE9C,QAAA,EAAA;AAAA,0BAAA,GAAA;AAAA,YAAC,MAAA;AAAA,YAAA;AAAA,cACC,SAAA,EAAW,GAAG,SAAS,CAAA,cAAA,CAAA;AAAA,cACvB,OAAQ,EAAA,WAAA;AAAA,cACR,WAAU,EAAA,YAAA;AAAA,cACV,OAAS,EAAA,kBAAA;AAAA,cACV,QAAA,EAAA;AAAA;AAAA,WAED;AAAA,0BACA,GAAA;AAAA,YAAC,MAAA;AAAA,YAAA;AAAA,cACC,SAAA,EAAW,GAAG,SAAS,CAAA,cAAA,CAAA;AAAA,cACvB,OAAQ,EAAA,WAAA;AAAA,cACR,WAAU,EAAA,aAAA;AAAA,cACV,OAAS,EAAA,kBAAA;AAAA,cACV,QAAA,EAAA;AAAA;AAAA;AAED;AAAA;AAAA;AACF,GACF,EAAA,CAAA;AAEJ;;;;"}

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

@@ -1,5 +1,5 @@
-import { queryClosest, getFieldName, isValidPinLocation, isValidColumnAlignment, setCalculatedColumnName, updateColumnFormatting, updateColumnType, updateColumnRenderProps, getRegisteredCellRenderers } from '@vuu-ui/vuu-utils';
-import { useState, useRef, useCallback, useEffect, useMemo } from 'react';
+import { queryClosest, getFieldName, isValidPinLocation, isValidColumnAlignment, setCalculatedColumnName, updateColumnRenderProps, updateColumnFormatting, updateColumnType, getServerDataType, getRegisteredCellRenderers } from '@vuu-ui/vuu-utils';
+import { useState, useEffect, useMemo, useCallback } from 'react';
 
 const integerCellRenderers = [
   {
@@ -31,7 +31,8 @@ const stringCellRenderers = [
 ];
 const booleanCellRenderers = [];
 const getAvailableCellRenderers = (column) => {
-  switch (column.serverDataType) {
+  const serverDataType = getServerDataType(column);
+  switch (serverDataType) {
     case "char":
     case "string":
       return stringCellRenderers.concat(getRegisteredCellRenderers("string"));
@@ -55,49 +56,19 @@ const getAvailableCellRenderers = (column) => {
       return stringCellRenderers;
   }
 };
-const getColumn = (columns, column) => {
-  if (column.name === "::") {
-    return column;
-  } else {
-    const col = columns.find((col2) => col2.name === column.name);
-    if (col) {
-      return col;
-    }
-    throw Error(`columns does not contain column ${name}`);
-  }
-};
-const replaceColumn = (tableConfig, column) => ({
-  ...tableConfig,
-  columns: tableConfig.columns.map(
-    (col) => col.name === column.name ? column : col
-  )
-});
 const useColumnSettings = ({
   column: columnProp,
-  onCancelCreateColumn,
-  onConfigChange,
-  onCreateCalculatedColumn,
-  tableConfig
+  columnModel
 }) => {
   const [column, setColumn] = useState(
-    getColumn(tableConfig.columns, columnProp)
+    columnModel.getColumn(columnProp.name)
   );
-  const columnRef = useRef(column);
-  const [inEditMode, setEditMode] = useState(column.name === "::");
-  const handleEditCalculatedcolumn = useCallback(() => {
-    columnRef.current = column;
-    setEditMode(true);
-  }, [column]);
   useEffect(() => {
     setColumn(columnProp);
-    setEditMode(columnProp.name === "::");
   }, [columnProp]);
   const availableRenderers = useMemo(() => {
     return getAvailableCellRenderers(column);
   }, [column]);
-  const handleInputCommit = useCallback(() => {
-    onConfigChange(replaceColumn(tableConfig, column));
-  }, [column, onConfigChange, tableConfig]);
   const handleChangeToggleButton = useCallback(
     (evt) => {
       const button = queryClosest(evt.target, "button");
@@ -109,10 +80,10 @@ const useColumnSettings = ({
             if (isValidColumnAlignment(value)) {
               const newColumn = {
                 ...column,
-                align: value || void 0
+                align: value
               };
               setColumn(newColumn);
-              onConfigChange(replaceColumn(tableConfig, newColumn));
+              columnModel.updateColumn(newColumn);
             }
             break;
           case "column-pin":
@@ -122,13 +93,13 @@ const useColumnSettings = ({
                 pin: value || void 0
               };
               setColumn(newColumn);
-              onConfigChange(replaceColumn(tableConfig, newColumn));
+              columnModel.updateColumn(newColumn);
               break;
             }
         }
       }
     },
-    [column, onConfigChange, tableConfig]
+    [column, columnModel]
   );
   const handleChange = useCallback((evt) => {
     const input = evt.target;
@@ -142,28 +113,51 @@ const useColumnSettings = ({
         setColumn((state) => setCalculatedColumnName(state, value));
         break;
       case "column-width":
-        setColumn((state) => ({ ...state, width: parseInt(value) }));
+        {
+          const numericValue = parseInt(value, 10);
+          if (isNaN(numericValue)) {
+            setColumn((state) => ({ ...state, width: void 0 }));
+          } else {
+            setColumn((state) => ({ ...state, width: numericValue }));
+          }
+        }
         break;
     }
   }, []);
-  const handleChangeCalculatedColumnName = useCallback((name2) => {
-    setColumn((state) => ({ ...state, name: name2 }));
+  const handleInputCommit = useCallback(() => {
+    columnModel.updateColumn(column);
+  }, [column, columnModel]);
+  const handleChangeCalculatedColumnName = useCallback((name) => {
+    setColumn((state) => ({ ...state, name }));
   }, []);
+  const handleChangeRendering = useCallback(
+    (renderProps) => {
+      if (renderProps) {
+        const newColumn = updateColumnRenderProps(
+          column,
+          renderProps
+        );
+        setColumn(newColumn);
+        columnModel.updateColumn(newColumn);
+      }
+    },
+    [column, columnModel]
+  );
   const handleChangeFormatting = useCallback(
     (formatting) => {
       const newColumn = updateColumnFormatting(column, formatting);
       setColumn(newColumn);
-      onConfigChange(replaceColumn(tableConfig, newColumn));
+      columnModel.updateColumn(newColumn);
     },
-    [column, onConfigChange, tableConfig]
+    [column, columnModel]
   );
   const handleChangeType = useCallback(
     (type) => {
       const updatedColumn = updateColumnType(column, type);
       setColumn(updatedColumn);
-      onConfigChange(replaceColumn(tableConfig, updatedColumn));
+      columnModel.updateColumn(updatedColumn);
     },
-    [column, onConfigChange, tableConfig]
+    [column, columnModel]
   );
   const handleChangeServerDataType = useCallback(
     (serverDataType) => {
@@ -171,29 +165,15 @@ const useColumnSettings = ({
     },
     []
   );
-  const handleChangeRendering = useCallback(
-    (renderProps) => {
-      if (renderProps) {
-        const newColumn = updateColumnRenderProps(
-          column,
-          renderProps
-        );
-        setColumn(newColumn);
-        onConfigChange(replaceColumn(tableConfig, newColumn));
-      }
-    },
-    [column, onConfigChange, tableConfig]
-  );
   const navigateColumn = useCallback(
     ({ moveBy }) => {
-      const { columns } = tableConfig;
-      const index = columns.indexOf(column) + moveBy;
-      const newColumn = columns[index];
+      const index = columnModel.selectedColumns.indexOf(column) + moveBy;
+      const newColumn = columnModel.selectedColumns[index];
       if (newColumn) {
         setColumn(newColumn);
       }
     },
-    [column, tableConfig]
+    [column, columnModel]
   );
   const navigateNextColumn = useCallback(() => {
     navigateColumn({ moveBy: 1 });
@@ -201,26 +181,11 @@ const useColumnSettings = ({
   const navigatePrevColumn = useCallback(() => {
     navigateColumn({ moveBy: -1 });
   }, [navigateColumn]);
-  const handleSaveCalculatedColumn = useCallback(() => {
-    onCreateCalculatedColumn(column);
-  }, [column, onCreateCalculatedColumn]);
-  const handleCancelEdit = useCallback(() => {
-    if (columnProp.name === "::") {
-      onCancelCreateColumn();
-    } else {
-      if (columnRef.current !== void 0 && columnRef.current !== column) {
-        setColumn(columnRef.current);
-      }
-      setEditMode(false);
-    }
-  }, [column, columnProp.name, onCancelCreateColumn]);
   return {
     availableRenderers,
-    editCalculatedColumn: inEditMode,
     column,
     navigateNextColumn,
     navigatePrevColumn,
-    onCancel: handleCancelEdit,
     onChange: handleChange,
     onChangeCalculatedColumnName: handleChangeCalculatedColumnName,
     onChangeFormatting: handleChangeFormatting,
@@ -228,9 +193,7 @@ const useColumnSettings = ({
     onChangeServerDataType: handleChangeServerDataType,
     onChangeToggleButton: handleChangeToggleButton,
     onChangeType: handleChangeType,
-    onEditCalculatedColumn: handleEditCalculatedcolumn,
-    onInputCommit: handleInputCommit,
-    onSave: handleSaveCalculatedColumn
+    onInputCommit: handleInputCommit
   };
 };
 

package/esm/column-settings-panel/useColumnSettings.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useColumnSettings.js","sources":["../../../../packages/vuu-table-extras/src/column-settings-panel/useColumnSettings.ts"],"sourcesContent":["import {\n  ColumnDescriptor,\n  TableConfig,\n  ColumnTypeFormatting,\n} from \"@vuu-ui/vuu-table-types\";\n\nimport {\n  CellRendererDescriptor,\n  ColumnRenderPropsChangeHandler,\n  getFieldName,\n  getRegisteredCellRenderers,\n  isValidColumnAlignment,\n  isValidPinLocation,\n  setCalculatedColumnName,\n  updateColumnRenderProps,\n  updateColumnFormatting,\n  updateColumnType,\n  queryClosest,\n  isCalculatedColumn,\n  getCalculatedColumnDetails,\n  getServerDataType,\n} from \"@vuu-ui/vuu-utils\";\nimport { VuuColumnDataType, VuuTable } from \"@vuu-ui/vuu-protocol-types\";\nimport {\n  FormEventHandler,\n  useCallback,\n  useEffect,\n  useMemo,\n  useState,\n} from \"react\";\nimport { DataValueTypeSimple } from \"@vuu-ui/vuu-data-types\";\nimport { ColumnModel } from \"../column-picker/ColumnModel\";\n\n/**\n * Describes the props for a Column Configuration Editor, for which\n * an implementation is provided in vuu-table-extras\n */\nexport interface ColumnSettingsProps {\n  column: ColumnDescriptor;\n  columnModel: ColumnModel;\n  onConfigChange?: (config: TableConfig) => void;\n  vuuTable?: VuuTable;\n}\n\nconst integerCellRenderers: CellRendererDescriptor[] = [\n  {\n    description: \"Default formatter for columns with data type integer\",\n    label: \"Default Renderer (int, long)\",\n    name: \"default-int\",\n  },\n];\nconst doubleCellRenderers: CellRendererDescriptor[] = [\n  {\n    description: \"Default formatter for columns with data type double\",\n    label: \"Default Renderer (double)\",\n    name: \"default-double\",\n  },\n];\nconst decimalCellRenderers: CellRendererDescriptor[] = [\n  {\n    description:\n      \"Default formatter for columns with data type decimal (2,4,6 or 8)\",\n    label: \"Default Renderer (decimal)\",\n    name: \"default-decimal\",\n  },\n];\n\nconst stringCellRenderers: CellRendererDescriptor[] = [\n  {\n    description: \"Default formatter for columns with data type string\",\n    label: \"Default Renderer (string)\",\n    name: \"default-string\",\n  },\n];\n\nconst booleanCellRenderers: CellRendererDescriptor[] = [];\n\nconst getAvailableCellRenderers = (\n  column: ColumnDescriptor,\n): CellRendererDescriptor[] => {\n  const serverDataType = getServerDataType(column);\n  switch (serverDataType) {\n    case \"char\":\n    case \"string\":\n      return stringCellRenderers.concat(getRegisteredCellRenderers(\"string\"));\n    case \"int\":\n    case \"long\":\n      return integerCellRenderers.concat(getRegisteredCellRenderers(\"int\"));\n    case \"double\":\n      return doubleCellRenderers.concat(\n        getRegisteredCellRenderers(column.serverDataType),\n      );\n    case \"scaleddecimal2\":\n    case \"scaleddecimal4\":\n    case \"scaleddecimal6\":\n    case \"scaleddecimal8\":\n      return decimalCellRenderers.concat(\n        getRegisteredCellRenderers(column.serverDataType),\n      );\n    case \"boolean\":\n      return booleanCellRenderers.concat(getRegisteredCellRenderers(\"boolean\"));\n    default:\n      return stringCellRenderers;\n  }\n};\n\nexport const useColumnSettings = ({\n  column: columnProp,\n  columnModel,\n}: Omit<ColumnSettingsProps, \"vuuTable\">) => {\n  const [column, setColumn] = useState<ColumnDescriptor>(\n    columnModel.getColumn(columnProp.name),\n  );\n\n  useEffect(() => {\n    setColumn(columnProp);\n  }, [columnProp]);\n\n  const availableRenderers = useMemo(() => {\n    return getAvailableCellRenderers(column);\n  }, [column]);\n\n  const handleChangeToggleButton = useCallback<FormEventHandler>(\n    (evt) => {\n      const button = queryClosest<HTMLButtonElement>(evt.target, \"button\");\n      if (button) {\n        const fieldName = getFieldName(button);\n        const { value } = button;\n        switch (fieldName) {\n          case \"column-alignment\":\n            if (isValidColumnAlignment(value)) {\n              const newColumn: ColumnDescriptor = {\n                ...column,\n                align: value,\n              };\n              setColumn(newColumn);\n              columnModel.updateColumn(newColumn);\n            }\n            break;\n          case \"column-pin\":\n            if (isValidPinLocation(value)) {\n              const newColumn: ColumnDescriptor = {\n                ...column,\n                pin: value || undefined,\n              };\n              setColumn(newColumn);\n              columnModel.updateColumn(newColumn);\n\n              break;\n            }\n        }\n      }\n    },\n    [column, columnModel],\n  );\n\n  const handleChange = useCallback<FormEventHandler>((evt) => {\n    const input = evt.target as HTMLInputElement;\n    const fieldName = getFieldName(input);\n    const { value } = input;\n    switch (fieldName) {\n      case \"column-label\":\n        setColumn((state) => ({ ...state, label: value }));\n        break;\n      case \"column-name\":\n        setColumn((state) => setCalculatedColumnName(state, value));\n        break;\n      case \"column-width\":\n        {\n          const numericValue = parseInt(value, 10);\n          if (isNaN(numericValue)) {\n            setColumn((state) => ({ ...state, width: undefined }));\n          } else {\n            setColumn((state) => ({ ...state, width: numericValue }));\n          }\n        }\n        break;\n    }\n  }, []);\n\n  const handleInputCommit = useCallback(() => {\n    columnModel.updateColumn(column);\n  }, [column, columnModel]);\n\n  const handleChangeCalculatedColumnName = useCallback((name: string) => {\n    setColumn((state) => ({ ...state, name }));\n  }, []);\n\n  const handleChangeRendering = useCallback<ColumnRenderPropsChangeHandler>(\n    (renderProps) => {\n      if (renderProps) {\n        const newColumn: ColumnDescriptor = updateColumnRenderProps(\n          column,\n          renderProps,\n        );\n        setColumn(newColumn);\n        columnModel.updateColumn(newColumn);\n      }\n    },\n    [column, columnModel],\n  );\n\n  const handleChangeFormatting = useCallback(\n    (formatting: ColumnTypeFormatting) => {\n      const newColumn = updateColumnFormatting(column, formatting);\n      setColumn(newColumn);\n      columnModel.updateColumn(newColumn);\n    },\n    [column, columnModel],\n  );\n\n  const handleChangeType = useCallback(\n    (type: DataValueTypeSimple) => {\n      const updatedColumn = updateColumnType(column, type);\n      setColumn(updatedColumn);\n      columnModel.updateColumn(updatedColumn);\n    },\n    [column, columnModel],\n  );\n\n  // Changing the server data type applies only to calculated columns\n  const handleChangeServerDataType = useCallback(\n    (serverDataType: VuuColumnDataType) => {\n      setColumn((col) => ({ ...col, serverDataType }));\n    },\n    [],\n  );\n\n  const navigateColumn = useCallback(\n    ({ moveBy }: { moveBy: number }) => {\n      const index = columnModel.selectedColumns.indexOf(column) + moveBy;\n      const newColumn = columnModel.selectedColumns[index];\n      if (newColumn) {\n        setColumn(newColumn);\n      }\n    },\n    [column, columnModel],\n  );\n  const navigateNextColumn = useCallback(() => {\n    navigateColumn({ moveBy: 1 });\n  }, [navigateColumn]);\n\n  const navigatePrevColumn = useCallback(() => {\n    navigateColumn({ moveBy: -1 });\n  }, [navigateColumn]);\n\n  return {\n    availableRenderers,\n    column,\n    navigateNextColumn,\n    navigatePrevColumn,\n    onChange: handleChange,\n    onChangeCalculatedColumnName: handleChangeCalculatedColumnName,\n    onChangeFormatting: handleChangeFormatting,\n    onChangeRendering: handleChangeRendering,\n    onChangeServerDataType: handleChangeServerDataType,\n    onChangeToggleButton: handleChangeToggleButton,\n    onChangeType: handleChangeType,\n    onInputCommit: handleInputCommit,\n  };\n};\n"],"names":[],"mappings":"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"}

package/esm/column-settings-panel/useTableAndColumnSettings.js

@@ -0,0 +1,33 @@
+import { useRef, useCallback } from 'react';
+import { useContextPanel } from '@vuu-ui/vuu-ui-controls';
+import { defaultTableSettingsPermissions } from '../table-settings-panel/TableSettingsPanel.js';
+
+const columnSettingsFromColumnMenuPermissions = (settings) => typeof settings === void 0 ? true : typeof settings === "boolean" ? settings : settings?.allowColumnSettings ?? true;
+const tableSettingsFromColumnMenuPermissions = (settings) => typeof settings === void 0 ? defaultTableSettingsPermissions : typeof settings === "boolean" ? settings : settings?.allowTableSettings ?? defaultTableSettingsPermissions;
+const useTableAndColumnSettings = ({
+  tableConfig
+}) => {
+  const showTableSettingsRef = useRef(void 0);
+  const showContextPanel = useContextPanel();
+  const handleCancelCreateColumn = useCallback(() => {
+    requestAnimationFrame(() => {
+      showTableSettingsRef.current?.();
+    });
+  }, []);
+  const showColumnSettingsPanel = useCallback(
+    (action) => {
+    },
+    [
+      handleCancelCreateColumn,
+      // handleCreateCalculatedColumn,
+      showContextPanel,
+      tableConfig
+    ]
+  );
+  return {
+    showColumnSettingsPanel
+  };
+};
+
+export { columnSettingsFromColumnMenuPermissions, tableSettingsFromColumnMenuPermissions, useTableAndColumnSettings };
+//# sourceMappingURL=useTableAndColumnSettings.js.map

package/esm/column-settings-panel/useTableAndColumnSettings.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useTableAndColumnSettings.js","sources":["../../../../packages/vuu-table-extras/src/column-settings-panel/useTableAndColumnSettings.tsx"],"sourcesContent":["import { DataSourceConfig } from \"@vuu-ui/vuu-data-types\";\nimport {\n  ColumnMenuPermissions,\n  SettingsPermissions,\n  TableConfig,\n} from \"@vuu-ui/vuu-table-types\";\n// import { getCalculatedColumnDetails } from \"@vuu-ui/vuu-utils\";\nimport { useCallback, useRef } from \"react\";\nimport { DisplayColumnSettingsAction } from \"@vuu-ui/vuu-table-extras/src/column-menu/column-action-types\";\nimport { useContextPanel } from \"@vuu-ui/vuu-ui-controls\";\nimport { defaultTableSettingsPermissions } from \"../table-settings-panel/TableSettingsPanel\";\n\nexport interface TableAndColumnSettingsHookProps {\n  // onCreateCalculatedColumn: (column: ColumnDescriptor) => void;\n  onDataSourceConfigChange: (dataSourceConfig: DataSourceConfig) => void;\n  settingsPermissions?: SettingsPermissions;\n  tableConfig: TableConfig;\n}\n\nexport const columnSettingsFromColumnMenuPermissions = (\n  settings?: boolean | ColumnMenuPermissions,\n) =>\n  typeof settings === undefined\n    ? true\n    : typeof settings === \"boolean\"\n      ? settings\n      : (settings?.allowColumnSettings ?? true);\nexport const tableSettingsFromColumnMenuPermissions = (\n  settings?: boolean | ColumnMenuPermissions,\n) =>\n  typeof settings === undefined\n    ? defaultTableSettingsPermissions\n    : typeof settings === \"boolean\"\n      ? settings\n      : (settings?.allowTableSettings ?? defaultTableSettingsPermissions);\n\nexport const useTableAndColumnSettings = ({\n  tableConfig,\n}: TableAndColumnSettingsHookProps) => {\n  const showTableSettingsRef = useRef<() => void>(undefined);\n\n  const showContextPanel = useContextPanel();\n\n  const handleCancelCreateColumn = useCallback(() => {\n    requestAnimationFrame(() => {\n      showTableSettingsRef.current?.();\n    });\n  }, []);\n\n  // const handleCreateCalculatedColumn = useCallback(\n  //   (column: ColumnDescriptor) => {\n  //     const { serverDataType } = getCalculatedColumnDetails(column);\n  //     if (serverDataType) {\n  //       const newAvailableColumns = availableColumns.concat({\n  //         name: column.name,\n  //         serverDataType,\n  //       });\n  //       setAvailableColumns(newAvailableColumns);\n  //       onAvailableColumnsChange?.(newAvailableColumns);\n  //       requestAnimationFrame(() => {\n  //         showTableSettingsRef.current?.();\n  //       });\n  //       onCreateCalculatedColumn(column);\n  //     } else {\n  //       throw Error(\n  //         \"Cannot create calculatec columns without valis serverDataType\",\n  //       );\n  //     }\n  //   },\n  //   [availableColumns, onAvailableColumnsChange, onCreateCalculatedColumn],\n  // );\n\n  const showColumnSettingsPanel = useCallback(\n    (action: DisplayColumnSettingsAction) => {\n      // showContextPanel(\"ColumnSettings\", \"Column Settings\", {\n      //   column: action.column,\n      //   onCancelCreateColumn: handleCancelCreateColumn,\n      //   onConfigChange,\n      //   // onCreateCalculatedColumn: handleCreateCalculatedColumn,\n      //   tableConfig,\n      //   vuuTable: action.vuuTable,\n      // } as ColumnSettingsProps);\n    },\n    [\n      handleCancelCreateColumn,\n      // handleCreateCalculatedColumn,\n      showContextPanel,\n      tableConfig,\n    ],\n  );\n\n  // const handleAddCalculatedColumn = useCallback(() => {\n  //   showColumnSettingsPanel({\n  //     column: {\n  //       name: \"::\",\n  //       serverDataType: \"string\",\n  //     },\n  //     type: \"column-settings\",\n  //     vuuTable: { module: \"SIMUL\", table: \"instruments\" },\n  //   });\n  // }, [showColumnSettingsPanel]);\n\n  // const handleNavigateToColumn = useCallback(\n  //   (columnName: string) => {\n  //     const column = tableConfig.columns.find((c) => c.name === columnName);\n  //     if (column) {\n  //       showColumnSettingsPanel({\n  //         type: \"column-settings\",\n  //         column,\n  //         //TODO where do we get this from\n  //         vuuTable: { module: \"SIMUL\", table: \"instruments\" },\n  //       });\n  //     }\n  //   },\n  //   [showColumnSettingsPanel, tableConfig.columns],\n  // );\n\n  return {\n    showColumnSettingsPanel,\n  };\n};\n"],"names":[],"mappings":";;;;AAmBO,MAAM,uCAA0C,GAAA,CACrD,QAEA,KAAA,OAAO,QAAa,KAAA,KAAA,CAAA,GAChB,IACA,GAAA,OAAO,QAAa,KAAA,SAAA,GAClB,QACC,GAAA,QAAA,EAAU,mBAAuB,IAAA;AACnC,MAAM,sCAAyC,GAAA,CACpD,QAEA,KAAA,OAAO,QAAa,KAAA,KAAA,CAAA,GAChB,+BACA,GAAA,OAAO,QAAa,KAAA,SAAA,GAClB,QACC,GAAA,QAAA,EAAU,kBAAsB,IAAA;AAElC,MAAM,4BAA4B,CAAC;AAAA,EACxC;AACF,CAAuC,KAAA;AACrC,EAAM,MAAA,oBAAA,GAAuB,OAAmB,KAAS,CAAA,CAAA;AAEzD,EAAA,MAAM,mBAAmB,eAAgB,EAAA;AAEzC,EAAM,MAAA,wBAAA,GAA2B,YAAY,MAAM;AACjD,IAAA,qBAAA,CAAsB,MAAM;AAC1B,MAAA,oBAAA,CAAqB,OAAU,IAAA;AAAA,KAChC,CAAA;AAAA,GACH,EAAG,EAAE,CAAA;AAyBL,EAAA,MAAM,uBAA0B,GAAA,WAAA;AAAA,IAC9B,CAAC,MAAwC,KAAA;AAAA,KASzC;AAAA,IACA;AAAA,MACE,wBAAA;AAAA;AAAA,MAEA,gBAAA;AAAA,MACA;AAAA;AACF,GACF;AA4BA,EAAO,OAAA;AAAA,IACL;AAAA,GACF;AACF;;;;"}

package/esm/datasource-stats/DatasourceStats.css.js

@@ -1,4 +1,4 @@
-var dataSourceStats = ".vuuDatasourceStats {\n  --datasourceStats-background: var(--vuuDatasourceStats-background);\n  align-items: center;\n  background: var(--datasourceStats-background, var(--salt-container-secondary-background));\n  display: grid;\n  font-size: var(--vuuDatasourceStats-fontSize, 10px);\n  gap: var(--vuuDatasourceStats-gap, var(--salt-spacing-100));\n  grid-template-areas: \"panel-start panel-center panel-end\";\n  grid-template-columns: 1fr 1fr 1fr;\n  grid-template-rows: auto;\n  height: var(--vuuDatasourceStats-height, 100%);\n  padding: 0 var(--salt-spacing-200);\n\n  &.vuuDatasourceStats-withSelection {\n    --datasourceStats-background: var(--vuuDatasourceStats-withSelection-background, var(--vuuDatasourceStats-background));\n  }\n\n  .vuuDatasourceStats-statsPanel {\n    align-items: center;\n    display: flex;\n    gap: var(--salt-spacing-100);\n    width: fit-content;\n  }\n\n  .vuuDatasourceStats-rowStats {\n    justify-self: flex-start;\n    grid-area: panel-start;\n  }\n  .vuuDatasourceStats-selected {\n    margin-left: var(--salt-spacing-100);\n  }\n\n  .vuuDatasourceStats-range {\n    white-space: nowrap;\n  }\n\n  .vuuDatasourceStats-label {\n    color: var(--salt-content-secondary-foreground);\n    white-space: nowrap;\n  }\n\n  .vuuDatasourceStats-selectionActions {\n    grid-area: panel-center;\n    justify-self: center;\n  }\n\n  .vuuDatasourceStats-value {\n    color: var(--salt-content-primary-foreground);\n  }\n  .vuuDatasourceStats-tooltray {\n    justify-self: end;;\n    margin: 0 var(--salt-spacing-200);\n    grid-area: panel-end;\n  }\n\n}\n\n";
+var dataSourceStats = ".vuuDatasourceStats {\n  --datasourceStats-background: var(--vuuDatasourceStats-background);\n  align-items: center;\n  background: var(--datasourceStats-background, var(--salt-container-secondary-background));\n  display: grid;\n  font-size: var(--vuuDatasourceStats-fontSize, 10px);\n  gap: var(--vuuDatasourceStats-gap, var(--salt-spacing-100));\n  grid-template-areas: \"panel-start panel-center panel-end\";\n  grid-template-columns: 1fr 1fr 1fr;\n  grid-template-rows: auto;\n  height: var(--vuuDatasourceStats-height, 100%);\n  padding: 0 var(--salt-spacing-200);\n\n  &.vuuDatasourceStats-withSelection {\n    --datasourceStats-background: var(--vuuDatasourceStats-withSelection-background, var(--vuuDatasourceStats-background));\n  }\n\n  .vuuDatasourceStats-statsPanel {\n    align-items: center;\n    display: flex;\n    gap: var(--salt-spacing-100);\n    width: fit-content;\n  }\n\n  .vuuDatasourceStats-rowStats {\n    justify-self: flex-start;\n    grid-area: panel-start;\n  }\n  .vuuDatasourceStats-selected {\n    margin-left: var(--salt-spacing-100);\n  }\n\n  .vuuDatasourceStats-range {\n    white-space: nowrap;\n  }\n\n  .vuuDatasourceStats-label {\n    color: var(--salt-content-secondary-foreground);\n    white-space: nowrap;\n  }\n  .vuuDatasourceStats-range {\n    white-space: nowrap;\n  }\n\n  .vuuDatasourceStats-value {\n    color: var(--salt-content-primary-foreground);\n  }\n  .vuuDatasourceStats-tooltray {\n    justify-self: end;;\n    margin: 0 var(--salt-spacing-200);\n    grid-area: panel-end;\n  }\n\n}\n\n";
 
 export { dataSourceStats as default };
 //# sourceMappingURL=DatasourceStats.css.js.map

package/esm/index.js

@@ -1,3 +1,4 @@
+export { CalculatedColumnPanel } from './calculated-column/CalculatedColumnPanel.js';
 export { CaseValidator } from './cell-edit-validators/CaseValidator.js';
 export { PatternValidator } from './cell-edit-validators/PatternValidator.js';
 export { BackgroundCell } from './cell-renderers/background-cell/BackgroundCell.js';
@@ -13,22 +14,24 @@ export { walkTree } from './column-expression-input/column-language-parser/Colum
 export { ColumnNamedTerms, isCompleteExpression, isCompleteRelationalExpression, lastNamedChild } from './column-expression-input/column-language-parser/column-expression-parse-utils.js';
 export { useColumnExpressionEditor } from './column-expression-input/useColumnExpressionEditor.js';
 export { useColumnExpressionSuggestionProvider } from './column-expression-input/useColumnExpressionSuggestionProvider.js';
-export { ColumnExpressionPanel } from './column-expression-panel/ColumnExpressionPanel.js';
 export { ColumnFormattingPanel } from './column-formatting-settings/ColumnFormattingPanel.js';
 export { BaseNumericFormattingSettings } from './column-formatting-settings/BaseNumericFormattingSettings.js';
 export { DateTimeFormattingSettings } from './column-formatting-settings/DateTimeFormattingSettings.js';
-export { ColumnList, classBase, classBaseListItem } from './column-list/ColumnList.js';
 export { ColumnMenu } from './column-menu/ColumnMenu.js';
 export { useColumnActions } from './column-menu/useColumnActions.js';
 export { ColumnChangeSource, ColumnModel, SelectedColumnChangeType, isColumnAdded, isColumnRemoved, isColumnsReordered } from './column-picker/ColumnModel.js';
 export { ColumnPicker } from './column-picker/ColumnPicker.js';
+export { ColumnPickerAction } from './column-picker/ColumnPickerAction.js';
+export { useTableColumnPicker } from './column-picker/useTableColumnPicker.js';
+export { ColumnSettingsPanel } from './column-settings-panel/ColumnSettingsPanel.js';
+export { useColumnSettings } from './column-settings-panel/useColumnSettings.js';
+export { columnSettingsFromColumnMenuPermissions, tableSettingsFromColumnMenuPermissions, useTableAndColumnSettings } from './column-settings-panel/useTableAndColumnSettings.js';
 export { DataSourceStats } from './datasource-stats/DatasourceStats.js';
 export { FreezeControl } from './freeze-control/FreezeControl.js';
 export { FrozenBanner } from './freeze-control/FrozenBanner.js';
-export { ColumnSettingsPanel } from './table-column-settings/ColumnSettingsPanel.js';
-export { TableSettingsPanel, defaultTableSettingsPermissions } from './table-column-settings/TableSettingsPanel.js';
-export { useColumnSettings } from './table-column-settings/useColumnSettings.js';
-export { columnSettingsFromColumnMenuPermissions, tableSettingsFromColumnMenuPermissions, useTableAndColumnSettings } from './table-column-settings/useTableAndColumnSettings.js';
-export { useTableSettings } from './table-column-settings/useTableSettings.js';
+export { TabbedTableConfigPanel } from './tabbed-table-config-panel/TabbedTableConfigPanel.js';
+export { TabbedTableSettingsAction } from './tabbed-table-config-panel/TabbedTableSettingsAction.js';
+export { TableFooter, TableFooterTray } from './table-footer/TableFooter.js';
 export { TableProvider, useTableContext } from './table-provider/TableProvider.js';
+export { TableSettingsPanel, defaultTableSettingsPermissions } from './table-settings-panel/TableSettingsPanel.js';
 //# sourceMappingURL=index.js.map

package/esm/index.js.map

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

package/esm/tabbed-table-config-panel/TabbedTableConfigPanel.css.js

@@ -0,0 +1,4 @@
+var css = ".vuuTabbedTableConfigPanel {\n\n    --tabs-height: 25px;\n\n    inset: 0;\n    position: absolute;\n    .saltTabsNext {\n        height: 100%;\n        .saltTabListNext {\n            border-bottom: solid var(--salt-separable-secondary-borderColor) 1px;\n            height: var(--tabs-height);\n        }\n\n        .saltTabNextPanel {\n            height: calc(100% - var(--tabs-height));\n        }\n    }\n}";
+
+export { css as default };
+//# sourceMappingURL=TabbedTableConfigPanel.css.js.map

package/esm/tabbed-table-config-panel/TabbedTableConfigPanel.css.js.map

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