@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.
Files changed (96) 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/Button/Button.tailwind.js +0 -12
  6. package/dist/cjs/Actions/ToggleGroup/ToggleGroup.d.ts +2 -2
  7. package/dist/cjs/Actions/index.d.ts +2 -0
  8. package/dist/cjs/Actions/index.js +18 -0
  9. package/dist/cjs/Fields/Field/Field.js +2 -2
  10. package/dist/cjs/Fields/Form/Form.d.ts +12 -10
  11. package/dist/cjs/Fields/Form/Form.js +50 -38
  12. package/dist/cjs/Fields/Form/FormContext.d.ts +6 -6
  13. package/dist/cjs/Fields/Form/FormContext.js +2 -2
  14. package/dist/cjs/Fields/Form/index.d.ts +4 -3
  15. package/dist/cjs/Fields/Form/index.js +31 -21
  16. package/dist/cjs/Fields/Form/stories/AsynchronousValidation.js +142 -127
  17. package/dist/cjs/Fields/Form/stories/Complex.js +648 -642
  18. package/dist/cjs/Fields/Form/stories/DependentFieldsValidation.js +127 -121
  19. package/dist/cjs/Fields/Form/stories/DirtyFields.js +195 -189
  20. package/dist/cjs/Fields/Form/stories/DynamicFieldsValidation.js +251 -245
  21. package/dist/cjs/Fields/Form/stories/ExtraErrors.js +289 -0
  22. package/dist/cjs/Fields/Form/stories/FieldArrays.js +180 -174
  23. package/dist/cjs/Fields/Form/stories/JSONForms.js +59 -56
  24. package/dist/cjs/Fields/Form/stories/MultiStep.js +706 -0
  25. package/dist/cjs/Fields/Form/stories/ValidationStrategies.js +243 -237
  26. package/dist/cjs/Fields/Form/useForm.d.ts +1 -1
  27. package/dist/cjs/Fields/Form/useForm.js +3 -3
  28. package/dist/cjs/Helpers/utilities/focusable.tailwind.js +1 -1
  29. package/dist/cjs/Icons/index.d.ts +1 -1
  30. package/dist/cjs/Icons/index.js +6 -0
  31. package/dist/cjs/Indicators/Skeleton/Skeleton.d.ts +7 -0
  32. package/dist/cjs/Indicators/Skeleton/Skeleton.js +12 -5
  33. package/dist/cjs/Indicators/index.d.ts +1 -0
  34. package/dist/cjs/Indicators/index.js +11 -0
  35. package/dist/cjs/Layout/Sidebar/SidebarButtonLink.js +1 -1
  36. package/dist/cjs/Layout/Sidebar/SidebarLink.js +2 -2
  37. package/dist/cjs/Layout/Sidebar/SidebarLinksGroup/SidebarGroupLink.js +1 -1
  38. package/dist/cjs/Layout/Sidebar/SidebarLinksGroup/SidebarLinksGroup.js +4 -5
  39. package/dist/cjs/Layout/Tables/DataTable/DataTable.d.ts +3 -1
  40. package/dist/cjs/Layout/Tables/DataTable/DataTable.js +3 -0
  41. package/dist/cjs/Layout/Tables/Table/Table.d.ts +2 -0
  42. package/dist/cjs/Layout/Tables/Table/Table.js +4 -2
  43. package/dist/cjs/Layout/Tables/Table/Table.tailwind.js +6 -1
  44. package/dist/cjs/Overlay/MenuButton/components/items/LinkItem.d.ts +1 -1
  45. package/dist/cjs/Overlay/MenuButton/components/items/ToggleItem.d.ts +1 -1
  46. package/dist/cjs/styles/tailwind.config.js +1 -1
  47. package/dist/cjs/utils/isCssPropertySupported.d.ts +1 -1
  48. package/dist/esm/Actions/Accordion/Accordion.d.ts +142 -0
  49. package/dist/esm/Actions/Accordion/Accordion.js +139 -0
  50. package/dist/esm/Actions/Accordion/Accordion.tailwind.d.ts +5 -0
  51. package/dist/esm/Actions/Accordion/Accordion.tailwind.js +43 -0
  52. package/dist/esm/Actions/Button/Button.tailwind.js +0 -12
  53. package/dist/esm/Actions/ToggleGroup/ToggleGroup.d.ts +2 -2
  54. package/dist/esm/Actions/index.d.ts +2 -0
  55. package/dist/esm/Actions/index.js +2 -2
  56. package/dist/esm/Fields/Field/Field.js +3 -3
  57. package/dist/esm/Fields/Form/Form.d.ts +12 -10
  58. package/dist/esm/Fields/Form/Form.js +52 -40
  59. package/dist/esm/Fields/Form/FormContext.d.ts +6 -6
  60. package/dist/esm/Fields/Form/FormContext.js +1 -1
  61. package/dist/esm/Fields/Form/index.d.ts +4 -3
  62. package/dist/esm/Fields/Form/index.js +2 -3
  63. package/dist/esm/Fields/Form/stories/AsynchronousValidation.js +143 -128
  64. package/dist/esm/Fields/Form/stories/Complex.js +649 -643
  65. package/dist/esm/Fields/Form/stories/DependentFieldsValidation.js +128 -122
  66. package/dist/esm/Fields/Form/stories/DirtyFields.js +196 -190
  67. package/dist/esm/Fields/Form/stories/DynamicFieldsValidation.js +252 -246
  68. package/dist/esm/Fields/Form/stories/ExtraErrors.js +279 -0
  69. package/dist/esm/Fields/Form/stories/FieldArrays.js +181 -175
  70. package/dist/esm/Fields/Form/stories/JSONForms.js +60 -57
  71. package/dist/esm/Fields/Form/stories/MultiStep.js +697 -0
  72. package/dist/esm/Fields/Form/stories/ValidationStrategies.js +244 -238
  73. package/dist/esm/Fields/Form/useForm.d.ts +1 -1
  74. package/dist/esm/Fields/Form/useForm.js +3 -3
  75. package/dist/esm/Helpers/utilities/focusable.tailwind.js +1 -1
  76. package/dist/esm/Icons/index.d.ts +1 -1
  77. package/dist/esm/Icons/index.js +1 -1
  78. package/dist/esm/Indicators/Skeleton/Skeleton.d.ts +7 -0
  79. package/dist/esm/Indicators/Skeleton/Skeleton.js +12 -5
  80. package/dist/esm/Indicators/index.d.ts +1 -0
  81. package/dist/esm/Indicators/index.js +2 -1
  82. package/dist/esm/Layout/Sidebar/SidebarButtonLink.js +1 -1
  83. package/dist/esm/Layout/Sidebar/SidebarLink.js +2 -2
  84. package/dist/esm/Layout/Sidebar/SidebarLinksGroup/SidebarGroupLink.js +1 -1
  85. package/dist/esm/Layout/Sidebar/SidebarLinksGroup/SidebarLinksGroup.js +4 -5
  86. package/dist/esm/Layout/Tables/DataTable/DataTable.d.ts +3 -1
  87. package/dist/esm/Layout/Tables/DataTable/DataTable.js +3 -0
  88. package/dist/esm/Layout/Tables/Table/Table.d.ts +2 -0
  89. package/dist/esm/Layout/Tables/Table/Table.js +4 -2
  90. package/dist/esm/Layout/Tables/Table/Table.tailwind.js +6 -1
  91. package/dist/esm/Overlay/MenuButton/components/items/LinkItem.d.ts +1 -1
  92. package/dist/esm/Overlay/MenuButton/components/items/ToggleItem.d.ts +1 -1
  93. package/dist/esm/styles/tailwind.config.js +1 -1
  94. package/dist/esm/utils/isCssPropertySupported.d.ts +1 -1
  95. package/dist/satellite.min.css +1 -1
  96. 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.ExperimentalFormSubmit = exports.ExperimentalFormReset = exports.ExperimentalFormErrorMessage = exports.ExperimentalForm = void 0;
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, _templateObject5;
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
- errorText: function errorText(invalidFields) {
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
- return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
36
- children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
37
- className: (0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["display-heading mb-2"]))),
38
- children: ["Please fix ", invalidFields.length, " error", invalidFields.length > 1 ? "s" : "", " below and try again."]
39
- }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
40
- className: (0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["flex flex-col"]))),
41
- children: /*#__PURE__*/(0, _jsxRuntime.jsx)("a", {
42
- href: "#",
43
- className: (0, _satellitePrefixer["default"])(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["text-black underline hover:text-grey-800"]))),
44
- onClick: function onClick(e) {
45
- e.preventDefault();
46
- var label = document.querySelector("label[for=\"".concat(firstInvalidField.labelFor, "\"]"));
47
- label === null || label === void 0 || label.scrollIntoView({
48
- behavior: "smooth",
49
- block: "start"
50
- });
51
- label === null || label === void 0 || label.focus({
52
- preventScroll: true
53
- });
54
- },
55
- children: "Go to first error"
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 ExperimentalFormErrorMessage = exports.ExperimentalFormErrorMessage = function ExperimentalFormErrorMessage(_ref) {
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.useExperimentalForm)();
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.length > 0 ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Indicators.Alert, _objectSpread(_objectSpread({
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"])(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))), className),
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"])(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["whitespace-break-spaces"]))),
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
- })) : null;
102
+ }));
91
103
  };
92
- var ExperimentalForm = exports.ExperimentalForm = function ExperimentalForm(_ref6) {
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.ExperimentalFormContext.Provider, {
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 ExperimentalFormSubmit = exports.ExperimentalFormSubmit = function ExperimentalFormSubmit(_ref7) {
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 ExperimentalFormReset = exports.ExperimentalFormReset = function ExperimentalFormReset(_ref8) {
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 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>;
@@ -3,6 +3,6 @@
3
3
  Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
- exports.ExperimentalFormContext = void 0;
6
+ exports.FormContext = void 0;
7
7
  var _react = require("react");
8
- var ExperimentalFormContext = exports.ExperimentalFormContext = /*#__PURE__*/(0, _react.createContext)(null);
8
+ var FormContext = exports.FormContext = /*#__PURE__*/(0, _react.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";
@@ -3,25 +3,35 @@
3
3
  Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
- var _Form = require("./Form");
7
- Object.keys(_Form).forEach(function (key) {
8
- if (key === "default" || key === "__esModule") return;
9
- if (key in exports && exports[key] === _Form[key]) return;
10
- Object.defineProperty(exports, key, {
11
- enumerable: true,
12
- get: function get() {
13
- return _Form[key];
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
- var _useForm = require("./useForm");
18
- Object.keys(_useForm).forEach(function (key) {
19
- if (key === "default" || key === "__esModule") return;
20
- if (key in exports && exports[key] === _useForm[key]) return;
21
- Object.defineProperty(exports, key, {
22
- enumerable: true,
23
- get: function get() {
24
- return _useForm[key];
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.jsxs)("div", {
184
- className: (0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["flex flex-col gap-8 w-3/5"]))),
185
- children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_Form.ExperimentalForm, {
186
- onSubmit: handleSubmit(function (data) {
187
- return setFormData(data);
188
- }),
189
- onReset: function onReset() {
190
- return setFormData(initialFormData);
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
- }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
231
- className: (0, _satellitePrefixer["default"])(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["flex gap-2"]))),
232
- children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Form.ExperimentalFormSubmit, {
233
- variant: "primary",
234
- "aria-label": "Login to the website",
235
- loading: formState.isSubmitting,
236
- children: "Login"
237
- }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Form.ExperimentalFormReset, {
238
- "aria-label": "Reset the form",
239
- onClick: function onClick() {
240
- return reset();
241
- },
242
- children: "Reset"
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
- }), /*#__PURE__*/(0, _jsxRuntime.jsx)("hr", {
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 _useState3 = (0, _react.useState)(initialFormData),
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
- revalidationEnabled = _useState6[0],
308
- setRevalidationEnabled = _useState6[1];
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.jsxs)("div", {
340
- className: (0, _satellitePrefixer["default"])(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2["default"])(["flex flex-col gap-8 w-3/5"]))),
341
- children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_Form.ExperimentalForm, {
342
- onSubmit: function onSubmit(e) {
343
- setRevalidationEnabled(true);
344
- formik.handleSubmit(e);
345
- },
346
- onReset: function onReset(e) {
347
- setRevalidationEnabled(false);
348
- formik.handleReset(e);
349
- },
350
- className: (0, _satellitePrefixer["default"])(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2["default"])(["flex flex-col items-start gap-4 min-w-72"]))),
351
- children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Form.ExperimentalFormErrorMessage, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Field.Field, {
352
- label: "Username",
353
- labelFor: "username",
354
- description: "Please enter your username",
355
- state: getFieldState("username"),
356
- className: (0, _satellitePrefixer["default"])(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))),
357
- children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Input.Input, _objectSpread({
358
- id: "username",
359
- placeholder: "Username",
360
- required: true
361
- }, formik.getFieldProps("username")))
362
- }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Field.Field, {
363
- label: "Password",
364
- labelFor: "password",
365
- description: "Please enter your password",
366
- state: getFieldState("password"),
367
- className: (0, _satellitePrefixer["default"])(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))),
368
- children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Input.Input, _objectSpread({
369
- id: "password",
370
- placeholder: "Password",
371
- type: "password",
372
- required: true
373
- }, formik.getFieldProps("password")))
374
- }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
375
- className: (0, _satellitePrefixer["default"])(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteral2["default"])(["flex gap-2"]))),
376
- children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Form.ExperimentalFormSubmit, {
377
- variant: "primary",
378
- "aria-label": "Login to the website",
379
- loading: formik.isValidating,
380
- children: "Login"
381
- }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Form.ExperimentalFormReset, {
382
- "aria-label": "Reset the form",
383
- onClick: function onClick() {
384
- return formik.resetForm();
385
- },
386
- children: "Reset"
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
- }), /*#__PURE__*/(0, _jsxRuntime.jsx)("hr", {
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
  };