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

package/_internal/utils/ClickAwayProvider/ClickAwayProvider.js

@@ -0,0 +1,46 @@
+import { useClickAway } from "../../hooks/useClickAway.js";
+import { createContext, useContext, useEffect, useMemo, useRef } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/utils/ClickAwayProvider/ClickAwayProvider.tsx
+var ClickAwayAncestorContext = createContext(null);
+/**
+* Component combining the `useClickAway` hook with a React context to hook into the React component tree and make sure
+* we take into account both the DOM tree and the React tree to detect click away.
+*
+* @return the react component.
+*/
+var ClickAwayProvider = ({ children, callback, childrenRefs, parentRef }) => {
+	const parentContext = useContext(ClickAwayAncestorContext);
+	const currentContext = useMemo(() => {
+		const context = {
+			childrenRefs: [],
+			/**
+			* Add element refs to the current context and propagate to the parent context.
+			*/
+			addRefs(...newChildrenRefs) {
+				context.childrenRefs.push(...newChildrenRefs);
+				if (parentContext) {
+					parentContext.addRefs(...newChildrenRefs);
+					if (parentRef) parentContext.addRefs(parentRef);
+				}
+			}
+		};
+		return context;
+	}, [parentContext, parentRef]);
+	useEffect(() => {
+		const { current: currentRefs } = childrenRefs;
+		if (!currentRefs) return;
+		currentContext.addRefs(...currentRefs);
+	}, [currentContext, childrenRefs]);
+	useClickAway({
+		callback,
+		childrenRefs: useRef(currentContext.childrenRefs)
+	});
+	return /* @__PURE__ */ jsx(ClickAwayAncestorContext.Provider, {
+		value: currentContext,
+		children
+	});
+};
+ClickAwayProvider.displayName = "ClickAwayProvider";
+//#endregion
+export { ClickAwayProvider };

package/_internal/utils/ClickAwayProvider/index.d.ts

@@ -0,0 +1 @@
+import { ClickAwayProvider } from "./ClickAwayProvider.js";

package/_internal/utils/InfiniteScroll/InfiniteScroll.d.ts

@@ -0,0 +1,10 @@
+import { InfiniteScrollProps } from "../../packages/lumx-core/src/js/utils/InfiniteScroll/index.js";
+import React from "react";
+
+//#region src/utils/InfiniteScroll/InfiniteScroll.d.ts
+/**
+ * Handles basic callback pattern by using intersection observers.
+ */
+declare const InfiniteScroll: React.FC<InfiniteScrollProps>;
+//#endregion
+export { InfiniteScroll };

package/_internal/utils/InfiniteScroll/InfiniteScroll.js

@@ -0,0 +1,18 @@
+import { setupInfiniteScrollObserver } from "../../packages/lumx-core/src/js/utils/InfiniteScroll/setupInfiniteScrollObserver.js";
+import { InfiniteScroll as InfiniteScroll$1 } from "../../packages/lumx-core/src/js/utils/InfiniteScroll/index.js";
+import React, { useEffect } from "react";
+//#region src/utils/InfiniteScroll/InfiniteScroll.tsx
+/**
+* Handles basic callback pattern by using intersection observers.
+*/
+var InfiniteScroll = ({ callback, options }) => {
+	const elementRef = React.useRef(null);
+	useEffect(() => {
+		const { current: element } = elementRef;
+		if (!element) return;
+		return setupInfiniteScrollObserver(element, callback, options);
+	}, [elementRef.current, callback]);
+	return InfiniteScroll$1({ ref: elementRef });
+};
+//#endregion
+export { InfiniteScroll };

package/_internal/utils/InfiniteScroll/index.d.ts

@@ -0,0 +1,2 @@
+import { InfiniteScrollProps } from "../../packages/lumx-core/src/js/utils/InfiniteScroll/index.js";
+import { InfiniteScroll } from "./InfiniteScroll.js";

package/_internal/utils/Portal/Portal.d.ts

@@ -0,0 +1,15 @@
+import { PortalProps } from "../../packages/lumx-core/src/js/utils/Portal/index.js";
+import React from "react";
+
+//#region src/utils/Portal/Portal.d.ts
+interface ReactPortalProps {
+  enabled?: boolean;
+  children: React.ReactNode;
+}
+/**
+ * Render children in a portal outside the current DOM position
+ * (defaults to `document.body` but can be customized with the PortalContextProvider)
+ */
+declare const Portal: React.FC<ReactPortalProps>;
+//#endregion
+export { Portal };

package/_internal/utils/Portal/Portal.js

@@ -0,0 +1,23 @@
+import { PortalContext } from "./PortalProvider.js";
+import React from "react";
+import { Fragment, jsx } from "react/jsx-runtime";
+import { createPortal } from "react-dom";
+//#region src/utils/Portal/Portal.tsx
+/**
+* Render children in a portal outside the current DOM position
+* (defaults to `document.body` but can be customized with the PortalContextProvider)
+*/
+var Portal = ({ children, enabled = true }) => {
+	const init = React.useContext(PortalContext);
+	const context = React.useMemo(() => {
+		return enabled ? init() : null;
+	}, [enabled]);
+	React.useLayoutEffect(() => {
+		return context?.teardown;
+	}, [context?.teardown, enabled]);
+	const { container } = context ?? {};
+	if (!container || typeof container === "string") return /* @__PURE__ */ jsx(Fragment, { children });
+	return createPortal(children, container);
+};
+//#endregion
+export { Portal };

package/_internal/utils/Portal/PortalProvider.d.ts

@@ -0,0 +1,14 @@
+import { PortalInit, PortalProviderProps } from "../../packages/lumx-core/src/js/utils/Portal/index.js";
+import React from "react";
+
+//#region src/utils/Portal/PortalProvider.d.ts
+interface ReactPortalProviderProps {
+  children?: React.ReactNode;
+  value: PortalInit;
+}
+/**
+ * Customize where <Portal> wrapped elements render (tooltip, popover, dialog, etc.)
+ */
+declare const PortalProvider: React.FC<ReactPortalProviderProps>;
+//#endregion
+export { PortalProvider };

package/_internal/utils/Portal/PortalProvider.js

@@ -0,0 +1,9 @@
+import React from "react";
+//#region src/utils/Portal/PortalProvider.tsx
+var PortalContext = React.createContext(() => ({ container: document.body }));
+/**
+* Customize where <Portal> wrapped elements render (tooltip, popover, dialog, etc.)
+*/
+var PortalProvider = PortalContext.Provider;
+//#endregion
+export { PortalContext, PortalProvider };

package/_internal/utils/Portal/index.d.ts

@@ -0,0 +1,3 @@
+import { PortalInit, PortalProps, PortalProviderProps } from "../../packages/lumx-core/src/js/utils/Portal/index.js";
+import { PortalProvider } from "./PortalProvider.js";
+import { Portal } from "./Portal.js";

package/_internal/utils/browser/DOM/findImage.js

@@ -0,0 +1,5 @@
+//#region src/utils/browser/DOM/findImage.tsx
+/** Find image in element including the element */
+var findImage = (element) => element?.matches("img") ? element : element?.querySelector("img") || null;
+//#endregion
+export { findImage };

package/_internal/utils/browser/DOM/startViewTransition.js

@@ -0,0 +1,47 @@
+import { unref } from "../../react/unref.js";
+import { isReducedMotion } from "../isReducedMotion.js";
+import ReactDOM from "react-dom";
+//#region src/utils/browser/DOM/startViewTransition.ts
+function setupViewTransitionName(elementRef, name) {
+	let originalName = null;
+	return {
+		set() {
+			const element = unref(elementRef);
+			if (!element || !name) return;
+			originalName = element.style.viewTransitionName;
+			element.style.viewTransitionName = name;
+		},
+		unset() {
+			const element = unref(elementRef);
+			if (!element || originalName === null) return;
+			element.style.viewTransitionName = originalName;
+		}
+	};
+}
+/**
+* Wrapper around the `document.startViewTransition` handling browser incompatibilities, react DOM flush and
+* user preference.
+*
+* @param changes                callback containing the changes to apply within the view transition.
+* @param setViewTransitionName  set the `viewTransitionName` style on a `source` & `target` to morph these elements.
+*/
+async function startViewTransition({ changes, viewTransitionName }) {
+	const start = document?.startViewTransition?.bind(document);
+	const prefersReducedMotion = isReducedMotion();
+	const { flushSync } = ReactDOM;
+	if (prefersReducedMotion || !start || !flushSync || viewTransitionName && (!viewTransitionName?.source || !viewTransitionName?.target)) {
+		changes();
+		return;
+	}
+	const sourceTransitionName = setupViewTransitionName(viewTransitionName?.source, viewTransitionName?.name);
+	const targetTransitionName = setupViewTransitionName(viewTransitionName?.target, viewTransitionName?.name);
+	sourceTransitionName.set();
+	await start(() => {
+		sourceTransitionName.unset();
+		flushSync(changes);
+		targetTransitionName.set();
+	}).updateCallbackDone;
+	targetTransitionName.unset();
+}
+//#endregion
+export { startViewTransition };

package/_internal/utils/browser/isReducedMotion.js

@@ -0,0 +1,8 @@
+import { WINDOW } from "../../constants.js";
+//#region src/utils/browser/isReducedMotion.ts
+/** Check if user prefers reduced motion */
+function isReducedMotion() {
+	return WINDOW?.matchMedia?.("(prefers-reduced-motion: reduce)").matches;
+}
+//#endregion
+export { isReducedMotion };

package/_internal/utils/browser/isScrollSnapSupported.js

@@ -0,0 +1,8 @@
+import { WINDOW } from "../../constants.js";
+//#region src/utils/browser/isScrollSnapSupported.ts
+/** Check if browser supports CSS scroll-snap */
+function isScrollSnapSupported() {
+	return WINDOW?.CSS?.supports?.("scroll-snap-type", "x mandatory") ?? false;
+}
+//#endregion
+export { isScrollSnapSupported };

package/_internal/utils/browser/onScrollEnd.js

@@ -0,0 +1,25 @@
+//#region src/utils/browser/onScrollEnd.ts
+/**
+* Polyfill-like helper for the scrollend event.
+* Uses native scrollend if available, otherwise falls back to a timeout.
+*
+* @param element The element to listen to.
+* @param callback The callback to execute when scrolling ends.
+* @param options Options for the listener (timeout and AbortSignal).
+*/
+function onScrollEnd(element, callback, options = {}) {
+	const { timeout = 150, signal } = options;
+	if ("onscrollend" in window) {
+		element.addEventListener("scrollend", callback, { signal });
+		return;
+	}
+	let timer;
+	const handleScroll = () => {
+		clearTimeout(timer);
+		timer = setTimeout(callback, timeout);
+	};
+	element.addEventListener("scroll", handleScroll, { signal });
+	signal?.addEventListener("abort", () => clearTimeout(timer));
+}
+//#endregion
+export { onScrollEnd };

package/_internal/utils/date/addMonthResetDay.js

@@ -0,0 +1,12 @@
+//#region src/utils/date/addMonthResetDay.ts
+/**
+* Add a number of months from a date while resetting the day to prevent month length mismatches.
+*/
+function addMonthResetDay(date, monthOffset) {
+	const newDate = new Date(date.getTime());
+	newDate.setDate(1);
+	newDate.setMonth(date.getMonth() + monthOffset);
+	return newDate;
+}
+//#endregion
+export { addMonthResetDay };

package/_internal/utils/date/formatDayNumber.js

@@ -0,0 +1,8 @@
+//#region src/utils/date/formatDayNumber.ts
+function formatDayNumber(locale, date) {
+	const formattedDate = date.toLocaleDateString(locale, { day: "numeric" });
+	if (formattedDate.match(/\d/)) return formattedDate.replace(/\D*(\d+)\D*/g, "$1");
+	return formattedDate;
+}
+//#endregion
+export { formatDayNumber };

package/_internal/utils/date/getFirstDayOfWeek.js

@@ -0,0 +1,42 @@
+//#region src/utils/date/getFirstDayOfWeek.ts
+/** Get first day of week for locale from the browser API */
+var getFromBrowser = (locale) => {
+	try {
+		const localeMetadata = new Intl.Locale(locale.code);
+		const { firstDay } = localeMetadata.getWeekInfo?.() || localeMetadata.weekInfo;
+		if (firstDay === 7) return 0;
+		return firstDay;
+	} catch (e) {
+		return;
+	}
+};
+/** List first day for each locale (could be removed when all browser implement Locale weekInfo) */
+var FIRST_DAY_FOR_LOCALES = [
+	{
+		localeRX: /^(af|ar-(dz|eg|sa)|bn|cy|en-(ca|us|za)|fr-ca|gd|he|hi|ja|km|ko|pt-br|te|th|ug|zh-hk)$/i,
+		firstDay: 0
+	},
+	{
+		localeRX: /^(ar-(ma|tn)|az|be|bg|bs|ca|cs|da|de|el|en-(au|gb|ie|in|nz)|eo|es|et|eu|fi|fr|fy|gl|gu|hr|ht|hu|hy|id|is|it|ka|kk|kn|lb|lt|lv|mk|mn|ms|mt|nb|nl|nn|oc|pl|pt|ro|ru|sk|sl|sq|sr|sv|ta|tr|uk|uz|vi|zh-(cn|tw))$/i,
+		firstDay: 1
+	},
+	{
+		localeRX: /^(ar|fa-ir)$/i,
+		firstDay: 6
+	}
+];
+/** Find first day of week for locale from the constant */
+var getFromConstant = (locale, searchBy = "code") => {
+	for (const { localeRX, firstDay } of FIRST_DAY_FOR_LOCALES) if (localeRX.test(locale[searchBy])) return firstDay;
+	if (locale.code !== locale.language) return getFromConstant(locale, "language");
+};
+/**
+* Get first day of the week for the given locale code (language + region).
+*/
+var getFirstDayOfWeek = (locale) => {
+	const firstDay = getFromBrowser(locale);
+	if (firstDay !== void 0) return firstDay;
+	return getFromConstant(locale);
+};
+//#endregion
+export { getFirstDayOfWeek };

package/_internal/utils/date/getMonthCalendar.js

@@ -0,0 +1,43 @@
+import { getWeekDays } from "./getWeekDays.js";
+import last from "lodash/last.js";
+//#region src/utils/date/getMonthCalendar.ts
+/** Up to 6 rows can appear in a month calendar => 4 weeks + 1 start of month partial week + 1 send of month partial week */
+var MONTH_ROW_COUNT = 6;
+/**
+* Get month calendar.
+* A list of weeks with days indexed by week day number
+*/
+var getMonthCalendar = (locale, referenceDate = /* @__PURE__ */ new Date(), rangeMinDate, rangeMaxDate) => {
+	const month = referenceDate.getMonth();
+	const iterDate = new Date(referenceDate);
+	iterDate.setDate(1);
+	const minDate = rangeMinDate && new Date(rangeMinDate);
+	const maxDate = rangeMaxDate && new Date(rangeMaxDate);
+	iterDate.setUTCHours(0, 0, 0, 0);
+	minDate?.setUTCHours(0, 0, 0, 0);
+	maxDate?.setUTCHours(0, 0, 0, 0);
+	const weekDays = getWeekDays(locale);
+	const lastDayOfWeek = last(weekDays);
+	const weeks = [];
+	let week = {};
+	let rowCount = 0;
+	while (rowCount < MONTH_ROW_COUNT) {
+		const weekDayNumber = iterDate.getDay();
+		const day = { date: new Date(iterDate.getTime()) };
+		if (minDate && iterDate < minDate || maxDate && iterDate > maxDate) day.isOutOfRange = true;
+		if (iterDate.getMonth() === month) week[weekDayNumber] = day;
+		if (weekDayNumber === lastDayOfWeek.number) {
+			weeks.push(week);
+			rowCount += 1;
+			week = {};
+		}
+		iterDate.setDate(iterDate.getDate() + 1);
+	}
+	if (Object.keys(week).length) weeks.push(week);
+	return {
+		weeks,
+		weekDays
+	};
+};
+//#endregion
+export { getMonthCalendar };

package/_internal/utils/date/getWeekDays.js

@@ -0,0 +1,25 @@
+import { getFirstDayOfWeek } from "./getFirstDayOfWeek.js";
+/**
+* List week days (based on locale) with the week day letter (ex: "M" for "Monday") and week day number
+* (0-based index starting on Sunday).
+*/
+var getWeekDays = (locale) => {
+	const iterDate = /* @__PURE__ */ new Date();
+	const offset = (getFirstDayOfWeek(locale) ?? 1) - iterDate.getDay();
+	iterDate.setDate(iterDate.getDate() + offset);
+	const weekDays = [];
+	for (let i = 0; i < 7; i++) {
+		const letter = iterDate.toLocaleDateString(locale.code, { weekday: "narrow" });
+		const long = iterDate.toLocaleDateString(locale.code, { weekday: "long" });
+		const number = iterDate.getDay();
+		weekDays.push({
+			letter,
+			number,
+			long
+		});
+		iterDate.setDate(iterDate.getDate() + 1);
+	}
+	return weekDays;
+};
+//#endregion
+export { getWeekDays };

package/_internal/utils/date/getYearDisplayName.js

@@ -0,0 +1,12 @@
+//#region src/utils/date/getYearDisplayName.ts
+var getYearDisplayName = (locale) => {
+	let label;
+	try {
+		label = new Intl.DisplayNames(locale, { type: "dateTimeField" }).of("year");
+	} catch (error) {
+		label = "";
+	}
+	return label;
+};
+//#endregion
+export { getYearDisplayName };

package/_internal/utils/date/isDateValid.js

@@ -0,0 +1,7 @@
+//#region src/utils/date/isDateValid.ts
+/**
+* Check if given date is valid.
+*/
+var isDateValid = (date) => date instanceof Date && !Number.isNaN(date.getTime());
+//#endregion
+export { isDateValid };

package/_internal/utils/date/isSameDay.js

@@ -0,0 +1,8 @@
+import { isDateValid } from "./isDateValid.js";
+//#region src/utils/date/isSameDay.ts
+/**
+* Check `date1` is on the same day as `date2`.
+*/
+var isSameDay = (date1, date2) => isDateValid(date1) && isDateValid(date2) && date1.getFullYear() === date2.getFullYear() && date1.getMonth() === date2.getMonth() && date1.getDate() === date2.getDate();
+//#endregion
+export { isSameDay };

package/_internal/utils/disabled/DisabledStateContext.d.ts

@@ -0,0 +1,21 @@
+import React from "react";
+import { DisabledStateContextValue } from "@lumx/core/js/utils/disabledState";
+
+//#region src/utils/disabled/DisabledStateContext.d.ts
+type DisabledStateProviderProps = DisabledStateContextValue & {
+  children: React.ReactNode;
+};
+/**
+ * Disabled state provider.
+ * All nested LumX Design System components inherit this disabled state.
+ */
+declare function DisabledStateProvider({
+  children,
+  ...value
+}: DisabledStateProviderProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * Get DisabledState context value
+ */
+declare function useDisabledStateContext(): DisabledStateContextValue;
+//#endregion
+export { DisabledStateProvider, useDisabledStateContext };

package/_internal/utils/disabled/DisabledStateContext.js

@@ -0,0 +1,22 @@
+import React, { useContext } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/utils/disabled/DisabledStateContext.tsx
+var DisabledStateContext = React.createContext({ state: null });
+/**
+* Disabled state provider.
+* All nested LumX Design System components inherit this disabled state.
+*/
+function DisabledStateProvider({ children, ...value }) {
+	return /* @__PURE__ */ jsx(DisabledStateContext.Provider, {
+		value,
+		children
+	});
+}
+/**
+* Get DisabledState context value
+*/
+function useDisabledStateContext() {
+	return useContext(DisabledStateContext);
+}
+//#endregion
+export { DisabledStateProvider, useDisabledStateContext };

package/_internal/utils/disabled/index.d.ts

@@ -0,0 +1 @@
+import { DisabledStateProvider, useDisabledStateContext } from "./DisabledStateContext.js";

package/_internal/utils/disabled/useDisableStateProps.d.ts

@@ -0,0 +1 @@
+export { };

package/_internal/utils/disabled/useDisableStateProps.js

@@ -0,0 +1,29 @@
+import { useDisabledStateContext } from "./DisabledStateContext.js";
+import { getDisabledState } from "@lumx/core/js/utils/disabledState";
+//#region src/utils/disabled/useDisableStateProps.tsx
+/**
+* Resolve disabled state from props.
+* (handles `disabled`, `isDisabled` and `aria-disabled`)
+*
+* @params component props
+*/
+function useDisableStateProps(props) {
+	const { disabled, isDisabled, "aria-disabled": ariaDisabled, onClick, onChange, ...otherProps } = props;
+	const disabledStateProps = getDisabledState(useDisabledStateContext(), {
+		disabled,
+		isDisabled,
+		"aria-disabled": ariaDisabled
+	});
+	const isAnyDisabled = disabledStateProps["aria-disabled"] || disabledStateProps.disabled || void 0;
+	if (!isAnyDisabled) {
+		otherProps.onClick = onClick;
+		otherProps.onChange = onChange;
+	}
+	return {
+		disabledStateProps,
+		otherProps,
+		isAnyDisabled
+	};
+}
+//#endregion
+export { useDisableStateProps };

package/_internal/utils/locale/parseLocale.js

@@ -0,0 +1,26 @@
+//#region src/utils/locale/parseLocale.ts
+/**
+* Parse locale code
+* @example
+*   parseLocale('EN') // => { code: 'en', language: 'en' }
+*   parseLocale('en_us') // => { code: 'en-US', language: 'en', region: 'US' }
+*   parseLocale('EN-US') // => { code: 'en-US', language: 'en', region: 'US' }
+*/
+function parseLocale(locale) {
+	const [rawLanguage, rawRegion] = locale.split(/[-_]/);
+	if (!rawLanguage) return;
+	const language = rawLanguage.toLowerCase();
+	let region;
+	let code = language;
+	if (rawRegion) {
+		region = rawRegion.toUpperCase();
+		code += `-${region}`;
+	}
+	return {
+		code,
+		region,
+		language
+	};
+}
+//#endregion
+export { parseLocale };

package/_internal/utils/moving-focus/components/MovingFocusProvider/context.d.ts

@@ -0,0 +1,14 @@
+import { Action, State } from "../../types.js";
+import React from "react";
+
+//#region src/utils/moving-focus/components/MovingFocusProvider/context.d.ts
+type MovingFocusContext = Readonly<{
+  state: State;
+  dispatch: React.Dispatch<Action>;
+}>;
+declare const MovingFocusContext: React.Context<Readonly<{
+  state: State;
+  dispatch: React.Dispatch<Action>;
+}>>;
+//#endregion
+export { MovingFocusContext };

package/_internal/utils/moving-focus/components/MovingFocusProvider/context.js

@@ -0,0 +1,10 @@
+import { INITIAL_STATE } from "../../ducks/slice.js";
+import React from "react";
+import noop from "lodash/noop.js";
+//#region src/utils/moving-focus/components/MovingFocusProvider/context.ts
+var MovingFocusContext = React.createContext({
+	state: INITIAL_STATE,
+	dispatch: noop
+});
+//#endregion
+export { MovingFocusContext };

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

@@ -0,0 +1,21 @@
+import { MovingFocusOptions } from "../../types.js";
+import React from "react";
+
+//#region src/utils/moving-focus/components/MovingFocusProvider/index.d.ts
+interface MovingFocusProviderProps {
+  /**
+   * The child content, which will include the DOM elements to rove between using the tab key.
+   */
+  children: React.ReactNode;
+  /**
+   * An optional object to customize the behaviour of the moving focus. It is fine to pass a new object every time
+   * the containing component is rendered, and the options can be updated at any time.
+   */
+  options?: Partial<MovingFocusOptions>;
+}
+/**
+ * Creates a roving tabindex context.
+ */
+declare const MovingFocusProvider: React.FC<MovingFocusProviderProps>;
+//#endregion
+export { MovingFocusProvider };

package/_internal/utils/moving-focus/components/MovingFocusProvider/index.js

@@ -0,0 +1,58 @@
+import { buildLoopAroundObject } from "../../utils/buildLoopAroundObject.js";
+import { INITIAL_STATE, reducer } from "../../ducks/slice.js";
+import { MovingFocusContext } from "./context.js";
+import React from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/utils/moving-focus/components/MovingFocusProvider/index.tsx
+/**
+* Creates a roving tabindex context.
+*/
+var MovingFocusProvider = ({ children, options }) => {
+	const [state, dispatch] = React.useReducer(reducer, INITIAL_STATE, (st) => ({
+		...st,
+		...options,
+		direction: options?.direction || st.direction,
+		loopAround: buildLoopAroundObject(options?.loopAround),
+		selectedId: options?.defaultSelectedId || INITIAL_STATE.selectedId
+	}));
+	const isMounted = React.useRef(false);
+	React.useEffect(() => {
+		if (!isMounted.current) {
+			isMounted.current = true;
+			return;
+		}
+		dispatch({
+			type: "OPTIONS_UPDATED",
+			payload: {
+				direction: options?.direction || INITIAL_STATE.direction,
+				loopAround: buildLoopAroundObject(options?.loopAround || INITIAL_STATE.loopAround),
+				defaultSelectedId: options?.defaultSelectedId || INITIAL_STATE.defaultSelectedId,
+				autofocus: options?.autofocus || INITIAL_STATE.autofocus,
+				allowFocusing: options?.allowFocusing || INITIAL_STATE.allowFocusing,
+				listKey: options?.listKey || INITIAL_STATE.listKey,
+				firstFocusDirection: options?.firstFocusDirection || INITIAL_STATE.firstFocusDirection,
+				gridJumpToShortcutDirection: options?.gridJumpToShortcutDirection || INITIAL_STATE.gridJumpToShortcutDirection
+			}
+		});
+	}, [
+		isMounted,
+		options?.allowFocusing,
+		options?.autofocus,
+		options?.defaultSelectedId,
+		options?.direction,
+		options?.loopAround,
+		options?.listKey,
+		options?.firstFocusDirection,
+		options?.gridJumpToShortcutDirection
+	]);
+	const context = React.useMemo(() => ({
+		state,
+		dispatch
+	}), [state]);
+	return /* @__PURE__ */ jsx(MovingFocusContext.Provider, {
+		value: context,
+		children
+	});
+};
+//#endregion
+export { MovingFocusProvider };