@thecb/components 5.6.5 → 5.6.9

package/dist/index.esm.js

@@ -6107,6 +6107,16 @@ var checkDeniedCards = function checkDeniedCards(name) {
       return "";
   }
 };
+/*
+  An optional style for layout atoms that positions the atom completely off screen
+  This will *not* be visible or accessible to sighted users
+  Use to contain text content or a11y interactive content (skip links when not visible)
+  that is only for users of assistive technologies (screen readers)
+
+  Currently implemented on the Box atom via the srOnly prop
+*/
+
+var screenReaderOnlyStyle = "\n  position: absolute;\n  left: -10000px;\n  top: auto;\n  width: 1px;\n  height: 1px;\n  overflow: hidden;\n";
 
 var general = /*#__PURE__*/Object.freeze({
   __proto__: null,
@@ -6118,7 +6128,8 @@ var general = /*#__PURE__*/Object.freeze({
   generateClickHandler: generateClickHandler,
   checkCardBrand: checkCardBrand,
   displayCardBrand: displayCardBrand,
-  checkDeniedCards: checkDeniedCards
+  checkDeniedCards: checkDeniedCards,
+  screenReaderOnlyStyle: screenReaderOnlyStyle
 });
 
 var _excluded$1 = ["themeValues", "weight", "color", "extraStyles", "hoverStyles", "onClick", "onKeyPress", "as", "dataQa", "children"];
@@ -6261,10 +6272,13 @@ var BoxWrapper = styled(function (_ref) {
 });
 /* eslint-enable no-unused-vars */
 
-var _excluded$3 = ["padding", "borderSize", "borderColor", "borderRadius", "boxShadow", "background", "color", "minHeight", "width", "minWidth", "maxWidth", "borderWidthOverride", "border", "textAlign", "hoverStyles", "activeStyles", "disabledStyles", "variant", "as", "onClick", "onKeyDown", "onMouseEnter", "onMouseLeave", "onFocus", "onBlur", "onTouchEnd", "theme", "hiddenStyles", "extraStyles", "dataQa", "children"];
+var _excluded$3 = ["padding", "borderSize", "borderColor", "borderRadius", "boxShadow", "background", "color", "minHeight", "width", "minWidth", "maxWidth", "borderWidthOverride", "border", "textAlign", "hoverStyles", "activeStyles", "disabledStyles", "variant", "as", "onClick", "onKeyDown", "onMouseEnter", "onMouseLeave", "onFocus", "onBlur", "onTouchEnd", "theme", "hiddenStyles", "extraStyles", "srOnly", "dataQa", "children"];
 /*
   Box component to create generic boxes
   Supply padding, border, background, and color values
+
+  srOnly prop enables special screen-reader style that is used to position content
+  completely off screen (only for users of screen readers)
 */
 
 var Box = function Box(_ref) {
@@ -6301,6 +6315,8 @@ var Box = function Box(_ref) {
       theme = _ref.theme,
       hiddenStyles = _ref.hiddenStyles,
       extraStyles = _ref.extraStyles,
+      _ref$srOnly = _ref.srOnly,
+      srOnly = _ref$srOnly === void 0 ? false : _ref$srOnly,
       dataQa = _ref.dataQa,
       children = _ref.children,
       rest = _objectWithoutProperties(_ref, _excluded$3);
@@ -6327,7 +6343,7 @@ var Box = function Box(_ref) {
     onClick: onClick,
     hiddenStyles: hiddenStyles,
     onKeyDown: onKeyDown,
-    extraStyles: extraStyles,
+    extraStyles: srOnly ? "".concat(screenReaderOnlyStyle).concat(extraStyles) : extraStyles,
     theme: theme,
     textAlign: textAlign,
     "data-qa": dataQa,
@@ -6393,17 +6409,17 @@ var ClusterWrapper = styled(function (_ref) {
   var overflow = _ref2.overflow;
   return overflow ? "visible" : "hidden";
 }, function (_ref3) {
-  var justifySelf = _ref3.justifySelf;
-  return justifySelf;
+  var $justifySelf = _ref3.$justifySelf;
+  return $justifySelf;
 }, function (_ref4) {
-  var alignSelf = _ref4.alignSelf;
-  return alignSelf;
+  var $alignSelf = _ref4.$alignSelf;
+  return $alignSelf;
 }, function (_ref5) {
-  var flexGrow = _ref5.flexGrow;
-  return flexGrow;
+  var $flexGrow = _ref5.$flexGrow;
+  return $flexGrow;
 }, function (_ref6) {
-  var extraStyles = _ref6.extraStyles;
-  return extraStyles;
+  var $extraStyles = _ref6.$extraStyles;
+  return $extraStyles;
 });
 var ClusterInnerWrapper = styled.div.withConfig({
   displayName: "Clusterstyled__ClusterInnerWrapper",
@@ -6460,10 +6476,10 @@ var Cluster = function Cluster(_ref) {
   return /*#__PURE__*/React.createElement(ClusterWrapper, _extends({
     overflow: overflow
   }, rest, {
-    justifySelf: justifySelf,
-    alignSelf: alignSelf,
-    flexGrow: flexGrow,
-    extraStyles: extraStyles
+    $justifySelf: justifySelf,
+    $alignSelf: alignSelf,
+    $flexGrow: flexGrow,
+    $extraStyles: extraStyles
   }), /*#__PURE__*/React.createElement(ClusterInnerWrapper, {
     justify: justify,
     align: align,
@@ -21055,8 +21071,8 @@ var InputField = styled.input.withConfig({
       themeValues = _ref.themeValues;
   return field.dirty && field.hasErrors || field.hasErrors && showErrors ? ERROR_COLOR : themeValues.borderColor;
 }, function (_ref2) {
-  var customHeight = _ref2.customHeight;
-  return customHeight ? customHeight : "48px";
+  var $customHeight = _ref2.$customHeight;
+  return $customHeight ? $customHeight : "48px";
 }, FONT_WEIGHT_REGULAR, function (_ref3) {
   var themeValues = _ref3.themeValues;
   return themeValues.inputBackgroundColor && themeValues.inputBackgroundColor;
@@ -21071,8 +21087,8 @@ var InputField = styled.input.withConfig({
   var disabled = _ref6.disabled;
   return disabled && css(["color:#6e727e;background-color:#f7f7f7;"]);
 }, function (_ref7) {
-  var extraStyles = _ref7.extraStyles;
-  return css(["", ""], extraStyles);
+  var $extraStyles = _ref7.$extraStyles;
+  return css(["", ""], $extraStyles);
 }); // eslint-disable-next-line no-unused-vars
 
 var FormattedInputField = styled(function (_ref8) {
@@ -21090,8 +21106,8 @@ var FormattedInputField = styled(function (_ref8) {
       themeValues = _ref9.themeValues;
   return field.dirty && field.hasErrors || field.hasErrors && showErrors ? ERROR_COLOR : themeValues.borderColor;
 }, function (_ref10) {
-  var customHeight = _ref10.customHeight;
-  return customHeight ? customHeight : "48px";
+  var $customHeight = _ref10.$customHeight;
+  return $customHeight ? $customHeight : "48px";
 }, FONT_WEIGHT_REGULAR, function (_ref11) {
   var themeValues = _ref11.themeValues;
   return themeValues.inputBackgroundColor && themeValues.inputBackgroundColor;
@@ -21201,8 +21217,8 @@ var FormInput = function FormInput(_ref15) {
     showErrors: showErrors,
     "data-qa": labelTextWhenNoError,
     themeValues: themeValues,
-    customHeight: customHeight,
-    extraStyles: extraStyles
+    $customHeight: customHeight,
+    $extraStyles: extraStyles
   }, props)) : /*#__PURE__*/React.createElement(InputField, _extends({
     "aria-labelledby": labelTextWhenNoError.replace(/\s+/g, "-"),
     onChange: function onChange(e) {
@@ -21217,8 +21233,8 @@ var FormInput = function FormInput(_ref15) {
     "data-qa": labelTextWhenNoError,
     themeValues: themeValues,
     background: background,
-    customHeight: customHeight,
-    extraStyles: extraStyles
+    $customHeight: customHeight,
+    $extraStyles: extraStyles
   }, props))), /*#__PURE__*/React.createElement(Stack, {
     direction: "row",
     justify: "space-between"
@@ -33302,12 +33318,12 @@ const MATCHES_FIELD_ERROR$1 = "error/MATCHES_FIELD";
 const matchesField = createValidator(MATCHES_FIELD, MATCHES_FIELD_ERROR$1);
 validatorFns[MATCHES_FIELD] = (value, args, form) => {
   const dependentField = form[args[0]];
-  const dependentFieldValue = dependentField?.rawValue ?? "";
   if (dependentField === undefined) {
     throw new Error(
       `${args[0]} was passed to matchesField, but that field does not exist in the form`
     );
   }
+  const dependentFieldValue = dependentField.rawValue;
   return value === dependentFieldValue;
 };
 
@@ -41107,9 +41123,11 @@ var Tabs = function Tabs(_ref) {
     className: "tab-list"
   }, tabsDisplayMode == HORIZONTAL ? showHorozontal(tabsConfig, activeTab) : showVertical(tabsConfig, activeTab)), /*#__PURE__*/React.createElement(Box, {
     className: "tab-content"
-  }, /*#__PURE__*/React.createElement(Box, null, tabsConfig.tabs.map(function (tab) {
+  }, /*#__PURE__*/React.createElement(Box, null, tabsConfig.tabs.map(function (tab, idx) {
     if (tab.label !== activeTab) return undefined;
-    return tab.content;
+    return /*#__PURE__*/React.createElement(Fragment, {
+      key: idx
+    }, tab.content);
   }))));
 };
 
@@ -41436,6 +41454,119 @@ var WorkflowTile = function WorkflowTile(_ref) {
   }))));
 };
 
+var DashboardIframe = styled.iframe.withConfig({
+  displayName: "PeriscopeDashboardIframestyled__DashboardIframe",
+  componentId: "sc-j0cucj-0"
+})(["border:none;box-shadow:0 0 5px 0 ", ";display:none;"], ALTO_GREY);
+
+/**
+ * Component: PeriscopeDashboardIframe
+ *
+ * Used for rendering Citybase's periscope reporting dashboards in iframes.
+ * Receives action props to trigger a request on mount for the iframe's url.
+ * Receives a string prop if/when we receive the url result.
+ * And receives action props to emit errors from failed iframe loading.
+ *
+ * The logic and api client methods to handle requests/response,
+ * store the url, etc. should be provided from the app consuming this library.
+ *
+ * If the url request is pending, render a spinner.
+ * If the url request failed, render a UI error state.
+ **/
+
+var DASHBOARD_SIZE_MESSAGE_TYPE = "dashboard_resize";
+var PERISCOPE_ORIGIN = "https://app.periscopedata.com";
+
+var isValidMessage = function isValidMessage(message) {
+  return message.isTrusted && message.origin === PERISCOPE_ORIGIN && message.data && message.data.event_type === DASHBOARD_SIZE_MESSAGE_TYPE;
+};
+
+var PeriscopeDashboardIframe = function PeriscopeDashboardIframe(_ref) {
+  var url = _ref.url,
+      requestDashboardUrl = _ref.requestDashboardUrl,
+      periscopeDataPending = _ref.periscopeDataPending,
+      periscopeDataSuccess = _ref.periscopeDataSuccess,
+      periscopeDataFailure = _ref.periscopeDataFailure,
+      periscopeDataRequestSuccess = _ref.periscopeDataRequestSuccess,
+      periscopeDataRequestFailure = _ref.periscopeDataRequestFailure;
+
+  var _useState = useState(0),
+      _useState2 = _slicedToArray(_useState, 2),
+      height = _useState2[0],
+      setHeight = _useState2[1];
+
+  var time = {
+    timer: null
+  };
+  useEffect$1(function () {
+    time.timer = setTimeout(function () {
+      periscopeDataRequestFailure();
+    }, 10000);
+  }, []);
+
+  var Dashboard = function Dashboard(height) {
+    return function (url) {
+      return /*#__PURE__*/React.createElement(DashboardIframe, {
+        src: url,
+        width: "100%",
+        height: height,
+        "data-qa": "DashboardIframe",
+        onLoad: function onLoad() {
+          var iframe = document.querySelector("iframe");
+          iframe.style.display = "initial";
+        }
+      });
+    };
+  };
+
+  var validatePeriscope = function validatePeriscope(message) {
+    if (isValidMessage(message)) {
+      setHeight(message.data.dashboard_height + 100);
+      clearTimeout(time.timer);
+      periscopeDataRequestSuccess();
+    }
+  };
+
+  useLayoutEffect(function () {
+    window.addEventListener("message", validatePeriscope);
+    requestDashboardUrl();
+    return function () {
+      return window.removeEventListener("message", validatePeriscope);
+    };
+  }, [requestDashboardUrl]);
+  return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(BoxWithShadow$1, {
+    padding: "0",
+    minWidth: "100%",
+    minHeight: "592px",
+    variant: "baseStandard",
+    background: "#fff",
+    borderRadius: "4px",
+    extraStyles: "display: flex; justify-content: center; align-items: center; flex-direction: column;"
+  }, periscopeDataPending && !periscopeDataSuccess && /*#__PURE__*/React.createElement(Cover, {
+    minHeight: "100%",
+    singleChild: true
+  }, /*#__PURE__*/React.createElement(Center, {
+    intrinsic: true
+  }, /*#__PURE__*/React.createElement(Spinner$2, {
+    size: "100"
+  }))), periscopeDataFailure && !periscopeDataSuccess && /*#__PURE__*/React.createElement(Box, {
+    padding: "64px"
+  }, /*#__PURE__*/React.createElement(Center, {
+    intrinsic: true
+  }, /*#__PURE__*/React.createElement(Box, {
+    padding: "0 0 2rem"
+  }, /*#__PURE__*/React.createElement(PeriscopeFailedIcon, null)), /*#__PURE__*/React.createElement(Heading$1, {
+    variant: "h3",
+    weight: "700"
+  }, "Something Went Wrong"), /*#__PURE__*/React.createElement(Paragraph$1, {
+    variant: "p",
+    extraStyles: "text-align: center;"
+  }, "There was an issue trying to load the dashboard."), /*#__PURE__*/React.createElement(Paragraph$1, {
+    variant: "p",
+    extraStyles: "text-align: center;"
+  }, "Your organization may not have a dashboard configured."))), !periscopeDataFailure && url && Dashboard(height)(url)));
+};
+
 var pageBackground = "#F6F6F9";
 var fallbackValues$H = {
   pageBackground: pageBackground
@@ -41710,5 +41841,5 @@ var index$5 = /*#__PURE__*/Object.freeze({
   theme: themeUtils
 });
 
-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$1 as 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, 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 };
+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$1 as 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 };
 //# sourceMappingURL=index.esm.js.map