@lumx/react 3.6.1-alpha-chore-dependency-updates.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

@@ -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,