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

package/react/components/ContentDivider.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,13 +47,15 @@ var ContentDivider = /** @class */ (function (_super) {
     }
     ContentDivider.prototype.render = function () {
         var _a;
-        var classes = classnames_1.default('sd-content-divider', (_a = {
+        var classes = (0, classnames_1.default)('sd-content-divider', (_a = {
                 'sd-content-divider--horizontal': this.props.orientation === undefined,
                 'sd-content-divider--no-border': this.props.border === false
             },
-            _a["sd-content-divider--" + this.props.type] = this.props.type || this.props.type !== undefined,
-            _a["sd-content-divider--text-" + this.props.align] = this.props.align || this.props.align !== undefined,
-            _a["sd-content-divider--" + this.props.orientation] = this.props.orientation || this.props.orientation !== undefined,
+            _a["sd-content-divider--".concat(this.props.type)] = this.props.type || this.props.type !== undefined,
+            _a["sd-content-divider--text-".concat(this.props.align)] = this.props.align || this.props.align !== undefined,
+            _a["sd-content-divider--".concat(this.props.orientation)] = this.props.orientation || this.props.orientation !== undefined,
+            _a['sd-content-divider--margin-medium'] = this.props.margin === undefined,
+            _a["sd-content-divider--margin-".concat(this.props.margin)] = this.props.margin || this.props.margin !== undefined,
             _a));
         if (this.props.children) {
             return (React.createElement("div", { className: "sd-content-divider--with-text " + classes, role: "separator" },

package/react/components/CreateButton.d.ts

@@ -0,0 +1,17 @@
+import * as React from 'react';
+interface IProps {
+    id?: string;
+    ariaValue: string;
+    toolTipFlow?: 'top' | 'left' | 'right' | 'down';
+    type?: 'default' | 'primary' | 'highlight' | 'darker';
+    state?: 'normal' | 'active';
+    value?: 'button' | 'submit' | 'reset';
+    onClick(): void;
+}
+export declare class CreateButton extends React.PureComponent<IProps> {
+    static defaultProps: {
+        toolTipFlow: string;
+    };
+    render(): JSX.Element;
+}
+export {};

package/react/components/CreateButton.js

@@ -0,0 +1,68 @@
+"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.CreateButton = void 0;
+var React = __importStar(require("react"));
+var classnames_1 = __importDefault(require("classnames"));
+var Icon_1 = require("./Icon");
+var Tooltip_1 = require("./Tooltip");
+var CreateButton = /** @class */ (function (_super) {
+    __extends(CreateButton, _super);
+    function CreateButton() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    CreateButton.prototype.render = function () {
+        var _a;
+        var classes = (0, classnames_1.default)('sd-create-btn', (_a = {
+                'sd-navbtn--active': this.props.state === 'active'
+            },
+            _a["sd-navbtn--".concat(this.props.type)] = this.props.type,
+            _a));
+        var value = this.props.value === undefined ? 'button' : this.props.value;
+        return (React.createElement(Tooltip_1.Tooltip, { text: this.props.ariaValue, flow: this.props.toolTipFlow, appendToBody: true },
+            React.createElement("button", { type: value, className: classes, tabIndex: 0, onClick: this.props.onClick, "aria-label": this.props.ariaValue, id: this.props.id },
+                React.createElement(Icon_1.Icon, { name: "plus-large" }),
+                React.createElement("span", { className: "circle" }))));
+    };
+    CreateButton.defaultProps = {
+        toolTipFlow: 'left',
+    };
+    return CreateButton;
+}(React.PureComponent));
+exports.CreateButton = CreateButton;

package/react/components/DatePicker.d.ts

@@ -2,13 +2,22 @@ import * as React from 'react';
 import { LocaleSettings, CalendarProps } from '@superdesk/primereact/calendar';
 export declare type DatePickerLocaleSettings = Omit<LocaleSettings, 'today' | 'clear'>;
 interface IDatePickerBase {
-    disabled?: boolean;
     dateFormat: string;
-    shortcuts?: Array<{
+    headerButtonBar?: Array<{
         days: number;
         label: string;
     }>;
     locale?: DatePickerLocaleSettings;
+    disabled?: boolean;
+    inlineLabel?: boolean;
+    required?: boolean;
+    fullWidth?: boolean;
+    invalid?: boolean;
+    labelHidden?: boolean;
+    tabindex?: number;
+    label?: string;
+    info?: string;
+    error?: string;
 }
 interface IDatePicker extends IDatePickerBase {
     value: Date | null;
@@ -17,10 +26,12 @@ interface IDatePicker extends IDatePickerBase {
 interface IState {
     value: CalendarProps['value'];
     valid: boolean;
+    invalid: boolean;
 }
 export declare class DatePicker extends React.PureComponent<IDatePicker, IState> {
     private instance;
     hidePopupOnScroll: () => void;
+    private htmlId;
     constructor(props: IDatePicker);
     componentDidMount(): void;
     componentWillUnmount(): void;

package/react/components/DatePicker.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 __());
@@ -38,7 +40,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;
 };
@@ -52,6 +54,9 @@ var addDays_1 = __importDefault(require("date-fns/addDays"));
 var format_1 = __importDefault(require("date-fns/format"));
 var calendar_1 = require("@superdesk/primereact/calendar");
 var lodash_1 = require("lodash");
+// import classNames from 'classnames';
+var react_id_generator_1 = __importDefault(require("react-id-generator"));
+var Form_1 = require("./Form");
 var internalPrimereactClassnames = {
     overlayVisible: 'p-input-overlay-visible',
 };
@@ -77,12 +82,15 @@ function parseToPrimeReactCalendarFormat(value) {
 var DatePicker = /** @class */ (function (_super) {
     __extends(DatePicker, _super);
     function DatePicker(props) {
+        var _a;
         var _this = _super.call(this, props) || this;
+        _this.htmlId = (0, react_id_generator_1.default)();
         _this.state = {
             value: parseToPrimeReactCalendarFormat(_this.props.value),
             valid: true,
+            invalid: (_a = _this.props.invalid) !== null && _a !== void 0 ? _a : false,
         };
-        _this.hidePopupOnScroll = lodash_1.throttle(function () {
+        _this.hidePopupOnScroll = (0, lodash_1.throttle)(function () {
             if (_this.instance != null
                 && _this.instance.panel != null
                 && _this.instance.hideOverlay != null
@@ -118,32 +126,38 @@ var DatePicker = /** @class */ (function (_super) {
         if (this.props.locale != null) {
             locale = __assign(__assign({}, this.props.locale), { today: 'today', clear: 'clear' });
         }
-        return (React.createElement(calendar_1.Calendar, { ref: function (ref) {
-                _this.instance = ref;
-            }, value: this.state.value === null ? undefined : this.state.value, onChange: function (event) {
-                var result = parseFromPrimeReactCalendarFormat(event.value);
-                if (result !== 'failed-to-parse') {
-                    _this.setState({ value: event.value, valid: true });
-                    _this.props.onChange(result);
-                }
-                else {
-                    // updating internal state so a user can continue typing and enter a valid value
-                    _this.setState({ value: event.value, valid: false });
-                }
-            }, locale: locale, dateFormat: this.props.dateFormat.replace('YYYY', 'yy').replace('MM', 'mm').replace('DD', 'dd'), showIcon: true, icon: "icon-calendar", headerTemplate: function () { return _this.props.shortcuts == null ? null : (React.createElement("div", { style: { width: '100%', display: 'flex', justifyContent: 'space-between', marginBottom: 10 } }, _this.props.shortcuts.map(function (_a, i) {
-                var label = _a.label, days = _a.days;
-                return (React.createElement("button", { key: i, className: "btn btn--hollow btn--small", onClick: function () {
-                        _this.props.onChange(addDays_1.default(new Date(), days));
-                        if (_this.instance != null && typeof _this.instance.hideOverlay === 'function') {
-                            _this.instance.hideOverlay();
-                        }
-                    } }, label));
-            }))); }, appendTo: document.body, disabled: this.props.disabled, onBlur: function () {
-                if (_this.state.valid === false) {
-                    // restoring internal state to current props value
-                    _this.setState({ valid: true, value: parseToPrimeReactCalendarFormat(_this.props.value) });
-                }
-            } }));
+        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(calendar_1.Calendar, { inputId: this.htmlId, ariaLabelledBy: this.htmlId + 'label', ref: function (ref) {
+                    _this.instance = ref;
+                }, value: this.state.value === null ? undefined : this.state.value, onChange: function (event) {
+                    var result = parseFromPrimeReactCalendarFormat(event.value);
+                    if (result !== 'failed-to-parse') {
+                        _this.setState({ value: event.value, valid: true });
+                        _this.props.onChange(result);
+                    }
+                    else {
+                        // updating internal state so a user can continue typing and enter a valid value
+                        _this.setState({ value: event.value, valid: false });
+                    }
+                }, locale: locale, dateFormat: this.props.dateFormat.replace('YYYY', 'yy').replace('MM', 'mm').replace('DD', 'dd'), showIcon: true, icon: "icon-calendar", headerTemplate: function () { return _this.props.headerButtonBar == null ? null : (React.createElement("div", { className: "datepicker-header-toolbar" }, _this.props.headerButtonBar.map(function (_a, i) {
+                    var label = _a.label, days = _a.days;
+                    return (React.createElement("button", { key: i, className: "btn btn--small", onClick: function () {
+                            _this.props.onChange((0, addDays_1.default)(new Date(), days));
+                            if (_this.instance != null && typeof _this.instance.hideOverlay === 'function') {
+                                _this.instance.hideOverlay();
+                            }
+                        } }, label));
+                }))); }, 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) });
+                    }
+                } })));
     };
     return DatePicker;
 }(React.PureComponent));
@@ -160,9 +174,9 @@ var DatePickerISO = /** @class */ (function (_super) {
                     _this.props.onChange('');
                 }
                 else {
-                    _this.props.onChange(format_1.default(value, 'yyyy-MM-dd'));
+                    _this.props.onChange((0, format_1.default)(value, 'yyyy-MM-dd'));
                 }
-            }, disabled: this.props.disabled, shortcuts: this.props.shortcuts, dateFormat: this.props.dateFormat, locale: this.props.locale }));
+            }, disabled: this.props.disabled, headerButtonBar: this.props.headerButtonBar, dateFormat: this.props.dateFormat, locale: this.props.locale, inlineLabel: this.props.inlineLabel, required: this.props.required, fullWidth: this.props.fullWidth, invalid: this.props.invalid, labelHidden: this.props.labelHidden, tabindex: this.props.tabindex, label: this.props.label, info: this.props.info, error: this.props.error }));
     };
     return DatePickerISO;
 }(React.PureComponent));

package/react/components/Divider.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,11 +47,11 @@ var Divider = /** @class */ (function (_super) {
     }
     Divider.prototype.render = function () {
         var _a;
-        var classes = classnames_1.default('button-group__divider', (_a = {
+        var classes = (0, classnames_1.default)('button-group__divider', (_a = {
                 'button-group__divider--small': this.props.size === undefined,
                 'button-group__divider--border': this.props.border === true
             },
-            _a["button-group__divider--" + this.props.size] = this.props.size || this.props.size !== undefined,
+            _a["button-group__divider--".concat(this.props.size)] = this.props.size || this.props.size !== undefined,
             _a));
         return (React.createElement("div", { className: classes }));
     };

package/react/components/DonutChart.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 import { ChartData, ChartOptions } from 'chart.js';
 interface IProps {
     data: ChartData;

package/react/components/DonutChart.js

@@ -3,21 +3,39 @@ 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 __());
     };
 })();
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
+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;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.DonutChart = void 0;
-var react_1 = __importDefault(require("react"));
+var React = __importStar(require("react"));
 var chart_1 = require("@superdesk/primereact/chart");
 var DonutChart = /** @class */ (function (_super) {
     __extends(DonutChart, _super);
@@ -25,8 +43,8 @@ var DonutChart = /** @class */ (function (_super) {
         return _super !== null && _super.apply(this, arguments) || this;
     }
     DonutChart.prototype.render = function () {
-        return react_1.default.createElement(chart_1.Chart, { type: "doughnut", width: this.props.width, height: this.props.height, data: this.props.data, options: this.props.options });
+        return React.createElement(chart_1.Chart, { type: "doughnut", width: this.props.width, height: this.props.height, data: this.props.data, options: this.props.options });
     };
     return DonutChart;
-}(react_1.default.Component));
+}(React.Component));
 exports.DonutChart = DonutChart;

package/react/components/DropZone.d.ts

@@ -0,0 +1,25 @@
+import * as React from 'react';
+interface IProps {
+    icon?: boolean;
+    iconSmall?: boolean;
+    text?: 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 {};

package/react/components/DropZone.js

@@ -0,0 +1,95 @@
+"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.DropZone = void 0;
+var React = __importStar(require("react"));
+var classnames_1 = __importDefault(require("classnames"));
+var Icon_1 = require("./Icon");
+var DropZone = /** @class */ (function (_super) {
+    __extends(DropZone, _super);
+    function DropZone(props) {
+        var _this = _super.call(this, props) || this;
+        _this.state = {
+            dragClass: false,
+            dropClass: false,
+        };
+        _this.drop = _this.drop.bind(_this);
+        _this.dragOver = _this.dragOver.bind(_this);
+        _this.dragEnter = _this.dragEnter.bind(_this);
+        _this.dragLeave = _this.dragLeave.bind(_this);
+        return _this;
+    }
+    DropZone.prototype.drop = function (event) {
+        event.preventDefault();
+        this.setState({ dropClass: true, dragClass: false });
+        // var data = event.dataTransfer.getData("Text");
+    };
+    DropZone.prototype.dragOver = function (event) {
+        event.preventDefault();
+        this.setState({ dragClass: true });
+    };
+    DropZone.prototype.dragEnter = function (event) {
+        event.preventDefault();
+    };
+    DropZone.prototype.dragLeave = function (event) {
+        event.preventDefault();
+        this.setState({ dragClass: false });
+    };
+    DropZone.prototype.render = function () {
+        var _a;
+        var _this = this;
+        var classes = (0, classnames_1.default)('sd-dropzone__drop-target', (_a = {
+                'sd-dropzone__drop-target--ondragover': this.state.dragClass,
+                'sd-dropzone__drop-target--ondrop': this.state.dropClass
+            },
+            _a["sd-dropzone__drop-target--".concat(this.props.type)] = this.props.type,
+            _a), this.props.className);
+        return (React.createElement("div", { className: classes, onDragLeave: function (event) { return _this.dragLeave(event); }, onDragEnter: function (event) { return _this.dragEnter(event); }, onDragOver: function (event) { return _this.dragOver(event); }, onDrop: function (event) { return _this.drop(event); }, onDragStart: function () { return false; }, onDragEnd: function () { return false; } },
+            React.createElement("div", { className: 'sd-dropzone__target-border' }),
+            React.createElement("input", { type: "file", className: 'sd-dropzone__input' }),
+            this.props.icon ?
+                React.createElement("figure", { className: 'sd-dropzone__icon', "aria-hidden": 'true' },
+                    React.createElement(Icon_1.Icon, { name: 'upload-alt', size: 'big' })) : null,
+            this.props.heading ?
+                React.createElement("h4", { className: 'sd-dropzone__heading' }, this.props.heading) : null,
+            React.createElement("p", { className: 'sd-dropzone__description' }, this.props.text)));
+    };
+    return DropZone;
+}(React.PureComponent));
+exports.DropZone = DropZone;

package/react/components/Dropdown.d.ts

@@ -1,28 +1,30 @@
 import * as React from 'react';
 export interface IMenuItem {
-    label: string;
+    label: string | React.ReactNode;
     icon?: string;
+    active?: boolean;
     onSelect(): void;
 }
 export interface ISubmenu {
     type: 'submenu';
-    label: string;
+    label: string | React.ReactNode;
     icon?: string;
     items: Array<IMenuItem | ISubmenu | IMenuGroup | 'divider'>;
 }
 export interface IMenuGroup {
     type: 'group';
-    label?: string;
+    label?: string | React.ReactNode;
     items: Array<IMenuItem | ISubmenu | IMenuGroup | 'divider'>;
 }
 interface IMenu {
-    label?: string;
+    label?: string | React.ReactNode;
     align?: 'left' | 'right';
     items: Array<IMenuItem | ISubmenu | IMenuGroup | 'divider'>;
     header?: Array<IMenuItem | ISubmenu | IMenuGroup | 'divider'>;
     footer?: Array<IMenuItem | ISubmenu | IMenuGroup | 'divider'>;
     append?: boolean;
     children: React.ReactNode;
+    onChange?(event?: any): void;
 }
-export declare const Dropdown: ({ items, header, footer, children, append, align, }: IMenu) => JSX.Element;
+export declare const Dropdown: ({ items, header, footer, children, append, align, onChange, }: IMenu) => JSX.Element;
 export {};