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

A react component library for iTwinUI

'use strict';
Object.defineProperty(exports, '__esModule', {
  value: true,
});
function _export(target, all) {
  for (var name in all)
    Object.defineProperty(target, name, {
      enumerable: true,
      get: all[name],
    });
}
_export(exports, {
  ExpandableBlock: function () {
    return ExpandableBlock;
  },
  ExpandableBlockContent: function () {
    return ExpandableBlockContent;
  },
  ExpandableBlockTrigger: function () {
    return ExpandableBlockTrigger;
  },
  ExpandableBlockWrapper: function () {
    return ExpandableBlockWrapper;
  },
});
const _interop_require_default = require('@swc/helpers/_/_interop_require_default');
const _interop_require_wildcard = require('@swc/helpers/_/_interop_require_wildcard');
const _classnames = /*#__PURE__*/ _interop_require_default._(
  require('classnames'),
);
const _react = /*#__PURE__*/ _interop_require_wildcard._(require('react'));
const _index = require('../../utils/index.js');
const _Icon = require('../Icon/Icon.js');
const _LinkAction = require('../LinkAction/LinkAction.js');
const ExpandableBlockContext = _react.createContext(void 0);
if ('development' === process.env.NODE_ENV)
  ExpandableBlockContext.displayName = 'ExpandableBlockContext';
const 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';
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(
      _index.Box,
      {
        className: (0, _classnames.default)('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';
const ExpandableBlockTrigger = _react.forwardRef((props, forwardedRef) => {
  let { className, children, label, caption, expandIcon, endIcon, ...rest } =
    props;
  let { disabled, status } = (0, _index.useSafeContext)(ExpandableBlockContext);
  return _react.createElement(
    _LinkAction.LinkBox,
    {
      className: (0, _classnames.default)('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';
const ExpandableBlockExpandIcon = _react.forwardRef((props, forwardedRef) => {
  let { className, children, ...rest } = props;
  return _react.createElement(
    _Icon.Icon,
    {
      className: (0, _classnames.default)(
        'iui-expandable-block-icon',
        className,
      ),
      ref: forwardedRef,
      ...rest,
    },
    children ??
      _react.createElement(_index.SvgChevronRight, {
        'aria-hidden': true,
      }),
  );
});
if ('development' === process.env.NODE_ENV)
  ExpandableBlockExpandIcon.displayName = 'ExpandableBlock.ExpandIcon';
const ExpandableBlockLabelArea = _index.polymorphic.span(
  'iui-expandable-block-label',
);
if ('development' === process.env.NODE_ENV)
  ExpandableBlockLabelArea.displayName = 'ExpandableBlock.LabelArea';
const ExpandableBlockTitle = _react.forwardRef((props, forwardedRef) => {
  let { className, children, onClick: onClickProp, ...rest } = props;
  let { isExpanded, setExpanded, disabled, onToggle, descriptionId } = (0,
  _index.useSafeContext)(ExpandableBlockContext);
  return _react.createElement(
    _index.ButtonBase,
    {
      className: (0, _classnames.default)(
        'iui-expandable-block-title',
        'iui-link-action',
        className,
      ),
      'aria-expanded': isExpanded,
      'aria-disabled': disabled,
      onClick: (0, _index.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';
const ExpandableBlockCaption = _react.forwardRef((props, forwardedRef) => {
  let fallbackId = (0, _index.useId)();
  let { setDescriptionId } = (0, _index.useSafeContext)(ExpandableBlockContext);
  _react.useEffect(() => {
    setDescriptionId(props.id || fallbackId);
    return () => setDescriptionId(void 0);
  }, [props.id, fallbackId, setDescriptionId]);
  return _react.createElement(_index.Box, {
    ref: forwardedRef,
    id: fallbackId,
    ...props,
    className: (0, _classnames.default)(
      'iui-expandable-block-caption',
      props?.className,
    ),
  });
});
if ('development' === process.env.NODE_ENV)
  ExpandableBlockCaption.displayName = 'ExpandableBlock.Caption';
const ExpandableBlockEndIcon = _react.forwardRef((props, forwardedRef) => {
  let { children, ...rest } = props;
  let { status } = (0, _index.useSafeContext)(ExpandableBlockContext);
  let icon = children ?? (status && _index.StatusIconMap[status]());
  return _react.createElement(
    _Icon.Icon,
    {
      fill: status,
      ref: forwardedRef,
      ...rest,
    },
    icon,
  );
});
if ('development' === process.env.NODE_ENV)
  ExpandableBlockEndIcon.displayName = 'ExpandableBlock.EndIcon';
const ExpandableBlockContent = _react.forwardRef((props, forwardedRef) => {
  let { className, children, innerProps, ...rest } = props;
  return _react.createElement(
    _index.Box,
    {
      className: (0, _classnames.default)('iui-expandable-content', className),
      ref: forwardedRef,
      ...rest,
    },
    _react.createElement(_index.Box, innerProps, children),
  );
});
if ('development' === process.env.NODE_ENV)
  ExpandableBlockContent.displayName = 'ExpandableBlock.Content';
const ExpandableBlock = Object.assign(ExpandableBlockComponent, {
  Wrapper: ExpandableBlockWrapper,
  Trigger: ExpandableBlockTrigger,
  ExpandIcon: ExpandableBlockExpandIcon,
  LabelArea: ExpandableBlockLabelArea,
  Title: ExpandableBlockTitle,
  Caption: ExpandableBlockCaption,
  EndIcon: ExpandableBlockEndIcon,
  Content: ExpandableBlockContent,
});