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

package/package.json

@@ -7,18 +7,12 @@
     },
     "dependencies": {
         "@floating-ui/react-dom": "^2.1.7",
-        "@lumx/core": "^4.17.1-alpha.2",
-        "@lumx/icons": "^4.17.1-alpha.2",
+        "@lumx/core": "^4.17.1-alpha.3",
+        "@lumx/icons": "^4.17.1-alpha.3",
         "body-scroll-lock": "^3.1.5"
     },
     "devDependencies": {
-        "@babel/core": "7.29.6",
-        "@babel/preset-react": "7.28.5",
-        "@babel/preset-typescript": "7.28.5",
         "@lumx/storybook-testing": "workspace:*",
-        "@rollup/plugin-babel": "^6.1.0",
-        "@rollup/plugin-commonjs": "^29.0.0",
-        "@rollup/plugin-node-resolve": "^16.0.3",
         "@storybook/addon-a11y": "^10.2.19",
         "@storybook/react-vite": "^10.2.19",
         "@testing-library/dom": "^10.4.1",
@@ -30,7 +24,7 @@
         "@types/lodash": "^4.14.149",
         "@types/react": "^18.3.24",
         "@types/react-dom": "^18.3.7",
-        "@vitest/ui": "^4.0.18",
+        "@vitest/ui": "^4.1.9",
         "autoprefixer": "^9.7.4",
         "chromatic": "^13.1.4",
         "focus-visible": "^5.0.2",
@@ -40,18 +34,11 @@
         "playwright": "^1.58.2",
         "react": "^18.3.1",
         "react-dom": "^18.3.1",
-        "rollup": "^4.59.0",
-        "rollup-plugin-analyzer": "^4.0.0",
-        "rollup-plugin-cleaner": "^1.0.0",
-        "rollup-plugin-copy": "^3.5.0",
-        "rollup-plugin-dts": "^6.3.0",
-        "rollup-plugin-peer-deps-external": "^2.2.4",
-        "rollup-plugin-ts-paths-resolve": "^1.7.1",
         "storybook": "^10.2.19",
         "typescript": "^5.4.3",
-        "vite": "^7.3.5",
-        "vite-tsconfig-paths": "^5.1.4",
-        "vitest": "^4.0.18"
+        "vite": "^8.0.16",
+        "vite-plugin-dts": "^5.0.2",
+        "vitest": "^4.1.9"
     },
     "peerDependencies": {
         "lodash": ">= 4.17.23",
@@ -88,7 +75,7 @@
     },
     "scripts": {
         "lint": "cd ../.. && eslint packages/lumx-react/src/",
-        "build": "rollup -c",
+        "build": "vite build",
         "test": "vitest run --run",
         "test:storybook": "vitest -c .storybook/vitest.config.mts run --run",
         "test:storybook:visual": "IMAGE_SNAPSHOT=true SNAPSHOT_ONLY=true vitest -c .storybook/vitest.config.mts run --run",
@@ -97,6 +84,6 @@
         "build:storybook": "storybook build"
     },
     "sideEffects": false,
-    "version": "4.17.1-alpha.2",
+    "version": "4.17.1-alpha.3",
     "stableVersion": "4.17.0"
 }

package/utils/index.d.ts

@@ -1,413 +1,14 @@
-import React__default, { RefObject, ReactNode, AriaAttributes } from 'react';
-import { Falsy, ObjectValues } from '@lumx/core/js/types';
-import * as react_jsx_runtime from 'react/jsx-runtime';
-import { DisabledStateContextValue } from '@lumx/core/js/utils/disabledState';
-
-interface ClickAwayParameters {
-    /**
-     * A callback function to call when the user clicks away from the elements.
-     */
-    callback: EventListener | Falsy;
-    /**
-     * Elements considered within the click away context (clicking outside them will trigger the click away callback).
-     */
-    childrenRefs: RefObject<Array<RefObject<HTMLElement>>>;
-}
-
-interface ClickAwayProviderProps extends ClickAwayParameters {
-    /**
-     * (Optional) Element that should be considered as part of the parent
-     */
-    parentRef?: RefObject<HTMLElement>;
-    /**
-     * Children
-     */
-    children?: React.ReactNode;
-}
-/**
- * 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.
- */
-declare const ClickAwayProvider: React.FC<ClickAwayProviderProps>;
-
-interface InfiniteScrollProps {
-    /** Callback when infinite scroll component is in view */
-    callback: (evt?: Event) => void;
-    /** Customize intersection observer option */
-    options?: IntersectionObserverInit;
-}
-
-/**
- * Handles basic callback pattern by using intersection observers.
- */
-declare const InfiniteScroll: React__default.FC<InfiniteScrollProps>;
-
-interface A11YLiveMessageProps {
-    /** The message that will be read. */
-    children?: ReactNode;
-    /** Whether the message should be hidden */
-    hidden?: boolean;
-    /**
-     * The type of message.
-     * Default to "polite"
-     * Assertive should only be used for messages than need immediate attention.
-     */
-    type?: AriaAttributes['aria-live'];
-    /**
-     * Indicates whether assistive technologies will present all, or only parts of, the changed region based on
-     * the change notifications defined by the aria-relevant attribute.
-     */
-    atomic?: AriaAttributes['aria-atomic'];
-    /**
-     * Indicates what notifications the user agent will trigger when the accessibility tree within a live region is modified.
-     * @see atomic.
-     */
-    relevant?: AriaAttributes['aria-relevant'];
-    /**
-     * Whether the live region reads a current status or
-     * raises an alert.
-     * Only use `alert` for time sensitive information that should be read immediately
-     * as it will interrupt anything being currently read.
-     */
-    role?: 'status' | 'alert';
-    /** Scope, for  tracking purposes */
-    scope?: string;
-    /** Optionnal classname */
-    className?: string;
-}
-/**
- * Live region to read a message to screen readers.
- * Messages can be "polite" and be read when possible or
- * "assertive" and interrupt any message currently be read. (To be used sparingly)
- *
- * More information here: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Live_Regions
- *
- * @family A11Y
- * @param A11YLiveMessageProps
- * @returns A11YLiveMessage
- */
-declare const A11YLiveMessage: React__default.FC<A11YLiveMessageProps>;
-
-/**
- * Shared types for Portal and PortalProvider.
- *
- * Portal renders children in a subtree outside the current DOM hierarchy.
- * PortalProvider customizes where Portal children render.
- *
- * Unlike other core components, Portal has no shared render function
- * since the implementation is entirely framework-specific
- * (React's createPortal vs Vue's Teleport).
- */
-type Container = DocumentFragment | Element | string;
-/**
- * Portal initializing function.
- * If it does not provide a container, the Portal children will render in the standard component tree and not in a portal.
- */
-type PortalInit = () => {
-    container?: Container;
-    teardown?: () => void;
-};
-interface PortalProps {
-    enabled?: boolean;
-}
-interface PortalProviderProps {
-    value: PortalInit;
-}
-
-interface ReactPortalProviderProps {
-    children?: React__default.ReactNode;
-    value: PortalInit;
-}
-/**
- * Customize where <Portal> wrapped elements render (tooltip, popover, dialog, etc.)
- */
-declare const PortalProvider: React__default.FC<ReactPortalProviderProps>;
-
-interface ReactPortalProps {
-    enabled?: boolean;
-    children: React__default.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__default.FC<ReactPortalProps>;
-
-type DisabledStateProviderProps = DisabledStateContextValue & {
-    children: React__default.ReactNode;
-};
-/**
- * Disabled state provider.
- * All nested LumX Design System components inherit this disabled state.
- */
-declare function DisabledStateProvider({ children, ...value }: DisabledStateProviderProps): react_jsx_runtime.JSX.Element;
-/**
- * Get DisabledState context value
- */
-declare function useDisabledStateContext(): DisabledStateContextValue;
-
-declare const LOOP_AROUND_TYPES: {
-    /**
-     * Will continue navigation to the next row or column and loop back to the start
-     * when the last tab stop is reached
-     */
-    readonly nextLoop: "next-loop";
-    /**
-     * Will continue navigation to the next row or column until
-     * the last tab stop is reached
-     */
-    readonly nextEnd: "next-end";
-    /**
-     * Will loop within the current row or column
-     */
-    readonly inside: "inside";
-};
-
-/**
- * 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;
-
-interface MovingFocusProviderProps {
-    /**
-     * The child content, which will include the DOM elements to rove between using the tab key.
-     */
-    children: React__default.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__default.FC<MovingFocusProviderProps>;
-
-type MovingFocusContext = Readonly<{
-    state: State;
-    dispatch: React__default.Dispatch<Action>;
-}>;
-declare const MovingFocusContext: React__default.Context<Readonly<{
-    state: State;
-    dispatch: React__default.Dispatch<Action>;
-}>>;
-
-/**
- * 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;
-
-/**
- * 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__default.RefObject<HTMLElement>) => string | undefined;
-
-/**
- * A tuple of values to be applied by the containing component for the roving tabindex to work correctly.
- */
-type Output = [
-    /** The tabIndex value to apply to the tab stop element. */
-    tabIndex: number,
-    /** Whether focus() should be invoked on the tab stop element. */
-    focused: boolean,
-    /**
-     * The onKeyDown callback to apply to the tab stop element. If the key press is relevant to the hook then
-     * event.preventDefault() will be invoked on the event.
-     */
-    handleKeyDown: (event: React__default.KeyboardEvent) => void,
-    /** The onClick callback to apply to the tab stop element. */
-    handleClick: () => void
-];
-/**
- * Includes the given DOM element in the current roving tabindex.
- */
-declare const useRovingTabIndex: (...args: BaseHookOptions) => Output;
-
-export { A11YLiveMessage, ClickAwayProvider, DisabledStateProvider, InfiniteScroll, MovingFocusContext, MovingFocusProvider, Portal, PortalProvider, useDisabledStateContext, useRovingTabIndex, useVirtualFocus, useVirtualFocusParent };
-export type { A11YLiveMessageProps, InfiniteScrollProps, PortalInit, PortalProps, PortalProviderProps };
+import { ClickAwayProvider } from "../_internal/utils/ClickAwayProvider/ClickAwayProvider.js";
+import { InfiniteScrollProps } from "../_internal/packages/lumx-core/src/js/utils/InfiniteScroll/index.js";
+import { InfiniteScroll } from "../_internal/utils/InfiniteScroll/InfiniteScroll.js";
+import { A11YLiveMessage, A11YLiveMessageProps } from "../_internal/utils/A11YLiveMessage/index.js";
+import { PortalInit, PortalProps, PortalProviderProps } from "../_internal/packages/lumx-core/src/js/utils/Portal/index.js";
+import { PortalProvider } from "../_internal/utils/Portal/PortalProvider.js";
+import { Portal } from "../_internal/utils/Portal/Portal.js";
+import { DisabledStateProvider, useDisabledStateContext } from "../_internal/utils/disabled/DisabledStateContext.js";
+import { MovingFocusProvider } from "../_internal/utils/moving-focus/components/MovingFocusProvider/index.js";
+import { MovingFocusContext } from "../_internal/utils/moving-focus/components/MovingFocusProvider/context.js";
+import { useVirtualFocus } from "../_internal/utils/moving-focus/hooks/useVirtualFocus/useVirtualFocus.js";
+import { useVirtualFocusParent } from "../_internal/utils/moving-focus/hooks/useVirtualFocus/useVirtualFocusParent.js";
+import { useRovingTabIndex } from "../_internal/utils/moving-focus/hooks/useRovingTabIndex/useRovingTabIndex.js";
+export { A11YLiveMessage, type A11YLiveMessageProps, ClickAwayProvider, DisabledStateProvider, InfiniteScroll, type InfiniteScrollProps, MovingFocusContext, MovingFocusProvider, Portal, type PortalInit, type PortalProps, PortalProvider, type PortalProviderProps, useDisabledStateContext, useRovingTabIndex, useVirtualFocus, useVirtualFocusParent };