@itwin/itwinui-react 3.0.0-dev.1 → 3.0.0-dev.10

package/esm/core/Dialog/DialogTitleBar.js

@@ -26,17 +26,52 @@ import { useDialogDragContext } from './DialogDragContext.js';
  *   </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' },
-            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',
+                },
+                React.createElement(SvgClose, null),
+              ),
+          ),
+    );
+  }),
+  {
     Title: DialogTitleBarTitle,
-});
+  },
+);
 export default DialogTitleBar;

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

@@ -1,11 +1,12 @@
 import * as React from 'react';
-import type { CommonProps, PopoverProps } from '../utils/index.js';
-export declare type DropdownMenuProps = {
+import { Popover } from '../utils/index.js';
+import type { PolymorphicForwardRefComponent, PortalProps } from '../utils/index.js';
+export type DropdownMenuProps = {
     /**
      * List of menu items. Recommended to use MenuItem component.
-     * You can pass function that takes argument `close` that closes the dropdown menu.
+     * You can pass function that takes argument `close` that closes the dropdown menu, or a list of MenuItems.
      */
-    menuItems: (close: () => void) => JSX.Element[];
+    menuItems: ((close: () => void) => JSX.Element[]) | JSX.Element[] | JSX.Element;
     /**
      * ARIA role. Role of menu. For menu use 'menu', for select use 'listbox'.
      * @default 'menu'
@@ -15,10 +16,10 @@ export declare type DropdownMenuProps = {
      * Child element to wrap dropdown with.
      */
     children: React.ReactNode;
-} & Omit<PopoverProps, 'content'> & Omit<CommonProps, 'title'>;
+} & Pick<React.ComponentProps<typeof Popover>, 'visible' | 'onVisibleChange' | 'placement' | 'matchWidth'> & React.ComponentPropsWithoutRef<'ul'> & Pick<PortalProps, 'portal'>;
 /**
  * Dropdown menu component.
- * Uses the {@link Popover} component, which is a wrapper around [tippy.js](https://atomiks.github.io/tippyjs).
+ * Built on top of the {@link Popover} component.
  * @example
  * const menuItems = (close: () => void) => [
  *   <MenuItem key={1} onClick={onClick(1, close)}>
@@ -35,5 +36,5 @@ export declare type DropdownMenuProps = {
  *   <Button>Menu</Button>
  * </DropdownMenu>
  */
-export declare const DropdownMenu: (props: DropdownMenuProps) => JSX.Element;
+export declare const DropdownMenu: PolymorphicForwardRefComponent<"div", DropdownMenuProps>;
 export default DropdownMenu;

package/esm/core/DropdownMenu/DropdownMenu.js

@@ -3,11 +3,20 @@
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
-import { Popover, mergeRefs } from '../utils/index.js';
+import {
+  Popover,
+  useMergedRefs,
+  usePopover,
+  Portal,
+  cloneElementWithRef,
+  useControlledState,
+  mergeRefs,
+  mergeEventHandlers,
+} from '../utils/index.js';
 import { Menu } from '../Menu/index.js';
 /**
  * Dropdown menu component.
- * Uses the {@link Popover} component, which is a wrapper around [tippy.js](https://atomiks.github.io/tippyjs).
+ * Built on top of the {@link Popover} component.
  * @example
  * const menuItems = (close: () => void) => [
  *   <MenuItem key={1} onClick={onClick(1, close)}>
@@ -24,32 +33,73 @@ import { Menu } from '../Menu/index.js';
  *   <Button>Menu</Button>
  * </DropdownMenu>
  */
-export const DropdownMenu = (props) => {
-    const { menuItems, children, className, style, role = 'menu', visible, placement = 'bottom-start', onShow, onHide, trigger, id, ...rest } = props;
-    const [isVisible, setIsVisible] = React.useState(visible !== null && visible !== void 0 ? visible : false);
-    React.useEffect(() => {
-        setIsVisible(visible !== null && visible !== void 0 ? visible : false);
-    }, [visible]);
-    const open = React.useCallback(() => setIsVisible(true), []);
-    const close = React.useCallback(() => setIsVisible(false), []);
-    const targetRef = React.useRef(null);
-    const onShowHandler = React.useCallback((instance) => {
-        setIsVisible(true);
-        onShow === null || onShow === void 0 ? void 0 : onShow(instance);
-    }, [onShow]);
-    const onHideHandler = React.useCallback((instance) => {
-        var _a;
-        setIsVisible(false);
-        (_a = targetRef.current) === null || _a === void 0 ? void 0 : _a.focus();
-        onHide === null || onHide === void 0 ? void 0 : onHide(instance);
-    }, [onHide]);
-    return (React.createElement(Popover, { content: React.createElement(Menu, { className: className, style: style, role: role, id: id }, React.useMemo(() => menuItems(close), [menuItems, close])), visible: trigger === undefined ? isVisible : undefined, onClickOutside: close, placement: placement, onShow: onShowHandler, onHide: onHideHandler, trigger: visible === undefined ? trigger : undefined, ...rest }, React.cloneElement(children, {
-        ref: mergeRefs(targetRef, props.children.ref),
-        onClick: (args) => {
-            var _a, _b;
-            trigger === undefined && (isVisible ? close() : open());
-            (_b = (_a = children.props).onClick) === null || _b === void 0 ? void 0 : _b.call(_a, args);
-        },
-    })));
-};
+export const DropdownMenu = 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 popover = usePopover({
+    visible,
+    onVisibleChange: (open) => (open ? setVisible(true) : close()),
+    placement,
+    matchWidth,
+  });
+  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),
+    })),
+    popover.open &&
+      React.createElement(
+        Portal,
+        { portal: portal },
+        React.createElement(
+          Menu,
+          {
+            ...popover.getFloatingProps({
+              role,
+              ...rest,
+              onKeyDown: mergeEventHandlers(props.onKeyDown, (e) => {
+                if (e.defaultPrevented) {
+                  return;
+                }
+                if (e.key === 'Tab') {
+                  close();
+                }
+              }),
+            }),
+            ref: popoverRef,
+          },
+          menuContent,
+        ),
+      ),
+  );
+});
 export default DropdownMenu;

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

@@ -1,24 +1,11 @@
 import * as React from 'react';
 import type { PolymorphicForwardRefComponent } from '../utils/index.js';
-declare type ExpandableBlockProps = {
-    /**
-     * The main text displayed on the block, regardless of state.
-     */
-    title: React.ReactNode;
-    /**
-     * Small note displayed above title, regardless of state.
-     */
-    caption?: React.ReactNode;
+type ExpandableBlockOwnProps = {
     /**
      * Status of the block.
      * When set, a colored status icon is shown at the end of the main text.
      */
     status?: 'positive' | 'negative' | 'warning' | 'informational';
-    /**
-     * Svg icon displayed at the end of the main text.
-     * Will override status icon if specified.
-     */
-    endIcon?: JSX.Element;
     /**
      * Whether or not to show the block's content.
      * @default false
@@ -49,14 +36,89 @@ declare type ExpandableBlockProps = {
      */
     disabled?: boolean;
 };
+type ExpandableBlockTriggerOwnProps = {
+    label?: React.ReactNode;
+    caption?: React.ReactNode;
+    expandIcon?: React.ReactNode;
+    endIcon?: React.ReactNode;
+};
+type ExpandableBlockContentOwnProps = {
+    innerProps?: React.ComponentPropsWithoutRef<'div'>;
+};
 /**
- * Container that allows content to be hidden behind a brief title and a caption.
+ * Expandable block with customizable Title, Caption, Content and EndIcon subcomponents.
  * @example
- * <ExpandableBlock title='Basic Block'>Content in block!</ExpandableBlock>
- * <ExpandableBlock title='Basic Block' caption='basic caption'>Content in block!</ExpandableBlock>
- * <ExpandableBlock title='Default Expanded Block' caption='basic caption' isExpanded={true}>Content in block!</ExpandableBlock>
- * <ExpandableBlock title='Positive status' status='positive'>Content</ExpandableBlock>
- * <ExpandableBlock title='Block with icon' endIcon={<SvgPlaceholder />}>Content</ExpandableBlock>
+ *  <ExpandableBlock.Wrapper>
+ *    <ExpandableBlock.Trigger>
+ *      <ExpandableBlock.ExpandIcon/>
+ *      <ExpandableBlock.LabelArea>
+ *        <ExpandableBlock.Title/>
+ *        <ExpandableBlock.Caption/>
+ *      </ExpandableBlock.LabelArea>
+ *      <ExpandableBlock.EndIcon/>
+ *    </ExpandableBlock.Trigger>
+ *    <ExpandableBlock.Content/>
+ *  </ExpandableBlock.Wrapper>
  */
-export declare const ExpandableBlock: PolymorphicForwardRefComponent<"div", ExpandableBlockProps>;
+export declare const ExpandableBlock: PolymorphicForwardRefComponent<"div", ExpandableBlockOwnProps & {
+    title?: React.ReactNode;
+} & Pick<ExpandableBlockTriggerOwnProps, "caption" | "endIcon">> & {
+    Wrapper: PolymorphicForwardRefComponent<"div", ExpandableBlockOwnProps>;
+    /**
+     * `Header` container that contains `ExpandIcon`, `LabelArea` and `EndIcon` subcomponents
+     * @example
+     * <ExpandableBlock.Trigger>
+     *    <ExpandableBlock.ExpandIcon/>
+     *    <ExpandableBlock.LabelArea/>
+     *    <ExpandableBlock.EndIcon/>
+     * </ExpandableBlock.Trigger>
+     */
+    Trigger: PolymorphicForwardRefComponent<"button", ExpandableBlockTriggerOwnProps>;
+    /**
+     * The expanding icon on the left of header
+     */
+    ExpandIcon: PolymorphicForwardRefComponent<"span", {}>;
+    /**
+     * `LabelArea` subcomponent that contains `Title` and `Caption`
+     * @example
+     * <ExpandableBlock.LabelArea>
+     *    <ExpandableBLock.Title> Title </ExpandableBlock.Title>
+     *    <ExpandableBlock.Caption> Caption </ExpandableBlock.Caption>
+     * </ExpandableBlock.LabelArea>
+     */
+    LabelArea: PolymorphicForwardRefComponent<"span", {}>;
+    /**
+     * The main text displayed on the block header, regardless of state.
+     */
+    Title: PolymorphicForwardRefComponent<"div", {}>;
+    /**
+     * Small note displayed below title, regardless of state.
+     */
+    Caption: PolymorphicForwardRefComponent<NonNullable<keyof JSX.IntrinsicElements>, {}>;
+    /**
+     * 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: 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" | "large" | "auto" | "medium" | import("../utils/types.js").AnyString | undefined;
+        fill?: "default" | "informational" | "negative" | "positive" | "warning" | import("../utils/types.js").AnyString | undefined;
+        padded?: boolean | undefined;
+    } & Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
+        as?: "span" | undefined;
+    }, "ref">>;
+    /**
+     * Content shown in the block's body when fully expanded.
+     * @example
+     * <ExpandableBlock.Wrapper>
+     *    <ExpandableBlock.Content> Content </ExpandableBlock.Content>
+     * </ExpandableBlock.Wrapper>
+     */
+    Content: PolymorphicForwardRefComponent<"div", ExpandableBlockContentOwnProps>;
+};
 export default ExpandableBlock;

package/esm/core/ExpandableBlock/ExpandableBlock.js

@@ -4,54 +4,254 @@
  *--------------------------------------------------------------------------------------------*/
 import cx from 'classnames';
 import * as React from 'react';
-import { StatusIconMap, WithCSSTransition, SvgChevronRight, Icon, Box, } from '../utils/index.js';
+import {
+  StatusIconMap,
+  SvgChevronRight,
+  Icon,
+  Box,
+  useSafeContext,
+  polymorphic,
+  mergeEventHandlers,
+  ButtonBase,
+} from '../utils/index.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),
+  );
+});
+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;
+  return React.createElement(
+    ExpandableBlockContext.Provider,
+    {
+      value: {
+        status,
+        isExpanded: expanded,
+        onToggle,
+        size,
+        styleType,
+        disabled,
+        setExpanded,
+        children,
+      },
+    },
+    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,
+    onClick: onClickProp,
+    expandIcon,
+    endIcon,
+    ...rest
+  } = props;
+  const { isExpanded, setExpanded, disabled, onToggle, status } =
+    useSafeContext(ExpandableBlockContext);
+  return React.createElement(
+    ButtonBase,
+    {
+      className: cx('iui-expandable-header', className),
+      'aria-expanded': isExpanded,
+      'aria-disabled': disabled,
+      onClick: mergeEventHandlers(onClickProp, () => {
+        if (disabled) {
+          return;
+        }
+        setExpanded(!isExpanded);
+        onToggle?.(!isExpanded);
+      }),
+      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,
+      ),
+  );
+});
+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 }),
+  );
+});
+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, ...rest } = props;
+  return React.createElement(
+    Box,
+    {
+      className: cx('iui-expandable-block-title', className),
+      ref: forwardedRef,
+      ...rest,
+    },
+    children,
+  );
+});
+ExpandableBlockTitle.displayName = 'ExpandableBlock.Title';
+// ----------------------------------------------------------------------------
+// ExpandableBlock.Caption component
+const ExpandableBlockCaption = polymorphic('iui-expandable-block-caption');
+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,
+  );
+});
+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),
+  );
+});
+ExpandableBlockContent.displayName = 'ExpandableBlock.Content';
 /**
- * Container that allows content to be hidden behind a brief title and a caption.
+ * Expandable block with customizable Title, Caption, Content and EndIcon subcomponents.
  * @example
- * <ExpandableBlock title='Basic Block'>Content in block!</ExpandableBlock>
- * <ExpandableBlock title='Basic Block' caption='basic caption'>Content in block!</ExpandableBlock>
- * <ExpandableBlock title='Default Expanded Block' caption='basic caption' isExpanded={true}>Content in block!</ExpandableBlock>
- * <ExpandableBlock title='Positive status' status='positive'>Content</ExpandableBlock>
- * <ExpandableBlock title='Block with icon' endIcon={<SvgPlaceholder />}>Content</ExpandableBlock>
+ *  <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 = React.forwardRef((props, ref) => {
-    const { caption, children, className, title, onToggle, style, isExpanded = false, endIcon, status, size = 'default', styleType = 'default', disabled = false, ...rest } = props;
-    const icon = endIcon !== null && endIcon !== void 0 ? endIcon : (status && StatusIconMap[status]());
-    const [expanded, setExpanded] = React.useState(isExpanded);
-    React.useEffect(() => {
-        setExpanded(isExpanded);
-    }, [isExpanded]);
-    const handleToggle = () => {
-        if (disabled) {
-            return;
-        }
-        setExpanded(!expanded);
-        onToggle === null || onToggle === void 0 ? void 0 : onToggle(!expanded);
-    };
-    const onKeyDown = (event) => {
-        if (event.altKey || disabled) {
-            return;
-        }
-        if (event.key === 'Enter' ||
-            event.key === ' ' ||
-            event.key === 'Spacebar') {
-            handleToggle();
-        }
-    };
-    return (React.createElement(Box, { className: cx('iui-expandable-block', {
-            'iui-with-caption': !!caption,
-            'iui-expanded': expanded,
-            'iui-small': size === 'small',
-            'iui-borderless': styleType === 'borderless',
-        }, className), style: style, ref: ref, ...rest },
-        React.createElement(Box, { role: 'button', "aria-expanded": expanded, className: 'iui-header', "aria-disabled": disabled, tabIndex: 0, onClick: handleToggle, onKeyDown: onKeyDown },
-            React.createElement(SvgChevronRight, { className: 'iui-icon', "aria-hidden": true }),
-            React.createElement(Box, { as: 'span', className: 'iui-expandable-block-label' },
-                React.createElement(Box, { className: 'iui-title' }, title),
-                caption && React.createElement(Box, { className: 'iui-caption' }, caption)),
-            icon && React.createElement(Icon, { fill: status }, icon)),
-        React.createElement(WithCSSTransition, { in: expanded },
-            React.createElement(Box, { className: 'iui-expandable-content' },
-                React.createElement("div", null, children)))));
+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,
 });
 export default ExpandableBlock;

package/esm/core/Fieldset/Fieldset.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import type { PolymorphicForwardRefComponent } from '../utils/index.js';
-declare type FieldsetProps = {
+type FieldsetProps = {
     /**
      * The caption or title for the fieldset.
      */