@granto-umbrella/umbrella-components 3.0.34 → 3.0.36

package/src/components/atoms/MultiSelect/MultiSelect.tsx

@@ -1,346 +1,346 @@
-'use client';
-
-/* eslint-disable @typescript-eslint/no-explicit-any */
-import type React from 'react';
-import Select, {
-  type StylesConfig,
-  components,
-  type GroupBase,
-  type MultiValue as ReactSelectMultiValue,
-  type SingleValue,
-  type ActionMeta,
-} from 'react-select';
-import { WarningCircle } from '@phosphor-icons/react';
-import {
-  Container,
-  Label,
-  Icon,
-  Error,
-  SelectWrapper,
-} from './MultiSelect.styles';
-import {
-  semanticColors,
-  semanticRadius,
-  typographyTokens,
-} from '../../../styles/tokens';
-import type {
-  IStyledBaseProps,
-  SelectProps,
-  SelectOption,
-} from './MultiSelect.types';
-
-const StyledBase: React.FC<IStyledBaseProps> = ({
-  children,
-  label,
-  error,
-  errorMessage,
-  labelSize,
-  labelWeight,
-  icon,
-  sizeDisplay,
-  height,
-}) => {
-  return (
-    <Container $sizeDisplay={sizeDisplay} height={height}>
-      <div>
-        {label && (
-          <Label fontSize={labelSize} fontWeight={labelWeight}>
-            {label}
-          </Label>
-        )}
-        <SelectWrapper>
-          {children}
-          {icon && <Icon $error={error}>{icon}</Icon>}
-        </SelectWrapper>
-        {error && errorMessage && (
-          <Error>
-            <WarningCircle size={14} /> {errorMessage}
-          </Error>
-        )}
-      </div>
-    </Container>
-  );
-};
-
-const NoOptionsMessage = (props: any) => (
-  <components.NoOptionsMessage {...props}>
-    <span>Sem dados</span>
-  </components.NoOptionsMessage>
-);
-
-const CustomMultiValue = (props: any) => (
-  <components.MultiValue {...props}>
-    <Custom {...props} />
-  </components.MultiValue>
-);
-
-const Option = (props: any) => (
-  <components.Option {...props}>
-    <Custom {...props} />
-  </components.Option>
-);
-
-const Custom = (props: any) => (
-  <div style={{ display: 'flex', alignItems: 'center' }}>
-    {'picture' in props.data &&
-      (props.data.picture ? (
-        <img
-          src={props.data.picture || '/placeholder.svg'}
-          alt={props.data.name || props.data.label}
-          style={{
-            width: '16px',
-            height: '16px',
-            borderRadius: '50%',
-            marginRight: '8px',
-            objectFit: 'cover',
-          }}
-        />
-      ) : (
-        <div
-          style={{
-            width: '16px',
-            height: '16px',
-            borderRadius: '50%',
-            backgroundColor: semanticColors.base.text,
-            color: semanticColors.base.background,
-            fontSize: '10px',
-            display: 'flex',
-            marginRight: '8px',
-            alignItems: 'center',
-            justifyContent: 'center',
-            flexShrink: 0,
-          }}
-        >
-          {(props.data.label as string).charAt(0).toUpperCase()}
-        </div>
-      ))}
-    <span
-      style={{
-        fontSize: typographyTokens.fontSizes.bodyS,
-        lineHeight: '1.4',
-        color: 'inherit',
-      }}
-    >
-      {props.data.label}
-    </span>
-  </div>
-);
-
-const MultiSelect: React.FC<SelectProps> = ({
-  options,
-  placeholder,
-  height = '40px',
-  enabledClear = true,
-  multiple,
-  value,
-  disabled,
-  menuPlacement = 'auto',
-  defaultValue,
-  setValue,
-  ...props
-}) => {
-  const styles: StylesConfig<SelectOption, boolean, GroupBase<SelectOption>> = {
-    indicatorSeparator: (base: any) => ({ ...base, display: 'none' }),
-    container: (base: any) => ({
-      ...base,
-      width: '100%',
-      border: 'none',
-      position: 'relative',
-    }),
-    control: (base: any, state: any) => ({
-      ...base,
-      minHeight: `${height}`,
-      backgroundColor: semanticColors.base.background,
-      padding: '2px 8px',
-      borderRadius: semanticRadius.global.radius.md,
-      borderColor: state.isFocused
-        ? semanticColors.branding.border.enabled
-        : semanticColors.global.border.default,
-      ':hover': {
-        borderColor: semanticColors.branding.border.hover,
-      },
-      boxShadow: state.isFocused
-        ? `0 0 0 1px ${semanticColors.branding.border.enabled}`
-        : 'none',
-      cursor: disabled ? 'not-allowed' : 'pointer',
-      opacity: disabled ? 0.6 : 1,
-    }),
-    dropdownIndicator: (baseStyles: any) => ({
-      ...baseStyles,
-      color: semanticColors.branding.surface.enabled,
-      padding: '8px',
-      ':hover': {
-        color: semanticColors.branding.surface.hover,
-      },
-    }),
-    clearIndicator: (baseStyles: any) => ({
-      ...baseStyles,
-      color: semanticColors.neutral[400],
-      padding: '8px',
-      ':hover': {
-        color: semanticColors.danger.text.enabled,
-      },
-    }),
-    indicatorsContainer: (base: any) => ({
-      ...base,
-      alignItems: 'center',
-    }),
-    option: (baseStyle: any, state: any) => ({
-      ...baseStyle,
-      color: state.isSelected
-        ? semanticColors.branding.text.onSurfaceAccent.enabled
-        : semanticColors.base.text,
-      backgroundColor: state.isSelected
-        ? semanticColors.branding.surface.enabled
-        : state.isFocused
-        ? semanticColors.neutral[100]
-        : 'transparent',
-      cursor: 'pointer',
-      padding: '12px 16px',
-      ':active': {
-        backgroundColor: state.isSelected
-          ? semanticColors.branding.surface.pressed
-          : semanticColors.neutral[200],
-      },
-    }),
-    placeholder: (base: any) => ({
-      ...base,
-      fontSize: typographyTokens.fontSizes.bodyS,
-      fontWeight: typographyTokens.fontWeights.regular,
-      color: semanticColors.neutral[400],
-      margin: 0,
-    }),
-    singleValue: (base: any) => ({
-      ...base,
-      fontSize: typographyTokens.fontSizes.bodyS,
-      color: semanticColors.base.text,
-      margin: 0,
-    }),
-    multiValue: (base: any, state: any) => ({
-      ...base,
-      borderRadius: semanticRadius.global.radius.full,
-      border: `1px solid ${semanticColors.global.border.default}`,
-      backgroundColor: state.data.isFixed
-        ? semanticColors.global.surface.disabled
-        : semanticColors.base.background,
-      margin: '2px',
-      display: 'inline-flex',
-      alignItems: 'center',
-      padding: '0 4px',
-    }),
-    multiValueLabel: (base: any) => ({
-      ...base,
-      display: 'flex',
-      alignItems: 'center',
-      padding: '0 6px',
-      fontWeight: typographyTokens.fontWeights.regular,
-      fontSize: typographyTokens.fontSizes.captionM,
-      color: semanticColors.base.text,
-    }),
-    multiValueRemove: (base: any, state: any) => {
-      return state.data.isFixed
-        ? { ...base, display: 'none' }
-        : {
-            ...base,
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'center',
-            marginLeft: '2px',
-            padding: '0',
-            color: semanticColors.neutral[400],
-            cursor: 'pointer',
-            ':hover': {
-              backgroundColor: semanticColors.danger.surface.enabled,
-              color: semanticColors.danger.text.onSurface,
-            },
-          };
-    },
-
-    valueContainer: (base: any) => ({
-      ...base,
-      padding: '2px 8px',
-      gap: '4px',
-      flexWrap: 'wrap',
-    }),
-    input: (base: any) => ({
-      ...base,
-      margin: 0,
-      padding: 0,
-      fontSize: typographyTokens.fontSizes.bodyS,
-    }),
-    menuList: (base: any) => ({
-      ...base,
-      padding: 0,
-      '::-webkit-scrollbar': {
-        width: '6px',
-      },
-      '::-webkit-scrollbar-track': {
-        background: semanticColors.neutral[200],
-      },
-      '::-webkit-scrollbar-thumb': {
-        background: semanticColors.branding.surface.enabled,
-        borderRadius: '20px',
-      },
-      '::-webkit-scrollbar-thumb:hover': {
-        background: semanticColors.branding.surface.hover,
-      },
-    }),
-    menu: (base: any) => ({
-      ...base,
-      borderRadius: semanticRadius.global.radius.md,
-      boxShadow:
-        '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)',
-      border: `1px solid ${semanticColors.global.border.default}`,
-      overflow: 'hidden',
-    }),
-  };
-
-  const handleChange = (
-    newValue: ReactSelectMultiValue<SelectOption> | SingleValue<SelectOption>,
-    actionMeta: ActionMeta<SelectOption>
-  ) => {
-    if (setValue) {
-      setValue(newValue, actionMeta);
-    }
-  };
-
-  return (
-    <StyledBase height={'fit-content'} {...props}>
-      <Select<SelectOption, boolean, GroupBase<SelectOption>>
-        theme={(selectTheme) => ({
-          ...selectTheme,
-          colors: {
-            ...selectTheme.colors,
-            primary: semanticColors.branding.surface.enabled,
-            primary75: semanticColors.branding.surface.hover,
-            primary50: semanticColors.branding.surface.disabled,
-            primary25: semanticColors.neutral[100],
-          },
-          spacing: {
-            baseUnit: 4,
-            menuGutter: 8,
-            controlHeight: parseInt(height.replace('px', '')) || 40,
-          },
-        })}
-        isClearable={enabledClear}
-        isMulti={multiple}
-        defaultValue={defaultValue}
-        options={options}
-        placeholder={placeholder}
-        isDisabled={disabled}
-        value={value}
-        isSearchable
-        onChange={handleChange}
-        styles={styles}
-        menuPlacement={menuPlacement}
-        components={{
-          NoOptionsMessage,
-          MultiValue: CustomMultiValue,
-          Option,
-        }}
-      />
-    </StyledBase>
-  );
-};
-
-export default MultiSelect;
+'use client';
+
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import type React from 'react';
+import Select, {
+  type StylesConfig,
+  components,
+  type GroupBase,
+  type MultiValue as ReactSelectMultiValue,
+  type SingleValue,
+  type ActionMeta,
+} from 'react-select';
+import { WarningCircle } from '@phosphor-icons/react';
+import {
+  Container,
+  Label,
+  Icon,
+  Error,
+  SelectWrapper,
+} from './MultiSelect.styles';
+import {
+  semanticColors,
+  semanticRadius,
+  typographyTokens,
+} from '../../../styles/tokens';
+import type {
+  IStyledBaseProps,
+  SelectProps,
+  SelectOption,
+} from './MultiSelect.types';
+
+const StyledBase: React.FC<IStyledBaseProps> = ({
+  children,
+  label,
+  error,
+  errorMessage,
+  labelSize,
+  labelWeight,
+  icon,
+  sizeDisplay,
+  height,
+}) => {
+  return (
+    <Container $sizeDisplay={sizeDisplay} height={height}>
+      <div>
+        {label && (
+          <Label fontSize={labelSize} fontWeight={labelWeight}>
+            {label}
+          </Label>
+        )}
+        <SelectWrapper>
+          {children}
+          {icon && <Icon $error={error}>{icon}</Icon>}
+        </SelectWrapper>
+        {error && errorMessage && (
+          <Error>
+            <WarningCircle size={14} /> {errorMessage}
+          </Error>
+        )}
+      </div>
+    </Container>
+  );
+};
+
+const NoOptionsMessage = (props: any) => (
+  <components.NoOptionsMessage {...props}>
+    <span>Sem dados</span>
+  </components.NoOptionsMessage>
+);
+
+const CustomMultiValue = (props: any) => (
+  <components.MultiValue {...props}>
+    <Custom {...props} />
+  </components.MultiValue>
+);
+
+const Option = (props: any) => (
+  <components.Option {...props}>
+    <Custom {...props} />
+  </components.Option>
+);
+
+const Custom = (props: any) => (
+  <div style={{ display: 'flex', alignItems: 'center' }}>
+    {'picture' in props.data &&
+      (props.data.picture ? (
+        <img
+          src={props.data.picture || '/placeholder.svg'}
+          alt={props.data.name || props.data.label}
+          style={{
+            width: '16px',
+            height: '16px',
+            borderRadius: '50%',
+            marginRight: '8px',
+            objectFit: 'cover',
+          }}
+        />
+      ) : (
+        <div
+          style={{
+            width: '16px',
+            height: '16px',
+            borderRadius: '50%',
+            backgroundColor: semanticColors.base.text,
+            color: semanticColors.base.background,
+            fontSize: '10px',
+            display: 'flex',
+            marginRight: '8px',
+            alignItems: 'center',
+            justifyContent: 'center',
+            flexShrink: 0,
+          }}
+        >
+          {(props.data.label as string).charAt(0).toUpperCase()}
+        </div>
+      ))}
+    <span
+      style={{
+        fontSize: typographyTokens.fontSizes.bodyS,
+        lineHeight: '1.4',
+        color: 'inherit',
+      }}
+    >
+      {props.data.label}
+    </span>
+  </div>
+);
+
+const MultiSelect: React.FC<SelectProps> = ({
+  options,
+  placeholder,
+  height = '40px',
+  enabledClear = true,
+  multiple,
+  value,
+  disabled,
+  menuPlacement = 'auto',
+  defaultValue,
+  setValue,
+  ...props
+}) => {
+  const styles: StylesConfig<SelectOption, boolean, GroupBase<SelectOption>> = {
+    indicatorSeparator: (base: any) => ({ ...base, display: 'none' }),
+    container: (base: any) => ({
+      ...base,
+      width: '100%',
+      border: 'none',
+      position: 'relative',
+    }),
+    control: (base: any, state: any) => ({
+      ...base,
+      minHeight: `${height}`,
+      backgroundColor: semanticColors.base.background,
+      padding: '2px 8px',
+      borderRadius: semanticRadius.global.radius.md,
+      borderColor: state.isFocused
+        ? semanticColors.branding.border.enabled
+        : semanticColors.global.border.default,
+      ':hover': {
+        borderColor: semanticColors.branding.border.hover,
+      },
+      boxShadow: state.isFocused
+        ? `0 0 0 1px ${semanticColors.branding.border.enabled}`
+        : 'none',
+      cursor: disabled ? 'not-allowed' : 'pointer',
+      opacity: disabled ? 0.6 : 1,
+    }),
+    dropdownIndicator: (baseStyles: any) => ({
+      ...baseStyles,
+      color: semanticColors.branding.surface.enabled,
+      padding: '8px',
+      ':hover': {
+        color: semanticColors.branding.surface.hover,
+      },
+    }),
+    clearIndicator: (baseStyles: any) => ({
+      ...baseStyles,
+      color: semanticColors.neutral[400],
+      padding: '8px',
+      ':hover': {
+        color: semanticColors.danger.text.enabled,
+      },
+    }),
+    indicatorsContainer: (base: any) => ({
+      ...base,
+      alignItems: 'center',
+    }),
+    option: (baseStyle: any, state: any) => ({
+      ...baseStyle,
+      color: state.isSelected
+        ? semanticColors.branding.text.onSurfaceAccent.enabled
+        : semanticColors.base.text,
+      backgroundColor: state.isSelected
+        ? semanticColors.branding.surface.enabled
+        : state.isFocused
+          ? semanticColors.neutral[100]
+          : 'transparent',
+      cursor: 'pointer',
+      padding: '12px 16px',
+      ':active': {
+        backgroundColor: state.isSelected
+          ? semanticColors.branding.surface.pressed
+          : semanticColors.neutral[200],
+      },
+    }),
+    placeholder: (base: any) => ({
+      ...base,
+      fontSize: typographyTokens.fontSizes.bodyS,
+      fontWeight: typographyTokens.fontWeights.regular,
+      color: semanticColors.neutral[400],
+      margin: 0,
+    }),
+    singleValue: (base: any) => ({
+      ...base,
+      fontSize: typographyTokens.fontSizes.bodyS,
+      color: semanticColors.base.text,
+      margin: 0,
+    }),
+    multiValue: (base: any, state: any) => ({
+      ...base,
+      borderRadius: semanticRadius.global.radius.full,
+      border: `1px solid ${semanticColors.global.border.default}`,
+      backgroundColor: state.data.isFixed
+        ? semanticColors.global.surface.disabled
+        : semanticColors.base.background,
+      margin: '2px',
+      display: 'inline-flex',
+      alignItems: 'center',
+      padding: '0 4px',
+    }),
+    multiValueLabel: (base: any) => ({
+      ...base,
+      display: 'flex',
+      alignItems: 'center',
+      padding: '0 6px',
+      fontWeight: typographyTokens.fontWeights.regular,
+      fontSize: typographyTokens.fontSizes.captionM,
+      color: semanticColors.base.text,
+    }),
+    multiValueRemove: (base: any, state: any) => {
+      return state.data.isFixed
+        ? { ...base, display: 'none' }
+        : {
+            ...base,
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            marginLeft: '2px',
+            padding: '0',
+            color: semanticColors.neutral[400],
+            cursor: 'pointer',
+            ':hover': {
+              backgroundColor: semanticColors.danger.surface.enabled,
+              color: semanticColors.danger.text.onSurface,
+            },
+          };
+    },
+
+    valueContainer: (base: any) => ({
+      ...base,
+      padding: '2px 8px',
+      gap: '4px',
+      flexWrap: 'wrap',
+    }),
+    input: (base: any) => ({
+      ...base,
+      margin: 0,
+      padding: 0,
+      fontSize: typographyTokens.fontSizes.bodyS,
+    }),
+    menuList: (base: any) => ({
+      ...base,
+      padding: 0,
+      '::-webkit-scrollbar': {
+        width: '6px',
+      },
+      '::-webkit-scrollbar-track': {
+        background: semanticColors.neutral[200],
+      },
+      '::-webkit-scrollbar-thumb': {
+        background: semanticColors.branding.surface.enabled,
+        borderRadius: '20px',
+      },
+      '::-webkit-scrollbar-thumb:hover': {
+        background: semanticColors.branding.surface.hover,
+      },
+    }),
+    menu: (base: any) => ({
+      ...base,
+      borderRadius: semanticRadius.global.radius.md,
+      boxShadow:
+        '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)',
+      border: `1px solid ${semanticColors.global.border.default}`,
+      overflow: 'hidden',
+    }),
+  };
+
+  const handleChange = (
+    newValue: ReactSelectMultiValue<SelectOption> | SingleValue<SelectOption>,
+    actionMeta: ActionMeta<SelectOption>
+  ) => {
+    if (setValue) {
+      setValue(newValue, actionMeta);
+    }
+  };
+
+  return (
+    <StyledBase height={'fit-content'} {...props}>
+      <Select<SelectOption, boolean, GroupBase<SelectOption>>
+        theme={(selectTheme) => ({
+          ...selectTheme,
+          colors: {
+            ...selectTheme.colors,
+            primary: semanticColors.branding.surface.enabled,
+            primary75: semanticColors.branding.surface.hover,
+            primary50: semanticColors.branding.surface.disabled,
+            primary25: semanticColors.neutral[100],
+          },
+          spacing: {
+            baseUnit: 4,
+            menuGutter: 8,
+            controlHeight: parseInt(height.replace('px', '')) || 40,
+          },
+        })}
+        isClearable={enabledClear}
+        isMulti={multiple}
+        defaultValue={defaultValue}
+        options={options}
+        placeholder={placeholder}
+        isDisabled={disabled}
+        value={value}
+        isSearchable
+        onChange={handleChange}
+        styles={styles}
+        menuPlacement={menuPlacement}
+        components={{
+          NoOptionsMessage,
+          MultiValue: CustomMultiValue,
+          Option,
+        }}
+      />
+    </StyledBase>
+  );
+};
+
+export default MultiSelect;