@patternfly/react-core 6.5.0-prerelease.24 → 6.5.0-prerelease.26

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.5.0-prerelease.23","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.5.0-prerelease.25","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.5.0-prerelease.23","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.5.0-prerelease.25","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.5.0-prerelease.23","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.5.0-prerelease.25","private":true}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "6.5.0-prerelease.24",
+  "version": "6.5.0-prerelease.26",
   "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",
@@ -63,5 +63,5 @@
     "react": "^17 || ^18 || ^19",
     "react-dom": "^17 || ^18 || ^19"
   },
-  "gitHead": "a5726d0a999e6397b5df4e339b03c01efdb0f070"
+  "gitHead": "296178f84f2073ea2034858f812ab6d5dd03f3f0"
 }

package/src/components/ClipboardCopy/ClipboardCopy.tsx

@@ -55,6 +55,10 @@ export interface ClipboardCopyProps extends Omit<React.HTMLProps<HTMLDivElement>
   textAriaLabel?: string;
   /** Aria-label to use on the ClipboardCopyToggle. */
   toggleAriaLabel?: string;
+  /** ID to use on the TextInput. */
+  inputId?: string;
+  /** Name attribute to use on the TextInput. */
+  inputName?: string;
   /** Flag to show if the input is read only. */
   isReadOnly?: boolean;
   /** Flag to determine if clipboard copy is in the expanded state initially */
@@ -91,6 +95,10 @@ export interface ClipboardCopyProps extends Omit<React.HTMLProps<HTMLDivElement>
   onCopy?: (event: React.ClipboardEvent<HTMLDivElement>, text?: React.ReactNode) => void;
   /** A function that is triggered on changing the text. */
   onChange?: (event: React.FormEvent, text?: string) => void;
+  /** Callback function when text input is focused */
+  onInputFocus?: (event?: any) => void;
+  /** Callback function when text input is blurred (focus leaves) */
+  onInputBlur?: (event?: any) => void;
   /** The text which is copied. */
   children: string | string[];
   /** Additional actions for inline clipboard copy. Should be wrapped with ClipboardCopyAction. */
@@ -177,6 +185,8 @@ class ClipboardCopy extends Component<ClipboardCopyProps, ClipboardCopyState> {
       /* eslint-disable @typescript-eslint/no-unused-vars */
       isExpanded,
       onChange, // Don't pass to <div>
+      onInputFocus, // Don't pass to <div>
+      onInputBlur, // Don't pass to <div>
       /* eslint-enable @typescript-eslint/no-unused-vars */
       isReadOnly,
       isCode,
@@ -189,6 +199,8 @@ class ClipboardCopy extends Component<ClipboardCopyProps, ClipboardCopyState> {
       clickTip,
       textAriaLabel,
       toggleAriaLabel,
+      inputId,
+      inputName,
       variant,
       position,
       className,
@@ -295,8 +307,11 @@ class ClipboardCopy extends Component<ClipboardCopyProps, ClipboardCopyState> {
                     readOnlyVariant={isReadOnly || this.state.expanded ? 'default' : undefined}
                     onChange={this.updateText}
                     value={this.state.expanded ? this.state.textWhenExpanded : copyableText}
-                    id={`text-input-${id}`}
+                    id={inputId ?? `text-input-${id}`}
+                    name={inputName}
                     aria-label={textAriaLabel}
+                    onFocus={onInputFocus}
+                    onBlur={onInputBlur}
                     {...(isCode && { dir: 'ltr' })}
                   />
                   <ClipboardCopyButton

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

@@ -309,6 +309,18 @@ test('Passes textAriaLabel to TextInput', () => {
   expect(screen.getByRole('textbox')).toHaveAccessibleName('text label');
 });
 
+test('Passes inputId to TextInput', () => {
+  render(<ClipboardCopy inputId="custom-input-id">{children}</ClipboardCopy>);
+
+  expect(screen.getByRole('textbox')).toHaveAttribute('id', 'custom-input-id');
+});
+
+test('Passes inputName to TextInput', () => {
+  render(<ClipboardCopy inputName="custom-input-name">{children}</ClipboardCopy>);
+
+  expect(screen.getByRole('textbox')).toHaveAttribute('name', 'custom-input-name');
+});
+
 test('Calls onChange when ClipboardCopy textinput is typed in', async () => {
   const onChangeMock = jest.fn();
   const user = userEvent.setup();
@@ -338,6 +350,66 @@ test('Does not call onChange when ClipboardCopy textinput is not typed in', asyn
   expect(onChangeMock).not.toHaveBeenCalled();
 });
 
+test('Calls onFocus when ClipboardCopy textinput is focused', async () => {
+  const onFocusMock = jest.fn();
+  const user = userEvent.setup();
+
+  render(<ClipboardCopy onInputFocus={onFocusMock}>{children}</ClipboardCopy>);
+
+  await user.click(screen.getByRole('textbox'));
+
+  expect(onFocusMock).toHaveBeenCalledTimes(1);
+});
+
+test('Does not call onFocus when ClipboardCopy textinput is not focused', async () => {
+  const onFocusMock = jest.fn();
+  const user = userEvent.setup();
+
+  render(
+    <>
+      <ClipboardCopy onInputFocus={onFocusMock}>{children}</ClipboardCopy>
+      <input aria-label="native input" />
+    </>
+  );
+
+  await user.click(screen.getByRole('textbox', { name: 'native input' }));
+
+  expect(onFocusMock).not.toHaveBeenCalled();
+});
+
+test('Calls onBlur when ClipboardCopy textinput loses focus', async () => {
+  const onBlurMock = jest.fn();
+  const user = userEvent.setup();
+
+  render(
+    <>
+      <ClipboardCopy onInputBlur={onBlurMock}>{children}</ClipboardCopy>
+      <input aria-label="native input" />
+    </>
+  );
+
+  await user.click(screen.getByRole('textbox', { name: 'Copyable input' }));
+  await user.click(screen.getByRole('textbox', { name: 'native input' }));
+
+  expect(onBlurMock).toHaveBeenCalledTimes(1);
+});
+
+test('Does not call onBlur when ClipboardCopy textinput does not lose focus', async () => {
+  const onBlurMock = jest.fn();
+  const user = userEvent.setup();
+
+  render(
+    <>
+      <ClipboardCopy onInputBlur={onBlurMock}>{children}</ClipboardCopy>
+      <input aria-label="native input" />
+    </>
+  );
+
+  await user.click(screen.getByRole('textbox', { name: 'native input' }));
+
+  expect(onBlurMock).not.toHaveBeenCalled();
+});
+
 test('Calls onCopy when ClipboardCopyButton is clicked', async () => {
   const onCopyMock = jest.fn();
   const user = userEvent.setup();

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

@@ -18,7 +18,7 @@ exports[`Matches snapshot 1`] = `
         <input
           aria-invalid="false"
           aria-label="Copyable input"
-          data-ouia-component-id="OUIA-Generated-TextInputBase-36"
+          data-ouia-component-id="OUIA-Generated-TextInputBase-42"
           data-ouia-component-type="PF6/TextInput"
           data-ouia-safe="true"
           id="text-input-generated-id"

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

@@ -16,7 +16,7 @@ propComponents:
   ]
 ---
 
-import { useState } from 'react';
+import { useState, useRef } from 'react';
 import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
 
 ## Examples
@@ -63,3 +63,15 @@ To provide users with more context about a `<DropdownItem>`, pass a short messag
 ```ts file="./DropdownWithDescriptions.tsx"
 
 ```
+
+### Split toggle with checkbox
+
+To combine a checkbox or other control with a dropdown menu, use a split button.
+
+A `<MenuToggle>` can be rendered as a split button via `splitButtonItems`. Elements to be displayed before the dropdown toggle button (like the `<MenuToggleCheckbox>`) must be included in the `splitButtonItems`.
+
+If the dropdown menu closes upon selection, you will need to manually shift focus back to the toggle element after a user selects an item from the menu. 
+
+```ts file="./DropdownWithSplit.tsx"
+
+```

package/src/components/Dropdown/examples/DropdownWithSplit.tsx

@@ -0,0 +1,97 @@
+import {
+  Dropdown,
+  MenuToggle,
+  MenuToggleCheckbox,
+  DropdownItem,
+  DropdownList,
+  Divider,
+  MenuToggleElement
+} from '@patternfly/react-core';
+import { useRef, useState } from 'react';
+
+export const DropdownSplitButtonText: React.FunctionComponent = () => {
+  const [isOpen, setIsOpen] = useState(false);
+  const toggleRef = useRef<MenuToggleElement>(null);
+
+  const onFocus = () => {
+    if (!toggleRef.current) {
+      return;
+    }
+
+    const toggleButton = toggleRef.current.querySelector('button[aria-expanded]');
+    toggleButton?.focus();
+  };
+
+  const onSelect = () => {
+    setIsOpen(false);
+    onFocus();
+  };
+
+  const onToggleClick = () => {
+    setIsOpen(!isOpen);
+  };
+
+  return (
+    <Dropdown
+      onSelect={onSelect}
+      onOpenChange={(isOpen: boolean) => setIsOpen(isOpen)}
+      toggle={(toggleRefCallback: React.Ref<MenuToggleElement>) => (
+        <MenuToggle
+          ref={(node) => {
+            // Handle both callback ref and useRef
+            if (typeof toggleRefCallback === 'function') {
+              toggleRefCallback(node);
+            } else if (toggleRefCallback) {
+              (toggleRefCallback as React.MutableRefObject<MenuToggleElement | null>).current = node;
+            }
+            (toggleRef as React.MutableRefObject<MenuToggleElement | null>).current = node;
+          }}
+          splitButtonItems={[
+            <MenuToggleCheckbox id="split-button-checkbox-example" key="split-checkbox" aria-label="Select all" />
+          ]}
+          aria-label="Dropdown with checkbox split button"
+          onClick={onToggleClick}
+          isExpanded={isOpen}
+        />
+      )}
+      isOpen={isOpen}
+    >
+      <DropdownList>
+        <DropdownItem value={0} key="action">
+          Action
+        </DropdownItem>
+        <DropdownItem
+          value={1}
+          key="link"
+          to="#default-link2"
+          // Prevent the default onClick functionality for example purposes
+          onClick={(ev: any) => ev.preventDefault()}
+        >
+          Link
+        </DropdownItem>
+        <DropdownItem value={2} isDisabled key="disabled action">
+          Disabled Action
+        </DropdownItem>
+        <DropdownItem value={3} isDisabled key="disabled link" to="#default-link4">
+          Disabled Link
+        </DropdownItem>
+        <DropdownItem
+          value={4}
+          isAriaDisabled
+          key="aria-disabled link"
+          to="#default-link5"
+          tooltipProps={{ content: 'aria-disabled link', position: 'top' }}
+        >
+          Aria-disabled Link
+        </DropdownItem>
+        <Divider component="li" key="separator" />
+        <DropdownItem value={5} key="separated action">
+          Separated Action
+        </DropdownItem>
+        <DropdownItem value={6} key="separated link" to="#default-link6" onClick={(ev) => ev.preventDefault()}>
+          Separated Link
+        </DropdownItem>
+      </DropdownList>
+    </Dropdown>
+  );
+};

package/src/components/Label/Label.tsx

@@ -338,7 +338,7 @@ export const Label: React.FunctionComponent<LabelProps> = ({
     );
   }
 
-  const LabelComponent = (isOverflowLabel ? 'button' : 'span') as any;
+  const LabelComponent = (isOverflowLabel || isAddLabel ? 'button' : 'span') as any;
 
   return (
     <LabelComponent

package/src/demos/Banner.md

@@ -11,148 +11,11 @@ import { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/Dashboard
 
 ### Basic sticky banner
 
-```js isFullscreen
-import { Fragment } from 'react';
-import { Banner, Card, CardBody, Flex, Gallery, GalleryItem, PageSection, Content } from '@patternfly/react-core';
-
-import { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/DashboardWrapper';
-import { css } from '@patternfly/react-styles';
-import display from '@patternfly/react-styles/css/utilities/Display/display';
-
-class BannerDemo extends React.Component {
-  render() {
-    const banner = (
-      <Banner isSticky>
-        <Flex
-          justifyContent={{ default: 'justifyContentCenter', lg: 'justifyContentSpaceBetween' }}
-          flexWrap={{ default: 'nowrap' }}
-        >
-          <div className={css(display.displayNone, display.displayBlockOnLg)}>Localhost</div>
-          <div className={css(display.displayNone, display.displayBlockOnLg)}>
-            This message is sticky to the top of the page.
-          </div>
-          <div className={css(display.displayNoneOnLg)}>Drop some text on mobile, truncate if needed.</div>
-          <div className={css(display.displayNone, display.displayBlockOnLg)}>Ned Username</div>
-        </Flex>
-      </Banner>
-    );
-    return (
-      <Fragment>
-        <DashboardWrapper banner={banner} breadcrumb={null}>
-          <PageSection aria-labelledby="main-title">
-            <Content>
-              <h1 id="main-title">Main title</h1>
-              <p>
-                Body text should be Red Hat Text at 1rem(16px). It should have leading of 1.5rem(24px) because <br />
-                of it’s relative line height of 1.5.
-              </p>
-            </Content>
-          </PageSection>
-          <PageSection aria-label='Cards gallery'>
-            <Gallery hasGutter>
-              {Array.from({ length: 30 }).map((_value, index) => (
-                <GalleryItem key={index}>
-                  <Card key={index}>
-                    <CardBody>This is a card</CardBody>
-                  </Card>
-                </GalleryItem>
-              ))}
-            </Gallery>
-          </PageSection>
-        </DashboardWrapper>
-      </Fragment>
-    );
-  }
-}
+```ts file="examples/Banner/BannerBasicSticky.tsx" isFullscreen
 ```
 
 ### Top and bottom banner
 
-```js isFullscreen
-import { Fragment } from 'react';
-import {
-  Banner,
-  Card,
-  CardBody,
-  Flex,
-  FlexItem,
-  Gallery,
-  GalleryItem,
-  PageSection,
-  Content
-} from '@patternfly/react-core';
-import { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/DashboardWrapper';
-import { css } from '@patternfly/react-styles';
-import display from '@patternfly/react-styles/css/utilities/Display/display';
+```ts file="examples/Banner/BannerTopBottom.tsx" isFullscreen
 
-class BannerDemo extends React.Component {
-  render() {
-    return (
-      <Fragment>
-        <Flex
-          direction={{ default: 'column' }}
-          flexWrap={{ default: 'nowrap' }}
-          spaceItems={{ default: 'spaceItemsNone' }}
-          style={{ height: '100%' }}
-        >
-          <FlexItem>
-            <Banner isSticky>
-              <Flex
-                justifyContent={{ default: 'justifyContentCenter', lg: 'justifyContentSpaceBetween' }}
-                flexWrap={{ default: 'nowrap' }}
-              >
-                <div className={css(display.displayNone, display.displayBlockOnLg)}>Localhost</div>
-                <div className={css(display.displayNone, display.displayBlockOnLg)}>
-                  This message is sticky to the top of the page.
-                </div>
-                <div className={css(display.displayNoneOnLg)}>Drop some text on mobile, truncate if needed.</div>
-                <div className={css(display.displayNone, display.displayBlockOnLg)}>Ned Username</div>
-              </Flex>
-            </Banner>
-          </FlexItem>
-          <FlexItem grow={{ default: 'grow' }} style={{ minHeight: 0 }}>
-            <DashboardWrapper breadcrumb={null}>
-              <PageSection aria-labelledby="main-title">
-                <Content>
-                  <h1 id='main-title'>Main title</h1>
-                  <p>
-                    Body text should be Red Hat Text at 1rem(16px). It should have leading of 1.5rem(24px) because{' '}
-                    <br />
-                    of it’s relative line height of 1.5.
-                  </p>
-                </Content>
-              </PageSection>
-              <PageSection aria-label='Cards gallery'>
-                <Gallery hasGutter>
-                  {Array.from({ length: 30 }).map((_value, index) => (
-                    <GalleryItem key={index}>
-                      <Card key={index}>
-                        <CardBody>This is a card</CardBody>
-                      </Card>
-                    </GalleryItem>
-                  ))}
-                </Gallery>
-              </PageSection>
-            </DashboardWrapper>
-          </FlexItem>
-          <FlexItem>
-            <Banner isSticky>
-              <Flex
-                justifyContent={{ default: 'justifyContentCenter', lg: 'justifyContentSpaceBetween' }}
-                flexWrap={{ default: 'nowrap' }}
-              >
-                <div className={css(display.displayNone, display.displayBlockOnLg)}>Localhost</div>
-                <div className={css(display.displayNone, display.displayBlockOnLg)}>
-                  This message is sticky to the bottom of the page.
-                </div>
-                <div className={css(display.displayNoneOnLg)}>Drop some text on mobile, truncate if needed.</div>
-                <div className={css(display.displayNone, display.displayBlockOnLg)}>Ned Username</div>
-              </Flex>
-            </Banner>
-          </FlexItem>
-        </Flex>
-      </Fragment>
-    );
-  }
-}
 ```

package/src/demos/DateTimePicker.md

@@ -14,96 +14,12 @@ In this demo, learn how to use a [CalendarMonth](/components/date-and-time/calen
 
 ### Date and time picker
 
-```ts file="./examples/DateTimePicker/DateTimePicker.tsx"
+```ts file="examples/DateTimePicker/DateTimePicker.tsx"
 
 ```
 
 ### Date and time range picker
 
-```js
-import { useState } from 'react';
-import { Flex, FlexItem, InputGroup, InputGroupItem, DatePicker, isValidDate, TimePicker, yyyyMMddFormat, updateDateTime } from '@patternfly/react-core';
-
-DateTimeRangePicker = () => {
-  const [from, setFrom] = useState();
-  const [to, setTo] = useState();
-
-  const toValidator = (date) => {
-    return isValidDate(from) && yyyyMMddFormat(date) >= yyyyMMddFormat(from)
-      ? ''
-      : 'The "to" date must be after the "from" date';
-  };
-
-  const onFromDateChange = (_event, inputDate, newFromDate) => {
-    if (isValidDate(from) && isValidDate(newFromDate) && inputDate === yyyyMMddFormat(newFromDate)) {
-      newFromDate.setHours(from.getHours());
-      newFromDate.setMinutes(from.getMinutes());
-    }
-    if (isValidDate(newFromDate) && inputDate === yyyyMMddFormat(newFromDate)) {
-      setFrom(new Date(newFromDate));
-    }
-  };
-
-  const onFromTimeChange = (_event, time, hour, minute) => {
-    if (isValidDate(from)) {
-      const updatedFromDate = new Date(from);
-      updatedFromDate.setHours(hour);
-      updatedFromDate.setMinutes(minute);
-      setFrom(updatedFromDate);
-    }
-  };
-
-  const onToDateChange = (_event, inputDate, newToDate) => {
-    if (isValidDate(to) && isValidDate(newToDate) && inputDate === yyyyMMddFormat(newToDate)) {
-      newToDate.setHours(to.getHours());
-      newToDate.setMinutes(to.getMinutes());
-    }
-    if (isValidDate(newToDate) && inputDate === yyyyMMddFormat(newToDate)) {
-      setTo(newToDate);
-    }
-  };
-
-  const onToTimeChange = (_event, time, hour, minute) => {
-    if (isValidDate(to)) {
-      const updatedToDate = new Date(to);
-      updatedToDate.setHours(hour);
-      updatedToDate.setMinutes(minute);
-      setTo(updatedToDate);
-    }
-  };
+```ts file="examples/DateTimePicker/DateTimeRangePicker.tsx"
 
-  return (
-    <Flex direction={{ default: 'column', lg: 'row' }}>
-      <FlexItem>
-        <InputGroup>
-          <InputGroupItem>
-            <DatePicker onChange={onFromDateChange} aria-label="Start date" placeholder="YYYY-MM-DD" />
-          </InputGroupItem>
-          <InputGroupItem>
-            <TimePicker aria-label="Start time" style={{ width: '150px' }} onChange={onFromTimeChange} />
-          </InputGroupItem>
-        </InputGroup>
-      </FlexItem>
-      <FlexItem>to</FlexItem>
-      <FlexItem>
-        <InputGroup>
-          <InputGroupItem>
-            <DatePicker
-              value={isValidDate(to) ? yyyyMMddFormat(to) : to}
-              onChange={onToDateChange}
-              isDisabled={!isValidDate(from)}
-              rangeStart={from}
-              validators={[toValidator]}
-              aria-label="End date"
-              placeholder="YYYY-MM-DD"
-            />
-          </InputGroupItem>
-          <InputGroupItem>
-            <TimePicker style={{ width: '150px' }} onChange={onToTimeChange} isDisabled={!isValidDate(from)} />
-          </InputGroupItem>
-        </InputGroup>
-      </FlexItem>
-    </Flex>
-  );
-}
 ```