@atlaskit/menu 1.8.1 → 1.9.1

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/menu
 
+## 1.9.1
+
+### Patch Changes
+
+- Updated dependencies
+
+## 1.9.0
+
+### Minor Changes
+
+- [`0af122e7d0f`](https://bitbucket.org/atlassian/atlassian-frontend/commits/0af122e7d0f) - [ux] Prop isList in Section component allows to add `<ul>` and `<li>` elements around the items to better semantic markup if it is a list of items
+
 ## 1.8.1
 
 ### Patch Changes

package/dist/cjs/menu-item/skeleton-item.js

@@ -34,7 +34,7 @@ var skeletonStyles = (0, _react.css)({
     // This is a little bespoke but we need to push everything down 1px
     // because the skeleton content should align to the bottom of the text.
     // Confirm VR test failures before accepting a change.
-    // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
+    // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
     marginTop: 1,
     backgroundColor: skeletonColor,
     borderRadius: skeletonTextBorderRadius,
@@ -70,9 +70,9 @@ var beforeElementStyles = (0, _react.css)({
   '::before': {
     width: skeletonItemElemSize,
     height: skeletonItemElemSize,
-    // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
+    // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
     marginRight: itemElemSpacing + itemElemSkeletonOffset,
-    // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
+    // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
     marginLeft: itemElemSkeletonOffset,
     flexShrink: 0,
     backgroundColor: skeletonColor,

package/dist/cjs/menu-section/section.js

@@ -14,8 +14,8 @@ var _colors = require("@atlaskit/theme/colors");
 var _constants = require("@atlaskit/theme/constants");
 var _typography = require("@atlaskit/theme/typography");
 var _headingItem = _interopRequireDefault(require("../menu-item/heading-item"));
-var _excluded = ["children", "overrides", "title", "testId", "isScrollable", "hasSeparator", "id"];
-/* eslint-disable @atlaskit/design-system/ensure-design-token-usage-spacing */
+var _excluded = ["children", "overrides", "title", "testId", "isScrollable", "hasSeparator", "id", "isList"];
+/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
 /** @jsx jsx */
 // eslint-disable-next-line @atlaskit/design-system/no-deprecated-imports
 var gridSize = (0, _constants.gridSize)();
@@ -96,17 +96,34 @@ var Section = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     isScrollable = _ref.isScrollable,
     hasSeparator = _ref.hasSeparator,
     id = _ref.id,
+    _ref$isList = _ref.isList,
+    isList = _ref$isList === void 0 ? false : _ref$isList,
     rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   (0, _deprecationWarning.propDeprecationWarning)("@atlaskit/menu", 'overrides', overrides !== undefined, '' // TODO: Create DAC post when primitives/xcss are available as alternatives
   );
 
+  var content = isList ? (0, _react2.jsx)("ul", {
+    style: {
+      margin: 0,
+      padding: 0
+    }
+  }, _react.Children.map(_react.Children.toArray(children), function (child, index) {
+    return (0, _react2.jsx)("li", {
+      style: {
+        listStyleType: 'none',
+        margin: 0,
+        padding: 0
+      },
+      key: index
+    }, child);
+  })) : children;
   var childrenMarkup = title !== undefined ? (0, _react2.jsx)(_react.Fragment, null, (0, _react2.jsx)(_headingItem.default
   // eslint-disable-next-line @repo/internal/react/no-unsafe-overrides
   , {
     cssFn: overrides && overrides.HeadingItem && overrides.HeadingItem.cssFn,
     testId: testId && "".concat(testId, "--heading"),
     "aria-hidden": true
-  }, title), children) : children;
+  }, title), content) : (0, _react2.jsx)(_react.Fragment, null, content);
   return (0, _react2.jsx)("div", (0, _extends2.default)({}, rest, {
     id: id
     // NOTE: Firefox allows elements that have "overflow: auto" to gain focus (as if it had tab-index="0")

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/menu",
-	"version": "1.8.1",
+	"version": "1.9.1",
 	"sideEffects": false
 }

package/dist/es2019/menu-item/skeleton-item.js

@@ -29,7 +29,7 @@ const skeletonStyles = css({
     // This is a little bespoke but we need to push everything down 1px
     // because the skeleton content should align to the bottom of the text.
     // Confirm VR test failures before accepting a change.
-    // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
+    // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
     marginTop: 1,
     backgroundColor: skeletonColor,
     borderRadius: skeletonTextBorderRadius,
@@ -65,9 +65,9 @@ const beforeElementStyles = css({
   '::before': {
     width: skeletonItemElemSize,
     height: skeletonItemElemSize,
-    // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
+    // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
     marginRight: itemElemSpacing + itemElemSkeletonOffset,
-    // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
+    // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
     marginLeft: itemElemSkeletonOffset,
     flexShrink: 0,
     backgroundColor: skeletonColor,

package/dist/es2019/menu-section/section.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/extends";
-/* eslint-disable @atlaskit/design-system/ensure-design-token-usage-spacing */
+/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
 /** @jsx jsx */
-import { forwardRef, Fragment } from 'react';
+import { Children, forwardRef, Fragment } from 'react';
 import { css, jsx } from '@emotion/react';
 import { propDeprecationWarning } from '@atlaskit/ds-lib/deprecation-warning';
 import { N30A } from '@atlaskit/theme/colors';
@@ -87,18 +87,32 @@ const Section = /*#__PURE__*/forwardRef(({
   isScrollable,
   hasSeparator,
   id,
+  isList = false,
   ...rest
 }, ref) => {
   propDeprecationWarning("@atlaskit/menu", 'overrides', overrides !== undefined, '' // TODO: Create DAC post when primitives/xcss are available as alternatives
   );
 
+  const content = isList ? jsx("ul", {
+    style: {
+      margin: 0,
+      padding: 0
+    }
+  }, Children.map(Children.toArray(children), (child, index) => jsx("li", {
+    style: {
+      listStyleType: 'none',
+      margin: 0,
+      padding: 0
+    },
+    key: index
+  }, child))) : children;
   const childrenMarkup = title !== undefined ? jsx(Fragment, null, jsx(HeadingItem
   // eslint-disable-next-line @repo/internal/react/no-unsafe-overrides
   , {
     cssFn: overrides && overrides.HeadingItem && overrides.HeadingItem.cssFn,
     testId: testId && `${testId}--heading`,
     "aria-hidden": true
-  }, title), children) : children;
+  }, title), content) : jsx(Fragment, null, content);
   return jsx("div", _extends({}, rest, {
     id: id
     // NOTE: Firefox allows elements that have "overflow: auto" to gain focus (as if it had tab-index="0")

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/menu",
-	"version": "1.8.1",
+	"version": "1.9.1",
 	"sideEffects": false
 }

package/dist/esm/menu-item/skeleton-item.js

@@ -29,7 +29,7 @@ var skeletonStyles = css({
     // This is a little bespoke but we need to push everything down 1px
     // because the skeleton content should align to the bottom of the text.
     // Confirm VR test failures before accepting a change.
-    // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
+    // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
     marginTop: 1,
     backgroundColor: skeletonColor,
     borderRadius: skeletonTextBorderRadius,
@@ -65,9 +65,9 @@ var beforeElementStyles = css({
   '::before': {
     width: skeletonItemElemSize,
     height: skeletonItemElemSize,
-    // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
+    // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
     marginRight: itemElemSpacing + itemElemSkeletonOffset,
-    // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
+    // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
     marginLeft: itemElemSkeletonOffset,
     flexShrink: 0,
     backgroundColor: skeletonColor,

package/dist/esm/menu-section/section.js

@@ -1,9 +1,9 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["children", "overrides", "title", "testId", "isScrollable", "hasSeparator", "id"];
-/* eslint-disable @atlaskit/design-system/ensure-design-token-usage-spacing */
+var _excluded = ["children", "overrides", "title", "testId", "isScrollable", "hasSeparator", "id", "isList"];
+/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
 /** @jsx jsx */
-import { forwardRef, Fragment } from 'react';
+import { Children, forwardRef, Fragment } from 'react';
 import { css, jsx } from '@emotion/react';
 import { propDeprecationWarning } from '@atlaskit/ds-lib/deprecation-warning';
 import { N30A } from '@atlaskit/theme/colors';
@@ -89,17 +89,34 @@ var Section = /*#__PURE__*/forwardRef(function (_ref, ref) {
     isScrollable = _ref.isScrollable,
     hasSeparator = _ref.hasSeparator,
     id = _ref.id,
+    _ref$isList = _ref.isList,
+    isList = _ref$isList === void 0 ? false : _ref$isList,
     rest = _objectWithoutProperties(_ref, _excluded);
   propDeprecationWarning("@atlaskit/menu", 'overrides', overrides !== undefined, '' // TODO: Create DAC post when primitives/xcss are available as alternatives
   );
 
+  var content = isList ? jsx("ul", {
+    style: {
+      margin: 0,
+      padding: 0
+    }
+  }, Children.map(Children.toArray(children), function (child, index) {
+    return jsx("li", {
+      style: {
+        listStyleType: 'none',
+        margin: 0,
+        padding: 0
+      },
+      key: index
+    }, child);
+  })) : children;
   var childrenMarkup = title !== undefined ? jsx(Fragment, null, jsx(HeadingItem
   // eslint-disable-next-line @repo/internal/react/no-unsafe-overrides
   , {
     cssFn: overrides && overrides.HeadingItem && overrides.HeadingItem.cssFn,
     testId: testId && "".concat(testId, "--heading"),
     "aria-hidden": true
-  }, title), children) : children;
+  }, title), content) : jsx(Fragment, null, content);
   return jsx("div", _extends({}, rest, {
     id: id
     // NOTE: Firefox allows elements that have "overflow: auto" to gain focus (as if it had tab-index="0")

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/menu",
-	"version": "1.8.1",
+	"version": "1.9.1",
 	"sideEffects": false
 }

package/dist/types/types.d.ts

@@ -110,6 +110,10 @@ export interface SectionProps {
      * the HeadingItem will not be rendered, and this component acts as a regular Section
      */
     title?: string;
+    /**
+     * Specifically adds <ul> and <li> elements around the items for better semantic markup if it is a list of items
+     */
+    isList?: boolean;
 }
 export interface MenuItemPrimitiveProps {
     children: (props: {

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

@@ -110,6 +110,10 @@ export interface SectionProps {
      * the HeadingItem will not be rendered, and this component acts as a regular Section
      */
     title?: string;
+    /**
+     * Specifically adds <ul> and <li> elements around the items for better semantic markup if it is a list of items
+     */
+    isList?: boolean;
 }
 export interface MenuItemPrimitiveProps {
     children: (props: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/menu",
-  "version": "1.8.1",
+  "version": "1.9.1",
   "description": "A collection of composable menu components that can be used anywhere.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -51,9 +51,9 @@
     "@atlaskit/ds-lib": "^2.2.0",
     "@atlaskit/focus-ring": "^1.3.0",
     "@atlaskit/platform-feature-flags": "^0.2.0",
-    "@atlaskit/primitives": "^0.14.0",
+    "@atlaskit/primitives": "^0.15.0",
     "@atlaskit/theme": "^12.5.0",
-    "@atlaskit/tokens": "^1.9.0",
+    "@atlaskit/tokens": "^1.10.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1"
   },

package/report.api.md

@@ -197,6 +197,7 @@ interface SectionProps {
   children: React.ReactNode;
   hasSeparator?: boolean;
   id?: string;
+  isList?: boolean;
   isScrollable?: boolean;
   // @deprecated (undocumented)
   overrides?: {

package/tmp/api-report-tmp.d.ts

@@ -155,6 +155,7 @@ interface SectionProps {
     children: React.ReactNode;
     hasSeparator?: boolean;
     id?: string;
+    isList?: boolean;
     isScrollable?: boolean;
     // @deprecated (undocumented)
     overrides?: {