@maestro-js/components 1.0.0-alpha.0

package/src/components/multicomplete.tsx

@@ -0,0 +1,322 @@
+import * as React from 'react'
+import { ComboBox as AriaComboBox, Input, ListBox, ListBoxItem } from 'react-aria-components'
+import { AnimatedPopover } from './helpers/animated-popover'
+import type { Key } from 'react-aria-components'
+import { HeadlessForm } from '@maestro-js/form'
+import type { ValidationFunction, ValidationResult } from '@maestro-js/form'
+import { tw } from '../utils/tw'
+import { getColor, stringToNumber } from '../utils/colors'
+import { FormFieldComponents } from './helpers/form-field'
+import { matchSorter } from 'match-sorter'
+import { Icon } from './icon'
+import { useElementSize } from '../utils/use-element-size'
+import { composeRefs } from '../utils/compose-refs'
+
+// ── Types ──────────────────────────────────────────────────────────────────────
+
+export type MulticompleteOption = {
+  value: string | number
+  label: string
+  secondary?: string
+}
+
+export type MulticompleteProps<T extends MulticompleteOption = MulticompleteOption> = {
+  // Form identification
+  name?: string
+  form?: string
+
+  // Display elements
+  label?: React.ReactNode
+  cornerHint?: React.ReactNode
+  helpText?: React.ReactNode
+  placeholder?: string
+  warningMessage?: React.ReactNode
+
+  // Validation and state
+  isRequired?: boolean
+  isDisabled?: boolean
+  isReadonly?: boolean
+  isInvalid?: boolean
+  validate?: ValidationFunction<T['value'][]>
+  errorMessage?: React.ReactNode | ((v: ValidationResult) => React.ReactNode)
+
+  // Value management
+  value?: T['value'][]
+  defaultValue?: T['value'][]
+  onChange?: (value: T['value'][]) => void
+
+  // Options
+  options: T[]
+  renderOption?: (props: { option: T; colored: boolean; index: number }) => React.ReactNode
+
+  colored?: boolean
+
+  // Filtering
+  filterFunction?: ((items: readonly T[], value: string) => T[]) | (keyof T)[]
+
+  // Loading
+  isLoading?: boolean
+
+  // Input
+  inputAutocomplete?: React.ComponentProps<'input'>['autoComplete']
+  id?: string
+  shape?: 'rectangle' | 'oval'
+}
+
+// ── Component ──────────────────────────────────────────────────────────────────
+
+const EMPTY_ARR: never[] = []
+
+export function Multicomplete<T extends MulticompleteOption = MulticompleteOption>(props: MulticompleteProps<T>) {
+  const hiddenInputRef = React.useRef<HTMLInputElement>(null)
+  const inputRef = React.useRef<HTMLInputElement>(null)
+  const fieldGroupRef = React.useRef<HTMLDivElement>(null)
+  const [fieldGroupEl, setFieldGroupEl] = React.useState<HTMLDivElement | null>(null)
+  const fieldGroupSize = useElementSize(fieldGroupEl)
+  const helpTextId = React.useId()
+  const labelId = React.useId()
+  const [query, setQuery] = React.useState('')
+
+  // Controlled state management (array of values)
+  const [selectedValues, setSelectedValues] = HeadlessForm.useControlledState(
+    props.value,
+    props.defaultValue ?? EMPTY_ARR,
+    props.onChange
+  )
+
+  // Form validation
+  const {
+    validationMessage,
+    isInvalid: validationInvalid,
+    commitValidation
+  } = HeadlessForm.useValidation(
+    {
+      validate: props.validate,
+      value: selectedValues,
+      name: props.name,
+      isRequired: props.isRequired,
+      form: props.form,
+      focus() {
+        inputRef.current?.focus()
+      }
+    },
+    hiddenInputRef
+  )
+
+  const isInvalid = props.isInvalid || validationInvalid
+  const hasWarning = Boolean(props.warningMessage) && !isInvalid
+  const isInteractive = !props.isDisabled && !props.isReadonly
+
+  // Find selected options
+  const selectedOptions = React.useMemo(() => {
+    return props.options.filter((option) => selectedValues.includes(option.value))
+  }, [props.options, selectedValues])
+
+  // Filter unselected options based on query
+  const availableOptions = React.useMemo(() => {
+    if (props.isLoading) return []
+
+    const unselected = props.options.filter((option) => !selectedValues.includes(option.value))
+    const filterFn = props.filterFunction
+
+    if (typeof filterFn === 'function') {
+      return filterFn(unselected, query).slice(0, 50)
+    }
+
+    if (Array.isArray(filterFn)) {
+      return matchSorter(unselected, query, {
+        keys: filterFn as string[]
+      }).slice(0, 50)
+    }
+
+    return defaultFilterFunction(unselected, query).slice(0, 50)
+  }, [props.options, selectedValues, query, props.filterFunction, props.isLoading])
+
+  // Items for React Aria (with id for key management)
+  const items = React.useMemo(
+    () => availableOptions.map((option, index) => ({ ...option, index, id: String(option.value) })),
+    [availableOptions]
+  )
+
+  const handleRemoveOption = (value: T['value']) => {
+    const newValues = selectedValues.filter((v) => v !== value)
+    setSelectedValues(newValues)
+    commitValidation()
+  }
+
+  const handleSelectionChange = (key: Key | null) => {
+    if (key === null) return
+    const option = props.options.find((o) => String(o.value) === String(key))
+    if (option && !selectedValues.includes(option.value)) {
+      setSelectedValues([...selectedValues, option.value])
+      commitValidation()
+    }
+    setQuery('')
+  }
+
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === 'Backspace' && !query && selectedOptions.length > 0) {
+      e.preventDefault()
+      handleRemoveOption(selectedOptions[selectedOptions.length - 1]!.value)
+    }
+  }
+
+  return (
+    <div className="relative">
+      {/* Hidden inputs for form submission */}
+      <HeadlessForm.HiddenInput
+        ref={hiddenInputRef}
+        name={props.name}
+        value={JSON.stringify(selectedValues)}
+        form={props.form}
+      />
+
+      <FormFieldComponents.LabelRow label={props.label} cornerHint={props.cornerHint} labelId={labelId} />
+
+      <AriaComboBox
+        aria-labelledby={props.label ? labelId : undefined}
+        aria-label={!props.label ? 'Multicomplete' : undefined}
+        selectedKey={null}
+        onSelectionChange={handleSelectionChange}
+        inputValue={query}
+        onInputChange={setQuery}
+        items={items}
+        isDisabled={props.isDisabled || props.isReadonly}
+        isInvalid={isInvalid}
+        allowsEmptyCollection
+        menuTrigger="focus"
+        onBlur={() => commitValidation()}
+        onKeyDown={handleKeyDown}
+      >
+        {/* Input container with chips */}
+        <FormFieldComponents.FieldGroup
+          ref={composeRefs(fieldGroupRef, setFieldGroupEl)}
+          isDisabled={props.isDisabled}
+          isReadonly={props.isReadonly}
+          isInvalid={isInvalid}
+          hasWarning={hasWarning}
+          shape={props.shape}
+          className="flex"
+        >
+          <div className="flex flex-wrap items-center gap-1.5 px-3 py-1.5 w-full">
+            {/* Display selected chips */}
+            {selectedOptions.map((option) => {
+              const chipColor = props.colored ? getColor(stringToNumber(String(option.value))) : undefined
+              return (
+                <span
+                  key={option.value}
+                  className={tw(
+                    'inline-flex items-center rounded-full font-normal transition-colors max-w-full px-2 py-0.5 text-xs',
+                    !chipColor && 'bg-primary-500/10 text-primary-500',
+                    props.isDisabled && 'opacity-50'
+                  )}
+                  style={
+                    chipColor
+                      ? {
+                          backgroundColor: `color-mix(in srgb, ${chipColor} 15%, white)`,
+                          color: `color-mix(in srgb, ${chipColor} 50%, black)`
+                        }
+                      : undefined
+                  }
+                >
+                  <span className="truncate">{option.label}</span>
+                  {isInteractive && (
+                    <button
+                      type="button"
+                      onClick={(e) => {
+                        e.stopPropagation()
+                        handleRemoveOption(option.value)
+                      }}
+                      className="inline-flex items-center justify-center rounded-full transition-colors translate-x-1 h-4 w-4 -m-0.5 p-0.5 hover:bg-black/10"
+                      aria-label={`Remove ${option.label}`}
+                      tabIndex={-1}
+                    >
+                      <Icon name="x-mark" className="h-2 w-2" />
+                    </button>
+                  )}
+                </span>
+              )
+            })}
+
+            {/* Search input */}
+            <Input
+              ref={inputRef}
+              autoComplete={props.inputAutocomplete ?? 'off'}
+              className="flex-1 min-w-[120px] px-0 bg-transparent border-0 focus:ring-0 focus:outline-none text-sm text-neutral-900 placeholder:text-neutral-400 py-0.5 disabled:cursor-not-allowed"
+              placeholder={selectedOptions.length === 0 ? (props.placeholder ?? 'Search to add...') : ''}
+              aria-describedby={helpTextId}
+              id={props.id}
+            />
+          </div>
+          <FormFieldComponents.ChevronButton className="py-0" />
+        </FormFieldComponents.FieldGroup>
+
+        {/* Options dropdown */}
+        <AnimatedPopover
+          triggerRef={fieldGroupRef}
+          offset={4}
+          style={{ width: fieldGroupSize.width, minWidth: fieldGroupSize.width }}
+        >
+          <div
+            className={tw(
+              'overflow-hidden rounded bg-white border border-neutral-200 shadow-lg text-sm w-full focus:outline-none'
+            )}
+          >
+            <ListBox
+              aria-label={props.label ? String(props.label) : 'Multicomplete'}
+              className="max-h-60 overflow-y-auto focus:outline-none"
+              renderEmptyState={() => (
+                <div className="px-3 py-2 text-neutral-500 text-sm">
+                  {props.isLoading ? 'Loading...' : query ? 'No results found' : 'No options available'}
+                </div>
+              )}
+            >
+              {(item) => {
+                const option = item as T & { index: number; id: string }
+                const color = props.colored ? getColor(stringToNumber(String(option.value))) : null
+
+                if (props.renderOption) {
+                  return (
+                    <ListBoxItem id={option.id} textValue={option.label} className="outline-none">
+                      {props.renderOption({ option, colored: props.colored ?? false, index: option.index })}
+                    </ListBoxItem>
+                  )
+                }
+
+                return (
+                  <FormFieldComponents.DropdownItem
+                    id={option.id}
+                    textValue={option.label}
+                    label={option.label}
+                    secondary={option.secondary}
+                    color={color}
+                    showCheckIcon={false}
+                    className="px-3"
+                  />
+                )
+              }}
+            </ListBox>
+          </div>
+        </AnimatedPopover>
+      </AriaComboBox>
+
+      <FormFieldComponents.FormFieldHelpText
+        id={helpTextId}
+        isInvalid={isInvalid}
+        validationMessage={validationMessage}
+        hasWarning={hasWarning}
+        warningMessage={props.warningMessage}
+        helpText={props.helpText}
+      />
+    </div>
+  )
+}
+
+// ── Helpers ──────────────────────────────────────────────────────────────────────
+
+function defaultFilterFunction<T extends MulticompleteOption>(options: readonly T[], inputValue: string): T[] {
+  if (!inputValue) return [...options]
+  return matchSorter(options, inputValue, {
+    keys: ['label', 'secondary']
+  })
+}

package/src/components/multiselect.tsx

@@ -0,0 +1,325 @@
+import * as React from 'react'
+import { ListBox, ListBoxItem } from 'react-aria-components'
+import { AnimatedPopover } from './helpers/animated-popover'
+import type { Selection } from 'react-aria-components'
+import { HeadlessForm } from '@maestro-js/form'
+import type { ValidationFunction, ValidationResult } from '@maestro-js/form'
+import { tw } from '../utils/tw'
+import { getColor, stringToNumber } from '../utils/colors'
+import { FormFieldComponents } from './helpers/form-field'
+import { useElementSize } from '../utils/use-element-size'
+import { composeRefs } from '../utils/compose-refs'
+import { Icon } from './icon'
+
+// ── Types ──────────────────────────────────────────────────────────────────────
+
+export type MultiselectOption = {
+  value: string | number
+  label: string
+  secondary?: string
+  isDisabled?: boolean
+}
+
+export type MultiselectProps<T extends MultiselectOption = MultiselectOption> = {
+  // Form identification
+  name?: string
+  form?: string
+
+  // Display elements
+  label?: React.ReactNode
+  cornerHint?: React.ReactNode
+  helpText?: React.ReactNode
+  placeholder?: string
+  warningMessage?: React.ReactNode
+
+  // Validation and state
+  isRequired?: boolean
+  isDisabled?: boolean
+  isInvalid?: boolean
+  validate?: ValidationFunction<T['value'][]>
+  errorMessage?: React.ReactNode | ((v: ValidationResult) => React.ReactNode)
+
+  // Value management
+  value?: T['value'][]
+  defaultValue?: T['value'][]
+  onChange?: (value: T['value'][]) => void
+
+  // Options
+  options: T[]
+  showSelectAll?: boolean
+  renderOption?: (props: { option: T; selected: boolean; colored: boolean; index: number }) => React.ReactNode
+
+  colored?: boolean
+  shape?: 'rectangle' | 'oval'
+}
+
+// ── Component ──────────────────────────────────────────────────────────────────
+
+export function Multiselect<T extends MultiselectOption = MultiselectOption>(props: MultiselectProps<T>) {
+  const hiddenInputRef = React.useRef<HTMLInputElement>(null)
+  const buttonRef = React.useRef<HTMLButtonElement>(null)
+  const [containerRef, setContainerRef] = React.useState<HTMLButtonElement | null>(null)
+  const helpTextId = React.useId()
+  const labelId = React.useId()
+  const [isOpen, setIsOpen] = React.useState(false)
+
+  // Controlled state management
+  const [selectedValues, setSelectedValues] = HeadlessForm.useControlledState(
+    props.value,
+    props.defaultValue ?? [],
+    props.onChange
+  )
+
+  // Form validation
+  const {
+    validationMessage,
+    isInvalid: validationInvalid,
+    commitValidation
+  } = HeadlessForm.useValidation(
+    {
+      validate: props.validate,
+      value: selectedValues,
+      name: props.name,
+      isRequired: props.isRequired,
+      form: props.form,
+      focus() {
+        buttonRef.current?.focus()
+      }
+    },
+    hiddenInputRef
+  )
+
+  const isInvalid = props.isInvalid || validationInvalid
+  const hasWarning = Boolean(props.warningMessage) && !isInvalid
+
+  // Find selected options
+  const selectedOptions = React.useMemo(() => {
+    return props.options.filter((option) => selectedValues.includes(option.value))
+  }, [props.options, selectedValues])
+
+  const containerSize = useElementSize(containerRef)
+
+  const handleRemoveOption = (option: T) => {
+    const newValues = selectedValues.filter((v) => v !== option.value)
+    setSelectedValues(newValues)
+    commitValidation()
+  }
+
+  const handleSelectAll = () => {
+    const availableOptions = props.options.filter((o) => !o.isDisabled)
+    if (selectedValues.length === availableOptions.length) {
+      setSelectedValues([])
+    } else {
+      setSelectedValues(availableOptions.map((o) => o.value))
+    }
+    commitValidation()
+  }
+
+  // Convert selectedValues to a Set<string> for React Aria
+  const selectedKeys = React.useMemo(() => {
+    return new Set(selectedValues.map((v) => String(v)))
+  }, [selectedValues])
+
+  const handleSelectionChange = (keys: Selection) => {
+    if (keys === 'all') {
+      const availableOptions = props.options.filter((o) => !o.isDisabled)
+      setSelectedValues(availableOptions.map((o) => o.value))
+    } else {
+      const keySet = keys as Set<string>
+      const newValues = props.options.filter((o) => keySet.has(String(o.value))).map((o) => o.value)
+      setSelectedValues(newValues)
+    }
+    commitValidation()
+  }
+
+  return (
+    <div className="relative">
+      {/* Hidden inputs for form submission */}
+      {selectedValues.map((value, i) => (
+        <HeadlessForm.HiddenInput
+          key={i}
+          ref={i === 0 ? hiddenInputRef : undefined}
+          name={props.name}
+          value={value}
+          form={props.form}
+        />
+      ))}
+      {selectedValues.length === 0 && (
+        <HeadlessForm.HiddenInput ref={hiddenInputRef} name={props.name} value="[]" form={props.form} />
+      )}
+
+      <FormFieldComponents.LabelRow label={props.label} cornerHint={props.cornerHint} labelId={labelId} />
+
+      {/* Trigger button */}
+      <button
+        ref={composeRefs(buttonRef, setContainerRef)}
+        type="button"
+        role="combobox"
+        aria-expanded={isOpen}
+        aria-haspopup="listbox"
+        aria-labelledby={props.label ? labelId : undefined}
+        aria-label={!props.label ? 'Multiselect' : undefined}
+        aria-invalid={isInvalid || undefined}
+        aria-describedby={helpTextId}
+        disabled={props.isDisabled}
+        onClick={() => {
+          if (!props.isDisabled) setIsOpen((prev) => !prev)
+        }}
+        onBlur={() => {
+          if (!isOpen) {
+            commitValidation()
+          }
+        }}
+        className={tw(
+          'relative overflow-hidden border transition-all duration-200 max-w-96',
+          props.shape === 'oval' ? 'rounded-full' : 'rounded',
+          'focus:outline-none focus:ring-1',
+          props.isDisabled && 'border-neutral-100 bg-neutral-50 text-neutral-400 cursor-not-allowed',
+          isInvalid && 'border-negative-200 bg-negative-50 focus:border-negative-500 focus:ring-negative-500/20',
+          hasWarning && 'border-notice-200 bg-notice-50 focus:border-notice-500 focus:ring-notice-500/20',
+          !isInvalid &&
+            !hasWarning &&
+            !props.isDisabled &&
+            'border-neutral-200 hover:border-neutral-300 focus:border-primary-500 focus:ring-primary-500/20',
+          'w-full cursor-default bg-white py-2 pl-3 pr-10 text-left'
+        )}
+      >
+        <div className="block text-sm min-h-5">
+          {selectedOptions.length === 0 ? (
+            <span className="text-neutral-300 italic">{props.placeholder ?? 'Select options'}</span>
+          ) : (
+            <div className="flex flex-wrap gap-1.5">
+              {selectedOptions.map((option) => {
+                const chipColor = props.colored ? getColor(stringToNumber(String(option.value))) : undefined
+                return (
+                  <span
+                    key={option.value}
+                    className={tw(
+                      'inline-flex items-center rounded-full font-normal transition-colors max-w-full px-2 py-0.5 text-xs',
+                      !chipColor && 'bg-primary-500/10 text-primary-500',
+                      props.isDisabled && 'opacity-50'
+                    )}
+                    style={
+                      chipColor
+                        ? {
+                            backgroundColor: `color-mix(in srgb, ${chipColor} 15%, white)`,
+                            color: `color-mix(in srgb, ${chipColor} 50%, black)`
+                          }
+                        : undefined
+                    }
+                  >
+                    <span className="truncate">{option.label}</span>
+                    {!props.isDisabled && (
+                      <button
+                        type="button"
+                        onClick={(e) => {
+                          e.stopPropagation()
+                          handleRemoveOption(option)
+                        }}
+                        className="inline-flex items-center justify-center rounded-full transition-colors translate-x-1 h-4 w-4 -m-0.5 p-0.5 hover:bg-black/10"
+                        aria-label={`Remove ${option.label}`}
+                        tabIndex={-1}
+                      >
+                        <Icon name="x-mark" className="h-2 w-2" />
+                      </button>
+                    )}
+                  </span>
+                )
+              })}
+            </div>
+          )}
+        </div>
+        <span className="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2">
+          <Icon name="chevron-up-down" className="h-4 w-4 text-neutral-400" />
+        </span>
+      </button>
+
+      {/* Options dropdown */}
+      <AnimatedPopover
+        triggerRef={buttonRef}
+        isNonModal
+        isOpen={isOpen && !props.isDisabled}
+        onOpenChange={(open) => {
+          setIsOpen(open)
+          if (!open) commitValidation()
+        }}
+        placement="bottom start"
+        offset={4}
+        style={{ width: containerSize.width, minWidth: containerSize.width }}
+      >
+          <div
+            className={tw(
+              'overflow-hidden rounded bg-white border border-neutral-200 shadow-lg text-sm w-full focus:outline-none'
+            )}
+          >
+            {props.showSelectAll && (
+              <button
+                type="button"
+                onClick={handleSelectAll}
+                className="w-full px-3 py-2 text-left hover:bg-neutral-50 border-b border-neutral-100 text-sm font-medium"
+              >
+                {selectedValues.length === props.options.filter((o) => !o.isDisabled).length ? 'Deselect All' : 'Select All'}
+              </button>
+            )}
+            <ListBox
+              aria-label={props.label ? String(props.label) : 'Multiselect'}
+              selectionMode="multiple"
+              selectedKeys={selectedKeys}
+              onSelectionChange={handleSelectionChange}
+              className="max-h-60 overflow-y-auto focus:outline-none"
+              items={props.options.map((option, index) => ({ ...option, index, id: String(option.value) }))}
+              renderEmptyState={() => <div className="px-3 py-2 text-neutral-500 text-sm">No options available</div>}
+            >
+              {(item) => {
+                const option = item as T & { index: number; id: string }
+                const color = props.colored ? getColor(stringToNumber(String(option.value))) : null
+
+                if (props.renderOption) {
+                  return (
+                    <ListBoxItem
+                      id={option.id}
+                      textValue={option.label}
+                      isDisabled={option.isDisabled}
+                      className="outline-none"
+                    >
+                      {({ isSelected }) => (
+                        <>
+                          {props.renderOption!({
+                            option,
+                            selected: isSelected,
+                            colored: props.colored ?? false,
+                            index: option.index
+                          })}
+                        </>
+                      )}
+                    </ListBoxItem>
+                  )
+                }
+
+                return (
+                  <FormFieldComponents.DropdownItem
+                    id={option.id}
+                    textValue={option.label}
+                    label={option.label}
+                    secondary={option.secondary}
+                    isDisabled={option.isDisabled}
+                    color={color}
+                    className="px-3"
+                  />
+                )
+              }}
+            </ListBox>
+          </div>
+      </AnimatedPopover>
+
+      <FormFieldComponents.FormFieldHelpText
+        id={helpTextId}
+        isInvalid={isInvalid}
+        validationMessage={validationMessage}
+        hasWarning={hasWarning}
+        warningMessage={props.warningMessage}
+        helpText={props.helpText}
+      />
+    </div>
+  )
+}