@algolia/satellite 1.5.0 → 1.7.0
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/cjs/Actions/Accordion/Accordion.d.ts +142 -0
- package/dist/cjs/Actions/Accordion/Accordion.js +149 -0
- package/dist/cjs/Actions/Accordion/Accordion.tailwind.d.ts +5 -0
- package/dist/cjs/Actions/Accordion/Accordion.tailwind.js +44 -0
- package/dist/cjs/Actions/Button/Button.tailwind.js +0 -12
- package/dist/cjs/Actions/ToggleGroup/ToggleGroup.d.ts +2 -2
- package/dist/cjs/Actions/index.d.ts +2 -0
- package/dist/cjs/Actions/index.js +18 -0
- package/dist/cjs/Fields/Field/Field.js +2 -2
- package/dist/cjs/Fields/Form/Form.d.ts +12 -10
- package/dist/cjs/Fields/Form/Form.js +50 -38
- package/dist/cjs/Fields/Form/FormContext.d.ts +6 -6
- package/dist/cjs/Fields/Form/FormContext.js +2 -2
- package/dist/cjs/Fields/Form/index.d.ts +4 -3
- package/dist/cjs/Fields/Form/index.js +31 -21
- package/dist/cjs/Fields/Form/stories/AsynchronousValidation.js +142 -127
- package/dist/cjs/Fields/Form/stories/Complex.js +648 -642
- package/dist/cjs/Fields/Form/stories/DependentFieldsValidation.js +127 -121
- package/dist/cjs/Fields/Form/stories/DirtyFields.js +195 -189
- package/dist/cjs/Fields/Form/stories/DynamicFieldsValidation.js +251 -245
- package/dist/cjs/Fields/Form/stories/ExtraErrors.js +289 -0
- package/dist/cjs/Fields/Form/stories/FieldArrays.js +180 -174
- package/dist/cjs/Fields/Form/stories/JSONForms.js +59 -56
- package/dist/cjs/Fields/Form/stories/MultiStep.js +706 -0
- package/dist/cjs/Fields/Form/stories/ValidationStrategies.js +243 -237
- package/dist/cjs/Fields/Form/useForm.d.ts +1 -1
- package/dist/cjs/Fields/Form/useForm.js +3 -3
- package/dist/cjs/Helpers/utilities/focusable.tailwind.js +1 -1
- package/dist/cjs/Icons/index.d.ts +1 -1
- package/dist/cjs/Icons/index.js +6 -0
- package/dist/cjs/Indicators/Skeleton/Skeleton.d.ts +7 -0
- package/dist/cjs/Indicators/Skeleton/Skeleton.js +12 -5
- package/dist/cjs/Indicators/index.d.ts +1 -0
- package/dist/cjs/Indicators/index.js +11 -0
- package/dist/cjs/Layout/Sidebar/SidebarButtonLink.js +1 -1
- package/dist/cjs/Layout/Sidebar/SidebarLink.js +2 -2
- package/dist/cjs/Layout/Sidebar/SidebarLinksGroup/SidebarGroupLink.js +1 -1
- package/dist/cjs/Layout/Sidebar/SidebarLinksGroup/SidebarLinksGroup.js +4 -5
- package/dist/cjs/Layout/Tables/DataTable/DataTable.d.ts +3 -1
- package/dist/cjs/Layout/Tables/DataTable/DataTable.js +3 -0
- package/dist/cjs/Layout/Tables/Table/Table.d.ts +2 -0
- package/dist/cjs/Layout/Tables/Table/Table.js +4 -2
- package/dist/cjs/Layout/Tables/Table/Table.tailwind.js +6 -1
- package/dist/cjs/Overlay/MenuButton/components/items/LinkItem.d.ts +1 -1
- package/dist/cjs/Overlay/MenuButton/components/items/ToggleItem.d.ts +1 -1
- package/dist/cjs/styles/tailwind.config.js +1 -1
- package/dist/cjs/utils/isCssPropertySupported.d.ts +1 -1
- package/dist/esm/Actions/Accordion/Accordion.d.ts +142 -0
- package/dist/esm/Actions/Accordion/Accordion.js +139 -0
- package/dist/esm/Actions/Accordion/Accordion.tailwind.d.ts +5 -0
- package/dist/esm/Actions/Accordion/Accordion.tailwind.js +43 -0
- package/dist/esm/Actions/Button/Button.tailwind.js +0 -12
- package/dist/esm/Actions/ToggleGroup/ToggleGroup.d.ts +2 -2
- package/dist/esm/Actions/index.d.ts +2 -0
- package/dist/esm/Actions/index.js +2 -2
- package/dist/esm/Fields/Field/Field.js +3 -3
- package/dist/esm/Fields/Form/Form.d.ts +12 -10
- package/dist/esm/Fields/Form/Form.js +52 -40
- package/dist/esm/Fields/Form/FormContext.d.ts +6 -6
- package/dist/esm/Fields/Form/FormContext.js +1 -1
- package/dist/esm/Fields/Form/index.d.ts +4 -3
- package/dist/esm/Fields/Form/index.js +2 -3
- package/dist/esm/Fields/Form/stories/AsynchronousValidation.js +143 -128
- package/dist/esm/Fields/Form/stories/Complex.js +649 -643
- package/dist/esm/Fields/Form/stories/DependentFieldsValidation.js +128 -122
- package/dist/esm/Fields/Form/stories/DirtyFields.js +196 -190
- package/dist/esm/Fields/Form/stories/DynamicFieldsValidation.js +252 -246
- package/dist/esm/Fields/Form/stories/ExtraErrors.js +279 -0
- package/dist/esm/Fields/Form/stories/FieldArrays.js +181 -175
- package/dist/esm/Fields/Form/stories/JSONForms.js +60 -57
- package/dist/esm/Fields/Form/stories/MultiStep.js +697 -0
- package/dist/esm/Fields/Form/stories/ValidationStrategies.js +244 -238
- package/dist/esm/Fields/Form/useForm.d.ts +1 -1
- package/dist/esm/Fields/Form/useForm.js +3 -3
- package/dist/esm/Helpers/utilities/focusable.tailwind.js +1 -1
- package/dist/esm/Icons/index.d.ts +1 -1
- package/dist/esm/Icons/index.js +1 -1
- package/dist/esm/Indicators/Skeleton/Skeleton.d.ts +7 -0
- package/dist/esm/Indicators/Skeleton/Skeleton.js +12 -5
- package/dist/esm/Indicators/index.d.ts +1 -0
- package/dist/esm/Indicators/index.js +2 -1
- package/dist/esm/Layout/Sidebar/SidebarButtonLink.js +1 -1
- package/dist/esm/Layout/Sidebar/SidebarLink.js +2 -2
- package/dist/esm/Layout/Sidebar/SidebarLinksGroup/SidebarGroupLink.js +1 -1
- package/dist/esm/Layout/Sidebar/SidebarLinksGroup/SidebarLinksGroup.js +4 -5
- package/dist/esm/Layout/Tables/DataTable/DataTable.d.ts +3 -1
- package/dist/esm/Layout/Tables/DataTable/DataTable.js +3 -0
- package/dist/esm/Layout/Tables/Table/Table.d.ts +2 -0
- package/dist/esm/Layout/Tables/Table/Table.js +4 -2
- package/dist/esm/Layout/Tables/Table/Table.tailwind.js +6 -1
- package/dist/esm/Overlay/MenuButton/components/items/LinkItem.d.ts +1 -1
- package/dist/esm/Overlay/MenuButton/components/items/ToggleItem.d.ts +1 -1
- package/dist/esm/styles/tailwind.config.js +1 -1
- package/dist/esm/utils/isCssPropertySupported.d.ts +1 -1
- package/dist/satellite.min.css +1 -1
- package/package.json +7 -1
@@ -5,12 +5,13 @@ var _typeof = require("@babel/runtime/helpers/typeof");
|
|
5
5
|
Object.defineProperty(exports, "__esModule", {
|
6
6
|
value: true
|
7
7
|
});
|
8
|
-
exports.
|
8
|
+
exports.FormSubmit = exports.FormReset = exports.FormErrorMessage = exports.Form = void 0;
|
9
9
|
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
|
10
10
|
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
11
11
|
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
|
12
12
|
var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
|
13
13
|
var _clsx = _interopRequireDefault(require("clsx"));
|
14
|
+
var _isEmpty = _interopRequireDefault(require("lodash/isEmpty"));
|
14
15
|
var _react = require("react");
|
15
16
|
var _Actions = require("../../Actions");
|
16
17
|
var _Icons = require("../../Icons");
|
@@ -20,51 +21,61 @@ var _satellitePrefixer = _interopRequireDefault(require("../../styles/helpers/sa
|
|
20
21
|
var _FormContext = require("./FormContext");
|
21
22
|
var _useForm = require("./useForm");
|
22
23
|
var _jsxRuntime = require("react/jsx-runtime");
|
23
|
-
var _excluded = ["className", "locale"],
|
24
|
+
var _excluded = ["className", "extraErrors", "locale"],
|
24
25
|
_excluded2 = ["children"],
|
25
26
|
_excluded3 = ["children"],
|
26
27
|
_excluded4 = ["children"];
|
27
|
-
var _templateObject, _templateObject2, _templateObject3, _templateObject4
|
28
|
+
var _templateObject, _templateObject2, _templateObject3, _templateObject4;
|
28
29
|
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
|
29
30
|
function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
|
30
31
|
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
31
32
|
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
32
33
|
var DEFAULT_ERROR_MESSAGE_LOCALE = {
|
33
|
-
|
34
|
+
errorTitle: function errorTitle(invalidFields, extraErrors) {
|
35
|
+
var _extraErrors$length;
|
36
|
+
if ((0, _isEmpty["default"])(invalidFields) && (extraErrors === null || extraErrors === void 0 ? void 0 : extraErrors.length) === 1) return extraErrors[0];
|
37
|
+
var errorCount = invalidFields.length + ((_extraErrors$length = extraErrors === null || extraErrors === void 0 ? void 0 : extraErrors.length) !== null && _extraErrors$length !== void 0 ? _extraErrors$length : 0);
|
38
|
+
return "There ".concat(errorCount > 1 ? "are" : "is", " ").concat(errorCount, " error").concat(errorCount > 1 ? "s" : "", " below.");
|
39
|
+
},
|
40
|
+
errorText: function errorText(invalidFields, extraErrors) {
|
34
41
|
var firstInvalidField = invalidFields[0];
|
35
|
-
|
36
|
-
|
37
|
-
|
38
|
-
|
39
|
-
|
40
|
-
|
41
|
-
|
42
|
-
|
43
|
-
|
44
|
-
|
45
|
-
|
46
|
-
|
47
|
-
|
48
|
-
|
49
|
-
|
50
|
-
|
51
|
-
|
52
|
-
|
53
|
-
|
54
|
-
|
55
|
-
|
56
|
-
|
42
|
+
var focusInvalidFieldLink = /*#__PURE__*/(0, _jsxRuntime.jsx)("a", {
|
43
|
+
href: "#",
|
44
|
+
className: (0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["text-black underline hover:text-grey-800"]))),
|
45
|
+
onClick: function onClick(e) {
|
46
|
+
e.preventDefault();
|
47
|
+
var label = document.querySelector("label[for=\"".concat(firstInvalidField.labelFor, "\"]"));
|
48
|
+
label === null || label === void 0 || label.scrollIntoView({
|
49
|
+
behavior: "smooth",
|
50
|
+
block: "start"
|
51
|
+
});
|
52
|
+
label === null || label === void 0 || label.focus({
|
53
|
+
preventScroll: true
|
54
|
+
});
|
55
|
+
},
|
56
|
+
children: "Focus first invalid field."
|
57
|
+
});
|
58
|
+
if (!(0, _isEmpty["default"])(invalidFields) && (0, _isEmpty["default"])(extraErrors)) return focusInvalidFieldLink;
|
59
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsxs)("ul", {
|
60
|
+
className: (0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["list-disc"]))),
|
61
|
+
children: [extraErrors && extraErrors.length > 1 && extraErrors.map(function (items, index) {
|
62
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsx)("li", {
|
63
|
+
children: items
|
64
|
+
}, index + "-error");
|
65
|
+
}), invalidFields.length > 0 && /*#__PURE__*/(0, _jsxRuntime.jsxs)("li", {
|
66
|
+
children: ["There ", invalidFields.length > 1 ? "are" : "is", " ", invalidFields.length, " invalid field", invalidFields.length > 1 ? "s" : "", ". ", focusInvalidFieldLink]
|
57
67
|
})]
|
58
68
|
});
|
59
69
|
}
|
60
70
|
};
|
61
|
-
var
|
71
|
+
var FormErrorMessage = exports.FormErrorMessage = function FormErrorMessage(_ref) {
|
62
72
|
var className = _ref.className,
|
73
|
+
extraErrors = _ref.extraErrors,
|
63
74
|
propsLocale = _ref.locale,
|
64
75
|
props = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
|
65
76
|
var contextLocale = (0, _Satellite.useLocale)("form");
|
66
77
|
var locale = _objectSpread(_objectSpread(_objectSpread({}, DEFAULT_ERROR_MESSAGE_LOCALE), contextLocale), propsLocale);
|
67
|
-
var form = (0, _useForm.
|
78
|
+
var form = (0, _useForm.useForm)();
|
68
79
|
if (!form) return null;
|
69
80
|
var invalidFields = Object.entries(form.fields).filter(function (_ref2) {
|
70
81
|
var _ref3 = (0, _slicedToArray2["default"])(_ref2, 2),
|
@@ -77,19 +88,20 @@ var ExperimentalFormErrorMessage = exports.ExperimentalFormErrorMessage = functi
|
|
77
88
|
value = _ref5[1];
|
78
89
|
return value;
|
79
90
|
});
|
80
|
-
return invalidFields
|
91
|
+
return (0, _isEmpty["default"])(invalidFields) && (0, _isEmpty["default"])(extraErrors) ? null : /*#__PURE__*/(0, _jsxRuntime.jsx)(_Indicators.Alert, _objectSpread(_objectSpread({
|
81
92
|
variant: "red",
|
82
|
-
icon: _Icons.XOctagonIcon
|
93
|
+
icon: _Icons.XOctagonIcon,
|
94
|
+
title: locale.errorTitle(invalidFields, extraErrors)
|
83
95
|
}, props), {}, {
|
84
|
-
className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(
|
96
|
+
className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))), className),
|
85
97
|
children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
|
86
98
|
"aria-live": "assertive",
|
87
|
-
className: (0, _satellitePrefixer["default"])(
|
88
|
-
children: locale.errorText(invalidFields)
|
99
|
+
className: (0, _satellitePrefixer["default"])(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["whitespace-break-spaces"]))),
|
100
|
+
children: locale.errorText(invalidFields, extraErrors)
|
89
101
|
})
|
90
|
-
}))
|
102
|
+
}));
|
91
103
|
};
|
92
|
-
var
|
104
|
+
var Form = exports.Form = function Form(_ref6) {
|
93
105
|
var children = _ref6.children,
|
94
106
|
props = (0, _objectWithoutProperties2["default"])(_ref6, _excluded2);
|
95
107
|
var _useState = (0, _react.useState)({}),
|
@@ -109,7 +121,7 @@ var ExperimentalForm = exports.ExperimentalForm = function ExperimentalForm(_ref
|
|
109
121
|
return rest;
|
110
122
|
});
|
111
123
|
}, []);
|
112
|
-
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_FormContext.
|
124
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_FormContext.FormContext.Provider, {
|
113
125
|
value: {
|
114
126
|
fields: fields,
|
115
127
|
addField: addField,
|
@@ -122,7 +134,7 @@ var ExperimentalForm = exports.ExperimentalForm = function ExperimentalForm(_ref
|
|
122
134
|
}))
|
123
135
|
});
|
124
136
|
};
|
125
|
-
var
|
137
|
+
var FormSubmit = exports.FormSubmit = function FormSubmit(_ref7) {
|
126
138
|
var children = _ref7.children,
|
127
139
|
props = (0, _objectWithoutProperties2["default"])(_ref7, _excluded3);
|
128
140
|
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Actions.Button, _objectSpread(_objectSpread({}, props), {}, {
|
@@ -130,7 +142,7 @@ var ExperimentalFormSubmit = exports.ExperimentalFormSubmit = function Experimen
|
|
130
142
|
children: children
|
131
143
|
}));
|
132
144
|
};
|
133
|
-
var
|
145
|
+
var FormReset = exports.FormReset = function FormReset(_ref8) {
|
134
146
|
var children = _ref8.children,
|
135
147
|
props = (0, _objectWithoutProperties2["default"])(_ref8, _excluded4);
|
136
148
|
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Actions.Button, _objectSpread(_objectSpread({}, props), {}, {
|
@@ -1,13 +1,13 @@
|
|
1
1
|
/// <reference types="react" />
|
2
2
|
import type { FieldState } from "../Field";
|
3
|
-
export declare type
|
3
|
+
export declare type FormContextField = {
|
4
4
|
state: FieldState;
|
5
5
|
label: string;
|
6
6
|
labelFor: string;
|
7
7
|
};
|
8
|
-
export declare type
|
9
|
-
fields: Record<string,
|
10
|
-
addField: (field:
|
11
|
-
removeField: (field:
|
8
|
+
export declare type FormContextValue = {
|
9
|
+
fields: Record<string, FormContextField>;
|
10
|
+
addField: (field: FormContextField) => void;
|
11
|
+
removeField: (field: FormContextField) => void;
|
12
12
|
};
|
13
|
-
export declare const
|
13
|
+
export declare const FormContext: import("react").Context<FormContextValue | null>;
|
@@ -3,6 +3,6 @@
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
4
4
|
value: true
|
5
5
|
});
|
6
|
-
exports.
|
6
|
+
exports.FormContext = void 0;
|
7
7
|
var _react = require("react");
|
8
|
-
var
|
8
|
+
var FormContext = exports.FormContext = /*#__PURE__*/(0, _react.createContext)(null);
|
@@ -1,3 +1,4 @@
|
|
1
|
-
export
|
2
|
-
export
|
3
|
-
export
|
1
|
+
export type { FormProps as ExperimentalFormProps, FormLocale as ExperimentalFormLocale, FormErrorMessageProps as ExperimentalFormErrorMessageProps, } from "./Form";
|
2
|
+
export { Form as ExperimentalForm, FormErrorMessage as ExperimentalFormErrorMessage, FormSubmit as ExperimentalFormSubmit, FormReset as ExperimentalFormReset, } from "./Form";
|
3
|
+
export type { FormContextField as ExperimentalFormContextField, FormContextValue as ExperimentalFormContextValue, } from "./FormContext";
|
4
|
+
export { useForm as useExperimentalForm } from "./useForm";
|
@@ -3,25 +3,35 @@
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
4
4
|
value: true
|
5
5
|
});
|
6
|
-
|
7
|
-
|
8
|
-
|
9
|
-
|
10
|
-
|
11
|
-
|
12
|
-
|
13
|
-
|
14
|
-
|
15
|
-
|
6
|
+
Object.defineProperty(exports, "ExperimentalForm", {
|
7
|
+
enumerable: true,
|
8
|
+
get: function get() {
|
9
|
+
return _Form.Form;
|
10
|
+
}
|
11
|
+
});
|
12
|
+
Object.defineProperty(exports, "ExperimentalFormErrorMessage", {
|
13
|
+
enumerable: true,
|
14
|
+
get: function get() {
|
15
|
+
return _Form.FormErrorMessage;
|
16
|
+
}
|
17
|
+
});
|
18
|
+
Object.defineProperty(exports, "ExperimentalFormReset", {
|
19
|
+
enumerable: true,
|
20
|
+
get: function get() {
|
21
|
+
return _Form.FormReset;
|
22
|
+
}
|
16
23
|
});
|
17
|
-
|
18
|
-
|
19
|
-
|
20
|
-
|
21
|
-
|
22
|
-
|
23
|
-
|
24
|
-
|
25
|
-
|
26
|
-
|
27
|
-
}
|
24
|
+
Object.defineProperty(exports, "ExperimentalFormSubmit", {
|
25
|
+
enumerable: true,
|
26
|
+
get: function get() {
|
27
|
+
return _Form.FormSubmit;
|
28
|
+
}
|
29
|
+
});
|
30
|
+
Object.defineProperty(exports, "useExperimentalForm", {
|
31
|
+
enumerable: true,
|
32
|
+
get: function get() {
|
33
|
+
return _useForm.useForm;
|
34
|
+
}
|
35
|
+
});
|
36
|
+
var _Form = require("./Form");
|
37
|
+
var _useForm = require("./useForm");
|
@@ -23,7 +23,7 @@ var _Input = require("../../Input");
|
|
23
23
|
var _Form = require("../Form");
|
24
24
|
var _useFormikAutoFocusOnError = require("./utils/useFormikAutoFocusOnError");
|
25
25
|
var _jsxRuntime = require("react/jsx-runtime");
|
26
|
-
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14;
|
26
|
+
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16;
|
27
27
|
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
|
28
28
|
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
|
29
29
|
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
@@ -152,6 +152,10 @@ var RHFAsyncValidationComponent = exports.RHFAsyncValidationComponent = function
|
|
152
152
|
_useState2 = (0, _slicedToArray2["default"])(_useState, 2),
|
153
153
|
formData = _useState2[0],
|
154
154
|
setFormData = _useState2[1];
|
155
|
+
var _useState3 = (0, _react.useState)([]),
|
156
|
+
_useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
|
157
|
+
extraErrors = _useState4[0],
|
158
|
+
setExtraErrors = _useState4[1];
|
155
159
|
var _useForm = (0, _reactHookForm.useForm)({
|
156
160
|
defaultValues: initialFormData,
|
157
161
|
reValidateMode: "onChange",
|
@@ -180,74 +184,82 @@ var RHFAsyncValidationComponent = exports.RHFAsyncValidationComponent = function
|
|
180
184
|
};
|
181
185
|
}
|
182
186
|
};
|
183
|
-
return /*#__PURE__*/(0, _jsxRuntime.
|
184
|
-
className: (0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["
|
185
|
-
children:
|
186
|
-
|
187
|
-
|
188
|
-
|
189
|
-
|
190
|
-
|
191
|
-
|
192
|
-
className: (0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["flex flex-col items-start gap-4 min-w-72"]))),
|
193
|
-
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Form.ExperimentalFormErrorMessage, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactHookForm.Controller, {
|
194
|
-
name: "username",
|
195
|
-
control: control,
|
196
|
-
render: function render(_ref5) {
|
197
|
-
var field = _ref5.field;
|
198
|
-
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Field.Field, {
|
199
|
-
label: "Username",
|
200
|
-
labelFor: "username",
|
201
|
-
description: "Please enter your username",
|
202
|
-
state: getFieldState("username"),
|
203
|
-
className: (0, _satellitePrefixer["default"])(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))),
|
204
|
-
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Input.Input, _objectSpread({
|
205
|
-
id: "username",
|
206
|
-
placeholder: "Username",
|
207
|
-
required: true
|
208
|
-
}, field))
|
209
|
-
});
|
210
|
-
}
|
211
|
-
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactHookForm.Controller, {
|
212
|
-
name: "password",
|
213
|
-
control: control,
|
214
|
-
render: function render(_ref6) {
|
215
|
-
var field = _ref6.field;
|
216
|
-
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Field.Field, {
|
217
|
-
label: "Password",
|
218
|
-
labelFor: "password",
|
219
|
-
description: "Please enter your password",
|
220
|
-
state: getFieldState("password"),
|
221
|
-
className: (0, _satellitePrefixer["default"])(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))),
|
222
|
-
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Input.Input, _objectSpread({
|
223
|
-
id: "password",
|
224
|
-
placeholder: "Password",
|
225
|
-
type: "password",
|
226
|
-
required: true
|
227
|
-
}, field))
|
187
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
|
188
|
+
className: (0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["@container w-full flex justify-center"]))),
|
189
|
+
children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
|
190
|
+
className: (0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["flex flex-col gap-8 w-full @lg:w-1/2"]))),
|
191
|
+
children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_Form.Form, {
|
192
|
+
onSubmit: handleSubmit(function (data) {
|
193
|
+
setFormData(data);
|
194
|
+
setExtraErrors(function (previousErrors) {
|
195
|
+
return previousErrors.concat("first error", "2nd error");
|
228
196
|
});
|
229
|
-
}
|
230
|
-
|
231
|
-
|
232
|
-
|
233
|
-
|
234
|
-
|
235
|
-
|
236
|
-
|
237
|
-
|
238
|
-
|
239
|
-
|
240
|
-
|
241
|
-
|
242
|
-
|
197
|
+
}),
|
198
|
+
onReset: function onReset() {
|
199
|
+
return setFormData(initialFormData);
|
200
|
+
},
|
201
|
+
className: (0, _satellitePrefixer["default"])(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["flex flex-col items-start gap-6 min-w-72"]))),
|
202
|
+
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Form.FormErrorMessage, {
|
203
|
+
extraErrors: extraErrors
|
204
|
+
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactHookForm.Controller, {
|
205
|
+
name: "username",
|
206
|
+
control: control,
|
207
|
+
render: function render(_ref5) {
|
208
|
+
var field = _ref5.field;
|
209
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Field.Field, {
|
210
|
+
label: "Username",
|
211
|
+
labelFor: "username",
|
212
|
+
description: "Please enter your username",
|
213
|
+
state: getFieldState("username"),
|
214
|
+
className: (0, _satellitePrefixer["default"])(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))),
|
215
|
+
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Input.Input, _objectSpread({
|
216
|
+
id: "username",
|
217
|
+
placeholder: "Username",
|
218
|
+
required: true
|
219
|
+
}, field))
|
220
|
+
});
|
221
|
+
}
|
222
|
+
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactHookForm.Controller, {
|
223
|
+
name: "password",
|
224
|
+
control: control,
|
225
|
+
render: function render(_ref6) {
|
226
|
+
var field = _ref6.field;
|
227
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Field.Field, {
|
228
|
+
label: "Password",
|
229
|
+
labelFor: "password",
|
230
|
+
description: "Please enter your password",
|
231
|
+
state: getFieldState("password"),
|
232
|
+
className: (0, _satellitePrefixer["default"])(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))),
|
233
|
+
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Input.Input, _objectSpread({
|
234
|
+
id: "password",
|
235
|
+
placeholder: "Password",
|
236
|
+
type: "password",
|
237
|
+
required: true
|
238
|
+
}, field))
|
239
|
+
});
|
240
|
+
}
|
241
|
+
}), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
|
242
|
+
className: (0, _satellitePrefixer["default"])(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["flex gap-2"]))),
|
243
|
+
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Form.FormSubmit, {
|
244
|
+
variant: "primary",
|
245
|
+
"aria-label": "Login to the website",
|
246
|
+
loading: formState.isSubmitting,
|
247
|
+
children: "Login"
|
248
|
+
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Form.FormReset, {
|
249
|
+
"aria-label": "Reset the form",
|
250
|
+
onClick: function onClick() {
|
251
|
+
return reset();
|
252
|
+
},
|
253
|
+
children: "Reset"
|
254
|
+
})]
|
243
255
|
})]
|
256
|
+
}), /*#__PURE__*/(0, _jsxRuntime.jsx)("hr", {
|
257
|
+
className: (0, _satellitePrefixer["default"])(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2["default"])(["text-grey-500"])))
|
258
|
+
}), /*#__PURE__*/(0, _jsxRuntime.jsx)("code", {
|
259
|
+
className: (0, _satellitePrefixer["default"])(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2["default"])(["whitespace-pre display-code"]))),
|
260
|
+
children: JSON.stringify(formData, null, 2)
|
244
261
|
})]
|
245
|
-
})
|
246
|
-
className: (0, _satellitePrefixer["default"])(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["text-grey-500"])))
|
247
|
-
}), /*#__PURE__*/(0, _jsxRuntime.jsx)("code", {
|
248
|
-
className: (0, _satellitePrefixer["default"])(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2["default"])(["whitespace-pre"]))),
|
249
|
-
children: JSON.stringify(formData, null, 2)
|
250
|
-
})]
|
262
|
+
})
|
251
263
|
});
|
252
264
|
};
|
253
265
|
var yupSchema = yup.object({
|
@@ -298,14 +310,14 @@ var yupSchema = yup.object({
|
|
298
310
|
})
|
299
311
|
});
|
300
312
|
var FormikAsyncValidationComponent = exports.FormikAsyncValidationComponent = function FormikAsyncValidationComponent() {
|
301
|
-
var
|
302
|
-
_useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
|
303
|
-
formData = _useState4[0],
|
304
|
-
setFormData = _useState4[1];
|
305
|
-
var _useState5 = (0, _react.useState)(false),
|
313
|
+
var _useState5 = (0, _react.useState)(initialFormData),
|
306
314
|
_useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
|
307
|
-
|
308
|
-
|
315
|
+
formData = _useState6[0],
|
316
|
+
setFormData = _useState6[1];
|
317
|
+
var _useState7 = (0, _react.useState)(false),
|
318
|
+
_useState8 = (0, _slicedToArray2["default"])(_useState7, 2),
|
319
|
+
revalidationEnabled = _useState8[0],
|
320
|
+
setRevalidationEnabled = _useState8[1];
|
309
321
|
var formik = (0, _formik.useFormik)({
|
310
322
|
initialValues: initialFormData,
|
311
323
|
validateOnChange: revalidationEnabled,
|
@@ -336,61 +348,64 @@ var FormikAsyncValidationComponent = exports.FormikAsyncValidationComponent = fu
|
|
336
348
|
}
|
337
349
|
};
|
338
350
|
(0, _useFormikAutoFocusOnError.useFormikAutoFocusOnError)(formik);
|
339
|
-
return /*#__PURE__*/(0, _jsxRuntime.
|
340
|
-
className: (0, _satellitePrefixer["default"])(
|
341
|
-
children:
|
342
|
-
|
343
|
-
|
344
|
-
|
345
|
-
|
346
|
-
|
347
|
-
|
348
|
-
|
349
|
-
|
350
|
-
|
351
|
-
|
352
|
-
|
353
|
-
|
354
|
-
|
355
|
-
|
356
|
-
|
357
|
-
|
358
|
-
|
359
|
-
|
360
|
-
|
361
|
-
|
362
|
-
|
363
|
-
|
364
|
-
|
365
|
-
|
366
|
-
|
367
|
-
|
368
|
-
|
369
|
-
|
370
|
-
|
371
|
-
|
372
|
-
|
373
|
-
|
374
|
-
|
375
|
-
|
376
|
-
|
377
|
-
|
378
|
-
|
379
|
-
|
380
|
-
|
381
|
-
|
382
|
-
|
383
|
-
|
384
|
-
|
385
|
-
|
386
|
-
|
351
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
|
352
|
+
className: (0, _satellitePrefixer["default"])(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2["default"])(["@container w-full flex justify-center"]))),
|
353
|
+
children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
|
354
|
+
className: (0, _satellitePrefixer["default"])(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2["default"])(["flex flex-col gap-8 w-full @lg:w-1/2"]))),
|
355
|
+
children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_Form.Form, {
|
356
|
+
onSubmit: function onSubmit(e) {
|
357
|
+
setRevalidationEnabled(true);
|
358
|
+
formik.handleSubmit(e);
|
359
|
+
},
|
360
|
+
onReset: function onReset(e) {
|
361
|
+
setRevalidationEnabled(false);
|
362
|
+
formik.handleReset(e);
|
363
|
+
},
|
364
|
+
className: (0, _satellitePrefixer["default"])(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2["default"])(["flex flex-col items-start gap-6 min-w-72"]))),
|
365
|
+
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Form.FormErrorMessage, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Field.Field, {
|
366
|
+
label: "Username",
|
367
|
+
labelFor: "username",
|
368
|
+
description: "Please enter your username",
|
369
|
+
state: getFieldState("username"),
|
370
|
+
className: (0, _satellitePrefixer["default"])(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))),
|
371
|
+
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Input.Input, _objectSpread({
|
372
|
+
id: "username",
|
373
|
+
placeholder: "Username",
|
374
|
+
required: true
|
375
|
+
}, formik.getFieldProps("username")))
|
376
|
+
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Field.Field, {
|
377
|
+
label: "Password",
|
378
|
+
labelFor: "password",
|
379
|
+
description: "Please enter your password",
|
380
|
+
state: getFieldState("password"),
|
381
|
+
className: (0, _satellitePrefixer["default"])(_templateObject13 || (_templateObject13 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))),
|
382
|
+
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Input.Input, _objectSpread({
|
383
|
+
id: "password",
|
384
|
+
placeholder: "Password",
|
385
|
+
type: "password",
|
386
|
+
required: true
|
387
|
+
}, formik.getFieldProps("password")))
|
388
|
+
}), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
|
389
|
+
className: (0, _satellitePrefixer["default"])(_templateObject14 || (_templateObject14 = (0, _taggedTemplateLiteral2["default"])(["flex gap-2"]))),
|
390
|
+
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Form.FormSubmit, {
|
391
|
+
variant: "primary",
|
392
|
+
"aria-label": "Login to the website",
|
393
|
+
loading: formik.isValidating,
|
394
|
+
children: "Login"
|
395
|
+
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Form.FormReset, {
|
396
|
+
"aria-label": "Reset the form",
|
397
|
+
onClick: function onClick() {
|
398
|
+
return formik.resetForm();
|
399
|
+
},
|
400
|
+
children: "Reset"
|
401
|
+
})]
|
387
402
|
})]
|
403
|
+
}), /*#__PURE__*/(0, _jsxRuntime.jsx)("hr", {
|
404
|
+
className: (0, _satellitePrefixer["default"])(_templateObject15 || (_templateObject15 = (0, _taggedTemplateLiteral2["default"])(["text-grey-500"])))
|
405
|
+
}), /*#__PURE__*/(0, _jsxRuntime.jsx)("code", {
|
406
|
+
className: (0, _satellitePrefixer["default"])(_templateObject16 || (_templateObject16 = (0, _taggedTemplateLiteral2["default"])(["whitespace-pre display-code"]))),
|
407
|
+
children: JSON.stringify(formData, null, 2)
|
388
408
|
})]
|
389
|
-
})
|
390
|
-
className: (0, _satellitePrefixer["default"])(_templateObject13 || (_templateObject13 = (0, _taggedTemplateLiteral2["default"])(["text-grey-500"])))
|
391
|
-
}), /*#__PURE__*/(0, _jsxRuntime.jsx)("code", {
|
392
|
-
className: (0, _satellitePrefixer["default"])(_templateObject14 || (_templateObject14 = (0, _taggedTemplateLiteral2["default"])(["whitespace-pre"]))),
|
393
|
-
children: JSON.stringify(formData, null, 2)
|
394
|
-
})]
|
409
|
+
})
|
395
410
|
});
|
396
411
|
};
|