@vuu-ui/vuu-table 0.8.56 → 0.8.58

package/esm/bulk-edit/bulk-edit-panel/BulkEditPanel.js

@@ -0,0 +1,45 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { Button } from '@salt-ds/core';
+import { useComponentCssInjection } from '@salt-ds/styles';
+import { useWindow } from '@salt-ds/window';
+import { Table } from '../../Table.js';
+import bulkEditPanelCss from './BulkEditPanel.css.js';
+
+const classBase = "vuuBulkEditPanel";
+const BulkEditPanel = (props) => {
+  const { tableConfig, dataSource, onCancel, onEditMultiple, onSubmit } = props;
+  const targetWindow = useWindow();
+  useComponentCssInjection({
+    testId: "vuu-checkbox-cell",
+    css: bulkEditPanelCss,
+    window: targetWindow
+  });
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: classBase,
+      style: { display: "flex", flexDirection: "column" },
+      children: [
+        /* @__PURE__ */ jsx("div", { className: `${classBase}-table`, children: /* @__PURE__ */ jsx(
+          Table,
+          {
+            config: tableConfig,
+            dataSource,
+            height: 400,
+            width: 600,
+            showColumnHeaderMenus: false,
+            selectionModel: "none"
+          }
+        ) }),
+        /* @__PURE__ */ jsxs("div", { className: `${classBase}-buttonBar`, children: [
+          /* @__PURE__ */ jsx(Button, { onClick: onCancel, children: "Cancel" }),
+          /* @__PURE__ */ jsx(Button, { onClick: onSubmit, children: "Save" }),
+          /* @__PURE__ */ jsx(Button, { onClick: onEditMultiple, children: "Edit Multiple" })
+        ] })
+      ]
+    }
+  );
+};
+
+export { BulkEditPanel };
+//# sourceMappingURL=BulkEditPanel.js.map

package/esm/bulk-edit/bulk-edit-panel/BulkEditPanel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BulkEditPanel.js","sources":["../../../src/bulk-edit/bulk-edit-panel/BulkEditPanel.tsx"],"sourcesContent":["import { DataSource } from \"@vuu-ui/vuu-data-types\";\nimport { TableConfig } from \"@vuu-ui/vuu-table-types\";\nimport { Button } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { Table } from \"../../Table\";\n\nimport bulkEditPanelCss from \"./BulkEditPanel.css\";\n\nconst classBase = \"vuuBulkEditPanel\";\n\ntype BulkEditPanelProps = {\n  className?: string;\n  tableConfig: TableConfig;\n  dataSource: DataSource;\n  onCancel: () => void;\n  onEditMultiple: () => void;\n  onSubmit: () => void;\n};\n\nexport const BulkEditPanel = (props: BulkEditPanelProps): JSX.Element => {\n  const { tableConfig, dataSource, onCancel, onEditMultiple, onSubmit } = props;\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-checkbox-cell\",\n    css: bulkEditPanelCss,\n    window: targetWindow,\n  });\n\n  return (\n    <div\n      className={classBase}\n      style={{ display: \"flex\", flexDirection: \"column\" }}\n    >\n      {/* <BulkEditRow columnMap={inputColMap} columns={inputColDescriptor} row={dataSource.data[0]} offset={1}></BulkEditRow> */}\n      <div className={`${classBase}-table`}>\n        <Table\n          config={tableConfig}\n          dataSource={dataSource}\n          height={400}\n          width={600}\n          showColumnHeaderMenus={false}\n          selectionModel=\"none\"\n        />\n      </div>\n\n      <div className={`${classBase}-buttonBar`}>\n        <Button onClick={onCancel}>Cancel</Button>\n        <Button onClick={onSubmit}>Save</Button>\n        <Button onClick={onEditMultiple}>Edit Multiple</Button>\n      </div>\n    </div>\n  );\n};\n"],"names":[],"mappings":";;;;;;;AASA,MAAM,SAAY,GAAA,kBAAA,CAAA;AAWL,MAAA,aAAA,GAAgB,CAAC,KAA2C,KAAA;AACvE,EAAA,MAAM,EAAE,WAAa,EAAA,UAAA,EAAY,QAAU,EAAA,cAAA,EAAgB,UAAa,GAAA,KAAA,CAAA;AACxE,EAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,mBAAA;AAAA,IACR,GAAK,EAAA,gBAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EACE,uBAAA,IAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,SAAW,EAAA,SAAA;AAAA,MACX,KAAO,EAAA,EAAE,OAAS,EAAA,MAAA,EAAQ,eAAe,QAAS,EAAA;AAAA,MAGlD,QAAA,EAAA;AAAA,wBAAA,GAAA,CAAC,KAAI,EAAA,EAAA,SAAA,EAAW,CAAG,EAAA,SAAS,CAC1B,MAAA,CAAA,EAAA,QAAA,kBAAA,GAAA;AAAA,UAAC,KAAA;AAAA,UAAA;AAAA,YACC,MAAQ,EAAA,WAAA;AAAA,YACR,UAAA;AAAA,YACA,MAAQ,EAAA,GAAA;AAAA,YACR,KAAO,EAAA,GAAA;AAAA,YACP,qBAAuB,EAAA,KAAA;AAAA,YACvB,cAAe,EAAA,MAAA;AAAA,WAAA;AAAA,SAEnB,EAAA,CAAA;AAAA,wBAEC,IAAA,CAAA,KAAA,EAAA,EAAI,SAAW,EAAA,CAAA,EAAG,SAAS,CAC1B,UAAA,CAAA,EAAA,QAAA,EAAA;AAAA,0BAAC,GAAA,CAAA,MAAA,EAAA,EAAO,OAAS,EAAA,QAAA,EAAU,QAAM,EAAA,QAAA,EAAA,CAAA;AAAA,0BAChC,GAAA,CAAA,MAAA,EAAA,EAAO,OAAS,EAAA,QAAA,EAAU,QAAI,EAAA,MAAA,EAAA,CAAA;AAAA,0BAC9B,GAAA,CAAA,MAAA,EAAA,EAAO,OAAS,EAAA,cAAA,EAAgB,QAAa,EAAA,eAAA,EAAA,CAAA;AAAA,SAChD,EAAA,CAAA;AAAA,OAAA;AAAA,KAAA;AAAA,GACF,CAAA;AAEJ;;;;"}

package/esm/bulk-edit/bulk-edit-row/BulkEditRow.css.js

@@ -0,0 +1,4 @@
+var bulkEditRowCss = ".vuuBulkEditRow{\n    display: flex;\n    flex-direction: column;\n}";
+
+export { bulkEditRowCss as default };
+//# sourceMappingURL=BulkEditRow.css.js.map

package/esm/bulk-edit/bulk-edit-row/BulkEditRow.css.js.map

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

package/esm/bulk-edit/bulk-edit-row/BulkEditRow.js

@@ -0,0 +1,27 @@
+import { jsx } from 'react/jsx-runtime';
+import { useComponentCssInjection } from '@salt-ds/styles';
+import { useWindow } from '@salt-ds/window';
+import { Row } from '../../Row.js';
+import bulkEditRowCss from './BulkEditRow.css.js';
+
+const BulkEditRow = (props) => {
+  const { columnMap, columns, row, offset } = props;
+  const targetWindow = useWindow();
+  useComponentCssInjection({
+    testId: "vuu-bulk-edit-row",
+    css: bulkEditRowCss,
+    window: targetWindow
+  });
+  return /* @__PURE__ */ jsx("div", { className: "vuuBulkEditRow", children: /* @__PURE__ */ jsx(
+    Row,
+    {
+      columnMap,
+      columns,
+      row,
+      offset
+    }
+  ) });
+};
+
+export { BulkEditRow };
+//# sourceMappingURL=BulkEditRow.js.map

package/esm/bulk-edit/bulk-edit-row/BulkEditRow.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BulkEditRow.js","sources":["../../../src/bulk-edit/bulk-edit-row/BulkEditRow.tsx"],"sourcesContent":["import { DataSourceRow } from \"@vuu-ui/vuu-data-types\";\nimport { RuntimeColumnDescriptor } from \"@vuu-ui/vuu-table-types\";\nimport { ColumnMap } from \"@vuu-ui/vuu-utils\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { Row } from \"../../Row\";\n\nimport bulkEditRowCss from \"./BulkEditRow.css\";\n\ntype BulkEditRowProps = {\n  className?: string;\n  columnMap: ColumnMap;\n  columns: RuntimeColumnDescriptor[];\n  row: DataSourceRow;\n  offset: number;\n};\n\nexport const BulkEditRow = (props: BulkEditRowProps): JSX.Element => {\n  const { columnMap, columns, row, offset } = props;\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-bulk-edit-row\",\n    css: bulkEditRowCss,\n    window: targetWindow,\n  });\n\n  return (\n    <div className=\"vuuBulkEditRow\">\n      <Row\n        columnMap={columnMap}\n        columns={columns}\n        row={row}\n        offset={offset}\n      ></Row>\n    </div>\n  );\n};\n"],"names":[],"mappings":";;;;;;AAiBa,MAAA,WAAA,GAAc,CAAC,KAAyC,KAAA;AACnE,EAAA,MAAM,EAAE,SAAA,EAAW,OAAS,EAAA,GAAA,EAAK,QAAW,GAAA,KAAA,CAAA;AAC5C,EAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,mBAAA;AAAA,IACR,GAAK,EAAA,cAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EACE,uBAAA,GAAA,CAAC,KAAI,EAAA,EAAA,SAAA,EAAU,gBACb,EAAA,QAAA,kBAAA,GAAA;AAAA,IAAC,GAAA;AAAA,IAAA;AAAA,MACC,SAAA;AAAA,MACA,OAAA;AAAA,MACA,GAAA;AAAA,MACA,MAAA;AAAA,KAAA;AAAA,GAEJ,EAAA,CAAA,CAAA;AAEJ;;;;"}

package/esm/column-resizing/ColumnResizer.css.js

@@ -1,4 +1,4 @@
-var columnResizerCss = ".vuuColumnResizer {\n    cursor: col-resize;\n    height: var(--header-height);\n    margin-left: var(--columnResizer-left, auto);\n    position: absolute;\n    right: -5px;\n    width: 8px;\n    z-index:1;\n}\n\n.vuuTableHeaderCell:not(.vuuTableHeaderCell-resizing){\n    .vuuColumnResizer:hover {\n        --columnResizer-color: var(--salt-selectable-background-selected);\n    }\n    \n}\n\n.vuuColumnResizer:after {\n    background-color: var(--columnResizer-color, var(--salt-separable-tertiary-borderColor));\n    bottom:0;\n    content: '';\n    position: absolute;\n    top: 0;\n    right: 3px;\n    height: var(--columnResizer-height, 0);\n    width: 2px;\n    z-index: 1;\n}";
+var columnResizerCss = ".vuuColumnResizer {\n  cursor: col-resize;\n  height: var(--vuu-table-col-header-height);\n  margin-left: var(--columnResizer-left, auto);\n  position: absolute;\n  right: -5px;\n  width: 8px;\n  z-index: 1;\n}\n\n.vuuTableHeaderCell:not(.vuuTableHeaderCell-resizing) {\n  .vuuColumnResizer:hover {\n    --columnResizer-color: var(--salt-selectable-background-selected);\n  }\n}\n\n.vuuColumnResizer:after {\n  background-color: var(\n    --columnResizer-color,\n    var(--salt-separable-tertiary-borderColor)\n  );\n  bottom: 0;\n  content: \"\";\n  position: absolute;\n  top: 0;\n  right: 3px;\n  height: var(--columnResizer-height, 0);\n  width: 2px;\n  z-index: 1;\n}\n";
 
 export { columnResizerCss as default };
 //# sourceMappingURL=ColumnResizer.css.js.map

package/esm/header-cell/HeaderCell.css.js

@@ -1,4 +1,4 @@
-var headerCellCss = ".vuuTableGroupHeaderCell,\n.vuuTableHeaderCell {\n  --cell-align: 'flex-start';\n  --vuuColumnHeaderPill-margin: 0;\n  --vuuColumnHeaderPill-flex: 0 0 24px;\n\n  align-items: center;\n  background-color: var(--vuuTableHeaderCell-background, inherit);\n  border-bottom: 1px solid #ccc;\n  border-right-color: var(--cell-borderColor);\n  border-right-style: solid;\n  border-right-width: 1px;\n  box-sizing: border-box;\n  cursor: default;\n  display: inline-flex;\n  gap: 4px;\n  height: var(--header-height);\n  padding: 0 12px 0 4px;\n  position: relative;\n  vertical-align: top;\n}\n\n.vuuTableHeaderCell:focus {\n  outline: var(--vuuTableCell-outline, solid var(--salt-focused-outlineColor) 2px);\n  outline-offset: -3px;\n}\n\n.vuuTableHeaderCell-right {\n    --columnResizer-left: 0;\n    --vuuTable-columnMenu-margin: 0;\n    --vuuColumnHeaderPill-margin: 0 3px 0 0;\n    --column-menu-left: 2px;\n    justify-content: flex-end;\n    padding: 0 3px 0 12px;\n}\n\n.vuuTableHeaderCell-noMenu {\n  padding-left: var(--salt-spacing-300)\n}\n\n.vuuTableHeaderCell-label {\n  flex: 0 1 auto;\n  line-height: calc(var(--header-height) - 1px);\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.vuuTableHeaderCell-right .vuuTableHeaderCell-label {\n  text-align: right;\n}\n\n.vuuTableHeaderCell-resizing {\n  --columnResizeThumb-color: var(--vuu-color-purple-10);\n  --columnResizer-color: var(--vuu-color-purple-10);\n  --columnResizer-height: var(--table-height);\n}\n\n.vuuTableHeaderCell.vuuPinLeft {\n  padding-left: 2px;\n}\n\n  .vuuTableHeaderCell.vuuPinLeft.vuuEndPin .vuuColumnResizer:before {\n    --height: calc(var(--table-height) - var(--horizontal-scrollbar-height));\n    --inset-r: calc(var(--pin-width) - 2px);\n    --inset-b: calc(var(--height) - 2px);\n    --clip-path: polygon(\n      0% 0%,                              \n      0% 120%,                            \n      2px 120%,    \n      2px 2px,      \n      var(--inset-r) 2px,      \n      var(--inset-r) var(--inset-b),      \n      2px var(--inset-b),      \n      2px 120%,     \n      120% 120%,    \n      120% 0%       \n    );\n    background-color: transparent;\n    border-color:   var(--vuuTablePinnedColumn-borderColor, var(--salt-container-primary-borderColor));\n    border-width: 1px;\n    border-style: solid solid solid solid;\n    /* border-radius: 0 6px 6px 0; */\n    border-radius: 4px;\n    box-shadow: 2px 1px 4px 0px rgba(0, 0, 0, 0.10);\n    /* clip-path: inset(10px 10px 10px 10px); */\n    clip-path: var(--clip-path);\n    content: '';\n    position: absolute;\n    width: var(--pin-width);\n    top:0;\n    bottom:0;\n    right: 3px;\n    height: var(--height);\n    z-index: -5;\n}\n\n.vuuTableHeaderCell.vuuPinRight.vuuEndPin .vuuColumnResizer:before {\n  --height: calc(var(--table-height) - var(--horizontal-scrollbar-height));\n  --inset-r: calc(var(--pin-width) - 2px);\n  --inset-b: calc(var(--height) - 2px);\n  --clip-path: polygon(\n    -20% 0%,                              \n    -20% 120%,                            \n    2px 120%,    \n    2px 2px,      \n    var(--inset-r) 2px,      \n    var(--inset-r) var(--inset-b),      \n    2px var(--inset-b),      \n    2px 120%,     \n    120% 120%,    \n    120% 0%       \n  );\n  background-color: transparent;\n  border-color: #A9AAAD;\n  border-width: 1px;\n  border-style: solid solid solid solid;\n  /* border-radius: 0 6px 6px 0; */\n  border-radius: 4px;\n  box-shadow: -2px 1px 4px 0px rgba(0, 0, 0, 0.10);\n  /* clip-path: inset(10px 10px 10px 10px); */\n  clip-path: var(--clip-path);\n  content: '';\n  position: absolute;\n  width: var(--pin-width);\n  top:0;\n  bottom:0;\n  right: 0px;\n  height: var(--height);\n  z-index: -5;\n}\n\n.vuuTableHeaderCell.vuuDraggable-dragAway {\n    display: none;\n}\n\n.vuuTable-headingCell {\n  background: var(--dataTable-background);\n  border-color: var(--salt-separable-tertiary-borderColor);\n  border-style: solid solid solid none;\n  border-width: 1px;\n  color: var(--salt-text-secondary-foreground);\n  display: inline-block;\n  height: var(--header-height);\n  padding: 0 !important;\n}\n";
+var headerCellCss = ".vuuTableGroupHeaderCell,\n.vuuTableHeaderCell {\n  --cell-align: \"flex-start\";\n  --vuuColumnHeaderPill-margin: 0;\n  --vuuColumnHeaderPill-flex: 0 0 24px;\n\n  align-items: center;\n  background-color: var(--vuuTableHeaderCell-background, inherit);\n  border-bottom: 1px solid #ccc;\n  border-right-color: var(--cell-borderColor);\n  border-right-style: solid;\n  border-right-width: 1px;\n  box-sizing: border-box;\n  cursor: default;\n  display: inline-flex;\n  gap: 4px;\n  height: var(--vuu-table-col-header-height);\n  padding: 0 12px 0 4px;\n  position: relative;\n  vertical-align: top;\n}\n\n.vuuTableHeaderCell:focus {\n  outline: var(\n    --vuuTableCell-outline,\n    solid var(--salt-focused-outlineColor) 2px\n  );\n  outline-offset: -3px;\n}\n\n.vuuTableHeaderCell-right {\n  --columnResizer-left: 0;\n  --vuuTable-columnMenu-margin: 0;\n  --vuuColumnHeaderPill-margin: 0 3px 0 0;\n  --column-menu-left: 2px;\n  justify-content: flex-end;\n  padding: 0 3px 0 12px;\n}\n\n.vuuTableHeaderCell-noMenu {\n  padding-left: var(--salt-spacing-300);\n}\n\n.vuuTableHeaderCell-label {\n  flex: 0 1 auto;\n  line-height: calc(var(--vuu-table-cell-header-height) - 1px);\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.vuuTableHeaderCell-right .vuuTableHeaderCell-label {\n  text-align: right;\n}\n\n.vuuTableHeaderCell-resizing {\n  --columnResizeThumb-color: var(--vuu-color-purple-10);\n  --columnResizer-color: var(--vuu-color-purple-10);\n  --columnResizer-height: var(--table-height);\n}\n\n.vuuTableHeaderCell.vuuPinLeft {\n  padding-left: 2px;\n}\n\n.vuuTableHeaderCell.vuuPinLeft.vuuEndPin .vuuColumnResizer:before {\n  --height: calc(var(--table-height) - var(--horizontal-scrollbar-height));\n  --inset-r: calc(var(--pin-width) - 2px);\n  --inset-b: calc(var(--height) - 2px);\n  --clip-path: polygon(\n    0% 0%,\n    0% 120%,\n    2px 120%,\n    2px 2px,\n    var(--inset-r) 2px,\n    var(--inset-r) var(--inset-b),\n    2px var(--inset-b),\n    2px 120%,\n    120% 120%,\n    120% 0%\n  );\n  background-color: transparent;\n  border-color: var(\n    --vuuTablePinnedColumn-borderColor,\n    var(--salt-container-primary-borderColor)\n  );\n  border-width: 1px;\n  border-style: solid solid solid solid;\n  /* border-radius: 0 6px 6px 0; */\n  border-radius: 4px;\n  box-shadow: 2px 1px 4px 0px rgba(0, 0, 0, 0.1);\n  /* clip-path: inset(10px 10px 10px 10px); */\n  clip-path: var(--clip-path);\n  content: \"\";\n  position: absolute;\n  width: var(--pin-width);\n  top: 0;\n  bottom: 0;\n  right: 3px;\n  height: var(--height);\n  z-index: -5;\n}\n\n.vuuTableHeaderCell.vuuPinRight.vuuEndPin .vuuColumnResizer:before {\n  --height: calc(var(--table-height) - var(--horizontal-scrollbar-height));\n  --inset-r: calc(var(--pin-width) - 2px);\n  --inset-b: calc(var(--height) - 2px);\n  --clip-path: polygon(\n    -20% 0%,\n    -20% 120%,\n    2px 120%,\n    2px 2px,\n    var(--inset-r) 2px,\n    var(--inset-r) var(--inset-b),\n    2px var(--inset-b),\n    2px 120%,\n    120% 120%,\n    120% 0%\n  );\n  background-color: transparent;\n  border-color: #a9aaad;\n  border-width: 1px;\n  border-style: solid solid solid solid;\n  /* border-radius: 0 6px 6px 0; */\n  border-radius: 4px;\n  box-shadow: -2px 1px 4px 0px rgba(0, 0, 0, 0.1);\n  /* clip-path: inset(10px 10px 10px 10px); */\n  clip-path: var(--clip-path);\n  content: \"\";\n  position: absolute;\n  width: var(--pin-width);\n  top: 0;\n  bottom: 0;\n  right: 0px;\n  height: var(--height);\n  z-index: -5;\n}\n\n.vuuTableHeaderCell.vuuDraggable-dragAway {\n  display: none;\n}\n\n.vuuTable-headingCell {\n  background: var(--dataTable-background);\n  border-color: var(--salt-separable-tertiary-borderColor);\n  border-style: solid solid solid none;\n  border-width: 1px;\n  color: var(--salt-content-secondary-foreground);\n  display: inline-block;\n  height: var(--vuu-table-col-heading-height);\n  padding: 0 !important;\n}\n";
 
 export { headerCellCss as default };
 //# sourceMappingURL=HeaderCell.css.js.map

package/esm/index.js

@@ -1,15 +1,19 @@
-export { GroupHeaderCell, GroupHeaderCell as GroupHeaderCellNext } from './header-cell/GroupHeaderCell.js';
+export { GroupHeaderCell } from './header-cell/GroupHeaderCell.js';
 export { HeaderCell } from './header-cell/HeaderCell.js';
-export { Table } from './Table.js';
-export { TableCell } from './table-cell/TableCell.js';
-export { TableGroupCell } from './table-cell/TableGroupCell.js';
-export { updateTableConfig } from './table-config.js';
 export { CheckboxCell } from './cell-renderers/checkbox-cell/CheckboxCell.js';
 export { CheckboxRowSelectorCell } from './cell-renderers/checkbox-row-selector/CheckboxRowSelectorCell.js';
 export { InputCell } from './cell-renderers/input-cell/InputCell.js';
 export { ToggleCell } from './cell-renderers/toggle-cell/ToggleCell.js';
+export { Table } from './Table.js';
+export { TableCell } from './table-cell/TableCell.js';
+export { TableGroupCell } from './table-cell/TableGroupCell.js';
+export { updateTableConfig } from './table-config.js';
+export { HeaderProvider, useHeaderProps } from './table-header/HeaderProvider.js';
+export { TableHeader } from './table-header/TableHeader.js';
 export { useControlledTableNavigation } from './useControlledTableNavigation.js';
 export { isShowColumnSettings, isShowTableSettings, useTableModel } from './useTableModel.js';
 export { noScrolling, useTableScroll } from './useTableScroll.js';
 export { useTableViewport } from './useTableViewport.js';
+export { BulkEditRow } from './bulk-edit/bulk-edit-row/BulkEditRow.js';
+export { BulkEditPanel } from './bulk-edit/bulk-edit-panel/BulkEditPanel.js';
 //# sourceMappingURL=index.js.map

package/esm/index.js.map

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

package/esm/table-dom-utils.js

@@ -13,6 +13,12 @@ const getTableCell = (containerRef, [rowIdx, colIdx]) => {
   }
 };
 const cellIsEditable = (cell) => cell?.classList.contains("vuuTableCell-editable");
+const cellDropdownShowing = (cell) => {
+  if (cellIsEditable(cell)) {
+    return cell?.querySelector('.saltDropdown[aria-expanded="true"]') !== null;
+  }
+  return false;
+};
 const cellIsTextInput = (cell) => cell.querySelector(".vuuTableInputCell") !== null;
 function getRowIndex(rowEl) {
   if (rowEl) {
@@ -47,5 +53,5 @@ const howFarIsRowOutsideViewport = (rowEl, totalHeaderHeight, contentContainer =
   }
 };
 
-export { cellIsEditable, cellIsTextInput, closestRowIndex, dataCellQuery, getRowIndex, getTableCell, headerCellQuery, howFarIsRowOutsideViewport };
+export { cellDropdownShowing, cellIsEditable, cellIsTextInput, closestRowIndex, dataCellQuery, getRowIndex, getTableCell, headerCellQuery, howFarIsRowOutsideViewport };
 //# sourceMappingURL=table-dom-utils.js.map

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\";\n\n/**\n * [rowIndex, colIndex\n */\nexport type CellPos = [number, number];\n\nexport const headerCellQuery = (colIdx: number) =>\n  `.vuuTable-col-headers .vuuTableHeaderCell:nth-child(${colIdx})`;\n\nexport const dataCellQuery = (rowIdx: number, colIdx: number) =>\n  `.vuuTable-body > [aria-rowindex='${rowIdx + 1}'] > [role='cell']:nth-child(${\n    colIdx + 1\n  })`;\n\nexport const getTableCell = (\n  containerRef: RefObject<HTMLElement>,\n\n  [rowIdx, colIdx]: CellPos\n) => {\n  const cssQuery =\n    rowIdx === -1 ? headerCellQuery(colIdx) : dataCellQuery(rowIdx, colIdx);\n  const cell = containerRef.current?.querySelector(\n    cssQuery\n  ) as HTMLTableCellElement;\n\n  if (cellIsEditable(cell)) {\n    // Dropdown gets focus, Input does not\n    const focusableContent = cell.querySelector(\"button\") as HTMLElement;\n    return focusableContent || cell;\n  } else {\n    return cell;\n  }\n};\n\nexport const cellIsEditable = (cell: HTMLDivElement | null) =>\n  cell?.classList.contains(\"vuuTableCell-editable\");\n\nexport const cellIsTextInput = (cell: HTMLElement) =>\n  cell.querySelector(\".vuuTableInputCell\") !== null;\n\nexport function getRowIndex(rowEl?: HTMLElement) {\n  if (rowEl) {\n    const idx: string | null = rowEl.ariaRowIndex;\n    if (idx !== null) {\n      return parseInt(idx, 10) - 1;\n    }\n  }\n  return -1;\n}\n\nconst closestRow = (el: HTMLElement) =>\n  el.closest('[role=\"row\"]') as HTMLElement;\n\nexport const closestRowIndex = (el: HTMLElement) => getRowIndex(closestRow(el));\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":"AAQO,MAAM,eAAkB,GAAA,CAAC,MAC9B,KAAA,CAAA,oDAAA,EAAuD,MAAM,CAAA,CAAA,EAAA;AAElD,MAAA,aAAA,GAAgB,CAAC,MAAgB,EAAA,MAAA,KAC5C,oCAAoC,MAAS,GAAA,CAAC,CAC5C,6BAAA,EAAA,MAAA,GAAS,CACX,CAAA,CAAA,EAAA;AAEK,MAAM,eAAe,CAC1B,YAAA,EAEA,CAAC,MAAA,EAAQ,MAAM,CACZ,KAAA;AACH,EAAM,MAAA,QAAA,GACJ,WAAW,CAAK,CAAA,GAAA,eAAA,CAAgB,MAAM,CAAI,GAAA,aAAA,CAAc,QAAQ,MAAM,CAAA,CAAA;AACxE,EAAM,MAAA,IAAA,GAAO,aAAa,OAAS,EAAA,aAAA;AAAA,IACjC,QAAA;AAAA,GACF,CAAA;AAEA,EAAI,IAAA,cAAA,CAAe,IAAI,CAAG,EAAA;AAExB,IAAM,MAAA,gBAAA,GAAmB,IAAK,CAAA,aAAA,CAAc,QAAQ,CAAA,CAAA;AACpD,IAAA,OAAO,gBAAoB,IAAA,IAAA,CAAA;AAAA,GACtB,MAAA;AACL,IAAO,OAAA,IAAA,CAAA;AAAA,GACT;AACF,EAAA;AAEO,MAAM,iBAAiB,CAAC,IAAA,KAC7B,IAAM,EAAA,SAAA,CAAU,SAAS,uBAAuB,EAAA;AAE3C,MAAM,kBAAkB,CAAC,IAAA,KAC9B,IAAK,CAAA,aAAA,CAAc,oBAAoB,CAAM,KAAA,KAAA;AAExC,SAAS,YAAY,KAAqB,EAAA;AAC/C,EAAA,IAAI,KAAO,EAAA;AACT,IAAA,MAAM,MAAqB,KAAM,CAAA,YAAA,CAAA;AACjC,IAAA,IAAI,QAAQ,IAAM,EAAA;AAChB,MAAO,OAAA,QAAA,CAAS,GAAK,EAAA,EAAE,CAAI,GAAA,CAAA,CAAA;AAAA,KAC7B;AAAA,GACF;AACA,EAAO,OAAA,CAAA,CAAA,CAAA;AACT,CAAA;AAEA,MAAM,UAAa,GAAA,CAAC,EAClB,KAAA,EAAA,CAAG,QAAQ,cAAc,CAAA,CAAA;AAEpB,MAAM,kBAAkB,CAAC,EAAA,KAAoB,WAAY,CAAA,UAAA,CAAW,EAAE,CAAC,EAAA;AAE9E,MAAM,mBAAA,GAAsB,CAAC,KAAA,CAAA,EAAW,KAAS,CAAA,CAAA,CAAA;AAEpC,MAAA,0BAAA,GAA6B,CACxC,KACA,EAAA,iBAAA,EACA,mBAAmB,KAAM,CAAA,OAAA,CAAQ,4BAA4B,CACE,KAAA;AAE/D,EAAA,IAAI,gBAAkB,EAAA;AAEpB,IAAM,MAAA,QAAA,GAAW,kBAAkB,qBAAsB,EAAA,CAAA;AACzD,IAAM,MAAA,aAAA,GAAgB,SAAS,GAAM,GAAA,iBAAA,CAAA;AACrC,IAAM,MAAA,GAAA,GAAM,MAAM,qBAAsB,EAAA,CAAA;AACxC,IAAA,IAAI,GAAK,EAAA;AACP,MAAI,IAAA,GAAA,CAAI,MAAS,GAAA,QAAA,CAAS,MAAQ,EAAA;AAChC,QAAA,OAAO,CAAC,MAAA,EAAQ,GAAI,CAAA,MAAA,GAAS,SAAS,MAAM,CAAA,CAAA;AAAA,OAC9C,MAAA,IAAW,GAAI,CAAA,GAAA,GAAM,aAAe,EAAA;AAClC,QAAA,OAAO,CAAC,IAAA,EAAM,GAAI,CAAA,GAAA,GAAM,aAAa,CAAA,CAAA;AAAA,OAChC,MAAA;AACL,QAAO,OAAA,mBAAA,CAAA;AAAA,OACT;AAAA,KACK,MAAA;AACL,MAAA,MAAM,MAAM,+BAA+B,CAAA,CAAA;AAAA,KAC7C;AAAA,GACK,MAAA;AACL,IAAA,MAAM,MAAM,+CAA+C,CAAA,CAAA;AAAA,GAC7D;AACF;;;;"}
+{"version":3,"file":"table-dom-utils.js","sources":["../src/table-dom-utils.ts"],"sourcesContent":["import { RefObject } from \"react\";\nimport { ScrollDirection } from \"./useTableScroll\";\n\n/**\n * [rowIndex, colIndex\n */\nexport type CellPos = [number, number];\n\nexport const headerCellQuery = (colIdx: number) =>\n  `.vuuTable-col-headers .vuuTableHeaderCell:nth-child(${colIdx})`;\n\nexport const dataCellQuery = (rowIdx: number, colIdx: number) =>\n  `.vuuTable-body > [aria-rowindex='${rowIdx + 1}'] > [role='cell']:nth-child(${\n    colIdx + 1\n  })`;\n\nexport const getTableCell = (\n  containerRef: RefObject<HTMLElement>,\n\n  [rowIdx, colIdx]: CellPos\n) => {\n  const cssQuery =\n    rowIdx === -1 ? headerCellQuery(colIdx) : dataCellQuery(rowIdx, colIdx);\n  const cell = containerRef.current?.querySelector(\n    cssQuery\n  ) as HTMLTableCellElement;\n\n  if (cellIsEditable(cell)) {\n    // Dropdown gets focus, Input does not\n    const focusableContent = cell.querySelector(\"button\") as HTMLElement;\n    return focusableContent || cell;\n  } else {\n    return cell;\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\nexport const cellIsTextInput = (cell: HTMLElement) =>\n  cell.querySelector(\".vuuTableInputCell\") !== null;\n\nexport function getRowIndex(rowEl?: HTMLElement) {\n  if (rowEl) {\n    const idx: string | null = rowEl.ariaRowIndex;\n    if (idx !== null) {\n      return parseInt(idx, 10) - 1;\n    }\n  }\n  return -1;\n}\n\nconst closestRow = (el: HTMLElement) =>\n  el.closest('[role=\"row\"]') as HTMLElement;\n\nexport const closestRowIndex = (el: HTMLElement) => getRowIndex(closestRow(el));\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

@@ -0,0 +1,15 @@
+import { jsx } from 'react/jsx-runtime';
+import { createContext, useContext } from 'react';
+
+const HeaderContext = createContext({ columns: [] });
+const HeaderProvider = ({
+  children,
+  columns,
+  virtualColSpan
+}) => {
+  return /* @__PURE__ */ jsx(HeaderContext.Provider, { value: { columns, virtualColSpan }, children });
+};
+const useHeaderProps = () => useContext(HeaderContext);
+
+export { HeaderProvider, useHeaderProps };
+//# sourceMappingURL=HeaderProvider.js.map

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

@@ -0,0 +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;;;;"}

package/esm/table-header/TableHeader.js

@@ -1,16 +1,19 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
+import { jsx, jsxs } from 'react/jsx-runtime';
 import { isNotHidden, isGroupColumn } from '@vuu-ui/vuu-utils';
 import cx from 'clsx';
-import { memo } from 'react';
+import { memo, useMemo, isValidElement } from 'react';
 import { GroupHeaderCell } from '../header-cell/GroupHeaderCell.js';
 import { HeaderCell } from '../header-cell/HeaderCell.js';
 import { useTableHeader } from './useTableHeader.js';
+import { HeaderProvider } from './HeaderProvider.js';
 
 const TableHeader = memo(
   ({
     classBase = "vuuTable",
     columns,
+    customHeader,
     headings,
+    onHeightMeasured,
     onMoveColumn,
     onMoveGroupColumn,
     onRemoveGroupColumn,
@@ -29,10 +32,36 @@ const TableHeader = memo(
       setContainerRef
     } = useTableHeader({
       columns,
+      onHeightMeasured,
       onMoveColumn,
       onSortColumn,
       tableConfig
     });
+    const customHeaders = useMemo(() => {
+      const createElement = (Component, key) => /* @__PURE__ */ jsx(
+        Component,
+        {
+          columns,
+          virtualColSpan
+        },
+        key
+      );
+      if (customHeader === void 0) {
+        return null;
+      } else if (Array.isArray(customHeader)) {
+        if (customHeader.some(isValidElement)) {
+          return /* @__PURE__ */ jsx(HeaderProvider, { columns, virtualColSpan, children: customHeader.map(
+            (header, i) => isValidElement(header) ? header : createElement(header, i)
+          ) });
+        } else {
+          return customHeader.map(createElement);
+        }
+      } else if (isValidElement(customHeader)) {
+        return /* @__PURE__ */ jsx(HeaderProvider, { columns, virtualColSpan, children: customHeader });
+      } else {
+        return createElement(customHeader);
+      }
+    }, [columns, customHeader, virtualColSpan]);
     return /* @__PURE__ */ jsxs("div", { className: `${classBase}-col-headings`, ref: setContainerRef, children: [
       headings.map((colHeaders, i) => /* @__PURE__ */ jsx("div", { className: "vuuTable-heading", children: colHeaders.map(({ label, width }, j) => /* @__PURE__ */ jsx("div", { className: "vuuTable-headingCell", style: { width }, children: label }, j)) }, i)),
       /* @__PURE__ */ jsxs("div", { className: `${classBase}-col-headers`, role: "row", children: [
@@ -74,6 +103,7 @@ const TableHeader = memo(
             col.name
           )
         ),
+        customHeaders,
         draggableColumn
       ] })
     ] });

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  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 { memo } from \"react\";\nimport { GroupHeaderCell, HeaderCell } from \"../header-cell\";\nimport { useTableHeader } from \"./useTableHeader\";\n\nexport type ColumnSortHandler = (\n  column: ColumnDescriptor,\n  addToExistingSort: boolean,\n  sortType?: VuuSortType\n) => void;\n\nexport interface TableHeaderProps {\n  classBase?: string;\n  columns: RuntimeColumnDescriptor[];\n  headings: TableHeadings;\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    classBase = \"vuuTable\",\n    columns,\n    headings,\n    onMoveColumn,\n    onMoveGroupColumn,\n    onRemoveGroupColumn,\n    onResizeColumn,\n    onSortColumn,\n    showColumnHeaderMenus,\n    tableConfig,\n    tableId,\n    virtualColSpan = 0,\n  }: TableHeaderProps) => {\n    const {\n      draggableColumn,\n      draggedColumnIndex,\n      onClick,\n      onMouseDown,\n      setContainerRef,\n    } = useTableHeader({\n      columns,\n      onMoveColumn,\n      onSortColumn,\n      tableConfig,\n    });\n\n    return (\n      <div className={`${classBase}-col-headings`} ref={setContainerRef}>\n        {headings.map((colHeaders, i) => (\n          <div className=\"vuuTable-heading\" key={i}>\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 className={`${classBase}-col-headers`} role=\"row\">\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                aria-colindex={col.index}\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                aria-colindex={col.index}\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      </div>\n    );\n  }\n);\nTableHeader.displayName = \"TableHeader\";\n"],"names":[],"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  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 { isValidElement, memo, useMemo } from \"react\";\nimport { GroupHeaderCell, HeaderCell } from \"../header-cell\";\nimport { useTableHeader } from \"./useTableHeader\";\nimport { HeaderProvider } from \"./HeaderProvider\";\n\nexport type ColumnSortHandler = (\n  column: ColumnDescriptor,\n  addToExistingSort: boolean,\n  sortType?: VuuSortType\n) => void;\n\nexport interface TableHeaderProps {\n  classBase?: string;\n  columns: RuntimeColumnDescriptor[];\n  customHeader?: CustomHeader | CustomHeader[];\n  headings: TableHeadings;\n  onHeightMeasured: (height: 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    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 {\n      draggableColumn,\n      draggedColumnIndex,\n      onClick,\n      onMouseDown,\n      setContainerRef,\n    } = useTableHeader({\n      columns,\n      onHeightMeasured,\n      onMoveColumn,\n      onSortColumn,\n      tableConfig,\n    });\n\n    const customHeaders = useMemo(() => {\n      const createElement = (Component: CustomHeader, key?: number) => (\n        <Component\n          columns={columns}\n          key={key}\n          virtualColSpan={virtualColSpan}\n        />\n      );\n      if (customHeader === undefined) {\n        return null;\n      } else if (Array.isArray(customHeader)) {\n        if (customHeader.some(isValidElement)) {\n          return (\n            <HeaderProvider columns={columns} virtualColSpan={virtualColSpan}>\n              {customHeader.map((header, i) =>\n                isValidElement(header) ? header : createElement(header, i)\n              )}\n            </HeaderProvider>\n          );\n        } else {\n          return customHeader.map(createElement);\n        }\n      } else if (isValidElement(customHeader)) {\n        return (\n          <HeaderProvider columns={columns} virtualColSpan={virtualColSpan}>\n            {customHeader}\n          </HeaderProvider>\n        );\n      } else {\n        return createElement(customHeader);\n      }\n    }, [columns, customHeader, virtualColSpan]);\n\n    return (\n      <div className={`${classBase}-col-headings`} ref={setContainerRef}>\n        {headings.map((colHeaders, i) => (\n          <div className=\"vuuTable-heading\" key={i}>\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 className={`${classBase}-col-headers`} role=\"row\">\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                aria-colindex={col.index}\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                aria-colindex={col.index}\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          {customHeaders}\n          {draggableColumn}\n        </div>\n      </div>\n    );\n  }\n);\nTableHeader.displayName = \"TableHeader\";\n"],"names":[],"mappings":"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"}

package/esm/table-header/useTableHeader.js

@@ -1,15 +1,21 @@
 import { useDragDrop } from '@vuu-ui/vuu-ui-controls';
 import { moveColumnTo, queryClosest, visibleColumnAtIndex } from '@vuu-ui/vuu-utils';
 import { useRef, useCallback } from 'react';
+import { useMeasuredHeight } from '../useMeasuredHeight.js';
+import { useForkRef } from '@salt-ds/core';
 
 const useTableHeader = ({
   columns,
+  onHeightMeasured,
   onMoveColumn,
   onSortColumn,
   tableConfig
 }) => {
   const containerRef = useRef(null);
   const scrollingContainerRef = useRef(null);
+  const { rowRef } = useMeasuredHeight({
+    onHeightMeasured
+  });
   const setContainerRef = useCallback((el) => {
     containerRef.current = el;
     if (el) {
@@ -62,7 +68,7 @@ const useTableHeader = ({
     draggedColumnIndex: dragDropHook.draggedItemIndex,
     onClick: handleColumnHeaderClick,
     onMouseDown: columnHeaderDragMouseDown,
-    setContainerRef
+    setContainerRef: useForkRef(setContainerRef, rowRef)
   };
 };
 

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

@@ -1 +1 @@
-{"version":3,"file":"useTableHeader.js","sources":["../../src/table-header/useTableHeader.ts"],"sourcesContent":["import { ColumnDescriptor } 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\";\n\nexport interface TableHeaderHookProps\n  extends Pick<\n    TableHeaderProps,\n    \"columns\" | \"onMoveColumn\" | \"onSortColumn\" | \"tableConfig\"\n  > {\n  label?: string;\n  onMoveColumn: (columns: ColumnDescriptor[]) => void;\n  onSortColumn: (column: ColumnDescriptor, addToExistingSort: boolean) => void;\n}\n\nexport const useTableHeader = ({\n  columns,\n  onMoveColumn,\n  onSortColumn,\n  tableConfig,\n}: TableHeaderHookProps) => {\n  const containerRef = useRef<HTMLDivElement | null>(null);\n  const scrollingContainerRef = useRef<HTMLDivElement | null>(null);\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: true,\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,\n  };\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"useTableHeader.js","sources":["../../src/table-header/useTableHeader.ts"],"sourcesContent":["import { ColumnDescriptor } 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    \"columns\" | \"onMoveColumn\" | \"onSortColumn\" | \"tableConfig\"\n  > {\n  label?: string;\n  onHeightMeasured: (height: number) => void;\n  onMoveColumn: (columns: ColumnDescriptor[]) => void;\n  onSortColumn: (column: ColumnDescriptor, addToExistingSort: boolean) => void;\n}\n\nexport const useTableHeader = ({\n  columns,\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  const { rowRef } = useMeasuredHeight({\n    onHeightMeasured,\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: true,\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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"}

package/esm/useKeyboardNavigation.js

@@ -1,7 +1,7 @@
-import { getIndexFromRowElement } from '@vuu-ui/vuu-utils';
+import { queryClosest, getIndexFromRowElement } from '@vuu-ui/vuu-utils';
 import { useControlled } from '@salt-ds/core';
 import { useRef, useCallback, useEffect } from 'react';
-import { getTableCell, closestRowIndex, headerCellQuery, dataCellQuery } from './table-dom-utils.js';
+import { getTableCell, cellDropdownShowing, closestRowIndex, headerCellQuery, dataCellQuery } from './table-dom-utils.js';
 
 const rowNavigationKeys = /* @__PURE__ */ new Set([
   "Home",
@@ -235,6 +235,10 @@ const useKeyboardNavigation = ({
   }, [highlightedIndexProp, scrollRowIntoViewIfNecessary]);
   const handleKeyDown = useCallback(
     (e) => {
+      const cell = queryClosest(e.target, ".vuuTableCell");
+      if (cellDropdownShowing(cell)) {
+        return;
+      }
       if (rowCount > 0 && isNavigationKey(e.key, navigationStyle)) {
         e.preventDefault();
         e.stopPropagation();

package/esm/useKeyboardNavigation.js.map

@@ -1 +1 @@
-{"version":3,"file":"useKeyboardNavigation.js","sources":["../src/useKeyboardNavigation.ts"],"sourcesContent":["import { VuuRange } from \"@vuu-ui/vuu-protocol-types\";\nimport { getIndexFromRowElement } from \"@vuu-ui/vuu-utils\";\nimport { useControlled } from \"@salt-ds/core\";\nimport {\n  KeyboardEvent,\n  MouseEvent,\n  RefObject,\n  useCallback,\n  useEffect,\n  useRef,\n} from \"react\";\nimport { TableNavigationStyle } from \"./Table\";\nimport {\n  CellPos,\n  closestRowIndex,\n  dataCellQuery,\n  getTableCell,\n  headerCellQuery,\n} from \"./table-dom-utils\";\nimport { ScrollRequestHandler } from \"./useTableScroll\";\n\nconst rowNavigationKeys = new Set<NavigationKey>([\n  \"Home\",\n  \"End\",\n  \"PageUp\",\n  \"PageDown\",\n  \"ArrowDown\",\n  \"ArrowUp\",\n]);\n\nconst cellNavigationKeys = new Set(rowNavigationKeys);\ncellNavigationKeys.add(\"ArrowLeft\");\ncellNavigationKeys.add(\"ArrowRight\");\n\nexport const isNavigationKey = (\n  key: string,\n  navigationStyle: TableNavigationStyle\n): key is NavigationKey => {\n  switch (navigationStyle) {\n    case \"cell\":\n      return cellNavigationKeys.has(key as NavigationKey);\n    case \"row\":\n      return rowNavigationKeys.has(key as NavigationKey);\n    default:\n      return false;\n  }\n};\n\ntype ArrowKey = \"ArrowUp\" | \"ArrowDown\" | \"ArrowLeft\" | \"ArrowRight\";\ntype PageKey = \"Home\" | \"End\" | \"PageUp\" | \"PageDown\";\ntype NavigationKey = PageKey | ArrowKey;\n\nconst PageKeys = [\"Home\", \"End\", \"PageUp\", \"PageDown\"];\nexport const isPagingKey = (key: string): key is PageKey =>\n  PageKeys.includes(key);\n\nconst NULL_CELL_POS: CellPos = [-1, -1];\n\nfunction nextCellPos(\n  key: ArrowKey,\n  [rowIdx, colIdx]: CellPos,\n  columnCount: number,\n  rowCount: 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 [0, colIdx];\n    } else if (rowIdx === rowCount - 1) {\n      return [rowIdx, colIdx];\n    } else {\n      return [rowIdx + 1, colIdx];\n    }\n  } else if (key === \"ArrowRight\") {\n    // The colIdx is 1 based, because of the selection decorator\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 interface NavigationHookProps {\n  containerRef: RefObject<HTMLElement>;\n  columnCount?: number;\n  defaultHighlightedIndex?: number;\n  disableFocus?: boolean;\n  disableHighlightOnFocus?: boolean;\n  highlightedIndex?: number;\n  label?: string;\n  navigationStyle: TableNavigationStyle;\n  viewportRange: VuuRange;\n  onHighlight?: (idx: number) => void;\n  requestScroll?: ScrollRequestHandler;\n  restoreLastFocus?: boolean;\n  rowCount?: number;\n  selected?: unknown;\n  viewportRowCount: number;\n}\n\nexport const useKeyboardNavigation = ({\n  columnCount = 0,\n  containerRef,\n  disableFocus = false,\n  defaultHighlightedIndex,\n  disableHighlightOnFocus,\n  highlightedIndex: highlightedIndexProp,\n  navigationStyle,\n  requestScroll,\n  onHighlight,\n  rowCount = 0,\n  viewportRowCount,\n}: // viewportRange,\nNavigationHookProps) => {\n  // const { from: viewportFirstRow, to: viewportLastRow } = viewportRange;\n  const focusedCellPos = useRef<CellPos>([-1, -1]);\n  const focusableCell = useRef<HTMLElement>();\n  const activeCellPos = useRef<CellPos>([-1, 0]);\n  // Keep this in sync with state value. This can be used by functions that need\n  // to reference highlightedIndex at call time but do not need to be regenerated\n  // every time it changes (i.e keep highlightedIndex out of their dependency\n  // arrays, as it can update frequently)\n  const highlightedIndexRef = useRef<number | undefined>();\n\n  const [highlightedIndex, setHighlightedIdx] = useControlled({\n    controlled: highlightedIndexProp,\n    default: defaultHighlightedIndex,\n    name: \"UseKeyboardNavigation\",\n  });\n  highlightedIndexRef.current = highlightedIndex;\n  const setHighlightedIndex = useCallback(\n    (idx: number, fromKeyboard = false) => {\n      onHighlight?.(idx);\n      setHighlightedIdx(idx);\n      if (fromKeyboard) {\n        // lastFocus.current = idx;\n      }\n    },\n    [onHighlight, setHighlightedIdx]\n  );\n\n  const getFocusedCell = (element: HTMLElement | Element | null) =>\n    element?.closest(\n      \"[role='columnHeader'],[role='cell']\"\n    ) as HTMLDivElement | null;\n\n  const getTableCellPos = (tableCell: HTMLDivElement): CellPos => {\n    if (tableCell.role === \"columnHeader\") {\n      const colIdx = parseInt(tableCell.dataset.idx ?? \"-1\", 10);\n      return [-1, colIdx];\n    } else {\n      const focusedRow = tableCell.closest(\"[role='row']\") as HTMLElement;\n      if (focusedRow) {\n        const rowIdx = getIndexFromRowElement(focusedRow);\n        // TODO will get trickier when we introduce horizontal virtualisation\n        const colIdx = Array.from(focusedRow.childNodes).indexOf(tableCell);\n        return [rowIdx, colIdx];\n      }\n    }\n    return NULL_CELL_POS;\n  };\n\n  const focusCell = useCallback(\n    (cellPos: CellPos) => {\n      if (containerRef.current) {\n        const activeCell = getTableCell(containerRef, cellPos);\n        if (activeCell) {\n          if (activeCell !== focusableCell.current) {\n            focusableCell.current?.removeAttribute(\"tabindex\");\n            focusableCell.current = activeCell;\n            activeCell.setAttribute(\"tabindex\", \"0\");\n          }\n          // TODO needs to be scroll cell\n          requestScroll?.({ type: \"scroll-row\", rowIndex: cellPos[0] });\n          activeCell.focus({ preventScroll: true });\n        }\n      }\n    },\n    // TODO we recreate this function whenever viewportRange changes, which will\n    // be often whilst scrolling - store range in a a ref ?\n    [containerRef, requestScroll]\n  );\n\n  const setActiveCell = useCallback(\n    (rowIdx: number, colIdx: number, fromKeyboard = false) => {\n      const pos: CellPos = [rowIdx, colIdx];\n      activeCellPos.current = pos;\n      if (navigationStyle === \"row\") {\n        setHighlightedIdx(rowIdx);\n      } else {\n        focusCell(pos);\n      }\n      if (fromKeyboard) {\n        focusedCellPos.current = pos;\n      }\n    },\n    [focusCell, navigationStyle, setHighlightedIdx]\n  );\n\n  const nextPageItemIdx = useCallback(\n    (\n      key: \"PageDown\" | \"PageUp\" | \"Home\" | \"End\",\n      [rowIdx, colIdx]: CellPos\n    ): Promise<CellPos> =>\n      new Promise((resolve) => {\n        let newRowIdx = rowIdx;\n        switch (key) {\n          case \"PageDown\": {\n            newRowIdx = Math.min(rowCount - 1, rowIdx + viewportRowCount);\n            if (newRowIdx !== rowIdx) {\n              requestScroll?.({ type: \"scroll-page\", direction: \"down\" });\n            }\n            break;\n          }\n          case \"PageUp\": {\n            newRowIdx = Math.max(0, rowIdx - viewportRowCount);\n            if (newRowIdx !== rowIdx) {\n              requestScroll?.({ type: \"scroll-page\", direction: \"up\" });\n            }\n            break;\n          }\n          case \"Home\": {\n            newRowIdx = 0;\n            if (newRowIdx !== rowIdx) {\n              requestScroll?.({ type: \"scroll-end\", direction: \"home\" });\n            }\n            break;\n          }\n          case \"End\": {\n            newRowIdx = rowCount - 1;\n            if (newRowIdx !== rowIdx) {\n              requestScroll?.({ type: \"scroll-end\", direction: \"end\" });\n            }\n            break;\n          }\n        }\n        // Introduce a delay to allow the scroll operation to complete,\n        // which will trigger a range reset and rerender of rows. We\n        // might need to tweak how this works. If we introduce too big\n        // a delay, we risk seeing the newly rendered rows, with the focus\n        // still on the old cell, which will be apparent as a brief flash\n        // of the old cell focus before switching to correct cell. If we were\n        // to change the way re assign keys such that we can guarantee that\n        // when we page down, rows in same position get same keys, then same\n        // cell would be focussed in new page as previous and issue would not\n        // arise.\n        setTimeout(() => {\n          resolve([newRowIdx, colIdx]);\n        }, 35);\n      }),\n    [requestScroll, rowCount, viewportRowCount]\n  );\n\n  const handleFocus = useCallback(() => {\n    if (disableHighlightOnFocus !== true) {\n      if (containerRef.current?.contains(document.activeElement)) {\n        // IF focus arrives via keyboard, a cell will have received focus,\n        // we handle that here. If focus arrives via click on a cell with\n        // no tabindex (i.e all cells except one) we leave that to the\n        // click handler.\n        const focusedCell = getFocusedCell(document.activeElement);\n        if (focusedCell) {\n          focusedCellPos.current = getTableCellPos(focusedCell);\n          if (navigationStyle === \"row\") {\n            setHighlightedIdx(focusedCellPos.current[0]);\n          }\n        }\n      }\n    }\n  }, [\n    disableHighlightOnFocus,\n    containerRef,\n    navigationStyle,\n    setHighlightedIdx,\n  ]);\n\n  const navigateChildItems = useCallback(\n    async (key: NavigationKey) => {\n      const [nextRowIdx, nextColIdx] = isPagingKey(key)\n        ? await nextPageItemIdx(key, activeCellPos.current)\n        : nextCellPos(key, activeCellPos.current, columnCount, rowCount);\n      const [rowIdx, colIdx] = activeCellPos.current;\n      if (nextRowIdx !== rowIdx || nextColIdx !== colIdx) {\n        setActiveCell(nextRowIdx, nextColIdx, true);\n      }\n    },\n    [columnCount, nextPageItemIdx, rowCount, setActiveCell]\n  );\n\n  const scrollRowIntoViewIfNecessary = useCallback(\n    (rowIndex: number) => {\n      requestScroll?.({ type: \"scroll-row\", rowIndex });\n    },\n    [requestScroll]\n  );\n\n  const moveHighlightedRow = useCallback(\n    async (key: NavigationKey) => {\n      const { current: highlighted } = highlightedIndexRef;\n      const [nextRowIdx] = isPagingKey(key)\n        ? await nextPageItemIdx(key, [highlighted ?? -1, 0])\n        : nextCellPos(key, [highlighted ?? -1, 0], columnCount, rowCount);\n      if (nextRowIdx !== highlighted) {\n        setHighlightedIndex(nextRowIdx);\n        // TO(DO make this a scroll request)\n        scrollRowIntoViewIfNecessary(nextRowIdx);\n      }\n    },\n    [\n      columnCount,\n      nextPageItemIdx,\n      rowCount,\n      scrollRowIntoViewIfNecessary,\n      setHighlightedIndex,\n    ]\n  );\n\n  useEffect(() => {\n    if (highlightedIndexProp !== undefined && highlightedIndexProp !== -1) {\n      scrollRowIntoViewIfNecessary(highlightedIndexProp);\n    }\n  }, [highlightedIndexProp, scrollRowIntoViewIfNecessary]);\n\n  const handleKeyDown = useCallback(\n    (e: KeyboardEvent) => {\n      if (rowCount > 0 && isNavigationKey(e.key, navigationStyle)) {\n        e.preventDefault();\n        e.stopPropagation();\n        if (navigationStyle === \"row\") {\n          moveHighlightedRow(e.key);\n        } else {\n          void navigateChildItems(e.key);\n        }\n      }\n    },\n    [rowCount, navigationStyle, moveHighlightedRow, navigateChildItems]\n  );\n\n  const handleClick = useCallback(\n    // Might not be a cell e.g the Settings button\n    (evt: MouseEvent) => {\n      const target = evt.target as HTMLElement;\n      const focusedCell = getFocusedCell(target);\n      if (focusedCell) {\n        const [rowIdx, colIdx] = getTableCellPos(focusedCell);\n        setActiveCell(rowIdx, colIdx);\n      }\n    },\n    [setActiveCell]\n  );\n\n  const handleMouseLeave = useCallback(() => {\n    setHighlightedIndex(-1);\n  }, [setHighlightedIndex]);\n\n  const handleMouseMove = useCallback(\n    (evt: MouseEvent) => {\n      const idx = closestRowIndex(evt.target as HTMLElement);\n      if (idx !== -1 && idx !== highlightedIndexRef.current) {\n        setHighlightedIndex(idx);\n      }\n    },\n    [setHighlightedIndex]\n  );\n\n  const navigate = useCallback(() => {\n    navigateChildItems(\"ArrowDown\");\n  }, [navigateChildItems]);\n\n  // First render will only render the outer container when explicit\n  // sizing has not been provided. Outer container is measured and\n  // only then, on second render,  is content rendered.\n  const fullyRendered = containerRef.current?.firstChild != null;\n  useEffect(() => {\n    if (fullyRendered && focusableCell.current === undefined && !disableFocus) {\n      const { current: container } = containerRef;\n      const cell = (container?.querySelector(headerCellQuery(0)) ||\n        container?.querySelector(dataCellQuery(0, 0))) as HTMLElement;\n      if (cell) {\n        cell.setAttribute(\"tabindex\", \"0\");\n        focusableCell.current = cell;\n      }\n    }\n  }, [containerRef, disableFocus, fullyRendered]);\n\n  return {\n    highlightedIndexRef,\n    navigate,\n    onClick: handleClick,\n    onFocus: handleFocus,\n    onKeyDown: handleKeyDown,\n    onMouseLeave: navigationStyle === \"row\" ? handleMouseLeave : undefined,\n    onMouseMove: navigationStyle === \"row\" ? handleMouseMove : undefined,\n  };\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"useKeyboardNavigation.js","sources":["../src/useKeyboardNavigation.ts"],"sourcesContent":["import { VuuRange } from \"@vuu-ui/vuu-protocol-types\";\nimport { getIndexFromRowElement, queryClosest } from \"@vuu-ui/vuu-utils\";\nimport { useControlled } from \"@salt-ds/core\";\nimport {\n  KeyboardEvent,\n  MouseEvent,\n  RefObject,\n  useCallback,\n  useEffect,\n  useRef,\n} from \"react\";\nimport { TableNavigationStyle } from \"./Table\";\nimport {\n  CellPos,\n  cellDropdownShowing,\n  closestRowIndex,\n  dataCellQuery,\n  getTableCell,\n  headerCellQuery,\n} from \"./table-dom-utils\";\nimport { ScrollRequestHandler } from \"./useTableScroll\";\n\nconst rowNavigationKeys = new Set<NavigationKey>([\n  \"Home\",\n  \"End\",\n  \"PageUp\",\n  \"PageDown\",\n  \"ArrowDown\",\n  \"ArrowUp\",\n]);\n\nconst cellNavigationKeys = new Set(rowNavigationKeys);\ncellNavigationKeys.add(\"ArrowLeft\");\ncellNavigationKeys.add(\"ArrowRight\");\n\nexport const isNavigationKey = (\n  key: string,\n  navigationStyle: TableNavigationStyle\n): key is NavigationKey => {\n  switch (navigationStyle) {\n    case \"cell\":\n      return cellNavigationKeys.has(key as NavigationKey);\n    case \"row\":\n      return rowNavigationKeys.has(key as NavigationKey);\n    default:\n      return false;\n  }\n};\n\ntype ArrowKey = \"ArrowUp\" | \"ArrowDown\" | \"ArrowLeft\" | \"ArrowRight\";\ntype PageKey = \"Home\" | \"End\" | \"PageUp\" | \"PageDown\";\ntype NavigationKey = PageKey | ArrowKey;\n\nconst PageKeys = [\"Home\", \"End\", \"PageUp\", \"PageDown\"];\nexport const isPagingKey = (key: string): key is PageKey =>\n  PageKeys.includes(key);\n\nconst NULL_CELL_POS: CellPos = [-1, -1];\n\nfunction nextCellPos(\n  key: ArrowKey,\n  [rowIdx, colIdx]: CellPos,\n  columnCount: number,\n  rowCount: 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 [0, colIdx];\n    } else if (rowIdx === rowCount - 1) {\n      return [rowIdx, colIdx];\n    } else {\n      return [rowIdx + 1, colIdx];\n    }\n  } else if (key === \"ArrowRight\") {\n    // The colIdx is 1 based, because of the selection decorator\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 interface NavigationHookProps {\n  containerRef: RefObject<HTMLElement>;\n  columnCount?: number;\n  defaultHighlightedIndex?: number;\n  disableFocus?: boolean;\n  disableHighlightOnFocus?: boolean;\n  highlightedIndex?: number;\n  label?: string;\n  navigationStyle: TableNavigationStyle;\n  viewportRange: VuuRange;\n  onHighlight?: (idx: number) => void;\n  requestScroll?: ScrollRequestHandler;\n  restoreLastFocus?: boolean;\n  rowCount?: number;\n  selected?: unknown;\n  viewportRowCount: number;\n}\n\nexport const useKeyboardNavigation = ({\n  columnCount = 0,\n  containerRef,\n  disableFocus = false,\n  defaultHighlightedIndex,\n  disableHighlightOnFocus,\n  highlightedIndex: highlightedIndexProp,\n  navigationStyle,\n  requestScroll,\n  onHighlight,\n  rowCount = 0,\n  viewportRowCount,\n}: // viewportRange,\nNavigationHookProps) => {\n  // const { from: viewportFirstRow, to: viewportLastRow } = viewportRange;\n  const focusedCellPos = useRef<CellPos>([-1, -1]);\n  const focusableCell = useRef<HTMLElement>();\n  const activeCellPos = useRef<CellPos>([-1, 0]);\n  // Keep this in sync with state value. This can be used by functions that need\n  // to reference highlightedIndex at call time but do not need to be regenerated\n  // every time it changes (i.e keep highlightedIndex out of their dependency\n  // arrays, as it can update frequently)\n  const highlightedIndexRef = useRef<number | undefined>();\n\n  const [highlightedIndex, setHighlightedIdx] = useControlled({\n    controlled: highlightedIndexProp,\n    default: defaultHighlightedIndex,\n    name: \"UseKeyboardNavigation\",\n  });\n  highlightedIndexRef.current = highlightedIndex;\n  const setHighlightedIndex = useCallback(\n    (idx: number, fromKeyboard = false) => {\n      onHighlight?.(idx);\n      setHighlightedIdx(idx);\n      if (fromKeyboard) {\n        // lastFocus.current = idx;\n      }\n    },\n    [onHighlight, setHighlightedIdx]\n  );\n\n  const getFocusedCell = (element: HTMLElement | Element | null) =>\n    element?.closest(\n      \"[role='columnHeader'],[role='cell']\"\n    ) as HTMLDivElement | null;\n\n  const getTableCellPos = (tableCell: HTMLDivElement): CellPos => {\n    if (tableCell.role === \"columnHeader\") {\n      const colIdx = parseInt(tableCell.dataset.idx ?? \"-1\", 10);\n      return [-1, colIdx];\n    } else {\n      const focusedRow = tableCell.closest(\"[role='row']\") as HTMLElement;\n      if (focusedRow) {\n        const rowIdx = getIndexFromRowElement(focusedRow);\n        // TODO will get trickier when we introduce horizontal virtualisation\n        const colIdx = Array.from(focusedRow.childNodes).indexOf(tableCell);\n        return [rowIdx, colIdx];\n      }\n    }\n    return NULL_CELL_POS;\n  };\n\n  const focusCell = useCallback(\n    (cellPos: CellPos) => {\n      if (containerRef.current) {\n        const activeCell = getTableCell(containerRef, cellPos);\n        if (activeCell) {\n          if (activeCell !== focusableCell.current) {\n            focusableCell.current?.removeAttribute(\"tabindex\");\n            focusableCell.current = activeCell;\n            activeCell.setAttribute(\"tabindex\", \"0\");\n          }\n          // TODO needs to be scroll cell\n          requestScroll?.({ type: \"scroll-row\", rowIndex: cellPos[0] });\n          activeCell.focus({ preventScroll: true });\n        }\n      }\n    },\n    // TODO we recreate this function whenever viewportRange changes, which will\n    // be often whilst scrolling - store range in a a ref ?\n    [containerRef, requestScroll]\n  );\n\n  const setActiveCell = useCallback(\n    (rowIdx: number, colIdx: number, fromKeyboard = false) => {\n      const pos: CellPos = [rowIdx, colIdx];\n      activeCellPos.current = pos;\n      if (navigationStyle === \"row\") {\n        setHighlightedIdx(rowIdx);\n      } else {\n        focusCell(pos);\n      }\n      if (fromKeyboard) {\n        focusedCellPos.current = pos;\n      }\n    },\n    [focusCell, navigationStyle, setHighlightedIdx]\n  );\n\n  const nextPageItemIdx = useCallback(\n    (\n      key: \"PageDown\" | \"PageUp\" | \"Home\" | \"End\",\n      [rowIdx, colIdx]: CellPos\n    ): Promise<CellPos> =>\n      new Promise((resolve) => {\n        let newRowIdx = rowIdx;\n        switch (key) {\n          case \"PageDown\": {\n            newRowIdx = Math.min(rowCount - 1, rowIdx + viewportRowCount);\n            if (newRowIdx !== rowIdx) {\n              requestScroll?.({ type: \"scroll-page\", direction: \"down\" });\n            }\n            break;\n          }\n          case \"PageUp\": {\n            newRowIdx = Math.max(0, rowIdx - viewportRowCount);\n            if (newRowIdx !== rowIdx) {\n              requestScroll?.({ type: \"scroll-page\", direction: \"up\" });\n            }\n            break;\n          }\n          case \"Home\": {\n            newRowIdx = 0;\n            if (newRowIdx !== rowIdx) {\n              requestScroll?.({ type: \"scroll-end\", direction: \"home\" });\n            }\n            break;\n          }\n          case \"End\": {\n            newRowIdx = rowCount - 1;\n            if (newRowIdx !== rowIdx) {\n              requestScroll?.({ type: \"scroll-end\", direction: \"end\" });\n            }\n            break;\n          }\n        }\n        // Introduce a delay to allow the scroll operation to complete,\n        // which will trigger a range reset and rerender of rows. We\n        // might need to tweak how this works. If we introduce too big\n        // a delay, we risk seeing the newly rendered rows, with the focus\n        // still on the old cell, which will be apparent as a brief flash\n        // of the old cell focus before switching to correct cell. If we were\n        // to change the way re assign keys such that we can guarantee that\n        // when we page down, rows in same position get same keys, then same\n        // cell would be focussed in new page as previous and issue would not\n        // arise.\n        setTimeout(() => {\n          resolve([newRowIdx, colIdx]);\n        }, 35);\n      }),\n    [requestScroll, rowCount, viewportRowCount]\n  );\n\n  const handleFocus = useCallback(() => {\n    if (disableHighlightOnFocus !== true) {\n      if (containerRef.current?.contains(document.activeElement)) {\n        // IF focus arrives via keyboard, a cell will have received focus,\n        // we handle that here. If focus arrives via click on a cell with\n        // no tabindex (i.e all cells except one) we leave that to the\n        // click handler.\n        const focusedCell = getFocusedCell(document.activeElement);\n        if (focusedCell) {\n          focusedCellPos.current = getTableCellPos(focusedCell);\n          if (navigationStyle === \"row\") {\n            setHighlightedIdx(focusedCellPos.current[0]);\n          }\n        }\n      }\n    }\n  }, [\n    disableHighlightOnFocus,\n    containerRef,\n    navigationStyle,\n    setHighlightedIdx,\n  ]);\n\n  const navigateChildItems = useCallback(\n    async (key: NavigationKey) => {\n      const [nextRowIdx, nextColIdx] = isPagingKey(key)\n        ? await nextPageItemIdx(key, activeCellPos.current)\n        : nextCellPos(key, activeCellPos.current, columnCount, rowCount);\n      const [rowIdx, colIdx] = activeCellPos.current;\n      if (nextRowIdx !== rowIdx || nextColIdx !== colIdx) {\n        setActiveCell(nextRowIdx, nextColIdx, true);\n      }\n    },\n    [columnCount, nextPageItemIdx, rowCount, setActiveCell]\n  );\n\n  const scrollRowIntoViewIfNecessary = useCallback(\n    (rowIndex: number) => {\n      requestScroll?.({ type: \"scroll-row\", rowIndex });\n    },\n    [requestScroll]\n  );\n\n  const moveHighlightedRow = useCallback(\n    async (key: NavigationKey) => {\n      const { current: highlighted } = highlightedIndexRef;\n      const [nextRowIdx] = isPagingKey(key)\n        ? await nextPageItemIdx(key, [highlighted ?? -1, 0])\n        : nextCellPos(key, [highlighted ?? -1, 0], columnCount, rowCount);\n      if (nextRowIdx !== highlighted) {\n        setHighlightedIndex(nextRowIdx);\n        // TO(DO make this a scroll request)\n        scrollRowIntoViewIfNecessary(nextRowIdx);\n      }\n    },\n    [\n      columnCount,\n      nextPageItemIdx,\n      rowCount,\n      scrollRowIntoViewIfNecessary,\n      setHighlightedIndex,\n    ]\n  );\n\n  useEffect(() => {\n    if (highlightedIndexProp !== undefined && highlightedIndexProp !== -1) {\n      scrollRowIntoViewIfNecessary(highlightedIndexProp);\n    }\n  }, [highlightedIndexProp, scrollRowIntoViewIfNecessary]);\n\n  const handleKeyDown = useCallback(\n    (e: KeyboardEvent) => {\n      const cell = queryClosest<HTMLDivElement>(e.target, \".vuuTableCell\");\n      if (cellDropdownShowing(cell)) {\n        return;\n      }\n      if (rowCount > 0 && isNavigationKey(e.key, navigationStyle)) {\n        e.preventDefault();\n        e.stopPropagation();\n        if (navigationStyle === \"row\") {\n          moveHighlightedRow(e.key);\n        } else {\n          void navigateChildItems(e.key);\n        }\n      }\n    },\n    [rowCount, navigationStyle, moveHighlightedRow, navigateChildItems]\n  );\n\n  const handleClick = useCallback(\n    // Might not be a cell e.g the Settings button\n    (evt: MouseEvent) => {\n      const target = evt.target as HTMLElement;\n      const focusedCell = getFocusedCell(target);\n      if (focusedCell) {\n        const [rowIdx, colIdx] = getTableCellPos(focusedCell);\n        setActiveCell(rowIdx, colIdx);\n      }\n    },\n    [setActiveCell]\n  );\n\n  const handleMouseLeave = useCallback(() => {\n    setHighlightedIndex(-1);\n  }, [setHighlightedIndex]);\n\n  const handleMouseMove = useCallback(\n    (evt: MouseEvent) => {\n      const idx = closestRowIndex(evt.target as HTMLElement);\n      if (idx !== -1 && idx !== highlightedIndexRef.current) {\n        setHighlightedIndex(idx);\n      }\n    },\n    [setHighlightedIndex]\n  );\n\n  const navigate = useCallback(() => {\n    navigateChildItems(\"ArrowDown\");\n  }, [navigateChildItems]);\n\n  // First render will only render the outer container when explicit\n  // sizing has not been provided. Outer container is measured and\n  // only then, on second render,  is content rendered.\n  const fullyRendered = containerRef.current?.firstChild != null;\n  useEffect(() => {\n    if (fullyRendered && focusableCell.current === undefined && !disableFocus) {\n      const { current: container } = containerRef;\n      const cell = (container?.querySelector(headerCellQuery(0)) ||\n        container?.querySelector(dataCellQuery(0, 0))) as HTMLElement;\n      if (cell) {\n        cell.setAttribute(\"tabindex\", \"0\");\n        focusableCell.current = cell;\n      }\n    }\n  }, [containerRef, disableFocus, fullyRendered]);\n\n  return {\n    highlightedIndexRef,\n    navigate,\n    onClick: handleClick,\n    onFocus: handleFocus,\n    onKeyDown: handleKeyDown,\n    onMouseLeave: navigationStyle === \"row\" ? handleMouseLeave : undefined,\n    onMouseMove: navigationStyle === \"row\" ? handleMouseMove : undefined,\n  };\n};\n"],"names":[],"mappings":"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"}

package/esm/{useRowHeight.js → useMeasuredHeight.js}

@@ -1,30 +1,28 @@
 import { isValidNumber } from '@vuu-ui/vuu-utils';
-import { useState, useRef, useMemo, useCallback } from 'react';
+import { useState, useMemo, useCallback } from 'react';
 
-const useRowHeight = ({
-  rowHeight: rowHeightProp = 0
+const useMeasuredHeight = ({
+  onHeightMeasured,
+  height: heightProp = 0
 }) => {
-  const [rowHeight, setRowHeight] = useState(rowHeightProp);
-  const heightRef = useRef(rowHeight);
+  const [rowHeight, setRowHeight] = useState(heightProp);
   const resizeObserver = useMemo(() => {
     return new ResizeObserver((entries) => {
       for (const entry of entries) {
         const [{ blockSize: measuredSize }] = entry.borderBoxSize;
         const newHeight = Math.round(measuredSize);
-        if (isValidNumber(newHeight) && heightRef.current !== newHeight) {
-          heightRef.current = newHeight;
+        if (isValidNumber(newHeight)) {
           setRowHeight(newHeight);
+          onHeightMeasured?.(newHeight);
         }
       }
     });
-  }, []);
+  }, [onHeightMeasured]);
   const rowRef = useCallback(
     (el) => {
       if (el) {
-        if (rowHeightProp === 0) {
+        if (heightProp === 0) {
           const { height } = el.getBoundingClientRect();
-          console.log({ boundingClientHeight: height });
-          console.log(`measured rowHeight = ${height} (${rowHeightProp})`);
           resizeObserver.observe(el);
           setRowHeight(height);
         }
@@ -32,10 +30,10 @@ const useRowHeight = ({
         resizeObserver.disconnect();
       }
     },
-    [resizeObserver, rowHeightProp]
+    [resizeObserver, heightProp]
   );
   return { rowHeight, rowRef };
 };
 
-export { useRowHeight };
-//# sourceMappingURL=useRowHeight.js.map
+export { useMeasuredHeight };
+//# sourceMappingURL=useMeasuredHeight.js.map

package/esm/useMeasuredHeight.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useMeasuredHeight.js","sources":["../src/useMeasuredHeight.ts"],"sourcesContent":["import { isValidNumber } from \"@vuu-ui/vuu-utils\";\nimport { RefCallback, useCallback, useMemo, useState } from \"react\";\n\ninterface MeasuredHeightHookProps {\n  onHeightMeasured?: (height: number) => void;\n  height?: number;\n}\n\nexport const useMeasuredHeight = ({\n  onHeightMeasured,\n  height: heightProp = 0,\n}: MeasuredHeightHookProps) => {\n  const [rowHeight, setRowHeight] = useState(heightProp);\n\n  const resizeObserver = useMemo(() => {\n    return new ResizeObserver((entries: ResizeObserverEntry[]) => {\n      for (const entry of entries) {\n        const [{ blockSize: measuredSize }] = entry.borderBoxSize;\n        const newHeight = Math.round(measuredSize);\n        if (isValidNumber(newHeight)) {\n          setRowHeight(newHeight);\n          onHeightMeasured?.(newHeight);\n        }\n      }\n    });\n  }, [onHeightMeasured]);\n\n  const rowRef = useCallback<RefCallback<HTMLDivElement>>(\n    (el) => {\n      if (el) {\n        if (heightProp === 0) {\n          const { height } = el.getBoundingClientRect();\n          resizeObserver.observe(el);\n          setRowHeight(height);\n        }\n      } else {\n        resizeObserver.disconnect();\n      }\n    },\n    [resizeObserver, heightProp]\n  );\n  return { rowHeight, rowRef };\n};\n"],"names":[],"mappings":";;;AAQO,MAAM,oBAAoB,CAAC;AAAA,EAChC,gBAAA;AAAA,EACA,QAAQ,UAAa,GAAA,CAAA;AACvB,CAA+B,KAAA;AAC7B,EAAA,MAAM,CAAC,SAAA,EAAW,YAAY,CAAA,GAAI,SAAS,UAAU,CAAA,CAAA;AAErD,EAAM,MAAA,cAAA,GAAiB,QAAQ,MAAM;AACnC,IAAO,OAAA,IAAI,cAAe,CAAA,CAAC,OAAmC,KAAA;AAC5D,MAAA,KAAA,MAAW,SAAS,OAAS,EAAA;AAC3B,QAAA,MAAM,CAAC,EAAE,SAAA,EAAW,YAAa,EAAC,IAAI,KAAM,CAAA,aAAA,CAAA;AAC5C,QAAM,MAAA,SAAA,GAAY,IAAK,CAAA,KAAA,CAAM,YAAY,CAAA,CAAA;AACzC,QAAI,IAAA,aAAA,CAAc,SAAS,CAAG,EAAA;AAC5B,UAAA,YAAA,CAAa,SAAS,CAAA,CAAA;AACtB,UAAA,gBAAA,GAAmB,SAAS,CAAA,CAAA;AAAA,SAC9B;AAAA,OACF;AAAA,KACD,CAAA,CAAA;AAAA,GACH,EAAG,CAAC,gBAAgB,CAAC,CAAA,CAAA;AAErB,EAAA,MAAM,MAAS,GAAA,WAAA;AAAA,IACb,CAAC,EAAO,KAAA;AACN,MAAA,IAAI,EAAI,EAAA;AACN,QAAA,IAAI,eAAe,CAAG,EAAA;AACpB,UAAA,MAAM,EAAE,MAAA,EAAW,GAAA,EAAA,CAAG,qBAAsB,EAAA,CAAA;AAC5C,UAAA,cAAA,CAAe,QAAQ,EAAE,CAAA,CAAA;AACzB,UAAA,YAAA,CAAa,MAAM,CAAA,CAAA;AAAA,SACrB;AAAA,OACK,MAAA;AACL,QAAA,cAAA,CAAe,UAAW,EAAA,CAAA;AAAA,OAC5B;AAAA,KACF;AAAA,IACA,CAAC,gBAAgB,UAAU,CAAA;AAAA,GAC7B,CAAA;AACA,EAAO,OAAA,EAAE,WAAW,MAAO,EAAA,CAAA;AAC7B;;;;"}