@vuu-ui/vuu-table 0.9.2 → 0.10.0

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/header-cell/HeaderCell.js.map

@@ -1 +1 @@
-{"version":3,"file":"HeaderCell.js","sources":["../../src/header-cell/HeaderCell.tsx"],"sourcesContent":["import { useContextMenu } from \"@vuu-ui/vuu-popups\";\nimport { HeaderCellProps } from \"@vuu-ui/vuu-table-types\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport cx from \"clsx\";\nimport {\n  KeyboardEventHandler,\n  MouseEvent,\n  MouseEventHandler,\n  useCallback,\n  useMemo,\n  useRef,\n} from \"react\";\nimport { SortIndicator } from \"../column-header-pill\";\nimport { ColumnMenu } from \"../column-menu\";\nimport { ColumnResizer, useTableColumnResize } from \"../column-resizing\";\nimport { useCell } from \"../useCell\";\n\nimport headerCellCss from \"./HeaderCell.css\";\n\nconst classBase = \"vuuTableHeaderCell\";\n\nexport const HeaderCell = ({\n  className: classNameProp,\n  column,\n  onClick,\n  onResize,\n  showMenu = true,\n  ...htmlAttributes\n}: HeaderCellProps) => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-header-cell\",\n    css: headerCellCss,\n    window: targetWindow,\n  });\n\n  const { HeaderCellContentRenderer, HeaderCellLabelRenderer } = column;\n  const rootRef = useRef<HTMLDivElement>(null);\n  const { isResizing, ...resizeProps } = useTableColumnResize({\n    column,\n    onResize,\n    rootRef,\n  });\n\n  const [showContextMenu] = useContextMenu();\n\n  const handleContextMenu = useMemo(() => {\n    if (showMenu) {\n      return undefined;\n    } else {\n      return (e: MouseEvent) => showContextMenu(e, \"column-menu\", { column });\n    }\n  }, [column, showContextMenu, showMenu]);\n\n  const headerItems = useMemo(() => {\n    const sortIndicator = <SortIndicator column={column} />;\n    const columnLabel = HeaderCellLabelRenderer ? (\n      <HeaderCellLabelRenderer\n        className={`${classBase}-label`}\n        column={column}\n      />\n    ) : (\n      <div className={`${classBase}-label`}>{column.label ?? column.name}</div>\n    );\n    const columnContent = HeaderCellContentRenderer\n      ? [<HeaderCellContentRenderer column={column} key=\"content\" />]\n      : [];\n\n    if (showMenu) {\n      const columnMenu = <ColumnMenu column={column} />;\n\n      if (column.align === \"right\") {\n        return [sortIndicator, columnLabel, columnContent, columnMenu];\n      } else {\n        return [columnMenu, columnLabel, sortIndicator, columnContent];\n      }\n    } else {\n      if (column.align === \"right\") {\n        return [sortIndicator, columnLabel, columnContent];\n      } else {\n        return [columnLabel, sortIndicator, columnContent];\n      }\n    }\n  }, [HeaderCellContentRenderer, HeaderCellLabelRenderer, column, showMenu]);\n\n  const handleClick = useCallback<MouseEventHandler<HTMLDivElement>>(\n    (evt) => {\n      !isResizing && onClick?.(evt);\n    },\n    [isResizing, onClick],\n  );\n\n  const handleKeyDown = useCallback<KeyboardEventHandler<HTMLDivElement>>(\n    (evt) => {\n      if (evt.key === \"Enter\") {\n        onClick?.(evt);\n      }\n    },\n    [onClick],\n  );\n\n  const { className, style } = useCell(column, classBase, true);\n\n  return (\n    <div\n      {...htmlAttributes}\n      aria-colindex={column.ariaColIndex}\n      className={cx(className, classNameProp, {\n        [`${classBase}-resizing`]: isResizing,\n        [`${classBase}-noMenu`]: showMenu === false,\n      })}\n      onClick={handleClick}\n      onContextMenu={handleContextMenu}\n      onKeyDown={handleKeyDown}\n      ref={rootRef}\n      role=\"columnheader\"\n      style={style}\n    >\n      {...headerItems}\n      {column.resizeable !== false ? <ColumnResizer {...resizeProps} /> : null}\n    </div>\n  );\n};\n"],"names":["useWindow","useComponentCssInjection","headerCellCss","useRef","useTableColumnResize","useContextMenu","useMemo","jsx","SortIndicator","ColumnMenu","useCallback","useCell","jsxs","ColumnResizer"],"mappings":"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"}
+{"version":3,"file":"HeaderCell.js","sources":["../../src/header-cell/HeaderCell.tsx"],"sourcesContent":["import { useContextMenu } from \"@vuu-ui/vuu-popups\";\nimport { HeaderCellProps } from \"@vuu-ui/vuu-table-types\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport cx from \"clsx\";\nimport {\n  KeyboardEventHandler,\n  MouseEvent,\n  MouseEventHandler,\n  useCallback,\n  useMemo,\n  useRef,\n} from \"react\";\nimport { SortIndicator } from \"../column-header-pill\";\nimport { ColumnMenu } from \"../column-menu\";\nimport { ColumnResizer, useTableColumnResize } from \"../column-resizing\";\nimport { useCell } from \"../useCell\";\n\nimport headerCellCss from \"./HeaderCell.css\";\n\nconst classBase = \"vuuTableHeaderCell\";\n\nexport const HeaderCell = ({\n  className: classNameProp,\n  column,\n  onClick,\n  onResize,\n  showMenu = true,\n  ...htmlAttributes\n}: HeaderCellProps) => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-header-cell\",\n    css: headerCellCss,\n    window: targetWindow,\n  });\n\n  const { HeaderCellContentRenderer, HeaderCellLabelRenderer } = column;\n  const rootRef = useRef<HTMLDivElement>(null);\n  const { isResizing, ...resizeProps } = useTableColumnResize({\n    column,\n    onResize,\n    rootRef,\n  });\n\n  const [showContextMenu] = useContextMenu();\n\n  const handleContextMenu = useMemo(() => {\n    if (showMenu) {\n      return undefined;\n    } else {\n      return (e: MouseEvent) => showContextMenu(e, \"column-menu\", { column });\n    }\n  }, [column, showContextMenu, showMenu]);\n\n  const headerItems = useMemo(() => {\n    const sortIndicator = <SortIndicator column={column} />;\n    const columnLabel = HeaderCellLabelRenderer ? (\n      <HeaderCellLabelRenderer\n        className={`${classBase}-label`}\n        column={column}\n      />\n    ) : (\n      <div className={`${classBase}-label`}>{column.label ?? column.name}</div>\n    );\n    const columnContent = HeaderCellContentRenderer\n      ? [<HeaderCellContentRenderer column={column} key=\"content\" />]\n      : [];\n\n    if (showMenu) {\n      const columnMenu = <ColumnMenu column={column} />;\n\n      if (column.align === \"right\") {\n        return [sortIndicator, columnLabel, columnContent, columnMenu];\n      } else {\n        return [columnMenu, columnLabel, sortIndicator, columnContent];\n      }\n    } else {\n      if (column.align === \"right\") {\n        return [sortIndicator, columnLabel, columnContent];\n      } else {\n        return [columnLabel, sortIndicator, columnContent];\n      }\n    }\n  }, [HeaderCellContentRenderer, HeaderCellLabelRenderer, column, showMenu]);\n\n  const handleClick = useCallback<MouseEventHandler<HTMLDivElement>>(\n    (evt) => {\n      !isResizing && onClick?.(evt);\n    },\n    [isResizing, onClick],\n  );\n\n  const handleKeyDown = useCallback<KeyboardEventHandler<HTMLDivElement>>(\n    (evt) => {\n      if (evt.key === \"Enter\") {\n        onClick?.(evt);\n      }\n    },\n    [onClick],\n  );\n\n  const { className, style } = useCell(column, classBase, true);\n\n  return (\n    <div\n      {...htmlAttributes}\n      aria-colindex={column.ariaColIndex}\n      className={cx(className, classNameProp, {\n        [`${classBase}-resizing`]: isResizing,\n        [`${classBase}-noMenu`]: showMenu === false,\n      })}\n      onClick={handleClick}\n      onContextMenu={handleContextMenu}\n      onKeyDown={handleKeyDown}\n      ref={rootRef}\n      role=\"columnheader\"\n      style={style}\n    >\n      {...headerItems}\n      {column.resizeable !== false ? <ColumnResizer {...resizeProps} /> : null}\n    </div>\n  );\n};\n"],"names":["useWindow","useComponentCssInjection","headerCellCss","useRef","useTableColumnResize","useContextMenu","useMemo","jsx","SortIndicator","ColumnMenu","useCallback","useCell","jsxs","ColumnResizer"],"mappings":";;;;;;;;;;;;;;;AAoBA,MAAM,SAAY,GAAA,oBAAA;AAEX,MAAM,aAAa,CAAC;AAAA,EACzB,SAAW,EAAA,aAAA;AAAA,EACX,MAAA;AAAA,EACA,OAAA;AAAA,EACA,QAAA;AAAA,EACA,QAAW,GAAA,IAAA;AAAA,EACX,GAAG;AACL,CAAuB,KAAA;AACrB,EAAA,MAAM,eAAeA,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,EAAE,yBAA2B,EAAA,uBAAA,EAA4B,GAAA,MAAA;AAC/D,EAAM,MAAA,OAAA,GAAUC,aAAuB,IAAI,CAAA;AAC3C,EAAA,MAAM,EAAE,UAAA,EAAY,GAAG,WAAA,KAAgBC,yCAAqB,CAAA;AAAA,IAC1D,MAAA;AAAA,IACA,QAAA;AAAA,IACA;AAAA,GACD,CAAA;AAED,EAAM,MAAA,CAAC,eAAe,CAAA,GAAIC,wBAAe,EAAA;AAEzC,EAAM,MAAA,iBAAA,GAAoBC,cAAQ,MAAM;AACtC,IAAA,IAAI,QAAU,EAAA;AACZ,MAAO,OAAA,KAAA,CAAA;AAAA,KACF,MAAA;AACL,MAAA,OAAO,CAAC,CAAkB,KAAA,eAAA,CAAgB,GAAG,aAAe,EAAA,EAAE,QAAQ,CAAA;AAAA;AACxE,GACC,EAAA,CAAC,MAAQ,EAAA,eAAA,EAAiB,QAAQ,CAAC,CAAA;AAEtC,EAAM,MAAA,WAAA,GAAcA,cAAQ,MAAM;AAChC,IAAM,MAAA,aAAA,mBAAiBC,cAAA,CAAAC,2BAAA,EAAA,EAAc,MAAgB,EAAA,CAAA;AACrD,IAAA,MAAM,cAAc,uBAClB,mBAAAD,cAAA;AAAA,MAAC,uBAAA;AAAA,MAAA;AAAA,QACC,SAAA,EAAW,GAAG,SAAS,CAAA,MAAA,CAAA;AAAA,QACvB;AAAA;AAAA,KACF,mBAECA,cAAA,CAAA,KAAA,EAAA,EAAI,SAAW,EAAA,CAAA,EAAG,SAAS,CAAW,MAAA,CAAA,EAAA,QAAA,EAAA,MAAA,CAAO,KAAS,IAAA,MAAA,CAAO,IAAK,EAAA,CAAA;AAErE,IAAM,MAAA,aAAA,GAAgB,4BAClB,iBAACA,cAAA,CAAC,6BAA0B,MAAoB,EAAA,EAAA,SAAU,CAAE,CAAA,GAC5D,EAAC;AAEL,IAAA,IAAI,QAAU,EAAA;AACZ,MAAM,MAAA,UAAA,mBAAcA,cAAA,CAAAE,qBAAA,EAAA,EAAW,MAAgB,EAAA,CAAA;AAE/C,MAAI,IAAA,MAAA,CAAO,UAAU,OAAS,EAAA;AAC5B,QAAA,OAAO,CAAC,aAAA,EAAe,WAAa,EAAA,aAAA,EAAe,UAAU,CAAA;AAAA,OACxD,MAAA;AACL,QAAA,OAAO,CAAC,UAAA,EAAY,WAAa,EAAA,aAAA,EAAe,aAAa,CAAA;AAAA;AAC/D,KACK,MAAA;AACL,MAAI,IAAA,MAAA,CAAO,UAAU,OAAS,EAAA;AAC5B,QAAO,OAAA,CAAC,aAAe,EAAA,WAAA,EAAa,aAAa,CAAA;AAAA,OAC5C,MAAA;AACL,QAAO,OAAA,CAAC,WAAa,EAAA,aAAA,EAAe,aAAa,CAAA;AAAA;AACnD;AACF,KACC,CAAC,yBAAA,EAA2B,uBAAyB,EAAA,MAAA,EAAQ,QAAQ,CAAC,CAAA;AAEzE,EAAA,MAAM,WAAc,GAAAC,iBAAA;AAAA,IAClB,CAAC,GAAQ,KAAA;AACP,MAAC,CAAA,UAAA,IAAc,UAAU,GAAG,CAAA;AAAA,KAC9B;AAAA,IACA,CAAC,YAAY,OAAO;AAAA,GACtB;AAEA,EAAA,MAAM,aAAgB,GAAAA,iBAAA;AAAA,IACpB,CAAC,GAAQ,KAAA;AACP,MAAI,IAAA,GAAA,CAAI,QAAQ,OAAS,EAAA;AACvB,QAAA,OAAA,GAAU,GAAG,CAAA;AAAA;AACf,KACF;AAAA,IACA,CAAC,OAAO;AAAA,GACV;AAEA,EAAA,MAAM,EAAE,SAAW,EAAA,KAAA,KAAUC,eAAQ,CAAA,MAAA,EAAQ,WAAW,IAAI,CAAA;AAE5D,EACE,uBAAAC,eAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACE,GAAG,cAAA;AAAA,MACJ,iBAAe,MAAO,CAAA,YAAA;AAAA,MACtB,SAAA,EAAW,EAAG,CAAA,SAAA,EAAW,aAAe,EAAA;AAAA,QACtC,CAAC,CAAA,EAAG,SAAS,CAAA,SAAA,CAAW,GAAG,UAAA;AAAA,QAC3B,CAAC,CAAA,EAAG,SAAS,CAAA,OAAA,CAAS,GAAG,QAAa,KAAA;AAAA,OACvC,CAAA;AAAA,MACD,OAAS,EAAA,WAAA;AAAA,MACT,aAAe,EAAA,iBAAA;AAAA,MACf,SAAW,EAAA,aAAA;AAAA,MACX,GAAK,EAAA,OAAA;AAAA,MACL,IAAK,EAAA,cAAA;AAAA,MACL,KAAA;AAAA,MAEC,QAAA,EAAA;AAAA,QAAG,GAAA,WAAA;AAAA,QACH,OAAO,UAAe,KAAA,KAAA,kCAASC,2BAAe,EAAA,EAAA,GAAG,aAAa,CAAK,GAAA;AAAA;AAAA;AAAA,GACtE;AAEJ;;;;"}

package/cjs/index.js

@@ -1,7 +1,7 @@
 'use strict';
 
+var BulkEditDialog = require('./bulk-edit/BulkEditDialog.js');
 var BulkEditPanel = require('./bulk-edit/BulkEditPanel.js');
-var BulkEditPanelDialog = require('./bulk-edit/BulkEditPanelDialog.js');
 var useBulkEditPanel = require('./bulk-edit/useBulkEditPanel.js');
 var useBulkEditRow = require('./bulk-edit/useBulkEditRow.js');
 var CheckboxCell = require('./cell-renderers/checkbox-cell/CheckboxCell.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');
@@ -26,8 +27,8 @@ var VirtualColSpan = require('./VirtualColSpan.js');
 
 
 
+exports.BulkEditDialog = BulkEditDialog.BulkEditDialog;
 exports.BulkEditPanel = BulkEditPanel.BulkEditPanel;
-exports.BulkEditPanelDialog = BulkEditPanelDialog.BulkEditPanelDialog;
 exports.useBulkEditPanel = useBulkEditPanel.useBulkEditPanel;
 exports.useBulkEditRow = useBulkEditRow.useBulkEditRow;
 exports.CheckboxCell = CheckboxCell.CheckboxCell;
@@ -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/moving-window.js

@@ -11,7 +11,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
 var __accessCheck = (obj, member, msg) => member.has(obj) || __typeError("Cannot " + msg);
 var __privateGet = (obj, member, getter) => (__accessCheck(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
 var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
-var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "write to private field"), setter ? setter.call(obj, value) : member.set(obj, value), value);
+var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "write to private field"), member.set(obj, value), value);
 var _range;
 const { SELECTED } = vuuUtils.metadataKeys;
 class MovingWindow {

package/cjs/moving-window.js.map

@@ -1 +1 @@
-{"version":3,"file":"moving-window.js","sources":["../src/moving-window.ts"],"sourcesContent":["import { DataSourceRow } from \"@vuu-ui/vuu-data-types\";\nimport {\n  isRowSelectedLast,\n  metadataKeys,\n  WindowRange,\n} from \"@vuu-ui/vuu-utils\";\nimport { VuuRange } from \"@vuu-ui/vuu-protocol-types\";\n\nconst { SELECTED } = metadataKeys;\n\nexport class MovingWindow {\n  public data: DataSourceRow[];\n  public rowCount = 0;\n  #range: WindowRange;\n\n  constructor({ from, to }: VuuRange) {\n    this.#range = new WindowRange(from, to);\n    //internal data is always 0 based, we add range.from to determine an offset\n    this.data = new Array(Math.max(0, to - from));\n    this.rowCount = 0;\n  }\n\n  setRowCount = (rowCount: number) => {\n    if (rowCount < this.data.length) {\n      this.data.length = rowCount;\n    }\n\n    this.rowCount = rowCount;\n  };\n\n  add(data: DataSourceRow) {\n    const [index] = data;\n    if (this.isWithinRange(index)) {\n      const internalIndex = index - this.#range.from;\n      this.data[internalIndex] = data;\n\n      // Hack until we can deal with this more elegantly. When we have a block\n      // select operation, first row is selected (and updated via server), then\n      // remaining rows are selected when we select the block-end row. We get an\n      // update for all rows except first. Because we're extending the select status\n      // on the client, we have to adjust the first row selected (its still selected\n      // but is no longer the 'last selected row in block')\n      // Maybe answer is to apply ALL the selection status code here, not in Viewport\n      if (data[SELECTED]) {\n        const previousRow = this.data[internalIndex - 1];\n        if (isRowSelectedLast(previousRow)) {\n          this.data[internalIndex - 1] = previousRow.slice() as DataSourceRow;\n          this.data[internalIndex - 1][SELECTED] -= 4;\n        }\n      }\n    }\n  }\n\n  getAtIndex(index: number) {\n    return this.#range.isWithin(index) &&\n      this.data[index - this.#range.from] != null\n      ? this.data[index - this.#range.from]\n      : undefined;\n  }\n\n  isWithinRange(index: number) {\n    return this.#range.isWithin(index);\n  }\n\n  setRange({ from, to }: VuuRange) {\n    if (from !== this.#range.from || to !== this.#range.to) {\n      const [overlapFrom, overlapTo] = this.#range.overlap(from, to);\n      const newData = new Array(Math.max(0, to - from));\n      for (let i = overlapFrom; i < overlapTo; i++) {\n        const data = this.getAtIndex(i);\n        if (data) {\n          const index = i - from;\n          newData[index] = data;\n        }\n      }\n      this.data = newData;\n      this.#range.from = from;\n      this.#range.to = to;\n    }\n  }\n\n  getSelectedRows() {\n    return this.data.filter((row) => row[SELECTED] !== 0);\n  }\n\n  get range() {\n    return this.#range;\n  }\n}\n"],"names":["metadataKeys","WindowRange","isRowSelectedLast"],"mappings":"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"}
+{"version":3,"file":"moving-window.js","sources":["../src/moving-window.ts"],"sourcesContent":["import { DataSourceRow } from \"@vuu-ui/vuu-data-types\";\nimport {\n  isRowSelectedLast,\n  metadataKeys,\n  WindowRange,\n} from \"@vuu-ui/vuu-utils\";\nimport { VuuRange } from \"@vuu-ui/vuu-protocol-types\";\n\nconst { SELECTED } = metadataKeys;\n\nexport class MovingWindow {\n  public data: DataSourceRow[];\n  public rowCount = 0;\n  #range: WindowRange;\n\n  constructor({ from, to }: VuuRange) {\n    this.#range = new WindowRange(from, to);\n    //internal data is always 0 based, we add range.from to determine an offset\n    this.data = new Array(Math.max(0, to - from));\n    this.rowCount = 0;\n  }\n\n  setRowCount = (rowCount: number) => {\n    if (rowCount < this.data.length) {\n      this.data.length = rowCount;\n    }\n\n    this.rowCount = rowCount;\n  };\n\n  add(data: DataSourceRow) {\n    const [index] = data;\n    if (this.isWithinRange(index)) {\n      const internalIndex = index - this.#range.from;\n      this.data[internalIndex] = data;\n\n      // Hack until we can deal with this more elegantly. When we have a block\n      // select operation, first row is selected (and updated via server), then\n      // remaining rows are selected when we select the block-end row. We get an\n      // update for all rows except first. Because we're extending the select status\n      // on the client, we have to adjust the first row selected (its still selected\n      // but is no longer the 'last selected row in block')\n      // Maybe answer is to apply ALL the selection status code here, not in Viewport\n      if (data[SELECTED]) {\n        const previousRow = this.data[internalIndex - 1];\n        if (isRowSelectedLast(previousRow)) {\n          this.data[internalIndex - 1] = previousRow.slice() as DataSourceRow;\n          this.data[internalIndex - 1][SELECTED] -= 4;\n        }\n      }\n    }\n  }\n\n  getAtIndex(index: number) {\n    return this.#range.isWithin(index) &&\n      this.data[index - this.#range.from] != null\n      ? this.data[index - this.#range.from]\n      : undefined;\n  }\n\n  isWithinRange(index: number) {\n    return this.#range.isWithin(index);\n  }\n\n  setRange({ from, to }: VuuRange) {\n    if (from !== this.#range.from || to !== this.#range.to) {\n      const [overlapFrom, overlapTo] = this.#range.overlap(from, to);\n      const newData = new Array(Math.max(0, to - from));\n      for (let i = overlapFrom; i < overlapTo; i++) {\n        const data = this.getAtIndex(i);\n        if (data) {\n          const index = i - from;\n          newData[index] = data;\n        }\n      }\n      this.data = newData;\n      this.#range.from = from;\n      this.#range.to = to;\n    }\n  }\n\n  getSelectedRows() {\n    return this.data.filter((row) => row[SELECTED] !== 0);\n  }\n\n  get range() {\n    return this.#range;\n  }\n}\n"],"names":["metadataKeys","WindowRange","isRowSelectedLast"],"mappings":"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"}

package/cjs/pagination/PaginationControl.js.map

@@ -1 +1 @@
-{"version":3,"file":"PaginationControl.js","sources":["../../src/pagination/PaginationControl.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { GoToInput, Pagination, Paginator } from \"@salt-ds/core\";\nimport cx from \"clsx\";\nimport { usePagination } from \"./usePagination\";\n\nimport paginationControlCss from \"./PaginationControl.css\";\nimport { HtmlHTMLAttributes, forwardRef } from \"react\";\nimport { DataSource } from \"@vuu-ui/vuu-data-types\";\n\nconst classBase = \"vuuPaginationControl\";\n\nexport interface PaginationControlProps\n  extends HtmlHTMLAttributes<HTMLDivElement> {\n  dataSource: DataSource;\n}\n\nexport const PaginationControl = forwardRef<\n  HTMLDivElement,\n  PaginationControlProps\n>(function PaginationControl(\n  { className, dataSource, ...htmlAttributes },\n  forwardedRef,\n) {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-table\",\n    css: paginationControlCss,\n    window: targetWindow,\n  });\n\n  const { onPageChange, pageCount } = usePagination({\n    dataSource,\n  });\n\n  return (\n    <div\n      {...htmlAttributes}\n      className={cx(classBase, className)}\n      ref={forwardedRef}\n    >\n      <Pagination count={pageCount} onPageChange={onPageChange}>\n        <GoToInput />\n        <Paginator />\n      </Pagination>\n    </div>\n  );\n});\n"],"names":["forwardRef","PaginationControl","useWindow","useComponentCssInjection","paginationControlCss","usePagination","jsx","jsxs","Pagination","GoToInput","Paginator"],"mappings":";;;;;;;;;;;AAUA,MAAM,SAAY,GAAA,sBAAA,CAAA;AAOL,MAAA,iBAAA,GAAoBA,gBAG/B,CAAA,SAASC,kBACT,CAAA,EAAE,WAAW,UAAY,EAAA,GAAG,cAAe,EAAA,EAC3C,YACA,EAAA;AACA,EAAA,MAAM,eAAeC,gBAAU,EAAA,CAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,WAAA;AAAA,IACR,GAAK,EAAAC,mBAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAA,MAAM,EAAE,YAAA,EAAc,SAAU,EAAA,GAAIC,2BAAc,CAAA;AAAA,IAChD,UAAA;AAAA,GACD,CAAA,CAAA;AAED,EACE,uBAAAC,cAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACE,GAAG,cAAA;AAAA,MACJ,SAAA,EAAW,EAAG,CAAA,SAAA,EAAW,SAAS,CAAA;AAAA,MAClC,GAAK,EAAA,YAAA;AAAA,MAEL,QAAC,kBAAAC,eAAA,CAAAC,eAAA,EAAA,EAAW,KAAO,EAAA,SAAA,EAAW,YAC5B,EAAA,QAAA,EAAA;AAAA,wBAAAF,cAAA,CAACG,cAAU,EAAA,EAAA,CAAA;AAAA,uCACVC,cAAU,EAAA,EAAA,CAAA;AAAA,OACb,EAAA,CAAA;AAAA,KAAA;AAAA,GACF,CAAA;AAEJ,CAAC;;;;"}
+{"version":3,"file":"PaginationControl.js","sources":["../../src/pagination/PaginationControl.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { GoToInput, Pagination, Paginator } from \"@salt-ds/core\";\nimport cx from \"clsx\";\nimport { usePagination } from \"./usePagination\";\n\nimport paginationControlCss from \"./PaginationControl.css\";\nimport { HtmlHTMLAttributes, forwardRef } from \"react\";\nimport { DataSource } from \"@vuu-ui/vuu-data-types\";\n\nconst classBase = \"vuuPaginationControl\";\n\nexport interface PaginationControlProps\n  extends HtmlHTMLAttributes<HTMLDivElement> {\n  dataSource: DataSource;\n}\n\nexport const PaginationControl = forwardRef<\n  HTMLDivElement,\n  PaginationControlProps\n>(function PaginationControl(\n  { className, dataSource, ...htmlAttributes },\n  forwardedRef,\n) {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-table\",\n    css: paginationControlCss,\n    window: targetWindow,\n  });\n\n  const { onPageChange, pageCount } = usePagination({\n    dataSource,\n  });\n\n  return (\n    <div\n      {...htmlAttributes}\n      className={cx(classBase, className)}\n      ref={forwardedRef}\n    >\n      <Pagination count={pageCount} onPageChange={onPageChange}>\n        <GoToInput />\n        <Paginator />\n      </Pagination>\n    </div>\n  );\n});\n"],"names":["forwardRef","PaginationControl","useWindow","useComponentCssInjection","paginationControlCss","usePagination","jsx","jsxs","Pagination","GoToInput","Paginator"],"mappings":";;;;;;;;;;;AAUA,MAAM,SAAY,GAAA,sBAAA;AAOL,MAAA,iBAAA,GAAoBA,gBAG/B,CAAA,SAASC,kBACT,CAAA,EAAE,WAAW,UAAY,EAAA,GAAG,cAAe,EAAA,EAC3C,YACA,EAAA;AACA,EAAA,MAAM,eAAeC,gBAAU,EAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,WAAA;AAAA,IACR,GAAK,EAAAC,mBAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EAAA,MAAM,EAAE,YAAA,EAAc,SAAU,EAAA,GAAIC,2BAAc,CAAA;AAAA,IAChD;AAAA,GACD,CAAA;AAED,EACE,uBAAAC,cAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACE,GAAG,cAAA;AAAA,MACJ,SAAA,EAAW,EAAG,CAAA,SAAA,EAAW,SAAS,CAAA;AAAA,MAClC,GAAK,EAAA,YAAA;AAAA,MAEL,QAAC,kBAAAC,eAAA,CAAAC,eAAA,EAAA,EAAW,KAAO,EAAA,SAAA,EAAW,YAC5B,EAAA,QAAA,EAAA;AAAA,wBAAAF,cAAA,CAACG,cAAU,EAAA,EAAA,CAAA;AAAA,uCACVC,cAAU,EAAA,EAAA;AAAA,OACb,EAAA;AAAA;AAAA,GACF;AAEJ,CAAC;;;;"}

package/cjs/pagination/usePagination.js.map

@@ -1 +1 @@
-{"version":3,"file":"usePagination.js","sources":["../../src/pagination/usePagination.ts"],"sourcesContent":["import { SyntheticEvent, useCallback, useMemo, useState } from \"react\";\nimport { DataSource } from \"@vuu-ui/vuu-data-types\";\n\nexport interface PaginationHookProps {\n  dataSource: DataSource;\n}\n\nconst getPageCount = (dataSource: DataSource) => {\n  const { range, size } = dataSource;\n  const pageSize = range.to - range.from;\n  if (pageSize > 0) {\n    return Math.ceil(size / pageSize);\n  } else {\n    return 0;\n  }\n};\n\nexport const usePagination = ({ dataSource }: PaginationHookProps) => {\n  const [pageCount, setPageCount] = useState<number>(getPageCount(dataSource));\n\n  useMemo(() => {\n    dataSource.on(\"page-count\", (n: number) => setPageCount(n));\n  }, [dataSource]);\n\n  const handlePageChange = useCallback(\n    (_evt: SyntheticEvent, page: number) => {\n      const { range } = dataSource;\n      const pageSize = range.to - range.from;\n      const firstRow = pageSize * (page - 1);\n      console.log(\n        `set range ${JSON.stringify({ from: firstRow, to: firstRow + pageSize })}`,\n      );\n      dataSource.range = { from: firstRow, to: firstRow + pageSize };\n    },\n    [dataSource],\n  );\n\n  return {\n    onPageChange: handlePageChange,\n    pageCount,\n  };\n};\n"],"names":["useState","useMemo","useCallback"],"mappings":";;;;AAOA,MAAM,YAAA,GAAe,CAAC,UAA2B,KAAA;AAC/C,EAAM,MAAA,EAAE,KAAO,EAAA,IAAA,EAAS,GAAA,UAAA,CAAA;AACxB,EAAM,MAAA,QAAA,GAAW,KAAM,CAAA,EAAA,GAAK,KAAM,CAAA,IAAA,CAAA;AAClC,EAAA,IAAI,WAAW,CAAG,EAAA;AAChB,IAAO,OAAA,IAAA,CAAK,IAAK,CAAA,IAAA,GAAO,QAAQ,CAAA,CAAA;AAAA,GAC3B,MAAA;AACL,IAAO,OAAA,CAAA,CAAA;AAAA,GACT;AACF,CAAA,CAAA;AAEO,MAAM,aAAgB,GAAA,CAAC,EAAE,UAAA,EAAsC,KAAA;AACpE,EAAA,MAAM,CAAC,SAAW,EAAA,YAAY,IAAIA,cAAiB,CAAA,YAAA,CAAa,UAAU,CAAC,CAAA,CAAA;AAE3E,EAAAC,aAAA,CAAQ,MAAM;AACZ,IAAA,UAAA,CAAW,GAAG,YAAc,EAAA,CAAC,CAAc,KAAA,YAAA,CAAa,CAAC,CAAC,CAAA,CAAA;AAAA,GAC5D,EAAG,CAAC,UAAU,CAAC,CAAA,CAAA;AAEf,EAAA,MAAM,gBAAmB,GAAAC,iBAAA;AAAA,IACvB,CAAC,MAAsB,IAAiB,KAAA;AACtC,MAAM,MAAA,EAAE,OAAU,GAAA,UAAA,CAAA;AAClB,MAAM,MAAA,QAAA,GAAW,KAAM,CAAA,EAAA,GAAK,KAAM,CAAA,IAAA,CAAA;AAClC,MAAM,MAAA,QAAA,GAAW,YAAY,IAAO,GAAA,CAAA,CAAA,CAAA;AACpC,MAAQ,OAAA,CAAA,GAAA;AAAA,QACN,CAAA,UAAA,EAAa,IAAK,CAAA,SAAA,CAAU,EAAE,IAAA,EAAM,UAAU,EAAI,EAAA,QAAA,GAAW,QAAS,EAAC,CAAC,CAAA,CAAA;AAAA,OAC1E,CAAA;AACA,MAAA,UAAA,CAAW,QAAQ,EAAE,IAAA,EAAM,QAAU,EAAA,EAAA,EAAI,WAAW,QAAS,EAAA,CAAA;AAAA,KAC/D;AAAA,IACA,CAAC,UAAU,CAAA;AAAA,GACb,CAAA;AAEA,EAAO,OAAA;AAAA,IACL,YAAc,EAAA,gBAAA;AAAA,IACd,SAAA;AAAA,GACF,CAAA;AACF;;;;"}
+{"version":3,"file":"usePagination.js","sources":["../../src/pagination/usePagination.ts"],"sourcesContent":["import { SyntheticEvent, useCallback, useMemo, useState } from \"react\";\nimport { DataSource } from \"@vuu-ui/vuu-data-types\";\n\nexport interface PaginationHookProps {\n  dataSource: DataSource;\n}\n\nconst getPageCount = (dataSource: DataSource) => {\n  const { range, size } = dataSource;\n  const pageSize = range.to - range.from;\n  if (pageSize > 0) {\n    return Math.ceil(size / pageSize);\n  } else {\n    return 0;\n  }\n};\n\nexport const usePagination = ({ dataSource }: PaginationHookProps) => {\n  const [pageCount, setPageCount] = useState<number>(getPageCount(dataSource));\n\n  useMemo(() => {\n    dataSource.on(\"page-count\", (n: number) => setPageCount(n));\n  }, [dataSource]);\n\n  const handlePageChange = useCallback(\n    (_evt: SyntheticEvent, page: number) => {\n      const { range } = dataSource;\n      const pageSize = range.to - range.from;\n      const firstRow = pageSize * (page - 1);\n      console.log(\n        `set range ${JSON.stringify({ from: firstRow, to: firstRow + pageSize })}`,\n      );\n      dataSource.range = { from: firstRow, to: firstRow + pageSize };\n    },\n    [dataSource],\n  );\n\n  return {\n    onPageChange: handlePageChange,\n    pageCount,\n  };\n};\n"],"names":["useState","useMemo","useCallback"],"mappings":";;;;AAOA,MAAM,YAAA,GAAe,CAAC,UAA2B,KAAA;AAC/C,EAAM,MAAA,EAAE,KAAO,EAAA,IAAA,EAAS,GAAA,UAAA;AACxB,EAAM,MAAA,QAAA,GAAW,KAAM,CAAA,EAAA,GAAK,KAAM,CAAA,IAAA;AAClC,EAAA,IAAI,WAAW,CAAG,EAAA;AAChB,IAAO,OAAA,IAAA,CAAK,IAAK,CAAA,IAAA,GAAO,QAAQ,CAAA;AAAA,GAC3B,MAAA;AACL,IAAO,OAAA,CAAA;AAAA;AAEX,CAAA;AAEO,MAAM,aAAgB,GAAA,CAAC,EAAE,UAAA,EAAsC,KAAA;AACpE,EAAA,MAAM,CAAC,SAAW,EAAA,YAAY,IAAIA,cAAiB,CAAA,YAAA,CAAa,UAAU,CAAC,CAAA;AAE3E,EAAAC,aAAA,CAAQ,MAAM;AACZ,IAAA,UAAA,CAAW,GAAG,YAAc,EAAA,CAAC,CAAc,KAAA,YAAA,CAAa,CAAC,CAAC,CAAA;AAAA,GAC5D,EAAG,CAAC,UAAU,CAAC,CAAA;AAEf,EAAA,MAAM,gBAAmB,GAAAC,iBAAA;AAAA,IACvB,CAAC,MAAsB,IAAiB,KAAA;AACtC,MAAM,MAAA,EAAE,OAAU,GAAA,UAAA;AAClB,MAAM,MAAA,QAAA,GAAW,KAAM,CAAA,EAAA,GAAK,KAAM,CAAA,IAAA;AAClC,MAAM,MAAA,QAAA,GAAW,YAAY,IAAO,GAAA,CAAA,CAAA;AACpC,MAAQ,OAAA,CAAA,GAAA;AAAA,QACN,CAAA,UAAA,EAAa,IAAK,CAAA,SAAA,CAAU,EAAE,IAAA,EAAM,UAAU,EAAI,EAAA,QAAA,GAAW,QAAS,EAAC,CAAC,CAAA;AAAA,OAC1E;AACA,MAAA,UAAA,CAAW,QAAQ,EAAE,IAAA,EAAM,QAAU,EAAA,EAAA,EAAI,WAAW,QAAS,EAAA;AAAA,KAC/D;AAAA,IACA,CAAC,UAAU;AAAA,GACb;AAEA,EAAO,OAAA;AAAA,IACL,YAAc,EAAA,gBAAA;AAAA,IACd;AAAA,GACF;AACF;;;;"}

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,CAAA;AAEX,MAAM,YAAY,CAAC;AAAA,EACxB,MAAA;AAAA,EACA,SAAA;AAAA,EACA,OAAA;AAAA,EACA,YAAA;AAAA,EACA,GAAA;AACF,CAAsB,KAAA;AACpB,EAAA,MAAM,eAAeA,gBAAU,EAAA,CAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,gBAAA;AAAA,IACR,GAAK,EAAAC,WAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAA,MAAM,CAAC,QAAA,EAAU,WAAW,CAAA,GAAIC,eAAS,KAAK,CAAA,CAAA;AAE9C,EAAM,MAAA,EAAE,WAAW,KAAM,EAAA,GAAIC,gBAAQ,MAAQ,EAAA,SAAA,EAAW,OAAO,QAAQ,CAAA,CAAA;AACvE,EAAA,MAAM,EAAE,YAAA,EAAc,YAAc,EAAA,cAAA,EAAmB,GAAA,MAAA,CAAA;AACvD,EAAM,MAAA,OAAA,GAAU,SAAU,CAAA,MAAA,CAAO,IAAI,CAAA,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,CAAA;AACtC,QAAA,IAAI,YAAc,EAAA;AAChB,UAAA,MAAM,UAAa,GAAAC,sBAAA;AAAA,YACjB,MAAA,CAAO,UAAU,KAAK,CAAA;AAAA,YACtB,cAAA;AAAA,YACA,IAAA;AAAA,WACF,CAAA;AACA,UAAA,OAAO,YAAa,CAAA;AAAA,YAClB,GAAG,SAAA;AAAA,YACH,GAAA;AAAA,YACA,YAAY,MAAO,CAAA,IAAA;AAAA,YACnB,KAAO,EAAA,UAAA;AAAA,WACR,CAAA,CAAA;AAAA,SACI,MAAA;AACL,UAAM,MAAA,KAAA;AAAA,YACJ,+DAAA;AAAA,WACF,CAAA;AAAA,SACF;AAAA,OACK,MAAA;AACL,QAAY,WAAA,CAAA,SAAA,CAAU,YAAY,KAAK,CAAA,CAAA;AACvC,QAAa,YAAA,CAAA;AAAA,UACX,GAAG,SAAA;AAAA,UACH,GAAA;AAAA,UACA,YAAY,MAAO,CAAA,IAAA;AAAA,SACpB,CAAA,CAAA;AACD,QAAO,OAAA,KAAA,CAAA,CAAA;AAAA,OACT;AAAA,KACF;AAAA,IACA,CAAC,MAAQ,EAAA,YAAA,EAAc,GAAG,CAAA;AAAA,GAC5B,CAAA;AAEA,EAAA,MAAM,WAAc,GAAAD,iBAAA;AAAA,IAClB,CAAC,GAAQ,KAAA;AACP,MAAA,OAAA,GAAU,KAAK,MAAM,CAAA,CAAA;AAAA,KACvB;AAAA,IACA,CAAC,QAAQ,OAAO,CAAA;AAAA,GAClB,CAAA;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,GAAA;AAAA,SAAA;AAAA,OAGF,GAAA,cAAA,CAAe,GAAI,CAAA,OAAO,CAAC,CAAA;AAAA,KAAA;AAAA,GAE/B,CAAA;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.css.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var tableGroupCellCss = ".vuuTableGroupCell.vuuTableCell {\n  --group-cell-spacer-width: 20px;\n  align-items: center;\n  border-right-color: var(\n    --vuuTableGroupCell-borderColor,\n    var(--salt-separable-tertiary-borderColor)\n  );\n  border-right-style: solid;\n  border-right-width: 1px;\n\n  cursor: pointer;\n  display: inline-flex;\n  line-height: 16px;\n\n  .vuuIcon {\n    --vuu-icon-height: 20px;\n    --vuu-icon-width: 20px;\n    margin-right: var(--salt-spacing-100);\n  }\n\n  .vuuTableGroupCell-toggle {\n    --vuu-icon-height: 16px;\n    --vuu-icon-size: 7px;\n    --vuu-icon-width: 8px;\n    margin-right: 4px;\n    transition: transform 0.25s;\n    transform: var(--toggle-icon-transform);\n  }\n}\n\n[aria-level=\"2\"] {\n  --indent: 1;\n}\n[aria-level=\"3\"] {\n  --indent: 2;\n}\n[aria-level=\"4\"] {\n  --indent: 3;\n}\n[aria-level=\"5\"] {\n  --indent: 4;\n}\n[aria-level=\"6\"] {\n  --indent: 5;\n}\n[aria-level=\"7\"] {\n  --indent: 6;\n}\n[aria-level=\"8\"] {\n  --indent: 7;\n}\n[aria-level=\"9\"] {\n  --indent: 8;\n}\n[aria-level=\"10\"] {\n  --indent: 9;\n}\n\n.vuuTableGroupCell-spacer {\n  display: inline-block;\n  width: calc(var(--indent, 0) * var(--group-cell-spacer-width));\n}\n";
+var tableGroupCellCss = ".vuuTableGroupCell.vuuTableCell {\n  --group-cell-spacer-width: 20px;\n  align-items: center;\n  border-right-color: var(\n    --vuuTableGroupCell-borderColor,\n    var(--salt-separable-tertiary-borderColor)\n  );\n  border-right-style: solid;\n  border-right-width: 1px;\n\n  cursor: pointer;\n  display: inline-flex;\n  line-height: 16px;\n\n  .vuuIcon {\n    --vuu-icon-height: 20px;\n    --vuu-icon-width: 20px;\n    margin-right: var(--salt-spacing-100);\n    min-width: 20px;\n  }\n\n  .vuuTableGroupCell-toggle {\n    --vuu-icon-height: 16px;\n    --vuu-icon-size: 7px;\n    --vuu-icon-width: 8px;\n    margin-right: 4px;\n    transition: transform 0.25s;\n    transform: var(--toggle-icon-transform);\n  }\n\n  .vuuTableGroupCell-label {\n    overflow: hidden;\n    text-overflow: ellipsis;\n  }\n}\n\n[aria-level=\"2\"] {\n  --indent: 1;\n}\n[aria-level=\"3\"] {\n  --indent: 2;\n}\n[aria-level=\"4\"] {\n  --indent: 3;\n}\n[aria-level=\"5\"] {\n  --indent: 4;\n}\n[aria-level=\"6\"] {\n  --indent: 5;\n}\n[aria-level=\"7\"] {\n  --indent: 6;\n}\n[aria-level=\"8\"] {\n  --indent: 7;\n}\n[aria-level=\"9\"] {\n  --indent: 8;\n}\n[aria-level=\"10\"] {\n  --indent: 9;\n}\n\n.vuuTableGroupCell-spacer {\n  display: inline-block;\n  min-width: calc(var(--indent, 0) * var(--group-cell-spacer-width));\n}\n\n.vuuTreeTable {\n  .vuuTableGroupCell.vuuTableCell {\n    border-right: none;\n  } \n}";
 
 module.exports = tableGroupCellCss;
 //# sourceMappingURL=TableGroupCell.css.js.map

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", { children: value })
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: `${classBase}-label`, children: valueWithHighlighting })
       ]
     }
   );

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

@@ -1 +1 @@
-{"version":3,"file":"TableGroupCell.js","sources":["../../src/table-cell/TableGroupCell.tsx"],"sourcesContent":["import { GroupColumnDescriptor, TableCellProps } from \"@vuu-ui/vuu-table-types\";\nimport { Icon, ToggleIconButton } from \"@vuu-ui/vuu-ui-controls\";\nimport { getGroupIcon, getGroupValue, metadataKeys } from \"@vuu-ui/vuu-utils\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport cx from \"clsx\";\nimport { MouseEvent, useCallback } from \"react\";\nimport { useCell } from \"../useCell\";\n\nimport tableCellCss from \"./TableCell.css\";\nimport tableGroupCellCss from \"./TableGroupCell.css\";\n\nconst { COUNT, IS_EXPANDED, IS_LEAF } = metadataKeys;\n\nconst classBase = \"vuuTableGroupCell\";\n\nexport const TableGroupCell = ({\n  column,\n  columnMap,\n  onClick,\n  row,\n}: TableCellProps) => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-table-cell\",\n    css: tableCellCss,\n    window: targetWindow,\n  });\n  useComponentCssInjection({\n    testId: \"vuu-table-group-cell\",\n    css: tableGroupCellCss,\n    window: targetWindow,\n  });\n\n  const { columns } = column as GroupColumnDescriptor;\n  const value = getGroupValue(columns, row, columnMap);\n  const icon = getGroupIcon(columns, row);\n  const { className, style } = useCell(column, classBase);\n\n  const handleClick = useCallback(\n    (evt: MouseEvent<HTMLDivElement>) => {\n      onClick?.(evt, column);\n    },\n    [column, onClick],\n  );\n\n  const { [COUNT]: count, [IS_EXPANDED]: isExpanded, [IS_LEAF]: isLeaf } = row;\n\n  return (\n    <div\n      aria-colindex={1}\n      className={cx(className, \"vuuTableCell\")}\n      role=\"cell\"\n      style={style}\n      onClick={isLeaf ? undefined : handleClick}\n    >\n      <span className={`${classBase}-spacer`} />\n      {isLeaf || count == 0 ? null : (\n        <ToggleIconButton isExpanded={isExpanded} />\n      )}\n      {icon ? <Icon name={icon} /> : null}\n      <span>{value}</span>\n    </div>\n  );\n};\n"],"names":["metadataKeys","useWindow","useComponentCssInjection","tableCellCss","tableGroupCellCss","getGroupValue","getGroupIcon","useCell","useCallback","jsxs","jsx","ToggleIconButton","Icon"],"mappings":";;;;;;;;;;;;;AAYA,MAAM,EAAE,KAAA,EAAO,WAAa,EAAA,OAAA,EAAY,GAAAA,qBAAA,CAAA;AAExC,MAAM,SAAY,GAAA,mBAAA,CAAA;AAEX,MAAM,iBAAiB,CAAC;AAAA,EAC7B,MAAA;AAAA,EACA,SAAA;AAAA,EACA,OAAA;AAAA,EACA,GAAA;AACF,CAAsB,KAAA;AACpB,EAAA,MAAM,eAAeC,gBAAU,EAAA,CAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,gBAAA;AAAA,IACR,GAAK,EAAAC,SAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AACD,EAAyBD,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,sBAAA;AAAA,IACR,GAAK,EAAAE,gBAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAM,MAAA,EAAE,SAAY,GAAA,MAAA,CAAA;AACpB,EAAA,MAAM,KAAQ,GAAAC,sBAAA,CAAc,OAAS,EAAA,GAAA,EAAK,SAAS,CAAA,CAAA;AACnD,EAAM,MAAA,IAAA,GAAOC,qBAAa,CAAA,OAAA,EAAS,GAAG,CAAA,CAAA;AACtC,EAAA,MAAM,EAAE,SAAW,EAAA,KAAA,EAAU,GAAAC,eAAA,CAAQ,QAAQ,SAAS,CAAA,CAAA;AAEtD,EAAA,MAAM,WAAc,GAAAC,iBAAA;AAAA,IAClB,CAAC,GAAoC,KAAA;AACnC,MAAA,OAAA,GAAU,KAAK,MAAM,CAAA,CAAA;AAAA,KACvB;AAAA,IACA,CAAC,QAAQ,OAAO,CAAA;AAAA,GAClB,CAAA;AAEA,EAAA,MAAM,EAAE,CAAC,KAAK,GAAG,KAAO,EAAA,CAAC,WAAW,GAAG,UAAY,EAAA,CAAC,OAAO,GAAG,QAAW,GAAA,GAAA,CAAA;AAEzE,EACE,uBAAAC,eAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,eAAe,EAAA,CAAA;AAAA,MACf,SAAA,EAAW,EAAG,CAAA,SAAA,EAAW,cAAc,CAAA;AAAA,MACvC,IAAK,EAAA,MAAA;AAAA,MACL,KAAA;AAAA,MACA,OAAA,EAAS,SAAS,KAAY,CAAA,GAAA,WAAA;AAAA,MAE9B,QAAA,EAAA;AAAA,wBAAAC,cAAA,CAAC,MAAK,EAAA,EAAA,SAAA,EAAW,CAAG,EAAA,SAAS,CAAW,OAAA,CAAA,EAAA,CAAA;AAAA,QACvC,UAAU,KAAS,IAAA,CAAA,GAAI,IACtB,mBAAAA,cAAA,CAACC,kCAAiB,UAAwB,EAAA,CAAA;AAAA,QAE3C,IAAO,mBAAAD,cAAA,CAACE,kBAAK,EAAA,EAAA,IAAA,EAAM,MAAM,CAAK,GAAA,IAAA;AAAA,wBAC/BF,cAAA,CAAC,UAAM,QAAM,EAAA,KAAA,EAAA,CAAA;AAAA,OAAA;AAAA,KAAA;AAAA,GACf,CAAA;AAEJ;;;;"}
+{"version":3,"file":"TableGroupCell.js","sources":["../../src/table-cell/TableGroupCell.tsx"],"sourcesContent":["import { GroupColumnDescriptor, TableCellProps } from \"@vuu-ui/vuu-table-types\";\nimport { Icon, ToggleIconButton } from \"@vuu-ui/vuu-ui-controls\";\nimport { getGroupIcon, getGroupValue, metadataKeys } from \"@vuu-ui/vuu-utils\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport cx from \"clsx\";\nimport { MouseEvent, useCallback } from \"react\";\nimport { useCell } from \"../useCell\";\n\nimport tableCellCss from \"./TableCell.css\";\nimport tableGroupCellCss from \"./TableGroupCell.css\";\nimport { useHighlighting } from \"../useHighlighting\";\n\nconst { COUNT, IS_EXPANDED, IS_LEAF } = metadataKeys;\n\nconst classBase = \"vuuTableGroupCell\";\n\nexport const TableGroupCell = ({\n  column,\n  columnMap,\n  onClick,\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  useComponentCssInjection({\n    testId: \"vuu-table-group-cell\",\n    css: tableGroupCellCss,\n    window: targetWindow,\n  });\n\n  const { columns } = column as GroupColumnDescriptor;\n  const value = getGroupValue(columns, row, columnMap);\n  const valueWithHighlighting = useHighlighting(value || \"\", searchPattern);\n\n  const icon = getGroupIcon(columns, row);\n  const { className, style } = useCell(column, classBase);\n\n  const handleClick = useCallback(\n    (evt: MouseEvent<HTMLDivElement>) => {\n      onClick?.(evt, column);\n    },\n    [column, onClick],\n  );\n\n  const { [COUNT]: count, [IS_EXPANDED]: isExpanded, [IS_LEAF]: isLeaf } = row;\n\n  return (\n    <div\n      aria-colindex={1}\n      className={cx(className, \"vuuTableCell\")}\n      role=\"cell\"\n      style={style}\n      onClick={isLeaf ? undefined : handleClick}\n    >\n      <span className={`${classBase}-spacer`} />\n      {isLeaf || count == 0 ? null : (\n        <ToggleIconButton isExpanded={isExpanded} />\n      )}\n      {icon ? <Icon name={icon} /> : null}\n      <span className={`${classBase}-label`}>{valueWithHighlighting}</span>\n    </div>\n  );\n};\n"],"names":["metadataKeys","useWindow","useComponentCssInjection","tableCellCss","tableGroupCellCss","getGroupValue","useHighlighting","getGroupIcon","useCell","useCallback","jsxs","jsx","ToggleIconButton","Icon"],"mappings":";;;;;;;;;;;;;;AAaA,MAAM,EAAE,KAAA,EAAO,WAAa,EAAA,OAAA,EAAY,GAAAA,qBAAA;AAExC,MAAM,SAAY,GAAA,mBAAA;AAEX,MAAM,iBAAiB,CAAC;AAAA,EAC7B,MAAA;AAAA,EACA,SAAA;AAAA,EACA,OAAA;AAAA,EACA,GAAA;AAAA,EACA,aAAgB,GAAA;AAClB,CAAsB,KAAA;AACpB,EAAA,MAAM,eAAeC,gBAAU,EAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,gBAAA;AAAA,IACR,GAAK,EAAAC,SAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AACD,EAAyBD,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,sBAAA;AAAA,IACR,GAAK,EAAAE,gBAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EAAM,MAAA,EAAE,SAAY,GAAA,MAAA;AACpB,EAAA,MAAM,KAAQ,GAAAC,sBAAA,CAAc,OAAS,EAAA,GAAA,EAAK,SAAS,CAAA;AACnD,EAAA,MAAM,qBAAwB,GAAAC,+BAAA,CAAgB,KAAS,IAAA,EAAA,EAAI,aAAa,CAAA;AAExE,EAAM,MAAA,IAAA,GAAOC,qBAAa,CAAA,OAAA,EAAS,GAAG,CAAA;AACtC,EAAA,MAAM,EAAE,SAAW,EAAA,KAAA,EAAU,GAAAC,eAAA,CAAQ,QAAQ,SAAS,CAAA;AAEtD,EAAA,MAAM,WAAc,GAAAC,iBAAA;AAAA,IAClB,CAAC,GAAoC,KAAA;AACnC,MAAA,OAAA,GAAU,KAAK,MAAM,CAAA;AAAA,KACvB;AAAA,IACA,CAAC,QAAQ,OAAO;AAAA,GAClB;AAEA,EAAA,MAAM,EAAE,CAAC,KAAK,GAAG,KAAO,EAAA,CAAC,WAAW,GAAG,UAAY,EAAA,CAAC,OAAO,GAAG,QAAW,GAAA,GAAA;AAEzE,EACE,uBAAAC,eAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,eAAe,EAAA,CAAA;AAAA,MACf,SAAA,EAAW,EAAG,CAAA,SAAA,EAAW,cAAc,CAAA;AAAA,MACvC,IAAK,EAAA,MAAA;AAAA,MACL,KAAA;AAAA,MACA,OAAA,EAAS,SAAS,KAAY,CAAA,GAAA,WAAA;AAAA,MAE9B,QAAA,EAAA;AAAA,wBAAAC,cAAA,CAAC,MAAK,EAAA,EAAA,SAAA,EAAW,CAAG,EAAA,SAAS,CAAW,OAAA,CAAA,EAAA,CAAA;AAAA,QACvC,UAAU,KAAS,IAAA,CAAA,GAAI,IACtB,mBAAAA,cAAA,CAACC,kCAAiB,UAAwB,EAAA,CAAA;AAAA,QAE3C,IAAO,mBAAAD,cAAA,CAACE,kBAAK,EAAA,EAAA,IAAA,EAAM,MAAM,CAAK,GAAA,IAAA;AAAA,uCAC9B,MAAK,EAAA,EAAA,SAAA,EAAW,CAAG,EAAA,SAAS,UAAW,QAAsB,EAAA,qBAAA,EAAA;AAAA;AAAA;AAAA,GAChE;AAEJ;;;;"}

package/cjs/table-config.js.map

@@ -1 +1 @@
-{"version":3,"file":"table-config.js","sources":["../src/table-config.ts"],"sourcesContent":["import {\n  ColumnDescriptor,\n  RuntimeColumnDescriptor,\n  TableConfig,\n} from \"@vuu-ui/vuu-table-types\";\nimport { getRuntimeColumnWidth } from \"@vuu-ui/vuu-utils\";\n\nexport type MoveColumnTableConfigAction = {\n  type: \"col-move\";\n  column: ColumnDescriptor;\n  fromIndex: number;\n  toIndex: number;\n};\n\nexport type ResizeColumnTableConfigAction = {\n  type: \"col-size\";\n  column: ColumnDescriptor;\n  columns: RuntimeColumnDescriptor[];\n  width: number;\n};\n\nexport type SubscribeColumnTableConfigAction = {\n  type: \"subscribed\";\n  column: ColumnDescriptor;\n  value: boolean;\n};\n\nexport type UpdateColumnPropertyTableConfigAction = {\n  type: \"column-prop\";\n  column: ColumnDescriptor;\n  property: keyof ColumnDescriptor;\n  value: boolean | number | string;\n};\n\nexport type TableConfigAction =\n  | MoveColumnTableConfigAction\n  | ResizeColumnTableConfigAction\n  | UpdateColumnPropertyTableConfigAction;\n\nexport const updateTableConfig = (\n  config: TableConfig,\n  action: TableConfigAction,\n): TableConfig => {\n  switch (action.type) {\n    case \"col-size\": {\n      const { columns: runtimeColumns, width } = action;\n      const isFit = config.columnLayout === \"fit\";\n      return {\n        ...config,\n        columnLayout: isFit ? \"manual\" : config.columnLayout,\n        columns: config.columns.map((col) => {\n          if (isFit) {\n            // When user resizes a column and 'fit' column layout is in effect,\n            // column layout becomes 'manual' and all columns are set to\n            // their current widths (unless subsequently resized by user).\n            return col.name === action.column.name\n              ? { ...col, width }\n              : col.width\n                ? col\n                : { ...col, width: getRuntimeColumnWidth(col, runtimeColumns) };\n          } else {\n            return col.name === action.column.name\n              ? { ...col, width: action.width }\n              : col;\n          }\n        }),\n      };\n    }\n    case \"column-prop\":\n      return {\n        ...config,\n        columns: config.columns.map((col) =>\n          col.name === action.column.name\n            ? { ...col, [action.property]: action.value }\n            : col,\n        ),\n      };\n\n    default:\n      return config;\n  }\n};\n"],"names":["getRuntimeColumnWidth"],"mappings":";;;;AAuCa,MAAA,iBAAA,GAAoB,CAC/B,MAAA,EACA,MACgB,KAAA;AAChB,EAAA,QAAQ,OAAO,IAAM;AAAA,IACnB,KAAK,UAAY,EAAA;AACf,MAAA,MAAM,EAAE,OAAA,EAAS,cAAgB,EAAA,KAAA,EAAU,GAAA,MAAA,CAAA;AAC3C,MAAM,MAAA,KAAA,GAAQ,OAAO,YAAiB,KAAA,KAAA,CAAA;AACtC,MAAO,OAAA;AAAA,QACL,GAAG,MAAA;AAAA,QACH,YAAA,EAAc,KAAQ,GAAA,QAAA,GAAW,MAAO,CAAA,YAAA;AAAA,QACxC,OAAS,EAAA,MAAA,CAAO,OAAQ,CAAA,GAAA,CAAI,CAAC,GAAQ,KAAA;AACnC,UAAA,IAAI,KAAO,EAAA;AAIT,YAAO,OAAA,GAAA,CAAI,SAAS,MAAO,CAAA,MAAA,CAAO,OAC9B,EAAE,GAAG,KAAK,KAAM,EAAA,GAChB,IAAI,KACF,GAAA,GAAA,GACA,EAAE,GAAG,GAAA,EAAK,OAAOA,8BAAsB,CAAA,GAAA,EAAK,cAAc,CAAE,EAAA,CAAA;AAAA,WAC7D,MAAA;AACL,YAAO,OAAA,GAAA,CAAI,IAAS,KAAA,MAAA,CAAO,MAAO,CAAA,IAAA,GAC9B,EAAE,GAAG,GAAK,EAAA,KAAA,EAAO,MAAO,CAAA,KAAA,EACxB,GAAA,GAAA,CAAA;AAAA,WACN;AAAA,SACD,CAAA;AAAA,OACH,CAAA;AAAA,KACF;AAAA,IACA,KAAK,aAAA;AACH,MAAO,OAAA;AAAA,QACL,GAAG,MAAA;AAAA,QACH,OAAA,EAAS,OAAO,OAAQ,CAAA,GAAA;AAAA,UAAI,CAAC,GAC3B,KAAA,GAAA,CAAI,IAAS,KAAA,MAAA,CAAO,OAAO,IACvB,GAAA,EAAE,GAAG,GAAA,EAAK,CAAC,MAAO,CAAA,QAAQ,GAAG,MAAA,CAAO,OACpC,GAAA,GAAA;AAAA,SACN;AAAA,OACF,CAAA;AAAA,IAEF;AACE,MAAO,OAAA,MAAA,CAAA;AAAA,GACX;AACF;;;;"}
+{"version":3,"file":"table-config.js","sources":["../src/table-config.ts"],"sourcesContent":["import {\n  ColumnDescriptor,\n  RuntimeColumnDescriptor,\n  TableConfig,\n} from \"@vuu-ui/vuu-table-types\";\nimport { getRuntimeColumnWidth } from \"@vuu-ui/vuu-utils\";\n\nexport type MoveColumnTableConfigAction = {\n  type: \"col-move\";\n  column: ColumnDescriptor;\n  fromIndex: number;\n  toIndex: number;\n};\n\nexport type ResizeColumnTableConfigAction = {\n  type: \"col-size\";\n  column: ColumnDescriptor;\n  columns: RuntimeColumnDescriptor[];\n  width: number;\n};\n\nexport type SubscribeColumnTableConfigAction = {\n  type: \"subscribed\";\n  column: ColumnDescriptor;\n  value: boolean;\n};\n\nexport type UpdateColumnPropertyTableConfigAction = {\n  type: \"column-prop\";\n  column: ColumnDescriptor;\n  property: keyof ColumnDescriptor;\n  value: boolean | number | string;\n};\n\nexport type TableConfigAction =\n  | MoveColumnTableConfigAction\n  | ResizeColumnTableConfigAction\n  | UpdateColumnPropertyTableConfigAction;\n\nexport const updateTableConfig = (\n  config: TableConfig,\n  action: TableConfigAction,\n): TableConfig => {\n  switch (action.type) {\n    case \"col-size\": {\n      const { columns: runtimeColumns, width } = action;\n      const isFit = config.columnLayout === \"fit\";\n      return {\n        ...config,\n        columnLayout: isFit ? \"manual\" : config.columnLayout,\n        columns: config.columns.map((col) => {\n          if (isFit) {\n            // When user resizes a column and 'fit' column layout is in effect,\n            // column layout becomes 'manual' and all columns are set to\n            // their current widths (unless subsequently resized by user).\n            return col.name === action.column.name\n              ? { ...col, width }\n              : col.width\n                ? col\n                : { ...col, width: getRuntimeColumnWidth(col, runtimeColumns) };\n          } else {\n            return col.name === action.column.name\n              ? { ...col, width: action.width }\n              : col;\n          }\n        }),\n      };\n    }\n    case \"column-prop\":\n      return {\n        ...config,\n        columns: config.columns.map((col) =>\n          col.name === action.column.name\n            ? { ...col, [action.property]: action.value }\n            : col,\n        ),\n      };\n\n    default:\n      return config;\n  }\n};\n"],"names":["getRuntimeColumnWidth"],"mappings":";;;;AAuCa,MAAA,iBAAA,GAAoB,CAC/B,MAAA,EACA,MACgB,KAAA;AAChB,EAAA,QAAQ,OAAO,IAAM;AAAA,IACnB,KAAK,UAAY,EAAA;AACf,MAAA,MAAM,EAAE,OAAA,EAAS,cAAgB,EAAA,KAAA,EAAU,GAAA,MAAA;AAC3C,MAAM,MAAA,KAAA,GAAQ,OAAO,YAAiB,KAAA,KAAA;AACtC,MAAO,OAAA;AAAA,QACL,GAAG,MAAA;AAAA,QACH,YAAA,EAAc,KAAQ,GAAA,QAAA,GAAW,MAAO,CAAA,YAAA;AAAA,QACxC,OAAS,EAAA,MAAA,CAAO,OAAQ,CAAA,GAAA,CAAI,CAAC,GAAQ,KAAA;AACnC,UAAA,IAAI,KAAO,EAAA;AAIT,YAAO,OAAA,GAAA,CAAI,SAAS,MAAO,CAAA,MAAA,CAAO,OAC9B,EAAE,GAAG,KAAK,KAAM,EAAA,GAChB,IAAI,KACF,GAAA,GAAA,GACA,EAAE,GAAG,GAAA,EAAK,OAAOA,8BAAsB,CAAA,GAAA,EAAK,cAAc,CAAE,EAAA;AAAA,WAC7D,MAAA;AACL,YAAO,OAAA,GAAA,CAAI,IAAS,KAAA,MAAA,CAAO,MAAO,CAAA,IAAA,GAC9B,EAAE,GAAG,GAAK,EAAA,KAAA,EAAO,MAAO,CAAA,KAAA,EACxB,GAAA,GAAA;AAAA;AACN,SACD;AAAA,OACH;AAAA;AACF,IACA,KAAK,aAAA;AACH,MAAO,OAAA;AAAA,QACL,GAAG,MAAA;AAAA,QACH,OAAA,EAAS,OAAO,OAAQ,CAAA,GAAA;AAAA,UAAI,CAAC,GAC3B,KAAA,GAAA,CAAI,IAAS,KAAA,MAAA,CAAO,OAAO,IACvB,GAAA,EAAE,GAAG,GAAA,EAAK,CAAC,MAAO,CAAA,QAAQ,GAAG,MAAA,CAAO,OACpC,GAAA;AAAA;AACN,OACF;AAAA,IAEF;AACE,MAAO,OAAA,MAAA;AAAA;AAEb;;;;"}

package/cjs/table-dom-utils.js.map

@@ -1 +1 @@
-{"version":3,"file":"table-dom-utils.js","sources":["../src/table-dom-utils.ts"],"sourcesContent":["import { RefObject } from \"react\";\nimport { ScrollDirection } from \"./useTableScroll\";\nimport type { ArrowKey, PageKey } from \"@vuu-ui/vuu-utils\";\nimport type { CellPos } from \"@vuu-ui/vuu-table-types\";\n\nexport type NavigationKey = PageKey | ArrowKey;\n\nexport const headerCellQuery = (colIdx: number) =>\n  `.vuuTable-col-headers .vuuTableHeaderCell[aria-colindex='${colIdx}']`;\n\nexport const dataCellQuery = (ariaRowIdx: number, ariaColIdx: number) =>\n  `.vuuTable-table [aria-rowindex='${ariaRowIdx}'] > [aria-colindex='${ariaColIdx}']`;\n\nexport const getLevelUp = (\n  containerRef: RefObject<HTMLElement>,\n  cellPos: CellPos,\n): CellPos => {\n  const cell = getTableCell(containerRef, cellPos);\n  let row = cell?.parentElement;\n  const level = parseInt(row?.ariaLevel ?? \"1\");\n  if (level > 1) {\n    const targetLevel = `${level - 1}`;\n    while (row !== null && row.ariaLevel !== targetLevel) {\n      row = row.previousElementSibling as HTMLElement;\n    }\n    if (row) {\n      const nextRowIndex = parseInt(row.ariaRowIndex ?? \"- 1\");\n      if (nextRowIndex !== -1) {\n        return [nextRowIndex, 1];\n      }\n    }\n  }\n  return cellPos;\n};\nexport const getTableCell = (\n  containerRef: RefObject<HTMLElement>,\n  [rowIdx, colIdx]: CellPos,\n) => {\n  const cssQuery = dataCellQuery(rowIdx, colIdx);\n  const cell = containerRef.current?.querySelector(cssQuery) as HTMLDivElement;\n\n  if (cellIsEditable(cell)) {\n    // Dropdown gets focus, Input does not\n    const focusableContent = cell.querySelector(\n      `button,input[type=\"checkbox\"]`,\n    ) as HTMLElement;\n    return focusableContent || cell;\n  } else {\n    return cell;\n  }\n};\n\nexport const getFocusedCell = (el: HTMLElement | Element | null) => {\n  if (el?.role == \"cell\" || el?.role === \"columnheader\") {\n    return el as HTMLDivElement;\n  } else {\n    return el?.closest(\n      \"[role='columnHeader'],[role='cell']\",\n    ) as HTMLDivElement | null;\n  }\n};\n\nexport const cellIsEditable = (cell: HTMLDivElement | null) =>\n  cell?.classList.contains(\"vuuTableCell-editable\");\n\nexport const cellDropdownShowing = (cell: HTMLDivElement | null) => {\n  if (cellIsEditable(cell)) {\n    return cell?.querySelector('.saltDropdown[aria-expanded=\"true\"]') !== null;\n  }\n  return false;\n};\n\nconst cellIsGroupCell = (cell: HTMLElement | null) =>\n  cell?.classList.contains(\"vuuTableGroupCell\");\n\nconst rowIsExpanded = (cell: HTMLElement) => {\n  switch (cell.parentElement?.ariaExpanded) {\n    case \"true\":\n      return true;\n    case \"false\":\n      return false;\n    default:\n      return undefined;\n  }\n};\n\nexport const cellIsTextInput = (cell: HTMLElement) =>\n  cell.querySelector(\".vuuTableInputCell\") !== null;\n\nexport const getAriaRowIndex = (rowElement: HTMLElement | null) => {\n  const rowIndex = rowElement?.ariaRowIndex;\n  if (rowIndex != null) {\n    const index = parseInt(rowIndex);\n    if (!isNaN(index)) {\n      return index;\n    }\n  }\n  return -1;\n};\n\nexport const getAriaColIndex = (cellElement: HTMLElement | null) => {\n  const colIndex = cellElement?.ariaColIndex;\n  if (colIndex != null) {\n    const index = parseInt(colIndex);\n    if (!isNaN(index)) {\n      return index;\n    }\n  }\n  return -1;\n};\n\nexport const getRowElementByAriaIndex = (\n  container: HTMLDivElement | EventTarget,\n  rowIndex: number,\n) => {\n  if (rowIndex === -1) {\n    return null;\n  } else {\n    const activeRow = (container as HTMLElement).querySelector(\n      `[aria-rowindex=\"${rowIndex}\"]`,\n    ) as HTMLElement;\n\n    if (activeRow) {\n      return activeRow;\n    } else {\n      throw Error(\n        `getRowElementAtIndex no row found for index index ${rowIndex}`,\n      );\n    }\n  }\n};\n\nexport const getIndexFromCellElement = (cellElement: HTMLElement | null) =>\n  getAriaColIndex(cellElement);\n\nexport const getAriaCellPos = (tableCell: HTMLDivElement): CellPos => {\n  const focusedRow = tableCell.closest(\"[role='row']\") as HTMLElement;\n  return [getAriaRowIndex(focusedRow), getAriaColIndex(tableCell)];\n};\n\nconst closestRow = (el: HTMLElement) =>\n  el.closest('[role=\"row\"]') as HTMLElement;\n\nexport const closestRowIndex = (el: HTMLElement) =>\n  getAriaRowIndex(closestRow(el));\n\nexport function getNextCellPos(\n  key: ArrowKey,\n  [rowIdx, colIdx]: CellPos,\n  columnCount: number,\n  maxRowIndex: number,\n): CellPos {\n  if (key === \"ArrowUp\") {\n    if (rowIdx > -1) {\n      return [rowIdx - 1, colIdx];\n    } else {\n      return [rowIdx, colIdx];\n    }\n  } else if (key === \"ArrowDown\") {\n    if (rowIdx === -1) {\n      return [1, colIdx];\n    } else if (rowIdx === maxRowIndex) {\n      return [rowIdx, colIdx];\n    } else {\n      return [rowIdx + 1, colIdx];\n    }\n  } else if (key === \"ArrowRight\") {\n    if (colIdx < columnCount) {\n      return [rowIdx, colIdx + 1];\n    } else {\n      return [rowIdx, colIdx];\n    }\n  } else if (key === \"ArrowLeft\") {\n    if (colIdx > 1) {\n      return [rowIdx, colIdx - 1];\n    } else {\n      return [rowIdx, colIdx];\n    }\n  }\n  return [rowIdx, colIdx];\n}\n\nexport type TreeNodeOperation = \"expand\" | \"collapse\" | \"level-up\";\n\nexport const getTreeNodeOperation = (\n  containerRef: RefObject<HTMLElement>,\n  navigationStyle: \"cell\" | \"tree\",\n  cellPos: CellPos,\n  key: NavigationKey,\n  shiftKey: boolean,\n): TreeNodeOperation | undefined => {\n  const cell = getTableCell(containerRef, cellPos);\n  if (navigationStyle === \"cell\" && !cellIsGroupCell(cell)) {\n    return undefined;\n  }\n  if (navigationStyle == \"cell\" && !shiftKey) {\n    return undefined;\n  }\n  if (cellIsGroupCell(cell)) {\n    const isExpanded = rowIsExpanded(cell);\n    if (isExpanded === true) {\n      if (key === \"ArrowLeft\") {\n        return \"collapse\";\n      }\n    } else if (isExpanded === false) {\n      if (key === \"ArrowRight\") {\n        return \"expand\";\n      } else if (key === \"ArrowLeft\") {\n        return \"level-up\";\n      }\n    } else if (key === \"ArrowLeft\") {\n      return \"level-up\";\n    }\n  }\n};\n\nconst NO_SCROLL_NECESSARY = [undefined, undefined] as const;\n\nexport const howFarIsRowOutsideViewport = (\n  rowEl: HTMLElement,\n  totalHeaderHeight: number,\n  contentContainer = rowEl.closest(\".vuuTable-contentContainer\"),\n): readonly [ScrollDirection | undefined, number | undefined] => {\n  //TODO lots of scope for optimisation here\n  if (contentContainer) {\n    // TODO take totalHeaderHeight into consideration\n    const viewport = contentContainer?.getBoundingClientRect();\n    const upperBoundary = viewport.top + totalHeaderHeight;\n    const row = rowEl.getBoundingClientRect();\n    if (row) {\n      if (row.bottom > viewport.bottom) {\n        return [\"down\", row.bottom - viewport.bottom];\n      } else if (row.top < upperBoundary) {\n        return [\"up\", row.top - upperBoundary];\n      } else {\n        return NO_SCROLL_NECESSARY;\n      }\n    } else {\n      throw Error(\"Whats going on, row not found\");\n    }\n  } else {\n    throw Error(\"Whats going on, scrollbar container not found\");\n  }\n};\n"],"names":[],"mappings":";;AAOO,MAAM,eAAkB,GAAA,CAAC,MAC9B,KAAA,CAAA,yDAAA,EAA4D,MAAM,CAAA,EAAA,EAAA;AAE7D,MAAM,gBAAgB,CAAC,UAAA,EAAoB,eAChD,CAAmC,gCAAA,EAAA,UAAU,wBAAwB,UAAU,CAAA,EAAA,EAAA;AAEpE,MAAA,UAAA,GAAa,CACxB,YAAA,EACA,OACY,KAAA;AACZ,EAAM,MAAA,IAAA,GAAO,YAAa,CAAA,YAAA,EAAc,OAAO,CAAA,CAAA;AAC/C,EAAA,IAAI,MAAM,IAAM,EAAA,aAAA,CAAA;AAChB,EAAA,MAAM,KAAQ,GAAA,QAAA,CAAS,GAAK,EAAA,SAAA,IAAa,GAAG,CAAA,CAAA;AAC5C,EAAA,IAAI,QAAQ,CAAG,EAAA;AACb,IAAM,MAAA,WAAA,GAAc,CAAG,EAAA,KAAA,GAAQ,CAAC,CAAA,CAAA,CAAA;AAChC,IAAA,OAAO,GAAQ,KAAA,IAAA,IAAQ,GAAI,CAAA,SAAA,KAAc,WAAa,EAAA;AACpD,MAAA,GAAA,GAAM,GAAI,CAAA,sBAAA,CAAA;AAAA,KACZ;AACA,IAAA,IAAI,GAAK,EAAA;AACP,MAAA,MAAM,YAAe,GAAA,QAAA,CAAS,GAAI,CAAA,YAAA,IAAgB,KAAK,CAAA,CAAA;AACvD,MAAA,IAAI,iBAAiB,CAAI,CAAA,EAAA;AACvB,QAAO,OAAA,CAAC,cAAc,CAAC,CAAA,CAAA;AAAA,OACzB;AAAA,KACF;AAAA,GACF;AACA,EAAO,OAAA,OAAA,CAAA;AACT,EAAA;AACO,MAAM,eAAe,CAC1B,YAAA,EACA,CAAC,MAAA,EAAQ,MAAM,CACZ,KAAA;AACH,EAAM,MAAA,QAAA,GAAW,aAAc,CAAA,MAAA,EAAQ,MAAM,CAAA,CAAA;AAC7C,EAAA,MAAM,IAAO,GAAA,YAAA,CAAa,OAAS,EAAA,aAAA,CAAc,QAAQ,CAAA,CAAA;AAEzD,EAAI,IAAA,cAAA,CAAe,IAAI,CAAG,EAAA;AAExB,IAAA,MAAM,mBAAmB,IAAK,CAAA,aAAA;AAAA,MAC5B,CAAA,6BAAA,CAAA;AAAA,KACF,CAAA;AACA,IAAA,OAAO,gBAAoB,IAAA,IAAA,CAAA;AAAA,GACtB,MAAA;AACL,IAAO,OAAA,IAAA,CAAA;AAAA,GACT;AACF,EAAA;AAEa,MAAA,cAAA,GAAiB,CAAC,EAAqC,KAAA;AAClE,EAAA,IAAI,EAAI,EAAA,IAAA,IAAQ,MAAU,IAAA,EAAA,EAAI,SAAS,cAAgB,EAAA;AACrD,IAAO,OAAA,EAAA,CAAA;AAAA,GACF,MAAA;AACL,IAAA,OAAO,EAAI,EAAA,OAAA;AAAA,MACT,qCAAA;AAAA,KACF,CAAA;AAAA,GACF;AACF,EAAA;AAEO,MAAM,iBAAiB,CAAC,IAAA,KAC7B,IAAM,EAAA,SAAA,CAAU,SAAS,uBAAuB,EAAA;AAErC,MAAA,mBAAA,GAAsB,CAAC,IAAgC,KAAA;AAClE,EAAI,IAAA,cAAA,CAAe,IAAI,CAAG,EAAA;AACxB,IAAO,OAAA,IAAA,EAAM,aAAc,CAAA,qCAAqC,CAAM,KAAA,IAAA,CAAA;AAAA,GACxE;AACA,EAAO,OAAA,KAAA,CAAA;AACT,EAAA;AAEA,MAAM,kBAAkB,CAAC,IAAA,KACvB,IAAM,EAAA,SAAA,CAAU,SAAS,mBAAmB,CAAA,CAAA;AAE9C,MAAM,aAAA,GAAgB,CAAC,IAAsB,KAAA;AAC3C,EAAQ,QAAA,IAAA,CAAK,eAAe,YAAc;AAAA,IACxC,KAAK,MAAA;AACH,MAAO,OAAA,IAAA,CAAA;AAAA,IACT,KAAK,OAAA;AACH,MAAO,OAAA,KAAA,CAAA;AAAA,IACT;AACE,MAAO,OAAA,KAAA,CAAA,CAAA;AAAA,GACX;AACF,CAAA,CAAA;AAEO,MAAM,kBAAkB,CAAC,IAAA,KAC9B,IAAK,CAAA,aAAA,CAAc,oBAAoB,CAAM,KAAA,KAAA;AAElC,MAAA,eAAA,GAAkB,CAAC,UAAmC,KAAA;AACjE,EAAA,MAAM,WAAW,UAAY,EAAA,YAAA,CAAA;AAC7B,EAAA,IAAI,YAAY,IAAM,EAAA;AACpB,IAAM,MAAA,KAAA,GAAQ,SAAS,QAAQ,CAAA,CAAA;AAC/B,IAAI,IAAA,CAAC,KAAM,CAAA,KAAK,CAAG,EAAA;AACjB,MAAO,OAAA,KAAA,CAAA;AAAA,KACT;AAAA,GACF;AACA,EAAO,OAAA,CAAA,CAAA,CAAA;AACT,EAAA;AAEa,MAAA,eAAA,GAAkB,CAAC,WAAoC,KAAA;AAClE,EAAA,MAAM,WAAW,WAAa,EAAA,YAAA,CAAA;AAC9B,EAAA,IAAI,YAAY,IAAM,EAAA;AACpB,IAAM,MAAA,KAAA,GAAQ,SAAS,QAAQ,CAAA,CAAA;AAC/B,IAAI,IAAA,CAAC,KAAM,CAAA,KAAK,CAAG,EAAA;AACjB,MAAO,OAAA,KAAA,CAAA;AAAA,KACT;AAAA,GACF;AACA,EAAO,OAAA,CAAA,CAAA,CAAA;AACT,EAAA;AAEa,MAAA,wBAAA,GAA2B,CACtC,SAAA,EACA,QACG,KAAA;AACH,EAAA,IAAI,aAAa,CAAI,CAAA,EAAA;AACnB,IAAO,OAAA,IAAA,CAAA;AAAA,GACF,MAAA;AACL,IAAA,MAAM,YAAa,SAA0B,CAAA,aAAA;AAAA,MAC3C,mBAAmB,QAAQ,CAAA,EAAA,CAAA;AAAA,KAC7B,CAAA;AAEA,IAAA,IAAI,SAAW,EAAA;AACb,MAAO,OAAA,SAAA,CAAA;AAAA,KACF,MAAA;AACL,MAAM,MAAA,KAAA;AAAA,QACJ,qDAAqD,QAAQ,CAAA,CAAA;AAAA,OAC/D,CAAA;AAAA,KACF;AAAA,GACF;AACF,EAAA;AAKa,MAAA,cAAA,GAAiB,CAAC,SAAuC,KAAA;AACpE,EAAM,MAAA,UAAA,GAAa,SAAU,CAAA,OAAA,CAAQ,cAAc,CAAA,CAAA;AACnD,EAAA,OAAO,CAAC,eAAgB,CAAA,UAAU,CAAG,EAAA,eAAA,CAAgB,SAAS,CAAC,CAAA,CAAA;AACjE,EAAA;AAEA,MAAM,UAAa,GAAA,CAAC,EAClB,KAAA,EAAA,CAAG,QAAQ,cAAc,CAAA,CAAA;AAEpB,MAAM,kBAAkB,CAAC,EAAA,KAC9B,eAAgB,CAAA,UAAA,CAAW,EAAE,CAAC,EAAA;AAEzB,SAAS,eACd,GACA,EAAA,CAAC,QAAQ,MAAM,CAAA,EACf,aACA,WACS,EAAA;AACT,EAAA,IAAI,QAAQ,SAAW,EAAA;AACrB,IAAA,IAAI,SAAS,CAAI,CAAA,EAAA;AACf,MAAO,OAAA,CAAC,MAAS,GAAA,CAAA,EAAG,MAAM,CAAA,CAAA;AAAA,KACrB,MAAA;AACL,MAAO,OAAA,CAAC,QAAQ,MAAM,CAAA,CAAA;AAAA,KACxB;AAAA,GACF,MAAA,IAAW,QAAQ,WAAa,EAAA;AAC9B,IAAA,IAAI,WAAW,CAAI,CAAA,EAAA;AACjB,MAAO,OAAA,CAAC,GAAG,MAAM,CAAA,CAAA;AAAA,KACnB,MAAA,IAAW,WAAW,WAAa,EAAA;AACjC,MAAO,OAAA,CAAC,QAAQ,MAAM,CAAA,CAAA;AAAA,KACjB,MAAA;AACL,MAAO,OAAA,CAAC,MAAS,GAAA,CAAA,EAAG,MAAM,CAAA,CAAA;AAAA,KAC5B;AAAA,GACF,MAAA,IAAW,QAAQ,YAAc,EAAA;AAC/B,IAAA,IAAI,SAAS,WAAa,EAAA;AACxB,MAAO,OAAA,CAAC,MAAQ,EAAA,MAAA,GAAS,CAAC,CAAA,CAAA;AAAA,KACrB,MAAA;AACL,MAAO,OAAA,CAAC,QAAQ,MAAM,CAAA,CAAA;AAAA,KACxB;AAAA,GACF,MAAA,IAAW,QAAQ,WAAa,EAAA;AAC9B,IAAA,IAAI,SAAS,CAAG,EAAA;AACd,MAAO,OAAA,CAAC,MAAQ,EAAA,MAAA,GAAS,CAAC,CAAA,CAAA;AAAA,KACrB,MAAA;AACL,MAAO,OAAA,CAAC,QAAQ,MAAM,CAAA,CAAA;AAAA,KACxB;AAAA,GACF;AACA,EAAO,OAAA,CAAC,QAAQ,MAAM,CAAA,CAAA;AACxB,CAAA;AAIO,MAAM,uBAAuB,CAClC,YAAA,EACA,eACA,EAAA,OAAA,EACA,KACA,QACkC,KAAA;AAClC,EAAM,MAAA,IAAA,GAAO,YAAa,CAAA,YAAA,EAAc,OAAO,CAAA,CAAA;AAC/C,EAAA,IAAI,eAAoB,KAAA,MAAA,IAAU,CAAC,eAAA,CAAgB,IAAI,CAAG,EAAA;AACxD,IAAO,OAAA,KAAA,CAAA,CAAA;AAAA,GACT;AACA,EAAI,IAAA,eAAA,IAAmB,MAAU,IAAA,CAAC,QAAU,EAAA;AAC1C,IAAO,OAAA,KAAA,CAAA,CAAA;AAAA,GACT;AACA,EAAI,IAAA,eAAA,CAAgB,IAAI,CAAG,EAAA;AACzB,IAAM,MAAA,UAAA,GAAa,cAAc,IAAI,CAAA,CAAA;AACrC,IAAA,IAAI,eAAe,IAAM,EAAA;AACvB,MAAA,IAAI,QAAQ,WAAa,EAAA;AACvB,QAAO,OAAA,UAAA,CAAA;AAAA,OACT;AAAA,KACF,MAAA,IAAW,eAAe,KAAO,EAAA;AAC/B,MAAA,IAAI,QAAQ,YAAc,EAAA;AACxB,QAAO,OAAA,QAAA,CAAA;AAAA,OACT,MAAA,IAAW,QAAQ,WAAa,EAAA;AAC9B,QAAO,OAAA,UAAA,CAAA;AAAA,OACT;AAAA,KACF,MAAA,IAAW,QAAQ,WAAa,EAAA;AAC9B,MAAO,OAAA,UAAA,CAAA;AAAA,KACT;AAAA,GACF;AACF,EAAA;AAEA,MAAM,mBAAA,GAAsB,CAAC,KAAA,CAAA,EAAW,KAAS,CAAA,CAAA,CAAA;AAEpC,MAAA,0BAAA,GAA6B,CACxC,KACA,EAAA,iBAAA,EACA,mBAAmB,KAAM,CAAA,OAAA,CAAQ,4BAA4B,CACE,KAAA;AAE/D,EAAA,IAAI,gBAAkB,EAAA;AAEpB,IAAM,MAAA,QAAA,GAAW,kBAAkB,qBAAsB,EAAA,CAAA;AACzD,IAAM,MAAA,aAAA,GAAgB,SAAS,GAAM,GAAA,iBAAA,CAAA;AACrC,IAAM,MAAA,GAAA,GAAM,MAAM,qBAAsB,EAAA,CAAA;AACxC,IAAA,IAAI,GAAK,EAAA;AACP,MAAI,IAAA,GAAA,CAAI,MAAS,GAAA,QAAA,CAAS,MAAQ,EAAA;AAChC,QAAA,OAAO,CAAC,MAAA,EAAQ,GAAI,CAAA,MAAA,GAAS,SAAS,MAAM,CAAA,CAAA;AAAA,OAC9C,MAAA,IAAW,GAAI,CAAA,GAAA,GAAM,aAAe,EAAA;AAClC,QAAA,OAAO,CAAC,IAAA,EAAM,GAAI,CAAA,GAAA,GAAM,aAAa,CAAA,CAAA;AAAA,OAChC,MAAA;AACL,QAAO,OAAA,mBAAA,CAAA;AAAA,OACT;AAAA,KACK,MAAA;AACL,MAAA,MAAM,MAAM,+BAA+B,CAAA,CAAA;AAAA,KAC7C;AAAA,GACK,MAAA;AACL,IAAA,MAAM,MAAM,+CAA+C,CAAA,CAAA;AAAA,GAC7D;AACF;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"table-dom-utils.js","sources":["../src/table-dom-utils.ts"],"sourcesContent":["import { RefObject } from \"react\";\nimport { ScrollDirection } from \"./useTableScroll\";\nimport type { ArrowKey, PageKey } from \"@vuu-ui/vuu-utils\";\nimport type { CellPos } from \"@vuu-ui/vuu-table-types\";\n\nexport type NavigationKey = PageKey | ArrowKey;\n\nexport const headerCellQuery = (colIdx: number) =>\n  `.vuuTable-col-headers .vuuTableHeaderCell[aria-colindex='${colIdx}']`;\n\nexport const dataCellQuery = (ariaRowIdx: number, ariaColIdx: number) =>\n  `.vuuTable-table [aria-rowindex='${ariaRowIdx}'] > [aria-colindex='${ariaColIdx}']`;\n\nexport const getLevelUp = (\n  containerRef: RefObject<HTMLElement>,\n  cellPos: CellPos,\n): CellPos => {\n  const cell = getTableCell(containerRef, cellPos);\n  let row = cell?.parentElement;\n  const level = parseInt(row?.ariaLevel ?? \"1\");\n  if (level > 1) {\n    const targetLevel = `${level - 1}`;\n    while (row !== null && row.ariaLevel !== targetLevel) {\n      row = row.previousElementSibling as HTMLElement;\n    }\n    if (row) {\n      const nextRowIndex = parseInt(row.ariaRowIndex ?? \"- 1\");\n      if (nextRowIndex !== -1) {\n        return [nextRowIndex, 1];\n      }\n    }\n  }\n  return cellPos;\n};\nexport const getTableCell = (\n  containerRef: RefObject<HTMLElement>,\n  [rowIdx, colIdx]: CellPos,\n) => {\n  const cssQuery = dataCellQuery(rowIdx, colIdx);\n  const cell = containerRef.current?.querySelector(cssQuery) as HTMLDivElement;\n\n  if (cellIsEditable(cell)) {\n    // Dropdown gets focus, Input does not\n    const focusableContent = cell.querySelector(\n      `button,input[type=\"checkbox\"]`,\n    ) as HTMLElement;\n    return focusableContent || cell;\n  } else {\n    return cell;\n  }\n};\n\nexport const getFocusedCell = (el: HTMLElement | Element | null) => {\n  if (el?.role == \"cell\" || el?.role === \"columnheader\") {\n    return el as HTMLDivElement;\n  } else {\n    return el?.closest(\n      \"[role='columnHeader'],[role='cell']\",\n    ) as HTMLDivElement | null;\n  }\n};\n\nexport const cellIsEditable = (cell: HTMLDivElement | null) =>\n  cell?.classList.contains(\"vuuTableCell-editable\");\n\nexport const cellDropdownShowing = (cell: HTMLDivElement | null) => {\n  if (cellIsEditable(cell)) {\n    return cell?.querySelector('.saltDropdown[aria-expanded=\"true\"]') !== null;\n  }\n  return false;\n};\n\nconst cellIsGroupCell = (cell: HTMLElement | null) =>\n  cell?.classList.contains(\"vuuTableGroupCell\");\n\nconst rowIsExpanded = (cell: HTMLElement) => {\n  switch (cell.parentElement?.ariaExpanded) {\n    case \"true\":\n      return true;\n    case \"false\":\n      return false;\n    default:\n      return undefined;\n  }\n};\n\nexport const cellIsTextInput = (cell: HTMLElement) =>\n  cell.querySelector(\".vuuTableInputCell\") !== null;\n\nexport const getAriaRowIndex = (rowElement: HTMLElement | null) => {\n  const rowIndex = rowElement?.ariaRowIndex;\n  if (rowIndex != null) {\n    const index = parseInt(rowIndex);\n    if (!isNaN(index)) {\n      return index;\n    }\n  }\n  return -1;\n};\n\nexport const getAriaColIndex = (cellElement: HTMLElement | null) => {\n  const colIndex = cellElement?.ariaColIndex;\n  if (colIndex != null) {\n    const index = parseInt(colIndex);\n    if (!isNaN(index)) {\n      return index;\n    }\n  }\n  return -1;\n};\n\nexport const getRowElementByAriaIndex = (\n  container: HTMLDivElement | EventTarget,\n  rowIndex: number,\n) => {\n  if (rowIndex === -1) {\n    return null;\n  } else {\n    const activeRow = (container as HTMLElement).querySelector(\n      `[aria-rowindex=\"${rowIndex}\"]`,\n    ) as HTMLElement;\n\n    if (activeRow) {\n      return activeRow;\n    } else {\n      throw Error(\n        `getRowElementAtIndex no row found for index index ${rowIndex}`,\n      );\n    }\n  }\n};\n\nexport const getIndexFromCellElement = (cellElement: HTMLElement | null) =>\n  getAriaColIndex(cellElement);\n\nexport const getAriaCellPos = (tableCell: HTMLDivElement): CellPos => {\n  const focusedRow = tableCell.closest(\"[role='row']\") as HTMLElement;\n  return [getAriaRowIndex(focusedRow), getAriaColIndex(tableCell)];\n};\n\nconst closestRow = (el: HTMLElement) =>\n  el.closest('[role=\"row\"]') as HTMLElement;\n\nexport const closestRowIndex = (el: HTMLElement) =>\n  getAriaRowIndex(closestRow(el));\n\nexport function getNextCellPos(\n  key: ArrowKey,\n  [rowIdx, colIdx]: CellPos,\n  columnCount: number,\n  maxRowIndex: number,\n): CellPos {\n  if (key === \"ArrowUp\") {\n    if (rowIdx > -1) {\n      return [rowIdx - 1, colIdx];\n    } else {\n      return [rowIdx, colIdx];\n    }\n  } else if (key === \"ArrowDown\") {\n    if (rowIdx === -1) {\n      return [1, colIdx];\n    } else if (rowIdx === maxRowIndex) {\n      return [rowIdx, colIdx];\n    } else {\n      return [rowIdx + 1, colIdx];\n    }\n  } else if (key === \"ArrowRight\") {\n    if (colIdx < columnCount) {\n      return [rowIdx, colIdx + 1];\n    } else {\n      return [rowIdx, colIdx];\n    }\n  } else if (key === \"ArrowLeft\") {\n    if (colIdx > 1) {\n      return [rowIdx, colIdx - 1];\n    } else {\n      return [rowIdx, colIdx];\n    }\n  }\n  return [rowIdx, colIdx];\n}\n\nexport type TreeNodeOperation = \"expand\" | \"collapse\" | \"level-up\";\n\nexport const getTreeNodeOperation = (\n  containerRef: RefObject<HTMLElement>,\n  navigationStyle: \"cell\" | \"tree\",\n  cellPos: CellPos,\n  key: NavigationKey,\n  shiftKey: boolean,\n): TreeNodeOperation | undefined => {\n  const cell = getTableCell(containerRef, cellPos);\n  if (navigationStyle === \"cell\" && !cellIsGroupCell(cell)) {\n    return undefined;\n  }\n  if (navigationStyle == \"cell\" && !shiftKey) {\n    return undefined;\n  }\n  if (cellIsGroupCell(cell)) {\n    const isExpanded = rowIsExpanded(cell);\n    if (isExpanded === true) {\n      if (key === \"ArrowLeft\") {\n        return \"collapse\";\n      }\n    } else if (isExpanded === false) {\n      if (key === \"ArrowRight\") {\n        return \"expand\";\n      } else if (key === \"ArrowLeft\") {\n        return \"level-up\";\n      }\n    } else if (key === \"ArrowLeft\") {\n      return \"level-up\";\n    }\n  }\n};\n\nconst NO_SCROLL_NECESSARY = [undefined, undefined] as const;\n\nexport const howFarIsRowOutsideViewport = (\n  rowEl: HTMLElement,\n  totalHeaderHeight: number,\n  contentContainer = rowEl.closest(\".vuuTable-contentContainer\"),\n): readonly [ScrollDirection | undefined, number | undefined] => {\n  //TODO lots of scope for optimisation here\n  if (contentContainer) {\n    // TODO take totalHeaderHeight into consideration\n    const viewport = contentContainer?.getBoundingClientRect();\n    const upperBoundary = viewport.top + totalHeaderHeight;\n    const row = rowEl.getBoundingClientRect();\n    if (row) {\n      if (row.bottom > viewport.bottom) {\n        return [\"down\", row.bottom - viewport.bottom];\n      } else if (row.top < upperBoundary) {\n        return [\"up\", row.top - upperBoundary];\n      } else {\n        return NO_SCROLL_NECESSARY;\n      }\n    } else {\n      throw Error(\"Whats going on, row not found\");\n    }\n  } else {\n    throw Error(\"Whats going on, scrollbar container not found\");\n  }\n};\n"],"names":[],"mappings":"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"}

package/cjs/table-header/HeaderProvider.js.map

@@ -1 +1 @@
-{"version":3,"file":"HeaderProvider.js","sources":["../../src/table-header/HeaderProvider.tsx"],"sourcesContent":["import { BaseRowProps } from \"@vuu-ui/vuu-table-types\";\nimport { createContext, FC, useContext } from \"react\";\n\nconst HeaderContext = createContext<BaseRowProps>({ columns: [] });\n\nexport const HeaderProvider: FC<BaseRowProps> = ({\n  children,\n  columns,\n  virtualColSpan,\n}) => {\n  return (\n    <HeaderContext.Provider value={{ columns, virtualColSpan }}>\n      {children}\n    </HeaderContext.Provider>\n  );\n};\n\nexport const useHeaderProps = () => useContext(HeaderContext);\n"],"names":["createContext","jsx","useContext"],"mappings":";;;;;AAGA,MAAM,gBAAgBA,mBAA4B,CAAA,EAAE,OAAS,EAAA,IAAI,CAAA,CAAA;AAE1D,MAAM,iBAAmC,CAAC;AAAA,EAC/C,QAAA;AAAA,EACA,OAAA;AAAA,EACA,cAAA;AACF,CAAM,KAAA;AACJ,EACE,uBAAAC,cAAA,CAAC,cAAc,QAAd,EAAA,EAAuB,OAAO,EAAE,OAAA,EAAS,cAAe,EAAA,EACtD,QACH,EAAA,CAAA,CAAA;AAEJ,EAAA;AAEa,MAAA,cAAA,GAAiB,MAAMC,gBAAA,CAAW,aAAa;;;;;"}
+{"version":3,"file":"HeaderProvider.js","sources":["../../src/table-header/HeaderProvider.tsx"],"sourcesContent":["import { BaseRowProps } from \"@vuu-ui/vuu-table-types\";\nimport { createContext, FC, ReactNode, useContext } from \"react\";\n\nconst HeaderContext = createContext<BaseRowProps>({ columns: [] });\n\nexport const HeaderProvider: FC<BaseRowProps & { children: ReactNode }> = ({\n  children,\n  columns,\n  virtualColSpan,\n}) => {\n  return (\n    <HeaderContext.Provider value={{ columns, virtualColSpan }}>\n      {children}\n    </HeaderContext.Provider>\n  );\n};\n\nexport const useHeaderProps = () => useContext(HeaderContext);\n"],"names":["createContext","jsx","useContext"],"mappings":";;;;;AAGA,MAAM,gBAAgBA,mBAA4B,CAAA,EAAE,OAAS,EAAA,IAAI,CAAA;AAE1D,MAAM,iBAA6D,CAAC;AAAA,EACzE,QAAA;AAAA,EACA,OAAA;AAAA,EACA;AACF,CAAM,KAAA;AACJ,EACE,uBAAAC,cAAA,CAAC,cAAc,QAAd,EAAA,EAAuB,OAAO,EAAE,OAAA,EAAS,cAAe,EAAA,EACtD,QACH,EAAA,CAAA;AAEJ;AAEa,MAAA,cAAA,GAAiB,MAAMC,gBAAA,CAAW,aAAa;;;;;"}

package/cjs/table-header/TableHeader.js

@@ -9,6 +9,7 @@ var HeaderCell = require('../header-cell/HeaderCell.js');
 var HeaderProvider = require('./HeaderProvider.js');
 var useTableHeader = require('./useTableHeader.js');
 
+const isHeaderElement = (h) => react.isValidElement(h);
 const TableHeader = react.memo(
   ({
     allowDragColumnHeader,
@@ -49,15 +50,11 @@ const TableHeader = react.memo(
       if (customHeader === void 0) {
         return [null, 0];
       } else if (Array.isArray(customHeader)) {
-        if (customHeader.some(react.isValidElement)) {
-          const header = /* @__PURE__ */ jsxRuntime.jsx(HeaderProvider.HeaderProvider, { columns, virtualColSpan, children: customHeader.map(
-            (header2, i) => react.isValidElement(header2) ? enrichElementWithAria(header2, i) : createElement(header2, i)
-          ) });
-          return [header, customHeader.length];
-        } else {
-          return [customHeader.map(createElement), customHeader.length];
-        }
-      } else if (react.isValidElement(customHeader)) {
+        const header = /* @__PURE__ */ jsxRuntime.jsx(HeaderProvider.HeaderProvider, { columns, virtualColSpan, children: customHeader.map(
+          (header2, i) => isHeaderElement(header2) ? enrichElementWithAria(header2, i) : createElement(header2, i)
+        ) });
+        return [header, customHeader.length];
+      } else if (isHeaderElement(customHeader)) {
         const header = /* @__PURE__ */ jsxRuntime.jsx(HeaderProvider.HeaderProvider, { columns, virtualColSpan, children: enrichElementWithAria(customHeader, 0) });
         return [header, 1];
       } else {

package/cjs/table-header/TableHeader.js.map

@@ -1 +1 @@
-{"version":3,"file":"TableHeader.js","sources":["../../src/table-header/TableHeader.tsx"],"sourcesContent":["import { VuuSortType } from \"@vuu-ui/vuu-protocol-types\";\nimport {\n  ColumnDescriptor,\n  CustomHeader,\n  RuntimeColumnDescriptor,\n  TableColumnResizeHandler,\n  TableConfig,\n  TableHeadings,\n} from \"@vuu-ui/vuu-table-types\";\nimport { isGroupColumn, isNotHidden } from \"@vuu-ui/vuu-utils\";\nimport cx from \"clsx\";\nimport { cloneElement, isValidElement, memo, useMemo } from \"react\";\nimport { GroupHeaderCell, HeaderCell } from \"../header-cell\";\nimport { HeaderProvider } from \"./HeaderProvider\";\nimport { useTableHeader } from \"./useTableHeader\";\n\nexport type ColumnSortHandler = (\n  column: ColumnDescriptor,\n  addToExistingSort: boolean,\n  sortType?: VuuSortType,\n) => void;\n\nexport interface TableHeaderProps {\n  allowDragColumnHeader: boolean;\n  classBase?: string;\n  columns: RuntimeColumnDescriptor[];\n  customHeader?: CustomHeader | CustomHeader[];\n  headings: TableHeadings;\n  onHeightMeasured: (height: number, count: number) => void;\n  onResizeColumn: TableColumnResizeHandler;\n  onMoveColumn: (columns: ColumnDescriptor[]) => void;\n  onMoveGroupColumn: (columns: ColumnDescriptor[]) => void;\n  onRemoveGroupColumn: (column: RuntimeColumnDescriptor) => void;\n  onSortColumn: ColumnSortHandler;\n  showColumnHeaderMenus: boolean;\n  tableConfig: TableConfig;\n  tableId: string;\n  virtualColSpan?: number;\n}\n\nexport const TableHeader = memo(\n  ({\n    allowDragColumnHeader,\n    classBase = \"vuuTable\",\n    columns,\n    customHeader,\n    headings,\n    onHeightMeasured,\n    onMoveColumn,\n    onMoveGroupColumn,\n    onRemoveGroupColumn,\n    onResizeColumn,\n    onSortColumn,\n    showColumnHeaderMenus,\n    tableConfig,\n    tableId,\n    virtualColSpan = 0,\n  }: TableHeaderProps) => {\n    const [customHeaders, customHeaderCount] = useMemo<\n      [JSX.Element | JSX.Element[] | null, number]\n    >(() => {\n      const offset = headings.length;\n      const createElement = (Component: CustomHeader, index: number) => (\n        <Component\n          ariaRowIndex={offset + index + 2}\n          ariaRole=\"row\"\n          columns={columns}\n          key={index}\n          virtualColSpan={virtualColSpan}\n        />\n      );\n\n      const enrichElementWithAria = (el: JSX.Element, rowIndex: number) => {\n        const offset = headings.length;\n        return cloneElement(el, {\n          \"aria-rowindex\": rowIndex + offset + 2,\n          ariaRole: \"row\",\n        });\n      };\n\n      if (customHeader === undefined) {\n        return [null, 0];\n      } else if (Array.isArray(customHeader)) {\n        if (customHeader.some(isValidElement)) {\n          const header = (\n            <HeaderProvider columns={columns} virtualColSpan={virtualColSpan}>\n              {customHeader.map((header, i) =>\n                isValidElement(header)\n                  ? enrichElementWithAria(header, i)\n                  : createElement(header, i),\n              )}\n            </HeaderProvider>\n          );\n          return [header, customHeader.length];\n        } else {\n          return [customHeader.map(createElement), customHeader.length];\n        }\n      } else if (isValidElement(customHeader)) {\n        // TODO rowIndex and role\n        const header = (\n          <HeaderProvider columns={columns} virtualColSpan={virtualColSpan}>\n            {enrichElementWithAria(customHeader, 0)}\n          </HeaderProvider>\n        );\n        return [header, 1];\n      } else {\n        return [createElement(customHeader, 0), 1];\n      }\n    }, [columns, customHeader, headings.length, virtualColSpan]);\n\n    const {\n      draggableColumn,\n      draggedColumnIndex,\n      onClick,\n      onMouseDown,\n      setContainerRef,\n    } = useTableHeader({\n      allowDragColumnHeader,\n      columns,\n      customHeaderCount,\n      headings,\n      onHeightMeasured,\n      onMoveColumn,\n      onSortColumn,\n      tableConfig,\n    });\n\n    return (\n      <div\n        className={`${classBase}-col-headings`}\n        ref={setContainerRef}\n        role=\"rowgroup\"\n      >\n        {headings.map((colHeaders, i) => (\n          <div\n            className=\"vuuTable-heading\"\n            key={i}\n            role=\"row\"\n            aria-rowindex={i + 1}\n          >\n            {colHeaders.map(({ label, width }, j) => (\n              <div key={j} className=\"vuuTable-headingCell\" style={{ width }}>\n                {label}\n              </div>\n            ))}\n          </div>\n        ))}\n        <div\n          className={`${classBase}-col-headers`}\n          role=\"row\"\n          aria-rowindex={headings.length + 1}\n        >\n          {virtualColSpan > 0 ? (\n            <div\n              role=\"cell\"\n              className=\"vuuTableCell\"\n              style={{ width: virtualColSpan }}\n            />\n          ) : null}\n          {columns.filter(isNotHidden).map((col, i) =>\n            isGroupColumn(col) ? (\n              <GroupHeaderCell\n                column={col}\n                data-index={i}\n                key={col.name}\n                onMoveColumn={onMoveGroupColumn}\n                onRemoveColumn={onRemoveGroupColumn}\n                onResize={onResizeColumn}\n              />\n            ) : (\n              <HeaderCell\n                className={cx({\n                  \"vuuDraggable-dragAway\": i === draggedColumnIndex,\n                })}\n                column={col}\n                data-index={i}\n                id={`${tableId}-col-${i}`}\n                key={col.name}\n                onClick={onClick}\n                onMouseDown={onMouseDown}\n                onResize={onResizeColumn}\n                showMenu={showColumnHeaderMenus}\n              />\n            ),\n          )}\n          {draggableColumn}\n        </div>\n        {customHeaders}\n      </div>\n    );\n  },\n);\nTableHeader.displayName = \"TableHeader\";\n"],"names":["memo","useMemo","jsx","offset","cloneElement","isValidElement","HeaderProvider","header","useTableHeader","jsxs","isNotHidden","isGroupColumn","GroupHeaderCell","HeaderCell"],"mappings":"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"}
+{"version":3,"file":"TableHeader.js","sources":["../../src/table-header/TableHeader.tsx"],"sourcesContent":["import { VuuSortType } from \"@vuu-ui/vuu-protocol-types\";\nimport {\n  ColumnDescriptor,\n  CustomHeader,\n  CustomHeaderComponent,\n  CustomHeaderElement,\n  RuntimeColumnDescriptor,\n  TableColumnResizeHandler,\n  TableConfig,\n  TableHeadings,\n} from \"@vuu-ui/vuu-table-types\";\nimport { isGroupColumn, isNotHidden } from \"@vuu-ui/vuu-utils\";\nimport cx from \"clsx\";\nimport { cloneElement, isValidElement, memo, useMemo } from \"react\";\nimport { GroupHeaderCell, HeaderCell } from \"../header-cell\";\nimport { HeaderProvider } from \"./HeaderProvider\";\nimport { useTableHeader } from \"./useTableHeader\";\n\nexport type ColumnSortHandler = (\n  column: ColumnDescriptor,\n  addToExistingSort: boolean,\n  sortType?: VuuSortType,\n) => void;\n\nconst isHeaderElement = (h: CustomHeader): h is CustomHeaderElement =>\n  isValidElement(h);\n\nexport interface TableHeaderProps {\n  allowDragColumnHeader: boolean;\n  classBase?: string;\n  columns: RuntimeColumnDescriptor[];\n  customHeader?: CustomHeader | CustomHeader[];\n  headings: TableHeadings;\n  onHeightMeasured: (height: number, count: number) => void;\n  onResizeColumn: TableColumnResizeHandler;\n  onMoveColumn: (columns: ColumnDescriptor[]) => void;\n  onMoveGroupColumn: (columns: ColumnDescriptor[]) => void;\n  onRemoveGroupColumn: (column: RuntimeColumnDescriptor) => void;\n  onSortColumn: ColumnSortHandler;\n  showColumnHeaderMenus: boolean;\n  tableConfig: TableConfig;\n  tableId: string;\n  virtualColSpan?: number;\n}\n\nexport const TableHeader = memo(\n  ({\n    allowDragColumnHeader,\n    classBase = \"vuuTable\",\n    columns,\n    customHeader,\n    headings,\n    onHeightMeasured,\n    onMoveColumn,\n    onMoveGroupColumn,\n    onRemoveGroupColumn,\n    onResizeColumn,\n    onSortColumn,\n    showColumnHeaderMenus,\n    tableConfig,\n    tableId,\n    virtualColSpan = 0,\n  }: TableHeaderProps) => {\n    const [customHeaders, customHeaderCount] = useMemo<\n      [JSX.Element | JSX.Element[] | null, number]\n    >(() => {\n      const offset = headings.length;\n      const createElement = (\n        Component: CustomHeaderComponent,\n        index: number,\n      ) => (\n        <Component\n          ariaRowIndex={offset + index + 2}\n          ariaRole=\"row\"\n          columns={columns}\n          key={index}\n          virtualColSpan={virtualColSpan}\n        />\n      );\n\n      const enrichElementWithAria = (el: JSX.Element, rowIndex: number) => {\n        const offset = headings.length;\n        return cloneElement(el, {\n          \"aria-rowindex\": rowIndex + offset + 2,\n          ariaRole: \"row\",\n        });\n      };\n\n      if (customHeader === undefined) {\n        return [null, 0];\n      } else if (Array.isArray(customHeader)) {\n        const header = (\n          <HeaderProvider columns={columns} virtualColSpan={virtualColSpan}>\n            {customHeader.map((header, i) =>\n              isHeaderElement(header)\n                ? enrichElementWithAria(header, i)\n                : createElement(header, i),\n            )}\n          </HeaderProvider>\n        );\n        return [header, customHeader.length];\n      } else if (isHeaderElement(customHeader)) {\n        // TODO rowIndex and role\n        const header = (\n          <HeaderProvider columns={columns} virtualColSpan={virtualColSpan}>\n            {enrichElementWithAria(customHeader, 0)}\n          </HeaderProvider>\n        );\n        return [header, 1];\n      } else {\n        return [createElement(customHeader, 0), 1];\n      }\n    }, [columns, customHeader, headings.length, virtualColSpan]);\n\n    const {\n      draggableColumn,\n      draggedColumnIndex,\n      onClick,\n      onMouseDown,\n      setContainerRef,\n    } = useTableHeader({\n      allowDragColumnHeader,\n      columns,\n      customHeaderCount,\n      headings,\n      onHeightMeasured,\n      onMoveColumn,\n      onSortColumn,\n      tableConfig,\n    });\n\n    return (\n      <div\n        className={`${classBase}-col-headings`}\n        ref={setContainerRef}\n        role=\"rowgroup\"\n      >\n        {headings.map((colHeaders, i) => (\n          <div\n            className=\"vuuTable-heading\"\n            key={i}\n            role=\"row\"\n            aria-rowindex={i + 1}\n          >\n            {colHeaders.map(({ label, width }, j) => (\n              <div key={j} className=\"vuuTable-headingCell\" style={{ width }}>\n                {label}\n              </div>\n            ))}\n          </div>\n        ))}\n        <div\n          className={`${classBase}-col-headers`}\n          role=\"row\"\n          aria-rowindex={headings.length + 1}\n        >\n          {virtualColSpan > 0 ? (\n            <div\n              role=\"cell\"\n              className=\"vuuTableCell\"\n              style={{ width: virtualColSpan }}\n            />\n          ) : null}\n          {columns.filter(isNotHidden).map((col, i) =>\n            isGroupColumn(col) ? (\n              <GroupHeaderCell\n                column={col}\n                data-index={i}\n                key={col.name}\n                onMoveColumn={onMoveGroupColumn}\n                onRemoveColumn={onRemoveGroupColumn}\n                onResize={onResizeColumn}\n              />\n            ) : (\n              <HeaderCell\n                className={cx({\n                  \"vuuDraggable-dragAway\": i === draggedColumnIndex,\n                })}\n                column={col}\n                data-index={i}\n                id={`${tableId}-col-${i}`}\n                key={col.name}\n                onClick={onClick}\n                onMouseDown={onMouseDown}\n                onResize={onResizeColumn}\n                showMenu={showColumnHeaderMenus}\n              />\n            ),\n          )}\n          {draggableColumn}\n        </div>\n        {customHeaders}\n      </div>\n    );\n  },\n);\nTableHeader.displayName = \"TableHeader\";\n"],"names":["isValidElement","memo","useMemo","jsx","offset","cloneElement","HeaderProvider","header","useTableHeader","jsxs","isNotHidden","isGroupColumn","GroupHeaderCell","HeaderCell"],"mappings":";;;;;;;;;;;AAwBA,MAAM,eAAkB,GAAA,CAAC,CACvB,KAAAA,oBAAA,CAAe,CAAC,CAAA;AAoBX,MAAM,WAAc,GAAAC,UAAA;AAAA,EACzB,CAAC;AAAA,IACC,qBAAA;AAAA,IACA,SAAY,GAAA,UAAA;AAAA,IACZ,OAAA;AAAA,IACA,YAAA;AAAA,IACA,QAAA;AAAA,IACA,gBAAA;AAAA,IACA,YAAA;AAAA,IACA,iBAAA;AAAA,IACA,mBAAA;AAAA,IACA,cAAA;AAAA,IACA,YAAA;AAAA,IACA,qBAAA;AAAA,IACA,WAAA;AAAA,IACA,OAAA;AAAA,IACA,cAAiB,GAAA;AAAA,GACK,KAAA;AACtB,IAAA,MAAM,CAAC,aAAA,EAAe,iBAAiB,CAAA,GAAIC,cAEzC,MAAM;AACN,MAAA,MAAM,SAAS,QAAS,CAAA,MAAA;AACxB,MAAM,MAAA,aAAA,GAAgB,CACpB,SAAA,EACA,KAEA,qBAAAC,cAAA;AAAA,QAAC,SAAA;AAAA,QAAA;AAAA,UACC,YAAA,EAAc,SAAS,KAAQ,GAAA,CAAA;AAAA,UAC/B,QAAS,EAAA,KAAA;AAAA,UACT,OAAA;AAAA,UAEA;AAAA,SAAA;AAAA,QADK;AAAA,OAEP;AAGF,MAAM,MAAA,qBAAA,GAAwB,CAAC,EAAA,EAAiB,QAAqB,KAAA;AACnE,QAAA,MAAMC,UAAS,QAAS,CAAA,MAAA;AACxB,QAAA,OAAOC,mBAAa,EAAI,EAAA;AAAA,UACtB,eAAA,EAAiB,WAAWD,OAAS,GAAA,CAAA;AAAA,UACrC,QAAU,EAAA;AAAA,SACX,CAAA;AAAA,OACH;AAEA,MAAA,IAAI,iBAAiB,KAAW,CAAA,EAAA;AAC9B,QAAO,OAAA,CAAC,MAAM,CAAC,CAAA;AAAA,OACN,MAAA,IAAA,KAAA,CAAM,OAAQ,CAAA,YAAY,CAAG,EAAA;AACtC,QAAA,MAAM,MACJ,mBAAAD,cAAA,CAACG,6BAAe,EAAA,EAAA,OAAA,EAAkB,gBAC/B,QAAa,EAAA,YAAA,CAAA,GAAA;AAAA,UAAI,CAACC,OAAAA,EAAQ,CACzB,KAAA,eAAA,CAAgBA,OAAM,CAAA,GAClB,qBAAsBA,CAAAA,OAAAA,EAAQ,CAAC,CAAA,GAC/B,aAAcA,CAAAA,OAAAA,EAAQ,CAAC;AAAA,SAE/B,EAAA,CAAA;AAEF,QAAO,OAAA,CAAC,MAAQ,EAAA,YAAA,CAAa,MAAM,CAAA;AAAA,OACrC,MAAA,IAAW,eAAgB,CAAA,YAAY,CAAG,EAAA;AAExC,QAAM,MAAA,MAAA,kCACHD,6BAAe,EAAA,EAAA,OAAA,EAAkB,gBAC/B,QAAsB,EAAA,qBAAA,CAAA,YAAA,EAAc,CAAC,CACxC,EAAA,CAAA;AAEF,QAAO,OAAA,CAAC,QAAQ,CAAC,CAAA;AAAA,OACZ,MAAA;AACL,QAAA,OAAO,CAAC,aAAA,CAAc,YAAc,EAAA,CAAC,GAAG,CAAC,CAAA;AAAA;AAC3C,OACC,CAAC,OAAA,EAAS,cAAc,QAAS,CAAA,MAAA,EAAQ,cAAc,CAAC,CAAA;AAE3D,IAAM,MAAA;AAAA,MACJ,eAAA;AAAA,MACA,kBAAA;AAAA,MACA,OAAA;AAAA,MACA,WAAA;AAAA,MACA;AAAA,QACEE,6BAAe,CAAA;AAAA,MACjB,qBAAA;AAAA,MACA,OAAA;AAAA,MACA,iBAAA;AAAA,MACA,QAAA;AAAA,MACA,gBAAA;AAAA,MACA,YAAA;AAAA,MACA,YAAA;AAAA,MACA;AAAA,KACD,CAAA;AAED,IACE,uBAAAC,eAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,SAAA,EAAW,GAAG,SAAS,CAAA,aAAA,CAAA;AAAA,QACvB,GAAK,EAAA,eAAA;AAAA,QACL,IAAK,EAAA,UAAA;AAAA,QAEJ,QAAA,EAAA;AAAA,UAAS,QAAA,CAAA,GAAA,CAAI,CAAC,UAAA,EAAY,CACzB,qBAAAN,cAAA;AAAA,YAAC,KAAA;AAAA,YAAA;AAAA,cACC,SAAU,EAAA,kBAAA;AAAA,cAEV,IAAK,EAAA,KAAA;AAAA,cACL,iBAAe,CAAI,GAAA,CAAA;AAAA,cAElB,qBAAW,GAAI,CAAA,CAAC,EAAE,KAAO,EAAA,KAAA,IAAS,CACjC,qBAAAA,cAAA,CAAC,KAAY,EAAA,EAAA,SAAA,EAAU,wBAAuB,KAAO,EAAA,EAAE,OACpD,EAAA,QAAA,EAAA,KAAA,EAAA,EADO,CAEV,CACD;AAAA,aAAA;AAAA,YARI;AAAA,WAUR,CAAA;AAAA,0BACDM,eAAA;AAAA,YAAC,KAAA;AAAA,YAAA;AAAA,cACC,SAAA,EAAW,GAAG,SAAS,CAAA,YAAA,CAAA;AAAA,cACvB,IAAK,EAAA,KAAA;AAAA,cACL,eAAA,EAAe,SAAS,MAAS,GAAA,CAAA;AAAA,cAEhC,QAAA,EAAA;AAAA,gBAAA,cAAA,GAAiB,CAChB,mBAAAN,cAAA;AAAA,kBAAC,KAAA;AAAA,kBAAA;AAAA,oBACC,IAAK,EAAA,MAAA;AAAA,oBACL,SAAU,EAAA,cAAA;AAAA,oBACV,KAAA,EAAO,EAAE,KAAA,EAAO,cAAe;AAAA;AAAA,iBAE/B,GAAA,IAAA;AAAA,gBACH,OAAA,CAAQ,MAAO,CAAAO,oBAAW,CAAE,CAAA,GAAA;AAAA,kBAAI,CAAC,GAAA,EAAK,CACrC,KAAAC,sBAAA,CAAc,GAAG,CACf,mBAAAR,cAAA;AAAA,oBAACS,+BAAA;AAAA,oBAAA;AAAA,sBACC,MAAQ,EAAA,GAAA;AAAA,sBACR,YAAY,EAAA,CAAA;AAAA,sBAEZ,YAAc,EAAA,iBAAA;AAAA,sBACd,cAAgB,EAAA,mBAAA;AAAA,sBAChB,QAAU,EAAA;AAAA,qBAAA;AAAA,oBAHL,GAAI,CAAA;AAAA,mBAMX,mBAAAT,cAAA;AAAA,oBAACU,qBAAA;AAAA,oBAAA;AAAA,sBACC,WAAW,EAAG,CAAA;AAAA,wBACZ,yBAAyB,CAAM,KAAA;AAAA,uBAChC,CAAA;AAAA,sBACD,MAAQ,EAAA,GAAA;AAAA,sBACR,YAAY,EAAA,CAAA;AAAA,sBACZ,EAAI,EAAA,CAAA,EAAG,OAAO,CAAA,KAAA,EAAQ,CAAC,CAAA,CAAA;AAAA,sBAEvB,OAAA;AAAA,sBACA,WAAA;AAAA,sBACA,QAAU,EAAA,cAAA;AAAA,sBACV,QAAU,EAAA;AAAA,qBAAA;AAAA,oBAJL,GAAI,CAAA;AAAA;AAKX,iBAEJ;AAAA,gBACC;AAAA;AAAA;AAAA,WACH;AAAA,UACC;AAAA;AAAA;AAAA,KACH;AAAA;AAGN;AACA,WAAA,CAAY,WAAc,GAAA,aAAA;;;;"}

package/cjs/table-header/useTableHeader.js.map

@@ -1 +1 @@
-{"version":3,"file":"useTableHeader.js","sources":["../../src/table-header/useTableHeader.ts"],"sourcesContent":["import { ColumnDescriptor, TableHeadings } from \"@vuu-ui/vuu-table-types\";\nimport {\n  DropOptions,\n  useDragDrop as useDragDrop,\n} from \"@vuu-ui/vuu-ui-controls\";\nimport {\n  moveColumnTo,\n  queryClosest,\n  visibleColumnAtIndex,\n} from \"@vuu-ui/vuu-utils\";\nimport { RefCallback, useCallback, useRef } from \"react\";\nimport { TableHeaderProps } from \"./TableHeader\";\nimport { useMeasuredHeight } from \"../useMeasuredHeight\";\nimport { useForkRef } from \"@salt-ds/core\";\n\nexport interface TableHeaderHookProps\n  extends Pick<\n    TableHeaderProps,\n    | \"allowDragColumnHeader\"\n    | \"columns\"\n    | \"onMoveColumn\"\n    | \"onSortColumn\"\n    | \"tableConfig\"\n  > {\n  customHeaderCount: number;\n  headings: TableHeadings;\n  label?: string;\n  onHeightMeasured: (height: number, customHeaderCount: number) => void;\n  onMoveColumn: (columns: ColumnDescriptor[]) => void;\n  onSortColumn: (column: ColumnDescriptor, addToExistingSort: boolean) => void;\n}\n\nexport const useTableHeader = ({\n  allowDragColumnHeader,\n  columns,\n  customHeaderCount,\n  headings,\n  onHeightMeasured,\n  onMoveColumn,\n  onSortColumn,\n  tableConfig,\n}: TableHeaderHookProps) => {\n  const containerRef = useRef<HTMLDivElement | null>(null);\n  const scrollingContainerRef = useRef<HTMLDivElement | null>(null);\n\n  const handleHeightMeasured = useCallback(\n    (height: number) => {\n      onHeightMeasured(height, customHeaderCount + headings.length + 1);\n    },\n    [customHeaderCount, headings, onHeightMeasured],\n  );\n\n  const { measuredRef: rowRef } = useMeasuredHeight({\n    onHeightMeasured: handleHeightMeasured,\n  });\n\n  const setContainerRef = useCallback<RefCallback<HTMLDivElement>>((el) => {\n    containerRef.current = el;\n    if (el) {\n      scrollingContainerRef.current = el.closest(\".vuuTable-contentContainer\");\n    } else {\n      scrollingContainerRef.current = null;\n    }\n  }, []);\n\n  const handleDropColumnHeader = useCallback(\n    ({ fromIndex: moveFrom, toIndex: moveTo }: DropOptions) => {\n      const column = columns[moveFrom];\n      // columns are what get rendered, so these are the columns that\n      // the drop operation relates to. We must translate these into\n      // columns within the table config. Grouping complicates this\n      // as the group columns are not present in columns but ARE in\n      // config.columns\n      const orderedColumns = moveColumnTo(columns, column, moveTo);\n\n      const ofColumn =\n        ({ name }: ColumnDescriptor) =>\n        (col: ColumnDescriptor) =>\n          col.name === name;\n\n      const targetIndex = orderedColumns.findIndex(ofColumn(column));\n      const nextColumn = orderedColumns[targetIndex + 1];\n      const insertPos = nextColumn\n        ? tableConfig.columns.findIndex(ofColumn(nextColumn))\n        : -1;\n\n      if (moveTo > moveFrom && insertPos !== -1) {\n        onMoveColumn(moveColumnTo(tableConfig.columns, column, insertPos - 1));\n      } else {\n        onMoveColumn(moveColumnTo(tableConfig.columns, column, insertPos));\n      }\n    },\n    [columns, onMoveColumn, tableConfig.columns],\n  );\n\n  const handleColumnHeaderClick = useCallback(\n    (evt: React.MouseEvent | React.KeyboardEvent) => {\n      const headerCell = queryClosest(evt.target, \".vuuTableHeaderCell\");\n      const colIdx = parseInt(headerCell?.dataset.index ?? \"-1\");\n      const column = visibleColumnAtIndex(columns, colIdx);\n      const isAdditive = evt.shiftKey;\n      column && onSortColumn(column, isAdditive);\n    },\n    [columns, onSortColumn],\n  );\n\n  // Drag Drop column headers\n  const {\n    onMouseDown: columnHeaderDragMouseDown,\n    draggable: draggableColumn,\n    ...dragDropHook\n  } = useDragDrop({\n    allowDragDrop: allowDragColumnHeader,\n    containerRef,\n    draggableClassName: `vuuTable`,\n    itemQuery: \".vuuTableHeaderCell\",\n    onDrop: handleDropColumnHeader,\n    orientation: \"horizontal\",\n    scrollingContainerRef,\n  });\n\n  return {\n    draggableColumn,\n    draggedColumnIndex: dragDropHook.draggedItemIndex,\n    onClick: handleColumnHeaderClick,\n    onMouseDown: columnHeaderDragMouseDown,\n    setContainerRef: useForkRef(setContainerRef, rowRef),\n  };\n};\n"],"names":["useRef","useCallback","useMeasuredHeight","moveColumnTo","queryClosest","visibleColumnAtIndex","useDragDrop","useForkRef"],"mappings":";;;;;;;;AAgCO,MAAM,iBAAiB,CAAC;AAAA,EAC7B,qBAAA;AAAA,EACA,OAAA;AAAA,EACA,iBAAA;AAAA,EACA,QAAA;AAAA,EACA,gBAAA;AAAA,EACA,YAAA;AAAA,EACA,YAAA;AAAA,EACA,WAAA;AACF,CAA4B,KAAA;AAC1B,EAAM,MAAA,YAAA,GAAeA,aAA8B,IAAI,CAAA,CAAA;AACvD,EAAM,MAAA,qBAAA,GAAwBA,aAA8B,IAAI,CAAA,CAAA;AAEhE,EAAA,MAAM,oBAAuB,GAAAC,iBAAA;AAAA,IAC3B,CAAC,MAAmB,KAAA;AAClB,MAAA,gBAAA,CAAiB,MAAQ,EAAA,iBAAA,GAAoB,QAAS,CAAA,MAAA,GAAS,CAAC,CAAA,CAAA;AAAA,KAClE;AAAA,IACA,CAAC,iBAAmB,EAAA,QAAA,EAAU,gBAAgB,CAAA;AAAA,GAChD,CAAA;AAEA,EAAA,MAAM,EAAE,WAAA,EAAa,MAAO,EAAA,GAAIC,mCAAkB,CAAA;AAAA,IAChD,gBAAkB,EAAA,oBAAA;AAAA,GACnB,CAAA,CAAA;AAED,EAAM,MAAA,eAAA,GAAkBD,iBAAyC,CAAA,CAAC,EAAO,KAAA;AACvE,IAAA,YAAA,CAAa,OAAU,GAAA,EAAA,CAAA;AACvB,IAAA,IAAI,EAAI,EAAA;AACN,MAAsB,qBAAA,CAAA,OAAA,GAAU,EAAG,CAAA,OAAA,CAAQ,4BAA4B,CAAA,CAAA;AAAA,KAClE,MAAA;AACL,MAAA,qBAAA,CAAsB,OAAU,GAAA,IAAA,CAAA;AAAA,KAClC;AAAA,GACF,EAAG,EAAE,CAAA,CAAA;AAEL,EAAA,MAAM,sBAAyB,GAAAA,iBAAA;AAAA,IAC7B,CAAC,EAAE,SAAA,EAAW,QAAU,EAAA,OAAA,EAAS,QAA0B,KAAA;AACzD,MAAM,MAAA,MAAA,GAAS,QAAQ,QAAQ,CAAA,CAAA;AAM/B,MAAA,MAAM,cAAiB,GAAAE,qBAAA,CAAa,OAAS,EAAA,MAAA,EAAQ,MAAM,CAAA,CAAA;AAE3D,MAAM,MAAA,QAAA,GACJ,CAAC,EAAE,IAAA,OACH,CAAC,GAAA,KACC,IAAI,IAAS,KAAA,IAAA,CAAA;AAEjB,MAAA,MAAM,WAAc,GAAA,cAAA,CAAe,SAAU,CAAA,QAAA,CAAS,MAAM,CAAC,CAAA,CAAA;AAC7D,MAAM,MAAA,UAAA,GAAa,cAAe,CAAA,WAAA,GAAc,CAAC,CAAA,CAAA;AACjD,MAAM,MAAA,SAAA,GAAY,aACd,WAAY,CAAA,OAAA,CAAQ,UAAU,QAAS,CAAA,UAAU,CAAC,CAClD,GAAA,CAAA,CAAA,CAAA;AAEJ,MAAI,IAAA,MAAA,GAAS,QAAY,IAAA,SAAA,KAAc,CAAI,CAAA,EAAA;AACzC,QAAA,YAAA,CAAaA,sBAAa,WAAY,CAAA,OAAA,EAAS,MAAQ,EAAA,SAAA,GAAY,CAAC,CAAC,CAAA,CAAA;AAAA,OAChE,MAAA;AACL,QAAA,YAAA,CAAaA,qBAAa,CAAA,WAAA,CAAY,OAAS,EAAA,MAAA,EAAQ,SAAS,CAAC,CAAA,CAAA;AAAA,OACnE;AAAA,KACF;AAAA,IACA,CAAC,OAAA,EAAS,YAAc,EAAA,WAAA,CAAY,OAAO,CAAA;AAAA,GAC7C,CAAA;AAEA,EAAA,MAAM,uBAA0B,GAAAF,iBAAA;AAAA,IAC9B,CAAC,GAAgD,KAAA;AAC/C,MAAA,MAAM,UAAa,GAAAG,qBAAA,CAAa,GAAI,CAAA,MAAA,EAAQ,qBAAqB,CAAA,CAAA;AACjE,MAAA,MAAM,MAAS,GAAA,QAAA,CAAS,UAAY,EAAA,OAAA,CAAQ,SAAS,IAAI,CAAA,CAAA;AACzD,MAAM,MAAA,MAAA,GAASC,6BAAqB,CAAA,OAAA,EAAS,MAAM,CAAA,CAAA;AACnD,MAAA,MAAM,aAAa,GAAI,CAAA,QAAA,CAAA;AACvB,MAAU,MAAA,IAAA,YAAA,CAAa,QAAQ,UAAU,CAAA,CAAA;AAAA,KAC3C;AAAA,IACA,CAAC,SAAS,YAAY,CAAA;AAAA,GACxB,CAAA;AAGA,EAAM,MAAA;AAAA,IACJ,WAAa,EAAA,yBAAA;AAAA,IACb,SAAW,EAAA,eAAA;AAAA,IACX,GAAG,YAAA;AAAA,MACDC,yBAAY,CAAA;AAAA,IACd,aAAe,EAAA,qBAAA;AAAA,IACf,YAAA;AAAA,IACA,kBAAoB,EAAA,CAAA,QAAA,CAAA;AAAA,IACpB,SAAW,EAAA,qBAAA;AAAA,IACX,MAAQ,EAAA,sBAAA;AAAA,IACR,WAAa,EAAA,YAAA;AAAA,IACb,qBAAA;AAAA,GACD,CAAA,CAAA;AAED,EAAO,OAAA;AAAA,IACL,eAAA;AAAA,IACA,oBAAoB,YAAa,CAAA,gBAAA;AAAA,IACjC,OAAS,EAAA,uBAAA;AAAA,IACT,WAAa,EAAA,yBAAA;AAAA,IACb,eAAA,EAAiBC,eAAW,CAAA,eAAA,EAAiB,MAAM,CAAA;AAAA,GACrD,CAAA;AACF;;;;"}
+{"version":3,"file":"useTableHeader.js","sources":["../../src/table-header/useTableHeader.ts"],"sourcesContent":["import { ColumnDescriptor, TableHeadings } from \"@vuu-ui/vuu-table-types\";\nimport {\n  DropOptions,\n  useDragDrop as useDragDrop,\n} from \"@vuu-ui/vuu-ui-controls\";\nimport {\n  moveColumnTo,\n  queryClosest,\n  visibleColumnAtIndex,\n} from \"@vuu-ui/vuu-utils\";\nimport { RefCallback, useCallback, useRef } from \"react\";\nimport { TableHeaderProps } from \"./TableHeader\";\nimport { useMeasuredHeight } from \"../useMeasuredHeight\";\nimport { useForkRef } from \"@salt-ds/core\";\n\nexport interface TableHeaderHookProps\n  extends Pick<\n    TableHeaderProps,\n    | \"allowDragColumnHeader\"\n    | \"columns\"\n    | \"onMoveColumn\"\n    | \"onSortColumn\"\n    | \"tableConfig\"\n  > {\n  customHeaderCount: number;\n  headings: TableHeadings;\n  label?: string;\n  onHeightMeasured: (height: number, customHeaderCount: number) => void;\n  onMoveColumn: (columns: ColumnDescriptor[]) => void;\n  onSortColumn: (column: ColumnDescriptor, addToExistingSort: boolean) => void;\n}\n\nexport const useTableHeader = ({\n  allowDragColumnHeader,\n  columns,\n  customHeaderCount,\n  headings,\n  onHeightMeasured,\n  onMoveColumn,\n  onSortColumn,\n  tableConfig,\n}: TableHeaderHookProps) => {\n  const containerRef = useRef<HTMLDivElement | null>(null);\n  const scrollingContainerRef = useRef<HTMLDivElement | null>(null);\n\n  const handleHeightMeasured = useCallback(\n    (height: number) => {\n      onHeightMeasured(height, customHeaderCount + headings.length + 1);\n    },\n    [customHeaderCount, headings, onHeightMeasured],\n  );\n\n  const { measuredRef: rowRef } = useMeasuredHeight({\n    onHeightMeasured: handleHeightMeasured,\n  });\n\n  const setContainerRef = useCallback<RefCallback<HTMLDivElement>>((el) => {\n    containerRef.current = el;\n    if (el) {\n      scrollingContainerRef.current = el.closest(\".vuuTable-contentContainer\");\n    } else {\n      scrollingContainerRef.current = null;\n    }\n  }, []);\n\n  const handleDropColumnHeader = useCallback(\n    ({ fromIndex: moveFrom, toIndex: moveTo }: DropOptions) => {\n      const column = columns[moveFrom];\n      // columns are what get rendered, so these are the columns that\n      // the drop operation relates to. We must translate these into\n      // columns within the table config. Grouping complicates this\n      // as the group columns are not present in columns but ARE in\n      // config.columns\n      const orderedColumns = moveColumnTo(columns, column, moveTo);\n\n      const ofColumn =\n        ({ name }: ColumnDescriptor) =>\n        (col: ColumnDescriptor) =>\n          col.name === name;\n\n      const targetIndex = orderedColumns.findIndex(ofColumn(column));\n      const nextColumn = orderedColumns[targetIndex + 1];\n      const insertPos = nextColumn\n        ? tableConfig.columns.findIndex(ofColumn(nextColumn))\n        : -1;\n\n      if (moveTo > moveFrom && insertPos !== -1) {\n        onMoveColumn(moveColumnTo(tableConfig.columns, column, insertPos - 1));\n      } else {\n        onMoveColumn(moveColumnTo(tableConfig.columns, column, insertPos));\n      }\n    },\n    [columns, onMoveColumn, tableConfig.columns],\n  );\n\n  const handleColumnHeaderClick = useCallback(\n    (evt: React.MouseEvent | React.KeyboardEvent) => {\n      const headerCell = queryClosest(evt.target, \".vuuTableHeaderCell\");\n      const colIdx = parseInt(headerCell?.dataset.index ?? \"-1\");\n      const column = visibleColumnAtIndex(columns, colIdx);\n      const isAdditive = evt.shiftKey;\n      column && onSortColumn(column, isAdditive);\n    },\n    [columns, onSortColumn],\n  );\n\n  // Drag Drop column headers\n  const {\n    onMouseDown: columnHeaderDragMouseDown,\n    draggable: draggableColumn,\n    ...dragDropHook\n  } = useDragDrop({\n    allowDragDrop: allowDragColumnHeader,\n    containerRef,\n    draggableClassName: `vuuTable`,\n    itemQuery: \".vuuTableHeaderCell\",\n    onDrop: handleDropColumnHeader,\n    orientation: \"horizontal\",\n    scrollingContainerRef,\n  });\n\n  return {\n    draggableColumn,\n    draggedColumnIndex: dragDropHook.draggedItemIndex,\n    onClick: handleColumnHeaderClick,\n    onMouseDown: columnHeaderDragMouseDown,\n    setContainerRef: useForkRef(setContainerRef, rowRef),\n  };\n};\n"],"names":["useRef","useCallback","useMeasuredHeight","moveColumnTo","queryClosest","visibleColumnAtIndex","useDragDrop","useForkRef"],"mappings":"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"}

package/cjs/useCell.js.map

@@ -1 +1 @@
-{"version":3,"file":"useCell.js","sources":["../src/useCell.ts"],"sourcesContent":["import { RuntimeColumnDescriptor } from \"@vuu-ui/vuu-table-types\";\nimport { getColumnStyle } from \"@vuu-ui/vuu-utils\";\nimport cx from \"clsx\";\nimport { useMemo } from \"react\";\n\nexport const useCell = (\n  column: RuntimeColumnDescriptor,\n  classBase: string,\n  isHeader?: boolean,\n  hasError?: boolean,\n) =>\n  // TODO measure perf without the memo, might not be worth the cost\n  useMemo(() => {\n    const className = cx(classBase, column.className, {\n      vuuPinFloating: column.pin === \"floating\",\n      vuuPinLeft: column.pin === \"left\",\n      vuuPinRight: column.pin === \"right\",\n      vuuEndPin: isHeader && column.endPin,\n      [`${classBase}-editable`]: column.editable,\n      [`${classBase}-right`]: column.align === \"right\",\n      [`${classBase}-error`]: hasError,\n    });\n\n    const style = getColumnStyle(column);\n    return {\n      className,\n      style,\n    };\n  }, [classBase, column, isHeader, hasError]);\n"],"names":["useMemo","getColumnStyle"],"mappings":";;;;;;AAKO,MAAM,OAAU,GAAA,CACrB,MACA,EAAA,SAAA,EACA,QACA,EAAA,QAAA;AAAA;AAAA,EAGAA,cAAQ,MAAM;AACZ,IAAA,MAAM,SAAY,GAAA,EAAA,CAAG,SAAW,EAAA,MAAA,CAAO,SAAW,EAAA;AAAA,MAChD,cAAA,EAAgB,OAAO,GAAQ,KAAA,UAAA;AAAA,MAC/B,UAAA,EAAY,OAAO,GAAQ,KAAA,MAAA;AAAA,MAC3B,WAAA,EAAa,OAAO,GAAQ,KAAA,OAAA;AAAA,MAC5B,SAAA,EAAW,YAAY,MAAO,CAAA,MAAA;AAAA,MAC9B,CAAC,CAAA,EAAG,SAAS,CAAA,SAAA,CAAW,GAAG,MAAO,CAAA,QAAA;AAAA,MAClC,CAAC,CAAG,EAAA,SAAS,CAAQ,MAAA,CAAA,GAAG,OAAO,KAAU,KAAA,OAAA;AAAA,MACzC,CAAC,CAAA,EAAG,SAAS,CAAA,MAAA,CAAQ,GAAG,QAAA;AAAA,KACzB,CAAA,CAAA;AAED,IAAM,MAAA,KAAA,GAAQC,wBAAe,MAAM,CAAA,CAAA;AACnC,IAAO,OAAA;AAAA,MACL,SAAA;AAAA,MACA,KAAA;AAAA,KACF,CAAA;AAAA,KACC,CAAC,SAAA,EAAW,MAAQ,EAAA,QAAA,EAAU,QAAQ,CAAC,CAAA;AAAA;;;;"}
+{"version":3,"file":"useCell.js","sources":["../src/useCell.ts"],"sourcesContent":["import { RuntimeColumnDescriptor } from \"@vuu-ui/vuu-table-types\";\nimport { getColumnStyle } from \"@vuu-ui/vuu-utils\";\nimport cx from \"clsx\";\nimport { useMemo } from \"react\";\n\nexport const useCell = (\n  column: RuntimeColumnDescriptor,\n  classBase: string,\n  isHeader?: boolean,\n  hasError?: boolean,\n) =>\n  // TODO measure perf without the memo, might not be worth the cost\n  useMemo(() => {\n    const className = cx(classBase, column.className, {\n      vuuPinFloating: column.pin === \"floating\",\n      vuuPinLeft: column.pin === \"left\",\n      vuuPinRight: column.pin === \"right\",\n      vuuEndPin: isHeader && column.endPin,\n      [`${classBase}-editable`]: column.editable,\n      [`${classBase}-right`]: column.align === \"right\",\n      [`${classBase}-error`]: hasError,\n    });\n\n    const style = getColumnStyle(column);\n    return {\n      className,\n      style,\n    };\n  }, [classBase, column, isHeader, hasError]);\n"],"names":["useMemo","getColumnStyle"],"mappings":";;;;;;AAKO,MAAM,OAAU,GAAA,CACrB,MACA,EAAA,SAAA,EACA,QACA,EAAA,QAAA;AAAA;AAAA,EAGAA,cAAQ,MAAM;AACZ,IAAA,MAAM,SAAY,GAAA,EAAA,CAAG,SAAW,EAAA,MAAA,CAAO,SAAW,EAAA;AAAA,MAChD,cAAA,EAAgB,OAAO,GAAQ,KAAA,UAAA;AAAA,MAC/B,UAAA,EAAY,OAAO,GAAQ,KAAA,MAAA;AAAA,MAC3B,WAAA,EAAa,OAAO,GAAQ,KAAA,OAAA;AAAA,MAC5B,SAAA,EAAW,YAAY,MAAO,CAAA,MAAA;AAAA,MAC9B,CAAC,CAAA,EAAG,SAAS,CAAA,SAAA,CAAW,GAAG,MAAO,CAAA,QAAA;AAAA,MAClC,CAAC,CAAG,EAAA,SAAS,CAAQ,MAAA,CAAA,GAAG,OAAO,KAAU,KAAA,OAAA;AAAA,MACzC,CAAC,CAAA,EAAG,SAAS,CAAA,MAAA,CAAQ,GAAG;AAAA,KACzB,CAAA;AAED,IAAM,MAAA,KAAA,GAAQC,wBAAe,MAAM,CAAA;AACnC,IAAO,OAAA;AAAA,MACL,SAAA;AAAA,MACA;AAAA,KACF;AAAA,KACC,CAAC,SAAA,EAAW,MAAQ,EAAA,QAAA,EAAU,QAAQ,CAAC;AAAA;;;;"}