@patternfly/react-core 5.0.0-alpha.105 → 5.0.0-alpha.107

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "5.0.0-alpha.105",
+  "version": "5.0.0-alpha.107",
   "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": "7c2c604a8d891233e59c4ec0879b33a33e73be69"
+  "gitHead": "2da278eeebfb3475c31e3693435a8c7f04a0edde"
 }

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

@@ -4,7 +4,6 @@ section: components
 subsection: date-and-time
 cssPrefix: pf-c-date-picker
 propComponents: ['DatePicker', 'CalendarFormat', 'DatePickerRef']
-beta: true
 ---
 
 ## Examples

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

@@ -3,7 +3,6 @@ id: Icon
 section: components
 cssPrefix: pf-c-icon
 propComponents: ['Icon']
-beta: true
 ---
 
 import LongArrowAltDownIcon from '@patternfly/react-icons/dist/esm/icons/long-arrow-alt-down-icon';

package/src/components/Menu/MenuItem.tsx

@@ -24,7 +24,7 @@ export interface MenuItemProps extends Omit<React.HTMLProps<HTMLLIElement>, 'onC
   itemId?: any;
   /** Target navigation link. Should not be used if the flyout prop is defined. */
   to?: string;
-  /** @beta Flag indicating the item has a checkbox */
+  /** Flag indicating the item has a checkbox */
   hasCheckbox?: boolean;
   /** Flag indicating whether the item is active */
   isActive?: boolean;

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

@@ -81,7 +81,7 @@ Use the `description` property to add short descriptive text below any menu item
 
 Use the `hasCheck` property to add a checkbox to a `<MenuItem>`. Use the `isSelected` property to indicate when a `<MenuItem>` is selected.
 
-```ts file="./MenuWithCheckbox.tsx" isBeta
+```ts file="./MenuWithCheckbox.tsx"
 
 ```
 

package/src/components/MultipleFileUpload/MultipleFileUploadStatusItem.tsx

@@ -54,7 +54,7 @@ export interface MultipleFileUploadStatusItemProps extends React.HTMLProps<HTMLL
   progressAriaLiveMessage?: string | ((loadPercentage: number) => string);
   /** Unique identifier for progress. Generated if not specified. */
   progressId?: string;
-  /** @beta Additional content related to the status item. */
+  /** Additional content related to the status item. */
   progressHelperText?: React.ReactNode;
 }
 

package/src/components/Progress/Progress.tsx

@@ -42,7 +42,7 @@ export interface ProgressProps extends Omit<React.HTMLProps<HTMLDivElement>, 'si
   'aria-label'?: string;
   /** Associates the ProgressBar with it's label for accessibility purposes. Required when title not used */
   'aria-labelledby'?: string;
-  /** @beta Content which can be used to convey additional information about the progress component.
+  /** Content which can be used to convey additional information about the progress component.
    * We recommend the helper text component as it was designed for this purpose.
    */
   helperText?: React.ReactNode;

package/src/components/Progress/ProgressContainer.tsx

@@ -54,7 +54,7 @@ export interface ProgressContainerProps extends Omit<React.HTMLProps<HTMLDivElem
     | 'left-end'
     | 'right-start'
     | 'right-end';
-  /** @beta Content which can be used to convey additional information about the progress component.
+  /** Content which can be used to convey additional information about the progress component.
    * We recommend the helper text component as it was designed for this purpose.
    */
   helperText?: React.ReactNode;

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

@@ -76,5 +76,5 @@ propComponents: ['Progress']
 ```
 
 ### Helper text
-```ts file="./ProgressHelperText.tsx" isBeta
+```ts file="./ProgressHelperText.tsx"
 ```

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

@@ -3,7 +3,6 @@ id: Progress stepper
 section: components
 cssPrefix: pf-c-progress-stepper
 propComponents: ['ProgressStepper', 'ProgressStep']
-beta: true
 ---
 
 import InProgressIcon from '@patternfly/react-icons/dist/esm/icons/in-progress-icon';

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

@@ -3,7 +3,6 @@ id: 'Search input'
 section: components
 cssPrefix: 'pf-c-search-input'
 propComponents: ['SearchInput', 'SearchInputSearchAttribute', 'SearchInputExpandable']
-beta: true
 ---
 
 import { ExternalLinkSquareAltIcon } from '@patternfly/react-icons';

package/src/components/Tabs/Tab.tsx

@@ -37,11 +37,11 @@ export interface TabProps
   innerRef?: React.Ref<any>;
   /** Optional Tooltip rendered to a Tab. Should be <Tooltip> with appropriate props for proper rendering. */
   tooltip?: React.ReactElement<any>;
-  /** @beta Aria-label for the close button added by passing the onClose property to Tabs. */
+  /** Aria-label for the close button added by passing the onClose property to Tabs. */
   closeButtonAriaLabel?: string;
-  /** @beta Flag indicating the close button should be disabled */
+  /** Flag indicating the close button should be disabled */
   isCloseDisabled?: boolean;
-  /** @beta Actions rendered beside the tab content */
+  /** Actions rendered beside the tab content */
   actions?: React.ReactNode;
   /** Value to set the data-ouia-component-id for the tab button.*/
   ouiaId?: number | string;

package/src/components/Tabs/Tabs.tsx

@@ -105,7 +105,7 @@ export interface TabsProps extends Omit<React.HTMLProps<HTMLElement | HTMLDivEle
   toggleAriaLabel?: string;
   /** Callback function to toggle the expandable tabs. */
   onToggle?: (event: React.MouseEvent, isExpanded: boolean) => void;
-  /** @beta Flag which places overflowing tabs into a menu triggered by the last tab. Additionally an object can be passed with custom settings for the overflow tab. */
+  /** Flag which places overflowing tabs into a menu triggered by the last tab. Additionally an object can be passed with custom settings for the overflow tab. */
   isOverflowHorizontal?: boolean | HorizontalOverflowObject;
   /** Value to overwrite the randomly generated data-ouia-component-id.*/
   ouiaId?: number | string;

package/src/components/Tabs/examples/Tabs.md

@@ -89,7 +89,7 @@ To enable horizontal overflow, use the `isOverflowHorizontal` property.
 
 In the following example, select the 'Show overflowing tab count' checkbox to add a count of overflow items to the final “more” tab.
 
-```ts file="./TabsHorizontalOverflow.tsx" isBeta
+```ts file="./TabsHorizontalOverflow.tsx"
 ```
 
 ### With tooltip react ref
@@ -218,7 +218,7 @@ You may add a help action to a tab to provide users with additional context in a
 
 To render an action beside the tab content, use the `actions` property of a `<Tab>`. Pass a popover and a `<TabsAction>` component into the `actions` property. 
 
-```ts file="./TabsHelp.tsx" isBeta
+```ts file="./TabsHelp.tsx"
 ```
 
 ### With help and close actions
@@ -227,5 +227,5 @@ To add multiple actions to a tab, create a `<TabAction>` component for each acti
 
 The following example passes in both help popover and close actions.
 
-```ts file="./TabsHelpAndClose.tsx" isBeta
+```ts file="./TabsHelpAndClose.tsx"
 ```

package/src/components/TextInputGroup/examples/TextInputGroup.md

@@ -3,7 +3,6 @@ id: Text input group
 section: components
 cssPrefix: pf-c-text-input-group
 propComponents: ['TextInputGroup', 'TextInputGroupMain', 'TextInputGroupUtilities']
-beta: true
 ---
 
 import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';

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

@@ -3,7 +3,6 @@ id: Tile
 section: components
 cssPrefix: pf-c-tile
 propComponents: ['Tile']
-beta: true
 ---
 
 import PlusIcon from '@patternfly/react-icons/dist/esm/icons/plus-icon';

package/src/components/Truncate/examples/Truncate.md

@@ -2,7 +2,6 @@
 id: Truncate
 section: components
 propComponents: [Truncate]
-beta: true
 ---
 
 import './TruncateExamples.css';
@@ -56,4 +55,4 @@ import { Truncate } from '@patternfly/react-core';
     tooltipPosition={'bottom'}
   />
 </div>
-```
+```

package/src/demos/Card/Card.md

@@ -19,6 +19,7 @@ import swaggerIcon from './camel-swagger-java_200x150.png';
 import azureIcon from './FuseConnector_Icons_AzureServices.png';
 import restIcon from './FuseConnector_Icons_REST.png';
 import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
+import { data } from './CardData.jsx';
 
 ## Demos
 
@@ -84,6 +85,7 @@ import sparkIcon from './camel-spark_200x150.png';
 import swaggerIcon from './camel-swagger-java_200x150.png';
 import azureIcon from './FuseConnector_Icons_AzureServices.png';
 import restIcon from './FuseConnector_Icons_REST.png';
+import { data } from './CardData.jsx';
 
 class CardViewBasic extends React.Component {
   constructor(props) {
@@ -93,7 +95,7 @@ class CardViewBasic extends React.Component {
       filters: {
         products: []
       },
-      res: [],
+      cardData: data,
       isChecked: false,
       selectedItems: [],
       areAllSelected: false,
@@ -134,7 +136,8 @@ class CardViewBasic extends React.Component {
       });
     };
 
-    this.onCardKebabDropdownToggle = (key) => {
+    this.onCardKebabDropdownToggle = (key, event) => {
+      event?.stopPropagation();
       this.setState((prevState) => ({
         [key]: !prevState[key]
       }));
@@ -149,7 +152,7 @@ class CardViewBasic extends React.Component {
     this.deleteItem = (item) => (event) => {
       const filter = (getter) => (val) => getter(val) !== item.id;
       this.setState({
-        res: this.state.res.filter(filter(({ id }) => id)),
+        cardData: this.state.cardData.filter(filter(({ id }) => id)),
         selectedItems: this.state.selectedItems.filter(filter((id) => id))
       });
     };
@@ -162,7 +165,8 @@ class CardViewBasic extends React.Component {
 
     this.onPerPageSelect = (_event, perPage) => {
       this.setState({
-        perPage
+        perPage,
+        page: 1
       });
     };
 
@@ -264,7 +268,7 @@ class CardViewBasic extends React.Component {
 
   splitCheckboxSelectAll(e) {
     const { checked } = e.target;
-    const { isChecked, res } = this.state;
+    const { isChecked, cardData } = this.state;
     let collection = [];
 
     if (checked) {
@@ -329,9 +333,9 @@ class CardViewBasic extends React.Component {
   }
 
   getAllItems() {
-    const { res } = this.state;
+    const { cardData } = this.state;
     const collection = [];
-    for (const items of res) {
+    for (const items of cardData) {
       collection.push(items.id);
     }
 
@@ -339,31 +343,19 @@ class CardViewBasic extends React.Component {
   }
 
   updateSelected() {
-    const { res, selectedItems } = this.state;
-    let rows = res.map((post) => {
+    const { cardData, selectedItems } = this.state;
+    let rows = cardData.map((post) => {
       post.selected = selectedItems.includes(post.id);
       return post;
     });
 
     this.setState({
-      res: rows
+      cardData: rows
     });
   }
 
-  fetch(page, perPage) {
-    fetch(`https://my-json-server.typicode.com/jenny-s51/cardviewdata/posts?_page=${page}&_limit=${perPage}`)
-      .then((resp) => resp.json())
-      .then((resp) => this.setState({ res: resp, perPage, page }))
-      .then(() => this.updateSelected())
-      .catch((err) => this.setState({ error: err }));
-  }
-
-  componentDidMount() {
-    this.fetch(this.state.page, this.state.perPage);
-  }
-
   renderPagination() {
-    const { page, perPage, totalItemCount } = this.state;
+    const { page, perPage, totalItemCount, cardData } = this.state;
 
     const defaultPerPageOptions = [
       {
@@ -386,12 +378,8 @@ class CardViewBasic extends React.Component {
         page={page}
         perPage={perPage}
         perPageOptions={defaultPerPageOptions}
-        onSetPage={(_evt, value) => {
-          this.fetch(value, perPage);
-        }}
-        onPerPageSelect={(_evt, value) => {
-          this.fetch(1, value);
-        }}
+        onSetPage={this.onSetPage}
+        onPerPageSelect={this.onPerPageSelect}
         variant="top"
         isCompact
       />
@@ -399,7 +387,7 @@ class CardViewBasic extends React.Component {
   }
 
   buildSelectDropdown() {
-    const { splitButtonDropdownIsOpen, selectedItems, areAllSelected } = this.state;
+    const { splitButtonDropdownIsOpen, selectedItems, areAllSelected, filters, cardData } = this.state;
     const numSelected = selectedItems.length;
     const allSelected = areAllSelected;
     const anySelected = numSelected > 0;
@@ -508,7 +496,7 @@ class CardViewBasic extends React.Component {
       splitButtonDropdownIsOpen,
       activeItem,
       filters,
-      res,
+      cardData,
       checked,
       selectedItems,
       areAllSelected,
@@ -576,13 +564,6 @@ class CardViewBasic extends React.Component {
       </React.Fragment>
     );
 
-    const filtered =
-      filters.products.length > 0
-        ? res.filter((card) => {
-            return filters.products.length === 0 || filters.products.includes(card.name);
-          })
-        : res;
-
     const icons = {
       pfIcon,
       activeMQIcon,
@@ -595,6 +576,13 @@ class CardViewBasic extends React.Component {
       restIcon,
       swaggerIcon
     };
+    
+    const filtered =
+      filters.products.length > 0
+        ? data.filter((card) => {
+            return filters.products.length === 0 || filters.products.includes(card.name);
+          })
+        : cardData.slice((page - 1) * perPage, perPage === 1 ? page * perPage : page * perPage - 1);
 
     return (
       <React.Fragment>
@@ -630,6 +618,7 @@ class CardViewBasic extends React.Component {
                 <Card
                   hasSelectableInput
                   isCompact
+                  isSelectableRaised
                   key={product.name}
                   id={product.name.replace(/ /g, '-')}
                   onKeyDown={(e) => this.onKeyDown(e, product.id)}
@@ -642,14 +631,14 @@ class CardViewBasic extends React.Component {
                       actions: (
                         <>
                           <Dropdown
-                            isOpen={this.state[key]}
+                            isOpen={this.state[key] ?? false}
                             onOpenChange={(isOpen) => this.setState({ [key]: isOpen })}
-                            toggle={(toggleRef) => (
+                            toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
                               <MenuToggle
                                 ref={toggleRef}
                                 aria-label={`${product.name} actions`}
                                 variant="plain"
-                                onClick={() => this.onCardKebabDropdownToggle(key)}
+                                onClick={(e) => this.onCardKebabDropdownToggle(key, e)}
                                 isExpanded={this.state[key]}
                               >
                                 <EllipsisVIcon />

package/src/demos/Card/CardData.jsx

@@ -0,0 +1,62 @@
+export const data = [
+    {
+      "id": 0,
+      "name": "PatternFly",
+      "description": "PatternFly is a community project that promotes design commonality and improves user experience.",
+      "icon": "pfIcon"
+    },
+    {
+      "id": 1,
+      "name": "ActiveMQ",
+      "description": "The ActiveMQ component allows messages to be sent to a JMS Queue or Topic; or messages to be consumed from a JMS Queue or Topic using Apache ActiveMQ.",
+      "icon": "activeMQIcon"
+    },
+    {
+      "id": 2,
+      "name": "Apache Spark",
+      "description": "This documentation page covers the Apache Spark component for the Apache Camel.",
+      "icon": "sparkIcon"
+    },
+    {
+      "id": 3,
+      "name": "Avro",
+      "description": "This component provides a dataformat for avro, which allows serialization and deserialization of messages using Apache Avro’s binary dataformat. Moreover, it provides support for Apache Avro’s rpc, by providing producers and consumers endpoint for using avro over netty or http.",
+      "icon": "avroIcon"
+    },
+    {
+      "id": 4,
+      "name": "Azure Services",
+      "description": "The Camel Components for Windows Azure Services provide connectivity to Azure services from Camel.",
+      "icon": "azureIcon"
+    },
+    {
+      "id": 5,
+      "name": "Crypto",
+      "description": "For providing flexible endpoints to sign and verify exchanges using the Signature Service of the Java Cryptographic Extension.",
+      "icon": "saxonIcon"
+    },
+    {
+      "id": 6,
+      "name": "DropBox",
+      "description": "The dropbox component allows you to treat Dropbox remote folders as a producer or consumer of messages.",
+      "icon": "dropBoxIcon"
+    },
+    {
+      "id": 7,
+      "name": "JBoss Data Grid",
+      "description": "Read or write to a fully-supported distributed cache and data grid for faster integration services.",
+      "icon": "infinispanIcon"
+    },
+    {
+      "id": 8,
+      "name": "REST",
+      "description": "The rest component allows to define REST endpoints (consumer) using the Rest DSL and plugin to other Camel components as the REST transport. From Camel 2.18 onwards the rest component can also be used as a client (producer) to call REST services.",
+      "icon": "restIcon"
+    },
+    {
+      "id": 9,
+      "name": "SWAGGER",
+      "description": "Expose REST services and their APIs using Swagger specification.",
+      "icon": "swaggerIcon"
+    }
+  ]

package/src/demos/ComposableMenu/ComposableMenu.md

@@ -46,17 +46,17 @@ Custom menus can be constructed using a composable approach by combining the [Me
 
 ### Composable simple checkbox select
 
-```ts isBeta file="./examples/ComposableSimpleCheckboxSelect.tsx"
+```ts file="./examples/ComposableSimpleCheckboxSelect.tsx"
 ```
 
 ### Composable typeahead select
 
-```ts isBeta file="./examples/ComposableTypeaheadSelect.tsx"
+```ts file="./examples/ComposableTypeaheadSelect.tsx"
 ```
 
 ### Composable multiple typeahead select
 
-```ts isBeta file="./examples/ComposableMultipleTypeaheadSelect.tsx"
+```ts file="./examples/ComposableMultipleTypeaheadSelect.tsx"
 ```
 
 ### Composable drilldown menu

package/src/demos/DatePicker/DatePicker.md

@@ -2,7 +2,6 @@
 id: Date picker
 section: components
 subsection: date-and-time
-beta: true
 ---
 
 ## Demos

package/src/demos/PrimaryDetail.md

@@ -25,6 +25,7 @@ import swaggerIcon from './Card/camel-swagger-java_200x150.png';
 import azureIcon from './Card/FuseConnector_Icons_AzureServices.png';
 import restIcon from './Card/FuseConnector_Icons_REST.png';
 import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
+import { data } from '@patternfly/react-core/src/demos/Card/CardData.jsx';
 
 ## Demos
 
@@ -1019,6 +1020,7 @@ import swaggerIcon from './camel-swagger-java_200x150.png';
 import azureIcon from './FuseConnector_Icons_AzureServices.png';
 import restIcon from './FuseConnector_Icons_REST.png';
 import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
+import { data } from '@patternfly/react-core/src/demos/Card/CardData.jsx';
 
 class PrimaryDetailCardView extends React.Component {
   constructor(props) {
@@ -1037,7 +1039,7 @@ class PrimaryDetailCardView extends React.Component {
       filters: {
         products: []
       },
-      res: [],
+      cardData: data,
       isUpperToolbarDropdownOpen: false,
       isUpperToolbarKebabDropdownOpen: false,
       isLowerToolbarDropdownOpen: false,
@@ -1263,9 +1265,9 @@ class PrimaryDetailCardView extends React.Component {
     this.deleteItem = (event, item) => {
       event.stopPropagation();
       const filter = (getter) => (val) => getter(val) !== item.id;
-      const filteredCards = this.state.res.filter(filter(({ id }) => id));
+      const filteredCards = this.state.cardData.filter(filter(({ id }) => id));
       this.setState({
-        res: filteredCards,
+        cardData: filteredCards,
         selectedItems: this.state.selectedItems.filter(filter((id) => id)),
         totalItemCount: this.state.totalItemCount - 1,
         isDrawerExpanded: false,
@@ -1297,27 +1299,15 @@ class PrimaryDetailCardView extends React.Component {
   }
 
   getAllItems() {
-    const { res } = this.state;
+    const { cardData } = this.state;
     const collection = [];
-    for (const items of res) {
+    for (const items of cardData) {
       collection.push(items.id);
     }
 
     return collection;
   }
 
-  fetch(page, perPage) {
-    fetch(`https://my-json-server.typicode.com/jenny-s51/cardviewdata/posts?_page=${page}&_limit=${perPage}`)
-      .then((resp) => resp.json())
-      .then((resp) => this.setState({ res: resp, perPage, page }))
-      .then(() => this.updateSelected())
-      .catch((err) => this.setState({ error: err }));
-  }
-
-  componentDidMount() {
-    this.fetch(this.state.page, this.state.perPage);
-  }
-
   buildSelectDropdown() {
     const { splitButtonDropdownIsOpen, selectedItems, areAllSelected } = this.state;
     const numSelected = selectedItems.length;
@@ -1372,7 +1362,7 @@ class PrimaryDetailCardView extends React.Component {
   }
 
   render() {
-    const { isDrawerExpanded, isChecked, selectedItems, activeCard, isLowerToolbarKebabDropdownOpen, filters, res } =
+    const { isDrawerExpanded, isChecked, selectedItems, activeCard, isLowerToolbarKebabDropdownOpen, filters, cardData } =
       this.state;
 
     const toolbarKebabDropdownItems = (
@@ -1438,8 +1428,8 @@ class PrimaryDetailCardView extends React.Component {
 
     const filtered =
       filters.products.length > 0
-        ? res.filter((card) => filters.products.length === 0 || filters.products.includes(card.name))
-        : res;
+        ? cardData.filter((card) => filters.products.length === 0 || filters.products.includes(card.name))
+        : cardData;
 
     const icons = {
       pfIcon,

package/src/demos/ProgressStepperDemo.md

@@ -1,7 +1,6 @@
 ---
 id: Progress stepper
 section: components
-beta: true
 ---
 
 ## Demos

package/src/demos/SearchInput/SearchInput.md

@@ -1,7 +1,6 @@
 ---
 id: Search input
 section: components
-beta: true
 ---
 
 import {

package/src/demos/TextInputGroupDemo.md

@@ -1,7 +1,6 @@
 ---
 id: Text input group
 section: components
-beta: true
 ---
 
 import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';

package/src/deprecated/components/Dropdown/DropdownToggleCheckbox.tsx

@@ -16,7 +16,7 @@ export interface DropdownToggleCheckboxProps
   isDisabled?: boolean;
   /** Flag to show if the checkbox is checked */
   isChecked?: boolean | null;
-  /** @beta Flag to show if the checkbox is in progress */
+  /** Flag to show if the checkbox is in progress */
   isInProgress?: boolean | null;
   /** Alternate Flag to show if the checkbox is checked */
   checked?: boolean | null;
@@ -28,9 +28,9 @@ export interface DropdownToggleCheckboxProps
   id: string;
   /** Aria-label of the checkbox */
   'aria-label': string;
-  /** @beta Text describing current loading status or progress */
+  /** Text describing current loading status or progress */
   defaultProgressAriaValueText?: string;
-  /** @beta Aria-label for the default progress icon to describe what is loading */
+  /** Aria-label for the default progress icon to describe what is loading */
   defaultProgressAriaLabel?: string;
   /** Value to overwrite the randomly generated data-ouia-component-id.*/
   ouiaId?: number | string;

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

@@ -161,7 +161,7 @@ Text labels may optionally be used alongside actions within split buttons.
 
 The `isInProgress` property can be used to indicate a progress state by rendering a spinner in place of a checkbox.
 
-```ts isBeta file="./DropdownSplitButtonProgressCheckbox.tsx"
+```ts file="./DropdownSplitButtonProgressCheckbox.tsx"
 
 ```