@lumx/react 3.3.1-alpha.0 → 3.3.1

package/_internal/ClickAwayProvider.js.map

@@ -1 +1 @@
-{"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","current","contains","useClickAway","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","useRef","displayName"],"mappings":";;;AAMA,MAAMA,WAAW,GAAG,CAAC,WAAW,EAAE,YAAY,CAAC;AAE/C,SAASC,WAAW,CAACC,MAAmB,EAAEC,IAAmC,EAAW;;EAEpF,OAAO,CAACA,IAAI,CAACC,IAAI,CAAEC,CAAC;IAAA;IAAA,OAAKA,CAAC,aAADA,CAAC,qCAADA,CAAC,CAAEC,OAAO,+CAAV,WAAYC,QAAQ,CAACL,MAAM,CAAC;IAAC;AAC1D;AAaA;AACA;AACA;AACA;AACA;AACO,SAASM,YAAY,OAAwD;EAAA,IAAvD;IAAEC,QAAQ;IAAEC;GAAmC;EACxEC,SAAS,CAAC,MAAM;IACZ,MAAM;MAAEL,OAAO,EAAEM;KAAa,GAAGF,YAAY;IAC7C,IAAI,CAACD,QAAQ,IAAI,CAACG,WAAW,IAAIC,OAAO,CAACD,WAAW,CAAC,EAAE;MACnD,OAAOE,SAAS;;IAEpB,MAAMC,QAAuB,GAAIC,GAAG,IAAK;MACrC,IAAIf,WAAW,CAACe,GAAG,CAACd,MAAM,EAAiBU,WAAW,CAAC,EAAE;QACrDH,QAAQ,CAACO,GAAG,CAAC;;KAEpB;IAEDhB,WAAW,CAACiB,OAAO,CAAEC,OAAO,IAAKC,QAAQ,CAACC,gBAAgB,CAACF,OAAO,EAAEH,QAAQ,CAAC,CAAC;IAC9E,OAAO,MAAM;MACTf,WAAW,CAACiB,OAAO,CAAEC,OAAO,IAAKC,QAAQ,CAACE,mBAAmB,CAACH,OAAO,EAAEH,QAAQ,CAAC,CAAC;KACpF;GACJ,EAAE,CAACN,QAAQ,EAAEC,YAAY,CAAC,CAAC;AAChC;;ACtCA,MAAMY,wBAAwB,gBAAGC,aAAa,CAAsB,IAAI,CAAC;AASzE;AACA;AACA;AACA;AACA;AACA;MACaC,iBAAmD,GAAG,QAK7D;EAAA,IAL8D;IAChEC,QAAQ;IACRhB,QAAQ;IACRC,YAAY;IACZgB;GACH;EACG,MAAMC,aAAa,GAAGC,UAAU,CAACN,wBAAwB,CAAC;EAC1D,MAAMO,cAAc,GAAGC,OAAO,CAAC,MAAM;IACjC,MAAMC,OAAqB,GAAG;MAC1BrB,YAAY,EAAE,EAAE;;AAE5B;AACA;MACYsB,OAAO,GAAqB;;QAExBD,OAAO,CAACrB,YAAY,CAACuB,IAAI,CAAC,YAAkB,CAAC;QAE7C,IAAIN,aAAa,EAAE;;UAEfA,aAAa,CAACK,OAAO,CAAC,YAAkB,CAAC;UACzC,IAAIN,SAAS,EAAE;;YAEXC,aAAa,CAACK,OAAO,CAACN,SAAS,CAAC;;;;KAI/C;IACD,OAAOK,OAAO;GACjB,EAAE,CAACJ,aAAa,EAAED,SAAS,CAAC,CAAC;EAE9Bf,SAAS,CAAC,MAAM;IACZ,MAAM;MAAEL,OAAO,EAAEM;KAAa,GAAGF,YAAY;IAC7C,IAAI,CAACE,WAAW,EAAE;MACd;;IAEJiB,cAAc,CAACG,OAAO,CAAC,GAAGpB,WAAW,CAAC;GACzC,EAAE,CAACiB,cAAc,EAAEnB,YAAY,CAAC,CAAC;EAElCF,YAAY,CAAC;IAAEC,QAAQ;IAAEC,YAAY,EAAEwB,MAAM,CAACL,cAAc,CAACnB,YAAY;GAAG,CAAC;EAC7E,oBAAO,oBAAC,wBAAwB,CAAC,QAAQ;IAAC,KAAK,EAAEmB;KAAiBJ,QAAQ,CAAqC;AACnH;AACAD,iBAAiB,CAACW,WAAW,GAAG,mBAAmB;;;;"}
+{"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;AAE/C,SAASC,WAAWA,CAACC,MAAmB,EAAEC,IAAmC,EAAW;;EAEpF,OAAO,CAACA,IAAI,CAACC,IAAI,CAAEC,CAAC;IAAA,IAAAC,UAAA;IAAA,OAAKD,CAAC,aAADA,CAAC,wBAAAC,UAAA,GAADD,CAAC,CAAEE,OAAO,cAAAD,UAAA,uBAAVA,UAAA,CAAYE,QAAQ,CAACN,MAAM,CAAC;IAAC;AAC1D;AAaA;AACA;AACA;AACA;AACA;AACO,SAASO,YAAYA,CAAAC,IAAA,EAAwD;EAAA,IAAvD;IAAEC,QAAQ;IAAEC;GAAmC,GAAAF,IAAA;EACxEG,SAAS,CAAC,MAAM;IACZ,MAAM;MAAEN,OAAO,EAAEO;KAAa,GAAGF,YAAY;IAC7C,IAAI,CAACD,QAAQ,IAAI,CAACG,WAAW,IAAIC,OAAO,CAACD,WAAW,CAAC,EAAE;MACnD,OAAOE,SAAS;;IAEpB,MAAMC,QAAuB,GAAIC,GAAG,IAAK;MACrC,IAAIjB,WAAW,CAACiB,GAAG,CAAChB,MAAM,EAAiBY,WAAW,CAAC,EAAE;QACrDH,QAAQ,CAACO,GAAG,CAAC;;KAEpB;IAEDlB,WAAW,CAACmB,OAAO,CAAEC,OAAO,IAAKC,QAAQ,CAACC,gBAAgB,CAACF,OAAO,EAAEH,QAAQ,CAAC,CAAC;IAC9E,OAAO,MAAM;MACTjB,WAAW,CAACmB,OAAO,CAAEC,OAAO,IAAKC,QAAQ,CAACE,mBAAmB,CAACH,OAAO,EAAEH,QAAQ,CAAC,CAAC;KACpF;GACJ,EAAE,CAACN,QAAQ,EAAEC,YAAY,CAAC,CAAC;AAChC;;ACtCA,MAAMY,wBAAwB,gBAAGC,aAAa,CAAsB,IAAI,CAAC;AASzE;AACA;AACA;AACA;AACA;AACA;MACaC,iBAAmD,GAAGhB,IAAA,IAK7D;EAAA,IAL8D;IAChEiB,QAAQ;IACRhB,QAAQ;IACRC,YAAY;IACZgB;GACH,GAAAlB,IAAA;EACG,MAAMmB,aAAa,GAAGC,UAAU,CAACN,wBAAwB,CAAC;EAC1D,MAAMO,cAAc,GAAGC,OAAO,CAAC,MAAM;IACjC,MAAMC,OAAqB,GAAG;MAC1BrB,YAAY,EAAE,EAAE;;AAE5B;AACA;MACYsB,OAAOA,GAAqB;;QAExBD,OAAO,CAACrB,YAAY,CAACuB,IAAI,CAAC,GAAAC,SAAkB,CAAC;QAE7C,IAAIP,aAAa,EAAE;;UAEfA,aAAa,CAACK,OAAO,CAAC,GAAAE,SAAkB,CAAC;UACzC,IAAIR,SAAS,EAAE;;YAEXC,aAAa,CAACK,OAAO,CAACN,SAAS,CAAC;;;;KAI/C;IACD,OAAOK,OAAO;GACjB,EAAE,CAACJ,aAAa,EAAED,SAAS,CAAC,CAAC;EAE9Bf,SAAS,CAAC,MAAM;IACZ,MAAM;MAAEN,OAAO,EAAEO;KAAa,GAAGF,YAAY;IAC7C,IAAI,CAACE,WAAW,EAAE;MACd;;IAEJiB,cAAc,CAACG,OAAO,CAAC,GAAGpB,WAAW,CAAC;GACzC,EAAE,CAACiB,cAAc,EAAEnB,YAAY,CAAC,CAAC;EAElCH,YAAY,CAAC;IAAEE,QAAQ;IAAEC,YAAY,EAAEyB,MAAM,CAACN,cAAc,CAACnB,YAAY;GAAG,CAAC;EAC7E,oBAAO0B,KAAA,CAAAC,aAAA,CAACf,wBAAwB,CAACgB,QAAQ;IAACC,KAAK,EAAEV;KAAiBJ,QAA4C,CAAC;AACnH;AACAD,iBAAiB,CAACgB,WAAW,GAAG,mBAAmB;;;;"}

package/_internal/types.d.ts

@@ -238,8 +238,6 @@ declare type Typography = TypographyInterface | TypographyCustom;
 declare const AspectRatio: {
     /** Intrinsic content ratio. */
     readonly original: "original";
-    /** Ratio 3:1 */
-    readonly panoramic: "panoramic";
     /** Ratio 16:9 */
     readonly wide: "wide";
     /** Ratio 3:2 */

package/index.d.ts

@@ -2695,6 +2695,8 @@ interface TextFieldProps extends GenericProps, HasTheme {
     onBlur?(event: React.FocusEvent): void;
     /** On change callback. */
     onChange(value: string, name?: string, event?: SyntheticEvent): void;
+    /** On clear callback. */
+    onClear?(event?: SyntheticEvent): void;
     /** On focus callback. */
     onFocus?(event: React.FocusEvent): void;
 }