@itwin/itwinui-react/DEV-esm/core/Alert/Alert.js

A react component library for iTwinUI

import cx from 'classnames';
import * as React from 'react';
import {
  useSafeContext,
  polymorphic,
  StatusIconMap,
  SvgCloseSmall,
  Box,
} from '../../utils/index.js';
import { IconButton } from '../Buttons/IconButton.js';
import { Icon } from '../Icon/Icon.js';
import { Anchor } from '../Typography/Anchor.js';
let AlertContext = React.createContext(void 0);
let AlertComponent = React.forwardRef((props, forwardedRef) => {
  let {
    children,
    type = 'informational',
    isSticky = false,
    clickableText,
    clickableTextProps,
    onClose,
    ...rest
  } = props;
  return React.createElement(
    Alert.Wrapper,
    {
      type: type,
      isSticky: isSticky,
      ref: forwardedRef,
      ...rest,
    },
    React.createElement(Alert.Icon, null),
    React.createElement(
      Alert.Message,
      null,
      children,
      clickableText
        ? React.createElement(Alert.Action, clickableTextProps, clickableText)
        : null,
    ),
    onClose
      ? React.createElement(Alert.CloseButton, {
          onClick: onClose,
        })
      : null,
  );
});
if ('development' === process.env.NODE_ENV)
  AlertComponent.displayName = 'Alert';
let AlertWrapper = React.forwardRef((props, ref) => {
  let {
    children,
    className,
    type = 'informational',
    isSticky = false,
    ...rest
  } = props;
  return React.createElement(
    Box,
    {
      className: cx('iui-alert', className),
      'data-iui-status': type,
      'data-iui-variant': isSticky ? 'sticky' : void 0,
      ref: ref,
      ...rest,
    },
    React.createElement(
      AlertContext.Provider,
      {
        value: {
          type,
        },
      },
      children,
    ),
  );
});
if ('development' === process.env.NODE_ENV)
  AlertWrapper.displayName = 'Alert.Wrapper';
let AlertIcon = React.forwardRef((props, ref) => {
  let { children, ...rest } = props;
  let { type } = useSafeContext(AlertContext);
  let StatusIcon = StatusIconMap[type];
  return React.createElement(
    Icon,
    {
      fill: type,
      ref: ref,
      ...rest,
    },
    children ?? React.createElement(StatusIcon, null),
  );
});
if ('development' === process.env.NODE_ENV)
  AlertIcon.displayName = 'Alert.Icon';
let AlertMessage = polymorphic.span('iui-alert-message');
if ('development' === process.env.NODE_ENV)
  AlertMessage.displayName = 'Alert.Message';
let AlertAction = React.forwardRef((props, ref) => {
  let { children, className, ...rest } = props;
  let { type } = useSafeContext(AlertContext);
  return React.createElement(
    Anchor,
    {
      as: props.href ? 'a' : 'button',
      className: cx('iui-button-base', 'iui-alert-link', className),
      underline: true,
      'data-iui-status': type,
      ref: ref,
      ...rest,
    },
    children,
  );
});
if ('development' === process.env.NODE_ENV)
  AlertAction.displayName = 'Alert.Action';
let AlertCloseButton = React.forwardRef((props, ref) => {
  let { children, ...rest } = props;
  return React.createElement(
    IconButton,
    {
      styleType: 'borderless',
      size: 'small',
      'aria-label': 'Close',
      ref: ref,
      ...rest,
    },
    children ?? React.createElement(SvgCloseSmall, null),
  );
});
if ('development' === process.env.NODE_ENV)
  AlertCloseButton.displayName = 'Alert.CloseButton';
export const Alert = Object.assign(AlertComponent, {
  Wrapper: AlertWrapper,
  Icon: AlertIcon,
  Message: AlertMessage,
  Action: AlertAction,
  CloseButton: AlertCloseButton,
});