@thecb/components 9.1.4 → 9.1.5

package/dist/index.esm.js

@@ -5011,6 +5011,7 @@ var INFO_BLUE = "#E4F4FD";
 var CORNFLOWER_BLUE = "#EBEFFB";
 var HOVER_LIGHT_BLUE = "#EFFAFF";
 var MATISSE_BLUE = "#15749D";
+var MATISSE_BLUE_DARK = "#105C7D";
 var ROYAL_BLUE = "#3181E3";
 var ROYAL_BLUE_VIVID = "#3B5BDB";
 var ASTRAL_BLUE = "#3176AA";
@@ -5145,6 +5146,7 @@ var colors = /*#__PURE__*/Object.freeze({
   BOSTON_BLUE: BOSTON_BLUE,
   HOVER_LIGHT_BLUE: HOVER_LIGHT_BLUE,
   MATISSE_BLUE: MATISSE_BLUE,
+  MATISSE_BLUE_DARK: MATISSE_BLUE_DARK,
   ROYAL_BLUE: ROYAL_BLUE,
   ROYAL_BLUE_VIVID: ROYAL_BLUE_VIVID,
   ASTRAL_BLUE: ASTRAL_BLUE,
@@ -23733,9 +23735,11 @@ exportTypedArrayMethod$1('at', function at(index) {
 
 var selectedColor = "".concat(MATISSE_BLUE);
 var hoverColor$3 = "".concat(HOVER_LIGHT_BLUE);
+var focusColor = "".concat(MATISSE_BLUE_DARK);
 var fallbackValues$f = {
   selectedColor: selectedColor,
-  hoverColor: hoverColor$3
+  hoverColor: hoverColor$3,
+  focusColor: focusColor
 };
 
 var IconWrapper = styled.div.withConfig({
@@ -23758,7 +23762,7 @@ var DropdownContentWrapper = styled.div.withConfig({
 var DropdownItemWrapper = styled.li.withConfig({
   displayName: "Dropdown__DropdownItemWrapper",
   componentId: "sc-pn6m0h-2"
-})(["background-color:", ";text-align:start;border-width:0px;border-color:transparent;box-shadow:none;padding:1rem;box-sizing:border-box;width:100%;list-style:none;cursor:", ";&:hover{background-color:", ";}&:focus{background-color:", ";outline:none;}"], function (_ref4) {
+})(["text-align:start;border-width:2px;border-style:solid;border-color:", ";box-shadow:none;box-sizing:border-box;width:100%;list-style:none;cursor:", ";&:hover{border-color:", ";> *{background:", ";border-color:", ";}}&:focus{outline:none;border-color:", ";> *{background:", ";border-color:white;outline:none;}}"], function (_ref4) {
   var selected = _ref4.selected,
       themeValues = _ref4.themeValues;
   return selected ? themeValues.selectedColor : WHITE;
@@ -23766,44 +23770,69 @@ var DropdownItemWrapper = styled.li.withConfig({
   var disabled = _ref5.disabled;
   return disabled ? "default" : "pointer";
 }, function (_ref6) {
-  var selected = _ref6.selected,
-      disabled = _ref6.disabled,
+  var disabled = _ref6.disabled,
+      selected = _ref6.selected,
       themeValues = _ref6.themeValues;
-  return selected ? themeValues.selectedColor : disabled ? WHITE : themeValues.hoverColor;
+  return selected ? themeValues.focusColor : disabled ? WHITE : themeValues.hoverColor;
 }, function (_ref7) {
   var selected = _ref7.selected,
       disabled = _ref7.disabled,
       themeValues = _ref7.themeValues;
-  return selected ? themeValues.selectedColor : disabled ? WHITE : themeValues.hoverColor;
+  return selected ? themeValues.focusColor : disabled ? WHITE : themeValues.hoverColor;
+}, function (_ref8) {
+  var selected = _ref8.selected,
+      disabled = _ref8.disabled,
+      themeValues = _ref8.themeValues;
+  return selected ? themeValues.focusColor : disabled ? WHITE : themeValues.hoverColor;
+}, function (_ref9) {
+  var themeValues = _ref9.themeValues;
+  return themeValues.selectedColor;
+}, function (_ref10) {
+  var selected = _ref10.selected,
+      disabled = _ref10.disabled,
+      themeValues = _ref10.themeValues;
+  return selected ? themeValues.focusColor : disabled ? WHITE : themeValues.hoverColor;
+});
+var DropdownItemBorder = styled.div.withConfig({
+  displayName: "Dropdown__DropdownItemBorder",
+  componentId: "sc-pn6m0h-3"
+})(["background:", ";border-color:", ";border-width:2px;border-style:solid;padding:12px;"], function (_ref11) {
+  var selected = _ref11.selected,
+      themeValues = _ref11.themeValues;
+  return selected ? themeValues.selectedColor : WHITE;
+}, function (_ref12) {
+  var selected = _ref12.selected,
+      themeValues = _ref12.themeValues;
+  return selected ? themeValues.selectedColor : WHITE;
 });
 
-var Dropdown = function Dropdown(_ref8) {
-  var placeholder = _ref8.placeholder,
-      options = _ref8.options,
-      value = _ref8.value,
-      isOpen = _ref8.isOpen,
-      isError = _ref8.isError,
-      onSelect = _ref8.onSelect,
-      _ref8$disabledValues = _ref8.disabledValues,
-      disabledValues = _ref8$disabledValues === void 0 ? [] : _ref8$disabledValues,
-      _ref8$onClick = _ref8.onClick,
-      _onClick = _ref8$onClick === void 0 ? noop : _ref8$onClick,
-      themeValues = _ref8.themeValues,
-      maxHeight = _ref8.maxHeight,
-      _ref8$widthFitOptions = _ref8.widthFitOptions,
-      widthFitOptions = _ref8$widthFitOptions === void 0 ? false : _ref8$widthFitOptions,
-      disabled = _ref8.disabled,
-      _ref8$hasTitles = _ref8.hasTitles,
-      hasTitles = _ref8$hasTitles === void 0 ? false : _ref8$hasTitles,
-      _ref8$autoEraseTypeAh = _ref8.autoEraseTypeAhead,
-      autoEraseTypeAhead = _ref8$autoEraseTypeAh === void 0 ? true : _ref8$autoEraseTypeAh,
-      ariaLabelledby = _ref8.ariaLabelledby,
-      ariaDescribedby = _ref8.ariaDescribedby,
-      autocompleteValue = _ref8.autocompleteValue,
-      _ref8$smoothScroll = _ref8.smoothScroll,
-      smoothScroll = _ref8$smoothScroll === void 0 ? true : _ref8$smoothScroll,
-      _ref8$ariaInvalid = _ref8.ariaInvalid,
-      ariaInvalid = _ref8$ariaInvalid === void 0 ? false : _ref8$ariaInvalid;
+var Dropdown = function Dropdown(_ref13) {
+  var placeholder = _ref13.placeholder,
+      options = _ref13.options,
+      value = _ref13.value,
+      isOpen = _ref13.isOpen,
+      isError = _ref13.isError,
+      onSelect = _ref13.onSelect,
+      _ref13$disabledValues = _ref13.disabledValues,
+      disabledValues = _ref13$disabledValues === void 0 ? [] : _ref13$disabledValues,
+      _ref13$onClick = _ref13.onClick,
+      _onClick = _ref13$onClick === void 0 ? noop : _ref13$onClick,
+      themeValues = _ref13.themeValues,
+      maxHeight = _ref13.maxHeight,
+      _ref13$widthFitOption = _ref13.widthFitOptions,
+      widthFitOptions = _ref13$widthFitOption === void 0 ? false : _ref13$widthFitOption,
+      disabled = _ref13.disabled,
+      _ref13$hasTitles = _ref13.hasTitles,
+      hasTitles = _ref13$hasTitles === void 0 ? false : _ref13$hasTitles,
+      _ref13$autoEraseTypeA = _ref13.autoEraseTypeAhead,
+      autoEraseTypeAhead = _ref13$autoEraseTypeA === void 0 ? true : _ref13$autoEraseTypeA,
+      ariaLabelledby = _ref13.ariaLabelledby,
+      ariaDescribedby = _ref13.ariaDescribedby,
+      autocompleteValue = _ref13.autocompleteValue,
+      _ref13$smoothScroll = _ref13.smoothScroll,
+      smoothScroll = _ref13$smoothScroll === void 0 ? true : _ref13$smoothScroll,
+      _ref13$ariaInvalid = _ref13.ariaInvalid,
+      ariaInvalid = _ref13$ariaInvalid === void 0 ? false : _ref13$ariaInvalid;
 
   var _useState = useState(""),
       _useState2 = _slicedToArray(_useState, 2),
@@ -24125,11 +24154,15 @@ var Dropdown = function Dropdown(_ref8) {
       onFocus: function onFocus() {
         return setFocusedRef(optionRefs.current[i]);
       }
+    }, /*#__PURE__*/React.createElement(DropdownItemBorder, {
+      disabled: disabledValues.includes(choice.value),
+      selected: choice.value === value,
+      themeValues: themeValues
     }, /*#__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;")
-    }, choice.text));
+      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)));
 };