superdesk-ui-framework 4.0.32 → 4.0.33

package/app/styles/form-elements/_forms-general.scss

@@ -79,7 +79,7 @@
 		}
 	}
 
-	.form__row-item:not(.sd-flex-no-grow) {
+	.form__row-item:not(.sd-flex-no-grow, .form__row-item--no-grow) {
 		flex-basis: 0;
 	}
 

package/app/styles/form-elements/_inputs.scss

@@ -758,6 +758,7 @@
     .sd-input__input-container {
         grid-row: 2/3;
         grid-column: 2/4;
+        min-width: min-content;
     }
 
     .sd-input__input-container:has(input[type="time"]) {

package/app-typescript/components/Layouts/Panel.tsx

@@ -26,6 +26,7 @@ interface IPropsPanel {
         | {custom: React.CSSProperties['width']};
     background?: 'transparent' | 'light' | 'grey'; // defaults to light (white)
     open?: boolean;
+    ['data-test-id']?: string;
 }
 
 export default class Panel extends React.PureComponent<IPropsPanel> {
@@ -52,7 +53,13 @@ export default class Panel extends React.PureComponent<IPropsPanel> {
         let classes2 = classNames('side-panel__container', classes2Obj);
 
         return (
-            <div className={classes2} style={style} data-theme={this.props.theme ? `${this.props.theme}-ui` : null}>
+            <div
+                className={classes2}
+                style={style}
+                data-theme={this.props.theme ? `${this.props.theme}-ui` : null}
+                data-test-id={this.props['data-test-id']}
+
+            >
                 <div className={classes}>
                     {this.props.children}
                 </div>

package/app-typescript/components/Menu.tsx

@@ -58,6 +58,7 @@ interface IMenuBranch {
 interface IProps {
     items: Array<IMenuItem>;
     children: (toggle: (event: SyntheticEvent) => void) => JSX.Element;
+    'data-test-id'?: string;
 }
 
 function isSeparator(item: IMenuItem): item is ISeparator {
@@ -162,7 +163,7 @@ export class Menu extends React.Component<IProps, {}> {
                                 firstMenuItem.focus();
                             }
                         }}
-                        data-test-id="menu"
+                        data-test-id={this.props['data-test-id'] ?? 'menu'}
                         zIndex={this.zIndex}
                     />
                 </div>

package/app-typescript/components/Navigation/SideBarTabs.tsx

@@ -9,6 +9,7 @@ interface IProps {
     items: Array<ISideBarTab | 'divider'>;
     side?: 'none' | 'left' | 'right';
     disabled?: boolean;
+    ['data-test-id']?: string;
 }
 
 export interface ISideBarTab {
@@ -44,7 +45,7 @@ export class SideBarTabs extends React.PureComponent<IProps> {
 
     render() {
         return (
-            <div className='sd-sidetab-menu sd-sidetab-menu--static'>
+            <div className='sd-sidetab-menu sd-sidetab-menu--static' data-test-id={this.props['data-test-id']}>
                 <ul>
                     {this.props.items.map((item, index) => {
                         if (item === 'divider') {
@@ -65,6 +66,8 @@ export class SideBarTabs extends React.PureComponent<IProps> {
                                             },
                                         )}
                                         onClick={() => this.handleClick(item)}
+                                        data-test-id='widget-icon'
+                                        data-test-value={item.id}
                                     >
                                         {item.badgeValue != null && (
                                             <Badge text={item['badgeValue']} type='primary' />

package/app-typescript/components/Select.tsx

@@ -50,7 +50,7 @@ class Select extends React.Component<ISelect> {
                         className='sd-input__select'
                         id={this.htmlId}
                         value={this.props.value}
-                        aria-describedby={this.htmlId}
+                        aria-describedby={this.htmlId + 'label'}
                         tabIndex={this.props.tabindex}
                         onChange={this.handleChange}
                         disabled={this.props.disabled || this.props.readonly}

package/app-typescript/components/SubNav.tsx

@@ -5,6 +5,7 @@ interface IProps {
     color?: 'light' | 'darker' | 'blueGrey' | 'blueGreyDarker'; // defaults to 'light'
     theme?: 'light' | 'dark'; // defaults to 'light
     className?: string;
+    ['data-test-id']?: string;
 }
 interface IPropsDivider {
     width?: 'small' | 'medium' | 'large' | 'x-large'; // defaults to 'medium'
@@ -38,6 +39,7 @@ export class SubNav extends React.PureComponent<IProps> {
             <div
                 data-theme={this.props.theme ? `${this.props.theme}-ui` : defaultTheme}
                 className={classes}
+                data-test-id={this.props['data-test-id']}
             >
                 {this.props.children}
             </div>

package/dist/examples.bundle.js

@@ -65289,7 +65289,7 @@ var Panel = /** @class */ (function (_super) {
             style.width = this.props.size.custom;
         }
         var classes2 = (0, classnames_1.default)('side-panel__container', classes2Obj);
-        return (React.createElement("div", { className: classes2, style: style, "data-theme": this.props.theme ? "".concat(this.props.theme, "-ui") : null },
+        return (React.createElement("div", { className: classes2, style: style, "data-theme": this.props.theme ? "".concat(this.props.theme, "-ui") : null, "data-test-id": this.props['data-test-id'] },
             React.createElement("div", { className: classes }, this.props.children)));
     };
     return Panel;
@@ -84623,7 +84623,7 @@ var Select = /** @class */ (function (_super) {
         }
         return (React.createElement(Form_1.InputWrapper, { label: this.props.label, error: this.props.error, invalid: this.props.error != null, required: this.props.required, disabled: this.props.disabled, readonly: this.props.readonly, 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("span", { className: 'sd-input__select-caret-wrapper' },
-                React.createElement("select", { className: 'sd-input__select', id: this.htmlId, value: this.props.value, "aria-describedby": this.htmlId, tabIndex: this.props.tabindex, onChange: this.handleChange, disabled: this.props.disabled || this.props.readonly, "data-test-id": this.props['data-test-id'] }, this.props.children))));
+                React.createElement("select", { className: 'sd-input__select', id: this.htmlId, value: this.props.value, "aria-describedby": this.htmlId + 'label', tabIndex: this.props.tabindex, onChange: this.handleChange, disabled: this.props.disabled || this.props.readonly, "data-test-id": this.props['data-test-id'] }, this.props.children))));
     };
     return Select;
 }(React.Component));
@@ -128224,7 +128224,7 @@ var SubNav = /** @class */ (function (_super) {
             _a["subnav--".concat(this.props.color)] = this.props.color || this.props.color !== undefined,
             _a), this.props.className);
         var defaultTheme = darkColors.includes(this.props.color || '') ? 'dark-ui' : null;
-        return (React.createElement("div", { "data-theme": this.props.theme ? "".concat(this.props.theme, "-ui") : defaultTheme, className: classes }, this.props.children));
+        return (React.createElement("div", { "data-theme": this.props.theme ? "".concat(this.props.theme, "-ui") : defaultTheme, className: classes, "data-test-id": this.props['data-test-id'] }, this.props.children));
     };
     return SubNav;
 }(React.PureComponent));
@@ -149174,6 +149174,7 @@ var Menu = /** @class */ (function (_super) {
     };
     Menu.prototype.render = function () {
         var _this = this;
+        var _a;
         return (React.createElement(React.Fragment, null,
             this.props.children(this.toggle),
             React.createElement("div", { onKeyDown: function (event) {
@@ -149191,7 +149192,7 @@ var Menu = /** @class */ (function (_super) {
                         if (firstMenuItem instanceof HTMLElement) {
                             firstMenuItem.focus();
                         }
-                    }, "data-test-id": "menu", zIndex: this.zIndex }))));
+                    }, "data-test-id": (_a = this.props['data-test-id']) !== null && _a !== void 0 ? _a : 'menu', zIndex: this.zIndex }))));
     };
     return Menu;
 }(React.Component));
@@ -154430,7 +154431,7 @@ var SideBarTabs = /** @class */ (function (_super) {
     };
     SideBarTabs.prototype.render = function () {
         var _this = this;
-        return (React.createElement("div", { className: 'sd-sidetab-menu sd-sidetab-menu--static' },
+        return (React.createElement("div", { className: 'sd-sidetab-menu sd-sidetab-menu--static', "data-test-id": this.props['data-test-id'] },
             React.createElement("ul", null, this.props.items.map(function (item, index) {
                 if (item === 'divider') {
                     return (React.createElement("li", { key: index, className: 'sd-sidetab-menu__spacer' }));
@@ -154438,7 +154439,7 @@ var SideBarTabs = /** @class */ (function (_super) {
                 else {
                     return (React.createElement("li", { key: index, "data-sd-tooltip": item.tooltip, "data-flow": 'left' },
                         React.createElement("button", { disabled: _this.props.disabled, role: 'button', "aria-label": item.tooltip, className: (0, classnames_1.default)('sd-sidetab-menu__btn', { 'sd-sidetab-menu__btn--active': item.id === _this.props.activeTab && _this.props.disabled !== true,
-                            }), onClick: function () { return _this.handleClick(item); } },
+                            }), onClick: function () { return _this.handleClick(item); }, "data-test-id": 'widget-icon', "data-test-value": item.id },
                             item.badgeValue != null && (React.createElement(Badge_1.Badge, { text: item['badgeValue'], type: 'primary' })),
                             React.createElement("span", { className: 'sd-sidetab-menu__main-icon ' },
                                 React.createElement(Icon_1.Icon, { size: item['size'], name: item['icon'] })),
@@ -188158,7 +188159,7 @@ exports.ThreePaneLayoutPattern = ThreePaneLayoutPattern;
 /* 938 */
 /***/ (function(module, exports) {
 
-module.exports = {"name":"superdesk-ui-framework","version":"4.0.32","license":"AGPL-3.0","repository":{"type":"git","url":"https://github.com/superdesk/superdesk-ui-framework.git"},"main":"dist/superdesk-ui.bundle.js","types":"react/index.d.ts","contributors":["Nemanja Pavlovic","Vladimir Stefanovic","Darko Tomic","Aleksandar Jelicic","Tomas Kikutis","Dragana Zivkovic"],"scripts":{"start":"webpack-dev-server --config tasks/webpack.dev.js","server":"webpack --watch --config tasks/webpack.prod.js && tsc-watch","build":"webpack --config tasks/webpack.prod.js && tsc","build-ui":"webpack && tsc && npm run lint","playground-lint":"tsc -p examples/pages/playgrounds/react-playgrounds --noEmit","lint":"eslint --parser=@typescript-eslint/parser app && tslint -c tslint.json 'app-typescript/**/*.{ts,tsx}' && npm run playground-lint","lint-fix":"tsc -p tsconfig.json --noEmit && tslint --fix -c tslint.json 'app-typescript/**/*.{ts,tsx}'","prepublishOnly":"npm run build","unit-test":"mocha","debug-unit-tests":"mocha --inspect-brk"},"devDependencies":{"@types/assert":"^1.5.6","@types/chart.js":"^2.9.24","@types/classnames":"^2.2.9","@types/enzyme":"^3.10.12","@types/enzyme-adapter-react-16":"^1.0.6","@types/lodash":"^4.14.161","@types/mocha":"^9.1.1","@types/react":"16.8.23","@types/react-beautiful-dnd":"^13.1.2","@types/react-dom":"16.8.0","@types/react-router-dom":"^5.1.2","@types/react-scrollspy":"^3.3.5","@typescript-eslint/parser":"^5.58.0","angular":"^1.7.9","angular-animate":"^1.7.9","angular-route":"^1.7.9","babel-core":"^6.26.0","babel-loader":"^7.1.2","babel-plugin-transform-object-rest-spread":"^6.26.0","babel-preset-es2015":"^6.24.1","babel-preset-react":"^6.24.1","classnames":"^2.2.5","clean-webpack-plugin":"^1.0.0","code-prettify":"^0.1.0","copy-webpack-plugin":"^4.6.0","css-loader":"^2.1.1","enzyme":"^3.11.0","enzyme-adapter-react-16":"^1.15.7","eslint":"^4.6.1","eslint-loader":"^1.9.0","eslint-plugin-angular":"^3.1.1","eslint-plugin-react":"^7.3.0","extract-text-webpack-plugin":"^3.0.2","file-loader":"^0.11.2","html-loader":"^0.5.1","html-webpack-plugin":"^2.30.1","jquery":"^3.1.1","jquery-ui":"^1.12.1","jsdom":"20.0.3","jsdom-global":"3.0.2","lodash":"4.17.21","mocha":"^8.4.0","moment":"^2.29.3","node-sass":"6.0","prismjs":"^1.28.0","prop-types":"^15.6.0","react":"16.8.6","react-dom":"16.8.6","react-redux":"^5.0.6","react-router-dom":"^5.1.2","redux":"^3.7.2","redux-form":"^7.0.4","sass-loader":"^6.0.6","style-loader":"^0.18.2","superdesk-code-style":"^1.1.2","ts-loader":"^6.0.2","ts-node":"^10.9.1","tslint":"^5.18.0","typescript":"4.9.5","url-loader":"^1.1.2","webpack":"^3.5.5","webpack-cli":"3.3.10","webpack-dev-server":"2.11.1","webpack-merge":"^4.2.1"},"dependencies":{"@popperjs/core":"^2.4.0","@superdesk/common":"0.0.28","@superdesk/primereact":"^5.0.2-12","@superdesk/react-resizable-panels":"0.0.39","chart.js":"^2.9.3","date-fns":"2.7.0","popper-max-size-modifier":"^0.2.0","popper.js":"1.14.4","primeicons":"2.0.0","react-beautiful-dnd":"^13.0.0","react-id-generator":"^3.0.0","react-scrollspy":"^3.4.3","tippy.js":"^6.3.7"},"peerDependencies":{"moment":"*"},"volta":{"node":"14.21.3"}}
+module.exports = {"name":"superdesk-ui-framework","version":"4.0.33","license":"AGPL-3.0","repository":{"type":"git","url":"https://github.com/superdesk/superdesk-ui-framework.git"},"main":"dist/superdesk-ui.bundle.js","types":"react/index.d.ts","contributors":["Nemanja Pavlovic","Vladimir Stefanovic","Darko Tomic","Aleksandar Jelicic","Tomas Kikutis","Dragana Zivkovic"],"scripts":{"start":"webpack-dev-server --config tasks/webpack.dev.js","server":"webpack --watch --config tasks/webpack.prod.js && tsc-watch","build":"webpack --config tasks/webpack.prod.js && tsc","build-ui":"webpack && tsc && npm run lint","playground-lint":"tsc -p examples/pages/playgrounds/react-playgrounds --noEmit","lint":"eslint --parser=@typescript-eslint/parser app && tslint -c tslint.json 'app-typescript/**/*.{ts,tsx}' && npm run playground-lint","lint-fix":"tsc -p tsconfig.json --noEmit && tslint --fix -c tslint.json 'app-typescript/**/*.{ts,tsx}'","prepublishOnly":"npm run build","unit-test":"mocha","debug-unit-tests":"mocha --inspect-brk"},"devDependencies":{"@types/assert":"^1.5.6","@types/chart.js":"^2.9.24","@types/classnames":"^2.2.9","@types/enzyme":"^3.10.12","@types/enzyme-adapter-react-16":"^1.0.6","@types/lodash":"^4.14.161","@types/mocha":"^9.1.1","@types/react":"16.8.23","@types/react-beautiful-dnd":"^13.1.2","@types/react-dom":"16.8.0","@types/react-router-dom":"^5.1.2","@types/react-scrollspy":"^3.3.5","@typescript-eslint/parser":"^5.58.0","angular":"^1.7.9","angular-animate":"^1.7.9","angular-route":"^1.7.9","babel-core":"^6.26.0","babel-loader":"^7.1.2","babel-plugin-transform-object-rest-spread":"^6.26.0","babel-preset-es2015":"^6.24.1","babel-preset-react":"^6.24.1","classnames":"^2.2.5","clean-webpack-plugin":"^1.0.0","code-prettify":"^0.1.0","copy-webpack-plugin":"^4.6.0","css-loader":"^2.1.1","enzyme":"^3.11.0","enzyme-adapter-react-16":"^1.15.7","eslint":"^4.6.1","eslint-loader":"^1.9.0","eslint-plugin-angular":"^3.1.1","eslint-plugin-react":"^7.3.0","extract-text-webpack-plugin":"^3.0.2","file-loader":"^0.11.2","html-loader":"^0.5.1","html-webpack-plugin":"^2.30.1","jquery":"^3.1.1","jquery-ui":"^1.12.1","jsdom":"20.0.3","jsdom-global":"3.0.2","lodash":"4.17.21","mocha":"^8.4.0","moment":"^2.29.3","node-sass":"6.0","prismjs":"^1.28.0","prop-types":"^15.6.0","react":"16.8.6","react-dom":"16.8.6","react-redux":"^5.0.6","react-router-dom":"^5.1.2","redux":"^3.7.2","redux-form":"^7.0.4","sass-loader":"^6.0.6","style-loader":"^0.18.2","superdesk-code-style":"^1.1.2","ts-loader":"^6.0.2","ts-node":"^10.9.1","tslint":"^5.18.0","typescript":"4.9.5","url-loader":"^1.1.2","webpack":"^3.5.5","webpack-cli":"3.3.10","webpack-dev-server":"2.11.1","webpack-merge":"^4.2.1"},"dependencies":{"@popperjs/core":"^2.4.0","@superdesk/common":"0.0.28","@superdesk/primereact":"^5.0.2-12","@superdesk/react-resizable-panels":"0.0.39","chart.js":"^2.9.3","date-fns":"2.7.0","popper-max-size-modifier":"^0.2.0","popper.js":"1.14.4","primeicons":"2.0.0","react-beautiful-dnd":"^13.0.0","react-id-generator":"^3.0.0","react-scrollspy":"^3.4.3","tippy.js":"^6.3.7"},"peerDependencies":{"moment":"*"},"volta":{"node":"14.21.3"}}
 
 /***/ }),
 /* 939 */

package/dist/superdesk-ui.bundle.css

@@ -39294,7 +39294,7 @@ textarea.sd-media-carousel__media-title {
   .form__row--flex .form__row-item:only-child {
     margin: 0; }
 
-.form__row--flex .form__row-item:not(.sd-flex-no-grow) {
+.form__row--flex .form__row-item {
   flex-basis: 0; }
 
 .form__row--flex .form__row-item--no-grow {
@@ -40193,7 +40193,8 @@ textarea.sd-media-carousel__media-title {
     grid-column: 2/4; }
   .sd-input .sd-input__input-container {
     grid-row: 2/3;
-    grid-column: 2/4; }
+    grid-column: 2/4;
+    min-width: min-content; }
   .sd-input .sd-input__input-container:has(input[type="time"]) {
     min-width: 110px; }
   .sd-input textarea.sd-input__input {

package/dist/superdesk-ui.bundle.js

@@ -64793,7 +64793,7 @@ var Panel = /** @class */ (function (_super) {
             style.width = this.props.size.custom;
         }
         var classes2 = (0, classnames_1.default)('side-panel__container', classes2Obj);
-        return (React.createElement("div", { className: classes2, style: style, "data-theme": this.props.theme ? "".concat(this.props.theme, "-ui") : null },
+        return (React.createElement("div", { className: classes2, style: style, "data-theme": this.props.theme ? "".concat(this.props.theme, "-ui") : null, "data-test-id": this.props['data-test-id'] },
             React.createElement("div", { className: classes }, this.props.children)));
     };
     return Panel;
@@ -83744,7 +83744,7 @@ var Select = /** @class */ (function (_super) {
         }
         return (React.createElement(Form_1.InputWrapper, { label: this.props.label, error: this.props.error, invalid: this.props.error != null, required: this.props.required, disabled: this.props.disabled, readonly: this.props.readonly, 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("span", { className: 'sd-input__select-caret-wrapper' },
-                React.createElement("select", { className: 'sd-input__select', id: this.htmlId, value: this.props.value, "aria-describedby": this.htmlId, tabIndex: this.props.tabindex, onChange: this.handleChange, disabled: this.props.disabled || this.props.readonly, "data-test-id": this.props['data-test-id'] }, this.props.children))));
+                React.createElement("select", { className: 'sd-input__select', id: this.htmlId, value: this.props.value, "aria-describedby": this.htmlId + 'label', tabIndex: this.props.tabindex, onChange: this.handleChange, disabled: this.props.disabled || this.props.readonly, "data-test-id": this.props['data-test-id'] }, this.props.children))));
     };
     return Select;
 }(React.Component));
@@ -127345,7 +127345,7 @@ var SubNav = /** @class */ (function (_super) {
             _a["subnav--".concat(this.props.color)] = this.props.color || this.props.color !== undefined,
             _a), this.props.className);
         var defaultTheme = darkColors.includes(this.props.color || '') ? 'dark-ui' : null;
-        return (React.createElement("div", { "data-theme": this.props.theme ? "".concat(this.props.theme, "-ui") : defaultTheme, className: classes }, this.props.children));
+        return (React.createElement("div", { "data-theme": this.props.theme ? "".concat(this.props.theme, "-ui") : defaultTheme, className: classes, "data-test-id": this.props['data-test-id'] }, this.props.children));
     };
     return SubNav;
 }(React.PureComponent));
@@ -148295,6 +148295,7 @@ var Menu = /** @class */ (function (_super) {
     };
     Menu.prototype.render = function () {
         var _this = this;
+        var _a;
         return (React.createElement(React.Fragment, null,
             this.props.children(this.toggle),
             React.createElement("div", { onKeyDown: function (event) {
@@ -148312,7 +148313,7 @@ var Menu = /** @class */ (function (_super) {
                         if (firstMenuItem instanceof HTMLElement) {
                             firstMenuItem.focus();
                         }
-                    }, "data-test-id": "menu", zIndex: this.zIndex }))));
+                    }, "data-test-id": (_a = this.props['data-test-id']) !== null && _a !== void 0 ? _a : 'menu', zIndex: this.zIndex }))));
     };
     return Menu;
 }(React.Component));
@@ -153551,7 +153552,7 @@ var SideBarTabs = /** @class */ (function (_super) {
     };
     SideBarTabs.prototype.render = function () {
         var _this = this;
-        return (React.createElement("div", { className: 'sd-sidetab-menu sd-sidetab-menu--static' },
+        return (React.createElement("div", { className: 'sd-sidetab-menu sd-sidetab-menu--static', "data-test-id": this.props['data-test-id'] },
             React.createElement("ul", null, this.props.items.map(function (item, index) {
                 if (item === 'divider') {
                     return (React.createElement("li", { key: index, className: 'sd-sidetab-menu__spacer' }));
@@ -153559,7 +153560,7 @@ var SideBarTabs = /** @class */ (function (_super) {
                 else {
                     return (React.createElement("li", { key: index, "data-sd-tooltip": item.tooltip, "data-flow": 'left' },
                         React.createElement("button", { disabled: _this.props.disabled, role: 'button', "aria-label": item.tooltip, className: (0, classnames_1.default)('sd-sidetab-menu__btn', { 'sd-sidetab-menu__btn--active': item.id === _this.props.activeTab && _this.props.disabled !== true,
-                            }), onClick: function () { return _this.handleClick(item); } },
+                            }), onClick: function () { return _this.handleClick(item); }, "data-test-id": 'widget-icon', "data-test-value": item.id },
                             item.badgeValue != null && (React.createElement(Badge_1.Badge, { text: item['badgeValue'], type: 'primary' })),
                             React.createElement("span", { className: 'sd-sidetab-menu__main-icon ' },
                                 React.createElement(Icon_1.Icon, { size: item['size'], name: item['icon'] })),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "superdesk-ui-framework",
-  "version": "4.0.32",
+  "version": "4.0.33",
   "license": "AGPL-3.0",
   "repository": {
     "type": "git",

package/react/components/Layouts/Panel.d.ts

@@ -9,6 +9,7 @@ interface IPropsPanel {
     };
     background?: 'transparent' | 'light' | 'grey';
     open?: boolean;
+    ['data-test-id']?: string;
 }
 export default class Panel extends React.PureComponent<IPropsPanel> {
     render(): JSX.Element;

package/react/components/Layouts/Panel.js

@@ -71,7 +71,7 @@ var Panel = /** @class */ (function (_super) {
             style.width = this.props.size.custom;
         }
         var classes2 = (0, classnames_1.default)('side-panel__container', classes2Obj);
-        return (React.createElement("div", { className: classes2, style: style, "data-theme": this.props.theme ? "".concat(this.props.theme, "-ui") : null },
+        return (React.createElement("div", { className: classes2, style: style, "data-theme": this.props.theme ? "".concat(this.props.theme, "-ui") : null, "data-test-id": this.props['data-test-id'] },
             React.createElement("div", { className: classes }, this.props.children)));
     };
     return Panel;

package/react/components/Menu.d.ts

@@ -46,6 +46,7 @@ interface IMenuBranch {
 interface IProps {
     items: Array<IMenuItem>;
     children: (toggle: (event: SyntheticEvent) => void) => JSX.Element;
+    'data-test-id'?: string;
 }
 export declare class Menu extends React.Component<IProps, {}> {
     private menu;

package/react/components/Menu.js

@@ -108,6 +108,7 @@ var Menu = /** @class */ (function (_super) {
     };
     Menu.prototype.render = function () {
         var _this = this;
+        var _a;
         return (React.createElement(React.Fragment, null,
             this.props.children(this.toggle),
             React.createElement("div", { onKeyDown: function (event) {
@@ -125,7 +126,7 @@ var Menu = /** @class */ (function (_super) {
                         if (firstMenuItem instanceof HTMLElement) {
                             firstMenuItem.focus();
                         }
-                    }, "data-test-id": "menu", zIndex: this.zIndex }))));
+                    }, "data-test-id": (_a = this.props['data-test-id']) !== null && _a !== void 0 ? _a : 'menu', zIndex: this.zIndex }))));
     };
     return Menu;
 }(React.Component));

package/react/components/Navigation/SideBarTabs.d.ts

@@ -5,6 +5,7 @@ interface IProps {
     items: Array<ISideBarTab | 'divider'>;
     side?: 'none' | 'left' | 'right';
     disabled?: boolean;
+    ['data-test-id']?: string;
 }
 export interface ISideBarTab {
     id: string;

package/react/components/Navigation/SideBarTabs.js

@@ -70,7 +70,7 @@ var SideBarTabs = /** @class */ (function (_super) {
     };
     SideBarTabs.prototype.render = function () {
         var _this = this;
-        return (React.createElement("div", { className: 'sd-sidetab-menu sd-sidetab-menu--static' },
+        return (React.createElement("div", { className: 'sd-sidetab-menu sd-sidetab-menu--static', "data-test-id": this.props['data-test-id'] },
             React.createElement("ul", null, this.props.items.map(function (item, index) {
                 if (item === 'divider') {
                     return (React.createElement("li", { key: index, className: 'sd-sidetab-menu__spacer' }));
@@ -78,7 +78,7 @@ var SideBarTabs = /** @class */ (function (_super) {
                 else {
                     return (React.createElement("li", { key: index, "data-sd-tooltip": item.tooltip, "data-flow": 'left' },
                         React.createElement("button", { disabled: _this.props.disabled, role: 'button', "aria-label": item.tooltip, className: (0, classnames_1.default)('sd-sidetab-menu__btn', { 'sd-sidetab-menu__btn--active': item.id === _this.props.activeTab && _this.props.disabled !== true,
-                            }), onClick: function () { return _this.handleClick(item); } },
+                            }), onClick: function () { return _this.handleClick(item); }, "data-test-id": 'widget-icon', "data-test-value": item.id },
                             item.badgeValue != null && (React.createElement(Badge_1.Badge, { text: item['badgeValue'], type: 'primary' })),
                             React.createElement("span", { className: 'sd-sidetab-menu__main-icon ' },
                                 React.createElement(Icon_1.Icon, { size: item['size'], name: item['icon'] })),

package/react/components/Select.js

@@ -63,7 +63,7 @@ var Select = /** @class */ (function (_super) {
         }
         return (React.createElement(Form_1.InputWrapper, { label: this.props.label, error: this.props.error, invalid: this.props.error != null, required: this.props.required, disabled: this.props.disabled, readonly: this.props.readonly, 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("span", { className: 'sd-input__select-caret-wrapper' },
-                React.createElement("select", { className: 'sd-input__select', id: this.htmlId, value: this.props.value, "aria-describedby": this.htmlId, tabIndex: this.props.tabindex, onChange: this.handleChange, disabled: this.props.disabled || this.props.readonly, "data-test-id": this.props['data-test-id'] }, this.props.children))));
+                React.createElement("select", { className: 'sd-input__select', id: this.htmlId, value: this.props.value, "aria-describedby": this.htmlId + 'label', tabIndex: this.props.tabindex, onChange: this.handleChange, disabled: this.props.disabled || this.props.readonly, "data-test-id": this.props['data-test-id'] }, this.props.children))));
     };
     return Select;
 }(React.Component));

package/react/components/SubNav.d.ts

@@ -3,6 +3,7 @@ interface IProps {
     color?: 'light' | 'darker' | 'blueGrey' | 'blueGreyDarker';
     theme?: 'light' | 'dark';
     className?: string;
+    ['data-test-id']?: string;
 }
 interface IPropsDivider {
     width?: 'small' | 'medium' | 'large' | 'x-large';

package/react/components/SubNav.js

@@ -75,7 +75,7 @@ var SubNav = /** @class */ (function (_super) {
             _a["subnav--".concat(this.props.color)] = this.props.color || this.props.color !== undefined,
             _a), this.props.className);
         var defaultTheme = darkColors.includes(this.props.color || '') ? 'dark-ui' : null;
-        return (React.createElement("div", { "data-theme": this.props.theme ? "".concat(this.props.theme, "-ui") : defaultTheme, className: classes }, this.props.children));
+        return (React.createElement("div", { "data-theme": this.props.theme ? "".concat(this.props.theme, "-ui") : defaultTheme, className: classes, "data-test-id": this.props['data-test-id'] }, this.props.children));
     };
     return SubNav;
 }(React.PureComponent));