@itwin/itwinui-react 3.11.3 → 3.12.1

package/esm/core/Dialog/DialogTitleBar.js

@@ -1,7 +1,3 @@
-/*---------------------------------------------------------------------------------------------
- * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
- * See LICENSE.md in the project root for license terms and full copyright notice.
- *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
 import cx from 'classnames';
 import { SvgClose, mergeEventHandlers, Box } from '../../utils/index.js';
@@ -9,33 +5,52 @@ import { IconButton } from '../Buttons/IconButton.js';
 import { useDialogContext } from './DialogContext.js';
 import { DialogTitleBarTitle } from './DialogTitleBarTitle.js';
 import { useDialogDragContext } from './DialogDragContext.js';
-/**
- * Dialog title bar. Recommended to be used as a child of `Dialog`.
- * @example
- * <Dialog.TitleBar title='My dialog title' />
- * @example
- * <Dialog.TitleBar>
- *   <Dialog.TitleBar.Title>My dialog title</Dialog.TitleBar.Title>
- *   <IconButton
- *     size='small'
- *     styleType='borderless'
- *     onClick={onClose}
- *     aria-label='Close'
- *   >
- *     <SvgClose />
- *   </IconButton>
- * </Dialog.TitleBar>
- */
-export const DialogTitleBar = Object.assign(React.forwardRef((props, ref) => {
+export const DialogTitleBar = Object.assign(
+  React.forwardRef((props, ref) => {
     const dialogContext = useDialogContext();
-    const { children, titleText, isDismissible = dialogContext.isDismissible, onClose = dialogContext.onClose, isDraggable = dialogContext.isDraggable, className, onPointerDown: onPointerDownProp, ...rest } = props;
+    const {
+      children,
+      titleText,
+      isDismissible = dialogContext.isDismissible,
+      onClose = dialogContext.onClose,
+      isDraggable = dialogContext.isDraggable,
+      className,
+      onPointerDown: onPointerDownProp,
+      ...rest
+    } = props;
     const { onPointerDown } = useDialogDragContext();
-    return (React.createElement(Box, { className: cx('iui-dialog-title-bar', className, {
-            'iui-dialog-title-bar-filled': isDraggable,
-        }), ref: ref, onPointerDown: mergeEventHandlers(onPointerDownProp, onPointerDown), ...rest }, children ? (children) : (React.createElement(React.Fragment, null,
-        React.createElement(DialogTitleBarTitle, null, titleText),
-        isDismissible && (React.createElement(IconButton, { size: 'small', styleType: 'borderless', onClick: onClose, "aria-label": 'Close', "data-iui-shift": 'right' },
-            React.createElement(SvgClose, null)))))));
-}), {
+    return React.createElement(
+      Box,
+      {
+        className: cx('iui-dialog-title-bar', className, {
+          'iui-dialog-title-bar-filled': isDraggable,
+        }),
+        ref: ref,
+        onPointerDown: mergeEventHandlers(onPointerDownProp, onPointerDown),
+        ...rest,
+      },
+      children
+        ? children
+        : React.createElement(
+            React.Fragment,
+            null,
+            React.createElement(DialogTitleBarTitle, null, titleText),
+            isDismissible &&
+              React.createElement(
+                IconButton,
+                {
+                  size: 'small',
+                  styleType: 'borderless',
+                  onClick: onClose,
+                  'aria-label': 'Close',
+                  'data-iui-shift': 'right',
+                },
+                React.createElement(SvgClose, null),
+              ),
+          ),
+    );
+  }),
+  {
     Title: DialogTitleBarTitle,
-});
+  },
+);

package/esm/core/Dialog/DialogTitleBarTitle.js

@@ -1,11 +1,2 @@
-/*---------------------------------------------------------------------------------------------
- * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
- * See LICENSE.md in the project root for license terms and full copyright notice.
- *--------------------------------------------------------------------------------------------*/
 import { polymorphic } from '../../utils/index.js';
-/**
- * Dialog title bar. Recommended to be used as a child of `Dialog`.
- * @example
- * <Dialog.TitleBar>My dialog title</Dialog.TitleBar>
- */
 export const DialogTitleBarTitle = polymorphic.div('iui-dialog-title');

package/esm/core/Divider/Divider.js

@@ -1,14 +1,13 @@
-/*---------------------------------------------------------------------------------------------
- * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
- * See LICENSE.md in the project root for license terms and full copyright notice.
- *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
 import cx from 'classnames';
 import { Box } from '../../utils/components/Box.js';
-/**
- * Shows a divider
- */
 export const Divider = React.forwardRef((props, ref) => {
-    const { className, orientation = 'horizontal', ...rest } = props;
-    return (React.createElement(Box, { as: 'hr', className: cx('iui-divider', className), "aria-orientation": orientation === 'vertical' ? 'vertical' : undefined, ref: ref, ...rest }));
+  const { className, orientation = 'horizontal', ...rest } = props;
+  return React.createElement(Box, {
+    as: 'hr',
+    className: cx('iui-divider', className),
+    'aria-orientation': orientation === 'vertical' ? 'vertical' : undefined,
+    ref: ref,
+    ...rest,
+  });
 });

package/esm/core/DropdownMenu/DropdownMenu.d.ts

@@ -16,7 +16,7 @@ export type DropdownMenuProps = {
      * Child element to wrap dropdown with.
      */
     children: React.ReactNode;
-} & Pick<Parameters<typeof usePopover>[0], 'visible' | 'onVisibleChange' | 'placement' | 'matchWidth'> & React.ComponentPropsWithoutRef<'ul'> & Pick<PortalProps, 'portal'>;
+} & Pick<Parameters<typeof usePopover>[0], 'visible' | 'onVisibleChange' | 'placement' | 'matchWidth'> & Pick<PortalProps, 'portal'>;
 /**
  * Dropdown menu component.
  * Built on top of the {@link Popover} component.

package/esm/core/DropdownMenu/DropdownMenu.js

@@ -1,91 +1,67 @@
-/*---------------------------------------------------------------------------------------------
- * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
- * See LICENSE.md in the project root for license terms and full copyright notice.
- *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
-import { useMergedRefs, Portal, cloneElementWithRef, useControlledState, mergeRefs, mergeEventHandlers, } from '../../utils/index.js';
+import { mergeEventHandlers, useControlledState } from '../../utils/index.js';
 import { Menu } from '../Menu/Menu.js';
-import { usePopover } from '../Popover/Popover.js';
-import { FloatingNode, FloatingTree, useFloatingNodeId, } from '@floating-ui/react';
-import { MenuItemContext } from '../Menu/MenuItem.js';
-/**
- * Dropdown menu component.
- * Built on top of the {@link Popover} component.
- * @example
- * const menuItems = (close: () => void) => [
- *   <MenuItem key={1} onClick={onClick(1, close)}>
- *     Item #1
- *   </MenuItem>,
- *   <MenuItem key={2} onClick={onClick(2, close)}>
- *     Item #2
- *   </MenuItem>,
- *   <MenuItem key={3} onClick={onClick(3, close)}>
- *     Item #3
- *   </MenuItem>,
- * ];
- * <DropdownMenu menuItems={menuItems}>
- *   <Button>Menu</Button>
- * </DropdownMenu>
- */
+import { FloatingTree } from '@floating-ui/react';
 export const DropdownMenu = React.forwardRef((props, forwardedRef) => {
-    return (React.createElement(FloatingTree, null,
-        React.createElement(DropdownMenuContent, { ref: forwardedRef, ...props })));
+  return React.createElement(
+    FloatingTree,
+    null,
+    React.createElement(DropdownMenuContent, {
+      ref: forwardedRef,
+      ...props,
+    }),
+  );
 });
-// ----------------------------------------------------------------------------
 const DropdownMenuContent = React.forwardRef((props, forwardedRef) => {
-    const { menuItems, children, role = 'menu', visible: visibleProp, placement = 'bottom-start', matchWidth = false, onVisibleChange, portal = true, ...rest } = props;
-    const [visible, setVisible] = useControlledState(false, visibleProp, onVisibleChange);
-    const triggerRef = React.useRef(null);
-    const close = React.useCallback(() => {
-        setVisible(false);
-        triggerRef.current?.focus({ preventScroll: true });
-    }, [setVisible]);
-    const menuContent = React.useMemo(() => {
-        if (typeof menuItems === 'function') {
-            return menuItems(close);
-        }
-        return menuItems;
-    }, [menuItems, close]);
-    const [currentFocusedNodeIndex, setCurrentFocusedNodeIndex] = React.useState(null);
-    const focusableNodes = React.useRef([]);
-    const nodeId = useFloatingNodeId();
-    const popover = usePopover({
-        nodeId,
-        visible,
-        onVisibleChange: (open) => (open ? setVisible(true) : close()),
-        placement,
-        matchWidth,
-        interactions: {
-            listNavigation: {
-                activeIndex: currentFocusedNodeIndex,
-                onNavigate: setCurrentFocusedNodeIndex,
-                listRef: focusableNodes,
-                focusItemOnOpen: true,
-            },
+  const {
+    menuItems,
+    children,
+    role = 'menu',
+    visible: visibleProp,
+    placement = 'bottom-start',
+    matchWidth = false,
+    onVisibleChange,
+    portal = true,
+    ...rest
+  } = props;
+  const [visible, setVisible] = useControlledState(
+    false,
+    visibleProp,
+    onVisibleChange,
+  );
+  const menuContent = React.useMemo(() => {
+    if (typeof menuItems === 'function') {
+      return menuItems(() => setVisible(false));
+    }
+    return menuItems;
+  }, [menuItems, setVisible]);
+  return React.createElement(
+    React.Fragment,
+    null,
+    React.createElement(
+      Menu,
+      {
+        trigger: children,
+        onKeyDown: mergeEventHandlers(props.onKeyDown, (e) => {
+          if (e.defaultPrevented) {
+            return;
+          }
+          if (e.key === 'Tab') {
+            setVisible(false);
+          }
+        }),
+        role: role,
+        ref: forwardedRef,
+        portal: portal,
+        popoverProps: {
+          placement,
+          matchWidth,
+          visible,
+          onVisibleChange: setVisible,
         },
-    });
-    const popoverRef = useMergedRefs(forwardedRef, popover.refs.setFloating);
-    return (React.createElement(React.Fragment, null,
-        cloneElementWithRef(children, (children) => ({
-            ...popover.getReferenceProps(children.props),
-            'aria-expanded': popover.open,
-            ref: mergeRefs(triggerRef, popover.refs.setReference),
-        })),
-        React.createElement(FloatingNode, { id: nodeId }, popover.open && (React.createElement(Portal, { portal: portal },
-            React.createElement(MenuItemContext.Provider, { value: {
-                    setCurrentFocusedNodeIndex,
-                    focusableNodes,
-                } },
-                React.createElement(Menu, { setFocus: false, ...popover.getFloatingProps({
-                        role,
-                        ...rest,
-                        onKeyDown: mergeEventHandlers(props.onKeyDown, (e) => {
-                            if (e.defaultPrevented) {
-                                return;
-                            }
-                            if (e.key === 'Tab') {
-                                close();
-                            }
-                        }),
-                    }), ref: popoverRef }, menuContent)))))));
+        ...rest,
+      },
+      menuContent,
+    ),
+  );
 });

package/esm/core/ExpandableBlock/ExpandableBlock.d.ts

@@ -106,9 +106,9 @@ export declare const ExpandableBlock: PolymorphicForwardRefComponent<"div", Expa
     EndIcon: PolymorphicForwardRefComponent<"span", Omit<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
         ref?: ((instance: HTMLSpanElement | null) => void) | React.RefObject<HTMLSpanElement> | null | undefined;
     }, "fill" | "as" | "key" | "size" | keyof React.HTMLAttributes<HTMLSpanElement> | "padded"> & {
-        size?: "small" | "auto" | "medium" | "large" | import("../../utils/types.js").AnyString | undefined;
-        fill?: "default" | "positive" | "negative" | "warning" | import("../../utils/types.js").AnyString | "informational" | undefined;
-        padded?: boolean | undefined;
+        size?: "auto" | "small" | "medium" | "large" | import("../../utils/types.js").AnyString;
+        fill?: "default" | "positive" | "informational" | "negative" | "warning" | import("../../utils/types.js").AnyString;
+        padded?: boolean;
     } & Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
         as?: "span" | undefined;
     }, "ref">>;

package/esm/core/ExpandableBlock/ExpandableBlock.js

@@ -1,168 +1,208 @@
-/*---------------------------------------------------------------------------------------------
- * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
- * See LICENSE.md in the project root for license terms and full copyright notice.
- *--------------------------------------------------------------------------------------------*/
 import cx from 'classnames';
 import * as React from 'react';
-import { StatusIconMap, SvgChevronRight, Box, useSafeContext, polymorphic, mergeEventHandlers, ButtonBase, useId, } from '../../utils/index.js';
+import {
+  StatusIconMap,
+  SvgChevronRight,
+  Box,
+  useSafeContext,
+  polymorphic,
+  mergeEventHandlers,
+  ButtonBase,
+  useId,
+} from '../../utils/index.js';
 import { Icon } from '../Icon/Icon.js';
 import { LinkBox } from '../LinkAction/LinkAction.js';
 const ExpandableBlockContext = React.createContext(undefined);
 ExpandableBlockContext.displayName = 'ExpandableBlockContext';
 const ExpandableBlockComponent = React.forwardRef((props, forwardedRef) => {
-    const { children, title, caption, endIcon, ...rest } = props;
-    return (React.createElement(ExpandableBlock.Wrapper, { ...rest, ref: forwardedRef },
-        React.createElement(ExpandableBlock.Trigger, { label: title, caption: caption, endIcon: endIcon }),
-        React.createElement(ExpandableBlock.Content, null, children)));
+  const { children, title, caption, endIcon, ...rest } = props;
+  return React.createElement(
+    ExpandableBlock.Wrapper,
+    {
+      ...rest,
+      ref: forwardedRef,
+    },
+    React.createElement(ExpandableBlock.Trigger, {
+      label: title,
+      caption: caption,
+      endIcon: endIcon,
+    }),
+    React.createElement(ExpandableBlock.Content, null, children),
+  );
 });
 ExpandableBlockComponent.displayName = 'ExpandableBlock';
-// ----------------------------------------------------------------------------
 const ExpandableBlockWrapper = React.forwardRef((props, forwardedRef) => {
-    const { children, className, onToggle, style, isExpanded, status, size = 'default', styleType = 'default', disabled = false, ...rest } = props;
-    const [expandedState, setExpanded] = React.useState(isExpanded ?? false);
-    const expanded = isExpanded ?? expandedState;
-    const [descriptionId, setDescriptionId] = React.useState(undefined);
-    return (React.createElement(ExpandableBlockContext.Provider, { value: {
-            status,
-            isExpanded: expanded,
-            onToggle,
-            size,
-            styleType,
-            disabled,
-            setExpanded,
-            children,
-            descriptionId,
-            setDescriptionId,
-        } },
-        React.createElement(Box, { className: cx('iui-expandable-block', className), "data-iui-expanded": expanded, "data-iui-size": size, "data-iui-variant": styleType !== 'default' ? styleType : undefined, style: style, ref: forwardedRef, ...rest }, children)));
+  const {
+    children,
+    className,
+    onToggle,
+    style,
+    isExpanded,
+    status,
+    size = 'default',
+    styleType = 'default',
+    disabled = false,
+    ...rest
+  } = props;
+  const [expandedState, setExpanded] = React.useState(isExpanded ?? false);
+  const expanded = isExpanded ?? expandedState;
+  const [descriptionId, setDescriptionId] = React.useState(undefined);
+  return React.createElement(
+    ExpandableBlockContext.Provider,
+    {
+      value: {
+        status,
+        isExpanded: expanded,
+        onToggle,
+        size,
+        styleType,
+        disabled,
+        setExpanded,
+        children,
+        descriptionId,
+        setDescriptionId,
+      },
+    },
+    React.createElement(
+      Box,
+      {
+        className: cx('iui-expandable-block', className),
+        'data-iui-expanded': expanded,
+        'data-iui-size': size,
+        'data-iui-variant': styleType !== 'default' ? styleType : undefined,
+        style: style,
+        ref: forwardedRef,
+        ...rest,
+      },
+      children,
+    ),
+  );
 });
 ExpandableBlockWrapper.displayName = 'ExpandableBlock.Wrapper';
 const ExpandableBlockTrigger = React.forwardRef((props, forwardedRef) => {
-    const { className, children, label, caption, expandIcon, endIcon, ...rest } = props;
-    const { disabled, status } = useSafeContext(ExpandableBlockContext);
-    return (React.createElement(LinkBox, { className: cx('iui-expandable-header', className), "data-iui-disabled": disabled ? 'true' : undefined, ref: forwardedRef, ...rest }, children ?? (React.createElement(React.Fragment, null,
+  const { className, children, label, caption, expandIcon, endIcon, ...rest } =
+    props;
+  const { disabled, status } = useSafeContext(ExpandableBlockContext);
+  return React.createElement(
+    LinkBox,
+    {
+      className: cx('iui-expandable-header', className),
+      'data-iui-disabled': disabled ? 'true' : undefined,
+      ref: forwardedRef,
+      ...rest,
+    },
+    children ??
+      React.createElement(
+        React.Fragment,
+        null,
         expandIcon ?? React.createElement(ExpandableBlock.ExpandIcon, null),
-        React.createElement(ExpandableBlock.LabelArea, null,
-            React.createElement(ExpandableBlock.Title, null, label),
-            caption && (React.createElement(ExpandableBlock.Caption, null, caption))),
-        endIcon || status ? (React.createElement(ExpandableBlock.EndIcon, null, endIcon)) : null))));
+        React.createElement(
+          ExpandableBlock.LabelArea,
+          null,
+          React.createElement(ExpandableBlock.Title, null, label),
+          caption &&
+            React.createElement(ExpandableBlock.Caption, null, caption),
+        ),
+        endIcon || status
+          ? React.createElement(ExpandableBlock.EndIcon, null, endIcon)
+          : null,
+      ),
+  );
 });
 ExpandableBlockTrigger.displayName = 'ExpandableBlock.Trigger';
-// ----------------------------------------------------------------------------
-// ExpandableBlock.ExpandIcon component
 const ExpandableBlockExpandIcon = React.forwardRef((props, forwardedRef) => {
-    const { className, children, ...rest } = props;
-    return (React.createElement(Icon, { className: cx('iui-expandable-block-icon', className), ref: forwardedRef, ...rest }, children ?? React.createElement(SvgChevronRight, { "aria-hidden": true })));
+  const { className, children, ...rest } = props;
+  return React.createElement(
+    Icon,
+    {
+      className: cx('iui-expandable-block-icon', className),
+      ref: forwardedRef,
+      ...rest,
+    },
+    children ??
+      React.createElement(SvgChevronRight, {
+        'aria-hidden': true,
+      }),
+  );
 });
 ExpandableBlockExpandIcon.displayName = 'ExpandableBlock.ExpandIcon';
-// ----------------------------------------------------------------------------
-// ExpandableBlock.LabelArea component
 const ExpandableBlockLabelArea = polymorphic.span('iui-expandable-block-label');
 ExpandableBlockLabelArea.displayName = 'ExpandableBlock.LabelArea';
-// ----------------------------------------------------------------------------
-// ExpandableBlock.Title component
 const ExpandableBlockTitle = React.forwardRef((props, forwardedRef) => {
-    const { className, children, onClick: onClickProp, ...rest } = props;
-    const { isExpanded, setExpanded, disabled, onToggle, descriptionId } = useSafeContext(ExpandableBlockContext);
-    return (React.createElement(ButtonBase, { className: cx('iui-expandable-block-title', 'iui-link-action', className), "aria-expanded": isExpanded, "aria-disabled": disabled, onClick: mergeEventHandlers(onClickProp, () => {
-            if (disabled) {
-                return;
-            }
-            setExpanded(!isExpanded);
-            onToggle?.(!isExpanded);
-        }), ref: forwardedRef, "aria-describedby": descriptionId, ...rest }, children));
+  const { className, children, onClick: onClickProp, ...rest } = props;
+  const { isExpanded, setExpanded, disabled, onToggle, descriptionId } =
+    useSafeContext(ExpandableBlockContext);
+  return React.createElement(
+    ButtonBase,
+    {
+      className: cx('iui-expandable-block-title', 'iui-link-action', className),
+      'aria-expanded': isExpanded,
+      'aria-disabled': disabled,
+      onClick: mergeEventHandlers(onClickProp, () => {
+        if (disabled) {
+          return;
+        }
+        setExpanded(!isExpanded);
+        onToggle?.(!isExpanded);
+      }),
+      ref: forwardedRef,
+      'aria-describedby': descriptionId,
+      ...rest,
+    },
+    children,
+  );
 });
 ExpandableBlockTitle.displayName = 'ExpandableBlock.Title';
-// ----------------------------------------------------------------------------
-// ExpandableBlock.Caption component
 const ExpandableBlockCaption = React.forwardRef((props, forwardedRef) => {
-    const fallbackId = useId();
-    const { setDescriptionId } = useSafeContext(ExpandableBlockContext);
-    React.useEffect(() => {
-        setDescriptionId(props.id || fallbackId);
-        return () => setDescriptionId(undefined);
-    }, [props.id, fallbackId, setDescriptionId]);
-    return (React.createElement(Box, { ref: forwardedRef, id: fallbackId, ...props, className: cx('iui-expandable-block-caption', props?.className) }));
+  const fallbackId = useId();
+  const { setDescriptionId } = useSafeContext(ExpandableBlockContext);
+  React.useEffect(() => {
+    setDescriptionId(props.id || fallbackId);
+    return () => setDescriptionId(undefined);
+  }, [props.id, fallbackId, setDescriptionId]);
+  return React.createElement(Box, {
+    ref: forwardedRef,
+    id: fallbackId,
+    ...props,
+    className: cx('iui-expandable-block-caption', props?.className),
+  });
 });
 ExpandableBlockCaption.displayName = 'ExpandableBlock.Caption';
-// ----------------------------------------------------------------------------
-// ExpandableBlock.EndIcon component
 const ExpandableBlockEndIcon = React.forwardRef((props, forwardedRef) => {
-    const { children, ...rest } = props;
-    const { status } = useSafeContext(ExpandableBlockContext);
-    const icon = children ?? (status && StatusIconMap[status]());
-    return (React.createElement(Icon, { fill: status, ref: forwardedRef, ...rest }, icon));
+  const { children, ...rest } = props;
+  const { status } = useSafeContext(ExpandableBlockContext);
+  const icon = children ?? (status && StatusIconMap[status]());
+  return React.createElement(
+    Icon,
+    {
+      fill: status,
+      ref: forwardedRef,
+      ...rest,
+    },
+    icon,
+  );
 });
 ExpandableBlockEndIcon.displayName = 'ExpandableBlock.EndIcon';
 const ExpandableBlockContent = React.forwardRef((props, forwardedRef) => {
-    const { className, children, innerProps, ...rest } = props;
-    return (React.createElement(Box, { className: cx('iui-expandable-content', className), ref: forwardedRef, ...rest },
-        React.createElement(Box, { ...innerProps }, children)));
+  const { className, children, innerProps, ...rest } = props;
+  return React.createElement(
+    Box,
+    {
+      className: cx('iui-expandable-content', className),
+      ref: forwardedRef,
+      ...rest,
+    },
+    React.createElement(Box, innerProps, children),
+  );
 });
 ExpandableBlockContent.displayName = 'ExpandableBlock.Content';
-/**
- * Expandable block with customizable Title, Caption, Content and EndIcon subcomponents.
- * @example
- *  <ExpandableBlock.Wrapper>
- *    <ExpandableBlock.Trigger>
- *      <ExpandableBlock.ExpandIcon/>
- *      <ExpandableBlock.LabelArea>
- *        <ExpandableBlock.Title/>
- *        <ExpandableBlock.Caption/>
- *      </ExpandableBlock.LabelArea>
- *      <ExpandableBlock.EndIcon/>
- *    </ExpandableBlock.Trigger>
- *    <ExpandableBlock.Content/>
- *  </ExpandableBlock.Wrapper>
- */
 export const ExpandableBlock = Object.assign(ExpandableBlockComponent, {
-    Wrapper: ExpandableBlockWrapper,
-    /**
-     * `Header` container that contains `ExpandIcon`, `LabelArea` and `EndIcon` subcomponents
-     * @example
-     * <ExpandableBlock.Trigger>
-     *    <ExpandableBlock.ExpandIcon/>
-     *    <ExpandableBlock.LabelArea/>
-     *    <ExpandableBlock.EndIcon/>
-     * </ExpandableBlock.Trigger>
-     */
-    Trigger: ExpandableBlockTrigger,
-    /**
-     * The expanding icon on the left of header
-     */
-    ExpandIcon: ExpandableBlockExpandIcon,
-    /**
-     * `LabelArea` subcomponent that contains `Title` and `Caption`
-     * @example
-     * <ExpandableBlock.LabelArea>
-     *    <ExpandableBLock.Title> Title </ExpandableBlock.Title>
-     *    <ExpandableBlock.Caption> Caption </ExpandableBlock.Caption>
-     * </ExpandableBlock.LabelArea>
-     */
-    LabelArea: ExpandableBlockLabelArea,
-    /**
-     * The main text displayed on the block header, regardless of state.
-     */
-    Title: ExpandableBlockTitle,
-    /**
-     * Small note displayed below title, regardless of state.
-     */
-    Caption: ExpandableBlockCaption,
-    /**
-     * Svg icon displayed at the end of the main text.
-     * Will override status icon if specified. Used inside `Header` subcomponent.
-     * @example
-     * <ExpandableBlock.Trigger>
-     *    <ExpandableBlock.EndIcon> <SvgIcon/> </ExpandableBlock.EndIcon>
-     * <ExpandableBlock.Trigger/>
-     */
-    EndIcon: ExpandableBlockEndIcon,
-    /**
-     * Content shown in the block's body when fully expanded.
-     * @example
-     * <ExpandableBlock.Wrapper>
-     *    <ExpandableBlock.Content> Content </ExpandableBlock.Content>
-     * </ExpandableBlock.Wrapper>
-     */
-    Content: ExpandableBlockContent,
+  Wrapper: ExpandableBlockWrapper,
+  Trigger: ExpandableBlockTrigger,
+  ExpandIcon: ExpandableBlockExpandIcon,
+  LabelArea: ExpandableBlockLabelArea,
+  Title: ExpandableBlockTitle,
+  Caption: ExpandableBlockCaption,
+  EndIcon: ExpandableBlockEndIcon,
+  Content: ExpandableBlockContent,
 });