@patternfly/react-core 5.0.0-prerelease.14 → 5.0.0-prerelease.16

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":"5.0.0-prerelease.13"}
+{"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":"5.0.0-prerelease.15"}

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":"5.0.0-prerelease.13"}
+{"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":"5.0.0-prerelease.15"}

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":"5.0.0-prerelease.13"}
+{"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":"5.0.0-prerelease.15"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "5.0.0-prerelease.14",
+  "version": "5.0.0-prerelease.16",
   "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",
@@ -46,15 +46,15 @@
     "subpaths": "node ../../scripts/exportSubpaths.js --config subpaths.config.json"
   },
   "dependencies": {
-    "@patternfly/react-icons": "^5.0.0-prerelease.7",
-    "@patternfly/react-styles": "^5.0.0-prerelease.5",
-    "@patternfly/react-tokens": "^5.0.0-prerelease.5",
+    "@patternfly/react-icons": "^5.0.0-prerelease.8",
+    "@patternfly/react-styles": "^5.0.0-prerelease.6",
+    "@patternfly/react-tokens": "^5.0.0-prerelease.6",
     "focus-trap": "7.4.3",
     "react-dropzone": "^14.2.3",
     "tslib": "^2.5.0"
   },
   "devDependencies": {
-    "@patternfly/patternfly": "5.0.0-prerelease.10",
+    "@patternfly/patternfly": "5.0.0-prerelease.13",
     "@rollup/plugin-commonjs": "^25.0.0",
     "@rollup/plugin-node-resolve": "^15.0.2",
     "@rollup/plugin-replace": "^5.0.2",
@@ -71,5 +71,5 @@
     "react": "^17 || ^18",
     "react-dom": "^17 || ^18"
   },
-  "gitHead": "99ea61e692e7c719c8f1136c67b2024222f915dc"
+  "gitHead": "8e85d977ec1fecf81cc980b0c025d2f63b7fcea1"
 }

package/src/components/Alert/examples/Alert.md

@@ -137,7 +137,7 @@ const AlertTimeout: React.FunctionComponent = () => {
 
 An alert can contain additional, hidden information that is made visible when users click a caret icon. This information can be expanded and collapsed each time the icon is clicked.
 
-It is not recommended to use an expandable alert with a `timeout` in a toast [alert group](/components/alert-group) because the alert could timeout before users have time to interact with and view the entire alert. 
+It is not recommended to use an expandable alert with a `timeout` in a [toast alert group](/components/alert#toast-alert-group) because the alert could timeout before users have time to interact with and view the entire alert. 
 
 See the [toast alert considerations](/components/alert/accessibility#toast-alerts) section of the alert accessibility documentation to understand the accessibility risks associated with using toast alerts.
 
@@ -354,7 +354,7 @@ import { Alert, AlertActionCloseButton } from '@patternfly/react-core';
 
 ### Dynamic live region alerts
 
-Alerts that are asynchronously appended into dynamic [alert groups](/components/alert-group) via the `isLiveRegion` property will be announced to assistive technology the moment the change happens, following the strategy used for `aria-atomic`, which defaults to false. This means only changes of type "addition" will be announced.
+Alerts that are asynchronously appended into dynamic [alert groups](/components/alert/#alert-group-examples) via the `isLiveRegion` property will be announced to assistive technology the moment the change happens, following the strategy used for `aria-atomic`, which defaults to false. This means only changes of type "addition" will be announced.
 
 ```ts file="AlertDynamicLiveRegion.tsx"
 ```
@@ -379,7 +379,7 @@ Alert groups can be one of the following variants:
 | Toast | Toast alert groups contain alerts that typically appear in response to an asynchronous event or user action. These groups are positioned on top of other content at the top right of the page.|
 | Dynamic | Dynamic alert groups contain alerts that typically appear in response to a user action, and are seen within the normal page content flow.|  
 
-Dynamic alerts that are generated after the page initially loads must be appended to either a toast or dynamic `AlertGroup`, both of which must use the `isLiveRegion` property. New alerts appended to a toast or dynamic group will be announced by assistive technologies the moment the change happens. For information about customizing this announcement, read the [aria-atomic and aria-relevant](/components/alert-group/accessibility#aria-atomic-and-aria-relevant) section of the alert group accessibility documentation.
+Dynamic alerts that are generated after the page initially loads must be appended to either a toast or dynamic `AlertGroup`, both of which must use the `isLiveRegion` property. New alerts appended to a toast or dynamic group will be announced by assistive technologies the moment the change happens. For information about customizing this announcement, read the [aria-atomic and aria-relevant](/components/alert/accessibility#aria-atomic-and-aria-relevant) section of the alert accessibility documentation.
 
 ### Static inline alert group
 
@@ -414,7 +414,7 @@ Users navigating via keyboard or another assistive technology will need a way to
 
 The following example shows how alerts can be triggered by an asynchronous event in the application. You can customize how an alert will be announced to assistive technology by adjusting the value of the `aria-live` property. Click the "start async" alert button below and then click the buttons in the above toast examples to demonstrate how asynchronous events add alerts to a group. Click the "stop async alerts" button to halt this behavior.
 
-See the [alert group accessibility tab](/components/alert-group/accessibility) for more information on customizing this behavior.
+See the [alert accessibility tab](/components/alert/accessibility) for more information on customizing this behavior.
 
 ```ts file="./AlertGroupAsync.tsx"
 ```

package/src/components/Dropdown/examples/Dropdown.md

@@ -25,7 +25,7 @@ import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-ico
 
 Basic dropdowns present users with a menu of items upon clicking a dropdown toggle.
 
-A `<Dropdown>` uses a [menu toggle](/components/menu-toggle), which is passed to the `toggle` property, as well as a `<DropdownList>` with multiple `<DropdownItem>` components. To allow a dropdown to change the open state of the menu, pass the `isOpen` property into the `onOpenChange` callback.
+A `<Dropdown>` uses a [menu toggle](/components/menus/menu-toggle), which is passed to the `toggle` property, as well as a `<DropdownList>` with multiple `<DropdownItem>` components. To allow a dropdown to change the open state of the menu, pass the `isOpen` property into the `onOpenChange` callback.
 
 The following example shows a few different states of dropdown items. As shown in this example, dropdown items may:
 

package/src/components/NumberInput/NumberInput.tsx

@@ -139,7 +139,7 @@ export const NumberInput: React.FunctionComponent<NumberInputProps> = ({
             {...(isDisabled && { isDisabled })}
             {...(onChange && { onChange: (event, _value) => onChange(event) })}
             onBlur={handleBlur}
-            {...(!onChange && { isReadOnly: true })}
+            {...(!onChange && { readOnlyVariant: "default" })}
             onKeyDown={keyDownHandler}
             validated={validated}
           />

package/src/components/NumberInput/__tests__/NumberInput.test.tsx

@@ -231,4 +231,17 @@ describe('numberInput', () => {
 
     expect(consoleSpy).not.toHaveBeenCalled();
   });
+
+  test('input is read only if onChange not passed ', () => {
+    render(<NumberInput inputAriaLabel="readonly input" value={5}/>);
+    const input = screen.getByLabelText('readonly input');
+    expect(input).toHaveAttribute('readOnly');
+  });
+
+  test('input is not read only if onChange passed ', () => {
+    const onChangeMock = jest.fn();
+    render(<NumberInput inputAriaLabel="not readonly input" value={5} onChange={onChangeMock}/>);
+    const input = screen.getByLabelText('not readonly input');
+    expect(input).not.toHaveAttribute('readOnly');
+  });
 });

package/src/components/NumberInput/__tests__/__snapshots__/NumberInput.test.tsx.snap

@@ -44,7 +44,7 @@ exports[`numberInput disables lower threshold 1`] = `
         class="pf-v5-c-input-group__item"
       >
         <div
-          class="pf-v5-c-form-control"
+          class="pf-v5-c-form-control pf-m-readonly"
         >
           <input
             aria-invalid="false"
@@ -52,6 +52,7 @@ exports[`numberInput disables lower threshold 1`] = `
             data-ouia-component-id="OUIA-Generated-TextInputBase-7"
             data-ouia-component-type="PF5/TextInput"
             data-ouia-safe="true"
+            readonly=""
             type="number"
             value="0"
           />
@@ -136,7 +137,7 @@ exports[`numberInput disables upper threshold 1`] = `
         class="pf-v5-c-input-group__item"
       >
         <div
-          class="pf-v5-c-form-control"
+          class="pf-v5-c-form-control pf-m-readonly"
         >
           <input
             aria-invalid="false"
@@ -144,6 +145,7 @@ exports[`numberInput disables upper threshold 1`] = `
             data-ouia-component-id="OUIA-Generated-TextInputBase-8"
             data-ouia-component-type="PF5/TextInput"
             data-ouia-safe="true"
+            readonly=""
             type="number"
             value="100"
           />
@@ -230,7 +232,7 @@ exports[`numberInput passes button props successfully 1`] = `
         class="pf-v5-c-input-group__item"
       >
         <div
-          class="pf-v5-c-form-control"
+          class="pf-v5-c-form-control pf-m-readonly"
         >
           <input
             aria-invalid="false"
@@ -238,6 +240,7 @@ exports[`numberInput passes button props successfully 1`] = `
             data-ouia-component-id="OUIA-Generated-TextInputBase-13"
             data-ouia-component-type="PF5/TextInput"
             data-ouia-safe="true"
+            readonly=""
             type="number"
             value="5"
           />
@@ -417,7 +420,7 @@ exports[`numberInput renders custom width 1`] = `
         class="pf-v5-c-input-group__item"
       >
         <div
-          class="pf-v5-c-form-control"
+          class="pf-v5-c-form-control pf-m-readonly"
         >
           <input
             aria-invalid="false"
@@ -425,6 +428,7 @@ exports[`numberInput renders custom width 1`] = `
             data-ouia-component-id="OUIA-Generated-TextInputBase-11"
             data-ouia-component-type="PF5/TextInput"
             data-ouia-safe="true"
+            readonly=""
             type="number"
             value="5"
           />
@@ -510,7 +514,7 @@ exports[`numberInput renders defaults & extra props 1`] = `
         class="pf-v5-c-input-group__item"
       >
         <div
-          class="pf-v5-c-form-control"
+          class="pf-v5-c-form-control pf-m-readonly"
         >
           <input
             aria-invalid="false"
@@ -518,6 +522,7 @@ exports[`numberInput renders defaults & extra props 1`] = `
             data-ouia-component-id="OUIA-Generated-TextInputBase-1"
             data-ouia-component-type="PF5/TextInput"
             data-ouia-safe="true"
+            readonly=""
             type="number"
             value="0"
           />
@@ -603,7 +608,7 @@ exports[`numberInput renders disabled 1`] = `
         class="pf-v5-c-input-group__item"
       >
         <div
-          class="pf-v5-c-form-control pf-m-disabled"
+          class="pf-v5-c-form-control pf-m-readonly pf-m-disabled"
         >
           <input
             aria-invalid="false"
@@ -612,6 +617,7 @@ exports[`numberInput renders disabled 1`] = `
             data-ouia-component-type="PF5/TextInput"
             data-ouia-safe="true"
             disabled=""
+            readonly=""
             type="number"
             value="90"
           />
@@ -697,7 +703,7 @@ exports[`numberInput renders error validated 1`] = `
         class="pf-v5-c-input-group__item"
       >
         <div
-          class="pf-v5-c-form-control pf-m-error"
+          class="pf-v5-c-form-control pf-m-readonly pf-m-error"
         >
           <input
             aria-invalid="true"
@@ -705,6 +711,7 @@ exports[`numberInput renders error validated 1`] = `
             data-ouia-component-id="OUIA-Generated-TextInputBase-3"
             data-ouia-component-type="PF5/TextInput"
             data-ouia-safe="true"
+            readonly=""
             type="number"
             value="0"
           />
@@ -810,7 +817,7 @@ exports[`numberInput renders success validated 1`] = `
         class="pf-v5-c-input-group__item"
       >
         <div
-          class="pf-v5-c-form-control pf-m-success"
+          class="pf-v5-c-form-control pf-m-readonly pf-m-success"
         >
           <input
             aria-invalid="false"
@@ -818,6 +825,7 @@ exports[`numberInput renders success validated 1`] = `
             data-ouia-component-id="OUIA-Generated-TextInputBase-2"
             data-ouia-component-type="PF5/TextInput"
             data-ouia-safe="true"
+            readonly=""
             type="number"
             value="0"
           />
@@ -928,7 +936,7 @@ exports[`numberInput renders unit & position 1`] = `
         class="pf-v5-c-input-group__item"
       >
         <div
-          class="pf-v5-c-form-control"
+          class="pf-v5-c-form-control pf-m-readonly"
         >
           <input
             aria-invalid="false"
@@ -936,6 +944,7 @@ exports[`numberInput renders unit & position 1`] = `
             data-ouia-component-id="OUIA-Generated-TextInputBase-10"
             data-ouia-component-type="PF5/TextInput"
             data-ouia-safe="true"
+            readonly=""
             type="number"
             value="5"
           />
@@ -1020,7 +1029,7 @@ exports[`numberInput renders unit 1`] = `
         class="pf-v5-c-input-group__item"
       >
         <div
-          class="pf-v5-c-form-control"
+          class="pf-v5-c-form-control pf-m-readonly"
         >
           <input
             aria-invalid="false"
@@ -1028,6 +1037,7 @@ exports[`numberInput renders unit 1`] = `
             data-ouia-component-id="OUIA-Generated-TextInputBase-9"
             data-ouia-component-type="PF5/TextInput"
             data-ouia-safe="true"
+            readonly=""
             type="number"
             value="5"
           />
@@ -1117,7 +1127,7 @@ exports[`numberInput renders value 1`] = `
         class="pf-v5-c-input-group__item"
       >
         <div
-          class="pf-v5-c-form-control"
+          class="pf-v5-c-form-control pf-m-readonly"
         >
           <input
             aria-invalid="false"
@@ -1125,6 +1135,7 @@ exports[`numberInput renders value 1`] = `
             data-ouia-component-id="OUIA-Generated-TextInputBase-5"
             data-ouia-component-type="PF5/TextInput"
             data-ouia-safe="true"
+            readonly=""
             type="number"
             value="90"
           />
@@ -1209,7 +1220,7 @@ exports[`numberInput renders warning validated 1`] = `
         class="pf-v5-c-input-group__item"
       >
         <div
-          class="pf-v5-c-form-control pf-m-warning"
+          class="pf-v5-c-form-control pf-m-readonly pf-m-warning"
         >
           <input
             aria-invalid="false"
@@ -1217,6 +1228,7 @@ exports[`numberInput renders warning validated 1`] = `
             data-ouia-component-id="OUIA-Generated-TextInputBase-4"
             data-ouia-component-type="PF5/TextInput"
             data-ouia-safe="true"
+            readonly=""
             type="number"
             value="0"
           />

package/src/demos/DateTimePicker.md

@@ -10,7 +10,7 @@ import OutlinedClockIcon from '@patternfly/react-icons/dist/esm/icons/outlined-c
 
 ## Demos
 
-In this demo, learn how to use a [CalendarMonth](/components/calendar-month) component and a [Dropdown](/components/dropdown) component to compose a simple DateTimePicker. The input is read only, meaning that the following example does not cover pasting a copied date and time. Also, you can pick the time only from the predefined options and cannot change it in the input.
+In this demo, learn how to use a [CalendarMonth](/components/date-and-time/calendar-month) component and a [Dropdown](/components/menus/dropdown) component to compose a simple DateTimePicker. The input is read only, meaning that the following example does not cover pasting a copied date and time. Also, you can pick the time only from the predefined options and cannot change it in the input.
 
 ### Date and time picker
 

package/src/deprecated/components/ApplicationLauncher/examples/ApplicationLauncher.md

@@ -13,8 +13,8 @@ import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';
 import { Link } from '@reach/router';
 import pfLogoSm from './pf-logo-small.svg';
 
-Note: Application launcher is built on Dropdown, for extended API go to [Dropdown](/documentation/react/components/dropdown) documentation.
-To add a tooltip, use the `tooltip` prop and optionally add more tooltip props by using `tooltipProps`. For more tooltip information go to [Tooltip](/documentation/react/components/tooltip).
+Note: Application launcher is built on dropdown, for extended API go to [dropdown](/components/menus/dropdown) documentation.
+To add a tooltip, use the `tooltip` prop and optionally add more tooltip props by using `tooltipProps`. For more tooltip information go to [tooltip](/components/tooltip).
 
 ## Examples
 

package/src/helpers/OUIA/OUIA.md

@@ -59,38 +59,28 @@ import { Button } from '@patternfly/react-core';
 * [Breadcrumb](/components/breadcrumb)
 * [Button](/components/button)
 * [Card](/components/card)
-* [Checkbox](/components/checkbox)
+* [Checkbox](/components/forms/checkbox)
 * [Chip](/components/chip)
-* [ChipGroup](/components/chipg-roup)
-* [ContextSelector](/components/context-selector)
-* [Dropdown](/components/dropdown)
-* [DropdownItem](/components/dropdown)
-* [DropdownSeparator](/components/dropdown)
-* [DropdownToggle](/components/dropdown)
-* [DropdownToggleCheckbox](/components/dropdown)
-* [FormSelect](/components/form-select)
-* [Menu](/components/menu)
+* [Dropdown](/components/menus/dropdown)
+* [DropdownItem](/components/menus/dropdown)
+* [FormSelect](/components/forms/form-select)
+* [Menu](/components/menus/menu)
 * [Modal](/components/modal)
-* [ModalBoxCloseButton](/components/modal)
-* [ModalContent](/components/modal)
-* [Nav](/components/navigation)
+* [Navigation](/components/navigation)
 * [NavExpandable](/components/navigation)
 * [NavItem](/components/navigation)
-* [OptionsMenu](/components/options-menu)
 * [Pagination](/components/pagination)
-* [Radio](/components/radio)
-* [Select](/components/select)
+* [Radio](/components/forms/radio)
+* [Select](/components/menus/select)
 * [Switch](/components/switch)
 * [TabContent](/components/tabs)
 * [Tabs](/components/tabs)
 * [Text](/components/text)
-* [TextInput](/components/text-input)
+* [TextInput](/components/forms/text-input)
 * [Title](/components/title)
 * [Toolbar](/components/toolbar)
 
 ### react-table package
 
-* [RowWrapper](/components/table)
 * [Table](/components/table)
-* [TableComposable](/components/table)
 * [Tr](/components/table)