react-select#StylesConfig TypeScript Examples

modifyStyles = <OptionType extends OptionTypeBase, IsMulti extends boolean>(
  externalStyles?: StylesConfig<OptionType, IsMulti>
): StylesConfig<OptionType, IsMulti> => ({
  ...externalStyles,
  valueContainer(prevStyles, state) {
    const defaultStyles: CSSObject = {
      ...prevStyles,
      padding: '2px 0',
      marginLeft: state.isMulti ? '-2px' : undefined,
    }
    if (externalStyles?.valueContainer) {
      return externalStyles.valueContainer(defaultStyles, state)
    }
    return defaultStyles
  },
  control(_, state) {
    if (externalStyles?.control) {
      return externalStyles.control({}, state)
    }
    return {}
  },
})

miniReactSelectStyles: StylesConfig<any, false, any> = mergeStyles(
    defaultReactSelectStyles,
    {
        control: (styles) => ({
            ...styles,
            padding: '0px',
            margin: '0px,',
            minHeight: '0px',
        }),
        input: (styles) => ({
            ...styles,
            padding: '0px',
            margin: '0px,',
            minHeight: '0px',
        }),
        dropdownIndicator: (styles) => ({
            ...styles,
            padding: '0px 4px',
        }),
    }
)

asyncReactSelectStyles: StylesConfig<
    any,
    false,
    any
> = mergeStyles(defaultReactSelectStyles, {
    dropdownIndicator: (styles) => ({
        ...styles,
        display: 'none',
    }),
})

miniAsyncReactSelectStyles: StylesConfig<
    any,
    false,
    any
> = mergeStyles(miniReactSelectStyles, {
    dropdownIndicator: (styles) => ({
        ...styles,
        display: 'none',
    }),
})

formSelectStyle = extend<StylesConfig<{}, false>>()({
  control: (previous) => ({
    ...previous,
    height: 46,
    backgroundColor: "#f7fafc",
    borderColor: "#edf2f7",
  }),
})

ClassNameSelect = React.memo(
  React.forwardRef<HTMLInputElement>((_, ref) => {
    const theme = useColorTheme()
    const targets = useEditorState((store) => store.editor.selectedViews, 'ClassNameSelect targets')
    const dispatch = useEditorState((store) => store.dispatch, 'ClassNameSelect dispatch')
    const [input, setInput] = React.useState('')
    const focusedValueRef = React.useRef<string | null>(null)
    const updateFocusedOption = usePubSubAtomWriteOnly(focusedOptionAtom)
    const clearFocusedOption = React.useCallback(() => {
      updateFocusedOption(null)
      dispatch([EditorActions.clearTransientProps()], 'canvas')
    }, [updateFocusedOption, dispatch])

    const isMenuOpenRef = React.useRef(false)
    const onMenuClose = React.useCallback(() => {
      isMenuOpenRef.current = false
      clearFocusedOption()
    }, [clearFocusedOption])
    const onMenuOpen = React.useCallback(() => {
      isMenuOpenRef.current = true
    }, [])

    const filteredOptions = useFilteredOptions(input, MaxResults, clearFocusedOption)

    React.useEffect(() => {
      return function cleanup() {
        dispatch([EditorActions.clearTransientProps()], 'canvas')
      }
      /** deps is explicitly empty */
      // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [])

    const { selectedClasses, elementPaths, isSettable } = useGetSelectedClasses()
    const selectedValues = selectedClasses.map(getTailwindOptionForClassName)
    const elementPath = elementPaths[0]
    const isMenuEnabled = isSettable && elementPaths.length === 1

    const ariaOnFocus = React.useCallback(
      ({ focused, context }: { focused: TailWindOption; context: 'menu' | 'value' }) => {
        if (context === 'menu') {
          if (isMenuOpenRef.current) {
            if (targets.length === 1) {
              const newClassNameString =
                selectedValues?.map((v) => v.label).join(' ') + ' ' + focused.label
              if (queuedDispatchTimeout != null) {
                window.clearTimeout(queuedDispatchTimeout)
              }
              queuedDispatchTimeout = window.setTimeout(() => {
                dispatch(
                  [
                    EditorActions.setPropTransient(
                      targets[0],
                      PP.create(['className']),
                      jsxAttributeValue(newClassNameString, emptyComments),
                    ),
                  ],
                  'canvas',
                )
              }, 10)
            }
            updateFocusedOption(focused)
          }
        } else if (context === 'value') {
          focusedValueRef.current = focused.value
        }
      },
      [updateFocusedOption, dispatch, targets, selectedValues],
    )
    const ariaLiveMessages = React.useMemo(() => ({ onFocus: ariaOnFocus }), [ariaOnFocus])

    const onChange = React.useCallback(
      (newValue: Array<{ label: string; value: string }>) => {
        if (elementPath != null) {
          if (queuedDispatchTimeout != null) {
            window.clearTimeout(queuedDispatchTimeout)
            queuedDispatchTimeout = undefined
          }

          dispatch(
            [
              EditorActions.setProp_UNSAFE(
                elementPath,
                PP.create(['className']),
                jsxAttributeValue(newValue.map((value) => value.value).join(' '), emptyComments),
              ),
              EditorActions.clearTransientProps(),
            ],
            'everyone',
          )
        }
      },
      [dispatch, elementPath],
    )

    const colourStyles: StylesConfig = React.useMemo(
      () => ({
        container: (styles: React.CSSProperties) => ({
          // the outermost element. It contains the popup menu, so don't set a height on it!
          // shouldn't contain any sizing
          ...styles,
          width: '100%',
        }),
        control: (styles) => ({
          // need to remove styles here, since that implicitly sets a height of 38
          // ...styles,
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'space-between',
          background: 'transparent',
          outline: 'none',
          ':focus-within': {
            outline: 'none',
            border: 'none',
          },
        }),
        valueContainer: () => ({
          // the container for added options (tags) and input
          // sibling to indicatorsContainer
          // default styles mess with layout, so ignore them
          display: 'flex',
          alignItems: 'center',
          gap: 4,
          maxWidth: 0,
        }),
        multiValue: (style, state) => {
          return {
            cursor: 'pointer',
            display: 'flex',
            alignItems: 'center',
            height: 18,
            border: `1px solid ${theme.inverted.primary.value}`,
            borderRadius: UtopiaTheme.inputBorderRadius,
            backgroundColor: state.isFocused
              ? theme.inverted.primary.value
              : theme.inverted.bg1.value,
          }
        },
        multiValueLabel: () => ({
          fontSize: 10,
          padding: '2px 4px',
          color: theme.inverted.textColor.value,
        }),
        multiValueRemove: (styles: React.CSSProperties, { data }) => ({
          width: 11,
          display: 'flex',
          paddingTop: 2,
          opacity: 0.4,
          color: data.color,
          ':hover': {
            opacity: 1,
            backgroundColor: data.color,
            color: theme.inverted.textColor.value,
          },
          '& > svg': {
            overflow: 'hidden',
          },
        }),
        input: () => {
          return {
            fontSize: 11,
            color: theme.inverted.textColor.value,
            letterSpacing: 0.3,
            background: 'transparent',
            display: 'flex',
            alignItems: 'center',
          }
        },
        indicatorsContainer: (styles) => ({
          ...styles,
          height: 20,
        }),
        menu: (styles) => ({
          ...styles,
          backgroundColor: theme.inverted.bg1.value,
          zIndex: 100,
        }),
        option: (styles: React.CSSProperties, { data, isDisabled, isFocused, isSelected }) => {
          // a single entry in the options list
          const optionColors = getOptionColors(theme, isFocused, isSelected, isDisabled, data)
          return {
            minHeight: 27,
            display: 'flex',
            alignItems: 'center',
            paddingLeft: 8,
            paddingRight: 8,
            backgroundColor: optionColors.backgroundColor,
            color: optionColors.color,
            cursor: isDisabled ? 'not-allowed' : 'default',

            ':active': {
              ...(styles as any)[':active'],
              backgroundColor: optionColors.activeBackgroundColor,
            },
          }
        },
      }),
      [theme],
    )

    const onInputChange = React.useCallback(
      (newInput: string, actionMeta: InputActionMeta) => {
        if (newInput === '') {
          dispatch([EditorActions.clearTransientProps()], 'canvas')
        }
        setInput(newInput)
        focusedValueRef.current = null
      },
      [dispatch, setInput],
    )

    const handleKeyDown = React.useCallback(
      (event: React.KeyboardEvent<HTMLDivElement>) => {
        if (event.key === 'Backspace') {
          if (focusedValueRef.current != null) {
            setInput(focusedValueRef.current)
            focusedValueRef.current = null
            if (ref != null) {
              ;(ref as any).current.focus()
            }
          }
        }
      },
      [setInput, ref],
    )

    return (
      <div
        css={{
          height: 22,
          borderRadius: 3,
          position: 'relative',
          padding: 4,
          flexGrow: 1,
          display: 'flex',
          alignItems: 'center',
          '&:focus-within': { boxShadow: `0px 0px 0px 1px ${theme.primary.value}` },
        }}
        onKeyDown={handleKeyDown}
      >
        <WindowedSelect
          ref={ref}
          ariaLiveMessages={ariaLiveMessages}
          filterOption={filterOption}
          formatOptionLabel={formatOptionLabel}
          options={filteredOptions}
          onChange={onChange}
          onInputChange={onInputChange}
          inputValue={input}
          onMenuClose={onMenuClose}
          onMenuOpen={onMenuOpen}
          value={selectedValues}
          isMulti={true}
          isDisabled={!isMenuEnabled}
          maxMenuHeight={138}
          styles={colourStyles}
          components={{
            DropdownIndicator,
            ClearIndicator,
            IndicatorSeparator,
            NoOptionsMessage,
            Menu,
            ValueContainer,
            Input,
          }}
        />
      </div>
    )
  }),
)

defaultReactSelectStyles: Partial<
    StylesConfig<any, false, any>
> = {
    control: (styles, { isFocused }) => ({
        ...styles,
        backgroundColor: 'var(--bg-light)',
        boxShadow: 'none',
        borderRadius: 'var(--border-radius-sm)',
        border: 'none',
        borderWidth: '0px',
        '&:hover': {
            backgroundColor: 'var(--bg-hover)',
        },
    }),
    input: (styles) => ({
        ...styles,
        color: 'var(--text)',
        '&:hover': {
            color: 'var(--text-hover)',
        },
    }),
    placeholder: (styles) => ({
        ...styles,
        color: 'var(--text-light)',
    }),
    indicatorSeparator: (styles) => ({
        ...styles,
        backgroundColor: 'transparent', // invisible
    }),
    clearIndicator: (styles, { isFocused }) => ({
        ...styles,
        color: isFocused ? 'var(--text-hover)' : 'var(--text)',
        '&:hover': {
            color: 'var(--text-hover)',
        },
    }),
    dropdownIndicator: (styles) => ({
        ...styles,
        color: 'var(--text)',
        '&:hover': {
            color: 'var(--text-hover)',
        },
    }),
    option: (styles, { data, isDisabled, isSelected, isFocused }) => ({
        ...styles,
        backgroundColor: isDisabled
            ? 'var(--color-null)'
            : isSelected
            ? 'var(--bg-light)'
            : isFocused
            ? 'var(--bg-hover)'
            : 'var(--bg-lightest)',
        color: isDisabled
            ? 'var(--text-light)'
            : isSelected
            ? 'var(--text-dark)'
            : isFocused
            ? 'var(--text-hover)'
            : 'var(--text)',
        cursor: isDisabled ? 'not-allowed' : 'default',
        ...(data.color ? dot(data.color) : {}),
        ':active': {
            ...styles[':active'],
            backgroundColor: !isDisabled ? 'var(--bg-light)' : undefined,
            color: !isDisabled ? 'var(--text-dark)' : undefined,
        },
    }),
    menu: (styles) => ({
        ...styles,
        backgroundColor: 'var(--bg-lightest)',
        borderRadius: 'var(--border-radius-sm)',
        border: 'none',
        boxShadow: 'var(--box-shadow-sm)',
    }),
    menuList: (styles) => ({
        ...styles,
        borderRadius: 'var(--border-radius-sm)',
        boxShadow: 'var(--box-shadow-sm)',
    }),
    singleValue: (styles, { data }) => ({
        ...styles,
        color: 'var(--text)',
        ...(data.color ? dot(data.color) : {}),
    }),
    multiValue: (styles, { data }) => ({
        ...styles,
        backgroundColor: data.color || 'var(--bg-light)',
        color: data.color ? '#000' : 'var(--text)',
        ':hover': {
            backgroundColor: 'var(--bg-hover)',
            color: 'var(--text)',
        },
    }),
    multiValueLabel: (styles) => ({
        ...styles,
        color: 'inherit',
        ':hover': {
            backgroundColor: 'inherit',
            color: 'inherit',
        },
    }),
    multiValueRemove: (styles) => ({
        ...styles,
        color: 'inherit',
        ':hover': {
            backgroundColor: 'inherit',
            color: 'inherit',
        },
    }),
}