@patternfly/react-core 6.0.0-alpha.38 → 6.0.0-alpha.39

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":"6.0.0-alpha.37","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":"6.0.0-alpha.38","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":"6.0.0-alpha.37","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":"6.0.0-alpha.38","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":"6.0.0-alpha.37","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":"6.0.0-alpha.38","private":true}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "6.0.0-alpha.38",
+  "version": "6.0.0-alpha.39",
   "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",
@@ -73,5 +73,5 @@
     "react": "^17 || ^18",
     "react-dom": "^17 || ^18"
   },
-  "gitHead": "3a88c11a91941fd01688e978a5c07b947f3a078a"
+  "gitHead": "46db661285dacdab56d6ddc78f0cd31f56a1edea"
 }

package/src/components/Button/Button.tsx

@@ -124,6 +124,7 @@ const ButtonBase: React.FunctionComponent<ButtonProps> = ({
   iconPosition = 'start',
   'aria-label': ariaLabel = null,
   icon = null,
+  role,
   ouiaId,
   ouiaSafe = true,
   tabIndex = null,
@@ -182,7 +183,7 @@ const ButtonBase: React.FunctionComponent<ButtonProps> = ({
       disabled={isButtonElement ? isDisabled : null}
       tabIndex={tabIndex !== null ? tabIndex : getDefaultTabIdx()}
       type={isButtonElement || isInlineSpan ? type : null}
-      role={isInlineSpan ? 'button' : null}
+      role={isInlineSpan ? 'button' : role}
       ref={innerRef}
       {...ouiaProps}
     >

package/src/components/CalendarMonth/examples/CalendarMonth.md

@@ -11,13 +11,15 @@ propComponents: ['CalendarMonth', 'CalendarFormat', 'CalendarMonthInlineProps']
 ### Selectable date
 
 ```ts file="./CalendarMonthSelectableDate.tsx"
+
 ```
 
 ### Date range
 
 In this example, there are 2 dates selected: a range start date (via the `rangeStart` prop) and a range end date (via the `date` prop). Additionally, any dates prior to the range start date are disabled by passing in an array of functions to the `validators` prop. In this case a single function is passed in, which checks whether a date is greater than or equal to the range start date.
 
-For this example, these dates are static and cannot be updated. For an interactive demo, see our [Date picker demos](https://www.patternfly.org/v4/components/date-picker/react-demos).
+For this example, these dates are static and cannot be updated. For an interactive demo, see our [Date picker demos](/components/date-and-time/date-picker/react-demos).
 
 ```ts file="./CalendarMonthDateRange.tsx"
+
 ```

package/src/components/Menu/MenuItemAction.tsx

@@ -3,8 +3,8 @@ import styles from '@patternfly/react-styles/css/components/Menu/menu';
 import { css } from '@patternfly/react-styles';
 import StarIcon from '@patternfly/react-icons/dist/esm/icons/star-icon';
 import { MenuContext, MenuItemContext } from './MenuContext';
-
-export interface MenuItemActionProps extends Omit<React.HTMLProps<HTMLButtonElement>, 'type' | 'ref'> {
+import { Button } from '../Button';
+export interface MenuItemActionProps extends React.HTMLProps<HTMLDivElement> {
   /** Additional classes added to the action button */
   className?: string;
   /** The action icon to use */
@@ -24,7 +24,7 @@ export interface MenuItemActionProps extends Omit<React.HTMLProps<HTMLButtonElem
 }
 
 const MenuItemActionBase: React.FunctionComponent<MenuItemActionProps> = ({
-  className = '',
+  className,
   icon,
   onClick,
   'aria-label': ariaLabel,
@@ -45,24 +45,27 @@ const MenuItemActionBase: React.FunctionComponent<MenuItemActionProps> = ({
             onActionClick && onActionClick(event, itemId, actionId);
           };
           return (
-            <button
+            <div
               className={css(
                 styles.menuItemAction,
                 isFavorited !== null && 'pf-m-favorite',
                 isFavorited && styles.modifiers.favorited,
                 className
               )}
-              aria-label={ariaLabel}
-              onClick={onClickButton}
-              {...((isDisabled === true || isDisabledContext === true) && { disabled: true })}
-              ref={innerRef}
-              tabIndex={-1}
               {...props}
             >
-              <span className={css(styles.menuItemActionIcon)}>
+              <Button
+                aria-label={ariaLabel}
+                onClick={onClickButton}
+                ref={innerRef}
+                role="menuitem"
+                variant="plain"
+                tabIndex={-1}
+                isDisabled={isDisabled || isDisabledContext}
+              >
                 {icon === 'favorites' || isFavorited !== null ? <StarIcon aria-hidden /> : icon}
-              </span>
-            </button>
+              </Button>
+            </div>
           );
         }}
       </MenuItemContext.Consumer>

package/src/helpers/KeyboardHandler.tsx

@@ -106,23 +106,30 @@ export const handleArrows = (
 
           if (!activeRow.length || onlyTraverseSiblings) {
             let nextSibling = activeElement;
-            // While a sibling exists, check each sibling to determine if it should be focussed
+
             while (nextSibling) {
-              // Set the next checked sibling, determined by the horizontal arrow key direction
-              nextSibling = key === 'ArrowLeft' ? nextSibling.previousElementSibling : nextSibling.nextElementSibling;
+              const isDirectChildOfNavigableElement = nextSibling.parentElement === element;
+              const nextSiblingMainElement = isDirectChildOfNavigableElement ? nextSibling : nextSibling.parentElement;
+              nextSibling =
+                key === 'ArrowLeft'
+                  ? nextSiblingMainElement.previousElementSibling
+                  : nextSiblingMainElement.nextElementSibling;
+
               if (nextSibling) {
                 if (validSiblingTags.includes(nextSibling.tagName)) {
-                  // If the sibling's tag is included in validSiblingTags, set the next target element and break the loop
                   moveTarget = nextSibling;
                   break;
                 }
-                // If the sibling's tag is not valid, skip to the next sibling if possible
+                // For cases where the validSiblingTag is inside a div wrapper
+                if (validSiblingTags.includes(nextSibling.children[0].tagName)) {
+                  moveTarget = nextSibling.children[0];
+                  break;
+                }
               }
             }
           } else {
             activeRow.forEach((focusableElement, index) => {
               if (event.target === focusableElement) {
-                // Once found, move up or down the array by 1. Determined by the vertical arrow key direction
                 const increment = key === 'ArrowLeft' ? -1 : 1;
                 currentIndex = index + increment;
                 if (currentIndex >= activeRow.length) {
@@ -132,7 +139,6 @@ export const handleArrows = (
                   currentIndex = activeRow.length - 1;
                 }
 
-                // Set the next target element
                 moveTarget = activeRow[currentIndex];
               }
             });