superdesk-ui-framework 3.0.1-beta.2 → 3.0.1-beta.3

package/examples/pages/react/Selects.tsx

@@ -62,6 +62,61 @@ export default class InputsDoc extends React.Component<{}, IState> {
                                     <Option>Option 2</Option>
                                 </Select>
                             </div>
+
+                            <p className="docs-page__paragraph">// Boxed with hidden label</p>
+                            <div className='form__row'>
+                                <Select label='Select label'
+                                    value='Option 2'
+                                    boxedStyle
+                                    labelHidden
+                                    error='This is error message'
+                                    info='This is some hint message'
+                                    inlineLabel={this.state.inlineLabel}
+                                    required={this.state.required}
+                                    disabled={this.state.disabled}
+                                    invalid={this.state.invalid}
+                                    tabindex={0}
+                                    onChange={(value) => { console.log(value) }}>
+                                    <Option>Option 1</Option>
+                                    <Option>Option 2</Option>
+                                </Select>
+                            </div>
+                            <div className='form__row'>
+                                <Select label='Select label'
+                                    value='Option 2'
+                                    boxedStyle
+                                    labelHidden
+                                    size='large'
+                                    error='This is error message'
+                                    info='This is some hint message'
+                                    inlineLabel={this.state.inlineLabel}
+                                    required={this.state.required}
+                                    disabled={this.state.disabled}
+                                    invalid={this.state.invalid}
+                                    tabindex={0}
+                                    onChange={(value) => { console.log(value) }}>
+                                    <Option>Option 1</Option>
+                                    <Option>Option 2</Option>
+                                </Select>
+                            </div>
+                            <div className='form__row'>
+                                <Select label='Select label'
+                                    value='Option 2'
+                                    boxedStyle
+                                    labelHidden
+                                    size='x-large'
+                                    error='This is error message'
+                                    info='This is some hint message'
+                                    inlineLabel={this.state.inlineLabel}
+                                    required={this.state.required}
+                                    disabled={this.state.disabled}
+                                    invalid={this.state.invalid}
+                                    tabindex={0}
+                                    onChange={(value) => { console.log(value) }}>
+                                    <Option>Option 1</Option>
+                                    <Option>Option 2</Option>
+                                </Select>
+                            </div>
                         </div>
 
                     </Markup.ReactMarkupPreview>

package/examples/pages/react/WithSizeObserver.tsx

@@ -0,0 +1,44 @@
+import * as React from 'react';
+import * as Markup from '../../js/react';
+import {WithSizeObserver} from '../../../app-typescript/components/WithSizeObserver';
+
+export class WithSizeObserverDocs extends React.Component {
+    render() {
+        return (
+            <section className='docs-page__container'>
+
+                <h2 className='docs-page__h2'>WithSizeObserver</h2>
+
+                <p>Higher order component for dynamically retrieving dimensions of any element.</p>
+
+                <p>It uses `ResizeObserver` to listen for updates and re-render children efficiently.</p>
+
+                <p className='docs-page__paragraph'></p>
+                <Markup.ReactMarkup>
+                    <Markup.ReactMarkupPreview>
+                        <div className='docs-page__content-row docs-page__content-row--no-margin'>
+                            <div className='form__row'>
+                                <div style={{resize: 'both', overflow: 'auto', height: 40, outline: '1px solid red'}}>
+                                    <WithSizeObserver>
+                                        {({width, height}) => (
+                                            <div>width: {width}px ; height: {height}px</div>
+                                        )}
+                                    </WithSizeObserver>
+                                </div>
+                            </div>
+                        </div>
+
+                    </Markup.ReactMarkupPreview>
+
+                    <Markup.ReactMarkupCode>{`
+                        <WithSizeObserver>
+                            {({width, height}) => (
+                                <div>width: {width}px ; height: {height}px</div>
+                            )}
+                        </WithSizeObserver>
+                    `}</Markup.ReactMarkupCode>
+                </Markup.ReactMarkup>
+            </section>
+        )
+    }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "superdesk-ui-framework",
-  "version": "3.0.1-beta.2",
+  "version": "3.0.1-beta.3",
   "license": "AGPL-3.0",
   "repository": {
     "type": "git",
@@ -21,7 +21,7 @@
     "server": "webpack --watch --config tasks/webpack.prod.js && tsc-watch",
     "build": "webpack --config tasks/webpack.prod.js && tsc",
     "build-ui": "webpack && tsc && npm run lint",
-    "lint": "eslint app && tslint -c tslint.json 'app-typescript/**/*.{ts,tsx}'",
+    "lint": "eslint --parser=@typescript-eslint/parser app && tslint -c tslint.json 'app-typescript/**/*.{ts,tsx}'",
     "lint-fix": "tsc -p tsconfig.json --noEmit && tslint --fix -c tslint.json 'app-typescript/**/*.{ts,tsx}'",
     "prepublishOnly": "npm run build",
     "prepublish": "patch-package"
@@ -34,6 +34,7 @@
     "@types/react-dom": "16.8.0",
     "@types/react-router-dom": "^5.1.2",
     "@types/react-scrollspy": "^3.3.5",
+    "@typescript-eslint/parser": "5.14.0",
     "angular": "^1.7.9",
     "angular-animate": "^1.7.9",
     "angular-route": "^1.7.9",
@@ -74,8 +75,7 @@
     "superdesk-code-style": "^1.1.2",
     "ts-loader": "^6.0.2",
     "tslint": "^5.18.0",
-    "typescript": "^3.5.1",
-    "typescript-eslint-parser": "^22.0.0",
+    "typescript": "4.5.2",
     "url-loader": "^1.1.2",
     "webpack": "^3.5.5",
     "webpack-cli": "3.3.10",

package/patches/@superdesk+primereact+5.0.2-4.patch

@@ -1,3 +1,47 @@
+diff --git a/node_modules/@superdesk/primereact/components/dialog/Dialog.d.ts b/node_modules/@superdesk/primereact/components/dialog/Dialog.d.ts
+index 80b0f8e..5343abf 100644
+--- a/node_modules/@superdesk/primereact/components/dialog/Dialog.d.ts
++++ b/node_modules/@superdesk/primereact/components/dialog/Dialog.d.ts
+@@ -18,7 +18,7 @@ interface DialogProps {
+     maskClassName?: string;
+     showHeader?: boolean;
+     appendTo?: HTMLElement;
+-    baseZIndex?: number;
++    zIndex?: number;
+     maximizable?: boolean;
+     blockScroll?: boolean;
+     ariaCloseIconLabel?: string;
+diff --git a/node_modules/@superdesk/primereact/components/dialog/Dialog.js b/node_modules/@superdesk/primereact/components/dialog/Dialog.js
+index 2e243f2..c40162e 100644
+--- a/node_modules/@superdesk/primereact/components/dialog/Dialog.js
++++ b/node_modules/@superdesk/primereact/components/dialog/Dialog.js
+@@ -148,7 +148,7 @@ var Dialog = /*#__PURE__*/function (_Component) {
+   }, {
+     key: "zIndex",
+     get: function get() {
+-      return this.props.baseZIndex + _DomHandler.default.generateZIndex();
++      return this.props.zIndex;
+     }
+   }, {
+     key: "maximized",
+@@ -501,7 +501,7 @@ _defineProperty(Dialog, "defaultProps", {
+   maskClassName: null,
+   showHeader: true,
+   appendTo: null,
+-  baseZIndex: 0,
++  zIndex: 0,
+   maximizable: false,
+   blockScroll: false,
+   icons: null,
+@@ -531,7 +531,7 @@ _defineProperty(Dialog, "propTypes", {
+   maskClassName: _propTypes.default.string,
+   showHeader: _propTypes.default.bool,
+   appendTo: _propTypes.default.object,
+-  baseZIndex: _propTypes.default.number,
++  zIndex: _propTypes.default.number,
+   maximizable: _propTypes.default.bool,
+   blockScroll: _propTypes.default.bool,
+   icons: _propTypes.default.any,
 diff --git a/node_modules/@superdesk/primereact/components/tieredmenu/TieredMenu.d.ts b/node_modules/@superdesk/primereact/components/tieredmenu/TieredMenu.d.ts
 index a91da27..3dd7822 100644
 --- a/node_modules/@superdesk/primereact/components/tieredmenu/TieredMenu.d.ts

package/react/components/Alert.js

@@ -3,10 +3,12 @@ var __extends = (this && this.__extends) || (function () {
     var extendStatics = function (d, b) {
         extendStatics = Object.setPrototypeOf ||
             ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
         return extendStatics(d, b);
     };
     return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
         extendStatics(d, b);
         function __() { this.constructor = d; }
         d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
@@ -27,7 +29,7 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
 var __importStar = (this && this.__importStar) || function (mod) {
     if (mod && mod.__esModule) return mod;
     var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
     __setModuleDefault(result, mod);
     return result;
 };
@@ -56,19 +58,19 @@ var Alert = /** @class */ (function (_super) {
     };
     Alert.prototype.render = function () {
         var _a, _b;
-        var classesAlert = classnames_1.default('sd-alert', (_a = {
+        var classesAlert = (0, classnames_1.default)('sd-alert', (_a = {
                 'sd-alert--hollow': this.props.style === 'hollow',
                 'sd-alert--small': this.props.size === 'small'
             },
-            _a["sd-alert--" + this.props.type] = this.props.type,
-            _a["sd-alert--" + this.props.type] = this.props.type,
+            _a["sd-alert--".concat(this.props.type)] = this.props.type,
+            _a["sd-alert--".concat(this.props.type)] = this.props.type,
             _a['sd-alert--margin-normal'] = this.props.margin === undefined,
-            _a["sd-alert--margin-" + this.props.margin] = this.props.margin,
+            _a["sd-alert--margin-".concat(this.props.margin)] = this.props.margin,
             _a['sd-alert--hidden'] = !this.state.open,
             _a['sd-alert--banner-style'] = this.props.banner,
             _a));
-        var classesInfoBtn = classnames_1.default('sd-alert__info-btn sd-shadow--z2', (_b = {},
-            _b["sd-alert__info-btn--" + this.props.type] = this.props.type,
+        var classesInfoBtn = (0, classnames_1.default)('sd-alert__info-btn sd-shadow--z2', (_b = {},
+            _b["sd-alert__info-btn--".concat(this.props.type)] = this.props.type,
             _b['sd-alert__info-btn--hidden'] = this.state.open,
             _b));
         return (React.createElement("div", { className: 'sd-alert__container' },

package/react/components/Autocomplete.js

@@ -3,10 +3,12 @@ var __extends = (this && this.__extends) || (function () {
     var extendStatics = function (d, b) {
         extendStatics = Object.setPrototypeOf ||
             ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
         return extendStatics(d, b);
     };
     return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
         extendStatics(d, b);
         function __() { this.constructor = d; }
         d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
@@ -27,16 +29,18 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
 var __importStar = (this && this.__importStar) || function (mod) {
     if (mod && mod.__esModule) return mod;
     var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
     __setModuleDefault(result, mod);
     return result;
 };
-var __spreadArrays = (this && this.__spreadArrays) || function () {
-    for (var s = 0, i = 0, il = arguments.length; i < il; i++) s += arguments[i].length;
-    for (var r = Array(s), k = 0, i = 0; i < il; i++)
-        for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++)
-            r[k] = a[j];
-    return r;
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
 };
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
@@ -52,7 +56,7 @@ var Autocomplete = /** @class */ (function (_super) {
     function Autocomplete(props) {
         var _a, _b;
         var _this = _super.call(this, props) || this;
-        _this.htmlId = react_id_generator_1.default();
+        _this.htmlId = (0, react_id_generator_1.default)();
         _this.state = {
             selectedItem: (_a = _this.props.value) !== null && _a !== void 0 ? _a : null,
             filteredItems: null,
@@ -81,7 +85,7 @@ var Autocomplete = /** @class */ (function (_super) {
         setTimeout(function () {
             var filteredItems;
             if (!event.query.trim().length) {
-                filteredItems = __spreadArrays(_this.props.items);
+                filteredItems = __spreadArray([], _this.props.items, true);
             }
             else {
                 filteredItems = _this.props.items.filter(function (item) {
@@ -111,7 +115,7 @@ var Autocomplete = /** @class */ (function (_super) {
         var _this = this;
         var classes, inputFieldClass;
         if (this.props.isSearchField) {
-            classes = classnames_1.default('sd-searchbar', 'sd-searchbar--boxed', {
+            classes = (0, classnames_1.default)('sd-searchbar', 'sd-searchbar--boxed', {
                 'sd-searchbar--disabled': this.props.disabled,
                 'sd-searchbar--invalid': this.props.invalid || this.state.invalid,
                 'sd-searchbar--focused': this.state.focused,
@@ -119,7 +123,7 @@ var Autocomplete = /** @class */ (function (_super) {
             inputFieldClass = 'sd-searchbar__input';
         }
         else {
-            classes = classnames_1.default('sd-input', {
+            classes = (0, classnames_1.default)('sd-input', {
                 'sd-input--inline-label': this.props.inlineLabel,
                 'sd-input--required': this.props.required,
                 'sd-input--disabled': this.props.disabled,

package/react/components/Avatar.js

@@ -3,10 +3,12 @@ var __extends = (this && this.__extends) || (function () {
     var extendStatics = function (d, b) {
         extendStatics = Object.setPrototypeOf ||
             ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
         return extendStatics(d, b);
     };
     return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
         extendStatics(d, b);
         function __() { this.constructor = d; }
         d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
@@ -27,7 +29,7 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
 var __importStar = (this && this.__importStar) || function (mod) {
     if (mod && mod.__esModule) return mod;
     var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
     __setModuleDefault(result, mod);
     return result;
 };
@@ -74,11 +76,11 @@ var AvatarGroup = /** @class */ (function (_super) {
     }
     AvatarGroup.prototype.render = function () {
         var _a;
-        var classes = classnames_1.default('sd-avatar-group', (_a = {},
+        var classes = (0, classnames_1.default)('sd-avatar-group', (_a = {},
             _a["sd-avatar-group--stacked"] = this.props.appearance === undefined,
-            _a["sd-avatar-group--" + this.props.appearance] = this.props.appearance,
+            _a["sd-avatar-group--".concat(this.props.appearance)] = this.props.appearance,
             _a["sd-avatar-group__border--000"] = this.props.borderColor === undefined,
-            _a["sd-avatar-group__border--" + this.props.borderColor] = this.props.borderColor,
+            _a["sd-avatar-group__border--".concat(this.props.borderColor)] = this.props.borderColor,
             _a), this.props.className);
         return (React.createElement("div", { className: classes, role: 'group' }, this.props.children));
     };
@@ -92,7 +94,7 @@ var AvatarWrapper = /** @class */ (function (_super) {
     }
     AvatarWrapper.prototype.render = function () {
         var _a;
-        return (React.createElement("span", { className: classnames_1.default('sd-avatar', {
+        return (React.createElement("span", { className: (0, classnames_1.default)('sd-avatar', {
                 'sd-avatar--small': this.props.size === 'small',
                 'sd-avatar--medium': this.props.size === 'medium' || this.props.size == null,
                 'sd-avatar--large': this.props.size === 'large',

package/react/components/Badge.js

@@ -3,10 +3,12 @@ var __extends = (this && this.__extends) || (function () {
     var extendStatics = function (d, b) {
         extendStatics = Object.setPrototypeOf ||
             ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
         return extendStatics(d, b);
     };
     return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
         extendStatics(d, b);
         function __() { this.constructor = d; }
         d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
@@ -27,7 +29,7 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
 var __importStar = (this && this.__importStar) || function (mod) {
     if (mod && mod.__esModule) return mod;
     var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
     __setModuleDefault(result, mod);
     return result;
 };
@@ -45,9 +47,9 @@ var Badge = /** @class */ (function (_super) {
     }
     Badge.prototype.render = function () {
         var _a;
-        var classes = classnames_1.default('badge', (_a = {},
-            _a["badge--" + this.props.type] = this.props.type && !this.props.color,
-            _a["" + this.props.color] = this.props.color && !this.props.type,
+        var classes = (0, classnames_1.default)('badge', (_a = {},
+            _a["badge--".concat(this.props.type)] = this.props.type && !this.props.color,
+            _a["".concat(this.props.color)] = this.props.color && !this.props.type,
             _a['badge--square'] = this.props.shape === 'square',
             _a));
         if (this.props.children) {

package/react/components/Button.js

@@ -3,10 +3,12 @@ var __extends = (this && this.__extends) || (function () {
     var extendStatics = function (d, b) {
         extendStatics = Object.setPrototypeOf ||
             ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
         return extendStatics(d, b);
     };
     return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
         extendStatics(d, b);
         function __() { this.constructor = d; }
         d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
@@ -27,7 +29,7 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
 var __importStar = (this && this.__importStar) || function (mod) {
     if (mod && mod.__esModule) return mod;
     var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
     __setModuleDefault(result, mod);
     return result;
 };
@@ -48,12 +50,12 @@ var Button = /** @class */ (function (_super) {
     Button.prototype.render = function () {
         var _a;
         var _this = this;
-        var classes = classnames_1.default('btn', (_a = {
+        var classes = (0, classnames_1.default)('btn', (_a = {
                 'btn--expanded': this.props.expand
             },
-            _a["btn--" + this.props.size] = this.props.size !== 'normal' && this.props.size !== undefined,
-            _a["btn--" + this.props.type] = this.props.type !== 'default' && this.props.type !== undefined,
-            _a["btn--" + this.props.style] = this.props.style !== 'filled' && this.props.style !== undefined,
+            _a["btn--".concat(this.props.size)] = this.props.size !== 'normal' && this.props.size !== undefined,
+            _a["btn--".concat(this.props.type)] = this.props.type !== 'default' && this.props.type !== undefined,
+            _a["btn--".concat(this.props.style)] = this.props.style !== 'filled' && this.props.style !== undefined,
             _a['btn--disabled'] = this.props.disabled,
             _a['btn--icon-only'] = this.props.iconOnly,
             _a['btn--ui-dark'] = this.props.theme === 'dark',

package/react/components/ButtonGroup.js

@@ -3,10 +3,12 @@ var __extends = (this && this.__extends) || (function () {
     var extendStatics = function (d, b) {
         extendStatics = Object.setPrototypeOf ||
             ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
         return extendStatics(d, b);
     };
     return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
         extendStatics(d, b);
         function __() { this.constructor = d; }
         d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
@@ -27,7 +29,7 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
 var __importStar = (this && this.__importStar) || function (mod) {
     if (mod && mod.__esModule) return mod;
     var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
     __setModuleDefault(result, mod);
     return result;
 };
@@ -45,12 +47,12 @@ var ButtonGroup = /** @class */ (function (_super) {
     }
     ButtonGroup.prototype.render = function () {
         var _a;
-        var classes = classnames_1.default('button-group', (_a = {},
+        var classes = (0, classnames_1.default)('button-group', (_a = {},
             _a["button-group--start"] = this.props.align === undefined && !this.props.orientation && !this.props.subgroup,
-            _a["button-group--" + this.props.align] = this.props.align && !this.props.orientation,
+            _a["button-group--".concat(this.props.align)] = this.props.align && !this.props.orientation,
             _a["button-group--vertical"] = this.props.orientation === 'vertical',
             _a["button-group--comfort"] = this.props.spaces === undefined,
-            _a["button-group--" + this.props.spaces] = this.props.spaces,
+            _a["button-group--".concat(this.props.spaces)] = this.props.spaces,
             _a["button-group--padded"] = this.props.padded === true,
             _a["button-group--sub-group"] = this.props.subgroup === true,
             _a), this.props.className);

package/react/components/Carousel.js

@@ -3,10 +3,12 @@ var __extends = (this && this.__extends) || (function () {
     var extendStatics = function (d, b) {
         extendStatics = Object.setPrototypeOf ||
             ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
         return extendStatics(d, b);
     };
     return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
         extendStatics(d, b);
         function __() { this.constructor = d; }
         d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
@@ -27,7 +29,7 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
 var __importStar = (this && this.__importStar) || function (mod) {
     if (mod && mod.__esModule) return mod;
     var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
     __setModuleDefault(result, mod);
     return result;
 };

package/react/components/CheckButtonGroup.js

@@ -3,10 +3,12 @@ var __extends = (this && this.__extends) || (function () {
     var extendStatics = function (d, b) {
         extendStatics = Object.setPrototypeOf ||
             ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
         return extendStatics(d, b);
     };
     return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
         extendStatics(d, b);
         function __() { this.constructor = d; }
         d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
@@ -27,7 +29,7 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
 var __importStar = (this && this.__importStar) || function (mod) {
     if (mod && mod.__esModule) return mod;
     var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
     __setModuleDefault(result, mod);
     return result;
 };
@@ -46,8 +48,8 @@ var CheckButtonGroup = /** @class */ (function (_super) {
     }
     CheckButtonGroup.prototype.render = function () {
         var _a;
-        var classes = classnames_1.default('sd-check-button__group', (_a = {},
-            _a["sd-check-button__group--" + this.props.align] = this.props.align,
+        var classes = (0, classnames_1.default)('sd-check-button__group', (_a = {},
+            _a["sd-check-button__group--".concat(this.props.align)] = this.props.align,
             _a["sd-check-button__group--start"] = !this.props.grid && this.props.align === undefined,
             _a["button-group--vertical"] = this.props.orientation === 'vertical',
             _a["sd-check-button__group--grid"] = this.props.grid,

package/react/components/CheckGroup.js

@@ -3,10 +3,12 @@ var __extends = (this && this.__extends) || (function () {
     var extendStatics = function (d, b) {
         extendStatics = Object.setPrototypeOf ||
             ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
         return extendStatics(d, b);
     };
     return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
         extendStatics(d, b);
         function __() { this.constructor = d; }
         d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
@@ -27,7 +29,7 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
 var __importStar = (this && this.__importStar) || function (mod) {
     if (mod && mod.__esModule) return mod;
     var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
     __setModuleDefault(result, mod);
     return result;
 };
@@ -45,7 +47,7 @@ var CheckGroup = /** @class */ (function (_super) {
     }
     CheckGroup.prototype.render = function () {
         var _a;
-        var classes = classnames_1.default('sd-check__group-new', (_a = {},
+        var classes = (0, classnames_1.default)('sd-check__group-new', (_a = {},
             _a["sd-check__group-new--vertical"] = this.props.orientation === 'vertical',
             _a));
         return (React.createElement("div", { className: classes, "aria-labelledby": this.props.groupLabelledBy }, this.props.children));

package/react/components/Checkbox.js

@@ -3,10 +3,12 @@ var __extends = (this && this.__extends) || (function () {
     var extendStatics = function (d, b) {
         extendStatics = Object.setPrototypeOf ||
             ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
         return extendStatics(d, b);
     };
     return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
         extendStatics(d, b);
         function __() { this.constructor = d; }
         d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
@@ -27,7 +29,7 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
 var __importStar = (this && this.__importStar) || function (mod) {
     if (mod && mod.__esModule) return mod;
     var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
     __setModuleDefault(result, mod);
     return result;
 };
@@ -42,7 +44,7 @@ var Checkbox = /** @class */ (function (_super) {
     __extends(Checkbox, _super);
     function Checkbox(props) {
         var _this = _super.call(this, props) || this;
-        _this.htmlId = react_id_generator_1.default();
+        _this.htmlId = (0, react_id_generator_1.default)();
         _this.handleChange = _this.handleChange.bind(_this);
         return _this;
     }