@atlaskit/flag 14.5.8 → 14.6.1

package/CHANGELOG.md

@@ -1,5 +1,29 @@
 # @atlaskit/flag
 
+## 14.6.1
+
+### Patch Changes
+
+- [`45ebe7af434`](https://bitbucket.org/atlassian/atlassian-frontend/commits/45ebe7af434) - Moved to using declarative entrypoints internally. Public API is unchanged.
+- Updated dependencies
+
+## 14.6.0
+
+### Minor Changes
+
+- [`379b0a864df`](https://bitbucket.org/atlassian/atlassian-frontend/commits/379b0a864df) - [ux] Remove truncation of titles and wrap text instead. Very slightly changed title text positioning.
+
+### Patch Changes
+
+- [`f16146d83ff`](https://bitbucket.org/atlassian/atlassian-frontend/commits/f16146d83ff) - [ux] Fix cross icon positioning
+- Updated dependencies
+
+## 14.5.9
+
+### Patch Changes
+
+- [`2329b0e8cc0`](https://bitbucket.org/atlassian/atlassian-frontend/commits/2329b0e8cc0) - [ux] DSP-4541 Update wrongly used tokens
+
 ## 14.5.8
 
 ### Patch Changes

package/dist/cjs/auto-dismiss-flag.js

@@ -26,7 +26,7 @@ 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; }
 
 var packageName = "@atlaskit/flag";
-var packageVersion = "14.5.8";
+var packageVersion = "14.6.1";
 var AUTO_DISMISS_SECONDS = 8;
 exports.AUTO_DISMISS_SECONDS = AUTO_DISMISS_SECONDS;
 

package/dist/cjs/flag.js

@@ -44,15 +44,19 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 var analyticsAttributes = {
   componentName: 'flag',
   packageName: "@atlaskit/flag",
-  packageVersion: "14.5.8"
+  packageVersion: "14.6.1"
 };
 var gridSize = (0, _constants.gridSize)();
 var doubleGridSize = gridSize * 2;
-var headerHeight = gridSize * 4;
-var iconStyles = (0, _core.css)({
+var titleGroupStyles = (0, _core.css)({
   display: 'flex',
-  height: headerHeight,
-  alignItems: 'center'
+  alignItems: 'start'
+});
+var iconTitleStyles = (0, _core.css)({
+  display: 'flex',
+  paddingTop: "".concat(gridSize / 2, "px"),
+  alignItems: 'start',
+  flex: 1
 });
 var flagHeaderStyles = (0, _core.css)({
   boxSizing: 'border-box',
@@ -140,12 +144,14 @@ var Flag = function Flag(props) {
     onMouseOut: onMouseOut,
     onBlur: onBlurAnalytics
   };
-  var boxShadow = "var(--ds-shadow-overlay, ".concat("0 20px 32px -8px ".concat(_theme.flagShadowColor), ")");
+  var boxShadowValue = "0 20px 32px -8px ".concat(_theme.flagShadowColor);
 
   if (!isBold) {
-    boxShadow = "var(--ds-shadow-overlay, ".concat("0 0 1px ".concat(_theme.flagBorderColor, ", ").concat(boxShadow), ")");
+    boxShadowValue = "0 0 1px ".concat(_theme.flagBorderColor, ", ").concat(boxShadowValue);
   }
 
+  var boxShadow = "var(--ds-shadow-overlay, ".concat(boxShadowValue, ")");
+
   var _useGlobalTheme = (0, _components.useGlobalTheme)(),
       mode = _useGlobalTheme.mode;
 
@@ -169,10 +175,12 @@ var Flag = function Flag(props) {
     style: {
       color: iconColor
     },
-    css: iconStyles
+    css: titleGroupStyles
+  }, (0, _core.jsx)("div", {
+    css: iconTitleStyles
   }, icon, (0, _core.jsx)(_internal.Title, {
     color: textColor
-  }, title), isDismissable ? !(isBold && !description && !actions.length) && (0, _core.jsx)(_internal.DismissButton, {
+  }, title)), isDismissable ? !(isBold && !description && !actions.length) && (0, _core.jsx)(_internal.DismissButton, {
     testId: testId,
     appearance: appearance,
     isBold: isBold,
@@ -183,7 +191,8 @@ var Flag = function Flag(props) {
     testId: testId
   }, description && (0, _core.jsx)(_internal.Description, {
     testId: testId && "".concat(testId, "-description"),
-    color: textColor
+    color: textColor,
+    isBold: isBold
   }, description), (0, _core.jsx)(_flagActions.default, {
     actions: actions,
     appearance: appearance,

package/dist/cjs/internal/description.js

@@ -9,8 +9,8 @@ var _core = require("@emotion/core");
 
 /** @jsx jsx */
 var descriptionStyles = (0, _core.css)({
-  /* height is defined as 5 lines maximum by design */
   maxHeight: 100,
+  // height is defined as 5 lines maximum by design
   overflow: 'auto',
   wordWrap: 'break-word'
 });
@@ -18,12 +18,13 @@ var descriptionStyles = (0, _core.css)({
 var Description = function Description(_ref) {
   var color = _ref.color,
       testId = _ref.testId,
-      children = _ref.children;
+      children = _ref.children,
+      isBold = _ref.isBold;
   return (0, _core.jsx)("div", {
     style: {
       color: color
     },
-    css: descriptionStyles,
+    css: [descriptionStyles],
     "data-testid": testId
   }, children);
 };

package/dist/cjs/internal/dismiss-button.js

@@ -40,6 +40,9 @@ var dismissButtonStyles = (0, _core.css)({
   lineHeight: '1',
   whiteSpace: 'nowrap'
 });
+var crossIconStyles = (0, _core.css)({
+  paddingTop: "".concat(gridSize, "px")
+});
 
 var DismissButton = function DismissButton(_ref) {
   var appearance = _ref.appearance,
@@ -67,7 +70,7 @@ var DismissButton = function DismissButton(_ref) {
     style: {
       color: (0, _theme.getFlagTextColor)(appearance, mode)
     },
-    css: dismissButtonStyles,
+    css: [dismissButtonStyles, !isBold && crossIconStyles],
     onClick: onClick,
     "data-testid": buttonTestId,
     type: "button",

package/dist/cjs/internal/expander.js

@@ -12,7 +12,8 @@ var _motion = require("@atlaskit/motion");
 var _constants = require("@atlaskit/theme/constants");
 
 /** @jsx jsx */
-var paddingLeft = (0, _constants.gridSize)() * 5;
+var gridSize = (0, _constants.gridSize)();
+var paddingLeft = gridSize * 5;
 var expanderStyles = (0, _core.css)({
   display: 'flex',
   minWidth: 0,

package/dist/cjs/internal/title.js

@@ -9,12 +9,9 @@ var _core = require("@emotion/core");
 
 /** @jsx jsx */
 var titleStyles = (0, _core.css)({
-  padding: "0 0 0 16px",
+  padding: "2px 0 6px 16px",
   flex: 1,
-  fontWeight: 600,
-  overflow: 'hidden',
-  textOverflow: 'ellipsis',
-  whiteSpace: 'nowrap'
+  fontWeight: 600
 });
 
 var Title = function Title(_ref) {

package/dist/cjs/theme.js

@@ -32,11 +32,18 @@ var flagBackgroundColor = {
 
 var getFlagBackgroundColor = function getFlagBackgroundColor(appearance, mode) {
   return flagBackgroundColor[appearance][mode];
-};
+}; // token set in flag.tsx instead
+
+/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
+
 
 exports.getFlagBackgroundColor = getFlagBackgroundColor;
-var flagBorderColor = "var(--ds-surface-overlay, ".concat(_colors.N60A, ")");
+var flagBorderColor = _colors.N60A;
 exports.flagBorderColor = flagBorderColor;
+var flagShadowColor = _colors.N50A;
+/* eslint-enable @atlaskit/design-system/ensure-design-token-usage */
+
+exports.flagShadowColor = flagShadowColor;
 var flagIconColor = {
   error: {
     light: "var(--ds-icon-inverse, ".concat(_colors.N0, ")"),
@@ -90,13 +97,9 @@ exports.getFlagTextColor = getFlagTextColor;
 
 var getFlagIconColor = function getFlagIconColor(appearance, mode) {
   return flagIconColor[appearance][mode];
-}; // token set in flag.tsx instead
-// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
-
+};
 
 exports.getFlagIconColor = getFlagIconColor;
-var flagShadowColor = _colors.N50A;
-exports.flagShadowColor = flagShadowColor;
 var flagFocusRingColor = {
   error: {
     light: "var(--ds-border-focused, ".concat(_colors.N40, ")"),

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/flag",
-	"version": "14.5.8",
+	"version": "14.6.1",
 	"sideEffects": false
 }

package/dist/es2019/auto-dismiss-flag.js

@@ -5,7 +5,7 @@ import noop from '@atlaskit/ds-lib/noop';
 import Flag from './flag';
 import { useFlagGroup } from './flag-group';
 const packageName = "@atlaskit/flag";
-const packageVersion = "14.5.8";
+const packageVersion = "14.6.1";
 export const AUTO_DISMISS_SECONDS = 8;
 
 const AutoDismissFlag = props => {

package/dist/es2019/flag.js

@@ -16,15 +16,19 @@ import { Title, Description, Expander, DismissButton } from './internal';
 const analyticsAttributes = {
   componentName: 'flag',
   packageName: "@atlaskit/flag",
-  packageVersion: "14.5.8"
+  packageVersion: "14.6.1"
 };
 const gridSize = getGridSize();
 const doubleGridSize = gridSize * 2;
-const headerHeight = gridSize * 4;
-const iconStyles = css({
+const titleGroupStyles = css({
   display: 'flex',
-  height: headerHeight,
-  alignItems: 'center'
+  alignItems: 'start'
+});
+const iconTitleStyles = css({
+  display: 'flex',
+  paddingTop: `${gridSize / 2}px`,
+  alignItems: 'start',
+  flex: 1
 });
 const flagHeaderStyles = css({
   boxSizing: 'border-box',
@@ -104,12 +108,13 @@ const Flag = props => {
     onMouseOut,
     onBlur: onBlurAnalytics
   };
-  let boxShadow = `var(--ds-shadow-overlay, ${`0 20px 32px -8px ${flagShadowColor}`})`;
+  let boxShadowValue = `0 20px 32px -8px ${flagShadowColor}`;
 
   if (!isBold) {
-    boxShadow = `var(--ds-shadow-overlay, ${`0 0 1px ${flagBorderColor}, ${boxShadow}`})`;
+    boxShadowValue = `0 0 1px ${flagBorderColor}, ${boxShadowValue}`;
   }
 
+  const boxShadow = `var(--ds-shadow-overlay, ${boxShadowValue})`;
   const {
     mode
   } = useGlobalTheme();
@@ -133,10 +138,12 @@ const Flag = props => {
     style: {
       color: iconColor
     },
-    css: iconStyles
+    css: titleGroupStyles
+  }, jsx("div", {
+    css: iconTitleStyles
   }, icon, jsx(Title, {
     color: textColor
-  }, title), isDismissable ? !(isBold && !description && !actions.length) && jsx(DismissButton, {
+  }, title)), isDismissable ? !(isBold && !description && !actions.length) && jsx(DismissButton, {
     testId: testId,
     appearance: appearance,
     isBold: isBold,
@@ -147,7 +154,8 @@ const Flag = props => {
     testId: testId
   }, description && jsx(Description, {
     testId: testId && `${testId}-description`,
-    color: textColor
+    color: textColor,
+    isBold: isBold
   }, description), jsx(Actions, {
     actions: actions,
     appearance: appearance,

package/dist/es2019/internal/description.js

@@ -1,8 +1,8 @@
 /** @jsx jsx */
 import { jsx, css } from '@emotion/core';
 const descriptionStyles = css({
-  /* height is defined as 5 lines maximum by design */
   maxHeight: 100,
+  // height is defined as 5 lines maximum by design
   overflow: 'auto',
   wordWrap: 'break-word'
 });
@@ -10,12 +10,13 @@ const descriptionStyles = css({
 const Description = ({
   color,
   testId,
-  children
+  children,
+  isBold
 }) => jsx("div", {
   style: {
     color
   },
-  css: descriptionStyles,
+  css: [descriptionStyles],
   "data-testid": testId
 }, children);
 

package/dist/es2019/internal/dismiss-button.js

@@ -22,6 +22,9 @@ const dismissButtonStyles = css({
   lineHeight: '1',
   whiteSpace: 'nowrap'
 });
+const crossIconStyles = css({
+  paddingTop: `${gridSize}px`
+});
 
 const DismissButton = ({
   appearance,
@@ -49,7 +52,7 @@ const DismissButton = ({
     style: {
       color: getFlagTextColor(appearance, mode)
     },
-    css: dismissButtonStyles,
+    css: [dismissButtonStyles, !isBold && crossIconStyles],
     onClick: onClick,
     "data-testid": buttonTestId,
     type: "button",

package/dist/es2019/internal/expander.js

@@ -1,8 +1,9 @@
 /** @jsx jsx */
 import { css, jsx } from '@emotion/core';
 import { ExitingPersistence, FadeIn } from '@atlaskit/motion';
-import { gridSize } from '@atlaskit/theme/constants';
-const paddingLeft = gridSize() * 5;
+import { gridSize as getGridSize } from '@atlaskit/theme/constants';
+const gridSize = getGridSize();
+const paddingLeft = gridSize * 5;
 const expanderStyles = css({
   display: 'flex',
   minWidth: 0,

package/dist/es2019/internal/title.js

@@ -1,12 +1,9 @@
 /** @jsx jsx */
 import { jsx, css } from '@emotion/core';
 const titleStyles = css({
-  padding: `0 0 0 16px`,
+  padding: `2px 0 6px 16px`,
   flex: 1,
-  fontWeight: 600,
-  overflow: 'hidden',
-  textOverflow: 'ellipsis',
-  whiteSpace: 'nowrap'
+  fontWeight: 600
 });
 
 const Title = ({

package/dist/es2019/theme.js

@@ -21,8 +21,14 @@ const flagBackgroundColor = {
     dark: `var(--ds-background-warning-bold, ${Y300})`
   }
 };
-export const getFlagBackgroundColor = (appearance, mode) => flagBackgroundColor[appearance][mode];
-export const flagBorderColor = `var(--ds-surface-overlay, ${N60A})`;
+export const getFlagBackgroundColor = (appearance, mode) => flagBackgroundColor[appearance][mode]; // token set in flag.tsx instead
+
+/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
+
+export const flagBorderColor = N60A;
+export const flagShadowColor = N50A;
+/* eslint-enable @atlaskit/design-system/ensure-design-token-usage */
+
 const flagIconColor = {
   error: {
     light: `var(--ds-icon-inverse, ${N0})`,
@@ -68,10 +74,7 @@ const flagTextColor = {
   }
 };
 export const getFlagTextColor = (appearance, mode) => flagTextColor[appearance][mode];
-export const getFlagIconColor = (appearance, mode) => flagIconColor[appearance][mode]; // token set in flag.tsx instead
-// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
-
-export const flagShadowColor = N50A;
+export const getFlagIconColor = (appearance, mode) => flagIconColor[appearance][mode];
 const flagFocusRingColor = {
   error: {
     light: `var(--ds-border-focused, ${N40})`,

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/flag",
-	"version": "14.5.8",
+	"version": "14.6.1",
 	"sideEffects": false
 }

package/dist/esm/auto-dismiss-flag.js

@@ -5,7 +5,7 @@ import noop from '@atlaskit/ds-lib/noop';
 import Flag from './flag';
 import { useFlagGroup } from './flag-group';
 var packageName = "@atlaskit/flag";
-var packageVersion = "14.5.8";
+var packageVersion = "14.6.1";
 export var AUTO_DISMISS_SECONDS = 8;
 
 var AutoDismissFlag = function AutoDismissFlag(props) {

package/dist/esm/flag.js

@@ -22,15 +22,19 @@ import { Title, Description, Expander, DismissButton } from './internal';
 var analyticsAttributes = {
   componentName: 'flag',
   packageName: "@atlaskit/flag",
-  packageVersion: "14.5.8"
+  packageVersion: "14.6.1"
 };
 var gridSize = getGridSize();
 var doubleGridSize = gridSize * 2;
-var headerHeight = gridSize * 4;
-var iconStyles = css({
+var titleGroupStyles = css({
   display: 'flex',
-  height: headerHeight,
-  alignItems: 'center'
+  alignItems: 'start'
+});
+var iconTitleStyles = css({
+  display: 'flex',
+  paddingTop: "".concat(gridSize / 2, "px"),
+  alignItems: 'start',
+  flex: 1
 });
 var flagHeaderStyles = css({
   boxSizing: 'border-box',
@@ -118,12 +122,14 @@ var Flag = function Flag(props) {
     onMouseOut: onMouseOut,
     onBlur: onBlurAnalytics
   };
-  var boxShadow = "var(--ds-shadow-overlay, ".concat("0 20px 32px -8px ".concat(flagShadowColor), ")");
+  var boxShadowValue = "0 20px 32px -8px ".concat(flagShadowColor);
 
   if (!isBold) {
-    boxShadow = "var(--ds-shadow-overlay, ".concat("0 0 1px ".concat(flagBorderColor, ", ").concat(boxShadow), ")");
+    boxShadowValue = "0 0 1px ".concat(flagBorderColor, ", ").concat(boxShadowValue);
   }
 
+  var boxShadow = "var(--ds-shadow-overlay, ".concat(boxShadowValue, ")");
+
   var _useGlobalTheme = useGlobalTheme(),
       mode = _useGlobalTheme.mode;
 
@@ -147,10 +153,12 @@ var Flag = function Flag(props) {
     style: {
       color: iconColor
     },
-    css: iconStyles
+    css: titleGroupStyles
+  }, jsx("div", {
+    css: iconTitleStyles
   }, icon, jsx(Title, {
     color: textColor
-  }, title), isDismissable ? !(isBold && !description && !actions.length) && jsx(DismissButton, {
+  }, title)), isDismissable ? !(isBold && !description && !actions.length) && jsx(DismissButton, {
     testId: testId,
     appearance: appearance,
     isBold: isBold,
@@ -161,7 +169,8 @@ var Flag = function Flag(props) {
     testId: testId
   }, description && jsx(Description, {
     testId: testId && "".concat(testId, "-description"),
-    color: textColor
+    color: textColor,
+    isBold: isBold
   }, description), jsx(Actions, {
     actions: actions,
     appearance: appearance,

package/dist/esm/internal/description.js

@@ -1,8 +1,8 @@
 /** @jsx jsx */
 import { jsx, css } from '@emotion/core';
 var descriptionStyles = css({
-  /* height is defined as 5 lines maximum by design */
   maxHeight: 100,
+  // height is defined as 5 lines maximum by design
   overflow: 'auto',
   wordWrap: 'break-word'
 });
@@ -10,12 +10,13 @@ var descriptionStyles = css({
 var Description = function Description(_ref) {
   var color = _ref.color,
       testId = _ref.testId,
-      children = _ref.children;
+      children = _ref.children,
+      isBold = _ref.isBold;
   return jsx("div", {
     style: {
       color: color
     },
-    css: descriptionStyles,
+    css: [descriptionStyles],
     "data-testid": testId
   }, children);
 };

package/dist/esm/internal/dismiss-button.js

@@ -22,6 +22,9 @@ var dismissButtonStyles = css({
   lineHeight: '1',
   whiteSpace: 'nowrap'
 });
+var crossIconStyles = css({
+  paddingTop: "".concat(gridSize, "px")
+});
 
 var DismissButton = function DismissButton(_ref) {
   var appearance = _ref.appearance,
@@ -49,7 +52,7 @@ var DismissButton = function DismissButton(_ref) {
     style: {
       color: getFlagTextColor(appearance, mode)
     },
-    css: dismissButtonStyles,
+    css: [dismissButtonStyles, !isBold && crossIconStyles],
     onClick: onClick,
     "data-testid": buttonTestId,
     type: "button",

package/dist/esm/internal/expander.js

@@ -1,8 +1,9 @@
 /** @jsx jsx */
 import { css, jsx } from '@emotion/core';
 import { ExitingPersistence, FadeIn } from '@atlaskit/motion';
-import { gridSize } from '@atlaskit/theme/constants';
-var paddingLeft = gridSize() * 5;
+import { gridSize as getGridSize } from '@atlaskit/theme/constants';
+var gridSize = getGridSize();
+var paddingLeft = gridSize * 5;
 var expanderStyles = css({
   display: 'flex',
   minWidth: 0,

package/dist/esm/internal/title.js

@@ -1,12 +1,9 @@
 /** @jsx jsx */
 import { jsx, css } from '@emotion/core';
 var titleStyles = css({
-  padding: "0 0 0 16px",
+  padding: "2px 0 6px 16px",
   flex: 1,
-  fontWeight: 600,
-  overflow: 'hidden',
-  textOverflow: 'ellipsis',
-  whiteSpace: 'nowrap'
+  fontWeight: 600
 });
 
 var Title = function Title(_ref) {

package/dist/esm/theme.js

@@ -23,8 +23,14 @@ var flagBackgroundColor = {
 };
 export var getFlagBackgroundColor = function getFlagBackgroundColor(appearance, mode) {
   return flagBackgroundColor[appearance][mode];
-};
-export var flagBorderColor = "var(--ds-surface-overlay, ".concat(N60A, ")");
+}; // token set in flag.tsx instead
+
+/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
+
+export var flagBorderColor = N60A;
+export var flagShadowColor = N50A;
+/* eslint-enable @atlaskit/design-system/ensure-design-token-usage */
+
 var flagIconColor = {
   error: {
     light: "var(--ds-icon-inverse, ".concat(N0, ")"),
@@ -74,10 +80,7 @@ export var getFlagTextColor = function getFlagTextColor(appearance, mode) {
 };
 export var getFlagIconColor = function getFlagIconColor(appearance, mode) {
   return flagIconColor[appearance][mode];
-}; // token set in flag.tsx instead
-// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
-
-export var flagShadowColor = N50A;
+};
 var flagFocusRingColor = {
   error: {
     light: "var(--ds-border-focused, ".concat(N40, ")"),

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/flag",
-	"version": "14.5.8",
+	"version": "14.6.1",
 	"sideEffects": false
 }

package/dist/types/internal/description.d.ts

@@ -2,6 +2,7 @@ import { FC } from 'react';
 interface DescriptionProps {
     testId?: string;
     color: string;
+    isBold: boolean;
 }
 declare const Description: FC<DescriptionProps>;
 export default Description;

package/dist/types/theme.d.ts

@@ -1,10 +1,10 @@
 import { ThemeModes } from '@atlaskit/theme/types';
 import { AppearanceTypes } from './types';
 export declare const getFlagBackgroundColor: (appearance: AppearanceTypes, mode: ThemeModes) => string;
-export declare const flagBorderColor: "var(--ds-surface-overlay)";
+export declare const flagBorderColor = "rgba(9, 30, 66, 0.31)";
+export declare const flagShadowColor = "rgba(9, 30, 66, 0.25)";
 export declare const getFlagTextColor: (appearance: AppearanceTypes, mode: ThemeModes) => string;
 export declare const getFlagIconColor: (appearance: AppearanceTypes, mode: ThemeModes) => string;
-export declare const flagShadowColor = "rgba(9, 30, 66, 0.25)";
 export declare const getFlagFocusRingColor: (appearance: AppearanceTypes, mode: ThemeModes) => string;
 export declare const getActionBackground: (appearance: AppearanceTypes, mode: ThemeModes) => string;
 export declare const getActionColor: (appearance: AppearanceTypes, mode: ThemeModes) => string;

package/package.json

@@ -1,11 +1,11 @@
 {
   "name": "@atlaskit/flag",
-  "version": "14.5.8",
+  "version": "14.6.1",
   "description": "A flag is used for confirmations, alerts, and acknowledgments that require minimal user interaction, often displayed using a flag group.",
   "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",
@@ -16,19 +16,30 @@
   "atlaskit:src": "src/index.ts",
   "atlassian": {
     "team": "Design System Team",
-    "deprecatedAutoEntryPoints": true,
     "releaseModel": "scheduled",
     "website": {
-      "name": "Flag"
+      "name": "Flag",
+      "category": "Components"
     }
   },
+  "af:exports": {
+    ".": "./src/index.ts",
+    "./auto-dismiss-flag": "./src/auto-dismiss-flag.tsx",
+    "./constants": "./src/constants.ts",
+    "./flag-actions": "./src/flag-actions.tsx",
+    "./flag-group": "./src/flag-group.tsx",
+    "./flag-provider": "./src/flag-provider.tsx",
+    "./flag": "./src/flag.tsx",
+    "./theme": "./src/theme.ts",
+    "./types": "./src/types.ts"
+  },
   "dependencies": {
     "@atlaskit/analytics-next": "^8.0.0",
     "@atlaskit/button": "^16.3.0",
-    "@atlaskit/ds-lib": "^1.4.0",
+    "@atlaskit/ds-lib": "^2.0.0",
     "@atlaskit/focus-ring": "^1.0.0",
     "@atlaskit/icon": "^21.10.0",
-    "@atlaskit/motion": "^1.0.0",
+    "@atlaskit/motion": "^1.2.0",
     "@atlaskit/portal": "^4.0.0",
     "@atlaskit/theme": "^12.1.0",
     "@atlaskit/tokens": "^0.10.0",
@@ -62,6 +73,7 @@
   ],
   "techstack": {
     "@repo/internal": {
+      "dom-events": "use-bind-event-listener",
       "ui-components": [
         "lite-mode"
       ],

package/report.api.md

@@ -0,0 +1,179 @@
+## API Report File for "@atlaskit/flag"
+
+> Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/).
+
+```ts
+/// <reference types="react" />
+
+import { ComponentType } from 'react';
+import { CustomThemeButtonProps } from '@atlaskit/button/types';
+import { MouseEventHandler } from 'react';
+import { default as React_2 } from 'react';
+import { ReactElement } from 'react';
+import { ReactNode } from 'react';
+import { UIAnalyticsEvent } from '@atlaskit/analytics-next';
+import { WithAnalyticsEventsProps } from '@atlaskit/analytics-next';
+
+export declare type ActionsType = Array<ActionType>;
+
+declare type ActionType = {
+  content: ReactNode;
+  onClick?: (
+    e: React.MouseEvent<HTMLElement>,
+    analyticsEvent: UIAnalyticsEvent,
+  ) => void;
+  href?: string;
+  target?: string;
+  testId?: string;
+};
+
+export declare type AppearanceTypes =
+  | 'error'
+  | 'info'
+  | 'normal'
+  | 'success'
+  | 'warning';
+
+export declare const AutoDismissFlag: (
+  props: AutoDismissFlagProps,
+) => JSX.Element;
+
+declare interface AutoDismissFlagProps
+  extends AutoDismissFlagPropsWithoutId,
+    FlagPropsId {}
+
+declare type AutoDismissFlagPropsWithoutId = {
+  /** Array of clickable actions to be shown at the bottom of the flag. For flags where appearance
+   * is 'normal', actions will be shown as links. For all other appearance values, actions will
+   * shown as buttons.
+   * If href is passed the action will be shown as a link with the passed href prop.
+   */
+  actions?: ActionsType;
+  /** Makes the flag appearance bold. Setting this to anything other than 'normal' hides the
+   * dismiss button.
+   */
+  appearance?: AppearanceTypes;
+  /** The secondary content shown below the flag title */
+  description?: ReactNode;
+  /** The icon displayed in the top-left of the flag. Should be an instance of `@atlaskit/icon`.
+   * Your icon will receive the appropriate default color, which you can override by wrapping the
+   * icon in a containing element with CSS `color` set to your preferred icon color.
+   */
+  icon: ReactNode;
+  /** The bold text shown at the top of the flag. */
+  title: ReactNode;
+  /** Handler which will be called when a Flag's dismiss button is clicked.
+   * Receives the id of the dismissed Flag as a parameter.
+   */
+  onDismissed?: (id: number | string, analyticsEvent: UIAnalyticsEvent) => void;
+  /** A link component that is passed down to the `@atlaskit/button` used by actions,
+     to allow custom routers to be used. See the
+     [button with router](https://atlaskit.atlassian.com/packages/design-system/button/example/ButtonWithRouter)
+     example of what this component should look like. */
+  linkComponent?: ComponentType<CustomThemeButtonProps>;
+  /**
+     * A `testId` prop is provided for specified elements,
+     * which is a unique string that appears as a data attribute `data-testid` in the rendered code,
+     * serving as a hook for automated tests.
+
+     * Will set these elements when defined:
+
+     * - Flag root element - `{testId}`
+     * - Close button visible on default flags - `{testId}-dismiss`
+     * - Toggle button visible on bold flags - `{testId}-toggle`
+     * - Flag content which wraps the description and actions - `{testId}-expander`
+     * - Flag description - `{testId}-description`
+     * - Flag actions - `{testId}-actions`
+     */
+  testId?: string;
+  /** Additional information to be included in the `context` of analytics events that come from flag */
+  analyticsContext?: Record<string, any>;
+};
+
+declare type Combine<First, Second> = Omit<First, keyof Second> & Second;
+
+export declare interface CreateFlagArgs extends FlagPropsWithoutId {
+  /** A unique identifier used for rendering and onDismissed callbacks.
+   * This will be autogenerated if you don’t supply one.
+   * If you don’t want the same flag showing multiple times, provide a unique id.
+   */
+  id?: FlagId;
+  /** Marks whether the flag should render as an AutoDismissFlag */
+  isAutoDismiss?: boolean;
+}
+
+export declare type DismissFn = () => void;
+
+declare const Flag: (props: FlagProps) => JSX.Element;
+export default Flag;
+
+export declare type FlagAPI = {
+  showFlag: (args: CreateFlagArgs) => DismissFn;
+};
+
+export declare type FlagArgs = Combine<
+  CreateFlagArgs,
+  {
+    id: FlagId;
+  }
+>;
+
+export declare const FlagGroup: (props: FlagGroupProps) => JSX.Element;
+
+declare type FlagGroupProps = {
+  /** ID attribute used for DOM selection. */
+  id?: string;
+  /** Describes the specific role of this FlagGroup for users viewing the page with a screen reader (defaults to `Flag notifications`). */
+  label?: string;
+  /** Describes the specific tag on which the screen reader text will be rendered (defaults to `h2`). */
+  labelTag?: React.ElementType;
+  /** Flag elements to be displayed. */
+  children?: Array<ReactElement> | ReactElement | null | boolean;
+  /** Handler which will be called when a Flag's dismiss button is clicked.
+   * Receives the id of the dismissed Flag as a parameter.
+   */
+  onDismissed?: (id: number | string, analyticsEvent: UIAnalyticsEvent) => void;
+};
+
+declare type FlagId = string | number;
+
+export declare interface FlagProps extends FlagPropsWithoutId, FlagPropsId {}
+
+declare type FlagPropsId = {
+  /** A unique identifier used for rendering and onDismissed callbacks. */
+  id: number | string;
+};
+
+declare interface FlagPropsWithoutId
+  extends AutoDismissFlagPropsWithoutId,
+    WithAnalyticsEventsProps {
+  /** Standard onBlur event, applied to Flag by AutoDismissFlag */
+  onBlur?: (
+    e: React.FocusEvent<HTMLElement>,
+    analyticsEvent: UIAnalyticsEvent,
+  ) => void;
+  /** Standard onFocus event, applied to Flag by AutoDismissFlag */
+  onFocus?: (
+    e: React.FocusEvent<HTMLElement>,
+    analyticsEvent: UIAnalyticsEvent,
+  ) => void;
+  /** Standard onMouseOut event, applied to Flag by AutoDismissFlag */
+  onMouseOut?: MouseEventHandler;
+  /** Standard onMouseOver event, applied to Flag by AutoDismissFlag */
+  onMouseOver?: MouseEventHandler;
+}
+
+export declare function FlagsProvider({
+  children,
+}: {
+  children: React_2.ReactNode;
+}): JSX.Element;
+
+export declare function useFlags(): FlagAPI;
+
+export declare const withFlagsProvider: (
+  fn: () => React_2.ReactNode,
+) => React_2.ReactNode;
+
+export {};
+```