@patternfly/react-core 4.242.4 → 4.242.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "4.242.4",
+  "version": "4.242.6",
   "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",
@@ -70,5 +70,5 @@
     "react": "^16.8 || ^17 || ^18",
     "react-dom": "^16.8 || ^17 || ^18"
   },
-  "gitHead": "9c5cb016c12b1b532b590285d6607b0c21778960"
+  "gitHead": "86301659315c78434e511835e9b51107ab4132e6"
 }

package/src/components/DatePicker/DatePicker.tsx

@@ -45,7 +45,7 @@ export interface DatePickerProps
    */
   appendTo?: HTMLElement | ((ref?: HTMLElement) => HTMLElement) | 'parent';
   /** Props to pass to the Popover */
-  popoverProps?: Omit<PopoverProps, 'appendTo'>;
+  popoverProps?: Partial<Omit<PopoverProps, 'appendTo'>>;
   /** Functions that returns an error message if a date is invalid */
   validators?: ((date: Date) => string)[];
   /** Additional props for input field */

package/src/components/Tile/examples/Tile.md

@@ -11,125 +11,34 @@ import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon';
 
 ## Examples
 
-Keyboard interaction patterns and a11y is implemented in the Tile demos, located in the [Demo section](/documentation/react/demos/tiledemo).
+Keyboard interaction patterns and a11y is implemented in the Tile demos, located in the [Demo section](/components/tile/react-demos).
 
 ### Basic
 
-```js
-import React from 'react';
-import { Tile } from '@patternfly/react-core';
-
-<div role="listbox" aria-label="Basic tiles">
-  <Tile title="Default" isSelected={false} />
-  <Tile title="Selected" isSelected />
-  <Tile title="Disabled" isDisabled isSelected={false} />
-</div>;
+```ts file="./TileBasic.tsx"
 ```
 
 ### With subtext
 
-```js
-import React from 'react';
-import { Tile } from '@patternfly/react-core';
-
-<div role="listbox" aria-label="Tiles with subtext">
-  <Tile title="Default" isSelected={false}>
-    Subtext goes here
-  </Tile>{' '}
-  <Tile title="Selected" isSelected>
-    Subtext goes here
-  </Tile>{' '}
-  <Tile title="Disabled" isDisabled isSelected={false}>
-    Subtext goes here
-  </Tile>
-</div>;
+```ts file="./TileWithSubtext.tsx"
 ```
 
 ### With icon
 
-```js
-import React from 'react';
-import { Tile } from '@patternfly/react-core';
-import PlusIcon from '@patternfly/react-icons/dist/esm/icons/plus-icon';
-
-<div role="listbox" aria-label="Tiles with icon">
-  <Tile title="Default" icon={<PlusIcon />} isSelected={false}>
-    Subtext goes here
-  </Tile>{' '}
-  <Tile title="Selected" icon={<PlusIcon />} isSelected>
-    Subtext goes here
-  </Tile>{' '}
-  <Tile title="Disabled" icon={<PlusIcon />} isDisabled isSelected={false}>
-    Subtext goes here
-  </Tile>
-</div>;
+```ts file="./TileWithIcon.tsx"
 ```
 
 ### Stacked
 
-```js
-import React from 'react';
-import { Tile } from '@patternfly/react-core';
-import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon';
-
-<div role="listbox" aria-label="Stacked tiles">
-  <Tile title="Default" icon={<BellIcon />} isStacked isSelected={false}>
-    Subtext goes here
-  </Tile>{' '}
-  <Tile title="Selected" icon={<BellIcon />} isStacked isSelected>
-    Subtext goes here
-  </Tile>{' '}
-  <Tile title="Disabled" icon={<BellIcon />} isStacked isDisabled isSelected={false}>
-    Subtext goes here
-  </Tile>
-</div>;
+```ts file="./TileStacked.tsx"
 ```
 
 ### Stacked with large icons
 
-```js
-import React from 'react';
-import { Tile } from '@patternfly/react-core';
-import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon';
-
-<div role="listbox" aria-label="Stacked tiles with large icons">
-  <Tile title="Default" icon={<BellIcon />} isStacked isDisplayLarge isSelected={false}>
-    Subtext goes here
-  </Tile>{' '}
-  <Tile title="Selected" icon={<BellIcon />} isStacked isDisplayLarge isSelected>
-    Subtext goes here
-  </Tile>{' '}
-  <Tile title="Disabled" icon={<BellIcon />} isStacked isDisplayLarge isDisabled isSelected={false}>
-    Subtext goes here
-  </Tile>
-</div>;
+```ts file="./TileStackedWithLargeIcons.tsx"
 ```
 
 ### With extra content
 
-```js
-import React from 'react';
-import { Tile, Flex } from '@patternfly/react-core';
-import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon';
-
-<div role="listbox" aria-label="Tiles with extra content">
-  <Flex>
-    <Flex flex={{ default: 'flex_1' }}>
-      <Tile title="Default" icon={<BellIcon />} isStacked isSelected={false}>
-        This is really really long subtext that goes on for so long that it has to wrap to the next line. This is really
-        really long subtext that goes on for so long that it has to wrap to the next line.
-      </Tile>
-    </Flex>
-    <Flex flex={{ default: 'flex_1' }}>
-      <Tile title="Selected" icon={<BellIcon />} isStacked isSelected>
-        This is really really long subtext that goes on for so long that it has to wrap to the next line.
-      </Tile>
-    </Flex>
-    <Flex flex={{ default: 'flex_1' }}>
-      <Tile title="Disabled" icon={<BellIcon />} isStacked isDisabled isSelected={false}>
-        Subtext goes here
-      </Tile>
-    </Flex>
-  </Flex>
-</div>;
+```ts file="./TileWithExtraContent.tsx"
 ```

package/src/components/Tile/examples/TileBasic.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+import { Tile } from '@patternfly/react-core';
+
+export const TileBasic: React.FunctionComponent = () => (
+  <div role="listbox" aria-label="Basic tiles">
+    <Tile title="Default" isSelected={false} />
+    <Tile title="Selected" isSelected />
+    <Tile title="Disabled" isDisabled isSelected={false} />
+  </div>
+);

package/src/components/Tile/examples/TileStacked.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import { Tile } from '@patternfly/react-core';
+import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon';
+
+export const TileStacked: React.FunctionComponent = () => (
+  <div role="listbox" aria-label="Stacked tiles">
+    <Tile title="Default" icon={<BellIcon />} isStacked isSelected={false}>
+      Subtext goes here
+    </Tile>{' '}
+    <Tile title="Selected" icon={<BellIcon />} isStacked isSelected>
+      Subtext goes here
+    </Tile>{' '}
+    <Tile title="Disabled" icon={<BellIcon />} isStacked isDisabled isSelected={false}>
+      Subtext goes here
+    </Tile>
+  </div>
+);

package/src/components/Tile/examples/TileStackedWithLargeIcons.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import { Tile } from '@patternfly/react-core';
+import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon';
+
+export const TileStackedWithLargeIcons: React.FunctionComponent = () => (
+  <div role="listbox" aria-label="Stacked tiles with large icons">
+    <Tile title="Default" icon={<BellIcon />} isStacked isDisplayLarge isSelected={false}>
+      Subtext goes here
+    </Tile>{' '}
+    <Tile title="Selected" icon={<BellIcon />} isStacked isDisplayLarge isSelected>
+      Subtext goes here
+    </Tile>{' '}
+    <Tile title="Disabled" icon={<BellIcon />} isStacked isDisplayLarge isDisabled isSelected={false}>
+      Subtext goes here
+    </Tile>
+  </div>
+);

package/src/components/Tile/examples/TileWithExtraContent.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import { Tile, Flex } from '@patternfly/react-core';
+import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon';
+
+export const TileWithExtraContent: React.FunctionComponent = () => (
+  <div role="listbox" aria-label="Tiles with extra content">
+    <Flex>
+      <Flex flex={{ default: 'flex_1' }}>
+        <Tile title="Default" icon={<BellIcon />} isStacked isSelected={false}>
+          This is really really long subtext that goes on for so long that it has to wrap to the next line. This is
+          really really long subtext that goes on for so long that it has to wrap to the next line.
+        </Tile>
+      </Flex>
+      <Flex flex={{ default: 'flex_1' }}>
+        <Tile title="Selected" icon={<BellIcon />} isStacked isSelected>
+          This is really really long subtext that goes on for so long that it has to wrap to the next line.
+        </Tile>
+      </Flex>
+      <Flex flex={{ default: 'flex_1' }}>
+        <Tile title="Disabled" icon={<BellIcon />} isStacked isDisabled isSelected={false}>
+          Subtext goes here
+        </Tile>
+      </Flex>
+    </Flex>
+  </div>
+);

package/src/components/Tile/examples/TileWithIcon.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import { Tile } from '@patternfly/react-core';
+import PlusIcon from '@patternfly/react-icons/dist/esm/icons/plus-icon';
+
+export const TileWithIcon: React.FunctionComponent = () => (
+  <div role="listbox" aria-label="Tiles with icon">
+    <Tile title="Default" icon={<PlusIcon />} isSelected={false}>
+      Subtext goes here
+    </Tile>{' '}
+    <Tile title="Selected" icon={<PlusIcon />} isSelected>
+      Subtext goes here
+    </Tile>{' '}
+    <Tile title="Disabled" icon={<PlusIcon />} isDisabled isSelected={false}>
+      Subtext goes here
+    </Tile>
+  </div>
+);

package/src/components/Tile/examples/TileWithSubtext.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import { Tile } from '@patternfly/react-core';
+
+export const TileWithSubtext: React.FunctionComponent = () => (
+  <div role="listbox" aria-label="Tiles with subtext">
+    <Tile title="Default" isSelected={false}>
+      Subtext goes here
+    </Tile>{' '}
+    <Tile title="Selected" isSelected>
+      Subtext goes here
+    </Tile>{' '}
+    <Tile title="Disabled" isDisabled isSelected={false}>
+      Subtext goes here
+    </Tile>
+  </div>
+);

package/src/demos/TileDemo.md

@@ -27,10 +27,10 @@ const TileSingleSelect: React.FunctionComponent = () => {
 
   return (
     <div role="listbox" aria-label="Single selection tiles">
-      <Tile title="Tile 1" id="single-select-tile-1" onClick={onSelect} onKeyDown={onKeyDown} isSelected={selectedId === 'tile-1'} />
-      <Tile title="Tile 2" id="single-select-tile-2" onClick={onSelect} onKeyDown={onKeyDown} isSelected={selectedId === 'tile-2'} />
-      <Tile title="Tile 3" id="single-select-tile-3" isDisabled isSelected={selectedId === 'tile-3'} />
-      <Tile title="Tile 4" id="single-select-tile-4" onClick={onSelect} onKeyDown={onKeyDown} isSelected={selectedId === 'tile-4'} />
+      <Tile title="Tile 1" id="single-select-tile-1" onClick={onSelect} onKeyDown={onKeyDown} isSelected={selectedId === 'single-select-tile-1'} />
+      <Tile title="Tile 2" id="single-select-tile-2" onClick={onSelect} onKeyDown={onKeyDown} isSelected={selectedId === 'single-select-tile-2'} />
+      <Tile title="Tile 3" id="single-select-tile-3" isDisabled isSelected={selectedId === 'single-select-tile-3'} />
+      <Tile title="Tile 4" id="single-select-tile-4" onClick={onSelect} onKeyDown={onKeyDown} isSelected={selectedId === 'single-select-tile-4'} />
     </div>
   );
 };
@@ -71,14 +71,14 @@ const TileMultiSelect: React.FunctionComponent = () => {
         id="multiselect-tile-1"
         onClick={onSelect}
         onKeyDown={onKeyDown}
-        isSelected={selectedIds.includes('tile-1')}
+        isSelected={selectedIds.includes('multiselect-tile-1')}
       />
       <Tile
         title="Tile 2"
         id="multiselect-tile-2"
         onClick={onSelect}
         onKeyDown={onKeyDown}
-        isSelected={selectedIds.includes('tile-2')}
+        isSelected={selectedIds.includes('multiselect-tile-2')}
       />
       <Tile title="Tile 3" id="multiselect-tile-3" isDisabled />
       <Tile
@@ -86,7 +86,7 @@ const TileMultiSelect: React.FunctionComponent = () => {
         id="multiselect-tile-4"
         onClick={onSelect}
         onKeyDown={onKeyDown}
-        isSelected={selectedIds.includes('tile-4')}
+        isSelected={selectedIds.includes('multiselect-tile-4')}
       />
     </div>
   );