@fluentui/react-northstar/dist/es/components/Alert/AlertDismissAction.js

A themable React component library.

import _extends from "@babel/runtime/helpers/esm/extends";
import _invoke from "lodash/invoke";
import _isEmpty from "lodash/isEmpty";
import { buttonBehavior } from '@fluentui/accessibility';
import * as PropTypes from 'prop-types';
import * as React from 'react';
import { childrenExist, createShorthandFactory, commonPropTypes, rtlTextContainer } from '../../utils';
import { getElementType, useAccessibility, useFluentContext, useStyles, useTelemetry, useUnhandledProps } from '@fluentui/react-bindings';
import { Box } from '../Box/Box';
export var alertDismissActionClassName = 'ui-alert__dismissaction';
export var alertDismissActionSlotClassNames = {
  content: alertDismissActionClassName + "__content"
};

/**
 * A AlertDismissAction allows users to customize the dismissAction slot  inside the Alert component.
 *
 * @accessibility
 * Implements [ARIA Button](https://www.w3.org/TR/wai-aria-practices-1.1/#button) design pattern.
 */
export var AlertDismissAction = /*#__PURE__*/function () {
  var AlertDismissAction = /*#__PURE__*/React.forwardRef(function (props, ref) {
    var context = useFluentContext();
    var _useTelemetry = useTelemetry(AlertDismissAction.displayName, context.telemetry),
      setStart = _useTelemetry.setStart,
      setEnd = _useTelemetry.setEnd;
    setStart();
    var accessibility = props.accessibility,
      as = props.as,
      children = props.children,
      className = props.className,
      content = props.content,
      disabled = props.disabled,
      design = props.design,
      styles = props.styles,
      variables = props.variables,
      danger = props.danger,
      warning = props.warning,
      info = props.info,
      success = props.success;
    var hasChildren = childrenExist(children);
    var hasContent = !!content && !_isEmpty(content);
    var getA11Props = useAccessibility(accessibility, {
      debugName: AlertDismissAction.displayName,
      mapPropsToBehavior: function mapPropsToBehavior() {
        return {
          as: String(as),
          disabled: disabled
        };
      },
      actionHandlers: {
        performClick: function performClick(event) {
          event.preventDefault();
          handleClick(event);
        }
      },
      rtl: context.rtl
    });
    var _useStyles = useStyles(AlertDismissAction.displayName, {
        className: alertDismissActionClassName,
        mapPropsToStyles: function mapPropsToStyles() {
          return {
            disabled: disabled,
            danger: danger,
            warning: warning,
            info: info,
            success: success,
            hasContent: hasContent || hasChildren
          };
        },
        mapPropsToInlineStyles: function mapPropsToInlineStyles() {
          return {
            className: className,
            design: design,
            styles: styles,
            variables: variables
          };
        },
        rtl: context.rtl
      }),
      classes = _useStyles.classes,
      resolvedStyles = _useStyles.styles;
    var unhandledProps = useUnhandledProps(AlertDismissAction.handledProps, props);
    var ElementType = getElementType(props);
    var handleClick = function handleClick(e) {
      if (disabled) {
        e.preventDefault();
        return;
      }
      _invoke(props, 'onClick', e, props);
    };
    var result = /*#__PURE__*/React.createElement(ElementType, _extends({}, rtlTextContainer.getAttributes({
      forElements: [children]
    }), getA11Props('root', Object.assign({
      onClick: handleClick,
      disabled: disabled,
      className: classes.root
    }, unhandledProps, {
      ref: ref
    }))), hasChildren ? children : Box.create(content, {
      defaultProps: function defaultProps() {
        return getA11Props('content', {
          as: 'span',
          className: alertDismissActionSlotClassNames.content,
          styles: resolvedStyles.content
        });
      }
    }));
    setEnd();
    return result;
  });
  AlertDismissAction.defaultProps = {
    as: 'button',
    accessibility: buttonBehavior,
    content: {}
  };
  AlertDismissAction.displayName = 'AlertDismissAction';
  AlertDismissAction.propTypes = Object.assign({}, commonPropTypes.createCommon({
    content: 'shorthand'
  }), {
    disabled: PropTypes.bool,
    danger: PropTypes.bool,
    warning: PropTypes.bool,
    info: PropTypes.bool,
    onClick: PropTypes.func,
    success: PropTypes.bool
  });
  AlertDismissAction.handledProps = Object.keys(AlertDismissAction.propTypes);
  AlertDismissAction.create = createShorthandFactory({
    Component: AlertDismissAction,
    mappedProp: 'content'
  });
  return AlertDismissAction;
}();
//# sourceMappingURL=AlertDismissAction.js.map