@patternfly/react-templates 1.1.0-prerelease.9 → 1.1.1

package/src/components/Dropdown/{DropdownSimple.tsx → SimpleDropdown.tsx}

@@ -3,13 +3,14 @@ import {
   Dropdown,
   DropdownItem,
   DropdownList,
-  DropdownItemProps
+  DropdownItemProps,
+  DropdownProps
 } from '@patternfly/react-core/dist/esm/components/Dropdown';
-import { MenuToggle, MenuToggleElement } from '@patternfly/react-core/dist/esm/components/MenuToggle';
+import { MenuToggle, MenuToggleElement, MenuToggleProps } from '@patternfly/react-core/dist/esm/components/MenuToggle';
 import { Divider } from '@patternfly/react-core/dist/esm/components/Divider';
 import { OUIAProps } from '@patternfly/react-core/dist/esm/helpers';
 
-export interface DropdownSimpleItem extends Omit<DropdownItemProps, 'content'> {
+export interface SimpleDropdownItem extends Omit<DropdownItemProps, 'content'> {
   /** Content of the dropdown item. If the isDivider prop is true, this prop will be ignored. */
   content?: React.ReactNode;
   /** Unique identifier for the dropdown item, which is used in the dropdown onSelect callback */
@@ -24,9 +25,9 @@ export interface DropdownSimpleItem extends Omit<DropdownItemProps, 'content'> {
   isDivider?: boolean;
 }
 
-export interface DropdownSimpleProps extends OUIAProps {
+export interface SimpleDropdownProps extends Omit<DropdownProps, 'toggle'>, OUIAProps {
   /** Initial items of the dropdown. */
-  initialItems?: DropdownSimpleItem[];
+  initialItems?: SimpleDropdownItem[];
   /** @hide Forwarded ref */
   innerRef?: React.Ref<any>;
   /** Flag indicating the dropdown should be disabled. */
@@ -47,9 +48,13 @@ export interface DropdownSimpleProps extends OUIAProps {
   toggleContent: React.ReactNode;
   /** Variant style of the dropdown toggle. */
   toggleVariant?: 'default' | 'plain' | 'plainText';
+  /** Width of the toggle. */
+  toggleWidth?: string;
+  /** Additional props passed to the toggle. */
+  toggleProps?: MenuToggleProps;
 }
 
-const DropdownSimpleBase: React.FunctionComponent<DropdownSimpleProps> = ({
+const SimpleDropdownBase: React.FunctionComponent<SimpleDropdownProps> = ({
   innerRef,
   initialItems,
   onSelect: onSelectProp,
@@ -59,13 +64,16 @@ const DropdownSimpleBase: React.FunctionComponent<DropdownSimpleProps> = ({
   toggleContent,
   isToggleFullWidth,
   toggleVariant = 'default',
+  toggleWidth,
+  toggleProps,
   shouldFocusToggleOnSelect,
   ...props
-}: DropdownSimpleProps) => {
+}: SimpleDropdownProps) => {
   const [isOpen, setIsOpen] = React.useState(false);
 
   const onSelect = (event: React.MouseEvent<Element, MouseEvent>, value: string | number) => {
     onSelectProp && onSelectProp(event, value);
+    onToggleProp && onToggleProp(false);
     setIsOpen(false);
   };
 
@@ -83,6 +91,12 @@ const DropdownSimpleBase: React.FunctionComponent<DropdownSimpleProps> = ({
       variant={toggleVariant}
       aria-label={toggleAriaLabel}
       isFullWidth={isToggleFullWidth}
+      style={
+        {
+          width: toggleWidth
+        } as React.CSSProperties
+      }
+      {...toggleProps}
     >
       {toggleContent}
     </MenuToggle>
@@ -106,7 +120,10 @@ const DropdownSimpleBase: React.FunctionComponent<DropdownSimpleProps> = ({
       isOpen={isOpen}
       onSelect={onSelect}
       shouldFocusToggleOnSelect={shouldFocusToggleOnSelect}
-      onOpenChange={(isOpen) => setIsOpen(isOpen)}
+      onOpenChange={(isOpen) => {
+        onToggleProp && onToggleProp(isOpen);
+        setIsOpen(isOpen);
+      }}
       ref={innerRef}
       {...props}
     >
@@ -115,8 +132,8 @@ const DropdownSimpleBase: React.FunctionComponent<DropdownSimpleProps> = ({
   );
 };
 
-export const DropdownSimple = React.forwardRef((props: DropdownSimpleProps, ref: React.Ref<any>) => (
-  <DropdownSimpleBase {...props} innerRef={ref} />
+export const SimpleDropdown = React.forwardRef((props: SimpleDropdownProps, ref: React.Ref<any>) => (
+  <SimpleDropdownBase {...props} innerRef={ref} />
 ));
 
-DropdownSimple.displayName = 'DropdownSimple';
+SimpleDropdown.displayName = 'SimpleDropdown';

package/src/components/Dropdown/__tests__/{DropdownSimple.test.tsx → SimpleDropdown.test.tsx}

@@ -1,30 +1,42 @@
 import * as React from 'react';
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import { DropdownSimple } from '../DropdownSimple';
+import { SimpleDropdown } from '../SimpleDropdown';
 import styles from '@patternfly/react-styles/css/components/MenuToggle/menu-toggle';
 
 describe('Dropdown toggle', () => {
   test('Renders dropdown toggle as not disabled when isDisabled is not true', () => {
-    render(<DropdownSimple toggleContent="Dropdown" />);
+    render(<SimpleDropdown toggleContent="Dropdown" />);
 
     expect(screen.getByRole('button', { name: 'Dropdown' })).not.toBeDisabled();
   });
 
   test('Renders dropdown toggle as disabled when isDisabled is true', () => {
-    render(<DropdownSimple toggleContent="Dropdown" isDisabled />);
+    render(<SimpleDropdown toggleContent="Dropdown" isDisabled />);
 
     expect(screen.getByRole('button', { name: 'Dropdown' })).toBeDisabled();
   });
 
   test('Passes toggleVariant', () => {
-    render(<DropdownSimple toggleContent="Dropdown" toggleVariant="plain" />);
+    render(<SimpleDropdown toggleContent="Dropdown" toggleVariant="plain" />);
 
     expect(screen.getByRole('button', { name: 'Dropdown' })).toHaveClass(styles.modifiers.plain);
   });
 
+  test('Passes toggleWidth', () => {
+    render(<SimpleDropdown toggleContent="Dropdown" toggleWidth="500px" />);
+
+    expect(screen.getByRole('button', { name: 'Dropdown' })).toHaveAttribute('style', 'width: 500px;');
+  });
+
+  test('Passes additional toggleProps', () => {
+    render(<SimpleDropdown toggleContent="Dropdown" toggleProps={{ id: 'toggle' }} />);
+
+    expect(screen.getByRole('button', { name: 'Dropdown' })).toHaveAttribute('id', 'toggle');
+  });
+
   test('Passes toggleAriaLabel', () => {
-    render(<DropdownSimple toggleContent="Dropdown" toggleAriaLabel="Aria label content" />);
+    render(<SimpleDropdown toggleContent="Dropdown" toggleAriaLabel="Aria label content" />);
 
     expect(screen.getByRole('button')).toHaveAccessibleName('Aria label content');
   });
@@ -32,7 +44,7 @@ describe('Dropdown toggle', () => {
   test('Calls onToggle with next isOpen state when dropdown toggle is clicked', async () => {
     const onToggle = jest.fn();
     const user = userEvent.setup();
-    render(<DropdownSimple onToggle={onToggle} toggleContent="Dropdown" />);
+    render(<SimpleDropdown onToggle={onToggle} toggleContent="Dropdown" />);
 
     const toggle = screen.getByRole('button', { name: 'Dropdown' });
     await user.click(toggle);
@@ -46,7 +58,7 @@ describe('Dropdown toggle', () => {
     render(
       <div>
         <button>Actual</button>
-        <DropdownSimple initialItems={items} onToggle={onToggle} toggleContent="Dropdown" />
+        <SimpleDropdown initialItems={items} onToggle={onToggle} toggleContent="Dropdown" />
       </div>
     );
 
@@ -59,7 +71,7 @@ describe('Dropdown toggle', () => {
     const onSelect = jest.fn();
     const items = [{ content: 'Action', value: 1 }];
     const user = userEvent.setup();
-    render(<DropdownSimple initialItems={items} toggleContent="Dropdown" onSelect={onSelect} />);
+    render(<SimpleDropdown initialItems={items} toggleContent="Dropdown" onSelect={onSelect} />);
 
     const toggle = screen.getByRole('button', { name: 'Dropdown' });
     await user.click(toggle);
@@ -73,7 +85,7 @@ describe('Dropdown toggle', () => {
     const onSelect = jest.fn();
     const items = [{ content: 'Action', value: 1 }];
     const user = userEvent.setup();
-    render(<DropdownSimple initialItems={items} toggleContent="Dropdown" onSelect={onSelect} />);
+    render(<SimpleDropdown initialItems={items} toggleContent="Dropdown" onSelect={onSelect} />);
 
     const toggle = screen.getByRole('button', { name: 'Dropdown' });
     await user.click(toggle);
@@ -82,13 +94,13 @@ describe('Dropdown toggle', () => {
   });
 
   test('Does not pass isToggleFullWidth to menu toggle by default', () => {
-    render(<DropdownSimple toggleContent="Dropdown" />);
+    render(<SimpleDropdown toggleContent="Dropdown" />);
 
     expect(screen.getByRole('button', { name: 'Dropdown' })).not.toHaveClass(styles.modifiers.fullWidth);
   });
 
   test('Passes isToggleFullWidth to menu toggle when passed in', () => {
-    render(<DropdownSimple isToggleFullWidth toggleContent="Dropdown" />);
+    render(<SimpleDropdown isToggleFullWidth toggleContent="Dropdown" />);
 
     expect(screen.getByRole('button', { name: 'Dropdown' })).toHaveClass(styles.modifiers.fullWidth);
   });
@@ -96,7 +108,7 @@ describe('Dropdown toggle', () => {
   test('Does not focus toggle on item select by default', async () => {
     const items = [{ content: 'Action', value: 1 }];
     const user = userEvent.setup();
-    render(<DropdownSimple initialItems={items} toggleContent="Dropdown" />);
+    render(<SimpleDropdown initialItems={items} toggleContent="Dropdown" />);
 
     const toggle = screen.getByRole('button', { name: 'Dropdown' });
     await user.click(toggle);
@@ -109,7 +121,7 @@ describe('Dropdown toggle', () => {
   test('Focuses toggle on item select when shouldFocusToggleOnSelect is true', async () => {
     const items = [{ content: 'Action', value: 1 }];
     const user = userEvent.setup();
-    render(<DropdownSimple shouldFocusToggleOnSelect initialItems={items} toggleContent="Dropdown" />);
+    render(<SimpleDropdown shouldFocusToggleOnSelect initialItems={items} toggleContent="Dropdown" />);
 
     const toggle = screen.getByRole('button', { name: 'Dropdown' });
     await user.click(toggle);
@@ -120,7 +132,7 @@ describe('Dropdown toggle', () => {
   });
 
   test('Matches snapshot', () => {
-    const { asFragment } = render(<DropdownSimple toggleContent="Dropdown" />);
+    const { asFragment } = render(<SimpleDropdown toggleContent="Dropdown" />);
 
     expect(asFragment()).toMatchSnapshot();
   });
@@ -133,7 +145,7 @@ describe('Dropdown items', () => {
       { value: 'separator', isDivider: true }
     ];
     const user = userEvent.setup();
-    render(<DropdownSimple initialItems={items} toggleContent="Dropdown" />);
+    render(<SimpleDropdown initialItems={items} toggleContent="Dropdown" />);
 
     const toggle = screen.getByRole('button', { name: 'Dropdown' });
     await user.click(toggle);
@@ -147,7 +159,7 @@ describe('Dropdown items', () => {
   test('Renders with a link item', async () => {
     const items = [{ content: 'Link', value: 1, to: '#' }];
     const user = userEvent.setup();
-    render(<DropdownSimple initialItems={items} toggleContent="Dropdown" />);
+    render(<SimpleDropdown initialItems={items} toggleContent="Dropdown" />);
 
     const toggle = screen.getByRole('button', { name: 'Dropdown' });
     await user.click(toggle);
@@ -159,7 +171,7 @@ describe('Dropdown items', () => {
   test('Renders with items not disabled by default', async () => {
     const items = [{ content: 'Action', value: 1 }];
     const user = userEvent.setup();
-    render(<DropdownSimple initialItems={items} toggleContent="Dropdown" />);
+    render(<SimpleDropdown initialItems={items} toggleContent="Dropdown" />);
 
     const toggle = screen.getByRole('button', { name: 'Dropdown' });
     await user.click(toggle);
@@ -171,7 +183,7 @@ describe('Dropdown items', () => {
   test('Renders with a disabled item', async () => {
     const items = [{ content: 'Action', value: 1, isDisabled: true }];
     const user = userEvent.setup();
-    render(<DropdownSimple initialItems={items} toggleContent="Dropdown" />);
+    render(<SimpleDropdown initialItems={items} toggleContent="Dropdown" />);
 
     const toggle = screen.getByRole('button', { name: 'Dropdown' });
     await user.click(toggle);
@@ -183,7 +195,7 @@ describe('Dropdown items', () => {
   test('Spreads props on item', async () => {
     const items = [{ content: 'Action', value: 1, id: 'Test' }];
     const user = userEvent.setup();
-    render(<DropdownSimple initialItems={items} toggleContent="Dropdown" />);
+    render(<SimpleDropdown initialItems={items} toggleContent="Dropdown" />);
 
     const toggle = screen.getByRole('button', { name: 'Dropdown' });
     await user.click(toggle);
@@ -196,7 +208,7 @@ describe('Dropdown items', () => {
     const onClick = jest.fn();
     const items = [{ content: 'Action', value: 1, onClick }];
     const user = userEvent.setup();
-    render(<DropdownSimple initialItems={items} toggleContent="Dropdown" />);
+    render(<SimpleDropdown initialItems={items} toggleContent="Dropdown" />);
 
     const toggle = screen.getByRole('button', { name: 'Dropdown' });
     await user.click(toggle);
@@ -213,7 +225,7 @@ describe('Dropdown items', () => {
       { content: 'Action 2', value: 2 }
     ];
     const user = userEvent.setup();
-    render(<DropdownSimple initialItems={items} toggleContent="Dropdown" />);
+    render(<SimpleDropdown initialItems={items} toggleContent="Dropdown" />);
 
     const toggle = screen.getByRole('button', { name: 'Dropdown' });
     await user.click(toggle);
@@ -227,7 +239,7 @@ describe('Dropdown items', () => {
     const onClick = jest.fn();
     const items = [{ content: 'Action', value: 1, onClick, isDisabled: true }];
     const user = userEvent.setup();
-    render(<DropdownSimple initialItems={items} toggleContent="Dropdown" />);
+    render(<SimpleDropdown initialItems={items} toggleContent="Dropdown" />);
 
     const toggle = screen.getByRole('button', { name: 'Dropdown' });
     await user.click(toggle);
@@ -244,7 +256,7 @@ describe('Dropdown items', () => {
       { content: 'Link', value: 'separator', to: '#', ouiaId: '3' }
     ];
     const user = userEvent.setup();
-    const { asFragment } = render(<DropdownSimple ouiaId={4} initialItems={items} toggleContent="Dropdown" />);
+    const { asFragment } = render(<SimpleDropdown ouiaId={4} initialItems={items} toggleContent="Dropdown" />);
 
     const toggle = screen.getByRole('button', { name: 'Dropdown' });
     await user.click(toggle);

package/src/components/Dropdown/__tests__/__snapshots__/{DropdownSimple.test.tsx.snap → SimpleDropdown.test.tsx.snap}

@@ -5,6 +5,9 @@ exports[`Dropdown items Matches snapshot 1`] = `
   <button
     aria-expanded="true"
     class="pf-v5-c-menu-toggle pf-m-expanded"
+    data-ouia-component-id="OUIA-Generated-MenuToggle-default-23"
+    data-ouia-component-type="PF5/MenuToggle"
+    data-ouia-safe="true"
     type="button"
   >
     <span
@@ -114,6 +117,9 @@ exports[`Dropdown toggle Matches snapshot 1`] = `
   <button
     aria-expanded="false"
     class="pf-v5-c-menu-toggle"
+    data-ouia-component-id="OUIA-Generated-MenuToggle-default-14"
+    data-ouia-component-type="PF5/MenuToggle"
+    data-ouia-safe="true"
     type="button"
   >
     <span

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

@@ -4,33 +4,21 @@ section: components
 subsection: menus
 template: true
 beta: true
-propComponents: ['DropdownSimple', 'DropdownSimpleItem']
+propComponents: ['SimpleDropdown', 'SimpleDropdownItem']
 ---
 
 Note: Templates live in their own package at [@patternfly/react-templates](https://www.npmjs.com/package/@patternfly/react-templates)!
 
 For custom use cases, please see the dropdown component suite from [@patternfly/react-core](https://www.npmjs.com/package/@patternfly/react-core).
 
-import {
-Checkbox,
-Divider,
-Dropdown,
-DropdownItem,
-DropdownList,
-DropdownItemProps,
-Flex,
-FlexItem,
-MenuToggle,
-MenuToggleElement,
-OUIAProps
-} from '@patternfly/react-core';
-import { DropdownSimple, DropdownSimpleItem } from '@patternfly/react-templates';
+import { Checkbox, Flex, FlexItem } from '@patternfly/react-core';
+import { SimpleDropdown } from '@patternfly/react-templates';
 import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
 
 ## Examples
 
 ### Simple
 
-```ts file="./DropdownSimpleExample.tsx"
+```ts file="./SimpleDropdownExample.tsx"
 
 ```

package/src/components/Dropdown/examples/{DropdownSimpleExample.tsx → SimpleDropdownExample.tsx}

@@ -1,12 +1,12 @@
 import React from 'react';
 import { Checkbox, Flex, FlexItem } from '@patternfly/react-core';
-import { DropdownSimple, DropdownSimpleItem } from '@patternfly/react-templates';
+import { SimpleDropdown, SimpleDropdownItem } from '@patternfly/react-templates';
 import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
 
-export const DropdownSimpleExample: React.FunctionComponent = () => {
+export const SimpleDropdownExample: React.FunctionComponent = () => {
   const [isDisabled, setIsDisabled] = React.useState(false);
 
-  const items: DropdownSimpleItem[] = [
+  const items: SimpleDropdownItem[] = [
     // eslint-disable-next-line no-console
     { content: 'Action', value: 1, onClick: () => console.log('Action clicked') },
     // Prevent default click behavior on link for example purposes
@@ -21,17 +21,17 @@ export const DropdownSimpleExample: React.FunctionComponent = () => {
     <React.Fragment>
       <Checkbox
         id="simple-example-disabled-toggle"
-        label="Disable dropdown simple toggles"
+        label="Disable simple dropdown toggles"
         isChecked={isDisabled}
         onChange={(_event: React.FormEvent<HTMLInputElement>, checked: boolean) => setIsDisabled(checked)}
         style={{ marginBottom: 20 }}
       />
       <Flex gap={{ default: 'gapLg' }}>
         <FlexItem>
-          <DropdownSimple initialItems={items} isDisabled={isDisabled} toggleContent="Dropdown" />
+          <SimpleDropdown initialItems={items} isDisabled={isDisabled} toggleContent="Dropdown" />
         </FlexItem>
         <FlexItem>
-          <DropdownSimple
+          <SimpleDropdown
             toggleVariant="plainText"
             initialItems={items}
             isDisabled={isDisabled}
@@ -39,7 +39,7 @@ export const DropdownSimpleExample: React.FunctionComponent = () => {
           />
         </FlexItem>
         <FlexItem>
-          <DropdownSimple
+          <SimpleDropdown
             toggleVariant="plain"
             initialItems={items}
             isDisabled={isDisabled}

package/src/components/Dropdown/index.ts

@@ -1 +1 @@
-export * from './DropdownSimple';
+export * from './SimpleDropdown';

package/src/components/Select/CheckboxSelect.tsx

@@ -3,10 +3,12 @@ import {
   Badge,
   MenuToggle,
   MenuToggleElement,
+  MenuToggleProps,
   Select,
   SelectList,
   SelectOption,
-  SelectOptionProps
+  SelectOptionProps,
+  SelectProps
 } from '@patternfly/react-core';
 
 export interface CheckboxSelectOption extends Omit<SelectOptionProps, 'content'> {
@@ -16,7 +18,7 @@ export interface CheckboxSelectOption extends Omit<SelectOptionProps, 'content'>
   value: string | number;
 }
 
-export interface CheckboxSelectProps {
+export interface CheckboxSelectProps extends Omit<SelectProps, 'toggle'> {
   /** @hide Forwarded ref */
   innerRef?: React.Ref<any>;
   /** Initial options of the select. */
@@ -27,8 +29,12 @@ export interface CheckboxSelectProps {
   onToggle?: (nextIsOpen: boolean) => void;
   /** Flag indicating the select should be disabled. */
   isDisabled?: boolean;
-  /** Content of the toggle. Defaults to the selected option. */
+  /** Content of the toggle. Defaults to a string with badge count of selected options. */
   toggleContent?: React.ReactNode;
+  /** Width of the toggle. */
+  toggleWidth?: string;
+  /** Additional props passed to the toggle. */
+  toggleProps?: MenuToggleProps;
 }
 
 const CheckboxSelectBase: React.FunctionComponent<CheckboxSelectProps> = ({
@@ -38,16 +44,23 @@ const CheckboxSelectBase: React.FunctionComponent<CheckboxSelectProps> = ({
   onSelect: passedOnSelect,
   onToggle,
   toggleContent,
+  toggleWidth = '200px',
+  toggleProps,
   ...props
 }: CheckboxSelectProps) => {
   const [isOpen, setIsOpen] = React.useState(false);
   const [selected, setSelected] = React.useState<string[]>([]);
 
+  React.useEffect(() => {
+    const selectedOptions = initialOptions?.filter((option) => option.selected);
+    setSelected(selectedOptions?.map((selectedOption) => String(selectedOption.value)) ?? []);
+  }, [initialOptions]);
+
   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}>
+      <SelectOption value={value} key={value} hasCheckbox isSelected={isSelected} {...props}>
         {content}
       </SelectOption>
     );
@@ -83,9 +96,10 @@ const CheckboxSelectBase: React.FunctionComponent<CheckboxSelectProps> = ({
       isDisabled={isDisabled}
       style={
         {
-          width: '200px'
+          width: toggleWidth
         } as React.CSSProperties
       }
+      {...toggleProps}
     >
       {toggleContent || defaultToggleContent}
     </MenuToggle>
@@ -93,11 +107,13 @@ const CheckboxSelectBase: React.FunctionComponent<CheckboxSelectProps> = ({
 
   return (
     <Select
-      id="checkbox-select"
       isOpen={isOpen}
       selected={selected}
       onSelect={onSelect}
-      onOpenChange={(isOpen) => setIsOpen(isOpen)}
+      onOpenChange={(isOpen) => {
+        onToggle && onToggle(isOpen);
+        setIsOpen(isOpen);
+      }}
       toggle={toggle}
       ref={innerRef}
       role="menu"