superdesk-ui-framework 3.0.1-beta.9 → 3.0.2

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 (160) hide show
  1. package/app/fonts/sd_icons.eot +0 -0
  2. package/app/fonts/sd_icons.svg +1 -0
  3. package/app/fonts/sd_icons.ttf +0 -0
  4. package/app/fonts/sd_icons.woff +0 -0
  5. package/app/scripts/toggleBoxNext.js +1 -1
  6. package/app/styles/_big-icon-font.scss +1 -1
  7. package/app/styles/_buttons.scss +11 -6
  8. package/app/styles/_content-divider.scss +63 -8
  9. package/app/styles/_helpers.scss +24 -1
  10. package/app/styles/_icon-font.scss +11 -10
  11. package/app/styles/_labels.scss +0 -1
  12. package/app/styles/_master-desk.scss +5 -4
  13. package/app/styles/_modals.scss +7 -3
  14. package/app/styles/_normalize.scss +4 -0
  15. package/app/styles/_sd-tag-input.scss +56 -2
  16. package/app/styles/_simple-list.scss +0 -2
  17. package/app/styles/_table-list.scss +116 -12
  18. package/app/styles/app.scss +3 -0
  19. package/app/styles/components/_list-item.scss +23 -16
  20. package/app/styles/components/_sd-collapse-box.scss +6 -6
  21. package/app/styles/components/_sd-comment-box.scss +8 -4
  22. package/app/styles/components/_sd-editor-popup.scss +4 -4
  23. package/app/styles/components/_sd-media-carousel.scss +37 -2
  24. package/app/styles/components/_sd-pagination.scss +41 -0
  25. package/app/styles/components/_sd-photo-preview.scss +2 -2
  26. package/app/styles/components/_subnav.scss +470 -470
  27. package/app/styles/design-tokens/_new-colors.scss +29 -12
  28. package/app/styles/dropdowns/_basic-dropdown.scss +6 -0
  29. package/app/styles/form-elements/_input-wrap.scss +138 -0
  30. package/app/styles/form-elements/_inputs.scss +230 -61
  31. package/app/styles/grids/_grid-layout.scss +13 -14
  32. package/app/styles/interface-elements/_side-panel.scss +1 -1
  33. package/app/styles/layout/_editor.scss +6 -0
  34. package/app/styles/menus/_sd-sidebar-menu.scss +1 -1
  35. package/app/styles/primereact/_pr-datepicker.scss +16 -2
  36. package/app/styles/primereact/_pr-dialog.scss +9 -0
  37. package/app/styles/primereact/_pr-menu.scss +6 -5
  38. package/app/styles/variables/_colors.scss +47 -47
  39. package/app/template/search-handler.html +2 -2
  40. package/app-typescript/components/ContentDivider.tsx +3 -0
  41. package/app-typescript/components/DatePicker.tsx +8 -9
  42. package/app-typescript/components/Dropdown.tsx +127 -82
  43. package/app-typescript/components/DurationInput.tsx +39 -14
  44. package/app-typescript/components/Form/FormLabel.tsx +8 -1
  45. package/app-typescript/components/Form/InputBase.tsx +12 -2
  46. package/app-typescript/components/Input.tsx +4 -4
  47. package/app-typescript/components/Label.tsx +17 -1
  48. package/app-typescript/components/Layouts/AuthoringFrame.tsx +2 -1
  49. package/app-typescript/components/Layouts/AuthoringFrameRightBar.tsx +21 -2
  50. package/app-typescript/components/Layouts/AuthoringInnerHeader.tsx +1 -1
  51. package/app-typescript/components/Layouts/AuthoringMain.tsx +4 -2
  52. package/app-typescript/components/Layouts/CoreLayout.tsx +3 -1
  53. package/app-typescript/components/Layouts/CoreLayoutMain.tsx +10 -1
  54. package/app-typescript/components/Lists/ContentList.tsx +64 -30
  55. package/app-typescript/components/Lists/TableList.tsx +255 -53
  56. package/app-typescript/components/Menu.tsx +2 -2
  57. package/app-typescript/components/Modal.tsx +6 -2
  58. package/app-typescript/components/MultiSelect.tsx +2 -2
  59. package/app-typescript/components/NavButton.tsx +2 -1
  60. package/app-typescript/components/Navigation/SideBarMenu.tsx +30 -4
  61. package/app-typescript/components/SearchBar.tsx +11 -3
  62. package/app-typescript/components/Spacer.tsx +87 -0
  63. package/app-typescript/components/TimePicker.tsx +2 -13
  64. package/app-typescript/components/TreeSelect.tsx +286 -180
  65. package/app-typescript/index.ts +1 -0
  66. package/dist/examples.bundle.css +110 -71
  67. package/dist/examples.bundle.js +24358 -22168
  68. package/dist/playgrounds/react-playgrounds/CoreLayout.tsx +505 -2
  69. package/dist/playgrounds/react-playgrounds/Index.tsx +1 -0
  70. package/dist/playgrounds/react-playgrounds/Multiedit.tsx +321 -0
  71. package/dist/playgrounds/react-playgrounds/RundownEditor.tsx +17 -19
  72. package/dist/playgrounds/react-playgrounds/Rundowns.tsx +22 -23
  73. package/dist/playgrounds/react-playgrounds/TestGround.tsx +226 -25
  74. package/dist/react/ContentDivider.tsx +22 -18
  75. package/dist/react/ContentList.tsx +188 -12
  76. package/dist/react/DatePicker.tsx +50 -2
  77. package/dist/react/Dropdowns.tsx +580 -48
  78. package/dist/react/DurationInput.tsx +7 -3
  79. package/dist/react/Inputs.tsx +1 -7
  80. package/dist/react/Modal.tsx +154 -22
  81. package/dist/react/MultiSelect.tsx +5 -5
  82. package/dist/react/NavButtons.tsx +31 -1
  83. package/dist/react/TableList.tsx +52 -139
  84. package/dist/react/Togglebox.tsx +1 -1
  85. package/dist/react/TreeSelect.tsx +167 -176
  86. package/dist/sd_icons.eot +0 -0
  87. package/dist/sd_icons.svg +1 -0
  88. package/dist/sd_icons.ttf +0 -0
  89. package/dist/sd_icons.woff +0 -0
  90. package/dist/superdesk-ui.bundle.css +1100 -407
  91. package/dist/superdesk-ui.bundle.js +6594 -4035
  92. package/dist/vendor.bundle.js +27 -27
  93. package/examples/css/docs-page.css +4 -4
  94. package/examples/index.js +4 -0
  95. package/examples/pages/playgrounds/react-playgrounds/CoreLayout.tsx +505 -2
  96. package/examples/pages/playgrounds/react-playgrounds/Index.tsx +1 -0
  97. package/examples/pages/playgrounds/react-playgrounds/Multiedit.tsx +321 -0
  98. package/examples/pages/playgrounds/react-playgrounds/RundownEditor.tsx +17 -19
  99. package/examples/pages/playgrounds/react-playgrounds/Rundowns.tsx +22 -23
  100. package/examples/pages/playgrounds/react-playgrounds/TestGround.tsx +226 -25
  101. package/examples/pages/react/ContentDivider.tsx +22 -18
  102. package/examples/pages/react/ContentList.tsx +188 -12
  103. package/examples/pages/react/DatePicker.tsx +50 -2
  104. package/examples/pages/react/Dropdowns.tsx +580 -48
  105. package/examples/pages/react/DurationInput.tsx +7 -3
  106. package/examples/pages/react/Inputs.tsx +1 -7
  107. package/examples/pages/react/Modal.tsx +154 -22
  108. package/examples/pages/react/MultiSelect.tsx +5 -5
  109. package/examples/pages/react/NavButtons.tsx +31 -1
  110. package/examples/pages/react/TableList.tsx +52 -139
  111. package/examples/pages/react/Togglebox.tsx +1 -1
  112. package/examples/pages/react/TreeSelect.tsx +167 -176
  113. package/package.json +3 -5
  114. package/react/components/ContentDivider.d.ts +1 -0
  115. package/react/components/ContentDivider.js +2 -0
  116. package/react/components/DatePicker.d.ts +2 -2
  117. package/react/components/DatePicker.js +3 -3
  118. package/react/components/Dropdown.d.ts +6 -5
  119. package/react/components/Dropdown.js +57 -30
  120. package/react/components/DurationInput.d.ts +1 -1
  121. package/react/components/DurationInput.js +46 -17
  122. package/react/components/Form/FormLabel.d.ts +4 -1
  123. package/react/components/Form/FormLabel.js +9 -3
  124. package/react/components/Form/InputBase.d.ts +0 -1
  125. package/react/components/Form/InputBase.js +15 -1
  126. package/react/components/Input.d.ts +3 -3
  127. package/react/components/Input.js +2 -1
  128. package/react/components/Label.d.ts +1 -0
  129. package/react/components/Label.js +17 -2
  130. package/react/components/Layouts/AuthoringFrame.d.ts +1 -0
  131. package/react/components/Layouts/AuthoringFrame.js +1 -1
  132. package/react/components/Layouts/AuthoringFrameRightBar.d.ts +9 -2
  133. package/react/components/Layouts/AuthoringFrameRightBar.js +14 -3
  134. package/react/components/Layouts/AuthoringInnerHeader.js +1 -1
  135. package/react/components/Layouts/AuthoringMain.js +1 -1
  136. package/react/components/Layouts/CoreLayout.d.ts +2 -0
  137. package/react/components/Layouts/CoreLayout.js +1 -1
  138. package/react/components/Layouts/CoreLayoutMain.d.ts +2 -0
  139. package/react/components/Layouts/CoreLayoutMain.js +8 -1
  140. package/react/components/Lists/ContentList.d.ts +6 -0
  141. package/react/components/Lists/ContentList.js +42 -16
  142. package/react/components/Lists/TableList.d.ts +30 -8
  143. package/react/components/Lists/TableList.js +127 -24
  144. package/react/components/Menu.js +1 -1
  145. package/react/components/Modal.d.ts +2 -0
  146. package/react/components/Modal.js +3 -3
  147. package/react/components/MultiSelect.d.ts +40 -0
  148. package/react/components/MultiSelect.js +73 -0
  149. package/react/components/NavButton.d.ts +1 -1
  150. package/react/components/Navigation/SideBarMenu.d.ts +6 -0
  151. package/react/components/Navigation/SideBarMenu.js +19 -2
  152. package/react/components/SearchBar.d.ts +1 -1
  153. package/react/components/SearchBar.js +15 -7
  154. package/react/components/TimePicker.d.ts +1 -5
  155. package/react/components/TimePicker.js +3 -7
  156. package/react/components/TreeSelect.d.ts +12 -5
  157. package/react/components/TreeSelect.js +189 -116
  158. package/react/index.d.ts +1 -0
  159. package/react/index.js +3 -0
  160. package/patches/@superdesk+primereact+5.0.2-4.patch +0 -66
@@ -24,16 +24,14 @@ var React = __importStar(require("react"));
24
24
  var ReactDOM = __importStar(require("react-dom"));
25
25
  var core_1 = require("@popperjs/core");
26
26
  var react_id_generator_1 = require("react-id-generator");
27
+ var DROPDOWN_ID_CONTAINER = "sd-dropdown-constainer";
27
28
  var Dropdown = function (_a) {
28
- var items = _a.items, header = _a.header, footer = _a.footer, children = _a.children, append = _a.append, align = _a.align;
29
+ var items = _a.items, header = _a.header, footer = _a.footer, children = _a.children, append = _a.append, align = _a.align, onChange = _a.onChange;
29
30
  var _b = React.useState(false), open = _b[0], setOpen = _b[1];
30
31
  var _c = React.useState(false), change = _c[0], setChange = _c[1];
31
32
  var menuID = (0, react_id_generator_1.useId)()[0];
32
- var DROPDOWN_ID = "react-placeholder";
33
33
  var ref = React.useRef(null);
34
- var refSubMenu = React.useRef(null);
35
34
  var buttonRef = React.useRef(null);
36
- var refButtonSubMenu = React.useRef(null);
37
35
  var headerElements = header === null || header === void 0 ? void 0 : header.map(function (el, index) {
38
36
  return each(el, index);
39
37
  });
@@ -44,11 +42,10 @@ var Dropdown = function (_a) {
44
42
  return each(el, index);
45
43
  });
46
44
  React.useEffect(function () {
47
- var existingElement = document.getElementById(DROPDOWN_ID);
45
+ var existingElement = document.getElementById(DROPDOWN_ID_CONTAINER);
48
46
  if (!existingElement) {
49
47
  var el = document.createElement("div");
50
- el.id = DROPDOWN_ID;
51
- // style placeholder
48
+ el.id = DROPDOWN_ID_CONTAINER;
52
49
  el.style.position = 'absolute';
53
50
  el.style.top = '0';
54
51
  el.style.left = '0';
@@ -63,7 +60,6 @@ var Dropdown = function (_a) {
63
60
  }
64
61
  setChange(true);
65
62
  }, [open]);
66
- // structure for append menu
67
63
  function createAppendMenu() {
68
64
  if (header && footer) {
69
65
  return (React.createElement("div", { className: 'dropdown__menu dropdown__menu--has-head-foot', id: menuID, role: 'menu', ref: ref },
@@ -85,7 +81,6 @@ var Dropdown = function (_a) {
85
81
  return (React.createElement("ul", { className: 'dropdown__menu ', id: menuID, role: 'menu', ref: ref }, dropdownElements));
86
82
  }
87
83
  }
88
- // toggle menu
89
84
  function toggleDisplay() {
90
85
  if (!open) {
91
86
  var menuRef_1;
@@ -134,15 +129,14 @@ var Dropdown = function (_a) {
134
129
  }
135
130
  }
136
131
  function addInPlaceholder() {
137
- var placeholder = document.getElementById(DROPDOWN_ID);
132
+ var placeholder = document.getElementById(DROPDOWN_ID_CONTAINER);
138
133
  var menu = createAppendMenu();
139
134
  if (open) {
140
135
  return ReactDOM.render(menu, placeholder);
141
136
  }
142
137
  else {
143
- var menuDOM = document.getElementById(menuID);
144
- if (menuDOM) {
145
- menuDOM.style.display = 'none';
138
+ if (placeholder) {
139
+ ReactDOM.unmountComponentAtNode(placeholder);
146
140
  }
147
141
  }
148
142
  }
@@ -152,20 +146,7 @@ var Dropdown = function (_a) {
152
146
  item['items'].forEach(function (el, key) {
153
147
  submenuItems_1.push(each(el, key));
154
148
  });
155
- return (React.createElement("li", { key: index },
156
- React.createElement("div", { className: 'dropdown' },
157
- React.createElement("button", { ref: refButtonSubMenu, className: 'dropdown__toggle dropdown-toggle', "aria-haspopup": "menu", tabIndex: 0, onMouseOver: function () {
158
- var subMenuRef = refSubMenu.current;
159
- var subToggleRef = refButtonSubMenu.current;
160
- if (subMenuRef && subToggleRef) {
161
- (0, core_1.createPopper)(subToggleRef, subMenuRef, {
162
- placement: 'right-start',
163
- });
164
- }
165
- }, onClick: item['onSelect'] },
166
- item['icon'] ? React.createElement("i", { className: 'icon-' + item['icon'] }) : null,
167
- item['label']),
168
- React.createElement("ul", { ref: refSubMenu, role: 'menu', className: 'dropdown__menu' }, submenuItems_1))));
149
+ return (React.createElement(DropdownItemWithSubmenu, { key: index, index: index, item: item, menuID: menuID, subMenuItems: submenuItems_1, onChange: onChange }));
169
150
  }
170
151
  else if (item['type'] === 'group') {
171
152
  var groupItems_1 = [];
@@ -181,7 +162,7 @@ var Dropdown = function (_a) {
181
162
  return (React.createElement("li", { className: "dropdown__menu-divider", key: index }));
182
163
  }
183
164
  else {
184
- return (React.createElement(DropdownItem, { key: index, label: item['label'], icon: item['icon'], active: item['active'], onSelect: item['onSelect'] }));
165
+ return (React.createElement(DropdownItem, { key: index, label: item['label'], icon: item['icon'], active: item['active'], onSelect: item['onSelect'], onChange: onChange }));
185
166
  }
186
167
  }
187
168
  return (React.createElement("div", { className: 'dropdown ' + (open ? 'open' : '') },
@@ -223,9 +204,55 @@ var Dropdown = function (_a) {
223
204
  };
224
205
  exports.Dropdown = Dropdown;
225
206
  var DropdownItem = function (_a) {
226
- var label = _a.label, icon = _a.icon, active = _a.active, onSelect = _a.onSelect;
207
+ var label = _a.label, icon = _a.icon, active = _a.active, onSelect = _a.onSelect, onChange = _a.onChange;
227
208
  return (React.createElement("li", { role: 'none', className: active ? 'dropdown__menu-item--active' : '' },
228
- React.createElement("button", { tabIndex: 0, role: 'menuitem', onClick: onSelect },
209
+ React.createElement("button", { tabIndex: 0, role: 'menuitem', onClick: function () {
210
+ setTimeout(function () {
211
+ onSelect();
212
+ });
213
+ if (onChange) {
214
+ onChange();
215
+ }
216
+ } },
229
217
  React.createElement("i", { className: icon ? ('icon-' + icon) : '' }),
230
218
  label)));
231
219
  };
220
+ var DropdownItemWithSubmenu = function (_a) {
221
+ var index = _a.index, item = _a.item, menuID = _a.menuID, subMenuItems = _a.subMenuItems, onChange = _a.onChange;
222
+ var _b = React.useState(undefined), open = _b[0], setOpen = _b[1];
223
+ var refButtonSubMenu = React.useRef(null);
224
+ var refSubMenu = React.useRef(null);
225
+ var placeholder = document.getElementById(menuID);
226
+ React.useEffect(function () {
227
+ var subMenuRef = refSubMenu.current;
228
+ var subToggleRef = refButtonSubMenu.current;
229
+ if (open === true) {
230
+ placeholder === null || placeholder === void 0 ? void 0 : placeholder.appendChild(subMenuRef);
231
+ subMenuRef.style.display = 'block';
232
+ }
233
+ else if (open === false) {
234
+ placeholder === null || placeholder === void 0 ? void 0 : placeholder.removeChild(subMenuRef);
235
+ subMenuRef.style.display = 'none';
236
+ }
237
+ if (subMenuRef && subToggleRef) {
238
+ (0, core_1.createPopper)(subToggleRef, subMenuRef, {
239
+ placement: 'right-start',
240
+ });
241
+ }
242
+ }, [open]);
243
+ return (React.createElement("li", { key: index, ref: refButtonSubMenu },
244
+ React.createElement("div", { className: 'dropdown', onMouseLeave: function () { return setOpen(false); } },
245
+ React.createElement("button", { className: 'dropdown__toggle dropdown-toggle', "aria-haspopup": "menu", tabIndex: 0, onClick: function () {
246
+ if (item.onSelect) {
247
+ setTimeout(function () {
248
+ item.onSelect();
249
+ });
250
+ }
251
+ if (onChange) {
252
+ onChange();
253
+ }
254
+ }, onMouseOver: function () { return setOpen(true); } },
255
+ item['icon'] ? React.createElement("i", { className: 'icon-' + item['icon'] }) : null,
256
+ item['label']),
257
+ React.createElement("ul", { role: 'menu', ref: refSubMenu, style: { display: 'none' }, className: 'dropdown__menu' }, subMenuItems))));
258
+ };
@@ -38,5 +38,5 @@ export declare class DurationInput extends React.PureComponent<IProps, IState> {
38
38
  handleFocusOnKeyUp(event: React.KeyboardEvent<HTMLInputElement>, ref: HTMLInputElement | null): void;
39
39
  render(): JSX.Element;
40
40
  }
41
- export declare function getDurationString(seconds: number): string;
41
+ export declare function getDurationString(seconds: number, minSections?: 1 | 2 | 3): string;
42
42
  export {};
@@ -141,14 +141,18 @@ var DurationInput = /** @class */ (function (_super) {
141
141
  }, 500);
142
142
  }
143
143
  }
144
- if ((this.props.hours !== prevProps.hours)
145
- || (this.props.minutes !== prevProps.minutes)
146
- || (this.props.seconds !== prevProps.seconds)) {
147
- this.setState({
148
- hours: this.stateUpdate('hours', this.props.hours, this.props.minutes, this.props.seconds),
149
- minutes: this.stateUpdate('minutes', this.props.minutes, this.props.seconds),
150
- seconds: this.stateUpdate('seconds', this.props.seconds),
151
- });
144
+ if (this.hourRef.current.value.length === 2
145
+ && this.minuteRef.current.value.length === 2
146
+ && this.secondRef.current.value.length === 2) {
147
+ if ((this.props.hours !== prevProps.hours)
148
+ || (this.props.minutes !== prevProps.minutes)
149
+ || (this.props.seconds !== prevProps.seconds)) {
150
+ this.setState({
151
+ hours: this.stateUpdate('hours', this.props.hours, this.props.minutes, this.props.seconds),
152
+ minutes: this.stateUpdate('minutes', this.props.minutes, this.props.seconds),
153
+ seconds: this.stateUpdate('seconds', this.props.seconds),
154
+ });
155
+ }
152
156
  }
153
157
  };
154
158
  DurationInput.prototype.valueUpdate = function () {
@@ -252,12 +256,15 @@ var DurationInput = /** @class */ (function (_super) {
252
256
  };
253
257
  DurationInput.prototype.handleChange = function (event, state) {
254
258
  var stateClone = {};
255
- if (event.target.value.length >= 2) {
256
- if (event.target.selectionStart === 1 && event.target.selectionEnd === 1) {
257
- stateClone[state] = event.target.value.slice(0, 1) + event.target.value.slice(2, 3);
259
+ if (event.target.value.length > 2) {
260
+ if (event.target.selectionStart === 1) {
261
+ stateClone[state] = event.target.value.slice(0, 1);
262
+ }
263
+ else if (event.target.selectionStart === 2) {
264
+ stateClone[state] = event.target.value.slice(1, 2);
258
265
  }
259
266
  else {
260
- stateClone[state] = event.target.value.slice(0, 2);
267
+ stateClone[state] = event.target.value.slice(2, 3);
261
268
  }
262
269
  }
263
270
  else {
@@ -293,19 +300,19 @@ var DurationInput = /** @class */ (function (_super) {
293
300
  var InputClasses = (0, classnames_1.default)('sd-input__duration-input');
294
301
  return (React.createElement(Form_1.InputWrapper, { label: this.props.label, error: this.props.error, required: this.props.required, disabled: this.props.disabled, invalid: this.props.invalid, info: this.props.info, inlineLabel: this.props.inlineLabel, labelHidden: this.props.labelHidden, fullWidth: this.props.fullWidth, htmlId: this.htmlId, tabindex: this.props.tabindex },
295
302
  React.createElement("div", { className: InputClasses },
296
- React.createElement("input", { className: "duration-input ".concat(this.state.blink === 'hour' ? 'blink_me' : ''), type: 'text', id: 'hours', max: 99, min: 0, ref: this.hourRef, value: this.state.hours, disabled: this.props.disabled, onKeyDown: function (event) { return _this.handleKeyDown(event); }, onKeyUp: function (event) { return _this.handleFocusOnKeyUp(event, _this.minuteRef.current); }, onChange: function (event) { _this.handleChange(event, 'hours'); }, onBlur: function (event) { return _this.setState({ hours: _this.zeroPad(event.target.value) }); }, onKeyPress: function (event) {
303
+ React.createElement("input", { className: "duration-input ".concat(this.state.blink === 'hour' ? 'blink_me' : ''), type: 'text', id: 'hours', autoComplete: "off", max: 99, min: 0, ref: this.hourRef, value: this.state.hours, disabled: this.props.disabled, onKeyDown: function (event) { return _this.handleKeyDown(event); }, onKeyUp: function (event) { return _this.handleFocusOnKeyUp(event, _this.minuteRef.current); }, onChange: function (event) { _this.handleChange(event, 'hours'); }, onBlur: function (event) { return _this.setState({ hours: _this.zeroPad(event.target.value) }); }, onKeyPress: function (event) {
297
304
  if (!/[0-9]/.test(event.key)) {
298
305
  event.preventDefault();
299
306
  }
300
307
  } }),
301
308
  React.createElement("span", { className: 'sd-input__suffix' }, "h"),
302
- React.createElement("input", { className: "duration-input ".concat(this.state.blink === 'minute' ? 'blink_me' : ''), type: 'text', id: 'minutes', ref: this.minuteRef, value: this.state.minutes, disabled: this.props.disabled, onKeyDown: function (event) { return _this.handleKeyDown(event); }, onKeyUp: function (event) { return _this.handleFocusOnKeyUp(event, _this.secondRef.current); }, onChange: function (event) { _this.handleChange(event, 'minutes'); }, onBlur: function (event) { return _this.setState({ minutes: _this.zeroPad(event.target.value) }); }, onKeyPress: function (event) {
309
+ React.createElement("input", { className: "duration-input ".concat(this.state.blink === 'minute' ? 'blink_me' : ''), type: 'text', id: 'minutes', autoComplete: "off", ref: this.minuteRef, value: this.state.minutes, disabled: this.props.disabled, onKeyDown: function (event) { return _this.handleKeyDown(event); }, onKeyUp: function (event) { return _this.handleFocusOnKeyUp(event, _this.secondRef.current); }, onChange: function (event) { _this.handleChange(event, 'minutes'); }, onBlur: function (event) { return _this.setState({ minutes: _this.zeroPad(event.target.value) }); }, onKeyPress: function (event) {
303
310
  if (!/[0-9]/.test(event.key)) {
304
311
  event.preventDefault();
305
312
  }
306
313
  } }),
307
314
  React.createElement("span", { className: 'sd-input__suffix' }, "m"),
308
- React.createElement("input", { className: 'duration-input', type: 'text', id: 'seconds', ref: this.secondRef, value: this.state.seconds, disabled: this.props.disabled, onKeyDown: function (event) { return _this.handleKeyDown(event); }, onKeyUp: function (event) { return _this.handleFocusOnKeyUp(event, _this.hourRef.current); }, onChange: function (event) { _this.handleChange(event, 'seconds'); }, onBlur: function (event) { return _this.setState({ seconds: _this.zeroPad(event.target.value) }); }, onKeyPress: function (event) {
315
+ React.createElement("input", { className: 'duration-input', type: 'text', id: 'seconds', autoComplete: "off", ref: this.secondRef, value: this.state.seconds, disabled: this.props.disabled, onKeyDown: function (event) { return _this.handleKeyDown(event); }, onKeyUp: function (event) { return _this.handleFocusOnKeyUp(event, _this.hourRef.current); }, onChange: function (event) { _this.handleChange(event, 'seconds'); }, onBlur: function (event) { return _this.setState({ seconds: _this.zeroPad(event.target.value) }); }, onKeyPress: function (event) {
309
316
  if (!/[0-9]/.test(event.key)) {
310
317
  event.preventDefault();
311
318
  }
@@ -315,7 +322,8 @@ var DurationInput = /** @class */ (function (_super) {
315
322
  return DurationInput;
316
323
  }(React.PureComponent));
317
324
  exports.DurationInput = DurationInput;
318
- function getDurationString(seconds) {
325
+ function getDurationString(seconds, minSections) {
326
+ if (minSections === void 0) { minSections = 1; }
319
327
  function zeroPad(value) {
320
328
  if (value.toString().length === 1 || value === 0) {
321
329
  return "0".concat(value);
@@ -330,6 +338,27 @@ function getDurationString(seconds) {
330
338
  var hour = zeroPad(Math.floor(seconds / 3600));
331
339
  var minute = zeroPad(Math.floor((seconds % 3600) / 60));
332
340
  var second = zeroPad(Math.floor(seconds % 60));
333
- return "".concat(hour, "h ").concat(minute, "m ").concat(second, "s");
341
+ if (minSections === 3) {
342
+ return "".concat(hour, "h ").concat(minute, "m ").concat(second, "s");
343
+ }
344
+ else if (minSections === 2) {
345
+ if (Number(hour) > 0) {
346
+ return "".concat(hour, "h ").concat(minute, "m ").concat(second, "s");
347
+ }
348
+ else {
349
+ return "".concat(minute, "m ").concat(second, "s");
350
+ }
351
+ }
352
+ else {
353
+ if (Number(hour) === 0 && Number(minute) === 0) {
354
+ return "".concat(second, "s");
355
+ }
356
+ else if (Number(hour) === 0 && Number(minute) > 0) {
357
+ return "".concat(minute, "m ").concat(second, "s");
358
+ }
359
+ else {
360
+ return "".concat(hour, "h ").concat(minute, "m ").concat(second, "s");
361
+ }
362
+ }
334
363
  }
335
364
  exports.getDurationString = getDurationString;
@@ -1,8 +1,11 @@
1
1
  import * as React from 'react';
2
2
  interface IProps {
3
- style?: 'normal' | 'light';
3
+ style?: 'normal' | 'light' | 'boxed';
4
+ state?: 'default' | 'focused' | 'warning';
4
5
  text: string;
5
6
  forId?: string;
7
+ required?: boolean;
8
+ invalid?: boolean;
6
9
  }
7
10
  export declare class FormLabel extends React.PureComponent<IProps> {
8
11
  render(): JSX.Element;
@@ -46,9 +46,15 @@ var FormLabel = /** @class */ (function (_super) {
46
46
  return _super !== null && _super.apply(this, arguments) || this;
47
47
  }
48
48
  FormLabel.prototype.render = function () {
49
- var classes = (0, classnames_1.default)('form-label', {
50
- 'form-label--light': this.props.style === 'light',
51
- });
49
+ var _a;
50
+ var classes = (0, classnames_1.default)('form-label', (_a = {
51
+ 'form-label--light': this.props.style === 'light',
52
+ 'form-label--boxed': this.props.style === 'boxed',
53
+ 'form-label--required': this.props.required,
54
+ 'form-label--invalid': this.props.invalid
55
+ },
56
+ _a["form-label--".concat(this.props.state)] = this.props.state !== 'default' && this.props.state !== undefined,
57
+ _a));
52
58
  return (React.createElement("label", { htmlFor: this.props.forId, className: classes }, this.props.text));
53
59
  };
54
60
  return FormLabel;
@@ -7,7 +7,6 @@ interface IPropsBase {
7
7
  tabIndex?: number;
8
8
  fullWidth?: boolean;
9
9
  boxedStyle?: boolean;
10
- boxedLable?: boolean;
11
10
  placeholder?: string;
12
11
  htmlId?: string;
13
12
  id?: string;
@@ -33,9 +33,13 @@ var __importStar = (this && this.__importStar) || function (mod) {
33
33
  __setModuleDefault(result, mod);
34
34
  return result;
35
35
  };
36
+ var __importDefault = (this && this.__importDefault) || function (mod) {
37
+ return (mod && mod.__esModule) ? mod : { "default": mod };
38
+ };
36
39
  Object.defineProperty(exports, "__esModule", { value: true });
37
40
  exports.InputBase = void 0;
38
41
  var React = __importStar(require("react"));
42
+ var classnames_1 = __importDefault(require("classnames"));
39
43
  var InputBase = /** @class */ (function (_super) {
40
44
  __extends(InputBase, _super);
41
45
  function InputBase(props) {
@@ -65,7 +69,17 @@ var InputBase = /** @class */ (function (_super) {
65
69
  };
66
70
  InputBase.prototype.render = function () {
67
71
  var _a;
68
- return (React.createElement("input", { className: 'sd-input__input', type: (_a = this.props.type) !== null && _a !== void 0 ? _a : 'text', id: this.props.htmlId, value: this.state.value, "aria-describedby": this.props.htmlId + 'label', tabIndex: this.props.tabIndex, onChange: this.handleChange, placeholder: this.props.placeholder, disabled: this.props.disabled }));
72
+ var _b;
73
+ var classes = (0, classnames_1.default)('sd-input__input', (_a = {
74
+ 'sd-input__input--boxed-style': this.props.boxedStyle,
75
+ 'sd-input__input--required': this.props.required,
76
+ 'sd-input__input--invalid': this.props.invalid,
77
+ 'sd-input__input--disabled': this.props.disabled,
78
+ 'sd-input__input--medium': this.props.size === undefined
79
+ },
80
+ _a["sd-input__input--".concat(this.props.size)] = this.props.size || this.props.size !== undefined,
81
+ _a));
82
+ return (React.createElement("input", { className: classes, type: (_b = this.props.type) !== null && _b !== void 0 ? _b : 'text', id: this.props.htmlId, value: this.state.value, "aria-describedby": this.props.htmlId + 'label', tabIndex: this.props.tabIndex, onChange: this.handleChange, placeholder: this.props.placeholder, disabled: this.props.disabled }));
69
83
  };
70
84
  return InputBase;
71
85
  }(React.Component));
@@ -18,17 +18,17 @@ interface IPropsBase {
18
18
  }
19
19
  interface IPropsText extends IPropsBase {
20
20
  type: 'text';
21
- value: string;
21
+ value?: string;
22
22
  onChange(newValue: string): void;
23
23
  }
24
24
  interface IPropsPassword extends IPropsBase {
25
25
  type: 'password';
26
- value: string;
26
+ value?: string;
27
27
  onChange(newValue: string): void;
28
28
  }
29
29
  interface IPropsNumber extends IPropsBase {
30
30
  type: 'number';
31
- value: number;
31
+ value?: number;
32
32
  onChange(newValue: number): void;
33
33
  }
34
34
  declare type IProps = IPropsText | IPropsNumber | IPropsPassword;
@@ -68,8 +68,9 @@ var Input = /** @class */ (function (_super) {
68
68
  }
69
69
  };
70
70
  Input.prototype.componentDidUpdate = function (prevProps) {
71
+ var _a;
71
72
  if (prevProps.value !== this.props.value) {
72
- this.setState({ value: this.props.value });
73
+ this.setState({ value: (_a = this.props.value) !== null && _a !== void 0 ? _a : '' });
73
74
  }
74
75
  };
75
76
  Input.prototype.render = function () {
@@ -13,4 +13,5 @@ interface IProps {
13
13
  export declare class Label extends React.PureComponent<IProps> {
14
14
  render(): JSX.Element;
15
15
  }
16
+ export declare function getTextColor(backgroundColor: string): 'black' | 'white' | undefined;
16
17
  export {};
@@ -37,7 +37,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
37
37
  return (mod && mod.__esModule) ? mod : { "default": mod };
38
38
  };
39
39
  Object.defineProperty(exports, "__esModule", { value: true });
40
- exports.Label = void 0;
40
+ exports.getTextColor = exports.Label = void 0;
41
41
  var React = __importStar(require("react"));
42
42
  var classnames_1 = __importDefault(require("classnames"));
43
43
  var Label = /** @class */ (function (_super) {
@@ -74,10 +74,25 @@ var Label = /** @class */ (function (_super) {
74
74
  return (React.createElement("span", { className: classes, style: { color: this.props.hexColor, backgroundColor: "".concat(this.props.hexColor, "33") } }, this.props.text));
75
75
  }
76
76
  else {
77
- return (React.createElement("span", { className: classes, style: { backgroundColor: this.props.hexColor } }, this.props.text));
77
+ return (React.createElement("span", { className: classes, style: this.props.hexColor
78
+ ? { backgroundColor: this.props.hexColor, color: getTextColor(this.props.hexColor) }
79
+ : undefined }, this.props.text));
78
80
  }
79
81
  }
80
82
  };
81
83
  return Label;
82
84
  }(React.PureComponent));
83
85
  exports.Label = Label;
86
+ function getTextColor(backgroundColor) {
87
+ if (backgroundColor) {
88
+ var r = parseInt(backgroundColor.substr(1, 2), 16);
89
+ var g = parseInt(backgroundColor.substr(3, 2), 16);
90
+ var b = parseInt(backgroundColor.substr(5, 2), 16);
91
+ var yiq = ((r * 299) + (g * 587) + (b * 114)) / 1000;
92
+ return (yiq >= 128) ? 'black' : 'white';
93
+ }
94
+ else {
95
+ return;
96
+ }
97
+ }
98
+ exports.getTextColor = getTextColor;
@@ -3,6 +3,7 @@ interface IProps {
3
3
  header?: React.ReactNode;
4
4
  main?: React.ReactNode;
5
5
  sideBar?: React.ReactNode;
6
+ sideBarClosed?: boolean;
6
7
  sidePanel?: React.ReactNode;
7
8
  sideOverlay?: React.ReactNode;
8
9
  sideOverlayOpen?: boolean;
@@ -50,7 +50,7 @@ var AuthoringFrame = /** @class */ (function (_super) {
50
50
  this.props.main && (React.createElement(_1.AuthoringFrameMain, null, this.props.main)),
51
51
  this.props.sidePanel && (React.createElement(_1.AuthoringFrameSidePanel, { opened: this.props.sidePanelOpen, pinned: this.props.sidePanelPinned }, this.props.sidePanel)),
52
52
  this.props.sideOverlay && (React.createElement(_1.AuthoringFrameSidePanelOverlay, { opened: this.props.sideOverlayOpen }, this.props.sideOverlay)),
53
- this.props.sideBar && (React.createElement(_1.AuthoringFrameRightBar, null, this.props.sideBar)),
53
+ this.props.sideBar && (React.createElement(_1.AuthoringFrameRightBar, { closed: this.props.sideBarClosed }, this.props.sideBar)),
54
54
  this.props.overlayPanel && (React.createElement(_1.AuthoringFrameOverlay, null, this.props.overlayPanel))));
55
55
  };
56
56
  return AuthoringFrame;
@@ -1,8 +1,15 @@
1
1
  import * as React from 'react';
2
2
  interface IProps {
3
3
  children?: React.ReactNode;
4
+ closed?: boolean;
4
5
  }
5
- export declare class AuthoringFrameRightBar extends React.PureComponent<IProps> {
6
- render(): JSX.Element;
6
+ interface IState {
7
+ children?: React.ReactNode;
8
+ closed?: boolean;
9
+ }
10
+ export declare class AuthoringFrameRightBar extends React.PureComponent<IProps, IState> {
11
+ constructor(props: IProps);
12
+ componentDidUpdate(prevProps: Readonly<IProps>): void;
13
+ render(): false | JSX.Element;
7
14
  }
8
15
  export {};
@@ -38,11 +38,22 @@ exports.AuthoringFrameRightBar = void 0;
38
38
  var React = __importStar(require("react"));
39
39
  var AuthoringFrameRightBar = /** @class */ (function (_super) {
40
40
  __extends(AuthoringFrameRightBar, _super);
41
- function AuthoringFrameRightBar() {
42
- return _super !== null && _super.apply(this, arguments) || this;
41
+ function AuthoringFrameRightBar(props) {
42
+ var _this = _super.call(this, props) || this;
43
+ _this.state = {
44
+ closed: _this.props.closed ? _this.props.closed : false,
45
+ };
46
+ return _this;
43
47
  }
48
+ AuthoringFrameRightBar.prototype.componentDidUpdate = function (prevProps) {
49
+ if (prevProps.closed !== this.props.closed) {
50
+ this.setState({
51
+ closed: this.props.closed,
52
+ });
53
+ }
54
+ };
44
55
  AuthoringFrameRightBar.prototype.render = function () {
45
- return (React.createElement("div", { className: "sd-editor-grid__sidetabs-bar" }, this.props.children));
56
+ return (!this.state.closed && React.createElement("div", { className: "sd-editor-grid__sidetabs-bar" }, this.props.children));
46
57
  };
47
58
  return AuthoringFrameRightBar;
48
59
  }(React.PureComponent));
@@ -46,7 +46,7 @@ var AuthoringInnerHeader = /** @class */ (function (_super) {
46
46
  function AuthoringInnerHeader(props) {
47
47
  var _this = _super.call(this, props) || this;
48
48
  _this.state = {
49
- collapsed: false,
49
+ collapsed: _this.props.collapsed ? _this.props.collapsed : false,
50
50
  };
51
51
  return _this;
52
52
  }
@@ -46,7 +46,7 @@ var AuthoringMain = /** @class */ (function (_super) {
46
46
  return (React.createElement(_1.AuthoringMainContainer, null,
47
47
  this.props.toolBar && (React.createElement(_1.AuthoringMainToolBar, { toolbarCustom: this.props.toolbarCustom }, this.props.toolBar)),
48
48
  React.createElement(_1.AuthoringMainContent, null,
49
- this.props.authoringHeader && (React.createElement(_1.AuthoringInnerHeader, { headerPadding: this.props.headerPadding }, this.props.authoringHeader)),
49
+ this.props.authoringHeader && (React.createElement(_1.AuthoringInnerHeader, { headerPadding: this.props.headerPadding, collapsed: this.props.headerCollapsed }, this.props.authoringHeader)),
50
50
  this.props.authoringBookmarks && (React.createElement(_1.AuthorinInnerSideBar, null, this.props.authoringBookmarks)),
51
51
  React.createElement(_1.AuthoringInnerBody, null, this.props.children))));
52
52
  };
@@ -12,6 +12,8 @@ interface IProps {
12
12
  menuId?: string;
13
13
  ariaControls?: string;
14
14
  buttonAnimation?: 'spin' | 'squeeze' | 'none';
15
+ editorFullWidth?: boolean;
16
+ openPanel?: boolean;
15
17
  }
16
18
  export declare class CoreLayout extends React.PureComponent<IProps> {
17
19
  render(): JSX.Element;
@@ -46,7 +46,7 @@ var CoreLayout = /** @class */ (function (_super) {
46
46
  return (React.createElement(_1.CoreLayoutContainer, null,
47
47
  this.props.slideInMenu && (React.createElement(_1.CoreLayoutSlideInMenu, { menuId: this.props.menuId, menuOpen: this.props.menuOpen }, this.props.slideInMenu)),
48
48
  this.props.topMenu && (React.createElement(_1.CoreLayoutTopMenu, { buttonAnimation: this.props.buttonAnimation, heading: this.props.heading, onClick: this.props.onClick, active: this.props.active, ariaControls: this.props.ariaControls }, this.props.topMenu)),
49
- React.createElement(_1.CoreLayoutMain, null, this.props.children),
49
+ React.createElement(_1.CoreLayoutMain, { editorFullWidth: this.props.editorFullWidth, openPanel: this.props.openPanel }, this.props.children),
50
50
  this.props.footer && (React.createElement(_1.CoreLayoutFooter, null, this.props.footer)),
51
51
  this.props.overlay && (React.createElement(_1.CoreLayoutOverlay, null, this.props.overlay))));
52
52
  };
@@ -2,6 +2,8 @@ import * as React from 'react';
2
2
  interface IProps {
3
3
  children?: React.ReactNode;
4
4
  id?: string;
5
+ editorFullWidth?: boolean;
6
+ openPanel?: boolean;
5
7
  }
6
8
  export declare class CoreLayoutMain extends React.PureComponent<IProps> {
7
9
  render(): JSX.Element;
@@ -33,16 +33,23 @@ var __importStar = (this && this.__importStar) || function (mod) {
33
33
  __setModuleDefault(result, mod);
34
34
  return result;
35
35
  };
36
+ var __importDefault = (this && this.__importDefault) || function (mod) {
37
+ return (mod && mod.__esModule) ? mod : { "default": mod };
38
+ };
36
39
  Object.defineProperty(exports, "__esModule", { value: true });
37
40
  exports.CoreLayoutMain = void 0;
38
41
  var React = __importStar(require("react"));
42
+ var classnames_1 = __importDefault(require("classnames"));
39
43
  var CoreLayoutMain = /** @class */ (function (_super) {
40
44
  __extends(CoreLayoutMain, _super);
41
45
  function CoreLayoutMain() {
42
46
  return _super !== null && _super.apply(this, arguments) || this;
43
47
  }
44
48
  CoreLayoutMain.prototype.render = function () {
45
- return (React.createElement("section", { id: this.props.id, className: 'sd-content sd-content-wrapper' }, this.props.children));
49
+ var classes = (0, classnames_1.default)('sd-content sd-content-wrapper', {
50
+ 'sd-content-wrapper--editor-full': this.props.editorFullWidth,
51
+ });
52
+ return (React.createElement("section", { id: this.props.id, className: classes + (this.props.openPanel ? ' sd-content-wrapper--editor-full' : '') }, this.props.children));
46
53
  };
47
54
  return CoreLayoutMain;
48
55
  }(React.PureComponent));
@@ -17,6 +17,12 @@ interface IPropsItem {
17
17
  onDoubleClick?(): void;
18
18
  }
19
19
  declare class ContentListItem extends React.PureComponent<IPropsItem> {
20
+ private timer;
21
+ private delay;
22
+ private prevent;
23
+ onSingleClick: () => void;
24
+ onDoubleClick: () => void;
25
+ onActionMenuClick: (event: React.MouseEvent<HTMLElement>) => void;
20
26
  render(): JSX.Element;
21
27
  }
22
28
  interface IProps {