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

package/esm/core/DropdownMenu/DropdownMenu.js

@@ -25,29 +25,73 @@ import { Menu } from '../Menu/index.js';
  * </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 ?? 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(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) => {
+  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(
+    Popover,
+    {
+      content: React.createElement(
+        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: mergeRefs(targetRef, props.children.ref),
+          onClick: (args) => {
             trigger === undefined && (isVisible ? close() : open());
             children.props.onClick?.(args);
-        },
-    })));
+          },
+        })
+      : React.createElement(React.Fragment, null),
+  );
 };
 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,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/esm/core/ExpandableBlock/ExpandableBlock.js

@@ -4,54 +4,233 @@
  *--------------------------------------------------------------------------------------------*/
 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,
+} from '../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(
+      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,
+    ),
+  );
+});
+ExpandableBlockComponent.displayName = 'ExpandableBlock';
+const ExpandableBlockHeader = React.forwardRef((props, forwardedRef) => {
+  const {
+    className,
+    children,
+    label,
+    onClick: onClickProp,
+    expandIcon,
+    ...rest
+  } = props;
+  const { isExpanded, setExpanded, disabled, onToggle } = useSafeContext(
+    ExpandableBlockContext,
+  );
+  return React.createElement(
+    Box,
+    {
+      as: 'button',
+      type: 'button',
+      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),
+        ),
+      ),
+  );
+});
+ExpandableBlockHeader.displayName = 'ExpandableBlock.Header';
+// ----------------------------------------------------------------------------
+// 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>
+ *    <ExpandableBlock.Header>
+ *      <ExpandableBlock.ExpandIcon/>
+ *      <ExpandableBlock.LabelArea>
+ *        <ExpandableBlock.Title/>
+ *        <ExpandableBlock.Caption/>
+ *      </ExpandableBlock.LabelArea>
+ *      <ExpandableBlock.EndIcon/>
+ *    </ExpandableBlock.Header>
+ *    <ExpandableBlock.Content/>
+ *  </ExpandableBlock>
  */
-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 ?? (status && 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(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, {
+  /**
+   * `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,
 });
 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.
      */

package/esm/core/Fieldset/Fieldset.js

@@ -17,13 +17,24 @@ import cx from 'classnames';
  * </Fieldset>
  */
 export const Fieldset = React.forwardRef((props, ref) => {
-    const { children, className, disabled, legend, ...rest } = props;
-    return (React.createElement(Box, { as: 'fieldset', className: cx('iui-fieldset', className), disabled: disabled, ref: ref, ...rest },
-        legend && React.createElement("legend", null, legend),
-        disabled
-            ? React.Children.map(children, (child) => React.isValidElement(child)
-                ? React.cloneElement(child, { disabled: true })
-                : child)
-            : children));
+  const { children, className, disabled, legend, ...rest } = props;
+  return React.createElement(
+    Box,
+    {
+      as: 'fieldset',
+      className: cx('iui-fieldset', className),
+      disabled: disabled,
+      ref: ref,
+      ...rest,
+    },
+    legend && React.createElement('legend', null, legend),
+    disabled
+      ? React.Children.map(children, (child) =>
+          React.isValidElement(child)
+            ? React.cloneElement(child, { disabled: true })
+            : child,
+        )
+      : children,
+  );
 });
 export default Fieldset;

package/esm/core/FileUpload/FileEmptyCard.js

@@ -9,7 +9,7 @@ import FileUploadCard from './FileUploadCard.js';
 // ----------------------------------------------------------------------------
 // FileEmptyCard.Icon component
 const FileEmptyCardIcon = polymorphic.span('iui-file-card-empty-icon', {
-    children: React.createElement(SvgUpload, null),
+  children: React.createElement(SvgUpload, null),
 });
 // ----------------------------------------------------------------------------
 // FileEmptyCard.Text component
@@ -17,12 +17,23 @@ const FileEmptyCardText = polymorphic.span('iui-file-card-empty-action');
 // ----------------------------------------------------------------------------
 // FileEmptyCard component
 const FileEmptyCardComponent = React.forwardRef((props, ref) => {
-    const { children, className, ...rest } = props;
-    return (React.createElement(Box, { className: cx('iui-file-card-empty', className), ref: ref, ...rest }, children ?? (React.createElement(React.Fragment, null,
+  const { children, className, ...rest } = props;
+  return React.createElement(
+    Box,
+    { className: cx('iui-file-card-empty', className), ref: ref, ...rest },
+    children ??
+      React.createElement(
+        React.Fragment,
+        null,
         React.createElement(FileEmptyCard.Icon, null),
-        React.createElement(FileEmptyCard.Text, null,
-            React.createElement(FileUploadCard.InputLabel, null, "Choose a file"),
-            React.createElement("div", null, "to upload."))))));
+        React.createElement(
+          FileEmptyCard.Text,
+          null,
+          React.createElement(FileUploadCard.InputLabel, null, 'Choose a file'),
+          React.createElement('div', null, 'to upload.'),
+        ),
+      ),
+  );
 });
 /**
  * Empty file card to be used with the `FileUploadCard` component when no file has been uploaded.
@@ -41,7 +52,7 @@ const FileEmptyCardComponent = React.forwardRef((props, ref) => {
  * </FileEmptyCard>
  */
 export const FileEmptyCard = Object.assign(FileEmptyCardComponent, {
-    Icon: FileEmptyCardIcon,
-    Text: FileEmptyCardText,
+  Icon: FileEmptyCardIcon,
+  Text: FileEmptyCardText,
 });
 export default FileEmptyCard;

package/esm/core/FileUpload/FileUpload.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import type { PolymorphicForwardRefComponent } from '../utils/index.js';
-declare type FileUploadProps = {
+type FileUploadProps = {
     /**
      * Content shown over `children` when file is being dragged onto the component.
      * Should always be used when drag content differs from `children` being wrapped.