@codeleap/web 3.25.0 → 3.25.3

package/src/components/Select/index.tsx

@@ -1,5 +1,7 @@
+/** @jsx jsx */
+import { jsx } from '@emotion/react'
 import React, { useRef, forwardRef, useImperativeHandle } from 'react'
-import { FormTypes, useValidate, useState, TypeGuards, onUpdate, useEffect } from '@codeleap/common'
+import { FormTypes, useValidate, useState, TypeGuards, onUpdate, IconPlaceholder, useEffect } from '@codeleap/common'
 import _Select, { components, MenuListProps, MenuProps, MultiValueProps, NoticeProps } from 'react-select'
 import Async from 'react-select/async'
 import { useSelectStyles } from './styles'
@@ -11,25 +13,15 @@ import { View } from '../View'
 import { ActivityIndicator } from '../ActivityIndicator'
 import { CSSInterpolation } from '@emotion/css'
 import { Icon } from '../Icon'
-import { WebStyleRegistry } from '../../lib/WebStyleRegistry'
-import { AnyRecord, AppIcon, IJSX, StyledComponentProps, StyledComponentWithProps } from '@codeleap/styles'
 
 export * from './styles'
 export * from './types'
 
 const DefaultOption = (props: TCustomOption & { component: (props: TCustomOption) => JSX.Element }) => {
-  const {
-    isSelected,
-    optionsStyles,
-    label,
-    selectedIcon,
-    component = null,
-    itemProps = {} as TCustomOption['itemProps'],
-    isFocused,
-    debugName,
-  } = props
-
-  const styles = optionsStyles({ isSelected, isFocused, baseStyles: (itemProps?.style ?? {}) })
+  const { isSelected, optionsStyles, label, selectedIcon, component = null, itemProps = {} as TCustomOption['itemProps'], isFocused, debugName } = props
+
+  // @ts-ignore
+  const styles = optionsStyles({ isSelected, isFocused, baseStyles: (props?.data?.itemProps?.style ?? itemProps?.style ?? {}) })
 
   let _Component = null
 
@@ -41,7 +33,8 @@ const DefaultOption = (props: TCustomOption & { component: (props: TCustomOption
         rightIcon={isSelected && selectedIcon}
         debugName={debugName}
         {...itemProps}
-        style={styles}
+        {...props?.data?.itemProps}
+        styles={styles}
       />
     )
   } else {
@@ -50,13 +43,14 @@ const DefaultOption = (props: TCustomOption & { component: (props: TCustomOption
 
   return (
     <components.Option {...props}>
-      <_Component {...props} style={styles} />
+      <_Component {...props} styles={styles} />
     </components.Option>
   )
 }
 
 const CustomMenu = (props: MenuProps & { Footer: () => JSX.Element }) => {
   const { Footer, children } = props
+
   return <React.Fragment>
     <components.Menu {...props}>
       {children}
@@ -67,6 +61,7 @@ const CustomMenu = (props: MenuProps & { Footer: () => JSX.Element }) => {
 
 const CustomMenuList = (props: MenuListProps & { defaultStyles: { wrapper: React.CSSProperties } }) => {
   const { children, defaultStyles } = props
+
   return (
     <components.MenuList {...props}>
       <View style={defaultStyles.wrapper}>
@@ -77,13 +72,13 @@ const CustomMenuList = (props: MenuListProps & { defaultStyles: { wrapper: React
 }
 
 const DefaultPlaceholder = (props: PlaceholderProps) => {
-  const { text: TextPlaceholder, defaultStyles, icon: _IconPlaceholder, image, debugName } = props
+  const { text: TextPlaceholder, defaultStyles, icon: _IconPlaceholder, debugName } = props
 
   const _Text = () => {
     if (TypeGuards.isNil(TextPlaceholder)) return null
 
     if (TypeGuards.isString(TextPlaceholder)) {
-      return <Text debugName={debugName} text={TextPlaceholder} style={defaultStyles.text} />
+      return <Text debugName={debugName} text={TextPlaceholder} css={[defaultStyles.text]} />
     } else if (React.isValidElement(TextPlaceholder)) {
       return TextPlaceholder as JSX.Element
     } else if (TypeGuards.isFunction(TextPlaceholder)) {
@@ -92,14 +87,10 @@ const DefaultPlaceholder = (props: PlaceholderProps) => {
   }
 
   const _Image = () => {
-    if (TypeGuards.isNil(_IconPlaceholder) && TypeGuards.isNil(image)) return null
-
-    if (TypeGuards.isString(image)) {
-      return <img src={image} css={defaultStyles.icon} />
-    }
+    if (TypeGuards.isNil(_IconPlaceholder)) return null
 
     if (TypeGuards.isString(_IconPlaceholder)) {
-      return <Icon debugName={debugName} name={_IconPlaceholder as AppIcon} forceStyle={defaultStyles.icon as React.CSSProperties} />
+      return <Icon debugName={debugName} name={_IconPlaceholder as IconPlaceholder} forceStyle={defaultStyles.icon as React.CSSProperties} />
     } else if (React.isValidElement(_IconPlaceholder)) {
       // @ts-ignore
       return <View style={defaultStyles.icon}>
@@ -122,7 +113,7 @@ const LoadingIndicator = (props: LoadingIndicatorProps) => {
   const { defaultStyles, debugName } = props
 
   return (
-    <View style={defaultStyles.wrapper}>
+    <View css={[defaultStyles.wrapper]}>
       <ActivityIndicator debugName={debugName} />
     </View>
   )
@@ -154,15 +145,37 @@ const CustomMultiValue = (props: MultiValueProps & { defaultStyles: { text: CSSI
   // @ts-ignore
   const text = getMultiValue(selectProps?.value, separator, { searchable })
 
-  return <Text text={text} style={defaultStyles.text} />
+  return <Text text={text} css={[defaultStyles.text]} />
 }
 
 const defaultFormatPlaceholderNoItems = (props: PlaceholderProps & { text: string }) => {
   return props.text + `"${props.selectProps.inputValue}"`
 }
 
+const defaultProps: Partial<SelectProps> = {
+  PlaceholderComponent: DefaultPlaceholder,
+  PlaceholderNoItemsComponent: DefaultPlaceholder,
+  LoadingIndicatorComponent: LoadingIndicator,
+  noItemsText: 'No results for ',
+  noItemsIcon: 'placeholderNoItems-select',
+  placeholderText: 'Search items',
+  placeholderIcon: 'placeholder-select',
+  showDropdownIcon: true,
+  placeholder: 'Select',
+  clearable: false,
+  formatPlaceholderNoItems: defaultFormatPlaceholderNoItems,
+  selectedIcon: 'check',
+  searchable: false,
+  separatorMultiValue: ', ',
+  itemProps: {} as ButtonProps,
+  loadingIndicatorSize: 20,
+  options: [],
+  loadInitialValue: false,
+  loadingMessage: 'loading...',
+}
+
 export const Select = forwardRef<HTMLInputElement, SelectProps>(
- <T extends string | number = string, Multi extends boolean = false>
+  <T extends string | number = string, Multi extends boolean = false>
   (props: SelectProps<T, Multi>, inputRef: React.ForwardedRef<HTMLInputElement>) => {
 
     type Option = FormTypes.Option<T>
@@ -176,8 +189,9 @@ export const Select = forwardRef<HTMLInputElement, SelectProps>(
     })
 
     const {
+      variants,
       validate,
-      style,
+      styles,
       debugName,
       onValueChange,
       options,
@@ -195,10 +209,8 @@ export const Select = forwardRef<HTMLInputElement, SelectProps>(
       LoadingIndicatorComponent,
       noItemsText,
       noItemsIcon,
-      noItemsImage,
       placeholderText,
       placeholderIcon,
-      placeholderImage,
       showDropdownIcon,
       placeholder,
       clearable,
@@ -253,14 +265,13 @@ export const Select = forwardRef<HTMLInputElement, SelectProps>(
 
     const {
       reactSelectStyles,
-      styles,
+      variantStyles,
       optionsStyles,
       placeholderStyles,
       loadingStyles,
       inputMultiValueStyles,
       menuWrapperStyles,
-      // @ts-expect-error @verify
-    } = useSelectStyles({ ...props, styleRegistryName: Select.styleRegistryName }, {
+    } = useSelectStyles(props, {
       error: !!hasError,
       focused: isFocused,
       disabled: isDisabled,
@@ -335,7 +346,7 @@ export const Select = forwardRef<HTMLInputElement, SelectProps>(
       focused: isFocused,
       error: !!hasError,
       disabled: isDisabled,
-      styles,
+      variantStyles,
       debugName: debugName,
     }
 
@@ -343,17 +354,16 @@ export const Select = forwardRef<HTMLInputElement, SelectProps>(
       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
@@ -389,12 +399,12 @@ export const Select = forwardRef<HTMLInputElement, SelectProps>(
         debugName={debugName}
         error={hasError ? errorMessage : null}
         focused={isFocused}
-        style={{
-          ...styles,
-          innerWrapper: {
-            ...styles.innerWrapper,
-            ...(searchable ? styles['innerWrapper:searchable'] : {}),
-          },
+        styles={{
+          ...variantStyles,
+          innerWrapper: [
+            variantStyles.innerWrapper,
+            searchable && variantStyles['innerWrapper:searchable'],
+          ],
         }}
         innerWrapperProps={{
           ...(inputBaseProps.innerWrapperProps || {}),
@@ -410,6 +420,8 @@ export const Select = forwardRef<HTMLInputElement, SelectProps>(
           tabSelectsValue={false}
           tabIndex={0}
           backspaceRemovesValue={true}
+          // escapeRemoves={true}
+          // deleteRemoves={true}
           {...otherProps}
           {..._props}
           onKeyDown={isFocused ? handleKeyDown : null}
@@ -467,52 +479,6 @@ export const Select = forwardRef<HTMLInputElement, SelectProps>(
         />
       </InputBase>
     )
- }) as StyledComponentWithProps<SelectProps>
-
-Select.styleRegistryName = 'Select'
-
-Select.elements = [
-  ...InputBase.elements,
-  'item',
-  'listPortal',
-  'listHeader',
-  'listWrapper',
-  'list',
-  'inputContainer',
-  'input',
-  'placeholder',
-  'value',
-  'valueMultiple',
-  'valueWrapper',
-  'clearIcon',
-  'dropdownIcon',
-]
-
-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 Partial<SelectProps>
+  })
 
-WebStyleRegistry.registerComponent(Select)
+Select.defaultProps = defaultProps

package/src/components/Select/styles.ts

@@ -1,11 +1,9 @@
-import { capitalize, FormTypes } from '@codeleap/common'
-import { useNestedStylesByKey } from '@codeleap/styles'
+import { capitalize, createDefaultVariantFactory, FormTypes, getNestedStylesByKey, includePresets, useDefaultComponentStyle } from '@codeleap/common'
 import { CSSInterpolation } from '@emotion/css'
 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 { SelectProps } from './types'
 
 type ButtonParts = _ButtonParts
 
@@ -45,38 +43,57 @@ export type SelectState = 'error' | 'focus' | 'disabled'
 
 export type SelectComposition = SelectParts | `${SelectParts}:${SelectState}` | SelectStatefulParts
 
+const createSelectStyle = createDefaultVariantFactory<SelectComposition>()
+
+export const SelectPresets = includePresets((styles) => createSelectStyle(() => ({ wrapper: styles })))
+
 export type ComponentState = {
   error?: boolean
   focused?: boolean
   disabled?: boolean
 }
 
-export type OptionState = {
+export type OptionState = { 
   isSelected: boolean
   isFocused: boolean
-  baseStyles: SelectProps['itemProps']['style']
+  baseStyles: SelectProps['itemProps']['styles'] 
 }
 
-export function useSelectStyles<T, Multi extends boolean>(props: UseSelectStylesProps, state: ComponentState) {
-  const { style } = props
-
-  const { error, focused, disabled } = state
-
-  const styles = useStylesFor(props?.styleRegistryName, style)
+export function useSelectStyles<T, Multi extends boolean>(props: SelectProps<T, Multi>, state: ComponentState) {
+  const {
+    responsiveVariants = {},
+    variants,
+    styles,
+  } = props
+
+  const {
+    error,
+    focused,
+    disabled,
+  } = state
+
+  const variantStyles = useDefaultComponentStyle<'u:Select', typeof SelectPresets>(
+    'u:Select',
+    {
+      responsiveVariants,
+      variants,
+      styles,
+    },
+  )
 
   const stylesKey = (key: SelectParts | SelectStatefulParts, _styles: CSSObjectWithLabel = {}) => ({
     ..._styles,
-    ...styles[key],
-    ...(focused ? styles[key + ':focus'] : {}),
-    ...(disabled ? styles[key + ':disabled'] : {}),
-    ...(error ? styles[key + ':error'] : {}),
+    ...variantStyles[key],
+    ...(focused ? variantStyles[key + ':focus'] : {}),
+    ...(disabled ? variantStyles[key + ':disabled'] : {}),
+    ...(error ? variantStyles[key + ':error'] : {}),
   })
 
-  const optionNestedStyles = useNestedStylesByKey('item', styles)
+  const optionNestedStyles = getNestedStylesByKey('item', variantStyles)
 
   const optionStyleKey = (
     key: ButtonParts | `${ButtonParts}:${ItemState}`,
-    state: OptionState,
+    state: OptionState
   ) => {
     return {
       ...stylesKey(`item${capitalize(key)}` as any),
@@ -152,7 +169,7 @@ export function useSelectStyles<T, Multi extends boolean>(props: UseSelectStyles
   }
 
   return {
-    styles,
+    variantStyles,
     reactSelectStyles,
     optionsStyles,
     placeholderStyles,

package/src/components/Select/types.ts

@@ -1,13 +1,13 @@
-import { FormTypes, yup } from '@codeleap/common'
+import { ComponentVariants, FormTypes, PropsOf, StylesOf, yup } from '@codeleap/common'
 import { CSSInterpolation } from '@emotion/css'
+import { CSSObject } from '@emotion/react'
 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 { Button, ButtonProps } from '../Button'
 import { InputBaseProps } from '../InputBase'
-import { SelectComposition, OptionState } from './styles'
-import { StyledProp } from '@codeleap/styles'
+import { SelectPresets, SelectComposition, OptionState } from './styles'
 
 type SelectValue<T, Multi extends boolean> = Multi extends true ? T[] : T
 
@@ -26,20 +26,20 @@ type DynamicSelectProps<T, Multi extends boolean> =
     Props<FormTypes.Option<T>, Multi, GroupBase<FormTypes.Option<T>>>
   >)
 
-export type ReactSelectProps<T, Multi extends boolean = false> = Omit<InputBaseProps, 'style'> & {
-  options: FormTypes.Options<T>
+export type ReactSelectProps<T, Multi extends boolean = false> = Omit<InputBaseProps, 'styles' | 'variants'> &{
+  options: FormTypes.Options<T> & { itemProps?: PropsOf<typeof Button> }
   value: SelectValue<T, Multi>
   onValueChange?: (value: SelectValue<T, Multi>) => void
   multiple?: Multi
   validate?: FormTypes.ValidatorWithoutForm<SelectValue<T, Multi>> | yup.SchemaOf<SelectValue<T, Multi>>
-  style?: StyledProp<SelectComposition>
+  styles?: StylesOf<SelectComposition>
 } & DynamicSelectProps<T, Multi>
 
 export type ComponentPartProps = {
   focused: boolean
   error: boolean
   disabled: boolean
-  styles: Record<SelectComposition, React.CSSProperties>
+  variantStyles: Record<SelectComposition, React.CSSProperties>
 }
 
 export type TCustomOption = OptionProps & ComponentPartProps & ComponentCommonProps & {
@@ -47,6 +47,7 @@ export type TCustomOption = OptionProps & ComponentPartProps & ComponentCommonPr
   selectedIcon?: string
   itemProps?: ButtonProps
   styles?: OptionState['baseStyles']
+  data: OptionProps['data'] & { itemProps?: PropsOf<typeof Button>}
 }
 
 type SelectPlaceholderElement = string | ((props: PlaceholderProps) => JSX.Element) | JSX.Element
@@ -59,7 +60,6 @@ export type PlaceholderProps = NoticeProps & ComponentPartProps & {
     icon: CSSInterpolation
   }
   icon: SelectPlaceholderElement
-  image: HTMLImageElement['src']
 } & ComponentCommonProps
 
 export type LoadingIndicatorProps = NoticeProps & {
@@ -72,6 +72,7 @@ export type SelectProps<T = any, Multi extends boolean = false> = React.PropsWit
     debugName?: string
     clearable?: boolean
     closeOnSelect?: boolean
+    css?: CSSObject
     focused?: boolean
     _error?: string
     renderItem?: (props: TCustomOption) => JSX.Element
@@ -81,10 +82,8 @@ export type SelectProps<T = any, Multi extends boolean = false> = React.PropsWit
     LoadingIndicatorComponent?: (props: LoadingIndicatorProps) => JSX.Element
     noItemsText?: SelectPlaceholderElement
     noItemsIcon?: SelectPlaceholderElement
-    noItemsImage?: PlaceholderProps['image']
     placeholderText?: SelectPlaceholderElement
     placeholderIcon?: SelectPlaceholderElement
-    placeholderImage?: PlaceholderProps['image']
     showDropdownIcon?: boolean
     formatPlaceholderNoItems?: (props: PlaceholderProps & { text: string }) => string
     selectedIcon?: string
@@ -98,15 +97,12 @@ export type SelectProps<T = any, Multi extends boolean = false> = React.PropsWit
     limit?: number
     loadInitialValue?: boolean
     loadingMessage?: string
-    selectedOption?: { label: FormTypes.Label; value: T } | SelectValue<T, Multi>
+    selectedOption?: { label: FormTypes.Label; value: T; } | SelectValue<T, Multi>
     selectRef?: MutableRefObject<any>
-    setSelectedOption?: (value: { label: FormTypes.Label; value: T } | SelectValue<T, Multi>) => void
+    setSelectedOption?: (value: { label: FormTypes.Label; value: T; } | SelectValue<T, Multi>) => void
   } & Omit<
     ReactSelectProps<T, Multi>,
     'isSearchable' | 'isClearable' | 'isDisabled' | 'loadingMessage' | 'filterOption' |
     'isLoading' | 'menuPortalTarget' | 'closeMenuOnSelect' | 'isMulti'>
+    & ComponentVariants<typeof SelectPresets>
 >
-
-export type UseSelectStylesProps = SelectProps & {
-  styleRegistryName: string
-}