@thecb/components 6.0.7 → 6.0.9

package/dist/index.cjs.js

@@ -6074,6 +6074,18 @@ var createUniqueId = function createUniqueId() {
   return "_" + Math.random().toString(36).substr(2, 9);
 };
 
+var createIdFromString = function createIdFromString(text, postscript) {
+  var unique = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
+
+  if (text === undefined) {
+    return createUniqueId();
+  } else {
+    // "first name", undefined, false -> "first-name"
+    // "email address", "error message", false -> "email-address-error-message"
+    // "shopping cart", "order item", true -> "shopping-cart-order-item_2ahtlz608"
+    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() : "");
+  }
+};
 var safeChildren = function safeChildren(children) {
   var replacement = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
   var unsafeValues = [false, undefined, NaN, null];
@@ -6156,6 +6168,7 @@ var general = /*#__PURE__*/Object.freeze({
   displayCurrency: displayCurrency,
   convertCentsToMoneyInt: convertCentsToMoneyInt,
   formatPercent: formatPercent,
+  createIdFromString: createIdFromString,
   safeChildren: safeChildren,
   generateClickHandler: generateClickHandler,
   checkCardBrand: checkCardBrand,
@@ -20720,6 +20733,7 @@ var Dropdown = function Dropdown(_ref8) {
       _ref8$autoEraseTypeAh = _ref8.autoEraseTypeAhead,
       autoEraseTypeAhead = _ref8$autoEraseTypeAh === void 0 ? true : _ref8$autoEraseTypeAh,
       ariaLabelledby = _ref8.ariaLabelledby,
+      ariaDescribedby = _ref8.ariaDescribedby,
       _ref8$autocompleteVal = _ref8.autocompleteValue,
       autocompleteValue = _ref8$autocompleteVal === void 0 ? "" : _ref8$autocompleteVal,
       _ref8$smoothScroll = _ref8.smoothScroll,
@@ -20969,6 +20983,7 @@ var Dropdown = function Dropdown(_ref8) {
     "aria-owns": "".concat(ariaLabelledby, "_listbox"),
     "aria-haspopup": "listbox",
     "aria-labelledby": ariaLabelledby,
+    "aria-describedby": ariaDescribedby,
     "aria-expanded": isOpen,
     autocomplete: autocompleteValue,
     background: isOpen ? themeValues.hoverColor : WHITE,
@@ -21185,9 +21200,10 @@ var FormSelect = function FormSelect(_ref) {
     color: themeValues.labelColor,
     weight: themeValues.fontWeight,
     extraStyles: "word-break: break-word;\n              font-family: Public Sans;\n              &::first-letter {\n                text-transform: uppercase;\n              }",
-    id: labelTextWhenNoError.replace(/\s+/g, "-")
+    id: createIdFromString(labelTextWhenNoError)
   }, labelTextWhenNoError))), /*#__PURE__*/React__default.createElement(Dropdown$1, {
-    ariaLabelledby: labelTextWhenNoError.replace(/\s+/g, "-"),
+    ariaLabelledby: createIdFromString(labelTextWhenNoError),
+    ariaDescribedby: createIdFromString(labelTextWhenNoError, "error message"),
     maxHeight: dropdownMaxHeight,
     hasTitles: hasTitles,
     placeholder: options[0] ? options[0].text : "",
@@ -21214,7 +21230,8 @@ var FormSelect = function FormSelect(_ref) {
     color: ERROR_COLOR,
     variant: "pXS",
     weight: themeValues.fontWeight,
-    extraStyles: "word-break: break-word;\n                font-family: Public Sans;\n                &::first-letter {\n                  text-transform: uppercase;\n                }"
+    extraStyles: "word-break: break-word;\n                font-family: Public Sans;\n                &::first-letter {\n                  text-transform: uppercase;\n                }",
+    id: createIdFromString(labelTextWhenNoError, "error message")
   }, errorMessages[field.errors[0]]) : /*#__PURE__*/React__default.createElement(Text$1, {
     extraStyles: "height: ".concat(themeValues.lineHeight, ";")
   })));
@@ -22637,7 +22654,7 @@ var FormInput = function FormInput(_ref15) {
     variant: "pS",
     weight: themeValues.fontWeight,
     extraStyles: "word-break: break-word;\n                  font-family: Public Sans;\n                  &::first-letter {\n                    text-transform: uppercase;\n                  }",
-    id: labelTextWhenNoError.replace(/\s+/g, "-")
+    id: createIdFromString(labelTextWhenNoError)
   }, labelTextWhenNoError), /*#__PURE__*/React__default.createElement(Text$1, {
     color: themeValues.linkColor,
     variant: "pS",
@@ -22654,7 +22671,7 @@ var FormInput = function FormInput(_ref15) {
     variant: "pS",
     fontWeight: themeValues.fontWeight,
     extraStyles: "word-break: break-word;\n                    font-family: Public Sans;\n                    &::first-letter {\n                      text-transform: uppercase;\n                    }",
-    id: labelTextWhenNoError.replace(/\s+/g, "-")
+    id: createIdFromString(labelTextWhenNoError)
   }, labelTextWhenNoError), type === "password" && /*#__PURE__*/React__default.createElement(Text$1, {
     variant: "pS",
     color: themeValues.linkColor,
@@ -22674,7 +22691,8 @@ var FormInput = function FormInput(_ref15) {
   }, decorator)))), /*#__PURE__*/React__default.createElement(Box, {
     padding: "0"
   }, formatter ? /*#__PURE__*/React__default.createElement(FormattedInputField, _extends({
-    "aria-labelledby": labelTextWhenNoError.replace(/\s+/g, "-"),
+    "aria-labelledby": createIdFromString(labelTextWhenNoError),
+    "aria-describedby": createIdFromString(labelTextWhenNoError, "error message"),
     onChange: function onChange(e) {
       return fieldActions.set(e);
     },
@@ -22690,7 +22708,8 @@ var FormInput = function FormInput(_ref15) {
     $customHeight: customHeight,
     $extraStyles: extraStyles
   }, props)) : /*#__PURE__*/React__default.createElement(InputField, _extends({
-    "aria-labelledby": labelTextWhenNoError.replace(/\s+/g, "-"),
+    "aria-labelledby": createIdFromString(labelTextWhenNoError),
+    "aria-describedby": createIdFromString(labelTextWhenNoError, "error message"),
     onChange: function onChange(e) {
       return fieldActions.set(e.target.value);
     },
@@ -22712,7 +22731,8 @@ var FormInput = function FormInput(_ref15) {
     color: ERROR_COLOR,
     variant: "pXS",
     weight: themeValues.fontWeight,
-    extraStyles: "word-break: break-word;\n              font-family: Public Sans;\n              &::first-letter {\n                text-transform: uppercase;\n              }"
+    extraStyles: "word-break: break-word;\n              font-family: Public Sans;\n              &::first-letter {\n                text-transform: uppercase;\n              }",
+    id: createIdFromString(labelTextWhenNoError, "error message")
   }, errorMessages[field.errors[0]]) : /*#__PURE__*/React__default.createElement(Text$1, {
     extraStyles: "height: ".concat(themeValues.lineHeight, ";")
   }), !isMobile && decorator && /*#__PURE__*/React__default.createElement(Box, {
@@ -40248,6 +40268,8 @@ var getApplicationNode = function getApplicationNode() {
 var Modal$1 = function Modal(_ref) {
   var hideModal = _ref.hideModal,
       continueAction = _ref.continueAction,
+      _ref$isContinueAction = _ref.isContinueActionDisabled,
+      isContinueActionDisabled = _ref$isContinueAction === void 0 ? false : _ref$isContinueAction,
       cancelAction = _ref.cancelAction,
       modalOpen = _ref.modalOpen,
       modalHeaderText = _ref.modalHeaderText,
@@ -40350,6 +40372,7 @@ var Modal$1 = function Modal(_ref) {
     text: continueButtonText,
     dataQa: continueButtonText,
     isLoading: isLoading,
+    disabled: isContinueActionDisabled,
     extraStyles: buttonExtraStyles,
     className: "modal-continue-button"
   }))) : /*#__PURE__*/React__default.createElement(Stack, {
@@ -40369,6 +40392,7 @@ var Modal$1 = function Modal(_ref) {
     text: continueButtonText,
     dataQa: continueButtonText,
     isLoading: isLoading,
+    disabled: isContinueActionDisabled,
     extraStyles: buttonExtraStyles,
     className: "modal-continue-button"
   }))) : /*#__PURE__*/React__default.createElement(Box, {
@@ -43293,6 +43317,9 @@ var PeriscopeDashboardIframe = function PeriscopeDashboardIframe(_ref) {
     time.timer = setTimeout(function () {
       periscopeDataRequestFailure();
     }, 10000);
+    return function () {
+      return clearTimeout(time.timer);
+    };
   }, []);
 
   var Dashboard = function Dashboard(height) {
@@ -43313,8 +43340,11 @@ var PeriscopeDashboardIframe = function PeriscopeDashboardIframe(_ref) {
   var validatePeriscope = function validatePeriscope(message) {
     if (isValidMessage(message)) {
       setHeight(message.data.dashboard_height + 100);
-      clearTimeout(time.timer);
-      periscopeDataRequestSuccess();
+
+      if (!periscopeDataSuccess) {
+        clearTimeout(time.timer);
+        periscopeDataRequestSuccess();
+      }
     }
   };