superdesk-ui-framework 3.0.0-beta.0 → 3.0.1-beta.1

package/examples/pages/react/TreeSelect.tsx

@@ -0,0 +1,178 @@
+import * as React from 'react';
+import * as Markup from '../../js/react';
+import { PropsList, Prop } from '../../../app-typescript';
+import { MultiSelect } from '../../../app-typescript/components/MultiSelect';
+import { TreeSelect } from '../../../app-typescript/components/TreeSelect';
+
+interface IState {
+    value: any;
+    value2: any;
+    options: any;
+    options2: any;
+}
+
+let itemArr = [
+    {
+        label: 'Item1',
+        items: [
+            {
+                label: 'Item4',
+                items: [
+                    {label: 'Item10'}
+                ]
+            },
+            {
+                label: 'Item5',
+                items: [
+                    {label: 'Item11'}
+                ]
+            }
+        ]
+    },
+    {
+        label: 'Item2',
+        items: [
+            {
+                label: 'Item6'
+            },
+            {
+                label: 'Item7'
+            }
+        ]
+    },
+    {
+        label: 'Item3',
+        items: [
+            {
+                label: 'Item8'
+            },
+            {
+                label: 'Item9'
+            }
+        ]
+    },
+]
+
+export class TreeSelectDocs extends React.Component<{}, IState> {
+    constructor(props) {
+        super(props);
+        this.state = {
+            value: [],
+            value2: [],
+            options: itemArr,
+            options2: itemArr
+        }
+
+        this.handleChange = this.handleChange.bind(this);
+    }
+
+    handleChange(e, option) {
+
+        if(option.item) {
+            e.stopPropagation();
+            e.preventDefault();
+            
+            this.setState({
+                options: option.item
+            })
+        }  
+    }
+
+    render() {
+        return (
+            <section className='docs-page__container'>
+                <h2 className='docs-page__h2'>TreeSelect</h2>
+
+                <Markup.ReactMarkupCodePreview>{`
+                    <TreeSelect
+                        options={this.state.options2}
+                        getLabel={'label'}
+                        getMultilevelArray={'items'}
+                        selectBranchWithChildren={true}
+                        onChange={() => false}
+                    />
+                `}
+                </Markup.ReactMarkupCodePreview>
+                
+                <Markup.ReactMarkup>
+                    <Markup.ReactMarkupPreview>
+                        <div className='docs-page__content-row docs-page__content-row--no-margin'>
+                            <div className='form__row'>
+                                <TreeSelect
+                                    options={this.state.options}
+                                    getLabel={'label'}
+                                    getMultilevelArray={'items'}
+                                    selectBranchWithChildren={true}
+                                    onChange={() => false}
+                                />
+                            </div>
+                        </div>
+                    </Markup.ReactMarkupPreview>
+
+                    <Markup.ReactMarkupCode>{`
+                        <TreeSelect
+                            options={this.state.options}
+                            getLabel={'label'}
+                            getMultilevelArray={'items'}
+                            selectBranchWithChildren={true}
+                            onChange={() => false}
+                        />
+                    `}</Markup.ReactMarkupCode>
+                    
+                </Markup.ReactMarkup>
+                <p className='docs-page__paragraph'>TreeSelect with custom template.</p>
+                <Markup.ReactMarkup>
+                    <Markup.ReactMarkupPreview>
+                        <div className='docs-page__content-row docs-page__content-row--no-margin'>
+                            <div className='form__row'>
+                                <TreeSelect
+                                    options={this.state.options2}
+                                    getMultilevelArray={'items'}
+                                    getLabel={'label'}
+                                    onChange={() => false}
+                                    optionTemplate={(item: any) => {
+                                        return <div>Label: {item.label}</div>
+                                    }}
+                                    valueTemplate={(item: any) => {
+                                        return <span>Label: {item.label}</span>
+                                    }}
+                                />
+                            </div>
+                        </div>
+                    </Markup.ReactMarkupPreview>
+
+                    <Markup.ReactMarkupCode>{`
+                        <TreeSelect
+                            options={this.state.options2}
+                            getMultilevelArray={'items'}
+                            getLabel={'label'}
+                            onChange={() => false}
+                            optionTemplate={(item: any) => {
+                                return <div>Label: {item.label}</div>
+                            }}
+                            valueTemplate={(item: any) => {
+                                return <span>Label: {item.label}</span>
+                            }}   
+                        />
+                    `}</Markup.ReactMarkupCode>
+
+                </Markup.ReactMarkup>
+
+                <h3 className="docs-page__h3">Props</h3>
+                <PropsList>
+                    <Prop name='value' isRequired={false} type='Array<T>' default='/' description='Value of the component.'/>
+                    <Prop name='options' isRequired={true} type='Array<T>' default='/' description='An array of selectitems to display as the available options.'/>
+                    <Prop name='getLabel' isRequired={true} type='string' default='/' description='Name of the label field of an option and decides which field or fields to search against.'/>
+                    <Prop name='getMultilevelArray' isRequired={true} type='string' default='/' description='Name of the children array of an option.'/>
+                    <Prop name='width' isRequired={false} type='medium | full-width (100%)' default='100%' description='Dropdown width.'/>
+                    <Prop name='selectBranchWithChildren' isRequired={false} type='boolean' default='false' description='When specified, select branch with children is enabled.'/>
+                    <Prop name='readonly' isRequired={false} type='boolean' default='false' description='When specified, component changes are not enabled.'/>
+                    <Prop name='valueTemplate' isRequired={false} type='function' default='/' description='Function that gets an item in the value and returns the content for it.'/>
+                    <Prop name='optionTemplate' isRequired={false} type='function' default='/' description='Function that gets the option and returns the content for it.'/>
+                    <Prop name='onChange' isRequired={true} type='function' default='/' description='Callback to invoke when value changes.'/>
+                </PropsList>
+  
+            </section>
+        )
+    }
+}

package/examples/pages/react.html

@@ -8,6 +8,10 @@
         <li class="docs-page__header-nav-item docs-page__header-nav-item--active"><a class="docs-page__header-nav-link" href="#/react">React</a></li>
         <li class="docs-page__header-nav-item"><a class="docs-page__header-nav-link" href="#/playgrounds">Playground</a></li>
     </ul>
+    <button class="docs-page__header-button" aria-label="Change theme" aria-haspopup="menu" aria-expanded="false">
+        <i role="presentation" class="icon-adjust"></i>
+    </button>
 </header>
 
+
 <doc-react class="sd-wrap-helper"></doc-react>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "superdesk-ui-framework",
-  "version": "3.0.0-beta.0",
+  "version": "3.0.1-beta.1",
   "license": "AGPL-3.0",
   "repository": {
     "type": "git",
@@ -19,9 +19,10 @@
   "scripts": {
     "start": "webpack-dev-server --config tasks/webpack.dev.js",
     "server": "webpack --watch --config tasks/webpack.prod.js && tsc-watch",
-    "build": "webpack --config tasks/webpack.prod.js && tsc && npm run lint",
+    "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-fix": "tsc -p tsconfig.json --noEmit && tslint --fix -c tslint.json 'app-typescript/**/*.{ts,tsx}'",
     "prepublishOnly": "npm run build",
     "prepublish": "patch-package"
   },
@@ -32,6 +33,7 @@
     "@types/react": "16.8.23",
     "@types/react-dom": "16.8.0",
     "@types/react-router-dom": "^5.1.2",
+    "@types/react-scrollspy": "^3.3.5",
     "angular": "^1.7.9",
     "angular-animate": "^1.7.9",
     "angular-route": "^1.7.9",
@@ -56,9 +58,9 @@
     "jquery": "^3.1.1",
     "jquery-ui": "^1.12.1",
     "lodash": "4.17.21",
-    "node-sass": "^4.5.3",
+    "node-sass": "6.0",
     "patch-package": "6.2.0",
-    "prismjs": "^1.17.1",
+    "prismjs": "^1.28.0",
     "prop-types": "^15.6.0",
     "react": "16.8.6",
     "react-bootstrap": "^0.31.2",
@@ -73,6 +75,7 @@
     "ts-loader": "^6.0.2",
     "tslint": "^5.18.0",
     "typescript": "^3.5.1",
+    "typescript-eslint-parser": "^22.0.0",
     "url-loader": "^1.1.2",
     "webpack": "^3.5.5",
     "webpack-cli": "3.3.10",
@@ -89,6 +92,7 @@
     "popper.js": "1.14.4",
     "primeicons": "2.0.0",
     "react-id-generator": "^3.0.0",
-    "react-popper": "^2.2.3"
+    "react-popper": "^2.2.3",
+    "react-scrollspy": "^3.4.3"
   }
 }

package/react/components/Alert.d.ts

@@ -4,6 +4,9 @@ interface IProps {
     style?: 'filled' | 'hollow';
     size?: 'normal' | 'small';
     restoreIcon?: 'info' | 'help';
+    icon?: string;
+    banner?: boolean;
+    margin?: 'none' | 'small' | 'normal' | 'large';
 }
 interface IState {
     open: boolean;

package/react/components/Alert.js

@@ -38,6 +38,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Alert = void 0;
 var React = __importStar(require("react"));
 var classnames_1 = __importDefault(require("classnames"));
+var Icon_1 = require("./Icon");
 var Alert = /** @class */ (function (_super) {
     __extends(Alert, _super);
     function Alert(props) {
@@ -60,7 +61,11 @@ var Alert = /** @class */ (function (_super) {
                 '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--margin-normal'] = this.props.margin === undefined,
+            _a["sd-alert--margin-" + 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,
@@ -68,9 +73,12 @@ var Alert = /** @class */ (function (_super) {
             _b));
         return (React.createElement("div", { className: 'sd-alert__container' },
             React.createElement("div", { className: classesAlert },
+                this.props.icon ?
+                    React.createElement("span", { className: "sd-alert__icon" },
+                        React.createElement(Icon_1.Icon, { name: this.props.icon })) : null,
                 this.props.restoreIcon ?
                     React.createElement("button", { className: 'sd-alert__close', onClick: this.onToggle, "aria-label": "Close" }) : null,
-                this.props.children),
+                React.createElement("span", { className: "sd-alert__content" }, this.props.children)),
             this.props.restoreIcon ?
                 React.createElement("span", { className: classesInfoBtn, onClick: this.onToggle },
                     React.createElement("i", { className: this.props.restoreIcon === 'help' ? 'icon-help-large' : 'icon-info-large' })) : null));

package/react/components/Avatar.d.ts

@@ -14,6 +14,15 @@ export declare class AvatarContentText extends React.PureComponent<ITextAvatar>
 export declare class AvatarContentImage extends React.PureComponent<IImageAvatar> {
     render(): JSX.Element;
 }
+interface IPropsAvatarGroup {
+    appearance?: 'stacked' | 'grid';
+    borderColor?: '000' | '050' | '100' | '150' | '200';
+    className?: string;
+    children: React.ReactNode;
+}
+export declare class AvatarGroup extends React.PureComponent<IPropsAvatarGroup> {
+    render(): JSX.Element;
+}
 interface IPropsAvatarWrapper {
     size?: 'small' | 'medium' | 'large' | 'x-large' | 'xx-large';
     statusIndicator?: {

package/react/components/Avatar.js

@@ -35,7 +35,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.AvatarWrapper = exports.AvatarContentImage = exports.AvatarContentText = void 0;
+exports.AvatarWrapper = exports.AvatarGroup = exports.AvatarContentImage = exports.AvatarContentText = void 0;
 var React = __importStar(require("react"));
 var classnames_1 = __importDefault(require("classnames"));
 var AvatarContentText = /** @class */ (function (_super) {
@@ -67,6 +67,24 @@ var AvatarContentImage = /** @class */ (function (_super) {
     return AvatarContentImage;
 }(React.PureComponent));
 exports.AvatarContentImage = AvatarContentImage;
+var AvatarGroup = /** @class */ (function (_super) {
+    __extends(AvatarGroup, _super);
+    function AvatarGroup() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    AvatarGroup.prototype.render = function () {
+        var _a;
+        var classes = 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__border--000"] = this.props.borderColor === undefined,
+            _a["sd-avatar-group__border--" + this.props.borderColor] = this.props.borderColor,
+            _a), this.props.className);
+        return (React.createElement("div", { className: classes, role: 'group' }, this.props.children));
+    };
+    return AvatarGroup;
+}(React.PureComponent));
+exports.AvatarGroup = AvatarGroup;
 var AvatarWrapper = /** @class */ (function (_super) {
     __extends(AvatarWrapper, _super);
     function AvatarWrapper() {

package/react/components/Button.d.ts

@@ -16,6 +16,8 @@ interface IPropsButton extends IButtonBase {
     expand?: boolean;
     style?: 'filled' | 'hollow' | 'text-only';
     shape?: 'square' | 'round';
+    isLoading?: boolean;
+    loadingLabel?: string;
 }
 export declare class Button extends React.PureComponent<IPropsButton> {
     render(): JSX.Element;

package/react/components/Button.js

@@ -39,6 +39,7 @@ exports.Button = void 0;
 var React = __importStar(require("react"));
 var classnames_1 = __importDefault(require("classnames"));
 var Icon_1 = require("./Icon");
+var Spinner_1 = require("./Spinner");
 var Button = /** @class */ (function (_super) {
     __extends(Button, _super);
     function Button() {
@@ -58,8 +59,9 @@ var Button = /** @class */ (function (_super) {
             _a['btn--ui-dark'] = this.props.theme === 'dark',
             _a['btn--icon-only-circle'] = this.props.shape === 'round' && this.props.iconOnly,
             _a));
-        return (React.createElement("button", { id: this.props.id, className: classes, tabIndex: 0, onClick: this.props.disabled ? function () { return false; } : function (event) { return _this.props.onClick(event); }, "aria-label": this.props.iconOnly ? this.props.text : '', "data-test-id": this.props['data-test-id'] },
-            this.props.icon ? React.createElement(Icon_1.Icon, { name: this.props.icon }) : null,
+        return (React.createElement("button", { id: this.props.id, className: classes, tabIndex: 0, disabled: this.props.isLoading, "data-loading": this.props.isLoading, onClick: this.props.disabled ? function () { return false; } : function (event) { return _this.props.onClick(event); }, "aria-label": this.props.iconOnly ? this.props.text : '', "data-test-id": this.props['data-test-id'] },
+            this.props.isLoading ? React.createElement(Spinner_1.Spinner, { size: "mini" }) : null,
+            this.props.icon && !this.props.isLoading ? React.createElement(Icon_1.Icon, { name: this.props.icon }) : null,
             this.props.iconOnly ? null : this.props.text));
     };
     return Button;

package/react/components/ButtonGroup.d.ts

@@ -1,11 +1,12 @@
 import * as React from 'react';
 interface IProps {
     orientation?: 'horizontal' | 'vertical';
-    spaces?: 'comfort' | 'compact' | 'no-space';
-    align?: 'left' | 'right' | 'center' | 'inline' | 'sub';
+    spaces?: 'comfort' | 'compact' | 'loose' | 'no-space';
+    align?: 'start' | 'end' | 'center' | 'inline' | 'sub';
     padded?: boolean;
     subgroup?: boolean;
     children: React.ReactNode;
+    className?: string;
 }
 export declare class ButtonGroup extends React.PureComponent<IProps> {
     render(): JSX.Element;

package/react/components/ButtonGroup.js

@@ -46,14 +46,14 @@ var ButtonGroup = /** @class */ (function (_super) {
     ButtonGroup.prototype.render = function () {
         var _a;
         var classes = classnames_1.default('button-group', (_a = {},
-            _a["button-group--left"] = this.props.align === undefined && !this.props.orientation && !this.props.subgroup,
+            _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--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--padded"] = this.props.padded === true,
             _a["button-group--sub-group"] = this.props.subgroup === true,
-            _a));
+            _a), this.props.className);
         return (React.createElement("div", { className: classes, role: 'group' }, this.props.children));
     };
     return ButtonGroup;

package/react/components/Carousel.js

@@ -51,7 +51,7 @@ var Carousel = /** @class */ (function (_super) {
         var itemTemplate = function (props) { return (React.createElement("div", { className: "sd-thumb-carousel__item" },
             React.createElement("div", { className: "sd-thumb-carousel__item-inner" },
                 React.createElement("img", { src: props.src, alt: props.alt })))); };
-        return React.createElement("div", { style: { display: 'content' }, "data-theme": this.props.theme !== 'dark' ? '' : 'dark-ui', className: this.props.className },
+        return React.createElement("div", { style: { display: 'content' }, "data-theme": this.props.theme !== 'dark' ? null : 'dark-ui', className: this.props.className },
             React.createElement(carousel_1.Carousel, { id: this.props.id, value: this.props.images, numVisible: this.props.numVisible, numScroll: this.props.numScroll, responsiveOptions: this.props.responsiveOptions, itemTemplate: itemTemplate, header: header, footer: footer, indicatorsContentClassName: 'sd-thumb-carousel__indicators', onPageChange: this.props.onPageChange }));
     };
     return Carousel;

package/react/components/CheckButtonGroup.d.ts

@@ -2,8 +2,10 @@ import * as React from 'react';
 interface IProps {
     orientation?: 'horizontal' | 'vertical';
     grid?: boolean;
-    align?: 'left' | 'right' | 'center' | 'inline';
+    align?: 'start' | 'end' | 'center' | 'inline';
     padded?: boolean;
+    groupLabel?: string;
+    groupLabelledBy?: string;
 }
 export declare class CheckButtonGroup extends React.PureComponent<IProps> {
     render(): JSX.Element;

package/react/components/CheckButtonGroup.js

@@ -38,6 +38,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.CheckButtonGroup = void 0;
 var React = __importStar(require("react"));
 var classnames_1 = __importDefault(require("classnames"));
+var FormLabel_1 = require("./Form/FormLabel");
 var CheckButtonGroup = /** @class */ (function (_super) {
     __extends(CheckButtonGroup, _super);
     function CheckButtonGroup() {
@@ -47,12 +48,17 @@ var CheckButtonGroup = /** @class */ (function (_super) {
         var _a;
         var classes = classnames_1.default('sd-check-button__group', (_a = {},
             _a["sd-check-button__group--" + this.props.align] = this.props.align,
-            _a["sd-check-button__group--left"] = !this.props.grid && this.props.align === undefined,
+            _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,
             _a["sd-check-button__group--padded"] = this.props.padded === true,
             _a));
-        return (React.createElement("div", { className: classes }, this.props.children));
+        return (React.createElement(React.Fragment, null, this.props.groupLabel ?
+            React.createElement("div", { className: 'sd-check-button__group-wrapper', "aria-labelledby": this.props.groupLabelledBy },
+                React.createElement(FormLabel_1.FormLabel, { forId: 'group', text: this.props.groupLabel }),
+                React.createElement("div", { className: classes }, this.props.children))
+            :
+                React.createElement("div", { className: classes }, this.props.children)));
     };
     return CheckButtonGroup;
 }(React.PureComponent));

package/react/components/CheckGroup.d.ts

@@ -2,6 +2,7 @@ import * as React from 'react';
 interface IProps {
     orientation?: 'horizontal' | 'vertical';
     children: React.ReactNode;
+    groupLabelledBy?: string;
 }
 export declare class CheckGroup extends React.PureComponent<IProps> {
     render(): JSX.Element;

package/react/components/CheckGroup.js

@@ -48,7 +48,7 @@ var CheckGroup = /** @class */ (function (_super) {
         var classes = 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 }, this.props.children));
+        return (React.createElement("div", { className: classes, "aria-labelledby": this.props.groupLabelledBy }, this.props.children));
     };
     return CheckGroup;
 }(React.PureComponent));

package/react/components/Checkbox.d.ts

@@ -2,12 +2,13 @@ import * as React from 'react';
 interface IProps {
     label: {
         text: string;
-        side?: 'left' | 'right';
+        side?: 'start' | 'end';
         hidden?: boolean;
     };
     checked?: boolean;
     disabled?: boolean;
     required?: boolean;
+    tabindex?: number;
     onChange(nextValue: boolean): void;
 }
 export declare class Checkbox extends React.Component<IProps> {

package/react/components/Checkbox.js

@@ -52,8 +52,8 @@ var Checkbox = /** @class */ (function (_super) {
         }
     };
     Checkbox.prototype.render = function () {
-        return (React.createElement("span", { className: "sd-check-new__wrapper", "label-position": this.props.label.side || null, tabIndex: -1 },
-            React.createElement("input", { type: "checkbox", className: "sd-check-new__input", id: this.htmlId, tabIndex: 0, checked: this.props.checked, onChange: this.handleChange, disabled: this.props.disabled, required: this.props.required }),
+        return (React.createElement("span", { className: "sd-check-new__wrapper", "label-position": this.props.label.side || null, tabIndex: this.props.tabindex === undefined ? undefined : -1 },
+            React.createElement("input", { type: "checkbox", className: "sd-check-new__input", id: this.htmlId, tabIndex: this.props.tabindex, checked: this.props.checked, onChange: this.handleChange, disabled: this.props.disabled, required: this.props.required }),
             React.createElement("span", { className: "sd-check-new" }),
             this.props.label.hidden ? React.createElement("label", { htmlFor: this.htmlId, "aria-label": this.props.label.text }) : null,
             !this.props.label.hidden ? React.createElement("label", { htmlFor: this.htmlId }, this.props.label.text) : null));

package/react/components/CheckboxButton.d.ts

@@ -8,6 +8,7 @@ interface IProps {
     checked?: boolean;
     disabled?: boolean;
     required?: boolean;
+    tabindex?: number;
     onChange(nextValue: boolean): void;
 }
 export declare class CheckboxButton extends React.Component<IProps> {

package/react/components/CheckboxButton.js

@@ -52,8 +52,8 @@ var CheckboxButton = /** @class */ (function (_super) {
         }
     };
     CheckboxButton.prototype.render = function () {
-        return (React.createElement("span", { className: "sd-check-button sd-check-button--native", tabIndex: -1 },
-            React.createElement("input", { type: "checkbox", className: "sd-check-button__input", id: this.htmlId, tabIndex: 0, checked: this.props.checked, onChange: this.handleChange, disabled: this.props.disabled, required: this.props.required }),
+        return (React.createElement("span", { className: "sd-check-button sd-check-button--native", tabIndex: this.props.tabindex === undefined ? undefined : -1 },
+            React.createElement("input", { type: "checkbox", className: "sd-check-button__input", id: this.htmlId, tabIndex: this.props.tabindex, checked: this.props.checked, onChange: this.handleChange, disabled: this.props.disabled, required: this.props.required }),
             React.createElement("label", { className: "sd-check-button__text-label", htmlFor: this.htmlId, "aria-label": this.props.label.hidden ? this.props.label.text : undefined },
                 this.props.label.icon ?
                     React.createElement("i", { className: "icon-" + this.props.label.icon, "aria-hidden": "true" }) : null,

package/react/components/DatePicker.js

@@ -138,8 +138,13 @@ var DatePicker = /** @class */ (function (_super) {
                             _this.instance.hideOverlay();
                         }
                     } }, label));
-            }))); }, appendTo: document.body, disabled: this.props.disabled, onBlur: function () {
-                if (_this.state.valid === false) {
+            }))); }, appendTo: document.body, disabled: this.props.disabled, onBlur: function (event) {
+                // @ts-ignore: Object is possibly 'null'.
+                if (!(event === null || event === void 0 ? void 0 : event.target.value)) {
+                    // @ts-ignore: Object is possibly 'null'.
+                    _this.setState({ valid: true, value: null });
+                }
+                else {
                     // restoring internal state to current props value
                     _this.setState({ valid: true, value: parseToPrimeReactCalendarFormat(_this.props.value) });
                 }

package/react/components/DropZone.d.ts

@@ -0,0 +1,25 @@
+import * as React from 'react';
+interface IProps {
+    icon?: boolean;
+    text: string;
+    actionText: string;
+    heading?: string;
+    className?: string;
+    width?: 'auto' | 'full';
+    type?: 'default' | 'primary' | 'highlight' | 'darker';
+    state?: 'normal' | 'active';
+    value?: 'button' | 'submit' | 'reset';
+}
+interface IState {
+    dragClass: boolean;
+    dropClass: boolean;
+}
+export declare class DropZone extends React.PureComponent<IProps, IState> {
+    constructor(props: IProps);
+    drop(event: any): void;
+    dragOver(event: any): void;
+    dragEnter(event: any): void;
+    dragLeave(event: any): void;
+    render(): JSX.Element;
+}
+export {};