@vuu-ui/vuu-table-extras 2.1.19-beta.2 → 2.1.19-beta.4

package/esm/packages/vuu-table-extras/src/calculated-column/CalculatedColumnPanel.js

@@ -0,0 +1,83 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { FormField, FormFieldLabel, Input, Dropdown, Option } from '@salt-ds/core';
+import { useCalculatedColumnPanel } from './useCalculatedColumnPanel.js';
+import { useRef, useCallback } from 'react';
+import { getCalculatedColumnDetails } from '@vuu-ui/vuu-utils';
+import { ColumnExpressionInput } from '../column-expression-input/ColumnExpressionInput.js';
+import '../column-expression-input/column-language-parser/ColumnExpressionLanguage.js';
+import '../column-expression-input/column-language-parser/ColumnExpressionTreeWalker.js';
+import '../column-expression-input/column-language-parser/column-expression-parse-utils.js';
+import '@vuu-ui/vuu-codemirror';
+import '../column-expression-input/highlighting.js';
+import '../column-expression-input/theme.js';
+import { useColumnExpressionSuggestionProvider } from '../column-expression-input/useColumnExpressionSuggestionProvider.js';
+
+const classBase = "vuuCalculatedColumnPanel";
+const CalculatedColumnPanel = ({
+  column: columnProp,
+  columnModel,
+  onChangeColumn,
+  onChangeServerDataType: onChangeServerDataTypeProp,
+  vuuTable
+}) => {
+  const typeRef = useRef(null);
+  const { column, onChangeExpression, onChangeName, onChangeServerDataType } = useCalculatedColumnPanel({
+    column: columnProp,
+    onChangeColumn,
+    onChangeServerDataType: onChangeServerDataTypeProp
+  });
+  const initialExpressionRef = useRef(
+    getCalculatedColumnDetails(column).expression ?? ""
+  );
+  const suggestionProvider = useColumnExpressionSuggestionProvider({
+    columns: columnModel.selectedColumns,
+    table: vuuTable
+  });
+  const handleSubmitExpression = useCallback(() => {
+    if (typeRef.current) {
+      typeRef.current?.querySelector("button")?.focus();
+    }
+  }, []);
+  const { name, serverDataType } = getCalculatedColumnDetails(column);
+  return /* @__PURE__ */ jsxs("div", { className: classBase, children: [
+    /* @__PURE__ */ jsx("div", { children: column.name }),
+    /* @__PURE__ */ jsxs(FormField, { "data-field": "column-name", children: [
+      /* @__PURE__ */ jsx(FormFieldLabel, { children: "Column Label" }),
+      /* @__PURE__ */ jsx(Input, { className: "vuuInput", onChange: onChangeName, value: name })
+    ] }),
+    /* @__PURE__ */ jsxs(FormField, { "data-field": "column-expression", children: [
+      /* @__PURE__ */ jsx(FormFieldLabel, { children: "Expression" }),
+      /* @__PURE__ */ jsx(
+        ColumnExpressionInput,
+        {
+          onChange: onChangeExpression,
+          onSubmitExpression: handleSubmitExpression,
+          source: initialExpressionRef.current,
+          suggestionProvider
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs(FormField, { "data-field": "type", children: [
+      /* @__PURE__ */ jsx(FormFieldLabel, { children: "Column type" }),
+      /* @__PURE__ */ jsxs(
+        Dropdown,
+        {
+          className: `${classBase}-type`,
+          onSelectionChange: onChangeServerDataType,
+          ref: typeRef,
+          selected: serverDataType ? [serverDataType] : [],
+          value: serverDataType,
+          children: [
+            /* @__PURE__ */ jsx(Option, { value: "boolean", children: "Boolean" }),
+            /* @__PURE__ */ jsx(Option, { value: "double", children: "Double" }),
+            /* @__PURE__ */ jsx(Option, { value: "long", children: "Long" }),
+            /* @__PURE__ */ jsx(Option, { value: "string", children: "String" })
+          ]
+        }
+      )
+    ] })
+  ] });
+};
+
+export { CalculatedColumnPanel };
+//# sourceMappingURL=CalculatedColumnPanel.js.map

package/esm/packages/vuu-table-extras/src/calculated-column/CalculatedColumnPanel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CalculatedColumnPanel.js","sources":["../../../../../../../packages/vuu-table-extras/src/calculated-column/CalculatedColumnPanel.tsx"],"sourcesContent":["import {\n  Dropdown,\n  FormField,\n  FormFieldLabel,\n  Input,\n  Option,\n} from \"@salt-ds/core\";\nimport { useCalculatedColumnPanel } from \"./useCalculatedColumnPanel\";\nimport { HTMLAttributes, useCallback, useRef } from \"react\";\nimport { ColumnDescriptor } from \"@vuu-ui/vuu-table-types\";\nimport { VuuColumnDataType, VuuTable } from \"@vuu-ui/vuu-protocol-types\";\nimport { getCalculatedColumnDetails } from \"@vuu-ui/vuu-utils\";\nimport {\n  ColumnExpressionInput,\n  ColumnExpressionSubmitHandler,\n  useColumnExpressionSuggestionProvider,\n} from \"../column-expression-input\";\nimport { ColumnModel } from \"../column-picker/ColumnModel\";\n\nconst classBase = \"vuuCalculatedColumnPanel\";\n\nexport interface CalculatedColumnPanelProps\n  extends HTMLAttributes<HTMLDivElement> {\n  column: ColumnDescriptor;\n  columnModel: ColumnModel;\n  onChangeColumn: (column: ColumnDescriptor) => void;\n  onChangeServerDataType?: (name: VuuColumnDataType) => void;\n  vuuTable: VuuTable;\n}\n\nexport const CalculatedColumnPanel = ({\n  column: columnProp,\n  columnModel,\n  onChangeColumn,\n  onChangeServerDataType: onChangeServerDataTypeProp,\n  vuuTable,\n}: CalculatedColumnPanelProps) => {\n  const typeRef = useRef<HTMLButtonElement>(null);\n\n  const { column, onChangeExpression, onChangeName, onChangeServerDataType } =\n    useCalculatedColumnPanel({\n      column: columnProp,\n      onChangeColumn,\n      onChangeServerDataType: onChangeServerDataTypeProp,\n    });\n  // The initial value to pass into the Expression Input. That is a\n  // CodeMirror editor and will manage its own state once initialised.\n  const initialExpressionRef = useRef<string>(\n    getCalculatedColumnDetails(column).expression ?? \"\",\n  );\n\n  const suggestionProvider = useColumnExpressionSuggestionProvider({\n    columns: columnModel.selectedColumns,\n    table: vuuTable,\n  });\n\n  const handleSubmitExpression =\n    useCallback<ColumnExpressionSubmitHandler>(() => {\n      if (typeRef.current) {\n        (\n          typeRef.current?.querySelector(\"button\") as HTMLButtonElement\n        )?.focus();\n      }\n    }, []);\n\n  const { name, serverDataType } = getCalculatedColumnDetails(column);\n\n  return (\n    <div className={classBase}>\n      <div>{column.name}</div>\n\n      <FormField data-field=\"column-name\">\n        <FormFieldLabel>Column Label</FormFieldLabel>\n        <Input className=\"vuuInput\" onChange={onChangeName} value={name} />\n      </FormField>\n\n      <FormField data-field=\"column-expression\">\n        <FormFieldLabel>Expression</FormFieldLabel>\n        <ColumnExpressionInput\n          onChange={onChangeExpression}\n          onSubmitExpression={handleSubmitExpression}\n          source={initialExpressionRef.current}\n          suggestionProvider={suggestionProvider}\n        />\n      </FormField>\n      <FormField data-field=\"type\">\n        <FormFieldLabel>Column type</FormFieldLabel>\n        <Dropdown\n          className={`${classBase}-type`}\n          onSelectionChange={onChangeServerDataType}\n          ref={typeRef}\n          selected={serverDataType ? [serverDataType] : []}\n          value={serverDataType}\n        >\n          <Option value=\"boolean\">Boolean</Option>\n          <Option value=\"double\">Double</Option>\n          <Option value=\"long\">Long</Option>\n          <Option value=\"string\">String</Option>\n        </Dropdown>\n      </FormField>\n    </div>\n  );\n};\n"],"names":[],"mappings":"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"}

package/esm/packages/vuu-table-extras/src/calculated-column/useCalculatedColumnPanel.js

@@ -0,0 +1,69 @@
+import { setCalculatedColumnName, setCalculatedColumnExpression, isVuuColumnDataType, setCalculatedColumnType, getCalculatedColumnDetails } from '@vuu-ui/vuu-utils';
+import { useState, useRef, useCallback } from 'react';
+
+const applyDefaults = (column) => {
+  const { name, expression, serverDataType } = getCalculatedColumnDetails(column);
+  if (serverDataType === void 0) {
+    return {
+      ...column,
+      name: `${name}:string:${expression}`
+    };
+  } else {
+    return column;
+  }
+};
+const useCalculatedColumnPanel = ({
+  column: columnProp,
+  onChangeColumn,
+  onChangeServerDataType: onChangeServerDataTypeProp
+}) => {
+  const [column, _setColumn] = useState(
+    applyDefaults(columnProp)
+  );
+  const columnRef = useRef(columnProp);
+  const setColumn = useCallback((column2) => {
+    columnRef.current = column2;
+    _setColumn(column2);
+  }, []);
+  const onChangeName = useCallback(
+    (evt) => {
+      const { value } = evt.target;
+      const newColumn = setCalculatedColumnName(column, value);
+      console.log(`name = ${newColumn.name}`);
+      setColumn(newColumn);
+      onChangeColumn(newColumn);
+    },
+    [column, onChangeColumn, setColumn]
+  );
+  const onChangeExpression = useCallback(
+    (value) => {
+      console.log(`expression = ${value}`);
+      const expression = value.trim();
+      const { current: column2 } = columnRef;
+      const newColumn = setCalculatedColumnExpression(column2, expression);
+      setColumn(newColumn);
+      onChangeColumn(newColumn);
+    },
+    [onChangeColumn, setColumn]
+  );
+  const onChangeServerDataType = useCallback(
+    (_e, [serverDataType]) => {
+      if (isVuuColumnDataType(serverDataType)) {
+        const newColumn = setCalculatedColumnType(column, serverDataType);
+        setColumn(newColumn);
+        onChangeServerDataTypeProp?.(serverDataType);
+        onChangeColumn(newColumn);
+      }
+    },
+    [column, onChangeColumn, onChangeServerDataTypeProp, setColumn]
+  );
+  return {
+    column,
+    onChangeExpression,
+    onChangeName,
+    onChangeServerDataType
+  };
+};
+
+export { useCalculatedColumnPanel };
+//# sourceMappingURL=useCalculatedColumnPanel.js.map

package/esm/packages/vuu-table-extras/src/calculated-column/useCalculatedColumnPanel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useCalculatedColumnPanel.js","sources":["../../../../../../../packages/vuu-table-extras/src/calculated-column/useCalculatedColumnPanel.ts"],"sourcesContent":["import { ColumnDescriptor } from \"@vuu-ui/vuu-table-types\";\nimport {\n  getCalculatedColumnDetails,\n  isVuuColumnDataType,\n  setCalculatedColumnExpression,\n  setCalculatedColumnName,\n  setCalculatedColumnType,\n} from \"@vuu-ui/vuu-utils\";\nimport {\n  FormEventHandler,\n  SyntheticEvent,\n  useCallback,\n  useRef,\n  useState,\n} from \"react\";\nimport { CalculatedColumnPanelProps } from \"./CalculatedColumnPanel\";\n\nexport type ColumnExpressionHookProps = Pick<\n  CalculatedColumnPanelProps,\n  \"column\" | \"onChangeColumn\" | \"onChangeServerDataType\"\n>;\n\nconst applyDefaults = (column: ColumnDescriptor) => {\n  const { name, expression, serverDataType } =\n    getCalculatedColumnDetails(column);\n  if (serverDataType === undefined) {\n    return {\n      ...column,\n      name: `${name}:string:${expression}`,\n    };\n  } else {\n    return column;\n  }\n};\n\nexport const useCalculatedColumnPanel = ({\n  column: columnProp,\n  onChangeColumn,\n  onChangeServerDataType: onChangeServerDataTypeProp,\n}: ColumnExpressionHookProps) => {\n  const [column, _setColumn] = useState<ColumnDescriptor>(\n    applyDefaults(columnProp),\n  );\n  const columnRef = useRef<ColumnDescriptor>(columnProp);\n  const setColumn = useCallback((column: ColumnDescriptor) => {\n    columnRef.current = column;\n    _setColumn(column);\n  }, []);\n\n  // We need to track column name in a ref because ColunExpressionInput\n  // is not a pure React component, it hosts a CodeMirror editor. We\n  // do not want to cause it to render mid-edit. Therefore it uses memo\n  // and only renders on initial load. onChangeExpression must be stable.\n  // const columnNameRef = useRef<string>(column.name);\n  // const expressionRef = useRef(getCalculatedColumnDetails(column)[1]);\n  const onChangeName = useCallback<FormEventHandler>(\n    (evt) => {\n      const { value } = evt.target as HTMLInputElement;\n      const newColumn = setCalculatedColumnName(column, value);\n      // columnNameRef.current = newColumn.name;\n      console.log(`name = ${newColumn.name}`);\n      setColumn(newColumn);\n      onChangeColumn(newColumn);\n    },\n    [column, onChangeColumn, setColumn],\n  );\n\n  const onChangeExpression = useCallback(\n    (value: string) => {\n      console.log(`expression = ${value}`);\n      // we do not set state when this changes as the codemirror editor\n      // manages state of the expression for us until complete\n      const expression = value.trim();\n      // expressionRef.current = expression;\n      // const [name, , type] = column.name.split(\":\");\n      // columnNameRef.current = `${name}:${expression}:${type}`;\n\n      const { current: column } = columnRef;\n      const newColumn = setCalculatedColumnExpression(column, expression);\n      setColumn(newColumn);\n\n      onChangeColumn(newColumn);\n    },\n    [onChangeColumn, setColumn],\n  );\n\n  const onChangeServerDataType = useCallback(\n    (_e: SyntheticEvent, [serverDataType]: string[]) => {\n      if (isVuuColumnDataType(serverDataType)) {\n        const newColumn = setCalculatedColumnType(column, serverDataType);\n        setColumn(newColumn);\n        onChangeServerDataTypeProp?.(serverDataType);\n        onChangeColumn(newColumn);\n      }\n    },\n    [column, onChangeColumn, onChangeServerDataTypeProp, setColumn],\n  );\n\n  return {\n    column,\n    onChangeExpression,\n    onChangeName,\n    onChangeServerDataType,\n  };\n};\n"],"names":["column"],"mappings":";;;AAsBA,MAAM,aAAA,GAAgB,CAAC,MAA6B,KAAA;AAClD,EAAA,MAAM,EAAE,IAAM,EAAA,UAAA,EAAY,cAAe,EAAA,GACvC,2BAA2B,MAAM,CAAA;AACnC,EAAA,IAAI,mBAAmB,KAAW,CAAA,EAAA;AAChC,IAAO,OAAA;AAAA,MACL,GAAG,MAAA;AAAA,MACH,IAAM,EAAA,CAAA,EAAG,IAAI,CAAA,QAAA,EAAW,UAAU,CAAA;AAAA,KACpC;AAAA,GACK,MAAA;AACL,IAAO,OAAA,MAAA;AAAA;AAEX,CAAA;AAEO,MAAM,2BAA2B,CAAC;AAAA,EACvC,MAAQ,EAAA,UAAA;AAAA,EACR,cAAA;AAAA,EACA,sBAAwB,EAAA;AAC1B,CAAiC,KAAA;AAC/B,EAAM,MAAA,CAAC,MAAQ,EAAA,UAAU,CAAI,GAAA,QAAA;AAAA,IAC3B,cAAc,UAAU;AAAA,GAC1B;AACA,EAAM,MAAA,SAAA,GAAY,OAAyB,UAAU,CAAA;AACrD,EAAM,MAAA,SAAA,GAAY,WAAY,CAAA,CAACA,OAA6B,KAAA;AAC1D,IAAA,SAAA,CAAU,OAAUA,GAAAA,OAAAA;AACpB,IAAA,UAAA,CAAWA,OAAM,CAAA;AAAA,GACnB,EAAG,EAAE,CAAA;AAQL,EAAA,MAAM,YAAe,GAAA,WAAA;AAAA,IACnB,CAAC,GAAQ,KAAA;AACP,MAAM,MAAA,EAAE,KAAM,EAAA,GAAI,GAAI,CAAA,MAAA;AACtB,MAAM,MAAA,SAAA,GAAY,uBAAwB,CAAA,MAAA,EAAQ,KAAK,CAAA;AAEvD,MAAA,OAAA,CAAQ,GAAI,CAAA,CAAA,OAAA,EAAU,SAAU,CAAA,IAAI,CAAE,CAAA,CAAA;AACtC,MAAA,SAAA,CAAU,SAAS,CAAA;AACnB,MAAA,cAAA,CAAe,SAAS,CAAA;AAAA,KAC1B;AAAA,IACA,CAAC,MAAQ,EAAA,cAAA,EAAgB,SAAS;AAAA,GACpC;AAEA,EAAA,MAAM,kBAAqB,GAAA,WAAA;AAAA,IACzB,CAAC,KAAkB,KAAA;AACjB,MAAQ,OAAA,CAAA,GAAA,CAAI,CAAgB,aAAA,EAAA,KAAK,CAAE,CAAA,CAAA;AAGnC,MAAM,MAAA,UAAA,GAAa,MAAM,IAAK,EAAA;AAK9B,MAAM,MAAA,EAAE,OAASA,EAAAA,OAAAA,EAAW,GAAA,SAAA;AAC5B,MAAM,MAAA,SAAA,GAAY,6BAA8BA,CAAAA,OAAAA,EAAQ,UAAU,CAAA;AAClE,MAAA,SAAA,CAAU,SAAS,CAAA;AAEnB,MAAA,cAAA,CAAe,SAAS,CAAA;AAAA,KAC1B;AAAA,IACA,CAAC,gBAAgB,SAAS;AAAA,GAC5B;AAEA,EAAA,MAAM,sBAAyB,GAAA,WAAA;AAAA,IAC7B,CAAC,EAAA,EAAoB,CAAC,cAAc,CAAgB,KAAA;AAClD,MAAI,IAAA,mBAAA,CAAoB,cAAc,CAAG,EAAA;AACvC,QAAM,MAAA,SAAA,GAAY,uBAAwB,CAAA,MAAA,EAAQ,cAAc,CAAA;AAChE,QAAA,SAAA,CAAU,SAAS,CAAA;AACnB,QAAA,0BAAA,GAA6B,cAAc,CAAA;AAC3C,QAAA,cAAA,CAAe,SAAS,CAAA;AAAA;AAC1B,KACF;AAAA,IACA,CAAC,MAAA,EAAQ,cAAgB,EAAA,0BAAA,EAA4B,SAAS;AAAA,GAChE;AAEA,EAAO,OAAA;AAAA,IACL,MAAA;AAAA,IACA,kBAAA;AAAA,IACA,YAAA;AAAA,IACA;AAAA,GACF;AACF;;;;"}

package/esm/packages/vuu-table-extras/src/calculated-column/useEditCalculatedColumn.js

@@ -0,0 +1,136 @@
+import { jsx } from 'react/jsx-runtime';
+import { useModal } from '@vuu-ui/vuu-ui-controls';
+import { useRef, useCallback } from 'react';
+import { CalculatedColumnPanel } from './CalculatedColumnPanel.js';
+
+const useEditCalculatedColumn = ({
+  calculatedColumn,
+  columnModel,
+  onSaveColumn,
+  vuuTable
+}) => {
+  if (vuuTable === void 0) {
+    throw Error(
+      `[useEditCalculatedColumn] vuuTable must be provided to create or edit a calculated column`
+    );
+  }
+  const { showPrompt } = useModal();
+  const calculatedColumnRef = useRef(
+    void 0
+  );
+  const handleChangeNewCalculatedColumn = useCallback(
+    (column) => {
+      if (calculatedColumnRef.current) {
+        calculatedColumnRef.current.newColumn = column;
+      } else {
+        throw Error(`[TabbedTableConfigPanel] handleChangeNewCalculatedColumn`);
+      }
+    },
+    []
+  );
+  const handleSaveNewCalculatedColumn = useCallback(() => {
+    if (calculatedColumnRef.current) {
+      const {
+        current: { newColumn: calculatedColumn3 }
+      } = calculatedColumnRef;
+      columnModel.addColumn(calculatedColumn3, true);
+      calculatedColumnRef.current = void 0;
+      onSaveColumn?.(calculatedColumn3);
+    }
+    const { current: calculatedColumn2 } = calculatedColumnRef;
+    if (calculatedColumn2) {
+      columnModel.addColumn(calculatedColumn2, true);
+      calculatedColumnRef.current = void 0;
+      onSaveColumn?.(calculatedColumn2);
+    }
+  }, [columnModel, onSaveColumn]);
+  const handleCreateCalculatedColumn = useCallback(() => {
+    if (vuuTable) {
+      const newColumn = {
+        name: "::",
+        serverDataType: "string"
+      };
+      calculatedColumnRef.current = { newColumn };
+      showPrompt(
+        /* @__PURE__ */ jsx(
+          CalculatedColumnPanel,
+          {
+            column: newColumn,
+            columnModel,
+            onChangeColumn: handleChangeNewCalculatedColumn,
+            vuuTable
+          }
+        ),
+        {
+          confirmButtonLabel: "Save column",
+          onConfirm: handleSaveNewCalculatedColumn,
+          title: "Calculated column"
+        }
+      );
+    }
+  }, [
+    columnModel,
+    handleChangeNewCalculatedColumn,
+    handleSaveNewCalculatedColumn,
+    showPrompt,
+    vuuTable
+  ]);
+  const handleSaveColumnEdits = useCallback(() => {
+    if (calculatedColumnRef.current) {
+      const { originalColumn, newColumn } = calculatedColumnRef.current;
+      if (originalColumn) {
+        calculatedColumnRef.current = void 0;
+        onSaveColumn?.(newColumn);
+        columnModel.updateColumn(originalColumn, newColumn);
+      }
+    }
+  }, [columnModel, onSaveColumn]);
+  const handleUpdateCalculatedColumn = useCallback(
+    (column) => {
+      if (calculatedColumnRef.current) {
+        calculatedColumnRef.current.newColumn = column;
+      } else {
+        throw Error("[TabbedTableConfigPanel] handleUpdateCalculatedColumn`");
+      }
+    },
+    []
+  );
+  const handleEditCalculatedColumn = useCallback(() => {
+    if (calculatedColumn && vuuTable) {
+      calculatedColumnRef.current = {
+        originalColumn: calculatedColumn,
+        newColumn: calculatedColumn
+      };
+      showPrompt(
+        /* @__PURE__ */ jsx(
+          CalculatedColumnPanel,
+          {
+            column: calculatedColumn,
+            columnModel,
+            onChangeColumn: handleUpdateCalculatedColumn,
+            vuuTable
+          }
+        ),
+        {
+          confirmButtonLabel: "Save column",
+          onConfirm: handleSaveColumnEdits,
+          title: "Calculated column"
+        }
+      );
+    }
+  }, [
+    calculatedColumn,
+    columnModel,
+    handleSaveColumnEdits,
+    handleUpdateCalculatedColumn,
+    showPrompt,
+    vuuTable
+  ]);
+  return {
+    onCreateCalculatedColumn: handleCreateCalculatedColumn,
+    onEditCalculatedColumn: handleEditCalculatedColumn
+  };
+};
+
+export { useEditCalculatedColumn };
+//# sourceMappingURL=useEditCalculatedColumn.js.map

package/esm/packages/vuu-table-extras/src/calculated-column/useEditCalculatedColumn.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useEditCalculatedColumn.js","sources":["../../../../../../../packages/vuu-table-extras/src/calculated-column/useEditCalculatedColumn.tsx"],"sourcesContent":["import { VuuTable } from \"@vuu-ui/vuu-protocol-types\";\nimport { ColumnDescriptor } from \"@vuu-ui/vuu-table-types\";\nimport { useModal } from \"@vuu-ui/vuu-ui-controls\";\nimport { useCallback, useRef } from \"react\";\nimport { ColumnModel } from \"../column-picker/ColumnModel\";\nimport { CalculatedColumnPanel } from \"./CalculatedColumnPanel\";\n\ntype CalculatedColumnState = {\n  originalColumn?: ColumnDescriptor;\n  newColumn: ColumnDescriptor;\n};\n\nexport interface EditCalculatedColumnProps {\n  calculatedColumn?: ColumnDescriptor;\n  columnModel: ColumnModel;\n  onSaveColumn?: (caclulatedColumn: ColumnDescriptor) => void;\n  vuuTable?: VuuTable;\n}\n\nexport const useEditCalculatedColumn = ({\n  calculatedColumn,\n  columnModel,\n  onSaveColumn,\n  vuuTable,\n}: EditCalculatedColumnProps) => {\n  if (vuuTable === undefined) {\n    throw Error(\n      `[useEditCalculatedColumn] vuuTable must be provided to create or edit a calculated column`,\n    );\n  }\n  const { showPrompt } = useModal();\n\n  const calculatedColumnRef = useRef<CalculatedColumnState | undefined>(\n    undefined,\n  );\n\n  const handleChangeNewCalculatedColumn = useCallback(\n    (column: ColumnDescriptor) => {\n      if (calculatedColumnRef.current) {\n        calculatedColumnRef.current.newColumn = column;\n      } else {\n        throw Error(`[TabbedTableConfigPanel] handleChangeNewCalculatedColumn`);\n      }\n    },\n    [],\n  );\n\n  const handleSaveNewCalculatedColumn = useCallback(() => {\n    if (calculatedColumnRef.current) {\n      const {\n        current: { newColumn: calculatedColumn },\n      } = calculatedColumnRef;\n      columnModel.addColumn(calculatedColumn, true);\n      calculatedColumnRef.current = undefined;\n      onSaveColumn?.(calculatedColumn);\n    }\n    const { current: calculatedColumn } = calculatedColumnRef;\n    if (calculatedColumn) {\n      columnModel.addColumn(calculatedColumn, true);\n      calculatedColumnRef.current = undefined;\n      onSaveColumn?.(calculatedColumn);\n    }\n  }, [columnModel, onSaveColumn]);\n\n  const handleCreateCalculatedColumn = useCallback(() => {\n    if (vuuTable) {\n      const newColumn: ColumnDescriptor = {\n        name: \"::\",\n        serverDataType: \"string\",\n      };\n      calculatedColumnRef.current = { newColumn };\n      // TODO load this dynamically\n      showPrompt(\n        <CalculatedColumnPanel\n          column={newColumn}\n          columnModel={columnModel}\n          onChangeColumn={handleChangeNewCalculatedColumn}\n          vuuTable={vuuTable}\n        />,\n        {\n          confirmButtonLabel: \"Save column\",\n          onConfirm: handleSaveNewCalculatedColumn,\n          title: \"Calculated column\",\n        },\n      );\n    }\n  }, [\n    columnModel,\n    handleChangeNewCalculatedColumn,\n    handleSaveNewCalculatedColumn,\n    showPrompt,\n    vuuTable,\n  ]);\n\n  const handleSaveColumnEdits = useCallback(() => {\n    if (calculatedColumnRef.current) {\n      const { originalColumn, newColumn } = calculatedColumnRef.current;\n      if (originalColumn) {\n        calculatedColumnRef.current = undefined;\n        onSaveColumn?.(newColumn);\n\n        columnModel.updateColumn(originalColumn, newColumn);\n      }\n    }\n  }, [columnModel, onSaveColumn]);\n\n  const handleUpdateCalculatedColumn = useCallback(\n    (column: ColumnDescriptor) => {\n      if (calculatedColumnRef.current) {\n        calculatedColumnRef.current.newColumn = column;\n      } else {\n        throw Error(\"[TabbedTableConfigPanel] handleUpdateCalculatedColumn`\");\n      }\n    },\n    [],\n  );\n\n  const handleEditCalculatedColumn = useCallback(() => {\n    if (calculatedColumn && vuuTable) {\n      calculatedColumnRef.current = {\n        originalColumn: calculatedColumn,\n        newColumn: calculatedColumn,\n      };\n      // TODO load this dynamically\n      showPrompt(\n        <CalculatedColumnPanel\n          column={calculatedColumn}\n          columnModel={columnModel}\n          onChangeColumn={handleUpdateCalculatedColumn}\n          vuuTable={vuuTable}\n        />,\n        {\n          confirmButtonLabel: \"Save column\",\n          onConfirm: handleSaveColumnEdits,\n          title: \"Calculated column\",\n        },\n      );\n    }\n  }, [\n    calculatedColumn,\n    columnModel,\n    handleSaveColumnEdits,\n    handleUpdateCalculatedColumn,\n    showPrompt,\n    vuuTable,\n  ]);\n\n  return {\n    onCreateCalculatedColumn: handleCreateCalculatedColumn,\n    onEditCalculatedColumn: handleEditCalculatedColumn,\n  };\n};\n"],"names":["calculatedColumn"],"mappings":"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"}

package/esm/packages/vuu-table-extras/src/cell-edit-validators/CaseValidator.js

@@ -0,0 +1,23 @@
+import { registerComponent } from '@vuu-ui/vuu-utils';
+import { OK } from '@vuu-ui/vuu-data-react';
+
+const isString = (value) => typeof value === "string";
+const CaseValidator = (rule, value) => {
+  if (isString(value)) {
+    if (value === "") {
+      return OK;
+    } else if (rule.value === "lower" && value.toLowerCase() !== value) {
+      return { ok: false, message: "value must be all lowercase" };
+    } else if (rule.value === "upper" && value.toUpperCase() !== value) {
+      return { ok: false, message: "value must be all uppercase" };
+    } else {
+      return OK;
+    }
+  } else {
+    return { ok: false, message: "value must be a string" };
+  }
+};
+registerComponent("vuu-case", CaseValidator, "data-edit-validator", {});
+
+export { CaseValidator };
+//# sourceMappingURL=CaseValidator.js.map

package/esm/packages/vuu-table-extras/src/cell-edit-validators/CaseValidator.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CaseValidator.js","sources":["../../../../../../../packages/vuu-table-extras/src/cell-edit-validators/CaseValidator.ts"],"sourcesContent":["import { registerComponent } from \"@vuu-ui/vuu-utils\";\nimport { VuuRowDataItemType } from \"@vuu-ui/vuu-protocol-types\";\nimport { EditRuleValidator } from \"@vuu-ui/vuu-data-types\";\nimport { OK } from \"@vuu-ui/vuu-data-react\";\n\nconst isString = (value?: VuuRowDataItemType): value is string =>\n  typeof value === \"string\";\n\nexport const CaseValidator: EditRuleValidator = (rule, value) => {\n  if (isString(value)) {\n    if (value === \"\") {\n      return OK;\n    } else if (rule.value === \"lower\" && value.toLowerCase() !== value) {\n      return { ok: false, message: \"value must be all lowercase\" };\n    } else if (rule.value === \"upper\" && value.toUpperCase() !== value) {\n      return { ok: false, message: \"value must be all uppercase\" };\n    } else {\n      return OK;\n    }\n  } else {\n    return { ok: false, message: \"value must be a string\" };\n  }\n};\n\nregisterComponent(\"vuu-case\", CaseValidator, \"data-edit-validator\", {});\n"],"names":[],"mappings":";;;AAKA,MAAM,QAAW,GAAA,CAAC,KAChB,KAAA,OAAO,KAAU,KAAA,QAAA;AAEN,MAAA,aAAA,GAAmC,CAAC,IAAA,EAAM,KAAU,KAAA;AAC/D,EAAI,IAAA,QAAA,CAAS,KAAK,CAAG,EAAA;AACnB,IAAA,IAAI,UAAU,EAAI,EAAA;AAChB,MAAO,OAAA,EAAA;AAAA,eACE,IAAK,CAAA,KAAA,KAAU,WAAW,KAAM,CAAA,WAAA,OAAkB,KAAO,EAAA;AAClE,MAAA,OAAO,EAAE,EAAA,EAAI,KAAO,EAAA,OAAA,EAAS,6BAA8B,EAAA;AAAA,eAClD,IAAK,CAAA,KAAA,KAAU,WAAW,KAAM,CAAA,WAAA,OAAkB,KAAO,EAAA;AAClE,MAAA,OAAO,EAAE,EAAA,EAAI,KAAO,EAAA,OAAA,EAAS,6BAA8B,EAAA;AAAA,KACtD,MAAA;AACL,MAAO,OAAA,EAAA;AAAA;AACT,GACK,MAAA;AACL,IAAA,OAAO,EAAE,EAAA,EAAI,KAAO,EAAA,OAAA,EAAS,wBAAyB,EAAA;AAAA;AAE1D;AAEA,iBAAA,CAAkB,UAAY,EAAA,aAAA,EAAe,qBAAuB,EAAA,EAAE,CAAA;;;;"}

package/esm/packages/vuu-table-extras/src/cell-edit-validators/PatternValidator.js

@@ -0,0 +1,29 @@
+import { registerComponent } from '@vuu-ui/vuu-utils';
+import { OK } from '@vuu-ui/vuu-data-react';
+
+const isString = (value) => typeof value === "string";
+const defaultMessage = "value does not match expected pattern";
+const PatternValidator = (rule, value) => {
+  if (typeof rule.value !== "string") {
+    throw Error("Pattern validation rule must provide pattern");
+  }
+  if (isString(value)) {
+    if (value === "") {
+      return OK;
+    } else {
+      const { message = defaultMessage } = rule;
+      const pattern = new RegExp(rule.value);
+      if (pattern.test(value)) {
+        return OK;
+      } else {
+        return { ok: false, message };
+      }
+    }
+  } else {
+    return { ok: false, message: "value must be a string" };
+  }
+};
+registerComponent("vuu-pattern", PatternValidator, "data-edit-validator", {});
+
+export { PatternValidator };
+//# sourceMappingURL=PatternValidator.js.map

package/esm/packages/vuu-table-extras/src/cell-edit-validators/PatternValidator.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PatternValidator.js","sources":["../../../../../../../packages/vuu-table-extras/src/cell-edit-validators/PatternValidator.ts"],"sourcesContent":["import { registerComponent } from \"@vuu-ui/vuu-utils\";\nimport { VuuRowDataItemType } from \"@vuu-ui/vuu-protocol-types\";\nimport { EditRuleValidator } from \"@vuu-ui/vuu-data-types\";\nimport { OK } from \"@vuu-ui/vuu-data-react\";\n\nconst isString = (value?: VuuRowDataItemType): value is string =>\n  typeof value === \"string\";\n\nconst defaultMessage = \"value does not match expected pattern\";\n\nexport const PatternValidator: EditRuleValidator = (rule, value) => {\n  if (typeof rule.value !== \"string\") {\n    throw Error(\"Pattern validation rule must provide pattern\");\n  }\n  if (isString(value)) {\n    if (value === \"\") {\n      return OK;\n    } else {\n      const { message = defaultMessage } = rule;\n      const pattern = new RegExp(rule.value);\n      if (pattern.test(value)) {\n        return OK;\n      } else {\n        return { ok: false, message };\n      }\n    }\n  } else {\n    return { ok: false, message: \"value must be a string\" };\n  }\n};\n\nregisterComponent(\"vuu-pattern\", PatternValidator, \"data-edit-validator\", {});\n"],"names":[],"mappings":";;;AAKA,MAAM,QAAW,GAAA,CAAC,KAChB,KAAA,OAAO,KAAU,KAAA,QAAA;AAEnB,MAAM,cAAiB,GAAA,uCAAA;AAEV,MAAA,gBAAA,GAAsC,CAAC,IAAA,EAAM,KAAU,KAAA;AAClE,EAAI,IAAA,OAAO,IAAK,CAAA,KAAA,KAAU,QAAU,EAAA;AAClC,IAAA,MAAM,MAAM,8CAA8C,CAAA;AAAA;AAE5D,EAAI,IAAA,QAAA,CAAS,KAAK,CAAG,EAAA;AACnB,IAAA,IAAI,UAAU,EAAI,EAAA;AAChB,MAAO,OAAA,EAAA;AAAA,KACF,MAAA;AACL,MAAM,MAAA,EAAE,OAAU,GAAA,cAAA,EAAmB,GAAA,IAAA;AACrC,MAAA,MAAM,OAAU,GAAA,IAAI,MAAO,CAAA,IAAA,CAAK,KAAK,CAAA;AACrC,MAAI,IAAA,OAAA,CAAQ,IAAK,CAAA,KAAK,CAAG,EAAA;AACvB,QAAO,OAAA,EAAA;AAAA,OACF,MAAA;AACL,QAAO,OAAA,EAAE,EAAI,EAAA,KAAA,EAAO,OAAQ,EAAA;AAAA;AAC9B;AACF,GACK,MAAA;AACL,IAAA,OAAO,EAAE,EAAA,EAAI,KAAO,EAAA,OAAA,EAAS,wBAAyB,EAAA;AAAA;AAE1D;AAEA,iBAAA,CAAkB,aAAe,EAAA,gBAAA,EAAkB,qBAAuB,EAAA,EAAE,CAAA;;;;"}

package/esm/packages/vuu-table-extras/src/cell-renderers/background-cell/BackgroundCell.css.js

@@ -0,0 +1,4 @@
+var backgroundCellCss = "\n.vuuBackgroundCell {\n  --background-animation-duration: 10s;\n  color: var(--vuuBackgroundCell-color, var(--salt-content-primary-foreground));\n  padding-right: var(--salt-size-unit);\n  position: relative;\n}\n\n.vuuBackgroundCell-arrowBackground,\n.vuuBackgroundCell-arrowOnly {\n  padding-left: 14px;\n}\n\n.vuuBackgroundCell-value {\n  position: relative;\n  z-index: 1;\n}\n\n.vuuBackgroundCell-arrow {\n  background-color: var(--background-cell-background);\n  position: absolute;\n  left: 0;\n  right: 0;\n  top: 0;\n  bottom: 0;\n}\n\n.vuuBackgroundCell-arrow {\n  text-align: left;\n}\n.vuuBackgroundCell-arrow + .num {\n  padding-left: 8px;\n}\n\n.right .vuuBackgroundCell-arrow {\n  text-align: right;\n}\n.right .vuuBackgroundCell-arrow + .num {\n  padding-right: 8px;\n}\n\n.vuuBackgroundCell-arrowOnly > .vuuBackgroundCell-arrow {\n  background-color: transparent;\n}\n\n.vuuBackgroundCell-backgroundOnly.up1,\n.vuuBackgroundCell-arrowBackground.up1 {\n  animation-duration: var(--background-animation-duration);\n  animation-name: vuubgup1;\n}\n\n.vuuBackgroundCell-backgroundOnly.up2,\n.vuuBackgroundCell-arrowBackground.up2 {\n  animation-duration: var(--background-animation-duration);\n  animation-name: vuubgup2;\n}\n\n.vuuBackgroundCell-backgroundOnly.down1,\n.vuuBackgroundCell-arrowBackground.down1 {\n  animation-duration: var(--background-animation-duration);\n  animation-name: vuubgdown1;\n}\n\n.vuuBackgroundCell-backgroundOnly.down2,\n.vuuBackgroundCell-arrowBackground.down2 {\n  animation-duration: var(--background-animation-duration);\n  animation-name: vuubgdown2;\n}\n\n.up1.vuuBackgroundCell-arrowOnly > .vuuBackgroundCell-arrow {\n  animation-duration: 30s;\n  animation-name: vuuarrowup1;\n}\n\n.up2.vuuBackgroundCell-arrowOnly > .vuuBackgroundCell-arrow {\n  animation-duration: 30s;\n  animation-name: vuuarrowup2;\n}\n\n.down1.vuuBackgroundCell-arrowOnly > .vuuBackgroundCell-arrow {\n  animation-duration: 30s;\n  animation-name: vuuarrowdown1;\n}\n\n.down2.vuuBackgroundCell-arrowOnly > .vuuBackgroundCell-arrow {\n  animation-duration: 30s;\n  animation-name: vuuarrowdown2;\n}\n\n.up1.vuuBackgroundCell-arrowBackground > .vuuBackgroundCell-arrow {\n  animation-duration: 30s;\n  animation-name: vuubgarrowup1;\n}\n\n.up2.vuuBackgroundCell-arrowBackground > .vuuBackgroundCell-arrow {\n  animation-duration: 30s;\n  animation-name: vuubgarrowup2;\n}\n\n.down1.vuuBackgroundCell-arrowBackground > .vuuBackgroundCell-arrow {\n  animation-duration: 30s;\n  animation-name: vuubgarrowdown1;\n}\n\n.down2.vuuBackgroundCell-arrowBackground > .vuuBackgroundCell-arrow {\n  animation-duration: 30s;\n  animation-name: vuubgarrowdown2;\n}\n";
+
+export { backgroundCellCss as default };
+//# sourceMappingURL=BackgroundCell.css.js.map

package/esm/packages/vuu-table-extras/src/cell-renderers/background-cell/BackgroundCell.css.js.map

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

package/esm/packages/vuu-table-extras/src/cell-renderers/background-cell/BackgroundCell.js

@@ -0,0 +1,79 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useComponentCssInjection } from '@salt-ds/styles';
+import { useWindow } from '@salt-ds/window';
+import { dataAndColumnUnchanged, registerComponent, isTypeDescriptor, UP1, UP2, DOWN1, DOWN2 } from '@vuu-ui/vuu-utils';
+import cx from 'clsx';
+import { memo } from 'react';
+import { useDirection } from './useDirection.js';
+import backgroundCellCss from './BackgroundCell.css.js';
+import backgroundKeyFramesCss from './BackgroundKeyframes.css.js';
+
+const CHAR_ARROW_UP = String.fromCharCode(11014);
+const CHAR_ARROW_DOWN = String.fromCharCode(11015);
+const classBase = "vuuBackgroundCell";
+const FlashStyle = {
+  ArrowOnly: "arrow",
+  BackgroundOnly: "bg-only",
+  ArrowBackground: "arrow-bg"
+};
+const getFlashStyle = (colType) => {
+  if (isTypeDescriptor(colType) && colType.renderer) {
+    if ("flashStyle" in colType.renderer) {
+      return colType.renderer["flashStyle"];
+    }
+  }
+  return FlashStyle.BackgroundOnly;
+};
+const BackgroundCell = memo(function BackgroundCell2({
+  column,
+  dataRow
+}) {
+  const targetWindow = useWindow();
+  useComponentCssInjection({
+    testId: "vuu-background-cell",
+    css: backgroundCellCss,
+    window: targetWindow
+  });
+  useComponentCssInjection({
+    testId: "vuu-background-keyframes",
+    css: backgroundKeyFramesCss,
+    window: targetWindow
+  });
+  const { name, type, valueFormatter } = column;
+  const value = dataRow[name];
+  const flashStyle = getFlashStyle(type);
+  const direction = useDirection(dataRow.key, value, column);
+  const arrow = flashStyle === FlashStyle.ArrowOnly || flashStyle === FlashStyle.ArrowBackground ? direction === UP1 || direction === UP2 ? CHAR_ARROW_UP : direction === DOWN1 || direction === DOWN2 ? CHAR_ARROW_DOWN : null : null;
+  const dirClass = direction ? ` ` + direction : "";
+  const className = cx(classBase, dirClass, {
+    [`${classBase}-backgroundOnly`]: flashStyle === FlashStyle.BackgroundOnly,
+    [`${classBase}-arrowOnly`]: flashStyle === FlashStyle.ArrowOnly,
+    [`${classBase}-arrowBackground`]: flashStyle === FlashStyle.ArrowBackground
+  });
+  return /* @__PURE__ */ jsxs("div", { className, tabIndex: -1, children: [
+    /* @__PURE__ */ jsx("div", { className: `${classBase}-arrow`, children: arrow }),
+    /* @__PURE__ */ jsx("span", { className: `${classBase}-value`, children: valueFormatter(dataRow[name]) })
+  ] });
+}, dataAndColumnUnchanged);
+registerComponent(
+  "vuu.price-move-background",
+  BackgroundCell,
+  "cell-renderer",
+  {
+    description: "Change background color of cell when value changes",
+    configEditor: "BackgroundCellConfigurationEditor",
+    label: "Background Flash",
+    serverDataType: [
+      "long",
+      "int",
+      "double",
+      "scaleddecimal2",
+      "scaleddecimal4",
+      "scaleddecimal6",
+      "scaleddecimal8"
+    ]
+  }
+);
+
+export { BackgroundCell };
+//# sourceMappingURL=BackgroundCell.js.map

package/esm/packages/vuu-table-extras/src/cell-renderers/background-cell/BackgroundCell.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BackgroundCell.js","sources":["../../../../../../../../packages/vuu-table-extras/src/cell-renderers/background-cell/BackgroundCell.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { TableCellRendererProps } from \"@vuu-ui/vuu-table-types\";\nimport {\n  dataAndColumnUnchanged,\n  DOWN1,\n  DOWN2,\n  isTypeDescriptor,\n  registerComponent,\n  UP1,\n  UP2,\n} from \"@vuu-ui/vuu-utils\";\nimport cx from \"clsx\";\nimport { memo } from \"react\";\nimport { useDirection } from \"./useDirection\";\n\nimport { DataValueType } from \"@vuu-ui/vuu-data-types\";\nimport backgroundCellCss from \"./BackgroundCell.css\";\nimport backgroundKeyFramesCss from \"./BackgroundKeyframes.css\";\n\nconst CHAR_ARROW_UP = String.fromCharCode(11014);\nconst CHAR_ARROW_DOWN = String.fromCharCode(11015);\n\nconst classBase = \"vuuBackgroundCell\";\n\n// TODO these sre repeated from PriceFormatter - where shoud they live ?\nconst FlashStyle = {\n  ArrowOnly: \"arrow\",\n  BackgroundOnly: \"bg-only\",\n  ArrowBackground: \"arrow-bg\",\n};\n\nconst getFlashStyle = (colType?: DataValueType) => {\n  if (isTypeDescriptor(colType) && colType.renderer) {\n    if (\"flashStyle\" in colType.renderer) {\n      return colType.renderer[\"flashStyle\"];\n    }\n  }\n  return FlashStyle.BackgroundOnly;\n};\n\nexport const BackgroundCell = memo(function BackgroundCell({\n  column,\n  dataRow,\n}: TableCellRendererProps) {\n  //TODO what about click handling\n\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-background-cell\",\n    css: backgroundCellCss,\n    window: targetWindow,\n  });\n  useComponentCssInjection({\n    testId: \"vuu-background-keyframes\",\n    css: backgroundKeyFramesCss,\n    window: targetWindow,\n  });\n\n  const { name, type, valueFormatter } = column;\n  const value = dataRow[name];\n  const flashStyle = getFlashStyle(type);\n  const direction = useDirection(dataRow.key, value, column);\n  const arrow =\n    flashStyle === FlashStyle.ArrowOnly ||\n    flashStyle === FlashStyle.ArrowBackground\n      ? direction === UP1 || direction === UP2\n        ? CHAR_ARROW_UP\n        : direction === DOWN1 || direction === DOWN2\n          ? CHAR_ARROW_DOWN\n          : null\n      : null;\n\n  const dirClass = direction ? ` ` + direction : \"\";\n\n  const className = cx(classBase, dirClass, {\n    [`${classBase}-backgroundOnly`]: flashStyle === FlashStyle.BackgroundOnly,\n    [`${classBase}-arrowOnly`]: flashStyle === FlashStyle.ArrowOnly,\n    [`${classBase}-arrowBackground`]: flashStyle === FlashStyle.ArrowBackground,\n  });\n\n  return (\n    <div className={className} tabIndex={-1}>\n      <div className={`${classBase}-arrow`}>{arrow}</div>\n      <span className={`${classBase}-value`}>\n        {valueFormatter(dataRow[name])}\n      </span>\n    </div>\n  );\n}, dataAndColumnUnchanged);\n\nregisterComponent(\n  \"vuu.price-move-background\",\n  BackgroundCell,\n  \"cell-renderer\",\n  {\n    description: \"Change background color of cell when value changes\",\n    configEditor: \"BackgroundCellConfigurationEditor\",\n    label: \"Background Flash\",\n    serverDataType: [\n      \"long\",\n      \"int\",\n      \"double\",\n      \"scaleddecimal2\",\n      \"scaleddecimal4\",\n      \"scaleddecimal6\",\n      \"scaleddecimal8\",\n    ],\n  },\n);\n"],"names":["BackgroundCell"],"mappings":"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"}

package/esm/packages/vuu-table-extras/src/cell-renderers/background-cell/BackgroundCellConfigurationEditor.css.js

@@ -0,0 +1,4 @@
+var backgroundCellConfigurationEditorCss = ".vuuBackgroundCellConfiguration {\n    height: 50px;\n    background-color: red;\n}";
+
+export { backgroundCellConfigurationEditorCss as default };
+//# sourceMappingURL=BackgroundCellConfigurationEditor.css.js.map

package/esm/packages/vuu-table-extras/src/cell-renderers/background-cell/BackgroundCellConfigurationEditor.css.js.map

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

package/esm/packages/vuu-table-extras/src/cell-renderers/background-cell/BackgroundCellConfigurationEditor.js

@@ -0,0 +1,65 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { registerConfigurationEditor } from '@vuu-ui/vuu-utils';
+import { FormField, FormFieldLabel, Dropdown, Option } from '@salt-ds/core';
+import { useComponentCssInjection } from '@salt-ds/styles';
+import { useWindow } from '@salt-ds/window';
+import { useState, useCallback } from 'react';
+import backgroundCellConfigurationEditorCss from './BackgroundCellConfigurationEditor.css.js';
+
+const classBase = "vuuBackgroundCellConfiguration";
+const flashOptions = [
+  { label: "Background Only", value: "bg-only" },
+  { label: "Background and Arrow", value: "arrow-bg" },
+  { label: "Arrow Only", value: "arrow" }
+];
+const [defaultFlashOption] = flashOptions;
+const valueFromColumn = (column) => {
+  const { flashStyle } = column.type.renderer;
+  return flashOptions.find((o) => o.value === flashStyle) || defaultFlashOption;
+};
+const BackgroundCellConfigurationEditor = ({
+  column,
+  onChangeRendering
+}) => {
+  const targetWindow = useWindow();
+  useComponentCssInjection({
+    testId: "vuu-background-cell-configuration-editor",
+    css: backgroundCellConfigurationEditorCss,
+    window: targetWindow
+  });
+  console.log({ type: column.type });
+  const [flashStyle, setFlashStyle] = useState(
+    valueFromColumn(column)
+  );
+  const handleSelectionChange = useCallback(
+    (_, [flashOption]) => {
+      setFlashStyle(flashOption);
+      const renderProps = column.type.renderer;
+      onChangeRendering({
+        ...renderProps,
+        flashStyle: flashOption?.value ?? defaultFlashOption.value
+      });
+    },
+    [column.type, onChangeRendering]
+  );
+  return /* @__PURE__ */ jsxs(FormField, { children: [
+    /* @__PURE__ */ jsx(FormFieldLabel, { children: "Flash Style" }),
+    /* @__PURE__ */ jsx(
+      Dropdown,
+      {
+        className: `${classBase}-flashStyle`,
+        onSelectionChange: handleSelectionChange,
+        selected: flashStyle ? [flashStyle] : [],
+        value: flashStyle?.label,
+        children: flashOptions.map((flashOption, i) => /* @__PURE__ */ jsx(Option, { value: flashOption, children: flashOption.label }, i))
+      }
+    )
+  ] });
+};
+registerConfigurationEditor(
+  "BackgroundCellConfigurationEditor",
+  BackgroundCellConfigurationEditor
+);
+
+export { BackgroundCellConfigurationEditor };
+//# sourceMappingURL=BackgroundCellConfigurationEditor.js.map

package/esm/packages/vuu-table-extras/src/cell-renderers/background-cell/BackgroundCellConfigurationEditor.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BackgroundCellConfigurationEditor.js","sources":["../../../../../../../../packages/vuu-table-extras/src/cell-renderers/background-cell/BackgroundCellConfigurationEditor.tsx"],"sourcesContent":["import type { ColumnDescriptorCustomRenderer } from \"@vuu-ui/vuu-table-types\";\nimport {\n  ConfigurationEditorProps,\n  registerConfigurationEditor,\n} from \"@vuu-ui/vuu-utils\";\nimport { Dropdown, FormField, FormFieldLabel, Option } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { SyntheticEvent, useCallback, useState } from \"react\";\n\nimport backgroundCellConfigurationEditorCss from \"./BackgroundCellConfigurationEditor.css\";\n\nconst classBase = \"vuuBackgroundCellConfiguration\";\n\ntype FlashOption = {\n  label: string;\n  value: \"arrow\" | \"bg-only\" | \"arrow-bg\";\n};\n\nconst flashOptions: FlashOption[] = [\n  { label: \"Background Only\", value: \"bg-only\" },\n  { label: \"Background and Arrow\", value: \"arrow-bg\" },\n  { label: \"Arrow Only\", value: \"arrow\" },\n];\n\nconst [defaultFlashOption] = flashOptions;\n\nconst valueFromColumn = (column: ColumnDescriptorCustomRenderer) => {\n  const { flashStyle } = column.type.renderer;\n  return flashOptions.find((o) => o.value === flashStyle) || defaultFlashOption;\n};\n\nexport const BackgroundCellConfigurationEditor = ({\n  column,\n  onChangeRendering,\n}: ConfigurationEditorProps) => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-background-cell-configuration-editor\",\n    css: backgroundCellConfigurationEditorCss,\n    window: targetWindow,\n  });\n\n  console.log({ type: column.type });\n\n  const [flashStyle, setFlashStyle] = useState<FlashOption | undefined>(\n    valueFromColumn(column),\n  );\n  const handleSelectionChange = useCallback(\n    (_: SyntheticEvent, [flashOption]: FlashOption[]) => {\n      setFlashStyle(flashOption);\n      const renderProps = column.type.renderer;\n      onChangeRendering({\n        ...renderProps,\n        flashStyle: flashOption?.value ?? defaultFlashOption.value,\n      });\n    },\n    [column.type, onChangeRendering],\n  );\n\n  return (\n    <FormField>\n      <FormFieldLabel>Flash Style</FormFieldLabel>\n      <Dropdown<FlashOption>\n        className={`${classBase}-flashStyle`}\n        onSelectionChange={handleSelectionChange}\n        selected={flashStyle ? [flashStyle] : []}\n        value={flashStyle?.label}\n      >\n        {flashOptions.map((flashOption, i) => (\n          <Option key={i} value={flashOption}>\n            {flashOption.label}\n          </Option>\n        ))}\n      </Dropdown>\n    </FormField>\n  );\n};\n\nregisterConfigurationEditor(\n  \"BackgroundCellConfigurationEditor\",\n  BackgroundCellConfigurationEditor,\n);\n"],"names":[],"mappings":";;;;;;;;AAYA,MAAM,SAAY,GAAA,gCAAA;AAOlB,MAAM,YAA8B,GAAA;AAAA,EAClC,EAAE,KAAA,EAAO,iBAAmB,EAAA,KAAA,EAAO,SAAU,EAAA;AAAA,EAC7C,EAAE,KAAA,EAAO,sBAAwB,EAAA,KAAA,EAAO,UAAW,EAAA;AAAA,EACnD,EAAE,KAAA,EAAO,YAAc,EAAA,KAAA,EAAO,OAAQ;AACxC,CAAA;AAEA,MAAM,CAAC,kBAAkB,CAAI,GAAA,YAAA;AAE7B,MAAM,eAAA,GAAkB,CAAC,MAA2C,KAAA;AAClE,EAAA,MAAM,EAAE,UAAA,EAAe,GAAA,MAAA,CAAO,IAAK,CAAA,QAAA;AACnC,EAAA,OAAO,aAAa,IAAK,CAAA,CAAC,MAAM,CAAE,CAAA,KAAA,KAAU,UAAU,CAAK,IAAA,kBAAA;AAC7D,CAAA;AAEO,MAAM,oCAAoC,CAAC;AAAA,EAChD,MAAA;AAAA,EACA;AACF,CAAgC,KAAA;AAC9B,EAAA,MAAM,eAAe,SAAU,EAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,0CAAA;AAAA,IACR,GAAK,EAAA,oCAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EAAA,OAAA,CAAQ,GAAI,CAAA,EAAE,IAAM,EAAA,MAAA,CAAO,MAAM,CAAA;AAEjC,EAAM,MAAA,CAAC,UAAY,EAAA,aAAa,CAAI,GAAA,QAAA;AAAA,IAClC,gBAAgB,MAAM;AAAA,GACxB;AACA,EAAA,MAAM,qBAAwB,GAAA,WAAA;AAAA,IAC5B,CAAC,CAAA,EAAmB,CAAC,WAAW,CAAqB,KAAA;AACnD,MAAA,aAAA,CAAc,WAAW,CAAA;AACzB,MAAM,MAAA,WAAA,GAAc,OAAO,IAAK,CAAA,QAAA;AAChC,MAAkB,iBAAA,CAAA;AAAA,QAChB,GAAG,WAAA;AAAA,QACH,UAAA,EAAY,WAAa,EAAA,KAAA,IAAS,kBAAmB,CAAA;AAAA,OACtD,CAAA;AAAA,KACH;AAAA,IACA,CAAC,MAAO,CAAA,IAAA,EAAM,iBAAiB;AAAA,GACjC;AAEA,EAAA,4BACG,SACC,EAAA,EAAA,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,kBAAe,QAAW,EAAA,aAAA,EAAA,CAAA;AAAA,oBAC3B,GAAA;AAAA,MAAC,QAAA;AAAA,MAAA;AAAA,QACC,SAAA,EAAW,GAAG,SAAS,CAAA,WAAA,CAAA;AAAA,QACvB,iBAAmB,EAAA,qBAAA;AAAA,QACnB,QAAU,EAAA,UAAA,GAAa,CAAC,UAAU,IAAI,EAAC;AAAA,QACvC,OAAO,UAAY,EAAA,KAAA;AAAA,QAElB,QAAa,EAAA,YAAA,CAAA,GAAA,CAAI,CAAC,WAAA,EAAa,CAC9B,qBAAA,GAAA,CAAC,MAAe,EAAA,EAAA,KAAA,EAAO,WACpB,EAAA,QAAA,EAAA,WAAA,CAAY,KADF,EAAA,EAAA,CAEb,CACD;AAAA;AAAA;AACH,GACF,EAAA,CAAA;AAEJ;AAEA,2BAAA;AAAA,EACE,mCAAA;AAAA,EACA;AACF,CAAA;;;;"}

package/esm/packages/vuu-table-extras/src/cell-renderers/background-cell/BackgroundKeyframes.css.js

@@ -0,0 +1,4 @@
+var backgroundKeyFramesCss = "\n@keyframes vuubgup1 {\n    0% {\n      background-color: var(--salt-sentiment-positive-foreground-informative);\n      color: white;\n    }\n\n    40% {\n      color: white;\n    }  \n    60% {\n      color: var(--salt-content-primary-foreground);\n    }  \n\n    100% {\n      background-color: transparent;\n      color: var(--salt-content-primary-foreground);\n    }\n  }\n  \n  @keyframes vuubgup2 {\n    0% {\n      background-color: var(--salt-sentiment-positive-foreground-informative);\n      color: white;\n    }\n\n    30% {\n      color: white;\n    }  \n    33% {\n      color: var(--salt-content-primary-foreground);\n    }  \n\n    100% {\n      background-color: transparent;\n      color: var(--salt-content-primary-foreground);\n    }\n  }\n  \n  @keyframes vuubgdown1 {\n    0% {\n      background-color: var(--salt-sentiment-negative-foreground-informative);\n      color: white;\n    }\n    30% {\n      color: white;\n    }  \n    33% {\n      color: var(--salt-content-primary-foreground);\n    }  \n    100% {\n      background-color: transparent;\n      color: var(--salt-content-primary-foreground);\n    }\n  }\n  \n  @keyframes vuubgdown2 {\n    0% {\n      background-color: var(--salt-sentiment-negative-foreground-informative);\n      color: white;\n    }\n    30% {\n      color: white;\n    }  \n    33% {\n      color: var(--salt-content-primary-foreground);\n    }  \n    100% {\n      background-color: transparent;\n      color: var(--salt-content-primary-foreground);\n    }\n  }\n  \n  @keyframes vuuarrowup1 {\n    from {\n      color: var(--salt-sentiment-positive-foreground-informative);\n    }\n    to {\n      color: transparent;\n    }\n  }\n  \n  @keyframes vuuarrowup2 {\n    from {\n      color: var(--salt-sentiment-positive-foreground-informative);\n    }\n    to {\n      color: transparent;\n    }\n  }\n  \n  @keyframes vuuarrowdown1 {\n    from {\n      color: var(--salt-sentiment-negative-foreground-informative);\n    }\n    to {\n      color: transparent;\n    }\n  }\n  \n  @keyframes vuuarrowdown2 {\n    from {\n      color: var(--salt-sentiment-negative-foreground-informative);\n    }\n    to {\n      color: transparent;\n    }\n  }\n  \n  @keyframes vuubgarrowup1 {\n    0% {\n      color: var(--salt-sentiment-positive-foreground-informative);\n      background-color: var(--salt-sentiment-positive-foreground-informative);\n    }\n    20% {\n      color: var(--salt-sentiment-positive-foreground-informative);\n      background-color: transparent;\n    }\n    100% {\n      color: transparent;\n      background-color: transparent;\n    }\n  }\n  \n  @keyframes vuubgarrowup2 {\n    0% {\n      color: var(--salt-sentiment-positive-foreground-informative);\n      background-color: var(--salt-sentiment-positive-foreground-informative);\n    }\n    20% {\n      color: var(-salt-sentiment-positive-foreground-informative);\n      background-color: transparent;\n    }\n    100% {\n      color: transparent;\n      background-color: transparent;\n    }\n  }\n  \n  @keyframes vuubgarrowdown1 {\n    0% {\n      color: var(--salt-sentiment-negative-foreground-informative);\n      background-color: var(--salt-sentiment-negative-foreground-informative);\n    }\n    20% {\n      color: var(--salt-sentiment-negative-foreground-informative);\n      background-color: transparent;\n    }\n    100% {\n      color: transparent;\n      background-color: transparent;\n    }\n  }\n  \n  @keyframes vuubgarrowdown2 {\n    0% {\n      color: var(--salt-sentiment-negative-foreground-informative);\n      background-color: var(--salt-sentiment-negative-foreground-informative);\n    }\n    20% {\n      color: var(--salt-sentiment-negative-foreground-informative);\n      background-color: transparent;\n    }\n    100% {\n      color: transparent;\n      background-color: transparent;\n    }\n  }\n  ";
+
+export { backgroundKeyFramesCss as default };
+//# sourceMappingURL=BackgroundKeyframes.css.js.map

package/esm/packages/vuu-table-extras/src/cell-renderers/background-cell/BackgroundKeyframes.css.js.map

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

package/esm/packages/vuu-table-extras/src/cell-renderers/background-cell/useDirection.js

@@ -0,0 +1,18 @@
+import { isTypeDescriptor, isValidNumber, getMovingValueDirection } from '@vuu-ui/vuu-utils';
+import { useRef, useEffect } from 'react';
+
+const INITIAL_VALUE = [void 0, void 0, void 0, void 0];
+function useDirection(key, value, column) {
+  const ref = useRef(void 0);
+  const [prevKey, prevValue, prevColumn, prevDirection] = ref.current || INITIAL_VALUE;
+  const { type: dataType } = column;
+  const decimals = isTypeDescriptor(dataType) ? dataType.formatting?.decimals : void 0;
+  const direction = key === prevKey && isValidNumber(value) && isValidNumber(prevValue) && column === prevColumn ? getMovingValueDirection(value, prevDirection, prevValue, decimals) : "";
+  useEffect(() => {
+    ref.current = [key, value, column, direction];
+  });
+  return direction;
+}
+
+export { useDirection };
+//# sourceMappingURL=useDirection.js.map