@patternfly/react-templates 6.0.0-alpha.45 → 6.0.0-alpha.46

package/src/components/Select/__tests__/MultiTypeaheadSelect.test.tsx

@@ -0,0 +1,414 @@
+import * as React from 'react';
+import { render, screen, waitForElementToBeRemoved } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { MultiTypeaheadSelect } from '../MultiTypeaheadSelect';
+import styles from '@patternfly/react-styles/css/components/Menu/menu';
+
+const getToggle = () => screen.getByRole('button', { name: 'Multi select Typeahead menu toggle' });
+
+describe('MultiTypeaheadSelect', () => {
+  it('renders MultiTypeaheadSelect with options', async () => {
+    const initialOptions = [
+      { content: 'Option 1', value: 'option1' },
+      { content: 'Option 2', value: 'option2' },
+      { content: 'Option 3', value: 'option3' }
+    ];
+
+    const user = userEvent.setup();
+
+    render(<MultiTypeaheadSelect initialOptions={initialOptions} />);
+
+    const toggle = getToggle();
+
+    await user.click(toggle);
+
+    const option1 = screen.getByText('Option 1');
+    const option2 = screen.getByText('Option 2');
+    const option3 = screen.getByText('Option 3');
+
+    expect(option1).toBeInTheDocument();
+    expect(option2).toBeInTheDocument();
+    expect(option3).toBeInTheDocument();
+  });
+
+  it('selects options when clicked', async () => {
+    const initialOptions = [
+      { content: 'Option 1', value: 'option1' },
+      { content: 'Option 2', value: 'option2' },
+      { content: 'Option 3', value: 'option3' }
+    ];
+
+    const user = userEvent.setup();
+
+    render(<MultiTypeaheadSelect initialOptions={initialOptions} />);
+
+    const toggle = getToggle();
+
+    await user.click(toggle);
+
+    const option1 = screen.getByRole('option', { name: 'Option 1' });
+
+    expect(option1).not.toHaveClass(styles.modifiers.selected);
+
+    await user.click(option1);
+
+    expect(option1).toHaveClass(styles.modifiers.selected);
+  });
+
+  it('calls the onSelectionChange callback with the selected value when an option is selected', async () => {
+    const initialOptions = [
+      { content: 'Option 1', value: 'option1' },
+      { content: 'Option 2', value: 'option2' },
+      { content: 'Option 3', value: 'option3' }
+    ];
+
+    const user = userEvent.setup();
+    const onSelectionChangeMock = jest.fn();
+
+    render(<MultiTypeaheadSelect initialOptions={initialOptions} onSelect={onSelectionChangeMock} />);
+
+    const toggle = getToggle();
+
+    await user.click(toggle);
+
+    expect(onSelectionChangeMock).not.toHaveBeenCalled();
+
+    const option1 = screen.getByRole('option', { name: 'Option 1' });
+
+    await user.click(option1);
+
+    expect(onSelectionChangeMock).toHaveBeenCalledTimes(1);
+    expect(onSelectionChangeMock).toHaveBeenCalledWith(expect.anything(), 'option1');
+  });
+
+  it('deselects options when clear button is clicked', async () => {
+    const initialOptions = [
+      { content: 'Option 1', value: 'option1' },
+      { content: 'Option 2', value: 'option2' },
+      { content: 'Option 3', value: 'option3' }
+    ];
+
+    const user = userEvent.setup();
+
+    render(<MultiTypeaheadSelect initialOptions={initialOptions} />);
+
+    const toggle = getToggle();
+
+    await user.click(toggle);
+
+    const option1 = screen.getByRole('option', { name: 'Option 1' });
+    await user.click(option1);
+    expect(option1).toHaveClass(styles.modifiers.selected);
+
+    const input = screen.getByRole('combobox');
+
+    const clearButton = screen.getByRole('button', { name: 'Clear input value' });
+    await user.click(clearButton);
+
+    expect(input).toHaveValue('');
+
+    await user.click(toggle);
+    expect(screen.getByRole('option', { name: 'Option 1' })).not.toHaveClass(styles.modifiers.selected);
+  });
+
+  it('toggles the select menu when the toggle button is clicked', async () => {
+    const initialOptions = [
+      { content: 'Option 1', value: 'option1' },
+      { content: 'Option 2', value: 'option2' },
+      { content: 'Option 3', value: 'option3' }
+    ];
+
+    const user = userEvent.setup();
+
+    render(<MultiTypeaheadSelect initialOptions={initialOptions} />);
+
+    const toggle = getToggle();
+
+    await user.click(toggle);
+
+    const menu = screen.getByRole('listbox');
+    expect(menu).toBeInTheDocument();
+
+    await user.click(toggle);
+
+    await waitForElementToBeRemoved(menu);
+
+    expect(screen.queryByRole('listbox')).not.toBeInTheDocument();
+  });
+
+  it('calls the onToggle callback when the toggle is clicked', async () => {
+    const initialOptions = [
+      { content: 'Option 1', value: 'option1' },
+      { content: 'Option 2', value: 'option2' },
+      { content: 'Option 3', value: 'option3' }
+    ];
+
+    const user = userEvent.setup();
+    const onToggleMock = jest.fn();
+
+    render(<MultiTypeaheadSelect initialOptions={initialOptions} onToggle={onToggleMock} />);
+
+    const toggle = getToggle();
+
+    expect(onToggleMock).not.toHaveBeenCalled();
+
+    await user.click(toggle);
+
+    expect(onToggleMock).toHaveBeenCalledTimes(1);
+    expect(onToggleMock).toHaveBeenCalledWith(true);
+
+    await user.click(toggle);
+
+    expect(onToggleMock).toHaveBeenCalledTimes(2);
+    expect(onToggleMock).toHaveBeenCalledWith(false);
+  });
+
+  it('Passes toggleWidth', () => {
+    const initialOptions = [
+      { content: 'Option 1', value: 'option1' },
+      { content: 'Option 2', value: 'option2' },
+      { content: 'Option 3', value: 'option3' }
+    ];
+
+    render(<MultiTypeaheadSelect initialOptions={initialOptions} toggleWidth="500px" />);
+
+    const toggle = getToggle();
+    expect(toggle.parentElement).toHaveAttribute('style', 'width: 500px;');
+  });
+
+  it('Passes additional toggleProps', () => {
+    const initialOptions = [
+      { content: 'Option 1', value: 'option1' },
+      { content: 'Option 2', value: 'option2' },
+      { content: 'Option 3', value: 'option3' }
+    ];
+
+    render(<MultiTypeaheadSelect initialOptions={initialOptions} toggleProps={{ id: 'toggle' }} />);
+
+    const toggle = getToggle();
+    expect(toggle.parentElement).toHaveAttribute('id', 'toggle');
+  });
+
+  it('passes custom placeholder text', async () => {
+    const initialOptions = [
+      { content: 'Option 1', value: 'option1' },
+      { content: 'Option 2', value: 'option2' },
+      { content: 'Option 3', value: 'option3' }
+    ];
+
+    render(<MultiTypeaheadSelect initialOptions={initialOptions} placeholder="custom" />);
+
+    const input = screen.getByRole('combobox');
+
+    expect(input).toHaveAttribute('placeholder', 'custom');
+  });
+
+  it('displays noOptionsFoundMessage when filter returns no results', async () => {
+    const initialOptions = [
+      { content: 'Option 1', value: 'option1' },
+      { content: 'Option 2', value: 'option2' },
+      { content: 'Option 3', value: 'option3' }
+    ];
+    const user = userEvent.setup();
+
+    render(<MultiTypeaheadSelect initialOptions={initialOptions} />);
+
+    const toggle = getToggle();
+    const input = screen.getByRole('combobox');
+
+    expect(input).toHaveAttribute('placeholder', 'Select an option');
+
+    await user.click(toggle);
+
+    const option1 = screen.getByRole('option', { name: 'Option 1' });
+    const option2 = screen.getByRole('option', { name: 'Option 2' });
+    const option3 = screen.getByRole('option', { name: 'Option 3' });
+
+    expect(option1).toBeInTheDocument();
+    expect(option2).toBeInTheDocument();
+    expect(option3).toBeInTheDocument();
+
+    await user.type(input, '9');
+    expect(input).toHaveValue('9');
+
+    expect(option1).not.toBeInTheDocument();
+    expect(option2).not.toBeInTheDocument();
+    expect(option3).not.toBeInTheDocument();
+    expect(screen.getByRole('option', { name: 'No results found for "9"' })).toBeInTheDocument();
+  });
+
+  it('displays custom noOptionsFoundMessage', async () => {
+    const initialOptions = [
+      { content: 'Option 1', value: 'option1' },
+      { content: 'Option 2', value: 'option2' },
+      { content: 'Option 3', value: 'option3' }
+    ];
+    const user = userEvent.setup();
+
+    render(<MultiTypeaheadSelect initialOptions={initialOptions} noOptionsFoundMessage="custom" />);
+
+    const toggle = getToggle();
+    const input = screen.getByRole('combobox');
+
+    expect(input).toHaveAttribute('placeholder', 'Select an option');
+
+    await user.click(toggle);
+
+    const option1 = screen.getByRole('option', { name: 'Option 1' });
+    const option2 = screen.getByRole('option', { name: 'Option 2' });
+    const option3 = screen.getByRole('option', { name: 'Option 3' });
+
+    expect(option1).toBeInTheDocument();
+    expect(option2).toBeInTheDocument();
+    expect(option3).toBeInTheDocument();
+
+    await user.type(input, '9');
+    expect(input).toHaveValue('9');
+
+    expect(option1).not.toBeInTheDocument();
+    expect(option2).not.toBeInTheDocument();
+    expect(option3).not.toBeInTheDocument();
+    expect(screen.getByRole('option', { name: 'custom' })).toBeInTheDocument();
+  });
+
+  it('disables the select when isDisabled prop is true', async () => {
+    const initialOptions = [
+      { content: 'Option 1', value: 'option1' },
+      { content: 'Option 2', value: 'option2' },
+      { content: 'Option 3', value: 'option3' }
+    ];
+
+    const user = userEvent.setup();
+
+    render(<MultiTypeaheadSelect initialOptions={initialOptions} isDisabled={true} />);
+
+    const toggle = getToggle();
+
+    expect(toggle.parentElement).toHaveClass(styles.modifiers.disabled);
+
+    await user.click(toggle);
+
+    expect(screen.queryByRole('menu')).not.toBeInTheDocument();
+  });
+
+  it('passes other SelectOption props to the SelectOption component', async () => {
+    const initialOptions = [{ content: 'Option 1', value: 'option1', isDisabled: true }];
+
+    const user = userEvent.setup();
+
+    render(<MultiTypeaheadSelect initialOptions={initialOptions} />);
+
+    const toggle = getToggle();
+
+    await user.click(toggle);
+
+    const option1 = screen.getByRole('option', { name: 'Option 1' });
+    expect(option1).toBeDisabled();
+  });
+
+  it('displays the option in chip when option is selected', async () => {
+    const initialOptions = [
+      { content: 'Option 1', value: 'option1' },
+      { content: 'Option 2', value: 'option2' },
+      { content: 'Option 3', value: 'option3' }
+    ];
+
+    const user = userEvent.setup();
+
+    render(<MultiTypeaheadSelect initialOptions={initialOptions} />);
+
+    const toggle = getToggle();
+    const input = screen.getByRole('combobox');
+
+    expect(input).toHaveAttribute('placeholder', 'Select an option');
+
+    await user.click(toggle);
+
+    const option1 = screen.getByRole('option', { name: 'Option 1' });
+
+    await user.click(option1);
+
+    await user.click(toggle);
+
+    // TODO: How to find the chips?
+
+    const clearButton = screen.getByRole('button', { name: 'Clear input value' });
+    await user.click(clearButton);
+
+    // TODO: How to find the chips?
+  });
+
+  it('typing in input filters options', async () => {
+    const initialOptions = [
+      { content: 'Option 1', value: 'option1' },
+      { content: 'Option 2', value: 'option2' },
+      { content: 'Option 3', value: 'option3' }
+    ];
+
+    const user = userEvent.setup();
+
+    render(<MultiTypeaheadSelect initialOptions={initialOptions} />);
+
+    const toggle = getToggle();
+    const input = screen.getByRole('combobox');
+
+    expect(input).toHaveAttribute('placeholder', 'Select an option');
+
+    await user.click(toggle);
+
+    const option1 = screen.getByRole('option', { name: 'Option 1' });
+    const option2 = screen.getByRole('option', { name: 'Option 2' });
+    const option3 = screen.getByRole('option', { name: 'Option 3' });
+
+    expect(option1).toBeInTheDocument();
+    expect(option2).toBeInTheDocument();
+    expect(option3).toBeInTheDocument();
+
+    await user.type(input, '1');
+    expect(input).toHaveValue('1');
+
+    expect(option1).toBeInTheDocument();
+    expect(option2).not.toBeInTheDocument();
+    expect(option3).not.toBeInTheDocument();
+  });
+
+  it('typing in input triggers onInputChange callback', async () => {
+    const initialOptions = [
+      { content: 'Option 1', value: 'option1' },
+      { content: 'Option 2', value: 'option2' },
+      { content: 'Option 3', value: 'option3' }
+    ];
+
+    const user = userEvent.setup();
+    const onInputChangeMock = jest.fn();
+
+    render(<MultiTypeaheadSelect initialOptions={initialOptions} onInputChange={onInputChangeMock} />);
+
+    const input = screen.getByRole('combobox');
+
+    expect(input).toHaveAttribute('placeholder', 'Select an option');
+
+    await user.type(input, '1');
+
+    expect(input).toHaveValue('1');
+    expect(onInputChangeMock).toHaveBeenCalledTimes(1);
+    expect(onInputChangeMock).toHaveBeenCalledWith('1');
+  });
+
+  it('Matches snapshot', async () => {
+    const initialOptions = [
+      { content: 'Option 1', value: 'option1' },
+      { content: 'Option 2', value: 'option2' },
+      { content: 'Option 3', value: 'option3' }
+    ];
+
+    const user = userEvent.setup();
+
+    const { asFragment } = render(<MultiTypeaheadSelect initialOptions={initialOptions} />);
+
+    const toggle = getToggle();
+    await user.click(toggle);
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+});

package/src/components/Select/__tests__/__snapshots__/MultiTypeaheadSelect.test.tsx.snap

@@ -0,0 +1,97 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`MultiTypeaheadSelect Matches snapshot 1`] = `
+<DocumentFragment>
+  <div
+    class="pf-v6-c-menu-toggle pf-m-expanded pf-m-full-width pf-m-typeahead"
+  >
+    <div
+      class="pf-v6-c-text-input-group pf-m-plain"
+    >
+      <div
+        autocomplete="off"
+        class="pf-v6-c-text-input-group__main"
+      >
+        <span
+          class="pf-v6-c-text-input-group__text"
+        >
+          <input
+            aria-controls="select-typeahead-listbox"
+            aria-expanded="true"
+            aria-label="Type to filter"
+            class="pf-v6-c-text-input-group__text-input"
+            placeholder="Select an option"
+            role="combobox"
+            type="text"
+            value=""
+          />
+        </span>
+      </div>
+      <div
+        class="pf-v6-c-text-input-group__utilities"
+        style="display: none;"
+      >
+        <button
+          aria-disabled="false"
+          aria-label="Clear input value"
+          class="pf-v6-c-button pf-m-plain"
+          data-ouia-component-id="OUIA-Generated-Button-plain-17"
+          data-ouia-component-type="PF6/Button"
+          data-ouia-safe="true"
+          type="button"
+        >
+          <span
+            class="pf-v6-c-button__text"
+          >
+            <svg
+              aria-hidden="true"
+              class="pf-v6-svg"
+              fill="currentColor"
+              height="1em"
+              role="img"
+              viewBox="0 0 352 512"
+              width="1em"
+            >
+              <path
+                d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
+              />
+            </svg>
+          </span>
+        </button>
+      </div>
+    </div>
+    <button
+      aria-expanded="true"
+      aria-label="Multi select Typeahead menu toggle"
+      class="pf-v6-c-menu-toggle__button"
+      data-ouia-component-id="OUIA-Generated-MenuToggle-typeahead-17"
+      data-ouia-component-type="PF6/MenuToggle"
+      data-ouia-safe="true"
+      tabindex="-1"
+      type="button"
+    >
+      <span
+        class="pf-v6-c-menu-toggle__controls"
+      >
+        <span
+          class="pf-v6-c-menu-toggle__toggle-icon"
+        >
+          <svg
+            aria-hidden="true"
+            class="pf-v6-svg"
+            fill="currentColor"
+            height="1em"
+            role="img"
+            viewBox="0 0 320 512"
+            width="1em"
+          >
+            <path
+              d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
+            />
+          </svg>
+        </span>
+      </span>
+    </button>
+  </div>
+</DocumentFragment>
+`;

package/src/components/Select/examples/CheckboxSelectDemo.tsx

@@ -1,13 +1,30 @@
 import React from 'react';
 import { CheckboxSelect, CheckboxSelectOption } from '@patternfly/react-templates';
 
+const Options: { content: string; value: string; description?: string; isDisabled?: boolean }[] = [
+  { content: 'Option 1', value: 'option-1' },
+  { content: 'Option 2', value: 'option-2', description: 'Option with description' },
+  { content: 'Option 3', value: 'option-3', isDisabled: true },
+  { content: 'Option 4', value: 'option-4' }
+];
+
 export const SelectBasic: React.FunctionComponent = () => {
-  const initialOptions: CheckboxSelectOption[] = [
-    { content: 'Option 1', value: 'option-1' },
-    { content: 'Option 2', value: 'option-2', description: 'Option with description' },
-    { content: 'Option 3', value: 'option-3', isDisabled: true },
-    { content: 'Option 4', value: 'option-4' }
-  ];
-
-  return <CheckboxSelect initialOptions={initialOptions} />;
+  const [selected, setSelected] = React.useState<string[]>(['option-2']);
+
+  const initialOptions = React.useMemo<CheckboxSelectOption[]>(
+    () => Options.map((o) => ({ ...o, selected: selected.includes(o.value) })),
+    [selected]
+  );
+
+  return (
+    <CheckboxSelect
+      initialOptions={initialOptions}
+      onSelect={(_ev, value) => {
+        const val = String(value);
+        setSelected((prevSelected) =>
+          prevSelected.includes(val) ? prevSelected.filter((item) => item !== val) : [...prevSelected, String(val)]
+        );
+      }}
+    />
+  );
 };

package/src/components/Select/examples/MultiTypeaheadSelectDemo.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+import { MultiTypeaheadSelect, MultiTypeaheadSelectOption } from '@patternfly/react-templates';
+
+const Options = [
+  { content: 'Alabama', value: 'option1' },
+  { content: 'Arizona', value: 'option2' },
+  { content: 'California', value: 'option3' },
+  { content: 'Florida', value: 'option4' },
+  { content: 'Massachusetts', value: 'option5' },
+  { content: 'Maine', value: 'option6' },
+  { content: 'New Jersey', value: 'option7' },
+  { content: 'New Mexico', value: 'option8' },
+  { content: 'New York', value: 'option9' },
+  { content: 'North Carolina', value: 'option10' }
+];
+
+type SelectionsType = (string | number)[];
+
+export const MultiSelectTypeaheadDemo: React.FunctionComponent = () => {
+  const [selected, setSelected] = React.useState<SelectionsType>(['option5']);
+
+  const initialOptions = React.useMemo<MultiTypeaheadSelectOption[]>(
+    () => Options.map((o) => ({ ...o, selected: selected.includes(o.value) })),
+    [selected]
+  );
+
+  return (
+    <MultiTypeaheadSelect
+      initialOptions={initialOptions}
+      placeholder="Select a state"
+      noOptionsFoundMessage={(filter) => `No state was found for "${filter}"`}
+      onSelectionChange={(_ev, selections) => setSelected(selections)}
+    />
+  );
+};

package/src/components/Select/examples/SelectTemplates.md

@@ -12,7 +12,7 @@ Note: Templates live in their own package at [@patternfly/react-templates](https
 For custom use cases, please see the select component suite from [@patternfly/react-core](https://www.npmjs.com/package/@patternfly/react-core).
 
 import { Checkbox } from '@patternfly/react-core';
-import { SimpleSelect, CheckboxSelect, TypeaheadSelect } from '@patternfly/react-templates';
+import { SimpleSelect, CheckboxSelect, TypeaheadSelect, MultiTypeaheadSelect } from '@patternfly/react-templates';
 
 ## Select template examples
 
@@ -33,3 +33,9 @@ import { SimpleSelect, CheckboxSelect, TypeaheadSelect } from '@patternfly/react
 ```ts file="TypeaheadSelectDemo.tsx"
 
 ```
+
+### Multi-Typeahead
+
+```ts file="MultiTypeaheadSelectDemo.tsx"
+
+```

package/src/components/Select/examples/SimpleSelectDemo.tsx

@@ -2,14 +2,20 @@ import React from 'react';
 import { Checkbox } from '@patternfly/react-core';
 import { SimpleSelect, SimpleSelectOption } from '@patternfly/react-templates';
 
+const Options: SimpleSelectOption[] = [
+  { content: 'Option 1', value: 'Option1' },
+  { content: 'Option 2', value: 'Option2', description: 'Option with description' },
+  { content: 'Option 3', value: 'Option3' }
+];
+
 export const SelectSimpleDemo: React.FunctionComponent = () => {
   const [isDisabled, setIsDisabled] = React.useState<boolean>(false);
+  const [selected, setSelected] = React.useState<string | undefined>('Option1');
 
-  const initialOptions: SimpleSelectOption[] = [
-    { content: 'Option 1', value: 'Option 1' },
-    { content: 'Option 2', value: 'Option 2', description: 'Option with description' },
-    { content: 'Option 3', value: 'Option 3' }
-  ];
+  const initialOptions = React.useMemo<SimpleSelectOption[]>(
+    () => Options.map((o) => ({ ...o, selected: o.value === selected })),
+    [selected]
+  );
 
   return (
     <React.Fragment>
@@ -20,7 +26,11 @@ export const SelectSimpleDemo: React.FunctionComponent = () => {
         onChange={(_event, checked) => setIsDisabled(checked)}
         style={{ marginBottom: 20 }}
       />
-      <SimpleSelect initialOptions={initialOptions} isDisabled={isDisabled} />
+      <SimpleSelect
+        initialOptions={initialOptions}
+        isDisabled={isDisabled}
+        onSelect={(_ev, selection) => setSelected(String(selection))}
+      />
     </React.Fragment>
   );
 };