@atlaskit/flag 15.6.1 → 15.6.3

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @atlaskit/flag
 
+## 15.6.3
+
+### Patch Changes
+
+- Updated dependencies
+
+## 15.6.2
+
+### Patch Changes
+
+- [#113275](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/113275)
+  [`b52de02acc0d0`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/b52de02acc0d0) -
+  Add support to delay the screen reader announcement by props
+
 ## 15.6.1
 
 ### Patch Changes

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

@@ -15,7 +15,7 @@ var _flagGroup = require("./flag-group");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 var packageName = "@atlaskit/flag";
-var packageVersion = "15.6.1";
+var packageVersion = "15.6.3";
 var AUTO_DISMISS_SECONDS = exports.AUTO_DISMISS_SECONDS = 8;
 
 /**

package/dist/cjs/flag.js

@@ -18,6 +18,7 @@ var _theme = require("./theme");
 var _flagActions = _interopRequireDefault(require("./flag-actions"));
 var _flagGroup = require("./flag-group");
 var _internal = require("./internal");
+var _visuallyHidden = _interopRequireDefault(require("@atlaskit/visually-hidden"));
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; } /**
  * @jsxRuntime classic
@@ -54,7 +55,7 @@ var flagWrapperStyles = (0, _react2.css)({
 var analyticsAttributes = {
   componentName: 'flag',
   packageName: "@atlaskit/flag",
-  packageVersion: "15.6.1"
+  packageVersion: "15.6.3"
 };
 var transitionStyles = (0, _react2.css)({
   flexGrow: 1,
@@ -90,7 +91,12 @@ var Flag = function Flag(props) {
     onDismissedProp = _props$onDismissed === void 0 ? _noop.default : _props$onDismissed,
     testId = props.testId,
     id = props.id,
-    analyticsContext = props.analyticsContext;
+    analyticsContext = props.analyticsContext,
+    delayAnnouncement = props.delayAnnouncement;
+  var _useState = (0, _react.useState)(false),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    isDelayToAnnounce = _useState2[0],
+    setIsDelayToAnnounce = _useState2[1];
   var _useFlagGroup = (0, _flagGroup.useFlagGroup)(),
     onDismissedFromFlagGroup = _useFlagGroup.onDismissed,
     isDismissAllowed = _useFlagGroup.isDismissAllowed;
@@ -98,10 +104,10 @@ var Flag = function Flag(props) {
     onDismissedProp(id, analyticsEvent);
     onDismissedFromFlagGroup(id, analyticsEvent);
   }, [onDismissedProp, onDismissedFromFlagGroup]);
-  var _useState = (0, _react.useState)(false),
-    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-    isExpanded = _useState2[0],
-    setIsExpanded = _useState2[1];
+  var _useState3 = (0, _react.useState)(false),
+    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+    isExpanded = _useState4[0],
+    setIsExpanded = _useState4[1];
   var onDismissedAnalytics = (0, _usePlatformLeafEventHandler.usePlatformLeafEventHandler)(_objectSpread({
     fn: onDismissed,
     action: 'dismissed',
@@ -124,6 +130,14 @@ var Flag = function Flag(props) {
       setIsExpanded(false);
     }
   }, [actions.length, description, isBold, isExpanded]);
+  (0, _react.useEffect)(function () {
+    if (!delayAnnouncement) {
+      return;
+    }
+    setTimeout(function () {
+      setIsDelayToAnnounce(true);
+    }, delayAnnouncement);
+  }, [delayAnnouncement]);
   var onFocusAnalytics = (0, _usePlatformLeafEventHandler.usePlatformLeafEventHandler)(_objectSpread({
     fn: onFocus,
     action: 'focused',
@@ -144,8 +158,12 @@ var Flag = function Flag(props) {
   var iconColor = _theme.flagIconColor[appearance];
   var isDismissable = isBold || isDismissAllowed;
   var shouldRenderGap = !isBold && (description || actions.length) || isExpanded;
+  // when delayAnnouncement is available we will use a hidden content for announcement
+  var delayedAnnouncement = delayAnnouncement ? (0, _react2.jsx)(_visuallyHidden.default, {
+    role: "alert"
+  }, title, description) : undefined;
   return (0, _react2.jsx)("div", (0, _extends2.default)({
-    role: "alert",
+    role: delayAnnouncement ? undefined : 'alert',
     css: flagWrapperStyles,
     "data-testid": testId
   }, autoDismissProps), (0, _react2.jsx)(_primitives.Box, {
@@ -164,7 +182,7 @@ var Flag = function Flag(props) {
     css: transitionStyles
   }, (0, _react2.jsx)(_primitives.Stack, {
     space: shouldRenderGap ? 'space.100' : 'space.0' // Gap exists even when not expanded due to Expander internals always being in the DOM
-  }, (0, _react2.jsx)(_primitives.Inline, {
+  }, isDelayToAnnounce && delayedAnnouncement, (0, _react2.jsx)(_primitives.Inline, {
     alignBlock: "stretch",
     space: "space.100",
     spread: "space-between"

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 = "15.6.1";
+const packageVersion = "15.6.3";
 export const AUTO_DISMISS_SECONDS = 8;
 
 /**

package/dist/es2019/flag.js

@@ -15,6 +15,7 @@ import { flagTextColor, flagBackgroundColor, flagIconColor, flagTextColorToken }
 import Actions from './flag-actions';
 import { useFlagGroup } from './flag-group';
 import { Expander, DismissButton } from './internal';
+import VisuallyHidden from '@atlaskit/visually-hidden';
 const CSS_VAR_ICON_COLOR = '--flag-icon-color';
 
 // For cases where a single word is longer than the container (e.g. filenames)
@@ -47,7 +48,7 @@ const flagWrapperStyles = css({
 const analyticsAttributes = {
   componentName: 'flag',
   packageName: "@atlaskit/flag",
-  packageVersion: "15.6.1"
+  packageVersion: "15.6.3"
 };
 const transitionStyles = css({
   flexGrow: 1,
@@ -79,8 +80,10 @@ const Flag = props => {
     onDismissed: onDismissedProp = noop,
     testId,
     id,
-    analyticsContext
+    analyticsContext,
+    delayAnnouncement
   } = props;
+  const [isDelayToAnnounce, setIsDelayToAnnounce] = useState(false);
   const {
     onDismissed: onDismissedFromFlagGroup,
     isDismissAllowed
@@ -111,6 +114,14 @@ const Flag = props => {
       setIsExpanded(false);
     }
   }, [actions.length, description, isBold, isExpanded]);
+  useEffect(() => {
+    if (!delayAnnouncement) {
+      return;
+    }
+    setTimeout(() => {
+      setIsDelayToAnnounce(true);
+    }, delayAnnouncement);
+  }, [delayAnnouncement]);
   const onFocusAnalytics = usePlatformLeafEventHandler({
     fn: onFocus,
     action: 'focused',
@@ -133,8 +144,12 @@ const Flag = props => {
   const iconColor = flagIconColor[appearance];
   const isDismissable = isBold || isDismissAllowed;
   const shouldRenderGap = !isBold && (description || actions.length) || isExpanded;
+  // when delayAnnouncement is available we will use a hidden content for announcement
+  const delayedAnnouncement = delayAnnouncement ? jsx(VisuallyHidden, {
+    role: "alert"
+  }, title, description) : undefined;
   return jsx("div", _extends({
-    role: "alert",
+    role: delayAnnouncement ? undefined : 'alert',
     css: flagWrapperStyles,
     "data-testid": testId
   }, autoDismissProps), jsx(Box, {
@@ -155,7 +170,7 @@ const Flag = props => {
     css: transitionStyles
   }, jsx(Stack, {
     space: shouldRenderGap ? 'space.100' : 'space.0' // Gap exists even when not expanded due to Expander internals always being in the DOM
-  }, jsx(Inline, {
+  }, isDelayToAnnounce && delayedAnnouncement, jsx(Inline, {
     alignBlock: "stretch",
     space: "space.100",
     spread: "space-between"

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 = "15.6.1";
+var packageVersion = "15.6.3";
 export var AUTO_DISMISS_SECONDS = 8;
 
 /**

package/dist/esm/flag.js

@@ -19,6 +19,7 @@ import { flagTextColor, flagBackgroundColor, flagIconColor, flagTextColorToken }
 import Actions from './flag-actions';
 import { useFlagGroup } from './flag-group';
 import { Expander, DismissButton } from './internal';
+import VisuallyHidden from '@atlaskit/visually-hidden';
 var CSS_VAR_ICON_COLOR = '--flag-icon-color';
 
 // For cases where a single word is longer than the container (e.g. filenames)
@@ -51,7 +52,7 @@ var flagWrapperStyles = css({
 var analyticsAttributes = {
   componentName: 'flag',
   packageName: "@atlaskit/flag",
-  packageVersion: "15.6.1"
+  packageVersion: "15.6.3"
 };
 var transitionStyles = css({
   flexGrow: 1,
@@ -87,7 +88,12 @@ var Flag = function Flag(props) {
     onDismissedProp = _props$onDismissed === void 0 ? noop : _props$onDismissed,
     testId = props.testId,
     id = props.id,
-    analyticsContext = props.analyticsContext;
+    analyticsContext = props.analyticsContext,
+    delayAnnouncement = props.delayAnnouncement;
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isDelayToAnnounce = _useState2[0],
+    setIsDelayToAnnounce = _useState2[1];
   var _useFlagGroup = useFlagGroup(),
     onDismissedFromFlagGroup = _useFlagGroup.onDismissed,
     isDismissAllowed = _useFlagGroup.isDismissAllowed;
@@ -95,10 +101,10 @@ var Flag = function Flag(props) {
     onDismissedProp(id, analyticsEvent);
     onDismissedFromFlagGroup(id, analyticsEvent);
   }, [onDismissedProp, onDismissedFromFlagGroup]);
-  var _useState = useState(false),
-    _useState2 = _slicedToArray(_useState, 2),
-    isExpanded = _useState2[0],
-    setIsExpanded = _useState2[1];
+  var _useState3 = useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    isExpanded = _useState4[0],
+    setIsExpanded = _useState4[1];
   var onDismissedAnalytics = usePlatformLeafEventHandler(_objectSpread({
     fn: onDismissed,
     action: 'dismissed',
@@ -121,6 +127,14 @@ var Flag = function Flag(props) {
       setIsExpanded(false);
     }
   }, [actions.length, description, isBold, isExpanded]);
+  useEffect(function () {
+    if (!delayAnnouncement) {
+      return;
+    }
+    setTimeout(function () {
+      setIsDelayToAnnounce(true);
+    }, delayAnnouncement);
+  }, [delayAnnouncement]);
   var onFocusAnalytics = usePlatformLeafEventHandler(_objectSpread({
     fn: onFocus,
     action: 'focused',
@@ -141,8 +155,12 @@ var Flag = function Flag(props) {
   var iconColor = flagIconColor[appearance];
   var isDismissable = isBold || isDismissAllowed;
   var shouldRenderGap = !isBold && (description || actions.length) || isExpanded;
+  // when delayAnnouncement is available we will use a hidden content for announcement
+  var delayedAnnouncement = delayAnnouncement ? jsx(VisuallyHidden, {
+    role: "alert"
+  }, title, description) : undefined;
   return jsx("div", _extends({
-    role: "alert",
+    role: delayAnnouncement ? undefined : 'alert',
     css: flagWrapperStyles,
     "data-testid": testId
   }, autoDismissProps), jsx(Box, {
@@ -161,7 +179,7 @@ var Flag = function Flag(props) {
     css: transitionStyles
   }, jsx(Stack, {
     space: shouldRenderGap ? 'space.100' : 'space.0' // Gap exists even when not expanded due to Expander internals always being in the DOM
-  }, jsx(Inline, {
+  }, isDelayToAnnounce && delayedAnnouncement, jsx(Inline, {
     alignBlock: "stretch",
     space: "space.100",
     spread: "space-between"

package/dist/types/types.d.ts

@@ -95,6 +95,10 @@ export interface FlagPropsWithoutId extends AutoDismissFlagPropsWithoutId, WithA
      * Standard onMouseOver event, applied to Flag by AutoDismissFlag.
      */
     onMouseOver?: MouseEventHandler;
+    /**
+     * Milliseconds to delay the screen reader announcement due to announcement conflict.
+     */
+    delayAnnouncement?: number;
 }
 export interface FlagProps extends FlagPropsWithoutId, FlagPropsId {
 }

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

@@ -95,6 +95,10 @@ export interface FlagPropsWithoutId extends AutoDismissFlagPropsWithoutId, WithA
      * Standard onMouseOver event, applied to Flag by AutoDismissFlag.
      */
     onMouseOver?: MouseEventHandler;
+    /**
+     * Milliseconds to delay the screen reader announcement due to announcement conflict.
+     */
+    delayAnnouncement?: number;
 }
 export interface FlagProps extends FlagPropsWithoutId, FlagPropsId {
 }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/flag",
-	"version": "15.6.1",
+	"version": "15.6.3",
 	"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/"
@@ -47,14 +47,14 @@
 	},
 	"dependencies": {
 		"@atlaskit/analytics-next": "^9.3.0",
-		"@atlaskit/button": "^17.22.0",
+		"@atlaskit/button": "^18.0.0",
 		"@atlaskit/ds-lib": "^2.3.0",
 		"@atlaskit/icon": "^22.4.0",
 		"@atlaskit/motion": "^1.7.0",
 		"@atlaskit/portal": "^4.6.0",
 		"@atlaskit/primitives": "^8.0.0",
-		"@atlaskit/theme": "^12.10.0",
-		"@atlaskit/tokens": "^1.51.0",
+		"@atlaskit/theme": "^12.11.0",
+		"@atlaskit/tokens": "^1.52.0",
 		"@atlaskit/visually-hidden": "^1.4.0",
 		"@babel/runtime": "^7.0.0",
 		"@emotion/react": "^11.7.1"