@itwin/itwinui-react/esm/core/ExpandableBlock/ExpandableBlock.js

A react component library for iTwinUI

import cx from 'classnames';
import * as React from 'react';
import {
  StatusIconMap,
  SvgChevronRight,
  Box,
  useSafeContext,
  polymorphic,
  mergeEventHandlers,
  ButtonBase,
  useId,
} from '../../utils/index.js';
import { Icon } from '../Icon/Icon.js';
import { LinkBox } from '../LinkAction/LinkAction.js';
let ExpandableBlockContext = React.createContext(void 0);
if ('development' === process.env.NODE_ENV)
  ExpandableBlockContext.displayName = 'ExpandableBlockContext';
let ExpandableBlockComponent = React.forwardRef((props, forwardedRef) => {
  let { 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),
  );
});
if ('development' === process.env.NODE_ENV)
  ExpandableBlockComponent.displayName = 'ExpandableBlock';
export const ExpandableBlockWrapper = React.forwardRef(
  (props, forwardedRef) => {
    let {
      children,
      className,
      onToggle,
      style,
      isExpanded,
      status,
      size = 'default',
      styleType = 'default',
      disabled = false,
      ...rest
    } = props;
    let [expandedState, setExpanded] = React.useState(isExpanded ?? false);
    let expanded = isExpanded ?? expandedState;
    let [descriptionId, setDescriptionId] = React.useState(void 0);
    return React.createElement(
      ExpandableBlockContext.Provider,
      {
        value: {
          status,
          isExpanded: expanded,
          onToggle,
          size,
          styleType,
          disabled,
          setExpanded,
          children,
          descriptionId,
          setDescriptionId,
        },
      },
      React.createElement(
        Box,
        {
          className: cx('iui-expandable-block', className),
          'data-iui-expanded': expanded,
          'data-iui-size': size,
          'data-iui-variant': 'default' !== styleType ? styleType : void 0,
          style: style,
          ref: forwardedRef,
          ...rest,
        },
        children,
      ),
    );
  },
);
if ('development' === process.env.NODE_ENV)
  ExpandableBlockWrapper.displayName = 'ExpandableBlock.Wrapper';
export const ExpandableBlockTrigger = React.forwardRef(
  (props, forwardedRef) => {
    let { className, children, label, caption, expandIcon, endIcon, ...rest } =
      props;
    let { disabled, status } = useSafeContext(ExpandableBlockContext);
    return React.createElement(
      LinkBox,
      {
        className: cx('iui-expandable-header', className),
        'data-iui-disabled': disabled ? 'true' : void 0,
        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,
        ),
    );
  },
);
if ('development' === process.env.NODE_ENV)
  ExpandableBlockTrigger.displayName = 'ExpandableBlock.Trigger';
let ExpandableBlockExpandIcon = React.forwardRef((props, forwardedRef) => {
  let { 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,
      }),
  );
});
if ('development' === process.env.NODE_ENV)
  ExpandableBlockExpandIcon.displayName = 'ExpandableBlock.ExpandIcon';
let ExpandableBlockLabelArea = polymorphic.span('iui-expandable-block-label');
if ('development' === process.env.NODE_ENV)
  ExpandableBlockLabelArea.displayName = 'ExpandableBlock.LabelArea';
let ExpandableBlockTitle = React.forwardRef((props, forwardedRef) => {
  let { className, children, onClick: onClickProp, ...rest } = props;
  let { isExpanded, setExpanded, disabled, onToggle, descriptionId } =
    useSafeContext(ExpandableBlockContext);
  return React.createElement(
    ButtonBase,
    {
      className: cx('iui-expandable-block-title', 'iui-link-action', className),
      'aria-expanded': isExpanded,
      'aria-disabled': disabled,
      onClick: mergeEventHandlers(onClickProp, () => {
        if (disabled) return;
        setExpanded(!isExpanded);
        onToggle?.(!isExpanded);
      }),
      ref: forwardedRef,
      'aria-describedby': descriptionId,
      ...rest,
    },
    children,
  );
});
if ('development' === process.env.NODE_ENV)
  ExpandableBlockTitle.displayName = 'ExpandableBlock.Title';
let ExpandableBlockCaption = React.forwardRef((props, forwardedRef) => {
  let fallbackId = useId();
  let { setDescriptionId } = useSafeContext(ExpandableBlockContext);
  React.useEffect(() => {
    setDescriptionId(props.id || fallbackId);
    return () => setDescriptionId(void 0);
  }, [props.id, fallbackId, setDescriptionId]);
  return React.createElement(Box, {
    ref: forwardedRef,
    id: fallbackId,
    ...props,
    className: cx('iui-expandable-block-caption', props?.className),
  });
});
if ('development' === process.env.NODE_ENV)
  ExpandableBlockCaption.displayName = 'ExpandableBlock.Caption';
let ExpandableBlockEndIcon = React.forwardRef((props, forwardedRef) => {
  let { children, ...rest } = props;
  let { status } = useSafeContext(ExpandableBlockContext);
  let icon = children ?? (status && StatusIconMap[status]());
  return React.createElement(
    Icon,
    {
      fill: status,
      ref: forwardedRef,
      ...rest,
    },
    icon,
  );
});
if ('development' === process.env.NODE_ENV)
  ExpandableBlockEndIcon.displayName = 'ExpandableBlock.EndIcon';
export const ExpandableBlockContent = React.forwardRef(
  (props, forwardedRef) => {
    let { className, children, innerProps, ...rest } = props;
    return React.createElement(
      Box,
      {
        className: cx('iui-expandable-content', className),
        ref: forwardedRef,
        ...rest,
      },
      React.createElement(Box, innerProps, children),
    );
  },
);
if ('development' === process.env.NODE_ENV)
  ExpandableBlockContent.displayName = 'ExpandableBlock.Content';
export const ExpandableBlock = Object.assign(ExpandableBlockComponent, {
  Wrapper: ExpandableBlockWrapper,
  Trigger: ExpandableBlockTrigger,
  ExpandIcon: ExpandableBlockExpandIcon,
  LabelArea: ExpandableBlockLabelArea,
  Title: ExpandableBlockTitle,
  Caption: ExpandableBlockCaption,
  EndIcon: ExpandableBlockEndIcon,
  Content: ExpandableBlockContent,
});