maquinaweb-ui 2.33.0 → 2.34.1
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/container-animation.d.ts +2 -2
- package/dist/input-suggest.d.ts +6 -2
- package/dist/input-suggest.d.ts.map +1 -1
- package/dist/input-suggest.js +30 -11
- package/dist/input-suggest.js.map +1 -1
- package/dist/text-field.d.ts +5 -5
- package/dist/text-field.js +1 -1
- package/dist/text-field.js.map +1 -1
- package/dist/toggle-field.d.ts +2 -2
- package/package.json +1 -1
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { ComponentProps, ElementType } from "react";
|
|
2
|
-
import * as
|
|
2
|
+
import * as react_jsx_runtime4 from "react/jsx-runtime";
|
|
3
3
|
|
|
4
4
|
//#region src/components/container-animation/container-animation.d.ts
|
|
5
5
|
type ContainerAnimationProps<T extends ElementType = 'div'> = ComponentProps<'div'> & ComponentProps<T> & {
|
|
@@ -23,7 +23,7 @@ declare const ContainerAnimation: <T extends ElementType = "div">({
|
|
|
23
23
|
distance,
|
|
24
24
|
hideNotInView,
|
|
25
25
|
...props
|
|
26
|
-
}: ContainerAnimationProps<T>) =>
|
|
26
|
+
}: ContainerAnimationProps<T>) => react_jsx_runtime4.JSX.Element;
|
|
27
27
|
//#endregion
|
|
28
28
|
export { ContainerAnimation, type ContainerAnimationProps };
|
|
29
29
|
//# sourceMappingURL=container-animation.d.ts.map
|
package/dist/input-suggest.d.ts
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { Mask, Options } from "./with-mask-DnMiJlek.js";
|
|
2
2
|
import { FieldPath, FieldValues, UseControllerProps } from "react-hook-form";
|
|
3
3
|
import { Dispatch, SetStateAction } from "react";
|
|
4
|
-
import * as
|
|
4
|
+
import * as react_jsx_runtime5 from "react/jsx-runtime";
|
|
5
5
|
import { PopoverProps } from "@radix-ui/react-popover";
|
|
6
6
|
|
|
7
7
|
//#region src/components/input-suggest/input-suggest.d.ts
|
|
@@ -37,6 +37,8 @@ interface InputSuggestProps<TFieldValues extends FieldValues = FieldValues, TFie
|
|
|
37
37
|
maskOptions?: Options;
|
|
38
38
|
initialParams?: Object;
|
|
39
39
|
onClear?: () => void;
|
|
40
|
+
debounceTime?: number;
|
|
41
|
+
maxWait?: number;
|
|
40
42
|
}
|
|
41
43
|
declare function InputSuggest<TFieldValues extends FieldValues = FieldValues, TFieldName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({
|
|
42
44
|
name,
|
|
@@ -66,8 +68,10 @@ declare function InputSuggest<TFieldValues extends FieldValues = FieldValues, TF
|
|
|
66
68
|
children,
|
|
67
69
|
onClear,
|
|
68
70
|
initialParams,
|
|
71
|
+
debounceTime,
|
|
72
|
+
maxWait,
|
|
69
73
|
...props
|
|
70
|
-
}: InputSuggestProps<TFieldValues, TFieldName> & PopoverProps):
|
|
74
|
+
}: InputSuggestProps<TFieldValues, TFieldName> & PopoverProps): react_jsx_runtime5.JSX.Element;
|
|
71
75
|
//#endregion
|
|
72
76
|
export { InputSuggest, type InputSuggestProps };
|
|
73
77
|
//# sourceMappingURL=input-suggest.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"input-suggest.d.ts","names":[],"sources":["../src/components/input-suggest/input-suggest.tsx"],"sourcesContent":[],"mappings":";;;;;;;
|
|
1
|
+
{"version":3,"file":"input-suggest.d.ts","names":[],"sources":["../src/components/input-suggest/input-suggest.tsx"],"sourcesContent":[],"mappings":";;;;;;;UAmCiB,uCACM,cAAc,gCAChB,UAAU,gBAAgB,UAAU,uBAC/C,mBAAmB,cAAc;;;EAH1B,QAAA,CAAA,EAAA,CAAA,MAAA,EAAiB,MAAA,EAAA,GAAA,IAAA;EAAA,QAAA,CAAA,EAOrB,QAPqB,CAOZ,cAPY,CAAA,MAAA,CAAA,CAAA;OACX,CAAA,EAAA,MAAA;aAAc,CAAA,EAAA,MAAA;WACN,CAAA,EAAA,MAAA;SAAV,EAAA,CAAA,MAAA,CAAA,EAAA,MAAA,EAAA,aAAA,CAAA,EAWD,MAXC,EAAA,GAAA;IAAoC,IAAA,CAAA,EAAA;MAAV,EAAA,EAAA,MAAA,GAAA,MAAA;MAClB,CAAA,GAAA,EAAA,MAAA,CAAA,EAAA,GAAA;IAAc,CAAA,EAAA;IAIrB,OAAA,CAAA,EAAA,GAAA;;UAMF,CAAA,EAAA,OAAA;OAqBX,CAAA,EAAA,MAAA;oBACO,CAAA,EAAA,OAAA;cACE,CAAA,EAAA,GAAA,GAAA,IAAA;YAjCR,CAAA,EAAA,OAAA;EAAkB,OAAA,CAAA,EAAA,MAAA;EAuCnB,IAAA,CAAA,EAAA,MAAA;EAAY,UAAA,EAAA,MAAA;QACE,CAAA,EAAA,MAAA;aAAc,CAAA,EAAA,CAAA,KAAA,EAAA,GAAA,EAAA,GAAA,GAAA;eACN,CAAA,EAAA,CAAA,OAAA,EAAA,GAAA,EAAA,GAAA,GAAA;OAAV,CAAA,EAAA,MAAA;YAAoC,CAAA,EAAA,MAAA;MAAV,CAAA,EAVtC,IAUsC;aAE7C,CAAA,EAXc,OAWd;eACA,CAAA,EAXgB,MAWhB;SACA,CAAA,EAAA,GAAA,GAAA,IAAA;cACA,CAAA,EAAA,MAAA;SACA,CAAA,EAAA,MAAA;;iBARO,YAUP,CAAA,qBATqB,WASrB,GATmC,WASnC,EAAA,mBARmB,SAQnB,CAR6B,YAQ7B,CAAA,GAR6C,SAQ7C,CARuD,YAQvD,CAAA,CAAA,CAAA;EAAA,IAAA;EAAA,UAAA;EAAA,QAAA;EAAA,UAAA;EAAA,KAAA;EAAA,SAAA;EAAA,WAAA;EAAA,OAAA;EAAA,QAAA;EAAA,QAAA;EAAA,QAAA;EAAA,kBAAA;EAAA,KAAA;EAAA,KAAA;EAAA,YAAA;EAAA,UAAA;EAAA,OAAA;EAAA,IAAA;EAAA,MAAA;EAAA,WAAA;EAAA,aAAA;EAAA,KAAA;EAAA,IAAA;EAAA,WAAA;EAAA,QAAA;EAAA,OAAA;EAAA,aAAA;EAAA,YAAA;EAAA,OAAA;EAAA,GAAA;AAAA,CAAA,EAwBC,iBAxBD,CAwBmB,YAxBnB,EAwBiC,UAxBjC,CAAA,GAwB+C,YAxB/C,CAAA,EAwB2D,kBAAA,CAAA,GAAA,CAAA,OAxB3D"}
|
package/dist/input-suggest.js
CHANGED
|
@@ -10,10 +10,11 @@ import { useController, useFormContext } from "react-hook-form";
|
|
|
10
10
|
import { useCallback, useEffect, useState } from "react";
|
|
11
11
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
12
12
|
import { Check } from "lucide-react";
|
|
13
|
+
import { useDebounce } from "use-debounce";
|
|
13
14
|
import { ScrollArea, ScrollAreaViewport } from "@radix-ui/react-scroll-area";
|
|
14
15
|
|
|
15
16
|
//#region src/components/input-suggest/input-suggest.tsx
|
|
16
|
-
function InputSuggest({ name, nameSearch, onSearch, fieldValue = "name", label, className, placeholder, useData, setValue, required, disabled, updateSearchOnBlur = true, value, extra, extraOnClick, withPortal = false, counter, help, prefix, refineValue, refineSuggest, limit = 10, mask, maskOptions, children, onClear, initialParams,...props }) {
|
|
17
|
+
function InputSuggest({ name, nameSearch, onSearch, fieldValue = "name", label, className, placeholder, useData, setValue, required, disabled, updateSearchOnBlur = true, value, extra, extraOnClick, withPortal = false, counter, help, prefix, refineValue, refineSuggest, limit = 10, mask, maskOptions, children, onClear, initialParams, debounceTime = 100, maxWait = 200,...props }) {
|
|
17
18
|
const form = useFormContext();
|
|
18
19
|
const inputName = prefix ? `${prefix}.${name}` : name;
|
|
19
20
|
const searchName = prefix ? `${prefix}.${nameSearch}` : nameSearch;
|
|
@@ -27,7 +28,8 @@ function InputSuggest({ name, nameSearch, onSearch, fieldValue = "name", label,
|
|
|
27
28
|
});
|
|
28
29
|
const [ariaSelected, setAriaSelected] = useState(-1);
|
|
29
30
|
const [open, setOpen] = useState(false);
|
|
30
|
-
const
|
|
31
|
+
const [searchDebounced] = useDebounce(searchField.value, debounceTime, { maxWait });
|
|
32
|
+
const { data } = useData?.(searchDebounced, initialParams);
|
|
31
33
|
const onChange = useCallback((item) => {
|
|
32
34
|
const searchValue = item?.[fieldValue];
|
|
33
35
|
searchField.onChange(searchValue);
|
|
@@ -41,10 +43,10 @@ function InputSuggest({ name, nameSearch, onSearch, fieldValue = "name", label,
|
|
|
41
43
|
]);
|
|
42
44
|
const handleChange = useCallback((e) => {
|
|
43
45
|
if (e.target.value === "") {
|
|
44
|
-
onClear?.();
|
|
45
46
|
searchField.onChange("");
|
|
46
|
-
onSearch?.("");
|
|
47
47
|
field.onChange(null);
|
|
48
|
+
onClear?.();
|
|
49
|
+
onSearch?.("");
|
|
48
50
|
return;
|
|
49
51
|
}
|
|
50
52
|
searchField.onChange(e.target.value);
|
|
@@ -55,16 +57,33 @@ function InputSuggest({ name, nameSearch, onSearch, fieldValue = "name", label,
|
|
|
55
57
|
onChange(item);
|
|
56
58
|
setOpen(false);
|
|
57
59
|
}
|
|
58
|
-
}, [
|
|
60
|
+
}, [
|
|
61
|
+
field,
|
|
62
|
+
searchField,
|
|
63
|
+
onClear,
|
|
64
|
+
onSearch
|
|
65
|
+
]);
|
|
59
66
|
const handleKeyDown = useCallback((e) => {
|
|
60
|
-
if (e.key === "ArrowDown")
|
|
61
|
-
|
|
62
|
-
if (e.key === "Enter" && data && data[ariaSelected]) {
|
|
63
|
-
onChange(data[ariaSelected]);
|
|
67
|
+
if (e.key === "ArrowDown") {
|
|
68
|
+
e.preventDefault();
|
|
64
69
|
e.stopPropagation();
|
|
70
|
+
ariaSelected < (data?.length ?? 0) - 1 && setAriaSelected((prev) => prev + 1);
|
|
71
|
+
}
|
|
72
|
+
if (e.key === "ArrowUp") {
|
|
65
73
|
e.preventDefault();
|
|
74
|
+
e.stopPropagation();
|
|
75
|
+
ariaSelected > 0 && setAriaSelected((prev) => prev - 1);
|
|
66
76
|
}
|
|
67
|
-
|
|
77
|
+
if (e.key === "Enter" && data && data[ariaSelected]) {
|
|
78
|
+
e.preventDefault();
|
|
79
|
+
e.stopPropagation();
|
|
80
|
+
onChange(data[ariaSelected]);
|
|
81
|
+
}
|
|
82
|
+
}, [
|
|
83
|
+
data,
|
|
84
|
+
ariaSelected,
|
|
85
|
+
onChange
|
|
86
|
+
]);
|
|
68
87
|
useEffect(() => {
|
|
69
88
|
const searchValue = field?.value?.[fieldValue];
|
|
70
89
|
if (searchValue !== searchField.value && updateSearchOnBlur) {
|
|
@@ -103,7 +122,7 @@ function InputSuggest({ name, nameSearch, onSearch, fieldValue = "name", label,
|
|
|
103
122
|
className: cn(fieldState.error && "border-destructive"),
|
|
104
123
|
disabled,
|
|
105
124
|
name,
|
|
106
|
-
|
|
125
|
+
onInput: handleChange,
|
|
107
126
|
onKeyDown: handleKeyDown,
|
|
108
127
|
placeholder,
|
|
109
128
|
ref: mask ? withMask(mask, {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"input-suggest.js","names":["item"],"sources":["../src/components/input-suggest/input-suggest.tsx"],"sourcesContent":["'use client';\n\nimport {\n Dispatch,\n SetStateAction,\n useCallback,\n useEffect,\n useState,\n} from 'react';\n\nimport {\n FieldPath,\n FieldValues,\n UseControllerProps,\n useController,\n useFormContext,\n} from 'react-hook-form';\nimport withMask, {\n type Mask,\n type Options as MaskOptions,\n} from '@/hooks/with-mask';\n\nimport type { PopoverProps } from '@radix-ui/react-popover';\nimport { ScrollArea, ScrollAreaViewport } from '@radix-ui/react-scroll-area';\nimport { Input } from '@/components/ui/input';\nimport { FormItem, FormLabel, FormMessage } from '@/ui/form';\nimport { InputHelp } from '@/ui/input-help';\nimport { Popover, PopoverContent, PopoverTrigger } from '@/ui/popover';\nimport { ScrollBar } from '../ui/scroll-area';\n\nimport { Check } from 'lucide-react';\n\nimport { cn } from '@/lib/utils';\n\nexport interface InputSuggestProps<\n TFieldValues extends FieldValues = FieldValues,\n TFieldName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,\n> extends UseControllerProps<TFieldValues, TFieldName> {\n label: string;\n search?: string;\n onSearch?: (search: string) => void;\n setValue?: Dispatch<SetStateAction<string>>;\n value?: string;\n placeholder?: string;\n className?: string;\n useData: (\n search?: string,\n initialParams?: Object\n ) => {\n data?: {\n id: string | number;\n [key: string]: any;\n }[];\n refresh?: any;\n };\n required?: boolean;\n extra?: string;\n updateSearchOnBlur?: boolean;\n extraOnClick?: () => void;\n withPortal?: boolean;\n counter?: number;\n help?: string;\n nameSearch: string;\n prefix?: string;\n refineValue?: (value: any) => any;\n refineSuggest?: (suggest: any) => any;\n limit?: number;\n fieldValue?: string;\n mask?: Mask;\n maskOptions?: MaskOptions;\n initialParams?: Object;\n onClear?: () => void;\n}\n\nfunction InputSuggest<\n TFieldValues extends FieldValues = FieldValues,\n TFieldName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,\n>({\n name,\n nameSearch,\n onSearch,\n fieldValue = 'name',\n label,\n className,\n placeholder,\n useData,\n setValue,\n required,\n disabled,\n updateSearchOnBlur = true,\n value,\n extra,\n extraOnClick,\n withPortal = false,\n counter,\n help,\n prefix,\n refineValue,\n refineSuggest,\n limit = 10,\n mask,\n maskOptions,\n children,\n onClear,\n initialParams,\n ...props\n}: InputSuggestProps<TFieldValues, TFieldName> & PopoverProps) {\n const form = useFormContext();\n const inputName = prefix ? `${prefix}.${name}` : name;\n const searchName = prefix ? `${prefix}.${nameSearch}` : nameSearch;\n\n const { field: searchField } = useController({\n name: searchName,\n control: form.control,\n });\n const { field, fieldState } = useController({\n name: inputName,\n control: form.control,\n });\n\n const [ariaSelected, setAriaSelected] = useState(-1);\n\n const [open, setOpen] = useState(false);\n\n const { data } = useData?.(searchField.value, initialParams);\n\n const onChange = useCallback(\n (item: any) => {\n const searchValue = item?.[fieldValue as keyof typeof item];\n searchField.onChange(searchValue);\n onSearch?.(searchValue);\n field.onChange(refineValue?.(item) || item);\n setOpen(false);\n },\n [field.value, refineValue, fieldValue]\n );\n\n const handleChange = useCallback(\n (e: React.ChangeEvent<HTMLInputElement>) => {\n if (e.target.value === '') {\n onClear?.();\n searchField.onChange('');\n onSearch?.('');\n field.onChange(null);\n return;\n }\n searchField.onChange(e.target.value);\n onSearch?.(e.target.value);\n setOpen(true);\n const item = data?.find((item) => item[fieldValue] === e.target.value);\n if (item) {\n onChange(item);\n setOpen(false);\n }\n },\n [field, searchField]\n );\n\n const handleKeyDown = useCallback(\n (e: React.KeyboardEvent<HTMLInputElement>) => {\n if (e.key === 'ArrowDown') {\n setAriaSelected((prev) => prev + 1);\n }\n if (e.key === 'ArrowUp') {\n setAriaSelected((prev) => prev - 1);\n }\n if (e.key === 'Enter' && data && data[ariaSelected]) {\n onChange(data[ariaSelected]);\n e.stopPropagation();\n e.preventDefault();\n }\n },\n []\n );\n\n useEffect(() => {\n const searchValue = field?.value?.[fieldValue as keyof typeof field.value];\n if (searchValue !== searchField.value && updateSearchOnBlur) {\n searchField.onChange(searchValue);\n onSearch?.(searchValue);\n }\n }, [field.value]);\n\n return (\n <FormItem\n className={cn('w-full flex flex-col', className)}\n id={`input-suggest-${inputName}`}\n >\n <div className=\"flex items-end gap-1.5\">\n <FormLabel htmlFor={inputName}>\n {label}:\n {required && (\n <span className=\"text-red-500 text-lg leading-[1px]\">*</span>\n )}\n </FormLabel>\n\n <InputHelp help={help} name={inputName} />\n </div>\n <Popover onOpenChange={setOpen} open={open} {...props}>\n <PopoverTrigger className=\"outline-hidden w-full relative\">\n <Input\n autoComplete=\"off\"\n className={cn(fieldState.error && 'border-destructive')}\n disabled={disabled}\n name={name}\n onChange={handleChange}\n onKeyDown={handleKeyDown}\n placeholder={placeholder}\n ref={\n mask\n ? withMask(mask, { autoUnmask: true, ...maskOptions })\n : (undefined as any)\n }\n value={searchField.value}\n />\n {children}\n </PopoverTrigger>\n {fieldState.error && <FormMessage />}\n <PopoverContent\n className={cn(\n 'mt-1 w-(--radix-popover-trigger-width) max-w-2xl p-0 z-50',\n data?.length === 0 && 'hidden'\n )}\n onOpenAutoFocus={(e) => e.preventDefault()}\n >\n <ScrollArea className=\"h-fit max-h-[300px]\" id=\"scroll\">\n <ScrollAreaViewport className=\"w-full h-fit max-h-[300px]\">\n <ul className=\"p-1\">\n {data?.slice(0, limit)?.map((item) => (\n <li\n aria-selected={data[ariaSelected]?.id === item.id}\n className={cn(\n 'relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-hidden aria-selected:bg-accent/50 aria-selected:text-accent-foreground data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 transition-all hover:bg-accent/50 hover:text-accent-foreground',\n field?.value?.id === item.id &&\n 'bg-accent! text-accent-foreground'\n )}\n key={item.id}\n onMouseDown={(e) => {\n onChange(item);\n e.preventDefault();\n }}\n >\n <span className=\"line-clamp-1 flex-1\">\n {refineSuggest\n ? refineSuggest(item)\n : item?.[fieldValue as keyof typeof item]}\n </span>\n {field?.value?.id == item.id && (\n <Check className=\"ml-auto h-4 w-4 shrink-0\" />\n )}\n </li>\n ))}\n\n {extra && (\n <li\n className={cn(\n 'flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-hidden aria-selected:bg-accent/50 aria-selected:text-accent-foreground data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 transition-all hover:text-accent-foreground sticky bottom-0.5 bg-white hover:bg-accent'\n )}\n onMouseDown={(e) => {\n e.preventDefault();\n extraOnClick?.();\n }}\n >\n <span className=\"line-clamp-1\">{extra}</span>\n </li>\n )}\n\n {(data?.length === 0 || !data) && !extra && (\n <p className=\"text-sm text-center text-accent-foreground/50 py-2\">\n Nenhum resultado encontrado.\n </p>\n )}\n </ul>\n </ScrollAreaViewport>\n <ScrollBar />\n </ScrollArea>\n </PopoverContent>\n </Popover>\n </FormItem>\n );\n}\n\nexport { InputSuggest };\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"input-suggest.js","names":["item"],"sources":["../src/components/input-suggest/input-suggest.tsx"],"sourcesContent":["'use client';\n\nimport {\n Dispatch,\n SetStateAction,\n useCallback,\n useEffect,\n useState,\n} from 'react';\n\nimport {\n FieldPath,\n FieldValues,\n UseControllerProps,\n useController,\n useFormContext,\n} from 'react-hook-form';\nimport { useDebounce } from 'use-debounce';\nimport withMask, {\n type Mask,\n type Options as MaskOptions,\n} from '@/hooks/with-mask';\n\nimport type { PopoverProps } from '@radix-ui/react-popover';\nimport { ScrollArea, ScrollAreaViewport } from '@radix-ui/react-scroll-area';\nimport { Input } from '@/components/ui/input';\nimport { FormItem, FormLabel, FormMessage } from '@/ui/form';\nimport { InputHelp } from '@/ui/input-help';\nimport { Popover, PopoverContent, PopoverTrigger } from '@/ui/popover';\nimport { ScrollBar } from '../ui/scroll-area';\n\nimport { Check } from 'lucide-react';\n\nimport { cn } from '@/lib/utils';\n\nexport interface InputSuggestProps<\n TFieldValues extends FieldValues = FieldValues,\n TFieldName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,\n> extends UseControllerProps<TFieldValues, TFieldName> {\n label: string;\n search?: string;\n onSearch?: (search: string) => void;\n setValue?: Dispatch<SetStateAction<string>>;\n value?: string;\n placeholder?: string;\n className?: string;\n useData: (\n search?: string,\n initialParams?: Object\n ) => {\n data?: {\n id: string | number;\n [key: string]: any;\n }[];\n refresh?: any;\n };\n required?: boolean;\n extra?: string;\n updateSearchOnBlur?: boolean;\n extraOnClick?: () => void;\n withPortal?: boolean;\n counter?: number;\n help?: string;\n nameSearch: string;\n prefix?: string;\n refineValue?: (value: any) => any;\n refineSuggest?: (suggest: any) => any;\n limit?: number;\n fieldValue?: string;\n mask?: Mask;\n maskOptions?: MaskOptions;\n initialParams?: Object;\n onClear?: () => void;\n debounceTime?: number;\n maxWait?: number;\n}\n\nfunction InputSuggest<\n TFieldValues extends FieldValues = FieldValues,\n TFieldName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,\n>({\n name,\n nameSearch,\n onSearch,\n fieldValue = 'name',\n label,\n className,\n placeholder,\n useData,\n setValue,\n required,\n disabled,\n updateSearchOnBlur = true,\n value,\n extra,\n extraOnClick,\n withPortal = false,\n counter,\n help,\n prefix,\n refineValue,\n refineSuggest,\n limit = 10,\n mask,\n maskOptions,\n children,\n onClear,\n initialParams,\n debounceTime = 100,\n maxWait = 200,\n ...props\n}: InputSuggestProps<TFieldValues, TFieldName> & PopoverProps) {\n const form = useFormContext();\n const inputName = prefix ? `${prefix}.${name}` : name;\n const searchName = prefix ? `${prefix}.${nameSearch}` : nameSearch;\n\n const { field: searchField } = useController({\n name: searchName,\n control: form.control,\n });\n const { field, fieldState } = useController({\n name: inputName,\n control: form.control,\n });\n\n const [ariaSelected, setAriaSelected] = useState(-1);\n\n const [open, setOpen] = useState(false);\n\n const [searchDebounced] = useDebounce(searchField.value, debounceTime, {\n maxWait: maxWait,\n });\n const { data } = useData?.(searchDebounced, initialParams);\n\n const onChange = useCallback(\n (item: any) => {\n const searchValue = item?.[fieldValue as keyof typeof item];\n searchField.onChange(searchValue);\n onSearch?.(searchValue);\n field.onChange(refineValue?.(item) || item);\n setOpen(false);\n },\n [field.value, refineValue, fieldValue]\n );\n\n const handleChange = useCallback(\n (e: React.ChangeEvent<HTMLInputElement>) => {\n if (e.target.value === '') {\n searchField.onChange('');\n field.onChange(null);\n onClear?.();\n onSearch?.('');\n return;\n }\n searchField.onChange(e.target.value);\n onSearch?.(e.target.value);\n setOpen(true);\n const item = data?.find((item) => item[fieldValue] === e.target.value);\n if (item) {\n onChange(item);\n setOpen(false);\n }\n },\n [field, searchField, onClear, onSearch]\n );\n\n const handleKeyDown = useCallback(\n (e: React.KeyboardEvent<HTMLInputElement>) => {\n if (e.key === 'ArrowDown') {\n e.preventDefault();\n e.stopPropagation();\n ariaSelected < (data?.length ?? 0) - 1 &&\n setAriaSelected((prev) => prev + 1);\n }\n if (e.key === 'ArrowUp') {\n e.preventDefault();\n e.stopPropagation();\n ariaSelected > 0 && setAriaSelected((prev) => prev - 1);\n }\n if (e.key === 'Enter' && data && data[ariaSelected]) {\n e.preventDefault();\n e.stopPropagation();\n onChange(data[ariaSelected]);\n }\n },\n [data, ariaSelected, onChange]\n );\n\n useEffect(() => {\n const searchValue = field?.value?.[fieldValue as keyof typeof field.value];\n if (searchValue !== searchField.value && updateSearchOnBlur) {\n searchField.onChange(searchValue);\n onSearch?.(searchValue);\n }\n }, [field.value]);\n\n return (\n <FormItem\n className={cn('w-full flex flex-col', className)}\n id={`input-suggest-${inputName}`}\n >\n <div className=\"flex items-end gap-1.5\">\n <FormLabel htmlFor={inputName}>\n {label}:\n {required && (\n <span className=\"text-red-500 text-lg leading-[1px]\">*</span>\n )}\n </FormLabel>\n\n <InputHelp help={help} name={inputName} />\n </div>\n <Popover onOpenChange={setOpen} open={open} {...props}>\n <PopoverTrigger className=\"outline-hidden w-full relative\">\n <Input\n autoComplete=\"off\"\n className={cn(fieldState.error && 'border-destructive')}\n disabled={disabled}\n name={name}\n onInput={handleChange}\n onKeyDown={handleKeyDown}\n placeholder={placeholder}\n ref={\n mask\n ? withMask(mask, { autoUnmask: true, ...maskOptions })\n : (undefined as any)\n }\n value={searchField.value}\n />\n {children}\n </PopoverTrigger>\n {fieldState.error && <FormMessage />}\n <PopoverContent\n className={cn(\n 'mt-1 w-(--radix-popover-trigger-width) max-w-2xl p-0 z-50',\n data?.length === 0 && 'hidden'\n )}\n onOpenAutoFocus={(e) => e.preventDefault()}\n >\n <ScrollArea className=\"h-fit max-h-[300px]\" id=\"scroll\">\n <ScrollAreaViewport className=\"w-full h-fit max-h-[300px]\">\n <ul className=\"p-1\">\n {data?.slice(0, limit)?.map((item) => (\n <li\n aria-selected={data[ariaSelected]?.id === item.id}\n className={cn(\n 'relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-hidden aria-selected:bg-accent/50 aria-selected:text-accent-foreground data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 transition-all hover:bg-accent/50 hover:text-accent-foreground',\n field?.value?.id === item.id &&\n 'bg-accent! text-accent-foreground'\n )}\n key={item.id}\n onMouseDown={(e) => {\n onChange(item);\n e.preventDefault();\n }}\n >\n <span className=\"line-clamp-1 flex-1\">\n {refineSuggest\n ? refineSuggest(item)\n : item?.[fieldValue as keyof typeof item]}\n </span>\n {field?.value?.id == item.id && (\n <Check className=\"ml-auto h-4 w-4 shrink-0\" />\n )}\n </li>\n ))}\n\n {extra && (\n <li\n className={cn(\n 'flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-hidden aria-selected:bg-accent/50 aria-selected:text-accent-foreground data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 transition-all hover:text-accent-foreground sticky bottom-0.5 bg-white hover:bg-accent'\n )}\n onMouseDown={(e) => {\n e.preventDefault();\n extraOnClick?.();\n }}\n >\n <span className=\"line-clamp-1\">{extra}</span>\n </li>\n )}\n\n {(data?.length === 0 || !data) && !extra && (\n <p className=\"text-sm text-center text-accent-foreground/50 py-2\">\n Nenhum resultado encontrado.\n </p>\n )}\n </ul>\n </ScrollAreaViewport>\n <ScrollBar />\n </ScrollArea>\n </PopoverContent>\n </Popover>\n </FormItem>\n );\n}\n\nexport { InputSuggest };\n"],"mappings":"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"}
|
package/dist/text-field.d.ts
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { Options as Options$1 } from "./with-mask-DnMiJlek.js";
|
|
2
2
|
import { FieldPath, FieldPathValue, FieldValues, UseControllerProps } from "react-hook-form";
|
|
3
|
-
import * as
|
|
3
|
+
import * as react_jsx_runtime0 from "react/jsx-runtime";
|
|
4
4
|
import { Options } from "nuqs";
|
|
5
5
|
|
|
6
6
|
//#region src/components/text-field/TextField.d.ts
|
|
@@ -57,7 +57,7 @@ declare function InputText({
|
|
|
57
57
|
name,
|
|
58
58
|
onChange,
|
|
59
59
|
...props
|
|
60
|
-
}: InputTextProps):
|
|
60
|
+
}: InputTextProps): react_jsx_runtime0.JSX.Element;
|
|
61
61
|
interface TextFieldProps<TFieldValues extends FieldValues = FieldValues, TFieldName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> extends UseControllerProps<TFieldValues, TFieldName> {
|
|
62
62
|
disabled?: boolean;
|
|
63
63
|
required?: boolean;
|
|
@@ -75,7 +75,7 @@ declare function TextField<TFieldValues extends FieldValues = FieldValues, TFiel
|
|
|
75
75
|
transform,
|
|
76
76
|
prefix,
|
|
77
77
|
...props
|
|
78
|
-
}: TextFieldProps<TFieldValues, TFieldName> & Omit<InputTextProps, 'onChange'>):
|
|
78
|
+
}: TextFieldProps<TFieldValues, TFieldName> & Omit<InputTextProps, 'onChange'>): react_jsx_runtime0.JSX.Element;
|
|
79
79
|
interface QueryTextFieldProps extends Omit<InputTextProps, 'onChange'> {
|
|
80
80
|
name: string;
|
|
81
81
|
defaultValue?: string;
|
|
@@ -87,7 +87,7 @@ declare function QueryTextField({
|
|
|
87
87
|
defaultValue,
|
|
88
88
|
options,
|
|
89
89
|
...props
|
|
90
|
-
}: QueryTextFieldProps):
|
|
90
|
+
}: QueryTextFieldProps): react_jsx_runtime0.JSX.Element;
|
|
91
91
|
interface CookieTextFieldProps extends InputTextProps {
|
|
92
92
|
name: string;
|
|
93
93
|
maxAge?: number;
|
|
@@ -97,7 +97,7 @@ declare function CookieTextField({
|
|
|
97
97
|
maxAge,
|
|
98
98
|
onChange,
|
|
99
99
|
...inputProps
|
|
100
|
-
}: CookieTextFieldProps):
|
|
100
|
+
}: CookieTextFieldProps): react_jsx_runtime0.JSX.Element;
|
|
101
101
|
//#endregion
|
|
102
102
|
export { CookieTextField, type CookieTextFieldProps, InputText, type InputTextProps, QueryTextField, type QueryTextFieldProps, TextField, type TextFieldProps };
|
|
103
103
|
//# sourceMappingURL=text-field.d.ts.map
|
package/dist/text-field.js
CHANGED
|
@@ -106,7 +106,7 @@ function InputText({ label, description, placeholder, className, children, disab
|
|
|
106
106
|
className: cn(error && "border-destructive", inputClassName),
|
|
107
107
|
disabled,
|
|
108
108
|
id,
|
|
109
|
-
|
|
109
|
+
onInput: handleInputChange,
|
|
110
110
|
placeholder,
|
|
111
111
|
ref: maskRef || (mask ? withMask(mask, {
|
|
112
112
|
autoUnmask: true,
|
package/dist/text-field.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"text-field.js","names":["defaultConfig: Intl.NumberFormatOptions","useMoneyInput","value"],"sources":["../src/hooks/use-money-input.ts","../src/components/text-field/TextField.tsx"],"sourcesContent":["'use client';\n\nimport { useEffect, useState } from 'react';\n\ntype useMoneyInputProps = {\n config?: Intl.NumberFormatOptions & { prefix?: string; suffix?: string };\n value?: number;\n onChange?: (value?: number) => void;\n};\n\nconst defaultConfig: Intl.NumberFormatOptions = {\n currency: 'BRL',\n currencyDisplay: 'symbol',\n currencySign: 'standard',\n style: 'currency',\n minimumFractionDigits: 2,\n maximumFractionDigits: 2,\n};\n\nconst useMoneyInput = ({\n config = defaultConfig,\n onChange,\n value,\n}: useMoneyInputProps) => {\n const prefix = config?.prefix || '';\n const suffix = config?.suffix || '';\n const divider = Math.pow(10, config?.maximumFractionDigits || 2);\n const moneyFormatter = Intl.NumberFormat('pt-BR', config);\n const [displayValue, setDisplayValue] = useState(() =>\n value ? `${prefix}${moneyFormatter.format(value)}${suffix}` : ''\n );\n\n const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n const digits = e.target.value.replace(/\\D/g, '');\n const realValue = digits ? Number(digits) / divider : undefined;\n const formattedValue =\n digits && realValue\n ? `${prefix}${moneyFormatter.format(realValue)}${suffix}`\n : '';\n\n setDisplayValue(formattedValue);\n onChange?.(realValue);\n };\n\n useEffect(() => {\n const formatted = value\n ? `${prefix}${moneyFormatter.format(value)}${suffix}`\n : '';\n setDisplayValue(formatted);\n }, [value]);\n\n return { displayValue, handleChange };\n};\n\nexport default useMoneyInput;\n","'use client';\n\nimport { useEffect, useId, useState } from 'react';\n\nimport {\n type FieldPath,\n type FieldPathValue,\n type FieldValues,\n type UseControllerProps,\n useController,\n useFormContext,\n} from 'react-hook-form';\nimport useMoneyInput from '@/hooks/use-money-input';\nimport withMask, { type Options as MaskOptions } from '@/hooks/with-mask';\n\nimport { FormItem } from '@/components/ui/form';\nimport { Input } from '@/components/ui/input';\nimport { InputHelp } from '@/components/ui/input-help';\nimport { Label } from '@/components/ui/label';\n\nimport { cn } from '@/lib/utils';\nimport { useCookiesNext } from 'cookies-next';\nimport { type Options, parseAsString, useQueryState } from 'nuqs';\n\ntype Mask =\n | 'datetime'\n | 'email'\n | 'numeric'\n | 'currency'\n | 'decimal'\n | 'integer'\n | 'percentage'\n | 'url'\n | 'ip'\n | 'mac'\n | 'ssn'\n | 'brl-currency'\n | 'cpf'\n | 'cnpj'\n | (string & {})\n | (string[] & {})\n | null;\n\nexport interface InputTextProps\n extends React.InputHTMLAttributes<HTMLInputElement> {\n ref?: React.ForwardedRef<HTMLInputElement>;\n label?: string;\n placeholder?: string;\n description?: string;\n className?: string;\n disabled?: boolean;\n inputType?: 'default' | 'money';\n type?: string;\n required?: boolean;\n maskRef?: React.ForwardedRef<any>;\n children?: React.ReactNode;\n mask?: Mask;\n maskOptions?: MaskOptions;\n error?: React.ReactNode;\n id?: string;\n detail?: string;\n detailClassName?: string;\n inputClassName?: string;\n help?: string;\n setError?: (error: string | undefined) => void;\n moneyConfig?: Intl.NumberFormatOptions & { prefix?: string; suffix?: string };\n}\nfunction InputText({\n label,\n description,\n placeholder,\n className,\n children,\n disabled,\n type,\n required,\n maskRef,\n mask,\n inputType = 'default',\n maskOptions,\n error,\n setError,\n id,\n ref,\n detail,\n detailClassName,\n inputClassName,\n help,\n value,\n moneyConfig,\n name,\n onChange,\n ...props\n}: InputTextProps) {\n const { displayValue, handleChange } = useMoneyInput({\n config: moneyConfig,\n onChange(value) {\n onChange?.({\n ...({} as React.ChangeEvent<HTMLInputElement>),\n target: { value: value as any },\n } as React.ChangeEvent<HTMLInputElement>);\n },\n value: Number(value),\n });\n\n const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n if (inputType === 'money') {\n const rawNumber = Number(e.target.value.replace(/\\D/g, '')) / 100;\n\n if (props.max && rawNumber >= Number(props.max)) {\n setError?.(`O valor deve ser menor que ${props.max}`);\n return;\n }\n\n if (props.min && rawNumber <= Number(props.min)) {\n setError?.(`O valor deve ser maior que ${props.min}`);\n return;\n }\n\n setError?.(undefined);\n\n handleChange?.(e);\n } else {\n onChange?.(e);\n }\n };\n\n return (\n <div\n className={cn('w-full flex flex-col gap-1', className)}\n id={`input-${name?.replace('.', '-')}`}\n ref={ref}\n >\n {(label || detail || help) && (\n <div className=\"flex items-end gap-1.5\">\n <div className={cn('flex !gap-0 flex-col', className)}>\n {label && (\n <Label\n className={cn(\n error && 'text-destructive',\n className,\n disabled && 'text-muted-foreground',\n 'inline-flex items-center flex-row gap-0.5 leading-none'\n )}\n htmlFor={id}\n >\n {label}:\n {required && (\n <span className=\"text-red-500 text-lg leading-[1px]\">*</span>\n )}\n </Label>\n )}\n {detail && (\n <Label\n className={cn(\n 'text-sm text-muted-foreground font-normal leading-none',\n detailClassName\n )}\n htmlFor={id}\n >\n {detail}\n </Label>\n )}\n </div>\n\n <InputHelp help={help} name={name} />\n </div>\n )}\n <div className=\"flex flex-col gap-1\">\n <div className=\"relative\">\n <Input\n className={cn(error && 'border-destructive', inputClassName)}\n disabled={disabled}\n id={id}\n onChange={handleInputChange}\n placeholder={placeholder}\n ref={\n maskRef ||\n ((mask\n ? withMask(mask, {\n autoUnmask: true,\n ...maskOptions,\n showMaskOnHover: false,\n showMaskOnFocus: false,\n clearMaskOnLostFocus: true,\n })\n : undefined) as any)\n }\n type={type}\n value={value && inputType === 'money' ? displayValue : value}\n {...props}\n />\n {children}\n </div>\n {description && (\n <p className={cn('text-sm text-muted-foreground', className)}>\n {description}\n </p>\n )}\n {error && (\n <p className=\"text-destructive text-xs\" data-slot=\"form-message\">\n {error}\n </p>\n )}\n </div>\n </div>\n );\n}\n\nexport interface TextFieldProps<\n TFieldValues extends FieldValues = FieldValues,\n TFieldName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,\n> extends UseControllerProps<TFieldValues, TFieldName> {\n disabled?: boolean;\n required?: boolean;\n children?: React.ReactNode;\n defaultValue?: FieldPathValue<TFieldValues, TFieldName>;\n onChange?: (value: string) => Promise<void> | void;\n transform?: (value: string) => string;\n}\n\nconst defaultTransform = (value: string) => value;\n\nfunction TextField<\n TFieldValues extends FieldValues = FieldValues,\n TFieldName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,\n>({\n name,\n className,\n required,\n defaultValue,\n onChange,\n transform = defaultTransform,\n prefix,\n ...props\n}: TextFieldProps<TFieldValues, TFieldName> &\n Omit<InputTextProps, 'onChange'>) {\n const { control, setError } = useFormContext();\n const inputName = prefix ? `${prefix}.${name}` : name;\n const id = useId();\n const { field, fieldState } = useController({\n control,\n name: inputName,\n rules: { required: required ? 'Campo obrigatório' : false },\n defaultValue,\n });\n\n return (\n <FormItem className={cn('w-full', className)}>\n <InputText\n {...field}\n {...props}\n disabled={props.disabled}\n error={fieldState?.error?.message}\n id={`${id}-${inputName.replaceAll('.', '-')}`}\n name={inputName}\n onChange={(e) => {\n field.onChange(transform(e.target.value));\n onChange?.(transform(e.target.value));\n }}\n required={required}\n setError={(error) => {\n setError(inputName, { message: error || '' });\n }}\n value={field.value || ''}\n />\n </FormItem>\n );\n}\n\nexport interface QueryTextFieldProps extends Omit<InputTextProps, 'onChange'> {\n name: string;\n defaultValue?: string;\n options?: Options;\n onChange?: (value: string) => void;\n}\n\nfunction QueryTextField({\n name,\n defaultValue,\n options,\n ...props\n}: QueryTextFieldProps) {\n const id = useId();\n const [error, setError] = useState<string | undefined>(undefined);\n const [filter, setFilter] = useQueryState(\n name,\n parseAsString\n .withOptions({\n clearOnDefault: true,\n shallow: false,\n limitUrlUpdates: {\n method: 'debounce',\n timeMs: 400,\n },\n ...options,\n })\n .withDefault(defaultValue ?? '')\n );\n\n return (\n <InputText\n id={`${id}-${name}`}\n name={name}\n value={filter}\n {...props}\n error={error}\n onChange={(e) => {\n setFilter(e.target.value);\n props.onChange?.(e.target.value);\n }}\n setError={setError}\n />\n );\n}\n\nexport interface CookieTextFieldProps extends InputTextProps {\n name: string;\n maxAge?: number;\n}\n\nfunction CookieTextField({\n name,\n maxAge = 60 * 60 * 24 * 7,\n onChange,\n ...inputProps\n}: CookieTextFieldProps) {\n const { getCookie, setCookie, deleteCookie } = useCookiesNext();\n const [error, setError] = useState<string | undefined>(undefined);\n const [value, setValue] = useState('');\n\n useEffect(() => {\n const stored = getCookie(`input-${name}`);\n if (stored && typeof stored === 'string') {\n setValue(stored);\n onChange?.(stored as any);\n }\n }, [name, getCookie]);\n\n useEffect(() => {\n if (value !== '' && value !== undefined) {\n setCookie(`input-${name}`, value, { maxAge });\n } else {\n deleteCookie(`input-${name}`);\n }\n }, [name, value, setCookie]);\n\n return (\n <InputText\n {...inputProps}\n error={error}\n id={`cookie-${name}`}\n name={name}\n onChange={(e) => {\n setValue(e.target.value);\n onChange?.(e.target.value as any);\n }}\n setError={setError}\n value={value}\n />\n );\n}\n\nexport { InputText, TextField, QueryTextField, CookieTextField };\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"text-field.js","names":["defaultConfig: Intl.NumberFormatOptions","useMoneyInput","value"],"sources":["../src/hooks/use-money-input.ts","../src/components/text-field/TextField.tsx"],"sourcesContent":["'use client';\n\nimport { useEffect, useState } from 'react';\n\ntype useMoneyInputProps = {\n config?: Intl.NumberFormatOptions & { prefix?: string; suffix?: string };\n value?: number;\n onChange?: (value?: number) => void;\n};\n\nconst defaultConfig: Intl.NumberFormatOptions = {\n currency: 'BRL',\n currencyDisplay: 'symbol',\n currencySign: 'standard',\n style: 'currency',\n minimumFractionDigits: 2,\n maximumFractionDigits: 2,\n};\n\nconst useMoneyInput = ({\n config = defaultConfig,\n onChange,\n value,\n}: useMoneyInputProps) => {\n const prefix = config?.prefix || '';\n const suffix = config?.suffix || '';\n const divider = Math.pow(10, config?.maximumFractionDigits || 2);\n const moneyFormatter = Intl.NumberFormat('pt-BR', config);\n const [displayValue, setDisplayValue] = useState(() =>\n value ? `${prefix}${moneyFormatter.format(value)}${suffix}` : ''\n );\n\n const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n const digits = e.target.value.replace(/\\D/g, '');\n const realValue = digits ? Number(digits) / divider : undefined;\n const formattedValue =\n digits && realValue\n ? `${prefix}${moneyFormatter.format(realValue)}${suffix}`\n : '';\n\n setDisplayValue(formattedValue);\n onChange?.(realValue);\n };\n\n useEffect(() => {\n const formatted = value\n ? `${prefix}${moneyFormatter.format(value)}${suffix}`\n : '';\n setDisplayValue(formatted);\n }, [value]);\n\n return { displayValue, handleChange };\n};\n\nexport default useMoneyInput;\n","'use client';\n\nimport { useEffect, useId, useState } from 'react';\n\nimport {\n type FieldPath,\n type FieldPathValue,\n type FieldValues,\n type UseControllerProps,\n useController,\n useFormContext,\n} from 'react-hook-form';\nimport useMoneyInput from '@/hooks/use-money-input';\nimport withMask, { type Options as MaskOptions } from '@/hooks/with-mask';\n\nimport { FormItem } from '@/components/ui/form';\nimport { Input } from '@/components/ui/input';\nimport { InputHelp } from '@/components/ui/input-help';\nimport { Label } from '@/components/ui/label';\n\nimport { cn } from '@/lib/utils';\nimport { useCookiesNext } from 'cookies-next';\nimport { type Options, parseAsString, useQueryState } from 'nuqs';\n\ntype Mask =\n | 'datetime'\n | 'email'\n | 'numeric'\n | 'currency'\n | 'decimal'\n | 'integer'\n | 'percentage'\n | 'url'\n | 'ip'\n | 'mac'\n | 'ssn'\n | 'brl-currency'\n | 'cpf'\n | 'cnpj'\n | (string & {})\n | (string[] & {})\n | null;\n\nexport interface InputTextProps\n extends React.InputHTMLAttributes<HTMLInputElement> {\n ref?: React.ForwardedRef<HTMLInputElement>;\n label?: string;\n placeholder?: string;\n description?: string;\n className?: string;\n disabled?: boolean;\n inputType?: 'default' | 'money';\n type?: string;\n required?: boolean;\n maskRef?: React.ForwardedRef<any>;\n children?: React.ReactNode;\n mask?: Mask;\n maskOptions?: MaskOptions;\n error?: React.ReactNode;\n id?: string;\n detail?: string;\n detailClassName?: string;\n inputClassName?: string;\n help?: string;\n setError?: (error: string | undefined) => void;\n moneyConfig?: Intl.NumberFormatOptions & { prefix?: string; suffix?: string };\n}\nfunction InputText({\n label,\n description,\n placeholder,\n className,\n children,\n disabled,\n type,\n required,\n maskRef,\n mask,\n inputType = 'default',\n maskOptions,\n error,\n setError,\n id,\n ref,\n detail,\n detailClassName,\n inputClassName,\n help,\n value,\n moneyConfig,\n name,\n onChange,\n ...props\n}: InputTextProps) {\n const { displayValue, handleChange } = useMoneyInput({\n config: moneyConfig,\n onChange(value) {\n onChange?.({\n ...({} as React.ChangeEvent<HTMLInputElement>),\n target: { value: value as any },\n } as React.ChangeEvent<HTMLInputElement>);\n },\n value: Number(value),\n });\n\n const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n if (inputType === 'money') {\n const rawNumber = Number(e.target.value.replace(/\\D/g, '')) / 100;\n\n if (props.max && rawNumber >= Number(props.max)) {\n setError?.(`O valor deve ser menor que ${props.max}`);\n return;\n }\n\n if (props.min && rawNumber <= Number(props.min)) {\n setError?.(`O valor deve ser maior que ${props.min}`);\n return;\n }\n\n setError?.(undefined);\n\n handleChange?.(e);\n } else {\n onChange?.(e);\n }\n };\n\n return (\n <div\n className={cn('w-full flex flex-col gap-1', className)}\n id={`input-${name?.replace('.', '-')}`}\n ref={ref}\n >\n {(label || detail || help) && (\n <div className=\"flex items-end gap-1.5\">\n <div className={cn('flex !gap-0 flex-col', className)}>\n {label && (\n <Label\n className={cn(\n error && 'text-destructive',\n className,\n disabled && 'text-muted-foreground',\n 'inline-flex items-center flex-row gap-0.5 leading-none'\n )}\n htmlFor={id}\n >\n {label}:\n {required && (\n <span className=\"text-red-500 text-lg leading-[1px]\">*</span>\n )}\n </Label>\n )}\n {detail && (\n <Label\n className={cn(\n 'text-sm text-muted-foreground font-normal leading-none',\n detailClassName\n )}\n htmlFor={id}\n >\n {detail}\n </Label>\n )}\n </div>\n\n <InputHelp help={help} name={name} />\n </div>\n )}\n <div className=\"flex flex-col gap-1\">\n <div className=\"relative\">\n <Input\n className={cn(error && 'border-destructive', inputClassName)}\n disabled={disabled}\n id={id}\n onInput={handleInputChange}\n placeholder={placeholder}\n ref={\n maskRef ||\n ((mask\n ? withMask(mask, {\n autoUnmask: true,\n ...maskOptions,\n showMaskOnHover: false,\n showMaskOnFocus: false,\n clearMaskOnLostFocus: true,\n })\n : undefined) as any)\n }\n type={type}\n value={value && inputType === 'money' ? displayValue : value}\n {...props}\n />\n {children}\n </div>\n {description && (\n <p className={cn('text-sm text-muted-foreground', className)}>\n {description}\n </p>\n )}\n {error && (\n <p className=\"text-destructive text-xs\" data-slot=\"form-message\">\n {error}\n </p>\n )}\n </div>\n </div>\n );\n}\n\nexport interface TextFieldProps<\n TFieldValues extends FieldValues = FieldValues,\n TFieldName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,\n> extends UseControllerProps<TFieldValues, TFieldName> {\n disabled?: boolean;\n required?: boolean;\n children?: React.ReactNode;\n defaultValue?: FieldPathValue<TFieldValues, TFieldName>;\n onChange?: (value: string) => Promise<void> | void;\n transform?: (value: string) => string;\n}\n\nconst defaultTransform = (value: string) => value;\n\nfunction TextField<\n TFieldValues extends FieldValues = FieldValues,\n TFieldName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,\n>({\n name,\n className,\n required,\n defaultValue,\n onChange,\n transform = defaultTransform,\n prefix,\n ...props\n}: TextFieldProps<TFieldValues, TFieldName> &\n Omit<InputTextProps, 'onChange'>) {\n const { control, setError } = useFormContext();\n const inputName = prefix ? `${prefix}.${name}` : name;\n const id = useId();\n const { field, fieldState } = useController({\n control,\n name: inputName,\n rules: { required: required ? 'Campo obrigatório' : false },\n defaultValue,\n });\n\n return (\n <FormItem className={cn('w-full', className)}>\n <InputText\n {...field}\n {...props}\n disabled={props.disabled}\n error={fieldState?.error?.message}\n id={`${id}-${inputName.replaceAll('.', '-')}`}\n name={inputName}\n onChange={(e) => {\n field.onChange(transform(e.target.value));\n onChange?.(transform(e.target.value));\n }}\n required={required}\n setError={(error) => {\n setError(inputName, { message: error || '' });\n }}\n value={field.value || ''}\n />\n </FormItem>\n );\n}\n\nexport interface QueryTextFieldProps extends Omit<InputTextProps, 'onChange'> {\n name: string;\n defaultValue?: string;\n options?: Options;\n onChange?: (value: string) => void;\n}\n\nfunction QueryTextField({\n name,\n defaultValue,\n options,\n ...props\n}: QueryTextFieldProps) {\n const id = useId();\n const [error, setError] = useState<string | undefined>(undefined);\n const [filter, setFilter] = useQueryState(\n name,\n parseAsString\n .withOptions({\n clearOnDefault: true,\n shallow: false,\n limitUrlUpdates: {\n method: 'debounce',\n timeMs: 400,\n },\n ...options,\n })\n .withDefault(defaultValue ?? '')\n );\n\n return (\n <InputText\n id={`${id}-${name}`}\n name={name}\n value={filter}\n {...props}\n error={error}\n onChange={(e) => {\n setFilter(e.target.value);\n props.onChange?.(e.target.value);\n }}\n setError={setError}\n />\n );\n}\n\nexport interface CookieTextFieldProps extends InputTextProps {\n name: string;\n maxAge?: number;\n}\n\nfunction CookieTextField({\n name,\n maxAge = 60 * 60 * 24 * 7,\n onChange,\n ...inputProps\n}: CookieTextFieldProps) {\n const { getCookie, setCookie, deleteCookie } = useCookiesNext();\n const [error, setError] = useState<string | undefined>(undefined);\n const [value, setValue] = useState('');\n\n useEffect(() => {\n const stored = getCookie(`input-${name}`);\n if (stored && typeof stored === 'string') {\n setValue(stored);\n onChange?.(stored as any);\n }\n }, [name, getCookie]);\n\n useEffect(() => {\n if (value !== '' && value !== undefined) {\n setCookie(`input-${name}`, value, { maxAge });\n } else {\n deleteCookie(`input-${name}`);\n }\n }, [name, value, setCookie]);\n\n return (\n <InputText\n {...inputProps}\n error={error}\n id={`cookie-${name}`}\n name={name}\n onChange={(e) => {\n setValue(e.target.value);\n onChange?.(e.target.value as any);\n }}\n setError={setError}\n value={value}\n />\n );\n}\n\nexport { InputText, TextField, QueryTextField, CookieTextField };\n"],"mappings":"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"}
|
package/dist/toggle-field.d.ts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as React$1 from "react";
|
|
2
|
-
import * as
|
|
2
|
+
import * as react_jsx_runtime8 from "react/jsx-runtime";
|
|
3
3
|
import { Item, Root } from "@radix-ui/react-toggle-group";
|
|
4
4
|
import { VariantProps } from "class-variance-authority";
|
|
5
5
|
import * as class_variance_authority_types0 from "class-variance-authority/types";
|
|
@@ -23,7 +23,7 @@ declare function ToggleGroup({
|
|
|
23
23
|
transition,
|
|
24
24
|
activeClassName,
|
|
25
25
|
...props
|
|
26
|
-
}: ToggleGroupProps):
|
|
26
|
+
}: ToggleGroupProps): react_jsx_runtime8.JSX.Element;
|
|
27
27
|
//#endregion
|
|
28
28
|
//#region src/components/toggle-field/ToggleField.d.ts
|
|
29
29
|
type ToggleOption = {
|