@patternfly/react-core 5.3.0-prerelease.13 → 5.3.0-prerelease.15

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.3.0-prerelease.12","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":"5.3.0-prerelease.14","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.3.0-prerelease.12","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":"5.3.0-prerelease.14","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.3.0-prerelease.12","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":"5.3.0-prerelease.14","private":true}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "5.3.0-prerelease.13",
+  "version": "5.3.0-prerelease.15",
   "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 @@
     "clean:exports": "node scripts/cleanDistExports.js"
   },
   "dependencies": {
-    "@patternfly/react-icons": "^5.3.0-prerelease.2",
-    "@patternfly/react-styles": "^5.3.0-prerelease.2",
-    "@patternfly/react-tokens": "^5.3.0-prerelease.2",
+    "@patternfly/react-icons": "^5.3.0-prerelease.3",
+    "@patternfly/react-styles": "^5.3.0-prerelease.3",
+    "@patternfly/react-tokens": "^5.3.0-prerelease.3",
     "focus-trap": "7.5.2",
     "react-dropzone": "^14.2.3",
     "tslib": "^2.5.0"
   },
   "devDependencies": {
-    "@patternfly/patternfly": "5.3.0-prerelease.4",
+    "@patternfly/patternfly": "5.3.0-prerelease.5",
     "@rollup/plugin-commonjs": "^25.0.0",
     "@rollup/plugin-node-resolve": "^15.0.2",
     "@rollup/plugin-replace": "^5.0.2",
@@ -72,5 +72,5 @@
     "react": "^17 || ^18",
     "react-dom": "^17 || ^18"
   },
-  "gitHead": "a565079b97112a282fb633fcd7a43a89707541ce"
+  "gitHead": "908f1fb65e35132a6c34e997ec84a499312c8f84"
 }

package/src/components/ClipboardCopy/ClipboardCopy.tsx

@@ -10,8 +10,22 @@ import { ClipboardCopyToggle } from './ClipboardCopyToggle';
 import { ClipboardCopyExpanded } from './ClipboardCopyExpanded';
 import { getOUIAProps, OUIAProps } from '../../helpers';
 
-export const clipboardCopyFunc = (event: React.ClipboardEvent<HTMLDivElement>, text?: React.ReactNode) => {
-  navigator.clipboard.writeText(text.toString());
+export const clipboardCopyFunc = (_event: React.ClipboardEvent<HTMLDivElement>, text?: React.ReactNode) => {
+  try {
+    navigator.clipboard.writeText(text.toString());
+  } catch (error) {
+    // eslint-disable-next-line no-console
+    console.warn(
+      "Clipboard API not found, this copy function will not work. This is likely because you're using an",
+      "unsupported browser or you're not using HTTPS. \n\nIf you're a developer building an application which needs",
+      "to support copying to the clipboard without the clipboard API, you'll have to create your own copy",
+      'function and pass it to the ClipboardCopy component as the onCopy prop. For more information see',
+      'https://developer.mozilla.org/en-US/docs/Web/API/Navigator/clipboard'
+    );
+
+    // eslint-disable-next-line no-console
+    console.error(error);
+  }
 };
 
 export enum ClipboardCopyVariant {
@@ -70,7 +84,7 @@ export interface ClipboardCopyProps extends Omit<React.HTMLProps<HTMLDivElement>
   exitDelay?: number;
   /** Delay in ms before the tooltip appears. */
   entryDelay?: number;
-  /** A function that is triggered on clicking the copy button. */
+  /** A function that is triggered on clicking the copy button. This will replace the existing clipboard copy functionality entirely. */
   onCopy?: (event: React.ClipboardEvent<HTMLDivElement>, text?: React.ReactNode) => void;
   /** A function that is triggered on changing the text. */
   onChange?: (event: React.FormEvent, text?: string) => void;

package/src/components/MenuToggle/MenuToggleCheckbox.tsx

@@ -84,7 +84,7 @@ class MenuToggleCheckbox extends React.Component<MenuToggleCheckboxProps, { ouia
       </span>
     );
     return (
-      <label className={css(styles.check, !children && styles.modifiers.standalone, className)} htmlFor={id}>
+      <label className={css(styles.check, !children && styles.modifiers.standalone, className)}>
         <input
           className={css(styles.checkInput)}
           {...(this.calculateChecked() !== undefined && { onChange: this.handleChange })}
@@ -93,7 +93,7 @@ class MenuToggleCheckbox extends React.Component<MenuToggleCheckboxProps, { ouia
           ref={(elem) => elem && (elem.indeterminate = isChecked === null)}
           aria-invalid={!isValid}
           disabled={isDisabled}
-          {...(defaultChecked !== undefined ? { defaultChecked } : { checked: isChecked })}
+          {...(defaultChecked !== undefined ? { defaultChecked } : { checked: this.calculateChecked() })}
           {...getOUIAProps(
             MenuToggleCheckbox.displayName,
             ouiaId !== undefined ? ouiaId : this.state.ouiaStateId,

package/src/components/Select/examples/SelectMultiTypeaheadCheckbox.tsx

@@ -44,7 +44,12 @@ export const SelectMultiTypeaheadCheckbox: React.FunctionComponent = () => {
       // When no options are found after filtering, display 'No results found'
       if (!newSelectOptions.length) {
         newSelectOptions = [
-          { isDisabled: false, children: `No results found for "${inputValue}"`, value: 'no results' }
+          {
+            isDisabled: false,
+            children: `No results found for "${inputValue}"`,
+            value: 'no results',
+            hasCheckbox: false
+          }
         ];
       }
 

package/src/demos/Banner.md

@@ -135,8 +135,8 @@ class BannerDemo extends React.Component {
               <PageSection>
                 <Gallery hasGutter>
                   {Array.from({ length: 30 }).map((_value, index) => (
-                    <GalleryItem key={i}>
-                      <Card key={i}>
+                    <GalleryItem key={index}>
+                      <Card key={index}>
                         <CardBody>This is a card</CardBody>
                       </Card>
                     </GalleryItem>

package/src/demos/Filters/examples/FilterAttributeSearch.tsx

@@ -651,7 +651,7 @@ export const FilterAttributeSearch: React.FunctionComponent = () => {
       <Table aria-label="Selectable table">
         <Thead>
           <Tr>
-            <Th />
+            <Th screenReaderText="Row select" />
             <Th width={20}>{columnNames.name}</Th>
             <Th width={10}>{columnNames.threads}</Th>
             <Th width={10}>{columnNames.apps}</Th>

package/src/demos/Filters/examples/FilterCheckboxSelect.tsx

@@ -377,7 +377,7 @@ export const FilterCheckboxSelect: React.FunctionComponent = () => {
       <Table aria-label="Selectable table">
         <Thead>
           <Tr>
-            <Th />
+            <Th screenReaderText="Row select" />
             <Th width={20}>{columnNames.name}</Th>
             <Th width={10}>{columnNames.threads}</Th>
             <Th width={10}>{columnNames.apps}</Th>

package/src/demos/Filters/examples/FilterFaceted.tsx

@@ -467,7 +467,7 @@ export const FilterFaceted: React.FunctionComponent = () => {
       <Table aria-label="Selectable table">
         <Thead>
           <Tr>
-            <Th />
+            <Th screenReaderText="Row select" />
             <Th width={20}>{columnNames.name}</Th>
             <Th width={10}>{columnNames.threads}</Th>
             <Th width={10}>{columnNames.apps}</Th>

package/src/demos/Filters/examples/FilterMixedSelectGroup.tsx

@@ -517,7 +517,7 @@ export const FilterMixedSelectGroup: React.FunctionComponent = () => {
       <Table aria-label="Selectable table">
         <Thead>
           <Tr>
-            <Th />
+            <Th screenReaderText="Row select" />
             <Th width={20}>{columnNames.name}</Th>
             <Th width={10}>{columnNames.threads}</Th>
             <Th width={10}>{columnNames.apps}</Th>

package/src/demos/Filters/examples/FilterSameSelectGroup.tsx

@@ -490,7 +490,7 @@ export const FilterSameSelectGroup: React.FunctionComponent = () => {
       <Table aria-label="Selectable table">
         <Thead>
           <Tr>
-            <Th />
+            <Th screenReaderText="Row select" />
             <Th width={20}>{columnNames.name}</Th>
             <Th width={10}>{columnNames.threads}</Th>
             <Th width={10}>{columnNames.apps}</Th>

package/src/demos/Filters/examples/FilterSearchInput.tsx

@@ -298,7 +298,7 @@ export const FilterSearchInput: React.FunctionComponent = () => {
       <Table aria-label="Selectable table">
         <Thead>
           <Tr>
-            <Th />
+            <Th screenReaderText="Row select" />
             <Th width={20}>{columnNames.name}</Th>
             <Th width={10}>{columnNames.threads}</Th>
             <Th width={10}>{columnNames.apps}</Th>

package/src/demos/Filters/examples/FilterSingleSelect.tsx

@@ -362,7 +362,7 @@ export const FilterSingleSelect: React.FunctionComponent = () => {
       <Table aria-label="Selectable table">
         <Thead>
           <Tr>
-            <Th />
+            <Th screenReaderText="Row select" />
             <Th width={20}>{columnNames.name}</Th>
             <Th width={10}>{columnNames.threads}</Th>
             <Th width={10}>{columnNames.apps}</Th>

package/src/demos/Tabs.md

@@ -11,6 +11,8 @@ import CubeIcon from '@patternfly/react-icons/dist/esm/icons/cube-icon';
 import FilterIcon from '@patternfly/react-icons/dist/esm/icons/filter-icon';
 import SortAmountDownIcon from '@patternfly/react-icons/dist/esm/icons/sort-amount-down-icon';
 import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
+import display from '@patternfly/react-styles/css/utilities/Display/display';
+import sizing from '@patternfly/react-styles/css/utilities/Sizing/sizing';
 import spacing from '@patternfly/react-styles/css/utilities/Spacing/spacing';
 import { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/DashboardWrapper';
 

package/src/demos/examples/Card/CardStatus.tsx

@@ -94,7 +94,7 @@ export const CardStatus: React.FunctionComponent = () => {
       <Table variant="compact">
         <Thead>
           <Tr>
-            <Th />
+            <Th screenReaderText="Row expansion" />
             {columns.map((column, columnIndex) => (
               <Th key={columnIndex} modifier="fitContent">
                 {column}

package/src/demos/examples/Tabs/TabsAndTable.tsx

@@ -230,7 +230,7 @@ export const TablesAndTabs = () => {
     <Table aria-label="`Composable` table">
       <Thead noWrap>
         <Tr>
-          <Th />
+          <Th screenReaderText="Row select" />
           <Th>{columnNames.name}</Th>
           <Th>{columnNames.branches}</Th>
           <Th>{columnNames.prs}</Th>