@vuu-ui/vuu-table-extras 0.8.35 → 0.8.36

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

@@ -0,0 +1,95 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { FormField, FormFieldLabel, Input, Switch } from '@salt-ds/core';
+import { getTypeFormattingFromColumn } from '@vuu-ui/vuu-utils';
+import { useState, useCallback } from 'react';
+
+const classBase = "vuuFormattingSettings";
+const BaseNumericFormattingSettings = ({
+  column,
+  onChangeFormatting: onChange
+}) => {
+  const [formattingSettings, setFormattingSettings] = useState(getTypeFormattingFromColumn(column));
+  const handleInputKeyDown = useCallback(
+    (evt) => {
+      if (evt.key === "Enter" || evt.key === "Tab") {
+        onChange(formattingSettings);
+      }
+    },
+    [formattingSettings, onChange]
+  );
+  const handleChangeDecimals = useCallback(
+    (evt) => {
+      const { value } = evt.target;
+      const numericValue = value === "" ? void 0 : isNaN(parseInt(value)) ? void 0 : parseInt(value);
+      const newFormattingSettings = {
+        ...formattingSettings,
+        decimals: numericValue
+      };
+      setFormattingSettings(newFormattingSettings);
+    },
+    [formattingSettings]
+  );
+  const handleChangeAlignDecimals = useCallback(
+    (evt) => {
+      const { checked } = evt.target;
+      const newFormattingSettings = {
+        ...formattingSettings,
+        alignOnDecimals: checked
+      };
+      setFormattingSettings(newFormattingSettings);
+      onChange(newFormattingSettings);
+    },
+    [formattingSettings, onChange]
+  );
+  const handleChangeZeroPad = useCallback(
+    (evt) => {
+      const { checked } = evt.target;
+      const newFormattingSettings = {
+        ...formattingSettings,
+        zeroPad: checked
+      };
+      setFormattingSettings(newFormattingSettings);
+      onChange(newFormattingSettings);
+    },
+    [formattingSettings, onChange]
+  );
+  return /* @__PURE__ */ jsxs("div", { className: classBase, children: [
+    /* @__PURE__ */ jsxs(FormField, { "data-field": "decimals", children: [
+      /* @__PURE__ */ jsx(FormFieldLabel, { children: "Number of decimals" }),
+      /* @__PURE__ */ jsx(
+        Input,
+        {
+          className: "vuuInput",
+          onChange: handleChangeDecimals,
+          onKeyDown: handleInputKeyDown,
+          value: formattingSettings.decimals ?? ""
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs(FormField, { labelPlacement: "left", children: [
+      /* @__PURE__ */ jsx(FormFieldLabel, { children: "Align on decimals" }),
+      /* @__PURE__ */ jsx(
+        Switch,
+        {
+          checked: formattingSettings.alignOnDecimals ?? false,
+          onChange: handleChangeAlignDecimals,
+          value: "align-decimals"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs(FormField, { labelPlacement: "left", children: [
+      /* @__PURE__ */ jsx(FormFieldLabel, { children: "Zero pad decimals" }),
+      /* @__PURE__ */ jsx(
+        Switch,
+        {
+          checked: formattingSettings.zeroPad ?? false,
+          onChange: handleChangeZeroPad,
+          value: "zero-pad"
+        }
+      )
+    ] })
+  ] });
+};
+
+export { BaseNumericFormattingSettings };
+//# sourceMappingURL=BaseNumericFormattingSettings.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"BaseNumericFormattingSettings.js","sources":["../../src/column-formatting-settings/BaseNumericFormattingSettings.tsx"],"sourcesContent":["import { FormField, FormFieldLabel, Input, Switch } from \"@salt-ds/core\";\nimport {\n  ColumnTypeFormatting,\n  FormattingSettingsProps,\n} from \"@vuu-ui/vuu-table-types\";\nimport { getTypeFormattingFromColumn } from \"@vuu-ui/vuu-utils\";\nimport {\n  ChangeEvent,\n  KeyboardEvent,\n  SyntheticEvent,\n  useCallback,\n  useState,\n} from \"react\";\n\nconst classBase = \"vuuFormattingSettings\";\n\nexport const BaseNumericFormattingSettings = ({\n  column,\n  onChangeFormatting: onChange,\n}: FormattingSettingsProps) => {\n  const [formattingSettings, setFormattingSettings] =\n    useState<ColumnTypeFormatting>(getTypeFormattingFromColumn(column));\n\n  const handleInputKeyDown = useCallback(\n    (evt: KeyboardEvent<HTMLInputElement>) => {\n      if (evt.key === \"Enter\" || evt.key === \"Tab\") {\n        onChange(formattingSettings);\n      }\n    },\n    [formattingSettings, onChange]\n  );\n\n  const handleChangeDecimals = useCallback(\n    (evt: SyntheticEvent) => {\n      const { value } = evt.target as HTMLFormElement;\n      const numericValue: number | undefined =\n        value === \"\"\n          ? undefined\n          : isNaN(parseInt(value))\n          ? undefined\n          : parseInt(value);\n\n      const newFormattingSettings = {\n        ...formattingSettings,\n        decimals: numericValue,\n      };\n      setFormattingSettings(newFormattingSettings);\n    },\n    [formattingSettings]\n  );\n\n  const handleChangeAlignDecimals = useCallback(\n    (evt: ChangeEvent<HTMLInputElement>) => {\n      const { checked } = evt.target as HTMLInputElement;\n      const newFormattingSettings = {\n        ...formattingSettings,\n        alignOnDecimals: checked,\n      };\n      setFormattingSettings(newFormattingSettings);\n      onChange(newFormattingSettings);\n    },\n    [formattingSettings, onChange]\n  );\n\n  const handleChangeZeroPad = useCallback(\n    (evt: ChangeEvent<HTMLInputElement>) => {\n      const { checked } = evt.target as HTMLInputElement;\n      const newFormattingSettings = {\n        ...formattingSettings,\n        zeroPad: checked,\n      };\n      setFormattingSettings(newFormattingSettings);\n      onChange(newFormattingSettings);\n    },\n    [formattingSettings, onChange]\n  );\n\n  return (\n    <div className={classBase}>\n      <FormField data-field=\"decimals\">\n        <FormFieldLabel>Number of decimals</FormFieldLabel>\n        <Input\n          className=\"vuuInput\"\n          onChange={handleChangeDecimals}\n          onKeyDown={handleInputKeyDown}\n          value={formattingSettings.decimals ?? \"\"}\n        />\n      </FormField>\n\n      <FormField labelPlacement=\"left\">\n        <FormFieldLabel>Align on decimals</FormFieldLabel>\n        <Switch\n          checked={formattingSettings.alignOnDecimals ?? false}\n          onChange={handleChangeAlignDecimals}\n          value=\"align-decimals\"\n        />\n      </FormField>\n      <FormField labelPlacement=\"left\">\n        <FormFieldLabel>Zero pad decimals</FormFieldLabel>\n        <Switch\n          checked={formattingSettings.zeroPad ?? false}\n          onChange={handleChangeZeroPad}\n          value=\"zero-pad\"\n        />\n      </FormField>\n    </div>\n  );\n};\n"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,105 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { Dropdown } from '@vuu-ui/vuu-ui-controls';
+import { isTypeDescriptor, isColumnTypeRenderer, getCellRendererOptions, getConfigurationEditor } from '@vuu-ui/vuu-utils';
+import { FormField, FormFieldLabel } from '@salt-ds/core';
+import cx from 'clsx';
+import { useMemo, useCallback } from 'react';
+import { BaseNumericFormattingSettings } from './BaseNumericFormattingSettings.js';
+import { LongTypeFormattingSettings } from './LongTypeFormattingSettings.js';
+
+const classBase = "vuuColumnFormattingPanel";
+const itemToString = (item) => item.label ?? item.name;
+const ColumnFormattingPanel = ({
+  availableRenderers,
+  className,
+  column,
+  onChangeFormatting,
+  onChangeColumnType,
+  onChangeRendering,
+  ...htmlAttributes
+}) => {
+  const formattingSettingsComponent = useMemo(
+    () => getFormattingSettingsComponent({
+      column,
+      onChangeFormatting,
+      onChangeColumnType
+    }),
+    [column, onChangeColumnType, onChangeFormatting]
+  );
+  console.log({ formattingSettingsComponent });
+  const ConfigEditor = useMemo(() => {
+    const { type } = column;
+    if (isTypeDescriptor(type) && isColumnTypeRenderer(type.renderer)) {
+      const cellRendererOptions = getCellRendererOptions(type.renderer.name);
+      return getConfigurationEditor(cellRendererOptions?.configEditor);
+    }
+    return void 0;
+  }, [column]);
+  const selectedCellRenderer = useMemo(() => {
+    const { type } = column;
+    const [defaultRenderer] = availableRenderers;
+    const rendererName = isTypeDescriptor(type) && isColumnTypeRenderer(type.renderer) ? type.renderer.name : void 0;
+    const configuredRenderer = availableRenderers.find(
+      (renderer) => renderer.name === rendererName
+    );
+    return configuredRenderer ?? defaultRenderer;
+  }, [availableRenderers, column]);
+  const handleChangeRenderer = useCallback(
+    (_, cellRendererDescriptor) => {
+      const renderProps = {
+        name: cellRendererDescriptor.name
+      };
+      onChangeRendering?.(renderProps);
+    },
+    [onChangeRendering]
+  );
+  const { serverDataType = "string" } = column;
+  return /* @__PURE__ */ jsxs("div", { ...htmlAttributes, className: `vuuColumnSettingsPanel-header`, children: [
+    /* @__PURE__ */ jsx("div", { children: "Formatting" }),
+    /* @__PURE__ */ jsxs(FormField, { children: [
+      /* @__PURE__ */ jsx(FormFieldLabel, { children: `Renderer (data type ${column.serverDataType})` }),
+      /* @__PURE__ */ jsx(
+        Dropdown,
+        {
+          className: cx(`${classBase}-renderer`),
+          itemToString,
+          onSelectionChange: handleChangeRenderer,
+          selected: selectedCellRenderer,
+          source: availableRenderers,
+          width: "100%"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cx(classBase, className, `${classBase}-${serverDataType}`),
+        children: [
+          formattingSettingsComponent,
+          ConfigEditor ? /* @__PURE__ */ jsx(
+            ConfigEditor,
+            {
+              column,
+              onChangeRendering
+            }
+          ) : null
+        ]
+      }
+    )
+  ] });
+};
+function getFormattingSettingsComponent(props) {
+  const { column } = props;
+  switch (column.serverDataType) {
+    case "double":
+    case "int":
+      return /* @__PURE__ */ jsx(BaseNumericFormattingSettings, { ...props });
+    case "long":
+      return /* @__PURE__ */ jsx(LongTypeFormattingSettings, { ...props });
+    default:
+      return null;
+  }
+}
+
+export { ColumnFormattingPanel };
+//# sourceMappingURL=ColumnFormattingPanel.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ColumnFormattingPanel.js","sources":["../../src/column-formatting-settings/ColumnFormattingPanel.tsx"],"sourcesContent":["import {\n  ColumnDescriptor,\n  ColumnDescriptorCustomRenderer,\n  ColumnTypeRendering,\n  FormattingSettingsProps,\n} from \"@vuu-ui/vuu-table-types\";\nimport { Dropdown, SingleSelectionHandler } from \"@vuu-ui/vuu-ui-controls\";\nimport {\n  CellRendererDescriptor,\n  ConfigurationEditorProps,\n  getCellRendererOptions,\n  getConfigurationEditor,\n  isColumnTypeRenderer,\n  isTypeDescriptor,\n} from \"@vuu-ui/vuu-utils\";\nimport { FormField, FormFieldLabel } from \"@salt-ds/core\";\nimport cx from \"clsx\";\nimport { HTMLAttributes, useCallback, useMemo } from \"react\";\nimport { BaseNumericFormattingSettings } from \"./BaseNumericFormattingSettings\";\nimport { LongTypeFormattingSettings } from \"./LongTypeFormattingSettings\";\n\nconst classBase = \"vuuColumnFormattingPanel\";\n\nexport interface ColumnFormattingPanelProps\n  extends HTMLAttributes<HTMLDivElement>,\n    FormattingSettingsProps {\n  availableRenderers: CellRendererDescriptor[];\n  column: ColumnDescriptor;\n  onChangeRendering: (renderProps: ColumnTypeRendering) => void;\n}\n\nconst itemToString = (item: CellRendererDescriptor) => item.label ?? item.name;\n\nexport const ColumnFormattingPanel = ({\n  availableRenderers,\n  className,\n  column,\n  onChangeFormatting,\n  onChangeColumnType,\n  onChangeRendering,\n  ...htmlAttributes\n}: ColumnFormattingPanelProps) => {\n  const formattingSettingsComponent = useMemo(\n    () =>\n      getFormattingSettingsComponent({\n        column,\n        onChangeFormatting,\n        onChangeColumnType,\n      }),\n    [column, onChangeColumnType, onChangeFormatting]\n  );\n\n  console.log({ formattingSettingsComponent });\n\n  const ConfigEditor = useMemo<\n    React.FC<ConfigurationEditorProps> | undefined\n  >(() => {\n    const { type } = column;\n    if (isTypeDescriptor(type) && isColumnTypeRenderer(type.renderer)) {\n      const cellRendererOptions = getCellRendererOptions(type.renderer.name);\n      return getConfigurationEditor(cellRendererOptions?.configEditor);\n    }\n    return undefined;\n  }, [column]);\n\n  const selectedCellRenderer = useMemo(() => {\n    const { type } = column;\n    const [defaultRenderer] = availableRenderers;\n    const rendererName =\n      isTypeDescriptor(type) && isColumnTypeRenderer(type.renderer)\n        ? type.renderer.name\n        : undefined;\n    const configuredRenderer = availableRenderers.find(\n      (renderer) => renderer.name === rendererName\n    );\n    return configuredRenderer ?? defaultRenderer;\n  }, [availableRenderers, column]);\n\n  const handleChangeRenderer = useCallback<\n    SingleSelectionHandler<CellRendererDescriptor>\n  >(\n    (_, cellRendererDescriptor) => {\n      const renderProps: ColumnTypeRendering = {\n        name: cellRendererDescriptor.name,\n      };\n      onChangeRendering?.(renderProps);\n    },\n    [onChangeRendering]\n  );\n\n  const { serverDataType = \"string\" } = column;\n\n  return (\n    <div {...htmlAttributes} className={`vuuColumnSettingsPanel-header`}>\n      <div>Formatting</div>\n\n      <FormField>\n        <FormFieldLabel>\n          {`Renderer (data type ${column.serverDataType})`}\n        </FormFieldLabel>\n        <Dropdown<CellRendererDescriptor>\n          className={cx(`${classBase}-renderer`)}\n          itemToString={itemToString}\n          onSelectionChange={handleChangeRenderer}\n          selected={selectedCellRenderer}\n          source={availableRenderers}\n          width=\"100%\"\n        />\n      </FormField>\n      <div\n        className={cx(classBase, className, `${classBase}-${serverDataType}`)}\n      >\n        {formattingSettingsComponent}\n        {ConfigEditor ? (\n          <ConfigEditor\n            column={column as ColumnDescriptorCustomRenderer}\n            onChangeRendering={onChangeRendering}\n          />\n        ) : null}\n      </div>\n    </div>\n  );\n};\n\nfunction getFormattingSettingsComponent(props: FormattingSettingsProps) {\n  const { column } = props;\n\n  switch (column.serverDataType) {\n    case \"double\":\n    case \"int\":\n      return <BaseNumericFormattingSettings {...props} />;\n    case \"long\":\n      return <LongTypeFormattingSettings {...props} />;\n    default:\n      return null;\n  }\n}\n"],"names":[],"mappings":";;;;;;;;;AAqBA,MAAM,SAAY,GAAA,0BAAA,CAAA;AAUlB,MAAM,YAAe,GAAA,CAAC,IAAiC,KAAA,IAAA,CAAK,SAAS,IAAK,CAAA,IAAA,CAAA;AAEnE,MAAM,wBAAwB,CAAC;AAAA,EACpC,kBAAA;AAAA,EACA,SAAA;AAAA,EACA,MAAA;AAAA,EACA,kBAAA;AAAA,EACA,kBAAA;AAAA,EACA,iBAAA;AAAA,EACA,GAAG,cAAA;AACL,CAAkC,KAAA;AAChC,EAAA,MAAM,2BAA8B,GAAA,OAAA;AAAA,IAClC,MACE,8BAA+B,CAAA;AAAA,MAC7B,MAAA;AAAA,MACA,kBAAA;AAAA,MACA,kBAAA;AAAA,KACD,CAAA;AAAA,IACH,CAAC,MAAQ,EAAA,kBAAA,EAAoB,kBAAkB,CAAA;AAAA,GACjD,CAAA;AAEA,EAAQ,OAAA,CAAA,GAAA,CAAI,EAAE,2BAAA,EAA6B,CAAA,CAAA;AAE3C,EAAM,MAAA,YAAA,GAAe,QAEnB,MAAM;AACN,IAAM,MAAA,EAAE,MAAS,GAAA,MAAA,CAAA;AACjB,IAAA,IAAI,iBAAiB,IAAI,CAAA,IAAK,oBAAqB,CAAA,IAAA,CAAK,QAAQ,CAAG,EAAA;AACjE,MAAA,MAAM,mBAAsB,GAAA,sBAAA,CAAuB,IAAK,CAAA,QAAA,CAAS,IAAI,CAAA,CAAA;AACrE,MAAO,OAAA,sBAAA,CAAuB,qBAAqB,YAAY,CAAA,CAAA;AAAA,KACjE;AACA,IAAO,OAAA,KAAA,CAAA,CAAA;AAAA,GACT,EAAG,CAAC,MAAM,CAAC,CAAA,CAAA;AAEX,EAAM,MAAA,oBAAA,GAAuB,QAAQ,MAAM;AACzC,IAAM,MAAA,EAAE,MAAS,GAAA,MAAA,CAAA;AACjB,IAAM,MAAA,CAAC,eAAe,CAAI,GAAA,kBAAA,CAAA;AAC1B,IAAM,MAAA,YAAA,GACJ,gBAAiB,CAAA,IAAI,CAAK,IAAA,oBAAA,CAAqB,KAAK,QAAQ,CAAA,GACxD,IAAK,CAAA,QAAA,CAAS,IACd,GAAA,KAAA,CAAA,CAAA;AACN,IAAA,MAAM,qBAAqB,kBAAmB,CAAA,IAAA;AAAA,MAC5C,CAAC,QAAa,KAAA,QAAA,CAAS,IAAS,KAAA,YAAA;AAAA,KAClC,CAAA;AACA,IAAA,OAAO,kBAAsB,IAAA,eAAA,CAAA;AAAA,GAC5B,EAAA,CAAC,kBAAoB,EAAA,MAAM,CAAC,CAAA,CAAA;AAE/B,EAAA,MAAM,oBAAuB,GAAA,WAAA;AAAA,IAG3B,CAAC,GAAG,sBAA2B,KAAA;AAC7B,MAAA,MAAM,WAAmC,GAAA;AAAA,QACvC,MAAM,sBAAuB,CAAA,IAAA;AAAA,OAC/B,CAAA;AACA,MAAA,iBAAA,GAAoB,WAAW,CAAA,CAAA;AAAA,KACjC;AAAA,IACA,CAAC,iBAAiB,CAAA;AAAA,GACpB,CAAA;AAEA,EAAM,MAAA,EAAE,cAAiB,GAAA,QAAA,EAAa,GAAA,MAAA,CAAA;AAEtC,EAAA,uBACG,IAAA,CAAA,KAAA,EAAA,EAAK,GAAG,cAAA,EAAgB,WAAW,CAClC,6BAAA,CAAA,EAAA,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,SAAI,QAAU,EAAA,YAAA,EAAA,CAAA;AAAA,yBAEd,SACC,EAAA,EAAA,QAAA,EAAA;AAAA,sBAAA,GAAA,CAAC,cACE,EAAA,EAAA,QAAA,EAAA,CAAA,oBAAA,EAAuB,MAAO,CAAA,cAAc,CAC/C,CAAA,CAAA,EAAA,CAAA;AAAA,sBACA,GAAA;AAAA,QAAC,QAAA;AAAA,QAAA;AAAA,UACC,SAAW,EAAA,EAAA,CAAG,CAAG,EAAA,SAAS,CAAW,SAAA,CAAA,CAAA;AAAA,UACrC,YAAA;AAAA,UACA,iBAAmB,EAAA,oBAAA;AAAA,UACnB,QAAU,EAAA,oBAAA;AAAA,UACV,MAAQ,EAAA,kBAAA;AAAA,UACR,KAAM,EAAA,MAAA;AAAA,SAAA;AAAA,OACR;AAAA,KACF,EAAA,CAAA;AAAA,oBACA,IAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,SAAA,EAAW,GAAG,SAAW,EAAA,SAAA,EAAW,GAAG,SAAS,CAAA,CAAA,EAAI,cAAc,CAAE,CAAA,CAAA;AAAA,QAEnE,QAAA,EAAA;AAAA,UAAA,2BAAA;AAAA,UACA,YACC,mBAAA,GAAA;AAAA,YAAC,YAAA;AAAA,YAAA;AAAA,cACC,MAAA;AAAA,cACA,iBAAA;AAAA,aAAA;AAAA,WAEA,GAAA,IAAA;AAAA,SAAA;AAAA,OAAA;AAAA,KACN;AAAA,GACF,EAAA,CAAA,CAAA;AAEJ,EAAA;AAEA,SAAS,+BAA+B,KAAgC,EAAA;AACtE,EAAM,MAAA,EAAE,QAAW,GAAA,KAAA,CAAA;AAEnB,EAAA,QAAQ,OAAO,cAAgB;AAAA,IAC7B,KAAK,QAAA,CAAA;AAAA,IACL,KAAK,KAAA;AACH,MAAO,uBAAA,GAAA,CAAC,6BAA+B,EAAA,EAAA,GAAG,KAAO,EAAA,CAAA,CAAA;AAAA,IACnD,KAAK,MAAA;AACH,MAAO,uBAAA,GAAA,CAAC,0BAA4B,EAAA,EAAA,GAAG,KAAO,EAAA,CAAA,CAAA;AAAA,IAChD;AACE,MAAO,OAAA,IAAA,CAAA;AAAA,GACX;AACF;;;;"}

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

@@ -0,0 +1,88 @@
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { useMemo, useState, useCallback } from 'react';
+import { Dropdown } from '@vuu-ui/vuu-ui-controls';
+import { getTypeFormattingFromColumn, defaultPatternsByType, supportedDateTimePatterns, fallbackDateTimePattern } from '@vuu-ui/vuu-utils';
+import { FormField, FormFieldLabel, ToggleButtonGroup, ToggleButton } from '@salt-ds/core';
+
+const DateTimeFormattingSettings = ({ column, onChangeFormatting: onChange }) => {
+  const formatting = getTypeFormattingFromColumn(column);
+  const { pattern = fallbackDateTimePattern } = formatting;
+  const toggleValue = useMemo(() => getToggleValue(pattern), [pattern]);
+  const [fallbackState, setFallbackState] = useState(
+    {
+      time: pattern.time ?? defaultPatternsByType.time,
+      date: pattern.date ?? defaultPatternsByType.date
+    }
+  );
+  const onPatternChange = useCallback(
+    (pattern2) => onChange({ ...formatting, pattern: pattern2 }),
+    [onChange, formatting]
+  );
+  const onDropdownChange = useCallback(
+    (key) => (_, p) => {
+      const updatedPattern = { ...pattern ?? {}, [key]: p };
+      setFallbackState((s) => ({
+        time: updatedPattern.time ?? s.time,
+        date: updatedPattern.date ?? s.date
+      }));
+      onPatternChange(updatedPattern);
+    },
+    [onPatternChange, pattern]
+  );
+  const onToggleChange = useCallback(
+    (evnt) => {
+      const value = evnt.currentTarget.value;
+      switch (value) {
+        case "time":
+          return onPatternChange({
+            [value]: pattern[value] ?? fallbackState[value]
+          });
+        case "date":
+          return onPatternChange({
+            [value]: pattern[value] ?? fallbackState[value]
+          });
+        case "both":
+          return onPatternChange({
+            time: pattern.time ?? fallbackState.time,
+            date: pattern.date ?? fallbackState.date
+          });
+      }
+    },
+    [onPatternChange, pattern, fallbackState]
+  );
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs(FormField, { labelPlacement: "top", children: [
+      /* @__PURE__ */ jsx(FormFieldLabel, { children: "Display" }),
+      /* @__PURE__ */ jsx(
+        ToggleButtonGroup,
+        {
+          className: "vuuToggleButtonGroup",
+          onChange: onToggleChange,
+          value: toggleValue,
+          "data-variant": "primary",
+          children: toggleValues.map((v) => /* @__PURE__ */ jsx(ToggleButton, { value: v, children: v.toUpperCase() }, v))
+        }
+      )
+    ] }),
+    ["date", "time"].filter((v) => !!pattern[v]).map((v) => /* @__PURE__ */ jsxs(FormField, { labelPlacement: "top", children: [
+      /* @__PURE__ */ jsx(FormFieldLabel, { children: `${labelByType[v]} pattern` }),
+      /* @__PURE__ */ jsx(
+        Dropdown,
+        {
+          onSelectionChange: onDropdownChange(v),
+          selected: pattern[v],
+          source: supportedDateTimePatterns[v],
+          width: "100%"
+        }
+      )
+    ] }, v))
+  ] });
+};
+const labelByType = { date: "Date", time: "Time" };
+const toggleValues = ["date", "time", "both"];
+function getToggleValue(pattern) {
+  return !pattern.time ? "date" : !pattern.date ? "time" : "both";
+}
+
+export { DateTimeFormattingSettings };
+//# sourceMappingURL=DateTimeFormattingSettings.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DateTimeFormattingSettings.js","sources":["../../src/column-formatting-settings/DateTimeFormattingSettings.tsx"],"sourcesContent":["import React, { SyntheticEvent, useCallback, useMemo, useState } from \"react\";\nimport { Dropdown, SingleSelectionHandler } from \"@vuu-ui/vuu-ui-controls\";\nimport {\n  DateTimePattern,\n  defaultPatternsByType,\n  fallbackDateTimePattern,\n  getTypeFormattingFromColumn,\n  supportedDateTimePatterns,\n} from \"@vuu-ui/vuu-utils\";\nimport {\n  FormField,\n  FormFieldLabel,\n  ToggleButton,\n  ToggleButtonGroup,\n} from \"@salt-ds/core\";\nimport {\n  DateTimeColumnDescriptor,\n  FormattingSettingsProps,\n} from \"@vuu-ui/vuu-table-types\";\n\nexport const DateTimeFormattingSettings: React.FC<\n  FormattingSettingsProps<DateTimeColumnDescriptor>\n> = ({ column, onChangeFormatting: onChange }) => {\n  const formatting = getTypeFormattingFromColumn(column);\n  const { pattern = fallbackDateTimePattern } = formatting;\n  const toggleValue = useMemo(() => getToggleValue(pattern), [pattern]);\n\n  const [fallbackState, setFallbackState] = useState<Required<DateTimePattern>>(\n    {\n      time: pattern.time ?? defaultPatternsByType.time,\n      date: pattern.date ?? defaultPatternsByType.date,\n    }\n  );\n\n  const onPatternChange = useCallback(\n    (pattern: DateTimePattern) => onChange({ ...formatting, pattern }),\n    [onChange, formatting]\n  );\n\n  const onDropdownChange = useCallback<\n    <T extends keyof DateTimePattern>(\n      key: T\n    ) => SingleSelectionHandler<Required<DateTimePattern>[T]>\n  >(\n    (key) => (_, p) => {\n      const updatedPattern = { ...(pattern ?? {}), [key]: p };\n      setFallbackState((s) => ({\n        time: updatedPattern.time ?? s.time,\n        date: updatedPattern.date ?? s.date,\n      }));\n      onPatternChange(updatedPattern);\n    },\n    [onPatternChange, pattern]\n  );\n\n  const onToggleChange = useCallback(\n    (evnt: SyntheticEvent<HTMLButtonElement, Event>) => {\n      const value = evnt.currentTarget.value as ToggleValue;\n      switch (value) {\n        case \"time\":\n          return onPatternChange({\n            [value]: pattern[value] ?? fallbackState[value],\n          });\n        case \"date\":\n          return onPatternChange({\n            [value]: pattern[value] ?? fallbackState[value],\n          });\n        case \"both\":\n          return onPatternChange({\n            time: pattern.time ?? fallbackState.time,\n            date: pattern.date ?? fallbackState.date,\n          });\n      }\n    },\n    [onPatternChange, pattern, fallbackState]\n  );\n\n  return (\n    <>\n      <FormField labelPlacement=\"top\">\n        <FormFieldLabel>{\"Display\"}</FormFieldLabel>\n        <ToggleButtonGroup\n          className=\"vuuToggleButtonGroup\"\n          onChange={onToggleChange}\n          value={toggleValue}\n          data-variant=\"primary\"\n        >\n          {toggleValues.map((v) => (\n            <ToggleButton key={v} value={v}>\n              {v.toUpperCase()}\n            </ToggleButton>\n          ))}\n        </ToggleButtonGroup>\n      </FormField>\n\n      {([\"date\", \"time\"] as const)\n        .filter((v) => !!pattern[v])\n        .map((v) => (\n          <FormField labelPlacement=\"top\" key={v}>\n            <FormFieldLabel>{`${labelByType[v]} pattern`}</FormFieldLabel>\n            <Dropdown<Required<DateTimePattern>[typeof v]>\n              onSelectionChange={onDropdownChange(v)}\n              selected={pattern[v]}\n              source={supportedDateTimePatterns[v]}\n              width=\"100%\"\n            />\n          </FormField>\n        ))}\n    </>\n  );\n};\n\nconst labelByType = { date: \"Date\", time: \"Time\" } as const;\n\nconst toggleValues = [\"date\", \"time\", \"both\"] as const;\n\ntype ToggleValue = (typeof toggleValues)[number];\n\nfunction getToggleValue(pattern: DateTimePattern): ToggleValue {\n  return !pattern.time ? \"date\" : !pattern.date ? \"time\" : \"both\";\n}\n"],"names":["pattern"],"mappings":"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"}

package/esm/column-formatting-settings/LongTypeFormattingSettings.css

@@ -0,0 +1,6 @@
+.vuuLongColumnFormattingSettings {
+  display: flex;
+  flex-direction: column;
+  gap: var(--salt-spacing-200);
+  padding-top: 6px;
+}

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

@@ -0,0 +1,38 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useCallback } from 'react';
+import { FormField, FormFieldLabel, ToggleButtonGroup, ToggleButton } from '@salt-ds/core';
+import { isTypeDescriptor, isDateTimeColumn } from '@vuu-ui/vuu-utils';
+import { DateTimeFormattingSettings } from './DateTimeFormattingSettings.js';
+import { BaseNumericFormattingSettings } from './BaseNumericFormattingSettings.js';
+
+const classBase = "vuuLongColumnFormattingSettings";
+const LongTypeFormattingSettings = (props) => {
+  const { column, onChangeColumnType: onChangeType } = props;
+  const type = isTypeDescriptor(column.type) ? column.type.name : column.type;
+  const handleToggleChange = useCallback(
+    (event) => {
+      const value = event.currentTarget.value;
+      onChangeType(value);
+    },
+    [onChangeType]
+  );
+  return /* @__PURE__ */ jsxs("div", { className: classBase, children: [
+    /* @__PURE__ */ jsxs(FormField, { children: [
+      /* @__PURE__ */ jsx(FormFieldLabel, { children: "Type inferred as" }),
+      /* @__PURE__ */ jsx(
+        ToggleButtonGroup,
+        {
+          className: "vuuToggleButtonGroup",
+          onChange: handleToggleChange,
+          value: type ?? "number",
+          children: toggleValues.map((v) => /* @__PURE__ */ jsx(ToggleButton, { value: v, children: v.toUpperCase() }, v))
+        }
+      )
+    ] }),
+    isDateTimeColumn(column) ? /* @__PURE__ */ jsx(DateTimeFormattingSettings, { ...props, column }) : /* @__PURE__ */ jsx(BaseNumericFormattingSettings, { ...props })
+  ] });
+};
+const toggleValues = ["number", "date/time"];
+
+export { LongTypeFormattingSettings };
+//# sourceMappingURL=LongTypeFormattingSettings.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"LongTypeFormattingSettings.js","sources":["../../src/column-formatting-settings/LongTypeFormattingSettings.tsx"],"sourcesContent":["import React, { useCallback } from \"react\";\nimport {\n  FormField,\n  FormFieldLabel,\n  ToggleButton,\n  ToggleButtonGroup,\n} from \"@salt-ds/core\";\nimport { isDateTimeColumn, isTypeDescriptor } from \"@vuu-ui/vuu-utils\";\nimport { DateTimeFormattingSettings } from \"./DateTimeFormattingSettings\";\nimport { BaseNumericFormattingSettings } from \"./BaseNumericFormattingSettings\";\nimport { FormattingSettingsProps } from \"@vuu-ui/vuu-table-types\";\n\nimport \"./LongTypeFormattingSettings.css\";\n\nconst classBase = \"vuuLongColumnFormattingSettings\";\n\nexport const LongTypeFormattingSettings = (props: FormattingSettingsProps) => {\n  const { column, onChangeColumnType: onChangeType } = props;\n  const type = isTypeDescriptor(column.type) ? column.type.name : column.type;\n\n  const handleToggleChange = useCallback(\n    (event: React.SyntheticEvent<HTMLButtonElement, Event>) => {\n      const value = event.currentTarget.value as ToggleValue;\n      onChangeType(value);\n    },\n    [onChangeType]\n  );\n\n  return (\n    <div className={classBase}>\n      <FormField>\n        <FormFieldLabel>{\"Type inferred as\"}</FormFieldLabel>\n        <ToggleButtonGroup\n          className=\"vuuToggleButtonGroup\"\n          onChange={handleToggleChange}\n          value={type ?? \"number\"}\n        >\n          {toggleValues.map((v) => (\n            <ToggleButton key={v} value={v}>\n              {v.toUpperCase()}\n            </ToggleButton>\n          ))}\n        </ToggleButtonGroup>\n      </FormField>\n\n      {isDateTimeColumn(column) ? (\n        <DateTimeFormattingSettings {...props} column={column} />\n      ) : (\n        <BaseNumericFormattingSettings {...props} />\n      )}\n    </div>\n  );\n};\n\nconst toggleValues = [\"number\", \"date/time\"] as const;\ntype ToggleValue = (typeof toggleValues)[number];\n"],"names":[],"mappings":";;;;;;;AAcA,MAAM,SAAY,GAAA,iCAAA,CAAA;AAEL,MAAA,0BAAA,GAA6B,CAAC,KAAmC,KAAA;AAC5E,EAAA,MAAM,EAAE,MAAA,EAAQ,kBAAoB,EAAA,YAAA,EAAiB,GAAA,KAAA,CAAA;AACrD,EAAM,MAAA,IAAA,GAAO,iBAAiB,MAAO,CAAA,IAAI,IAAI,MAAO,CAAA,IAAA,CAAK,OAAO,MAAO,CAAA,IAAA,CAAA;AAEvE,EAAA,MAAM,kBAAqB,GAAA,WAAA;AAAA,IACzB,CAAC,KAA0D,KAAA;AACzD,MAAM,MAAA,KAAA,GAAQ,MAAM,aAAc,CAAA,KAAA,CAAA;AAClC,MAAA,YAAA,CAAa,KAAK,CAAA,CAAA;AAAA,KACpB;AAAA,IACA,CAAC,YAAY,CAAA;AAAA,GACf,CAAA;AAEA,EACE,uBAAA,IAAA,CAAC,KAAI,EAAA,EAAA,SAAA,EAAW,SACd,EAAA,QAAA,EAAA;AAAA,oBAAA,IAAA,CAAC,SACC,EAAA,EAAA,QAAA,EAAA;AAAA,sBAAA,GAAA,CAAC,kBAAgB,QAAmB,EAAA,kBAAA,EAAA,CAAA;AAAA,sBACpC,GAAA;AAAA,QAAC,iBAAA;AAAA,QAAA;AAAA,UACC,SAAU,EAAA,sBAAA;AAAA,UACV,QAAU,EAAA,kBAAA;AAAA,UACV,OAAO,IAAQ,IAAA,QAAA;AAAA,UAEd,QAAa,EAAA,YAAA,CAAA,GAAA,CAAI,CAAC,CAAA,qBAChB,GAAA,CAAA,YAAA,EAAA,EAAqB,KAAO,EAAA,CAAA,EAC1B,QAAE,EAAA,CAAA,CAAA,WAAA,EADc,EAAA,EAAA,CAEnB,CACD,CAAA;AAAA,SAAA;AAAA,OACH;AAAA,KACF,EAAA,CAAA;AAAA,IAEC,gBAAiB,CAAA,MAAM,CACtB,mBAAA,GAAA,CAAC,0BAA4B,EAAA,EAAA,GAAG,KAAO,EAAA,MAAA,EAAgB,CAEvD,mBAAA,GAAA,CAAC,6BAA+B,EAAA,EAAA,GAAG,KAAO,EAAA,CAAA;AAAA,GAE9C,EAAA,CAAA,CAAA;AAEJ,EAAA;AAEA,MAAM,YAAA,GAAe,CAAC,QAAA,EAAU,WAAW,CAAA;;;;"}

package/esm/column-list/ColumnList.css

@@ -0,0 +1,60 @@
+
+
+.vuuColumnList {
+    --vuuMeasuredContainer-flex: 1 1 1px;
+    --vuu-svg-function: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 14"><path d="M5.8625 10.5V9.625H6.72291L8.4875 7.59792L6.72291 5.54167H5.64375L4.60833 10.8792C4.53055 11.3167 4.36527 11.6545 4.1125 11.8927C3.85972 12.1309 3.53402 12.25 3.13541 12.25C2.7368 12.25 2.40382 12.1333 2.13645 11.9C1.86909 11.6667 1.73541 11.375 1.73541 11.025C1.73541 10.7625 1.80833 10.551 1.95416 10.3906C2.1 10.2302 2.28958 10.15 2.52291 10.15C2.72708 10.15 2.89479 10.2083 3.02604 10.325C3.15729 10.4417 3.22291 10.5972 3.22291 10.7917C3.22291 10.8986 3.20104 10.9983 3.15729 11.0906C3.11354 11.183 3.05277 11.2583 2.975 11.3167C3.01388 11.3361 3.0552 11.3507 3.09895 11.3604C3.1427 11.3701 3.18888 11.375 3.2375 11.375C3.36388 11.375 3.47083 11.3142 3.55833 11.1927C3.64583 11.0712 3.70902 10.9132 3.74791 10.7188L4.75416 5.54167H2.91666V4.66667H4.91458L5.22083 3.12083C5.30833 2.68333 5.48333 2.34549 5.74583 2.10729C6.00833 1.8691 6.33402 1.75 6.72291 1.75C7.12152 1.75 7.44965 1.86667 7.70729 2.1C7.96493 2.33333 8.09375 2.625 8.09375 2.975C8.09375 3.2375 8.02083 3.44896 7.875 3.60938C7.72916 3.76979 7.53958 3.85 7.30625 3.85C7.1118 3.85 6.94652 3.7941 6.81041 3.68229C6.6743 3.57049 6.60625 3.42222 6.60625 3.2375C6.60625 3.14028 6.62569 3.04549 6.66458 2.95312C6.70347 2.86076 6.75208 2.78542 6.81041 2.72708C6.79097 2.70764 6.7618 2.69063 6.72291 2.67604C6.68402 2.66146 6.64513 2.65417 6.60625 2.65417C6.47986 2.65417 6.37048 2.7125 6.27812 2.82917C6.18576 2.94583 6.12013 3.09653 6.08125 3.28125L5.81875 4.66667H8.575V5.54167H7.88958L9.1 6.94167L10.2375 5.54167H9.5375V4.66667H12.25V5.54167H11.4042L9.65416 7.59792L11.4042 9.625H12.25V10.5H9.5375V9.625H10.2375L9.07083 8.26875L7.875 9.625H8.575V10.5H5.8625Z"/></svg>');
+    --vuuList-borderStyle: none;
+    --vuuListItem-padding: 0;
+    display: flex;
+    flex-direction: column;
+}
+
+[data-icon="function"]{
+    --vuu-icon-svg: var(--vuu-svg-function);
+}
+
+.vuuColumnListItem {
+    border-bottom: solid 1px var(--salt-separable-tertiary-borderColor);
+    gap: var(--salt-spacing-200);
+    padding: 0;
+
+    &.vuuListItem.vuuHighlighted:not(.vuuFocusVisible) {
+        border-style: none none solid none;
+        border-bottom: solid 1px var(--salt-separable-tertiary-borderColor);
+        padding: 0;
+    }
+
+    .vuuIcon {
+        --vuu-icon-color: var(--salt-content-secondary-foreground);
+    }
+}
+
+
+.vuuColumnList-text {
+    flex: 1 1 auto;
+}
+
+.vuuColumnList-text:hover {
+    font-weight: 600;
+    text-decoration: underline;
+}
+
+.vuuColumnList-header {
+    border-top: solid 2px var(--vuu-color-gray-30);
+    flex: 0 0 40px;
+    font-size: 14px;
+    font-weight: 600;
+    padding-top: 24px;
+}
+
+.vuuColumnList-colHeadings {
+    border-bottom: solid 2px var(--vuu-color-gray-30);
+    color: var(--vuu-color-gray-50);
+    display: flex;
+    flex: 0 0 24px;
+    font-size: 10px;
+    justify-content: space-between;
+    margin-top: 16px;
+    padding-bottom: 8px;
+
+}

package/esm/column-list/ColumnList.js

@@ -0,0 +1,104 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { List, ListItem, Icon } from '@vuu-ui/vuu-ui-controls';
+import { Checkbox, Switch } from '@salt-ds/core';
+import cx from 'clsx';
+import { useCallback } from 'react';
+import { queryClosest, getColumnLabel } from '@vuu-ui/vuu-utils';
+
+const classBase = "vuuColumnList";
+const classBaseListItem = "vuuColumnListItem";
+const ColumnListItem = ({
+  className: classNameProp,
+  item,
+  ...listItemProps
+}) => {
+  return /* @__PURE__ */ jsxs(
+    ListItem,
+    {
+      ...listItemProps,
+      className: cx(classNameProp, classBaseListItem),
+      "data-name": item?.name,
+      children: [
+        /* @__PURE__ */ jsx(Icon, { name: "draggable", size: 16 }),
+        item?.isCalculated ? /* @__PURE__ */ jsx(Icon, { name: "function" }) : /* @__PURE__ */ jsx(
+          Checkbox,
+          {
+            className: `${classBase}-checkBox`,
+            checked: item?.subscribed
+          }
+        ),
+        /* @__PURE__ */ jsx("span", { className: `${classBase}-text`, children: getColumnLabel(item) }),
+        /* @__PURE__ */ jsx(
+          Switch,
+          {
+            className: `${classBase}-switch`,
+            checked: item?.hidden !== true,
+            disabled: item?.subscribed !== true
+          }
+        )
+      ]
+    }
+  );
+};
+const ColumnList = ({
+  columnItems,
+  onChange,
+  onMoveListItem,
+  onNavigateToColumn,
+  ...htmlAttributes
+}) => {
+  const handleChange = useCallback(
+    ({ target }) => {
+      const input = target;
+      const listItem = queryClosest(target, `.${classBaseListItem}`);
+      if (listItem) {
+        const {
+          dataset: { name }
+        } = listItem;
+        if (name) {
+          const saltCheckbox = queryClosest(target, `.${classBase}-checkBox`);
+          const saltSwitch = queryClosest(target, `.${classBase}-switch`);
+          if (saltCheckbox) {
+            onChange(name, "subscribed", input.checked);
+          } else if (saltSwitch) {
+            onChange(name, "hidden", input.checked === false);
+          }
+        }
+      }
+    },
+    [onChange]
+  );
+  const handleClick = useCallback((evt) => {
+    const targetEl = evt.target;
+    if (targetEl.classList.contains("vuuColumnList-text")) {
+      const listItemEl = targetEl.closest(".vuuListItem");
+      if (listItemEl?.dataset.name) {
+        onNavigateToColumn?.(listItemEl.dataset.name);
+      }
+    }
+  }, []);
+  return /* @__PURE__ */ jsxs("div", { ...htmlAttributes, className: classBase, children: [
+    /* @__PURE__ */ jsx("div", { className: `${classBase}-header`, children: /* @__PURE__ */ jsx("span", { children: "Column Selection" }) }),
+    /* @__PURE__ */ jsxs("div", { className: `${classBase}-colHeadings`, children: [
+      /* @__PURE__ */ jsx("span", { children: "Column subscription" }),
+      /* @__PURE__ */ jsx("span", { children: "Visibility" })
+    ] }),
+    /* @__PURE__ */ jsx(
+      List,
+      {
+        ListItem: ColumnListItem,
+        allowDragDrop: true,
+        height: "auto",
+        onChange: handleChange,
+        onClick: handleClick,
+        onMoveListItem,
+        selectionStrategy: "none",
+        source: columnItems,
+        itemHeight: 33
+      }
+    )
+  ] });
+};
+
+export { ColumnList };
+//# sourceMappingURL=ColumnList.js.map

package/esm/column-list/ColumnList.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColumnList.js","sources":["../../src/column-list/ColumnList.tsx"],"sourcesContent":["import { ColumnDescriptor } from \"@vuu-ui/vuu-table-types\";\nimport {\n  Icon,\n  List,\n  ListItem,\n  ListItemProps,\n  ListProps,\n} from \"@vuu-ui/vuu-ui-controls\";\nimport { Checkbox, Switch } from \"@salt-ds/core\";\nimport cx from \"clsx\";\nimport {\n  HTMLAttributes,\n  MouseEventHandler,\n  SyntheticEvent,\n  useCallback,\n} from \"react\";\nimport { ColumnItem } from \"../table-settings\";\nimport { getColumnLabel, queryClosest } from \"@vuu-ui/vuu-utils\";\n\nimport \"./ColumnList.css\";\n\nconst classBase = \"vuuColumnList\";\nconst classBaseListItem = \"vuuColumnListItem\";\n\nexport type ColumnChangeHandler = (\n  columnName: string,\n  propertyName: keyof ColumnDescriptor | \"subscribed\",\n  value: string | number | boolean\n) => void;\n\nexport interface ColumnListProps\n  extends Omit<HTMLAttributes<HTMLDivElement>, \"onChange\"> {\n  columnItems: ColumnItem[];\n  onChange: ColumnChangeHandler;\n  onMoveListItem: ListProps[\"onMoveListItem\"];\n  onNavigateToColumn?: (columnName: string) => void;\n}\n\nconst ColumnListItem = ({\n  className: classNameProp,\n  item,\n  ...listItemProps\n}: ListItemProps<ColumnItem>) => {\n  return (\n    <ListItem\n      {...listItemProps}\n      className={cx(classNameProp, classBaseListItem)}\n      data-name={item?.name}\n    >\n      <Icon name=\"draggable\" size={16} />\n      {item?.isCalculated ? (\n        <Icon name=\"function\" />\n      ) : (\n        <Checkbox\n          className={`${classBase}-checkBox`}\n          checked={item?.subscribed}\n        />\n      )}\n      <span className={`${classBase}-text`}>\n        {getColumnLabel(item as ColumnDescriptor)}\n      </span>\n      <Switch\n        className={`${classBase}-switch`}\n        checked={item?.hidden !== true}\n        disabled={item?.subscribed !== true}\n      />\n    </ListItem>\n  );\n};\n\nexport const ColumnList = ({\n  columnItems,\n  onChange,\n  onMoveListItem,\n  onNavigateToColumn,\n  ...htmlAttributes\n}: ColumnListProps) => {\n  const handleChange = useCallback(\n    ({ target }: SyntheticEvent) => {\n      const input = target as HTMLInputElement;\n      const listItem = queryClosest(target, `.${classBaseListItem}`);\n      if (listItem) {\n        const {\n          dataset: { name },\n        } = listItem;\n        if (name) {\n          const saltCheckbox = queryClosest(target, `.${classBase}-checkBox`);\n          const saltSwitch = queryClosest(target, `.${classBase}-switch`);\n\n          if (saltCheckbox) {\n            onChange(name, \"subscribed\", input.checked);\n          } else if (saltSwitch) {\n            onChange(name, \"hidden\", input.checked === false);\n          }\n        }\n      }\n    },\n    [onChange]\n  );\n\n  const handleClick = useCallback<MouseEventHandler>((evt) => {\n    const targetEl = evt.target as HTMLElement;\n    if (targetEl.classList.contains(\"vuuColumnList-text\")) {\n      const listItemEl = targetEl.closest(\".vuuListItem\") as HTMLElement;\n      if (listItemEl?.dataset.name) {\n        onNavigateToColumn?.(listItemEl.dataset.name);\n      }\n    }\n  }, []);\n\n  return (\n    <div {...htmlAttributes} className={classBase}>\n      <div className={`${classBase}-header`}>\n        <span>Column Selection</span>\n      </div>\n      <div className={`${classBase}-colHeadings`}>\n        <span>Column subscription</span>\n        <span>Visibility</span>\n      </div>\n      <List<ColumnItem, \"none\">\n        ListItem={ColumnListItem}\n        allowDragDrop\n        height=\"auto\"\n        onChange={handleChange}\n        onClick={handleClick}\n        onMoveListItem={onMoveListItem}\n        selectionStrategy=\"none\"\n        source={columnItems}\n        itemHeight={33}\n      />\n    </div>\n  );\n};\n"],"names":[],"mappings":"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"}

package/esm/column-settings/ColumnNameLabel.css

@@ -0,0 +1,13 @@
+.vuuColumnNameLabel-calculated {
+    cursor: pointer;
+    display: flex;
+    gap: 2px;
+}
+
+.vuuColumnNameLabel-edit {
+    margin-left: auto;
+}
+
+.vuuColumnNameLabel-placeholder {
+    color: var(--vuu-color-gray-35);
+}

package/esm/column-settings/ColumnNameLabel.js

@@ -0,0 +1,34 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import cx from 'clsx';
+import { isCalculatedColumn, getCalculatedColumnDetails } from '@vuu-ui/vuu-utils';
+
+const classBase = "vuuColumnNameLabel";
+const ColumnNameLabel = ({ column, onClick }) => {
+  if (isCalculatedColumn(column.name)) {
+    const [name, type, expression] = getCalculatedColumnDetails(column);
+    const displayName = name || "name";
+    const displayExpression = "=expression";
+    const nameClass = displayName === "name" ? `${classBase}-placeholder` : void 0;
+    const expressionClass = expression === "" ? `${classBase}-placeholder` : void 0;
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cx(classBase, `${classBase}-calculated`),
+        onClick,
+        children: [
+          /* @__PURE__ */ jsx("span", { className: nameClass, children: displayName }),
+          /* @__PURE__ */ jsx("span", { children: ":" }),
+          /* @__PURE__ */ jsx("span", { children: type || "string" }),
+          /* @__PURE__ */ jsx("span", { children: ":" }),
+          /* @__PURE__ */ jsx("span", { className: expressionClass, children: displayExpression }),
+          /* @__PURE__ */ jsx("span", { className: `${classBase}-edit`, "data-icon": "edit" })
+        ]
+      }
+    );
+  } else {
+    return /* @__PURE__ */ jsx("div", { className: classBase, children: column.name });
+  }
+};
+
+export { ColumnNameLabel };
+//# sourceMappingURL=ColumnNameLabel.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ColumnNameLabel.js","sources":["../../src/column-settings/ColumnNameLabel.tsx"],"sourcesContent":["import { ColumnDescriptor } from \"@vuu-ui/vuu-table-types\";\nimport cx from \"clsx\";\n\nimport {\n  getCalculatedColumnDetails,\n  isCalculatedColumn,\n} from \"@vuu-ui/vuu-utils\";\n\nimport \"./ColumnNameLabel.css\";\nimport { MouseEventHandler } from \"react\";\n\nconst classBase = \"vuuColumnNameLabel\";\n\nexport interface ColumnNameLabelProps {\n  column: ColumnDescriptor;\n  onClick: MouseEventHandler;\n}\n\nexport const ColumnNameLabel = ({ column, onClick }: ColumnNameLabelProps) => {\n  if (isCalculatedColumn(column.name)) {\n    const [name, type, expression] = 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>{type || \"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":";;;;AAWA,MAAM,SAAY,GAAA,oBAAA,CAAA;AAOX,MAAM,eAAkB,GAAA,CAAC,EAAE,MAAA,EAAQ,SAAoC,KAAA;AAC5E,EAAI,IAAA,kBAAA,CAAmB,MAAO,CAAA,IAAI,CAAG,EAAA;AACnC,IAAA,MAAM,CAAC,IAAM,EAAA,IAAA,EAAM,UAAU,CAAA,GAAI,2BAA2B,MAAM,CAAA,CAAA;AAClE,IAAA,MAAM,cAAc,IAAQ,IAAA,MAAA,CAAA;AAC5B,IAAA,MAAM,iBAAoB,GAAA,aAAA,CAAA;AAE1B,IAAA,MAAM,SACJ,GAAA,WAAA,KAAgB,MAAS,GAAA,CAAA,EAAG,SAAS,CAAiB,YAAA,CAAA,GAAA,KAAA,CAAA,CAAA;AACxD,IAAA,MAAM,eACJ,GAAA,UAAA,KAAe,EAAK,GAAA,CAAA,EAAG,SAAS,CAAiB,YAAA,CAAA,GAAA,KAAA,CAAA,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,IAAA,IAAQ,QAAS,EAAA,CAAA;AAAA,0BACxB,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,CAAA;AAAA,SAAA;AAAA,OAAA;AAAA,KACzD,CAAA;AAAA,GAEG,MAAA;AACL,IAAA,uBAAQ,GAAA,CAAA,KAAA,EAAA,EAAI,SAAW,EAAA,SAAA,EAAY,iBAAO,IAAK,EAAA,CAAA,CAAA;AAAA,GACjD;AACF;;;;"}