@patternfly/react-core 6.0.0-alpha.67 → 6.0.0-alpha.69

package/helpers/package.json

@@ -1 +1 @@
-{"name":"@patternfly/react-core-helpers","main":"../dist/js/helpers/index.js","module":"../dist/esm/helpers/index.js","typings":"../dist/esm/helpers/index.d.ts","version":"6.0.0-alpha.66","private":true}
+{"name":"@patternfly/react-core-helpers","main":"../dist/js/helpers/index.js","module":"../dist/esm/helpers/index.js","typings":"../dist/esm/helpers/index.d.ts","version":"6.0.0-alpha.68","private":true}

package/layouts/package.json

@@ -1 +1 @@
-{"name":"@patternfly/react-core-layouts","main":"../dist/js/layouts/index.js","module":"../dist/esm/layouts/index.js","typings":"../dist/esm/layouts/index.d.ts","version":"6.0.0-alpha.66","private":true}
+{"name":"@patternfly/react-core-layouts","main":"../dist/js/layouts/index.js","module":"../dist/esm/layouts/index.js","typings":"../dist/esm/layouts/index.d.ts","version":"6.0.0-alpha.68","private":true}

package/next/package.json

@@ -1 +1 @@
-{"name":"@patternfly/react-core-next","main":"../dist/js/next/index.js","module":"../dist/esm/next/index.js","typings":"../dist/esm/next/index.d.ts","version":"6.0.0-alpha.66","private":true}
+{"name":"@patternfly/react-core-next","main":"../dist/js/next/index.js","module":"../dist/esm/next/index.js","typings":"../dist/esm/next/index.d.ts","version":"6.0.0-alpha.68","private":true}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "6.0.0-alpha.67",
+  "version": "6.0.0-alpha.69",
   "description": "This library provides a set of common React components for use with the PatternFly reference implementation.",
   "main": "dist/js/index.js",
   "module": "dist/esm/index.js",
@@ -65,5 +65,5 @@
     "react": "^17 || ^18",
     "react-dom": "^17 || ^18"
   },
-  "gitHead": "d9e64b4ebcc17b91ea3ea8a1e3f8b60e901d496b"
+  "gitHead": "1199f35a15534c4e13b62e0b7dcde52603ea1285"
 }

package/src/components/Button/examples/Button.md

@@ -108,7 +108,7 @@ Unlike normal disabled buttons, aria-disabled buttons can support tooltips. Furt
 
 Buttons can display a `count` in the form of a badge to indicate some value or number by passing in the `countOptions` prop as a `BadgeCountObject` object. The `BadgeCountObject` object will handle `count`, `isRead`, and `className` props for the badge count.
 
-```ts file="./ButtonWithCount.tsx" isBeta
+```ts file="./ButtonWithCount.tsx"
 ```
 
 ### Plain with no padding

package/src/components/Dropdown/Dropdown.tsx

@@ -49,7 +49,7 @@ export interface DropdownProps extends MenuProps, OUIAProps {
   /** Callback to allow the dropdown component to change the open state of the menu.
    * Triggered by clicking outside of the menu, or by pressing any keys specificed in onOpenChangeKeys. */
   onOpenChange?: (isOpen: boolean) => void;
-  /** @beta Keys that trigger onOpenChange, defaults to tab and escape. It is highly recommended to include Escape in the array, while Tab may be omitted if the menu contains non-menu items that are focusable. */
+  /** Keys that trigger onOpenChange, defaults to tab and escape. It is highly recommended to include Escape in the array, while Tab may be omitted if the menu contains non-menu items that are focusable. */
   onOpenChangeKeys?: string[];
   /** Indicates if the menu should be without the outer box-shadow. */
   isPlain?: boolean;

package/src/components/ExpandableSection/ExpandableSection.tsx

@@ -55,11 +55,11 @@ export interface ExpandableSectionProps extends React.HTMLProps<HTMLDivElement>
    * both are specified; used for uncontrolled expandable with dynamic toggle text).
    */
   toggleTextExpanded?: string;
-  /** @beta Truncates the expandable content to the specified number of lines when using the
+  /** Truncates the expandable content to the specified number of lines when using the
    * "truncate" variant.
    */
   truncateMaxLines?: number;
-  /** @beta Determines the variant of the expandable section. When passing in "truncate" as the
+  /** Determines the variant of the expandable section. When passing in "truncate" as the
    * variant, the expandable content will be truncated after 3 lines by default.
    */
   variant?: 'default' | 'truncate';

package/src/components/ExpandableSection/ExpandableSectionToggle.tsx

@@ -22,7 +22,7 @@ export interface ExpandableSectionToggleProps extends React.HTMLProps<HTMLDivEle
   toggleId?: string;
   /** Direction the toggle arrow should point when the expandable section is expanded. */
   direction?: 'up' | 'down';
-  /** @beta Flag to determine toggle styling when the expandable content is truncated. */
+  /** Flag to determine toggle styling when the expandable content is truncated. */
   hasTruncatedContent?: boolean;
   /** Flag indicating if the expandable section is expanded. */
   isExpanded?: boolean;

package/src/components/ExpandableSection/examples/ExpandableSection.md

@@ -63,6 +63,6 @@ By using the `toggleContent` prop, you can pass in content other than a simple s
 
 By passing in `variant="truncate"`, the expandable content will be visible up to a maximum number of lines before being truncated, with the toggle revealing or hiding the truncated content. By default the expandable content will truncate after 3 lines, and this can be customized by also passing in the `truncateMaxLines` prop.
 
-```ts file="ExpandableSectionTruncateExpansion.tsx" isBeta
+```ts file="ExpandableSectionTruncateExpansion.tsx"
 
 ```

package/src/components/Form/examples/Form.md

@@ -105,6 +105,6 @@ When using helper text inside a `FormGroup`, the `HelperText` component should b
 
 ### Form state
 
-```ts file="./FormState.tsx" isBeta
+```ts file="./FormState.tsx"
 
 ```

package/src/components/Icon/Icon.tsx

@@ -41,7 +41,7 @@ export interface IconComponentProps extends Omit<React.HTMLProps<HTMLSpanElement
   isInProgress?: boolean;
   /** Aria-label for the default progress icon */
   defaultProgressArialabel?: string;
-  /** @beta Flag indicating whether the icon passed as children should be mirrored for
+  /** Flag indicating whether the icon passed as children should be mirrored for
    * right to left (RTL) languages. This will not mirror the icon passed to progressIcon.
    */
   shouldMirrorRTL?: boolean;

package/src/components/Label/Label.tsx

@@ -29,13 +29,13 @@ export interface LabelProps extends React.HTMLProps<HTMLSpanElement> {
   isCompact?: boolean;
   /** Flag indicating the label is disabled. Works only on clickable labels, so either href or onClick props must be passed in. */
   isDisabled?: boolean;
-  /** @beta Flag indicating the label is editable. */
+  /** Flag indicating the label is editable. */
   isEditable?: boolean;
-  /** @beta Additional props passed to the editable label text div. Optionally passing onInput and onBlur callbacks will allow finer custom text input control. */
+  /** Additional props passed to the editable label text div. Optionally passing onInput and onBlur callbacks will allow finer custom text input control. */
   editableProps?: any;
-  /** @beta Callback when an editable label completes an edit. */
+  /** Callback when an editable label completes an edit. */
   onEditComplete?: (event: MouseEvent | KeyboardEvent, newText: string) => void;
-  /** @beta Callback when an editable label cancels an edit. */
+  /** Callback when an editable label cancels an edit. */
   onEditCancel?: (event: KeyboardEvent, previousText: string) => void;
   /** The max width of the label before it is truncated. Can be any valid CSS unit, such as '100%', '100px', or '16ch'. */
   textMaxWidth?: string;

package/src/components/Label/examples/Label.md

@@ -42,7 +42,7 @@ Click or press either enter or space to begin editing a label. After editing, cl
 
 You can also customize any Label's close button aria-label as this example shows with `closeBtnAriaLabel`.
 
-```ts file="LabelEditable.tsx" isBeta
+```ts file="LabelEditable.tsx"
 
 ```
 
@@ -86,7 +86,7 @@ Labels in a group can also be stacked vertically. This example shows a verical l
 
 ### Editable label group
 
-```ts isBeta file="LabelGroupEditableLabels.tsx"
+```ts file="LabelGroupEditableLabels.tsx"
 
 ```
 
@@ -94,6 +94,6 @@ Labels in a group can also be stacked vertically. This example shows a verical l
 
 The contents of a label group can be modified by removing labels or adding new ones using the add button. For additional documentation that showcases adding a new label, see [label demos](/components/label/react-demos).
 
-```ts isBeta file="LabelGroupEditableAdd.tsx"
+```ts file="LabelGroupEditableAdd.tsx"
 
 ```

package/src/components/Menu/Menu.tsx

@@ -19,34 +19,34 @@ export interface MenuProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'r
   selected?: any | any[];
   /** Callback called when an MenuItems's action button is clicked. You can also specify it within a MenuItemAction. */
   onActionClick?: (event?: any, itemId?: any, actionId?: any) => void;
-  /** @beta Indicates if menu contains a flyout menu */
+  /** Indicates if menu contains a flyout menu */
   containsFlyout?: boolean;
-  /** @beta Indicating that the menu should have nav flyout styling */
+  /** Indicating that the menu should have nav flyout styling */
   isNavFlyout?: boolean;
-  /** @beta Indicates if menu contains a drilldown menu */
+  /** Indicates if menu contains a drilldown menu */
   containsDrilldown?: boolean;
-  /** @beta Indicates if a menu is drilled into */
+  /** Indicates if a menu is drilled into */
   isMenuDrilledIn?: boolean;
-  /** @beta Indicates the path of drilled in menu itemIds */
+  /** Indicates the path of drilled in menu itemIds */
   drilldownItemPath?: string[];
-  /** @beta Array of menus that are drilled in */
+  /** Array of menus that are drilled in */
   drilledInMenus?: string[];
-  /** @beta Callback for drilling into a submenu */
+  /** Callback for drilling into a submenu */
   onDrillIn?: (
     event: React.KeyboardEvent | React.MouseEvent,
     fromItemId: string,
     toItemId: string,
     itemId: string
   ) => void;
-  /** @beta Callback for drilling out of a submenu */
+  /** Callback for drilling out of a submenu */
   onDrillOut?: (event: React.KeyboardEvent | React.MouseEvent, toItemId: string, itemId: string) => void;
-  /** @beta Callback for collecting menu heights */
+  /** Callback for collecting menu heights */
   onGetMenuHeight?: (menuId: string, height: number) => void;
-  /** @beta ID of parent menu for drilldown menus */
+  /** ID of parent menu for drilldown menus */
   parentMenu?: string;
-  /** @beta ID of the currently active menu for the drilldown variant */
+  /** ID of the currently active menu for the drilldown variant */
   activeMenu?: string;
-  /** @beta itemId of the currently active item. You can also specify isActive on the MenuItem. */
+  /** itemId of the currently active item. You can also specify isActive on the MenuItem. */
   activeItemId?: string | number;
   /** @hide Forwarded ref */
   innerRef?: React.Ref<HTMLDivElement>;
@@ -60,7 +60,7 @@ export interface MenuProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'r
   ouiaId?: number | string;
   /** Set the value of data-ouia-safe. Only set to true when the component is in a static state, i.e. no animations are occurring. At all other times, this value must be false. */
   ouiaSafe?: boolean;
-  /** @beta Determines the accessible role of the menu. For a non-checkbox menu that can have
+  /** Determines the accessible role of the menu. For a non-checkbox menu that can have
    * one or more items selected, pass in "listbox". */
   role?: string;
 }

package/src/components/Menu/MenuContainer.tsx

@@ -41,7 +41,6 @@ export interface MenuContainerProps {
 
 /**
  * Container that links a menu and menu toggle together, to handle basic keyboard input and control the opening and closing of a menu.
- * This component is currently in beta and is subject to change.
  */
 export const MenuContainer: React.FunctionComponent<MenuContainerProps> = ({
   menu,

package/src/components/Menu/MenuItem.tsx

@@ -67,15 +67,15 @@ export interface MenuItemProps extends Omit<React.HTMLProps<HTMLLIElement>, 'onC
   isFocused?: boolean;
   /** Flag indicating the item is in danger state */
   isDanger?: boolean;
-  /** @beta Flyout menu. Should not be used if the to prop is defined. */
+  /** Flyout menu. Should not be used if the to prop is defined. */
   flyoutMenu?: React.ReactElement;
-  /** @beta Callback function when mouse leaves trigger */
+  /** Callback function when mouse leaves trigger */
   onShowFlyout?: (event?: any) => void;
-  /** @beta Drilldown menu of the item. Should be a Menu or DrilldownMenu type. */
+  /** Drilldown menu of the item. Should be a Menu or DrilldownMenu type. */
   drilldownMenu?: React.ReactNode | (() => React.ReactNode);
-  /** @beta Sub menu direction */
+  /** Sub menu direction */
   direction?: 'down' | 'up';
-  /** @beta True if item is on current selection path */
+  /** True if item is on current selection path */
   isOnPath?: boolean;
   /** Adds an accessible name to the menu item. */
   'aria-label'?: string;

package/src/components/Menu/MenuList.tsx

@@ -8,7 +8,7 @@ export interface MenuListProps extends React.HTMLProps<HTMLUListElement> {
   children: React.ReactNode;
   /** Additional classes added to the menu list */
   className?: string;
-  /** @beta Indicates to assistive technologies whether more than one item can be selected
+  /** Indicates to assistive technologies whether more than one item can be selected
    * for a non-checkbox menu. Only applies when the menu's role is "listbox".
    */
   isAriaMultiselectable?: boolean;

package/src/components/Menu/examples/Menu.md

@@ -194,7 +194,7 @@ Use a drilldown menu to contain different levels of menu items. When a parent me
 - Use the `onDrillIn` and `onDrillOut` properties to contain callbacks for drilling into and drilling out of a submenu, respectively.
 - To account for updated heights as menus drill in and out of use, use the `onGetMenuHeight` property. When starting from a drilled-in state, the `onGetMenuHeight` property must define the height of the root menu.
 
-```ts file="./MenuWithDrilldown.tsx" isBeta
+```ts file="./MenuWithDrilldown.tsx"
 
 ```
 
@@ -202,7 +202,7 @@ Use a drilldown menu to contain different levels of menu items. When a parent me
 
 To render an initially drilled-in menu, the `drilldownItemPath`, `drilledInMenus`, and `activeMenu` properties must be set to default values.
 
-```ts file="./MenuWithDrilldownInitialState.tsx" isBeta
+```ts file="./MenuWithDrilldownInitialState.tsx"
 
 ```
 
@@ -210,7 +210,7 @@ To render an initially drilled-in menu, the `drilldownItemPath`, `drilledInMenus
 
 For added flexibility with large menus, you may create a menu by passing a function to `drilldownMenu`. This approach allows you to create menu items dynamically, rather than creating everything up front.
 
-```ts file="./MenuWithDrilldownSubmenuFunctions.tsx" isBeta
+```ts file="./MenuWithDrilldownSubmenuFunctions.tsx"
 
 ```
 
@@ -220,7 +220,7 @@ Use [breadcrumbs](/components/breadcrumb) when a drilldown menu has more than 2
 
 To control the height of a menu, use the `maxMenuHeight` property. Selecting the "Set max menu height" checkbox in the following example sets the menu height to "100px" and makes the menu scrollable.
 
-```ts file="MenuWithDrilldownBreadcrumbs.tsx" isBeta
+```ts file="MenuWithDrilldownBreadcrumbs.tsx"
 
 ```
 

package/src/components/MenuToggle/MenuToggle.tsx

@@ -46,7 +46,7 @@ export interface MenuToggleProps
   splitButtonOptions?: SplitButtonOptions;
   /** Variant styles of the menu toggle */
   variant?: 'default' | 'plain' | 'primary' | 'plainText' | 'secondary' | 'typeahead';
-  /** @beta Status styles of the menu toggle */
+  /** Status styles of the menu toggle */
   status?: 'success' | 'warning' | 'danger';
   /** Overrides the status icon */
   statusIcon?: React.ReactNode;

package/src/components/MenuToggle/examples/MenuToggle.md

@@ -283,6 +283,6 @@ To create a toggle with a status, pass in the `status` property to the `MenuTogg
 
 When the status value is "warning" or "danger", you must include helper text that conveys what is causing the warning/error.
 
-```ts isBeta file='MenuToggleStatus.tsx'
+```ts file='MenuToggleStatus.tsx'
 
 ```

package/src/components/Modal/ModalBoxTitle.tsx

@@ -57,7 +57,12 @@ export const ModalBoxTitle: React.FunctionComponent<ModalBoxTitleProps> = ({
     <h1
       id={id}
       ref={h1}
-      className={css(modalStyles.modalBoxTitle, titleIconVariant && modalStyles.modifiers.icon, className)}
+      className={css(
+        modalStyles.modalBoxTitle,
+        titleIconVariant && modalStyles.modifiers.icon,
+        isVariantIcon(titleIconVariant) && modalStyles.modifiers[titleIconVariant],
+        className
+      )}
       {...props}
     >
       {titleIconVariant && (

package/src/components/Modal/ModalHeader.tsx

@@ -54,8 +54,6 @@ export const ModalHeader: React.FunctionComponent<ModalHeaderProps> = ({
     </>
   );
 
-  // TODO: apply variant modifier for icon styling.  Core fix needed first.  similar to this:
-  // className={css(className, isVariantIcon(titleIconVariant) && modalStyles.modifiers[titleIconVariant])}
   return (
     <header className={css(styles.modalBoxHeader, help && styles.modifiers.help, className)} {...props}>
       {help && (

package/src/components/Modal/__tests__/ModalBoxTitle.test.tsx

@@ -1,31 +1,38 @@
 import * as React from 'react';
-import { render } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
 
 import { ModalBoxTitle } from '../ModalBoxTitle';
 import BullhornIcon from '@patternfly/react-icons/dist/esm/icons/bullhorn-icon';
+import styles from '@patternfly/react-styles/css/components/ModalBox/modal-box';
 
 test('ModalBoxTitle alert variant', () => {
   const { asFragment } = render(<ModalBoxTitle title="Test Modal Box warning" id="boxId" titleIconVariant="warning" />);
   expect(asFragment()).toMatchSnapshot();
+  expect(screen.getByRole('heading')).toHaveClass(styles.modifiers.warning);
 });
 
 test('ModalBoxTitle info variant', () => {
   const { asFragment } = render(<ModalBoxTitle title="Test Modal Box info" id="boxId" titleIconVariant="info" />);
+  expect(screen.getByRole('heading')).toHaveClass(styles.modifiers.info);
   expect(asFragment()).toMatchSnapshot();
 });
 
 test('ModalBoxTitle danger variant', () => {
   const { asFragment } = render(<ModalBoxTitle title="Test Modal Box danger" id="boxId" titleIconVariant="danger" />);
+  expect(screen.getByRole('heading')).toHaveClass(styles.modifiers.danger);
   expect(asFragment()).toMatchSnapshot();
 });
 
 test('ModalBoxTitle custom variant', () => {
-  const { asFragment } = render(<ModalBoxTitle title="Test Modal Box warning" id="boxId" titleIconVariant="custom" />);
+  const { asFragment } = render(<ModalBoxTitle title="Test Modal Box custom" id="boxId" titleIconVariant="custom" />);
+  expect(screen.getByRole('heading')).toHaveClass(styles.modifiers.custom);
   expect(asFragment()).toMatchSnapshot();
 });
 
 test('ModalBoxTitle success variant', () => {
   const { asFragment } = render(<ModalBoxTitle title="Test Modal Box success" id="boxId" titleIconVariant="success" />);
+  expect(screen.getByRole('heading')).toHaveClass(styles.modifiers.success);
   expect(asFragment()).toMatchSnapshot();
 });
 

package/src/components/Modal/__tests__/__snapshots__/ModalBoxTitle.test.tsx.snap

@@ -3,7 +3,7 @@
 exports[`ModalBoxTitle alert variant 1`] = `
 <DocumentFragment>
   <h1
-    class="pf-v6-c-modal-box__title pf-m-icon"
+    class="pf-v6-c-modal-box__title pf-m-icon pf-m-warning"
     id="boxId"
   >
     <span
@@ -72,7 +72,7 @@ exports[`ModalBoxTitle custom icon variant 1`] = `
 exports[`ModalBoxTitle custom variant 1`] = `
 <DocumentFragment>
   <h1
-    class="pf-v6-c-modal-box__title pf-m-icon"
+    class="pf-v6-c-modal-box__title pf-m-icon pf-m-custom"
     id="boxId"
   >
     <span
@@ -100,7 +100,7 @@ exports[`ModalBoxTitle custom variant 1`] = `
     <span
       class="pf-v6-c-modal-box__title-text"
     >
-      Test Modal Box warning
+      Test Modal Box custom
     </span>
   </h1>
 </DocumentFragment>
@@ -109,7 +109,7 @@ exports[`ModalBoxTitle custom variant 1`] = `
 exports[`ModalBoxTitle danger variant 1`] = `
 <DocumentFragment>
   <h1
-    class="pf-v6-c-modal-box__title pf-m-icon"
+    class="pf-v6-c-modal-box__title pf-m-icon pf-m-danger"
     id="boxId"
   >
     <span
@@ -146,7 +146,7 @@ exports[`ModalBoxTitle danger variant 1`] = `
 exports[`ModalBoxTitle info variant 1`] = `
 <DocumentFragment>
   <h1
-    class="pf-v6-c-modal-box__title pf-m-icon"
+    class="pf-v6-c-modal-box__title pf-m-icon pf-m-info"
     id="boxId"
   >
     <span
@@ -183,7 +183,7 @@ exports[`ModalBoxTitle info variant 1`] = `
 exports[`ModalBoxTitle success variant 1`] = `
 <DocumentFragment>
   <h1
-    class="pf-v6-c-modal-box__title pf-m-icon"
+    class="pf-v6-c-modal-box__title pf-m-icon pf-m-success"
     id="boxId"
   >
     <span

package/src/components/Nav/NavItem.tsx

@@ -40,7 +40,7 @@ export interface NavItemProps extends Omit<React.HTMLProps<HTMLAnchorElement>, '
   ouiaId?: number | string;
   /** Set the value of data-ouia-safe. Only set to true when the component is in a static state, i.e. no animations are occurring. At all other times, this value must be false. */
   ouiaSafe?: boolean;
-  /** @beta Adds a wrapper around the nav link text. Improves the layout when the text is a react node. */
+  /** Adds a wrapper around the nav link text. Improves the layout when the text is a react node. */
   hasNavLinkWrapper?: boolean;
 }
 

package/src/components/Nav/NavList.tsx

@@ -15,10 +15,6 @@ export interface NavListProps
   children?: React.ReactNode;
   /** Additional classes added to the list */
   className?: string;
-  /** @deprecated Please use backScrollAriaLabel. Aria-label for the left scroll button */
-  ariaLeftScroll?: string;
-  /** @deprecated Please use forwardScrollAriaLabel. Aria-label for the right scroll button */
-  ariaRightScroll?: string;
   /** Aria-label for the back scroll button */
   backScrollAriaLabel?: string;
   /** Aria-label for the forward scroll button */
@@ -30,9 +26,7 @@ class NavList extends React.Component<NavListProps> {
   static contextType = NavContext;
   context!: React.ContextType<typeof NavContext>;
   static defaultProps: NavListProps = {
-    ariaLeftScroll: 'Scroll left',
     backScrollAriaLabel: 'Scroll back',
-    ariaRightScroll: 'Scroll right',
     forwardScrollAriaLabel: 'Scroll foward'
   };
   private direction = 'ltr';
@@ -126,15 +120,7 @@ class NavList extends React.Component<NavListProps> {
   }
 
   render() {
-    const {
-      children,
-      className,
-      ariaLeftScroll,
-      ariaRightScroll,
-      backScrollAriaLabel,
-      forwardScrollAriaLabel,
-      ...props
-    } = this.props;
+    const { children, className, backScrollAriaLabel, forwardScrollAriaLabel, ...props } = this.props;
     const { scrollViewAtStart, scrollViewAtEnd } = this.state;
 
     return (
@@ -147,7 +133,7 @@ class NavList extends React.Component<NavListProps> {
                   <div className={css(styles.navScrollButton)}>
                     <Button
                       variant="plain"
-                      aria-label={backScrollAriaLabel || ariaLeftScroll}
+                      aria-label={backScrollAriaLabel}
                       onClick={this.scrollBack}
                       isDisabled={scrollViewAtStart}
                       tabIndex={isSidebarOpen ? null : -1}
@@ -169,7 +155,7 @@ class NavList extends React.Component<NavListProps> {
                   <div className={css(styles.navScrollButton)}>
                     <Button
                       variant="plain"
-                      aria-label={forwardScrollAriaLabel || ariaRightScroll}
+                      aria-label={forwardScrollAriaLabel}
                       onClick={this.scrollForward}
                       isDisabled={scrollViewAtEnd}
                       tabIndex={isSidebarOpen ? null : -1}

package/src/components/Nav/__tests__/Generated/NavList.test.tsx

@@ -23,7 +23,7 @@ describe('NavList', () => {
           setFlyoutRef: jest.fn()
         }}
       >
-        <NavList children={<>ReactNode</>} className="" ariaLeftScroll="Scroll left" ariaRightScroll="Scroll right" />
+        <NavList children={<>ReactNode</>} className="" backScrollAriaLabel="Scroll left" forwardScrollAriaLabel="Scroll right" />
       </NavContext.Provider>
     );
     expect(asFragment()).toMatchSnapshot();

package/src/components/Nav/examples/Nav.md

@@ -60,19 +60,19 @@ The following example shows two navigation groups, each with a `title` prop pass
 
 A flyout should be a `Menu` component. Press `space` or `right arrow` to open a flyout using the keyboard, use the arrow keys to navigate between flyout items, and press `escape` or `left arrow` to close a flyout.
 
-```ts file="./NavFlyout.tsx" isBeta
+```ts file="./NavFlyout.tsx"
 
 ```
 
 ### Drilldown
 
-```ts isBeta file="./NavDrilldown.tsx"
+```ts file="./NavDrilldown.tsx"
 
 ```
 
 ### Link text
 
-```ts isBeta file="./NavLinkText.tsx"
+```ts file="./NavLinkText.tsx"
 
 ```
 

package/src/components/NumberInput/NumberInput.tsx

@@ -18,9 +18,7 @@ export interface NumberInputProps extends React.HTMLProps<HTMLDivElement> {
   widthChars?: number;
   /** Indicates the whole number input should be disabled */
   isDisabled?: boolean;
-  /** Value to indicate if the input is modified to show that validation state
-   * @beta
-   */
+  /** Value to indicate if the input is modified to show that validation state */
   validated?: 'default' | 'error' | 'warning' | 'success' | ValidatedOptions;
   /** Callback for the minus button */
   onMinus?: (event: React.MouseEvent, name?: string) => void;

package/src/components/Pagination/Pagination.tsx

@@ -108,9 +108,9 @@ export interface PaginationProps extends React.HTMLProps<HTMLDivElement>, OUIAPr
   dropDirection?: 'up' | 'down';
   /** Page to start at. */
   firstPage?: number;
-  /** @beta Flag indicating that pagination should use page insets. */
+  /** Flag indicating that pagination should use page insets. */
   usePageInsets?: boolean;
-  /** @beta Insets at various breakpoints. */
+  /** Insets at various breakpoints. */
   inset?: {
     default?: 'insetNone' | 'insetSm' | 'insetMd' | 'insetLg' | 'insetXl' | 'inset2xl';
     sm?: 'insetNone' | 'insetSm' | 'insetMd' | 'insetLg' | 'insetXl' | 'inset2xl';

package/src/components/Pagination/examples/Pagination.md

@@ -57,5 +57,5 @@ By not passing `itemCount` and passing `toggleTemplate` you can customize the to
 
 ### Inset
 
-```ts file="./PaginationInset.tsx" isBeta
-```
+```ts file="./PaginationInset.tsx"
+```

package/src/components/Select/Select.tsx

@@ -60,7 +60,7 @@ export interface SelectProps extends MenuProps, OUIAProps {
   /** Callback to allow the select component to change the open state of the menu.
    * Triggered by clicking outside of the menu, or by pressing any keys specificed in onOpenChangeKeys. */
   onOpenChange?: (isOpen: boolean) => void;
-  /** @beta Keys that trigger onOpenChange, defaults to tab and escape. It is highly recommended to include Escape in the array, while Tab may be omitted if the menu contains non-menu items that are focusable. */
+  /** Keys that trigger onOpenChange, defaults to tab and escape. It is highly recommended to include Escape in the array, while Tab may be omitted if the menu contains non-menu items that are focusable. */
   onOpenChangeKeys?: string[];
   /** Indicates if the select should be without the outer box-shadow */
   isPlain?: boolean;
@@ -68,7 +68,7 @@ export interface SelectProps extends MenuProps, OUIAProps {
   innerRef?: React.Ref<HTMLDivElement>;
   /** z-index of the select menu */
   zIndex?: number;
-  /** @beta Determines the accessible role of the select. For a checkbox select pass in "menu". */
+  /** Determines the accessible role of the select. For a checkbox select pass in "menu". */
   role?: string;
   /** Additional properties to pass to the popper */
   popperProps?: SelectPopperProps;

package/src/components/Select/SelectList.tsx

@@ -7,9 +7,7 @@ export interface SelectListProps extends MenuListProps {
   children: React.ReactNode;
   /** Classes applied to root element of select list */
   className?: string;
-  /** @beta Indicates to assistive technologies whether more than one item can be selected
-   * for a non-checkbox select.
-   */
+  /** Indicates to assistive technologies whether more than one item can be selected for a non-checkbox select */
   isAriaMultiselectable?: boolean;
 }
 

package/src/components/Select/examples/Select.md

@@ -60,7 +60,7 @@ To create a toggle with a status, pass in `status` to the `MenuToggle`. The defa
 
 When the status value is "warning" or "danger", you must include helper text that conveys what is causing the warning/error.
 
-```ts isBeta file="./SelectValidated.tsx"
+```ts file="./SelectValidated.tsx"
 
 ```
 
@@ -163,4 +163,4 @@ You can add a `<MenuFooter>` component to a select menu to hold additional actio
 
 ```ts file="./SelectFooter.tsx"
 
-```
+```

package/src/components/Spinner/Spinner.tsx

@@ -19,7 +19,7 @@ export interface SpinnerProps extends React.SVGProps<SVGSVGElement> {
   'aria-valuetext'?: string;
   /** Diameter of spinner set as CSS variable */
   diameter?: string;
-  /** @beta Indicates the spinner is inline and the size should inherit the text font size. This will override the size prop. */
+  /** Indicates the spinner is inline and the size should inherit the text font size. This will override the size prop. */
   isInline?: boolean;
   /** Accessible label to describe what is loading */
   'aria-label'?: string;

package/src/components/Spinner/examples/Spinner.md

@@ -19,5 +19,5 @@ propComponents: ['Spinner']
 ```
 
 ### Inline size
-```ts file="./SpinnerInline.tsx" isBeta
+```ts file="./SpinnerInline.tsx"
 ```