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

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "6.5.0-prerelease.24",
+  "version": "6.5.0-prerelease.25",
   "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": "e9f9e1fc3f1dfdc3f9474618a303d2f811ea06c5"
 }

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>
+  );
+};