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.
- package/app/styles/_big-icon-font.scss +1 -1
- package/app-typescript/components/Dropdown.tsx +13 -7
- package/dist/examples.bundle.css +13 -13
- package/dist/examples.bundle.js +17 -5
- package/dist/superdesk-ui.bundle.css +13 -13
- package/dist/superdesk-ui.bundle.js +15 -3
- package/package.json +1 -1
- package/react/components/Dropdown.d.ts +2 -1
- package/react/components/Dropdown.js +15 -3
@@ -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
|
276
|
-
|
277
|
-
|
278
|
-
|
279
|
-
|
280
|
-
|
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>}
|
package/dist/examples.bundle.css
CHANGED
@@ -15426,35 +15426,35 @@ doc-react-playground {
|
|
15426
15426
|
.big-icon--desk:before {
|
15427
15427
|
content: ""; }
|
15428
15428
|
|
15429
|
-
.big-icon--chevron-
|
15429
|
+
.big-icon--chevron-left {
|
15430
15430
|
content: ""; }
|
15431
|
-
.big-icon--chevron-
|
15431
|
+
.big-icon--chevron-left.color--default {
|
15432
15432
|
color: #2c323a; }
|
15433
|
-
.big-icon--chevron-
|
15433
|
+
.big-icon--chevron-left.color--primary {
|
15434
15434
|
color: var(--sd-colour-primary) !important; }
|
15435
|
-
.big-icon--chevron-
|
15435
|
+
.big-icon--chevron-left.color--success {
|
15436
15436
|
color: var(--sd-colour-success) !important; }
|
15437
|
-
.big-icon--chevron-
|
15437
|
+
.big-icon--chevron-left.color--warning {
|
15438
15438
|
color: var(--sd-colour-warning) !important; }
|
15439
|
-
.big-icon--chevron-
|
15439
|
+
.big-icon--chevron-left.color--alert {
|
15440
15440
|
color: var(--sd-colour-alert) !important; }
|
15441
|
-
.big-icon--chevron-
|
15441
|
+
.big-icon--chevron-left.color--highlight {
|
15442
15442
|
color: var(--sd-colour-highlight) !important; }
|
15443
|
-
.big-icon--chevron-
|
15443
|
+
.big-icon--chevron-left.color--light {
|
15444
15444
|
color: var(--color-text-lighter) !important; }
|
15445
|
-
.big-icon--chevron-
|
15445
|
+
.big-icon--chevron-left.color--white {
|
15446
15446
|
color: #e2e5e9 !important; }
|
15447
|
-
.big-icon--chevron-
|
15447
|
+
.big-icon--chevron-left.scale--2x {
|
15448
15448
|
--big-icon-size: 52px
|
15449
15449
|
; }
|
15450
|
-
.big-icon--chevron-
|
15450
|
+
.big-icon--chevron-left.scale--3x {
|
15451
15451
|
--big-icon-size: 78px
|
15452
15452
|
; }
|
15453
|
-
.big-icon--chevron-
|
15453
|
+
.big-icon--chevron-left.scale--4x {
|
15454
15454
|
--big-icon-size: 104px
|
15455
15455
|
; }
|
15456
15456
|
|
15457
|
-
.big-icon--chevron-
|
15457
|
+
.big-icon--chevron-left:before {
|
15458
15458
|
content: ""; }
|
15459
15459
|
|
15460
15460
|
.big-icon--chevron-right {
|
package/dist/examples.bundle.js
CHANGED
@@ -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-
|
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.
|
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-
|
33499
|
+
.big-icon--chevron-left {
|
33500
33500
|
content: ""; }
|
33501
|
-
.big-icon--chevron-
|
33501
|
+
.big-icon--chevron-left.color--default {
|
33502
33502
|
color: var(--color-icon-default); }
|
33503
|
-
.big-icon--chevron-
|
33503
|
+
.big-icon--chevron-left.color--primary {
|
33504
33504
|
color: var(--sd-colour-primary) !important; }
|
33505
|
-
.big-icon--chevron-
|
33505
|
+
.big-icon--chevron-left.color--success {
|
33506
33506
|
color: var(--sd-colour-success) !important; }
|
33507
|
-
.big-icon--chevron-
|
33507
|
+
.big-icon--chevron-left.color--warning {
|
33508
33508
|
color: var(--sd-colour-warning) !important; }
|
33509
|
-
.big-icon--chevron-
|
33509
|
+
.big-icon--chevron-left.color--alert {
|
33510
33510
|
color: var(--sd-colour-alert) !important; }
|
33511
|
-
.big-icon--chevron-
|
33511
|
+
.big-icon--chevron-left.color--highlight {
|
33512
33512
|
color: var(--sd-colour-highlight) !important; }
|
33513
|
-
.big-icon--chevron-
|
33513
|
+
.big-icon--chevron-left.color--light {
|
33514
33514
|
color: var(--color-text-lighter) !important; }
|
33515
|
-
.big-icon--chevron-
|
33515
|
+
.big-icon--chevron-left.color--white {
|
33516
33516
|
color: #e2e5e9 !important; }
|
33517
|
-
.big-icon--chevron-
|
33517
|
+
.big-icon--chevron-left.scale--2x {
|
33518
33518
|
--big-icon-size: 52px
|
33519
33519
|
; }
|
33520
|
-
.big-icon--chevron-
|
33520
|
+
.big-icon--chevron-left.scale--3x {
|
33521
33521
|
--big-icon-size: 78px
|
33522
33522
|
; }
|
33523
|
-
.big-icon--chevron-
|
33523
|
+
.big-icon--chevron-left.scale--4x {
|
33524
33524
|
--big-icon-size: 104px
|
33525
33525
|
; }
|
33526
33526
|
|
33527
|
-
.big-icon--chevron-
|
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
@@ -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 ?
|