superdesk-ui-framework 3.0.10 → 3.0.12

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/Switch.tsx +37 -23
  4. package/app-typescript/components/TreeSelect.tsx +2 -0
  5. package/dist/examples.bundle.js +51 -40
  6. package/dist/react/Switch.tsx +32 -15
  7. package/dist/superdesk-ui.bundle.js +24 -24
  8. package/examples/pages/react/Switch.tsx +32 -15
  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/Switch.d.ts +6 -5
  14. package/react/components/Switch.js +13 -13
  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/Switch.tsx CHANGED
@@ -3,12 +3,14 @@ import classNames from 'classnames';
3
3
  import nextId from "react-id-generator";
4
4
  import { Tooltip } from './Tooltip';
5
5
 
6
+ interface ILabel {
7
+ content: string | ((id: string) => React.ReactNode);
8
+ side?: 'left' | 'right'; // defaults to 'right'
9
+ hidden?: boolean;
10
+ }
11
+
6
12
  interface IProps {
7
- label: {
8
- text: string,
9
- side?: 'left' | 'right', // defaults to 'right'
10
- hidden?: boolean,
11
- };
13
+ label: ILabel;
12
14
  value: boolean;
13
15
  disabled?: boolean;
14
16
  toolTipFlow?: 'top' | 'left' | 'right' | 'down';
@@ -19,6 +21,7 @@ interface IProps {
19
21
  export class Switch extends React.PureComponent<IProps> {
20
22
  constructor(props: IProps) {
21
23
  super(props);
24
+
22
25
  this.onClick = this.onClick.bind(this);
23
26
  }
24
27
 
@@ -38,33 +41,44 @@ export class Switch extends React.PureComponent<IProps> {
38
41
  'disabled': this.props.disabled,
39
42
  });
40
43
 
41
- if (this.props.label.hidden) {
44
+ const checkboxInput = (
45
+ <span
46
+ role="checkbox"
47
+ id={this.htmlId}
48
+ className={classes}
49
+ aria-checked={this.props.value}
50
+ aria-disabled={this.props.disabled}
51
+ tabIndex={0}
52
+ onClick={this.onClick}
53
+ >
54
+ <span className="inner" />
55
+ </span>
56
+ );
57
+
58
+ // if external label is used it can't be hidden
59
+ if (this.props.label.hidden && typeof this.props.label.content === 'string') {
42
60
  return (
43
- <Tooltip text={this.props.label.text}
61
+ <Tooltip
62
+ text={this.props.label.content}
44
63
  flow={this.props.toolTipFlow}
45
- appendToBody={this.props.toolTipAppend}>
64
+ appendToBody={this.props.toolTipAppend}
65
+ >
46
66
  <span className="sd-switch__wrapper" tabIndex={-1}>
47
- {this.props.label && this.props.label.side === 'left' ?
48
- <label htmlFor={this.htmlId}>{this.props.label.text}</label> : null}
49
- <span id={this.htmlId} role="checkbox" className={classes} aria-checked={this.props.value}
50
- aria-disabled={this.props.disabled} onClick={this.onClick} tabIndex={0}>
51
- <span className="inner" />
52
- </span>
53
- <label className='a11y-only' htmlFor={this.htmlId}>{this.props.label.text}</label>
67
+ {checkboxInput}
68
+ <label className='a11y-only' htmlFor={this.htmlId}>{this.props.label.content}</label>
54
69
  </span>
55
70
  </Tooltip>
56
71
  );
57
72
  } else {
73
+ const labelContent = typeof this.props.label.content === 'string'
74
+ ? <label htmlFor={this.htmlId}>{this.props.label.content}</label>
75
+ : this.props.label.content(this.htmlId);
76
+
58
77
  return (
59
78
  <span className="sd-switch__wrapper" tabIndex={-1}>
60
- {this.props.label && this.props.label.side === 'left' ?
61
- <label htmlFor={this.htmlId}>{this.props.label.text}</label> : null}
62
- <span id={this.htmlId} role="checkbox" className={classes} aria-checked={this.props.value}
63
- aria-disabled={this.props.disabled} onClick={this.onClick} tabIndex={0}>
64
- <span className="inner" />
65
- </span>
66
- {this.props.label && this.props.label.side !== 'left' ?
67
- <label htmlFor={this.htmlId}>{this.props.label.text}</label> : null}
79
+ {this.props.label.side === 'left' ? labelContent : null}
80
+ {checkboxInput}
81
+ {this.props.label.side !== 'left' ? labelContent : null}
68
82
  </span>
69
83
  );
70
84
  }
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();
@@ -75840,23 +75840,23 @@ var Switch = /** @class */ (function (_super) {
75840
75840
  'checked': this.props.value,
75841
75841
  'disabled': this.props.disabled,
75842
75842
  });
75843
- if (this.props.label.hidden) {
75844
- return (React.createElement(Tooltip_1.Tooltip, { text: this.props.label.text, flow: this.props.toolTipFlow, appendToBody: this.props.toolTipAppend },
75843
+ var checkboxInput = (React.createElement("span", { role: "checkbox", id: this.htmlId, className: classes, "aria-checked": this.props.value, "aria-disabled": this.props.disabled, tabIndex: 0, onClick: this.onClick },
75844
+ React.createElement("span", { className: "inner" })));
75845
+ // if external label is used it can't be hidden
75846
+ if (this.props.label.hidden && typeof this.props.label.content === 'string') {
75847
+ return (React.createElement(Tooltip_1.Tooltip, { text: this.props.label.content, flow: this.props.toolTipFlow, appendToBody: this.props.toolTipAppend },
75845
75848
  React.createElement("span", { className: "sd-switch__wrapper", tabIndex: -1 },
75846
- this.props.label && this.props.label.side === 'left' ?
75847
- React.createElement("label", { htmlFor: this.htmlId }, this.props.label.text) : null,
75848
- React.createElement("span", { id: this.htmlId, role: "checkbox", className: classes, "aria-checked": this.props.value, "aria-disabled": this.props.disabled, onClick: this.onClick, tabIndex: 0 },
75849
- React.createElement("span", { className: "inner" })),
75850
- React.createElement("label", { className: 'a11y-only', htmlFor: this.htmlId }, this.props.label.text))));
75849
+ checkboxInput,
75850
+ React.createElement("label", { className: 'a11y-only', htmlFor: this.htmlId }, this.props.label.content))));
75851
75851
  }
75852
75852
  else {
75853
+ var labelContent = typeof this.props.label.content === 'string'
75854
+ ? React.createElement("label", { htmlFor: this.htmlId }, this.props.label.content)
75855
+ : this.props.label.content(this.htmlId);
75853
75856
  return (React.createElement("span", { className: "sd-switch__wrapper", tabIndex: -1 },
75854
- this.props.label && this.props.label.side === 'left' ?
75855
- React.createElement("label", { htmlFor: this.htmlId }, this.props.label.text) : null,
75856
- React.createElement("span", { id: this.htmlId, role: "checkbox", className: classes, "aria-checked": this.props.value, "aria-disabled": this.props.disabled, onClick: this.onClick, tabIndex: 0 },
75857
- React.createElement("span", { className: "inner" })),
75858
- this.props.label && this.props.label.side !== 'left' ?
75859
- React.createElement("label", { htmlFor: this.htmlId }, this.props.label.text) : null));
75857
+ this.props.label.side === 'left' ? labelContent : null,
75858
+ checkboxInput,
75859
+ this.props.label.side !== 'left' ? labelContent : null));
75860
75860
  }
75861
75861
  };
75862
75862
  return Switch;
@@ -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));
@@ -130260,6 +130260,7 @@ var SwitchDoc = /** @class */ (function (_super) {
130260
130260
  value9: false,
130261
130261
  value10: true,
130262
130262
  value11: false,
130263
+ value12: false,
130263
130264
  };
130264
130265
  return _this;
130265
130266
  }
@@ -130273,15 +130274,18 @@ var SwitchDoc = /** @class */ (function (_super) {
130273
130274
  React.createElement(Markup.ReactMarkupPreview, null,
130274
130275
  React.createElement("p", { className: "docs-page__paragraph docs-page__paragraph--topMarginL" }, "// Label on the right (default)"),
130275
130276
  React.createElement("div", { className: "form__row" },
130276
- React.createElement(app_typescript_1.Switch, { label: { text: 'Switch label right' }, value: this.state.value1, onChange: function (value) { return _this.setState(function () { return ({ value1: value }); }); } })),
130277
+ React.createElement(app_typescript_1.Switch, { label: { content: 'Switch label right' }, value: this.state.value1, onChange: function (value) { return _this.setState(function () { return ({ value1: value }); }); } })),
130277
130278
  React.createElement("p", { className: "docs-page__paragraph docs-page__paragraph--topMarginL" }, "// Labels on the left"),
130278
130279
  React.createElement("p", { className: "docs-page__paragraph--small" }, "This option should be used only in cases when the switch is aligned to the right."),
130279
130280
  React.createElement("div", { className: "form__row" },
130280
- React.createElement(app_typescript_1.Switch, { label: { text: 'Label on left', side: 'left' }, value: this.state.value2, onChange: function (value) { return _this.setState(function () { return ({ value2: value }); }); } })),
130281
+ React.createElement(app_typescript_1.Switch, { label: { content: 'Label on left', side: 'left' }, value: this.state.value2, onChange: function (value) { return _this.setState(function () { return ({ value2: value }); }); } })),
130281
130282
  React.createElement("p", { className: "docs-page__paragraph docs-page__paragraph--topMarginL" }, "// Disabled"),
130282
130283
  React.createElement("div", { className: "form__row" },
130283
- React.createElement(app_typescript_1.Switch, { label: { text: 'Label on right with disabled state' }, value: this.state.value3, onChange: function (value) { return _this.setState(function () { return ({ value3: value }); }); }, disabled: true }))),
130284
- React.createElement(Markup.ReactMarkupCode, null, "\n // Label on the right (default)\n <Switch label={{text:'Switch label right'}} value={this.state.value1} onChange={(value) => this.setState(() => ({ value1: value }))} />\n \n // Labels on the left\n <Switch label={{text:'Label on left', side: 'left'}} value={this.state.value2} onChange={(value) => this.setState(() => ({ value2: value }))} />\n\n // Disabled\n <Switch label={{text:'Label on right with disabled state'}} value={this.state.value3} onChange={(value) => this.setState(() => ({ value3: value }))} disabled={true} />\n ")),
130284
+ React.createElement(app_typescript_1.Switch, { label: { content: 'Label on right with disabled state' }, value: this.state.value3, onChange: function (value) { return _this.setState(function () { return ({ value3: value }); }); }, disabled: true })),
130285
+ React.createElement("p", { className: "docs-page__paragraph docs-page__paragraph--topMarginL" }, "// External label"),
130286
+ React.createElement("div", { className: "form__row" },
130287
+ React.createElement(app_typescript_1.Switch, { label: { content: function () { return React.createElement("label", null, "External label"); } }, value: this.state.value12, onChange: function (value) { return _this.setState(function () { return ({ value12: value }); }); } }))),
130288
+ React.createElement(Markup.ReactMarkupCode, null, "\n // Label on the right (default)\n <Switch label={{text:'Switch label right'}} value={this.state.value1} onChange={(value) => this.setState(() => ({ value1: value }))} />\n \n // Labels on the left\n <Switch label={{text:'Label on left', side: 'left'}} value={this.state.value2} onChange={(value) => this.setState(() => ({ value2: value }))} />\n\n // Disabled\n <Switch label={{text:'Label on right with disabled state'}} value={this.state.value3} onChange={(value) => this.setState(() => ({ value3: value }))} disabled={true} />\n\n // External label\n <Switch label={{content:() => <label>External label</label>}} value={this.state.value12} onChange={(value) => this.setState(() => ({ value12: value }))} />\n ")),
130285
130289
  React.createElement("h3", { className: "docs-page__h3" }, "Switch groups"),
130286
130290
  React.createElement("p", { className: "docs-page__paragraph" },
130287
130291
  React.createElement("code", null, "SwitchGroup"),
@@ -130297,9 +130301,9 @@ var SwitchDoc = /** @class */ (function (_super) {
130297
130301
  React.createElement("p", { className: "docs-page__paragraph" }, "// Vertical group (default)"),
130298
130302
  React.createElement("div", { className: 'form__row' },
130299
130303
  React.createElement(app_typescript_1.SwitchGroup, null,
130300
- React.createElement(app_typescript_1.Switch, { label: { text: 'Vertical Switch 1' }, value: this.state.value6, onChange: function (value) { return _this.setState(function () { return ({ value6: value }); }); } }),
130301
- React.createElement(app_typescript_1.Switch, { label: { text: 'Vertical Switch 2' }, value: this.state.value7, onChange: function (value) { return _this.setState(function () { return ({ value7: value }); }); } }),
130302
- React.createElement(app_typescript_1.Switch, { label: { text: 'Vertical Switch 3' }, value: this.state.value8, onChange: function (value) { return _this.setState(function () { return ({ value8: value }); }); } }))),
130304
+ React.createElement(app_typescript_1.Switch, { label: { content: 'Vertical Switch 1' }, value: this.state.value6, onChange: function (value) { return _this.setState(function () { return ({ value6: value }); }); } }),
130305
+ React.createElement(app_typescript_1.Switch, { label: { content: 'Vertical Switch 2' }, value: this.state.value7, onChange: function (value) { return _this.setState(function () { return ({ value7: value }); }); } }),
130306
+ React.createElement(app_typescript_1.Switch, { label: { content: 'Vertical Switch 3' }, value: this.state.value8, onChange: function (value) { return _this.setState(function () { return ({ value8: value }); }); } }))),
130303
130307
  React.createElement("p", { className: "docs-page__paragraph docs-page__paragraph--topMarginL" }, "// Vertical group with labels on the left"),
130304
130308
  React.createElement("p", { className: "docs-page__paragraph--small" },
130305
130309
  "This option should be used only in special cases and inside containers not wider than 400 pixels ",
@@ -130307,24 +130311,31 @@ var SwitchDoc = /** @class */ (function (_super) {
130307
130311
  "(e.g. menus, narrow modals or dialouges etc.). It should be used only in the combination with the labels on th eleft."),
130308
130312
  React.createElement("div", { className: 'form__row docs-page__test-helper-2', style: { width: '320px' } },
130309
130313
  React.createElement(app_typescript_1.SwitchGroup, { align: 'right' },
130310
- React.createElement(app_typescript_1.Switch, { label: { text: 'Vertical Switch 1', side: 'left' }, value: this.state.value9, onChange: function (value) { return _this.setState(function () { return ({ value9: value }); }); } }),
130311
- React.createElement(app_typescript_1.Switch, { label: { text: 'Vertical Switch 2', side: 'left' }, value: this.state.value10, onChange: function (value) { return _this.setState(function () { return ({ value10: value }); }); } }),
130312
- React.createElement(app_typescript_1.Switch, { label: { text: 'Vertical Switch 3', side: 'left' }, value: this.state.value11, onChange: function (value) { return _this.setState(function () { return ({ value11: value }); }); } }))),
130314
+ React.createElement(app_typescript_1.Switch, { label: { content: 'Vertical Switch 1', side: 'left' }, value: this.state.value9, onChange: function (value) { return _this.setState(function () { return ({ value9: value }); }); } }),
130315
+ React.createElement(app_typescript_1.Switch, { label: { content: 'Vertical Switch 2', side: 'left' }, value: this.state.value10, onChange: function (value) { return _this.setState(function () { return ({ value10: value }); }); } }),
130316
+ React.createElement(app_typescript_1.Switch, { label: { content: 'Vertical Switch 3', side: 'left' }, value: this.state.value11, onChange: function (value) { return _this.setState(function () { return ({ value11: value }); }); } }))),
130313
130317
  React.createElement("p", { className: "docs-page__paragraph docs-page__paragraph--topMarginL" }, "// Horizontal group"),
130314
130318
  React.createElement("p", { className: "docs-page__paragraph--small" }, "Use this option only if there are no more than two switches."),
130315
130319
  React.createElement("div", { className: 'form__row' },
130316
130320
  React.createElement(app_typescript_1.SwitchGroup, { orientation: 'horizontal' },
130317
- React.createElement(app_typescript_1.Switch, { label: { text: 'Horizontal Switch 1' }, value: this.state.value4, onChange: function (value) { return _this.setState(function () { return ({ value4: value }); }); } }),
130318
- React.createElement(app_typescript_1.Switch, { label: { text: 'Horizontal Switch 2' }, value: this.state.value5, onChange: function (value) { return _this.setState(function () { return ({ value5: value }); }); } })))),
130321
+ React.createElement(app_typescript_1.Switch, { label: { content: 'Horizontal Switch 1' }, value: this.state.value4, onChange: function (value) { return _this.setState(function () { return ({ value4: value }); }); } }),
130322
+ React.createElement(app_typescript_1.Switch, { label: { content: 'Horizontal Switch 2' }, value: this.state.value5, onChange: function (value) { return _this.setState(function () { return ({ value5: value }); }); } })))),
130319
130323
  React.createElement(Markup.ReactMarkupCode, null, "\n // Vertical group (default)\n <SwitchGroup>\n <Switch label={{text:'Vertical Switch 1'}} value={this.state.value6} onChange={(value) => this.setState(() => ({ value6: value }))} />\n <Switch label={{text:'Vertical Switch 2'}} value={this.state.value7} onChange={(value) => this.setState(() => ({ value7: value }))} />\n <Switch label={{text:'Vertical Switch 3'}} value={this.state.value8} onChange={(value) => this.setState(() => ({ value8: value }))} />\n </SwitchGroup>\n\n // Vertical group with labels on the left\n <SwitchGroup align='right'>\n <Switch label={{text:'Vertical Switch 1', side: 'left'}} value={this.state.value9} onChange={(value) => this.setState(() => ({ value9: value }))} />\n <Switch label={{text:'Vertical Switch 2', side: 'left'}} value={this.state.value10} onChange={(value) => this.setState(() => ({ value10: value }))} />\n <Switch label={{text:'Vertical Switch 3', side: 'left'}} value={this.state.value11} onChange={(value) => this.setState(() => ({ value11: value }))} />\n </SwitchGroup>\n\n // Horizontal group\n <SwitchGroup orientation='horizontal'>\n <Switch label={{text:'Horizontal Switch 1'}} value={this.state.value4} onChange={(value) => this.setState(() => ({ value4: value }))} />\n <Switch label={{text:'Horizontal Switch 2'}} value={this.state.value5} onChange={(value) => this.setState(() => ({ value5: value }))} />\n </SwitchGroup>\n ")),
130320
130324
  React.createElement(Components.GraphicButtonsGroup, null,
130321
130325
  React.createElement(Components.GraphicButton, { graphic: 'design', text: 'Switch usage guidelines', smallText: 'Design guidelines', link: '#/design/switch' })),
130322
130326
  React.createElement("h3", { className: "docs-page__h3" }, "Props"),
130323
130327
  React.createElement("p", { className: "docs-page__paragraph" }, "Switch"),
130324
130328
  React.createElement(app_typescript_1.PropsList, null,
130325
- React.createElement(app_typescript_1.Prop, { name: 'label text', isRequired: true, type: 'string', default: '/', description: 'Label text value.' }),
130326
- React.createElement(app_typescript_1.Prop, { name: 'label side', isRequired: false, type: 'left | right', default: 'right', description: 'Position of label relative to the button.' }),
130327
- React.createElement(app_typescript_1.Prop, { name: 'disabled', isRequired: false, type: 'boolean', default: 'false', description: 'The disabled state of t.' })),
130329
+ React.createElement(app_typescript_1.Prop, { name: 'label', isRequired: true, type: 'object', default: '/', description: 'Label value.' }),
130330
+ React.createElement(app_typescript_1.Prop, { name: 'disabled', isRequired: false, type: 'boolean', default: 'false', description: 'If true field is disabled.' }),
130331
+ React.createElement(app_typescript_1.Prop, { name: 'toolTipFlow', isRequired: false, type: "top | left | right | down", default: 'false', description: 'Position of tooltip.' }),
130332
+ React.createElement(app_typescript_1.Prop, { name: 'toolTipAppend', isRequired: false, type: 'boolean', default: 'false', description: 'Tooltip append.' }),
130333
+ React.createElement(app_typescript_1.Prop, { name: 'onChange', isRequired: false, type: 'function', default: 'false', description: 'Function onChange' })),
130334
+ React.createElement("p", { className: "docs-page__paragraph" }, "Label props"),
130335
+ React.createElement(app_typescript_1.PropsList, null,
130336
+ React.createElement(app_typescript_1.Prop, { name: 'content', isRequired: true, type: 'string or function', default: '/', description: 'Label value.' }),
130337
+ React.createElement(app_typescript_1.Prop, { name: 'side', isRequired: false, type: 'left | right', default: 'right', description: 'Position of label relative to the button.' }),
130338
+ React.createElement(app_typescript_1.Prop, { name: 'hidden', isRequired: false, type: 'boolean', default: 'false', description: 'If true label is not shown on display.' })),
130328
130339
  React.createElement("p", { className: "docs-page__paragraph" }, "SwitchGroup"),
130329
130340
  React.createElement(app_typescript_1.PropsList, null,
130330
130341
  React.createElement(app_typescript_1.Prop, { name: 'orientation', isRequired: false, type: 'vertical | horizontal', default: 'vertical', description: 'Orientation of Switch components inside the group.' }),
@@ -139318,7 +139329,7 @@ exports.WithSizeObserverDocs = WithSizeObserverDocs;
139318
139329
  /* 653 */
139319
139330
  /***/ (function(module, exports) {
139320
139331
 
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"}}
139332
+ module.exports = {"name":"superdesk-ui-framework","version":"3.0.12","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
139333
 
139323
139334
  /***/ }),
139324
139335
  /* 654 */
package/dist/react/Switch.tsx CHANGED
@@ -2,7 +2,7 @@ import * as React from 'react';
2
2
  import * as Markup from '../../js/react';
3
3
  import * as Components from '../playgrounds/react-playgrounds/components/Index';
4
4
 
5
- import { Switch, SwitchGroup, Prop, PropsList } from '../../../app-typescript';
5
+ import { Switch, SwitchGroup, Prop, PropsList, Label } from '../../../app-typescript';
6
6
 
7
7
  interface IState {
8
8
  value1: boolean;
@@ -16,6 +16,7 @@ interface IState {
16
16
  value9: boolean;
17
17
  value10: boolean;
18
18
  value11: boolean;
19
+ value12: boolean;
19
20
  }
20
21
 
21
22
  export default class SwitchDoc extends React.Component<{}, IState> {
@@ -34,6 +35,7 @@ export default class SwitchDoc extends React.Component<{}, IState> {
34
35
  value9: false,
35
36
  value10: true,
36
37
  value11: false,
38
+ value12: false,
37
39
  };
38
40
  }
39
41
 
@@ -50,16 +52,20 @@ export default class SwitchDoc extends React.Component<{}, IState> {
50
52
  <Markup.ReactMarkupPreview>
51
53
  <p className="docs-page__paragraph docs-page__paragraph--topMarginL">// Label on the right (default)</p>
52
54
  <div className="form__row">
53
- <Switch label={{text:'Switch label right'}} value={this.state.value1} onChange={(value) => this.setState(() => ({ value1: value }))} />
55
+ <Switch label={{content:'Switch label right'}} value={this.state.value1} onChange={(value) => this.setState(() => ({ value1: value }))} />
54
56
  </div>
55
57
  <p className="docs-page__paragraph docs-page__paragraph--topMarginL">// Labels on the left</p>
56
58
  <p className="docs-page__paragraph--small">This option should be used only in cases when the switch is aligned to the right.</p>
57
59
  <div className="form__row">
58
- <Switch label={{text:'Label on left', side: 'left'}} value={this.state.value2} onChange={(value) => this.setState(() => ({ value2: value }))} />
60
+ <Switch label={{content:'Label on left', side: 'left'}} value={this.state.value2} onChange={(value) => this.setState(() => ({ value2: value }))} />
59
61
  </div>
60
62
  <p className="docs-page__paragraph docs-page__paragraph--topMarginL">// Disabled</p>
61
63
  <div className="form__row">
62
- <Switch label={{text:'Label on right with disabled state'}} value={this.state.value3} onChange={(value) => this.setState(() => ({ value3: value }))} disabled={true} />
64
+ <Switch label={{content:'Label on right with disabled state'}} value={this.state.value3} onChange={(value) => this.setState(() => ({ value3: value }))} disabled />
65
+ </div>
66
+ <p className="docs-page__paragraph docs-page__paragraph--topMarginL">// External label</p>
67
+ <div className="form__row">
68
+ <Switch label={{content:() => <label>External label</label>}} value={this.state.value12} onChange={(value) => this.setState(() => ({ value12: value }))} />
63
69
  </div>
64
70
  </Markup.ReactMarkupPreview>
65
71
  <Markup.ReactMarkupCode>{`
@@ -71,6 +77,9 @@ export default class SwitchDoc extends React.Component<{}, IState> {
71
77
 
72
78
  // Disabled
73
79
  <Switch label={{text:'Label on right with disabled state'}} value={this.state.value3} onChange={(value) => this.setState(() => ({ value3: value }))} disabled={true} />
80
+
81
+ // External label
82
+ <Switch label={{content:() => <label>External label</label>}} value={this.state.value12} onChange={(value) => this.setState(() => ({ value12: value }))} />
74
83
  `}
75
84
  </Markup.ReactMarkupCode>
76
85
  </Markup.ReactMarkup>
@@ -85,9 +94,9 @@ export default class SwitchDoc extends React.Component<{}, IState> {
85
94
  <p className="docs-page__paragraph">// Vertical group (default)</p>
86
95
  <div className='form__row'>
87
96
  <SwitchGroup>
88
- <Switch label={{text:'Vertical Switch 1'}} value={this.state.value6} onChange={(value) => this.setState(() => ({ value6: value }))} />
89
- <Switch label={{text:'Vertical Switch 2'}} value={this.state.value7} onChange={(value) => this.setState(() => ({ value7: value }))} />
90
- <Switch label={{text:'Vertical Switch 3'}} value={this.state.value8} onChange={(value) => this.setState(() => ({ value8: value }))} />
97
+ <Switch label={{content:'Vertical Switch 1'}} value={this.state.value6} onChange={(value) => this.setState(() => ({ value6: value }))} />
98
+ <Switch label={{content:'Vertical Switch 2'}} value={this.state.value7} onChange={(value) => this.setState(() => ({ value7: value }))} />
99
+ <Switch label={{content:'Vertical Switch 3'}} value={this.state.value8} onChange={(value) => this.setState(() => ({ value8: value }))} />
91
100
  </SwitchGroup>
92
101
  </div>
93
102
  <p className="docs-page__paragraph docs-page__paragraph--topMarginL">// Vertical group with labels on the left</p>
@@ -95,17 +104,17 @@ export default class SwitchDoc extends React.Component<{}, IState> {
95
104
  (e.g. menus, narrow modals or dialouges etc.). It should be used only in the combination with the labels on th eleft.</p>
96
105
  <div className='form__row docs-page__test-helper-2' style={{width: '320px'}}>
97
106
  <SwitchGroup align='right'>
98
- <Switch label={{text:'Vertical Switch 1', side: 'left'}} value={this.state.value9} onChange={(value) => this.setState(() => ({ value9: value }))} />
99
- <Switch label={{text:'Vertical Switch 2', side: 'left'}} value={this.state.value10} onChange={(value) => this.setState(() => ({ value10: value }))} />
100
- <Switch label={{text:'Vertical Switch 3', side: 'left'}} value={this.state.value11} onChange={(value) => this.setState(() => ({ value11: value }))} />
107
+ <Switch label={{content:'Vertical Switch 1', side: 'left'}} value={this.state.value9} onChange={(value) => this.setState(() => ({ value9: value }))} />
108
+ <Switch label={{content:'Vertical Switch 2', side: 'left'}} value={this.state.value10} onChange={(value) => this.setState(() => ({ value10: value }))} />
109
+ <Switch label={{content:'Vertical Switch 3', side: 'left'}} value={this.state.value11} onChange={(value) => this.setState(() => ({ value11: value }))} />
101
110
  </SwitchGroup>
102
111
  </div>
103
112
  <p className="docs-page__paragraph docs-page__paragraph--topMarginL">// Horizontal group</p>
104
113
  <p className="docs-page__paragraph--small">Use this option only if there are no more than two switches.</p>
105
114
  <div className='form__row'>
106
115
  <SwitchGroup orientation='horizontal'>
107
- <Switch label={{text:'Horizontal Switch 1'}} value={this.state.value4} onChange={(value) => this.setState(() => ({ value4: value }))} />
108
- <Switch label={{text:'Horizontal Switch 2'}} value={this.state.value5} onChange={(value) => this.setState(() => ({ value5: value }))} />
116
+ <Switch label={{content:'Horizontal Switch 1'}} value={this.state.value4} onChange={(value) => this.setState(() => ({ value4: value }))} />
117
+ <Switch label={{content:'Horizontal Switch 2'}} value={this.state.value5} onChange={(value) => this.setState(() => ({ value5: value }))} />
109
118
  </SwitchGroup>
110
119
  </div>
111
120
  </Markup.ReactMarkupPreview>
@@ -140,9 +149,17 @@ export default class SwitchDoc extends React.Component<{}, IState> {
140
149
  <h3 className="docs-page__h3">Props</h3>
141
150
  <p className="docs-page__paragraph">Switch</p>
142
151
  <PropsList>
143
- <Prop name='label text' isRequired={true} type='string' default='/' description='Label text value.'/>
144
- <Prop name='label side' isRequired={false} type='left | right' default='right' description='Position of label relative to the button.'/>
145
- <Prop name='disabled' isRequired={false} type='boolean' default='false' description='The disabled state of t.'/>
152
+ <Prop name='label' isRequired={true} type='object' default='/' description='Label value.'/>
153
+ <Prop name='disabled' isRequired={false} type='boolean' default='false' description='If true field is disabled.'/>
154
+ <Prop name='toolTipFlow' isRequired={false} type="top | left | right | down" default='false' description='Position of tooltip.'/>
155
+ <Prop name='toolTipAppend' isRequired={false} type='boolean' default='false' description='Tooltip append.'/>
156
+ <Prop name='onChange' isRequired={false} type='function' default='false' description='Function onChange'/>
157
+ </PropsList>
158
+ <p className="docs-page__paragraph">Label props</p>
159
+ <PropsList>
160
+ <Prop name='content' isRequired={true} type='string or function' default='/' description='Label value.'/>
161
+ <Prop name='side' isRequired={false} type='left | right' default='right' description='Position of label relative to the button.'/>
162
+ <Prop name='hidden' isRequired={false} type='boolean' default='false' description='If true label is not shown on display.'/>
146
163
  </PropsList>
147
164
  <p className="docs-page__paragraph">SwitchGroup</p>
148
165
  <PropsList>
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();
@@ -75101,23 +75101,23 @@ var Switch = /** @class */ (function (_super) {
75101
75101
  'checked': this.props.value,
75102
75102
  'disabled': this.props.disabled,
75103
75103
  });
75104
- if (this.props.label.hidden) {
75105
- return (React.createElement(Tooltip_1.Tooltip, { text: this.props.label.text, flow: this.props.toolTipFlow, appendToBody: this.props.toolTipAppend },
75104
+ var checkboxInput = (React.createElement("span", { role: "checkbox", id: this.htmlId, className: classes, "aria-checked": this.props.value, "aria-disabled": this.props.disabled, tabIndex: 0, onClick: this.onClick },
75105
+ React.createElement("span", { className: "inner" })));
75106
+ // if external label is used it can't be hidden
75107
+ if (this.props.label.hidden && typeof this.props.label.content === 'string') {
75108
+ return (React.createElement(Tooltip_1.Tooltip, { text: this.props.label.content, flow: this.props.toolTipFlow, appendToBody: this.props.toolTipAppend },
75106
75109
  React.createElement("span", { className: "sd-switch__wrapper", tabIndex: -1 },
75107
- this.props.label && this.props.label.side === 'left' ?
75108
- React.createElement("label", { htmlFor: this.htmlId }, this.props.label.text) : null,
75109
- React.createElement("span", { id: this.htmlId, role: "checkbox", className: classes, "aria-checked": this.props.value, "aria-disabled": this.props.disabled, onClick: this.onClick, tabIndex: 0 },
75110
- React.createElement("span", { className: "inner" })),
75111
- React.createElement("label", { className: 'a11y-only', htmlFor: this.htmlId }, this.props.label.text))));
75110
+ checkboxInput,
75111
+ React.createElement("label", { className: 'a11y-only', htmlFor: this.htmlId }, this.props.label.content))));
75112
75112
  }
75113
75113
  else {
75114
+ var labelContent = typeof this.props.label.content === 'string'
75115
+ ? React.createElement("label", { htmlFor: this.htmlId }, this.props.label.content)
75116
+ : this.props.label.content(this.htmlId);
75114
75117
  return (React.createElement("span", { className: "sd-switch__wrapper", tabIndex: -1 },
75115
- this.props.label && this.props.label.side === 'left' ?
75116
- React.createElement("label", { htmlFor: this.htmlId }, this.props.label.text) : null,
75117
- React.createElement("span", { id: this.htmlId, role: "checkbox", className: classes, "aria-checked": this.props.value, "aria-disabled": this.props.disabled, onClick: this.onClick, tabIndex: 0 },
75118
- React.createElement("span", { className: "inner" })),
75119
- this.props.label && this.props.label.side !== 'left' ?
75120
- React.createElement("label", { htmlFor: this.htmlId }, this.props.label.text) : null));
75118
+ this.props.label.side === 'left' ? labelContent : null,
75119
+ checkboxInput,
75120
+ this.props.label.side !== 'left' ? labelContent : null));
75121
75121
  }
75122
75122
  };
75123
75123
  return Switch;
@@ -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/examples/pages/react/Switch.tsx CHANGED
@@ -2,7 +2,7 @@ import * as React from 'react';
2
2
  import * as Markup from '../../js/react';
3
3
  import * as Components from '../playgrounds/react-playgrounds/components/Index';
4
4
 
5
- import { Switch, SwitchGroup, Prop, PropsList } from '../../../app-typescript';
5
+ import { Switch, SwitchGroup, Prop, PropsList, Label } from '../../../app-typescript';
6
6
 
7
7
  interface IState {
8
8
  value1: boolean;
@@ -16,6 +16,7 @@ interface IState {
16
16
  value9: boolean;
17
17
  value10: boolean;
18
18
  value11: boolean;
19
+ value12: boolean;
19
20
  }
20
21
 
21
22
  export default class SwitchDoc extends React.Component<{}, IState> {
@@ -34,6 +35,7 @@ export default class SwitchDoc extends React.Component<{}, IState> {
34
35
  value9: false,
35
36
  value10: true,
36
37
  value11: false,
38
+ value12: false,
37
39
  };
38
40
  }
39
41
 
@@ -50,16 +52,20 @@ export default class SwitchDoc extends React.Component<{}, IState> {
50
52
  <Markup.ReactMarkupPreview>
51
53
  <p className="docs-page__paragraph docs-page__paragraph--topMarginL">// Label on the right (default)</p>
52
54
  <div className="form__row">
53
- <Switch label={{text:'Switch label right'}} value={this.state.value1} onChange={(value) => this.setState(() => ({ value1: value }))} />
55
+ <Switch label={{content:'Switch label right'}} value={this.state.value1} onChange={(value) => this.setState(() => ({ value1: value }))} />
54
56
  </div>
55
57
  <p className="docs-page__paragraph docs-page__paragraph--topMarginL">// Labels on the left</p>
56
58
  <p className="docs-page__paragraph--small">This option should be used only in cases when the switch is aligned to the right.</p>
57
59
  <div className="form__row">
58
- <Switch label={{text:'Label on left', side: 'left'}} value={this.state.value2} onChange={(value) => this.setState(() => ({ value2: value }))} />
60
+ <Switch label={{content:'Label on left', side: 'left'}} value={this.state.value2} onChange={(value) => this.setState(() => ({ value2: value }))} />
59
61
  </div>
60
62
  <p className="docs-page__paragraph docs-page__paragraph--topMarginL">// Disabled</p>
61
63
  <div className="form__row">
62
- <Switch label={{text:'Label on right with disabled state'}} value={this.state.value3} onChange={(value) => this.setState(() => ({ value3: value }))} disabled={true} />
64
+ <Switch label={{content:'Label on right with disabled state'}} value={this.state.value3} onChange={(value) => this.setState(() => ({ value3: value }))} disabled />
65
+ </div>
66
+ <p className="docs-page__paragraph docs-page__paragraph--topMarginL">// External label</p>
67
+ <div className="form__row">
68
+ <Switch label={{content:() => <label>External label</label>}} value={this.state.value12} onChange={(value) => this.setState(() => ({ value12: value }))} />
63
69
  </div>
64
70
  </Markup.ReactMarkupPreview>
65
71
  <Markup.ReactMarkupCode>{`
@@ -71,6 +77,9 @@ export default class SwitchDoc extends React.Component<{}, IState> {
71
77
 
72
78
  // Disabled
73
79
  <Switch label={{text:'Label on right with disabled state'}} value={this.state.value3} onChange={(value) => this.setState(() => ({ value3: value }))} disabled={true} />
80
+
81
+ // External label
82
+ <Switch label={{content:() => <label>External label</label>}} value={this.state.value12} onChange={(value) => this.setState(() => ({ value12: value }))} />
74
83
  `}
75
84
  </Markup.ReactMarkupCode>
76
85
  </Markup.ReactMarkup>
@@ -85,9 +94,9 @@ export default class SwitchDoc extends React.Component<{}, IState> {
85
94
  <p className="docs-page__paragraph">// Vertical group (default)</p>
86
95
  <div className='form__row'>
87
96
  <SwitchGroup>
88
- <Switch label={{text:'Vertical Switch 1'}} value={this.state.value6} onChange={(value) => this.setState(() => ({ value6: value }))} />
89
- <Switch label={{text:'Vertical Switch 2'}} value={this.state.value7} onChange={(value) => this.setState(() => ({ value7: value }))} />
90
- <Switch label={{text:'Vertical Switch 3'}} value={this.state.value8} onChange={(value) => this.setState(() => ({ value8: value }))} />
97
+ <Switch label={{content:'Vertical Switch 1'}} value={this.state.value6} onChange={(value) => this.setState(() => ({ value6: value }))} />
98
+ <Switch label={{content:'Vertical Switch 2'}} value={this.state.value7} onChange={(value) => this.setState(() => ({ value7: value }))} />
99
+ <Switch label={{content:'Vertical Switch 3'}} value={this.state.value8} onChange={(value) => this.setState(() => ({ value8: value }))} />
91
100
  </SwitchGroup>
92
101
  </div>
93
102
  <p className="docs-page__paragraph docs-page__paragraph--topMarginL">// Vertical group with labels on the left</p>
@@ -95,17 +104,17 @@ export default class SwitchDoc extends React.Component<{}, IState> {
95
104
  (e.g. menus, narrow modals or dialouges etc.). It should be used only in the combination with the labels on th eleft.</p>
96
105
  <div className='form__row docs-page__test-helper-2' style={{width: '320px'}}>
97
106
  <SwitchGroup align='right'>
98
- <Switch label={{text:'Vertical Switch 1', side: 'left'}} value={this.state.value9} onChange={(value) => this.setState(() => ({ value9: value }))} />
99
- <Switch label={{text:'Vertical Switch 2', side: 'left'}} value={this.state.value10} onChange={(value) => this.setState(() => ({ value10: value }))} />
100
- <Switch label={{text:'Vertical Switch 3', side: 'left'}} value={this.state.value11} onChange={(value) => this.setState(() => ({ value11: value }))} />
107
+ <Switch label={{content:'Vertical Switch 1', side: 'left'}} value={this.state.value9} onChange={(value) => this.setState(() => ({ value9: value }))} />
108
+ <Switch label={{content:'Vertical Switch 2', side: 'left'}} value={this.state.value10} onChange={(value) => this.setState(() => ({ value10: value }))} />
109
+ <Switch label={{content:'Vertical Switch 3', side: 'left'}} value={this.state.value11} onChange={(value) => this.setState(() => ({ value11: value }))} />
101
110
  </SwitchGroup>
102
111
  </div>
103
112
  <p className="docs-page__paragraph docs-page__paragraph--topMarginL">// Horizontal group</p>
104
113
  <p className="docs-page__paragraph--small">Use this option only if there are no more than two switches.</p>
105
114
  <div className='form__row'>
106
115
  <SwitchGroup orientation='horizontal'>
107
- <Switch label={{text:'Horizontal Switch 1'}} value={this.state.value4} onChange={(value) => this.setState(() => ({ value4: value }))} />
108
- <Switch label={{text:'Horizontal Switch 2'}} value={this.state.value5} onChange={(value) => this.setState(() => ({ value5: value }))} />
116
+ <Switch label={{content:'Horizontal Switch 1'}} value={this.state.value4} onChange={(value) => this.setState(() => ({ value4: value }))} />
117
+ <Switch label={{content:'Horizontal Switch 2'}} value={this.state.value5} onChange={(value) => this.setState(() => ({ value5: value }))} />
109
118
  </SwitchGroup>
110
119
  </div>
111
120
  </Markup.ReactMarkupPreview>
@@ -140,9 +149,17 @@ export default class SwitchDoc extends React.Component<{}, IState> {
140
149
  <h3 className="docs-page__h3">Props</h3>
141
150
  <p className="docs-page__paragraph">Switch</p>
142
151
  <PropsList>
143
- <Prop name='label text' isRequired={true} type='string' default='/' description='Label text value.'/>
144
- <Prop name='label side' isRequired={false} type='left | right' default='right' description='Position of label relative to the button.'/>
145
- <Prop name='disabled' isRequired={false} type='boolean' default='false' description='The disabled state of t.'/>
152
+ <Prop name='label' isRequired={true} type='object' default='/' description='Label value.'/>
153
+ <Prop name='disabled' isRequired={false} type='boolean' default='false' description='If true field is disabled.'/>
154
+ <Prop name='toolTipFlow' isRequired={false} type="top | left | right | down" default='false' description='Position of tooltip.'/>
155
+ <Prop name='toolTipAppend' isRequired={false} type='boolean' default='false' description='Tooltip append.'/>
156
+ <Prop name='onChange' isRequired={false} type='function' default='false' description='Function onChange'/>
157
+ </PropsList>
158
+ <p className="docs-page__paragraph">Label props</p>
159
+ <PropsList>
160
+ <Prop name='content' isRequired={true} type='string or function' default='/' description='Label value.'/>
161
+ <Prop name='side' isRequired={false} type='left | right' default='right' description='Position of label relative to the button.'/>
162
+ <Prop name='hidden' isRequired={false} type='boolean' default='false' description='If true label is not shown on display.'/>
146
163
  </PropsList>
147
164
  <p className="docs-page__paragraph">SwitchGroup</p>
148
165
  <PropsList>
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.12",
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/Switch.d.ts CHANGED
@@ -1,10 +1,11 @@
1
1
  import * as React from 'react';
2
+ interface ILabel {
3
+ content: string | ((id: string) => React.ReactNode);
4
+ side?: 'left' | 'right';
5
+ hidden?: boolean;
6
+ }
2
7
  interface IProps {
3
- label: {
4
- text: string;
5
- side?: 'left' | 'right';
6
- hidden?: boolean;
7
- };
8
+ label: ILabel;
8
9
  value: boolean;
9
10
  disabled?: boolean;
10
11
  toolTipFlow?: 'top' | 'left' | 'right' | 'down';
package/react/components/Switch.js CHANGED
@@ -61,23 +61,23 @@ var Switch = /** @class */ (function (_super) {
61
61
  'checked': this.props.value,
62
62
  'disabled': this.props.disabled,
63
63
  });
64
- if (this.props.label.hidden) {
65
- return (React.createElement(Tooltip_1.Tooltip, { text: this.props.label.text, flow: this.props.toolTipFlow, appendToBody: this.props.toolTipAppend },
64
+ var checkboxInput = (React.createElement("span", { role: "checkbox", id: this.htmlId, className: classes, "aria-checked": this.props.value, "aria-disabled": this.props.disabled, tabIndex: 0, onClick: this.onClick },
65
+ React.createElement("span", { className: "inner" })));
66
+ // if external label is used it can't be hidden
67
+ if (this.props.label.hidden && typeof this.props.label.content === 'string') {
68
+ return (React.createElement(Tooltip_1.Tooltip, { text: this.props.label.content, flow: this.props.toolTipFlow, appendToBody: this.props.toolTipAppend },
66
69
  React.createElement("span", { className: "sd-switch__wrapper", tabIndex: -1 },
67
- this.props.label && this.props.label.side === 'left' ?
68
- React.createElement("label", { htmlFor: this.htmlId }, this.props.label.text) : null,
69
- React.createElement("span", { id: this.htmlId, role: "checkbox", className: classes, "aria-checked": this.props.value, "aria-disabled": this.props.disabled, onClick: this.onClick, tabIndex: 0 },
70
- React.createElement("span", { className: "inner" })),
71
- React.createElement("label", { className: 'a11y-only', htmlFor: this.htmlId }, this.props.label.text))));
70
+ checkboxInput,
71
+ React.createElement("label", { className: 'a11y-only', htmlFor: this.htmlId }, this.props.label.content))));
72
72
  }
73
73
  else {
74
+ var labelContent = typeof this.props.label.content === 'string'
75
+ ? React.createElement("label", { htmlFor: this.htmlId }, this.props.label.content)
76
+ : this.props.label.content(this.htmlId);
74
77
  return (React.createElement("span", { className: "sd-switch__wrapper", tabIndex: -1 },
75
- this.props.label && this.props.label.side === 'left' ?
76
- React.createElement("label", { htmlFor: this.htmlId }, this.props.label.text) : null,
77
- React.createElement("span", { id: this.htmlId, role: "checkbox", className: classes, "aria-checked": this.props.value, "aria-disabled": this.props.disabled, onClick: this.onClick, tabIndex: 0 },
78
- React.createElement("span", { className: "inner" })),
79
- this.props.label && this.props.label.side !== 'left' ?
80
- React.createElement("label", { htmlFor: this.htmlId }, this.props.label.text) : null));
78
+ this.props.label.side === 'left' ? labelContent : null,
79
+ checkboxInput,
80
+ this.props.label.side !== 'left' ? labelContent : null));
81
81
  }
82
82
  };
83
83
  return Switch;
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();