@vuu-ui/vuu-table 2.1.19-beta.1 → 2.1.19-beta.2

package/src/Table.mjs

@@ -0,0 +1,297 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useForkRef } from "@salt-ds/core";
+import { useComponentCssInjection } from "@salt-ds/styles";
+import { useWindow } from "@salt-ds/window";
+import { TableProvider } from "@vuu-ui/vuu-table-extras";
+import { MeasuredContainer, reduceSizeHeight } from "@vuu-ui/vuu-ui-controls";
+import { lowerCase, useId } from "@vuu-ui/vuu-utils";
+import clsx from "clsx";
+import { forwardRef, useCallback, useMemo, useRef, useState } from "react";
+import { Row as external_Row_mjs_Row } from "./Row.mjs";
+import { PaginationControl } from "./pagination/index.mjs";
+import { TableHeader } from "./table-header/index.mjs";
+import { useMeasuredHeight } from "./useMeasuredHeight.mjs";
+import { useTable } from "./useTable.mjs";
+import Table_0 from "./Table.css";
+const classBase = "vuuTable";
+const Table_RowProxy = /*#__PURE__*/ forwardRef(function({ className = "vuuTableRow", height }, forwardedRef) {
+    return /*#__PURE__*/ jsx("div", {
+        "aria-hidden": true,
+        className: clsx(className, "vuuRowProxy"),
+        ref: forwardedRef,
+        style: {
+            height
+        }
+    });
+});
+const TableCore = ({ EmptyDisplay, HeaderCell, Row = external_Row_mjs_Row, allowCellBlockSelection, allowDragColumnHeader = true, allowDragDrop, allowSelectAll, allowSelectCheckboxRow, autoSelectFirstRow, autoSelectRowKey, config, containerRef, customHeader, dataSource, disableFocus = false, groupToggleTarget, highlightedIndex: highlightedIndexProp, id: idProp, lowerCaseSearchPattern, navigationStyle = "cell", onConfigChange, onDragStart, onDrop, onHighlight, onRowClick: onRowClickProp, onSelect, onSelectCellBlock, onSelectionChange, renderBufferSize = 0, revealSelected, rowActionHandlers, rowHeight, scrollingApiRef, selectionModel = "extended", showColumnHeaders = true, showColumnHeaderMenus = true, showPaginationControls, size })=>{
+    const id = useId(idProp);
+    const { allRowsSelected, cellBlock, columns, dataRows, draggableRow, editSessionInProgress, focusCellPlaceholderKeyDown, focusCellPlaceholderRef, getRowOffset, handleColumnAction, headerState: { height: headerHeight, count: headerCount }, headings, highlightedIndex, onCheckBoxColumnHeaderClick, onHeaderHeightMeasured, onMoveColumn, onMoveGroupColumn, onRemoveGroupColumn, onResizeColumn, onRowClick, onSortColumn, onToggleGroup, rowClassNameGenerator, scrollProps, tableAttributes, tableBodyRef, tableConfig, viewportMeasurements, ...tableProps } = useTable({
+        allowCellBlockSelection,
+        allowDragDrop,
+        allowSelectCheckboxRow,
+        autoSelectFirstRow,
+        autoSelectRowKey,
+        config,
+        containerRef,
+        dataSource,
+        disableFocus,
+        highlightedIndex: highlightedIndexProp,
+        id,
+        navigationStyle,
+        onConfigChange,
+        onDragStart,
+        onDrop,
+        onHighlight,
+        onRowClick: onRowClickProp,
+        onSelect,
+        onSelectCellBlock,
+        onSelectionChange,
+        renderBufferSize,
+        revealSelected,
+        rowHeight,
+        scrollingApiRef,
+        selectionModel,
+        showColumnHeaders,
+        showPaginationControls,
+        size
+    });
+    const { selectionBookendWidth = 4 } = config;
+    const contentContainerClassName = clsx(`${classBase}-contentContainer`, {
+        [`${classBase}-colLines`]: tableAttributes.columnSeparators,
+        [`${classBase}-rowLines`]: tableAttributes.rowSeparators,
+        [`${classBase}-zebra`]: tableAttributes.zebraStripes
+    });
+    const cssScrollbarSize = {
+        "--horizontal-scrollbar-height": `${viewportMeasurements.horizontalScrollbarHeight}px`,
+        "--vertical-scrollbar-width": `${viewportMeasurements.verticalScrollbarWidth}px`
+    };
+    const cssVariables = {
+        ...cssScrollbarSize,
+        "--content-height": `${viewportMeasurements.contentHeight}px`,
+        "--content-width": `${viewportMeasurements.contentWidth}px`,
+        "--pinned-width-left": `${viewportMeasurements.pinnedWidthLeft}px`,
+        "--pinned-width-right": `${viewportMeasurements.pinnedWidthRight}px`,
+        "--total-header-height": `${headerHeight}px`,
+        "--viewport-body-height": `${viewportMeasurements.viewportBodyHeight}px`,
+        "--table-selection-bookend-width": `${selectionBookendWidth}px`
+    };
+    const headersReady = false === showColumnHeaders || headerHeight > 0;
+    const readyToRenderTableBody = headersReady && dataRows.length > 0;
+    return /*#__PURE__*/ jsxs(TableProvider, {
+        dataSource: dataSource,
+        menuActionHandler: handleColumnAction,
+        rowActionHandlers: rowActionHandlers,
+        children: [
+            true !== showPaginationControls ? /*#__PURE__*/ jsx("div", {
+                className: `${classBase}-scrollbarContainer`,
+                ref: scrollProps.scrollbarContainerRef,
+                style: cssVariables,
+                tabIndex: -1,
+                children: /*#__PURE__*/ jsx("div", {
+                    className: `${classBase}-scrollbarContent`
+                })
+            }) : null,
+            0 === dataSource.size && EmptyDisplay ? /*#__PURE__*/ jsxs("div", {
+                className: `${classBase}-emptyDisplay`,
+                children: [
+                    /*#__PURE__*/ jsx(EmptyDisplay, {}),
+                    " "
+                ]
+            }) : null,
+            /*#__PURE__*/ jsx("div", {
+                className: contentContainerClassName,
+                ref: scrollProps.contentContainerRef,
+                style: cssVariables,
+                children: /*#__PURE__*/ jsxs("div", {
+                    ...tableProps,
+                    className: clsx(`${classBase}-table`, {
+                        [`${classBase}-editing`]: editSessionInProgress
+                    }),
+                    role: "table",
+                    tabIndex: disableFocus ? void 0 : -1,
+                    children: [
+                        showColumnHeaders ? /*#__PURE__*/ jsx(TableHeader, {
+                            HeaderCell: HeaderCell,
+                            allowDragColumnHeader: allowDragColumnHeader,
+                            allowSelectAll: allowSelectAll && "checkbox-disabled" !== selectionModel,
+                            allRowsSelected: allRowsSelected,
+                            columns: columns,
+                            customHeader: customHeader,
+                            headings: headings,
+                            onCheckBoxColumnHeaderClick: onCheckBoxColumnHeaderClick,
+                            onHeightMeasured: onHeaderHeightMeasured,
+                            onMoveColumn: onMoveColumn,
+                            onMoveGroupColumn: onMoveGroupColumn,
+                            onRemoveGroupColumn: onRemoveGroupColumn,
+                            onResizeColumn: onResizeColumn,
+                            onSortColumn: onSortColumn,
+                            showBookends: selectionBookendWidth > 0,
+                            showColumnHeaderMenus: showColumnHeaderMenus,
+                            tableConfig: tableConfig,
+                            tableId: id,
+                            virtualColSpan: scrollProps.virtualColSpan
+                        }) : null,
+                        readyToRenderTableBody ? /*#__PURE__*/ jsxs("div", {
+                            className: `${classBase}-body`,
+                            ref: tableBodyRef,
+                            children: [
+                                dataRows.map((dataRow)=>{
+                                    const ariaRowIndex = dataRow.index + headerCount + 1;
+                                    return /*#__PURE__*/ jsx(Row, {
+                                        "aria-rowindex": ariaRowIndex,
+                                        classNameGenerator: rowClassNameGenerator,
+                                        columns: scrollProps.columnsWithinViewport,
+                                        "data-first-row": 0 === dataRow.index ? "true" : void 0,
+                                        dataRow: dataRow,
+                                        groupToggleTarget: groupToggleTarget,
+                                        highlighted: highlightedIndex === ariaRowIndex,
+                                        onClick: onRowClick,
+                                        offset: showPaginationControls ? 0 : getRowOffset(dataRow),
+                                        onToggleGroup: onToggleGroup,
+                                        showBookends: selectionBookendWidth > 0,
+                                        searchPattern: lowerCaseSearchPattern,
+                                        virtualColSpan: scrollProps.virtualColSpan,
+                                        zebraStripes: tableAttributes.zebraStripes
+                                    }, dataRow.renderIndex);
+                                }),
+                                /*#__PURE__*/ jsx("div", {
+                                    "aria-hidden": true,
+                                    className: `${classBase}-focusCellPlaceholder`,
+                                    onKeyDown: focusCellPlaceholderKeyDown,
+                                    ref: focusCellPlaceholderRef,
+                                    tabIndex: -1
+                                }),
+                                cellBlock
+                            ]
+                        }) : null
+                    ]
+                })
+            }),
+            /*#__PURE__*/ jsx("div", {
+                className: `${classBase}-scrollbarFiller`,
+                style: cssScrollbarSize
+            }),
+            draggableRow
+        ]
+    });
+};
+const Table_Table = /*#__PURE__*/ forwardRef(function({ EmptyDisplay, HeaderCell, Row, allowCellBlockSelection, allowDragColumnHeader, allowDragDrop, allowSelectAll, allowSelectCheckboxRow, autoSelectFirstRow, autoSelectRowKey, className: classNameProp, config, customHeader, dataSource, disableFocus, groupToggleTarget, colHeaderRowHeight: colHeaderRowHeightProp, height, highlightedIndex, id, maxViewportRowLimit, navigationStyle, onAvailableColumnsChange, onConfigChange, onDragStart, onDrop, onHighlight, onRowClick, onSelect, onSelectCellBlock, onSelectionChange, renderBufferSize, revealSelected, resizeStrategy, rowActionHandlers, rowHeight: rowHeightProp, rowSelectionBorder, scrollingApiRef, searchPattern = "", selectionModel, showColumnHeaders, showColumnHeaderMenus, showPaginationControls, style: styleProp, viewportRowLimit, width, ...htmlAttributes }, forwardedRef) {
+    const targetWindow = useWindow();
+    useComponentCssInjection({
+        testId: "vuu-table",
+        css: Table_0,
+        window: targetWindow
+    });
+    const containerRef = useRef(null);
+    const [size, _setSize] = useState();
+    const { measuredHeight: rowHeight, measuredRef: rowRef } = useMeasuredHeight({
+        height: rowHeightProp
+    });
+    const { measuredHeight: footerHeight, measuredRef: footerRef } = useMeasuredHeight({});
+    const rowLimit = maxViewportRowLimit ?? viewportRowLimit;
+    if (void 0 === config) throw Error("vuu Table requires config prop. Minimum config is list of Column Descriptors");
+    if (void 0 === dataSource) throw Error("vuu Table requires dataSource prop");
+    if (showPaginationControls && void 0 !== renderBufferSize) console.warn("Table: When pagination controls are used, renderBufferSize is ignored");
+    if (rowLimit && height && rowHeightProp) {
+        console.warn("Table: when viewportRowLimit, rowHeight and height are used in combination, height is ignored");
+        height = rowLimit * rowHeightProp;
+    } else if (rowLimit && rowHeightProp) height = rowLimit * rowHeightProp;
+    else if (rowLimit) height = rowLimit * rowHeight;
+    const sizeRef = useRef(void 0);
+    const setSize = useCallback((size)=>{
+        if (viewportRowLimit && !rowHeight) sizeRef.current = size;
+        else if (size.height !== sizeRef.current?.height || size.width !== sizeRef.current?.width) _setSize(size);
+    }, [
+        rowHeight,
+        viewportRowLimit
+    ]);
+    useMemo(()=>{
+        if (sizeRef.current && rowHeight) {
+            const size = {
+                ...sizeRef.current,
+                height: rowHeight * viewportRowLimit
+            };
+            sizeRef.current = size;
+            _setSize(size);
+        }
+    }, [
+        rowHeight,
+        viewportRowLimit
+    ]);
+    return /*#__PURE__*/ jsxs(MeasuredContainer, {
+        ...htmlAttributes,
+        className: clsx(classBase, classNameProp, {
+            [`${classBase}-pagination`]: showPaginationControls,
+            [`${classBase}-rowSelection-bordered`]: rowSelectionBorder,
+            [`${classBase}-maxViewportRowLimit`]: maxViewportRowLimit,
+            [`${classBase}-viewportRowLimit`]: viewportRowLimit
+        }),
+        height: height,
+        id: id,
+        onResize: setSize,
+        ref: useForkRef(containerRef, forwardedRef),
+        resizeStrategy: resizeStrategy,
+        style: {
+            ...styleProp,
+            "--col-header-row-height-prop": "number" == typeof colHeaderRowHeightProp ? `${colHeaderRowHeightProp}px` : void 0,
+            "--row-height-prop": "number" == typeof rowHeightProp ? `${rowHeightProp}px` : void 0
+        },
+        width: width,
+        children: [
+            /*#__PURE__*/ jsx(Table_RowProxy, {
+                ref: rowRef,
+                height: rowHeightProp
+            }),
+            size && rowHeight && (footerHeight || true !== showPaginationControls) ? /*#__PURE__*/ jsx(TableCore, {
+                EmptyDisplay: EmptyDisplay,
+                HeaderCell: HeaderCell,
+                Row: Row,
+                allowCellBlockSelection: allowCellBlockSelection,
+                allowDragColumnHeader: allowDragColumnHeader,
+                allowDragDrop: allowDragDrop,
+                allowSelectAll: allowSelectAll,
+                allowSelectCheckboxRow: allowSelectCheckboxRow,
+                autoSelectFirstRow: autoSelectFirstRow,
+                autoSelectRowKey: autoSelectRowKey,
+                config: config,
+                containerRef: containerRef,
+                customHeader: customHeader,
+                dataSource: dataSource,
+                disableFocus: disableFocus,
+                groupToggleTarget: groupToggleTarget,
+                highlightedIndex: highlightedIndex,
+                id: id,
+                navigationStyle: navigationStyle,
+                onAvailableColumnsChange: onAvailableColumnsChange,
+                onConfigChange: onConfigChange,
+                onDragStart: onDragStart,
+                onDrop: onDrop,
+                onHighlight: onHighlight,
+                onRowClick: onRowClick,
+                onSelect: onSelect,
+                onSelectCellBlock: onSelectCellBlock,
+                onSelectionChange: onSelectionChange,
+                renderBufferSize: showPaginationControls ? 0 : Math.max(5, renderBufferSize ?? 0),
+                revealSelected: revealSelected,
+                rowActionHandlers: rowActionHandlers,
+                rowHeight: rowHeight,
+                scrollingApiRef: scrollingApiRef,
+                lowerCaseSearchPattern: lowerCase(searchPattern),
+                selectionModel: selectionModel,
+                showColumnHeaders: showColumnHeaders,
+                showColumnHeaderMenus: showColumnHeaderMenus,
+                showPaginationControls: showPaginationControls,
+                size: reduceSizeHeight(size, footerHeight)
+            }) : null,
+            showPaginationControls ? /*#__PURE__*/ jsx("div", {
+                className: `${classBase}-footer`,
+                ref: footerRef,
+                children: /*#__PURE__*/ jsx(PaginationControl, {
+                    dataSource: dataSource
+                })
+            }) : null
+        ]
+    });
+});
+export { Table_Table as Table };

package/src/VirtualColSpan.mjs

@@ -0,0 +1,12 @@
+import { jsx } from "react/jsx-runtime";
+import { memo } from "react";
+const VirtualColSpan_VirtualColSpan = /*#__PURE__*/ memo(function({ width }) {
+    return /*#__PURE__*/ jsx("div", {
+        className: "vuuVirtualColSpan",
+        style: {
+            display: "inline-block",
+            width
+        }
+    });
+});
+export { VirtualColSpan_VirtualColSpan as VirtualColSpan };

package/src/applyHighlighting.mjs

@@ -0,0 +1,28 @@
+import { jsx } from "react/jsx-runtime";
+const applyHighlighting = (value, pattern)=>{
+    if ("" === pattern) return value;
+    const lowercaseValue = value.toLowerCase();
+    let start = 0;
+    let end = lowercaseValue.indexOf(pattern);
+    if (-1 === end) return value;
+    const results = [];
+    while(-1 !== end){
+        results.push(value.slice(start, end));
+        start = end;
+        end = start + pattern.length;
+        results.push(/*#__PURE__*/ jsx("span", {
+            className: "vuuHighlight",
+            children: value.slice(start, end)
+        }, start));
+        start = end;
+        end = lowercaseValue.indexOf(pattern, start);
+        if (-1 === end && start < lowercaseValue.length) results.push(value.slice(start));
+    }
+    return /*#__PURE__*/ jsx("span", {
+        style: {
+            whiteSpace: "pre"
+        },
+        children: results
+    });
+};
+export { applyHighlighting };

package/src/bulk-edit/BulkEditPanel.css.js

@@ -0,0 +1,27 @@
+const css = `
+.vuuBulkEditPanel {
+  background-color: var(--salt-container-secondary-background);
+  flex-direction: column;
+  display: flex;
+
+  & .vuuTable {
+    --table-background: var(--salt-container-secondary-background);
+  }
+}
+
+.vuuBulkEditPanel-toolbar {
+  background: var(--salt-container-primary-background);
+  border: solid 1px var(--salt-separable-tertiary-borderColor);
+  border-radius: 2px;
+  height: 42px;
+  display: flex;
+}
+
+.vuuBulkEditPanel-table {
+  flex: auto;
+  align-items: center;
+}
+
+
+`;
+export default css;

package/src/bulk-edit/BulkEditPanel.mjs

@@ -0,0 +1,77 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useComponentCssInjection } from "@salt-ds/styles";
+import { useWindow } from "@salt-ds/window";
+import clsx from "clsx";
+import { useMemo } from "react";
+import { Table } from "../Table.mjs";
+import { ColumnCascadingUpdateEditor } from "./ColumnCascadingUpdateEditor.mjs";
+import { InsertNewRowEditor } from "./InsertNewRowEditor.mjs";
+import { useBulkEditPanel } from "./useBulkEditPanel.mjs";
+import BulkEditPanel from "./BulkEditPanel.css";
+const classBase = "vuuBulkEditPanel";
+const BulkEditPanel_BulkEditPanel = ({ className, columns, sessionDs, showColumnCascadingUpdateEditor = false, showInsertNewRowEditor = false, parentDs, style, width = 600, ...htmlAttributes })=>{
+    const targetWindow = useWindow();
+    useComponentCssInjection({
+        testId: "vuu-checkbox-cell",
+        css: BulkEditPanel,
+        window: targetWindow
+    });
+    const { onBulkChange, onRowChange, tableConfig } = useBulkEditPanel({
+        columns,
+        sessionDs
+    });
+    const bulkEditRow = useMemo(()=>{
+        if (showColumnCascadingUpdateEditor && showInsertNewRowEditor) return [
+            /*#__PURE__*/ jsx(InsertNewRowEditor, {
+                onBulkChange: onBulkChange,
+                onRowChange: onRowChange
+            }, 1),
+            /*#__PURE__*/ jsx(ColumnCascadingUpdateEditor, {
+                onBulkChange: onBulkChange,
+                onRowChange: onRowChange
+            }, 2)
+        ];
+        if (showColumnCascadingUpdateEditor) return /*#__PURE__*/ jsx(ColumnCascadingUpdateEditor, {
+            onBulkChange: onBulkChange,
+            onRowChange: onRowChange
+        });
+        if (showInsertNewRowEditor) return /*#__PURE__*/ jsx(ColumnCascadingUpdateEditor, {
+            onBulkChange: onBulkChange,
+            onRowChange: onRowChange
+        });
+    }, [
+        onBulkChange,
+        onRowChange,
+        showColumnCascadingUpdateEditor,
+        showInsertNewRowEditor
+    ]);
+    return /*#__PURE__*/ jsxs("div", {
+        ...htmlAttributes,
+        className: clsx(classBase, className),
+        style: {
+            ...style,
+            display: "flex",
+            flexDirection: "column"
+        },
+        children: [
+            /*#__PURE__*/ jsx("div", {
+                className: `${classBase}-toolbar`
+            }),
+            /*#__PURE__*/ jsx("div", {
+                className: `${classBase}-table`,
+                children: /*#__PURE__*/ jsx(Table, {
+                    allowDragColumnHeader: false,
+                    config: tableConfig,
+                    customHeader: bulkEditRow,
+                    dataSource: sessionDs,
+                    height: 380,
+                    width: width,
+                    showColumnHeaderMenus: false,
+                    selectionModel: "none",
+                    maxViewportRowLimit: 10
+                })
+            })
+        ]
+    });
+};
+export { BulkEditPanel_BulkEditPanel as BulkEditPanel };

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

@@ -0,0 +1,86 @@
+const css = `
+.vuuBulkEditRow {
+  --filter-borderColor: var(--salt-separable-secondary-borderColor);
+  --filter-color: var(--salt-content-primary-foreground-disabled);
+  --filter-padding: 1px 1px 1px 0;
+  --item-content-height: 22px;
+  height: var(--salt-size-base);
+
+  & .vuuBulkEditRowCell:has(input:focus) {
+    --filter-borderColor: transparent;
+    --item-content-height: 20px;
+    outline-offset: -2px;
+    outline-width: 2px;
+    outline-style: dotted;
+    outline-color: var(--salt-focused-outlineColor);
+    --filter-padding: 0 2px;
+    --saltInput-paddingLeft: 2px;
+
+    & .saltInput-input {
+      outline: none;
+    }
+
+    & .saltInput-focused {
+      border: none;
+      outline: none;
+    }
+
+    & .saltComboBox-focused {
+      outline: none;
+    }
+  }
+
+  & .vuuBulkEditRowCell:focus {
+    --filter-borderColor: transparent;
+    --item-content-height: 20px;
+    --filter-padding: 0 2px;
+    --saltInput-paddingLeft: 2px;
+  }
+
+  & .vuuBulkEditRowCell {
+    --saltInput-minHeight: var(--item-content-height);
+    --saltPillInput-minHeight: var(--item-content-height);
+    height: 100%;
+    padding: var(--filter-padding);
+    align-items: center;
+    display: inline-flex;
+
+    & .vuuTypeaheadInput {
+      border-style: solid;
+      border-color: var(--filter-borderColor);
+      height: var(--item-content-height);
+      border-width: 1px;
+      border-radius: 0;
+
+      & input::placeholder {
+        color: var(--filter-color);
+      }
+    }
+
+    & .saltInput-primary.vuuInput {
+      border-style: solid;
+      border-color: var(--filter-borderColor);
+      height: var(--item-content-height);
+      min-height: var(--item-content-height);
+      border-width: 1px;
+      border-radius: 0;
+
+      & input::placeholder {
+        color: var(--filter-color);
+      }
+    }
+  }
+
+  & .vuuBulkEditRow-virtualColSpan {
+    display: inline-block;
+  }
+}
+
+.vuuBulkEditRow:focus-within {
+  --filter-borderColor: var(--salt-separable-primary-borderColor);
+  --filter-color: var(--salt-content-primary-foreground);
+}
+
+
+`;
+export default css;

package/src/bulk-edit/ColumnCascadingUpdateEditor.mjs

@@ -0,0 +1,59 @@
+import { jsx, jsxs } 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 clsx from "clsx";
+import { VirtualColSpan } from "../VirtualColSpan.mjs";
+import { useHeaderProps } from "../table-header/index.mjs";
+import { useBulkEditRow } from "./useColumnCascadingEditor.mjs";
+import ColumnCascadingUpdateEditor from "./ColumnCascadingUpdateEditor.css";
+const classBase = "vuuBulkEditRow";
+const ColumnCascadingUpdateEditor_ColumnCascadingUpdateEditor = ({ ariaRole, onBulkChange, onRowChange, ...htmlAttributes })=>{
+    const targetWindow = useWindow();
+    useComponentCssInjection({
+        testId: "vuu-bulk-edit-row",
+        css: ColumnCascadingUpdateEditor,
+        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: onFocus,
+        onKeyDown: 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: clsx(`${classBase}Cell`, "vuuTableCell", {
+                        "vuuTableCell-right": "right" === column.align
+                    }),
+                    "data-field": column.name,
+                    role: "cell",
+                    style: {
+                        width: column.width
+                    },
+                    children: column.editable ? getDataItemEditControl({
+                        InputProps,
+                        dataDescriptor: column,
+                        errorMessage,
+                        onCommit
+                    }) : null
+                }, column.name);
+            })
+        ]
+    });
+};
+export { ColumnCascadingUpdateEditor_ColumnCascadingUpdateEditor as ColumnCascadingUpdateEditor };

package/src/bulk-edit/InsertNewRowEditor.css.js

@@ -0,0 +1,86 @@
+const css = `
+.vuuBulkEditRow {
+  --filter-borderColor: var(--salt-separable-secondary-borderColor);
+  --filter-color: var(--salt-content-primary-foreground-disabled);
+  --filter-padding: 1px 1px 1px 0;
+  --item-content-height: 22px;
+  height: var(--salt-size-base);
+
+  & .vuuBulkEditRowCell:has(input:focus) {
+    --filter-borderColor: transparent;
+    --item-content-height: 20px;
+    outline-offset: -2px;
+    outline-width: 2px;
+    outline-style: dotted;
+    outline-color: var(--salt-focused-outlineColor);
+    --filter-padding: 0 2px;
+    --saltInput-paddingLeft: 2px;
+
+    & .saltInput-input {
+      outline: none;
+    }
+
+    & .saltInput-focused {
+      border: none;
+      outline: none;
+    }
+
+    & .saltComboBox-focused {
+      outline: none;
+    }
+  }
+
+  & .vuuBulkEditRowCell:focus {
+    --filter-borderColor: transparent;
+    --item-content-height: 20px;
+    --filter-padding: 0 2px;
+    --saltInput-paddingLeft: 2px;
+  }
+
+  & .vuuBulkEditRowCell {
+    --saltInput-minHeight: var(--item-content-height);
+    --saltPillInput-minHeight: var(--item-content-height);
+    height: 100%;
+    padding: var(--filter-padding);
+    align-items: center;
+    display: inline-flex;
+
+    & .vuuTypeaheadInput {
+      border-style: solid;
+      border-color: var(--filter-borderColor);
+      height: var(--item-content-height);
+      border-width: 1px;
+      border-radius: 0;
+
+      & input::placeholder {
+        color: var(--filter-color);
+      }
+    }
+
+    & .saltInput-primary.vuuInput {
+      border-style: solid;
+      border-color: var(--filter-borderColor);
+      height: var(--item-content-height);
+      min-height: var(--item-content-height);
+      border-width: 1px;
+      border-radius: 0;
+
+      & input::placeholder {
+        color: var(--filter-color);
+      }
+    }
+  }
+
+  & .vuuBulkEditRow-virtualColSpan {
+    display: inline-block;
+  }
+}
+
+.vuuBulkEditRow:focus-within {
+  --filter-borderColor: var(--salt-separable-primary-borderColor);
+  --filter-color: var(--salt-content-primary-foreground);
+}
+
+
+`;
+export default css;