@patternfly/react-core 6.0.0-alpha.60 → 6.0.0-alpha.62

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.59","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.61","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.59","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.61","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.59","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.61","private":true}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "6.0.0-alpha.60",
+  "version": "6.0.0-alpha.62",
   "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",
@@ -41,38 +41,29 @@
   "scripts": {
     "build:umd": "rollup -c --environment IS_PRODUCTION",
     "build:single:packages": "node ../../scripts/build-single-packages.js --config single-packages.config.json",
-    "clean": "rimraf dist components layouts helpers next deprecated node_modules",
+    "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"
   },
   "dependencies": {
-    "@patternfly/react-icons": "^6.0.0-alpha.22",
-    "@patternfly/react-styles": "^6.0.0-alpha.22",
-    "@patternfly/react-tokens": "^6.0.0-alpha.22",
-    "focus-trap": "7.5.2",
+    "@patternfly/react-icons": "^6.0.0-alpha.23",
+    "@patternfly/react-styles": "^6.0.0-alpha.23",
+    "@patternfly/react-tokens": "^6.0.0-alpha.23",
+    "focus-trap": "7.5.4",
     "react-dropzone": "^14.2.3",
-    "tslib": "^2.5.0"
+    "tslib": "^2.6.2"
   },
   "devDependencies": {
     "@patternfly/patternfly": "6.0.0-alpha.139",
-    "@rollup/plugin-commonjs": "^25.0.0",
-    "@rollup/plugin-node-resolve": "^15.0.2",
-    "@rollup/plugin-replace": "^5.0.2",
     "case-anything": "^2.1.13",
     "css": "^2.2.3",
     "fs-extra": "^11.1.1",
-    "glob": "^7.1.2",
-    "rimraf": "^3.0.2",
-    "rollup": "^3.21.5",
-    "rollup-plugin-scss": "^4.0.0",
-    "rollup-plugin-svg": "2.0.0",
-    "rollup-plugin-terser": "^7.0.2",
-    "typescript": "^4.7.4"
+    "glob": "^7.1.2"
   },
   "peerDependencies": {
     "react": "^17 || ^18",
     "react-dom": "^17 || ^18"
   },
-  "gitHead": "a104a4b6124ea9ba1a0581bd983c6c48471fd8cd"
+  "gitHead": "c2840cf2e9e7f864392097450cc2ee11d163ed69"
 }

package/src/components/Accordion/__tests__/AccordionToggle.test.tsx

@@ -239,6 +239,34 @@ test('Renders toggle icon before toggle text when togglePosition from context =
   expect(toggle.firstChild).toHaveClass(styles.accordionToggleIcon);
 });
 
+test('Renders toggle text before toggle icon by default', () => {
+  render(
+    <AccordionContext.Provider value={{ ToggleContainer: 'h3' }}>
+      <AccordionToggle id="accordion-toggle" isExpanded>
+        Test
+      </AccordionToggle>
+    </AccordionContext.Provider>
+  );
+
+  const toggle = screen.getByRole('button');
+
+  expect(toggle.firstChild).toHaveClass(styles.accordionToggleText);
+});
+
+test('Renders toggle icon before toggle text when togglePosition from context = "start"', () => {
+  render(
+    <AccordionContext.Provider value={{ ToggleContainer: 'h3', togglePosition: 'start' }}>
+      <AccordionToggle id="accordion-toggle" isExpanded>
+        Test
+      </AccordionToggle>
+    </AccordionContext.Provider>
+  );
+
+  const toggle = screen.getByRole('button');
+
+  expect(toggle.firstChild).toHaveClass(styles.accordionToggleIcon);
+});
+
 test('Matches the snapshot', () => {
   const { asFragment } = render(
     <AccordionContext.Provider value={{ ToggleContainer: 'h3' }}>

package/src/components/Checkbox/examples/Checkbox.md

@@ -20,6 +20,20 @@ propComponents: ['Checkbox']
 
 ```
 
+### Reversed
+
+```ts file="./CheckboxReversed.tsx"
+
+```
+
+### Label wraps
+
+You can expand the clickable area of a checkbox so that it spans wider than the checkbox label by adding the `isLabelWrapped` property. This allows users to select a checkbox by clicking the checkbox itself, the label, or the area between the checkbox and the label.
+
+```ts file="./CheckboxLabelWraps.tsx"
+
+```
+
 ### Disabled
 
 ```ts file='./CheckboxDisabled.tsx'

package/src/components/Checkbox/examples/CheckboxLabelWraps.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+import { Checkbox } from '@patternfly/react-core';
+
+export const CheckboxLabelWraps: React.FunctionComponent = () => (
+  <Checkbox
+    isLabelWrapped
+    label="Label wraps input example"
+    id="checkbox-label-wraps-input"
+    name="checkbox-label-wraps-input"
+  />
+);

package/src/components/Checkbox/examples/CheckboxReversed.tsx

@@ -0,0 +1,6 @@
+import React from 'react';
+import { Checkbox } from '@patternfly/react-core';
+
+export const CheckboxReversed: React.FunctionComponent = () => (
+  <Checkbox isLabelBeforeButton label="Reversed checkbox example" id="checkbox-reversed" name="checkbox-reversed" />
+);

package/src/components/CodeBlock/examples/CodeBlock.md

@@ -8,14 +8,20 @@ propComponents: ['CodeBlock', 'CodeBlockAction', 'CodeBlockCode']
 import CopyIcon from '@patternfly/react-icons/dist/esm/icons/copy-icon';
 import PlayIcon from '@patternfly/react-icons/dist/esm/icons/play-icon';
 
+**Important note:** to format code exactly as it is, you should use String.raw\`your code here\`.
+
+Using **String.raw\`\`** will keep all the special characters like `\n` or `\t`.
+
 ## Examples
 
 ### Basic
 
 ```ts file="./CodeBlockBasic.tsx"
+
 ```
 
 ### Expandable
 
 ```ts file="./CodeBlockExpandable.tsx"
+
 ```

package/src/components/CodeBlock/examples/CodeBlockBasic.tsx

@@ -14,7 +14,7 @@ export const BasicCodeBlock: React.FunctionComponent = () => {
     setCopied(true);
   };
 
-  const code = `apiVersion: helm.openshift.io/v1beta1/
+  const code = String.raw`apiVersion: helm.openshift.io/v1beta1/
 kind: HelmChartRepository
 metadata:
 name: azure-sample-repo0oooo00ooo

package/src/components/CodeBlock/examples/CodeBlockExpandable.tsx

@@ -27,7 +27,7 @@ export const ExpandableCodeBlock: React.FunctionComponent = () => {
     setCopied(true);
   };
 
-  const copyBlock = `apiVersion: helm.openshift.io/v1beta1/
+  const copyBlock = String.raw`apiVersion: helm.openshift.io/v1beta1/
 kind: HelmChartRepository
 metadata:
 name: azure-sample-repo
@@ -35,11 +35,11 @@ spec:
 connectionConfig:
 url: https://raw.githubusercontent.com/Azure-Samples/helm-charts/master/docs`;
 
-  const code = `apiVersion: helm.openshift.io/v1beta1/
+  const code = String.raw`apiVersion: helm.openshift.io/v1beta1/
 kind: HelmChartRepository
 metadata:
 name: azure-sample-repo`;
-  const expandedCode = `spec:
+  const expandedCode = String.raw`spec:
 connectionConfig:
 url: https://raw.githubusercontent.com/Azure-Samples/helm-charts/master/docs`;
 

package/src/components/DatePicker/DatePicker.tsx

@@ -144,18 +144,24 @@ const DatePickerBase = (
     setValueDate(dateParse(valueProp));
   }, [valueProp]);
 
+  React.useEffect(() => {
+    if (isValidDate(valueDate)) {
+      applyValidators(valueDate);
+    }
+  }, [validators]);
+
   React.useEffect(() => {
     setPristine(!value);
     const newValueDate = dateParse(value);
     if (errorText && isValidDate(newValueDate)) {
-      setError(newValueDate);
+      applyValidators(newValueDate);
     }
     if (value === '' && !pristine && !textInputFocused) {
       dateIsRequired ? setErrorText(emptyDateText) : setErrorText('');
     }
   }, [value]);
 
-  const setError = (date: Date) => {
+  const applyValidators = (date: Date) => {
     setErrorText(validators.map((validator) => validator(date)).join('\n') || '');
   };
 
@@ -179,7 +185,7 @@ const DatePickerBase = (
     onBlur(event, value, onBlurDateArg);
 
     if (dateIsValid) {
-      setError(newValueDate);
+      applyValidators(newValueDate);
     }
 
     if (!dateIsValid && !pristine) {
@@ -195,7 +201,7 @@ const DatePickerBase = (
     const newValue = dateFormat(newValueDate);
     setValue(newValue);
     setValueDate(newValueDate);
-    setError(newValueDate);
+    applyValidators(newValueDate);
     setPopoverOpen(false);
     onChange(null, newValue, new Date(newValueDate));
   };
@@ -203,7 +209,7 @@ const DatePickerBase = (
   const onKeyPress = (ev: React.KeyboardEvent<HTMLInputElement>) => {
     if (ev.key === 'Enter' && value) {
       if (isValidDate(valueDate)) {
-        setError(valueDate);
+        applyValidators(valueDate);
       } else {
         setErrorText(invalidFormatText);
       }

package/src/components/Drawer/DrawerPanelContent.tsx

@@ -37,13 +37,13 @@ export interface DrawerPanelContentProps extends Omit<React.HTMLProps<HTMLDivEle
   isResizable?: boolean;
   /** Callback for resize end. */
   onResize?: (event: MouseEvent | TouchEvent | React.KeyboardEvent, width: number, id: string) => void;
-  /** The minimum size of a drawer, in either pixels or percentage. */
+  /** The minimum size of a drawer. */
   minSize?: string;
-  /** The starting size of a resizable drawer, in either pixels or percentage. */
+  /** The starting size of a drawer. */
   defaultSize?: string;
-  /** The maximum size of a drawer, in either pixels or percentage. */
+  /** The maximum size of a drawer. */
   maxSize?: string;
-  /** The increment amount for keyboard drawer resizing, in pixels. */
+  /** The increment amount for keyboard drawer resizing. */
   increment?: number;
   /** Aria label for the resizable drawer splitter. */
   resizeAriaLabel?: string;

package/src/components/Drawer/__tests__/DrawerPanelContent.test.tsx

@@ -36,6 +36,8 @@ test(`Renders with class ${styles.modifiers.secondary} when colorVariant="second
 
 jest.mock('../../../helpers/GenerateId/GenerateId');
 
+jest.mock('../../../helpers/GenerateId/GenerateId');
+
 test('Does not render with aria-labelledby by default', () => {
   render(
     <Drawer isExpanded>

package/src/components/Label/Label.tsx

@@ -311,7 +311,7 @@ export const Label: React.FunctionComponent<LabelProps> = ({
       ...editableProps
     }),
     ...(isClickableDisabled && isButton && { disabled: true }),
-    ...(isClickableDisabled && href && { tabindex: -1, 'aria-disabled': true })
+    ...(isClickableDisabled && href && { tabIndex: -1, 'aria-disabled': true })
   };
 
   let labelComponentChild = (

package/src/components/Label/__tests__/Label.test.tsx

@@ -142,6 +142,93 @@ describe('Label', () => {
 
     await user.click(label);
 
-    expect(mockCallback).toBeCalledTimes(1);
+    expect(mockCallback).toHaveBeenCalledTimes(1);
+  });
+
+  test('disabled clickable label does not call passed callback on click', async () => {
+    const mockCallback = jest.fn();
+    const user = userEvent.setup();
+
+    render(
+      <Label isDisabled onClick={mockCallback}>
+        Click me
+      </Label>
+    );
+
+    const label = screen.getByText('Click me');
+
+    await user.click(label);
+
+    expect(mockCallback).not.toHaveBeenCalled();
+  });
+
+  test('disabled clickable label is a disabled button', async () => {
+    const mockCallback = jest.fn();
+
+    render(
+      <Label isDisabled onClick={mockCallback}>
+        Click me
+      </Label>
+    );
+
+    const labelButton = screen.getByRole('button');
+
+    expect(labelButton).toHaveAttribute('disabled');
+  });
+
+  test('link label is an anchor', () => {
+    const href = '#example';
+
+    render(<Label href={href}>Click me</Label>);
+
+    const anchor = screen.getByRole('link', { name: 'Click me' });
+
+    expect(anchor).toBeInTheDocument();
+    expect(anchor).toHaveAttribute('href', href);
+  });
+
+  test('disabled link label is an anchor with aria-disabled attribute', () => {
+    const href = '#example';
+
+    render(
+      <Label isDisabled href={href}>
+        Click me
+      </Label>
+    );
+
+    const anchor = screen.getByRole('link', { name: 'Click me' });
+
+    expect(anchor).toBeInTheDocument();
+    expect(anchor).toHaveAttribute('href', href);
+    expect(anchor).toHaveAttribute('tabIndex', '-1');
+    expect(anchor).toHaveAttribute('aria-disabled', 'true');
+  });
+
+  test('disabled removable clickable label has a disabled close button', async () => {
+    const mockCallback = jest.fn();
+
+    render(
+      <Label isDisabled onClick={mockCallback} onClose={mockCallback}>
+        Click me
+      </Label>
+    );
+
+    const closeButton = screen.getByLabelText('Close Click me');
+
+    expect(closeButton).toBeDisabled();
+  });
+
+  test('disabled removable link label has a disabled close button', async () => {
+    const mockCallback = jest.fn();
+
+    render(
+      <Label isDisabled href="#" onClose={mockCallback}>
+        Click me
+      </Label>
+    );
+
+    const closeButton = screen.getByLabelText('Close Click me');
+
+    expect(closeButton).toBeDisabled();
   });
 });

package/src/components/Label/examples/LabelCompact.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { Label } from '@patternfly/react-core';
 import CubeIcon from '@patternfly/react-icons/dist/esm/icons/cube-icon';
+import InfoCircleIcon from '@patternfly/react-icons/dist/esm/icons/info-circle-icon';
 
 export const LabelCompact: React.FunctionComponent = () => (
   <React.Fragment>
@@ -65,6 +66,18 @@ export const LabelCompact: React.FunctionComponent = () => (
       textMaxWidth="16ch"
     >
       Compact label with icon that overflows
+    </Label>{' '}
+    <Label isDisabled isCompact href="#compact" onClose={() => Function.prototype} icon={<InfoCircleIcon />}>
+      Compact link removable (disabled)
+    </Label>{' '}
+    <Label
+      isDisabled
+      isCompact
+      onClick={() => Function.prototype}
+      onClose={() => Function.prototype}
+      icon={<InfoCircleIcon />}
+    >
+      Compact clickable removable (disabled)
     </Label>
   </React.Fragment>
 );

package/src/components/MenuToggle/MenuToggle.tsx

@@ -129,6 +129,7 @@ class MenuToggleBase extends React.Component<MenuToggleProps> {
             aria-expanded={isExpanded}
             onClick={onClick}
             aria-label={ariaLabel || 'Menu toggle'}
+            tabIndex={-1}
           >
             {toggleControls}
           </button>

package/src/components/NotificationDrawer/NotificationDrawerGroup.tsx

@@ -22,7 +22,7 @@ export interface NotificationDrawerGroupProps extends Omit<React.HTMLProps<HTMLD
   /**  Callback for when group button is clicked to expand */
   onExpand?: (event: any, value: boolean) => void;
   /**  Notification drawer group title */
-  title: string | React.ReactNode;
+  title: React.ReactNode;
   /** Truncate title to number of lines */
   truncateTitle?: number;
   /** Position of the tooltip which is displayed if text is truncated */

package/src/components/NumberInput/NumberInput.tsx

@@ -67,8 +67,10 @@ const defaultKeyDownHandler = (args: DefaultKeyDownHandlerArgs) => (event: React
   }
 };
 
+const DEFAULT_VALUE = 0;
+
 export const NumberInput: React.FunctionComponent<NumberInputProps> = ({
-  value = 0,
+  value = DEFAULT_VALUE,
   className,
   widthChars,
   isDisabled = false,
@@ -122,7 +124,7 @@ export const NumberInput: React.FunctionComponent<NumberInputProps> = ({
           <Button
             variant="control"
             aria-label={minusBtnAriaLabel}
-            isDisabled={isDisabled || value <= min}
+            isDisabled={isDisabled || (typeof value === 'number' ? value : DEFAULT_VALUE) <= min}
             onClick={(evt) => onMinus(evt, inputName)}
             {...minusBtnProps}
           >
@@ -150,7 +152,7 @@ export const NumberInput: React.FunctionComponent<NumberInputProps> = ({
           <Button
             variant="control"
             aria-label={plusBtnAriaLabel}
-            isDisabled={isDisabled || value >= max}
+            isDisabled={isDisabled || (typeof value === 'number' ? value : DEFAULT_VALUE) >= max}
             onClick={(evt) => onPlus(evt, inputName)}
             {...plusBtnProps}
           >

package/src/components/Page/Page.tsx

@@ -19,14 +19,20 @@ export interface PageProps extends React.HTMLProps<HTMLDivElement> {
   children?: React.ReactNode;
   /** Additional classes added to the page layout */
   className?: string;
-  /** Header component (e.g. <Masthead />) */
-  header?: React.ReactNode;
+  /** Masthead component (e.g. <Masthead />) */
+  masthead?: React.ReactNode;
   /** Sidebar component for a side nav (e.g. <PageSidebar />) */
   sidebar?: React.ReactNode;
   /** Notification drawer component for an optional notification drawer (e.g. <NotificationDrawer />) */
   notificationDrawer?: React.ReactNode;
   /** Flag indicating Notification drawer in expanded */
   isNotificationDrawerExpanded?: boolean;
+  /** Sets default drawer size */
+  drawerDefaultSize?: string;
+  /** Sets the minimum drawer size*/
+  drawerMinSize?: string;
+  /** Sets the maximum drawer size */
+  drawerMaxSize?: string;
   /** Flag indicating if breadcrumb width should be limited */
   isBreadcrumbWidthLimited?: boolean;
   /** Callback when notification drawer panel is finished expanding. */
@@ -214,11 +220,14 @@ class Page extends React.Component<PageProps, PageState> {
       isBreadcrumbWidthLimited,
       className,
       children,
-      header,
+      masthead,
       sidebar,
       notificationDrawer,
       isNotificationDrawerExpanded,
       onNotificationDrawerExpand,
+      drawerDefaultSize,
+      drawerMinSize,
+      drawerMaxSize,
       isHorizontalSubnavWidthLimited,
       skipToContent,
       role,
@@ -312,7 +321,11 @@ class Page extends React.Component<PageProps, PageState> {
       </div>
     );
 
-    const panelContent = <DrawerPanelContent>{notificationDrawer}</DrawerPanelContent>;
+    const panelContent = (
+      <DrawerPanelContent defaultSize={drawerDefaultSize} minSize={drawerMinSize} maxSize={drawerMaxSize}>
+        {notificationDrawer}
+      </DrawerPanelContent>
+    );
 
     return (
       <PageContextProvider value={context}>
@@ -328,7 +341,7 @@ class Page extends React.Component<PageProps, PageState> {
           )}
         >
           {skipToContent}
-          {header}
+          {masthead}
           {sidebar}
           {notificationDrawer && (
             <div className={css(styles.pageDrawer)}>

package/src/components/Page/PageSidebar.tsx

@@ -10,7 +10,7 @@ export interface PageSidebarProps extends React.HTMLProps<HTMLDivElement> {
   children?: React.ReactNode;
   /**
    * If true, manages the sidebar open/close state and there is no need to pass the isSidebarOpen boolean into
-   * the sidebar component or add a callback onSidebarToggle function into the PageHeader component
+   * the sidebar component or add a callback onSidebarToggle function into the Masthead component
    */
   isManagedSidebar?: boolean;
   /** Programmatically manage if the sidebar is shown, if isManagedSidebar is set to true in the Page component, this prop is managed */