@consumidor-positivo/aurora 0.0.158 → 0.0.160

package/dist/components/SelectField/index.es.js

@@ -228,7 +228,8 @@ const SelectField = ({
   onBlur,
   autocomplete = false,
   EmptyText = "Nada encontrado",
-  fullScreenOptions = false
+  fullScreenOptions = false,
+  htmlType = "text"
 }) => {
   const {
     isDropdownOpen,
@@ -319,8 +320,9 @@ const SelectField = ({
                       value: searchValue || selectedOption.label,
                       placeholder: placeholder || "Selecionar...",
                       onChange: handleInputChange,
-                      readOnly: !autocomplete,
-                      disabled
+                      readOnly: !autocomplete || fullScreenOptions && isMobile(),
+                      disabled,
+                      type: htmlType
                     }
                   ),
                   /* @__PURE__ */ jsx("div", { className: "au-field__select-icon", children: /* @__PURE__ */ jsx(IconChevronDown, {}) })
@@ -420,7 +422,8 @@ const SelectField = ({
                           value: searchValue || selectedOption.label,
                           placeholder: "Buscar",
                           onChange: handleInputChange,
-                          disabled
+                          disabled,
+                          type: htmlType
                         }
                       ),
                       /* @__PURE__ */ jsx("div", { className: "au-field__select-icon", children: /* @__PURE__ */ jsx(IconSearch, { rawColor: COLOR_NEUTRAL_40 }) })

package/dist/components/SelectField/index.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.es.js","sources":["../../../lib/components/form/SelectField/hook.ts","../../../lib/components/form/SelectField/index.tsx"],"sourcesContent":["import { useState, useRef, useEffect } from 'react'\nimport { OptionProps } from './types'\n\nexport const useSelectField = (\n  options: OptionProps[],\n  initialValue?: string,\n  onChange?: (value: string) => void,\n  onBlur?: React.FocusEventHandler,\n  disabled?: boolean,\n  register?: (instance: HTMLSelectElement | null) => void,\n  autocomplete: boolean = false,\n  fullScreenOptions: boolean = false,\n) => {\n  const [isDropdownOpen, setIsDropdownOpen] = useState(false)\n  const [selectedOption, setSelectedOption] = useState<OptionProps>({\n    value: initialValue || '',\n    label: initialValue\n      ? options.find((option) => option.value === initialValue)?.label || ''\n      : '',\n  })\n  const [activeOptionIndex, setActiveOptionIndex] = useState<number | null>(\n    null,\n  )\n  const [dropdownMaxHeight, setDropdownMaxHeight] = useState<number>(0)\n  const selectRef = useRef<HTMLDivElement>(null)\n  const selectElementRef = useRef<HTMLSelectElement>(null)\n  const [searchValue, setSearchValue] = useState<string>('')\n  const activeOptionRef = useRef<HTMLLIElement | null>(null)\n\n  const filteredOptions = autocomplete || fullScreenOptions\n    ? options.filter((option) =>\n        option.label.toLowerCase().includes(searchValue.toLowerCase()),\n      )\n    : options\n\n  useEffect(() => {\n    if (initialValue) {\n      const option = options.find((option) => option.value === initialValue)\n      if (option) {\n        setSelectedOption({ value: option.value, label: option.label })\n      }\n    }\n  }, [initialValue, options])\n\n  useEffect(() => {\n    if (register && selectElementRef.current) {\n      register(selectElementRef.current)\n    }\n  }, [register])\n\n  useEffect(() => {\n    if (activeOptionRef.current) {\n      activeOptionRef.current.scrollIntoView({\n        behavior: 'smooth',\n        block: 'nearest',\n      })\n    }\n  }, [activeOptionIndex])\n\n  useEffect(() => {\n    const handleClickOutside = (event: PointerEvent) => {\n      const isClickedOutside =\n        selectRef.current &&\n        !selectRef.current.contains(event.target as Node) &&\n        activeOptionRef.current\n\n      if (isClickedOutside) {\n        setIsDropdownOpen(false)\n      }\n    }\n\n    if (isDropdownOpen) {\n      document.addEventListener('pointerup', handleClickOutside)\n    } else {\n      document.removeEventListener('pointerup', handleClickOutside)\n    }\n\n    return () => {\n      document.removeEventListener('pointerup', handleClickOutside)\n    }\n  }, [isDropdownOpen])\n\n  const toggleDropdown = () => {\n    if (!isDropdownOpen && selectRef.current) {\n      const { bottom } = selectRef.current.getBoundingClientRect()\n      let totalPadding = 0\n      let parentElement: HTMLElement | null = selectRef.current.parentElement\n\n      while (parentElement) {\n        const parentPaddingBottom = parseFloat(\n          window.getComputedStyle(parentElement).paddingBottom || '0',\n        )\n        totalPadding += parentPaddingBottom\n        parentElement = parentElement.parentElement\n      }\n\n      const availableSpaceBelow = window.innerHeight - bottom - totalPadding\n      const minDropdownHeight = 212\n      const calculatedHeight = Math.max(availableSpaceBelow, minDropdownHeight)\n\n      setDropdownMaxHeight(calculatedHeight)\n    }\n\n    setIsDropdownOpen((prev) => {\n      if (!prev) {\n        const selectedIndex = options.findIndex(\n          (option) => option.value === selectedOption.value,\n        )\n        setActiveOptionIndex(selectedIndex !== -1 ? selectedIndex : null)\n      }\n      return !prev\n    })\n  }\n\n  const _findNextAvailableIndex = (\n    currentIndex: number,\n    direction: 'down' | 'up',\n  ) => {\n    const step = direction === 'down' ? 1 : -1\n    let nextIndex =\n      (currentIndex + step + filteredOptions.length) % filteredOptions.length\n\n    while (filteredOptions[nextIndex]?.disabled) {\n      nextIndex =\n        (nextIndex + step + filteredOptions.length) % filteredOptions.length\n    }\n\n    return nextIndex\n  }\n\n  const onKeyDownDropdown = (e: React.KeyboardEvent<HTMLDivElement>) => {\n    if (disabled) return\n\n    const _actions: Record<string, () => void> = {\n      Enter: () => {\n        if (!isDropdownOpen) {\n          toggleDropdown()\n          return\n        }\n        if (\n          activeOptionIndex !== null &&\n          !filteredOptions[activeOptionIndex].disabled\n        ) {\n          e.preventDefault()\n          selectOption(\n            filteredOptions[activeOptionIndex].value,\n            filteredOptions[activeOptionIndex].disabled,\n          )\n        }\n      },\n      ArrowDown: () => {\n        e.preventDefault()\n        setActiveOptionIndex((prev) =>\n          _findNextAvailableIndex(prev !== null ? prev : -1, 'down'),\n        )\n        if (!isDropdownOpen) toggleDropdown()\n      },\n      ArrowUp: () => {\n        e.preventDefault()\n        setActiveOptionIndex((prev) =>\n          _findNextAvailableIndex(\n            prev !== null ? prev : filteredOptions.length,\n            'up',\n          ),\n        )\n        if (!isDropdownOpen) toggleDropdown()\n      },\n      Escape: () => {\n        setIsDropdownOpen(false)\n      },\n    }\n\n    if (_actions[e.key]) {\n      _actions[e.key]()\n    }\n  }\n\n  const selectOption = (optionValue: string, optionDisabled?: boolean) => {\n    if (optionDisabled) return\n\n    const option = options.find((option) => option.value === optionValue)\n    if (option) {\n      setSelectedOption({ value: option.value, label: option.label })\n    }\n\n    setActiveOptionIndex(null)\n    setSearchValue('')\n    setTimeout(() => setIsDropdownOpen(false), 500)\n\n    if (onChange) {\n      onChange(optionValue)\n    }\n  }\n\n  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n    const value = e.target.value\n    setSearchValue(value)\n\n    if (onChange) {\n      onChange(value)\n    }\n\n    if (value === '') {\n      setSelectedOption({ value: '', label: '' })\n    }\n\n    if (!isDropdownOpen) {\n      setIsDropdownOpen(true)\n    }\n  }\n\n  const handleOnBlur = (event?: React.FocusEvent<Element>) => {\n    if (onBlur) {\n      setTimeout(() => {\n        const getOptionByLabel = (label: string) =>\n          options.find((option) => option.label === label)\n\n        const elementValue = (event?.target as HTMLInputElement).value\n        const selectedOptionFromElement = getOptionByLabel(elementValue)\n\n        const targetValue = selectedOption?.value\n          ? selectedOption\n          : selectedOptionFromElement || { value: elementValue, label: '' }\n\n        onBlur({\n          ...event,\n          target: targetValue,\n        } as React.FocusEvent<Element> & {\n          target: OptionProps\n        })\n      }, 200)\n    }\n  }\n\n  const onCloseOptions = () => {\n    setIsDropdownOpen(false)\n  }\n\n  return {\n    isDropdownOpen,\n    selectRef,\n    activeOptionRef,\n    selectElementRef,\n    toggleDropdown,\n    selectOption,\n    onKeyDownDropdown,\n    setActiveOptionIndex,\n    activeOptionIndex,\n    filteredOptions,\n    searchValue,\n    setSearchValue,\n    handleInputChange,\n    dropdownMaxHeight,\n    selectedOption,\n    setSelectedOption,\n    handleOnBlur,\n    onCloseOptions,\n  }\n}\n","import { createPortal } from 'react-dom'\nimport classNames from 'classnames'\nimport {\n  IconChevronDown,\n  IconSlash,\n  IconCheck,\n  IconSearch,\n} from '@components/icons'\nimport { Modal } from '@components/Modal'\nimport { Text } from '@components/Text'\nimport { Conditional } from '@components/misc'\nimport { COLOR_NEUTRAL_40 } from '@core/tokens'\nimport { isMobile } from '@core/utils/isMobile'\n\nimport Field from '../Field'\nimport { OptionProps, SelectFieldProps } from './types'\nimport { useSelectField } from './hook'\nimport './styles.scss'\n\nexport const SelectField = ({\n  label,\n  options,\n  showOptionalLabel,\n  error,\n  errorMessage,\n  helpMessage,\n  disabled,\n  required,\n  value,\n  onChange,\n  style,\n  className,\n  placeholder,\n  name,\n  register,\n  onBlur,\n  autocomplete = false,\n  EmptyText = 'Nada encontrado',\n  fullScreenOptions = false,\n}: SelectFieldProps) => {\n  const {\n    isDropdownOpen,\n    selectRef,\n    selectElementRef,\n    activeOptionRef,\n    toggleDropdown,\n    selectOption,\n    onKeyDownDropdown,\n    setActiveOptionIndex,\n    activeOptionIndex,\n    filteredOptions,\n    searchValue,\n    selectedOption,\n    handleInputChange,\n    dropdownMaxHeight,\n    handleOnBlur,\n    onCloseOptions\n  } = useSelectField(\n    options,\n    value,\n    onChange,\n    onBlur,\n    disabled,\n    register,\n    autocomplete,\n    fullScreenOptions,\n  )\n\n  const selectClasses = classNames('au-field__select', {\n    'au-field__select--disabled': disabled,\n    'au-field__select--open': isDropdownOpen,\n    'au-field__select--required': required,\n    'au-field__select--error': error,\n    [className!]: className,\n  })\n\n  const optionsClasses = classNames('au-field__select-options', {\n    'au-field__select-options--open': isDropdownOpen,\n  })\n\n  const optionClasses = (option: OptionProps, index: number) =>\n    classNames('au-field__select-option', {\n      'au-field__select-option--highlighted': activeOptionIndex === index,\n      'au-field__select-option--selected':\n        option.value === selectedOption.value,\n      'au-field__select-option--disabled': option.disabled,\n    })\n\n  const fullScreenOptionClasses = (option: OptionProps, index: number) =>\n    classNames('au-field__fullscreen-options-select-option', {\n      'au-field__fullscreen-options-select-option--highlighted':\n        activeOptionIndex === index,\n      'au-field__fullscreen-options-select-option--selected':\n        option.value === selectedOption.value,\n      'au-field__fullscreen-options-select-option--disabled': option.disabled,\n    })\n\n  return (\n    <>\n      <Field.Root\n        style={style}\n        customclass={className}\n        error={error}\n        disabled={disabled}>\n        <Field.Label\n          text={label}\n          showOptionalLabel={showOptionalLabel}\n          required={required}\n          error={error}\n          disabled={disabled}\n        />\n        <div className={selectClasses}>\n          <div\n            className=\"au-field__select-wrapper\"\n            onClick={toggleDropdown}\n            onKeyDown={onKeyDownDropdown}\n            tabIndex={disabled ? -1 : 0}\n            ref={selectRef}\n            role=\"combobox\"\n            aria-haspopup=\"listbox\"\n            aria-expanded={isDropdownOpen}\n            aria-labelledby=\"select-label\"\n            aria-activedescendant={\n              activeOptionIndex !== null && filteredOptions[activeOptionIndex]\n                ? filteredOptions[activeOptionIndex].value\n                : undefined\n            }\n            onBlur={handleOnBlur}>\n            <input\n              className=\"au-field__select-input\"\n              value={searchValue || selectedOption.label}\n              placeholder={placeholder || 'Selecionar...'}\n              onChange={handleInputChange}\n              readOnly={!autocomplete}\n              disabled={disabled}\n            />\n            <div className=\"au-field__select-icon\">\n              <IconChevronDown />\n            </div>\n          </div>\n          <Conditional\n            condition={!fullScreenOptions || !isMobile()}\n            renderIf={\n              <ul\n                className={optionsClasses}\n                role=\"listbox\"\n                aria-live=\"polite\"\n                tabIndex={-1}\n                style={{\n                  maxHeight: `${dropdownMaxHeight}px`,\n                  overflowY: 'auto',\n                }}>\n                {filteredOptions.length === 0 ? (\n                  <li className=\"au-field__select-option au-field__select-option--empty\">\n                    {EmptyText}\n                  </li>\n                ) : (\n                  filteredOptions.map((option, index) => (\n                    <li\n                      key={index}\n                      className={optionClasses(option, index)}\n                      ref={activeOptionIndex === index ? activeOptionRef : null}\n                      role=\"option\"\n                      aria-selected={option.value === selectedOption.value}\n                      aria-disabled={option.disabled}\n                      onPointerUp={() =>\n                        selectOption(option.value, option.disabled)\n                      }\n                      onMouseEnter={() => setActiveOptionIndex(index)}>\n                      {option.label}\n                      {option.disabled ? (\n                        <IconSlash />\n                      ) : option.value === selectedOption.value ? (\n                        <IconCheck />\n                      ) : null}\n                    </li>\n                  ))\n                )}\n              </ul>\n            }\n          />\n\n          <select\n            hidden\n            disabled={disabled}\n            value={selectedOption.value}\n            onChange={(e) => selectOption(e.target.value)}\n            ref={selectElementRef}\n            name={name}>\n            {options.map((option, index) => (\n              <option key={index} value={option.value}>\n                {option.label}\n              </option>\n            ))}\n          </select>\n        </div>\n        <Field.Message\n          hasError={!!error}\n          errorMessage={errorMessage}\n          helpMessage={helpMessage}\n        />\n      </Field.Root>\n\n      <Conditional\n        condition={fullScreenOptions && Boolean(isMobile())}\n        renderIf={\n          <>\n            {createPortal(\n              <Modal\n                isOpen={isDropdownOpen}\n                onClose={onCloseOptions}\n                headerContent={\n                  <div>\n                    <Text as=\"label\" variant=\"heading-small\" weight=\"bold\">\n                      {label}\n                    </Text>\n                    <div\n                      className=\"au-field__fullscreen-options-select-search-bar\"\n                      onKeyDown={onKeyDownDropdown}\n                      tabIndex={disabled ? -1 : 0}\n                      ref={selectRef}\n                      role=\"combobox\"\n                      aria-haspopup=\"listbox\"\n                      aria-expanded={isDropdownOpen}\n                      aria-labelledby=\"select-label\"\n                      aria-activedescendant={\n                        activeOptionIndex !== null &&\n                        filteredOptions[activeOptionIndex]\n                          ? filteredOptions[activeOptionIndex].value\n                          : undefined\n                      }\n                      onBlur={handleOnBlur}>\n                      <input\n                        className=\"au-field__select-input\"\n                        value={searchValue || selectedOption.label}\n                        placeholder={'Buscar'}\n                        onChange={handleInputChange}\n                        disabled={disabled}\n                      />\n                      <div className=\"au-field__select-icon\">\n                        <IconSearch rawColor={COLOR_NEUTRAL_40} />\n                      </div>\n                    </div>\n                  </div>\n                }\n                content={\n                  <div className=\"au-field__fullscreen-options-select-options\">\n                    {filteredOptions.map((option, index) => (\n                      <li\n                        key={index}\n                        className={fullScreenOptionClasses(option, index)}\n                        ref={\n                          activeOptionIndex === index ? activeOptionRef : null\n                        }\n                        role=\"option\"\n                        aria-selected={option.value === selectedOption.value}\n                        aria-disabled={option.disabled}\n                        onPointerUp={() =>\n                          selectOption(option.value, option.disabled)\n                        }\n                        onMouseEnter={() => setActiveOptionIndex(index)}>\n                        {option.label}\n                        {option.disabled ? (\n                          <IconSlash />\n                        ) : option.value === selectedOption.value ? (\n                          <IconCheck />\n                        ) : null}\n                      </li>\n                    ))}\n                  </div>\n                }\n              />,\n              document.body,\n            )}\n          </>\n        }\n      />\n    </>\n  )\n}\n"],"names":["option","_a"],"mappings":"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"}
+{"version":3,"file":"index.es.js","sources":["../../../lib/components/form/SelectField/hook.ts","../../../lib/components/form/SelectField/index.tsx"],"sourcesContent":["import { useState, useRef, useEffect } from 'react'\nimport { OptionProps } from './types'\n\nexport const useSelectField = (\n  options: OptionProps[],\n  initialValue?: string,\n  onChange?: (value: string) => void,\n  onBlur?: React.FocusEventHandler,\n  disabled?: boolean,\n  register?: (instance: HTMLSelectElement | null) => void,\n  autocomplete: boolean = false,\n  fullScreenOptions: boolean = false,\n) => {\n  const [isDropdownOpen, setIsDropdownOpen] = useState(false)\n  const [selectedOption, setSelectedOption] = useState<OptionProps>({\n    value: initialValue || '',\n    label: initialValue\n      ? options.find((option) => option.value === initialValue)?.label || ''\n      : '',\n  })\n  const [activeOptionIndex, setActiveOptionIndex] = useState<number | null>(\n    null,\n  )\n  const [dropdownMaxHeight, setDropdownMaxHeight] = useState<number>(0)\n  const selectRef = useRef<HTMLDivElement>(null)\n  const selectElementRef = useRef<HTMLSelectElement>(null)\n  const [searchValue, setSearchValue] = useState<string>('')\n  const activeOptionRef = useRef<HTMLLIElement | null>(null)\n\n  const filteredOptions = autocomplete || fullScreenOptions\n    ? options.filter((option) =>\n        option.label.toLowerCase().includes(searchValue.toLowerCase()),\n      )\n    : options\n\n  useEffect(() => {\n    if (initialValue) {\n      const option = options.find((option) => option.value === initialValue)\n      if (option) {\n        setSelectedOption({ value: option.value, label: option.label })\n      }\n    }\n  }, [initialValue, options])\n\n  useEffect(() => {\n    if (register && selectElementRef.current) {\n      register(selectElementRef.current)\n    }\n  }, [register])\n\n  useEffect(() => {\n    if (activeOptionRef.current) {\n      activeOptionRef.current.scrollIntoView({\n        behavior: 'smooth',\n        block: 'nearest',\n      })\n    }\n  }, [activeOptionIndex])\n\n  useEffect(() => {\n    const handleClickOutside = (event: PointerEvent) => {\n      const isClickedOutside =\n        selectRef.current &&\n        !selectRef.current.contains(event.target as Node) &&\n        activeOptionRef.current\n\n      if (isClickedOutside) {\n        setIsDropdownOpen(false)\n      }\n    }\n\n    if (isDropdownOpen) {\n      document.addEventListener('pointerup', handleClickOutside)\n    } else {\n      document.removeEventListener('pointerup', handleClickOutside)\n    }\n\n    return () => {\n      document.removeEventListener('pointerup', handleClickOutside)\n    }\n  }, [isDropdownOpen])\n\n  const toggleDropdown = () => {\n    if (!isDropdownOpen && selectRef.current) {\n      const { bottom } = selectRef.current.getBoundingClientRect()\n      let totalPadding = 0\n      let parentElement: HTMLElement | null = selectRef.current.parentElement\n\n      while (parentElement) {\n        const parentPaddingBottom = parseFloat(\n          window.getComputedStyle(parentElement).paddingBottom || '0',\n        )\n        totalPadding += parentPaddingBottom\n        parentElement = parentElement.parentElement\n      }\n\n      const availableSpaceBelow = window.innerHeight - bottom - totalPadding\n      const minDropdownHeight = 212\n      const calculatedHeight = Math.max(availableSpaceBelow, minDropdownHeight)\n\n      setDropdownMaxHeight(calculatedHeight)\n    }\n\n    setIsDropdownOpen((prev) => {\n      if (!prev) {\n        const selectedIndex = options.findIndex(\n          (option) => option.value === selectedOption.value,\n        )\n        setActiveOptionIndex(selectedIndex !== -1 ? selectedIndex : null)\n      }\n      return !prev\n    })\n  }\n\n  const _findNextAvailableIndex = (\n    currentIndex: number,\n    direction: 'down' | 'up',\n  ) => {\n    const step = direction === 'down' ? 1 : -1\n    let nextIndex =\n      (currentIndex + step + filteredOptions.length) % filteredOptions.length\n\n    while (filteredOptions[nextIndex]?.disabled) {\n      nextIndex =\n        (nextIndex + step + filteredOptions.length) % filteredOptions.length\n    }\n\n    return nextIndex\n  }\n\n  const onKeyDownDropdown = (e: React.KeyboardEvent<HTMLDivElement>) => {\n    if (disabled) return\n\n    const _actions: Record<string, () => void> = {\n      Enter: () => {\n        if (!isDropdownOpen) {\n          toggleDropdown()\n          return\n        }\n        if (\n          activeOptionIndex !== null &&\n          !filteredOptions[activeOptionIndex].disabled\n        ) {\n          e.preventDefault()\n          selectOption(\n            filteredOptions[activeOptionIndex].value,\n            filteredOptions[activeOptionIndex].disabled,\n          )\n        }\n      },\n      ArrowDown: () => {\n        e.preventDefault()\n        setActiveOptionIndex((prev) =>\n          _findNextAvailableIndex(prev !== null ? prev : -1, 'down'),\n        )\n        if (!isDropdownOpen) toggleDropdown()\n      },\n      ArrowUp: () => {\n        e.preventDefault()\n        setActiveOptionIndex((prev) =>\n          _findNextAvailableIndex(\n            prev !== null ? prev : filteredOptions.length,\n            'up',\n          ),\n        )\n        if (!isDropdownOpen) toggleDropdown()\n      },\n      Escape: () => {\n        setIsDropdownOpen(false)\n      },\n    }\n\n    if (_actions[e.key]) {\n      _actions[e.key]()\n    }\n  }\n\n  const selectOption = (optionValue: string, optionDisabled?: boolean) => {\n    if (optionDisabled) return\n\n    const option = options.find((option) => option.value === optionValue)\n    if (option) {\n      setSelectedOption({ value: option.value, label: option.label })\n    }\n\n    setActiveOptionIndex(null)\n    setSearchValue('')\n    setTimeout(() => setIsDropdownOpen(false), 500)\n\n    if (onChange) {\n      onChange(optionValue)\n    }\n  }\n\n  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n    const value = e.target.value\n    setSearchValue(value)\n\n    if (onChange) {\n      onChange(value)\n    }\n\n    if (value === '') {\n      setSelectedOption({ value: '', label: '' })\n    }\n\n    if (!isDropdownOpen) {\n      setIsDropdownOpen(true)\n    }\n  }\n\n  const handleOnBlur = (event?: React.FocusEvent<Element>) => {\n    if (onBlur) {\n      setTimeout(() => {\n        const getOptionByLabel = (label: string) =>\n          options.find((option) => option.label === label)\n\n        const elementValue = (event?.target as HTMLInputElement).value\n        const selectedOptionFromElement = getOptionByLabel(elementValue)\n\n        const targetValue = selectedOption?.value\n          ? selectedOption\n          : selectedOptionFromElement || { value: elementValue, label: '' }\n\n        onBlur({\n          ...event,\n          target: targetValue,\n        } as React.FocusEvent<Element> & {\n          target: OptionProps\n        })\n      }, 200)\n    }\n  }\n\n  const onCloseOptions = () => {\n    setIsDropdownOpen(false)\n  }\n\n  return {\n    isDropdownOpen,\n    selectRef,\n    activeOptionRef,\n    selectElementRef,\n    toggleDropdown,\n    selectOption,\n    onKeyDownDropdown,\n    setActiveOptionIndex,\n    activeOptionIndex,\n    filteredOptions,\n    searchValue,\n    setSearchValue,\n    handleInputChange,\n    dropdownMaxHeight,\n    selectedOption,\n    setSelectedOption,\n    handleOnBlur,\n    onCloseOptions,\n  }\n}\n","import { createPortal } from 'react-dom'\nimport classNames from 'classnames'\nimport {\n  IconChevronDown,\n  IconSlash,\n  IconCheck,\n  IconSearch,\n} from '@components/icons'\nimport { Modal } from '@components/Modal'\nimport { Text } from '@components/Text'\nimport { Conditional } from '@components/misc'\nimport { COLOR_NEUTRAL_40 } from '@core/tokens'\nimport { isMobile } from '@core/utils/isMobile'\n\nimport Field from '../Field'\nimport { OptionProps, SelectFieldProps } from './types'\nimport { useSelectField } from './hook'\nimport './styles.scss'\n\nexport const SelectField = ({\n  label,\n  options,\n  showOptionalLabel,\n  error,\n  errorMessage,\n  helpMessage,\n  disabled,\n  required,\n  value,\n  onChange,\n  style,\n  className,\n  placeholder,\n  name,\n  register,\n  onBlur,\n  autocomplete = false,\n  EmptyText = 'Nada encontrado',\n  fullScreenOptions = false,\n  htmlType = 'text'\n}: SelectFieldProps) => {\n  const {\n    isDropdownOpen,\n    selectRef,\n    selectElementRef,\n    activeOptionRef,\n    toggleDropdown,\n    selectOption,\n    onKeyDownDropdown,\n    setActiveOptionIndex,\n    activeOptionIndex,\n    filteredOptions,\n    searchValue,\n    selectedOption,\n    handleInputChange,\n    dropdownMaxHeight,\n    handleOnBlur,\n    onCloseOptions\n  } = useSelectField(\n    options,\n    value,\n    onChange,\n    onBlur,\n    disabled,\n    register,\n    autocomplete,\n    fullScreenOptions,\n  )\n\n  const selectClasses = classNames('au-field__select', {\n    'au-field__select--disabled': disabled,\n    'au-field__select--open': isDropdownOpen,\n    'au-field__select--required': required,\n    'au-field__select--error': error,\n    [className!]: className,\n  })\n\n  const optionsClasses = classNames('au-field__select-options', {\n    'au-field__select-options--open': isDropdownOpen,\n  })\n\n  const optionClasses = (option: OptionProps, index: number) =>\n    classNames('au-field__select-option', {\n      'au-field__select-option--highlighted': activeOptionIndex === index,\n      'au-field__select-option--selected':\n        option.value === selectedOption.value,\n      'au-field__select-option--disabled': option.disabled,\n    })\n\n  const fullScreenOptionClasses = (option: OptionProps, index: number) =>\n    classNames('au-field__fullscreen-options-select-option', {\n      'au-field__fullscreen-options-select-option--highlighted':\n        activeOptionIndex === index,\n      'au-field__fullscreen-options-select-option--selected':\n        option.value === selectedOption.value,\n      'au-field__fullscreen-options-select-option--disabled': option.disabled,\n    })\n\n  return (\n    <>\n      <Field.Root\n        style={style}\n        customclass={className}\n        error={error}\n        disabled={disabled}>\n        <Field.Label\n          text={label}\n          showOptionalLabel={showOptionalLabel}\n          required={required}\n          error={error}\n          disabled={disabled}\n        />\n        <div className={selectClasses}>\n          <div\n            className=\"au-field__select-wrapper\"\n            onClick={toggleDropdown}\n            onKeyDown={onKeyDownDropdown}\n            tabIndex={disabled ? -1 : 0}\n            ref={selectRef}\n            role=\"combobox\"\n            aria-haspopup=\"listbox\"\n            aria-expanded={isDropdownOpen}\n            aria-labelledby=\"select-label\"\n            aria-activedescendant={\n              activeOptionIndex !== null && filteredOptions[activeOptionIndex]\n                ? filteredOptions[activeOptionIndex].value\n                : undefined\n            }\n            onBlur={handleOnBlur}>\n            <input\n              className=\"au-field__select-input\"\n              value={searchValue || selectedOption.label}\n              placeholder={placeholder || 'Selecionar...'}\n              onChange={handleInputChange}\n              readOnly={!autocomplete || (fullScreenOptions && isMobile())}\n              disabled={disabled}\n              type={htmlType}\n            />\n            <div className=\"au-field__select-icon\">\n              <IconChevronDown />\n            </div>\n          </div>\n          <Conditional\n            condition={!fullScreenOptions || !isMobile()}\n            renderIf={\n              <ul\n                className={optionsClasses}\n                role=\"listbox\"\n                aria-live=\"polite\"\n                tabIndex={-1}\n                style={{\n                  maxHeight: `${dropdownMaxHeight}px`,\n                  overflowY: 'auto',\n                }}>\n                {filteredOptions.length === 0 ? (\n                  <li className=\"au-field__select-option au-field__select-option--empty\">\n                    {EmptyText}\n                  </li>\n                ) : (\n                  filteredOptions.map((option, index) => (\n                    <li\n                      key={index}\n                      className={optionClasses(option, index)}\n                      ref={activeOptionIndex === index ? activeOptionRef : null}\n                      role=\"option\"\n                      aria-selected={option.value === selectedOption.value}\n                      aria-disabled={option.disabled}\n                      onPointerUp={() =>\n                        selectOption(option.value, option.disabled)\n                      }\n                      onMouseEnter={() => setActiveOptionIndex(index)}>\n                      {option.label}\n                      {option.disabled ? (\n                        <IconSlash />\n                      ) : option.value === selectedOption.value ? (\n                        <IconCheck />\n                      ) : null}\n                    </li>\n                  ))\n                )}\n              </ul>\n            }\n          />\n\n          <select\n            hidden\n            disabled={disabled}\n            value={selectedOption.value}\n            onChange={(e) => selectOption(e.target.value)}\n            ref={selectElementRef}\n            name={name}>\n            {options.map((option, index) => (\n              <option key={index} value={option.value}>\n                {option.label}\n              </option>\n            ))}\n          </select>\n        </div>\n        <Field.Message\n          hasError={!!error}\n          errorMessage={errorMessage}\n          helpMessage={helpMessage}\n        />\n      </Field.Root>\n\n      <Conditional\n        condition={fullScreenOptions && Boolean(isMobile())}\n        renderIf={\n          <>\n            {createPortal(\n              <Modal\n                isOpen={isDropdownOpen}\n                onClose={onCloseOptions}\n                headerContent={\n                  <div>\n                    <Text as=\"label\" variant=\"heading-small\" weight=\"bold\">\n                      {label}\n                    </Text>\n                    <div\n                      className=\"au-field__fullscreen-options-select-search-bar\"\n                      onKeyDown={onKeyDownDropdown}\n                      tabIndex={disabled ? -1 : 0}\n                      ref={selectRef}\n                      role=\"combobox\"\n                      aria-haspopup=\"listbox\"\n                      aria-expanded={isDropdownOpen}\n                      aria-labelledby=\"select-label\"\n                      aria-activedescendant={\n                        activeOptionIndex !== null &&\n                        filteredOptions[activeOptionIndex]\n                          ? filteredOptions[activeOptionIndex].value\n                          : undefined\n                      }\n                      onBlur={handleOnBlur}>\n                      <input\n                        className=\"au-field__select-input\"\n                        value={searchValue || selectedOption.label}\n                        placeholder={'Buscar'}\n                        onChange={handleInputChange}\n                        disabled={disabled}\n                        type={htmlType}\n                      />\n                      <div className=\"au-field__select-icon\">\n                        <IconSearch rawColor={COLOR_NEUTRAL_40} />\n                      </div>\n                    </div>\n                  </div>\n                }\n                content={\n                  <div className=\"au-field__fullscreen-options-select-options\">\n                    {filteredOptions.map((option, index) => (\n                      <li\n                        key={index}\n                        className={fullScreenOptionClasses(option, index)}\n                        ref={\n                          activeOptionIndex === index ? activeOptionRef : null\n                        }\n                        role=\"option\"\n                        aria-selected={option.value === selectedOption.value}\n                        aria-disabled={option.disabled}\n                        onPointerUp={() =>\n                          selectOption(option.value, option.disabled)\n                        }\n                        onMouseEnter={() => setActiveOptionIndex(index)}>\n                        {option.label}\n                        {option.disabled ? (\n                          <IconSlash />\n                        ) : option.value === selectedOption.value ? (\n                          <IconCheck />\n                        ) : null}\n                      </li>\n                    ))}\n                  </div>\n                }\n              />,\n              document.body,\n            )}\n          </>\n        }\n      />\n    </>\n  )\n}\n"],"names":["option","_a"],"mappings":"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"}

package/dist/components/Tabs/index.d.ts

@@ -9,6 +9,7 @@ export interface TabItem {
     tab: string;
     title: string;
     children?: React.ReactElement;
+    icon?: React.ReactNode;
 }
 export declare const Tabs: ({ tabs, initialTab, onClick, areTabsHidden, }: TabsProps) => import("react/jsx-runtime").JSX.Element;
 export default Tabs;

package/dist/components/Tabs/index.es.js

@@ -30,13 +30,16 @@ import './styles.css';const Tabs = ({
       {
         condition: !areTabsHidden,
         renderIf: /* @__PURE__ */ jsx("div", { className: "au-tabs", children: /* @__PURE__ */ jsx("div", { className: "au-tabs__container", children: tabs.map((item) => {
-          return /* @__PURE__ */ jsx(
+          return /* @__PURE__ */ jsxs(
             Button,
             {
               className: buttonClass(item),
               type: "outlined",
               onClick: () => handleClick(item),
-              children: item.title
+              children: [
+                item.icon,
+                item.title
+              ]
             },
             `au-tabs-${item.tab}`
           );

package/dist/components/Tabs/index.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.es.js","sources":["../../../lib/components/Tabs/index.tsx"],"sourcesContent":["import classNames from 'classnames'\nimport { Conditional } from '@components/misc'\nimport { Button } from '@components/Button'\nimport { useState } from 'react'\nimport './styles.scss'\n\nexport interface TabsProps {\n  tabs: TabItem[]\n  areTabsHidden?: boolean\n  initialTab?: string\n  onClick: (value: string) => void\n}\n\nexport interface TabItem {\n  tab: string\n  title: string\n  children?: React.ReactElement\n}\n\nexport const Tabs = ({\n  tabs,\n  initialTab,\n  onClick,\n  areTabsHidden,\n}: TabsProps) => {\n  const [isClicked, setIsClicked] = useState(false)\n  const [currButton, setCurrButton] = useState(initialTab ?? '')\n  const [activeTab, setActiveTab] = useState(initialTab)\n\n  const handleClick = (item: TabItem) => {\n    onClick(item.tab)\n    setCurrButton(item.tab)\n    setActiveTab(item.tab)\n    setIsClicked(true)\n  }\n\n  const buttonClass = (item: TabItem) => {\n    const isActive =\n      (isClicked && item.tab === currButton) || activeTab === item.tab\n    return classNames('au-tabs__button', {\n      active: isActive,\n    })\n  }\n\n  return (\n    <>\n      <Conditional\n        condition={!areTabsHidden}\n        renderIf={\n          <div className=\"au-tabs\">\n            <div className=\"au-tabs__container\">\n              {tabs.map((item: TabItem) => {\n                return (\n                  <Button\n                    key={`au-tabs-${item.tab}`}\n                    className={buttonClass(item)}\n                    type={'outlined'}\n                    onClick={() => handleClick(item)}>\n                    {item.title}\n                  </Button>\n                )\n              })}\n            </div>\n          </div>\n        }\n        renderElse={null}\n      />\n\n      {tabs.map(({ children, tab }: TabItem) => {\n        return (\n          <div\n            className={`au-tabs__children children-${tab}`}\n            key={`au-tabs-${tab}`}>\n            <Conditional\n              condition={currButton === tab || activeTab === tab}\n              renderIf={children}\n            />\n          </div>\n        )\n      })}\n    </>\n  )\n}\n\nexport default Tabs\n"],"names":[],"mappings":";;;;;AAmBO,MAAM,OAAO,CAAC;AAAA,EACnB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAiB;AACf,QAAM,CAAC,WAAW,YAAY,IAAI,SAAS,KAAK;AAChD,QAAM,CAAC,YAAY,aAAa,IAAI,SAAS,cAAc,EAAE;AAC7D,QAAM,CAAC,WAAW,YAAY,IAAI,SAAS,UAAU;AAE/C,QAAA,cAAc,CAAC,SAAkB;AACrC,YAAQ,KAAK,GAAG;AAChB,kBAAc,KAAK,GAAG;AACtB,iBAAa,KAAK,GAAG;AACrB,iBAAa,IAAI;AAAA,EAAA;AAGb,QAAA,cAAc,CAAC,SAAkB;AACrC,UAAM,WACH,aAAa,KAAK,QAAQ,cAAe,cAAc,KAAK;AAC/D,WAAO,WAAW,mBAAmB;AAAA,MACnC,QAAQ;AAAA,IAAA,CACT;AAAA,EAAA;AAGH,SAEI,qBAAA,UAAA,EAAA,UAAA;AAAA,IAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAW,CAAC;AAAA,QACZ,UACE,oBAAC,OAAI,EAAA,WAAU,WACb,UAAA,oBAAC,OAAI,EAAA,WAAU,sBACZ,UAAA,KAAK,IAAI,CAAC,SAAkB;AAEzB,iBAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cAEC,WAAW,YAAY,IAAI;AAAA,cAC3B,MAAM;AAAA,cACN,SAAS,MAAM,YAAY,IAAI;AAAA,cAC9B,UAAK,KAAA;AAAA,YAAA;AAAA,YAJD,WAAW,KAAK,GAAG;AAAA,UAAA;AAAA,QAK1B,CAEH,GACH,EACF,CAAA;AAAA,QAEF,YAAY;AAAA,MAAA;AAAA,IACd;AAAA,IAEC,KAAK,IAAI,CAAC,EAAE,UAAU,UAAmB;AAEtC,aAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAW,8BAA8B,GAAG;AAAA,UAE5C,UAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAW,eAAe,OAAO,cAAc;AAAA,cAC/C,UAAU;AAAA,YAAA;AAAA,UACZ;AAAA,QAAA;AAAA,QAJK,WAAW,GAAG;AAAA,MAAA;AAAA,IAKrB,CAEH;AAAA,EACH,EAAA,CAAA;AAEJ;"}
+{"version":3,"file":"index.es.js","sources":["../../../lib/components/Tabs/index.tsx"],"sourcesContent":["import classNames from 'classnames'\nimport { Conditional } from '@components/misc'\nimport { Button } from '@components/Button'\nimport { useState } from 'react'\nimport './styles.scss'\n\nexport interface TabsProps {\n  tabs: TabItem[]\n  areTabsHidden?: boolean\n  initialTab?: string\n  onClick: (value: string) => void\n}\n\nexport interface TabItem {\n  tab: string\n  title: string\n  children?: React.ReactElement\n  icon?: React.ReactNode\n}\n\nexport const Tabs = ({\n  tabs,\n  initialTab,\n  onClick,\n  areTabsHidden,\n}: TabsProps) => {\n  const [isClicked, setIsClicked] = useState(false)\n  const [currButton, setCurrButton] = useState(initialTab ?? '')\n  const [activeTab, setActiveTab] = useState(initialTab)\n\n  const handleClick = (item: TabItem) => {\n    onClick(item.tab)\n    setCurrButton(item.tab)\n    setActiveTab(item.tab)\n    setIsClicked(true)\n  }\n\n  const buttonClass = (item: TabItem) => {\n    const isActive =\n      (isClicked && item.tab === currButton) || activeTab === item.tab\n    return classNames('au-tabs__button', {\n      active: isActive,\n    })\n  }\n\n  return (\n    <>\n      <Conditional\n        condition={!areTabsHidden}\n        renderIf={\n          <div className=\"au-tabs\">\n            <div className=\"au-tabs__container\">\n              {tabs.map((item: TabItem) => {\n                return (\n                  <Button\n                    key={`au-tabs-${item.tab}`}\n                    className={buttonClass(item)}\n                    type={'outlined'}\n                    onClick={() => handleClick(item)}>\n                    {item.icon}\n                    {item.title}\n                  </Button>\n                )\n              })}\n            </div>\n          </div>\n        }\n        renderElse={null}\n      />\n\n      {tabs.map(({ children, tab }: TabItem) => {\n        return (\n          <div\n            className={`au-tabs__children children-${tab}`}\n            key={`au-tabs-${tab}`}>\n            <Conditional\n              condition={currButton === tab || activeTab === tab}\n              renderIf={children}\n            />\n          </div>\n        )\n      })}\n    </>\n  )\n}\n\nexport default Tabs\n"],"names":[],"mappings":";;;;;AAoBO,MAAM,OAAO,CAAC;AAAA,EACnB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAiB;AACf,QAAM,CAAC,WAAW,YAAY,IAAI,SAAS,KAAK;AAChD,QAAM,CAAC,YAAY,aAAa,IAAI,SAAS,cAAc,EAAE;AAC7D,QAAM,CAAC,WAAW,YAAY,IAAI,SAAS,UAAU;AAE/C,QAAA,cAAc,CAAC,SAAkB;AACrC,YAAQ,KAAK,GAAG;AAChB,kBAAc,KAAK,GAAG;AACtB,iBAAa,KAAK,GAAG;AACrB,iBAAa,IAAI;AAAA,EAAA;AAGb,QAAA,cAAc,CAAC,SAAkB;AACrC,UAAM,WACH,aAAa,KAAK,QAAQ,cAAe,cAAc,KAAK;AAC/D,WAAO,WAAW,mBAAmB;AAAA,MACnC,QAAQ;AAAA,IAAA,CACT;AAAA,EAAA;AAGH,SAEI,qBAAA,UAAA,EAAA,UAAA;AAAA,IAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAW,CAAC;AAAA,QACZ,UACE,oBAAC,OAAI,EAAA,WAAU,WACb,UAAA,oBAAC,OAAI,EAAA,WAAU,sBACZ,UAAA,KAAK,IAAI,CAAC,SAAkB;AAEzB,iBAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cAEC,WAAW,YAAY,IAAI;AAAA,cAC3B,MAAM;AAAA,cACN,SAAS,MAAM,YAAY,IAAI;AAAA,cAC9B,UAAA;AAAA,gBAAK,KAAA;AAAA,gBACL,KAAK;AAAA,cAAA;AAAA,YAAA;AAAA,YALD,WAAW,KAAK,GAAG;AAAA,UAAA;AAAA,QAM1B,CAEH,GACH,EACF,CAAA;AAAA,QAEF,YAAY;AAAA,MAAA;AAAA,IACd;AAAA,IAEC,KAAK,IAAI,CAAC,EAAE,UAAU,UAAmB;AAEtC,aAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAW,8BAA8B,GAAG;AAAA,UAE5C,UAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAW,eAAe,OAAO,cAAc;AAAA,cAC/C,UAAU;AAAA,YAAA;AAAA,UACZ;AAAA,QAAA;AAAA,QAJK,WAAW,GAAG;AAAA,MAAA;AAAA,IAKrB,CAEH;AAAA,EACH,EAAA,CAAA;AAEJ;"}

package/dist/components/Tabs/styles.css

@@ -1 +1 @@
-.au-tabs__container{display:flex;gap:16px;white-space:nowrap;overflow-x:scroll}.au-tabs__container::-webkit-scrollbar{display:none}@media (min-width: 600px){.au-tabs__container{overflow:unset}}.au-tabs__button{border-color:#454a54;color:#454a54;-webkit-tap-highlight-color:transparent!important}.au-tabs__button.active{border-color:#0048db;color:#0048db}.au-tabs__children{margin:32px 20px 0}
+.au-tabs__container{display:flex;gap:16px;white-space:nowrap;overflow-x:scroll}.au-tabs__container::-webkit-scrollbar{display:none}@media (min-width: 600px){.au-tabs__container{overflow:unset}}.au-tabs__button{font-size:14px;font-weight:600;border-color:#e2e4e9;color:#454a54}.au-tabs__button .au-icon svg,.au-tabs__button svg{color:#454a54}.au-tabs__button.active{background-color:#fafbff;border-color:#9abcff;color:#0048db}.au-tabs__button.active .au-icon svg,.au-tabs__button.active svg{color:#0048db}.au-tabs__children{margin:32px 20px 0}

package/dist/components/form/SelectField/index.d.ts

@@ -1,3 +1,3 @@
 import { SelectFieldProps } from './types';
 
-export declare const SelectField: ({ label, options, showOptionalLabel, error, errorMessage, helpMessage, disabled, required, value, onChange, style, className, placeholder, name, register, onBlur, autocomplete, EmptyText, fullScreenOptions, }: SelectFieldProps) => import("react/jsx-runtime").JSX.Element;
+export declare const SelectField: ({ label, options, showOptionalLabel, error, errorMessage, helpMessage, disabled, required, value, onChange, style, className, placeholder, name, register, onBlur, autocomplete, EmptyText, fullScreenOptions, htmlType }: SelectFieldProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/form/SelectField/types.d.ts

@@ -21,4 +21,5 @@ export type SelectFieldProps = React.HTMLAttributes<HTMLDivElement> & {
     autocomplete?: boolean;
     EmptyText?: string;
     fullScreenOptions?: boolean;
+    htmlType?: 'text' | 'number';
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@consumidor-positivo/aurora",
   "private": false,
-  "version": "0.0.158",
+  "version": "0.0.160",
   "type": "module",
   "main": "./dist/main.es.js",
   "modules": "./dist/main.es.js",