@thecb/components 6.0.8 → 6.1.0-beta.2

package/dist/index.esm.js

@@ -6066,6 +6066,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];
@@ -6148,6 +6160,7 @@ var general = /*#__PURE__*/Object.freeze({
   displayCurrency: displayCurrency,
   convertCentsToMoneyInt: convertCentsToMoneyInt,
   formatPercent: formatPercent,
+  createIdFromString: createIdFromString,
   safeChildren: safeChildren,
   generateClickHandler: generateClickHandler,
   checkCardBrand: checkCardBrand,
@@ -20712,6 +20725,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,
@@ -20961,6 +20975,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,
@@ -21177,9 +21192,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.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 : "",
@@ -21206,7 +21222,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.createElement(Text$1, {
     extraStyles: "height: ".concat(themeValues.lineHeight, ";")
   })));
@@ -22629,7 +22646,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.createElement(Text$1, {
     color: themeValues.linkColor,
     variant: "pS",
@@ -22646,7 +22663,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.createElement(Text$1, {
     variant: "pS",
     color: themeValues.linkColor,
@@ -22666,7 +22683,9 @@ var FormInput = function FormInput(_ref15) {
   }, decorator)))), /*#__PURE__*/React.createElement(Box, {
     padding: "0"
   }, formatter ? /*#__PURE__*/React.createElement(FormattedInputField, _extends({
-    "aria-labelledby": labelTextWhenNoError.replace(/\s+/g, "-"),
+    "aria-labelledby": createIdFromString(labelTextWhenNoError),
+    "aria-describedby": createIdFromString(labelTextWhenNoError, "error message"),
+    "aria-invalid": field.dirty && field.hasErrors || field.hasErrors && showErrors,
     onChange: function onChange(e) {
       return fieldActions.set(e);
     },
@@ -22682,7 +22701,9 @@ var FormInput = function FormInput(_ref15) {
     $customHeight: customHeight,
     $extraStyles: extraStyles
   }, props)) : /*#__PURE__*/React.createElement(InputField, _extends({
-    "aria-labelledby": labelTextWhenNoError.replace(/\s+/g, "-"),
+    "aria-labelledby": createIdFromString(labelTextWhenNoError),
+    "aria-describedby": createIdFromString(labelTextWhenNoError, "error message"),
+    "aria-invalid": field.dirty && field.hasErrors || field.hasErrors && showErrors,
     onChange: function onChange(e) {
       return fieldActions.set(e.target.value);
     },
@@ -22704,7 +22725,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.createElement(Text$1, {
     extraStyles: "height: ".concat(themeValues.lineHeight, ";")
   }), !isMobile && decorator && /*#__PURE__*/React.createElement(Box, {
@@ -43289,6 +43311,9 @@ var PeriscopeDashboardIframe = function PeriscopeDashboardIframe(_ref) {
     time.timer = setTimeout(function () {
       periscopeDataRequestFailure();
     }, 10000);
+    return function () {
+      return clearTimeout(time.timer);
+    };
   }, []);
 
   var Dashboard = function Dashboard(height) {
@@ -43309,8 +43334,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();
+      }
     }
   };
 
@@ -43619,13 +43647,27 @@ var index$4 = /*#__PURE__*/Object.freeze({
   fontWeights: style_constants
 });
 
+var useFocusInvalidInput = function useFocusInvalidInput() {
+  var showErrors = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
+  // Only move focus when "showErrors" is true
+  // "showErrors" is managed by container page of form
+  // typically set to "true" on attempted form submission, if errors exist
+  useEffect$1(function () {
+    if (showErrors) {
+      var inputsWithErrors = document.querySelectorAll("input[aria-invalid=true]");
+      console.log("inputs with errors...", inputsWithErrors);
+    }
+  }, [showErrors]);
+};
+
 
 
 var index$5 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   formats: formats,
   general: general,
-  theme: themeUtils
+  theme: themeUtils,
+  useFocusInvalidInput: useFocusInvalidInput
 });
 
 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 };