@atlaskit/inline-message/dist/esm/components/inline-message/index.js

An inline message lets users know when important information is available or when an action is required.

/* index.tsx generated by @compiled/babel-plugin v0.39.1 */
import _extends from "@babel/runtime/helpers/extends";
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
var _excluded = ["ref"];
import "./index.compiled.css";
import * as React from 'react';
import { ax, ix } from "@compiled/react/runtime";
import { useCallback, useState } from 'react';
import { useId } from '@atlaskit/ds-lib/use-id';
import Popup from '@atlaskit/popup';
import { Box, Inline, Pressable, Text } from '@atlaskit/primitives/compiled';
import MessageIcon from '../message-icon';
var styles = {
  contentStyles: "_1reo1wug _18m91wug _bozg1ejb _y4ti1ejb _1q51pxbi _85i5pxbi _p12flti4 _c71llti4",
  rootStyles: "_1e0c1o8l _p12f1osq _1yyu1kum _y2mv1w7i",
  pressableStyles: "_2rko1qi0 _11c8fhey _1rjcze3t _18zrze3t _1e0c116y _bfhksm61 _syazazsu _o5721q9c _kqswh2mm _4cvr1q9y _p12f1osq _4t3i1wug _1bsb1wug _s7n41q9y _9oik1r31 _1bnx8stv _jf4cnqa1"
};
var iconColor = {
  connectivity: "_x5v91ft0",
  confirmation: "_x5v94pcx",
  info: "_x5v9qm1h",
  warning: "_x5v9ervl",
  error: "_x5v9s4qr"
};

/**
 * __Inline message__
 *
 * An inline message lets users know when important information is available or when an action is required.
 *
 * - [Examples](https://atlassian.design/components/inline-message/examples)
 * - [Code](https://atlassian.design/components/inline-message/code)
 * - [Usage](https://atlassian.design/components/inline-message/usage)
 *
 * @example
 *
 * ```jsx
 * const Component = () => (
 *   <InlineMessage
 *    title="Inline Message Title Example"
 *    secondaryText="Secondary Text"
 *   >
 *    <p>Some text that would be inside the open dialog and otherwise hidden.</p>
 *   </InlineMessage>
 * );
 * ```
 */
var InlineMessage = function InlineMessage(_ref) {
  var _ref$placement = _ref.placement,
    placement = _ref$placement === void 0 ? 'bottom-start' : _ref$placement,
    _ref$secondaryText = _ref.secondaryText,
    secondaryText = _ref$secondaryText === void 0 ? '' : _ref$secondaryText,
    _ref$title = _ref.title,
    title = _ref$title === void 0 ? '' : _ref$title,
    _ref$appearance = _ref.appearance,
    appearance = _ref$appearance === void 0 ? 'connectivity' : _ref$appearance,
    _ref$spacing = _ref.spacing,
    spacing = _ref$spacing === void 0 ? 'spacious' : _ref$spacing,
    children = _ref.children,
    testId = _ref.testId,
    iconLabel = _ref.iconLabel,
    fallbackPlacements = _ref.fallbackPlacements;
  var _useState = useState(false),
    _useState2 = _slicedToArray(_useState, 2),
    isOpen = _useState2[0],
    setIsOpen = _useState2[1];
  var id = useId();
  var toggleDialog = useCallback(function () {
    setIsOpen(function (oldState) {
      return !oldState;
    });
  }, [setIsOpen]);
  var onCloseDialog = useCallback(function () {
    return setIsOpen(false);
  }, [setIsOpen]);
  return /*#__PURE__*/React.createElement("div", {
    "data-testid": testId,
    className: ax([styles.rootStyles, iconColor[appearance]])
  }, /*#__PURE__*/React.createElement(Popup, {
    onClose: onCloseDialog,
    content: function content() {
      return /*#__PURE__*/React.createElement(Box, {
        xcss: styles.contentStyles
      }, children);
    },
    isOpen: isOpen,
    placement: placement,
    testId: testId && "".concat(testId, "--popup"),
    fallbackPlacements: fallbackPlacements,
    shouldRenderToParent: true,
    role: "dialog",
    titleId: id,
    trigger: function trigger(_ref2) {
      var ref = _ref2.ref,
        triggerProps = _objectWithoutProperties(_ref2, _excluded);
      return /*#__PURE__*/React.createElement(Pressable, _extends({}, triggerProps, {
        ref: ref,
        id: id,
        "data-ds--inline-message--button": true,
        onClick: toggleDialog,
        testId: testId && "".concat(testId, "--button"),
        xcss: styles.pressableStyles,
        "aria-expanded": isOpen
      }), /*#__PURE__*/React.createElement(Inline, {
        as: "span",
        space: "space.050",
        alignBlock: "center"
      }, /*#__PURE__*/React.createElement(MessageIcon, {
        isOpen: isOpen,
        appearance: appearance,
        label: iconLabel,
        spacing: spacing
      }), /*#__PURE__*/React.createElement(Inline, {
        as: "span",
        space: "space.100"
      }, title && /*#__PURE__*/React.createElement(Text, {
        weight: "medium",
        testId: testId && "".concat(testId, "--title")
      }, title), secondaryText && /*#__PURE__*/React.createElement(Text, {
        weight: "medium",
        color: "color.text.subtlest",
        maxLines: 1,
        testId: testId && "".concat(testId, "--text")
      }, secondaryText))));
    }
  }));
};
export default InlineMessage;