@moises.ai/design-system 4.17.0 → 4.17.1

package/package.json

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

package/src/components/ToolsDropdown/ToolsDropdown.jsx

@@ -1,4 +1,3 @@
-
 import classNames from 'classnames'
 import { DropdownMenu as DropdownMenuRadix } from 'radix-ui'
 import { memo, useCallback, useState } from 'react'
@@ -8,9 +7,6 @@ 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(
   ({
     trigger,
@@ -66,19 +62,16 @@ export const ToolsDropdown = memo(
     }, [])
 
     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 panel = event.currentTarget.querySelector('[data-tools-dropdown-panel]')
+      panel?.focus({ preventScroll: true })
     }, [])
 
     const renderPanel = () => (
       <div
         className={styles.contentPanel}
         data-tools-dropdown-panel
+        tabIndex={-1}
         onKeyDown={handlePanelKeyDown}
       >
         {typeof children === 'function' ? children(closeMenu) : children}
@@ -159,4 +152,4 @@ export const ToolsDropdown = memo(
   },
 )
 
-ToolsDropdown.displayName = 'ToolsDropdown'
+ToolsDropdown.displayName = 'ToolsDropdown'

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

@@ -2,6 +2,7 @@ import { Flex, Switch, Text } from '@radix-ui/themes'
 import { useState } from 'react'
 import { MetronomeIcon } from '../../icons/MetronomeIcon'
 import { ToolsDropdown } from './ToolsDropdown'
+import { IconButton } from '../IconButton/IconButton'
 export default {
   title: 'Components/ToolsDropdown',
   component: ToolsDropdown,
@@ -79,6 +80,9 @@ export const WithRenderProp = {
         {(closeMenu) => (
           <>
             <Flex direction="column" gap="3" width="220px">
+            <IconButton >
+              <MetronomeIcon width={16} height={16} />
+            </IconButton>
               <Text size="2">Show chord diagrams</Text>
               <Switch
                 size="2"

package/src/components/Tooltip/Tooltip.module.css

@@ -93,6 +93,7 @@
   max-width: none;
   padding: var(--spacing-1, 4px) var(--spacing-2, 8px) var(--spacing-2, 8px);
   border-radius: var(--radius-4, 8px);
+  border: 1px solid var(--neutral-alpha-3, rgba(221, 234, 248, 0.08));
   background: var(--panel-solid, #18191b);
   color: var(--neutral-alpha-12, rgba(252, 253, 255, 0.94));
   box-shadow: