@lumx/react 4.4.1-alpha.0 → 4.4.1-alpha.2

package/package.json

@@ -7,8 +7,8 @@
     },
     "dependencies": {
         "@floating-ui/react-dom": "^2.1.7",
-        "@lumx/core": "^4.4.1-alpha.0",
-        "@lumx/icons": "^4.4.1-alpha.0",
+        "@lumx/core": "^4.4.1-alpha.2",
+        "@lumx/icons": "^4.4.1-alpha.2",
         "body-scroll-lock": "^3.1.5"
     },
     "devDependencies": {
@@ -16,11 +16,11 @@
         "@babel/preset-react": "^7.26.3",
         "@babel/preset-typescript": "^7.26.0",
         "@chromatic-com/storybook": "^5.0.0",
+        "@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.0",
-        "@storybook/addon-vitest": "10.2.0",
         "@storybook/react-vite": "^10.2.0",
         "@testing-library/dom": "^10.4.1",
         "@testing-library/react": "^16.3.1",
@@ -31,7 +31,6 @@
         "@types/lodash": "^4.14.149",
         "@types/react": "^18.3.24",
         "@types/react-dom": "^18.3.7",
-        "@vitest/browser-playwright": "^4.0.18",
         "@vitest/ui": "^4.0.18",
         "autoprefixer": "^9.7.4",
         "chromatic": "^13.1.4",
@@ -50,7 +49,6 @@
         "rollup-plugin-peer-deps-external": "^2.2.4",
         "rollup-plugin-ts-paths-resolve": "^1.7.1",
         "storybook": "^10.2.0",
-        "storybook-addon-vis": "^3.1.2",
         "typescript": "^5.4.3",
         "vite": "^7.3.1",
         "vite-tsconfig-paths": "^5.1.4",
@@ -101,6 +99,6 @@
         "build:storybook": "storybook build"
     },
     "sideEffects": false,
-    "version": "4.4.1-alpha.0",
+    "version": "4.4.1-alpha.2",
     "stableVersion": "4.4.0"
 }

package/utils/index.d.ts

@@ -93,25 +93,42 @@ interface A11YLiveMessageProps {
  */
 declare const A11YLiveMessage: React__default.FC<A11YLiveMessageProps>;
 
-type Container = DocumentFragment | Element;
+/**
+ * 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 classic React tree and not in a portal.
+ * 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<PortalProviderProps>;
+declare const PortalProvider: React__default.FC<ReactPortalProviderProps>;
 
-interface PortalProps {
+interface ReactPortalProps {
     enabled?: boolean;
     children: React__default.ReactNode;
 }
@@ -119,7 +136,7 @@ interface PortalProps {
  * 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<PortalProps>;
+declare const Portal: React__default.FC<ReactPortalProps>;
 
 type DisabledStateProviderProps = DisabledStateContextValue & {
     children: React__default.ReactNode;

package/utils/index.js

@@ -1,7 +1,7 @@
 import React__default, { useEffect } from 'react';
 import { join, visuallyHidden } from '@lumx/core/js/utils/classNames';
 import { jsx } from 'react/jsx-runtime';
-export { C as ClickAwayProvider, D as DisabledStateProvider, P as Portal, a as PortalProvider, u as useDisabledStateContext } from '../_internal/DpdvhbTO.js';
+export { C as ClickAwayProvider, D as DisabledStateProvider, P as Portal, a as PortalProvider, u as useDisabledStateContext } from '../_internal/BfgxEBp6.js';
 import noop from 'lodash/noop.js';
 import findLast from 'lodash/findLast.js';
 import find from 'lodash/find.js';

package/_internal/DpdvhbTO.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"DpdvhbTO.js","sources":["../../src/utils/disabled/DisabledStateContext.tsx","../../src/hooks/useClickAway.tsx","../../src/utils/ClickAwayProvider/ClickAwayProvider.tsx","../../src/utils/Portal/PortalProvider.tsx","../../src/utils/Portal/Portal.tsx"],"sourcesContent":["import React, { useContext } from 'react';\n\nimport { DisabledStateContextValue } from '@lumx/core/js/utils/disabledState';\n\nexport const DisabledStateContext = React.createContext<DisabledStateContextValue>({ state: null });\n\nexport type DisabledStateProviderProps = DisabledStateContextValue & {\n    children: React.ReactNode;\n};\n\n/**\n * Disabled state provider.\n * All nested LumX Design System components inherit this disabled state.\n */\nexport function DisabledStateProvider({ children, ...value }: DisabledStateProviderProps) {\n    return <DisabledStateContext.Provider value={value}>{children}</DisabledStateContext.Provider>;\n}\n\n/**\n * Get DisabledState context value\n */\nexport function useDisabledStateContext(): DisabledStateContextValue {\n    return useContext(DisabledStateContext);\n}\n","import { RefObject, useEffect } from 'react';\n\nimport { Falsy } from '@lumx/react/utils/type';\n\nimport isEmpty from 'lodash/isEmpty';\n\nconst EVENT_TYPES = ['mousedown', 'touchstart'];\n\nfunction isClickAway(targets: HTMLElement[], refs: Array<RefObject<HTMLElement>>): boolean {\n    // The targets elements are not contained in any of the listed element references.\n    return !refs.some((ref) => targets.some((target) => ref?.current?.contains(target)));\n}\n\nexport interface ClickAwayParameters {\n    /**\n     * A callback function to call when the user clicks away from the elements.\n     */\n    callback: EventListener | Falsy;\n    /**\n     * Elements considered within the click away context (clicking outside them will trigger the click away callback).\n     */\n    childrenRefs: RefObject<Array<RefObject<HTMLElement>>>;\n}\n\n/**\n * Listen to clicks away from the given elements and callback the passed in function.\n *\n * Warning: If you need to detect click away on nested React portals, please use the `ClickAwayProvider` component.\n */\nexport function useClickAway({ callback, childrenRefs }: ClickAwayParameters): void {\n    useEffect(() => {\n        const { current: currentRefs } = childrenRefs;\n        if (!callback || !currentRefs || isEmpty(currentRefs)) {\n            return undefined;\n        }\n        const listener: EventListener = (evt) => {\n            const targets = [evt.composedPath?.()[0], evt.target] as HTMLElement[];\n            if (isClickAway(targets, currentRefs)) {\n                callback(evt);\n            }\n        };\n\n        EVENT_TYPES.forEach((evtType) => document.addEventListener(evtType, listener));\n        return () => {\n            EVENT_TYPES.forEach((evtType) => document.removeEventListener(evtType, listener));\n        };\n    }, [callback, childrenRefs]);\n}\n","import { createContext, RefObject, useContext, useEffect, useMemo, useRef } from 'react';\nimport { ClickAwayParameters, useClickAway } from '@lumx/react/hooks/useClickAway';\n\ninterface ContextValue {\n    childrenRefs: Array<RefObject<HTMLElement>>;\n    addRefs(...newChildrenRefs: Array<RefObject<HTMLElement>>): void;\n}\n\nconst ClickAwayAncestorContext = createContext<ContextValue | null>(null);\n\ninterface ClickAwayProviderProps extends ClickAwayParameters {\n    /**\n     * (Optional) Element that should be considered as part of the parent\n     */\n    parentRef?: RefObject<HTMLElement>;\n    /**\n     * Children\n     */\n    children?: React.ReactNode;\n}\n\n/**\n * Component combining the `useClickAway` hook with a React context to hook into the React component tree and make sure\n * we take into account both the DOM tree and the React tree to detect click away.\n *\n * @return the react component.\n */\nexport const ClickAwayProvider: React.FC<ClickAwayProviderProps> = ({\n    children,\n    callback,\n    childrenRefs,\n    parentRef,\n}) => {\n    const parentContext = useContext(ClickAwayAncestorContext);\n    const currentContext = useMemo(() => {\n        const context: ContextValue = {\n            childrenRefs: [],\n            /**\n             * Add element refs to the current context and propagate to the parent context.\n             */\n            addRefs(...newChildrenRefs) {\n                // Add element refs that should be considered as inside the click away context.\n                context.childrenRefs.push(...newChildrenRefs);\n\n                if (parentContext) {\n                    // Also add then to the parent context\n                    parentContext.addRefs(...newChildrenRefs);\n                    if (parentRef) {\n                        // The parent element is also considered as inside the parent click away context but not inside the current context\n                        parentContext.addRefs(parentRef);\n                    }\n                }\n            },\n        };\n        return context;\n    }, [parentContext, parentRef]);\n\n    useEffect(() => {\n        const { current: currentRefs } = childrenRefs;\n        if (!currentRefs) {\n            return;\n        }\n        currentContext.addRefs(...currentRefs);\n    }, [currentContext, childrenRefs]);\n\n    useClickAway({ callback, childrenRefs: useRef(currentContext.childrenRefs) });\n    return <ClickAwayAncestorContext.Provider value={currentContext}>{children}</ClickAwayAncestorContext.Provider>;\n};\nClickAwayProvider.displayName = 'ClickAwayProvider';\n","import React from 'react';\n\ntype Container = DocumentFragment | Element;\n\n/**\n * Portal initializing function.\n * If it does not provide a container, the Portal children will render in classic React tree and not in a portal.\n */\nexport type PortalInit = () => {\n    container?: Container;\n    teardown?: () => void;\n};\n\nexport const PortalContext = React.createContext<PortalInit>(() => ({ container: document.body }));\n\nexport interface PortalProviderProps {\n    children?: React.ReactNode;\n    value: PortalInit;\n}\n\n/**\n * Customize where <Portal> wrapped elements render (tooltip, popover, dialog, etc.)\n */\nexport const PortalProvider: React.FC<PortalProviderProps> = PortalContext.Provider;\n","import React from 'react';\nimport { createPortal } from 'react-dom';\nimport { PortalContext } from './PortalProvider';\n\nexport interface PortalProps {\n    enabled?: boolean;\n    children: React.ReactNode;\n}\n\n/**\n * Render children in a portal outside the current DOM position\n * (defaults to `document.body` but can be customized with the PortalContextProvider)\n */\nexport const Portal: React.FC<PortalProps> = ({ children, enabled = true }) => {\n    const init = React.useContext(PortalContext);\n    const context = React.useMemo(\n        () => {\n            return enabled ? init() : null;\n        },\n        // Only update on 'enabled'\n        // eslint-disable-next-line react-hooks/exhaustive-deps\n        [enabled],\n    );\n\n    React.useLayoutEffect(() => {\n        return context?.teardown;\n    }, [context?.teardown, enabled]);\n\n    if (!context?.container) {\n        return <>{children}</>;\n    }\n    return createPortal(children, context.container);\n};\n"],"names":["DisabledStateContext","React","createContext","state","DisabledStateProvider","children","value","_jsx","Provider","useDisabledStateContext","useContext","EVENT_TYPES","isClickAway","targets","refs","some","ref","target","current","contains","useClickAway","callback","childrenRefs","useEffect","currentRefs","isEmpty","undefined","listener","evt","composedPath","forEach","evtType","document","addEventListener","removeEventListener","ClickAwayAncestorContext","ClickAwayProvider","parentRef","parentContext","currentContext","useMemo","context","addRefs","newChildrenRefs","push","useRef","displayName","PortalContext","container","body","PortalProvider","Portal","enabled","init","useLayoutEffect","teardown","_Fragment","createPortal"],"mappings":"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"}