@lumx/react 3.20.1-alpha.34 → 3.20.1-alpha.36

package/_internal/components/tabs/index-af1538d6.js

@@ -0,0 +1,298 @@
+import ReactDOM from 'react-dom';
+import React__default, { useReducer, useEffect, useCallback } from 'react';
+import { I as INIT_STATE, r as reducer, T as TabProviderContext, a as useTabProviderContext } from '../../825ac334.js';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import classNames from 'classnames';
+import '../../d0e3f49e.js';
+import { handleBasicClasses } from '@lumx/core/js/utils/className';
+import { m as mergeRefs } from '../../f0d7d6ea.js';
+import { f as forwardRef } from '../../8bce732e.js';
+import { u as useTheme } from '../../3181f000.js';
+import { u as useRovingTabIndex } from '../../7daf0f24.js';
+import { Alignment, Theme, CSS_PREFIX, Size } from '@lumx/core/js/constants';
+import { useDisableStateProps } from '../../utils/disabled/index-075b99c3.js';
+import { I as Icon } from '../../bace1bf1.js';
+import { T as Text } from '../../e913a3af.js';
+
+const DEFAULT_PROPS$3 = {
+  isLazy: INIT_STATE.isLazy,
+  shouldActivateOnFocus: INIT_STATE.shouldActivateOnFocus
+};
+
+/**
+ * This component provides a context in which tabs can be defined and linked to their tab panel.
+ *
+ * It does not produce any markup so you can wrap it around any React elements and then split the TabList and TabPanel
+ * components in the react tree.
+ *
+ * @param  props React component props.
+ * @return React element.
+ */
+const TabProvider = props => {
+  const {
+    children,
+    onChange,
+    ...propState
+  } = props;
+  const [state, dispatch] = useReducer(reducer, INIT_STATE);
+
+  // On prop state change => dispatch update.
+  useEffect(() => {
+    dispatch({
+      type: 'update',
+      payload: {
+        ...DEFAULT_PROPS$3,
+        ...propState
+      }
+    });
+  },
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  [dispatch, ...Object.values(propState)]);
+
+  // On active tab index state change => send update to the onChange.
+  useEffect(() => {
+    if (state === INIT_STATE || !onChange || propState.activeTabIndex === state.activeTabIndex) {
+      return;
+    }
+
+    // Escape rendering/useEffect context
+    queueMicrotask(() => {
+      // Wait for React to commit last state changes (avoid looping state update)
+      ReactDOM.flushSync(() => {
+        onChange(state.activeTabIndex);
+      });
+    });
+  },
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  [onChange, state.activeTabIndex]);
+  return /*#__PURE__*/jsx(TabProviderContext.Provider, {
+    value: [state, dispatch],
+    children: children
+  });
+};
+TabProvider.defaultProps = DEFAULT_PROPS$3;
+
+let TabListLayout = /*#__PURE__*/function (TabListLayout) {
+  TabListLayout["clustered"] = "clustered";
+  TabListLayout["fixed"] = "fixed";
+  return TabListLayout;
+}({});
+
+/**
+ * Defines the props of the component.
+ */
+
+/**
+ * Component display name.
+ */
+const COMPONENT_NAME$2 = 'TabList';
+
+/**
+ * Component default class name and class prefix.
+ */
+const CLASSNAME$2 = `${CSS_PREFIX}-tabs`;
+
+/**
+ * Component default props.
+ */
+const DEFAULT_PROPS$2 = {
+  layout: TabListLayout.fixed,
+  position: Alignment.left
+};
+
+/**
+ * TabList component.
+ *
+ * Implements WAI-ARIA `tablist` role {@see https://www.w3.org/TR/wai-aria-practices-1.1/examples/tabs/tabs-1/tabs.html#rps_label}
+ *
+ * @param  props Component props.
+ * @param  ref   Component ref.
+ * @return React element.
+ */
+const TabList = forwardRef((props, ref) => {
+  const defaultTheme = useTheme() || Theme.light;
+  const {
+    'aria-label': ariaLabel,
+    children,
+    className,
+    layout = DEFAULT_PROPS$2.layout,
+    position = DEFAULT_PROPS$2.position,
+    theme = defaultTheme,
+    ...forwardedProps
+  } = props;
+  const tabListRef = React__default.useRef(null);
+  useRovingTabIndex({
+    parentRef: tabListRef,
+    elementSelector: '[role="tab"]',
+    keepTabIndex: false,
+    extraDependencies: [children]
+  });
+  return /*#__PURE__*/jsx("div", {
+    ref: mergeRefs(ref, tabListRef),
+    ...forwardedProps,
+    className: classNames(className, handleBasicClasses({
+      prefix: CLASSNAME$2,
+      layout,
+      position,
+      theme
+    })),
+    children: /*#__PURE__*/jsx("div", {
+      className: `${CLASSNAME$2}__links`,
+      role: "tablist",
+      "aria-label": ariaLabel,
+      children: children
+    })
+  });
+});
+TabList.displayName = COMPONENT_NAME$2;
+TabList.className = CLASSNAME$2;
+TabList.defaultProps = DEFAULT_PROPS$2;
+
+/**
+ * Component display name.
+ */
+const COMPONENT_NAME$1 = 'Tab';
+
+/**
+ * Component default class name and class prefix.
+ */
+const CLASSNAME$1 = `${CSS_PREFIX}-tabs__link`;
+
+/**
+ * Component default props.
+ */
+const DEFAULT_PROPS$1 = {};
+
+/**
+ * Tab component.
+ *
+ * Implements WAI-ARIA `tab` role {@see https://www.w3.org/TR/wai-aria-practices-1.1/examples/tabs/tabs-1/tabs.html#rps_label}
+ *
+ * @param  props Component props.
+ * @param  ref   Component ref.
+ * @return React element.
+ */
+const Tab = forwardRef((props, ref) => {
+  const {
+    isAnyDisabled,
+    otherProps
+  } = useDisableStateProps(props);
+  const {
+    className,
+    icon,
+    iconProps = {},
+    id,
+    isActive: propIsActive,
+    label,
+    onFocus,
+    onKeyPress,
+    tabIndex = -1,
+    ...forwardedProps
+  } = otherProps;
+  const state = useTabProviderContext('tab', id);
+  const isActive = propIsActive || state?.isActive;
+  const changeToCurrentTab = useCallback(() => {
+    if (isAnyDisabled) {
+      return;
+    }
+    state?.changeToTab();
+  }, [isAnyDisabled, state]);
+  const handleFocus = useCallback(event => {
+    onFocus?.(event);
+    if (state?.shouldActivateOnFocus) {
+      changeToCurrentTab();
+    }
+  }, [changeToCurrentTab, onFocus, state?.shouldActivateOnFocus]);
+  const handleKeyPress = useCallback(event => {
+    onKeyPress?.(event);
+    if (event.key !== 'Enter' || isAnyDisabled) {
+      return;
+    }
+    changeToCurrentTab();
+  }, [changeToCurrentTab, isAnyDisabled, onKeyPress]);
+  return /*#__PURE__*/jsxs("button", {
+    ref: ref,
+    ...forwardedProps,
+    type: "button",
+    id: state?.tabId,
+    className: classNames(className, handleBasicClasses({
+      prefix: CLASSNAME$1,
+      isActive,
+      isDisabled: isAnyDisabled
+    })),
+    onClick: changeToCurrentTab,
+    onKeyPress: handleKeyPress,
+    onFocus: handleFocus,
+    role: "tab",
+    tabIndex: isActive ? 0 : tabIndex,
+    "aria-disabled": isAnyDisabled,
+    "aria-selected": isActive,
+    "aria-controls": state?.tabPanelId,
+    children: [icon && /*#__PURE__*/jsx(Icon, {
+      icon: icon,
+      size: Size.xs,
+      ...iconProps
+    }), label && /*#__PURE__*/jsx(Text, {
+      as: "span",
+      truncate: true,
+      children: label
+    })]
+  });
+});
+Tab.displayName = COMPONENT_NAME$1;
+Tab.className = CLASSNAME$1;
+Tab.defaultProps = DEFAULT_PROPS$1;
+
+/**
+ * Component display name.
+ */
+const COMPONENT_NAME = 'TabPanel';
+
+/**
+ * Component default class name and class prefix.
+ */
+const CLASSNAME = `${CSS_PREFIX}-tab-panel`;
+
+/**
+ * Component default props.
+ */
+const DEFAULT_PROPS = {};
+
+/**
+ * TabPanel component.
+ *
+ * Implements WAI-ARIA `tabpanel` role {@see https://www.w3.org/TR/wai-aria-practices-1.1/examples/tabs/tabs-1/tabs.html#rps_label}
+ *
+ * @param  props Component props.
+ * @param  ref   Component ref.
+ * @return React element.
+ */
+const TabPanel = forwardRef((props, ref) => {
+  const {
+    children,
+    id,
+    className,
+    isActive: propIsActive,
+    ...forwardedProps
+  } = props;
+  const state = useTabProviderContext('tabPanel', id);
+  const isActive = propIsActive || state?.isActive;
+  return /*#__PURE__*/jsx("div", {
+    ref: ref,
+    ...forwardedProps,
+    id: state?.tabPanelId,
+    className: classNames(className, handleBasicClasses({
+      prefix: CLASSNAME,
+      isActive
+    })),
+    role: "tabpanel",
+    tabIndex: isActive ? 0 : -1,
+    "aria-labelledby": state?.tabId,
+    children: (!state?.isLazy || isActive) && children
+  });
+});
+TabPanel.displayName = COMPONENT_NAME;
+TabPanel.className = CLASSNAME;
+TabPanel.defaultProps = DEFAULT_PROPS;
+
+export { Tab, TabList, TabListLayout, TabPanel, TabProvider };

package/_internal/components/text/index-5bfc6d5e.js

@@ -0,0 +1 @@
+export { T as Text } from '../../e913a3af.js';

package/_internal/{41a8b20f.js → components/text-field/index-47c98d09.js}

@@ -2,20 +2,19 @@ import { useRef, useState, useEffect } from 'react';
 import classNames from 'classnames';
 import get from 'lodash/get';
 import { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';
-import { mergeRefs } from './27df0cb6.js';
-import { useId } from './11687649.js';
-import { useTheme } from './d8ee966d.js';
-import { forwardRef } from './bd8b3ec8.js';
-import { useDisableStateProps } from './ef982c3d.js';
+import { m as mergeRefs } from '../../f0d7d6ea.js';
+import { u as useId } from '../../3a1facc0.js';
+import { u as useTheme } from '../../3181f000.js';
+import { f as forwardRef } from '../../8bce732e.js';
+import { useDisableStateProps } from '../../utils/disabled/index-075b99c3.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { Theme, Size, Emphasis, Kind } from '@lumx/core/js/constants';
-import { InputLabel } from './26a92990.js';
-import { Icon } from './595d0e66.js';
-import { mdiAlertCircle } from './893eb653.js';
-import { mdiCheckCircle } from './e47dacb8.js';
-import { IconButton } from './5a0207d9.js';
-import { mdiCloseCircle } from './6f37d603.js';
-import { InputHelper } from './3119c1fe.js';
+import { InputLabel } from '../input-label/index-0113f382.js';
+import { I as Icon, m as mdiAlertCircle } from '../../bace1bf1.js';
+import { m as mdiCheckCircle } from '../../de24f857.js';
+import { I as IconButton } from '../../b83e864b.js';
+import { m as mdiCloseCircle } from '../../ef5d1aac.js';
+import { InputHelper } from '../input-helper/index-5a837e7c.js';
 
 /**
  * Component display name.
@@ -359,4 +358,3 @@ TextField.className = CLASSNAME;
 TextField.defaultProps = DEFAULT_PROPS;
 
 export { TextField };
-//# sourceMappingURL=41a8b20f.js.map

package/_internal/{58418448.js → components/thumbnail/index-71545d95.js}

@@ -1,3 +1,4 @@
+export { T as Thumbnail, u as useFocusPointStyle } from '../../035c132d.js';
 import { AspectRatio } from '@lumx/core/js/constants';
 
 /**
@@ -38,4 +39,3 @@ const ThumbnailObjectFit = {
 };
 
 export { ThumbnailAspectRatio, ThumbnailObjectFit, ThumbnailVariant };
-//# sourceMappingURL=58418448.js.map

package/_internal/{a1974f13.js → components/toolbar/index-7041a5a6.js}

@@ -1,6 +1,6 @@
 import classNames from 'classnames';
 import { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';
-import { forwardRef } from './bd8b3ec8.js';
+import { f as forwardRef } from '../../8bce732e.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
 /**
@@ -59,4 +59,3 @@ Toolbar.className = CLASSNAME;
 Toolbar.defaultProps = DEFAULT_PROPS;
 
 export { Toolbar };
-//# sourceMappingURL=a1974f13.js.map

package/_internal/components/tooltip/index-8bb97e60.js

@@ -0,0 +1,327 @@
+import React__default, { useMemo, cloneElement, useState, useRef, useEffect } from 'react';
+import classNames from 'classnames';
+import { I as IS_BROWSER, D as DOCUMENT, V as VISUALLY_HIDDEN } from '../../d0e3f49e.js';
+import { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';
+import { m as mergeRefs, u as useMergeRefs } from '../../f0d7d6ea.js';
+import { T as TooltipContextProvider } from '../../9d1336a1.js';
+import { u as useId } from '../../3a1facc0.js';
+import { a as POPOVER_ZINDEX, P as Placement, u as usePopper } from '../../4f4c0582.js';
+import { f as forwardRef } from '../../8bce732e.js';
+import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
+import { u as useCallbackOnEscape } from '../../76ddefd4.js';
+import { TOOLTIP_LONG_PRESS_DELAY, TOOLTIP_HOVER_DELAY } from '@lumx/core/js/constants';
+import { Portal } from '../../utils/Portal/index-6e0a7404.js';
+
+/**
+ * Make sure tooltip appear above popovers.
+ */
+const TOOLTIP_ZINDEX = POPOVER_ZINDEX + 1;
+
+/**
+ * Add ref and ARIA attribute(s) in tooltip children or wrapped children.
+ * Button, IconButton, Icon and React HTML elements don't need to be wrapped but any other kind of children (array, fragment, custom components)
+ * will be wrapped in a <span>.
+ */
+const useInjectTooltipRef = options => {
+  const {
+    children,
+    setAnchorElement,
+    isMounted,
+    id,
+    label,
+    ariaLinkMode
+  } = options;
+  // Only add link when mounted
+  const linkId = isMounted ? id : undefined;
+  return useMemo(() => {
+    if (!label) return children;
+
+    // Non-disabled element
+    if (/*#__PURE__*/React__default.isValidElement(children) && children.props.disabled !== true && children.props.isDisabled !== true) {
+      const ref = mergeRefs(children.ref, setAnchorElement);
+      const props = {
+        ...children.props,
+        ref
+      };
+
+      // Do not add label/description if the tooltip label is already in aria-label
+      if (linkId && label !== props['aria-label']) {
+        if (props[ariaLinkMode]) props[ariaLinkMode] += ' ';else props[ariaLinkMode] = '';
+        props[ariaLinkMode] += linkId;
+      }
+      return /*#__PURE__*/cloneElement(children, props);
+    }
+    const aria = linkId ? {
+      [ariaLinkMode]: linkId
+    } : undefined;
+    return /*#__PURE__*/jsx("div", {
+      className: "lumx-tooltip-anchor-wrapper",
+      ref: setAnchorElement,
+      ...aria,
+      children: children
+    });
+  }, [label, children, setAnchorElement, linkId, ariaLinkMode]);
+};
+
+/** Return true if the browser does not support pointer hover */
+const isHoverNotSupported = () => !!window.matchMedia?.('(hover: none)').matches;
+
+/** Check if the focus is visible on the given element */
+const isFocusVisible = element => {
+  try {
+    return element?.matches?.(':focus-visible, [data-focus-visible-added]');
+  } catch (_ignored) {
+    // Can fail on non browser env
+    return true;
+  }
+};
+
+/**
+ * Hook controlling tooltip visibility using mouse hover the anchor and delay.
+ *
+ * @param  delay         Delay in millisecond to display the tooltip.
+ * @param  anchorElement Tooltip anchor element.
+ * @return whether or not to show the tooltip.
+ */
+function useTooltipOpen(delay, anchorElement) {
+  const [isOpen, setIsOpen] = useState(false);
+  const onPopperMount = useRef(null);
+
+  // Global close on escape
+  const [closeCallback, setCloseCallback] = useState(undefined);
+  useCallbackOnEscape(isOpen ? closeCallback : undefined);
+  useEffect(() => {
+    if (!anchorElement) {
+      return undefined;
+    }
+    let timer;
+    let openStartTime;
+    let shouldOpen;
+
+    // Run timer to defer updating the isOpen state.
+    const deferUpdate = duration => {
+      if (timer) clearTimeout(timer);
+      const update = () => {
+        setIsOpen(!!shouldOpen);
+      };
+      // Skip timeout in fake browsers
+      if (!IS_BROWSER) update();else timer = setTimeout(update, duration);
+    };
+    const hoverNotSupported = isHoverNotSupported();
+    const hasTouch = 'ontouchstart' in window;
+
+    // Adapt open/close delay
+    const openDelay = delay || (hoverNotSupported ? TOOLTIP_LONG_PRESS_DELAY.open : TOOLTIP_HOVER_DELAY.open);
+    const closeDelay = hoverNotSupported ? TOOLTIP_LONG_PRESS_DELAY.close : TOOLTIP_HOVER_DELAY.close;
+
+    // Open (or/and cancel closing) of tooltip.
+    const open = () => {
+      if (shouldOpen && !timer) return;
+      shouldOpen = true;
+      openStartTime = Date.now();
+      deferUpdate(openDelay);
+    };
+
+    // Close or cancel opening of tooltip
+    const getClose = (overrideDelay = closeDelay) => {
+      if (!shouldOpen && !timer) return;
+      shouldOpen = false;
+      deferUpdate(overrideDelay);
+    };
+    const close = () => getClose(closeDelay);
+    const closeImmediately = () => getClose(0);
+    setCloseCallback(() => closeImmediately);
+
+    // Adapt event to browsers with or without `hover` support.
+    const events = [];
+    if (hoverNotSupported) {
+      /**
+       * Handle touchend event
+       * If end comes before the open delay => cancel tooltip (close immediate).
+       * Else if end comes after the open delay => tooltip takes priority, the anchor's default touch end event is prevented.
+       */
+      const longPressEnd = evt => {
+        if (!openStartTime) return;
+        if (Date.now() - openStartTime >= openDelay) {
+          // Tooltip take priority, event prevented.
+          evt.stopPropagation();
+          evt.preventDefault();
+          anchorElement.focus();
+          // Close with delay.
+          close();
+        } else {
+          // Close immediately.
+          closeImmediately();
+        }
+      };
+      events.push([anchorElement, hasTouch ? 'touchstart' : 'mousedown', open], [anchorElement, hasTouch ? 'touchend' : 'mouseup', longPressEnd]);
+    } else {
+      events.push([anchorElement, 'mouseenter', open], [anchorElement, 'mouseleave', close], [anchorElement, 'mouseup', closeImmediately]);
+      onPopperMount.current = popperElement => {
+        if (!popperElement) return;
+        // Popper element hover
+        popperElement.addEventListener('mouseenter', open);
+        popperElement.addEventListener('mouseleave', close);
+        // Add to event list to remove on unmount
+        events.push([popperElement, 'mouseenter', open], [popperElement, 'mouseleave', close]);
+      };
+    }
+
+    // Events always applied no matter the browser:.
+    events.push(
+    // Open on focus (only if focus is visible).
+    [anchorElement, 'focusin', e => {
+      // Skip if focus is not visible
+      if (!isFocusVisible(e.target)) return;
+      open();
+    }],
+    // Close on lost focus.
+    [anchorElement, 'focusout', closeImmediately]);
+
+    // Attach events
+    for (const [node, eventType, eventHandler] of events) {
+      node.addEventListener(eventType, eventHandler);
+    }
+    return () => {
+      // Clear pending timers.
+      if (timer) clearTimeout(timer);
+
+      // Detach events.
+      for (const [node, eventType, eventHandler] of events) {
+        node.removeEventListener(eventType, eventHandler);
+      }
+    };
+  }, [anchorElement, delay]);
+  return {
+    isOpen,
+    onPopperMount: onPopperMount.current
+  };
+}
+
+/* eslint-disable react-hooks/rules-of-hooks */
+/**
+ * Component display name.
+ */
+const COMPONENT_NAME = 'Tooltip';
+
+/**
+ * Component default class name and class prefix.
+ */
+const CLASSNAME = getRootClassName(COMPONENT_NAME);
+
+/**
+ * Component default props.
+ */
+const DEFAULT_PROPS = {
+  placement: Placement.BOTTOM,
+  closeMode: 'unmount',
+  ariaLinkMode: 'aria-describedby',
+  zIndex: TOOLTIP_ZINDEX
+};
+
+/**
+ * Arrow size (in pixel).
+ */
+const ARROW_SIZE = 8;
+
+/**
+ * Tooltip component.
+ *
+ * @param  props Component props.
+ * @param  ref   Component ref.
+ * @return React element.
+ */
+const Tooltip = forwardRef((props, ref) => {
+  const {
+    label,
+    children,
+    className,
+    delay,
+    placement = DEFAULT_PROPS.placement,
+    forceOpen,
+    closeMode = DEFAULT_PROPS.closeMode,
+    ariaLinkMode = DEFAULT_PROPS.ariaLinkMode,
+    zIndex = DEFAULT_PROPS.zIndex,
+    ...forwardedProps
+  } = props;
+  // Disable in SSR.
+  if (!DOCUMENT) {
+    return /*#__PURE__*/jsx(Fragment, {
+      children: children
+    });
+  }
+  const id = useId();
+  const [popperElement, setPopperElement] = useState(null);
+  const [anchorElement, setAnchorElement] = useState(null);
+  const {
+    styles,
+    attributes,
+    update
+  } = usePopper(anchorElement, popperElement, {
+    placement,
+    modifiers: [{
+      name: 'offset',
+      options: {
+        offset: [0, ARROW_SIZE]
+      }
+    }]
+  });
+  const position = attributes?.popper?.['data-popper-placement'] ?? placement;
+  const {
+    isOpen: isActivated,
+    onPopperMount
+  } = useTooltipOpen(delay, anchorElement);
+  const isOpen = (isActivated || forceOpen) && !!label;
+  const isMounted = !!label && (isOpen || closeMode === 'hide');
+  const isHidden = !isOpen && closeMode === 'hide';
+  const wrappedChildren = useInjectTooltipRef({
+    children,
+    setAnchorElement,
+    isMounted,
+    id,
+    label,
+    ariaLinkMode: ariaLinkMode
+  });
+
+  // Update on open
+  React__default.useEffect(() => {
+    if (isOpen || popperElement) update?.();
+  }, [isOpen, update, popperElement]);
+  const labelLines = label ? label.split('\n') : [];
+  const tooltipRef = useMergeRefs(ref, setPopperElement, onPopperMount);
+  return /*#__PURE__*/jsxs(Fragment, {
+    children: [/*#__PURE__*/jsx(TooltipContextProvider, {
+      children: wrappedChildren
+    }), isMounted && /*#__PURE__*/jsx(Portal, {
+      children: /*#__PURE__*/jsxs("div", {
+        ref: tooltipRef,
+        ...forwardedProps,
+        id: id,
+        role: "tooltip",
+        className: classNames(className, handleBasicClasses({
+          prefix: CLASSNAME,
+          position,
+          isInitializing: !styles.popper?.transform
+        }), isHidden && VISUALLY_HIDDEN),
+        style: {
+          ...(isHidden ? undefined : styles.popper),
+          zIndex
+        },
+        ...attributes.popper,
+        children: [/*#__PURE__*/jsx("div", {
+          className: `${CLASSNAME}__arrow`
+        }), /*#__PURE__*/jsx("div", {
+          className: `${CLASSNAME}__inner`,
+          children: labelLines.map(line => /*#__PURE__*/jsx("p", {
+            children: line
+          }, line))
+        })]
+      })
+    })]
+  });
+});
+Tooltip.displayName = COMPONENT_NAME;
+Tooltip.className = CLASSNAME;
+Tooltip.defaultProps = DEFAULT_PROPS;
+
+export { Tooltip };