@lumx/react 3.9.7-alpha.3 → 3.9.7

package/package.json

@@ -6,8 +6,8 @@
         "url": "https://github.com/lumapps/design-system/issues"
     },
     "dependencies": {
-        "@lumx/core": "^3.9.7-alpha.3",
-        "@lumx/icons": "^3.9.7-alpha.3",
+        "@lumx/core": "^3.9.7",
+        "@lumx/icons": "^3.9.7",
         "@popperjs/core": "^2.5.4",
         "body-scroll-lock": "^3.1.5",
         "classnames": "^2.3.2",
@@ -26,8 +26,9 @@
         "@babel/preset-env": "^7.18.10",
         "@babel/preset-react": "^7.18.6",
         "@babel/preset-typescript": "^7.18.6",
-        "@rollup/plugin-commonjs": "^15.0.0",
-        "@rollup/plugin-node-resolve": "9.0.0",
+        "@rollup/plugin-babel": "^6.0.4",
+        "@rollup/plugin-commonjs": "^19.0.2",
+        "@rollup/plugin-node-resolve": "16.0.0",
         "@storybook/addon-a11y": "^7.6.3",
         "@storybook/addon-essentials": "^7.6.3",
         "@storybook/addon-interactions": "^7.6.3",
@@ -58,15 +59,13 @@
         "jest-environment-jsdom": "29.1.2",
         "react": "^17.0.2",
         "react-dom": "^17.0.2",
-        "rollup": "2.79.2",
-        "rollup-plugin-analyzer": "^3.3.0",
-        "rollup-plugin-babel": "^4.4.0",
+        "rollup": "3.29.5",
+        "rollup-plugin-analyzer": "^4.0.0",
         "rollup-plugin-cleaner": "^1.0.0",
-        "rollup-plugin-copy": "^3.3.0",
-        "rollup-plugin-dts": "^4.2.2",
+        "rollup-plugin-copy": "^3.5.0",
+        "rollup-plugin-dts": "^6.1.1",
         "rollup-plugin-peer-deps-external": "^2.2.4",
-        "rollup-plugin-ts-paths-resolve": "^1.3.0",
-        "rollup-plugin-typescript-paths": "^1.2.2",
+        "rollup-plugin-ts-paths-resolve": "^1.7.1",
         "storybook": "^7.6.3",
         "typescript": "^5.4.3",
         "vite": "^4.2.1",
@@ -111,5 +110,5 @@
         "build:storybook": "storybook build"
     },
     "sideEffects": false,
-    "version": "3.9.7-alpha.3"
+    "version": "3.9.7"
 }

package/src/components/tabs/Tabs.stories.tsx

@@ -1,108 +1,170 @@
-import { Button, Dialog, Tab, TabList, TabPanel, TabProvider } from '@lumx/react';
-import { loremIpsum } from '@lumx/react/stories/utils/lorem';
+/* eslint-disable react-hooks/rules-of-hooks */
+
+import { Alignment, Button, Dialog, Tab, TabList, TabListLayout, TabPanel, TabProvider } from '@lumx/react';
+import { iconArgType } from '@lumx/react/stories/controls/icons';
+import { getSelectArgType } from '@lumx/react/stories/controls/selectArgType';
+import { withNestedProps } from '@lumx/react/stories/decorators/withNestedProps';
+import { toFlattenProps } from '@lumx/react/stories/utils/toFlattenProps';
+import { withCategory } from '@lumx/react/stories/utils/withCategory';
 import get from 'lodash/get';
 import times from 'lodash/times';
 import React, { useState } from 'react';
 
-export default { title: 'LumX components/tabs' };
+export default {
+    title: 'LumX components/tabs',
+    decorators: [withNestedProps()],
+    parameters: { controls: { sort: 'alpha' } },
+};
+
+/** Default tab behavior with some controllable args */
+export const Default = {
+    render: ({ theme, tabProviderProps, tabListProps, tabProps }: any) => (
+        <TabProvider {...tabProviderProps}>
+            <TabList theme={theme} aria-label="Tab list" {...tabListProps}>
+                <Tab {...tabProps[0]} />
+                <Tab {...tabProps[1]} />
+                <Tab {...tabProps[2]} />
+            </TabList>
+            <TabPanel className="lumx-spacing-padding-huge">{tabProps[0].label} content</TabPanel>
+            <TabPanel className="lumx-spacing-padding-huge">{tabProps[1].label} content</TabPanel>
+            <TabPanel className="lumx-spacing-padding-huge">{tabProps[2].label} content</TabPanel>
+        </TabProvider>
+    ),
+    args: toFlattenProps({
+        tabProps: [
+            { label: 'Tab 1' },
+            {
+                label: 'Tab 2',
+                isDisabled: true,
+            },
+            { label: 'Tab 3' },
+        ],
+    }),
+    argTypes: toFlattenProps({
+        tabProviderProps: withCategory('Tab Provider', {
+            isLazy: { control: 'boolean' },
+            shouldActivateOnFocus: { control: 'boolean' },
+        }),
+        tabListProps: withCategory('Tab List', {
+            layout: getSelectArgType(TabListLayout),
+            position: getSelectArgType([Alignment.left, Alignment.center, Alignment.right]),
+        }),
+        tabProps: times(3, (index) =>
+            withCategory(`Tab ${index + 1}`, {
+                label: { control: 'text' },
+                icon: iconArgType,
+                isDisabled: { control: 'boolean' },
+            }),
+        ),
+    }),
+};
 
 /* Control active tab externally (with activate tab on focus). */
-export const Controlled = ({ theme }: any) => {
-    const [activeTab, setActiveTab] = useState(1);
-    const changeActiveTabIndex = (evt: any) => setActiveTab(parseInt(get(evt, 'target.value', '0'), 10));
+export const Controlled = {
+    render({ theme }: any) {
+        const [activeTab, setActiveTab] = useState(1);
+        const changeActiveTabIndex = (evt: any) => setActiveTab(parseInt(get(evt, 'target.value', '0'), 10));
 
-    const [isLazy, setIsLazy] = useState(true);
-    const changeIsLazy = (evt: any) => setIsLazy(get(evt, 'target.checked'));
+        const [isLazy, setIsLazy] = useState(true);
+        const changeIsLazy = (evt: any) => setIsLazy(get(evt, 'target.checked'));
 
-    const [shouldActivateOnFocus, setShouldActivateOnFocus] = useState(true);
-    const changeShouldActivateOnFocus = (evt: any) => setShouldActivateOnFocus(get(evt, 'target.checked'));
+        const [shouldActivateOnFocus, setShouldActivateOnFocus] = useState(true);
+        const changeShouldActivateOnFocus = (evt: any) => setShouldActivateOnFocus(get(evt, 'target.checked'));
 
-    return (
-        <>
-            <div>
-                Active tab index:
-                <input type="number" min={0} max={2} value={activeTab} onChange={changeActiveTabIndex} />
-            </div>
+        return (
+            <>
+                <div>
+                    Active tab index:
+                    <input type="number" min={0} max={2} value={activeTab} onChange={changeActiveTabIndex} />
+                </div>
 
-            <div>
-                Lazy render tab panel content:
-                <input type="checkbox" checked={isLazy} onChange={changeIsLazy} />
-            </div>
+                <div>
+                    Lazy render tab panel content:
+                    <input type="checkbox" checked={isLazy} onChange={changeIsLazy} />
+                </div>
 
-            <div>
-                Activate tab on focus:
-                <input type="checkbox" checked={shouldActivateOnFocus} onChange={changeShouldActivateOnFocus} />
-            </div>
-            <TabProvider
-                activeTabIndex={activeTab}
-                onChange={setActiveTab}
-                isLazy={isLazy}
-                shouldActivateOnFocus={shouldActivateOnFocus}
-            >
-                <TabList theme={theme} aria-label="Tab list">
-                    <Tab label="Tab a" />
-                    <Tab label="Tab b" />
-                    <Tab label="Tab c" />
-                </TabList>
+                <div>
+                    Activate tab on focus:
+                    <input type="checkbox" checked={shouldActivateOnFocus} onChange={changeShouldActivateOnFocus} />
+                </div>
+                <TabProvider
+                    activeTabIndex={activeTab}
+                    onChange={setActiveTab}
+                    isLazy={isLazy}
+                    shouldActivateOnFocus={shouldActivateOnFocus}
+                >
+                    <TabList theme={theme} aria-label="Tab list">
+                        <Tab label="Tab a" />
+                        <Tab label="Tab b" />
+                        <Tab label="Tab c" />
+                    </TabList>
 
-                <TabPanel className="lumx-spacing-padding-huge">Tab a content</TabPanel>
-                <TabPanel className="lumx-spacing-padding-huge">Tab b content</TabPanel>
-                <TabPanel className="lumx-spacing-padding-huge">Tab c content</TabPanel>
-            </TabProvider>
-        </>
-    );
+                    <TabPanel className="lumx-spacing-padding-huge">Tab a content</TabPanel>
+                    <TabPanel className="lumx-spacing-padding-huge">Tab b content</TabPanel>
+                    <TabPanel className="lumx-spacing-padding-huge">Tab c content</TabPanel>
+                </TabProvider>
+            </>
+        );
+    },
+    chromatic: { disable: true },
 };
 
 /* Display tabs far from their tab panels. */
-export const SplitTabListAndTabPanels = ({ theme }: any) => {
-    const [isOpen, setOpen] = useState(true);
-    const [activeTabIndex, onChange] = useState(1);
+export const SplitTabListAndTabPanels = {
+    render({ theme }: any) {
+        const [isOpen, setOpen] = useState(true);
+        const [activeTabIndex, onChange] = useState(1);
 
-    return (
-        <TabProvider activeTabIndex={activeTabIndex} onChange={onChange} isLazy={false}>
-            <Button
-                onClick={() => {
-                    setOpen(!isOpen);
-                    onChange(1);
-                }}
-            >
-                Open dialog with tabs in footer
-            </Button>
-            <Dialog isOpen={isOpen} forceFooterDivider onClose={() => setOpen(false)}>
-                <TabPanel className="lumx-spacing-padding-huge">Tab 1 content</TabPanel>
-                <TabPanel className="lumx-spacing-padding-huge">Tab 2 content</TabPanel>
-                <TabPanel className="lumx-spacing-padding-huge">Tab 3 content</TabPanel>
+        return (
+            <TabProvider activeTabIndex={activeTabIndex} onChange={onChange} isLazy={false}>
+                <Button
+                    onClick={() => {
+                        setOpen(!isOpen);
+                        onChange(1);
+                    }}
+                >
+                    Open dialog with tabs in footer
+                </Button>
+                <Dialog isOpen={isOpen} forceFooterDivider onClose={() => setOpen(false)}>
+                    <TabPanel className="lumx-spacing-padding-huge">Tab 1 content</TabPanel>
+                    <TabPanel className="lumx-spacing-padding-huge">Tab 2 content</TabPanel>
+                    <TabPanel className="lumx-spacing-padding-huge">Tab 3 content</TabPanel>
 
-                <footer>
-                    <TabList theme={theme} aria-label="Tab list">
-                        <Tab label="Tab 1" />
-                        <Tab label="Tab 2" />
-                        <Tab label="Tab 3" />
-                    </TabList>
-                </footer>
-            </Dialog>
-        </TabProvider>
-    );
+                    <footer>
+                        <TabList theme={theme} aria-label="Tab list">
+                            <Tab label="Tab 1" />
+                            <Tab label="Tab 2" />
+                            <Tab label="Tab 3" />
+                        </TabList>
+                    </footer>
+                </Dialog>
+            </TabProvider>
+        );
+    },
+    chromatic: { disable: true },
 };
 
 /* Dynamically generate tabs. */
-export const DynamicTabs = ({ theme, tabCount }: any) => {
-    return (
-        <TabProvider>
-            <TabList theme={theme} aria-label="Tab list">
+export const DynamicTabs = {
+    render({ theme, tabCount }: any) {
+        return (
+            <TabProvider>
+                <TabList theme={theme} aria-label="Tab list">
+                    {times(tabCount, (tabNumber) => (
+                        <Tab key={tabNumber} label={`Tab ${tabNumber}`} />
+                    ))}
+                </TabList>
+
                 {times(tabCount, (tabNumber) => (
-                    <Tab key={tabNumber} label={`Tab ${tabNumber}`} />
+                    <TabPanel key={tabNumber} className="lumx-spacing-padding-huge">
+                        Tab {tabNumber} content
+                    </TabPanel>
                 ))}
-            </TabList>
-
-            {times(tabCount, (tabNumber) => (
-                <TabPanel key={tabNumber} className="lumx-spacing-padding-huge">
-                    Tab {tabNumber} content
-                </TabPanel>
-            ))}
-        </TabProvider>
-    );
-};
-DynamicTabs.args = {
-    tabCount: 3,
+            </TabProvider>
+        );
+    },
+    args: {
+        tabCount: 3,
+    },
+    chromatic: { disable: true },
 };

package/src/stories/utils/concatPath.tsx

@@ -0,0 +1,17 @@
+export type PathPart = string | number;
+export type Path = PathPart | Array<PathPart>;
+
+/**
+ * Concat flatten object path
+ *
+ * @example concatPath('foo', 'bar') // => 'foo.bar'
+ * @example concatPath(['foo', 0]) // => 'foo[0]'
+ * @example concatPath('foo', 0, ['bar']) // => 'foo[0].bar'
+ */
+export const concatPath = (...prefix: Path[]) => {
+    const [first, ...rest] = prefix.flat();
+    return rest.reduce<string>((acc, part) => {
+        if (typeof part === 'number') return `${acc}[${part}]`;
+        return `${acc}.${part}`;
+    }, String(first));
+};

package/src/stories/utils/toFlattenProps.ts

@@ -0,0 +1,28 @@
+import castArray from 'lodash/castArray';
+import { concatPath } from './concatPath';
+
+type Props = Record<string, any>;
+type OneOrMoreProps = Props | Array<Props>;
+
+/**
+ * Build a flat props object from the given nested props
+ *
+ * @example toFlattenProps({ foo: { bar: 4 } }) // => { 'foo.bar': 4 }
+ * @example toFlattenProps({ foo: [{ bar: 4 }, { bar: 5 }] }) // => { 'foo[0].bar': 4, 'foo[0].bar': 5 }
+ */
+export function toFlattenProps(props: { [prefix: string]: OneOrMoreProps }): Props {
+    const out: Props = {};
+    for (const [prefix, oneOrMoreProps] of Object.entries(props)) {
+        const propsArray = castArray(oneOrMoreProps);
+
+        for (let i = 0; i < propsArray.length; i += 1) {
+            const path = Array.isArray(oneOrMoreProps) ? concatPath(prefix, i) : prefix;
+            const subProps = propsArray[i];
+
+            for (const [key, value] of Object.entries(subProps)) {
+                out[concatPath(path, key)] = value;
+            }
+        }
+    }
+    return out;
+}

package/src/stories/utils/withCategory.ts

@@ -0,0 +1,12 @@
+import setWith from 'lodash/setWith';
+
+/**
+ * Add table.category to the provided argTypes
+ */
+export function withCategory(category: string, argTypes: Record<string, any>) {
+    const out: typeof argTypes = {};
+    for (const [key, value] of Object.entries(argTypes)) {
+        out[key] = setWith({ ...value }, 'table.category', category);
+    }
+    return out;
+}

package/utils/index.d.ts

@@ -1,5 +1,5 @@
 import React, { RefObject } from 'react';
-import { F as Falsy } from '../_internal/types.js';
+import { F as Falsy } from '../_internal/index.js';
 
 interface ClickAwayParameters {
     /**

package/utils/index.js

@@ -1,2 +1,97 @@
-export { C as ClickAwayProvider } from '../_internal/ClickAwayProvider.js';
+import React__default, { useEffect, useContext, useMemo, useRef, createContext } from 'react';
+import isEmpty from 'lodash/isEmpty';
+
+const EVENT_TYPES = ['mousedown', 'touchstart'];
+function isClickAway(target, refs) {
+  // The target element is not contained in any of the listed element references.
+  return !refs.some(e => {
+    var _e$current;
+    return e === null || e === void 0 ? void 0 : (_e$current = e.current) === null || _e$current === void 0 ? void 0 : _e$current.contains(target);
+  });
+}
+/**
+ * Listen to clicks away from the given elements and callback the passed in function.
+ *
+ * Warning: If you need to detect click away on nested React portals, please use the `ClickAwayProvider` component.
+ */
+function useClickAway(_ref) {
+  let {
+    callback,
+    childrenRefs
+  } = _ref;
+  useEffect(() => {
+    const {
+      current: currentRefs
+    } = childrenRefs;
+    if (!callback || !currentRefs || isEmpty(currentRefs)) {
+      return undefined;
+    }
+    const listener = evt => {
+      if (isClickAway(evt.target, currentRefs)) {
+        callback(evt);
+      }
+    };
+    EVENT_TYPES.forEach(evtType => document.addEventListener(evtType, listener));
+    return () => {
+      EVENT_TYPES.forEach(evtType => document.removeEventListener(evtType, listener));
+    };
+  }, [callback, childrenRefs]);
+}
+
+const ClickAwayAncestorContext = /*#__PURE__*/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.
+ */
+const ClickAwayProvider = _ref => {
+  let {
+    children,
+    callback,
+    childrenRefs,
+    parentRef
+  } = _ref;
+  const parentContext = useContext(ClickAwayAncestorContext);
+  const currentContext = useMemo(() => {
+    const context = {
+      childrenRefs: [],
+      /**
+       * Add element refs to the current context and propagate to the parent context.
+       */
+      addRefs() {
+        // Add element refs that should be considered as inside the click away context.
+        context.childrenRefs.push(...arguments);
+        if (parentContext) {
+          // Also add then to the parent context
+          parentContext.addRefs(...arguments);
+          if (parentRef) {
+            // The parent element is also considered as inside the parent click away context but not inside the current context
+            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__*/React__default.createElement(ClickAwayAncestorContext.Provider, {
+    value: currentContext
+  }, children);
+};
+ClickAwayProvider.displayName = 'ClickAwayProvider';
+
+export { ClickAwayProvider };
 //# sourceMappingURL=index.js.map

package/utils/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}
+{"version":3,"file":"index.js","sources":["../../src/hooks/useClickAway.tsx","../../src/utils/ClickAwayProvider/ClickAwayProvider.tsx"],"sourcesContent":["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(target: HTMLElement, refs: Array<RefObject<HTMLElement>>): boolean {\n    // The target element is not contained in any of the listed element references.\n    return !refs.some((e) => e?.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            if (isClickAway(evt.target as HTMLElement, 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 React, { 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\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"],"names":["EVENT_TYPES","isClickAway","target","refs","some","e","_e$current","current","contains","useClickAway","_ref","callback","childrenRefs","useEffect","currentRefs","isEmpty","undefined","listener","evt","forEach","evtType","document","addEventListener","removeEventListener","ClickAwayAncestorContext","createContext","ClickAwayProvider","children","parentRef","parentContext","useContext","currentContext","useMemo","context","addRefs","push","arguments","useRef","React","createElement","Provider","value","displayName"],"mappings":"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"}

package/_internal/ClickAwayProvider.js

@@ -1,97 +0,0 @@
-import React__default, { useEffect, useContext, useMemo, useRef, createContext } from 'react';
-import isEmpty from 'lodash/isEmpty';
-
-const EVENT_TYPES = ['mousedown', 'touchstart'];
-function isClickAway(target, refs) {
-  // The target element is not contained in any of the listed element references.
-  return !refs.some(e => {
-    var _e$current;
-    return e === null || e === void 0 ? void 0 : (_e$current = e.current) === null || _e$current === void 0 ? void 0 : _e$current.contains(target);
-  });
-}
-/**
- * Listen to clicks away from the given elements and callback the passed in function.
- *
- * Warning: If you need to detect click away on nested React portals, please use the `ClickAwayProvider` component.
- */
-function useClickAway(_ref) {
-  let {
-    callback,
-    childrenRefs
-  } = _ref;
-  useEffect(() => {
-    const {
-      current: currentRefs
-    } = childrenRefs;
-    if (!callback || !currentRefs || isEmpty(currentRefs)) {
-      return undefined;
-    }
-    const listener = evt => {
-      if (isClickAway(evt.target, currentRefs)) {
-        callback(evt);
-      }
-    };
-    EVENT_TYPES.forEach(evtType => document.addEventListener(evtType, listener));
-    return () => {
-      EVENT_TYPES.forEach(evtType => document.removeEventListener(evtType, listener));
-    };
-  }, [callback, childrenRefs]);
-}
-
-const ClickAwayAncestorContext = /*#__PURE__*/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.
- */
-const ClickAwayProvider = _ref => {
-  let {
-    children,
-    callback,
-    childrenRefs,
-    parentRef
-  } = _ref;
-  const parentContext = useContext(ClickAwayAncestorContext);
-  const currentContext = useMemo(() => {
-    const context = {
-      childrenRefs: [],
-      /**
-       * Add element refs to the current context and propagate to the parent context.
-       */
-      addRefs() {
-        // Add element refs that should be considered as inside the click away context.
-        context.childrenRefs.push(...arguments);
-        if (parentContext) {
-          // Also add then to the parent context
-          parentContext.addRefs(...arguments);
-          if (parentRef) {
-            // The parent element is also considered as inside the parent click away context but not inside the current context
-            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__*/React__default.createElement(ClickAwayAncestorContext.Provider, {
-    value: currentContext
-  }, children);
-};
-ClickAwayProvider.displayName = 'ClickAwayProvider';
-
-export { ClickAwayProvider as C };
-//# sourceMappingURL=ClickAwayProvider.js.map

package/_internal/ClickAwayProvider.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"ClickAwayProvider.js","sources":["../../src/hooks/useClickAway.tsx","../../src/utils/ClickAwayProvider/ClickAwayProvider.tsx"],"sourcesContent":["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(target: HTMLElement, refs: Array<RefObject<HTMLElement>>): boolean {\n    // The target element is not contained in any of the listed element references.\n    return !refs.some((e) => e?.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            if (isClickAway(evt.target as HTMLElement, 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 React, { 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\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"],"names":["EVENT_TYPES","isClickAway","target","refs","some","e","_e$current","current","contains","useClickAway","_ref","callback","childrenRefs","useEffect","currentRefs","isEmpty","undefined","listener","evt","forEach","evtType","document","addEventListener","removeEventListener","ClickAwayAncestorContext","createContext","ClickAwayProvider","children","parentRef","parentContext","useContext","currentContext","useMemo","context","addRefs","push","arguments","useRef","React","createElement","Provider","value","displayName"],"mappings":";;;AAMA,MAAMA,WAAW,GAAG,CAAC,WAAW,EAAE,YAAY,CAAC,CAAA;AAE/C,SAASC,WAAWA,CAACC,MAAmB,EAAEC,IAAmC,EAAW;AACpF;AACA,EAAA,OAAO,CAACA,IAAI,CAACC,IAAI,CAAEC,CAAC,IAAA;AAAA,IAAA,IAAAC,UAAA,CAAA;AAAA,IAAA,OAAKD,CAAC,KAADA,IAAAA,IAAAA,CAAC,KAAAC,KAAAA,CAAAA,GAAAA,KAAAA,CAAAA,GAAAA,CAAAA,UAAA,GAADD,CAAC,CAAEE,OAAO,MAAA,IAAA,IAAAD,UAAA,KAAVA,KAAAA,CAAAA,GAAAA,KAAAA,CAAAA,GAAAA,UAAA,CAAYE,QAAQ,CAACN,MAAM,CAAC,CAAA;GAAC,CAAA,CAAA;AAC1D,CAAA;AAaA;AACA;AACA;AACA;AACA;AACO,SAASO,YAAYA,CAAAC,IAAA,EAAwD;EAAA,IAAvD;IAAEC,QAAQ;AAAEC,IAAAA,YAAAA;AAAkC,GAAC,GAAAF,IAAA,CAAA;AACxEG,EAAAA,SAAS,CAAC,MAAM;IACZ,MAAM;AAAEN,MAAAA,OAAO,EAAEO,WAAAA;AAAY,KAAC,GAAGF,YAAY,CAAA;IAC7C,IAAI,CAACD,QAAQ,IAAI,CAACG,WAAW,IAAIC,OAAO,CAACD,WAAW,CAAC,EAAE;AACnD,MAAA,OAAOE,SAAS,CAAA;AACpB,KAAA;IACA,MAAMC,QAAuB,GAAIC,GAAG,IAAK;MACrC,IAAIjB,WAAW,CAACiB,GAAG,CAAChB,MAAM,EAAiBY,WAAW,CAAC,EAAE;QACrDH,QAAQ,CAACO,GAAG,CAAC,CAAA;AACjB,OAAA;KACH,CAAA;AAEDlB,IAAAA,WAAW,CAACmB,OAAO,CAAEC,OAAO,IAAKC,QAAQ,CAACC,gBAAgB,CAACF,OAAO,EAAEH,QAAQ,CAAC,CAAC,CAAA;AAC9E,IAAA,OAAO,MAAM;AACTjB,MAAAA,WAAW,CAACmB,OAAO,CAAEC,OAAO,IAAKC,QAAQ,CAACE,mBAAmB,CAACH,OAAO,EAAEH,QAAQ,CAAC,CAAC,CAAA;KACpF,CAAA;AACL,GAAC,EAAE,CAACN,QAAQ,EAAEC,YAAY,CAAC,CAAC,CAAA;AAChC;;ACtCA,MAAMY,wBAAwB,gBAAGC,aAAa,CAAsB,IAAI,CAAC,CAAA;AASzE;AACA;AACA;AACA;AACA;AACA;AACaC,MAAAA,iBAAmD,GAAGhB,IAAA,IAK7D;EAAA,IAL8D;IAChEiB,QAAQ;IACRhB,QAAQ;IACRC,YAAY;AACZgB,IAAAA,SAAAA;AACJ,GAAC,GAAAlB,IAAA,CAAA;AACG,EAAA,MAAMmB,aAAa,GAAGC,UAAU,CAACN,wBAAwB,CAAC,CAAA;AAC1D,EAAA,MAAMO,cAAc,GAAGC,OAAO,CAAC,MAAM;AACjC,IAAA,MAAMC,OAAqB,GAAG;AAC1BrB,MAAAA,YAAY,EAAE,EAAE;AAChB;AACZ;AACA;AACYsB,MAAAA,OAAOA,GAAqB;AACxB;AACAD,QAAAA,OAAO,CAACrB,YAAY,CAACuB,IAAI,CAAC,GAAAC,SAAkB,CAAC,CAAA;AAE7C,QAAA,IAAIP,aAAa,EAAE;AACf;AACAA,UAAAA,aAAa,CAACK,OAAO,CAAC,GAAAE,SAAkB,CAAC,CAAA;AACzC,UAAA,IAAIR,SAAS,EAAE;AACX;AACAC,YAAAA,aAAa,CAACK,OAAO,CAACN,SAAS,CAAC,CAAA;AACpC,WAAA;AACJ,SAAA;AACJ,OAAA;KACH,CAAA;AACD,IAAA,OAAOK,OAAO,CAAA;AAClB,GAAC,EAAE,CAACJ,aAAa,EAAED,SAAS,CAAC,CAAC,CAAA;AAE9Bf,EAAAA,SAAS,CAAC,MAAM;IACZ,MAAM;AAAEN,MAAAA,OAAO,EAAEO,WAAAA;AAAY,KAAC,GAAGF,YAAY,CAAA;IAC7C,IAAI,CAACE,WAAW,EAAE;AACd,MAAA,OAAA;AACJ,KAAA;AACAiB,IAAAA,cAAc,CAACG,OAAO,CAAC,GAAGpB,WAAW,CAAC,CAAA;AAC1C,GAAC,EAAE,CAACiB,cAAc,EAAEnB,YAAY,CAAC,CAAC,CAAA;AAElCH,EAAAA,YAAY,CAAC;IAAEE,QAAQ;AAAEC,IAAAA,YAAY,EAAEyB,MAAM,CAACN,cAAc,CAACnB,YAAY,CAAA;AAAE,GAAC,CAAC,CAAA;AAC7E,EAAA,oBAAO0B,cAAA,CAAAC,aAAA,CAACf,wBAAwB,CAACgB,QAAQ,EAAA;AAACC,IAAAA,KAAK,EAAEV,cAAAA;AAAe,GAAA,EAAEJ,QAA4C,CAAC,CAAA;AACnH,EAAC;AACDD,iBAAiB,CAACgB,WAAW,GAAG,mBAAmB;;;;"}