@moises.ai/design-system 4.16.8 → 4.16.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@moises.ai/design-system",
-  "version": "4.16.8",
+  "version": "4.16.10",
   "description": "Design System package based on @radix-ui/themes with custom defaults",
   "private": false,
   "type": "module",

package/src/components/ToolsDropdown/ToolsDropdown.jsx

@@ -1,12 +1,15 @@
-import { Flex, ScrollArea } from '@radix-ui/themes'
+
 import classNames from 'classnames'
 import { DropdownMenu as DropdownMenuRadix } from 'radix-ui'
 import { memo, useCallback, useState } from 'react'
 import { ChevronDownIcon } from '../../icons/ChevronDownIcon'
 import { styles as menuStyles } from '../../lib/menu'
-import { Button } from '../Button/Button'
 import { Theme } from '../theme/Theme'
 import styles from './ToolsDropdown.module.css'
+import { Flex, ScrollArea, Separator } from '../../index'
+
+const FOCUSABLE_SELECTOR =
+  'button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [role="switch"]:not([disabled]), [tabindex]:not([tabindex="-1"])'
 
 export const ToolsDropdown = memo(
   ({
@@ -28,9 +31,6 @@ export const ToolsDropdown = memo(
   }) => {
     const isControlled = props.open !== undefined
     const [internalOpen, setInternalOpen] = useState(false)
-    const [hover, setHover] = useState(false)
-    const [isActionFocused, setIsActionFocused] = useState(false)
-    const [isMenuTriggerFocused, setIsMenuTriggerFocused] = useState(false)
 
     const open = isControlled ? props.open : internalOpen
     const onOpenChange = useCallback(
@@ -59,22 +59,43 @@ export const ToolsDropdown = memo(
       onTriggerClick(event)
     }
 
-    const triggerButtonStyle = {
-      padding: showSeparator ? '0px 8px 0 6px' : '0 6px',
-      width: withIconTrigger ? '32px' : undefined,
-      outline: 'none',
-    }
+    const handlePanelKeyDown = useCallback((event) => {
+      if (event.key === 'Tab') {
+        event.stopPropagation()
+      }
+    }, [])
+
+    const handleOpenAutoFocus = useCallback((event) => {
+      const panel = event.currentTarget.querySelector('[data-tools-dropdown-panel]')
+      const focusable = panel?.querySelector(FOCUSABLE_SELECTOR)
+
+      if (!focusable) return
+
+      event.preventDefault()
+      focusable.focus({ preventScroll: true })
+    }, [])
+
+    const renderPanel = () => (
+      <div
+        className={styles.contentPanel}
+        data-tools-dropdown-panel
+        onKeyDown={handlePanelKeyDown}
+      >
+        {typeof children === 'function' ? children(closeMenu) : children}
+      </div>
+    )
 
     const menuContent = (
       <Theme asChild>
         <DropdownMenuRadix.Content
-          className={classNames(menuStyles.menuContent, contentClassName)}
+          className={classNames(menuStyles.menuContent, contentClassName, styles.customContentClassName)}
           size={size}
           side={props.side}
           align={props.align}
           style={contentStyle}
           sideOffset={sideOffset}
           alignOffset={0}
+          onOpenAutoFocus={handleOpenAutoFocus}
           onCloseAutoFocus={(event) => {
             event.preventDefault()
           }}
@@ -82,14 +103,10 @@ export const ToolsDropdown = memo(
         >
           {maxHeight ? (
             <ScrollArea scrollbars="vertical" style={{ height: maxHeight }}>
-              <div className={styles.contentPanel}>
-                {typeof children === 'function' ? children(closeMenu) : children}
-              </div>
+              {renderPanel()}
             </ScrollArea>
           ) : (
-            <div className={styles.contentPanel}>
-              {typeof children === 'function' ? children(closeMenu) : children}
-            </div>
+            renderPanel()
           )}
         </DropdownMenuRadix.Content>
       </Theme>
@@ -108,31 +125,29 @@ export const ToolsDropdown = memo(
               onClick={handleTriggerClick}
               className={classNames(styles.triggerWithClick)}
             >
-             {trigger}
+              {trigger}
             </button>
           )}
 
           <DropdownMenuRadix.Trigger
-            asChild
             disabled={disabled}
+            className={classNames(styles.menuTrigger)}
           >
-            <button
-              type="button"
-              className={classNames(menuStyles.menuTrigger)}
+            {!onTriggerClick && (
+              <Flex className={styles.triggerWithoutClick}>
+                {trigger}
+              </Flex>
+            )}
 
-            >
-              {trigger}
+            {showSeparator && <Separator orientation="vertical" className={styles.separator} />}
 
-              {showSeparator && <span className={styles.separator} />}
-
-              <ChevronDownIcon
-                width={8}
-                height={8}
-                className={classNames(styles.chevron, {
-                  [styles.hover]: hover,
-                })}
-              />
-            </button>
+            <ChevronDownIcon
+              width={8}
+              height={8}
+              className={classNames(styles.chevron, {
+                [styles.chevronWithoutSeparator]: !showSeparator,
+              })}
+            />
           </DropdownMenuRadix.Trigger>
 
           <DropdownMenuRadix.Portal className={menuStyles.menuPortal}>

package/src/components/ToolsDropdown/ToolsDropdown.module.css

@@ -2,16 +2,108 @@
   display: flex;
   align-items: center;
   justify-content: center;
+  border: 1px solid var(--neutral-alpha-3);
+  border-radius: 4px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 
 .triggerWithClick {
   cursor: pointer;
   height: 32px;
+  margin: 0;
+  border: 0;
+  padding: 8px;
+  background: transparent;
+  outline: none;
+
+  line-height: 0;
+
+  color: var(--neutral-alpha-11);
+
+  span {
+    font-family: "Articulat CF";
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 17px;
+    letter-spacing: 0;
+  }
+
+}
+
+.container:has(.triggerWithClick) .triggerWithClick {
+  border-radius: 4px 0 0 4px;
+}
+
+.triggerWithClick:focus-visible {
+  outline: 2px solid var(--neutral-alpha-8);
+  outline-offset: 2px;
+  position: relative;
+  z-index: 1;
+}
+
+.triggerWithClick:hover {
+  color: var(--neutral-alpha-12);
+}
+
+.triggerWithClick:active {
+  color: var(--neutral-alpha-11);
+}
+
+.container:has(.triggerWithClick:hover) .chevron {
+  color: var(--neutral-alpha-12) !important;
+}
+
+.container:has(.triggerWithClick:active) .chevron {
+  color: var(--neutral-alpha-11) !important;
+}
+
+.triggerWithoutClick {
+  padding: 8px;
 }
 
 .menuTrigger {
+  display: flex;
+  align-items: center;
   cursor: pointer;
   height: 32px;
+  margin: 0;
+  border: 0;
+  padding: 0;
+  background: transparent;
+  font: inherit;
+  color: inherit;
+  outline: none;
+  border-radius: 4px;
+}
+
+.container:has(.triggerWithClick) .menuTrigger {
+  border-radius: 0 4px 4px 0;
+}
+
+.menuTrigger:focus-visible {
+  outline: 2px solid var(--neutral-alpha-8);
+  outline-offset: 2px;
+  position: relative;
+  z-index: 1;
+}
+
+.menuTrigger:hover {
+  color: var(--neutral-12);
+
+  .chevron {
+    color: var(--neutral-12);
+  }
+}
+
+.menuTrigger:active {
+  color: var(--neutral-11);
+
+  .chevron {
+    color: var(--neutral-11);
+  }
 }
 
 .menuPortal {
@@ -20,4 +112,41 @@
   background: #18191b;
   box-shadow: 0 12px 32px -16px rgba(0, 0, 0, 0.3),
     0 12px 60px 0 rgba(0, 0, 0, 0.15);
+}
+
+.chevron {
+  padding: 4px;
+  color: var(--neutral-alpha-7);
+
+  &:hover {
+    color: var(--neutral-alpha-11);
+  }
+
+  &:active {
+    color: var(--neutral-alpha-11);
+  }
+}
+
+.chevronWithoutSeparator {
+  padding: 4px 4px 4px 0 !important;
+}
+
+.customContentClassName {
+  padding: 12px 16px 16px 16px;
+}
+
+.contentPanel {
+  outline: none;
+}
+
+.triggerWithoutClick {
+  color: var(--neutral-alpha-11);
+
+  &:hover {
+    color: var(--neutral-alpha-12);
+  }
+
+  &:active {
+    color: var(--neutral-alpha-11);
+  }
 }

package/src/components/ToolsDropdown/ToolsDropdown.stories.jsx

@@ -1,9 +1,7 @@
 import { Flex, Switch, Text } from '@radix-ui/themes'
 import { useState } from 'react'
-import { DropdownMenu as DropdownMenuRadix } from 'radix-ui'
 import { MetronomeIcon } from '../../icons/MetronomeIcon'
 import { ToolsDropdown } from './ToolsDropdown'
-
 export default {
   title: 'Components/ToolsDropdown',
   component: ToolsDropdown,
@@ -123,14 +121,26 @@ export const ControlledOpen = {
           open={isOpen}
           onOpenChange={setIsOpen}
           trigger={<Text>Controlled</Text>}
+          showSeparator={false}
         >
           <Text size="2">Controlled menu content</Text>
         </ToolsDropdown>
 
-        <Text size="1">
+        <Text size="1" >
           Status: <strong>{isOpen ? 'Open' : 'Closed'}</strong>
         </Text>
       </Flex>
     )
   },
 }
+
+export const WithoutSeparator = {
+  args: {
+    showSeparator: false,
+  },
+  render: (args) => (
+    <ToolsDropdown {...args} trigger={<MetronomeIcon width={16} height={16} />}>
+      <Text size="2">Tool settings panel</Text>
+    </ToolsDropdown>
+  ),
+}