@moises.ai/design-system 4.16.7 → 4.16.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@moises.ai/design-system",
-  "version": "4.16.7",
+  "version": "4.16.9",
   "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,162 @@
+
+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 { 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,
+    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 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 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, styles.customContentClassName)}
+          size={size}
+          side={props.side}
+          align={props.align}
+          style={contentStyle}
+          sideOffset={sideOffset}
+          alignOffset={0}
+          onOpenAutoFocus={handleOpenAutoFocus}
+          onCloseAutoFocus={(event) => {
+            event.preventDefault()
+          }}
+          onClick={(event) => event.stopPropagation()}
+        >
+          {maxHeight ? (
+            <ScrollArea scrollbars="vertical" style={{ height: maxHeight }}>
+              {renderPanel()}
+            </ScrollArea>
+          ) : (
+            renderPanel()
+          )}
+        </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
+            disabled={disabled}
+            className={classNames(styles.menuTrigger)}
+          >
+            {!onTriggerClick && (
+              <Flex className={styles.triggerWithoutClick}>
+                {trigger}
+              </Flex>
+            )}
+
+            {showSeparator && <Separator orientation="vertical" className={styles.separator} />}
+
+            <ChevronDownIcon
+              width={8}
+              height={8}
+              className={classNames(styles.chevron, {
+                [styles.chevronWithoutSeparator]: !showSeparator,
+              })}
+            />
+          </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,140 @@
+.container {
+  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 {
+  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);
+}
+
+.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;
+}

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

@@ -0,0 +1,145 @@
+import { Flex, Switch, Text } from '@radix-ui/themes'
+import { useState } from 'react'
+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 color='blue'>Controlled</Text>}
+        >
+          <Text size="2">Controlled menu content</Text>
+        </ToolsDropdown>
+
+        <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>
+  ),
+}

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,