@thecb/components 4.1.3 → 4.1.4

package/dist/index.cjs.js

@@ -18505,7 +18505,7 @@ function _templateObject3$5() {
 }
 
 function _templateObject2$b() {
-  var data = _taggedTemplateLiteral(["\n  transform-origin: 0 0;\n  border: 1px solid ", ";\n  border-radius: 2px;\n  background-color: ", ";\n  padding: 8px 0 8px;\n  position: absolute;\n  width: 100%;\n  max-height: 400px;\n  overflow-y: scroll;\n  z-index: 1;\n  box-sizing: border-box;\n  &:focus {\n    outline: none;\n  }\n"]);
+  var data = _taggedTemplateLiteral(["\n  transform-origin: 0 0;\n  border: 1px solid ", ";\n  border-radius: 2px;\n  background-color: ", ";\n  padding: 8px 0 8px;\n  position: absolute;\n  width: 100%;\n  max-height: ", ";\n  overflow-y: scroll;\n  z-index: 1;\n  box-sizing: border-box;\n  &:focus {\n    outline: none;\n  }\n"]);
 
   _templateObject2$b = function _templateObject2() {
     return data;
@@ -18527,44 +18527,48 @@ var IconWrapper = styled__default.div(_templateObject$n(), function (_ref) {
   var open = _ref.open;
   return open ? "transform: rotate(-180deg)" : "";
 });
-var DropdownContentWrapper = styled__default.div(_templateObject2$b(), GREY_CHATEAU, WHITE);
-var DropdownItemWrapper = styled__default.div(_templateObject3$5(), function (_ref2) {
-  var selected = _ref2.selected,
-      themeValues = _ref2.themeValues;
+var DropdownContentWrapper = styled__default.div(_templateObject2$b(), GREY_CHATEAU, WHITE, function (_ref2) {
+  var maxHeight = _ref2.maxHeight;
+  return maxHeight || "400px";
+});
+var DropdownItemWrapper = styled__default.div(_templateObject3$5(), function (_ref3) {
+  var selected = _ref3.selected,
+      themeValues = _ref3.themeValues;
   return selected ? themeValues.selectedColor : WHITE;
-}, function (_ref3) {
-  var disabled = _ref3.disabled;
-  return disabled ? "default" : "pointer";
 }, function (_ref4) {
-  var selected = _ref4.selected,
-      disabled = _ref4.disabled,
-      themeValues = _ref4.themeValues;
-  return selected ? themeValues.selectedColor : disabled ? WHITE : themeValues.hoverColor;
+  var disabled = _ref4.disabled;
+  return disabled ? "default" : "pointer";
 }, function (_ref5) {
   var selected = _ref5.selected,
       disabled = _ref5.disabled,
       themeValues = _ref5.themeValues;
   return selected ? themeValues.selectedColor : disabled ? WHITE : themeValues.hoverColor;
+}, function (_ref6) {
+  var selected = _ref6.selected,
+      disabled = _ref6.disabled,
+      themeValues = _ref6.themeValues;
+  return selected ? themeValues.selectedColor : disabled ? WHITE : themeValues.hoverColor;
 });
-var SearchInput = styled__default.input(_templateObject4$2(), function (_ref6) {
-  var themeValues = _ref6.themeValues;
+var SearchInput = styled__default.input(_templateObject4$2(), function (_ref7) {
+  var themeValues = _ref7.themeValues;
   return themeValues.hoverColor && themeValues.hoverColor;
 });
 
-var Dropdown = function Dropdown(_ref7) {
+var Dropdown = function Dropdown(_ref8) {
   var _options$find;
 
-  var placeholder = _ref7.placeholder,
-      options = _ref7.options,
-      value = _ref7.value,
-      isOpen = _ref7.isOpen,
-      isError = _ref7.isError,
-      onSelect = _ref7.onSelect,
-      _ref7$disabledValues = _ref7.disabledValues,
-      disabledValues = _ref7$disabledValues === void 0 ? [] : _ref7$disabledValues,
-      _ref7$onClick = _ref7.onClick,
-      onClick = _ref7$onClick === void 0 ? noop : _ref7$onClick,
-      themeValues = _ref7.themeValues;
+  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;
 
   var _useState = React.useState(""),
       _useState2 = _slicedToArray(_useState, 2),
@@ -18728,6 +18732,7 @@ var Dropdown = function Dropdown(_ref7) {
   })) === null || _options$find === void 0 ? void 0 : _options$find.text : placeholder), /*#__PURE__*/React__default.createElement(IconWrapper, {
     open: isOpen
   }, /*#__PURE__*/React__default.createElement(DropdownIcon, null)))), isOpen ? /*#__PURE__*/React__default.createElement(DropdownContentWrapper, {
+    maxHeight: maxHeight,
     open: isOpen,
     ref: dropdownRef,
     tabIndex: 0
@@ -18823,7 +18828,8 @@ var FormSelect = function FormSelect(_ref) {
       options = _ref.options,
       field = _ref.field,
       showErrors = _ref.showErrors,
-      onChange = _ref.onChange;
+      onChange = _ref.onChange,
+      dropdownMaxHeight = _ref.dropdownMaxHeight;
 
   var _useState = React.useState(false),
       _useState2 = _slicedToArray(_useState, 2),
@@ -18852,6 +18858,7 @@ var FormSelect = function FormSelect(_ref) {
     weight: "400",
     extraStyles: "margin-bottom: 4px;"
   }, labelTextWhenNoError), /*#__PURE__*/React__default.createElement(Dropdown$1, {
+    maxHeight: dropdownMaxHeight,
     placeholder: options[0] ? options[0].text : "",
     options: options,
     value: field.rawValue,

package/package.json

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

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

@@ -31,7 +31,7 @@ const DropdownContentWrapper = styled.div`
   padding: 8px 0 8px;
   position: absolute;
   width: 100%;
-  max-height: 400px;
+  max-height: ${({ maxHeight }) => maxHeight || "400px"};
   overflow-y: scroll;
   z-index: 1;
   box-sizing: border-box;
@@ -88,7 +88,8 @@ const Dropdown = ({
   onSelect,
   disabledValues = [],
   onClick = noop,
-  themeValues
+  themeValues,
+  maxHeight
 }) => {
   const [inputValue, setInputValue] = useState("");
   const [optionsState, setOptionsState] = useState([]);
@@ -242,7 +243,12 @@ const Dropdown = ({
         </Stack>
       </Box>
       {isOpen ? (
-        <DropdownContentWrapper open={isOpen} ref={dropdownRef} tabIndex={0}>
+        <DropdownContentWrapper
+          maxHeight={maxHeight}
+          open={isOpen}
+          ref={dropdownRef}
+          tabIndex={0}
+        >
           <Stack childGap="0">
             {filteredOptions.map((choice, i) => (
               <DropdownItemWrapper

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

@@ -11,7 +11,8 @@ const FormSelect = ({
   options,
   field,
   showErrors,
-  onChange
+  onChange,
+  dropdownMaxHeight
 }) => {
   const [open, setOpen] = useState(false);
   const dropdownRef = useRef(null);
@@ -40,6 +41,7 @@ const FormSelect = ({
         {labelTextWhenNoError}
       </Text>
       <Dropdown
+        maxHeight={dropdownMaxHeight}
         placeholder={options[0] ? options[0].text : ""}
         options={options}
         value={field.rawValue}