@lumx/react 4.9.0-next.10 → 4.9.0-next.11

package/index.d.ts

@@ -2458,7 +2458,7 @@ declare const Dropdown: Comp<DropdownProps, HTMLDivElement>;
 /**
  * Defines the props of the component.
  */
-interface ExpansionPanelProps extends GenericProps$1, HasCloseMode$1, HasTheme$1 {
+interface ExpansionPanelProps$1 extends HasClassName, HasCloseMode, HasTheme {
     /** Whether the expansion panel has a background. */
     hasBackground?: boolean;
     /** Whether the header has a divider. */
@@ -2467,6 +2467,41 @@ interface ExpansionPanelProps extends GenericProps$1, HasCloseMode$1, HasTheme$1
     isOpen?: boolean;
     /** Label text (overwritten if a `<header>` is provided in the children). */
     label?: string;
+    /** On open callback. */
+    handleOpen?: (event: any) => void;
+    /** On close callback. */
+    handleClose?: (event: any) => void;
+    /** Props to pass to the toggle button (minus those already set by the ExpansionPanel props). */
+    toggleButtonProps: any;
+    /** On toggle open or close callback. */
+    handleToggleOpen?(shouldOpen: boolean, event: any): void;
+    /** Children */
+    children?: JSXElement;
+    /** Ref forwarded to the root `<section>` element. */
+    ref?: CommonRef;
+    /** Ref forwarded to the collapsible wrapper `<div>`. */
+    wrapperRef?: CommonRef;
+    /** Props spread onto the header content `<div>` (e.g. `aria-*`, `data-*`). */
+    headerProps: GenericProps;
+    /** Content rendered inside the header content area. */
+    headerContent?: JSXElement;
+    /** Optional drag handle element rendered at the start of the header. */
+    dragHandle?: JSXElement;
+    /** Content rendered inside the collapsible content area. */
+    content?: JSXElement;
+    /** Optional footer element rendered below the content. */
+    footer?: JSXElement;
+    /** IconButton component injected by the framework wrapper (React or Vue). */
+    IconButton: any;
+    /** Whether the children should remain mounted (visible in the DOM) while the panel is closed. */
+    isChildrenVisible?: boolean;
+}
+type ExpansionPanelPropsToOverride = 'handleOpen' | 'handleClose' | 'toggleButtonProps' | 'handleToggleOpen' | 'wrapperRef' | 'headerProps' | 'headerContent' | 'dragHandle' | 'content' | 'IconButton' | 'isChildrenVisible' | 'footer';
+
+/**
+ * Defines the props of the component.
+ */
+interface ExpansionPanelProps extends GenericProps$1, ReactToJSX<ExpansionPanelProps$1, ExpansionPanelPropsToOverride> {
     /** On open callback. */
     onOpen?: (event: React__default.MouseEvent) => void;
     /** On close callback. */
@@ -2475,8 +2510,6 @@ interface ExpansionPanelProps extends GenericProps$1, HasCloseMode$1, HasTheme$1
     toggleButtonProps: Pick<IconButtonProps, 'label'> & Omit<IconButtonProps, 'label' | 'onClick' | 'icon' | 'emphasis' | 'color'>;
     /** On toggle open or close callback. */
     onToggleOpen?(shouldOpen: boolean, event: React__default.MouseEvent): void;
-    /** Children */
-    children?: React__default.ReactNode;
 }
 /**
  * ExpansionPanel component.

package/index.js

@@ -11647,7 +11647,7 @@ const CLASSNAME$P = 'lumx-expansion-panel';
 const {
   block: block$G,
   element: element$x
-} = classNames.bem(CLASSNAME$P);
+} = bem(CLASSNAME$P);
 
 /**
  * Component default props.
@@ -11655,9 +11655,6 @@ const {
 const DEFAULT_PROPS$L = {
   closeMode: 'unmount'
 };
-const isDragHandle = isComponent(DragHandle);
-const isHeader = isComponent('header');
-const isFooter = isComponent('footer');
 
 /**
  * ExpansionPanel component.
@@ -11666,48 +11663,45 @@ const isFooter = isComponent('footer');
  * @param  ref   Component ref.
  * @return React element.
  */
-const ExpansionPanel = forwardRef((props, ref) => {
-  const defaultTheme = useTheme() || Theme$1.light;
+const ExpansionPanel$1 = props => {
   const {
     className,
-    closeMode = DEFAULT_PROPS$L.closeMode,
     children: anyChildren,
     hasBackground,
+    ref,
     hasHeaderDivider,
     isOpen,
     label,
-    onClose,
-    onOpen,
-    onToggleOpen,
-    theme = defaultTheme,
+    handleClose,
+    handleOpen,
+    handleToggleOpen,
+    theme,
     toggleButtonProps,
+    headerProps,
+    headerContent,
+    dragHandle,
+    wrapperRef,
+    content,
+    isChildrenVisible,
+    IconButton,
+    footer,
+    closeMode,
     ...forwardedProps
   } = props;
-  const children = Children.toArray(anyChildren);
-
-  // Partition children by types.
-  const [[dragHandle], [header], [footer], content] = partitionMulti(children, [isDragHandle, isHeader, isFooter]);
-
-  // Either take the header in children or create one with the label.
-  const headerProps = /*#__PURE__*/React__default.isValidElement(header) ? header.props : {};
-  const headerContent = !isEmpty(headerProps.children) ? headerProps.children : /*#__PURE__*/jsx("span", {
-    className: element$x('label'),
-    children: label
-  });
   const toggleOpen = event => {
     const shouldOpen = !isOpen;
-    if (onOpen && shouldOpen) {
-      onOpen(event);
+    if (handleOpen && shouldOpen) {
+      handleOpen(event);
     }
-    if (onClose && !shouldOpen) {
-      onClose(event);
+    if (handleClose && !shouldOpen) {
+      handleClose(event);
     }
-    if (onToggleOpen) {
-      onToggleOpen(shouldOpen, event);
+    if (handleToggleOpen) {
+      handleToggleOpen(shouldOpen, event);
     }
   };
-  const color = theme === Theme$1.dark ? ColorPalette$1.light : ColorPalette$1.dark;
-  const rootClassName = classNames.join(className, block$G({
+  const color = theme === Theme.dark ? ColorPalette.light : ColorPalette.dark;
+  const rootClassName = classnames(className, block$G({
     'has-background': hasBackground,
     'has-header': Boolean(!isEmpty(headerProps.children)),
     'has-header-divider': hasHeaderDivider,
@@ -11716,35 +11710,6 @@ const ExpansionPanel = forwardRef((props, ref) => {
     'is-open': isOpen,
     [`theme-${theme}`]: Boolean(theme)
   }));
-  const wrapperRef = useRef(null);
-
-  // Children stay visible while the open/close transition is running
-  const [isChildrenVisible, setChildrenVisible] = React__default.useState(isOpen);
-  const isOpenRef = React__default.useRef(isOpen);
-  React__default.useEffect(() => {
-    if (isOpen || closeMode === 'hide') {
-      setChildrenVisible(true);
-    } else if (!IS_BROWSER$1) {
-      // Outside a browser we can't wait for the transition
-      setChildrenVisible(false);
-    }
-    isOpenRef.current = isOpen;
-  }, [closeMode, isOpen]);
-
-  // Change children's visibility on the transition end
-  React__default.useEffect(() => {
-    const {
-      current: wrapper
-    } = wrapperRef;
-    if (!IS_BROWSER$1 || !wrapper) {
-      return undefined;
-    }
-    const onTransitionEnd = () => {
-      setChildrenVisible(isOpenRef.current || closeMode === 'hide');
-    };
-    wrapper.addEventListener('transitionend', onTransitionEnd);
-    return () => wrapper.removeEventListener('transitionend', onTransitionEnd);
-  }, [closeMode]);
   return /*#__PURE__*/jsxs("section", {
     ref: ref,
     ...forwardedProps,
@@ -11764,7 +11729,7 @@ const ExpansionPanel = forwardRef((props, ref) => {
         children: /*#__PURE__*/jsx(IconButton, {
           ...toggleButtonProps,
           color: color,
-          emphasis: Emphasis$1.low,
+          emphasis: Emphasis.low,
           icon: isOpen ? mdiChevronUp : mdiChevronDown,
           "aria-expanded": isOpen || 'false'
         })
@@ -11784,6 +11749,92 @@ const ExpansionPanel = forwardRef((props, ref) => {
       })
     })]
   });
+};
+
+const isDragHandle = isComponent(DragHandle);
+const isHeader = isComponent('header');
+const isFooter = isComponent('footer');
+
+/**
+ * ExpansionPanel component.
+ *
+ * @param  props Component props.
+ * @param  ref   Component ref.
+ * @return React element.
+ */
+const ExpansionPanel = forwardRef((props, ref) => {
+  const defaultTheme = useTheme() || Theme$1.light;
+  const {
+    closeMode = DEFAULT_PROPS$L.closeMode,
+    children: anyChildren,
+    isOpen,
+    label,
+    onClose,
+    onOpen,
+    onToggleOpen,
+    theme = defaultTheme,
+    ...forwardedProps
+  } = props;
+  const children = Children.toArray(anyChildren);
+
+  // Partition children by types.
+  const [[dragHandle], [header], [footer], content] = partitionMulti(children, [isDragHandle, isHeader, isFooter]);
+
+  // Either take the header in children or create one with the label.
+  const headerProps = /*#__PURE__*/React__default.isValidElement(header) ? header.props : {};
+  const headerContent = !isEmpty(headerProps.children) ? headerProps.children : /*#__PURE__*/jsx("span", {
+    className: element$x('label'),
+    children: label
+  });
+  const wrapperRef = useRef(null);
+
+  // Children stay visible while the open/close transition is running
+  const [isChildrenVisible, setChildrenVisible] = React__default.useState(isOpen);
+  const isOpenRef = React__default.useRef(isOpen);
+  React__default.useEffect(() => {
+    if (isOpen || closeMode === 'hide') {
+      setChildrenVisible(true);
+    } else if (!IS_BROWSER$1) {
+      // Outside a browser we can't wait for the transition
+      setChildrenVisible(false);
+    }
+    isOpenRef.current = isOpen;
+  }, [closeMode, isOpen]);
+
+  // Change children's visibility on the transition end
+  React__default.useEffect(() => {
+    const {
+      current: wrapper
+    } = wrapperRef;
+    if (!IS_BROWSER$1 || !wrapper) {
+      return undefined;
+    }
+    const onTransitionEnd = () => {
+      setChildrenVisible(isOpenRef.current || closeMode === 'hide');
+    };
+    wrapper.addEventListener('transitionend', onTransitionEnd);
+    return () => wrapper.removeEventListener('transitionend', onTransitionEnd);
+  }, [closeMode]);
+  return ExpansionPanel$1({
+    content,
+    dragHandle,
+    footer,
+    headerContent,
+    ref,
+    headerProps,
+    wrapperRef,
+    IconButton,
+    isOpen,
+    handleClose: onClose,
+    handleToggleOpen: onToggleOpen,
+    handleOpen: onOpen,
+    theme,
+    isChildrenVisible,
+    children,
+    closeMode,
+    label,
+    ...forwardedProps
+  });
 });
 ExpansionPanel.displayName = COMPONENT_NAME$O;
 ExpansionPanel.className = CLASSNAME$P;