@patternfly/react-templates 6.0.0-alpha.5 → 6.0.0-alpha.51

package/src/components/Dropdown/SimpleDropdown.tsx

@@ -0,0 +1,139 @@
+import React from 'react';
+import {
+  Dropdown,
+  DropdownItem,
+  DropdownList,
+  DropdownItemProps,
+  DropdownProps
+} from '@patternfly/react-core/dist/esm/components/Dropdown';
+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 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 */
+  value: string | number;
+  /** Callback for when the dropdown item is clicked. */
+  onClick?: (event?: any) => void;
+  /** URL to redirect to when the dropdown item is clicked. */
+  to?: string;
+  /** Flag indicating whether the dropdown item should render as a divider. If true, the item will be rendered without
+   * the dropdown item wrapper.
+   */
+  isDivider?: boolean;
+}
+
+export interface SimpleDropdownProps extends Omit<DropdownProps, 'toggle'>, OUIAProps {
+  /** Initial items of the dropdown. */
+  initialItems?: SimpleDropdownItem[];
+  /** @hide Forwarded ref */
+  innerRef?: React.Ref<any>;
+  /** Flag indicating the dropdown should be disabled. */
+  isDisabled?: boolean;
+  /** Flag indicated whether the dropdown toggle should take up the full width of its parent. */
+  isToggleFullWidth?: boolean;
+  /** Callback triggered when any dropdown item is clicked. */
+  onSelect?: (event?: React.MouseEvent<Element, MouseEvent>, value?: string | number) => void;
+  /** Callback triggered when the dropdown toggle opens or closes. */
+  onToggle?: (nextIsOpen: boolean) => void;
+  /** Flag indicating the dropdown toggle should be focused after a dropdown item is clicked. */
+  shouldFocusToggleOnSelect?: boolean;
+  /** Adds an accessible name to the dropdown toggle. Required when the dropdown toggle does not
+   * have any text content.
+   */
+  toggleAriaLabel?: string;
+  /** Content of the toggle. */
+  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 SimpleDropdownBase: React.FunctionComponent<SimpleDropdownProps> = ({
+  innerRef,
+  initialItems,
+  onSelect: onSelectProp,
+  onToggle: onToggleProp,
+  isDisabled,
+  toggleAriaLabel,
+  toggleContent,
+  isToggleFullWidth,
+  toggleVariant = 'default',
+  toggleWidth,
+  toggleProps,
+  shouldFocusToggleOnSelect,
+  ...props
+}: 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);
+  };
+
+  const onToggle = () => {
+    onToggleProp && onToggleProp(!isOpen);
+    setIsOpen(!isOpen);
+  };
+
+  const dropdownToggle = (toggleRef: React.Ref<MenuToggleElement>) => (
+    <MenuToggle
+      ref={toggleRef}
+      onClick={onToggle}
+      isExpanded={isOpen}
+      isDisabled={isDisabled}
+      variant={toggleVariant}
+      aria-label={toggleAriaLabel}
+      isFullWidth={isToggleFullWidth}
+      style={
+        {
+          width: toggleWidth
+        } as React.CSSProperties
+      }
+      {...toggleProps}
+    >
+      {toggleContent}
+    </MenuToggle>
+  );
+
+  const dropdownSimpleItems = initialItems?.map((item) => {
+    const { content, onClick, to, value, isDivider, ...itemProps } = item;
+
+    return isDivider ? (
+      <Divider component="li" key={value} />
+    ) : (
+      <DropdownItem onClick={onClick} to={to} key={value} value={value} {...itemProps}>
+        {content}
+      </DropdownItem>
+    );
+  });
+
+  return (
+    <Dropdown
+      toggle={dropdownToggle}
+      isOpen={isOpen}
+      onSelect={onSelect}
+      shouldFocusToggleOnSelect={shouldFocusToggleOnSelect}
+      onOpenChange={(isOpen) => {
+        onToggleProp && onToggleProp(isOpen);
+        setIsOpen(isOpen);
+      }}
+      ref={innerRef}
+      {...props}
+    >
+      <DropdownList>{dropdownSimpleItems}</DropdownList>
+    </Dropdown>
+  );
+};
+
+export const SimpleDropdown = React.forwardRef((props: SimpleDropdownProps, ref: React.Ref<any>) => (
+  <SimpleDropdownBase {...props} innerRef={ref} />
+));
+
+SimpleDropdown.displayName = 'SimpleDropdown';

package/src/components/Dropdown/__tests__/SimpleDropdown.test.tsx

@@ -0,0 +1,266 @@
+import * as React from 'react';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+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(<SimpleDropdown toggleContent="Dropdown" />);
+
+    expect(screen.getByRole('button', { name: 'Dropdown' })).not.toBeDisabled();
+  });
+
+  test('Renders dropdown toggle as disabled when isDisabled is true', () => {
+    render(<SimpleDropdown toggleContent="Dropdown" isDisabled />);
+
+    expect(screen.getByRole('button', { name: 'Dropdown' })).toBeDisabled();
+  });
+
+  test('Passes toggleVariant', () => {
+    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(<SimpleDropdown toggleContent="Dropdown" toggleAriaLabel="Aria label content" />);
+
+    expect(screen.getByRole('button')).toHaveAccessibleName('Aria label content');
+  });
+
+  test('Calls onToggle with next isOpen state when dropdown toggle is clicked', async () => {
+    const onToggle = jest.fn();
+    const user = userEvent.setup();
+    render(<SimpleDropdown onToggle={onToggle} toggleContent="Dropdown" />);
+
+    const toggle = screen.getByRole('button', { name: 'Dropdown' });
+    await user.click(toggle);
+    expect(onToggle).toHaveBeenCalledWith(true);
+  });
+
+  test('Does not call onToggle when dropdown toggle is not clicked', async () => {
+    const onToggle = jest.fn();
+    const items = [{ content: 'Action', value: 1 }];
+    const user = userEvent.setup();
+    render(
+      <div>
+        <button>Actual</button>
+        <SimpleDropdown initialItems={items} onToggle={onToggle} toggleContent="Dropdown" />
+      </div>
+    );
+
+    const btn = screen.getByRole('button', { name: 'Actual' });
+    await user.click(btn);
+    expect(onToggle).not.toHaveBeenCalled();
+  });
+
+  test('Calls toggle onSelect when item is clicked', async () => {
+    const onSelect = jest.fn();
+    const items = [{ content: 'Action', value: 1 }];
+    const user = userEvent.setup();
+    render(<SimpleDropdown initialItems={items} toggleContent="Dropdown" onSelect={onSelect} />);
+
+    const toggle = screen.getByRole('button', { name: 'Dropdown' });
+    await user.click(toggle);
+
+    const actionItem = screen.getByRole('menuitem', { name: 'Action' });
+    await user.click(actionItem);
+    expect(onSelect).toHaveBeenCalledTimes(1);
+  });
+
+  test('Does not call toggle onSelect when item is not clicked', async () => {
+    const onSelect = jest.fn();
+    const items = [{ content: 'Action', value: 1 }];
+    const user = userEvent.setup();
+    render(<SimpleDropdown initialItems={items} toggleContent="Dropdown" onSelect={onSelect} />);
+
+    const toggle = screen.getByRole('button', { name: 'Dropdown' });
+    await user.click(toggle);
+    await user.click(toggle);
+    expect(onSelect).not.toHaveBeenCalled();
+  });
+
+  test('Does not pass isToggleFullWidth to menu toggle by default', () => {
+    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(<SimpleDropdown isToggleFullWidth toggleContent="Dropdown" />);
+
+    expect(screen.getByRole('button', { name: 'Dropdown' })).toHaveClass(styles.modifiers.fullWidth);
+  });
+
+  test('Does not focus toggle on item select by default', async () => {
+    const items = [{ content: 'Action', value: 1 }];
+    const user = userEvent.setup();
+    render(<SimpleDropdown initialItems={items} toggleContent="Dropdown" />);
+
+    const toggle = screen.getByRole('button', { name: 'Dropdown' });
+    await user.click(toggle);
+    const actionItem = screen.getByRole('menuitem', { name: 'Action' });
+    await user.click(actionItem);
+
+    expect(toggle).not.toHaveFocus();
+  });
+
+  test('Focuses toggle on item select when shouldFocusToggleOnSelect is true', async () => {
+    const items = [{ content: 'Action', value: 1 }];
+    const user = userEvent.setup();
+    render(<SimpleDropdown shouldFocusToggleOnSelect initialItems={items} toggleContent="Dropdown" />);
+
+    const toggle = screen.getByRole('button', { name: 'Dropdown' });
+    await user.click(toggle);
+    const actionItem = screen.getByRole('menuitem', { name: 'Action' });
+    await user.click(actionItem);
+
+    expect(toggle).toHaveFocus();
+  });
+
+  test('Matches snapshot', () => {
+    const { asFragment } = render(<SimpleDropdown toggleContent="Dropdown" />);
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+});
+
+describe('Dropdown items', () => {
+  test('Renders with items', async () => {
+    const items = [
+      { content: 'Action', value: 1 },
+      { value: 'separator', isDivider: true }
+    ];
+    const user = userEvent.setup();
+    render(<SimpleDropdown initialItems={items} toggleContent="Dropdown" />);
+
+    const toggle = screen.getByRole('button', { name: 'Dropdown' });
+    await user.click(toggle);
+
+    const actionItem = screen.getByRole('menuitem', { name: 'Action' });
+    const dividerItem = screen.getByRole('separator');
+    expect(actionItem).toBeInTheDocument();
+    expect(dividerItem).toBeInTheDocument();
+  });
+
+  test('Renders with a link item', async () => {
+    const items = [{ content: 'Link', value: 1, to: '#' }];
+    const user = userEvent.setup();
+    render(<SimpleDropdown initialItems={items} toggleContent="Dropdown" />);
+
+    const toggle = screen.getByRole('button', { name: 'Dropdown' });
+    await user.click(toggle);
+
+    const linkItem = screen.getByRole('menuitem', { name: 'Link' });
+    expect(linkItem.getAttribute('href')).toBe('#');
+  });
+
+  test('Renders with items not disabled by default', async () => {
+    const items = [{ content: 'Action', value: 1 }];
+    const user = userEvent.setup();
+    render(<SimpleDropdown initialItems={items} toggleContent="Dropdown" />);
+
+    const toggle = screen.getByRole('button', { name: 'Dropdown' });
+    await user.click(toggle);
+
+    const actionItem = screen.getByRole('menuitem', { name: 'Action' });
+    expect(actionItem).not.toBeDisabled();
+  });
+
+  test('Renders with a disabled item', async () => {
+    const items = [{ content: 'Action', value: 1, isDisabled: true }];
+    const user = userEvent.setup();
+    render(<SimpleDropdown initialItems={items} toggleContent="Dropdown" />);
+
+    const toggle = screen.getByRole('button', { name: 'Dropdown' });
+    await user.click(toggle);
+
+    const actionItem = screen.getByRole('menuitem', { name: 'Action' });
+    expect(actionItem).toBeDisabled();
+  });
+
+  test('Spreads props on item', async () => {
+    const items = [{ content: 'Action', value: 1, id: 'Test' }];
+    const user = userEvent.setup();
+    render(<SimpleDropdown initialItems={items} toggleContent="Dropdown" />);
+
+    const toggle = screen.getByRole('button', { name: 'Dropdown' });
+    await user.click(toggle);
+
+    const actionItem = screen.getByRole('menuitem', { name: 'Action' });
+    expect(actionItem.getAttribute('id')).toBe('Test');
+  });
+
+  test('Calls item onClick when clicked', async () => {
+    const onClick = jest.fn();
+    const items = [{ content: 'Action', value: 1, onClick }];
+    const user = userEvent.setup();
+    render(<SimpleDropdown initialItems={items} toggleContent="Dropdown" />);
+
+    const toggle = screen.getByRole('button', { name: 'Dropdown' });
+    await user.click(toggle);
+
+    const actionItem = screen.getByRole('menuitem', { name: 'Action' });
+    await user.click(actionItem);
+    expect(onClick).toHaveBeenCalledTimes(1);
+  });
+
+  test('Does not call item onClick when not clicked', async () => {
+    const onClick = jest.fn();
+    const items = [
+      { content: 'Action', value: 1, onClick },
+      { content: 'Action 2', value: 2 }
+    ];
+    const user = userEvent.setup();
+    render(<SimpleDropdown initialItems={items} toggleContent="Dropdown" />);
+
+    const toggle = screen.getByRole('button', { name: 'Dropdown' });
+    await user.click(toggle);
+
+    const actionItem = screen.getByRole('menuitem', { name: 'Action 2' });
+    await user.click(actionItem);
+    expect(onClick).not.toHaveBeenCalled();
+  });
+
+  test('Does not call item onClick when clicked and item is disabled', async () => {
+    const onClick = jest.fn();
+    const items = [{ content: 'Action', value: 1, onClick, isDisabled: true }];
+    const user = userEvent.setup();
+    render(<SimpleDropdown initialItems={items} toggleContent="Dropdown" />);
+
+    const toggle = screen.getByRole('button', { name: 'Dropdown' });
+    await user.click(toggle);
+
+    const actionItem = screen.getByRole('menuitem', { name: 'Action' });
+    await user.click(actionItem);
+    expect(onClick).not.toHaveBeenCalled();
+  });
+
+  test('Matches snapshot', async () => {
+    const items = [
+      { content: 'Action', value: 1, ouiaId: '1' },
+      { value: 'separator', isDivider: true, ouiaId: '2' },
+      { content: 'Link', value: 'separator', to: '#', ouiaId: '3' }
+    ];
+    const user = userEvent.setup();
+    const { asFragment } = render(<SimpleDropdown ouiaId={4} initialItems={items} toggleContent="Dropdown" />);
+
+    const toggle = screen.getByRole('button', { name: 'Dropdown' });
+    await user.click(toggle);
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+});

package/src/components/Dropdown/__tests__/__snapshots__/SimpleDropdown.test.tsx.snap

@@ -0,0 +1,81 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Dropdown items Matches snapshot 1`] = `
+<DocumentFragment>
+  <button
+    aria-expanded="true"
+    class="pf-v6-c-menu-toggle pf-m-expanded"
+    data-ouia-component-id="OUIA-Generated-MenuToggle-default-23"
+    data-ouia-component-type="PF6/MenuToggle"
+    data-ouia-safe="true"
+    type="button"
+  >
+    <span
+      class="pf-v6-c-menu-toggle__text"
+    >
+      Dropdown
+    </span>
+    <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>
+</DocumentFragment>
+`;
+
+exports[`Dropdown toggle Matches snapshot 1`] = `
+<DocumentFragment>
+  <button
+    aria-expanded="false"
+    class="pf-v6-c-menu-toggle"
+    data-ouia-component-id="OUIA-Generated-MenuToggle-default-14"
+    data-ouia-component-type="PF6/MenuToggle"
+    data-ouia-safe="true"
+    type="button"
+  >
+    <span
+      class="pf-v6-c-menu-toggle__text"
+    >
+      Dropdown
+    </span>
+    <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>
+</DocumentFragment>
+`;

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

@@ -0,0 +1,24 @@
+---
+id: Dropdown
+section: components
+subsection: menus
+template: true
+beta: true
+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, 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="./SimpleDropdownExample.tsx"
+
+```

package/src/components/Dropdown/examples/SimpleDropdownExample.tsx

@@ -0,0 +1,53 @@
+import React from 'react';
+import { Checkbox, Flex, FlexItem } from '@patternfly/react-core';
+import { SimpleDropdown, SimpleDropdownItem } from '@patternfly/react-templates';
+import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
+
+export const SimpleDropdownExample: React.FunctionComponent = () => {
+  const [isDisabled, setIsDisabled] = React.useState(false);
+
+  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
+    { content: 'Link', value: 2, to: '#', onClick: (event: any) => event.preventDefault() },
+    { content: 'Disabled Action', value: 3, isDisabled: true },
+    { value: 'separator', isDivider: true },
+    // eslint-disable-next-line no-console
+    { content: 'Second action', value: 4, onClick: () => console.log('Second action clicked') }
+  ];
+
+  return (
+    <React.Fragment>
+      <Checkbox
+        id="simple-example-disabled-toggle"
+        label="Disable simple dropdown toggles"
+        isChecked={isDisabled}
+        onChange={(_event: React.FormEvent<HTMLInputElement>, checked: boolean) => setIsDisabled(checked)}
+        style={{ marginBottom: 20 }}
+      />
+      <Flex gap={{ default: 'gapLg' }}>
+        <FlexItem>
+          <SimpleDropdown initialItems={items} isDisabled={isDisabled} toggleContent="Dropdown" />
+        </FlexItem>
+        <FlexItem>
+          <SimpleDropdown
+            toggleVariant="plainText"
+            initialItems={items}
+            isDisabled={isDisabled}
+            toggleContent="Dropdown with plainText styling"
+          />
+        </FlexItem>
+        <FlexItem>
+          <SimpleDropdown
+            toggleVariant="plain"
+            initialItems={items}
+            isDisabled={isDisabled}
+            toggleContent={<EllipsisVIcon aria-hidden="true" />}
+            toggleAriaLabel="Plain dropdown toggle"
+          />
+        </FlexItem>
+      </Flex>
+    </React.Fragment>
+  );
+};

package/src/components/Dropdown/index.ts

@@ -0,0 +1 @@
+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"