@s_mart/form 7.1.2 → 7.2.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/index.d.mts +87 -11
- package/dist/index.mjs +70 -19
- package/package.json +2 -2
package/dist/index.d.mts
CHANGED
|
@@ -267,12 +267,18 @@ type SearchableProps = Omit<AutocompleteProps$1<SearchableOption, true, true, tr
|
|
|
267
267
|
declare const Searchable: react.MemoExoticComponent<({ name, rules, defaultValue, shouldUnregister, label, required, options, textFieldProps, noOptionsText, footer, multiple, info, placeholder, onChange: onChangeProp, onInputChange, disableIconError, ...rest }: SearchableProps) => react_jsx_runtime.JSX.Element>;
|
|
268
268
|
|
|
269
269
|
type ControllerCreatable = Omit<ControllerProps, 'render' | 'control'>;
|
|
270
|
+
/**
|
|
271
|
+
* @deprecated usar CreatableV2
|
|
272
|
+
*/
|
|
270
273
|
type CreatableOption = {
|
|
271
274
|
key?: string | number;
|
|
272
275
|
label: string;
|
|
273
276
|
value?: string | number | readonly string[] | undefined;
|
|
274
277
|
afterLabel?: string | React.ReactNode;
|
|
275
278
|
} | string;
|
|
279
|
+
/**
|
|
280
|
+
* @deprecated usar CreatableV2
|
|
281
|
+
*/
|
|
276
282
|
type CreatableProps = Omit<AutocompleteProps$1<CreatableOption, true, true, true>, 'renderInput' | 'size' | 'onInputChange' | 'onChange'> & ControllerCreatable & {
|
|
277
283
|
/**
|
|
278
284
|
* Opções do autocomplete
|
|
@@ -365,7 +371,10 @@ type CreatableProps = Omit<AutocompleteProps$1<CreatableOption, true, true, true
|
|
|
365
371
|
placeholder?: string;
|
|
366
372
|
};
|
|
367
373
|
|
|
368
|
-
|
|
374
|
+
/**
|
|
375
|
+
* @deprecated usar CreatableV2
|
|
376
|
+
*/
|
|
377
|
+
declare const Creatable: react.MemoExoticComponent<({ name, rules, defaultValue, shouldUnregister, label, required, options, editable, footer, onEditOption, onCreateOption, textFieldProps, hideAddButton, multiple, info, onChange: onChangeProp, onInputChange, placeholder, disableIconError, ...rest }: CreatableProps) => react_jsx_runtime.JSX.Element>;
|
|
369
378
|
|
|
370
379
|
type ControllerCheckbox = Omit<ControllerProps, 'render' | 'control'>;
|
|
371
380
|
type CheckboxProps = CheckboxProps$1 & ControllerCheckbox & {
|
|
@@ -540,7 +549,7 @@ type DatePickerProps = Omit<UseControllerProps, 'control'> & Pick<TextFieldProps
|
|
|
540
549
|
disableIconError?: boolean;
|
|
541
550
|
};
|
|
542
551
|
|
|
543
|
-
declare const _default$
|
|
552
|
+
declare const _default$5: react.MemoExoticComponent<({ rules, name, defaultValue, shouldUnregister, datePickerProps, label, required, placeholder, disabled, disableIconError, ...rest }: DatePickerProps) => react_jsx_runtime.JSX.Element>;
|
|
544
553
|
|
|
545
554
|
type TimePickerProps = Omit<UseControllerProps, 'control'> & Pick<TextFieldProps$1, 'label' | 'error' | 'helperText' | 'size' | 'fullWidth' | 'variant' | 'autoFocus' | 'placeholder'> & {
|
|
546
555
|
timePickerProps?: Partial<TimePickerProps$1<any>>;
|
|
@@ -566,7 +575,7 @@ type TimePickerProps = Omit<UseControllerProps, 'control'> & Pick<TextFieldProps
|
|
|
566
575
|
disableIconError?: boolean;
|
|
567
576
|
};
|
|
568
577
|
|
|
569
|
-
declare const _default$
|
|
578
|
+
declare const _default$4: react.MemoExoticComponent<({ rules, defaultValue, shouldUnregister, name, required, label, timePickerProps, placeholder, disabled, disableIconError, ...rest }: TimePickerProps) => react_jsx_runtime.JSX.Element>;
|
|
570
579
|
|
|
571
580
|
type AutoCompleteOption = {
|
|
572
581
|
key?: string | number;
|
|
@@ -610,7 +619,7 @@ type AutocompleteProps<T = any> = Omit<UseControllerProps, 'control'> & Omit<Aut
|
|
|
610
619
|
placeholder?: string;
|
|
611
620
|
};
|
|
612
621
|
|
|
613
|
-
declare const _default$
|
|
622
|
+
declare const _default$3: react.MemoExoticComponent<({ name, defaultValue, rules, shouldUnregister, label, required, noOptionsText, placeholder, onInputChange, onChange, disableIconError, ...rest }: AutocompleteProps) => react_jsx_runtime.JSX.Element>;
|
|
614
623
|
|
|
615
624
|
type FieldLabelProps = {
|
|
616
625
|
label: React.ReactNode;
|
|
@@ -620,7 +629,7 @@ type FieldLabelProps = {
|
|
|
620
629
|
|
|
621
630
|
declare const FieldLabel: ({ label, required, regular }: FieldLabelProps) => react_jsx_runtime.JSX.Element;
|
|
622
631
|
|
|
623
|
-
type SearchableV2Props<T extends FieldValues | string | number> = Omit<AutocompleteProps$1<T,
|
|
632
|
+
type SearchableV2Props<T extends FieldValues | string | number, Multiple extends boolean | undefined, _ValueType = unknown> = Omit<AutocompleteProps$1<T, Multiple, true, true>, 'renderInput' | 'size' | 'onInputChange' | 'onChange' | 'getOptionLabel' | 'getOptionKey' | 'defaultValue' | 'value'> & Omit<ControllerProps, 'render' | 'control'> & {
|
|
624
633
|
options: T[];
|
|
625
634
|
textFieldProps?: TextFieldProps$1;
|
|
626
635
|
label?: React.ReactNode;
|
|
@@ -643,11 +652,11 @@ type SearchableV2Props<T extends FieldValues | string | number> = Omit<Autocompl
|
|
|
643
652
|
* montada à tela como um ícone de informação.
|
|
644
653
|
*/
|
|
645
654
|
info?: React.ReactNode;
|
|
646
|
-
defaultValue?:
|
|
647
|
-
value?:
|
|
655
|
+
defaultValue?: _ValueType;
|
|
656
|
+
value?: _ValueType;
|
|
648
657
|
placeholder?: string;
|
|
649
658
|
onInputChange?: (value: string) => void;
|
|
650
|
-
onChange?: (value:
|
|
659
|
+
onChange?: (value: _ValueType | null) => void;
|
|
651
660
|
/**
|
|
652
661
|
* Define a key unica da option
|
|
653
662
|
*/
|
|
@@ -662,7 +671,9 @@ type SearchableV2Props<T extends FieldValues | string | number> = Omit<Autocompl
|
|
|
662
671
|
getOptionAfterLabel?: (option: T) => string | React.ReactNode;
|
|
663
672
|
};
|
|
664
673
|
|
|
665
|
-
|
|
674
|
+
type ConditionalArrayType<T, Multiple extends boolean | undefined = undefined> = Multiple extends true ? T[] : T;
|
|
675
|
+
|
|
676
|
+
declare const _default$2: <T extends string | number | FieldValues, Multiple extends boolean | undefined = undefined, _ValueType = ConditionalArrayType<T, Multiple>>({ name, rules, defaultValue, shouldUnregister, label, required, options, textFieldProps, noOptionsText, footer, multiple, info, placeholder, onChange: onChangeProp, onInputChange, getOptionAfterLabel, getOptionLabel, getOptionKey, ...rest }: SearchableV2Props<T, Multiple, _ValueType>) => react_jsx_runtime.JSX.Element;
|
|
666
677
|
|
|
667
678
|
type ControllerSelect = Omit<ControllerProps, 'render' | 'control'>;
|
|
668
679
|
type FooterPropsV2 = {
|
|
@@ -714,6 +725,71 @@ type SelectV2Props<T extends FieldValues | string | number> = Omit<SelectProps$1
|
|
|
714
725
|
getOptionAfterLabel?: (option: T) => string | React.ReactNode;
|
|
715
726
|
};
|
|
716
727
|
|
|
717
|
-
declare const _default: <T extends string | number | FieldValues>({ name, rules, defaultValue, shouldUnregister, label, required, options, placeholder, clearable, info, footer, onChange: onChangeProp, variant, getOptionKey, getOptionLabel, getOptionAfterLabel, ...rest }: SelectV2Props<T>) => react_jsx_runtime.JSX.Element;
|
|
728
|
+
declare const _default$1: <T extends string | number | FieldValues>({ name, rules, defaultValue, shouldUnregister, label, required, options, placeholder, clearable, info, footer, onChange: onChangeProp, variant, getOptionKey, getOptionLabel, getOptionAfterLabel, ...rest }: SelectV2Props<T>) => react_jsx_runtime.JSX.Element;
|
|
729
|
+
|
|
730
|
+
type CreatableV2Props<T extends FieldValues | string | number, Multiple extends boolean | undefined, _ValueType = unknown> = Omit<AutocompleteProps$1<T, Multiple, true, true>, 'renderInput' | 'size' | 'onInputChange' | 'onChange' | 'getOptionLabel' | 'getOptionKey' | 'defaultValue' | 'value'> & Omit<ControllerProps, 'render' | 'control'> & {
|
|
731
|
+
options: T[];
|
|
732
|
+
textFieldProps?: TextFieldProps$1;
|
|
733
|
+
label?: React.ReactNode;
|
|
734
|
+
required?: boolean;
|
|
735
|
+
/**
|
|
736
|
+
* Define se mostra o botão para criar uma nova opção
|
|
737
|
+
* @default true
|
|
738
|
+
* @type {boolean}
|
|
739
|
+
* @memberof CreatableV2Props
|
|
740
|
+
*/
|
|
741
|
+
showCreatableButton?: boolean;
|
|
742
|
+
/**
|
|
743
|
+
* Define se mostra o botão para editar uma opção existente
|
|
744
|
+
* @default false
|
|
745
|
+
* @type {boolean}
|
|
746
|
+
* @memberof CreatableV2Props
|
|
747
|
+
*/
|
|
748
|
+
showEditableButton?: boolean;
|
|
749
|
+
/**
|
|
750
|
+
* Função que será executada quando o usuário clicar no botão de criar uma nova opção
|
|
751
|
+
* @default () => {}
|
|
752
|
+
* @type {(value: string) => void}
|
|
753
|
+
* @memberof CreatableV2Props
|
|
754
|
+
*/
|
|
755
|
+
onCreateOption?: (value: string) => void;
|
|
756
|
+
/**
|
|
757
|
+
* Função que será executada quando o usuário clicar no botão de editar uma opção
|
|
758
|
+
* @default () => {}
|
|
759
|
+
* @type {(value) => void}
|
|
760
|
+
* @memberof CreatableV2Props
|
|
761
|
+
*/
|
|
762
|
+
onEditOption?: (value: _ValueType) => void;
|
|
763
|
+
/**
|
|
764
|
+
* Componente que renderiza no footer do searchable (opcional)
|
|
765
|
+
* @example
|
|
766
|
+
* footer: (
|
|
767
|
+
* <Button onClick={handleClick}>Mostrar mais...</Button>
|
|
768
|
+
* )
|
|
769
|
+
*/
|
|
770
|
+
footer?: () => React.ReactNode;
|
|
771
|
+
/**
|
|
772
|
+
* É o conteúdo passado para a tooltip que renderizará ao lado da label do campo,
|
|
773
|
+
* montada à tela como um ícone de informação.
|
|
774
|
+
*/
|
|
775
|
+
info?: React.ReactNode;
|
|
776
|
+
onInputChange?: (value: string) => void;
|
|
777
|
+
onChange?: (value: _ValueType | null) => void;
|
|
778
|
+
placeholder?: string;
|
|
779
|
+
/**
|
|
780
|
+
* Define a key unica da option
|
|
781
|
+
*/
|
|
782
|
+
getOptionKey: (option: T) => string | number;
|
|
783
|
+
/**
|
|
784
|
+
* Define a label da option
|
|
785
|
+
*/
|
|
786
|
+
getOptionLabel: (option: T) => string;
|
|
787
|
+
/**
|
|
788
|
+
* Componente renderizado embaixo da option da listagem
|
|
789
|
+
*/
|
|
790
|
+
getOptionAfterLabel?: (option: T) => string | React.ReactNode;
|
|
791
|
+
};
|
|
792
|
+
|
|
793
|
+
declare const _default: <T extends string | number | FieldValues, Multiple extends boolean | undefined = undefined, _ValueType = ConditionalArrayType<T, Multiple>>({ name, rules, defaultValue, shouldUnregister, label, required, options, footer, showCreatableButton, showEditableButton, onEditOption, onCreateOption, getOptionKey, getOptionLabel, getOptionAfterLabel, textFieldProps, multiple, info, noOptionsText, onChange: onChangeProp, onInputChange, placeholder, ...rest }: CreatableV2Props<T, Multiple, _ValueType>) => react_jsx_runtime.JSX.Element;
|
|
718
794
|
|
|
719
|
-
export { _default$
|
|
795
|
+
export { _default$3 as Autocomplete, type AutocompleteProps, Checkbox, type CheckboxProps, Creatable, type CreatableOption, type CreatableProps, _default as CreatableV2, type CreatableV2Props, _default$5 as DatePicker, type DatePickerProps, FieldLabel, type FieldLabelProps, type FooterProps, type FooterPropsV2, Form, FormProvider, type IFormProps, type IFormProviderProps, type IUseFormProps, RadioButton, RadioGroup, type RadioGroupProps, type RadioProps, Searchable, type SearchableOption, type SearchableProps, _default$2 as SearchableV2, type SearchableV2Props, Select, type SelectOption, type SelectProps, _default$1 as SelectV2, type SelectV2Props, Slider, type SliderProps, Switch, type SwitchProps, _default$6 as TextField, type TextFieldProps, _default$4 as TimePicker, type TimePickerProps, useForm };
|
package/dist/index.mjs
CHANGED
|
@@ -1,15 +1,15 @@
|
|
|
1
|
-
import{FormProvider as
|
|
1
|
+
import{FormProvider as to}from"react-hook-form";import{jsx as Ie}from"react/jsx-runtime";function io({children:e,style:t,onSubmit:i,...n}){return Ie(to,{...n,children:Ie("form",{onSubmit:l=>{l.preventDefault(),l.stopPropagation(),i(l)},style:t,children:e})})}var Fe=io;import{useEffect as lo}from"react";import{useForm as no}from"react-hook-form";import{zodResolver as ao}from"@hookform/resolvers/zod";var so=({disableDefaultValuesUpdate:e,onSubmit:t,...i})=>{let n=no({...i,resolver:i.schema&&ao(i.schema)});return lo(()=>{e||n.reset(i.defaultValues)},[i.defaultValues,n.reset]),{...n,onSubmit:n.handleSubmit(l=>t(l,n))}},be=so;import{jsx as uo}from"react/jsx-runtime";function po({children:e,style:t,...i}){let n=be(i);return uo(Fe,{...n,style:t,children:typeof e=="function"?e(n):e})}var mo=po;import{memo as Po,useState as ho}from"react";import{Controller as vo,useFormContext as Co}from"react-hook-form";import{Tooltip as To,Grid as ge,InputAdornment as Io,TextField as So}from"@mui/material";import{lineEye as ko,lineEyeSlash as Vo,lineInfoCircle as wo}from"@s_mart/solid-icons";import*as Ve from"@s_mart/masks";import{Typography as Se}from"@mui/material";import{toRem as fo}from"@s_mart/utils";import{jsx as ke,jsxs as yo}from"react/jsx-runtime";var co=({label:e,required:t,regular:i})=>yo("span",{style:{display:"flex",alignItems:"center",gap:fo(2)},children:[ke(Se,{variant:"caption",fontWeight:i?400:700,style:{display:"flex",alignItems:"center"},children:e}),t&&ke(Se,{variant:"caption",fontWeight:900,color:"error",children:"*"})]}),h=co;import{useFormContext as xo}from"react-hook-form";import{Indicator as Fo}from"@s_mart/core";var R=(e,t)=>t.replace(/[[\]]/g,"").split(".").reduce((n,l)=>n?.[l],e);import{jsx as go}from"react/jsx-runtime";var bo=({name:e,disableIcon:t})=>{let i=xo(),n=R(i?.formState?.errors,e);return n?go(Fo,{severity:"error",icon:t?!1:void 0,children:n?.message}):null},S=bo;import{LIcon as we}from"@s_mart/core";import{jsx as q,jsxs as Re}from"react/jsx-runtime";var Ro=({name:e,rules:t,defaultValue:i,shouldUnregister:n,label:l,required:P,mask:y,variant:x="outlined",info:v,parse:u,inputMode:f,format:a,onInputChange:g,disableIconError:p,...c})=>{let F=Co();if(!F)throw new Error("Para usar o <TextField /> \xE9 necess\xE1rio que ele esteja dentro de um <Form />");let[d,b]=ho(!1),s=o=>{let r=o;return a&&(r=a(o)),y?Ve?.[y]?.format(r):r},m=o=>{let r=o;return u&&(r=u(o)),y?Ve?.[y]?.parse(r):r},L=o=>{if(!o||y!=="porcentagem"&&y!=="porcentagem0")return;o?.stopPropagation();let r=(o?.target).value;if(r){let C=String(r);if(C.length>0){let k=C.indexOf("%");k>-1&&(o.currentTarget.selectionEnd=k)}}},A=R(F.formState.errors,e);return q(vo,{control:F.control,name:e,rules:t,defaultValue:i,shouldUnregister:n,render:({field:{value:o,onChange:r,ref:C}})=>Re(ge,{display:"flex",flexDirection:"column",children:[Re("div",{style:{display:"flex"},children:[l&&q(ge,{item:!0,children:q(h,{label:l,required:P})}),v&&q(ge,{item:!0,children:q(To,{title:v,placement:"top",children:q("div",{style:{width:"fit-content"},children:q(we,{icon:wo,color:"#757575"})})})})]}),q(So,{variant:x,defaultValue:i,value:s(o||(o!=0?"":o)),onChange:k=>{let H=m(k?.target?.value);r(H),g?.(H,F.getValues())},error:!!A,...c,type:c.type==="password"?d?"text":"password":c.type,autoComplete:c.autoComplete||"off",inputProps:{inputMode:f,...c.inputProps},InputProps:{onKeyDown:L,inputRef:C,endAdornment:c.type==="password"&&q(Io,{position:"start",onClick:()=>b(!d),style:{cursor:"pointer"},children:q(we,{icon:d?ko:Vo,size:"24px",removeMargin:!0})}),...c.InputProps}},e),q(S,{name:e,disableIcon:p})]})})},Eo=Po(Ro);import{memo as Lo,useState as Ao}from"react";import{Controller as Bo,useFormContext as Go}from"react-hook-form";import{IconButton as Mo,LIcon as Ee}from"@s_mart/core";import{lineTimes as $o}from"@s_mart/regular-icons";import{lineInfoCircle as Do}from"@s_mart/solid-icons";import{colorPalette as _o}from"@s_mart/tokens";import{Divider as qo,Tooltip as zo,Grid as J,Select as Oo,MenuItem as No,useTheme as Uo}from"@mui/material";import{Fragment as Ho,jsx as $,jsxs as le}from"react/jsx-runtime";var Le=Lo(({name:e,rules:t,defaultValue:i,shouldUnregister:n,label:l,required:P,options:y,placeholder:x,clearable:v,disableOnChangeForm:u=!1,multiple:f,info:a,footer:g,onChange:p,disableIconError:c,variant:F="outlined",...d})=>{let b=Go(),{palette:s}=Uo(),[m,L]=Ao(!1);if(!b)throw new Error("Para usar o <Select /> \xE9 necess\xE1rio que ele esteja dentro de um <Form />");let A=R(b.formState.errors,e);return $(Bo,{control:b.control,name:e,rules:t,defaultValue:i,shouldUnregister:n,render:({field:{value:o,onChange:r,ref:C}})=>le(J,{display:"flex",flexDirection:"column",children:[le("div",{style:{display:"flex"},children:[l&&$(J,{item:!0,children:$(h,{label:l,required:P})}),a&&$(J,{item:!0,children:$(zo,{title:a,placement:"top",children:$("div",{style:{width:"fit-content"},children:$(Ee,{icon:Do,color:"#757575"})})})})]}),le(Oo,{open:m,onOpen:()=>L(!0),onClose:()=>L(!1),displayEmpty:!!x,variant:F,autoComplete:"off",value:o?o||"":f?[]:"",renderValue:k=>{if(k.label)return k.label;if(x)return $("p",{style:{color:s.grey[400]},children:x})},multiple:f,onChange:k=>{!u&&r(k.target.value),p&&p(k.target.value,b.getValues())},error:!!A,size:d.size||"medium",inputRef:C,...d,endAdornment:le(Ho,{children:[d.endAdornment,!!(v&&o)&&$(Mo,{variant:"text",color:"neutral",size:"small",sx:{borderRadius:"50%",position:"absolute",right:"2rem"},style:{padding:0},"aria-label":"Clear",title:"Clear",onClick:()=>{!u&&r(null),p&&p(null,b.getValues())},children:$(Ee,{icon:$o,color:_o.neutral[100],size:"25px",removeMargin:!0})})]}),children:[y?.map((k,H)=>$(No,{value:k,children:le(J,{container:!0,direction:"column",children:[$(J,{item:!0,children:k.label}),k.afterLabel&&$(J,{item:!0,children:k.afterLabel})]})},H)),g&&[$(J,{px:2,py:1,children:$(qo,{})},"footer-divider"),$("div",{children:g({closeSelect:()=>L(!1)})},"footer-content")]]},e),$(S,{name:e,disableIcon:c})]})})});Le.displayName="Select";var jo=Le;import{forwardRef as Wo,memo as Yo}from"react";import{Controller as Jo,useFormContext as Ko}from"react-hook-form";import{Tooltip as Xo,Divider as Ae,Grid as W,Autocomplete as Qo,TextField as Zo}from"@mui/material";import{LIcon as er}from"@s_mart/core";import{lineInfoCircle as or}from"@s_mart/solid-icons";import{colorPalette as rr}from"@s_mart/tokens";import{Fragment as se,jsx as M,jsxs as K}from"react/jsx-runtime";import{createElement as Be}from"react";var Ge=Yo(({name:e,rules:t,defaultValue:i,shouldUnregister:n,label:l,required:P,options:y,textFieldProps:x,noOptionsText:v,footer:u,multiple:f,info:a,placeholder:g,onChange:p,onInputChange:c,disableIconError:F,...d})=>{let b=Ko();if(!b)throw new Error("Para usar o <Searchable /> \xE9 necess\xE1rio que ele esteja dentro de um <Form />");let s=R(b.formState.errors,e);return M(Jo,{control:b.control,name:e,rules:t,defaultValue:i,shouldUnregister:n,render:({field:{onChange:m,value:L,ref:A}})=>K(W,{display:"flex",flexDirection:"column",children:[K("div",{style:{display:"flex"},children:[l&&M(W,{item:!0,children:M(h,{label:l,required:P})}),a&&M(W,{item:!0,children:M(Xo,{title:a,placement:"top",children:M("div",{style:{width:"fit-content"},children:M(er,{icon:or,color:"#757575"})})})})]}),M(Qo,{onChange:(o,r)=>{m(r),p?.(r,b.getValues())},onInputChange:(o,r,C)=>{C==="input"&&setTimeout(()=>{c?.(r,b.getValues())},0)},slotProps:{...d.slotProps||{},paper:{...(d.slotProps||{}).paper||{},sx:{border:`1px solid ${rr.neutral[30]}`,boxShadow:"0px 2px 4px rgba(0, 0, 0, 0.15)",...(d.slotProps||{}).paper?.sx||{}}}},value:L||(f?[]:null),options:y,multiple:f,readOnly:d.disabled,noOptionsText:K(se,{children:[v||"Nenhum resultado encontrado",u?K(se,{children:[M(W,{py:1,children:M(Ae,{})}),u]}):null]}),isOptionEqualToValue:(o,r)=>typeof o=="string"&&typeof r=="string"?o===r:typeof o=="object"&&typeof r=="object"?typeof o.value=="object"&&typeof r.value=="object"&&o.key!==void 0&&r.key!==void 0?o.key===r.key:o.value===r.value:!1,renderOption:(o,r)=>typeof r=="object"?Be("li",{...o,key:r.key||r.value},K(W,{container:!0,direction:"column",children:[M(W,{item:!0,children:r.label}),r.afterLabel&&M(W,{item:!0,children:r.afterLabel})]})):Be("li",{...o,key:r},r),ListboxComponent:Wo(function(r,C){return K(se,{children:[M("ul",{...r,ref:C}),!!u&&M("div",{...r,children:K(se,{children:[M(W,{px:2,py:1,children:M(Ae,{})}),u]})},"searchable-footer")]})}),...d,renderInput:o=>M(Zo,{error:!!s,placeholder:g,...o,...x,inputRef:A})},e),M(S,{name:e,disableIcon:F})]})})});Ge.displayName="Searchable";var tr=Ge;import{forwardRef as nr,memo as ar}from"react";import{Controller as dr,useFormContext as sr}from"react-hook-form";import{isObject as pr,isEmpty as mr}from"lodash-es";import{Grid as X,Autocomplete as ur,TextField as fr,Tooltip as cr,Divider as yr}from"@mui/material";import{LIcon as me,Button as xr}from"@s_mart/core";import{colorPalette as Fr}from"@s_mart/tokens";import{linePlus as _e,linePen as br,lineInfoCircle as gr}from"@s_mart/solid-icons";import{toRem as qe}from"@s_mart/utils";import{toRem as pe}from"@s_mart/utils";import ir from"@emotion/styled";import{css as Me}from"@emotion/react";var $e=Me`
|
|
2
2
|
display: flex;
|
|
3
3
|
align-items: center;
|
|
4
4
|
justify-content: center;
|
|
5
|
-
`,
|
|
5
|
+
`,lr=e=>Me`
|
|
6
6
|
.creatable,
|
|
7
7
|
.editable {
|
|
8
|
-
${
|
|
8
|
+
${$e}
|
|
9
9
|
|
|
10
10
|
.divider {
|
|
11
11
|
width: 1px;
|
|
12
|
-
height: ${
|
|
12
|
+
height: ${pe(20)};
|
|
13
13
|
background-color: ${e.palette.grey[400]};
|
|
14
14
|
}
|
|
15
15
|
|
|
@@ -20,9 +20,9 @@ import{FormProvider as Ue}from"react-hook-form";import{jsx as Fe}from"react/jsx-
|
|
|
20
20
|
color: ${e.palette.grey[600]};
|
|
21
21
|
border-radius: 50%;
|
|
22
22
|
|
|
23
|
-
margin: 0 ${
|
|
24
|
-
width: ${
|
|
25
|
-
height: ${
|
|
23
|
+
margin: 0 ${pe(6)};
|
|
24
|
+
width: ${pe(28)};
|
|
25
|
+
height: ${pe(28)};
|
|
26
26
|
|
|
27
27
|
&:hover {
|
|
28
28
|
cursor: pointer;
|
|
@@ -31,14 +31,14 @@ import{FormProvider as Ue}from"react-hook-form";import{jsx as Fe}from"react/jsx-
|
|
|
31
31
|
}
|
|
32
32
|
}
|
|
33
33
|
}
|
|
34
|
-
`,
|
|
34
|
+
`,De=ir.div`
|
|
35
35
|
display: flex;
|
|
36
36
|
|
|
37
37
|
div.endAdornments {
|
|
38
38
|
position: absolute;
|
|
39
39
|
right: 0;
|
|
40
40
|
|
|
41
|
-
${
|
|
41
|
+
${$e}
|
|
42
42
|
}
|
|
43
43
|
|
|
44
44
|
.MuiAutocomplete-endAdornment {
|
|
@@ -50,23 +50,74 @@ import{FormProvider as Ue}from"react-hook-form";import{jsx as Fe}from"react/jsx-
|
|
|
50
50
|
transform: translate(0, 0);
|
|
51
51
|
}
|
|
52
52
|
|
|
53
|
-
${({hideAddButton:e,theme:t})=>!e&&
|
|
54
|
-
`;import{Fragment as
|
|
53
|
+
${({hideAddButton:e,theme:t})=>!e&&lr(t)}
|
|
54
|
+
`;import{Fragment as Pe,jsx as V,jsxs as N}from"react/jsx-runtime";import{createElement as ze}from"react";var Oe=ar(({name:e,rules:t,defaultValue:i,shouldUnregister:n,label:l,required:P,options:y,editable:x,footer:v,onEditOption:u,onCreateOption:f,textFieldProps:a,hideAddButton:g,multiple:p,info:c,onChange:F,onInputChange:d,placeholder:b,disableIconError:s,...m})=>{let L=sr();if(!L)throw new Error("Para usar o <Creatable /> \xE9 necess\xE1rio que ele esteja dentro de um <Form />");let A=R(L.formState.errors,e),o=g||m.disabled,r=w=>{let D=0;return a?.InputProps||(D+=2.5),o||(D+=2.56,C(w)&&(D+=2.56)),!m.disableClearable&&!m.disabled&&(D+=1.3),D+"rem"},C=w=>m.disabled?!1:x&&pr(w)&&!mr(w);console.warn=()=>{};let k=w=>{f?f(w):console.error("onCreateOption n\xE3o foi definido")},H=w=>{u?u(w):console.error("onEditOption n\xE3o foi definido")};return V(dr,{control:L.control,name:e,rules:t,defaultValue:i,shouldUnregister:n,render:({field:{value:w,onChange:D,ref:xe}})=>{let ie=w?.label||w?.value||w;return N(X,{display:"flex",flexDirection:"column",children:[N("div",{style:{display:"flex"},children:[l&&V(X,{item:!0,children:V(h,{label:l,required:P})}),c&&V(X,{item:!0,children:V(cr,{title:c,placement:"top",children:V("div",{style:{width:"fit-content"},children:V(me,{icon:gr,color:"#757575"})})})})]}),V(De,{hideAddButton:o,children:V(ur,{fullWidth:!0,onChange:(E,T)=>{D(T),F?.(T,L.getValues())},onInputChange:(E,T,I)=>{I==="input"&&setTimeout(()=>{d?.(T,L.getValues())},0)},slotProps:{...m.slotProps||{},paper:{...(m.slotProps||{}).paper||{},sx:{border:`1px solid ${Fr.neutral[30]}`,boxShadow:"0px 2px 4px rgba(0, 0, 0, 0.15)",...(m.slotProps||{}).paper?.sx||{}}}},options:y,value:w||(p?[]:null),multiple:p,readOnly:m.disabled,noOptionsText:o?void 0:N(xr,{sx:{justifyContent:"flex-start",padding:`${qe(6)} ${qe(-16)}`,margin:0},fullWidth:!0,onClick:()=>k(w),variant:"text",startIcon:V(me,{icon:_e}),children:["Adicionar ",ie&&`"${ie}"`]}),isOptionEqualToValue:(E,T)=>T?typeof E=="string"&&typeof T=="string"?E===T:typeof E=="object"&&typeof T=="object"?typeof E.value=="object"&&typeof T.value=="object"&&E.key!==void 0&&T.key!==void 0?E.key===T.key:E.value===T.value:typeof E=="object"&&typeof T=="string":!1,renderOption:(E,T)=>typeof T=="object"?ze("li",{...E,key:T.key||T.value},N(X,{container:!0,direction:"column",children:[V(X,{item:!0,children:T.label}),T.afterLabel&&V(X,{item:!0,children:T.afterLabel})]})):ze("li",{...E,key:T},T),ListboxComponent:nr(function(T,I){return N(Pe,{children:[V("ul",{...T,ref:I}),!!v&&V("div",{...T,children:N(Pe,{children:[V(X,{px:2,py:1,children:V(yr,{})}),v]})},"creatable-footer")]})}),...m,sx:{"& div.MuiInputBase-root":{paddingRight:`${r(w)} !important`},...m.sx},renderInput:E=>V(fr,{placeholder:b,...E,error:!!A,InputProps:{...E.InputProps,inputRef:xe,endAdornment:N("div",{className:"endAdornments",children:[E.InputProps.endAdornment,!o&&N(Pe,{children:[C(w)?N("div",{className:"editable",children:[V("div",{className:"divider"}),V("div",{className:"button",onClick:()=>H(w),children:V(me,{icon:br,size:"24px",removeMargin:!0})})]}):null,N("div",{className:"creatable",children:[V("div",{className:"divider"}),V("div",{className:"button",onClick:()=>k(w),children:V(me,{icon:_e,size:"24px",removeMargin:!0})})]})]})]})},...a})},e)}),V(S,{name:e,disableIcon:s})]})}})});Oe.displayName="Creatable";var Pr=Oe;import{Controller as hr,useFormContext as vr}from"react-hook-form";import{Grid as Cr,Checkbox as Tr,FormControlLabel as Ir}from"@mui/material";import{jsx as ne,jsxs as Vr}from"react/jsx-runtime";var Sr=({name:e,rules:t,defaultValue:i,shouldUnregister:n,label:l,labelPlacement:P,required:y,disableIconError:x,onChange:v,...u})=>{let f=vr();if(!f)throw new Error("Para usar o <Checkbox /> \xE9 necess\xE1rio que ele esteja dentro de um <Form />");return ne(hr,{control:f.control,name:e,rules:t,defaultValue:i,shouldUnregister:n,render:({field:{value:a,onChange:g}})=>Vr(Cr,{display:"flex",flexDirection:"column",children:[ne(Ir,{control:ne(Tr,{checked:!!a,value:a??"",defaultValue:a,onChange:(p,c)=>{g(p,c),v?.(p,c)},...u},e),label:ne(h,{label:l,required:y,regular:!0}),labelPlacement:P||"end"}),ne(S,{name:e,disableIcon:x})]})})},kr=Sr;import{Controller as wr,useFormContext as Rr}from"react-hook-form";import{Grid as Er,Switch as Lr,FormControlLabel as Ar}from"@mui/material";import{jsx as ae,jsxs as Mr}from"react/jsx-runtime";var Br=({name:e,rules:t,defaultValue:i,shouldUnregister:n,label:l,labelPlacement:P,disableIconError:y,onChange:x,...v})=>{let u=Rr();if(!u)throw new Error("Para usar o <Switch /> \xE9 necess\xE1rio que ele esteja dentro de um <Form />");return ae(wr,{control:u.control,name:e,rules:t,defaultValue:i,shouldUnregister:n,render:({field:{value:f,onChange:a}})=>Mr(Er,{display:"flex",flexDirection:"column",children:[ae(Ar,{control:ae(Lr,{value:f??"",checked:f??!1,defaultValue:f,onChange:(g,p)=>{a(g,p),x?.(g,p)},...v},e),label:ae(h,{label:l}),labelPlacement:P||"end"}),ae(S,{name:e,disableIcon:y})]})})},Gr=Br;import{Grid as $r,Radio as Dr,FormControlLabel as _r}from"@mui/material";import{jsx as ue}from"react/jsx-runtime";var qr=({label:e,labelPlacement:t,...i})=>ue($r,{display:"flex",flexDirection:"column",children:ue(_r,{control:ue(Dr,{...i}),label:ue(h,{label:e}),labelPlacement:t||"end"})}),zr=qr;import{Controller as Or,useFormContext as Nr}from"react-hook-form";import{Grid as Ur,RadioGroup as jr}from"@mui/material";import{jsx as fe,jsxs as Yr}from"react/jsx-runtime";var Hr=({name:e,rules:t,defaultValue:i,shouldUnregister:n,label:l,required:P,children:y,orientation:x="row",disableIconError:v,...u})=>{let f=Nr();if(!f)throw new Error("Para usar o <RadioGroup /> \xE9 necess\xE1rio que ele esteja dentro de um <Form />");return fe(Or,{control:f.control,name:e,rules:t,defaultValue:i,shouldUnregister:n,render:({field:{value:a,onChange:g}})=>Yr(Ur,{display:"flex",flexDirection:"column",children:[l&&fe(h,{label:l,required:P}),fe(jr,{value:a||"",name:e,...u,onChange:p=>{u?.onChange?.(p,p.target?.value),g(p)},style:{display:"flex",flexDirection:x},children:y},e),fe(S,{name:e,disableIcon:v})]})})},Wr=Hr;import{Controller as Jr,useFormContext as Kr}from"react-hook-form";import{Slider as Xr}from"@mui/material";import{jsx as Ne}from"react/jsx-runtime";var Qr=({name:e,rules:t,defaultValue:i,shouldUnregister:n,...l})=>{let P=Kr();if(!P)throw new Error("Para usar o <Slider /> \xE9 necess\xE1rio que ele esteja dentro de um <Form />");return Ne(Jr,{control:P.control,name:e,rules:t,defaultValue:i,shouldUnregister:n,render:({field:{value:y,onChange:x}})=>Ne(Xr,{value:y||l?.min||0,onChange:x,valueLabelDisplay:"auto",...l},e)})},Zr=Qr;import{memo as it}from"react";import{Controller as lt,useFormContext as nt}from"react-hook-form";import{composeValidators as at,date as je}from"@s_mart/rules";import{Grid as dt,TextField as st}from"@mui/material";import{DatePicker as pt}from"@mui/x-date-pickers/DatePicker";import{AdapterDayjs as mt}from"@mui/x-date-pickers/AdapterDayjs";import{LocalizationProvider as ut}from"@mui/x-date-pickers/LocalizationProvider";import{ptBR as ft}from"@mui/x-date-pickers/locales/ptBR";import ct from"dayjs/locale/pt-br";import et from"@emotion/styled";import{IconButton as ot}from"@mui/material";import{toRem as U}from"@s_mart/utils";var rt=e=>{switch(e){case"small":return U(16);default:case"medium":return U(20);case"large":return U(24)}},tt=e=>{switch(e){case"small":return`${U(2)} ${U(8)}`;default:case"medium":return`${U(6)} ${U(8)}`;case"large":return`${U(10)}`}},Ue=et(ot)`
|
|
55
55
|
margin: 0px;
|
|
56
56
|
|
|
57
|
-
padding: ${({size:e})=>
|
|
58
|
-
border-radius: 0 ${
|
|
57
|
+
padding: ${({size:e})=>tt(e)};
|
|
58
|
+
border-radius: 0 ${U(4)} ${U(4)} 0;
|
|
59
59
|
|
|
60
60
|
svg {
|
|
61
|
-
width: ${({size:e})=>
|
|
61
|
+
width: ${({size:e})=>rt(e)} !important;
|
|
62
62
|
}
|
|
63
|
-
`;import{jsx as
|
|
63
|
+
`;import{jsx as de,jsxs as bt}from"react/jsx-runtime";import{createElement as Ft}from"react";var yt=({rules:e,name:t,defaultValue:i,shouldUnregister:n,datePickerProps:l,label:P,required:y,placeholder:x,disabled:v,disableIconError:u,...f})=>{let a=nt();if(!a)throw new Error("Para usar o <DataPicker /> \xE9 necess\xE1rio que ele esteja dentro de um <Form />");let g=R(a.formState.errors,t),p=l?.format||"DD/MM/YYYY",c=e?at([je(p),e]):je(p);return de(ut,{dateAdapter:mt,adapterLocale:ct,localeText:ft.components.MuiLocalizationProvider.defaultProps.localeText,children:de(lt,{control:a.control,name:t,rules:c,defaultValue:i,shouldUnregister:n,render:({field:{value:F,onChange:d,ref:b}})=>bt(dt,{display:"flex",flexDirection:"column",children:[P&&de(h,{label:P,required:y}),Ft(pt,{...l,key:t,value:F??null,format:p,onChange:(s,m)=>{d(s,m),l?.onChange?.(s,m)},disabled:v,slots:{textField:st,openPickerButton:s=>de(Ue,{...s,size:f.size})},slotProps:{textField:s=>({variant:"outlined",...s,error:!!g,...f,inputProps:{...s.inputProps,placeholder:x||s.inputProps?.placeholder},InputProps:{...s.InputProps,inputRef(m){b(m),typeof s.inputRef=="function"&&s.inputRef(m)}}})}}),de(S,{name:t,disableIcon:u})]})})})},xt=it(yt);import{memo as Ct}from"react";import{Controller as Tt,useFormContext as It}from"react-hook-form";import{composeValidators as St,time as We}from"@s_mart/rules";import{Grid as kt,TextField as Vt}from"@mui/material";import{TimePicker as wt}from"@mui/x-date-pickers/TimePicker";import{AdapterDayjs as Rt}from"@mui/x-date-pickers/AdapterDayjs";import{LocalizationProvider as Et}from"@mui/x-date-pickers/LocalizationProvider";import{ptBR as Lt}from"@mui/x-date-pickers/locales/ptBR";import At from"dayjs/locale/pt-br";import gt from"@emotion/styled";import{IconButton as Pt}from"@mui/material";import{toRem as j}from"@s_mart/utils";var ht=e=>{switch(e){case"small":return j(16);default:case"medium":return j(20);case"large":return j(24)}},vt=e=>{switch(e){case"small":return`${j(2)} ${j(8)}`;default:case"medium":return`${j(6)} ${j(8)}`;case"large":return`${j(10)}`}},He=gt(Pt)`
|
|
64
64
|
margin: 0px;
|
|
65
65
|
|
|
66
|
-
padding: ${({size:e})=>
|
|
67
|
-
border-radius: 0 ${
|
|
66
|
+
padding: ${({size:e})=>vt(e)};
|
|
67
|
+
border-radius: 0 ${j(4)} ${j(4)} 0;
|
|
68
68
|
|
|
69
69
|
svg {
|
|
70
|
-
width: ${({size:e})=>
|
|
70
|
+
width: ${({size:e})=>ht(e)} !important;
|
|
71
71
|
}
|
|
72
|
-
`;import{jsx as
|
|
72
|
+
`;import{jsx as oe,jsxs as Mt}from"react/jsx-runtime";var Bt=({rules:e,defaultValue:t,shouldUnregister:i,name:n,required:l,label:P,timePickerProps:y,placeholder:x,disabled:v,disableIconError:u,...f})=>{let a=It();if(!a)throw new Error("Para usar o <TimePicker /> \xE9 necess\xE1rio que ele esteja dentro de um <Form />");let g=R(a.formState.errors,n),p=y?.format||"HH:mm",c=e?St([We(p),e]):We(p);return oe(Et,{dateAdapter:Rt,adapterLocale:At,localeText:Lt.components.MuiLocalizationProvider.defaultProps.localeText,children:oe(Tt,{control:a.control,name:n,rules:c,defaultValue:t,shouldUnregister:i,render:({field:{value:F,onChange:d,ref:b}})=>Mt(kt,{display:"flex",flexDirection:"column",children:[P&&oe(h,{label:P,required:l}),oe(wt,{ampm:!1,format:p,value:F??null,disabled:v,...y,onChange:(s,m)=>{d(s,m),y?.onChange?.(s,m)},slots:{textField:Vt,openPickerButton:s=>oe(He,{...s,size:f.size})},slotProps:{textField:s=>({variant:"outlined",...s,error:!!g,...f,inputProps:{...s.inputProps,placeholder:x||s.inputProps?.placeholder},InputProps:{...s.InputProps,inputRef(m){b(m),typeof s.inputRef=="function"&&s.inputRef(m)}}})}},n),oe(S,{name:n,disableIcon:u})]})})})},Gt=Ct(Bt);import{memo as $t}from"react";import{Controller as Dt,useFormContext as _t}from"react-hook-form";import{Grid as ce,Autocomplete as qt,TextField as zt}from"@mui/material";import{colorPalette as Ot}from"@s_mart/tokens";import{jsx as Q,jsxs as Ye}from"react/jsx-runtime";import{createElement as jt}from"react";var Nt=({name:e,defaultValue:t,rules:i,shouldUnregister:n,label:l,required:P,noOptionsText:y,placeholder:x,onInputChange:v,onChange:u,disableIconError:f,...a})=>{let g=_t();if(!g)throw new Error("Para usar o <Autocomplete /> \xE9 necess\xE1rio que ele esteja dentro de um <Form />");let p=R(g.formState.errors,e);return console.warn=()=>{},Q(Dt,{name:e,control:g.control,defaultValue:t,rules:i,shouldUnregister:n,render:({field:c})=>Ye(ce,{display:"flex",flexDirection:"column",children:[l&&Q(h,{label:l,required:P}),Q(qt,{onChange:(F,d)=>{c.onChange(d),u?.(d,g.getValues())},onInputChange:(F,d,b)=>{b==="input"&&(c.onChange(d),setTimeout(()=>{v?.(d,g.getValues())},0))},slotProps:{...a.slotProps||{},paper:{...(a.slotProps||{}).paper||{},sx:{border:`1px solid ${Ot.neutral[30]}`,boxShadow:"0px 2px 4px rgba(0, 0, 0, 0.15)",...(a.slotProps||{}).paper?.sx||{}}}},isOptionEqualToValue:(F,d)=>F.value===d.value,renderOption:(F,d)=>jt("li",{...F,key:d.key||d.value,onClick:b=>{F.onClick?.(b),c.onChange(d)}},Ye(ce,{container:!0,direction:"column",children:[Q(ce,{item:!0,children:d.label}),d.afterLabel&&Q(ce,{item:!0,children:d.afterLabel})]})),value:c.value||null,readOnly:a.disabled,noOptionsText:y||"Nenhuma op\xE7\xE3o encontrada",...a,renderInput:F=>Q(zt,{placeholder:x,...F,...a.textFieldProps,error:!!p,InputProps:{...F.InputProps,...a.textFieldProps?.InputProps,inputRef:c.ref,inputProps:{...F.inputProps,...a.textFieldProps?.InputProps?.inputProps}}})},e),Q(S,{name:e,disableIcon:f})]})})},Ut=$t(Nt);import{useController as Xt,useFormContext as Qt}from"react-hook-form";import{Tooltip as Ht}from"@mui/material";import{LIcon as Wt}from"@s_mart/core";import{lineInfoCircle as Yt}from"@s_mart/solid-icons";import{jsx as he}from"react/jsx-runtime";var Jt=({title:e})=>he(Ht,{title:e,placement:"top",children:he("div",{style:{width:"fit-content"},children:he(Wt,{icon:Yt,color:"#757575"})})}),Z=Jt;import{Autocomplete as Zt,Divider as Je,TextField as ei}from"@mui/material";import{isEqual as oi}from"lodash-es";import{forwardRef as ri}from"react";import{colorPalette as ti}from"@s_mart/tokens";import{memo as Kt}from"react";var re=Kt;import{Fragment as ve,jsx as _,jsxs as ee}from"react/jsx-runtime";import{createElement as ni}from"react";var ii=({name:e,rules:t,defaultValue:i,shouldUnregister:n,label:l,required:P,options:y,textFieldProps:x,noOptionsText:v,footer:u,multiple:f,info:a,placeholder:g,onChange:p,onInputChange:c,getOptionAfterLabel:F,getOptionLabel:d,getOptionKey:b,...s})=>{let m=Qt();if(!m)throw new Error("Para usar o <SearchableV2 /> \xE9 necess\xE1rio que ele esteja dentro de um <Form />");let L=R(m.formState.errors,e),{field:A}=Xt({name:e,control:m.control,rules:t,defaultValue:i,shouldUnregister:n});return ee("div",{style:{display:"flex",flexDirection:"column"},children:[ee("div",{style:{display:"flex"},children:[l&&_(h,{label:l,required:P}),a&&_(Z,{title:a})]}),_(Zt,{onChange:(o,r)=>{A.onChange(r),p?.(r)},onInputChange:(o,r,C)=>{C==="input"&&c?.(r)},value:A.value?A.value:f?[]:null,options:y,multiple:f,readOnly:s.disabled,slotProps:{...s.slotProps,paper:{...s.slotProps?.paper,sx:{border:`1px solid ${ti.neutral[30]}`,boxShadow:"0px 2px 4px rgba(0, 0, 0, 0.15)",...s.slotProps?.paper?.sx}}},noOptionsText:ee(ve,{children:[v||"Nenhuma op\xE7\xE3o encontrada",typeof u<"u"?ee(ve,{children:[_("div",{style:{paddingTop:"0.5rem",paddingBottom:"0.5rem"},children:_(Je,{})}),u()]}):null]}),isOptionEqualToValue:(o,r)=>oi(o,r),getOptionLabel:o=>d(o),getOptionKey:o=>b(o),renderOption:typeof F=="function"?(o,r)=>{let C=F(r),k=b(r);return ni("li",{...o,key:k},ee("div",{style:{display:"flex",flexDirection:"column"},children:[_("span",{children:d(r)}),typeof C=="string"?_("span",{children:C}):C]}))}:void 0,ListboxComponent:ri(function(r,C){return ee(ve,{children:[_("ul",{...r,ref:C}),typeof u<"u"?ee("div",{...r,children:[_("div",{style:{paddingTop:"0.5rem",paddingBottom:"0.5rem"},children:_(Je,{})}),u()]},"searchable-footer"):null]})}),...s,renderInput:o=>_(ei,{error:!!L,placeholder:g,...o,...x,inputRef:A.ref})},e),_(S,{name:e})]})},li=re(ii);import{useState as si}from"react";import{useController as pi,useFormContext as mi}from"react-hook-form";import{IconButton as ui,LIcon as fi}from"@s_mart/core";import{lineTimes as ci}from"@s_mart/regular-icons";import{colorPalette as yi}from"@s_mart/tokens";import{Select as xi,MenuItem as Fi,Divider as bi}from"@mui/material";import{colorPalette as ai}from"@s_mart/tokens";import{jsx as di}from"react/jsx-runtime";var Ke=({value:e,placeholder:t,getOptionLabel:i})=>e===null||e?.length===0?di("p",{style:{color:ai.neutral[100]},children:t}):i(e);import{Fragment as hi,jsx as z,jsxs as te}from"react/jsx-runtime";var gi=({name:e,rules:t,defaultValue:i,shouldUnregister:n,label:l,required:P,options:y,placeholder:x,clearable:v,info:u,footer:f,onChange:a,variant:g="outlined",getOptionKey:p,getOptionLabel:c,getOptionAfterLabel:F,...d})=>{let b=mi(),[s,m]=si(!1);if(!b)throw new Error("Para usar o <SelectV2 /> \xE9 necess\xE1rio que ele esteja dentro de um <Form />");let L=R(b.formState.errors,e),{field:A}=pi({control:b.control,name:e,rules:t,defaultValue:i,shouldUnregister:n});return te("div",{style:{display:"flex",flexDirection:"column"},children:[te("div",{style:{display:"flex"},children:[l&&z(h,{label:l,required:P}),u&&z(Z,{title:u})]}),te(xi,{open:s,onOpen:()=>m(!0),onClose:()=>m(!1),displayEmpty:!!x,variant:g,autoComplete:"off",value:A.value||null,renderValue:o=>z(Ke,{getOptionLabel:c,placeholder:x,value:o}),onChange:o=>{A.onChange(o.target.value),a?.(o.target.value)},error:!!L,size:d.size||"medium",inputRef:A.ref,...d,endAdornment:te(hi,{children:[d.endAdornment,!!(v&&A.value)&&z(ui,{variant:"text",color:"neutral",size:"small",sx:{borderRadius:"50%",position:"absolute",right:"2rem"},style:{padding:0},"aria-label":"Limpar",title:"Limpar",onClick:()=>{A.onChange(null),a?.(null)},children:z(fi,{icon:ci,color:yi.neutral[100],size:"25px",removeMargin:!0})})]}),children:[y.map(o=>{let r=p(o),C=c(o);return z(Fi,{value:o,children:te("div",{style:{display:"flex",flexDirection:"column",flex:1},children:[C,z("span",{children:F?.(o)??null})]})},r)}),f!==void 0&&te("div",{children:[z("div",{style:{padding:"8px 16px"},children:z(bi,{})},"footer-divider"),z("div",{children:f({closeSelect:()=>m(!1)})},"footer-content")]},"footer")]},e),z(S,{name:e})]})},Pi=re(gi);import{forwardRef as Ti,useCallback as Ii,useState as Si}from"react";import{useController as ki,useFormContext as Vi}from"react-hook-form";import{isObject as wi,isEmpty as Ri,isEqual as Ei}from"lodash-es";import{Autocomplete as Li,TextField as Ai,Divider as Ze}from"@mui/material";import{LIcon as Ce,Button as Bi}from"@s_mart/core";import{colorPalette as Gi}from"@s_mart/tokens";import{linePlus as eo,linePen as Mi}from"@s_mart/solid-icons";import{toRem as oo}from"@s_mart/utils";import{toRem as ye}from"@s_mart/utils";import vi from"@emotion/styled";import{css as Ci}from"@emotion/react";var Xe=Ci`
|
|
73
|
+
display: flex;
|
|
74
|
+
align-items: center;
|
|
75
|
+
justify-content: center;
|
|
76
|
+
`,Qe=vi.div`
|
|
77
|
+
display: flex;
|
|
78
|
+
|
|
79
|
+
div.endAdornments {
|
|
80
|
+
position: absolute;
|
|
81
|
+
right: 0;
|
|
82
|
+
|
|
83
|
+
${Xe}
|
|
84
|
+
}
|
|
85
|
+
|
|
86
|
+
.MuiAutocomplete-endAdornment {
|
|
87
|
+
position: relative;
|
|
88
|
+
right: 0;
|
|
89
|
+
}
|
|
90
|
+
|
|
91
|
+
.endAdornments > .MuiAutocomplete-endAdornment {
|
|
92
|
+
transform: translate(0, 0);
|
|
93
|
+
}
|
|
94
|
+
|
|
95
|
+
.creatable,
|
|
96
|
+
.editable {
|
|
97
|
+
${Xe}
|
|
98
|
+
|
|
99
|
+
.divider {
|
|
100
|
+
width: 1px;
|
|
101
|
+
height: ${ye(20)};
|
|
102
|
+
background-color: ${({theme:e})=>e.palette.grey[400]};
|
|
103
|
+
}
|
|
104
|
+
|
|
105
|
+
.button {
|
|
106
|
+
display: flex;
|
|
107
|
+
justify-content: center;
|
|
108
|
+
align-items: center;
|
|
109
|
+
color: ${({theme:e})=>e.palette.grey[600]};
|
|
110
|
+
border-radius: 50%;
|
|
111
|
+
|
|
112
|
+
margin: 0 ${ye(6)};
|
|
113
|
+
width: ${ye(28)};
|
|
114
|
+
height: ${ye(28)};
|
|
115
|
+
|
|
116
|
+
&:hover {
|
|
117
|
+
cursor: pointer;
|
|
118
|
+
background-color: ${({theme:e})=>e.palette.grey[100]};
|
|
119
|
+
transition: background-color 0.2s ease-in-out;
|
|
120
|
+
}
|
|
121
|
+
}
|
|
122
|
+
}
|
|
123
|
+
`;import{Fragment as Te,jsx as G,jsxs as O}from"react/jsx-runtime";import{createElement as _i}from"react";var $i=({name:e,rules:t,defaultValue:i,shouldUnregister:n,label:l,required:P,options:y,footer:x,showCreatableButton:v=!0,showEditableButton:u,onEditOption:f,onCreateOption:a,getOptionKey:g,getOptionLabel:p,getOptionAfterLabel:c,textFieldProps:F,multiple:d,info:b,noOptionsText:s,onChange:m,onInputChange:L,placeholder:A,...o})=>{let[r,C]=Si(""),k=Vi();if(!k)throw new Error("Para usar o <CreatableV2 /> \xE9 necess\xE1rio que ele esteja dentro de um <Form />");let H=R(k.formState.errors,e),w=!v||o.disabled,{field:D}=ki({name:e,control:k.control,rules:t,defaultValue:i,shouldUnregister:n}),xe=I=>{let B=0;return F?.InputProps||(B+=2.5),w||(B+=2.56,ie(I)&&(B+=2.56)),!o.disableClearable&&!o.disabled&&(B+=1.3),B+"rem"},ie=I=>o.disabled?!1:u&&wi(I)&&!Ri(I),E=Ii(()=>{typeof a<"u"&&(a(r),C(""))},[r]),T=I=>{f?.(I)};return O("div",{style:{display:"flex",flexDirection:"column"},children:[O("div",{style:{display:"flex"},children:[l&&G(h,{label:l,required:P}),b&&G(Z,{title:b})]}),G(Qe,{children:G(Li,{fullWidth:!0,onChange:(I,B)=>{C(""),D.onChange(B),m?.(B)},onInputChange:(I,B,Y)=>{Y==="input"&&(C(B),L?.(B))},slotProps:{...o.slotProps,paper:{...o.slotProps?.paper,sx:{border:`1px solid ${Gi.neutral[30]}`,boxShadow:"0px 2px 4px rgba(0, 0, 0, 0.15)",...o.slotProps?.paper?.sx}}},value:D.value?D.value:d?[]:null,options:y,multiple:d,readOnly:o.disabled,noOptionsText:O(Te,{children:[s||"Nenhuma op\xE7\xE3o encontrada",!w&&O(Bi,{sx:{justifyContent:"flex-start",padding:`${oo(6)} ${oo(-16)}`,margin:0},fullWidth:!0,onClick:E,variant:"text",startIcon:G(Ce,{icon:eo}),children:["Adicionar ",`"${r}"`]}),typeof x<"u"&&O(Te,{children:[G("div",{style:{paddingTop:"0.5rem",paddingBottom:"0.5rem"},children:G(Ze,{})}),x()]})]}),isOptionEqualToValue:(I,B)=>Ei(I,B),getOptionLabel:I=>p(I),getOptionKey:I=>g(I),renderOption:typeof c=="function"?(I,B)=>{let Y=c(B),ro=g(B);return _i("li",{...I,key:ro},O("div",{style:{display:"flex",flexDirection:"column"},children:[G("span",{children:p(B)}),typeof Y=="string"?G("span",{children:Y}):Y]}))}:void 0,ListboxComponent:Ti(function(B,Y){return O(Te,{children:[G("ul",{...B,ref:Y}),typeof x<"u"?O("div",{...B,children:[G("div",{style:{paddingTop:"0.5rem",paddingBottom:"0.5rem"},children:G(Ze,{})}),x()]},"creatable-footer"):null]})}),...o,sx:{"& div.MuiInputBase-root":{paddingRight:`${xe(D.value)} !important`},...o.sx},onBlur:I=>{o?.onBlur?.(I),C("")},renderInput:I=>G(Ai,{placeholder:A,...I,error:!!H,InputProps:{...I.InputProps,inputRef:D.ref,endAdornment:O("div",{className:"endAdornments",children:[I.InputProps.endAdornment,ie(D.value)?O("div",{className:"editable",children:[G("div",{className:"divider"}),G("div",{className:"button",onClick:()=>T(D.value),children:G(Ce,{icon:Mi,size:"24px",removeMargin:!0})})]}):null,v&&O("div",{className:"creatable",children:[G("div",{className:"divider"}),G("div",{className:"button",onClick:E,children:G(Ce,{icon:eo,size:"24px",removeMargin:!0})})]})]})},...F})},e)}),G(S,{name:e})]})},Di=re($i);export{Ut as Autocomplete,kr as Checkbox,Pr as Creatable,Di as CreatableV2,xt as DatePicker,h as FieldLabel,mo as Form,Fe as FormProvider,zr as RadioButton,Wr as RadioGroup,tr as Searchable,li as SearchableV2,jo as Select,Pi as SelectV2,Zr as Slider,Gr as Switch,Eo as TextField,Gt as TimePicker,be as useForm};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@s_mart/form",
|
|
3
|
-
"version": "7.1
|
|
3
|
+
"version": "7.2.1",
|
|
4
4
|
"main": "./dist/index.mjs",
|
|
5
5
|
"module": "./dist/index.mjs",
|
|
6
6
|
"types": "./dist/index.d.mts",
|
|
@@ -23,7 +23,7 @@
|
|
|
23
23
|
"eslint-config-smarten": "4.1.0",
|
|
24
24
|
"@s_mart/rules": "5.1.1",
|
|
25
25
|
"@s_mart/solid-icons": "5.2.0",
|
|
26
|
-
"@s_mart/regular-icons": "5.
|
|
26
|
+
"@s_mart/regular-icons": "5.3.0",
|
|
27
27
|
"@s_mart/tokens": "5.1.0",
|
|
28
28
|
"@s_mart/typed": "6.0.0",
|
|
29
29
|
"@s_mart/utils": "5.1.1"
|