@codeleap/web 6.3.0 → 6.8.0

package/src/components/Select/index.tsx

@@ -1,515 +1,85 @@
-import React, { useRef, forwardRef, useImperativeHandle } from 'react'
-import { useState, onUpdate, useEffect } from '@codeleap/hooks'
-import { Option, TypeGuards } from '@codeleap/types'
-import _Select, { components, MenuListProps, MenuProps, MultiValueProps, NoticeProps } from 'react-select'
-import Async from 'react-select/async'
-import { useSelectStyles } from './styles'
-import { LoadingIndicatorProps, PlaceholderProps, SelectProps, TCustomOption } from './types'
-import { InputBase, selectInputBaseProps } from '../InputBase'
-import { Button, ButtonProps } from '../Button'
-import { Text } from '../Text'
-import { View } from '../View'
-import { ActivityIndicator } from '../ActivityIndicator'
-import { Icon } from '../Icon'
+import React from 'react'
+import { Field } from '../Field'
 import { WebStyleRegistry } from '../../lib/WebStyleRegistry'
-import { AnyRecord, AppIcon, ICSS, IJSX, StyledComponentProps, StyledComponentWithProps } from '@codeleap/styles'
-import { useValidate } from '@codeleap/form'
+import { type SelectProps, type SelectListProps, type SelectProviderProps } from './types'
+import { SelectProvider, useSelectContext } from './context'
+import { SelectTrigger, SelectPopover, SelectList } from './elements'
 
 export * from './styles'
 export * from './types'
-
-const DefaultOption = (props: TCustomOption & { component: (props: TCustomOption) => React.ReactElement }) => {
-  const {
-    isSelected,
-    optionsStyles,
-    label,
-    selectedIcon,
-    component = null,
-    itemProps = {} as TCustomOption['itemProps'],
-    isFocused,
-    debugName,
-  } = props
-
-  const optionProps = props?.data?.itemProps
-
-  const styles = optionsStyles({ isSelected, isFocused, baseStyles: (optionProps?.style ?? itemProps?.style ?? {}) })
-
-  let _Component = null
-
-  if (TypeGuards.isNil(component)) {
-    _Component = () => (
-      <Button
-        text={label}
-        // @ts-ignore
-        rightIcon={isSelected && selectedIcon}
-        debugName={debugName}
-        {...itemProps}
-        {...optionProps}
-        style={styles}
-      />
-    )
-  } else {
-    _Component = component
-  }
-
-  return (
-    <components.Option {...props}>
-      <_Component {...props} style={styles} />
-    </components.Option>
-  )
-}
-
-const CustomMenu = (props: MenuProps & { Footer: () => React.ReactElement }) => {
-  const { Footer, children } = props
-  return <React.Fragment>
-    <components.Menu {...props}>
-      {children}
-      {!!Footer && <Footer />}
-    </components.Menu>
-  </React.Fragment>
-}
-
-const CustomMenuList = (props: MenuListProps & { defaultStyles: { wrapper: React.CSSProperties } }) => {
-  const { children, defaultStyles } = props
-  return (
-    <components.MenuList {...props}>
-      <View style={defaultStyles.wrapper}>
-        {children}
-      </View>
-    </components.MenuList>
-  )
-}
-
-const DefaultPlaceholder = (props: PlaceholderProps) => {
-  const { text: TextPlaceholder, defaultStyles, icon: _IconPlaceholder, image, debugName } = props
-
-  const _Text = () => {
-    if (TypeGuards.isNil(TextPlaceholder)) return null
-
-    if (TypeGuards.isString(TextPlaceholder)) {
-      return <Text debugName={debugName} text={TextPlaceholder} style={defaultStyles.text} />
-    } else if (React.isValidElement(TextPlaceholder)) {
-      return TextPlaceholder as React.ReactElement
-    } else if (TypeGuards.isFunction(TextPlaceholder)) {
-      return <TextPlaceholder {...props} />
-    }
-  }
-
-  let imageContent = null
-
-  if (React.isValidElement(image)) {
-    // @ts-ignore
-    imageContent = <img src={image} css={defaultStyles.icon} />
-  } else if (TypeGuards.isString(_IconPlaceholder)) {
-    imageContent = <Icon debugName={debugName} name={_IconPlaceholder as AppIcon} forceStyle={defaultStyles.icon as React.CSSProperties} />
-  } else if (React.isValidElement(_IconPlaceholder)) {
-    // @ts-ignore
-    imageContent = <View style={defaultStyles.icon}>
-      {_IconPlaceholder}
-    </View>
-  } else if (TypeGuards.isFunction(_IconPlaceholder)) {
-    imageContent = <_IconPlaceholder {...props} />
-  }
-
+export * from './context'
+export * from './elements'
+
+function SelectInner<
+  T extends { label: string; value: any } = { label: string; value: any },
+  Multi extends boolean = false
+>(props: SelectProps<T, Multi>) {
+  const { styles } = useSelectContext()
   return (
-    <View style={defaultStyles.wrapper as React.CSSProperties}>
-      {imageContent}
-      <_Text />
-    </View>
+    <Field.Wrapper style={styles.wrapper}>
+      <Field.Heading style={styles.heading} />
+      <SelectTrigger />
+      <SelectPopover>
+        <SelectList<T>
+          renderItem={props.renderItem as SelectListProps<T>['renderItem']}
+          renderEmpty={props.renderEmpty as SelectListProps<T>['renderEmpty']}
+        />
+      </SelectPopover>
+      <Field.Helper style={styles.helper} />
+    </Field.Wrapper>
   )
 }
 
-const LoadingIndicator = (props: LoadingIndicatorProps) => {
-  const { defaultStyles, debugName } = props
-
+/**
+ * Accessible dropdown select field supporting both single and multi-select modes, field layout, and validation.
+ * Controlled via `value` / `onValueChange`; pass `multiple` to switch to array-based selection.
+ * Exposes sub-components as static properties (`Select.Trigger`, `Select.Popover`, `Select.List`, `Select.Provider`)
+ * and a typed factory `Select.of<T, Multi>()` for composing custom select UIs without casting.
+ * Uses: `SelectProvider`, `SelectTrigger`, `SelectPopover`, `SelectList`, `Field.Wrapper`, `Field.Heading`, `Field.Helper`
+ */
+export function Select<
+  T extends { label: string; value: any } = { label: string; value: any },
+  Multi extends boolean = false
+>(props: SelectProps<T, Multi>) {
+  const allProps = {
+    ...Select.defaultProps,
+    ...props
+  } as SelectProps<T, Multi>
   return (
-    <View style={defaultStyles.wrapper}>
-      <ActivityIndicator debugName={debugName} />
-    </View>
+    <SelectProvider {...(allProps as SelectProviderProps)}>
+      <SelectInner<T, Multi> {...allProps} />
+    </SelectProvider>
   )
 }
 
-const getMultiValue = (values: { label: string }[], separator: string, state: { searchable: boolean }) => {
-  let value = ''
-  const hasMulti = values?.length > 1
-
-  values.forEach(({ label }, i) => {
-    const isLast = values?.length - 1 === i
-    const txt = (hasMulti && separator)
-      ? label + (isLast && !state?.searchable ? '' : separator)
-      : label
-
-    value = value + txt
-  })
-
-  return value
-}
-
-const CustomMultiValue = (props: MultiValueProps & { defaultStyles: { text: ICSS }; separator: string }) => {
-  const { selectProps, index, defaultStyles, separator } = props
-
-  const searchable = selectProps?.isSearchable
-
-  if (index !== 0 || selectProps.inputValue.length > 0) return null
-
-  // @ts-ignore
-  const text = getMultiValue(selectProps?.value, separator, { searchable })
-
-  return <Text text={text} style={defaultStyles.text} />
-}
-
-const defaultFormatPlaceholderNoItems = (props: PlaceholderProps & { text: string }) => {
-  return props.text + `"${props.selectProps.inputValue}"`
-}
-
-export const Select = forwardRef<HTMLInputElement, SelectProps>(
-  <T extends string | number = string, Multi extends boolean = false>
-  (props: SelectProps<T, Multi>, inputRef: React.ForwardedRef<HTMLInputElement>) => {
-    const {
-      inputBaseProps,
-      others: selectProps,
-    } = selectInputBaseProps({
-      ...Select.defaultProps,
-      ...props,
-    })
-
-    const {
-      validate,
-      style,
-      debugName,
-      onValueChange,
-      options,
-      value,
-      loadOptions,
-      multiple,
-      limit = null,
-      loadInitialValue,
-      focused,
-      _error,
-      renderItem: OptionComponent = null,
-      FooterComponent = null,
-      PlaceholderComponent,
-      PlaceholderNoItemsComponent,
-      LoadingIndicatorComponent,
-      noItemsText,
-      noItemsIcon,
-      noItemsImage,
-      placeholderText,
-      placeholderIcon,
-      placeholderImage,
-      showDropdownIcon,
-      placeholder,
-      clearable,
-      formatPlaceholderNoItems,
-      closeOnSelect = !multiple,
-      selectedIcon,
-      onLoadOptionsError,
-      loadOptionsOnMount = options?.length === 0,
-      searchable,
-      separatorMultiValue,
-      filterItems = null,
-      itemProps = {},
-      loadingIndicatorSize,
-      selectedOption: _selectedOption,
-      setSelectedOption: _setSelectedOption,
-      loadingMessage,
-      selectRef = null,
-      ...otherProps
-    } = selectProps
-
-    const _innerInputRef = useRef<any>(null)
-    const innerInputRef = selectRef || _innerInputRef
-    const innerWrapperRef = useRef<HTMLDivElement>(null)
-
-    const hasSelectedOptionState = !TypeGuards.isNil(_selectedOption) && TypeGuards.isFunction(_setSelectedOption)
-
-    const initialValue = (loadInitialValue && !TypeGuards.isNil(options))
-      ? options?.find((option) => option?.value === value)
-      : value
-
-    const [selectedOption, setSelectedOption] = hasSelectedOptionState ? [_selectedOption, _setSelectedOption] : useState(initialValue ?? value)
-
-    useEffect(() => {
-      if (loadInitialValue && !selectedOption && !!initialValue) {
-        setSelectedOption(initialValue)
-      }
-    }, [!!initialValue])
-
-    const [_isFocused, setIsFocused] = useState(false)
-    const [loadedOptions, setLoadedOptions] = useState(false)
-    const [keyDownActive, setKeyDownActive] = useState(false)
-
-    const isFocused = _isFocused || focused
-
-    const validation = useValidate(value, validate)
-
-    const isDisabled = !!inputBaseProps.disabled
-
-    const hasError = validation?.showError || _error
-    const errorMessage = validation?.message || _error
-
-    const {
-      reactSelectStyles,
-      styles,
-      optionsStyles,
-      placeholderStyles,
-      loadingStyles,
-      inputMultiValueStyles,
-      menuWrapperStyles,
-      // @ts-ignore
-    } = useSelectStyles({ ...props, styleRegistryName: Select.styleRegistryName }, {
-      error: !!hasError,
-      focused: isFocused,
-      disabled: isDisabled,
-      parentWidth: innerWrapperRef?.current?.clientWidth,
-    })
-
-    useImperativeHandle(inputRef, () => {
-      return {
-        ...innerInputRef.current,
-        focus: () => {
-          innerInputRef.current?.focus?.()
-        },
-      }
-    }, [!!innerInputRef?.current?.focus])
-
-    const onLoadOptions = async (inputValue, cb) => {
-      if (!!loadOptions) {
-        try {
-          const _options = await loadOptions(inputValue).then((options) => {
-            cb(options)
-            return options
-          })
-
-          if (loadInitialValue && !TypeGuards.isNil(_options) && !loadedOptions) {
-            const _initialValue = _options?.find?.((option) => option?.value === value)
-            if (!!_initialValue) setSelectedOption(_initialValue)
-          }
-
-          setLoadedOptions(true)
-
-          return _options
-        } catch (err) {
-          onLoadOptionsError?.(err)
-        }
-
-        return
-      }
-    }
-
-    const handleChange = (opt: Multi extends true ? Option<T>[] : Option<T>) => {
-      if (TypeGuards.isArray(opt)) {
-        // @ts-ignore
-        if (TypeGuards.isNumber(limit) && opt?.length > limit && opt?.length > selectedOption?.length) {
-          return
-        }
-        // @ts-ignore
-        setSelectedOption(opt)
-        // @ts-ignore
-        onValueChange?.(opt?.map((o) => o?.value))
-      } else {
-        // @ts-ignore
-        setSelectedOption(opt)
-        // @ts-ignore
-        onValueChange?.(opt?.value)
-      }
-    }
-
-    const handleBlur: SelectProps['onBlur'] = React.useCallback((e) => {
-      validation?.onInputBlurred()
-      setIsFocused(false)
-      props?.onBlur?.(e)
-    }, [validation?.onInputBlurred, props?.onBlur])
-
-    const handleFocus: SelectProps['onFocus'] = React.useCallback((e) => {
-      setIsFocused(true)
-      props?.onFocus?.(e)
-    }, [props?.onFocus])
-
-    const SelectComponent = !!loadOptions ? Async : _Select
-
-    const componentProps = {
-      focused: isFocused,
-      error: !!hasError,
-      disabled: isDisabled,
-      styles,
-      debugName: debugName,
-    }
-
-    const _Placeholder = (props: NoticeProps) => {
-      const hasInputValue = !!props.selectProps.inputValue
-      const styles = placeholderStyles[hasInputValue ? 'noItems' : 'empty']
-      const icon = hasInputValue ? noItemsIcon : placeholderIcon
-      const image = hasInputValue ? noItemsImage : placeholderImage
-
-      const placeholderProps = {
-        ...props,
-        ...componentProps,
-        icon,
-        image,
-        defaultStyles: styles,
-      }
-
-      if (!hasInputValue) {
-        return <PlaceholderComponent {...placeholderProps} text={placeholderText} />
-      } else {
-        const _Text = TypeGuards.isString(noItemsText) ? formatPlaceholderNoItems({ ...placeholderProps, text: noItemsText }) : noItemsText
-        return <PlaceholderNoItemsComponent {...placeholderProps} text={_Text} />
-      }
-    }
-
-    const _props = {
-      ...(!filterItems ? {} : { filterOption: filterItems }),
-    }
-
-    onUpdate(() => {
-      if (!_isFocused) {
-        setKeyDownActive(false)
-      }
-    }, [_isFocused])
-
-    const handleKeyDown = () => {
-      setKeyDownActive(true)
-    }
-
-    const MenuComponent = React.useCallback((props) => {
-      return <CustomMenu {...props} Footer={FooterComponent} />
-    }, [FooterComponent])
-
-    const MenuListComponent = React.useCallback((props) => {
-      return <CustomMenuList {...props} defaultStyles={menuWrapperStyles} />
-    }, [])
-
-    return (
-      <InputBase
-        {...inputBaseProps}
-        debugName={debugName}
-        error={hasError ? errorMessage : null}
-        focused={isFocused}
-        style={{
-          ...styles,
-          innerWrapper: {
-            ...styles.innerWrapper,
-            ...(searchable ? styles['innerWrapper:searchable'] : {}),
-          },
-        }}
-        innerWrapperProps={{
-          ...(inputBaseProps.innerWrapperProps || {}),
-          onClick: () => {
-            innerInputRef.current?.focus?.()
-          },
-        }}
-        innerWrapperRef={innerWrapperRef}
-      >
-        <SelectComponent
-          openMenuOnFocus={true}
-          hideSelectedOptions={false}
-          tabSelectsValue={false}
-          tabIndex={0}
-          backspaceRemovesValue={true}
-          menuPortalTarget={typeof document === 'undefined' ? undefined : document.body}
-          {...otherProps}
-          {..._props}
-          onKeyDown={isFocused ? handleKeyDown : null}
-          onBlur={handleBlur}
-          onFocus={handleFocus}
-          onChange={handleChange}
-          styles={reactSelectStyles}
-          value={selectedOption as any}
-          isMulti={multiple}
-          options={options}
-          loadOptions={onLoadOptions as any}
-          defaultOptions={loadOptionsOnMount}
-          ref={innerInputRef}
-          closeMenuOnSelect={closeOnSelect}
-          placeholder={(loadOptionsOnMount && !loadedOptions) ? loadingMessage : placeholder}
-          isDisabled={isDisabled}
-          isClearable={clearable}
-          isSearchable={searchable}
-          components={{
-            LoadingIndicator: () => null,
-            ...otherProps.components,
-            MultiValueRemove: () => null,
-            LoadingMessage: props => (
-              <LoadingIndicatorComponent
-                {...props}
-                defaultStyles={loadingStyles}
-                size={loadingIndicatorSize}
-                debugName={debugName}
-              />
-            ),
-            DropdownIndicator: props => showDropdownIcon ? <components.DropdownIndicator {...props} /> : null,
-            NoOptionsMessage: props => <_Placeholder {...props} />,
-            Menu: MenuComponent,
-            MenuList: MenuListComponent,
-            Option: props => (
-              <DefaultOption
-                {...props}
-                {...componentProps}
-                itemProps={itemProps as ButtonProps}
-                selectedIcon={selectedIcon}
-                optionsStyles={optionsStyles}
-                component={OptionComponent}
-                isFocused={props?.isFocused && keyDownActive}
-              />
-            ),
-            MultiValue: props => (
-              <CustomMultiValue
-                {...props}
-                separator={separatorMultiValue}
-                defaultStyles={inputMultiValueStyles}
-              />
-            ),
-          }}
-        />
-      </InputBase>
-    )
-  }) as StyledComponentWithProps<SelectProps>
-
+Select.displayName = 'Select'
 Select.styleRegistryName = 'Select'
-
 Select.elements = [
-  ...InputBase.elements,
-  'item',
-  'listPortal',
-  'listHeader',
-  'listWrapper',
-  'list',
-  'inputContainer',
-  'input',
-  'placeholder',
-  'value',
-  'valueMultiple',
-  'valueWrapper',
-  'clearIcon',
-  'dropdownIcon',
+  ...Field.elements,
+  'trigger', 'value',
+  'popover', 'list', 'listItem', 'listItemText',
+  'emptyState', 'placeholder'
 ]
-
 Select.rootElement = 'wrapper'
-
-Select.withVariantTypes = <S extends AnyRecord>(styles: S) => {
-  return Select as (props: StyledComponentProps<SelectProps, typeof styles>) => IJSX
-}
-
 Select.defaultProps = {
-  PlaceholderComponent: DefaultPlaceholder,
-  PlaceholderNoItemsComponent: DefaultPlaceholder,
-  LoadingIndicatorComponent: LoadingIndicator,
-  noItemsText: 'No results for ',
-  placeholderText: 'Search items',
-  placeholderIcon: 'search',
-  showDropdownIcon: true,
-  placeholder: 'Select',
-  clearable: false,
-  formatPlaceholderNoItems: defaultFormatPlaceholderNoItems,
-  selectedIcon: 'check',
-  searchable: false,
   separatorMultiValue: ', ',
-  itemProps: {} as ButtonProps,
-  loadingIndicatorSize: 20,
   options: [],
-  loadInitialValue: false,
-  loadingMessage: 'loading...',
-} as unknown as Partial<SelectProps>
+} as Partial<SelectProps<any, any>>
+
+Select.Provider = SelectProvider
+Select.Trigger = SelectTrigger
+Select.Popover = SelectPopover
+Select.List = SelectList
+Select.useContext = useSelectContext
+
+Select.of = <
+  T extends { label: string; value: any },
+  Multi extends boolean = false
+>() => ({
+  Provider: SelectProvider as React.ComponentType<React.PropsWithChildren<SelectProviderProps<T, Multi>>>,
+  List: SelectList as React.ComponentType<SelectListProps<T>>,
+  Trigger: SelectTrigger,
+  Popover: SelectPopover,
+})
 
 WebStyleRegistry.registerComponent(Select)