@moises.ai/design-system 4.17.0 → 4.17.2

package/package.json

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

package/src/components/SetlistList/SetlistList.module.css

@@ -26,9 +26,11 @@
     .avatarSetlist {
       background: var(--neutral-alpha-3);
     }
+
     .dropdownMenuTrigger {
       color: var(--neutral-alpha-7);
     }
+
     .dropdownTriggerWrapper {
       opacity: 1;
       pointer-events: auto;
@@ -83,7 +85,7 @@
   gap: 8px;
   aspect-ratio: 1/1;
   border-radius: 4px;
-  background: var(--neutral-2);
+  background: var(--neutral-3);
   color: var(--neutral-alpha-8);
   flex-shrink: 0;
   position: relative;
@@ -180,9 +182,11 @@
       background: var(--neutral-alpha-4) !important;
     }
   }
+
   .avatarSetlist {
     background: var(--neutral-alpha-4);
   }
+
   .dropdownMenuTrigger {
     color: var(--neutral-alpha-7);
   }
@@ -199,6 +203,7 @@
     pointer-events: auto;
   }
 }
+
 .setlistsSection {
   flex: 1;
   min-height: 0;
@@ -328,6 +333,7 @@ sectionTitle {
   from {
     transform: translateY(var(--stagger-in-y, 0)) scaleX(var(--stagger-in-scale, 1));
   }
+
   to {
     transform: translateY(0) scaleX(1);
   }
@@ -337,6 +343,7 @@ sectionTitle {
   from {
     transform: translateY(0) scaleX(1);
   }
+
   to {
     transform: translateY(var(--stagger-out-y, 0)) scaleX(var(--stagger-out-scale, 1));
   }
@@ -360,6 +367,7 @@ sectionTitle {
   from {
     opacity: 0;
   }
+
   to {
     opacity: 1;
   }
@@ -369,6 +377,7 @@ sectionTitle {
   from {
     opacity: 1;
   }
+
   to {
     opacity: 0;
   }
@@ -451,9 +460,11 @@ sectionTitle {
 .iconHidden {
   opacity: 0;
 }
+
 .newSetlistItemButton {
   color: var(--aqua-alpha-11) !important;
 }
+
 .plusIcon {
   color: var(--aqua-alpha-11);
-}
+}

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: