@vuu-ui/vuu-table 0.9.2 → 0.10.0

package/esm/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":[],"mappings":";;;;;;;;;;;AAYA,MAAM,EAAE,KAAA,EAAO,WAAa,EAAA,OAAA,EAAY,GAAA,YAAA,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,eAAe,SAAU,EAAA,CAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,gBAAA;AAAA,IACR,GAAK,EAAA,YAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AACD,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,sBAAA;AAAA,IACR,GAAK,EAAA,iBAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAM,MAAA,EAAE,SAAY,GAAA,MAAA,CAAA;AACpB,EAAA,MAAM,KAAQ,GAAA,aAAA,CAAc,OAAS,EAAA,GAAA,EAAK,SAAS,CAAA,CAAA;AACnD,EAAM,MAAA,IAAA,GAAO,YAAa,CAAA,OAAA,EAAS,GAAG,CAAA,CAAA;AACtC,EAAA,MAAM,EAAE,SAAW,EAAA,KAAA,EAAU,GAAA,OAAA,CAAQ,QAAQ,SAAS,CAAA,CAAA;AAEtD,EAAA,MAAM,WAAc,GAAA,WAAA;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,uBAAA,IAAA;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,wBAAA,GAAA,CAAC,MAAK,EAAA,EAAA,SAAA,EAAW,CAAG,EAAA,SAAS,CAAW,OAAA,CAAA,EAAA,CAAA;AAAA,QACvC,UAAU,KAAS,IAAA,CAAA,GAAI,IACtB,mBAAA,GAAA,CAAC,oBAAiB,UAAwB,EAAA,CAAA;AAAA,QAE3C,IAAO,mBAAA,GAAA,CAAC,IAAK,EAAA,EAAA,IAAA,EAAM,MAAM,CAAK,GAAA,IAAA;AAAA,wBAC/B,GAAA,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":[],"mappings":";;;;;;;;;;;;AAaA,MAAM,EAAE,KAAA,EAAO,WAAa,EAAA,OAAA,EAAY,GAAA,YAAA;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,eAAe,SAAU,EAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,gBAAA;AAAA,IACR,GAAK,EAAA,YAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AACD,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,sBAAA;AAAA,IACR,GAAK,EAAA,iBAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EAAM,MAAA,EAAE,SAAY,GAAA,MAAA;AACpB,EAAA,MAAM,KAAQ,GAAA,aAAA,CAAc,OAAS,EAAA,GAAA,EAAK,SAAS,CAAA;AACnD,EAAA,MAAM,qBAAwB,GAAA,eAAA,CAAgB,KAAS,IAAA,EAAA,EAAI,aAAa,CAAA;AAExE,EAAM,MAAA,IAAA,GAAO,YAAa,CAAA,OAAA,EAAS,GAAG,CAAA;AACtC,EAAA,MAAM,EAAE,SAAW,EAAA,KAAA,EAAU,GAAA,OAAA,CAAQ,QAAQ,SAAS,CAAA;AAEtD,EAAA,MAAM,WAAc,GAAA,WAAA;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,uBAAA,IAAA;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,wBAAA,GAAA,CAAC,MAAK,EAAA,EAAA,SAAA,EAAW,CAAG,EAAA,SAAS,CAAW,OAAA,CAAA,EAAA,CAAA;AAAA,QACvC,UAAU,KAAS,IAAA,CAAA,GAAI,IACtB,mBAAA,GAAA,CAAC,oBAAiB,UAAwB,EAAA,CAAA;AAAA,QAE3C,IAAO,mBAAA,GAAA,CAAC,IAAK,EAAA,EAAA,IAAA,EAAM,MAAM,CAAK,GAAA,IAAA;AAAA,4BAC9B,MAAK,EAAA,EAAA,SAAA,EAAW,CAAG,EAAA,SAAS,UAAW,QAAsB,EAAA,qBAAA,EAAA;AAAA;AAAA;AAAA,GAChE;AAEJ;;;;"}

package/esm/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":[],"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,OAAO,qBAAsB,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":[],"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,OAAO,qBAAsB,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/esm/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":"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"}
+{"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/esm/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":[],"mappings":";;;AAGA,MAAM,gBAAgB,aAA4B,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,uBAAA,GAAA,CAAC,cAAc,QAAd,EAAA,EAAuB,OAAO,EAAE,OAAA,EAAS,cAAe,EAAA,EACtD,QACH,EAAA,CAAA,CAAA;AAEJ,EAAA;AAEa,MAAA,cAAA,GAAiB,MAAM,UAAA,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":[],"mappings":";;;AAGA,MAAM,gBAAgB,aAA4B,CAAA,EAAE,OAAS,EAAA,IAAI,CAAA;AAE1D,MAAM,iBAA6D,CAAC;AAAA,EACzE,QAAA;AAAA,EACA,OAAA;AAAA,EACA;AACF,CAAM,KAAA;AACJ,EACE,uBAAA,GAAA,CAAC,cAAc,QAAd,EAAA,EAAuB,OAAO,EAAE,OAAA,EAAS,cAAe,EAAA,EACtD,QACH,EAAA,CAAA;AAEJ;AAEa,MAAA,cAAA,GAAiB,MAAM,UAAA,CAAW,aAAa;;;;"}

package/esm/table-header/TableHeader.js

@@ -7,6 +7,7 @@ import { HeaderCell } from '../header-cell/HeaderCell.js';
 import { HeaderProvider } from './HeaderProvider.js';
 import { useTableHeader } from './useTableHeader.js';
 
+const isHeaderElement = (h) => isValidElement(h);
 const TableHeader = memo(
   ({
     allowDragColumnHeader,
@@ -47,15 +48,11 @@ const TableHeader = memo(
       if (customHeader === void 0) {
         return [null, 0];
       } else if (Array.isArray(customHeader)) {
-        if (customHeader.some(isValidElement)) {
-          const header = /* @__PURE__ */ jsx(HeaderProvider, { columns, virtualColSpan, children: customHeader.map(
-            (header2, i) => isValidElement(header2) ? enrichElementWithAria(header2, i) : createElement(header2, i)
-          ) });
-          return [header, customHeader.length];
-        } else {
-          return [customHeader.map(createElement), customHeader.length];
-        }
-      } else if (isValidElement(customHeader)) {
+        const header = /* @__PURE__ */ jsx(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__ */ jsx(HeaderProvider, { columns, virtualColSpan, children: enrichElementWithAria(customHeader, 0) });
         return [header, 1];
       } else {

package/esm/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":["offset","header"],"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":["offset","header"],"mappings":"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"}

package/esm/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":[],"mappings":"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"}
+{"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":[],"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;AACF,CAA4B,KAAA;AAC1B,EAAM,MAAA,YAAA,GAAe,OAA8B,IAAI,CAAA;AACvD,EAAM,MAAA,qBAAA,GAAwB,OAA8B,IAAI,CAAA;AAEhE,EAAA,MAAM,oBAAuB,GAAA,WAAA;AAAA,IAC3B,CAAC,MAAmB,KAAA;AAClB,MAAA,gBAAA,CAAiB,MAAQ,EAAA,iBAAA,GAAoB,QAAS,CAAA,MAAA,GAAS,CAAC,CAAA;AAAA,KAClE;AAAA,IACA,CAAC,iBAAmB,EAAA,QAAA,EAAU,gBAAgB;AAAA,GAChD;AAEA,EAAA,MAAM,EAAE,WAAA,EAAa,MAAO,EAAA,GAAI,iBAAkB,CAAA;AAAA,IAChD,gBAAkB,EAAA;AAAA,GACnB,CAAA;AAED,EAAM,MAAA,eAAA,GAAkB,WAAyC,CAAA,CAAC,EAAO,KAAA;AACvE,IAAA,YAAA,CAAa,OAAU,GAAA,EAAA;AACvB,IAAA,IAAI,EAAI,EAAA;AACN,MAAsB,qBAAA,CAAA,OAAA,GAAU,EAAG,CAAA,OAAA,CAAQ,4BAA4B,CAAA;AAAA,KAClE,MAAA;AACL,MAAA,qBAAA,CAAsB,OAAU,GAAA,IAAA;AAAA;AAClC,GACF,EAAG,EAAE,CAAA;AAEL,EAAA,MAAM,sBAAyB,GAAA,WAAA;AAAA,IAC7B,CAAC,EAAE,SAAA,EAAW,QAAU,EAAA,OAAA,EAAS,QAA0B,KAAA;AACzD,MAAM,MAAA,MAAA,GAAS,QAAQ,QAAQ,CAAA;AAM/B,MAAA,MAAM,cAAiB,GAAA,YAAA,CAAa,OAAS,EAAA,MAAA,EAAQ,MAAM,CAAA;AAE3D,MAAM,MAAA,QAAA,GACJ,CAAC,EAAE,IAAA,OACH,CAAC,GAAA,KACC,IAAI,IAAS,KAAA,IAAA;AAEjB,MAAA,MAAM,WAAc,GAAA,cAAA,CAAe,SAAU,CAAA,QAAA,CAAS,MAAM,CAAC,CAAA;AAC7D,MAAM,MAAA,UAAA,GAAa,cAAe,CAAA,WAAA,GAAc,CAAC,CAAA;AACjD,MAAM,MAAA,SAAA,GAAY,aACd,WAAY,CAAA,OAAA,CAAQ,UAAU,QAAS,CAAA,UAAU,CAAC,CAClD,GAAA,CAAA,CAAA;AAEJ,MAAI,IAAA,MAAA,GAAS,QAAY,IAAA,SAAA,KAAc,CAAI,CAAA,EAAA;AACzC,QAAA,YAAA,CAAa,aAAa,WAAY,CAAA,OAAA,EAAS,MAAQ,EAAA,SAAA,GAAY,CAAC,CAAC,CAAA;AAAA,OAChE,MAAA;AACL,QAAA,YAAA,CAAa,YAAa,CAAA,WAAA,CAAY,OAAS,EAAA,MAAA,EAAQ,SAAS,CAAC,CAAA;AAAA;AACnE,KACF;AAAA,IACA,CAAC,OAAA,EAAS,YAAc,EAAA,WAAA,CAAY,OAAO;AAAA,GAC7C;AAEA,EAAA,MAAM,uBAA0B,GAAA,WAAA;AAAA,IAC9B,CAAC,GAAgD,KAAA;AAC/C,MAAA,MAAM,UAAa,GAAA,YAAA,CAAa,GAAI,CAAA,MAAA,EAAQ,qBAAqB,CAAA;AACjE,MAAA,MAAM,MAAS,GAAA,QAAA,CAAS,UAAY,EAAA,OAAA,CAAQ,SAAS,IAAI,CAAA;AACzD,MAAM,MAAA,MAAA,GAAS,oBAAqB,CAAA,OAAA,EAAS,MAAM,CAAA;AACnD,MAAA,MAAM,aAAa,GAAI,CAAA,QAAA;AACvB,MAAU,MAAA,IAAA,YAAA,CAAa,QAAQ,UAAU,CAAA;AAAA,KAC3C;AAAA,IACA,CAAC,SAAS,YAAY;AAAA,GACxB;AAGA,EAAM,MAAA;AAAA,IACJ,WAAa,EAAA,yBAAA;AAAA,IACb,SAAW,EAAA,eAAA;AAAA,IACX,GAAG;AAAA,MACD,WAAY,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;AAAA,GACD,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,EAAiB,UAAW,CAAA,eAAA,EAAiB,MAAM;AAAA,GACrD;AACF;;;;"}

package/esm/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":[],"mappings":";;;;AAKO,MAAM,OAAU,GAAA,CACrB,MACA,EAAA,SAAA,EACA,QACA,EAAA,QAAA;AAAA;AAAA,EAGA,QAAQ,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,GAAQ,eAAe,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":[],"mappings":";;;;AAKO,MAAM,OAAU,GAAA,CACrB,MACA,EAAA,SAAA,EACA,QACA,EAAA,QAAA;AAAA;AAAA,EAGA,QAAQ,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,GAAQ,eAAe,MAAM,CAAA;AACnC,IAAO,OAAA;AAAA,MACL,SAAA;AAAA,MACA;AAAA,KACF;AAAA,KACC,CAAC,SAAA,EAAW,MAAQ,EAAA,QAAA,EAAU,QAAQ,CAAC;AAAA;;;;"}

package/esm/useCellEditing.js.map

@@ -1 +1 @@
-{"version":3,"file":"useCellEditing.js","sources":["../src/useCellEditing.ts"],"sourcesContent":["import { isCharacterKey } from \"@vuu-ui/vuu-utils\";\nimport {\n  FocusEventHandler,\n  KeyboardEvent as ReactKeyboardEvent,\n  MouseEvent,\n  useCallback,\n} from \"react\";\nimport { cellIsTextInput } from \"./table-dom-utils\";\n\nexport interface CellEditingHookProps {\n  navigate: () => void;\n}\n\nexport const useCellEditing = ({ navigate }: CellEditingHookProps) => {\n  const commitHandler = useCallback(() => {\n    navigate();\n  }, [navigate]);\n\n  const editInput = useCallback(\n    (evt: MouseEvent<HTMLElement> | ReactKeyboardEvent<HTMLElement>) => {\n      const cellEl = evt.target as HTMLDivElement;\n      const input = cellEl.matches(\"input\")\n        ? (cellEl as HTMLInputElement)\n        : cellEl.querySelector(\"input\");\n\n      if (input) {\n        input.focus();\n        input.select();\n      }\n    },\n    [],\n  );\n\n  const focusInput = useCallback(\n    (evt: MouseEvent<HTMLElement> | ReactKeyboardEvent<HTMLElement>) => {\n      const cellEl = evt.target as HTMLDivElement;\n      const input = cellEl.querySelector(\"input\");\n      if (input) {\n        input.focus();\n        input.select();\n      }\n    },\n    [],\n  );\n\n  const handleKeyDown = useCallback(\n    (e: ReactKeyboardEvent<HTMLElement>) => {\n      const el = e.target as HTMLElement;\n      if (cellIsTextInput(el)) {\n        if (isCharacterKey(e.key)) {\n          editInput(e);\n        } else if (e.key === \"Enter\") {\n          focusInput(e);\n        }\n      }\n    },\n    [editInput, focusInput],\n  );\n\n  const handleDoubleClick = useCallback(\n    (e: MouseEvent<HTMLElement>) => {\n      const el = e.target as HTMLElement;\n      if (el.matches(\"input\") || el.querySelector(\"input\")) {\n        editInput(e);\n        e.stopPropagation();\n      }\n    },\n    [editInput],\n  );\n\n  const handleBlur = useCallback<FocusEventHandler>(\n    (e) => {\n      const el = e.target as HTMLElement;\n      el.removeEventListener(\"vuu-commit\", commitHandler, true);\n    },\n    [commitHandler],\n  );\n\n  const handleFocus = useCallback<FocusEventHandler>(\n    (e) => {\n      const el = e.target as HTMLElement;\n      el.addEventListener(\"vuu-commit\", commitHandler, true);\n    },\n    [commitHandler],\n  );\n\n  return {\n    onBlur: handleBlur,\n    onDoubleClick: handleDoubleClick,\n    onFocus: handleFocus,\n    onKeyDown: handleKeyDown,\n  };\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"useCellEditing.js","sources":["../src/useCellEditing.ts"],"sourcesContent":["import { isCharacterKey } from \"@vuu-ui/vuu-utils\";\nimport {\n  FocusEventHandler,\n  KeyboardEvent as ReactKeyboardEvent,\n  MouseEvent,\n  useCallback,\n} from \"react\";\nimport { cellIsTextInput } from \"./table-dom-utils\";\n\nexport interface CellEditingHookProps {\n  navigate: () => void;\n}\n\nexport const useCellEditing = ({ navigate }: CellEditingHookProps) => {\n  const commitHandler = useCallback(() => {\n    navigate();\n  }, [navigate]);\n\n  const editInput = useCallback(\n    (evt: MouseEvent<HTMLElement> | ReactKeyboardEvent<HTMLElement>) => {\n      const cellEl = evt.target as HTMLDivElement;\n      const input = cellEl.matches(\"input\")\n        ? (cellEl as HTMLInputElement)\n        : cellEl.querySelector(\"input\");\n\n      if (input) {\n        input.focus();\n        input.select();\n      }\n    },\n    [],\n  );\n\n  const focusInput = useCallback(\n    (evt: MouseEvent<HTMLElement> | ReactKeyboardEvent<HTMLElement>) => {\n      const cellEl = evt.target as HTMLDivElement;\n      const input = cellEl.querySelector(\"input\");\n      if (input) {\n        input.focus();\n        input.select();\n      }\n    },\n    [],\n  );\n\n  const handleKeyDown = useCallback(\n    (e: ReactKeyboardEvent<HTMLElement>) => {\n      const el = e.target as HTMLElement;\n      if (cellIsTextInput(el)) {\n        if (isCharacterKey(e.key)) {\n          editInput(e);\n        } else if (e.key === \"Enter\") {\n          focusInput(e);\n        }\n      }\n    },\n    [editInput, focusInput],\n  );\n\n  const handleDoubleClick = useCallback(\n    (e: MouseEvent<HTMLElement>) => {\n      const el = e.target as HTMLElement;\n      if (el.matches(\"input\") || el.querySelector(\"input\")) {\n        editInput(e);\n        e.stopPropagation();\n      }\n    },\n    [editInput],\n  );\n\n  const handleBlur = useCallback<FocusEventHandler>(\n    (e) => {\n      const el = e.target as HTMLElement;\n      el.removeEventListener(\"vuu-commit\", commitHandler, true);\n    },\n    [commitHandler],\n  );\n\n  const handleFocus = useCallback<FocusEventHandler>(\n    (e) => {\n      const el = e.target as HTMLElement;\n      el.addEventListener(\"vuu-commit\", commitHandler, true);\n    },\n    [commitHandler],\n  );\n\n  return {\n    onBlur: handleBlur,\n    onDoubleClick: handleDoubleClick,\n    onFocus: handleFocus,\n    onKeyDown: handleKeyDown,\n  };\n};\n"],"names":[],"mappings":";;;;AAaO,MAAM,cAAiB,GAAA,CAAC,EAAE,QAAA,EAAqC,KAAA;AACpE,EAAM,MAAA,aAAA,GAAgB,YAAY,MAAM;AACtC,IAAS,QAAA,EAAA;AAAA,GACX,EAAG,CAAC,QAAQ,CAAC,CAAA;AAEb,EAAA,MAAM,SAAY,GAAA,WAAA;AAAA,IAChB,CAAC,GAAmE,KAAA;AAClE,MAAA,MAAM,SAAS,GAAI,CAAA,MAAA;AACnB,MAAM,MAAA,KAAA,GAAQ,OAAO,OAAQ,CAAA,OAAO,IAC/B,MACD,GAAA,MAAA,CAAO,cAAc,OAAO,CAAA;AAEhC,MAAA,IAAI,KAAO,EAAA;AACT,QAAA,KAAA,CAAM,KAAM,EAAA;AACZ,QAAA,KAAA,CAAM,MAAO,EAAA;AAAA;AACf,KACF;AAAA,IACA;AAAC,GACH;AAEA,EAAA,MAAM,UAAa,GAAA,WAAA;AAAA,IACjB,CAAC,GAAmE,KAAA;AAClE,MAAA,MAAM,SAAS,GAAI,CAAA,MAAA;AACnB,MAAM,MAAA,KAAA,GAAQ,MAAO,CAAA,aAAA,CAAc,OAAO,CAAA;AAC1C,MAAA,IAAI,KAAO,EAAA;AACT,QAAA,KAAA,CAAM,KAAM,EAAA;AACZ,QAAA,KAAA,CAAM,MAAO,EAAA;AAAA;AACf,KACF;AAAA,IACA;AAAC,GACH;AAEA,EAAA,MAAM,aAAgB,GAAA,WAAA;AAAA,IACpB,CAAC,CAAuC,KAAA;AACtC,MAAA,MAAM,KAAK,CAAE,CAAA,MAAA;AACb,MAAI,IAAA,eAAA,CAAgB,EAAE,CAAG,EAAA;AACvB,QAAI,IAAA,cAAA,CAAe,CAAE,CAAA,GAAG,CAAG,EAAA;AACzB,UAAA,SAAA,CAAU,CAAC,CAAA;AAAA,SACb,MAAA,IAAW,CAAE,CAAA,GAAA,KAAQ,OAAS,EAAA;AAC5B,UAAA,UAAA,CAAW,CAAC,CAAA;AAAA;AACd;AACF,KACF;AAAA,IACA,CAAC,WAAW,UAAU;AAAA,GACxB;AAEA,EAAA,MAAM,iBAAoB,GAAA,WAAA;AAAA,IACxB,CAAC,CAA+B,KAAA;AAC9B,MAAA,MAAM,KAAK,CAAE,CAAA,MAAA;AACb,MAAA,IAAI,GAAG,OAAQ,CAAA,OAAO,KAAK,EAAG,CAAA,aAAA,CAAc,OAAO,CAAG,EAAA;AACpD,QAAA,SAAA,CAAU,CAAC,CAAA;AACX,QAAA,CAAA,CAAE,eAAgB,EAAA;AAAA;AACpB,KACF;AAAA,IACA,CAAC,SAAS;AAAA,GACZ;AAEA,EAAA,MAAM,UAAa,GAAA,WAAA;AAAA,IACjB,CAAC,CAAM,KAAA;AACL,MAAA,MAAM,KAAK,CAAE,CAAA,MAAA;AACb,MAAG,EAAA,CAAA,mBAAA,CAAoB,YAAc,EAAA,aAAA,EAAe,IAAI,CAAA;AAAA,KAC1D;AAAA,IACA,CAAC,aAAa;AAAA,GAChB;AAEA,EAAA,MAAM,WAAc,GAAA,WAAA;AAAA,IAClB,CAAC,CAAM,KAAA;AACL,MAAA,MAAM,KAAK,CAAE,CAAA,MAAA;AACb,MAAG,EAAA,CAAA,gBAAA,CAAiB,YAAc,EAAA,aAAA,EAAe,IAAI,CAAA;AAAA,KACvD;AAAA,IACA,CAAC,aAAa;AAAA,GAChB;AAEA,EAAO,OAAA;AAAA,IACL,MAAQ,EAAA,UAAA;AAAA,IACR,aAAe,EAAA,iBAAA;AAAA,IACf,OAAS,EAAA,WAAA;AAAA,IACT,SAAW,EAAA;AAAA,GACb;AACF;;;;"}

package/esm/useCellFocus.js.map

@@ -1 +1 @@
-{"version":3,"file":"useCellFocus.js","sources":["../src/useCellFocus.ts"],"sourcesContent":["import {\n  KeyboardEventHandler,\n  MutableRefObject,\n  RefCallback,\n  RefObject,\n  useCallback,\n} from \"react\";\nimport {\n  dataCellQuery,\n  getTableCell,\n  headerCellQuery,\n} from \"./table-dom-utils\";\nimport { ScrollRequestHandler } from \"./useTableScroll\";\nimport { isArrowKey, queryClosest } from \"@vuu-ui/vuu-utils\";\nimport { CellPos } from \"@vuu-ui/vuu-table-types\";\nimport type { ICellFocusState } from \"./CellFocusState\";\n\nexport interface CellFocusHookProps {\n  cellFocusStateRef: MutableRefObject<ICellFocusState>;\n  containerRef: RefObject<HTMLElement>;\n  disableFocus?: boolean;\n  requestScroll?: ScrollRequestHandler;\n}\n\nconst getCellPosition = (el: HTMLElement) => {\n  const top = parseInt(el.parentElement?.style.top ?? \"-1\");\n  return { top };\n};\n\nexport type FocusCell = (cellPos: CellPos, fromKeyboard?: boolean) => void;\n\nexport const useCellFocus = ({\n  cellFocusStateRef,\n  containerRef,\n  disableFocus = false,\n  requestScroll,\n}: CellFocusHookProps) => {\n  const focusCellPlaceholderRef = useCallback<RefCallback<HTMLDivElement>>(\n    (el) => (cellFocusStateRef.current.placeholderEl = el),\n    [cellFocusStateRef],\n  );\n\n  const focusCell = useCallback<FocusCell>(\n    (cellPos, fromKeyboard = false) => {\n      if (containerRef.current) {\n        const { current: state } = cellFocusStateRef;\n\n        if (fromKeyboard && state.outsideViewport) {\n          state.cellPos = cellPos;\n        } else {\n          const activeCell = getTableCell(containerRef, cellPos);\n          if (activeCell) {\n            if (activeCell !== state.el) {\n              state.el?.removeAttribute(\"tabindex\");\n              activeCell.setAttribute(\"tabindex\", \"0\");\n\n              // TODO no need to measure if we're navigating horizontally\n              state.cellPos = cellPos;\n              state.el = activeCell;\n              state.pos = getCellPosition(activeCell);\n              state.outsideViewport = false;\n\n              if (state.placeholderEl) {\n                state.placeholderEl.style.top = `${state.pos.top}px`;\n              }\n            }\n            // TODO needs to be scroll cell to accommodate horizontal virtualization\n            requestScroll?.({ type: \"scroll-row\", rowIndex: cellPos[0] });\n            activeCell.focus({ preventScroll: true });\n          }\n        }\n      }\n    },\n    [cellFocusStateRef, containerRef, requestScroll],\n  );\n\n  const setTableBodyRef = useCallback<RefCallback<HTMLDivElement>>(\n    (el) => {\n      if (el) {\n        const { current: state } = cellFocusStateRef;\n        const table = queryClosest<HTMLDivElement>(el, \".vuuTable\");\n        if (table) {\n          if (state.el === null && !disableFocus) {\n            const headerCell = table.querySelector<HTMLDivElement>(\n              headerCellQuery(1),\n            );\n            if (headerCell) {\n              headerCell.setAttribute(\"tabindex\", \"0\");\n              state.cellPos = [1, 1];\n              state.el = headerCell;\n              state.pos = { top: -20 };\n              if (state.placeholderEl) {\n                state.placeholderEl.style.top = `-20px`;\n              }\n            } else {\n              const cell = table.querySelector<HTMLDivElement>(\n                dataCellQuery(0, 0),\n              );\n              if (cell) {\n                cell.setAttribute(\"tabindex\", \"0\");\n                state.cellPos = [1, 1];\n                state.el = cell;\n                state.pos = { top: 0 };\n                if (state.placeholderEl) {\n                  state.placeholderEl.style.top = `0px`;\n                }\n              }\n            }\n          }\n        }\n      }\n    },\n    [cellFocusStateRef, disableFocus],\n  );\n\n  const focusCellPlaceholderKeyDown = useCallback<KeyboardEventHandler>(\n    (evt) => {\n      const { outsideViewport, pos } = cellFocusStateRef.current;\n      if (pos && isArrowKey(evt.key)) {\n        // TODO depends on whether we're scrolling up or down\n        if (outsideViewport === \"above\") {\n          requestScroll?.({ type: \"scroll-top\", scrollPos: pos.top });\n        } else if (outsideViewport === \"below\") {\n          requestScroll?.({ type: \"scroll-bottom\", scrollPos: pos.top });\n        } else {\n          throw Error(\n            `cellFocusPlaceholder should not have focus if inside viewport`,\n          );\n        }\n      }\n    },\n    [cellFocusStateRef, requestScroll],\n  );\n\n  return {\n    focusCell,\n    focusCellPlaceholderKeyDown,\n    focusCellPlaceholderRef,\n    setTableBodyRef,\n  };\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"useCellFocus.js","sources":["../src/useCellFocus.ts"],"sourcesContent":["import {\n  KeyboardEventHandler,\n  MutableRefObject,\n  RefCallback,\n  RefObject,\n  useCallback,\n} from \"react\";\nimport {\n  dataCellQuery,\n  getTableCell,\n  headerCellQuery,\n} from \"./table-dom-utils\";\nimport { ScrollRequestHandler } from \"./useTableScroll\";\nimport { isArrowKey, queryClosest } from \"@vuu-ui/vuu-utils\";\nimport { CellPos } from \"@vuu-ui/vuu-table-types\";\nimport type { ICellFocusState } from \"./CellFocusState\";\n\nexport interface CellFocusHookProps {\n  cellFocusStateRef: MutableRefObject<ICellFocusState>;\n  containerRef: RefObject<HTMLElement>;\n  disableFocus?: boolean;\n  requestScroll?: ScrollRequestHandler;\n}\n\nconst getCellPosition = (el: HTMLElement) => {\n  const top = parseInt(el.parentElement?.style.top ?? \"-1\");\n  return { top };\n};\n\nexport type FocusCell = (cellPos: CellPos, fromKeyboard?: boolean) => void;\n\nexport const useCellFocus = ({\n  cellFocusStateRef,\n  containerRef,\n  disableFocus = false,\n  requestScroll,\n}: CellFocusHookProps) => {\n  const focusCellPlaceholderRef = useCallback<RefCallback<HTMLDivElement>>(\n    (el) => (cellFocusStateRef.current.placeholderEl = el),\n    [cellFocusStateRef],\n  );\n\n  const focusCell = useCallback<FocusCell>(\n    (cellPos, fromKeyboard = false) => {\n      if (containerRef.current) {\n        const { current: state } = cellFocusStateRef;\n\n        if (fromKeyboard && state.outsideViewport) {\n          state.cellPos = cellPos;\n        } else {\n          const activeCell = getTableCell(containerRef, cellPos);\n          if (activeCell) {\n            if (activeCell !== state.el) {\n              state.el?.removeAttribute(\"tabindex\");\n              activeCell.setAttribute(\"tabindex\", \"0\");\n\n              // TODO no need to measure if we're navigating horizontally\n              state.cellPos = cellPos;\n              state.el = activeCell;\n              state.pos = getCellPosition(activeCell);\n              state.outsideViewport = false;\n\n              if (state.placeholderEl) {\n                state.placeholderEl.style.top = `${state.pos.top}px`;\n              }\n            }\n            // TODO needs to be scroll cell to accommodate horizontal virtualization\n            requestScroll?.({ type: \"scroll-row\", rowIndex: cellPos[0] });\n            activeCell.focus({ preventScroll: true });\n          }\n        }\n      }\n    },\n    [cellFocusStateRef, containerRef, requestScroll],\n  );\n\n  const setTableBodyRef = useCallback<RefCallback<HTMLDivElement>>(\n    (el) => {\n      if (el) {\n        const { current: state } = cellFocusStateRef;\n        const table = queryClosest<HTMLDivElement>(el, \".vuuTable\");\n        if (table) {\n          if (state.el === null && !disableFocus) {\n            const headerCell = table.querySelector<HTMLDivElement>(\n              headerCellQuery(1),\n            );\n            if (headerCell) {\n              headerCell.setAttribute(\"tabindex\", \"0\");\n              state.cellPos = [1, 1];\n              state.el = headerCell;\n              state.pos = { top: -20 };\n              if (state.placeholderEl) {\n                state.placeholderEl.style.top = `-20px`;\n              }\n            } else {\n              const cell = table.querySelector<HTMLDivElement>(\n                dataCellQuery(0, 0),\n              );\n              if (cell) {\n                cell.setAttribute(\"tabindex\", \"0\");\n                state.cellPos = [1, 1];\n                state.el = cell;\n                state.pos = { top: 0 };\n                if (state.placeholderEl) {\n                  state.placeholderEl.style.top = `0px`;\n                }\n              }\n            }\n          }\n        }\n      }\n    },\n    [cellFocusStateRef, disableFocus],\n  );\n\n  const focusCellPlaceholderKeyDown = useCallback<KeyboardEventHandler>(\n    (evt) => {\n      const { outsideViewport, pos } = cellFocusStateRef.current;\n      if (pos && isArrowKey(evt.key)) {\n        // TODO depends on whether we're scrolling up or down\n        if (outsideViewport === \"above\") {\n          requestScroll?.({ type: \"scroll-top\", scrollPos: pos.top });\n        } else if (outsideViewport === \"below\") {\n          requestScroll?.({ type: \"scroll-bottom\", scrollPos: pos.top });\n        } else {\n          throw Error(\n            `cellFocusPlaceholder should not have focus if inside viewport`,\n          );\n        }\n      }\n    },\n    [cellFocusStateRef, requestScroll],\n  );\n\n  return {\n    focusCell,\n    focusCellPlaceholderKeyDown,\n    focusCellPlaceholderRef,\n    setTableBodyRef,\n  };\n};\n"],"names":[],"mappings":";;;;AAwBA,MAAM,eAAA,GAAkB,CAAC,EAAoB,KAAA;AAC3C,EAAA,MAAM,MAAM,QAAS,CAAA,EAAA,CAAG,aAAe,EAAA,KAAA,CAAM,OAAO,IAAI,CAAA;AACxD,EAAA,OAAO,EAAE,GAAI,EAAA;AACf,CAAA;AAIO,MAAM,eAAe,CAAC;AAAA,EAC3B,iBAAA;AAAA,EACA,YAAA;AAAA,EACA,YAAe,GAAA,KAAA;AAAA,EACf;AACF,CAA0B,KAAA;AACxB,EAAA,MAAM,uBAA0B,GAAA,WAAA;AAAA,IAC9B,CAAC,EAAA,KAAQ,iBAAkB,CAAA,OAAA,CAAQ,aAAgB,GAAA,EAAA;AAAA,IACnD,CAAC,iBAAiB;AAAA,GACpB;AAEA,EAAA,MAAM,SAAY,GAAA,WAAA;AAAA,IAChB,CAAC,OAAS,EAAA,YAAA,GAAe,KAAU,KAAA;AACjC,MAAA,IAAI,aAAa,OAAS,EAAA;AACxB,QAAM,MAAA,EAAE,OAAS,EAAA,KAAA,EAAU,GAAA,iBAAA;AAE3B,QAAI,IAAA,YAAA,IAAgB,MAAM,eAAiB,EAAA;AACzC,UAAA,KAAA,CAAM,OAAU,GAAA,OAAA;AAAA,SACX,MAAA;AACL,UAAM,MAAA,UAAA,GAAa,YAAa,CAAA,YAAA,EAAc,OAAO,CAAA;AACrD,UAAA,IAAI,UAAY,EAAA;AACd,YAAI,IAAA,UAAA,KAAe,MAAM,EAAI,EAAA;AAC3B,cAAM,KAAA,CAAA,EAAA,EAAI,gBAAgB,UAAU,CAAA;AACpC,cAAW,UAAA,CAAA,YAAA,CAAa,YAAY,GAAG,CAAA;AAGvC,cAAA,KAAA,CAAM,OAAU,GAAA,OAAA;AAChB,cAAA,KAAA,CAAM,EAAK,GAAA,UAAA;AACX,cAAM,KAAA,CAAA,GAAA,GAAM,gBAAgB,UAAU,CAAA;AACtC,cAAA,KAAA,CAAM,eAAkB,GAAA,KAAA;AAExB,cAAA,IAAI,MAAM,aAAe,EAAA;AACvB,gBAAA,KAAA,CAAM,cAAc,KAAM,CAAA,GAAA,GAAM,CAAG,EAAA,KAAA,CAAM,IAAI,GAAG,CAAA,EAAA,CAAA;AAAA;AAClD;AAGF,YAAA,aAAA,GAAgB,EAAE,IAAM,EAAA,YAAA,EAAc,UAAU,OAAQ,CAAA,CAAC,GAAG,CAAA;AAC5D,YAAA,UAAA,CAAW,KAAM,CAAA,EAAE,aAAe,EAAA,IAAA,EAAM,CAAA;AAAA;AAC1C;AACF;AACF,KACF;AAAA,IACA,CAAC,iBAAmB,EAAA,YAAA,EAAc,aAAa;AAAA,GACjD;AAEA,EAAA,MAAM,eAAkB,GAAA,WAAA;AAAA,IACtB,CAAC,EAAO,KAAA;AACN,MAAA,IAAI,EAAI,EAAA;AACN,QAAM,MAAA,EAAE,OAAS,EAAA,KAAA,EAAU,GAAA,iBAAA;AAC3B,QAAM,MAAA,KAAA,GAAQ,YAA6B,CAAA,EAAA,EAAI,WAAW,CAAA;AAC1D,QAAA,IAAI,KAAO,EAAA;AACT,UAAA,IAAI,KAAM,CAAA,EAAA,KAAO,IAAQ,IAAA,CAAC,YAAc,EAAA;AACtC,YAAA,MAAM,aAAa,KAAM,CAAA,aAAA;AAAA,cACvB,gBAAgB,CAAC;AAAA,aACnB;AACA,YAAA,IAAI,UAAY,EAAA;AACd,cAAW,UAAA,CAAA,YAAA,CAAa,YAAY,GAAG,CAAA;AACvC,cAAM,KAAA,CAAA,OAAA,GAAU,CAAC,CAAA,EAAG,CAAC,CAAA;AACrB,cAAA,KAAA,CAAM,EAAK,GAAA,UAAA;AACX,cAAM,KAAA,CAAA,GAAA,GAAM,EAAE,GAAA,EAAK,CAAI,EAAA,EAAA;AACvB,cAAA,IAAI,MAAM,aAAe,EAAA;AACvB,gBAAM,KAAA,CAAA,aAAA,CAAc,MAAM,GAAM,GAAA,CAAA,KAAA,CAAA;AAAA;AAClC,aACK,MAAA;AACL,cAAA,MAAM,OAAO,KAAM,CAAA,aAAA;AAAA,gBACjB,aAAA,CAAc,GAAG,CAAC;AAAA,eACpB;AACA,cAAA,IAAI,IAAM,EAAA;AACR,gBAAK,IAAA,CAAA,YAAA,CAAa,YAAY,GAAG,CAAA;AACjC,gBAAM,KAAA,CAAA,OAAA,GAAU,CAAC,CAAA,EAAG,CAAC,CAAA;AACrB,gBAAA,KAAA,CAAM,EAAK,GAAA,IAAA;AACX,gBAAM,KAAA,CAAA,GAAA,GAAM,EAAE,GAAA,EAAK,CAAE,EAAA;AACrB,gBAAA,IAAI,MAAM,aAAe,EAAA;AACvB,kBAAM,KAAA,CAAA,aAAA,CAAc,MAAM,GAAM,GAAA,CAAA,GAAA,CAAA;AAAA;AAClC;AACF;AACF;AACF;AACF;AACF,KACF;AAAA,IACA,CAAC,mBAAmB,YAAY;AAAA,GAClC;AAEA,EAAA,MAAM,2BAA8B,GAAA,WAAA;AAAA,IAClC,CAAC,GAAQ,KAAA;AACP,MAAA,MAAM,EAAE,eAAA,EAAiB,GAAI,EAAA,GAAI,iBAAkB,CAAA,OAAA;AACnD,MAAA,IAAI,GAAO,IAAA,UAAA,CAAW,GAAI,CAAA,GAAG,CAAG,EAAA;AAE9B,QAAA,IAAI,oBAAoB,OAAS,EAAA;AAC/B,UAAA,aAAA,GAAgB,EAAE,IAAM,EAAA,YAAA,EAAc,SAAW,EAAA,GAAA,CAAI,KAAK,CAAA;AAAA,SAC5D,MAAA,IAAW,oBAAoB,OAAS,EAAA;AACtC,UAAA,aAAA,GAAgB,EAAE,IAAM,EAAA,eAAA,EAAiB,SAAW,EAAA,GAAA,CAAI,KAAK,CAAA;AAAA,SACxD,MAAA;AACL,UAAM,MAAA,KAAA;AAAA,YACJ,CAAA,6DAAA;AAAA,WACF;AAAA;AACF;AACF,KACF;AAAA,IACA,CAAC,mBAAmB,aAAa;AAAA,GACnC;AAEA,EAAO,OAAA;AAAA,IACL,SAAA;AAAA,IACA,2BAAA;AAAA,IACA,uBAAA;AAAA,IACA;AAAA,GACF;AACF;;;;"}

package/esm/useControlledTableNavigation.js.map

@@ -1 +1 @@
-{"version":3,"file":"useControlledTableNavigation.js","sources":["../src/useControlledTableNavigation.ts"],"sourcesContent":["import { dispatchMouseEvent, useStateRef } from \"@vuu-ui/vuu-utils\";\nimport { KeyboardEventHandler, useCallback, useRef } from \"react\";\n\nexport const isRowSelectionKey = (key: string) =>\n  key === \"Enter\" || key === \" \";\n\nexport const useControlledTableNavigation = (\n  initialValue: number,\n  rowCount: number,\n) => {\n  const tableRef = useRef<HTMLDivElement>(null);\n\n  const [highlightedIndexRef, setHighlightedIndex] = useStateRef<\n    number | undefined\n  >(initialValue);\n\n  const handleKeyDown = useCallback<KeyboardEventHandler>(\n    (e) => {\n      if (e.key === \"ArrowDown\") {\n        setHighlightedIndex((index = -1) => Math.min(rowCount - 1, index + 1));\n      } else if (e.key === \"ArrowUp\") {\n        setHighlightedIndex((index = -1) => Math.max(0, index - 1));\n      } else if (isRowSelectionKey(e.key)) {\n        const { current: rowIdx } = highlightedIndexRef;\n        // induce an onSelect event by 'clicking' the row\n        if (typeof rowIdx === \"number\") {\n          const rowEl = tableRef.current?.querySelector(\n            `[aria-rowindex=\"${rowIdx + 1}\"]`,\n          ) as HTMLElement;\n          if (rowEl) {\n            dispatchMouseEvent(rowEl, \"click\");\n          }\n        }\n      }\n    },\n    [highlightedIndexRef, rowCount, setHighlightedIndex],\n  );\n\n  const handleHighlight = useCallback(\n    (idx: number) => {\n      setHighlightedIndex(idx);\n    },\n    [setHighlightedIndex],\n  );\n\n  return {\n    highlightedIndexRef,\n    onHighlight: handleHighlight,\n    onKeyDown: handleKeyDown,\n    tableRef,\n  };\n};\n"],"names":[],"mappings":";;;AAGO,MAAM,iBAAoB,GAAA,CAAC,GAChC,KAAA,GAAA,KAAQ,WAAW,GAAQ,KAAA,IAAA;AAEhB,MAAA,4BAAA,GAA+B,CAC1C,YAAA,EACA,QACG,KAAA;AACH,EAAM,MAAA,QAAA,GAAW,OAAuB,IAAI,CAAA,CAAA;AAE5C,EAAA,MAAM,CAAC,mBAAA,EAAqB,mBAAmB,CAAA,GAAI,YAEjD,YAAY,CAAA,CAAA;AAEd,EAAA,MAAM,aAAgB,GAAA,WAAA;AAAA,IACpB,CAAC,CAAM,KAAA;AACL,MAAI,IAAA,CAAA,CAAE,QAAQ,WAAa,EAAA;AACzB,QAAoB,mBAAA,CAAA,CAAC,QAAQ,CAAO,CAAA,KAAA,IAAA,CAAK,IAAI,QAAW,GAAA,CAAA,EAAG,KAAQ,GAAA,CAAC,CAAC,CAAA,CAAA;AAAA,OACvE,MAAA,IAAW,CAAE,CAAA,GAAA,KAAQ,SAAW,EAAA;AAC9B,QAAoB,mBAAA,CAAA,CAAC,QAAQ,CAAO,CAAA,KAAA,IAAA,CAAK,IAAI,CAAG,EAAA,KAAA,GAAQ,CAAC,CAAC,CAAA,CAAA;AAAA,OACjD,MAAA,IAAA,iBAAA,CAAkB,CAAE,CAAA,GAAG,CAAG,EAAA;AACnC,QAAM,MAAA,EAAE,OAAS,EAAA,MAAA,EAAW,GAAA,mBAAA,CAAA;AAE5B,QAAI,IAAA,OAAO,WAAW,QAAU,EAAA;AAC9B,UAAM,MAAA,KAAA,GAAQ,SAAS,OAAS,EAAA,aAAA;AAAA,YAC9B,CAAA,gBAAA,EAAmB,SAAS,CAAC,CAAA,EAAA,CAAA;AAAA,WAC/B,CAAA;AACA,UAAA,IAAI,KAAO,EAAA;AACT,YAAA,kBAAA,CAAmB,OAAO,OAAO,CAAA,CAAA;AAAA,WACnC;AAAA,SACF;AAAA,OACF;AAAA,KACF;AAAA,IACA,CAAC,mBAAqB,EAAA,QAAA,EAAU,mBAAmB,CAAA;AAAA,GACrD,CAAA;AAEA,EAAA,MAAM,eAAkB,GAAA,WAAA;AAAA,IACtB,CAAC,GAAgB,KAAA;AACf,MAAA,mBAAA,CAAoB,GAAG,CAAA,CAAA;AAAA,KACzB;AAAA,IACA,CAAC,mBAAmB,CAAA;AAAA,GACtB,CAAA;AAEA,EAAO,OAAA;AAAA,IACL,mBAAA;AAAA,IACA,WAAa,EAAA,eAAA;AAAA,IACb,SAAW,EAAA,aAAA;AAAA,IACX,QAAA;AAAA,GACF,CAAA;AACF;;;;"}
+{"version":3,"file":"useControlledTableNavigation.js","sources":["../src/useControlledTableNavigation.ts"],"sourcesContent":["import { dispatchMouseEvent, useStateRef } from \"@vuu-ui/vuu-utils\";\nimport { KeyboardEventHandler, useCallback, useRef } from \"react\";\n\nexport const isRowSelectionKey = (key: string) =>\n  key === \"Enter\" || key === \" \";\n\nexport const useControlledTableNavigation = (\n  initialValue: number,\n  rowCount: number,\n) => {\n  const tableRef = useRef<HTMLDivElement>(null);\n\n  const [highlightedIndexRef, setHighlightedIndex] = useStateRef<\n    number | undefined\n  >(initialValue);\n\n  const handleKeyDown = useCallback<KeyboardEventHandler>(\n    (e) => {\n      if (e.key === \"ArrowDown\") {\n        setHighlightedIndex((index = -1) => Math.min(rowCount - 1, index + 1));\n      } else if (e.key === \"ArrowUp\") {\n        setHighlightedIndex((index = -1) => Math.max(0, index - 1));\n      } else if (isRowSelectionKey(e.key)) {\n        const { current: rowIdx } = highlightedIndexRef;\n        // induce an onSelect event by 'clicking' the row\n        if (typeof rowIdx === \"number\") {\n          const rowEl = tableRef.current?.querySelector(\n            `[aria-rowindex=\"${rowIdx + 1}\"]`,\n          ) as HTMLElement;\n          if (rowEl) {\n            dispatchMouseEvent(rowEl, \"click\");\n          }\n        }\n      }\n    },\n    [highlightedIndexRef, rowCount, setHighlightedIndex],\n  );\n\n  const handleHighlight = useCallback(\n    (idx: number) => {\n      setHighlightedIndex(idx);\n    },\n    [setHighlightedIndex],\n  );\n\n  return {\n    highlightedIndexRef,\n    onHighlight: handleHighlight,\n    onKeyDown: handleKeyDown,\n    tableRef,\n  };\n};\n"],"names":[],"mappings":";;;AAGO,MAAM,iBAAoB,GAAA,CAAC,GAChC,KAAA,GAAA,KAAQ,WAAW,GAAQ,KAAA;AAEhB,MAAA,4BAAA,GAA+B,CAC1C,YAAA,EACA,QACG,KAAA;AACH,EAAM,MAAA,QAAA,GAAW,OAAuB,IAAI,CAAA;AAE5C,EAAA,MAAM,CAAC,mBAAA,EAAqB,mBAAmB,CAAA,GAAI,YAEjD,YAAY,CAAA;AAEd,EAAA,MAAM,aAAgB,GAAA,WAAA;AAAA,IACpB,CAAC,CAAM,KAAA;AACL,MAAI,IAAA,CAAA,CAAE,QAAQ,WAAa,EAAA;AACzB,QAAoB,mBAAA,CAAA,CAAC,QAAQ,CAAO,CAAA,KAAA,IAAA,CAAK,IAAI,QAAW,GAAA,CAAA,EAAG,KAAQ,GAAA,CAAC,CAAC,CAAA;AAAA,OACvE,MAAA,IAAW,CAAE,CAAA,GAAA,KAAQ,SAAW,EAAA;AAC9B,QAAoB,mBAAA,CAAA,CAAC,QAAQ,CAAO,CAAA,KAAA,IAAA,CAAK,IAAI,CAAG,EAAA,KAAA,GAAQ,CAAC,CAAC,CAAA;AAAA,OACjD,MAAA,IAAA,iBAAA,CAAkB,CAAE,CAAA,GAAG,CAAG,EAAA;AACnC,QAAM,MAAA,EAAE,OAAS,EAAA,MAAA,EAAW,GAAA,mBAAA;AAE5B,QAAI,IAAA,OAAO,WAAW,QAAU,EAAA;AAC9B,UAAM,MAAA,KAAA,GAAQ,SAAS,OAAS,EAAA,aAAA;AAAA,YAC9B,CAAA,gBAAA,EAAmB,SAAS,CAAC,CAAA,EAAA;AAAA,WAC/B;AACA,UAAA,IAAI,KAAO,EAAA;AACT,YAAA,kBAAA,CAAmB,OAAO,OAAO,CAAA;AAAA;AACnC;AACF;AACF,KACF;AAAA,IACA,CAAC,mBAAqB,EAAA,QAAA,EAAU,mBAAmB;AAAA,GACrD;AAEA,EAAA,MAAM,eAAkB,GAAA,WAAA;AAAA,IACtB,CAAC,GAAgB,KAAA;AACf,MAAA,mBAAA,CAAoB,GAAG,CAAA;AAAA,KACzB;AAAA,IACA,CAAC,mBAAmB;AAAA,GACtB;AAEA,EAAO,OAAA;AAAA,IACL,mBAAA;AAAA,IACA,WAAa,EAAA,eAAA;AAAA,IACb,SAAW,EAAA,aAAA;AAAA,IACX;AAAA,GACF;AACF;;;;"}

package/esm/useDataSource.js

@@ -4,9 +4,12 @@ import { MovingWindow } from './moving-window.js';
 
 const useDataSource = ({
   dataSource,
+  defaultSelectedIndexValues,
+  defaultSelectedKeyValues,
   onSizeChange,
   onSubscribed,
-  renderBufferSize = 0
+  renderBufferSize = 0,
+  revealSelected
 }) => {
   const [, forceUpdate] = useState(null);
   const data = useRef([]);
@@ -20,6 +23,7 @@ const useDataSource = ({
   );
   useMemo(() => {
     dataSource.on("resumed", () => {
+      console.log("resumed");
       const { range } = dataSource;
       if (range.to !== 0) {
         dataWindow.setRange(dataSource.range);
@@ -48,6 +52,9 @@ const useDataSource = ({
           const size = dataWindow.data.length;
           dataWindow.setRowCount(message.size);
           if (dataWindow.data.length < size) {
+            if (isMounted.current === false) {
+              console.log("setting state whilst unmounted");
+            }
             forceUpdate({});
           }
         }
@@ -68,6 +75,9 @@ const useDataSource = ({
         onSizeChange?.(0);
         dataWindow.setRowCount(0);
         setData([]);
+        if (isMounted.current === false) {
+          console.log("setting state whilst unmounted");
+        }
         forceUpdate({});
       } else {
         console.log(`useDataSource unexpected message ${message.type}`);
@@ -99,14 +109,30 @@ const useDataSource = ({
         const fullRange = getFullRange(range, renderBufferSize);
         dataWindow.setRange(fullRange);
         if (dataSource.status !== "subscribed") {
-          dataSource?.subscribe({ range: fullRange }, datasourceMessageHandler);
+          dataSource?.subscribe(
+            {
+              range: fullRange,
+              revealSelected,
+              selectedIndexValues: defaultSelectedIndexValues,
+              selectedKeyValues: defaultSelectedKeyValues
+            },
+            datasourceMessageHandler
+          );
         } else {
           dataSource.range = rangeRef.current = fullRange;
         }
         dataSource.emit("range", range);
       }
     },
-    [dataSource, dataWindow, datasourceMessageHandler, renderBufferSize]
+    [
+      dataSource,
+      dataWindow,
+      datasourceMessageHandler,
+      defaultSelectedIndexValues,
+      defaultSelectedKeyValues,
+      renderBufferSize,
+      revealSelected
+    ]
   );
   return {
     data: data.current,

package/esm/useDataSource.js.map

@@ -1 +1 @@
-{"version":3,"file":"useDataSource.js","sources":["../src/useDataSource.ts"],"sourcesContent":["import {\n  DataSource,\n  DataSourceRow,\n  DataSourceSubscribedMessage,\n  SubscribeCallback,\n} from \"@vuu-ui/vuu-data-types\";\nimport { VuuRange } from \"@vuu-ui/vuu-protocol-types\";\nimport { getFullRange, NULL_RANGE, rangesAreSame } from \"@vuu-ui/vuu-utils\";\nimport { useCallback, useEffect, useMemo, useRef, useState } from \"react\";\nimport { MovingWindow } from \"./moving-window\";\n\nexport interface DataSourceHookProps {\n  dataSource: DataSource;\n  onSizeChange: (size: number) => void;\n  onSubscribed: (subscription: DataSourceSubscribedMessage) => void;\n  renderBufferSize?: number;\n}\n\nexport const useDataSource = ({\n  dataSource,\n  onSizeChange,\n  onSubscribed,\n  renderBufferSize = 0,\n}: DataSourceHookProps) => {\n  const [, forceUpdate] = useState<unknown>(null);\n  const data = useRef<DataSourceRow[]>([]);\n  const isMounted = useRef(true);\n  const hasUpdated = useRef(false);\n  const rangeRef = useRef<VuuRange>(NULL_RANGE);\n\n  const dataWindow = useMemo(\n    () => new MovingWindow(getFullRange(NULL_RANGE, renderBufferSize)),\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [],\n  );\n\n  useMemo(() => {\n    dataSource.on(\"resumed\", () => {\n      // When we resume a dataSource (after switching tabs etc)\n      // client will receive rows. We may not have received any\n      // setRange calls at this point so dataWindow range will\n      //not yet be set. If the dataWindow range is already set,\n      // this is a no-op.\n      const { range } = dataSource;\n      if (range.to !== 0) {\n        dataWindow.setRange(dataSource.range);\n      }\n    });\n  }, [dataSource, dataWindow]);\n\n  const setData = useCallback(\n    (updates: DataSourceRow[]) => {\n      for (const row of updates) {\n        dataWindow.add(row);\n      }\n      data.current = dataWindow.data;\n      if (isMounted.current) {\n        // TODO do we ever need to worry about missing updates here ?\n        forceUpdate({});\n      }\n    },\n    [dataWindow],\n  );\n\n  const datasourceMessageHandler: SubscribeCallback = useCallback(\n    (message) => {\n      if (message.type === \"subscribed\") {\n        onSubscribed?.(message);\n      } else if (message.type === \"viewport-update\") {\n        if (typeof message.size === \"number\") {\n          onSizeChange?.(message.size);\n          const size = dataWindow.data.length;\n          dataWindow.setRowCount(message.size);\n          if (dataWindow.data.length < size) {\n            forceUpdate({});\n          }\n        }\n        if (message.rows) {\n          if (message.range) {\n            if (message.range.to !== dataWindow.range.to) {\n              dataWindow.setRange(message.range);\n            }\n          }\n          setData(message.rows);\n        } else if (message.size === 0) {\n          setData([]);\n        } else if (typeof message.size === \"number\") {\n          data.current = dataWindow.data;\n          hasUpdated.current = true;\n        }\n      } else if (message.type === \"viewport-clear\") {\n        onSizeChange?.(0);\n        dataWindow.setRowCount(0);\n        setData([]);\n        forceUpdate({});\n      } else {\n        console.log(`useDataSource unexpected message ${message.type}`);\n      }\n    },\n    [dataWindow, onSizeChange, onSubscribed, setData],\n  );\n\n  const getSelectedRows = useCallback(() => {\n    return dataWindow.getSelectedRows();\n  }, [dataWindow]);\n\n  useEffect(() => {\n    isMounted.current = true;\n    if (dataSource.status !== \"initialising\") {\n      dataSource.resume?.(datasourceMessageHandler);\n    }\n    return () => {\n      isMounted.current = false;\n      dataSource.suspend?.();\n    };\n  }, [dataSource, datasourceMessageHandler]);\n\n  useEffect(() => {\n    if (dataSource.status === \"disabled\") {\n      dataSource.enable?.(datasourceMessageHandler);\n    }\n  }, [dataSource, datasourceMessageHandler, renderBufferSize]);\n\n  const setRange = useCallback(\n    (range: VuuRange) => {\n      if (!rangesAreSame(range, rangeRef.current)) {\n        const fullRange = getFullRange(range, renderBufferSize);\n        dataWindow.setRange(fullRange);\n\n        if (dataSource.status !== \"subscribed\") {\n          dataSource?.subscribe({ range: fullRange }, datasourceMessageHandler);\n        } else {\n          dataSource.range = rangeRef.current = fullRange;\n        }\n        // emit a range event omitting the renderBufferSize\n        // This isn't great, we're using the dataSource as a conduit to emit a\n        // message that has nothing to do with the dataSource itself. Client\n        // is the DataSourceState component.\n        // WHY CANT THIS BE DONE WITHIN DataSource ?\n        dataSource.emit(\"range\", range);\n      }\n    },\n    [dataSource, dataWindow, datasourceMessageHandler, renderBufferSize],\n  );\n\n  return {\n    data: data.current,\n    dataRef: data,\n    getSelectedRows,\n    range: rangeRef.current,\n    setRange,\n  };\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"useDataSource.js","sources":["../src/useDataSource.ts"],"sourcesContent":["import {\n  DataSourceRow,\n  DataSourceSubscribedMessage,\n  SubscribeCallback,\n} from \"@vuu-ui/vuu-data-types\";\nimport { VuuRange } from \"@vuu-ui/vuu-protocol-types\";\nimport { getFullRange, NULL_RANGE, rangesAreSame } from \"@vuu-ui/vuu-utils\";\nimport { useCallback, useEffect, useMemo, useRef, useState } from \"react\";\nimport { MovingWindow } from \"./moving-window\";\nimport { TableProps } from \"./Table\";\n\nexport interface DataSourceHookProps\n  extends Pick<\n    TableProps,\n    | \"dataSource\"\n    | \"defaultSelectedIndexValues\"\n    | \"defaultSelectedKeyValues\"\n    | \"renderBufferSize\"\n    | \"revealSelected\"\n  > {\n  onSizeChange: (size: number) => void;\n  onSubscribed: (subscription: DataSourceSubscribedMessage) => void;\n}\n\nexport const useDataSource = ({\n  dataSource,\n  defaultSelectedIndexValues,\n  defaultSelectedKeyValues,\n  onSizeChange,\n  onSubscribed,\n  renderBufferSize = 0,\n  revealSelected,\n}: DataSourceHookProps) => {\n  const [, forceUpdate] = useState<unknown>(null);\n  const data = useRef<DataSourceRow[]>([]);\n  const isMounted = useRef(true);\n  const hasUpdated = useRef(false);\n  const rangeRef = useRef<VuuRange>(NULL_RANGE);\n\n  const dataWindow = useMemo(\n    () => new MovingWindow(getFullRange(NULL_RANGE, renderBufferSize)),\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [],\n  );\n\n  useMemo(() => {\n    dataSource.on(\"resumed\", () => {\n      // When we resume a dataSource (after switching tabs etc)\n      // client will receive rows. We may not have received any\n      // setRange calls at this point so dataWindow range will\n      //not yet be set. If the dataWindow range is already set,\n      // this is a no-op.\n      console.log(\"resumed\");\n      const { range } = dataSource;\n      if (range.to !== 0) {\n        dataWindow.setRange(dataSource.range);\n      }\n    });\n  }, [dataSource, dataWindow]);\n\n  const setData = useCallback(\n    (updates: DataSourceRow[]) => {\n      for (const row of updates) {\n        dataWindow.add(row);\n      }\n      data.current = dataWindow.data;\n      if (isMounted.current) {\n        // TODO do we ever need to worry about missing updates here ?\n        forceUpdate({});\n      }\n    },\n    [dataWindow],\n  );\n\n  const datasourceMessageHandler: SubscribeCallback = useCallback(\n    (message) => {\n      if (message.type === \"subscribed\") {\n        onSubscribed?.(message);\n      } else if (message.type === \"viewport-update\") {\n        if (typeof message.size === \"number\") {\n          onSizeChange?.(message.size);\n          const size = dataWindow.data.length;\n          dataWindow.setRowCount(message.size);\n          if (dataWindow.data.length < size) {\n            if (isMounted.current === false) {\n              console.log(\"setting state whilst unmounted\");\n            }\n\n            forceUpdate({});\n          }\n        }\n        if (message.rows) {\n          if (message.range) {\n            if (message.range.to !== dataWindow.range.to) {\n              dataWindow.setRange(message.range);\n            }\n          }\n          setData(message.rows);\n        } else if (message.size === 0) {\n          setData([]);\n        } else if (typeof message.size === \"number\") {\n          data.current = dataWindow.data;\n          hasUpdated.current = true;\n        }\n      } else if (message.type === \"viewport-clear\") {\n        onSizeChange?.(0);\n        dataWindow.setRowCount(0);\n        setData([]);\n\n        if (isMounted.current === false) {\n          console.log(\"setting state whilst unmounted\");\n        }\n\n        forceUpdate({});\n      } else {\n        console.log(`useDataSource unexpected message ${message.type}`);\n      }\n    },\n    [dataWindow, onSizeChange, onSubscribed, setData],\n  );\n\n  const getSelectedRows = useCallback(() => {\n    return dataWindow.getSelectedRows();\n  }, [dataWindow]);\n\n  useEffect(() => {\n    isMounted.current = true;\n    if (dataSource.status !== \"initialising\") {\n      dataSource.resume?.(datasourceMessageHandler);\n    }\n    return () => {\n      isMounted.current = false;\n      dataSource.suspend?.();\n    };\n  }, [dataSource, datasourceMessageHandler]);\n\n  useEffect(() => {\n    if (dataSource.status === \"disabled\") {\n      dataSource.enable?.(datasourceMessageHandler);\n    }\n  }, [dataSource, datasourceMessageHandler, renderBufferSize]);\n\n  const setRange = useCallback(\n    (range: VuuRange) => {\n      if (!rangesAreSame(range, rangeRef.current)) {\n        const fullRange = getFullRange(range, renderBufferSize);\n        dataWindow.setRange(fullRange);\n\n        if (dataSource.status !== \"subscribed\") {\n          dataSource?.subscribe(\n            {\n              range: fullRange,\n              revealSelected,\n              selectedIndexValues: defaultSelectedIndexValues,\n              selectedKeyValues: defaultSelectedKeyValues,\n            },\n            datasourceMessageHandler,\n          );\n        } else {\n          dataSource.range = rangeRef.current = fullRange;\n        }\n        // emit a range event omitting the renderBufferSize\n        // This isn't great, we're using the dataSource as a conduit to emit a\n        // message that has nothing to do with the dataSource itself. Client\n        // is the DataSourceState component.\n        // WHY CANT THIS BE DONE WITHIN DataSource ?\n        dataSource.emit(\"range\", range);\n      }\n    },\n    [\n      dataSource,\n      dataWindow,\n      datasourceMessageHandler,\n      defaultSelectedIndexValues,\n      defaultSelectedKeyValues,\n      renderBufferSize,\n      revealSelected,\n    ],\n  );\n\n  return {\n    data: data.current,\n    dataRef: data,\n    getSelectedRows,\n    range: rangeRef.current,\n    setRange,\n  };\n};\n"],"names":[],"mappings":";;;;AAwBO,MAAM,gBAAgB,CAAC;AAAA,EAC5B,UAAA;AAAA,EACA,0BAAA;AAAA,EACA,wBAAA;AAAA,EACA,YAAA;AAAA,EACA,YAAA;AAAA,EACA,gBAAmB,GAAA,CAAA;AAAA,EACnB;AACF,CAA2B,KAAA;AACzB,EAAA,MAAM,GAAG,WAAW,CAAA,GAAI,SAAkB,IAAI,CAAA;AAC9C,EAAM,MAAA,IAAA,GAAO,MAAwB,CAAA,EAAE,CAAA;AACvC,EAAM,MAAA,SAAA,GAAY,OAAO,IAAI,CAAA;AAC7B,EAAM,MAAA,UAAA,GAAa,OAAO,KAAK,CAAA;AAC/B,EAAM,MAAA,QAAA,GAAW,OAAiB,UAAU,CAAA;AAE5C,EAAA,MAAM,UAAa,GAAA,OAAA;AAAA,IACjB,MAAM,IAAI,YAAA,CAAa,YAAa,CAAA,UAAA,EAAY,gBAAgB,CAAC,CAAA;AAAA;AAAA,IAEjE;AAAC,GACH;AAEA,EAAA,OAAA,CAAQ,MAAM;AACZ,IAAW,UAAA,CAAA,EAAA,CAAG,WAAW,MAAM;AAM7B,MAAA,OAAA,CAAQ,IAAI,SAAS,CAAA;AACrB,MAAM,MAAA,EAAE,OAAU,GAAA,UAAA;AAClB,MAAI,IAAA,KAAA,CAAM,OAAO,CAAG,EAAA;AAClB,QAAW,UAAA,CAAA,QAAA,CAAS,WAAW,KAAK,CAAA;AAAA;AACtC,KACD,CAAA;AAAA,GACA,EAAA,CAAC,UAAY,EAAA,UAAU,CAAC,CAAA;AAE3B,EAAA,MAAM,OAAU,GAAA,WAAA;AAAA,IACd,CAAC,OAA6B,KAAA;AAC5B,MAAA,KAAA,MAAW,OAAO,OAAS,EAAA;AACzB,QAAA,UAAA,CAAW,IAAI,GAAG,CAAA;AAAA;AAEpB,MAAA,IAAA,CAAK,UAAU,UAAW,CAAA,IAAA;AAC1B,MAAA,IAAI,UAAU,OAAS,EAAA;AAErB,QAAA,WAAA,CAAY,EAAE,CAAA;AAAA;AAChB,KACF;AAAA,IACA,CAAC,UAAU;AAAA,GACb;AAEA,EAAA,MAAM,wBAA8C,GAAA,WAAA;AAAA,IAClD,CAAC,OAAY,KAAA;AACX,MAAI,IAAA,OAAA,CAAQ,SAAS,YAAc,EAAA;AACjC,QAAA,YAAA,GAAe,OAAO,CAAA;AAAA,OACxB,MAAA,IAAW,OAAQ,CAAA,IAAA,KAAS,iBAAmB,EAAA;AAC7C,QAAI,IAAA,OAAO,OAAQ,CAAA,IAAA,KAAS,QAAU,EAAA;AACpC,UAAA,YAAA,GAAe,QAAQ,IAAI,CAAA;AAC3B,UAAM,MAAA,IAAA,GAAO,WAAW,IAAK,CAAA,MAAA;AAC7B,UAAW,UAAA,CAAA,WAAA,CAAY,QAAQ,IAAI,CAAA;AACnC,UAAI,IAAA,UAAA,CAAW,IAAK,CAAA,MAAA,GAAS,IAAM,EAAA;AACjC,YAAI,IAAA,SAAA,CAAU,YAAY,KAAO,EAAA;AAC/B,cAAA,OAAA,CAAQ,IAAI,gCAAgC,CAAA;AAAA;AAG9C,YAAA,WAAA,CAAY,EAAE,CAAA;AAAA;AAChB;AAEF,QAAA,IAAI,QAAQ,IAAM,EAAA;AAChB,UAAA,IAAI,QAAQ,KAAO,EAAA;AACjB,YAAA,IAAI,OAAQ,CAAA,KAAA,CAAM,EAAO,KAAA,UAAA,CAAW,MAAM,EAAI,EAAA;AAC5C,cAAW,UAAA,CAAA,QAAA,CAAS,QAAQ,KAAK,CAAA;AAAA;AACnC;AAEF,UAAA,OAAA,CAAQ,QAAQ,IAAI,CAAA;AAAA,SACtB,MAAA,IAAW,OAAQ,CAAA,IAAA,KAAS,CAAG,EAAA;AAC7B,UAAA,OAAA,CAAQ,EAAE,CAAA;AAAA,SACD,MAAA,IAAA,OAAO,OAAQ,CAAA,IAAA,KAAS,QAAU,EAAA;AAC3C,UAAA,IAAA,CAAK,UAAU,UAAW,CAAA,IAAA;AAC1B,UAAA,UAAA,CAAW,OAAU,GAAA,IAAA;AAAA;AACvB,OACF,MAAA,IAAW,OAAQ,CAAA,IAAA,KAAS,gBAAkB,EAAA;AAC5C,QAAA,YAAA,GAAe,CAAC,CAAA;AAChB,QAAA,UAAA,CAAW,YAAY,CAAC,CAAA;AACxB,QAAA,OAAA,CAAQ,EAAE,CAAA;AAEV,QAAI,IAAA,SAAA,CAAU,YAAY,KAAO,EAAA;AAC/B,UAAA,OAAA,CAAQ,IAAI,gCAAgC,CAAA;AAAA;AAG9C,QAAA,WAAA,CAAY,EAAE,CAAA;AAAA,OACT,MAAA;AACL,QAAA,OAAA,CAAQ,GAAI,CAAA,CAAA,iCAAA,EAAoC,OAAQ,CAAA,IAAI,CAAE,CAAA,CAAA;AAAA;AAChE,KACF;AAAA,IACA,CAAC,UAAA,EAAY,YAAc,EAAA,YAAA,EAAc,OAAO;AAAA,GAClD;AAEA,EAAM,MAAA,eAAA,GAAkB,YAAY,MAAM;AACxC,IAAA,OAAO,WAAW,eAAgB,EAAA;AAAA,GACpC,EAAG,CAAC,UAAU,CAAC,CAAA;AAEf,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,SAAA,CAAU,OAAU,GAAA,IAAA;AACpB,IAAI,IAAA,UAAA,CAAW,WAAW,cAAgB,EAAA;AACxC,MAAA,UAAA,CAAW,SAAS,wBAAwB,CAAA;AAAA;AAE9C,IAAA,OAAO,MAAM;AACX,MAAA,SAAA,CAAU,OAAU,GAAA,KAAA;AACpB,MAAA,UAAA,CAAW,OAAU,IAAA;AAAA,KACvB;AAAA,GACC,EAAA,CAAC,UAAY,EAAA,wBAAwB,CAAC,CAAA;AAEzC,EAAA,SAAA,CAAU,MAAM;AACd,IAAI,IAAA,UAAA,CAAW,WAAW,UAAY,EAAA;AACpC,MAAA,UAAA,CAAW,SAAS,wBAAwB,CAAA;AAAA;AAC9C,GACC,EAAA,CAAC,UAAY,EAAA,wBAAA,EAA0B,gBAAgB,CAAC,CAAA;AAE3D,EAAA,MAAM,QAAW,GAAA,WAAA;AAAA,IACf,CAAC,KAAoB,KAAA;AACnB,MAAA,IAAI,CAAC,aAAA,CAAc,KAAO,EAAA,QAAA,CAAS,OAAO,CAAG,EAAA;AAC3C,QAAM,MAAA,SAAA,GAAY,YAAa,CAAA,KAAA,EAAO,gBAAgB,CAAA;AACtD,QAAA,UAAA,CAAW,SAAS,SAAS,CAAA;AAE7B,QAAI,IAAA,UAAA,CAAW,WAAW,YAAc,EAAA;AACtC,UAAY,UAAA,EAAA,SAAA;AAAA,YACV;AAAA,cACE,KAAO,EAAA,SAAA;AAAA,cACP,cAAA;AAAA,cACA,mBAAqB,EAAA,0BAAA;AAAA,cACrB,iBAAmB,EAAA;AAAA,aACrB;AAAA,YACA;AAAA,WACF;AAAA,SACK,MAAA;AACL,UAAW,UAAA,CAAA,KAAA,GAAQ,SAAS,OAAU,GAAA,SAAA;AAAA;AAOxC,QAAW,UAAA,CAAA,IAAA,CAAK,SAAS,KAAK,CAAA;AAAA;AAChC,KACF;AAAA,IACA;AAAA,MACE,UAAA;AAAA,MACA,UAAA;AAAA,MACA,wBAAA;AAAA,MACA,0BAAA;AAAA,MACA,wBAAA;AAAA,MACA,gBAAA;AAAA,MACA;AAAA;AACF,GACF;AAEA,EAAO,OAAA;AAAA,IACL,MAAM,IAAK,CAAA,OAAA;AAAA,IACX,OAAS,EAAA,IAAA;AAAA,IACT,eAAA;AAAA,IACA,OAAO,QAAS,CAAA,OAAA;AAAA,IAChB;AAAA,GACF;AACF;;;;"}

package/esm/useEditableCell.js.map

@@ -1 +1 @@
-{"version":3,"file":"useEditableCell.js","sources":["../src/useEditableCell.ts"],"sourcesContent":["import { queryClosest } from \"@vuu-ui/vuu-utils\";\nimport { KeyboardEventHandler, useCallback } from \"react\";\n\nexport const useEditableCell = () => {\n  const handleKeyDown = useCallback<KeyboardEventHandler<HTMLDivElement>>(\n    (evt) => {\n      if (evt.key === \"Enter\") {\n        const el = evt.target as HTMLElement;\n        const inputElement = el.querySelector(\"input\");\n        if (inputElement !== document.activeElement) {\n          inputElement?.focus();\n        }\n      } else if (evt.key === \"Escape\") {\n        const input = queryClosest<HTMLInputElement>(evt.target, \"input\");\n        const cell = queryClosest(input, \".vuuTableCell\");\n        if (cell) {\n          cell.focus();\n          evt.stopPropagation();\n        }\n      }\n    },\n    [],\n  );\n\n  return {\n    onKeyDown: handleKeyDown,\n  };\n};\n"],"names":[],"mappings":";;;AAGO,MAAM,kBAAkB,MAAM;AACnC,EAAA,MAAM,aAAgB,GAAA,WAAA;AAAA,IACpB,CAAC,GAAQ,KAAA;AACP,MAAI,IAAA,GAAA,CAAI,QAAQ,OAAS,EAAA;AACvB,QAAA,MAAM,KAAK,GAAI,CAAA,MAAA,CAAA;AACf,QAAM,MAAA,YAAA,GAAe,EAAG,CAAA,aAAA,CAAc,OAAO,CAAA,CAAA;AAC7C,QAAI,IAAA,YAAA,KAAiB,SAAS,aAAe,EAAA;AAC3C,UAAA,YAAA,EAAc,KAAM,EAAA,CAAA;AAAA,SACtB;AAAA,OACF,MAAA,IAAW,GAAI,CAAA,GAAA,KAAQ,QAAU,EAAA;AAC/B,QAAA,MAAM,KAAQ,GAAA,YAAA,CAA+B,GAAI,CAAA,MAAA,EAAQ,OAAO,CAAA,CAAA;AAChE,QAAM,MAAA,IAAA,GAAO,YAAa,CAAA,KAAA,EAAO,eAAe,CAAA,CAAA;AAChD,QAAA,IAAI,IAAM,EAAA;AACR,UAAA,IAAA,CAAK,KAAM,EAAA,CAAA;AACX,UAAA,GAAA,CAAI,eAAgB,EAAA,CAAA;AAAA,SACtB;AAAA,OACF;AAAA,KACF;AAAA,IACA,EAAC;AAAA,GACH,CAAA;AAEA,EAAO,OAAA;AAAA,IACL,SAAW,EAAA,aAAA;AAAA,GACb,CAAA;AACF;;;;"}
+{"version":3,"file":"useEditableCell.js","sources":["../src/useEditableCell.ts"],"sourcesContent":["import { queryClosest } from \"@vuu-ui/vuu-utils\";\nimport { KeyboardEventHandler, useCallback } from \"react\";\n\nexport const useEditableCell = () => {\n  const handleKeyDown = useCallback<KeyboardEventHandler<HTMLDivElement>>(\n    (evt) => {\n      if (evt.key === \"Enter\") {\n        const el = evt.target as HTMLElement;\n        const inputElement = el.querySelector(\"input\");\n        if (inputElement !== document.activeElement) {\n          inputElement?.focus();\n        }\n      } else if (evt.key === \"Escape\") {\n        const input = queryClosest<HTMLInputElement>(evt.target, \"input\");\n        const cell = queryClosest(input, \".vuuTableCell\");\n        if (cell) {\n          cell.focus();\n          evt.stopPropagation();\n        }\n      }\n    },\n    [],\n  );\n\n  return {\n    onKeyDown: handleKeyDown,\n  };\n};\n"],"names":[],"mappings":";;;AAGO,MAAM,kBAAkB,MAAM;AACnC,EAAA,MAAM,aAAgB,GAAA,WAAA;AAAA,IACpB,CAAC,GAAQ,KAAA;AACP,MAAI,IAAA,GAAA,CAAI,QAAQ,OAAS,EAAA;AACvB,QAAA,MAAM,KAAK,GAAI,CAAA,MAAA;AACf,QAAM,MAAA,YAAA,GAAe,EAAG,CAAA,aAAA,CAAc,OAAO,CAAA;AAC7C,QAAI,IAAA,YAAA,KAAiB,SAAS,aAAe,EAAA;AAC3C,UAAA,YAAA,EAAc,KAAM,EAAA;AAAA;AACtB,OACF,MAAA,IAAW,GAAI,CAAA,GAAA,KAAQ,QAAU,EAAA;AAC/B,QAAA,MAAM,KAAQ,GAAA,YAAA,CAA+B,GAAI,CAAA,MAAA,EAAQ,OAAO,CAAA;AAChE,QAAM,MAAA,IAAA,GAAO,YAAa,CAAA,KAAA,EAAO,eAAe,CAAA;AAChD,QAAA,IAAI,IAAM,EAAA;AACR,UAAA,IAAA,CAAK,KAAM,EAAA;AACX,UAAA,GAAA,CAAI,eAAgB,EAAA;AAAA;AACtB;AACF,KACF;AAAA,IACA;AAAC,GACH;AAEA,EAAO,OAAA;AAAA,IACL,SAAW,EAAA;AAAA,GACb;AACF;;;;"}

package/esm/useHighlighting.js

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

package/esm/useHighlighting.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useHighlighting.js","sources":["../src/useHighlighting.tsx"],"sourcesContent":["export const useHighlighting = (\n  value: string,\n  pattern: Lowercase<string>,\n): string | JSX.Element => {\n  if (pattern === \"\") {\n    return value;\n  }\n  // eslint-disable-next-line react/display-name\n  const lowercaseValue = value.toLowerCase();\n  let start = 0;\n  let end = lowercaseValue.indexOf(pattern);\n  if (end === -1) {\n    return value;\n  }\n  const results = [];\n\n  while (end !== -1) {\n    results.push(value.slice(start, end));\n    start = end;\n    end = start + pattern.length;\n    results.push(\n      <span className=\"vuuHighlight\" key={start}>\n        {value.slice(start, end)}\n      </span>,\n    );\n    start = end;\n    end = lowercaseValue.indexOf(pattern, start);\n    if (end === -1 && start < lowercaseValue.length) {\n      results.push(value.slice(start));\n    }\n  }\n\n  return <span style={{ whiteSpace: \"pre\" }}>{results}</span>;\n};\n"],"names":[],"mappings":";;AAAa,MAAA,eAAA,GAAkB,CAC7B,KAAA,EACA,OACyB,KAAA;AACzB,EAAA,IAAI,YAAY,EAAI,EAAA;AAClB,IAAO,OAAA,KAAA;AAAA;AAGT,EAAM,MAAA,cAAA,GAAiB,MAAM,WAAY,EAAA;AACzC,EAAA,IAAI,KAAQ,GAAA,CAAA;AACZ,EAAI,IAAA,GAAA,GAAM,cAAe,CAAA,OAAA,CAAQ,OAAO,CAAA;AACxC,EAAA,IAAI,QAAQ,CAAI,CAAA,EAAA;AACd,IAAO,OAAA,KAAA;AAAA;AAET,EAAA,MAAM,UAAU,EAAC;AAEjB,EAAA,OAAO,QAAQ,CAAI,CAAA,EAAA;AACjB,IAAA,OAAA,CAAQ,IAAK,CAAA,KAAA,CAAM,KAAM,CAAA,KAAA,EAAO,GAAG,CAAC,CAAA;AACpC,IAAQ,KAAA,GAAA,GAAA;AACR,IAAA,GAAA,GAAM,QAAQ,OAAQ,CAAA,MAAA;AACtB,IAAQ,OAAA,CAAA,IAAA;AAAA,sBACN,GAAA,CAAC,UAAK,SAAU,EAAA,cAAA,EACb,gBAAM,KAAM,CAAA,KAAA,EAAO,GAAG,CAAA,EAAA,EADW,KAEpC;AAAA,KACF;AACA,IAAQ,KAAA,GAAA,GAAA;AACR,IAAM,GAAA,GAAA,cAAA,CAAe,OAAQ,CAAA,OAAA,EAAS,KAAK,CAAA;AAC3C,IAAA,IAAI,GAAQ,KAAA,CAAA,CAAA,IAAM,KAAQ,GAAA,cAAA,CAAe,MAAQ,EAAA;AAC/C,MAAA,OAAA,CAAQ,IAAK,CAAA,KAAA,CAAM,KAAM,CAAA,KAAK,CAAC,CAAA;AAAA;AACjC;AAGF,EAAA,2BAAQ,MAAK,EAAA,EAAA,KAAA,EAAO,EAAE,UAAY,EAAA,KAAA,IAAU,QAAQ,EAAA,OAAA,EAAA,CAAA;AACtD;;;;"}