@vuu-ui/vuu-table-extras 0.8.55 → 0.8.57

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

@@ -1,14 +1,12 @@
 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 { FormField, FormFieldLabel, Dropdown, Option } 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,
@@ -45,7 +43,7 @@ const ColumnFormattingPanel = ({
     return configuredRenderer ?? defaultRenderer;
   }, [availableRenderers, column]);
   const handleChangeRenderer = useCallback(
-    (_, cellRendererDescriptor) => {
+    (_e, [cellRendererDescriptor]) => {
       const renderProps = {
         name: cellRendererDescriptor.name
       };
@@ -62,11 +60,10 @@ const ColumnFormattingPanel = ({
         Dropdown,
         {
           className: cx(`${classBase}-renderer`),
-          itemToString,
           onSelectionChange: handleChangeRenderer,
-          selected: selectedCellRenderer,
-          source: availableRenderers,
-          width: "100%"
+          selected: selectedCellRenderer ? [selectedCellRenderer] : [],
+          value: selectedCellRenderer?.label ?? selectedCellRenderer?.name,
+          children: availableRenderers.map((cellRenderer, i) => /* @__PURE__ */ jsx(Option, { value: cellRenderer, children: cellRenderer.label ?? cellRenderer.name }, i))
         }
       )
     ] }),

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

@@ -1 +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":"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"}
+{"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 {\n  CellRendererDescriptor,\n  ConfigurationEditorProps,\n  getCellRendererOptions,\n  getConfigurationEditor,\n  isColumnTypeRenderer,\n  isTypeDescriptor,\n} from \"@vuu-ui/vuu-utils\";\nimport { Dropdown, FormField, FormFieldLabel, Option } from \"@salt-ds/core\";\nimport cx from \"clsx\";\nimport { HTMLAttributes, SyntheticEvent, 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\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    (\n      _e: SyntheticEvent,\n      [cellRendererDescriptor]: CellRendererDescriptor[]\n    ) => {\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          onSelectionChange={handleChangeRenderer}\n          selected={selectedCellRenderer ? [selectedCellRenderer] : []}\n          value={selectedCellRenderer?.label ?? selectedCellRenderer?.name}\n        >\n          {availableRenderers.map((cellRenderer, i) => (\n            <Option key={i} value={cellRenderer}>\n              {cellRenderer.label ?? cellRenderer.name}\n            </Option>\n          ))}\n        </Dropdown>\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":"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"}

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

@@ -1,9 +1,21 @@
 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';
+import { getTypeFormattingFromColumn, defaultPatternsByType, dateTimeLabelByType, supportedDateTimePatterns, isDatePattern, isTimePattern, fallbackDateTimePattern } from '@vuu-ui/vuu-utils';
+import { FormField, FormFieldLabel, ToggleButtonGroup, ToggleButton, Dropdown, Option } from '@salt-ds/core';
 
+const toggleValues = ["date", "time", "both"];
+function getToggleValue(pattern) {
+  return !pattern.time ? "date" : !pattern.date ? "time" : "both";
+}
+const getSelectedPattern = (pattern) => {
+  if (isDatePattern(pattern)) {
+    return [pattern];
+  } else if (isTimePattern(pattern)) {
+    return [pattern];
+  } else {
+    return void 0;
+  }
+};
 const DateTimeFormattingSettings = ({ column, onChangeFormatting: onChange }) => {
   const formatting = getTypeFormattingFromColumn(column);
   const { pattern = fallbackDateTimePattern } = formatting;
@@ -19,8 +31,11 @@ const DateTimeFormattingSettings = ({ column, onChangeFormatting: onChange }) =>
     [onChange, formatting]
   );
   const onDropdownChange = useCallback(
-    (key) => (_, p) => {
-      const updatedPattern = { ...pattern ?? {}, [key]: p };
+    (dateTime) => (_, [selectedPattern]) => {
+      const updatedPattern = {
+        ...pattern ?? {},
+        [dateTime]: selectedPattern
+      };
       setFallbackState((s) => ({
         time: updatedPattern.time ?? s.time,
         date: updatedPattern.date ?? s.date
@@ -65,24 +80,18 @@ const DateTimeFormattingSettings = ({ column, onChangeFormatting: onChange }) =>
       )
     ] }),
     ["date", "time"].filter((v) => !!pattern[v]).map((v) => /* @__PURE__ */ jsxs(FormField, { labelPlacement: "top", children: [
-      /* @__PURE__ */ jsx(FormFieldLabel, { children: `${labelByType[v]} pattern` }),
+      /* @__PURE__ */ jsx(FormFieldLabel, { children: `${dateTimeLabelByType[v]} pattern` }),
       /* @__PURE__ */ jsx(
         Dropdown,
         {
           onSelectionChange: onDropdownChange(v),
-          selected: pattern[v],
-          source: supportedDateTimePatterns[v],
-          width: "100%"
+          selected: getSelectedPattern(pattern[v]),
+          children: supportedDateTimePatterns[v].map((pattern2, i) => /* @__PURE__ */ jsx(Option, { value: pattern2, children: pattern2 }, i))
         }
       )
     ] }, 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

@@ -1 +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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"}
+{"version":3,"file":"DateTimeFormattingSettings.js","sources":["../../src/column-formatting-settings/DateTimeFormattingSettings.tsx"],"sourcesContent":["import React, { SyntheticEvent, useCallback, useMemo, useState } from \"react\";\nimport {\n  DateTimePattern,\n  TimePattern,\n  dateTimeLabelByType,\n  defaultPatternsByType,\n  fallbackDateTimePattern,\n  getTypeFormattingFromColumn,\n  isDatePattern,\n  isTimePattern,\n  supportedDateTimePatterns,\n} from \"@vuu-ui/vuu-utils\";\nimport {\n  Dropdown,\n  FormField,\n  FormFieldLabel,\n  Option,\n  ToggleButton,\n  ToggleButtonGroup,\n} from \"@salt-ds/core\";\nimport {\n  DateTimeColumnDescriptor,\n  FormattingSettingsProps,\n} from \"@vuu-ui/vuu-table-types\";\nimport { DatePattern } from \"@vuu-ui/vuu-utils\";\n\nconst toggleValues = [\"date\", \"time\", \"both\"] as const;\ntype ToggleValue = (typeof toggleValues)[number];\n\nfunction getToggleValue(pattern: DateTimePattern): ToggleValue {\n  return !pattern.time ? \"date\" : !pattern.date ? \"time\" : \"both\";\n}\n\ntype DateTime = keyof DateTimePattern;\n\nconst getSelectedPattern = (\n  pattern?: DatePattern | TimePattern\n): DatePattern[] | TimePattern[] | undefined => {\n  if (isDatePattern(pattern)) {\n    return [pattern] as DatePattern[];\n  } else if (isTimePattern(pattern)) {\n    return [pattern] as TimePattern[];\n  } else {\n    return undefined;\n  }\n};\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 DateTime>(\n      dateTime: T\n    ) => (\n      e: SyntheticEvent,\n      newSelected: Array<Required<DateTimePattern>[T]>\n    ) => void\n  >(\n    (dateTime) =>\n      (_, [selectedPattern]) => {\n        const updatedPattern = {\n          ...(pattern ?? {}),\n          [dateTime]: selectedPattern,\n        };\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>{`${dateTimeLabelByType[v]} pattern`}</FormFieldLabel>\n            <Dropdown<Required<DateTimePattern>[typeof v]>\n              onSelectionChange={onDropdownChange(v)}\n              selected={getSelectedPattern(pattern[v])}\n            >\n              {supportedDateTimePatterns[v].map((pattern, i) => (\n                <Option key={i} value={pattern}>\n                  {pattern}\n                </Option>\n              ))}\n            </Dropdown>\n          </FormField>\n        ))}\n    </>\n  );\n};\n"],"names":["pattern"],"mappings":"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"}

package/esm/column-settings/ColumnNameLabel.js

@@ -14,7 +14,7 @@ const ColumnNameLabel = ({ column, onClick }) => {
     window: targetWindow
   });
   if (isCalculatedColumn(column.name)) {
-    const [name, type, expression] = getCalculatedColumnDetails(column);
+    const { name, serverDataType, expression } = getCalculatedColumnDetails(column);
     const displayName = name || "name";
     const displayExpression = "=expression";
     const nameClass = displayName === "name" ? `${classBase}-placeholder` : void 0;
@@ -27,7 +27,7 @@ const ColumnNameLabel = ({ column, onClick }) => {
         children: [
           /* @__PURE__ */ jsx("span", { className: nameClass, children: displayName }),
           /* @__PURE__ */ jsx("span", { children: ":" }),
-          /* @__PURE__ */ jsx("span", { children: type || "string" }),
+          /* @__PURE__ */ jsx("span", { children: serverDataType || "string" }),
           /* @__PURE__ */ jsx("span", { children: ":" }),
           /* @__PURE__ */ jsx("span", { className: expressionClass, children: displayExpression }),
           /* @__PURE__ */ jsx("span", { className: `${classBase}-edit`, "data-icon": "edit" })

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

@@ -1 +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\";\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, 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":";;;;;;;AAYA,MAAM,SAAY,GAAA,oBAAA,CAAA;AAOX,MAAM,eAAkB,GAAA,CAAC,EAAE,MAAA,EAAQ,SAAoC,KAAA;AAC5E,EAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,kBAAA;AAAA,IACR,GAAK,EAAA,kBAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,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;;;;"}
+{"version":3,"file":"ColumnNameLabel.js","sources":["../../src/column-settings/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,CAAA;AAOX,MAAM,eAAkB,GAAA,CAAC,EAAE,MAAA,EAAQ,SAAoC,KAAA;AAC5E,EAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,kBAAA;AAAA,IACR,GAAK,EAAA,kBAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,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,CAAA;AACnC,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,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,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;;;;"}

package/esm/column-settings/ColumnSettingsPanel.js

@@ -1,6 +1,6 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { VuuInput, Icon } from '@vuu-ui/vuu-ui-controls';
-import { getDefaultAlignment, isCalculatedColumn, getCalculatedColumnName } from '@vuu-ui/vuu-utils';
+import { getDefaultAlignment, isCalculatedColumn, getCalculatedColumnDetails } from '@vuu-ui/vuu-utils';
 import { FormField, FormFieldLabel, ToggleButtonGroup, ToggleButton, Button } from '@salt-ds/core';
 import { useComponentCssInjection } from '@salt-ds/styles';
 import { useWindow } from '@salt-ds/window';
@@ -16,7 +16,7 @@ const classBase = "vuuColumnSettingsPanel";
 const getColumnLabel = (column) => {
   const { name, label } = column;
   if (isCalculatedColumn(name)) {
-    return label ?? getCalculatedColumnName(column);
+    return label ?? getCalculatedColumnDetails(column).name;
   } else {
     return label ?? name;
   }

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

@@ -1 +1 @@
-{"version":3,"file":"ColumnSettingsPanel.js","sources":["../../src/column-settings/ColumnSettingsPanel.tsx"],"sourcesContent":["import { ColumnDescriptor, ColumnSettingsProps } from \"@vuu-ui/vuu-table-types\";\nimport { Icon, VuuInput } from \"@vuu-ui/vuu-ui-controls\";\nimport {\n  getCalculatedColumnName,\n  getDefaultAlignment,\n  isCalculatedColumn,\n} from \"@vuu-ui/vuu-utils\";\nimport {\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 cx from \"clsx\";\nimport { ColumnExpressionPanel } from \"../column-expression-panel\";\nimport { ColumnFormattingPanel } from \"../column-formatting-settings\";\nimport { ColumnNameLabel } from \"./ColumnNameLabel\";\nimport { 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 ?? getCalculatedColumnName(column);\n  } else {\n    return label ?? name;\n  }\n};\n\nexport const ColumnSettingsPanel = ({\n  column: columnProp,\n  onCancelCreateColumn,\n  onConfigChange,\n  onCreateCalculatedColumn,\n  tableConfig,\n  vuuTable,\n}: ColumnSettingsProps) => {\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    editCalculatedColumn,\n    column,\n    navigateNextColumn,\n    navigatePrevColumn,\n    onCancel,\n    onChange,\n    onChangeCalculatedColumnName,\n    onChangeFormatting,\n    onChangeRendering,\n    onChangeServerDataType,\n    onChangeToggleButton,\n    onChangeType,\n    onEditCalculatedColumn,\n    onInputCommit,\n    onSave,\n  } = useColumnSettings({\n    column: columnProp,\n    onCancelCreateColumn,\n    onConfigChange,\n    onCreateCalculatedColumn,\n    tableConfig,\n  });\n\n  const {\n    serverDataType,\n    align = getDefaultAlignment(serverDataType),\n    pin,\n    width,\n  } = column;\n\n  return (\n    <div\n      className={cx(classBase, {\n        [`${classBase}-editing`]: editCalculatedColumn,\n      })}\n    >\n      <div className={`${classBase}-header`}>\n        <ColumnNameLabel column={column} onClick={onEditCalculatedColumn} />\n      </div>\n\n      {editCalculatedColumn ? (\n        <ColumnExpressionPanel\n          column={column}\n          onChangeName={onChangeCalculatedColumnName}\n          onChangeServerDataType={onChangeServerDataType}\n          tableConfig={tableConfig}\n          vuuTable={vuuTable}\n        />\n      ) : null}\n\n      <FormField data-field=\"column-label\">\n        <FormFieldLabel>Column Label</FormFieldLabel>\n        <VuuInput\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          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 onChange={onChangeToggleButton} value={pin ?? \"\"}>\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      {editCalculatedColumn ? (\n        <div className=\"vuuColumnSettingsPanel-buttonBar\" data-align=\"right\">\n          <Button\n            className={`${classBase}-buttonCancel`}\n            onClick={onCancel}\n            tabIndex={-1}\n          >\n            cancel\n          </Button>\n          <Button\n            className={`${classBase}-buttonSave`}\n            onClick={onSave}\n            variant=\"cta\"\n          >\n            save\n          </Button>\n        </div>\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      )}\n    </div>\n  );\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"ColumnSettingsPanel.js","sources":["../../src/column-settings/ColumnSettingsPanel.tsx"],"sourcesContent":["import { ColumnDescriptor, ColumnSettingsProps } 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 {\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 cx from \"clsx\";\nimport { ColumnExpressionPanel } from \"../column-expression-panel\";\nimport { ColumnFormattingPanel } from \"../column-formatting-settings\";\nimport { ColumnNameLabel } from \"./ColumnNameLabel\";\nimport { 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 const ColumnSettingsPanel = ({\n  column: columnProp,\n  onCancelCreateColumn,\n  onConfigChange,\n  onCreateCalculatedColumn,\n  tableConfig,\n  vuuTable,\n}: ColumnSettingsProps) => {\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    editCalculatedColumn,\n    column,\n    navigateNextColumn,\n    navigatePrevColumn,\n    onCancel,\n    onChange,\n    onChangeCalculatedColumnName,\n    onChangeFormatting,\n    onChangeRendering,\n    onChangeServerDataType,\n    onChangeToggleButton,\n    onChangeType,\n    onEditCalculatedColumn,\n    onInputCommit,\n    onSave,\n  } = useColumnSettings({\n    column: columnProp,\n    onCancelCreateColumn,\n    onConfigChange,\n    onCreateCalculatedColumn,\n    tableConfig,\n  });\n\n  const {\n    serverDataType,\n    align = getDefaultAlignment(serverDataType),\n    pin,\n    width,\n  } = column;\n\n  return (\n    <div\n      className={cx(classBase, {\n        [`${classBase}-editing`]: editCalculatedColumn,\n      })}\n    >\n      <div className={`${classBase}-header`}>\n        <ColumnNameLabel column={column} onClick={onEditCalculatedColumn} />\n      </div>\n\n      {editCalculatedColumn ? (\n        <ColumnExpressionPanel\n          column={column}\n          onChangeName={onChangeCalculatedColumnName}\n          onChangeServerDataType={onChangeServerDataType}\n          tableConfig={tableConfig}\n          vuuTable={vuuTable}\n        />\n      ) : null}\n\n      <FormField data-field=\"column-label\">\n        <FormFieldLabel>Column Label</FormFieldLabel>\n        <VuuInput\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          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 onChange={onChangeToggleButton} value={pin ?? \"\"}>\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      {editCalculatedColumn ? (\n        <div className=\"vuuColumnSettingsPanel-buttonBar\" data-align=\"right\">\n          <Button\n            className={`${classBase}-buttonCancel`}\n            onClick={onCancel}\n            tabIndex={-1}\n          >\n            cancel\n          </Button>\n          <Button\n            className={`${classBase}-buttonSave`}\n            onClick={onSave}\n            variant=\"cta\"\n          >\n            save\n          </Button>\n        </div>\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      )}\n    </div>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;AAwBA,MAAM,SAAY,GAAA,wBAAA,CAAA;AAElB,MAAM,cAAA,GAAiB,CAAC,MAA6B,KAAA;AACnD,EAAM,MAAA,EAAE,IAAM,EAAA,KAAA,EAAU,GAAA,MAAA,CAAA;AACxB,EAAI,IAAA,kBAAA,CAAmB,IAAI,CAAG,EAAA;AAC5B,IAAO,OAAA,KAAA,IAAS,0BAA2B,CAAA,MAAM,CAAE,CAAA,IAAA,CAAA;AAAA,GAC9C,MAAA;AACL,IAAA,OAAO,KAAS,IAAA,IAAA,CAAA;AAAA,GAClB;AACF,CAAA,CAAA;AAEO,MAAM,sBAAsB,CAAC;AAAA,EAClC,MAAQ,EAAA,UAAA;AAAA,EACR,oBAAA;AAAA,EACA,cAAA;AAAA,EACA,wBAAA;AAAA,EACA,WAAA;AAAA,EACA,QAAA;AACF,CAA2B,KAAA;AACzB,EAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,2BAAA;AAAA,IACR,GAAK,EAAA,qBAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAM,MAAA,qBAAA,GAAwB,WAAW,IAAS,KAAA,IAAA,CAAA;AAClD,EAAM,MAAA;AAAA,IACJ,kBAAA;AAAA,IACA,oBAAA;AAAA,IACA,MAAA;AAAA,IACA,kBAAA;AAAA,IACA,kBAAA;AAAA,IACA,QAAA;AAAA,IACA,QAAA;AAAA,IACA,4BAAA;AAAA,IACA,kBAAA;AAAA,IACA,iBAAA;AAAA,IACA,sBAAA;AAAA,IACA,oBAAA;AAAA,IACA,YAAA;AAAA,IACA,sBAAA;AAAA,IACA,aAAA;AAAA,IACA,MAAA;AAAA,MACE,iBAAkB,CAAA;AAAA,IACpB,MAAQ,EAAA,UAAA;AAAA,IACR,oBAAA;AAAA,IACA,cAAA;AAAA,IACA,wBAAA;AAAA,IACA,WAAA;AAAA,GACD,CAAA,CAAA;AAED,EAAM,MAAA;AAAA,IACJ,cAAA;AAAA,IACA,KAAA,GAAQ,oBAAoB,cAAc,CAAA;AAAA,IAC1C,GAAA;AAAA,IACA,KAAA;AAAA,GACE,GAAA,MAAA,CAAA;AAEJ,EACE,uBAAA,IAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,GAAG,SAAW,EAAA;AAAA,QACvB,CAAC,CAAA,EAAG,SAAS,CAAA,QAAA,CAAU,GAAG,oBAAA;AAAA,OAC3B,CAAA;AAAA,MAED,QAAA,EAAA;AAAA,wBAAC,GAAA,CAAA,KAAA,EAAA,EAAI,SAAW,EAAA,CAAA,EAAG,SAAS,CAAA,OAAA,CAAA,EAC1B,8BAAC,eAAgB,EAAA,EAAA,MAAA,EAAgB,OAAS,EAAA,sBAAA,EAAwB,CACpE,EAAA,CAAA;AAAA,QAEC,oBACC,mBAAA,GAAA;AAAA,UAAC,qBAAA;AAAA,UAAA;AAAA,YACC,MAAA;AAAA,YACA,YAAc,EAAA,4BAAA;AAAA,YACd,sBAAA;AAAA,YACA,WAAA;AAAA,YACA,QAAA;AAAA,WAAA;AAAA,SAEA,GAAA,IAAA;AAAA,wBAEJ,IAAA,CAAC,SAAU,EAAA,EAAA,YAAA,EAAW,cACpB,EAAA,QAAA,EAAA;AAAA,0BAAA,GAAA,CAAC,kBAAe,QAAY,EAAA,cAAA,EAAA,CAAA;AAAA,0BAC5B,GAAA;AAAA,YAAC,QAAA;AAAA,YAAA;AAAA,cACC,SAAU,EAAA,UAAA;AAAA,cACV,eAAa,EAAA,IAAA;AAAA,cACb,QAAA;AAAA,cACA,QAAU,EAAA,aAAA;AAAA,cACV,KAAA,EAAO,eAAe,MAAM,CAAA;AAAA,aAAA;AAAA,WAC9B;AAAA,SACF,EAAA,CAAA;AAAA,wBAEA,IAAA,CAAC,SAAU,EAAA,EAAA,YAAA,EAAW,cACpB,EAAA,QAAA,EAAA;AAAA,0BAAA,GAAA,CAAC,kBAAe,QAAY,EAAA,cAAA,EAAA,CAAA;AAAA,0BAC5B,GAAA;AAAA,YAAC,QAAA;AAAA,YAAA;AAAA,cACC,SAAU,EAAA,UAAA;AAAA,cACV,eAAa,EAAA,IAAA;AAAA,cACb,QAAA;AAAA,cACA,KAAO,EAAA,KAAA;AAAA,cACP,QAAU,EAAA,aAAA;AAAA,aAAA;AAAA,WACZ;AAAA,SACF,EAAA,CAAA;AAAA,wBACA,IAAA,CAAC,SAAU,EAAA,EAAA,YAAA,EAAW,kBACpB,EAAA,QAAA,EAAA;AAAA,0BAAA,GAAA,CAAC,kBAAe,QAAS,EAAA,WAAA,EAAA,CAAA;AAAA,0BACxB,IAAA,CAAA,iBAAA,EAAA,EAAkB,QAAU,EAAA,oBAAA,EAAsB,OAAO,KACxD,EAAA,QAAA,EAAA;AAAA,4BAAC,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,4BACA,GAAA,CAAC,YAAa,EAAA,EAAA,KAAA,EAAM,OAClB,EAAA,QAAA,kBAAA,GAAA,CAAC,QAAK,IAAK,EAAA,aAAA,EAAc,IAAM,EAAA,EAAA,EAAI,CACrC,EAAA,CAAA;AAAA,WACF,EAAA,CAAA;AAAA,SACF,EAAA,CAAA;AAAA,wBACA,IAAA,CAAC,SAAU,EAAA,EAAA,YAAA,EAAW,YACpB,EAAA,QAAA,EAAA;AAAA,0BAAA,GAAA,CAAC,kBAAe,QAAU,EAAA,YAAA,EAAA,CAAA;AAAA,+BACzB,iBAAkB,EAAA,EAAA,QAAA,EAAU,oBAAsB,EAAA,KAAA,EAAO,OAAO,EAC/D,EAAA,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,CAAA;AAAA,WACF,EAAA,CAAA;AAAA,SACF,EAAA,CAAA;AAAA,wBACA,GAAA;AAAA,UAAC,qBAAA;AAAA,UAAA;AAAA,YACC,kBAAA;AAAA,YACA,MAAA;AAAA,YACA,kBAAA;AAAA,YACA,iBAAA;AAAA,YACA,kBAAoB,EAAA,YAAA;AAAA,WAAA;AAAA,SACtB;AAAA,QAEC,uCACE,IAAA,CAAA,KAAA,EAAA,EAAI,SAAU,EAAA,kCAAA,EAAmC,cAAW,OAC3D,EAAA,QAAA,EAAA;AAAA,0BAAA,GAAA;AAAA,YAAC,MAAA;AAAA,YAAA;AAAA,cACC,SAAA,EAAW,GAAG,SAAS,CAAA,aAAA,CAAA;AAAA,cACvB,OAAS,EAAA,QAAA;AAAA,cACT,QAAU,EAAA,CAAA,CAAA;AAAA,cACX,QAAA,EAAA,QAAA;AAAA,aAAA;AAAA,WAED;AAAA,0BACA,GAAA;AAAA,YAAC,MAAA;AAAA,YAAA;AAAA,cACC,SAAA,EAAW,GAAG,SAAS,CAAA,WAAA,CAAA;AAAA,cACvB,OAAS,EAAA,MAAA;AAAA,cACT,OAAQ,EAAA,KAAA;AAAA,cACT,QAAA,EAAA,MAAA;AAAA,aAAA;AAAA,WAED;AAAA,SAAA,EACF,CAEA,mBAAA,IAAA;AAAA,UAAC,KAAA;AAAA,UAAA;AAAA,YACC,SAAA,EAAW,GAAG,SAAS,CAAA,UAAA,CAAA;AAAA,YACvB,YAAA,EAAY,wBAAwB,OAAU,GAAA,KAAA,CAAA;AAAA,YAE9C,QAAA,EAAA;AAAA,8BAAA,GAAA;AAAA,gBAAC,MAAA;AAAA,gBAAA;AAAA,kBACC,SAAA,EAAW,GAAG,SAAS,CAAA,cAAA,CAAA;AAAA,kBACvB,OAAQ,EAAA,WAAA;AAAA,kBACR,WAAU,EAAA,YAAA;AAAA,kBACV,OAAS,EAAA,kBAAA;AAAA,kBACV,QAAA,EAAA,UAAA;AAAA,iBAAA;AAAA,eAED;AAAA,8BACA,GAAA;AAAA,gBAAC,MAAA;AAAA,gBAAA;AAAA,kBACC,SAAA,EAAW,GAAG,SAAS,CAAA,cAAA,CAAA;AAAA,kBACvB,OAAQ,EAAA,WAAA;AAAA,kBACR,WAAU,EAAA,aAAA;AAAA,kBACV,OAAS,EAAA,kBAAA;AAAA,kBACV,QAAA,EAAA,MAAA;AAAA,iBAAA;AAAA,eAED;AAAA,aAAA;AAAA,WAAA;AAAA,SACF;AAAA,OAAA;AAAA,KAAA;AAAA,GAEJ,CAAA;AAEJ;;;;"}

package/esm/column-settings/useColumnSettings.js

@@ -1,4 +1,4 @@
-import { queryClosest, isValidPinLocation, isValidColumnAlignment, setCalculatedColumnName, updateColumnFormatting, updateColumnType, updateColumnRenderProps, getRegisteredCellRenderers } from '@vuu-ui/vuu-utils';
+import { queryClosest, getFieldName, isValidPinLocation, isValidColumnAlignment, setCalculatedColumnName, updateColumnFormatting, updateColumnType, updateColumnRenderProps, getRegisteredCellRenderers } from '@vuu-ui/vuu-utils';
 import { useState, useRef, useCallback, useEffect, useMemo } from 'react';
 
 const integerCellRenderers = [
@@ -39,17 +39,6 @@ const getAvailableCellRenderers = (column) => {
       return stringCellRenderers;
   }
 };
-const getFieldName = (input) => {
-  const saltFormField = input.closest(".saltFormField");
-  if (saltFormField && saltFormField.dataset.field) {
-    const {
-      dataset: { field }
-    } = saltFormField;
-    return field;
-  } else {
-    throw Error("named form field not found");
-  }
-};
 const getColumn = (columns, column) => {
   if (column.name === "::") {
     return column;

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

@@ -1 +1 @@
-{"version":3,"file":"useColumnSettings.js","sources":["../../src/column-settings/useColumnSettings.ts"],"sourcesContent":["import {\n  ColumnDescriptor,\n  TableConfig,\n  ColumnTypeFormatting,\n  ColumnSettingsProps,\n  ColumnTypeSimple,\n} from \"@vuu-ui/vuu-table-types\";\n\nimport {\n  CellRendererDescriptor,\n  ColumnRenderPropsChangeHandler,\n  getRegisteredCellRenderers,\n  isValidColumnAlignment,\n  isValidPinLocation,\n  setCalculatedColumnName,\n  updateColumnRenderProps,\n  updateColumnFormatting,\n  updateColumnType,\n  queryClosest,\n} from \"@vuu-ui/vuu-utils\";\nimport { VuuColumnDataType } from \"@vuu-ui/vuu-protocol-types\";\nimport {\n  FormEventHandler,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\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];\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  switch (column.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(getRegisteredCellRenderers(\"double\"));\n    case \"boolean\":\n      return booleanCellRenderers.concat(getRegisteredCellRenderers(\"boolean\"));\n    default:\n      return stringCellRenderers;\n  }\n};\n\nconst getFieldName = (input: HTMLInputElement | HTMLButtonElement): string => {\n  const saltFormField = input.closest(\".saltFormField\") as HTMLElement;\n  if (saltFormField && saltFormField.dataset.field) {\n    const {\n      dataset: { field },\n    } = saltFormField;\n    return field;\n  } else {\n    throw Error(\"named form field not found\");\n  }\n};\n\nconst getColumn = (columns: ColumnDescriptor[], column: ColumnDescriptor) => {\n  if (column.name === \"::\") {\n    // this is a new calculated column\n    return column;\n  } else {\n    const col = columns.find((col) => col.name === column.name);\n    if (col) {\n      return col;\n    }\n    throw Error(`columns does not contain column ${name}`);\n  }\n};\n\nconst replaceColumn = (\n  tableConfig: TableConfig,\n  column: ColumnDescriptor\n): TableConfig => ({\n  ...tableConfig,\n  columns: tableConfig.columns.map((col) =>\n    col.name === column.name ? column : col\n  ),\n});\n\nexport const useColumnSettings = ({\n  column: columnProp,\n  onCancelCreateColumn,\n  onConfigChange,\n  onCreateCalculatedColumn,\n  tableConfig,\n}: Omit<ColumnSettingsProps, \"vuuTable\">) => {\n  const [column, setColumn] = useState<ColumnDescriptor>(\n    getColumn(tableConfig.columns, columnProp)\n  );\n  const columnRef = useRef<ColumnDescriptor>(column);\n  const [inEditMode, setEditMode] = useState(column.name === \"::\");\n\n  const handleEditCalculatedcolumn = useCallback(() => {\n    columnRef.current = column;\n    setEditMode(true);\n  }, [column]);\n\n  useEffect(() => {\n    setColumn(columnProp);\n    setEditMode(columnProp.name === \"::\");\n  }, [columnProp]);\n\n  const availableRenderers = useMemo(() => {\n    return getAvailableCellRenderers(column);\n  }, [column]);\n\n  const handleInputCommit = useCallback(() => {\n    onConfigChange(replaceColumn(tableConfig, column));\n  }, [column, onConfigChange, tableConfig]);\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 || undefined,\n              };\n              setColumn(newColumn);\n              onConfigChange(replaceColumn(tableConfig, 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              onConfigChange(replaceColumn(tableConfig, newColumn));\n\n              break;\n            }\n        }\n      }\n    },\n    [column, onConfigChange, tableConfig]\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        setColumn((state) => ({ ...state, width: parseInt(value) }));\n        break;\n    }\n  }, []);\n\n  const handleChangeCalculatedColumnName = useCallback((name: string) => {\n    setColumn((state) => ({ ...state, name }));\n  }, []);\n\n  const handleChangeFormatting = useCallback(\n    (formatting: ColumnTypeFormatting) => {\n      const newColumn = updateColumnFormatting(column, formatting);\n      setColumn(newColumn);\n      onConfigChange(replaceColumn(tableConfig, newColumn));\n    },\n    [column, onConfigChange, tableConfig]\n  );\n\n  const handleChangeType = useCallback(\n    (type: ColumnTypeSimple) => {\n      const updatedColumn = updateColumnType(column, type);\n      setColumn(updatedColumn);\n      onConfigChange(replaceColumn(tableConfig, updatedColumn));\n    },\n    [column, onConfigChange, tableConfig]\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 handleChangeRendering = useCallback<ColumnRenderPropsChangeHandler>(\n    (renderProps) => {\n      if (renderProps) {\n        const newColumn: ColumnDescriptor = updateColumnRenderProps(\n          column,\n          renderProps\n        );\n        setColumn(newColumn);\n        onConfigChange(replaceColumn(tableConfig, newColumn));\n      }\n    },\n    [column, onConfigChange, tableConfig]\n  );\n\n  const navigateColumn = useCallback(\n    ({ moveBy }: { moveBy: number }) => {\n      const { columns } = tableConfig;\n      const index = columns.indexOf(column) + moveBy;\n      const newColumn = columns[index];\n      if (newColumn) {\n        setColumn(newColumn);\n      }\n    },\n    [column, tableConfig]\n  );\n  const navigateNextColumn = useCallback(() => {\n    navigateColumn({ moveBy: 1 });\n  }, [navigateColumn]);\n\n  const navigatePrevColumn = useCallback(() => {\n    navigateColumn({ moveBy: -1 });\n  }, [navigateColumn]);\n\n  const handleSaveCalculatedColumn = useCallback(() => {\n    // TODO validate expression, unique name\n    onCreateCalculatedColumn(column);\n  }, [column, onCreateCalculatedColumn]);\n\n  const handleCancelEdit = useCallback(() => {\n    if (columnProp.name === \"::\") {\n      onCancelCreateColumn();\n    } else {\n      if (columnRef.current !== undefined && columnRef.current !== column) {\n        setColumn(columnRef.current);\n      }\n      setEditMode(false);\n    }\n  }, [column, columnProp.name, onCancelCreateColumn]);\n\n  return {\n    availableRenderers,\n    editCalculatedColumn: inEditMode,\n    column,\n    navigateNextColumn,\n    navigatePrevColumn,\n    onCancel: handleCancelEdit,\n    onChange: handleChange,\n    onChangeCalculatedColumnName: handleChangeCalculatedColumnName,\n    onChangeFormatting: handleChangeFormatting,\n    onChangeRendering: handleChangeRendering,\n    onChangeServerDataType: handleChangeServerDataType,\n    onChangeToggleButton: handleChangeToggleButton,\n    onChangeType: handleChangeType,\n    onEditCalculatedColumn: handleEditCalculatedcolumn,\n    onInputCommit: handleInputCommit,\n    onSave: handleSaveCalculatedColumn,\n  };\n};\n"],"names":["col","name"],"mappings":"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"}
+{"version":3,"file":"useColumnSettings.js","sources":["../../src/column-settings/useColumnSettings.ts"],"sourcesContent":["import {\n  ColumnDescriptor,\n  TableConfig,\n  ColumnTypeFormatting,\n  ColumnSettingsProps,\n  ColumnTypeSimple,\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} from \"@vuu-ui/vuu-utils\";\nimport { VuuColumnDataType } from \"@vuu-ui/vuu-protocol-types\";\nimport {\n  FormEventHandler,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\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];\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  switch (column.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(getRegisteredCellRenderers(\"double\"));\n    case \"boolean\":\n      return booleanCellRenderers.concat(getRegisteredCellRenderers(\"boolean\"));\n    default:\n      return stringCellRenderers;\n  }\n};\n\nconst getColumn = (columns: ColumnDescriptor[], column: ColumnDescriptor) => {\n  if (column.name === \"::\") {\n    // this is a new calculated column\n    return column;\n  } else {\n    const col = columns.find((col) => col.name === column.name);\n    if (col) {\n      return col;\n    }\n    throw Error(`columns does not contain column ${name}`);\n  }\n};\n\nconst replaceColumn = (\n  tableConfig: TableConfig,\n  column: ColumnDescriptor\n): TableConfig => ({\n  ...tableConfig,\n  columns: tableConfig.columns.map((col) =>\n    col.name === column.name ? column : col\n  ),\n});\n\nexport const useColumnSettings = ({\n  column: columnProp,\n  onCancelCreateColumn,\n  onConfigChange,\n  onCreateCalculatedColumn,\n  tableConfig,\n}: Omit<ColumnSettingsProps, \"vuuTable\">) => {\n  const [column, setColumn] = useState<ColumnDescriptor>(\n    getColumn(tableConfig.columns, columnProp)\n  );\n  const columnRef = useRef<ColumnDescriptor>(column);\n  const [inEditMode, setEditMode] = useState(column.name === \"::\");\n\n  const handleEditCalculatedcolumn = useCallback(() => {\n    columnRef.current = column;\n    setEditMode(true);\n  }, [column]);\n\n  useEffect(() => {\n    setColumn(columnProp);\n    setEditMode(columnProp.name === \"::\");\n  }, [columnProp]);\n\n  const availableRenderers = useMemo(() => {\n    return getAvailableCellRenderers(column);\n  }, [column]);\n\n  const handleInputCommit = useCallback(() => {\n    onConfigChange(replaceColumn(tableConfig, column));\n  }, [column, onConfigChange, tableConfig]);\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 || undefined,\n              };\n              setColumn(newColumn);\n              onConfigChange(replaceColumn(tableConfig, 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              onConfigChange(replaceColumn(tableConfig, newColumn));\n\n              break;\n            }\n        }\n      }\n    },\n    [column, onConfigChange, tableConfig]\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        setColumn((state) => ({ ...state, width: parseInt(value) }));\n        break;\n    }\n  }, []);\n\n  const handleChangeCalculatedColumnName = useCallback((name: string) => {\n    setColumn((state) => ({ ...state, name }));\n  }, []);\n\n  const handleChangeFormatting = useCallback(\n    (formatting: ColumnTypeFormatting) => {\n      const newColumn = updateColumnFormatting(column, formatting);\n      setColumn(newColumn);\n      onConfigChange(replaceColumn(tableConfig, newColumn));\n    },\n    [column, onConfigChange, tableConfig]\n  );\n\n  const handleChangeType = useCallback(\n    (type: ColumnTypeSimple) => {\n      const updatedColumn = updateColumnType(column, type);\n      setColumn(updatedColumn);\n      onConfigChange(replaceColumn(tableConfig, updatedColumn));\n    },\n    [column, onConfigChange, tableConfig]\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 handleChangeRendering = useCallback<ColumnRenderPropsChangeHandler>(\n    (renderProps) => {\n      if (renderProps) {\n        const newColumn: ColumnDescriptor = updateColumnRenderProps(\n          column,\n          renderProps\n        );\n        setColumn(newColumn);\n        onConfigChange(replaceColumn(tableConfig, newColumn));\n      }\n    },\n    [column, onConfigChange, tableConfig]\n  );\n\n  const navigateColumn = useCallback(\n    ({ moveBy }: { moveBy: number }) => {\n      const { columns } = tableConfig;\n      const index = columns.indexOf(column) + moveBy;\n      const newColumn = columns[index];\n      if (newColumn) {\n        setColumn(newColumn);\n      }\n    },\n    [column, tableConfig]\n  );\n  const navigateNextColumn = useCallback(() => {\n    navigateColumn({ moveBy: 1 });\n  }, [navigateColumn]);\n\n  const navigatePrevColumn = useCallback(() => {\n    navigateColumn({ moveBy: -1 });\n  }, [navigateColumn]);\n\n  const handleSaveCalculatedColumn = useCallback(() => {\n    // TODO validate expression, unique name\n    onCreateCalculatedColumn(column);\n  }, [column, onCreateCalculatedColumn]);\n\n  const handleCancelEdit = useCallback(() => {\n    if (columnProp.name === \"::\") {\n      onCancelCreateColumn();\n    } else {\n      if (columnRef.current !== undefined && columnRef.current !== column) {\n        setColumn(columnRef.current);\n      }\n      setEditMode(false);\n    }\n  }, [column, columnProp.name, onCancelCreateColumn]);\n\n  return {\n    availableRenderers,\n    editCalculatedColumn: inEditMode,\n    column,\n    navigateNextColumn,\n    navigatePrevColumn,\n    onCancel: handleCancelEdit,\n    onChange: handleChange,\n    onChangeCalculatedColumnName: handleChangeCalculatedColumnName,\n    onChangeFormatting: handleChangeFormatting,\n    onChangeRendering: handleChangeRendering,\n    onChangeServerDataType: handleChangeServerDataType,\n    onChangeToggleButton: handleChangeToggleButton,\n    onChangeType: handleChangeType,\n    onEditCalculatedColumn: handleEditCalculatedcolumn,\n    onInputCommit: handleInputCommit,\n    onSave: handleSaveCalculatedColumn,\n  };\n};\n"],"names":["col","name"],"mappings":"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"}

package/package.json

@@ -1,23 +1,23 @@
 {
-  "version": "0.8.55",
+  "version": "0.8.57",
   "author": "heswell",
   "license": "Apache-2.0",
   "devDependencies": {
-    "@vuu-ui/vuu-filter-types": "0.8.55",
-    "@vuu-ui/vuu-protocol-types": "0.8.55"
+    "@vuu-ui/vuu-filter-types": "0.8.57",
+    "@vuu-ui/vuu-protocol-types": "0.8.57"
   },
   "dependencies": {
-    "@vuu-ui/vuu-codemirror": "0.8.55",
-    "@vuu-ui/vuu-data-react": "0.8.55",
-    "@vuu-ui/vuu-data-types": "0.8.55",
-    "@vuu-ui/vuu-table-types": "0.8.55",
-    "@vuu-ui/vuu-layout": "0.8.55",
-    "@vuu-ui/vuu-popups": "0.8.55",
-    "@vuu-ui/vuu-table": "0.8.55",
-    "@vuu-ui/vuu-utils": "0.8.55",
-    "@vuu-ui/vuu-ui-controls": "0.8.55",
+    "@vuu-ui/vuu-codemirror": "0.8.57",
+    "@vuu-ui/vuu-data-react": "0.8.57",
+    "@vuu-ui/vuu-data-types": "0.8.57",
+    "@vuu-ui/vuu-table-types": "0.8.57",
+    "@vuu-ui/vuu-layout": "0.8.57",
+    "@vuu-ui/vuu-popups": "0.8.57",
+    "@vuu-ui/vuu-table": "0.8.57",
+    "@vuu-ui/vuu-utils": "0.8.57",
+    "@vuu-ui/vuu-ui-controls": "0.8.57",
     "@lezer/lr": "1.3.4",
-    "@salt-ds/core": "1.17.0",
+    "@salt-ds/core": "1.22.0",
     "@salt-ds/styles": "0.2.1",
     "@salt-ds/window": "0.1.1"
   },

package/types/column-expression-input/useColumnExpressionEditor.d.ts

@@ -21,5 +21,5 @@ export interface ExpressionSuggestionConsumer {
 export declare const useColumnExpressionEditor: ({ onChange, onSubmitExpression, source, suggestionProvider, }: ColumnExpressionInputProps) => {
     editorRef: import("react").RefObject<HTMLDivElement>;
     clearInput: () => void;
-    onBlur: FocusEventHandler<Element>;
+    onBlur: FocusEventHandler;
 };

package/types/column-expression-panel/ColumnExpressionPanel.d.ts

@@ -1,5 +1,5 @@
-import { ColumnDescriptor, ColumnSettingsProps } from "@vuu-ui/vuu-table-types";
 import { VuuColumnDataType } from "@vuu-ui/vuu-protocol-types";
+import { ColumnDescriptor, ColumnSettingsProps } from "@vuu-ui/vuu-table-types";
 import { HTMLAttributes } from "react";
 export interface ColumnExpressionPanelProps extends HTMLAttributes<HTMLDivElement>, Pick<ColumnSettingsProps, "tableConfig" | "vuuTable"> {
     column: ColumnDescriptor;

package/types/column-expression-panel/useColumnExpression.d.ts

@@ -1,10 +1,10 @@
 import { ColumnDescriptor } from "@vuu-ui/vuu-table-types";
-import { FormEventHandler } from "react";
+import { FormEventHandler, SyntheticEvent } from "react";
 import { ColumnExpressionPanelProps } from "./ColumnExpressionPanel";
 export type ColumnExpressionHookProps = Pick<ColumnExpressionPanelProps, "column" | "onChangeName" | "onChangeServerDataType">;
 export declare const useColumnExpression: ({ column: columnProp, onChangeName: onChangeNameProp, onChangeServerDataType: onChangeServerDataTypeProp, }: ColumnExpressionHookProps) => {
     column: ColumnDescriptor;
     onChangeExpression: (value: string) => void;
-    onChangeName: FormEventHandler<Element>;
-    onChangeServerDataType: (evt: any, value: string | null) => void;
+    onChangeName: FormEventHandler;
+    onChangeServerDataType: (_e: SyntheticEvent, [serverDataType]: string[]) => void;
 };

package/types/column-settings/useColumnSettings.d.ts

@@ -9,12 +9,12 @@ export declare const useColumnSettings: ({ column: columnProp, onCancelCreateCol
     navigateNextColumn: () => void;
     navigatePrevColumn: () => void;
     onCancel: () => void;
-    onChange: FormEventHandler<Element>;
+    onChange: FormEventHandler;
     onChangeCalculatedColumnName: (name: string) => void;
     onChangeFormatting: (formatting: ColumnTypeFormatting) => void;
     onChangeRendering: ColumnRenderPropsChangeHandler;
     onChangeServerDataType: (serverDataType: VuuColumnDataType) => void;
-    onChangeToggleButton: FormEventHandler<Element>;
+    onChangeToggleButton: FormEventHandler;
     onChangeType: (type: ColumnTypeSimple) => void;
     onEditCalculatedColumn: () => void;
     onInputCommit: () => void;

package/types/table-settings/useTableSettings.d.ts

@@ -12,7 +12,7 @@ export declare const useTableSettings: ({ availableColumns: availableColumnsProp
     onChangeColumnLabels: (evt: SyntheticEvent) => void;
     onChangeTableAttribute: (evt: MouseEvent<HTMLButtonElement>) => void;
     onColumnChange: ColumnChangeHandler;
-    onCommitColumnWidth: Commithandler<string>;
+    onCommitColumnWidth: Commithandler;
     onMoveListItem: (fromIndex: number, toIndex: number) => void;
     tableConfig: TableConfig;
 };