@stack-spot/portal-components 2.27.0 → 2.27.2

package/src/components/Select/SelectSearch.tsx

@@ -1,195 +1,195 @@
-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 { ClearInput } from './ClearInput'
-import { MultiValue } from './MultiValue'
-
-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,
-        container: (base) => ({
-          ...base,
-          width: '100%',
-        }),
-        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',
-          backgroundColor: theme.color.light[300],
-          ...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),
-        }),
-        multiValue: (base, state) => ({
-          ...base,
-          background: 'transparent',
-          alignItems: 'center',
-          margin: 0,
-          ...customStyles?.multiValue?.(base, state),
-        }),
-        multiValueLabel: (base, state) => ({
-          ...base,
-          margin: 0,
-          ...customStyles?.multiValueLabel?.(base, state),
-        }),
-        multiValueRemove: (base, state) => ({
-          ...base,
-          backgroundColor: 'transparent',
-          margin: 0,
-          '&:hover': {
-            backgroundColor: 'transparent',
-          },
-          ...customStyles?.multiValueRemove?.(base, state),
-        }),
-        noOptionsMessage: (base, state) => ({
-          ...base,
-          backgroundColor: theme.color.light[300],
-          ...customStyles?.noOptionsMessage?.(base, state),
-        }),
-      }}
-      components={{
-        ...components,
-        DropdownIndicator,
-        IndicatorSeparator: EmptyComponent,
-        ClearIndicator: ClearInput,
-        MultiValue: MultiValue,
-        MultiValueRemove: () => <></>,
-        ...customComponents,
-      }}
-    />
-  )
-}
-
-
-
-
-const dictionary = {
-  en: {
-    noOptions: 'No options',
-  },
-  pt: {
-    noOptions: 'Sem opções',
-  },
-} satisfies Dictionary
+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 { ClearInput } from './ClearInput'
+import { MultiValue } from './MultiValue'
+
+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,
+        container: (base) => ({
+          ...base,
+          width: '100%',
+        }),
+        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',
+          backgroundColor: theme.color.light[300],
+          ...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),
+        }),
+        multiValue: (base, state) => ({
+          ...base,
+          background: 'transparent',
+          alignItems: 'center',
+          margin: 0,
+          ...customStyles?.multiValue?.(base, state),
+        }),
+        multiValueLabel: (base, state) => ({
+          ...base,
+          margin: 0,
+          ...customStyles?.multiValueLabel?.(base, state),
+        }),
+        multiValueRemove: (base, state) => ({
+          ...base,
+          backgroundColor: 'transparent',
+          margin: 0,
+          '&:hover': {
+            backgroundColor: 'transparent',
+          },
+          ...customStyles?.multiValueRemove?.(base, state),
+        }),
+        noOptionsMessage: (base, state) => ({
+          ...base,
+          backgroundColor: theme.color.light[300],
+          ...customStyles?.noOptionsMessage?.(base, state),
+        }),
+      }}
+      components={{
+        ...components,
+        DropdownIndicator,
+        IndicatorSeparator: EmptyComponent,
+        ClearIndicator: ClearInput,
+        MultiValue: MultiValue,
+        MultiValueRemove: () => <></>,
+        ...customComponents,
+      }}
+    />
+  )
+}
+
+
+
+
+const dictionary = {
+  en: {
+    noOptions: 'No options',
+  },
+  pt: {
+    noOptions: 'Sem opções',
+  },
+} satisfies Dictionary

package/src/components/Select/index.tsx

@@ -1,7 +1,7 @@
-import { CreatableSelect } from './CreatableSelect'
-import { CustomMenu } from './CustomMenu'
-import { SelectInfiniteScroll, SelectInfiniteScrollProps } from './SelectInfiniteScroll'
-import { SelectSearch, SelectSearchProps } from './SelectSearch'
-
-export { CreatableSelect, CustomMenu, SelectInfiniteScroll, SelectInfiniteScrollProps, SelectSearch, SelectSearchProps }
-
+import { CreatableSelect } from './CreatableSelect'
+import { CustomMenu } from './CustomMenu'
+import { SelectInfiniteScroll, SelectInfiniteScrollProps } from './SelectInfiniteScroll'
+import { SelectSearch, SelectSearchProps } from './SelectSearch'
+
+export { CreatableSelect, CustomMenu, SelectInfiniteScroll, SelectInfiniteScrollProps, SelectSearch, SelectSearchProps }
+

package/src/components/Select/types.ts

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