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

package/react/components/Form/index.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.FormLabel = exports.FormText = exports.FormItem = exports.FormGroup = exports.FormRow = void 0;
+exports.InputNew = exports.InputBase = exports.InputWrapper = exports.FormLabel = exports.FormText = exports.FormItem = exports.FormGroup = exports.FormRow = void 0;
 var FormRow_1 = require("./FormRow");
 Object.defineProperty(exports, "FormRow", { enumerable: true, get: function () { return FormRow_1.FormRow; } });
 var FormGroup_1 = require("./FormGroup");
@@ -11,3 +11,9 @@ var FormText_1 = require("./FormText");
 Object.defineProperty(exports, "FormText", { enumerable: true, get: function () { return FormText_1.FormText; } });
 var FormLabel_1 = require("./FormLabel");
 Object.defineProperty(exports, "FormLabel", { enumerable: true, get: function () { return FormLabel_1.FormLabel; } });
+var InputWrapper_1 = require("./InputWrapper");
+Object.defineProperty(exports, "InputWrapper", { enumerable: true, get: function () { return InputWrapper_1.InputWrapper; } });
+var InputBase_1 = require("./InputBase");
+Object.defineProperty(exports, "InputBase", { enumerable: true, get: function () { return InputBase_1.InputBase; } });
+var InputNew_1 = require("./InputNew");
+Object.defineProperty(exports, "InputNew", { enumerable: true, get: function () { return InputNew_1.InputNew; } });

package/react/components/Input.js

@@ -39,8 +39,9 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Input = void 0;
 var React = __importStar(require("react"));
-var classnames_1 = __importDefault(require("classnames"));
+// import classNames from 'classnames';
 var react_id_generator_1 = __importDefault(require("react-id-generator"));
+var Form_1 = require("./Form");
 var Input = /** @class */ (function (_super) {
     __extends(Input, _super);
     function Input(props) {
@@ -72,39 +73,9 @@ var Input = /** @class */ (function (_super) {
         }
     };
     Input.prototype.render = function () {
-        var _a;
-        var _b;
-        var classes = (0, classnames_1.default)('sd-input', (_a = {
-                '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,
-                'sd-input--medium': this.props.size === undefined
-            },
-            _a["sd-input--".concat(this.props.size)] = this.props.size || this.props.size !== undefined,
-            _a['sd-input--boxed-style'] = this.props.boxedStyle,
-            _a['sd-input--boxed-label'] = this.props.boxedLable,
-            _a));
-        var labelClasses = (0, classnames_1.default)('sd-input__label', {
-            'a11y-only': this.props.labelHidden,
-            'sd-input__label--boxed': this.props.boxedLable,
-        });
-        return (React.createElement("div", { className: classes },
-            React.createElement("label", { className: labelClasses, htmlFor: this.htmlId, id: this.htmlId + 'label', tabIndex: this.props.tabindex === undefined ? undefined : -1 }, this.props.label),
-            React.createElement("input", { className: 'sd-input__input', type: (_b = this.props.type) !== null && _b !== void 0 ? _b : 'text', id: this.htmlId, value: this.state.value, "aria-describedby": this.htmlId + 'label', tabIndex: this.props.tabindex, onChange: this.handleChange, placeholder: this.props.placeholder, disabled: this.props.disabled }),
-            this.props.maxLength ?
-                React.createElement("div", { className: 'sd-input__char-count' },
-                    this.state.value.toString().length,
-                    " / ",
-                    this.props.maxLength)
-                : null,
-            React.createElement("div", { className: 'sd-input__message-box' },
-                this.props.info && !this.props.invalid && !this.state.invalid ?
-                    React.createElement("div", { className: 'sd-input__hint' }, this.props.info) : null,
-                this.props.invalid || this.state.invalid ?
-                    React.createElement("div", { className: 'sd-input__message' }, this.props.error)
-                    : null)));
+        var _a, _b;
+        return (React.createElement(Form_1.InputWrapper, { label: this.props.label, error: this.props.error, required: this.props.required, disabled: this.props.disabled, value: this.state.value, invalid: this.props.invalid, info: this.props.info, maxLength: this.props.maxLength, inlineLabel: this.props.inlineLabel, labelHidden: this.props.labelHidden, size: (_a = this.props.size) !== null && _a !== void 0 ? _a : 'medium', fullWidth: this.props.fullWidth, htmlId: this.htmlId, boxedStyle: this.props.boxedStyle, boxedLable: this.props.boxedLable, tabindex: this.props.tabindex },
+            React.createElement("input", { className: 'sd-input__input', type: (_b = this.props.type) !== null && _b !== void 0 ? _b : 'text', id: this.htmlId, value: this.state.value, "aria-describedby": this.htmlId + 'label', tabIndex: this.props.tabindex, onChange: this.handleChange, placeholder: this.props.placeholder, disabled: this.props.disabled })));
     };
     return Input;
 }(React.Component));

package/react/components/Label.d.ts

@@ -7,6 +7,7 @@ interface IProps {
     size?: 'small' | 'normal' | 'large';
     onClick?(): void;
     noTransform?: boolean;
+    hexColor?: string;
     style?: 'filled' | 'hollow' | 'translucent';
 }
 export declare class Label extends React.PureComponent<IProps> {

package/react/components/Label.js

@@ -56,10 +56,26 @@ var Label = /** @class */ (function (_super) {
             _a["hollow-".concat(this.props.color)] = this.props.color && this.props.style === 'hollow',
             _a));
         if (this.props.link || this.props.onClick) {
-            return (React.createElement("a", { href: this.props.link, className: classes, onClick: this.props.onClick }, this.props.text));
+            if (this.props.style === 'hollow') {
+                return (React.createElement("a", { className: classes, href: this.props.link, onClick: this.props.onClick, style: { color: this.props.hexColor, borderColor: this.props.hexColor } }, this.props.text));
+            }
+            else if (this.props.style === 'translucent') {
+                return (React.createElement("a", { className: classes, href: this.props.link, onClick: this.props.onClick, style: { color: this.props.hexColor, backgroundColor: "".concat(this.props.hexColor, "33") } }, this.props.text));
+            }
+            else {
+                return (React.createElement("a", { className: classes, href: this.props.link, onClick: this.props.onClick, style: { backgroundColor: this.props.hexColor } }, this.props.text));
+            }
         }
         else {
-            return (React.createElement("span", { className: classes }, this.props.text));
+            if (this.props.style === 'hollow') {
+                return (React.createElement("span", { className: classes, style: { color: this.props.hexColor, borderColor: this.props.hexColor } }, this.props.text));
+            }
+            else if (this.props.style === 'translucent') {
+                return (React.createElement("span", { className: classes, style: { color: this.props.hexColor, backgroundColor: "".concat(this.props.hexColor, "33") } }, this.props.text));
+            }
+            else {
+                return (React.createElement("span", { className: classes, style: { backgroundColor: this.props.hexColor } }, this.props.text));
+            }
         }
     };
     return Label;

package/react/components/Layouts/Layout.js

@@ -31,6 +31,6 @@ var Layout = function (_a) {
                 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: 'sd-bottom-bar' }, "This is the footer.")));
+        React.createElement("footer", { className: 'sd-bottom-bar' }, "Footer")));
 };
 exports.Layout = Layout;

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

@@ -0,0 +1,45 @@
+import * as React from 'react';
+interface IPropsItem {
+    action?: React.ReactNode;
+    locked?: boolean;
+    itemColum: Array<{
+        itemRow: Array<{
+            content: any;
+        }>;
+        border?: boolean;
+        fullwidth?: boolean;
+    }>;
+    activated?: boolean;
+    selected?: boolean;
+    archived?: boolean;
+    loading?: boolean;
+    onClick?(): void;
+    onDoubleClick?(): void;
+}
+declare class ContentListItem extends React.PureComponent<IPropsItem> {
+    render(): JSX.Element;
+}
+interface IProps {
+    items: Array<{
+        itemColum: Array<IItemArray>;
+        locked?: boolean;
+        action?: React.ReactNode;
+        loading?: boolean;
+        activated?: boolean;
+        selected?: boolean;
+        archived?: boolean;
+        onClick?(): void;
+        onDoubleClick?(): void;
+    }>;
+}
+interface IItemArray {
+    itemRow: Array<{
+        content: React.ReactNode;
+    }>;
+    border?: boolean;
+    fullwidth?: boolean;
+}
+declare class ContentList extends React.PureComponent<IProps> {
+    render(): JSX.Element;
+}
+export { ContentList, ContentListItem };

package/react/components/Lists/ContentList.js

@@ -0,0 +1,85 @@
+"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 (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 __());
+    };
+})();
+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.prototype.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.ContentListItem = exports.ContentList = void 0;
+var React = __importStar(require("react"));
+var classnames_1 = __importDefault(require("classnames"));
+var ContentListItem = /** @class */ (function (_super) {
+    __extends(ContentListItem, _super);
+    function ContentListItem() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    ContentListItem.prototype.render = function () {
+        var classes = (0, classnames_1.default)('sd-list-item sd-list-item-group sd-list-item-group--space-between-items', {
+            'sd-list-item--activated': this.props.activated,
+            'sd-list-item--selected': this.props.selected,
+            'fetched': this.props.archived,
+            'actioning': this.props.loading,
+        });
+        return (React.createElement("div", { className: classes, onClick: this.props.onClick, onDoubleClick: this.props.onDoubleClick },
+            React.createElement("div", { className: "sd-list-item sd-shadow--z1" },
+                this.props.locked
+                    ? React.createElement("div", { className: "sd-list-item__border sd-list-item__border--locked" })
+                    : React.createElement("div", { className: "sd-list-item__border" }),
+                this.props.itemColum.map(function (item, index) {
+                    return React.createElement("div", { className: "sd-list-item__column ".concat(item.fullwidth && 'sd-list-item__column--grow', " ").concat(!item.border && 'sd-list-item__column--no-border'), key: index }, item.itemRow.map(function (e, i) {
+                        return (item.itemRow.length <= 1
+                            ? React.createElement(React.Fragment, { key: i }, e.content)
+                            : React.createElement("div", { className: "sd-list-item__row", key: i }, e.content));
+                    }));
+                }),
+                React.createElement("div", { className: "sd-list-item__action-menu" }, this.props.action))));
+    };
+    return ContentListItem;
+}(React.PureComponent));
+exports.ContentListItem = ContentListItem;
+var ContentList = /** @class */ (function (_super) {
+    __extends(ContentList, _super);
+    function ContentList() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    ContentList.prototype.render = function () {
+        var classes = (0, classnames_1.default)('sd-list-item-group sd-list-item-group--space-between-items');
+        return (React.createElement("ul", { className: classes }, this.props.items.map(function (item, index) {
+            return React.createElement(ContentListItem, { key: index, itemColum: item.itemColum, locked: item.locked, action: item.action, loading: item.loading, activated: item.activated, selected: item.selected, archived: item.archived, onClick: item.onClick, onDoubleClick: item.onDoubleClick });
+        })));
+    };
+    return ContentList;
+}(React.PureComponent));
+exports.ContentList = ContentList;

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

@@ -8,6 +8,7 @@ interface IItem {
     active?: boolean;
     title: string;
     onClick(event: any): void;
+    onRemove(event: any): void;
 }
 interface IState {
     index: number;

package/react/components/Navigation/BottomNav.js

@@ -71,7 +71,7 @@ var BottomNav = /** @class */ (function (_super) {
     };
     BottomNav.prototype.render = function () {
         var _this = this;
-        return (React.createElement("ul", { className: 'sd-bottom-nav-list' }, this.state.items.map(function (item, index) {
+        return (React.createElement("ul", { className: 'sd-bottom-nav-list' }, this.props.items.map(function (item, index) {
             return (React.createElement("li", { key: index, className: 'sd-bottom-nav-list__item' + (item['active'] ? ' sd-bottom-nav-list__item--active' : (index === _this.state.index ? ' sd-bottom-nav-list__item--active' : '')) },
                 React.createElement("a", { className: 'sd-bottom-nav-list__item-title', onClick: function (event) {
                         _this.handleClick(index);
@@ -80,7 +80,7 @@ var BottomNav = /** @class */ (function (_super) {
                     item['icon'] &&
                         React.createElement(Icon_1.Icon, { name: item['icon'] }),
                     React.createElement("span", null, item.title)),
-                React.createElement(IconButton_1.IconButton, { size: 'small', icon: "close-small", ariaValue: 'Delete', onClick: function () { return _this.handleDelete(index); } })));
+                React.createElement(IconButton_1.IconButton, { size: 'small', icon: "close-small", ariaValue: 'Delete', onClick: function () { return item.onRemove(index); } })));
         })));
     };
     return BottomNav;

package/react/components/Select.d.ts

@@ -22,8 +22,8 @@ interface IState {
     invalid: boolean;
 }
 declare class Select extends React.Component<ISelect, IState> {
+    private htmlId;
     constructor(props: ISelect);
-    htmlId: string;
     handleChange(event: React.ChangeEvent<HTMLSelectElement>): void;
     render(): JSX.Element;
 }

package/react/components/Select.js

@@ -39,8 +39,9 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Option = exports.Select = void 0;
 var React = __importStar(require("react"));
-var classnames_1 = __importDefault(require("classnames"));
+// import classNames from 'classnames';
 var react_id_generator_1 = __importDefault(require("react-id-generator"));
+var Form_1 = require("./Form");
 var Select = /** @class */ (function (_super) {
     __extends(Select, _super);
     function Select(props) {
@@ -59,31 +60,8 @@ var Select = /** @class */ (function (_super) {
         this.props.onChange(event.target.value);
     };
     Select.prototype.render = function () {
-        var _a;
-        var classes = (0, classnames_1.default)('sd-input sd-input--is-select', (_a = {
-                '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,
-                'sd-input--medium': this.props.size === undefined
-            },
-            _a["sd-input--".concat(this.props.size)] = this.props.size || this.props.size !== undefined,
-            _a['sd-input--boxed-style'] = this.props.boxedStyle,
-            _a['sd-input--boxed-label'] = this.props.boxedLable,
-            _a));
-        var labelClasses = (0, classnames_1.default)('sd-input__label', {
-            'a11y-only': this.props.labelHidden,
-        });
-        return (React.createElement("div", { className: classes },
-            React.createElement("label", { className: labelClasses, htmlFor: this.htmlId, tabIndex: this.props.tabindex === undefined ? undefined : -1 }, this.props.label),
-            React.createElement("select", { className: 'sd-input__select', id: this.htmlId, value: this.state.value, "aria-describedby": this.htmlId, tabIndex: this.props.tabindex, onChange: this.handleChange, disabled: this.props.disabled }, this.props.children),
-            React.createElement("div", { className: 'sd-input__message-box' },
-                this.props.info && !this.props.invalid && !this.state.invalid ?
-                    React.createElement("div", { className: 'sd-input__hint' }, this.props.info) : null,
-                this.props.invalid || this.state.invalid ?
-                    React.createElement("div", { className: 'sd-input__message' }, this.props.error)
-                    : null)));
+        return (React.createElement(Form_1.InputWrapper, { label: this.props.label, error: this.props.error, required: this.props.required, disabled: this.props.disabled, invalid: this.state.invalid, info: this.props.info, inlineLabel: this.props.inlineLabel, labelHidden: this.props.labelHidden, fullWidth: this.props.fullWidth, htmlId: this.htmlId, tabindex: this.props.tabindex },
+            React.createElement("select", { className: 'sd-input__select', id: this.htmlId, value: this.state.value, "aria-describedby": this.htmlId, tabIndex: this.props.tabindex, onChange: this.handleChange, disabled: this.props.disabled }, this.props.children)));
     };
     return Select;
 }(React.Component));

package/react/components/SelectWithTemplate.d.ts

@@ -12,19 +12,29 @@ interface IProps<T> {
     noResultsFoundMessage: string;
     filterPlaceholder?: string;
     disabled?: boolean;
-    required?: boolean;
     autoFocus?: boolean;
     autoOpen?: boolean;
     width?: 'min' | '100%';
     zIndex?: number;
     'data-test-id'?: string;
+    inlineLabel?: boolean;
+    required?: boolean;
+    fullWidth?: boolean;
+    invalid?: boolean;
+    labelHidden?: boolean;
+    tabindex?: number;
+    label?: string;
+    info?: string;
+    error?: string;
 }
 interface IState<T> {
     options: Array<T>;
     loading: boolean;
+    invalid: boolean;
 }
 export declare class SelectWithTemplate<T> extends React.Component<IProps<T>, IState<T>> {
     componentRef: Dropdown | null;
+    private htmlId;
     constructor(props: IProps<T>);
     componentDidMount(): void;
     render(): JSX.Element;

package/react/components/SelectWithTemplate.js

@@ -33,18 +33,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.SelectWithTemplate = void 0;
 var React = __importStar(require("react"));
 var dropdown_1 = require("@superdesk/primereact/dropdown");
+// import classNames from 'classnames';
+var react_id_generator_1 = __importDefault(require("react-id-generator"));
+var Form_1 = require("./Form");
 var labelKey = 'label';
 var SelectWithTemplate = /** @class */ (function (_super) {
     __extends(SelectWithTemplate, _super);
     function SelectWithTemplate(props) {
         var _this = _super.call(this, props) || this;
+        _this.htmlId = (0, react_id_generator_1.default)();
         _this.state = {
             options: [],
             loading: false,
+            invalid: _this.props.invalid ? _this.props.invalid : false,
         };
         _this.componentRef = null;
         return _this;
@@ -84,16 +92,17 @@ var SelectWithTemplate = /** @class */ (function (_super) {
         // needs to be passed to prime react component
         // or it will not be displayed at all, even if returned by itemTemplate
         var fakePlaceholderWithNonBreakingSpace = ' ';
-        return (React.createElement(dropdown_1.Dropdown, { value: valueInternal, options: optionsInternal, onChange: function (e) {
-                onChange(e.value == null ? null : e.value.original);
-            }, placeholder: fakePlaceholderWithNonBreakingSpace, filterPlaceholder: filterPlaceholder, filter: true, filterBy: labelKey, showClear: !required, emptyFilterMessage: emptyFilterMessage, valueTemplate: function (option) { return React.createElement(ItemTemplate, { option: option == null ? null : option.original }); }, itemTemplate: function (option) { return React.createElement(ItemTemplate, { option: option.original }); }, disabled: disabled, required: required, autoFocus: autoFocus, appendTo: document.body, loading: loading, onFilterInputChange: function (searchString) {
-                _this.setState({ loading: true });
-                getItems(searchString).then(function (_options) {
-                    _this.setState({ options: _options, loading: false });
-                });
-            }, zIndex: zIndex, style: width === '100%' ? { display: 'flex', width: '100%' } : {}, ref: function (componentRef) {
-                _this.componentRef = componentRef;
-            } }));
+        return (React.createElement(Form_1.InputWrapper, { label: this.props.label, error: this.props.error, required: this.props.required, disabled: this.props.disabled, invalid: this.state.invalid, info: this.props.info, inlineLabel: this.props.inlineLabel, labelHidden: this.props.labelHidden, fullWidth: this.props.fullWidth, htmlId: this.htmlId, tabindex: this.props.tabindex },
+            React.createElement(dropdown_1.Dropdown, { inputId: this.htmlId, ariaLabelledBy: this.htmlId + 'label', value: valueInternal, options: optionsInternal, onChange: function (e) {
+                    onChange(e.value == null ? null : e.value.original);
+                }, placeholder: fakePlaceholderWithNonBreakingSpace, filterPlaceholder: filterPlaceholder, filter: true, filterBy: labelKey, showClear: !required, emptyFilterMessage: emptyFilterMessage, valueTemplate: function (option) { return React.createElement(ItemTemplate, { option: option == null ? null : option.original }); }, itemTemplate: function (option) { return React.createElement(ItemTemplate, { option: option.original }); }, disabled: disabled, required: required, autoFocus: autoFocus, appendTo: document.body, loading: loading, onFilterInputChange: function (searchString) {
+                    _this.setState({ loading: true });
+                    getItems(searchString).then(function (_options) {
+                        _this.setState({ options: _options, loading: false });
+                    });
+                }, zIndex: zIndex, style: width === '100%' ? { display: 'flex', width: '100%' } : {}, ref: function (componentRef) {
+                    _this.componentRef = componentRef;
+                } })));
     };
     return SelectWithTemplate;
 }(React.Component));

package/react/components/TimePicker.d.ts

@@ -2,10 +2,23 @@ import * as React from 'react';
 interface IProps {
     value: string;
     onChange(valueNext: string): void;
-    required?: boolean;
     disabled?: boolean;
+    inlineLabel?: boolean;
+    required?: boolean;
+    fullWidth?: boolean;
+    invalid?: boolean;
+    labelHidden?: boolean;
+    tabindex?: number;
+    label?: string;
+    info?: string;
+    error?: string;
+}
+interface IState {
+    invalid: boolean;
 }
-export declare class TimePicker extends React.PureComponent<IProps> {
+export declare class TimePicker extends React.PureComponent<IProps, IState> {
+    private htmlId;
+    constructor(props: IProps);
     render(): JSX.Element;
 }
 export {};

package/react/components/TimePicker.js

@@ -33,18 +33,29 @@ 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.TimePicker = void 0;
 var React = __importStar(require("react"));
+// import classNames from 'classnames';
+var react_id_generator_1 = __importDefault(require("react-id-generator"));
+var Form_1 = require("./Form");
 var TimePicker = /** @class */ (function (_super) {
     __extends(TimePicker, _super);
-    function TimePicker() {
-        return _super !== null && _super.apply(this, arguments) || this;
+    function TimePicker(props) {
+        var _this = _super.call(this, props) || this;
+        _this.htmlId = (0, react_id_generator_1.default)();
+        _this.state = {
+            invalid: _this.props.invalid ? _this.props.invalid : false,
+        };
+        return _this;
     }
     TimePicker.prototype.render = function () {
         var _this = this;
-        return (React.createElement("div", { className: "sd-input sd-input--no-label sd-input--no-margin", style: { display: 'inline-flex' } },
-            React.createElement("input", { type: "time", className: "sd-input__input", value: this.props.value, required: this.props.required, disabled: this.props.disabled, onChange: function (event) {
+        return (React.createElement(Form_1.InputWrapper, { label: this.props.label, error: this.props.error, required: this.props.required, disabled: this.props.disabled, invalid: this.state.invalid, info: this.props.info, inlineLabel: this.props.inlineLabel, labelHidden: this.props.labelHidden, fullWidth: this.props.fullWidth, htmlId: this.htmlId, tabindex: this.props.tabindex },
+            React.createElement("input", { id: this.htmlId, "aria-labelledby": this.htmlId + 'label', type: "time", className: "sd-input__input", value: this.props.value, required: this.props.required, disabled: this.props.disabled, onChange: function (event) {
                     _this.props.onChange(event.target.value);
                 } })));
     };

package/react/components/TreeSelect.d.ts

@@ -0,0 +1,75 @@
+import * as React from "react";
+interface IState<T> {
+    value: Array<T>;
+    options: Array<ITreeNode<T>>;
+    firstBranchOptions: Array<any>;
+    openDropdown: boolean;
+    activeTree: Array<any>;
+    filterArr: Array<any>;
+    searchFieldValue: string;
+    buttonTree: Array<any>;
+    buttonValue: any;
+    buttonMouseEvent: boolean;
+    loading: boolean;
+    invalid: boolean;
+}
+interface IPropsBase<T> {
+    value?: Array<T>;
+    selectBranchWithChildren?: boolean;
+    readOnly?: boolean;
+    width?: string;
+    allowMultiple?: boolean;
+    loading?: boolean;
+    singleLevelSearch?: boolean;
+    placeholder?: string;
+    invalid?: boolean;
+    inlineLabel?: boolean;
+    labelHidden?: boolean;
+    tabindex?: number;
+    fullWidth?: boolean;
+    info?: string;
+    error?: string;
+    required?: boolean;
+    label?: string;
+    disabled?: boolean;
+    getLabel(item: T): string;
+    getId(item: T): string;
+    optionTemplate?(item: T): React.ComponentType<T> | JSX.Element;
+    valueTemplate?(item: T): React.ComponentType<T> | JSX.Element;
+    onChange(e: Array<T>): void;
+}
+interface IPropsSync<T> extends IPropsBase<T> {
+    kind: 'synchronous';
+    getOptions(): Array<ITreeNode<T>>;
+}
+interface IPropsAsync<T> extends IPropsBase<T> {
+    kind: 'asynchronous';
+    getOptions?(): Array<ITreeNode<T>>;
+    searchOptions(term: string, callback?: (options: Array<ITreeNode<T>>) => void): any;
+}
+declare type IProps<T> = IPropsSync<T> | IPropsAsync<T>;
+export interface ITreeNode<T> {
+    value: T;
+    children?: Array<ITreeNode<T>>;
+}
+export declare class TreeSelect<T> extends React.Component<IProps<T>, IState<T>> {
+    private dropdownRef;
+    private openDropdownRef;
+    private htmlId;
+    constructor(props: IProps<T>);
+    removeClick(i: number): void;
+    handleMultiLevel(item: ITreeNode<T>): void;
+    handleButton(item: ITreeNode<T>): void;
+    handleValue(event: React.MouseEvent<HTMLLIElement, MouseEvent>, item: ITreeNode<T>): void;
+    handleBranchValue(event: React.MouseEvent<HTMLButtonElement, MouseEvent>, item: ITreeNode<T>): void;
+    handleTree(event: React.MouseEvent<HTMLLIElement, MouseEvent>, option: ITreeNode<T>): void;
+    backButton: () => false | undefined;
+    backButtonValue: () => void;
+    recursion(arr: Array<ITreeNode<T>>): void;
+    componentDidMount: () => void;
+    componentDidUpdate(prevProps: Readonly<IProps<T>>, prevState: Readonly<IState<T>>): void;
+    filteredItem(arr: Array<ITreeNode<T>>): JSX.Element[] | undefined;
+    banchButton(): JSX.Element;
+    render(): JSX.Element;
+}
+export {};