@vuu-ui/vuu-table 0.9.1 → 0.9.3

package/cjs/bulk-edit/BulkEditPanel.js

@@ -7,6 +7,7 @@ var cx = require('clsx');
 var react = require('react');
 var Table = require('../Table.js');
 var BulkEditRow = require('./BulkEditRow.js');
+var useBulkEditPanel = require('./useBulkEditPanel.js');
 var BulkEditPanel$1 = require('./BulkEditPanel.css.js');
 
 const classBase = "vuuBulkEditPanel";
@@ -15,6 +16,7 @@ const BulkEditPanel = ({
   columns,
   dataSource,
   parentDs,
+  onValidationStatusChange,
   ...htmlAttributes
 }) => {
   const targetWindow = window.useWindow();
@@ -23,35 +25,21 @@ const BulkEditPanel = ({
     css: BulkEditPanel$1,
     window: targetWindow
   });
+  const { onBulkChange, onDataEdited, onRowChange, tableConfig } = useBulkEditPanel.useBulkEditPanel({
+    columns,
+    dataSource,
+    onValidationStatusChange
+  });
   const bulkEditRow = react.useMemo(() => {
-    const onChange = (column, value) => {
-      dataSource.rpcCall?.({
-        namedParams: { column: column.name, value },
-        params: [],
-        rpcName: "VP_BULK_EDIT_COLUMN_CELLS_RPC",
-        type: "VIEW_PORT_RPC_CALL"
-      });
-    };
-    return /* @__PURE__ */ jsxRuntime.jsx(BulkEditRow.BulkEditRow, { onChange, dataSource: parentDs });
-  }, [dataSource, parentDs]);
-  const config = react.useMemo(() => {
-    return {
-      columns: columns ? columns.map((col) => {
-        return {
-          editable: col.editableBulk === "bulk",
-          hidden: col.editableBulk === false,
-          name: col.name,
-          serverDataType: col.serverDataType ?? "string",
-          type: col.name === "date" ? col.type : "string"
-        };
-      }) : dataSource.columns.map((name) => ({
-        editable: true,
-        name,
-        serverDataType: "string"
-      })),
-      rowSeparators: true
-    };
-  }, [columns, dataSource.columns]);
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      BulkEditRow.BulkEditRow,
+      {
+        dataSource: parentDs,
+        onBulkChange,
+        onRowChange
+      }
+    );
+  }, [onBulkChange, onRowChange, parentDs]);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
@@ -64,13 +52,15 @@ const BulkEditPanel = ({
           Table.Table,
           {
             allowDragColumnHeader: false,
-            config,
+            config: tableConfig,
             customHeader: bulkEditRow,
             dataSource,
-            height: 400,
+            height: 380,
             width: 600,
             showColumnHeaderMenus: false,
-            selectionModel: "none"
+            selectionModel: "none",
+            onDataEdited,
+            maxViewportRowLimit: 10
           }
         ) })
       ]

package/cjs/bulk-edit/BulkEditPanel.js.map

@@ -1 +1 @@
-{"version":3,"file":"BulkEditPanel.js","sources":["../../src/bulk-edit/BulkEditPanel.tsx"],"sourcesContent":["import { DataSource, RpcResponse } from \"@vuu-ui/vuu-data-types\";\nimport { VuuRpcViewportRequest } from \"@vuu-ui/vuu-protocol-types\";\nimport type { ColumnDescriptor, TableConfig } from \"@vuu-ui/vuu-table-types\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport cx from \"clsx\";\nimport { HTMLAttributes, useMemo } from \"react\";\nimport { Table } from \"../Table\";\nimport { BulkEditRow, type EditValueChangeHandler } from \"./BulkEditRow\";\n\nimport bulkEditPanelCss from \"./BulkEditPanel.css\";\n\nconst classBase = \"vuuBulkEditPanel\";\n\nexport interface BulkEditPanelProps extends HTMLAttributes<HTMLDivElement> {\n  columns?: ColumnDescriptor[];\n  dataSource: DataSource;\n  response?: RpcResponse;\n  mainTableName?: string;\n  parentDs: DataSource;\n}\n\nexport const BulkEditPanel = ({\n  className,\n  columns,\n  dataSource,\n  parentDs,\n  ...htmlAttributes\n}: BulkEditPanelProps): JSX.Element => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-checkbox-cell\",\n    css: bulkEditPanelCss,\n    window: targetWindow,\n  });\n\n  const bulkEditRow = useMemo(() => {\n    const onChange: EditValueChangeHandler = (column, value) => {\n      dataSource.rpcCall?.({\n        namedParams: { column: column.name, value },\n        params: [],\n        rpcName: \"VP_BULK_EDIT_COLUMN_CELLS_RPC\",\n        type: \"VIEW_PORT_RPC_CALL\",\n      } as Omit<VuuRpcViewportRequest, \"vpId\">);\n    };\n    return <BulkEditRow onChange={onChange} dataSource={parentDs} />;\n  }, [dataSource, parentDs]);\n\n  const config: TableConfig = useMemo(() => {\n    return {\n      columns: columns\n        ? columns.map((col) => {\n            return {\n              editable: col.editableBulk === \"bulk\",\n              hidden: col.editableBulk === false,\n              name: col.name,\n              serverDataType: col.serverDataType ?? \"string\",\n              type: col.name === \"date\" ? col.type : \"string\",\n            };\n          })\n        : dataSource.columns.map((name) => ({\n            editable: true,\n            name,\n            serverDataType: \"string\",\n          })),\n      rowSeparators: true,\n    };\n  }, [columns, dataSource.columns]);\n\n  return (\n    <div\n      {...htmlAttributes}\n      className={cx(classBase, className)}\n      style={{ display: \"flex\", flexDirection: \"column\" }}\n    >\n      <div className={`${classBase}-toolbar`} />\n      <div className={`${classBase}-table`}>\n        <Table\n          allowDragColumnHeader={false}\n          config={config}\n          customHeader={bulkEditRow}\n          dataSource={dataSource}\n          height={400}\n          width={600}\n          showColumnHeaderMenus={false}\n          selectionModel=\"none\"\n        />\n      </div>\n    </div>\n  );\n};\n"],"names":["useWindow","useComponentCssInjection","bulkEditPanelCss","useMemo","jsx","BulkEditRow","jsxs","Table"],"mappings":"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"}
+{"version":3,"file":"BulkEditPanel.js","sources":["../../src/bulk-edit/BulkEditPanel.tsx"],"sourcesContent":["import { DataSource, RpcResponse } from \"@vuu-ui/vuu-data-types\";\nimport type { ColumnDescriptor } from \"@vuu-ui/vuu-table-types\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport cx from \"clsx\";\nimport { HTMLAttributes, useMemo } from \"react\";\nimport { Table } from \"../Table\";\nimport { BulkEditRow } from \"./BulkEditRow\";\nimport { useBulkEditPanel } from \"./useBulkEditPanel\";\n\nimport bulkEditPanelCss from \"./BulkEditPanel.css\";\n\nconst classBase = \"vuuBulkEditPanel\";\n\nexport interface BulkEditPanelProps extends HTMLAttributes<HTMLDivElement> {\n  columns?: ColumnDescriptor[];\n  dataSource: DataSource;\n  response?: RpcResponse;\n  mainTableName?: string;\n  parentDs: DataSource;\n  onValidationStatusChange: (isValid: boolean) => void;\n}\n\nexport const BulkEditPanel = ({\n  className,\n  columns,\n  dataSource,\n  parentDs,\n  onValidationStatusChange,\n  ...htmlAttributes\n}: BulkEditPanelProps): JSX.Element => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-checkbox-cell\",\n    css: bulkEditPanelCss,\n    window: targetWindow,\n  });\n\n  const { onBulkChange, onDataEdited, onRowChange, tableConfig } =\n    useBulkEditPanel({\n      columns,\n      dataSource,\n      onValidationStatusChange,\n    });\n\n  const bulkEditRow = useMemo(() => {\n    return (\n      <BulkEditRow\n        dataSource={parentDs}\n        onBulkChange={onBulkChange}\n        onRowChange={onRowChange}\n      />\n    );\n  }, [onBulkChange, onRowChange, parentDs]);\n\n  return (\n    <div\n      {...htmlAttributes}\n      className={cx(classBase, className)}\n      style={{ display: \"flex\", flexDirection: \"column\" }}\n    >\n      <div className={`${classBase}-toolbar`} />\n      <div className={`${classBase}-table`}>\n        <Table\n          allowDragColumnHeader={false}\n          config={tableConfig}\n          customHeader={bulkEditRow}\n          dataSource={dataSource}\n          height={380}\n          width={600}\n          showColumnHeaderMenus={false}\n          selectionModel=\"none\"\n          onDataEdited={onDataEdited}\n          maxViewportRowLimit={10}\n        />\n      </div>\n    </div>\n  );\n};\n"],"names":["useWindow","useComponentCssInjection","bulkEditPanelCss","useBulkEditPanel","useMemo","jsx","BulkEditRow","jsxs","Table"],"mappings":";;;;;;;;;;;;AAYA,MAAM,SAAY,GAAA,kBAAA;AAWX,MAAM,gBAAgB,CAAC;AAAA,EAC5B,SAAA;AAAA,EACA,OAAA;AAAA,EACA,UAAA;AAAA,EACA,QAAA;AAAA,EACA,wBAAA;AAAA,EACA,GAAG;AACL,CAAuC,KAAA;AACrC,EAAA,MAAM,eAAeA,gBAAU,EAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,mBAAA;AAAA,IACR,GAAK,EAAAC,eAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EAAA,MAAM,EAAE,YAAc,EAAA,YAAA,EAAc,WAAa,EAAA,WAAA,KAC/CC,iCAAiB,CAAA;AAAA,IACf,OAAA;AAAA,IACA,UAAA;AAAA,IACA;AAAA,GACD,CAAA;AAEH,EAAM,MAAA,WAAA,GAAcC,cAAQ,MAAM;AAChC,IACE,uBAAAC,cAAA;AAAA,MAACC,uBAAA;AAAA,MAAA;AAAA,QACC,UAAY,EAAA,QAAA;AAAA,QACZ,YAAA;AAAA,QACA;AAAA;AAAA,KACF;AAAA,GAED,EAAA,CAAC,YAAc,EAAA,WAAA,EAAa,QAAQ,CAAC,CAAA;AAExC,EACE,uBAAAC,eAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACE,GAAG,cAAA;AAAA,MACJ,SAAA,EAAW,EAAG,CAAA,SAAA,EAAW,SAAS,CAAA;AAAA,MAClC,KAAO,EAAA,EAAE,OAAS,EAAA,MAAA,EAAQ,eAAe,QAAS,EAAA;AAAA,MAElD,QAAA,EAAA;AAAA,wBAAAF,cAAA,CAAC,KAAI,EAAA,EAAA,SAAA,EAAW,CAAG,EAAA,SAAS,CAAY,QAAA,CAAA,EAAA,CAAA;AAAA,wBACvCA,cAAA,CAAA,KAAA,EAAA,EAAI,SAAW,EAAA,CAAA,EAAG,SAAS,CAC1B,MAAA,CAAA,EAAA,QAAA,kBAAAA,cAAA;AAAA,UAACG,WAAA;AAAA,UAAA;AAAA,YACC,qBAAuB,EAAA,KAAA;AAAA,YACvB,MAAQ,EAAA,WAAA;AAAA,YACR,YAAc,EAAA,WAAA;AAAA,YACd,UAAA;AAAA,YACA,MAAQ,EAAA,GAAA;AAAA,YACR,KAAO,EAAA,GAAA;AAAA,YACP,qBAAuB,EAAA,KAAA;AAAA,YACvB,cAAe,EAAA,MAAA;AAAA,YACf,YAAA;AAAA,YACA,mBAAqB,EAAA;AAAA;AAAA,SAEzB,EAAA;AAAA;AAAA;AAAA,GACF;AAEJ;;;;"}

package/cjs/bulk-edit/BulkEditRow.css.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var bulkEditRowCss = ".vuuBulkEditRow {\n  height: 24px;\n\n  .vuuBulkEditRow-filter {\n    display: inline-block;\n    padding: 1px;\n\n    .saltInput-primary.vuuInput {\n      border-color: var(--salt-separable-secondary-borderColor);\n      height: 22px;\n      min-height: 22px;\n      input::placeholder {\n        color: var(--tar-color-gray-25);\n      }\n    }\n  }\n\n  .vuuBulkEditRow-virtualColSpan {\n    display: inline-block;\n  }\n}\n";
+var bulkEditRowCss = ".vuuBulkEditRow {\n  --filter-borderColor: var(--salt-separable-secondary-borderColor);\n  --filter-color: var(--salt-content-primary-foreground-disabled);\n  --filter-padding: 1px 1px 1px 0;\n  --item-content-height: 22px;\n  height: var(--salt-size-base);\n\n  .vuuBulkEditRowCell:has(input:focus) {\n    --filter-borderColor: transparent;\n    --item-content-height: 20px;\n\n    outline-width: 2px;\n    outline-offset: -2px;\n    outline-style: dotted;\n    outline-color: var(--salt-focused-outlineColor);\n\n    /* the padding ensures the outline is not clipped */\n    --filter-padding: 0 2px;\n    /* prevents shift when we apply the padding */\n    --saltInput-paddingLeft: 2px;\n\n    .saltInput-input {\n      outline: none;\n    }\n    .saltInput-focused {\n      border: none;\n      outline: none;\n    }\n\n    .saltComboBox-focused {\n      outline: none;\n    }\n  }\n\n  .vuuBulkEditRowCell:focus {\n    --filter-borderColor: transparent;\n    --item-content-height: 20px;\n    /* the padding ensures the outline is not clipped */\n    --filter-padding: 0 2px;\n    /* prevents shift when we apply the padding */\n    --saltInput-paddingLeft: 2px;\n  }\n\n  .vuuBulkEditRowCell {\n    --saltInput-minHeight: var(--item-content-height);\n    --saltPillInput-minHeight: var(--item-content-height);\n\n    align-items: center;\n    display: inline-flex;\n    height: 100%;\n    padding: var(--filter-padding);\n\n    .vuuTypeaheadInput {\n      border-style: solid;\n      border-color: var(--filter-borderColor);\n      border-width: 1px;\n      border-radius: 0;\n      height: var(--item-content-height);\n      input::placeholder {\n        color: var(--filter-color);\n      }\n    }\n\n\n    .saltInput-primary.vuuInput {\n      border-style: solid;\n      border-color: var(--filter-borderColor);\n      border-width: 1px;\n      border-radius: 0;\n      height: var(--item-content-height);\n      min-height: var(--item-content-height);\n      input::placeholder {\n        color: var(--filter-color);\n      }\n    }\n  }\n\n  .vuuBulkEditRow-virtualColSpan {\n    display: inline-block;\n  }\n}\n\n.vuuBulkEditRow:focus-within {\n  --filter-borderColor: var(--salt-separable-primary-borderColor);\n  --filter-color: var(--salt-content-primary-foreground);\n}\n";
 
 module.exports = bulkEditRowCss;
 //# sourceMappingURL=BulkEditRow.css.js.map

package/cjs/bulk-edit/BulkEditRow.js

@@ -2,23 +2,21 @@
 
 var jsxRuntime = require('react/jsx-runtime');
 var vuuDataReact = require('@vuu-ui/vuu-data-react');
-var vuuUtils = require('@vuu-ui/vuu-utils');
 var styles = require('@salt-ds/styles');
 var window = require('@salt-ds/window');
-var react = require('react');
+var cx = require('clsx');
 var VirtualColSpan = require('../VirtualColSpan.js');
 var HeaderProvider = require('../table-header/HeaderProvider.js');
 require('../table-header/TableHeader.js');
+var useBulkEditRow = require('./useBulkEditRow.js');
 var BulkEditRow$1 = require('./BulkEditRow.css.js');
 
 const classBase = "vuuBulkEditRow";
-const InputProps = {
-  placeholder: "Enter value",
-  variant: "primary"
-};
 const BulkEditRow = ({
+  ariaRole,
   dataSource,
-  onChange,
+  onBulkChange,
+  onRowChange,
   ...htmlAttributes
 }) => {
   const targetWindow = window.useWindow();
@@ -27,49 +25,56 @@ const BulkEditRow = ({
     css: BulkEditRow$1,
     window: targetWindow
   });
-  const fieldRef = react.useRef("");
   const { columns, virtualColSpan = 0 } = HeaderProvider.useHeaderProps();
-  const onCommit = react.useCallback(
-    (evt, value) => {
-      if (value !== void 0 && String(value).trim() !== "") {
-        const columnName = fieldRef.current;
-        if (columnName) {
-          const column = columns.find((c) => c.name === columnName);
-          if (column) {
-            onChange(column, value);
-          }
-        }
-      }
-    },
-    [columns, onChange]
-  );
-  const handleFocus = react.useCallback((evt) => {
-    const field = vuuUtils.queryClosest(evt.target, "[data-field]");
-    if (field) {
-      const columnName = field.dataset.field;
-      if (columnName) {
-        fieldRef.current = columnName;
-      }
-    }
-  }, []);
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { ...htmlAttributes, className: classBase, onFocus: handleFocus, children: [
-    /* @__PURE__ */ jsxRuntime.jsx(VirtualColSpan.VirtualColSpan, { width: virtualColSpan }),
-    columns.map((column) => /* @__PURE__ */ jsxRuntime.jsx(
-      "div",
-      {
-        className: `${classBase}-filter`,
-        "data-field": column.name,
-        style: { width: column.width },
-        children: vuuDataReact.getDataItemEditControl({
-          InputProps,
-          dataDescriptor: column,
-          onCommit,
-          table: dataSource.table
+  const {
+    errorMessages,
+    formFieldsContainerRef,
+    InputProps,
+    onCommit,
+    onFocus,
+    onKeyDown
+  } = useBulkEditRow.useBulkEditRow({
+    descriptors: columns,
+    onBulkChange,
+    onRowChange
+  });
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      ...htmlAttributes,
+      className: classBase,
+      onFocus,
+      onKeyDown,
+      ref: formFieldsContainerRef,
+      role: ariaRole,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(VirtualColSpan.VirtualColSpan, { width: virtualColSpan }),
+        columns.map((column, i) => {
+          const errorMessage = errorMessages[column.name];
+          return /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              "aria-colindex": i + 1,
+              className: cx(`${classBase}Cell`, "vuuTableCell", {
+                "vuuTableCell-right": column.align === "right"
+              }),
+              "data-field": column.name,
+              role: "cell",
+              style: { width: column.width },
+              children: column.editable ? vuuDataReact.getDataItemEditControl({
+                InputProps,
+                dataDescriptor: column,
+                errorMessage,
+                onCommit,
+                table: dataSource.table
+              }) : null
+            },
+            column.name
+          );
         })
-      },
-      column.name
-    ))
-  ] });
+      ]
+    }
+  );
 };
 
 exports.BulkEditRow = BulkEditRow;

package/cjs/bulk-edit/BulkEditRow.js.map

@@ -1 +1 @@
-{"version":3,"file":"BulkEditRow.js","sources":["../../src/bulk-edit/BulkEditRow.tsx"],"sourcesContent":["import { getDataItemEditControl } from \"@vuu-ui/vuu-data-react\";\nimport { DataSource } from \"@vuu-ui/vuu-data-types\";\nimport { ColumnDescriptor } from \"@vuu-ui/vuu-table-types\";\nimport { CommitHandler, queryClosest } from \"@vuu-ui/vuu-utils\";\nimport type { InputProps } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { HTMLAttributes, useCallback, useRef } from \"react\";\nimport { VirtualColSpan } from \"../VirtualColSpan\";\nimport { useHeaderProps } from \"../table-header\";\nimport bulkEditRowCss from \"./BulkEditRow.css\";\n\nconst classBase = \"vuuBulkEditRow\";\n\nexport type EditValueChangeHandler = (\n  column: ColumnDescriptor,\n  value: string,\n) => void;\nexport interface BulkEditProps\n  extends Omit<HTMLAttributes<HTMLDivElement>, \"onChange\"> {\n  dataSource: DataSource;\n  onChange: EditValueChangeHandler;\n}\n\nconst InputProps: Partial<InputProps> = {\n  placeholder: \"Enter value\",\n  variant: \"primary\",\n};\n\nexport const BulkEditRow = ({\n  dataSource,\n  onChange,\n  ...htmlAttributes\n}: BulkEditProps) => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-bulk-edit-row\",\n    css: bulkEditRowCss,\n    window: targetWindow,\n  });\n\n  const fieldRef = useRef(\"\");\n\n  const { columns, virtualColSpan = 0 } = useHeaderProps();\n\n  const onCommit = useCallback<CommitHandler<HTMLElement, string | undefined>>(\n    (evt, value) => {\n      if (value !== undefined && String(value).trim() !== \"\") {\n        const columnName = fieldRef.current;\n        if (columnName) {\n          const column = columns.find((c) => c.name === columnName);\n          if (column) {\n            onChange(column, value);\n          }\n        }\n      }\n    },\n    [columns, onChange],\n  );\n\n  const handleFocus = useCallback((evt) => {\n    const field = queryClosest(evt.target, \"[data-field]\");\n    if (field) {\n      const columnName = field.dataset.field;\n      if (columnName) {\n        fieldRef.current = columnName;\n      }\n    }\n  }, []);\n\n  return (\n    <div {...htmlAttributes} className={classBase} onFocus={handleFocus}>\n      <VirtualColSpan width={virtualColSpan} />\n      {columns.map((column) => (\n        <div\n          className={`${classBase}-filter`}\n          data-field={column.name}\n          key={column.name}\n          style={{ width: column.width }}\n        >\n          {getDataItemEditControl({\n            InputProps,\n            dataDescriptor: column,\n            onCommit,\n            table: dataSource.table,\n          })}\n        </div>\n      ))}\n    </div>\n  );\n};\n"],"names":["useWindow","useComponentCssInjection","bulkEditRowCss","useRef","useHeaderProps","useCallback","queryClosest","jsx","VirtualColSpan","getDataItemEditControl"],"mappings":";;;;;;;;;;;;;AAYA,MAAM,SAAY,GAAA,gBAAA,CAAA;AAYlB,MAAM,UAAkC,GAAA;AAAA,EACtC,WAAa,EAAA,aAAA;AAAA,EACb,OAAS,EAAA,SAAA;AACX,CAAA,CAAA;AAEO,MAAM,cAAc,CAAC;AAAA,EAC1B,UAAA;AAAA,EACA,QAAA;AAAA,EACA,GAAG,cAAA;AACL,CAAqB,KAAA;AACnB,EAAA,MAAM,eAAeA,gBAAU,EAAA,CAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,mBAAA;AAAA,IACR,GAAK,EAAAC,aAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAM,MAAA,QAAA,GAAWC,aAAO,EAAE,CAAA,CAAA;AAE1B,EAAA,MAAM,EAAE,OAAA,EAAS,cAAiB,GAAA,CAAA,KAAMC,6BAAe,EAAA,CAAA;AAEvD,EAAA,MAAM,QAAW,GAAAC,iBAAA;AAAA,IACf,CAAC,KAAK,KAAU,KAAA;AACd,MAAA,IAAI,UAAU,KAAa,CAAA,IAAA,MAAA,CAAO,KAAK,CAAE,CAAA,IAAA,OAAW,EAAI,EAAA;AACtD,QAAA,MAAM,aAAa,QAAS,CAAA,OAAA,CAAA;AAC5B,QAAA,IAAI,UAAY,EAAA;AACd,UAAA,MAAM,SAAS,OAAQ,CAAA,IAAA,CAAK,CAAC,CAAM,KAAA,CAAA,CAAE,SAAS,UAAU,CAAA,CAAA;AACxD,UAAA,IAAI,MAAQ,EAAA;AACV,YAAA,QAAA,CAAS,QAAQ,KAAK,CAAA,CAAA;AAAA,WACxB;AAAA,SACF;AAAA,OACF;AAAA,KACF;AAAA,IACA,CAAC,SAAS,QAAQ,CAAA;AAAA,GACpB,CAAA;AAEA,EAAM,MAAA,WAAA,GAAcA,iBAAY,CAAA,CAAC,GAAQ,KAAA;AACvC,IAAA,MAAM,KAAQ,GAAAC,qBAAA,CAAa,GAAI,CAAA,MAAA,EAAQ,cAAc,CAAA,CAAA;AACrD,IAAA,IAAI,KAAO,EAAA;AACT,MAAM,MAAA,UAAA,GAAa,MAAM,OAAQ,CAAA,KAAA,CAAA;AACjC,MAAA,IAAI,UAAY,EAAA;AACd,QAAA,QAAA,CAAS,OAAU,GAAA,UAAA,CAAA;AAAA,OACrB;AAAA,KACF;AAAA,GACF,EAAG,EAAE,CAAA,CAAA;AAEL,EAAA,uCACG,KAAK,EAAA,EAAA,GAAG,gBAAgB,SAAW,EAAA,SAAA,EAAW,SAAS,WACtD,EAAA,QAAA,EAAA;AAAA,oBAACC,cAAA,CAAAC,6BAAA,EAAA,EAAe,OAAO,cAAgB,EAAA,CAAA;AAAA,IACtC,OAAA,CAAQ,GAAI,CAAA,CAAC,MACZ,qBAAAD,cAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,SAAA,EAAW,GAAG,SAAS,CAAA,OAAA,CAAA;AAAA,QACvB,cAAY,MAAO,CAAA,IAAA;AAAA,QAEnB,KAAO,EAAA,EAAE,KAAO,EAAA,MAAA,CAAO,KAAM,EAAA;AAAA,QAE5B,QAAuB,EAAAE,mCAAA,CAAA;AAAA,UACtB,UAAA;AAAA,UACA,cAAgB,EAAA,MAAA;AAAA,UAChB,QAAA;AAAA,UACA,OAAO,UAAW,CAAA,KAAA;AAAA,SACnB,CAAA;AAAA,OAAA;AAAA,MARI,MAAO,CAAA,IAAA;AAAA,KAUf,CAAA;AAAA,GACH,EAAA,CAAA,CAAA;AAEJ;;;;"}
+{"version":3,"file":"BulkEditRow.js","sources":["../../src/bulk-edit/BulkEditRow.tsx"],"sourcesContent":["import { getDataItemEditControl } from \"@vuu-ui/vuu-data-react\";\nimport { DataSource } from \"@vuu-ui/vuu-data-types\";\nimport { BaseRowProps, ColumnDescriptor } from \"@vuu-ui/vuu-table-types\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport cx from \"clsx\";\nimport { HTMLAttributes } from \"react\";\nimport { VirtualColSpan } from \"../VirtualColSpan\";\nimport { useHeaderProps } from \"../table-header\";\nimport { useBulkEditRow } from \"./useBulkEditRow\";\n\nimport { VuuRowDataItemType } from \"@vuu-ui/vuu-protocol-types\";\nimport bulkEditRowCss from \"./BulkEditRow.css\";\n\nconst classBase = \"vuuBulkEditRow\";\n\nexport type EditValueChangeHandler = (\n  column: ColumnDescriptor,\n  value: VuuRowDataItemType,\n) => void;\nexport interface BulkEditProps\n  extends Partial<BaseRowProps>,\n    Omit<HTMLAttributes<HTMLDivElement>, \"onChange\"> {\n  dataSource: DataSource;\n  onBulkChange: EditValueChangeHandler;\n  onRowChange: (isValid: boolean) => void;\n}\n\nexport const BulkEditRow = ({\n  ariaRole,\n  dataSource,\n  onBulkChange,\n  onRowChange,\n  ...htmlAttributes\n}: BulkEditProps) => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-bulk-edit-row\",\n    css: bulkEditRowCss,\n    window: targetWindow,\n  });\n\n  const { columns, virtualColSpan = 0 } = useHeaderProps();\n\n  const {\n    errorMessages,\n    formFieldsContainerRef,\n    InputProps,\n    onCommit,\n    onFocus,\n    onKeyDown,\n  } = useBulkEditRow({\n    descriptors: columns,\n    onBulkChange,\n    onRowChange,\n  });\n\n  return (\n    <div\n      {...htmlAttributes}\n      className={classBase}\n      onFocus={onFocus}\n      onKeyDown={onKeyDown}\n      ref={formFieldsContainerRef}\n      role={ariaRole}\n    >\n      <VirtualColSpan width={virtualColSpan} />\n      {columns.map((column, i) => {\n        const errorMessage = errorMessages[column.name];\n        return (\n          <div\n            aria-colindex={i + 1}\n            className={cx(`${classBase}Cell`, \"vuuTableCell\", {\n              \"vuuTableCell-right\": column.align === \"right\",\n            })}\n            data-field={column.name}\n            key={column.name}\n            role=\"cell\"\n            style={{ width: column.width }}\n          >\n            {column.editable\n              ? getDataItemEditControl({\n                  InputProps,\n                  dataDescriptor: column,\n                  errorMessage,\n                  onCommit,\n                  table: dataSource.table,\n                })\n              : null}\n          </div>\n        );\n      })}\n    </div>\n  );\n};\n"],"names":["useWindow","useComponentCssInjection","bulkEditRowCss","useHeaderProps","useBulkEditRow","jsxs","jsx","VirtualColSpan","getDataItemEditControl"],"mappings":";;;;;;;;;;;;;AAcA,MAAM,SAAY,GAAA,gBAAA;AAcX,MAAM,cAAc,CAAC;AAAA,EAC1B,QAAA;AAAA,EACA,UAAA;AAAA,EACA,YAAA;AAAA,EACA,WAAA;AAAA,EACA,GAAG;AACL,CAAqB,KAAA;AACnB,EAAA,MAAM,eAAeA,gBAAU,EAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,mBAAA;AAAA,IACR,GAAK,EAAAC,aAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EAAA,MAAM,EAAE,OAAA,EAAS,cAAiB,GAAA,CAAA,KAAMC,6BAAe,EAAA;AAEvD,EAAM,MAAA;AAAA,IACJ,aAAA;AAAA,IACA,sBAAA;AAAA,IACA,UAAA;AAAA,IACA,QAAA;AAAA,IACA,OAAA;AAAA,IACA;AAAA,MACEC,6BAAe,CAAA;AAAA,IACjB,WAAa,EAAA,OAAA;AAAA,IACb,YAAA;AAAA,IACA;AAAA,GACD,CAAA;AAED,EACE,uBAAAC,eAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACE,GAAG,cAAA;AAAA,MACJ,SAAW,EAAA,SAAA;AAAA,MACX,OAAA;AAAA,MACA,SAAA;AAAA,MACA,GAAK,EAAA,sBAAA;AAAA,MACL,IAAM,EAAA,QAAA;AAAA,MAEN,QAAA,EAAA;AAAA,wBAACC,cAAA,CAAAC,6BAAA,EAAA,EAAe,OAAO,cAAgB,EAAA,CAAA;AAAA,QACtC,OAAQ,CAAA,GAAA,CAAI,CAAC,MAAA,EAAQ,CAAM,KAAA;AAC1B,UAAM,MAAA,YAAA,GAAe,aAAc,CAAA,MAAA,CAAO,IAAI,CAAA;AAC9C,UACE,uBAAAD,cAAA;AAAA,YAAC,KAAA;AAAA,YAAA;AAAA,cACC,iBAAe,CAAI,GAAA,CAAA;AAAA,cACnB,SAAW,EAAA,EAAA,CAAG,CAAG,EAAA,SAAS,QAAQ,cAAgB,EAAA;AAAA,gBAChD,oBAAA,EAAsB,OAAO,KAAU,KAAA;AAAA,eACxC,CAAA;AAAA,cACD,cAAY,MAAO,CAAA,IAAA;AAAA,cAEnB,IAAK,EAAA,MAAA;AAAA,cACL,KAAO,EAAA,EAAE,KAAO,EAAA,MAAA,CAAO,KAAM,EAAA;AAAA,cAE5B,QAAA,EAAA,MAAA,CAAO,WACJE,mCAAuB,CAAA;AAAA,gBACrB,UAAA;AAAA,gBACA,cAAgB,EAAA,MAAA;AAAA,gBAChB,YAAA;AAAA,gBACA,QAAA;AAAA,gBACA,OAAO,UAAW,CAAA;AAAA,eACnB,CACD,GAAA;AAAA,aAAA;AAAA,YAZC,MAAO,CAAA;AAAA,WAad;AAAA,SAEH;AAAA;AAAA;AAAA,GACH;AAEJ;;;;"}

package/cjs/bulk-edit/useBulkEditPanel.js

@@ -0,0 +1,101 @@
+'use strict';
+
+var vuuDataReact = require('@vuu-ui/vuu-data-react');
+var vuuUtils = require('@vuu-ui/vuu-utils');
+var react = require('react');
+
+const addRenderer = (colType, rendererName) => {
+  return {
+    name: colType.name,
+    rules: colType.rules,
+    formatting: colType.formatting,
+    renderer: { name: rendererName }
+  };
+};
+const { IDX } = vuuUtils.metadataKeys;
+const isRecorded = (index, record) => {
+  for (const r of record) {
+    if (isSameArray(r, index)) {
+      return true;
+    }
+  }
+  return false;
+};
+const isSameArray = (arr1, arr2) => {
+  return arr1[0] == arr2[0] && arr1[1] == arr2[1];
+};
+const useBulkEditPanel = ({
+  columns,
+  dataSource,
+  onValidationStatusChange
+}) => {
+  const errorsRef = react.useRef([]);
+  const [rowState, setRowState] = react.useState(true);
+  const tableConfig = react.useMemo(() => {
+    return {
+      columns: columns ? columns.map((col) => {
+        return {
+          editable: col.editableBulk === "bulk",
+          hidden: col.editableBulk === false,
+          name: col.name,
+          serverDataType: col.serverDataType ?? "string",
+          type: vuuUtils.isTypeDescriptor(col.type) ? addRenderer(col.type, "input-cell") : "string",
+          clientSideEditValidationCheck: vuuUtils.hasValidationRules(col.type) ? vuuDataReact.buildValidationChecker(col.type.rules) : void 0
+        };
+      }) : dataSource.columns.map((name) => ({
+        editable: true,
+        name,
+        serverDataType: "string"
+      })),
+      columnLayout: "fit",
+      columnDefaultWidth: 100,
+      rowSeparators: true
+    };
+  }, [columns, dataSource.columns]);
+  const handleDataEdited = react.useCallback(
+    ({ isValid = true, row, columnName }) => {
+      if (!isValid && !isRecorded([row[IDX], columnName], errorsRef.current)) {
+        errorsRef.current.push([row[IDX], columnName]);
+      } else if (isValid && isRecorded([row[IDX], columnName], errorsRef.current)) {
+        errorsRef.current = errorsRef.current.filter(
+          (error) => !isSameArray(error, [row[IDX], columnName])
+        );
+      }
+      if (rowState === true && errorsRef.current.length === 0) {
+        onValidationStatusChange(true);
+      } else {
+        onValidationStatusChange(false);
+      }
+    },
+    [onValidationStatusChange, rowState]
+  );
+  const handleRowChange = react.useCallback(
+    (isValid) => {
+      if (isValid !== rowState) {
+        setRowState(isValid);
+      }
+    },
+    [rowState]
+  );
+  const handleBulkChange = react.useCallback(
+    async (column, value) => {
+      const response = await dataSource.rpcCall?.({
+        namedParams: { column: column.name, value },
+        params: [],
+        rpcName: "VP_BULK_EDIT_COLUMN_CELLS_RPC",
+        type: "VIEW_PORT_RPC_CALL"
+      });
+      console.log({ response });
+    },
+    [dataSource]
+  );
+  return {
+    tableConfig,
+    onBulkChange: handleBulkChange,
+    onDataEdited: handleDataEdited,
+    onRowChange: handleRowChange
+  };
+};
+
+exports.useBulkEditPanel = useBulkEditPanel;
+//# sourceMappingURL=useBulkEditPanel.js.map

package/cjs/bulk-edit/useBulkEditPanel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useBulkEditPanel.js","sources":["../../src/bulk-edit/useBulkEditPanel.ts"],"sourcesContent":["import { buildValidationChecker } from \"@vuu-ui/vuu-data-react\";\nimport { VuuRpcViewportRequest } from \"@vuu-ui/vuu-protocol-types\";\nimport {\n  DataCellEditNotification,\n  DataValueTypeDescriptor,\n  TableConfig,\n} from \"@vuu-ui/vuu-table-types\";\nimport { hasValidationRules, isTypeDescriptor } from \"@vuu-ui/vuu-utils\";\nimport { useCallback, useMemo, useRef, useState } from \"react\";\nimport type { BulkEditPanelProps } from \"./BulkEditPanel\";\nimport { EditValueChangeHandler } from \"./useBulkEditRow\";\nimport { metadataKeys } from \"@vuu-ui/vuu-utils\";\n\nconst addRenderer = (\n  colType: DataValueTypeDescriptor,\n  rendererName: string,\n): DataValueTypeDescriptor => {\n  return {\n    name: colType.name,\n    rules: colType.rules,\n    formatting: colType.formatting,\n    renderer: { name: rendererName },\n  };\n};\n\nconst { IDX } = metadataKeys;\n\ntype ErrorTuple = [number, string];\n\nconst isRecorded = (index: ErrorTuple, record: ErrorTuple[]) => {\n  for (const r of record) {\n    if (isSameArray(r, index)) {\n      return true;\n    }\n  }\n  return false;\n};\n\nconst isSameArray = (arr1: ErrorTuple, arr2: ErrorTuple) => {\n  return arr1[0] == arr2[0] && arr1[1] == arr2[1];\n};\n\nexport type BulkEditPanelHookProps = Pick<\n  BulkEditPanelProps,\n  \"columns\" | \"dataSource\" | \"onValidationStatusChange\"\n>;\n\nexport const useBulkEditPanel = ({\n  columns,\n  dataSource,\n  onValidationStatusChange,\n}: BulkEditPanelHookProps) => {\n  const errorsRef = useRef<ErrorTuple[]>([]);\n  const [rowState, setRowState] = useState(true);\n\n  const tableConfig: TableConfig = useMemo(() => {\n    return {\n      columns: columns\n        ? columns.map((col) => {\n            return {\n              editable: col.editableBulk === \"bulk\",\n              hidden: col.editableBulk === false,\n              name: col.name,\n              serverDataType: col.serverDataType ?? \"string\",\n              type: isTypeDescriptor(col.type)\n                ? addRenderer(col.type, \"input-cell\")\n                : \"string\",\n              clientSideEditValidationCheck: hasValidationRules(col.type)\n                ? buildValidationChecker(col.type.rules)\n                : undefined,\n            };\n          })\n        : dataSource.columns.map((name) => ({\n            editable: true,\n            name,\n            serverDataType: \"string\",\n          })),\n      columnLayout: \"fit\",\n      columnDefaultWidth: 100,\n      rowSeparators: true,\n    };\n  }, [columns, dataSource.columns]);\n\n  const handleDataEdited = useCallback<DataCellEditNotification>(\n    ({ isValid = true, row, columnName }) => {\n      if (!isValid && !isRecorded([row[IDX], columnName], errorsRef.current)) {\n        errorsRef.current.push([row[IDX], columnName]);\n      } else if (\n        isValid &&\n        isRecorded([row[IDX], columnName], errorsRef.current)\n      ) {\n        errorsRef.current = errorsRef.current.filter(\n          (error) => !isSameArray(error, [row[IDX], columnName]),\n        );\n      }\n      if (rowState === true && errorsRef.current.length === 0) {\n        onValidationStatusChange(true);\n      } else {\n        onValidationStatusChange(false);\n      }\n    },\n    [onValidationStatusChange, rowState],\n  );\n\n  const handleRowChange = useCallback(\n    (isValid: boolean) => {\n      if (isValid !== rowState) {\n        setRowState(isValid);\n      }\n    },\n    [rowState],\n  );\n\n  const handleBulkChange: EditValueChangeHandler = useCallback(\n    async (column, value) => {\n      const response = await dataSource.rpcCall?.({\n        namedParams: { column: column.name, value },\n        params: [],\n        rpcName: \"VP_BULK_EDIT_COLUMN_CELLS_RPC\",\n        type: \"VIEW_PORT_RPC_CALL\",\n      } as Omit<VuuRpcViewportRequest, \"vpId\">);\n      console.log({ response });\n    },\n    [dataSource],\n  );\n\n  return {\n    tableConfig,\n    onBulkChange: handleBulkChange,\n    onDataEdited: handleDataEdited,\n    onRowChange: handleRowChange,\n  };\n};\n"],"names":["metadataKeys","useRef","useState","useMemo","isTypeDescriptor","hasValidationRules","buildValidationChecker","useCallback"],"mappings":"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"}

package/cjs/bulk-edit/useBulkEditRow.js

@@ -0,0 +1,144 @@
+'use strict';
+
+var vuuDataReact = require('@vuu-ui/vuu-data-react');
+var vuuUtils = require('@vuu-ui/vuu-utils');
+var react = require('react');
+var useEditableCell = require('../useEditableCell.js');
+
+const getValidationChecker = (descriptor, editPhase) => {
+  const rules = vuuDataReact.getEditValidationRules(descriptor, editPhase);
+  return vuuDataReact.buildValidationChecker(rules);
+};
+const nextValidationState = (state, dataDescriptor, value) => {
+  const check = getValidationChecker(dataDescriptor, "change");
+  const result = check(value, "change");
+  const { name } = dataDescriptor;
+  const { ok: wasOk, messages: existingMessages } = state;
+  if (result.ok) {
+    if (!wasOk) {
+      const fieldsInError = Object.keys(existingMessages);
+      if (fieldsInError.includes(name)) {
+        if (fieldsInError.length === 1) {
+          return { ok: true, messages: {} };
+        } else {
+          const messages = { ...existingMessages };
+          delete messages[name];
+          return { ok: false, messages };
+        }
+      }
+    }
+  } else {
+    return {
+      ok: false,
+      messages: {
+        ...existingMessages,
+        [name]: result.messages.join("\n")
+      }
+    };
+  }
+  return state;
+};
+function find(descriptors, fieldname) {
+  const d = descriptors.find(({ name }) => name === fieldname);
+  if (d) {
+    return d;
+  }
+  throw Error(`DataValueDescriptor not found for field ${fieldname}`);
+}
+const getField = (target) => {
+  const fieldElement = vuuUtils.queryClosest(target, "[data-field]");
+  if (fieldElement) {
+    return fieldElement.dataset.field;
+  } else {
+    throw Error("no field ");
+  }
+};
+const useBulkEditRow = ({
+  descriptors,
+  onBulkChange,
+  onRowChange
+}) => {
+  const formFieldsContainerRef = react.useRef(null);
+  const focusedFieldRef = react.useRef("");
+  const [, forceUpdate] = react.useState({});
+  const validationStateRef = react.useRef({
+    ok: true,
+    messages: {}
+  });
+  const bulkRowValidationState = react.useCallback(
+    (state) => {
+      validationStateRef.current = state;
+      onRowChange(state.ok);
+      forceUpdate({});
+    },
+    [onRowChange]
+  );
+  const handleFocus = react.useCallback((evt) => {
+    if (formFieldsContainerRef.current?.contains(evt.target)) {
+      const fieldName = getField(evt.target);
+      if (fieldName) {
+        if (fieldName) {
+          focusedFieldRef.current = fieldName;
+        }
+      }
+    }
+  }, []);
+  const handleChange = react.useCallback(
+    (evt) => {
+      const { current: fieldName } = focusedFieldRef;
+      if (fieldName) {
+        const input = vuuUtils.queryClosest(evt.target, "input", true);
+        const dataDescriptor = find(descriptors, fieldName);
+        const value = input.value;
+        const { current: state } = validationStateRef;
+        const newState = nextValidationState(state, dataDescriptor, value);
+        if (newState !== state) {
+          bulkRowValidationState(newState);
+        }
+      }
+    },
+    [descriptors, bulkRowValidationState]
+  );
+  const {
+    current: { messages: errorMessages }
+  } = validationStateRef;
+  const handleCommit = react.useCallback(
+    (evt, value) => {
+      if (value !== void 0 && String(value).trim() !== "") {
+        const columnName = focusedFieldRef.current;
+        if (columnName) {
+          const column = descriptors.find((c) => c.name === columnName);
+          if (column && errorMessages[columnName] === void 0) {
+            console.log("apply BulkChange on", columnName);
+            const { serverDataType = "string" } = column;
+            const typedValue = vuuUtils.getTypedValue(value, serverDataType, true);
+            onBulkChange(column, typedValue);
+          }
+        }
+      }
+    },
+    [descriptors, errorMessages, onBulkChange]
+  );
+  const InputProps2 = react.useMemo(
+    () => ({
+      inputProps: {
+        placeholder: "Enter value"
+      },
+      onChange: handleChange,
+      variant: "primary"
+    }),
+    [handleChange]
+  );
+  const { onKeyDown } = useEditableCell.useEditableCell();
+  return {
+    errorMessages,
+    formFieldsContainerRef,
+    InputProps: InputProps2,
+    onCommit: handleCommit,
+    onFocus: handleFocus,
+    onKeyDown
+  };
+};
+
+exports.useBulkEditRow = useBulkEditRow;
+//# sourceMappingURL=useBulkEditRow.js.map

package/cjs/bulk-edit/useBulkEditRow.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useBulkEditRow.js","sources":["../../src/bulk-edit/useBulkEditRow.tsx"],"sourcesContent":["import {\n  buildValidationChecker,\n  getEditValidationRules,\n} from \"@vuu-ui/vuu-data-react\";\nimport { DataValueDescriptor, EditPhase } from \"@vuu-ui/vuu-data-types\";\nimport { VuuRowDataItemType } from \"@vuu-ui/vuu-protocol-types\";\nimport { ColumnDescriptor } from \"@vuu-ui/vuu-table-types\";\nimport { CommitHandler, getTypedValue, queryClosest } from \"@vuu-ui/vuu-utils\";\nimport { InputProps } from \"@salt-ds/core\";\nimport {\n  FocusEventHandler,\n  SyntheticEvent,\n  useCallback,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\nimport { useEditableCell } from \"../useEditableCell\";\n\nexport type EditValueChangeHandler = (\n  column: ColumnDescriptor,\n  value: VuuRowDataItemType,\n) => void;\n\nexport interface EditableBulkHookProps {\n  descriptors: DataValueDescriptor[];\n  onBulkChange: EditValueChangeHandler;\n  onRowChange: (isValid: boolean) => void;\n}\ntype ValidationState = {\n  ok: boolean;\n  messages: Record<string, string>;\n};\n\nconst getValidationChecker = (\n  descriptor: DataValueDescriptor,\n  editPhase: EditPhase | \"*\",\n) => {\n  const rules = getEditValidationRules(descriptor, editPhase);\n  return buildValidationChecker(rules);\n};\n\nconst nextValidationState = (\n  state: ValidationState,\n  dataDescriptor: DataValueDescriptor,\n  value: VuuRowDataItemType,\n): ValidationState => {\n  const check = getValidationChecker(dataDescriptor, \"change\");\n  const result = check(value, \"change\");\n  const { name } = dataDescriptor;\n\n  const { ok: wasOk, messages: existingMessages } = state;\n\n  if (result.ok) {\n    if (!wasOk) {\n      // if this field was the only one in error, the overall state\n      // will now be ok, but not if there is still one or more other\n      // field still in error.\n      const fieldsInError = Object.keys(existingMessages);\n      if (fieldsInError.includes(name)) {\n        if (fieldsInError.length === 1) {\n          return { ok: true, messages: {} };\n        } else {\n          const messages = { ...existingMessages };\n          delete messages[name];\n          return { ok: false, messages };\n        }\n      }\n    }\n  } else {\n    return {\n      ok: false,\n      messages: {\n        ...existingMessages,\n        [name]: result.messages.join(\"\\n\"),\n      },\n    };\n  }\n\n  return state;\n};\n\nfunction find(descriptors: DataValueDescriptor[], fieldname: string) {\n  const d = descriptors.find(({ name }) => name === fieldname);\n  if (d) {\n    return d;\n  }\n  throw Error(`DataValueDescriptor not found for field ${fieldname}`);\n}\n\nconst getField = (target: EventTarget | HTMLElement) => {\n  const fieldElement = queryClosest(target, \"[data-field]\");\n  if (fieldElement) {\n    return fieldElement.dataset.field as string;\n  } else {\n    throw Error(\"no field \");\n  }\n};\n\nexport const useBulkEditRow = ({\n  descriptors,\n  onBulkChange,\n  onRowChange,\n}: EditableBulkHookProps) => {\n  const formFieldsContainerRef = useRef<HTMLDivElement>(null);\n  const focusedFieldRef = useRef(\"\");\n  const [, forceUpdate] = useState({});\n  const validationStateRef = useRef<ValidationState>({\n    ok: true,\n    messages: {},\n  });\n\n  const bulkRowValidationState = useCallback(\n    (state: ValidationState) => {\n      validationStateRef.current = state;\n      onRowChange(state.ok);\n      forceUpdate({});\n    },\n    [onRowChange],\n  );\n\n  const handleFocus = useCallback<FocusEventHandler>((evt) => {\n    // Ignore focus on popup Calendars, Lists etc\n    if (formFieldsContainerRef.current?.contains(evt.target)) {\n      const fieldName = getField(evt.target);\n      if (fieldName) {\n        if (fieldName) {\n          focusedFieldRef.current = fieldName;\n        }\n      }\n    }\n  }, []);\n\n  const handleChange = useCallback(\n    (evt: SyntheticEvent<HTMLInputElement>) => {\n      const { current: fieldName } = focusedFieldRef;\n      if (fieldName) {\n        const input = queryClosest<HTMLInputElement>(evt.target, \"input\", true);\n        const dataDescriptor = find(descriptors, fieldName);\n        const value = input.value as string;\n        const { current: state } = validationStateRef;\n        const newState = nextValidationState(state, dataDescriptor, value);\n        if (newState !== state) {\n          bulkRowValidationState(newState);\n        }\n      }\n    },\n    [descriptors, bulkRowValidationState],\n  );\n\n  const {\n    current: { messages: errorMessages },\n  } = validationStateRef;\n\n  const handleCommit = useCallback<\n    CommitHandler<HTMLElement, string | undefined>\n  >(\n    (evt, value) => {\n      if (value !== undefined && String(value).trim() !== \"\") {\n        const columnName = focusedFieldRef.current;\n        if (columnName) {\n          const column = descriptors.find((c) => c.name === columnName);\n          if (column && errorMessages[columnName] === undefined) {\n            console.log(\"apply BulkChange on\", columnName);\n            const { serverDataType = \"string\" } = column;\n            const typedValue = getTypedValue(value, serverDataType, true);\n            onBulkChange(column, typedValue);\n          }\n        }\n      }\n    },\n    [descriptors, errorMessages, onBulkChange],\n  );\n\n  const InputProps = useMemo<Partial<InputProps>>(\n    () => ({\n      inputProps: {\n        placeholder: \"Enter value\",\n      },\n      onChange: handleChange,\n      variant: \"primary\",\n    }),\n    [handleChange],\n  );\n\n  const { onKeyDown } = useEditableCell();\n\n  return {\n    errorMessages,\n    formFieldsContainerRef,\n    InputProps,\n    onCommit: handleCommit,\n    onFocus: handleFocus,\n    onKeyDown,\n  };\n};\n"],"names":["getEditValidationRules","buildValidationChecker","queryClosest","useRef","useState","useCallback","getTypedValue","InputProps","useMemo","useEditableCell"],"mappings":";;;;;;;AAkCA,MAAM,oBAAA,GAAuB,CAC3B,UAAA,EACA,SACG,KAAA;AACH,EAAM,MAAA,KAAA,GAAQA,mCAAuB,CAAA,UAAA,EAAY,SAAS,CAAA;AAC1D,EAAA,OAAOC,oCAAuB,KAAK,CAAA;AACrC,CAAA;AAEA,MAAM,mBAAsB,GAAA,CAC1B,KACA,EAAA,cAAA,EACA,KACoB,KAAA;AACpB,EAAM,MAAA,KAAA,GAAQ,oBAAqB,CAAA,cAAA,EAAgB,QAAQ,CAAA;AAC3D,EAAM,MAAA,MAAA,GAAS,KAAM,CAAA,KAAA,EAAO,QAAQ,CAAA;AACpC,EAAM,MAAA,EAAE,MAAS,GAAA,cAAA;AAEjB,EAAA,MAAM,EAAE,EAAA,EAAI,KAAO,EAAA,QAAA,EAAU,kBAAqB,GAAA,KAAA;AAElD,EAAA,IAAI,OAAO,EAAI,EAAA;AACb,IAAA,IAAI,CAAC,KAAO,EAAA;AAIV,MAAM,MAAA,aAAA,GAAgB,MAAO,CAAA,IAAA,CAAK,gBAAgB,CAAA;AAClD,MAAI,IAAA,aAAA,CAAc,QAAS,CAAA,IAAI,CAAG,EAAA;AAChC,QAAI,IAAA,aAAA,CAAc,WAAW,CAAG,EAAA;AAC9B,UAAA,OAAO,EAAE,EAAA,EAAI,IAAM,EAAA,QAAA,EAAU,EAAG,EAAA;AAAA,SAC3B,MAAA;AACL,UAAM,MAAA,QAAA,GAAW,EAAE,GAAG,gBAAiB,EAAA;AACvC,UAAA,OAAO,SAAS,IAAI,CAAA;AACpB,UAAO,OAAA,EAAE,EAAI,EAAA,KAAA,EAAO,QAAS,EAAA;AAAA;AAC/B;AACF;AACF,GACK,MAAA;AACL,IAAO,OAAA;AAAA,MACL,EAAI,EAAA,KAAA;AAAA,MACJ,QAAU,EAAA;AAAA,QACR,GAAG,gBAAA;AAAA,QACH,CAAC,IAAI,GAAG,MAAO,CAAA,QAAA,CAAS,KAAK,IAAI;AAAA;AACnC,KACF;AAAA;AAGF,EAAO,OAAA,KAAA;AACT,CAAA;AAEA,SAAS,IAAA,CAAK,aAAoC,SAAmB,EAAA;AACnE,EAAM,MAAA,CAAA,GAAI,YAAY,IAAK,CAAA,CAAC,EAAE,IAAK,EAAA,KAAM,SAAS,SAAS,CAAA;AAC3D,EAAA,IAAI,CAAG,EAAA;AACL,IAAO,OAAA,CAAA;AAAA;AAET,EAAM,MAAA,KAAA,CAAM,CAA2C,wCAAA,EAAA,SAAS,CAAE,CAAA,CAAA;AACpE;AAEA,MAAM,QAAA,GAAW,CAAC,MAAsC,KAAA;AACtD,EAAM,MAAA,YAAA,GAAeC,qBAAa,CAAA,MAAA,EAAQ,cAAc,CAAA;AACxD,EAAA,IAAI,YAAc,EAAA;AAChB,IAAA,OAAO,aAAa,OAAQ,CAAA,KAAA;AAAA,GACvB,MAAA;AACL,IAAA,MAAM,MAAM,WAAW,CAAA;AAAA;AAE3B,CAAA;AAEO,MAAM,iBAAiB,CAAC;AAAA,EAC7B,WAAA;AAAA,EACA,YAAA;AAAA,EACA;AACF,CAA6B,KAAA;AAC3B,EAAM,MAAA,sBAAA,GAAyBC,aAAuB,IAAI,CAAA;AAC1D,EAAM,MAAA,eAAA,GAAkBA,aAAO,EAAE,CAAA;AACjC,EAAA,MAAM,GAAG,WAAW,CAAI,GAAAC,cAAA,CAAS,EAAE,CAAA;AACnC,EAAA,MAAM,qBAAqBD,YAAwB,CAAA;AAAA,IACjD,EAAI,EAAA,IAAA;AAAA,IACJ,UAAU;AAAC,GACZ,CAAA;AAED,EAAA,MAAM,sBAAyB,GAAAE,iBAAA;AAAA,IAC7B,CAAC,KAA2B,KAAA;AAC1B,MAAA,kBAAA,CAAmB,OAAU,GAAA,KAAA;AAC7B,MAAA,WAAA,CAAY,MAAM,EAAE,CAAA;AACpB,MAAA,WAAA,CAAY,EAAE,CAAA;AAAA,KAChB;AAAA,IACA,CAAC,WAAW;AAAA,GACd;AAEA,EAAM,MAAA,WAAA,GAAcA,iBAA+B,CAAA,CAAC,GAAQ,KAAA;AAE1D,IAAA,IAAI,sBAAuB,CAAA,OAAA,EAAS,QAAS,CAAA,GAAA,CAAI,MAAM,CAAG,EAAA;AACxD,MAAM,MAAA,SAAA,GAAY,QAAS,CAAA,GAAA,CAAI,MAAM,CAAA;AACrC,MAAA,IAAI,SAAW,EAAA;AACb,QAAA,IAAI,SAAW,EAAA;AACb,UAAA,eAAA,CAAgB,OAAU,GAAA,SAAA;AAAA;AAC5B;AACF;AACF,GACF,EAAG,EAAE,CAAA;AAEL,EAAA,MAAM,YAAe,GAAAA,iBAAA;AAAA,IACnB,CAAC,GAA0C,KAAA;AACzC,MAAM,MAAA,EAAE,OAAS,EAAA,SAAA,EAAc,GAAA,eAAA;AAC/B,MAAA,IAAI,SAAW,EAAA;AACb,QAAA,MAAM,KAAQ,GAAAH,qBAAA,CAA+B,GAAI,CAAA,MAAA,EAAQ,SAAS,IAAI,CAAA;AACtE,QAAM,MAAA,cAAA,GAAiB,IAAK,CAAA,WAAA,EAAa,SAAS,CAAA;AAClD,QAAA,MAAM,QAAQ,KAAM,CAAA,KAAA;AACpB,QAAM,MAAA,EAAE,OAAS,EAAA,KAAA,EAAU,GAAA,kBAAA;AAC3B,QAAA,MAAM,QAAW,GAAA,mBAAA,CAAoB,KAAO,EAAA,cAAA,EAAgB,KAAK,CAAA;AACjE,QAAA,IAAI,aAAa,KAAO,EAAA;AACtB,UAAA,sBAAA,CAAuB,QAAQ,CAAA;AAAA;AACjC;AACF,KACF;AAAA,IACA,CAAC,aAAa,sBAAsB;AAAA,GACtC;AAEA,EAAM,MAAA;AAAA,IACJ,OAAA,EAAS,EAAE,QAAA,EAAU,aAAc;AAAA,GACjC,GAAA,kBAAA;AAEJ,EAAA,MAAM,YAAe,GAAAG,iBAAA;AAAA,IAGnB,CAAC,KAAK,KAAU,KAAA;AACd,MAAA,IAAI,UAAU,KAAa,CAAA,IAAA,MAAA,CAAO,KAAK,CAAE,CAAA,IAAA,OAAW,EAAI,EAAA;AACtD,QAAA,MAAM,aAAa,eAAgB,CAAA,OAAA;AACnC,QAAA,IAAI,UAAY,EAAA;AACd,UAAA,MAAM,SAAS,WAAY,CAAA,IAAA,CAAK,CAAC,CAAM,KAAA,CAAA,CAAE,SAAS,UAAU,CAAA;AAC5D,UAAA,IAAI,MAAU,IAAA,aAAA,CAAc,UAAU,CAAA,KAAM,KAAW,CAAA,EAAA;AACrD,YAAQ,OAAA,CAAA,GAAA,CAAI,uBAAuB,UAAU,CAAA;AAC7C,YAAM,MAAA,EAAE,cAAiB,GAAA,QAAA,EAAa,GAAA,MAAA;AACtC,YAAA,MAAM,UAAa,GAAAC,sBAAA,CAAc,KAAO,EAAA,cAAA,EAAgB,IAAI,CAAA;AAC5D,YAAA,YAAA,CAAa,QAAQ,UAAU,CAAA;AAAA;AACjC;AACF;AACF,KACF;AAAA,IACA,CAAC,WAAa,EAAA,aAAA,EAAe,YAAY;AAAA,GAC3C;AAEA,EAAA,MAAMC,WAAa,GAAAC,aAAA;AAAA,IACjB,OAAO;AAAA,MACL,UAAY,EAAA;AAAA,QACV,WAAa,EAAA;AAAA,OACf;AAAA,MACA,QAAU,EAAA,YAAA;AAAA,MACV,OAAS,EAAA;AAAA,KACX,CAAA;AAAA,IACA,CAAC,YAAY;AAAA,GACf;AAEA,EAAM,MAAA,EAAE,SAAU,EAAA,GAAIC,+BAAgB,EAAA;AAEtC,EAAO,OAAA;AAAA,IACL,aAAA;AAAA,IACA,sBAAA;AAAA,IACA,UAAAF,EAAAA,WAAAA;AAAA,IACA,QAAU,EAAA,YAAA;AAAA,IACV,OAAS,EAAA,WAAA;AAAA,IACT;AAAA,GACF;AACF;;;;"}

package/cjs/cell-block/CellBlock.js.map

@@ -1 +1 @@
-{"version":3,"file":"CellBlock.js","sources":["../../src/cell-block/CellBlock.tsx"],"sourcesContent":["import {\n  HTMLAttributes,\n  KeyboardEventHandler,\n  MouseEventHandler,\n  forwardRef,\n  useCallback,\n} from \"react\";\nimport cx from \"clsx\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\n\nimport cellBlockCss from \"./CellBlock.css\";\n\nconst classBase = \"vuuCellBlock\";\n\nexport interface CellBlockProps\n  extends Omit<HTMLAttributes<HTMLDivElement>, \"onCopy\"> {\n  debugName?: string;\n  onCopy?: () => void;\n}\n\nexport const CellBlock = forwardRef<HTMLDivElement, CellBlockProps>(\n  function CellBlock({ className, onCopy, ...htmlAttributes }, forwardedRef) {\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"vuu-cell-block\",\n      css: cellBlockCss,\n      window: targetWindow,\n    });\n\n    const handleKeyDown = useCallback<KeyboardEventHandler>(\n      async (evt) => {\n        if (evt.metaKey && evt.key === \"c\") {\n          onCopy?.();\n        }\n      },\n      [onCopy],\n    );\n\n    const onContextMenu = useCallback<MouseEventHandler>(() => {\n      console.log(\"on cvontext menu\");\n    }, []);\n\n    return (\n      <div\n        {...htmlAttributes}\n        className={cx(classBase, className)}\n        ref={forwardedRef}\n        onContextMenu={onContextMenu}\n        onKeyDown={handleKeyDown}\n        tabIndex={0}\n      />\n    );\n  },\n);\n"],"names":["forwardRef","CellBlock","useWindow","useComponentCssInjection","cellBlockCss","useCallback","jsx"],"mappings":";;;;;;;;;AAaA,MAAM,SAAY,GAAA,cAAA,CAAA;AAQX,MAAM,SAAY,GAAAA,gBAAA;AAAA,EACvB,SAASC,WAAU,EAAE,SAAA,EAAW,QAAQ,GAAG,cAAA,IAAkB,YAAc,EAAA;AACzE,IAAA,MAAM,eAAeC,gBAAU,EAAA,CAAA;AAC/B,IAAyBC,+BAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,gBAAA;AAAA,MACR,GAAK,EAAAC,WAAA;AAAA,MACL,MAAQ,EAAA,YAAA;AAAA,KACT,CAAA,CAAA;AAED,IAAA,MAAM,aAAgB,GAAAC,iBAAA;AAAA,MACpB,OAAO,GAAQ,KAAA;AACb,QAAA,IAAI,GAAI,CAAA,OAAA,IAAW,GAAI,CAAA,GAAA,KAAQ,GAAK,EAAA;AAClC,UAAS,MAAA,IAAA,CAAA;AAAA,SACX;AAAA,OACF;AAAA,MACA,CAAC,MAAM,CAAA;AAAA,KACT,CAAA;AAEA,IAAM,MAAA,aAAA,GAAgBA,kBAA+B,MAAM;AACzD,MAAA,OAAA,CAAQ,IAAI,kBAAkB,CAAA,CAAA;AAAA,KAChC,EAAG,EAAE,CAAA,CAAA;AAEL,IACE,uBAAAC,cAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACE,GAAG,cAAA;AAAA,QACJ,SAAA,EAAW,EAAG,CAAA,SAAA,EAAW,SAAS,CAAA;AAAA,QAClC,GAAK,EAAA,YAAA;AAAA,QACL,aAAA;AAAA,QACA,SAAW,EAAA,aAAA;AAAA,QACX,QAAU,EAAA,CAAA;AAAA,OAAA;AAAA,KACZ,CAAA;AAAA,GAEJ;AACF;;;;"}
+{"version":3,"file":"CellBlock.js","sources":["../../src/cell-block/CellBlock.tsx"],"sourcesContent":["import {\n  HTMLAttributes,\n  KeyboardEventHandler,\n  MouseEventHandler,\n  forwardRef,\n  useCallback,\n} from \"react\";\nimport cx from \"clsx\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\n\nimport cellBlockCss from \"./CellBlock.css\";\n\nconst classBase = \"vuuCellBlock\";\n\nexport interface CellBlockProps\n  extends Omit<HTMLAttributes<HTMLDivElement>, \"onCopy\"> {\n  debugName?: string;\n  onCopy?: () => void;\n}\n\nexport const CellBlock = forwardRef<HTMLDivElement, CellBlockProps>(\n  function CellBlock({ className, onCopy, ...htmlAttributes }, forwardedRef) {\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"vuu-cell-block\",\n      css: cellBlockCss,\n      window: targetWindow,\n    });\n\n    const handleKeyDown = useCallback<KeyboardEventHandler>(\n      async (evt) => {\n        if (evt.metaKey && evt.key === \"c\") {\n          onCopy?.();\n        }\n      },\n      [onCopy],\n    );\n\n    const onContextMenu = useCallback<MouseEventHandler>(() => {\n      console.log(\"on cvontext menu\");\n    }, []);\n\n    return (\n      <div\n        {...htmlAttributes}\n        className={cx(classBase, className)}\n        ref={forwardedRef}\n        onContextMenu={onContextMenu}\n        onKeyDown={handleKeyDown}\n        tabIndex={0}\n      />\n    );\n  },\n);\n"],"names":["forwardRef","CellBlock","useWindow","useComponentCssInjection","cellBlockCss","useCallback","jsx"],"mappings":";;;;;;;;;AAaA,MAAM,SAAY,GAAA,cAAA;AAQX,MAAM,SAAY,GAAAA,gBAAA;AAAA,EACvB,SAASC,WAAU,EAAE,SAAA,EAAW,QAAQ,GAAG,cAAA,IAAkB,YAAc,EAAA;AACzE,IAAA,MAAM,eAAeC,gBAAU,EAAA;AAC/B,IAAyBC,+BAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,gBAAA;AAAA,MACR,GAAK,EAAAC,WAAA;AAAA,MACL,MAAQ,EAAA;AAAA,KACT,CAAA;AAED,IAAA,MAAM,aAAgB,GAAAC,iBAAA;AAAA,MACpB,OAAO,GAAQ,KAAA;AACb,QAAA,IAAI,GAAI,CAAA,OAAA,IAAW,GAAI,CAAA,GAAA,KAAQ,GAAK,EAAA;AAClC,UAAS,MAAA,IAAA;AAAA;AACX,OACF;AAAA,MACA,CAAC,MAAM;AAAA,KACT;AAEA,IAAM,MAAA,aAAA,GAAgBA,kBAA+B,MAAM;AACzD,MAAA,OAAA,CAAQ,IAAI,kBAAkB,CAAA;AAAA,KAChC,EAAG,EAAE,CAAA;AAEL,IACE,uBAAAC,cAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACE,GAAG,cAAA;AAAA,QACJ,SAAA,EAAW,EAAG,CAAA,SAAA,EAAW,SAAS,CAAA;AAAA,QAClC,GAAK,EAAA,YAAA;AAAA,QACL,aAAA;AAAA,QACA,SAAW,EAAA,aAAA;AAAA,QACX,QAAU,EAAA;AAAA;AAAA,KACZ;AAAA;AAGN;;;;"}