@seedgrid/fe-components 2026.3.19 → 2026.3.26
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/buttons/SgFloatActionButton.d.ts.map +1 -1
- package/dist/buttons/SgFloatActionButton.js +5 -26
- package/dist/buttons/SgSplitButton.d.ts.map +1 -1
- package/dist/buttons/SgSplitButton.js +3 -1
- package/dist/buttons/fab-helpers.d.ts +6 -0
- package/dist/buttons/fab-helpers.d.ts.map +1 -0
- package/dist/buttons/fab-helpers.js +29 -0
- package/dist/commons/SgAvatar.d.ts.map +1 -1
- package/dist/commons/SgAvatar.js +6 -3
- package/dist/commons/SgBadge.d.ts.map +1 -1
- package/dist/commons/SgBadge.js +5 -2
- package/dist/commons/SgToast.d.ts.map +1 -1
- package/dist/commons/SgToast.js +3 -1
- package/dist/commons/SgToaster.d.ts.map +1 -1
- package/dist/commons/SgToaster.js +3 -1
- package/dist/environment/SgEnvironmentProvider.d.ts.map +1 -1
- package/dist/environment/SgEnvironmentProvider.js +10 -15
- package/dist/environment/persistent-state.d.ts +22 -0
- package/dist/environment/persistent-state.d.ts.map +1 -0
- package/dist/environment/persistent-state.js +33 -0
- package/dist/gadgets/calendar/SgCalendar.d.ts.map +1 -1
- package/dist/gadgets/calendar/SgCalendar.js +5 -23
- package/dist/gadgets/clock/SgClock.d.ts.map +1 -1
- package/dist/gadgets/clock/SgClock.js +12 -10
- package/dist/gadgets/clock/themes/SgClockThemePicker.d.ts +2 -1
- package/dist/gadgets/clock/themes/SgClockThemePicker.d.ts.map +1 -1
- package/dist/gadgets/clock/themes/SgClockThemePicker.js +23 -28
- package/dist/gadgets/clock/themes/search.d.ts +9 -0
- package/dist/gadgets/clock/themes/search.d.ts.map +1 -0
- package/dist/gadgets/clock/themes/search.js +15 -0
- package/dist/gadgets/gauge/SgLinearGauge.d.ts.map +1 -1
- package/dist/gadgets/gauge/SgLinearGauge.js +39 -28
- package/dist/gadgets/gauge/SgRadialGauge.d.ts.map +1 -1
- package/dist/gadgets/gauge/SgRadialGauge.js +44 -37
- package/dist/gadgets/gauge/math.d.ts +90 -0
- package/dist/gadgets/gauge/math.d.ts.map +1 -0
- package/dist/gadgets/gauge/math.js +81 -0
- package/dist/gadgets/qr-code/SgQRCode.d.ts.map +1 -1
- package/dist/gadgets/qr-code/SgQRCode.js +3 -1
- package/dist/i18n/en-US.d.ts.map +1 -1
- package/dist/i18n/en-US.js +97 -1
- package/dist/i18n/es.d.ts.map +1 -1
- package/dist/i18n/es.js +153 -57
- package/dist/i18n/fr.d.ts +3 -0
- package/dist/i18n/fr.d.ts.map +1 -0
- package/dist/i18n/fr.js +206 -0
- package/dist/i18n/index.d.ts +5 -1
- package/dist/i18n/index.d.ts.map +1 -1
- package/dist/i18n/index.js +50 -14
- package/dist/i18n/pt-BR.d.ts.map +1 -1
- package/dist/i18n/pt-BR.js +97 -1
- package/dist/i18n/pt-PT.d.ts.map +1 -1
- package/dist/i18n/pt-PT.js +97 -1
- package/dist/index.d.ts +12 -2
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +10 -2
- package/dist/inputs/SgAutocomplete.d.ts +1 -1
- package/dist/inputs/SgAutocomplete.d.ts.map +1 -1
- package/dist/inputs/SgAutocomplete.js +7 -4
- package/dist/inputs/SgCheckboxGroup.d.ts +2 -6
- package/dist/inputs/SgCheckboxGroup.d.ts.map +1 -1
- package/dist/inputs/SgCheckboxGroup.js +6 -6
- package/dist/inputs/SgCombobox.d.ts.map +1 -1
- package/dist/inputs/SgCombobox.js +11 -2
- package/dist/inputs/SgInputBirthDate.d.ts.map +1 -1
- package/dist/inputs/SgInputBirthDate.js +6 -1
- package/dist/inputs/SgInputCNPJ.d.ts +3 -1
- package/dist/inputs/SgInputCNPJ.d.ts.map +1 -1
- package/dist/inputs/SgInputCNPJ.js +4 -3
- package/dist/inputs/SgInputCPF.d.ts +3 -1
- package/dist/inputs/SgInputCPF.d.ts.map +1 -1
- package/dist/inputs/SgInputCPF.js +8 -3
- package/dist/inputs/SgInputCPFCNPJ.d.ts +3 -1
- package/dist/inputs/SgInputCPFCNPJ.d.ts.map +1 -1
- package/dist/inputs/SgInputCPFCNPJ.js +8 -3
- package/dist/inputs/SgInputCurrency.d.ts +3 -7
- package/dist/inputs/SgInputCurrency.d.ts.map +1 -1
- package/dist/inputs/SgInputCurrency.js +5 -2
- package/dist/inputs/SgInputDate.d.ts.map +1 -1
- package/dist/inputs/SgInputDate.js +6 -1
- package/dist/inputs/SgInputEmail.d.ts.map +1 -1
- package/dist/inputs/SgInputEmail.js +1 -1
- package/dist/inputs/SgInputNumber.d.ts +3 -7
- package/dist/inputs/SgInputNumber.d.ts.map +1 -1
- package/dist/inputs/SgInputNumber.js +5 -2
- package/dist/inputs/SgInputOTP.d.ts +5 -12
- package/dist/inputs/SgInputOTP.d.ts.map +1 -1
- package/dist/inputs/SgInputOTP.js +7 -4
- package/dist/inputs/SgInputPassword.d.ts.map +1 -1
- package/dist/inputs/SgInputPassword.js +1 -1
- package/dist/inputs/SgInputPhone.d.ts +3 -1
- package/dist/inputs/SgInputPhone.d.ts.map +1 -1
- package/dist/inputs/SgInputPhone.js +2 -1
- package/dist/inputs/SgInputPostalCode.d.ts.map +1 -1
- package/dist/inputs/SgInputPostalCode.js +2 -1
- package/dist/inputs/SgInputSelect.d.ts +4 -2
- package/dist/inputs/SgInputSelect.d.ts.map +1 -1
- package/dist/inputs/SgInputSelect.js +38 -3
- package/dist/inputs/SgInputText.d.ts +3 -7
- package/dist/inputs/SgInputText.d.ts.map +1 -1
- package/dist/inputs/SgInputText.js +5 -2
- package/dist/inputs/SgInputTextArea.d.ts +4 -2
- package/dist/inputs/SgInputTextArea.d.ts.map +1 -1
- package/dist/inputs/SgInputTextArea.js +37 -2
- package/dist/inputs/SgOrderList.d.ts +3 -1
- package/dist/inputs/SgOrderList.d.ts.map +1 -1
- package/dist/inputs/SgOrderList.js +19 -3
- package/dist/inputs/SgPickList.d.ts +3 -1
- package/dist/inputs/SgPickList.d.ts.map +1 -1
- package/dist/inputs/SgPickList.js +20 -4
- package/dist/inputs/SgRadioGroup.d.ts +2 -6
- package/dist/inputs/SgRadioGroup.d.ts.map +1 -1
- package/dist/inputs/SgRadioGroup.js +6 -6
- package/dist/inputs/SgRating.d.ts +2 -10
- package/dist/inputs/SgRating.d.ts.map +1 -1
- package/dist/inputs/SgRating.js +6 -3
- package/dist/inputs/SgSlider.d.ts +8 -2
- package/dist/inputs/SgSlider.d.ts.map +1 -1
- package/dist/inputs/SgSlider.js +62 -10
- package/dist/inputs/SgStepperInput.d.ts +8 -2
- package/dist/inputs/SgStepperInput.d.ts.map +1 -1
- package/dist/inputs/SgStepperInput.js +62 -8
- package/dist/inputs/SgTextEditor.d.ts +3 -1
- package/dist/inputs/SgTextEditor.d.ts.map +1 -1
- package/dist/inputs/SgTextEditor.js +24 -11
- package/dist/inputs/SgToggleSwitch.d.ts +3 -7
- package/dist/inputs/SgToggleSwitch.d.ts.map +1 -1
- package/dist/inputs/SgToggleSwitch.js +6 -3
- package/dist/layout/SgBreadcrumb.d.ts.map +1 -1
- package/dist/layout/SgBreadcrumb.js +7 -3
- package/dist/layout/SgCard.d.ts.map +1 -1
- package/dist/layout/SgCard.js +3 -1
- package/dist/layout/SgCarousel.d.ts.map +1 -1
- package/dist/layout/SgCarousel.js +3 -1
- package/dist/layout/SgExpandablePanel.d.ts.map +1 -1
- package/dist/layout/SgExpandablePanel.js +3 -1
- package/dist/layout/SgMenu.d.ts.map +1 -1
- package/dist/layout/SgMenu.js +173 -297
- package/dist/layout/SgPageControl.d.ts.map +1 -1
- package/dist/layout/SgPageControl.js +7 -3
- package/dist/layout/SgToolBar.d.ts.map +1 -1
- package/dist/layout/SgToolBar.js +19 -55
- package/dist/layout/SgTreeView.d.ts.map +1 -1
- package/dist/layout/SgTreeView.js +7 -3
- package/dist/layout/drag-position.d.ts +7 -0
- package/dist/layout/drag-position.d.ts.map +1 -0
- package/dist/layout/drag-position.js +30 -0
- package/dist/layout/menu-logic.d.ts +187 -0
- package/dist/layout/menu-logic.d.ts.map +1 -0
- package/dist/layout/menu-logic.js +349 -0
- package/dist/layout/toolbar-logic.d.ts +26 -0
- package/dist/layout/toolbar-logic.d.ts.map +1 -0
- package/dist/layout/toolbar-logic.js +38 -0
- package/dist/menus/SgDockMenu.d.ts.map +1 -1
- package/dist/menus/SgDockMenu.js +44 -120
- package/dist/menus/dock-menu-logic.d.ts +50 -0
- package/dist/menus/dock-menu-logic.d.ts.map +1 -0
- package/dist/menus/dock-menu-logic.js +113 -0
- package/dist/overlay/SgDialog.d.ts.map +1 -1
- package/dist/overlay/SgDialog.js +4 -2
- package/dist/overlay/SgPopup.d.ts.map +1 -1
- package/dist/overlay/SgPopup.js +4 -1
- package/dist/rhf.d.ts +8 -3
- package/dist/rhf.d.ts.map +1 -1
- package/dist/rhf.js +18 -1
- package/dist/sandbox.cjs +60 -60
- package/dist/wizard/SgWizard.d.ts.map +1 -1
- package/dist/wizard/SgWizard.js +20 -32
- package/dist/wizard/logic.d.ts +9 -0
- package/dist/wizard/logic.d.ts.map +1 -0
- package/dist/wizard/logic.js +20 -0
- package/package.json +78 -76
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SgInputDate.d.ts","sourceRoot":"","sources":["../../src/inputs/SgInputDate.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAe,KAAK,gBAAgB,EAAE,MAAM,eAAe,CAAC;
|
|
1
|
+
{"version":3,"file":"SgInputDate.d.ts","sourceRoot":"","sources":["../../src/inputs/SgInputDate.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAe,KAAK,gBAAgB,EAAE,MAAM,eAAe,CAAC;AAInE,MAAM,MAAM,gBAAgB,GAAG,IAAI,CAAC,gBAAgB,EAAE,MAAM,CAAC,GAAG;IAC9D,OAAO,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACxB,OAAO,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACxB,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB,CAAC;AAuBF,wBAAgB,WAAW,CAAC,KAAK,EAAE,gBAAgB,2CA8IlD"}
|
|
@@ -2,6 +2,7 @@
|
|
|
2
2
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
3
|
import React from "react";
|
|
4
4
|
import { SgInputText } from "./SgInputText";
|
|
5
|
+
import { resolveFieldError } from "../rhf";
|
|
5
6
|
import { t, useComponentsI18n } from "../i18n";
|
|
6
7
|
function toDateValue(value) {
|
|
7
8
|
if (!value)
|
|
@@ -123,5 +124,9 @@ export function SgInputDate(props) {
|
|
|
123
124
|
` }), showStaticLabel && labelText ? (_jsx("label", { htmlFor: rest.id, className: [
|
|
124
125
|
"pointer-events-none absolute left-3 top-0 z-10 -translate-y-1/2 bg-[var(--sg-input-bg,hsl(var(--background)))] px-1 text-[11px] font-medium leading-none",
|
|
125
126
|
hasError ? "text-[hsl(var(--destructive))]" : "text-foreground/70"
|
|
126
|
-
].join(" "), children: labelText })) : null, _jsx(SgInputText, { ...rest, type: "date", error: error
|
|
127
|
+
].join(" "), children: labelText })) : null, _jsx(SgInputText, { ...rest, type: "date", error: resolveFieldError(error, internalError ?? undefined), inputProps: mergedInputProps, className: inputClassName, labelClassName: showStaticLabel ? "sr-only" : undefined, onClear: () => {
|
|
128
|
+
setInternalError(null);
|
|
129
|
+
onValidation?.(null);
|
|
130
|
+
rest.onClear?.();
|
|
131
|
+
} })] }));
|
|
127
132
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SgInputEmail.d.ts","sourceRoot":"","sources":["../../src/inputs/SgInputEmail.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAe,KAAK,gBAAgB,EAAE,MAAM,eAAe,CAAC;AAInE,MAAM,MAAM,iBAAiB,GAAG,IAAI,CAAC,gBAAgB,EAAE,MAAM,GAAG,OAAO,CAAC,GAAG;IACzE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,mBAAmB,CAAC,EAAE,MAAM,EAAE,CAAC;IAC/B,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,GAAG,IAAI,CAAC;IAC9C,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,YAAY,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IAChD,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,EAAE,CAAC;CACjC,CAAC;AAEF,wBAAgB,YAAY,CAAC,KAAK,EAAE,QAAQ,CAAC,iBAAiB,CAAC,
|
|
1
|
+
{"version":3,"file":"SgInputEmail.d.ts","sourceRoot":"","sources":["../../src/inputs/SgInputEmail.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAe,KAAK,gBAAgB,EAAE,MAAM,eAAe,CAAC;AAInE,MAAM,MAAM,iBAAiB,GAAG,IAAI,CAAC,gBAAgB,EAAE,MAAM,GAAG,OAAO,CAAC,GAAG;IACzE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,mBAAmB,CAAC,EAAE,MAAM,EAAE,CAAC;IAC/B,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,GAAG,IAAI,CAAC;IAC9C,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,YAAY,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IAChD,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,EAAE,CAAC;CACjC,CAAC;AAEF,wBAAgB,YAAY,CAAC,KAAK,EAAE,QAAQ,CAAC,iBAAiB,CAAC,2CAmG9D"}
|
|
@@ -66,7 +66,7 @@ export function SgInputEmail(props) {
|
|
|
66
66
|
inputProps?.onBlur?.(event);
|
|
67
67
|
}
|
|
68
68
|
};
|
|
69
|
-
return (_jsx(SgInputText, { ...rest, type: "email", textInputType: props.textInputType ?? "email", error: error ?? internalError ?? undefined, onClear: () => {
|
|
69
|
+
return (_jsx(SgInputText, { ...rest, type: "email", textInputType: props.textInputType ?? "email", required: required, requiredMessage: requiredMessage, error: error ?? internalError ?? undefined, onClear: () => {
|
|
70
70
|
setInternalError(null);
|
|
71
71
|
onValidation?.(null);
|
|
72
72
|
onClear?.();
|
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
import React from "react";
|
|
2
|
-
import
|
|
3
|
-
|
|
4
|
-
export type SgInputNumberProps = {
|
|
2
|
+
import { type RhfFieldProps } from "../rhf";
|
|
3
|
+
export type SgInputNumberProps = RhfFieldProps & {
|
|
5
4
|
id: string;
|
|
6
5
|
label?: string;
|
|
7
6
|
labelText?: string;
|
|
@@ -15,7 +14,6 @@ export type SgInputNumberProps = {
|
|
|
15
14
|
decimals?: number;
|
|
16
15
|
allowNegative?: boolean;
|
|
17
16
|
emptyValue?: "null" | "zero";
|
|
18
|
-
error?: string;
|
|
19
17
|
type?: React.HTMLInputTypeAttribute;
|
|
20
18
|
placeholder?: string;
|
|
21
19
|
className?: string;
|
|
@@ -46,8 +44,6 @@ export type SgInputNumberProps = {
|
|
|
46
44
|
validation?: (value: string) => string | null;
|
|
47
45
|
validateOnBlur?: boolean;
|
|
48
46
|
onValidation?: (message: string | null) => void;
|
|
49
|
-
|
|
50
|
-
rules?: RegisterOptions<FieldValues>;
|
|
51
|
-
} & RhfFieldProps;
|
|
47
|
+
};
|
|
52
48
|
export declare function SgInputNumber(props: SgInputNumberProps): import("react/jsx-runtime").JSX.Element;
|
|
53
49
|
//# sourceMappingURL=SgInputNumber.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SgInputNumber.d.ts","sourceRoot":"","sources":["../../src/inputs/SgInputNumber.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"SgInputNumber.d.ts","sourceRoot":"","sources":["../../src/inputs/SgInputNumber.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,EAAwC,KAAK,aAAa,EAAE,MAAM,QAAQ,CAAC;AAGlF,MAAM,MAAM,kBAAkB,GAAG,aAAa,GAAG;IAC/C,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,aAAa,CAAC,EAAE,OAAO,GAAG,KAAK,GAAG,MAAM,CAAC;IACzC,UAAU,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC7B,UAAU,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAC;IACxC,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IACxC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,UAAU,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC7B,IAAI,CAAC,EAAE,KAAK,CAAC,sBAAsB,CAAC;IACpC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,UAAU,CAAC,EAAE,CAAC,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,GAAG;QAC1D,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,gBAAgB,CAAC,CAAC;KACnC,CAAC,CAAC;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC7B,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,aAAa,CAAC,EAAE,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,CAAC,WAAW,CAAC,CAAC;IACzE,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC/B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,EAAE,CAAC;IAChC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,GAAG,IAAI,CAAC;IAC9C,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,YAAY,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;CACjD,CAAC;AA8lBF,wBAAgB,aAAa,CAAC,KAAK,EAAE,kBAAkB,2CA8DtD"}
|
|
@@ -3,6 +3,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
|
|
|
3
3
|
import React from "react";
|
|
4
4
|
import { X } from "lucide-react";
|
|
5
5
|
import { Controller } from "react-hook-form";
|
|
6
|
+
import { mergeRequiredRule, resolveFieldError } from "../rhf";
|
|
6
7
|
import { t, useComponentsI18n } from "../i18n";
|
|
7
8
|
function ErrorText(props) {
|
|
8
9
|
if (!props.message)
|
|
@@ -452,9 +453,11 @@ function SgInputNumberBase(props) {
|
|
|
452
453
|
return (_jsxs("div", { style: { width: props.width ?? "100%" }, children: [showExternalLabel ? (_jsxs("label", { htmlFor: props.id, className: externalLabelClass, children: [_jsx("span", { children: labelText }), props.required ? (_jsx("span", { className: "ml-1 text-[hsl(var(--destructive))]", "aria-hidden": "true", children: "*" })) : null] })) : null, _jsx("div", { className: showExternalLabel ? "mt-1" : undefined, children: fieldNode })] }));
|
|
453
454
|
}
|
|
454
455
|
export function SgInputNumber(props) {
|
|
456
|
+
const i18n = useComponentsI18n();
|
|
455
457
|
const { control, name, register, rules, ...rest } = props;
|
|
458
|
+
const resolvedRules = mergeRequiredRule(rules, rest.required, rest.requiredMessage ?? t(i18n, "components.inputs.required"));
|
|
456
459
|
if (name && register) {
|
|
457
|
-
const reg = register(name,
|
|
460
|
+
const reg = register(name, resolvedRules);
|
|
458
461
|
return (_jsx(SgInputNumberBase, { ...rest, onExternalChange: (value) => {
|
|
459
462
|
reg.onChange({ target: { name, value } });
|
|
460
463
|
}, inputProps: {
|
|
@@ -468,7 +471,7 @@ export function SgInputNumber(props) {
|
|
|
468
471
|
} }));
|
|
469
472
|
}
|
|
470
473
|
if (control && name) {
|
|
471
|
-
return (_jsx(Controller, { name: name, control: control, render: ({ field, fieldState }) => (_jsx(SgInputNumberBase, { ...rest, externalValue: field.value, onExternalChange: (value) => field.onChange(value), error: rest.error
|
|
474
|
+
return (_jsx(Controller, { name: name, control: control, rules: resolvedRules, render: ({ field, fieldState }) => (_jsx(SgInputNumberBase, { ...rest, externalValue: field.value, onExternalChange: (value) => field.onChange(value), error: resolveFieldError(rest.error, fieldState.error?.message), inputProps: {
|
|
472
475
|
...rest.inputProps,
|
|
473
476
|
onBlur: (event) => {
|
|
474
477
|
field.onBlur();
|
|
@@ -1,20 +1,18 @@
|
|
|
1
1
|
import React from "react";
|
|
2
|
-
import
|
|
3
|
-
import type { RhfFieldProps } from "../rhf";
|
|
2
|
+
import { type RhfFieldProps } from "../rhf";
|
|
4
3
|
export type SgInputOTPRef = {
|
|
5
4
|
focus: (slotIndex?: number) => void;
|
|
6
5
|
clear: () => void;
|
|
7
6
|
getRawValue: () => string;
|
|
8
7
|
getMaskedValue: () => string;
|
|
9
8
|
};
|
|
10
|
-
export type SgInputOTPProps = {
|
|
9
|
+
export type SgInputOTPProps = RhfFieldProps & {
|
|
11
10
|
id: string;
|
|
12
11
|
label?: string;
|
|
13
12
|
hintText?: string;
|
|
14
13
|
mask?: string;
|
|
15
14
|
value?: string;
|
|
16
15
|
defaultValue?: string;
|
|
17
|
-
error?: string;
|
|
18
16
|
className?: string;
|
|
19
17
|
groupClassName?: string;
|
|
20
18
|
slotClassName?: string;
|
|
@@ -36,17 +34,14 @@ export type SgInputOTPProps = {
|
|
|
36
34
|
onEnter?: () => void;
|
|
37
35
|
onExit?: () => void;
|
|
38
36
|
onClear?: () => void;
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
} & RhfFieldProps;
|
|
42
|
-
export declare const SgInputOTP: React.ForwardRefExoticComponent<{
|
|
37
|
+
};
|
|
38
|
+
export declare const SgInputOTP: React.ForwardRefExoticComponent<RhfFieldProps & {
|
|
43
39
|
id: string;
|
|
44
40
|
label?: string;
|
|
45
41
|
hintText?: string;
|
|
46
42
|
mask?: string;
|
|
47
43
|
value?: string;
|
|
48
44
|
defaultValue?: string;
|
|
49
|
-
error?: string;
|
|
50
45
|
className?: string;
|
|
51
46
|
groupClassName?: string;
|
|
52
47
|
slotClassName?: string;
|
|
@@ -68,7 +63,5 @@ export declare const SgInputOTP: React.ForwardRefExoticComponent<{
|
|
|
68
63
|
onEnter?: () => void;
|
|
69
64
|
onExit?: () => void;
|
|
70
65
|
onClear?: () => void;
|
|
71
|
-
|
|
72
|
-
rules?: RegisterOptions<FieldValues>;
|
|
73
|
-
} & RhfFieldProps & React.RefAttributes<SgInputOTPRef>>;
|
|
66
|
+
} & React.RefAttributes<SgInputOTPRef>>;
|
|
74
67
|
//# sourceMappingURL=SgInputOTP.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SgInputOTP.d.ts","sourceRoot":"","sources":["../../src/inputs/SgInputOTP.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"SgInputOTP.d.ts","sourceRoot":"","sources":["../../src/inputs/SgInputOTP.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAwC,KAAK,aAAa,EAAE,MAAM,QAAQ,CAAC;AAsBlF,MAAM,MAAM,aAAa,GAAG;IAC1B,KAAK,EAAE,CAAC,SAAS,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IACpC,KAAK,EAAE,MAAM,IAAI,CAAC;IAClB,WAAW,EAAE,MAAM,MAAM,CAAC;IAC1B,cAAc,EAAE,MAAM,MAAM,CAAC;CAC9B,CAAC;AAEF,MAAM,MAAM,eAAe,GAAG,aAAa,GAAG;IAC5C,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,UAAU,CAAC,EAAE,IAAI,CACf,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAC3C,OAAO,GAAG,cAAc,CACzB,GAAG;QACF,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,gBAAgB,CAAC,CAAC;KACnC,CAAC;IACF,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,UAAU,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,KAAK,MAAM,GAAG,IAAI,CAAC;IACtE,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,YAAY,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IAChD,QAAQ,CAAC,EAAE,CAAC,WAAW,EAAE,MAAM,KAAK,IAAI,CAAC;IACzC,WAAW,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IACzC,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB,CAAC;AAkrBF,eAAO,MAAM,UAAU;QAhtBjB,MAAM;YACF,MAAM;eACH,MAAM;WACV,MAAM;YACL,MAAM;mBACC,MAAM;gBACT,MAAM;qBACD,MAAM;oBACP,MAAM;yBACD,MAAM;iBACd,IAAI,CACf,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAC3C,OAAO,GAAG,cAAc,CACzB,GAAG;QACF,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,gBAAgB,CAAC,CAAC;KACnC;YACO,MAAM,GAAG,MAAM;cACb,OAAO;eACN,OAAO;eACP,OAAO;sBACA,MAAM;iBACX,CAAC,QAAQ,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,KAAK,MAAM,GAAG,IAAI;qBACpD,OAAO;mBACT,CAAC,OAAO,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI;eACpC,CAAC,WAAW,EAAE,MAAM,KAAK,IAAI;kBAC1B,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI;iBAC3B,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI;cAC1B,MAAM,IAAI;aACX,MAAM,IAAI;cACT,MAAM,IAAI;uCAkvBpB,CAAC"}
|
|
@@ -3,6 +3,7 @@ import { createElement as _createElement } from "react";
|
|
|
3
3
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
4
4
|
import React from "react";
|
|
5
5
|
import { Controller } from "react-hook-form";
|
|
6
|
+
import { mergeRequiredRule, resolveFieldError } from "../rhf";
|
|
6
7
|
import { t, useComponentsI18n } from "../i18n";
|
|
7
8
|
const DEFAULT_MASK = "999999";
|
|
8
9
|
const DIGIT_RE = /^[0-9]$/;
|
|
@@ -437,7 +438,7 @@ const SgInputOTPBase = React.forwardRef(function SgInputOTPBase(props, ref) {
|
|
|
437
438
|
}, [inputRef]);
|
|
438
439
|
const labelText = label ?? "";
|
|
439
440
|
const firstSlotId = `${id}-slot-0`;
|
|
440
|
-
return (_jsxs("div", { className: className, style: { width: toCssSize(width) }, children: [labelText ? (_jsxs("label", { htmlFor: firstSlotId, className: "mb-2 block text-sm font-medium text-foreground/80", children: [labelText, required ? (_jsx("span", { className: "ml-1 text-[hsl(var(--destructive))]", "aria-hidden": "true", children: "*" })) : null] })) : null, _jsx("div", { className: groupClassName ?? "inline-flex items-center gap-2", onFocusCapture: handleGroupFocusCapture, onBlurCapture: handleGroupBlurCapture, role: "group", "aria-label": labelText ||
|
|
441
|
+
return (_jsxs("div", { className: className, style: { width: toCssSize(width) }, children: [labelText ? (_jsxs("label", { htmlFor: firstSlotId, className: "mb-2 block text-sm font-medium text-foreground/80", children: [labelText, required ? (_jsx("span", { className: "ml-1 text-[hsl(var(--destructive))]", "aria-hidden": "true", children: "*" })) : null] })) : null, _jsx("div", { className: groupClassName ?? "inline-flex items-center gap-2", onFocusCapture: handleGroupFocusCapture, onBlurCapture: handleGroupBlurCapture, role: "group", "aria-label": labelText || t(i18n, "components.inputs.otp.group"), "aria-invalid": hasError || undefined, children: tokens.map((token, tokenIndex) => {
|
|
441
442
|
if (token.type === "separator") {
|
|
442
443
|
return (_jsx("span", { className: separatorClassName ??
|
|
443
444
|
"select-none px-1 text-lg font-semibold leading-none text-foreground/60", "aria-hidden": "true", children: token.value }, `${id}-separator-${tokenIndex}`));
|
|
@@ -455,7 +456,7 @@ const SgInputOTPBase = React.forwardRef(function SgInputOTPBase(props, ref) {
|
|
|
455
456
|
: slotIndex === slotCount - 1
|
|
456
457
|
? "rounded-r-2xl rounded-l-md"
|
|
457
458
|
: "rounded-md";
|
|
458
|
-
return (_createElement("input", { ...restSlotInputProps, key: `${id}-slot-${slotIndex}`, id: `${id}-slot-${slotIndex}`, type: "text", value: slotValue, maxLength: 1, autoComplete: slotIndex === 0 ? slotAutoComplete ?? "one-time-code" : "off", autoFocus: slotIndex === 0 ? slotAutoFocus : false, inputMode: computedInputMode, pattern: computedPattern, className: `${mergedSlotClass} ${slotShapeClass}`, disabled: isDisabled, readOnly: isReadOnly, "aria-label": labelText ? `${labelText} ${slotIndex + 1}` :
|
|
459
|
+
return (_createElement("input", { ...restSlotInputProps, key: `${id}-slot-${slotIndex}`, id: `${id}-slot-${slotIndex}`, type: "text", value: slotValue, maxLength: 1, autoComplete: slotIndex === 0 ? slotAutoComplete ?? "one-time-code" : "off", autoFocus: slotIndex === 0 ? slotAutoFocus : false, inputMode: computedInputMode, pattern: computedPattern, className: `${mergedSlotClass} ${slotShapeClass}`, disabled: isDisabled, readOnly: isReadOnly, "aria-label": labelText ? `${labelText} ${slotIndex + 1}` : t(i18n, "components.inputs.otp.slot", { slot: slotIndex + 1 }), ref: (node) => setSlotRef(slotIndex, node), onFocus: (event) => {
|
|
459
460
|
event.currentTarget.select();
|
|
460
461
|
onSlotInputFocus?.(event);
|
|
461
462
|
}, onBlur: (event) => {
|
|
@@ -479,9 +480,11 @@ function createSyntheticBlurEvent(name, value) {
|
|
|
479
480
|
};
|
|
480
481
|
}
|
|
481
482
|
export const SgInputOTP = React.forwardRef(function SgInputOTP(props, ref) {
|
|
483
|
+
const i18n = useComponentsI18n();
|
|
482
484
|
const { control, name, register, rules, ...rest } = props;
|
|
485
|
+
const resolvedRules = mergeRequiredRule(rules, rest.required, rest.requiredMessage ?? t(i18n, "components.inputs.required"));
|
|
483
486
|
if (name && register) {
|
|
484
|
-
const registration = register(name,
|
|
487
|
+
const registration = register(name, resolvedRules);
|
|
485
488
|
return (_jsx(SgInputOTPBase, { ...rest, ref: ref, name: name, hiddenFieldRef: registration.ref, onFieldChange: (rawValue) => {
|
|
486
489
|
registration.onChange(createSyntheticChangeEvent(name, rawValue));
|
|
487
490
|
}, onFieldBlur: (rawValue) => {
|
|
@@ -489,7 +492,7 @@ export const SgInputOTP = React.forwardRef(function SgInputOTP(props, ref) {
|
|
|
489
492
|
} }));
|
|
490
493
|
}
|
|
491
494
|
if (control && name) {
|
|
492
|
-
return (_jsx(Controller, { name: name, control: control, render: ({ field, fieldState }) => (_jsx(SgInputOTPBase, { ...rest, ref: ref, name: name, value: normalizeExternalValue(field.value), error: rest.error
|
|
495
|
+
return (_jsx(Controller, { name: name, control: control, rules: resolvedRules, render: ({ field, fieldState }) => (_jsx(SgInputOTPBase, { ...rest, ref: ref, name: name, value: normalizeExternalValue(field.value), error: resolveFieldError(rest.error, fieldState.error?.message), hiddenFieldRef: field.ref, onFieldChange: (rawValue) => {
|
|
493
496
|
field.onChange(rawValue);
|
|
494
497
|
}, onFieldBlur: () => {
|
|
495
498
|
field.onBlur();
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SgInputPassword.d.ts","sourceRoot":"","sources":["../../src/inputs/SgInputPassword.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAe,KAAK,gBAAgB,EAAE,MAAM,eAAe,CAAC;AAInE,MAAM,MAAM,oBAAoB,GAAG,IAAI,CACrC,gBAAgB,EAChB,MAAM,GAAG,OAAO,GAAG,YAAY,GAAG,UAAU,GAAG,iBAAiB,GAAG,gBAAgB,CACpF,GAAG;IACF,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IAChD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,GAAG,IAAI,CAAC;IAC9C,uBAAuB,CAAC,EAAE,OAAO,CAAC;IAClC,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAC/B,kBAAkB,CAAC,EAAE,MAAM,EAAE,CAAC;IAC9B,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,wBAAwB,CAAC,EAAE,OAAO,CAAC;IACnC,qCAAqC,CAAC,EAAE,OAAO,CAAC;IAChD,gCAAgC,CAAC,EAAE,OAAO,CAAC;IAC3C,iCAAiC,CAAC,EAAE,OAAO,CAAC;IAC5C,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC;AAEF,wBAAgB,eAAe,CAAC,KAAK,EAAE,QAAQ,CAAC,oBAAoB,CAAC,
|
|
1
|
+
{"version":3,"file":"SgInputPassword.d.ts","sourceRoot":"","sources":["../../src/inputs/SgInputPassword.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAe,KAAK,gBAAgB,EAAE,MAAM,eAAe,CAAC;AAInE,MAAM,MAAM,oBAAoB,GAAG,IAAI,CACrC,gBAAgB,EAChB,MAAM,GAAG,OAAO,GAAG,YAAY,GAAG,UAAU,GAAG,iBAAiB,GAAG,gBAAgB,CACpF,GAAG;IACF,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IAChD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,GAAG,IAAI,CAAC;IAC9C,uBAAuB,CAAC,EAAE,OAAO,CAAC;IAClC,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAC/B,kBAAkB,CAAC,EAAE,MAAM,EAAE,CAAC;IAC9B,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,wBAAwB,CAAC,EAAE,OAAO,CAAC;IACnC,qCAAqC,CAAC,EAAE,OAAO,CAAC;IAChD,gCAAgC,CAAC,EAAE,OAAO,CAAC;IAC3C,iCAAiC,CAAC,EAAE,OAAO,CAAC;IAC5C,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC;AAEF,wBAAgB,eAAe,CAAC,KAAK,EAAE,QAAQ,CAAC,oBAAoB,CAAC,2CAgapE"}
|
|
@@ -253,7 +253,7 @@ export function SgInputPassword(props) {
|
|
|
253
253
|
[data-sg-password]::-ms-clear {
|
|
254
254
|
display: none;
|
|
255
255
|
}
|
|
256
|
-
` }), _jsxs("div", { style: { width: rest.width ?? "100%" }, children: [_jsx(SgInputText, { ...rest, type: isHidden ? "password" : "text", maxLength: maxLength ?? 15, error: error ?? internalError ?? undefined, onClear: () => {
|
|
256
|
+
` }), _jsxs("div", { style: { width: rest.width ?? "100%" }, children: [_jsx(SgInputText, { ...rest, type: isHidden ? "password" : "text", maxLength: maxLength ?? 15, required: required, requiredMessage: requiredMessage, error: error ?? internalError ?? undefined, onClear: () => {
|
|
257
257
|
setInternalError(null);
|
|
258
258
|
onValidation?.(null);
|
|
259
259
|
onClear?.();
|
|
@@ -1,7 +1,9 @@
|
|
|
1
1
|
import React from "react";
|
|
2
2
|
import { type SgInputTextProps } from "./SgInputText";
|
|
3
3
|
export type SgInputPhoneProps = Omit<SgInputTextProps, "inputProps" | "error"> & {
|
|
4
|
-
inputProps?: React.InputHTMLAttributes<HTMLInputElement
|
|
4
|
+
inputProps?: React.InputHTMLAttributes<HTMLInputElement> & {
|
|
5
|
+
ref?: React.Ref<HTMLInputElement>;
|
|
6
|
+
};
|
|
5
7
|
error?: string;
|
|
6
8
|
required?: boolean;
|
|
7
9
|
requiredMessage?: string;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SgInputPhone.d.ts","sourceRoot":"","sources":["../../src/inputs/SgInputPhone.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAe,KAAK,gBAAgB,EAAE,MAAM,eAAe,CAAC;
|
|
1
|
+
{"version":3,"file":"SgInputPhone.d.ts","sourceRoot":"","sources":["../../src/inputs/SgInputPhone.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAe,KAAK,gBAAgB,EAAE,MAAM,eAAe,CAAC;AAKnE,MAAM,MAAM,iBAAiB,GAAG,IAAI,CAAC,gBAAgB,EAAE,YAAY,GAAG,OAAO,CAAC,GAAG;IAC/E,UAAU,CAAC,EAAE,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,GAAG;QACzD,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,gBAAgB,CAAC,CAAC;KACnC,CAAC;IACF,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,GAAG,IAAI,CAAC;IAC9C,YAAY,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IAChD,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B,CAAC;AAMF,wBAAgB,YAAY,CAAC,KAAK,EAAE,QAAQ,CAAC,iBAAiB,CAAC,2CAiF9D"}
|
|
@@ -2,6 +2,7 @@
|
|
|
2
2
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
3
3
|
import React from "react";
|
|
4
4
|
import { SgInputText } from "./SgInputText";
|
|
5
|
+
import { resolveFieldError } from "../rhf";
|
|
5
6
|
import { maskPhone } from "../masks";
|
|
6
7
|
import { t, useComponentsI18n } from "../i18n";
|
|
7
8
|
function onlyDigits(value) {
|
|
@@ -58,7 +59,7 @@ export function SgInputPhone(props) {
|
|
|
58
59
|
inputProps?.onBlur?.(event);
|
|
59
60
|
}
|
|
60
61
|
};
|
|
61
|
-
return (_jsx(SgInputText, { ...rest, error: error
|
|
62
|
+
return (_jsx(SgInputText, { ...rest, error: resolveFieldError(error, internalError ?? undefined), textInputType: props.textInputType ?? "numeric", onClear: () => {
|
|
62
63
|
setInternalError(null);
|
|
63
64
|
props.onValidation?.(null);
|
|
64
65
|
onClear?.();
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SgInputPostalCode.d.ts","sourceRoot":"","sources":["../../src/inputs/SgInputPostalCode.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAe,KAAK,gBAAgB,EAAE,MAAM,eAAe,CAAC;
|
|
1
|
+
{"version":3,"file":"SgInputPostalCode.d.ts","sourceRoot":"","sources":["../../src/inputs/SgInputPostalCode.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAe,KAAK,gBAAgB,EAAE,MAAM,eAAe,CAAC;AAanE,MAAM,MAAM,iBAAiB,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAE/E,MAAM,MAAM,cAAc,GAAG;IAC3B,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,OAAO,CAAC;CAChB,CAAC;AA8EF,MAAM,MAAM,sBAAsB,GAAG,IAAI,CAAC,gBAAgB,EAAE,YAAY,GAAG,OAAO,CAAC,GAAG;IACpF,UAAU,CAAC,EAAE,CAAC,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,GAAG;QAC1D,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,gBAAgB,CAAC,CAAC;KACnC,CAAC,CAAC;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,iBAAiB,CAAC;IAC5B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,GAAG,IAAI,CAAC;IAC9C,YAAY,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IAChD,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,WAAW,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,OAAO,CAAC,cAAc,CAAC,CAAC;IACvD,cAAc,CAAC,EAAE,CAAC,IAAI,EAAE,cAAc,KAAK,IAAI,CAAC;IAChD,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;CAC1C,CAAC;AAcF,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,QAAQ,CAAC,sBAAsB,CAAC,2CA8IxE"}
|
|
@@ -2,6 +2,7 @@
|
|
|
2
2
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
3
3
|
import React from "react";
|
|
4
4
|
import { SgInputText } from "./SgInputText";
|
|
5
|
+
import { resolveFieldError } from "../rhf";
|
|
5
6
|
import { maskPostalCodeBR, maskPostalCodePT, maskPostalCodeUS, maskPostalCodeES, maskPostalCodeUY, maskPostalCodeAR, maskPostalCodePY } from "../masks";
|
|
6
7
|
import { t, useComponentsI18n } from "../i18n";
|
|
7
8
|
const COUNTRY_CONFIGS = {
|
|
@@ -183,7 +184,7 @@ export function SgInputPostalCode(props) {
|
|
|
183
184
|
inputProps?.onBlur?.(event);
|
|
184
185
|
}
|
|
185
186
|
};
|
|
186
|
-
return (_jsx(SgInputText, { ...rest, maxLength: rest.maxLength ?? config.maxLength, error: error
|
|
187
|
+
return (_jsx(SgInputText, { ...rest, maxLength: rest.maxLength ?? config.maxLength, error: resolveFieldError(error, internalError ?? undefined), textInputType: props.textInputType ?? (config.inputMode === "numeric" ? "numeric" : undefined), onClear: () => {
|
|
187
188
|
setInternalError(null);
|
|
188
189
|
props.onValidation?.(null);
|
|
189
190
|
onClear?.();
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import React from "react";
|
|
2
|
-
import type
|
|
2
|
+
import { type RhfFieldProps } from "../rhf";
|
|
3
3
|
export type SgInputSelectProps = {
|
|
4
4
|
id: string;
|
|
5
5
|
label: string;
|
|
@@ -9,7 +9,9 @@ export type SgInputSelectProps = {
|
|
|
9
9
|
value: string;
|
|
10
10
|
label: string;
|
|
11
11
|
}>;
|
|
12
|
-
selectProps: React.SelectHTMLAttributes<HTMLSelectElement
|
|
12
|
+
selectProps: React.SelectHTMLAttributes<HTMLSelectElement> & {
|
|
13
|
+
ref?: React.Ref<HTMLSelectElement>;
|
|
14
|
+
};
|
|
13
15
|
alwaysFloat?: boolean;
|
|
14
16
|
} & RhfFieldProps;
|
|
15
17
|
export declare function SgInputSelect(props: SgInputSelectProps): import("react/jsx-runtime").JSX.Element;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SgInputSelect.d.ts","sourceRoot":"","sources":["../../src/inputs/SgInputSelect.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,KAAK,
|
|
1
|
+
{"version":3,"file":"SgInputSelect.d.ts","sourceRoot":"","sources":["../../src/inputs/SgInputSelect.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAqB,KAAK,aAAa,EAAE,MAAM,QAAQ,CAAC;AAG/D,MAAM,MAAM,kBAAkB,GAAG;IAC/B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,EAAE,KAAK,CAAC;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IACjD,WAAW,EAAE,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,GAAG;QAC3D,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;KACpC,CAAC;IACF,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB,GAAG,aAAa,CAAC;AA4KlB,wBAAgB,aAAa,CAAC,KAAK,EAAE,kBAAkB,2CAmDtD"}
|
|
@@ -2,11 +2,29 @@
|
|
|
2
2
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
3
|
import React from "react";
|
|
4
4
|
import { Controller } from "react-hook-form";
|
|
5
|
+
import { resolveFieldError } from "../rhf";
|
|
6
|
+
import { t, useComponentsI18n } from "../i18n";
|
|
5
7
|
function ErrorText(props) {
|
|
6
8
|
if (!props.message)
|
|
7
9
|
return null;
|
|
8
10
|
return _jsx("p", { "data-sg-error": true, className: "text-xs text-red-600", children: props.message });
|
|
9
11
|
}
|
|
12
|
+
function mergeSelectRefs(primary, secondary) {
|
|
13
|
+
return (node) => {
|
|
14
|
+
if (typeof primary === "function") {
|
|
15
|
+
primary(node);
|
|
16
|
+
}
|
|
17
|
+
else if (primary && typeof primary === "object" && "current" in primary) {
|
|
18
|
+
primary.current = node;
|
|
19
|
+
}
|
|
20
|
+
if (typeof secondary === "function") {
|
|
21
|
+
secondary(node);
|
|
22
|
+
}
|
|
23
|
+
else if (secondary && typeof secondary === "object" && "current" in secondary) {
|
|
24
|
+
secondary.current = node;
|
|
25
|
+
}
|
|
26
|
+
};
|
|
27
|
+
}
|
|
10
28
|
function mergeSelectPropsWithField(selectProps, field) {
|
|
11
29
|
const resolvedValue = typeof field.value === "string" || typeof field.value === "number" || Array.isArray(field.value)
|
|
12
30
|
? field.value
|
|
@@ -39,6 +57,7 @@ function mergeSelectPropsWithField(selectProps, field) {
|
|
|
39
57
|
};
|
|
40
58
|
}
|
|
41
59
|
function SgInputSelectBase(props) {
|
|
60
|
+
const i18n = useComponentsI18n();
|
|
42
61
|
const selectRef = React.useRef(null);
|
|
43
62
|
const [isFilled, setIsFilled] = React.useState(() => {
|
|
44
63
|
const value = props.selectProps.value ?? props.selectProps.defaultValue ?? "";
|
|
@@ -85,7 +104,7 @@ function SgInputSelectBase(props) {
|
|
|
85
104
|
? "border border-[hsl(var(--destructive))] focus:border-[hsl(var(--destructive))] focus:ring-2 focus:ring-[hsl(var(--destructive)/0.25)]"
|
|
86
105
|
: "border border-border focus:border-[hsl(var(--primary))] focus:ring-2 focus:ring-[hsl(var(--primary)/0.25)]";
|
|
87
106
|
const resolvedClassName = props.className ?? [baseClass, borderClass].join(" ");
|
|
88
|
-
return (_jsxs("select", { id: props.id, className: resolvedClassName, ...props.selectProps, ref: setRefs, onChange: handleChange, onBlur: handleBlur, children: [_jsx("option", { value: "", children: "
|
|
107
|
+
return (_jsxs("select", { id: props.id, className: resolvedClassName, ...props.selectProps, ref: setRefs, onChange: handleChange, onBlur: handleBlur, children: [_jsx("option", { value: "", children: t(i18n, "components.inputs.select.placeholder") }), props.options.map((opt) => (_jsx("option", { value: opt.value, children: opt.label }, opt.value)))] }));
|
|
89
108
|
})(), alwaysFloat ? (_jsx("label", { htmlFor: props.id, className: "sr-only", children: props.label })) : (_jsx("label", { htmlFor: props.id, className: [
|
|
90
109
|
"absolute left-3 bg-[var(--sg-input-bg,hsl(var(--background)))] px-1 transition-all",
|
|
91
110
|
isFilled ? "-top-2 text-xs" : "top-3 text-sm",
|
|
@@ -96,9 +115,25 @@ function SgInputSelectBase(props) {
|
|
|
96
115
|
].join(" "), children: props.label }))] }), _jsx(ErrorText, { message: props.error })] }));
|
|
97
116
|
}
|
|
98
117
|
export function SgInputSelect(props) {
|
|
99
|
-
const { control, name, ...rest } = props;
|
|
118
|
+
const { control, name, register, rules, ...rest } = props;
|
|
119
|
+
if (name && register) {
|
|
120
|
+
const reg = register(name, rules);
|
|
121
|
+
return (_jsx(SgInputSelectBase, { ...rest, selectProps: {
|
|
122
|
+
...rest.selectProps,
|
|
123
|
+
name,
|
|
124
|
+
onChange: (event) => {
|
|
125
|
+
reg.onChange(event);
|
|
126
|
+
rest.selectProps?.onChange?.(event);
|
|
127
|
+
},
|
|
128
|
+
onBlur: (event) => {
|
|
129
|
+
reg.onBlur(event);
|
|
130
|
+
rest.selectProps?.onBlur?.(event);
|
|
131
|
+
},
|
|
132
|
+
ref: mergeSelectRefs(reg.ref, rest.selectProps?.ref)
|
|
133
|
+
} }));
|
|
134
|
+
}
|
|
100
135
|
if (control && name) {
|
|
101
|
-
return (_jsx(Controller, { name: name, control: control, render: ({ field, fieldState }) => (_jsx(SgInputSelectBase, { ...rest, error: rest.error
|
|
136
|
+
return (_jsx(Controller, { name: name, control: control, rules: rules, render: ({ field, fieldState }) => (_jsx(SgInputSelectBase, { ...rest, error: resolveFieldError(rest.error, fieldState.error?.message), selectProps: mergeSelectPropsWithField(rest.selectProps, field) })) }));
|
|
102
137
|
}
|
|
103
138
|
return _jsx(SgInputSelectBase, { ...rest });
|
|
104
139
|
}
|
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
import React from "react";
|
|
2
|
-
import
|
|
3
|
-
|
|
4
|
-
export type SgInputTextProps = {
|
|
2
|
+
import { type RhfFieldProps } from "../rhf";
|
|
3
|
+
export type SgInputTextProps = RhfFieldProps & {
|
|
5
4
|
id: string;
|
|
6
5
|
label?: string;
|
|
7
6
|
labelText?: string;
|
|
@@ -12,7 +11,6 @@ export type SgInputTextProps = {
|
|
|
12
11
|
hintText?: string;
|
|
13
12
|
prefixText?: string;
|
|
14
13
|
suffixText?: string;
|
|
15
|
-
error?: string;
|
|
16
14
|
type?: React.HTMLInputTypeAttribute;
|
|
17
15
|
placeholder?: string;
|
|
18
16
|
className?: string;
|
|
@@ -46,8 +44,6 @@ export type SgInputTextProps = {
|
|
|
46
44
|
validation?: (value: string) => string | null;
|
|
47
45
|
validateOnBlur?: boolean;
|
|
48
46
|
onValidation?: (message: string | null) => void;
|
|
49
|
-
|
|
50
|
-
rules?: RegisterOptions<FieldValues>;
|
|
51
|
-
} & RhfFieldProps;
|
|
47
|
+
};
|
|
52
48
|
export declare function SgInputText(props: SgInputTextProps): import("react/jsx-runtime").JSX.Element;
|
|
53
49
|
//# sourceMappingURL=SgInputText.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SgInputText.d.ts","sourceRoot":"","sources":["../../src/inputs/SgInputText.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"SgInputText.d.ts","sourceRoot":"","sources":["../../src/inputs/SgInputText.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,EAAwC,KAAK,aAAa,EAAE,MAAM,QAAQ,CAAC;AAGlF,MAAM,MAAM,gBAAgB,GAAG,aAAa,GAAG;IAC7C,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,aAAa,CAAC,EAAE,OAAO,GAAG,KAAK,GAAG,MAAM,CAAC;IACzC,UAAU,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC7B,UAAU,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAC;IACxC,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IACxC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,IAAI,CAAC,EAAE,KAAK,CAAC,sBAAsB,CAAC;IACpC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,UAAU,CAAC,EAAE,CAAC,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,GAAG;QAC1D,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,gBAAgB,CAAC,CAAC;KACnC,CAAC,CAAC;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,uBAAuB,CAAC,EAAE,MAAM,CAAC;IACjC,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC7B,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,aAAa,CAAC,EAAE,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,CAAC,WAAW,CAAC,CAAC;IACzE,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC/B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,EAAE,CAAC;IAChC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,GAAG,IAAI,CAAC;IAC9C,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,YAAY,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;CACjD,CAAC;AAyeF,wBAAgB,WAAW,CAAC,KAAK,EAAE,gBAAgB,2CAsElD"}
|
|
@@ -3,6 +3,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
|
|
|
3
3
|
import React from "react";
|
|
4
4
|
import { X } from "lucide-react";
|
|
5
5
|
import { Controller } from "react-hook-form";
|
|
6
|
+
import { mergeRequiredRule, resolveFieldError } from "../rhf";
|
|
6
7
|
import { t, useComponentsI18n } from "../i18n";
|
|
7
8
|
function ErrorText(props) {
|
|
8
9
|
if (!props.message)
|
|
@@ -346,9 +347,11 @@ function SgInputTextBase(props) {
|
|
|
346
347
|
return (_jsxs("div", { style: { width: props.width ?? "100%" }, children: [showExternalLabel ? (_jsxs("label", { htmlFor: props.id, className: externalLabelClass, children: [_jsx("span", { children: labelText }), props.required ? (_jsx("span", { className: "ml-1 text-[hsl(var(--destructive))]", "aria-hidden": "true", children: "*" })) : null] })) : null, _jsx("div", { className: showExternalLabel ? "mt-1" : undefined, children: fieldNode })] }));
|
|
347
348
|
}
|
|
348
349
|
export function SgInputText(props) {
|
|
350
|
+
const i18n = useComponentsI18n();
|
|
349
351
|
const { control, name, register, rules, ...rest } = props;
|
|
352
|
+
const resolvedRules = mergeRequiredRule(rules, rest.required, rest.requiredMessage ?? t(i18n, "components.inputs.required"));
|
|
350
353
|
if (name && register) {
|
|
351
|
-
const reg = register(name,
|
|
354
|
+
const reg = register(name, resolvedRules);
|
|
352
355
|
return (_jsx(SgInputTextBase, { ...rest, inputProps: {
|
|
353
356
|
...rest.inputProps,
|
|
354
357
|
name,
|
|
@@ -383,7 +386,7 @@ export function SgInputText(props) {
|
|
|
383
386
|
return "";
|
|
384
387
|
return `${prefixText}${raw}${suffixText}`;
|
|
385
388
|
};
|
|
386
|
-
return (_jsx(Controller, { name: name, control: control, render: ({ field, fieldState }) => (_jsx(SgInputTextBase, { ...rest, error: rest.error
|
|
389
|
+
return (_jsx(Controller, { name: name, control: control, rules: resolvedRules, render: ({ field, fieldState }) => (_jsx(SgInputTextBase, { ...rest, error: resolveFieldError(rest.error, fieldState.error?.message), inputProps: mergeInputPropsWithField(rest.inputProps, field, { normalizeValue, toFieldValue }) })) }));
|
|
387
390
|
}
|
|
388
391
|
return _jsx(SgInputTextBase, { ...rest });
|
|
389
392
|
}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import React from "react";
|
|
2
|
-
import type
|
|
2
|
+
import { type RhfFieldProps } from "../rhf";
|
|
3
3
|
export type SgInputTextAreaProps = {
|
|
4
4
|
id: string;
|
|
5
5
|
label?: string;
|
|
@@ -12,7 +12,9 @@ export type SgInputTextAreaProps = {
|
|
|
12
12
|
error?: string;
|
|
13
13
|
className?: string;
|
|
14
14
|
labelClassName?: string;
|
|
15
|
-
textareaProps?: React.TextareaHTMLAttributes<HTMLTextAreaElement
|
|
15
|
+
textareaProps?: React.TextareaHTMLAttributes<HTMLTextAreaElement> & {
|
|
16
|
+
ref?: React.Ref<HTMLTextAreaElement>;
|
|
17
|
+
};
|
|
16
18
|
maxLength?: number;
|
|
17
19
|
maxLengthMessage?: string;
|
|
18
20
|
maxLines?: number;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SgInputTextArea.d.ts","sourceRoot":"","sources":["../../src/inputs/SgInputTextArea.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,KAAK,
|
|
1
|
+
{"version":3,"file":"SgInputTextArea.d.ts","sourceRoot":"","sources":["../../src/inputs/SgInputTextArea.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,EAAwC,KAAK,aAAa,EAAE,MAAM,QAAQ,CAAC;AAGlF,MAAM,MAAM,oBAAoB,GAAG;IACjC,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,aAAa,CAAC,EAAE,OAAO,GAAG,KAAK,GAAG,MAAM,CAAC;IACzC,UAAU,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC7B,UAAU,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAC;IACxC,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IACxC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,aAAa,CAAC,EAAE,KAAK,CAAC,sBAAsB,CAAC,mBAAmB,CAAC,GAAG;QAClE,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,mBAAmB,CAAC,CAAC;KACtC,CAAC;IACF,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,uBAAuB,CAAC,EAAE,MAAM,CAAC;IACjC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC7B,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC/B,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,GAAG,IAAI,CAAC;IAC9C,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,YAAY,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;CACjD,GAAG,aAAa,CAAC;AA0WlB,wBAAgB,eAAe,CAAC,KAAK,EAAE,QAAQ,CAAC,oBAAoB,CAAC,2CAyDpE"}
|
|
@@ -3,12 +3,29 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
|
|
|
3
3
|
import React from "react";
|
|
4
4
|
import { X } from "lucide-react";
|
|
5
5
|
import { Controller } from "react-hook-form";
|
|
6
|
+
import { mergeRequiredRule, resolveFieldError } from "../rhf";
|
|
6
7
|
import { t, useComponentsI18n } from "../i18n";
|
|
7
8
|
function ErrorText(props) {
|
|
8
9
|
if (!props.message)
|
|
9
10
|
return null;
|
|
10
11
|
return _jsx("p", { className: "text-xs text-red-600", children: props.message });
|
|
11
12
|
}
|
|
13
|
+
function mergeTextareaRefs(primary, secondary) {
|
|
14
|
+
return (node) => {
|
|
15
|
+
if (typeof primary === "function") {
|
|
16
|
+
primary(node);
|
|
17
|
+
}
|
|
18
|
+
else if (primary && typeof primary === "object" && "current" in primary) {
|
|
19
|
+
primary.current = node;
|
|
20
|
+
}
|
|
21
|
+
if (typeof secondary === "function") {
|
|
22
|
+
secondary(node);
|
|
23
|
+
}
|
|
24
|
+
else if (secondary && typeof secondary === "object" && "current" in secondary) {
|
|
25
|
+
secondary.current = node;
|
|
26
|
+
}
|
|
27
|
+
};
|
|
28
|
+
}
|
|
12
29
|
function mergeTextareaPropsWithField(textareaProps, field) {
|
|
13
30
|
const resolvedValue = typeof field.value === "string" ? field.value : field.value == null ? "" : String(field.value);
|
|
14
31
|
return {
|
|
@@ -244,9 +261,27 @@ function SgInputTextAreaBase(props) {
|
|
|
244
261
|
return (_jsxs("div", { style: { width: props.width ?? "100%" }, children: [showExternalLabel ? (_jsx("label", { htmlFor: props.id, className: externalLabelClass, children: labelText })) : null, _jsx("div", { className: showExternalLabel ? "mt-1" : undefined, children: fieldNode })] }));
|
|
245
262
|
}
|
|
246
263
|
export function SgInputTextArea(props) {
|
|
247
|
-
const
|
|
264
|
+
const i18n = useComponentsI18n();
|
|
265
|
+
const { control, name, register, rules, ...rest } = props;
|
|
266
|
+
const resolvedRules = mergeRequiredRule(rules, rest.required, rest.requiredMessage ?? t(i18n, "components.inputs.textarea.required"));
|
|
267
|
+
if (name && register) {
|
|
268
|
+
const reg = register(name, resolvedRules);
|
|
269
|
+
return (_jsx(SgInputTextAreaBase, { ...rest, textareaProps: {
|
|
270
|
+
...rest.textareaProps,
|
|
271
|
+
name,
|
|
272
|
+
onChange: (event) => {
|
|
273
|
+
reg.onChange(event);
|
|
274
|
+
rest.textareaProps?.onChange?.(event);
|
|
275
|
+
},
|
|
276
|
+
onBlur: (event) => {
|
|
277
|
+
reg.onBlur(event);
|
|
278
|
+
rest.textareaProps?.onBlur?.(event);
|
|
279
|
+
},
|
|
280
|
+
ref: mergeTextareaRefs(reg.ref, rest.textareaProps?.ref)
|
|
281
|
+
} }));
|
|
282
|
+
}
|
|
248
283
|
if (control && name) {
|
|
249
|
-
return (_jsx(Controller, { name: name, control: control, render: ({ field, fieldState }) => (_jsx(SgInputTextAreaBase, { ...rest, error: rest.error
|
|
284
|
+
return (_jsx(Controller, { name: name, control: control, rules: resolvedRules, render: ({ field, fieldState }) => (_jsx(SgInputTextAreaBase, { ...rest, error: resolveFieldError(rest.error, fieldState.error?.message), textareaProps: mergeTextareaPropsWithField(rest.textareaProps, field) })) }));
|
|
250
285
|
}
|
|
251
286
|
return _jsx(SgInputTextAreaBase, { ...rest });
|
|
252
287
|
}
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import React from "react";
|
|
2
|
+
import { type RhfFieldProps } from "../rhf";
|
|
2
3
|
import { type SgGroupBoxProps } from "../layout/SgGroupBox";
|
|
3
4
|
export interface SgOrderListItem {
|
|
4
5
|
label: string;
|
|
@@ -20,7 +21,8 @@ export type SgOrderListRef = {
|
|
|
20
21
|
moveBottom: () => void;
|
|
21
22
|
clearSelection: () => void;
|
|
22
23
|
};
|
|
23
|
-
export interface SgOrderListProps {
|
|
24
|
+
export interface SgOrderListProps extends RhfFieldProps {
|
|
25
|
+
error?: string;
|
|
24
26
|
id?: string;
|
|
25
27
|
title?: string;
|
|
26
28
|
source: SgOrderListItem[];
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SgOrderList.d.ts","sourceRoot":"","sources":["../../src/inputs/SgOrderList.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"SgOrderList.d.ts","sourceRoot":"","sources":["../../src/inputs/SgOrderList.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAqB,KAAK,aAAa,EAAE,MAAM,QAAQ,CAAC;AAE/D,OAAO,EAAc,KAAK,eAAe,EAAE,MAAM,sBAAsB,CAAC;AAGxE,MAAM,WAAW,eAAe;IAC9B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,IAAI,CAAC,EAAE,OAAO,CAAC;CAChB;AAED,MAAM,MAAM,wBAAwB,GAAG,QAAQ,GAAG,UAAU,CAAC;AAC7D,MAAM,MAAM,2BAA2B,GAAG,MAAM,GAAG,OAAO,CAAC;AAE3D,MAAM,MAAM,cAAc,GAAG;IAC3B,QAAQ,EAAE,MAAM,eAAe,EAAE,CAAC;IAClC,QAAQ,EAAE,CAAC,KAAK,EAAE,eAAe,EAAE,KAAK,IAAI,CAAC;IAC7C,YAAY,EAAE,MAAM,CAAC,MAAM,GAAG,MAAM,CAAC,EAAE,CAAC;IACxC,YAAY,EAAE,CAAC,MAAM,EAAE,CAAC,MAAM,GAAG,MAAM,CAAC,EAAE,KAAK,IAAI,CAAC;IACpD,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,UAAU,EAAE,MAAM,IAAI,CAAC;IACvB,cAAc,EAAE,MAAM,IAAI,CAAC;CAC5B,CAAC;AAEF,MAAM,WAAW,gBAAiB,SAAQ,aAAa;IACrD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,eAAe,EAAE,CAAC;IAC1B,KAAK,CAAC,EAAE,eAAe,EAAE,CAAC;IAC1B,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,eAAe,EAAE,KAAK,IAAI,CAAC;IAC9C,cAAc,CAAC,EAAE,CAAC,MAAM,GAAG,MAAM,CAAC,EAAE,CAAC;IACrC,iBAAiB,CAAC,EAAE,CAAC,MAAM,EAAE,CAAC,MAAM,GAAG,MAAM,CAAC,EAAE,KAAK,IAAI,CAAC;IAC1D,aAAa,CAAC,EAAE,wBAAwB,CAAC;IACzC,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,gBAAgB,CAAC,EAAE,2BAA2B,CAAC;IAC/C,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,YAAY,CAAC,EAAE,CACb,IAAI,EAAE,eAAe,EACrB,KAAK,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,QAAQ,EAAE,OAAO,CAAC;QAAC,QAAQ,EAAE,OAAO,CAAA;KAAE,KAC3D,KAAK,CAAC,SAAS,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,aAAa,CAAC,EAAE,IAAI,CAAC,OAAO,CAAC,eAAe,CAAC,EAAE,UAAU,GAAG,OAAO,CAAC,GAAG;QAAE,KAAK,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;CAC3F;AAohBD,eAAO,MAAM,WAAW,yFA4BtB,CAAC"}
|