@vuu-ui/vuu-table 2.1.15 → 2.1.16

package/esm/bulk-edit/BulkEditPanel.js

@@ -4,7 +4,8 @@ import { useWindow } from '@salt-ds/window';
 import cx from 'clsx';
 import { useMemo } from 'react';
 import { Table } from '../Table.js';
-import { BulkEditRow } from './BulkEditRow.js';
+import { ColumnCascadingUpdateEditor } from './ColumnCascadingUpdateEditor.js';
+import { InsertNewRowEditor } from './InsertNewRowEditor.js';
 import { useBulkEditPanel } from './useBulkEditPanel.js';
 import bulkEditPanelCss from './BulkEditPanel.css.js';
 
@@ -13,6 +14,8 @@ const BulkEditPanel = ({
   className,
   columns,
   sessionDs,
+  showColumnCascadingUpdateEditor = false,
+  showInsertNewRowEditor = false,
   parentDs,
   style,
   width = 600,
@@ -29,8 +32,48 @@ const BulkEditPanel = ({
     sessionDs
   });
   const bulkEditRow = useMemo(() => {
-    return /* @__PURE__ */ jsx(BulkEditRow, { onBulkChange, onRowChange });
-  }, [onBulkChange, onRowChange]);
+    if (showColumnCascadingUpdateEditor && showInsertNewRowEditor) {
+      return [
+        /* @__PURE__ */ jsx(
+          InsertNewRowEditor,
+          {
+            onBulkChange,
+            onRowChange
+          },
+          1
+        ),
+        /* @__PURE__ */ jsx(
+          ColumnCascadingUpdateEditor,
+          {
+            onBulkChange,
+            onRowChange
+          },
+          2
+        )
+      ];
+    } else if (showColumnCascadingUpdateEditor) {
+      return /* @__PURE__ */ jsx(
+        ColumnCascadingUpdateEditor,
+        {
+          onBulkChange,
+          onRowChange
+        }
+      );
+    } else if (showInsertNewRowEditor) {
+      return /* @__PURE__ */ jsx(
+        ColumnCascadingUpdateEditor,
+        {
+          onBulkChange,
+          onRowChange
+        }
+      );
+    }
+  }, [
+    onBulkChange,
+    onRowChange,
+    showColumnCascadingUpdateEditor,
+    showInsertNewRowEditor
+  ]);
   return /* @__PURE__ */ jsxs(
     "div",
     {

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

@@ -1 +1 @@
-{"version":3,"file":"BulkEditPanel.js","sources":["../../../../packages/vuu-table/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, ReactElement, 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  /**\n   * The session dataSource. This is where the edits will be processed until final\n   * confirmation, at which point edits will be applied to parent dataSource and\n   * the session table torn down.\n   */\n  sessionDs: DataSource;\n  response?: RpcResponse;\n  mainTableName?: string;\n  /**\n   * The parent dataSource. This is where the edits will be applied once confirmed\n   */\n  parentDs: DataSource;\n  width?: number;\n}\n\nexport const BulkEditPanel = ({\n  className,\n  columns,\n  sessionDs,\n  parentDs,\n  style,\n  width = 600,\n  ...htmlAttributes\n}: BulkEditPanelProps): ReactElement => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-checkbox-cell\",\n    css: bulkEditPanelCss,\n    window: targetWindow,\n  });\n\n  const { onBulkChange, onRowChange, tableConfig } = useBulkEditPanel({\n    columns,\n    sessionDs,\n  });\n\n  const bulkEditRow = useMemo(() => {\n    return (\n      <BulkEditRow onBulkChange={onBulkChange} onRowChange={onRowChange} />\n    );\n  }, [onBulkChange, onRowChange]);\n\n  return (\n    <div\n      {...htmlAttributes}\n      className={cx(classBase, className)}\n      style={{ ...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={sessionDs}\n          height={380}\n          width={width}\n          showColumnHeaderMenus={false}\n          selectionModel=\"none\"\n          maxViewportRowLimit={10}\n        />\n      </div>\n    </div>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;AAYA,MAAM,SAAY,GAAA,kBAAA;AAmBX,MAAM,gBAAgB,CAAC;AAAA,EAC5B,SAAA;AAAA,EACA,OAAA;AAAA,EACA,SAAA;AAAA,EACA,QAAA;AAAA,EACA,KAAA;AAAA,EACA,KAAQ,GAAA,GAAA;AAAA,EACR,GAAG;AACL,CAAwC,KAAA;AACtC,EAAA,MAAM,eAAe,SAAU,EAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,mBAAA;AAAA,IACR,GAAK,EAAA,gBAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EAAA,MAAM,EAAE,YAAA,EAAc,WAAa,EAAA,WAAA,KAAgB,gBAAiB,CAAA;AAAA,IAClE,OAAA;AAAA,IACA;AAAA,GACD,CAAA;AAED,EAAM,MAAA,WAAA,GAAc,QAAQ,MAAM;AAChC,IACE,uBAAA,GAAA,CAAC,WAAY,EAAA,EAAA,YAAA,EAA4B,WAA0B,EAAA,CAAA;AAAA,GAEpE,EAAA,CAAC,YAAc,EAAA,WAAW,CAAC,CAAA;AAE9B,EACE,uBAAA,IAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACE,GAAG,cAAA;AAAA,MACJ,SAAA,EAAW,EAAG,CAAA,SAAA,EAAW,SAAS,CAAA;AAAA,MAClC,OAAO,EAAE,GAAG,OAAO,OAAS,EAAA,MAAA,EAAQ,eAAe,QAAS,EAAA;AAAA,MAE5D,QAAA,EAAA;AAAA,wBAAA,GAAA,CAAC,KAAI,EAAA,EAAA,SAAA,EAAW,CAAG,EAAA,SAAS,CAAY,QAAA,CAAA,EAAA,CAAA;AAAA,wBACvC,GAAA,CAAA,KAAA,EAAA,EAAI,SAAW,EAAA,CAAA,EAAG,SAAS,CAC1B,MAAA,CAAA,EAAA,QAAA,kBAAA,GAAA;AAAA,UAAC,KAAA;AAAA,UAAA;AAAA,YACC,qBAAuB,EAAA,KAAA;AAAA,YACvB,MAAQ,EAAA,WAAA;AAAA,YACR,YAAc,EAAA,WAAA;AAAA,YACd,UAAY,EAAA,SAAA;AAAA,YACZ,MAAQ,EAAA,GAAA;AAAA,YACR,KAAA;AAAA,YACA,qBAAuB,EAAA,KAAA;AAAA,YACvB,cAAe,EAAA,MAAA;AAAA,YACf,mBAAqB,EAAA;AAAA;AAAA,SAEzB,EAAA;AAAA;AAAA;AAAA,GACF;AAEJ;;;;"}
+{"version":3,"file":"BulkEditPanel.js","sources":["../../../../packages/vuu-table/src/bulk-edit/BulkEditPanel.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { DataSource, RpcResponse } from \"@vuu-ui/vuu-data-types\";\nimport type { ColumnDescriptor } from \"@vuu-ui/vuu-table-types\";\nimport cx from \"clsx\";\nimport { HTMLAttributes, ReactElement, useMemo } from \"react\";\nimport { Table } from \"../Table\";\nimport { ColumnCascadingUpdateEditor } from \"./ColumnCascadingUpdateEditor\";\nimport { InsertNewRowEditor } from \"./InsertNewRowEditor\";\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  showColumnCascadingUpdateEditor?: boolean;\n  showInsertNewRowEditor?: boolean;\n  /**\n   * The session dataSource. This is where the edits will be processed until final\n   * confirmation, at which point edits will be applied to parent dataSource and\n   * the session table torn down.\n   */\n  sessionDs: DataSource;\n  response?: RpcResponse;\n  mainTableName?: string;\n  /**\n   * The parent dataSource. This is where the edits will be applied once confirmed\n   */\n  parentDs: DataSource;\n  width?: number;\n}\n\nexport const BulkEditPanel = ({\n  className,\n  columns,\n  sessionDs,\n  showColumnCascadingUpdateEditor = false,\n  showInsertNewRowEditor = false,\n  parentDs,\n  style,\n  width = 600,\n  ...htmlAttributes\n}: BulkEditPanelProps): ReactElement => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-checkbox-cell\",\n    css: bulkEditPanelCss,\n    window: targetWindow,\n  });\n\n  const { onBulkChange, onRowChange, tableConfig } = useBulkEditPanel({\n    columns,\n    sessionDs,\n  });\n\n  const bulkEditRow = useMemo(() => {\n    if (showColumnCascadingUpdateEditor && showInsertNewRowEditor) {\n      return [\n        <InsertNewRowEditor\n          key={1}\n          onBulkChange={onBulkChange}\n          onRowChange={onRowChange}\n        />,\n        <ColumnCascadingUpdateEditor\n          key={2}\n          onBulkChange={onBulkChange}\n          onRowChange={onRowChange}\n        />,\n      ];\n    } else if (showColumnCascadingUpdateEditor) {\n      return (\n        <ColumnCascadingUpdateEditor\n          onBulkChange={onBulkChange}\n          onRowChange={onRowChange}\n        />\n      );\n    } else if (showInsertNewRowEditor) {\n      return (\n        <ColumnCascadingUpdateEditor\n          onBulkChange={onBulkChange}\n          onRowChange={onRowChange}\n        />\n      );\n    }\n  }, [\n    onBulkChange,\n    onRowChange,\n    showColumnCascadingUpdateEditor,\n    showInsertNewRowEditor,\n  ]);\n\n  return (\n    <div\n      {...htmlAttributes}\n      className={cx(classBase, className)}\n      style={{ ...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={sessionDs}\n          height={380}\n          width={width}\n          showColumnHeaderMenus={false}\n          selectionModel=\"none\"\n          maxViewportRowLimit={10}\n        />\n      </div>\n    </div>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;;AAaA,MAAM,SAAY,GAAA,kBAAA;AAqBX,MAAM,gBAAgB,CAAC;AAAA,EAC5B,SAAA;AAAA,EACA,OAAA;AAAA,EACA,SAAA;AAAA,EACA,+BAAkC,GAAA,KAAA;AAAA,EAClC,sBAAyB,GAAA,KAAA;AAAA,EACzB,QAAA;AAAA,EACA,KAAA;AAAA,EACA,KAAQ,GAAA,GAAA;AAAA,EACR,GAAG;AACL,CAAwC,KAAA;AACtC,EAAA,MAAM,eAAe,SAAU,EAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,mBAAA;AAAA,IACR,GAAK,EAAA,gBAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EAAA,MAAM,EAAE,YAAA,EAAc,WAAa,EAAA,WAAA,KAAgB,gBAAiB,CAAA;AAAA,IAClE,OAAA;AAAA,IACA;AAAA,GACD,CAAA;AAED,EAAM,MAAA,WAAA,GAAc,QAAQ,MAAM;AAChC,IAAA,IAAI,mCAAmC,sBAAwB,EAAA;AAC7D,MAAO,OAAA;AAAA,wBACL,GAAA;AAAA,UAAC,kBAAA;AAAA,UAAA;AAAA,YAEC,YAAA;AAAA,YACA;AAAA,WAAA;AAAA,UAFK;AAAA,SAGP;AAAA,wBACA,GAAA;AAAA,UAAC,2BAAA;AAAA,UAAA;AAAA,YAEC,YAAA;AAAA,YACA;AAAA,WAAA;AAAA,UAFK;AAAA;AAGP,OACF;AAAA,eACS,+BAAiC,EAAA;AAC1C,MACE,uBAAA,GAAA;AAAA,QAAC,2BAAA;AAAA,QAAA;AAAA,UACC,YAAA;AAAA,UACA;AAAA;AAAA,OACF;AAAA,eAEO,sBAAwB,EAAA;AACjC,MACE,uBAAA,GAAA;AAAA,QAAC,2BAAA;AAAA,QAAA;AAAA,UACC,YAAA;AAAA,UACA;AAAA;AAAA,OACF;AAAA;AAEJ,GACC,EAAA;AAAA,IACD,YAAA;AAAA,IACA,WAAA;AAAA,IACA,+BAAA;AAAA,IACA;AAAA,GACD,CAAA;AAED,EACE,uBAAA,IAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACE,GAAG,cAAA;AAAA,MACJ,SAAA,EAAW,EAAG,CAAA,SAAA,EAAW,SAAS,CAAA;AAAA,MAClC,OAAO,EAAE,GAAG,OAAO,OAAS,EAAA,MAAA,EAAQ,eAAe,QAAS,EAAA;AAAA,MAE5D,QAAA,EAAA;AAAA,wBAAA,GAAA,CAAC,KAAI,EAAA,EAAA,SAAA,EAAW,CAAG,EAAA,SAAS,CAAY,QAAA,CAAA,EAAA,CAAA;AAAA,wBACvC,GAAA,CAAA,KAAA,EAAA,EAAI,SAAW,EAAA,CAAA,EAAG,SAAS,CAC1B,MAAA,CAAA,EAAA,QAAA,kBAAA,GAAA;AAAA,UAAC,KAAA;AAAA,UAAA;AAAA,YACC,qBAAuB,EAAA,KAAA;AAAA,YACvB,MAAQ,EAAA,WAAA;AAAA,YACR,YAAc,EAAA,WAAA;AAAA,YACd,UAAY,EAAA,SAAA;AAAA,YACZ,MAAQ,EAAA,GAAA;AAAA,YACR,KAAA;AAAA,YACA,qBAAuB,EAAA,KAAA;AAAA,YACvB,cAAe,EAAA,MAAA;AAAA,YACf,mBAAqB,EAAA;AAAA;AAAA,SAEzB,EAAA;AAAA;AAAA;AAAA,GACF;AAEJ;;;;"}

package/esm/bulk-edit/ColumnCascadingUpdateEditor.css.js

@@ -0,0 +1,4 @@
+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";
+
+export { bulkEditRowCss as default };
+//# sourceMappingURL=ColumnCascadingUpdateEditor.css.js.map

package/esm/bulk-edit/ColumnCascadingUpdateEditor.css.js.map

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

package/esm/bulk-edit/ColumnCascadingUpdateEditor.js

@@ -0,0 +1,78 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useComponentCssInjection } from '@salt-ds/styles';
+import { useWindow } from '@salt-ds/window';
+import { getDataItemEditControl } from '@vuu-ui/vuu-data-react';
+import { isNotHidden } from '@vuu-ui/vuu-utils';
+import cx from 'clsx';
+import { VirtualColSpan } from '../VirtualColSpan.js';
+import { useHeaderProps } from '../table-header/HeaderProvider.js';
+import '../table-header/TableHeader.js';
+import { useBulkEditRow } from './useColumnCascadingEditor.js';
+import bulkEditRowCss from './ColumnCascadingUpdateEditor.css.js';
+
+const classBase = "vuuBulkEditRow";
+const ColumnCascadingUpdateEditor = ({
+  ariaRole,
+  onBulkChange,
+  onRowChange,
+  ...htmlAttributes
+}) => {
+  const targetWindow = useWindow();
+  useComponentCssInjection({
+    testId: "vuu-bulk-edit-row",
+    css: bulkEditRowCss,
+    window: targetWindow
+  });
+  const { columns, virtualColSpan = 0 } = useHeaderProps();
+  const {
+    errorMessages,
+    formFieldsContainerRef,
+    InputProps,
+    onCommit,
+    onFocus,
+    onKeyDown
+  } = useBulkEditRow({
+    descriptors: columns,
+    onBulkChange,
+    onRowChange
+  });
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ...htmlAttributes,
+      className: classBase,
+      onFocus,
+      onKeyDown,
+      ref: formFieldsContainerRef,
+      role: ariaRole,
+      children: [
+        /* @__PURE__ */ jsx(VirtualColSpan, { width: virtualColSpan }),
+        columns.filter(isNotHidden).map((column, i) => {
+          const errorMessage = errorMessages[column.name];
+          return /* @__PURE__ */ 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 ? getDataItemEditControl({
+                InputProps,
+                dataDescriptor: column,
+                errorMessage,
+                onCommit
+              }) : null
+            },
+            column.name
+          );
+        })
+      ]
+    }
+  );
+};
+
+export { ColumnCascadingUpdateEditor };
+//# sourceMappingURL=ColumnCascadingUpdateEditor.js.map

package/esm/bulk-edit/ColumnCascadingUpdateEditor.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColumnCascadingUpdateEditor.js","sources":["../../../../packages/vuu-table/src/bulk-edit/ColumnCascadingUpdateEditor.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { getDataItemEditControl } from \"@vuu-ui/vuu-data-react\";\nimport { VuuRowDataItemType } from \"@vuu-ui/vuu-protocol-types\";\nimport { BaseRowProps, ColumnDescriptor } from \"@vuu-ui/vuu-table-types\";\nimport { isNotHidden } from \"@vuu-ui/vuu-utils\";\nimport cx from \"clsx\";\nimport { HTMLAttributes } from \"react\";\nimport { VirtualColSpan } from \"../VirtualColSpan\";\nimport { useHeaderProps } from \"../table-header\";\nimport { useBulkEditRow } from \"./useColumnCascadingEditor\";\n\nimport bulkEditRowCss from \"./ColumnCascadingUpdateEditor.css\";\n\nconst classBase = \"vuuBulkEditRow\";\n\nexport type EditValueChangeHandler = (\n  column: ColumnDescriptor,\n  value: VuuRowDataItemType,\n) => void;\nexport interface ColumnCascadingUpdateEditorProps\n  extends Partial<BaseRowProps>,\n    Omit<HTMLAttributes<HTMLDivElement>, \"onChange\"> {\n  onBulkChange: EditValueChangeHandler;\n  onRowChange: (isValid: boolean) => void;\n}\n\nexport const ColumnCascadingUpdateEditor = ({\n  ariaRole,\n  onBulkChange,\n  onRowChange,\n  ...htmlAttributes\n}: ColumnCascadingUpdateEditorProps) => {\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.filter(isNotHidden).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                })\n              : null}\n          </div>\n        );\n      })}\n    </div>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;AAcA,MAAM,SAAY,GAAA,gBAAA;AAaX,MAAM,8BAA8B,CAAC;AAAA,EAC1C,QAAA;AAAA,EACA,YAAA;AAAA,EACA,WAAA;AAAA,EACA,GAAG;AACL,CAAwC,KAAA;AACtC,EAAA,MAAM,eAAe,SAAU,EAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,mBAAA;AAAA,IACR,GAAK,EAAA,cAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EAAA,MAAM,EAAE,OAAA,EAAS,cAAiB,GAAA,CAAA,KAAM,cAAe,EAAA;AAEvD,EAAM,MAAA;AAAA,IACJ,aAAA;AAAA,IACA,sBAAA;AAAA,IACA,UAAA;AAAA,IACA,QAAA;AAAA,IACA,OAAA;AAAA,IACA;AAAA,MACE,cAAe,CAAA;AAAA,IACjB,WAAa,EAAA,OAAA;AAAA,IACb,YAAA;AAAA,IACA;AAAA,GACD,CAAA;AAED,EACE,uBAAA,IAAA;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,wBAAC,GAAA,CAAA,cAAA,EAAA,EAAe,OAAO,cAAgB,EAAA,CAAA;AAAA,QACtC,QAAQ,MAAO,CAAA,WAAW,EAAE,GAAI,CAAA,CAAC,QAAQ,CAAM,KAAA;AAC9C,UAAM,MAAA,YAAA,GAAe,aAAc,CAAA,MAAA,CAAO,IAAI,CAAA;AAC9C,UACE,uBAAA,GAAA;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,WACJ,sBAAuB,CAAA;AAAA,gBACrB,UAAA;AAAA,gBACA,cAAgB,EAAA,MAAA;AAAA,gBAChB,YAAA;AAAA,gBACA;AAAA,eACD,CACD,GAAA;AAAA,aAAA;AAAA,YAXC,MAAO,CAAA;AAAA,WAYd;AAAA,SAEH;AAAA;AAAA;AAAA,GACH;AAEJ;;;;"}

package/esm/bulk-edit/{BulkEditRow.css.js → InsertNewRowEditor.css.js}

@@ -1,4 +1,4 @@
 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";
 
 export { bulkEditRowCss as default };
-//# sourceMappingURL=BulkEditRow.css.js.map
+//# sourceMappingURL=InsertNewRowEditor.css.js.map

package/esm/bulk-edit/InsertNewRowEditor.css.js.map

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

package/esm/bulk-edit/{BulkEditRow.js → InsertNewRowEditor.js}

@@ -6,12 +6,12 @@ import cx from 'clsx';
 import { VirtualColSpan } from '../VirtualColSpan.js';
 import { useHeaderProps } from '../table-header/HeaderProvider.js';
 import '../table-header/TableHeader.js';
-import { useBulkEditRow } from './useBulkEditRow.js';
-import bulkEditRowCss from './BulkEditRow.css.js';
+import { useBulkEditRow } from './useColumnCascadingEditor.js';
 import { isNotHidden } from '@vuu-ui/vuu-utils';
+import bulkEditRowCss from './InsertNewRowEditor.css.js';
 
 const classBase = "vuuBulkEditRow";
-const BulkEditRow = ({
+const InsertNewRowEditor = ({
   ariaRole,
   onBulkChange,
   onRowChange,
@@ -74,5 +74,5 @@ const BulkEditRow = ({
   );
 };
 
-export { BulkEditRow };
-//# sourceMappingURL=BulkEditRow.js.map
+export { InsertNewRowEditor };
+//# sourceMappingURL=InsertNewRowEditor.js.map

package/esm/bulk-edit/InsertNewRowEditor.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"InsertNewRowEditor.js","sources":["../../../../packages/vuu-table/src/bulk-edit/InsertNewRowEditor.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { getDataItemEditControl } from \"@vuu-ui/vuu-data-react\";\nimport { VuuRowDataItemType } from \"@vuu-ui/vuu-protocol-types\";\nimport { BaseRowProps, ColumnDescriptor } from \"@vuu-ui/vuu-table-types\";\nimport cx from \"clsx\";\nimport { HTMLAttributes } from \"react\";\nimport { VirtualColSpan } from \"../VirtualColSpan\";\nimport { useHeaderProps } from \"../table-header\";\nimport { useBulkEditRow } from \"./useColumnCascadingEditor\";\nimport { isNotHidden } from \"@vuu-ui/vuu-utils\";\n\nimport bulkEditRowCss from \"./InsertNewRowEditor.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  onBulkChange: EditValueChangeHandler;\n  onRowChange: (isValid: boolean) => void;\n}\n\nexport const InsertNewRowEditor = ({\n  ariaRole,\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.filter(isNotHidden).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                })\n              : null}\n          </div>\n        );\n      })}\n    </div>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;AAcA,MAAM,SAAY,GAAA,gBAAA;AAaX,MAAM,qBAAqB,CAAC;AAAA,EACjC,QAAA;AAAA,EACA,YAAA;AAAA,EACA,WAAA;AAAA,EACA,GAAG;AACL,CAAqB,KAAA;AACnB,EAAA,MAAM,eAAe,SAAU,EAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,mBAAA;AAAA,IACR,GAAK,EAAA,cAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EAAA,MAAM,EAAE,OAAA,EAAS,cAAiB,GAAA,CAAA,KAAM,cAAe,EAAA;AAEvD,EAAM,MAAA;AAAA,IACJ,aAAA;AAAA,IACA,sBAAA;AAAA,IACA,UAAA;AAAA,IACA,QAAA;AAAA,IACA,OAAA;AAAA,IACA;AAAA,MACE,cAAe,CAAA;AAAA,IACjB,WAAa,EAAA,OAAA;AAAA,IACb,YAAA;AAAA,IACA;AAAA,GACD,CAAA;AAED,EACE,uBAAA,IAAA;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,wBAAC,GAAA,CAAA,cAAA,EAAA,EAAe,OAAO,cAAgB,EAAA,CAAA;AAAA,QACtC,QAAQ,MAAO,CAAA,WAAW,EAAE,GAAI,CAAA,CAAC,QAAQ,CAAM,KAAA;AAC9C,UAAM,MAAA,YAAA,GAAe,aAAc,CAAA,MAAA,CAAO,IAAI,CAAA;AAC9C,UACE,uBAAA,GAAA;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,WACJ,sBAAuB,CAAA;AAAA,gBACrB,UAAA;AAAA,gBACA,cAAgB,EAAA,MAAA;AAAA,gBAChB,YAAA;AAAA,gBACA;AAAA,eACD,CACD,GAAA;AAAA,aAAA;AAAA,YAXC,MAAO,CAAA;AAAA,WAYd;AAAA,SAEH;AAAA;AAAA;AAAA,GACH;AAEJ;;;;"}

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

@@ -1 +1 @@
-{"version":3,"file":"useBulkEditPanel.js","sources":["../../../../packages/vuu-table/src/bulk-edit/useBulkEditPanel.ts"],"sourcesContent":["import { buildValidationChecker } from \"@vuu-ui/vuu-data-react\";\nimport { VuuRpcServiceRequest } from \"@vuu-ui/vuu-protocol-types\";\nimport { DataValueTypeDescriptor, TableConfig } from \"@vuu-ui/vuu-table-types\";\nimport { hasValidationRules, isTypeDescriptor } from \"@vuu-ui/vuu-utils\";\nimport { useCallback, useMemo, useState } from \"react\";\nimport type { BulkEditPanelProps } from \"./BulkEditPanel\";\nimport { EditValueChangeHandler } from \"./useBulkEditRow\";\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\nexport type BulkEditPanelHookProps = Pick<\n  BulkEditPanelProps,\n  \"columns\" | \"sessionDs\"\n>;\n\nexport const useBulkEditPanel = ({\n  columns,\n  sessionDs: dataSource,\n}: BulkEditPanelHookProps) => {\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              width: 120,\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 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.rpcRequest?.({\n        params: { column: column.name, value },\n        rpcName: \"VP_BULK_EDIT_COLUMN_CELLS_RPC\",\n        type: \"RPC_REQUEST\",\n      } as Omit<VuuRpcServiceRequest, \"context\">);\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":[],"mappings":";;;;AAQA,MAAM,WAAA,GAAc,CAClB,OAAA,EACA,YAC4B,KAAA;AAC5B,EAAO,OAAA;AAAA,IACL,MAAM,OAAQ,CAAA,IAAA;AAAA,IACd,OAAO,OAAQ,CAAA,KAAA;AAAA,IACf,YAAY,OAAQ,CAAA,UAAA;AAAA,IACpB,QAAA,EAAU,EAAE,IAAA,EAAM,YAAa;AAAA,GACjC;AACF,CAAA;AAOO,MAAM,mBAAmB,CAAC;AAAA,EAC/B,OAAA;AAAA,EACA,SAAW,EAAA;AACb,CAA8B,KAAA;AAC5B,EAAA,MAAM,CAAC,QAAA,EAAU,WAAW,CAAA,GAAI,SAAS,IAAI,CAAA;AAE7C,EAAM,MAAA,WAAA,GAA2B,QAAQ,MAAM;AAC7C,IAAO,OAAA;AAAA,MACL,OAAS,EAAA,OAAA,GACL,OAAQ,CAAA,GAAA,CAAI,CAAC,GAAQ,KAAA;AACnB,QAAO,OAAA;AAAA,UACL,QAAA,EAAU,IAAI,YAAiB,KAAA,MAAA;AAAA,UAC/B,MAAA,EAAQ,IAAI,YAAiB,KAAA,KAAA;AAAA,UAC7B,MAAM,GAAI,CAAA,IAAA;AAAA,UACV,cAAA,EAAgB,IAAI,cAAkB,IAAA,QAAA;AAAA,UACtC,IAAA,EAAM,iBAAiB,GAAI,CAAA,IAAI,IAC3B,WAAY,CAAA,GAAA,CAAI,IAAM,EAAA,YAAY,CAClC,GAAA,QAAA;AAAA,UACJ,6BAAA,EAA+B,mBAAmB,GAAI,CAAA,IAAI,IACtD,sBAAuB,CAAA,GAAA,CAAI,IAAK,CAAA,KAAK,CACrC,GAAA,KAAA,CAAA;AAAA,UACJ,KAAO,EAAA;AAAA,SACT;AAAA,OACD,CACD,GAAA,UAAA,CAAW,OAAQ,CAAA,GAAA,CAAI,CAAC,IAAU,MAAA;AAAA,QAChC,QAAU,EAAA,IAAA;AAAA,QACV,IAAA;AAAA,QACA,cAAgB,EAAA;AAAA,OAChB,CAAA,CAAA;AAAA,MACN,YAAc,EAAA,KAAA;AAAA,MACd,kBAAoB,EAAA,GAAA;AAAA,MACpB,aAAe,EAAA;AAAA,KACjB;AAAA,GACC,EAAA,CAAC,OAAS,EAAA,UAAA,CAAW,OAAO,CAAC,CAAA;AAEhC,EAAA,MAAM,eAAkB,GAAA,WAAA;AAAA,IACtB,CAAC,OAAqB,KAAA;AACpB,MAAA,IAAI,YAAY,QAAU,EAAA;AACxB,QAAA,WAAA,CAAY,OAAO,CAAA;AAAA;AACrB,KACF;AAAA,IACA,CAAC,QAAQ;AAAA,GACX;AAEA,EAAA,MAAM,gBAA2C,GAAA,WAAA;AAAA,IAC/C,OAAO,QAAQ,KAAU,KAAA;AACvB,MAAM,MAAA,QAAA,GAAW,MAAM,UAAA,CAAW,UAAa,GAAA;AAAA,QAC7C,MAAQ,EAAA,EAAE,MAAQ,EAAA,MAAA,CAAO,MAAM,KAAM,EAAA;AAAA,QACrC,OAAS,EAAA,+BAAA;AAAA,QACT,IAAM,EAAA;AAAA,OACkC,CAAA;AAC1C,MAAQ,OAAA,CAAA,GAAA,CAAI,EAAE,QAAA,EAAU,CAAA;AAAA,KAC1B;AAAA,IACA,CAAC,UAAU;AAAA,GACb;AAEA,EAAO,OAAA;AAAA,IACL,WAAA;AAAA,IACA,YAAc,EAAA,gBAAA;AAAA;AAAA,IAEd,WAAa,EAAA;AAAA,GACf;AACF;;;;"}
+{"version":3,"file":"useBulkEditPanel.js","sources":["../../../../packages/vuu-table/src/bulk-edit/useBulkEditPanel.ts"],"sourcesContent":["import { buildValidationChecker } from \"@vuu-ui/vuu-data-react\";\nimport { VuuRpcServiceRequest } from \"@vuu-ui/vuu-protocol-types\";\nimport { DataValueTypeDescriptor, TableConfig } from \"@vuu-ui/vuu-table-types\";\nimport { hasValidationRules, isTypeDescriptor } from \"@vuu-ui/vuu-utils\";\nimport { useCallback, useMemo, useState } from \"react\";\nimport type { BulkEditPanelProps } from \"./BulkEditPanel\";\nimport { EditValueChangeHandler } from \"./useColumnCascadingEditor\";\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\nexport type BulkEditPanelHookProps = Pick<\n  BulkEditPanelProps,\n  \"columns\" | \"sessionDs\"\n>;\n\nexport const useBulkEditPanel = ({\n  columns,\n  sessionDs: dataSource,\n}: BulkEditPanelHookProps) => {\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              width: 120,\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 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.rpcRequest?.({\n        params: { column: column.name, value },\n        rpcName: \"VP_BULK_EDIT_COLUMN_CELLS_RPC\",\n        type: \"RPC_REQUEST\",\n      } as Omit<VuuRpcServiceRequest, \"context\">);\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":[],"mappings":";;;;AAQA,MAAM,WAAA,GAAc,CAClB,OAAA,EACA,YAC4B,KAAA;AAC5B,EAAO,OAAA;AAAA,IACL,MAAM,OAAQ,CAAA,IAAA;AAAA,IACd,OAAO,OAAQ,CAAA,KAAA;AAAA,IACf,YAAY,OAAQ,CAAA,UAAA;AAAA,IACpB,QAAA,EAAU,EAAE,IAAA,EAAM,YAAa;AAAA,GACjC;AACF,CAAA;AAOO,MAAM,mBAAmB,CAAC;AAAA,EAC/B,OAAA;AAAA,EACA,SAAW,EAAA;AACb,CAA8B,KAAA;AAC5B,EAAA,MAAM,CAAC,QAAA,EAAU,WAAW,CAAA,GAAI,SAAS,IAAI,CAAA;AAE7C,EAAM,MAAA,WAAA,GAA2B,QAAQ,MAAM;AAC7C,IAAO,OAAA;AAAA,MACL,OAAS,EAAA,OAAA,GACL,OAAQ,CAAA,GAAA,CAAI,CAAC,GAAQ,KAAA;AACnB,QAAO,OAAA;AAAA,UACL,QAAA,EAAU,IAAI,YAAiB,KAAA,MAAA;AAAA,UAC/B,MAAA,EAAQ,IAAI,YAAiB,KAAA,KAAA;AAAA,UAC7B,MAAM,GAAI,CAAA,IAAA;AAAA,UACV,cAAA,EAAgB,IAAI,cAAkB,IAAA,QAAA;AAAA,UACtC,IAAA,EAAM,iBAAiB,GAAI,CAAA,IAAI,IAC3B,WAAY,CAAA,GAAA,CAAI,IAAM,EAAA,YAAY,CAClC,GAAA,QAAA;AAAA,UACJ,6BAAA,EAA+B,mBAAmB,GAAI,CAAA,IAAI,IACtD,sBAAuB,CAAA,GAAA,CAAI,IAAK,CAAA,KAAK,CACrC,GAAA,KAAA,CAAA;AAAA,UACJ,KAAO,EAAA;AAAA,SACT;AAAA,OACD,CACD,GAAA,UAAA,CAAW,OAAQ,CAAA,GAAA,CAAI,CAAC,IAAU,MAAA;AAAA,QAChC,QAAU,EAAA,IAAA;AAAA,QACV,IAAA;AAAA,QACA,cAAgB,EAAA;AAAA,OAChB,CAAA,CAAA;AAAA,MACN,YAAc,EAAA,KAAA;AAAA,MACd,kBAAoB,EAAA,GAAA;AAAA,MACpB,aAAe,EAAA;AAAA,KACjB;AAAA,GACC,EAAA,CAAC,OAAS,EAAA,UAAA,CAAW,OAAO,CAAC,CAAA;AAEhC,EAAA,MAAM,eAAkB,GAAA,WAAA;AAAA,IACtB,CAAC,OAAqB,KAAA;AACpB,MAAA,IAAI,YAAY,QAAU,EAAA;AACxB,QAAA,WAAA,CAAY,OAAO,CAAA;AAAA;AACrB,KACF;AAAA,IACA,CAAC,QAAQ;AAAA,GACX;AAEA,EAAA,MAAM,gBAA2C,GAAA,WAAA;AAAA,IAC/C,OAAO,QAAQ,KAAU,KAAA;AACvB,MAAM,MAAA,QAAA,GAAW,MAAM,UAAA,CAAW,UAAa,GAAA;AAAA,QAC7C,MAAQ,EAAA,EAAE,MAAQ,EAAA,MAAA,CAAO,MAAM,KAAM,EAAA;AAAA,QACrC,OAAS,EAAA,+BAAA;AAAA,QACT,IAAM,EAAA;AAAA,OACkC,CAAA;AAC1C,MAAQ,OAAA,CAAA,GAAA,CAAI,EAAE,QAAA,EAAU,CAAA;AAAA,KAC1B;AAAA,IACA,CAAC,UAAU;AAAA,GACb;AAEA,EAAO,OAAA;AAAA,IACL,WAAA;AAAA,IACA,YAAc,EAAA,gBAAA;AAAA;AAAA,IAEd,WAAa,EAAA;AAAA,GACf;AACF;;;;"}

package/esm/bulk-edit/{useBulkEditRow.js → useColumnCascadingEditor.js}

@@ -138,4 +138,4 @@ const useBulkEditRow = ({
 };
 
 export { useBulkEditRow };
-//# sourceMappingURL=useBulkEditRow.js.map
+//# sourceMappingURL=useColumnCascadingEditor.js.map

package/esm/bulk-edit/useColumnCascadingEditor.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useColumnCascadingEditor.js","sources":["../../../../packages/vuu-table/src/bulk-edit/useColumnCascadingEditor.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<CommitHandler<HTMLElement>>(\n    (evt, value) => {\n      if (typeof value === \"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            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":["InputProps"],"mappings":"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"}

package/esm/cell-renderers/input-cell/InputCell.css.js

@@ -1,4 +1,4 @@
-var inputCellCss = ".vuuTableCell.vuuTableCell-editable {\n  .vuuTableInputCell.saltInput-primary {\n    --salt-focused-outlineStyle: none;\n    --saltInput-height: var(--vuu-table-embedded-control-height);\n    --saltInput-minHeight: var(--saltInput-height);\n    border-radius: 2px;\n    font-weight: 500;\n  }\n}\n\n.vuuTableInputCell-icon {\n  --vuu-icon-height: 13px;\n  --vuu-icon-left: 0;\n  --vuu-icon-size: 15px;\n  --vuu-icon-width: 12px;\n  border-radius: 10px;\n  cursor: pointer;\n}\n\n.vuuTableInputCell-error.saltInput-bordered.saltInput {\n    border-color: red;\n  .saltInput-startAdornmentContainer {\n    .vuuTableInputCell-icon {\n      --vuu-icon-color: var(--salt-status-error-bold-background);\n    }\n  }\n  .saltInput-endAdornmentContainer {\n    .vuuTableInputCell-icon {\n      --vuu-icon-color: var(--salt-status-error-bold-background);\n    }\n  }\n}\n\n.vuuTableCell-right {\n  .saltInput-input {\n    text-align: right;\n  }\n}\n\n.vuuTableInputCell-edited {\n  border-left:  solid var(--vuuTableInputCell-edited-color, var(--salt-editable-borderColor)) 4px !important;\n}\n\n.vuuTableCell-error {\n  .vuuTableInputCell {\n    outline: var(--vuuTableCell-outline, solid red 2px);\n    outline-offset: -2px;\n  }\n}\n";
+var inputCellCss = ".vuuTableCell.vuuTableCell-editable {\n  .vuuTableInputCell.saltInput-primary {\n    --salt-focused-outlineStyle: none;\n    --saltInput-height: var(--vuu-table-embedded-control-height);\n    --saltInput-minHeight: var(--saltInput-height);\n    border-radius: 2px;\n    font-weight: 500;\n  }\n}\n\n.vuuTableInputCell {\n  --edit-indicator-color: var(--salt-editable-borderColor);\n}\n.vuuTableInputCell-icon {\n  --vuu-icon-height: 13px;\n  --vuu-icon-left: 0;\n  --vuu-icon-size: 15px;\n  --vuu-icon-width: 12px;\n  border-radius: 10px;\n  cursor: pointer;\n}\n\n.vuuTableInputCell-error.saltInput-bordered.saltInput {\n    border-color: var(--salt-status-error-foreground-informative);\n  .saltInput-startAdornmentContainer {\n    .vuuTableInputCell-icon {\n      --vuu-icon-color: var(--salt-status-error-bold-background);\n    }\n  }\n  .saltInput-endAdornmentContainer {\n    .vuuTableInputCell-icon {\n      --vuu-icon-color: var(--salt-status-error-bold-background);\n    }\n  }\n}\n.vuuTableInputCell-warning.saltInput-bordered.saltInput {\n    border-color: var(--salt-status-warning-foreground-informative);\n  .saltInput-startAdornmentContainer {\n    .vuuTableInputCell-icon {\n      --vuu-icon-color: var(--salt-status-warning-bold-background);\n    }\n  }\n  .saltInput-endAdornmentContainer {\n    .vuuTableInputCell-icon {\n      --vuu-icon-color: var(--salt-status-warning-bold-background);\n    }\n  }\n}\n\n.vuuTableCell-right {\n  .saltInput-input {\n    text-align: right;\n  }\n}\n\n.vuuTableInputCell-edited {\n  border-left:  solid var(--vuuTableInputCell-edited-color, var(--edit-indicator-color)) 4px !important;\n}\n\n.vuuTableInputCell-error {\n    --edit-indicator-color: var(--salt-status-error-foreground-informative);\n    outline: var(--vuuTableCell-outline, solid var(--salt-status-error-foreground-informative) 2px);\n    outline-offset: -2px;\n}\n\n.vuuTableInputCell-warning {\n    --edit-indicator-color: var(--salt-status-warning-foreground-informative);\n    outline: var(--vuuTableCell-outline, solid var(--salt-status-warning-foreground-informative) 2px);\n    outline-offset: -2px;\n}\n";
 
 export { inputCellCss as default };
 //# sourceMappingURL=InputCell.css.js.map

package/esm/cell-renderers/input-cell/InputCell.js

@@ -2,15 +2,17 @@ import { jsx } from 'react/jsx-runtime';
 import { Input, Tooltip } from '@salt-ds/core';
 import { useComponentCssInjection } from '@salt-ds/styles';
 import { useWindow } from '@salt-ds/window';
-import { useEditableText, Icon } from '@vuu-ui/vuu-ui-controls';
-import { registerComponent, dataDescriptorTypeToVuuRowDataItemType } from '@vuu-ui/vuu-utils';
+import { Icon } from '@vuu-ui/vuu-ui-controls';
+import { registerComponent, dataDescriptorTypeToVuuRowDataItemType, getVuuEditMessage } from '@vuu-ui/vuu-utils';
 import cx from 'clsx';
 import inputCellCss from './InputCell.css.js';
+import { useInputCell } from './useInputCell.js';
 
 const classBase = "vuuTableInputCell";
 const InputCell = ({
   column,
   dataRow,
+  editedDuringCurrentSession,
   onEdit
 }) => {
   const targetWindow = useWindow();
@@ -21,22 +23,30 @@ const InputCell = ({
   });
   const dataValue = dataRow[column.name];
   const { align = "left" } = column;
-  const { edited, warningMessage, ...editProps } = useEditableText({
+  const {
+    editing,
+    warningMessage,
+    previousValue = "",
+    ...editProps
+  } = useInputCell({
     column,
     onEdit,
     type: dataDescriptorTypeToVuuRowDataItemType(column),
     value: dataValue
   });
-  const endAdornment = warningMessage && align === "left" ? /* @__PURE__ */ jsx(Tooltip, { content: warningMessage, placement: "right", children: /* @__PURE__ */ jsx(Icon, { className: `${classBase}-icon`, name: "error" }) }) : void 0;
-  const startAdornment = warningMessage && align === "right" ? /* @__PURE__ */ jsx(Tooltip, { content: warningMessage, placement: "left", children: /* @__PURE__ */ jsx(Icon, { className: `${classBase}-icon`, name: "error" }) }) : void 0;
+  const editRejected = getVuuEditMessage(dataRow, column, previousValue);
+  const endAdornment = editRejected && align === "left" ? /* @__PURE__ */ jsx(Tooltip, { content: editRejected, placement: "right", children: /* @__PURE__ */ jsx(Icon, { className: `${classBase}-icon`, name: "error" }) }) : warningMessage && align === "left" ? /* @__PURE__ */ jsx(Tooltip, { content: warningMessage, placement: "right", children: /* @__PURE__ */ jsx(Icon, { className: `${classBase}-icon`, name: "error" }) }) : void 0;
+  const startAdornment = editRejected && align === "right" ? /* @__PURE__ */ jsx(Tooltip, { content: editRejected, placement: "right", children: /* @__PURE__ */ jsx(Icon, { className: `${classBase}-icon`, name: "error" }) }) : warningMessage && align === "right" ? /* @__PURE__ */ jsx(Tooltip, { content: warningMessage, placement: "left", children: /* @__PURE__ */ jsx(Icon, { className: `${classBase}-icon`, name: "error" }) }) : void 0;
   return /* @__PURE__ */ jsx(
     Input,
     {
       ...editProps,
       bordered: true,
       className: cx(classBase, {
-        [`${classBase}-edited`]: edited,
-        [`${classBase}-error`]: warningMessage !== void 0
+        [`${classBase}-edited`]: editedDuringCurrentSession === true,
+        [`${classBase}-error`]: warningMessage !== void 0,
+        [`${classBase}-warning`]: editRejected !== void 0,
+        vuuEditing: editing
       }),
       endAdornment,
       startAdornment

package/esm/cell-renderers/input-cell/InputCell.js.map

@@ -1 +1 @@
-{"version":3,"file":"InputCell.js","sources":["../../../../../packages/vuu-table/src/cell-renderers/input-cell/InputCell.tsx"],"sourcesContent":["import { Input, Tooltip } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { TableCellRendererProps } from \"@vuu-ui/vuu-table-types\";\nimport { Icon, useEditableText } from \"@vuu-ui/vuu-ui-controls\";\nimport {\n  dataDescriptorTypeToVuuRowDataItemType,\n  registerComponent,\n} from \"@vuu-ui/vuu-utils\";\nimport cx from \"clsx\";\n\nimport inputCellCss from \"./InputCell.css\";\n\nconst classBase = \"vuuTableInputCell\";\n\nexport const InputCell = ({\n  column,\n  dataRow,\n  onEdit,\n}: TableCellRendererProps) => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-input-cell\",\n    css: inputCellCss,\n    window: targetWindow,\n  });\n\n  const dataValue = dataRow[column.name] as number | string;\n  const { align = \"left\" } = column;\n\n  const { edited, warningMessage, ...editProps } = useEditableText({\n    column,\n    onEdit,\n    type: dataDescriptorTypeToVuuRowDataItemType(column),\n    value: dataValue,\n  });\n\n  const endAdornment =\n    warningMessage && align === \"left\" ? (\n      <Tooltip content={warningMessage} placement=\"right\">\n        <Icon className={`${classBase}-icon`} name=\"error\" />\n      </Tooltip>\n    ) : undefined;\n\n  const startAdornment =\n    warningMessage && align === \"right\" ? (\n      <Tooltip content={warningMessage} placement=\"left\">\n        <Icon className={`${classBase}-icon`} name=\"error\" />\n      </Tooltip>\n    ) : undefined;\n\n  return (\n    <Input\n      {...editProps}\n      bordered\n      className={cx(classBase, {\n        [`${classBase}-edited`]: edited,\n        [`${classBase}-error`]: warningMessage !== undefined,\n      })}\n      endAdornment={endAdornment}\n      startAdornment={startAdornment}\n    />\n  );\n};\n\nregisterComponent(\"input-cell\", InputCell, \"cell-renderer\", {\n  userCanAssign: false,\n});\n"],"names":[],"mappings":";;;;;;;;;AAaA,MAAM,SAAY,GAAA,mBAAA;AAEX,MAAM,YAAY,CAAC;AAAA,EACxB,MAAA;AAAA,EACA,OAAA;AAAA,EACA;AACF,CAA8B,KAAA;AAC5B,EAAA,MAAM,eAAe,SAAU,EAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,gBAAA;AAAA,IACR,GAAK,EAAA,YAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EAAM,MAAA,SAAA,GAAY,OAAQ,CAAA,MAAA,CAAO,IAAI,CAAA;AACrC,EAAM,MAAA,EAAE,KAAQ,GAAA,MAAA,EAAW,GAAA,MAAA;AAE3B,EAAA,MAAM,EAAE,MAAQ,EAAA,cAAA,EAAgB,GAAG,SAAA,KAAc,eAAgB,CAAA;AAAA,IAC/D,MAAA;AAAA,IACA,MAAA;AAAA,IACA,IAAA,EAAM,uCAAuC,MAAM,CAAA;AAAA,IACnD,KAAO,EAAA;AAAA,GACR,CAAA;AAED,EAAA,MAAM,eACJ,cAAkB,IAAA,KAAA,KAAU,yBACzB,GAAA,CAAA,OAAA,EAAA,EAAQ,SAAS,cAAgB,EAAA,SAAA,EAAU,SAC1C,QAAC,kBAAA,GAAA,CAAA,IAAA,EAAA,EAAK,WAAW,CAAG,EAAA,SAAS,SAAS,IAAK,EAAA,OAAA,EAAQ,GACrD,CACE,GAAA,KAAA,CAAA;AAEN,EAAA,MAAM,iBACJ,cAAkB,IAAA,KAAA,KAAU,0BACzB,GAAA,CAAA,OAAA,EAAA,EAAQ,SAAS,cAAgB,EAAA,SAAA,EAAU,QAC1C,QAAC,kBAAA,GAAA,CAAA,IAAA,EAAA,EAAK,WAAW,CAAG,EAAA,SAAS,SAAS,IAAK,EAAA,OAAA,EAAQ,GACrD,CACE,GAAA,KAAA,CAAA;AAEN,EACE,uBAAA,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACE,GAAG,SAAA;AAAA,MACJ,QAAQ,EAAA,IAAA;AAAA,MACR,SAAA,EAAW,GAAG,SAAW,EAAA;AAAA,QACvB,CAAC,CAAA,EAAG,SAAS,CAAA,OAAA,CAAS,GAAG,MAAA;AAAA,QACzB,CAAC,CAAA,EAAG,SAAS,CAAA,MAAA,CAAQ,GAAG,cAAmB,KAAA,KAAA;AAAA,OAC5C,CAAA;AAAA,MACD,YAAA;AAAA,MACA;AAAA;AAAA,GACF;AAEJ;AAEA,iBAAkB,CAAA,YAAA,EAAc,WAAW,eAAiB,EAAA;AAAA,EAC1D,aAAe,EAAA;AACjB,CAAC,CAAA;;;;"}
+{"version":3,"file":"InputCell.js","sources":["../../../../../packages/vuu-table/src/cell-renderers/input-cell/InputCell.tsx"],"sourcesContent":["import { Input, Tooltip } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { TableCellRendererProps } from \"@vuu-ui/vuu-table-types\";\nimport { Icon } from \"@vuu-ui/vuu-ui-controls\";\nimport {\n  dataDescriptorTypeToVuuRowDataItemType,\n  getVuuEditMessage,\n  registerComponent,\n} from \"@vuu-ui/vuu-utils\";\nimport cx from \"clsx\";\n\nimport inputCellCss from \"./InputCell.css\";\nimport { useInputCell } from \"./useInputCell\";\n\nconst classBase = \"vuuTableInputCell\";\n\nexport const InputCell = ({\n  column,\n  dataRow,\n  editedDuringCurrentSession,\n  onEdit,\n}: TableCellRendererProps) => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-input-cell\",\n    css: inputCellCss,\n    window: targetWindow,\n  });\n\n  const dataValue = dataRow[column.name] as number | string;\n\n  const { align = \"left\" } = column;\n\n  const {\n    editing,\n    warningMessage,\n    previousValue = \"\",\n    ...editProps\n  } = useInputCell({\n    column,\n    onEdit,\n    type: dataDescriptorTypeToVuuRowDataItemType(column),\n    value: dataValue,\n  });\n\n  // TODO can this move into useEdtableText ?\n  const editRejected = getVuuEditMessage(dataRow, column, previousValue);\n\n  const endAdornment =\n    editRejected && align === \"left\" ? (\n      <Tooltip content={editRejected} placement=\"right\">\n        <Icon className={`${classBase}-icon`} name=\"error\" />\n      </Tooltip>\n    ) : warningMessage && align === \"left\" ? (\n      <Tooltip content={warningMessage} placement=\"right\">\n        <Icon className={`${classBase}-icon`} name=\"error\" />\n      </Tooltip>\n    ) : undefined;\n\n  const startAdornment =\n    editRejected && align === \"right\" ? (\n      <Tooltip content={editRejected} placement=\"right\">\n        <Icon className={`${classBase}-icon`} name=\"error\" />\n      </Tooltip>\n    ) : warningMessage && align === \"right\" ? (\n      <Tooltip content={warningMessage} placement=\"left\">\n        <Icon className={`${classBase}-icon`} name=\"error\" />\n      </Tooltip>\n    ) : undefined;\n\n  return (\n    <Input\n      {...editProps}\n      bordered\n      className={cx(classBase, {\n        [`${classBase}-edited`]: editedDuringCurrentSession === true,\n        [`${classBase}-error`]: warningMessage !== undefined,\n        [`${classBase}-warning`]: editRejected !== undefined,\n        vuuEditing: editing,\n      })}\n      endAdornment={endAdornment}\n      startAdornment={startAdornment}\n    />\n  );\n};\n\nregisterComponent(\"input-cell\", InputCell, \"cell-renderer\", {\n  userCanAssign: false,\n});\n"],"names":[],"mappings":";;;;;;;;;;AAeA,MAAM,SAAY,GAAA,mBAAA;AAEX,MAAM,YAAY,CAAC;AAAA,EACxB,MAAA;AAAA,EACA,OAAA;AAAA,EACA,0BAAA;AAAA,EACA;AACF,CAA8B,KAAA;AAC5B,EAAA,MAAM,eAAe,SAAU,EAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,gBAAA;AAAA,IACR,GAAK,EAAA,YAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EAAM,MAAA,SAAA,GAAY,OAAQ,CAAA,MAAA,CAAO,IAAI,CAAA;AAErC,EAAM,MAAA,EAAE,KAAQ,GAAA,MAAA,EAAW,GAAA,MAAA;AAE3B,EAAM,MAAA;AAAA,IACJ,OAAA;AAAA,IACA,cAAA;AAAA,IACA,aAAgB,GAAA,EAAA;AAAA,IAChB,GAAG;AAAA,MACD,YAAa,CAAA;AAAA,IACf,MAAA;AAAA,IACA,MAAA;AAAA,IACA,IAAA,EAAM,uCAAuC,MAAM,CAAA;AAAA,IACnD,KAAO,EAAA;AAAA,GACR,CAAA;AAGD,EAAA,MAAM,YAAe,GAAA,iBAAA,CAAkB,OAAS,EAAA,MAAA,EAAQ,aAAa,CAAA;AAErE,EAAA,MAAM,eACJ,YAAgB,IAAA,KAAA,KAAU,MACxB,mBAAA,GAAA,CAAC,WAAQ,OAAS,EAAA,YAAA,EAAc,SAAU,EAAA,OAAA,EACxC,8BAAC,IAAK,EAAA,EAAA,SAAA,EAAW,GAAG,SAAS,CAAA,KAAA,CAAA,EAAS,MAAK,OAAQ,EAAA,CAAA,EACrD,CACE,GAAA,cAAA,IAAkB,UAAU,MAC9B,mBAAA,GAAA,CAAC,OAAQ,EAAA,EAAA,OAAA,EAAS,gBAAgB,SAAU,EAAA,OAAA,EAC1C,QAAC,kBAAA,GAAA,CAAA,IAAA,EAAA,EAAK,WAAW,CAAG,EAAA,SAAS,SAAS,IAAK,EAAA,OAAA,EAAQ,GACrD,CACE,GAAA,KAAA,CAAA;AAEN,EAAA,MAAM,iBACJ,YAAgB,IAAA,KAAA,KAAU,OACxB,mBAAA,GAAA,CAAC,WAAQ,OAAS,EAAA,YAAA,EAAc,SAAU,EAAA,OAAA,EACxC,8BAAC,IAAK,EAAA,EAAA,SAAA,EAAW,GAAG,SAAS,CAAA,KAAA,CAAA,EAAS,MAAK,OAAQ,EAAA,CAAA,EACrD,CACE,GAAA,cAAA,IAAkB,UAAU,OAC9B,mBAAA,GAAA,CAAC,OAAQ,EAAA,EAAA,OAAA,EAAS,gBAAgB,SAAU,EAAA,MAAA,EAC1C,QAAC,kBAAA,GAAA,CAAA,IAAA,EAAA,EAAK,WAAW,CAAG,EAAA,SAAS,SAAS,IAAK,EAAA,OAAA,EAAQ,GACrD,CACE,GAAA,KAAA,CAAA;AAEN,EACE,uBAAA,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACE,GAAG,SAAA;AAAA,MACJ,QAAQ,EAAA,IAAA;AAAA,MACR,SAAA,EAAW,GAAG,SAAW,EAAA;AAAA,QACvB,CAAC,CAAA,EAAG,SAAS,CAAA,OAAA,CAAS,GAAG,0BAA+B,KAAA,IAAA;AAAA,QACxD,CAAC,CAAA,EAAG,SAAS,CAAA,MAAA,CAAQ,GAAG,cAAmB,KAAA,KAAA,CAAA;AAAA,QAC3C,CAAC,CAAA,EAAG,SAAS,CAAA,QAAA,CAAU,GAAG,YAAiB,KAAA,KAAA,CAAA;AAAA,QAC3C,UAAY,EAAA;AAAA,OACb,CAAA;AAAA,MACD,YAAA;AAAA,MACA;AAAA;AAAA,GACF;AAEJ;AAEA,iBAAkB,CAAA,YAAA,EAAc,WAAW,eAAiB,EAAA;AAAA,EAC1D,aAAe,EAAA;AACjB,CAAC,CAAA;;;;"}

package/esm/cell-renderers/input-cell/useInputCell.js

@@ -0,0 +1,209 @@
+import { getTypedValue, isRpcSuccess, isRpcError, DataValidationError, dispatchCustomEvent } from '@vuu-ui/vuu-utils';
+import { useState, useRef, useMemo, useCallback } from 'react';
+
+const stringValueOf = (value) => value?.toString() ?? "";
+const useInputCell = ({
+  column,
+  value,
+  onEdit,
+  type = "string"
+}) => {
+  const [editState, setEditState] = useState({
+    editing: false,
+    value: stringValueOf(value)
+  });
+  const initialValueRef = useRef(value?.toString() ?? "");
+  const isDirtyRef = useRef(false);
+  useMemo(() => {
+    if (initialValueRef.current !== value?.toString()) {
+      initialValueRef.current = stringValueOf(value);
+      setEditState((editState2) => ({
+        ...editState2,
+        message: void 0,
+        value: stringValueOf(value)
+      }));
+    }
+  }, [value]);
+  const commit = useCallback(async () => {
+    const { value: value2 } = editState;
+    const result = column.clientSideEditValidationCheck?.(value2, "*");
+    if (result?.ok === false) {
+      setEditState((state) => ({
+        ...state,
+        message: result?.messages?.join(",")
+      }));
+      return false;
+    } else {
+      const { current: initialValue } = initialValueRef;
+      const previousValue = getTypedValue(initialValue, type);
+      try {
+        const typedValue = getTypedValue(value2, type, true);
+        const response = await onEdit?.(
+          {
+            editType: "commit",
+            isValid: true,
+            previousValue,
+            value: typedValue
+          },
+          "commit"
+        );
+        if (isRpcSuccess(response)) {
+          isDirtyRef.current = false;
+          setEditState(({ previousValue: previousValue2, value: value3 }) => ({
+            editing: false,
+            previousValue: previousValue2 === value3 ? void 0 : previousValue2 === void 0 ? initialValue : previousValue2,
+            value: value3
+          }));
+        } else if (isRpcError(response)) {
+          setEditState((state) => ({
+            ...state,
+            message: response.errorMessage
+          }));
+          return false;
+        }
+        initialValueRef.current = value2;
+        return true;
+      } catch (e) {
+        if (e instanceof DataValidationError) {
+          const { actualType, expectedType, message } = e;
+          if (column) {
+            const { name, label = name } = column;
+            const message2 = `${label} is a ${expectedType} value, data entered is ${actualType} `;
+            setEditState((state) => ({
+              ...state,
+              message: message2
+            }));
+            onEdit?.(
+              {
+                editType: "commit",
+                isValid: false,
+                previousValue,
+                value: value2
+              },
+              "commit"
+            );
+          } else {
+            setEditState((state) => ({
+              ...state,
+              message
+            }));
+          }
+        }
+      }
+    }
+    return false;
+  }, [column, editState, onEdit, type]);
+  const toggleActivation = useCallback(
+    async (input, cancel = false) => {
+      if (editState.editing) {
+        if (isDirtyRef.current) {
+          if (cancel) {
+            const { value: previousValue } = editState;
+            isDirtyRef.current = false;
+            setEditState({
+              editing: false,
+              value: initialValueRef.current,
+              message: void 0
+            });
+            onEdit?.(
+              {
+                editType: "cancel",
+                isValid: true,
+                previousValue,
+                value: getTypedValue(initialValueRef.current, type, true)
+              },
+              "commit"
+            );
+          } else {
+            const commitSuccessful = await commit();
+            if (commitSuccessful) {
+              setEditState((editState2) => ({ ...editState2, editing: false }));
+              dispatchCustomEvent(input, "vuu-commit");
+            }
+          }
+        } else {
+          setEditState((editState2) => ({ ...editState2, editing: false }));
+        }
+      } else if (!cancel) {
+        setEditState((editState2) => ({ ...editState2, editing: true }));
+        input.select();
+      }
+    },
+    [commit, editState, onEdit]
+  );
+  const handleKeyDown = useCallback(
+    async (evt) => {
+      const { key, target } = evt;
+      const input = target;
+      if (key === "Enter") {
+        toggleActivation(input);
+      } else if (key === "ArrowRight" || key === "ArrowLeft" || key === "ArrowUp" || key === "ArrowDown") {
+        if (editState.editing) {
+          evt.stopPropagation();
+        }
+      } else if (evt.key === "Escape") {
+        toggleActivation(input, true);
+      }
+    },
+    [editState, toggleActivation]
+  );
+  const handleFocus = useCallback(
+    (e) => {
+      const input = e.target;
+      const source = e.relatedTarget;
+      if (source?.classList.contains("vuuTableCell") && source.contains(input)) {
+        toggleActivation(input);
+      }
+    },
+    [toggleActivation]
+  );
+  const handleBlur = useCallback(async () => {
+    if (editState.editing) {
+      if (isDirtyRef.current) {
+        const commitSuccessful = await commit();
+        console.log({ commitSuccessful });
+      }
+      setEditState((editState2) => ({ ...editState2, editing: false }));
+    }
+  }, [commit, editState]);
+  const handleChange = useCallback(
+    (evt) => {
+      const { value: value2 } = evt.target;
+      isDirtyRef.current = value2 !== initialValueRef.current;
+      const result = column.clientSideEditValidationCheck?.(value2, "change");
+      setEditState({ editing: true, value: value2 });
+      onEdit?.(
+        {
+          editType: "change",
+          isValid: result?.ok !== false,
+          previousValue: initialValueRef.current,
+          value: value2
+        },
+        "change"
+      );
+      if (result?.ok === false) {
+        setEditState({
+          editing: true,
+          value: value2,
+          message: result.messages?.join(",")
+        });
+      }
+    },
+    [column, onEdit]
+  );
+  return {
+    editing: editState.editing,
+    inputProps: {
+      onBlur: handleBlur,
+      onFocus: handleFocus,
+      onKeyDown: handleKeyDown
+    },
+    onChange: handleChange,
+    previousValue: editState.previousValue,
+    value: editState.value,
+    warningMessage: editState.message
+  };
+};
+
+export { useInputCell };
+//# sourceMappingURL=useInputCell.js.map