@patternfly/react-templates 1.0.0-prerelease.3 → 1.0.0-prerelease.5

package/src/components/Select/CheckboxSelect.test.tsx

@@ -0,0 +1,256 @@
+import * as React from 'react';
+import { render, screen, waitForElementToBeRemoved } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { CheckboxSelect } from './CheckboxSelect';
+import styles from '@patternfly/react-styles/css/components/Badge/badge';
+
+test('renders checkbox select 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(<CheckboxSelect initialOptions={initialOptions} />);
+
+  const toggle = screen.getByRole('button', { name: 'Filter by status' });
+
+  await user.click(toggle);
+
+  const option1 = screen.getByRole('checkbox', { name: 'Option 1' });
+  const option2 = screen.getByRole('checkbox', { name: 'Option 2' });
+  const option3 = screen.getByRole('checkbox', { name: 'Option 3' });
+
+  expect(option1).toBeInTheDocument();
+  expect(option2).toBeInTheDocument();
+  expect(option3).toBeInTheDocument();
+});
+
+test('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(<CheckboxSelect initialOptions={initialOptions} />);
+
+  const toggle = screen.getByRole('button', { name: 'Filter by status' });
+
+  await user.click(toggle);
+
+  const option1 = screen.getByRole('checkbox', { name: 'Option 1' });
+
+  expect(option1).not.toBeChecked();
+
+  await user.click(option1);
+
+  expect(option1).toBeChecked();
+});
+
+test('deselects options when an already selected option 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(<CheckboxSelect initialOptions={initialOptions} />);
+
+  const toggle = screen.getByRole('button', { name: 'Filter by status' });
+
+  await user.click(toggle);
+
+  const option1 = screen.getByRole('checkbox', { name: 'Option 1' });
+
+  await user.click(option1);
+  await user.click(option1);
+
+  expect(option1).not.toBeChecked();
+});
+
+test('calls the onSelect 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 onSelectMock = jest.fn();
+
+  render(<CheckboxSelect initialOptions={initialOptions} onSelect={onSelectMock} />);
+
+  const toggle = screen.getByRole('button', { name: 'Filter by status' });
+
+  await user.click(toggle);
+
+  const option1 = screen.getByRole('checkbox', { name: 'Option 1' });
+
+  await user.click(option1);
+
+  expect(onSelectMock).toHaveBeenCalledTimes(1);
+  expect(onSelectMock).toHaveBeenCalledWith(expect.anything(), 'option1');
+});
+
+test('does not call the onSelect callback when no options are selected', async () => {
+  const initialOptions = [
+    { content: 'Option 1', value: 'option1' },
+    { content: 'Option 2', value: 'option2' },
+    { content: 'Option 3', value: 'option3' }
+  ];
+
+  const user = userEvent.setup();
+  const onSelectMock = jest.fn();
+
+  render(<CheckboxSelect initialOptions={initialOptions} onSelect={onSelectMock} />);
+
+  const toggle = screen.getByRole('button', { name: 'Filter by status' });
+
+  await user.click(toggle);
+
+  expect(onSelectMock).not.toHaveBeenCalled();
+});
+
+test('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(<CheckboxSelect initialOptions={initialOptions} />);
+
+  const toggleButton = screen.getByRole('button', { name: 'Filter by status' });
+
+  await user.click(toggleButton);
+
+  expect(screen.getByRole('menu')).toBeInTheDocument();
+
+  await user.click(toggleButton);
+
+  await waitForElementToBeRemoved(() => screen.queryByRole('menu'));
+
+  expect(screen.queryByRole('menu')).not.toBeInTheDocument();
+});
+
+test('displays custom toggle content', async () => {
+  const initialOptions = [
+    { content: 'Option 1', value: 'option1' },
+    { content: 'Option 2', value: 'option2' },
+    { content: 'Option 3', value: 'option3' }
+  ];
+
+  render(<CheckboxSelect initialOptions={initialOptions} toggleContent="Custom Toggle" />);
+
+  const toggleButton = screen.getByRole('button', { name: 'Custom Toggle' });
+
+  expect(toggleButton).toBeInTheDocument();
+});
+
+test('calls the onToggle callback when the select opens or closes', 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(<CheckboxSelect initialOptions={initialOptions} onToggle={onToggleMock} />);
+
+  const toggle = screen.getByRole('button', { name: 'Filter by status' });
+
+  await user.click(toggle);
+
+  expect(onToggleMock).toHaveBeenCalledTimes(1);
+  expect(onToggleMock).toHaveBeenCalledWith(true);
+
+  await user.click(toggle);
+
+  expect(onToggleMock).toHaveBeenCalledTimes(2);
+  expect(onToggleMock).toHaveBeenCalledWith(false);
+});
+
+test('does not call the onToggle callback when the toggle is not clicked', async () => {
+  const initialOptions = [
+    { content: 'Option 1', value: 'option1' },
+    { content: 'Option 2', value: 'option2' },
+    { content: 'Option 3', value: 'option3' }
+  ];
+
+  const onToggleMock = jest.fn();
+
+  render(<CheckboxSelect initialOptions={initialOptions} onToggle={onToggleMock} />);
+
+  expect(onToggleMock).not.toHaveBeenCalled();
+});
+
+test('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(<CheckboxSelect initialOptions={initialOptions} isDisabled={true} />);
+
+  const toggleButton = screen.getByRole('button', { name: 'Filter by status' });
+
+  expect(toggleButton).toBeDisabled();
+
+  await user.click(toggleButton);
+
+  expect(screen.queryByRole('menu')).not.toBeInTheDocument();
+});
+
+test('passes other SelectOption props to the SelectOption component', async () => {
+  const initialOptions = [{ content: 'Option 1', value: 'option1', isDisabled: true }];
+
+  const user = userEvent.setup();
+
+  render(<CheckboxSelect initialOptions={initialOptions} />);
+
+  const toggle = screen.getByRole('button', { name: 'Filter by status' });
+
+  await user.click(toggle);
+
+  const option1 = screen.getByRole('checkbox', { name: 'Option 1' });
+
+  expect(option1).toBeDisabled();
+});
+
+test('displays the badge count when options are selected', async () => {
+  const initialOptions = [
+    { content: 'Option 1', value: 'option1' },
+    { content: 'Option 2', value: 'option2' },
+    { content: 'Option 3', value: 'option3' }
+  ];
+
+  const user = userEvent.setup();
+
+  render(<CheckboxSelect initialOptions={initialOptions} />);
+
+  const toggle = screen.getByRole('button', { name: 'Filter by status' });
+
+  await user.click(toggle);
+
+  const option1 = screen.getByRole('checkbox', { name: 'Option 1' });
+
+  expect(screen.queryByText('1')).not.toBeInTheDocument();
+
+  await user.click(option1);
+
+  expect(screen.getByText('1')).toHaveClass(styles.badge, 'pf-m-read');
+});

package/src/components/Select/CheckboxSelect.tsx

@@ -0,0 +1,113 @@
+import React from 'react';
+import {
+  Badge,
+  MenuToggle,
+  MenuToggleElement,
+  Select,
+  SelectList,
+  SelectOption,
+  SelectOptionProps
+} from '@patternfly/react-core';
+
+export interface CheckboxSelectOption extends Omit<SelectOptionProps, 'content'> {
+  /** Content of the select option. */
+  content: React.ReactNode;
+  /** Value of the select option. */
+  value: string | number;
+}
+
+export interface CheckboxSelectProps {
+  /** @hide Forwarded ref */
+  innerRef?: React.Ref<any>;
+  /** Initial options of the select. */
+  initialOptions?: CheckboxSelectOption[];
+  /** Callback triggered on selection. */
+  onSelect?: (_event: React.MouseEvent<Element, MouseEvent>, value?: string | number) => void;
+  /** Callback triggered when the select opens or closes. */
+  onToggle?: (nextIsOpen: boolean) => void;
+  /** Flag indicating the select should be disabled. */
+  isDisabled?: boolean;
+  /** Content of the toggle. Defaults to the selected option. */
+  toggleContent?: React.ReactNode;
+}
+
+const CheckboxSelectBase: React.FunctionComponent<CheckboxSelectProps> = ({
+  innerRef,
+  initialOptions,
+  isDisabled,
+  onSelect: passedOnSelect,
+  onToggle,
+  toggleContent,
+  ...props
+}: CheckboxSelectProps) => {
+  const [isOpen, setIsOpen] = React.useState(false);
+  const [selected, setSelected] = React.useState<string[]>([]);
+
+  const checkboxSelectOptions = initialOptions?.map((option) => {
+    const { content, value, ...props } = option;
+    const isSelected = selected.includes(`${value}`);
+    return (
+      <SelectOption {...props} value={value} key={value} hasCheckbox isSelected={isSelected}>
+        {content}
+      </SelectOption>
+    );
+  });
+
+  const onToggleClick = () => {
+    onToggle && onToggle(!isOpen);
+    setIsOpen(!isOpen);
+  };
+
+  const onSelect = (event: React.MouseEvent<Element, MouseEvent> | undefined, value: string | number | undefined) => {
+    const valueString = `${value}`;
+    if (selected.includes(valueString)) {
+      setSelected((prevSelected) => prevSelected.filter((item) => item !== valueString));
+    } else {
+      setSelected((prevSelected) => [...prevSelected, valueString]);
+    }
+    passedOnSelect && passedOnSelect(event, value);
+  };
+
+  const defaultToggleContent = (
+    <>
+      Filter by status
+      {selected.length > 0 && <Badge isRead>{selected.length}</Badge>}
+    </>
+  );
+
+  const toggle = (toggleRef: React.Ref<MenuToggleElement>) => (
+    <MenuToggle
+      ref={toggleRef}
+      onClick={onToggleClick}
+      isExpanded={isOpen}
+      isDisabled={isDisabled}
+      style={
+        {
+          width: '200px'
+        } as React.CSSProperties
+      }
+    >
+      {toggleContent || defaultToggleContent}
+    </MenuToggle>
+  );
+
+  return (
+    <Select
+      id="checkbox-select"
+      isOpen={isOpen}
+      selected={selected}
+      onSelect={onSelect}
+      onOpenChange={(isOpen) => setIsOpen(isOpen)}
+      toggle={toggle}
+      ref={innerRef}
+      role="menu"
+      {...props}
+    >
+      <SelectList>{checkboxSelectOptions}</SelectList>
+    </Select>
+  );
+};
+
+export const CheckboxSelect = React.forwardRef((props: CheckboxSelectProps, ref: React.Ref<any>) => (
+  <CheckboxSelectBase {...props} innerRef={ref} />
+));

package/src/components/Select/CheckboxSelectSnapshots.test.tsx

@@ -0,0 +1,32 @@
+import * as React from 'react';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { CheckboxSelect } from './CheckboxSelect';
+
+jest.mock('@patternfly/react-core/dist/js/helpers/GenerateId/GenerateId', () => ({
+  GenerateId: ({ children }) => children('generated-id')
+}));
+
+test('checkbox select with no props snapshot', () => {
+  const { asFragment } = render(<CheckboxSelect />);
+
+  expect(asFragment()).toMatchSnapshot();
+});
+
+test('opened checkbox select 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(<CheckboxSelect initialOptions={initialOptions} />);
+
+  const toggle = screen.getByRole('button', { name: 'Filter by status' });
+
+  await user.click(toggle);
+
+  expect(asFragment()).toMatchSnapshot();
+});

package/src/components/Select/__snapshots__/CheckboxSelectSnapshots.test.tsx.snap

@@ -0,0 +1,212 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`checkbox select with no props snapshot 1`] = `
+<DocumentFragment>
+  <button
+    aria-expanded="false"
+    class="pf-v5-c-menu-toggle"
+    style="width: 200px;"
+    type="button"
+  >
+    <span
+      class="pf-v5-c-menu-toggle__text"
+    >
+      Filter by status
+    </span>
+    <span
+      class="pf-v5-c-menu-toggle__controls"
+    >
+      <span
+        class="pf-v5-c-menu-toggle__toggle-icon"
+      >
+        <svg
+          aria-hidden="true"
+          class="pf-v5-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>
+</DocumentFragment>
+`;
+
+exports[`opened checkbox select snapshot 1`] = `
+<DocumentFragment>
+  <button
+    aria-expanded="true"
+    class="pf-v5-c-menu-toggle pf-m-expanded"
+    style="width: 200px;"
+    type="button"
+  >
+    <span
+      class="pf-v5-c-menu-toggle__text"
+    >
+      Filter by status
+    </span>
+    <span
+      class="pf-v5-c-menu-toggle__controls"
+    >
+      <span
+        class="pf-v5-c-menu-toggle__toggle-icon"
+      >
+        <svg
+          aria-hidden="true"
+          class="pf-v5-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
+    class="pf-v5-c-menu"
+    data-ouia-component-id="OUIA-Generated-Select-3"
+    data-ouia-component-type="PF5/Select"
+    data-ouia-safe="true"
+    data-popper-escaped="true"
+    data-popper-placement="bottom-start"
+    data-popper-reference-hidden="true"
+    id="checkbox-select"
+    style="position: absolute; left: 0px; top: 0px; z-index: 9999; opacity: 1; transition: opacity 0ms cubic-bezier(.54, 1.5, .38, 1.11); min-width: 0px; transform: translate(0px, 0px);"
+  >
+    <div
+      class="pf-v5-c-menu__content"
+    >
+      <ul
+        class="pf-v5-c-menu__list"
+        role="menu"
+      >
+        <li
+          class="pf-v5-c-menu__list-item"
+          role="menuitem"
+        >
+          <label
+            class="pf-v5-c-menu__item"
+            for="generated-id"
+            tabindex="-1"
+          >
+            <span
+              class="pf-v5-c-menu__item-main"
+            >
+              <span
+                class="pf-v5-c-menu__item-check"
+              >
+                <span
+                  class="pf-v5-c-check pf-m-standalone"
+                >
+                  <input
+                    aria-disabled="false"
+                    aria-invalid="false"
+                    class="pf-v5-c-check__input"
+                    data-ouia-component-id="OUIA-Generated-Checkbox-1"
+                    data-ouia-component-type="PF5/Checkbox"
+                    data-ouia-safe="true"
+                    id="generated-id"
+                    type="checkbox"
+                  />
+                </span>
+              </span>
+              <span
+                class="pf-v5-c-menu__item-text"
+              >
+                Option 1
+              </span>
+            </span>
+          </label>
+        </li>
+        <li
+          class="pf-v5-c-menu__list-item"
+          role="menuitem"
+        >
+          <label
+            class="pf-v5-c-menu__item"
+            for="generated-id"
+            tabindex="-1"
+          >
+            <span
+              class="pf-v5-c-menu__item-main"
+            >
+              <span
+                class="pf-v5-c-menu__item-check"
+              >
+                <span
+                  class="pf-v5-c-check pf-m-standalone"
+                >
+                  <input
+                    aria-disabled="false"
+                    aria-invalid="false"
+                    class="pf-v5-c-check__input"
+                    data-ouia-component-id="OUIA-Generated-Checkbox-2"
+                    data-ouia-component-type="PF5/Checkbox"
+                    data-ouia-safe="true"
+                    id="generated-id"
+                    type="checkbox"
+                  />
+                </span>
+              </span>
+              <span
+                class="pf-v5-c-menu__item-text"
+              >
+                Option 2
+              </span>
+            </span>
+          </label>
+        </li>
+        <li
+          class="pf-v5-c-menu__list-item"
+          role="menuitem"
+        >
+          <label
+            class="pf-v5-c-menu__item"
+            for="generated-id"
+            tabindex="-1"
+          >
+            <span
+              class="pf-v5-c-menu__item-main"
+            >
+              <span
+                class="pf-v5-c-menu__item-check"
+              >
+                <span
+                  class="pf-v5-c-check pf-m-standalone"
+                >
+                  <input
+                    aria-disabled="false"
+                    aria-invalid="false"
+                    class="pf-v5-c-check__input"
+                    data-ouia-component-id="OUIA-Generated-Checkbox-3"
+                    data-ouia-component-type="PF5/Checkbox"
+                    data-ouia-safe="true"
+                    id="generated-id"
+                    type="checkbox"
+                  />
+                </span>
+              </span>
+              <span
+                class="pf-v5-c-menu__item-text"
+              >
+                Option 3
+              </span>
+            </span>
+          </label>
+        </li>
+      </ul>
+    </div>
+  </div>
+</DocumentFragment>
+`;

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

@@ -0,0 +1,13 @@
+import React from 'react';
+import { CheckboxSelect, CheckboxSelectOption } from '@patternfly/react-templates';
+
+export const SelectBasic: React.FunctionComponent = () => {
+  const initialOptions: CheckboxSelectOption[] = [
+    { content: 'Option 1', value: 'option-1' },
+    { content: 'Option 2', value: 'option-2' },
+    { content: 'Option 3', value: 'option-3', isDisabled: true },
+    { content: 'Option 4', value: 'option-4' }
+  ];
+
+  return <CheckboxSelect initialOptions={initialOptions} />;
+};

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

@@ -4,7 +4,7 @@ section: components
 subsection: menus
 template: true
 beta: true
-propComponents: ['SimpleSelect']
+propComponents: ['SelectSimple', 'CheckboxSelect']
 ---
 
 Note: Templates live in their own package at [@patternfly/react-templates](https://www.npmjs.com/package/@patternfly/react-templates)!
@@ -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 { SelectOption, Checkbox } from '@patternfly/react-core';
-import { SelectSimple } from '@patternfly/react-templates';
+import { SelectSimple, CheckboxSelect } from '@patternfly/react-templates';
 
 ## Select template examples
 
@@ -21,3 +21,8 @@ import { SelectSimple } from '@patternfly/react-templates';
 ```ts file="SelectSimpleDemo.tsx"
 
 ```
+
+### Checkbox
+
+```ts file="CheckboxSelectDemo.tsx"
+```

package/src/components/Select/index.ts

@@ -1 +1,2 @@
 export * from './SelectSimple';
+export * from './CheckboxSelect';