@vuu-ui/vuu-table-extras 0.13.8 → 0.13.10

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

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

package/cjs/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":["useState","getTypeFormattingFromColumn","useCallback","jsxs","FormField","jsx","FormFieldLabel","Input","Switch"],"mappings":"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"}

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

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

package/cjs/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 {\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":["useMemo","isTypeDescriptor","isColumnTypeRenderer","getCellRendererOptions","getConfigurationEditor","useCallback","jsxs","jsx","FormField","FormFieldLabel","Dropdown","Option","BaseNumericFormattingSettings","LongTypeFormattingSettings"],"mappings":"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"}

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

@@ -0,0 +1,99 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var vuuUtils = require('@vuu-ui/vuu-utils');
+var core = require('@salt-ds/core');
+var react = require('react');
+
+const toggleValues = ["date", "time", "both"];
+function getToggleValue(pattern) {
+  return !pattern.time ? "date" : !pattern.date ? "time" : "both";
+}
+const getSelectedPattern = (pattern) => {
+  if (vuuUtils.isDatePattern(pattern)) {
+    return [pattern];
+  } else if (vuuUtils.isTimePattern(pattern)) {
+    return [pattern];
+  } else {
+    return void 0;
+  }
+};
+const DateTimeFormattingSettings = ({ column, onChangeFormatting: onChange }) => {
+  const formatting = vuuUtils.getTypeFormattingFromColumn(column);
+  const { pattern = vuuUtils.fallbackDateTimePattern } = formatting;
+  const toggleValue = react.useMemo(() => getToggleValue(pattern), [pattern]);
+  const [fallbackState, setFallbackState] = react.useState(
+    {
+      time: pattern.time ?? vuuUtils.defaultPatternsByType.time,
+      date: pattern.date ?? vuuUtils.defaultPatternsByType.date
+    }
+  );
+  const onPatternChange = react.useCallback(
+    (pattern2) => onChange({ ...formatting, pattern: pattern2 }),
+    [onChange, formatting]
+  );
+  const onDropdownChange = react.useCallback(
+    (dateTime) => (_, [selectedPattern]) => {
+      const updatedPattern = {
+        ...pattern ?? {},
+        [dateTime]: selectedPattern
+      };
+      setFallbackState((s) => ({
+        time: updatedPattern.time ?? s.time,
+        date: updatedPattern.date ?? s.date
+      }));
+      onPatternChange(updatedPattern);
+    },
+    [onPatternChange, pattern]
+  );
+  const onToggleChange = react.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__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(core.FormField, { labelPlacement: "top", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(core.FormFieldLabel, { children: "Display" }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        core.ToggleButtonGroup,
+        {
+          className: "vuuToggleButtonGroup",
+          onChange: onToggleChange,
+          value: toggleValue,
+          "data-variant": "primary",
+          children: toggleValues.map((v) => /* @__PURE__ */ jsxRuntime.jsx(core.ToggleButton, { value: v, children: v.toUpperCase() }, v))
+        }
+      )
+    ] }),
+    ["date", "time"].filter((v) => !!pattern[v]).map((v) => /* @__PURE__ */ jsxRuntime.jsxs(core.FormField, { labelPlacement: "top", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(core.FormFieldLabel, { children: `${vuuUtils.dateTimeLabelByType[v]} pattern` }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        core.Dropdown,
+        {
+          onSelectionChange: onDropdownChange(v),
+          selected: getSelectedPattern(pattern[v]),
+          children: vuuUtils.supportedDateTimePatterns[v].map((pattern2, i) => /* @__PURE__ */ jsxRuntime.jsx(core.Option, { value: pattern2, children: pattern2 }, i))
+        }
+      )
+    ] }, v))
+  ] });
+};
+
+exports.DateTimeFormattingSettings = DateTimeFormattingSettings;
+//# sourceMappingURL=DateTimeFormattingSettings.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DateTimeFormattingSettings.js","sources":["../../src/column-formatting-settings/DateTimeFormattingSettings.tsx"],"sourcesContent":["import { DateTimeDataValueDescriptor } from \"@vuu-ui/vuu-data-types\";\nimport { FormattingSettingsProps } from \"@vuu-ui/vuu-table-types\";\nimport {\n  DatePattern,\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 React, { SyntheticEvent, useCallback, useMemo, useState } from \"react\";\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<DateTimeDataValueDescriptor>\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":["isDatePattern","isTimePattern","getTypeFormattingFromColumn","fallbackDateTimePattern","useMemo","useState","defaultPatternsByType","useCallback","pattern","jsxs","Fragment","FormField","jsx","FormFieldLabel","ToggleButtonGroup","ToggleButton","dateTimeLabelByType","Dropdown","supportedDateTimePatterns","Option"],"mappings":";;;;;;;AAwBA,MAAM,YAAe,GAAA,CAAC,MAAQ,EAAA,MAAA,EAAQ,MAAM,CAAA;AAG5C,SAAS,eAAe,OAAuC,EAAA;AAC7D,EAAA,OAAO,CAAC,OAAQ,CAAA,IAAA,GAAO,SAAS,CAAC,OAAA,CAAQ,OAAO,MAAS,GAAA,MAAA;AAC3D;AAIA,MAAM,kBAAA,GAAqB,CACzB,OAC8C,KAAA;AAC9C,EAAI,IAAAA,sBAAA,CAAc,OAAO,CAAG,EAAA;AAC1B,IAAA,OAAO,CAAC,OAAO,CAAA;AAAA,GACjB,MAAA,IAAWC,sBAAc,CAAA,OAAO,CAAG,EAAA;AACjC,IAAA,OAAO,CAAC,OAAO,CAAA;AAAA,GACV,MAAA;AACL,IAAO,OAAA,KAAA,CAAA;AAAA;AAEX,CAAA;AAEO,MAAM,6BAET,CAAC,EAAE,MAAQ,EAAA,kBAAA,EAAoB,UAAe,KAAA;AAChD,EAAM,MAAA,UAAA,GAAaC,qCAA4B,MAAM,CAAA;AACrD,EAAM,MAAA,EAAE,OAAU,GAAAC,gCAAA,EAA4B,GAAA,UAAA;AAC9C,EAAM,MAAA,WAAA,GAAcC,cAAQ,MAAM,cAAA,CAAe,OAAO,CAAG,EAAA,CAAC,OAAO,CAAC,CAAA;AAEpE,EAAM,MAAA,CAAC,aAAe,EAAA,gBAAgB,CAAI,GAAAC,cAAA;AAAA,IACxC;AAAA,MACE,IAAA,EAAM,OAAQ,CAAA,IAAA,IAAQC,8BAAsB,CAAA,IAAA;AAAA,MAC5C,IAAA,EAAM,OAAQ,CAAA,IAAA,IAAQA,8BAAsB,CAAA;AAAA;AAC9C,GACF;AAEA,EAAA,MAAM,eAAkB,GAAAC,iBAAA;AAAA,IACtB,CAACC,aAA6B,QAAS,CAAA,EAAE,GAAG,UAAY,EAAA,OAAA,EAAAA,UAAS,CAAA;AAAA,IACjE,CAAC,UAAU,UAAU;AAAA,GACvB;AAEA,EAAA,MAAM,gBAAmB,GAAAD,iBAAA;AAAA,IAQvB,CAAC,QACC,KAAA,CAAC,CAAG,EAAA,CAAC,eAAe,CAAM,KAAA;AACxB,MAAA,MAAM,cAAiB,GAAA;AAAA,QACrB,GAAI,WAAW,EAAC;AAAA,QAChB,CAAC,QAAQ,GAAG;AAAA,OACd;AACA,MAAA,gBAAA,CAAiB,CAAC,CAAO,MAAA;AAAA,QACvB,IAAA,EAAM,cAAe,CAAA,IAAA,IAAQ,CAAE,CAAA,IAAA;AAAA,QAC/B,IAAA,EAAM,cAAe,CAAA,IAAA,IAAQ,CAAE,CAAA;AAAA,OAC/B,CAAA,CAAA;AACF,MAAA,eAAA,CAAgB,cAAc,CAAA;AAAA,KAChC;AAAA,IACF,CAAC,iBAAiB,OAAO;AAAA,GAC3B;AAEA,EAAA,MAAM,cAAiB,GAAAA,iBAAA;AAAA,IACrB,CAAC,IAAmD,KAAA;AAClD,MAAM,MAAA,KAAA,GAAQ,KAAK,aAAc,CAAA,KAAA;AACjC,MAAA,QAAQ,KAAO;AAAA,QACb,KAAK,MAAA;AACH,UAAA,OAAO,eAAgB,CAAA;AAAA,YACrB,CAAC,KAAK,GAAG,QAAQ,KAAK,CAAA,IAAK,cAAc,KAAK;AAAA,WAC/C,CAAA;AAAA,QACH,KAAK,MAAA;AACH,UAAA,OAAO,eAAgB,CAAA;AAAA,YACrB,CAAC,KAAK,GAAG,QAAQ,KAAK,CAAA,IAAK,cAAc,KAAK;AAAA,WAC/C,CAAA;AAAA,QACH,KAAK,MAAA;AACH,UAAA,OAAO,eAAgB,CAAA;AAAA,YACrB,IAAA,EAAM,OAAQ,CAAA,IAAA,IAAQ,aAAc,CAAA,IAAA;AAAA,YACpC,IAAA,EAAM,OAAQ,CAAA,IAAA,IAAQ,aAAc,CAAA;AAAA,WACrC,CAAA;AAAA;AACL,KACF;AAAA,IACA,CAAC,eAAiB,EAAA,OAAA,EAAS,aAAa;AAAA,GAC1C;AAEA,EAAA,uBAEIE,eAAA,CAAAC,mBAAA,EAAA,EAAA,QAAA,EAAA;AAAA,oBAACD,eAAA,CAAAE,cAAA,EAAA,EAAU,gBAAe,KACxB,EAAA,QAAA,EAAA;AAAA,sBAAAC,cAAA,CAACC,uBAAgB,QAAU,EAAA,SAAA,EAAA,CAAA;AAAA,sBAC3BD,cAAA;AAAA,QAACE,sBAAA;AAAA,QAAA;AAAA,UACC,SAAU,EAAA,sBAAA;AAAA,UACV,QAAU,EAAA,cAAA;AAAA,UACV,KAAO,EAAA,WAAA;AAAA,UACP,cAAa,EAAA,SAAA;AAAA,UAEZ,QAAa,EAAA,YAAA,CAAA,GAAA,CAAI,CAAC,CAAA,qBAChBF,cAAA,CAAAG,iBAAA,EAAA,EAAqB,KAAO,EAAA,CAAA,EAC1B,QAAE,EAAA,CAAA,CAAA,WAAA,EADc,EAAA,EAAA,CAEnB,CACD;AAAA;AAAA;AACH,KACF,EAAA,CAAA;AAAA,IAEE,CAAC,MAAQ,EAAA,MAAM,EACd,MAAO,CAAA,CAAC,MAAM,CAAC,CAAC,QAAQ,CAAC,CAAC,EAC1B,GAAI,CAAA,CAAC,sBACHN,eAAA,CAAAE,cAAA,EAAA,EAAU,gBAAe,KACxB,EAAA,QAAA,EAAA;AAAA,sBAAAC,cAAA,CAACC,mBAAgB,EAAA,EAAA,QAAA,EAAA,CAAA,EAAGG,4BAAoB,CAAA,CAAC,CAAC,CAAW,QAAA,CAAA,EAAA,CAAA;AAAA,sBACrDJ,cAAA;AAAA,QAACK,aAAA;AAAA,QAAA;AAAA,UACC,iBAAA,EAAmB,iBAAiB,CAAC,CAAA;AAAA,UACrC,QAAU,EAAA,kBAAA,CAAmB,OAAQ,CAAA,CAAC,CAAC,CAAA;AAAA,UAEtC,QAA0B,EAAAC,kCAAA,CAAA,CAAC,CAAE,CAAA,GAAA,CAAI,CAACV,QAAS,EAAA,CAAA,qBACzCI,cAAA,CAAAO,WAAA,EAAA,EAAe,KAAOX,EAAAA,QAAAA,EACpB,QAAAA,EAAAA,QAAAA,EAAAA,EADU,CAEb,CACD;AAAA;AAAA;AACH,KAAA,EAAA,EAXmC,CAYrC,CACD;AAAA,GACL,EAAA,CAAA;AAEJ;;;;"}

package/cjs/column-formatting-settings/LongTypeFormattingSettings.css.js

@@ -0,0 +1,6 @@
+'use strict';
+
+var longTypeFormattingSettingsCss = ".vuuLongColumnFormattingSettings {\n  display: flex;\n  flex-direction: column;\n  gap: var(--salt-spacing-200);\n  padding-top: 6px;\n}\n";
+
+module.exports = longTypeFormattingSettingsCss;
+//# sourceMappingURL=LongTypeFormattingSettings.css.js.map

package/cjs/column-formatting-settings/LongTypeFormattingSettings.css.js.map

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

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

@@ -0,0 +1,49 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var core = require('@salt-ds/core');
+var styles = require('@salt-ds/styles');
+var window = require('@salt-ds/window');
+var vuuUtils = require('@vuu-ui/vuu-utils');
+var DateTimeFormattingSettings = require('./DateTimeFormattingSettings.js');
+var BaseNumericFormattingSettings = require('./BaseNumericFormattingSettings.js');
+var LongTypeFormattingSettings$1 = require('./LongTypeFormattingSettings.css.js');
+
+const classBase = "vuuLongColumnFormattingSettings";
+const LongTypeFormattingSettings = (props) => {
+  const targetWindow = window.useWindow();
+  styles.useComponentCssInjection({
+    testId: "vuu-long-formatting-settings",
+    css: LongTypeFormattingSettings$1,
+    window: targetWindow
+  });
+  const { column, onChangeColumnType: onChangeType } = props;
+  const type = vuuUtils.isTypeDescriptor(column.type) ? column.type.name : column.type;
+  const handleToggleChange = react.useCallback(
+    (event) => {
+      const value = event.currentTarget.value;
+      onChangeType(value);
+    },
+    [onChangeType]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: classBase, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(core.FormField, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(core.FormFieldLabel, { children: "Type inferred as" }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        core.ToggleButtonGroup,
+        {
+          className: "vuuToggleButtonGroup",
+          onChange: handleToggleChange,
+          value: type ?? "number",
+          children: toggleValues.map((v) => /* @__PURE__ */ jsxRuntime.jsx(core.ToggleButton, { value: v, children: v.toUpperCase() }, v))
+        }
+      )
+    ] }),
+    vuuUtils.isDateTimeDataValue(column) ? /* @__PURE__ */ jsxRuntime.jsx(DateTimeFormattingSettings.DateTimeFormattingSettings, { ...props, column }) : /* @__PURE__ */ jsxRuntime.jsx(BaseNumericFormattingSettings.BaseNumericFormattingSettings, { ...props })
+  ] });
+};
+const toggleValues = ["number", "date/time"];
+
+exports.LongTypeFormattingSettings = LongTypeFormattingSettings;
+//# sourceMappingURL=LongTypeFormattingSettings.js.map

package/cjs/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 { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { isDateTimeDataValue, isTypeDescriptor } from \"@vuu-ui/vuu-utils\";\nimport { DateTimeFormattingSettings } from \"./DateTimeFormattingSettings\";\nimport { BaseNumericFormattingSettings } from \"./BaseNumericFormattingSettings\";\nimport { FormattingSettingsProps } from \"@vuu-ui/vuu-table-types\";\n\nimport longTypeFormattingSettingsCss from \"./LongTypeFormattingSettings.css\";\n\nconst classBase = \"vuuLongColumnFormattingSettings\";\n\nexport const LongTypeFormattingSettings = (props: FormattingSettingsProps) => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-long-formatting-settings\",\n    css: longTypeFormattingSettingsCss,\n    window: targetWindow,\n  });\n\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      {isDateTimeDataValue(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":["useWindow","useComponentCssInjection","longTypeFormattingSettingsCss","isTypeDescriptor","useCallback","jsxs","FormField","jsx","FormFieldLabel","ToggleButtonGroup","ToggleButton","isDateTimeDataValue","DateTimeFormattingSettings","BaseNumericFormattingSettings"],"mappings":";;;;;;;;;;;;AAgBA,MAAM,SAAY,GAAA,iCAAA;AAEL,MAAA,0BAAA,GAA6B,CAAC,KAAmC,KAAA;AAC5E,EAAA,MAAM,eAAeA,gBAAU,EAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,8BAAA;AAAA,IACR,GAAK,EAAAC,4BAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EAAA,MAAM,EAAE,MAAA,EAAQ,kBAAoB,EAAA,YAAA,EAAiB,GAAA,KAAA;AACrD,EAAM,MAAA,IAAA,GAAOC,0BAAiB,MAAO,CAAA,IAAI,IAAI,MAAO,CAAA,IAAA,CAAK,OAAO,MAAO,CAAA,IAAA;AAEvE,EAAA,MAAM,kBAAqB,GAAAC,iBAAA;AAAA,IACzB,CAAC,KAA0D,KAAA;AACzD,MAAM,MAAA,KAAA,GAAQ,MAAM,aAAc,CAAA,KAAA;AAClC,MAAA,YAAA,CAAa,KAAK,CAAA;AAAA,KACpB;AAAA,IACA,CAAC,YAAY;AAAA,GACf;AAEA,EACE,uBAAAC,eAAA,CAAC,KAAI,EAAA,EAAA,SAAA,EAAW,SACd,EAAA,QAAA,EAAA;AAAA,oBAAAA,eAAA,CAACC,cACC,EAAA,EAAA,QAAA,EAAA;AAAA,sBAAAC,cAAA,CAACC,uBAAgB,QAAmB,EAAA,kBAAA,EAAA,CAAA;AAAA,sBACpCD,cAAA;AAAA,QAACE,sBAAA;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,qBAChBF,cAAA,CAAAG,iBAAA,EAAA,EAAqB,KAAO,EAAA,CAAA,EAC1B,QAAE,EAAA,CAAA,CAAA,WAAA,EADc,EAAA,EAAA,CAEnB,CACD;AAAA;AAAA;AACH,KACF,EAAA,CAAA;AAAA,IAECC,4BAAoB,CAAA,MAAM,CACzB,mBAAAJ,cAAA,CAACK,qDAA4B,EAAA,EAAA,GAAG,KAAO,EAAA,MAAA,EAAgB,CAEvD,mBAAAL,cAAA,CAACM,2DAA+B,EAAA,EAAA,GAAG,KAAO,EAAA;AAAA,GAE9C,EAAA,CAAA;AAEJ;AAEA,MAAM,YAAA,GAAe,CAAC,QAAA,EAAU,WAAW,CAAA;;;;"}

package/cjs/column-list/ColumnList.css.js

@@ -0,0 +1,6 @@
+'use strict';
+
+var columnList = ".vuuColumnList {\n  --vuuMeasuredContainer-flex: 1 1 1px;\n  --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>');\n  --vuuList-borderStyle: none;\n  --vuuListItem-padding: 0;\n  display: flex;\n  flex-direction: column;\n\n\n  .saltOption {\n    align-items: center;\n    background-color: var(--salt-container-primary-background);\n    border-bottom: var(--vuuColumnListItem-border, solid) 1px\n      var(--salt-separable-tertiary-borderColor);\n    gap: var(--salt-spacing-200);\n    padding: var(--salt=spacin-100) 0;\n\n    .vuuIcon {\n      --vuu-icon-color: var(--salt-content-secondary-foreground);\n    }\n  }\n\n  .vuuColumnList-text {\n    flex: 1 1 auto;\n  }\n\n}\n\n[data-icon=\"function\"] {\n  --vuu-icon-svg: var(--vuu-svg-function);\n}\n\n\n\n.vuuColumnList-withColumnNavgation {\n  .vuuColumnList-text:hover {\n    font-weight: 600;\n    text-decoration: underline;\n  }\n}\n\n.vuuColumnList-header {\n  border-top: solid 2px var(--vuu-color-gray-30);\n  flex: 0 0 40px;\n  font-size: 14px;\n  font-weight: 600;\n  padding-top: 24px;\n}\n\n.vuuColumnList-colHeadings {\n  border-bottom: solid 2px var(--vuu-color-gray-30);\n  color: var(--vuu-color-gray-50);\n  display: flex;\n  flex: 0 0 24px;\n  font-size: 10px;\n  justify-content: space-between;\n  margin-top: 16px;\n  padding-bottom: 8px;\n}\n";
+
+module.exports = columnList;
+//# sourceMappingURL=ColumnList.css.js.map

package/cjs/column-list/ColumnList.css.js.map

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

package/cjs/column-list/ColumnList.js

@@ -0,0 +1,172 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var vuuUtils = require('@vuu-ui/vuu-utils');
+var core = require('@salt-ds/core');
+var styles = require('@salt-ds/styles');
+var window = require('@salt-ds/window');
+var vuuUiControls = require('@vuu-ui/vuu-ui-controls');
+var cx = require('clsx');
+var react = require('react');
+var ColumnList$1 = require('./ColumnList.css.js');
+
+const classBase = "vuuColumnList";
+const classBaseListItem = "vuuColumnListItem";
+const useSorting = (id, index, allowSort = true) => {
+  const { handleRef: sortableHandleRef, ref: sortableRef } = vuuUtils.useSortable({
+    id,
+    index
+  });
+  const noopRef = react.useCallback(() => {
+  }, []);
+  const [handleRef, ref] = react.useMemo(() => {
+    return allowSort ? [sortableHandleRef, sortableRef] : [noopRef, noopRef];
+  }, [allowSort, noopRef, sortableHandleRef, sortableRef]);
+  return {
+    handleRef,
+    ref
+  };
+};
+const ColumnListItem = ({
+  className: classNameProp,
+  index,
+  item,
+  permissions: { allowHideColumns, allowRemoveColumns, allowReorderColumns },
+  ...optionProps
+}) => {
+  const { handleRef, ref } = useSorting(item.name, index, allowReorderColumns);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    core.Option,
+    {
+      ...optionProps,
+      className: cx(classNameProp, classBaseListItem),
+      "data-name": item.name,
+      id: item.name,
+      ref,
+      children: [
+        allowReorderColumns ? /* @__PURE__ */ jsxRuntime.jsx(
+          vuuUiControls.IconButton,
+          {
+            "data-embedded": true,
+            appearance: "transparent",
+            icon: "draggable",
+            ref: handleRef,
+            size: 16
+          }
+        ) : null,
+        item?.isCalculated ? /* @__PURE__ */ jsxRuntime.jsx(vuuUiControls.Icon, { name: "function" }) : /* @__PURE__ */ jsxRuntime.jsx(
+          core.Checkbox,
+          {
+            className: `${classBase}-checkBox`,
+            checked: item?.subscribed,
+            readOnly: allowRemoveColumns === false
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: `${classBase}-text`, children: vuuUtils.getColumnLabel(item) }),
+        allowHideColumns !== false ? /* @__PURE__ */ jsxRuntime.jsx(
+          core.Switch,
+          {
+            className: `${classBase}-switch`,
+            checked: item?.hidden !== true,
+            disabled: item?.subscribed !== true
+          }
+        ) : null
+      ]
+    }
+  );
+};
+const defaultPermissions = {
+  allowHideColumns: true,
+  allowRemoveColumns: true,
+  allowReorderColumns: true
+};
+const ColumnList = ({
+  className,
+  columnItems,
+  onChange,
+  onNavigateToColumn,
+  onReorderColumnItems,
+  permissions = defaultPermissions,
+  ...htmlAttributes
+}) => {
+  const targetWindow = window.useWindow();
+  styles.useComponentCssInjection({
+    testId: "vuu-column-list",
+    css: ColumnList$1,
+    window: targetWindow
+  });
+  const listRef = react.useRef(null);
+  const handleChange = react.useCallback(
+    ({ target }) => {
+      const input = target;
+      const listItem = vuuUtils.queryClosest(target, `.${classBaseListItem}`);
+      if (listItem) {
+        const {
+          dataset: { name }
+        } = listItem;
+        if (name) {
+          const saltCheckbox = vuuUtils.queryClosest(target, `.${classBase}-checkBox`);
+          const saltSwitch = vuuUtils.queryClosest(target, `.${classBase}-switch`);
+          if (saltCheckbox) {
+            onChange(name, "subscribed", input.checked);
+          } else if (saltSwitch) {
+            onChange(name, "hidden", input.checked === false);
+          }
+        }
+      }
+    },
+    [onChange]
+  );
+  const handleClick = react.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);
+        }
+      }
+    },
+    [onNavigateToColumn]
+  );
+  const handleDragEnd = react.useCallback(() => {
+    setTimeout(() => {
+      const listItems = listRef.current?.querySelectorAll(".saltOption");
+      if (listItems) {
+        const orderedIds = Array.from(listItems).map(({ id }) => id);
+        onReorderColumnItems?.(vuuUtils.reorderColumnItems(columnItems, orderedIds));
+      }
+    }, 300);
+  }, [columnItems, onReorderColumnItems]);
+  return /* @__PURE__ */ jsxRuntime.jsx(vuuUtils.DragDropProvider, { onDragEnd: handleDragEnd, children: /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      ...htmlAttributes,
+      className: cx(classBase, className, {
+        [`${classBase}-withColumnNavigation`]: typeof onNavigateToColumn === "function"
+      }),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: `${classBase}-header`, children: /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Column Selection" }) }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `${classBase}-colHeadings`, children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Column subscription" }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Visibility" })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(core.ListBox, { ref: listRef, children: columnItems.map((columnItem, index) => /* @__PURE__ */ jsxRuntime.jsx(
+          ColumnListItem,
+          {
+            item: columnItem,
+            index,
+            onChange: handleChange,
+            onClick: handleClick,
+            permissions,
+            value: columnItem
+          },
+          columnItem.name
+        )) })
+      ]
+    }
+  ) });
+};
+
+exports.ColumnList = ColumnList;
+//# sourceMappingURL=ColumnList.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ColumnList.js","sources":["../../src/column-list/ColumnList.tsx"],"sourcesContent":["import { DragDropProvider, useSortable } from \"@vuu-ui/vuu-utils\";\nimport { Checkbox, ListBox, Option, OptionProps, Switch } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport {\n  ColumnDescriptor,\n  ColumnListPermissions,\n} from \"@vuu-ui/vuu-table-types\";\nimport { Icon, IconButton } from \"@vuu-ui/vuu-ui-controls\";\nimport {\n  getColumnLabel,\n  queryClosest,\n  reorderColumnItems,\n} from \"@vuu-ui/vuu-utils\";\nimport cx from \"clsx\";\nimport {\n  HTMLAttributes,\n  MouseEventHandler,\n  SyntheticEvent,\n  useCallback,\n  useMemo,\n  useRef,\n} from \"react\";\nimport { ColumnItem } from \"../table-column-settings/useTableSettings\";\n\nimport columnList from \"./ColumnList.css\";\n\nconst classBase = \"vuuColumnList\";\nconst classBaseListItem = \"vuuColumnListItem\";\n\nconst useSorting = (id: string, index: number, allowSort = true) => {\n  const { handleRef: sortableHandleRef, ref: sortableRef } = useSortable({\n    id,\n    index,\n  });\n\n  const noopRef = useCallback(() => {\n    // do nothing\n  }, []);\n\n  const [handleRef, ref] = useMemo(() => {\n    return allowSort ? [sortableHandleRef, sortableRef] : [noopRef, noopRef];\n  }, [allowSort, noopRef, sortableHandleRef, sortableRef]);\n\n  return {\n    handleRef,\n    ref,\n  };\n};\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  onNavigateToColumn?: (columnName: string) => void;\n  onReorderColumnItems?: (columnItems: ColumnItem[]) => void;\n  permissions?: ColumnListPermissions;\n}\n\nconst ColumnListItem = ({\n  className: classNameProp,\n  index,\n  item,\n  permissions: { allowHideColumns, allowRemoveColumns, allowReorderColumns },\n  ...optionProps\n}: OptionProps & {\n  index: number;\n  item: ColumnItem;\n  permissions: ColumnListPermissions;\n}) => {\n  const { handleRef, ref } = useSorting(item.name, index, allowReorderColumns);\n  return (\n    <Option\n      {...optionProps}\n      className={cx(classNameProp, classBaseListItem)}\n      data-name={item.name}\n      id={item.name}\n      ref={ref}\n    >\n      {allowReorderColumns ? (\n        <IconButton\n          data-embedded\n          appearance=\"transparent\"\n          icon=\"draggable\"\n          ref={handleRef}\n          size={16}\n        />\n      ) : null}\n      {item?.isCalculated ? (\n        <Icon name=\"function\" />\n      ) : (\n        <Checkbox\n          className={`${classBase}-checkBox`}\n          checked={item?.subscribed}\n          readOnly={allowRemoveColumns === false}\n        />\n      )}\n      <span className={`${classBase}-text`}>\n        {getColumnLabel(item as ColumnDescriptor)}\n      </span>\n      {allowHideColumns !== false ? (\n        <Switch\n          className={`${classBase}-switch`}\n          checked={item?.hidden !== true}\n          disabled={item?.subscribed !== true}\n        />\n      ) : null}\n    </Option>\n  );\n};\n\nconst defaultPermissions: ColumnListPermissions = {\n  allowHideColumns: true,\n  allowRemoveColumns: true,\n  allowReorderColumns: true,\n};\n\nexport const ColumnList = ({\n  className,\n  columnItems,\n  onChange,\n  onNavigateToColumn,\n  onReorderColumnItems,\n  permissions = defaultPermissions,\n  ...htmlAttributes\n}: ColumnListProps) => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-column-list\",\n    css: columnList,\n    window: targetWindow,\n  });\n  const listRef = useRef<HTMLDivElement>(null);\n\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>(\n    (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    [onNavigateToColumn],\n  );\n\n  const handleDragEnd = useCallback(() => {\n    setTimeout(() => {\n      const listItems =\n        listRef.current?.querySelectorAll<HTMLDivElement>(\".saltOption\");\n      if (listItems) {\n        const orderedIds = Array.from(listItems).map(({ id }) => id);\n        onReorderColumnItems?.(reorderColumnItems(columnItems, orderedIds));\n      }\n    }, 300);\n  }, [columnItems, onReorderColumnItems]);\n\n  return (\n    <DragDropProvider onDragEnd={handleDragEnd}>\n      <div\n        {...htmlAttributes}\n        className={cx(classBase, className, {\n          [`${classBase}-withColumnNavigation`]:\n            typeof onNavigateToColumn === \"function\",\n        })}\n      >\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        <ListBox ref={listRef}>\n          {columnItems.map((columnItem, index) => (\n            <ColumnListItem\n              item={columnItem}\n              index={index}\n              key={columnItem.name}\n              onChange={handleChange}\n              onClick={handleClick}\n              permissions={permissions}\n              value={columnItem}\n            />\n          ))}\n        </ListBox>\n      </div>\n    </DragDropProvider>\n  );\n};\n"],"names":["useSortable","useCallback","useMemo","jsxs","Option","jsx","IconButton","Icon","Checkbox","getColumnLabel","Switch","useWindow","useComponentCssInjection","columnList","useRef","queryClosest","reorderColumnItems","DragDropProvider","ListBox"],"mappings":"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"}