@lumx/react 3.6.0 → 3.6.1-alpha.0

package/index.d.ts

@@ -1422,13 +1422,15 @@ declare const InputLabel: Comp<InputLabelProps, HTMLLabelElement>;
 /**
  * Defines the props of the component.
  */
-interface LightboxProps extends GenericProps, HasTheme {
+interface LightboxProps extends GenericProps, HasTheme, Pick<AriaAttributes, 'aria-label' | 'aria-labelledby'> {
     /** Props to pass to the close button (minus those already set by the Lightbox props). */
     closeButtonProps?: Pick<IconButtonProps, 'label'> & Omit<IconButtonProps, 'label' | 'onClick' | 'icon' | 'emphasis' | 'color'>;
     /** Whether the component is open or not. */
     isOpen?: boolean;
     /** Reference to the element that triggered modal opening to set focus on. */
     parentElement: RefObject<any>;
+    /** Reference to the element that should get the focus when the lightbox opens. By default, the close button or the lightbox itself will take focus. */
+    focusElement?: RefObject<HTMLElement>;
     /** Whether to keep the dialog open on clickaway or escape press. */
     preventAutoClose?: boolean;
     /** Z-axis position. */
@@ -1676,7 +1678,21 @@ declare type NavigationProps = React.ComponentProps<'nav'> & HasClassName & HasT
     children?: ReactNode;
     orientation?: Orientation;
 } & HasAriaLabelOrLabelledBy;
-declare const Navigation: React.ForwardRefExoticComponent<Pick<NavigationProps, "orientation" | "key" | keyof React.HTMLAttributes<HTMLElement> | "theme"> & React.RefAttributes<HTMLElement>> & {
+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: {

package/index.js

@@ -25,26 +25,40 @@ import chunk from 'lodash/chunk';
 import isUndefined from 'lodash/isUndefined';
 import set from 'lodash/set';
 
-function ownKeys(object, enumerableOnly) {
-  var keys = Object.keys(object);
+function ownKeys(e, r) {
+  var t = Object.keys(e);
   if (Object.getOwnPropertySymbols) {
-    var symbols = Object.getOwnPropertySymbols(object);
-    enumerableOnly && (symbols = symbols.filter(function (sym) {
-      return Object.getOwnPropertyDescriptor(object, sym).enumerable;
-    })), keys.push.apply(keys, symbols);
+    var o = Object.getOwnPropertySymbols(e);
+    r && (o = o.filter(function (r) {
+      return Object.getOwnPropertyDescriptor(e, r).enumerable;
+    })), t.push.apply(t, o);
   }
-  return keys;
+  return t;
 }
-function _objectSpread2(target) {
-  for (var i = 1; i < arguments.length; i++) {
-    var source = null != arguments[i] ? arguments[i] : {};
-    i % 2 ? ownKeys(Object(source), !0).forEach(function (key) {
-      _defineProperty(target, key, source[key]);
-    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) {
-      Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+function _objectSpread2(e) {
+  for (var r = 1; r < arguments.length; r++) {
+    var t = null != arguments[r] ? arguments[r] : {};
+    r % 2 ? ownKeys(Object(t), !0).forEach(function (r) {
+      _defineProperty(e, r, t[r]);
+    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) {
+      Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r));
     });
   }
-  return target;
+  return e;
+}
+function _toPrimitive(t, r) {
+  if ("object" != typeof t || !t) return t;
+  var e = t[Symbol.toPrimitive];
+  if (void 0 !== e) {
+    var i = e.call(t, r || "default");
+    if ("object" != typeof i) return i;
+    throw new TypeError("@@toPrimitive must return a primitive value.");
+  }
+  return ("string" === r ? String : Number)(t);
+}
+function _toPropertyKey(t) {
+  var i = _toPrimitive(t, "string");
+  return "symbol" == typeof i ? i : String(i);
 }
 function _defineProperty(obj, key, value) {
   key = _toPropertyKey(key);
@@ -101,20 +115,6 @@ function _objectWithoutProperties(source, excluded) {
   }
   return target;
 }
-function _toPrimitive(input, hint) {
-  if (typeof input !== "object" || input === null) return input;
-  var prim = input[Symbol.toPrimitive];
-  if (prim !== undefined) {
-    var res = prim.call(input, hint || "default");
-    if (typeof res !== "object") return res;
-    throw new TypeError("@@toPrimitive must return a primitive value.");
-  }
-  return (hint === "string" ? String : Number)(input);
-}
-function _toPropertyKey(arg) {
-  var key = _toPrimitive(arg, "string");
-  return typeof key === "symbol" ? key : String(key);
-}
 
 /**
  * Alignments.
@@ -378,7 +378,7 @@ const CSS_PREFIX = 'lumx';
  */
 const TOOLTIP_HOVER_DELAY = {
   open: 500,
-  close: 0
+  close: 500
 };
 
 /**
@@ -3477,7 +3477,7 @@ const ListItem = /*#__PURE__*/forwardRef((props, ref) => {
   }), isClickable({
     linkProps,
     onItemSelected
-  }) ? /* Clickable list item */
+  }) ? ( /* Clickable list item */
   renderLink(_objectSpread2(_objectSpread2({
     linkAs,
     tabIndex: !isDisabled && role === 'button' ? 0 : undefined,
@@ -3494,7 +3494,7 @@ const ListItem = /*#__PURE__*/forwardRef((props, ref) => {
     onClick: isDisabled ? undefined : onItemSelected,
     onKeyDown,
     ref: linkRef
-  }), content) :
+  }), content)) :
   /*#__PURE__*/
   /* Non clickable list item */
   React.createElement("div", {
@@ -7740,7 +7740,7 @@ InputLabel.displayName = COMPONENT_NAME$A;
 InputLabel.className = CLASSNAME$x;
 InputLabel.defaultProps = DEFAULT_PROPS$t;
 
-const _excluded$C = ["ariaLabel", "children", "className", "closeButtonProps", "isOpen", "onClose", "parentElement", "preventAutoClose", "theme", "zIndex"];
+const _excluded$C = ["aria-labelledby", "ariaLabelledBy", "aria-label", "ariaLabel", "children", "className", "closeButtonProps", "isOpen", "onClose", "parentElement", "focusElement", "preventAutoClose", "theme", "zIndex"];
 
 /**
  * Defines the props of the component.
@@ -7764,15 +7764,18 @@ const CLASSNAME$y = getRootClassName(COMPONENT_NAME$B);
  * @return React element.
  */
 const Lightbox = /*#__PURE__*/forwardRef((props, ref) => {
-  var _childrenRef$current;
   const {
-      ariaLabel,
+      'aria-labelledby': propAriaLabelledBy,
+      ariaLabelledBy = propAriaLabelledBy,
+      'aria-label': propAriaLabel,
+      ariaLabel = propAriaLabel,
       children,
       className,
       closeButtonProps,
       isOpen,
       onClose,
       parentElement,
+      focusElement,
       preventAutoClose,
       theme,
       zIndex
@@ -7787,6 +7790,8 @@ const Lightbox = /*#__PURE__*/forwardRef((props, ref) => {
   const childrenRef = useRef(null);
   // eslint-disable-next-line react-hooks/rules-of-hooks
   const wrapperRef = useRef(null);
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  const closeButtonRef = useRef(null);
 
   // eslint-disable-next-line react-hooks/rules-of-hooks
   useDisableBodyScroll(isOpen && wrapperRef.current);
@@ -7796,7 +7801,11 @@ const Lightbox = /*#__PURE__*/forwardRef((props, ref) => {
 
   // Handle focus trap.
   // eslint-disable-next-line react-hooks/rules-of-hooks
-  useFocusTrap(isOpen && wrapperRef.current, (_childrenRef$current = childrenRef.current) === null || _childrenRef$current === void 0 ? void 0 : _childrenRef$current.firstChild);
+  useFocusTrap(
+  // Focus trap zone
+  isOpen && wrapperRef.current,
+  // Focus element (fallback on close button and then on the dialog)
+  (focusElement === null || focusElement === void 0 ? void 0 : focusElement.current) || closeButtonRef.current || wrapperRef.current);
 
   // eslint-disable-next-line react-hooks/rules-of-hooks
   const previousOpen = useRef(isOpen);
@@ -7827,7 +7836,10 @@ const Lightbox = /*#__PURE__*/forwardRef((props, ref) => {
     ref: mergeRefs(ref, wrapperRef)
   }, forwardedProps, {
     "aria-label": ariaLabel,
+    "aria-labelledby": ariaLabelledBy,
     "aria-modal": "true",
+    role: "dialog",
+    tabIndex: -1,
     className: classnames(className, handleBasicClasses({
       prefix: CLASSNAME$y,
       isHidden: !isOpen,
@@ -7838,6 +7850,7 @@ const Lightbox = /*#__PURE__*/forwardRef((props, ref) => {
       zIndex
     }
   }), closeButtonProps && /*#__PURE__*/React.createElement(IconButton, _extends({}, closeButtonProps, {
+    ref: closeButtonRef,
     className: `${CLASSNAME$y}__close`,
     color: ColorPalette.light,
     emphasis: Emphasis.low,
@@ -11873,15 +11886,16 @@ const TabProvider = props => {
 TabProvider.defaultProps = DEFAULT_PROPS$W;
 
 const _excluded$1i = ["aria-label", "children", "className", "layout", "position", "theme"];
-let TabListLayout;
+let TabListLayout = /*#__PURE__*/function (TabListLayout) {
+  TabListLayout["clustered"] = "clustered";
+  TabListLayout["fixed"] = "fixed";
+  return TabListLayout;
+}({});
 
 /**
  * Defines the props of the component.
  */
-(function (TabListLayout) {
-  TabListLayout["clustered"] = "clustered";
-  TabListLayout["fixed"] = "fixed";
-})(TabListLayout || (TabListLayout = {}));
+
 /**
  * Component display name.
  */
@@ -12828,6 +12842,11 @@ const browserDoesNotSupportHover = () => {
  */
 function useTooltipOpen(delay, anchorElement) {
   const [isOpen, setIsOpen] = useState(false);
+  const onPopperMount = useRef(null);
+
+  // Global close on escape
+  const [closeCallback, setCloseCallback] = useState(undefined);
+  useCallbackOnEscape(closeCallback);
   useEffect(() => {
     if (!anchorElement) {
       return undefined;
@@ -12859,45 +12878,57 @@ function useTooltipOpen(delay, anchorElement) {
     };
 
     // Close or cancel opening of tooltip
-    const close = function () {
+    const getClose = function () {
       let overrideDelay = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : closeDelay;
       if (!shouldOpen && !timer) return;
       shouldOpen = false;
       deferUpdate(overrideDelay);
     };
-    const closeImmediately = () => close(0);
-
-    /**
-     * Handle touchend event
-     * If `touchend` comes before the open delay => cancel tooltip (close immediate).
-     * Else if `touchend` comes after the open delay => tooltip takes priority, the anchor's default touch end event is prevented.
-     */
-    const touchEnd = 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();
-      }
-    };
+    const close = () => getClose(closeDelay);
+    const closeImmediately = () => getClose(0);
+    setCloseCallback(() => closeImmediately);
 
     // Adapt event to browsers with or without `hover` support.
-    const events = hoverNotSupported ? [[anchorElement, hasTouch ? 'touchstart' : 'mousedown', open], [anchorElement, hasTouch ? 'touchend' : 'mouseup', touchEnd]] : [[anchorElement, 'mouseenter', open], [anchorElement, 'mouseleave', close], [anchorElement, 'mouseup', closeImmediately]];
+    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.
     [anchorElement, 'focusin', open],
     // Close on lost focus.
-    [anchorElement, 'focusout', closeImmediately],
-    // Close on ESC keydown
-    [anchorElement, 'keydown', onEscapePressed(closeImmediately)]);
+    [anchorElement, 'focusout', closeImmediately]);
 
     // Attach events
     for (const [node, eventType, eventHandler] of events) {
@@ -12913,7 +12944,10 @@ function useTooltipOpen(delay, anchorElement) {
       }
     };
   }, [anchorElement, delay]);
-  return isOpen;
+  return {
+    isOpen,
+    onPopperMount: onPopperMount.current
+  };
 }
 
 const _excluded$1o = ["label", "children", "className", "delay", "placement", "forceOpen"];
@@ -12984,10 +13018,14 @@ const Tooltip = /*#__PURE__*/forwardRef((props, ref) => {
     }]
   });
   const position = (_attributes$popper$da = attributes === null || attributes === void 0 ? void 0 : (_attributes$popper = attributes.popper) === null || _attributes$popper === void 0 ? void 0 : _attributes$popper['data-popper-placement']) !== null && _attributes$popper$da !== void 0 ? _attributes$popper$da : placement;
-  const isOpen = useTooltipOpen(delay, anchorElement) || forceOpen;
+  const {
+    isOpen: isActivated,
+    onPopperMount
+  } = useTooltipOpen(delay, anchorElement);
+  const isOpen = isActivated || forceOpen;
   const wrappedChildren = useInjectTooltipRef(children, setAnchorElement, isOpen, id);
   return /*#__PURE__*/React.createElement(React.Fragment, null, wrappedChildren, isOpen && /*#__PURE__*/createPortal( /*#__PURE__*/React.createElement("div", _extends({
-    ref: mergeRefs(ref, setPopperElement)
+    ref: mergeRefs(ref, setPopperElement, onPopperMount)
   }, forwardedProps, {
     id: id,
     role: "tooltip",