@atlaskit/flag 15.2.27 → 15.3.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/flag
 
+## 15.3.0
+
+### Minor Changes
+
+- [#85860](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/85860) [`6c6d44b0293f`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/6c6d44b0293f) - Add shouldRenderToParent prop on flag group to render directly in the parent so the flags can be acessed in aria-modal components
+
 ## 15.2.27
 
 ### 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.2.27";
+var packageVersion = "15.3.0";
 var AUTO_DISMISS_SECONDS = exports.AUTO_DISMISS_SECONDS = 8;
 
 /**

package/dist/cjs/flag-group.js

@@ -39,7 +39,7 @@ function useFlagGroup() {
 var baseStyles = (0, _react2.css)({
   width: flagWidth,
   position: 'absolute',
-  bottom: 0,
+  insetBlockEnd: 0,
   transition: "transform ".concat(flagAnimationTime, "ms ease-in-out"),
   // TODO: Use new breakpoints
   // eslint-disable-next-line @atlaskit/design-system/no-nested-styles
@@ -77,13 +77,13 @@ var dismissAllowedStyles = (0, _react2.css)({
 var flagGroupContainerStyles = (0, _react2.css)({
   position: 'fixed',
   zIndex: 'flag',
-  bottom: "var(--ds-space-600, 48px)",
-  left: "var(--ds-space-1000, 80px)",
+  insetBlockEnd: "var(--ds-space-600, 48px)",
+  insetInlineStart: "var(--ds-space-1000, 80px)",
   // TODO: Use new breakpoints
   // eslint-disable-next-line @atlaskit/design-system/no-nested-styles
   '@media (max-width: 560px)': {
-    bottom: 0,
-    left: 0
+    insetBlockEnd: 0,
+    insetInlineStart: 0
   }
 });
 
@@ -101,6 +101,8 @@ var FlagGroup = function FlagGroup(props) {
     label = _props$label === void 0 ? 'Flag notifications' : _props$label,
     _props$labelTag = props.labelTag,
     LabelTag = _props$labelTag === void 0 ? 'h2' : _props$labelTag,
+    _props$shouldRenderTo = props.shouldRenderToParent,
+    shouldRenderToParent = _props$shouldRenderTo === void 0 ? false : _props$shouldRenderTo,
     children = props.children,
     _props$onDismissed = props.onDismissed,
     onDismissed = _props$onDismissed === void 0 ? _noop.default : _props$onDismissed;
@@ -136,13 +138,14 @@ var FlagGroup = function FlagGroup(props) {
       });
     }) : false;
   };
-  return (0, _react2.jsx)(_portal.default, {
-    zIndex: _constants.layers.flag()
-  }, (0, _react2.jsx)("div", {
+  var flags = (0, _react2.jsx)("div", {
     id: id,
     css: flagGroupContainerStyles
   }, hasFlags ? (0, _react2.jsx)(_visuallyHidden.default, null, (0, _react2.jsx)(LabelTag, null, label)) : null, (0, _react2.jsx)(_motion.ExitingPersistence, {
     appear: false
-  }, renderChildren())));
+  }, renderChildren()));
+  return shouldRenderToParent ? flags : (0, _react2.jsx)(_portal.default, {
+    zIndex: _constants.layers.flag()
+  }, flags);
 };
 var _default = exports.default = FlagGroup;

package/dist/cjs/flag.js

@@ -42,7 +42,7 @@ var flagWrapperStyles = (0, _react2.css)({
 var analyticsAttributes = {
   componentName: 'flag',
   packageName: "@atlaskit/flag",
-  packageVersion: "15.2.27"
+  packageVersion: "15.3.0"
 };
 var transitionStyles = (0, _react2.css)({
   flexGrow: 1,

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.2.27";
+const packageVersion = "15.3.0";
 export const AUTO_DISMISS_SECONDS = 8;
 
 /**

package/dist/es2019/flag-group.js

@@ -29,7 +29,7 @@ export function useFlagGroup() {
 const baseStyles = css({
   width: flagWidth,
   position: 'absolute',
-  bottom: 0,
+  insetBlockEnd: 0,
   transition: `transform ${flagAnimationTime}ms ease-in-out`,
   // TODO: Use new breakpoints
   // eslint-disable-next-line @atlaskit/design-system/no-nested-styles
@@ -67,13 +67,13 @@ const dismissAllowedStyles = css({
 const flagGroupContainerStyles = css({
   position: 'fixed',
   zIndex: 'flag',
-  bottom: "var(--ds-space-600, 48px)",
-  left: "var(--ds-space-1000, 80px)",
+  insetBlockEnd: "var(--ds-space-600, 48px)",
+  insetInlineStart: "var(--ds-space-1000, 80px)",
   // TODO: Use new breakpoints
   // eslint-disable-next-line @atlaskit/design-system/no-nested-styles
   '@media (max-width: 560px)': {
-    bottom: 0,
-    left: 0
+    insetBlockEnd: 0,
+    insetInlineStart: 0
   }
 });
 
@@ -90,6 +90,7 @@ const FlagGroup = props => {
     id,
     label = 'Flag notifications',
     labelTag: LabelTag = 'h2',
+    shouldRenderToParent = false,
     children,
     onDismissed = noop
   } = props;
@@ -120,13 +121,14 @@ const FlagGroup = props => {
       }, flag)));
     }) : false;
   };
-  return jsx(Portal, {
-    zIndex: layers.flag()
-  }, jsx("div", {
+  const flags = jsx("div", {
     id: id,
     css: flagGroupContainerStyles
   }, hasFlags ? jsx(VisuallyHidden, null, jsx(LabelTag, null, label)) : null, jsx(ExitingPersistence, {
     appear: false
-  }, renderChildren())));
+  }, renderChildren()));
+  return shouldRenderToParent ? flags : jsx(Portal, {
+    zIndex: layers.flag()
+  }, flags);
 };
 export default FlagGroup;

package/dist/es2019/flag.js

@@ -32,7 +32,7 @@ const flagWrapperStyles = css({
 const analyticsAttributes = {
   componentName: 'flag',
   packageName: "@atlaskit/flag",
-  packageVersion: "15.2.27"
+  packageVersion: "15.3.0"
 };
 const transitionStyles = css({
   flexGrow: 1,

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.2.27";
+var packageVersion = "15.3.0";
 export var AUTO_DISMISS_SECONDS = 8;
 
 /**

package/dist/esm/flag-group.js

@@ -30,7 +30,7 @@ export function useFlagGroup() {
 var baseStyles = css({
   width: flagWidth,
   position: 'absolute',
-  bottom: 0,
+  insetBlockEnd: 0,
   transition: "transform ".concat(flagAnimationTime, "ms ease-in-out"),
   // TODO: Use new breakpoints
   // eslint-disable-next-line @atlaskit/design-system/no-nested-styles
@@ -68,13 +68,13 @@ var dismissAllowedStyles = css({
 var flagGroupContainerStyles = css({
   position: 'fixed',
   zIndex: 'flag',
-  bottom: "var(--ds-space-600, 48px)",
-  left: "var(--ds-space-1000, 80px)",
+  insetBlockEnd: "var(--ds-space-600, 48px)",
+  insetInlineStart: "var(--ds-space-1000, 80px)",
   // TODO: Use new breakpoints
   // eslint-disable-next-line @atlaskit/design-system/no-nested-styles
   '@media (max-width: 560px)': {
-    bottom: 0,
-    left: 0
+    insetBlockEnd: 0,
+    insetInlineStart: 0
   }
 });
 
@@ -92,6 +92,8 @@ var FlagGroup = function FlagGroup(props) {
     label = _props$label === void 0 ? 'Flag notifications' : _props$label,
     _props$labelTag = props.labelTag,
     LabelTag = _props$labelTag === void 0 ? 'h2' : _props$labelTag,
+    _props$shouldRenderTo = props.shouldRenderToParent,
+    shouldRenderToParent = _props$shouldRenderTo === void 0 ? false : _props$shouldRenderTo,
     children = props.children,
     _props$onDismissed = props.onDismissed,
     onDismissed = _props$onDismissed === void 0 ? noop : _props$onDismissed;
@@ -127,13 +129,14 @@ var FlagGroup = function FlagGroup(props) {
       });
     }) : false;
   };
-  return jsx(Portal, {
-    zIndex: layers.flag()
-  }, jsx("div", {
+  var flags = jsx("div", {
     id: id,
     css: flagGroupContainerStyles
   }, hasFlags ? jsx(VisuallyHidden, null, jsx(LabelTag, null, label)) : null, jsx(ExitingPersistence, {
     appear: false
-  }, renderChildren())));
+  }, renderChildren()));
+  return shouldRenderToParent ? flags : jsx(Portal, {
+    zIndex: layers.flag()
+  }, flags);
 };
 export default FlagGroup;

package/dist/esm/flag.js

@@ -36,7 +36,7 @@ var flagWrapperStyles = css({
 var analyticsAttributes = {
   componentName: 'flag',
   packageName: "@atlaskit/flag",
-  packageVersion: "15.2.27"
+  packageVersion: "15.3.0"
 };
 var transitionStyles = css({
   flexGrow: 1,

package/dist/types/flag-group.d.ts

@@ -23,6 +23,12 @@ type FlagGroupProps = {
      * Receives the id of the dismissed Flag as a parameter.
      */
     onDismissed?: (id: number | string, analyticsEvent: UIAnalyticsEvent) => void;
+    /**
+     * The root element where the flag group should be rendered.
+     * `true` - rendering in the DOM node closest to the trigger. `false` - rendering in React.Portal.
+     * Defaults to `false`.
+     */
+    shouldRenderToParent?: boolean;
 };
 export declare const flagWidth: number;
 export declare const flagAnimationTime = 400;

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

@@ -23,6 +23,12 @@ type FlagGroupProps = {
      * Receives the id of the dismissed Flag as a parameter.
      */
     onDismissed?: (id: number | string, analyticsEvent: UIAnalyticsEvent) => void;
+    /**
+     * The root element where the flag group should be rendered.
+     * `true` - rendering in the DOM node closest to the trigger. `false` - rendering in React.Portal.
+     * Defaults to `false`.
+     */
+    shouldRenderToParent?: boolean;
 };
 export declare const flagWidth: number;
 export declare const flagAnimationTime = 400;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/flag",
-  "version": "15.2.27",
+  "version": "15.3.0",
   "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/"
@@ -46,7 +46,7 @@
   },
   "dependencies": {
     "@atlaskit/analytics-next": "^9.2.0",
-    "@atlaskit/button": "^17.7.0",
+    "@atlaskit/button": "^17.8.0",
     "@atlaskit/ds-explorations": "^3.3.0",
     "@atlaskit/ds-lib": "^2.2.0",
     "@atlaskit/focus-ring": "^1.3.0",
@@ -54,7 +54,7 @@
     "@atlaskit/motion": "^1.5.0",
     "@atlaskit/portal": "^4.4.0",
     "@atlaskit/primitives": "^5.1.0",
-    "@atlaskit/theme": "^12.6.0",
+    "@atlaskit/theme": "^12.7.0",
     "@atlaskit/tokens": "^1.42.0",
     "@atlaskit/visually-hidden": "^1.2.0",
     "@babel/runtime": "^7.0.0",