superdesk-ui-framework 3.0.1-beta.11 → 3.0.1-beta.13

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 (84) hide show
  1. package/app/styles/_modals.scss +3 -3
  2. package/app/styles/_table-list.scss +100 -11
  3. package/app/styles/grids/_grid-layout.scss +3 -0
  4. package/app-typescript/components/Dropdown.tsx +78 -37
  5. package/app-typescript/components/DurationInput.tsx +7 -1
  6. package/app-typescript/components/Layouts/CoreLayout.tsx +2 -1
  7. package/app-typescript/components/Layouts/CoreLayoutMain.tsx +7 -1
  8. package/app-typescript/components/Lists/TableList.tsx +138 -25
  9. package/app-typescript/components/SearchBar.tsx +11 -3
  10. package/app-typescript/components/TimePicker.tsx +2 -13
  11. package/dist/examples.bundle.js +361 -123
  12. package/dist/playgrounds/react-playgrounds/CoreLayout.tsx +1 -0
  13. package/dist/react/Dropdowns.tsx +227 -47
  14. package/dist/react/TableList.tsx +15 -119
  15. package/dist/superdesk-ui.bundle.css +84 -16
  16. package/dist/superdesk-ui.bundle.js +153 -56
  17. package/examples/pages/playgrounds/react-playgrounds/CoreLayout.tsx +1 -0
  18. package/examples/pages/react/Dropdowns.tsx +227 -47
  19. package/examples/pages/react/TableList.tsx +15 -119
  20. package/package.json +1 -1
  21. package/react/components/Dropdown.d.ts +2 -1
  22. package/react/components/Dropdown.js +39 -20
  23. package/react/components/DurationInput.js +9 -1
  24. package/react/components/Layouts/CoreLayout.d.ts +1 -0
  25. package/react/components/Layouts/CoreLayout.js +1 -1
  26. package/react/components/Layouts/CoreLayoutMain.d.ts +1 -0
  27. package/react/components/Layouts/CoreLayoutMain.js +8 -1
  28. package/react/components/Lists/TableList.d.ts +22 -6
  29. package/react/components/Lists/TableList.js +78 -19
  30. package/react/components/SearchBar.d.ts +1 -1
  31. package/react/components/SearchBar.js +15 -7
  32. package/react/components/TimePicker.d.ts +1 -5
  33. package/react/components/TimePicker.js +3 -7
  34. package/.vscode/settings.json +0 -5
  35. package/app-typescript/dist/components/Alert.d.ts +0 -16
  36. package/app-typescript/dist/components/Autocomplete.d.ts +0 -48
  37. package/app-typescript/dist/components/Avatar.d.ts +0 -33
  38. package/app-typescript/dist/components/Badge.d.ts +0 -13
  39. package/app-typescript/dist/components/Button.d.ts +0 -23
  40. package/app-typescript/dist/components/ButtonGroup.d.ts +0 -12
  41. package/app-typescript/dist/components/CheckButtonGroup.d.ts +0 -11
  42. package/app-typescript/dist/components/CheckGroup.d.ts +0 -9
  43. package/app-typescript/dist/components/Checkbox.d.ts +0 -19
  44. package/app-typescript/dist/components/CheckboxButton.d.ts +0 -19
  45. package/app-typescript/dist/components/DatePicker.d.ts +0 -37
  46. package/app-typescript/dist/components/Divider.d.ts +0 -9
  47. package/app-typescript/dist/components/DonutChart.d.ts +0 -12
  48. package/app-typescript/dist/components/Dropdown.d.ts +0 -28
  49. package/app-typescript/dist/components/DropdownFirst.d.ts +0 -42
  50. package/app-typescript/dist/components/EmptyState.d.ts +0 -11
  51. package/app-typescript/dist/components/FormLabel.d.ts +0 -9
  52. package/app-typescript/dist/components/Genie.d.ts +0 -13
  53. package/app-typescript/dist/components/GridItem.d.ts +0 -69
  54. package/app-typescript/dist/components/GridList.d.ts +0 -14
  55. package/app-typescript/dist/components/HeadingText.d.ts +0 -10
  56. package/app-typescript/dist/components/HelloWorld.d.ts +0 -8
  57. package/app-typescript/dist/components/Icon.d.ts +0 -12
  58. package/app-typescript/dist/components/IconButton.d.ts +0 -12
  59. package/app-typescript/dist/components/IconLabel.d.ts +0 -11
  60. package/app-typescript/dist/components/Input.d.ts +0 -24
  61. package/app-typescript/dist/components/Label.d.ts +0 -15
  62. package/app-typescript/dist/components/LeftMenu.d.ts +0 -26
  63. package/app-typescript/dist/components/Loader.d.ts +0 -8
  64. package/app-typescript/dist/components/NavButton.d.ts +0 -15
  65. package/app-typescript/dist/components/Popover.d.ts +0 -13
  66. package/app-typescript/dist/components/PropsList.d.ts +0 -15
  67. package/app-typescript/dist/components/Radio.d.ts +0 -19
  68. package/app-typescript/dist/components/RadioButton.d.ts +0 -20
  69. package/app-typescript/dist/components/Select.d.ts +0 -29
  70. package/app-typescript/dist/components/SelectWithTemplate.d.ts +0 -32
  71. package/app-typescript/dist/components/SlidingToolbar.d.ts +0 -8
  72. package/app-typescript/dist/components/StrechBar.d.ts +0 -4
  73. package/app-typescript/dist/components/SubNav.d.ts +0 -10
  74. package/app-typescript/dist/components/Switch.d.ts +0 -12
  75. package/app-typescript/dist/components/TabCustom.d.ts +0 -25
  76. package/app-typescript/dist/components/TabList.d.ts +0 -22
  77. package/app-typescript/dist/components/Tag.d.ts +0 -9
  78. package/app-typescript/dist/components/TagInput.d.ts +0 -7
  79. package/app-typescript/dist/components/TagInputTest.d.ts +0 -18
  80. package/app-typescript/dist/components/TimePicker.d.ts +0 -11
  81. package/app-typescript/dist/components/Tooltip.d.ts +0 -11
  82. package/app-typescript/dist/components/_Positioner.d.ts +0 -27
  83. package/app-typescript/dist/index.d.ts +0 -56
  84. package/yarn-error.log +0 -111
@@ -32136,13 +32136,13 @@ a.label {
32136
32136
  .modal-open {
32137
32137
  overflow: hidden; }
32138
32138
  .modal-open .dropdown__menu {
32139
- z-index: 2050; }
32139
+ z-index: 3050; }
32140
32140
  .modal-open .dropdown.open {
32141
- *z-index: 2050; }
32141
+ *z-index: 3050; }
32142
32142
  .modal-open .popover {
32143
- z-index: 2060; }
32143
+ z-index: 3060; }
32144
32144
  .modal-open .tooltip {
32145
- z-index: 2090; }
32145
+ z-index: 3090; }
32146
32146
 
32147
32147
  .modal {
32148
32148
  position: fixed;
@@ -35266,9 +35266,12 @@ tags-input,
35266
35266
  .table-list--contained {
35267
35267
  gap: 0; }
35268
35268
 
35269
+ .table-list--read-only {
35270
+ pointer-events: none;
35271
+ cursor: default; }
35272
+
35269
35273
  .table-list__item {
35270
35274
  display: grid;
35271
- z-index: 1;
35272
35275
  align-items: center;
35273
35276
  grid-template-columns: [contentCol] 1fr [actionsVisible] auto [actionsHidden] auto;
35274
35277
  position: relative;
@@ -35280,15 +35283,6 @@ tags-input,
35280
35283
  border: 1px solid var(--sd-colour-line--light);
35281
35284
  transition: all 0.2s ease-in-out;
35282
35285
  inset-inline-start: 0; }
35283
- .table-list__item::before {
35284
- content: "";
35285
- width: 6px;
35286
- position: absolute;
35287
- inset-block: 3px;
35288
- inset-inline-start: 3px;
35289
- background-color: var(--sd-colour-panel-bg--100);
35290
- z-index: 1;
35291
- border-radius: 2px; }
35292
35286
  .table-list__item--margin {
35293
35287
  margin-bottom: 0.8rem; }
35294
35288
  .table-list__item--selected {
@@ -35353,6 +35347,32 @@ tags-input,
35353
35347
  pointer-events: none;
35354
35348
  opacity: 0.5; }
35355
35349
 
35350
+ .table-list__add-item {
35351
+ display: grid;
35352
+ align-items: center;
35353
+ position: relative;
35354
+ flex-direction: row;
35355
+ padding: 8px;
35356
+ min-height: 4.2rem;
35357
+ border-radius: var(--b-radius--medium);
35358
+ background-color: transparent;
35359
+ border: 1px dashed var(--sd-colour-line--medium);
35360
+ transition: all 0.2s ease-in-out;
35361
+ inset-inline-start: 0; }
35362
+ .table-list__add-item--container {
35363
+ display: flex;
35364
+ justify-content: center;
35365
+ align-items: center; }
35366
+
35367
+ .table-list__item-border {
35368
+ width: 6px;
35369
+ background-color: var(--sd-colour-panel-bg--100);
35370
+ z-index: 2;
35371
+ position: absolute;
35372
+ inset-block: 3px;
35373
+ inset-inline-start: 3px;
35374
+ border-radius: 2px; }
35375
+
35356
35376
  .table-list__item-content {
35357
35377
  grid-column: contentCol;
35358
35378
  grid-row: mainRow;
@@ -35474,6 +35494,52 @@ tags-input,
35474
35494
  .side-panel__content-block .table-list__item-content {
35475
35495
  grid-template-columns: [columnLeft] 140px [columncenter] 1fr [columnRight] auto; }
35476
35496
 
35497
+ .table-list--gap-s {
35498
+ gap: 0.8rem; }
35499
+
35500
+ .table-list__item--draggable.table-list__item--drag-handles-always {
35501
+ border-left-width: 16px;
35502
+ border-left-color: var(--sd-colour-line--medium); }
35503
+ .table-list__item--draggable.table-list__item--drag-handles-always::after {
35504
+ content: "";
35505
+ width: 20px;
35506
+ position: absolute;
35507
+ inset-block: -1px;
35508
+ inset-inline-start: -18px;
35509
+ background-image: url(dots.svg);
35510
+ background-repeat: no-repeat;
35511
+ background-position: center center;
35512
+ z-index: 2;
35513
+ border-radius: var(--b-radius--small);
35514
+ opacity: 0.85; }
35515
+ .table-list__item--draggable.table-list__item--drag-handles-always:hover {
35516
+ border-left-color: var(--sd-colour-line--strong); }
35517
+ .table-list__item--draggable.table-list__item--drag-handles-always:hover::after {
35518
+ cursor: grab; }
35519
+ .table-list__item--draggable.table-list__item--drag-handles-always:active {
35520
+ border-color: var(--sd-colour-interactive);
35521
+ cursor: grabbing; }
35522
+ .table-list__item--draggable.table-list__item--drag-handles-always:active::after {
35523
+ opacity: 1 !important;
35524
+ cursor: grabbing; }
35525
+
35526
+ .table-list__item--draggable.table-list__item--drag-handles-none {
35527
+ border-left-width: 1px; }
35528
+ .table-list__item--draggable.table-list__item--drag-handles-none::after {
35529
+ content: "";
35530
+ width: 0;
35531
+ opacity: 0; }
35532
+ .table-list__item--draggable.table-list__item--drag-handles-none:hover {
35533
+ border-left-color: var(--sd-colour-line--strong); }
35534
+ .table-list__item--draggable.table-list__item--drag-handles-none:hover::after {
35535
+ cursor: grab; }
35536
+ .table-list__item--draggable.table-list__item--drag-handles-none:active {
35537
+ border-color: var(--sd-colour-interactive);
35538
+ cursor: grabbing; }
35539
+ .table-list__item--draggable.table-list__item--drag-handles-none:active::after {
35540
+ opacity: 1 !important;
35541
+ cursor: grabbing; }
35542
+
35477
35543
  .hamburger {
35478
35544
  cursor: pointer;
35479
35545
  transition-property: opacity;
@@ -38682,6 +38748,8 @@ tags-input,
38682
38748
  grid-template-rows: 1fr; }
38683
38749
  .sd-content-wrapper .sd-main-content-grid {
38684
38750
  grid-column: contentArea; }
38751
+ .sd-content-wrapper--editor-full {
38752
+ grid-template-columns: [sideTabsLeft] auto [contentArea] auto [contentSplitter] auto [authoringArea] 1fr; }
38685
38753
 
38686
38754
  .sd-content-wrapper__left-tabs {
38687
38755
  grid-column: sideTabsLeft; }
@@ -44900,7 +44968,7 @@ a.text-link {
44900
44968
  background: var(--color-dropdown-menu-Bg);
44901
44969
  color: var(--sd-colour-interactive);
44902
44970
  box-shadow: -2px -1px 5px -2px rgba(0, 0, 0, 0.2), 3px -1px 5px -2px rgba(0, 0, 0, 0.2);
44903
- z-index: 1001; }
44971
+ z-index: 2001; }
44904
44972
  .dropdown.open .navbtn > i {
44905
44973
  opacity: 1;
44906
44974
  color: var(--sd-colour-interactive); }
@@ -45458,7 +45526,7 @@ a.text-link {
45458
45526
  position: absolute;
45459
45527
  top: 100%;
45460
45528
  inset-inline-start: 0;
45461
- z-index: 1000;
45529
+ z-index: 2000;
45462
45530
  display: none;
45463
45531
  min-width: 200px;
45464
45532
  padding: 1rem 0;
@@ -38925,7 +38925,15 @@ function getDurationString(seconds) {
38925
38925
  var hour = zeroPad(Math.floor(seconds / 3600));
38926
38926
  var minute = zeroPad(Math.floor((seconds % 3600) / 60));
38927
38927
  var second = zeroPad(Math.floor(seconds % 60));
38928
- return "".concat(hour, "h ").concat(minute, "m ").concat(second, "s");
38928
+ if (Number(hour) === 0 && Number(minute) > 0) {
38929
+ return "".concat(minute, "m ").concat(second, "s");
38930
+ }
38931
+ else if (Number(hour) === 0 && Number(minute) === 0) {
38932
+ return "".concat(second, "s");
38933
+ }
38934
+ else {
38935
+ return "".concat(hour, "h ").concat(minute, "m ").concat(second, "s");
38936
+ }
38929
38937
  }
38930
38938
  exports.getDurationString = getDurationString;
38931
38939
 
@@ -40731,16 +40739,21 @@ var TableList = /** @class */ (function (_super) {
40731
40739
  items: [],
40732
40740
  };
40733
40741
  _this.onDragEnd = _this.onDragEnd.bind(_this);
40742
+ _this.dropDown = _this.dropDown.bind(_this);
40734
40743
  return _this;
40735
40744
  }
40736
40745
  TableList.prototype.componentDidMount = function () {
40737
- this.setState({ items: this.props.array });
40746
+ if (this.props.array) {
40747
+ this.setState({ items: this.props.array });
40748
+ }
40738
40749
  };
40739
40750
  TableList.prototype.componentDidUpdate = function (prevProps) {
40740
- if (prevProps.array !== this.props.array) {
40741
- this.setState({
40742
- items: this.props.array,
40743
- });
40751
+ if (this.props.array) {
40752
+ if (prevProps.array !== this.props.array) {
40753
+ this.setState({
40754
+ items: this.props.array,
40755
+ });
40756
+ }
40744
40757
  }
40745
40758
  };
40746
40759
  TableList.prototype.onDragEnd = function (result) {
@@ -40754,24 +40767,47 @@ var TableList = /** @class */ (function (_super) {
40754
40767
  return this.props.onDrag ?
40755
40768
  this.props.onDrag(result.source.index, result.destination.index) : null;
40756
40769
  };
40770
+ TableList.prototype.dropDown = function () {
40771
+ return (React.createElement(Dropdown_1.Dropdown, { items: this.props.itemsDropdown ? this.props.itemsDropdown : [] },
40772
+ React.createElement(Button_1.Button, { type: "primary", icon: "plus-large", text: "Add item", size: "small", shape: "round", iconOnly: true, onClick: function () { return false; } })));
40773
+ };
40757
40774
  TableList.prototype.render = function () {
40758
40775
  var _a;
40759
40776
  var _this = this;
40760
- var classes = (0, classnames_1.default)((_a = {
40761
- 'table-list': !this.props.addItem
40777
+ var classes = (0, classnames_1.default)('', (_a = {
40778
+ 'table-list': !this.props.addItem,
40779
+ 'table-list--read-only': this.props.readOnly
40762
40780
  },
40763
40781
  _a["".concat(this.props.className)] = this.props.className,
40764
40782
  _a));
40765
- return (this.props.array ?
40766
- this.props.dragAndDrop ?
40767
- React.createElement(react_beautiful_dnd_1.DragDropContext, { onDragEnd: this.onDragEnd },
40783
+ return (this.state.items.length > 0
40784
+ ? this.props.dragAndDrop
40785
+ ? React.createElement(react_beautiful_dnd_1.DragDropContext, { onDragEnd: this.onDragEnd },
40768
40786
  React.createElement(react_beautiful_dnd_1.Droppable, { droppableId: "droppable" }, function (provided, _snapshot) { return (React.createElement("ul", __assign({ className: classes, ref: provided.innerRef }, provided.droppableProps),
40769
40787
  _this.state.items.map(function (item, index) { return (React.createElement(react_beautiful_dnd_1.Draggable, { key: index, draggableId: "".concat(index), index: index }, function (provided2, _snapshot2) { return (React.createElement("div", __assign({ ref: provided2.innerRef }, provided2.draggableProps, provided2.dragHandleProps),
40770
- React.createElement(TableListItem, { dragAndDrop: _this.props.dragAndDrop, start: item.start, center: item.center, end: item.end, action: item.action, onClick: item.onClick ? item.onClick : undefined, addItem: _this.props.addItem, itemsDropdown: _this.props.itemsDropdown }))); })); }),
40771
- provided.placeholder)); }))
40772
- : React.createElement("ul", { className: classes }, this.state.items.map(function (item, index) { return (React.createElement(TableListItem, { key: index, start: item.start, center: item.center, end: item.end, action: item.action, onClick: item.onClick ? item.onClick : undefined, addItem: _this.props.addItem, itemsDropdown: _this.props.itemsDropdown })); }))
40773
- : this.props.children &&
40774
- React.createElement("ul", { className: classes }, this.props.children));
40788
+ React.createElement(TableListItem, { dragAndDrop: _this.props.dragAndDrop, start: item.start, center: item.center, end: item.end, action: item.action, onClick: item.onClick ? item.onClick : undefined, onDoubleClick: item.onDoubleClick
40789
+ ? item.onDoubleClick
40790
+ : undefined, addItem: _this.props.addItem, itemsDropdown: _this.props.itemsDropdown, hexColor: item.hexColor, onAddItem: function () { return _this.props.onAddItem
40791
+ && _this.props.onAddItem(index, item); }, showDragHandle: _this.props.showDragHandle }))); })); }),
40792
+ provided.placeholder,
40793
+ (_this.props.addItem && !_this.props.readOnly) &&
40794
+ React.createElement("li", { className: "table-list__add-item table-list__item--margin" },
40795
+ React.createElement(Tooltip_1.Tooltip, { text: 'Add item', flow: 'top', appendToBody: true },
40796
+ React.createElement("div", { className: 'table-list__add-item--container sd-margin-x--auto' }, _this.dropDown()))))); }))
40797
+ : React.createElement("ul", { className: classes },
40798
+ this.state.items.map(function (item, index) { return (React.createElement(TableListItem, { key: index, start: item.start, center: item.center, end: item.end, action: item.action, onClick: item.onClick ? item.onClick : undefined, onDoubleClick: item.onDoubleClick
40799
+ ? item.onDoubleClick
40800
+ : undefined, addItem: _this.props.addItem, itemsDropdown: _this.props.itemsDropdown, hexColor: item.hexColor, onAddItem: function () { return _this.props.onAddItem
40801
+ && _this.props.onAddItem(index, item); } })); }),
40802
+ (this.props.addItem && !this.props.readOnly) &&
40803
+ React.createElement("li", { className: "table-list__add-item table-list__item--margin" },
40804
+ React.createElement(Tooltip_1.Tooltip, { text: 'Add item', flow: 'top', appendToBody: true },
40805
+ React.createElement("div", { className: 'table-list__add-item--container sd-margin-x--auto' }, this.dropDown()))))
40806
+ : (this.props.addItem && !this.props.readOnly) ? React.createElement("ul", { className: classes },
40807
+ React.createElement("li", { className: "table-list__add-item table-list__item--margin" },
40808
+ React.createElement(Tooltip_1.Tooltip, { text: 'Add item', flow: 'top', appendToBody: true },
40809
+ React.createElement("div", { className: 'table-list__add-item--container sd-margin-x--auto' }, this.dropDown()))))
40810
+ : null);
40775
40811
  };
40776
40812
  return TableList;
40777
40813
  }(React.PureComponent));
@@ -40779,12 +40815,42 @@ exports.TableList = TableList;
40779
40815
  var TableListItem = /** @class */ (function (_super) {
40780
40816
  __extends(TableListItem, _super);
40781
40817
  function TableListItem() {
40782
- return _super !== null && _super.apply(this, arguments) || this;
40818
+ var _this = _super !== null && _super.apply(this, arguments) || this;
40819
+ _this.delay = 200;
40820
+ _this.prevent = false;
40821
+ _this.onSingleClick = function () {
40822
+ _this.timer = setTimeout(function () {
40823
+ if (!_this.prevent) {
40824
+ if (_this.props.onClick) {
40825
+ _this.props.onClick();
40826
+ }
40827
+ }
40828
+ }, _this.delay);
40829
+ };
40830
+ _this.onDoubleClick = function () {
40831
+ clearTimeout(_this.timer);
40832
+ _this.prevent = true;
40833
+ if (_this.props.onDoubleClick) {
40834
+ _this.props.onDoubleClick();
40835
+ }
40836
+ setTimeout(function () {
40837
+ _this.prevent = false;
40838
+ }, _this.delay);
40839
+ };
40840
+ return _this;
40783
40841
  }
40784
40842
  TableListItem.prototype.render = function () {
40843
+ var _this = this;
40844
+ var classes = (0, classnames_1.default)('table-list__item', {
40845
+ 'table-list__item--clickable': this.props.onClick,
40846
+ 'table-list__item--draggable': this.props.dragAndDrop,
40847
+ 'table-list__item--drag-handles-always': !this.props.showDragHandle,
40848
+ 'table-list__item--drag-handles-none': this.props.showDragHandle === 'none',
40849
+ });
40785
40850
  return (this.props.addItem ?
40786
40851
  React.createElement("li", { className: 'table-list__item-container' },
40787
- React.createElement("div", { onClick: this.props.onClick, className: "table-list__item ".concat(this.props.onClick && 'table-list__item--clickable', " ").concat(this.props.dragAndDrop && 'table-list__item--draggable') },
40852
+ React.createElement("div", { onClick: function () { return _this.onSingleClick(); }, onDoubleClick: function () { return _this.onDoubleClick(); }, className: classes },
40853
+ React.createElement("div", { className: 'table-list__item-border', style: { backgroundColor: this.props.hexColor } }),
40788
40854
  React.createElement("div", { className: 'table-list__item-content' },
40789
40855
  React.createElement("div", { className: 'table-list__item-content-block' }, this.props.start && this.props.start),
40790
40856
  React.createElement("div", { className: 'table-list__item-content-block table-list__item-content-block--center' }, this.props.center && this.props.center),
@@ -40793,9 +40859,10 @@ var TableListItem = /** @class */ (function (_super) {
40793
40859
  React.createElement("div", { className: 'table-list__add-bar-container' },
40794
40860
  React.createElement(Tooltip_1.Tooltip, { text: 'Add item', flow: 'top', appendToBody: true },
40795
40861
  React.createElement("div", { className: 'table-list__add-bar' },
40796
- React.createElement(Dropdown_1.Dropdown, { items: this.props.itemsDropdown },
40862
+ React.createElement(Dropdown_1.Dropdown, { onChange: this.props.onAddItem, items: this.props.itemsDropdown ? this.props.itemsDropdown : [] },
40797
40863
  React.createElement(Button_1.Button, { type: "primary", icon: "plus-large", text: "Add item", size: "small", shape: "round", iconOnly: true, onClick: function () { return false; } }))))))
40798
- : React.createElement("li", { className: "table-list__item ".concat(this.props.onClick && 'table-list__item--clickable', " ").concat(this.props.dragAndDrop && 'table-list__item--draggable', " table-list__item--margin"), onClick: this.props.onClick },
40864
+ : React.createElement("li", { className: "".concat(classes, " table-list__item--margin"), onClick: function () { return _this.onSingleClick(); }, onDoubleClick: function () { return _this.onDoubleClick(); } },
40865
+ React.createElement("div", { className: 'table-list__item-border', style: { backgroundColor: this.props.hexColor } }),
40799
40866
  React.createElement("div", { className: 'table-list__item-content' },
40800
40867
  React.createElement("div", { className: 'table-list__item-content-block' }, this.props.start && this.props.start),
40801
40868
  React.createElement("div", { className: 'table-list__item-content-block table-list__item-content-block--center' }, this.props.center && this.props.center),
@@ -56962,15 +57029,13 @@ var ReactDOM = __importStar(__webpack_require__(9));
56962
57029
  var core_1 = __webpack_require__(61);
56963
57030
  var react_id_generator_1 = __webpack_require__(8);
56964
57031
  var Dropdown = function (_a) {
56965
- var items = _a.items, header = _a.header, footer = _a.footer, children = _a.children, append = _a.append, align = _a.align;
57032
+ var items = _a.items, header = _a.header, footer = _a.footer, children = _a.children, append = _a.append, align = _a.align, onChange = _a.onChange;
56966
57033
  var _b = React.useState(false), open = _b[0], setOpen = _b[1];
56967
57034
  var _c = React.useState(false), change = _c[0], setChange = _c[1];
56968
57035
  var menuID = (0, react_id_generator_1.useId)()[0];
56969
57036
  var DROPDOWN_ID = "react-placeholder";
56970
57037
  var ref = React.useRef(null);
56971
- var refSubMenu = React.useRef(null);
56972
57038
  var buttonRef = React.useRef(null);
56973
- var refButtonSubMenu = React.useRef(null);
56974
57039
  var headerElements = header === null || header === void 0 ? void 0 : header.map(function (el, index) {
56975
57040
  return each(el, index);
56976
57041
  });
@@ -57089,20 +57154,7 @@ var Dropdown = function (_a) {
57089
57154
  item['items'].forEach(function (el, key) {
57090
57155
  submenuItems_1.push(each(el, key));
57091
57156
  });
57092
- return (React.createElement("li", { key: index },
57093
- React.createElement("div", { className: 'dropdown' },
57094
- React.createElement("button", { ref: refButtonSubMenu, className: 'dropdown__toggle dropdown-toggle', "aria-haspopup": "menu", tabIndex: 0, onMouseOver: function () {
57095
- var subMenuRef = refSubMenu.current;
57096
- var subToggleRef = refButtonSubMenu.current;
57097
- if (subMenuRef && subToggleRef) {
57098
- (0, core_1.createPopper)(subToggleRef, subMenuRef, {
57099
- placement: 'right-start',
57100
- });
57101
- }
57102
- }, onClick: item['onSelect'] },
57103
- item['icon'] ? React.createElement("i", { className: 'icon-' + item['icon'] }) : null,
57104
- item['label']),
57105
- React.createElement("ul", { ref: refSubMenu, role: 'menu', className: 'dropdown__menu' }, submenuItems_1))));
57157
+ return (React.createElement(DropdownItemWithSubmenu, { key: index, item: item, subMenuItems: submenuItems_1 }));
57106
57158
  }
57107
57159
  else if (item['type'] === 'group') {
57108
57160
  var groupItems_1 = [];
@@ -57118,7 +57170,7 @@ var Dropdown = function (_a) {
57118
57170
  return (React.createElement("li", { className: "dropdown__menu-divider", key: index }));
57119
57171
  }
57120
57172
  else {
57121
- return (React.createElement(DropdownItem, { key: index, label: item['label'], icon: item['icon'], active: item['active'], onSelect: item['onSelect'] }));
57173
+ return (React.createElement(DropdownItem, { key: index, label: item['label'], icon: item['icon'], active: item['active'], onSelect: item['onSelect'], onChange: onChange }));
57122
57174
  }
57123
57175
  }
57124
57176
  return (React.createElement("div", { className: 'dropdown ' + (open ? 'open' : '') },
@@ -57160,12 +57212,46 @@ var Dropdown = function (_a) {
57160
57212
  };
57161
57213
  exports.Dropdown = Dropdown;
57162
57214
  var DropdownItem = function (_a) {
57163
- var label = _a.label, icon = _a.icon, active = _a.active, onSelect = _a.onSelect;
57215
+ var label = _a.label, icon = _a.icon, active = _a.active, onSelect = _a.onSelect, onChange = _a.onChange;
57164
57216
  return (React.createElement("li", { role: 'none', className: active ? 'dropdown__menu-item--active' : '' },
57165
- React.createElement("button", { tabIndex: 0, role: 'menuitem', onClick: onSelect },
57217
+ React.createElement("button", { tabIndex: 0, role: 'menuitem', onClick: function () {
57218
+ onSelect();
57219
+ if (onChange) {
57220
+ onChange();
57221
+ }
57222
+ } },
57166
57223
  React.createElement("i", { className: icon ? ('icon-' + icon) : '' }),
57167
57224
  label)));
57168
57225
  };
57226
+ var DropdownItemWithSubmenu = function (_a) {
57227
+ var index = _a.index, item = _a.item, subMenuItems = _a.subMenuItems;
57228
+ var _b = React.useState(undefined), open = _b[0], setOpen = _b[1];
57229
+ var refButtonSubMenu = React.useRef(null);
57230
+ var refSubMenu = React.useRef(null);
57231
+ React.useEffect(function () {
57232
+ var subMenuRef = refSubMenu.current;
57233
+ var subToggleRef = refButtonSubMenu.current;
57234
+ if (open === true) {
57235
+ document.body.appendChild(subMenuRef);
57236
+ subMenuRef.style.display = 'block';
57237
+ }
57238
+ else if (open === false) {
57239
+ document.body.removeChild(subMenuRef);
57240
+ subMenuRef.style.display = 'none';
57241
+ }
57242
+ if (subMenuRef && subToggleRef) {
57243
+ (0, core_1.createPopper)(subToggleRef, subMenuRef, {
57244
+ placement: 'right-start',
57245
+ });
57246
+ }
57247
+ }, [open]);
57248
+ return (React.createElement("li", { key: index, ref: refButtonSubMenu },
57249
+ React.createElement("div", { className: 'dropdown', onMouseLeave: function () { return setOpen(false); } },
57250
+ React.createElement("button", { className: 'dropdown__toggle dropdown-toggle', "aria-haspopup": "menu", tabIndex: 0, onMouseOver: function () { return setOpen(true); }, onClick: item['onSelect'] },
57251
+ item['icon'] ? React.createElement("i", { className: 'icon-' + item['icon'] }) : null,
57252
+ item['label']),
57253
+ React.createElement("ul", { role: 'menu', ref: refSubMenu, style: { display: 'none' }, className: 'dropdown__menu' }, subMenuItems))));
57254
+ };
57169
57255
 
57170
57256
 
57171
57257
  /***/ }),
@@ -62468,22 +62554,18 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
62468
62554
  Object.defineProperty(exports, "__esModule", { value: true });
62469
62555
  exports.TimePicker = void 0;
62470
62556
  var React = __importStar(__webpack_require__(0));
62471
- // import classNames from 'classnames';
62472
62557
  var react_id_generator_1 = __importDefault(__webpack_require__(8));
62473
62558
  var Form_1 = __webpack_require__(14);
62474
62559
  var TimePicker = /** @class */ (function (_super) {
62475
62560
  __extends(TimePicker, _super);
62476
- function TimePicker(props) {
62477
- var _this = _super.call(this, props) || this;
62561
+ function TimePicker() {
62562
+ var _this = _super !== null && _super.apply(this, arguments) || this;
62478
62563
  _this.htmlId = (0, react_id_generator_1.default)();
62479
- _this.state = {
62480
- invalid: _this.props.invalid ? _this.props.invalid : false,
62481
- };
62482
62564
  return _this;
62483
62565
  }
62484
62566
  TimePicker.prototype.render = function () {
62485
62567
  var _this = this;
62486
- return (React.createElement(Form_1.InputWrapper, { label: this.props.label, error: this.props.error, required: this.props.required, disabled: this.props.disabled, invalid: this.state.invalid, info: this.props.info, inlineLabel: this.props.inlineLabel, labelHidden: this.props.labelHidden, fullWidth: this.props.fullWidth, htmlId: this.htmlId, tabindex: this.props.tabindex },
62568
+ 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 },
62487
62569
  React.createElement("input", { id: this.htmlId, "aria-labelledby": this.htmlId + 'label', type: "time", step: this.props.allowSeconds ? 1 : undefined, className: "sd-input__input", value: this.props.value, required: this.props.required, disabled: this.props.disabled, onChange: function (event) {
62488
62570
  _this.props.onChange(event.target.value);
62489
62571
  } })));
@@ -99218,14 +99300,22 @@ var SearchBar = /** @class */ (function (_super) {
99218
99300
  }
99219
99301
  }, onChange: function (event) { return _this.setState({ inputValue: event.target.value }); }, onFocus: function () { return _this.setState({ focused: true }); } }),
99220
99302
  this.state.inputValue &&
99221
- React.createElement("button", { className: "sd-searchbar__cancel", onClick: function () { return _this.setState({ inputValue: '' }); } },
99303
+ React.createElement("button", { className: "sd-searchbar__cancel", onClick: function () {
99304
+ _this.setState({ inputValue: '' });
99305
+ setTimeout(function () {
99306
+ if (_this.props.onSubmit) {
99307
+ _this.props.onSubmit(_this.state.inputValue);
99308
+ }
99309
+ });
99310
+ } },
99222
99311
  React.createElement(Icon_1.Icon, { name: 'remove-sign' })),
99223
- React.createElement("button", { id: "sd-searchbar__search-btn", className: "sd-searchbar__search-btn ".concat(this.state.keyDown ? 'sd-searchbar__search-btn--active' : ''), onClick: function () {
99224
- if (_this.props.onSubmit) {
99225
- _this.props.onSubmit(_this.state.inputValue);
99226
- }
99227
- } },
99228
- React.createElement(Icon_1.Icon, { name: 'chevron-right-thin' }))));
99312
+ this.state.inputValue &&
99313
+ React.createElement("button", { id: "sd-searchbar__search-btn", className: "sd-searchbar__search-btn ".concat(this.state.keyDown ? 'sd-searchbar__search-btn--active' : ''), onClick: function () {
99314
+ if (_this.props.onSubmit) {
99315
+ _this.props.onSubmit(_this.state.inputValue);
99316
+ }
99317
+ } },
99318
+ React.createElement(Icon_1.Icon, { name: 'chevron-right-thin' }))));
99229
99319
  };
99230
99320
  return SearchBar;
99231
99321
  }(React.PureComponent));
@@ -100912,7 +101002,7 @@ var CoreLayout = /** @class */ (function (_super) {
100912
101002
  return (React.createElement(_1.CoreLayoutContainer, null,
100913
101003
  this.props.slideInMenu && (React.createElement(_1.CoreLayoutSlideInMenu, { menuId: this.props.menuId, menuOpen: this.props.menuOpen }, this.props.slideInMenu)),
100914
101004
  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)),
100915
- React.createElement(_1.CoreLayoutMain, null, this.props.children),
101005
+ React.createElement(_1.CoreLayoutMain, { editorFullWidth: this.props.editorFullWidth }, this.props.children),
100916
101006
  this.props.footer && (React.createElement(_1.CoreLayoutFooter, null, this.props.footer)),
100917
101007
  this.props.overlay && (React.createElement(_1.CoreLayoutOverlay, null, this.props.overlay))));
100918
101008
  };
@@ -101078,16 +101168,23 @@ var __importStar = (this && this.__importStar) || function (mod) {
101078
101168
  __setModuleDefault(result, mod);
101079
101169
  return result;
101080
101170
  };
101171
+ var __importDefault = (this && this.__importDefault) || function (mod) {
101172
+ return (mod && mod.__esModule) ? mod : { "default": mod };
101173
+ };
101081
101174
  Object.defineProperty(exports, "__esModule", { value: true });
101082
101175
  exports.CoreLayoutMain = void 0;
101083
101176
  var React = __importStar(__webpack_require__(0));
101177
+ var classnames_1 = __importDefault(__webpack_require__(2));
101084
101178
  var CoreLayoutMain = /** @class */ (function (_super) {
101085
101179
  __extends(CoreLayoutMain, _super);
101086
101180
  function CoreLayoutMain() {
101087
101181
  return _super !== null && _super.apply(this, arguments) || this;
101088
101182
  }
101089
101183
  CoreLayoutMain.prototype.render = function () {
101090
- return (React.createElement("section", { id: this.props.id, className: 'sd-content sd-content-wrapper' }, this.props.children));
101184
+ var classes = (0, classnames_1.default)('sd-content sd-content-wrapper', {
101185
+ 'sd-content-wrapper--editor-full': this.props.editorFullWidth,
101186
+ });
101187
+ return (React.createElement("section", { id: this.props.id, className: classes }, this.props.children));
101091
101188
  };
101092
101189
  return CoreLayoutMain;
101093
101190
  }(React.PureComponent));
@@ -72,6 +72,7 @@ export class CoreLayout extends React.Component<IProps, IState> {
72
72
  active={this.state.mainMenuOpen}
73
73
  ariaControls='main-menu'
74
74
  menuId='main-menu'
75
+ editorFullWidth={true}
75
76
  slideInMenu={(
76
77
  <Layout.MainMenu
77
78
  headerTitle='Main Menu'