@liguelead/design-system 0.0.32 → 0.0.34

package/components/Select/Select.styles.ts

@@ -8,148 +8,173 @@ import {
     shadow
 } from '@liguelead/foundation'
 import { parseColor } from '../../utils'
-import { Content, Item } from '@radix-ui/react-select'
+import { Content, Item, ItemIndicator, Trigger } from '@radix-ui/react-select'
 
-interface StyledInputProps {
+interface WrapperProps {
     size: TextFieldSizeType
     $themefication: StateInterface
 }
 
-export const InputWrapper = styled.div`
-    position: relative;
-    width: 100%;
-`
-
 export const Label = styled.label`
     display: block;
     font-weight: ${fontWeight.fontWeight500};
     font-size: ${fontSize.fontSize14}px;
 `
 
-export const HelperText = styled.span<{ error?: boolean }>`
+export const HelperText = styled.span`
     font-size: ${fontSize.fontSize12}px;
     line-height: ${lineHeight.lineHeight16}px;
 `
 
-export const IconWrapper = styled.div<{ 
-    $right?: boolean;
-    $error?: boolean;
-    $disabled?: boolean;
-}>` ${({theme, $error, $disabled, $right }) =>`
+export const IconWrapper = styled.div<{
+    $right?: boolean
+    $error?: boolean
+    $disabled?: boolean
+}>`
+    ${({ theme, $error, $disabled, $right }) => `
     display: flex;
     align-items: center;
-    justify-content: space-between;
+    justify-content: center;
     position: absolute;
-    top: 0px;
+    top: 0;
     height: 100%;
-    cursor: pointer;
-    ${$right ? 'right: 0px;' : 'left: 0px;'}
-    padding: 0px ${spacing.spacing16}px;
+    pointer-events: ${$right ? 'none' : 'auto'};
+    ${$right ? 'right: 0;' : 'left: 0;'}
+    padding: 0 ${spacing.spacing16}px;
+    z-index: 1;
 
     & svg {
         width: 16px;
         height: 16px;
-        fill: ${$error
+        fill: ${
+            $error
                 ? parseColor(theme.colors.danger200)
                 : $disabled
-                ? parseColor(theme.colors.neutral400)
-                : parseColor(theme.colors.neutral800)};
+                    ? parseColor(theme.colors.neutral400)
+                    : parseColor(theme.colors.neutral800)
+        };
         transition: fill 0.2s ease;
-        cursor: ${$disabled ? 'not-allowed' : 'pointer'};
     }
 `}
 `
 
+export const StyledTrigger = styled(Trigger)`
+    position: relative;
+    width: 100%;
+    display: flex;
+    align-items: center;
+    text-align: left;
+    background: transparent;
+    outline: none;
+    cursor: pointer;
+    border-radius: 4px;
+    transition: border-color 0.2s ease, box-shadow 0.2s ease;
+
+    &:focus-visible {
+        box-shadow: ${shadow.focusShadow};
+    }
+
+    &[data-state='open'] {
+        box-shadow: ${shadow.focusShadow};
+    }
+
+    &[data-disabled] {
+        cursor: not-allowed;
+    }
+
+    &::placeholder {
+        color: ${({ theme }) => parseColor(theme.colors.neutral600)};
+        opacity: 1;
+    }
+`
+
+export const TriggerValue = styled.span<{
+    $hasValue: boolean
+    $leftIcon: boolean
+    $rightIcon: boolean
+}>`
+    ${({ theme, $hasValue, $leftIcon, $rightIcon }) => `
+    flex: 1;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    color: ${$hasValue ? parseColor(theme.colors.textDark) : parseColor(theme.colors.neutral600)};
+    padding-left: ${$leftIcon ? '0' : '0'};
+    padding-right: ${$rightIcon ? '0' : '0'};
+`}
+`
+
 export const StyledContent = styled(Content)`
-    padding: 0px;
+    padding: 0;
     background-color: #fff;
     min-width: var(--radix-select-trigger-width, auto);
-    width: 100%;
+    width: var(--radix-select-trigger-width, 100%);
     box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
     border: 1px solid ${({ theme }) => parseColor(theme.colors.neutral500)};
-    border-top: 0px;
-    max-height: var(--radix-select-content-height, 314px);
-    overflow-y: scroll !important;
-    z-index: 10;
-
-    & .RadixSelectViewport {
-        max-height: 200px; /* Limite de altura do dropdown */
-        overflow-y: auto; /* Adiciona o scroll quando necessário */
-        scrollbar-width: thin; /* Personaliza a largura do scroll (opcional) */
+    border-top: 0;
+    border-radius: 0 0 8px 8px;
+    max-height: 314px;
+    overflow: hidden;
+    z-index: 9999;
+
+    &[data-state='open'] {
+        animation: none;
     }
 `
 
+export const StyledViewport = styled.div`
+    max-height: 200px;
+    overflow-y: auto;
+    scrollbar-width: thin;
+    border-radius: 0 0 4px 4px;
+`
+
 export const StyledItem = styled(Item)`
-    padding: ${spacing.spacing12}px ${spacing.spacing20}px;
+    padding: ${spacing.spacing8}px ${spacing.spacing12}px;
     display: flex;
     align-items: center;
     justify-content: space-between;
-    gap: 8px; /* mantém espaçamento interno caso adicionemos ícones à esquerda futuramente */
-    transition: all 0.2s ease;
+    gap: 8px;
+    transition: background-color 0.2s ease;
     cursor: pointer;
+    outline: none;
+    font-size: ${fontSize.fontSize14}px;
 
-    &:hover {
+    &:hover,
+    &[data-highlighted] {
         background-color: ${({ theme }) => parseColor(theme.colors.primaryLight)};
     }
 
     &[data-state='checked'] {
-        background-color: ${({ theme }) =>
-            parseColor(theme.colors.primary)};
+        background-color: ${({ theme }) => parseColor(theme.colors.primary)};
         color: ${({ theme }) => parseColor(theme.colors.white)};
     }
-`
-
-export const StyledInput = styled.input.withConfig({
-    shouldForwardProp: prop => !['control', 'errors', 'rules'].includes(prop)
-})`
-    width: 100%;
-    border-radius: 4px;
-    outline: none;
-    transition: border-color 0.2s ease;
-    background: transparent;
-    cursor: pointer;
-
-    &:focus {
-        box-shadow: ${shadow.focusShadow}
-    }
 
-    &.is-open {
-        border-color: ${({ theme }) =>
-            parseColor(theme.colors.neutral800)} !important;
-        box-shadow: ${shadow.focusShadow}
-    }
-
-    &:disabled {
+    &[data-disabled] {
+        opacity: 0.5;
         cursor: not-allowed;
     }
 `
 
-export const BorderWrapper = styled.div`
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    pointer-events: none;
-    border: 2px solid #ccc;
-    border-radius: 4px;
-    background-color: transparent;
-    z-index: -1;
+export const StyledItemIndicator = styled(ItemIndicator)`
+    display: flex;
+    align-items: center;
+`
 
-    ${StyledInput}:focus ~ & {
-        border-color: ${({ theme }) => theme.colors.primary};
-    }
+export const InputWrapper = styled.div`
+    position: relative;
+    width: 100%;
 `
 
-export const Wrapper = styled.div<StyledInputProps>`
+export const Wrapper = styled.div<WrapperProps>`
     position: relative;
     width: 100%;
     display: flex;
     flex-direction: column;
     gap: ${spacing.spacing4}px;
-    cursor: pointer;
+
     ${({ $themefication, size }) => `
-        ${StyledInput} {
+        ${StyledTrigger} {
             ${$themefication.input}
             ${size.input}
         }

package/components/Select/Select.tsx

@@ -1,4 +1,3 @@
-import { forwardRef, useState } from 'react'
 import * as RadixSelect from '@radix-ui/react-select'
 import { CaretDownIcon, CheckIcon } from '@phosphor-icons/react'
 import {
@@ -6,152 +5,111 @@ import {
     IconWrapper,
     InputWrapper,
     StyledContent,
-    StyledInput,
     StyledItem,
-    Wrapper,
-    Label
+    StyledItemIndicator,
+    StyledTrigger,
+    StyledViewport,
+    TriggerValue,
+    Wrapper
 } from './Select.styles'
 import { SelectStates } from './Select.states'
 import { textFieldSizes } from './Select.sizes'
 import { SelectProps, StateInterface } from './Select.types'
 import getState from '../TextField/utils/getState'
 import RequiredAsterisk from '../RequiredAsterisk'
+import { Label } from './Select.styles'
 
-const Select = forwardRef<HTMLInputElement, SelectProps>(
-    (
-        {
-            label,
-            defaultValue,
-            error,
-            helperText,
-            leftIcon,
-            size = 'md',
-            options,
-            placeholder,
-            className,
-            disabled = false,
-            requiredSymbol = false,
-            handleLeftIcon,
-            register
-        },
-        ref
-    ) => {
-        const [selectValue, setSelectValue] = useState(
-            defaultValue ?? options[0]?.value
-        )
-        const [open, setOpen] = useState(false)
+const Select = ({
+    label,
+    defaultValue,
+    value,
+    error,
+    helperText,
+    leftIcon,
+    size = 'md',
+    options,
+    placeholder,
+    className,
+    disabled = false,
+    requiredSymbol = false,
+    handleLeftIcon,
+    onValueChange
+}: SelectProps) => {
+    const state = getState(disabled, !!error)
+    const textFieldState: StateInterface = SelectStates(state)
+    const textFieldSize = textFieldSizes(size, !!leftIcon, true)
 
-        const handleOnChange = (value: string) => {
-            setSelectValue(value)
-            register?.onChange({
-                target: {
-                    name: register.name,
-                    value
-                }
-            })
-        }
+    const isControlled = value !== undefined
+    const rootProps = isControlled
+        ? { value: value ?? '', onValueChange }
+        : { defaultValue, onValueChange }
 
-        const state = getState(disabled, !!error)
-        const textFieldState: StateInterface = SelectStates(state)
-        const textFieldSize = textFieldSizes(size, !!leftIcon, false)
-        const selectedLabel =
-            options.find(option => option.value === selectValue)?.label ?? ''
-
-        return (
-            <Wrapper
-                className={className}
-                size={textFieldSize}
-                $themefication={textFieldState}
-            >
-                <input
-                    type="hidden"
-                    value={selectValue}
-                    placeholder={placeholder}
-                    ref={instance => {
-                        if (typeof ref === 'function') {
-                            ref(instance)
-                        } else if (ref) {
-                            ref.current = instance
-                        }
-                        register?.ref(instance)
-                    }}
-                    onChange={register?.onChange}
-                    onBlur={register?.onBlur}
-                />
+    return (
+        <Wrapper className={className} size={textFieldSize} $themefication={textFieldState}>
+            {label && (
                 <Label>
                     {label} {requiredSymbol && <RequiredAsterisk />}
                 </Label>
-                {disabled ? (
-                    <InputWrapper className="is-disabled">
+            )}
+
+            <RadixSelect.Root {...rootProps} disabled={disabled}>
+                <InputWrapper>
+                    <StyledTrigger aria-label={label} aria-invalid={!!error}>
                         {leftIcon && (
-                            <IconWrapper onClick={handleLeftIcon} $disabled={disabled}>
+                            <IconWrapper
+                                onClick={handleLeftIcon}
+                                $disabled={disabled}
+                                $error={!!error}
+                            >
                                 {leftIcon}
                             </IconWrapper>
                         )}
+
+                        <TriggerValue
+                            $hasValue={isControlled ? !!value : true}
+                            $leftIcon={!!leftIcon}
+                            $rightIcon
+                        >
+                            <RadixSelect.Value placeholder={placeholder} />
+                        </TriggerValue>
+
                         <IconWrapper $right $error={!!error} $disabled={disabled}>
-                            <CaretDownIcon weight="fill" size={14} />
+                            <RadixSelect.Icon asChild>
+                                <CaretDownIcon weight="fill" size={14} />
+                            </RadixSelect.Icon>
                         </IconWrapper>
-                        <StyledInput
-                            disabled
-                            readOnly
-                            value={selectedLabel}
-                            className="is-disabled"
-                        />
-                    </InputWrapper>
-                ) : (
-                    <RadixSelect.Root
-                        value={selectValue}
-                        onOpenChange={open => setOpen(open)}
-                        defaultValue={defaultValue}
-                        onValueChange={(value: string) =>
-                            handleOnChange(value)
-                        }>
-                        <RadixSelect.Trigger asChild disabled={disabled}>
-                            <InputWrapper>
-                                {leftIcon && (
-                                    <IconWrapper onClick={handleLeftIcon}>
-                                        {leftIcon}
-                                    </IconWrapper>
-                                )}
-                                <IconWrapper $right $error={!!error}>
-                                    <CaretDownIcon weight="fill" size={14} />
-                                </IconWrapper>
-                                <StyledInput
-                                    readOnly
-                                    style={{ cursor: 'pointer !important' }}
-                                    value={selectedLabel}
-                                    className={open ? 'is-open' : ''}
-                                />
-                            </InputWrapper>
-                        </RadixSelect.Trigger>
-                        <StyledContent
-                            asChild
-                            sideOffset={0}
-                            position="popper"
-                            align="start"
-                            className="RadixSelectContent">
-                            <RadixSelect.Viewport className="RadixSelectViewport">
+                    </StyledTrigger>
+                </InputWrapper>
+
+                <RadixSelect.Portal>
+                    <StyledContent
+                        sideOffset={0}
+                        position="popper"
+                        align="start"
+                    >
+                        <RadixSelect.Viewport asChild>
+                            <StyledViewport>
                                 {options.map(option => (
-                                    <StyledItem
-                                        key={option.value}
-                                        value={option.value}
-                                    >
-                                        <span>{option.label}</span>
-                                        {option.value === selectValue && (
-                                            <CheckIcon weight="bold" />
-                                        )}
+                                    <StyledItem key={option.value} value={option.value}>
+                                        <RadixSelect.ItemText>
+                                            {option.label}
+                                        </RadixSelect.ItemText>
+                                        <StyledItemIndicator>
+                                            <CheckIcon weight="bold" size={14} />
+                                        </StyledItemIndicator>
                                     </StyledItem>
                                 ))}
-                            </RadixSelect.Viewport>
-                        </StyledContent>
-                    </RadixSelect.Root>
-                )}
-                {(helperText || error) && (
-                    <HelperText>{error?.message || helperText}</HelperText>
-                )}
-            </Wrapper>
-        )
-    }
-)
+                            </StyledViewport>
+                        </RadixSelect.Viewport>
+                    </StyledContent>
+                </RadixSelect.Portal>
+            </RadixSelect.Root>
+
+            {(helperText || error) && (
+                <HelperText>{error?.message || helperText}</HelperText>
+            )}
+        </Wrapper>
+    )
+}
 
 export default Select

package/components/Select/Select.types.ts

@@ -1,20 +1,19 @@
-import { FieldValues, UseFormRegisterReturn } from 'react-hook-form'
+import { FieldValues } from 'react-hook-form'
 export interface SelectProps<TFieldValues extends FieldValues = FieldValues> {
     className?: string
     disabled?: boolean
     error?: TFieldValues
     label?: string
     placeholder?: string
-    requiredSymbol? :boolean
+    requiredSymbol?: boolean
     options: Array<{ label: string; value: string }>
     value?: string
     defaultValue?: string
     handleLeftIcon?: () => void
     helperText?: string
     leftIcon?: React.ReactNode
-    onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void
+    onValueChange?: (value: string) => void
     size?: 'sm' | 'md' | 'lg'
-    register?: UseFormRegisterReturn<string>
 }
 
 export interface StateInterface {

package/components/Table/components/DatatableColumnFilterMenu/DatatableColumnFilterMenu.tsx

@@ -34,7 +34,6 @@ interface DatatableColumnFilterMenuProps {
   labels?: DatatableFilterDropdownLabels
 }
 
-const SELECT_PLACEHOLDER_VALUE = '__placeholder__'
 
 function DatatableColumnFilterMenu({
   columnId,
@@ -50,13 +49,10 @@ function DatatableColumnFilterMenu({
   const filterType = meta?.filterType
   const filterLabel = meta?.filterLabel ?? String(title)
   const filterPlaceholder = meta?.filterPlaceholder ?? 'Pesquisar...'
-  const selectOptions = [
-    { label: filterPlaceholder, value: SELECT_PLACEHOLDER_VALUE },
-    ...(meta?.selectOptions ?? []).map((o) => ({
-      label: o.label,
-      value: String(o.value),
-    })),
-  ]
+  const selectOptions = (meta?.selectOptions ?? []).map((o) => ({
+    label: o.label,
+    value: String(o.value),
+  }))
 
   const hasActiveFilter =
     filterValue !== undefined &&
@@ -92,11 +88,7 @@ function DatatableColumnFilterMenu({
   }
 
   const handleSelectChange = (value: string) => {
-    if (!value || value === SELECT_PLACEHOLDER_VALUE) {
-      onFilterValueChange(columnId, undefined)
-    } else {
-      onFilterValueChange(columnId, { type: 'select', value })
-    }
+    onFilterValueChange(columnId, { type: 'select', value })
     onOpenChange(false)
   }
 
@@ -109,7 +101,7 @@ function DatatableColumnFilterMenu({
   const selectValue =
     filterValue?.type === 'select' && filterValue.value != null
       ? String(filterValue.value)
-      : SELECT_PLACEHOLDER_VALUE
+      : undefined
 
   if (!filterType) {
     return (
@@ -203,19 +195,13 @@ function DatatableColumnFilterMenu({
 
             {filterType === 'select' && (
               <Select
-                key={`select-${columnId}-${selectValue}`}
+                key={`select-${columnId}`}
                 label=""
                 options={selectOptions}
-                defaultValue={selectValue}
+                value={selectValue ?? ''}
+                placeholder={filterPlaceholder}
                 size="sm"
-                register={{
-                  name: `datatable-select-${columnId}`,
-                  ref: () => { },
-                  onBlur: async () => { },
-                  onChange: async (e: { target: { value: string } }) => {
-                    handleSelectChange(e.target.value)
-                  },
-                }}
+                onValueChange={handleSelectChange}
               />
             )}
           </FilterPopoverContent>

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@liguelead/design-system",
-    "version": "0.0.32",
+    "version": "0.0.34",
     "type": "module",
     "main": "components/index.ts",
     "publishConfig": {
@@ -13,7 +13,7 @@
         "react-hook-form": ">=7.0.0"
     },
     "dependencies": {
-        "@liguelead/foundation": "^0.0.16",
+        "@liguelead/foundation": "^0.0.17",
         "@phosphor-icons/react": "^2.1.7",
         "@radix-ui/react-dropdown-menu": "^2.1.6",
         "react-day-picker": "^9.12.0",