@itwin/itwinui-react 3.0.0-dev.4 → 3.0.0-dev.6

package/cjs/core/DropdownMenu/DropdownMenu.js

@@ -1,36 +1,14 @@
-"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 index_js_2 = require('../Menu/index.js');
 /**
  * Dropdown menu component.
  * Uses the {@link Popover} component, which is a wrapper around [tippy.js](https://atomiks.github.io/tippyjs).
@@ -51,30 +29,74 @@ const index_js_2 = require("../Menu/index.js");
  * </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 ?? false);
-    React.useEffect(() => {
-        setIsVisible(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?.(instance);
-    }, [onShow]);
-    const onHideHandler = React.useCallback((instance) => {
-        setIsVisible(false);
-        targetRef.current?.focus();
-        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) => {
+  const {
+    menuItems,
+    children,
+    className,
+    style,
+    role = 'menu',
+    visible,
+    placement = 'bottom-start',
+    onShow,
+    onHide,
+    trigger,
+    id,
+    ...rest
+  } = props;
+  const [isVisible, setIsVisible] = React.useState(visible ?? false);
+  React.useEffect(() => {
+    setIsVisible(visible ?? false);
+  }, [visible]);
+  const open = React.useCallback(() => setIsVisible(true), []);
+  const close = React.useCallback(() => setIsVisible(false), []);
+  const menuContent = React.useMemo(() => {
+    if (typeof menuItems === 'function') {
+      return menuItems(close);
+    }
+    return menuItems;
+  }, [menuItems, close]);
+  const targetRef = React.useRef(null);
+  const onShowHandler = React.useCallback(
+    (instance) => {
+      setIsVisible(true);
+      onShow?.(instance);
+    },
+    [onShow],
+  );
+  const onHideHandler = React.useCallback(
+    (instance) => {
+      setIsVisible(false);
+      targetRef.current?.focus();
+      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 },
+        menuContent,
+      ),
+      visible: trigger === undefined ? isVisible : undefined,
+      onClickOutside: close,
+      placement: placement,
+      onShow: onShowHandler,
+      onHide: onHideHandler,
+      trigger: visible === undefined ? trigger : undefined,
+      ...rest,
+    },
+    React.isValidElement(children)
+      ? React.cloneElement(children, {
+          ref: (0, index_js_1.mergeRefs)(targetRef, props.children.ref),
+          onClick: (args) => {
             trigger === undefined && (isVisible ? close() : open());
             children.props.onClick?.(args);
-        },
-    })));
+          },
+        })
+      : React.createElement(React.Fragment, null),
+  );
 };
 exports.DropdownMenu = DropdownMenu;
 exports.default = exports.DropdownMenu;

package/cjs/core/DropdownMenu/index.js

@@ -1,10 +1,15 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
+'use strict';
+Object.defineProperty(exports, '__esModule', { value: true });
 exports.DropdownMenu = void 0;
 /*---------------------------------------------------------------------------------------------
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-var DropdownMenu_js_1 = require("./DropdownMenu.js");
-Object.defineProperty(exports, "DropdownMenu", { enumerable: true, get: function () { return DropdownMenu_js_1.DropdownMenu; } });
+var DropdownMenu_js_1 = require('./DropdownMenu.js');
+Object.defineProperty(exports, 'DropdownMenu', {
+  enumerable: true,
+  get: function () {
+    return DropdownMenu_js_1.DropdownMenu;
+  },
+});
 exports.default = './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,83 @@ declare type ExpandableBlockProps = {
      */
     disabled?: boolean;
 };
+type ExpandableBlockHeaderOwnProps = {
+    label?: React.ReactNode;
+    expandIcon?: 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>
+ *    <ExpandableBlock.Header>
+ *      <ExpandableBlock.ExpandIcon/>
+ *      <ExpandableBlock.LabelArea>
+ *        <ExpandableBlock.Title/>
+ *        <ExpandableBlock.Caption/>
+ *      </ExpandableBlock.LabelArea>
+ *      <ExpandableBlock.EndIcon/>
+ *    </ExpandableBlock.Header>
+ *    <ExpandableBlock.Content/>
+ *  </ExpandableBlock>
  */
-export declare const ExpandableBlock: PolymorphicForwardRefComponent<"div", ExpandableBlockProps>;
+export declare const ExpandableBlock: PolymorphicForwardRefComponent<"div", ExpandableBlockOwnProps> & {
+    /**
+     * `Header` container that contains `ExpandIcon`, `LabelArea` and `EndIcon` subcomponents
+     * @example
+     * <ExpandableBlock.Header>
+     *    <ExpandableBlock.ExpandIcon/>
+     *    <ExpandableBlock.LabelArea/>
+     *    <ExpandableBlock.EndIcon/>
+     * </ExpandableBlock.Header>
+     */
+    Header: PolymorphicForwardRefComponent<"button", ExpandableBlockHeaderOwnProps>;
+    /**
+     * 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.Header>
+     *    <ExpandableBlock.EndIcon> <SvgIcon/> </ExpandableBlock.EndIcon>
+     * <ExpandableBlock.Header/>
+     */
+    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>> & {
+        size?: "small" | "large" | "auto" | "medium" | import("../utils/types.js").AnyString | undefined;
+        fill?: "default" | "informational" | "negative" | "positive" | "warning" | import("../utils/types.js").AnyString | 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>
+     *    <ExpandableBlock.Content> Content </ExpandableBlock.Content>
+     * </ExpandableBlock>
+     */
+    Content: PolymorphicForwardRefComponent<"div", ExpandableBlockContentOwnProps>;
+};
 export default ExpandableBlock;

package/cjs/core/ExpandableBlock/ExpandableBlock.js

@@ -1,86 +1,243 @@
-"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 ExpandableBlockContext = React.createContext(undefined);
+ExpandableBlockContext.displayName = 'ExpandableBlockContext';
+const ExpandableBlockComponent = 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,
+    ),
+  );
+});
+ExpandableBlockComponent.displayName = 'ExpandableBlock';
+const ExpandableBlockHeader = React.forwardRef((props, forwardedRef) => {
+  const {
+    className,
+    children,
+    label,
+    onClick: onClickProp,
+    expandIcon,
+    ...rest
+  } = props;
+  const { isExpanded, setExpanded, disabled, onToggle } = (0,
+  index_js_1.useSafeContext)(ExpandableBlockContext);
+  return React.createElement(
+    index_js_1.Box,
+    {
+      as: 'button',
+      type: 'button',
+      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),
+        ),
+      ),
+  );
+});
+ExpandableBlockHeader.displayName = 'ExpandableBlock.Header';
+// ----------------------------------------------------------------------------
+// ExpandableBlock.ExpandIcon component
+const ExpandableBlockExpandIcon = React.forwardRef((props, forwardedRef) => {
+  const { className, children, ...rest } = props;
+  return React.createElement(
+    index_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(
+    index_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>
+ *    <ExpandableBlock.Header>
+ *      <ExpandableBlock.ExpandIcon/>
+ *      <ExpandableBlock.LabelArea>
+ *        <ExpandableBlock.Title/>
+ *        <ExpandableBlock.Caption/>
+ *      </ExpandableBlock.LabelArea>
+ *      <ExpandableBlock.EndIcon/>
+ *    </ExpandableBlock.Header>
+ *    <ExpandableBlock.Content/>
+ *  </ExpandableBlock>
  */
-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 ?? (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?.(!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, {
+  /**
+   * `Header` container that contains `ExpandIcon`, `LabelArea` and `EndIcon` subcomponents
+   * @example
+   * <ExpandableBlock.Header>
+   *    <ExpandableBlock.ExpandIcon/>
+   *    <ExpandableBlock.LabelArea/>
+   *    <ExpandableBlock.EndIcon/>
+   * </ExpandableBlock.Header>
+   */
+  Header: ExpandableBlockHeader,
+  /**
+   * 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.Header>
+   *    <ExpandableBlock.EndIcon> <SvgIcon/> </ExpandableBlock.EndIcon>
+   * <ExpandableBlock.Header/>
+   */
+  EndIcon: ExpandableBlockEndIcon,
+  /**
+   * Content shown in the block's body when fully expanded.
+   * @example
+   * <ExpandableBlock>
+   *    <ExpandableBlock.Content> Content </ExpandableBlock.Content>
+   * </ExpandableBlock>
+   */
+  Content: ExpandableBlockContent,
 });
 exports.default = exports.ExpandableBlock;

package/cjs/core/ExpandableBlock/index.js

@@ -1,10 +1,15 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
+'use strict';
+Object.defineProperty(exports, '__esModule', { value: true });
 exports.ExpandableBlock = void 0;
 /*---------------------------------------------------------------------------------------------
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-var ExpandableBlock_js_1 = require("./ExpandableBlock.js");
-Object.defineProperty(exports, "ExpandableBlock", { enumerable: true, get: function () { return ExpandableBlock_js_1.ExpandableBlock; } });
+var ExpandableBlock_js_1 = require('./ExpandableBlock.js');
+Object.defineProperty(exports, 'ExpandableBlock', {
+  enumerable: true,
+  get: function () {
+    return ExpandableBlock_js_1.ExpandableBlock;
+  },
+});
 exports.default = './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.
      */