@atlaskit/inline-message 11.2.8 → 11.4.0

package/CHANGELOG.md

@@ -1,5 +1,27 @@
 # @atlaskit/inline-message
 
+## 11.4.0
+
+### Minor Changes
+
+- [`bcf29b33526`](https://bitbucket.org/atlassian/atlassian-frontend/commits/bcf29b33526) - Updates `@emotion/core` to `@emotion/react`; v10 to v11. There is no expected behavior change.
+
+### Patch Changes
+
+- Updated dependencies
+
+## 11.3.1
+
+### Patch Changes
+
+- [`8d4228767b0`](https://bitbucket.org/atlassian/atlassian-frontend/commits/8d4228767b0) - Upgrade Typescript from `4.2.4` to `4.3.5`.
+
+## 11.3.0
+
+### Minor Changes
+
+- [`38469010a1c`](https://bitbucket.org/atlassian/atlassian-frontend/commits/38469010a1c) - Replaces usage of the `type` prop with `appearance`.
+
 ## 11.2.8
 
 ### Patch Changes

package/dist/cjs/components/inline-message/index.js

@@ -13,7 +13,7 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
 
 var _react = require("react");
 
-var _core = require("@emotion/core");
+var _react2 = require("@emotion/react");
 
 var _customThemeButton = _interopRequireDefault(require("@atlaskit/button/custom-theme-button"));
 
@@ -32,22 +32,22 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
 /** @jsx jsx */
-var buttonContentsStyles = (0, _core.css)({
+var buttonContentsStyles = (0, _react2.css)({
   display: 'flex',
   alignItems: 'center',
   textDecoration: 'none'
 });
-var titleStyles = (0, _core.css)({
+var titleStyles = (0, _react2.css)({
   padding: "0 ".concat(_constants.itemSpacing, "px"),
   fontWeight: 500
 });
-var textStyles = (0, _core.css)({
+var textStyles = (0, _react2.css)({
   padding: "0 ".concat(_constants.itemSpacing, "px"),
   overflow: 'hidden',
   textOverflow: 'ellipsis',
   whiteSpace: 'nowrap'
 });
-var rootStyles = (0, _core.css)({
+var rootStyles = (0, _react2.css)({
   display: 'inline-block',
   maxWidth: '100%',
   '&:focus': {
@@ -126,6 +126,7 @@ var InlineMessage = function InlineMessage(_ref) {
       title = _ref$title === void 0 ? '' : _ref$title,
       _ref$type = _ref.type,
       type = _ref$type === void 0 ? 'connectivity' : _ref$type,
+      appearance = _ref.appearance,
       children = _ref.children,
       testId = _ref.testId,
       iconLabel = _ref.iconLabel;
@@ -144,34 +145,39 @@ var InlineMessage = function InlineMessage(_ref) {
     return setIsOpen(false);
   }, [setIsOpen]);
   var theme = (0, _components.useGlobalTheme)();
-  return (0, _core.jsx)("div", {
+
+  if (!appearance) {
+    appearance = type;
+  }
+
+  return (0, _react2.jsx)("div", {
     css: rootStyles,
     style: {
       '--icon-accent-color': iconColor({
-        appearance: type,
+        appearance: appearance,
         theme: theme
       })
     },
     "data-testid": testId
-  }, (0, _core.jsx)(_inlineDialog.default, {
+  }, (0, _react2.jsx)(_inlineDialog.default, {
     onClose: onCloseDialog,
     content: children,
     isOpen: isOpen,
     placement: placement,
     testId: testId && "".concat(testId, "--inline-dialog")
-  }, (0, _core.jsx)(_customThemeButton.default, {
+  }, (0, _react2.jsx)(_customThemeButton.default, {
     "data-ds--inline-message--button": true,
     appearance: "subtle-link",
     onClick: toggleDialog,
     spacing: "none",
     testId: testId && "".concat(testId, "--button")
-  }, (0, _core.jsx)("div", {
+  }, (0, _react2.jsx)("div", {
     css: buttonContentsStyles
-  }, (0, _core.jsx)(_messageIcon.default, {
+  }, (0, _react2.jsx)(_messageIcon.default, {
     isOpen: isOpen,
-    appearance: type,
+    appearance: appearance,
     label: iconLabel
-  }), title && (0, _core.jsx)("span", {
+  }), title && (0, _react2.jsx)("span", {
     style: {
       color: titleColor({
         theme: theme
@@ -179,7 +185,7 @@ var InlineMessage = function InlineMessage(_ref) {
     },
     css: titleStyles,
     "data-testid": testId && "".concat(testId, "--title")
-  }, title), secondaryText && (0, _core.jsx)("span", {
+  }, title), secondaryText && (0, _react2.jsx)("span", {
     style: {
       color: textColor({
         theme: theme

package/dist/cjs/components/message-icon/index.js

@@ -7,7 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-var _core = require("@emotion/core");
+var _react = require("@emotion/react");
 
 var colors = _interopRequireWildcard(require("@atlaskit/theme/colors"));
 
@@ -42,13 +42,13 @@ var iconColor = (0, _components.themed)('appearance', {
     dark: "var(--ds-icon-danger, ".concat(colors.R400, ")")
   }
 });
-var iconWrapperStyles = (0, _core.css)({
+var iconWrapperStyles = (0, _react.css)({
   display: 'flex',
   alignItems: 'center',
   flex: '0 0 auto',
   color: 'var(--icon-color)'
 });
-var iconColorStyles = (0, _core.css)({
+var iconColorStyles = (0, _react.css)({
   color: 'var(--icon-accent-color)'
 });
 /**
@@ -66,7 +66,7 @@ var SelectedIcon = function SelectedIcon(_ref) {
       SelectedIcon = _typesMapping$appeara.icon,
       defaultLabel = _typesMapping$appeara.defaultLabel;
   var theme = (0, _components.useGlobalTheme)();
-  return (0, _core.jsx)("span", {
+  return (0, _react.jsx)("span", {
     "data-ds--inline-message--icon": true,
     style: {
       '--icon-color': iconColor({
@@ -75,7 +75,7 @@ var SelectedIcon = function SelectedIcon(_ref) {
       })
     },
     css: [iconWrapperStyles, isOpen && iconColorStyles]
-  }, (0, _core.jsx)(SelectedIcon, {
+  }, (0, _react.jsx)(SelectedIcon, {
     testId: "inline-message-icon",
     label: label || defaultLabel,
     size: "medium"

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/inline-message",
-	"version": "11.2.8",
+	"version": "11.4.0",
 	"sideEffects": false
 }

package/dist/es2019/components/inline-message/index.js

@@ -1,6 +1,6 @@
 /** @jsx jsx */
 import { useCallback, useState } from 'react';
-import { css, jsx } from '@emotion/core';
+import { css, jsx } from '@emotion/react';
 import Button from '@atlaskit/button/custom-theme-button';
 import InlineDialog from '@atlaskit/inline-dialog';
 import * as colors from '@atlaskit/theme/colors';
@@ -97,6 +97,7 @@ const InlineMessage = ({
   secondaryText = '',
   title = '',
   type = 'connectivity',
+  appearance,
   children,
   testId,
   iconLabel
@@ -107,11 +108,16 @@ const InlineMessage = ({
   }, [setIsOpen]);
   const onCloseDialog = useCallback(() => setIsOpen(false), [setIsOpen]);
   const theme = useGlobalTheme();
+
+  if (!appearance) {
+    appearance = type;
+  }
+
   return jsx("div", {
     css: rootStyles,
     style: {
       '--icon-accent-color': iconColor({
-        appearance: type,
+        appearance: appearance,
         theme
       })
     },
@@ -132,7 +138,7 @@ const InlineMessage = ({
     css: buttonContentsStyles
   }, jsx(MessageIcon, {
     isOpen: isOpen,
-    appearance: type,
+    appearance: appearance,
     label: iconLabel
   }), title && jsx("span", {
     style: {

package/dist/es2019/components/message-icon/index.js

@@ -1,5 +1,5 @@
 /** @jsx jsx */
-import { css, jsx } from '@emotion/core';
+import { css, jsx } from '@emotion/react';
 import * as colors from '@atlaskit/theme/colors';
 import { themed, useGlobalTheme } from '@atlaskit/theme/components';
 import { typesMapping } from '../../constants';

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/inline-message",
-	"version": "11.2.8",
+	"version": "11.4.0",
 	"sideEffects": false
 }

package/dist/esm/components/inline-message/index.js

@@ -2,7 +2,7 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 
 /** @jsx jsx */
 import { useCallback, useState } from 'react';
-import { css, jsx } from '@emotion/core';
+import { css, jsx } from '@emotion/react';
 import Button from '@atlaskit/button/custom-theme-button';
 import InlineDialog from '@atlaskit/inline-dialog';
 import * as colors from '@atlaskit/theme/colors';
@@ -103,6 +103,7 @@ var InlineMessage = function InlineMessage(_ref) {
       title = _ref$title === void 0 ? '' : _ref$title,
       _ref$type = _ref.type,
       type = _ref$type === void 0 ? 'connectivity' : _ref$type,
+      appearance = _ref.appearance,
       children = _ref.children,
       testId = _ref.testId,
       iconLabel = _ref.iconLabel;
@@ -121,11 +122,16 @@ var InlineMessage = function InlineMessage(_ref) {
     return setIsOpen(false);
   }, [setIsOpen]);
   var theme = useGlobalTheme();
+
+  if (!appearance) {
+    appearance = type;
+  }
+
   return jsx("div", {
     css: rootStyles,
     style: {
       '--icon-accent-color': iconColor({
-        appearance: type,
+        appearance: appearance,
         theme: theme
       })
     },
@@ -146,7 +152,7 @@ var InlineMessage = function InlineMessage(_ref) {
     css: buttonContentsStyles
   }, jsx(MessageIcon, {
     isOpen: isOpen,
-    appearance: type,
+    appearance: appearance,
     label: iconLabel
   }), title && jsx("span", {
     style: {

package/dist/esm/components/message-icon/index.js

@@ -1,5 +1,5 @@
 /** @jsx jsx */
-import { css, jsx } from '@emotion/core';
+import { css, jsx } from '@emotion/react';
 import * as colors from '@atlaskit/theme/colors';
 import { themed, useGlobalTheme } from '@atlaskit/theme/components';
 import { typesMapping } from '../../constants';

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/inline-message",
-	"version": "11.2.8",
+	"version": "11.4.0",
 	"sideEffects": false
 }

package/dist/types/components/inline-message/index.d.ts

@@ -23,6 +23,12 @@ interface InlineMessageProps {
      * Set the icon to be used before the title. Options are: connectivity,
      * confirmation, info, warning, and error.
      */
+    appearance?: IconAppearance;
+    /**
+     * @deprecated Please avoid using this prop as we intend to remove the prop completely in a future release. See DSP-5207 for more information.
+     * Instead use the 'appearance' prop.
+     * Set the icon to be used before the title.
+     */
     type?: IconAppearance;
     /**
       A unique string that appears as a data attribute, `data-testid`,

package/package.json

@@ -1,11 +1,11 @@
 {
   "name": "@atlaskit/inline-message",
-  "version": "11.2.8",
+  "version": "11.4.0",
   "description": "An inline message lets users know when important information is available or when an action is required.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
   },
-  "repository": "https://bitbucket.org/atlassian/atlassian-frontend",
+  "repository": "https://bitbucket.org/atlassian/atlassian-frontend-mirror",
   "author": "Atlassian Pty Ltd",
   "license": "Apache-2.0",
   "main": "dist/cjs/index.js",
@@ -19,24 +19,26 @@
     "deprecatedAutoEntryPoints": true,
     "releaseModel": "scheduled",
     "website": {
-      "name": "Inline message"
+      "name": "Inline message",
+      "category": "Components"
     }
   },
   "dependencies": {
     "@atlaskit/button": "^16.3.0",
     "@atlaskit/icon": "^21.10.0",
-    "@atlaskit/inline-dialog": "^13.3.0",
-    "@atlaskit/theme": "^12.1.0",
+    "@atlaskit/inline-dialog": "^13.4.0",
+    "@atlaskit/theme": "^12.2.0",
     "@atlaskit/tokens": "^0.10.0",
     "@babel/runtime": "^7.0.0",
-    "@emotion/core": "^10.0.9"
+    "@emotion/react": "^11.7.1"
   },
   "peerDependencies": {
     "react": "^16.8.0"
   },
   "devDependencies": {
     "@atlaskit/docs": "*",
-    "@atlaskit/section-message": "^6.1.0",
+    "@atlaskit/ds-lib": "^2.0.1",
+    "@atlaskit/section-message": "^6.2.0",
     "@atlaskit/ssr": "*",
     "@atlaskit/visual-regression": "*",
     "@atlaskit/webdriver-runner": "*",
@@ -44,7 +46,7 @@
     "@testing-library/react": "^8.0.1",
     "enzyme": "^3.10.0",
     "react-dom": "^16.8.0",
-    "typescript": "4.2.4"
+    "typescript": "4.3.5"
   },
   "keywords": [
     "atlaskit",
@@ -56,6 +58,7 @@
       "import-structure": "atlassian-conventions"
     },
     "@repo/internal": {
+      "dom-events": "use-bind-event-listener",
       "design-system": "v1",
       "styling": [
         "static",

package/report.api.md

@@ -0,0 +1,100 @@
+## API Report File for "@atlaskit/inline-message"
+
+> Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/).
+
+````ts
+import { FC } from 'react';
+import { ReactNode } from 'react';
+
+declare type IconAppearance =
+  | 'connectivity'
+  | 'confirmation'
+  | 'info'
+  | 'warning'
+  | 'error';
+
+declare type InlineDialogPlacement =
+  | 'auto-start'
+  | 'auto'
+  | 'auto-end'
+  | 'top-start'
+  | 'top'
+  | 'top-end'
+  | 'right-start'
+  | 'right'
+  | 'right-end'
+  | 'bottom-end'
+  | 'bottom'
+  | 'bottom-start'
+  | 'left-end'
+  | 'left'
+  | 'left-start';
+
+/**
+ * __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>
+ * );
+ * ```
+ */
+declare const InlineMessage: FC<InlineMessageProps>;
+export default InlineMessage;
+
+declare interface InlineMessageProps {
+  /**
+   * The elements to be displayed by the inline dialog.
+   */
+  children?: ReactNode;
+  /**
+   * The placement to be passed to the inline dialog. Determines where around
+   * the text the dialog is displayed.
+   */
+  placement?: InlineDialogPlacement;
+  /**
+   * Text to display second.
+   */
+  secondaryText?: ReactNode;
+  /**
+   * Text to display first, bolded for emphasis.
+   */
+  title?: ReactNode;
+  /**
+   * Set the icon to be used before the title. Options are: connectivity,
+   * confirmation, info, warning, and error.
+   */
+  type?: IconAppearance;
+  /**
+     A unique string that appears as a data attribute, `data-testid`,
+     in the rendered code. It is provided to serve as a hook for automated tests.
+
+     The value of `testId` is attached to the different sub-components in Inline Message:
+     - `testId`: the top-level inline message component
+     - `testId--inline-dialog`: the content of the message
+     - `testId--button`: the button element that opens the dialog on press
+     - `testId--title`: the title of the message
+     - `testId--text`: the text of the message
+     */
+  testId?: string;
+  /**
+   * Text to be used as label for the button icon. Can be used to provide useful information for users with screen readers when there is no title and/or secondaryText
+   */
+  iconLabel?: string;
+}
+
+export {};
+````