@cerebruminc/cerebellum 16.1.1 → 16.2.0-beta.dangerous.8a9b71d
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-zhTr63Di.js} +54 -22
- package/lib/{esm/FormStyles-BQJPyTS0.js.map → cjs/FormStyles-zhTr63Di.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-BhowOVri.js} +37 -4
- package/lib/cjs/{FormikContainer-CY2nLsAs.js.map → FormikContainer-BhowOVri.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-DMlwBOz8.js} +55 -23
- package/lib/{cjs/FormStyles-CxgYRZOl.js.map → esm/FormStyles-DMlwBOz8.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-C2RIrqq6.js} +38 -5
- package/lib/esm/{FormikContainer-SJPYfIkF.js.map → FormikContainer-C2RIrqq6.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
|
@@ -0,0 +1,187 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var _tslib = require('./_tslib-ByDtMVOd.js');
|
|
4
|
+
var jsxRuntime = require('react/jsx-runtime');
|
|
5
|
+
var React = require('react');
|
|
6
|
+
var styled = require('styled-components');
|
|
7
|
+
var BodyLEmphasis = require('./BodyLEmphasis.cjs');
|
|
8
|
+
var useMeasure = require('./useMeasure-CDq3dPfD.js');
|
|
9
|
+
var showLabel = require('./showLabel-BkZISyqw.js');
|
|
10
|
+
var Inputs = require('./Inputs-IaHMnBKw.js');
|
|
11
|
+
var pressedEnter = require('./pressedEnter.cjs');
|
|
12
|
+
var validateColorContrast = require('./validateColorContrast.cjs');
|
|
13
|
+
|
|
14
|
+
function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
|
|
15
|
+
|
|
16
|
+
var styled__default = /*#__PURE__*/_interopDefault(styled);
|
|
17
|
+
|
|
18
|
+
// Container that holds both the input and the text side by side
|
|
19
|
+
var ColorPickerContainer = styled__default.default.div(templateObject_1$1 || (templateObject_1$1 = _tslib.__makeTemplateObject(["\n align-items: center;\n display: flex;\n flex-wrap: nowrap;\n gap: 12px;\n"], ["\n align-items: center;\n display: flex;\n flex-wrap: nowrap;\n gap: 12px;\n"])));
|
|
20
|
+
var ColorInputWrapper = styled__default.default.div(templateObject_2 || (templateObject_2 = _tslib.__makeTemplateObject(["\n align-items: center;\n background: ", ";\n border: solid 1px ", ";\n border-radius: ", "px;\n display: flex;\n flex-shrink: 0; /* Prevent the square from shrinking */\n height: ", "px;\n justify-content: center;\n min-width: ", "px;\n padding: ", "px;\n position: relative;\n transition: border-color 350ms ease-out 50ms, background-color 350ms ease-out 50ms;\n /* Make the wrapper square based on inputHeight, with a larger default for color pickers */\n width: ", "px;\n \n &:hover {\n border-color: ", ";\n }\n \n &:focus-within {\n border-color: ", ";\n }\n"], ["\n align-items: center;\n background: ", ";\n border: solid 1px ", ";\n border-radius: ", "px;\n display: flex;\n flex-shrink: 0; /* Prevent the square from shrinking */\n height: ", "px;\n justify-content: center;\n min-width: ", "px;\n padding: ", "px;\n position: relative;\n transition: border-color 350ms ease-out 50ms, background-color 350ms ease-out 50ms;\n /* Make the wrapper square based on inputHeight, with a larger default for color pickers */\n width: ", "px;\n \n &:hover {\n border-color: ", ";\n }\n \n &:focus-within {\n border-color: ", ";\n }\n"])), function (_a) {
|
|
21
|
+
var _b;
|
|
22
|
+
var $themeOverride = _a.$themeOverride, theme = _a.theme;
|
|
23
|
+
return ($themeOverride === null || $themeOverride === void 0 ? void 0 : $themeOverride.inputBackgroundColor) || ((_b = theme.input) === null || _b === void 0 ? void 0 : _b.inputBackgroundColor);
|
|
24
|
+
}, function (_a) {
|
|
25
|
+
var _b, _c, _d;
|
|
26
|
+
var $disabled = _a.$disabled, theme = _a.theme, $showValidationMessage = _a.$showValidationMessage, $themeOverride = _a.$themeOverride;
|
|
27
|
+
return $showValidationMessage
|
|
28
|
+
? ($themeOverride === null || $themeOverride === void 0 ? void 0 : $themeOverride.failColor) || ((_b = theme.input) === null || _b === void 0 ? void 0 : _b.failColor)
|
|
29
|
+
: $disabled
|
|
30
|
+
? ($themeOverride === null || $themeOverride === void 0 ? void 0 : $themeOverride.disabledBorderColor) || ((_c = theme.input) === null || _c === void 0 ? void 0 : _c.disabledBorderColor)
|
|
31
|
+
: ($themeOverride === null || $themeOverride === void 0 ? void 0 : $themeOverride.inactiveBorderColor) || ((_d = theme.input) === null || _d === void 0 ? void 0 : _d.inactiveBorderColor);
|
|
32
|
+
}, function (_a) {
|
|
33
|
+
var $themeOverride = _a.$themeOverride, theme = _a.theme;
|
|
34
|
+
return ($themeOverride === null || $themeOverride === void 0 ? void 0 : $themeOverride.inputBorderRadius) || theme.input.inputBorderRadius;
|
|
35
|
+
}, function (_a) {
|
|
36
|
+
var $themeOverride = _a.$themeOverride, theme = _a.theme;
|
|
37
|
+
return ($themeOverride === null || $themeOverride === void 0 ? void 0 : $themeOverride.inputHeight) || theme.input.inputHeight;
|
|
38
|
+
}, function (_a) {
|
|
39
|
+
var $themeOverride = _a.$themeOverride, theme = _a.theme;
|
|
40
|
+
return ($themeOverride === null || $themeOverride === void 0 ? void 0 : $themeOverride.inputHeight) || theme.input.inputHeight;
|
|
41
|
+
}, function (_a) {
|
|
42
|
+
var _b;
|
|
43
|
+
var $themeOverride = _a.$themeOverride, theme = _a.theme;
|
|
44
|
+
return (_b = $themeOverride === null || $themeOverride === void 0 ? void 0 : $themeOverride.inputPadding) !== null && _b !== void 0 ? _b : theme.colorPickerInput.padding;
|
|
45
|
+
}, function (_a) {
|
|
46
|
+
var $themeOverride = _a.$themeOverride, theme = _a.theme;
|
|
47
|
+
return ($themeOverride === null || $themeOverride === void 0 ? void 0 : $themeOverride.inputHeight) || theme.input.inputHeight;
|
|
48
|
+
}, function (_a) {
|
|
49
|
+
var _b, _c, _d;
|
|
50
|
+
var $disabled = _a.$disabled, theme = _a.theme, $showValidationMessage = _a.$showValidationMessage, $themeOverride = _a.$themeOverride;
|
|
51
|
+
return $showValidationMessage
|
|
52
|
+
? ($themeOverride === null || $themeOverride === void 0 ? void 0 : $themeOverride.failColor) || ((_b = theme.input) === null || _b === void 0 ? void 0 : _b.failColor)
|
|
53
|
+
: $disabled
|
|
54
|
+
? ($themeOverride === null || $themeOverride === void 0 ? void 0 : $themeOverride.disabledBorderColor) || ((_c = theme.input) === null || _c === void 0 ? void 0 : _c.disabledBorderColor)
|
|
55
|
+
: ($themeOverride === null || $themeOverride === void 0 ? void 0 : $themeOverride.hoverBorderColor) || ((_d = theme.input) === null || _d === void 0 ? void 0 : _d.hoverBorderColor);
|
|
56
|
+
}, function (_a) {
|
|
57
|
+
var _b, _c, _d;
|
|
58
|
+
var $disabled = _a.$disabled, theme = _a.theme, $showValidationMessage = _a.$showValidationMessage, $themeOverride = _a.$themeOverride;
|
|
59
|
+
return $showValidationMessage
|
|
60
|
+
? ($themeOverride === null || $themeOverride === void 0 ? void 0 : $themeOverride.failColor) || ((_b = theme.input) === null || _b === void 0 ? void 0 : _b.failColor)
|
|
61
|
+
: $disabled
|
|
62
|
+
? ($themeOverride === null || $themeOverride === void 0 ? void 0 : $themeOverride.disabledBorderColor) || ((_c = theme.input) === null || _c === void 0 ? void 0 : _c.disabledBorderColor)
|
|
63
|
+
: ($themeOverride === null || $themeOverride === void 0 ? void 0 : $themeOverride.activeBorderColor) || ((_d = theme.input) === null || _d === void 0 ? void 0 : _d.activeBorderColor);
|
|
64
|
+
});
|
|
65
|
+
// Custom styled color input that is 90% of the wrapper size and centered
|
|
66
|
+
var ColorInput = styled__default.default.input(templateObject_3 || (templateObject_3 = _tslib.__makeTemplateObject(["\n background: none;\n border-radius: 4px;\n border: none;\n cursor: ", ";\n height: 90%;\n opacity: ", ";\n outline: none;\n width: 90%;\n \n /* Remove the default color input outline/border and ensure color is visible */\n &::-webkit-color-swatch-wrapper {\n border-radius: 4px;\n border: none;\n padding: 0;\n }\n \n &::-webkit-color-swatch {\n border: none;\n border-radius: 4px;\n outline: none;\n }\n \n &::-moz-color-swatch {\n border: none;\n border-radius: 4px;\n outline: none;\n }\n \n /* Firefox specific fixes */\n &::-moz-focus-inner {\n border: none;\n padding: 0;\n }\n \n &:focus {\n outline: none;\n }\n"], ["\n background: none;\n border-radius: 4px;\n border: none;\n cursor: ", ";\n height: 90%;\n opacity: ", ";\n outline: none;\n width: 90%;\n \n /* Remove the default color input outline/border and ensure color is visible */\n &::-webkit-color-swatch-wrapper {\n border-radius: 4px;\n border: none;\n padding: 0;\n }\n \n &::-webkit-color-swatch {\n border: none;\n border-radius: 4px;\n outline: none;\n }\n \n &::-moz-color-swatch {\n border: none;\n border-radius: 4px;\n outline: none;\n }\n \n /* Firefox specific fixes */\n &::-moz-focus-inner {\n border: none;\n padding: 0;\n }\n \n &:focus {\n outline: none;\n }\n"])), function (_a) {
|
|
67
|
+
var $disabled = _a.$disabled;
|
|
68
|
+
return ($disabled ? "not-allowed" : "pointer");
|
|
69
|
+
}, function (_a) {
|
|
70
|
+
var $disabled = _a.$disabled;
|
|
71
|
+
return ($disabled ? 0.5 : 1);
|
|
72
|
+
});
|
|
73
|
+
// Legibility text component that displays to the right, vertically centered
|
|
74
|
+
var LegibilityText = styled__default.default.div(templateObject_4 || (templateObject_4 = _tslib.__makeTemplateObject(["\n color: ", ";\n font-size: ", "px;\n opacity: ", ";\n white-space: nowrap;\n"], ["\n color: ", ";\n font-size: ", "px;\n opacity: ", ";\n white-space: nowrap;\n"])), function (_a) {
|
|
75
|
+
var _b, _c;
|
|
76
|
+
var $disabled = _a.$disabled, $themeOverride = _a.$themeOverride, theme = _a.theme;
|
|
77
|
+
return $disabled ? ($themeOverride === null || $themeOverride === void 0 ? void 0 : $themeOverride.disabledColor) || ((_b = theme.input) === null || _b === void 0 ? void 0 : _b.disabledColor) : (_c = theme.input) === null || _c === void 0 ? void 0 : _c.helperTextColor;
|
|
78
|
+
}, function (_a) {
|
|
79
|
+
var _b;
|
|
80
|
+
var theme = _a.theme;
|
|
81
|
+
return (((_b = theme.input) === null || _b === void 0 ? void 0 : _b.textFontSize) || 14) - 2;
|
|
82
|
+
}, function (_a) {
|
|
83
|
+
var $disabled = _a.$disabled;
|
|
84
|
+
return ($disabled ? 0.5 : 1);
|
|
85
|
+
});
|
|
86
|
+
var InlineColorPickerInput = function (_a) {
|
|
87
|
+
var _b = _a.checkLegible, checkLegible = _b === void 0 ? false : _b, _c = _a.disabled, disabled = _c === void 0 ? false : _c, focus = _a.focus, innerRef = _a.innerRef, inputLabel = _a.inputLabel, _d = _a.legibleAgainst, legibleAgainst = _d === void 0 ? "#ffffff" : _d, name = _a.name, onChange = _a.onChange, onEnter = _a.onEnter, onInputBlur = _a.onInputBlur, onInputFocus = _a.onInputFocus, onValueChange = _a.onValueChange, _e = _a.showValidationMessage, showValidationMessage = _e === void 0 ? false : _e, themeOverride = _a.themeOverride, value = _a.value;
|
|
88
|
+
var inputRef = innerRef || React.useRef(null);
|
|
89
|
+
// Calculate legibility and dynamic text
|
|
90
|
+
var legibilityInfo = React.useMemo(function () {
|
|
91
|
+
if (!checkLegible || !value) {
|
|
92
|
+
return { isLegible: true, legibilityText: undefined };
|
|
93
|
+
}
|
|
94
|
+
try {
|
|
95
|
+
var isLegible = validateColorContrast.validateColorContrast(value, legibleAgainst);
|
|
96
|
+
var legibilityText = void 0;
|
|
97
|
+
if (isLegible) {
|
|
98
|
+
legibilityText = "✅ Looks good";
|
|
99
|
+
}
|
|
100
|
+
else {
|
|
101
|
+
// Determine if we need lighter or darker
|
|
102
|
+
// If contrast with black is greater, the color is light and needs to be darker
|
|
103
|
+
// If contrast with white is greater, the color is dark and needs to be lighter
|
|
104
|
+
var needsDarker = pressedEnter.contrast(value, "#000000") > pressedEnter.contrast(value, "#ffffff");
|
|
105
|
+
legibilityText = needsDarker ? "⚠️ Too light" : "⚠️ Too dark";
|
|
106
|
+
}
|
|
107
|
+
return { isLegible: isLegible, legibilityText: legibilityText };
|
|
108
|
+
}
|
|
109
|
+
catch (error) {
|
|
110
|
+
// If there's an error in contrast calculation, assume it's legible
|
|
111
|
+
return { isLegible: true, legibilityText: undefined };
|
|
112
|
+
}
|
|
113
|
+
}, [checkLegible, value, legibleAgainst]);
|
|
114
|
+
React.useEffect(function () {
|
|
115
|
+
var _a;
|
|
116
|
+
if (focus) {
|
|
117
|
+
(_a = inputRef === null || inputRef === void 0 ? void 0 : inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
|
|
118
|
+
}
|
|
119
|
+
}, [focus]);
|
|
120
|
+
return (jsxRuntime.jsxs(ColorPickerContainer, { children: [jsxRuntime.jsx(ColorInputWrapper, { "$disabled": disabled, "$showValidationMessage": showValidationMessage || (checkLegible && !legibilityInfo.isLegible), "$themeOverride": themeOverride, children: jsxRuntime.jsx(ColorInput, _tslib.__assign({ ref: inputRef, type: "color", value: value, disabled: disabled, "$disabled": disabled, "$themeOverride": themeOverride }, (name ? { name: name } : {}), { onChange: function (event) {
|
|
121
|
+
onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange(event.target.value);
|
|
122
|
+
onChange === null || onChange === void 0 ? void 0 : onChange({
|
|
123
|
+
target: {
|
|
124
|
+
value: event.target.value,
|
|
125
|
+
name: name,
|
|
126
|
+
selectionStart: event.target.selectionStart || undefined,
|
|
127
|
+
selectionEnd: event.target.selectionEnd || undefined,
|
|
128
|
+
},
|
|
129
|
+
nativeEvent: event.nativeEvent,
|
|
130
|
+
});
|
|
131
|
+
}, onBlur: function (event) {
|
|
132
|
+
if (onInputBlur) {
|
|
133
|
+
onInputBlur(event);
|
|
134
|
+
}
|
|
135
|
+
}, onFocus: function (event) {
|
|
136
|
+
if (onInputFocus) {
|
|
137
|
+
onInputFocus(event);
|
|
138
|
+
}
|
|
139
|
+
}, onKeyDown: function (event) {
|
|
140
|
+
if (event.key === "Enter" && onEnter) {
|
|
141
|
+
onEnter(value);
|
|
142
|
+
}
|
|
143
|
+
}, "aria-label": typeof inputLabel === "string" ? inputLabel : undefined })) }), checkLegible && legibilityInfo.legibilityText && (jsxRuntime.jsx(LegibilityText, { "$isLegible": legibilityInfo.isLegible, "$disabled": disabled, "$themeOverride": themeOverride, children: legibilityInfo.legibilityText }))] }));
|
|
144
|
+
};
|
|
145
|
+
var templateObject_1$1, templateObject_2, templateObject_3, templateObject_4;
|
|
146
|
+
|
|
147
|
+
var InstructionalText = styled__default.default(BodyLEmphasis.BodyXSPrimary)(templateObject_1 || (templateObject_1 = _tslib.__makeTemplateObject(["\n\tcolor: ", ";\n\tfont-size: ", "px;\n\tmargin-bottom: ", "px;\n"], ["\n\tcolor: ", ";\n\tfont-size: ", "px;\n\tmargin-bottom: ", "px;\n"])), function (_a) {
|
|
148
|
+
var theme = _a.theme, $themeOverride = _a.$themeOverride;
|
|
149
|
+
return ($themeOverride === null || $themeOverride === void 0 ? void 0 : $themeOverride.instructionalTextColor) || theme.colorPickerInput.instructionalTextColor;
|
|
150
|
+
}, function (_a) {
|
|
151
|
+
var theme = _a.theme, $themeOverride = _a.$themeOverride;
|
|
152
|
+
return ($themeOverride === null || $themeOverride === void 0 ? void 0 : $themeOverride.instructionalTextFontSize) || theme.colorPickerInput.instructionalTextFontSize;
|
|
153
|
+
}, function (_a) {
|
|
154
|
+
var theme = _a.theme, $themeOverride = _a.$themeOverride;
|
|
155
|
+
return ($themeOverride === null || $themeOverride === void 0 ? void 0 : $themeOverride.instructionalTextFontSize) || theme.colorPickerInput.instructionalTextFontSize;
|
|
156
|
+
});
|
|
157
|
+
var ColorPickerInput = function (props) {
|
|
158
|
+
var _a = props.checkLegible, checkLegible = _a === void 0 ? false : _a, _b = props.disabled, disabled = _b === void 0 ? false : _b, helperText = props.helperText, inputLabel = props.inputLabel, inputWidth = props.inputWidth, instructionalText = props.instructionalText, _c = props.showValidationMessage, showValidationMessage = _c === void 0 ? false : _c, themeOverride = props.themeOverride, validationMessage = props.validationMessage;
|
|
159
|
+
var labelBoxRef = React.useRef(null);
|
|
160
|
+
var _d = useMeasure.useMeasure(), inputGroupRef = _d[0], inputGroupMeasure = _d[1];
|
|
161
|
+
var validationRef = React.useRef(null);
|
|
162
|
+
var _e = React.useState(false), designSwitch = _e[0], setDesignSwitch = _e[1];
|
|
163
|
+
var helperTextVisible = !showValidationMessage || !designSwitch;
|
|
164
|
+
React.useEffect(function () {
|
|
165
|
+
var _a, _b;
|
|
166
|
+
var validationWidth = ((_a = validationRef.current) === null || _a === void 0 ? void 0 : _a.clientWidth) || 0;
|
|
167
|
+
var labelWidth = ((_b = labelBoxRef.current) === null || _b === void 0 ? void 0 : _b.clientWidth) || 0;
|
|
168
|
+
var noRoomForTopLabel = validationWidth + labelWidth >= inputGroupMeasure.width;
|
|
169
|
+
if (noRoomForTopLabel) {
|
|
170
|
+
setDesignSwitch(true);
|
|
171
|
+
}
|
|
172
|
+
else {
|
|
173
|
+
setDesignSwitch(false);
|
|
174
|
+
}
|
|
175
|
+
}, [inputGroupMeasure.width, showValidationMessage, inputLabel, validationMessage]);
|
|
176
|
+
return (jsxRuntime.jsxs(Inputs.InputGroup, { ref: inputGroupRef, "$inputWidth": inputWidth, "$roomForError": showValidationMessage && !inputLabel, children: [jsxRuntime.jsx(Inputs.LabelBox, { ref: labelBoxRef, children: showLabel.showLabel({
|
|
177
|
+
inputLabel: inputLabel,
|
|
178
|
+
disabled: disabled,
|
|
179
|
+
disabledColor: themeOverride === null || themeOverride === void 0 ? void 0 : themeOverride.disabledColor,
|
|
180
|
+
labelColor: themeOverride === null || themeOverride === void 0 ? void 0 : themeOverride.labelColor,
|
|
181
|
+
}) }), instructionalText && jsxRuntime.jsx(InstructionalText, { "$themeOverride": themeOverride, children: instructionalText }), jsxRuntime.jsx(InlineColorPickerInput, _tslib.__assign({}, props, { checkLegible: checkLegible, themeOverride: themeOverride })), jsxRuntime.jsx(Inputs.ValidationText, { ref: validationRef, "$showValidationMessage": showValidationMessage, "$disabled": disabled, "$failColor": themeOverride === null || themeOverride === void 0 ? void 0 : themeOverride.failColor, "$disabledColor": themeOverride === null || themeOverride === void 0 ? void 0 : themeOverride.disabledColor, "$designSwitch": designSwitch && showValidationMessage, children: validationMessage }), helperTextVisible && (jsxRuntime.jsx(Inputs.HelperText, { "$disabled": disabled, "$helperTextColor": themeOverride === null || themeOverride === void 0 ? void 0 : themeOverride.helperTextColor, "$disabledColor": themeOverride === null || themeOverride === void 0 ? void 0 : themeOverride.disabledColor, "data-sentry-unmask": true, children: helperText }))] }));
|
|
182
|
+
};
|
|
183
|
+
var templateObject_1;
|
|
184
|
+
|
|
185
|
+
exports.ColorPickerInput = ColorPickerInput;
|
|
186
|
+
exports.InlineColorPickerInput = InlineColorPickerInput;
|
|
187
|
+
//# sourceMappingURL=ColorPickerInput-CBPI8IJ-.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ColorPickerInput-CBPI8IJ-.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var ColorPickerInput = require('./ColorPickerInput-CBPI8IJ-.js');
|
|
4
|
+
require('./_tslib-ByDtMVOd.js');
|
|
5
|
+
require('react/jsx-runtime');
|
|
6
|
+
require('react');
|
|
7
|
+
require('styled-components');
|
|
8
|
+
require('./BodyLEmphasis.cjs');
|
|
9
|
+
require('./useMeasure-CDq3dPfD.js');
|
|
10
|
+
require('./addOrRemoveById.cjs');
|
|
11
|
+
require('dayjs');
|
|
12
|
+
require('./isEmptyObject.cjs');
|
|
13
|
+
require('./useIsomorphicLayoutEffect-kdlV9QVN.js');
|
|
14
|
+
require('./showLabel-BkZISyqw.js');
|
|
15
|
+
require('./Inputs-IaHMnBKw.js');
|
|
16
|
+
require('./colors.cjs');
|
|
17
|
+
require('./IconComponentStyles-oUWNoaaH.js');
|
|
18
|
+
require('./pressedEnter.cjs');
|
|
19
|
+
require('./validateColorContrast.cjs');
|
|
20
|
+
|
|
21
|
+
|
|
22
|
+
|
|
23
|
+
exports.ColorPickerInput = ColorPickerInput.ColorPickerInput;
|
|
24
|
+
exports.InlineColorPickerInput = ColorPickerInput.InlineColorPickerInput;
|
|
25
|
+
//# sourceMappingURL=ColorPickerInput.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ColorPickerInput.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;"}
|
package/lib/cjs/DatePicker.cjs
CHANGED
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
var _tslib = require('./_tslib-ByDtMVOd.js');
|
|
4
4
|
var jsxRuntime = require('react/jsx-runtime');
|
|
5
5
|
var React = require('react');
|
|
6
|
-
var InlineDatePicker = require('./InlineDatePicker-
|
|
6
|
+
var InlineDatePicker = require('./InlineDatePicker-B7DTwvhv.js');
|
|
7
7
|
var useMeasure = require('./useMeasure-CDq3dPfD.js');
|
|
8
8
|
var showLabel = require('./showLabel-BkZISyqw.js');
|
|
9
9
|
var Inputs = require('./Inputs-IaHMnBKw.js');
|
package/lib/cjs/Form.cjs
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var FormWrapper = require('./FormStyles-
|
|
4
|
-
var FormikContainer = require('./FormikContainer-
|
|
3
|
+
var FormWrapper = require('./FormStyles-zhTr63Di.js');
|
|
4
|
+
var FormikContainer = require('./FormikContainer-BhowOVri.js');
|
|
5
5
|
var FormFieldTypeEnum = require('./FormFieldTypeEnum.cjs');
|
|
6
6
|
require('./_tslib-ByDtMVOd.js');
|
|
7
7
|
require('styled-components');
|
|
@@ -20,6 +20,8 @@ require('./Switches-Cpums4DB.js');
|
|
|
20
20
|
require('./DescriptiveSwitchMenuStyles-BwkgIy6d.js');
|
|
21
21
|
require('./SwitchTypeEnum.cjs');
|
|
22
22
|
require('./addOrRemoveById.cjs');
|
|
23
|
+
require('./validateColorContrast.cjs');
|
|
24
|
+
require('./pressedEnter.cjs');
|
|
23
25
|
require('./formatBytesToString.cjs');
|
|
24
26
|
require('./northAmericanNumberingPlanRegex.cjs');
|
|
25
27
|
require('yup');
|
|
@@ -28,7 +30,6 @@ require('react');
|
|
|
28
30
|
require('./ButtonColorFamilyEnum.cjs');
|
|
29
31
|
require('./LoadingEllipsis-COKIzsEu.js');
|
|
30
32
|
require('./Button.cjs');
|
|
31
|
-
require('./pressedEnter.cjs');
|
|
32
33
|
require('./ArrowLong.cjs');
|
|
33
34
|
require('./colors-BudXQEyU.js');
|
|
34
35
|
require('./CaretDown.cjs');
|
|
@@ -62,6 +63,7 @@ require('./Checkbox-Cd_xyAss.js');
|
|
|
62
63
|
require('./CheckboxEmpty.cjs');
|
|
63
64
|
require('./CheckboxFull.cjs');
|
|
64
65
|
require('./CheckboxGroup-BeBI_kWP.js');
|
|
66
|
+
require('./ColorPickerInput-CBPI8IJ-.js');
|
|
65
67
|
require('./ConfigurableInput-naz2E_Pb.js');
|
|
66
68
|
require('./RadioGroup-B0HUH_33.js');
|
|
67
69
|
require('./RadioItem-ChF6qHFI.js');
|
|
@@ -94,7 +96,7 @@ require('./cardValidationStateMachine.cjs');
|
|
|
94
96
|
require('./CurrencyInput-D_QGbxkC.js');
|
|
95
97
|
require('./InlineCurrencyInput-UjEz4U3A.js');
|
|
96
98
|
require('./DatePicker.cjs');
|
|
97
|
-
require('./InlineDatePicker-
|
|
99
|
+
require('./InlineDatePicker-B7DTwvhv.js');
|
|
98
100
|
require('./Calendar.cjs');
|
|
99
101
|
require('./ClickOutHandler-b5mI7kuA.js');
|
|
100
102
|
require('./CaretLeft.cjs');
|
|
@@ -160,6 +162,7 @@ Object.defineProperty(exports, "RemovableFieldTypeEnum", {
|
|
|
160
162
|
exports.isAddress = FormFieldTypeEnum.isAddress;
|
|
161
163
|
exports.isCheckbox = FormFieldTypeEnum.isCheckbox;
|
|
162
164
|
exports.isCheckboxGroup = FormFieldTypeEnum.isCheckboxGroup;
|
|
165
|
+
exports.isColorPicker = FormFieldTypeEnum.isColorPicker;
|
|
163
166
|
exports.isConfigurableInput = FormFieldTypeEnum.isConfigurableInput;
|
|
164
167
|
exports.isCountrySelect = FormFieldTypeEnum.isCountrySelect;
|
|
165
168
|
exports.isCountySelect = FormFieldTypeEnum.isCountySelect;
|
package/lib/cjs/Form.cjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Form.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"Form.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -5,6 +5,7 @@ exports.FormFieldTypeEnum = void 0;
|
|
|
5
5
|
FormFieldTypeEnum["Address"] = "ADDRESS";
|
|
6
6
|
FormFieldTypeEnum["Checkbox"] = "CHECKBOX";
|
|
7
7
|
FormFieldTypeEnum["CheckboxGroup"] = "CHECKBOX_GROUP";
|
|
8
|
+
FormFieldTypeEnum["ColorPicker"] = "COLOR_PICKER";
|
|
8
9
|
FormFieldTypeEnum["ConfigurableInput"] = "CONFIGURABLE_INPUT";
|
|
9
10
|
FormFieldTypeEnum["CountySelect"] = "COUNTY_SELECT";
|
|
10
11
|
FormFieldTypeEnum["CountrySelect"] = "COUNTRY_SELECT";
|
|
@@ -46,6 +47,9 @@ var isCheckbox = function (field) {
|
|
|
46
47
|
var isCheckboxGroup = function (field) {
|
|
47
48
|
return field.type === exports.FormFieldTypeEnum.CheckboxGroup;
|
|
48
49
|
};
|
|
50
|
+
var isColorPicker = function (field) {
|
|
51
|
+
return field.type === exports.FormFieldTypeEnum.ColorPicker;
|
|
52
|
+
};
|
|
49
53
|
var isConfigurableInput = function (field) {
|
|
50
54
|
return field.type === exports.FormFieldTypeEnum.ConfigurableInput;
|
|
51
55
|
};
|
|
@@ -161,6 +165,7 @@ exports.isAddress = isAddress;
|
|
|
161
165
|
exports.isArrayOfSelectOptionsType = isArrayOfSelectOptionsType;
|
|
162
166
|
exports.isCheckbox = isCheckbox;
|
|
163
167
|
exports.isCheckboxGroup = isCheckboxGroup;
|
|
168
|
+
exports.isColorPicker = isColorPicker;
|
|
164
169
|
exports.isConfigurableInput = isConfigurableInput;
|
|
165
170
|
exports.isCountrySelect = isCountrySelect;
|
|
166
171
|
exports.isCountySelect = isCountySelect;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FormFieldTypeEnum.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"FormFieldTypeEnum.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -7,7 +7,7 @@ require('./BodyLEmphasis.cjs');
|
|
|
7
7
|
require('./Loading.cjs');
|
|
8
8
|
require('./Scroller.cjs');
|
|
9
9
|
require('./Inputs-IaHMnBKw.js');
|
|
10
|
-
var FormWrapper = require('./FormStyles-
|
|
10
|
+
var FormWrapper = require('./FormStyles-zhTr63Di.js');
|
|
11
11
|
require('react/jsx-runtime');
|
|
12
12
|
require('./IconComponentStyles-oUWNoaaH.js');
|
|
13
13
|
require('./CheckboxStyles-CAzemGXD.js');
|
|
@@ -18,6 +18,8 @@ require('./Switches-Cpums4DB.js');
|
|
|
18
18
|
require('./DescriptiveSwitchMenuStyles-BwkgIy6d.js');
|
|
19
19
|
require('./SwitchTypeEnum.cjs');
|
|
20
20
|
require('./addOrRemoveById.cjs');
|
|
21
|
+
require('./validateColorContrast.cjs');
|
|
22
|
+
require('./pressedEnter.cjs');
|
|
21
23
|
require('./formatBytesToString.cjs');
|
|
22
24
|
require('./northAmericanNumberingPlanRegex.cjs');
|
|
23
25
|
require('yup');
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FormSeparator.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"FormSeparator.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -16,6 +16,7 @@ require('./Switches-Cpums4DB.js');
|
|
|
16
16
|
require('./DescriptiveSwitchMenuStyles-BwkgIy6d.js');
|
|
17
17
|
var SwitchTypeEnum = require('./SwitchTypeEnum.cjs');
|
|
18
18
|
var addOrRemoveById = require('./addOrRemoveById.cjs');
|
|
19
|
+
var validateColorContrast = require('./validateColorContrast.cjs');
|
|
19
20
|
var formatBytesToString = require('./formatBytesToString.cjs');
|
|
20
21
|
var northAmericanNumberingPlanRegex = require('./northAmericanNumberingPlanRegex.cjs');
|
|
21
22
|
var yup = require('yup');
|
|
@@ -189,14 +190,33 @@ var formatValidationInternals = function (_a) {
|
|
|
189
190
|
else if (FormFieldTypeEnum.isCheckbox(field)) {
|
|
190
191
|
validationInternals[name_6] = validationFunction || yup__namespace.boolean();
|
|
191
192
|
}
|
|
193
|
+
else if (FormFieldTypeEnum.isToggle(field)) {
|
|
194
|
+
validationInternals[name_6] = validationFunction || yup__namespace.boolean();
|
|
195
|
+
}
|
|
192
196
|
else if (FormFieldTypeEnum.isCheckboxGroup(field)) {
|
|
193
197
|
var _h = field.requiredMessage, requiredMessage = _h === void 0 ? "Please select at least one" : _h;
|
|
194
198
|
validationInternals[name_6] =
|
|
195
199
|
validationFunction ||
|
|
196
200
|
(required && allowRequired && !disabled ? yup__namespace.array().of(yup__namespace.string()).min(1, requiredMessage) : yup__namespace.array().of(yup__namespace.string()));
|
|
197
201
|
}
|
|
202
|
+
else if (FormFieldTypeEnum.isColorPicker(field)) {
|
|
203
|
+
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;
|
|
204
|
+
var _l = field.options || {}, _m = _l.checkLegible, checkLegible = _m === void 0 ? false : _m, _o = _l.legibleAgainst, legibleAgainst_1 = _o === void 0 ? "#ffffff" : _o;
|
|
205
|
+
// Create base string validation
|
|
206
|
+
var colorSchema = yup__namespace.string();
|
|
207
|
+
// Add contrast validation if checkLegible is enabled
|
|
208
|
+
if (checkLegible) {
|
|
209
|
+
colorSchema = colorSchema.test("color-contrast", validationMessage, function (value) {
|
|
210
|
+
if (!value)
|
|
211
|
+
return true; // Allow empty values, let required validation handle this
|
|
212
|
+
return validateColorContrast.validateColorContrast(value, legibleAgainst_1);
|
|
213
|
+
});
|
|
214
|
+
}
|
|
215
|
+
validationInternals[name_6] =
|
|
216
|
+
validationFunction || (required && allowRequired && !disabled ? colorSchema.required(requiredMessage) : colorSchema);
|
|
217
|
+
}
|
|
198
218
|
else if (FormFieldTypeEnum.isConfigurableInput(field)) {
|
|
199
|
-
var
|
|
219
|
+
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;
|
|
200
220
|
var maskedRadios = options.maskedRadios, defaultId = options.defaultId;
|
|
201
221
|
var activeId = configurableInputFieldActiveIds[name_6] || defaultId || maskedRadios[0].value;
|
|
202
222
|
var selectedOption = addOrRemoveById.getObjectById({ array: maskedRadios, id: activeId, idKey: "value" });
|
|
@@ -209,31 +229,31 @@ var formatValidationInternals = function (_a) {
|
|
|
209
229
|
: yup__namespace.string().typeError(validationMessage));
|
|
210
230
|
}
|
|
211
231
|
else if (FormFieldTypeEnum.isCountySelect(field)) {
|
|
212
|
-
var
|
|
232
|
+
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;
|
|
213
233
|
validationInternals[name_6] =
|
|
214
234
|
validationFunction ||
|
|
215
235
|
(required && allowRequired && !disabled ? yup__namespace.string().required(requiredMessage) : yup__namespace.string().typeError(validationMessage));
|
|
216
236
|
}
|
|
217
237
|
else if (FormFieldTypeEnum.isCountrySelect(field)) {
|
|
218
|
-
var
|
|
238
|
+
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;
|
|
219
239
|
validationInternals[name_6] =
|
|
220
240
|
validationFunction ||
|
|
221
241
|
(required && allowRequired && !disabled ? yup__namespace.string().required(requiredMessage) : yup__namespace.string().typeError(validationMessage));
|
|
222
242
|
}
|
|
223
243
|
else if (FormFieldTypeEnum.isCreditCard(field)) {
|
|
224
|
-
var
|
|
244
|
+
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;
|
|
225
245
|
validationInternals[name_6] =
|
|
226
246
|
validationFunction ||
|
|
227
247
|
(required && allowRequired && !disabled ? yup__namespace.string().required(requiredMessage) : yup__namespace.string().typeError(validationMessage));
|
|
228
248
|
}
|
|
229
249
|
else if (FormFieldTypeEnum.isCurrency(field)) {
|
|
230
|
-
var
|
|
250
|
+
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;
|
|
231
251
|
validationInternals[name_6] =
|
|
232
252
|
validationFunction ||
|
|
233
253
|
(required && allowRequired && !disabled ? yup__namespace.number().required(requiredMessage) : yup__namespace.number().typeError(validationMessage));
|
|
234
254
|
}
|
|
235
255
|
else if (FormFieldTypeEnum.isDatePicker(field)) {
|
|
236
|
-
var
|
|
256
|
+
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;
|
|
237
257
|
var dateSchema = yup__namespace
|
|
238
258
|
.date()
|
|
239
259
|
// For some reason, "value" is always wrong. Thanks react-datepicker. Thanks a lot.
|
|
@@ -250,7 +270,7 @@ var formatValidationInternals = function (_a) {
|
|
|
250
270
|
validationFunction || (required && allowRequired && !disabled ? dateSchema.required(requiredMessage) : dateSchema);
|
|
251
271
|
}
|
|
252
272
|
else if (FormFieldTypeEnum.isDescriptiveDropdownInput(field)) {
|
|
253
|
-
var
|
|
273
|
+
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;
|
|
254
274
|
var switchType = (_b = field.options) === null || _b === void 0 ? void 0 : _b.switchType;
|
|
255
275
|
if (!switchType || switchType === SwitchTypeEnum.SwitchTypeEnum.Radio) {
|
|
256
276
|
validationInternals[name_6] =
|
|
@@ -264,7 +284,7 @@ var formatValidationInternals = function (_a) {
|
|
|
264
284
|
}
|
|
265
285
|
}
|
|
266
286
|
else if (FormFieldTypeEnum.isEmail(field)) {
|
|
267
|
-
var
|
|
287
|
+
var _3 = field.requiredMessage, requiredMessage = _3 === void 0 ? "Please enter your email" : _3, _4 = field.validationMessage, validationMessage = _4 === void 0 ? "Invalid email" : _4;
|
|
268
288
|
validationInternals[name_6] =
|
|
269
289
|
validationFunction ||
|
|
270
290
|
(required && allowRequired && !disabled
|
|
@@ -273,7 +293,7 @@ var formatValidationInternals = function (_a) {
|
|
|
273
293
|
}
|
|
274
294
|
else if (FormFieldTypeEnum.isImagePicker(field)) {
|
|
275
295
|
var maxFileSize_1 = ((_c = field.options) === null || _c === void 0 ? void 0 : _c.maxFileSize) || 9999999999;
|
|
276
|
-
var initialValue_1 = field.initialValue,
|
|
296
|
+
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.formatBytesToString({ bytes: maxFileSize_1 })) : _6;
|
|
277
297
|
validationInternals[name_6] =
|
|
278
298
|
validationFunction ||
|
|
279
299
|
(required && allowRequired && !disabled
|
|
@@ -281,13 +301,13 @@ var formatValidationInternals = function (_a) {
|
|
|
281
301
|
: yup__namespace.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
|
|
282
302
|
}
|
|
283
303
|
else if (FormFieldTypeEnum.isMultiSelect(field)) {
|
|
284
|
-
var
|
|
304
|
+
var _7 = field.requiredMessage, requiredMessage = _7 === void 0 ? "This field is required" : _7;
|
|
285
305
|
validationInternals[name_6] =
|
|
286
306
|
validationFunction ||
|
|
287
307
|
(required && allowRequired && !disabled ? yup__namespace.array().of(yup__namespace.string()).min(1, requiredMessage) : yup__namespace.array().of(yup__namespace.string()));
|
|
288
308
|
}
|
|
289
309
|
else if (FormFieldTypeEnum.isNumber(field)) {
|
|
290
|
-
var
|
|
310
|
+
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;
|
|
291
311
|
validationInternals[name_6] =
|
|
292
312
|
validationFunction ||
|
|
293
313
|
(required && allowRequired && !disabled
|
|
@@ -304,7 +324,7 @@ var formatValidationInternals = function (_a) {
|
|
|
304
324
|
}));
|
|
305
325
|
}
|
|
306
326
|
else if (FormFieldTypeEnum.isPhone(field)) {
|
|
307
|
-
var
|
|
327
|
+
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;
|
|
308
328
|
validationInternals[name_6] =
|
|
309
329
|
validationFunction ||
|
|
310
330
|
(required && allowRequired && !disabled
|
|
@@ -322,54 +342,66 @@ var formatValidationInternals = function (_a) {
|
|
|
322
342
|
}));
|
|
323
343
|
}
|
|
324
344
|
else if (FormFieldTypeEnum.isRadioGroup(field)) {
|
|
325
|
-
var
|
|
345
|
+
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;
|
|
326
346
|
validationInternals[name_6] =
|
|
327
347
|
validationFunction ||
|
|
328
348
|
(required && allowRequired && !disabled ? yup__namespace.string().required(requiredMessage) : yup__namespace.string().typeError(validationMessage));
|
|
329
349
|
}
|
|
330
350
|
else if (FormFieldTypeEnum.isSelect(field)) {
|
|
331
|
-
var
|
|
351
|
+
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;
|
|
332
352
|
validationInternals[name_6] =
|
|
333
353
|
validationFunction ||
|
|
334
354
|
(required && allowRequired && !disabled ? yup__namespace.string().required(requiredMessage) : yup__namespace.string().typeError(validationMessage));
|
|
335
355
|
}
|
|
336
356
|
else if (FormFieldTypeEnum.isSocialSecurity(field)) {
|
|
337
|
-
var
|
|
357
|
+
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;
|
|
338
358
|
validationInternals[name_6] =
|
|
339
359
|
validationFunction ||
|
|
340
360
|
(required && allowRequired && !disabled
|
|
341
361
|
? yup__namespace
|
|
342
362
|
.string()
|
|
363
|
+
.transform(function (value) {
|
|
364
|
+
return typeof value === "string"
|
|
365
|
+
? value.trim().replace(/-/g, "")
|
|
366
|
+
: value;
|
|
367
|
+
})
|
|
343
368
|
.matches(SSN_REGEX, {
|
|
344
369
|
excludeEmptyString: true,
|
|
345
370
|
message: validationMessage,
|
|
346
371
|
})
|
|
347
372
|
.required(requiredMessage)
|
|
348
|
-
: yup__namespace
|
|
373
|
+
: yup__namespace
|
|
374
|
+
.string()
|
|
375
|
+
.transform(function (value) {
|
|
376
|
+
return typeof value === "string"
|
|
377
|
+
? value.trim().replace(/-/g, "")
|
|
378
|
+
: value;
|
|
379
|
+
})
|
|
380
|
+
.matches(SSN_REGEX, {
|
|
349
381
|
excludeEmptyString: true,
|
|
350
382
|
message: validationMessage,
|
|
351
383
|
}));
|
|
352
384
|
}
|
|
353
385
|
else if (FormFieldTypeEnum.isStateSelect(field)) {
|
|
354
|
-
var
|
|
386
|
+
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;
|
|
355
387
|
validationInternals[name_6] =
|
|
356
388
|
validationFunction ||
|
|
357
389
|
(required && allowRequired && !disabled ? yup__namespace.string().required(requiredMessage) : yup__namespace.string().typeError(validationMessage));
|
|
358
390
|
}
|
|
359
391
|
else if (FormFieldTypeEnum.isTextarea(field)) {
|
|
360
|
-
var
|
|
392
|
+
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;
|
|
361
393
|
validationInternals[name_6] =
|
|
362
394
|
validationFunction ||
|
|
363
395
|
(required && allowRequired && !disabled ? yup__namespace.string().required(requiredMessage) : yup__namespace.string().typeError(validationMessage));
|
|
364
396
|
}
|
|
365
397
|
else if (FormFieldTypeEnum.isToggleGroup(field)) {
|
|
366
|
-
var
|
|
398
|
+
var _22 = field.requiredMessage, requiredMessage = _22 === void 0 ? "Please select at least one" : _22;
|
|
367
399
|
validationInternals[name_6] =
|
|
368
400
|
validationFunction ||
|
|
369
401
|
(required && allowRequired && !disabled ? yup__namespace.array().of(yup__namespace.string()).min(1, requiredMessage) : yup__namespace.array().of(yup__namespace.string()));
|
|
370
402
|
}
|
|
371
403
|
else if (FormFieldTypeEnum.isZipCode(field)) {
|
|
372
|
-
var
|
|
404
|
+
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;
|
|
373
405
|
validationInternals[name_6] =
|
|
374
406
|
validationFunction ||
|
|
375
407
|
(required && allowRequired && !disabled
|
|
@@ -386,7 +418,7 @@ var formatValidationInternals = function (_a) {
|
|
|
386
418
|
}));
|
|
387
419
|
}
|
|
388
420
|
else {
|
|
389
|
-
var
|
|
421
|
+
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;
|
|
390
422
|
validationInternals[name_6] =
|
|
391
423
|
validationFunction ||
|
|
392
424
|
(required && allowRequired && !disabled
|
|
@@ -754,4 +786,4 @@ exports.formHasValues = formHasValues;
|
|
|
754
786
|
exports.formatInitialValues = formatInitialValues;
|
|
755
787
|
exports.formatValidation = formatValidation;
|
|
756
788
|
exports.shouldFade = shouldFade;
|
|
757
|
-
//# sourceMappingURL=FormStyles-
|
|
789
|
+
//# sourceMappingURL=FormStyles-zhTr63Di.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FormStyles-
|
|
1
|
+
{"version":3,"file":"FormStyles-zhTr63Di.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
package/lib/cjs/FormWrapper.cjs
CHANGED
|
@@ -7,7 +7,7 @@ require('./BodyLEmphasis.cjs');
|
|
|
7
7
|
require('./Loading.cjs');
|
|
8
8
|
require('./Scroller.cjs');
|
|
9
9
|
require('./Inputs-IaHMnBKw.js');
|
|
10
|
-
var FormWrapper = require('./FormStyles-
|
|
10
|
+
var FormWrapper = require('./FormStyles-zhTr63Di.js');
|
|
11
11
|
require('react/jsx-runtime');
|
|
12
12
|
require('./IconComponentStyles-oUWNoaaH.js');
|
|
13
13
|
require('./CheckboxStyles-CAzemGXD.js');
|
|
@@ -18,6 +18,8 @@ require('./Switches-Cpums4DB.js');
|
|
|
18
18
|
require('./DescriptiveSwitchMenuStyles-BwkgIy6d.js');
|
|
19
19
|
require('./SwitchTypeEnum.cjs');
|
|
20
20
|
require('./addOrRemoveById.cjs');
|
|
21
|
+
require('./validateColorContrast.cjs');
|
|
22
|
+
require('./pressedEnter.cjs');
|
|
21
23
|
require('./formatBytesToString.cjs');
|
|
22
24
|
require('./northAmericanNumberingPlanRegex.cjs');
|
|
23
25
|
require('yup');
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FormWrapper.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"FormWrapper.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|