@oprt/react 0.0.0-stage → 0.1.0

package/dist/DataTable/DataTable.js

@@ -0,0 +1,375 @@
+"use client";
+
+// src/DataTable/DataTable.tsx
+import { ChevronUp, ChevronDown } from "@oprt/icons";
+import {
+  forwardRef,
+  useEffect,
+  useMemo,
+  useRef,
+  useState
+} from "react";
+import clsx from "clsx";
+import { Badge } from "../Badge/Badge.js";
+import { numberText } from "../_internal/numberText.js";
+import { sortedOrder } from "./sort.js";
+import { useScrollsSideways } from "./useScrollsSideways.js";
+import { useTableWindow } from "./useTableWindow.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var SEMANTIC_BADGE = /* @__PURE__ */ new Set(["success", "warning", "error", "info"]);
+var CELL_CONTROL_SELECTOR = "button, a, input, select, textarea, label, summary, [role='button'], [role='link'], [role='checkbox'], [role='radio'], [role='switch'], [role='combobox'], [role='slider'], [role='textbox'], [tabindex], [contenteditable]:not([contenteditable='false'])";
+function SortGlyph({ dir }) {
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      "aria-hidden": "true",
+      className: clsx(
+        "inline-flex h-oprt-sm w-1.5u shrink-0 flex-col items-center justify-center",
+        dir ? "text-oprt-accent" : "text-oprt-text-dim"
+      ),
+      children: [
+        dir !== "desc" && /* @__PURE__ */ jsx(ChevronUp, { size: 12 }),
+        dir !== "asc" && /* @__PURE__ */ jsx(ChevronDown, { size: 12 })
+      ]
+    }
+  );
+}
+var SORTABLE_ROWS_UNWINDOWED = 150;
+function isRightAligned(column) {
+  return column.align === "right" || (column.as === "number" || column.as === "timestamp") && column.align !== "left";
+}
+var NUMERIC_AUTO = "font-mono tabular-nums whitespace-nowrap";
+var NUMERIC_FIXED = "font-mono tabular-nums";
+function renderCell(column, value, fixedWidth) {
+  const numeric = fixedWidth ? NUMERIC_FIXED : NUMERIC_AUTO;
+  switch (column.as) {
+    case "number":
+      if (typeof value === "string" || typeof value === "number")
+        return numberText({ value, className: numeric });
+      return /* @__PURE__ */ jsx("span", { className: numeric, children: value });
+    case "timestamp":
+      return /* @__PURE__ */ jsx("span", { className: numeric, children: value });
+    case "code":
+      return /* @__PURE__ */ jsx("span", { className: "font-mono", children: value });
+    case "badge": {
+      const key = String(value).toLowerCase();
+      if (SEMANTIC_BADGE.has(key)) {
+        return /* @__PURE__ */ jsx(
+          Badge,
+          {
+            appearance: "text",
+            variant: key,
+            indicator: "none",
+            children: value
+          }
+        );
+      }
+      return /* @__PURE__ */ jsx(Badge, { appearance: "text", variant: "neutral", children: value });
+    }
+    default:
+      if (column.highlight) {
+        return /* @__PURE__ */ jsx("span", { className: "text-oprt-accent font-medium", children: value });
+      }
+      return value;
+  }
+}
+var DataTable = forwardRef(
+  ({
+    columns,
+    data,
+    sortable = false,
+    sortDescriptor,
+    dense = false,
+    onRowClick,
+    getRowId,
+    caption,
+    emptyMessage = "No results.",
+    columnWidths,
+    pinnedColumnKeys = [],
+    virtualization,
+    rowIndexOffset = 0,
+    totalRowCount,
+    className,
+    style,
+    onBlurCapture,
+    ...props
+  }, ref) => {
+    const [sort, setSort] = useState(null);
+    const externallySorted = sortDescriptor !== void 0;
+    const toggleSort = (key) => {
+      setSort((prev) => {
+        if (!prev || prev.key !== key) return { key, dir: "asc" };
+        if (prev.dir === "asc") return { key, dir: "desc" };
+        return null;
+      });
+    };
+    const columnSortable = (col) => !externallySorted && sortable && col.sortable !== false;
+    const order = useMemo(
+      () => !externallySorted && sort ? sortedOrder(
+        data.map((row) => row[sort.key]),
+        sort.dir === "asc" ? 1 : -1
+      ) : null,
+      [data, externallySorted, sort]
+    );
+    const rows = useMemo(
+      () => order ? order.map((position) => data[position]) : data,
+      [data, order]
+    );
+    const latestGetRowId = useRef(getRowId);
+    latestGetRowId.current = getRowId;
+    const withRowIds = getRowId !== void 0;
+    const rowKeys = useMemo(() => {
+      const read = withRowIds ? latestGetRowId.current : void 0;
+      const keys2 = rows.map((row, position) => read?.(row, position) ?? String(position));
+      const index = /* @__PURE__ */ new Map();
+      keys2.forEach((key, position) => {
+        if (!index.has(key)) index.set(key, position);
+      });
+      return { keys: keys2, index };
+    }, [rows, withRowIds]);
+    const sortsItself = !externallySorted && sortable && columns.some((column) => column.sortable !== false);
+    const outsideEnvelope = sortsItself && !virtualization && data.length > SORTABLE_ROWS_UNWINDOWED;
+    const warned = useRef(false);
+    useEffect(() => {
+      if (process.env.NODE_ENV === "production" || !outsideEnvelope || warned.current) return;
+      warned.current = true;
+      console.warn(
+        JSON.stringify(
+          {
+            component: "DataTable",
+            warning: "OUTSIDE_SIZE_ENVELOPE",
+            prop: "data",
+            received: `${data.length} rows, sortable, without virtualization`,
+            suggestion: `A sortable DataTable that is not windowed stays responsive up to about ${SORTABLE_ROWS_UNWINDOWED} rows: sorting moves every row and the browser lays them all out again. Use DataGrid, which pages or windows its rows, or pass virtualization.`
+          },
+          null,
+          2
+        )
+      );
+    }, [outsideEnvelope, data.length]);
+    const ariaSortFor = (col) => {
+      if (externallySorted) {
+        if (!sortDescriptor || sortDescriptor.key !== col.key) return void 0;
+        return sortDescriptor.direction === "asc" ? "ascending" : "descending";
+      }
+      if (!columnSortable(col)) return void 0;
+      if (!sort || sort.key !== col.key) return "none";
+      return sort.dir === "asc" ? "ascending" : "descending";
+    };
+    const keys = rowKeys.keys;
+    const rowWindow = useTableWindow(rowKeys, virtualization);
+    const [box, scrolls] = useScrollsSideways(!virtualization);
+    const sized = Boolean(columnWidths);
+    const widths = columns.map((column) => {
+      const width = columnWidths?.[column.key];
+      return width !== void 0 && Number.isFinite(width) ? Math.max(24, width) : 160;
+    });
+    const leftFor = (index) => columns.slice(0, index).reduce(
+      (offset, column, i) => offset + (pinnedColumnKeys.includes(column.key) ? widths[i] : 0),
+      0
+    );
+    const indexed = totalRowCount !== void 0 || Boolean(virtualization) || rowIndexOffset > 0;
+    const cellLook = columns.map((col, columnIndex) => {
+      const pinned = pinnedColumnKeys.includes(col.key);
+      return {
+        className: clsx(
+          "border-b border-oprt-border px-oprt-cell-inline align-middle [&>button]:align-middle [&>label]:align-middle",
+          dense ? "py-oprt-cell-block-dense h-oprt-row-dense" : "py-oprt-cell-block h-oprt-row",
+          isRightAligned(col) && "text-right",
+          sized && "break-words",
+          pinned && "z-10 bg-oprt-surface-1"
+        ),
+        style: {
+          ...pinned ? { position: "sticky", left: leftFor(columnIndex) } : {},
+          ...rowWindow.fixed !== void 0 && virtualization ? { height: rowWindow.fixed, paddingTop: 0, paddingBottom: 0 } : {}
+        }
+      };
+    });
+    const body = [];
+    let lastIndex = 0;
+    const spacer = (from, to) => {
+      if (to <= from) return;
+      body.push(
+        /* @__PURE__ */ jsx("tr", { "aria-hidden": "true", children: /* @__PURE__ */ jsx(
+          "td",
+          {
+            colSpan: Math.max(columns.length, 1),
+            style: {
+              height: rowWindow.offsetOf(to) - rowWindow.offsetOf(from),
+              padding: 0,
+              border: 0
+            }
+          }
+        ) }, `spacer-${from}`)
+      );
+    };
+    const renderRow = (i) => {
+      const row = rows[i];
+      const rowKey = keys[i];
+      const source = order ? order[i] : i;
+      const clickable = Boolean(onRowClick);
+      body.push(
+        /* @__PURE__ */ jsx(
+          "tr",
+          {
+            ref: rowWindow.rowRef(rowKey),
+            "aria-rowindex": indexed ? rowIndexOffset + i + 2 : void 0,
+            "data-row-id": rowKey,
+            onFocusCapture: () => rowWindow.onFocusRow(rowKey, i),
+            ...clickable ? {
+              onClick: (e) => {
+                const control = e.target.closest(CELL_CONTROL_SELECTOR);
+                if (e.defaultPrevented || control && e.currentTarget.contains(control)) return;
+                onRowClick?.(row, source);
+              }
+            } : {},
+            className: clsx(clickable && "cursor-pointer hover:bg-oprt-surface-2"),
+            children: columns.map((col, columnIndex) => {
+              const value = col.render ? col.render(row[col.key], row) : row[col.key];
+              const rendered = col.render ? value : renderCell(col, value, sized);
+              const textValue = col.as !== "badge" && (typeof value === "string" || typeof value === "number");
+              const look = cellLook[columnIndex];
+              const content = clickable && columnIndex === 0 ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                !textValue && rendered,
+                /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    className: clsx(
+                      "inline-flex items-center h-oprt-sm text-oprt-base font-medium hover:underline border border-transparent focus-visible:border-oprt-border-focus focus-visible:shadow-oprt-focus focus-visible:outline-hidden",
+                      !sized && "whitespace-nowrap",
+                      !textValue && "ml-1u uppercase tracking-oprt-caps"
+                    ),
+                    onClick: () => onRowClick?.(row, source),
+                    children: textValue ? rendered : `Open row ${rowIndexOffset + i + 1}`
+                  }
+                )
+              ] }) : rendered;
+              return /* @__PURE__ */ jsx("td", { style: look.style, className: look.className, children: rowWindow.fixed !== void 0 && virtualization ? /* @__PURE__ */ jsx("div", { style: { maxHeight: rowWindow.fixed - 1 }, className: "overflow-hidden", children: content }) : content }, col.key);
+            })
+          },
+          rowKey
+        )
+      );
+    };
+    if (rowWindow.indices === null) {
+      for (let i = 0; i < rows.length; i++) renderRow(i);
+    } else {
+      for (const i of rowWindow.indices) {
+        spacer(lastIndex, i);
+        lastIndex = i + 1;
+        renderRow(i);
+      }
+      spacer(lastIndex, rows.length);
+    }
+    const table = /* @__PURE__ */ jsxs(
+      "table",
+      {
+        ref,
+        className: clsx(
+          "w-full border-collapse font-sans text-oprt-base normal-case text-oprt-text",
+          className
+        ),
+        style: {
+          ...sized ? { tableLayout: "fixed", width: widths.reduce((sum, width) => sum + width, 0) } : {},
+          ...style
+        },
+        "aria-rowcount": indexed ? (totalRowCount ?? rows.length) + 1 : void 0,
+        onBlurCapture: (event) => {
+          if (!event.currentTarget.contains(event.relatedTarget))
+            rowWindow.clearFocus();
+          onBlurCapture?.(event);
+        },
+        ...props,
+        children: [
+          caption && /* @__PURE__ */ jsx("caption", { className: "sr-only", children: caption }),
+          /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsx("tr", { "aria-rowindex": indexed ? 1 : void 0, children: columns.map((col, columnIndex) => {
+            const active = columnSortable(col);
+            const dir = externallySorted ? sortDescriptor?.key === col.key ? sortDescriptor.direction : null : sort && sort.key === col.key ? sort.dir : null;
+            return /* @__PURE__ */ jsx(
+              "th",
+              {
+                scope: "col",
+                "aria-sort": ariaSortFor(col),
+                style: {
+                  ...sized ? { width: widths[columnIndex] } : col.width ? { width: col.width } : {},
+                  ...pinnedColumnKeys.includes(col.key) ? { position: "sticky", left: leftFor(columnIndex) } : {}
+                },
+                className: clsx(
+                  "px-oprt-cell-inline text-oprt-sm font-medium uppercase tracking-oprt-sm text-oprt-text-dim border-b border-oprt-border align-middle",
+                  !sized && "whitespace-nowrap",
+                  dense ? "py-oprt-cell-block-dense h-oprt-row-dense" : "py-oprt-cell-block h-oprt-row",
+                  isRightAligned(col) ? "text-right" : "text-left",
+                  pinnedColumnKeys.includes(col.key) && "z-10 bg-oprt-surface-1"
+                ),
+                children: active ? /* @__PURE__ */ jsxs(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: () => toggleSort(col.key),
+                    className: "inline-flex items-center gap-1u h-oprt-sm whitespace-nowrap text-oprt-base font-medium uppercase tracking-oprt-sm border border-transparent focus-visible:border-oprt-border-focus focus-visible:shadow-oprt-focus focus-visible:outline-hidden",
+                    children: [
+                      col.label,
+                      /* @__PURE__ */ jsx(SortGlyph, { dir })
+                    ]
+                  }
+                ) : externallySorted && dir ? /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-1u", children: [
+                  col.label,
+                  /* @__PURE__ */ jsx(SortGlyph, { dir })
+                ] }) : col.label
+              },
+              col.key
+            );
+          }) }) }),
+          /* @__PURE__ */ jsxs("tbody", { children: [
+            body,
+            rows.length === 0 && /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx(
+              "td",
+              {
+                colSpan: Math.max(columns.length, 1),
+                className: "px-2u py-4u text-oprt-text-dim border-b border-oprt-border",
+                children: emptyMessage
+              }
+            ) })
+          ] })
+        ]
+      }
+    );
+    const regionName = `${caption ?? "Data table"} scroll viewport`;
+    return virtualization ? /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref: rowWindow.viewport,
+        role: "region",
+        "aria-label": regionName,
+        tabIndex: 0,
+        style: { height: rowWindow.height, overflowAnchor: "none" },
+        className: "overflow-auto border border-oprt-border focus-visible:outline-hidden focus-visible:border-oprt-border-focus focus-visible:shadow-oprt-focus",
+        onScroll: rowWindow.onScroll,
+        children: table
+      }
+    ) : (
+      // Columns that do not fit scroll sideways inside the table's own box, never the page (R6).
+      // While they do, the box is a named region and a tab stop, so a keyboard can scroll it; while
+      // the table fits it is a plain box that adds no tab stop.
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          ref: box,
+          "data-oprt-table-scroll": "",
+          className: clsx(
+            "max-w-full overflow-x-auto",
+            scrolls && "border border-transparent focus-visible:outline-hidden focus-visible:border-oprt-border-focus focus-visible:shadow-oprt-focus"
+          ),
+          ...scrolls ? { role: "region", "aria-label": regionName, tabIndex: 0 } : {},
+          children: table
+        }
+      )
+    );
+  }
+);
+DataTable.displayName = "DataTable";
+export {
+  DataTable,
+  SORTABLE_ROWS_UNWINDOWED
+};

package/dist/DataTable/DataTable.manifest.js

@@ -0,0 +1,86 @@
+// src/DataTable/DataTable.manifest.ts
+var DataTableManifest = {
+  DataTable: {
+    description: "Data-driven table with sorting, highlighting, and cell rendering.",
+    props: {
+      columns: {
+        type: "array",
+        required: true,
+        description: "Column descriptors. Each item: { key: string (required), label: string (required), as?: 'text'|'number'|'code'|'timestamp'|'badge' (default 'text'), highlight?: boolean (default false), sortable?: boolean (default inherits table 'sortable'), width?: string (CSS width), align?: 'left'|'right' }. 'number'/'timestamp' cells render mono + right-aligned; with columnWidths a 'number' cell wraps only between digit groups and keeps a unit with its last group; 'badge' maps the value to a text-only Badge (success/warning/error/info use their semantic color, otherwise neutral). Use a custom render for outlined badges or an explicit indicator.",
+        items: {
+          key: "string (required)",
+          label: "string (required)",
+          as: "enum [text, number, code, timestamp, badge] (default: text)",
+          highlight: "boolean (default: false)",
+          sortable: "boolean (default: inherits from table)",
+          width: "string",
+          align: "enum [left, right]",
+          render: "(value, originalRow) => ReactNode; called for mounted cells only"
+        }
+      },
+      data: {
+        type: "array",
+        required: true,
+        description: "Array of row objects (Record<string, unknown>) keyed by column.key."
+      },
+      sortable: {
+        type: "boolean",
+        default: false,
+        description: "Enables column header sort buttons (cycles ascending \u2192 descending \u2192 unsorted) when sortDescriptor is omitted. Per-column 'sortable: false' opts a column out. Designed for about 150 rows without virtualization: development warns above that; use DataGrid or virtualization for larger result sets."
+      },
+      sortDescriptor: {
+        type: "node",
+        description: "Read-only { key: string, direction: 'asc' | 'desc' } metadata for rows already sorted by the caller. The matching header exposes aria-sort and a direction glyph; data order is preserved and internal header sort controls are disabled even when sortable is true. Pass null for externally managed source order. Omit to retain existing internal sortable behavior."
+      },
+      dense: {
+        type: "boolean",
+        default: false,
+        description: "Compact rows: 32px minimum height with 4px vertical cell padding. Default rows use a 40px minimum and 8px padding. Rows grow with content; explicit virtualization.rowHeight overrides these dimensions."
+      },
+      onRowClick: {
+        type: "function",
+        description: "(row, indexInSuppliedData) => void. The index is the row's index in data, also after a header sort. Adds a native action button to the first cell while preserving table row semantics. Text and number cells become the button label; React content remains independent beside an Open row button. Nested controls and editable content do not activate the row. Enter/Space activate the row button."
+      },
+      getRowId: {
+        type: "function",
+        description: "(row, index) => string. Stable React key per row; falls back to the index. Keep it pure: IDs are read again only when data changes, not when only the function does."
+      },
+      caption: {
+        type: "string",
+        description: "Accessible table caption, visually hidden (sr-only). It also names the table's scroll region, '<caption> scroll viewport': a table whose columns do not fit scrolls sideways inside its own box, which is a keyboard tab stop while it scrolls; the page never widens."
+      },
+      emptyMessage: {
+        type: "string",
+        default: "No results.",
+        description: "Message spanning all columns when data is empty."
+      },
+      columnWidths: {
+        type: "node",
+        description: "Record<columnKey, CSS pixel width> for fixed table layout. Unspecified columns use 160 pixels. DataGrid provides bounded user controls."
+      },
+      pinnedColumnKeys: {
+        type: "array",
+        description: "Column keys to keep sticky at the leading edge. Supply pinned columns first in columns, in the desired order, with columnWidths for accurate offsets. DataGrid manages this ordering automatically."
+      },
+      virtualization: {
+        type: "node",
+        description: "Optional {height, rowHeight?, estimateRowHeight?, overscan?}. Native rows are windowed in a labeled scrolling region. Omit rowHeight for measured variable heights; fixed rows clip overlong content. Prefer DataGrid for its built-in paginated fallback. Stable getRowId is required for retained focus across data changes."
+      },
+      rowIndexOffset: {
+        type: "number",
+        default: 0,
+        description: "Zero-based offset into the complete result set. Data rows announce offset + local index + 2, including the header."
+      },
+      totalRowCount: {
+        type: "number",
+        description: "Total data rows excluding the header. Native table aria-rowcount includes the header as one additional row."
+      }
+    },
+    composable_with: ["Card"],
+    never_inside: ["DataTable"],
+    example: '<DataTable\n  columns={[\n    { key: "service", label: "SERVICE" },\n    { key: "latency", label: "LATENCY", as: "number", highlight: true },\n    { key: "status", label: "STATUS", as: "badge" }\n  ]}\n  data={rows}\n  sortable\n/>'
+  }
+};
+export {
+  DataTableManifest
+};

package/dist/DataTable/index.js

@@ -0,0 +1,9 @@
+// src/DataTable/index.ts
+import {
+  DataTable
+} from "./DataTable.js";
+import { DataTableManifest } from "./DataTable.manifest.js";
+export {
+  DataTable,
+  DataTableManifest
+};

package/dist/DataTable/sort.js

@@ -0,0 +1,45 @@
+// src/DataTable/sort.ts
+var isFiniteNumber = (value) => typeof value === "number" && Number.isFinite(value);
+var textOf = (value) => String(value ?? "");
+function compareCellValues(a, b) {
+  if (isFiniteNumber(a) && isFiniteNumber(b)) return a - b;
+  return textOf(a).localeCompare(textOf(b));
+}
+function sortedOrder(values, direction, compare) {
+  const order = Array.from({ length: values.length }, (_, index) => index);
+  if (compare) {
+    order.sort((i, j) => {
+      const result = compare(values[i], values[j]);
+      return Number.isFinite(result) ? result * direction : 0;
+    });
+    return order;
+  }
+  let numbers = 0;
+  for (const value of values) if (isFiniteNumber(value)) numbers++;
+  if (numbers === values.length) {
+    const numeric = Float64Array.from(values);
+    order.sort((i, j) => (numeric[i] - numeric[j]) * direction);
+    return order;
+  }
+  if (numbers === 0) {
+    const texts = values.map(textOf);
+    const distinct = [...new Set(texts)].sort((a, b) => a.localeCompare(b));
+    const ranks = /* @__PURE__ */ new Map();
+    let rank = -1;
+    let previous;
+    for (const text of distinct) {
+      if (previous === void 0 || previous.localeCompare(text) !== 0) rank++;
+      ranks.set(text, rank);
+      previous = text;
+    }
+    const ranked = Int32Array.from(texts, (text) => ranks.get(text));
+    order.sort((i, j) => (ranked[i] - ranked[j]) * direction);
+    return order;
+  }
+  order.sort((i, j) => compareCellValues(values[i], values[j]) * direction);
+  return order;
+}
+export {
+  compareCellValues,
+  sortedOrder
+};

package/dist/DataTable/useScrollsSideways.js

@@ -0,0 +1,61 @@
+"use client";
+
+// src/DataTable/useScrollsSideways.ts
+import { useCallback, useEffect, useRef, useState } from "react";
+import { useIsomorphicLayoutEffect } from "../_internal/useIsomorphicLayoutEffect.js";
+import { createResizeObserver } from "../_internal/useElementWidth.js";
+function useScrollsSideways(enabled = true) {
+  const box = useRef(null);
+  const followed = useRef(null);
+  const [scrolling, setScrolling] = useState(null);
+  const answered = useRef(scrolling);
+  useIsomorphicLayoutEffect(() => {
+    answered.current = scrolling;
+  });
+  const setBox = useCallback((element) => {
+    box.current = element;
+    if (element !== null && answered.current !== null && answered.current !== element) {
+      setScrolling(null);
+    }
+  }, []);
+  useIsomorphicLayoutEffect(() => {
+    const element = enabled ? box.current : null;
+    if (followed.current?.element === element) return;
+    followed.current?.stop();
+    followed.current = null;
+    if (!element) return;
+    let current = answered.current === element;
+    const measure = (focused = element.ownerDocument.activeElement === element) => {
+      const scrolls = element.scrollWidth > element.clientWidth + 1 || focused;
+      if (scrolls === current) return;
+      current = scrolls;
+      setScrolling(scrolls ? element : null);
+    };
+    const blurred = () => measure(false);
+    measure();
+    element.addEventListener("blur", blurred);
+    const observer = createResizeObserver(() => measure());
+    if (observer) {
+      observer.observe(element);
+      for (const child of Array.from(element.children)) observer.observe(child);
+    }
+    followed.current = {
+      element,
+      stop: () => {
+        element.removeEventListener("blur", blurred);
+        observer?.disconnect();
+      }
+    };
+  });
+  useEffect(
+    () => () => {
+      followed.current?.stop();
+      followed.current = null;
+    },
+    []
+  );
+  return [setBox, enabled && scrolling !== null && scrolling === box.current];
+}
+export {
+  useScrollsSideways
+};