@salt-ds/data-grid 0.0.0-snapshot-20230620094559

package/dist-cjs/internal/FakeCell.js

@@ -0,0 +1,27 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var window = require('@salt-ds/window');
+var styles = require('@salt-ds/styles');
+var Cell = require('./Cell.js');
+var FakeCell$1 = require('./FakeCell.css.js');
+
+function FakeCell(props) {
+  const { row } = props;
+  const targetWindow = window.useWindow();
+  styles.useComponentCssInjection({
+    testId: "salt-fake-cell",
+    css: FakeCell$1,
+    window: targetWindow
+  });
+  return /* @__PURE__ */ jsxRuntime.jsx(Cell.Cell, {
+    className: "saltGridFakeCell",
+    "data-row-index": row.index,
+    "data-column-index": -1
+  });
+}
+
+exports.FakeCell = FakeCell;
+//# sourceMappingURL=FakeCell.js.map

package/dist-cjs/internal/FakeCell.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FakeCell.js","sources":["../src/internal/FakeCell.tsx"],"sourcesContent":["import { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nimport { GridCellProps } from \"../GridColumn\";\n\nimport { Cell } from \"./Cell\";\n\nimport fakeCellCss from \"./FakeCell.css\";\n\nexport type FakeCellProps<T> = Pick<GridCellProps<T>, \"row\">;\n\n// When there is unused space (total width of all columns is less than the\n// available client width of the grid) a column with fake cells is rendered to\n// fill this space. Zebra and row selection/hover highlighting is applied to\n// this column. Fake cells can't have keyboard focus or render any values.\nexport function FakeCell<T>(props: FakeCellProps<T>) {\n  const { row } = props;\n\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-fake-cell\",\n    css: fakeCellCss,\n    window: targetWindow,\n  });\n\n  return (\n    <Cell\n      className=\"saltGridFakeCell\"\n      data-row-index={row.index}\n      data-column-index={-1}\n    />\n  );\n}\n"],"names":["useWindow","useComponentCssInjection","fakeCellCss","jsx","Cell"],"mappings":";;;;;;;;;;AAeO,SAAS,SAAY,KAAyB,EAAA;AACnD,EAAM,MAAA,EAAE,KAAQ,GAAA,KAAA,CAAA;AAEhB,EAAA,MAAM,eAAeA,gBAAU,EAAA,CAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,gBAAA;AAAA,IACR,GAAK,EAAAC,UAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAA,uBACGC,cAAA,CAAAC,SAAA,EAAA;AAAA,IACC,SAAU,EAAA,kBAAA;AAAA,IACV,kBAAgB,GAAI,CAAA,KAAA;AAAA,IACpB,mBAAmB,EAAA,CAAA,CAAA;AAAA,GACrB,CAAA,CAAA;AAEJ;;;;"}

package/dist-cjs/internal/FakeGroupCell.js

@@ -0,0 +1,12 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+
+function FakeGroupCell() {
+  return /* @__PURE__ */ jsxRuntime.jsx("th", {});
+}
+
+exports.FakeGroupCell = FakeGroupCell;
+//# sourceMappingURL=FakeGroupCell.js.map

package/dist-cjs/internal/FakeGroupCell.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FakeGroupCell.js","sources":["../src/internal/FakeGroupCell.tsx"],"sourcesContent":["export function FakeGroupCell() {\n  return <th />;\n}\n"],"names":[],"mappings":";;;;;;AAAO,SAAS,aAAgB,GAAA;AAC9B,EAAA,sCAAQ,IAAG,EAAA,EAAA,CAAA,CAAA;AACb;;;;"}

package/dist-cjs/internal/FakeHeaderCell.js

@@ -0,0 +1,14 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+
+function FakeHeaderCell() {
+  return /* @__PURE__ */ jsxRuntime.jsx("th", {
+    "data-testid": "grid-fake-column-header"
+  });
+}
+
+exports.FakeHeaderCell = FakeHeaderCell;
+//# sourceMappingURL=FakeHeaderCell.js.map

package/dist-cjs/internal/FakeHeaderCell.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FakeHeaderCell.js","sources":["../src/internal/FakeHeaderCell.tsx"],"sourcesContent":["// See FakeCell.tsx\nexport function FakeHeaderCell() {\n  return <th data-testid=\"grid-fake-column-header\" />;\n}\n"],"names":["jsx"],"mappings":";;;;;;AACO,SAAS,cAAiB,GAAA;AAC/B,EAAA,uBAAQA,cAAA,CAAA,IAAA,EAAA;AAAA,IAAG,aAAY,EAAA,yBAAA;AAAA,GAA0B,CAAA,CAAA;AACnD;;;;"}

package/dist-cjs/internal/GroupHeaderRow.css.js

@@ -0,0 +1,6 @@
+'use strict';
+
+var css_248z = ".saltGridGroupHeaderRow {\n  height: var(--grid-row-height);\n}\n";
+
+module.exports = css_248z;
+//# sourceMappingURL=GroupHeaderRow.css.js.map

package/dist-cjs/internal/GroupHeaderRow.css.js.map

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

package/dist-cjs/internal/GroupHeaderRow.js

@@ -0,0 +1,46 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var core = require('@salt-ds/core');
+var window = require('@salt-ds/window');
+var styles = require('@salt-ds/styles');
+var GroupHeaderCell = require('../GroupHeaderCell.js');
+var GroupHeaderCellValue = require('../GroupHeaderCellValue.js');
+var FakeGroupCell = require('./FakeGroupCell.js');
+var GroupHeaderRow$1 = require('./GroupHeaderRow.css.js');
+
+const withBaseName = core.makePrefixer("saltGridGroupHeaderRow");
+function GroupHeaderRow(props) {
+  const { groups, gap } = props;
+  const targetWindow = window.useWindow();
+  styles.useComponentCssInjection({
+    testId: "salt-group-header-row",
+    css: GroupHeaderRow$1,
+    window: targetWindow
+  });
+  if (groups.length === 0) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs("tr", {
+    className: withBaseName(),
+    role: "row",
+    children: [
+      groups.map((group) => {
+        const Cell = group.data.headerComponent || GroupHeaderCell.GroupHeaderCell;
+        const CellValue = group.data.headerValueComponent || GroupHeaderCellValue.GroupHeaderCellValue;
+        return /* @__PURE__ */ jsxRuntime.jsx(Cell, {
+          group,
+          children: /* @__PURE__ */ jsxRuntime.jsx(CellValue, {
+            group
+          })
+        }, group.data.id);
+      }),
+      gap !== void 0 && gap > 0 ? /* @__PURE__ */ jsxRuntime.jsx(FakeGroupCell.FakeGroupCell, {}) : null
+    ]
+  });
+}
+
+exports.GroupHeaderRow = GroupHeaderRow;
+//# sourceMappingURL=GroupHeaderRow.js.map

package/dist-cjs/internal/GroupHeaderRow.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GroupHeaderRow.js","sources":["../src/internal/GroupHeaderRow.tsx"],"sourcesContent":["import { makePrefixer } from \"@salt-ds/core\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nimport { GroupHeaderCell } from \"../GroupHeaderCell\";\nimport { GridColumnGroupModel } from \"../Grid\";\nimport { GroupHeaderCellValue } from \"../GroupHeaderCellValue\";\n\nimport { FakeGroupCell } from \"./FakeGroupCell\";\n\nimport groupHeaderRowCss from \"./GroupHeaderRow.css\";\n\nconst withBaseName = makePrefixer(\"saltGridGroupHeaderRow\");\n\nexport interface GroupHeaderRowProps<T> {\n  groups: GridColumnGroupModel[];\n  gap?: number;\n}\n\nexport function GroupHeaderRow<T>(props: GroupHeaderRowProps<T>) {\n  const { groups, gap } = props;\n\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-group-header-row\",\n    css: groupHeaderRowCss,\n    window: targetWindow,\n  });\n\n  if (groups.length === 0) {\n    return null;\n  }\n  return (\n    <tr className={withBaseName()} role=\"row\">\n      {groups.map((group) => {\n        const Cell = group.data.headerComponent || GroupHeaderCell;\n        const CellValue =\n          group.data.headerValueComponent || GroupHeaderCellValue;\n        return (\n          <Cell key={group.data.id} group={group}>\n            <CellValue group={group} />\n          </Cell>\n        );\n      })}\n      {gap !== undefined && gap > 0 ? <FakeGroupCell /> : null}\n    </tr>\n  );\n}\n"],"names":["makePrefixer","useWindow","useComponentCssInjection","groupHeaderRowCss","jsxs","GroupHeaderCell","GroupHeaderCellValue","jsx","FakeGroupCell"],"mappings":";;;;;;;;;;;;;AAYA,MAAM,YAAA,GAAeA,kBAAa,wBAAwB,CAAA,CAAA;AAOnD,SAAS,eAAkB,KAA+B,EAAA;AAC/D,EAAM,MAAA,EAAE,MAAQ,EAAA,GAAA,EAAQ,GAAA,KAAA,CAAA;AAExB,EAAA,MAAM,eAAeC,gBAAU,EAAA,CAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,uBAAA;AAAA,IACR,GAAK,EAAAC,gBAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAI,IAAA,MAAA,CAAO,WAAW,CAAG,EAAA;AACvB,IAAO,OAAA,IAAA,CAAA;AAAA,GACT;AACA,EAAA,uBACGC,eAAA,CAAA,IAAA,EAAA;AAAA,IAAG,WAAW,YAAa,EAAA;AAAA,IAAG,IAAK,EAAA,KAAA;AAAA,IACjC,QAAA,EAAA;AAAA,MAAO,MAAA,CAAA,GAAA,CAAI,CAAC,KAAU,KAAA;AACrB,QAAM,MAAA,IAAA,GAAO,KAAM,CAAA,IAAA,CAAK,eAAmB,IAAAC,+BAAA,CAAA;AAC3C,QAAM,MAAA,SAAA,GACJ,KAAM,CAAA,IAAA,CAAK,oBAAwB,IAAAC,yCAAA,CAAA;AACrC,QAAA,uBACGC,cAAA,CAAA,IAAA,EAAA;AAAA,UAAyB,KAAA;AAAA,UACxB,QAAC,kBAAAA,cAAA,CAAA,SAAA,EAAA;AAAA,YAAU,KAAA;AAAA,WAAc,CAAA;AAAA,SADhB,EAAA,KAAA,CAAM,KAAK,EAEtB,CAAA,CAAA;AAAA,OAEH,CAAA;AAAA,MACA,QAAQ,KAAa,CAAA,IAAA,GAAA,GAAM,CAAI,mBAAAA,cAAA,CAACC,+BAAc,CAAK,GAAA,IAAA;AAAA,KAAA;AAAA,GACtD,CAAA,CAAA;AAEJ;;;;"}

package/dist-cjs/internal/HeaderRow.css.js

@@ -0,0 +1,6 @@
+'use strict';
+
+var css_248z = ".saltGridHeaderRow {\n  height: var(--grid-row-height);\n}\n\n.saltGridHeaderRow th {\n  border-style: solid;\n  border-color: var(--grid-headerRowSeparator-color);\n  border-width: 0 0 var(--grid-headerRowSeparator-height) 0;\n}\n";
+
+module.exports = css_248z;
+//# sourceMappingURL=HeaderRow.css.js.map

package/dist-cjs/internal/HeaderRow.css.js.map

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

package/dist-cjs/internal/HeaderRow.js

@@ -0,0 +1,50 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var core = require('@salt-ds/core');
+var window = require('@salt-ds/window');
+var styles = require('@salt-ds/styles');
+var HeaderCell = require('../HeaderCell.js');
+var HeaderCellValue = require('../HeaderCellValue.js');
+var CursorContext = require('../CursorContext.js');
+var FakeHeaderCell = require('./FakeHeaderCell.js');
+var HeaderRow$1 = require('./HeaderRow.css.js');
+
+const withBaseName = core.makePrefixer("saltGridHeaderRow");
+function HeaderRow(props) {
+  const { columns, gap } = props;
+  const targetWindow = window.useWindow();
+  styles.useComponentCssInjection({
+    testId: "salt-header-row",
+    css: HeaderRow$1,
+    window: targetWindow
+  });
+  const { cursorColIdx, focusedPart, headerIsFocusable } = CursorContext.useCursorContext();
+  const ariaRowIndex = headerIsFocusable ? 1 : void 0;
+  return /* @__PURE__ */ jsxRuntime.jsxs("tr", {
+    className: withBaseName(),
+    role: "row",
+    "aria-rowindex": ariaRowIndex,
+    children: [
+      columns.map((column) => {
+        const Cell = column.info.props.headerComponent || HeaderCell.HeaderCell;
+        const CellValue = column.info.props.headerValueComponent || HeaderCellValue.HeaderCellValue;
+        const isFocused = focusedPart === "header" && cursorColIdx === column.index;
+        return /* @__PURE__ */ jsxRuntime.jsx(Cell, {
+          column,
+          isFocused,
+          children: /* @__PURE__ */ jsxRuntime.jsx(CellValue, {
+            column,
+            isFocused
+          })
+        }, column.info.props.id);
+      }),
+      gap !== void 0 && gap > 0 ? /* @__PURE__ */ jsxRuntime.jsx(FakeHeaderCell.FakeHeaderCell, {}) : null
+    ]
+  });
+}
+
+exports.HeaderRow = HeaderRow;
+//# sourceMappingURL=HeaderRow.js.map

package/dist-cjs/internal/HeaderRow.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"HeaderRow.js","sources":["../src/internal/HeaderRow.tsx"],"sourcesContent":["import { makePrefixer } from \"@salt-ds/core\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nimport { GridColumnModel } from \"../Grid\";\nimport { HeaderCell } from \"../HeaderCell\";\nimport { HeaderCellValue } from \"../HeaderCellValue\";\nimport { useCursorContext } from \"../CursorContext\";\n\nimport { FakeHeaderCell } from \"./FakeHeaderCell\";\n\nimport headerRowCss from \"./HeaderRow.css\";\n\nconst withBaseName = makePrefixer(\"saltGridHeaderRow\");\n\nexport interface HeaderRowProps<T> {\n  columns: GridColumnModel<T>[];\n  gap?: number;\n}\n\nexport function HeaderRow<T>(props: HeaderRowProps<T>) {\n  const { columns, gap } = props;\n\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-header-row\",\n    css: headerRowCss,\n    window: targetWindow,\n  });\n\n  const { cursorColIdx, focusedPart, headerIsFocusable } = useCursorContext();\n\n  const ariaRowIndex = headerIsFocusable ? 1 : undefined;\n\n  return (\n    <tr className={withBaseName()} role=\"row\" aria-rowindex={ariaRowIndex}>\n      {columns.map((column) => {\n        const Cell = column.info.props.headerComponent || HeaderCell;\n        const CellValue =\n          column.info.props.headerValueComponent || HeaderCellValue;\n        const isFocused =\n          focusedPart === \"header\" && cursorColIdx === column.index;\n        return (\n          <Cell\n            key={column.info.props.id}\n            column={column}\n            isFocused={isFocused}\n          >\n            <CellValue column={column} isFocused={isFocused} />\n          </Cell>\n        );\n      })}\n      {gap !== undefined && gap > 0 ? <FakeHeaderCell /> : null}\n    </tr>\n  );\n}\n"],"names":["makePrefixer","useWindow","useComponentCssInjection","headerRowCss","useCursorContext","jsxs","HeaderCell","HeaderCellValue","jsx","FakeHeaderCell"],"mappings":";;;;;;;;;;;;;;AAaA,MAAM,YAAA,GAAeA,kBAAa,mBAAmB,CAAA,CAAA;AAO9C,SAAS,UAAa,KAA0B,EAAA;AACrD,EAAM,MAAA,EAAE,OAAS,EAAA,GAAA,EAAQ,GAAA,KAAA,CAAA;AAEzB,EAAA,MAAM,eAAeC,gBAAU,EAAA,CAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,iBAAA;AAAA,IACR,GAAK,EAAAC,WAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAA,MAAM,EAAE,YAAA,EAAc,WAAa,EAAA,iBAAA,KAAsBC,8BAAiB,EAAA,CAAA;AAE1E,EAAM,MAAA,YAAA,GAAe,oBAAoB,CAAI,GAAA,KAAA,CAAA,CAAA;AAE7C,EAAA,uBACGC,eAAA,CAAA,IAAA,EAAA;AAAA,IAAG,WAAW,YAAa,EAAA;AAAA,IAAG,IAAK,EAAA,KAAA;AAAA,IAAM,eAAe,EAAA,YAAA;AAAA,IACtD,QAAA,EAAA;AAAA,MAAQ,OAAA,CAAA,GAAA,CAAI,CAAC,MAAW,KAAA;AACvB,QAAA,MAAM,IAAO,GAAA,MAAA,CAAO,IAAK,CAAA,KAAA,CAAM,eAAmB,IAAAC,qBAAA,CAAA;AAClD,QAAA,MAAM,SACJ,GAAA,MAAA,CAAO,IAAK,CAAA,KAAA,CAAM,oBAAwB,IAAAC,+BAAA,CAAA;AAC5C,QAAA,MAAM,SACJ,GAAA,WAAA,KAAgB,QAAY,IAAA,YAAA,KAAiB,MAAO,CAAA,KAAA,CAAA;AACtD,QAAA,uBACGC,cAAA,CAAA,IAAA,EAAA;AAAA,UAEC,MAAA;AAAA,UACA,SAAA;AAAA,UAEA,QAAC,kBAAAA,cAAA,CAAA,SAAA,EAAA;AAAA,YAAU,MAAA;AAAA,YAAgB,SAAA;AAAA,WAAsB,CAAA;AAAA,SAJ5C,EAAA,MAAA,CAAO,IAAK,CAAA,KAAA,CAAM,EAKzB,CAAA,CAAA;AAAA,OAEH,CAAA;AAAA,MACA,QAAQ,KAAa,CAAA,IAAA,GAAA,GAAM,CAAI,mBAAAA,cAAA,CAACC,iCAAe,CAAK,GAAA,IAAA;AAAA,KAAA;AAAA,GACvD,CAAA,CAAA;AAEJ;;;;"}

package/dist-cjs/internal/LeftPart.css.js

@@ -0,0 +1,6 @@
+'use strict';
+
+var css_248z = ".saltGridLeftPart {\n  position: absolute;\n  top: 0;\n  left: 0;\n  bottom: var(--grid-scrollBar-height);\n  overflow-x: hidden;\n  overflow-y: hidden;\n  clip-path: inset(var(--grid-topPart-height) -10px 0 0);\n  z-index: var(--grid-left-body-zIndex);\n}\n\n.saltGridLeftPart-rightShadow {\n  box-shadow: 2px 0 4px 0 var(--grid-shadow-color);\n}\n\n.saltGridLeftPart-space {\n  position: relative;\n  height: var(--grid-total-height);\n  width: var(--grid-leftPart-width);\n}\n\n.saltGridLeftPart table {\n  table-layout: fixed;\n  position: absolute;\n  top: var(--grid-bodyVisibleArea-top);\n  width: var(--grid-leftPart-width);\n}\n";
+
+module.exports = css_248z;
+//# sourceMappingURL=LeftPart.css.js.map

package/dist-cjs/internal/LeftPart.css.js.map

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

package/dist-cjs/internal/LeftPart.js

@@ -0,0 +1,68 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var clsx = require('clsx');
+var window = require('@salt-ds/window');
+var styles = require('@salt-ds/styles');
+var core = require('@salt-ds/core');
+var gridHooks = require('./gridHooks.js');
+var TableBody = require('./TableBody.js');
+var TableColGroup = require('./TableColGroup.js');
+var LeftPart$1 = require('./LeftPart.css.js');
+
+const withBaseName = core.makePrefixer("saltGridLeftPart");
+function LeftPart(props) {
+  const {
+    leftRef,
+    onWheel,
+    rightShadow,
+    columns,
+    rows,
+    hoverOverRowKey,
+    setHoverOverRowKey,
+    zebra,
+    getRowValidationStatus
+  } = props;
+  const targetWindow = window.useWindow();
+  styles.useComponentCssInjection({
+    testId: "salt-left-part",
+    css: LeftPart$1,
+    window: targetWindow
+  });
+  const tableRef = gridHooks.useActiveOnWheel(onWheel);
+  if (columns.length === 0) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx("div", {
+    ref: leftRef,
+    className: clsx.clsx(withBaseName(), {
+      [withBaseName("rightShadow")]: rightShadow
+    }),
+    children: /* @__PURE__ */ jsxRuntime.jsx("div", {
+      className: withBaseName("space"),
+      "data-testid": "grid-left-part",
+      children: /* @__PURE__ */ jsxRuntime.jsxs("table", {
+        ref: tableRef,
+        role: "presentation",
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(TableColGroup.TableColGroup, {
+            columns
+          }),
+          /* @__PURE__ */ jsxRuntime.jsx(TableBody.TableBody, {
+            columns,
+            rows,
+            hoverRowKey: hoverOverRowKey,
+            setHoverRowKey: setHoverOverRowKey,
+            zebra,
+            getRowValidationStatus
+          })
+        ]
+      })
+    })
+  });
+}
+
+exports.LeftPart = LeftPart;
+//# sourceMappingURL=LeftPart.js.map

package/dist-cjs/internal/LeftPart.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LeftPart.js","sources":["../src/internal/LeftPart.tsx"],"sourcesContent":["import { RefObject } from \"react\";\nimport { clsx } from \"clsx\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { makePrefixer } from \"@salt-ds/core\";\n\nimport { GridColumnModel, GridRowModel } from \"../Grid\";\nimport { CellValidationState } from \"../GridColumn\";\n\nimport { useActiveOnWheel } from \"./gridHooks\";\nimport { TableBody } from \"./TableBody\";\nimport { TableColGroup } from \"./TableColGroup\";\n\nimport leftPartCss from \"./LeftPart.css\";\n\nconst withBaseName = makePrefixer(\"saltGridLeftPart\");\n\nexport interface LeftPartProps<T> {\n  leftRef: RefObject<HTMLDivElement>;\n  onWheel: EventListener;\n  rightShadow?: boolean;\n  columns: GridColumnModel<T>[];\n  rows: GridRowModel<T>[];\n  hoverOverRowKey?: string;\n  setHoverOverRowKey: (key: string | undefined) => void;\n  zebra?: boolean;\n  getRowValidationStatus?: (\n    row: GridRowModel<T>\n  ) => CellValidationState | undefined;\n}\n\nexport function LeftPart<T>(props: LeftPartProps<T>) {\n  const {\n    leftRef,\n    onWheel,\n    rightShadow,\n    columns,\n    rows,\n    hoverOverRowKey,\n    setHoverOverRowKey,\n    zebra,\n    getRowValidationStatus,\n  } = props;\n\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-left-part\",\n    css: leftPartCss,\n    window: targetWindow,\n  });\n\n  const tableRef = useActiveOnWheel(onWheel);\n\n  if (columns.length === 0) {\n    return null;\n  }\n\n  return (\n    <div\n      ref={leftRef}\n      className={clsx(withBaseName(), {\n        [withBaseName(\"rightShadow\")]: rightShadow,\n      })}\n    >\n      <div className={withBaseName(\"space\")} data-testid=\"grid-left-part\">\n        <table ref={tableRef} role=\"presentation\">\n          <TableColGroup columns={columns} />\n          <TableBody\n            columns={columns}\n            rows={rows}\n            hoverRowKey={hoverOverRowKey}\n            setHoverRowKey={setHoverOverRowKey}\n            zebra={zebra}\n            getRowValidationStatus={getRowValidationStatus}\n          />\n        </table>\n      </div>\n    </div>\n  );\n}\n"],"names":["makePrefixer","useWindow","useComponentCssInjection","leftPartCss","useActiveOnWheel","jsx","clsx","jsxs","TableColGroup","TableBody"],"mappings":";;;;;;;;;;;;;;AAeA,MAAM,YAAA,GAAeA,kBAAa,kBAAkB,CAAA,CAAA;AAgB7C,SAAS,SAAY,KAAyB,EAAA;AACnD,EAAM,MAAA;AAAA,IACJ,OAAA;AAAA,IACA,OAAA;AAAA,IACA,WAAA;AAAA,IACA,OAAA;AAAA,IACA,IAAA;AAAA,IACA,eAAA;AAAA,IACA,kBAAA;AAAA,IACA,KAAA;AAAA,IACA,sBAAA;AAAA,GACE,GAAA,KAAA,CAAA;AAEJ,EAAA,MAAM,eAAeC,gBAAU,EAAA,CAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,gBAAA;AAAA,IACR,GAAK,EAAAC,UAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAM,MAAA,QAAA,GAAWC,2BAAiB,OAAO,CAAA,CAAA;AAEzC,EAAI,IAAA,OAAA,CAAQ,WAAW,CAAG,EAAA;AACxB,IAAO,OAAA,IAAA,CAAA;AAAA,GACT;AAEA,EAAA,uBACGC,cAAA,CAAA,KAAA,EAAA;AAAA,IACC,GAAK,EAAA,OAAA;AAAA,IACL,SAAA,EAAWC,SAAK,CAAA,YAAA,EAAgB,EAAA;AAAA,MAC9B,CAAC,YAAa,CAAA,aAAa,CAAI,GAAA,WAAA;AAAA,KAChC,CAAA;AAAA,IAED,QAAC,kBAAAD,cAAA,CAAA,KAAA,EAAA;AAAA,MAAI,SAAA,EAAW,aAAa,OAAO,CAAA;AAAA,MAAG,aAAY,EAAA,gBAAA;AAAA,MACjD,QAAC,kBAAAE,eAAA,CAAA,OAAA,EAAA;AAAA,QAAM,GAAK,EAAA,QAAA;AAAA,QAAU,IAAK,EAAA,cAAA;AAAA,QACzB,QAAA,EAAA;AAAA,0BAACF,cAAA,CAAAG,2BAAA,EAAA;AAAA,YAAc,OAAA;AAAA,WAAkB,CAAA;AAAA,0BAChCH,cAAA,CAAAI,mBAAA,EAAA;AAAA,YACC,OAAA;AAAA,YACA,IAAA;AAAA,YACA,WAAa,EAAA,eAAA;AAAA,YACb,cAAgB,EAAA,kBAAA;AAAA,YAChB,KAAA;AAAA,YACA,sBAAA;AAAA,WACF,CAAA;AAAA,SAAA;AAAA,OACF,CAAA;AAAA,KACF,CAAA;AAAA,GACF,CAAA,CAAA;AAEJ;;;;"}

package/dist-cjs/internal/MiddlePart.css.js

@@ -0,0 +1,6 @@
+'use strict';
+
+var css_248z = ".saltGridMiddlePart {\n  overflow-y: hidden;\n  overflow-x: hidden;\n  position: absolute;\n  top: 0;\n  right: var(--grid-scrollBar-width);\n  bottom: var(--grid-scrollBar-height);\n  left: 0;\n  clip-path: inset(var(--grid-topPart-height) var(--grid-rightPart-width) 0 var(--grid-leftPart-width));\n  touch-action: none;\n  z-index: var(--grid-middle-body-zIndex);\n}\n\n.saltGridMiddlePart-space {\n  position: relative;\n  height: var(--grid-total-height);\n  width: var(--grid-total-width);\n}\n\n.saltGridMiddlePart table {\n  table-layout: fixed;\n  position: absolute;\n\n  width: var(--grid-bodyVisibleColumns-width);\n  top: var(--grid-bodyVisibleArea-top);\n  left: var(--grid-bodyVisibleArea-left);\n}\n";
+
+module.exports = css_248z;
+//# sourceMappingURL=MiddlePart.css.js.map

package/dist-cjs/internal/MiddlePart.css.js.map

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

package/dist-cjs/internal/MiddlePart.js

@@ -0,0 +1,64 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var window = require('@salt-ds/window');
+var styles = require('@salt-ds/styles');
+var core = require('@salt-ds/core');
+var TableColGroup = require('./TableColGroup.js');
+var TableBody = require('./TableBody.js');
+var gridHooks = require('./gridHooks.js');
+var MiddlePart$1 = require('./MiddlePart.css.js');
+
+const withBaseName = core.makePrefixer("saltGridMiddlePart");
+function MiddlePart(props) {
+  const {
+    middleRef,
+    onWheel,
+    columns,
+    rows,
+    hoverOverRowKey,
+    setHoverOverRowKey,
+    midGap,
+    zebra,
+    getRowValidationStatus
+  } = props;
+  const targetWindow = window.useWindow();
+  styles.useComponentCssInjection({
+    testId: "salt-middle-part",
+    css: MiddlePart$1,
+    window: targetWindow
+  });
+  const tableRef = gridHooks.useActiveOnWheel(onWheel);
+  return /* @__PURE__ */ jsxRuntime.jsx("div", {
+    ref: middleRef,
+    className: withBaseName(),
+    "data-testid": "grid-middle-part",
+    children: /* @__PURE__ */ jsxRuntime.jsx("div", {
+      className: withBaseName("space"),
+      children: /* @__PURE__ */ jsxRuntime.jsxs("table", {
+        ref: tableRef,
+        role: "presentation",
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(TableColGroup.TableColGroup, {
+            columns,
+            gap: midGap
+          }),
+          /* @__PURE__ */ jsxRuntime.jsx(TableBody.TableBody, {
+            columns,
+            rows,
+            hoverRowKey: hoverOverRowKey,
+            setHoverRowKey: setHoverOverRowKey,
+            gap: midGap,
+            zebra,
+            getRowValidationStatus
+          })
+        ]
+      })
+    })
+  });
+}
+
+exports.MiddlePart = MiddlePart;
+//# sourceMappingURL=MiddlePart.js.map

package/dist-cjs/internal/MiddlePart.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MiddlePart.js","sources":["../src/internal/MiddlePart.tsx"],"sourcesContent":["import { RefObject } from \"react\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { makePrefixer } from \"@salt-ds/core\";\n\nimport { GridColumnModel, GridRowModel } from \"../Grid\";\nimport { CellValidationState } from \"../GridColumn\";\n\nimport { TableColGroup } from \"./TableColGroup\";\nimport { TableBody } from \"./TableBody\";\nimport { useActiveOnWheel } from \"./gridHooks\";\n\nimport middlePartCss from \"./MiddlePart.css\";\n\nconst withBaseName = makePrefixer(\"saltGridMiddlePart\");\n\nexport interface MiddlePartProps<T> {\n  middleRef: RefObject<HTMLDivElement>;\n  onWheel: EventListener;\n  columns: GridColumnModel<T>[];\n  rows: GridRowModel<T>[];\n  hoverOverRowKey?: string;\n  setHoverOverRowKey: (key: string | undefined) => void;\n  midGap: number;\n  zebra?: boolean;\n  getRowValidationStatus?: (\n    row: GridRowModel<T>\n  ) => CellValidationState | undefined;\n}\n\nexport function MiddlePart<T>(props: MiddlePartProps<T>) {\n  const {\n    middleRef,\n    onWheel,\n    columns,\n    rows,\n    hoverOverRowKey,\n    setHoverOverRowKey,\n    midGap,\n    zebra,\n    getRowValidationStatus,\n  } = props;\n\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-middle-part\",\n    css: middlePartCss,\n    window: targetWindow,\n  });\n\n  const tableRef = useActiveOnWheel(onWheel);\n\n  return (\n    <div\n      ref={middleRef}\n      className={withBaseName()}\n      data-testid=\"grid-middle-part\"\n    >\n      <div className={withBaseName(\"space\")}>\n        <table ref={tableRef} role=\"presentation\">\n          <TableColGroup columns={columns} gap={midGap} />\n          <TableBody\n            columns={columns}\n            rows={rows}\n            hoverRowKey={hoverOverRowKey}\n            setHoverRowKey={setHoverOverRowKey}\n            gap={midGap}\n            zebra={zebra}\n            getRowValidationStatus={getRowValidationStatus}\n          />\n        </table>\n      </div>\n    </div>\n  );\n}\n"],"names":["makePrefixer","useWindow","useComponentCssInjection","middlePartCss","useActiveOnWheel","jsx","jsxs","TableColGroup","TableBody"],"mappings":";;;;;;;;;;;;;AAcA,MAAM,YAAA,GAAeA,kBAAa,oBAAoB,CAAA,CAAA;AAgB/C,SAAS,WAAc,KAA2B,EAAA;AACvD,EAAM,MAAA;AAAA,IACJ,SAAA;AAAA,IACA,OAAA;AAAA,IACA,OAAA;AAAA,IACA,IAAA;AAAA,IACA,eAAA;AAAA,IACA,kBAAA;AAAA,IACA,MAAA;AAAA,IACA,KAAA;AAAA,IACA,sBAAA;AAAA,GACE,GAAA,KAAA,CAAA;AAEJ,EAAA,MAAM,eAAeC,gBAAU,EAAA,CAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,kBAAA;AAAA,IACR,GAAK,EAAAC,YAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAM,MAAA,QAAA,GAAWC,2BAAiB,OAAO,CAAA,CAAA;AAEzC,EAAA,uBACGC,cAAA,CAAA,KAAA,EAAA;AAAA,IACC,GAAK,EAAA,SAAA;AAAA,IACL,WAAW,YAAa,EAAA;AAAA,IACxB,aAAY,EAAA,kBAAA;AAAA,IAEZ,QAAC,kBAAAA,cAAA,CAAA,KAAA,EAAA;AAAA,MAAI,SAAA,EAAW,aAAa,OAAO,CAAA;AAAA,MAClC,QAAC,kBAAAC,eAAA,CAAA,OAAA,EAAA;AAAA,QAAM,GAAK,EAAA,QAAA;AAAA,QAAU,IAAK,EAAA,cAAA;AAAA,QACzB,QAAA,EAAA;AAAA,0BAACD,cAAA,CAAAE,2BAAA,EAAA;AAAA,YAAc,OAAA;AAAA,YAAkB,GAAK,EAAA,MAAA;AAAA,WAAQ,CAAA;AAAA,0BAC7CF,cAAA,CAAAG,mBAAA,EAAA;AAAA,YACC,OAAA;AAAA,YACA,IAAA;AAAA,YACA,WAAa,EAAA,eAAA;AAAA,YACb,cAAgB,EAAA,kBAAA;AAAA,YAChB,GAAK,EAAA,MAAA;AAAA,YACL,KAAA;AAAA,YACA,sBAAA;AAAA,WACF,CAAA;AAAA,SAAA;AAAA,OACF,CAAA;AAAA,KACF,CAAA;AAAA,GACF,CAAA,CAAA;AAEJ;;;;"}

package/dist-cjs/internal/RightPart.css.js

@@ -0,0 +1,6 @@
+'use strict';
+
+var css_248z = ".saltGridRightPart {\n  position: absolute;\n  top: 0;\n  right: var(--grid-scrollBar-width);\n  bottom: var(--grid-scrollBar-height);\n  overflow-x: hidden;\n  overflow-y: hidden;\n  clip-path: inset(var(--grid-topPart-height) 0 0 -10px);\n  z-index: var(--grid-right-body-zIndex);\n}\n\n.saltGridRightPart-leftShadow {\n  box-shadow: -2px 0 4px 0 var(--grid-shadow-color);\n}\n\n.saltGrid-pinnedSeparators .saltGridRightPart-leftShadow {\n  border-left: solid 1px var(--grid-pinnedSeparator-color);\n}\n\n.saltGridRightPart-space {\n  position: relative;\n  height: var(--grid-total-height);\n  width: var(--grid-rightPart-width);\n}\n\n.saltGridRightPart table {\n  table-layout: fixed;\n  position: absolute;\n\n  top: var(--grid-bodyVisibleArea-top);\n  width: var(--grid-rightPart-width);\n}\n";
+
+module.exports = css_248z;
+//# sourceMappingURL=RightPart.css.js.map

package/dist-cjs/internal/RightPart.css.js.map

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

package/dist-cjs/internal/RightPart.js

@@ -0,0 +1,68 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var clsx = require('clsx');
+var core = require('@salt-ds/core');
+var styles = require('@salt-ds/styles');
+var window = require('@salt-ds/window');
+var gridHooks = require('./gridHooks.js');
+var TableColGroup = require('./TableColGroup.js');
+var TableBody = require('./TableBody.js');
+var RightPart$1 = require('./RightPart.css.js');
+
+const withBaseName = core.makePrefixer("saltGridRightPart");
+function RightPart(props) {
+  const {
+    rightRef,
+    onWheel,
+    columns,
+    leftShadow,
+    rows,
+    hoverOverRowKey,
+    setHoverOverRowKey,
+    zebra,
+    getRowValidationStatus
+  } = props;
+  const targetWindow = window.useWindow();
+  styles.useComponentCssInjection({
+    testId: "salt-right-part",
+    css: RightPart$1,
+    window: targetWindow
+  });
+  const tableRef = gridHooks.useActiveOnWheel(onWheel);
+  if (columns.length === 0) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx("div", {
+    ref: rightRef,
+    className: clsx.clsx(withBaseName(), {
+      [withBaseName("leftShadow")]: leftShadow
+    }),
+    "data-testid": "grid-right-part",
+    children: /* @__PURE__ */ jsxRuntime.jsx("div", {
+      className: withBaseName("space"),
+      children: /* @__PURE__ */ jsxRuntime.jsxs("table", {
+        ref: tableRef,
+        role: "presentation",
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(TableColGroup.TableColGroup, {
+            columns
+          }),
+          /* @__PURE__ */ jsxRuntime.jsx(TableBody.TableBody, {
+            columns,
+            rows,
+            hoverRowKey: hoverOverRowKey,
+            setHoverRowKey: setHoverOverRowKey,
+            zebra,
+            getRowValidationStatus
+          })
+        ]
+      })
+    })
+  });
+}
+
+exports.RightPart = RightPart;
+//# sourceMappingURL=RightPart.js.map

package/dist-cjs/internal/RightPart.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RightPart.js","sources":["../src/internal/RightPart.tsx"],"sourcesContent":["import { RefObject } from \"react\";\nimport { clsx } from \"clsx\";\nimport { makePrefixer } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\n\nimport { CellValidationState } from \"../GridColumn\";\nimport { GridColumnModel, GridRowModel } from \"../Grid\";\n\nimport { useActiveOnWheel } from \"./gridHooks\";\nimport { TableColGroup } from \"./TableColGroup\";\nimport { TableBody } from \"./TableBody\";\n\nimport rightPartCss from \"./RightPart.css\";\n\nconst withBaseName = makePrefixer(\"saltGridRightPart\");\n\nexport interface RightPartProps<T> {\n  rightRef: RefObject<HTMLDivElement>;\n  onWheel: EventListener;\n  leftShadow?: boolean;\n  columns: GridColumnModel<T>[];\n  rows: GridRowModel<T>[];\n  hoverOverRowKey?: string;\n  setHoverOverRowKey: (key: string | undefined) => void;\n  zebra?: boolean;\n  getRowValidationStatus?: (\n    row: GridRowModel<T>\n  ) => CellValidationState | undefined;\n}\n\nexport function RightPart<T>(props: RightPartProps<T>) {\n  const {\n    rightRef,\n    onWheel,\n    columns,\n    leftShadow,\n    rows,\n    hoverOverRowKey,\n    setHoverOverRowKey,\n    zebra,\n    getRowValidationStatus,\n  } = props;\n\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-right-part\",\n    css: rightPartCss,\n    window: targetWindow,\n  });\n\n  const tableRef = useActiveOnWheel(onWheel);\n\n  if (columns.length === 0) {\n    return null;\n  }\n\n  return (\n    <div\n      ref={rightRef}\n      className={clsx(withBaseName(), {\n        [withBaseName(\"leftShadow\")]: leftShadow,\n      })}\n      data-testid=\"grid-right-part\"\n    >\n      <div className={withBaseName(\"space\")}>\n        <table ref={tableRef} role=\"presentation\">\n          <TableColGroup columns={columns} />\n          <TableBody\n            columns={columns}\n            rows={rows}\n            hoverRowKey={hoverOverRowKey}\n            setHoverRowKey={setHoverOverRowKey}\n            zebra={zebra}\n            getRowValidationStatus={getRowValidationStatus}\n          />\n        </table>\n      </div>\n    </div>\n  );\n}\n"],"names":["makePrefixer","useWindow","useComponentCssInjection","rightPartCss","useActiveOnWheel","jsx","clsx","jsxs","TableColGroup","TableBody"],"mappings":";;;;;;;;;;;;;;AAeA,MAAM,YAAA,GAAeA,kBAAa,mBAAmB,CAAA,CAAA;AAgB9C,SAAS,UAAa,KAA0B,EAAA;AACrD,EAAM,MAAA;AAAA,IACJ,QAAA;AAAA,IACA,OAAA;AAAA,IACA,OAAA;AAAA,IACA,UAAA;AAAA,IACA,IAAA;AAAA,IACA,eAAA;AAAA,IACA,kBAAA;AAAA,IACA,KAAA;AAAA,IACA,sBAAA;AAAA,GACE,GAAA,KAAA,CAAA;AAEJ,EAAA,MAAM,eAAeC,gBAAU,EAAA,CAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,iBAAA;AAAA,IACR,GAAK,EAAAC,WAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAM,MAAA,QAAA,GAAWC,2BAAiB,OAAO,CAAA,CAAA;AAEzC,EAAI,IAAA,OAAA,CAAQ,WAAW,CAAG,EAAA;AACxB,IAAO,OAAA,IAAA,CAAA;AAAA,GACT;AAEA,EAAA,uBACGC,cAAA,CAAA,KAAA,EAAA;AAAA,IACC,GAAK,EAAA,QAAA;AAAA,IACL,SAAA,EAAWC,SAAK,CAAA,YAAA,EAAgB,EAAA;AAAA,MAC9B,CAAC,YAAa,CAAA,YAAY,CAAI,GAAA,UAAA;AAAA,KAC/B,CAAA;AAAA,IACD,aAAY,EAAA,iBAAA;AAAA,IAEZ,QAAC,kBAAAD,cAAA,CAAA,KAAA,EAAA;AAAA,MAAI,SAAA,EAAW,aAAa,OAAO,CAAA;AAAA,MAClC,QAAC,kBAAAE,eAAA,CAAA,OAAA,EAAA;AAAA,QAAM,GAAK,EAAA,QAAA;AAAA,QAAU,IAAK,EAAA,cAAA;AAAA,QACzB,QAAA,EAAA;AAAA,0BAACF,cAAA,CAAAG,2BAAA,EAAA;AAAA,YAAc,OAAA;AAAA,WAAkB,CAAA;AAAA,0BAChCH,cAAA,CAAAI,mBAAA,EAAA;AAAA,YACC,OAAA;AAAA,YACA,IAAA;AAAA,YACA,WAAa,EAAA,eAAA;AAAA,YACb,cAAgB,EAAA,kBAAA;AAAA,YAChB,KAAA;AAAA,YACA,sBAAA;AAAA,WACF,CAAA;AAAA,SAAA;AAAA,OACF,CAAA;AAAA,KACF,CAAA;AAAA,GACF,CAAA,CAAA;AAEJ;;;;"}

package/dist-cjs/internal/Scrollable.css.js

@@ -0,0 +1,6 @@
+'use strict';
+
+var css_248z = ".saltGridScrollable {\n  overflow-y: auto;\n  overflow-x: auto;\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n}\n\n.saltGridScrollable-space {\n  position: relative;\n  height: var(--grid-total-height);\n  width: var(--grid-total-width);\n}\n";
+
+module.exports = css_248z;
+//# sourceMappingURL=Scrollable.css.js.map

package/dist-cjs/internal/Scrollable.css.js.map

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

package/dist-cjs/internal/Scrollable.js

@@ -0,0 +1,103 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var core = require('@salt-ds/core');
+var window = require('@salt-ds/window');
+var styles = require('@salt-ds/styles');
+var Scrollable$1 = require('./Scrollable.css.js');
+
+const withBaseName = core.makePrefixer("saltGridScrollable");
+function Scrollable(props) {
+  const {
+    scrollerRef,
+    middleRef,
+    topRef,
+    leftRef,
+    rightRef,
+    bottomRef,
+    resizeClient,
+    scrollLeft,
+    scrollTop,
+    scrollSource
+  } = props;
+  const targetWindow = window.useWindow();
+  styles.useComponentCssInjection({
+    testId: "salt-scrollable",
+    css: Scrollable$1,
+    window: targetWindow
+  });
+  const onScroll = (event) => {
+    if (!scrollerRef.current) {
+      return;
+    }
+    const { scrollLeft: scrollLeft2, scrollTop: scrollTop2 } = scrollerRef.current;
+    const top = topRef.current;
+    const bottom = bottomRef.current;
+    if (top) {
+      top.scrollLeft = scrollLeft2;
+    }
+    if (bottom) {
+      bottom.scrollLeft = scrollLeft2;
+    }
+    const left = leftRef.current;
+    if (left) {
+      left.scrollTop = scrollTop2;
+    }
+    const right = rightRef.current;
+    if (right) {
+      right.scrollTop = scrollTop2;
+    }
+    const middle = middleRef.current;
+    if (middle) {
+      middle.scrollTop = scrollTop2;
+      middle.scrollLeft = scrollLeft2;
+    }
+    props.scroll(scrollLeft2, scrollTop2, "user");
+  };
+  react.useEffect(() => {
+    if (!scrollerRef.current) {
+      return;
+    }
+    const resizeObserver = new ResizeObserver(([entry]) => {
+      const { offsetWidth, offsetHeight, clientWidth, clientHeight } = entry.target;
+      const scrollBarWidth = offsetWidth - clientWidth;
+      const scrollBarHeight = offsetHeight - clientHeight;
+      resizeClient({
+        clientWidth,
+        clientHeight,
+        scrollBarWidth,
+        scrollBarHeight
+      });
+    });
+    resizeObserver.observe(scrollerRef.current);
+    return () => resizeObserver.disconnect();
+  }, [resizeClient, scrollerRef]);
+  react.useEffect(() => {
+    if (!scrollerRef.current) {
+      return;
+    }
+    if (scrollSource === "table") {
+      if (scrollLeft !== scrollerRef.current.scrollLeft) {
+        scrollerRef.current.scrollLeft = scrollLeft;
+      }
+      if (scrollTop !== scrollerRef.current.scrollTop) {
+        scrollerRef.current.scrollTop = scrollTop;
+      }
+    }
+  }, [scrollLeft, scrollTop, scrollSource, scrollerRef]);
+  return /* @__PURE__ */ jsxRuntime.jsx("div", {
+    ref: scrollerRef,
+    className: withBaseName(),
+    onScroll,
+    "data-testid": "grid-scrollable",
+    children: /* @__PURE__ */ jsxRuntime.jsx("div", {
+      className: withBaseName("space")
+    })
+  });
+}
+
+exports.Scrollable = Scrollable;
+//# sourceMappingURL=Scrollable.js.map

package/dist-cjs/internal/Scrollable.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Scrollable.js","sources":["../src/internal/Scrollable.tsx"],"sourcesContent":["import { RefObject, UIEventHandler, useEffect } from \"react\";\nimport { makePrefixer } from \"@salt-ds/core\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nimport scrollableCss from \"./Scrollable.css\";\n\nconst withBaseName = makePrefixer(\"saltGridScrollable\");\n\nexport interface ScrollableProps<T> {\n  resizeClient: (params: {\n    clientWidth: number;\n    clientHeight: number;\n    scrollBarWidth: number;\n    scrollBarHeight: number;\n  }) => void;\n\n  scrollLeft: number;\n  scrollTop: number;\n  scrollSource: \"user\" | \"table\";\n  scroll: (left?: number, top?: number, source?: \"user\" | \"table\") => void;\n\n  scrollerRef: RefObject<HTMLDivElement>;\n  middleRef: RefObject<HTMLDivElement>;\n  topRef: RefObject<HTMLDivElement>;\n  leftRef: RefObject<HTMLDivElement>;\n  rightRef: RefObject<HTMLDivElement>;\n  bottomRef: RefObject<HTMLDivElement>;\n}\n\n// Provides scrollbars for the grid. Synchronizes scrolling across all parts\n// (pinned and unpinned).\nexport function Scrollable<T>(props: ScrollableProps<T>) {\n  const {\n    scrollerRef,\n    middleRef,\n    topRef,\n    leftRef,\n    rightRef,\n    bottomRef,\n    resizeClient,\n    scrollLeft,\n    scrollTop,\n    scrollSource,\n  } = props;\n\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-scrollable\",\n    css: scrollableCss,\n    window: targetWindow,\n  });\n\n  const onScroll: UIEventHandler<HTMLDivElement> = (event) => {\n    if (!scrollerRef.current) {\n      return;\n    }\n    const { scrollLeft, scrollTop } = scrollerRef.current;\n    const top = topRef.current;\n    const bottom = bottomRef.current;\n    if (top) {\n      top.scrollLeft = scrollLeft;\n    }\n    if (bottom) {\n      bottom.scrollLeft = scrollLeft;\n    }\n    const left = leftRef.current;\n    if (left) {\n      left.scrollTop = scrollTop;\n    }\n    const right = rightRef.current;\n    if (right) {\n      right.scrollTop = scrollTop;\n    }\n    const middle = middleRef.current;\n    if (middle) {\n      middle.scrollTop = scrollTop;\n      middle.scrollLeft = scrollLeft;\n    }\n    props.scroll(scrollLeft, scrollTop, \"user\");\n  };\n\n  useEffect(() => {\n    if (!scrollerRef.current) {\n      return;\n    }\n    const resizeObserver = new ResizeObserver(([entry]) => {\n      const { offsetWidth, offsetHeight, clientWidth, clientHeight } =\n        entry.target as HTMLDivElement;\n      const scrollBarWidth = offsetWidth - clientWidth;\n      const scrollBarHeight = offsetHeight - clientHeight;\n      resizeClient({\n        clientWidth,\n        clientHeight,\n        scrollBarWidth,\n        scrollBarHeight,\n      });\n    });\n\n    resizeObserver.observe(scrollerRef.current);\n    return () => resizeObserver.disconnect();\n  }, [resizeClient, scrollerRef]);\n\n  useEffect(() => {\n    if (!scrollerRef.current) {\n      return;\n    }\n    if (scrollSource === \"table\") {\n      if (scrollLeft !== scrollerRef.current.scrollLeft) {\n        scrollerRef.current.scrollLeft = scrollLeft;\n      }\n      if (scrollTop !== scrollerRef.current.scrollTop) {\n        scrollerRef.current.scrollTop = scrollTop;\n      }\n    }\n  }, [scrollLeft, scrollTop, scrollSource, scrollerRef]);\n\n  return (\n    <div\n      ref={scrollerRef}\n      className={withBaseName()}\n      onScroll={onScroll}\n      data-testid=\"grid-scrollable\"\n    >\n      <div className={withBaseName(\"space\")} />\n    </div>\n  );\n}\n"],"names":["makePrefixer","useWindow","useComponentCssInjection","scrollableCss","scrollLeft","scrollTop","useEffect","jsx"],"mappings":"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"}