@atlaskit/side-navigation 3.0.9 → 3.1.0

package/constellation/index/examples.mdx

@@ -16,7 +16,7 @@ import SectionExample from '../../examples/constellation/section';
 
 ## Default
 
-A side navigation example showing all [components](#side-navigation-components) and [items](#side-navigation-items) composed together.
+This side navigation example shows all of the [components](#side-navigation-components) and [items](#side-navigation-items) composed together.
 
 <Example Component={DefaultExample} packageName="@atlaskit/side-navigation" />
 
@@ -24,14 +24,15 @@ A side navigation example showing all [components](#side-navigation-components)
 
 ### Container
 
-Uses 100% of its parent's height and width, so make sure to place it into an element with explicit values set.<br />
-**Minimum width of 240px.**
+Uses 100% of its parent's height and width, so make sure to place it into an element with explicit values set.
+
+The minimum width of the container is `240px`.
 
 <Example Component={ContainerExample} packageName="@atlaskit/side-navigation" />
 
 ### Header and footer
 
-You can customise header and footer using `NavigationHeader` and `NavigationFooter`.
+Use `NavigationHeader` and `NavigationFooter` to customise the header and footer.
 
 <Example
   Component={HeaderAndFooterExample}
@@ -40,46 +41,47 @@ You can customise header and footer using `NavigationHeader` and `NavigationFoot
 
 ### Content
 
-Used as the container for [navigation items](#side-navigation-items). For nested views see the following example.
+This is used as the container for [navigation items](#side-navigation-items). For nested views see the [nested navigation example](#nested-navigation).
 
 <Example Component={ContentExample} packageName="@atlaskit/side-navigation" />
 
 ### Section
 
-Used to separate items into sections. Using the `title` prop makes a section implicitly group the items for screen readers with no additional work required.
+This is used to separate items into sections. Using the `title` prop makes a section implicitly group the items for assistive technology such as screen readers with no extra work required.
 
 <Example Component={SectionExample} packageName="@atlaskit/side-navigation" />
 
 ### Nested navigation
 
-The container for navigation items with nested views is `NestableNavigationContent`.
+Use `NestableNavigationContent` if you need a container for navigation items with nested views.
 
 <Example Component={NestedExample} packageName="@atlaskit/side-navigation" />
 
 ## Side navigation items
 
-Granular items that can be rendered as part of the navigation experience.<br />
-The `Section` component **must** be used to ensure consistent spacing around blocks of items.
+Granular items that can be rendered as part of the navigation experience.
+
+You must use the `Section` component to ensure consistent spacing around blocks of items.
 
 ### Go back item
 
-This item is used to provide a customized "go back" button in nested navigations.
+Use the go back item to provide a customized "go back" button in nested navigations.
 
 <Example Component={GoBackExample} packageName="@atlaskit/side-navigation" />
 
 ### Link item
 
-Renders an item wrapped in an anchor tag, useful when you have an item that should change routes using native browser navigation.
+This renders an item wrapped in an anchor tag, useful when you have an item that should navigate to another page using native browser navigation.
 
-For custom SPA transitions use a custom item with the respective router logic, following the next example.
+For custom SPA transitions use a custom item with the respective router logic, following the [custom item example](#custom-item).
 
 <Example Component={LinkItemExample} packageName="@atlaskit/side-navigation" />
 
 ### Custom item
 
-Handles use cases where a custom router link component is needed.
+This handles use cases where a custom router link component is needed.
 
-The custom component receives all overflow props passed to the custom item component, as well as when using TypeScript will add the custom component props to the root component props type for type safety.
+The custom component receives all overflow props passed to the custom item component. When using TypeScript this will add the custom component props to the root component props type for type safety.
 
 <Example
   Component={CustomItemExample}
@@ -88,17 +90,13 @@ The custom component receives all overflow props passed to the custom item compo
 
 ### Button item
 
-Renders an item wrapped in a button tag, used primarily when an action does something other than changing routes.
+This renders an item wrapped in a button tag. Use this when an action does something other than navigating to another page.
 
 <Example
   Component={ButtonItemExample}
   packageName="@atlaskit/side-navigation"
 />
 
-### Heading item
-
-Available for advanced use cases, for most situations providing a `title` to `Section` should be enough.
-
 ## Loading
 
 Use loading skeletons to reduce the perceived loading time.

package/constellation/index/usage.mdx

@@ -4,13 +4,27 @@ order: 2
 
 ## Usage
 
+The side navigation helps people move around within a subsection of a product. For example, navigating through the topics in a Confluence space, or to specific tasks within their Jira project.
+
+Use the side navigation with the [page layout component](/components/page-layout/examples) to compose your navigation experience. This ensures that you get access to useful accessibility and customization features by default.
+
+## Accessibility
+
+- Keep nested navigation levels to a minimum. If you need to use a nested navigation, always provide a "go back" button to help people get out of the menu.
+- Provide a unique `label` for every different navigation in the page layout. Make sure that the navigation label is meaningful and not direction-based. For example, "Current project" not "Left navigation". If it's the same navigation repeated in another place on the page layout, use the same `label`.
+- Don't include the word "navigation" in your `label`. The `<nav>` semantics mean assistive technology will already tell people that they are using a navigation.
+
+## Best practices
+
 ### Loading states
 
-Occasionally it's necessary to load some of the side navigation content asynchronously. There are a few things to take care of
+Sometimes you'll need to load some of the side navigation content asynchronously. There are a few things to keep in mind:
+
+- Only use skeletons when you're certain of what the loaded state will look like. Most items that appear in side navigation are probably fine to use with skeletons, for example, `@atlaskit/tree`.
+- When transitioning from loading skeleton to loaded items, try to ensure the jump doesn't look janky - use the equivalent skeleton item that is appropriate and be careful of things changing size by a few pixels. We should be striving for UI that feels **stable**, which means it doesn't jump around when content loads.
+- Ensure loading does not take too long - try to anticipate if people will look at your menu via hover events and pre-load the data as soon as possible.
+- When the content is loading in, make sure it all loads in at the same time - our minds aren't fast enough to distinguish each item loading individually, for example, and it appears slower to most people.
 
-- Only use skeletons when you're quite certain of what the loaded state will look like. Most items that would appear in side navigation are probably fine to use with skeletons, for example, `@atlaskit/tree`.
-- When transitioning from loading skeleton to loaded items, try to ensure the jump does not look janky - use the equivalent skeleton item that is appropriate and be careful of things jumping around by a few pixels. We should be striving for UI that feels **stable**, which means it doesn't jump around when content loads.
-- Ensure loading does not take too long - try to anticipate if a user will look at your menu via hover events and the like, and pre-load the data as soon as possible.
-- When content is loading in, make sure it all loads in at the same time - our minds aren't fast enough to distinguish each item loading individually, for example, and it would appear slower to most users.
+## Related
 
-For a more in-depth look at how to approach loading states, please check out the _work in progress_ [skeleton exploration](<https://hello.atlassian.net/wiki/spaces/ADG/pages/598816601/Loading+experiences+-+3.4+-+Guideline+exploration+-+Skeleton#Exploration-(spec)>) (content restricted to Atlassian staff).
+- Use the side navigation with the [page layout component](/components/page-layout/examples).

package/dist/cjs/components/NestingItem/index.js

@@ -96,6 +96,7 @@ var NestingItem = function NestingItem(props) {
     }
 
     // Avoid a nesting transition if a modifier key is detected during click.
+    // @ts-expect-error - Argument of type 'MouseEvent<Element, MouseEvent> | KeyboardEvent<Element>' is not assignable to parameter of type 'MouseEvent'
     if (isNormalClick(e)) {
       setIsInteracted(true);
       onNest(id);

package/dist/cjs/components/Section/heading-item.js

@@ -13,7 +13,7 @@ var _context = require("../NestableNavigationContent/context");
 /**
  * __Heading item__
  *
- * Available for advanced use cases, for most situations providing a title to Section should be enough.
+ * Available for advanced use cases, for most situations providing a `title` to `section` should be enough.
  *
  */
 var HeadingItem = function HeadingItem(props) {

package/dist/es2019/components/NestingItem/index.js

@@ -75,6 +75,7 @@ const NestingItem = props => {
     }
 
     // Avoid a nesting transition if a modifier key is detected during click.
+    // @ts-expect-error - Argument of type 'MouseEvent<Element, MouseEvent> | KeyboardEvent<Element>' is not assignable to parameter of type 'MouseEvent'
     if (isNormalClick(e)) {
       setIsInteracted(true);
       onNest(id);

package/dist/es2019/components/Section/heading-item.js

@@ -6,7 +6,7 @@ import { useShouldNestedElementRender } from '../NestableNavigationContent/conte
 /**
  * __Heading item__
  *
- * Available for advanced use cases, for most situations providing a title to Section should be enough.
+ * Available for advanced use cases, for most situations providing a `title` to `section` should be enough.
  *
  */
 const HeadingItem = props => {

package/dist/esm/components/NestingItem/index.js

@@ -86,6 +86,7 @@ var NestingItem = function NestingItem(props) {
     }
 
     // Avoid a nesting transition if a modifier key is detected during click.
+    // @ts-expect-error - Argument of type 'MouseEvent<Element, MouseEvent> | KeyboardEvent<Element>' is not assignable to parameter of type 'MouseEvent'
     if (isNormalClick(e)) {
       setIsInteracted(true);
       onNest(id);

package/dist/esm/components/Section/heading-item.js

@@ -6,7 +6,7 @@ import { useShouldNestedElementRender } from '../NestableNavigationContent/conte
 /**
  * __Heading item__
  *
- * Available for advanced use cases, for most situations providing a title to Section should be enough.
+ * Available for advanced use cases, for most situations providing a `title` to `section` should be enough.
  *
  */
 var HeadingItem = function HeadingItem(props) {

package/dist/types/components/Header/index.d.ts

@@ -16,7 +16,7 @@ export type HeaderProps = {
     cssFn?: CSSFn;
     /**
      * Element to render before the item text.
-     * Generally should be an [icon](https://atlaskit.atlassian.com/packages/design-system/icon) component.
+     * Generally should be an [icon](https://atlassian.design/components/icon/icon-explorer) component.
      */
     iconBefore?: React.ReactNode;
     /**

package/dist/types/components/LoadingItems/index.d.ts

@@ -11,8 +11,8 @@ export interface LoadingItemsProps {
      */
     fallback: React.ReactNode;
     /**
-     * Used to show either the loading fallback or the loaded contents.
-     * Will cross fade between children and fallback when this is flipped.
+     * Use this to show either the loading fallback or the loaded contents.
+     * It will cross fade between children and fallback when the value is flipped.
      */
     isLoading?: boolean;
     /**

package/dist/types/components/NestableNavigationContent/index.d.ts

@@ -3,9 +3,9 @@ import { jsx } from '@emotion/react';
 export declare const ROOT_ID = "ATLASKIT_NESTED_ROOT";
 export interface NestableNavigationContentProps {
     /**
-     * The NestableNavigationContent wraps the entire navigation hierarchy of a side-navigation.
+     * The NestableNavigationContent wraps the entire navigation hierarchy of a side navigation.
      * Using this component is only needed if you want to enable nested views with [nesting items](/packages/navigation/side-navigation/docs/nesting-item),
-     * else you should use [navigation content](/packages/navigation/side-navigation/docs/navigation-content) instead.
+     * otherwise you should use [navigation content](/packages/navigation/side-navigation/docs/navigation-content) instead.
      */
     children: JSX.Element | JSX.Element[];
     /**
@@ -19,13 +19,13 @@ export interface NestableNavigationContentProps {
      */
     testId?: string;
     /**
-     * Forces the top scroll indicator to be shown. This prop should be used when needing to
+     * This forces the top scroll indicator to be shown. Use this prop when you need to
      * distinctly separate the side navigation header from the side navigation content.
      */
     showTopScrollIndicator?: boolean;
     /**
      * Array of the initial stack you want to show.
-     * Useful when wanting to set the initial nested view but not wanting to opt into controlled state.
+     * This is useful when you want to set the initial nested view but don't want to opt into a controlled state.
      * Make sure to have all intermediate navigation pages line up.
      */
     initialStack?: string[];
@@ -38,13 +38,13 @@ export interface NestableNavigationContentProps {
     stack?: string[];
     /**
      * Allows you to react based on transitions between [nesting items](/packages/navigation/side-navigation/docs/nesting-item).
-     * It will be called everytime a user navigates from one [nesting item](/packages/navigation/side-navigation/docs/nesting-item) to another,
+     * It will be called everytime a person navigates from one [nesting item](/packages/navigation/side-navigation/docs/nesting-item) to another,
      * both up or down the navigation hierarchy.
      * This prop should be used with the `stack` prop for controlled behavior.
      */
     onChange?: (stack: string[]) => void;
     /**
-     * Called when a nesting id that does not exist among `<NestingItem>`s is pushed to the stack. Use this callback to be notified when there is an undefined nesting state.
+     * Called when a nesting ID that does not exist among `<NestingItem>`s is pushed to the stack. Use this callback to be notified when there is an undefined nesting state.
      * Provides you with the stack which led to the undefined state, with the top of the stack (last item in array) being the invalid item.
      */
     onUnknownNest?: (stack: string[]) => void;

package/dist/types/components/NestingItem/index.d.ts

@@ -16,8 +16,8 @@ interface NestingItemOverrides extends Overrides {
 }
 export interface NestingItemProps<TCustomComponentProps = CustomItemComponentProps> {
     /**
-     * A **unique identifier** for the nesting item.
-     * Every nesting item component needs a unique id else undefined behavior will occur.
+     * A unique identifier for the nesting item.
+     * Every nesting item component needs a unique ID, or else undefined behavior will occur.
      */
     id: string;
     /**
@@ -52,16 +52,16 @@ export interface NestingItemProps<TCustomComponentProps = CustomItemComponentPro
     cssFn?: CSSFn;
     /**
      * Element to render before the item text.
-     * Generally should be an [icon](https://atlaskit.atlassian.com/packages/design-system/icon) component.
+     * Generally should be an [icon](https://atlassian.design/components/icon/icon-explorer) 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.
+     * Generally should be an [icon](https://atlassian.design/components/icon/icon-explorer) component.
      */
     iconAfter?: React.ReactNode;
     /**
-     * Event that is triggered when the element is clicked.
+     * Event that is triggered when a person clicks the element.
      */
     onClick?: (event: React.MouseEvent | React.KeyboardEvent) => void;
     /**
@@ -70,7 +70,7 @@ export interface NestingItemProps<TCustomComponentProps = CustomItemComponentPro
      */
     description?: string | JSX.Element;
     /**
-     * Makes the element appear disabled as well as removing interactivity.
+     * Makes the element appear disabled and removes interactivity. Be aware that disabled UI does not appear to people who use assistive technology, so avoid using this if it still needs to appear in the tab order.
      */
     isDisabled?: boolean;
     /**

package/dist/types/components/Section/heading-item.d.ts

@@ -4,7 +4,7 @@ export type { HeadingItemProps } from '@atlaskit/menu';
 /**
  * __Heading item__
  *
- * Available for advanced use cases, for most situations providing a title to Section should be enough.
+ * Available for advanced use cases, for most situations providing a `title` to `section` should be enough.
  *
  */
 declare const HeadingItem: (props: HeadingItemProps) => JSX.Element | null;

package/dist/types/components/Section/section.d.ts

@@ -1,17 +1,17 @@
 import React from 'react';
 export interface SectionProps {
     /**
-     * Children of the section,
-     * should generally be item or heading components.
+     * The children of the section.
+     * These should generally be item or heading components.
      */
     children: React.ReactNode;
     /**
      * The text passed to heading.
-     * If a title is not provided no heading will be rendered.
+     * If you don't provide a title, then the heading won't be rendered.
      */
     title?: string;
     /**
-     * Will render a border at the top of the section.
+     * This will render a border at the top of the section.
      */
     hasSeparator?: boolean;
     /**

package/dist/types/components/SideNavigation/index.d.ts

@@ -1,8 +1,8 @@
 /// <reference types="react" />
 export interface SideNavigationProps {
     /**
-     *  Describes the specific role of this navigation component for users viewing the page with a screen reader.
-     *  Differentiates from other navigation components on a page.
+     *  Describes the specific role of this navigation component for people viewing the page with assistive technology.
+     *  This differentiates the navigation from other navigation components on a page.
      */
     label: string;
     /**

package/dist/types-ts4.5/components/Header/index.d.ts

@@ -16,7 +16,7 @@ export type HeaderProps = {
     cssFn?: CSSFn;
     /**
      * Element to render before the item text.
-     * Generally should be an [icon](https://atlaskit.atlassian.com/packages/design-system/icon) component.
+     * Generally should be an [icon](https://atlassian.design/components/icon/icon-explorer) component.
      */
     iconBefore?: React.ReactNode;
     /**

package/dist/types-ts4.5/components/LoadingItems/index.d.ts

@@ -11,8 +11,8 @@ export interface LoadingItemsProps {
      */
     fallback: React.ReactNode;
     /**
-     * Used to show either the loading fallback or the loaded contents.
-     * Will cross fade between children and fallback when this is flipped.
+     * Use this to show either the loading fallback or the loaded contents.
+     * It will cross fade between children and fallback when the value is flipped.
      */
     isLoading?: boolean;
     /**

package/dist/types-ts4.5/components/NestableNavigationContent/index.d.ts

@@ -3,9 +3,9 @@ import { jsx } from '@emotion/react';
 export declare const ROOT_ID = "ATLASKIT_NESTED_ROOT";
 export interface NestableNavigationContentProps {
     /**
-     * The NestableNavigationContent wraps the entire navigation hierarchy of a side-navigation.
+     * The NestableNavigationContent wraps the entire navigation hierarchy of a side navigation.
      * Using this component is only needed if you want to enable nested views with [nesting items](/packages/navigation/side-navigation/docs/nesting-item),
-     * else you should use [navigation content](/packages/navigation/side-navigation/docs/navigation-content) instead.
+     * otherwise you should use [navigation content](/packages/navigation/side-navigation/docs/navigation-content) instead.
      */
     children: JSX.Element | JSX.Element[];
     /**
@@ -19,13 +19,13 @@ export interface NestableNavigationContentProps {
      */
     testId?: string;
     /**
-     * Forces the top scroll indicator to be shown. This prop should be used when needing to
+     * This forces the top scroll indicator to be shown. Use this prop when you need to
      * distinctly separate the side navigation header from the side navigation content.
      */
     showTopScrollIndicator?: boolean;
     /**
      * Array of the initial stack you want to show.
-     * Useful when wanting to set the initial nested view but not wanting to opt into controlled state.
+     * This is useful when you want to set the initial nested view but don't want to opt into a controlled state.
      * Make sure to have all intermediate navigation pages line up.
      */
     initialStack?: string[];
@@ -38,13 +38,13 @@ export interface NestableNavigationContentProps {
     stack?: string[];
     /**
      * Allows you to react based on transitions between [nesting items](/packages/navigation/side-navigation/docs/nesting-item).
-     * It will be called everytime a user navigates from one [nesting item](/packages/navigation/side-navigation/docs/nesting-item) to another,
+     * It will be called everytime a person navigates from one [nesting item](/packages/navigation/side-navigation/docs/nesting-item) to another,
      * both up or down the navigation hierarchy.
      * This prop should be used with the `stack` prop for controlled behavior.
      */
     onChange?: (stack: string[]) => void;
     /**
-     * Called when a nesting id that does not exist among `<NestingItem>`s is pushed to the stack. Use this callback to be notified when there is an undefined nesting state.
+     * Called when a nesting ID that does not exist among `<NestingItem>`s is pushed to the stack. Use this callback to be notified when there is an undefined nesting state.
      * Provides you with the stack which led to the undefined state, with the top of the stack (last item in array) being the invalid item.
      */
     onUnknownNest?: (stack: string[]) => void;

package/dist/types-ts4.5/components/NestingItem/index.d.ts

@@ -16,8 +16,8 @@ interface NestingItemOverrides extends Overrides {
 }
 export interface NestingItemProps<TCustomComponentProps = CustomItemComponentProps> {
     /**
-     * A **unique identifier** for the nesting item.
-     * Every nesting item component needs a unique id else undefined behavior will occur.
+     * A unique identifier for the nesting item.
+     * Every nesting item component needs a unique ID, or else undefined behavior will occur.
      */
     id: string;
     /**
@@ -52,16 +52,16 @@ export interface NestingItemProps<TCustomComponentProps = CustomItemComponentPro
     cssFn?: CSSFn;
     /**
      * Element to render before the item text.
-     * Generally should be an [icon](https://atlaskit.atlassian.com/packages/design-system/icon) component.
+     * Generally should be an [icon](https://atlassian.design/components/icon/icon-explorer) 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.
+     * Generally should be an [icon](https://atlassian.design/components/icon/icon-explorer) component.
      */
     iconAfter?: React.ReactNode;
     /**
-     * Event that is triggered when the element is clicked.
+     * Event that is triggered when a person clicks the element.
      */
     onClick?: (event: React.MouseEvent | React.KeyboardEvent) => void;
     /**
@@ -70,7 +70,7 @@ export interface NestingItemProps<TCustomComponentProps = CustomItemComponentPro
      */
     description?: string | JSX.Element;
     /**
-     * Makes the element appear disabled as well as removing interactivity.
+     * Makes the element appear disabled and removes interactivity. Be aware that disabled UI does not appear to people who use assistive technology, so avoid using this if it still needs to appear in the tab order.
      */
     isDisabled?: boolean;
     /**

package/dist/types-ts4.5/components/Section/heading-item.d.ts

@@ -4,7 +4,7 @@ export type { HeadingItemProps } from '@atlaskit/menu';
 /**
  * __Heading item__
  *
- * Available for advanced use cases, for most situations providing a title to Section should be enough.
+ * Available for advanced use cases, for most situations providing a `title` to `section` should be enough.
  *
  */
 declare const HeadingItem: (props: HeadingItemProps) => JSX.Element | null;

package/dist/types-ts4.5/components/Section/section.d.ts

@@ -1,17 +1,17 @@
 import React from 'react';
 export interface SectionProps {
     /**
-     * Children of the section,
-     * should generally be item or heading components.
+     * The children of the section.
+     * These should generally be item or heading components.
      */
     children: React.ReactNode;
     /**
      * The text passed to heading.
-     * If a title is not provided no heading will be rendered.
+     * If you don't provide a title, then the heading won't be rendered.
      */
     title?: string;
     /**
-     * Will render a border at the top of the section.
+     * This will render a border at the top of the section.
      */
     hasSeparator?: boolean;
     /**

package/dist/types-ts4.5/components/SideNavigation/index.d.ts

@@ -1,8 +1,8 @@
 /// <reference types="react" />
 export interface SideNavigationProps {
     /**
-     *  Describes the specific role of this navigation component for users viewing the page with a screen reader.
-     *  Differentiates from other navigation components on a page.
+     *  Describes the specific role of this navigation component for people viewing the page with assistive technology.
+     *  This differentiates the navigation from other navigation components on a page.
      */
     label: string;
     /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/side-navigation",
-  "version": "3.0.9",
+  "version": "3.1.0",
   "description": "A highly composable side navigation component that supports nested views.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -26,22 +26,23 @@
     "website": {
       "name": "Side navigation",
       "category": "Components"
-    }
+    },
+    "runReact18": true
   },
   "dependencies": {
-    "@atlaskit/ds-explorations": "^3.3.0",
-    "@atlaskit/ds-lib": "^2.2.0",
+    "@atlaskit/ds-explorations": "^3.5.0",
+    "@atlaskit/ds-lib": "^2.3.0",
     "@atlaskit/icon": "^22.1.0",
-    "@atlaskit/menu": "^2.1.0",
+    "@atlaskit/menu": "^2.2.0",
     "@atlaskit/motion": "^1.5.0",
-    "@atlaskit/primitives": "^5.1.0",
-    "@atlaskit/theme": "^12.6.0",
-    "@atlaskit/tokens": "^1.42.0",
+    "@atlaskit/primitives": "^5.7.0",
+    "@atlaskit/theme": "^12.7.0",
+    "@atlaskit/tokens": "^1.44.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1"
   },
   "peerDependencies": {
-    "react": "^16.8.0"
+    "react": "^16.8.0 || ^17.0.0 || ~18.2.0"
   },
   "devDependencies": {
     "@af/accessibility-testing": "*",