@algolia/satellite 1.6.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/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 +1 -1
- 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 +58 -55
- package/dist/cjs/Fields/Form/stories/MultiStep.js +474 -468
- 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/Indicators/Skeleton/Skeleton.d.ts +7 -0
- package/dist/cjs/Indicators/Skeleton/Skeleton.js +12 -5
- 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/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 +2 -2
- 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 +59 -56
- package/dist/esm/Fields/Form/stories/MultiStep.js +475 -469
- 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/Indicators/Skeleton/Skeleton.d.ts +7 -0
- package/dist/esm/Indicators/Skeleton/Skeleton.js +12 -5
- 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 +2 -1
@@ -1,3 +1,4 @@
|
|
1
|
+
export { Accordion as ExperimentalAccordion } from "./Accordion/Accordion";
|
1
2
|
export * from "./Button/Button";
|
2
3
|
export * from "./ButtonGroup/ButtonGroup";
|
3
4
|
export * from "./ButtonLink/ButtonLink";
|
@@ -5,5 +6,4 @@ export * from "./IconButton/IconButton";
|
|
5
6
|
export * from "./IconButtonLink/IconButtonLink";
|
6
7
|
export * from "./Switch";
|
7
8
|
export * from "./ToggleButton/ToggleButton";
|
8
|
-
export * from "./ToggleGroup/ToggleGroup";
|
9
|
-
export {};
|
9
|
+
export * from "./ToggleGroup/ToggleGroup";
|
@@ -7,7 +7,7 @@ import { AlertCircleIcon } from "../../Icons";
|
|
7
7
|
import stl from "../../styles/helpers/satellitePrefixer";
|
8
8
|
import { uniqueId } from "../../utils";
|
9
9
|
import { getTextFromReactNode } from "../../utils/getTextFromReactNode";
|
10
|
-
import {
|
10
|
+
import { useForm } from "../Form/useForm";
|
11
11
|
import { DEFAULT_FIELD_STATE, FieldContext } from "./FieldContext";
|
12
12
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
13
13
|
/**
|
@@ -55,7 +55,7 @@ export var Field = function Field(_ref) {
|
|
55
55
|
console.warn("The `required` prop is set to different values on both the Field (`required=".concat(requiredProp, "`) and the underlying input component (`required=").concat(requiredContext, "`)."));
|
56
56
|
}
|
57
57
|
}
|
58
|
-
var form =
|
58
|
+
var form = useForm();
|
59
59
|
var addField = form === null || form === void 0 ? void 0 : form.addField;
|
60
60
|
var removeField = form === null || form === void 0 ? void 0 : form.removeField;
|
61
61
|
useEffect(function () {
|
@@ -1,16 +1,18 @@
|
|
1
1
|
import type { FC, HTMLAttributes, ReactNode, VFC } from "react";
|
2
2
|
import type { ButtonProps } from "../../Actions";
|
3
3
|
import type { AlertProps } from "../../Indicators";
|
4
|
-
import type {
|
5
|
-
export interface
|
4
|
+
import type { FormContextField } from "./FormContext";
|
5
|
+
export interface FormProps extends HTMLAttributes<HTMLFormElement> {
|
6
6
|
}
|
7
|
-
export declare type
|
8
|
-
|
7
|
+
export declare type FormLocale = {
|
8
|
+
errorTitle?: (invalidFields: FormContextField[], extraErrors?: string[]) => ReactNode;
|
9
|
+
errorText?: (invalidFields: FormContextField[], extraErrors?: string[]) => ReactNode;
|
9
10
|
};
|
10
|
-
export interface
|
11
|
-
locale?:
|
11
|
+
export interface FormErrorMessageProps extends Omit<AlertProps, "children"> {
|
12
|
+
locale?: FormLocale;
|
13
|
+
extraErrors?: string[];
|
12
14
|
}
|
13
|
-
export declare const
|
14
|
-
export declare const
|
15
|
-
export declare const
|
16
|
-
export declare const
|
15
|
+
export declare const FormErrorMessage: VFC<FormErrorMessageProps>;
|
16
|
+
export declare const Form: FC<FormProps>;
|
17
|
+
export declare const FormSubmit: FC<ButtonProps>;
|
18
|
+
export declare const FormReset: FC<ButtonProps>;
|
@@ -3,61 +3,72 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
|
|
3
3
|
import _defineProperty from "@babel/runtime/helpers/defineProperty";
|
4
4
|
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
|
5
5
|
import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
|
6
|
-
var _excluded = ["className", "locale"],
|
6
|
+
var _excluded = ["className", "extraErrors", "locale"],
|
7
7
|
_excluded2 = ["children"],
|
8
8
|
_excluded3 = ["children"],
|
9
9
|
_excluded4 = ["children"];
|
10
|
-
var _templateObject, _templateObject2, _templateObject3, _templateObject4
|
10
|
+
var _templateObject, _templateObject2, _templateObject3, _templateObject4;
|
11
11
|
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
|
12
12
|
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); }
|
13
13
|
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; }
|
14
14
|
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) { _defineProperty(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; }
|
15
15
|
import cx from "clsx";
|
16
|
+
import isEmpty from "lodash/isEmpty";
|
16
17
|
import { useCallback, useState } from "react";
|
17
18
|
import { Button } from "../../Actions";
|
18
19
|
import { XOctagonIcon } from "../../Icons";
|
19
20
|
import { Alert } from "../../Indicators";
|
20
21
|
import { useLocale } from "../../Satellite";
|
21
22
|
import stl from "../../styles/helpers/satellitePrefixer";
|
22
|
-
import {
|
23
|
-
import {
|
24
|
-
import {
|
23
|
+
import { FormContext } from "./FormContext";
|
24
|
+
import { useForm } from "./useForm";
|
25
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
25
26
|
var DEFAULT_ERROR_MESSAGE_LOCALE = {
|
26
|
-
|
27
|
+
errorTitle: function errorTitle(invalidFields, extraErrors) {
|
28
|
+
var _extraErrors$length;
|
29
|
+
if (isEmpty(invalidFields) && (extraErrors === null || extraErrors === void 0 ? void 0 : extraErrors.length) === 1) return extraErrors[0];
|
30
|
+
var errorCount = invalidFields.length + ((_extraErrors$length = extraErrors === null || extraErrors === void 0 ? void 0 : extraErrors.length) !== null && _extraErrors$length !== void 0 ? _extraErrors$length : 0);
|
31
|
+
return "There ".concat(errorCount > 1 ? "are" : "is", " ").concat(errorCount, " error").concat(errorCount > 1 ? "s" : "", " below.");
|
32
|
+
},
|
33
|
+
errorText: function errorText(invalidFields, extraErrors) {
|
27
34
|
var firstInvalidField = invalidFields[0];
|
28
|
-
|
29
|
-
|
30
|
-
|
31
|
-
|
32
|
-
|
33
|
-
|
34
|
-
|
35
|
-
|
36
|
-
|
37
|
-
|
38
|
-
|
39
|
-
|
40
|
-
|
41
|
-
|
42
|
-
|
43
|
-
|
44
|
-
|
45
|
-
|
46
|
-
|
47
|
-
|
48
|
-
|
49
|
-
|
35
|
+
var focusInvalidFieldLink = /*#__PURE__*/_jsx("a", {
|
36
|
+
href: "#",
|
37
|
+
className: stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["text-black underline hover:text-grey-800"]))),
|
38
|
+
onClick: function onClick(e) {
|
39
|
+
e.preventDefault();
|
40
|
+
var label = document.querySelector("label[for=\"".concat(firstInvalidField.labelFor, "\"]"));
|
41
|
+
label === null || label === void 0 || label.scrollIntoView({
|
42
|
+
behavior: "smooth",
|
43
|
+
block: "start"
|
44
|
+
});
|
45
|
+
label === null || label === void 0 || label.focus({
|
46
|
+
preventScroll: true
|
47
|
+
});
|
48
|
+
},
|
49
|
+
children: "Focus first invalid field."
|
50
|
+
});
|
51
|
+
if (!isEmpty(invalidFields) && isEmpty(extraErrors)) return focusInvalidFieldLink;
|
52
|
+
return /*#__PURE__*/_jsxs("ul", {
|
53
|
+
className: stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["list-disc"]))),
|
54
|
+
children: [extraErrors && extraErrors.length > 1 && extraErrors.map(function (items, index) {
|
55
|
+
return /*#__PURE__*/_jsx("li", {
|
56
|
+
children: items
|
57
|
+
}, index + "-error");
|
58
|
+
}), invalidFields.length > 0 && /*#__PURE__*/_jsxs("li", {
|
59
|
+
children: ["There ", invalidFields.length > 1 ? "are" : "is", " ", invalidFields.length, " invalid field", invalidFields.length > 1 ? "s" : "", ". ", focusInvalidFieldLink]
|
50
60
|
})]
|
51
61
|
});
|
52
62
|
}
|
53
63
|
};
|
54
|
-
export var
|
64
|
+
export var FormErrorMessage = function FormErrorMessage(_ref) {
|
55
65
|
var className = _ref.className,
|
66
|
+
extraErrors = _ref.extraErrors,
|
56
67
|
propsLocale = _ref.locale,
|
57
68
|
props = _objectWithoutProperties(_ref, _excluded);
|
58
69
|
var contextLocale = useLocale("form");
|
59
70
|
var locale = _objectSpread(_objectSpread(_objectSpread({}, DEFAULT_ERROR_MESSAGE_LOCALE), contextLocale), propsLocale);
|
60
|
-
var form =
|
71
|
+
var form = useForm();
|
61
72
|
if (!form) return null;
|
62
73
|
var invalidFields = Object.entries(form.fields).filter(function (_ref2) {
|
63
74
|
var _ref3 = _slicedToArray(_ref2, 2),
|
@@ -70,19 +81,20 @@ export var ExperimentalFormErrorMessage = function ExperimentalFormErrorMessage(
|
|
70
81
|
value = _ref5[1];
|
71
82
|
return value;
|
72
83
|
});
|
73
|
-
return invalidFields
|
84
|
+
return isEmpty(invalidFields) && isEmpty(extraErrors) ? null : /*#__PURE__*/_jsx(Alert, _objectSpread(_objectSpread({
|
74
85
|
variant: "red",
|
75
|
-
icon: XOctagonIcon
|
86
|
+
icon: XOctagonIcon,
|
87
|
+
title: locale.errorTitle(invalidFields, extraErrors)
|
76
88
|
}, props), {}, {
|
77
|
-
className: cx(stl(
|
89
|
+
className: cx(stl(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["w-full"]))), className),
|
78
90
|
children: /*#__PURE__*/_jsx("span", {
|
79
91
|
"aria-live": "assertive",
|
80
|
-
className: stl(
|
81
|
-
children: locale.errorText(invalidFields)
|
92
|
+
className: stl(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["whitespace-break-spaces"]))),
|
93
|
+
children: locale.errorText(invalidFields, extraErrors)
|
82
94
|
})
|
83
|
-
}))
|
95
|
+
}));
|
84
96
|
};
|
85
|
-
export var
|
97
|
+
export var Form = function Form(_ref6) {
|
86
98
|
var children = _ref6.children,
|
87
99
|
props = _objectWithoutProperties(_ref6, _excluded2);
|
88
100
|
var _useState = useState({}),
|
@@ -102,7 +114,7 @@ export var ExperimentalForm = function ExperimentalForm(_ref6) {
|
|
102
114
|
return rest;
|
103
115
|
});
|
104
116
|
}, []);
|
105
|
-
return /*#__PURE__*/_jsx(
|
117
|
+
return /*#__PURE__*/_jsx(FormContext.Provider, {
|
106
118
|
value: {
|
107
119
|
fields: fields,
|
108
120
|
addField: addField,
|
@@ -115,7 +127,7 @@ export var ExperimentalForm = function ExperimentalForm(_ref6) {
|
|
115
127
|
}))
|
116
128
|
});
|
117
129
|
};
|
118
|
-
export var
|
130
|
+
export var FormSubmit = function FormSubmit(_ref7) {
|
119
131
|
var children = _ref7.children,
|
120
132
|
props = _objectWithoutProperties(_ref7, _excluded3);
|
121
133
|
return /*#__PURE__*/_jsx(Button, _objectSpread(_objectSpread({}, props), {}, {
|
@@ -123,7 +135,7 @@ export var ExperimentalFormSubmit = function ExperimentalFormSubmit(_ref7) {
|
|
123
135
|
children: children
|
124
136
|
}));
|
125
137
|
};
|
126
|
-
export var
|
138
|
+
export var FormReset = function FormReset(_ref8) {
|
127
139
|
var children = _ref8.children,
|
128
140
|
props = _objectWithoutProperties(_ref8, _excluded4);
|
129
141
|
return /*#__PURE__*/_jsx(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>;
|
@@ -1,2 +1,2 @@
|
|
1
1
|
import { createContext } from "react";
|
2
|
-
export var
|
2
|
+
export var FormContext = /*#__PURE__*/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";
|
@@ -1,3 +1,2 @@
|
|
1
|
-
export
|
2
|
-
export
|
3
|
-
export {};
|
1
|
+
export { Form as ExperimentalForm, FormErrorMessage as ExperimentalFormErrorMessage, FormSubmit as ExperimentalFormSubmit, FormReset as ExperimentalFormReset } from "./Form";
|
2
|
+
export { useForm as useExperimentalForm } from "./useForm";
|
@@ -2,7 +2,7 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
|
|
2
2
|
import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
|
3
3
|
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
|
4
4
|
import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
|
5
|
-
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14;
|
5
|
+
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16;
|
6
6
|
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; }
|
7
7
|
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) { _defineProperty(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; }
|
8
8
|
import _regeneratorRuntime from "@babel/runtime/regenerator";
|
@@ -15,7 +15,7 @@ import { z } from "zod";
|
|
15
15
|
import stl from "../../../styles/helpers/satellitePrefixer";
|
16
16
|
import { Field } from "../../Field";
|
17
17
|
import { Input } from "../../Input";
|
18
|
-
import {
|
18
|
+
import { Form, FormErrorMessage, FormReset, FormSubmit } from "../Form";
|
19
19
|
import { useFormikAutoFocusOnError } from "./utils/useFormikAutoFocusOnError";
|
20
20
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
21
21
|
var initialFormData = {
|
@@ -142,6 +142,10 @@ export var RHFAsyncValidationComponent = function RHFAsyncValidationComponent()
|
|
142
142
|
_useState2 = _slicedToArray(_useState, 2),
|
143
143
|
formData = _useState2[0],
|
144
144
|
setFormData = _useState2[1];
|
145
|
+
var _useState3 = useState([]),
|
146
|
+
_useState4 = _slicedToArray(_useState3, 2),
|
147
|
+
extraErrors = _useState4[0],
|
148
|
+
setExtraErrors = _useState4[1];
|
145
149
|
var _useForm = useForm({
|
146
150
|
defaultValues: initialFormData,
|
147
151
|
reValidateMode: "onChange",
|
@@ -170,74 +174,82 @@ export var RHFAsyncValidationComponent = function RHFAsyncValidationComponent()
|
|
170
174
|
};
|
171
175
|
}
|
172
176
|
};
|
173
|
-
return /*#__PURE__*/
|
174
|
-
className: stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["
|
175
|
-
children:
|
176
|
-
|
177
|
-
|
178
|
-
|
179
|
-
|
180
|
-
|
181
|
-
|
182
|
-
className: stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["flex flex-col items-start gap-6 min-w-72"]))),
|
183
|
-
children: [/*#__PURE__*/_jsx(ExperimentalFormErrorMessage, {}), /*#__PURE__*/_jsx(Controller, {
|
184
|
-
name: "username",
|
185
|
-
control: control,
|
186
|
-
render: function render(_ref5) {
|
187
|
-
var field = _ref5.field;
|
188
|
-
return /*#__PURE__*/_jsx(Field, {
|
189
|
-
label: "Username",
|
190
|
-
labelFor: "username",
|
191
|
-
description: "Please enter your username",
|
192
|
-
state: getFieldState("username"),
|
193
|
-
className: stl(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["w-full"]))),
|
194
|
-
children: /*#__PURE__*/_jsx(Input, _objectSpread({
|
195
|
-
id: "username",
|
196
|
-
placeholder: "Username",
|
197
|
-
required: true
|
198
|
-
}, field))
|
199
|
-
});
|
200
|
-
}
|
201
|
-
}), /*#__PURE__*/_jsx(Controller, {
|
202
|
-
name: "password",
|
203
|
-
control: control,
|
204
|
-
render: function render(_ref6) {
|
205
|
-
var field = _ref6.field;
|
206
|
-
return /*#__PURE__*/_jsx(Field, {
|
207
|
-
label: "Password",
|
208
|
-
labelFor: "password",
|
209
|
-
description: "Please enter your password",
|
210
|
-
state: getFieldState("password"),
|
211
|
-
className: stl(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["w-full"]))),
|
212
|
-
children: /*#__PURE__*/_jsx(Input, _objectSpread({
|
213
|
-
id: "password",
|
214
|
-
placeholder: "Password",
|
215
|
-
type: "password",
|
216
|
-
required: true
|
217
|
-
}, field))
|
177
|
+
return /*#__PURE__*/_jsx("div", {
|
178
|
+
className: stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["@container w-full flex justify-center"]))),
|
179
|
+
children: /*#__PURE__*/_jsxs("div", {
|
180
|
+
className: stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["flex flex-col gap-8 w-full @lg:w-1/2"]))),
|
181
|
+
children: [/*#__PURE__*/_jsxs(Form, {
|
182
|
+
onSubmit: handleSubmit(function (data) {
|
183
|
+
setFormData(data);
|
184
|
+
setExtraErrors(function (previousErrors) {
|
185
|
+
return previousErrors.concat("first error", "2nd error");
|
218
186
|
});
|
219
|
-
}
|
220
|
-
|
221
|
-
|
222
|
-
|
223
|
-
|
224
|
-
|
225
|
-
|
226
|
-
|
227
|
-
|
228
|
-
|
229
|
-
|
230
|
-
|
231
|
-
|
232
|
-
|
187
|
+
}),
|
188
|
+
onReset: function onReset() {
|
189
|
+
return setFormData(initialFormData);
|
190
|
+
},
|
191
|
+
className: stl(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["flex flex-col items-start gap-6 min-w-72"]))),
|
192
|
+
children: [/*#__PURE__*/_jsx(FormErrorMessage, {
|
193
|
+
extraErrors: extraErrors
|
194
|
+
}), /*#__PURE__*/_jsx(Controller, {
|
195
|
+
name: "username",
|
196
|
+
control: control,
|
197
|
+
render: function render(_ref5) {
|
198
|
+
var field = _ref5.field;
|
199
|
+
return /*#__PURE__*/_jsx(Field, {
|
200
|
+
label: "Username",
|
201
|
+
labelFor: "username",
|
202
|
+
description: "Please enter your username",
|
203
|
+
state: getFieldState("username"),
|
204
|
+
className: stl(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["w-full"]))),
|
205
|
+
children: /*#__PURE__*/_jsx(Input, _objectSpread({
|
206
|
+
id: "username",
|
207
|
+
placeholder: "Username",
|
208
|
+
required: true
|
209
|
+
}, field))
|
210
|
+
});
|
211
|
+
}
|
212
|
+
}), /*#__PURE__*/_jsx(Controller, {
|
213
|
+
name: "password",
|
214
|
+
control: control,
|
215
|
+
render: function render(_ref6) {
|
216
|
+
var field = _ref6.field;
|
217
|
+
return /*#__PURE__*/_jsx(Field, {
|
218
|
+
label: "Password",
|
219
|
+
labelFor: "password",
|
220
|
+
description: "Please enter your password",
|
221
|
+
state: getFieldState("password"),
|
222
|
+
className: stl(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["w-full"]))),
|
223
|
+
children: /*#__PURE__*/_jsx(Input, _objectSpread({
|
224
|
+
id: "password",
|
225
|
+
placeholder: "Password",
|
226
|
+
type: "password",
|
227
|
+
required: true
|
228
|
+
}, field))
|
229
|
+
});
|
230
|
+
}
|
231
|
+
}), /*#__PURE__*/_jsxs("div", {
|
232
|
+
className: stl(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["flex gap-2"]))),
|
233
|
+
children: [/*#__PURE__*/_jsx(FormSubmit, {
|
234
|
+
variant: "primary",
|
235
|
+
"aria-label": "Login to the website",
|
236
|
+
loading: formState.isSubmitting,
|
237
|
+
children: "Login"
|
238
|
+
}), /*#__PURE__*/_jsx(FormReset, {
|
239
|
+
"aria-label": "Reset the form",
|
240
|
+
onClick: function onClick() {
|
241
|
+
return reset();
|
242
|
+
},
|
243
|
+
children: "Reset"
|
244
|
+
})]
|
233
245
|
})]
|
246
|
+
}), /*#__PURE__*/_jsx("hr", {
|
247
|
+
className: stl(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["text-grey-500"])))
|
248
|
+
}), /*#__PURE__*/_jsx("code", {
|
249
|
+
className: stl(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["whitespace-pre display-code"]))),
|
250
|
+
children: JSON.stringify(formData, null, 2)
|
234
251
|
})]
|
235
|
-
})
|
236
|
-
className: stl(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["text-grey-500"])))
|
237
|
-
}), /*#__PURE__*/_jsx("code", {
|
238
|
-
className: stl(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["whitespace-pre display-code"]))),
|
239
|
-
children: JSON.stringify(formData, null, 2)
|
240
|
-
})]
|
252
|
+
})
|
241
253
|
});
|
242
254
|
};
|
243
255
|
var yupSchema = yup.object({
|
@@ -288,14 +300,14 @@ var yupSchema = yup.object({
|
|
288
300
|
})
|
289
301
|
});
|
290
302
|
export var FormikAsyncValidationComponent = function FormikAsyncValidationComponent() {
|
291
|
-
var
|
292
|
-
_useState4 = _slicedToArray(_useState3, 2),
|
293
|
-
formData = _useState4[0],
|
294
|
-
setFormData = _useState4[1];
|
295
|
-
var _useState5 = useState(false),
|
303
|
+
var _useState5 = useState(initialFormData),
|
296
304
|
_useState6 = _slicedToArray(_useState5, 2),
|
297
|
-
|
298
|
-
|
305
|
+
formData = _useState6[0],
|
306
|
+
setFormData = _useState6[1];
|
307
|
+
var _useState7 = useState(false),
|
308
|
+
_useState8 = _slicedToArray(_useState7, 2),
|
309
|
+
revalidationEnabled = _useState8[0],
|
310
|
+
setRevalidationEnabled = _useState8[1];
|
299
311
|
var formik = useFormik({
|
300
312
|
initialValues: initialFormData,
|
301
313
|
validateOnChange: revalidationEnabled,
|
@@ -326,61 +338,64 @@ export var FormikAsyncValidationComponent = function FormikAsyncValidationCompon
|
|
326
338
|
}
|
327
339
|
};
|
328
340
|
useFormikAutoFocusOnError(formik);
|
329
|
-
return /*#__PURE__*/
|
330
|
-
className: stl(
|
331
|
-
children:
|
332
|
-
|
333
|
-
|
334
|
-
|
335
|
-
|
336
|
-
|
337
|
-
|
338
|
-
|
339
|
-
|
340
|
-
|
341
|
-
|
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
|
-
|
341
|
+
return /*#__PURE__*/_jsx("div", {
|
342
|
+
className: stl(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["@container w-full flex justify-center"]))),
|
343
|
+
children: /*#__PURE__*/_jsxs("div", {
|
344
|
+
className: stl(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["flex flex-col gap-8 w-full @lg:w-1/2"]))),
|
345
|
+
children: [/*#__PURE__*/_jsxs(Form, {
|
346
|
+
onSubmit: function onSubmit(e) {
|
347
|
+
setRevalidationEnabled(true);
|
348
|
+
formik.handleSubmit(e);
|
349
|
+
},
|
350
|
+
onReset: function onReset(e) {
|
351
|
+
setRevalidationEnabled(false);
|
352
|
+
formik.handleReset(e);
|
353
|
+
},
|
354
|
+
className: stl(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["flex flex-col items-start gap-6 min-w-72"]))),
|
355
|
+
children: [/*#__PURE__*/_jsx(FormErrorMessage, {}), /*#__PURE__*/_jsx(Field, {
|
356
|
+
label: "Username",
|
357
|
+
labelFor: "username",
|
358
|
+
description: "Please enter your username",
|
359
|
+
state: getFieldState("username"),
|
360
|
+
className: stl(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["w-full"]))),
|
361
|
+
children: /*#__PURE__*/_jsx(Input, _objectSpread({
|
362
|
+
id: "username",
|
363
|
+
placeholder: "Username",
|
364
|
+
required: true
|
365
|
+
}, formik.getFieldProps("username")))
|
366
|
+
}), /*#__PURE__*/_jsx(Field, {
|
367
|
+
label: "Password",
|
368
|
+
labelFor: "password",
|
369
|
+
description: "Please enter your password",
|
370
|
+
state: getFieldState("password"),
|
371
|
+
className: stl(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["w-full"]))),
|
372
|
+
children: /*#__PURE__*/_jsx(Input, _objectSpread({
|
373
|
+
id: "password",
|
374
|
+
placeholder: "Password",
|
375
|
+
type: "password",
|
376
|
+
required: true
|
377
|
+
}, formik.getFieldProps("password")))
|
378
|
+
}), /*#__PURE__*/_jsxs("div", {
|
379
|
+
className: stl(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["flex gap-2"]))),
|
380
|
+
children: [/*#__PURE__*/_jsx(FormSubmit, {
|
381
|
+
variant: "primary",
|
382
|
+
"aria-label": "Login to the website",
|
383
|
+
loading: formik.isValidating,
|
384
|
+
children: "Login"
|
385
|
+
}), /*#__PURE__*/_jsx(FormReset, {
|
386
|
+
"aria-label": "Reset the form",
|
387
|
+
onClick: function onClick() {
|
388
|
+
return formik.resetForm();
|
389
|
+
},
|
390
|
+
children: "Reset"
|
391
|
+
})]
|
377
392
|
})]
|
393
|
+
}), /*#__PURE__*/_jsx("hr", {
|
394
|
+
className: stl(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["text-grey-500"])))
|
395
|
+
}), /*#__PURE__*/_jsx("code", {
|
396
|
+
className: stl(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["whitespace-pre display-code"]))),
|
397
|
+
children: JSON.stringify(formData, null, 2)
|
378
398
|
})]
|
379
|
-
})
|
380
|
-
className: stl(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["text-grey-500"])))
|
381
|
-
}), /*#__PURE__*/_jsx("code", {
|
382
|
-
className: stl(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["whitespace-pre display-code"]))),
|
383
|
-
children: JSON.stringify(formData, null, 2)
|
384
|
-
})]
|
399
|
+
})
|
385
400
|
});
|
386
401
|
};
|