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

package/dist/superdesk-ui.bundle.css

@@ -32136,13 +32136,13 @@ a.label {
 .modal-open {
   overflow: hidden; }
   .modal-open .dropdown__menu {
-    z-index: 2050; }
+    z-index: 3050; }
   .modal-open .dropdown.open {
-    *z-index: 2050; }
+    *z-index: 3050; }
   .modal-open .popover {
-    z-index: 2060; }
+    z-index: 3060; }
   .modal-open .tooltip {
-    z-index: 2090; }
+    z-index: 3090; }
 
 .modal {
   position: fixed;
@@ -35266,9 +35266,12 @@ tags-input,
   .table-list--contained {
     gap: 0; }
 
+.table-list--read-only {
+  pointer-events: none;
+  cursor: default; }
+
 .table-list__item {
   display: grid;
-  z-index: 1;
   align-items: center;
   grid-template-columns: [contentCol] 1fr [actionsVisible] auto [actionsHidden] auto;
   position: relative;
@@ -35280,15 +35283,6 @@ tags-input,
   border: 1px solid var(--sd-colour-line--light);
   transition: all 0.2s ease-in-out;
   inset-inline-start: 0; }
-  .table-list__item::before {
-    content: "";
-    width: 6px;
-    position: absolute;
-    inset-block: 3px;
-    inset-inline-start: 3px;
-    background-color: var(--sd-colour-panel-bg--100);
-    z-index: 1;
-    border-radius: 2px; }
   .table-list__item--margin {
     margin-bottom: 0.8rem; }
   .table-list__item--selected {
@@ -35353,6 +35347,32 @@ tags-input,
     pointer-events: none;
     opacity: 0.5; }
 
+.table-list__add-item {
+  display: grid;
+  align-items: center;
+  position: relative;
+  flex-direction: row;
+  padding: 8px;
+  min-height: 4.2rem;
+  border-radius: var(--b-radius--medium);
+  background-color: transparent;
+  border: 1px dashed var(--sd-colour-line--medium);
+  transition: all 0.2s ease-in-out;
+  inset-inline-start: 0; }
+  .table-list__add-item--container {
+    display: flex;
+    justify-content: center;
+    align-items: center; }
+
+.table-list__item-border {
+  width: 6px;
+  background-color: var(--sd-colour-panel-bg--100);
+  z-index: 2;
+  position: absolute;
+  inset-block: 3px;
+  inset-inline-start: 3px;
+  border-radius: 2px; }
+
 .table-list__item-content {
   grid-column: contentCol;
   grid-row: mainRow;
@@ -35474,6 +35494,52 @@ tags-input,
 .side-panel__content-block .table-list__item-content {
   grid-template-columns: [columnLeft] 140px [columncenter] 1fr [columnRight] auto; }
 
+.table-list--gap-s {
+  gap: 0.8rem; }
+
+.table-list__item--draggable.table-list__item--drag-handles-always {
+  border-left-width: 16px;
+  border-left-color: var(--sd-colour-line--medium); }
+  .table-list__item--draggable.table-list__item--drag-handles-always::after {
+    content: "";
+    width: 20px;
+    position: absolute;
+    inset-block: -1px;
+    inset-inline-start: -18px;
+    background-image: url(dots.svg);
+    background-repeat: no-repeat;
+    background-position: center center;
+    z-index: 2;
+    border-radius: var(--b-radius--small);
+    opacity: 0.85; }
+  .table-list__item--draggable.table-list__item--drag-handles-always:hover {
+    border-left-color: var(--sd-colour-line--strong); }
+    .table-list__item--draggable.table-list__item--drag-handles-always:hover::after {
+      cursor: grab; }
+  .table-list__item--draggable.table-list__item--drag-handles-always:active {
+    border-color: var(--sd-colour-interactive);
+    cursor: grabbing; }
+    .table-list__item--draggable.table-list__item--drag-handles-always:active::after {
+      opacity: 1 !important;
+      cursor: grabbing; }
+
+.table-list__item--draggable.table-list__item--drag-handles-none {
+  border-left-width: 1px; }
+  .table-list__item--draggable.table-list__item--drag-handles-none::after {
+    content: "";
+    width: 0;
+    opacity: 0; }
+  .table-list__item--draggable.table-list__item--drag-handles-none:hover {
+    border-left-color: var(--sd-colour-line--strong); }
+    .table-list__item--draggable.table-list__item--drag-handles-none:hover::after {
+      cursor: grab; }
+  .table-list__item--draggable.table-list__item--drag-handles-none:active {
+    border-color: var(--sd-colour-interactive);
+    cursor: grabbing; }
+    .table-list__item--draggable.table-list__item--drag-handles-none:active::after {
+      opacity: 1 !important;
+      cursor: grabbing; }
+
 .hamburger {
   cursor: pointer;
   transition-property: opacity;
@@ -38682,6 +38748,8 @@ tags-input,
   grid-template-rows: 1fr; }
   .sd-content-wrapper .sd-main-content-grid {
     grid-column: contentArea; }
+  .sd-content-wrapper--editor-full {
+    grid-template-columns: [sideTabsLeft] auto [contentArea] auto [contentSplitter] auto [authoringArea] 1fr; }
 
 .sd-content-wrapper__left-tabs {
   grid-column: sideTabsLeft; }
@@ -44900,7 +44968,7 @@ a.text-link {
   background: var(--color-dropdown-menu-Bg);
   color: var(--sd-colour-interactive);
   box-shadow: -2px -1px 5px -2px rgba(0, 0, 0, 0.2), 3px -1px 5px -2px rgba(0, 0, 0, 0.2);
-  z-index: 1001; }
+  z-index: 2001; }
   .dropdown.open .navbtn > i {
     opacity: 1;
     color: var(--sd-colour-interactive); }
@@ -45458,7 +45526,7 @@ a.text-link {
   position: absolute;
   top: 100%;
   inset-inline-start: 0;
-  z-index: 1000;
+  z-index: 2000;
   display: none;
   min-width: 200px;
   padding: 1rem 0;

package/dist/superdesk-ui.bundle.js

@@ -38925,7 +38925,15 @@ function getDurationString(seconds) {
     var hour = zeroPad(Math.floor(seconds / 3600));
     var minute = zeroPad(Math.floor((seconds % 3600) / 60));
     var second = zeroPad(Math.floor(seconds % 60));
-    return "".concat(hour, "h ").concat(minute, "m ").concat(second, "s");
+    if (Number(hour) === 0 && Number(minute) > 0) {
+        return "".concat(minute, "m ").concat(second, "s");
+    }
+    else if (Number(hour) === 0 && Number(minute) === 0) {
+        return "".concat(second, "s");
+    }
+    else {
+        return "".concat(hour, "h ").concat(minute, "m ").concat(second, "s");
+    }
 }
 exports.getDurationString = getDurationString;
 
@@ -40731,16 +40739,21 @@ var TableList = /** @class */ (function (_super) {
             items: [],
         };
         _this.onDragEnd = _this.onDragEnd.bind(_this);
+        _this.dropDown = _this.dropDown.bind(_this);
         return _this;
     }
     TableList.prototype.componentDidMount = function () {
-        this.setState({ items: this.props.array });
+        if (this.props.array) {
+            this.setState({ items: this.props.array });
+        }
     };
     TableList.prototype.componentDidUpdate = function (prevProps) {
-        if (prevProps.array !== this.props.array) {
-            this.setState({
-                items: this.props.array,
-            });
+        if (this.props.array) {
+            if (prevProps.array !== this.props.array) {
+                this.setState({
+                    items: this.props.array,
+                });
+            }
         }
     };
     TableList.prototype.onDragEnd = function (result) {
@@ -40754,24 +40767,47 @@ var TableList = /** @class */ (function (_super) {
         return this.props.onDrag ?
             this.props.onDrag(result.source.index, result.destination.index) : null;
     };
+    TableList.prototype.dropDown = function () {
+        return (React.createElement(Dropdown_1.Dropdown, { items: this.props.itemsDropdown ? this.props.itemsDropdown : [] },
+            React.createElement(Button_1.Button, { type: "primary", icon: "plus-large", text: "Add item", size: "small", shape: "round", iconOnly: true, onClick: function () { return false; } })));
+    };
     TableList.prototype.render = function () {
         var _a;
         var _this = this;
-        var classes = (0, classnames_1.default)((_a = {
-                'table-list': !this.props.addItem
+        var classes = (0, classnames_1.default)('', (_a = {
+                'table-list': !this.props.addItem,
+                'table-list--read-only': this.props.readOnly
             },
             _a["".concat(this.props.className)] = this.props.className,
             _a));
-        return (this.props.array ?
-            this.props.dragAndDrop ?
-                React.createElement(react_beautiful_dnd_1.DragDropContext, { onDragEnd: this.onDragEnd },
+        return (this.state.items.length > 0
+            ? this.props.dragAndDrop
+                ? React.createElement(react_beautiful_dnd_1.DragDropContext, { onDragEnd: this.onDragEnd },
                     React.createElement(react_beautiful_dnd_1.Droppable, { droppableId: "droppable" }, function (provided, _snapshot) { return (React.createElement("ul", __assign({ className: classes, ref: provided.innerRef }, provided.droppableProps),
                         _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),
-                            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 }))); })); }),
-                        provided.placeholder)); }))
-                : 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 })); }))
-            : this.props.children &&
-                React.createElement("ul", { className: classes }, this.props.children));
+                            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
+                                    ? item.onDoubleClick
+                                    : undefined, addItem: _this.props.addItem, itemsDropdown: _this.props.itemsDropdown, hexColor: item.hexColor, onAddItem: function () { return _this.props.onAddItem
+                                    && _this.props.onAddItem(index, item); }, showDragHandle: _this.props.showDragHandle }))); })); }),
+                        provided.placeholder,
+                        (_this.props.addItem && !_this.props.readOnly) &&
+                            React.createElement("li", { className: "table-list__add-item table-list__item--margin" },
+                                React.createElement(Tooltip_1.Tooltip, { text: 'Add item', flow: 'top', appendToBody: true },
+                                    React.createElement("div", { className: 'table-list__add-item--container sd-margin-x--auto' }, _this.dropDown()))))); }))
+                : 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, onDoubleClick: item.onDoubleClick
+                            ? item.onDoubleClick
+                            : undefined, addItem: _this.props.addItem, itemsDropdown: _this.props.itemsDropdown, hexColor: item.hexColor, onAddItem: function () { return _this.props.onAddItem
+                            && _this.props.onAddItem(index, item); } })); }),
+                    (this.props.addItem && !this.props.readOnly) &&
+                        React.createElement("li", { className: "table-list__add-item table-list__item--margin" },
+                            React.createElement(Tooltip_1.Tooltip, { text: 'Add item', flow: 'top', appendToBody: true },
+                                React.createElement("div", { className: 'table-list__add-item--container sd-margin-x--auto' }, this.dropDown()))))
+            : (this.props.addItem && !this.props.readOnly) ? React.createElement("ul", { className: classes },
+                React.createElement("li", { className: "table-list__add-item table-list__item--margin" },
+                    React.createElement(Tooltip_1.Tooltip, { text: 'Add item', flow: 'top', appendToBody: true },
+                        React.createElement("div", { className: 'table-list__add-item--container sd-margin-x--auto' }, this.dropDown()))))
+                : null);
     };
     return TableList;
 }(React.PureComponent));
@@ -40779,12 +40815,42 @@ exports.TableList = TableList;
 var TableListItem = /** @class */ (function (_super) {
     __extends(TableListItem, _super);
     function TableListItem() {
-        return _super !== null && _super.apply(this, arguments) || this;
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.delay = 200;
+        _this.prevent = false;
+        _this.onSingleClick = function () {
+            _this.timer = setTimeout(function () {
+                if (!_this.prevent) {
+                    if (_this.props.onClick) {
+                        _this.props.onClick();
+                    }
+                }
+            }, _this.delay);
+        };
+        _this.onDoubleClick = function () {
+            clearTimeout(_this.timer);
+            _this.prevent = true;
+            if (_this.props.onDoubleClick) {
+                _this.props.onDoubleClick();
+            }
+            setTimeout(function () {
+                _this.prevent = false;
+            }, _this.delay);
+        };
+        return _this;
     }
     TableListItem.prototype.render = function () {
+        var _this = this;
+        var classes = (0, classnames_1.default)('table-list__item', {
+            'table-list__item--clickable': this.props.onClick,
+            'table-list__item--draggable': this.props.dragAndDrop,
+            'table-list__item--drag-handles-always': !this.props.showDragHandle,
+            'table-list__item--drag-handles-none': this.props.showDragHandle === 'none',
+        });
         return (this.props.addItem ?
             React.createElement("li", { className: 'table-list__item-container' },
-                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') },
+                React.createElement("div", { onClick: function () { return _this.onSingleClick(); }, onDoubleClick: function () { return _this.onDoubleClick(); }, className: classes },
+                    React.createElement("div", { className: 'table-list__item-border', style: { backgroundColor: this.props.hexColor } }),
                     React.createElement("div", { className: 'table-list__item-content' },
                         React.createElement("div", { className: 'table-list__item-content-block' }, this.props.start && this.props.start),
                         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) {
                 React.createElement("div", { className: 'table-list__add-bar-container' },
                     React.createElement(Tooltip_1.Tooltip, { text: 'Add item', flow: 'top', appendToBody: true },
                         React.createElement("div", { className: 'table-list__add-bar' },
-                            React.createElement(Dropdown_1.Dropdown, { items: this.props.itemsDropdown },
+                            React.createElement(Dropdown_1.Dropdown, { onChange: this.props.onAddItem, items: this.props.itemsDropdown ? this.props.itemsDropdown : [] },
                                 React.createElement(Button_1.Button, { type: "primary", icon: "plus-large", text: "Add item", size: "small", shape: "round", iconOnly: true, onClick: function () { return false; } }))))))
-            : 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 },
+            : React.createElement("li", { className: "".concat(classes, " table-list__item--margin"), onClick: function () { return _this.onSingleClick(); }, onDoubleClick: function () { return _this.onDoubleClick(); } },
+                React.createElement("div", { className: 'table-list__item-border', style: { backgroundColor: this.props.hexColor } }),
                 React.createElement("div", { className: 'table-list__item-content' },
                     React.createElement("div", { className: 'table-list__item-content-block' }, this.props.start && this.props.start),
                     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));
 var core_1 = __webpack_require__(61);
 var react_id_generator_1 = __webpack_require__(8);
 var Dropdown = function (_a) {
-    var items = _a.items, header = _a.header, footer = _a.footer, children = _a.children, append = _a.append, align = _a.align;
+    var items = _a.items, header = _a.header, footer = _a.footer, children = _a.children, append = _a.append, align = _a.align, onChange = _a.onChange;
     var _b = React.useState(false), open = _b[0], setOpen = _b[1];
     var _c = React.useState(false), change = _c[0], setChange = _c[1];
     var menuID = (0, react_id_generator_1.useId)()[0];
     var DROPDOWN_ID = "react-placeholder";
     var ref = React.useRef(null);
-    var refSubMenu = React.useRef(null);
     var buttonRef = React.useRef(null);
-    var refButtonSubMenu = React.useRef(null);
     var headerElements = header === null || header === void 0 ? void 0 : header.map(function (el, index) {
         return each(el, index);
     });
@@ -57089,20 +57154,7 @@ var Dropdown = function (_a) {
             item['items'].forEach(function (el, key) {
                 submenuItems_1.push(each(el, key));
             });
-            return (React.createElement("li", { key: index },
-                React.createElement("div", { className: 'dropdown' },
-                    React.createElement("button", { ref: refButtonSubMenu, className: 'dropdown__toggle dropdown-toggle', "aria-haspopup": "menu", tabIndex: 0, onMouseOver: function () {
-                            var subMenuRef = refSubMenu.current;
-                            var subToggleRef = refButtonSubMenu.current;
-                            if (subMenuRef && subToggleRef) {
-                                (0, core_1.createPopper)(subToggleRef, subMenuRef, {
-                                    placement: 'right-start',
-                                });
-                            }
-                        }, onClick: item['onSelect'] },
-                        item['icon'] ? React.createElement("i", { className: 'icon-' + item['icon'] }) : null,
-                        item['label']),
-                    React.createElement("ul", { ref: refSubMenu, role: 'menu', className: 'dropdown__menu' }, submenuItems_1))));
+            return (React.createElement(DropdownItemWithSubmenu, { key: index, item: item, subMenuItems: submenuItems_1 }));
         }
         else if (item['type'] === 'group') {
             var groupItems_1 = [];
@@ -57118,7 +57170,7 @@ var Dropdown = function (_a) {
             return (React.createElement("li", { className: "dropdown__menu-divider", key: index }));
         }
         else {
-            return (React.createElement(DropdownItem, { key: index, label: item['label'], icon: item['icon'], active: item['active'], onSelect: item['onSelect'] }));
+            return (React.createElement(DropdownItem, { key: index, label: item['label'], icon: item['icon'], active: item['active'], onSelect: item['onSelect'], onChange: onChange }));
         }
     }
     return (React.createElement("div", { className: 'dropdown ' + (open ? 'open' : '') },
@@ -57160,12 +57212,46 @@ var Dropdown = function (_a) {
 };
 exports.Dropdown = Dropdown;
 var DropdownItem = function (_a) {
-    var label = _a.label, icon = _a.icon, active = _a.active, onSelect = _a.onSelect;
+    var label = _a.label, icon = _a.icon, active = _a.active, onSelect = _a.onSelect, onChange = _a.onChange;
     return (React.createElement("li", { role: 'none', className: active ? 'dropdown__menu-item--active' : '' },
-        React.createElement("button", { tabIndex: 0, role: 'menuitem', onClick: onSelect },
+        React.createElement("button", { tabIndex: 0, role: 'menuitem', onClick: function () {
+                onSelect();
+                if (onChange) {
+                    onChange();
+                }
+            } },
             React.createElement("i", { className: icon ? ('icon-' + icon) : '' }),
             label)));
 };
+var DropdownItemWithSubmenu = function (_a) {
+    var index = _a.index, item = _a.item, subMenuItems = _a.subMenuItems;
+    var _b = React.useState(undefined), open = _b[0], setOpen = _b[1];
+    var refButtonSubMenu = React.useRef(null);
+    var refSubMenu = React.useRef(null);
+    React.useEffect(function () {
+        var subMenuRef = refSubMenu.current;
+        var subToggleRef = refButtonSubMenu.current;
+        if (open === true) {
+            document.body.appendChild(subMenuRef);
+            subMenuRef.style.display = 'block';
+        }
+        else if (open === false) {
+            document.body.removeChild(subMenuRef);
+            subMenuRef.style.display = 'none';
+        }
+        if (subMenuRef && subToggleRef) {
+            (0, core_1.createPopper)(subToggleRef, subMenuRef, {
+                placement: 'right-start',
+            });
+        }
+    }, [open]);
+    return (React.createElement("li", { key: index, ref: refButtonSubMenu },
+        React.createElement("div", { className: 'dropdown', onMouseLeave: function () { return setOpen(false); } },
+            React.createElement("button", { className: 'dropdown__toggle dropdown-toggle', "aria-haspopup": "menu", tabIndex: 0, onMouseOver: function () { return setOpen(true); }, onClick: item['onSelect'] },
+                item['icon'] ? React.createElement("i", { className: 'icon-' + item['icon'] }) : null,
+                item['label']),
+            React.createElement("ul", { role: 'menu', ref: refSubMenu, style: { display: 'none' }, className: 'dropdown__menu' }, subMenuItems))));
+};
 
 
 /***/ }),
@@ -62468,22 +62554,18 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TimePicker = void 0;
 var React = __importStar(__webpack_require__(0));
-// import classNames from 'classnames';
 var react_id_generator_1 = __importDefault(__webpack_require__(8));
 var Form_1 = __webpack_require__(14);
 var TimePicker = /** @class */ (function (_super) {
     __extends(TimePicker, _super);
-    function TimePicker(props) {
-        var _this = _super.call(this, props) || this;
+    function TimePicker() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
         _this.htmlId = (0, react_id_generator_1.default)();
-        _this.state = {
-            invalid: _this.props.invalid ? _this.props.invalid : false,
-        };
         return _this;
     }
     TimePicker.prototype.render = function () {
         var _this = this;
-        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 },
+        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 },
             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) {
                     _this.props.onChange(event.target.value);
                 } })));
@@ -99218,14 +99300,22 @@ var SearchBar = /** @class */ (function (_super) {
                     }
                 }, onChange: function (event) { return _this.setState({ inputValue: event.target.value }); }, onFocus: function () { return _this.setState({ focused: true }); } }),
             this.state.inputValue &&
-                React.createElement("button", { className: "sd-searchbar__cancel", onClick: function () { return _this.setState({ inputValue: '' }); } },
+                React.createElement("button", { className: "sd-searchbar__cancel", onClick: function () {
+                        _this.setState({ inputValue: '' });
+                        setTimeout(function () {
+                            if (_this.props.onSubmit) {
+                                _this.props.onSubmit(_this.state.inputValue);
+                            }
+                        });
+                    } },
                     React.createElement(Icon_1.Icon, { name: 'remove-sign' })),
-            React.createElement("button", { id: "sd-searchbar__search-btn", className: "sd-searchbar__search-btn ".concat(this.state.keyDown ? 'sd-searchbar__search-btn--active' : ''), onClick: function () {
-                    if (_this.props.onSubmit) {
-                        _this.props.onSubmit(_this.state.inputValue);
-                    }
-                } },
-                React.createElement(Icon_1.Icon, { name: 'chevron-right-thin' }))));
+            this.state.inputValue &&
+                React.createElement("button", { id: "sd-searchbar__search-btn", className: "sd-searchbar__search-btn ".concat(this.state.keyDown ? 'sd-searchbar__search-btn--active' : ''), onClick: function () {
+                        if (_this.props.onSubmit) {
+                            _this.props.onSubmit(_this.state.inputValue);
+                        }
+                    } },
+                    React.createElement(Icon_1.Icon, { name: 'chevron-right-thin' }))));
     };
     return SearchBar;
 }(React.PureComponent));
@@ -100912,7 +101002,7 @@ var CoreLayout = /** @class */ (function (_super) {
         return (React.createElement(_1.CoreLayoutContainer, null,
             this.props.slideInMenu && (React.createElement(_1.CoreLayoutSlideInMenu, { menuId: this.props.menuId, menuOpen: this.props.menuOpen }, this.props.slideInMenu)),
             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)),
-            React.createElement(_1.CoreLayoutMain, null, this.props.children),
+            React.createElement(_1.CoreLayoutMain, { editorFullWidth: this.props.editorFullWidth }, this.props.children),
             this.props.footer && (React.createElement(_1.CoreLayoutFooter, null, this.props.footer)),
             this.props.overlay && (React.createElement(_1.CoreLayoutOverlay, null, this.props.overlay))));
     };
@@ -101078,16 +101168,23 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __setModuleDefault(result, mod);
     return result;
 };
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.CoreLayoutMain = void 0;
 var React = __importStar(__webpack_require__(0));
+var classnames_1 = __importDefault(__webpack_require__(2));
 var CoreLayoutMain = /** @class */ (function (_super) {
     __extends(CoreLayoutMain, _super);
     function CoreLayoutMain() {
         return _super !== null && _super.apply(this, arguments) || this;
     }
     CoreLayoutMain.prototype.render = function () {
-        return (React.createElement("section", { id: this.props.id, className: 'sd-content sd-content-wrapper' }, this.props.children));
+        var classes = (0, classnames_1.default)('sd-content sd-content-wrapper', {
+            'sd-content-wrapper--editor-full': this.props.editorFullWidth,
+        });
+        return (React.createElement("section", { id: this.props.id, className: classes }, this.props.children));
     };
     return CoreLayoutMain;
 }(React.PureComponent));

package/examples/pages/playgrounds/react-playgrounds/CoreLayout.tsx

@@ -72,6 +72,7 @@ export class CoreLayout extends React.Component<IProps, IState> {
             active={this.state.mainMenuOpen}
             ariaControls='main-menu'
             menuId='main-menu'
+            editorFullWidth={true}
             slideInMenu={(
                 <Layout.MainMenu
                 headerTitle='Main Menu'