From 59f3914e76753831302e361e23b3a07a49a1ac78 Mon Sep 17 00:00:00 2001
From: Austin Sullivan <ausulliv@redhat.com>
Date: Mon, 11 Mar 2024 16:07:56 -0400
Subject: [PATCH 1/3] feat(Select): add checkbox variant of the simple select
 template

---
 .../Select/CheckboxSelectSimple.test.tsx      | 280 ++++++++++++++++++
 .../Select/CheckboxSelectSimple.tsx           | 113 +++++++
 .../CheckboxSelectSimple.test.tsx.snap        | 212 +++++++++++++
 .../examples/CheckboxSelectSimpleDemo.tsx     |  13 +
 .../Select/examples/SelectTemplates.md        |   9 +-
 .../src/components/Select/index.ts            |   1 +
 6 files changed, 626 insertions(+), 2 deletions(-)
 create mode 100644 packages/react-templates/src/components/Select/CheckboxSelectSimple.test.tsx
 create mode 100644 packages/react-templates/src/components/Select/CheckboxSelectSimple.tsx
 create mode 100644 packages/react-templates/src/components/Select/__snapshots__/CheckboxSelectSimple.test.tsx.snap
 create mode 100644 packages/react-templates/src/components/Select/examples/CheckboxSelectSimpleDemo.tsx

diff --git a/packages/react-templates/src/components/Select/CheckboxSelectSimple.test.tsx b/packages/react-templates/src/components/Select/CheckboxSelectSimple.test.tsx
new file mode 100644
index 00000000000..ea1ed47fefa
--- /dev/null
+++ b/packages/react-templates/src/components/Select/CheckboxSelectSimple.test.tsx
@@ -0,0 +1,280 @@
+import * as React from 'react';
+import { render, screen, waitForElementToBeRemoved } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { CheckboxSelectSimple } from './CheckboxSelectSimple';
+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(<CheckboxSelectSimple 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(<CheckboxSelectSimple 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(<CheckboxSelectSimple 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(<CheckboxSelectSimple 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(<CheckboxSelectSimple 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(<CheckboxSelectSimple 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(<CheckboxSelectSimple 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(<CheckboxSelectSimple 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(<CheckboxSelectSimple 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(<CheckboxSelectSimple 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(<CheckboxSelectSimple 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(<CheckboxSelectSimple 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');
+});
+
+test('checkbox select with no props snapshot', () => {
+  const { asFragment } = render(<CheckboxSelectSimple />);
+
+  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(<CheckboxSelectSimple initialOptions={initialOptions} />);
+
+  const toggle = screen.getByRole('button', { name: 'Filter by status' });
+
+  await user.click(toggle);
+
+  expect(asFragment()).toMatchSnapshot();
+});
diff --git a/packages/react-templates/src/components/Select/CheckboxSelectSimple.tsx b/packages/react-templates/src/components/Select/CheckboxSelectSimple.tsx
new file mode 100644
index 00000000000..46fd86dfc2a
--- /dev/null
+++ b/packages/react-templates/src/components/Select/CheckboxSelectSimple.tsx
@@ -0,0 +1,113 @@
+import React from 'react';
+import {
+  Badge,
+  MenuToggle,
+  MenuToggleElement,
+  Select,
+  SelectList,
+  SelectOption,
+  SelectOptionProps
+} from '@patternfly/react-core';
+
+export interface CheckboxSelectSimpleOption extends Omit<SelectOptionProps, 'content'> {
+  /** Content of the select option. */
+  content: React.ReactNode;
+  /** Value of the select option. */
+  value: string | number;
+}
+
+export interface CheckboxSelectSimpleProps {
+  /** @hide Forwarded ref */
+  innerRef?: React.Ref<any>;
+  /** Initial options of the select. */
+  initialOptions?: CheckboxSelectSimpleOption[];
+  /** 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 CheckboxSelectSimpleBase: React.FunctionComponent<CheckboxSelectSimpleProps> = ({
+  innerRef,
+  initialOptions,
+  isDisabled,
+  onSelect: passedOnSelect,
+  onToggle,
+  toggleContent,
+  ...props
+}: CheckboxSelectSimpleProps) => {
+  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 CheckboxSelectSimple = React.forwardRef((props: CheckboxSelectSimpleProps, ref: React.Ref<any>) => (
+  <CheckboxSelectSimpleBase {...props} innerRef={ref} />
+));
diff --git a/packages/react-templates/src/components/Select/__snapshots__/CheckboxSelectSimple.test.tsx.snap b/packages/react-templates/src/components/Select/__snapshots__/CheckboxSelectSimple.test.tsx.snap
new file mode 100644
index 00000000000..1cdb24bc826
--- /dev/null
+++ b/packages/react-templates/src/components/Select/__snapshots__/CheckboxSelectSimple.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-31"
+    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="pf-random-id-25"
+            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-26"
+                    data-ouia-component-type="PF5/Checkbox"
+                    data-ouia-safe="true"
+                    id="pf-random-id-25"
+                    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="pf-random-id-26"
+            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-27"
+                    data-ouia-component-type="PF5/Checkbox"
+                    data-ouia-safe="true"
+                    id="pf-random-id-26"
+                    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="pf-random-id-27"
+            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-28"
+                    data-ouia-component-type="PF5/Checkbox"
+                    data-ouia-safe="true"
+                    id="pf-random-id-27"
+                    type="checkbox"
+                  />
+                </span>
+              </span>
+              <span
+                class="pf-v5-c-menu__item-text"
+              >
+                Option 3
+              </span>
+            </span>
+          </label>
+        </li>
+      </ul>
+    </div>
+  </div>
+</DocumentFragment>
+`;
diff --git a/packages/react-templates/src/components/Select/examples/CheckboxSelectSimpleDemo.tsx b/packages/react-templates/src/components/Select/examples/CheckboxSelectSimpleDemo.tsx
new file mode 100644
index 00000000000..d698eed0bc1
--- /dev/null
+++ b/packages/react-templates/src/components/Select/examples/CheckboxSelectSimpleDemo.tsx
@@ -0,0 +1,13 @@
+import React from 'react';
+import { CheckboxSelectSimple, CheckboxSelectSimpleOption } from '@patternfly/react-templates';
+
+export const SelectBasic: React.FunctionComponent = () => {
+  const initialOptions: CheckboxSelectSimpleOption[] = [
+    { 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 <CheckboxSelectSimple initialOptions={initialOptions} />;
+};
diff --git a/packages/react-templates/src/components/Select/examples/SelectTemplates.md b/packages/react-templates/src/components/Select/examples/SelectTemplates.md
index 89cf3616271..dcf30c9c314 100644
--- a/packages/react-templates/src/components/Select/examples/SelectTemplates.md
+++ b/packages/react-templates/src/components/Select/examples/SelectTemplates.md
@@ -4,7 +4,7 @@ section: components
 subsection: menus
 template: true
 beta: true
-propComponents: ['SimpleSelect']
+propComponents: ['SelectSimple', 'CheckboxSelectSimple']
 ---
 
 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, CheckboxSelectSimple } from '@patternfly/react-templates';
 
 ## Select template examples
 
@@ -21,3 +21,8 @@ import { SelectSimple } from '@patternfly/react-templates';
 ```ts file="SelectSimpleDemo.tsx"
 
 ```
+
+### Checkbox
+
+```ts file="CheckboxSelectSimpleDemo.tsx"
+```
diff --git a/packages/react-templates/src/components/Select/index.ts b/packages/react-templates/src/components/Select/index.ts
index 9c0381bfb99..4d2e73a6b6c 100644
--- a/packages/react-templates/src/components/Select/index.ts
+++ b/packages/react-templates/src/components/Select/index.ts
@@ -1 +1,2 @@
 export * from './SelectSimple';
+export * from './CheckboxSelectSimple';

From 58f765aacda2c19d5fa5648bb41345fe13812071 Mon Sep 17 00:00:00 2001
From: Austin Sullivan <ausulliv@redhat.com>
Date: Wed, 27 Mar 2024 17:22:35 -0400
Subject: [PATCH 2/3] chore(Select): rename template

---
 ...imple.test.tsx => CheckboxSelect.test.tsx} | 30 +++++++++----------
 ...boxSelectSimple.tsx => CheckboxSelect.tsx} | 14 ++++-----
 ....tsx.snap => CheckboxSelect.test.tsx.snap} | 12 ++++----
 ...tSimpleDemo.tsx => CheckboxSelectDemo.tsx} |  6 ++--
 .../Select/examples/SelectTemplates.md        |  6 ++--
 .../src/components/Select/index.ts            |  2 +-
 6 files changed, 35 insertions(+), 35 deletions(-)
 rename packages/react-templates/src/components/Select/{CheckboxSelectSimple.test.tsx => CheckboxSelect.test.tsx} (86%)
 rename packages/react-templates/src/components/Select/{CheckboxSelectSimple.tsx => CheckboxSelect.tsx} (85%)
 rename packages/react-templates/src/components/Select/__snapshots__/{CheckboxSelectSimple.test.tsx.snap => CheckboxSelect.test.tsx.snap} (93%)
 rename packages/react-templates/src/components/Select/examples/{CheckboxSelectSimpleDemo.tsx => CheckboxSelectDemo.tsx} (58%)

diff --git a/packages/react-templates/src/components/Select/CheckboxSelectSimple.test.tsx b/packages/react-templates/src/components/Select/CheckboxSelect.test.tsx
similarity index 86%
rename from packages/react-templates/src/components/Select/CheckboxSelectSimple.test.tsx
rename to packages/react-templates/src/components/Select/CheckboxSelect.test.tsx
index ea1ed47fefa..d8abe438545 100644
--- a/packages/react-templates/src/components/Select/CheckboxSelectSimple.test.tsx
+++ b/packages/react-templates/src/components/Select/CheckboxSelect.test.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { render, screen, waitForElementToBeRemoved } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import { CheckboxSelectSimple } from './CheckboxSelectSimple';
+import { CheckboxSelect } from './CheckboxSelect';
 import styles from '@patternfly/react-styles/css/components/Badge/badge';
 
 test('renders checkbox select with options', async () => {
@@ -13,7 +13,7 @@ test('renders checkbox select with options', async () => {
 
   const user = userEvent.setup();
 
-  render(<CheckboxSelectSimple initialOptions={initialOptions} />);
+  render(<CheckboxSelect initialOptions={initialOptions} />);
 
   const toggle = screen.getByRole('button', { name: 'Filter by status' });
 
@@ -37,7 +37,7 @@ test('selects options when clicked', async () => {
 
   const user = userEvent.setup();
 
-  render(<CheckboxSelectSimple initialOptions={initialOptions} />);
+  render(<CheckboxSelect initialOptions={initialOptions} />);
 
   const toggle = screen.getByRole('button', { name: 'Filter by status' });
 
@@ -61,7 +61,7 @@ test('deselects options when an already selected option is clicked', async () =>
 
   const user = userEvent.setup();
 
-  render(<CheckboxSelectSimple initialOptions={initialOptions} />);
+  render(<CheckboxSelect initialOptions={initialOptions} />);
 
   const toggle = screen.getByRole('button', { name: 'Filter by status' });
 
@@ -85,7 +85,7 @@ test('calls the onSelect callback with the selected value when an option is sele
   const user = userEvent.setup();
   const onSelectMock = jest.fn();
 
-  render(<CheckboxSelectSimple initialOptions={initialOptions} onSelect={onSelectMock} />);
+  render(<CheckboxSelect initialOptions={initialOptions} onSelect={onSelectMock} />);
 
   const toggle = screen.getByRole('button', { name: 'Filter by status' });
 
@@ -109,7 +109,7 @@ test('does not call the onSelect callback when no options are selected', async (
   const user = userEvent.setup();
   const onSelectMock = jest.fn();
 
-  render(<CheckboxSelectSimple initialOptions={initialOptions} onSelect={onSelectMock} />);
+  render(<CheckboxSelect initialOptions={initialOptions} onSelect={onSelectMock} />);
 
   const toggle = screen.getByRole('button', { name: 'Filter by status' });
 
@@ -127,7 +127,7 @@ test('toggles the select menu when the toggle button is clicked', async () => {
 
   const user = userEvent.setup();
 
-  render(<CheckboxSelectSimple initialOptions={initialOptions} />);
+  render(<CheckboxSelect initialOptions={initialOptions} />);
 
   const toggleButton = screen.getByRole('button', { name: 'Filter by status' });
 
@@ -149,7 +149,7 @@ test('displays custom toggle content', async () => {
     { content: 'Option 3', value: 'option3' }
   ];
 
-  render(<CheckboxSelectSimple initialOptions={initialOptions} toggleContent="Custom Toggle" />);
+  render(<CheckboxSelect initialOptions={initialOptions} toggleContent="Custom Toggle" />);
 
   const toggleButton = screen.getByRole('button', { name: 'Custom Toggle' });
 
@@ -166,7 +166,7 @@ test('calls the onToggle callback when the select opens or closes', async () =>
   const user = userEvent.setup();
   const onToggleMock = jest.fn();
 
-  render(<CheckboxSelectSimple initialOptions={initialOptions} onToggle={onToggleMock} />);
+  render(<CheckboxSelect initialOptions={initialOptions} onToggle={onToggleMock} />);
 
   const toggle = screen.getByRole('button', { name: 'Filter by status' });
 
@@ -190,7 +190,7 @@ test('does not call the onToggle callback when the toggle is not clicked', async
 
   const onToggleMock = jest.fn();
 
-  render(<CheckboxSelectSimple initialOptions={initialOptions} onToggle={onToggleMock} />);
+  render(<CheckboxSelect initialOptions={initialOptions} onToggle={onToggleMock} />);
 
   expect(onToggleMock).not.toHaveBeenCalled();
 });
@@ -204,7 +204,7 @@ test('disables the select when isDisabled prop is true', async () => {
 
   const user = userEvent.setup();
 
-  render(<CheckboxSelectSimple initialOptions={initialOptions} isDisabled={true} />);
+  render(<CheckboxSelect initialOptions={initialOptions} isDisabled={true} />);
 
   const toggleButton = screen.getByRole('button', { name: 'Filter by status' });
 
@@ -220,7 +220,7 @@ test('passes other SelectOption props to the SelectOption component', async () =
 
   const user = userEvent.setup();
 
-  render(<CheckboxSelectSimple initialOptions={initialOptions} />);
+  render(<CheckboxSelect initialOptions={initialOptions} />);
 
   const toggle = screen.getByRole('button', { name: 'Filter by status' });
 
@@ -240,7 +240,7 @@ test('displays the badge count when options are selected', async () => {
 
   const user = userEvent.setup();
 
-  render(<CheckboxSelectSimple initialOptions={initialOptions} />);
+  render(<CheckboxSelect initialOptions={initialOptions} />);
 
   const toggle = screen.getByRole('button', { name: 'Filter by status' });
 
@@ -256,7 +256,7 @@ test('displays the badge count when options are selected', async () => {
 });
 
 test('checkbox select with no props snapshot', () => {
-  const { asFragment } = render(<CheckboxSelectSimple />);
+  const { asFragment } = render(<CheckboxSelect />);
 
   expect(asFragment()).toMatchSnapshot();
 });
@@ -270,7 +270,7 @@ test('opened checkbox select snapshot', async () => {
 
   const user = userEvent.setup();
 
-  const { asFragment } = render(<CheckboxSelectSimple initialOptions={initialOptions} />);
+  const { asFragment } = render(<CheckboxSelect initialOptions={initialOptions} />);
 
   const toggle = screen.getByRole('button', { name: 'Filter by status' });
 
diff --git a/packages/react-templates/src/components/Select/CheckboxSelectSimple.tsx b/packages/react-templates/src/components/Select/CheckboxSelect.tsx
similarity index 85%
rename from packages/react-templates/src/components/Select/CheckboxSelectSimple.tsx
rename to packages/react-templates/src/components/Select/CheckboxSelect.tsx
index 46fd86dfc2a..df62017676b 100644
--- a/packages/react-templates/src/components/Select/CheckboxSelectSimple.tsx
+++ b/packages/react-templates/src/components/Select/CheckboxSelect.tsx
@@ -9,18 +9,18 @@ import {
   SelectOptionProps
 } from '@patternfly/react-core';
 
-export interface CheckboxSelectSimpleOption extends Omit<SelectOptionProps, 'content'> {
+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 CheckboxSelectSimpleProps {
+export interface CheckboxSelectProps {
   /** @hide Forwarded ref */
   innerRef?: React.Ref<any>;
   /** Initial options of the select. */
-  initialOptions?: CheckboxSelectSimpleOption[];
+  initialOptions?: CheckboxSelectOption[];
   /** Callback triggered on selection. */
   onSelect?: (_event: React.MouseEvent<Element, MouseEvent>, value?: string | number) => void;
   /** Callback triggered when the select opens or closes. */
@@ -31,7 +31,7 @@ export interface CheckboxSelectSimpleProps {
   toggleContent?: React.ReactNode;
 }
 
-const CheckboxSelectSimpleBase: React.FunctionComponent<CheckboxSelectSimpleProps> = ({
+const CheckboxSelectBase: React.FunctionComponent<CheckboxSelectProps> = ({
   innerRef,
   initialOptions,
   isDisabled,
@@ -39,7 +39,7 @@ const CheckboxSelectSimpleBase: React.FunctionComponent<CheckboxSelectSimpleProp
   onToggle,
   toggleContent,
   ...props
-}: CheckboxSelectSimpleProps) => {
+}: CheckboxSelectProps) => {
   const [isOpen, setIsOpen] = React.useState(false);
   const [selected, setSelected] = React.useState<string[]>([]);
 
@@ -108,6 +108,6 @@ const CheckboxSelectSimpleBase: React.FunctionComponent<CheckboxSelectSimpleProp
   );
 };
 
-export const CheckboxSelectSimple = React.forwardRef((props: CheckboxSelectSimpleProps, ref: React.Ref<any>) => (
-  <CheckboxSelectSimpleBase {...props} innerRef={ref} />
+export const CheckboxSelect = React.forwardRef((props: CheckboxSelectProps, ref: React.Ref<any>) => (
+  <CheckboxSelectBase {...props} innerRef={ref} />
 ));
diff --git a/packages/react-templates/src/components/Select/__snapshots__/CheckboxSelectSimple.test.tsx.snap b/packages/react-templates/src/components/Select/__snapshots__/CheckboxSelect.test.tsx.snap
similarity index 93%
rename from packages/react-templates/src/components/Select/__snapshots__/CheckboxSelectSimple.test.tsx.snap
rename to packages/react-templates/src/components/Select/__snapshots__/CheckboxSelect.test.tsx.snap
index 1cdb24bc826..8377f574f65 100644
--- a/packages/react-templates/src/components/Select/__snapshots__/CheckboxSelectSimple.test.tsx.snap
+++ b/packages/react-templates/src/components/Select/__snapshots__/CheckboxSelect.test.tsx.snap
@@ -97,7 +97,7 @@ exports[`opened checkbox select snapshot 1`] = `
         >
           <label
             class="pf-v5-c-menu__item"
-            for="pf-random-id-25"
+            for="pf-random-id-pf-1711574541772lufnl93unqi"
             tabindex="-1"
           >
             <span
@@ -116,7 +116,7 @@ exports[`opened checkbox select snapshot 1`] = `
                     data-ouia-component-id="OUIA-Generated-Checkbox-26"
                     data-ouia-component-type="PF5/Checkbox"
                     data-ouia-safe="true"
-                    id="pf-random-id-25"
+                    id="pf-random-id-pf-1711574541772lufnl93unqi"
                     type="checkbox"
                   />
                 </span>
@@ -135,7 +135,7 @@ exports[`opened checkbox select snapshot 1`] = `
         >
           <label
             class="pf-v5-c-menu__item"
-            for="pf-random-id-26"
+            for="pf-random-id-pf-1711574541773h98h0npljkp"
             tabindex="-1"
           >
             <span
@@ -154,7 +154,7 @@ exports[`opened checkbox select snapshot 1`] = `
                     data-ouia-component-id="OUIA-Generated-Checkbox-27"
                     data-ouia-component-type="PF5/Checkbox"
                     data-ouia-safe="true"
-                    id="pf-random-id-26"
+                    id="pf-random-id-pf-1711574541773h98h0npljkp"
                     type="checkbox"
                   />
                 </span>
@@ -173,7 +173,7 @@ exports[`opened checkbox select snapshot 1`] = `
         >
           <label
             class="pf-v5-c-menu__item"
-            for="pf-random-id-27"
+            for="pf-random-id-pf-1711574541774wwh6l975ygg"
             tabindex="-1"
           >
             <span
@@ -192,7 +192,7 @@ exports[`opened checkbox select snapshot 1`] = `
                     data-ouia-component-id="OUIA-Generated-Checkbox-28"
                     data-ouia-component-type="PF5/Checkbox"
                     data-ouia-safe="true"
-                    id="pf-random-id-27"
+                    id="pf-random-id-pf-1711574541774wwh6l975ygg"
                     type="checkbox"
                   />
                 </span>
diff --git a/packages/react-templates/src/components/Select/examples/CheckboxSelectSimpleDemo.tsx b/packages/react-templates/src/components/Select/examples/CheckboxSelectDemo.tsx
similarity index 58%
rename from packages/react-templates/src/components/Select/examples/CheckboxSelectSimpleDemo.tsx
rename to packages/react-templates/src/components/Select/examples/CheckboxSelectDemo.tsx
index d698eed0bc1..676bd922868 100644
--- a/packages/react-templates/src/components/Select/examples/CheckboxSelectSimpleDemo.tsx
+++ b/packages/react-templates/src/components/Select/examples/CheckboxSelectDemo.tsx
@@ -1,13 +1,13 @@
 import React from 'react';
-import { CheckboxSelectSimple, CheckboxSelectSimpleOption } from '@patternfly/react-templates';
+import { CheckboxSelect, CheckboxSelectOption } from '@patternfly/react-templates';
 
 export const SelectBasic: React.FunctionComponent = () => {
-  const initialOptions: CheckboxSelectSimpleOption[] = [
+  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 <CheckboxSelectSimple initialOptions={initialOptions} />;
+  return <CheckboxSelect initialOptions={initialOptions} />;
 };
diff --git a/packages/react-templates/src/components/Select/examples/SelectTemplates.md b/packages/react-templates/src/components/Select/examples/SelectTemplates.md
index dcf30c9c314..db7af312d29 100644
--- a/packages/react-templates/src/components/Select/examples/SelectTemplates.md
+++ b/packages/react-templates/src/components/Select/examples/SelectTemplates.md
@@ -4,7 +4,7 @@ section: components
 subsection: menus
 template: true
 beta: true
-propComponents: ['SelectSimple', 'CheckboxSelectSimple']
+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, CheckboxSelectSimple } from '@patternfly/react-templates';
+import { SelectSimple, CheckboxSelect } from '@patternfly/react-templates';
 
 ## Select template examples
 
@@ -24,5 +24,5 @@ import { SelectSimple, CheckboxSelectSimple } from '@patternfly/react-templates'
 
 ### Checkbox
 
-```ts file="CheckboxSelectSimpleDemo.tsx"
+```ts file="CheckboxSelectDemo.tsx"
 ```
diff --git a/packages/react-templates/src/components/Select/index.ts b/packages/react-templates/src/components/Select/index.ts
index 4d2e73a6b6c..c8752c8faa5 100644
--- a/packages/react-templates/src/components/Select/index.ts
+++ b/packages/react-templates/src/components/Select/index.ts
@@ -1,2 +1,2 @@
 export * from './SelectSimple';
-export * from './CheckboxSelectSimple';
+export * from './CheckboxSelect';

From 988a834e583d8430f4aba5619f515bbcfca9450f Mon Sep 17 00:00:00 2001
From: Austin Sullivan <ausulliv@redhat.com>
Date: Thu, 28 Mar 2024 11:12:18 -0400
Subject: [PATCH 3/3] fix(Select): mock generated id in CheckboxSelect snapshot
 tests

---
 .../components/Select/CheckboxSelect.test.tsx | 24 --------------
 .../Select/CheckboxSelectSnapshots.test.tsx   | 32 +++++++++++++++++++
 ... => CheckboxSelectSnapshots.test.tsx.snap} | 20 ++++++------
 3 files changed, 42 insertions(+), 34 deletions(-)
 create mode 100644 packages/react-templates/src/components/Select/CheckboxSelectSnapshots.test.tsx
 rename packages/react-templates/src/components/Select/__snapshots__/{CheckboxSelect.test.tsx.snap => CheckboxSelectSnapshots.test.tsx.snap} (92%)

diff --git a/packages/react-templates/src/components/Select/CheckboxSelect.test.tsx b/packages/react-templates/src/components/Select/CheckboxSelect.test.tsx
index d8abe438545..e47a40783fe 100644
--- a/packages/react-templates/src/components/Select/CheckboxSelect.test.tsx
+++ b/packages/react-templates/src/components/Select/CheckboxSelect.test.tsx
@@ -254,27 +254,3 @@ test('displays the badge count when options are selected', async () => {
 
   expect(screen.getByText('1')).toHaveClass(styles.badge, 'pf-m-read');
 });
-
-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();
-});
diff --git a/packages/react-templates/src/components/Select/CheckboxSelectSnapshots.test.tsx b/packages/react-templates/src/components/Select/CheckboxSelectSnapshots.test.tsx
new file mode 100644
index 00000000000..5e305d00042
--- /dev/null
+++ b/packages/react-templates/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();
+});
diff --git a/packages/react-templates/src/components/Select/__snapshots__/CheckboxSelect.test.tsx.snap b/packages/react-templates/src/components/Select/__snapshots__/CheckboxSelectSnapshots.test.tsx.snap
similarity index 92%
rename from packages/react-templates/src/components/Select/__snapshots__/CheckboxSelect.test.tsx.snap
rename to packages/react-templates/src/components/Select/__snapshots__/CheckboxSelectSnapshots.test.tsx.snap
index 8377f574f65..6d8189bf009 100644
--- a/packages/react-templates/src/components/Select/__snapshots__/CheckboxSelect.test.tsx.snap
+++ b/packages/react-templates/src/components/Select/__snapshots__/CheckboxSelectSnapshots.test.tsx.snap
@@ -75,7 +75,7 @@ exports[`opened checkbox select snapshot 1`] = `
   </button>
   <div
     class="pf-v5-c-menu"
-    data-ouia-component-id="OUIA-Generated-Select-31"
+    data-ouia-component-id="OUIA-Generated-Select-3"
     data-ouia-component-type="PF5/Select"
     data-ouia-safe="true"
     data-popper-escaped="true"
@@ -97,7 +97,7 @@ exports[`opened checkbox select snapshot 1`] = `
         >
           <label
             class="pf-v5-c-menu__item"
-            for="pf-random-id-pf-1711574541772lufnl93unqi"
+            for="generated-id"
             tabindex="-1"
           >
             <span
@@ -113,10 +113,10 @@ exports[`opened checkbox select snapshot 1`] = `
                     aria-disabled="false"
                     aria-invalid="false"
                     class="pf-v5-c-check__input"
-                    data-ouia-component-id="OUIA-Generated-Checkbox-26"
+                    data-ouia-component-id="OUIA-Generated-Checkbox-1"
                     data-ouia-component-type="PF5/Checkbox"
                     data-ouia-safe="true"
-                    id="pf-random-id-pf-1711574541772lufnl93unqi"
+                    id="generated-id"
                     type="checkbox"
                   />
                 </span>
@@ -135,7 +135,7 @@ exports[`opened checkbox select snapshot 1`] = `
         >
           <label
             class="pf-v5-c-menu__item"
-            for="pf-random-id-pf-1711574541773h98h0npljkp"
+            for="generated-id"
             tabindex="-1"
           >
             <span
@@ -151,10 +151,10 @@ exports[`opened checkbox select snapshot 1`] = `
                     aria-disabled="false"
                     aria-invalid="false"
                     class="pf-v5-c-check__input"
-                    data-ouia-component-id="OUIA-Generated-Checkbox-27"
+                    data-ouia-component-id="OUIA-Generated-Checkbox-2"
                     data-ouia-component-type="PF5/Checkbox"
                     data-ouia-safe="true"
-                    id="pf-random-id-pf-1711574541773h98h0npljkp"
+                    id="generated-id"
                     type="checkbox"
                   />
                 </span>
@@ -173,7 +173,7 @@ exports[`opened checkbox select snapshot 1`] = `
         >
           <label
             class="pf-v5-c-menu__item"
-            for="pf-random-id-pf-1711574541774wwh6l975ygg"
+            for="generated-id"
             tabindex="-1"
           >
             <span
@@ -189,10 +189,10 @@ exports[`opened checkbox select snapshot 1`] = `
                     aria-disabled="false"
                     aria-invalid="false"
                     class="pf-v5-c-check__input"
-                    data-ouia-component-id="OUIA-Generated-Checkbox-28"
+                    data-ouia-component-id="OUIA-Generated-Checkbox-3"
                     data-ouia-component-type="PF5/Checkbox"
                     data-ouia-safe="true"
-                    id="pf-random-id-pf-1711574541774wwh6l975ygg"
+                    id="generated-id"
                     type="checkbox"
                   />
                 </span>