superdesk-ui-framework 3.0.10 → 3.0.11

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.
Files changed (11) hide show
  1. package/app-typescript/components/Dropdown.tsx +36 -8
  2. package/app-typescript/components/Modal.tsx +2 -2
  3. package/app-typescript/components/TreeSelect.tsx +2 -0
  4. package/dist/examples.bundle.js +12 -12
  5. package/dist/superdesk-ui.bundle.js +11 -11
  6. package/package.json +1 -1
  7. package/react/components/Dropdown.d.ts +2 -1
  8. package/react/components/Dropdown.js +9 -9
  9. package/react/components/Modal.js +1 -1
  10. package/react/components/TreeSelect.d.ts +1 -0
  11. package/react/components/TreeSelect.js +1 -1
package/app-typescript/components/Dropdown.tsx CHANGED
@@ -35,6 +35,7 @@ interface IMenu {
35
35
  footer?: Array<IMenuItem | ISubmenu | IMenuGroup | 'divider'>;
36
36
  append?: boolean;
37
37
  children: React.ReactNode;
38
+ zIndex?: number;
38
39
  onChange?(event?: any): void;
39
40
  }
40
41
 
@@ -47,6 +48,7 @@ export const Dropdown = ({
47
48
  children,
48
49
  append,
49
50
  align,
51
+ zIndex,
50
52
  onChange,
51
53
  }: IMenu) => {
52
54
  const [open, setOpen] = React.useState(false);
@@ -91,7 +93,11 @@ export const Dropdown = ({
91
93
  function createAppendMenu() {
92
94
  if (header && footer) {
93
95
  return (
94
- <div className='dropdown__menu dropdown__menu--has-head-foot' id={menuID} role='menu' ref={ref}>
96
+ <div className='dropdown__menu dropdown__menu--has-head-foot'
97
+ id={menuID} role='menu'
98
+ ref={ref}
99
+ style={{zIndex: zIndex}}
100
+ >
95
101
  <ul className='dropdown__menu-header'>
96
102
  {headerElements}
97
103
  </ul>
@@ -105,7 +111,10 @@ export const Dropdown = ({
105
111
  );
106
112
  } else if (header) {
107
113
  return (
108
- <div className='dropdown__menu dropdown__menu--has-head-foot' id={menuID} role='menu' ref={ref}>
114
+ <div className='dropdown__menu dropdown__menu--has-head-foot'
115
+ id={menuID} role='menu'
116
+ ref={ref}
117
+ style={{zIndex: zIndex}}>
109
118
  <ul className='dropdown__menu-header'>
110
119
  {headerElements}
111
120
  </ul>
@@ -116,7 +125,11 @@ export const Dropdown = ({
116
125
  );
117
126
  } else if (footer) {
118
127
  return (
119
- <div className='dropdown__menu dropdown__menu--has-head-foot' id={menuID} role='menu' ref={ref}>
128
+ <div className='dropdown__menu dropdown__menu--has-head-foot'
129
+ id={menuID}
130
+ role='menu'
131
+ ref={ref}
132
+ style={{zIndex: zIndex}}>
120
133
  <ul className='dropdown__menu-body'>
121
134
  {dropdownElements}
122
135
  </ul>
@@ -127,7 +140,10 @@ export const Dropdown = ({
127
140
  );
128
141
  } else {
129
142
  return (
130
- <ul className='dropdown__menu ' id={menuID} role='menu' ref={ref}>
143
+ <ul className='dropdown__menu '
144
+ id={menuID} role='menu'
145
+ ref={ref}
146
+ style={{zIndex: zIndex}}>
131
147
  {dropdownElements}
132
148
  </ul>
133
149
  );
@@ -264,7 +280,10 @@ export const Dropdown = ({
264
280
  null : (function() {
265
281
  if (header && footer) {
266
282
  return (
267
- <div className='dropdown__menu dropdown__menu--has-head-foot' role='menu' ref={ref}>
283
+ <div className='dropdown__menu dropdown__menu--has-head-foot'
284
+ role='menu'
285
+ ref={ref}
286
+ style={{zIndex: zIndex}}>
268
287
  <ul className='dropdown__menu-header'>
269
288
  {headerElements}
270
289
  </ul>
@@ -278,7 +297,10 @@ export const Dropdown = ({
278
297
  );
279
298
  } else if (header) {
280
299
  return (
281
- <div className='dropdown__menu dropdown__menu--has-head-foot' role='menu' ref={ref}>
300
+ <div className='dropdown__menu dropdown__menu--has-head-foot'
301
+ role='menu'
302
+ ref={ref}
303
+ style={{zIndex: zIndex}}>
282
304
  <ul className='dropdown__menu-header'>
283
305
  {headerElements}
284
306
  </ul>
@@ -289,7 +311,10 @@ export const Dropdown = ({
289
311
  );
290
312
  } else if (footer) {
291
313
  return (
292
- <div className='dropdown__menu dropdown__menu--has-head-foot' role='menu' ref={ref}>
314
+ <div className='dropdown__menu dropdown__menu--has-head-foot'
315
+ role='menu'
316
+ ref={ref}
317
+ style={{zIndex: zIndex}}>
293
318
  <ul className='dropdown__menu-body'>
294
319
  {dropdownElements}
295
320
  </ul>
@@ -300,7 +325,10 @@ export const Dropdown = ({
300
325
  );
301
326
  } else {
302
327
  return (
303
- <ul className='dropdown__menu' role='menu' ref={ref}>
328
+ <ul className='dropdown__menu'
329
+ role='menu'
330
+ ref={ref}
331
+ style={{zIndex: zIndex}}>
304
332
  {dropdownElements}
305
333
  </ul>
306
334
  );
package/app-typescript/components/Modal.tsx CHANGED
@@ -44,8 +44,8 @@ export class Modal extends React.Component<IProps, {}> {
44
44
  contentClassName={classes}
45
45
  onShow={this.props.onShow}
46
46
  onHide={this.props.onHide}
47
- zIndex={this.props.zIndex}
48
- position={this.props.position && this.props.position}
47
+ zIndex={this.props.zIndex ? this.props.zIndex : 1000}
48
+ position={this.props.position}
49
49
  >
50
50
  {this.props.children}
51
51
  </PrimeDialog>
package/app-typescript/components/TreeSelect.tsx CHANGED
@@ -43,6 +43,7 @@ interface IPropsBase<T> {
43
43
  required?: boolean;
44
44
  label?: string;
45
45
  disabled?: boolean;
46
+ zIndex?: number;
46
47
  getLabel(item: T): string;
47
48
  getId(item: T): string;
48
49
  getBackgroundColor?(item: T): string;
@@ -705,6 +706,7 @@ export class TreeSelect<T> extends React.Component<IProps<T>, IState<T>> {
705
706
  && <div
706
707
  className={"autocomplete autocomplete--multi-select" + (this.props.width === 'medium' ? ' autocomplete--fixed-width' : '')}
707
708
  ref={this.dropdownRef}
709
+ style={{zIndex: this.props.zIndex}}
708
710
  >
709
711
  <div className='autocomplete__header'>
710
712
  <div
package/dist/examples.bundle.js CHANGED
@@ -57872,7 +57872,7 @@ var core_1 = __webpack_require__(230);
57872
57872
  var react_id_generator_1 = __webpack_require__(7);
57873
57873
  var DROPDOWN_ID_CONTAINER = "sd-dropdown-constainer";
57874
57874
  var Dropdown = function (_a) {
57875
- var items = _a.items, header = _a.header, footer = _a.footer, children = _a.children, append = _a.append, align = _a.align, onChange = _a.onChange;
57875
+ 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;
57876
57876
  var _b = React.useState(false), open = _b[0], setOpen = _b[1];
57877
57877
  var _c = React.useState(false), change = _c[0], setChange = _c[1];
57878
57878
  var menuID = (0, react_id_generator_1.useId)()[0];
@@ -57908,23 +57908,23 @@ var Dropdown = function (_a) {
57908
57908
  }, [open]);
57909
57909
  function createAppendMenu() {
57910
57910
  if (header && footer) {
57911
- return (React.createElement("div", { className: 'dropdown__menu dropdown__menu--has-head-foot', id: menuID, role: 'menu', ref: ref },
57911
+ return (React.createElement("div", { className: 'dropdown__menu dropdown__menu--has-head-foot', id: menuID, role: 'menu', ref: ref, style: { zIndex: zIndex } },
57912
57912
  React.createElement("ul", { className: 'dropdown__menu-header' }, headerElements),
57913
57913
  React.createElement("ul", { className: 'dropdown__menu-body' }, dropdownElements),
57914
57914
  React.createElement("ul", { className: 'dropdown__menu-footer dropdown__menu-footer--has-list ' }, footerElements)));
57915
57915
  }
57916
57916
  else if (header) {
57917
- return (React.createElement("div", { className: 'dropdown__menu dropdown__menu--has-head-foot', id: menuID, role: 'menu', ref: ref },
57917
+ return (React.createElement("div", { className: 'dropdown__menu dropdown__menu--has-head-foot', id: menuID, role: 'menu', ref: ref, style: { zIndex: zIndex } },
57918
57918
  React.createElement("ul", { className: 'dropdown__menu-header' }, headerElements),
57919
57919
  React.createElement("ul", { className: 'dropdown__menu-body' }, dropdownElements)));
57920
57920
  }
57921
57921
  else if (footer) {
57922
- return (React.createElement("div", { className: 'dropdown__menu dropdown__menu--has-head-foot', id: menuID, role: 'menu', ref: ref },
57922
+ return (React.createElement("div", { className: 'dropdown__menu dropdown__menu--has-head-foot', id: menuID, role: 'menu', ref: ref, style: { zIndex: zIndex } },
57923
57923
  React.createElement("ul", { className: 'dropdown__menu-body' }, dropdownElements),
57924
57924
  React.createElement("ul", { className: 'dropdown__menu-footer dropdown__menu-footer--has-list ' }, footerElements)));
57925
57925
  }
57926
57926
  else {
57927
- return (React.createElement("ul", { className: 'dropdown__menu ', id: menuID, role: 'menu', ref: ref }, dropdownElements));
57927
+ return (React.createElement("ul", { className: 'dropdown__menu ', id: menuID, role: 'menu', ref: ref, style: { zIndex: zIndex } }, dropdownElements));
57928
57928
  }
57929
57929
  }
57930
57930
  function toggleDisplay() {
@@ -58028,23 +58028,23 @@ var Dropdown = function (_a) {
58028
58028
  append ?
58029
58029
  null : (function () {
58030
58030
  if (header && footer) {
58031
- return (React.createElement("div", { className: 'dropdown__menu dropdown__menu--has-head-foot', role: 'menu', ref: ref },
58031
+ return (React.createElement("div", { className: 'dropdown__menu dropdown__menu--has-head-foot', role: 'menu', ref: ref, style: { zIndex: zIndex } },
58032
58032
  React.createElement("ul", { className: 'dropdown__menu-header' }, headerElements),
58033
58033
  React.createElement("ul", { className: 'dropdown__menu-body' }, dropdownElements),
58034
58034
  React.createElement("ul", { className: 'dropdown__menu-footer dropdown__menu-footer--has-list ' }, footerElements)));
58035
58035
  }
58036
58036
  else if (header) {
58037
- return (React.createElement("div", { className: 'dropdown__menu dropdown__menu--has-head-foot', role: 'menu', ref: ref },
58037
+ return (React.createElement("div", { className: 'dropdown__menu dropdown__menu--has-head-foot', role: 'menu', ref: ref, style: { zIndex: zIndex } },
58038
58038
  React.createElement("ul", { className: 'dropdown__menu-header' }, headerElements),
58039
58039
  React.createElement("ul", { className: 'dropdown__menu-body' }, dropdownElements)));
58040
58040
  }
58041
58041
  else if (footer) {
58042
- return (React.createElement("div", { className: 'dropdown__menu dropdown__menu--has-head-foot', role: 'menu', ref: ref },
58042
+ return (React.createElement("div", { className: 'dropdown__menu dropdown__menu--has-head-foot', role: 'menu', ref: ref, style: { zIndex: zIndex } },
58043
58043
  React.createElement("ul", { className: 'dropdown__menu-body' }, dropdownElements),
58044
58044
  React.createElement("ul", { className: 'dropdown__menu-footer dropdown__menu-footer--has-list ' }, footerElements)));
58045
58045
  }
58046
58046
  else {
58047
- return (React.createElement("ul", { className: 'dropdown__menu', role: 'menu', ref: ref }, dropdownElements));
58047
+ return (React.createElement("ul", { className: 'dropdown__menu', role: 'menu', ref: ref, style: { zIndex: zIndex } }, dropdownElements));
58048
58048
  }
58049
58049
  })()));
58050
58050
  };
@@ -64019,7 +64019,7 @@ var TreeSelect = /** @class */ (function (_super) {
64019
64019
  React.createElement("span", null, _this.props.getLabel(item))));
64020
64020
  })),
64021
64021
  this.state.openDropdown
64022
- && React.createElement("div", { className: "autocomplete autocomplete--multi-select" + (this.props.width === 'medium' ? ' autocomplete--fixed-width' : ''), ref: this.dropdownRef },
64022
+ && React.createElement("div", { className: "autocomplete autocomplete--multi-select" + (this.props.width === 'medium' ? ' autocomplete--fixed-width' : ''), ref: this.dropdownRef, style: { zIndex: this.props.zIndex } },
64023
64023
  React.createElement("div", { className: 'autocomplete__header' },
64024
64024
  React.createElement("div", { className: "autocomplete__icon", onClick: function () {
64025
64025
  _this.backButtonValue();
@@ -97625,7 +97625,7 @@ var Modal = /** @class */ (function (_super) {
97625
97625
  _a["p-dialog-content--".concat(this.props.contentPadding)] = this.props.contentPadding,
97626
97626
  _a), this.props.className);
97627
97627
  return (React.createElement("div", { style: { display: 'content' }, "data-theme": this.props.theme !== 'dark' ? null : 'dark-ui' },
97628
- React.createElement(dialog_1.Dialog, { id: this.props.id, visible: this.props.visible, header: this.props.headerTemplate, footer: this.props.footerTemplate, closeOnEscape: this.props.closeOnEscape, maximized: this.props.maximized, maximizable: this.props.maximizable, contentClassName: classes, onShow: this.props.onShow, onHide: this.props.onHide, zIndex: this.props.zIndex, position: this.props.position && this.props.position }, this.props.children)));
97628
+ React.createElement(dialog_1.Dialog, { id: this.props.id, visible: this.props.visible, header: this.props.headerTemplate, footer: this.props.footerTemplate, closeOnEscape: this.props.closeOnEscape, maximized: this.props.maximized, maximizable: this.props.maximizable, contentClassName: classes, onShow: this.props.onShow, onHide: this.props.onHide, zIndex: this.props.zIndex ? this.props.zIndex : 1000, position: this.props.position }, this.props.children)));
97629
97629
  };
97630
97630
  return Modal;
97631
97631
  }(React.Component));
@@ -139318,7 +139318,7 @@ exports.WithSizeObserverDocs = WithSizeObserverDocs;
139318
139318
  /* 653 */
139319
139319
  /***/ (function(module, exports) {
139320
139320
 
139321
- module.exports = {"name":"superdesk-ui-framework","version":"3.0.10","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","lint":"eslint --parser=@typescript-eslint/parser app && tslint -c tslint.json 'app-typescript/**/*.{ts,tsx}'","lint-fix":"tsc -p tsconfig.json --noEmit && tslint --fix -c tslint.json 'app-typescript/**/*.{ts,tsx}'","prepublishOnly":"npm run build"},"devDependencies":{"@types/chart.js":"^2.9.24","@types/classnames":"^2.2.9","@types/lodash":"^4.14.161","@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.14.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","lodash":"4.17.21","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","tslint":"^5.18.0","typescript":"4.5.2","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-10","@types/node":"^14.10.2","chart.js":"^2.9.3","date-fns":"2.7.0","moment":"^2.29.3","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"}}
139321
+ module.exports = {"name":"superdesk-ui-framework","version":"3.0.11","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","lint":"eslint --parser=@typescript-eslint/parser app && tslint -c tslint.json 'app-typescript/**/*.{ts,tsx}'","lint-fix":"tsc -p tsconfig.json --noEmit && tslint --fix -c tslint.json 'app-typescript/**/*.{ts,tsx}'","prepublishOnly":"npm run build"},"devDependencies":{"@types/chart.js":"^2.9.24","@types/classnames":"^2.2.9","@types/lodash":"^4.14.161","@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.14.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","lodash":"4.17.21","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","tslint":"^5.18.0","typescript":"4.5.2","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-10","@types/node":"^14.10.2","chart.js":"^2.9.3","date-fns":"2.7.0","moment":"^2.29.3","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"}}
139322
139322
 
139323
139323
  /***/ }),
139324
139324
  /* 654 */
package/dist/superdesk-ui.bundle.js CHANGED
@@ -57516,7 +57516,7 @@ var core_1 = __webpack_require__(230);
57516
57516
  var react_id_generator_1 = __webpack_require__(7);
57517
57517
  var DROPDOWN_ID_CONTAINER = "sd-dropdown-constainer";
57518
57518
  var Dropdown = function (_a) {
57519
- var items = _a.items, header = _a.header, footer = _a.footer, children = _a.children, append = _a.append, align = _a.align, onChange = _a.onChange;
57519
+ 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;
57520
57520
  var _b = React.useState(false), open = _b[0], setOpen = _b[1];
57521
57521
  var _c = React.useState(false), change = _c[0], setChange = _c[1];
57522
57522
  var menuID = (0, react_id_generator_1.useId)()[0];
@@ -57552,23 +57552,23 @@ var Dropdown = function (_a) {
57552
57552
  }, [open]);
57553
57553
  function createAppendMenu() {
57554
57554
  if (header && footer) {
57555
- return (React.createElement("div", { className: 'dropdown__menu dropdown__menu--has-head-foot', id: menuID, role: 'menu', ref: ref },
57555
+ return (React.createElement("div", { className: 'dropdown__menu dropdown__menu--has-head-foot', id: menuID, role: 'menu', ref: ref, style: { zIndex: zIndex } },
57556
57556
  React.createElement("ul", { className: 'dropdown__menu-header' }, headerElements),
57557
57557
  React.createElement("ul", { className: 'dropdown__menu-body' }, dropdownElements),
57558
57558
  React.createElement("ul", { className: 'dropdown__menu-footer dropdown__menu-footer--has-list ' }, footerElements)));
57559
57559
  }
57560
57560
  else if (header) {
57561
- return (React.createElement("div", { className: 'dropdown__menu dropdown__menu--has-head-foot', id: menuID, role: 'menu', ref: ref },
57561
+ return (React.createElement("div", { className: 'dropdown__menu dropdown__menu--has-head-foot', id: menuID, role: 'menu', ref: ref, style: { zIndex: zIndex } },
57562
57562
  React.createElement("ul", { className: 'dropdown__menu-header' }, headerElements),
57563
57563
  React.createElement("ul", { className: 'dropdown__menu-body' }, dropdownElements)));
57564
57564
  }
57565
57565
  else if (footer) {
57566
- return (React.createElement("div", { className: 'dropdown__menu dropdown__menu--has-head-foot', id: menuID, role: 'menu', ref: ref },
57566
+ return (React.createElement("div", { className: 'dropdown__menu dropdown__menu--has-head-foot', id: menuID, role: 'menu', ref: ref, style: { zIndex: zIndex } },
57567
57567
  React.createElement("ul", { className: 'dropdown__menu-body' }, dropdownElements),
57568
57568
  React.createElement("ul", { className: 'dropdown__menu-footer dropdown__menu-footer--has-list ' }, footerElements)));
57569
57569
  }
57570
57570
  else {
57571
- return (React.createElement("ul", { className: 'dropdown__menu ', id: menuID, role: 'menu', ref: ref }, dropdownElements));
57571
+ return (React.createElement("ul", { className: 'dropdown__menu ', id: menuID, role: 'menu', ref: ref, style: { zIndex: zIndex } }, dropdownElements));
57572
57572
  }
57573
57573
  }
57574
57574
  function toggleDisplay() {
@@ -57672,23 +57672,23 @@ var Dropdown = function (_a) {
57672
57672
  append ?
57673
57673
  null : (function () {
57674
57674
  if (header && footer) {
57675
- return (React.createElement("div", { className: 'dropdown__menu dropdown__menu--has-head-foot', role: 'menu', ref: ref },
57675
+ return (React.createElement("div", { className: 'dropdown__menu dropdown__menu--has-head-foot', role: 'menu', ref: ref, style: { zIndex: zIndex } },
57676
57676
  React.createElement("ul", { className: 'dropdown__menu-header' }, headerElements),
57677
57677
  React.createElement("ul", { className: 'dropdown__menu-body' }, dropdownElements),
57678
57678
  React.createElement("ul", { className: 'dropdown__menu-footer dropdown__menu-footer--has-list ' }, footerElements)));
57679
57679
  }
57680
57680
  else if (header) {
57681
- return (React.createElement("div", { className: 'dropdown__menu dropdown__menu--has-head-foot', role: 'menu', ref: ref },
57681
+ return (React.createElement("div", { className: 'dropdown__menu dropdown__menu--has-head-foot', role: 'menu', ref: ref, style: { zIndex: zIndex } },
57682
57682
  React.createElement("ul", { className: 'dropdown__menu-header' }, headerElements),
57683
57683
  React.createElement("ul", { className: 'dropdown__menu-body' }, dropdownElements)));
57684
57684
  }
57685
57685
  else if (footer) {
57686
- return (React.createElement("div", { className: 'dropdown__menu dropdown__menu--has-head-foot', role: 'menu', ref: ref },
57686
+ return (React.createElement("div", { className: 'dropdown__menu dropdown__menu--has-head-foot', role: 'menu', ref: ref, style: { zIndex: zIndex } },
57687
57687
  React.createElement("ul", { className: 'dropdown__menu-body' }, dropdownElements),
57688
57688
  React.createElement("ul", { className: 'dropdown__menu-footer dropdown__menu-footer--has-list ' }, footerElements)));
57689
57689
  }
57690
57690
  else {
57691
- return (React.createElement("ul", { className: 'dropdown__menu', role: 'menu', ref: ref }, dropdownElements));
57691
+ return (React.createElement("ul", { className: 'dropdown__menu', role: 'menu', ref: ref, style: { zIndex: zIndex } }, dropdownElements));
57692
57692
  }
57693
57693
  })()));
57694
57694
  };
@@ -63636,7 +63636,7 @@ var TreeSelect = /** @class */ (function (_super) {
63636
63636
  React.createElement("span", null, _this.props.getLabel(item))));
63637
63637
  })),
63638
63638
  this.state.openDropdown
63639
- && React.createElement("div", { className: "autocomplete autocomplete--multi-select" + (this.props.width === 'medium' ? ' autocomplete--fixed-width' : ''), ref: this.dropdownRef },
63639
+ && React.createElement("div", { className: "autocomplete autocomplete--multi-select" + (this.props.width === 'medium' ? ' autocomplete--fixed-width' : ''), ref: this.dropdownRef, style: { zIndex: this.props.zIndex } },
63640
63640
  React.createElement("div", { className: 'autocomplete__header' },
63641
63641
  React.createElement("div", { className: "autocomplete__icon", onClick: function () {
63642
63642
  _this.backButtonValue();
@@ -96886,7 +96886,7 @@ var Modal = /** @class */ (function (_super) {
96886
96886
  _a["p-dialog-content--".concat(this.props.contentPadding)] = this.props.contentPadding,
96887
96887
  _a), this.props.className);
96888
96888
  return (React.createElement("div", { style: { display: 'content' }, "data-theme": this.props.theme !== 'dark' ? null : 'dark-ui' },
96889
- React.createElement(dialog_1.Dialog, { id: this.props.id, visible: this.props.visible, header: this.props.headerTemplate, footer: this.props.footerTemplate, closeOnEscape: this.props.closeOnEscape, maximized: this.props.maximized, maximizable: this.props.maximizable, contentClassName: classes, onShow: this.props.onShow, onHide: this.props.onHide, zIndex: this.props.zIndex, position: this.props.position && this.props.position }, this.props.children)));
96889
+ React.createElement(dialog_1.Dialog, { id: this.props.id, visible: this.props.visible, header: this.props.headerTemplate, footer: this.props.footerTemplate, closeOnEscape: this.props.closeOnEscape, maximized: this.props.maximized, maximizable: this.props.maximizable, contentClassName: classes, onShow: this.props.onShow, onHide: this.props.onHide, zIndex: this.props.zIndex ? this.props.zIndex : 1000, position: this.props.position }, this.props.children)));
96890
96890
  };
96891
96891
  return Modal;
96892
96892
  }(React.Component));
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "superdesk-ui-framework",
3
- "version": "3.0.10",
3
+ "version": "3.0.11",
4
4
  "license": "AGPL-3.0",
5
5
  "repository": {
6
6
  "type": "git",
package/react/components/Dropdown.d.ts CHANGED
@@ -24,7 +24,8 @@ interface IMenu {
24
24
  footer?: Array<IMenuItem | ISubmenu | IMenuGroup | 'divider'>;
25
25
  append?: boolean;
26
26
  children: React.ReactNode;
27
+ zIndex?: number;
27
28
  onChange?(event?: any): void;
28
29
  }
29
- export declare const Dropdown: ({ items, header, footer, children, append, align, onChange, }: IMenu) => JSX.Element;
30
+ export declare const Dropdown: ({ items, header, footer, children, append, align, zIndex, onChange, }: IMenu) => JSX.Element;
30
31
  export {};
package/react/components/Dropdown.js CHANGED
@@ -26,7 +26,7 @@ var core_1 = require("@popperjs/core");
26
26
  var react_id_generator_1 = require("react-id-generator");
27
27
  var DROPDOWN_ID_CONTAINER = "sd-dropdown-constainer";
28
28
  var Dropdown = function (_a) {
29
- var items = _a.items, header = _a.header, footer = _a.footer, children = _a.children, append = _a.append, align = _a.align, onChange = _a.onChange;
29
+ 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;
30
30
  var _b = React.useState(false), open = _b[0], setOpen = _b[1];
31
31
  var _c = React.useState(false), change = _c[0], setChange = _c[1];
32
32
  var menuID = (0, react_id_generator_1.useId)()[0];
@@ -62,23 +62,23 @@ var Dropdown = function (_a) {
62
62
  }, [open]);
63
63
  function createAppendMenu() {
64
64
  if (header && footer) {
65
- return (React.createElement("div", { className: 'dropdown__menu dropdown__menu--has-head-foot', id: menuID, role: 'menu', ref: ref },
65
+ return (React.createElement("div", { className: 'dropdown__menu dropdown__menu--has-head-foot', id: menuID, role: 'menu', ref: ref, style: { zIndex: zIndex } },
66
66
  React.createElement("ul", { className: 'dropdown__menu-header' }, headerElements),
67
67
  React.createElement("ul", { className: 'dropdown__menu-body' }, dropdownElements),
68
68
  React.createElement("ul", { className: 'dropdown__menu-footer dropdown__menu-footer--has-list ' }, footerElements)));
69
69
  }
70
70
  else if (header) {
71
- return (React.createElement("div", { className: 'dropdown__menu dropdown__menu--has-head-foot', id: menuID, role: 'menu', ref: ref },
71
+ return (React.createElement("div", { className: 'dropdown__menu dropdown__menu--has-head-foot', id: menuID, role: 'menu', ref: ref, style: { zIndex: zIndex } },
72
72
  React.createElement("ul", { className: 'dropdown__menu-header' }, headerElements),
73
73
  React.createElement("ul", { className: 'dropdown__menu-body' }, dropdownElements)));
74
74
  }
75
75
  else if (footer) {
76
- return (React.createElement("div", { className: 'dropdown__menu dropdown__menu--has-head-foot', id: menuID, role: 'menu', ref: ref },
76
+ return (React.createElement("div", { className: 'dropdown__menu dropdown__menu--has-head-foot', id: menuID, role: 'menu', ref: ref, style: { zIndex: zIndex } },
77
77
  React.createElement("ul", { className: 'dropdown__menu-body' }, dropdownElements),
78
78
  React.createElement("ul", { className: 'dropdown__menu-footer dropdown__menu-footer--has-list ' }, footerElements)));
79
79
  }
80
80
  else {
81
- return (React.createElement("ul", { className: 'dropdown__menu ', id: menuID, role: 'menu', ref: ref }, dropdownElements));
81
+ return (React.createElement("ul", { className: 'dropdown__menu ', id: menuID, role: 'menu', ref: ref, style: { zIndex: zIndex } }, dropdownElements));
82
82
  }
83
83
  }
84
84
  function toggleDisplay() {
@@ -182,23 +182,23 @@ var Dropdown = function (_a) {
182
182
  append ?
183
183
  null : (function () {
184
184
  if (header && footer) {
185
- return (React.createElement("div", { className: 'dropdown__menu dropdown__menu--has-head-foot', role: 'menu', ref: ref },
185
+ return (React.createElement("div", { className: 'dropdown__menu dropdown__menu--has-head-foot', role: 'menu', ref: ref, style: { zIndex: zIndex } },
186
186
  React.createElement("ul", { className: 'dropdown__menu-header' }, headerElements),
187
187
  React.createElement("ul", { className: 'dropdown__menu-body' }, dropdownElements),
188
188
  React.createElement("ul", { className: 'dropdown__menu-footer dropdown__menu-footer--has-list ' }, footerElements)));
189
189
  }
190
190
  else if (header) {
191
- return (React.createElement("div", { className: 'dropdown__menu dropdown__menu--has-head-foot', role: 'menu', ref: ref },
191
+ return (React.createElement("div", { className: 'dropdown__menu dropdown__menu--has-head-foot', role: 'menu', ref: ref, style: { zIndex: zIndex } },
192
192
  React.createElement("ul", { className: 'dropdown__menu-header' }, headerElements),
193
193
  React.createElement("ul", { className: 'dropdown__menu-body' }, dropdownElements)));
194
194
  }
195
195
  else if (footer) {
196
- return (React.createElement("div", { className: 'dropdown__menu dropdown__menu--has-head-foot', role: 'menu', ref: ref },
196
+ return (React.createElement("div", { className: 'dropdown__menu dropdown__menu--has-head-foot', role: 'menu', ref: ref, style: { zIndex: zIndex } },
197
197
  React.createElement("ul", { className: 'dropdown__menu-body' }, dropdownElements),
198
198
  React.createElement("ul", { className: 'dropdown__menu-footer dropdown__menu-footer--has-list ' }, footerElements)));
199
199
  }
200
200
  else {
201
- return (React.createElement("ul", { className: 'dropdown__menu', role: 'menu', ref: ref }, dropdownElements));
201
+ return (React.createElement("ul", { className: 'dropdown__menu', role: 'menu', ref: ref, style: { zIndex: zIndex } }, dropdownElements));
202
202
  }
203
203
  })()));
204
204
  };
package/react/components/Modal.js CHANGED
@@ -56,7 +56,7 @@ var Modal = /** @class */ (function (_super) {
56
56
  _a["p-dialog-content--".concat(this.props.contentPadding)] = this.props.contentPadding,
57
57
  _a), this.props.className);
58
58
  return (React.createElement("div", { style: { display: 'content' }, "data-theme": this.props.theme !== 'dark' ? null : 'dark-ui' },
59
- React.createElement(dialog_1.Dialog, { id: this.props.id, visible: this.props.visible, header: this.props.headerTemplate, footer: this.props.footerTemplate, closeOnEscape: this.props.closeOnEscape, maximized: this.props.maximized, maximizable: this.props.maximizable, contentClassName: classes, onShow: this.props.onShow, onHide: this.props.onHide, zIndex: this.props.zIndex, position: this.props.position && this.props.position }, this.props.children)));
59
+ React.createElement(dialog_1.Dialog, { id: this.props.id, visible: this.props.visible, header: this.props.headerTemplate, footer: this.props.footerTemplate, closeOnEscape: this.props.closeOnEscape, maximized: this.props.maximized, maximizable: this.props.maximizable, contentClassName: classes, onShow: this.props.onShow, onHide: this.props.onHide, zIndex: this.props.zIndex ? this.props.zIndex : 1000, position: this.props.position }, this.props.children)));
60
60
  };
61
61
  return Modal;
62
62
  }(React.Component));
package/react/components/TreeSelect.d.ts CHANGED
@@ -33,6 +33,7 @@ interface IPropsBase<T> {
33
33
  required?: boolean;
34
34
  label?: string;
35
35
  disabled?: boolean;
36
+ zIndex?: number;
36
37
  getLabel(item: T): string;
37
38
  getId(item: T): string;
38
39
  getBackgroundColor?(item: T): string;
package/react/components/TreeSelect.js CHANGED
@@ -556,7 +556,7 @@ var TreeSelect = /** @class */ (function (_super) {
556
556
  React.createElement("span", null, _this.props.getLabel(item))));
557
557
  })),
558
558
  this.state.openDropdown
559
- && React.createElement("div", { className: "autocomplete autocomplete--multi-select" + (this.props.width === 'medium' ? ' autocomplete--fixed-width' : ''), ref: this.dropdownRef },
559
+ && React.createElement("div", { className: "autocomplete autocomplete--multi-select" + (this.props.width === 'medium' ? ' autocomplete--fixed-width' : ''), ref: this.dropdownRef, style: { zIndex: this.props.zIndex } },
560
560
  React.createElement("div", { className: 'autocomplete__header' },
561
561
  React.createElement("div", { className: "autocomplete__icon", onClick: function () {
562
562
  _this.backButtonValue();