@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
@@ -24,7 +24,7 @@ var _Input = require("../../Input");
|
|
24
24
|
var _Form = require("../Form");
|
25
25
|
var _useFormikAutoFocusOnError = require("./utils/useFormikAutoFocusOnError");
|
26
26
|
var _jsxRuntime = require("react/jsx-runtime");
|
27
|
-
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20;
|
27
|
+
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22;
|
28
28
|
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); }
|
29
29
|
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; }
|
30
30
|
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; }
|
@@ -136,141 +136,144 @@ var RHFValidationStrategiesComponent = exports.RHFValidationStrategiesComponent
|
|
136
136
|
};
|
137
137
|
}
|
138
138
|
};
|
139
|
-
return /*#__PURE__*/(0, _jsxRuntime.
|
140
|
-
className: (0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["
|
141
|
-
children:
|
142
|
-
|
143
|
-
|
144
|
-
|
145
|
-
|
146
|
-
|
147
|
-
|
148
|
-
|
149
|
-
|
150
|
-
|
151
|
-
|
152
|
-
|
153
|
-
var field = _ref.field;
|
154
|
-
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Field.Field, {
|
155
|
-
label: "Card Owner",
|
156
|
-
labelFor: "cardOwner",
|
157
|
-
description: "Please enter the card owner",
|
158
|
-
state: getFieldState("cardOwner"),
|
159
|
-
className: (0, _satellitePrefixer["default"])(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))),
|
160
|
-
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Input.Input, _objectSpread({
|
161
|
-
id: "cardOwner",
|
162
|
-
placeholder: "John Doe",
|
163
|
-
required: true
|
164
|
-
}, field))
|
165
|
-
});
|
166
|
-
}
|
167
|
-
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactHookForm.Controller, {
|
168
|
-
name: "cardNumber",
|
169
|
-
control: control,
|
170
|
-
render: function render(_ref2) {
|
171
|
-
var field = _ref2.field;
|
172
|
-
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Field.Field, {
|
173
|
-
label: "Card Number",
|
174
|
-
labelFor: "cardNumber",
|
175
|
-
description: "Please enter the card number",
|
176
|
-
state: getFieldState("cardNumber"),
|
177
|
-
className: (0, _satellitePrefixer["default"])(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))),
|
178
|
-
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Input.Input, _objectSpread(_objectSpread({
|
179
|
-
id: "cardNumber",
|
180
|
-
placeholder: "Card number",
|
181
|
-
maxLength: 16 + 3 // 3 spaces
|
182
|
-
,
|
183
|
-
startIcon: _Icons.CreditCardIcon,
|
184
|
-
required: true
|
185
|
-
}, field), {}, {
|
186
|
-
onChange: function onChange(e) {
|
187
|
-
e.target.value = formatInputValue(e, 4, " ");
|
188
|
-
field.onChange(e);
|
189
|
-
if (e.target.value.length === 19) {
|
190
|
-
trigger("cardNumber");
|
191
|
-
}
|
192
|
-
}
|
193
|
-
}))
|
194
|
-
});
|
195
|
-
}
|
196
|
-
}), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
|
197
|
-
className: (0, _satellitePrefixer["default"])(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["w-full flex gap-4"]))),
|
198
|
-
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactHookForm.Controller, {
|
199
|
-
name: "cardExpirationDate",
|
139
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
|
140
|
+
className: (0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["@container w-full flex justify-center"]))),
|
141
|
+
children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
|
142
|
+
className: (0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["flex flex-col gap-8 w-full @lg:w-1/2"]))),
|
143
|
+
children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_Form.Form, {
|
144
|
+
onSubmit: handleSubmit(function (data) {
|
145
|
+
return setFormData(data);
|
146
|
+
}),
|
147
|
+
onReset: function onReset() {
|
148
|
+
return setFormData(initialFormData);
|
149
|
+
},
|
150
|
+
className: (0, _satellitePrefixer["default"])(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["flex flex-col items-start gap-6 min-w-72"]))),
|
151
|
+
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Form.FormErrorMessage, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactHookForm.Controller, {
|
152
|
+
name: "cardOwner",
|
200
153
|
control: control,
|
201
|
-
render: function render(
|
202
|
-
var field =
|
154
|
+
render: function render(_ref) {
|
155
|
+
var field = _ref.field;
|
203
156
|
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Field.Field, {
|
204
|
-
label: "Card
|
205
|
-
labelFor: "
|
206
|
-
description: "Please enter the card
|
207
|
-
state: getFieldState("
|
208
|
-
className: (0, _satellitePrefixer["default"])(
|
209
|
-
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Input.Input, _objectSpread(
|
210
|
-
id: "
|
211
|
-
placeholder: "
|
212
|
-
maxLength: 4 + 1 // 1 slash
|
213
|
-
,
|
214
|
-
startIcon: _Icons.CalendarIcon,
|
157
|
+
label: "Card Owner",
|
158
|
+
labelFor: "cardOwner",
|
159
|
+
description: "Please enter the card owner",
|
160
|
+
state: getFieldState("cardOwner"),
|
161
|
+
className: (0, _satellitePrefixer["default"])(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))),
|
162
|
+
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Input.Input, _objectSpread({
|
163
|
+
id: "cardOwner",
|
164
|
+
placeholder: "John Doe",
|
215
165
|
required: true
|
216
|
-
}, field)
|
217
|
-
onChange: function onChange(e) {
|
218
|
-
e.target.value = formatInputValue(e, 2, "/");
|
219
|
-
field.onChange(e);
|
220
|
-
},
|
221
|
-
onBlur: function onBlur() {
|
222
|
-
trigger("cardExpirationDate");
|
223
|
-
field.onBlur();
|
224
|
-
}
|
225
|
-
}))
|
166
|
+
}, field))
|
226
167
|
});
|
227
168
|
}
|
228
169
|
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactHookForm.Controller, {
|
229
|
-
name: "
|
170
|
+
name: "cardNumber",
|
230
171
|
control: control,
|
231
|
-
render: function render(
|
232
|
-
var field =
|
172
|
+
render: function render(_ref2) {
|
173
|
+
var field = _ref2.field;
|
233
174
|
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Field.Field, {
|
234
|
-
label: "Card
|
235
|
-
labelFor: "
|
236
|
-
description: "Please enter the card
|
237
|
-
state: getFieldState("
|
238
|
-
className: (0, _satellitePrefixer["default"])(
|
175
|
+
label: "Card Number",
|
176
|
+
labelFor: "cardNumber",
|
177
|
+
description: "Please enter the card number",
|
178
|
+
state: getFieldState("cardNumber"),
|
179
|
+
className: (0, _satellitePrefixer["default"])(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))),
|
239
180
|
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Input.Input, _objectSpread(_objectSpread({
|
240
|
-
id: "
|
241
|
-
placeholder: "
|
242
|
-
maxLength:
|
243
|
-
|
181
|
+
id: "cardNumber",
|
182
|
+
placeholder: "Card number",
|
183
|
+
maxLength: 16 + 3 // 3 spaces
|
184
|
+
,
|
185
|
+
startIcon: _Icons.CreditCardIcon,
|
244
186
|
required: true
|
245
187
|
}, field), {}, {
|
246
|
-
|
247
|
-
|
248
|
-
field.
|
188
|
+
onChange: function onChange(e) {
|
189
|
+
e.target.value = formatInputValue(e, 4, " ");
|
190
|
+
field.onChange(e);
|
191
|
+
if (e.target.value.length === 19) {
|
192
|
+
trigger("cardNumber");
|
193
|
+
}
|
249
194
|
}
|
250
195
|
}))
|
251
196
|
});
|
252
197
|
}
|
198
|
+
}), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
|
199
|
+
className: (0, _satellitePrefixer["default"])(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["w-full flex gap-4 flex-col @xl:flex-row"]))),
|
200
|
+
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactHookForm.Controller, {
|
201
|
+
name: "cardExpirationDate",
|
202
|
+
control: control,
|
203
|
+
render: function render(_ref3) {
|
204
|
+
var field = _ref3.field;
|
205
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Field.Field, {
|
206
|
+
label: "Card Expiration Date",
|
207
|
+
labelFor: "cardExpirationDate",
|
208
|
+
description: "Please enter the card expiration date",
|
209
|
+
state: getFieldState("cardExpirationDate"),
|
210
|
+
className: (0, _satellitePrefixer["default"])(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))),
|
211
|
+
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Input.Input, _objectSpread(_objectSpread({
|
212
|
+
id: "cardExpirationDate",
|
213
|
+
placeholder: "MM/YY",
|
214
|
+
maxLength: 4 + 1 // 1 slash
|
215
|
+
,
|
216
|
+
startIcon: _Icons.CalendarIcon,
|
217
|
+
required: true
|
218
|
+
}, field), {}, {
|
219
|
+
onChange: function onChange(e) {
|
220
|
+
e.target.value = formatInputValue(e, 2, "/");
|
221
|
+
field.onChange(e);
|
222
|
+
},
|
223
|
+
onBlur: function onBlur() {
|
224
|
+
trigger("cardExpirationDate");
|
225
|
+
field.onBlur();
|
226
|
+
}
|
227
|
+
}))
|
228
|
+
});
|
229
|
+
}
|
230
|
+
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactHookForm.Controller, {
|
231
|
+
name: "cardCVC",
|
232
|
+
control: control,
|
233
|
+
render: function render(_ref4) {
|
234
|
+
var field = _ref4.field;
|
235
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Field.Field, {
|
236
|
+
label: "Card CVC",
|
237
|
+
labelFor: "cardCVC",
|
238
|
+
description: "Please enter the card security code",
|
239
|
+
state: getFieldState("cardCVC"),
|
240
|
+
className: (0, _satellitePrefixer["default"])(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))),
|
241
|
+
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Input.Input, _objectSpread(_objectSpread({
|
242
|
+
id: "cardCVC",
|
243
|
+
placeholder: "CVC",
|
244
|
+
maxLength: 4,
|
245
|
+
startIcon: _Icons.LockIcon,
|
246
|
+
required: true
|
247
|
+
}, field), {}, {
|
248
|
+
onBlur: function onBlur() {
|
249
|
+
trigger("cardCVC");
|
250
|
+
field.onBlur();
|
251
|
+
}
|
252
|
+
}))
|
253
|
+
});
|
254
|
+
}
|
255
|
+
})]
|
256
|
+
}), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
|
257
|
+
className: (0, _satellitePrefixer["default"])(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2["default"])(["flex gap-2"]))),
|
258
|
+
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Form.FormSubmit, {
|
259
|
+
variant: "primary",
|
260
|
+
"aria-label": "Save the form",
|
261
|
+
children: "Save"
|
262
|
+
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Form.FormReset, {
|
263
|
+
"aria-label": "Reset the form",
|
264
|
+
onClick: function onClick() {
|
265
|
+
return reset();
|
266
|
+
},
|
267
|
+
children: "Reset"
|
268
|
+
})]
|
253
269
|
})]
|
254
|
-
}), /*#__PURE__*/(0, _jsxRuntime.
|
255
|
-
className: (0, _satellitePrefixer["default"])(
|
256
|
-
|
257
|
-
|
258
|
-
|
259
|
-
children: "Save"
|
260
|
-
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Form.ExperimentalFormReset, {
|
261
|
-
"aria-label": "Reset the form",
|
262
|
-
onClick: function onClick() {
|
263
|
-
return reset();
|
264
|
-
},
|
265
|
-
children: "Reset"
|
266
|
-
})]
|
270
|
+
}), /*#__PURE__*/(0, _jsxRuntime.jsx)("hr", {
|
271
|
+
className: (0, _satellitePrefixer["default"])(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2["default"])(["text-grey-500"])))
|
272
|
+
}), /*#__PURE__*/(0, _jsxRuntime.jsx)("code", {
|
273
|
+
className: (0, _satellitePrefixer["default"])(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2["default"])(["whitespace-pre display-code"]))),
|
274
|
+
children: JSON.stringify(formData, null, 2)
|
267
275
|
})]
|
268
|
-
})
|
269
|
-
className: (0, _satellitePrefixer["default"])(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2["default"])(["text-grey-500"])))
|
270
|
-
}), /*#__PURE__*/(0, _jsxRuntime.jsx)("code", {
|
271
|
-
className: (0, _satellitePrefixer["default"])(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2["default"])(["whitespace-pre display-code"]))),
|
272
|
-
children: JSON.stringify(formData, null, 2)
|
273
|
-
})]
|
276
|
+
})
|
274
277
|
});
|
275
278
|
};
|
276
279
|
var yupSchema = yup.object({
|
@@ -326,130 +329,133 @@ var FormikValidationStrategiesComponent = exports.FormikValidationStrategiesComp
|
|
326
329
|
}
|
327
330
|
};
|
328
331
|
(0, _useFormikAutoFocusOnError.useFormikAutoFocusOnError)(formik);
|
329
|
-
return /*#__PURE__*/(0, _jsxRuntime.
|
330
|
-
className: (0, _satellitePrefixer["default"])(
|
331
|
-
children:
|
332
|
-
|
333
|
-
|
334
|
-
|
335
|
-
|
336
|
-
|
337
|
-
|
338
|
-
|
339
|
-
|
340
|
-
|
341
|
-
|
342
|
-
|
343
|
-
|
344
|
-
|
345
|
-
|
346
|
-
|
347
|
-
|
348
|
-
|
349
|
-
|
350
|
-
|
351
|
-
|
352
|
-
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Field.Field, {
|
353
|
-
label: "Card Number",
|
354
|
-
labelFor: "cardNumber",
|
355
|
-
description: "Please enter the card number",
|
356
|
-
state: getFieldState("cardNumber"),
|
357
|
-
className: (0, _satellitePrefixer["default"])(_templateObject14 || (_templateObject14 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))),
|
358
|
-
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Input.Input, _objectSpread(_objectSpread({
|
359
|
-
id: "cardNumber",
|
360
|
-
placeholder: "Card number",
|
361
|
-
maxLength: 16 + 3 // 3 spaces
|
362
|
-
,
|
363
|
-
startIcon: _Icons.CreditCardIcon,
|
364
|
-
required: true
|
365
|
-
}, formik.getFieldProps("cardNumber")), {}, {
|
366
|
-
onChange: ( /*#__PURE__*/function () {
|
367
|
-
var _ref5 = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee(e) {
|
368
|
-
var value;
|
369
|
-
return _regenerator["default"].wrap(function _callee$(_context) {
|
370
|
-
while (1) switch (_context.prev = _context.next) {
|
371
|
-
case 0:
|
372
|
-
value = formatInputValue(e, 4, " ");
|
373
|
-
_context.next = 3;
|
374
|
-
return formik.setFieldValue("cardNumber", value);
|
375
|
-
case 3:
|
376
|
-
if (value.length === 19) {
|
377
|
-
formik.validateField("cardNumber");
|
378
|
-
}
|
379
|
-
case 4:
|
380
|
-
case "end":
|
381
|
-
return _context.stop();
|
382
|
-
}
|
383
|
-
}, _callee);
|
384
|
-
}));
|
385
|
-
return function (_x) {
|
386
|
-
return _ref5.apply(this, arguments);
|
387
|
-
};
|
388
|
-
}())
|
389
|
-
}))
|
390
|
-
}), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
|
391
|
-
className: (0, _satellitePrefixer["default"])(_templateObject15 || (_templateObject15 = (0, _taggedTemplateLiteral2["default"])(["w-full flex gap-4"]))),
|
392
|
-
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Field.Field, {
|
393
|
-
label: "Card Expiration Date",
|
394
|
-
labelFor: "cardExpirationDate",
|
395
|
-
description: "Please enter the card expiration date",
|
396
|
-
state: getFieldState("cardExpirationDate"),
|
397
|
-
className: (0, _satellitePrefixer["default"])(_templateObject16 || (_templateObject16 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))),
|
398
|
-
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Input.Input, _objectSpread(_objectSpread({
|
399
|
-
id: "cardExpirationDate",
|
400
|
-
placeholder: "MM/YY",
|
401
|
-
maxLength: 4 + 1 // 1 slash
|
402
|
-
,
|
403
|
-
startIcon: _Icons.CalendarIcon,
|
332
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
|
333
|
+
className: (0, _satellitePrefixer["default"])(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteral2["default"])(["@container w-full flex justify-center"]))),
|
334
|
+
children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
|
335
|
+
className: (0, _satellitePrefixer["default"])(_templateObject13 || (_templateObject13 = (0, _taggedTemplateLiteral2["default"])(["flex flex-col gap-8 w-full @lg:w-1/2"]))),
|
336
|
+
children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_Form.Form, {
|
337
|
+
onSubmit: function onSubmit(e) {
|
338
|
+
setRevalidationEnabled(true);
|
339
|
+
formik.handleSubmit(e);
|
340
|
+
},
|
341
|
+
onReset: function onReset(e) {
|
342
|
+
setRevalidationEnabled(false);
|
343
|
+
formik.handleReset(e);
|
344
|
+
},
|
345
|
+
className: (0, _satellitePrefixer["default"])(_templateObject14 || (_templateObject14 = (0, _taggedTemplateLiteral2["default"])(["flex flex-col items-start gap-6 min-w-72"]))),
|
346
|
+
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Form.FormErrorMessage, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Field.Field, {
|
347
|
+
label: "Card Owner",
|
348
|
+
labelFor: "cardOwner",
|
349
|
+
description: "Please enter the card owner",
|
350
|
+
state: getFieldState("cardOwner"),
|
351
|
+
className: (0, _satellitePrefixer["default"])(_templateObject15 || (_templateObject15 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))),
|
352
|
+
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Input.Input, _objectSpread({
|
353
|
+
id: "cardOwner",
|
354
|
+
placeholder: "John Doe",
|
404
355
|
required: true
|
405
|
-
}, formik.getFieldProps("
|
406
|
-
onChange: function onChange(e) {
|
407
|
-
e.target.value = formatInputValue(e, 2, "/");
|
408
|
-
formik.getFieldProps("cardExpirationDate").onChange(e);
|
409
|
-
},
|
410
|
-
onBlur: function onBlur(e) {
|
411
|
-
formik.validateField("cardExpirationDate");
|
412
|
-
formik.getFieldProps("cardExpirationDate").onBlur(e);
|
413
|
-
}
|
414
|
-
}))
|
356
|
+
}, formik.getFieldProps("cardOwner")))
|
415
357
|
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Field.Field, {
|
416
|
-
label: "Card
|
417
|
-
labelFor: "
|
418
|
-
description: "Please enter the card
|
419
|
-
state: getFieldState("
|
420
|
-
className: (0, _satellitePrefixer["default"])(
|
358
|
+
label: "Card Number",
|
359
|
+
labelFor: "cardNumber",
|
360
|
+
description: "Please enter the card number",
|
361
|
+
state: getFieldState("cardNumber"),
|
362
|
+
className: (0, _satellitePrefixer["default"])(_templateObject16 || (_templateObject16 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))),
|
421
363
|
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Input.Input, _objectSpread(_objectSpread({
|
422
|
-
id: "
|
423
|
-
placeholder: "
|
424
|
-
maxLength:
|
425
|
-
|
364
|
+
id: "cardNumber",
|
365
|
+
placeholder: "Card number",
|
366
|
+
maxLength: 16 + 3 // 3 spaces
|
367
|
+
,
|
368
|
+
startIcon: _Icons.CreditCardIcon,
|
426
369
|
required: true
|
427
|
-
}, formik.getFieldProps("
|
428
|
-
|
429
|
-
|
430
|
-
|
431
|
-
|
370
|
+
}, formik.getFieldProps("cardNumber")), {}, {
|
371
|
+
onChange: ( /*#__PURE__*/function () {
|
372
|
+
var _ref5 = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee(e) {
|
373
|
+
var value;
|
374
|
+
return _regenerator["default"].wrap(function _callee$(_context) {
|
375
|
+
while (1) switch (_context.prev = _context.next) {
|
376
|
+
case 0:
|
377
|
+
value = formatInputValue(e, 4, " ");
|
378
|
+
_context.next = 3;
|
379
|
+
return formik.setFieldValue("cardNumber", value);
|
380
|
+
case 3:
|
381
|
+
if (value.length === 19) {
|
382
|
+
formik.validateField("cardNumber");
|
383
|
+
}
|
384
|
+
case 4:
|
385
|
+
case "end":
|
386
|
+
return _context.stop();
|
387
|
+
}
|
388
|
+
}, _callee);
|
389
|
+
}));
|
390
|
+
return function (_x) {
|
391
|
+
return _ref5.apply(this, arguments);
|
392
|
+
};
|
393
|
+
}())
|
432
394
|
}))
|
395
|
+
}), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
|
396
|
+
className: (0, _satellitePrefixer["default"])(_templateObject17 || (_templateObject17 = (0, _taggedTemplateLiteral2["default"])(["w-full flex gap-4 flex-col @xl:flex-row"]))),
|
397
|
+
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Field.Field, {
|
398
|
+
label: "Card Expiration Date",
|
399
|
+
labelFor: "cardExpirationDate",
|
400
|
+
description: "Please enter the card expiration date",
|
401
|
+
state: getFieldState("cardExpirationDate"),
|
402
|
+
className: (0, _satellitePrefixer["default"])(_templateObject18 || (_templateObject18 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))),
|
403
|
+
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Input.Input, _objectSpread(_objectSpread({
|
404
|
+
id: "cardExpirationDate",
|
405
|
+
placeholder: "MM/YY",
|
406
|
+
maxLength: 4 + 1 // 1 slash
|
407
|
+
,
|
408
|
+
startIcon: _Icons.CalendarIcon,
|
409
|
+
required: true
|
410
|
+
}, formik.getFieldProps("cardExpirationDate")), {}, {
|
411
|
+
onChange: function onChange(e) {
|
412
|
+
e.target.value = formatInputValue(e, 2, "/");
|
413
|
+
formik.getFieldProps("cardExpirationDate").onChange(e);
|
414
|
+
},
|
415
|
+
onBlur: function onBlur(e) {
|
416
|
+
formik.validateField("cardExpirationDate");
|
417
|
+
formik.getFieldProps("cardExpirationDate").onBlur(e);
|
418
|
+
}
|
419
|
+
}))
|
420
|
+
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Field.Field, {
|
421
|
+
label: "Card CVC",
|
422
|
+
labelFor: "cardCVC",
|
423
|
+
description: "Please enter the card security code",
|
424
|
+
state: getFieldState("cardCVC"),
|
425
|
+
className: (0, _satellitePrefixer["default"])(_templateObject19 || (_templateObject19 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))),
|
426
|
+
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Input.Input, _objectSpread(_objectSpread({
|
427
|
+
id: "cardCVC",
|
428
|
+
placeholder: "CVC",
|
429
|
+
maxLength: 4,
|
430
|
+
startIcon: _Icons.LockIcon,
|
431
|
+
required: true
|
432
|
+
}, formik.getFieldProps("cardCVC")), {}, {
|
433
|
+
onBlur: function onBlur(e) {
|
434
|
+
formik.validateField("cardCVC");
|
435
|
+
formik.getFieldProps("cardCVC").onBlur(e);
|
436
|
+
}
|
437
|
+
}))
|
438
|
+
})]
|
439
|
+
}), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
|
440
|
+
className: (0, _satellitePrefixer["default"])(_templateObject20 || (_templateObject20 = (0, _taggedTemplateLiteral2["default"])(["flex gap-2"]))),
|
441
|
+
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Form.FormSubmit, {
|
442
|
+
variant: "primary",
|
443
|
+
"aria-label": "Save the form",
|
444
|
+
children: "Save"
|
445
|
+
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Form.FormReset, {
|
446
|
+
"aria-label": "Reset the form",
|
447
|
+
onClick: function onClick() {
|
448
|
+
return formik.resetForm();
|
449
|
+
},
|
450
|
+
children: "Reset"
|
451
|
+
})]
|
433
452
|
})]
|
434
|
-
}), /*#__PURE__*/(0, _jsxRuntime.
|
435
|
-
className: (0, _satellitePrefixer["default"])(
|
436
|
-
|
437
|
-
|
438
|
-
|
439
|
-
children: "Save"
|
440
|
-
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Form.ExperimentalFormReset, {
|
441
|
-
"aria-label": "Reset the form",
|
442
|
-
onClick: function onClick() {
|
443
|
-
return formik.resetForm();
|
444
|
-
},
|
445
|
-
children: "Reset"
|
446
|
-
})]
|
453
|
+
}), /*#__PURE__*/(0, _jsxRuntime.jsx)("hr", {
|
454
|
+
className: (0, _satellitePrefixer["default"])(_templateObject21 || (_templateObject21 = (0, _taggedTemplateLiteral2["default"])(["text-grey-500"])))
|
455
|
+
}), /*#__PURE__*/(0, _jsxRuntime.jsx)("code", {
|
456
|
+
className: (0, _satellitePrefixer["default"])(_templateObject22 || (_templateObject22 = (0, _taggedTemplateLiteral2["default"])(["whitespace-pre display-code"]))),
|
457
|
+
children: JSON.stringify(formData, null, 2)
|
447
458
|
})]
|
448
|
-
})
|
449
|
-
className: (0, _satellitePrefixer["default"])(_templateObject19 || (_templateObject19 = (0, _taggedTemplateLiteral2["default"])(["text-grey-500"])))
|
450
|
-
}), /*#__PURE__*/(0, _jsxRuntime.jsx)("code", {
|
451
|
-
className: (0, _satellitePrefixer["default"])(_templateObject20 || (_templateObject20 = (0, _taggedTemplateLiteral2["default"])(["whitespace-pre display-code"]))),
|
452
|
-
children: JSON.stringify(formData, null, 2)
|
453
|
-
})]
|
459
|
+
})
|
454
460
|
});
|
455
461
|
};
|
@@ -1 +1 @@
|
|
1
|
-
export declare const
|
1
|
+
export declare const useForm: () => import("./FormContext").FormContextValue | null;
|
@@ -3,9 +3,9 @@
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
4
4
|
value: true
|
5
5
|
});
|
6
|
-
exports.
|
6
|
+
exports.useForm = void 0;
|
7
7
|
var _react = require("react");
|
8
8
|
var _FormContext = require("./FormContext");
|
9
|
-
var
|
10
|
-
return (0, _react.useContext)(_FormContext.
|
9
|
+
var useForm = exports.useForm = function useForm() {
|
10
|
+
return (0, _react.useContext)(_FormContext.FormContext);
|
11
11
|
};
|
@@ -7,7 +7,7 @@ var plugin = require("tailwindcss/plugin");
|
|
7
7
|
module.exports = plugin(function (_ref) {
|
8
8
|
var addComponents = _ref.addComponents,
|
9
9
|
theme = _ref.theme;
|
10
|
-
addComponents((0, _defineProperty2["default"])({}, ".focusable:focus,\n .focusable-within:focus-within,\n .focusable-visible:focus-visible,\n .focusable-visible-within:has(:focus-visible),\n input:focus ~ .focusable-sibling,\n .focusable-show", {
|
10
|
+
addComponents((0, _defineProperty2["default"])({}, ".focusable:focus,\n .focusable-within:focus-within,\n .focusable-visible:focus-visible,\n .focusable-visible-within:has(:focus-visible),\n input:focus ~ .focusable-sibling,\n .focusable-visible-group:focus-visible .focusable-visible-group-item,\n .focusable-show", {
|
11
11
|
outline: "2px solid ".concat(theme("colors.accent.600")),
|
12
12
|
outlineOffset: "1px"
|
13
13
|
}));
|
@@ -1,12 +1,19 @@
|
|
1
1
|
import type { FC } from "react";
|
2
2
|
export interface SkeletonProps {
|
3
3
|
className?: string;
|
4
|
+
size?: keyof typeof DEFAULT_SKELETON_SIZES;
|
4
5
|
circle?: boolean;
|
5
6
|
image?: boolean;
|
6
7
|
}
|
8
|
+
declare const DEFAULT_SKELETON_SIZES: {
|
9
|
+
sm: string;
|
10
|
+
md: string;
|
11
|
+
lg: string;
|
12
|
+
};
|
7
13
|
/**
|
8
14
|
* The `Skeleton` component is used to display a placeholder during loading.
|
9
15
|
*
|
10
16
|
* See the [Skeleton documentation page](https://satellite.algolia.com/layouts/skeleton) for more information.
|
11
17
|
*/
|
12
18
|
export declare const Skeleton: FC<SkeletonProps>;
|
19
|
+
export {};
|
@@ -6,16 +6,22 @@ Object.defineProperty(exports, "__esModule", {
|
|
6
6
|
});
|
7
7
|
exports.Skeleton = void 0;
|
8
8
|
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
9
|
-
var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
|
10
9
|
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
|
10
|
+
var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
|
11
11
|
var _clsx = _interopRequireDefault(require("clsx"));
|
12
12
|
var _Icons = require("../../Icons");
|
13
13
|
var _satellitePrefixer = _interopRequireDefault(require("../../styles/helpers/satellitePrefixer"));
|
14
14
|
var _jsxRuntime = require("react/jsx-runtime");
|
15
|
-
var
|
16
|
-
var
|
15
|
+
var _excluded = ["circle", "image", "className", "size"];
|
16
|
+
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
|
17
17
|
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; }
|
18
18
|
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; }
|
19
|
+
var DEFAULT_SKELETON_SIZES = {
|
20
|
+
sm: (0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["w-full h-8"]))),
|
21
|
+
md: (0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["w-full h-16"]))),
|
22
|
+
lg: (0, _satellitePrefixer["default"])(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["w-full h-32"])))
|
23
|
+
};
|
24
|
+
|
19
25
|
/**
|
20
26
|
* The `Skeleton` component is used to display a placeholder during loading.
|
21
27
|
*
|
@@ -28,12 +34,13 @@ var Skeleton = exports.Skeleton = function Skeleton(_ref) {
|
|
28
34
|
_ref$image = _ref.image,
|
29
35
|
image = _ref$image === void 0 ? false : _ref$image,
|
30
36
|
className = _ref.className,
|
37
|
+
size = _ref.size,
|
31
38
|
props = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
|
32
39
|
return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", _objectSpread(_objectSpread({}, props), {}, {
|
33
40
|
"aria-hidden": true,
|
34
|
-
className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(
|
41
|
+
className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["flex animate-pulse bg-grey-200/80 ", ""])), circle ? "rounded-full aspect-square max-w-fit" : "rounded"), size && DEFAULT_SKELETON_SIZES[size], className),
|
35
42
|
children: image ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icons.ImageIcon, {
|
36
|
-
className: (0, _satellitePrefixer["default"])(
|
43
|
+
className: (0, _satellitePrefixer["default"])(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["mx-auto self-center text-grey-300/50 w-[40%] h-[40%] max-w-[32px] max-h-[32px]"])))
|
37
44
|
}) : null
|
38
45
|
}));
|
39
46
|
};
|
@@ -66,7 +66,7 @@ var SidebarButtonLink = exports.SidebarButtonLink = function SidebarButtonLink(p
|
|
66
66
|
onBlur: function onBlur() {
|
67
67
|
return setIsInteractedWith(false);
|
68
68
|
},
|
69
|
-
className: (0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n h-8 min-w-8 w-full rounded\n flex items-center space-x-3\n border border-transparent\n display-body\n hover:no-underline focus:no-underline\n ", "\n ", "\n ", "\n ", "\n "])), disabled ? "cursor-not-allowed opacity-70" : "
|
69
|
+
className: (0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n h-8 min-w-8 w-full rounded\n flex items-center space-x-3\n border border-transparent\n display-body\n hover:no-underline focus:no-underline\n ", "\n ", "\n ", "\n ", "\n "])), disabled ? "cursor-not-allowed opacity-70" : "focusable-visible", isActive ? "shadow-z100" : !disabled && "hover:border-grey-200", isActive && "bg-gradient-to-b from-white to-grey-50", collapsed ? "pl-2" : "px-2"),
|
70
70
|
"aria-current": isActive,
|
71
71
|
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Icon, {
|
72
72
|
className: (0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["", " ml-[-3px] shrink-0"])), showColors ? "text-accent-600" : "text-grey-400"),
|