@thecb/components 5.6.9 → 5.6.10

package/dist/index.esm.js

@@ -19384,8 +19384,6 @@ var SearchInput = styled.input.withConfig({
 });
 
 var Dropdown = function Dropdown(_ref9) {
-  var _options$find;
-
   var placeholder = _ref9.placeholder,
       options = _ref9.options,
       value = _ref9.value,
@@ -19400,7 +19398,9 @@ var Dropdown = function Dropdown(_ref9) {
       maxHeight = _ref9.maxHeight,
       _ref9$widthFitOptions = _ref9.widthFitOptions,
       widthFitOptions = _ref9$widthFitOptions === void 0 ? false : _ref9$widthFitOptions,
-      disabled = _ref9.disabled;
+      disabled = _ref9.disabled,
+      _ref9$hasTitles = _ref9.hasTitles,
+      hasTitles = _ref9$hasTitles === void 0 ? false : _ref9$hasTitles;
 
   var _useState = useState(""),
       _useState2 = _slicedToArray(_useState, 2),
@@ -19442,6 +19442,14 @@ var Dropdown = function Dropdown(_ref9) {
   }));
   var dropdownRef = useRef(null);
 
+  var getSelection = function getSelection() {
+    var _options$find;
+
+    return value ? (_options$find = options.find(function (option) {
+      return option.value === value;
+    })) === null || _options$find === void 0 ? void 0 : _options$find.text : placeholder;
+  };
+
   var onKeyDown = function onKeyDown(e) {
     var key = e.key,
         keyCode = e.keyCode;
@@ -19537,7 +19545,8 @@ var Dropdown = function Dropdown(_ref9) {
     width: "100%",
     hoverStyles: "background-color: ".concat(themeValues.hoverColor, ";"),
     "aria-expanded": isOpen,
-    extraStyles: disabled && "color: #6e727e;\n      background-color: #f7f7f7;\n      pointer-events: none;"
+    extraStyles: disabled && "color: #6e727e;\n      background-color: #f7f7f7;\n      pointer-events: none;",
+    title: hasTitles ? getSelection() : null
   }, /*#__PURE__*/React.createElement(Box, {
     as: "button",
     background: isOpen ? themeValues.hoverColor : WHITE,
@@ -19561,9 +19570,7 @@ var Dropdown = function Dropdown(_ref9) {
   }) : /*#__PURE__*/React.createElement(Text$1, {
     variant: "p",
     extraStyles: disabled && "color: #6e727e;\n            background-color: #f7f7f7;\n            pointer-events: none;"
-  }, value ? (_options$find = options.find(function (option) {
-    return option.value === value;
-  })) === null || _options$find === void 0 ? void 0 : _options$find.text : placeholder), /*#__PURE__*/React.createElement(IconWrapper, {
+  }, getSelection()), /*#__PURE__*/React.createElement(IconWrapper, {
     open: isOpen
   }, /*#__PURE__*/React.createElement(DropdownIcon, null)))), isOpen ? /*#__PURE__*/React.createElement(DropdownContentWrapper, {
     maxHeight: maxHeight,
@@ -19587,7 +19594,8 @@ var Dropdown = function Dropdown(_ref9) {
       selected: choice.value === value,
       disabled: disabledValues.includes(choice.value),
       "data-qa": choice.text,
-      themeValues: themeValues
+      themeValues: themeValues,
+      title: hasTitles ? choice.text : null
     }, /*#__PURE__*/React.createElement(Text$1, {
       variant: "p",
       color: choice.value === value ? WHITE : disabledValues.includes(choice.value) ? STORM_GREY : MINESHAFT_GREY,
@@ -19692,7 +19700,9 @@ var FormSelect = function FormSelect(_ref) {
       dropdownMaxHeight = _ref.dropdownMaxHeight,
       disabledValues = _ref.disabledValues,
       disabled = _ref.disabled,
-      themeValues = _ref.themeValues;
+      themeValues = _ref.themeValues,
+      _ref$hasTitles = _ref.hasTitles,
+      hasTitles = _ref$hasTitles === void 0 ? false : _ref$hasTitles;
 
   var _useState = useState(false),
       _useState2 = _slicedToArray(_useState, 2),
@@ -19732,6 +19742,7 @@ var FormSelect = function FormSelect(_ref) {
   }, labelTextWhenNoError))), /*#__PURE__*/React.createElement(Dropdown$1, {
     "aria-labelledby": labelTextWhenNoError.replace(/\s+/g, "-"),
     maxHeight: dropdownMaxHeight,
+    hasTitles: hasTitles,
     placeholder: options[0] ? options[0].text : "",
     options: options,
     value: field.rawValue,