Some clean up

Author: TylerJDev

packages/react/src/ActionBar/ActionBar.examples.stories.tsx

@@ -1,4 +1,4 @@
-import React, {type RefObject} from 'react'
+import React from 'react'
 import type {Meta} from '@storybook/react-vite'
 import ActionBar from '.'
 import Text from '../Text'
@@ -19,8 +19,6 @@ import {
   ThreeBarsIcon,
   TrashIcon,
   KebabHorizontalIcon,
-  PeopleIcon,
-  GearIcon,
 } from '@primer/octicons-react'
 import {Button, Avatar, ActionMenu, IconButton, ActionList, Textarea} from '..'
 import {Dialog} from '../deprecated/DialogV1'
@@ -317,42 +315,6 @@ export const MultipleActionBars = () => {
   )
 }
 
-const MultiSelect = React.forwardRef((props, ref) => {
-  type Option = {name: string; selected: boolean}
-
-  const [options, setOptions] = React.useState<Option[]>([
-    {name: 'Show code folding buttons', selected: true},
-    {name: 'Wrap lines', selected: false},
-    {name: 'Center content', selected: false},
-  ])
-
-  const toggle = (name: string) => {
-    setOptions(
-      options.map(option => {
-        if (option.name === name) option.selected = !option.selected
-        return option
-      }),
-    )
-  }
-
-  return (
-    <ActionMenu anchorRef={ref as RefObject<HTMLButtonElement>}>
-      <ActionMenu.Anchor>
-        <IconButton variant="invisible" aria-label="Formatting" icon={GearIcon} />
-      </ActionMenu.Anchor>
-      <ActionMenu.Overlay width="auto">
-        <ActionList selectionVariant="multiple">
-          {options.map(options => (
-            <ActionList.Item key={options.name} selected={options.selected} onSelect={() => toggle(options.name)}>
-              {options.name}
-            </ActionList.Item>
-          ))}
-        </ActionList>
-      </ActionMenu.Overlay>
-    </ActionMenu>
-  )
-})
-
 const ActionMenuExample = () => {
   return (
     <ActionBar.Menu
@@ -388,7 +350,6 @@ export const WithMenus = () => (
     />
     <ActionBar.IconButton disabled icon={FileAddedIcon} aria-label="File Added"></ActionBar.IconButton>
     <ActionBar.IconButton disabled icon={SearchIcon} aria-label="Search"></ActionBar.IconButton>
-    <ActionBar.Menu aria-label="Test Menu" icon={PeopleIcon} renderMenu={MultiSelect} />
     <ActionBar.IconButton disabled icon={QuoteIcon} aria-label="Insert Quote"></ActionBar.IconButton>
     <ActionBar.IconButton icon={ListUnorderedIcon} aria-label="Unordered List"></ActionBar.IconButton>
     <ActionBar.IconButton icon={ListOrderedIcon} aria-label="Ordered List"></ActionBar.IconButton>

packages/react/src/ActionBar/ActionBar.module.css

@@ -43,19 +43,6 @@
   }
 }
 
-.Menu {
-  .Divider {
-    &::before {
-      border: 0;
-      height: var(--borderWidth-thin, .0625rem);
-      margin-block-end: var(--base-size-8, .5rem);
-      margin-block-start: calc(var(--base-size-8, .5rem) - var(--borderWidth-thin, .0625rem));
-      padding: 0;
-      width: unset;
-    }
-  }
-}
-
 .Group {
   display: flex;
   gap: inherit;

packages/react/src/ActionBar/ActionBar.tsx

@@ -106,6 +106,21 @@ export type ActionBarProps = {
 
 export type ActionBarIconButtonProps = {disabled?: boolean} & IconButtonProps
 
+export type ActionBarMenuItem = {
+  disabled?: boolean
+  icon?: ActionBarIconButtonProps['icon']
+  label: string
+  onClick?: ActionListItemProps['onSelect']
+} & Pick<ActionListItemProps, 'variant'>
+
+export type ActionBarMenuProps = {
+  /** Accessible label for the menu button */
+  'aria-label': string
+  /** Icon for the menu button */
+  icon: ActionBarIconButtonProps['icon']
+  items?: ActionBarMenuItem[]
+} & IconButtonProps
+
 const MORE_BTN_WIDTH = 32
 
 const calculatePossibleItems = (
@@ -488,59 +503,38 @@ export const ActionBarGroup = forwardRef(({children}: React.PropsWithChildren, f
   )
 })
 
-type ActionBarMenuItem = {
-  disabled?: boolean
-  icon?: ActionBarIconButtonProps['icon']
-  label: string
-  onClick?: ActionListItemProps['onSelect']
-} & Pick<ActionListItemProps, 'variant'>
-
-type ActionBarMenuProps = {
-  /** Accessible label for the menu button */
-  'aria-label': string // TODO: Change to label
-  /** Icon for the menu button */
-  icon: ActionBarIconButtonProps['icon']
-  items?: ActionBarMenuItem[]
-}
-
-const ActionBarMenuContext = React.createContext<{
-  menuId: string
-  menuVisible: boolean
-  label: string
-}>({menuId: '', menuVisible: false, label: ''})
-
-export const ActionBarMenu = forwardRef(({'aria-label': ariaLabel, icon, items}: ActionBarMenuProps, forwardedRef) => {
-  const backupRef = useRef<HTMLButtonElement>(null)
-  const ref = (forwardedRef ?? backupRef) as RefObject<HTMLButtonElement>
-  const id = useId()
-  const {registerChild, unregisterChild, isVisibleChild} = React.useContext(ActionBarContext)
+export const ActionBarMenu = forwardRef(
+  ({'aria-label': ariaLabel, icon, items, ...props}: ActionBarMenuProps, forwardedRef) => {
+    const backupRef = useRef<HTMLButtonElement>(null)
+    const ref = (forwardedRef ?? backupRef) as RefObject<HTMLButtonElement>
+    const id = useId()
+    const {registerChild, unregisterChild, isVisibleChild} = React.useContext(ActionBarContext)
 
-  const [menuOpen, setMenuOpen] = useState(false)
+    const [menuOpen, setMenuOpen] = useState(false)
 
-  // Like IconButton, we store the width in a ref to ensure that we don't forget about it when not visible
-  // If a child has a groupId, it won't be visible if the group isn't visible, so we don't need to check isVisibleChild here
-  const widthRef = useRef<number>()
+    // Like IconButton, we store the width in a ref to ensure that we don't forget about it when not visible
+    // If a child has a groupId, it won't be visible if the group isn't visible, so we don't need to check isVisibleChild here
+    const widthRef = useRef<number>()
 
-  useIsomorphicLayoutEffect(() => {
-    const width = ref.current?.getBoundingClientRect().width
-    if (width) widthRef.current = width
+    useIsomorphicLayoutEffect(() => {
+      const width = ref.current?.getBoundingClientRect().width
+      if (width) widthRef.current = width
 
-    if (!widthRef.current) return
+      if (!widthRef.current) return
 
-    registerChild(id, {type: 'menu', width: widthRef.current, label: ariaLabel, icon, items})
+      registerChild(id, {type: 'menu', width: widthRef.current, label: ariaLabel, icon, items})
 
-    return () => {
-      unregisterChild(id)
-    }
-  }, [registerChild, unregisterChild])
+      return () => {
+        unregisterChild(id)
+      }
+    }, [registerChild, unregisterChild])
 
-  if (!isVisibleChild(id)) return null
+    if (!isVisibleChild(id)) return null
 
-  return (
-    <ActionBarMenuContext.Provider value={{menuId: id, menuVisible: isVisibleChild(id), label: ariaLabel}}>
+    return (
       <ActionMenu anchorRef={ref} open={menuOpen} onOpenChange={setMenuOpen}>
         <ActionMenu.Anchor>
-          <IconButton variant="invisible" aria-label={ariaLabel} icon={icon} />
+          <IconButton variant="invisible" aria-label={ariaLabel} icon={icon} {...props} />
         </ActionMenu.Anchor>
         <ActionMenu.Overlay>
           <ActionList className={styles.Menu}>
@@ -553,9 +547,9 @@ export const ActionBarMenu = forwardRef(({'aria-label': ariaLabel, icon, items}:
           </ActionList>
         </ActionMenu.Overlay>
       </ActionMenu>
-    </ActionBarMenuContext.Provider>
-  )
-})
+    )
+  },
+)
 
 export const VerticalDivider = () => {
   const ref = useRef<HTMLDivElement>(null)