@vuu-ui/vuu-table 0.9.3 → 0.10.0

package/cjs/Row.js

@@ -46,6 +46,7 @@ const Row = react.memo(
     onClick,
     onDataEdited,
     onToggleGroup,
+    searchPattern,
     showBookends = true,
     virtualColSpan = 0,
     zebraStripes = false,
@@ -131,7 +132,8 @@ const Row = react.memo(
                 columnMap,
                 onClick: isGroup || isJsonCell ? handleGroupCellClick : void 0,
                 onDataEdited,
-                row
+                row,
+                searchPattern
               },
               column.name
             );

package/cjs/Row.js.map

@@ -1 +1 @@
-{"version":3,"file":"Row.js","sources":["../src/Row.tsx"],"sourcesContent":["import { RowProps, RuntimeColumnDescriptor } from \"@vuu-ui/vuu-table-types\";\nimport {\n  RowSelected,\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    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]: selectionStatus,\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 { True, First, Last } = RowSelected;\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        [`${classBase}-selected`]: selectionStatus & True,\n        [`${classBase}-selectedStart`]: selectionStatus & First,\n        [`${classBase}-selectedEnd`]: selectionStatus & Last,\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-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            />\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","RowSelected","isGroupColumn","isJsonGroup","queryClosest","jsxs","VirtualColSpan","isNotHidden","isJsonColumn","TableGroupCell","TableCell"],"mappings":"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"}
+{"version":3,"file":"Row.js","sources":["../src/Row.tsx"],"sourcesContent":["import { RowProps, RuntimeColumnDescriptor } from \"@vuu-ui/vuu-table-types\";\nimport {\n  RowSelected,\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]: selectionStatus,\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 { True, First, Last } = RowSelected;\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        [`${classBase}-selected`]: selectionStatus & True,\n        [`${classBase}-selectedStart`]: selectionStatus & First,\n        [`${classBase}-selectedEnd`]: selectionStatus & Last,\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-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","RowSelected","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-next-selection-bookend-width: 4px;\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(--vuu-table-next-selection-bookend-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    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";
+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-next-selection-bookend-width: 4px;\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(--vuu-table-next-selection-bookend-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}";
 
 module.exports = tableCss;
 //# sourceMappingURL=Table.css.js.map

package/cjs/Table.js

@@ -36,6 +36,7 @@ const TableCore = ({
   groupToggleTarget,
   highlightedIndex: highlightedIndexProp,
   id: idProp,
+  lowerCaseSearchPattern,
   navigationStyle = "cell",
   onAvailableColumnsChange,
   onConfigChange,
@@ -214,6 +215,7 @@ const TableCore = ({
                           offset: showPaginationControls ? 0 : getRowOffset(data2),
                           onToggleGroup,
                           showBookends: selectionBookendWidth > 0,
+                          searchPattern: lowerCaseSearchPattern,
                           virtualColSpan: scrollProps.virtualColSpan,
                           zebraStripes: tableAttributes.zebraStripes
                         },
@@ -284,6 +286,7 @@ const Table = react.forwardRef(function Table2({
   rowHeight: rowHeightProp,
   rowToObject,
   scrollingApiRef,
+  searchPattern = "",
   selectionBookendWidth = 4,
   selectionModel,
   showColumnHeaders,
@@ -411,6 +414,7 @@ const Table = react.forwardRef(function Table2({
             rowHeight,
             rowToObject,
             scrollingApiRef,
+            lowerCaseSearchPattern: vuuUtils.lowerCase(searchPattern),
             selectionBookendWidth,
             selectionModel,
             showColumnHeaders,

package/cjs/Table.js.map

@@ -1 +1 @@
-{"version":3,"file":"Table.js","sources":["../src/Table.tsx"],"sourcesContent":["import {\n  DataSource,\n  SchemaColumn,\n  Selection,\n  SelectionChangeHandler,\n} from \"@vuu-ui/vuu-data-types\";\nimport { ContextMenuProvider } from \"@vuu-ui/vuu-popups\";\nimport {\n  CustomHeader,\n  DataCellEditNotification,\n  GroupToggleTarget,\n  RowProps,\n  TableConfig,\n  TableConfigChangeHandler,\n  TableRowClickHandler,\n  TableRowSelectHandler,\n  TableSelectionModel,\n} from \"@vuu-ui/vuu-table-types\";\nimport type { DragDropState } from \"@vuu-ui/vuu-ui-controls\";\nimport {\n  DragStartHandler,\n  MeasuredContainer,\n  MeasuredContainerProps,\n  MeasuredSize,\n  dragStrategy,\n  reduceSizeHeight,\n} from \"@vuu-ui/vuu-ui-controls\";\nimport { metadataKeys, RowToObjectMapper, useId } from \"@vuu-ui/vuu-utils\";\nimport { useForkRef } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport cx from \"clsx\";\nimport {\n  CSSProperties,\n  ComponentType,\n  FC,\n  ForwardedRef,\n  RefObject,\n  forwardRef,\n  useCallback,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\nimport { Row as DefaultRow, RowProxy } from \"./Row\";\nimport { PaginationControl } from \"./pagination\";\nimport { TableHeader } from \"./table-header\";\nimport { useMeasuredHeight } from \"./useMeasuredHeight\";\nimport { useTable } from \"./useTable\";\nimport { ScrollingAPI } from \"./useTableScroll\";\n\nimport tableCss from \"./Table.css\";\nimport { TableCellBlock } from \"./cell-block/cellblock-utils\";\n\nconst classBase = \"vuuTable\";\n\nconst { IDX, RENDER_IDX } = metadataKeys;\n\nexport type TableNavigationStyle = \"none\" | \"cell\" | \"row\" | \"tree\";\n\nexport interface TableProps\n  extends Omit<MeasuredContainerProps, \"onDragStart\" | \"onDrop\" | \"onSelect\"> {\n  /**\n   * A react function componnet that will be rendered if there are no rows to display\n   */\n  EmptyDisplay?: ComponentType;\n  Row?: FC<RowProps>;\n  /**\n   * Allow a block of cells to be selected. Typically to be copied.\n   */\n  allowCellBlockSelection?: boolean;\n  allowConfigEditing?: boolean;\n  /**\n   * Allow column headers to be dragged to re-arrange\n   */\n  allowDragColumnHeader?: boolean;\n  /**\n   * Allow rows to be draggable\n   */\n  allowDragDrop?: boolean | dragStrategy;\n\n  /**\n   * required if a fully featured column picker is to be available\n   */\n  availableColumns?: SchemaColumn[];\n  /**\n   * Provide configuration settings for Table. At minimun, column\n   * descriptors must be provided.\n   */\n  config: TableConfig;\n  dataSource: DataSource;\n\n  /**\n   * define rows ro be initially selected based on row index positions\n   */\n  defaultSelectedIndexValues?: Selection;\n  /**\n   * define rows ro be initially selected based on row key value. Not all DataSource\n   * implementations support this feature.\n   */\n  defaultSelectedKeyValues?: string[];\n\n  disableFocus?: boolean;\n  /**\n   * Allows additional custom element(s) to be embedded immediately below column headers.\n   * Could be used to present inline filters for example.\n   * Accepts either a React Element or a Function Component or an array of these. If a React\n   * Function Component is used, it will be passed the props described in BaseRowProps.\n   */\n  customHeader?: CustomHeader | CustomHeader[];\n  /**\n   * When rows are grouped, user can click group row(s) to expand/collapse display of child rows.\n   * This allows precise configuration of where user may click to trigger toggle/collapse. When\n   * row selection is also supported, clicking outside the region specified here will select or\n   * deselect the row.\n   * - toggle-icon - the small toggle icon must be clicked directly\n   * - group-column (default) - user can click anywhere within the group column, i.e on the icon or the column text\n   */\n  groupToggleTarget?: GroupToggleTarget;\n  /**\n   * Defined how focus navigation within data cells will be handled by table.\n   * Default is cell.\n   */\n  highlightedIndex?: number;\n\n  /**\n   * Behaves in most respects like viewportRowLimit except that, when there are fewer\n   * rows available than the limit set here, the Table height will reduce. This can be\n   * useful where a Table is used in a dropdown control.\n   */\n  maxViewportRowLimit?: number;\n\n  /**\n   * Determines bahaviour of keyboard navigation , either row focused or cell focused.\n   * `tree` is a specialised navigation behaviour only useful where table is being\n   * used to present purely grouped data (see TreeTable)\n   */\n  navigationStyle?: TableNavigationStyle;\n  /**\n   * required if a fully featured column picker is to be available.\n   * Available columns can be changed by the addition or removal of\n   * one or more calculated columns.\n   */\n  onAvailableColumnsChange?: (columns: SchemaColumn[]) => void;\n  /**\n   * This callback will be invoked any time a config attribute of TableConfig\n   * is changed. By persisting this value and providing it to the Table as a\n   * prop, table state can be persisted across sessions.\n   */\n  onConfigChange?: TableConfigChangeHandler;\n\n  /**\n   * In a Table with editable cells, this callback will be invoked every time\n   * a user performs any edit operation on an editable field.\n   */\n  onDataEdited?: DataCellEditNotification;\n\n  onDragStart?: DragStartHandler;\n  onDrop?: (dragDropState: DragDropState) => void;\n\n  onHighlight?: (idx: number) => void;\n  /**\n   * callback invoked when user 'clicks' a table row. CLick triggered either\n   * via mouse click or keyboard (default ENTER);\n   */\n  onRowClick?: TableRowClickHandler;\n  onSelect?: TableRowSelectHandler;\n  /**\n   * Triggered when a block of cells is selected. CellBlock selection can be\n   * effected with either mouse or keyboard.\n   * - mouse: hold down mouse and drag over selection area\n   * - keyboard: press and hold shift key from start cell, then use arrow keys\n   *   to extend selection block.\n   *\n   * This callback is invoked when mouse is released or shift key released.\n   */\n  onSelectCellBlock?: (cellBlock: TableCellBlock) => void;\n\n  onSelectionChange?: SelectionChangeHandler;\n  renderBufferSize?: number;\n\n  /**\n   * When a row is selected and onSelect provided, onSelect will be invoked with a\n   * DataSourceRowObject, derived from the internal representation of a data row,\n   * DataSourceRow. The data attribute of DataSourceRowObject is a simple map of\n   * column.name : value.\n   * This prop allows a custom function to be provided to make the conversion from\n   * DataSourceRow to DataSourceRowObject. It will very rarely be needed. It is\n   * used by the Treetable.\n   */\n  rowToObject?: RowToObjectMapper;\n\n  /**\n   * Only applicable to grouped data. If there are selected rows which are not top-level\n   * items and group items above are not already expanded, expand all group items in\n   * the hierarchy above selected item. Selected items will thus always be visible, initially.\n   * This affects items set at load time via defaultSelectedKeyValues as well as items\n   * selected programatically (ie not directly by user).\n   * Nodes can of course be collapsed by user at runtime which may hide selected rows.\n   * Note: this is not supported by all DataSource implementations\n   */\n  revealSelected?: boolean;\n  /**\n   * Pixel height of rows. If specified here, this will take precedence over CSS\n   * values and Table will not respond to density changes.\n   */\n  rowHeight?: number;\n  /**\n   * imperative API for scrolling table\n   */\n  scrollingApiRef?: ForwardedRef<ScrollingAPI>;\n\n  /**\n   * Selection Bookends style the left and right edge of a selection block.\n   * They are optional, value currently defaults to 4.\n   * TODO this should just live in CSS\n   */\n  selectionBookendWidth?: number;\n  /**\n   * Selection behaviour for Table:\n   * `none` selection disabled\n   * `single` no more than one row may be selected\n   * `extended` (default) multiple rows can be selected\n   * `checkbox` same behaviour as extended, with checkbox column for selection\n   */\n  selectionModel?: TableSelectionModel;\n  /**\n   * if false, table rendered without headers. Useful when table is being included in a\n   * composite component.\n   */\n  showColumnHeaders?: boolean;\n  /**\n   * if false, column headers will not display menu icon. Menu items are still available\n   * from contexct menu\n   */\n  showColumnHeaderMenus?: boolean;\n  /**\n   * if true, pagination will be used to navigate data, scrollbars will not be rendered\n   */\n  showPaginationControls?: boolean;\n\n  /**\n   * As an alternative to sizing the Table height via CSS or via an explicit height value,\n   * specify the number of rows to be displayed within the Viewport. The actual height\n   * will then be the product of  viewportRowLimit and rowHeight. Row Height will be\n   * determined in the usual way, it can be specified explicitly in a prop or set via\n   * CSS. If both explicit height and viewportRowLimit are provided by props, rowHeight\n   * will be derived from these. Do not pass props for all three values - height,\n   * rowHeight and viewportRowLimit. That will be rejected.\n   * Use maxViewportRowLimit rather than viewportRowLimit if the height of the table\n   * should be reduced when fewer rows are actually available than the limit specified.\n   */\n  viewportRowLimit?: number;\n}\n\nconst TableCore = ({\n  EmptyDisplay,\n  Row = DefaultRow,\n  allowCellBlockSelection,\n  allowDragColumnHeader = true,\n  allowDragDrop,\n  availableColumns,\n  config,\n  containerRef,\n  customHeader,\n  dataSource,\n  defaultSelectedIndexValues,\n  defaultSelectedKeyValues,\n  disableFocus = false,\n  groupToggleTarget,\n  highlightedIndex: highlightedIndexProp,\n  id: idProp,\n  navigationStyle = \"cell\",\n  onAvailableColumnsChange,\n  onConfigChange,\n  onDataEdited: onDataEditedProp,\n  onDragStart,\n  onDrop,\n  onHighlight,\n  onRowClick: onRowClickProp,\n  onSelect,\n  onSelectCellBlock,\n  onSelectionChange,\n  renderBufferSize = 0,\n  revealSelected,\n  rowHeight,\n  rowToObject,\n  scrollingApiRef,\n  selectionBookendWidth = 0,\n  selectionModel = \"extended\",\n  showColumnHeaders = true,\n  showColumnHeaderMenus = true,\n  showPaginationControls,\n  size,\n}: Omit<\n  TableProps,\n  \"maxViewportRowLimit\" | \"rowHeight\" | \"viewportRowLimit\"\n> & {\n  containerRef: RefObject<HTMLDivElement>;\n  rowHeight: number;\n  size: MeasuredSize;\n}) => {\n  const id = useId(idProp);\n  const {\n    cellBlock,\n    columnMap,\n    columns,\n    data,\n    draggableRow,\n    focusCellPlaceholderKeyDown,\n    focusCellPlaceholderRef,\n    getRowOffset,\n    handleContextMenuAction,\n    headerState: { height: headerHeight, count: headerCount },\n    headings,\n    highlightedIndex,\n    menuBuilder,\n    onDataEdited,\n    onHeaderHeightMeasured,\n    onMoveColumn,\n    onMoveGroupColumn,\n    onRemoveGroupColumn,\n    onResizeColumn,\n    onRowClick,\n    onSortColumn,\n    onToggleGroup,\n    rowClassNameGenerator,\n    scrollProps,\n    tableAttributes,\n    tableBodyRef,\n    tableConfig,\n    viewportMeasurements,\n    ...tableProps\n  } = useTable({\n    allowCellBlockSelection,\n    allowDragDrop,\n    availableColumns,\n    config,\n    containerRef,\n    dataSource,\n    defaultSelectedIndexValues,\n    defaultSelectedKeyValues,\n    disableFocus,\n    highlightedIndex: highlightedIndexProp,\n    id,\n    navigationStyle,\n    onAvailableColumnsChange,\n    onConfigChange,\n    onDataEdited: onDataEditedProp,\n    onDragStart,\n    onDrop,\n    onHighlight,\n    onRowClick: onRowClickProp,\n    onSelect,\n    onSelectCellBlock,\n    onSelectionChange,\n    renderBufferSize,\n    revealSelected,\n    rowHeight,\n    rowToObject,\n    scrollingApiRef,\n    selectionBookendWidth,\n    selectionModel,\n    showColumnHeaders,\n    showPaginationControls,\n    size,\n  });\n\n  const contentContainerClassName = cx(`${classBase}-contentContainer`, {\n    [`${classBase}-colLines`]: tableAttributes.columnSeparators,\n    [`${classBase}-rowLines`]: tableAttributes.rowSeparators,\n    [`${classBase}-zebra`]: tableAttributes.zebraStripes,\n  });\n\n  const cssScrollbarSize = {\n    \"--horizontal-scrollbar-height\": `${viewportMeasurements.horizontalScrollbarHeight}px`,\n    \"--vertical-scrollbar-width\": `${viewportMeasurements.verticalScrollbarWidth}px`,\n  } as CSSProperties;\n\n  const cssVariables = {\n    ...cssScrollbarSize,\n    \"--content-height\": `${viewportMeasurements.contentHeight}px`,\n    \"--content-width\": `${viewportMeasurements.contentWidth}px`,\n    \"--pinned-width-left\": `${viewportMeasurements.pinnedWidthLeft}px`,\n    \"--pinned-width-right\": `${viewportMeasurements.pinnedWidthRight}px`,\n    \"--total-header-height\": `${headerHeight}px`,\n    \"--viewport-body-height\": `${viewportMeasurements.viewportBodyHeight}px`,\n  } as CSSProperties;\n\n  const headersReady = showColumnHeaders === false || headerHeight > 0;\n  const readyToRenderTableBody = headersReady && data.length > 0;\n\n  if (dataSource.size === 0 && EmptyDisplay) {\n    return <EmptyDisplay />;\n  }\n\n  return (\n    <ContextMenuProvider\n      menuActionHandler={handleContextMenuAction}\n      menuBuilder={menuBuilder}\n    >\n      {showPaginationControls !== true ? (\n        <div\n          className={`${classBase}-scrollbarContainer`}\n          ref={scrollProps.scrollbarContainerRef}\n          style={cssVariables}\n          tabIndex={-1}\n        >\n          <div className={`${classBase}-scrollbarContent`} />\n        </div>\n      ) : null}\n      <div\n        className={contentContainerClassName}\n        ref={scrollProps.contentContainerRef}\n        style={cssVariables}\n      >\n        <div\n          {...tableProps}\n          className={`${classBase}-table`}\n          role=\"table\"\n          tabIndex={disableFocus ? undefined : -1}\n        >\n          {showColumnHeaders ? (\n            <TableHeader\n              allowDragColumnHeader={allowDragColumnHeader}\n              columns={scrollProps.columnsWithinViewport}\n              customHeader={customHeader}\n              headings={headings}\n              onHeightMeasured={onHeaderHeightMeasured}\n              onMoveColumn={onMoveColumn}\n              onMoveGroupColumn={onMoveGroupColumn}\n              onRemoveGroupColumn={onRemoveGroupColumn}\n              onResizeColumn={onResizeColumn}\n              onSortColumn={onSortColumn}\n              showColumnHeaderMenus={showColumnHeaderMenus}\n              tableConfig={tableConfig}\n              tableId={id}\n              virtualColSpan={scrollProps.virtualColSpan}\n            />\n          ) : null}\n          {readyToRenderTableBody ? (\n            <div className={`${classBase}-body`} ref={tableBodyRef}>\n              {data.map((data) => {\n                const ariaRowIndex = data[IDX] + headerCount + 1;\n                return (\n                  <Row\n                    aria-rowindex={ariaRowIndex}\n                    classNameGenerator={rowClassNameGenerator}\n                    columnMap={columnMap}\n                    columns={scrollProps.columnsWithinViewport}\n                    groupToggleTarget={groupToggleTarget}\n                    highlighted={highlightedIndex === ariaRowIndex}\n                    key={data[RENDER_IDX]}\n                    onClick={onRowClick}\n                    onDataEdited={onDataEdited}\n                    row={data}\n                    offset={showPaginationControls ? 0 : getRowOffset(data)}\n                    onToggleGroup={onToggleGroup}\n                    showBookends={selectionBookendWidth > 0}\n                    virtualColSpan={scrollProps.virtualColSpan}\n                    zebraStripes={tableAttributes.zebraStripes}\n                  />\n                );\n              })}\n              {/* \n                The focusCellPlaceholder allows us to deal with the situation where a cell \n                that has focus is scrolled out of the viewport. That cell, along with the \n                containing row, will be recycled to render another DataRow. The html table \n                cell must not retain focus once it is re-used but we need to track the \n                original focus, in case user uses arrow key to resume navigation. \n                The placeholder is fixed in place at the location where the focused cell \n                was last rendered. It assumes focus. If we get an arrowkey mousedown event \n                on the placeholder, the user has resumed navigation whilst the focused cell \n                is offscreen. We scroll back to the focus location and pass focus back to \n                the correct target cell.\n              */}\n              <div\n                aria-hidden={true}\n                className={`${classBase}-focusCellPlaceholder`}\n                onKeyDown={focusCellPlaceholderKeyDown}\n                ref={focusCellPlaceholderRef}\n                tabIndex={-1}\n              />\n\n              {cellBlock}\n            </div>\n          ) : null}\n        </div>\n      </div>\n      {/* \n        This keeps the heights of content container and scrollbar container aligned for\n        cases where we rely on height: fit-content. (ScrollbarContainer isn't taken into \n        account because its absolutely positioned).\n      */}\n      <div\n        className={`${classBase}-scrollbarFiller`}\n        style={cssScrollbarSize}\n      />\n      {draggableRow}\n    </ContextMenuProvider>\n  );\n};\n\nexport const Table = forwardRef(function Table(\n  {\n    EmptyDisplay,\n    Row,\n    allowCellBlockSelection,\n    allowDragColumnHeader,\n    allowDragDrop,\n    availableColumns,\n    className: classNameProp,\n    config,\n    customHeader,\n    dataSource,\n    defaultSelectedIndexValues,\n    defaultSelectedKeyValues,\n    disableFocus,\n    groupToggleTarget,\n    height,\n    highlightedIndex,\n    id,\n    maxViewportRowLimit,\n    navigationStyle,\n    onAvailableColumnsChange,\n    onConfigChange,\n    onDataEdited,\n    onDragStart,\n    onDrop,\n    onHighlight,\n    onRowClick,\n    onSelect,\n    onSelectCellBlock,\n    onSelectionChange,\n    renderBufferSize,\n    revealSelected,\n    rowHeight: rowHeightProp,\n    rowToObject,\n    scrollingApiRef,\n    selectionBookendWidth = 4,\n    selectionModel,\n    showColumnHeaders,\n    showColumnHeaderMenus,\n    showPaginationControls,\n    style: styleProp,\n    viewportRowLimit,\n    width,\n    ...htmlAttributes\n  }: TableProps,\n  forwardedRef: ForwardedRef<HTMLDivElement>,\n) {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-table\",\n    css: tableCss,\n    window: targetWindow,\n  });\n\n  const containerRef = useRef<HTMLDivElement>(null);\n\n  const [size, _setSize] = useState<MeasuredSize>();\n  // TODO this will rerender entire table, move footer into seperate component\n  const { measuredHeight: rowHeight, measuredRef: rowRef } = useMeasuredHeight({\n    height: rowHeightProp,\n  });\n  const { measuredHeight: footerHeight, measuredRef: footerRef } =\n    useMeasuredHeight({});\n\n  const rowLimit = maxViewportRowLimit ?? viewportRowLimit;\n\n  if (config === undefined) {\n    throw Error(\n      \"vuu Table requires config prop. Minimum config is list of Column Descriptors\",\n    );\n  }\n  if (dataSource === undefined) {\n    throw Error(\"vuu Table requires dataSource prop\");\n  }\n  if (defaultSelectedIndexValues && defaultSelectedKeyValues) {\n    throw Error(\n      `defaultSelectedIndexValues and defaultSelectedKeyValues can not be used in combination. Use at most one.`,\n    );\n  }\n\n  if (showPaginationControls && renderBufferSize !== undefined) {\n    console.warn(\n      `Table: When pagination controls are used, renderBufferSize is ignored`,\n    );\n  }\n\n  if (rowLimit && height && rowHeightProp) {\n    console.warn(\n      `Table: when viewportRowLimit, rowHeight and height are used in combination, height is ignored`,\n    );\n    height = rowLimit * rowHeightProp;\n  } else if (rowLimit && rowHeightProp) {\n    height = rowLimit * rowHeightProp;\n  } else if (rowLimit) {\n    height = rowLimit * rowHeight;\n  }\n\n  const sizeRef = useRef<MeasuredSize>();\n  const setSize = useCallback(\n    (size: MeasuredSize) => {\n      if (viewportRowLimit && !rowHeight) {\n        sizeRef.current = size;\n      } else if (\n        size.height !== sizeRef.current?.height ||\n        size.width !== sizeRef.current?.width\n      ) {\n        _setSize(size);\n      }\n    },\n    [rowHeight, viewportRowLimit],\n  );\n  useMemo(() => {\n    if (sizeRef.current && rowHeight) {\n      const size = {\n        ...sizeRef.current,\n        height: rowHeight * (viewportRowLimit as number),\n      };\n      sizeRef.current = size;\n      _setSize(size);\n    }\n  }, [rowHeight, viewportRowLimit]);\n\n  // TODO render TableHeader here and measure before row construction begins\n  // TODO we could have MeasuredContainer render a Provider and make size available via a context hook ?\n  return (\n    <MeasuredContainer\n      {...htmlAttributes}\n      className={cx(classBase, classNameProp, {\n        [`${classBase}-pagination`]: showPaginationControls,\n        [`${classBase}-maxViewportRowLimit`]: maxViewportRowLimit,\n        [`${classBase}-viewportRowLimit`]: viewportRowLimit,\n      })}\n      height={height}\n      id={id}\n      onResize={setSize}\n      ref={useForkRef(containerRef, forwardedRef)}\n      style={\n        {\n          ...styleProp,\n          \"--row-height-prop\": rowHeight > 0 ? `${rowHeight}px` : undefined,\n        } as CSSProperties\n      }\n      width={width}\n    >\n      <RowProxy ref={rowRef} height={rowHeightProp} />\n      {size &&\n      rowHeight &&\n      (footerHeight || showPaginationControls !== true) ? (\n        <TableCore\n          EmptyDisplay={EmptyDisplay}\n          Row={Row}\n          allowCellBlockSelection={allowCellBlockSelection}\n          allowDragColumnHeader={allowDragColumnHeader}\n          allowDragDrop={allowDragDrop}\n          availableColumns={availableColumns}\n          config={config}\n          containerRef={containerRef}\n          customHeader={customHeader}\n          dataSource={dataSource}\n          defaultSelectedIndexValues={defaultSelectedIndexValues}\n          defaultSelectedKeyValues={defaultSelectedKeyValues}\n          disableFocus={disableFocus}\n          groupToggleTarget={groupToggleTarget}\n          highlightedIndex={highlightedIndex}\n          id={id}\n          navigationStyle={navigationStyle}\n          onAvailableColumnsChange={onAvailableColumnsChange}\n          onConfigChange={onConfigChange}\n          onDataEdited={onDataEdited}\n          onDragStart={onDragStart}\n          onDrop={onDrop}\n          onHighlight={onHighlight}\n          onRowClick={onRowClick}\n          onSelect={onSelect}\n          onSelectCellBlock={onSelectCellBlock}\n          onSelectionChange={onSelectionChange}\n          renderBufferSize={\n            showPaginationControls ? 0 : Math.max(5, renderBufferSize ?? 0)\n          }\n          revealSelected={revealSelected}\n          rowHeight={rowHeight}\n          rowToObject={rowToObject}\n          scrollingApiRef={scrollingApiRef}\n          selectionBookendWidth={selectionBookendWidth}\n          selectionModel={selectionModel}\n          showColumnHeaders={showColumnHeaders}\n          showColumnHeaderMenus={showColumnHeaderMenus}\n          showPaginationControls={showPaginationControls}\n          size={reduceSizeHeight(size, footerHeight)}\n        />\n      ) : null}\n      {showPaginationControls ? (\n        <div className={`${classBase}-footer`} ref={footerRef}>\n          <PaginationControl dataSource={dataSource} />\n        </div>\n      ) : null}\n    </MeasuredContainer>\n  );\n});\n"],"names":["metadataKeys","Row","DefaultRow","useId","useTable","jsxs","ContextMenuProvider","jsx","TableHeader","data","forwardRef","Table","useWindow","useComponentCssInjection","tableCss","useRef","useState","useMeasuredHeight","useCallback","size","useMemo","MeasuredContainer","useForkRef","RowProxy","reduceSizeHeight","PaginationControl"],"mappings":"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"}
+{"version":3,"file":"Table.js","sources":["../src/Table.tsx"],"sourcesContent":["import {\n  DataSource,\n  SchemaColumn,\n  Selection,\n  SelectionChangeHandler,\n} from \"@vuu-ui/vuu-data-types\";\nimport { ContextMenuProvider } from \"@vuu-ui/vuu-popups\";\nimport {\n  CustomHeader,\n  DataCellEditNotification,\n  GroupToggleTarget,\n  RowProps,\n  TableConfig,\n  TableConfigChangeHandler,\n  TableRowClickHandler,\n  TableRowSelectHandler,\n  TableSelectionModel,\n} from \"@vuu-ui/vuu-table-types\";\nimport type { DragDropState } from \"@vuu-ui/vuu-ui-controls\";\nimport {\n  DragStartHandler,\n  MeasuredContainer,\n  MeasuredContainerProps,\n  MeasuredSize,\n  dragStrategy,\n  reduceSizeHeight,\n} from \"@vuu-ui/vuu-ui-controls\";\nimport {\n  lowerCase,\n  metadataKeys,\n  RowToObjectMapper,\n  useId,\n} from \"@vuu-ui/vuu-utils\";\nimport { useForkRef } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport cx from \"clsx\";\nimport {\n  CSSProperties,\n  ComponentType,\n  FC,\n  ForwardedRef,\n  RefObject,\n  forwardRef,\n  useCallback,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\nimport { Row as DefaultRow, RowProxy } from \"./Row\";\nimport { PaginationControl } from \"./pagination\";\nimport { TableHeader } from \"./table-header\";\nimport { useMeasuredHeight } from \"./useMeasuredHeight\";\nimport { useTable } from \"./useTable\";\nimport { ScrollingAPI } from \"./useTableScroll\";\nimport { TableCellBlock } from \"./cell-block/cellblock-utils\";\n\nimport tableCss from \"./Table.css\";\n\nconst classBase = \"vuuTable\";\n\nconst { IDX, RENDER_IDX } = metadataKeys;\n\nexport type TableNavigationStyle = \"none\" | \"cell\" | \"row\" | \"tree\";\n\nexport interface TableProps\n  extends Omit<\n    MeasuredContainerProps,\n    \"onDragStart\" | \"onDrop\" | \"onSelect\" | \"searchPattern\"\n  > {\n  /**\n   * A react function componnet that will be rendered if there are no rows to display\n   */\n  EmptyDisplay?: ComponentType;\n  Row?: FC<RowProps>;\n  /**\n   * Allow a block of cells to be selected. Typically to be copied.\n   */\n  allowCellBlockSelection?: boolean;\n  allowConfigEditing?: boolean;\n  /**\n   * Allow column headers to be dragged to re-arrange\n   */\n  allowDragColumnHeader?: boolean;\n  /**\n   * Allow rows to be draggable\n   */\n  allowDragDrop?: boolean | dragStrategy;\n\n  /**\n   * required if a fully featured column picker is to be available\n   */\n  availableColumns?: SchemaColumn[];\n  /**\n   * Provide configuration settings for Table. At minimun, column\n   * descriptors must be provided.\n   */\n  config: TableConfig;\n  dataSource: DataSource;\n\n  /**\n   * define rows ro be initially selected based on row index positions\n   */\n  defaultSelectedIndexValues?: Selection;\n  /**\n   * define rows ro be initially selected based on row key value. Not all DataSource\n   * implementations support this feature.\n   */\n  defaultSelectedKeyValues?: string[];\n\n  disableFocus?: boolean;\n  /**\n   * Allows additional custom element(s) to be embedded immediately below column headers.\n   * Could be used to present inline filters for example.\n   * Accepts either a React Element or a Function Component or an array of these. If a React\n   * Function Component is used, it will be passed the props described in BaseRowProps.\n   */\n  customHeader?: CustomHeader | CustomHeader[];\n  /**\n   * When rows are grouped, user can click group row(s) to expand/collapse display of child rows.\n   * This allows precise configuration of where user may click to trigger toggle/collapse. When\n   * row selection is also supported, clicking outside the region specified here will select or\n   * deselect the row.\n   * - toggle-icon - the small toggle icon must be clicked directly\n   * - group-column (default) - user can click anywhere within the group column, i.e on the icon or the column text\n   */\n  groupToggleTarget?: GroupToggleTarget;\n  /**\n   * Defined how focus navigation within data cells will be handled by table.\n   * Default is cell.\n   */\n  highlightedIndex?: number;\n\n  /**\n   * Behaves in most respects like viewportRowLimit except that, when there are fewer\n   * rows available than the limit set here, the Table height will reduce. This can be\n   * useful where a Table is used in a dropdown control.\n   */\n  maxViewportRowLimit?: number;\n\n  /**\n   * Determines bahaviour of keyboard navigation , either row focused or cell focused.\n   * `tree` is a specialised navigation behaviour only useful where table is being\n   * used to present purely grouped data (see TreeTable)\n   */\n  navigationStyle?: TableNavigationStyle;\n  /**\n   * required if a fully featured column picker is to be available.\n   * Available columns can be changed by the addition or removal of\n   * one or more calculated columns.\n   */\n  onAvailableColumnsChange?: (columns: SchemaColumn[]) => void;\n  /**\n   * This callback will be invoked any time a config attribute of TableConfig\n   * is changed. By persisting this value and providing it to the Table as a\n   * prop, table state can be persisted across sessions.\n   */\n  onConfigChange?: TableConfigChangeHandler;\n\n  /**\n   * In a Table with editable cells, this callback will be invoked every time\n   * a user performs any edit operation on an editable field.\n   */\n  onDataEdited?: DataCellEditNotification;\n\n  onDragStart?: DragStartHandler;\n  onDrop?: (dragDropState: DragDropState) => void;\n\n  onHighlight?: (idx: number) => void;\n  /**\n   * callback invoked when user 'clicks' a table row. CLick triggered either\n   * via mouse click or keyboard (default ENTER);\n   */\n  onRowClick?: TableRowClickHandler;\n  onSelect?: TableRowSelectHandler;\n  /**\n   * Triggered when a block of cells is selected. CellBlock selection can be\n   * effected with either mouse or keyboard.\n   * - mouse: hold down mouse and drag over selection area\n   * - keyboard: press and hold shift key from start cell, then use arrow keys\n   *   to extend selection block.\n   *\n   * This callback is invoked when mouse is released or shift key released.\n   */\n  onSelectCellBlock?: (cellBlock: TableCellBlock) => void;\n\n  onSelectionChange?: SelectionChangeHandler;\n  renderBufferSize?: number;\n\n  /**\n   * When a row is selected and onSelect provided, onSelect will be invoked with a\n   * DataSourceRowObject, derived from the internal representation of a data row,\n   * DataSourceRow. The data attribute of DataSourceRowObject is a simple map of\n   * column.name : value.\n   * This prop allows a custom function to be provided to make the conversion from\n   * DataSourceRow to DataSourceRowObject. It will very rarely be needed. It is\n   * used by the Treetable.\n   */\n  rowToObject?: RowToObjectMapper;\n\n  /**\n   * Only applicable to grouped data. If there are selected rows which are not top-level\n   * items and group items above are not already expanded, expand all group items in\n   * the hierarchy above selected item. Selected items will thus always be visible, initially.\n   * This affects items set at load time via defaultSelectedKeyValues as well as items\n   * selected programatically (ie not directly by user).\n   * Nodes can of course be collapsed by user at runtime which may hide selected rows.\n   * Note: this is not supported by all DataSource implementations\n   */\n  revealSelected?: boolean;\n  /**\n   * Pixel height of rows. If specified here, this will take precedence over CSS\n   * values and Table will not respond to density changes.\n   */\n  rowHeight?: number;\n  /**\n   * imperative API for scrolling table\n   */\n  scrollingApiRef?: ForwardedRef<ScrollingAPI>;\n\n  /**\n   * If a search has been applied against data, this is the search text used.\n   * Will be used to highlight matching text.\n   */\n  searchPattern?: string;\n  /**\n   * Selection Bookends style the left and right edge of a selection block.\n   * They are optional, value currently defaults to 4.\n   * TODO this should just live in CSS\n   */\n  selectionBookendWidth?: number;\n  /**\n   * Selection behaviour for Table:\n   * `none` selection disabled\n   * `single` no more than one row may be selected\n   * `extended` (default) multiple rows can be selected\n   * `checkbox` same behaviour as extended, with checkbox column for selection\n   */\n  selectionModel?: TableSelectionModel;\n  /**\n   * if false, table rendered without headers. Useful when table is being included in a\n   * composite component.\n   */\n  showColumnHeaders?: boolean;\n  /**\n   * if false, column headers will not display menu icon. Menu items are still available\n   * from contexct menu\n   */\n  showColumnHeaderMenus?: boolean;\n  /**\n   * if true, pagination will be used to navigate data, scrollbars will not be rendered\n   */\n  showPaginationControls?: boolean;\n\n  /**\n   * As an alternative to sizing the Table height via CSS or via an explicit height value,\n   * specify the number of rows to be displayed within the Viewport. The actual height\n   * will then be the product of  viewportRowLimit and rowHeight. Row Height will be\n   * determined in the usual way, it can be specified explicitly in a prop or set via\n   * CSS. If both explicit height and viewportRowLimit are provided by props, rowHeight\n   * will be derived from these. Do not pass props for all three values - height,\n   * rowHeight and viewportRowLimit. That will be rejected.\n   * Use maxViewportRowLimit rather than viewportRowLimit if the height of the table\n   * should be reduced when fewer rows are actually available than the limit specified.\n   */\n  viewportRowLimit?: number;\n}\n\nconst TableCore = ({\n  EmptyDisplay,\n  Row = DefaultRow,\n  allowCellBlockSelection,\n  allowDragColumnHeader = true,\n  allowDragDrop,\n  availableColumns,\n  config,\n  containerRef,\n  customHeader,\n  dataSource,\n  defaultSelectedIndexValues,\n  defaultSelectedKeyValues,\n  disableFocus = false,\n  groupToggleTarget,\n  highlightedIndex: highlightedIndexProp,\n  id: idProp,\n  lowerCaseSearchPattern,\n  navigationStyle = \"cell\",\n  onAvailableColumnsChange,\n  onConfigChange,\n  onDataEdited: onDataEditedProp,\n  onDragStart,\n  onDrop,\n  onHighlight,\n  onRowClick: onRowClickProp,\n  onSelect,\n  onSelectCellBlock,\n  onSelectionChange,\n  renderBufferSize = 0,\n  revealSelected,\n  rowHeight,\n  rowToObject,\n  scrollingApiRef,\n  selectionBookendWidth = 0,\n  selectionModel = \"extended\",\n  showColumnHeaders = true,\n  showColumnHeaderMenus = true,\n  showPaginationControls,\n  size,\n}: Omit<\n  TableProps,\n  \"maxViewportRowLimit\" | \"rowHeight\" | \"searchPattern\" | \"viewportRowLimit\"\n> & {\n  containerRef: RefObject<HTMLDivElement>;\n  /**\n   * We lowercase this once, on entry, which is the format in which it will be used.\n   */\n  lowerCaseSearchPattern: Lowercase<string>;\n  rowHeight: number;\n  size: MeasuredSize;\n}) => {\n  const id = useId(idProp);\n  const {\n    cellBlock,\n    columnMap,\n    columns,\n    data,\n    draggableRow,\n    focusCellPlaceholderKeyDown,\n    focusCellPlaceholderRef,\n    getRowOffset,\n    handleContextMenuAction,\n    headerState: { height: headerHeight, count: headerCount },\n    headings,\n    highlightedIndex,\n    menuBuilder,\n    onDataEdited,\n    onHeaderHeightMeasured,\n    onMoveColumn,\n    onMoveGroupColumn,\n    onRemoveGroupColumn,\n    onResizeColumn,\n    onRowClick,\n    onSortColumn,\n    onToggleGroup,\n    rowClassNameGenerator,\n    scrollProps,\n    tableAttributes,\n    tableBodyRef,\n    tableConfig,\n    viewportMeasurements,\n    ...tableProps\n  } = useTable({\n    allowCellBlockSelection,\n    allowDragDrop,\n    availableColumns,\n    config,\n    containerRef,\n    dataSource,\n    defaultSelectedIndexValues,\n    defaultSelectedKeyValues,\n    disableFocus,\n    highlightedIndex: highlightedIndexProp,\n    id,\n    navigationStyle,\n    onAvailableColumnsChange,\n    onConfigChange,\n    onDataEdited: onDataEditedProp,\n    onDragStart,\n    onDrop,\n    onHighlight,\n    onRowClick: onRowClickProp,\n    onSelect,\n    onSelectCellBlock,\n    onSelectionChange,\n    renderBufferSize,\n    revealSelected,\n    rowHeight,\n    rowToObject,\n    scrollingApiRef,\n    selectionBookendWidth,\n    selectionModel,\n    showColumnHeaders,\n    showPaginationControls,\n    size,\n  });\n\n  const contentContainerClassName = cx(`${classBase}-contentContainer`, {\n    [`${classBase}-colLines`]: tableAttributes.columnSeparators,\n    [`${classBase}-rowLines`]: tableAttributes.rowSeparators,\n    [`${classBase}-zebra`]: tableAttributes.zebraStripes,\n  });\n\n  const cssScrollbarSize = {\n    \"--horizontal-scrollbar-height\": `${viewportMeasurements.horizontalScrollbarHeight}px`,\n    \"--vertical-scrollbar-width\": `${viewportMeasurements.verticalScrollbarWidth}px`,\n  } as CSSProperties;\n\n  const cssVariables = {\n    ...cssScrollbarSize,\n    \"--content-height\": `${viewportMeasurements.contentHeight}px`,\n    \"--content-width\": `${viewportMeasurements.contentWidth}px`,\n    \"--pinned-width-left\": `${viewportMeasurements.pinnedWidthLeft}px`,\n    \"--pinned-width-right\": `${viewportMeasurements.pinnedWidthRight}px`,\n    \"--total-header-height\": `${headerHeight}px`,\n    \"--viewport-body-height\": `${viewportMeasurements.viewportBodyHeight}px`,\n  } as CSSProperties;\n\n  const headersReady = showColumnHeaders === false || headerHeight > 0;\n  const readyToRenderTableBody = headersReady && data.length > 0;\n\n  if (dataSource.size === 0 && EmptyDisplay) {\n    return <EmptyDisplay />;\n  }\n\n  return (\n    <ContextMenuProvider\n      menuActionHandler={handleContextMenuAction}\n      menuBuilder={menuBuilder}\n    >\n      {showPaginationControls !== true ? (\n        <div\n          className={`${classBase}-scrollbarContainer`}\n          ref={scrollProps.scrollbarContainerRef}\n          style={cssVariables}\n          tabIndex={-1}\n        >\n          <div className={`${classBase}-scrollbarContent`} />\n        </div>\n      ) : null}\n      <div\n        className={contentContainerClassName}\n        ref={scrollProps.contentContainerRef}\n        style={cssVariables}\n      >\n        <div\n          {...tableProps}\n          className={`${classBase}-table`}\n          role=\"table\"\n          tabIndex={disableFocus ? undefined : -1}\n        >\n          {showColumnHeaders ? (\n            <TableHeader\n              allowDragColumnHeader={allowDragColumnHeader}\n              columns={scrollProps.columnsWithinViewport}\n              customHeader={customHeader}\n              headings={headings}\n              onHeightMeasured={onHeaderHeightMeasured}\n              onMoveColumn={onMoveColumn}\n              onMoveGroupColumn={onMoveGroupColumn}\n              onRemoveGroupColumn={onRemoveGroupColumn}\n              onResizeColumn={onResizeColumn}\n              onSortColumn={onSortColumn}\n              showColumnHeaderMenus={showColumnHeaderMenus}\n              tableConfig={tableConfig}\n              tableId={id}\n              virtualColSpan={scrollProps.virtualColSpan}\n            />\n          ) : null}\n          {readyToRenderTableBody ? (\n            <div className={`${classBase}-body`} ref={tableBodyRef}>\n              {data.map((data) => {\n                const ariaRowIndex = data[IDX] + headerCount + 1;\n                return (\n                  <Row\n                    aria-rowindex={ariaRowIndex}\n                    classNameGenerator={rowClassNameGenerator}\n                    columnMap={columnMap}\n                    columns={scrollProps.columnsWithinViewport}\n                    groupToggleTarget={groupToggleTarget}\n                    highlighted={highlightedIndex === ariaRowIndex}\n                    key={data[RENDER_IDX]}\n                    onClick={onRowClick}\n                    onDataEdited={onDataEdited}\n                    row={data}\n                    offset={showPaginationControls ? 0 : getRowOffset(data)}\n                    onToggleGroup={onToggleGroup}\n                    showBookends={selectionBookendWidth > 0}\n                    searchPattern={lowerCaseSearchPattern}\n                    virtualColSpan={scrollProps.virtualColSpan}\n                    zebraStripes={tableAttributes.zebraStripes}\n                  />\n                );\n              })}\n              {/* \n                The focusCellPlaceholder allows us to deal with the situation where a cell \n                that has focus is scrolled out of the viewport. That cell, along with the \n                containing row, will be recycled to render another DataRow. The html table \n                cell must not retain focus once it is re-used but we need to track the \n                original focus, in case user uses arrow key to resume navigation. \n                The placeholder is fixed in place at the location where the focused cell \n                was last rendered. It assumes focus. If we get an arrowkey mousedown event \n                on the placeholder, the user has resumed navigation whilst the focused cell \n                is offscreen. We scroll back to the focus location and pass focus back to \n                the correct target cell.\n              */}\n              <div\n                aria-hidden={true}\n                className={`${classBase}-focusCellPlaceholder`}\n                onKeyDown={focusCellPlaceholderKeyDown}\n                ref={focusCellPlaceholderRef}\n                tabIndex={-1}\n              />\n\n              {cellBlock}\n            </div>\n          ) : null}\n        </div>\n      </div>\n      {/* \n        This keeps the heights of content container and scrollbar container aligned for\n        cases where we rely on height: fit-content. (ScrollbarContainer isn't taken into \n        account because its absolutely positioned).\n      */}\n      <div\n        className={`${classBase}-scrollbarFiller`}\n        style={cssScrollbarSize}\n      />\n      {draggableRow}\n    </ContextMenuProvider>\n  );\n};\n\nexport const Table = forwardRef(function Table(\n  {\n    EmptyDisplay,\n    Row,\n    allowCellBlockSelection,\n    allowDragColumnHeader,\n    allowDragDrop,\n    availableColumns,\n    className: classNameProp,\n    config,\n    customHeader,\n    dataSource,\n    defaultSelectedIndexValues,\n    defaultSelectedKeyValues,\n    disableFocus,\n    groupToggleTarget,\n    height,\n    highlightedIndex,\n    id,\n    maxViewportRowLimit,\n    navigationStyle,\n    onAvailableColumnsChange,\n    onConfigChange,\n    onDataEdited,\n    onDragStart,\n    onDrop,\n    onHighlight,\n    onRowClick,\n    onSelect,\n    onSelectCellBlock,\n    onSelectionChange,\n    renderBufferSize,\n    revealSelected,\n    rowHeight: rowHeightProp,\n    rowToObject,\n    scrollingApiRef,\n    searchPattern = \"\",\n    selectionBookendWidth = 4,\n    selectionModel,\n    showColumnHeaders,\n    showColumnHeaderMenus,\n    showPaginationControls,\n    style: styleProp,\n    viewportRowLimit,\n    width,\n    ...htmlAttributes\n  }: TableProps,\n  forwardedRef: ForwardedRef<HTMLDivElement>,\n) {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-table\",\n    css: tableCss,\n    window: targetWindow,\n  });\n\n  const containerRef = useRef<HTMLDivElement>(null);\n\n  const [size, _setSize] = useState<MeasuredSize>();\n  // TODO this will rerender entire table, move footer into seperate component\n  const { measuredHeight: rowHeight, measuredRef: rowRef } = useMeasuredHeight({\n    height: rowHeightProp,\n  });\n  const { measuredHeight: footerHeight, measuredRef: footerRef } =\n    useMeasuredHeight({});\n\n  const rowLimit = maxViewportRowLimit ?? viewportRowLimit;\n\n  if (config === undefined) {\n    throw Error(\n      \"vuu Table requires config prop. Minimum config is list of Column Descriptors\",\n    );\n  }\n  if (dataSource === undefined) {\n    throw Error(\"vuu Table requires dataSource prop\");\n  }\n  if (defaultSelectedIndexValues && defaultSelectedKeyValues) {\n    throw Error(\n      `defaultSelectedIndexValues and defaultSelectedKeyValues can not be used in combination. Use at most one.`,\n    );\n  }\n\n  if (showPaginationControls && renderBufferSize !== undefined) {\n    console.warn(\n      `Table: When pagination controls are used, renderBufferSize is ignored`,\n    );\n  }\n\n  if (rowLimit && height && rowHeightProp) {\n    console.warn(\n      `Table: when viewportRowLimit, rowHeight and height are used in combination, height is ignored`,\n    );\n    height = rowLimit * rowHeightProp;\n  } else if (rowLimit && rowHeightProp) {\n    height = rowLimit * rowHeightProp;\n  } else if (rowLimit) {\n    height = rowLimit * rowHeight;\n  }\n\n  const sizeRef = useRef<MeasuredSize>();\n  const setSize = useCallback(\n    (size: MeasuredSize) => {\n      if (viewportRowLimit && !rowHeight) {\n        sizeRef.current = size;\n      } else if (\n        size.height !== sizeRef.current?.height ||\n        size.width !== sizeRef.current?.width\n      ) {\n        _setSize(size);\n      }\n    },\n    [rowHeight, viewportRowLimit],\n  );\n  useMemo(() => {\n    if (sizeRef.current && rowHeight) {\n      const size = {\n        ...sizeRef.current,\n        height: rowHeight * (viewportRowLimit as number),\n      };\n      sizeRef.current = size;\n      _setSize(size);\n    }\n  }, [rowHeight, viewportRowLimit]);\n\n  // TODO render TableHeader here and measure before row construction begins\n  // TODO we could have MeasuredContainer render a Provider and make size available via a context hook ?\n  return (\n    <MeasuredContainer\n      {...htmlAttributes}\n      className={cx(classBase, classNameProp, {\n        [`${classBase}-pagination`]: showPaginationControls,\n        [`${classBase}-maxViewportRowLimit`]: maxViewportRowLimit,\n        [`${classBase}-viewportRowLimit`]: viewportRowLimit,\n      })}\n      height={height}\n      id={id}\n      onResize={setSize}\n      ref={useForkRef(containerRef, forwardedRef)}\n      style={\n        {\n          ...styleProp,\n          \"--row-height-prop\": rowHeight > 0 ? `${rowHeight}px` : undefined,\n        } as CSSProperties\n      }\n      width={width}\n    >\n      <RowProxy ref={rowRef} height={rowHeightProp} />\n      {size &&\n      rowHeight &&\n      (footerHeight || showPaginationControls !== true) ? (\n        <TableCore\n          EmptyDisplay={EmptyDisplay}\n          Row={Row}\n          allowCellBlockSelection={allowCellBlockSelection}\n          allowDragColumnHeader={allowDragColumnHeader}\n          allowDragDrop={allowDragDrop}\n          availableColumns={availableColumns}\n          config={config}\n          containerRef={containerRef}\n          customHeader={customHeader}\n          dataSource={dataSource}\n          defaultSelectedIndexValues={defaultSelectedIndexValues}\n          defaultSelectedKeyValues={defaultSelectedKeyValues}\n          disableFocus={disableFocus}\n          groupToggleTarget={groupToggleTarget}\n          highlightedIndex={highlightedIndex}\n          id={id}\n          navigationStyle={navigationStyle}\n          onAvailableColumnsChange={onAvailableColumnsChange}\n          onConfigChange={onConfigChange}\n          onDataEdited={onDataEdited}\n          onDragStart={onDragStart}\n          onDrop={onDrop}\n          onHighlight={onHighlight}\n          onRowClick={onRowClick}\n          onSelect={onSelect}\n          onSelectCellBlock={onSelectCellBlock}\n          onSelectionChange={onSelectionChange}\n          renderBufferSize={\n            showPaginationControls ? 0 : Math.max(5, renderBufferSize ?? 0)\n          }\n          revealSelected={revealSelected}\n          rowHeight={rowHeight}\n          rowToObject={rowToObject}\n          scrollingApiRef={scrollingApiRef}\n          lowerCaseSearchPattern={lowerCase(searchPattern)}\n          selectionBookendWidth={selectionBookendWidth}\n          selectionModel={selectionModel}\n          showColumnHeaders={showColumnHeaders}\n          showColumnHeaderMenus={showColumnHeaderMenus}\n          showPaginationControls={showPaginationControls}\n          size={reduceSizeHeight(size, footerHeight)}\n        />\n      ) : null}\n      {showPaginationControls ? (\n        <div className={`${classBase}-footer`} ref={footerRef}>\n          <PaginationControl dataSource={dataSource} />\n        </div>\n      ) : null}\n    </MeasuredContainer>\n  );\n});\n"],"names":["metadataKeys","Row","DefaultRow","useId","useTable","jsxs","ContextMenuProvider","jsx","TableHeader","data","forwardRef","Table","useWindow","useComponentCssInjection","tableCss","useRef","useState","useMeasuredHeight","useCallback","size","useMemo","MeasuredContainer","useForkRef","RowProxy","lowerCase","reduceSizeHeight","PaginationControl"],"mappings":"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"}

package/cjs/bulk-edit/useBulkEditRow.js

@@ -104,7 +104,7 @@ const useBulkEditRow = ({
   } = validationStateRef;
   const handleCommit = react.useCallback(
     (evt, value) => {
-      if (value !== void 0 && String(value).trim() !== "") {
+      if (typeof value === "string" && value.trim() !== "") {
         const columnName = focusedFieldRef.current;
         if (columnName) {
           const column = descriptors.find((c) => c.name === columnName);

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

@@ -1 +1 @@
-{"version":3,"file":"useBulkEditRow.js","sources":["../../src/bulk-edit/useBulkEditRow.tsx"],"sourcesContent":["import {\n  buildValidationChecker,\n  getEditValidationRules,\n} from \"@vuu-ui/vuu-data-react\";\nimport { DataValueDescriptor, EditPhase } from \"@vuu-ui/vuu-data-types\";\nimport { VuuRowDataItemType } from \"@vuu-ui/vuu-protocol-types\";\nimport { ColumnDescriptor } from \"@vuu-ui/vuu-table-types\";\nimport { CommitHandler, getTypedValue, queryClosest } from \"@vuu-ui/vuu-utils\";\nimport { InputProps } from \"@salt-ds/core\";\nimport {\n  FocusEventHandler,\n  SyntheticEvent,\n  useCallback,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\nimport { useEditableCell } from \"../useEditableCell\";\n\nexport type EditValueChangeHandler = (\n  column: ColumnDescriptor,\n  value: VuuRowDataItemType,\n) => void;\n\nexport interface EditableBulkHookProps {\n  descriptors: DataValueDescriptor[];\n  onBulkChange: EditValueChangeHandler;\n  onRowChange: (isValid: boolean) => void;\n}\ntype ValidationState = {\n  ok: boolean;\n  messages: Record<string, string>;\n};\n\nconst getValidationChecker = (\n  descriptor: DataValueDescriptor,\n  editPhase: EditPhase | \"*\",\n) => {\n  const rules = getEditValidationRules(descriptor, editPhase);\n  return buildValidationChecker(rules);\n};\n\nconst nextValidationState = (\n  state: ValidationState,\n  dataDescriptor: DataValueDescriptor,\n  value: VuuRowDataItemType,\n): ValidationState => {\n  const check = getValidationChecker(dataDescriptor, \"change\");\n  const result = check(value, \"change\");\n  const { name } = dataDescriptor;\n\n  const { ok: wasOk, messages: existingMessages } = state;\n\n  if (result.ok) {\n    if (!wasOk) {\n      // if this field was the only one in error, the overall state\n      // will now be ok, but not if there is still one or more other\n      // field still in error.\n      const fieldsInError = Object.keys(existingMessages);\n      if (fieldsInError.includes(name)) {\n        if (fieldsInError.length === 1) {\n          return { ok: true, messages: {} };\n        } else {\n          const messages = { ...existingMessages };\n          delete messages[name];\n          return { ok: false, messages };\n        }\n      }\n    }\n  } else {\n    return {\n      ok: false,\n      messages: {\n        ...existingMessages,\n        [name]: result.messages.join(\"\\n\"),\n      },\n    };\n  }\n\n  return state;\n};\n\nfunction find(descriptors: DataValueDescriptor[], fieldname: string) {\n  const d = descriptors.find(({ name }) => name === fieldname);\n  if (d) {\n    return d;\n  }\n  throw Error(`DataValueDescriptor not found for field ${fieldname}`);\n}\n\nconst getField = (target: EventTarget | HTMLElement) => {\n  const fieldElement = queryClosest(target, \"[data-field]\");\n  if (fieldElement) {\n    return fieldElement.dataset.field as string;\n  } else {\n    throw Error(\"no field \");\n  }\n};\n\nexport const useBulkEditRow = ({\n  descriptors,\n  onBulkChange,\n  onRowChange,\n}: EditableBulkHookProps) => {\n  const formFieldsContainerRef = useRef<HTMLDivElement>(null);\n  const focusedFieldRef = useRef(\"\");\n  const [, forceUpdate] = useState({});\n  const validationStateRef = useRef<ValidationState>({\n    ok: true,\n    messages: {},\n  });\n\n  const bulkRowValidationState = useCallback(\n    (state: ValidationState) => {\n      validationStateRef.current = state;\n      onRowChange(state.ok);\n      forceUpdate({});\n    },\n    [onRowChange],\n  );\n\n  const handleFocus = useCallback<FocusEventHandler>((evt) => {\n    // Ignore focus on popup Calendars, Lists etc\n    if (formFieldsContainerRef.current?.contains(evt.target)) {\n      const fieldName = getField(evt.target);\n      if (fieldName) {\n        if (fieldName) {\n          focusedFieldRef.current = fieldName;\n        }\n      }\n    }\n  }, []);\n\n  const handleChange = useCallback(\n    (evt: SyntheticEvent<HTMLInputElement>) => {\n      const { current: fieldName } = focusedFieldRef;\n      if (fieldName) {\n        const input = queryClosest<HTMLInputElement>(evt.target, \"input\", true);\n        const dataDescriptor = find(descriptors, fieldName);\n        const value = input.value as string;\n        const { current: state } = validationStateRef;\n        const newState = nextValidationState(state, dataDescriptor, value);\n        if (newState !== state) {\n          bulkRowValidationState(newState);\n        }\n      }\n    },\n    [descriptors, bulkRowValidationState],\n  );\n\n  const {\n    current: { messages: errorMessages },\n  } = validationStateRef;\n\n  const handleCommit = useCallback<\n    CommitHandler<HTMLElement, string | undefined>\n  >(\n    (evt, value) => {\n      if (value !== undefined && String(value).trim() !== \"\") {\n        const columnName = focusedFieldRef.current;\n        if (columnName) {\n          const column = descriptors.find((c) => c.name === columnName);\n          if (column && errorMessages[columnName] === undefined) {\n            console.log(\"apply BulkChange on\", columnName);\n            const { serverDataType = \"string\" } = column;\n            const typedValue = getTypedValue(value, serverDataType, true);\n            onBulkChange(column, typedValue);\n          }\n        }\n      }\n    },\n    [descriptors, errorMessages, onBulkChange],\n  );\n\n  const InputProps = useMemo<Partial<InputProps>>(\n    () => ({\n      inputProps: {\n        placeholder: \"Enter value\",\n      },\n      onChange: handleChange,\n      variant: \"primary\",\n    }),\n    [handleChange],\n  );\n\n  const { onKeyDown } = useEditableCell();\n\n  return {\n    errorMessages,\n    formFieldsContainerRef,\n    InputProps,\n    onCommit: handleCommit,\n    onFocus: handleFocus,\n    onKeyDown,\n  };\n};\n"],"names":["getEditValidationRules","buildValidationChecker","queryClosest","useRef","useState","useCallback","getTypedValue","InputProps","useMemo","useEditableCell"],"mappings":"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"}
+{"version":3,"file":"useBulkEditRow.js","sources":["../../src/bulk-edit/useBulkEditRow.tsx"],"sourcesContent":["import {\n  buildValidationChecker,\n  getEditValidationRules,\n} from \"@vuu-ui/vuu-data-react\";\nimport { DataValueDescriptor, EditPhase } from \"@vuu-ui/vuu-data-types\";\nimport { VuuRowDataItemType } from \"@vuu-ui/vuu-protocol-types\";\nimport { ColumnDescriptor } from \"@vuu-ui/vuu-table-types\";\nimport { CommitHandler, getTypedValue, queryClosest } from \"@vuu-ui/vuu-utils\";\nimport { InputProps } from \"@salt-ds/core\";\nimport {\n  FocusEventHandler,\n  SyntheticEvent,\n  useCallback,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\nimport { useEditableCell } from \"../useEditableCell\";\n\nexport type EditValueChangeHandler = (\n  column: ColumnDescriptor,\n  value: VuuRowDataItemType,\n) => void;\n\nexport interface EditableBulkHookProps {\n  descriptors: DataValueDescriptor[];\n  onBulkChange: EditValueChangeHandler;\n  onRowChange: (isValid: boolean) => void;\n}\ntype ValidationState = {\n  ok: boolean;\n  messages: Record<string, string>;\n};\n\nconst getValidationChecker = (\n  descriptor: DataValueDescriptor,\n  editPhase: EditPhase | \"*\",\n) => {\n  const rules = getEditValidationRules(descriptor, editPhase);\n  return buildValidationChecker(rules);\n};\n\nconst nextValidationState = (\n  state: ValidationState,\n  dataDescriptor: DataValueDescriptor,\n  value: VuuRowDataItemType,\n): ValidationState => {\n  const check = getValidationChecker(dataDescriptor, \"change\");\n  const result = check(value, \"change\");\n  const { name } = dataDescriptor;\n\n  const { ok: wasOk, messages: existingMessages } = state;\n\n  if (result.ok) {\n    if (!wasOk) {\n      // if this field was the only one in error, the overall state\n      // will now be ok, but not if there is still one or more other\n      // field still in error.\n      const fieldsInError = Object.keys(existingMessages);\n      if (fieldsInError.includes(name)) {\n        if (fieldsInError.length === 1) {\n          return { ok: true, messages: {} };\n        } else {\n          const messages = { ...existingMessages };\n          delete messages[name];\n          return { ok: false, messages };\n        }\n      }\n    }\n  } else {\n    return {\n      ok: false,\n      messages: {\n        ...existingMessages,\n        [name]: result.messages.join(\"\\n\"),\n      },\n    };\n  }\n\n  return state;\n};\n\nfunction find(descriptors: DataValueDescriptor[], fieldname: string) {\n  const d = descriptors.find(({ name }) => name === fieldname);\n  if (d) {\n    return d;\n  }\n  throw Error(`DataValueDescriptor not found for field ${fieldname}`);\n}\n\nconst getField = (target: EventTarget | HTMLElement) => {\n  const fieldElement = queryClosest(target, \"[data-field]\");\n  if (fieldElement) {\n    return fieldElement.dataset.field as string;\n  } else {\n    throw Error(\"no field \");\n  }\n};\n\nexport const useBulkEditRow = ({\n  descriptors,\n  onBulkChange,\n  onRowChange,\n}: EditableBulkHookProps) => {\n  const formFieldsContainerRef = useRef<HTMLDivElement>(null);\n  const focusedFieldRef = useRef(\"\");\n  const [, forceUpdate] = useState({});\n  const validationStateRef = useRef<ValidationState>({\n    ok: true,\n    messages: {},\n  });\n\n  const bulkRowValidationState = useCallback(\n    (state: ValidationState) => {\n      validationStateRef.current = state;\n      onRowChange(state.ok);\n      forceUpdate({});\n    },\n    [onRowChange],\n  );\n\n  const handleFocus = useCallback<FocusEventHandler>((evt) => {\n    // Ignore focus on popup Calendars, Lists etc\n    if (formFieldsContainerRef.current?.contains(evt.target)) {\n      const fieldName = getField(evt.target);\n      if (fieldName) {\n        if (fieldName) {\n          focusedFieldRef.current = fieldName;\n        }\n      }\n    }\n  }, []);\n\n  const handleChange = useCallback(\n    (evt: SyntheticEvent<HTMLInputElement>) => {\n      const { current: fieldName } = focusedFieldRef;\n      if (fieldName) {\n        const input = queryClosest<HTMLInputElement>(evt.target, \"input\", true);\n        const dataDescriptor = find(descriptors, fieldName);\n        const value = input.value as string;\n        const { current: state } = validationStateRef;\n        const newState = nextValidationState(state, dataDescriptor, value);\n        if (newState !== state) {\n          bulkRowValidationState(newState);\n        }\n      }\n    },\n    [descriptors, bulkRowValidationState],\n  );\n\n  const {\n    current: { messages: errorMessages },\n  } = validationStateRef;\n\n  const handleCommit = useCallback<CommitHandler<HTMLElement>>(\n    (evt, value) => {\n      if (typeof value === \"string\" && value.trim() !== \"\") {\n        const columnName = focusedFieldRef.current;\n        if (columnName) {\n          const column = descriptors.find((c) => c.name === columnName);\n          if (column && errorMessages[columnName] === undefined) {\n            console.log(\"apply BulkChange on\", columnName);\n            const { serverDataType = \"string\" } = column;\n            const typedValue = getTypedValue(value, serverDataType, true);\n            onBulkChange(column, typedValue);\n          }\n        }\n      }\n    },\n    [descriptors, errorMessages, onBulkChange],\n  );\n\n  const InputProps = useMemo<Partial<InputProps>>(\n    () => ({\n      inputProps: {\n        placeholder: \"Enter value\",\n      },\n      onChange: handleChange,\n      variant: \"primary\",\n    }),\n    [handleChange],\n  );\n\n  const { onKeyDown } = useEditableCell();\n\n  return {\n    errorMessages,\n    formFieldsContainerRef,\n    InputProps,\n    onCommit: handleCommit,\n    onFocus: handleFocus,\n    onKeyDown,\n  };\n};\n"],"names":["getEditValidationRules","buildValidationChecker","queryClosest","useRef","useState","useCallback","getTypedValue","InputProps","useMemo","useEditableCell"],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"file":"CheckboxCell.js","sources":["../../../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) => 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,KAAU,KAAA,OAAO,GAAoB,KAAA;AACpC,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":["../../../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;;;;"}

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

@@ -1 +1 @@
-{"version":3,"file":"ToggleCell.js","sources":["../../../src/cell-renderers/toggle-cell/ToggleCell.tsx"],"sourcesContent":["import {\n  ColumnDescriptor,\n  TableCellRendererProps,\n} from \"@vuu-ui/vuu-table-types\";\nimport {\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(\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":";;;;;;;;;;;AAoBA,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":["../../../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;;;;"}

package/cjs/column-resizing/useTableColumnResize.js.map

@@ -1 +1 @@
-{"version":3,"file":"useTableColumnResize.js","sources":["../../src/column-resizing/useTableColumnResize.tsx"],"sourcesContent":["import {\n  Heading,\n  ResizePhase,\n  RuntimeColumnDescriptor,\n} from \"@vuu-ui/vuu-table-types\";\nimport { RefObject, useCallback, useRef, useState } from \"react\";\n\nexport type ResizeHandler = (evt: MouseEvent, moveBy: number) => void;\nexport interface CellResizeHookProps {\n  column: RuntimeColumnDescriptor | Heading;\n  onResize?: (phase: ResizePhase, columnName: string, width?: number) => void;\n  rootRef: RefObject<HTMLDivElement>;\n}\n\nexport interface CellResizeHookResult {\n  isResizing: boolean;\n  onDrag: (evt: MouseEvent, moveBy: number, totalDistanceMoved: number) => void;\n  onDragStart: (evt: React.MouseEvent) => void;\n  onDragEnd: (evt: MouseEvent) => void;\n}\n\nexport const useTableColumnResize = ({\n  column,\n  onResize,\n  rootRef,\n}: CellResizeHookProps): CellResizeHookResult => {\n  const widthRef = useRef({ start: 0, now: 0 });\n\n  const [isResizing, setResizing] = useState(false);\n  const { name } = column;\n\n  const handleResizeStart = useCallback(() => {\n    if (onResize && rootRef.current) {\n      const { current: width } = widthRef;\n      const { width: measuredWidth } = rootRef.current.getBoundingClientRect();\n      width.start = width.now = Math.round(measuredWidth);\n      setResizing(true);\n      onResize?.(\"begin\", name);\n    }\n  }, [name, onResize, rootRef]);\n\n  const handleResize = useCallback(\n    (_evt: MouseEvent, moveBy: number, totalDistanceMoved) => {\n      if (rootRef.current) {\n        if (onResize) {\n          const { current: width } = widthRef;\n          const newWidth = width.start + totalDistanceMoved;\n          if (newWidth !== width.now && newWidth > 0) {\n            onResize(\"resize\", name, newWidth);\n            width.now = newWidth;\n          }\n        }\n      }\n    },\n    [name, onResize, rootRef],\n  );\n\n  const handleResizeEnd = useCallback(() => {\n    if (onResize) {\n      const { current: width } = widthRef;\n      onResize(\"end\", name, width.now);\n      setTimeout(() => {\n        // clickHandler in HeaderCell checks isResizing before firing. Because onMouseUp\n        // fires before click, we need to delay setting isResizing back to false, just\n        // long enough that the click ghandler will have fired.\n        setResizing(false);\n      }, 80);\n    }\n  }, [name, onResize]);\n\n  return {\n    isResizing,\n    onDrag: handleResize,\n    onDragStart: handleResizeStart,\n    onDragEnd: handleResizeEnd,\n  };\n};\n"],"names":["useRef","useState","useCallback"],"mappings":";;;;AAqBO,MAAM,uBAAuB,CAAC;AAAA,EACnC,MAAA;AAAA,EACA,QAAA;AAAA,EACA;AACF,CAAiD,KAAA;AAC/C,EAAA,MAAM,WAAWA,YAAO,CAAA,EAAE,OAAO,CAAG,EAAA,GAAA,EAAK,GAAG,CAAA;AAE5C,EAAA,MAAM,CAAC,UAAA,EAAY,WAAW,CAAA,GAAIC,eAAS,KAAK,CAAA;AAChD,EAAM,MAAA,EAAE,MAAS,GAAA,MAAA;AAEjB,EAAM,MAAA,iBAAA,GAAoBC,kBAAY,MAAM;AAC1C,IAAI,IAAA,QAAA,IAAY,QAAQ,OAAS,EAAA;AAC/B,MAAM,MAAA,EAAE,OAAS,EAAA,KAAA,EAAU,GAAA,QAAA;AAC3B,MAAA,MAAM,EAAE,KAAO,EAAA,aAAA,EAAkB,GAAA,OAAA,CAAQ,QAAQ,qBAAsB,EAAA;AACvE,MAAA,KAAA,CAAM,KAAQ,GAAA,KAAA,CAAM,GAAM,GAAA,IAAA,CAAK,MAAM,aAAa,CAAA;AAClD,MAAA,WAAA,CAAY,IAAI,CAAA;AAChB,MAAA,QAAA,GAAW,SAAS,IAAI,CAAA;AAAA;AAC1B,GACC,EAAA,CAAC,IAAM,EAAA,QAAA,EAAU,OAAO,CAAC,CAAA;AAE5B,EAAA,MAAM,YAAe,GAAAA,iBAAA;AAAA,IACnB,CAAC,IAAkB,EAAA,MAAA,EAAgB,kBAAuB,KAAA;AACxD,MAAA,IAAI,QAAQ,OAAS,EAAA;AACnB,QAAA,IAAI,QAAU,EAAA;AACZ,UAAM,MAAA,EAAE,OAAS,EAAA,KAAA,EAAU,GAAA,QAAA;AAC3B,UAAM,MAAA,QAAA,GAAW,MAAM,KAAQ,GAAA,kBAAA;AAC/B,UAAA,IAAI,QAAa,KAAA,KAAA,CAAM,GAAO,IAAA,QAAA,GAAW,CAAG,EAAA;AAC1C,YAAS,QAAA,CAAA,QAAA,EAAU,MAAM,QAAQ,CAAA;AACjC,YAAA,KAAA,CAAM,GAAM,GAAA,QAAA;AAAA;AACd;AACF;AACF,KACF;AAAA,IACA,CAAC,IAAM,EAAA,QAAA,EAAU,OAAO;AAAA,GAC1B;AAEA,EAAM,MAAA,eAAA,GAAkBA,kBAAY,MAAM;AACxC,IAAA,IAAI,QAAU,EAAA;AACZ,MAAM,MAAA,EAAE,OAAS,EAAA,KAAA,EAAU,GAAA,QAAA;AAC3B,MAAS,QAAA,CAAA,KAAA,EAAO,IAAM,EAAA,KAAA,CAAM,GAAG,CAAA;AAC/B,MAAA,UAAA,CAAW,MAAM;AAIf,QAAA,WAAA,CAAY,KAAK,CAAA;AAAA,SAChB,EAAE,CAAA;AAAA;AACP,GACC,EAAA,CAAC,IAAM,EAAA,QAAQ,CAAC,CAAA;AAEnB,EAAO,OAAA;AAAA,IACL,UAAA;AAAA,IACA,MAAQ,EAAA,YAAA;AAAA,IACR,WAAa,EAAA,iBAAA;AAAA,IACb,SAAW,EAAA;AAAA,GACb;AACF;;;;"}
+{"version":3,"file":"useTableColumnResize.js","sources":["../../src/column-resizing/useTableColumnResize.tsx"],"sourcesContent":["import {\n  Heading,\n  ResizePhase,\n  RuntimeColumnDescriptor,\n} from \"@vuu-ui/vuu-table-types\";\nimport { RefObject, useCallback, useRef, useState } from \"react\";\n\nexport type ResizeHandler = (evt: MouseEvent, moveBy: number) => void;\nexport interface CellResizeHookProps {\n  column: RuntimeColumnDescriptor | Heading;\n  onResize?: (phase: ResizePhase, columnName: string, width?: number) => void;\n  rootRef: RefObject<HTMLDivElement>;\n}\n\nexport interface CellResizeHookResult {\n  isResizing: boolean;\n  onDrag: (evt: MouseEvent, moveBy: number, totalDistanceMoved: number) => void;\n  onDragStart: (evt: React.MouseEvent) => void;\n  onDragEnd: (evt: MouseEvent) => void;\n}\n\nexport const useTableColumnResize = ({\n  column,\n  onResize,\n  rootRef,\n}: CellResizeHookProps): CellResizeHookResult => {\n  const widthRef = useRef({ start: 0, now: 0 });\n\n  const [isResizing, setResizing] = useState(false);\n  const { name } = column;\n\n  const handleResizeStart = useCallback(() => {\n    if (onResize && rootRef.current) {\n      const { current: width } = widthRef;\n      const { width: measuredWidth } = rootRef.current.getBoundingClientRect();\n      width.start = width.now = Math.round(measuredWidth);\n      setResizing(true);\n      onResize?.(\"begin\", name);\n    }\n  }, [name, onResize, rootRef]);\n\n  const handleResize = useCallback(\n    (_evt: MouseEvent, moveBy: number, totalDistanceMoved: number) => {\n      if (rootRef.current) {\n        if (onResize) {\n          const { current: width } = widthRef;\n          const newWidth = width.start + totalDistanceMoved;\n          if (newWidth !== width.now && newWidth > 0) {\n            onResize(\"resize\", name, newWidth);\n            width.now = newWidth;\n          }\n        }\n      }\n    },\n    [name, onResize, rootRef],\n  );\n\n  const handleResizeEnd = useCallback(() => {\n    if (onResize) {\n      const { current: width } = widthRef;\n      onResize(\"end\", name, width.now);\n      setTimeout(() => {\n        // clickHandler in HeaderCell checks isResizing before firing. Because onMouseUp\n        // fires before click, we need to delay setting isResizing back to false, just\n        // long enough that the click ghandler will have fired.\n        setResizing(false);\n      }, 80);\n    }\n  }, [name, onResize]);\n\n  return {\n    isResizing,\n    onDrag: handleResize,\n    onDragStart: handleResizeStart,\n    onDragEnd: handleResizeEnd,\n  };\n};\n"],"names":["useRef","useState","useCallback"],"mappings":";;;;AAqBO,MAAM,uBAAuB,CAAC;AAAA,EACnC,MAAA;AAAA,EACA,QAAA;AAAA,EACA;AACF,CAAiD,KAAA;AAC/C,EAAA,MAAM,WAAWA,YAAO,CAAA,EAAE,OAAO,CAAG,EAAA,GAAA,EAAK,GAAG,CAAA;AAE5C,EAAA,MAAM,CAAC,UAAA,EAAY,WAAW,CAAA,GAAIC,eAAS,KAAK,CAAA;AAChD,EAAM,MAAA,EAAE,MAAS,GAAA,MAAA;AAEjB,EAAM,MAAA,iBAAA,GAAoBC,kBAAY,MAAM;AAC1C,IAAI,IAAA,QAAA,IAAY,QAAQ,OAAS,EAAA;AAC/B,MAAM,MAAA,EAAE,OAAS,EAAA,KAAA,EAAU,GAAA,QAAA;AAC3B,MAAA,MAAM,EAAE,KAAO,EAAA,aAAA,EAAkB,GAAA,OAAA,CAAQ,QAAQ,qBAAsB,EAAA;AACvE,MAAA,KAAA,CAAM,KAAQ,GAAA,KAAA,CAAM,GAAM,GAAA,IAAA,CAAK,MAAM,aAAa,CAAA;AAClD,MAAA,WAAA,CAAY,IAAI,CAAA;AAChB,MAAA,QAAA,GAAW,SAAS,IAAI,CAAA;AAAA;AAC1B,GACC,EAAA,CAAC,IAAM,EAAA,QAAA,EAAU,OAAO,CAAC,CAAA;AAE5B,EAAA,MAAM,YAAe,GAAAA,iBAAA;AAAA,IACnB,CAAC,IAAkB,EAAA,MAAA,EAAgB,kBAA+B,KAAA;AAChE,MAAA,IAAI,QAAQ,OAAS,EAAA;AACnB,QAAA,IAAI,QAAU,EAAA;AACZ,UAAM,MAAA,EAAE,OAAS,EAAA,KAAA,EAAU,GAAA,QAAA;AAC3B,UAAM,MAAA,QAAA,GAAW,MAAM,KAAQ,GAAA,kBAAA;AAC/B,UAAA,IAAI,QAAa,KAAA,KAAA,CAAM,GAAO,IAAA,QAAA,GAAW,CAAG,EAAA;AAC1C,YAAS,QAAA,CAAA,QAAA,EAAU,MAAM,QAAQ,CAAA;AACjC,YAAA,KAAA,CAAM,GAAM,GAAA,QAAA;AAAA;AACd;AACF;AACF,KACF;AAAA,IACA,CAAC,IAAM,EAAA,QAAA,EAAU,OAAO;AAAA,GAC1B;AAEA,EAAM,MAAA,eAAA,GAAkBA,kBAAY,MAAM;AACxC,IAAA,IAAI,QAAU,EAAA;AACZ,MAAM,MAAA,EAAE,OAAS,EAAA,KAAA,EAAU,GAAA,QAAA;AAC3B,MAAS,QAAA,CAAA,KAAA,EAAO,IAAM,EAAA,KAAA,CAAM,GAAG,CAAA;AAC/B,MAAA,UAAA,CAAW,MAAM;AAIf,QAAA,WAAA,CAAY,KAAK,CAAA;AAAA,SAChB,EAAE,CAAA;AAAA;AACP,GACC,EAAA,CAAC,IAAM,EAAA,QAAQ,CAAC,CAAA;AAEnB,EAAO,OAAA;AAAA,IACL,UAAA;AAAA,IACA,MAAQ,EAAA,YAAA;AAAA,IACR,WAAa,EAAA,iBAAA;AAAA,IACb,SAAW,EAAA;AAAA,GACb;AACF;;;;"}

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

@@ -1 +1 @@
-{"version":3,"file":"GroupHeaderCell.js","sources":["../../src/header-cell/GroupHeaderCell.tsx"],"sourcesContent":["import {\n  ColumnDescriptor,\n  GroupColumnDescriptor,\n  HeaderCellProps,\n  RuntimeColumnDescriptor,\n} from \"@vuu-ui/vuu-table-types\";\nimport { OverflowContainer } from \"@vuu-ui/vuu-ui-controls\";\nimport { useLayoutEffectSkipFirst } from \"@vuu-ui/vuu-utils\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport cx from \"clsx\";\nimport {\n  KeyboardEventHandler,\n  MouseEventHandler,\n  useCallback,\n  useRef,\n  useState,\n} from \"react\";\nimport { ColumnHeaderPill, GroupColumnPill } from \"../column-header-pill\";\nimport { ColumnResizer, useTableColumnResize } from \"../column-resizing\";\nimport { useCell } from \"../useCell\";\n\nimport headerCellCss from \"./GroupHeaderCell.css\";\n\nconst classBase = \"vuuTableGroupHeaderCell\";\n\nconst switchIfChanged = (\n  columns: RuntimeColumnDescriptor[],\n  newColumns: RuntimeColumnDescriptor[],\n) => {\n  if (columns === newColumns) {\n    return columns;\n  } else {\n    return newColumns;\n  }\n};\n\nexport interface GroupHeaderCellProps\n  extends Omit<HeaderCellProps, \"onDragStart\" | \"onDrag\" | \"onDragEnd\"> {\n  column: GroupColumnDescriptor;\n  onMoveColumn?: (columns: ColumnDescriptor[]) => void;\n  onRemoveColumn: (column: RuntimeColumnDescriptor) => void;\n}\n\nexport const GroupHeaderCell = ({\n  column: groupColumn,\n  className: classNameProp,\n  onMoveColumn,\n  onRemoveColumn,\n  onResize,\n  ...htmlAttributes\n}: GroupHeaderCellProps) => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-group-header-cell\",\n    css: headerCellCss,\n    window: targetWindow,\n  });\n\n  const rootRef = useRef<HTMLTableCellElement>(null);\n  const { isResizing, ...resizeProps } = useTableColumnResize({\n    column: groupColumn,\n    onResize,\n    rootRef,\n  });\n\n  const [columns, setColumns] = useState(groupColumn.columns);\n  const { className, style } = useCell(groupColumn, classBase, true);\n  const columnPillProps =\n    columns.length > 1\n      ? {\n          removable: true,\n          onRemove: onRemoveColumn,\n        }\n      : undefined;\n\n  const handleMoveItem = useCallback(\n    (fromIndex, toIndex) => {\n      setColumns((cols) => {\n        const newCols = cols.slice();\n        const [tab] = newCols.splice(fromIndex, 1);\n        if (toIndex === -1) {\n          const result = newCols.concat(tab);\n          requestAnimationFrame(() => onMoveColumn?.(result));\n          return result;\n        } else {\n          newCols.splice(toIndex, 0, tab);\n          requestAnimationFrame(() => onMoveColumn?.(newCols));\n          return newCols;\n        }\n      });\n    },\n    [onMoveColumn],\n  );\n\n  useLayoutEffectSkipFirst(() => {\n    setColumns((cols) => switchIfChanged(cols, groupColumn.columns));\n  }, [groupColumn.columns]);\n\n  const handleClick = useCallback<MouseEventHandler<HTMLSpanElement>>(() => {\n    console.log(\"click\");\n  }, []);\n  const handleKeyDown = useCallback<\n    KeyboardEventHandler<HTMLSpanElement>\n  >(() => {\n    console.log(\"keydown\");\n  }, []);\n\n  return (\n    <div\n      {...htmlAttributes}\n      aria-colindex={groupColumn.ariaColIndex}\n      className={cx(className, classNameProp, {\n        [`${classBase}-pending`]: groupColumn.groupConfirmed === false,\n      })}\n      ref={rootRef}\n      role=\"columnheader\"\n      style={style}\n    >\n      <OverflowContainer\n        allowDragDrop\n        className={`${classBase}-inner`}\n        onMoveItem={handleMoveItem}\n        overflowPosition=\"start\"\n      >\n        {columns.map((column) => {\n          return (\n            <GroupColumnPill\n              {...columnPillProps}\n              column={column}\n              key={column.name}\n              onClick={handleClick}\n              onKeyDown={handleKeyDown}\n            />\n          );\n        })}\n      </OverflowContainer>\n      <ColumnHeaderPill\n        className={`${classBase}-removeAll`}\n        column={groupColumn}\n        removable\n        onRemove={onRemoveColumn}\n      />\n\n      {groupColumn.resizeable !== false ? (\n        <ColumnResizer {...resizeProps} />\n      ) : null}\n    </div>\n  );\n};\n"],"names":["useWindow","useComponentCssInjection","headerCellCss","useRef","useTableColumnResize","useState","useCell","useCallback","useLayoutEffectSkipFirst","jsxs","jsx","OverflowContainer","createElement","GroupColumnPill","ColumnHeaderPill","ColumnResizer"],"mappings":"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"}
+{"version":3,"file":"GroupHeaderCell.js","sources":["../../src/header-cell/GroupHeaderCell.tsx"],"sourcesContent":["import {\n  ColumnDescriptor,\n  GroupColumnDescriptor,\n  HeaderCellProps,\n  RuntimeColumnDescriptor,\n} from \"@vuu-ui/vuu-table-types\";\nimport { OverflowContainer } from \"@vuu-ui/vuu-ui-controls\";\nimport { useLayoutEffectSkipFirst } from \"@vuu-ui/vuu-utils\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport cx from \"clsx\";\nimport {\n  KeyboardEventHandler,\n  MouseEventHandler,\n  useCallback,\n  useRef,\n  useState,\n} from \"react\";\nimport { ColumnHeaderPill, GroupColumnPill } from \"../column-header-pill\";\nimport { ColumnResizer, useTableColumnResize } from \"../column-resizing\";\nimport { useCell } from \"../useCell\";\n\nimport headerCellCss from \"./GroupHeaderCell.css\";\n\nconst classBase = \"vuuTableGroupHeaderCell\";\n\nconst switchIfChanged = (\n  columns: RuntimeColumnDescriptor[],\n  newColumns: RuntimeColumnDescriptor[],\n) => {\n  if (columns === newColumns) {\n    return columns;\n  } else {\n    return newColumns;\n  }\n};\n\nexport interface GroupHeaderCellProps\n  extends Omit<HeaderCellProps, \"onDragStart\" | \"onDrag\" | \"onDragEnd\"> {\n  column: GroupColumnDescriptor;\n  onMoveColumn?: (columns: ColumnDescriptor[]) => void;\n  onRemoveColumn: (column: RuntimeColumnDescriptor) => void;\n}\n\nexport const GroupHeaderCell = ({\n  column: groupColumn,\n  className: classNameProp,\n  onMoveColumn,\n  onRemoveColumn,\n  onResize,\n  ...htmlAttributes\n}: GroupHeaderCellProps) => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-group-header-cell\",\n    css: headerCellCss,\n    window: targetWindow,\n  });\n\n  const rootRef = useRef<HTMLTableCellElement>(null);\n  const { isResizing, ...resizeProps } = useTableColumnResize({\n    column: groupColumn,\n    onResize,\n    rootRef,\n  });\n\n  const [columns, setColumns] = useState(groupColumn.columns);\n  const { className, style } = useCell(groupColumn, classBase, true);\n  const columnPillProps =\n    columns.length > 1\n      ? {\n          removable: true,\n          onRemove: onRemoveColumn,\n        }\n      : undefined;\n\n  const handleMoveItem = useCallback(\n    (fromIndex: number, toIndex: number) => {\n      setColumns((cols) => {\n        const newCols = cols.slice();\n        const [tab] = newCols.splice(fromIndex, 1);\n        if (toIndex === -1) {\n          const result = newCols.concat(tab);\n          requestAnimationFrame(() => onMoveColumn?.(result));\n          return result;\n        } else {\n          newCols.splice(toIndex, 0, tab);\n          requestAnimationFrame(() => onMoveColumn?.(newCols));\n          return newCols;\n        }\n      });\n    },\n    [onMoveColumn],\n  );\n\n  useLayoutEffectSkipFirst(() => {\n    setColumns((cols) => switchIfChanged(cols, groupColumn.columns));\n  }, [groupColumn.columns]);\n\n  const handleClick = useCallback<MouseEventHandler<HTMLSpanElement>>(() => {\n    console.log(\"click\");\n  }, []);\n  const handleKeyDown = useCallback<\n    KeyboardEventHandler<HTMLSpanElement>\n  >(() => {\n    console.log(\"keydown\");\n  }, []);\n\n  return (\n    <div\n      {...htmlAttributes}\n      aria-colindex={groupColumn.ariaColIndex}\n      className={cx(className, classNameProp, {\n        [`${classBase}-pending`]: groupColumn.groupConfirmed === false,\n      })}\n      ref={rootRef}\n      role=\"columnheader\"\n      style={style}\n    >\n      <OverflowContainer\n        allowDragDrop\n        className={`${classBase}-inner`}\n        onMoveItem={handleMoveItem}\n        overflowPosition=\"start\"\n      >\n        {columns.map((column) => {\n          return (\n            <GroupColumnPill\n              {...columnPillProps}\n              column={column}\n              key={column.name}\n              onClick={handleClick}\n              onKeyDown={handleKeyDown}\n            />\n          );\n        })}\n      </OverflowContainer>\n      <ColumnHeaderPill\n        className={`${classBase}-removeAll`}\n        column={groupColumn}\n        removable\n        onRemove={onRemoveColumn}\n      />\n\n      {groupColumn.resizeable !== false ? (\n        <ColumnResizer {...resizeProps} />\n      ) : null}\n    </div>\n  );\n};\n"],"names":["useWindow","useComponentCssInjection","headerCellCss","useRef","useTableColumnResize","useState","useCell","useCallback","useLayoutEffectSkipFirst","jsxs","jsx","OverflowContainer","createElement","GroupColumnPill","ColumnHeaderPill","ColumnResizer"],"mappings":"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"}

package/cjs/index.js

@@ -18,6 +18,7 @@ var HeaderProvider = require('./table-header/HeaderProvider.js');
 var TableHeader = require('./table-header/TableHeader.js');
 var useControlledTableNavigation = require('./useControlledTableNavigation.js');
 var useEditableCell = require('./useEditableCell.js');
+var useHighlighting = require('./useHighlighting.js');
 var useKeyboardNavigation = require('./useKeyboardNavigation.js');
 var useTableModel = require('./useTableModel.js');
 var useTableScroll = require('./useTableScroll.js');
@@ -46,6 +47,7 @@ exports.TableHeader = TableHeader.TableHeader;
 exports.isRowSelectionKey = useControlledTableNavigation.isRowSelectionKey;
 exports.useControlledTableNavigation = useControlledTableNavigation.useControlledTableNavigation;
 exports.useEditableCell = useEditableCell.useEditableCell;
+exports.useHighlighting = useHighlighting.useHighlighting;
 exports.isNavigationKey = useKeyboardNavigation.isNavigationKey;
 exports.isPagingKey = useKeyboardNavigation.isPagingKey;
 exports.useKeyboardNavigation = useKeyboardNavigation.useKeyboardNavigation;

package/cjs/index.js.map

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

package/cjs/table-cell/TableCell.js

@@ -6,6 +6,7 @@ var styles = require('@salt-ds/styles');
 var window = require('@salt-ds/window');
 var react = require('react');
 var useCell = require('../useCell.js');
+var useHighlighting = require('../useHighlighting.js');
 var TableCell$1 = require('./TableCell.css.js');
 
 const classBase = "vuuTableCell";
@@ -14,7 +15,8 @@ const TableCell = ({
   columnMap,
   onClick,
   onDataEdited,
-  row
+  row,
+  searchPattern = ""
 }) => {
   const targetWindow = window.useWindow();
   styles.useComponentCssInjection({
@@ -65,6 +67,8 @@ const TableCell = ({
     },
     [column, onClick]
   );
+  const value = valueFormatter(row[dataIdx]);
+  const valueWithHighlighting = useHighlighting.useHighlighting(value, searchPattern);
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
@@ -79,9 +83,10 @@ const TableCell = ({
           column,
           columnMap,
           onEdit: handleDataItemEdited,
-          row
+          row,
+          searchPattern
         }
-      ) : valueFormatter(row[dataIdx])
+      ) : valueWithHighlighting
     }
   );
 };

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

@@ -1 +1 @@
-{"version":3,"file":"TableCell.js","sources":["../../src/table-cell/TableCell.tsx"],"sourcesContent":["import type {\n  DataItemEditHandler,\n  TableCellProps,\n} from \"@vuu-ui/vuu-table-types\";\nimport { getTypedValue } from \"@vuu-ui/vuu-utils\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { MouseEventHandler, useCallback, useState } from \"react\";\nimport { useCell } from \"../useCell\";\n\nimport tableCellCss from \"./TableCell.css\";\n\nconst classBase = \"vuuTableCell\";\n\nexport const TableCell = ({\n  column,\n  columnMap,\n  onClick,\n  onDataEdited,\n  row,\n}: TableCellProps) => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-table-cell\",\n    css: tableCellCss,\n    window: targetWindow,\n  });\n\n  const [hasError, setHasError] = useState(false);\n\n  const { className, style } = useCell(column, classBase, false, hasError);\n  const { ariaColIndex, CellRenderer, valueFormatter } = column;\n  const dataIdx = columnMap[column.name];\n\n  const handleDataItemEdited = useCallback<DataItemEditHandler>(\n    (editState, editPhase) => {\n      if (editPhase === \"commit\") {\n        const { serverDataType = \"string\" } = column;\n        if (onDataEdited) {\n          const typedValue = getTypedValue(\n            String(editState.value),\n            serverDataType,\n            true,\n          );\n          return onDataEdited({\n            ...editState,\n            row,\n            columnName: column.name,\n            value: typedValue,\n          });\n        } else {\n          throw Error(\n            \"TableCell onDataEdited prop not supplied for an editable cell\",\n          );\n        }\n      } else {\n        setHasError(editState.isValid === false);\n        onDataEdited({\n          ...editState,\n          row,\n          columnName: column.name,\n        });\n        return undefined;\n      }\n    },\n    [column, onDataEdited, row],\n  );\n\n  const handleClick = useCallback<MouseEventHandler>(\n    (evt) => {\n      onClick?.(evt, column);\n    },\n    [column, onClick],\n  );\n\n  return (\n    <div\n      aria-colindex={ariaColIndex}\n      className={className}\n      onClick={onClick ? handleClick : undefined}\n      role=\"cell\"\n      style={style}\n    >\n      {CellRenderer ? (\n        <CellRenderer\n          column={column}\n          columnMap={columnMap}\n          onEdit={handleDataItemEdited}\n          row={row}\n        />\n      ) : (\n        valueFormatter(row[dataIdx])\n      )}\n    </div>\n  );\n};\n"],"names":["useWindow","useComponentCssInjection","tableCellCss","useState","useCell","useCallback","getTypedValue","jsx"],"mappings":";;;;;;;;;;AAYA,MAAM,SAAY,GAAA,cAAA;AAEX,MAAM,YAAY,CAAC;AAAA,EACxB,MAAA;AAAA,EACA,SAAA;AAAA,EACA,OAAA;AAAA,EACA,YAAA;AAAA,EACA;AACF,CAAsB,KAAA;AACpB,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,EAAA,MAAM,CAAC,QAAA,EAAU,WAAW,CAAA,GAAIC,eAAS,KAAK,CAAA;AAE9C,EAAM,MAAA,EAAE,WAAW,KAAM,EAAA,GAAIC,gBAAQ,MAAQ,EAAA,SAAA,EAAW,OAAO,QAAQ,CAAA;AACvE,EAAA,MAAM,EAAE,YAAA,EAAc,YAAc,EAAA,cAAA,EAAmB,GAAA,MAAA;AACvD,EAAM,MAAA,OAAA,GAAU,SAAU,CAAA,MAAA,CAAO,IAAI,CAAA;AAErC,EAAA,MAAM,oBAAuB,GAAAC,iBAAA;AAAA,IAC3B,CAAC,WAAW,SAAc,KAAA;AACxB,MAAA,IAAI,cAAc,QAAU,EAAA;AAC1B,QAAM,MAAA,EAAE,cAAiB,GAAA,QAAA,EAAa,GAAA,MAAA;AACtC,QAAA,IAAI,YAAc,EAAA;AAChB,UAAA,MAAM,UAAa,GAAAC,sBAAA;AAAA,YACjB,MAAA,CAAO,UAAU,KAAK,CAAA;AAAA,YACtB,cAAA;AAAA,YACA;AAAA,WACF;AACA,UAAA,OAAO,YAAa,CAAA;AAAA,YAClB,GAAG,SAAA;AAAA,YACH,GAAA;AAAA,YACA,YAAY,MAAO,CAAA,IAAA;AAAA,YACnB,KAAO,EAAA;AAAA,WACR,CAAA;AAAA,SACI,MAAA;AACL,UAAM,MAAA,KAAA;AAAA,YACJ;AAAA,WACF;AAAA;AACF,OACK,MAAA;AACL,QAAY,WAAA,CAAA,SAAA,CAAU,YAAY,KAAK,CAAA;AACvC,QAAa,YAAA,CAAA;AAAA,UACX,GAAG,SAAA;AAAA,UACH,GAAA;AAAA,UACA,YAAY,MAAO,CAAA;AAAA,SACpB,CAAA;AACD,QAAO,OAAA,KAAA,CAAA;AAAA;AACT,KACF;AAAA,IACA,CAAC,MAAQ,EAAA,YAAA,EAAc,GAAG;AAAA,GAC5B;AAEA,EAAA,MAAM,WAAc,GAAAD,iBAAA;AAAA,IAClB,CAAC,GAAQ,KAAA;AACP,MAAA,OAAA,GAAU,KAAK,MAAM,CAAA;AAAA,KACvB;AAAA,IACA,CAAC,QAAQ,OAAO;AAAA,GAClB;AAEA,EACE,uBAAAE,cAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,eAAe,EAAA,YAAA;AAAA,MACf,SAAA;AAAA,MACA,OAAA,EAAS,UAAU,WAAc,GAAA,KAAA,CAAA;AAAA,MACjC,IAAK,EAAA,MAAA;AAAA,MACL,KAAA;AAAA,MAEC,QACC,EAAA,YAAA,mBAAAA,cAAA;AAAA,QAAC,YAAA;AAAA,QAAA;AAAA,UACC,MAAA;AAAA,UACA,SAAA;AAAA,UACA,MAAQ,EAAA,oBAAA;AAAA,UACR;AAAA;AAAA,OAGF,GAAA,cAAA,CAAe,GAAI,CAAA,OAAO,CAAC;AAAA;AAAA,GAE/B;AAEJ;;;;"}
+{"version":3,"file":"TableCell.js","sources":["../../src/table-cell/TableCell.tsx"],"sourcesContent":["import type {\n  DataItemEditHandler,\n  TableCellProps,\n} from \"@vuu-ui/vuu-table-types\";\nimport { getTypedValue } from \"@vuu-ui/vuu-utils\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { MouseEventHandler, useCallback, useState } from \"react\";\nimport { useCell } from \"../useCell\";\nimport { useHighlighting } from \"../useHighlighting\";\n\nimport tableCellCss from \"./TableCell.css\";\n\nconst classBase = \"vuuTableCell\";\n\nexport const TableCell = ({\n  column,\n  columnMap,\n  onClick,\n  onDataEdited,\n  row,\n  searchPattern = \"\",\n}: TableCellProps) => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-table-cell\",\n    css: tableCellCss,\n    window: targetWindow,\n  });\n\n  const [hasError, setHasError] = useState(false);\n\n  const { className, style } = useCell(column, classBase, false, hasError);\n  const { ariaColIndex, CellRenderer, valueFormatter } = column;\n  const dataIdx = columnMap[column.name];\n\n  const handleDataItemEdited = useCallback<DataItemEditHandler>(\n    (editState, editPhase) => {\n      if (editPhase === \"commit\") {\n        const { serverDataType = \"string\" } = column;\n        if (onDataEdited) {\n          const typedValue = getTypedValue(\n            String(editState.value),\n            serverDataType,\n            true,\n          );\n          return onDataEdited({\n            ...editState,\n            row,\n            columnName: column.name,\n            value: typedValue,\n          });\n        } else {\n          throw Error(\n            \"TableCell onDataEdited prop not supplied for an editable cell\",\n          );\n        }\n      } else {\n        setHasError(editState.isValid === false);\n        onDataEdited({\n          ...editState,\n          row,\n          columnName: column.name,\n        });\n        return undefined;\n      }\n    },\n    [column, onDataEdited, row],\n  );\n\n  const handleClick = useCallback<MouseEventHandler>(\n    (evt) => {\n      onClick?.(evt, column);\n    },\n    [column, onClick],\n  );\n\n  const value = valueFormatter(row[dataIdx]);\n  const valueWithHighlighting = useHighlighting(value, searchPattern);\n\n  return (\n    <div\n      aria-colindex={ariaColIndex}\n      className={className}\n      onClick={onClick ? handleClick : undefined}\n      role=\"cell\"\n      style={style}\n    >\n      {CellRenderer ? (\n        <CellRenderer\n          column={column}\n          columnMap={columnMap}\n          onEdit={handleDataItemEdited}\n          row={row}\n          searchPattern={searchPattern}\n        />\n      ) : (\n        valueWithHighlighting\n      )}\n    </div>\n  );\n};\n"],"names":["useWindow","useComponentCssInjection","tableCellCss","useState","useCell","useCallback","getTypedValue","useHighlighting","jsx"],"mappings":";;;;;;;;;;;AAaA,MAAM,SAAY,GAAA,cAAA;AAEX,MAAM,YAAY,CAAC;AAAA,EACxB,MAAA;AAAA,EACA,SAAA;AAAA,EACA,OAAA;AAAA,EACA,YAAA;AAAA,EACA,GAAA;AAAA,EACA,aAAgB,GAAA;AAClB,CAAsB,KAAA;AACpB,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,EAAA,MAAM,CAAC,QAAA,EAAU,WAAW,CAAA,GAAIC,eAAS,KAAK,CAAA;AAE9C,EAAM,MAAA,EAAE,WAAW,KAAM,EAAA,GAAIC,gBAAQ,MAAQ,EAAA,SAAA,EAAW,OAAO,QAAQ,CAAA;AACvE,EAAA,MAAM,EAAE,YAAA,EAAc,YAAc,EAAA,cAAA,EAAmB,GAAA,MAAA;AACvD,EAAM,MAAA,OAAA,GAAU,SAAU,CAAA,MAAA,CAAO,IAAI,CAAA;AAErC,EAAA,MAAM,oBAAuB,GAAAC,iBAAA;AAAA,IAC3B,CAAC,WAAW,SAAc,KAAA;AACxB,MAAA,IAAI,cAAc,QAAU,EAAA;AAC1B,QAAM,MAAA,EAAE,cAAiB,GAAA,QAAA,EAAa,GAAA,MAAA;AACtC,QAAA,IAAI,YAAc,EAAA;AAChB,UAAA,MAAM,UAAa,GAAAC,sBAAA;AAAA,YACjB,MAAA,CAAO,UAAU,KAAK,CAAA;AAAA,YACtB,cAAA;AAAA,YACA;AAAA,WACF;AACA,UAAA,OAAO,YAAa,CAAA;AAAA,YAClB,GAAG,SAAA;AAAA,YACH,GAAA;AAAA,YACA,YAAY,MAAO,CAAA,IAAA;AAAA,YACnB,KAAO,EAAA;AAAA,WACR,CAAA;AAAA,SACI,MAAA;AACL,UAAM,MAAA,KAAA;AAAA,YACJ;AAAA,WACF;AAAA;AACF,OACK,MAAA;AACL,QAAY,WAAA,CAAA,SAAA,CAAU,YAAY,KAAK,CAAA;AACvC,QAAa,YAAA,CAAA;AAAA,UACX,GAAG,SAAA;AAAA,UACH,GAAA;AAAA,UACA,YAAY,MAAO,CAAA;AAAA,SACpB,CAAA;AACD,QAAO,OAAA,KAAA,CAAA;AAAA;AACT,KACF;AAAA,IACA,CAAC,MAAQ,EAAA,YAAA,EAAc,GAAG;AAAA,GAC5B;AAEA,EAAA,MAAM,WAAc,GAAAD,iBAAA;AAAA,IAClB,CAAC,GAAQ,KAAA;AACP,MAAA,OAAA,GAAU,KAAK,MAAM,CAAA;AAAA,KACvB;AAAA,IACA,CAAC,QAAQ,OAAO;AAAA,GAClB;AAEA,EAAA,MAAM,KAAQ,GAAA,cAAA,CAAe,GAAI,CAAA,OAAO,CAAC,CAAA;AACzC,EAAM,MAAA,qBAAA,GAAwBE,+BAAgB,CAAA,KAAA,EAAO,aAAa,CAAA;AAElE,EACE,uBAAAC,cAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,eAAe,EAAA,YAAA;AAAA,MACf,SAAA;AAAA,MACA,OAAA,EAAS,UAAU,WAAc,GAAA,KAAA,CAAA;AAAA,MACjC,IAAK,EAAA,MAAA;AAAA,MACL,KAAA;AAAA,MAEC,QACC,EAAA,YAAA,mBAAAA,cAAA;AAAA,QAAC,YAAA;AAAA,QAAA;AAAA,UACC,MAAA;AAAA,UACA,SAAA;AAAA,UACA,MAAQ,EAAA,oBAAA;AAAA,UACR,GAAA;AAAA,UACA;AAAA;AAAA,OAGF,GAAA;AAAA;AAAA,GAEJ;AAEJ;;;;"}

package/cjs/table-cell/TableGroupCell.js

@@ -10,6 +10,7 @@ var react = require('react');
 var useCell = require('../useCell.js');
 var TableCell = require('./TableCell.css.js');
 var TableGroupCell$1 = require('./TableGroupCell.css.js');
+var useHighlighting = require('../useHighlighting.js');
 
 const { COUNT, IS_EXPANDED, IS_LEAF } = vuuUtils.metadataKeys;
 const classBase = "vuuTableGroupCell";
@@ -17,7 +18,8 @@ const TableGroupCell = ({
   column,
   columnMap,
   onClick,
-  row
+  row,
+  searchPattern = ""
 }) => {
   const targetWindow = window.useWindow();
   styles.useComponentCssInjection({
@@ -32,6 +34,7 @@ const TableGroupCell = ({
   });
   const { columns } = column;
   const value = vuuUtils.getGroupValue(columns, row, columnMap);
+  const valueWithHighlighting = useHighlighting.useHighlighting(value || "", searchPattern);
   const icon = vuuUtils.getGroupIcon(columns, row);
   const { className, style } = useCell.useCell(column, classBase);
   const handleClick = react.useCallback(
@@ -53,7 +56,7 @@ const TableGroupCell = ({
         /* @__PURE__ */ jsxRuntime.jsx("span", { className: `${classBase}-spacer` }),
         isLeaf || count == 0 ? null : /* @__PURE__ */ jsxRuntime.jsx(vuuUiControls.ToggleIconButton, { isExpanded }),
         icon ? /* @__PURE__ */ jsxRuntime.jsx(vuuUiControls.Icon, { name: icon }) : null,
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: `${classBase}-label`, children: value })
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: `${classBase}-label`, children: valueWithHighlighting })
       ]
     }
   );