@thecb/components 6.1.0-beta.0 → 6.1.0-beta.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.cjs.js +94 -26
- package/dist/index.cjs.js.map +1 -1
- package/dist/index.esm.js +94 -26
- package/dist/index.esm.js.map +1 -1
- package/package.json +1 -1
- package/src/components/atoms/checkbox/Checkbox.theme.js +4 -3
- package/src/components/atoms/dropdown/Dropdown.js +12 -6
- package/src/components/atoms/form-layouts/FormInput.js +22 -4
- package/src/components/atoms/form-layouts/FormLayouts.theme.js +3 -3
- package/src/components/atoms/form-select/FormSelect.js +8 -2
- package/src/components/molecules/account-and-routing-modal/AccountAndRoutingModal.theme.js +1 -1
- package/src/components/molecules/modal/Modal.js +73 -57
- package/src/components/molecules/modal/Modal.stories.js +52 -3
- package/src/components/molecules/obligation/modules/AutopayModalModule.theme.js +1 -1
- package/src/components/molecules/periscope-dashboard-iframe/PeriscopeDashboardIframe.js +5 -2
- package/src/components/molecules/terms-and-conditions-modal/TermsAndConditionsModal.js +3 -1
- package/src/components/molecules/terms-and-conditions-modal/TermsAndConditionsModal.theme.js +1 -1
- package/src/constants/colors.js +3 -1
- package/src/util/focusFirstInvalidInputHook.js +20 -0
- package/src/util/general.js +45 -1
- package/src/util/index.js +2 -1
package/dist/index.esm.js
CHANGED
|
@@ -4863,7 +4863,8 @@ var BOSTON_BLUE = "#357fb8";
|
|
|
4863
4863
|
var INFO_BLUE = "#E4F4FD";
|
|
4864
4864
|
var HOVER_LIGHT_BLUE = "#EFFAFF";
|
|
4865
4865
|
var MATISSE_BLUE = "#15749D";
|
|
4866
|
-
var ROYAL_BLUE = "#3181E3";
|
|
4866
|
+
var ROYAL_BLUE = "#3181E3";
|
|
4867
|
+
var ASTRAL_BLUE = "#3176AA"; // GREEN
|
|
4867
4868
|
|
|
4868
4869
|
var FOREST_GREEN = "#19b03F";
|
|
4869
4870
|
var MEADOW_GREEN = "#16C98D";
|
|
@@ -4885,7 +4886,7 @@ var APRICOT_ORANGE = "#FFE8D8"; // RED
|
|
|
4885
4886
|
var RED = "#FF0000";
|
|
4886
4887
|
var CRIMSON_RED = "#ED1C24";
|
|
4887
4888
|
var THUNDERBIRD_RED = "#C3191F";
|
|
4888
|
-
var RAZZMATAZZ_RED = "#
|
|
4889
|
+
var RAZZMATAZZ_RED = "#D11053";
|
|
4889
4890
|
var FANTASY_RED = "#FCF4F4";
|
|
4890
4891
|
var COSMOS_RED = "#FFD0D3";
|
|
4891
4892
|
var BLUSH_RED = "#FFF0F5"; // Second level color constants
|
|
@@ -4969,6 +4970,7 @@ var colors = /*#__PURE__*/Object.freeze({
|
|
|
4969
4970
|
HOVER_LIGHT_BLUE: HOVER_LIGHT_BLUE,
|
|
4970
4971
|
MATISSE_BLUE: MATISSE_BLUE,
|
|
4971
4972
|
ROYAL_BLUE: ROYAL_BLUE,
|
|
4973
|
+
ASTRAL_BLUE: ASTRAL_BLUE,
|
|
4972
4974
|
FOREST_GREEN: FOREST_GREEN,
|
|
4973
4975
|
MEADOW_GREEN: MEADOW_GREEN,
|
|
4974
4976
|
POLAR_GREEN: POLAR_GREEN,
|
|
@@ -6064,6 +6066,18 @@ var createUniqueId = function createUniqueId() {
|
|
|
6064
6066
|
return "_" + Math.random().toString(36).substr(2, 9);
|
|
6065
6067
|
};
|
|
6066
6068
|
|
|
6069
|
+
var createIdFromString = function createIdFromString(text, postscript) {
|
|
6070
|
+
var unique = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
|
|
6071
|
+
|
|
6072
|
+
if (text === undefined) {
|
|
6073
|
+
return createUniqueId();
|
|
6074
|
+
} else {
|
|
6075
|
+
// "first name", undefined, false -> "first-name"
|
|
6076
|
+
// "email address", "error message", false -> "email-address-error-message"
|
|
6077
|
+
// "shopping cart", "order item", true -> "shopping-cart-order-item_2ahtlz608"
|
|
6078
|
+
return "".concat(text === null || text === void 0 ? void 0 : text.replace(/\s+/g, "-")).concat(postscript ? "-".concat(postscript === null || postscript === void 0 ? void 0 : postscript.replace(/\s+/g, "-")) : "").concat(unique ? createUniqueId() : "");
|
|
6079
|
+
}
|
|
6080
|
+
};
|
|
6067
6081
|
var safeChildren = function safeChildren(children) {
|
|
6068
6082
|
var replacement = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
|
|
6069
6083
|
var unsafeValues = [false, undefined, NaN, null];
|
|
@@ -6078,9 +6092,16 @@ var safeChildren = function safeChildren(children) {
|
|
|
6078
6092
|
|
|
6079
6093
|
return unsafeValues.includes(children) ? replacement : children;
|
|
6080
6094
|
};
|
|
6081
|
-
var generateClickHandler = function generateClickHandler(form, handleErrors, submitForm) {
|
|
6095
|
+
var generateClickHandler = function generateClickHandler(form, handleErrors, submitForm, resetErrors) {
|
|
6082
6096
|
return function (e) {
|
|
6083
6097
|
e.preventDefault();
|
|
6098
|
+
|
|
6099
|
+
if (resetErrors) {
|
|
6100
|
+
// if provided, will reset error state tracker
|
|
6101
|
+
// allows hooks that depend on error state to re-run
|
|
6102
|
+
resetErrors();
|
|
6103
|
+
}
|
|
6104
|
+
|
|
6084
6105
|
var formHasError = Object.values(form.fields).reduce(function (acc, curr) {
|
|
6085
6106
|
return acc || curr.hasErrors;
|
|
6086
6107
|
}, false);
|
|
@@ -6137,6 +6158,8 @@ var checkDeniedCards = function checkDeniedCards(name) {
|
|
|
6137
6158
|
*/
|
|
6138
6159
|
|
|
6139
6160
|
var screenReaderOnlyStyle = "\n position: absolute;\n left: -10000px;\n top: auto;\n width: 1px;\n height: 1px;\n overflow: hidden;\n";
|
|
6161
|
+
var inputPlaceholderTextStyle = "\n ::-webkit-input-placeholder {\n color: ".concat(CHARADE_GREY, ";\n }\n ::-moz-placeholder {\n color: ").concat(CHARADE_GREY, ";\n }\n ::-ms-placeholder {\n color: ").concat(CHARADE_GREY, ";\n }\n ::placeholder {\n color: ").concat(CHARADE_GREY, ";\n }\n");
|
|
6162
|
+
var inputDisabledStyle = "\n color: #6e727e;\n background-color: #f7f7f7;\n pointer-events: none;\n";
|
|
6140
6163
|
|
|
6141
6164
|
var general = /*#__PURE__*/Object.freeze({
|
|
6142
6165
|
__proto__: null,
|
|
@@ -6144,12 +6167,15 @@ var general = /*#__PURE__*/Object.freeze({
|
|
|
6144
6167
|
displayCurrency: displayCurrency,
|
|
6145
6168
|
convertCentsToMoneyInt: convertCentsToMoneyInt,
|
|
6146
6169
|
formatPercent: formatPercent,
|
|
6170
|
+
createIdFromString: createIdFromString,
|
|
6147
6171
|
safeChildren: safeChildren,
|
|
6148
6172
|
generateClickHandler: generateClickHandler,
|
|
6149
6173
|
checkCardBrand: checkCardBrand,
|
|
6150
6174
|
displayCardBrand: displayCardBrand,
|
|
6151
6175
|
checkDeniedCards: checkDeniedCards,
|
|
6152
|
-
screenReaderOnlyStyle: screenReaderOnlyStyle
|
|
6176
|
+
screenReaderOnlyStyle: screenReaderOnlyStyle,
|
|
6177
|
+
inputPlaceholderTextStyle: inputPlaceholderTextStyle,
|
|
6178
|
+
inputDisabledStyle: inputDisabledStyle
|
|
6153
6179
|
});
|
|
6154
6180
|
|
|
6155
6181
|
var _excluded$1 = ["themeValues", "weight", "color", "textWrap", "extraStyles", "hoverStyles", "onClick", "onKeyPress", "as", "dataQa", "children"];
|
|
@@ -19024,13 +19050,13 @@ var disabledCheckedStyles = {
|
|
|
19024
19050
|
"default": "\n background: #6d717e;\n border: 1px solid #6d717e;\n"
|
|
19025
19051
|
};
|
|
19026
19052
|
var disabledStyles = {
|
|
19027
|
-
"default": "\n background: ".concat(SEASHELL_WHITE, ";\n border: 1px solid ").concat(
|
|
19053
|
+
"default": "\n background: ".concat(SEASHELL_WHITE, ";\n border: 1px solid ").concat(STORM_GREY, ";\n")
|
|
19028
19054
|
};
|
|
19029
19055
|
var checkedStyles = {
|
|
19030
19056
|
"default": "\n background: ".concat(MATISSE_BLUE, "; \n border: 1px solid ").concat(MATISSE_BLUE, ";\n")
|
|
19031
19057
|
};
|
|
19032
19058
|
var defaultStyles = {
|
|
19033
|
-
"default": "\n background: ".concat(WHITE, "; \n border: 1px solid ").concat(
|
|
19059
|
+
"default": "\n background: ".concat(WHITE, "; \n border: 1px solid ").concat(STORM_GREY, ";\n")
|
|
19034
19060
|
};
|
|
19035
19061
|
var fallbackValues$c = {
|
|
19036
19062
|
backgroundColor: backgroundColor$2,
|
|
@@ -20706,6 +20732,7 @@ var Dropdown = function Dropdown(_ref8) {
|
|
|
20706
20732
|
_ref8$autoEraseTypeAh = _ref8.autoEraseTypeAhead,
|
|
20707
20733
|
autoEraseTypeAhead = _ref8$autoEraseTypeAh === void 0 ? true : _ref8$autoEraseTypeAh,
|
|
20708
20734
|
ariaLabelledby = _ref8.ariaLabelledby,
|
|
20735
|
+
ariaDescribedby = _ref8.ariaDescribedby,
|
|
20709
20736
|
_ref8$autocompleteVal = _ref8.autocompleteValue,
|
|
20710
20737
|
autocompleteValue = _ref8$autocompleteVal === void 0 ? "" : _ref8$autocompleteVal,
|
|
20711
20738
|
_ref8$smoothScroll = _ref8.smoothScroll,
|
|
@@ -20955,13 +20982,14 @@ var Dropdown = function Dropdown(_ref8) {
|
|
|
20955
20982
|
"aria-owns": "".concat(ariaLabelledby, "_listbox"),
|
|
20956
20983
|
"aria-haspopup": "listbox",
|
|
20957
20984
|
"aria-labelledby": ariaLabelledby,
|
|
20985
|
+
"aria-describedby": ariaDescribedby,
|
|
20958
20986
|
"aria-expanded": isOpen,
|
|
20959
20987
|
autocomplete: autocompleteValue,
|
|
20960
20988
|
background: isOpen ? themeValues.hoverColor : WHITE,
|
|
20961
20989
|
borderRadius: "2px",
|
|
20962
20990
|
borderSize: "1px",
|
|
20963
20991
|
borderColor: isError ? ERROR_COLOR : isOpen ? themeValues.selectedColor : GREY_CHATEAU,
|
|
20964
|
-
extraStyles: disabled
|
|
20992
|
+
extraStyles: disabled ? "".concat(inputPlaceholderTextStyle).concat(inputDisabledStyle) : inputPlaceholderTextStyle,
|
|
20965
20993
|
hoverStyles: "background-color: ".concat(themeValues.hoverColor, ";"),
|
|
20966
20994
|
isOpen: isOpen,
|
|
20967
20995
|
minHeight: "48px",
|
|
@@ -21171,9 +21199,10 @@ var FormSelect = function FormSelect(_ref) {
|
|
|
21171
21199
|
color: themeValues.labelColor,
|
|
21172
21200
|
weight: themeValues.fontWeight,
|
|
21173
21201
|
extraStyles: "word-break: break-word;\n font-family: Public Sans;\n &::first-letter {\n text-transform: uppercase;\n }",
|
|
21174
|
-
id: labelTextWhenNoError
|
|
21202
|
+
id: createIdFromString(labelTextWhenNoError)
|
|
21175
21203
|
}, labelTextWhenNoError))), /*#__PURE__*/React.createElement(Dropdown$1, {
|
|
21176
|
-
ariaLabelledby: labelTextWhenNoError
|
|
21204
|
+
ariaLabelledby: createIdFromString(labelTextWhenNoError),
|
|
21205
|
+
ariaDescribedby: createIdFromString(labelTextWhenNoError, "error message"),
|
|
21177
21206
|
maxHeight: dropdownMaxHeight,
|
|
21178
21207
|
hasTitles: hasTitles,
|
|
21179
21208
|
placeholder: options[0] ? options[0].text : "",
|
|
@@ -21200,7 +21229,8 @@ var FormSelect = function FormSelect(_ref) {
|
|
|
21200
21229
|
color: ERROR_COLOR,
|
|
21201
21230
|
variant: "pXS",
|
|
21202
21231
|
weight: themeValues.fontWeight,
|
|
21203
|
-
extraStyles: "word-break: break-word;\n font-family: Public Sans;\n &::first-letter {\n text-transform: uppercase;\n }"
|
|
21232
|
+
extraStyles: "word-break: break-word;\n font-family: Public Sans;\n &::first-letter {\n text-transform: uppercase;\n }",
|
|
21233
|
+
id: createIdFromString(labelTextWhenNoError, "error message")
|
|
21204
21234
|
}, errorMessages[field.errors[0]]) : /*#__PURE__*/React.createElement(Text$1, {
|
|
21205
21235
|
extraStyles: "height: ".concat(themeValues.lineHeight, ";")
|
|
21206
21236
|
})));
|
|
@@ -22475,8 +22505,8 @@ var labelColor$1 = {
|
|
|
22475
22505
|
disabled: "".concat(CHARADE_GREY)
|
|
22476
22506
|
};
|
|
22477
22507
|
var borderColor$1 = {
|
|
22478
|
-
"default": "".concat(
|
|
22479
|
-
disabled: "".concat(
|
|
22508
|
+
"default": "".concat(STORM_GREY),
|
|
22509
|
+
disabled: "".concat(STORM_GREY)
|
|
22480
22510
|
};
|
|
22481
22511
|
var lineHeight$2 = {
|
|
22482
22512
|
"default": "1rem",
|
|
@@ -22623,7 +22653,7 @@ var FormInput = function FormInput(_ref15) {
|
|
|
22623
22653
|
variant: "pS",
|
|
22624
22654
|
weight: themeValues.fontWeight,
|
|
22625
22655
|
extraStyles: "word-break: break-word;\n font-family: Public Sans;\n &::first-letter {\n text-transform: uppercase;\n }",
|
|
22626
|
-
id: labelTextWhenNoError
|
|
22656
|
+
id: createIdFromString(labelTextWhenNoError)
|
|
22627
22657
|
}, labelTextWhenNoError), /*#__PURE__*/React.createElement(Text$1, {
|
|
22628
22658
|
color: themeValues.linkColor,
|
|
22629
22659
|
variant: "pS",
|
|
@@ -22640,7 +22670,7 @@ var FormInput = function FormInput(_ref15) {
|
|
|
22640
22670
|
variant: "pS",
|
|
22641
22671
|
fontWeight: themeValues.fontWeight,
|
|
22642
22672
|
extraStyles: "word-break: break-word;\n font-family: Public Sans;\n &::first-letter {\n text-transform: uppercase;\n }",
|
|
22643
|
-
id: labelTextWhenNoError
|
|
22673
|
+
id: createIdFromString(labelTextWhenNoError)
|
|
22644
22674
|
}, labelTextWhenNoError), type === "password" && /*#__PURE__*/React.createElement(Text$1, {
|
|
22645
22675
|
variant: "pS",
|
|
22646
22676
|
color: themeValues.linkColor,
|
|
@@ -22660,7 +22690,9 @@ var FormInput = function FormInput(_ref15) {
|
|
|
22660
22690
|
}, decorator)))), /*#__PURE__*/React.createElement(Box, {
|
|
22661
22691
|
padding: "0"
|
|
22662
22692
|
}, formatter ? /*#__PURE__*/React.createElement(FormattedInputField, _extends({
|
|
22663
|
-
"aria-labelledby": labelTextWhenNoError
|
|
22693
|
+
"aria-labelledby": createIdFromString(labelTextWhenNoError),
|
|
22694
|
+
"aria-describedby": createIdFromString(labelTextWhenNoError, "error message"),
|
|
22695
|
+
"aria-invalid": field.dirty && field.hasErrors || field.hasErrors && showErrors,
|
|
22664
22696
|
onChange: function onChange(e) {
|
|
22665
22697
|
return fieldActions.set(e);
|
|
22666
22698
|
},
|
|
@@ -22676,7 +22708,9 @@ var FormInput = function FormInput(_ref15) {
|
|
|
22676
22708
|
$customHeight: customHeight,
|
|
22677
22709
|
$extraStyles: extraStyles
|
|
22678
22710
|
}, props)) : /*#__PURE__*/React.createElement(InputField, _extends({
|
|
22679
|
-
"aria-labelledby": labelTextWhenNoError
|
|
22711
|
+
"aria-labelledby": createIdFromString(labelTextWhenNoError),
|
|
22712
|
+
"aria-describedby": createIdFromString(labelTextWhenNoError, "error message"),
|
|
22713
|
+
"aria-invalid": field.dirty && field.hasErrors || field.hasErrors && showErrors,
|
|
22680
22714
|
onChange: function onChange(e) {
|
|
22681
22715
|
return fieldActions.set(e.target.value);
|
|
22682
22716
|
},
|
|
@@ -22698,7 +22732,8 @@ var FormInput = function FormInput(_ref15) {
|
|
|
22698
22732
|
color: ERROR_COLOR,
|
|
22699
22733
|
variant: "pXS",
|
|
22700
22734
|
weight: themeValues.fontWeight,
|
|
22701
|
-
extraStyles: "word-break: break-word;\n font-family: Public Sans;\n &::first-letter {\n text-transform: uppercase;\n }"
|
|
22735
|
+
extraStyles: "word-break: break-word;\n font-family: Public Sans;\n &::first-letter {\n text-transform: uppercase;\n }",
|
|
22736
|
+
id: createIdFromString(labelTextWhenNoError, "error message")
|
|
22702
22737
|
}, errorMessages[field.errors[0]]) : /*#__PURE__*/React.createElement(Text$1, {
|
|
22703
22738
|
extraStyles: "height: ".concat(themeValues.lineHeight, ";")
|
|
22704
22739
|
}), !isMobile && decorator && /*#__PURE__*/React.createElement(Box, {
|
|
@@ -40234,6 +40269,8 @@ var getApplicationNode = function getApplicationNode() {
|
|
|
40234
40269
|
var Modal$1 = function Modal(_ref) {
|
|
40235
40270
|
var hideModal = _ref.hideModal,
|
|
40236
40271
|
continueAction = _ref.continueAction,
|
|
40272
|
+
_ref$isContinueAction = _ref.isContinueActionDisabled,
|
|
40273
|
+
isContinueActionDisabled = _ref$isContinueAction === void 0 ? false : _ref$isContinueAction,
|
|
40237
40274
|
cancelAction = _ref.cancelAction,
|
|
40238
40275
|
modalOpen = _ref.modalOpen,
|
|
40239
40276
|
modalHeaderText = _ref.modalHeaderText,
|
|
@@ -40252,6 +40289,8 @@ var Modal$1 = function Modal(_ref) {
|
|
|
40252
40289
|
defaultWrapper = _ref$defaultWrapper === void 0 ? true : _ref$defaultWrapper,
|
|
40253
40290
|
_ref$onlyCloseButton = _ref.onlyCloseButton,
|
|
40254
40291
|
onlyCloseButton = _ref$onlyCloseButton === void 0 ? false : _ref$onlyCloseButton,
|
|
40292
|
+
_ref$noButtons = _ref.noButtons,
|
|
40293
|
+
noButtons = _ref$noButtons === void 0 ? false : _ref$noButtons,
|
|
40255
40294
|
maxHeight = _ref.maxHeight,
|
|
40256
40295
|
_ref$underlayClickExi = _ref.underlayClickExits,
|
|
40257
40296
|
underlayClickExits = _ref$underlayClickExi === void 0 ? true : _ref$underlayClickExi,
|
|
@@ -40312,7 +40351,7 @@ var Modal$1 = function Modal(_ref) {
|
|
|
40312
40351
|
justify: "flex-end",
|
|
40313
40352
|
align: "center",
|
|
40314
40353
|
childGap: "0rem"
|
|
40315
|
-
}, !onlyCloseButton ? /*#__PURE__*/React.createElement(Fragment, null, isMobile ? /*#__PURE__*/React.createElement(Stack, {
|
|
40354
|
+
}, !noButtons && /*#__PURE__*/React.createElement(React.Fragment, null, !onlyCloseButton ? /*#__PURE__*/React.createElement(Fragment, null, isMobile ? /*#__PURE__*/React.createElement(Stack, {
|
|
40316
40355
|
childGap: "1rem",
|
|
40317
40356
|
direction: "row"
|
|
40318
40357
|
}, /*#__PURE__*/React.createElement(Box, {
|
|
@@ -40334,6 +40373,7 @@ var Modal$1 = function Modal(_ref) {
|
|
|
40334
40373
|
text: continueButtonText,
|
|
40335
40374
|
dataQa: continueButtonText,
|
|
40336
40375
|
isLoading: isLoading,
|
|
40376
|
+
disabled: isContinueActionDisabled,
|
|
40337
40377
|
extraStyles: buttonExtraStyles,
|
|
40338
40378
|
className: "modal-continue-button"
|
|
40339
40379
|
}))) : /*#__PURE__*/React.createElement(Stack, {
|
|
@@ -40353,6 +40393,7 @@ var Modal$1 = function Modal(_ref) {
|
|
|
40353
40393
|
text: continueButtonText,
|
|
40354
40394
|
dataQa: continueButtonText,
|
|
40355
40395
|
isLoading: isLoading,
|
|
40396
|
+
disabled: isContinueActionDisabled,
|
|
40356
40397
|
extraStyles: buttonExtraStyles,
|
|
40357
40398
|
className: "modal-continue-button"
|
|
40358
40399
|
}))) : /*#__PURE__*/React.createElement(Box, {
|
|
@@ -40364,7 +40405,7 @@ var Modal$1 = function Modal(_ref) {
|
|
|
40364
40405
|
dataQa: "Close",
|
|
40365
40406
|
extraStyles: buttonExtraStyles,
|
|
40366
40407
|
className: "modal-cancel-button"
|
|
40367
|
-
})))))))), children);
|
|
40408
|
+
}))))))))), children);
|
|
40368
40409
|
};
|
|
40369
40410
|
|
|
40370
40411
|
var fontSize$9 = {
|
|
@@ -40637,7 +40678,7 @@ var TitleModule = function TitleModule(_ref) {
|
|
|
40637
40678
|
var color$a = "#15749D";
|
|
40638
40679
|
var hoverColor$4 = "#116285";
|
|
40639
40680
|
var activeColor$5 = "#0E506D";
|
|
40640
|
-
var linkColor$3 = "#
|
|
40681
|
+
var linkColor$3 = "#3176AA";
|
|
40641
40682
|
var fontWeight$6 = FONT_WEIGHT_REGULAR;
|
|
40642
40683
|
var modalLinkHoverFocus = "outline: none;\n cursor: pointer;\n text-decoration: underline;\n text-decoration-color: #317D4F;";
|
|
40643
40684
|
var fallbackValues$z = {
|
|
@@ -41818,7 +41859,7 @@ var PaymentDetails = function PaymentDetails(_ref4) {
|
|
|
41818
41859
|
var PaymentDetails$1 = themeComponent(PaymentDetails, "PaymentDetails", fallbackValues$A, "default");
|
|
41819
41860
|
|
|
41820
41861
|
var linkColor$4 = {
|
|
41821
|
-
"default": "#
|
|
41862
|
+
"default": "#3176AA"
|
|
41822
41863
|
};
|
|
41823
41864
|
var fontSize$a = {
|
|
41824
41865
|
"default": "1rem"
|
|
@@ -42972,7 +43013,7 @@ var backgroundColor$9 = {
|
|
|
42972
43013
|
footer: "#ffffff"
|
|
42973
43014
|
};
|
|
42974
43015
|
var linkColor$5 = {
|
|
42975
|
-
"default": "#
|
|
43016
|
+
"default": "#3176AA",
|
|
42976
43017
|
footer: "#ffffff"
|
|
42977
43018
|
};
|
|
42978
43019
|
var border$3 = {
|
|
@@ -43032,7 +43073,8 @@ var TermsAndConditionsModal = function TermsAndConditionsModal(_ref) {
|
|
|
43032
43073
|
borderRadius: "3px",
|
|
43033
43074
|
extraStyles: "overflow: scroll; max-height: 20rem;"
|
|
43034
43075
|
}, /*#__PURE__*/React.createElement(Text$1, {
|
|
43035
|
-
variant: "p"
|
|
43076
|
+
variant: "p",
|
|
43077
|
+
extraStyles: "& a { text-decoration: underline; }"
|
|
43036
43078
|
}, terms)),
|
|
43037
43079
|
defaultWrapper: false,
|
|
43038
43080
|
onlyCloseButton: !acceptText,
|
|
@@ -43276,6 +43318,9 @@ var PeriscopeDashboardIframe = function PeriscopeDashboardIframe(_ref) {
|
|
|
43276
43318
|
time.timer = setTimeout(function () {
|
|
43277
43319
|
periscopeDataRequestFailure();
|
|
43278
43320
|
}, 10000);
|
|
43321
|
+
return function () {
|
|
43322
|
+
return clearTimeout(time.timer);
|
|
43323
|
+
};
|
|
43279
43324
|
}, []);
|
|
43280
43325
|
|
|
43281
43326
|
var Dashboard = function Dashboard(height) {
|
|
@@ -43296,8 +43341,11 @@ var PeriscopeDashboardIframe = function PeriscopeDashboardIframe(_ref) {
|
|
|
43296
43341
|
var validatePeriscope = function validatePeriscope(message) {
|
|
43297
43342
|
if (isValidMessage(message)) {
|
|
43298
43343
|
setHeight(message.data.dashboard_height + 100);
|
|
43299
|
-
|
|
43300
|
-
|
|
43344
|
+
|
|
43345
|
+
if (!periscopeDataSuccess) {
|
|
43346
|
+
clearTimeout(time.timer);
|
|
43347
|
+
periscopeDataRequestSuccess();
|
|
43348
|
+
}
|
|
43301
43349
|
}
|
|
43302
43350
|
};
|
|
43303
43351
|
|
|
@@ -43606,13 +43654,33 @@ var index$4 = /*#__PURE__*/Object.freeze({
|
|
|
43606
43654
|
fontWeights: style_constants
|
|
43607
43655
|
});
|
|
43608
43656
|
|
|
43657
|
+
var useFocusInvalidInput = function useFocusInvalidInput() {
|
|
43658
|
+
var showErrors = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
|
|
43659
|
+
console.log("hey show errors", showErrors); // Only move focus when "showErrors" is true
|
|
43660
|
+
// "showErrors" is managed by container page of form
|
|
43661
|
+
// typically set to "true" on attempted form submission, if errors exist
|
|
43662
|
+
|
|
43663
|
+
useEffect$1(function () {
|
|
43664
|
+
console.log("inside use effect show errors", showErrors);
|
|
43665
|
+
|
|
43666
|
+
if (showErrors) {
|
|
43667
|
+
var _inputsWithErrors$;
|
|
43668
|
+
|
|
43669
|
+
var inputsWithErrors = document.querySelectorAll("input[aria-invalid=true]");
|
|
43670
|
+
console.log("inputs with errors is", inputsWithErrors);
|
|
43671
|
+
inputsWithErrors === null || inputsWithErrors === void 0 ? void 0 : (_inputsWithErrors$ = inputsWithErrors[0]) === null || _inputsWithErrors$ === void 0 ? void 0 : _inputsWithErrors$.focus();
|
|
43672
|
+
}
|
|
43673
|
+
}, [showErrors]);
|
|
43674
|
+
};
|
|
43675
|
+
|
|
43609
43676
|
|
|
43610
43677
|
|
|
43611
43678
|
var index$5 = /*#__PURE__*/Object.freeze({
|
|
43612
43679
|
__proto__: null,
|
|
43613
43680
|
formats: formats,
|
|
43614
43681
|
general: general,
|
|
43615
|
-
theme: themeUtils
|
|
43682
|
+
theme: themeUtils,
|
|
43683
|
+
useFocusInvalidInput: useFocusInvalidInput
|
|
43616
43684
|
});
|
|
43617
43685
|
|
|
43618
43686
|
export { AccountNumberImage, AccountsAddIcon$1 as AccountsAddIcon, AccountsIcon$1 as AccountsIcon, AccountsIconSmall$1 as AccountsIconSmall, AchReturnIcon, AddObligation$1 as AddObligation, AddressForm, Alert$1 as Alert, AllocatedIcon, AmountCallout$1 as AmountCallout, AutopayOnIcon, BankIcon, Box, BoxWithShadow$1 as BoxWithShadow, Breadcrumbs as Breadcrumb, ButtonWithAction, ButtonWithLink, CalendarIcon, CarrotIcon$1 as CarrotIcon, CashIcon, Center, CenterSingle$1 as CenterSingle, CenterStack$1 as CenterStack, ChangePasswordForm, ChargebackIcon, ChargebackReversalIcon, CheckIcon, Checkbox$1 as Checkbox, CheckboxList$1 as CheckboxList, CheckmarkIcon, ChevronIcon$1 as ChevronIcon, Cluster, CollapsibleSection$1 as CollapsibleSection, CountryDropdown, Cover, CustomerSearchIcon, DefaultPageTemplate, Detail$1 as Detail, DisplayBox$1 as DisplayBox, DisplayCard, Dropdown$1 as Dropdown, DuplicateIcon, EditNameForm, EditableList, EditableTable, EmailForm, EmptyCartIcon$1 as EmptyCartIcon, ErroredIcon, ExternalLink, FailedIcon, ForgotPasswordForm, ForgotPasswordIcon$1 as ForgotPasswordIcon, FormContainer$1 as FormContainer, FormFooterPanel$1 as FormFooterPanel, FormInput$1 as FormInput, FormInputColumn, FormInputRow, FormSelect$1 as FormSelect, FormattedAddress$1 as FormattedAddress, FormattedCreditCard$1 as FormattedCreditCard, Frame, GenericCard, GenericCardLarge, GoToEmailIcon$1 as GoToEmailIcon, Grid, HamburgerButton, Heading$1 as Heading, HighlightTabRow$1 as HighlightTabRow, IconAdd, IconQuitLarge, Imposter, InternalLink, InternalUserInfoForm, Jumbo$1 as Jumbo, LabeledAmount$1 as LabeledAmount, LineItem$1 as LineItem, Loading, LoginForm, Modal$1 as Modal, Module$1 as Module, Motion, NavFooter, NavHeader, NavMenuDesktop$1 as NavMenuDesktop, NavMenuMobile$1 as NavMenuMobile, NoCustomerResultsIcon, NoPaymentResultsIcon, NotFoundIcon, Obligation, iconsMap as ObligationIcons, Pagination, Paragraph$1 as Paragraph, PartialAmountForm, PasswordRequirements, PaymentButtonBar, PaymentDetails$1 as PaymentDetails, PaymentFormACH, PaymentFormCard$1 as PaymentFormCard, PaymentIcon, PaymentMethodAddIcon$1 as PaymentMethodAddIcon, PaymentMethodIcon$1 as PaymentMethodIcon, PaymentSearchIcon, PaymentsIconSmall$1 as PaymentsIconSmall, PendingIcon, PeriscopeDashboardIframe, PeriscopeFailedIcon, PhoneForm, Placeholder$1 as Placeholder, ProcessingFee$1 as ProcessingFee, ProfileIcon$1 as ProfileIcon, ProfileIconSmall$1 as ProfileIconSmall, PropertiesAddIcon$1 as PropertiesAddIcon, PropertiesIconSmall$1 as PropertiesIconSmall, RadioButton$2 as RadioButton, RadioSection$1 as RadioSection, Reel, RefundIcon, RegistrationForm, RejectedIcon, RejectedVelocityIcon, ResetConfirmationForm$1 as ResetConfirmationForm, ResetPasswordForm, ResetPasswordIcon, ResetPasswordSuccess, RoutingNumberImage, SearchIcon, SearchableSelect$1 as SearchableSelect, SettingsIconSmall$1 as SettingsIconSmall, ShoppingCartIcon, Sidebar, SidebarSingleContent$1 as SidebarSingleContent, SidebarStackContent$1 as SidebarStackContent, SolidDivider$1 as SolidDivider, Spinner$2 as Spinner, Stack, FormStateDropdown as StateProvinceDropdown, StatusUnknownIcon, SuccessfulIcon, Switcher, TabSidebar$1 as TabSidebar, TableListItem, Tabs$1 as Tabs, TermsAndConditions, TermsAndConditionsModal$1 as TermsAndConditionsModal, Text$1 as Text, Timeout$1 as Timeout, TimeoutImage, Title$1 as Title, ToggleSwitch$1 as ToggleSwitch, TrashIcon$1 as TrashIcon, TypeaheadInput, VerifiedEmailIcon$1 as VerifiedEmailIcon, VoidedIcon, WalletIcon$1 as WalletIcon, WarningIconXS, WelcomeModule$1 as WelcomeModule, WorkflowTile, cardRegistry, index$4 as constants, createPartialAmountFormState, index$5 as util, withWindowSize };
|