@atlaskit/inline-message 11.3.1 → 11.4.1

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @atlaskit/inline-message
 
+## 11.4.1
+
+### Patch Changes
+
+- [`8cc2f888c83`](https://bitbucket.org/atlassian/atlassian-frontend/commits/8cc2f888c83) - Upgrade Typescript from `4.3.5` to `4.5.5`
+
+## 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

package/constants/package.json

@@ -4,5 +4,12 @@
   "module": "../dist/esm/constants.js",
   "module:es2019": "../dist/es2019/constants.js",
   "sideEffects": false,
-  "types": "../dist/types/constants.d.ts"
+  "types": "../dist/types/constants.d.ts",
+  "typesVersions": {
+    ">=4.0 <4.5": {
+      "*": [
+        "../dist/types-ts4.0/constants.d.ts"
+      ]
+    }
+  }
 }

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': {
@@ -150,7 +150,7 @@ var InlineMessage = function InlineMessage(_ref) {
     appearance = type;
   }
 
-  return (0, _core.jsx)("div", {
+  return (0, _react2.jsx)("div", {
     css: rootStyles,
     style: {
       '--icon-accent-color': iconColor({
@@ -159,25 +159,25 @@ var InlineMessage = function InlineMessage(_ref) {
       })
     },
     "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: appearance,
     label: iconLabel
-  }), title && (0, _core.jsx)("span", {
+  }), title && (0, _react2.jsx)("span", {
     style: {
       color: titleColor({
         theme: theme
@@ -185,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.3.1",
+	"version": "11.4.1",
 	"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';

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.3.1",
+	"version": "11.4.1",
 	"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';

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.3.1",
+	"version": "11.4.1",
 	"sideEffects": false
 }

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

@@ -0,0 +1,73 @@
+/** @jsx jsx */
+import { FC, ReactNode } from 'react';
+import type { IconAppearance, InlineDialogPlacement } from '../../types';
+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.
+     */
+    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`,
+      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;
+}
+/**
+ * __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;

package/dist/types-ts4.0/components/message-icon/index.d.ts

@@ -0,0 +1,16 @@
+/** @jsx jsx */
+import type { FC } from 'react';
+import type { IconAppearance } from '../../types';
+interface MessageIconProps {
+    appearance: IconAppearance;
+    isOpen: boolean;
+    label?: string;
+}
+/**
+ * __Selected icon__
+ *
+ * The selected icon is used as the primary interactive element for the dialog.
+ * Can be used with or without supporting text.
+ */
+declare const SelectedIcon: FC<MessageIconProps>;
+export default SelectedIcon;

package/dist/types-ts4.0/constants.d.ts

@@ -0,0 +1,3 @@
+import type { IconAppearanceMap } from './types';
+export declare const itemSpacing: number;
+export declare const typesMapping: IconAppearanceMap;

package/dist/types-ts4.0/index.d.ts

@@ -0,0 +1 @@
+export { default } from './components/inline-message';

package/dist/types-ts4.0/types.d.ts

@@ -0,0 +1,9 @@
+import { ComponentType } from 'react';
+import type { GlyphProps } from '@atlaskit/icon';
+export interface Icon {
+    defaultLabel: string;
+    icon: ComponentType<GlyphProps>;
+}
+export declare type IconAppearanceMap = Record<IconAppearance, Icon>;
+export declare type IconAppearance = 'connectivity' | 'confirmation' | 'info' | 'warning' | 'error';
+export 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';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/inline-message",
-  "version": "11.3.1",
+  "version": "11.4.1",
   "description": "An inline message lets users know when important information is available or when an action is required.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -12,6 +12,13 @@
   "module": "dist/esm/index.js",
   "module:es2019": "dist/es2019/index.js",
   "types": "dist/types/index.d.ts",
+  "typesVersions": {
+    ">=4.0 <4.5": {
+      "*": [
+        "dist/types-ts4.0/*"
+      ]
+    }
+  },
   "sideEffects": false,
   "atlaskit:src": "src/index.tsx",
   "atlassian": {
@@ -26,26 +33,27 @@
   "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": "*",
     "@atlassian/atlassian-frontend-prettier-config-1.0.1": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.1",
-    "@testing-library/react": "^8.0.1",
+    "@testing-library/react": "^12.1.5",
     "enzyme": "^3.10.0",
     "react-dom": "^16.8.0",
-    "typescript": "4.3.5"
+    "typescript": "4.5.5"
   },
   "keywords": [
     "atlaskit",

package/types/package.json

@@ -4,5 +4,12 @@
   "module": "../dist/esm/types.js",
   "module:es2019": "../dist/es2019/types.js",
   "sideEffects": false,
-  "types": "../dist/types/types.d.ts"
+  "types": "../dist/types/types.d.ts",
+  "typesVersions": {
+    ">=4.0 <4.5": {
+      "*": [
+        "../dist/types-ts4.0/types.d.ts"
+      ]
+    }
+  }
 }