@cerebruminc/cerebellum 16.1.1 → 16.2.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/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-CM25rbhG.js} +38 -21
- package/lib/cjs/{FormStyles-CxgYRZOl.js.map → FormStyles-CM25rbhG.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-DVL86Jri.js} +33 -3
- package/lib/cjs/{FormikContainer-CY2nLsAs.js.map → FormikContainer-DVL86Jri.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-CyqyMC1o.js} +39 -22
- package/lib/esm/{FormStyles-BQJPyTS0.js.map → FormStyles-CyqyMC1o.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-uI5oe1px.js} +34 -4
- package/lib/esm/{FormikContainer-SJPYfIkF.js.map → FormikContainer-uI5oe1px.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-CM25rbhG.js');
|
|
4
|
+
var FormikContainer = require('./FormikContainer-DVL86Jri.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-CM25rbhG.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');
|
|
@@ -195,8 +196,24 @@ var formatValidationInternals = function (_a) {
|
|
|
195
196
|
validationFunction ||
|
|
196
197
|
(required && allowRequired && !disabled ? yup__namespace.array().of(yup__namespace.string()).min(1, requiredMessage) : yup__namespace.array().of(yup__namespace.string()));
|
|
197
198
|
}
|
|
199
|
+
else if (FormFieldTypeEnum.isColorPicker(field)) {
|
|
200
|
+
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;
|
|
201
|
+
var _l = field.options || {}, _m = _l.checkLegible, checkLegible = _m === void 0 ? false : _m, _o = _l.legibleAgainst, legibleAgainst_1 = _o === void 0 ? "#ffffff" : _o;
|
|
202
|
+
// Create base string validation
|
|
203
|
+
var colorSchema = yup__namespace.string();
|
|
204
|
+
// Add contrast validation if checkLegible is enabled
|
|
205
|
+
if (checkLegible) {
|
|
206
|
+
colorSchema = colorSchema.test("color-contrast", validationMessage, function (value) {
|
|
207
|
+
if (!value)
|
|
208
|
+
return true; // Allow empty values, let required validation handle this
|
|
209
|
+
return validateColorContrast.validateColorContrast(value, legibleAgainst_1);
|
|
210
|
+
});
|
|
211
|
+
}
|
|
212
|
+
validationInternals[name_6] =
|
|
213
|
+
validationFunction || (required && allowRequired && !disabled ? colorSchema.required(requiredMessage) : colorSchema);
|
|
214
|
+
}
|
|
198
215
|
else if (FormFieldTypeEnum.isConfigurableInput(field)) {
|
|
199
|
-
var
|
|
216
|
+
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
217
|
var maskedRadios = options.maskedRadios, defaultId = options.defaultId;
|
|
201
218
|
var activeId = configurableInputFieldActiveIds[name_6] || defaultId || maskedRadios[0].value;
|
|
202
219
|
var selectedOption = addOrRemoveById.getObjectById({ array: maskedRadios, id: activeId, idKey: "value" });
|
|
@@ -209,31 +226,31 @@ var formatValidationInternals = function (_a) {
|
|
|
209
226
|
: yup__namespace.string().typeError(validationMessage));
|
|
210
227
|
}
|
|
211
228
|
else if (FormFieldTypeEnum.isCountySelect(field)) {
|
|
212
|
-
var
|
|
229
|
+
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
230
|
validationInternals[name_6] =
|
|
214
231
|
validationFunction ||
|
|
215
232
|
(required && allowRequired && !disabled ? yup__namespace.string().required(requiredMessage) : yup__namespace.string().typeError(validationMessage));
|
|
216
233
|
}
|
|
217
234
|
else if (FormFieldTypeEnum.isCountrySelect(field)) {
|
|
218
|
-
var
|
|
235
|
+
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
236
|
validationInternals[name_6] =
|
|
220
237
|
validationFunction ||
|
|
221
238
|
(required && allowRequired && !disabled ? yup__namespace.string().required(requiredMessage) : yup__namespace.string().typeError(validationMessage));
|
|
222
239
|
}
|
|
223
240
|
else if (FormFieldTypeEnum.isCreditCard(field)) {
|
|
224
|
-
var
|
|
241
|
+
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
242
|
validationInternals[name_6] =
|
|
226
243
|
validationFunction ||
|
|
227
244
|
(required && allowRequired && !disabled ? yup__namespace.string().required(requiredMessage) : yup__namespace.string().typeError(validationMessage));
|
|
228
245
|
}
|
|
229
246
|
else if (FormFieldTypeEnum.isCurrency(field)) {
|
|
230
|
-
var
|
|
247
|
+
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
248
|
validationInternals[name_6] =
|
|
232
249
|
validationFunction ||
|
|
233
250
|
(required && allowRequired && !disabled ? yup__namespace.number().required(requiredMessage) : yup__namespace.number().typeError(validationMessage));
|
|
234
251
|
}
|
|
235
252
|
else if (FormFieldTypeEnum.isDatePicker(field)) {
|
|
236
|
-
var
|
|
253
|
+
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
254
|
var dateSchema = yup__namespace
|
|
238
255
|
.date()
|
|
239
256
|
// For some reason, "value" is always wrong. Thanks react-datepicker. Thanks a lot.
|
|
@@ -250,7 +267,7 @@ var formatValidationInternals = function (_a) {
|
|
|
250
267
|
validationFunction || (required && allowRequired && !disabled ? dateSchema.required(requiredMessage) : dateSchema);
|
|
251
268
|
}
|
|
252
269
|
else if (FormFieldTypeEnum.isDescriptiveDropdownInput(field)) {
|
|
253
|
-
var
|
|
270
|
+
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
271
|
var switchType = (_b = field.options) === null || _b === void 0 ? void 0 : _b.switchType;
|
|
255
272
|
if (!switchType || switchType === SwitchTypeEnum.SwitchTypeEnum.Radio) {
|
|
256
273
|
validationInternals[name_6] =
|
|
@@ -264,7 +281,7 @@ var formatValidationInternals = function (_a) {
|
|
|
264
281
|
}
|
|
265
282
|
}
|
|
266
283
|
else if (FormFieldTypeEnum.isEmail(field)) {
|
|
267
|
-
var
|
|
284
|
+
var _3 = field.requiredMessage, requiredMessage = _3 === void 0 ? "Please enter your email" : _3, _4 = field.validationMessage, validationMessage = _4 === void 0 ? "Invalid email" : _4;
|
|
268
285
|
validationInternals[name_6] =
|
|
269
286
|
validationFunction ||
|
|
270
287
|
(required && allowRequired && !disabled
|
|
@@ -273,7 +290,7 @@ var formatValidationInternals = function (_a) {
|
|
|
273
290
|
}
|
|
274
291
|
else if (FormFieldTypeEnum.isImagePicker(field)) {
|
|
275
292
|
var maxFileSize_1 = ((_c = field.options) === null || _c === void 0 ? void 0 : _c.maxFileSize) || 9999999999;
|
|
276
|
-
var initialValue_1 = field.initialValue,
|
|
293
|
+
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
294
|
validationInternals[name_6] =
|
|
278
295
|
validationFunction ||
|
|
279
296
|
(required && allowRequired && !disabled
|
|
@@ -281,13 +298,13 @@ var formatValidationInternals = function (_a) {
|
|
|
281
298
|
: 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
299
|
}
|
|
283
300
|
else if (FormFieldTypeEnum.isMultiSelect(field)) {
|
|
284
|
-
var
|
|
301
|
+
var _7 = field.requiredMessage, requiredMessage = _7 === void 0 ? "This field is required" : _7;
|
|
285
302
|
validationInternals[name_6] =
|
|
286
303
|
validationFunction ||
|
|
287
304
|
(required && allowRequired && !disabled ? yup__namespace.array().of(yup__namespace.string()).min(1, requiredMessage) : yup__namespace.array().of(yup__namespace.string()));
|
|
288
305
|
}
|
|
289
306
|
else if (FormFieldTypeEnum.isNumber(field)) {
|
|
290
|
-
var
|
|
307
|
+
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
308
|
validationInternals[name_6] =
|
|
292
309
|
validationFunction ||
|
|
293
310
|
(required && allowRequired && !disabled
|
|
@@ -304,7 +321,7 @@ var formatValidationInternals = function (_a) {
|
|
|
304
321
|
}));
|
|
305
322
|
}
|
|
306
323
|
else if (FormFieldTypeEnum.isPhone(field)) {
|
|
307
|
-
var
|
|
324
|
+
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
325
|
validationInternals[name_6] =
|
|
309
326
|
validationFunction ||
|
|
310
327
|
(required && allowRequired && !disabled
|
|
@@ -322,19 +339,19 @@ var formatValidationInternals = function (_a) {
|
|
|
322
339
|
}));
|
|
323
340
|
}
|
|
324
341
|
else if (FormFieldTypeEnum.isRadioGroup(field)) {
|
|
325
|
-
var
|
|
342
|
+
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
343
|
validationInternals[name_6] =
|
|
327
344
|
validationFunction ||
|
|
328
345
|
(required && allowRequired && !disabled ? yup__namespace.string().required(requiredMessage) : yup__namespace.string().typeError(validationMessage));
|
|
329
346
|
}
|
|
330
347
|
else if (FormFieldTypeEnum.isSelect(field)) {
|
|
331
|
-
var
|
|
348
|
+
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
349
|
validationInternals[name_6] =
|
|
333
350
|
validationFunction ||
|
|
334
351
|
(required && allowRequired && !disabled ? yup__namespace.string().required(requiredMessage) : yup__namespace.string().typeError(validationMessage));
|
|
335
352
|
}
|
|
336
353
|
else if (FormFieldTypeEnum.isSocialSecurity(field)) {
|
|
337
|
-
var
|
|
354
|
+
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
355
|
validationInternals[name_6] =
|
|
339
356
|
validationFunction ||
|
|
340
357
|
(required && allowRequired && !disabled
|
|
@@ -351,25 +368,25 @@ var formatValidationInternals = function (_a) {
|
|
|
351
368
|
}));
|
|
352
369
|
}
|
|
353
370
|
else if (FormFieldTypeEnum.isStateSelect(field)) {
|
|
354
|
-
var
|
|
371
|
+
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
372
|
validationInternals[name_6] =
|
|
356
373
|
validationFunction ||
|
|
357
374
|
(required && allowRequired && !disabled ? yup__namespace.string().required(requiredMessage) : yup__namespace.string().typeError(validationMessage));
|
|
358
375
|
}
|
|
359
376
|
else if (FormFieldTypeEnum.isTextarea(field)) {
|
|
360
|
-
var
|
|
377
|
+
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
378
|
validationInternals[name_6] =
|
|
362
379
|
validationFunction ||
|
|
363
380
|
(required && allowRequired && !disabled ? yup__namespace.string().required(requiredMessage) : yup__namespace.string().typeError(validationMessage));
|
|
364
381
|
}
|
|
365
382
|
else if (FormFieldTypeEnum.isToggleGroup(field)) {
|
|
366
|
-
var
|
|
383
|
+
var _22 = field.requiredMessage, requiredMessage = _22 === void 0 ? "Please select at least one" : _22;
|
|
367
384
|
validationInternals[name_6] =
|
|
368
385
|
validationFunction ||
|
|
369
386
|
(required && allowRequired && !disabled ? yup__namespace.array().of(yup__namespace.string()).min(1, requiredMessage) : yup__namespace.array().of(yup__namespace.string()));
|
|
370
387
|
}
|
|
371
388
|
else if (FormFieldTypeEnum.isZipCode(field)) {
|
|
372
|
-
var
|
|
389
|
+
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
390
|
validationInternals[name_6] =
|
|
374
391
|
validationFunction ||
|
|
375
392
|
(required && allowRequired && !disabled
|
|
@@ -386,7 +403,7 @@ var formatValidationInternals = function (_a) {
|
|
|
386
403
|
}));
|
|
387
404
|
}
|
|
388
405
|
else {
|
|
389
|
-
var
|
|
406
|
+
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
407
|
validationInternals[name_6] =
|
|
391
408
|
validationFunction ||
|
|
392
409
|
(required && allowRequired && !disabled
|
|
@@ -754,4 +771,4 @@ exports.formHasValues = formHasValues;
|
|
|
754
771
|
exports.formatInitialValues = formatInitialValues;
|
|
755
772
|
exports.formatValidation = formatValidation;
|
|
756
773
|
exports.shouldFade = shouldFade;
|
|
757
|
-
//# sourceMappingURL=FormStyles-
|
|
774
|
+
//# sourceMappingURL=FormStyles-CM25rbhG.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FormStyles-
|
|
1
|
+
{"version":3,"file":"FormStyles-CM25rbhG.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-CM25rbhG.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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|