superdesk-ui-framework 3.0.71 → 3.0.72

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -93,7 +93,7 @@ $sd-big-icon-font: (
93
93
  add-to-list: "\e61e",
94
94
  text: "\e61f",
95
95
  desk: "\e620",
96
- chevron-inset-inline-start: "\e621",
96
+ chevron-left: "\e621",
97
97
  chevron-right: "\e622",
98
98
  dashboard-alt: "\e623",
99
99
  master: "\e624",
@@ -37,6 +37,7 @@ interface IMenu {
37
37
  children: React.ReactNode;
38
38
  zIndex?: number;
39
39
  onChange?(event?: any): void;
40
+ maxHeight?: number;
40
41
  }
41
42
 
42
43
  const DROPDOWN_ID_CONTAINER = "sd-dropdown-constainer";
@@ -50,6 +51,7 @@ export const Dropdown = ({
50
51
  align,
51
52
  zIndex,
52
53
  onChange,
54
+ maxHeight,
53
55
  }: IMenu) => {
54
56
  const [open, setOpen] = React.useState(false);
55
57
  const [change, setChange] = React.useState(false);
@@ -59,6 +61,7 @@ export const Dropdown = ({
59
61
  const headerElements = header?.map((el, index) => {
60
62
  return each(el, index);
61
63
  });
64
+ const maxHeightStyle = maxHeight ? {maxHeight} : {};
62
65
 
63
66
  const dropdownElements = items.map((el, index) => {
64
67
  return each(el, index);
@@ -143,7 +146,7 @@ export const Dropdown = ({
143
146
  <ul className='dropdown__menu '
144
147
  id={menuID} role='menu'
145
148
  ref={ref}
146
- style={{zIndex: zIndex}}>
149
+ style={{...{zIndex: zIndex, overflowY: 'auto'}, ...maxHeightStyle}}>
147
150
  {dropdownElements}
148
151
  </ul>
149
152
  );
@@ -272,12 +275,15 @@ export const Dropdown = ({
272
275
  })()}
273
276
  </div> : null)
274
277
  :
275
- <button ref={buttonRef}
276
- className=' dropdown__toggle dropdown-toggle'
277
- aria-haspopup="menu"
278
- tabIndex={0}
279
- aria-expanded={open}
280
- onClick={toggleDisplay}>
278
+ <button
279
+ style={{whiteSpace: 'nowrap'}}
280
+ ref={buttonRef}
281
+ className=' dropdown__toggle dropdown-toggle'
282
+ aria-haspopup="menu"
283
+ tabIndex={0}
284
+ aria-expanded={open}
285
+ onClick={toggleDisplay}
286
+ >
281
287
  {children}
282
288
  <span className="dropdown__caret"></span>
283
289
  </button>}
@@ -15426,35 +15426,35 @@ doc-react-playground {
15426
15426
  .big-icon--desk:before {
15427
15427
  content: ""; }
15428
15428
 
15429
- .big-icon--chevron-inset-inline-start {
15429
+ .big-icon--chevron-left {
15430
15430
  content: ""; }
15431
- .big-icon--chevron-inset-inline-start.color--default {
15431
+ .big-icon--chevron-left.color--default {
15432
15432
  color: #2c323a; }
15433
- .big-icon--chevron-inset-inline-start.color--primary {
15433
+ .big-icon--chevron-left.color--primary {
15434
15434
  color: var(--sd-colour-primary) !important; }
15435
- .big-icon--chevron-inset-inline-start.color--success {
15435
+ .big-icon--chevron-left.color--success {
15436
15436
  color: var(--sd-colour-success) !important; }
15437
- .big-icon--chevron-inset-inline-start.color--warning {
15437
+ .big-icon--chevron-left.color--warning {
15438
15438
  color: var(--sd-colour-warning) !important; }
15439
- .big-icon--chevron-inset-inline-start.color--alert {
15439
+ .big-icon--chevron-left.color--alert {
15440
15440
  color: var(--sd-colour-alert) !important; }
15441
- .big-icon--chevron-inset-inline-start.color--highlight {
15441
+ .big-icon--chevron-left.color--highlight {
15442
15442
  color: var(--sd-colour-highlight) !important; }
15443
- .big-icon--chevron-inset-inline-start.color--light {
15443
+ .big-icon--chevron-left.color--light {
15444
15444
  color: var(--color-text-lighter) !important; }
15445
- .big-icon--chevron-inset-inline-start.color--white {
15445
+ .big-icon--chevron-left.color--white {
15446
15446
  color: #e2e5e9 !important; }
15447
- .big-icon--chevron-inset-inline-start.scale--2x {
15447
+ .big-icon--chevron-left.scale--2x {
15448
15448
  --big-icon-size: 52px
15449
15449
  ; }
15450
- .big-icon--chevron-inset-inline-start.scale--3x {
15450
+ .big-icon--chevron-left.scale--3x {
15451
15451
  --big-icon-size: 78px
15452
15452
  ; }
15453
- .big-icon--chevron-inset-inline-start.scale--4x {
15453
+ .big-icon--chevron-left.scale--4x {
15454
15454
  --big-icon-size: 104px
15455
15455
  ; }
15456
15456
 
15457
- .big-icon--chevron-inset-inline-start:before {
15457
+ .big-icon--chevron-left:before {
15458
15458
  content: ""; }
15459
15459
 
15460
15460
  .big-icon--chevron-right {
@@ -59586,6 +59586,17 @@ module.exports = _assertThisInitialized, module.exports.__esModule = true, modul
59586
59586
 
59587
59587
  "use strict";
59588
59588
 
59589
+ var __assign = (this && this.__assign) || function () {
59590
+ __assign = Object.assign || function(t) {
59591
+ for (var s, i = 1, n = arguments.length; i < n; i++) {
59592
+ s = arguments[i];
59593
+ for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
59594
+ t[p] = s[p];
59595
+ }
59596
+ return t;
59597
+ };
59598
+ return __assign.apply(this, arguments);
59599
+ };
59589
59600
  var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
59590
59601
  if (k2 === undefined) k2 = k;
59591
59602
  var desc = Object.getOwnPropertyDescriptor(m, k);
@@ -59617,7 +59628,7 @@ var core_1 = __webpack_require__(42);
59617
59628
  var react_id_generator_1 = __webpack_require__(9);
59618
59629
  var DROPDOWN_ID_CONTAINER = "sd-dropdown-constainer";
59619
59630
  var Dropdown = function (_a) {
59620
- 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;
59631
+ 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;
59621
59632
  var _b = React.useState(false), open = _b[0], setOpen = _b[1];
59622
59633
  var _c = React.useState(false), change = _c[0], setChange = _c[1];
59623
59634
  var menuID = (0, react_id_generator_1.useId)()[0];
@@ -59626,6 +59637,7 @@ var Dropdown = function (_a) {
59626
59637
  var headerElements = header === null || header === void 0 ? void 0 : header.map(function (el, index) {
59627
59638
  return each(el, index);
59628
59639
  });
59640
+ var maxHeightStyle = maxHeight ? { maxHeight: maxHeight } : {};
59629
59641
  var dropdownElements = items.map(function (el, index) {
59630
59642
  return each(el, index);
59631
59643
  });
@@ -59669,7 +59681,7 @@ var Dropdown = function (_a) {
59669
59681
  React.createElement("ul", { className: 'dropdown__menu-footer dropdown__menu-footer--has-list ' }, footerElements)));
59670
59682
  }
59671
59683
  else {
59672
- return (React.createElement("ul", { className: 'dropdown__menu ', id: menuID, role: 'menu', ref: ref, style: { zIndex: zIndex } }, dropdownElements));
59684
+ return (React.createElement("ul", { className: 'dropdown__menu ', id: menuID, role: 'menu', ref: ref, style: __assign({ zIndex: zIndex, overflowY: 'auto' }, maxHeightStyle) }, dropdownElements));
59673
59685
  }
59674
59686
  }
59675
59687
  function toggleDisplay() {
@@ -59772,7 +59784,7 @@ var Dropdown = function (_a) {
59772
59784
  return React.cloneElement(children, attrs);
59773
59785
  })()) : null)
59774
59786
  :
59775
- React.createElement("button", { ref: buttonRef, className: ' dropdown__toggle dropdown-toggle', "aria-haspopup": "menu", tabIndex: 0, "aria-expanded": open, onClick: toggleDisplay },
59787
+ React.createElement("button", { style: { whiteSpace: 'nowrap' }, ref: buttonRef, className: ' dropdown__toggle dropdown-toggle', "aria-haspopup": "menu", tabIndex: 0, "aria-expanded": open, onClick: toggleDisplay },
59776
59788
  children,
59777
59789
  React.createElement("span", { className: "dropdown__caret" })),
59778
59790
  append ?
@@ -135551,7 +135563,7 @@ exports.default = BigIconFontDoc;
135551
135563
  /***/ (function(module, exports) {
135552
135564
 
135553
135565
  // removed by extract-text-webpack-plugin
135554
- 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"};
135566
+ 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"};
135555
135567
 
135556
135568
  /***/ }),
135557
135569
  /* 645 */
@@ -144238,7 +144250,7 @@ exports.ResizablePanelsDoc = ResizablePanelsDoc;
144238
144250
  /* 693 */
144239
144251
  /***/ (function(module, exports) {
144240
144252
 
144241
- 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"}}
144253
+ 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"}}
144242
144254
 
144243
144255
  /***/ }),
144244
144256
  /* 694 */
@@ -33496,35 +33496,35 @@ a.label {
33496
33496
  .big-icon--desk:before {
33497
33497
  content: ""; }
33498
33498
 
33499
- .big-icon--chevron-inset-inline-start {
33499
+ .big-icon--chevron-left {
33500
33500
  content: ""; }
33501
- .big-icon--chevron-inset-inline-start.color--default {
33501
+ .big-icon--chevron-left.color--default {
33502
33502
  color: var(--color-icon-default); }
33503
- .big-icon--chevron-inset-inline-start.color--primary {
33503
+ .big-icon--chevron-left.color--primary {
33504
33504
  color: var(--sd-colour-primary) !important; }
33505
- .big-icon--chevron-inset-inline-start.color--success {
33505
+ .big-icon--chevron-left.color--success {
33506
33506
  color: var(--sd-colour-success) !important; }
33507
- .big-icon--chevron-inset-inline-start.color--warning {
33507
+ .big-icon--chevron-left.color--warning {
33508
33508
  color: var(--sd-colour-warning) !important; }
33509
- .big-icon--chevron-inset-inline-start.color--alert {
33509
+ .big-icon--chevron-left.color--alert {
33510
33510
  color: var(--sd-colour-alert) !important; }
33511
- .big-icon--chevron-inset-inline-start.color--highlight {
33511
+ .big-icon--chevron-left.color--highlight {
33512
33512
  color: var(--sd-colour-highlight) !important; }
33513
- .big-icon--chevron-inset-inline-start.color--light {
33513
+ .big-icon--chevron-left.color--light {
33514
33514
  color: var(--color-text-lighter) !important; }
33515
- .big-icon--chevron-inset-inline-start.color--white {
33515
+ .big-icon--chevron-left.color--white {
33516
33516
  color: #e2e5e9 !important; }
33517
- .big-icon--chevron-inset-inline-start.scale--2x {
33517
+ .big-icon--chevron-left.scale--2x {
33518
33518
  --big-icon-size: 52px
33519
33519
  ; }
33520
- .big-icon--chevron-inset-inline-start.scale--3x {
33520
+ .big-icon--chevron-left.scale--3x {
33521
33521
  --big-icon-size: 78px
33522
33522
  ; }
33523
- .big-icon--chevron-inset-inline-start.scale--4x {
33523
+ .big-icon--chevron-left.scale--4x {
33524
33524
  --big-icon-size: 104px
33525
33525
  ; }
33526
33526
 
33527
- .big-icon--chevron-inset-inline-start:before {
33527
+ .big-icon--chevron-left:before {
33528
33528
  content: ""; }
33529
33529
 
33530
33530
  .big-icon--chevron-right {
@@ -59230,6 +59230,17 @@ module.exports = _assertThisInitialized, module.exports.__esModule = true, modul
59230
59230
 
59231
59231
  "use strict";
59232
59232
 
59233
+ var __assign = (this && this.__assign) || function () {
59234
+ __assign = Object.assign || function(t) {
59235
+ for (var s, i = 1, n = arguments.length; i < n; i++) {
59236
+ s = arguments[i];
59237
+ for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
59238
+ t[p] = s[p];
59239
+ }
59240
+ return t;
59241
+ };
59242
+ return __assign.apply(this, arguments);
59243
+ };
59233
59244
  var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
59234
59245
  if (k2 === undefined) k2 = k;
59235
59246
  var desc = Object.getOwnPropertyDescriptor(m, k);
@@ -59261,7 +59272,7 @@ var core_1 = __webpack_require__(42);
59261
59272
  var react_id_generator_1 = __webpack_require__(9);
59262
59273
  var DROPDOWN_ID_CONTAINER = "sd-dropdown-constainer";
59263
59274
  var Dropdown = function (_a) {
59264
- 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;
59275
+ 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;
59265
59276
  var _b = React.useState(false), open = _b[0], setOpen = _b[1];
59266
59277
  var _c = React.useState(false), change = _c[0], setChange = _c[1];
59267
59278
  var menuID = (0, react_id_generator_1.useId)()[0];
@@ -59270,6 +59281,7 @@ var Dropdown = function (_a) {
59270
59281
  var headerElements = header === null || header === void 0 ? void 0 : header.map(function (el, index) {
59271
59282
  return each(el, index);
59272
59283
  });
59284
+ var maxHeightStyle = maxHeight ? { maxHeight: maxHeight } : {};
59273
59285
  var dropdownElements = items.map(function (el, index) {
59274
59286
  return each(el, index);
59275
59287
  });
@@ -59313,7 +59325,7 @@ var Dropdown = function (_a) {
59313
59325
  React.createElement("ul", { className: 'dropdown__menu-footer dropdown__menu-footer--has-list ' }, footerElements)));
59314
59326
  }
59315
59327
  else {
59316
- return (React.createElement("ul", { className: 'dropdown__menu ', id: menuID, role: 'menu', ref: ref, style: { zIndex: zIndex } }, dropdownElements));
59328
+ return (React.createElement("ul", { className: 'dropdown__menu ', id: menuID, role: 'menu', ref: ref, style: __assign({ zIndex: zIndex, overflowY: 'auto' }, maxHeightStyle) }, dropdownElements));
59317
59329
  }
59318
59330
  }
59319
59331
  function toggleDisplay() {
@@ -59416,7 +59428,7 @@ var Dropdown = function (_a) {
59416
59428
  return React.cloneElement(children, attrs);
59417
59429
  })()) : null)
59418
59430
  :
59419
- React.createElement("button", { ref: buttonRef, className: ' dropdown__toggle dropdown-toggle', "aria-haspopup": "menu", tabIndex: 0, "aria-expanded": open, onClick: toggleDisplay },
59431
+ React.createElement("button", { style: { whiteSpace: 'nowrap' }, ref: buttonRef, className: ' dropdown__toggle dropdown-toggle', "aria-haspopup": "menu", tabIndex: 0, "aria-expanded": open, onClick: toggleDisplay },
59420
59432
  children,
59421
59433
  React.createElement("span", { className: "dropdown__caret" })),
59422
59434
  append ?
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "superdesk-ui-framework",
3
- "version": "3.0.71",
3
+ "version": "3.0.72",
4
4
  "license": "AGPL-3.0",
5
5
  "repository": {
6
6
  "type": "git",
@@ -26,6 +26,7 @@ interface IMenu {
26
26
  children: React.ReactNode;
27
27
  zIndex?: number;
28
28
  onChange?(event?: any): void;
29
+ maxHeight?: number;
29
30
  }
30
- export declare const Dropdown: ({ items, header, footer, children, append, align, zIndex, onChange, }: IMenu) => JSX.Element;
31
+ export declare const Dropdown: ({ items, header, footer, children, append, align, zIndex, onChange, maxHeight, }: IMenu) => JSX.Element;
31
32
  export {};
@@ -1,4 +1,15 @@
1
1
  "use strict";
2
+ var __assign = (this && this.__assign) || function () {
3
+ __assign = Object.assign || function(t) {
4
+ for (var s, i = 1, n = arguments.length; i < n; i++) {
5
+ s = arguments[i];
6
+ for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
7
+ t[p] = s[p];
8
+ }
9
+ return t;
10
+ };
11
+ return __assign.apply(this, arguments);
12
+ };
2
13
  var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
3
14
  if (k2 === undefined) k2 = k;
4
15
  var desc = Object.getOwnPropertyDescriptor(m, k);
@@ -30,7 +41,7 @@ var core_1 = require("@popperjs/core");
30
41
  var react_id_generator_1 = require("react-id-generator");
31
42
  var DROPDOWN_ID_CONTAINER = "sd-dropdown-constainer";
32
43
  var Dropdown = function (_a) {
33
- 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;
44
+ 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;
34
45
  var _b = React.useState(false), open = _b[0], setOpen = _b[1];
35
46
  var _c = React.useState(false), change = _c[0], setChange = _c[1];
36
47
  var menuID = (0, react_id_generator_1.useId)()[0];
@@ -39,6 +50,7 @@ var Dropdown = function (_a) {
39
50
  var headerElements = header === null || header === void 0 ? void 0 : header.map(function (el, index) {
40
51
  return each(el, index);
41
52
  });
53
+ var maxHeightStyle = maxHeight ? { maxHeight: maxHeight } : {};
42
54
  var dropdownElements = items.map(function (el, index) {
43
55
  return each(el, index);
44
56
  });
@@ -82,7 +94,7 @@ var Dropdown = function (_a) {
82
94
  React.createElement("ul", { className: 'dropdown__menu-footer dropdown__menu-footer--has-list ' }, footerElements)));
83
95
  }
84
96
  else {
85
- return (React.createElement("ul", { className: 'dropdown__menu ', id: menuID, role: 'menu', ref: ref, style: { zIndex: zIndex } }, dropdownElements));
97
+ return (React.createElement("ul", { className: 'dropdown__menu ', id: menuID, role: 'menu', ref: ref, style: __assign({ zIndex: zIndex, overflowY: 'auto' }, maxHeightStyle) }, dropdownElements));
86
98
  }
87
99
  }
88
100
  function toggleDisplay() {
@@ -185,7 +197,7 @@ var Dropdown = function (_a) {
185
197
  return React.cloneElement(children, attrs);
186
198
  })()) : null)
187
199
  :
188
- React.createElement("button", { ref: buttonRef, className: ' dropdown__toggle dropdown-toggle', "aria-haspopup": "menu", tabIndex: 0, "aria-expanded": open, onClick: toggleDisplay },
200
+ React.createElement("button", { style: { whiteSpace: 'nowrap' }, ref: buttonRef, className: ' dropdown__toggle dropdown-toggle', "aria-haspopup": "menu", tabIndex: 0, "aria-expanded": open, onClick: toggleDisplay },
189
201
  children,
190
202
  React.createElement("span", { className: "dropdown__caret" })),
191
203
  append ?