@cerebruminc/cerebellum 16.1.1 → 16.2.0-beta.dangerous.0ea68fe
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/lib/cjs/ColorPickerInput-CBPI8IJ-.js +187 -0
- package/lib/cjs/ColorPickerInput-CBPI8IJ-.js.map +1 -0
- package/lib/cjs/ColorPickerInput.cjs +25 -0
- package/lib/cjs/ColorPickerInput.cjs.map +1 -0
- package/lib/cjs/DatePicker.cjs +1 -1
- package/lib/cjs/Form.cjs +7 -4
- package/lib/cjs/Form.cjs.map +1 -1
- package/lib/cjs/FormFieldTypeEnum.cjs +5 -0
- package/lib/cjs/FormFieldTypeEnum.cjs.map +1 -1
- package/lib/cjs/FormSeparator.cjs +3 -1
- package/lib/cjs/FormSeparator.cjs.map +1 -1
- package/lib/cjs/{FormStyles-CxgYRZOl.js → FormStyles-oEHUS8Oi.js} +43 -22
- package/lib/cjs/{FormStyles-CxgYRZOl.js.map → FormStyles-oEHUS8Oi.js.map} +1 -1
- package/lib/cjs/FormWrapper.cjs +3 -1
- package/lib/cjs/FormWrapper.cjs.map +1 -1
- package/lib/cjs/{FormikContainer-CY2nLsAs.js → FormikContainer-DDXxSB2z.js} +37 -4
- package/lib/cjs/{FormikContainer-CY2nLsAs.js.map → FormikContainer-DDXxSB2z.js.map} +1 -1
- package/lib/cjs/InlineColorPickerInput.cjs +25 -0
- package/lib/cjs/InlineColorPickerInput.cjs.map +1 -0
- package/lib/cjs/{InlineDatePicker-DFv_uHo9.js → InlineDatePicker-B7DTwvhv.js} +344 -176
- package/lib/cjs/InlineDatePicker-B7DTwvhv.js.map +1 -0
- package/lib/cjs/InlineDatePicker.cjs +1 -1
- package/lib/cjs/TitleGroup.cjs +3 -1
- package/lib/cjs/TitleGroup.cjs.map +1 -1
- package/lib/cjs/cerebellumTheme.cjs +5 -0
- package/lib/cjs/cerebellumTheme.cjs.map +1 -1
- package/lib/cjs/index.cjs +9 -3
- package/lib/cjs/index.cjs.map +1 -1
- package/lib/cjs/validateColorContrast.cjs +53 -0
- package/lib/cjs/validateColorContrast.cjs.map +1 -0
- package/lib/cjs/validateColorContrastWithMessage.cjs +10 -0
- package/lib/cjs/validateColorContrastWithMessage.cjs.map +1 -0
- package/lib/esm/ColorPickerInput-S8X2gIA5.js +180 -0
- package/lib/esm/ColorPickerInput-S8X2gIA5.js.map +1 -0
- package/lib/esm/ColorPickerInput.js +18 -0
- package/lib/esm/ColorPickerInput.js.map +1 -0
- package/lib/esm/DatePicker.js +1 -1
- package/lib/esm/Form.js +7 -5
- package/lib/esm/Form.js.map +1 -1
- package/lib/esm/FormFieldTypeEnum.js +5 -1
- package/lib/esm/FormFieldTypeEnum.js.map +1 -1
- package/lib/esm/FormSeparator.js +3 -1
- package/lib/esm/FormSeparator.js.map +1 -1
- package/lib/esm/{FormStyles-BQJPyTS0.js → FormStyles-wlDzB1vZ.js} +44 -23
- package/lib/esm/{FormStyles-BQJPyTS0.js.map → FormStyles-wlDzB1vZ.js.map} +1 -1
- package/lib/esm/FormWrapper.js +3 -1
- package/lib/esm/FormWrapper.js.map +1 -1
- package/lib/esm/{FormikContainer-SJPYfIkF.js → FormikContainer--y08X-6j.js} +38 -5
- package/lib/esm/{FormikContainer-SJPYfIkF.js.map → FormikContainer--y08X-6j.js.map} +1 -1
- package/lib/esm/InlineColorPickerInput.js +18 -0
- package/lib/esm/InlineColorPickerInput.js.map +1 -0
- package/lib/esm/{InlineDatePicker-ClVBWEzW.js → InlineDatePicker-BuxjkoV0.js} +345 -177
- package/lib/esm/InlineDatePicker-BuxjkoV0.js.map +1 -0
- package/lib/esm/InlineDatePicker.js +1 -1
- package/lib/esm/TitleGroup.js +3 -1
- package/lib/esm/TitleGroup.js.map +1 -1
- package/lib/esm/cerebellumTheme.js +5 -0
- package/lib/esm/cerebellumTheme.js.map +1 -1
- package/lib/esm/index.js +6 -4
- package/lib/esm/index.js.map +1 -1
- package/lib/esm/validateColorContrast.js +50 -0
- package/lib/esm/validateColorContrast.js.map +1 -0
- package/lib/esm/validateColorContrastWithMessage.js +3 -0
- package/lib/esm/validateColorContrastWithMessage.js.map +1 -0
- package/lib/types/src/components/ColorPickerInput/ColorPickerInput.d.ts +3 -0
- package/lib/types/src/components/ColorPickerInput/InlineColorPickerInput.d.ts +3 -0
- package/lib/types/src/components/ColorPickerInput/index.d.ts +3 -0
- package/lib/types/src/components/ColorPickerInput/types.d.ts +48 -0
- package/lib/types/src/components/Form/fields/ColorPickerField/ColorPickerField.d.ts +4 -0
- package/lib/types/src/components/Form/fields/ColorPickerField/index.d.ts +1 -0
- package/lib/types/src/components/Form/fields/index.d.ts +2 -1
- package/lib/types/src/components/Form/index.d.ts +3 -3
- package/lib/types/src/components/Form/mocks/fields.d.ts +62 -0
- package/lib/types/src/components/Form/types.d.ts +36 -2
- package/lib/types/src/helpers/colorValidators.d.ts +19 -0
- package/lib/types/src/index.d.ts +5 -1
- package/lib/types/src/theme.d.ts +6 -0
- package/package.json +1 -1
- package/lib/cjs/InlineDatePicker-DFv_uHo9.js.map +0 -1
- package/lib/esm/InlineDatePicker-ClVBWEzW.js.map +0 -1
|
@@ -14,10 +14,11 @@ import './Switches-yNTNw1zb.js';
|
|
|
14
14
|
import './DescriptiveSwitchMenuStyles-CQ_uwipg.js';
|
|
15
15
|
import { SwitchTypeEnum } from './SwitchTypeEnum.js';
|
|
16
16
|
import { getObjectById } from './addOrRemoveById.js';
|
|
17
|
+
import { validateColorContrast } from './validateColorContrast.js';
|
|
17
18
|
import { formatBytesToString } from './formatBytesToString.js';
|
|
18
19
|
import { northAmericanNumberingPlanRegex } from './northAmericanNumberingPlanRegex.js';
|
|
19
20
|
import * as yup from 'yup';
|
|
20
|
-
import { FormFieldTypeEnum, isSplitLine, isSectionHeader, isCheckbox, isToggle, isCheckboxGroup, isMultiSelect, isToggleGroup, isRemovable, isPassword, isAddress, isConfigurableInput, isCountySelect, isCountrySelect, isCreditCard, isCurrency, isDatePicker, isDescriptiveDropdownInput, isEmail, isImagePicker, isNumber, isPhone, isRadioGroup, isSelect, isSocialSecurity, isStateSelect, isTextarea, isZipCode } from './FormFieldTypeEnum.js';
|
|
21
|
+
import { FormFieldTypeEnum, isSplitLine, isSectionHeader, isCheckbox, isToggle, isCheckboxGroup, isMultiSelect, isToggleGroup, isRemovable, isPassword, isAddress, isColorPicker, isConfigurableInput, isCountySelect, isCountrySelect, isCreditCard, isCurrency, isDatePicker, isDescriptiveDropdownInput, isEmail, isImagePicker, isNumber, isPhone, isRadioGroup, isSelect, isSocialSecurity, isStateSelect, isTextarea, isZipCode } from './FormFieldTypeEnum.js';
|
|
21
22
|
|
|
22
23
|
var integerRegex = /^\d+$/;
|
|
23
24
|
// at least 8 chars
|
|
@@ -173,8 +174,24 @@ var formatValidationInternals = function (_a) {
|
|
|
173
174
|
validationFunction ||
|
|
174
175
|
(required && allowRequired && !disabled ? yup.array().of(yup.string()).min(1, requiredMessage) : yup.array().of(yup.string()));
|
|
175
176
|
}
|
|
177
|
+
else if (isColorPicker(field)) {
|
|
178
|
+
var _j = field.requiredMessage, requiredMessage = _j === void 0 ? "This field is required" : _j, _k = field.validationMessage, validationMessage = _k === void 0 ? "This color does not have sufficient contrast for accessibility" : _k;
|
|
179
|
+
var _l = field.options || {}, _m = _l.checkLegible, checkLegible = _m === void 0 ? false : _m, _o = _l.legibleAgainst, legibleAgainst_1 = _o === void 0 ? "#ffffff" : _o;
|
|
180
|
+
// Create base string validation
|
|
181
|
+
var colorSchema = yup.string();
|
|
182
|
+
// Add contrast validation if checkLegible is enabled
|
|
183
|
+
if (checkLegible) {
|
|
184
|
+
colorSchema = colorSchema.test("color-contrast", validationMessage, function (value) {
|
|
185
|
+
if (!value)
|
|
186
|
+
return true; // Allow empty values, let required validation handle this
|
|
187
|
+
return validateColorContrast(value, legibleAgainst_1);
|
|
188
|
+
});
|
|
189
|
+
}
|
|
190
|
+
validationInternals[name_6] =
|
|
191
|
+
validationFunction || (required && allowRequired && !disabled ? colorSchema.required(requiredMessage) : colorSchema);
|
|
192
|
+
}
|
|
176
193
|
else if (isConfigurableInput(field)) {
|
|
177
|
-
var
|
|
194
|
+
var _p = field.requiredMessage, requiredMessage = _p === void 0 ? "This field is required" : _p, _q = field.validationMessage, validationMessage = _q === void 0 ? "This field must be a string" : _q, options = field.options;
|
|
178
195
|
var maskedRadios = options.maskedRadios, defaultId = options.defaultId;
|
|
179
196
|
var activeId = configurableInputFieldActiveIds[name_6] || defaultId || maskedRadios[0].value;
|
|
180
197
|
var selectedOption = getObjectById({ array: maskedRadios, id: activeId, idKey: "value" });
|
|
@@ -187,31 +204,31 @@ var formatValidationInternals = function (_a) {
|
|
|
187
204
|
: yup.string().typeError(validationMessage));
|
|
188
205
|
}
|
|
189
206
|
else if (isCountySelect(field)) {
|
|
190
|
-
var
|
|
207
|
+
var _r = field.requiredMessage, requiredMessage = _r === void 0 ? "This field is required" : _r, _s = field.validationMessage, validationMessage = _s === void 0 ? "This field must be a string" : _s;
|
|
191
208
|
validationInternals[name_6] =
|
|
192
209
|
validationFunction ||
|
|
193
210
|
(required && allowRequired && !disabled ? yup.string().required(requiredMessage) : yup.string().typeError(validationMessage));
|
|
194
211
|
}
|
|
195
212
|
else if (isCountrySelect(field)) {
|
|
196
|
-
var
|
|
213
|
+
var _t = field.requiredMessage, requiredMessage = _t === void 0 ? "This field is required" : _t, _u = field.validationMessage, validationMessage = _u === void 0 ? "This field must be a string" : _u;
|
|
197
214
|
validationInternals[name_6] =
|
|
198
215
|
validationFunction ||
|
|
199
216
|
(required && allowRequired && !disabled ? yup.string().required(requiredMessage) : yup.string().typeError(validationMessage));
|
|
200
217
|
}
|
|
201
218
|
else if (isCreditCard(field)) {
|
|
202
|
-
var
|
|
219
|
+
var _v = field.requiredMessage, requiredMessage = _v === void 0 ? "This field is required" : _v, _w = field.validationMessage, validationMessage = _w === void 0 ? "This field must be a string" : _w;
|
|
203
220
|
validationInternals[name_6] =
|
|
204
221
|
validationFunction ||
|
|
205
222
|
(required && allowRequired && !disabled ? yup.string().required(requiredMessage) : yup.string().typeError(validationMessage));
|
|
206
223
|
}
|
|
207
224
|
else if (isCurrency(field)) {
|
|
208
|
-
var
|
|
225
|
+
var _x = field.requiredMessage, requiredMessage = _x === void 0 ? "This field is required" : _x, _y = field.validationMessage, validationMessage = _y === void 0 ? "This field must be a number" : _y;
|
|
209
226
|
validationInternals[name_6] =
|
|
210
227
|
validationFunction ||
|
|
211
228
|
(required && allowRequired && !disabled ? yup.number().required(requiredMessage) : yup.number().typeError(validationMessage));
|
|
212
229
|
}
|
|
213
230
|
else if (isDatePicker(field)) {
|
|
214
|
-
var
|
|
231
|
+
var _z = field.requiredMessage, requiredMessage = _z === void 0 ? "This field is required" : _z, _0 = field.validationMessage, validationMessage = _0 === void 0 ? "Please enter a valid date" : _0;
|
|
215
232
|
var dateSchema = yup
|
|
216
233
|
.date()
|
|
217
234
|
// For some reason, "value" is always wrong. Thanks react-datepicker. Thanks a lot.
|
|
@@ -228,7 +245,7 @@ var formatValidationInternals = function (_a) {
|
|
|
228
245
|
validationFunction || (required && allowRequired && !disabled ? dateSchema.required(requiredMessage) : dateSchema);
|
|
229
246
|
}
|
|
230
247
|
else if (isDescriptiveDropdownInput(field)) {
|
|
231
|
-
var
|
|
248
|
+
var _1 = field.requiredMessage, requiredMessage = _1 === void 0 ? "Please select at least one" : _1, _2 = field.validationMessage, validationMessage = _2 === void 0 ? "This field must be a string" : _2;
|
|
232
249
|
var switchType = (_b = field.options) === null || _b === void 0 ? void 0 : _b.switchType;
|
|
233
250
|
if (!switchType || switchType === SwitchTypeEnum.Radio) {
|
|
234
251
|
validationInternals[name_6] =
|
|
@@ -242,7 +259,7 @@ var formatValidationInternals = function (_a) {
|
|
|
242
259
|
}
|
|
243
260
|
}
|
|
244
261
|
else if (isEmail(field)) {
|
|
245
|
-
var
|
|
262
|
+
var _3 = field.requiredMessage, requiredMessage = _3 === void 0 ? "Please enter your email" : _3, _4 = field.validationMessage, validationMessage = _4 === void 0 ? "Invalid email" : _4;
|
|
246
263
|
validationInternals[name_6] =
|
|
247
264
|
validationFunction ||
|
|
248
265
|
(required && allowRequired && !disabled
|
|
@@ -251,7 +268,7 @@ var formatValidationInternals = function (_a) {
|
|
|
251
268
|
}
|
|
252
269
|
else if (isImagePicker(field)) {
|
|
253
270
|
var maxFileSize_1 = ((_c = field.options) === null || _c === void 0 ? void 0 : _c.maxFileSize) || 9999999999;
|
|
254
|
-
var initialValue_1 = field.initialValue,
|
|
271
|
+
var initialValue_1 = field.initialValue, _5 = field.requiredMessage, requiredMessage = _5 === void 0 ? "Please pick an image" : _5, _6 = field.validationMessage, validationMessage = _6 === void 0 ? "File cannot exceed ".concat(formatBytesToString({ bytes: maxFileSize_1 })) : _6;
|
|
255
272
|
validationInternals[name_6] =
|
|
256
273
|
validationFunction ||
|
|
257
274
|
(required && allowRequired && !disabled
|
|
@@ -259,13 +276,13 @@ var formatValidationInternals = function (_a) {
|
|
|
259
276
|
: yup.mixed().test("fileSize", validationMessage, function (value) { return imageValidation({ value: value, maxFileSize: maxFileSize_1, initialValue: initialValue_1 }); })); // will validate if there is no file, or if the initialValue is passed
|
|
260
277
|
}
|
|
261
278
|
else if (isMultiSelect(field)) {
|
|
262
|
-
var
|
|
279
|
+
var _7 = field.requiredMessage, requiredMessage = _7 === void 0 ? "This field is required" : _7;
|
|
263
280
|
validationInternals[name_6] =
|
|
264
281
|
validationFunction ||
|
|
265
282
|
(required && allowRequired && !disabled ? yup.array().of(yup.string()).min(1, requiredMessage) : yup.array().of(yup.string()));
|
|
266
283
|
}
|
|
267
284
|
else if (isNumber(field)) {
|
|
268
|
-
var
|
|
285
|
+
var _8 = field.requiredMessage, requiredMessage = _8 === void 0 ? "This field is required" : _8, _9 = field.validationMessage, validationMessage = _9 === void 0 ? "Please enter a valid number" : _9;
|
|
269
286
|
validationInternals[name_6] =
|
|
270
287
|
validationFunction ||
|
|
271
288
|
(required && allowRequired && !disabled
|
|
@@ -282,7 +299,7 @@ var formatValidationInternals = function (_a) {
|
|
|
282
299
|
}));
|
|
283
300
|
}
|
|
284
301
|
else if (isPhone(field)) {
|
|
285
|
-
var
|
|
302
|
+
var _10 = field.requiredMessage, requiredMessage = _10 === void 0 ? "Phone number is required" : _10, _11 = field.validationMessage, validationMessage = _11 === void 0 ? "Please enter a valid phone number" : _11;
|
|
286
303
|
validationInternals[name_6] =
|
|
287
304
|
validationFunction ||
|
|
288
305
|
(required && allowRequired && !disabled
|
|
@@ -300,54 +317,58 @@ var formatValidationInternals = function (_a) {
|
|
|
300
317
|
}));
|
|
301
318
|
}
|
|
302
319
|
else if (isRadioGroup(field)) {
|
|
303
|
-
var
|
|
320
|
+
var _12 = field.requiredMessage, requiredMessage = _12 === void 0 ? "Please select one" : _12, _13 = field.validationMessage, validationMessage = _13 === void 0 ? "This field must be a string" : _13;
|
|
304
321
|
validationInternals[name_6] =
|
|
305
322
|
validationFunction ||
|
|
306
323
|
(required && allowRequired && !disabled ? yup.string().required(requiredMessage) : yup.string().typeError(validationMessage));
|
|
307
324
|
}
|
|
308
325
|
else if (isSelect(field)) {
|
|
309
|
-
var
|
|
326
|
+
var _14 = field.requiredMessage, requiredMessage = _14 === void 0 ? "This field is required" : _14, _15 = field.validationMessage, validationMessage = _15 === void 0 ? "This field must be a string" : _15;
|
|
310
327
|
validationInternals[name_6] =
|
|
311
328
|
validationFunction ||
|
|
312
329
|
(required && allowRequired && !disabled ? yup.string().required(requiredMessage) : yup.string().typeError(validationMessage));
|
|
313
330
|
}
|
|
314
331
|
else if (isSocialSecurity(field)) {
|
|
315
|
-
var
|
|
332
|
+
var _16 = field.requiredMessage, requiredMessage = _16 === void 0 ? "Please enter an SSN" : _16, _17 = field.validationMessage, validationMessage = _17 === void 0 ? "Please enter a valid SSN" : _17;
|
|
316
333
|
validationInternals[name_6] =
|
|
317
334
|
validationFunction ||
|
|
318
335
|
(required && allowRequired && !disabled
|
|
319
336
|
? yup
|
|
320
337
|
.string()
|
|
338
|
+
.transform(function (value) { return (typeof value === "string" ? value.trim() : value); })
|
|
321
339
|
.matches(SSN_REGEX, {
|
|
322
340
|
excludeEmptyString: true,
|
|
323
341
|
message: validationMessage,
|
|
324
342
|
})
|
|
325
343
|
.required(requiredMessage)
|
|
326
|
-
: yup
|
|
344
|
+
: yup
|
|
345
|
+
.string()
|
|
346
|
+
.transform(function (value) { return (typeof value === "string" ? value.trim() : value); })
|
|
347
|
+
.matches(SSN_REGEX, {
|
|
327
348
|
excludeEmptyString: true,
|
|
328
349
|
message: validationMessage,
|
|
329
350
|
}));
|
|
330
351
|
}
|
|
331
352
|
else if (isStateSelect(field)) {
|
|
332
|
-
var
|
|
353
|
+
var _18 = field.requiredMessage, requiredMessage = _18 === void 0 ? "This field is required" : _18, _19 = field.validationMessage, validationMessage = _19 === void 0 ? "This field must be a string" : _19;
|
|
333
354
|
validationInternals[name_6] =
|
|
334
355
|
validationFunction ||
|
|
335
356
|
(required && allowRequired && !disabled ? yup.string().required(requiredMessage) : yup.string().typeError(validationMessage));
|
|
336
357
|
}
|
|
337
358
|
else if (isTextarea(field)) {
|
|
338
|
-
var
|
|
359
|
+
var _20 = field.requiredMessage, requiredMessage = _20 === void 0 ? "This field is required" : _20, _21 = field.validationMessage, validationMessage = _21 === void 0 ? "This field must be a string" : _21;
|
|
339
360
|
validationInternals[name_6] =
|
|
340
361
|
validationFunction ||
|
|
341
362
|
(required && allowRequired && !disabled ? yup.string().required(requiredMessage) : yup.string().typeError(validationMessage));
|
|
342
363
|
}
|
|
343
364
|
else if (isToggleGroup(field)) {
|
|
344
|
-
var
|
|
365
|
+
var _22 = field.requiredMessage, requiredMessage = _22 === void 0 ? "Please select at least one" : _22;
|
|
345
366
|
validationInternals[name_6] =
|
|
346
367
|
validationFunction ||
|
|
347
368
|
(required && allowRequired && !disabled ? yup.array().of(yup.string()).min(1, requiredMessage) : yup.array().of(yup.string()));
|
|
348
369
|
}
|
|
349
370
|
else if (isZipCode(field)) {
|
|
350
|
-
var
|
|
371
|
+
var _23 = field.requiredMessage, requiredMessage = _23 === void 0 ? "Please enter a zip code" : _23, _24 = field.validationMessage, validationMessage = _24 === void 0 ? "Please enter a valid zip code" : _24;
|
|
351
372
|
validationInternals[name_6] =
|
|
352
373
|
validationFunction ||
|
|
353
374
|
(required && allowRequired && !disabled
|
|
@@ -364,7 +385,7 @@ var formatValidationInternals = function (_a) {
|
|
|
364
385
|
}));
|
|
365
386
|
}
|
|
366
387
|
else {
|
|
367
|
-
var
|
|
388
|
+
var _25 = field.requiredMessage, requiredMessage = _25 === void 0 ? "This field is required" : _25, _26 = field.validationMessage, validationMessage = _26 === void 0 ? "This field must be a string" : _26;
|
|
368
389
|
validationInternals[name_6] =
|
|
369
390
|
validationFunction ||
|
|
370
391
|
(required && allowRequired && !disabled
|
|
@@ -697,4 +718,4 @@ var LoadingInput = styled.div(templateObject_32 || (templateObject_32 = __makeTe
|
|
|
697
718
|
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17, templateObject_18, templateObject_19, templateObject_20, templateObject_21, templateObject_22, templateObject_23, templateObject_24, templateObject_25, templateObject_26, templateObject_27, templateObject_28, templateObject_29, templateObject_30, templateObject_31, templateObject_32;
|
|
698
719
|
|
|
699
720
|
export { AddButtonGroup as A, ButtonGroup as B, CenterCheckbox as C, DefaultPixelWidth as D, FormWrapper as F, HelperTextGrid as H, InputBox as I, LoadingBase as L, RightGutter as R, SubHeader as S, TitleGroup as T, ValidationTextGrid as V, FormSeparator as a, LoadingBox as b, LoadingLabel as c, LoadingInput as d, FieldBox as e, LeftGutter as f, LeftLabel as g, formHasValues as h, RemovableFieldBox as i, RemoveButtonWrapper as j, RemovableButtonBox as k, Text as l, InlineFieldGrid as m, InlineFieldCell as n, CenterToggle as o, FormGroup as p, FormTitleGroup as q, Title as r, ClearFormButtonWrap as s, shouldFade as t, AddButtonBox as u, SubmitButton as v, CancelButton as w, formatValidation as x, formatInitialValues as y };
|
|
700
|
-
//# sourceMappingURL=FormStyles-
|
|
721
|
+
//# sourceMappingURL=FormStyles-wlDzB1vZ.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FormStyles-
|
|
1
|
+
{"version":3,"file":"FormStyles-wlDzB1vZ.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
package/lib/esm/FormWrapper.js
CHANGED
|
@@ -5,7 +5,7 @@ import './BodyLEmphasis.js';
|
|
|
5
5
|
import './Loading.js';
|
|
6
6
|
import './Scroller.js';
|
|
7
7
|
import './Inputs-C6OWHviY.js';
|
|
8
|
-
export { u as AddButtonBox, A as AddButtonGroup, B as ButtonGroup, w as CancelButton, C as CenterCheckbox, o as CenterToggle, s as ClearFormButtonWrap, e as FieldBox, p as FormGroup, a as FormSeparator, q as FormTitleGroup, F as FormWrapper, H as HelperTextGrid, n as InlineFieldCell, m as InlineFieldGrid, I as InputBox, f as LeftGutter, g as LeftLabel, L as LoadingBase, b as LoadingBox, d as LoadingInput, c as LoadingLabel, k as RemovableButtonBox, i as RemovableFieldBox, j as RemoveButtonWrapper, R as RightGutter, S as SubHeader, v as SubmitButton, l as Text, r as Title, T as TitleGroup, V as ValidationTextGrid } from './FormStyles-
|
|
8
|
+
export { u as AddButtonBox, A as AddButtonGroup, B as ButtonGroup, w as CancelButton, C as CenterCheckbox, o as CenterToggle, s as ClearFormButtonWrap, e as FieldBox, p as FormGroup, a as FormSeparator, q as FormTitleGroup, F as FormWrapper, H as HelperTextGrid, n as InlineFieldCell, m as InlineFieldGrid, I as InputBox, f as LeftGutter, g as LeftLabel, L as LoadingBase, b as LoadingBox, d as LoadingInput, c as LoadingLabel, k as RemovableButtonBox, i as RemovableFieldBox, j as RemoveButtonWrapper, R as RightGutter, S as SubHeader, v as SubmitButton, l as Text, r as Title, T as TitleGroup, V as ValidationTextGrid } from './FormStyles-wlDzB1vZ.js';
|
|
9
9
|
import 'react/jsx-runtime';
|
|
10
10
|
import './IconComponentStyles-BwczcTS4.js';
|
|
11
11
|
import './CheckboxStyles-Cx6hCn3t.js';
|
|
@@ -16,6 +16,8 @@ import './Switches-yNTNw1zb.js';
|
|
|
16
16
|
import './DescriptiveSwitchMenuStyles-CQ_uwipg.js';
|
|
17
17
|
import './SwitchTypeEnum.js';
|
|
18
18
|
import './addOrRemoveById.js';
|
|
19
|
+
import './validateColorContrast.js';
|
|
20
|
+
import './pressedEnter.js';
|
|
19
21
|
import './formatBytesToString.js';
|
|
20
22
|
import './northAmericanNumberingPlanRegex.js';
|
|
21
23
|
import 'yup';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FormWrapper.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"FormWrapper.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -18,14 +18,15 @@ import { u as useMeasure } from './useMeasure-D89v6c_A.js';
|
|
|
18
18
|
import { usePrevious } from './usePrevious.js';
|
|
19
19
|
import './Loading.js';
|
|
20
20
|
import { ShortScroller } from './Scroller.js';
|
|
21
|
-
import { L as LoadingBase, b as LoadingBox, c as LoadingLabel, d as LoadingInput, e as FieldBox, f as LeftGutter, g as LeftLabel, H as HelperTextGrid, I as InputBox, R as RightGutter, V as ValidationTextGrid, h as formHasValues, D as DefaultPixelWidth, i as RemovableFieldBox, j as RemoveButtonWrapper, k as RemovableButtonBox, a as FormSeparator, T as TitleGroup, l as Text, S as SubHeader, m as InlineFieldGrid, n as InlineFieldCell, C as CenterCheckbox, o as CenterToggle, p as FormGroup, q as FormTitleGroup, r as Title, s as ClearFormButtonWrap, t as shouldFade, A as AddButtonGroup, u as AddButtonBox, B as ButtonGroup, v as SubmitButton, w as CancelButton, x as formatValidation, y as formatInitialValues } from './FormStyles-
|
|
21
|
+
import { L as LoadingBase, b as LoadingBox, c as LoadingLabel, d as LoadingInput, e as FieldBox, f as LeftGutter, g as LeftLabel, H as HelperTextGrid, I as InputBox, R as RightGutter, V as ValidationTextGrid, h as formHasValues, D as DefaultPixelWidth, i as RemovableFieldBox, j as RemoveButtonWrapper, k as RemovableButtonBox, a as FormSeparator, T as TitleGroup, l as Text, S as SubHeader, m as InlineFieldGrid, n as InlineFieldCell, C as CenterCheckbox, o as CenterToggle, p as FormGroup, q as FormTitleGroup, r as Title, s as ClearFormButtonWrap, t as shouldFade, A as AddButtonGroup, u as AddButtonBox, B as ButtonGroup, v as SubmitButton, w as CancelButton, x as formatValidation, y as formatInitialValues } from './FormStyles-wlDzB1vZ.js';
|
|
22
22
|
import { A as AddressInput } from './AddressInput-OGU58AzF.js';
|
|
23
23
|
import { A as Asterisk } from './Inputs-C6OWHviY.js';
|
|
24
24
|
import { flushSync } from 'react-dom';
|
|
25
25
|
import { C as CheckboxItem } from './CheckboxItem-CqZ7Bo3j.js';
|
|
26
26
|
import { C as CheckboxGroup } from './CheckboxGroup-DLMaYrFn.js';
|
|
27
|
+
import { I as InlineColorPickerInput, C as ColorPickerInput } from './ColorPickerInput-S8X2gIA5.js';
|
|
27
28
|
import { C as ConfigurableInput } from './ConfigurableInput-BjJTNTyz.js';
|
|
28
|
-
import { isSelectOptionType, isSwitchMenuOptionsType, isArrayOfSelectOptionsType, isAddress, isCountrySelect, isCountySelect, isCreditCard, isCurrency, isDatePicker, isDescriptiveDropdownInput, isEmail, isMultiSelect, isNumber, isPassword, isPhone, isSelect, isSocialSecurity, isStateSelect, isZipCode, isText, RemovableFieldTypeEnum, isSplitLine, isSectionHeader, isCheckbox, isImagePicker, isToggle, isFormFieldType, isCheckboxGroup, isConfigurableInput, isHidden, isNationalitySelect, isRadioGroup, isRemovable, isTextarea, isToggleGroup } from './FormFieldTypeEnum.js';
|
|
29
|
+
import { isSelectOptionType, isSwitchMenuOptionsType, isArrayOfSelectOptionsType, isAddress, isCountrySelect, isCountySelect, isCreditCard, isCurrency, isDatePicker, isDescriptiveDropdownInput, isEmail, isMultiSelect, isNumber, isPassword, isPhone, isSelect, isSocialSecurity, isStateSelect, isZipCode, isText, RemovableFieldTypeEnum, isSplitLine, isSectionHeader, isCheckbox, isImagePicker, isToggle, isFormFieldType, isCheckboxGroup, isColorPicker, isConfigurableInput, isHidden, isNationalitySelect, isRadioGroup, isRemovable, isTextarea, isToggleGroup } from './FormFieldTypeEnum.js';
|
|
29
30
|
import { c as countryList, C as CountryDropdown, F as Flag } from './CountryDropdown-lsqagQgA.js';
|
|
30
31
|
import { stateAbbreviationLookup } from './stateAbbreviationLookup.js';
|
|
31
32
|
import { usCounties } from './usCounties.js';
|
|
@@ -37,7 +38,7 @@ import { C as CurrencyInput } from './CurrencyInput-CzI4uaoz.js';
|
|
|
37
38
|
import { I as InlineCurrencyInput } from './InlineCurrencyInput-DPpU3QyZ.js';
|
|
38
39
|
import { getFloatValueFromString } from './formatBytesToString.js';
|
|
39
40
|
import { DatePicker } from './DatePicker.js';
|
|
40
|
-
import { I as InlineDatePicker } from './InlineDatePicker-
|
|
41
|
+
import { I as InlineDatePicker } from './InlineDatePicker-BuxjkoV0.js';
|
|
41
42
|
import './CheckboxStyles-Cx6hCn3t.js';
|
|
42
43
|
import './RadioStyles-CjeGoQU0.js';
|
|
43
44
|
import './ToggleStyles-DxTKSAXl.js';
|
|
@@ -191,6 +192,32 @@ var CheckboxGroupField = function (_a) {
|
|
|
191
192
|
}, required: required && !disabled, showValidationMessage: !leftLabels && showValidationMessage, validationMessage: validationMessage })) })), leftLabels && (jsx(RightGutter, { "$switchSpacing": true, children: jsx(ValidationTextGrid, { "$showValidationMessage": showValidationMessage, "$switchSpacing": true, children: validationMessage }) }))] }));
|
|
192
193
|
};
|
|
193
194
|
|
|
195
|
+
var ColorPickerField = function (_a) {
|
|
196
|
+
var fade = _a.fade, field = _a.field, formikProps = _a.formikProps, leftLabels = _a.leftLabels, leftLabelsRightGutter = _a.leftLabelsRightGutter, leftLabelWidth = _a.leftLabelWidth, rowGap = _a.rowGap, setHasValues = _a.setHasValues, setSubmitAttempt = _a.setSubmitAttempt, submitAttempt = _a.submitAttempt, submitOnBlur = _a.submitOnBlur;
|
|
197
|
+
var theme = useTheme();
|
|
198
|
+
var values = formikProps.values, errors = formikProps.errors, touched = formikProps.touched, handleBlur = formikProps.handleBlur, handleChange = formikProps.handleChange, submitForm = formikProps.submitForm;
|
|
199
|
+
var _b = field.disabled, disabled = _b === void 0 ? false : _b, fieldLabel = field.fieldLabel, name = field.name, nextGap = field.nextGap, _c = field.options, options = _c === void 0 ? {} : _c, width = field.width;
|
|
200
|
+
var helperText = options.helperText, onInputBlur = options.onInputBlur, onChange = options.onChange;
|
|
201
|
+
var showValidationMessage = (touched[name] || submitAttempt) && !!errors[name];
|
|
202
|
+
var validationMessage = errors[name];
|
|
203
|
+
var InputComponent = leftLabels ? InlineColorPickerInput : ColorPickerInput;
|
|
204
|
+
var InputWrap = leftLabels ? InputBox : Fragment;
|
|
205
|
+
return (jsxs(FieldBox, { "$fade": fade, "$fieldWidth": leftLabels ? undefined : width, "$leftLabelLayout": leftLabels, "$leftLabelWidth": leftLabelWidth, "$leftLabelsRightGutter": leftLabelsRightGutter, "$rowGap": nextGap !== null && nextGap !== void 0 ? nextGap : rowGap, children: [leftLabels && (jsxs(LeftGutter, { children: [jsx(LeftLabel, { "$textColor": disabled ? theme.input.disabledLabelColor : theme.input.leftLabelColor, "data-sentry-unmask": true, children: fieldLabel || name }), helperText && jsx(HelperTextGrid, { "data-sentry-unmask": true, children: helperText })] })), jsx(InputWrap, { children: jsx(InputComponent, __assign({}, options, { disabled: disabled }, (leftLabels ? {} : { inputLabel: fieldLabel || name }), { name: name, onChange: function (event) {
|
|
206
|
+
handleChange(event);
|
|
207
|
+
onChange === null || onChange === void 0 ? void 0 : onChange(event);
|
|
208
|
+
}, onInputBlur: function (event) {
|
|
209
|
+
flushSync(function () {
|
|
210
|
+
setSubmitAttempt(false);
|
|
211
|
+
handleBlur(event);
|
|
212
|
+
onInputBlur === null || onInputBlur === void 0 ? void 0 : onInputBlur(event);
|
|
213
|
+
setHasValues(formHasValues(values));
|
|
214
|
+
});
|
|
215
|
+
if (submitOnBlur) {
|
|
216
|
+
submitForm(event);
|
|
217
|
+
}
|
|
218
|
+
}, showValidationMessage: showValidationMessage }, (leftLabels ? {} : { validationMessage: validationMessage }), { value: values[name] || "#000000" })) }), leftLabels && (jsx(RightGutter, { children: jsx(ValidationTextGrid, { "$showValidationMessage": showValidationMessage, children: validationMessage }) }))] }));
|
|
219
|
+
};
|
|
220
|
+
|
|
194
221
|
var ConfigurableInputField = function (_a) {
|
|
195
222
|
var configurableInputFieldActiveIds = _a.configurableInputFieldActiveIds, fade = _a.fade, field = _a.field, formikProps = _a.formikProps, leftLabels = _a.leftLabels, leftLabelsRightGutter = _a.leftLabelsRightGutter, leftLabelWidth = _a.leftLabelWidth, rowGap = _a.rowGap, submitAttempt = _a.submitAttempt, setConfigurableInputFieldActiveIds = _a.setConfigurableInputFieldActiveIds, setHasValues = _a.setHasValues, setSubmitAttempt = _a.setSubmitAttempt, submitOnBlur = _a.submitOnBlur;
|
|
196
223
|
var theme = useTheme();
|
|
@@ -1459,6 +1486,9 @@ var Form = function (_a) {
|
|
|
1459
1486
|
else if (isCheckboxGroup(field) && (!field.showIf || field.showIf({ values: values }))) {
|
|
1460
1487
|
return (jsx(CheckboxGroupField, { fade: shouldFade({ isDeleting: isDeleting, index: index }), field: field, formikProps: formikProps, leftLabels: leftLabels, leftLabelWidth: leftLabelWidth, leftLabelsRightGutter: leftLabelsRightGutter, rowGap: rowGap, setHasValues: setHasValues, submitAttempt: submitAttempt, submitOnBlur: submitOnBlur }, name_1));
|
|
1461
1488
|
}
|
|
1489
|
+
else if (isColorPicker(field) && (!field.showIf || field.showIf({ values: values }))) {
|
|
1490
|
+
return (jsx(ColorPickerField, { fade: shouldFade({ isDeleting: isDeleting, index: index }), field: field, formikProps: formikProps, leftLabels: leftLabels, leftLabelWidth: leftLabelWidth, leftLabelsRightGutter: leftLabelsRightGutter, rowGap: rowGap, setHasValues: setHasValues, setSubmitAttempt: setSubmitAttempt, submitAttempt: submitAttempt, submitOnBlur: submitOnBlur }, name_1));
|
|
1491
|
+
}
|
|
1462
1492
|
else if (isConfigurableInput(field) && (!field.showIf || field.showIf({ values: values }))) {
|
|
1463
1493
|
return (jsx(ConfigurableInputField, { configurableInputFieldActiveIds: configurableInputFieldActiveIds, fade: shouldFade({ isDeleting: isDeleting, index: index }), field: field, formikProps: formikProps, leftLabels: leftLabels, leftLabelWidth: leftLabelWidth, leftLabelsRightGutter: leftLabelsRightGutter, rowGap: rowGap, setConfigurableInputFieldActiveIds: setConfigurableInputFieldActiveIds, setHasValues: setHasValues, setSubmitAttempt: setSubmitAttempt, submitAttempt: submitAttempt, submitOnBlur: submitOnBlur }, name_1));
|
|
1464
1494
|
}
|
|
@@ -1565,7 +1595,10 @@ var FormikContainer = function (props) {
|
|
|
1565
1595
|
return (jsx(Formik, { enableReinitialize: enableReinitialize, initialValues: formatInitialValues(fields), innerRef: innerRef, onSubmit: function (values, formikHelpers) {
|
|
1566
1596
|
var resetForm = formikHelpers.resetForm;
|
|
1567
1597
|
setSubmitAttempt(false);
|
|
1568
|
-
|
|
1598
|
+
// Cast values through the validation schema so transforms (e.g., trim) apply on submit
|
|
1599
|
+
var schema = formatValidation(fields, configurableInputFieldActiveIds);
|
|
1600
|
+
var castValues = schema.cast(values);
|
|
1601
|
+
submit(castValues, formikHelpers);
|
|
1569
1602
|
if (resetOnSubmit) {
|
|
1570
1603
|
resetForm({});
|
|
1571
1604
|
setHasValues(false);
|
|
@@ -1576,4 +1609,4 @@ var FormikContainer = function (props) {
|
|
|
1576
1609
|
};
|
|
1577
1610
|
|
|
1578
1611
|
export { FormikContainer as F, NationalityDropdown as N, nationalityList as n };
|
|
1579
|
-
//# sourceMappingURL=FormikContainer-
|
|
1612
|
+
//# sourceMappingURL=FormikContainer--y08X-6j.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FormikContainer-
|
|
1
|
+
{"version":3,"file":"FormikContainer--y08X-6j.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
export { C as ColorPickerInput, I as InlineColorPickerInput } from './ColorPickerInput-S8X2gIA5.js';
|
|
2
|
+
import './_tslib-CcAXazg4.js';
|
|
3
|
+
import 'react/jsx-runtime';
|
|
4
|
+
import 'react';
|
|
5
|
+
import 'styled-components';
|
|
6
|
+
import './BodyLEmphasis.js';
|
|
7
|
+
import './useMeasure-D89v6c_A.js';
|
|
8
|
+
import './addOrRemoveById.js';
|
|
9
|
+
import 'dayjs';
|
|
10
|
+
import './isEmptyObject.js';
|
|
11
|
+
import './useIsomorphicLayoutEffect-Br1zBZHl.js';
|
|
12
|
+
import './showLabel-D6KgNem4.js';
|
|
13
|
+
import './Inputs-C6OWHviY.js';
|
|
14
|
+
import './colors.js';
|
|
15
|
+
import './IconComponentStyles-BwczcTS4.js';
|
|
16
|
+
import './pressedEnter.js';
|
|
17
|
+
import './validateColorContrast.js';
|
|
18
|
+
//# sourceMappingURL=InlineColorPickerInput.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"InlineColorPickerInput.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;"}
|