@stack-spot/portal-components 2.15.1 → 2.16.1

package/src/components/Select/CreatableSelect.tsx

@@ -0,0 +1,197 @@
+import { theme } from '@stack-spot/portal-theme'
+import { Dictionary, useTranslate } from '@stack-spot/portal-translate'
+import { FC, useEffect, useState } from 'react'
+import { CSSObjectWithLabel } from 'react-select'
+import Creatable from 'react-select/creatable'
+import { BadgeItem } from './BadgeItem'
+import { ClearInput } from './ClearInput'
+import { CloseItem } from './CloseItem'
+import { LabelItem } from './LabelItem'
+import { CreatableSelectOptionType, CreatableValueType } from './types'
+
+export interface CreatableSelectProps {
+  id?: string,
+  name?: string,
+  disabled?: boolean,
+  isLoading?: boolean,
+  isMulti?: boolean,
+  options?: CreatableSelectOptionType[],
+  className?: string,
+  value?: string | string[],
+  onChange?: (newValue: CreatableValueType) => void,
+}
+
+export const CreatableSelect: FC<CreatableSelectProps> = ({ disabled, options, value, isMulti, onChange, id, ...props }) => {
+  const t = useTranslate(dictionary)
+  const [inputOptions, setInputOptions] = useState(options || [])
+  const prepareValue = () => {
+    let startValue: CreatableValueType | undefined = undefined
+    if (value) {
+      if (isMulti) {
+        const typedValue = value as string[] || []
+        startValue = [...typedValue].map((v) => ({ label: v, value: v }))
+      } else {
+        const typedValue = value as string
+        startValue = { label: typedValue, value: typedValue }
+      }
+    }
+    return startValue
+  }
+
+  const [inputValue, setInputValue] = useState<CreatableValueType | undefined>(prepareValue())
+
+  useEffect(() => {
+    const newValue = prepareValue()
+    inputValue !== newValue && setInputValue(newValue)
+  }, [value])
+
+
+  const handleCreate = (newValue: string) => {
+    const newOption = { label: newValue, value: newValue }
+    setInputOptions((prev) => [...prev, newOption])
+    if (isMulti) {
+      setInputValue((prev) => {
+        const previousValue = Array.isArray(prev) ? prev : []
+        const newInputValue = [...(previousValue as CreatableSelectOptionType[]), newOption]
+        setTimeout(() => {
+          onChange && onChange(newInputValue)
+        }, 100)
+        return newInputValue
+      })
+    } else {
+      setInputValue(newOption)
+      onChange && onChange(newOption)
+    }
+  }
+
+  const handleChange = (newValue: CreatableValueType) => {
+    setInputValue(newValue)
+    onChange && onChange(newValue)
+  }
+
+  return (
+    <Creatable
+      placeholder={t.typeYourOption}
+      {...props}
+      inputId={id}
+      isClearable={true}
+      isDisabled={disabled}
+      value={inputValue}
+      options={inputOptions}
+      isMulti={isMulti}
+      onChange={handleChange}
+      onCreateOption={handleCreate}
+      components={{ MultiValueContainer: BadgeItem, MultiValueLabel: LabelItem, MultiValueRemove: CloseItem, ClearIndicator: ClearInput }}
+      noOptionsMessage={() => (t.typeYourOption)}
+      formatCreateLabel={(value) => (value)}
+      tabSelectsValue={false}
+      styles={{
+        control: (base, state) => ({
+          ...base,
+          minHeight: '2.5rem',
+          height: 'auto',
+          backgroundColor: theme.color.light[300],
+          border: `0.063rem solid ${theme.color.light[600]}`,
+          borderRadius: '0.25rem',
+          fontSize: '0.875rem',
+          fontStyle: 'normal',
+          fontFeatureSettings: '\'clig\' off, \'liga\' off',
+          display: 'flex',
+          alignItems: 'center',
+          outlineColor: theme.color.light[700],
+
+          '&:hover': {
+            border: `0.063rem solid ${theme.color.light[600]}`,
+          },
+
+          ...(state.isFocused || state.menuIsOpen ? {
+            borderColor: `${theme.color.primary[500]} !important`,
+            outline: `0.063rem solid ${theme.color.primary[500]} !important`,
+          } : {}),
+        } as CSSObjectWithLabel),
+        input: () => ({
+          color: theme.color.light.contrastText,
+        }),
+        placeholder: () => ({
+          display: 'none',
+        }),
+        dropdownIndicator: () => ({
+          display: 'none',
+        }),
+        indicatorSeparator: () => ({
+          display: 'none',
+        }),
+        singleValue: (base) => ({
+          ...base,
+          color: theme.color.light.contrastText,
+        } as CSSObjectWithLabel),
+        menu: (base) => ({
+          ...base,
+          backgroundColor: theme.color.light[500],
+          border: `0.063rem solid ${theme.color.light[400]}`,
+          borderRadius: '0.5rem',
+          boxShadow: `0 0 0 0.125rem ${theme.color.gray[600]}`,
+          color: theme.color.light.contrastText,
+        } as CSSObjectWithLabel),
+        multiValue: (base) => ({
+          ...base,
+          backgroundColor: 'inherit',
+          display: 'flex',
+          alignItems: 'center',
+          justifyItems: 'center',
+        }),
+        multiValueRemove: (base) => ({
+          ...base,
+          cursor: 'pointer',
+          backgroundColor: 'inherit',
+          paddingRight: 0,
+          ':hover': {
+            backgroundColor: 'inherit',
+            color: 'inherit',
+          },
+        }),
+        option: (styles, { isDisabled, isFocused, isSelected }) => ({
+          ...styles,
+          backgroundColor: isDisabled
+            ? undefined
+            : isSelected
+              ? theme.color.light[700]
+              : isFocused
+                ? theme.color.light[600]
+                : undefined,
+
+          color: isSelected ? theme.color.light[300] : theme.color.light.contrastText,
+
+          cursor: isDisabled ? 'not-allowed' : 'default',
+
+          ':active': {
+            ...styles[':active'],
+            backgroundColor: !isDisabled
+              ? isSelected
+                ? theme.color.light.contrastText
+                : theme.color.light[600]
+              : undefined,
+          },
+
+          ':hover': {
+            ...styles[':hover'],
+            backgroundColor: !isDisabled
+              ? isSelected
+                ? theme.color.light[700]
+                : theme.color.light[600]
+              : undefined,
+          },
+        } as CSSObjectWithLabel),
+      }}
+    />
+  )
+}
+
+const dictionary = {
+  en: {
+    typeYourOption: 'Type your option',
+  },
+  pt: {
+    typeYourOption: 'Insira a sua opção',
+  },
+} satisfies Dictionary

package/src/components/Select/LabelItem.tsx

@@ -0,0 +1,8 @@
+import { Box, Text } from '@citric/core'
+import { MultiValueGenericProps } from 'react-select'
+
+export const LabelItem = (props: MultiValueGenericProps<any>) => (
+  <Box>
+    <Text>{props.data.label}</Text>
+  </Box>
+)

package/src/components/Select/SelectSearch.tsx

@@ -0,0 +1,167 @@
+import { IconBox } from '@citric/core'
+import { ChevronDown } from '@citric/icons'
+import { theme } from '@stack-spot/portal-theme'
+import { Dictionary, useTranslate } from '@stack-spot/portal-translate'
+import { ComponentProps, ComponentType, RefCallback } from 'react'
+import Select, { components, CSSObjectWithLabel, Props as SelectProps } from 'react-select'
+import { BadgeItem } from './BadgeItem'
+import { ClearInput } from './ClearInput'
+import { CloseItem } from './CloseItem'
+import { LabelItem } from './LabelItem'
+
+export interface SelectSearchProps extends Partial<SelectProps> {
+  options: any[],
+  components?: Partial<typeof components>,
+  disabled?: boolean,
+  onChange?: (newValue?: any) => void,
+  ref?: RefCallback<any>,
+}
+
+const EmptyComponent = () => <></>
+
+const DropdownIndicator: ComponentType<ComponentProps<typeof components.DropdownIndicator>> = (props) => <IconBox
+  aria-hidden="true"
+  colorIcon="gray.50"
+  sx={{
+    cursor: 'pointer',
+    width: '10px',
+    height: '6px',
+    marginRight: '14px',
+    transition: 'transform 0.3s ease-in',
+    transform: `rotate(${props.selectProps.menuIsOpen ? '180' : '0'}deg)`,
+  }}
+>
+  <ChevronDown />
+</IconBox>
+
+export const SelectSearch = ({
+  options,
+  components: customComponents = {},
+  onChange,
+  styles: customStyles = {},
+  disabled,
+  ref,
+  ...props
+}: SelectSearchProps) => {
+  const t = useTranslate(dictionary)
+  return (
+    <Select
+      options={options}
+      onChange={onChange}
+      isDisabled={disabled}
+      ref={ref}
+      noOptionsMessage={() => t.noOptions}
+      {...props}
+      styles={{
+        ...customStyles,
+        control: (base, state) => ({
+          ...base,
+          height: '2.5rem',
+          display: 'flex',
+          alignItems: 'center',
+          padding: '0px',
+          color: theme.color.light.contrastText,
+          backgroundColor: theme.color.light[300],
+          border: `1px solid ${theme.color.light[600]}`,
+          outlineColor: theme.color.light[700],
+          '&:hover': {
+            border: `0.063rem solid ${theme.color.light[600]}`,
+          },
+          fontSize: '0.875rem',
+          lineHeight: '1.714',
+          fontFamily: 'Roboto, sans-serif',
+          ...(state.isFocused || state.menuIsOpen
+            ? {
+              borderColor: `${theme.color.primary[500]} !important`,
+              outline: `0.063rem solid ${theme.color.primary[500]} !important`,
+            }
+            : {}),
+          ...(state.isDisabled
+            ? {
+              backgroundColor: theme.color.light[500],
+              borderColor: theme.color.light[600],
+              cursor: 'not-allowed',
+            }
+            : {}),
+          ...customStyles?.control?.(base, state),
+        } as CSSObjectWithLabel),
+        input: (base, state) => ({
+          ...base,
+          color: theme.color.light.contrastText,
+          position: 'fixed',
+          ...customStyles?.input?.(base, state),
+        }),
+        menu: (base, state) => ({
+          ...base,
+          marginTop: '0.25rem',
+          position: 'relative',
+          ...customStyles?.menu?.(base, state),
+        }),
+        option: (base, state) => ({
+          ...base,
+          display: 'flex',
+          alignItems: 'center',
+          backgroundColor: theme.color.light[300],
+          cursor: 'pointer',
+          '&:hover': {
+            backgroundColor: theme.color.light[500],
+          },
+          border: '1px solid transparent',
+          ...(state.isFocused
+            ? {
+              borderColor: `${theme.color.light.contrastText} !important`,
+            }
+            : {}),
+          ...customStyles?.option?.(base, state),
+        }),
+        menuList: (base, state) => ({
+          ...base,
+          padding: 0,
+          '&::-webkit-scrollbar': {
+            width: '0.125rem',
+            height: '.5rem',
+            backgroundColor: 'transparent',
+          },
+          '&::-webkit-scrollbar-track': {
+            background: `${theme.color.light[300]}`,
+            borderRadius: '2px',
+          },
+          '&::-webkit-scrollbar-thumb': {
+            background: `${theme.color.primary[500]}`,
+            borderRadius: '2px',
+          },
+          '&::-webkit-scrollbar-thumb:hover': {
+            background: `${theme.color.light[700]}`,
+            borderRadius: '2px',
+          },
+          '&::-webkit-scrollbar-corner': {
+            backgroundColor: 'transparent',
+          },
+          ...customStyles?.menuList?.(base, state),
+        }),
+      }}
+      components={{
+        ...components,
+        DropdownIndicator,
+        IndicatorSeparator: EmptyComponent,
+        MultiValueContainer: BadgeItem,
+        MultiValueLabel: LabelItem,
+        MultiValueRemove: CloseItem,
+        ClearIndicator: ClearInput,
+        ...customComponents,
+      }}
+    />
+  )
+}
+
+
+
+
+const dictionary = {
+  en: {
+    noOptions: 'No options',
+  },
+  pt: {
+    noOptions: 'Sem opções',
+  },
+} satisfies Dictionary

package/src/components/Select/index.tsx

@@ -0,0 +1,5 @@
+import { CreatableSelect } from './CreatableSelect'
+import { SelectSearch, SelectSearchProps } from './SelectSearch'
+
+export { CreatableSelect, SelectSearch, SelectSearchProps }
+

package/src/components/Select/types.ts

@@ -0,0 +1,8 @@
+import { MultiValue, SingleValue } from 'react-select'
+
+export type CreatableValueType = SingleValue<CreatableSelectOptionType> | MultiValue<CreatableSelectOptionType>
+
+export interface CreatableSelectOptionType {
+  label: string,
+  value: string,
+}

package/src/index.ts

@@ -2,6 +2,7 @@ export { AsyncContent } from './components/AsyncContent'
 export { BannerWarning } from './components/BannerWarning'
 export { ButtonLoading } from './components/ButtonLoading'
 export { ChatBot } from './components/ChatBot'
+export * from './components/Select'
 export { useDateFormatter } from './hooks/date'
 export { useKeyboardControls } from './hooks/keyboard'
 export { useManualRender } from './hooks/manual-render'