superdesk-ui-framework 3.0.9 → 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 (16) 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/Select.tsx +22 -27
  4. package/app-typescript/components/TreeSelect.tsx +2 -0
  5. package/dist/examples.bundle.js +35 -35
  6. package/dist/react/Selects.tsx +54 -64
  7. package/dist/superdesk-ui.bundle.js +14 -17
  8. package/examples/pages/react/Selects.tsx +54 -64
  9. package/package.json +1 -1
  10. package/react/components/Dropdown.d.ts +2 -1
  11. package/react/components/Dropdown.js +9 -9
  12. package/react/components/Modal.js +1 -1
  13. package/react/components/Select.d.ts +0 -5
  14. package/react/components/Select.js +3 -6
  15. package/react/components/TreeSelect.d.ts +1 -0
  16. 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/Select.tsx CHANGED
@@ -1,5 +1,4 @@
1
1
  import * as React from 'react';
2
- // import classNames from 'classnames';
3
2
  import nextId from "react-id-generator";
4
3
  import { InputWrapper } from './Form';
5
4
 
@@ -16,14 +15,9 @@ interface ISelect {
16
15
  tabindex?: number;
17
16
  fullWidth?: boolean;
18
17
  onChange(newValue: string): void;
19
- boxedStyle?: boolean;
20
- boxedLable?: boolean;
21
- placeholder?: string;
22
- size?: 'medium' | 'large' | 'x-large';
23
18
  }
24
19
 
25
20
  interface IState {
26
- value: string;
27
21
  invalid: boolean;
28
22
  }
29
23
 
@@ -33,7 +27,6 @@ class Select extends React.Component<ISelect, IState> {
33
27
  super(props);
34
28
 
35
29
  this.state = {
36
- value: this.props.value ?? '',
37
30
  invalid: this.props.invalid ?? false,
38
31
  };
39
32
 
@@ -41,32 +34,34 @@ class Select extends React.Component<ISelect, IState> {
41
34
  }
42
35
 
43
36
  handleChange(event: React.ChangeEvent<HTMLSelectElement>) {
44
- this.setState({ value: event.target.value });
45
37
  this.props.onChange(event.target.value);
46
38
  }
47
39
 
48
40
  render() {
49
41
  return (
50
42
  <InputWrapper
51
- label={this.props.label}
52
- error={this.props.error}
53
- required={this.props.required}
54
- disabled={this.props.disabled}
55
- invalid={this.state.invalid}
56
- info={this.props.info}
57
- inlineLabel={this.props.inlineLabel}
58
- labelHidden={this.props.labelHidden}
59
- fullWidth={this.props.fullWidth}
60
- htmlId={this.htmlId}
61
- tabindex={this.props.tabindex}>
62
- <select className='sd-input__select'
63
- id={this.htmlId}
64
- value={this.state.value}
65
- aria-describedby={this.htmlId}
66
- tabIndex={this.props.tabindex}
67
- onChange={this.handleChange}
68
- disabled={this.props.disabled}>
69
- {this.props.children}
43
+ label={this.props.label}
44
+ error={this.props.error}
45
+ required={this.props.required}
46
+ disabled={this.props.disabled}
47
+ invalid={this.state.invalid}
48
+ info={this.props.info}
49
+ inlineLabel={this.props.inlineLabel}
50
+ labelHidden={this.props.labelHidden}
51
+ fullWidth={this.props.fullWidth}
52
+ htmlId={this.htmlId}
53
+ tabindex={this.props.tabindex}
54
+ >
55
+ <select
56
+ className='sd-input__select'
57
+ id={this.htmlId}
58
+ value={this.props.value}
59
+ aria-describedby={this.htmlId}
60
+ tabIndex={this.props.tabindex}
61
+ onChange={this.handleChange}
62
+ disabled={this.props.disabled}
63
+ >
64
+ {this.props.children}
70
65
  </select>
71
66
  </InputWrapper>
72
67
  );
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();
@@ -66440,29 +66440,26 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
66440
66440
  Object.defineProperty(exports, "__esModule", { value: true });
66441
66441
  exports.Option = exports.Select = void 0;
66442
66442
  var React = __importStar(__webpack_require__(0));
66443
- // import classNames from 'classnames';
66444
66443
  var react_id_generator_1 = __importDefault(__webpack_require__(7));
66445
66444
  var Form_1 = __webpack_require__(12);
66446
66445
  var Select = /** @class */ (function (_super) {
66447
66446
  __extends(Select, _super);
66448
66447
  function Select(props) {
66449
- var _a, _b;
66448
+ var _a;
66450
66449
  var _this = _super.call(this, props) || this;
66451
66450
  _this.htmlId = (0, react_id_generator_1.default)();
66452
66451
  _this.state = {
66453
- value: (_a = _this.props.value) !== null && _a !== void 0 ? _a : '',
66454
- invalid: (_b = _this.props.invalid) !== null && _b !== void 0 ? _b : false,
66452
+ invalid: (_a = _this.props.invalid) !== null && _a !== void 0 ? _a : false,
66455
66453
  };
66456
66454
  _this.handleChange = _this.handleChange.bind(_this);
66457
66455
  return _this;
66458
66456
  }
66459
66457
  Select.prototype.handleChange = function (event) {
66460
- this.setState({ value: event.target.value });
66461
66458
  this.props.onChange(event.target.value);
66462
66459
  };
66463
66460
  Select.prototype.render = function () {
66464
66461
  return (React.createElement(Form_1.InputWrapper, { label: this.props.label, error: this.props.error, required: this.props.required, disabled: this.props.disabled, invalid: this.state.invalid, info: this.props.info, inlineLabel: this.props.inlineLabel, labelHidden: this.props.labelHidden, fullWidth: this.props.fullWidth, htmlId: this.htmlId, tabindex: this.props.tabindex },
66465
- React.createElement("select", { className: 'sd-input__select', id: this.htmlId, value: this.state.value, "aria-describedby": this.htmlId, tabIndex: this.props.tabindex, onChange: this.handleChange, disabled: this.props.disabled }, this.props.children)));
66462
+ React.createElement("select", { className: 'sd-input__select', id: this.htmlId, value: this.props.value, "aria-describedby": this.htmlId, tabIndex: this.props.tabindex, onChange: this.handleChange, disabled: this.props.disabled }, this.props.children)));
66466
66463
  };
66467
66464
  return Select;
66468
66465
  }(React.Component));
@@ -97628,7 +97625,7 @@ var Modal = /** @class */ (function (_super) {
97628
97625
  _a["p-dialog-content--".concat(this.props.contentPadding)] = this.props.contentPadding,
97629
97626
  _a), this.props.className);
97630
97627
  return (React.createElement("div", { style: { display: 'content' }, "data-theme": this.props.theme !== 'dark' ? null : 'dark-ui' },
97631
- 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)));
97632
97629
  };
97633
97630
  return Modal;
97634
97631
  }(React.Component));
@@ -127344,7 +127341,9 @@ var InputsDoc = /** @class */ (function (_super) {
127344
127341
  inlineLabel: false,
127345
127342
  required: true,
127346
127343
  disabled: false,
127347
- invalid: false
127344
+ invalid: false,
127345
+ value: '',
127346
+ value2: '',
127348
127347
  };
127349
127348
  return _this;
127350
127349
  }
@@ -127352,7 +127351,7 @@ var InputsDoc = /** @class */ (function (_super) {
127352
127351
  var _this = this;
127353
127352
  return (React.createElement("section", { className: 'docs-page__container' },
127354
127353
  React.createElement("h2", { className: 'docs-page__h2' }, "Select"),
127355
- React.createElement(Markup.ReactMarkupCodePreview, null, "\n <Select value={value} required={true}>\n <Option>Option 1</Option>\n <Option>Option 2</Option>\n </Select>\n "),
127354
+ React.createElement(Markup.ReactMarkupCodePreview, null, "\n <Select\n value={this.state.value}\n onChange={(value) => {\n this.setState({\n value: value,\n })\n }}\n >\n <Option>Option 1</Option>\n <Option>Option 2</Option>\n </Select>\n "),
127356
127355
  React.createElement("p", { className: 'docs-page__paragraph' }),
127357
127356
  React.createElement(Markup.ReactMarkup, null,
127358
127357
  React.createElement(Markup.ReactMarkupPreview, null,
@@ -127364,34 +127363,35 @@ var InputsDoc = /** @class */ (function (_super) {
127364
127363
  React.createElement(app_typescript_1.Checkbox, { checked: this.state.invalid, label: { text: 'Invalid input' }, onChange: function (value) { _this.setState({ invalid: value }); } }),
127365
127364
  React.createElement(app_typescript_1.Checkbox, { checked: this.state.inlineLabel, label: { text: 'Label positioned inline' }, onChange: function (value) { _this.setState({ inlineLabel: value }); } }))),
127366
127365
  React.createElement("div", { className: 'form__row' },
127367
- React.createElement(app_typescript_1.Select, { label: 'Select label', value: 'Option 2', error: 'This is error message', info: 'This is some hint message', inlineLabel: this.state.inlineLabel, required: this.state.required, disabled: this.state.disabled, invalid: this.state.invalid, tabindex: 0, onChange: function (value) { console.log(value); } },
127366
+ React.createElement(app_typescript_1.Select, { value: this.state.value, label: 'Select label', error: 'This is error message', info: 'This is some hint message', inlineLabel: this.state.inlineLabel, required: this.state.required, disabled: this.state.disabled, invalid: this.state.invalid, tabindex: 0, onChange: function (value) {
127367
+ _this.setState({
127368
+ value: value,
127369
+ });
127370
+ } },
127368
127371
  React.createElement(app_typescript_1.Option, null, "Option 1"),
127369
127372
  React.createElement(app_typescript_1.Option, null, "Option 2"))),
127370
127373
  React.createElement("p", { className: "docs-page__paragraph" }, "// Boxed with hidden label"),
127371
127374
  React.createElement("div", { className: 'form__row' },
127372
- React.createElement(app_typescript_1.Select, { label: 'Select label', value: 'Option 2', boxedStyle: true, labelHidden: true, error: 'This is error message', info: 'This is some hint message', inlineLabel: this.state.inlineLabel, required: this.state.required, disabled: this.state.disabled, invalid: this.state.invalid, tabindex: 0, onChange: function (value) { console.log(value); } },
127373
- React.createElement(app_typescript_1.Option, null, "Option 1"),
127374
- React.createElement(app_typescript_1.Option, null, "Option 2"))),
127375
- React.createElement("div", { className: 'form__row' },
127376
- React.createElement(app_typescript_1.Select, { label: 'Select label', value: 'Option 2', boxedStyle: true, labelHidden: true, size: 'large', error: 'This is error message', info: 'This is some hint message', inlineLabel: this.state.inlineLabel, required: this.state.required, disabled: this.state.disabled, invalid: this.state.invalid, tabindex: 0, onChange: function (value) { console.log(value); } },
127377
- React.createElement(app_typescript_1.Option, null, "Option 1"),
127378
- React.createElement(app_typescript_1.Option, null, "Option 2"))),
127379
- React.createElement("div", { className: 'form__row' },
127380
- React.createElement(app_typescript_1.Select, { label: 'Select label', value: 'Option 2', boxedStyle: true, labelHidden: true, size: 'x-large', error: 'This is error message', info: 'This is some hint message', inlineLabel: this.state.inlineLabel, required: this.state.required, disabled: this.state.disabled, invalid: this.state.invalid, tabindex: 0, onChange: function (value) { console.log(value); } },
127375
+ React.createElement(app_typescript_1.Select, { value: this.state.value2, label: 'Select label', labelHidden: true, error: 'This is error message', info: 'This is some hint message', tabindex: 0, onChange: function (value) {
127376
+ _this.setState({
127377
+ value2: value,
127378
+ });
127379
+ } },
127381
127380
  React.createElement(app_typescript_1.Option, null, "Option 1"),
127382
127381
  React.createElement(app_typescript_1.Option, null, "Option 2"))))),
127383
- React.createElement(Markup.ReactMarkupCode, null, "\n <Select label='Select label'\n value='Option 2'\n error='This is error message'\n info='This is some hint message'\n inlineLabel={false}\n required={true}\n disabled={false}\n invalid={false}\n onChange={(value) => {}}>\n <Option value=\"option-1\">Option 1</option>\n <Option value=\"option-2\">Option 2</option>\n </Select>\n ")),
127382
+ React.createElement(Markup.ReactMarkupCode, null, "\n <Select\n value={this.state.value}\n label='Select label'\n error='This is error message'\n info='This is some hint message'\n inlineLabel={this.state.inlineLabel}\n required={this.state.required}\n disabled={this.state.disabled}\n invalid={this.state.invalid}\n tabindex={0}\n onChange={(value) => {\n this.setState({\n value: value,\n })\n }}\n >\n <Option>Option 1</Option>\n <Option>Option 2</Option>\n </Select>\n ")),
127384
127383
  React.createElement("h3", { className: 'docs-page__h3' }, "Props"),
127385
127384
  React.createElement(app_typescript_1.PropsList, null,
127386
127385
  React.createElement(app_typescript_1.Prop, { name: 'value', isRequired: false, type: 'string', default: '/', description: 'Item value' }),
127387
- React.createElement(app_typescript_1.Prop, { name: 'label', isRequired: false, type: 'string', default: '/', description: 'Input label' }),
127388
- React.createElement(app_typescript_1.Prop, { name: 'info', isRequired: false, type: 'string', default: '/', description: 'Hint text' }),
127389
- React.createElement(app_typescript_1.Prop, { name: 'error', isRequired: false, type: 'string', default: '/', description: 'Error text' }),
127386
+ React.createElement(app_typescript_1.Prop, { name: 'label', isRequired: false, type: 'string', default: '/', description: 'Label of component' }),
127387
+ React.createElement(app_typescript_1.Prop, { name: 'info', isRequired: false, type: 'string', default: '/', description: 'Info message of component' }),
127388
+ React.createElement(app_typescript_1.Prop, { name: 'error', isRequired: false, type: 'string', default: '/', description: 'Error message of component' }),
127390
127389
  React.createElement(app_typescript_1.Prop, { name: 'inlineLabel', isRequired: false, type: 'boolean', default: 'false', description: 'Position labels as inline' }),
127391
127390
  React.createElement(app_typescript_1.Prop, { name: 'required', isRequired: false, type: 'boolean', default: 'false', description: 'Mark field as required' }),
127392
127391
  React.createElement(app_typescript_1.Prop, { name: 'disabled', isRequired: false, type: 'boolean', default: 'false', description: 'Mark field as disabled' }),
127393
127392
  React.createElement(app_typescript_1.Prop, { name: 'invalid', isRequired: false, type: 'boolean', default: 'false', description: 'Mark field as invalid' }),
127394
- React.createElement(app_typescript_1.Prop, { name: 'tabindex', isRequired: false, type: 'number', default: '/', description: 'Indicates an element can be focused on, and determines how that focus is handled.' }))));
127393
+ React.createElement(app_typescript_1.Prop, { name: 'tabindex', isRequired: false, type: 'number', default: '/', description: 'Indicates an element can be focused on, and determines how that focus is handled.' }),
127394
+ React.createElement(app_typescript_1.Prop, { name: 'onChange', isRequired: true, type: 'Function', default: '/', description: 'Callback to invoke when value changes.' }))));
127395
127395
  };
127396
127396
  return InputsDoc;
127397
127397
  }(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.9","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/react/Selects.tsx CHANGED
@@ -9,6 +9,8 @@ interface IState {
9
9
  required: boolean;
10
10
  disabled: boolean;
11
11
  invalid: boolean;
12
+ value: string;
13
+ value2: string;
12
14
  }
13
15
 
14
16
  export default class InputsDoc extends React.Component<{}, IState> {
@@ -18,7 +20,9 @@ export default class InputsDoc extends React.Component<{}, IState> {
18
20
  inlineLabel: false,
19
21
  required: true,
20
22
  disabled: false,
21
- invalid: false
23
+ invalid: false,
24
+ value: '',
25
+ value2: '',
22
26
  }
23
27
  }
24
28
 
@@ -28,7 +32,14 @@ export default class InputsDoc extends React.Component<{}, IState> {
28
32
 
29
33
  <h2 className='docs-page__h2'>Select</h2>
30
34
  <Markup.ReactMarkupCodePreview>{`
31
- <Select value={value} required={true}>
35
+ <Select
36
+ value={this.state.value}
37
+ onChange={(value) => {
38
+ this.setState({
39
+ value: value,
40
+ })
41
+ }}
42
+ >
32
43
  <Option>Option 1</Option>
33
44
  <Option>Option 2</Option>
34
45
  </Select>
@@ -48,8 +59,9 @@ export default class InputsDoc extends React.Component<{}, IState> {
48
59
  </div>
49
60
 
50
61
  <div className='form__row'>
51
- <Select label='Select label'
52
- value='Option 2'
62
+ <Select
63
+ value={this.state.value}
64
+ label='Select label'
53
65
  error='This is error message'
54
66
  info='This is some hint message'
55
67
  inlineLabel={this.state.inlineLabel}
@@ -57,7 +69,12 @@ export default class InputsDoc extends React.Component<{}, IState> {
57
69
  disabled={this.state.disabled}
58
70
  invalid={this.state.invalid}
59
71
  tabindex={0}
60
- onChange={(value) => { console.log(value) }}>
72
+ onChange={(value) => {
73
+ this.setState({
74
+ value: value,
75
+ })
76
+ }}
77
+ >
61
78
  <Option>Option 1</Option>
62
79
  <Option>Option 2</Option>
63
80
  </Select>
@@ -65,73 +82,45 @@ export default class InputsDoc extends React.Component<{}, IState> {
65
82
 
66
83
  <p className="docs-page__paragraph">// Boxed with hidden label</p>
67
84
  <div className='form__row'>
68
- <Select label='Select label'
69
- value='Option 2'
70
- boxedStyle
85
+ <Select
86
+ value={this.state.value2}
87
+ label='Select label'
71
88
  labelHidden
72
89
  error='This is error message'
73
90
  info='This is some hint message'
74
- inlineLabel={this.state.inlineLabel}
75
- required={this.state.required}
76
- disabled={this.state.disabled}
77
- invalid={this.state.invalid}
78
91
  tabindex={0}
79
- onChange={(value) => { console.log(value) }}>
80
- <Option>Option 1</Option>
81
- <Option>Option 2</Option>
92
+ onChange={(value) => {
93
+ this.setState({
94
+ value2: value,
95
+ })
96
+ }}
97
+ >
98
+ <Option>Option 1</Option>
99
+ <Option>Option 2</Option>
82
100
  </Select>
83
- </div>
84
- <div className='form__row'>
85
- <Select label='Select label'
86
- value='Option 2'
87
- boxedStyle
88
- labelHidden
89
- size='large'
90
- error='This is error message'
91
- info='This is some hint message'
92
- inlineLabel={this.state.inlineLabel}
93
- required={this.state.required}
94
- disabled={this.state.disabled}
95
- invalid={this.state.invalid}
96
- tabindex={0}
97
- onChange={(value) => { console.log(value) }}>
98
- <Option>Option 1</Option>
99
- <Option>Option 2</Option>
100
- </Select>
101
- </div>
102
- <div className='form__row'>
103
- <Select label='Select label'
104
- value='Option 2'
105
- boxedStyle
106
- labelHidden
107
- size='x-large'
108
- error='This is error message'
109
- info='This is some hint message'
110
- inlineLabel={this.state.inlineLabel}
111
- required={this.state.required}
112
- disabled={this.state.disabled}
113
- invalid={this.state.invalid}
114
- tabindex={0}
115
- onChange={(value) => { console.log(value) }}>
116
- <Option>Option 1</Option>
117
- <Option>Option 2</Option>
118
- </Select>
119
- </div>
101
+ </div>
120
102
  </div>
121
103
 
122
104
  </Markup.ReactMarkupPreview>
123
105
  <Markup.ReactMarkupCode>{`
124
- <Select label='Select label'
125
- value='Option 2'
106
+ <Select
107
+ value={this.state.value}
108
+ label='Select label'
126
109
  error='This is error message'
127
110
  info='This is some hint message'
128
- inlineLabel={false}
129
- required={true}
130
- disabled={false}
131
- invalid={false}
132
- onChange={(value) => {}}>
133
- <Option value="option-1">Option 1</option>
134
- <Option value="option-2">Option 2</option>
111
+ inlineLabel={this.state.inlineLabel}
112
+ required={this.state.required}
113
+ disabled={this.state.disabled}
114
+ invalid={this.state.invalid}
115
+ tabindex={0}
116
+ onChange={(value) => {
117
+ this.setState({
118
+ value: value,
119
+ })
120
+ }}
121
+ >
122
+ <Option>Option 1</Option>
123
+ <Option>Option 2</Option>
135
124
  </Select>
136
125
  `}</Markup.ReactMarkupCode>
137
126
  </Markup.ReactMarkup>
@@ -139,14 +128,15 @@ export default class InputsDoc extends React.Component<{}, IState> {
139
128
  <h3 className='docs-page__h3'>Props</h3>
140
129
  <PropsList>
141
130
  <Prop name='value' isRequired={false} type='string' default='/' description='Item value' />
142
- <Prop name='label' isRequired={false} type='string' default='/' description='Input label' />
143
- <Prop name='info' isRequired={false} type='string' default='/' description='Hint text' />
144
- <Prop name='error' isRequired={false} type='string' default='/' description='Error text' />
131
+ <Prop name='label' isRequired={false} type='string' default='/' description='Label of component' />
132
+ <Prop name='info' isRequired={false} type='string' default='/' description='Info message of component' />
133
+ <Prop name='error' isRequired={false} type='string' default='/' description='Error message of component' />
145
134
  <Prop name='inlineLabel' isRequired={false} type='boolean' default='false' description='Position labels as inline' />
146
135
  <Prop name='required' isRequired={false} type='boolean' default='false' description='Mark field as required' />
147
136
  <Prop name='disabled' isRequired={false} type='boolean' default='false' description='Mark field as disabled' />
148
137
  <Prop name='invalid' isRequired={false} type='boolean' default='false' description='Mark field as invalid' />
149
138
  <Prop name='tabindex' isRequired={false} type='number' default='/' description='Indicates an element can be focused on, and determines how that focus is handled.' />
139
+ <Prop name='onChange' isRequired={true} type='Function' default='/' description='Callback to invoke when value changes.'/>
150
140
  </PropsList>
151
141
  </section>
152
142
  )
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();
@@ -65701,29 +65701,26 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
65701
65701
  Object.defineProperty(exports, "__esModule", { value: true });
65702
65702
  exports.Option = exports.Select = void 0;
65703
65703
  var React = __importStar(__webpack_require__(0));
65704
- // import classNames from 'classnames';
65705
65704
  var react_id_generator_1 = __importDefault(__webpack_require__(7));
65706
65705
  var Form_1 = __webpack_require__(12);
65707
65706
  var Select = /** @class */ (function (_super) {
65708
65707
  __extends(Select, _super);
65709
65708
  function Select(props) {
65710
- var _a, _b;
65709
+ var _a;
65711
65710
  var _this = _super.call(this, props) || this;
65712
65711
  _this.htmlId = (0, react_id_generator_1.default)();
65713
65712
  _this.state = {
65714
- value: (_a = _this.props.value) !== null && _a !== void 0 ? _a : '',
65715
- invalid: (_b = _this.props.invalid) !== null && _b !== void 0 ? _b : false,
65713
+ invalid: (_a = _this.props.invalid) !== null && _a !== void 0 ? _a : false,
65716
65714
  };
65717
65715
  _this.handleChange = _this.handleChange.bind(_this);
65718
65716
  return _this;
65719
65717
  }
65720
65718
  Select.prototype.handleChange = function (event) {
65721
- this.setState({ value: event.target.value });
65722
65719
  this.props.onChange(event.target.value);
65723
65720
  };
65724
65721
  Select.prototype.render = function () {
65725
65722
  return (React.createElement(Form_1.InputWrapper, { label: this.props.label, error: this.props.error, required: this.props.required, disabled: this.props.disabled, invalid: this.state.invalid, info: this.props.info, inlineLabel: this.props.inlineLabel, labelHidden: this.props.labelHidden, fullWidth: this.props.fullWidth, htmlId: this.htmlId, tabindex: this.props.tabindex },
65726
- React.createElement("select", { className: 'sd-input__select', id: this.htmlId, value: this.state.value, "aria-describedby": this.htmlId, tabIndex: this.props.tabindex, onChange: this.handleChange, disabled: this.props.disabled }, this.props.children)));
65723
+ React.createElement("select", { className: 'sd-input__select', id: this.htmlId, value: this.props.value, "aria-describedby": this.htmlId, tabIndex: this.props.tabindex, onChange: this.handleChange, disabled: this.props.disabled }, this.props.children)));
65727
65724
  };
65728
65725
  return Select;
65729
65726
  }(React.Component));
@@ -96889,7 +96886,7 @@ var Modal = /** @class */ (function (_super) {
96889
96886
  _a["p-dialog-content--".concat(this.props.contentPadding)] = this.props.contentPadding,
96890
96887
  _a), this.props.className);
96891
96888
  return (React.createElement("div", { style: { display: 'content' }, "data-theme": this.props.theme !== 'dark' ? null : 'dark-ui' },
96892
- 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)));
96893
96890
  };
96894
96891
  return Modal;
96895
96892
  }(React.Component));
package/examples/pages/react/Selects.tsx CHANGED
@@ -9,6 +9,8 @@ interface IState {
9
9
  required: boolean;
10
10
  disabled: boolean;
11
11
  invalid: boolean;
12
+ value: string;
13
+ value2: string;
12
14
  }
13
15
 
14
16
  export default class InputsDoc extends React.Component<{}, IState> {
@@ -18,7 +20,9 @@ export default class InputsDoc extends React.Component<{}, IState> {
18
20
  inlineLabel: false,
19
21
  required: true,
20
22
  disabled: false,
21
- invalid: false
23
+ invalid: false,
24
+ value: '',
25
+ value2: '',
22
26
  }
23
27
  }
24
28
 
@@ -28,7 +32,14 @@ export default class InputsDoc extends React.Component<{}, IState> {
28
32
 
29
33
  <h2 className='docs-page__h2'>Select</h2>
30
34
  <Markup.ReactMarkupCodePreview>{`
31
- <Select value={value} required={true}>
35
+ <Select
36
+ value={this.state.value}
37
+ onChange={(value) => {
38
+ this.setState({
39
+ value: value,
40
+ })
41
+ }}
42
+ >
32
43
  <Option>Option 1</Option>
33
44
  <Option>Option 2</Option>
34
45
  </Select>
@@ -48,8 +59,9 @@ export default class InputsDoc extends React.Component<{}, IState> {
48
59
  </div>
49
60
 
50
61
  <div className='form__row'>
51
- <Select label='Select label'
52
- value='Option 2'
62
+ <Select
63
+ value={this.state.value}
64
+ label='Select label'
53
65
  error='This is error message'
54
66
  info='This is some hint message'
55
67
  inlineLabel={this.state.inlineLabel}
@@ -57,7 +69,12 @@ export default class InputsDoc extends React.Component<{}, IState> {
57
69
  disabled={this.state.disabled}
58
70
  invalid={this.state.invalid}
59
71
  tabindex={0}
60
- onChange={(value) => { console.log(value) }}>
72
+ onChange={(value) => {
73
+ this.setState({
74
+ value: value,
75
+ })
76
+ }}
77
+ >
61
78
  <Option>Option 1</Option>
62
79
  <Option>Option 2</Option>
63
80
  </Select>
@@ -65,73 +82,45 @@ export default class InputsDoc extends React.Component<{}, IState> {
65
82
 
66
83
  <p className="docs-page__paragraph">// Boxed with hidden label</p>
67
84
  <div className='form__row'>
68
- <Select label='Select label'
69
- value='Option 2'
70
- boxedStyle
85
+ <Select
86
+ value={this.state.value2}
87
+ label='Select label'
71
88
  labelHidden
72
89
  error='This is error message'
73
90
  info='This is some hint message'
74
- inlineLabel={this.state.inlineLabel}
75
- required={this.state.required}
76
- disabled={this.state.disabled}
77
- invalid={this.state.invalid}
78
91
  tabindex={0}
79
- onChange={(value) => { console.log(value) }}>
80
- <Option>Option 1</Option>
81
- <Option>Option 2</Option>
92
+ onChange={(value) => {
93
+ this.setState({
94
+ value2: value,
95
+ })
96
+ }}
97
+ >
98
+ <Option>Option 1</Option>
99
+ <Option>Option 2</Option>
82
100
  </Select>
83
- </div>
84
- <div className='form__row'>
85
- <Select label='Select label'
86
- value='Option 2'
87
- boxedStyle
88
- labelHidden
89
- size='large'
90
- error='This is error message'
91
- info='This is some hint message'
92
- inlineLabel={this.state.inlineLabel}
93
- required={this.state.required}
94
- disabled={this.state.disabled}
95
- invalid={this.state.invalid}
96
- tabindex={0}
97
- onChange={(value) => { console.log(value) }}>
98
- <Option>Option 1</Option>
99
- <Option>Option 2</Option>
100
- </Select>
101
- </div>
102
- <div className='form__row'>
103
- <Select label='Select label'
104
- value='Option 2'
105
- boxedStyle
106
- labelHidden
107
- size='x-large'
108
- error='This is error message'
109
- info='This is some hint message'
110
- inlineLabel={this.state.inlineLabel}
111
- required={this.state.required}
112
- disabled={this.state.disabled}
113
- invalid={this.state.invalid}
114
- tabindex={0}
115
- onChange={(value) => { console.log(value) }}>
116
- <Option>Option 1</Option>
117
- <Option>Option 2</Option>
118
- </Select>
119
- </div>
101
+ </div>
120
102
  </div>
121
103
 
122
104
  </Markup.ReactMarkupPreview>
123
105
  <Markup.ReactMarkupCode>{`
124
- <Select label='Select label'
125
- value='Option 2'
106
+ <Select
107
+ value={this.state.value}
108
+ label='Select label'
126
109
  error='This is error message'
127
110
  info='This is some hint message'
128
- inlineLabel={false}
129
- required={true}
130
- disabled={false}
131
- invalid={false}
132
- onChange={(value) => {}}>
133
- <Option value="option-1">Option 1</option>
134
- <Option value="option-2">Option 2</option>
111
+ inlineLabel={this.state.inlineLabel}
112
+ required={this.state.required}
113
+ disabled={this.state.disabled}
114
+ invalid={this.state.invalid}
115
+ tabindex={0}
116
+ onChange={(value) => {
117
+ this.setState({
118
+ value: value,
119
+ })
120
+ }}
121
+ >
122
+ <Option>Option 1</Option>
123
+ <Option>Option 2</Option>
135
124
  </Select>
136
125
  `}</Markup.ReactMarkupCode>
137
126
  </Markup.ReactMarkup>
@@ -139,14 +128,15 @@ export default class InputsDoc extends React.Component<{}, IState> {
139
128
  <h3 className='docs-page__h3'>Props</h3>
140
129
  <PropsList>
141
130
  <Prop name='value' isRequired={false} type='string' default='/' description='Item value' />
142
- <Prop name='label' isRequired={false} type='string' default='/' description='Input label' />
143
- <Prop name='info' isRequired={false} type='string' default='/' description='Hint text' />
144
- <Prop name='error' isRequired={false} type='string' default='/' description='Error text' />
131
+ <Prop name='label' isRequired={false} type='string' default='/' description='Label of component' />
132
+ <Prop name='info' isRequired={false} type='string' default='/' description='Info message of component' />
133
+ <Prop name='error' isRequired={false} type='string' default='/' description='Error message of component' />
145
134
  <Prop name='inlineLabel' isRequired={false} type='boolean' default='false' description='Position labels as inline' />
146
135
  <Prop name='required' isRequired={false} type='boolean' default='false' description='Mark field as required' />
147
136
  <Prop name='disabled' isRequired={false} type='boolean' default='false' description='Mark field as disabled' />
148
137
  <Prop name='invalid' isRequired={false} type='boolean' default='false' description='Mark field as invalid' />
149
138
  <Prop name='tabindex' isRequired={false} type='number' default='/' description='Indicates an element can be focused on, and determines how that focus is handled.' />
139
+ <Prop name='onChange' isRequired={true} type='Function' default='/' description='Callback to invoke when value changes.'/>
150
140
  </PropsList>
151
141
  </section>
152
142
  )
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "superdesk-ui-framework",
3
- "version": "3.0.9",
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/Select.d.ts CHANGED
@@ -12,13 +12,8 @@ interface ISelect {
12
12
  tabindex?: number;
13
13
  fullWidth?: boolean;
14
14
  onChange(newValue: string): void;
15
- boxedStyle?: boolean;
16
- boxedLable?: boolean;
17
- placeholder?: string;
18
- size?: 'medium' | 'large' | 'x-large';
19
15
  }
20
16
  interface IState {
21
- value: string;
22
17
  invalid: boolean;
23
18
  }
24
19
  declare class Select extends React.Component<ISelect, IState> {
package/react/components/Select.js CHANGED
@@ -39,29 +39,26 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
39
39
  Object.defineProperty(exports, "__esModule", { value: true });
40
40
  exports.Option = exports.Select = void 0;
41
41
  var React = __importStar(require("react"));
42
- // import classNames from 'classnames';
43
42
  var react_id_generator_1 = __importDefault(require("react-id-generator"));
44
43
  var Form_1 = require("./Form");
45
44
  var Select = /** @class */ (function (_super) {
46
45
  __extends(Select, _super);
47
46
  function Select(props) {
48
- var _a, _b;
47
+ var _a;
49
48
  var _this = _super.call(this, props) || this;
50
49
  _this.htmlId = (0, react_id_generator_1.default)();
51
50
  _this.state = {
52
- value: (_a = _this.props.value) !== null && _a !== void 0 ? _a : '',
53
- invalid: (_b = _this.props.invalid) !== null && _b !== void 0 ? _b : false,
51
+ invalid: (_a = _this.props.invalid) !== null && _a !== void 0 ? _a : false,
54
52
  };
55
53
  _this.handleChange = _this.handleChange.bind(_this);
56
54
  return _this;
57
55
  }
58
56
  Select.prototype.handleChange = function (event) {
59
- this.setState({ value: event.target.value });
60
57
  this.props.onChange(event.target.value);
61
58
  };
62
59
  Select.prototype.render = function () {
63
60
  return (React.createElement(Form_1.InputWrapper, { label: this.props.label, error: this.props.error, required: this.props.required, disabled: this.props.disabled, invalid: this.state.invalid, info: this.props.info, inlineLabel: this.props.inlineLabel, labelHidden: this.props.labelHidden, fullWidth: this.props.fullWidth, htmlId: this.htmlId, tabindex: this.props.tabindex },
64
- React.createElement("select", { className: 'sd-input__select', id: this.htmlId, value: this.state.value, "aria-describedby": this.htmlId, tabIndex: this.props.tabindex, onChange: this.handleChange, disabled: this.props.disabled }, this.props.children)));
61
+ React.createElement("select", { className: 'sd-input__select', id: this.htmlId, value: this.props.value, "aria-describedby": this.htmlId, tabIndex: this.props.tabindex, onChange: this.handleChange, disabled: this.props.disabled }, this.props.children)));
65
62
  };
66
63
  return Select;
67
64
  }(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();