@thecb/components 6.0.0-beta.24 → 6.0.0-beta.27

package/dist/index.cjs.js

@@ -6197,7 +6197,7 @@ var Text = function Text(_ref) {
 
 var Text$1 = themeComponent(Text, "Text", fallbackValues, "p");
 
-var _excluded$2 = ["activeStyles", "hoverStyles", "disabledStyles", "extraStyles", "borderSize", "borderColor", "borderWidthOverride", "borderRadius", "textAlign", "boxShadow", "minHeight", "minWidth", "maxWidth", "padding", "hiddenStyles", "ariaControls", "ariaLabel"];
+var _excluded$2 = ["activeStyles", "hoverStyles", "disabledStyles", "extraStyles", "borderSize", "borderColor", "borderWidthOverride", "borderRadius", "textAlign", "boxShadow", "minHeight", "minWidth", "maxWidth", "padding", "hiddenStyles", "ariaControls", "ariaLabel", "ref"];
 /*
   The child span selector on hover styles targets the text inside of buttons when a button is hovered,
   as long as the box wrapper has an "as" prop equal to "button"
@@ -6226,11 +6226,13 @@ var BoxWrapper = styled__default(function (_ref) {
       hiddenStyles = _ref.hiddenStyles,
       ariaControls = _ref.ariaControls,
       ariaLabel = _ref.ariaLabel,
+      ref = _ref.ref,
       props = _objectWithoutProperties(_ref, _excluded$2);
 
   return /*#__PURE__*/React__default.createElement("div", _extends({
     "aria-controls": ariaControls,
-    "aria-label": ariaLabel
+    "aria-label": ariaLabel,
+    ref: ref
   }, props));
 }).withConfig({
   displayName: "Boxstyled__BoxWrapper",
@@ -6300,7 +6302,7 @@ var BoxWrapper = styled__default(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 = ["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", "ref", "dataQa", "children"];
 /*
   Box component to create generic boxes
   Supply padding, border, background, and color values
@@ -6345,6 +6347,7 @@ var Box = function Box(_ref) {
       extraStyles = _ref.extraStyles,
       _ref$srOnly = _ref.srOnly,
       srOnly = _ref$srOnly === void 0 ? false : _ref$srOnly,
+      ref = _ref.ref,
       dataQa = _ref.dataQa,
       children = _ref.children,
       rest = _objectWithoutProperties(_ref, _excluded$3);
@@ -6379,7 +6382,8 @@ var Box = function Box(_ref) {
     onMouseLeave: onMouseLeave,
     onFocus: onFocus,
     onBlur: onBlur,
-    onTouchEnd: onTouchEnd
+    onTouchEnd: onTouchEnd,
+    ref: ref
   }, rest), children && safeChildren(children, /*#__PURE__*/React__default.createElement(React.Fragment, null)));
 };
 
@@ -20770,6 +20774,7 @@ var Dropdown = function Dropdown(_ref8) {
     return /*#__PURE__*/React.createRef();
   }));
   var dropdownRef = React.useRef(null);
+  var inputRef = React.useRef(null);
 
   var getSelection = function getSelection() {
     var _options$find;
@@ -20881,9 +20886,11 @@ var Dropdown = function Dropdown(_ref8) {
     if (isOpen && selectedRef !== undefined && selectedRef.current !== null) {
       // WAI-ARIA requires the selected option to receive focus
       selectedRef.current.focus();
+      console.log("input box ref", inputRef, inputRef.current);
     } else if (isOpen && optionRefs.current[0].current) {
       // If no selected option, first option receives focus
       optionRefs.current[0].current.focus();
+      console.log("input box ref", inputRef, inputRef.current);
     }
 
     clearTimeout(timer);
@@ -20970,6 +20977,7 @@ var Dropdown = function Dropdown(_ref8) {
     },
     padding: "12px",
     placeholder: getSelection(),
+    ref: inputRef,
     role: "combobox",
     themeValues: themeValues,
     title: hasTitles ? getSelection() : null,