@octanejs/base-ui 0.1.31 → 0.1.32

package/dist/cjs/utils/composite/CompositeListContext.cjs

@@ -0,0 +1,43 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var CompositeListContext_exports = {};
+__export(CompositeListContext_exports, {
+  CompositeListContext: () => CompositeListContext,
+  useCompositeListContext: () => useCompositeListContext
+});
+module.exports = __toCommonJS(CompositeListContext_exports);
+var import_octane = require("octane");
+const CompositeListContext = (0, import_octane.createContext)({
+  register: () => {
+  },
+  unregister: () => {
+  },
+  subscribeMapChange: () => () => {
+  },
+  elementsRef: { current: [] },
+  nextIndexRef: { current: 0 }
+});
+function useCompositeListContext() {
+  return (0, import_octane.useContext)(CompositeListContext);
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  CompositeListContext,
+  useCompositeListContext
+});

package/dist/cjs/utils/composite/CompositeRoot.cjs

@@ -0,0 +1,118 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var CompositeRoot_exports = {};
+__export(CompositeRoot_exports, {
+  CompositeRoot: () => CompositeRoot
+});
+module.exports = __toCommonJS(CompositeRoot_exports);
+var import_octane = require("octane");
+var import_internal = require("../../internal.cjs");
+var import_useRenderElement = require("../useRenderElement.cjs");
+var import_DirectionContext = require("../DirectionContext.cjs");
+var import_CompositeRootContext = require("../CompositeRootContext.cjs");
+var import_CompositeList = require("./CompositeList.cjs");
+var import_useCompositeRoot = require("./useCompositeRoot.cjs");
+const EMPTY_ARRAY = [];
+const EMPTY_OBJECT = {};
+function CompositeRoot(componentProps) {
+  const slot = (0, import_internal.S)("CompositeRoot");
+  const {
+    render,
+    className,
+    style,
+    refs = EMPTY_ARRAY,
+    props = EMPTY_ARRAY,
+    state = EMPTY_OBJECT,
+    stateAttributesMapping,
+    highlightedIndex: highlightedIndexProp,
+    onHighlightedIndexChange: onHighlightedIndexChangeProp,
+    orientation,
+    grid,
+    loopFocus,
+    onLoop,
+    enableHomeAndEndKeys,
+    onMapChange: onMapChangeProp,
+    stopEventPropagation = true,
+    rootRef,
+    disabledIndices,
+    modifierKeys,
+    highlightItemOnHover = false,
+    tag = "div",
+    ...elementProps
+  } = componentProps;
+  const direction = (0, import_DirectionContext.useDirection)();
+  const {
+    props: defaultProps,
+    highlightedIndex,
+    onHighlightedIndexChange,
+    elementsRef,
+    onMapChange: onMapChangeUnwrapped,
+    relayKeyboardEvent
+  } = (0, import_useCompositeRoot.useCompositeRoot)(
+    {
+      grid,
+      loopFocus,
+      onLoop,
+      orientation,
+      highlightedIndex: highlightedIndexProp,
+      onHighlightedIndexChange: onHighlightedIndexChangeProp,
+      rootRef,
+      stopEventPropagation,
+      enableHomeAndEndKeys,
+      direction,
+      disabledIndices,
+      modifierKeys
+    },
+    (0, import_internal.subSlot)(slot, "root")
+  );
+  const element = (0, import_useRenderElement.useRenderElement)(
+    tag,
+    { render, className, style },
+    {
+      state,
+      ref: refs,
+      props: [defaultProps, ...props, elementProps],
+      stateAttributesMapping
+    },
+    (0, import_internal.subSlot)(slot, "re")
+  );
+  const contextValue = (0, import_octane.useMemo)(
+    () => ({
+      highlightedIndex,
+      onHighlightedIndexChange,
+      highlightItemOnHover,
+      relayKeyboardEvent
+    }),
+    [highlightedIndex, onHighlightedIndexChange, highlightItemOnHover, relayKeyboardEvent],
+    (0, import_internal.subSlot)(slot, "ctx")
+  );
+  const list = (0, import_octane.createElement)(import_CompositeList.CompositeList, {
+    elementsRef,
+    onMapChange: (newMap) => {
+      onMapChangeProp?.(newMap);
+      onMapChangeUnwrapped(newMap);
+    },
+    children: element
+  });
+  return (0, import_octane.createElement)(import_CompositeRootContext.CompositeRootContext.Provider, { value: contextValue, children: list });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  CompositeRoot
+});

package/dist/cjs/utils/composite/grid-utils.cjs

@@ -0,0 +1,343 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var grid_utils_exports = {};
+__export(grid_utils_exports, {
+  createGridCellMap: () => createGridCellMap,
+  getGridCellIndexOfCorner: () => getGridCellIndexOfCorner,
+  getGridCellIndices: () => getGridCellIndices,
+  getGridNavigatedIndex: () => getGridNavigatedIndex
+});
+module.exports = __toCommonJS(grid_utils_exports);
+var import_utils = require("@floating-ui/utils");
+var import_keys = require("./keys.cjs");
+var import_list_utils = require("./list-utils.cjs");
+function getGridNavigatedIndex(list, {
+  event,
+  orientation,
+  loopFocus,
+  onLoop,
+  rtl,
+  cols,
+  disabledIndices,
+  minIndex,
+  maxIndex,
+  prevIndex,
+  stopEvent: stop = false
+}) {
+  let nextIndex = prevIndex;
+  let verticalDirection;
+  if (event.key === import_keys.ARROW_UP) {
+    verticalDirection = "up";
+  } else if (event.key === import_keys.ARROW_DOWN) {
+    verticalDirection = "down";
+  }
+  if (verticalDirection) {
+    const rows = [];
+    const rowIndexMap = [];
+    let hasRoleRow = false;
+    let visibleItemCount = 0;
+    {
+      let currentRowEl = null;
+      let currentRowIndex = -1;
+      list.forEach((el, idx) => {
+        if (el == null) {
+          return;
+        }
+        visibleItemCount += 1;
+        const rowEl = el.closest('[role="row"]');
+        if (rowEl) {
+          hasRoleRow = true;
+        }
+        if (rowEl !== currentRowEl || currentRowIndex === -1) {
+          currentRowEl = rowEl;
+          currentRowIndex += 1;
+          rows[currentRowIndex] = [];
+        }
+        rows[currentRowIndex].push(idx);
+        rowIndexMap[idx] = currentRowIndex;
+      });
+    }
+    let hasDomRows = false;
+    let inferredDomCols = 0;
+    if (hasRoleRow) {
+      for (const row of rows) {
+        const rowLength = row.length;
+        if (rowLength > inferredDomCols) {
+          inferredDomCols = rowLength;
+        }
+        if (rowLength !== cols) {
+          hasDomRows = true;
+        }
+      }
+    }
+    const hasVirtualizedGaps = hasDomRows && visibleItemCount < list.length;
+    const verticalCols = inferredDomCols || cols;
+    const navigateVertically = (direction) => {
+      if (!hasDomRows || prevIndex === -1) {
+        return void 0;
+      }
+      const currentRow = rowIndexMap[prevIndex];
+      if (currentRow == null) {
+        return void 0;
+      }
+      const colInRow = rows[currentRow].indexOf(prevIndex);
+      const step = direction === "up" ? -1 : 1;
+      for (let nextRow = currentRow + step, i = 0; i < rows.length; i += 1, nextRow += step) {
+        if (nextRow < 0 || nextRow >= rows.length) {
+          if (!loopFocus || hasVirtualizedGaps) {
+            return void 0;
+          }
+          nextRow = nextRow < 0 ? rows.length - 1 : 0;
+          if (onLoop) {
+            const clampedCol = Math.min(colInRow, rows[nextRow].length - 1);
+            const targetItemIndex = rows[nextRow][clampedCol] ?? rows[nextRow][0];
+            const returnedItemIndex = onLoop(event, prevIndex, targetItemIndex);
+            nextRow = rowIndexMap[returnedItemIndex] ?? nextRow;
+          }
+        }
+        const targetRow = rows[nextRow];
+        for (let col = Math.min(colInRow, targetRow.length - 1); col >= 0; col -= 1) {
+          const candidate = targetRow[col];
+          if (!(0, import_list_utils.isListIndexDisabled)(list, candidate, disabledIndices)) {
+            return candidate;
+          }
+        }
+      }
+      return void 0;
+    };
+    const navigateVerticallyWithInferredRows = (direction) => {
+      if (!hasVirtualizedGaps || prevIndex === -1) {
+        return void 0;
+      }
+      const colInRow = prevIndex % verticalCols;
+      const rowStep = direction === "up" ? -verticalCols : verticalCols;
+      const lastRowStart = maxIndex - maxIndex % verticalCols;
+      const rowCount = (0, import_utils.floor)(maxIndex / verticalCols) + 1;
+      for (let rowStart = prevIndex - colInRow + rowStep, i = 0; i < rowCount; i += 1, rowStart += rowStep) {
+        if (rowStart < 0 || rowStart > maxIndex) {
+          if (!loopFocus) {
+            return void 0;
+          }
+          rowStart = rowStart < 0 ? lastRowStart : 0;
+        }
+        const rowEnd = Math.min(rowStart + verticalCols - 1, maxIndex);
+        for (let candidate = Math.min(rowStart + colInRow, rowEnd); candidate >= rowStart; candidate -= 1) {
+          if (!(0, import_list_utils.isListIndexDisabled)(list, candidate, disabledIndices)) {
+            return candidate;
+          }
+        }
+      }
+      return void 0;
+    };
+    if (stop) {
+      (0, import_list_utils.stopEvent)(event);
+    }
+    const verticalCandidate = navigateVertically(verticalDirection) ?? navigateVerticallyWithInferredRows(verticalDirection);
+    if (verticalCandidate !== void 0) {
+      nextIndex = verticalCandidate;
+    } else if (prevIndex === -1) {
+      nextIndex = verticalDirection === "up" ? maxIndex : minIndex;
+    } else {
+      nextIndex = (0, import_list_utils.findNonDisabledListIndex)(list, {
+        startingIndex: prevIndex,
+        amount: verticalCols,
+        decrement: verticalDirection === "up",
+        disabledIndices
+      });
+      if (loopFocus) {
+        if (verticalDirection === "up" && (prevIndex - verticalCols < minIndex || nextIndex < 0)) {
+          const col = prevIndex % verticalCols;
+          const maxCol = maxIndex % verticalCols;
+          const offset = maxIndex - (maxCol - col);
+          if (maxCol === col) {
+            nextIndex = maxIndex;
+          } else {
+            nextIndex = maxCol > col ? offset : offset - verticalCols;
+          }
+          if (onLoop) {
+            nextIndex = onLoop(event, prevIndex, nextIndex);
+          }
+        }
+        if (verticalDirection === "down" && prevIndex + verticalCols > maxIndex) {
+          nextIndex = (0, import_list_utils.findNonDisabledListIndex)(list, {
+            startingIndex: prevIndex % verticalCols - verticalCols,
+            amount: verticalCols,
+            disabledIndices
+          });
+          if (onLoop) {
+            nextIndex = onLoop(event, prevIndex, nextIndex);
+          }
+        }
+      }
+    }
+    if ((0, import_list_utils.isIndexOutOfListBounds)(list, nextIndex)) {
+      nextIndex = prevIndex;
+    }
+  }
+  if (orientation === "both") {
+    const prevRow = (0, import_utils.floor)(prevIndex / cols);
+    if (event.key === (rtl ? import_keys.ARROW_LEFT : import_keys.ARROW_RIGHT)) {
+      if (stop) {
+        (0, import_list_utils.stopEvent)(event);
+      }
+      if (prevIndex % cols !== cols - 1) {
+        nextIndex = (0, import_list_utils.findNonDisabledListIndex)(list, {
+          startingIndex: prevIndex,
+          disabledIndices
+        });
+        if (loopFocus && (0, import_list_utils.isDifferentGridRow)(nextIndex, cols, prevRow)) {
+          nextIndex = (0, import_list_utils.findNonDisabledListIndex)(list, {
+            startingIndex: prevIndex - prevIndex % cols - 1,
+            disabledIndices
+          });
+          if (onLoop) {
+            nextIndex = onLoop(event, prevIndex, nextIndex);
+          }
+        }
+      } else if (loopFocus) {
+        nextIndex = (0, import_list_utils.findNonDisabledListIndex)(list, {
+          startingIndex: prevIndex - prevIndex % cols - 1,
+          disabledIndices
+        });
+        if (onLoop) {
+          nextIndex = onLoop(event, prevIndex, nextIndex);
+        }
+      }
+      if ((0, import_list_utils.isDifferentGridRow)(nextIndex, cols, prevRow)) {
+        nextIndex = prevIndex;
+      }
+    }
+    if (event.key === (rtl ? import_keys.ARROW_RIGHT : import_keys.ARROW_LEFT)) {
+      if (stop) {
+        (0, import_list_utils.stopEvent)(event);
+      }
+      if (prevIndex % cols !== 0) {
+        nextIndex = (0, import_list_utils.findNonDisabledListIndex)(list, {
+          startingIndex: prevIndex,
+          decrement: true,
+          disabledIndices
+        });
+        if (loopFocus && (0, import_list_utils.isDifferentGridRow)(nextIndex, cols, prevRow)) {
+          nextIndex = (0, import_list_utils.findNonDisabledListIndex)(list, {
+            startingIndex: prevIndex + (cols - prevIndex % cols),
+            decrement: true,
+            disabledIndices
+          });
+          if (onLoop) {
+            nextIndex = onLoop(event, prevIndex, nextIndex);
+          }
+        }
+      } else if (loopFocus) {
+        nextIndex = (0, import_list_utils.findNonDisabledListIndex)(list, {
+          startingIndex: prevIndex + (cols - prevIndex % cols),
+          decrement: true,
+          disabledIndices
+        });
+        if (onLoop) {
+          nextIndex = onLoop(event, prevIndex, nextIndex);
+        }
+      }
+      if ((0, import_list_utils.isDifferentGridRow)(nextIndex, cols, prevRow)) {
+        nextIndex = prevIndex;
+      }
+    }
+    const lastRow = (0, import_utils.floor)(maxIndex / cols) === prevRow;
+    if ((0, import_list_utils.isIndexOutOfListBounds)(list, nextIndex)) {
+      if (loopFocus && lastRow) {
+        nextIndex = event.key === (rtl ? import_keys.ARROW_RIGHT : import_keys.ARROW_LEFT) ? maxIndex : (0, import_list_utils.findNonDisabledListIndex)(list, {
+          startingIndex: prevIndex - prevIndex % cols - 1,
+          disabledIndices
+        });
+        if (onLoop) {
+          nextIndex = onLoop(event, prevIndex, nextIndex);
+        }
+      } else {
+        nextIndex = prevIndex;
+      }
+    }
+  }
+  return nextIndex;
+}
+function createGridCellMap(sizes, cols, dense) {
+  const cellMap = [];
+  let startIndex = 0;
+  sizes.forEach(({ width, height }, index) => {
+    if (width > cols) {
+      throw new Error(
+        `[Floating UI]: Invalid grid - item width at index ${index} is greater than grid columns`
+      );
+    }
+    let itemPlaced = false;
+    if (dense) {
+      startIndex = 0;
+    }
+    while (!itemPlaced) {
+      const targetCells = [];
+      for (let i = 0; i < width; i += 1) {
+        for (let j = 0; j < height; j += 1) {
+          targetCells.push(startIndex + i + j * cols);
+        }
+      }
+      if (startIndex % cols + width <= cols && targetCells.every((cell) => cellMap[cell] == null)) {
+        targetCells.forEach((cell) => {
+          cellMap[cell] = index;
+        });
+        itemPlaced = true;
+      } else {
+        startIndex += 1;
+      }
+    }
+  });
+  return [...cellMap];
+}
+function getGridCellIndexOfCorner(index, sizes, cellMap, cols, corner) {
+  if (index === -1) {
+    return -1;
+  }
+  const firstCellIndex = cellMap.indexOf(index);
+  const sizeItem = sizes[index];
+  switch (corner) {
+    case "tl":
+      return firstCellIndex;
+    case "tr":
+      if (!sizeItem) {
+        return firstCellIndex;
+      }
+      return firstCellIndex + sizeItem.width - 1;
+    case "bl":
+      if (!sizeItem) {
+        return firstCellIndex;
+      }
+      return firstCellIndex + (sizeItem.height - 1) * cols;
+    case "br":
+      return cellMap.lastIndexOf(index);
+    default:
+      return -1;
+  }
+}
+function getGridCellIndices(indices, cellMap) {
+  return cellMap.flatMap((index, cellIndex) => indices.includes(index) ? [cellIndex] : []);
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  createGridCellMap,
+  getGridCellIndexOfCorner,
+  getGridCellIndices,
+  getGridNavigatedIndex
+});

package/dist/cjs/utils/composite/gridNavigation.cjs

@@ -0,0 +1,92 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var gridNavigation_exports = {};
+__export(gridNavigation_exports, {
+  gridNavigation: () => gridNavigation
+});
+module.exports = __toCommonJS(gridNavigation_exports);
+var import_grid_utils = require("./grid-utils.cjs");
+var import_list_utils = require("./list-utils.cjs");
+var import_keys = require("./keys.cjs");
+function gridNavigation(config) {
+  const { cols, dense = false, itemSizes } = config;
+  return (state) => {
+    const {
+      disabledIndices,
+      elementsRef,
+      event,
+      highlightedIndex,
+      loopFocus,
+      maxIndex,
+      minIndex,
+      onLoop,
+      orientation,
+      rtl
+    } = state;
+    const sizes = itemSizes || Array.from({ length: elementsRef.current.length }, () => ({
+      width: 1,
+      height: 1
+    }));
+    const cellMap = (0, import_grid_utils.createGridCellMap)(sizes, cols, dense);
+    const minGridIndex = cellMap.findIndex(
+      (index) => index != null && !(0, import_list_utils.isListIndexDisabled)(elementsRef.current, index, disabledIndices)
+    );
+    const maxGridIndex = cellMap.reduce(
+      (foundIndex, index, cellIndex2) => index != null && !(0, import_list_utils.isListIndexDisabled)(elementsRef.current, index, disabledIndices) ? cellIndex2 : foundIndex,
+      -1
+    );
+    const cellIndex = (0, import_grid_utils.getGridNavigatedIndex)(
+      cellMap.map((itemIndex) => itemIndex != null ? elementsRef.current[itemIndex] : null),
+      {
+        event,
+        orientation,
+        loopFocus,
+        onLoop,
+        cols,
+        // Treat undefined gaps as disabled so navigation cannot land in them.
+        disabledIndices: (0, import_grid_utils.getGridCellIndices)(
+          [
+            ...disabledIndices || elementsRef.current.map(
+              (_, index) => (0, import_list_utils.isListIndexDisabled)(elementsRef.current, index) ? index : void 0
+            ),
+            void 0
+          ],
+          cellMap
+        ),
+        minIndex: minGridIndex,
+        maxIndex: maxGridIndex,
+        prevIndex: (0, import_grid_utils.getGridCellIndexOfCorner)(
+          highlightedIndex > maxIndex ? minIndex : highlightedIndex,
+          sizes,
+          cellMap,
+          cols,
+          // Choose the corner closest to the movement direction so spanning items
+          // do not immediately resolve back to themselves.
+          event.key === import_keys.ARROW_DOWN ? "bl" : event.key === (rtl ? import_keys.ARROW_LEFT : import_keys.ARROW_RIGHT) ? "tr" : "tl"
+        ),
+        rtl
+      }
+    );
+    return cellMap[cellIndex];
+  };
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  gridNavigation
+});