@atlaskit/menu 2.1.12 → 2.1.13

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/menu
 
+## 2.1.13
+
+### Patch Changes
+
+- [#94316](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/94316) [`35fd5ed8e1d7`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/35fd5ed8e1d7) - Upgrading internal dependency `bind-event-listener` to `@^3.0.0`
+
 ## 2.1.12
 
 ### Patch Changes

package/dist/types/types.d.ts

@@ -23,39 +23,39 @@ export interface Overrides {
 export type Dimension = string | number;
 export interface MenuGroupSizing {
     /**
-     * Useful to constrain the menu group minimum height to a specific value.
+     * Use this to constrain the menu group's minimum height to a specific value.
      */
     minHeight?: Dimension;
     /**
-     * Useful to constrain the menu groups height to a specific value.
-     * Needs to be set when wanting to have scrollable sections.
+     * Use this to constrain the menu group's height to a specific value.
+     * This must be set if you want to have scrollable sections.
      */
     maxHeight?: Dimension;
     /**
-     * Useful to constrain the menu group minimum width to a specific value.
+     * Use this to constrain the menu group's minimum width to a specific value.
      */
     minWidth?: Dimension;
     /**
-     * Useful to constrain the menu group width to a specific value.
+     * Use this to constrain the menu group's maximum width to a specific value.
      */
     maxWidth?: Dimension;
 }
 export interface MenuGroupProps extends MenuGroupSizing {
     /**
-     * Children of the menu group,
-     * should generally be `Section` components.
+     * Children of the menu group.
+     * This should generally be `Section` components.
      */
     children: React.ReactNode;
     /**
-     * Used for telling assistive technologies that the menu group is loading.
+     * Used this to tell assistive technologies that the menu group is loading.
      */
     isLoading?: boolean;
     /**
-     * Configure the density of the MenuGroup content.
+     * Configure the density of the menu group content.
      */
     spacing?: SpacingMode;
     /**
-     * Used to override the accessibility role for the element.
+     * Use this to override the accessibility role for the element.
      */
     role?: string;
     /**
@@ -78,17 +78,17 @@ export interface SectionProps {
     id?: string;
     /**
      * Enables scrolling within the section.
-     * Make sure to set `maxHeight` on the parent `MenuGroup` component else it will not work.
+     * This won't work unless `maxHeight` is set on the parent `MenuGroup` component.
      */
     isScrollable?: boolean;
     /**
-     * Will render a border at the top of the section.
+     * Use this to render a border at the top of the section.
      */
     hasSeparator?: boolean;
     /**
-     * Children of the section,
-     * should generally be `Item` or `Heading` components,
-     * but can also be [`EmptyState`](https://atlaskit.atlassian.com/packages/design-system/empty-state)s when wanting to render errors.
+     * Children of the section.
+     * This should generally be `Item` or `Heading` components,
+     * but can also be [`EmptyState`](https://atlaskit.atlassian.com/packages/design-system/empty-state)s if you want to render errors.
      */
     children: React.ReactNode;
     /**
@@ -110,12 +110,12 @@ export interface SectionProps {
         };
     };
     /**
-     * The text passed into the internal HeadingItem. If a title is not provided,
-     * the HeadingItem will not be rendered, and this component acts as a regular Section.
+     * The text passed into the internal `HeadingItem`. If a title isn't provided,
+     * the `HeadingItem` won't be rendered, and this component will act as a regular `Section`.
      */
     title?: string;
     /**
-     * Adds `<ul>` and `<li>` tags around the items for better semantic markup in a list of items.
+     * If your menu contains a list, use this to add `<ul>` and `<li>` tags around the items. This is essential for offering better, accessible semantic markup in a list of items.
      */
     isList?: boolean;
 }
@@ -149,29 +149,29 @@ export interface MenuItemProps {
     cssFn?: CSSFn;
     /**
      * Element to render before the item text.
-     * Generally should be an [icon](https://atlaskit.atlassian.com/packages/design-system/icon) component.
+     * Usually this is an [icon](https://atlaskit.atlassian.com/packages/design-system/icon) component.
      */
     iconBefore?: React.ReactNode;
     /**
      * Element to render after the item text.
-     * Generally should be an [icon](https://atlaskit.atlassian.com/packages/design-system/icon) component.
+     * Usually this is an [icon](https://atlaskit.atlassian.com/packages/design-system/icon) component.
      */
     iconAfter?: React.ReactNode;
     /**
-     * Event that is triggered when the element is clicked.
+     * Event that's triggered when the element is clicked.
      */
     onClick?: (event: React.MouseEvent | React.KeyboardEvent) => void;
     /**
-     * Event that is triggered when the element has been pressed.
+     * Event that's triggered when the element has been pressed.
      */
     onMouseDown?: React.MouseEventHandler;
     /**
      * Description of the item.
-     * This will render smaller text below the primary text of the item as well as slightly increasing the height of the item.
+     * This will render smaller text below the primary text of the item, and slightly increase the height of the item.
      */
     description?: string | JSX.Element;
     /**
-     * Makes the element appear disabled as well as removing interactivity.
+     * Makes the element appear disabled as well as removing interactivity. Avoid disabling menu items wherever possible as this isn’t accessible or usable.
      */
     isDisabled?: boolean;
     /**
@@ -195,11 +195,11 @@ export interface MenuItemProps {
      */
     overrides?: Overrides;
     /**
-     * When `true` the title of the item will wrap multiple lines if it's long enough.
+     * When `true`, the title of the item will wrap multiple lines if it's long enough.
      */
     shouldTitleWrap?: boolean;
     /**
-     * When `true` the description of the item will wrap multiple lines if it's long enough.
+     * When `true`, the description of the item will wrap multiple lines if it's long enough.
      */
     shouldDescriptionWrap?: boolean;
 }
@@ -209,7 +209,7 @@ export interface ButtonItemProps extends MenuItemProps {
      */
     id?: string;
     /**
-     * Used to override the accessibility role for the element.
+     * Use this to override the accessibility role for the element.
      */
     role?: string;
 }
@@ -229,7 +229,7 @@ export interface LinkItemProps extends MenuItemProps {
      */
     rel?: string;
     /**
-     * Used to override the accessibility role for the element.
+     * Use this to override the accessibility role for the element.
      */
     role?: string;
 }
@@ -239,25 +239,25 @@ export interface CustomItemComponentProps {
      */
     children: React.ReactNode;
     /**
-     * Class to apply to the root container of the custom component,
-     * ensure this has been applied so the consistent item styling is applied.
+     * Class to apply to the root container of the custom component.
+     * Ensure this has been applied so the item styling is consistent.
      */
     className: string;
     /**
-     * Test id that is passed through to the custom component.
+     * Test ID that's passed through to the custom component.
      */
     'data-testid'?: string;
     /**
-     * Event handler that is passed through to the custom component.
+     * Event handler that's passed through to the custom component.
      */
     onClick?: (event: React.MouseEvent<HTMLElement>) => void;
     /**
-     * Event handler that is passed through to the custom component.
+     * Event handler that's passed through to the custom component.
      */
     onMouseDown?: (event: React.MouseEvent<HTMLElement>) => void;
     /**
-     * Event handler that is passed through to the custom component.
-     * Used to disable the element from being draggable.
+     * Event handler that's passed through to the custom component.
+     * Use this to disable the element from being draggable.
      */
     onDragStart?: (event: React.DragEvent) => void;
     /**
@@ -266,15 +266,15 @@ export interface CustomItemComponentProps {
     draggable: boolean;
     /**
      * React ref for the raw DOM element,
-     * make sure to place this on the outer most DOM element.
+     * make sure to place this on the outermost DOM element.
      */
     ref?: Ref<any>;
     /**
-     * Makes the element appear disabled as well as removing interactivity.
+     * If the tab is selected, the tab index is `0` and is focusable. Otherwise it is `-1` and is not focusable.
      */
     tabIndex?: number;
     /**
-     * Disabled attribute.
+     * Makes the element appear disabled as well as removing interactivity. Avoid disabling menu items wherever possible as this isn’t accessible or usable.
      */
     disabled?: boolean;
 }
@@ -296,7 +296,7 @@ export interface CustomItemProps<TCustomComponentProps = CustomItemComponentProp
 export interface SkeletonItemProps {
     /**
      * Renders a skeleton circle in the `iconBefore` location.
-     * Takes priority over `hasIcon.
+     * Takes priority over `hasIcon`.
      */
     hasAvatar?: boolean;
     /**
@@ -306,7 +306,7 @@ export interface SkeletonItemProps {
     /**
      *
      * Width of the skeleton item.
-     * Generally you don't need to specify this as it has a staggered width based on `:nth-child` by default.
+     * You usually don't need to specify this, as it has a staggered width based on `:nth-child` by default.
      */
     width?: Dimension;
     /**
@@ -340,7 +340,7 @@ export interface HeadingItemProps {
     children: React.ReactNode;
     /**
      * A unique identifier that can be referenced in the `labelledby` prop of a
-     * section to allow screen readers to announce the name of groups.
+     * section to allow assistive technology to announce the name of groups.
      */
     id?: string;
     /**
@@ -351,7 +351,7 @@ export interface HeadingItemProps {
     testId?: string;
     /**
      * Specifies the heading level in the document structure.
-     * If not specified, level 2 will be applied by default.
+     * If not specified, the default is `h2`.
      */
     headingLevel?: 1 | 2 | 3 | 4 | 5 | 6;
 }
@@ -359,7 +359,7 @@ export interface SkeletonHeadingItemProps {
     /**
      *
      * Width of the skeleton heading item.
-     * Generally you don't need to specify this as it has a staggered width based on `:nth-child` by default.
+     * You usually don't need to specify this, as it has a staggered width based on `:nth-child` by default.
      */
     width?: Dimension;
     /**

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

@@ -23,39 +23,39 @@ export interface Overrides {
 export type Dimension = string | number;
 export interface MenuGroupSizing {
     /**
-     * Useful to constrain the menu group minimum height to a specific value.
+     * Use this to constrain the menu group's minimum height to a specific value.
      */
     minHeight?: Dimension;
     /**
-     * Useful to constrain the menu groups height to a specific value.
-     * Needs to be set when wanting to have scrollable sections.
+     * Use this to constrain the menu group's height to a specific value.
+     * This must be set if you want to have scrollable sections.
      */
     maxHeight?: Dimension;
     /**
-     * Useful to constrain the menu group minimum width to a specific value.
+     * Use this to constrain the menu group's minimum width to a specific value.
      */
     minWidth?: Dimension;
     /**
-     * Useful to constrain the menu group width to a specific value.
+     * Use this to constrain the menu group's maximum width to a specific value.
      */
     maxWidth?: Dimension;
 }
 export interface MenuGroupProps extends MenuGroupSizing {
     /**
-     * Children of the menu group,
-     * should generally be `Section` components.
+     * Children of the menu group.
+     * This should generally be `Section` components.
      */
     children: React.ReactNode;
     /**
-     * Used for telling assistive technologies that the menu group is loading.
+     * Used this to tell assistive technologies that the menu group is loading.
      */
     isLoading?: boolean;
     /**
-     * Configure the density of the MenuGroup content.
+     * Configure the density of the menu group content.
      */
     spacing?: SpacingMode;
     /**
-     * Used to override the accessibility role for the element.
+     * Use this to override the accessibility role for the element.
      */
     role?: string;
     /**
@@ -78,17 +78,17 @@ export interface SectionProps {
     id?: string;
     /**
      * Enables scrolling within the section.
-     * Make sure to set `maxHeight` on the parent `MenuGroup` component else it will not work.
+     * This won't work unless `maxHeight` is set on the parent `MenuGroup` component.
      */
     isScrollable?: boolean;
     /**
-     * Will render a border at the top of the section.
+     * Use this to render a border at the top of the section.
      */
     hasSeparator?: boolean;
     /**
-     * Children of the section,
-     * should generally be `Item` or `Heading` components,
-     * but can also be [`EmptyState`](https://atlaskit.atlassian.com/packages/design-system/empty-state)s when wanting to render errors.
+     * Children of the section.
+     * This should generally be `Item` or `Heading` components,
+     * but can also be [`EmptyState`](https://atlaskit.atlassian.com/packages/design-system/empty-state)s if you want to render errors.
      */
     children: React.ReactNode;
     /**
@@ -110,12 +110,12 @@ export interface SectionProps {
         };
     };
     /**
-     * The text passed into the internal HeadingItem. If a title is not provided,
-     * the HeadingItem will not be rendered, and this component acts as a regular Section.
+     * The text passed into the internal `HeadingItem`. If a title isn't provided,
+     * the `HeadingItem` won't be rendered, and this component will act as a regular `Section`.
      */
     title?: string;
     /**
-     * Adds `<ul>` and `<li>` tags around the items for better semantic markup in a list of items.
+     * If your menu contains a list, use this to add `<ul>` and `<li>` tags around the items. This is essential for offering better, accessible semantic markup in a list of items.
      */
     isList?: boolean;
 }
@@ -149,29 +149,29 @@ export interface MenuItemProps {
     cssFn?: CSSFn;
     /**
      * Element to render before the item text.
-     * Generally should be an [icon](https://atlaskit.atlassian.com/packages/design-system/icon) component.
+     * Usually this is an [icon](https://atlaskit.atlassian.com/packages/design-system/icon) component.
      */
     iconBefore?: React.ReactNode;
     /**
      * Element to render after the item text.
-     * Generally should be an [icon](https://atlaskit.atlassian.com/packages/design-system/icon) component.
+     * Usually this is an [icon](https://atlaskit.atlassian.com/packages/design-system/icon) component.
      */
     iconAfter?: React.ReactNode;
     /**
-     * Event that is triggered when the element is clicked.
+     * Event that's triggered when the element is clicked.
      */
     onClick?: (event: React.MouseEvent | React.KeyboardEvent) => void;
     /**
-     * Event that is triggered when the element has been pressed.
+     * Event that's triggered when the element has been pressed.
      */
     onMouseDown?: React.MouseEventHandler;
     /**
      * Description of the item.
-     * This will render smaller text below the primary text of the item as well as slightly increasing the height of the item.
+     * This will render smaller text below the primary text of the item, and slightly increase the height of the item.
      */
     description?: string | JSX.Element;
     /**
-     * Makes the element appear disabled as well as removing interactivity.
+     * Makes the element appear disabled as well as removing interactivity. Avoid disabling menu items wherever possible as this isn’t accessible or usable.
      */
     isDisabled?: boolean;
     /**
@@ -195,11 +195,11 @@ export interface MenuItemProps {
      */
     overrides?: Overrides;
     /**
-     * When `true` the title of the item will wrap multiple lines if it's long enough.
+     * When `true`, the title of the item will wrap multiple lines if it's long enough.
      */
     shouldTitleWrap?: boolean;
     /**
-     * When `true` the description of the item will wrap multiple lines if it's long enough.
+     * When `true`, the description of the item will wrap multiple lines if it's long enough.
      */
     shouldDescriptionWrap?: boolean;
 }
@@ -209,7 +209,7 @@ export interface ButtonItemProps extends MenuItemProps {
      */
     id?: string;
     /**
-     * Used to override the accessibility role for the element.
+     * Use this to override the accessibility role for the element.
      */
     role?: string;
 }
@@ -229,7 +229,7 @@ export interface LinkItemProps extends MenuItemProps {
      */
     rel?: string;
     /**
-     * Used to override the accessibility role for the element.
+     * Use this to override the accessibility role for the element.
      */
     role?: string;
 }
@@ -239,25 +239,25 @@ export interface CustomItemComponentProps {
      */
     children: React.ReactNode;
     /**
-     * Class to apply to the root container of the custom component,
-     * ensure this has been applied so the consistent item styling is applied.
+     * Class to apply to the root container of the custom component.
+     * Ensure this has been applied so the item styling is consistent.
      */
     className: string;
     /**
-     * Test id that is passed through to the custom component.
+     * Test ID that's passed through to the custom component.
      */
     'data-testid'?: string;
     /**
-     * Event handler that is passed through to the custom component.
+     * Event handler that's passed through to the custom component.
      */
     onClick?: (event: React.MouseEvent<HTMLElement>) => void;
     /**
-     * Event handler that is passed through to the custom component.
+     * Event handler that's passed through to the custom component.
      */
     onMouseDown?: (event: React.MouseEvent<HTMLElement>) => void;
     /**
-     * Event handler that is passed through to the custom component.
-     * Used to disable the element from being draggable.
+     * Event handler that's passed through to the custom component.
+     * Use this to disable the element from being draggable.
      */
     onDragStart?: (event: React.DragEvent) => void;
     /**
@@ -266,15 +266,15 @@ export interface CustomItemComponentProps {
     draggable: boolean;
     /**
      * React ref for the raw DOM element,
-     * make sure to place this on the outer most DOM element.
+     * make sure to place this on the outermost DOM element.
      */
     ref?: Ref<any>;
     /**
-     * Makes the element appear disabled as well as removing interactivity.
+     * If the tab is selected, the tab index is `0` and is focusable. Otherwise it is `-1` and is not focusable.
      */
     tabIndex?: number;
     /**
-     * Disabled attribute.
+     * Makes the element appear disabled as well as removing interactivity. Avoid disabling menu items wherever possible as this isn’t accessible or usable.
      */
     disabled?: boolean;
 }
@@ -296,7 +296,7 @@ export interface CustomItemProps<TCustomComponentProps = CustomItemComponentProp
 export interface SkeletonItemProps {
     /**
      * Renders a skeleton circle in the `iconBefore` location.
-     * Takes priority over `hasIcon.
+     * Takes priority over `hasIcon`.
      */
     hasAvatar?: boolean;
     /**
@@ -306,7 +306,7 @@ export interface SkeletonItemProps {
     /**
      *
      * Width of the skeleton item.
-     * Generally you don't need to specify this as it has a staggered width based on `:nth-child` by default.
+     * You usually don't need to specify this, as it has a staggered width based on `:nth-child` by default.
      */
     width?: Dimension;
     /**
@@ -340,7 +340,7 @@ export interface HeadingItemProps {
     children: React.ReactNode;
     /**
      * A unique identifier that can be referenced in the `labelledby` prop of a
-     * section to allow screen readers to announce the name of groups.
+     * section to allow assistive technology to announce the name of groups.
      */
     id?: string;
     /**
@@ -351,7 +351,7 @@ export interface HeadingItemProps {
     testId?: string;
     /**
      * Specifies the heading level in the document structure.
-     * If not specified, level 2 will be applied by default.
+     * If not specified, the default is `h2`.
      */
     headingLevel?: 1 | 2 | 3 | 4 | 5 | 6;
 }
@@ -359,7 +359,7 @@ export interface SkeletonHeadingItemProps {
     /**
      *
      * Width of the skeleton heading item.
-     * Generally you don't need to specify this as it has a staggered width based on `:nth-child` by default.
+     * You usually don't need to specify this, as it has a staggered width based on `:nth-child` by default.
      */
     width?: Dimension;
     /**

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@atlaskit/menu",
-  "version": "2.1.12",
-  "description": "A collection of composable menu components that can be used anywhere.",
+  "version": "2.1.13",
+  "description": "A list of options to help users navigate, or perform actions.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
   },
@@ -42,10 +42,10 @@
     }
   },
   "dependencies": {
-    "@atlaskit/ds-lib": "^2.2.0",
+    "@atlaskit/ds-lib": "^2.3.0",
     "@atlaskit/focus-ring": "^1.3.0",
     "@atlaskit/platform-feature-flags": "^0.2.0",
-    "@atlaskit/primitives": "^5.5.0",
+    "@atlaskit/primitives": "^5.6.0",
     "@atlaskit/theme": "^12.7.0",
     "@atlaskit/tokens": "^1.43.0",
     "@babel/runtime": "^7.0.0",
@@ -67,7 +67,7 @@
     "@testing-library/react": "^12.1.5",
     "@types/react-router-dom": "^4.3.1",
     "ast-types": "^0.13.3",
-    "bind-event-listener": "^2.1.1",
+    "bind-event-listener": "^3.0.0",
     "jscodeshift": "^0.13.0",
     "react-router-dom": "^4.2.2",
     "storybook-addon-performance": "^0.16.0",