@thecb/components 9.1.0-beta.7 → 9.1.0

package/dist/index.d.ts

@@ -455,7 +455,7 @@ interface FormInputProps {
   themeValues?: object;
   background?: string;
   customHeight?: string;
-  autocompleteValue?: string | null;
+  autocompleteValue?: string;
   removeFromValue?: RegExp;
   dataQa?: string | null;
 }
@@ -476,9 +476,10 @@ interface FormSelectProps {
   disabledValues?: string[];
   themeValues?: object;
   hasTitles?: boolean;
-  autocompleteValue?: string | null;
+  autocompleteValue?: string;
   smoothScroll?: boolean;
   dataQa?: string | null;
+  widthFitOptions?: boolean;
 }
 
 declare const FormSelect: React.FC<Expand<FormSelectProps> &
@@ -638,6 +639,7 @@ declare const XCircleIconSmall: React.FC<Expand<XCircleIconSmallProps> &
   React.HTMLAttributes<HTMLElement>>;
 
 interface BoxProps {
+  autocompleteValue?: string;
   padding?: string;
   borderSize?: string;
   borderColor?: string;
@@ -835,6 +837,7 @@ declare const Paragraph: React.FC<Expand<ParagraphProps> &
   React.HTMLAttributes<HTMLElement>>;
 
 interface SearchableSelectProps {
+  autocompleteValue?: boolean;
   items: SearchableSelectOption[];
   selectedItems: SearchableSelectOption[];
   allSelected: boolean;

package/dist/index.esm.js

@@ -6522,7 +6522,7 @@ 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", "srOnly", "dataQa", "children"];
+var _excluded$3 = ["autocompleteValue", "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
@@ -6532,7 +6532,8 @@ var _excluded$3 = ["padding", "borderSize", "borderColor", "borderRadius", "boxS
 */
 
 var Box = /*#__PURE__*/forwardRef(function (_ref, ref) {
-  var _ref$padding = _ref.padding,
+  var autocompleteValue = _ref.autocompleteValue,
+      _ref$padding = _ref.padding,
       padding = _ref$padding === void 0 ? "16px" : _ref$padding,
       _ref$borderSize = _ref.borderSize,
       borderSize = _ref$borderSize === void 0 ? "0px" : _ref$borderSize,
@@ -6572,6 +6573,7 @@ var Box = /*#__PURE__*/forwardRef(function (_ref, ref) {
       rest = _objectWithoutProperties(_ref, _excluded$3);
 
   return /*#__PURE__*/React.createElement(BoxWrapper, _extends({
+    autoComplete: autocompleteValue,
     padding: padding,
     borderSize: borderSize,
     borderColor: borderColor,
@@ -18754,7 +18756,13 @@ var Alert = function Alert(_ref) {
       _ref$iconPadding = _ref.iconPadding,
       iconPadding = _ref$iconPadding === void 0 ? "0 0 0 1rem" : _ref$iconPadding,
       _ref$contentFullHeigh = _ref.contentFullHeight,
-      contentFullHeight = _ref$contentFullHeigh === void 0 ? false : _ref$contentFullHeigh;
+      contentFullHeight = _ref$contentFullHeigh === void 0 ? false : _ref$contentFullHeigh,
+      _ref$ariaRole = _ref.ariaRole,
+      ariaRole = _ref$ariaRole === void 0 ? null : _ref$ariaRole,
+      _ref$ariaAtomic = _ref.ariaAtomic,
+      ariaAtomic = _ref$ariaAtomic === void 0 ? true : _ref$ariaAtomic,
+      _ref$ariaLive = _ref.ariaLive,
+      ariaLive = _ref$ariaLive === void 0 ? "polite" : _ref$ariaLive;
   var Icon = AlertIcons[variant];
   var contentPadding = maxContentWidth ? "".concat(padding, " 1rem") : innerContentPadding;
   var content = /*#__PURE__*/React.createElement(Sidebar, {
@@ -18800,7 +18808,7 @@ var Alert = function Alert(_ref) {
     minHeight: "100%",
     onClick: onLinkClick
   }, /*#__PURE__*/React.createElement(IconQuit, null))))));
-  return /*#__PURE__*/React.createElement(Box, {
+  return /*#__PURE__*/React.createElement(Box, _extends({
     padding: padding,
     width: "100%",
     minHeight: height && parseInt(height) < 100 ? height : "100px",
@@ -18811,9 +18819,12 @@ var Alert = function Alert(_ref) {
     borderSize: noBorder ? "0px" : "1px",
     boxShadow: enableBoxShadow ? (_generateShadows = generateShadows()) === null || _generateShadows === void 0 ? void 0 : (_generateShadows$inse = _generateShadows.inset) === null || _generateShadows$inse === void 0 ? void 0 : _generateShadows$inse.base : "",
     extraStyles: extraStyles,
-    role: "alert",
-    "aria-atomic": true
-  }, maxContentWidth ? /*#__PURE__*/React.createElement(Center, {
+    "aria-live": ariaLive
+  }, ariaAtomic !== null ? {
+    "aria-atomic": ariaAtomic
+  } : {}, ariaRole !== null ? {
+    role: ariaRole
+  } : {}), maxContentWidth ? /*#__PURE__*/React.createElement(Center, {
     maxWidth: maxContentWidth
   }, content) : content);
 };
@@ -23741,8 +23752,7 @@ var Dropdown = function Dropdown(_ref8) {
       autoEraseTypeAhead = _ref8$autoEraseTypeAh === void 0 ? true : _ref8$autoEraseTypeAh,
       ariaLabelledby = _ref8.ariaLabelledby,
       ariaDescribedby = _ref8.ariaDescribedby,
-      _ref8$autocompleteVal = _ref8.autocompleteValue,
-      autocompleteValue = _ref8$autocompleteVal === void 0 ? null : _ref8$autocompleteVal,
+      autocompleteValue = _ref8.autocompleteValue,
       _ref8$smoothScroll = _ref8.smoothScroll,
       smoothScroll = _ref8$smoothScroll === void 0 ? true : _ref8$smoothScroll,
       _ref8$ariaInvalid = _ref8.ariaInvalid,
@@ -24071,7 +24081,7 @@ var Dropdown = function Dropdown(_ref8) {
     }, /*#__PURE__*/React.createElement(Text$1, {
       variant: "p",
       color: choice.value === value ? WHITE : disabledValues.includes(choice.value) ? STORM_GREY : MINESHAFT_GREY,
-      extraStyles: "padding-left: 16px; \n                      cursor: ".concat(disabledValues.includes(choice.value) ? "default" : "pointer", "; \n                      white-space: nowrap; \n                      overflow: hidden; \n                      text-overflow: ellipsis;")
+      extraStyles: "padding-left: 16px;\n                      cursor: ".concat(disabledValues.includes(choice.value) ? "default" : "pointer", ";\n                      white-space: nowrap;\n                      overflow: hidden;\n                      text-overflow: ellipsis;")
     }, choice.text));
   }))) : /*#__PURE__*/React.createElement(Fragment$1, null)));
 };
@@ -24175,12 +24185,13 @@ var FormSelect = function FormSelect(_ref) {
       themeValues = _ref.themeValues,
       _ref$hasTitles = _ref.hasTitles,
       hasTitles = _ref$hasTitles === void 0 ? false : _ref$hasTitles,
-      _ref$autocompleteValu = _ref.autocompleteValue,
-      autocompleteValue = _ref$autocompleteValu === void 0 ? null : _ref$autocompleteValu,
+      autocompleteValue = _ref.autocompleteValue,
       _ref$smoothScroll = _ref.smoothScroll,
       smoothScroll = _ref$smoothScroll === void 0 ? true : _ref$smoothScroll,
       _ref$dataQa = _ref.dataQa,
-      dataQa = _ref$dataQa === void 0 ? null : _ref$dataQa;
+      dataQa = _ref$dataQa === void 0 ? null : _ref$dataQa,
+      _ref$widthFitOptions = _ref.widthFitOptions,
+      widthFitOptions = _ref$widthFitOptions === void 0 ? false : _ref$widthFitOptions;
 
   var _useState = useState(false),
       _useState2 = _slicedToArray(_useState, 2),
@@ -24223,6 +24234,7 @@ var FormSelect = function FormSelect(_ref) {
     ariaLabelledby: createIdFromString(labelTextWhenNoError),
     ariaDescribedby: createIdFromString(labelTextWhenNoError, "error message"),
     maxHeight: dropdownMaxHeight,
+    widthFitOptions: widthFitOptions,
     hasTitles: hasTitles,
     placeholder: options[0] ? options[0].text : "",
     options: options,
@@ -25948,8 +25960,7 @@ var FormInput = function FormInput(_ref15) {
       themeValues = _ref15.themeValues,
       background = _ref15.background,
       customHeight = _ref15.customHeight,
-      _ref15$autocompleteVa = _ref15.autocompleteValue,
-      autocompleteValue = _ref15$autocompleteVa === void 0 ? null : _ref15$autocompleteVa,
+      autocompleteValue = _ref15.autocompleteValue,
       extraStyles = _ref15.extraStyles,
       removeFromValue = _ref15.removeFromValue,
       _ref15$dataQa = _ref15.dataQa,
@@ -26619,12 +26630,11 @@ var LineItem = function LineItem(_ref) {
     return visibleFields.includes(attr.key) && attr.key !== "description";
   })) === null || _customAttributes$fil === void 0 ? void 0 : _customAttributes$fil.map(function (attr) {
     return /*#__PURE__*/React.createElement(Paragraph$1, {
-      variant: themeValues.paragraphVariant,
+      variant: "pS",
       weight: "400",
-      key: attr.key
-    }, /*#__PURE__*/React.createElement(Text$1, {
-      weight: FONT_WEIGHT_SEMIBOLD
-    }, "".concat(formatAttrKeys(attr.key), ":")), /*#__PURE__*/React.createElement(Text$1, null, " ".concat(attr.value)));
+      key: attr.key,
+      color: STORM_GREY
+    }, "".concat(formatAttrKeys(attr.key), ": ").concat(attr.value));
   });
   return /*#__PURE__*/React.createElement(Cluster, {
     nowrap: true,
@@ -26639,7 +26649,7 @@ var LineItem = function LineItem(_ref) {
     variant: themeValues.paragraphVariant,
     weight: "400"
   }, subDescription), visibleCustomAttrs && /*#__PURE__*/React.createElement(Stack, {
-    childGap: "0"
+    childGap: "0.25rem"
   }, visibleCustomAttrs)), !!displayQuantity && /*#__PURE__*/React.createElement(Paragraph$1, {
     variant: themeValues.paragraphVariant,
     weight: themeValues.weightTitle
@@ -27331,7 +27341,8 @@ var fallbackValues$w = {
 var SELECT_ALL = "Select All";
 
 var SearchableSelect = function SearchableSelect(_ref) {
-  var items = _ref.items,
+  var autocompleteValue = _ref.autocompleteValue,
+      items = _ref.items,
       selectedItems = _ref.selectedItems,
       allSelected = _ref.allSelected,
       toggleSelectAllItems = _ref.toggleSelectAllItems,
@@ -27373,6 +27384,7 @@ var SearchableSelect = function SearchableSelect(_ref) {
     border: themeValues.border,
     extraStyles: disabled && "color: #6e727e; background-color: #f7f7f7; pointer-events: none;"
   }, /*#__PURE__*/React.createElement(FormInput$1, {
+    autocompleteValue: autocompleteValue,
     errorMessages: {},
     field: fields.searchTerm,
     fieldActions: actions.fields.searchTerm,
@@ -37990,9 +38002,7 @@ var FormStateDropdown = function FormStateDropdown(_ref) {
       field = _ref.field,
       fieldActions = _ref.fieldActions,
       showErrors = _ref.showErrors,
-      countryCode = _ref.countryCode,
-      _ref$autocompleteValu = _ref.autocompleteValue,
-      autocompleteValue = _ref$autocompleteValu === void 0 ? null : _ref$autocompleteValu;
+      countryCode = _ref.countryCode;
   var placeholder = countryCode === "US" ? placeHolderOptionUS : placeHolderOption;
   var options = [placeholder].concat(_toConsumableArray(getOptions(countryCode)));
   return /*#__PURE__*/React.createElement(FormSelect$1, {
@@ -38002,7 +38012,7 @@ var FormStateDropdown = function FormStateDropdown(_ref) {
     labelTextWhenNoError: labelTextWhenNoError,
     errorMessages: errorMessages,
     showErrors: showErrors,
-    autocompleteValue: autocompleteValue
+    autocompleteValue: "address-level1"
   });
 };
 
@@ -39372,7 +39382,7 @@ var AddressForm = function AddressForm(_ref) {
     onKeyDown: function onKeyDown(e) {
       return e.key === "Enter" && handleSubmit(e);
     },
-    autocompleteValue: "city",
+    autocompleteValue: "address-level2",
     dataQa: "City"
   }), /*#__PURE__*/React.createElement(FormStateDropdown, {
     labelTextWhenNoError: isUS ? "State" : "State or Province",
@@ -39384,7 +39394,6 @@ var AddressForm = function AddressForm(_ref) {
     onKeyDown: function onKeyDown(e) {
       return e.key === "Enter" && handleSubmit(e);
     },
-    autocompleteValue: "administrative-area",
     dataQa: "State or Province"
   }), /*#__PURE__*/React.createElement(FormInput$1, {
     isNum: isUS,
@@ -48391,7 +48400,7 @@ var PhoneForm = function PhoneForm(_ref) {
     onKeyUp: function onKeyUp(e) {
       return e.key === "Enter" && handleSubmit(e);
     },
-    autocompleteValue: "tel",
+    autocompleteValue: "tel-national",
     dataQa: "Phone number",
     isNum: true
   }), showWalletCheckbox && /*#__PURE__*/React.createElement(Checkbox$1, {