@lumx/react 3.0.2-alpha-react-utils.2 → 3.0.2-alpha-react-utils.3

package/_internal/{6340c129.js → ClickAwayProvider.js}

@@ -1,3 +1,6 @@
+import React, { useEffect, createContext, useContext, useMemo, useRef } from 'react';
+import isEmpty from 'lodash/isEmpty';
+
 function _typeof(obj) {
   "@babel/helpers - typeof";
 
@@ -183,5 +186,107 @@ function _nonIterableRest() {
   throw new TypeError("Invalid attempt to destructure non-iterable instance");
 }
 
-export { _objectSpread2 as _, _defineProperty as a, _objectWithoutProperties as b, _extends as c, _slicedToArray as d, _toConsumableArray as e, _toArray as f, _typeof as g };
-//# sourceMappingURL=6340c129.js.map
+var EVENT_TYPES = ['mousedown', 'touchstart'];
+
+function isClickAway(target, refs) {
+  // The target element is not contained in any of the listed element references.
+  return !refs.some(function (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) {
+  var callback = _ref.callback,
+      childrenRefs = _ref.childrenRefs;
+  useEffect(function () {
+    var currentRefs = childrenRefs.current;
+
+    if (!callback || !currentRefs || isEmpty(currentRefs)) {
+      return undefined;
+    }
+
+    var listener = function listener(evt) {
+      if (isClickAway(evt.target, currentRefs)) {
+        callback(evt);
+      }
+    };
+
+    EVENT_TYPES.forEach(function (evtType) {
+      return document.addEventListener(evtType, listener);
+    });
+    return function () {
+      EVENT_TYPES.forEach(function (evtType) {
+        return document.removeEventListener(evtType, listener);
+      });
+    };
+  }, [callback, childrenRefs]);
+}
+
+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 = function ClickAwayProvider(_ref) {
+  var children = _ref.children,
+      callback = _ref.callback,
+      childrenRefs = _ref.childrenRefs,
+      parentRef = _ref.parentRef;
+  var parentContext = useContext(ClickAwayAncestorContext);
+  var currentContext = useMemo(function () {
+    var context = {
+      childrenRefs: [],
+
+      /**
+       * Add element refs to the current context and propagate to the parent context.
+       */
+      addRefs: function addRefs() {
+        var _context$childrenRefs;
+
+        // Add element refs that should be considered as inside the click away context.
+        (_context$childrenRefs = context.childrenRefs).push.apply(_context$childrenRefs, arguments);
+
+        if (parentContext) {
+          // Also add then to the parent context
+          parentContext.addRefs.apply(parentContext, 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(function () {
+    var currentRefs = childrenRefs.current;
+
+    if (!currentRefs) {
+      return;
+    }
+
+    currentContext.addRefs.apply(currentContext, _toConsumableArray(currentRefs));
+  }, [currentContext, childrenRefs]);
+  useClickAway({
+    callback: callback,
+    childrenRefs: useRef(currentContext.childrenRefs)
+  });
+  return React.createElement(ClickAwayAncestorContext.Provider, {
+    value: currentContext
+  }, children);
+};
+ClickAwayProvider.displayName = 'ClickAwayProvider';
+
+export { ClickAwayProvider as C, _objectSpread2 as _, _objectWithoutProperties as a, _slicedToArray as b, _defineProperty as c, _extends as d, _toConsumableArray as e, _toArray as f, _typeof as g };
+//# sourceMappingURL=ClickAwayProvider.js.map

package/_internal/ClickAwayProvider.js.map

@@ -0,0 +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":"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"}

package/_internal/{eca6d4dc.d.ts → types.d.ts}

@@ -266,4 +266,4 @@ declare const ThumbnailVariant: {
 };
 declare type ThumbnailVariant = ValueOf<typeof ThumbnailVariant>;
 
-export { Alignment as A, ColorPalette as C, Emphasis as E, FocusPoint as F, GlobalSize as G, HorizontalAlignment as H, Kind as K, Orientation as O, Size as S, Theme as T, VerticalAlignment as V, Color as a, ColorVariant as b, TypographyInterface as c, TypographyTitleCustom as d, TypographyCustom as e, Typography as f, AspectRatio as g, ThumbnailAspectRatio as h, ThumbnailSize as i, ThumbnailVariant as j, Comp as k, GenericProps as l, HasTheme as m, ValueOf as n, Callback as o, HeadingElement as p, Falsy as q };
+export { Alignment as A, Comp as C, Emphasis as E, Falsy as F, GenericProps as G, HasTheme as H, Kind as K, Orientation as O, Size as S, Typography as T, ValueOf as V, HorizontalAlignment as a, Color as b, Callback as c, ColorPalette as d, VerticalAlignment as e, ColorVariant as f, HeadingElement as g, AspectRatio as h, FocusPoint as i, ThumbnailSize as j, ThumbnailVariant as k, GlobalSize as l, TypographyInterface as m, Theme as n, TypographyTitleCustom as o, TypographyCustom as p, ThumbnailAspectRatio as q };