@lumx/react 4.17.1-alpha.2 → 4.17.1-alpha.3

package/_internal/utils/moving-focus/hooks/useRovingTabIndex/useRovingTabIndex.js

@@ -0,0 +1,81 @@
+import { getPointerTypeFromEvent } from "../../utils/getPointerTypeFromEvent.js";
+import { NAV_KEYS } from "../../ducks/keyboard-navigation.js";
+import { MovingFocusContext } from "../../components/MovingFocusProvider/context.js";
+import React from "react";
+import isNil from "lodash/isNil.js";
+import uniqueId from "lodash/uniqueId.js";
+//#region src/utils/moving-focus/hooks/useRovingTabIndex/useRovingTabIndex.ts
+/**
+* Includes the given DOM element in the current roving tabindex.
+*/
+var useRovingTabIndex = (ref, disabled = false, rowKey = null, autofocus = false) => {
+	const idRef = React.useRef(null);
+	function getId() {
+		if (!idRef.current) idRef.current = uniqueId("rti_");
+		return idRef.current;
+	}
+	const isMounted = React.useRef(false);
+	const { dispatch, state } = React.useContext(MovingFocusContext);
+	const { direction } = state;
+	React.useEffect(() => {
+		const id = getId();
+		dispatch({
+			type: "REGISTER_TAB_STOP",
+			payload: {
+				id,
+				domElementRef: ref,
+				rowKey,
+				disabled,
+				autofocus
+			}
+		});
+		return () => {
+			dispatch({
+				type: "UNREGISTER_TAB_STOP",
+				payload: { id }
+			});
+		};
+	}, [state.listKey]);
+	React.useEffect(() => {
+		if (isMounted.current) dispatch({
+			type: "UPDATE_TAB_STOP",
+			payload: {
+				id: getId(),
+				rowKey,
+				disabled
+			}
+		});
+		else isMounted.current = true;
+	}, [rowKey, disabled]);
+	const handleKeyDown = React.useCallback((evt) => {
+		if (!NAV_KEYS[!isNil(rowKey) ? "both" : direction].includes(evt.key)) return;
+		dispatch({
+			type: "KEY_NAV",
+			payload: {
+				id: getId(),
+				key: evt.key,
+				ctrlKey: evt.ctrlKey
+			}
+		});
+		evt.preventDefault();
+		evt.stopPropagation();
+	}, []);
+	const handleClick = React.useCallback((event) => {
+		dispatch({
+			type: "SELECT_TAB_STOP",
+			payload: {
+				id: getId(),
+				type: getPointerTypeFromEvent(event)
+			}
+		});
+	}, []);
+	const selected = getId() === state.selectedId;
+	return [
+		selected ? 0 : -1,
+		selected && state.allowFocusing,
+		handleKeyDown,
+		handleClick
+	];
+};
+//#endregion
+export { useRovingTabIndex };

package/_internal/utils/moving-focus/hooks/useVirtualFocus/index.d.ts

@@ -0,0 +1,2 @@
+import { useVirtualFocus } from "./useVirtualFocus.js";
+import { useVirtualFocusParent } from "./useVirtualFocusParent.js";

package/_internal/utils/moving-focus/hooks/useVirtualFocus/useVirtualFocus.d.ts

@@ -0,0 +1,15 @@
+import { BaseHookOptions } from "../../types.js";
+
+//#region src/utils/moving-focus/hooks/useVirtualFocus/useVirtualFocus.d.ts
+/**
+ * Hook options
+ */
+type Options = [/** The DOM id of the tab stop. */id: string, ...baseOptions: BaseHookOptions];
+/**
+ * Hook to use in tab stop element of a virtual focus (ex: options of a listbox in a combobox).
+ *
+ * @returns true if the current tab stop has virtual focus
+ */
+declare const useVirtualFocus: (...args: Options) => boolean;
+//#endregion
+export { useVirtualFocus };

package/_internal/utils/moving-focus/hooks/useVirtualFocus/useVirtualFocus.js

@@ -0,0 +1,83 @@
+import { getPointerTypeFromEvent } from "../../utils/getPointerTypeFromEvent.js";
+import { MovingFocusContext } from "../../components/MovingFocusProvider/context.js";
+import React, { useEffect } from "react";
+//#region src/utils/moving-focus/hooks/useVirtualFocus/useVirtualFocus.ts
+/**
+* Hook to use in tab stop element of a virtual focus (ex: options of a listbox in a combobox).
+*
+* @returns true if the current tab stop has virtual focus
+*/
+var useVirtualFocus = (id, domElementRef, disabled = false, rowKey = null, autofocus = false) => {
+	const isMounted = React.useRef(false);
+	const { state, dispatch } = React.useContext(MovingFocusContext);
+	React.useEffect(
+		() => {
+			const { current: domElement } = domElementRef;
+			if (!domElement) return;
+			const onClick = (event) => {
+				dispatch({
+					type: "SELECT_TAB_STOP",
+					payload: {
+						id,
+						type: getPointerTypeFromEvent(event)
+					}
+				});
+			};
+			domElement.addEventListener("click", onClick);
+			dispatch({
+				type: "REGISTER_TAB_STOP",
+				payload: {
+					id,
+					domElementRef,
+					rowKey,
+					disabled,
+					autofocus
+				}
+			});
+			return () => {
+				domElement.removeEventListener("click", onClick);
+				dispatch({
+					type: "UNREGISTER_TAB_STOP",
+					payload: { id }
+				});
+			};
+		},
+		/**
+		* Pass the list key as dependency to make tab stops
+		* re-register when it changes.
+		*/
+		[state.listKey]
+	);
+	React.useEffect(() => {
+		if (isMounted.current) dispatch({
+			type: "UPDATE_TAB_STOP",
+			payload: {
+				id,
+				rowKey,
+				disabled
+			}
+		});
+		else isMounted.current = true;
+	}, [disabled, rowKey]);
+	const isActive = id === state.selectedId;
+	useEffect(() => {
+		const { current } = domElementRef;
+		if (isActive && current && current.scrollIntoView) {
+			/**
+			* In some cases, the selected item is contained in a popover
+			* that won't be immediately set in the correct position.
+			* Setting a small timeout before scroll the item into view
+			* leaves it time to settle at the correct position.
+			*/
+			const timeout = setTimeout(() => {
+				current.scrollIntoView({ block: "nearest" });
+			}, 10);
+			return () => {
+				clearTimeout(timeout);
+			};
+		}
+	}, [domElementRef, isActive]);
+	return isActive && state.allowFocusing;
+};
+//#endregion
+export { useVirtualFocus };

package/_internal/utils/moving-focus/hooks/useVirtualFocus/useVirtualFocusParent.d.ts

@@ -0,0 +1,10 @@
+import React from "react";
+
+//#region src/utils/moving-focus/hooks/useVirtualFocus/useVirtualFocusParent.d.ts
+/**
+ * Hook to use in a virtual focus parent (ex: `aria-activedescendant` on the input of a combobox).
+ * * @returns the id of the currently active tab stop (virtual focus)
+ */
+declare const useVirtualFocusParent: (ref: React.RefObject<HTMLElement>) => string | undefined;
+//#endregion
+export { useVirtualFocusParent };

package/_internal/utils/moving-focus/hooks/useVirtualFocus/useVirtualFocusParent.js

@@ -0,0 +1,47 @@
+import { NAV_KEYS } from "../../ducks/keyboard-navigation.js";
+import { MovingFocusContext } from "../../components/MovingFocusProvider/context.js";
+import React from "react";
+//#region src/utils/moving-focus/hooks/useVirtualFocus/useVirtualFocusParent.ts
+/**
+* Hook to use in a virtual focus parent (ex: `aria-activedescendant` on the input of a combobox).
+* * @returns the id of the currently active tab stop (virtual focus)
+*/
+var useVirtualFocusParent = (ref) => {
+	const { state, dispatch } = React.useContext(MovingFocusContext);
+	React.useEffect(() => {
+		const { current: element } = ref;
+		if (!element) return;
+		function handleKeyDown(evt) {
+			const eventKey = evt.key;
+			if (!NAV_KEYS[state.direction].includes(eventKey) || evt.altKey || !state.allowFocusing && state.firstFocusDirection && !NAV_KEYS[state.firstFocusDirection].includes(eventKey)) return;
+			if (!state.allowFocusing && eventKey === "ArrowDown") dispatch({
+				type: "SET_ALLOW_FOCUSING",
+				payload: {
+					allow: true,
+					isKeyboardNavigation: true
+				}
+			});
+			else dispatch({
+				type: "KEY_NAV",
+				payload: {
+					key: eventKey,
+					ctrlKey: evt.ctrlKey
+				}
+			});
+			evt.preventDefault();
+		}
+		element.addEventListener("keydown", handleKeyDown);
+		return () => {
+			element.removeEventListener("keydown", handleKeyDown);
+		};
+	}, [
+		dispatch,
+		ref,
+		state.allowFocusing,
+		state.direction,
+		state.firstFocusDirection
+	]);
+	return state.allowFocusing && state.selectedId || void 0;
+};
+//#endregion
+export { useVirtualFocusParent };

package/_internal/utils/moving-focus/index.d.ts

@@ -0,0 +1,5 @@
+import { MovingFocusProvider } from "./components/MovingFocusProvider/index.js";
+import { MovingFocusContext } from "./components/MovingFocusProvider/context.js";
+import { useVirtualFocus } from "./hooks/useVirtualFocus/useVirtualFocus.js";
+import { useVirtualFocusParent } from "./hooks/useVirtualFocus/useVirtualFocusParent.js";
+import { useRovingTabIndex } from "./hooks/useRovingTabIndex/useRovingTabIndex.js";

package/_internal/utils/moving-focus/types.d.ts

@@ -0,0 +1,177 @@
+import { LOOP_AROUND_TYPES } from "./constants.js";
+import { ObjectValues } from "@lumx/core/js/types";
+
+//#region src/utils/moving-focus/types.d.ts
+/**
+ * Base hook options
+ */
+type BaseHookOptions = [
+/**
+ * The DOM element to include.
+ * This must be the same DOM element for the lifetime of the containing component.
+ */
+ref: React.RefObject<Element>,
+/**
+ * Whether or not the DOM element is currently enabled. This value can be updated as appropriate throughout the
+ * lifetime of the containing component.
+ */
+disabled?: boolean,
+/**
+ * An optional string value that must be populated if the roving tabindex is being used in a grid. In that case,
+ * set it to a unique key for all tabStops part of the same row that the given DOM element is currently part of. You can update this
+ * row key as appropriate throughout the lifetime of the containing component, for example if the shape of the
+ * grid can change dynamically.
+ */
+rowKey?: string | number | null, /** Whether the tab stop should be set as selected by default  */autofocus?: boolean];
+type KeyDirection = 'horizontal' | 'vertical' | 'both';
+type LoopTypes = ObjectValues<typeof LOOP_AROUND_TYPES>;
+/**
+ * The behavior to set when the end of a column or row is reached
+ */
+type LoopAroundByAxis = {
+  col: LoopTypes;
+  row: LoopTypes;
+};
+/**
+ * The LoopAround behavior to have.
+ * Can be a boolean as a shortcut
+ *
+ * * true => { row: 'next-loop', col: 'next-loop' }
+ * * false => { row: 'next-end', col: 'next-end' }
+ */
+type LoopAround = LoopAroundByAxis | boolean;
+interface MovingFocusOptions {
+  /**
+   * An optional direction value that only applies when the roving tabindex is not being  used within a grid.
+   * This value specifies the arrow key behaviour.
+   * The default value is 'horizontal'.
+   * When set to 'horizontal' then only the ArrowLeft and ArrowRight keys move to the previous and next tab stop
+   * respectively.
+   * When set to 'vertical' then only the ArrowUp and ArrowDown keys move to the previous and next tab stop
+   * respectively.
+   * When set to 'both' then both the ArrowLeft and ArrowUp keys can be used to move to the previous tab stop, and
+   * both the ArrowRight and ArrowDown keys can be used to move to the next tab stop.
+   * If you do not pass an explicit value then the 'horizontal' behaviour applies.
+   */
+  direction: KeyDirection;
+  /**
+   * Direction in which initial virtual focus must be set focused on the virtual focus parent.
+   * Ex: With `firstFocusDirection: vertical`, pressing "left" and "right" arrows while virtual focus is
+   * not enabled yet will do nothing.
+   * /!\ Only used with `virtualFocus` hooks.
+   */
+  firstFocusDirection?: KeyDirection;
+  /**
+   * An optional flag that, when set to `true`, will loop the tabindex around when the user  tries to tab to the
+   * first or last elements in the roving tabindex, rather than stopping.
+   * The default value is `false` (no looping).
+   * Note that this option does not apply if the roving tabindex is being used on a grid.
+   */
+  loopAround: LoopAround;
+  /**
+   * Id of the tab stop should accept focus if selectedId is undefined.
+   */
+  defaultSelectedId: string | null;
+  /**
+   * Autofocus first or last item after the list/grid is mounted.
+   */
+  autofocus?: 'first' | 'last';
+  /**
+   * The axis on which the "skip" shortcuts (home / end) must function.
+   */
+  gridJumpToShortcutDirection?: 'vertical' | 'horizontal';
+  /**
+   * Enable default selected item focusing
+   *
+   * Note: The `allowFocusing` state property is set at "false" by default until an interaction is made.
+   * This is required to delay focusing of the selected tab stop DOM element
+   * until the user has started interacting with the roving tabindex's controls.
+   * If this delay did not occur, the selected control would be focused as soon as it was mounted, which is
+   * unlikely to be the desired behaviour for the page.
+   */
+  allowFocusing: boolean;
+  /**
+   * An optional an unique key.
+   * If this key is set, tab stops will be re-registered each time the key changes.
+   * If this key is unset, tab stops will only be registered on mount and unregistered on unmount.
+   *
+   * This can be useful to set if you have cases where your tab stops might be reordered without being unmounted.
+   */
+  listKey?: string;
+}
+type TabStopRowKey = string | number;
+type BaseTypeStop = {
+  id: string;
+  domElementRef: React.RefObject<Element>;
+  disabled: boolean;
+  rowKey: TabStopRowKey | null;
+  autofocus?: boolean;
+};
+type TabStop = Readonly<BaseTypeStop>;
+type GridMap = {
+  tabStopsByRowKey: Record<TabStopRowKey, TabStop[]>;
+  rowKeys: Array<TabStopRowKey>;
+};
+type State = Readonly<{
+  /**
+   * Id of the tab stop that can currently accept focus.
+   */
+  selectedId: string | null; /** Whether the user is currently using keyboard navigation */
+  isUsingKeyboard: boolean;
+  /**
+   * Array of tab stops
+   */
+  tabStops: readonly TabStop[];
+  /**
+   * Note: The gridMap is only created if row-related navigation occurs (e.g., move to row start or end).
+   * The map gets cleared if registering, unregistering, or updating.
+   */
+  gridMap: GridMap | null; /** The loop behavior to apply to the columns and rows */
+  loopAround: LoopAroundByAxis;
+} & Omit<MovingFocusOptions, 'loopAround'>>;
+type RegisterAction = {
+  type: 'REGISTER_TAB_STOP';
+  payload: TabStop;
+};
+type UnregisterAction = {
+  type: 'UNREGISTER_TAB_STOP';
+  payload: {
+    id: TabStop['id'];
+  };
+};
+type UpdateTabStopAction = {
+  type: 'UPDATE_TAB_STOP';
+  payload: Pick<TabStop, 'id' | 'rowKey' | 'disabled'>;
+};
+type KeyNavAction = {
+  type: 'KEY_NAV';
+  payload: {
+    id?: TabStop['id'];
+    key: string;
+    ctrlKey: boolean;
+  };
+};
+type SetAllowFocusingAction = {
+  type: 'SET_ALLOW_FOCUSING';
+  payload: {
+    allow: boolean;
+    isKeyboardNavigation?: boolean;
+  };
+};
+type ResetSelectedTabStopAction = {
+  type: 'RESET_SELECTED_TAB_STOP';
+};
+type SelectTabStopAction = {
+  type: 'SELECT_TAB_STOP';
+  payload: {
+    id: TabStop['id'];
+    type?: 'pointer' | 'keyboard';
+  };
+};
+type OptionsUpdatedAction = {
+  type: 'OPTIONS_UPDATED';
+  payload: MovingFocusOptions;
+};
+type Action = RegisterAction | UnregisterAction | UpdateTabStopAction | KeyNavAction | SelectTabStopAction | OptionsUpdatedAction | SetAllowFocusingAction | ResetSelectedTabStopAction;
+//#endregion
+export { Action, BaseHookOptions, MovingFocusOptions, State };

package/_internal/utils/moving-focus/utils/buildLoopAroundObject.js

@@ -0,0 +1,22 @@
+import { LOOP_AROUND_TYPES } from "../constants.js";
+//#region src/utils/moving-focus/utils/buildLoopAroundObject.ts
+/**
+* Build a loopAround configuration to ensure both row and col behavior are set.
+*
+* Setting a boolean will set the following behaviors:
+*
+* * true => { row: 'next-loop', col: 'next-loop' }
+* * false => { row: 'next-end', col: 'next-end' }
+*/
+function buildLoopAroundObject(loopAround) {
+	if (typeof loopAround === "boolean" || loopAround === void 0) return loopAround ? {
+		row: LOOP_AROUND_TYPES.nextLoop,
+		col: LOOP_AROUND_TYPES.nextLoop
+	} : {
+		row: LOOP_AROUND_TYPES.nextEnd,
+		col: LOOP_AROUND_TYPES.nextEnd
+	};
+	return loopAround;
+}
+//#endregion
+export { buildLoopAroundObject };

package/_internal/utils/moving-focus/utils/createGridMap.js

@@ -0,0 +1,17 @@
+import groupBy from "lodash/groupBy.js";
+import isNil from "lodash/isNil.js";
+//#region src/utils/moving-focus/utils/createGridMap.ts
+/**
+* Create a map from the given tab stop to sort them by rowKey;
+*/
+function createGridMap(tabStops) {
+	return {
+		tabStopsByRowKey: groupBy(tabStops, "rowKey"),
+		rowKeys: tabStops.reduce((acc, { rowKey }) => {
+			if (!isNil(rowKey) && !acc.includes(rowKey)) return [...acc, rowKey];
+			return acc;
+		}, [])
+	};
+}
+//#endregion
+export { createGridMap };

package/_internal/utils/moving-focus/utils/getCell.js

@@ -0,0 +1,94 @@
+import { tabStopIsEnabled } from "./tabStopIsEnabled.js";
+import { CELL_SEARCH_DIRECTION } from "../constants.js";
+import findLast from "lodash/findLast.js";
+import find from "lodash/find.js";
+//#region src/utils/moving-focus/utils/getCell.ts
+/**
+* Check that the given coordinate is a simple number
+*/
+var isNumberCoords = (coords) => typeof coords === "number";
+/**
+* Check that the given coordinate is a direction
+*/
+function isDirectionCoords(coords) {
+	return Boolean(typeof coords !== "number" && typeof coords?.from === "number");
+}
+/**
+* Search the given column of a grid map for a cell.
+*/
+function findCellInCol(gridMap, col, rowCoords, cellSelector = tabStopIsEnabled) {
+	/** The rowIndex might not be strictly successive, so we need to use the actual row index keys. */
+	const { rowKeys, tabStopsByRowKey } = gridMap;
+	const lastIndex = rowKeys.length - 1;
+	/**
+	* If the rowCoords.from is set at -1, it means we should search from the start/end.
+	*/
+	let searchIndex = rowCoords.from;
+	if (searchIndex === -1) searchIndex = rowCoords.direction === CELL_SEARCH_DIRECTION.desc ? lastIndex : 0;
+	const rowKeyWithEnabledCell = (rowCoords.direction === CELL_SEARCH_DIRECTION.desc ? findLast : find)(rowKeys, (rowKey, index) => {
+		const cell = tabStopsByRowKey[rowKey][col];
+		const hasCell = Boolean(cell);
+		const cellRowIndex = index;
+		/** Check that the target row index is in the right direction of the search  */
+		const correctRowIndex = rowCoords.direction === CELL_SEARCH_DIRECTION.desc ? cellRowIndex <= searchIndex : cellRowIndex >= searchIndex;
+		if (cell && correctRowIndex) return cellSelector ? hasCell && cellSelector(cell) : hasCell;
+		return false;
+	});
+	return (rowKeyWithEnabledCell !== void 0 ? tabStopsByRowKey[rowKeyWithEnabledCell] : void 0)?.[col];
+}
+/**
+* Search the given column of a grid map for a cell.
+*/
+function findCellInRow(gridMap, row, colCoords, cellSelector = tabStopIsEnabled) {
+	const { direction, from } = colCoords || {};
+	const { rowKeys, tabStopsByRowKey } = gridMap;
+	const currentRow = tabStopsByRowKey[rowKeys[row]];
+	if (!currentRow) return;
+	return (direction === CELL_SEARCH_DIRECTION.desc ? findLast : find)(currentRow, cellSelector, from);
+}
+/**
+* Parse each column of the given gridMap to find the first cell matching the selector.
+* The direction and starting point of the search can be set using the coordinates attribute.
+*/
+function parseColsForCell(gridMap, { direction = CELL_SEARCH_DIRECTION.asc, from }, cellSelector = tabStopIsEnabled) {
+	if (from === void 0) return;
+	const { rowKeys, tabStopsByRowKey } = gridMap;
+	/** As we cannot know for certain when to stop, we need to know which column is the last column */
+	const maxColIndex = rowKeys.reduce((maxLength, rowIndex) => {
+		const rowLength = tabStopsByRowKey[rowIndex].length;
+		return rowLength > maxLength ? rowLength - 1 : maxLength;
+	}, 0);
+	/** If "from" is set as -1, start from the end. */
+	const fromIndex = from === -1 ? maxColIndex : from || 0;
+	for (let index = fromIndex; direction === CELL_SEARCH_DIRECTION.desc ? index > -1 : index <= maxColIndex; direction === CELL_SEARCH_DIRECTION.desc ? index -= 1 : index += 1) {
+		const rowWithEnabledCed = findCellInCol(gridMap, index, {
+			direction,
+			from: direction === CELL_SEARCH_DIRECTION.desc ? -1 : 0
+		}, cellSelector);
+		if (rowWithEnabledCed) return rowWithEnabledCed;
+	}
+}
+/**
+* Search for a cell in a gridMap
+*
+* This allows you to
+* * Select a cell at a specific coordinate
+* * Search for a cell from a specific column in any direction
+* * Search for a cell from a specific row in any direction
+*
+* If no cell is found, returns undefined
+*/
+function getCell(gridMap, coords, cellSelector = tabStopIsEnabled) {
+	const { row, col } = coords || {};
+	const { rowKeys, tabStopsByRowKey } = gridMap || {};
+	/** Defined row and col */
+	if (isNumberCoords(row) && isNumberCoords(col)) return tabStopsByRowKey[rowKeys[row]][col];
+	/** Defined row but variable col */
+	if (isDirectionCoords(col) && isNumberCoords(row)) return findCellInRow(gridMap, row, col, cellSelector);
+	if (isDirectionCoords(row)) {
+		if (isDirectionCoords(col)) return parseColsForCell(gridMap, col, cellSelector);
+		return findCellInCol(gridMap, col, row, cellSelector);
+	}
+}
+//#endregion
+export { getCell };

package/_internal/utils/moving-focus/utils/getCellCoordinates.js

@@ -0,0 +1,16 @@
+import isNil from "lodash/isNil.js";
+//#region src/utils/moving-focus/utils/getCellCoordinates.ts
+function getCellCoordinates(gridMap, tabStop) {
+	const currentRowKey = tabStop.rowKey;
+	if (isNil(currentRowKey)) return;
+	const { rowKeys, tabStopsByRowKey } = gridMap;
+	const rowIndex = rowKeys.findIndex((rowKey) => rowKey === currentRowKey);
+	const row = tabStopsByRowKey[currentRowKey];
+	return {
+		rowIndex,
+		row,
+		columnOffset: row.findIndex((ts) => ts.id === tabStop.id)
+	};
+}
+//#endregion
+export { getCellCoordinates };

package/_internal/utils/moving-focus/utils/getPointerTypeFromEvent.js

@@ -0,0 +1,11 @@
+//#region src/utils/moving-focus/utils/getPointerTypeFromEvent.ts
+/**
+* Get the correct pointer type from the given event.
+* This is used when a tab stop is selected, to check if is has been selected using a keyboard or a pointer
+* (pen / mouse / touch)
+*/
+function getPointerTypeFromEvent(event) {
+	return event && "pointerType" in event && Boolean(event.pointerType) ? "pointer" : "keyboard";
+}
+//#endregion
+export { getPointerTypeFromEvent };

package/_internal/utils/moving-focus/utils/shouldLoopListHorizontally.js

@@ -0,0 +1,7 @@
+//#region src/utils/moving-focus/utils/shouldLoopListHorizontally.ts
+/** Check whether the list should horizontally loop with the given configuration  */
+function shouldLoopListHorizontally(direction, loopAround) {
+	return direction === "horizontal" && loopAround?.row !== "next-end" || direction === "both" && loopAround?.row !== "next-end";
+}
+//#endregion
+export { shouldLoopListHorizontally };

package/_internal/utils/moving-focus/utils/shouldLoopListVertically.js

@@ -0,0 +1,7 @@
+//#region src/utils/moving-focus/utils/shouldLoopListVertically.ts
+/** Check whether the list should vertically loop with the given configuration  */
+function shouldLoopListVertically(direction, loopAround) {
+	return direction === "vertical" && loopAround?.col !== "next-end" || direction === "both" && loopAround?.col !== "next-end";
+}
+//#endregion
+export { shouldLoopListVertically };

package/_internal/utils/moving-focus/utils/tabStopIsEnabled.js

@@ -0,0 +1,5 @@
+//#region src/utils/moving-focus/utils/tabStopIsEnabled.ts
+/** Check if the given tab stop is enabled */
+var tabStopIsEnabled = (tabStop) => !tabStop.disabled;
+//#endregion
+export { tabStopIsEnabled };

package/_internal/utils/number/clamp.d.ts

@@ -0,0 +1,12 @@
+//#region src/utils/number/clamp.d.ts
+/**
+ * Clamp value in range.
+ *
+ * @param value Value to clamp.
+ * @param min   Minimum value.
+ * @param max   Maximum value.
+ * @return Clamped value.
+ */
+declare const clamp: (value: number, min: number, max: number) => number;
+//#endregion
+export { clamp };

package/_internal/utils/number/clamp.js

@@ -0,0 +1,16 @@
+//#region src/utils/number/clamp.ts
+/**
+* Clamp value in range.
+*
+* @param value Value to clamp.
+* @param min   Minimum value.
+* @param max   Maximum value.
+* @return Clamped value.
+*/
+var clamp = (value, min, max) => {
+	if (value < min) return min;
+	if (value > max) return max;
+	return value;
+};
+//#endregion
+export { clamp };

package/_internal/utils/object/isEqual.js

@@ -0,0 +1,14 @@
+//#region src/utils/object/isEqual.ts
+/** Minimal recursive deep equal of JS values */
+function isEqual(obj1, obj2) {
+	if (obj1 === obj2) return true;
+	if (typeof obj1 === "object" && typeof obj2 === "object") {
+		const keys1 = Object.keys(obj1);
+		const keys2 = Object.keys(obj2);
+		if (keys1.length !== keys2.length) return false;
+		return keys1.every((key1) => isEqual(obj1[key1], obj2[key1]));
+	}
+	return false;
+}
+//#endregion
+export { isEqual };