@thecb/components 5.6.9 → 5.6.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thecb/components",
-  "version": "5.6.9",
+  "version": "5.6.10",
   "description": "Common lib for CityBase react components",
   "main": "dist/index.cjs.js",
   "module": "dist/index.esm.js",

package/src/components/atoms/dropdown/Dropdown.js

@@ -92,7 +92,8 @@ const Dropdown = ({
   themeValues,
   maxHeight,
   widthFitOptions = false,
-  disabled
+  disabled,
+  hasTitles = false
 }) => {
   const [inputValue, setInputValue] = useState("");
   const [optionsState, setOptionsState] = useState([]);
@@ -113,6 +114,9 @@ const Dropdown = ({
   const optionRefs = useRef([...Array(options.length)].map(() => createRef()));
   const dropdownRef = useRef(null);
 
+  const getSelection = () =>
+    value ? options.find(option => option.value === value)?.text : placeholder;
+
   const onKeyDown = e => {
     const { key, keyCode } = e;
     const focus = document.activeElement;
@@ -210,6 +214,7 @@ const Dropdown = ({
       background-color: #f7f7f7;
       pointer-events: none;`
       }
+      title={hasTitles ? getSelection() : null}
     >
       <Box
         as="button"
@@ -253,9 +258,7 @@ const Dropdown = ({
             pointer-events: none;`
               }
             >
-              {value
-                ? options.find(option => option.value === value)?.text
-                : placeholder}
+              {getSelection()}
             </Text>
           )}
           <IconWrapper open={isOpen}>
@@ -287,6 +290,7 @@ const Dropdown = ({
                 disabled={disabledValues.includes(choice.value)}
                 data-qa={choice.text}
                 themeValues={themeValues}
+                title={hasTitles ? choice.text : null}
               >
                 <Text
                   variant="p"

package/src/components/atoms/form-select/FormSelect.js

@@ -18,7 +18,8 @@ const FormSelect = ({
   dropdownMaxHeight,
   disabledValues,
   disabled,
-  themeValues
+  themeValues,
+  hasTitles = false
 }) => {
   const [open, setOpen] = useState(false);
   const dropdownRef = useRef(null);
@@ -59,6 +60,7 @@ const FormSelect = ({
       <Dropdown
         aria-labelledby={labelTextWhenNoError.replace(/\s+/g, "-")}
         maxHeight={dropdownMaxHeight}
+        hasTitles={hasTitles}
         placeholder={options[0] ? options[0].text : ""}
         options={options}
         value={field.rawValue}

package/dist/cb-components.cjs.js

@@ -1,77 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
-
-var React = _interopDefault(require('react'));
-var styled = _interopDefault(require('styled-components'));
-
-function _taggedTemplateLiteral(strings, raw) {
-  if (!raw) {
-    raw = strings.slice(0);
-  }
-
-  return Object.freeze(Object.defineProperties(strings, {
-    raw: {
-      value: Object.freeze(raw)
-    }
-  }));
-}
-
-/*
-Need to add a new color? Visit http://chir.ag/projects/name-that-color to generate a color name.
-
-Name already taken? If you can't use the existing color, then use thesaurus.com to pick a similar name
-to the one generated by name-that-color.
-*/
-var PEWTER_GREY = "#DFE1E4";
-var MARINER_BLUE = "#2E75D2";
-
-function _templateObject2() {
-  var data = _taggedTemplateLiteral(["\n  height: 16px;\n  width: 16px;\n  background-color: ", ";\n  border-radius: 8px;\n"]);
-
-  _templateObject2 = function _templateObject2() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject() {
-  var data = _taggedTemplateLiteral(["\n  height: 24px;\n  width: 24px;\n  border: 1px solid\n    ", ";\n  border-radius: 12px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  margin: 10px;\n  min-width: 24px;\n  min-height: 24px;\n"]);
-
-  _templateObject = function _templateObject() {
-    return data;
-  };
-
-  return data;
-}
-var defaultTheme = {
-  theme: {
-    accentColor: MARINER_BLUE,
-    inactiveColor: PEWTER_GREY
-  }
-};
-var RadioButtonBorder = styled.div(_templateObject(), function (_ref) {
-  var isSelected = _ref.isSelected,
-      theme = _ref.theme;
-  return isSelected ? theme.accentColor : theme.inactiveColor;
-});
-RadioButtonBorder.defaultProps = defaultTheme;
-var RadioButtonCenter = styled.div(_templateObject2(), function (_ref2) {
-  var theme = _ref2.theme;
-  return theme.accentColor;
-});
-RadioButtonCenter.defaultProps = defaultTheme;
-
-var RadioButton = function RadioButton(_ref3) {
-  var isSelected = _ref3.isSelected,
-      name = _ref3.name;
-  return React.createElement(RadioButtonBorder, {
-    isSelected: isSelected,
-    name: name
-  }, isSelected && React.createElement(RadioButtonCenter, null));
-};
-
-exports.RadioButton = RadioButton;