@lumx/react 3.0.2 → 3.0.3

package/{esm/_internal/_rollupPluginBabelHelpers.js → _internal/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=_rollupPluginBabelHelpers.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/types.d.ts

@@ -0,0 +1,271 @@
+import React, { Ref, ReactElement } from 'react';
+
+/** Get types of the values of a record. */
+declare type ValueOf<T extends Record<any, any>> = T[keyof T];
+/** LumX Component Type. */
+declare type Comp<P, T = HTMLElement> = {
+    (props: P & {
+        ref?: Ref<T>;
+    }): ReactElement | null;
+    /** React component type. */
+    readonly $$typeof: symbol;
+    /** Component default props. */
+    defaultProps?: Partial<P>;
+    /** Component name. */
+    displayName?: string;
+    /** Component base class name. */
+    className?: string;
+};
+/** Union type of all heading elements */
+declare type HeadingElement = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+/** Union type of all text elements */
+declare type TextElement = 'span' | 'p' | HeadingElement;
+interface HasTheme {
+    /**
+     * Theme adapting the component to light or dark background.
+     */
+    theme?: Theme;
+}
+/**
+ * Define a generic props types.
+ */
+interface GenericProps {
+    /**
+     * Class name forwarded to the root element of the component.
+     */
+    className?: string;
+    /**
+     * Any prop (particularly any supported prop for a HTML element).
+     */
+    [propName: string]: any;
+}
+/**
+ * Callback function type alias (use for readability)
+ */
+declare type Callback = () => void;
+/**
+ * JS falsy values.
+ * (excluding `NaN` as it can't be distinguished from `number`)
+ */
+declare type Falsy = false | undefined | null | 0 | '';
+
+/**
+ * Alignments.
+ */
+declare const Alignment: {
+    readonly bottom: "bottom";
+    readonly center: "center";
+    readonly end: "end";
+    readonly left: "left";
+    readonly right: "right";
+    readonly spaceAround: "space-around";
+    readonly spaceBetween: "space-between";
+    readonly spaceEvenly: "space-evenly";
+    readonly start: "start";
+    readonly top: "top";
+};
+declare type Alignment = ValueOf<typeof Alignment>;
+declare type VerticalAlignment = Extract<Alignment, 'top' | 'center' | 'bottom'>;
+declare type HorizontalAlignment = Extract<Alignment, 'right' | 'center' | 'left'>;
+/**
+ * See SCSS variable $lumx-color-palette
+ */
+declare const ColorPalette: {
+    readonly primary: "primary";
+    readonly secondary: "secondary";
+    readonly blue: "blue";
+    readonly dark: "dark";
+    readonly green: "green";
+    readonly yellow: "yellow";
+    readonly red: "red";
+    readonly light: "light";
+    readonly grey: "grey";
+};
+declare type ColorPalette = ValueOf<typeof ColorPalette>;
+declare type Color = ColorPalette | string;
+/**
+ * See SCSS variable $lumx-color-variants
+ */
+declare const ColorVariant: {
+    readonly D1: "D1";
+    readonly D2: "D2";
+    readonly L1: "L1";
+    readonly L2: "L2";
+    readonly L3: "L3";
+    readonly L4: "L4";
+    readonly L5: "L5";
+    readonly L6: "L6";
+    readonly N: "N";
+};
+declare type ColorVariant = ValueOf<typeof ColorVariant>;
+declare const Theme: {
+    readonly light: "light";
+    readonly dark: "dark";
+};
+declare type Theme = ValueOf<typeof Theme>;
+declare const Size: {
+    readonly xxs: "xxs";
+    readonly xs: "xs";
+    readonly s: "s";
+    readonly m: "m";
+    readonly l: "l";
+    readonly xl: "xl";
+    readonly xxl: "xxl";
+    readonly tiny: "tiny";
+    readonly regular: "regular";
+    readonly medium: "medium";
+    readonly big: "big";
+    readonly huge: "huge";
+};
+declare type Size = ValueOf<typeof Size>;
+declare type GlobalSize = Extract<Size, 'xxs' | 'xs' | 's' | 'm' | 'l' | 'xl' | 'xxl'>;
+declare const Orientation: {
+    readonly horizontal: "horizontal";
+    readonly vertical: "vertical";
+};
+declare type Orientation = ValueOf<typeof Orientation>;
+declare const Emphasis: {
+    readonly low: "low";
+    readonly medium: "medium";
+    readonly high: "high";
+};
+declare type Emphasis = ValueOf<typeof Emphasis>;
+/**
+ * List of typographies that can't be customized.
+ */
+declare const TypographyInterface: {
+    readonly overline: "overline";
+    readonly caption: "caption";
+    readonly body1: "body1";
+    readonly body2: "body2";
+    readonly subtitle1: "subtitle1";
+    readonly subtitle2: "subtitle2";
+    readonly title: "title";
+    readonly headline: "headline";
+    readonly display1: "display1";
+};
+declare type TypographyInterface = ValueOf<typeof TypographyInterface>;
+/**
+ * List of title typographies that can be customized (via CSS variables).
+ */
+declare const TypographyTitleCustom: {
+    readonly title1: "custom-title1";
+    readonly title2: "custom-title2";
+    readonly title3: "custom-title3";
+    readonly title4: "custom-title4";
+    readonly title5: "custom-title5";
+    readonly title6: "custom-title6";
+};
+declare type TypographyTitleCustom = ValueOf<typeof TypographyTitleCustom>;
+/**
+ * List of typographies that can be customized (via CSS variables).
+ */
+declare const TypographyCustom: {
+    readonly intro: "custom-intro";
+    readonly 'body-large': "custom-body-large";
+    readonly body: "custom-body";
+    readonly quote: "custom-quote";
+    readonly 'publish-info': "custom-publish-info";
+    readonly button: "custom-button";
+    readonly title1: "custom-title1";
+    readonly title2: "custom-title2";
+    readonly title3: "custom-title3";
+    readonly title4: "custom-title4";
+    readonly title5: "custom-title5";
+    readonly title6: "custom-title6";
+};
+declare type TypographyCustom = ValueOf<typeof TypographyCustom>;
+/**
+ * List of all typographies.
+ */
+declare const Typography: {
+    readonly custom: {
+        readonly intro: "custom-intro";
+        readonly 'body-large': "custom-body-large";
+        readonly body: "custom-body";
+        readonly quote: "custom-quote";
+        readonly 'publish-info': "custom-publish-info";
+        readonly button: "custom-button";
+        readonly title1: "custom-title1";
+        readonly title2: "custom-title2";
+        readonly title3: "custom-title3";
+        readonly title4: "custom-title4";
+        readonly title5: "custom-title5";
+        readonly title6: "custom-title6";
+    };
+    readonly overline: "overline";
+    readonly caption: "caption";
+    readonly body1: "body1";
+    readonly body2: "body2";
+    readonly subtitle1: "subtitle1";
+    readonly subtitle2: "subtitle2";
+    readonly title: "title";
+    readonly headline: "headline";
+    readonly display1: "display1";
+};
+declare type Typography = TypographyInterface | TypographyCustom;
+/**
+ * All available aspect ratios.
+ */
+declare const AspectRatio: {
+    /** Intrinsic content ratio. */
+    readonly original: "original";
+    /** Ratio 16:9 */
+    readonly wide: "wide";
+    /** Ratio 3:2 */
+    readonly horizontal: "horizontal";
+    /** Ratio 3:2 */
+    readonly vertical: "vertical";
+    /** Ratio 1:1 */
+    readonly square: "square";
+    /** Ratio constrained by the parent. */
+    readonly free: "free";
+};
+declare type AspectRatio = ValueOf<typeof AspectRatio>;
+/**
+ * Semantic info about the purpose of the component
+ */
+declare const Kind: {
+    readonly info: "info";
+    readonly success: "success";
+    readonly warning: "warning";
+    readonly error: "error";
+};
+declare type Kind = ValueOf<typeof Kind>;
+
+/**
+ *  Focal point using vertical alignment, horizontal alignment or coordinates (from -1 to 1).
+ */
+declare type FocusPoint = {
+    x?: number;
+    y?: number;
+};
+/**
+ * Loading attribute is not yet supported in typescript, so we need
+ * to add it in order to avoid a ts error.
+ * https://github.com/typescript-cheatsheets/react-typescript-cheatsheet/blob/master/ADVANCED.md#adding-non-standard-attributes
+ */
+declare module 'react' {
+    interface ImgHTMLAttributes<T> extends React.HTMLAttributes<T> {
+        loading?: 'eager' | 'lazy';
+    }
+}
+/**
+ * All available aspect ratios.
+ * @deprecated
+ */
+declare const ThumbnailAspectRatio: Record<string, AspectRatio>;
+/**
+ *  Thumbnail sizes.
+ */
+declare type ThumbnailSize = Extract<Size, 'xxs' | 'xs' | 's' | 'm' | 'l' | 'xl' | 'xxl'>;
+/**
+ * Thumbnail variants.
+ */
+declare const ThumbnailVariant: {
+    readonly squared: "squared";
+    readonly rounded: "rounded";
+};
+declare type ThumbnailVariant = ValueOf<typeof ThumbnailVariant>;
+
+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, TextElement as g, HeadingElement as h, AspectRatio as i, FocusPoint as j, ThumbnailSize as k, ThumbnailVariant as l, GlobalSize as m, TypographyInterface as n, Theme as o, TypographyTitleCustom as p, TypographyCustom as q, ThumbnailAspectRatio as r };