@patternfly/react-core 5.0.0-alpha.125 → 5.0.0-alpha.127

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "5.0.0-alpha.125",
+  "version": "5.0.0-alpha.127",
   "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",
@@ -71,5 +71,5 @@
     "react": "^17 || ^18",
     "react-dom": "^17 || ^18"
   },
-  "gitHead": "0f4a1d04e19c94a00f2174fb5e063e4cc516819f"
+  "gitHead": "f1282915e0812f4ad8f0dd4c5cc7687b169e864f"
 }

package/src/components/AboutModal/examples/AboutModal.md

@@ -1,7 +1,7 @@
 ---
 id: About modal
 section: components
-cssPrefix: pf-c-about-modal-box
+cssPrefix: pf-v5-c-about-modal-box
 propComponents: ['AboutModal']
 ---
 import brandImg from './brandImg.svg';

package/src/components/Accordion/examples/Accordion.md

@@ -1,7 +1,7 @@
 ---
 id: Accordion
 section: components
-cssPrefix: pf-c-accordion
+cssPrefix: pf-v5-c-accordion
 propComponents: ['Accordion', 'AccordionItem', 'AccordionContent', 'AccordionToggle', AccordionExpandableContentBody]
 ---
 

package/src/components/ActionList/examples/ActionList.md

@@ -1,7 +1,7 @@
 ---
 id: Action list
 section: components
-cssPrefix: pf-c-action-list
+cssPrefix: pf-v5-c-action-list
 propComponents: ['ActionList', 'ActionListGroup', 'ActionListItem']
 ---
 

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

@@ -1,7 +1,7 @@
 ---
 id: Alert
 section: components
-cssPrefix: pf-c-alert
+cssPrefix: pf-v5-c-alert
 propComponents: ['Alert', 'AlertGroup', 'AlertActionCloseButton', 'AlertActionLink']
 ouia: true
 ---

package/src/components/Avatar/examples/Avatar.md

@@ -1,7 +1,7 @@
 ---
 id: Avatar
 section: components
-cssPrefix: pf-c-avatar
+cssPrefix: pf-v5-c-avatar
 propComponents: ['Avatar']
 ---
 

package/src/components/BackToTop/examples/BackToTop.md

@@ -1,7 +1,7 @@
 ---
 id: Back to top
 section: components
-cssPrefix: pf-c-back-to-top
+cssPrefix: pf-v5-c-back-to-top
 propComponents: ['BackToTop']
 ---
 

package/src/components/Backdrop/examples/Backdrop.md

@@ -1,7 +1,7 @@
 ---
 id: Backdrop
 section: components
-cssPrefix: pf-c-backdrop
+cssPrefix: pf-v5-c-backdrop
 propComponents: ['Backdrop']
 ---
 

package/src/components/BackgroundImage/examples/BackgroundImage.md

@@ -1,7 +1,7 @@
 ---
 id: Background image
 section: components
-cssPrefix: pf-c-background-image
+cssPrefix: pf-v5-c-background-image
 propComponents: ['BackgroundImage']
 ---
 

package/src/components/Badge/examples/Badge.md

@@ -1,7 +1,7 @@
 ---
 id: Badge
 section: components
-cssPrefix: pf-c-badge
+cssPrefix: pf-v5-c-badge
 propComponents: ['Badge']
 ---
 

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

@@ -51,9 +51,9 @@ test('Renders with class name pf-m-blue when "blue" is passed to variant prop',
   expect(screen.getByText('Test')).toHaveClass('pf-m-blue');
 });
 
-test('Does not render pf-u-screen-reader class by default', () => {
+test('Does not render pf-v5-u-screen-reader class by default', () => {
   render(<Banner>Test</Banner>);
-  expect(screen.getByText('Test')).not.toContainHTML('<span class="pf-u-screen-reader"></span>');
+  expect(screen.getByText('Test')).not.toContainHTML('<span class="pf-v5-u-screen-reader"></span>');
 });
 
 test('Renders screenReaderText passed via prop', () => {

package/src/components/Banner/examples/Banner.md

@@ -1,7 +1,7 @@
 ---
 id: Banner
 section: components
-cssPrefix: pf-c-banner
+cssPrefix: pf-v5-c-banner
 propComponents: ['Banner']
 ---
 

package/src/components/Breadcrumb/examples/Breadcrumb.md

@@ -1,7 +1,7 @@
 ---
 id: Breadcrumb
 section: components
-cssPrefix: pf-c-breadcrumb
+cssPrefix: pf-v5-c-breadcrumb
 propComponents: ['Breadcrumb', 'BreadcrumbItem', 'BreadcrumbHeading']
 ouia: true
 ---

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

@@ -1,7 +1,7 @@
 ---
 id: Button
 section: components
-cssPrefix: pf-c-button
+cssPrefix: pf-v5-c-button
 propComponents: ['Button', 'BadgeCountObject']
 ouia: true
 ---

package/src/components/CalendarMonth/examples/CalendarMonth.md

@@ -2,7 +2,7 @@
 id: Calendar month
 section: components
 subsection: date-and-time
-cssPrefix: pf-c-calendar-month
+cssPrefix: pf-v5-c-calendar-month
 propComponents: ['CalendarMonth', 'CalendarFormat', 'CalendarMonthInlineProps']
 ---
 

package/src/components/Card/examples/Card.md

@@ -1,7 +1,7 @@
 ---
 id: Card
 section: components
-cssPrefix: pf-c-card
+cssPrefix: pf-v5-c-card
 propComponents:
   [
     'Card',

package/src/components/Checkbox/examples/Checkbox.md

@@ -2,7 +2,7 @@
 id: Checkbox
 section: components
 subsection: forms
-cssPrefix: pf-c-check
+cssPrefix: pf-v5-c-check
 propComponents: ['Checkbox']
 ---
 

package/src/components/Checkbox/examples/checkbox.css

@@ -1,3 +1,3 @@
-.ws-react-c-checkbox .pf-c-check.nested {
+.ws-react-c-checkbox .pf-v5-c-check.nested {
   padding-left: var(--pf-v5-global--spacer--md);
 }

package/src/components/Chip/examples/Chip.md

@@ -1,7 +1,7 @@
 ---
 id: Chip
 section: components
-cssPrefix: pf-c-chip
+cssPrefix: pf-v5-c-chip
 propComponents: ['Chip', 'ChipGroup']
 ouia: true
 ---

package/src/components/ClipboardCopy/examples/ClipboardCopy.md

@@ -1,7 +1,7 @@
 ---
 id: Clipboard copy
 section: components
-cssPrefix: pf-c-copyclipboard
+cssPrefix: pf-v5-c-copyclipboard
 propComponents: ['ClipboardCopy', 'ClipboardCopyButton']
 ouia: true
 ---

package/src/components/CodeBlock/examples/CodeBlock.md

@@ -1,7 +1,7 @@
 ---
 id: Code block
 section: components
-cssPrefix: pf-c-code-block
+cssPrefix: pf-v5-c-code-block
 propComponents: ['CodeBlock', 'CodeBlockAction', 'CodeBlockCode']
 ---
 

package/src/components/DataList/examples/DataList.md

@@ -1,7 +1,7 @@
 ---
 id: Data list
 section: components
-cssPrefix: pf-c-data-list
+cssPrefix: pf-v5-c-data-list
 propComponents:
   [
     'DataList',

package/src/components/DatePicker/DatePicker.tsx

@@ -72,7 +72,7 @@ export interface DatePickerRef {
    * If the eventKey parameter is set to 'Escape', that will invoke the date pickers
    * onEscapePress event to toggle the correct control appropriately.
    */
-  toggleCalendar: (isOpen?: boolean, eventKey?: string) => void;
+  toggleCalendar: (isOpen?: boolean) => void;
 }
 
 export const yyyyMMddFormat = (date: Date) =>
@@ -189,10 +189,8 @@ const DatePickerBase = (
     ref,
     () => ({
       setCalendarOpen: (isOpen: boolean) => setPopoverOpen(isOpen),
-      toggleCalendar: (setOpen?: boolean, eventKey?: string) => {
-        if (eventKey === KeyTypes.Escape && popoverOpen && !selectOpen) {
-          setPopoverOpen((prev) => (setOpen !== undefined ? setOpen : !prev));
-        }
+      toggleCalendar: (setOpen?: boolean) => {
+        setPopoverOpen((prev) => (setOpen !== undefined ? setOpen : !prev));
       },
       isCalendarOpen: popoverOpen
     }),
@@ -222,7 +220,7 @@ const DatePickerBase = (
         }
         showClose={false}
         isVisible={popoverOpen}
-        shouldClose={(event, _fn) => {
+        shouldClose={(event, hideFunction) => {
           event = event as KeyboardEvent;
           if (event.key === KeyTypes.Escape && selectOpen) {
             event.stopPropagation();
@@ -233,7 +231,12 @@ const DatePickerBase = (
           if (buttonRef.current && buttonRef.current.contains(event.target as Node)) {
             return false;
           }
-          setPopoverOpen(false);
+
+          if (popoverOpen) {
+            event.stopPropagation();
+            setPopoverOpen(false);
+            hideFunction();
+          }
           if (event.key === KeyTypes.Escape && popoverOpen) {
             event.stopPropagation();
           }

package/src/components/DatePicker/examples/DatePicker.md

@@ -2,7 +2,7 @@
 id: Date picker
 section: components
 subsection: date-and-time
-cssPrefix: pf-c-date-picker
+cssPrefix: pf-v5-c-date-picker
 propComponents: ['DatePicker', 'CalendarFormat', 'DatePickerRef']
 ---
 

package/src/components/DatePicker/examples/DatePickerControlled.tsx

@@ -6,8 +6,10 @@ export const DatePickerControlled: React.FunctionComponent = () => {
   const [value, setValue] = React.useState(initialValue);
   return (
     <React.Fragment>
-      <Button onClick={() => setValue(initialValue)}>Reset date</Button>
       <DatePicker value={value} onChange={(_event, value) => setValue(value)} />
+      <br />
+      <br />
+      <Button onClick={() => setValue(initialValue)}>Reset date</Button>
     </React.Fragment>
   );
 };

package/src/components/DatePicker/examples/DatePickerControlledCalendar.tsx

@@ -10,8 +10,10 @@ export const DatePickerControlledCalendar: React.FunctionComponent = () => {
   };
   return (
     <React.Fragment>
-      <Button onClick={onClick}>Toggle calendar</Button>
       <DatePicker ref={dateRef} />
+      <br />
+      <br />
+      <Button onClick={onClick}>Toggle calendar</Button>
     </React.Fragment>
   );
 };

package/src/components/DescriptionList/examples/DescriptionList.md

@@ -1,7 +1,7 @@
 ---
 id: 'Description list'
 section: components
-cssPrefix: 'pf-c-description-list'
+cssPrefix: 'pf-v5-c-description-list'
 propComponents:
   [
     'DescriptionList',

package/src/components/Divider/examples/Divider.md

@@ -1,7 +1,7 @@
 ---
 id: Divider
 section: components
-cssPrefix: pf-c-divider
+cssPrefix: pf-v5-c-divider
 propComponents: ['Divider']
 ---
 

package/src/components/Drawer/examples/Drawer.md

@@ -1,6 +1,6 @@
 ---
 id: Drawer
-cssPrefix: pf-c-drawer
+cssPrefix: pf-v5-c-drawer
 propComponents:
   [
     Drawer,

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

@@ -2,7 +2,7 @@
 id: Dropdown
 section: components
 subsection: menus
-cssPrefix: pf-c-menu
+cssPrefix: pf-v5-c-menu
 propComponents:
   [
     'Dropdown',

package/src/components/DualListSelector/examples/DualListSelector.md

@@ -1,7 +1,7 @@
 ---
 id: Dual list selector
 section: components
-cssPrefix: 'pf-c-dual-list-selector'
+cssPrefix: 'pf-v5-c-dual-list-selector'
 propComponents:
   [
     'DualListSelector',

package/src/components/EmptyState/examples/EmptyState.md

@@ -1,7 +1,7 @@
 ---
 id: Empty state
 section: components
-cssPrefix: pf-c-empty-state
+cssPrefix: pf-v5-c-empty-state
 propComponents: ['EmptyState', 'EmptyStateHeader', 'EmptyStateIcon', 'EmptyStateBody', 'EmptyStateFooter', 'EmptyStateActions']
 ---
 import CubesIcon from '@patternfly/react-icons/dist/esm/icons/cubes-icon';

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

@@ -1,7 +1,7 @@
 ---
 id: Expandable section
 section: components
-cssPrefix: pf-c-expandable-section
+cssPrefix: pf-v5-c-expandable-section
 propComponents: ['ExpandableSection', 'ExpandableSectionToggle']
 ---
 

package/src/components/FileUpload/examples/FileUpload.md

@@ -1,6 +1,6 @@
 ---
 id: Simple file upload
-cssPrefix: pf-c-file-upload
+cssPrefix: pf-v5-c-file-upload
 propComponents: ['FileUpload', 'FileUploadField']
 section: components
 subsection: file-upload

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

@@ -2,7 +2,7 @@
 id: Form
 section: components
 subsection: forms
-cssPrefix: pf-c-form
+cssPrefix: pf-v5-c-form
 propComponents:
   [
     'ActionGroup',

package/src/components/FormSelect/examples/FormSelect.md

@@ -2,7 +2,7 @@
 id: Form select
 section: components
 subsection: forms
-cssPrefix: pf-c-form-control
+cssPrefix: pf-v5-c-form-control
 propComponents: ['FormSelect', 'FormSelectOption', 'FormSelectOptionGroup']
 ouia: true
 ---

package/src/components/HelperText/examples/HelperText.md

@@ -1,7 +1,7 @@
 ---
 id: Helper text
 section: components
-cssPrefix: pf-c-helper-text
+cssPrefix: pf-v5-c-helper-text
 propComponents: ['HelperText', 'HelperTextItem']
 ---
 

package/src/components/Icon/examples/Icon.md

@@ -1,7 +1,7 @@
 ---
 id: Icon
 section: components
-cssPrefix: pf-c-icon
+cssPrefix: pf-v5-c-icon
 propComponents: ['Icon']
 ---
 

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

@@ -1,7 +1,7 @@
 ---
 id: Label
 section: components
-cssPrefix: pf-c-label
+cssPrefix: pf-v5-c-label
 propComponents: ['Label', 'LabelGroup']
 ---
 

package/src/components/List/examples/List.md

@@ -1,7 +1,7 @@
 ---
 id: List
 section: components
-cssPrefix: pf-c-list
+cssPrefix: pf-v5-c-list
 propComponents: ['List', 'ListItem']
 ---
 

package/src/components/LoginPage/examples/LoginPage.md

@@ -1,7 +1,7 @@
 ---
 id: Login page
 section: components
-cssPrefix: pf-c-login
+cssPrefix: pf-v5-c-login
 propComponents:
   [
     'LoginPage',

package/src/components/Masthead/examples/Masthead.md

@@ -1,7 +1,7 @@
 ---
 id: Masthead
 section: components
-cssPrefix: pf-c-masthead
+cssPrefix: pf-v5-c-masthead
 propComponents: ['Masthead', 'MastheadToggle', 'MastheadMain', 'MastheadBrand', 'MastheadContent']
 ---
 

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

@@ -2,7 +2,7 @@
 id: Menu
 section: components
 subsection: menus
-cssPrefix: pf-c-menu
+cssPrefix: pf-v5-c-menu
 propComponents:
   [
     'Menu',

package/src/components/MenuToggle/examples/MenuToggle.css

@@ -1,3 +1,3 @@
-#ws-react-c-menu-toggle-primary .pf-c-menu-toggle, #ws-react-c-menu-toggle-secondary .pf-c-menu-toggle {
+#ws-react-c-menu-toggle-primary .pf-v5-c-menu-toggle, #ws-react-c-menu-toggle-secondary .pf-v5-c-menu-toggle {
     vertical-align: bottom;
 }

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

@@ -2,7 +2,7 @@
 id: Menu toggle
 section: components
 subsection: menus
-cssPrefix: pf-c-menu-toggle
+cssPrefix: pf-v5-c-menu-toggle
 propComponents: ['MenuToggle', 'MenuToggleAction', 'MenuToggleCheckbox', 'SplitButtonOptions']
 ---
 

package/src/components/Modal/examples/Modal.md

@@ -1,7 +1,7 @@
 ---
 id: Modal
 section: components
-cssPrefix: pf-c-modal-box
+cssPrefix: pf-v5-c-modal-box
 propComponents: ['Modal']
 ouia: true
 ---

package/src/components/MultipleFileUpload/examples/MultipleFileUpload.md

@@ -2,7 +2,7 @@
 id: Multiple file upload
 section: components
 subsection: file-upload
-cssPrefix: pf-c-multiple-file-upload
+cssPrefix: pf-v5-c-multiple-file-upload
 propComponents:
   ['MultipleFileUpload', 'MultipleFileUploadMain', 'MultipleFileUploadStatus', 'MultipleFileUploadStatusItem']
 ---

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

@@ -1,7 +1,7 @@
 ---
 id: Navigation
 section: components
-cssPrefix: pf-c-nav
+cssPrefix: pf-v5-c-nav
 propComponents: ['Nav', 'NavList', 'NavGroup', 'NavItem', 'NavItemSeparator', 'NavExpandable']
 ouia: true
 ---

package/src/components/NotificationBadge/examples/NotificationBadge.md

@@ -1,7 +1,7 @@
 ---
 id: Notification badge
 section: components
-cssPrefix: pf-c-notification-badge
+cssPrefix: pf-v5-c-notification-badge
 propComponents: ['NotificationBadge']
 ---
 

package/src/components/NotificationDrawer/examples/NotificationDrawer.md

@@ -1,7 +1,7 @@
 ---
 id: Notification drawer
 section: components
-cssPrefix: pf-c-notification-drawer
+cssPrefix: pf-v5-c-notification-drawer
 propComponents:
   [
     'NotificationDrawer',

package/src/components/NumberInput/examples/NumberInput.md

@@ -1,7 +1,7 @@
 ---
 id: Number input
 section: components
-cssPrefix: pf-c-number-input
+cssPrefix: pf-v5-c-number-input
 propComponents: ['NumberInput']
 ---
 

package/src/components/OverflowMenu/examples/OverflowMenu.md

@@ -1,7 +1,7 @@
 ---
 id: Overflow menu
 section: components
-cssPrefix: pf-c-overflow-menu
+cssPrefix: pf-v5-c-overflow-menu
 propComponents:
   [
     'OverflowMenu',

package/src/components/Page/examples/Page.md

@@ -1,7 +1,7 @@
 ---
 id: Page
 section: components
-cssPrefix: pf-c-page
+cssPrefix: pf-v5-c-page
 propComponents:
   [
     'Page',

package/src/components/Page/examples/page.css

@@ -1,3 +1,3 @@
-.pf-c-page__sidebar-body {
+.pf-v5-c-page__sidebar-body {
   color: var(--pf-v5-global--Color--light-100);
 }

package/src/components/Panel/examples/Panel.md

@@ -1,7 +1,7 @@
 ---
 id: Panel
 section: components
-cssPrefix: pf-c-panel
+cssPrefix: pf-v5-c-panel
 propComponents: [Panel, PanelMain, PanelMainBody, PanelHeader, PanelFooter]
 ---
 

package/src/components/Popover/examples/Popover.md

@@ -1,7 +1,7 @@
 ---
 id: Popover
 section: components
-cssPrefix: pf-c-popover
+cssPrefix: pf-v5-c-popover
 propComponents: ['Popover']
 ---
 

package/src/components/Progress/examples/Progress.md

@@ -1,7 +1,7 @@
 ---
 id: Progress
 section: components
-cssPrefix: pf-c-progress
+cssPrefix: pf-v5-c-progress
 propComponents: ['Progress']
 ---
 

package/src/components/ProgressStepper/examples/ProgressStepper.md

@@ -1,7 +1,7 @@
 ---
 id: Progress stepper
 section: components
-cssPrefix: pf-c-progress-stepper
+cssPrefix: pf-v5-c-progress-stepper
 propComponents: ['ProgressStepper', 'ProgressStep']
 ---
 

package/src/components/Radio/examples/Radio.md

@@ -2,7 +2,7 @@
 id: Radio
 section: components
 subsection: forms
-cssPrefix: pf-c-radio
+cssPrefix: pf-v5-c-radio
 propComponents: ['Radio']
 ouia: true
 ---

package/src/components/SearchInput/examples/SearchInput.md

@@ -1,7 +1,7 @@
 ---
 id: 'Search input'
 section: components
-cssPrefix: 'pf-c-search-input'
+cssPrefix: 'pf-v5-c-search-input'
 propComponents: ['SearchInput', 'SearchInputSearchAttribute', 'SearchInputExpandable']
 ---