@patternfly/react-core 5.0.0-prerelease.9 → 5.1.0

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.8"}
+{"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.1.0-prerelease.0","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":"5.0.0-prerelease.8"}
+{"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.1.0-prerelease.0","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":"5.0.0-prerelease.8"}
+{"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.1.0-prerelease.0","private":true}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "5.0.0-prerelease.9",
+  "version": "5.1.0",
   "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,16 @@
     "subpaths": "node ../../scripts/exportSubpaths.js --config subpaths.config.json"
   },
   "dependencies": {
-    "@patternfly/react-icons": "^5.0.0-prerelease.4",
-    "@patternfly/react-styles": "^5.0.0-prerelease.3",
-    "@patternfly/react-tokens": "^5.0.0-prerelease.3",
+    "@patternfly/patternfly": "5.0.2",
+    "@patternfly/react-icons": "^5.1.0",
+    "@patternfly/react-styles": "^5.1.0",
+    "@patternfly/react-tokens": "^5.1.0",
     "focus-trap": "7.4.3",
     "react-dropzone": "^14.2.3",
     "tslib": "^2.5.0"
   },
   "devDependencies": {
-    "@patternfly/patternfly": "5.0.0-prerelease.3",
+    "@patternfly/patternfly": "5.0.0-prerelease.16",
     "@rollup/plugin-commonjs": "^25.0.0",
     "@rollup/plugin-node-resolve": "^15.0.2",
     "@rollup/plugin-replace": "^5.0.2",
@@ -71,5 +72,5 @@
     "react": "^17 || ^18",
     "react-dom": "^17 || ^18"
   },
-  "gitHead": "719eebba5d65e5bc2c7075a4ff5057276c62f0c0"
+  "gitHead": "788b50e975fd7a913f3c892ae68f426fd95b6ea2"
 }

package/single-packages.config.json

@@ -1,14 +1,5 @@
 {
     "packageName": "@patternfly/react-core",
-    "modules": [ 
-        {
-            "name": "dist/esm",
-            "type": "esm"
-        },
-        {
-            "name": "dist/js",
-            "type": "cjs"
-        }
-    ],
-    "exclude": []
+    "moduleGlob": ["/dist/esm/helpers/**/*.js", "/dist/esm/*/*/**/index.js"],
+    "exclude": ["/dist/esm/helpers/Popper/thirdparty"]
 }

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/Brand/Brand.tsx

@@ -43,14 +43,15 @@ export const Brand: React.FunctionComponent<BrandProps> = ({
   ...props
 }: BrandProps) => {
   let responsiveStyles;
-  if (children !== undefined && widths !== undefined) {
+  if (widths !== undefined) {
     responsiveStyles = {
       ...setBreakpointCssVars(widths, '--pf-v5-c-brand--Width')
     };
   }
 
-  if (children !== undefined && heights !== undefined) {
+  if (heights !== undefined) {
     responsiveStyles = {
+      ...responsiveStyles,
       ...setBreakpointCssVars(heights, '--pf-v5-c-brand--Height')
     };
   }
@@ -67,7 +68,7 @@ export const Brand: React.FunctionComponent<BrandProps> = ({
         <img src={src} alt={alt} />
       </picture>
     ) : (
-      <img {...props} className={css(styles.brand, className)} style={style} src={src} alt={alt} />
+      <img {...props} className={css(styles.brand, className)} style={{ ...style, ...responsiveStyles }} src={src} alt={alt} />
     )
   );
 };

package/src/components/Brand/examples/Brand.md

@@ -22,7 +22,7 @@ import logoBase from './pf-c-brand--logo-base.jpg';
 
 ### Responsive
 
-Passing `<source>` elements as children to `Brand` will change the component from an `<img>` to a `<picture>` element. In this form, breakpoint modifiers for width and height may be passed to `Brand`. The `src` and `alt` properties should still be passed to populate the fallback `img` of the brand.
+Passing `<source>` elements as children to `Brand` will change the component from an `<img>` to a `<picture>` element. The `src` and `alt` properties should still be passed to populate the fallback `img` of the brand.
 
 ```ts file="./BrandResponsive.tsx"
 ```

package/src/components/Brand/examples/BrandBasic.tsx

@@ -2,4 +2,4 @@ import React from 'react';
 import { Brand } from '@patternfly/react-core';
 import pfLogo from './pfLogo.svg';
 
-export const BrandBasic: React.FunctionComponent = () => <Brand src={pfLogo} alt="Patternfly Logo" />;
+export const BrandBasic: React.FunctionComponent = () => <Brand src={pfLogo} alt="Patternfly Logo" widths={{ default: '200px', md: '400px', xl: '600px' }} />;

package/src/components/ClipboardCopy/__tests__/Generated/__snapshots__/ClipboardCopy.test.tsx.snap

@@ -10,7 +10,7 @@ exports[`ClipboardCopy should match snapshot (auto-generated) 1`] = `
     <div
       class="pf-v5-c-clipboard-copy__group"
     >
-      <div
+      <span
         class="pf-v5-c-form-control"
       >
         <input
@@ -23,7 +23,7 @@ exports[`ClipboardCopy should match snapshot (auto-generated) 1`] = `
           type="text"
           value="[object Object]"
         />
-      </div>
+      </span>
       <button
         aria-disabled="false"
         aria-label="'Copy to clipboard'"

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

@@ -15,7 +15,7 @@ exports[`With popover opened 1`] = `
         <div
           class="pf-v5-c-input-group__item pf-m-fill"
         >
-          <div
+          <span
             class="pf-v5-c-form-control"
           >
             <input
@@ -28,7 +28,7 @@ exports[`With popover opened 1`] = `
               type="text"
               value=""
             />
-          </div>
+          </span>
         </div>
         <div
           class="pf-v5-c-input-group__item"
@@ -162,7 +162,7 @@ exports[`With popover opened 1`] = `
                   <div
                     class="pf-v5-c-calendar-month__header-year"
                   >
-                    <div
+                    <span
                       class="pf-v5-c-form-control"
                     >
                       <input
@@ -174,7 +174,7 @@ exports[`With popover opened 1`] = `
                         type="number"
                         value="1969"
                       />
-                    </div>
+                    </span>
                   </div>
                 </div>
               </div>
@@ -786,7 +786,7 @@ exports[`disabled date picker 1`] = `
         <div
           class="pf-v5-c-input-group__item pf-m-fill"
         >
-          <div
+          <span
             class="pf-v5-c-form-control pf-m-disabled"
           >
             <input
@@ -800,7 +800,7 @@ exports[`disabled date picker 1`] = `
               type="text"
               value="2020-11-20"
             />
-          </div>
+          </span>
         </div>
         <div
           class="pf-v5-c-input-group__item"

package/src/components/Dropdown/DropdownItem.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { css } from '@patternfly/react-styles';
 import { MenuItemProps, MenuItem } from '../Menu';
+import { TooltipProps } from '../Tooltip';
 import { useOUIAProps, OUIAProps } from '../../helpers';
 
 /**
@@ -17,6 +18,8 @@ export interface DropdownItemProps extends Omit<MenuItemProps, 'ref'>, OUIAProps
   description?: React.ReactNode;
   /** Render item as disabled option */
   isDisabled?: boolean;
+  /** Render item as aria-disabled option */
+  isAriaDisabled?: boolean;
   /** Identifies the component in the dropdown onSelect callback */
   value?: any;
   /** Callback for item click */
@@ -25,6 +28,8 @@ export interface DropdownItemProps extends Omit<MenuItemProps, 'ref'>, OUIAProps
   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;
+  /** Props for adding a tooltip to a menu item */
+  tooltipProps?: TooltipProps;
 }
 
 const DropdownItemBase: React.FunctionComponent<DropdownItemProps> = ({
@@ -32,11 +37,13 @@ const DropdownItemBase: React.FunctionComponent<DropdownItemProps> = ({
   className,
   description,
   isDisabled,
+  isAriaDisabled,
   value,
   onClick,
   ouiaId,
   ouiaSafe,
   innerRef,
+  tooltipProps,
   ...props
 }: DropdownItemProps) => {
   const ouiaProps = useOUIAProps(DropdownItem.displayName, ouiaId, ouiaSafe);
@@ -45,8 +52,10 @@ const DropdownItemBase: React.FunctionComponent<DropdownItemProps> = ({
       className={css(className)}
       description={description}
       isDisabled={isDisabled}
+      isAriaDisabled={isAriaDisabled}
       itemId={value}
       onClick={onClick}
+      tooltipProps={tooltipProps}
       ref={innerRef}
       {...ouiaProps}
       {...props}

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

@@ -11,7 +11,8 @@ propComponents:
     'DropdownList',
     'MenuToggle',
     'DropdownToggleProps',
-    'DropdownPopperProps'
+    'DropdownPopperProps',
+    'TooltipProps'
   ]
 ---
 
@@ -25,7 +26,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/Dropdown/examples/DropdownBasic.tsx

@@ -46,11 +46,14 @@ export const DropdownBasic: React.FunctionComponent = () => {
         <DropdownItem value={3} isDisabled key="disabled link" to="#default-link4">
           Disabled Link
         </DropdownItem>
+        <DropdownItem value={4} isAriaDisabled key="aria-disabled link" to="#default-link5" tooltipProps={{content: "aria-disabled link", position: "top"}}>
+          Aria-disabled Link
+        </DropdownItem>
         <Divider component="li" key="separator" />
-        <DropdownItem value={4} key="separated action">
+        <DropdownItem value={5} key="separated action">
           Separated Action
         </DropdownItem>
-        <DropdownItem value={5} key="separated link" to="#default-link6" onClick={(ev) => ev.preventDefault()}>
+        <DropdownItem value={6} key="separated link" to="#default-link6" onClick={(ev) => ev.preventDefault()}>
           Separated Link
         </DropdownItem>
       </DropdownList>

package/src/components/FileUpload/FileUploadField.tsx

@@ -132,7 +132,7 @@ export const FileUploadField: React.FunctionComponent<FileUploadFieldProps> = ({
         <InputGroup>
           <InputGroupItem isFill>
             <TextInput
-              readOnlyVariant="plain" // Always read-only regardless of isReadOnly prop (which is just for the TextArea)
+              readOnlyVariant="default" // Always read-only regardless of isReadOnly prop (which is just for the TextArea)
               isDisabled={isDisabled}
               id={`${id}-filename`}
               name={`${id}-filename`}

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

@@ -15,8 +15,8 @@ exports[`simple fileupload 1`] = `
         <div
           class="pf-v5-c-input-group__item pf-m-fill"
         >
-          <div
-            class="pf-v5-c-form-control pf-m-readonly pf-m-plain"
+          <span
+            class="pf-v5-c-form-control pf-m-readonly"
           >
             <input
               aria-describedby="simple-text-file-browse-button"
@@ -32,7 +32,7 @@ exports[`simple fileupload 1`] = `
               type="text"
               value=""
             />
-          </div>
+          </span>
         </div>
         <div
           class="pf-v5-c-input-group__item"
@@ -69,7 +69,7 @@ exports[`simple fileupload 1`] = `
     <div
       class="pf-v5-c-file-upload__file-details"
     >
-      <div
+      <span
         class="pf-v5-c-form-control pf-m-resize-vertical"
       >
         <textarea
@@ -79,7 +79,7 @@ exports[`simple fileupload 1`] = `
           name="simple-text-file"
           placeholder=""
         />
-      </div>
+      </span>
     </div>
     <input
       style="display: none;"

package/src/components/FileUpload/__tests__/__snapshots__/FileUploadField.test.tsx.snap

@@ -14,8 +14,8 @@ exports[`simple fileuploadfield 1`] = `
         <div
           class="pf-v5-c-input-group__item pf-m-fill"
         >
-          <div
-            class="pf-v5-c-form-control pf-m-readonly pf-m-plain"
+          <span
+            class="pf-v5-c-form-control pf-m-readonly"
           >
             <input
               aria-describedby="custom-file-upload-browse-button"
@@ -31,7 +31,7 @@ exports[`simple fileuploadfield 1`] = `
               type="text"
               value=""
             />
-          </div>
+          </span>
         </div>
         <div
           class="pf-v5-c-input-group__item"
@@ -67,7 +67,7 @@ exports[`simple fileuploadfield 1`] = `
     <div
       class="pf-v5-c-file-upload__file-details"
     >
-      <div
+      <span
         class="pf-v5-c-form-control pf-m-resize-vertical"
       >
         <textarea
@@ -77,7 +77,7 @@ exports[`simple fileuploadfield 1`] = `
           name="custom-file-upload"
           placeholder=""
         />
-      </div>
+      </span>
     </div>
     <p>
       A custom preview of the uploaded file can be passed as children

package/src/components/FormControl/FormControlIcon.tsx

@@ -24,8 +24,8 @@ export const FormControlIcon = ({ status, customIcon, className, ...props }: For
   const StatusIcon = status && statusIcons[status];
 
   return (
-    <div className={css(styles.formControlIcon, status && styles.modifiers.status, className)} {...props}>
+    <span className={css(styles.formControlIcon, status && styles.modifiers.status, className)} {...props}>
       {customIcon || <StatusIcon />}
-    </div>
+    </span>
   );
 };

package/src/components/FormSelect/FormSelect.tsx

@@ -76,7 +76,7 @@ export class FormSelect extends React.Component<FormSelectProps, { ouiaStateId:
     const hasStatusIcon = ['success', 'error', 'warning'].includes(validated);
 
     return (
-      <div
+      <span
         className={css(
           styles.formControl,
           isDisabled && styles.modifiers.disabled,
@@ -96,13 +96,13 @@ export class FormSelect extends React.Component<FormSelectProps, { ouiaStateId:
         >
           {children}
         </select>
-        <div className={css(styles.formControlUtilities)}>
+        <span className={css(styles.formControlUtilities)}>
           {hasStatusIcon && <FormControlIcon status={validated as 'success' | 'error' | 'warning'} />}
-          <div className={css(styles.formControlToggleIcon)}>
+          <span className={css(styles.formControlToggleIcon)}>
             <CaretDownIcon />
-          </div>
-        </div>
-      </div>
+          </span>
+        </span>
+      </span>
     );
   }
 }