docs: demo restoreFocus with controlled menu [ DO NOT MERGE! ]

packages/menu/demo/menu.stories.tsx

@@ -63,6 +63,54 @@ export const Controlled: Story = {
  },
  args: {
  isExpanded: false,
+ restoreFocus: true,
+ focusedValue: 'plant-01',
+ selectedItems: [{ value: 'Cherry', type: 'checkbox' }]
+ }
+};
+
+export const ControlledManagedFocus: Story = {
+ render: function Render(args) {
+ const updateArgs = useArgs()[1];
+ const triggerRef = React.useRef<HTMLButtonElement>(null);
+
+ return (
+ <MenuStory
+ {...args}
+ triggerRef={triggerRef}
+ onChange={_args => {
+ // eslint-disable-next-line no-console
+ console.log('onChange:', _args);
+
+ // eslint-disable-next-line @typescript-eslint/no-unused-vars
+ const { type, isExpanded, ...rest } = _args;
+ const { selectedItems } = rest;
+ const nextArgs: typeof rest & { isExpanded?: boolean } = rest;
+
+ const lastItem = selectedItems?.[selectedItems.length - 1];
+ const isNonCheckboxItem = !selectedItems || lastItem?.type !== 'checkbox';
+
+ if (isExpanded !== undefined && isNonCheckboxItem) {
+ nextArgs.isExpanded = isExpanded;
+ }
+
+ if (!args.restoreFocus && nextArgs.isExpanded === false && triggerRef.current) {
+ triggerRef.current.focus();
+ }
+ updateArgs(nextArgs);
+ }}
+ />
+ );
+ },
+ name: 'Controlled + Managed Focus',
+ argTypes: {
+ defaultFocusedValue: { control: false },
+ defaultExpanded: { control: false },
+ focusedValue: { control: { type: 'text' } }
+ },
+ args: {
+ isExpanded: false,
+ restoreFocus: false,
  focusedValue: 'plant-01',
  selectedItems: [{ value: 'Cherry', type: 'checkbox' }]
  }

packages/menu/demo/stories/MenuStory.tsx

@@ -91,60 +91,71 @@ const Component = ({
  const selectedValues = selection.map(item => item.value);
 
  return (
- <div className="relative">
- <button className="px-2 py-1" type="button" {...getTriggerProps()}>
- Produce
- </button>
-
- <ul
- className={classNames('border border-grey-400 border-solid w-32 absolute', {
- invisible: !isExpanded
- })}
- {...getMenuProps()}
- >
- {items.map((item: MenuItem) => {
- if ('items' in item) {
- return (
- <li key={item.label} role="none">
- <b aria-hidden="true" className="block mt-1 ms-1">
- {item.label}
- </b>
- <hr aria-hidden="true" className="my-1 border-grey-200" {...getSeparatorProps()} />
- <ul {...getItemGroupProps({ 'aria-label': item.label })}>
- {item.items.map(groupItem => (
- <Item
- key={groupItem.value}
- item={{ ...groupItem }}
- getItemProps={getItemProps}
- focusedValue={focusedValue}
- isSelected={selectedValues.includes(groupItem.value)}
+ <div>
+ <div>
+ <div className="relative">
+ <button className="px-2 py-1" type="button" {...getTriggerProps()}>
+ Produce
+ </button>
+
+ <ul
+ className={classNames('bg-white border border-grey-400 border-solid w-32 absolute', {
+ invisible: !isExpanded
+ })}
+ {...getMenuProps()}
+ >
+ {items.map((item: MenuItem) => {
+ if ('items' in item) {
+ return (
+ <li key={item.label} role="none">
+ <b aria-hidden="true" className="block mt-1 ms-1">
+ {item.label}
+ </b>
+ <hr
+ aria-hidden="true"
+ className="my-1 border-grey-200"
+ {...getSeparatorProps()}
  />
- ))}
- </ul>
- </li>
- );
- }
-
- if ('separator' in item) {
- return (
- <li
- key={item.value}
- className="my-1 border-0 border-b border-solid border-grey-200"
- {...getSeparatorProps()}
- />
- );
- }
-
- return (
- <Item
- key={item.value}
- item={item}
- focusedValue={focusedValue}
- getItemProps={getItemProps}
- />
- );
- })}
- </ul>
+ <ul {...getItemGroupProps({ 'aria-label': item.label })}>
+ {item.items.map(groupItem => (
+ <Item
+ key={groupItem.value}
+ item={{ ...groupItem }}
+ getItemProps={getItemProps}
+ focusedValue={focusedValue}
+ isSelected={selectedValues.includes(groupItem.value)}
+ />
+ ))}
+ </ul>
+ </li>
+ );
+ }
+
+ if ('separator' in item) {
+ return (
+ <li
+ key={item.value}
+ className="my-1 border-0 border-b border-solid border-grey-200"
+ {...getSeparatorProps()}
+ />
+ );
+ }
+
+ return (
+ <Item
+ key={item.value}
+ item={item}
+ focusedValue={focusedValue}
+ getItemProps={getItemProps}
+ />
+ );
+ })}
+ </ul>
+ </div>
+ <div>
+ <button style={{ marginTop: 80 }}>click me</button>
+ </div>
+ </div>
  </div>
  );
 };
@@ -167,16 +178,16 @@ interface IArgs extends MenuContainerProps {
  as: 'hook' | 'container';
 }
 
-export const MenuStory: StoryFn<IArgs> = ({ as, ...props }) => {
- const triggerRef = useRef<HTMLButtonElement>(null);
+export const MenuStory: StoryFn<IArgs> = ({ as, triggerRef, ...props }) => {
+ const _triggerRef = useRef<HTMLButtonElement>(null);
  const menuRef = useRef<HTMLUListElement>(null);
 
  switch (as) {
  case 'container':
- return <Container {...props} triggerRef={triggerRef} menuRef={menuRef} />;
+ return <Container {...props} triggerRef={triggerRef || _triggerRef} menuRef={menuRef} />;
 
  case 'hook':
  default:
- return <Hook {...props} triggerRef={triggerRef} menuRef={menuRef} />;
+ return <Hook {...props} triggerRef={triggerRef || _triggerRef} menuRef={menuRef} />;
  }
 };

packages/menu/src/MenuContainer.tsx

@@ -29,5 +29,12 @@ MenuContainer.propTypes = {
  defaultExpanded: PropTypes.bool,
  selectedItems: PropTypes.arrayOf(PropTypes.any),
  focusedValue: PropTypes.oneOfType([PropTypes.string]),
- defaultFocusedValue: PropTypes.oneOfType([PropTypes.string])
+ defaultFocusedValue: PropTypes.oneOfType([PropTypes.string]),
+ restoreFocus: PropTypes.bool
+};
+
+MenuContainer.defaultProps = {
+ defaultExpanded: false,
+ restoreFocus: true,
+ rtl: false
 };

packages/menu/src/types.ts

@@ -66,6 +66,8 @@ export interface IUseMenuProps<T = HTMLButtonElement, M = HTMLElement> {
  focusedValue?: string | null;
  /** Determines focused value on menu initialization */
  defaultFocusedValue?: string;
+ /** Returns focus to the trigger when the menu is collapsed */
+ restoreFocus?: boolean;
  /** Sets the selected values in a controlled menu */
  selectedItems?: ISelectedItem[];
  /**