clean up

Author: liuliu-dev

packages/react/src/ActionList/ActionList.dev.stories.tsx

@@ -52,7 +52,9 @@ export const GroupWithSubtleTitleOldAPI = () => {
               key={user.login}
               selected={Boolean(assignees.find(assignee => assignee.login === user.login))}
               aria-checked={Boolean(assignees.find(assignee => assignee.login === user.login))}
-              onSelect={() => {toggleAssignee(user);console.log("user",user)}}
+              onSelect={() => {
+                toggleAssignee(user)
+              }}
             >
               <ActionList.LeadingVisual>
                 <Avatar src={`https://github.com/${user.login}.png`} />

packages/react/src/ActionList/Item.tsx

@@ -28,25 +28,15 @@ export const SubItem: React.FC<ActionListSubItemProps> = ({children}) => {
 
 SubItem.displayName = 'ActionList.SubItem'
 
-const ButtonItemContainerNoBox = React.forwardRef<
-  HTMLButtonElement,
-  React.HTMLAttributes<HTMLButtonElement> & {as?: React.ElementType}
->(({children, style, as: Component = 'button', ...props}, forwardedRef) => {
-  // If a custom component is provided via 'as', use it (e.g., React Router's Link)
-  // Otherwise, render a button
-  if (Component !== 'button') {
+const ButtonItemContainerNoBox = React.forwardRef<HTMLButtonElement, React.HTMLAttributes<HTMLButtonElement>>(
+  ({children, style, ...props}, forwardedRef) => {
     return (
-      <Component ref={forwardedRef} style={style} {...props}>
+      <button type="button" ref={forwardedRef as React.Ref<HTMLButtonElement>} style={style} {...props}>
         {children}
-      </Component>
+      </button>
     )
-  }
-  return (
-    <button type="button" ref={forwardedRef as React.Ref<HTMLButtonElement>} style={style} {...props}>
-      {children}
-    </button>
-  )
-})
+  },
+)
 
 const DivItemContainerNoBox = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
   ({children, ...props}, forwardedRef) => {
@@ -70,35 +60,18 @@ type LinkItemContainerProps = React.HTMLAttributes<HTMLAnchorElement> &
 const LinkItemContainerNoBox = React.forwardRef<HTMLAnchorElement, LinkItemContainerProps>(
   ({children, onClick, userOnClick, inactiveText, as: Component = 'a', ...rest}, forwardedRef) => {
     const clickHandler = (event: React.MouseEvent<HTMLElement>) => {
-      console.log('[LinkItemContainerNoBox] Click handler called', {
-        hasOnClick: !!onClick,
-        hasUserOnClick: !!userOnClick,
-        defaultPrevented: event.defaultPrevented,
-        Component,
-        href: rest.href,
-        target: event.target,
-        currentTarget: event.currentTarget,
-        targetTag: (event.target as HTMLElement).tagName,
-        currentTargetTag: (event.currentTarget as HTMLElement).tagName,
-      })
-
-      if (onClick) {
-        console.log('[LinkItemContainerNoBox] Calling onClick (Item clickHandler)')
-        onClick(event)
-        console.log('[LinkItemContainerNoBox] After onClick', {defaultPrevented: event.defaultPrevented})
-      }
-
-      if (userOnClick) {
-        console.log('[LinkItemContainerNoBox] Calling userOnClick (NavList onClick)')
-        userOnClick(event as React.MouseEvent<HTMLAnchorElement>)
-        console.log('[LinkItemContainerNoBox] After userOnClick', {defaultPrevented: event.defaultPrevented})
-      }
+      onClick && onClick(event)
+      userOnClick && userOnClick(event as React.MouseEvent<HTMLAnchorElement>)
     }
     if (inactiveText) {
-      return <span {...(rest as React.HTMLAttributes<HTMLSpanElement>)}>{children}</span>
+      return (
+        <span ref={forwardedRef} {...(rest as React.HTMLAttributes<HTMLSpanElement>)}>
+          {children}
+        </span>
+      )
     }
     return (
-      <Link as={Component} {...rest} onClick={clickHandler} ref={forwardedRef}>
+      <Link as={Component} ref={forwardedRef} {...rest} onClick={clickHandler}>
         {children}
       </Link>
     )
@@ -176,11 +149,7 @@ const UnwrappedItem = <As extends React.ElementType = 'li'>(
 
   /** Detect if this should be a link item based on props - needed early for role inference */
   const isLinkItem = Boolean(
-    props.href ||
-      // Only treat as link item if it's explicitly using LinkItem pattern (has to prop AND _PrivateItemWrapper)
-      // or if role is explicitly 'link'. Don't treat as='a' alone as a link item because
-      // NavList uses as='a' for button items with router links
-      role === 'link',
+    props.href || props.to || (typeof props.as === 'string' && props.as.toLowerCase() === 'a') || role === 'link',
   )
 
   /** Infer item role based on the container */
@@ -218,18 +187,10 @@ const UnwrappedItem = <As extends React.ElementType = 'li'>(
 
   const clickHandler = React.useCallback(
     (event: React.MouseEvent<HTMLElement>) => {
-      console.log('[Item clickHandler] Called', {
-        disabled,
-        inactive,
-        loading,
-        hasOnSelectUser: !!onSelectUser,
-        defaultPrevented: event.defaultPrevented,
-      })
       if (disabled || inactive || loading) return
       onSelect(event, afterSelect)
-      console.log('[Item clickHandler] After onSelect', {defaultPrevented: event.defaultPrevented})
     },
-    [onSelect, disabled, inactive, afterSelect, loading, onSelectUser],
+    [onSelect, disabled, inactive, afterSelect, loading],
   )
   const keyPressHandler = React.useCallback(
     (event: React.KeyboardEvent<HTMLElement>) => {
@@ -299,27 +260,6 @@ const UnwrappedItem = <As extends React.ElementType = 'li'>(
   // 2. isLinkItem - direct Item usage with link props (href, to, etc.)
   // 3. default - regular button/div behavior with ActionListBaseItemProps
 
-  // Debug logging
-  console.log('[ActionList.Item Debug]', {
-    isLinkItem,
-    listSemantics,
-    buttonSemantics,
-    itemRole,
-    listRole,
-    hasPrivateWrapper: !!_PrivateItemWrapper,
-    ItemWrapperType: _PrivateItemWrapper
-      ? 'PrivateWrapper'
-      : isLinkItem
-        ? 'LinkItemContainer'
-        : listSemantics
-          ? 'DivContainer'
-          : 'ButtonContainer',
-    propsKeys: Object.keys(props),
-    hasTo: !!props.to,
-    hasHref: !!props.href,
-    hasOnClick: !!props.onClick,
-  })
-
   const containerProps =
     _PrivateItemWrapper || isLinkItem
       ? //TODO: need to pass props excluding link related ones to container props, otherwise aria-current, as and href or style would be passed to <li> and fail the src/NavList/NavList.test.tsx
@@ -333,25 +273,17 @@ const UnwrappedItem = <As extends React.ElementType = 'li'>(
     ? menuItemProps
     : isLinkItem
       ? {
-          ...props,
           ...menuItemProps,
           inactiveText,
           userOnClick: props.onClick as ((event: React.MouseEvent<HTMLAnchorElement>) => void) | undefined,
+          ref: forwardedRef,
         }
       : !listSemantics && {
           ...menuItemProps,
           ...props,
           ref: forwardedRef,
         }
 
-  // Debug logging
-  console.log('[ActionList.Item wrapperProps]', {
-    wrapperPropsKeys: Object.keys(wrapperProps || {}),
-    hasOnClick: !!(wrapperProps && 'onClick' in wrapperProps),
-    listSemantics,
-    isLinkItem,
-  })
-
   return (
     <ItemContext.Provider
       value={{