@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.
Files changed (86) hide show
  1. package/dist/cjs/Actions/Accordion/Accordion.d.ts +142 -0
  2. package/dist/cjs/Actions/Accordion/Accordion.js +149 -0
  3. package/dist/cjs/Actions/Accordion/Accordion.tailwind.d.ts +5 -0
  4. package/dist/cjs/Actions/Accordion/Accordion.tailwind.js +44 -0
  5. package/dist/cjs/Actions/ToggleGroup/ToggleGroup.d.ts +2 -2
  6. package/dist/cjs/Actions/index.d.ts +2 -0
  7. package/dist/cjs/Actions/index.js +18 -0
  8. package/dist/cjs/Fields/Field/Field.js +1 -1
  9. package/dist/cjs/Fields/Form/Form.d.ts +12 -10
  10. package/dist/cjs/Fields/Form/Form.js +50 -38
  11. package/dist/cjs/Fields/Form/FormContext.d.ts +6 -6
  12. package/dist/cjs/Fields/Form/FormContext.js +2 -2
  13. package/dist/cjs/Fields/Form/index.d.ts +4 -3
  14. package/dist/cjs/Fields/Form/index.js +31 -21
  15. package/dist/cjs/Fields/Form/stories/AsynchronousValidation.js +142 -127
  16. package/dist/cjs/Fields/Form/stories/Complex.js +648 -642
  17. package/dist/cjs/Fields/Form/stories/DependentFieldsValidation.js +127 -121
  18. package/dist/cjs/Fields/Form/stories/DirtyFields.js +195 -189
  19. package/dist/cjs/Fields/Form/stories/DynamicFieldsValidation.js +251 -245
  20. package/dist/cjs/Fields/Form/stories/ExtraErrors.js +289 -0
  21. package/dist/cjs/Fields/Form/stories/FieldArrays.js +180 -174
  22. package/dist/cjs/Fields/Form/stories/JSONForms.js +58 -55
  23. package/dist/cjs/Fields/Form/stories/MultiStep.js +474 -468
  24. package/dist/cjs/Fields/Form/stories/ValidationStrategies.js +243 -237
  25. package/dist/cjs/Fields/Form/useForm.d.ts +1 -1
  26. package/dist/cjs/Fields/Form/useForm.js +3 -3
  27. package/dist/cjs/Helpers/utilities/focusable.tailwind.js +1 -1
  28. package/dist/cjs/Indicators/Skeleton/Skeleton.d.ts +7 -0
  29. package/dist/cjs/Indicators/Skeleton/Skeleton.js +12 -5
  30. package/dist/cjs/Layout/Sidebar/SidebarButtonLink.js +1 -1
  31. package/dist/cjs/Layout/Sidebar/SidebarLink.js +2 -2
  32. package/dist/cjs/Layout/Sidebar/SidebarLinksGroup/SidebarGroupLink.js +1 -1
  33. package/dist/cjs/Layout/Sidebar/SidebarLinksGroup/SidebarLinksGroup.js +4 -5
  34. package/dist/cjs/Layout/Tables/DataTable/DataTable.d.ts +3 -1
  35. package/dist/cjs/Layout/Tables/DataTable/DataTable.js +3 -0
  36. package/dist/cjs/Layout/Tables/Table/Table.d.ts +2 -0
  37. package/dist/cjs/Layout/Tables/Table/Table.js +4 -2
  38. package/dist/cjs/Layout/Tables/Table/Table.tailwind.js +6 -1
  39. package/dist/cjs/Overlay/MenuButton/components/items/LinkItem.d.ts +1 -1
  40. package/dist/cjs/Overlay/MenuButton/components/items/ToggleItem.d.ts +1 -1
  41. package/dist/cjs/styles/tailwind.config.js +1 -1
  42. package/dist/cjs/utils/isCssPropertySupported.d.ts +1 -1
  43. package/dist/esm/Actions/Accordion/Accordion.d.ts +142 -0
  44. package/dist/esm/Actions/Accordion/Accordion.js +139 -0
  45. package/dist/esm/Actions/Accordion/Accordion.tailwind.d.ts +5 -0
  46. package/dist/esm/Actions/Accordion/Accordion.tailwind.js +43 -0
  47. package/dist/esm/Actions/ToggleGroup/ToggleGroup.d.ts +2 -2
  48. package/dist/esm/Actions/index.d.ts +2 -0
  49. package/dist/esm/Actions/index.js +2 -2
  50. package/dist/esm/Fields/Field/Field.js +2 -2
  51. package/dist/esm/Fields/Form/Form.d.ts +12 -10
  52. package/dist/esm/Fields/Form/Form.js +52 -40
  53. package/dist/esm/Fields/Form/FormContext.d.ts +6 -6
  54. package/dist/esm/Fields/Form/FormContext.js +1 -1
  55. package/dist/esm/Fields/Form/index.d.ts +4 -3
  56. package/dist/esm/Fields/Form/index.js +2 -3
  57. package/dist/esm/Fields/Form/stories/AsynchronousValidation.js +143 -128
  58. package/dist/esm/Fields/Form/stories/Complex.js +649 -643
  59. package/dist/esm/Fields/Form/stories/DependentFieldsValidation.js +128 -122
  60. package/dist/esm/Fields/Form/stories/DirtyFields.js +196 -190
  61. package/dist/esm/Fields/Form/stories/DynamicFieldsValidation.js +252 -246
  62. package/dist/esm/Fields/Form/stories/ExtraErrors.js +279 -0
  63. package/dist/esm/Fields/Form/stories/FieldArrays.js +181 -175
  64. package/dist/esm/Fields/Form/stories/JSONForms.js +59 -56
  65. package/dist/esm/Fields/Form/stories/MultiStep.js +475 -469
  66. package/dist/esm/Fields/Form/stories/ValidationStrategies.js +244 -238
  67. package/dist/esm/Fields/Form/useForm.d.ts +1 -1
  68. package/dist/esm/Fields/Form/useForm.js +3 -3
  69. package/dist/esm/Helpers/utilities/focusable.tailwind.js +1 -1
  70. package/dist/esm/Indicators/Skeleton/Skeleton.d.ts +7 -0
  71. package/dist/esm/Indicators/Skeleton/Skeleton.js +12 -5
  72. package/dist/esm/Layout/Sidebar/SidebarButtonLink.js +1 -1
  73. package/dist/esm/Layout/Sidebar/SidebarLink.js +2 -2
  74. package/dist/esm/Layout/Sidebar/SidebarLinksGroup/SidebarGroupLink.js +1 -1
  75. package/dist/esm/Layout/Sidebar/SidebarLinksGroup/SidebarLinksGroup.js +4 -5
  76. package/dist/esm/Layout/Tables/DataTable/DataTable.d.ts +3 -1
  77. package/dist/esm/Layout/Tables/DataTable/DataTable.js +3 -0
  78. package/dist/esm/Layout/Tables/Table/Table.d.ts +2 -0
  79. package/dist/esm/Layout/Tables/Table/Table.js +4 -2
  80. package/dist/esm/Layout/Tables/Table/Table.tailwind.js +6 -1
  81. package/dist/esm/Overlay/MenuButton/components/items/LinkItem.d.ts +1 -1
  82. package/dist/esm/Overlay/MenuButton/components/items/ToggleItem.d.ts +1 -1
  83. package/dist/esm/styles/tailwind.config.js +1 -1
  84. package/dist/esm/utils/isCssPropertySupported.d.ts +1 -1
  85. package/dist/satellite.min.css +1 -1
  86. 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 { useExperimentalForm } from "../Form/useForm";
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 = useExperimentalForm();
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 { ExperimentalFormContextField } from "./FormContext";
5
- export interface ExperimentalFormProps extends HTMLAttributes<HTMLFormElement> {
4
+ import type { FormContextField } from "./FormContext";
5
+ export interface FormProps extends HTMLAttributes<HTMLFormElement> {
6
6
  }
7
- export declare type ExperimentalFormLocale = {
8
- errorText?: (invalidFields: ExperimentalFormContextField[]) => ReactNode;
7
+ export declare type FormLocale = {
8
+ errorTitle?: (invalidFields: FormContextField[], extraErrors?: string[]) => ReactNode;
9
+ errorText?: (invalidFields: FormContextField[], extraErrors?: string[]) => ReactNode;
9
10
  };
10
- export interface ExperimentalFormErrorMessageProps extends Omit<AlertProps, "children"> {
11
- locale?: ExperimentalFormLocale;
11
+ export interface FormErrorMessageProps extends Omit<AlertProps, "children"> {
12
+ locale?: FormLocale;
13
+ extraErrors?: string[];
12
14
  }
13
- export declare const ExperimentalFormErrorMessage: VFC<ExperimentalFormErrorMessageProps>;
14
- export declare const ExperimentalForm: FC<ExperimentalFormProps>;
15
- export declare const ExperimentalFormSubmit: FC<ButtonProps>;
16
- export declare const ExperimentalFormReset: FC<ButtonProps>;
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, _templateObject5;
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 { ExperimentalFormContext } from "./FormContext";
23
- import { useExperimentalForm } from "./useForm";
24
- import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
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
- errorText: function errorText(invalidFields) {
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
- return /*#__PURE__*/_jsxs(_Fragment, {
29
- children: [/*#__PURE__*/_jsxs("div", {
30
- className: stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["display-heading mb-2"]))),
31
- children: ["Please fix ", invalidFields.length, " error", invalidFields.length > 1 ? "s" : "", " below and try again."]
32
- }), /*#__PURE__*/_jsx("div", {
33
- className: stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["flex flex-col"]))),
34
- children: /*#__PURE__*/_jsx("a", {
35
- href: "#",
36
- className: stl(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["text-black underline hover:text-grey-800"]))),
37
- onClick: function onClick(e) {
38
- e.preventDefault();
39
- var label = document.querySelector("label[for=\"".concat(firstInvalidField.labelFor, "\"]"));
40
- label === null || label === void 0 || label.scrollIntoView({
41
- behavior: "smooth",
42
- block: "start"
43
- });
44
- label === null || label === void 0 || label.focus({
45
- preventScroll: true
46
- });
47
- },
48
- children: "Go to first error"
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 ExperimentalFormErrorMessage = function ExperimentalFormErrorMessage(_ref) {
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 = useExperimentalForm();
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.length > 0 ? /*#__PURE__*/_jsx(Alert, _objectSpread(_objectSpread({
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(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["w-full"]))), className),
89
+ className: cx(stl(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["w-full"]))), className),
78
90
  children: /*#__PURE__*/_jsx("span", {
79
91
  "aria-live": "assertive",
80
- className: stl(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["whitespace-break-spaces"]))),
81
- children: locale.errorText(invalidFields)
92
+ className: stl(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["whitespace-break-spaces"]))),
93
+ children: locale.errorText(invalidFields, extraErrors)
82
94
  })
83
- })) : null;
95
+ }));
84
96
  };
85
- export var ExperimentalForm = function ExperimentalForm(_ref6) {
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(ExperimentalFormContext.Provider, {
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 ExperimentalFormSubmit = function ExperimentalFormSubmit(_ref7) {
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 ExperimentalFormReset = function ExperimentalFormReset(_ref8) {
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 ExperimentalFormContextField = {
3
+ export declare type FormContextField = {
4
4
  state: FieldState;
5
5
  label: string;
6
6
  labelFor: string;
7
7
  };
8
- export declare type ExperimentalFormContextValue = {
9
- fields: Record<string, ExperimentalFormContextField>;
10
- addField: (field: ExperimentalFormContextField) => void;
11
- removeField: (field: ExperimentalFormContextField) => void;
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 ExperimentalFormContext: import("react").Context<ExperimentalFormContextValue | null>;
13
+ export declare const FormContext: import("react").Context<FormContextValue | null>;
@@ -1,2 +1,2 @@
1
1
  import { createContext } from "react";
2
- export var ExperimentalFormContext = /*#__PURE__*/createContext(null);
2
+ export var FormContext = /*#__PURE__*/createContext(null);
@@ -1,3 +1,4 @@
1
- export * from "./Form";
2
- export type { ExperimentalFormContextField, ExperimentalFormContextValue } from "./FormContext";
3
- export * from "./useForm";
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 * from "./Form";
2
- export * from "./useForm";
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 { ExperimentalForm, ExperimentalFormErrorMessage, ExperimentalFormReset, ExperimentalFormSubmit } from "../Form";
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__*/_jsxs("div", {
174
- className: stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["flex flex-col gap-8 w-3/5"]))),
175
- children: [/*#__PURE__*/_jsxs(ExperimentalForm, {
176
- onSubmit: handleSubmit(function (data) {
177
- return setFormData(data);
178
- }),
179
- onReset: function onReset() {
180
- return setFormData(initialFormData);
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
- }), /*#__PURE__*/_jsxs("div", {
221
- className: stl(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["flex gap-2"]))),
222
- children: [/*#__PURE__*/_jsx(ExperimentalFormSubmit, {
223
- variant: "primary",
224
- "aria-label": "Login to the website",
225
- loading: formState.isSubmitting,
226
- children: "Login"
227
- }), /*#__PURE__*/_jsx(ExperimentalFormReset, {
228
- "aria-label": "Reset the form",
229
- onClick: function onClick() {
230
- return reset();
231
- },
232
- children: "Reset"
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
- }), /*#__PURE__*/_jsx("hr", {
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 _useState3 = useState(initialFormData),
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
- revalidationEnabled = _useState6[0],
298
- setRevalidationEnabled = _useState6[1];
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__*/_jsxs("div", {
330
- className: stl(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["flex flex-col gap-8 w-3/5"]))),
331
- children: [/*#__PURE__*/_jsxs(ExperimentalForm, {
332
- onSubmit: function onSubmit(e) {
333
- setRevalidationEnabled(true);
334
- formik.handleSubmit(e);
335
- },
336
- onReset: function onReset(e) {
337
- setRevalidationEnabled(false);
338
- formik.handleReset(e);
339
- },
340
- className: stl(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["flex flex-col items-start gap-6 min-w-72"]))),
341
- children: [/*#__PURE__*/_jsx(ExperimentalFormErrorMessage, {}), /*#__PURE__*/_jsx(Field, {
342
- label: "Username",
343
- labelFor: "username",
344
- description: "Please enter your username",
345
- state: getFieldState("username"),
346
- className: stl(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["w-full"]))),
347
- children: /*#__PURE__*/_jsx(Input, _objectSpread({
348
- id: "username",
349
- placeholder: "Username",
350
- required: true
351
- }, formik.getFieldProps("username")))
352
- }), /*#__PURE__*/_jsx(Field, {
353
- label: "Password",
354
- labelFor: "password",
355
- description: "Please enter your password",
356
- state: getFieldState("password"),
357
- className: stl(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["w-full"]))),
358
- children: /*#__PURE__*/_jsx(Input, _objectSpread({
359
- id: "password",
360
- placeholder: "Password",
361
- type: "password",
362
- required: true
363
- }, formik.getFieldProps("password")))
364
- }), /*#__PURE__*/_jsxs("div", {
365
- className: stl(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["flex gap-2"]))),
366
- children: [/*#__PURE__*/_jsx(ExperimentalFormSubmit, {
367
- variant: "primary",
368
- "aria-label": "Login to the website",
369
- loading: formik.isValidating,
370
- children: "Login"
371
- }), /*#__PURE__*/_jsx(ExperimentalFormReset, {
372
- "aria-label": "Reset the form",
373
- onClick: function onClick() {
374
- return formik.resetForm();
375
- },
376
- children: "Reset"
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
- }), /*#__PURE__*/_jsx("hr", {
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
  };