@atlaskit/primitives 14.10.2 → 14.11.0

package/CHANGELOG.md

@@ -1,5 +1,16 @@
 # @atlaskit/primitives
 
+## 14.11.0
+
+### Minor Changes
+
+- [#192701](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/192701)
+  [`4d5732a51de3b`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/4d5732a51de3b) -
+  Flex, Inline, and Stack now support passing through native ARIA attributes.
+- [#193136](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/193136)
+  [`deefc1d6ebaa6`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/deefc1d6ebaa6) -
+  [ux] Added HTML id attribute to Flex and Flex-based primitives
+
 ## 14.10.2
 
 ### Patch Changes

package/dist/cjs/compiled/components/anchor.js

@@ -69,7 +69,7 @@ var AnchorNoRef = function AnchorNoRef(_ref, ref) {
     action: 'clicked',
     componentName: componentName || 'Anchor',
     packageName: "@atlaskit/primitives",
-    packageVersion: "14.10.1",
+    packageVersion: "14.10.2",
     analyticsData: analyticsContext,
     actionSubject: 'link'
   });

package/dist/cjs/compiled/components/flex.js

@@ -1,6 +1,7 @@
 /* flex.tsx generated by @compiled/babel-plugin v0.36.1 */
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
@@ -10,6 +11,9 @@ require("./flex.compiled.css");
 var _react = _interopRequireWildcard(require("react"));
 var React = _react;
 var _runtime = require("@compiled/react/runtime");
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _excluded = ["as", "role", "alignItems", "justifyContent", "gap", "columnGap", "rowGap", "children", "testId", "direction", "wrap", "xcss"];
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 var rowGapMap = {
   'space.0': "_1p57ze3t",
@@ -105,13 +109,14 @@ var Flex = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _react.forwardRef)(fu
     testId = _ref.testId,
     direction = _ref.direction,
     wrap = _ref.wrap,
-    xcss = _ref.xcss;
-  return /*#__PURE__*/React.createElement(Component, {
+    xcss = _ref.xcss,
+    ariaAttributes = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  return /*#__PURE__*/React.createElement(Component, (0, _extends2.default)({}, ariaAttributes, {
     role: role,
     className: (0, _runtime.ax)([styles.root, gap && columnGapMap[gap], columnGap && columnGapMap[columnGap], gap && rowGapMap[gap], rowGap && rowGapMap[rowGap], alignItems && alignItemsMap[alignItems], direction && flexDirectionMap[direction], justifyContent && justifyContentMap[justifyContent], wrap && flexWrapMap[wrap], xcss]),
     "data-testid": testId,
     ref: ref
-  }, children);
+  }), children);
 }));
 Flex.displayName = 'Flex';
 var _default = exports.default = Flex;

package/dist/cjs/compiled/components/inline.js

@@ -11,8 +11,11 @@ require("./inline.compiled.css");
 var _react = _interopRequireWildcard(require("react"));
 var React = _react;
 var _runtime = require("@compiled/react/runtime");
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _css = require("@atlaskit/css");
 var _flex = _interopRequireDefault(require("./flex"));
+var _excluded = ["as", "alignInline", "alignBlock", "shouldWrap", "spread", "grow", "space", "rowSpace", "separator", "xcss", "testId", "role", "children"];
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 var styles = {
   separator: "_1mouze3t _195g1i6y _syazjjyb _lcxvglyw _uiztglyw",
@@ -55,14 +58,15 @@ var Inline = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _react.forwardRef)(
     xcss = _ref2.xcss,
     testId = _ref2.testId,
     role = _ref2.role,
-    rawChildren = _ref2.children;
+    rawChildren = _ref2.children,
+    ariaAttributes = (0, _objectWithoutProperties2.default)(_ref2, _excluded);
   var separatorComponent = typeof separator === 'string' ? /*#__PURE__*/React.createElement(Separator, null, separator) : separator;
   var children = separatorComponent ? _react.Children.toArray(rawChildren).filter(Boolean).map(function (child, index) {
     return /*#__PURE__*/React.createElement(_react.Fragment, {
       key: index
     }, separator && index > 0 ? separatorComponent : null, child);
   }) : rawChildren;
-  return /*#__PURE__*/React.createElement(_flex.default, {
+  return /*#__PURE__*/React.createElement(_flex.default, (0, _extends2.default)({}, ariaAttributes, {
     as: as,
     role: role,
     alignItems: alignItems,
@@ -74,7 +78,7 @@ var Inline = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _react.forwardRef)(
     xcss: (0, _css.cx)(grow === 'hug' && styles.hug, grow === 'fill' && styles.fill, xcss),
     testId: testId,
     ref: ref
-  }, children);
+  }), children);
 }));
 Inline.displayName = 'Inline';
 var _default = exports.default = Inline;

package/dist/cjs/compiled/components/pressable.js

@@ -61,7 +61,7 @@ var Pressable = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     action: 'clicked',
     componentName: componentName || 'Pressable',
     packageName: "@atlaskit/primitives",
-    packageVersion: "14.10.1",
+    packageVersion: "14.10.2",
     analyticsData: analyticsContext,
     actionSubject: 'button'
   });

package/dist/cjs/compiled/components/stack.js

@@ -11,8 +11,11 @@ require("./stack.compiled.css");
 var _react = _interopRequireWildcard(require("react"));
 var React = _react;
 var _runtime = require("@compiled/react/runtime");
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _css = require("@atlaskit/css");
 var _flex = _interopRequireDefault(require("./flex"));
+var _excluded = ["as", "alignInline", "alignBlock", "spread", "grow", "space", "children", "testId", "xcss", "role"];
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 var styles = {
   hug: "_16jlidpf",
@@ -44,8 +47,9 @@ var Stack = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _react.forwardRef)(f
     children = _ref.children,
     testId = _ref.testId,
     xcss = _ref.xcss,
-    role = _ref.role;
-  return /*#__PURE__*/React.createElement(_flex.default, {
+    role = _ref.role,
+    ariaAttributes = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  return /*#__PURE__*/React.createElement(_flex.default, (0, _extends2.default)({}, ariaAttributes, {
     as: as,
     role: role,
     gap: space,
@@ -55,7 +59,7 @@ var Stack = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _react.forwardRef)(f
     xcss: (0, _css.cx)(grow === 'hug' && styles.hug, grow === 'fill' && styles.fill, xcss),
     testId: testId,
     ref: ref
-  }, children);
+  }), children);
 }));
 Stack.displayName = 'Stack';
 var _default = exports.default = Stack;

package/dist/cjs/components/anchor.js

@@ -100,7 +100,7 @@ var AnchorNoRef = function AnchorNoRef(_ref, ref) {
     action: 'clicked',
     componentName: componentName || 'Anchor',
     packageName: "@atlaskit/primitives",
-    packageVersion: "14.10.1",
+    packageVersion: "14.10.2",
     analyticsData: analyticsContext,
     actionSubject: 'link'
   });

package/dist/cjs/components/flex.js

@@ -110,9 +110,11 @@ var Flex = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _react.forwardRef)(fu
     testId = _ref.testId,
     direction = _ref.direction,
     wrap = _ref.wrap,
-    xcss = _ref.xcss;
+    xcss = _ref.xcss,
+    id = _ref.id;
   var resolvedStyles = (0, _xcss.parseXcss)(xcss);
   return (0, _react2.jsx)(Component, {
+    id: id,
     role: role
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
     ,

package/dist/cjs/components/inline.js

@@ -71,6 +71,7 @@ var Inline = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _react.forwardRef)(
     xcss = _ref2.xcss,
     testId = _ref2.testId,
     role = _ref2.role,
+    id = _ref2.id,
     rawChildren = _ref2.children;
   var separatorComponent = typeof separator === 'string' ? (0, _react2.jsx)(Separator, null, separator) : separator;
   var children = separatorComponent ? _react.Children.toArray(rawChildren).filter(Boolean).map(function (child, index) {
@@ -85,6 +86,7 @@ var Inline = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _react.forwardRef)(
   // it with cx(defaultStyles, focusRingStyles, xcssStyles) when we've moved away from Emotion.
   var styles = grow ? [flexGrowMap[grow]].concat((0, _toConsumableArray2.default)(Array.isArray(xcss) ? xcss : [xcss])) : xcss;
   return (0, _react2.jsx)(_flex.default, {
+    id: id,
     as: as,
     role: role,
     alignItems: alignItems,

package/dist/cjs/components/pressable.js

@@ -95,7 +95,7 @@ var Pressable = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     action: 'clicked',
     componentName: componentName || 'Pressable',
     packageName: "@atlaskit/primitives",
-    packageVersion: "14.10.1",
+    packageVersion: "14.10.2",
     analyticsData: analyticsContext,
     actionSubject: 'button'
   });

package/dist/cjs/components/stack.js

@@ -52,7 +52,8 @@ var Stack = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _react.forwardRef)(f
     children = _ref.children,
     testId = _ref.testId,
     xcss = _ref.xcss,
-    role = _ref.role;
+    role = _ref.role,
+    id = _ref.id;
   var justifyContent = spread || alignBlock;
 
   // We're type coercing this as Compiled styles in an array isn't supported by the types
@@ -60,6 +61,7 @@ var Stack = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _react.forwardRef)(f
   // it with cx(defaultStyles, focusRingStyles, xcssStyles) when we've moved away from Emotion.
   var styles = grow ? [flexGrowMap[grow]].concat((0, _toConsumableArray2.default)(Array.isArray(xcss) ? xcss : [xcss])) : xcss;
   return (0, _react2.jsx)(_flex.default, {
+    id: id,
     as: as,
     role: role,
     gap: space,

package/dist/es2019/compiled/components/anchor.js

@@ -55,7 +55,7 @@ const AnchorNoRef = ({
     action: 'clicked',
     componentName: componentName || 'Anchor',
     packageName: "@atlaskit/primitives",
-    packageVersion: "14.10.1",
+    packageVersion: "14.10.2",
     analyticsData: analyticsContext,
     actionSubject: 'link'
   });

package/dist/es2019/compiled/components/flex.js

@@ -1,4 +1,5 @@
 /* flex.tsx generated by @compiled/babel-plugin v0.36.1 */
+import _extends from "@babel/runtime/helpers/extends";
 import "./flex.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
@@ -96,14 +97,15 @@ const Flex = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   testId,
   direction,
   wrap,
-  xcss
+  xcss,
+  ...ariaAttributes
 }, ref) => {
-  return /*#__PURE__*/React.createElement(Component, {
+  return /*#__PURE__*/React.createElement(Component, _extends({}, ariaAttributes, {
     role: role,
     className: ax([styles.root, gap && columnGapMap[gap], columnGap && columnGapMap[columnGap], gap && rowGapMap[gap], rowGap && rowGapMap[rowGap], alignItems && alignItemsMap[alignItems], direction && flexDirectionMap[direction], justifyContent && justifyContentMap[justifyContent], wrap && flexWrapMap[wrap], xcss]),
     "data-testid": testId,
     ref: ref
-  }, children);
+  }), children);
 }));
 Flex.displayName = 'Flex';
 export default Flex;

package/dist/es2019/compiled/components/inline.js

@@ -1,4 +1,5 @@
 /* inline.tsx generated by @compiled/babel-plugin v0.36.1 */
+import _extends from "@babel/runtime/helpers/extends";
 import "./inline.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
@@ -43,7 +44,8 @@ const Inline = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   xcss,
   testId,
   role,
-  children: rawChildren
+  children: rawChildren,
+  ...ariaAttributes
 }, ref) => {
   const separatorComponent = typeof separator === 'string' ? /*#__PURE__*/React.createElement(Separator, null, separator) : separator;
   const children = separatorComponent ? Children.toArray(rawChildren).filter(Boolean).map((child, index) => {
@@ -51,7 +53,7 @@ const Inline = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       key: index
     }, separator && index > 0 ? separatorComponent : null, child);
   }) : rawChildren;
-  return /*#__PURE__*/React.createElement(Flex, {
+  return /*#__PURE__*/React.createElement(Flex, _extends({}, ariaAttributes, {
     as: as,
     role: role,
     alignItems: alignItems,
@@ -63,7 +65,7 @@ const Inline = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     xcss: cx(grow === 'hug' && styles.hug, grow === 'fill' && styles.fill, xcss),
     testId: testId,
     ref: ref
-  }, children);
+  }), children);
 }));
 Inline.displayName = 'Inline';
 export default Inline;

package/dist/es2019/compiled/components/pressable.js

@@ -48,7 +48,7 @@ const Pressable = /*#__PURE__*/forwardRef(({
     action: 'clicked',
     componentName: componentName || 'Pressable',
     packageName: "@atlaskit/primitives",
-    packageVersion: "14.10.1",
+    packageVersion: "14.10.2",
     analyticsData: analyticsContext,
     actionSubject: 'button'
   });

package/dist/es2019/compiled/components/stack.js

@@ -1,4 +1,5 @@
 /* stack.tsx generated by @compiled/babel-plugin v0.36.1 */
+import _extends from "@babel/runtime/helpers/extends";
 import "./stack.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
@@ -34,9 +35,10 @@ const Stack = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   children,
   testId,
   xcss,
-  role
+  role,
+  ...ariaAttributes
 }, ref) => {
-  return /*#__PURE__*/React.createElement(Flex, {
+  return /*#__PURE__*/React.createElement(Flex, _extends({}, ariaAttributes, {
     as: as,
     role: role,
     gap: space,
@@ -46,7 +48,7 @@ const Stack = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     xcss: cx(grow === 'hug' && styles.hug, grow === 'fill' && styles.fill, xcss),
     testId: testId,
     ref: ref
-  }, children);
+  }), children);
 }));
 Stack.displayName = 'Stack';
 export default Stack;

package/dist/es2019/components/anchor.js

@@ -90,7 +90,7 @@ const AnchorNoRef = ({
     action: 'clicked',
     componentName: componentName || 'Anchor',
     packageName: "@atlaskit/primitives",
-    packageVersion: "14.10.1",
+    packageVersion: "14.10.2",
     analyticsData: analyticsContext,
     actionSubject: 'link'
   });

package/dist/es2019/components/flex.js

@@ -102,10 +102,12 @@ const Flex = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   testId,
   direction,
   wrap,
-  xcss
+  xcss,
+  id
 }, ref) => {
   const resolvedStyles = parseXcss(xcss);
   return jsx(Component, {
+    id: id,
     role: role
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
     ,

package/dist/es2019/components/inline.js

@@ -57,6 +57,7 @@ const Inline = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   xcss,
   testId,
   role,
+  id,
   children: rawChildren
 }, ref) => {
   const separatorComponent = typeof separator === 'string' ? jsx(Separator, null, separator) : separator;
@@ -72,6 +73,7 @@ const Inline = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   // it with cx(defaultStyles, focusRingStyles, xcssStyles) when we've moved away from Emotion.
   const styles = grow ? [flexGrowMap[grow], ...(Array.isArray(xcss) ? xcss : [xcss])] : xcss;
   return jsx(Flex, {
+    id: id,
     as: as,
     role: role,
     alignItems: alignItems,

package/dist/es2019/components/pressable.js

@@ -85,7 +85,7 @@ const Pressable = /*#__PURE__*/forwardRef(({
     action: 'clicked',
     componentName: componentName || 'Pressable',
     packageName: "@atlaskit/primitives",
-    packageVersion: "14.10.1",
+    packageVersion: "14.10.2",
     analyticsData: analyticsContext,
     actionSubject: 'button'
   });

package/dist/es2019/components/stack.js

@@ -42,7 +42,8 @@ const Stack = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   children,
   testId,
   xcss,
-  role
+  role,
+  id
 }, ref) => {
   const justifyContent = spread || alignBlock;
 
@@ -51,6 +52,7 @@ const Stack = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   // it with cx(defaultStyles, focusRingStyles, xcssStyles) when we've moved away from Emotion.
   const styles = grow ? [flexGrowMap[grow], ...(Array.isArray(xcss) ? xcss : [xcss])] : xcss;
   return jsx(Flex, {
+    id: id,
     as: as,
     role: role,
     gap: space,

package/dist/esm/compiled/components/anchor.js

@@ -60,7 +60,7 @@ var AnchorNoRef = function AnchorNoRef(_ref, ref) {
     action: 'clicked',
     componentName: componentName || 'Anchor',
     packageName: "@atlaskit/primitives",
-    packageVersion: "14.10.1",
+    packageVersion: "14.10.2",
     analyticsData: analyticsContext,
     actionSubject: 'link'
   });

package/dist/esm/compiled/components/flex.js

@@ -1,4 +1,7 @@
 /* flex.tsx generated by @compiled/babel-plugin v0.36.1 */
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["as", "role", "alignItems", "justifyContent", "gap", "columnGap", "rowGap", "children", "testId", "direction", "wrap", "xcss"];
 import "./flex.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
@@ -97,13 +100,14 @@ var Flex = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function (_ref, ref) {
     testId = _ref.testId,
     direction = _ref.direction,
     wrap = _ref.wrap,
-    xcss = _ref.xcss;
-  return /*#__PURE__*/React.createElement(Component, {
+    xcss = _ref.xcss,
+    ariaAttributes = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/React.createElement(Component, _extends({}, ariaAttributes, {
     role: role,
     className: ax([styles.root, gap && columnGapMap[gap], columnGap && columnGapMap[columnGap], gap && rowGapMap[gap], rowGap && rowGapMap[rowGap], alignItems && alignItemsMap[alignItems], direction && flexDirectionMap[direction], justifyContent && justifyContentMap[justifyContent], wrap && flexWrapMap[wrap], xcss]),
     "data-testid": testId,
     ref: ref
-  }, children);
+  }), children);
 }));
 Flex.displayName = 'Flex';
 export default Flex;

package/dist/esm/compiled/components/inline.js

@@ -1,4 +1,7 @@
 /* inline.tsx generated by @compiled/babel-plugin v0.36.1 */
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["as", "alignInline", "alignBlock", "shouldWrap", "spread", "grow", "space", "rowSpace", "separator", "xcss", "testId", "role", "children"];
 import "./inline.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
@@ -46,14 +49,15 @@ var Inline = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function (_ref2, ref) {
     xcss = _ref2.xcss,
     testId = _ref2.testId,
     role = _ref2.role,
-    rawChildren = _ref2.children;
+    rawChildren = _ref2.children,
+    ariaAttributes = _objectWithoutProperties(_ref2, _excluded);
   var separatorComponent = typeof separator === 'string' ? /*#__PURE__*/React.createElement(Separator, null, separator) : separator;
   var children = separatorComponent ? Children.toArray(rawChildren).filter(Boolean).map(function (child, index) {
     return /*#__PURE__*/React.createElement(Fragment, {
       key: index
     }, separator && index > 0 ? separatorComponent : null, child);
   }) : rawChildren;
-  return /*#__PURE__*/React.createElement(Flex, {
+  return /*#__PURE__*/React.createElement(Flex, _extends({}, ariaAttributes, {
     as: as,
     role: role,
     alignItems: alignItems,
@@ -65,7 +69,7 @@ var Inline = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function (_ref2, ref) {
     xcss: cx(grow === 'hug' && styles.hug, grow === 'fill' && styles.fill, xcss),
     testId: testId,
     ref: ref
-  }, children);
+  }), children);
 }));
 Inline.displayName = 'Inline';
 export default Inline;

package/dist/esm/compiled/components/pressable.js

@@ -52,7 +52,7 @@ var Pressable = /*#__PURE__*/forwardRef(function (_ref, ref) {
     action: 'clicked',
     componentName: componentName || 'Pressable',
     packageName: "@atlaskit/primitives",
-    packageVersion: "14.10.1",
+    packageVersion: "14.10.2",
     analyticsData: analyticsContext,
     actionSubject: 'button'
   });

package/dist/esm/compiled/components/stack.js

@@ -1,4 +1,7 @@
 /* stack.tsx generated by @compiled/babel-plugin v0.36.1 */
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["as", "alignInline", "alignBlock", "spread", "grow", "space", "children", "testId", "xcss", "role"];
 import "./stack.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
@@ -35,8 +38,9 @@ var Stack = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function (_ref, ref) {
     children = _ref.children,
     testId = _ref.testId,
     xcss = _ref.xcss,
-    role = _ref.role;
-  return /*#__PURE__*/React.createElement(Flex, {
+    role = _ref.role,
+    ariaAttributes = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/React.createElement(Flex, _extends({}, ariaAttributes, {
     as: as,
     role: role,
     gap: space,
@@ -46,7 +50,7 @@ var Stack = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function (_ref, ref) {
     xcss: cx(grow === 'hug' && styles.hug, grow === 'fill' && styles.fill, xcss),
     testId: testId,
     ref: ref
-  }, children);
+  }), children);
 }));
 Stack.displayName = 'Stack';
 export default Stack;

package/dist/esm/components/anchor.js

@@ -94,7 +94,7 @@ var AnchorNoRef = function AnchorNoRef(_ref, ref) {
     action: 'clicked',
     componentName: componentName || 'Anchor',
     packageName: "@atlaskit/primitives",
-    packageVersion: "14.10.1",
+    packageVersion: "14.10.2",
     analyticsData: analyticsContext,
     actionSubject: 'link'
   });

package/dist/esm/components/flex.js

@@ -103,9 +103,11 @@ var Flex = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function (_ref, ref) {
     testId = _ref.testId,
     direction = _ref.direction,
     wrap = _ref.wrap,
-    xcss = _ref.xcss;
+    xcss = _ref.xcss,
+    id = _ref.id;
   var resolvedStyles = parseXcss(xcss);
   return jsx(Component, {
+    id: id,
     role: role
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
     ,

package/dist/esm/components/inline.js

@@ -61,6 +61,7 @@ var Inline = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function (_ref2, ref) {
     xcss = _ref2.xcss,
     testId = _ref2.testId,
     role = _ref2.role,
+    id = _ref2.id,
     rawChildren = _ref2.children;
   var separatorComponent = typeof separator === 'string' ? jsx(Separator, null, separator) : separator;
   var children = separatorComponent ? Children.toArray(rawChildren).filter(Boolean).map(function (child, index) {
@@ -75,6 +76,7 @@ var Inline = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function (_ref2, ref) {
   // it with cx(defaultStyles, focusRingStyles, xcssStyles) when we've moved away from Emotion.
   var styles = grow ? [flexGrowMap[grow]].concat(_toConsumableArray(Array.isArray(xcss) ? xcss : [xcss])) : xcss;
   return jsx(Flex, {
+    id: id,
     as: as,
     role: role,
     alignItems: alignItems,

package/dist/esm/components/pressable.js

@@ -89,7 +89,7 @@ var Pressable = /*#__PURE__*/forwardRef(function (_ref, ref) {
     action: 'clicked',
     componentName: componentName || 'Pressable',
     packageName: "@atlaskit/primitives",
-    packageVersion: "14.10.1",
+    packageVersion: "14.10.2",
     analyticsData: analyticsContext,
     actionSubject: 'button'
   });

package/dist/esm/components/stack.js

@@ -44,7 +44,8 @@ var Stack = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function (_ref, ref) {
     children = _ref.children,
     testId = _ref.testId,
     xcss = _ref.xcss,
-    role = _ref.role;
+    role = _ref.role,
+    id = _ref.id;
   var justifyContent = spread || alignBlock;
 
   // We're type coercing this as Compiled styles in an array isn't supported by the types
@@ -52,6 +53,7 @@ var Stack = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function (_ref, ref) {
   // it with cx(defaultStyles, focusRingStyles, xcssStyles) when we've moved away from Emotion.
   var styles = grow ? [flexGrowMap[grow]].concat(_toConsumableArray(Array.isArray(xcss) ? xcss : [xcss])) : xcss;
   return jsx(Flex, {
+    id: id,
     as: as,
     role: role,
     gap: space,

package/dist/types/compiled/components/flex.d.ts

@@ -2,7 +2,7 @@
  * @jsxRuntime classic
  * @jsx jsx
  */
-import { type ElementType, type ReactNode } from 'react';
+import { type AriaAttributes, type ElementType, type ReactNode } from 'react';
 import type { AlignItems, BasePrimitiveProps, Direction, GapToken, JustifyContent, Wrap } from './types';
 export type FlexProps<T extends ElementType = 'div'> = {
     /**
@@ -45,7 +45,7 @@ export type FlexProps<T extends ElementType = 'div'> = {
      * Forwarded ref element.
      */
     ref?: React.ComponentPropsWithRef<T>['ref'];
-} & BasePrimitiveProps;
+} & BasePrimitiveProps & AriaAttributes;
 /**
  * __Flex__
  *

package/dist/types/compiled/components/inline.d.ts

@@ -2,7 +2,7 @@
  * @jsxRuntime classic
  * @jsx jsx
  */
-import { type ElementType, type ReactNode } from 'react';
+import { type AriaAttributes, type ElementType, type ReactNode } from 'react';
 import { type FlexProps } from './flex';
 import type { AlignBlock, AlignInline, BasePrimitiveProps, Grow, Spread } from './types';
 export type InlineProps<T extends ElementType = 'div'> = {
@@ -51,7 +51,7 @@ export type InlineProps<T extends ElementType = 'div'> = {
      * Forwarded ref element.
      */
     ref?: React.ComponentPropsWithRef<T>['ref'];
-} & BasePrimitiveProps;
+} & BasePrimitiveProps & AriaAttributes;
 /**
  * __Inline__
  *

package/dist/types/compiled/components/stack.d.ts

@@ -2,7 +2,7 @@
  * @jsxRuntime classic
  * @jsx jsx
  */
-import { type ElementType, type ReactNode } from 'react';
+import { type AriaAttributes, type ElementType, type ReactNode } from 'react';
 import { type FlexProps } from './flex';
 import type { AlignBlock, AlignInline, BasePrimitiveProps, Grow, Spread } from './types';
 export type StackProps<T extends ElementType = 'div'> = {
@@ -38,7 +38,7 @@ export type StackProps<T extends ElementType = 'div'> = {
      * Forwarded ref element.
      */
     ref?: React.ComponentPropsWithRef<T>['ref'];
-} & BasePrimitiveProps;
+} & BasePrimitiveProps & AriaAttributes;
 /**
  * __Stack__
  *

package/dist/types/components/flex.d.ts

@@ -42,6 +42,10 @@ export type FlexProps<T extends ElementType = 'div'> = {
      * Elements to be rendered inside the Flex.
      */
     children: ReactNode;
+    /**
+     * The [HTML `id` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id).
+     */
+    id?: string;
     /**
      * Forwarded ref element.
      */

package/dist/types/components/inline.d.ts

@@ -47,6 +47,10 @@ export type InlineProps<T extends ElementType = 'div'> = {
      * Elements to be rendered inside the Inline.
      */
     children: ReactNode;
+    /**
+     * The [HTML `id` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id).
+     */
+    id?: string;
     /**
      * Forwarded ref element.
      */

package/dist/types/components/stack.d.ts

@@ -34,6 +34,10 @@ export type StackProps<T extends ElementType = 'div'> = {
      * Elements to be rendered inside the Stack.
      */
     children: ReactNode;
+    /**
+     * The [HTML `id` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id).
+     */
+    id?: string;
     /**
      * Forwarded ref element.
      */

package/dist/types-ts4.5/compiled/components/flex.d.ts

@@ -2,7 +2,7 @@
  * @jsxRuntime classic
  * @jsx jsx
  */
-import { type ElementType, type ReactNode } from 'react';
+import { type AriaAttributes, type ElementType, type ReactNode } from 'react';
 import type { AlignItems, BasePrimitiveProps, Direction, GapToken, JustifyContent, Wrap } from './types';
 export type FlexProps<T extends ElementType = 'div'> = {
     /**
@@ -45,7 +45,7 @@ export type FlexProps<T extends ElementType = 'div'> = {
      * Forwarded ref element.
      */
     ref?: React.ComponentPropsWithRef<T>['ref'];
-} & BasePrimitiveProps;
+} & BasePrimitiveProps & AriaAttributes;
 /**
  * __Flex__
  *

package/dist/types-ts4.5/compiled/components/inline.d.ts

@@ -2,7 +2,7 @@
  * @jsxRuntime classic
  * @jsx jsx
  */
-import { type ElementType, type ReactNode } from 'react';
+import { type AriaAttributes, type ElementType, type ReactNode } from 'react';
 import { type FlexProps } from './flex';
 import type { AlignBlock, AlignInline, BasePrimitiveProps, Grow, Spread } from './types';
 export type InlineProps<T extends ElementType = 'div'> = {
@@ -51,7 +51,7 @@ export type InlineProps<T extends ElementType = 'div'> = {
      * Forwarded ref element.
      */
     ref?: React.ComponentPropsWithRef<T>['ref'];
-} & BasePrimitiveProps;
+} & BasePrimitiveProps & AriaAttributes;
 /**
  * __Inline__
  *

package/dist/types-ts4.5/compiled/components/stack.d.ts

@@ -2,7 +2,7 @@
  * @jsxRuntime classic
  * @jsx jsx
  */
-import { type ElementType, type ReactNode } from 'react';
+import { type AriaAttributes, type ElementType, type ReactNode } from 'react';
 import { type FlexProps } from './flex';
 import type { AlignBlock, AlignInline, BasePrimitiveProps, Grow, Spread } from './types';
 export type StackProps<T extends ElementType = 'div'> = {
@@ -38,7 +38,7 @@ export type StackProps<T extends ElementType = 'div'> = {
      * Forwarded ref element.
      */
     ref?: React.ComponentPropsWithRef<T>['ref'];
-} & BasePrimitiveProps;
+} & BasePrimitiveProps & AriaAttributes;
 /**
  * __Stack__
  *

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

@@ -42,6 +42,10 @@ export type FlexProps<T extends ElementType = 'div'> = {
      * Elements to be rendered inside the Flex.
      */
     children: ReactNode;
+    /**
+     * The [HTML `id` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id).
+     */
+    id?: string;
     /**
      * Forwarded ref element.
      */

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

@@ -47,6 +47,10 @@ export type InlineProps<T extends ElementType = 'div'> = {
      * Elements to be rendered inside the Inline.
      */
     children: ReactNode;
+    /**
+     * The [HTML `id` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id).
+     */
+    id?: string;
     /**
      * Forwarded ref element.
      */

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

@@ -34,6 +34,10 @@ export type StackProps<T extends ElementType = 'div'> = {
      * Elements to be rendered inside the Stack.
      */
     children: ReactNode;
+    /**
+     * The [HTML `id` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id).
+     */
+    id?: string;
     /**
      * Forwarded ref element.
      */

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/primitives",
-	"version": "14.10.2",
+	"version": "14.11.0",
 	"description": "Primitives are token-backed low-level building blocks.",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -133,7 +133,7 @@
 	},
 	"dependencies": {
 		"@atlaskit/analytics-next": "^11.1.0",
-		"@atlaskit/app-provider": "^2.2.0",
+		"@atlaskit/app-provider": "^2.3.0",
 		"@atlaskit/css": "^0.12.0",
 		"@atlaskit/ds-lib": "^5.0.0",
 		"@atlaskit/interaction-context": "^3.0.0",
@@ -156,26 +156,26 @@
 		"@af/integration-testing": "workspace:^",
 		"@af/visual-regression": "workspace:^",
 		"@atlaskit/avatar": "^25.1.0",
-		"@atlaskit/button": "^23.2.0",
+		"@atlaskit/button": "^23.3.0",
 		"@atlaskit/checkbox": "^17.1.0",
 		"@atlaskit/code": "^17.2.0",
 		"@atlaskit/docs": "^11.0.0",
 		"@atlaskit/dropdown-menu": "^16.3.0",
-		"@atlaskit/flag": "^17.2.0",
+		"@atlaskit/flag": "^17.3.0",
 		"@atlaskit/form": "^12.0.0",
 		"@atlaskit/heading": "^5.2.0",
-		"@atlaskit/icon": "^27.6.0",
+		"@atlaskit/icon": "^27.7.0",
 		"@atlaskit/icon-object": "^7.1.0",
 		"@atlaskit/image": "^3.0.0",
 		"@atlaskit/link": "^3.2.0",
-		"@atlaskit/logo": "^19.5.0",
+		"@atlaskit/logo": "^19.6.0",
 		"@atlaskit/lozenge": "^13.0.0",
 		"@atlaskit/motion": "^5.1.0",
 		"@atlaskit/range": "^9.1.0",
-		"@atlaskit/section-message": "^8.3.0",
+		"@atlaskit/section-message": "^8.5.0",
 		"@atlaskit/textfield": "^8.0.0",
-		"@atlaskit/toggle": "^15.0.0",
-		"@atlaskit/tooltip": "^20.3.0",
+		"@atlaskit/toggle": "^15.1.0",
+		"@atlaskit/tooltip": "^20.4.0",
 		"@atlaskit/visual-regression": "workspace:^",
 		"@atlassian/analytics-bridge": "^0.7.0",
 		"@atlassian/codegen": "^0.1.0",