@vuu-ui/vuu-table 0.13.106 → 0.13.108

package/cjs/Row.js

@@ -116,7 +116,7 @@ const Row = react.memo(
         onClick: handleRowClick,
         style,
         children: [
-          showBookends ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: `${classBase}-selectionDecorator vuuStickyLeft` }) : null,
+          showBookends ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: `${classBase}-selectionDecorator vuuStickyLeft`, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "vuuTableRowBookend" }) }) : null,
           /* @__PURE__ */ jsxRuntime.jsx(VirtualColSpan.VirtualColSpan, { width: virtualColSpan }),
           columns.filter(vuuUtils.isNotHidden).map((column) => {
             const isGroup = vuuUtils.isGroupColumn(column);
@@ -135,7 +135,7 @@ const Row = react.memo(
               column.name
             );
           }),
-          showBookends ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: `${classBase}-selectionDecorator vuuStickyRight` }) : null
+          showBookends ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: `${classBase}-selectionDecorator vuuStickyRight`, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "vuuTableRowBookend" }) }) : null
         ]
       }
     );

package/cjs/Row.js.map

@@ -1 +1 @@
-{"version":3,"file":"Row.js","sources":["../../../packages/vuu-table/src/Row.tsx"],"sourcesContent":["import { RowProps, RuntimeColumnDescriptor } from \"@vuu-ui/vuu-table-types\";\nimport {\n  isGroupColumn,\n  isJsonColumn,\n  isJsonGroup,\n  isNotHidden,\n  metadataKeys,\n  queryClosest,\n} from \"@vuu-ui/vuu-utils\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport cx from \"clsx\";\nimport { MouseEvent, forwardRef, memo, useCallback } from \"react\";\nimport { TableCell, TableGroupCell } from \"./table-cell\";\n\nimport rowCss from \"./Row.css\";\nimport { VirtualColSpan } from \"./VirtualColSpan\";\n\nconst { COUNT, DEPTH, IDX, IS_EXPANDED, IS_LEAF, SELECTED } = metadataKeys;\nconst classBase = \"vuuTableRow\";\n\n// A dummy Table Row rendered once and not visible. We measure this to\n// determine height of Row(s) and monitor it for size changes (in\n// case of runtime density switch). This allows ListItem height to\n// be controlled purely through CSS.\nexport const RowProxy = forwardRef<HTMLDivElement, { height?: number }>(\n  function RowProxy({ height }, forwardedRef) {\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"vuu-table-row\",\n      css: rowCss,\n      window: targetWindow,\n    });\n\n    return (\n      <div\n        aria-hidden\n        className={cx(classBase, `${classBase}-proxy`)}\n        ref={forwardedRef}\n        style={{ height }}\n      />\n    );\n  },\n);\n\n// export const Row = memo(\nexport const Row = memo(\n  ({\n    className: classNameProp,\n    classNameGenerator,\n    columnMap,\n    columns,\n    groupToggleTarget = \"group-column\",\n    highlighted,\n    row,\n    offset,\n    onCellEdit,\n    onClick,\n    onDataEdited,\n    onToggleGroup,\n    searchPattern,\n    showBookends = true,\n    virtualColSpan = 0,\n    zebraStripes = false,\n    ...htmlAttributes\n  }: RowProps) => {\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"vuu-table-row\",\n      css: rowCss,\n      window: targetWindow,\n    });\n\n    const {\n      [COUNT]: childRowCount,\n      [DEPTH]: depth,\n      [IDX]: rowIndex,\n      [IS_EXPANDED]: isExpanded,\n      [IS_LEAF]: isLeaf,\n      [SELECTED]: isSelected,\n    } = row;\n\n    const handleRowClick = useCallback(\n      (evt: MouseEvent<HTMLDivElement>) => {\n        const rangeSelect = evt.shiftKey;\n        const keepExistingSelection = evt.ctrlKey || evt.metaKey; /* mac only */\n        onClick?.(evt, row, rangeSelect, keepExistingSelection);\n      },\n      [onClick, row],\n    );\n\n    const className = cx(\n      classBase,\n      classNameProp,\n      classNameGenerator?.(row, columnMap),\n      {\n        [`${classBase}-even`]: zebraStripes && rowIndex % 2 === 0,\n        [`${classBase}-highlighted`]: highlighted,\n      },\n    );\n\n    const canExpand = isLeaf === false && childRowCount > 0;\n    const ariaExpanded = isExpanded ? true : canExpand ? false : undefined;\n    const ariaLevel = isLeaf && depth === 1 ? undefined : depth;\n\n    // const style = { transform: `translate3d(0px, ${offset}px, 0px)` };\n    const style = { top: offset };\n\n    const handleGroupCellClick = useCallback(\n      (evt: MouseEvent, column: RuntimeColumnDescriptor) => {\n        if (isGroupColumn(column) || isJsonGroup(column, row, columnMap)) {\n          const toggleIconClicked =\n            queryClosest(evt.target, \".vuuToggleIconButton\") !== null;\n          if (groupToggleTarget === \"toggle-icon\") {\n            if (!toggleIconClicked) {\n              return;\n            }\n          }\n          if (toggleIconClicked) {\n            // prevent evt bubbling, will suppress selection hook.\n            // Clicking the toggle icon directly never triggers row selection\n            evt.stopPropagation();\n          }\n          onToggleGroup?.(row, column);\n        }\n      },\n      [columnMap, groupToggleTarget, onToggleGroup, row],\n    );\n\n    return (\n      <div\n        {...htmlAttributes}\n        aria-expanded={ariaExpanded}\n        aria-selected={isSelected ? \"true\" : undefined}\n        aria-level={ariaLevel}\n        role=\"row\"\n        className={className}\n        onClick={handleRowClick}\n        style={style}\n      >\n        {showBookends ? (\n          <span className={`${classBase}-selectionDecorator vuuStickyLeft`} />\n        ) : null}\n        <VirtualColSpan width={virtualColSpan} />\n        {columns.filter(isNotHidden).map((column) => {\n          const isGroup = isGroupColumn(column);\n          const isJsonCell = isJsonColumn(column);\n          const Cell = isGroup && !isJsonCell ? TableGroupCell : TableCell;\n\n          return (\n            <Cell\n              column={column}\n              columnMap={columnMap}\n              key={column.name}\n              onClick={isGroup || isJsonCell ? handleGroupCellClick : undefined}\n              onDataEdited={onDataEdited}\n              row={row}\n              searchPattern={searchPattern}\n            />\n          );\n        })}\n        {showBookends ? (\n          <span className={`${classBase}-selectionDecorator vuuStickyRight`} />\n        ) : null}\n      </div>\n    );\n  },\n);\nRow.displayName = \"Row\";\n"],"names":["metadataKeys","forwardRef","RowProxy","useWindow","useComponentCssInjection","rowCss","jsx","memo","useCallback","isGroupColumn","isJsonGroup","queryClosest","jsxs","VirtualColSpan","isNotHidden","isJsonColumn","TableGroupCell","TableCell"],"mappings":"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"}
+{"version":3,"file":"Row.js","sources":["../../../packages/vuu-table/src/Row.tsx"],"sourcesContent":["import { RowProps, RuntimeColumnDescriptor } from \"@vuu-ui/vuu-table-types\";\nimport {\n  isGroupColumn,\n  isJsonColumn,\n  isJsonGroup,\n  isNotHidden,\n  metadataKeys,\n  queryClosest,\n} from \"@vuu-ui/vuu-utils\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport cx from \"clsx\";\nimport { MouseEvent, forwardRef, memo, useCallback } from \"react\";\nimport { TableCell, TableGroupCell } from \"./table-cell\";\n\nimport rowCss from \"./Row.css\";\nimport { VirtualColSpan } from \"./VirtualColSpan\";\n\nconst { COUNT, DEPTH, IDX, IS_EXPANDED, IS_LEAF, SELECTED } = metadataKeys;\nconst classBase = \"vuuTableRow\";\n\n// A dummy Table Row rendered once and not visible. We measure this to\n// determine height of Row(s) and monitor it for size changes (in\n// case of runtime density switch). This allows ListItem height to\n// be controlled purely through CSS.\nexport const RowProxy = forwardRef<HTMLDivElement, { height?: number }>(\n  function RowProxy({ height }, forwardedRef) {\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"vuu-table-row\",\n      css: rowCss,\n      window: targetWindow,\n    });\n\n    return (\n      <div\n        aria-hidden\n        className={cx(classBase, `${classBase}-proxy`)}\n        ref={forwardedRef}\n        style={{ height }}\n      />\n    );\n  },\n);\n\n// export const Row = memo(\nexport const Row = memo(\n  ({\n    className: classNameProp,\n    classNameGenerator,\n    columnMap,\n    columns,\n    groupToggleTarget = \"group-column\",\n    highlighted,\n    row,\n    offset,\n    onCellEdit,\n    onClick,\n    onDataEdited,\n    onToggleGroup,\n    searchPattern,\n    showBookends = true,\n    virtualColSpan = 0,\n    zebraStripes = false,\n    ...htmlAttributes\n  }: RowProps) => {\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"vuu-table-row\",\n      css: rowCss,\n      window: targetWindow,\n    });\n\n    const {\n      [COUNT]: childRowCount,\n      [DEPTH]: depth,\n      [IDX]: rowIndex,\n      [IS_EXPANDED]: isExpanded,\n      [IS_LEAF]: isLeaf,\n      [SELECTED]: isSelected,\n    } = row;\n\n    const handleRowClick = useCallback(\n      (evt: MouseEvent<HTMLDivElement>) => {\n        const rangeSelect = evt.shiftKey;\n        const keepExistingSelection = evt.ctrlKey || evt.metaKey; /* mac only */\n        onClick?.(evt, row, rangeSelect, keepExistingSelection);\n      },\n      [onClick, row],\n    );\n\n    const className = cx(\n      classBase,\n      classNameProp,\n      classNameGenerator?.(row, columnMap),\n      {\n        [`${classBase}-even`]: zebraStripes && rowIndex % 2 === 0,\n        [`${classBase}-highlighted`]: highlighted,\n      },\n    );\n\n    const canExpand = isLeaf === false && childRowCount > 0;\n    const ariaExpanded = isExpanded ? true : canExpand ? false : undefined;\n    const ariaLevel = isLeaf && depth === 1 ? undefined : depth;\n\n    // const style = { transform: `translate3d(0px, ${offset}px, 0px)` };\n    const style = { top: offset };\n\n    const handleGroupCellClick = useCallback(\n      (evt: MouseEvent, column: RuntimeColumnDescriptor) => {\n        if (isGroupColumn(column) || isJsonGroup(column, row, columnMap)) {\n          const toggleIconClicked =\n            queryClosest(evt.target, \".vuuToggleIconButton\") !== null;\n          if (groupToggleTarget === \"toggle-icon\") {\n            if (!toggleIconClicked) {\n              return;\n            }\n          }\n          if (toggleIconClicked) {\n            // prevent evt bubbling, will suppress selection hook.\n            // Clicking the toggle icon directly never triggers row selection\n            evt.stopPropagation();\n          }\n          onToggleGroup?.(row, column);\n        }\n      },\n      [columnMap, groupToggleTarget, onToggleGroup, row],\n    );\n\n    return (\n      <div\n        {...htmlAttributes}\n        aria-expanded={ariaExpanded}\n        aria-selected={isSelected ? \"true\" : undefined}\n        aria-level={ariaLevel}\n        role=\"row\"\n        className={className}\n        onClick={handleRowClick}\n        style={style}\n      >\n        {showBookends ? (\n          <div className={`${classBase}-selectionDecorator vuuStickyLeft`}>\n            <div className=\"vuuTableRowBookend\" />\n          </div>\n        ) : null}\n        <VirtualColSpan width={virtualColSpan} />\n        {columns.filter(isNotHidden).map((column) => {\n          const isGroup = isGroupColumn(column);\n          const isJsonCell = isJsonColumn(column);\n          const Cell = isGroup && !isJsonCell ? TableGroupCell : TableCell;\n\n          return (\n            <Cell\n              column={column}\n              columnMap={columnMap}\n              key={column.name}\n              onClick={isGroup || isJsonCell ? handleGroupCellClick : undefined}\n              onDataEdited={onDataEdited}\n              row={row}\n              searchPattern={searchPattern}\n            />\n          );\n        })}\n        {showBookends ? (\n          <div className={`${classBase}-selectionDecorator vuuStickyRight`}>\n            <div className=\"vuuTableRowBookend\" />\n          </div>\n        ) : null}\n      </div>\n    );\n  },\n);\nRow.displayName = \"Row\";\n"],"names":["metadataKeys","forwardRef","RowProxy","useWindow","useComponentCssInjection","rowCss","jsx","memo","useCallback","isGroupColumn","isJsonGroup","queryClosest","jsxs","VirtualColSpan","isNotHidden","isJsonColumn","TableGroupCell","TableCell"],"mappings":"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"}

package/cjs/Table.css.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var tableCss = ".vuuTable {\n  --vuu-table-footer-height: 0px;\n  --vuu-table-cell-outlineWidth: 1px;\n  --table-height: var(--measured-px-height);\n  --table-width: var(--measured-px-width);\n  --vuu-table-embedded-control-height: calc(var(--row-height) - 3px);\n  --vuu-table-col-header-height: var(--vuuTableHeaderCell-height, 25px);\n  --vuu-table-col-heading-height: 25px;\n  --columnResizer-color: transparent;\n  --row-height: var(\n    --row-height-prop,\n    var(--vuu-table-row-height, var(--salt-size-base))\n  );\n\n  --cell-borderColor: transparent;\n  --row-borderColor: var(--row-background);\n  --table-background: var(--salt-container-primary-background);\n\n  background: var(--table-background);\n  font-family: var(\n    --vuuTable-fontFamily,\n    var(--salt-typography-fontFamily, sans-serif)\n  );\n  font-size: var(--vuuTable-fontSize, var(--salt-text-fontSize, 12px));\n  position: relative;\n  user-select: none;\n\n  &.vuuTable-viewportRowLimit {\n    height: fit-content;\n    /*  With a viewportRowLimit, table is content sized, not container sized. */\n    .vuuTable-contentContainer {\n      height: calc(var(--measured-px-height) + var(--total-header-height));\n    }\n    .vuuTable-scrollbarContainer {\n      height: calc(\n        var(--measured-px-height) + var(--horizontal-scrollbar-height)\n      );\n    }\n    .vuuTable-scrollbarFiller {\n      height: var(--horizontal-scrollbar-height);\n    }\n  }\n\n  &.vuuTable-maxViewportRowLimit {\n    /*  With a maxVviewportRowLimit, table is content sized, not container sized. */\n    height: fit-content;\n    padding-bottom: var(--horizontal-scrollbar-height);\n\n    .vuuTable-contentContainer {\n      height: min(\n        calc(var(--measured-px-height) + var(--total-header-height)),\n        calc(var(--content-height) + var(--total-header-height))\n      );\n    }\n    .vuuTable-scrollbarContainer {\n      height: min(\n        calc(var(--measured-px-height) + var(--horizontal-scrollbar-height)),\n        calc(var(--content-height) + var(--horizontal-scrollbar-height))\n      );\n    }\n\n    .vuuTable-scrollbarFiller {\n      height: var(--horizontal-scrollbar-height);\n    }\n  }\n}\n\n.vuuTable-zebra {\n  --row-background-even: var(--salt-palette-neutral-secondary-background);\n}\n\n.vuuTable-colLines {\n  --cell-borderColor: var(--salt-separable-tertiary-borderColor);\n}\n\n.vuuTable-rowLines {\n  --row-borderColor: var(--salt-separable-tertiary-borderColor);\n}\n\n.vuuTable-scrollbarContainer {\n  border-bottom: none !important;\n  border-top: none !important;\n  height: var(--viewport-body-height);\n  left: 0px;\n  overflow: auto;\n  position: absolute;\n  top: var(--total-header-height);\n  width: var(--table-width);\n}\n\n.vuuTable-scrollbarContainer::-webkit-scrollbar {\n  width: 10px;\n}\n\n.vuuTable-scrollbarContainer::-webkit-scrollbar:horizontal {\n  height: 10px;\n}\n\n.vuuTable-scrollbarContainer::-webkit-scrollbar-track {\n  background-color: transparent;\n}\n.vuuTable-scrollbarContainer::-webkit-scrollbar-thumb {\n  background-clip: padding-box;\n  border-radius: 10px;\n  border: 2px solid rgba(0, 0, 0, 0);\n  background-color: var(--vuu-color-gray-30);\n}\n\n.vuuTable-scrollbarContent {\n  height: calc(var(--content-height) + var(--horizontal-scrollbar-height));\n  position: absolute;\n  width: var(--content-width);\n}\n\n.vuuTable-contentContainer {\n  background: var(--table-background);\n  height: calc(\n    100% - var(--horizontal-scrollbar-height) - var(--vuu-table-footer-height)\n  );\n  position: relative;\n  overflow: auto;\n  overscroll-behavior: none;\n  width: calc(var(--table-width) - var(--vertical-scrollbar-width));\n}\n\n.vuuTable-contentContainer::-webkit-scrollbar {\n  display: none;\n}\n\n.vuuTable-table {\n  border: none;\n  border-collapse: separate;\n  border-spacing: 0;\n  left: 0;\n  margin: 0;\n  position: absolute;\n  top: 0;\n  table-layout: fixed;\n  width: var(--content-width);\n}\n\n.vuuTable-body {\n  height: var(--content-height);\n  position: relative;\n}\n\n.vuuTable-focusCellPlaceholder {\n  height: var(--row-height);\n  position: absolute;\n  width: 50px;\n  z-index: -1;\n}\n\n.vuuPinLeft,\n.vuuPinRight {\n  background-color: inherit;\n  position: sticky;\n  z-index: 1;\n}\n\n.vuuTable-col-headings {\n  background-color: var(\n    --vuuTableColHeadings-background,\n    var(--table-background)\n  );\n  padding: 0 var(--vuuTableRow-selectionDecorator-width, 0);\n  position: sticky;\n  top: 0;\n  /* ensure header row sits atop everything else when scrolling down */\n  z-index: 1;\n}\n\n.vuuTable-col-headings:hover {\n  --columnResizer-height: var(--vuu-table-col-header-height);\n  --columnResizer-color: var(--salt-separable-tertiary-borderColor);\n}\n\n.vuuTable-heading {\n  height: var(--vuu-table-col-heading-height);\n}\n\n.vuuTable-col-headers {\n  background-color: var(\n    --vuuTableColHeadings-background,\n    var(--vuuTableColHeadings-background)\n  );\n  border-bottom: solid 1px\n    var(\n      --vuuTableColHeaders-borderColor,\n      var(--salt-separable-secondary-borderColor)\n    );\n  color: var(--salt-content-secondary-foreground);\n  height: var(--vuu-table-col-header-height);\n  white-space: nowrap;\n\n  .vuuDraggable-spacer {\n    border-bottom: solid 1px #ccc;\n    display: var(--vuuDraggable-display, inline-block);\n    height: var(--vuu-table-col-header-height);\n  }\n}\n\n.sizer-cell {\n  border: none !important;\n  height: 0px;\n}\n\n.vuuDraggable-vuuTable {\n  --cell-borderColor: transparent;\n  --vuu-table-col-header-height: var(--vuuTableHeaderCell-height, 25px);\n  --vuuTableHeaderCell-background: var(--salt-container-secondary-background);\n}\n.vuuDraggable-vuuTable {\n  --row-height: 25px;\n}\n\n.vuuTable-pagination {\n  --vuu-table-footer-height: 32px;\n  .vuuTable-col-headings {\n    position: relative;\n  }\n\n  .vuuTable-body {\n    height: calc(var(--content-height) - var(--total-header-height));\n    position: relative;\n  }\n\n  .vuuTableRow {\n    position: relative;\n    top: auto;\n  }\n}\n\n.vuuTable-footer {\n  align-items: center;\n  display: flex;\n  height: var(--vuu-table-footer-height);\n  justify-content: flex-end;\n  position: absolute;\n  left: 0;\n  right: 0;\n  bottom: 0;\n}\n\n.vuuHighlight {\n  color: blue;\n}\n\n.DragColumn {\n  box-shadow: var(--salt-overlayable-shadow-drag);\n}\n\n@keyframes fadeIn {\n  0% {\n    opacity: 0;\n  }\n  90% {\n    opacity: 0;\n  }\n  100% {\n    opacity: 1;\n  }\n}\n\n.vuuTable-emptyDisplay {\n  animation: fadeIn .8s;\n  align-items: center;\n  display: flex;\n  inset:0;\n  justify-content: center;\n  position: absolute\n}\n\n.vuuTable-emptyDisplay ~ .vuuTable-contentContainer {\n  visibility: hidden;\n}";
+var tableCss = ".vuuTable {\n  --vuu-table-footer-height: 0px;\n  --vuu-table-cell-outlineWidth: 1px;\n  --table-height: var(--measured-px-height);\n  --table-width: var(--measured-px-width);\n  --vuu-table-embedded-control-height: calc(var(--row-height) - 3px);\n  --vuu-table-col-header-height: var(--vuuTableHeaderCell-height, 25px);\n  --vuu-table-col-heading-height: 25px;\n  --columnResizer-color: transparent;\n  --row-height: var(\n    --row-height-prop,\n    var(--vuu-table-row-height, var(--salt-size-base))\n  );\n\n  --cell-borderColor: transparent;\n  --row-borderColor: var(--row-background);\n  --table-background: var(--salt-container-primary-background);\n\n  background: var(--table-background);\n  font-family: var(\n    --vuuTable-fontFamily,\n    var(--salt-typography-fontFamily, sans-serif)\n  );\n  font-size: var(--vuuTable-fontSize, var(--salt-text-fontSize, 12px));\n  position: relative;\n  user-select: none;\n\n  &.vuuTable-viewportRowLimit {\n    height: fit-content;\n    /*  With a viewportRowLimit, table is content sized, not container sized. */\n    .vuuTable-contentContainer {\n      height: calc(var(--measured-px-height) + var(--total-header-height));\n    }\n    .vuuTable-scrollbarContainer {\n      height: calc(\n        var(--measured-px-height) + var(--horizontal-scrollbar-height)\n      );\n    }\n    .vuuTable-scrollbarFiller {\n      height: var(--horizontal-scrollbar-height);\n    }\n  }\n\n  &.vuuTable-maxViewportRowLimit {\n    /*  With a maxVviewportRowLimit, table is content sized, not container sized. */\n    height: fit-content;\n    padding-bottom: var(--horizontal-scrollbar-height);\n\n    .vuuTable-contentContainer {\n      height: min(\n        calc(var(--measured-px-height) + var(--total-header-height)),\n        calc(var(--content-height) + var(--total-header-height))\n      );\n    }\n    .vuuTable-scrollbarContainer {\n      height: min(\n        calc(var(--measured-px-height) + var(--horizontal-scrollbar-height)),\n        calc(var(--content-height) + var(--horizontal-scrollbar-height))\n      );\n    }\n\n    .vuuTable-scrollbarFiller {\n      height: var(--horizontal-scrollbar-height);\n    }\n  }\n}\n\n.vuuTable-zebra {\n  --row-background-even: var(--salt-palette-neutral-secondary-background);\n}\n\n.vuuTable-colLines {\n  --cell-borderColor: var(--salt-separable-tertiary-borderColor);\n}\n\n.vuuTable-rowLines {\n  --row-borderColor: var(--salt-separable-tertiary-borderColor);\n}\n\n.vuuTable-scrollbarContainer {\n  border-bottom: none !important;\n  border-top: none !important;\n  height: var(--viewport-body-height);\n  left: 0px;\n  overflow: auto;\n  position: absolute;\n  top: var(--total-header-height);\n  width: var(--table-width);\n}\n\n.vuuTable-scrollbarContainer::-webkit-scrollbar {\n  width: 10px;\n}\n\n.vuuTable-scrollbarContainer::-webkit-scrollbar:horizontal {\n  height: 10px;\n}\n\n.vuuTable-scrollbarContainer::-webkit-scrollbar-track {\n  background-color: transparent;\n}\n.vuuTable-scrollbarContainer::-webkit-scrollbar-thumb {\n  background-clip: padding-box;\n  border-radius: 10px;\n  border: 2px solid rgba(0, 0, 0, 0);\n  background-color: var(--vuu-color-gray-30);\n}\n\n.vuuTable-scrollbarContent {\n  height: calc(var(--content-height) + var(--horizontal-scrollbar-height));\n  position: absolute;\n  width: var(--content-width);\n}\n\n.vuuTable-contentContainer {\n  --table-content-container-width: calc(var(--table-width) - var(--vertical-scrollbar-width));\n  background: var(--table-background);\n  height: calc(\n    100% - var(--horizontal-scrollbar-height) - var(--vuu-table-footer-height)\n  );\n  position: relative;\n  overflow: auto;\n  overscroll-behavior: none;\n  width: var(--table-content-container-width);\n}\n\n.vuuTable-contentContainer::-webkit-scrollbar {\n  display: none;\n}\n\n.vuuTable-table {\n  border: none;\n  border-collapse: separate;\n  border-spacing: 0;\n  left: 0;\n  margin: 0;\n  position: absolute;\n  top: 0;\n  table-layout: fixed;\n  width: var(--content-width);\n}\n\n.vuuTable-body {\n  height: var(--content-height);\n  position: relative;\n}\n\n.vuuTable-focusCellPlaceholder {\n  height: var(--row-height);\n  position: absolute;\n  width: 50px;\n  z-index: -1;\n}\n\n.vuuPinLeft,\n.vuuPinRight {\n  background-color: inherit;\n  position: sticky;\n  z-index: 1;\n}\n\n.vuuTable-col-headings {\n  background-color: var(\n    --vuuTableColHeadings-background,\n    var(--table-background)\n  );\n  padding: 0 var(--vuuTableRow-selectionDecorator-width, 0);\n  position: sticky;\n  top: 0;\n  /* ensure header row sits atop everything else when scrolling down */\n  z-index: 1;\n}\n\n.vuuTable-col-headings:hover {\n  --columnResizer-height: var(--vuu-table-col-header-height);\n  --columnResizer-color: var(--salt-separable-tertiary-borderColor);\n}\n\n.vuuTable-heading {\n  height: var(--vuu-table-col-heading-height);\n}\n\n.vuuTable-col-headers {\n  background-color: var(\n    --vuuTableColHeadings-background,\n    var(--vuuTableColHeadings-background)\n  );\n  border-bottom: solid 1px\n    var(\n      --vuuTableColHeaders-borderColor,\n      var(--salt-separable-secondary-borderColor)\n    );\n  color: var(--salt-content-secondary-foreground);\n  height: var(--vuu-table-col-header-height);\n  white-space: nowrap;\n\n  .vuuDraggable-spacer {\n    border-bottom: solid 1px #ccc;\n    display: var(--vuuDraggable-display, inline-block);\n    height: var(--vuu-table-col-header-height);\n  }\n}\n\n.sizer-cell {\n  border: none !important;\n  height: 0px;\n}\n\n.vuuDraggable-vuuTable {\n  --cell-borderColor: transparent;\n  --vuu-table-col-header-height: var(--vuuTableHeaderCell-height, 25px);\n  --vuuTableHeaderCell-background: var(--salt-container-secondary-background);\n}\n.vuuDraggable-vuuTable {\n  --row-height: 25px;\n}\n\n.vuuTable-pagination {\n  --vuu-table-footer-height: 32px;\n  .vuuTable-col-headings {\n    position: relative;\n  }\n\n  .vuuTable-body {\n    height: calc(var(--content-height) - var(--total-header-height));\n    position: relative;\n  }\n\n  .vuuTableRow {\n    position: relative;\n    top: auto;\n  }\n}\n\n.vuuTable-footer {\n  align-items: center;\n  display: flex;\n  height: var(--vuu-table-footer-height);\n  justify-content: flex-end;\n  position: absolute;\n  left: 0;\n  right: 0;\n  bottom: 0;\n}\n\n.vuuHighlight {\n  color: blue;\n}\n\n.DragColumn {\n  box-shadow: var(--salt-overlayable-shadow-drag);\n}\n\n@keyframes fadeIn {\n  0% {\n    opacity: 0;\n  }\n  90% {\n    opacity: 0;\n  }\n  100% {\n    opacity: 1;\n  }\n}\n\n.vuuTable-emptyDisplay {\n  animation: fadeIn .8s;\n  align-items: center;\n  display: flex;\n  inset:0;\n  justify-content: center;\n  position: absolute\n}\n\n.vuuTable-emptyDisplay ~ .vuuTable-contentContainer {\n  visibility: hidden;\n}";
 
 module.exports = tableCss;
 //# sourceMappingURL=Table.css.js.map

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var bulkEditPanelCss = ".vuuBulkEditPanel {\n  background-color: var(--salt-container-secondary-background);\n  display: flex;\n  flex-direction: column;\n\n  .vuuTable {\n    --table-background: var(--salt-container-secondary-background);\n  }\n\n  .vuuTableCell-editable {\n    --vuuTableCell-padding: 0;\n  }\n}\n\n.vuuBulkEditPanel-toolbar {\n  background: var(--salt-container-primary-background);\n  border: solid 1px var(--salt-separable-tertiary-borderColor);\n  border-radius: 2px;\n  display: flex;\n  height: 42px;\n}\n\n.vuuBulkEditPanel-table {\n  align-items: center;\n  flex: 1 1 auto;\n}\n";
+var bulkEditPanelCss = ".vuuBulkEditPanel {\n  background-color: var(--salt-container-secondary-background);\n  display: flex;\n  flex-direction: column;\n\n  .vuuTable {\n    --table-background: var(--salt-container-secondary-background);\n  }\n\n}\n\n.vuuBulkEditPanel-toolbar {\n  background: var(--salt-container-primary-background);\n  border: solid 1px var(--salt-separable-tertiary-borderColor);\n  border-radius: 2px;\n  display: flex;\n  height: 42px;\n}\n\n.vuuBulkEditPanel-table {\n  align-items: center;\n  flex: 1 1 auto;\n}\n";
 
 module.exports = bulkEditPanelCss;
 //# sourceMappingURL=BulkEditPanel.css.js.map

package/cjs/bulk-edit/BulkEditPanel.js

@@ -18,6 +18,7 @@ const BulkEditPanel = ({
   parentDs,
   onValidationStatusChange,
   style,
+  width = 600,
   ...htmlAttributes
 }) => {
   const targetWindow = window.useWindow();
@@ -57,7 +58,7 @@ const BulkEditPanel = ({
             customHeader: bulkEditRow,
             dataSource: sessionDs,
             height: 380,
-            width: 600,
+            width,
             showColumnHeaderMenus: false,
             selectionModel: "none",
             onDataEdited,

package/cjs/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 torm 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  onValidationStatusChange: (isValid: boolean) => void;\n}\n\nexport const BulkEditPanel = ({\n  className,\n  columns,\n  sessionDs,\n  parentDs,\n  onValidationStatusChange,\n  style,\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, onDataEdited, onRowChange, tableConfig } =\n    useBulkEditPanel({\n      columns,\n      sessionDs,\n      onValidationStatusChange,\n    });\n\n  const bulkEditRow = useMemo(() => {\n    return (\n      <BulkEditRow\n        dataSource={parentDs}\n        onBulkChange={onBulkChange}\n        onRowChange={onRowChange}\n      />\n    );\n  }, [onBulkChange, onRowChange, parentDs]);\n\n  return (\n    <div\n      {...htmlAttributes}\n      className={cx(classBase, className)}\n      style={{ ...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={600}\n          showColumnHeaderMenus={false}\n          selectionModel=\"none\"\n          onDataEdited={onDataEdited}\n          maxViewportRowLimit={10}\n        />\n      </div>\n    </div>\n  );\n};\n"],"names":["useWindow","useComponentCssInjection","bulkEditPanelCss","useBulkEditPanel","useMemo","jsx","BulkEditRow","jsxs","Table"],"mappings":";;;;;;;;;;;;AAYA,MAAM,SAAY,GAAA,kBAAA;AAmBX,MAAM,gBAAgB,CAAC;AAAA,EAC5B,SAAA;AAAA,EACA,OAAA;AAAA,EACA,SAAA;AAAA,EACA,QAAA;AAAA,EACA,wBAAA;AAAA,EACA,KAAA;AAAA,EACA,GAAG;AACL,CAAwC,KAAA;AACtC,EAAA,MAAM,eAAeA,gBAAU,EAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,mBAAA;AAAA,IACR,GAAK,EAAAC,eAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EAAA,MAAM,EAAE,YAAc,EAAA,YAAA,EAAc,WAAa,EAAA,WAAA,KAC/CC,iCAAiB,CAAA;AAAA,IACf,OAAA;AAAA,IACA,SAAA;AAAA,IACA;AAAA,GACD,CAAA;AAEH,EAAM,MAAA,WAAA,GAAcC,cAAQ,MAAM;AAChC,IACE,uBAAAC,cAAA;AAAA,MAACC,uBAAA;AAAA,MAAA;AAAA,QACC,UAAY,EAAA,QAAA;AAAA,QACZ,YAAA;AAAA,QACA;AAAA;AAAA,KACF;AAAA,GAED,EAAA,CAAC,YAAc,EAAA,WAAA,EAAa,QAAQ,CAAC,CAAA;AAExC,EACE,uBAAAC,eAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACE,GAAG,cAAA;AAAA,MACJ,SAAA,EAAW,EAAG,CAAA,SAAA,EAAW,SAAS,CAAA;AAAA,MAClC,OAAO,EAAE,GAAG,OAAO,OAAS,EAAA,MAAA,EAAQ,eAAe,QAAS,EAAA;AAAA,MAE5D,QAAA,EAAA;AAAA,wBAAAF,cAAA,CAAC,KAAI,EAAA,EAAA,SAAA,EAAW,CAAG,EAAA,SAAS,CAAY,QAAA,CAAA,EAAA,CAAA;AAAA,wBACvCA,cAAA,CAAA,KAAA,EAAA,EAAI,SAAW,EAAA,CAAA,EAAG,SAAS,CAC1B,MAAA,CAAA,EAAA,QAAA,kBAAAA,cAAA;AAAA,UAACG,WAAA;AAAA,UAAA;AAAA,YACC,qBAAuB,EAAA,KAAA;AAAA,YACvB,MAAQ,EAAA,WAAA;AAAA,YACR,YAAc,EAAA,WAAA;AAAA,YACd,UAAY,EAAA,SAAA;AAAA,YACZ,MAAQ,EAAA,GAAA;AAAA,YACR,KAAO,EAAA,GAAA;AAAA,YACP,qBAAuB,EAAA,KAAA;AAAA,YACvB,cAAe,EAAA,MAAA;AAAA,YACf,YAAA;AAAA,YACA,mBAAqB,EAAA;AAAA;AAAA,SAEzB,EAAA;AAAA;AAAA;AAAA,GACF;AAEJ;;;;"}
+{"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  onValidationStatusChange: (isValid: boolean) => void;\n  width?: number;\n}\n\nexport const BulkEditPanel = ({\n  className,\n  columns,\n  sessionDs,\n  parentDs,\n  onValidationStatusChange,\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, onDataEdited, onRowChange, tableConfig } =\n    useBulkEditPanel({\n      columns,\n      sessionDs,\n      onValidationStatusChange,\n    });\n\n  const bulkEditRow = useMemo(() => {\n    return (\n      <BulkEditRow\n        dataSource={parentDs}\n        onBulkChange={onBulkChange}\n        onRowChange={onRowChange}\n      />\n    );\n  }, [onBulkChange, onRowChange, parentDs]);\n\n  return (\n    <div\n      {...htmlAttributes}\n      className={cx(classBase, className)}\n      style={{ ...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          onDataEdited={onDataEdited}\n          maxViewportRowLimit={10}\n        />\n      </div>\n    </div>\n  );\n};\n"],"names":["useWindow","useComponentCssInjection","bulkEditPanelCss","useBulkEditPanel","useMemo","jsx","BulkEditRow","jsxs","Table"],"mappings":";;;;;;;;;;;;AAYA,MAAM,SAAY,GAAA,kBAAA;AAoBX,MAAM,gBAAgB,CAAC;AAAA,EAC5B,SAAA;AAAA,EACA,OAAA;AAAA,EACA,SAAA;AAAA,EACA,QAAA;AAAA,EACA,wBAAA;AAAA,EACA,KAAA;AAAA,EACA,KAAQ,GAAA,GAAA;AAAA,EACR,GAAG;AACL,CAAwC,KAAA;AACtC,EAAA,MAAM,eAAeA,gBAAU,EAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,mBAAA;AAAA,IACR,GAAK,EAAAC,eAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EAAA,MAAM,EAAE,YAAc,EAAA,YAAA,EAAc,WAAa,EAAA,WAAA,KAC/CC,iCAAiB,CAAA;AAAA,IACf,OAAA;AAAA,IACA,SAAA;AAAA,IACA;AAAA,GACD,CAAA;AAEH,EAAM,MAAA,WAAA,GAAcC,cAAQ,MAAM;AAChC,IACE,uBAAAC,cAAA;AAAA,MAACC,uBAAA;AAAA,MAAA;AAAA,QACC,UAAY,EAAA,QAAA;AAAA,QACZ,YAAA;AAAA,QACA;AAAA;AAAA,KACF;AAAA,GAED,EAAA,CAAC,YAAc,EAAA,WAAA,EAAa,QAAQ,CAAC,CAAA;AAExC,EACE,uBAAAC,eAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACE,GAAG,cAAA;AAAA,MACJ,SAAA,EAAW,EAAG,CAAA,SAAA,EAAW,SAAS,CAAA;AAAA,MAClC,OAAO,EAAE,GAAG,OAAO,OAAS,EAAA,MAAA,EAAQ,eAAe,QAAS,EAAA;AAAA,MAE5D,QAAA,EAAA;AAAA,wBAAAF,cAAA,CAAC,KAAI,EAAA,EAAA,SAAA,EAAW,CAAG,EAAA,SAAS,CAAY,QAAA,CAAA,EAAA,CAAA;AAAA,wBACvCA,cAAA,CAAA,KAAA,EAAA,EAAI,SAAW,EAAA,CAAA,EAAG,SAAS,CAC1B,MAAA,CAAA,EAAA,QAAA,kBAAAA,cAAA;AAAA,UAACG,WAAA;AAAA,UAAA;AAAA,YACC,qBAAuB,EAAA,KAAA;AAAA,YACvB,MAAQ,EAAA,WAAA;AAAA,YACR,YAAc,EAAA,WAAA;AAAA,YACd,UAAY,EAAA,SAAA;AAAA,YACZ,MAAQ,EAAA,GAAA;AAAA,YACR,KAAA;AAAA,YACA,qBAAuB,EAAA,KAAA;AAAA,YACvB,cAAe,EAAA,MAAA;AAAA,YACf,YAAA;AAAA,YACA,mBAAqB,EAAA;AAAA;AAAA,SAEzB,EAAA;AAAA;AAAA;AAAA,GACF;AAEJ;;;;"}

package/cjs/bulk-edit/useBulkEditPanel.js

@@ -40,7 +40,8 @@ const useBulkEditPanel = ({
           name: col.name,
           serverDataType: col.serverDataType ?? "string",
           type: vuuUtils.isTypeDescriptor(col.type) ? addRenderer(col.type, "input-cell") : "string",
-          clientSideEditValidationCheck: vuuUtils.hasValidationRules(col.type) ? vuuDataReact.buildValidationChecker(col.type.rules) : void 0
+          clientSideEditValidationCheck: vuuUtils.hasValidationRules(col.type) ? vuuDataReact.buildValidationChecker(col.type.rules) : void 0,
+          width: 120
         };
       }) : dataSource.columns.map((name) => ({
         editable: true,
@@ -54,17 +55,19 @@ const useBulkEditPanel = ({
   }, [columns, dataSource.columns]);
   const handleDataEdited = react.useCallback(
     ({ isValid = true, row, columnName }) => {
-      if (!isValid && !isRecorded([row[IDX], columnName], errorsRef.current)) {
-        errorsRef.current.push([row[IDX], columnName]);
-      } else if (isValid && isRecorded([row[IDX], columnName], errorsRef.current)) {
-        errorsRef.current = errorsRef.current.filter(
-          (error) => !isSameArray(error, [row[IDX], columnName])
-        );
-      }
-      if (rowState === true && errorsRef.current.length === 0) {
-        onValidationStatusChange(true);
-      } else {
-        onValidationStatusChange(false);
+      if (columnName && row) {
+        if (!isValid && !isRecorded([row[IDX], columnName], errorsRef.current)) {
+          errorsRef.current.push([row[IDX], columnName]);
+        } else if (isValid && isRecorded([row[IDX], columnName], errorsRef.current)) {
+          errorsRef.current = errorsRef.current.filter(
+            (error) => !isSameArray(error, [row[IDX], columnName])
+          );
+        }
+        if (rowState === true && errorsRef.current.length === 0) {
+          onValidationStatusChange(true);
+        } else {
+          onValidationStatusChange(false);
+        }
       }
     },
     [onValidationStatusChange, rowState]

package/cjs/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 {\n  DataCellEditNotification,\n  DataValueTypeDescriptor,\n  TableConfig,\n} from \"@vuu-ui/vuu-table-types\";\nimport {\n  hasValidationRules,\n  isTypeDescriptor,\n  metadataKeys,\n} from \"@vuu-ui/vuu-utils\";\nimport { useCallback, useMemo, useRef, 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\nconst { IDX } = metadataKeys;\n\ntype ErrorTuple = [number, string];\n\nconst isRecorded = (index: ErrorTuple, record: ErrorTuple[]) => {\n  for (const r of record) {\n    if (isSameArray(r, index)) {\n      return true;\n    }\n  }\n  return false;\n};\n\nconst isSameArray = (arr1: ErrorTuple, arr2: ErrorTuple) => {\n  return arr1[0] == arr2[0] && arr1[1] == arr2[1];\n};\n\nexport type BulkEditPanelHookProps = Pick<\n  BulkEditPanelProps,\n  \"columns\" | \"sessionDs\" | \"onValidationStatusChange\"\n>;\n\nexport const useBulkEditPanel = ({\n  columns,\n  sessionDs: dataSource,\n  onValidationStatusChange,\n}: BulkEditPanelHookProps) => {\n  const errorsRef = useRef<ErrorTuple[]>([]);\n  const [rowState, setRowState] = useState(true);\n\n  const tableConfig: TableConfig = useMemo(() => {\n    return {\n      columns: columns\n        ? columns.map((col) => {\n            return {\n              editable: col.editableBulk === \"bulk\",\n              hidden: col.editableBulk === false,\n              name: col.name,\n              serverDataType: col.serverDataType ?? \"string\",\n              type: isTypeDescriptor(col.type)\n                ? addRenderer(col.type, \"input-cell\")\n                : \"string\",\n              clientSideEditValidationCheck: hasValidationRules(col.type)\n                ? buildValidationChecker(col.type.rules)\n                : undefined,\n            };\n          })\n        : dataSource.columns.map((name) => ({\n            editable: true,\n            name,\n            serverDataType: \"string\",\n          })),\n      columnLayout: \"fit\",\n      columnDefaultWidth: 100,\n      rowSeparators: true,\n    };\n  }, [columns, dataSource.columns]);\n\n  const handleDataEdited = useCallback<DataCellEditNotification>(\n    ({ isValid = true, row, columnName }) => {\n      if (!isValid && !isRecorded([row[IDX], columnName], errorsRef.current)) {\n        errorsRef.current.push([row[IDX], columnName]);\n      } else if (\n        isValid &&\n        isRecorded([row[IDX], columnName], errorsRef.current)\n      ) {\n        errorsRef.current = errorsRef.current.filter(\n          (error) => !isSameArray(error, [row[IDX], columnName]),\n        );\n      }\n      if (rowState === true && errorsRef.current.length === 0) {\n        onValidationStatusChange(true);\n      } else {\n        onValidationStatusChange(false);\n      }\n    },\n    [onValidationStatusChange, rowState],\n  );\n\n  const handleRowChange = useCallback(\n    (isValid: boolean) => {\n      if (isValid !== rowState) {\n        setRowState(isValid);\n      }\n    },\n    [rowState],\n  );\n\n  const handleBulkChange: EditValueChangeHandler = useCallback(\n    async (column, value) => {\n      const response = await dataSource.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":["metadataKeys","useRef","useState","useMemo","isTypeDescriptor","hasValidationRules","buildValidationChecker","useCallback"],"mappings":"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"}
+{"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 {\n  DataCellEditNotification,\n  DataValueTypeDescriptor,\n  TableConfig,\n} from \"@vuu-ui/vuu-table-types\";\nimport {\n  hasValidationRules,\n  isTypeDescriptor,\n  metadataKeys,\n} from \"@vuu-ui/vuu-utils\";\nimport { useCallback, useMemo, useRef, 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\nconst { IDX } = metadataKeys;\n\ntype ErrorTuple = [number, string];\n\nconst isRecorded = (index: ErrorTuple, record: ErrorTuple[]) => {\n  for (const r of record) {\n    if (isSameArray(r, index)) {\n      return true;\n    }\n  }\n  return false;\n};\n\nconst isSameArray = (arr1: ErrorTuple, arr2: ErrorTuple) => {\n  return arr1[0] == arr2[0] && arr1[1] == arr2[1];\n};\n\nexport type BulkEditPanelHookProps = Pick<\n  BulkEditPanelProps,\n  \"columns\" | \"sessionDs\" | \"onValidationStatusChange\"\n>;\n\nexport const useBulkEditPanel = ({\n  columns,\n  sessionDs: dataSource,\n  onValidationStatusChange,\n}: BulkEditPanelHookProps) => {\n  const errorsRef = useRef<ErrorTuple[]>([]);\n  const [rowState, setRowState] = useState(true);\n\n  const tableConfig: TableConfig = useMemo(() => {\n    return {\n      columns: columns\n        ? columns.map((col) => {\n            return {\n              editable: col.editableBulk === \"bulk\",\n              hidden: col.editableBulk === false,\n              name: col.name,\n              serverDataType: col.serverDataType ?? \"string\",\n              type: isTypeDescriptor(col.type)\n                ? addRenderer(col.type, \"input-cell\")\n                : \"string\",\n              clientSideEditValidationCheck: hasValidationRules(col.type)\n                ? buildValidationChecker(col.type.rules)\n                : undefined,\n              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 handleDataEdited = useCallback<DataCellEditNotification>(\n    ({ isValid = true, row, columnName }) => {\n      if (columnName && row) {\n        if (\n          !isValid &&\n          !isRecorded([row[IDX], columnName], errorsRef.current)\n        ) {\n          errorsRef.current.push([row[IDX], columnName]);\n        } else if (\n          isValid &&\n          isRecorded([row[IDX], columnName], errorsRef.current)\n        ) {\n          errorsRef.current = errorsRef.current.filter(\n            (error) => !isSameArray(error, [row[IDX], columnName]),\n          );\n        }\n        if (rowState === true && errorsRef.current.length === 0) {\n          onValidationStatusChange(true);\n        } else {\n          onValidationStatusChange(false);\n        }\n      }\n    },\n    [onValidationStatusChange, rowState],\n  );\n\n  const handleRowChange = useCallback(\n    (isValid: boolean) => {\n      if (isValid !== rowState) {\n        setRowState(isValid);\n      }\n    },\n    [rowState],\n  );\n\n  const handleBulkChange: EditValueChangeHandler = useCallback(\n    async (column, value) => {\n      const response = await dataSource.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":["metadataKeys","useRef","useState","useMemo","isTypeDescriptor","hasValidationRules","buildValidationChecker","useCallback"],"mappings":"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"}

package/cjs/cell-block/useCellBlockSelection.js

@@ -222,6 +222,9 @@ const useCellBlockSelection = ({
   );
   const handleKeyDown = react.useCallback(
     (evt) => {
+      console.log(
+        `[useCellBlockSelection] handleKeyDown (only interested in Shift key)`
+      );
       if (evt.key === "Shift") {
         initializeStateRef();
         const cell = vuuUtils.queryClosest(evt.target, ".vuuTableCell");

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

@@ -1 +1 @@
-{"version":3,"file":"useCellBlockSelection.js","sources":["../../../../packages/vuu-table/src/cell-block/useCellBlockSelection.tsx"],"sourcesContent":["import { isArrowKey, queryClosest } from \"@vuu-ui/vuu-utils\";\nimport {\n  KeyboardEventHandler,\n  MouseEventHandler,\n  ReactElement,\n  RefCallback,\n  RefObject,\n  useCallback,\n  useRef,\n  useState,\n} from \"react\";\nimport {\n  getAriaCellPos,\n  getNextCellPos,\n  getTableCell,\n} from \"../table-dom-utils\";\nimport { CellBlock } from \"./CellBlock\";\nimport {\n  PosTuple,\n  RefState,\n  TableCellBlock,\n  getTableCellBlock,\n  getTextFromCells,\n  isNullCellBox,\n  outsideBox,\n  refState,\n  setElementBox,\n  updateCellBlockClassName,\n} from \"./cellblock-utils\";\n\nconst clone = (posTuple: PosTuple) => posTuple.slice() as PosTuple;\n\ntype NativeKeyboardHandler = (evt: KeyboardEvent) => void;\ntype NativeMouseHandler = (evt: MouseEvent) => void;\ntype MouseHandlers = {\n  mouseMove: NativeMouseHandler;\n  mouseMovePreDrag: NativeMouseHandler;\n  mouseUp: NativeMouseHandler;\n  mouseUpPreDrag: NativeMouseHandler;\n};\n\nconst NullHandler = () => console.error(\"no handler installed\");\nconst mouseHandlers: MouseHandlers = {\n  mouseMove: NullHandler,\n  mouseMovePreDrag: NullHandler,\n  mouseUp: NullHandler,\n  mouseUpPreDrag: NullHandler,\n};\n\ntype MouseOperation = keyof typeof mouseHandlers;\n\nconst mouseType = (name: string) =>\n  name.startsWith(\"mouseMove\") ? \"mousemove\" : \"mouseup\";\n\nconst DRAG_THRESHOLD = 5;\n\nexport interface CellblockSelectionHookProps {\n  allowCellBlockSelection?: boolean;\n  columnCount?: number;\n  containerRef: RefObject<HTMLElement | null>;\n  onSelectCellBlock?: (cellBlock: TableCellBlock) => void;\n  rowCount?: number;\n}\n\nexport const useCellBlockSelection = ({\n  allowCellBlockSelection,\n  columnCount = 0,\n  containerRef,\n  onSelectCellBlock,\n  rowCount = 0,\n}: CellblockSelectionHookProps) => {\n  const [cellBlock, setCellBlock] = useState<ReactElement | null>(null);\n  const stateRef = useRef<RefState>(refState);\n  const handlersRef = useRef<MouseHandlers>(mouseHandlers);\n\n  const handleCopy = useCallback(async () => {\n    const { startCell, endCell } = stateRef.current;\n    if (startCell && endCell) {\n      const tsvText = getTextFromCells(startCell, endCell);\n      const type = \"text/plain\";\n      const blob = new Blob([tsvText], { type });\n      const data = [new ClipboardItem({ [type]: blob })];\n      await navigator.clipboard.write(data);\n    }\n  }, []);\n\n  const cellBlockRef = useCallback<RefCallback<HTMLDivElement>>((el) => {\n    stateRef.current.cellBlock = el;\n  }, []);\n\n  const createCellBlock = useCallback(\n    (method: \"mouse\" | \"keyboard\" = \"mouse\") => {\n      const { startBox, startCell } = stateRef.current;\n      if (startCell) {\n        const table = queryClosest<HTMLDivElement>(startCell, \".vuuTable\");\n        if (table) {\n          table.classList.add(`vuu-cellblock-select-in-progress-${method}`);\n        }\n        setElementBox(startCell, startBox);\n        startCell.classList.add(\"vuu-cellblock-start\");\n        setCellBlock(<CellBlock onCopy={handleCopy} ref={cellBlockRef} />);\n      }\n    },\n    [cellBlockRef, handleCopy],\n  );\n\n  const initializeStateRef = useCallback(() => {\n    const { cellBlock, cellBlockClassName, startCell, endCell } =\n      stateRef.current;\n    if (startCell) {\n      startCell.classList.remove(\"vuu-cellblock-start\");\n    }\n    if (endCell) {\n      endCell.classList.remove(\"vuu-cellblock-end\");\n    }\n    if (cellBlock?.classList.contains(cellBlockClassName)) {\n      cellBlock.classList.remove(cellBlockClassName);\n    }\n\n    const { endBox, startBox } = refState;\n\n    stateRef.current = {\n      ...refState,\n      cellBlock,\n      endBox: { ...endBox },\n      endPos: [-1, -1],\n      startBox: { ...startBox },\n      startPos: [-1, -1],\n    };\n  }, []);\n\n  const addMouseListener = useCallback(\n    (mouseOperation: MouseOperation, handler: NativeMouseHandler) => {\n      window.addEventListener(mouseType(mouseOperation), handler);\n      handlersRef.current[mouseOperation] = handler;\n    },\n    [],\n  );\n\n  const removeMouseListener = useCallback((name: MouseOperation) => {\n    window.removeEventListener(mouseType(name), handlersRef.current[name]);\n  }, []);\n\n  handlersRef.current.mouseMove = useCallback((evt: MouseEvent) => {\n    const { clientX: x, clientY: y } = evt;\n    const { endBox, startBox } = stateRef.current;\n    if (outsideBox(startBox, x, y) && outsideBox(endBox, x, y)) {\n      const cell = queryClosest<HTMLDivElement>(\n        evt.target,\n        \".vuuTableCell, .vuuCellBlock\",\n      );\n      if (cell?.classList.contains(\"vuuTableCell\")) {\n        setElementBox(cell, endBox);\n        stateRef.current.endCell = cell;\n        updateCellBlockClassName(stateRef.current);\n      }\n    }\n  }, []);\n\n  handlersRef.current.mouseUp = useCallback(\n    (evt: MouseEvent) => {\n      removeMouseListener(\"mouseMove\");\n      removeMouseListener(\"mouseUp\");\n\n      const { cellBlock, endCell, startCell } = stateRef.current;\n\n      const table = queryClosest<HTMLDivElement>(evt.target, \".vuuTable\");\n      endCell?.classList.add(\"vuu-cellblock-end\");\n      if (table) {\n        table.classList.remove(\"vuu-cellblock-select-in-progress-mouse\");\n      }\n\n      if (startCell && endCell) {\n        const tableCellBlock = getTableCellBlock(startCell, endCell);\n        onSelectCellBlock?.(tableCellBlock);\n      }\n\n      if (cellBlock) {\n        cellBlock.focus();\n      }\n    },\n    [onSelectCellBlock, removeMouseListener],\n  );\n\n  handlersRef.current.mouseMovePreDrag = useCallback(\n    (evt: MouseEvent) => {\n      const { current: state } = stateRef;\n      const { mouseStartX, mouseStartY } = state;\n\n      const x = (state.mousePosX = evt.clientX);\n      const y = (state.mousePosY = evt.clientY);\n\n      const distance = Math.max(\n        Math.abs(x - mouseStartX),\n        Math.abs(y - mouseStartY),\n      );\n\n      if (distance > DRAG_THRESHOLD) {\n        createCellBlock(\"mouse\");\n\n        const { mouseMove, mouseUp } = handlersRef.current;\n        removeMouseListener(\"mouseMovePreDrag\");\n        removeMouseListener(\"mouseUpPreDrag\");\n        addMouseListener(\"mouseMove\", mouseMove);\n        addMouseListener(\"mouseUp\", mouseUp);\n      }\n    },\n    [addMouseListener, createCellBlock, removeMouseListener],\n  );\n\n  handlersRef.current.mouseUpPreDrag = useCallback(() => {\n    removeMouseListener(\"mouseMovePreDrag\");\n    removeMouseListener(\"mouseUpPreDrag\");\n  }, [removeMouseListener]);\n\n  const handleNativeMouseOver = useCallback((evt: MouseEvent) => {\n    const cell = queryClosest<HTMLDivElement>(evt.target, \".vuuTableCell\");\n    if (cell) {\n      stateRef.current.endPos = getAriaCellPos(cell);\n      stateRef.current.endCell?.classList.remove(\"vuu-cellblock-end\");\n      stateRef.current.endCell = cell;\n      setElementBox(cell, stateRef.current.endBox);\n      updateCellBlockClassName(stateRef.current);\n\n      cell?.classList.add(\"vuu-cellblock-end\");\n    }\n  }, []);\n\n  const handleNativeMouseUp = useCallback(() => {\n    window.removeEventListener(\"mouseover\", handleNativeMouseOver);\n  }, [handleNativeMouseOver]);\n\n  const handleMouseDown = useCallback<MouseEventHandler>(\n    (evt) => {\n      if (evt.button === 0) {\n        initializeStateRef();\n        const { current: state } = stateRef;\n        const cell = queryClosest<HTMLDivElement>(evt.target, \".vuuTableCell\");\n        if (cell) {\n          state.startCell = cell;\n          state.mouseStartX = evt.clientX;\n          state.mouseStartY = evt.clientY;\n\n          const { mouseMovePreDrag, mouseUpPreDrag } = handlersRef.current;\n          addMouseListener(\"mouseMovePreDrag\", mouseMovePreDrag);\n          addMouseListener(\"mouseUpPreDrag\", mouseUpPreDrag);\n          console.log(\"register mouse enter\");\n          window.addEventListener(\"mouseover\", handleNativeMouseOver);\n          window.addEventListener(\"mouseup\", handleNativeMouseUp);\n        }\n      }\n    },\n    [\n      addMouseListener,\n      handleNativeMouseOver,\n      handleNativeMouseUp,\n      initializeStateRef,\n    ],\n  );\n\n  const nativeKeyDownHandlerRef = useRef<NativeKeyboardHandler>(NullHandler);\n\n  const handleNativeKeyUp = useCallback((evt: KeyboardEvent) => {\n    if (evt.key === \"Shift\") {\n      const { endCell } = stateRef.current;\n      const table = queryClosest<HTMLDivElement>(evt.target, \".vuuTable\");\n      endCell?.classList.add(\"vuu-cellblock-end\");\n      if (table) {\n        table.classList.remove(\"vuu-cellblock-select-in-progress-keyboard\");\n      }\n\n      window.removeEventListener(\"keydown\", nativeKeyDownHandlerRef.current, {\n        capture: true,\n      });\n      window.removeEventListener(\"keyup\", handleNativeKeyUp, {\n        capture: true,\n      });\n    }\n  }, []);\n\n  const handleNativeKeyDown = (nativeKeyDownHandlerRef.current = useCallback(\n    ({ key }: KeyboardEvent) => {\n      if (isArrowKey(key)) {\n        const { endBox, endPos, startBox } = stateRef.current;\n        if (isNullCellBox(startBox)) {\n          createCellBlock(\"keyboard\");\n        }\n        const nextCell = getNextCellPos(key, endPos, columnCount, rowCount);\n        stateRef.current.endPos = nextCell;\n        const cell = getTableCell(containerRef, nextCell);\n        stateRef.current.endCell = cell as HTMLDivElement;\n        setElementBox(cell, endBox);\n        updateCellBlockClassName(stateRef.current);\n      }\n    },\n    [columnCount, containerRef, createCellBlock, rowCount],\n  ));\n  const handleKeyDown = useCallback<KeyboardEventHandler>(\n    (evt) => {\n      if (evt.key === \"Shift\") {\n        initializeStateRef();\n        const cell = queryClosest<HTMLDivElement>(evt.target, \".vuuTableCell\");\n        if (cell) {\n          const startPos = getAriaCellPos(cell);\n          stateRef.current.startPos = startPos;\n          stateRef.current.endPos = clone(startPos);\n          const { current: state } = stateRef;\n          state.startCell = cell;\n\n          window.addEventListener(\"keydown\", handleNativeKeyDown, {\n            capture: true,\n          });\n          window.addEventListener(\"keyup\", handleNativeKeyUp, {\n            capture: true,\n          });\n\n          evt.preventDefault();\n        }\n      }\n    },\n    [handleNativeKeyDown, handleNativeKeyUp, initializeStateRef],\n  );\n\n  return {\n    cellBlock,\n    onKeyDown: allowCellBlockSelection ? handleKeyDown : undefined,\n    onMouseDown: allowCellBlockSelection ? handleMouseDown : undefined,\n  };\n};\n"],"names":["useState","useRef","refState","useCallback","getTextFromCells","queryClosest","setElementBox","CellBlock","cellBlock","outsideBox","updateCellBlockClassName","getTableCellBlock","getAriaCellPos","isArrowKey","isNullCellBox","getNextCellPos","getTableCell"],"mappings":"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"}
+{"version":3,"file":"useCellBlockSelection.js","sources":["../../../../packages/vuu-table/src/cell-block/useCellBlockSelection.tsx"],"sourcesContent":["import { isArrowKey, queryClosest } from \"@vuu-ui/vuu-utils\";\nimport {\n  KeyboardEventHandler,\n  MouseEventHandler,\n  ReactElement,\n  RefCallback,\n  RefObject,\n  useCallback,\n  useRef,\n  useState,\n} from \"react\";\nimport {\n  getAriaCellPos,\n  getNextCellPos,\n  getTableCell,\n} from \"../table-dom-utils\";\nimport { CellBlock } from \"./CellBlock\";\nimport {\n  PosTuple,\n  RefState,\n  TableCellBlock,\n  getTableCellBlock,\n  getTextFromCells,\n  isNullCellBox,\n  outsideBox,\n  refState,\n  setElementBox,\n  updateCellBlockClassName,\n} from \"./cellblock-utils\";\n\nconst clone = (posTuple: PosTuple) => posTuple.slice() as PosTuple;\n\ntype NativeKeyboardHandler = (evt: KeyboardEvent) => void;\ntype NativeMouseHandler = (evt: MouseEvent) => void;\ntype MouseHandlers = {\n  mouseMove: NativeMouseHandler;\n  mouseMovePreDrag: NativeMouseHandler;\n  mouseUp: NativeMouseHandler;\n  mouseUpPreDrag: NativeMouseHandler;\n};\n\nconst NullHandler = () => console.error(\"no handler installed\");\nconst mouseHandlers: MouseHandlers = {\n  mouseMove: NullHandler,\n  mouseMovePreDrag: NullHandler,\n  mouseUp: NullHandler,\n  mouseUpPreDrag: NullHandler,\n};\n\ntype MouseOperation = keyof typeof mouseHandlers;\n\nconst mouseType = (name: string) =>\n  name.startsWith(\"mouseMove\") ? \"mousemove\" : \"mouseup\";\n\nconst DRAG_THRESHOLD = 5;\n\nexport interface CellblockSelectionHookProps {\n  allowCellBlockSelection?: boolean;\n  columnCount?: number;\n  containerRef: RefObject<HTMLElement | null>;\n  onSelectCellBlock?: (cellBlock: TableCellBlock) => void;\n  rowCount?: number;\n}\n\nexport const useCellBlockSelection = ({\n  allowCellBlockSelection,\n  columnCount = 0,\n  containerRef,\n  onSelectCellBlock,\n  rowCount = 0,\n}: CellblockSelectionHookProps) => {\n  const [cellBlock, setCellBlock] = useState<ReactElement | null>(null);\n  const stateRef = useRef<RefState>(refState);\n  const handlersRef = useRef<MouseHandlers>(mouseHandlers);\n\n  const handleCopy = useCallback(async () => {\n    const { startCell, endCell } = stateRef.current;\n    if (startCell && endCell) {\n      const tsvText = getTextFromCells(startCell, endCell);\n      const type = \"text/plain\";\n      const blob = new Blob([tsvText], { type });\n      const data = [new ClipboardItem({ [type]: blob })];\n      await navigator.clipboard.write(data);\n    }\n  }, []);\n\n  const cellBlockRef = useCallback<RefCallback<HTMLDivElement>>((el) => {\n    stateRef.current.cellBlock = el;\n  }, []);\n\n  const createCellBlock = useCallback(\n    (method: \"mouse\" | \"keyboard\" = \"mouse\") => {\n      const { startBox, startCell } = stateRef.current;\n      if (startCell) {\n        const table = queryClosest<HTMLDivElement>(startCell, \".vuuTable\");\n        if (table) {\n          table.classList.add(`vuu-cellblock-select-in-progress-${method}`);\n        }\n        setElementBox(startCell, startBox);\n        startCell.classList.add(\"vuu-cellblock-start\");\n        setCellBlock(<CellBlock onCopy={handleCopy} ref={cellBlockRef} />);\n      }\n    },\n    [cellBlockRef, handleCopy],\n  );\n\n  const initializeStateRef = useCallback(() => {\n    const { cellBlock, cellBlockClassName, startCell, endCell } =\n      stateRef.current;\n    if (startCell) {\n      startCell.classList.remove(\"vuu-cellblock-start\");\n    }\n    if (endCell) {\n      endCell.classList.remove(\"vuu-cellblock-end\");\n    }\n    if (cellBlock?.classList.contains(cellBlockClassName)) {\n      cellBlock.classList.remove(cellBlockClassName);\n    }\n\n    const { endBox, startBox } = refState;\n\n    stateRef.current = {\n      ...refState,\n      cellBlock,\n      endBox: { ...endBox },\n      endPos: [-1, -1],\n      startBox: { ...startBox },\n      startPos: [-1, -1],\n    };\n  }, []);\n\n  const addMouseListener = useCallback(\n    (mouseOperation: MouseOperation, handler: NativeMouseHandler) => {\n      window.addEventListener(mouseType(mouseOperation), handler);\n      handlersRef.current[mouseOperation] = handler;\n    },\n    [],\n  );\n\n  const removeMouseListener = useCallback((name: MouseOperation) => {\n    window.removeEventListener(mouseType(name), handlersRef.current[name]);\n  }, []);\n\n  handlersRef.current.mouseMove = useCallback((evt: MouseEvent) => {\n    const { clientX: x, clientY: y } = evt;\n    const { endBox, startBox } = stateRef.current;\n    if (outsideBox(startBox, x, y) && outsideBox(endBox, x, y)) {\n      const cell = queryClosest<HTMLDivElement>(\n        evt.target,\n        \".vuuTableCell, .vuuCellBlock\",\n      );\n      if (cell?.classList.contains(\"vuuTableCell\")) {\n        setElementBox(cell, endBox);\n        stateRef.current.endCell = cell;\n        updateCellBlockClassName(stateRef.current);\n      }\n    }\n  }, []);\n\n  handlersRef.current.mouseUp = useCallback(\n    (evt: MouseEvent) => {\n      removeMouseListener(\"mouseMove\");\n      removeMouseListener(\"mouseUp\");\n\n      const { cellBlock, endCell, startCell } = stateRef.current;\n\n      const table = queryClosest<HTMLDivElement>(evt.target, \".vuuTable\");\n      endCell?.classList.add(\"vuu-cellblock-end\");\n      if (table) {\n        table.classList.remove(\"vuu-cellblock-select-in-progress-mouse\");\n      }\n\n      if (startCell && endCell) {\n        const tableCellBlock = getTableCellBlock(startCell, endCell);\n        onSelectCellBlock?.(tableCellBlock);\n      }\n\n      if (cellBlock) {\n        cellBlock.focus();\n      }\n    },\n    [onSelectCellBlock, removeMouseListener],\n  );\n\n  handlersRef.current.mouseMovePreDrag = useCallback(\n    (evt: MouseEvent) => {\n      const { current: state } = stateRef;\n      const { mouseStartX, mouseStartY } = state;\n\n      const x = (state.mousePosX = evt.clientX);\n      const y = (state.mousePosY = evt.clientY);\n\n      const distance = Math.max(\n        Math.abs(x - mouseStartX),\n        Math.abs(y - mouseStartY),\n      );\n\n      if (distance > DRAG_THRESHOLD) {\n        createCellBlock(\"mouse\");\n\n        const { mouseMove, mouseUp } = handlersRef.current;\n        removeMouseListener(\"mouseMovePreDrag\");\n        removeMouseListener(\"mouseUpPreDrag\");\n        addMouseListener(\"mouseMove\", mouseMove);\n        addMouseListener(\"mouseUp\", mouseUp);\n      }\n    },\n    [addMouseListener, createCellBlock, removeMouseListener],\n  );\n\n  handlersRef.current.mouseUpPreDrag = useCallback(() => {\n    removeMouseListener(\"mouseMovePreDrag\");\n    removeMouseListener(\"mouseUpPreDrag\");\n  }, [removeMouseListener]);\n\n  const handleNativeMouseOver = useCallback((evt: MouseEvent) => {\n    const cell = queryClosest<HTMLDivElement>(evt.target, \".vuuTableCell\");\n    if (cell) {\n      stateRef.current.endPos = getAriaCellPos(cell);\n      stateRef.current.endCell?.classList.remove(\"vuu-cellblock-end\");\n      stateRef.current.endCell = cell;\n      setElementBox(cell, stateRef.current.endBox);\n      updateCellBlockClassName(stateRef.current);\n\n      cell?.classList.add(\"vuu-cellblock-end\");\n    }\n  }, []);\n\n  const handleNativeMouseUp = useCallback(() => {\n    window.removeEventListener(\"mouseover\", handleNativeMouseOver);\n  }, [handleNativeMouseOver]);\n\n  const handleMouseDown = useCallback<MouseEventHandler>(\n    (evt) => {\n      if (evt.button === 0) {\n        initializeStateRef();\n        const { current: state } = stateRef;\n        const cell = queryClosest<HTMLDivElement>(evt.target, \".vuuTableCell\");\n        if (cell) {\n          state.startCell = cell;\n          state.mouseStartX = evt.clientX;\n          state.mouseStartY = evt.clientY;\n\n          const { mouseMovePreDrag, mouseUpPreDrag } = handlersRef.current;\n          addMouseListener(\"mouseMovePreDrag\", mouseMovePreDrag);\n          addMouseListener(\"mouseUpPreDrag\", mouseUpPreDrag);\n          console.log(\"register mouse enter\");\n          window.addEventListener(\"mouseover\", handleNativeMouseOver);\n          window.addEventListener(\"mouseup\", handleNativeMouseUp);\n        }\n      }\n    },\n    [\n      addMouseListener,\n      handleNativeMouseOver,\n      handleNativeMouseUp,\n      initializeStateRef,\n    ],\n  );\n\n  const nativeKeyDownHandlerRef = useRef<NativeKeyboardHandler>(NullHandler);\n\n  const handleNativeKeyUp = useCallback((evt: KeyboardEvent) => {\n    if (evt.key === \"Shift\") {\n      const { endCell } = stateRef.current;\n      const table = queryClosest<HTMLDivElement>(evt.target, \".vuuTable\");\n      endCell?.classList.add(\"vuu-cellblock-end\");\n      if (table) {\n        table.classList.remove(\"vuu-cellblock-select-in-progress-keyboard\");\n      }\n\n      window.removeEventListener(\"keydown\", nativeKeyDownHandlerRef.current, {\n        capture: true,\n      });\n      window.removeEventListener(\"keyup\", handleNativeKeyUp, {\n        capture: true,\n      });\n    }\n  }, []);\n\n  const handleNativeKeyDown = (nativeKeyDownHandlerRef.current = useCallback(\n    ({ key }: KeyboardEvent) => {\n      if (isArrowKey(key)) {\n        const { endBox, endPos, startBox } = stateRef.current;\n        if (isNullCellBox(startBox)) {\n          createCellBlock(\"keyboard\");\n        }\n        const nextCell = getNextCellPos(key, endPos, columnCount, rowCount);\n        stateRef.current.endPos = nextCell;\n        const cell = getTableCell(containerRef, nextCell);\n        stateRef.current.endCell = cell as HTMLDivElement;\n        setElementBox(cell, endBox);\n        updateCellBlockClassName(stateRef.current);\n      }\n    },\n    [columnCount, containerRef, createCellBlock, rowCount],\n  ));\n  const handleKeyDown = useCallback<KeyboardEventHandler>(\n    (evt) => {\n      console.log(\n        `[useCellBlockSelection] handleKeyDown (only interested in Shift key)`,\n      );\n      if (evt.key === \"Shift\") {\n        initializeStateRef();\n        const cell = queryClosest<HTMLDivElement>(evt.target, \".vuuTableCell\");\n        if (cell) {\n          const startPos = getAriaCellPos(cell);\n          stateRef.current.startPos = startPos;\n          stateRef.current.endPos = clone(startPos);\n          const { current: state } = stateRef;\n          state.startCell = cell;\n\n          window.addEventListener(\"keydown\", handleNativeKeyDown, {\n            capture: true,\n          });\n          window.addEventListener(\"keyup\", handleNativeKeyUp, {\n            capture: true,\n          });\n\n          evt.preventDefault();\n        }\n      }\n    },\n    [handleNativeKeyDown, handleNativeKeyUp, initializeStateRef],\n  );\n\n  return {\n    cellBlock,\n    onKeyDown: allowCellBlockSelection ? handleKeyDown : undefined,\n    onMouseDown: allowCellBlockSelection ? handleMouseDown : undefined,\n  };\n};\n"],"names":["useState","useRef","refState","useCallback","getTextFromCells","queryClosest","setElementBox","CellBlock","cellBlock","outsideBox","updateCellBlockClassName","getTableCellBlock","getAriaCellPos","isArrowKey","isNullCellBox","getNextCellPos","getTableCell"],"mappings":"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"}

package/cjs/cell-renderers/checkbox-cell/CheckboxCell.js

@@ -25,7 +25,7 @@ const CheckboxCell = react.memo(
           { previousValue: isChecked, value },
           "commit"
         );
-        if (res === true) {
+        if (vuuUtils.isRpcSuccess(res)) {
           vuuUtils.dispatchCustomEvent(evt.target, "vuu-commit");
         }
         return res;
@@ -39,7 +39,7 @@ const CheckboxCell = react.memo(
             { previousValue: isChecked, value: !isChecked },
             "commit"
           );
-          if (res === true) {
+          if (vuuUtils.isRpcSuccess(res)) {
             vuuUtils.dispatchCustomEvent(evt.target, "vuu-commit");
           }
         }

package/cjs/cell-renderers/checkbox-cell/CheckboxCell.js.map

@@ -1 +1 @@
-{"version":3,"file":"CheckboxCell.js","sources":["../../../../../packages/vuu-table/src/cell-renderers/checkbox-cell/CheckboxCell.tsx"],"sourcesContent":["import { MouseEvent, KeyboardEventHandler, memo, useCallback } from \"react\";\nimport { TableCellRendererProps } from \"@vuu-ui/vuu-table-types\";\nimport { Checkbox } from \"@salt-ds/core\";\nimport {\n  dataColumnAndKeyUnchanged,\n  dispatchCustomEvent,\n  registerComponent,\n} from \"@vuu-ui/vuu-utils\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\n\nimport checkboxCellCss from \"./CheckboxCell.css\";\n\nconst classBase = \"vuuCheckboxCell\";\n\nexport const CheckboxCell = memo(\n  ({ column, columnMap, onEdit, row }: TableCellRendererProps) => {\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"vuu-checkbox-cell\",\n      css: checkboxCellCss,\n      window: targetWindow,\n    });\n\n    const dataIdx = columnMap[column.name];\n    const isChecked = !!row[dataIdx];\n\n    const handleCommit = useCallback(\n      (value: boolean) => async (evt: MouseEvent) => {\n        const res = await onEdit?.(\n          { previousValue: isChecked, value },\n          \"commit\",\n        );\n        if (res === true) {\n          dispatchCustomEvent(evt.target as HTMLElement, \"vuu-commit\");\n        }\n        return res;\n      },\n      [isChecked, onEdit],\n    );\n\n    const handleKeyDown = useCallback<KeyboardEventHandler>(\n      async (evt) => {\n        if (evt.key === \"Enter\") {\n          const res = await onEdit?.(\n            { previousValue: isChecked, value: !isChecked },\n            \"commit\",\n          );\n          if (res === true) {\n            dispatchCustomEvent(evt.target as HTMLElement, \"vuu-commit\");\n          }\n        }\n      },\n      [isChecked, onEdit],\n    );\n\n    const className = `${classBase}-checkbox`;\n\n    return column.editable ? (\n      <Checkbox\n        checked={isChecked}\n        className={className}\n        onClick={handleCommit(!isChecked)}\n        onKeyDown={handleKeyDown}\n      />\n    ) : (\n      <Checkbox checked={isChecked} className={className} disabled={true} />\n    );\n  },\n  dataColumnAndKeyUnchanged,\n);\nCheckboxCell.displayName = \"CheckboxCell\";\n\nregisterComponent(\"checkbox-cell\", CheckboxCell, \"cell-renderer\", {\n  serverDataType: \"boolean\",\n});\n"],"names":["memo","useWindow","useComponentCssInjection","checkboxCellCss","useCallback","dispatchCustomEvent","jsx","Checkbox","dataColumnAndKeyUnchanged","registerComponent"],"mappings":";;;;;;;;;;AAaA,MAAM,SAAY,GAAA,iBAAA;AAEX,MAAM,YAAe,GAAAA,UAAA;AAAA,EAC1B,CAAC,EAAE,MAAA,EAAQ,SAAW,EAAA,MAAA,EAAQ,KAAkC,KAAA;AAC9D,IAAA,MAAM,eAAeC,gBAAU,EAAA;AAC/B,IAAyBC,+BAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,mBAAA;AAAA,MACR,GAAK,EAAAC,cAAA;AAAA,MACL,MAAQ,EAAA;AAAA,KACT,CAAA;AAED,IAAM,MAAA,OAAA,GAAU,SAAU,CAAA,MAAA,CAAO,IAAI,CAAA;AACrC,IAAA,MAAM,SAAY,GAAA,CAAC,CAAC,GAAA,CAAI,OAAO,CAAA;AAE/B,IAAA,MAAM,YAAe,GAAAC,iBAAA;AAAA,MACnB,CAAC,KAAmB,KAAA,OAAO,GAAoB,KAAA;AAC7C,QAAA,MAAM,MAAM,MAAM,MAAA;AAAA,UAChB,EAAE,aAAe,EAAA,SAAA,EAAW,KAAM,EAAA;AAAA,UAClC;AAAA,SACF;AACA,QAAA,IAAI,QAAQ,IAAM,EAAA;AAChB,UAAoBC,4BAAA,CAAA,GAAA,CAAI,QAAuB,YAAY,CAAA;AAAA;AAE7D,QAAO,OAAA,GAAA;AAAA,OACT;AAAA,MACA,CAAC,WAAW,MAAM;AAAA,KACpB;AAEA,IAAA,MAAM,aAAgB,GAAAD,iBAAA;AAAA,MACpB,OAAO,GAAQ,KAAA;AACb,QAAI,IAAA,GAAA,CAAI,QAAQ,OAAS,EAAA;AACvB,UAAA,MAAM,MAAM,MAAM,MAAA;AAAA,YAChB,EAAE,aAAA,EAAe,SAAW,EAAA,KAAA,EAAO,CAAC,SAAU,EAAA;AAAA,YAC9C;AAAA,WACF;AACA,UAAA,IAAI,QAAQ,IAAM,EAAA;AAChB,YAAoBC,4BAAA,CAAA,GAAA,CAAI,QAAuB,YAAY,CAAA;AAAA;AAC7D;AACF,OACF;AAAA,MACA,CAAC,WAAW,MAAM;AAAA,KACpB;AAEA,IAAM,MAAA,SAAA,GAAY,GAAG,SAAS,CAAA,SAAA,CAAA;AAE9B,IAAA,OAAO,OAAO,QACZ,mBAAAC,cAAA;AAAA,MAACC,aAAA;AAAA,MAAA;AAAA,QACC,OAAS,EAAA,SAAA;AAAA,QACT,SAAA;AAAA,QACA,OAAA,EAAS,YAAa,CAAA,CAAC,SAAS,CAAA;AAAA,QAChC,SAAW,EAAA;AAAA;AAAA,wBAGZD,cAAA,CAAAC,aAAA,EAAA,EAAS,SAAS,SAAW,EAAA,SAAA,EAAsB,UAAU,IAAM,EAAA,CAAA;AAAA,GAExE;AAAA,EACAC;AACF;AACA,YAAA,CAAa,WAAc,GAAA,cAAA;AAE3BC,0BAAkB,CAAA,eAAA,EAAiB,cAAc,eAAiB,EAAA;AAAA,EAChE,cAAgB,EAAA;AAClB,CAAC,CAAA;;;;"}
+{"version":3,"file":"CheckboxCell.js","sources":["../../../../../packages/vuu-table/src/cell-renderers/checkbox-cell/CheckboxCell.tsx"],"sourcesContent":["import { MouseEvent, KeyboardEventHandler, memo, useCallback } from \"react\";\nimport { TableCellRendererProps } from \"@vuu-ui/vuu-table-types\";\nimport { Checkbox } from \"@salt-ds/core\";\nimport {\n  dataColumnAndKeyUnchanged,\n  dispatchCustomEvent,\n  isRpcSuccess,\n  registerComponent,\n} from \"@vuu-ui/vuu-utils\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\n\nimport checkboxCellCss from \"./CheckboxCell.css\";\n\nconst classBase = \"vuuCheckboxCell\";\n\nexport const CheckboxCell = memo(\n  ({ column, columnMap, onEdit, row }: TableCellRendererProps) => {\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"vuu-checkbox-cell\",\n      css: checkboxCellCss,\n      window: targetWindow,\n    });\n\n    const dataIdx = columnMap[column.name];\n    const isChecked = !!row[dataIdx];\n\n    const handleCommit = useCallback(\n      (value: boolean) => async (evt: MouseEvent) => {\n        const res = await onEdit?.(\n          { previousValue: isChecked, value },\n          \"commit\",\n        );\n        if (isRpcSuccess(res)) {\n          dispatchCustomEvent(evt.target as HTMLElement, \"vuu-commit\");\n        }\n        return res;\n      },\n      [isChecked, onEdit],\n    );\n\n    const handleKeyDown = useCallback<KeyboardEventHandler>(\n      async (evt) => {\n        if (evt.key === \"Enter\") {\n          const res = await onEdit?.(\n            { previousValue: isChecked, value: !isChecked },\n            \"commit\",\n          );\n          if (isRpcSuccess(res)) {\n            dispatchCustomEvent(evt.target as HTMLElement, \"vuu-commit\");\n          }\n        }\n      },\n      [isChecked, onEdit],\n    );\n\n    const className = `${classBase}-checkbox`;\n\n    return column.editable ? (\n      <Checkbox\n        checked={isChecked}\n        className={className}\n        onClick={handleCommit(!isChecked)}\n        onKeyDown={handleKeyDown}\n      />\n    ) : (\n      <Checkbox checked={isChecked} className={className} disabled={true} />\n    );\n  },\n  dataColumnAndKeyUnchanged,\n);\nCheckboxCell.displayName = \"CheckboxCell\";\n\nregisterComponent(\"checkbox-cell\", CheckboxCell, \"cell-renderer\", {\n  serverDataType: \"boolean\",\n});\n"],"names":["memo","useWindow","useComponentCssInjection","checkboxCellCss","useCallback","isRpcSuccess","dispatchCustomEvent","jsx","Checkbox","dataColumnAndKeyUnchanged","registerComponent"],"mappings":";;;;;;;;;;AAcA,MAAM,SAAY,GAAA,iBAAA;AAEX,MAAM,YAAe,GAAAA,UAAA;AAAA,EAC1B,CAAC,EAAE,MAAA,EAAQ,SAAW,EAAA,MAAA,EAAQ,KAAkC,KAAA;AAC9D,IAAA,MAAM,eAAeC,gBAAU,EAAA;AAC/B,IAAyBC,+BAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,mBAAA;AAAA,MACR,GAAK,EAAAC,cAAA;AAAA,MACL,MAAQ,EAAA;AAAA,KACT,CAAA;AAED,IAAM,MAAA,OAAA,GAAU,SAAU,CAAA,MAAA,CAAO,IAAI,CAAA;AACrC,IAAA,MAAM,SAAY,GAAA,CAAC,CAAC,GAAA,CAAI,OAAO,CAAA;AAE/B,IAAA,MAAM,YAAe,GAAAC,iBAAA;AAAA,MACnB,CAAC,KAAmB,KAAA,OAAO,GAAoB,KAAA;AAC7C,QAAA,MAAM,MAAM,MAAM,MAAA;AAAA,UAChB,EAAE,aAAe,EAAA,SAAA,EAAW,KAAM,EAAA;AAAA,UAClC;AAAA,SACF;AACA,QAAI,IAAAC,qBAAA,CAAa,GAAG,CAAG,EAAA;AACrB,UAAoBC,4BAAA,CAAA,GAAA,CAAI,QAAuB,YAAY,CAAA;AAAA;AAE7D,QAAO,OAAA,GAAA;AAAA,OACT;AAAA,MACA,CAAC,WAAW,MAAM;AAAA,KACpB;AAEA,IAAA,MAAM,aAAgB,GAAAF,iBAAA;AAAA,MACpB,OAAO,GAAQ,KAAA;AACb,QAAI,IAAA,GAAA,CAAI,QAAQ,OAAS,EAAA;AACvB,UAAA,MAAM,MAAM,MAAM,MAAA;AAAA,YAChB,EAAE,aAAA,EAAe,SAAW,EAAA,KAAA,EAAO,CAAC,SAAU,EAAA;AAAA,YAC9C;AAAA,WACF;AACA,UAAI,IAAAC,qBAAA,CAAa,GAAG,CAAG,EAAA;AACrB,YAAoBC,4BAAA,CAAA,GAAA,CAAI,QAAuB,YAAY,CAAA;AAAA;AAC7D;AACF,OACF;AAAA,MACA,CAAC,WAAW,MAAM;AAAA,KACpB;AAEA,IAAM,MAAA,SAAA,GAAY,GAAG,SAAS,CAAA,SAAA,CAAA;AAE9B,IAAA,OAAO,OAAO,QACZ,mBAAAC,cAAA;AAAA,MAACC,aAAA;AAAA,MAAA;AAAA,QACC,OAAS,EAAA,SAAA;AAAA,QACT,SAAA;AAAA,QACA,OAAA,EAAS,YAAa,CAAA,CAAC,SAAS,CAAA;AAAA,QAChC,SAAW,EAAA;AAAA;AAAA,wBAGZD,cAAA,CAAAC,aAAA,EAAA,EAAS,SAAS,SAAW,EAAA,SAAA,EAAsB,UAAU,IAAM,EAAA,CAAA;AAAA,GAExE;AAAA,EACAC;AACF;AACA,YAAA,CAAa,WAAc,GAAA,cAAA;AAE3BC,0BAAkB,CAAA,eAAA,EAAiB,cAAc,eAAiB,EAAA;AAAA,EAChE,cAAgB,EAAA;AAClB,CAAC,CAAA;;;;"}

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

@@ -1,6 +1,6 @@
 'use strict';
 
-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.vuuTableCell:focus .vuuTableInputCell.saltInput-primary,\n.vuuTableInputCell.saltInput-primary.saltInput-focused {\n  border: solid 2px var(--salt-focused-outlineColor);\n  padding: 0 3px;\n}\n\n.vuuTableCell-editable:focus-within\n  .vuuTableInputCell.saltInput-primary:focus-within,\n.vuuTableInputCell.saltInput-primary.saltInput-focused {\n  border: dotted 2px var(--salt-focused-outlineColor);\n  padding: 0 3px;\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}\n\n.vuuTableInputCell-error {\n  .saltInput-startAdornmentContainer {\n    .vuuTableInputCell-icon {\n      --vuu-icon-color: red;\n    }\n  }\n  .saltInput-endAdornmentContainer {\n    .vuuTableInputCell-icon {\n      --vuu-icon-color: red;\n    }\n  }\n}\n\n.vuuTableCell-right {\n  .saltInput-input {\n    text-align: right;\n  }\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-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}\n\n.vuuTableInputCell-error {\n  .saltInput-startAdornmentContainer {\n    .vuuTableInputCell-icon {\n      --vuu-icon-color: red;\n    }\n  }\n  .saltInput-endAdornmentContainer {\n    .vuuTableInputCell-icon {\n      --vuu-icon-color: red;\n    }\n  }\n}\n\n.vuuTableCell-right {\n  .saltInput-input {\n    text-align: right;\n  }\n}\n\n.vuuTableCell-error {\n  .vuuTableInputCell {\n    outline: var(--vuuTableCell-outline, solid red 2px);\n    outline-offset: -2px;\n  }\n}\n";
 
 module.exports = inputCellCss;
 //# sourceMappingURL=InputCell.css.js.map

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

@@ -1,11 +1,11 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
-var vuuUtils = require('@vuu-ui/vuu-utils');
 var core = require('@salt-ds/core');
-var vuuUiControls = require('@vuu-ui/vuu-ui-controls');
 var styles = require('@salt-ds/styles');
 var window = require('@salt-ds/window');
+var vuuUiControls = require('@vuu-ui/vuu-ui-controls');
+var vuuUtils = require('@vuu-ui/vuu-utils');
 var cx = require('clsx');
 var InputCell$1 = require('./InputCell.css.js');
 
@@ -36,6 +36,7 @@ const InputCell = ({
     core.Input,
     {
       ...editProps,
+      bordered: true,
       className: cx(classBase, {
         [`${classBase}-error`]: warningMessage !== void 0
       }),

package/cjs/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 { TableCellRendererProps } from \"@vuu-ui/vuu-table-types\";\nimport { registerComponent } from \"@vuu-ui/vuu-utils\";\nimport { Input } from \"@salt-ds/core\";\nimport { useEditableText } from \"@vuu-ui/vuu-ui-controls\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport cx from \"clsx\";\n\nimport inputCellCss from \"./InputCell.css\";\n\nconst classBase = \"vuuTableInputCell\";\n\nexport const InputCell = ({\n  column,\n  columnMap,\n  onEdit,\n  row,\n}: TableCellRendererProps) => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-input-cell\",\n    css: inputCellCss,\n    window: targetWindow,\n  });\n\n  const dataIdx = columnMap[column.name];\n  const dataValue = row[dataIdx] as number | string;\n  const { align = \"left\", clientSideEditValidationCheck } = column;\n\n  const { warningMessage, ...editProps } = useEditableText({\n    value: dataValue,\n    onEdit,\n    clientSideEditValidationCheck,\n  });\n\n  const endAdornment =\n    warningMessage && align === \"left\" ? (\n      <span className={`${classBase}-icon`} data-icon=\"error\" />\n    ) : undefined;\n\n  const startAdornment =\n    warningMessage && align === \"right\" ? (\n      <span className={`${classBase}-icon`} data-icon=\"error\" />\n    ) : undefined;\n\n  return (\n    <Input\n      {...editProps}\n      className={cx(classBase, {\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":["useWindow","useComponentCssInjection","inputCellCss","useEditableText","jsx","Input","registerComponent"],"mappings":";;;;;;;;;;;AAUA,MAAM,SAAY,GAAA,mBAAA;AAEX,MAAM,YAAY,CAAC;AAAA,EACxB,MAAA;AAAA,EACA,SAAA;AAAA,EACA,MAAA;AAAA,EACA;AACF,CAA8B,KAAA;AAC5B,EAAA,MAAM,eAAeA,gBAAU,EAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,gBAAA;AAAA,IACR,GAAK,EAAAC,WAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EAAM,MAAA,OAAA,GAAU,SAAU,CAAA,MAAA,CAAO,IAAI,CAAA;AACrC,EAAM,MAAA,SAAA,GAAY,IAAI,OAAO,CAAA;AAC7B,EAAA,MAAM,EAAE,KAAA,GAAQ,MAAQ,EAAA,6BAAA,EAAkC,GAAA,MAAA;AAE1D,EAAA,MAAM,EAAE,cAAA,EAAgB,GAAG,SAAA,KAAcC,6BAAgB,CAAA;AAAA,IACvD,KAAO,EAAA,SAAA;AAAA,IACP,MAAA;AAAA,IACA;AAAA,GACD,CAAA;AAED,EAAA,MAAM,YACJ,GAAA,cAAA,IAAkB,KAAU,KAAA,MAAA,mBACzBC,cAAA,CAAA,MAAA,EAAA,EAAK,SAAW,EAAA,CAAA,EAAG,SAAS,CAAA,KAAA,CAAA,EAAS,WAAU,EAAA,OAAA,EAAQ,CACtD,GAAA,KAAA,CAAA;AAEN,EAAA,MAAM,cACJ,GAAA,cAAA,IAAkB,KAAU,KAAA,OAAA,mBACzBA,cAAA,CAAA,MAAA,EAAA,EAAK,SAAW,EAAA,CAAA,EAAG,SAAS,CAAA,KAAA,CAAA,EAAS,WAAU,EAAA,OAAA,EAAQ,CACtD,GAAA,KAAA,CAAA;AAEN,EACE,uBAAAA,cAAA;AAAA,IAACC,UAAA;AAAA,IAAA;AAAA,MACE,GAAG,SAAA;AAAA,MACJ,SAAA,EAAW,GAAG,SAAW,EAAA;AAAA,QACvB,CAAC,CAAA,EAAG,SAAS,CAAA,MAAA,CAAQ,GAAG,cAAmB,KAAA,KAAA;AAAA,OAC5C,CAAA;AAAA,MACD,YAAA;AAAA,MACA;AAAA;AAAA,GACF;AAEJ;AAEAC,0BAAkB,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 } 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 { useEditableText } from \"@vuu-ui/vuu-ui-controls\";\nimport { registerComponent } 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  columnMap,\n  onEdit,\n  row,\n}: TableCellRendererProps) => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-input-cell\",\n    css: inputCellCss,\n    window: targetWindow,\n  });\n\n  const dataIdx = columnMap[column.name];\n  const dataValue = row[dataIdx] as number | string;\n  const { align = \"left\", clientSideEditValidationCheck } = column;\n\n  const { warningMessage, ...editProps } = useEditableText({\n    value: dataValue,\n    onEdit,\n    clientSideEditValidationCheck,\n  });\n\n  const endAdornment =\n    warningMessage && align === \"left\" ? (\n      <span className={`${classBase}-icon`} data-icon=\"error\" />\n    ) : undefined;\n\n  const startAdornment =\n    warningMessage && align === \"right\" ? (\n      <span className={`${classBase}-icon`} data-icon=\"error\" />\n    ) : undefined;\n\n  return (\n    <Input\n      {...editProps}\n      bordered\n      className={cx(classBase, {\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":["useWindow","useComponentCssInjection","inputCellCss","useEditableText","jsx","Input","registerComponent"],"mappings":";;;;;;;;;;;AAUA,MAAM,SAAY,GAAA,mBAAA;AAEX,MAAM,YAAY,CAAC;AAAA,EACxB,MAAA;AAAA,EACA,SAAA;AAAA,EACA,MAAA;AAAA,EACA;AACF,CAA8B,KAAA;AAC5B,EAAA,MAAM,eAAeA,gBAAU,EAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,gBAAA;AAAA,IACR,GAAK,EAAAC,WAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EAAM,MAAA,OAAA,GAAU,SAAU,CAAA,MAAA,CAAO,IAAI,CAAA;AACrC,EAAM,MAAA,SAAA,GAAY,IAAI,OAAO,CAAA;AAC7B,EAAA,MAAM,EAAE,KAAA,GAAQ,MAAQ,EAAA,6BAAA,EAAkC,GAAA,MAAA;AAE1D,EAAA,MAAM,EAAE,cAAA,EAAgB,GAAG,SAAA,KAAcC,6BAAgB,CAAA;AAAA,IACvD,KAAO,EAAA,SAAA;AAAA,IACP,MAAA;AAAA,IACA;AAAA,GACD,CAAA;AAED,EAAA,MAAM,YACJ,GAAA,cAAA,IAAkB,KAAU,KAAA,MAAA,mBACzBC,cAAA,CAAA,MAAA,EAAA,EAAK,SAAW,EAAA,CAAA,EAAG,SAAS,CAAA,KAAA,CAAA,EAAS,WAAU,EAAA,OAAA,EAAQ,CACtD,GAAA,KAAA,CAAA;AAEN,EAAA,MAAM,cACJ,GAAA,cAAA,IAAkB,KAAU,KAAA,OAAA,mBACzBA,cAAA,CAAA,MAAA,EAAA,EAAK,SAAW,EAAA,CAAA,EAAG,SAAS,CAAA,KAAA,CAAA,EAAS,WAAU,EAAA,OAAA,EAAQ,CACtD,GAAA,KAAA,CAAA;AAEN,EACE,uBAAAA,cAAA;AAAA,IAACC,UAAA;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,MAAA,CAAQ,GAAG,cAAmB,KAAA,KAAA;AAAA,OAC5C,CAAA;AAAA,MACD,YAAA;AAAA,MACA;AAAA;AAAA,GACF;AAEJ;AAEAC,0BAAkB,CAAA,YAAA,EAAc,WAAW,eAAiB,EAAA;AAAA,EAC1D,aAAe,EAAA;AACjB,CAAC,CAAA;;;;"}

package/cjs/cell-renderers/toggle-cell/ToggleCell.js

@@ -40,7 +40,7 @@ const ToggleCell = react.memo(function ToggleCell2({
         { previousValue: value, value: newValue },
         "commit"
       );
-      if (res === true) {
+      if (vuuUtils.isRpcSuccess(res)) {
         vuuUtils.dispatchCustomEvent(evt.target, "vuu-commit");
       }
       return res;

package/cjs/cell-renderers/toggle-cell/ToggleCell.js.map

@@ -1 +1 @@
-{"version":3,"file":"ToggleCell.js","sources":["../../../../../packages/vuu-table/src/cell-renderers/toggle-cell/ToggleCell.tsx"],"sourcesContent":["import {\n  ColumnDescriptor,\n  TableCellRendererProps,\n} from \"@vuu-ui/vuu-table-types\";\nimport {\n  CommitHandler,\n  dataColumnAndKeyUnchanged,\n  dispatchCustomEvent,\n  isTypeDescriptor,\n  isValueListRenderer,\n  registerComponent,\n} from \"@vuu-ui/vuu-utils\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport cx from \"clsx\";\n\nimport { memo, useCallback } from \"react\";\nimport { CycleStateButton } from \"@vuu-ui/vuu-ui-controls\";\n\nimport toggleCellCss from \"./ToggleCell.css\";\n\nconst classBase = \"vuuTableToggleCell\";\n\nconst getValueList = ({ name, type }: ColumnDescriptor) => {\n  if (isTypeDescriptor(type) && isValueListRenderer(type.renderer)) {\n    return type.renderer.values;\n  } else {\n    throw Error(\n      `useLookupValues column ${name} has not been configured with a values list`,\n    );\n  }\n};\n\nexport const ToggleCell = memo(function ToggleCell({\n  column,\n  columnMap,\n  onEdit,\n  row,\n}: TableCellRendererProps) {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-toggle-cell\",\n    css: toggleCellCss,\n    window: targetWindow,\n  });\n\n  const values = getValueList(column);\n  const dataIdx = columnMap[column.name];\n  const value = row[dataIdx] as string;\n\n  const handleCommit = useCallback<CommitHandler<HTMLButtonElement>>(\n    async (evt, newValue) => {\n      const res = await onEdit?.(\n        { previousValue: value, value: newValue },\n        \"commit\",\n      );\n      if (res === true) {\n        dispatchCustomEvent(evt.target as HTMLElement, \"vuu-commit\");\n      }\n      return res;\n    },\n    [onEdit, value],\n  );\n\n  return (\n    <CycleStateButton\n      className={cx(classBase, `${classBase}-${column.name}`)}\n      onCommit={handleCommit}\n      value={value}\n      values={values}\n      variant=\"cta\"\n    >\n      {value}\n    </CycleStateButton>\n  );\n}, dataColumnAndKeyUnchanged);\n\nregisterComponent(\"toggle-cell\", ToggleCell, \"cell-renderer\", {\n  userCanAssign: false,\n});\n"],"names":["isTypeDescriptor","isValueListRenderer","memo","ToggleCell","useWindow","useComponentCssInjection","toggleCellCss","useCallback","dispatchCustomEvent","jsx","CycleStateButton","dataColumnAndKeyUnchanged","registerComponent"],"mappings":";;;;;;;;;;;AAqBA,MAAM,SAAY,GAAA,oBAAA;AAElB,MAAM,YAAe,GAAA,CAAC,EAAE,IAAA,EAAM,MAA6B,KAAA;AACzD,EAAA,IAAIA,0BAAiB,IAAI,CAAA,IAAKC,4BAAoB,CAAA,IAAA,CAAK,QAAQ,CAAG,EAAA;AAChE,IAAA,OAAO,KAAK,QAAS,CAAA,MAAA;AAAA,GAChB,MAAA;AACL,IAAM,MAAA,KAAA;AAAA,MACJ,0BAA0B,IAAI,CAAA,2CAAA;AAAA,KAChC;AAAA;AAEJ,CAAA;AAEa,MAAA,UAAA,GAAaC,UAAK,CAAA,SAASC,WAAW,CAAA;AAAA,EACjD,MAAA;AAAA,EACA,SAAA;AAAA,EACA,MAAA;AAAA,EACA;AACF,CAA2B,EAAA;AACzB,EAAA,MAAM,eAAeC,gBAAU,EAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,iBAAA;AAAA,IACR,GAAK,EAAAC,YAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EAAM,MAAA,MAAA,GAAS,aAAa,MAAM,CAAA;AAClC,EAAM,MAAA,OAAA,GAAU,SAAU,CAAA,MAAA,CAAO,IAAI,CAAA;AACrC,EAAM,MAAA,KAAA,GAAQ,IAAI,OAAO,CAAA;AAEzB,EAAA,MAAM,YAAe,GAAAC,iBAAA;AAAA,IACnB,OAAO,KAAK,QAAa,KAAA;AACvB,MAAA,MAAM,MAAM,MAAM,MAAA;AAAA,QAChB,EAAE,aAAA,EAAe,KAAO,EAAA,KAAA,EAAO,QAAS,EAAA;AAAA,QACxC;AAAA,OACF;AACA,MAAA,IAAI,QAAQ,IAAM,EAAA;AAChB,QAAoBC,4BAAA,CAAA,GAAA,CAAI,QAAuB,YAAY,CAAA;AAAA;AAE7D,MAAO,OAAA,GAAA;AAAA,KACT;AAAA,IACA,CAAC,QAAQ,KAAK;AAAA,GAChB;AAEA,EACE,uBAAAC,cAAA;AAAA,IAACC,8BAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,GAAG,SAAW,EAAA,CAAA,EAAG,SAAS,CAAI,CAAA,EAAA,MAAA,CAAO,IAAI,CAAE,CAAA,CAAA;AAAA,MACtD,QAAU,EAAA,YAAA;AAAA,MACV,KAAA;AAAA,MACA,MAAA;AAAA,MACA,OAAQ,EAAA,KAAA;AAAA,MAEP,QAAA,EAAA;AAAA;AAAA,GACH;AAEJ,CAAA,EAAGC,kCAAyB;AAE5BC,0BAAkB,CAAA,aAAA,EAAe,YAAY,eAAiB,EAAA;AAAA,EAC5D,aAAe,EAAA;AACjB,CAAC,CAAA;;;;"}
+{"version":3,"file":"ToggleCell.js","sources":["../../../../../packages/vuu-table/src/cell-renderers/toggle-cell/ToggleCell.tsx"],"sourcesContent":["import {\n  ColumnDescriptor,\n  TableCellRendererProps,\n} from \"@vuu-ui/vuu-table-types\";\nimport {\n  CommitHandler,\n  dataColumnAndKeyUnchanged,\n  dispatchCustomEvent,\n  isRpcSuccess,\n  isTypeDescriptor,\n  isValueListRenderer,\n  registerComponent,\n} from \"@vuu-ui/vuu-utils\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport cx from \"clsx\";\n\nimport { memo, useCallback } from \"react\";\nimport { CycleStateButton } from \"@vuu-ui/vuu-ui-controls\";\n\nimport toggleCellCss from \"./ToggleCell.css\";\n\nconst classBase = \"vuuTableToggleCell\";\n\nconst getValueList = ({ name, type }: ColumnDescriptor) => {\n  if (isTypeDescriptor(type) && isValueListRenderer(type.renderer)) {\n    return type.renderer.values;\n  } else {\n    throw Error(\n      `useLookupValues column ${name} has not been configured with a values list`,\n    );\n  }\n};\n\nexport const ToggleCell = memo(function ToggleCell({\n  column,\n  columnMap,\n  onEdit,\n  row,\n}: TableCellRendererProps) {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-toggle-cell\",\n    css: toggleCellCss,\n    window: targetWindow,\n  });\n\n  const values = getValueList(column);\n  const dataIdx = columnMap[column.name];\n  const value = row[dataIdx] as string;\n\n  const handleCommit = useCallback<CommitHandler<HTMLButtonElement>>(\n    async (evt, newValue) => {\n      const res = await onEdit?.(\n        { previousValue: value, value: newValue },\n        \"commit\",\n      );\n      if (isRpcSuccess(res)) {\n        dispatchCustomEvent(evt.target as HTMLElement, \"vuu-commit\");\n      }\n      return res;\n    },\n    [onEdit, value],\n  );\n\n  return (\n    <CycleStateButton\n      className={cx(classBase, `${classBase}-${column.name}`)}\n      onCommit={handleCommit}\n      value={value}\n      values={values}\n      variant=\"cta\"\n    >\n      {value}\n    </CycleStateButton>\n  );\n}, dataColumnAndKeyUnchanged);\n\nregisterComponent(\"toggle-cell\", ToggleCell, \"cell-renderer\", {\n  userCanAssign: false,\n});\n"],"names":["isTypeDescriptor","isValueListRenderer","memo","ToggleCell","useWindow","useComponentCssInjection","toggleCellCss","useCallback","isRpcSuccess","dispatchCustomEvent","jsx","CycleStateButton","dataColumnAndKeyUnchanged","registerComponent"],"mappings":";;;;;;;;;;;AAsBA,MAAM,SAAY,GAAA,oBAAA;AAElB,MAAM,YAAe,GAAA,CAAC,EAAE,IAAA,EAAM,MAA6B,KAAA;AACzD,EAAA,IAAIA,0BAAiB,IAAI,CAAA,IAAKC,4BAAoB,CAAA,IAAA,CAAK,QAAQ,CAAG,EAAA;AAChE,IAAA,OAAO,KAAK,QAAS,CAAA,MAAA;AAAA,GAChB,MAAA;AACL,IAAM,MAAA,KAAA;AAAA,MACJ,0BAA0B,IAAI,CAAA,2CAAA;AAAA,KAChC;AAAA;AAEJ,CAAA;AAEa,MAAA,UAAA,GAAaC,UAAK,CAAA,SAASC,WAAW,CAAA;AAAA,EACjD,MAAA;AAAA,EACA,SAAA;AAAA,EACA,MAAA;AAAA,EACA;AACF,CAA2B,EAAA;AACzB,EAAA,MAAM,eAAeC,gBAAU,EAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,iBAAA;AAAA,IACR,GAAK,EAAAC,YAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EAAM,MAAA,MAAA,GAAS,aAAa,MAAM,CAAA;AAClC,EAAM,MAAA,OAAA,GAAU,SAAU,CAAA,MAAA,CAAO,IAAI,CAAA;AACrC,EAAM,MAAA,KAAA,GAAQ,IAAI,OAAO,CAAA;AAEzB,EAAA,MAAM,YAAe,GAAAC,iBAAA;AAAA,IACnB,OAAO,KAAK,QAAa,KAAA;AACvB,MAAA,MAAM,MAAM,MAAM,MAAA;AAAA,QAChB,EAAE,aAAA,EAAe,KAAO,EAAA,KAAA,EAAO,QAAS,EAAA;AAAA,QACxC;AAAA,OACF;AACA,MAAI,IAAAC,qBAAA,CAAa,GAAG,CAAG,EAAA;AACrB,QAAoBC,4BAAA,CAAA,GAAA,CAAI,QAAuB,YAAY,CAAA;AAAA;AAE7D,MAAO,OAAA,GAAA;AAAA,KACT;AAAA,IACA,CAAC,QAAQ,KAAK;AAAA,GAChB;AAEA,EACE,uBAAAC,cAAA;AAAA,IAACC,8BAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,GAAG,SAAW,EAAA,CAAA,EAAG,SAAS,CAAI,CAAA,EAAA,MAAA,CAAO,IAAI,CAAE,CAAA,CAAA;AAAA,MACtD,QAAU,EAAA,YAAA;AAAA,MACV,KAAA;AAAA,MACA,MAAA;AAAA,MACA,OAAQ,EAAA,KAAA;AAAA,MAEP,QAAA,EAAA;AAAA;AAAA,GACH;AAEJ,CAAA,EAAGC,kCAAyB;AAE5BC,0BAAkB,CAAA,aAAA,EAAe,YAAY,eAAiB,EAAA;AAAA,EAC5D,aAAe,EAAA;AACjB,CAAC,CAAA;;;;"}

package/cjs/header-cell/GroupHeaderCell.css.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var headerCellCss = ".vuu-theme {\n  --svg-spinner: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 100 100\"><path fill=\"rgb(38, 112, 169)\" d=\"M73,50c0-12.7-10.3-23-23-23S27,37.3,27,50 M30.9,50c0-10.5,8.5-19.1,19.1-19.1S69.1,39.5,69.1,50\"><animateTransform attributeName=\"transform\" attributeType=\"XML\" type=\"rotate\" dur=\"1s\" from=\"0 50 50\" to=\"360 50 50\" repeatCount=\"indefinite\" /></path></svg>');\n}\n\n.vuuTableGroupHeaderCell {\n  --vuuColumnHeaderPill-margin: 0;\n  --cell-align: \"flex-start\";\n  text-align: left;\n  cursor: default;\n  /* ensure header row sits atop everything else when scrolling down */\n\n  --vuuColumnHeaderPill-margin: 0;\n  --vuuColumnHeaderPill-flex: 0 0 24px;\n\n  align-items: center;\n  background-color: var(\n    --vuuTableHeaderCell-background,\n    var(--table-background)\n  );\n  border-bottom: none;\n  border-right-color: var(--cell-borderColor);\n  border-right-style: solid;\n  border-right-width: 1px;\n  box-sizing: border-box;\n  display: inline-flex;\n  gap: 4px;\n  height: 100%;\n  padding: 0 12px 0 4px;\n  position: relative;\n  vertical-align: top;\n\n  &.vuuPinLeft,\n  &.vuuPinRight {\n    background-color: var(\n      --vuuTableHeaderCell-background,\n      var(--table-background)\n    );\n  }\n}\n\n.vuuTableGroupHeaderCell-inner {\n  align-items: center;\n  display: flex;\n  gap: 4px;\n  height: 100%;\n  padding-left: 1px;\n}\n\n.vuuTableGroupHeaderCell-col {\n  align-items: center;\n  background-color: inherit;\n  display: inline-flex;\n  flex: 0 1 auto;\n  height: calc(var(--vuuTableHeaderHeight) - 2px);\n  justify-content: space-between;\n  padding-right: 8px;\n  position: relative;\n}\n\n.vuuTableGroupHeaderCell-label {\n  align-items: center;\n  display: flex;\n  flex: 0 0 auto;\n}\n\n.vuuTableGroupHeaderCell-close {\n  --vuu-icon-height: 18px;\n  --vuu-icon-width: 18px;\n  cursor: pointer;\n  left: 3px;\n}\n\n.vuuTableGroupHeaderCell-resizing {\n  --columnResizer-color: var(--salt-color-blue-500);\n  --columnResizer-height: var(--table-height);\n  --columnResizer-width: 2px;\n}\n.vuuTableGroupHeaderCell-pending {\n  --pending-content: \"\";\n}\n\n.vuuTableGroupHeaderCell-col:has(+ .vuuColumnResizer):after {\n  content: var(--pending-content);\n  width: 24px;\n  height: 24px;\n  background-image: var(--svg-spinner);\n  background-repeat: no-repeat;\n  background-size: cover;\n}\n\n.vuuTableGroupHeaderCell:focus {\n  outline: var(\n    --vuuTableCell-outline,\n    solid var(--salt-focused-outlineColor) 2px\n  );\n  outline-offset: -2px;\n  /** This is to achieve a white background to outline dashes */\n  box-shadow: inset 0 0 0 var(--cell-outline-width) white;\n  border-bottom: none;\n}\n";
+var headerCellCss = ".vuu-theme-deprecated {\n  --svg-spinner: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 100 100\"><path fill=\"rgb(38, 112, 169)\" d=\"M73,50c0-12.7-10.3-23-23-23S27,37.3,27,50 M30.9,50c0-10.5,8.5-19.1,19.1-19.1S69.1,39.5,69.1,50\"><animateTransform attributeName=\"transform\" attributeType=\"XML\" type=\"rotate\" dur=\"1s\" from=\"0 50 50\" to=\"360 50 50\" repeatCount=\"indefinite\" /></path></svg>');\n}\n\n.vuuTableGroupHeaderCell {\n  --vuuColumnHeaderPill-margin: 0;\n  --cell-align: \"flex-start\";\n  text-align: left;\n  cursor: default;\n  /* ensure header row sits atop everything else when scrolling down */\n\n  --vuuColumnHeaderPill-margin: 0;\n  --vuuColumnHeaderPill-flex: 0 0 24px;\n\n  align-items: center;\n  background-color: var(\n    --vuuTableHeaderCell-background,\n    var(--table-background)\n  );\n  border-bottom: none;\n  border-right-color: var(--cell-borderColor);\n  border-right-style: solid;\n  border-right-width: 1px;\n  box-sizing: border-box;\n  display: inline-flex;\n  gap: 4px;\n  height: 100%;\n  padding: 0 12px 0 4px;\n  position: relative;\n  vertical-align: top;\n\n  &.vuuPinLeft,\n  &.vuuPinRight {\n    background-color: var(\n      --vuuTableHeaderCell-background,\n      var(--table-background)\n    );\n  }\n}\n\n.vuuTableGroupHeaderCell-inner {\n  align-items: center;\n  display: flex;\n  gap: 4px;\n  height: 100%;\n  padding-left: 1px;\n}\n\n.vuuTableGroupHeaderCell-col {\n  align-items: center;\n  background-color: inherit;\n  display: inline-flex;\n  flex: 0 1 auto;\n  height: calc(var(--vuuTableHeaderHeight) - 2px);\n  justify-content: space-between;\n  padding-right: 8px;\n  position: relative;\n}\n\n.vuuTableGroupHeaderCell-label {\n  align-items: center;\n  display: flex;\n  flex: 0 0 auto;\n}\n\n.vuuTableGroupHeaderCell-close {\n  --vuu-icon-height: 18px;\n  --vuu-icon-width: 18px;\n  cursor: pointer;\n  left: 3px;\n}\n\n.vuuTableGroupHeaderCell-resizing {\n  --columnResizer-color: var(--salt-color-blue-500);\n  --columnResizer-height: var(--table-height);\n  --columnResizer-width: 2px;\n}\n.vuuTableGroupHeaderCell-pending {\n  --pending-content: \"\";\n}\n\n.vuuTableGroupHeaderCell-col:has(+ .vuuColumnResizer):after {\n  content: var(--pending-content);\n  width: 24px;\n  height: 24px;\n  background-image: var(--svg-spinner);\n  background-repeat: no-repeat;\n  background-size: cover;\n}\n\n.vuuTableGroupHeaderCell:focus {\n  outline: var(\n    --vuuTableCell-outline,\n    solid var(--salt-focused-outlineColor) 2px\n  );\n  outline-offset: -2px;\n  /** This is to achieve a white background to outline dashes */\n  box-shadow: inset 0 0 0 var(--cell-outline-width) white;\n  border-bottom: none;\n}\n";
 
 module.exports = headerCellCss;
 //# sourceMappingURL=GroupHeaderCell.css.js.map

package/cjs/table-cell/TableCell.css.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var tableCellCss = ".vuuTableCell {\n  border-right-color: var(--cell-borderColor);\n  border-right-style: solid;\n  border-right-width: 1px;\n  /* unfortunately inline-flex doesn't play nice with text-overflow ellipsis */\n  display: inline-block;\n  white-space: nowrap;\n  height: 100%;\n  outline-offset: -2px;\n  overflow: hidden;\n  padding: var(--vuuTableCell-padding, 0 11px 0 8px);\n  text-overflow: ellipsis;\n  vertical-align: top;\n}\n\n.vuuTableCell-right {\n  text-align: right;\n}\n\n.vuuTableCell-editable {\n  align-items: center;\n  display: inline-flex;\n  text-overflow: unset;\n}\n\n.vuuTableCell:focus {\n  outline: var(\n    --vuuTableCell-outline,\n    solid var(--salt-focused-outlineColor) 2px\n  );\n  /** This is to achieve a white background to outline dashes */\n  box-shadow: inset 0 0 0 var(--cell-outline-width) white;\n  border-bottom: none;\n}\n\n.vuuTableRow-selected .vuuTableCell:not(.vuuTableCell-editable):focus {\n  outline: var(\n    --vuuTableCell-outline,\n    solid var(--salt-focused-outlineColor) 2px\n  );\n\n  &:has(.vuuCheckboxRowSelector) {\n    outline: none;\n  }\n}\n.vuuTableCell-editable:focus {\n  outline: none;\n}\n\n.vuuTableCell.ContextOpen {\n  outline: var(\n    --vuuTableCell-outline,\n    solid var(--vuuTableCell-contextOpen-outlineColor, var(--salt-focused-outlineColor)) 2px\n  );\n}\n";
+var tableCellCss = ".vuuTableCell {\n  border-right-color: var(--cell-borderColor);\n  border-right-style: solid;\n  border-right-width: 1px;\n  /* unfortunately inline-flex doesn't play nice with text-overflow ellipsis */\n  display: inline-block;\n  white-space: nowrap;\n  height: 100%;\n  outline-offset: -2px;\n  overflow: hidden;\n  padding: var(--vuuTableCell-padding, 0 11px 0 8px);\n  text-overflow: ellipsis;\n  vertical-align: top;\n}\n\n.vuuTableCell-right {\n  text-align: right;\n}\n\n.vuuTableCell-editable {\n  align-items: center;\n  display: inline-flex;\n  padding: 0px 1px 0 2px;\n}\n\n.vuuTableCell-editable:focus-within,\n.vuuTableCell:focus {\n  outline: var(\n    --vuuTableCell-outline,\n    solid var(--salt-focused-outlineColor) 2px\n  );\n  /** This is to achieve a white background to outline dashes */\n  box-shadow: inset 0 0 0 var(--cell-outline-width) white;\n  border-bottom: none;\n}\n\n.vuuTableCell-editable.vuuEditing {\n  outline: var(\n    --vuuTableCell-outline,\n    dotted var(--salt-focused-outlineColor) 2px\n  );\n\n}\n\n.vuuTableRow-selected .vuuTableCell:not(.vuuTableCell-editable):focus {\n  outline: var(\n    --vuuTableCell-outline,\n    solid var(--salt-focused-outlineColor) 2px\n  );\n\n  &:has(.vuuCheckboxRowSelector) {\n    outline: none;\n  }\n}\n.vuuTableCell-editable:focus {\n  outline: none;\n}\n\n.vuuTableCell.ContextOpen {\n  outline: var(\n    --vuuTableCell-outline,\n    solid var(--vuuTableCell-contextOpen-outlineColor, var(--salt-focused-outlineColor)) 2px\n  );\n}\n";
 
 module.exports = tableCellCss;
 //# sourceMappingURL=TableCell.css.js.map

package/cjs/table-cell/TableCell.js

@@ -1,9 +1,9 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
-var vuuUtils = require('@vuu-ui/vuu-utils');
 var styles = require('@salt-ds/styles');
 var window = require('@salt-ds/window');
+var vuuUtils = require('@vuu-ui/vuu-utils');
 var react = require('react');
 var useCell = require('../useCell.js');
 var useHighlighting = require('../useHighlighting.js');
@@ -32,30 +32,30 @@ const TableCell = ({
     (editState, editPhase) => {
       if (editPhase === "commit") {
         const { serverDataType = "string" } = column;
-        if (onDataEdited) {
-          const typedValue = vuuUtils.getTypedValue(
-            String(editState.value),
-            serverDataType,
-            true
-          );
-          return onDataEdited({
+        const typedValue = vuuUtils.getTypedValue(
+          String(editState.value),
+          serverDataType,
+          true
+        );
+        return onDataEdited?.(
+          {
             ...editState,
             row,
             columnName: column.name,
             value: typedValue
-          });
-        } else {
-          throw Error(
-            "TableCell onDataEdited prop not supplied for an editable cell"
-          );
-        }
+          },
+          editPhase
+        );
       } else {
         setHasError(editState.isValid === false);
-        onDataEdited({
-          ...editState,
-          row,
-          columnName: column.name
-        });
+        onDataEdited?.(
+          {
+            ...editState,
+            row,
+            columnName: column.name
+          },
+          editPhase
+        );
         return void 0;
       }
     },