@xyhp915/slack-base-ui 0.0.6 → 0.0.8

package/src/components/Dropdown.tsx

@@ -0,0 +1,520 @@
+import React, {
+  createContext,
+  useCallback,
+  useContext,
+  useMemo,
+  useState,
+} from 'react'
+import { Menu as BaseMenu } from '@base-ui/react'
+import clsx from 'clsx'
+import { ChevronRight } from 'lucide-react'
+
+// ─── Shared Types ──────────────────────────────────────────────────────────────
+
+export interface DropdownOption {
+  value: string
+  label: string
+  /** Optional icon rendered before the label */
+  icon?: React.ReactNode
+  /** Show shortcut hint on the right */
+  shortcut?: string
+  disabled?: boolean
+  /** Renders in red to indicate destructive action */
+  destructive?: boolean
+}
+
+export interface DropdownGroup {
+  /** Group header label */
+  label: string
+  options: DropdownOption[]
+}
+
+// ─── Declarative API ───────────────────────────────────────────────────────────
+
+export interface DropdownProps {
+  children: React.ReactNode
+  open?: boolean
+  defaultOpen?: boolean
+  onOpenChange?: (open: boolean) => void
+  /** Called when the user selects an option */
+  onSelect?: (value: string) => void
+}
+
+export interface DropdownTriggerProps {
+  children?: React.ReactNode
+  className?: string
+  render?: React.ReactElement
+}
+
+export interface DropdownContentProps {
+  children: React.ReactNode
+  className?: string
+  side?: 'top' | 'right' | 'bottom' | 'left'
+  align?: 'start' | 'center' | 'end'
+  sideOffset?: number
+  alignOffset?: number
+}
+
+export interface DropdownItemProps {
+  value: string
+  children: React.ReactNode
+  icon?: React.ReactNode
+  shortcut?: string
+  className?: string
+  disabled?: boolean
+  destructive?: boolean
+  onSelect?: (value: string) => void
+}
+
+export interface DropdownLabelProps {
+  children: React.ReactNode
+  className?: string
+}
+
+export interface DropdownSeparatorProps {
+  className?: string
+}
+
+export interface DropdownGroupProps {
+  label: string
+  children: React.ReactNode
+  className?: string
+}
+
+// Internal context so DropdownItem can call parent onSelect
+const DropdownSelectContext = createContext<((value: string) => void) | undefined>(undefined)
+
+export const Dropdown: React.FC<DropdownProps> = ({
+  children,
+  open,
+  defaultOpen,
+  onOpenChange,
+  onSelect,
+}) => {
+  return (
+      <DropdownSelectContext.Provider value={onSelect}>
+        <BaseMenu.Root open={open} defaultOpen={defaultOpen} onOpenChange={onOpenChange}>
+          {children}
+        </BaseMenu.Root>
+      </DropdownSelectContext.Provider>
+  )
+}
+Dropdown.displayName = 'Dropdown'
+
+export const DropdownTrigger = React.forwardRef<HTMLButtonElement, DropdownTriggerProps>(
+    ({ children, className, render }, ref) => {
+      if (render) {
+        return (
+            <span className="contents">
+          <BaseMenu.Trigger ref={ref} className={clsx('outline-none', className)} render={render}/>
+        </span>
+        )
+      }
+      return (
+          <span className="contents">
+        <BaseMenu.Trigger ref={ref} className={clsx('outline-none', className)}>
+          {children}
+        </BaseMenu.Trigger>
+      </span>
+      )
+    },
+)
+DropdownTrigger.displayName = 'DropdownTrigger'
+
+export const DropdownContent = React.forwardRef<HTMLDivElement, DropdownContentProps>(
+    (
+        {
+          children,
+          className,
+          side = 'bottom',
+          align = 'start',
+          sideOffset = 4,
+          alignOffset = 0,
+        },
+        ref,
+    ) => {
+      return (
+          <BaseMenu.Portal>
+            <BaseMenu.Positioner
+                side={side}
+                align={align}
+                sideOffset={sideOffset}
+                alignOffset={alignOffset}
+            >
+              <BaseMenu.Popup
+                  ref={ref}
+                  className={clsx(
+                      'z-50 min-w-40 max-w-72 rounded-md border border-(--border-light) bg-(--bg-primary) py-1 shadow-lg',
+                      className,
+                  )}
+              >
+                {children}
+              </BaseMenu.Popup>
+            </BaseMenu.Positioner>
+          </BaseMenu.Portal>
+      )
+    },
+)
+DropdownContent.displayName = 'DropdownContent'
+
+export const DropdownItem = React.forwardRef<HTMLDivElement, DropdownItemProps>(
+    ({ value, children, icon, shortcut, className, disabled, destructive, onSelect }, ref) => {
+      const contextOnSelect = useContext(DropdownSelectContext)
+
+      const handleSelect = useCallback(() => {
+        onSelect?.(value)
+        contextOnSelect?.(value)
+      }, [value, onSelect, contextOnSelect])
+
+      return (
+          <BaseMenu.Item
+              ref={ref}
+              className={clsx(
+                  'relative flex items-center gap-2 px-3 py-1.5 text-[14px] outline-none cursor-pointer select-none',
+                  'text-(--text-primary)',
+                  'data-[highlighted]:bg-(--bg-hover)',
+                  'data-[disabled]:opacity-50 data-[disabled]:pointer-events-none',
+                  destructive &&
+                  'text-(--danger) data-[highlighted]:bg-red-50 dark:data-[highlighted]:bg-red-950/20',
+                  className,
+              )}
+              disabled={disabled}
+              onSelect={handleSelect}
+          >
+            {icon && <span className="shrink-0 text-(--text-muted)">{icon}</span>}
+            <span className="flex-1">{children}</span>
+            {shortcut && (
+                <span className="ml-auto text-[12px] text-(--text-muted)">{shortcut}</span>
+            )}
+          </BaseMenu.Item>
+      )
+    },
+)
+DropdownItem.displayName = 'DropdownItem'
+
+export const DropdownLabel: React.FC<DropdownLabelProps> = ({ children, className }) => (
+    <div
+        className={clsx(
+            'px-3 py-1.5 text-[11px] font-semibold text-(--text-muted) uppercase tracking-wider',
+            className,
+        )}
+    >
+      {children}
+    </div>
+)
+DropdownLabel.displayName = 'DropdownLabel'
+
+export const DropdownSeparator: React.FC<DropdownSeparatorProps> = ({ className }) => (
+    <BaseMenu.Separator className={clsx('my-1 h-px bg-(--border-light)', className)}/>
+)
+DropdownSeparator.displayName = 'DropdownSeparator'
+
+export const DropdownGroup: React.FC<DropdownGroupProps> = ({ label, children, className }) => (
+    <BaseMenu.Group className={className}>
+      <BaseMenu.GroupLabel className="px-3 py-1 text-[11px] font-semibold text-(--text-muted) uppercase tracking-wider">
+        {label}
+      </BaseMenu.GroupLabel>
+      {children}
+    </BaseMenu.Group>
+)
+DropdownGroup.displayName = 'DropdownGroup'
+
+/** Convenience: render a list of DropdownOption objects inside a DropdownContent */
+export const DropdownOptionList: React.FC<{
+  options: DropdownOption[]
+  onSelect?: (value: string) => void
+}> = ({ options, onSelect }) => (
+    <>
+      {options.map((opt) => (
+          <DropdownItem
+              key={opt.value}
+              value={opt.value}
+              icon={opt.icon}
+              shortcut={opt.shortcut}
+              disabled={opt.disabled}
+              destructive={opt.destructive}
+              onSelect={onSelect}
+          >
+            {opt.label}
+          </DropdownItem>
+      ))}
+    </>
+)
+
+/** Convenience: render a list of DropdownGroup objects inside a DropdownContent */
+export const DropdownGroupList: React.FC<{
+  groups: DropdownGroup[]
+  onSelect?: (value: string) => void
+}> = ({ groups, onSelect }) => (
+    <>
+      {groups.map((g, i) => (
+          <React.Fragment key={g.label}>
+            {i > 0 && <DropdownSeparator/>}
+            <DropdownGroup label={g.label}>
+              {g.options.map((opt) => (
+                  <DropdownItem
+                      key={opt.value}
+                      value={opt.value}
+                      icon={opt.icon}
+                      shortcut={opt.shortcut}
+                      disabled={opt.disabled}
+                      destructive={opt.destructive}
+                      onSelect={onSelect}
+                  >
+                    {opt.label}
+                  </DropdownItem>
+              ))}
+            </DropdownGroup>
+          </React.Fragment>
+      ))}
+    </>
+)
+
+// Submenus (declarative only)
+export interface DropdownSubProps {
+  children: React.ReactNode
+  open?: boolean
+  defaultOpen?: boolean
+  onOpenChange?: (open: boolean) => void
+}
+
+export interface DropdownSubTriggerProps {
+  children: React.ReactNode
+  className?: string
+  disabled?: boolean
+}
+
+export interface DropdownSubContentProps {
+  children: React.ReactNode
+  className?: string
+}
+
+export const DropdownSub: React.FC<DropdownSubProps> = ({
+  children,
+  open,
+  defaultOpen,
+  onOpenChange,
+}) => (
+    <BaseMenu.Root open={open} defaultOpen={defaultOpen} onOpenChange={onOpenChange}>
+      {children}
+    </BaseMenu.Root>
+)
+DropdownSub.displayName = 'DropdownSub'
+
+export const DropdownSubTrigger = React.forwardRef<HTMLButtonElement, DropdownSubTriggerProps>(
+    ({ children, className, disabled }, ref) => (
+        <BaseMenu.Trigger
+            ref={ref}
+            className={clsx(
+                'relative flex w-full items-center justify-between gap-2 px-3 py-1.5 text-[14px] outline-none cursor-pointer select-none',
+                'text-(--text-primary) data-[highlighted]:bg-(--bg-hover)',
+                'data-[disabled]:opacity-50 data-[disabled]:pointer-events-none',
+                className,
+            )}
+            disabled={disabled}
+        >
+          {children}
+          <ChevronRight className="ml-auto h-3.5 w-3.5 text-(--text-muted)"/>
+        </BaseMenu.Trigger>
+    ),
+)
+DropdownSubTrigger.displayName = 'DropdownSubTrigger'
+
+export const DropdownSubContent = React.forwardRef<HTMLDivElement, DropdownSubContentProps>(
+    ({ children, className }, ref) => (
+        <BaseMenu.Portal>
+          <BaseMenu.Positioner side="right" align="start" sideOffset={8}>
+            <BaseMenu.Popup
+                ref={ref}
+                className={clsx(
+                    'z-50 min-w-40 max-w-72 rounded-md border border-(--border-light) bg-(--bg-primary) py-1 shadow-lg',
+                    className,
+                )}
+            >
+              {children}
+            </BaseMenu.Popup>
+          </BaseMenu.Positioner>
+        </BaseMenu.Portal>
+    ),
+)
+DropdownSubContent.displayName = 'DropdownSubContent'
+
+// ─── Imperative API ────────────────────────────────────────────────────────────
+
+export interface DropdownShowOptions {
+  /** Flat list of options (use `groups` for grouped layout) */
+  options?: DropdownOption[]
+  /** Grouped options (renders group headers + separators) */
+  groups?: DropdownGroup[]
+  /** Called when the user picks an option */
+  onSelect?: (value: string) => void
+  side?: 'top' | 'right' | 'bottom' | 'left'
+  align?: 'start' | 'center' | 'end'
+  sideOffset?: number
+  alignOffset?: number
+  className?: string
+}
+
+export interface UseDropdownReturn {
+  /**
+   * Show the dropdown anchored to the given element.
+   * Replaces any currently open dropdown.
+   */
+  show: (anchor: HTMLElement | null, options: DropdownShowOptions) => void
+  /** Close the dropdown. */
+  hide: () => void
+  /**
+   * Toggle the dropdown for the given anchor.
+   * Closes if the same anchor is already open; otherwise opens on the new anchor.
+   */
+  toggle: (anchor: HTMLElement | null, options: DropdownShowOptions) => void
+  /** Whether the dropdown is currently open. */
+  isOpen: boolean
+}
+
+interface DropdownState {
+  open: boolean
+  anchor: HTMLElement | null
+  options: DropdownShowOptions
+}
+
+const DropdownContext = createContext<UseDropdownReturn | null>(null)
+
+/**
+ * Provides the imperative dropdown API to all descendant components.
+ * Only one dropdown is shown at a time (singleton).
+ *
+ * @example
+ * ```tsx
+ * // main.tsx
+ * <DropdownProvider>
+ *   <App />
+ * </DropdownProvider>
+ *
+ * // Any component
+ * const dropdown = useDropdown()
+ *
+ * <button onClick={e => dropdown.show(e.currentTarget, {
+ *   options: [
+ *     { value: 'edit', label: '编辑', icon: <Edit size={14} /> },
+ *     { value: 'delete', label: '删除', destructive: true },
+ *   ],
+ *   onSelect: (value) => handleAction(value),
+ * })}>
+ *   操作
+ * </button>
+ * ```
+ */
+export const DropdownProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
+  const [state, setState] = useState<DropdownState>({
+    open: false,
+    anchor: null,
+    options: {},
+  })
+
+  const show = useCallback((anchor: HTMLElement | null, options: DropdownShowOptions) => {
+    setState({ open: true, anchor, options })
+  }, [])
+
+  const hide = useCallback(() => {
+    setState((prev) => ({ ...prev, open: false }))
+  }, [])
+
+  const toggle = useCallback(
+      (anchor: HTMLElement | null, options: DropdownShowOptions) => {
+        setState((prev) => {
+          if (prev.open && prev.anchor === anchor) {
+            return { ...prev, open: false }
+          }
+          return { open: true, anchor, options }
+        })
+      },
+      [],
+  )
+
+  const value = useMemo<UseDropdownReturn>(
+      () => ({ show, hide, toggle, isOpen: state.open }),
+      [show, hide, toggle, state.open],
+  )
+
+  return (
+      <DropdownContext.Provider value={value}>
+        {children}
+        <ImperativeDropdownPortal state={state} onClose={hide}/>
+      </DropdownContext.Provider>
+  )
+}
+DropdownProvider.displayName = 'DropdownProvider'
+
+function ImperativeDropdownPortal ({
+  state,
+  onClose,
+}: {
+  state: DropdownState
+  onClose: () => void
+}) {
+  if (!state.open || !state.anchor) return null
+
+  const { options } = state
+
+  const handleSelect = (value: string) => {
+    options.onSelect?.(value)
+    onClose()
+  }
+
+  return (
+      <BaseMenu.Root open={state.open} onOpenChange={(open) => !open && onClose()}>
+        <BaseMenu.Portal>
+          <BaseMenu.Positioner
+              anchor={state.anchor}
+              side={options.side ?? 'bottom'}
+              align={options.align ?? 'start'}
+              sideOffset={options.sideOffset ?? 4}
+              alignOffset={options.alignOffset ?? 0}
+          >
+            <BaseMenu.Popup
+                className={clsx(
+                    'z-50 min-w-40 max-w-72 rounded-md border border-(--border-light) bg-(--bg-primary) py-1 shadow-lg',
+                    options.className,
+                )}
+            >
+              {options.groups ? (
+                  <DropdownGroupList groups={options.groups} onSelect={handleSelect}/>
+              ) : (
+                  <DropdownOptionList options={options.options ?? []} onSelect={handleSelect}/>
+              )}
+            </BaseMenu.Popup>
+          </BaseMenu.Positioner>
+        </BaseMenu.Portal>
+      </BaseMenu.Root>
+  )
+}
+
+/**
+ * Returns imperative methods for showing a dropdown anchored to any element.
+ *
+ * Must be used inside `<DropdownProvider>`.
+ *
+ * @example
+ * ```tsx
+ * const dropdown = useDropdown()
+ *
+ * // Show
+ * <button onClick={e => dropdown.show(e.currentTarget, {
+ *   options: [{ value: 'copy', label: 'Copy' }, { value: 'paste', label: 'Paste' }],
+ *   onSelect: (v) => console.log(v),
+ * })}>
+ *   Actions
+ * </button>
+ *
+ * // Toggle (click again to close)
+ * <button onClick={e => dropdown.toggle(e.currentTarget, { options, onSelect })}>
+ *   Toggle
+ * </button>
+ * ```
+ */
+export function useDropdown (): UseDropdownReturn {
+  const ctx = useContext(DropdownContext)
+  if (!ctx) throw new Error('useDropdown must be used within <DropdownProvider>')
+  return ctx
+}

package/src/components/Select.tsx

@@ -61,6 +61,30 @@ export const Select = React.forwardRef<HTMLButtonElement, SelectProps>(
   ) => {
     const generatedId = React.useId()
     const triggerId = id ?? generatedId
+    const isControlled = value !== undefined
+    const [internalValue, setInternalValue] = React.useState<string | null>(defaultValue ?? null)
+
+    const allOptions = React.useMemo(
+      () => (groups ? groups.flatMap((group) => group.options) : options ?? []),
+      [groups, options],
+    )
+
+    const selectedValue = isControlled ? value ?? null : internalValue
+    const selectedLabel = React.useMemo(
+      () => allOptions.find((opt) => opt.value === selectedValue)?.label,
+      [allOptions, selectedValue],
+    )
+
+    const handleValueChange = React.useCallback(
+      (nextValue: string | null) => {
+        if (!isControlled) {
+          setInternalValue(nextValue)
+        }
+
+        onValueChange?.(nextValue)
+      },
+      [isControlled, onValueChange],
+    )
 
     return (
       <div className={clsx('flex flex-col gap-1.5', fullWidth && 'w-full')}>
@@ -75,9 +99,9 @@ export const Select = React.forwardRef<HTMLButtonElement, SelectProps>(
         )}
 
         <BaseSelect.Root
-          value={value}
-          defaultValue={defaultValue}
-          onValueChange={onValueChange}
+          value={isControlled ? value : undefined}
+          defaultValue={isControlled ? undefined : defaultValue}
+          onValueChange={handleValueChange}
           disabled={disabled}
           required={required}
         >
@@ -99,7 +123,9 @@ export const Select = React.forwardRef<HTMLButtonElement, SelectProps>(
             <BaseSelect.Value
               className="flex-1 text-left data-[placeholder]:text-(--text-muted)"
               placeholder={placeholder}
-            />
+            >
+              {selectedLabel}
+            </BaseSelect.Value>
             <BaseSelect.Icon className="shrink-0 text-(--text-muted)">
               <ChevronDown size={14} />
             </BaseSelect.Icon>

package/src/components/index.ts

@@ -184,3 +184,41 @@ export type { LoadingProps, LoadingVariant, LoadingSize } from './Loading'
 export { AutoComplete } from './AutoComplete'
 export type { AutoCompleteProps, AutoCompleteOption } from './AutoComplete'
 
+// Combobox Components
+export { Combobox, ComboboxMultiple } from './Combobox'
+export type { ComboboxProps, ComboboxMultipleProps, ComboboxOption, ComboboxGroup } from './Combobox'
+
+// Dropdown Components (declarative + imperative)
+export {
+  Dropdown,
+  DropdownTrigger,
+  DropdownContent,
+  DropdownItem,
+  DropdownLabel,
+  DropdownSeparator,
+  DropdownGroup,
+  DropdownOptionList,
+  DropdownGroupList,
+  DropdownSub,
+  DropdownSubTrigger,
+  DropdownSubContent,
+  DropdownProvider,
+  useDropdown,
+} from './Dropdown'
+export type {
+  DropdownProps,
+  DropdownTriggerProps,
+  DropdownContentProps,
+  DropdownItemProps,
+  DropdownLabelProps,
+  DropdownSeparatorProps,
+  DropdownGroupProps,
+  DropdownSubProps,
+  DropdownSubTriggerProps,
+  DropdownSubContentProps,
+  DropdownOption,
+  DropdownGroup as DropdownGroupType,
+  DropdownShowOptions,
+  UseDropdownReturn,
+} from './Dropdown'
+

package/src/main.tsx

@@ -6,6 +6,7 @@ import { ThemeProvider } from './context/ThemeContext'
 import { ToastProvider } from './components'
 import { DialogProvider } from './components'
 import { ImperativePopoverProvider } from './components'
+import { DropdownProvider } from './components'
 
 createRoot(document.getElementById('root')!).render(
   <StrictMode>
@@ -13,7 +14,9 @@ createRoot(document.getElementById('root')!).render(
       <ToastProvider>
         <DialogProvider>
           <ImperativePopoverProvider>
-            <App />
+            <DropdownProvider>
+              <App />
+            </DropdownProvider>
           </ImperativePopoverProvider>
         </DialogProvider>
       </ToastProvider>