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

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

@@ -0,0 +1,10 @@
+import * as React from 'react';
+interface IProps {
+    children?: React.ReactNode;
+    background?: 'transparent' | 'light' | 'grey' | 'dark';
+    visible?: boolean;
+}
+export declare class ContentSplitter extends React.PureComponent<IProps> {
+    render(): JSX.Element;
+}
+export {};

package/react/components/Layouts/ContentSplitter.js

@@ -0,0 +1,56 @@
+"use strict";
+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]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+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);
+    __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.ContentSplitter = void 0;
+var React = __importStar(require("react"));
+var classnames_1 = __importDefault(require("classnames"));
+var ContentSplitter = /** @class */ (function (_super) {
+    __extends(ContentSplitter, _super);
+    function ContentSplitter() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    ContentSplitter.prototype.render = function () {
+        var _a;
+        var classes = classnames_1.default('sd-content-wrapper__content-splitter', (_a = {},
+            _a["sd-content-wrapper__content-splitter--" + this.props.background] = this.props.background !== 'light' && this.props.background !== undefined,
+            _a['content-splitter--visible'] = this.props.visible,
+            _a));
+        return (React.createElement("div", { className: classes }, this.props.children));
+    };
+    return ContentSplitter;
+}(React.PureComponent));
+exports.ContentSplitter = ContentSplitter;

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

@@ -0,0 +1,8 @@
+import * as React from 'react';
+interface IProps {
+    header: string;
+    children?: React.ReactNode;
+    theme?: string;
+}
+export declare const Layout: ({ header, children, theme, }: IProps) => JSX.Element;
+export {};

package/react/components/Layouts/Layout.js

@@ -0,0 +1,35 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+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);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Layout = void 0;
+var React = __importStar(require("react"));
+exports.Layout = function (_a) {
+    var header = _a.header, children = _a.children, theme = _a.theme;
+    return (React.createElement("div", { className: 'sd-page-grid--test docs-page__full-width-helper', "data-theme": theme },
+        React.createElement("div", { className: 'sd-main-menu' },
+            React.createElement("div", { className: 'sd-main-menu__inner' })),
+        React.createElement("header", { className: 'sd-top-menu' },
+            React.createElement("a", { className: 'sd-top-menu__collapse-nav' },
+                React.createElement("i", { className: 'icon-collapse icon--white' })),
+            React.createElement("p", { className: 'sd-top-menu__header' }, header)),
+        React.createElement("section", { id: '1', className: 'sd-content sd-content-wrapper' }, children),
+        React.createElement("footer", { className: 'bottom-bar' }, "This is the footer.")));
+};

package/react/components/Layouts/LayoutContainer.js

@@ -40,7 +40,7 @@ var LayoutContainer = /** @class */ (function (_super) {
         return _super !== null && _super.apply(this, arguments) || this;
     }
     LayoutContainer.prototype.render = function () {
-        return (React.createElement("div", { style: { height: '100%' }, className: "sd-main-content-grid" }, this.props.children));
+        return (React.createElement("div", { className: 'sd-content-wrapper__main-content-area sd-main-content-grid comfort' }, this.props.children));
     };
     return LayoutContainer;
 }(React.PureComponent));

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

@@ -2,6 +2,7 @@ import * as React from 'react';
 export interface IMainPanelProps {
     children?: React.ReactNode;
     className?: string;
+    padding?: 'small' | 'medium' | 'large' | 'none';
     onScroll?(event: React.UIEvent<HTMLDivElement>): void;
     id?: string;
 }

package/react/components/Layouts/MainPanel.js

@@ -31,19 +31,26 @@ 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.MainPanel = void 0;
 var React = __importStar(require("react"));
+var classnames_1 = __importDefault(require("classnames"));
 var MainPanel = /** @class */ (function (_super) {
     __extends(MainPanel, _super);
     function MainPanel() {
         return _super !== null && _super.apply(this, arguments) || this;
     }
     MainPanel.prototype.render = function () {
-        var className = !this.props.className ?
-            'sd-main-content-grid__content' :
-            "sd-main-content-grid__content " + this.props.className;
-        return (React.createElement("div", { className: className, onScroll: this.props.onScroll, id: this.props.id || undefined }, this.props.children));
+        var classes = classnames_1.default('sd-main-content-grid__content', {
+            'sd-padding--2': !this.props.padding || this.props.padding === 'small',
+            'sd-padding--3': this.props.padding === 'medium',
+            'sd-padding--4': this.props.padding === 'large',
+            'sd-padding--0': this.props.padding === 'none',
+        }, this.props.className);
+        return (React.createElement("div", { className: classes }, this.props.children));
     };
     return MainPanel;
 }(React.PureComponent));

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

@@ -0,0 +1,8 @@
+import * as React from 'react';
+interface IProps {
+    children?: React.ReactNode;
+}
+export declare class OverlayPanel extends React.PureComponent<IProps> {
+    render(): JSX.Element;
+}
+export {};

package/react/components/Layouts/OverlayPanel.js

@@ -0,0 +1,49 @@
+"use strict";
+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]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+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);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.OverlayPanel = void 0;
+var React = __importStar(require("react"));
+var OverlayPanel = /** @class */ (function (_super) {
+    __extends(OverlayPanel, _super);
+    function OverlayPanel() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    OverlayPanel.prototype.render = function () {
+        return (React.createElement("div", { className: 'sd-main-content-grid__overlay' },
+            React.createElement("div", { className: 'sd-overlay-panel sd-overlay-panel--dark-ui' },
+                React.createElement("div", { className: 'side-panel side-panel--shadow-right side-panel--dark-ui' }, this.props.children))));
+    };
+    return OverlayPanel;
+}(React.PureComponent));
+exports.OverlayPanel = OverlayPanel;

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

@@ -45,6 +45,7 @@ declare class PanelFooter extends React.PureComponent {
 }
 interface IPropsSlidingToolbar {
     right?: boolean;
+    open?: boolean;
 }
 declare class PanelHeaderSlidingToolbar extends React.PureComponent<IPropsSlidingToolbar> {
     render(): JSX.Element;

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

@@ -1,9 +1,13 @@
 export { Panel, PanelHeader, PanelContent, PanelContentBlock, PanelFooter, PanelHeaderSlidingToolbar } from './Panel';
+export { Layout } from './Layout';
+export { LayoutContainer } from './LayoutContainer';
 export { HeaderPanel } from './HeaderPanel';
+export { MainPanel, IMainPanelProps } from './MainPanel';
 export { LeftPanel } from './LeftPanel';
 export { RightPanel } from './RightPanel';
-export { LayoutContainer } from './LayoutContainer';
-export { MainPanel, IMainPanelProps } from './MainPanel';
+export { OverlayPanel } from './OverlayPanel';
+export { AuthoringContainer } from './AuthoringContainer';
+export { ContentSplitter } from './ContentSplitter';
 export { PageLayout } from './PageLayout';
 export { Container } from './Container';
 export { AuthoringFrameContainer } from './AuthoringFrameContainer';

package/react/components/Layouts/index.js

@@ -7,16 +7,24 @@ Object.defineProperty(exports, "PanelContent", { enumerable: true, get: function
 Object.defineProperty(exports, "PanelContentBlock", { enumerable: true, get: function () { return Panel_1.PanelContentBlock; } });
 Object.defineProperty(exports, "PanelFooter", { enumerable: true, get: function () { return Panel_1.PanelFooter; } });
 Object.defineProperty(exports, "PanelHeaderSlidingToolbar", { enumerable: true, get: function () { return Panel_1.PanelHeaderSlidingToolbar; } });
+var Layout_1 = require("./Layout");
+Object.defineProperty(exports, "Layout", { enumerable: true, get: function () { return Layout_1.Layout; } });
+var LayoutContainer_1 = require("./LayoutContainer");
+Object.defineProperty(exports, "LayoutContainer", { enumerable: true, get: function () { return LayoutContainer_1.LayoutContainer; } });
 var HeaderPanel_1 = require("./HeaderPanel");
 Object.defineProperty(exports, "HeaderPanel", { enumerable: true, get: function () { return HeaderPanel_1.HeaderPanel; } });
+var MainPanel_1 = require("./MainPanel");
+Object.defineProperty(exports, "MainPanel", { enumerable: true, get: function () { return MainPanel_1.MainPanel; } });
 var LeftPanel_1 = require("./LeftPanel");
 Object.defineProperty(exports, "LeftPanel", { enumerable: true, get: function () { return LeftPanel_1.LeftPanel; } });
 var RightPanel_1 = require("./RightPanel");
 Object.defineProperty(exports, "RightPanel", { enumerable: true, get: function () { return RightPanel_1.RightPanel; } });
-var LayoutContainer_1 = require("./LayoutContainer");
-Object.defineProperty(exports, "LayoutContainer", { enumerable: true, get: function () { return LayoutContainer_1.LayoutContainer; } });
-var MainPanel_1 = require("./MainPanel");
-Object.defineProperty(exports, "MainPanel", { enumerable: true, get: function () { return MainPanel_1.MainPanel; } });
+var OverlayPanel_1 = require("./OverlayPanel");
+Object.defineProperty(exports, "OverlayPanel", { enumerable: true, get: function () { return OverlayPanel_1.OverlayPanel; } });
+var AuthoringContainer_1 = require("./AuthoringContainer");
+Object.defineProperty(exports, "AuthoringContainer", { enumerable: true, get: function () { return AuthoringContainer_1.AuthoringContainer; } });
+var ContentSplitter_1 = require("./ContentSplitter");
+Object.defineProperty(exports, "ContentSplitter", { enumerable: true, get: function () { return ContentSplitter_1.ContentSplitter; } });
 var PageLayout_1 = require("./PageLayout");
 Object.defineProperty(exports, "PageLayout", { enumerable: true, get: function () { return PageLayout_1.PageLayout; } });
 var Container_1 = require("./Container");

package/react/components/Lists/BoxedList.d.ts

@@ -17,8 +17,10 @@ interface IPropsItem {
     footer?: React.ReactNode;
     actions?: React.ReactNode;
     children?: React.ReactNode;
+    density?: 'compact' | 'comfortable' | 'loose';
     type?: 'default' | 'primary' | 'success' | 'warning' | 'alert' | 'highlight';
     clickable?: boolean;
+    alignVertical?: 'start' | 'center';
     slideInActions?: boolean;
     selected?: boolean;
     onClick?(): void;

package/react/components/Lists/BoxedList.js

@@ -103,13 +103,15 @@ var BoxedListItem = /** @class */ (function (_super) {
     BoxedListItem.prototype.render = function () {
         var _a;
         var classes = classnames_1.default('boxed-list__item', (_a = {
-                'simple-list--compact': this.props.type === undefined,
-                'boxed-list__item--clickable': this.props.clickable === true,
-                'boxed-list__item--selected': this.props.selected
+                'boxed-list__item--comfortable': this.props.density === undefined
             },
+            _a["boxed-list__item--" + this.props.density] = this.props.density || this.props.density !== undefined,
+            _a['boxed-list__item--clickable'] = this.props.clickable === true,
+            _a['boxed-list__item--selected'] = this.props.selected,
             _a["boxed-list__item--" + this.props.type] = this.props.type || this.props.type !== undefined,
+            _a["boxed-list__item--align-" + this.props.alignVertical] = this.props.alignVertical,
             _a));
-        return (React.createElement("li", { className: classes },
+        return (React.createElement("li", { className: classes, onClick: this.props.onClick },
             this.props.media && (React.createElement(BoxedListMedia, null, this.props.media)),
             React.createElement(BoxedListContent, null, this.props.children),
             this.props.footer && (React.createElement(BoxedListFooter, null, this.props.footer)),

package/react/components/Modal.d.ts

@@ -4,6 +4,8 @@ interface IProps {
     className?: string;
     theme?: string;
     visible?: boolean;
+    contentBg?: 'default' | 'medium' | 'dark';
+    contentPadding?: 'none' | 'small' | 'medium' | 'large';
     size?: 'small' | 'medium' | 'large' | 'x-large';
     maximized?: boolean;
     headerTemplate?: JSX.Element | string;

package/react/components/Modal.js

@@ -19,15 +19,23 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Modal = void 0;
 var react_1 = __importDefault(require("react"));
 var dialog_1 = require("@superdesk/primereact/dialog");
+var classnames_1 = __importDefault(require("classnames"));
 var Modal = /** @class */ (function (_super) {
     __extends(Modal, _super);
     function Modal() {
         return _super !== null && _super.apply(this, arguments) || this;
     }
     Modal.prototype.render = function () {
-        return react_1.default.createElement("div", { style: { display: 'content' }, "data-theme": this.props.theme !== 'dark' ? null : 'dark-ui', className: this.props.className },
-            react_1.default.createElement(dialog_1.Dialog, { id: this.props.id, visible: this.props.visible, header: this.props.headerTemplate, footer: this.props.footerTemplate, closeOnEscape: this.props.closeOnEscape, maximized: this.props.maximized, contentClassName: this.props.size ?
-                    ('p-dialog-content--' + this.props.size) : undefined, onShow: this.props.onShow, onHide: this.props.onHide }, this.props.children));
+        var _a;
+        var classes = classnames_1.default((_a = {},
+            _a["p-dialog-content--" + this.props.size] = this.props.size,
+            _a['p-dialog-content--default'] = this.props.contentBg === undefined,
+            _a["p-dialog-content--" + this.props.contentBg] = this.props.contentBg,
+            _a['p-dialog-content--s-padding'] = this.props.contentPadding === undefined,
+            _a["p-dialog-content--" + this.props.contentPadding] = this.props.contentPadding,
+            _a), this.props.className);
+        return (react_1.default.createElement("div", { style: { display: 'content' }, "data-theme": this.props.theme !== 'dark' ? null : 'dark-ui' },
+            react_1.default.createElement(dialog_1.Dialog, { id: this.props.id, visible: this.props.visible, header: this.props.headerTemplate, footer: this.props.footerTemplate, closeOnEscape: this.props.closeOnEscape, maximized: this.props.maximized, contentClassName: classes, onShow: this.props.onShow, onHide: this.props.onHide }, this.props.children)));
     };
     return Modal;
 }(react_1.default.Component));

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

@@ -8,6 +8,7 @@ export interface ISideBarTab {
     size: 'small' | 'big';
     tooltip?: string;
     active?: boolean;
+    badgeValue?: string;
     onClick(event: React.MouseEvent<HTMLButtonElement, MouseEvent>): void;
 }
 interface IState {

package/react/components/Navigation/SideBarTabs.js

@@ -35,6 +35,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.SideBarTabs = void 0;
 var React = __importStar(require("react"));
 var Icon_1 = require("../Icon");
+var Badge_1 = require("../Badge");
 var SideBarTabs = /** @class */ (function (_super) {
     __extends(SideBarTabs, _super);
     function SideBarTabs(props) {
@@ -71,6 +72,9 @@ var SideBarTabs = /** @class */ (function (_super) {
                         React.createElement("a", { role: 'button', "aria-label": item['tooltip'], className: 'sd-sidetab-menu__btn' + (item['active'] ?
                                 ' sd-sidetab-menu__btn--active' :
                                 (index === _this.state.index ? ' sd-sidetab-menu__btn--active' : '')), onClick: function () { return _this.handleClick(item, index, event); } },
+                            item['badgeValue'] != null
+                                ? (React.createElement(Badge_1.Badge, { text: item['badgeValue'], type: 'primary' }))
+                                : null,
                             React.createElement("span", { className: 'sd-sidetab-menu__main-icon ' },
                                 React.createElement(Icon_1.Icon, { size: item['size'], name: item['icon'] })),
                             React.createElement("i", { className: 'sd-sidetab-menu__helper-icon icon-close-small' }))));

package/react/components/SearchBar.d.ts

@@ -0,0 +1,23 @@
+import * as React from 'react';
+interface IProps {
+    value?: string | number;
+    type?: 'expanded' | 'collapsed' | 'boxed';
+    placeholder: string;
+    focused?: boolean;
+    boxed?: boolean;
+    onSubmit?(): void;
+}
+interface IState {
+    inputValue: any;
+    type: string;
+    focused: boolean;
+    boxed?: boolean;
+}
+export declare class SearchBar extends React.PureComponent<IProps, IState> {
+    private inputRef;
+    constructor(props: IProps);
+    componentDidUpdate(prevProps: any): void;
+    componentDidMount: () => void;
+    render(): JSX.Element;
+}
+export {};

package/react/components/SearchBar.js

@@ -0,0 +1,87 @@
+"use strict";
+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]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+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);
+    __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.SearchBar = void 0;
+var React = __importStar(require("react"));
+var classnames_1 = __importDefault(require("classnames"));
+var Icon_1 = require("./Icon");
+var SearchBar = /** @class */ (function (_super) {
+    __extends(SearchBar, _super);
+    function SearchBar(props) {
+        var _this = _super.call(this, props) || this;
+        _this.componentDidMount = function () {
+            document.addEventListener("mousedown", function (event) {
+                if (_this.inputRef.current && !_this.inputRef.current.contains(event.target)) {
+                    _this.setState({ focused: false });
+                }
+            });
+        };
+        _this.state = {
+            inputValue: _this.props.value ? _this.props.value : '',
+            focused: _this.props.focused ? _this.props.focused : false,
+            type: _this.props.type ? _this.props.type : 'expanded',
+            boxed: _this.props.boxed ? _this.props.boxed : false,
+        };
+        _this.inputRef = React.createRef();
+        return _this;
+    }
+    SearchBar.prototype.componentDidUpdate = function (prevProps) {
+        if (prevProps.value !== this.props.value) {
+            this.setState({ inputValue: this.props.value });
+        }
+    };
+    SearchBar.prototype.render = function () {
+        var _a;
+        var _this = this;
+        var classes = classnames_1.default('sd-searchbar', (_a = {},
+            _a["sd-searchbar--" + this.state.type] = this.props.type,
+            _a['sd-searchbar--expanded'] = this.state.type === 'expanded' || this.props.type === undefined,
+            _a['sd-searchbar--focused'] = this.state.focused,
+            _a['sd-searchbar--boxed'] = this.state.boxed,
+            _a));
+        return (React.createElement("div", { className: classes, ref: this.inputRef },
+            React.createElement("label", { className: "sd-searchbar__icon" }),
+            React.createElement("input", { id: "search-input", ref: function (input) { return (input && _this.props.focused) && input.focus(); }, className: "sd-searchbar__input", type: "text", placeholder: this.props.placeholder, value: this.state.inputValue, onChange: function (e) { return _this.setState({ inputValue: e.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(Icon_1.Icon, { name: 'remove-sign' })),
+            React.createElement("button", { id: "sd-searchbar__search-btn", className: "sd-searchbar__search-btn", onSubmit: function () { return _this.props.onSubmit; } },
+                React.createElement(Icon_1.Icon, { name: 'chevron-right-thin' }))));
+    };
+    return SearchBar;
+}(React.PureComponent));
+exports.SearchBar = SearchBar;

package/react/components/Select.d.ts

@@ -10,6 +10,7 @@ interface ISelect {
     inlineLabel?: boolean;
     labelHidden?: boolean;
     tabindex?: number;
+    fullWidth?: boolean;
     onChange(newValue: string): void;
 }
 interface IState {

package/react/components/Select.js

@@ -61,6 +61,7 @@ var Select = /** @class */ (function (_super) {
             'sd-input--inline-label': this.props.inlineLabel,
             'sd-input--required': this.props.required,
             'sd-input--disabled': this.props.disabled,
+            'sd-input--full-width': this.props.fullWidth,
             'sd-input--invalid': this.props.invalid || this.state.invalid,
         });
         var labelClasses = classnames_1.default('sd-input__label', {

package/react/components/Spinner.js

@@ -62,7 +62,7 @@ var Spinner = /** @class */ (function (_super) {
             _a["sd-spinner--" + this.props.size] = this.props.size || this.props.size !== undefined,
             _a));
         return (React.createElement("svg", { role: "progressbar", className: classes, viewBox: "0 0 50 50" },
-            React.createElement("circle", { className: "sd-spinner__path", cx: "25", cy: "25", r: "20", fill: "none", "stroke-width": "5" })));
+            React.createElement("circle", { className: "sd-spinner__path", cx: "25", cy: "25", r: "20", fill: "none", strokeWidth: "5" })));
     };
     return Spinner;
 }(React.PureComponent));

package/react/components/SwitchGroup.d.ts

@@ -3,6 +3,7 @@ interface IProps {
     orientation?: 'vertical' | 'horizontal';
     align?: 'left' | 'right';
     children: React.ReactNode;
+    className?: string;
 }
 export declare class SwitchGroup extends React.PureComponent<IProps> {
     render(): JSX.Element;

package/react/components/SwitchGroup.js

@@ -49,7 +49,7 @@ var SwitchGroup = /** @class */ (function (_super) {
             _a["sd-switch__group--vertical"] = this.props.orientation !== 'horizontal',
             _a["sd-switch__group--horizontal"] = this.props.orientation === 'horizontal',
             _a["sd-switch__group--right"] = this.props.align === 'right',
-            _a));
+            _a), this.props.className);
         return (React.createElement("div", { className: classes }, this.props.children));
     };
     return SwitchGroup;

package/react/index.d.ts

@@ -63,6 +63,8 @@ export { SelectGrid } from './components/SelectGrid';
 export { IconPicker } from './components/IconPicker';
 export { ThemeSelector } from './components/ThemeSelector';
 export { DropZone } from './components/DropZone';
+export { CreateButton } from './components/CreateButton';
+export { SearchBar } from './components/SearchBar';
 export * from './components/Layouts';
 export * from './components/Form';
 export * from './components/Navigation';

package/react/index.js

@@ -159,6 +159,11 @@ var ThemeSelector_1 = require("./components/ThemeSelector");
 Object.defineProperty(exports, "ThemeSelector", { enumerable: true, get: function () { return ThemeSelector_1.ThemeSelector; } });
 var DropZone_1 = require("./components/DropZone");
 Object.defineProperty(exports, "DropZone", { enumerable: true, get: function () { return DropZone_1.DropZone; } });
+var CreateButton_1 = require("./components/CreateButton");
+Object.defineProperty(exports, "CreateButton", { enumerable: true, get: function () { return CreateButton_1.CreateButton; } });
+// export { TreeSelect } from './components/TreeSelect';
+var SearchBar_1 = require("./components/SearchBar");
+Object.defineProperty(exports, "SearchBar", { enumerable: true, get: function () { return SearchBar_1.SearchBar; } });
 __exportStar(require("./components/Layouts"), exports);
 __exportStar(require("./components/Form"), exports);
 __exportStar(require("./components/Navigation"), exports);