@stack-spot/portal-components 2.15.1 → 2.16.0

package/src/components/Select/SelectSearch.tsx

@@ -0,0 +1,141 @@
+import { theme } from '@stack-spot/portal-theme'
+import { Dictionary, useTranslate } from '@stack-spot/portal-translate'
+import { 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>,
+}
+
+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,
+          ...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,
+        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'