fix(select): improve event handlers

And the documentation
snowball-tech · Jul 10, 2023 · a3be64d · a3be64d
1 parent 131e33c
commit a3be64d
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 13 deletions.
diff --git a/packages/fractal/src/components/Select/Select.recipe.ts b/packages/fractal/src/components/Select/Select.recipe.ts
@@ -52,7 +52,7 @@ export const selectTrigger: ReturnType<typeof defineRecipe> = defineRecipe({
  '& > span[aria-hidden], & > span[aria-hidden] > svg': {
  height: '100%',
  },
- '&[data-placeholder] > span:not([aria-hidden])': {
+ '&[data-placeholder] > div > span': {
  color: `var(--color-text-select-placeholder)`,
  fontStyle: 'var(--style-text-placeholder)',
  },

diff --git a/packages/fractal/src/components/Select/Select.stories.tsx b/packages/fractal/src/components/Select/Select.stories.tsx
@@ -89,8 +89,9 @@ const meta = {
  },
  },
  },
- onOpenChange: { control: false },
- onValueChange: { control: false },
+ onClose: { control: false },
+ onOpen: { control: false },
+ onSelect: { control: false },
  },
  args: {
  autoFocus: false,

diff --git a/packages/fractal/src/components/Select/Select.tsx b/packages/fractal/src/components/Select/Select.tsx
@@ -38,8 +38,9 @@ export default function Select({
  id = uniqueId('fractal-select-'),
  label,
  name,
- onOpenChange,
- onValueChange,
+ onClose,
+ onOpen,
+ onSelect,
  open,
  placeholder,
  required = false,
@@ -82,16 +83,23 @@ export default function Select({
  required={required}
  {...(open !== undefined ? { open } : {})}
  {...(value !== undefined ? { value } : {})}
- {...(isFunction(onValueChange)
+ {...(isFunction(onSelect)
  ? {
- onValueChange: (newValue: string) => onValueChange(newValue),
+ onValueChange: (newValue: string) => onSelect(newValue),
  }
  : {})}
- {...(isFunction(onOpenChange)
+ {...(isFunction(onOpen) || isFunction(onClose)
  ? {
  onOpenChange: (isOpened: boolean) => {
  setIsOpen(isOpened)
- onOpenChange(isOpened)
+
+ if (isOpened) {
+ onOpen?.()
+
+ return
+ }
+
+ onClose?.()
  },
  }
  : {})}

diff --git a/packages/fractal/src/components/Select/Select.types.ts b/packages/fractal/src/components/Select/Select.types.ts
@@ -4,7 +4,8 @@ import type {
 } from '@radix-ui/react-select'
 import type { AllHTMLAttributes, ReactNode } from 'react'
 
-export interface SelectProps extends AllHTMLAttributes<HTMLSelectElement> {
+export interface SelectProps
+ extends Omit<AllHTMLAttributes<HTMLSelectElement>, 'onSelect'> {
  /** Indicates if autocompletion is possible in this select. */
  autoComplete?: string
  /** Indicates if the select must be opened on render. */
@@ -65,10 +66,12 @@ export interface SelectProps extends AllHTMLAttributes<HTMLSelectElement> {
  * If none is given, the ID (provided or auto-generated) will be used.
  */
  name?: string
+ /** Event handler called when the select dropdown is closed. */
+ onClose?: () => void
  /** Event handler called when the select dropdown is opened. */
- onOpenChange?: (isOpen: boolean) => void
- /** Event handler called when the selected value is changed. */
- onValueChange?: (newValue: string) => void
+ onOpen?: () => void
+ /** Event handler called when a value is selected. */
+ onSelect?: (newValue: string) => void
  /**
  * The controlled open state of the select.
  *