@consumidor-positivo/aurora 0.0.74 → 0.0.75
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/CheckboxField/index.es.js +7 -2
- package/dist/components/CheckboxField/index.es.js.map +1 -1
- package/dist/components/Field/index.es.js +7 -2
- package/dist/components/Field/index.es.js.map +1 -1
- package/dist/components/Group/index.es.js +1 -1
- package/dist/components/Group/index.es.js.map +1 -1
- package/dist/components/SelectField/index.es.js +1 -1
- package/dist/components/SelectField/index.es.js.map +1 -1
- package/dist/components/SelectField/styles.css +1 -1
- package/package.json +1 -1
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import { jsxs, jsx } from "react/jsx-runtime";
|
|
2
|
+
import { useState } from "react";
|
|
2
3
|
import { c as classNames } from "../../index-CweZ_OcN.js";
|
|
3
4
|
import "../Icon/index.es.js";
|
|
4
5
|
import { IconCheck } from "../icons/IconCheck/index.es.js";
|
|
@@ -17,14 +18,18 @@ import './styles.css';const CheckboxField = ({
|
|
|
17
18
|
"au-checkbox--error": !!error,
|
|
18
19
|
"au-checkbox--disabled": !!disabled
|
|
19
20
|
});
|
|
21
|
+
const getSafeId = (id2) => {
|
|
22
|
+
return id2 ? id2 : `au-checkbox-${Math.random()}`;
|
|
23
|
+
};
|
|
24
|
+
const [safeId] = useState(getSafeId(id));
|
|
20
25
|
return /* @__PURE__ */ jsxs("div", { className: checkboxClasses, style, children: [
|
|
21
|
-
/* @__PURE__ */ jsxs("label", { htmlFor:
|
|
26
|
+
/* @__PURE__ */ jsxs("label", { htmlFor: safeId, className: "au-checkbox__holder", children: [
|
|
22
27
|
/* @__PURE__ */ jsx(
|
|
23
28
|
"input",
|
|
24
29
|
{
|
|
25
30
|
className: "au-checkbox__input",
|
|
26
31
|
type: "checkbox",
|
|
27
|
-
id,
|
|
32
|
+
id: safeId,
|
|
28
33
|
disabled,
|
|
29
34
|
...props
|
|
30
35
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.es.js","sources":["../../../lib/components/form/CheckboxField/index.tsx"],"sourcesContent":["import classNames from 'classnames'\nimport { IconCheck } from '@components/icons'\nimport { COLOR_NEUTRAL_00 } from '@core/tokens'\nimport Field from '../Field'\n\nimport './styles.scss'\n\ntype CheckboxFieldProps = React.InputHTMLAttributes<HTMLInputElement> & {\n label: string\n error: boolean\n errorMessage: string\n}\n\nexport const CheckboxField = ({\n label,\n error,\n errorMessage,\n disabled,\n id,\n style,\n ...props\n}: CheckboxFieldProps) => {\n const checkboxClasses = classNames('au-checkbox', {\n 'au-checkbox--error': !!error,\n 'au-checkbox--disabled': !!disabled,\n })\n\n return (\n <div className={checkboxClasses} style={style}>\n <label htmlFor={
|
|
1
|
+
{"version":3,"file":"index.es.js","sources":["../../../lib/components/form/CheckboxField/index.tsx"],"sourcesContent":["import { useState } from 'react'\nimport classNames from 'classnames'\nimport { IconCheck } from '@components/icons'\nimport { COLOR_NEUTRAL_00 } from '@core/tokens'\nimport Field from '../Field'\n\nimport './styles.scss'\n\ntype CheckboxFieldProps = React.InputHTMLAttributes<HTMLInputElement> & {\n label: string\n error: boolean\n errorMessage: string\n}\n\nexport const CheckboxField = ({\n label,\n error,\n errorMessage,\n disabled,\n id,\n style,\n ...props\n}: CheckboxFieldProps) => {\n const checkboxClasses = classNames('au-checkbox', {\n 'au-checkbox--error': !!error,\n 'au-checkbox--disabled': !!disabled,\n })\n\n const getSafeId = (id: CheckboxFieldProps['id']) => {\n return id ? id : `au-checkbox-${Math.random()}`\n }\n const [safeId] = useState(getSafeId(id))\n\n return (\n <div className={checkboxClasses} style={style}>\n <label htmlFor={safeId} className=\"au-checkbox__holder\">\n <input\n className=\"au-checkbox__input\"\n type=\"checkbox\"\n id={safeId}\n disabled={disabled}\n {...props}\n />\n <span className=\"au-checkbox__check\">\n <IconCheck rawColor={COLOR_NEUTRAL_00} />\n </span>\n <span className=\"au-checkbox__label\">{label}</span>\n </label>\n <Field.ErrorMessage hasError={!!error} message={errorMessage} />\n </div>\n )\n}\n"],"names":["id"],"mappings":";;;;;;;AAcO,MAAM,gBAAgB,CAAC;AAAA,EAC5B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAA0B;AAClB,QAAA,kBAAkB,WAAW,eAAe;AAAA,IAChD,sBAAsB,CAAC,CAAC;AAAA,IACxB,yBAAyB,CAAC,CAAC;AAAA,EAAA,CAC5B;AAEK,QAAA,YAAY,CAACA,QAAiC;AAClD,WAAOA,MAAKA,MAAK,eAAe,KAAK,OAAQ,CAAA;AAAA,EAAA;AAE/C,QAAM,CAAC,MAAM,IAAI,SAAS,UAAU,EAAE,CAAC;AAEvC,SACG,qBAAA,OAAA,EAAI,WAAW,iBAAiB,OAC/B,UAAA;AAAA,IAAA,qBAAC,SAAM,EAAA,SAAS,QAAQ,WAAU,uBAChC,UAAA;AAAA,MAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAU;AAAA,UACV,MAAK;AAAA,UACL,IAAI;AAAA,UACJ;AAAA,UACC,GAAG;AAAA,QAAA;AAAA,MACN;AAAA,MACA,oBAAC,UAAK,WAAU,sBACd,8BAAC,WAAU,EAAA,UAAU,kBAAkB,EACzC,CAAA;AAAA,MACC,oBAAA,QAAA,EAAK,WAAU,sBAAsB,UAAM,OAAA;AAAA,IAAA,GAC9C;AAAA,IACA,oBAAC,MAAM,cAAN,EAAmB,UAAU,CAAC,CAAC,OAAO,SAAS,cAAc;AAAA,EAChE,EAAA,CAAA;AAEJ;"}
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import { jsxs, jsx } from "react/jsx-runtime";
|
|
2
|
+
import { useState } from "react";
|
|
2
3
|
import { c as classNames } from "../../index-CweZ_OcN.js";
|
|
3
4
|
import './styles.css';const RadioField = ({
|
|
4
5
|
type = "radio",
|
|
@@ -15,18 +16,22 @@ import './styles.css';const RadioField = ({
|
|
|
15
16
|
"au-radio-field--disabled": !!disabled,
|
|
16
17
|
"au-radio-field--error": !!error
|
|
17
18
|
});
|
|
19
|
+
const getSafeId = (id2) => {
|
|
20
|
+
return id2 ? id2 : `au-radio-${Math.random()}`;
|
|
21
|
+
};
|
|
22
|
+
const [safeId] = useState(getSafeId(id));
|
|
18
23
|
return /* @__PURE__ */ jsxs("div", { className: radioClasses, children: [
|
|
19
24
|
/* @__PURE__ */ jsx(
|
|
20
25
|
"input",
|
|
21
26
|
{
|
|
22
27
|
className: "au-radio-field__input",
|
|
23
28
|
type,
|
|
24
|
-
id,
|
|
29
|
+
id: safeId,
|
|
25
30
|
disabled,
|
|
26
31
|
...props
|
|
27
32
|
}
|
|
28
33
|
),
|
|
29
|
-
/* @__PURE__ */ jsx("label", { className: "au-radio-field__label", htmlFor:
|
|
34
|
+
/* @__PURE__ */ jsx("label", { className: "au-radio-field__label", htmlFor: safeId, children: label })
|
|
30
35
|
] });
|
|
31
36
|
};
|
|
32
37
|
export {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.es.js","sources":["../../../lib/components/form/Radio/Field/index.tsx"],"sourcesContent":["import classNames from 'classnames'\nimport { RadioFieldProps } from '../types'\nimport './styles.scss'\n\nexport const RadioField = ({\n type = 'radio',\n direction = 'left',\n label,\n error,\n id,\n disabled,\n ...props\n}: RadioFieldProps) => {\n const radioClasses = classNames('au-radio-field', {\n 'au-radio-field--left-direction': direction === 'left',\n 'au-radio-field--right-direction': direction === 'right',\n 'au-radio-field--disabled': !!disabled,\n 'au-radio-field--error': !!error,\n })\n \n return (\n <div className={radioClasses}>\n <input\n className=\"au-radio-field__input\"\n type={type}\n id={
|
|
1
|
+
{"version":3,"file":"index.es.js","sources":["../../../lib/components/form/Radio/Field/index.tsx"],"sourcesContent":["import { useState } from 'react'\nimport classNames from 'classnames'\nimport { RadioFieldProps } from '../types'\nimport './styles.scss'\n\nexport const RadioField = ({\n type = 'radio',\n direction = 'left',\n label,\n error,\n id,\n disabled,\n ...props\n}: RadioFieldProps) => {\n const radioClasses = classNames('au-radio-field', {\n 'au-radio-field--left-direction': direction === 'left',\n 'au-radio-field--right-direction': direction === 'right',\n 'au-radio-field--disabled': !!disabled,\n 'au-radio-field--error': !!error,\n })\n\n const getSafeId = (id: RadioFieldProps['id']) => {\n return id ? id : `au-radio-${Math.random()}`\n }\n const [safeId] = useState(getSafeId(id))\n \n return (\n <div className={radioClasses}>\n <input\n className=\"au-radio-field__input\"\n type={type}\n id={safeId}\n disabled={disabled}\n {...props}\n />\n <label className=\"au-radio-field__label\" htmlFor={safeId}>\n {label}\n </label>\n </div>\n )\n}\n"],"names":["id"],"mappings":";;;AAKO,MAAM,aAAa,CAAC;AAAA,EACzB,OAAO;AAAA,EACP,YAAY;AAAA,EACZ;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAuB;AACf,QAAA,eAAe,WAAW,kBAAkB;AAAA,IAChD,kCAAkC,cAAc;AAAA,IAChD,mCAAmC,cAAc;AAAA,IACjD,4BAA4B,CAAC,CAAC;AAAA,IAC9B,yBAAyB,CAAC,CAAC;AAAA,EAAA,CAC5B;AAEK,QAAA,YAAY,CAACA,QAA8B;AAC/C,WAAOA,MAAKA,MAAK,YAAY,KAAK,OAAQ,CAAA;AAAA,EAAA;AAE5C,QAAM,CAAC,MAAM,IAAI,SAAS,UAAU,EAAE,CAAC;AAGrC,SAAA,qBAAC,OAAI,EAAA,WAAW,cACd,UAAA;AAAA,IAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAU;AAAA,QACV;AAAA,QACA,IAAI;AAAA,QACJ;AAAA,QACC,GAAG;AAAA,MAAA;AAAA,IACN;AAAA,wBACC,SAAM,EAAA,WAAU,yBAAwB,SAAS,QAC/C,UACH,OAAA;AAAA,EACF,EAAA,CAAA;AAEJ;"}
|
|
@@ -46,7 +46,7 @@ import './styles.css';const RadioGroup = ({
|
|
|
46
46
|
Conditional,
|
|
47
47
|
{
|
|
48
48
|
condition: !!label,
|
|
49
|
-
renderIf: /* @__PURE__ */ jsxs(Text, { variant: "body-
|
|
49
|
+
renderIf: /* @__PURE__ */ jsxs(Text, { variant: "body-small", weight: "semibold", color: "secondary", children: [
|
|
50
50
|
label,
|
|
51
51
|
" ",
|
|
52
52
|
!!required && /* @__PURE__ */ jsx("span", { className: "au-radio-group__label--required", children: "*" })
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.es.js","sources":["../../../lib/components/form/Radio/Group/index.tsx"],"sourcesContent":["import classNames from 'classnames'\nimport './styles.scss'\nimport Field from '@components/form/Field'\nimport { Conditional } from '@components/misc'\nimport { Text } from '@components/Text'\nimport React, { useState } from 'react'\nimport { RadioField } from '../Field'\nimport { RadioFieldProps, RadioGroupProps } from '../types'\n\nexport const RadioGroup = ({\n name = '',\n defaultValue,\n orientation = 'vertical',\n label,\n error,\n errorMessage,\n required = false,\n children,\n onChange,\n onFocus,\n}: RadioGroupProps) => {\n const groupClass = classNames('au-radio-group', {\n 'au-radio-group--horizontal': orientation === 'horizontal',\n })\n\n const getSafeName = (name: string): string => {\n return name ? name : `au-radio-group-${Math.random()}`\n }\n
|
|
1
|
+
{"version":3,"file":"index.es.js","sources":["../../../lib/components/form/Radio/Group/index.tsx"],"sourcesContent":["import classNames from 'classnames'\nimport './styles.scss'\nimport Field from '@components/form/Field'\nimport { Conditional } from '@components/misc'\nimport { Text } from '@components/Text'\nimport React, { useState } from 'react'\nimport { RadioField } from '../Field'\nimport { RadioFieldProps, RadioGroupProps } from '../types'\n\nexport const RadioGroup = ({\n name = '',\n defaultValue,\n orientation = 'vertical',\n label,\n error,\n errorMessage,\n required = false,\n children,\n onChange,\n onFocus,\n}: RadioGroupProps) => {\n const groupClass = classNames('au-radio-group', {\n 'au-radio-group--horizontal': orientation === 'horizontal',\n })\n\n const getSafeName = (name: string): string => {\n return name ? name : `au-radio-group-${Math.random()}`\n }\n const [safeName] = useState(getSafeName(name))\n\n const childrenWithProps = React.Children.map(children, (child) => {\n if (React.isValidElement(child)) {\n const childProps = child.props as RadioFieldProps\n\n return (\n <RadioField\n name={safeName}\n error={error}\n defaultChecked={defaultValue === childProps.value}\n onChange={onChange}\n onFocus={onFocus}\n {...child.props}\n />\n )\n }\n return child\n })\n\n return (\n <div className={groupClass}>\n <Conditional\n condition={!!label}\n renderIf={\n <Text variant=\"body-small\" weight=\"semibold\" color=\"secondary\">\n {label}{' '}\n {!!required && (\n <span className=\"au-radio-group__label--required\">*</span>\n )}\n </Text>\n }\n />\n <div className=\"au-radio-group__fields\">{childrenWithProps}</div>\n <Field.ErrorMessage hasError={!!error} message={errorMessage} />\n </div>\n )\n}\n"],"names":["name","React"],"mappings":";;;;;;;AASO,MAAM,aAAa,CAAC;AAAA,EACzB,OAAO;AAAA,EACP;AAAA,EACA,cAAc;AAAA,EACd;AAAA,EACA;AAAA,EACA;AAAA,EACA,WAAW;AAAA,EACX;AAAA,EACA;AAAA,EACA;AACF,MAAuB;AACf,QAAA,aAAa,WAAW,kBAAkB;AAAA,IAC9C,8BAA8B,gBAAgB;AAAA,EAAA,CAC/C;AAEK,QAAA,cAAc,CAACA,UAAyB;AAC5C,WAAOA,QAAOA,QAAO,kBAAkB,KAAK,OAAQ,CAAA;AAAA,EAAA;AAEtD,QAAM,CAAC,QAAQ,IAAI,SAAS,YAAY,IAAI,CAAC;AAE7C,QAAM,oBAAoBC,sBAAM,SAAS,IAAI,UAAU,CAAC,UAAU;AAC5D,QAAAA,sBAAM,eAAe,KAAK,GAAG;AAC/B,YAAM,aAAa,MAAM;AAGvB,aAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,MAAM;AAAA,UACN;AAAA,UACA,gBAAgB,iBAAiB,WAAW;AAAA,UAC5C;AAAA,UACA;AAAA,UACC,GAAG,MAAM;AAAA,QAAA;AAAA,MAAA;AAAA,IAGhB;AACO,WAAA;AAAA,EAAA,CACR;AAGC,SAAA,qBAAC,OAAI,EAAA,WAAW,YACd,UAAA;AAAA,IAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAW,CAAC,CAAC;AAAA,QACb,+BACG,MAAK,EAAA,SAAQ,cAAa,QAAO,YAAW,OAAM,aAChD,UAAA;AAAA,UAAA;AAAA,UAAO;AAAA,UACP,CAAC,CAAC,gCACA,QAAK,EAAA,WAAU,mCAAkC,UAAC,KAAA;AAAA,QAAA,GAEvD;AAAA,MAAA;AAAA,IAEJ;AAAA,IACC,oBAAA,OAAA,EAAI,WAAU,0BAA0B,UAAkB,mBAAA;AAAA,IAC3D,oBAAC,MAAM,cAAN,EAAmB,UAAU,CAAC,CAAC,OAAO,SAAS,cAAc;AAAA,EAChE,EAAA,CAAA;AAEJ;"}
|
|
@@ -73,7 +73,7 @@ import './styles.css';const useSelectField = (options, initialValue, onChange, d
|
|
|
73
73
|
parentElement = parentElement.parentElement;
|
|
74
74
|
}
|
|
75
75
|
const availableSpaceBelow = window.innerHeight - bottom - totalPadding;
|
|
76
|
-
const minDropdownHeight =
|
|
76
|
+
const minDropdownHeight = 212;
|
|
77
77
|
const calculatedHeight = Math.max(availableSpaceBelow, minDropdownHeight);
|
|
78
78
|
setDropdownMaxHeight(calculatedHeight);
|
|
79
79
|
}
|
|
@@ -1 +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 disabled?: boolean,\n register?: (instance: HTMLSelectElement | null) => void,\n autocomplete: 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\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 if (\n selectRef.current &&\n !selectRef.current.contains(event.target as Node)\n ) {\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 = 150\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 setIsDropdownOpen(false)\n setSearchValue('')\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 (value === '') {\n setSelectedOption({ value: '', label: '' })\n }\n\n if (!isDropdownOpen) {\n setIsDropdownOpen(true)\n }\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 }\n}\n","import classNames from 'classnames'\nimport { IconChevronDown, IconSlash, IconCheck } from '@components/icons'\nimport Field from '../Field'\nimport { SelectFieldProps } from './types'\nimport { useSelectField } from './hook'\nimport './styles.scss'\n\nexport const SelectField = ({\n label,\n options,\n optional,\n error,\n errorMessage,\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}: 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 } = useSelectField(options, value, onChange, disabled, register, autocomplete)\n\n const dropdownClasses = 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 return (\n <Field.Root\n style={style}\n customclass={className}\n error={error}\n disabled={disabled}>\n <Field.Label\n text={label}\n optional={optional}\n required={required}\n error={error}\n disabled={disabled}\n />\n <div className={dropdownClasses}>\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={onBlur}>\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 <ul\n className={classNames('au-field__select-options', {\n 'au-field__select-options--open': isDropdownOpen,\n })}\n role=\"listbox\"\n aria-live=\"polite\"\n tabIndex={-1}\n style={{ maxHeight: `${dropdownMaxHeight}px`, overflowY: 'auto' }}>\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={classNames('au-field__select-option', {\n 'au-field__select-option--highlighted':\n activeOptionIndex === index,\n 'au-field__select-option--selected':\n option.value === selectedOption.value,\n 'au-field__select-option--disabled': option.disabled,\n })}\n ref={activeOptionIndex === index ? activeOptionRef : null}\n role=\"option\"\n aria-selected={option.value === selectedOption.value}\n aria-disabled={option.disabled}\n onClick={() => selectOption(option.value, option.disabled)}\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 <select\n hidden\n disabled={disabled}\n value={selectedOption.value}\n onChange={(e) => selectOption(e.target.value)}\n ref={selectElementRef}\n name={name}\n onBlur={onBlur}>\n {options.map((option, index) => (\n <option key={index} value={option.value}>\n {option.label}\n </option>\n ))}\n </select>\n </div>\n <Field.ErrorMessage hasError={!!error} message={errorMessage} />\n </Field.Root>\n )\n}\n"],"names":["option","_a"],"mappings":"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"}
|
|
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 disabled?: boolean,\n register?: (instance: HTMLSelectElement | null) => void,\n autocomplete: 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\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 if (\n selectRef.current &&\n !selectRef.current.contains(event.target as Node)\n ) {\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 setIsDropdownOpen(false)\n setSearchValue('')\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 (value === '') {\n setSelectedOption({ value: '', label: '' })\n }\n\n if (!isDropdownOpen) {\n setIsDropdownOpen(true)\n }\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 }\n}\n","import classNames from 'classnames'\nimport { IconChevronDown, IconSlash, IconCheck } from '@components/icons'\nimport Field from '../Field'\nimport { SelectFieldProps } from './types'\nimport { useSelectField } from './hook'\nimport './styles.scss'\n\nexport const SelectField = ({\n label,\n options,\n optional,\n error,\n errorMessage,\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}: 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 } = useSelectField(options, value, onChange, disabled, register, autocomplete)\n\n const dropdownClasses = 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 return (\n <Field.Root\n style={style}\n customclass={className}\n error={error}\n disabled={disabled}>\n <Field.Label\n text={label}\n optional={optional}\n required={required}\n error={error}\n disabled={disabled}\n />\n <div className={dropdownClasses}>\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={onBlur}>\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 <ul\n className={classNames('au-field__select-options', {\n 'au-field__select-options--open': isDropdownOpen,\n })}\n role=\"listbox\"\n aria-live=\"polite\"\n tabIndex={-1}\n style={{ maxHeight: `${dropdownMaxHeight}px`, overflowY: 'auto' }}>\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={classNames('au-field__select-option', {\n 'au-field__select-option--highlighted':\n activeOptionIndex === index,\n 'au-field__select-option--selected':\n option.value === selectedOption.value,\n 'au-field__select-option--disabled': option.disabled,\n })}\n ref={activeOptionIndex === index ? activeOptionRef : null}\n role=\"option\"\n aria-selected={option.value === selectedOption.value}\n aria-disabled={option.disabled}\n onClick={() => selectOption(option.value, option.disabled)}\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 <select\n hidden\n disabled={disabled}\n value={selectedOption.value}\n onChange={(e) => selectOption(e.target.value)}\n ref={selectElementRef}\n name={name}\n onBlur={onBlur}>\n {options.map((option, index) => (\n <option key={index} value={option.value}>\n {option.label}\n </option>\n ))}\n </select>\n </div>\n <Field.ErrorMessage hasError={!!error} message={errorMessage} />\n </Field.Root>\n )\n}\n"],"names":["option","_a"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.au-field__select{position:relative}.au-field__select-wrapper{display:flex;align-items:center;justify-content:space-between;width:100%;height:56px;background-color:#fff;border:1px solid #454a54;border-radius:8px;box-sizing:border-box;font-size:16px;line-height:22px;overflow:hidden}.au-field__select-wrapper:focus-within{border:2px solid #0048db}.au-field__select-input{width:100%;height:100%;border:none;padding:16px;font-family:inherit;font-size:16px;line-height:22px}.au-field__select-input:read-only{cursor:pointer}.au-field__select-icon{position:absolute;right:16px;transition:transform .2s ease}.au-field__select-options{display:flex;flex-direction:column;width:100%;margin-top:16px;padding-inline-start:0;box-sizing:border-box;border:1px solid #0048db;background:#fff;border-radius:8px;overflow:hidden;cursor:auto;position:absolute;transform-origin:top left;transform:scaleY(0);opacity:0;visibility:hidden;transition:transform .2s,opacity .2s,visibility 0s .2s;z-index:1}.au-field__select-options--open{transform:scaleY(1);opacity:1;visibility:visible;transition:transform .2s,opacity .2s}.au-field__select-option{display:flex;justify-content:space-between;padding:16px 24px;cursor:pointer}.au-field__select-option:not(.au-field__select-option--selected):hover,.au-field__select-option--highlighted:not(.au-field__select-option--selected){background-color:#f6f7fa;color:#16181d}.au-field__select-option--selected{background-color:#0048db;color:#fff;font-weight:700}.au-field__select-option--selected .au-icon>svg{color:#fff}.au-field__select-option--disabled{pointer-events:none;cursor:not-allowed;background-color:#e2e4e9;color:#5e6573}.au-field__select-option--disabled .au-icon>svg{color:#5e6573}.au-field__select-option--empty{cursor:default;background-color:#e2e4e9;color:#5e6573}.au-field__select-option--empty:hover{background-color:#e2e4e9}.au-field__select--open .au-field__select-wrapper{border:2px solid #0048db}.au-field__select--open .au-field__select-wrapper .au-field__select-icon{transform:rotate(180deg)}.au-field__select--disabled{pointer-events:none;cursor:not-allowed}.au-field__select--disabled .au-field__select-wrapper{background-color:#e2e4e9}.au-field__select--disabled .au-field__select-wrapper .au-icon>svg{color:#5e6573}.au-field__select--error .au-field__select-wrapper{background-color:#f5eff0;border-color:#991717}.au-field__select--error .au-field__select-wrapper:focus{border-color:#0048db}.au-field:not(.au-field--error):has(.au-field__select--open) .au-field__header-label{color:#0048db}.au-field:not(.au-field--error):has(.au-field__select--open) .au-field__select-wrapper,.au-field:not(.au-field--error):has(.au-field__select--open) .au-field__select-wrapper:focus-within{border-width:1px}
|
|
1
|
+
.au-field__select{position:relative}.au-field__select-wrapper{display:flex;align-items:center;justify-content:space-between;width:100%;height:56px;background-color:#fff;border:1px solid #454a54;border-radius:8px;box-sizing:border-box;font-size:16px;line-height:22px;overflow:hidden}.au-field__select-wrapper:focus-within{border:2px solid #0048db}.au-field__select-input{width:100%;height:100%;border:none;padding:16px;font-family:inherit;font-size:16px;line-height:22px}.au-field__select-input:read-only{cursor:pointer}.au-field__select-icon{position:absolute;right:16px;transition:transform .2s ease}.au-field__select-options{display:flex;flex-direction:column;width:100%;max-height:212px;margin-top:16px;padding-inline-start:0;box-sizing:border-box;border:1px solid #0048db;background:#fff;border-radius:8px;overflow:hidden;cursor:auto;position:absolute;transform-origin:top left;transform:scaleY(0);opacity:0;visibility:hidden;transition:transform .2s,opacity .2s,visibility 0s .2s;z-index:1}.au-field__select-options--open{transform:scaleY(1);opacity:1;visibility:visible;transition:transform .2s,opacity .2s}.au-field__select-option{display:flex;justify-content:space-between;padding:16px 24px;cursor:pointer}.au-field__select-option:not(.au-field__select-option--selected):hover,.au-field__select-option--highlighted:not(.au-field__select-option--selected){background-color:#f6f7fa;color:#16181d}.au-field__select-option--selected{background-color:#0048db;color:#fff;font-weight:700}.au-field__select-option--selected .au-icon>svg{color:#fff}.au-field__select-option--disabled{pointer-events:none;cursor:not-allowed;background-color:#e2e4e9;color:#5e6573}.au-field__select-option--disabled .au-icon>svg{color:#5e6573}.au-field__select-option--empty{cursor:default;background-color:#e2e4e9;color:#5e6573}.au-field__select-option--empty:hover{background-color:#e2e4e9}.au-field__select--open .au-field__select-wrapper{border:2px solid #0048db}.au-field__select--open .au-field__select-wrapper .au-field__select-icon{transform:rotate(180deg)}.au-field__select--disabled{pointer-events:none;cursor:not-allowed}.au-field__select--disabled .au-field__select-wrapper{background-color:#e2e4e9}.au-field__select--disabled .au-field__select-wrapper .au-icon>svg{color:#5e6573}.au-field__select--error .au-field__select-wrapper{background-color:#f5eff0;border-color:#991717}.au-field__select--error .au-field__select-wrapper:focus{border-color:#0048db}.au-field:not(.au-field--error):has(.au-field__select--open) .au-field__header-label{color:#0048db}.au-field:not(.au-field--error):has(.au-field__select--open) .au-field__select-wrapper,.au-field:not(.au-field--error):has(.au-field__select--open) .au-field__select-wrapper:focus-within{border-width:1px}
|