@lumx/react 3.10.1-alpha.1 → 3.10.1-alpha.3

package/_internal/index.d.ts

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

package/_internal/index.js

@@ -0,0 +1,99 @@
+import React__default, { useEffect, useContext, useMemo, useRef, createContext } from 'react';
+
+/** Check if object or array is empty (true on falsy values) */
+const isEmpty = obj => !obj || Object.entries(obj).length === 0;
+
+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, isEmpty as i };
+//# sourceMappingURL=index.js.map

package/_internal/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../src/utils/collection/isEmpty.ts","../../src/hooks/useClickAway.tsx","../../src/utils/ClickAwayProvider/ClickAwayProvider.tsx"],"sourcesContent":["import { Falsy } from '../type';\n\n/** Check if object or array is empty (true on falsy values) */\nexport const isEmpty = (obj: object | Falsy) => !obj || Object.entries(obj).length === 0;\n","import { RefObject, useEffect } from 'react';\n\nimport { Falsy } from '@lumx/react/utils/type';\nimport { isEmpty } from '@lumx/react/utils/collection/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":["isEmpty","obj","Object","entries","length","EVENT_TYPES","isClickAway","target","refs","some","e","_e$current","current","contains","useClickAway","_ref","callback","childrenRefs","useEffect","currentRefs","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/index.d.ts

@@ -1,4 +1,4 @@
-import { K as Kind, C as Comp, G as GenericProps, H as HasTheme, a as HorizontalAlignment, S as Size, b as ColorPalette, E as Emphasis, V as ValueOf, A as Alignment, c as VerticalAlignment, O as Orientation, d as ColorVariant, T as Typography, e as TextElement, W as WhiteSpace, f as HeadingElement, g as AspectRatio, F as Falsy, h as HasClassName, i as HasAriaLabelOrLabelledBy, j as ComponentRef, k as HasCloseMode, l as GlobalSize, m as TypographyInterface, n as Theme } from './_internal/index.js';
+import { K as Kind, C as Comp, G as GenericProps, H as HasTheme, a as HorizontalAlignment, S as Size, b as ColorPalette, E as Emphasis, V as ValueOf, A as Alignment, c as VerticalAlignment, O as Orientation, d as ColorVariant, T as Typography, e as TextElement, W as WhiteSpace, f as HeadingElement, g as AspectRatio, F as Falsy, h as HasClassName, i as ComponentRef, j as HasAriaLabelOrLabelledBy, k as HasCloseMode, l as GlobalSize, m as TypographyInterface, n as Theme } from './_internal/index.js';
 export { r as Callback, o as Color, q as TypographyCustom, p as TypographyTitleCustom } from './_internal/index.js';
 import React, { ReactNode, SyntheticEvent, ReactElement, MouseEventHandler, KeyboardEventHandler, AriaAttributes, DetailedHTMLProps, ButtonHTMLAttributes, InputHTMLAttributes, Ref, RefObject, ImgHTMLAttributes, CSSProperties, SetStateAction, Key } from 'react';
 
@@ -989,24 +989,13 @@ interface FlexBoxProps extends GenericProps {
  */
 declare const FlexBox: Comp<FlexBoxProps, HTMLDivElement>;
 
+type GenericBlockGapSize = Extract<Size, 'tiny' | 'regular' | 'medium' | 'big' | 'huge'>;
 /**
  * Accepted gap sizes for the generic block.
  */
-declare const GenericBlockGapSize: Pick<{
-    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";
-}, "big" | "tiny" | "regular" | "medium" | "huge">;
-type GenericBlockGapSize = ValueOf<typeof GenericBlockGapSize>;
+declare const GenericBlockGapSize: {
+    [S in GenericBlockGapSize]: S;
+};
 
 interface GenericBlockProps extends FlexBoxProps {
     /**
@@ -1822,57 +1811,45 @@ declare const Mosaic: Comp<MosaicProps, HTMLDivElement>;
 
 interface NavigationSectionProps extends React.ComponentPropsWithoutRef<'button'>, HasClassName {
     /** Items inside the section */
-    children: ReactNode;
+    children: React.ReactNode;
     /** Icon (SVG path). */
     icon?: string;
     /** Label content. */
-    label: string | ReactNode;
+    label: string | React.ReactNode;
 }
+declare const NavigationSection: Comp<NavigationSectionProps, HTMLLIElement>;
+
+type BaseNavigationItemProps = {
+    /** Icon (SVG path). */
+    icon?: string;
+    /** Label content. */
+    label: ReactNode;
+    /** Mark as the current page link */
+    isCurrentPage?: boolean;
+};
+/** Make `href` required when `as` is `a` */
+type RequiredLinkHref<E> = E extends 'a' ? {
+    href: string;
+} : Record<string, unknown>;
+declare const NavigationItem: (<E extends React.ElementType = "a">(props: React.PropsWithoutRef<React.ComponentProps<E>> & {
+    as?: E | undefined;
+} & HasTheme & HasClassName & BaseNavigationItemProps & RequiredLinkHref<E> & React.ComponentProps<E> & {
+    ref?: ComponentRef<E> | undefined;
+}) => React.JSX.Element) & {
+    displayName: string;
+    className: string;
+};
 
 type NavigationProps = React.ComponentProps<'nav'> & HasClassName & HasTheme & {
     /** Content of the navigation. These components should be of type NavigationItem to be rendered */
-    children?: ReactNode;
+    children?: React.ReactNode;
     orientation?: Orientation;
 } & HasAriaLabelOrLabelledBy;
-declare const Navigation: React.ForwardRefExoticComponent<(Omit<React.ClassAttributes<HTMLElement> & React.HTMLAttributes<HTMLElement> & HasClassName & HasTheme & {
-    /** Content of the navigation. These components should be of type NavigationItem to be rendered */
-    children?: ReactNode;
-    orientation?: Orientation | undefined;
-} & {
-    'aria-label': string;
-    'aria-labelledby'?: undefined;
-}, "ref"> | Omit<React.ClassAttributes<HTMLElement> & React.HTMLAttributes<HTMLElement> & HasClassName & HasTheme & {
-    /** Content of the navigation. These components should be of type NavigationItem to be rendered */
-    children?: ReactNode;
-    orientation?: Orientation | undefined;
-} & {
-    'aria-labelledby': string;
-    'aria-label'?: undefined;
-}, "ref">) & React.RefAttributes<HTMLElement>> & {
-    displayName: string;
-    className: string;
-    defaultProps: {
-        orientation: "vertical";
-    };
-    Section: React.ForwardRefExoticComponent<NavigationSectionProps & React.RefAttributes<HTMLLIElement>> & {
-        displayName: string;
-        className: string;
-    };
-    Item: (<E extends React.ElementType = "a">(props: React.PropsWithoutRef<React.ComponentProps<E>> & {
-        as?: E | undefined;
-    } & HasTheme & HasClassName & {
-        icon?: string | undefined;
-        label: React.ReactNode;
-        isCurrentPage?: boolean | undefined;
-    } & (E extends "a" ? {
-        href: string;
-    } : Record<string, unknown>) & {
-        ref?: ComponentRef<E> | undefined;
-    }) => React.ReactNode) & {
-        displayName: string;
-        className: string;
-    };
+type SubComponents = {
+    Section: typeof NavigationSection;
+    Item: typeof NavigationItem;
 };
+declare const Navigation: Comp<NavigationProps, HTMLElement> & SubComponents;
 
 /**
  * Defines the props of the component.