@lumx/react 4.11.0 → 4.12.0-next.0

package/index.d.ts

@@ -4,7 +4,7 @@ import * as _lumx_core_js_types from '@lumx/core/js/types';
 import { ValueOf as ValueOf$1, GenericProps as GenericProps$1, HasTheme as HasTheme$1, PropsToOverride, HasAriaDisabled as HasAriaDisabled$1, HasRequiredLinkHref as HasRequiredLinkHref$1, HasClassName as HasClassName$1, HasCloseMode as HasCloseMode$1, JSXElement as JSXElement$1, CommonRef as CommonRef$1, Falsy, HeadingElement as HeadingElement$1, HasAriaLabelOrLabelledBy as HasAriaLabelOrLabelledBy$1 } from '@lumx/core/js/types';
 export * from '@lumx/core/js/types';
 import * as React$1 from 'react';
-import React__default, { Ref, ReactElement, ReactNode, SyntheticEvent, MouseEventHandler, KeyboardEventHandler, RefObject, SetStateAction, Key, CSSProperties, ElementType as ElementType$1, HTMLInputTypeAttribute, ComponentProps, ImgHTMLAttributes, AriaAttributes as AriaAttributes$1 } from 'react';
+import React__default, { Ref, ReactElement, ReactNode, SyntheticEvent, MouseEventHandler, KeyboardEventHandler, RefObject, SetStateAction, Key, CSSProperties, ElementType as ElementType$1, HTMLInputTypeAttribute, ComponentProps, ImgHTMLAttributes } from 'react';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 
 /** LumX Component Type. */
@@ -2331,7 +2331,6 @@ interface DialogProps extends GenericProps$1, HasCloseMode$1, BaseDialogProps {
     /** Children */
     children?: React__default.ReactNode;
 }
-
 /**
  * Dialog component.
  *
@@ -3280,22 +3279,25 @@ interface InputLabelProps extends ReactToJSX<InputLabelProps$1>, GenericProps$1
  */
 declare const InputLabel: Comp<InputLabelProps, HTMLLabelElement>;
 
+interface BaseLightboxProps extends HasClassName, HasTheme, Pick<AriaAttributes, 'aria-label' | 'aria-labelledby'> {
+    /** Whether the component is open or not. */
+    isOpen?: boolean;
+    /** Whether to keep the dialog open on clickaway or escape press. */
+    preventAutoClose?: boolean;
+    /** Z-axis position. */
+    zIndex?: number;
+}
+
 /**
  * Defines the props of the component.
  */
-interface LightboxProps extends GenericProps$1, HasTheme$1, Pick<AriaAttributes$1, 'aria-label' | 'aria-labelledby'> {
+interface LightboxProps extends GenericProps$1, ReactToJSX<BaseLightboxProps> {
     /** 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. */
-    zIndex?: number;
     /** On close callback. */
     onClose?(): void;
     /** Children */

package/index.js

@@ -13966,7 +13966,7 @@ const CLASSNAME$G = 'lumx-lightbox';
 const {
   block: block$z,
   element: element$r
-} = classNames.bem(CLASSNAME$G);
+} = bem(CLASSNAME$G);
 
 /**
  * Lightbox component.
@@ -13975,12 +13975,97 @@ const {
  * @param  ref   Component ref.
  * @return React element.
  */
-const Lightbox = forwardRef((props, ref) => {
+const Lightbox$1 = props => {
   const {
     'aria-labelledby': propAriaLabelledBy,
     ariaLabelledBy = propAriaLabelledBy,
     'aria-label': propAriaLabel,
     ariaLabel = propAriaLabel,
+    children,
+    className,
+    closeButtonProps,
+    isOpen,
+    handleClose,
+    parentElement,
+    focusElement,
+    preventAutoClose,
+    theme,
+    zIndex,
+    isVisible,
+    ref,
+    Portal,
+    HeadingLevelProvider,
+    ThemeProvider,
+    ClickAwayProvider,
+    childrenRef,
+    clickAwayRefs,
+    closeButtonRef,
+    IconButton,
+    ...forwardedProps
+  } = props;
+  if (!isOpen && !isVisible) return null;
+  return /*#__PURE__*/jsx(Portal, {
+    children: /*#__PURE__*/jsxs("div", {
+      ref: ref,
+      ...forwardedProps,
+      "aria-label": ariaLabel,
+      "aria-labelledby": ariaLabelledBy,
+      "aria-modal": "true",
+      role: "dialog",
+      tabIndex: -1,
+      className: classnames(className, block$z({
+        'is-hidden': !isOpen,
+        'is-shown': isOpen || isVisible,
+        [`theme-${theme}`]: Boolean(theme)
+      })),
+      style: {
+        zIndex
+      },
+      children: [closeButtonProps && /*#__PURE__*/jsx("div", {
+        className: element$r('close'),
+        children: /*#__PURE__*/jsx(IconButton, {
+          ...closeButtonProps,
+          ref: closeButtonRef,
+          emphasis: "low",
+          hasBackground: true,
+          icon: mdiClose,
+          theme: "dark",
+          type: "button",
+          onClick: handleClose
+        })
+      }), /*#__PURE__*/jsx(HeadingLevelProvider, {
+        level: 2,
+        children: /*#__PURE__*/jsx(ThemeProvider, {
+          value: undefined,
+          children: /*#__PURE__*/jsx(ClickAwayProvider, {
+            callback: !preventAutoClose && handleClose,
+            childrenRefs: clickAwayRefs,
+            children: /*#__PURE__*/jsx("div", {
+              ref: childrenRef,
+              className: element$r('wrapper'),
+              role: "presentation",
+              children: children
+            })
+          })
+        })
+      })]
+    })
+  });
+};
+
+/**
+ * Defines the props of the component.
+ */
+
+/**
+ * Lightbox component.
+ *
+ * @param  props Component props.
+ * @param  ref   Component ref.
+ * @return React element.
+ */
+const Lightbox = forwardRef((props, ref) => {
+  const {
     children,
     className,
     closeButtonProps,
@@ -14041,52 +14126,28 @@ const Lightbox = forwardRef((props, ref) => {
   // eslint-disable-next-line react-hooks/rules-of-hooks
   const clickAwayRefs = useRef([wrapperRef]);
   if (!isOpen && !isVisible) return null;
-  return /*#__PURE__*/jsx(Portal, {
-    children: /*#__PURE__*/jsxs("div", {
-      ref: mergeRefs(ref, wrapperRef),
-      ...forwardedProps,
-      "aria-label": ariaLabel,
-      "aria-labelledby": ariaLabelledBy,
-      "aria-modal": "true",
-      role: "dialog",
-      tabIndex: -1,
-      className: classNames.join(className, block$z({
-        'is-hidden': !isOpen,
-        'is-shown': isOpen || isVisible,
-        [`theme-${theme}`]: Boolean(theme)
-      })),
-      style: {
-        zIndex
-      },
-      children: [closeButtonProps && /*#__PURE__*/jsx("div", {
-        className: element$r('close'),
-        children: /*#__PURE__*/jsx(IconButton, {
-          ...closeButtonProps,
-          ref: closeButtonRef,
-          emphasis: "low",
-          hasBackground: true,
-          icon: mdiClose,
-          theme: "dark",
-          type: "button",
-          onClick: onClose
-        })
-      }), /*#__PURE__*/jsx(HeadingLevelProvider, {
-        level: 2,
-        children: /*#__PURE__*/jsx(ThemeProvider, {
-          value: undefined,
-          children: /*#__PURE__*/jsx(ClickAwayProvider, {
-            callback: !preventAutoClose && onClose,
-            childrenRefs: clickAwayRefs,
-            children: /*#__PURE__*/jsx("div", {
-              ref: childrenRef,
-              className: element$r('wrapper'),
-              role: "presentation",
-              children: children
-            })
-          })
-        })
-      })]
-    })
+  return Lightbox$1({
+    ClickAwayProvider,
+    HeadingLevelProvider,
+    IconButton,
+    parentElement,
+    Portal,
+    ThemeProvider,
+    children,
+    childrenRef,
+    className,
+    clickAwayRefs,
+    closeButtonProps,
+    closeButtonRef,
+    focusElement,
+    isOpen,
+    isVisible,
+    ref: mergeRefs(ref, wrapperRef),
+    theme,
+    zIndex,
+    preventAutoClose,
+    handleClose: onClose,
+    ...forwardedProps
   });
 });
 Lightbox.displayName = COMPONENT_NAME$F;