superdesk-ui-framework 3.0.71 → 3.0.72

package/app/styles/_big-icon-font.scss

@@ -93,7 +93,7 @@ $sd-big-icon-font: (
     add-to-list: "\e61e",
     text: "\e61f",
     desk: "\e620",
-    chevron-inset-inline-start: "\e621",
+    chevron-left: "\e621",
     chevron-right: "\e622",
     dashboard-alt: "\e623",
     master: "\e624",

package/app-typescript/components/Dropdown.tsx

@@ -37,6 +37,7 @@ interface IMenu {
     children: React.ReactNode;
     zIndex?: number;
     onChange?(event?: any): void;
+    maxHeight?: number;
 }
 
 const DROPDOWN_ID_CONTAINER = "sd-dropdown-constainer";
@@ -50,6 +51,7 @@ export const Dropdown = ({
     align,
     zIndex,
     onChange,
+    maxHeight,
 }: IMenu) => {
     const [open, setOpen] = React.useState(false);
     const [change, setChange] = React.useState(false);
@@ -59,6 +61,7 @@ export const Dropdown = ({
     const headerElements = header?.map((el, index) => {
         return each(el, index);
     });
+    const maxHeightStyle = maxHeight ? {maxHeight} : {};
 
     const dropdownElements = items.map((el, index) => {
         return each(el, index);
@@ -143,7 +146,7 @@ export const Dropdown = ({
                 <ul className='dropdown__menu '
                 id={menuID} role='menu'
                 ref={ref}
-                style={{zIndex: zIndex}}>
+                style={{...{zIndex: zIndex, overflowY: 'auto'}, ...maxHeightStyle}}>
                     {dropdownElements}
                 </ul>
             );
@@ -272,12 +275,15 @@ export const Dropdown = ({
                         })()}
                     </div> : null)
                 :
-                <button ref={buttonRef}
-                className=' dropdown__toggle dropdown-toggle'
-                aria-haspopup="menu"
-                tabIndex={0}
-                aria-expanded={open}
-                onClick={toggleDisplay}>
+                <button
+                    style={{whiteSpace: 'nowrap'}}
+                    ref={buttonRef}
+                    className=' dropdown__toggle dropdown-toggle'
+                    aria-haspopup="menu"
+                    tabIndex={0}
+                    aria-expanded={open}
+                    onClick={toggleDisplay}
+                >
                     {children}
                     <span className="dropdown__caret"></span>
                 </button>}

package/dist/examples.bundle.css

@@ -15426,35 +15426,35 @@ doc-react-playground {
 .big-icon--desk:before {
   content: ""; }
 
-.big-icon--chevron-inset-inline-start {
+.big-icon--chevron-left {
   content: ""; }
-  .big-icon--chevron-inset-inline-start.color--default {
+  .big-icon--chevron-left.color--default {
     color: #2c323a; }
-  .big-icon--chevron-inset-inline-start.color--primary {
+  .big-icon--chevron-left.color--primary {
     color: var(--sd-colour-primary) !important; }
-  .big-icon--chevron-inset-inline-start.color--success {
+  .big-icon--chevron-left.color--success {
     color: var(--sd-colour-success) !important; }
-  .big-icon--chevron-inset-inline-start.color--warning {
+  .big-icon--chevron-left.color--warning {
     color: var(--sd-colour-warning) !important; }
-  .big-icon--chevron-inset-inline-start.color--alert {
+  .big-icon--chevron-left.color--alert {
     color: var(--sd-colour-alert) !important; }
-  .big-icon--chevron-inset-inline-start.color--highlight {
+  .big-icon--chevron-left.color--highlight {
     color: var(--sd-colour-highlight) !important; }
-  .big-icon--chevron-inset-inline-start.color--light {
+  .big-icon--chevron-left.color--light {
     color: var(--color-text-lighter) !important; }
-  .big-icon--chevron-inset-inline-start.color--white {
+  .big-icon--chevron-left.color--white {
     color: #e2e5e9 !important; }
-  .big-icon--chevron-inset-inline-start.scale--2x {
+  .big-icon--chevron-left.scale--2x {
     --big-icon-size: 52px
         ; }
-  .big-icon--chevron-inset-inline-start.scale--3x {
+  .big-icon--chevron-left.scale--3x {
     --big-icon-size: 78px
         ; }
-  .big-icon--chevron-inset-inline-start.scale--4x {
+  .big-icon--chevron-left.scale--4x {
     --big-icon-size: 104px
         ; }
 
-.big-icon--chevron-inset-inline-start:before {
+.big-icon--chevron-left:before {
   content: ""; }
 
 .big-icon--chevron-right {

package/dist/examples.bundle.js

@@ -59586,6 +59586,17 @@ module.exports = _assertThisInitialized, module.exports.__esModule = true, modul
 
 "use strict";
 
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     var desc = Object.getOwnPropertyDescriptor(m, k);
@@ -59617,7 +59628,7 @@ var core_1 = __webpack_require__(42);
 var react_id_generator_1 = __webpack_require__(9);
 var DROPDOWN_ID_CONTAINER = "sd-dropdown-constainer";
 var Dropdown = function (_a) {
-    var items = _a.items, header = _a.header, footer = _a.footer, children = _a.children, append = _a.append, align = _a.align, zIndex = _a.zIndex, onChange = _a.onChange;
+    var items = _a.items, header = _a.header, footer = _a.footer, children = _a.children, append = _a.append, align = _a.align, zIndex = _a.zIndex, onChange = _a.onChange, maxHeight = _a.maxHeight;
     var _b = React.useState(false), open = _b[0], setOpen = _b[1];
     var _c = React.useState(false), change = _c[0], setChange = _c[1];
     var menuID = (0, react_id_generator_1.useId)()[0];
@@ -59626,6 +59637,7 @@ var Dropdown = function (_a) {
     var headerElements = header === null || header === void 0 ? void 0 : header.map(function (el, index) {
         return each(el, index);
     });
+    var maxHeightStyle = maxHeight ? { maxHeight: maxHeight } : {};
     var dropdownElements = items.map(function (el, index) {
         return each(el, index);
     });
@@ -59669,7 +59681,7 @@ var Dropdown = function (_a) {
                 React.createElement("ul", { className: 'dropdown__menu-footer dropdown__menu-footer--has-list ' }, footerElements)));
         }
         else {
-            return (React.createElement("ul", { className: 'dropdown__menu ', id: menuID, role: 'menu', ref: ref, style: { zIndex: zIndex } }, dropdownElements));
+            return (React.createElement("ul", { className: 'dropdown__menu ', id: menuID, role: 'menu', ref: ref, style: __assign({ zIndex: zIndex, overflowY: 'auto' }, maxHeightStyle) }, dropdownElements));
         }
     }
     function toggleDisplay() {
@@ -59772,7 +59784,7 @@ var Dropdown = function (_a) {
                     return React.cloneElement(children, attrs);
                 })()) : null)
             :
-                React.createElement("button", { ref: buttonRef, className: ' dropdown__toggle dropdown-toggle', "aria-haspopup": "menu", tabIndex: 0, "aria-expanded": open, onClick: toggleDisplay },
+                React.createElement("button", { style: { whiteSpace: 'nowrap' }, ref: buttonRef, className: ' dropdown__toggle dropdown-toggle', "aria-haspopup": "menu", tabIndex: 0, "aria-expanded": open, onClick: toggleDisplay },
                     children,
                     React.createElement("span", { className: "dropdown__caret" })),
         append ?
@@ -135551,7 +135563,7 @@ exports.default = BigIconFontDoc;
 /***/ (function(module, exports) {
 
 // removed by extract-text-webpack-plugin
-module.exports = {"icon":"dashboard, view, tasks, calendar, marked-star, archive, spike, unspike, personal, global-search, analytics, web, cog, send-to, info, find-replace, comments, history, package, create-package, add-to-package, fetch, fetch-as, macro, related, minimize, settings, multiedit, export, create-list, add-to-list, text, desk, chevron-inset-inline-start, chevron-right, dashboard-alt, master, attachment, upload-alt, document-default, document-pdf, document-doc, semantics, picture, manage-package, live, live-alt, meta-search, chat, annotation, suggestion, publisher, tag, rundown, checkmark-circle"};
+module.exports = {"icon":"dashboard, view, tasks, calendar, marked-star, archive, spike, unspike, personal, global-search, analytics, web, cog, send-to, info, find-replace, comments, history, package, create-package, add-to-package, fetch, fetch-as, macro, related, minimize, settings, multiedit, export, create-list, add-to-list, text, desk, chevron-left, chevron-right, dashboard-alt, master, attachment, upload-alt, document-default, document-pdf, document-doc, semantics, picture, manage-package, live, live-alt, meta-search, chat, annotation, suggestion, publisher, tag, rundown, checkmark-circle"};
 
 /***/ }),
 /* 645 */
@@ -144238,7 +144250,7 @@ exports.ResizablePanelsDoc = ResizablePanelsDoc;
 /* 693 */
 /***/ (function(module, exports) {
 
-module.exports = {"name":"superdesk-ui-framework","version":"3.0.71","license":"AGPL-3.0","repository":{"type":"git","url":"https://github.com/superdesk/superdesk-ui-framework.git"},"main":"dist/superdesk-ui.bundle.js","types":"react/index.d.ts","contributors":["Nemanja Pavlovic","Vladimir Stefanovic","Darko Tomic","Aleksandar Jelicic","Tomas Kikutis","Dragana Zivkovic"],"scripts":{"start":"webpack-dev-server --config tasks/webpack.dev.js","server":"webpack --watch --config tasks/webpack.prod.js && tsc-watch","build":"webpack --config tasks/webpack.prod.js && tsc","build-ui":"webpack && tsc && npm run lint","playground-lint":"tsc -p examples/pages/playgrounds/react-playgrounds --noEmit","lint":"eslint --parser=@typescript-eslint/parser app && tslint -c tslint.json 'app-typescript/**/*.{ts,tsx}' && npm run playground-lint","lint-fix":"tsc -p tsconfig.json --noEmit && tslint --fix -c tslint.json 'app-typescript/**/*.{ts,tsx}'","prepublishOnly":"npm run build","unit-test":"mocha","debug-unit-tests":"mocha --inspect-brk"},"devDependencies":{"@types/assert":"^1.5.6","@types/chart.js":"^2.9.24","@types/classnames":"^2.2.9","@types/enzyme":"^3.10.12","@types/lodash":"^4.14.161","@types/mocha":"^9.1.1","@types/react":"16.8.23","@types/react-beautiful-dnd":"^13.1.2","@types/react-dom":"16.8.0","@types/react-router-dom":"^5.1.2","@types/react-scrollspy":"^3.3.5","@typescript-eslint/parser":"^5.58.0","angular":"^1.7.9","angular-animate":"^1.7.9","angular-route":"^1.7.9","babel-core":"^6.26.0","babel-loader":"^7.1.2","babel-plugin-transform-object-rest-spread":"^6.26.0","babel-preset-es2015":"^6.24.1","babel-preset-react":"^6.24.1","classnames":"^2.2.5","clean-webpack-plugin":"^1.0.0","code-prettify":"^0.1.0","copy-webpack-plugin":"^4.6.0","css-loader":"^2.1.1","eslint":"^4.6.1","eslint-loader":"^1.9.0","eslint-plugin-angular":"^3.1.1","eslint-plugin-react":"^7.3.0","extract-text-webpack-plugin":"^3.0.2","file-loader":"^0.11.2","html-loader":"^0.5.1","html-webpack-plugin":"^2.30.1","jquery":"^3.1.1","jquery-ui":"^1.12.1","jsdom":"20.0.3","jsdom-global":"3.0.2","lodash":"4.17.21","mocha":"^8.4.0","node-sass":"6.0","prismjs":"^1.28.0","prop-types":"^15.6.0","react":"16.8.6","react-bootstrap":"^0.31.2","react-dom":"16.8.6","react-redux":"^5.0.6","react-router-dom":"^5.1.2","redux":"^3.7.2","redux-form":"^7.0.4","sass-loader":"^6.0.6","style-loader":"^0.18.2","superdesk-code-style":"^1.1.2","ts-loader":"^6.0.2","ts-node":"^10.9.1","tslint":"^5.18.0","typescript":"4.9.5","url-loader":"^1.1.2","webpack":"^3.5.5","webpack-cli":"3.3.10","webpack-dev-server":"2.11.1","webpack-merge":"^4.2.1"},"dependencies":{"@material-ui/lab":"^4.0.0-alpha.56","@popperjs/core":"^2.4.0","@superdesk/primereact":"^5.0.2-12","@superdesk/react-resizable-panels":"0.0.39","@types/enzyme-adapter-react-16":"^1.0.6","@types/node":"^14.10.2","chart.js":"^2.9.3","date-fns":"2.7.0","enzyme":"^3.11.0","enzyme-adapter-react-16":"^1.15.7","moment":"^2.29.3","popper-max-size-modifier":"^0.2.0","popper.js":"1.14.4","primeicons":"2.0.0","react-beautiful-dnd":"^13.0.0","react-id-generator":"^3.0.0","react-popper":"^2.2.3","react-scrollspy":"^3.4.3"}}
+module.exports = {"name":"superdesk-ui-framework","version":"3.0.72","license":"AGPL-3.0","repository":{"type":"git","url":"https://github.com/superdesk/superdesk-ui-framework.git"},"main":"dist/superdesk-ui.bundle.js","types":"react/index.d.ts","contributors":["Nemanja Pavlovic","Vladimir Stefanovic","Darko Tomic","Aleksandar Jelicic","Tomas Kikutis","Dragana Zivkovic"],"scripts":{"start":"webpack-dev-server --config tasks/webpack.dev.js","server":"webpack --watch --config tasks/webpack.prod.js && tsc-watch","build":"webpack --config tasks/webpack.prod.js && tsc","build-ui":"webpack && tsc && npm run lint","playground-lint":"tsc -p examples/pages/playgrounds/react-playgrounds --noEmit","lint":"eslint --parser=@typescript-eslint/parser app && tslint -c tslint.json 'app-typescript/**/*.{ts,tsx}' && npm run playground-lint","lint-fix":"tsc -p tsconfig.json --noEmit && tslint --fix -c tslint.json 'app-typescript/**/*.{ts,tsx}'","prepublishOnly":"npm run build","unit-test":"mocha","debug-unit-tests":"mocha --inspect-brk"},"devDependencies":{"@types/assert":"^1.5.6","@types/chart.js":"^2.9.24","@types/classnames":"^2.2.9","@types/enzyme":"^3.10.12","@types/lodash":"^4.14.161","@types/mocha":"^9.1.1","@types/react":"16.8.23","@types/react-beautiful-dnd":"^13.1.2","@types/react-dom":"16.8.0","@types/react-router-dom":"^5.1.2","@types/react-scrollspy":"^3.3.5","@typescript-eslint/parser":"^5.58.0","angular":"^1.7.9","angular-animate":"^1.7.9","angular-route":"^1.7.9","babel-core":"^6.26.0","babel-loader":"^7.1.2","babel-plugin-transform-object-rest-spread":"^6.26.0","babel-preset-es2015":"^6.24.1","babel-preset-react":"^6.24.1","classnames":"^2.2.5","clean-webpack-plugin":"^1.0.0","code-prettify":"^0.1.0","copy-webpack-plugin":"^4.6.0","css-loader":"^2.1.1","eslint":"^4.6.1","eslint-loader":"^1.9.0","eslint-plugin-angular":"^3.1.1","eslint-plugin-react":"^7.3.0","extract-text-webpack-plugin":"^3.0.2","file-loader":"^0.11.2","html-loader":"^0.5.1","html-webpack-plugin":"^2.30.1","jquery":"^3.1.1","jquery-ui":"^1.12.1","jsdom":"20.0.3","jsdom-global":"3.0.2","lodash":"4.17.21","mocha":"^8.4.0","node-sass":"6.0","prismjs":"^1.28.0","prop-types":"^15.6.0","react":"16.8.6","react-bootstrap":"^0.31.2","react-dom":"16.8.6","react-redux":"^5.0.6","react-router-dom":"^5.1.2","redux":"^3.7.2","redux-form":"^7.0.4","sass-loader":"^6.0.6","style-loader":"^0.18.2","superdesk-code-style":"^1.1.2","ts-loader":"^6.0.2","ts-node":"^10.9.1","tslint":"^5.18.0","typescript":"4.9.5","url-loader":"^1.1.2","webpack":"^3.5.5","webpack-cli":"3.3.10","webpack-dev-server":"2.11.1","webpack-merge":"^4.2.1"},"dependencies":{"@material-ui/lab":"^4.0.0-alpha.56","@popperjs/core":"^2.4.0","@superdesk/primereact":"^5.0.2-12","@superdesk/react-resizable-panels":"0.0.39","@types/enzyme-adapter-react-16":"^1.0.6","@types/node":"^14.10.2","chart.js":"^2.9.3","date-fns":"2.7.0","enzyme":"^3.11.0","enzyme-adapter-react-16":"^1.15.7","moment":"^2.29.3","popper-max-size-modifier":"^0.2.0","popper.js":"1.14.4","primeicons":"2.0.0","react-beautiful-dnd":"^13.0.0","react-id-generator":"^3.0.0","react-popper":"^2.2.3","react-scrollspy":"^3.4.3"}}
 
 /***/ }),
 /* 694 */

package/dist/superdesk-ui.bundle.css

@@ -33496,35 +33496,35 @@ a.label {
 .big-icon--desk:before {
   content: ""; }
 
-.big-icon--chevron-inset-inline-start {
+.big-icon--chevron-left {
   content: ""; }
-  .big-icon--chevron-inset-inline-start.color--default {
+  .big-icon--chevron-left.color--default {
     color: var(--color-icon-default); }
-  .big-icon--chevron-inset-inline-start.color--primary {
+  .big-icon--chevron-left.color--primary {
     color: var(--sd-colour-primary) !important; }
-  .big-icon--chevron-inset-inline-start.color--success {
+  .big-icon--chevron-left.color--success {
     color: var(--sd-colour-success) !important; }
-  .big-icon--chevron-inset-inline-start.color--warning {
+  .big-icon--chevron-left.color--warning {
     color: var(--sd-colour-warning) !important; }
-  .big-icon--chevron-inset-inline-start.color--alert {
+  .big-icon--chevron-left.color--alert {
     color: var(--sd-colour-alert) !important; }
-  .big-icon--chevron-inset-inline-start.color--highlight {
+  .big-icon--chevron-left.color--highlight {
     color: var(--sd-colour-highlight) !important; }
-  .big-icon--chevron-inset-inline-start.color--light {
+  .big-icon--chevron-left.color--light {
     color: var(--color-text-lighter) !important; }
-  .big-icon--chevron-inset-inline-start.color--white {
+  .big-icon--chevron-left.color--white {
     color: #e2e5e9 !important; }
-  .big-icon--chevron-inset-inline-start.scale--2x {
+  .big-icon--chevron-left.scale--2x {
     --big-icon-size: 52px
         ; }
-  .big-icon--chevron-inset-inline-start.scale--3x {
+  .big-icon--chevron-left.scale--3x {
     --big-icon-size: 78px
         ; }
-  .big-icon--chevron-inset-inline-start.scale--4x {
+  .big-icon--chevron-left.scale--4x {
     --big-icon-size: 104px
         ; }
 
-.big-icon--chevron-inset-inline-start:before {
+.big-icon--chevron-left:before {
   content: ""; }
 
 .big-icon--chevron-right {

package/dist/superdesk-ui.bundle.js

@@ -59230,6 +59230,17 @@ module.exports = _assertThisInitialized, module.exports.__esModule = true, modul
 
 "use strict";
 
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     var desc = Object.getOwnPropertyDescriptor(m, k);
@@ -59261,7 +59272,7 @@ var core_1 = __webpack_require__(42);
 var react_id_generator_1 = __webpack_require__(9);
 var DROPDOWN_ID_CONTAINER = "sd-dropdown-constainer";
 var Dropdown = function (_a) {
-    var items = _a.items, header = _a.header, footer = _a.footer, children = _a.children, append = _a.append, align = _a.align, zIndex = _a.zIndex, onChange = _a.onChange;
+    var items = _a.items, header = _a.header, footer = _a.footer, children = _a.children, append = _a.append, align = _a.align, zIndex = _a.zIndex, onChange = _a.onChange, maxHeight = _a.maxHeight;
     var _b = React.useState(false), open = _b[0], setOpen = _b[1];
     var _c = React.useState(false), change = _c[0], setChange = _c[1];
     var menuID = (0, react_id_generator_1.useId)()[0];
@@ -59270,6 +59281,7 @@ var Dropdown = function (_a) {
     var headerElements = header === null || header === void 0 ? void 0 : header.map(function (el, index) {
         return each(el, index);
     });
+    var maxHeightStyle = maxHeight ? { maxHeight: maxHeight } : {};
     var dropdownElements = items.map(function (el, index) {
         return each(el, index);
     });
@@ -59313,7 +59325,7 @@ var Dropdown = function (_a) {
                 React.createElement("ul", { className: 'dropdown__menu-footer dropdown__menu-footer--has-list ' }, footerElements)));
         }
         else {
-            return (React.createElement("ul", { className: 'dropdown__menu ', id: menuID, role: 'menu', ref: ref, style: { zIndex: zIndex } }, dropdownElements));
+            return (React.createElement("ul", { className: 'dropdown__menu ', id: menuID, role: 'menu', ref: ref, style: __assign({ zIndex: zIndex, overflowY: 'auto' }, maxHeightStyle) }, dropdownElements));
         }
     }
     function toggleDisplay() {
@@ -59416,7 +59428,7 @@ var Dropdown = function (_a) {
                     return React.cloneElement(children, attrs);
                 })()) : null)
             :
-                React.createElement("button", { ref: buttonRef, className: ' dropdown__toggle dropdown-toggle', "aria-haspopup": "menu", tabIndex: 0, "aria-expanded": open, onClick: toggleDisplay },
+                React.createElement("button", { style: { whiteSpace: 'nowrap' }, ref: buttonRef, className: ' dropdown__toggle dropdown-toggle', "aria-haspopup": "menu", tabIndex: 0, "aria-expanded": open, onClick: toggleDisplay },
                     children,
                     React.createElement("span", { className: "dropdown__caret" })),
         append ?

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "superdesk-ui-framework",
-  "version": "3.0.71",
+  "version": "3.0.72",
   "license": "AGPL-3.0",
   "repository": {
     "type": "git",

package/react/components/Dropdown.d.ts

@@ -26,6 +26,7 @@ interface IMenu {
     children: React.ReactNode;
     zIndex?: number;
     onChange?(event?: any): void;
+    maxHeight?: number;
 }
-export declare const Dropdown: ({ items, header, footer, children, append, align, zIndex, onChange, }: IMenu) => JSX.Element;
+export declare const Dropdown: ({ items, header, footer, children, append, align, zIndex, onChange, maxHeight, }: IMenu) => JSX.Element;
 export {};

package/react/components/Dropdown.js

@@ -1,4 +1,15 @@
 "use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     var desc = Object.getOwnPropertyDescriptor(m, k);
@@ -30,7 +41,7 @@ var core_1 = require("@popperjs/core");
 var react_id_generator_1 = require("react-id-generator");
 var DROPDOWN_ID_CONTAINER = "sd-dropdown-constainer";
 var Dropdown = function (_a) {
-    var items = _a.items, header = _a.header, footer = _a.footer, children = _a.children, append = _a.append, align = _a.align, zIndex = _a.zIndex, onChange = _a.onChange;
+    var items = _a.items, header = _a.header, footer = _a.footer, children = _a.children, append = _a.append, align = _a.align, zIndex = _a.zIndex, onChange = _a.onChange, maxHeight = _a.maxHeight;
     var _b = React.useState(false), open = _b[0], setOpen = _b[1];
     var _c = React.useState(false), change = _c[0], setChange = _c[1];
     var menuID = (0, react_id_generator_1.useId)()[0];
@@ -39,6 +50,7 @@ var Dropdown = function (_a) {
     var headerElements = header === null || header === void 0 ? void 0 : header.map(function (el, index) {
         return each(el, index);
     });
+    var maxHeightStyle = maxHeight ? { maxHeight: maxHeight } : {};
     var dropdownElements = items.map(function (el, index) {
         return each(el, index);
     });
@@ -82,7 +94,7 @@ var Dropdown = function (_a) {
                 React.createElement("ul", { className: 'dropdown__menu-footer dropdown__menu-footer--has-list ' }, footerElements)));
         }
         else {
-            return (React.createElement("ul", { className: 'dropdown__menu ', id: menuID, role: 'menu', ref: ref, style: { zIndex: zIndex } }, dropdownElements));
+            return (React.createElement("ul", { className: 'dropdown__menu ', id: menuID, role: 'menu', ref: ref, style: __assign({ zIndex: zIndex, overflowY: 'auto' }, maxHeightStyle) }, dropdownElements));
         }
     }
     function toggleDisplay() {
@@ -185,7 +197,7 @@ var Dropdown = function (_a) {
                     return React.cloneElement(children, attrs);
                 })()) : null)
             :
-                React.createElement("button", { ref: buttonRef, className: ' dropdown__toggle dropdown-toggle', "aria-haspopup": "menu", tabIndex: 0, "aria-expanded": open, onClick: toggleDisplay },
+                React.createElement("button", { style: { whiteSpace: 'nowrap' }, ref: buttonRef, className: ' dropdown__toggle dropdown-toggle', "aria-haspopup": "menu", tabIndex: 0, "aria-expanded": open, onClick: toggleDisplay },
                     children,
                     React.createElement("span", { className: "dropdown__caret" })),
         append ?