@patternfly/react-core 5.0.0-alpha.62 → 5.0.0-alpha.63

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "5.0.0-alpha.62",
+  "version": "5.0.0-alpha.63",
   "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": "^17 || ^18",
     "react-dom": "^17 || ^18"
   },
-  "gitHead": "d92de5c78c49b2c1e5df50821a7fdb0870cea154"
+  "gitHead": "729d7446d8c6769feecaa9406667d89cfbf53a9c"
 }

package/src/components/CalendarMonth/CalendarMonth.tsx

@@ -1,7 +1,8 @@
 import React, { useEffect } from 'react';
-import { TextInput } from '../TextInput/TextInput';
-import { Button } from '../Button/Button';
-import { Select, SelectOption } from '../Select';
+import { TextInput } from '../TextInput';
+import { Button } from '../Button';
+import { Select, SelectList, SelectOption } from '../Select';
+import { MenuToggle, MenuToggleElement } from '../MenuToggle';
 import { InputGroup } from '../InputGroup';
 import AngleLeftIcon from '@patternfly/react-icons/dist/esm/icons/angle-left-icon';
 import AngleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-right-icon';
@@ -263,13 +264,21 @@ export const CalendarMonth = ({
               Month
             </span>
             <Select
-              // Max width with "September"
-              width="140px"
+              toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
+                <MenuToggle
+                  ref={toggleRef}
+                  onClick={()=>setIsSelectOpen(!isSelectOpen)}
+                  isExpanded={isSelectOpen}
+                  style={{width: "140px"} as React.CSSProperties }
+                >
+                  {monthFormatted}
+                </MenuToggle>
+              )}
               aria-labelledby={hiddenMonthId}
               isOpen={isSelectOpen}
-              onToggle={() => {
-                setIsSelectOpen(!isSelectOpen);
-                onSelectToggle(!isSelectOpen);
+              onOpenChange={(isOpen) => {
+                setIsSelectOpen(isOpen);
+                onSelectToggle(isOpen);
               }}
               onSelect={(ev, monthNum) => {
                 // When we put CalendarMonth in a Popover we want the Popover's onDocumentClick
@@ -285,14 +294,15 @@ export const CalendarMonth = ({
                   onMonthChange(ev, newDate);
                 }, 0);
               }}
-              variant="single"
-              selections={monthFormatted}
+              selected={monthFormatted}
             >
-              {longMonths.map((longMonth, index) => (
-                <SelectOption key={index} value={index} isSelected={longMonth === monthFormatted}>
-                  {longMonth}
-                </SelectOption>
-              ))}
+              <SelectList>
+                {longMonths.map((longMonth, index) => (
+                  <SelectOption key={index} itemId={index} isSelected={longMonth === monthFormatted}>
+                    {longMonth}
+                  </SelectOption>
+                ))}
+              </SelectList>
             </Select>
           </div>
           <div className={styles.calendarMonthHeaderYear}>

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

@@ -103,45 +103,36 @@ exports[`With popover opened 1`] = `
                   >
                     Month
                   </span>
-                  <div
-                    class="pf-c-select"
-                    data-ouia-component-id="OUIA-Generated-Select-single-1"
-                    data-ouia-component-type="PF4/Select"
-                    data-ouia-safe="true"
-                    style="width: 140px;"
-                  >
+                  <div>
                     <button
                       aria-expanded="false"
-                      aria-haspopup="listbox"
-                      aria-label="Options menu"
-                      aria-labelledby="unique_id_mock pf-select-toggle-id-0"
-                      class="pf-c-select__toggle"
-                      id="pf-select-toggle-id-0"
+                      class="pf-c-menu-toggle"
+                      style="width: 140px;"
                       type="button"
                     >
-                      <div
-                        class="pf-c-select__toggle-wrapper"
+                      <span
+                        class="pf-c-menu-toggle__text"
                       >
-                        <span
-                          class="pf-c-select__toggle-text"
-                        >
-                          December
-                        </span>
-                      </div>
+                        December
+                      </span>
                       <span
-                        class="pf-c-select__toggle-arrow"
+                        class="pf-c-menu-toggle__controls"
                       >
-                        <svg
-                          aria-hidden="true"
-                          class="pf-svg"
-                          fill="currentColor"
-                          role="img"
-                          viewBox="0 0 320 512"
+                        <span
+                          class="pf-c-menu-toggle__toggle-icon"
                         >
-                          <path
-                            d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
-                          />
-                        </svg>
+                          <svg
+                            aria-hidden="true"
+                            class="pf-svg"
+                            fill="currentColor"
+                            role="img"
+                            viewBox="0 0 320 512"
+                          >
+                            <path
+                              d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
+                            />
+                          </svg>
+                        </span>
                       </span>
                     </button>
                   </div>

package/src/components/LoginPage/examples/LoginPageLanguageSelect.tsx

@@ -8,9 +8,11 @@ import {
   LoginPage,
   ListItem,
   ListVariant,
+  MenuToggle,
+  MenuToggleElement,
   Select,
-  SelectOption,
-  SelectOptionObject
+  SelectList,
+  SelectOption
 } from '@patternfly/react-core';
 import ExclamationCircleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-circle-icon';
 
@@ -22,7 +24,7 @@ export const LoginPageLanguageSelect: React.FunctionComponent = () => {
   const [isValidPassword, setIsValidPassword] = React.useState(true);
   const [isRememberMeChecked, setIsRememberMeChecked] = React.useState(false);
   const [isHeaderUtilsOpen, setIsHeaderUtilsOpen] = React.useState(false);
-  const [selectedHeaderUtils, setSelectedHeaderUtils] = React.useState<string | SelectOptionObject>('English');
+  const [selectedHeaderUtils, setSelectedHeaderUtils] = React.useState('English');
 
   /** i18n object is used to simulate i18n integration of native language translation */
   const i18n = {
@@ -35,23 +37,21 @@ export const LoginPageLanguageSelect: React.FunctionComponent = () => {
     Bengali: 'বাংলা'
   };
 
-  const headerUtilsOptions = [
-    <SelectOption key={0} value={i18n.English} />,
-    <SelectOption key={1} value={i18n.Mandarin} />,
-    <SelectOption key={2} value={i18n.Hindi} />,
-    <SelectOption key={3} value={i18n.Spanish} />,
-    <SelectOption key={4} value={i18n.Portuguese} />,
-    <SelectOption key={5} value={i18n.Arabic} />,
-    <SelectOption key={6} value={i18n.Bengali} />
-  ];
-
-  const onHeaderUtilsToggle = (_event: any, isExpanded: boolean) => {
-    setIsHeaderUtilsOpen(isExpanded);
-  };
+  const headerUtilsOptions = (
+    <SelectList>
+      <SelectOption key={0} itemId={i18n.English}>{i18n.English}</SelectOption>
+      <SelectOption key={1} itemId={i18n.Mandarin}>{i18n.Mandarin}</SelectOption>
+      <SelectOption key={2} itemId={i18n.Hindi}>{i18n.Hindi}</SelectOption>
+      <SelectOption key={3} itemId={i18n.Spanish}>{i18n.Spanish}</SelectOption>
+      <SelectOption key={4} itemId={i18n.Portuguese}>{i18n.Portuguese}</SelectOption>
+      <SelectOption key={5} itemId={i18n.Arabic}>{i18n.Arabic}</SelectOption>
+      <SelectOption key={6} itemId={i18n.Bengali}>{i18n.Bengali}</SelectOption>
+    </SelectList>
+  );
 
   const onHeaderUtilsSelect = (
     _event: React.MouseEvent<Element, MouseEvent> | React.ChangeEvent<Element>,
-    value: string | SelectOptionObject
+    value: string
   ) => {
     setSelectedHeaderUtils(value);
     setIsHeaderUtilsOpen(false);
@@ -60,9 +60,18 @@ export const LoginPageLanguageSelect: React.FunctionComponent = () => {
   const headerUtils = (
     <Select
       aria-label="Select Language"
-      onToggle={onHeaderUtilsToggle}
+      toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
+        <MenuToggle
+          ref={toggleRef}
+          onClick={() => setIsHeaderUtilsOpen(!isHeaderUtilsOpen)}
+          isExpanded={isHeaderUtilsOpen}
+        >
+          {selectedHeaderUtils}
+        </MenuToggle>
+      )}
       onSelect={onHeaderUtilsSelect}
-      selections={selectedHeaderUtils}
+      onOpenChange={isOpen => setIsHeaderUtilsOpen(isOpen)}
+      selected={selectedHeaderUtils}
       isOpen={isHeaderUtilsOpen}
     >
       {headerUtilsOptions}

package/src/components/MenuToggle/MenuToggle.tsx

@@ -3,6 +3,7 @@ import styles from '@patternfly/react-styles/css/components/MenuToggle/menu-togg
 import { css } from '@patternfly/react-styles';
 import CaretDownIcon from '@patternfly/react-icons/dist/esm/icons/caret-down-icon';
 import { BadgeProps } from '../Badge';
+import { Icon } from '../Icon';
 
 export type MenuToggleElement = HTMLDivElement | HTMLButtonElement;
 
@@ -85,7 +86,7 @@ export class MenuToggleBase extends React.Component<MenuToggleProps> {
 
     const content = (
       <>
-        {icon && <span className={css(styles.menuToggleIcon)}>{icon}</span>}
+        {icon && <span className={css(styles.menuToggleIcon)}><Icon>{icon}</Icon></span>}
         {isTypeahead ? children : <span className={css(styles.menuToggleText)}>{children}</span>}
         {React.isValidElement(badge) && <span className={css(styles.menuToggleCount)}>{badge}</span>}
         {isTypeahead ? (

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

@@ -124,17 +124,25 @@ exports[`menu toggle shows icon 1`] = `
     <span
       class="pf-c-menu-toggle__icon"
     >
-      <svg
-        aria-hidden="true"
-        class="pf-svg"
-        fill="currentColor"
-        role="img"
-        viewBox="0 0 512 512"
+      <span
+        class="pf-c-icon"
       >
-        <path
-          d="M487.4 315.7l-42.6-24.6c4.3-23.2 4.3-47 0-70.2l42.6-24.6c4.9-2.8 7.1-8.6 5.5-14-11.1-35.6-30-67.8-54.7-94.6-3.8-4.1-10-5.1-14.8-2.3L380.8 110c-17.9-15.4-38.5-27.3-60.8-35.1V25.8c0-5.6-3.9-10.5-9.4-11.7-36.7-8.2-74.3-7.8-109.2 0-5.5 1.2-9.4 6.1-9.4 11.7V75c-22.2 7.9-42.8 19.8-60.8 35.1L88.7 85.5c-4.9-2.8-11-1.9-14.8 2.3-24.7 26.7-43.6 58.9-54.7 94.6-1.7 5.4.6 11.2 5.5 14L67.3 221c-4.3 23.2-4.3 47 0 70.2l-42.6 24.6c-4.9 2.8-7.1 8.6-5.5 14 11.1 35.6 30 67.8 54.7 94.6 3.8 4.1 10 5.1 14.8 2.3l42.6-24.6c17.9 15.4 38.5 27.3 60.8 35.1v49.2c0 5.6 3.9 10.5 9.4 11.7 36.7 8.2 74.3 7.8 109.2 0 5.5-1.2 9.4-6.1 9.4-11.7v-49.2c22.2-7.9 42.8-19.8 60.8-35.1l42.6 24.6c4.9 2.8 11 1.9 14.8-2.3 24.7-26.7 43.6-58.9 54.7-94.6 1.5-5.5-.7-11.3-5.6-14.1zM256 336c-44.1 0-80-35.9-80-80s35.9-80 80-80 80 35.9 80 80-35.9 80-80 80z"
-        />
-      </svg>
+        <span
+          class="pf-c-icon__content"
+        >
+          <svg
+            aria-hidden="true"
+            class="pf-svg"
+            fill="currentColor"
+            role="img"
+            viewBox="0 0 512 512"
+          >
+            <path
+              d="M487.4 315.7l-42.6-24.6c4.3-23.2 4.3-47 0-70.2l42.6-24.6c4.9-2.8 7.1-8.6 5.5-14-11.1-35.6-30-67.8-54.7-94.6-3.8-4.1-10-5.1-14.8-2.3L380.8 110c-17.9-15.4-38.5-27.3-60.8-35.1V25.8c0-5.6-3.9-10.5-9.4-11.7-36.7-8.2-74.3-7.8-109.2 0-5.5 1.2-9.4 6.1-9.4 11.7V75c-22.2 7.9-42.8 19.8-60.8 35.1L88.7 85.5c-4.9-2.8-11-1.9-14.8 2.3-24.7 26.7-43.6 58.9-54.7 94.6-1.7 5.4.6 11.2 5.5 14L67.3 221c-4.3 23.2-4.3 47 0 70.2l-42.6 24.6c-4.9 2.8-7.1 8.6-5.5 14 11.1 35.6 30 67.8 54.7 94.6 3.8 4.1 10 5.1 14.8 2.3l42.6-24.6c17.9 15.4 38.5 27.3 60.8 35.1v49.2c0 5.6 3.9 10.5 9.4 11.7 36.7 8.2 74.3 7.8 109.2 0 5.5-1.2 9.4-6.1 9.4-11.7v-49.2c22.2-7.9 42.8-19.8 60.8-35.1l42.6 24.6c4.9 2.8 11 1.9 14.8-2.3 24.7-26.7 43.6-58.9 54.7-94.6 1.5-5.5-.7-11.3-5.6-14.1zM256 336c-44.1 0-80-35.9-80-80s35.9-80 80-80 80 35.9 80 80-35.9 80-80 80z"
+            />
+          </svg>
+        </span>
+      </span>
     </span>
     <span
       class="pf-c-menu-toggle__text"