@thecb/components 4.4.0-beta.1 → 4.4.0

package/dist/index.cjs.js

@@ -6073,16 +6073,17 @@ var createUniqueId = function createUniqueId() {
 
 var safeChildren = function safeChildren(children) {
   var replacement = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
+  var unsafeValues = [false, undefined, NaN, null];
 
   if (children && children instanceof Array) {
     return children.map(function (child) {
-      return !child ? /*#__PURE__*/React__default.createElement(React.Fragment, {
+      return unsafeValues.includes(child) ? /*#__PURE__*/React__default.createElement(React.Fragment, {
         key: createUniqueId()
       }, replacement) : child;
     });
   }
 
-  return !children ? replacement : children;
+  return unsafeValues.includes(children) ? replacement : children;
 };
 var generateClickHandler = function generateClickHandler(form, handleErrors, submitForm) {
   return function (e) {
@@ -16402,7 +16403,7 @@ function parseToRgb(color) {
     };
   }
 
-  var rgbaMatched = rgbaRegex.exec(normalizedColor);
+  var rgbaMatched = rgbaRegex.exec(normalizedColor.substring(0, 50));
 
   if (rgbaMatched) {
     return {
@@ -16433,7 +16434,7 @@ function parseToRgb(color) {
     };
   }
 
-  var hslaMatched = hslaRegex.exec(normalizedColor);
+  var hslaMatched = hslaRegex.exec(normalizedColor.substring(0, 50));
 
   if (hslaMatched) {
     var _hue = parseInt("" + hslaMatched[1], 10);
@@ -40363,11 +40364,14 @@ var PaymentFormCard = function PaymentFormCard(_ref) {
       showErrors = _ref.showErrors,
       _ref$handleSubmit = _ref.handleSubmit,
       handleSubmit = _ref$handleSubmit === void 0 ? noop : _ref$handleSubmit,
-      isMobile = _ref.isMobile,
       showWalletCheckbox = _ref.showWalletCheckbox,
       saveToWallet = _ref.saveToWallet,
       walletCheckboxMarked = _ref.walletCheckboxMarked,
       deniedCards = _ref.deniedCards;
+
+  var _useContext = React.useContext(styled.ThemeContext),
+      isMobile = _useContext.isMobile;
+
   React.useEffect(function () {
     if (deniedCards) {
       deniedCards.map(function (card) {
@@ -40431,7 +40435,8 @@ var PaymentFormCard = function PaymentFormCard(_ref) {
     },
     isNum: true
   }), /*#__PURE__*/React__default.createElement(FormInputRow, {
-    breakpoint: "20rem"
+    breakpoint: isMobile ? "1000rem" : "21rem",
+    childGap: isMobile ? "0rem" : "1rem"
   }, /*#__PURE__*/React__default.createElement(FormInput$1, {
     labelTextWhenNoError: "Expiration date (MM/YY)",
     errorMessages: expirationDateErrors,
@@ -40476,6 +40481,8 @@ var PaymentFormCard = function PaymentFormCard(_ref) {
   })));
 };
 
+var PaymentFormCard$1 = withWindowSize(PaymentFormCard);
+
 var formConfig$8 = {
   country: {
     defaultValue: "US",
@@ -40507,9 +40514,9 @@ var _createFormState$8 = createFormState(formConfig$8),
     mapStateToProps$9 = _createFormState$8.mapStateToProps,
     mapDispatchToProps$8 = _createFormState$8.mapDispatchToProps;
 
-PaymentFormCard.reducer = reducer$8;
-PaymentFormCard.mapStateToProps = mapStateToProps$9;
-PaymentFormCard.mapDispatchToProps = mapDispatchToProps$8;
+PaymentFormCard$1.reducer = reducer$8;
+PaymentFormCard$1.mapStateToProps = mapStateToProps$9;
+PaymentFormCard$1.mapDispatchToProps = mapDispatchToProps$8;
 
 var PhoneForm = function PhoneForm(_ref) {
   var _phoneErrorMessage;
@@ -41869,7 +41876,7 @@ exports.PasswordRequirements = PasswordRequirements;
 exports.PaymentButtonBar = PaymentButtonBar;
 exports.PaymentDetails = PaymentDetails$1;
 exports.PaymentFormACH = PaymentFormACH;
-exports.PaymentFormCard = PaymentFormCard;
+exports.PaymentFormCard = PaymentFormCard$1;
 exports.PaymentIcon = PaymentIcon;
 exports.PaymentMethodAddIcon = PaymentMethodAddIcon$1;
 exports.PaymentMethodIcon = PaymentMethodIcon$1;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thecb/components",
-  "version": "4.4.0-beta.1",
+  "version": "4.4.0",
   "description": "Common lib for CityBase react components",
   "main": "dist/index.cjs.js",
   "module": "dist/index.esm.js",

package/src/components/molecules/payment-form-card/PaymentFormCard.js

@@ -1,4 +1,5 @@
-import React, { useEffect } from "react";
+import React, { useEffect, useContext } from "react";
+import { ThemeContext } from "styled-components";
 import { required, hasLength, matchesRegex } from "redux-freeform";
 import Checkbox from "../../atoms/checkbox";
 import CountryDropdown from "../../atoms/country-dropdown";
@@ -20,6 +21,7 @@ import {
   FormInputRow
 } from "../../atoms/form-layouts";
 import { Box } from "../../atoms/layouts";
+import withWindowSize from "../../withWindowSize";
 
 const PaymentFormCard = ({
   variant = "default",
@@ -29,12 +31,12 @@ const PaymentFormCard = ({
   actions,
   showErrors,
   handleSubmit = noop,
-  isMobile,
   showWalletCheckbox,
   saveToWallet,
   walletCheckboxMarked,
   deniedCards
 }) => {
+  const { isMobile } = useContext(ThemeContext);
   useEffect(() => {
     if (deniedCards) {
       deniedCards.map(card =>
@@ -116,7 +118,10 @@ const PaymentFormCard = ({
           onKeyDown={e => e.key === "Enter" && handleSubmit(e)}
           isNum
         />
-        <FormInputRow breakpoint="20rem">
+        <FormInputRow
+          breakpoint={isMobile ? "1000rem" : "21rem"}
+          childGap={isMobile ? "0rem" : "1rem"}
+        >
           <FormInput
             labelTextWhenNoError="Expiration date (MM/YY)"
             errorMessages={expirationDateErrors}
@@ -172,4 +177,4 @@ const PaymentFormCard = ({
   );
 };
 
-export default PaymentFormCard;
+export default withWindowSize(PaymentFormCard);

package/src/util/general.js

@@ -17,12 +17,17 @@ const createUniqueId = () =>
     .substr(2, 9);
 
 export const safeChildren = (children, replacement = []) => {
+  const unsafeValues = [false, undefined, NaN, null];
   if (children && children instanceof Array) {
     return children.map(child =>
-      !child ? <Fragment key={createUniqueId()}>{replacement}</Fragment> : child
+      unsafeValues.includes(child) ? (
+        <Fragment key={createUniqueId()}>{replacement}</Fragment>
+      ) : (
+        child
+      )
     );
   }
-  return !children ? replacement : children;
+  return unsafeValues.includes(children) ? replacement : children;
 };
 
 export const generateClickHandler = (form, handleErrors, submitForm) => e => {