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

package/cjs/core/DropdownMenu/DropdownMenu.js

@@ -1,39 +1,18 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
+'use strict';
+Object.defineProperty(exports, '__esModule', { value: true });
 exports.DropdownMenu = void 0;
+const tslib_1 = require('tslib');
 /*---------------------------------------------------------------------------------------------
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-const React = __importStar(require("react"));
-const index_js_1 = require("../utils/index.js");
-const index_js_2 = require("../Menu/index.js");
+const React = tslib_1.__importStar(require('react'));
+const index_js_1 = require('../utils/index.js');
+const Menu_js_1 = require('../Menu/Menu.js');
+const Popover_js_1 = require('../Popover/Popover.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)}>
@@ -50,33 +29,79 @@ const index_js_2 = require("../Menu/index.js");
  *   <Button>Menu</Button>
  * </DropdownMenu>
  */
-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(index_js_1.Popover, { content: React.createElement(index_js_2.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: (0, index_js_1.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);
-        },
-    })));
-};
-exports.DropdownMenu = DropdownMenu;
+exports.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] = (0, index_js_1.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 = (0, Popover_js_1.usePopover)({
+    visible,
+    onVisibleChange: (open) => (open ? setVisible(true) : close()),
+    placement,
+    matchWidth,
+  });
+  const popoverRef = (0, index_js_1.useMergedRefs)(
+    forwardedRef,
+    popover.refs.setFloating,
+  );
+  return React.createElement(
+    React.Fragment,
+    null,
+    (0, index_js_1.cloneElementWithRef)(children, (children) => ({
+      ...popover.getReferenceProps(children.props),
+      'aria-expanded': popover.open,
+      ref: (0, index_js_1.mergeRefs)(triggerRef, popover.refs.setReference),
+    })),
+    popover.open &&
+      React.createElement(
+        index_js_1.Portal,
+        { portal: portal },
+        React.createElement(
+          Menu_js_1.Menu,
+          {
+            ...popover.getFloatingProps({
+              role,
+              ...rest,
+              onKeyDown: (0, index_js_1.mergeEventHandlers)(
+                props.onKeyDown,
+                (e) => {
+                  if (e.defaultPrevented) {
+                    return;
+                  }
+                  if (e.key === 'Tab') {
+                    close();
+                  }
+                },
+              ),
+            }),
+            ref: popoverRef,
+          },
+          menuContent,
+        ),
+      ),
+  );
+});
 exports.default = exports.DropdownMenu;

package/cjs/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" | "auto" | "medium" | "large" | 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/cjs/core/ExpandableBlock/ExpandableBlock.js

@@ -1,86 +1,265 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
+'use strict';
+Object.defineProperty(exports, '__esModule', { value: true });
 exports.ExpandableBlock = void 0;
+const tslib_1 = require('tslib');
 /*---------------------------------------------------------------------------------------------
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-const classnames_1 = __importDefault(require("classnames"));
-const React = __importStar(require("react"));
-const index_js_1 = require("../utils/index.js");
+const classnames_1 = tslib_1.__importDefault(require('classnames'));
+const React = tslib_1.__importStar(require('react'));
+const index_js_1 = require('../utils/index.js');
+const Icon_js_1 = require('../Icon/Icon.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(
+    exports.ExpandableBlock.Wrapper,
+    { ...rest, ref: forwardedRef },
+    React.createElement(exports.ExpandableBlock.Trigger, {
+      label: title,
+      caption: caption,
+      endIcon: endIcon,
+    }),
+    React.createElement(exports.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(
+      index_js_1.Box,
+      {
+        className: (0, classnames_1.default)('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 } = (0,
+  index_js_1.useSafeContext)(ExpandableBlockContext);
+  return React.createElement(
+    index_js_1.ButtonBase,
+    {
+      className: (0, classnames_1.default)('iui-expandable-header', className),
+      'aria-expanded': isExpanded,
+      'aria-disabled': disabled,
+      onClick: (0, index_js_1.mergeEventHandlers)(onClickProp, () => {
+        if (disabled) {
+          return;
+        }
+        setExpanded(!isExpanded);
+        onToggle?.(!isExpanded);
+      }),
+      ref: forwardedRef,
+      ...rest,
+    },
+    children ??
+      React.createElement(
+        React.Fragment,
+        null,
+        expandIcon ??
+          React.createElement(exports.ExpandableBlock.ExpandIcon, null),
+        React.createElement(
+          exports.ExpandableBlock.LabelArea,
+          null,
+          React.createElement(exports.ExpandableBlock.Title, null, label),
+          caption &&
+            React.createElement(exports.ExpandableBlock.Caption, null, caption),
+        ),
+        endIcon || status
+          ? React.createElement(exports.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_js_1.Icon,
+    {
+      className: (0, classnames_1.default)(
+        'iui-expandable-block-icon',
+        className,
+      ),
+      ref: forwardedRef,
+      ...rest,
+    },
+    children ??
+      React.createElement(index_js_1.SvgChevronRight, { 'aria-hidden': true }),
+  );
+});
+ExpandableBlockExpandIcon.displayName = 'ExpandableBlock.ExpandIcon';
+// ----------------------------------------------------------------------------
+// ExpandableBlock.LabelArea component
+const ExpandableBlockLabelArea = index_js_1.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(
+    index_js_1.Box,
+    {
+      className: (0, classnames_1.default)(
+        'iui-expandable-block-title',
+        className,
+      ),
+      ref: forwardedRef,
+      ...rest,
+    },
+    children,
+  );
+});
+ExpandableBlockTitle.displayName = 'ExpandableBlock.Title';
+// ----------------------------------------------------------------------------
+// ExpandableBlock.Caption component
+const ExpandableBlockCaption = (0, index_js_1.polymorphic)(
+  'iui-expandable-block-caption',
+);
+ExpandableBlockCaption.displayName = 'ExpandableBlock.Caption';
+// ----------------------------------------------------------------------------
+// ExpandableBlock.EndIcon component
+const ExpandableBlockEndIcon = React.forwardRef((props, forwardedRef) => {
+  const { children, ...rest } = props;
+  const { status } = (0, index_js_1.useSafeContext)(ExpandableBlockContext);
+  const icon = children ?? (status && index_js_1.StatusIconMap[status]());
+  return React.createElement(
+    Icon_js_1.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(
+    index_js_1.Box,
+    {
+      className: (0, classnames_1.default)('iui-expandable-content', className),
+      ref: forwardedRef,
+      ...rest,
+    },
+    React.createElement(index_js_1.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>
  */
-exports.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 && index_js_1.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(index_js_1.Box, { className: (0, classnames_1.default)('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(index_js_1.Box, { role: 'button', "aria-expanded": expanded, className: 'iui-header', "aria-disabled": disabled, tabIndex: 0, onClick: handleToggle, onKeyDown: onKeyDown },
-            React.createElement(index_js_1.SvgChevronRight, { className: 'iui-icon', "aria-hidden": true }),
-            React.createElement(index_js_1.Box, { as: 'span', className: 'iui-expandable-block-label' },
-                React.createElement(index_js_1.Box, { className: 'iui-title' }, title),
-                caption && React.createElement(index_js_1.Box, { className: 'iui-caption' }, caption)),
-            icon && React.createElement(index_js_1.Icon, { fill: status }, icon)),
-        React.createElement(index_js_1.WithCSSTransition, { in: expanded },
-            React.createElement(index_js_1.Box, { className: 'iui-expandable-content' },
-                React.createElement("div", null, children)))));
+exports.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,
 });
 exports.default = exports.ExpandableBlock;

package/cjs/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.
      */