@thecb/components 9.0.6 → 9.0.7-beta.1

package/dist/index.d.ts

@@ -479,7 +479,6 @@ interface FormSelectProps {
   autocompleteValue?: string | null;
   smoothScroll?: boolean;
   dataQa?: string | null;
-  widthFitOptions?: boolean;
 }
 
 declare const FormSelect: React.FC<Expand<FormSelectProps> &

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,
@@ -23750,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,
@@ -24080,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)));
 };
@@ -24184,14 +24185,11 @@ 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,
-      _ref$widthFitOptions = _ref.widthFitOptions,
-      widthFitOptions = _ref$widthFitOptions === void 0 ? false : _ref$widthFitOptions;
+      dataQa = _ref$dataQa === void 0 ? null : _ref$dataQa;
 
   var _useState = useState(false),
       _useState2 = _slicedToArray(_useState, 2),
@@ -24234,7 +24232,6 @@ 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,
@@ -25960,8 +25957,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,
@@ -27316,7 +27312,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,
@@ -27358,6 +27355,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,
@@ -37975,9 +37973,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, {
@@ -37987,7 +37983,7 @@ var FormStateDropdown = function FormStateDropdown(_ref) {
     labelTextWhenNoError: labelTextWhenNoError,
     errorMessages: errorMessages,
     showErrors: showErrors,
-    autocompleteValue: autocompleteValue
+    autocompleteValue: "address-level1"
   });
 };
 
@@ -39369,7 +39365,6 @@ var AddressForm = function AddressForm(_ref) {
     onKeyDown: function onKeyDown(e) {
       return e.key === "Enter" && handleSubmit(e);
     },
-    autocompleteValue: "address-level1",
     dataQa: "State or Province"
   }), /*#__PURE__*/React.createElement(FormInput$1, {
     isNum: isUS,
@@ -48376,7 +48371,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, {