@patternfly/react-core 6.0.0-alpha.99 → 6.0.0-prerelease.2

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.98","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-prerelease.1","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.98","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-prerelease.1","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.98","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-prerelease.1","private":true}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "6.0.0-alpha.99",
+  "version": "6.0.0-prerelease.2",
   "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",
@@ -22,7 +22,7 @@
   ],
   "publishConfig": {
     "access": "public",
-    "tag": "alpha"
+    "tag": "prerelease"
   },
   "repository": {
     "type": "git",
@@ -40,22 +40,21 @@
   "homepage": "https://github.com/patternfly/patternfly-react#readme",
   "scripts": {
     "build:umd": "rollup -c --environment IS_PRODUCTION",
-    "build:single:packages": "node ../../scripts/build-single-packages.js --config single-packages.config.json",
+    "build:single:packages": "node ../../scripts/build-single-packages.mjs --config single-packages.config.json",
     "clean": "rimraf dist components layouts helpers next deprecated",
-    "generate": "node scripts/copyStyles.js",
-    "subpaths": "node ../../scripts/exportSubpaths.js --config subpaths.config.json",
-    "clean:exports": "node scripts/cleanDistExports.js"
+    "generate": "node scripts/copyStyles.mjs",
+    "subpaths": "node ../../scripts/exportSubpaths.mjs --config subpaths.config.json"
   },
   "dependencies": {
-    "@patternfly/react-icons": "^6.0.0-alpha.35",
-    "@patternfly/react-styles": "^6.0.0-alpha.34",
-    "@patternfly/react-tokens": "^6.0.0-alpha.34",
+    "@patternfly/react-icons": "^6.0.0-prerelease.1",
+    "@patternfly/react-styles": "^6.0.0-prerelease.1",
+    "@patternfly/react-tokens": "^6.0.0-prerelease.1",
     "focus-trap": "7.5.4",
     "react-dropzone": "^14.2.3",
     "tslib": "^2.6.2"
   },
   "devDependencies": {
-    "@patternfly/patternfly": "6.0.0-alpha.205",
+    "@patternfly/patternfly": "6.0.0-alpha.226",
     "case-anything": "^2.1.13",
     "css": "^3.0.0",
     "fs-extra": "^11.2.0"
@@ -64,5 +63,5 @@
     "react": "^17 || ^18",
     "react-dom": "^17 || ^18"
   },
-  "gitHead": "a74cdba65be61e9f94424de4381af804050c409f"
+  "gitHead": "5e93011e6e0cb02edad1e3ec517da35523b97110"
 }

package/scripts/{copyStyles.js → copyStyles.mjs}

@@ -1,8 +1,11 @@
-const { copySync, readFileSync, writeFileSync } = require('fs-extra');
-const { resolve, dirname, join } = require('path');
-const { parse: parseCSS, stringify: stringifyCSS } = require('css');
+import { copySync } from 'fs-extra/esm';
+import { readFileSync, writeFileSync } from 'node:fs';
+import { createRequire } from 'node:module';
+import { resolve, dirname, join } from 'node:path';
+import { parse as parseCSS, stringify as stringifyCSS } from 'css';
 
-const stylesDir = resolve(__dirname, '../dist/styles');
+const require = createRequire(import.meta.url);
+const stylesDir = resolve(import.meta.dirname, '../dist/styles');
 const pfDir = dirname(require.resolve('@patternfly/patternfly/patternfly.css'));
 
 const unusedSelectorRegEx = /(\.fas?|\.sr-only)/;

package/src/components/AboutModal/__tests__/__snapshots__/AboutModalBoxCloseButton.test.tsx.snap

@@ -15,7 +15,7 @@ exports[`AboutModalBoxCloseButton Test 1`] = `
       type="button"
     >
       <span
-        class="pf-v6-c-button__icon pf-m-start"
+        class="pf-v6-c-button__icon"
       >
         <svg
           aria-hidden="true"
@@ -51,7 +51,7 @@ exports[`AboutModalBoxCloseButton Test close button aria label 1`] = `
       type="button"
     >
       <span
-        class="pf-v6-c-button__icon pf-m-start"
+        class="pf-v6-c-button__icon"
       >
         <svg
           aria-hidden="true"
@@ -87,7 +87,7 @@ exports[`AboutModalBoxCloseButton Test onclose 1`] = `
       type="button"
     >
       <span
-        class="pf-v6-c-button__icon pf-m-start"
+        class="pf-v6-c-button__icon"
       >
         <svg
           aria-hidden="true"

package/src/components/Alert/__tests__/Generated/__snapshots__/AlertActionCloseButton.test.tsx.snap

@@ -12,7 +12,7 @@ exports[`AlertActionCloseButton should match snapshot 1`] = `
     type="button"
   >
     <span
-      class="pf-v6-c-button__icon pf-m-start"
+      class="pf-v6-c-button__icon"
     >
       <svg
         aria-hidden="true"

package/src/components/Button/Button.tsx

@@ -85,7 +85,7 @@ export interface ButtonProps extends Omit<React.HTMLProps<HTMLButtonElement>, 'r
   iconPosition?: 'start' | 'end' | 'left' | 'right';
   /** Adds accessible text to the button. */
   'aria-label'?: string;
-  /** Icon for the button. Usable by all variants except for plain. */
+  /** Icon for the button. */
   icon?: React.ReactNode | null;
   /** Sets the button tabindex. */
   tabIndex?: number;
@@ -136,6 +136,7 @@ const ButtonBase: React.FunctionComponent<ButtonProps> = ({
   const Component = component as any;
   const isButtonElement = Component === 'button';
   const isInlineSpan = isInline && Component === 'span';
+  const isIconAlignedAtEnd = iconPosition === 'end' || iconPosition === 'right';
 
   const preventedEvents = inoperableEvents.reduce(
     (handlers, eventToPrevent) => ({
@@ -157,6 +158,13 @@ const ButtonBase: React.FunctionComponent<ButtonProps> = ({
     }
   };
 
+  const _icon = icon && (
+    <span className={css(styles.buttonIcon, children && styles.modifiers[isIconAlignedAtEnd ? 'end' : 'start'])}>
+      {icon}
+    </span>
+  );
+  const _children = children && <span className={css('pf-v6-c-button__text')}>{children}</span>;
+
   return (
     <Component
       {...props}
@@ -198,12 +206,16 @@ const ButtonBase: React.FunctionComponent<ButtonProps> = ({
           />
         </span>
       )}
-      {icon && (iconPosition === 'start' || iconPosition === 'left') && (
-        <span className={css(styles.buttonIcon, styles.modifiers.start)}>{icon}</span>
-      )}
-      {children && <span className={css('pf-v6-c-button__text')}>{children}</span>}
-      {icon && (iconPosition === 'end' || iconPosition === 'right') && (
-        <span className={css(styles.buttonIcon, styles.modifiers.end)}>{icon}</span>
+      {isIconAlignedAtEnd ? (
+        <>
+          {_children}
+          {_icon}
+        </>
+      ) : (
+        <>
+          {_icon}
+          {_children}
+        </>
       )}
       {countOptions && (
         <span className={css(styles.buttonCount, countOptions.className)}>

package/src/components/Card/CardHeader.tsx

@@ -26,23 +26,29 @@ export interface CardHeaderSelectableActionsObject {
   hasNoOffset?: boolean;
   /** Additional classes added to the selectable actions wrapper */
   className?: string;
-  /** ID passed to the selectable or clickable input */
-  selectableActionId: string;
-  /** Adds an accessible label to the selectable or clickable input */
+  /** Custom ID passed to the selectable card's input or a clickable-only card's button/anchor.
+   * If omitted, a random unique ID will be assigned to a selectable card's input. */
+  selectableActionId?: string;
+  /** Adds an accessible name to the input of a selectable card or clickable button/anchor of a clickable-only card.
+   * This or selectableActionAriaLabelledby is required for clickable-only cards.
+   */
   selectableActionAriaLabel?: string;
-  /** Adds an accessible label to the selectable or clickable input by passing in a
-   * space separated list of id's.
+  /** A single or list of space-delimited ID's that provide an accessible name to the input of a selectable card
+   * or clickable button/anchor of a clickable-only card. This or selectableActionAriaLabelledby is required
+   * for clickable-only cards.
    */
   selectableActionAriaLabelledby?: string;
   /** Callback for when a selectable card input changes */
   onChange?: (event: React.FormEvent<HTMLInputElement>, checked: boolean) => void;
-  /** Action to call when clickable card is clicked */
-  onClickAction?: (event: React.FormEvent<HTMLInputElement> | React.MouseEvent) => void;
-  /** Link to navigate to when clickable card is clicked */
+  /** Action to call when a clickable-only card is clicked. This cannot be combined with the to prop. */
+  onClickAction?: (event: React.MouseEvent) => void;
+  /** Link to navigate to when a clickable-only card is clicked. This cannot be combined with the onClickAction prop. */
   to?: string;
-  /** Flag to indicate whether a clickable card's link should open in a new tab/window. */
+  /** Additional props spread to a selectable card input or clickable-only card's button/anchor. */
+  selectableActionProps?: any;
+  /** Flag to indicate whether a clickable-only card's link should open in a new tab/window. */
   isExternalLink?: boolean;
-  /** Name for the input element of a clickable or selectable card. */
+  /** Name for the input element of a selectable card. */
   name?: string;
   /** @deprecated Flag indicating whether the selectable card input is checked. We recommend using
    * the isSelected prop on the card component instead.
@@ -79,101 +85,117 @@ export const CardHeader: React.FunctionComponent<CardHeaderProps> = ({
   toggleButtonProps,
   isToggleRightAligned,
   ...props
-}: CardHeaderProps) => (
-  <CardContext.Consumer>
-    {({ cardId, isClickable, isSelectable, isSelected, isClicked, isDisabled: isCardDisabled }) => {
-      const cardHeaderToggle = (
-        <div className={css(styles.cardHeaderToggle)}>
-          <Button
-            variant="plain"
-            type="button"
-            onClick={(evt) => {
-              onExpand(evt, cardId);
-            }}
-            {...toggleButtonProps}
-            icon={
-              <span className={css(styles.cardHeaderToggleIcon)}>
-                <AngleRightIcon aria-hidden="true" />
-              </span>
-            }
-          />
-        </div>
-      );
+}: CardHeaderProps) => {
+  const uniqueId = React.useId();
 
-      const isClickableOrSelectableOnly = (isClickable && !isSelectable) || (isSelectable && !isClickable);
-      if (actions?.actions && isClickableOrSelectableOnly) {
-        // eslint-disable-next-line no-console
-        console.warn(
-          `${
-            isClickable ? 'Clickable' : 'Selectable'
-          } only cards should not contain any other actions. If you wish to include additional actions, use a clickable and selectable card.`
+  return (
+    <CardContext.Consumer>
+      {({ cardId, isClickable, isSelectable, isSelected, isDisabled: isCardDisabled }) => {
+        const cardHeaderToggle = (
+          <div className={css(styles.cardHeaderToggle)}>
+            <Button
+              variant="plain"
+              type="button"
+              onClick={(evt) => {
+                onExpand(evt, cardId);
+              }}
+              {...toggleButtonProps}
+              icon={
+                <span className={css(styles.cardHeaderToggleIcon)}>
+                  <AngleRightIcon aria-hidden="true" />
+                </span>
+              }
+            />
+          </div>
         );
-      }
 
-      const handleActionClick = (event: React.FormEvent<HTMLInputElement> | React.MouseEvent) => {
-        if (selectableActions?.onClickAction) {
-          selectableActions.onClickAction(event);
-        } else if (selectableActions?.to) {
-          window.open(selectableActions.to, selectableActions.isExternalLink ? '_blank' : '_self');
+        const isClickableOrSelectableOnly = (isClickable && !isSelectable) || (isSelectable && !isClickable);
+        if (actions?.actions && isClickableOrSelectableOnly) {
+          // eslint-disable-next-line no-console
+          console.error(
+            `Card: ${
+              isClickable ? 'Clickable' : 'Selectable'
+            } only cards should not contain any other actions. If you wish to include additional actions, use a clickable and selectable card.`
+          );
+        }
+
+        const isClickableOnlyCard = isClickable && !isSelectable;
+        if (
+          (isClickableOnlyCard || isSelectable) &&
+          !selectableActions?.selectableActionAriaLabel &&
+          !selectableActions?.selectableActionAriaLabelledby
+        ) {
+          // eslint-disable-next-line no-console
+          console.error(
+            `Card: ${isClickableOnlyCard ? 'Clickable-only cards' : 'Cards with a selectable input'} must have either the selectableActions.selectableActionAriaLabel or selectableActions.selectableActionAriaLabelledby prop passed in order to provide an accessible name to the clickable element.`
+          );
         }
-      };
 
-      const getClickableSelectableProps = () => {
-        const baseProps = {
+        const SelectableCardInput = selectableActions?.variant === 'single' ? Radio : Checkbox;
+        const getSelectableProps = () => ({
           className: 'pf-m-standalone',
-          inputClassName: isClickable && !isSelectable && 'pf-v6-screen-reader',
           label: <></>,
           'aria-label': selectableActions.selectableActionAriaLabel,
           'aria-labelledby': selectableActions.selectableActionAriaLabelledby,
-          id: selectableActions.selectableActionId,
+          id: selectableActions.selectableActionId ?? `card-selectable-${uniqueId}`,
           name: selectableActions.name,
-          isDisabled: isCardDisabled
-        };
-        const isSelectableInputChecked = selectableActions.isChecked ?? isSelected;
+          isDisabled: isCardDisabled,
+          onChange: selectableActions.onChange,
+          isChecked: selectableActions.isChecked ?? isSelected,
+          ...selectableActions.selectableActionProps
+        });
 
-        if (isClickable && !isSelectable) {
-          return {
-            ...baseProps,
-            onClick: handleActionClick,
-            isChecked: isClicked
+        const isClickableLinkCard = selectableActions?.to !== undefined;
+        const ClickableCardComponent = isClickableLinkCard ? 'a' : 'button';
+        const getClickableProps = () => {
+          const isDisabledLinkCard = isCardDisabled && isClickableLinkCard;
+          const baseProps = {
+            className: css('pf-v6-c-card__clickable-action', isDisabledLinkCard && styles.modifiers.disabled),
+            id: selectableActions.selectableActionId,
+            'aria-label': selectableActions.selectableActionAriaLabel,
+            'aria-labelledby': selectableActions.selectableActionAriaLabelledby,
+            ...selectableActions.selectableActionProps
           };
-        }
-        if (isSelectable) {
-          return { ...baseProps, onChange: selectableActions.onChange, isChecked: isSelectableInputChecked };
-        }
 
-        return baseProps;
-      };
+          if (isClickableLinkCard) {
+            return {
+              ...baseProps,
+              href: selectableActions.to,
+              ...(isCardDisabled && { tabIndex: -1, 'aria-disabled': true }),
+              ...(selectableActions.isExternalLink && { target: '_blank' })
+            };
+          }
+
+          return { ...baseProps, type: 'button', disabled: isCardDisabled, onClick: selectableActions.onClickAction };
+        };
 
-      return (
-        <div
-          className={css(styles.cardHeader, isToggleRightAligned && styles.modifiers.toggleRight, className)}
-          id={id}
-          {...props}
-        >
-          {onExpand && !isToggleRightAligned && cardHeaderToggle}
-          {(actions || (selectableActions && (isClickable || isSelectable))) && (
-            <CardActions
-              className={actions?.className}
-              hasNoOffset={actions?.hasNoOffset || selectableActions?.hasNoOffset}
-            >
-              {actions?.actions}
-              {selectableActions && (isClickable || isSelectable) && (
-                <CardSelectableActions className={selectableActions?.className}>
-                  {selectableActions?.variant === 'single' || (isClickable && !isSelectable) ? (
-                    <Radio {...getClickableSelectableProps()} />
-                  ) : (
-                    <Checkbox {...getClickableSelectableProps()} />
-                  )}
-                </CardSelectableActions>
-              )}
-            </CardActions>
-          )}
-          {children && <CardHeaderMain>{children}</CardHeaderMain>}
-          {onExpand && isToggleRightAligned && cardHeaderToggle}
-        </div>
-      );
-    }}
-  </CardContext.Consumer>
-);
+        return (
+          <div
+            className={css(styles.cardHeader, isToggleRightAligned && styles.modifiers.toggleRight, className)}
+            id={id}
+            {...props}
+          >
+            {onExpand && !isToggleRightAligned && cardHeaderToggle}
+            {(actions || (selectableActions && (isClickable || isSelectable))) && (
+              <CardActions
+                className={actions?.className}
+                hasNoOffset={actions?.hasNoOffset || selectableActions?.hasNoOffset}
+              >
+                {actions?.actions}
+                {selectableActions && (isClickable || isSelectable) && (
+                  <CardSelectableActions className={selectableActions?.className}>
+                    {isSelectable && <SelectableCardInput {...getSelectableProps()} />}
+                    {isClickableOnlyCard && <ClickableCardComponent {...getClickableProps()} />}
+                  </CardSelectableActions>
+                )}
+              </CardActions>
+            )}
+            {children && <CardHeaderMain>{children}</CardHeaderMain>}
+            {onExpand && isToggleRightAligned && cardHeaderToggle}
+          </div>
+        );
+      }}
+    </CardContext.Consumer>
+  );
+};
 CardHeader.displayName = 'CardHeader';