@moises.ai/design-system 4.16.7 → 4.16.8

package/package.json

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

package/src/components/ToolsDropdown/ToolsDropdown.jsx

@@ -0,0 +1,147 @@
+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'
+
+export const ToolsDropdown = memo(
+  ({
+    trigger,
+    children,
+    className,
+    contentClassName,
+    showActiveTrigger,
+    size = '2',
+    disabled = false,
+    maxHeight,
+    sideOffset = 5,
+    matchTriggerWidth = false,
+    onTriggerClick,
+    showSeparator = true,
+    withIconTrigger = true,
+    wrapCloseMenu,
+    ...props
+  }) => {
+    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(
+      (value) => {
+        if (!isControlled) setInternalOpen(value)
+        props?.onOpenChange?.(value)
+      },
+      [isControlled, props?.onOpenChange],
+    )
+
+    const baseClose = useCallback(() => onOpenChange(false), [onOpenChange])
+    const closeMenu = wrapCloseMenu ? wrapCloseMenu(baseClose) : baseClose
+
+    const contentStyle = {
+      ...(matchTriggerWidth && {
+        width: 'var(--radix-dropdown-menu-trigger-width)',
+        boxSizing: 'border-box',
+      }),
+      ...(maxHeight && { height: maxHeight }),
+    }
+
+    const handleTriggerClick = (event) => {
+      if (!onTriggerClick) return
+      event.preventDefault()
+      event.stopPropagation()
+      onTriggerClick(event)
+    }
+
+    const triggerButtonStyle = {
+      padding: showSeparator ? '0px 8px 0 6px' : '0 6px',
+      width: withIconTrigger ? '32px' : undefined,
+      outline: 'none',
+    }
+
+    const menuContent = (
+      <Theme asChild>
+        <DropdownMenuRadix.Content
+          className={classNames(menuStyles.menuContent, contentClassName)}
+          size={size}
+          side={props.side}
+          align={props.align}
+          style={contentStyle}
+          sideOffset={sideOffset}
+          alignOffset={0}
+          onCloseAutoFocus={(event) => {
+            event.preventDefault()
+          }}
+          onClick={(event) => event.stopPropagation()}
+        >
+          {maxHeight ? (
+            <ScrollArea scrollbars="vertical" style={{ height: maxHeight }}>
+              <div className={styles.contentPanel}>
+                {typeof children === 'function' ? children(closeMenu) : children}
+              </div>
+            </ScrollArea>
+          ) : (
+            <div className={styles.contentPanel}>
+              {typeof children === 'function' ? children(closeMenu) : children}
+            </div>
+          )}
+        </DropdownMenuRadix.Content>
+      </Theme>
+    )
+
+    return (
+      <Flex className={classNames(styles.container, className)}>
+        <DropdownMenuRadix.Root
+          {...props}
+          open={disabled ? false : open}
+          onOpenChange={disabled ? undefined : onOpenChange}
+        >
+          {onTriggerClick && (
+            <button
+              type="button"
+              onClick={handleTriggerClick}
+              className={classNames(styles.triggerWithClick)}
+            >
+             {trigger}
+            </button>
+          )}
+
+          <DropdownMenuRadix.Trigger
+            asChild
+            disabled={disabled}
+          >
+            <button
+              type="button"
+              className={classNames(menuStyles.menuTrigger)}
+
+            >
+              {trigger}
+
+              {showSeparator && <span className={styles.separator} />}
+
+              <ChevronDownIcon
+                width={8}
+                height={8}
+                className={classNames(styles.chevron, {
+                  [styles.hover]: hover,
+                })}
+              />
+            </button>
+          </DropdownMenuRadix.Trigger>
+
+          <DropdownMenuRadix.Portal className={menuStyles.menuPortal}>
+            {menuContent}
+          </DropdownMenuRadix.Portal>
+        </DropdownMenuRadix.Root>
+      </Flex>
+    )
+  },
+)
+
+ToolsDropdown.displayName = 'ToolsDropdown'

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

@@ -0,0 +1,23 @@
+.container {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.triggerWithClick {
+  cursor: pointer;
+  height: 32px;
+}
+
+.menuTrigger {
+  cursor: pointer;
+  height: 32px;
+}
+
+.menuPortal {
+  border-radius: 8px;
+  border: 1px solid var(--neutral-alpha-3);
+  background: #18191b;
+  box-shadow: 0 12px 32px -16px rgba(0, 0, 0, 0.3),
+    0 12px 60px 0 rgba(0, 0, 0, 0.15);
+}

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

@@ -0,0 +1,136 @@
+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,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: `
+ToolsDropdown combines a tool action trigger with a dropdown menu built on Radix DropdownMenu.
+
+- Pass \`onTriggerClick\` to run a primary action without opening the menu. The chevron opens the menu.
+- Omit \`onTriggerClick\` to open the menu from the full trigger.
+- Use \`children\` or \`children(closeMenu)\` for custom panel content.
+        `,
+      },
+    },
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    trigger: {
+      description: 'Trigger content shown on the main button area',
+      table: { type: { summary: 'React.ReactNode' } },
+    },
+    onTriggerClick: {
+      description: 'Primary action executed when the main trigger is clicked',
+      table: { type: { summary: 'function' } },
+    },
+    showSeparator: {
+      control: 'boolean',
+      table: { type: { summary: 'boolean' }, defaultValue: { summary: true } },
+    },
+    children: {
+      description: 'Dropdown content or render prop receiving closeMenu',
+      table: { type: { summary: 'React.ReactNode | (closeMenu) => React.ReactNode' } },
+    },
+  },
+}
+
+export const Default = {
+  args: {
+    trigger: <Text>Tools</Text>,
+    showSeparator: true,
+  },
+  render: (args) => (
+    <ToolsDropdown {...args}>
+      <Text size="2">Tool settings panel</Text>
+    </ToolsDropdown>
+  ),
+}
+
+export const WithCustomAction = {
+  args: {
+    trigger: <MetronomeIcon width={16} height={16} />,
+    onTriggerClick: () => alert('Metronome toggled'),
+  },
+  render: (args) => (
+    <ToolsDropdown {...args}>
+      <Flex direction="column" gap="2">
+        <Text size="2">BPM: 120</Text>
+        <Text size="2">Time signature: 4/4</Text>
+      </Flex>
+    </ToolsDropdown>
+  ),
+}
+
+export const WithRenderProp = {
+  render: () => {
+    const [enabled, setEnabled] = useState(false)
+
+    return (
+      <ToolsDropdown
+        trigger={<Text>Chords</Text>}
+        onTriggerClick={() => alert('Chords toggled')}
+      >
+        {(closeMenu) => (
+          <>
+            <Flex direction="column" gap="3" width="220px">
+              <Text size="2">Show chord diagrams</Text>
+              <Switch
+                size="2"
+                checked={enabled}
+                onCheckedChange={setEnabled}
+              />
+              <button
+                type="button"
+                onClick={() => {
+                  closeMenu()
+                  alert('Saved')
+                }}
+              >
+                Save
+              </button>
+            </Flex>
+          </>
+        )}
+      </ToolsDropdown>
+    )
+  },
+}
+
+export const ControlledOpen = {
+  render: () => {
+    const [isOpen, setIsOpen] = useState(false)
+
+    return (
+      <Flex direction="column" gap="4" align="center">
+        <Flex gap="2">
+          <button type="button" onClick={() => setIsOpen(true)}>
+            Open
+          </button>
+          <button type="button" onClick={() => setIsOpen(false)}>
+            Close
+          </button>
+        </Flex>
+
+        <ToolsDropdown
+          open={isOpen}
+          onOpenChange={setIsOpen}
+          trigger={<Text>Controlled</Text>}
+        >
+          <Text size="2">Controlled menu content</Text>
+        </ToolsDropdown>
+
+        <Text size="1">
+          Status: <strong>{isOpen ? 'Open' : 'Closed'}</strong>
+        </Text>
+      </Flex>
+    )
+  },
+}

package/src/index.jsx

@@ -53,6 +53,7 @@ export { Countdown } from './components/Countdown/Countdown'
 export { DataTable } from './components/DataTable/DataTable'
 export { DropdownButton } from './components/DropdownButton/DropdownButton'
 export { DropdownMenu } from './components/DropdownMenu/DropdownMenu'
+export { ToolsDropdown } from './components/ToolsDropdown/ToolsDropdown'
 export { EmptyState } from './components/EmptyState/EmptyState'
 export {
   Extension,