@lumx/react 4.0.1-alpha.3 → 4.0.1-alpha.5

package/_internal/{ClSM3-wl.js → BYSwKsj4.js}

@@ -1,7 +1,8 @@
 import React__default, { useContext, useEffect, createContext, useMemo, useRef } from 'react';
 import { jsx, Fragment } from 'react/jsx-runtime';
 import isEmpty from 'lodash/isEmpty';
-import { createPortal } from 'react-dom';
+import ReactDOM, { createPortal } from 'react-dom';
+import '@lumx/core/js/constants';
 
 const DisabledStateContext = /*#__PURE__*/React__default.createContext({
   state: null
@@ -27,6 +28,21 @@ function useDisabledStateContext() {
   return useContext(DisabledStateContext);
 }
 
+/**
+ * Optional global `window` instance (not defined when running SSR).
+ */
+const WINDOW = typeof window !== 'undefined' ? window : undefined;
+
+/**
+ * Optional global `document` instance (not defined when running SSR).
+ */
+const DOCUMENT = typeof document !== 'undefined' ? document : undefined;
+
+/**
+ * Check if we are running in a true browser
+ */
+const IS_BROWSER = typeof navigator !== 'undefined' && !navigator.userAgent.includes('jsdom');
+
 const EVENT_TYPES = ['mousedown', 'touchstart'];
 function isClickAway(targets, refs) {
   // The targets elements are not contained in any of the listed element references.
@@ -116,6 +132,11 @@ const ClickAwayProvider = ({
 };
 ClickAwayProvider.displayName = 'ClickAwayProvider';
 
+/** Check if user prefers reduced motion */
+function isReducedMotion() {
+  return WINDOW?.matchMedia?.('(prefers-reduced-motion: reduce)').matches;
+}
+
 /**
  * Portal initializing function.
  * If it does not provide a container, the Portal children will render in classic React tree and not in a portal.
@@ -155,5 +176,66 @@ const Portal = ({
   return /*#__PURE__*/createPortal(children, context.container);
 };
 
-export { ClickAwayProvider as C, DisabledStateProvider as D, Portal as P, PortalProvider as a, useDisabledStateContext as u };
-//# sourceMappingURL=ClSM3-wl.js.map
+/** Unref a react ref or element */
+function unref(maybeElement) {
+  if (maybeElement instanceof Element) return maybeElement;
+  return maybeElement?.current;
+}
+
+function setupViewTransitionName(groups, type) {
+  const resets = [];
+  for (const group of groups) {
+    const element = unref(group[type]);
+    if (element instanceof HTMLElement) {
+      const originalName = element.style.viewTransitionName;
+      resets.push(() => {
+        element.style.viewTransitionName = originalName;
+      });
+      element.style.viewTransitionName = group.name;
+    }
+  }
+  return () => {
+    for (const reset of resets) {
+      reset();
+    }
+  };
+}
+
+/**
+ * Wrapper around the `document.startViewTransition` handling browser incompatibilities, react DOM flush and
+ * user preference.
+ *
+ * @param updateCallback      callback containing the changes to apply within the view transition.
+ * @param groups              setup groups of old and new element pair to transition between.
+ */
+async function startViewTransition(updateCallback, {
+  groups = []
+} = {}) {
+  const start = document?.startViewTransition?.bind(document);
+  const prefersReducedMotion = isReducedMotion();
+  const {
+    flushSync
+  } = ReactDOM;
+  if (prefersReducedMotion || !start || !flushSync) {
+    // Skip, apply changes without a transition
+    updateCallback();
+    return;
+  }
+
+  // Setup view transition name on old elements
+  const resetOldElement = setupViewTransitionName(groups, 'old');
+  let resetNewElements;
+
+  // Start view transition, apply changes & flush to DOM
+  await start(() => {
+    resetOldElement();
+    flushSync(updateCallback);
+
+    // Setup view transition name on new elements
+    resetNewElements = setupViewTransitionName(groups, 'new');
+  }).updateCallbackDone;
+  resetNewElements?.();
+}
+
+export { ClickAwayProvider as C, DisabledStateProvider as D, IS_BROWSER as I, Portal as P, WINDOW as W, PortalProvider as a, DOCUMENT as b, isReducedMotion as i, startViewTransition as s, useDisabledStateContext as u };
+//# sourceMappingURL=BYSwKsj4.js.map

package/_internal/BYSwKsj4.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BYSwKsj4.js","sources":["../../src/utils/disabled/DisabledStateContext.tsx","../../src/constants.ts","../../src/hooks/useClickAway.tsx","../../src/utils/ClickAwayProvider/ClickAwayProvider.tsx","../../src/utils/browser/isReducedMotion.ts","../../src/utils/Portal/PortalProvider.tsx","../../src/utils/Portal/Portal.tsx","../../src/utils/react/unref.ts","../../src/utils/browser/DOM/startViewTransition.ts"],"sourcesContent":["import React, { useContext } from 'react';\n\n/** Disable state */\ntype DisabledStateContextValue =\n    | {\n          state: 'disabled';\n      }\n    | { state: undefined | null };\n\nexport const DisabledStateContext = React.createContext<DisabledStateContextValue>({ state: null });\n\nexport type DisabledStateProviderProps = DisabledStateContextValue & {\n    children: React.ReactNode;\n};\n\n/**\n * Disabled state provider.\n * All nested LumX Design System components inherit this disabled state.\n */\nexport function DisabledStateProvider({ children, ...value }: DisabledStateProviderProps) {\n    return <DisabledStateContext.Provider value={value}>{children}</DisabledStateContext.Provider>;\n}\n\n/**\n * Get DisabledState context value\n */\nexport function useDisabledStateContext(): DisabledStateContextValue {\n    return useContext(DisabledStateContext);\n}\n","export {\n    DIALOG_TRANSITION_DURATION,\n    NOTIFICATION_TRANSITION_DURATION,\n    TOOLTIP_HOVER_DELAY,\n    TOOLTIP_LONG_PRESS_DELAY,\n    VISUALLY_HIDDEN,\n} from '@lumx/core/js/constants';\n\n/**\n * Optional global `window` instance (not defined when running SSR).\n */\nexport const WINDOW = typeof window !== 'undefined' ? window : undefined;\n\n/**\n * Optional global `document` instance (not defined when running SSR).\n */\nexport const DOCUMENT = typeof document !== 'undefined' ? document : undefined;\n\n/**\n * Check if we are running in a true browser\n */\nexport const IS_BROWSER = typeof navigator !== 'undefined' && !navigator.userAgent.includes('jsdom');\n","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(targets: HTMLElement[], refs: Array<RefObject<HTMLElement>>): boolean {\n    // The targets elements are not contained in any of the listed element references.\n    return !refs.some((ref) => targets.some((target) => ref?.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            const targets = [evt.composedPath?.()[0], evt.target] as HTMLElement[];\n            if (isClickAway(targets, 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 { 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     * Children\n     */\n    children?: React.ReactNode;\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","import { WINDOW } from '@lumx/react/constants';\n\n/** Check if user prefers reduced motion */\nexport function isReducedMotion() {\n    return WINDOW?.matchMedia?.('(prefers-reduced-motion: reduce)').matches;\n}\n","import React from 'react';\n\ntype Container = DocumentFragment | Element;\n\n/**\n * Portal initializing function.\n * If it does not provide a container, the Portal children will render in classic React tree and not in a portal.\n */\nexport type PortalInit = () => {\n    container?: Container;\n    teardown?: () => void;\n};\n\nexport const PortalContext = React.createContext<PortalInit>(() => ({ container: document.body }));\n\nexport interface PortalProviderProps {\n    children?: React.ReactNode;\n    value: PortalInit;\n}\n\n/**\n * Customize where <Portal> wrapped elements render (tooltip, popover, dialog, etc.)\n */\nexport const PortalProvider: React.FC<PortalProviderProps> = PortalContext.Provider;\n","import React from 'react';\nimport { createPortal } from 'react-dom';\nimport { PortalContext } from './PortalProvider';\n\nexport interface PortalProps {\n    enabled?: boolean;\n    children: React.ReactNode;\n}\n\n/**\n * Render children in a portal outside the current DOM position\n * (defaults to `document.body` but can be customized with the PortalContextProvider)\n */\nexport const Portal: React.FC<PortalProps> = ({ children, enabled = true }) => {\n    const init = React.useContext(PortalContext);\n    const context = React.useMemo(\n        () => {\n            return enabled ? init() : null;\n        },\n        // Only update on 'enabled'\n        // eslint-disable-next-line react-hooks/exhaustive-deps\n        [enabled],\n    );\n\n    React.useLayoutEffect(() => {\n        return context?.teardown;\n    }, [context?.teardown, enabled]);\n\n    if (!context?.container) {\n        return <>{children}</>;\n    }\n    return createPortal(children, context.container);\n};\n","import { MaybeElementOrRef } from '@lumx/react/utils/type';\n\n/** Unref a react ref or element */\nexport function unref(maybeElement: MaybeElementOrRef<Element>) {\n    if (maybeElement instanceof Element) return maybeElement;\n    return maybeElement?.current;\n}\n","import ReactDOM from 'react-dom';\n\nimport { MaybeElementOrRef } from '@lumx/react/utils/type';\n\nimport { unref } from '../../react/unref';\nimport { isReducedMotion } from '../isReducedMotion';\n\ninterface TransitionGroup {\n    /** Element that should be transitioned from */\n    old: MaybeElementOrRef<Element>;\n    /** Element that should be transitioned to */\n    new: MaybeElementOrRef<Element>;\n    /** viewTransitionName */\n    name: string;\n}\n\nfunction setupViewTransitionName(groups: TransitionGroup[], type: 'old' | 'new') {\n    const resets: Array<() => void> = [];\n    for (const group of groups) {\n        const element = unref(group[type]);\n        if (element instanceof HTMLElement) {\n            const originalName = element.style.viewTransitionName;\n            resets.push(() => {\n                element.style.viewTransitionName = originalName;\n            });\n            element.style.viewTransitionName = group.name;\n        }\n    }\n    return () => {\n        for (const reset of resets) {\n            reset();\n        }\n    };\n}\n\n/**\n * Wrapper around the `document.startViewTransition` handling browser incompatibilities, react DOM flush and\n * user preference.\n *\n * @param updateCallback      callback containing the changes to apply within the view transition.\n * @param groups              setup groups of old and new element pair to transition between.\n */\nexport async function startViewTransition(\n    updateCallback: () => void,\n    {\n        groups = [],\n    }: {\n        groups?: TransitionGroup[];\n    } = {},\n) {\n    const start = (document as any)?.startViewTransition?.bind(document);\n    const prefersReducedMotion = isReducedMotion();\n    const { flushSync } = ReactDOM as any;\n    if (prefersReducedMotion || !start || !flushSync) {\n        // Skip, apply changes without a transition\n        updateCallback();\n        return;\n    }\n\n    // Setup view transition name on old elements\n    const resetOldElement = setupViewTransitionName(groups, 'old');\n\n    let resetNewElements: (() => void) | undefined;\n\n    // Start view transition, apply changes & flush to DOM\n    await start(() => {\n        resetOldElement();\n\n        flushSync(updateCallback);\n\n        // Setup view transition name on new elements\n        resetNewElements = setupViewTransitionName(groups, 'new');\n    }).updateCallbackDone;\n\n    resetNewElements?.();\n}\n"],"names":["DisabledStateContext","React","createContext","state","DisabledStateProvider","children","value","_jsx","Provider","useDisabledStateContext","useContext","WINDOW","window","undefined","DOCUMENT","document","IS_BROWSER","navigator","userAgent","includes","EVENT_TYPES","isClickAway","targets","refs","some","ref","target","current","contains","useClickAway","callback","childrenRefs","useEffect","currentRefs","isEmpty","listener","evt","composedPath","forEach","evtType","addEventListener","removeEventListener","ClickAwayAncestorContext","ClickAwayProvider","parentRef","parentContext","currentContext","useMemo","context","addRefs","newChildrenRefs","push","useRef","displayName","isReducedMotion","matchMedia","matches","PortalContext","container","body","PortalProvider","Portal","enabled","init","useLayoutEffect","teardown","_Fragment","createPortal","unref","maybeElement","Element","setupViewTransitionName","groups","type","resets","group","element","HTMLElement","originalName","style","viewTransitionName","name","reset","startViewTransition","updateCallback","start","bind","prefersReducedMotion","flushSync","ReactDOM","resetOldElement","resetNewElements","updateCallbackDone"],"mappings":"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"}

package/index.d.ts

@@ -5,8 +5,6 @@ import { GenericProps, HasTheme, ValueOf, HasCloseMode, TextElement, HeadingElem
 export * from '@lumx/core/js/types';
 import * as React$1 from 'react';
 import React__default, { Ref, ReactElement, ReactNode, SyntheticEvent, MouseEventHandler, KeyboardEventHandler, AriaAttributes, DetailedHTMLProps, ButtonHTMLAttributes, InputHTMLAttributes, RefObject, ImgHTMLAttributes, CSSProperties, SetStateAction, Key, ElementType, ComponentProps } from 'react';
-import { IconProps } from '@lumx/core/js/components/Icon';
-export { IconProps, IconSizes } from '@lumx/core/js/components/Icon';
 
 /** LumX Component Type. */
 type Comp<P, T = HTMLElement> = {
@@ -1314,6 +1312,27 @@ interface GridColumnProps extends GenericProps {
  */
 declare const GridColumn: Comp<GridColumnProps, HTMLElement>;
 
+type IconSizes = Extract<Size, 'xxs' | 'xs' | 's' | 'm' | 'l' | 'xl' | 'xxl'>;
+/**
+ * Defines the props of the component.
+ */
+interface IconProps extends GenericProps, HasTheme {
+    /** Color variant. */
+    color?: ColorWithVariants;
+    /** Lightened or darkened variant of the selected icon color. */
+    colorVariant?: ColorVariant;
+    /** Whether the icon has a shape. */
+    hasShape?: boolean;
+    /**
+     * Icon (SVG path) draw code (`d` property of the `<path>` SVG element).
+     * See https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths
+     */
+    icon: string;
+    /** Size variant. */
+    size?: IconSizes;
+    /** Sets an alternative text on the svg. Will set an `img` role to the svg. */
+    alt?: string;
+}
 /**
  * Icon component.
  *
@@ -3166,4 +3185,4 @@ declare const ThemeProvider: React__default.FC<{
 declare function useTheme(): ThemeContextValue;
 
 export { AlertDialog, Autocomplete, AutocompleteMultiple, Avatar, Badge, BadgeWrapper, Button, ButtonEmphasis, ButtonGroup, Checkbox, Chip, ChipGroup, CommentBlock, CommentBlockVariant, DatePicker, DatePickerControlled, DatePickerField, Dialog, Divider, DragHandle, Dropdown, ExpansionPanel, Flag, FlexBox, GenericBlock, GenericBlockGapSize, Grid, GridColumn, GridItem, Heading, HeadingLevelProvider, Icon, IconButton, ImageBlock, ImageBlockCaptionPosition, ImageLightbox, InlineList, InputHelper, InputLabel, Lightbox, Link, LinkPreview, List, ListDivider, ListItem, ListSubheader, Message, Mosaic, Navigation, Notification, Placement, Popover, PopoverDialog, PostBlock, Progress, ProgressCircular, ProgressLinear, ProgressTracker, ProgressTrackerProvider, ProgressTrackerStep, ProgressTrackerStepPanel, ProgressVariant, RadioButton, RadioGroup, RawInputText, RawInputTextarea, Select, SelectMultiple, SelectMultipleField, SelectVariant, SideNavigation, SideNavigationItem, SkeletonCircle, SkeletonRectangle, SkeletonRectangleVariant, SkeletonTypography, Slider, Slides, Slideshow, SlideshowControls, SlideshowItem, Switch, Tab, TabList, TabListLayout, TabPanel, TabProvider, Table, TableBody, TableCell, TableCellVariant, TableHeader, TableRow, Text, TextField, ThOrder, ThemeProvider, Thumbnail, ThumbnailAspectRatio, ThumbnailObjectFit, ThumbnailVariant, Toolbar, Tooltip, Uploader, UploaderVariant, UserBlock, clamp, isClickable, useFocusPointStyle, useHeadingLevel, useTheme };
-export type { AlertDialogProps, AutocompleteMultipleProps, AutocompleteProps, AvatarProps, AvatarSize, BadgeProps, BadgeWrapperProps, BaseButtonProps, ButtonGroupProps, ButtonProps, ButtonSize, CheckboxProps, ChipGroupProps, ChipProps, CommentBlockProps, DatePickerControlledProps, DatePickerFieldProps, DatePickerProps, DialogProps, DialogSizes, DividerProps, DragHandleProps, DropdownProps, Elevation, ExpansionPanelProps, FlagProps, FlexBoxProps, FlexHorizontalAlignment, FlexVerticalAlignment, FocusPoint, GapSize, GenericBlockProps, GridColumnGapSize, GridColumnProps, GridItemProps, GridProps, HeadingLevelProviderProps, HeadingProps, IconButtonProps, ImageBlockProps, ImageBlockSize, ImageLightboxProps, InlineListProps, InputHelperProps, InputLabelProps, LightboxProps, LinkPreviewProps, LinkProps, ListDividerProps, ListItemProps, ListItemSize, ListProps, ListSubheaderProps, MarginAutoAlignment, MessageProps, MosaicProps, NavigationProps, NotificationProps, Offset, PopoverDialogProps, PopoverProps, PostBlockProps, ProgressCircularProps, ProgressCircularSize, ProgressLinearProps, ProgressProps, ProgressTrackerProps, ProgressTrackerProviderProps, ProgressTrackerStepPanelProps, ProgressTrackerStepProps, RadioButtonProps, RadioGroupProps, RawInputTextProps, RawInputTextareaProps, SelectMultipleProps, SelectProps, SideNavigationItemProps, SideNavigationProps, SkeletonCircleProps, SkeletonRectangleProps, SkeletonTypographyProps, SliderProps, SlidesProps, SlideshowControlsProps, SlideshowItemProps, SlideshowProps, SwitchProps, TabListProps, TabPanelProps, TabProps, TabProviderProps, TableBodyProps, TableCellProps, TableHeaderProps, TableProps, TableRowProps, TextFieldProps, TextProps, ThumbnailProps, ThumbnailSize, ToolbarProps, TooltipPlacement, TooltipProps, UploaderProps, UploaderSize, UserBlockProps, UserBlockSize };
+export type { AlertDialogProps, AutocompleteMultipleProps, AutocompleteProps, AvatarProps, AvatarSize, BadgeProps, BadgeWrapperProps, BaseButtonProps, ButtonGroupProps, ButtonProps, ButtonSize, CheckboxProps, ChipGroupProps, ChipProps, CommentBlockProps, DatePickerControlledProps, DatePickerFieldProps, DatePickerProps, DialogProps, DialogSizes, DividerProps, DragHandleProps, DropdownProps, Elevation, ExpansionPanelProps, FlagProps, FlexBoxProps, FlexHorizontalAlignment, FlexVerticalAlignment, FocusPoint, GapSize, GenericBlockProps, GridColumnGapSize, GridColumnProps, GridItemProps, GridProps, HeadingLevelProviderProps, HeadingProps, IconButtonProps, IconProps, IconSizes, ImageBlockProps, ImageBlockSize, ImageLightboxProps, InlineListProps, InputHelperProps, InputLabelProps, LightboxProps, LinkPreviewProps, LinkProps, ListDividerProps, ListItemProps, ListItemSize, ListProps, ListSubheaderProps, MarginAutoAlignment, MessageProps, MosaicProps, NavigationProps, NotificationProps, Offset, PopoverDialogProps, PopoverProps, PostBlockProps, ProgressCircularProps, ProgressCircularSize, ProgressLinearProps, ProgressProps, ProgressTrackerProps, ProgressTrackerProviderProps, ProgressTrackerStepPanelProps, ProgressTrackerStepProps, RadioButtonProps, RadioGroupProps, RawInputTextProps, RawInputTextareaProps, SelectMultipleProps, SelectProps, SideNavigationItemProps, SideNavigationProps, SkeletonCircleProps, SkeletonRectangleProps, SkeletonTypographyProps, SliderProps, SlidesProps, SlideshowControlsProps, SlideshowItemProps, SlideshowProps, SwitchProps, TabListProps, TabPanelProps, TabProps, TabProviderProps, TableBodyProps, TableCellProps, TableHeaderProps, TableProps, TableRowProps, TextFieldProps, TextProps, ThumbnailProps, ThumbnailSize, ToolbarProps, TooltipPlacement, TooltipProps, UploaderProps, UploaderSize, UserBlockProps, UserBlockSize };