@codeleap/web 6.3.0 → 7.0.0

package/src/components/Select/styles.ts

@@ -1,172 +1,10 @@
-import { capitalize } from '@codeleap/utils'
-import { ICSS, useNestedStylesByKey } from '@codeleap/styles'
-import { CSSObjectWithLabel, GroupBase, StylesConfig } from 'react-select'
-import { ButtonParts as _ButtonParts } from '../Button'
-import { InputBaseParts } from '../InputBase'
-import { SelectProps, UseSelectStylesProps } from './types'
-import { useStylesFor } from '../../lib/hooks/useStylesFor'
-import { Option } from '@codeleap/types'
-
-type ButtonParts = _ButtonParts
-
-export type ItemParts = `item${Capitalize<ButtonParts>}`
+import { FieldParts } from '../Field'
 
 export type SelectParts =
-  InputBaseParts
-  | ItemParts
-  | 'listPortal'
-  | 'listHeader'
-  | 'listWrapper'
-  | 'list'
-  | 'inputContainer'
-  | 'input'
-  | 'placeholder'
-  | 'value'
-  | 'valueMultiple'
-  | 'valueWrapper'
-  | 'clearIcon'
-  | 'dropdownIcon'
-
-type ItemState = 'focused' | 'selected' | 'selectedFocused'
-
-export type SelectStatefulParts =
-  `${ItemParts}:${ItemState}`
-  | 'listPlaceholder'
-  | 'listPlaceholderIcon'
-  | 'listPlaceholderText'
-  | 'listPlaceholderNoItems'
-  | 'listPlaceholderNoItemsIcon'
-  | 'listPlaceholderNoItemsText'
-  | 'itemsWrapper'
-  | 'loadingIndicator'
-  | 'innerWrapper:searchable'
-
-export type SelectState = 'error' | 'focus' | 'disabled'
-
-export type SelectComposition = SelectParts | `${SelectParts}:${SelectState}` | SelectStatefulParts
-
-export type ComponentState = {
-  error?: boolean
-  focused?: boolean
-  disabled?: boolean
-  parentWidth?: number
-}
-
-export type OptionState = {
-  isSelected: boolean
-  isFocused: boolean
-  baseStyles: SelectProps['itemProps']['style']
-}
-
-export function useSelectStyles<T, Multi extends boolean>(props: UseSelectStylesProps, state: ComponentState) {
-  const { style } = props
-
-  const { error, focused, disabled, parentWidth } = state
-
-  const styles = useStylesFor(props?.styleRegistryName, style)
-
-  const stylesKey = (key: SelectParts | SelectStatefulParts, _styles: CSSObjectWithLabel = {}) => ({
-    ..._styles,
-    ...styles[key],
-    ...(focused ? styles[key + ':focus'] : {}),
-    ...(disabled ? styles[key + ':disabled'] : {}),
-    ...(error ? styles[key + ':error'] : {}),
-  })
-
-  const optionNestedStyles = useNestedStylesByKey('item', styles)
-
-  const optionStyleKey = (
-    key: ButtonParts | `${ButtonParts}:${ItemState}`,
-    state: OptionState,
-  ) => {
-    return {
-      ...stylesKey(`item${capitalize(key)}` as any),
-      ...(state?.isSelected ? optionNestedStyles[`${key}:selected`] : {}),
-      ...(state?.isFocused ? optionNestedStyles[`${key}:focused`] : {}),
-      ...(state?.isFocused && state?.isSelected ? optionNestedStyles[`${key}:selectedFocused`] : {}),
-      ...(state.baseStyles?.[key] as React.CSSProperties),
-    }
-  }
-
-  const optionsStyles = (state: OptionState): Record<ButtonParts, ICSS> => ({
-    wrapper: optionStyleKey('wrapper', state),
-    rightIcon: optionStyleKey('rightIcon', state),
-    text: optionStyleKey('text', state),
-    leftIcon: optionStyleKey('leftIcon', state),
-    icon: optionStyleKey('icon', state),
-    loaderWrapper: optionStyleKey('loaderWrapper', state),
-  })
-
-  const placeholderStyles = {
-    empty: {
-      wrapper: stylesKey('listPlaceholder'),
-      icon: stylesKey('listPlaceholderIcon'),
-      text: stylesKey('listPlaceholderText'),
-    },
-    noItems: {
-      wrapper: stylesKey('listPlaceholderNoItems'),
-      icon: stylesKey('listPlaceholderNoItemsIcon'),
-      text: stylesKey('listPlaceholderNoItemsText'),
-    },
-  }
-
-  const loadingStyles = {
-    wrapper: stylesKey('loadingIndicator'),
-  }
-
-  const inputMultiValueStyles = {
-    text: stylesKey('valueMultiple'),
-  }
-
-  const menuWrapperStyles = {
-    wrapper: stylesKey('itemsWrapper'),
-  }
-
-  const parseMenuPortalStyles = (baseStyles: CSSObjectWithLabel) => {
-    return {
-      ...baseStyles,
-      width: parentWidth,
-      left: `calc(${baseStyles.left}px - ((${parentWidth}px - ${baseStyles.width}px) / 2))`,
-    }
-  }
-
-  const reactSelectStyles: StylesConfig<Option<T>, Multi, GroupBase<Option<T>>> = {
-    container: (baseStyles) => stylesKey('inputContainer', baseStyles),
-    control: () => stylesKey('inputContainer'),
-    menuPortal: (baseStyles) => stylesKey('listPortal', parseMenuPortalStyles(baseStyles)),
-    menu: (baseStyles) => stylesKey('listWrapper', baseStyles),
-    menuList: (baseStyles) => stylesKey('list', baseStyles),
-    group: () => ({}),
-    indicatorSeparator: () => ({}),
-    groupHeading: (baseStyles) => stylesKey('listHeader', baseStyles),
-    clearIndicator: () => ({
-      ...stylesKey('iconIcon'),
-      ...stylesKey('clearIcon'),
-    }),
-    dropdownIndicator: () => ({
-      ...stylesKey('iconIcon'),
-      ...stylesKey('dropdownIcon'),
-    }),
-    indicatorsContainer: (baseStyles) => baseStyles,
-    input: (baseStyles) => stylesKey('input', baseStyles),
-    loadingIndicator: () => ({}),
-    loadingMessage: () => ({}),
-    multiValue: () => ({}),
-    multiValueLabel: () => ({}),
-    noOptionsMessage: () => ({}),
-    option: () => ({}),
-    placeholder: () => stylesKey('placeholder'),
-    singleValue: (baseStyles) => stylesKey('value', baseStyles),
-    valueContainer: (baseStyles) => stylesKey('valueWrapper', baseStyles),
-  }
+  FieldParts |
+  'trigger' | 'value' | 'placeholder' |
+  'popover' | 'list' |
+  'listItem' | 'listItemText' |
+  'emptyState'
 
-  return {
-    styles,
-    reactSelectStyles,
-    optionsStyles,
-    placeholderStyles,
-    loadingStyles,
-    inputMultiValueStyles,
-    menuWrapperStyles,
-  }
-}
+export type SelectComposition = SelectParts

package/src/components/Select/types.ts

@@ -1,113 +1,80 @@
-import { MutableRefObject } from 'react'
-import { GroupBase, NoticeProps, OptionProps, Props } from 'react-select'
-import { AsyncProps } from 'react-select/async'
-import { ComponentCommonProps } from '../../types'
-import { ButtonProps } from '../Button'
-import { InputBaseProps } from '../InputBase'
-import { SelectComposition, OptionState } from './styles'
-import { ICSS, StyledProp } from '@codeleap/styles'
-import { Label, Option, Options } from '@codeleap/types'
+import React, { RefObject } from 'react'
+import { type ListFocusHandle, type ListFocusStrategy } from '../../lib/hooks/useListFocus'
+import { FieldExternalProps } from '../Field'
+import { FieldStateContext } from '../Field/styles'
+import { ICSS, StyleProp } from '@codeleap/styles'
 import { Validator } from '@codeleap/form'
+import { type PopoverProps } from 'react-aria-components'
+import { SelectComposition } from './styles'
 
-type SelectValue<T, Multi extends boolean> = Multi extends true ? T[] : T
-
-type OmitWithValues<T> = Omit<T, 'options' | 'value' | 'isMulti' | 'loadOptions'|'styles'>
-
-type DynamicSelectProps<T, Multi extends boolean> =
-  ({
-    loadOptions?: (search: string) => Promise<Options<T>>
-    defaultValues?: Options<T>
-  } & OmitWithValues<
-    AsyncProps<Option<T>, Multi, GroupBase<Option<T>>>
-  >) |
-  ({
-    loadOptions?: never
-  } & OmitWithValues<
-    Props<Option<T>, Multi, GroupBase<Option<T>>>
-  >)
+export interface SelectStyleDef {
+  __internal: Record<SelectComposition, ICSS>
+}
 
-export type ReactSelectProps<T, Multi extends boolean = false> = Omit<InputBaseProps, 'style'> & {
-  options: Options<T> & { itemProps?: ButtonProps }
-  value: SelectValue<T, Multi>
-  onValueChange?: (value: SelectValue<T, Multi>) => void
-  multiple?: Multi
-  validate?: Validator<SelectValue<T, Multi>, any, any>
-} & DynamicSelectProps<T, Multi>
+/** Extends `FieldStateContext` with the multi-select flag so styles can react to selection mode. */
+export interface SelectFieldContext extends FieldStateContext {
+  multiple?: boolean
+}
 
-export type ComponentPartProps = {
-  focused: boolean
-  error: boolean
-  disabled: boolean
-  styles: Record<SelectComposition, React.CSSProperties>
+/** Visual state passed to the `renderItem` callback so custom item renderers can reflect selection and keyboard focus. */
+export type ItemRenderState = {
+  isSelected: boolean
+  isFocused: boolean
 }
 
-export type TCustomOption = OptionProps & ComponentPartProps & ComponentCommonProps & {
-  optionsStyles: (state: OptionState) => OptionState['baseStyles']
-  selectedIcon?: string
-  data: OptionProps['data'] & { itemProps?: ButtonProps}
-  itemProps?: ButtonProps
-  styles?: OptionState['baseStyles']
+/** Custom render overrides for `SelectList`; omit either to use the default `Text`-based rendering. */
+export type SelectListProps<
+  T extends { label: string; value: any } = { label: string; value: any }
+> = {
+  renderItem?: (item: T, state: ItemRenderState, focusList: (strategy?: ListFocusStrategy) => void) => React.ReactNode
+  renderEmpty?: (props: { style: ICSS; focusList: (strategy?: ListFocusStrategy) => void }) => React.ReactNode
 }
 
-type SelectPlaceholderElement = string | ((props: PlaceholderProps) => React.ReactElement) | React.ReactElement
+/**
+ * Props for `Select` and `SelectProvider`; the `Multi` type parameter switches `value` and `onValueChange` between a
+ * scalar and an array.
+ * @template T — option shape; must include `label: string` and `value: any`
+ * @template Multi — set to `true` to enable multi-select mode; defaults to `false`
+ */
+export type SelectProps<
+  T extends { label: string; value: any } = { label: string; value: any },
+  Multi extends boolean = false
+> = FieldExternalProps & {
+  debugName?: string
+  style?: StyleProp<SelectComposition, keyof SelectStyleDef>
 
-export type PlaceholderProps = NoticeProps & ComponentPartProps & {
-  text: SelectPlaceholderElement
-  defaultStyles: {
-    wrapper: ICSS
-    text: ICSS
-    icon: ICSS
-  }
-  icon: SelectPlaceholderElement
-  image: HTMLImageElement['src']
-} & ComponentCommonProps
+  options?: T[]
+  value?: Multi extends true ? T['value'][] : T['value']
+  onValueChange?: (value: Multi extends true ? T['value'][] : T['value']) => void
+  multiple?: Multi
+  /** Maximum number of simultaneously selected values; additional selections are silently ignored when the limit is reached. */
+  limit?: number
 
-export type LoadingIndicatorProps = NoticeProps & {
-  defaultStyles: { wrapper: ICSS }
-  size?: number
-} & ComponentCommonProps
+  placeholder?: string
+  disabled?: boolean
+  focused?: boolean
+  error?: string
+  validate?: Validator<Multi extends true ? T['value'][] : T['value'], any, any>
 
-export type SelectProps<T = any, Multi extends boolean = false> = React.PropsWithChildren<
-  {
-    debugName: string
-    clearable?: boolean
-    closeOnSelect?: boolean
-    focused?: boolean
-    _error?: string
-    renderItem?: (props: TCustomOption) => React.ReactElement
-    FooterComponent?: () => React.ReactElement
-    PlaceholderComponent?: (props: PlaceholderProps) => React.ReactElement
-    PlaceholderNoItemsComponent?: (props: PlaceholderProps) => React.ReactElement
-    LoadingIndicatorComponent?: (props: LoadingIndicatorProps) => React.ReactElement
-    noItemsText?: SelectPlaceholderElement
-    noItemsIcon?: SelectPlaceholderElement
-    noItemsImage?: PlaceholderProps['image']
-    placeholderText?: SelectPlaceholderElement
-    placeholderIcon?: SelectPlaceholderElement
-    placeholderImage?: PlaceholderProps['image']
-    showDropdownIcon?: boolean
-    formatPlaceholderNoItems?: (props: PlaceholderProps & { text: string }) => string
-    selectedIcon?: string
-    onLoadOptionsError?: (error: any) => void
-    loadOptionsOnMount?: boolean
-    searchable?: boolean
-    separatorMultiValue?: string
-    filterItems?: Props['filterOption']
-    itemProps?: ButtonProps
-    loadingIndicatorSize?: number
-    limit?: number
-    loadInitialValue?: boolean
-    loadingMessage?: string
-    selectedOption?: { label: Label; value: T } | SelectValue<T, Multi>
-    selectRef?: MutableRefObject<any>
-    setSelectedOption?: (value: { label: Label; value: T } | SelectValue<T, Multi>) => void
-    style?: StyledProp<SelectComposition>
-  } & Omit<
-    ReactSelectProps<T, Multi>,
-    'isSearchable' | 'isClearable' | 'isDisabled' | 'loadingMessage' | 'filterOption' |
-    'isLoading' | 'menuPortalTarget' | 'closeMenuOnSelect' | 'isMulti'>
->
+  /** Imperative handle; calling `.focus()` moves browser focus to `SelectTrigger`. */
+  ref?: RefObject<{ focus: () => void }>
 
-export type UseSelectStylesProps = SelectProps & {
-  styleRegistryName: string
-}
+  onBlur?: () => void
+  onFocus?: () => void
+
+  /** Placement of the popover relative to the trigger; forwarded to `react-aria-components` `Popover`. Defaults to `'bottom start'`. */
+  placement?: PopoverProps['placement']
+
+  /** External ref to the list's focus handle; useful for programmatic keyboard navigation from outside the component. */
+  listRef?: RefObject<ListFocusHandle | null>
+  onOpenChange?: (isOpen: boolean) => void
+  /** String used to join selected labels in the trigger display when `multiple` is true. Defaults to `', '`. */
+  separatorMultiValue?: string
+  /** When `true`, the popover closes immediately after any single selection (only relevant in multi-select mode, where the default is to stay open). */
+  closeOnSelect?: boolean
+} & SelectListProps<T>
+
+export type SelectProviderProps<
+  T extends { label: string; value: any } = { label: string; value: any },
+  Multi extends boolean = false
+> = SelectProps<T, Multi>

package/src/components/Select/useTriggerWidth.ts

@@ -0,0 +1,29 @@
+import { useCallback, useLayoutEffect, useEffect, useState, type RefObject } from 'react'
+
+// Workaround for https://github.com/adobe/react-spectrum/pull/9913
+// RAC <=1.17 only sets --trigger-width in built-in trigger components, not standalone Popovers.
+// Remove once upgraded to 1.18+.
+/**
+ * Measures the width of the element at `ref` and returns a CSS-properties object containing
+ * `--trigger-width` so that `SelectPopover` can match the trigger's width.
+ * Uses a `ResizeObserver` to keep the value up-to-date on layout changes.
+ */
+export function useTriggerWidth(ref: RefObject<Element | null>): React.CSSProperties {
+  const [width, setWidth] = useState<string | null>(null)
+
+  const measure = useCallback(() => {
+    if (ref.current) setWidth(ref.current.getBoundingClientRect().width + 'px')
+  }, [ref])
+
+  useLayoutEffect(measure, [measure])
+
+  useEffect(() => {
+    const el = ref.current
+    if (!el || typeof ResizeObserver === 'undefined') return
+    const observer = new ResizeObserver(measure)
+    observer.observe(el)
+    return () => observer.unobserve(el)
+  }, [ref, measure])
+
+  return { '--trigger-width': width } as React.CSSProperties
+}