superdesk-ui-framework 2.4.18 → 2.4.21

package/examples/pages/react/Tags.tsx

@@ -33,7 +33,7 @@ export default class TagDoc extends React.Component<{}, ITag> {
             <section className="docs-page__container"> 
             <h2 className="docs-page__h2">Tag</h2>
             <Markup.ReactMarkupCodePreview>{`
-               <Tag text='This is a tag' onClick={()=>false}/>
+               <Tag text='This is a tag' onRemove={()=>false}/>
             `}
             </Markup.ReactMarkupCodePreview>
             
@@ -48,18 +48,18 @@ export default class TagDoc extends React.Component<{}, ITag> {
                                         shade={tag.shade}
                                         shape={tag.shape}
                                         readOnly={tag.readOnly}
-                                        onClick={()=>this.handleClick(index)}/>
+                                        onRemove={()=>this.handleClick(index)} />
                                 </React.Fragment>
                         )
                         })}
                 </div>
                 </Markup.ReactMarkupPreview>
                 <Markup.ReactMarkupCode>{`
-                    <Tag text='This is a tag' onClick={()=>false}/>
-                    <Tag text='This is a another tag' shade='darker' onClick={()=>false}/>
-                    <Tag text='Lorem ipsum' shade='highlight1' onClick={()=>false}/>
-                    <Tag text='Dolor amet' shade='highlight2' shape='square' onClick={()=>false}/>
-                    
+                    <Tag text='This is a tag' onRemove={()=>false}/>
+                    <Tag text='This is a another tag' shade='darker' onRemove={()=>false}/>
+                    <Tag text='Lorem ipsum' shade='highlight1' onRemove={()=>false}/>
+                    <Tag text='Dolor amet' shade='highlight2' shape='square' onRemove={()=>false}/>
+                    <Tag text='Read only tag' readOnly={true} onRemove={()=>false}/>
                 `}          
                 </Markup.ReactMarkupCode>
             </Markup.ReactMarkup>
@@ -70,6 +70,8 @@ export default class TagDoc extends React.Component<{}, ITag> {
                     <Prop name='shade' isRequired={false} type='light | darker | highlight1 | highlight2' default='light' description='Shade colour of tag'/>
                     <Prop name='shape' isRequired={false} type='round | square' default='round' description='Make shape of tag square or default round.'/>
                     <Prop name='keyValue' isRequired={false} type='number' default='/' description='Value of tag key'/>
+                    <Prop name='readOnly' isRequired={false} type='boolean' default='/' description='Read only tag. Dont have option to close/remove tag.'/>
+                    <Prop name='onRemove' isRequired={false} type='function' default='/' description='Callback function'/>
                 </PropsList>
         </section>
         )

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "superdesk-ui-framework",
-  "version": "2.4.18",
+  "version": "2.4.21",
   "license": "AGPL-3.0",
   "repository": {
     "type": "git",
@@ -88,7 +88,7 @@
     "date-fns": "2.7.0",
     "popper.js": "1.14.4",
     "primeicons": "2.0.0",
-    "react-id-generator": "^3.0.0",
+    "react-id-generator": "^3.0.2",
     "react-popper": "^2.2.3"
   }
 }

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/Input.d.ts

@@ -1,6 +1,7 @@
 import * as React from 'react';
 interface IProps {
     value?: string;
+    type?: 'text' | 'number' | 'password';
     label: string;
     maxLength?: number;
     info?: string;
@@ -19,7 +20,9 @@ interface IState {
 export declare class Input extends React.Component<IProps, IState> {
     constructor(props: IProps);
     htmlId: string;
+    handleData(value: string): void;
     handleChange(event: React.ChangeEvent<HTMLInputElement>): void;
+    componentDidUpdate(prevProps: IProps): void;
     render(): JSX.Element;
 }
 export {};

package/react/components/Input.js

@@ -52,14 +52,24 @@ var Input = /** @class */ (function (_super) {
         _this.handleChange = _this.handleChange.bind(_this);
         return _this;
     }
-    Input.prototype.handleChange = function (event) {
-        this.setState({ value: event.target.value });
-        this.props.onChange(event.target.value);
+    Input.prototype.handleData = function (value) {
+        this.setState({ value: value !== null && value !== void 0 ? value : '' });
+        this.props.onChange(value !== null && value !== void 0 ? value : '');
         if (this.props.maxLength && !this.props.invalid) {
-            this.setState({ invalid: event.target.value.length > this.props.maxLength });
+            this.setState({ invalid: value.length > this.props.maxLength });
+        }
+    };
+    Input.prototype.handleChange = function (event) {
+        this.handleData(event.target.value);
+    };
+    Input.prototype.componentDidUpdate = function (prevProps) {
+        var _a;
+        if (this.props.value !== prevProps.value) {
+            this.handleData((_a = this.props.value) !== null && _a !== void 0 ? _a : '');
         }
     };
     Input.prototype.render = function () {
+        var _a;
         var classes = classnames_1.default('sd-input', {
             'sd-input--inline-label': this.props.inlineLabel,
             'sd-input--required': this.props.required,
@@ -71,7 +81,7 @@ var Input = /** @class */ (function (_super) {
         });
         return (React.createElement("div", { className: classes },
             React.createElement("label", { className: labelClasses, htmlFor: this.htmlId, id: this.htmlId + 'label' }, this.props.label),
-            React.createElement("input", { className: 'sd-input__input', type: 'text', id: this.htmlId, value: this.state.value, "aria-label": this.props.label, "aria-describedby": this.htmlId + 'label', onChange: this.handleChange, disabled: this.props.disabled }),
+            React.createElement("input", { className: 'sd-input__input', type: (_a = this.props.type) !== null && _a !== void 0 ? _a : 'text', id: this.htmlId, value: this.state.value, "aria-label": this.props.label, "aria-describedby": this.htmlId + 'label', onChange: this.handleChange, disabled: this.props.disabled }),
             this.props.maxLength ?
                 React.createElement("div", { className: 'sd-input__char-count' },
                     this.state.value.length,

package/react/components/Select.d.ts

@@ -19,6 +19,7 @@ declare class Select extends React.Component<ISelect, IState> {
     constructor(props: ISelect);
     htmlId: string;
     handleChange(event: React.ChangeEvent<HTMLSelectElement>): void;
+    componentDidUpdate(prevProps: any): void;
     render(): JSX.Element;
 }
 interface IOption {

package/react/components/Select.js

@@ -56,6 +56,13 @@ var Select = /** @class */ (function (_super) {
         this.setState({ value: event.target.value });
         this.props.onChange(event.target.value);
     };
+    Select.prototype.componentDidUpdate = function (prevProps) {
+        var _a, _b;
+        if (this.props.value !== prevProps.value) {
+            this.setState({ value: (_a = this.props.value) !== null && _a !== void 0 ? _a : '' });
+            this.props.onChange((_b = this.props.value) !== null && _b !== void 0 ? _b : '');
+        }
+    };
     Select.prototype.render = function () {
         var classes = classnames_1.default('sd-input sd-input--is-select', {
             'sd-input--inline-label': this.props.inlineLabel,

package/react/components/Spinner.d.ts

@@ -0,0 +1,12 @@
+import * as React from 'react';
+import './../../app/styles/_spinner.scss';
+declare class LoadingOverlay extends React.PureComponent {
+    render(): JSX.Element;
+}
+interface IProps {
+    size?: 'mini' | 'small' | 'medium' | 'large';
+}
+declare class Spinner extends React.PureComponent<IProps> {
+    render(): JSX.Element;
+}
+export { Spinner, LoadingOverlay };

package/react/components/Spinner.js

@@ -0,0 +1,70 @@
+"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.LoadingOverlay = exports.Spinner = void 0;
+var React = __importStar(require("react"));
+var classnames_1 = __importDefault(require("classnames"));
+require("./../../app/styles/_spinner.scss");
+var LoadingOverlay = /** @class */ (function (_super) {
+    __extends(LoadingOverlay, _super);
+    function LoadingOverlay() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    LoadingOverlay.prototype.render = function () {
+        return (React.createElement("div", { className: "sd-loading-overlay--plain" }, this.props.children));
+    };
+    return LoadingOverlay;
+}(React.PureComponent));
+exports.LoadingOverlay = LoadingOverlay;
+var Spinner = /** @class */ (function (_super) {
+    __extends(Spinner, _super);
+    function Spinner() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    Spinner.prototype.render = function () {
+        var _a;
+        var classes = classnames_1.default('sd-spinner', (_a = {
+                'sd-spinner--small': this.props.size === undefined
+            },
+            _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" })));
+    };
+    return Spinner;
+}(React.PureComponent));
+exports.Spinner = Spinner;

package/react/components/TabCustom.d.ts

@@ -1,26 +1,36 @@
-/// <reference types="react" />
+import * as React from 'react';
 interface ITabs {
     size?: 'normal' | 'large' | 'small';
     theme?: 'light' | 'dark';
     ariaLabel?: string;
     children: Array<any>;
-    onClick(i: number): void;
+    onClick(id: string): void;
+    tabs?: Array<{
+        label: string;
+        id: string;
+    }>;
+    activePanel: string;
 }
 interface ITabLabel {
-    label: string;
-    indexValue: number;
+    label?: string;
+    id: string;
+    children: Array<any>;
 }
 interface ITabContent {
     theme?: 'light' | 'dark';
-    children: any;
-    activePanel: number;
+    children: Array<any>;
+    activePanel: string;
+    tabs?: Array<{
+        content: React.ReactNode | string;
+        id: string;
+    }>;
 }
 interface ITabPanel {
-    indexValue: number;
-    children: any;
+    id: string;
+    children: Array<any>;
 }
-export declare const TabLabel: ({ label }: ITabLabel) => JSX.Element;
-export declare const Tabs: ({ size, theme, ariaLabel, children, onClick }: ITabs) => JSX.Element;
-export declare const TabContent: ({ theme, children, activePanel }: ITabContent) => JSX.Element;
-export declare const TabPanel: ({ children, indexValue }: ITabPanel) => JSX.Element;
+export declare const TabNav: ({ size, theme, ariaLabel, children, onClick, tabs, activePanel }: ITabs) => JSX.Element;
+export declare const TabContent: ({ theme, children, activePanel, tabs }: ITabContent) => JSX.Element;
+export declare const TabItem: ({ children }: ITabLabel) => JSX.Element;
+export declare const TabPanel: ({ children, id }: ITabPanel) => JSX.Element;
 export {};

package/react/components/TabCustom.js

@@ -22,41 +22,70 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.TabPanel = exports.TabContent = exports.Tabs = exports.TabLabel = void 0;
+exports.TabPanel = exports.TabItem = exports.TabContent = exports.TabNav = void 0;
 var React = __importStar(require("react"));
 var classnames_1 = __importDefault(require("classnames"));
-exports.TabLabel = function (_a) {
-    var label = _a.label;
-    return (React.createElement("span", null, label));
-};
-exports.Tabs = function (_a) {
+exports.TabNav = function (_a) {
     var _b;
-    var size = _a.size, theme = _a.theme, ariaLabel = _a.ariaLabel, children = _a.children, onClick = _a.onClick;
+    var size = _a.size, theme = _a.theme, ariaLabel = _a.ariaLabel, children = _a.children, onClick = _a.onClick, tabs = _a.tabs, activePanel = _a.activePanel;
     var _c = React.useState(0), index = _c[0], setIndex = _c[1];
-    function handleSelected(i) {
-        setIndex(i);
-        handleClick(i);
+    function goTo(id) {
+        if (tabs) {
+            var refLabel = tabs === null || tabs === void 0 ? void 0 : tabs.find(function (item) { return item.id === id; });
+            if (refLabel) {
+                setIndex(tabs.indexOf(refLabel));
+            }
+        }
+        else {
+            var refLabel = children.find(function (item) { return item.props.id === id; });
+            setIndex(children.indexOf(refLabel));
+        }
+    }
+    React.useEffect(function () {
+        goTo(activePanel ? activePanel : (tabs ? tabs[0].id : children[0].props.id));
+    }, []);
+    function handleSelected(id) {
+        goTo(id);
+        onClick(id);
     }
-    var handleClick = function (i) {
-        onClick(i);
-    };
     var classes = classnames_1.default('sd-nav-tabs', (_b = {},
         _b["sd-nav-tabs--" + size] = size && size !== undefined,
         _b['sd-nav-tabs--ui-dark'] = theme === 'dark',
         _b));
-    return (React.createElement("div", { className: classes, role: 'tablist', "aria-label": ariaLabel ? ariaLabel : 'tabs' }, children.map(function (item, i) {
-        return React.createElement("button", { key: i, "aria-controls": 'tabpanel-' + i, className: 'sd-nav-tabs__tab' + (index === i ? ' sd-nav-tabs__tab--active' : ''), onClick: function () { return handleSelected(i); }, role: 'tab', "aria-selected": index === i ? 'true' : 'false' }, item);
-    })));
+    return (React.createElement("div", { className: classes, role: 'tablist', "aria-label": ariaLabel ? ariaLabel : 'tabs' }, tabs ?
+        tabs.map(function (item, i) {
+            return React.createElement("button", { id: "tab-" + item.id, key: i, "aria-controls": 'tabpanel-' + item.id, className: 'sd-nav-tabs__tab' + (index === i ? ' sd-nav-tabs__tab--active' : ''), onClick: function () { return handleSelected(item.id); }, role: 'tab', "aria-selected": index === i ? 'true' : 'false' }, item.label);
+        })
+        :
+            children.map(function (item, i) {
+                return React.createElement("button", { id: "tab-" + item.props.id, key: i, "aria-controls": 'tabpanel-' + item.props.id, className: 'sd-nav-tabs__tab' + (index === i ? ' sd-nav-tabs__tab--active' : ''), onClick: function () { return handleSelected(item.props.id); }, role: 'tab', "aria-selected": index === i ? 'true' : 'false' }, item);
+            })));
 };
 exports.TabContent = function (_a) {
-    var theme = _a.theme, children = _a.children, activePanel = _a.activePanel;
+    var theme = _a.theme, children = _a.children, activePanel = _a.activePanel, tabs = _a.tabs;
+    if (!activePanel && tabs) {
+        activePanel = tabs[0].id;
+    }
+    else if (!activePanel && children) {
+        activePanel = children[0].props.id;
+    }
     return (React.createElement("div", { className: 'sd-nav-tabs__content' +
-            (theme === 'dark' ? ' sd-nav-tabs__content--ui-dark' : '') }, children.map(function (panel, i) {
-        return panel.props.indexValue === activePanel ?
-            React.createElement("div", { className: 'sd-nav-tabs__pane', role: 'tabpanel', "aria-labelledby": 'tab-' + activePanel, key: i }, panel) : null;
-    })));
+            (theme === 'dark' ? ' sd-nav-tabs__content--ui-dark' : '') }, tabs ?
+        tabs.map(function (panel, i) {
+            return panel.id === activePanel ?
+                React.createElement("div", { className: 'sd-nav-tabs__pane', role: 'tabpanel', "aria-labelledby": "tab-" + panel.id, key: i }, panel.content) : null;
+        })
+        :
+            children.map(function (panel, i) {
+                return panel.props.id === activePanel ?
+                    React.createElement("div", { className: 'sd-nav-tabs__pane', role: 'tabpanel', "aria-labelledby": "tab-" + panel.props.id, key: i }, panel) : null;
+            })));
+};
+exports.TabItem = function (_a) {
+    var children = _a.children;
+    return (React.createElement("span", null, children));
 };
 exports.TabPanel = function (_a) {
-    var children = _a.children, indexValue = _a.indexValue;
-    return (React.createElement(React.Fragment, { key: indexValue }, children));
+    var children = _a.children, id = _a.id;
+    return (React.createElement(React.Fragment, { key: id }, children));
 };

package/react/components/TabList.d.ts

@@ -3,20 +3,29 @@ interface ITabList {
     size?: 'normal' | 'large' | 'small';
     theme?: 'light' | 'dark';
     children: Array<any>;
+    selected?: string;
+    tabs?: Array<{
+        label: string;
+        content: React.ReactNode | string;
+        id?: string;
+    }>;
 }
 interface IState {
     index: number;
 }
 interface ITab {
-    label: string;
+    id?: string;
+    label?: string;
 }
 declare class Tab extends React.PureComponent<ITab> {
     render(): JSX.Element;
 }
 declare class TabList extends React.PureComponent<ITabList, IState> {
     constructor(props: ITabList);
+    componentDidMount(): void;
     private handleChange;
-    goTo(label: string): void;
+    goTo(index: string): void;
+    private navBar;
     render(): JSX.Element;
 }
 export { Tab, TabList };

package/react/components/TabList.js

@@ -60,31 +60,52 @@ var TabList = /** @class */ (function (_super) {
         _this.goTo = _this.goTo.bind(_this);
         return _this;
     }
+    TabList.prototype.componentDidMount = function () {
+        var _a;
+        if (this.props.selected) {
+            this.goTo((_a = this.props.selected) !== null && _a !== void 0 ? _a : '');
+        }
+    };
     TabList.prototype.handleChange = function (index) {
         this.setState({
             index: index,
         });
     };
-    TabList.prototype.goTo = function (label) {
-        var refLabel = this.props.children.find(function (item) { return item.props.label === label; });
-        this.setState({
-            index: this.props.children.indexOf(refLabel),
+    TabList.prototype.goTo = function (index) {
+        var _a, _b;
+        if (this.props.tabs) {
+            var refLabel = (_a = this.props.tabs) === null || _a === void 0 ? void 0 : _a.find(function (item) { return item.id === index; });
+            this.setState({
+                index: refLabel ? (_b = this.props.tabs) === null || _b === void 0 ? void 0 : _b.indexOf(refLabel) : 0,
+            });
+        }
+        else {
+            var refLabel = this.props.children.find(function (item) { return item.props.id === index; });
+            this.setState({
+                index: this.props.children.indexOf(refLabel),
+            });
+        }
+    };
+    TabList.prototype.navBar = function (arr) {
+        var _this = this;
+        return arr.map(function (item, index) {
+            var label = _this.props.tabs ? item.label : item.props.label;
+            return React.createElement("button", { id: "TabList-" + index, key: index, onClick: function () { return _this.handleChange(index); }, role: 'tab', "aria-selected": _this.state.index === index ? 'true' : 'false', className: 'sd-nav-tabs__tab' + (_this.state.index === index ? ' sd-nav-tabs__tab--active' : '') },
+                React.createElement("span", null, label));
         });
     };
     TabList.prototype.render = function () {
         var _a;
-        var _this = this;
         var classes = classnames_1.default('sd-nav-tabs', (_a = {},
             _a["sd-nav-tabs--" + this.props.size] = this.props.size && this.props.size !== undefined,
             _a['sd-nav-tabs--ui-dark'] = this.props.theme === 'dark',
             _a));
         return (React.createElement(React.Fragment, null,
-            React.createElement("div", { className: classes, role: 'tablist' }, this.props.children.map(function (item, index) {
-                return React.createElement("button", { key: index, onClick: function () { return _this.handleChange(index); }, role: 'tab', "aria-selected": _this.state.index === index ? 'true' : 'false', className: 'sd-nav-tabs__tab' + (_this.state.index === index ? ' sd-nav-tabs__tab--active' : '') },
-                    React.createElement("span", null, item.props.label));
-            })),
-            React.createElement("div", { className: 'sd-nav-tabs__content' +
-                    (this.props.theme === 'dark' ? ' sd-nav-tabs__content--ui-dark' : '') }, this.props.children[this.state.index])));
+            React.createElement("div", { className: classes, role: 'tablist' }, this.props.tabs ? this.navBar(this.props.tabs) : this.navBar(this.props.children)),
+            React.createElement("div", { "aria-labelledby": "TabList-" + this.state.index, role: 'tabpanel', className: 'sd-nav-tabs__content' +
+                    (this.props.theme === 'dark' ? ' sd-nav-tabs__content--ui-dark' : '') }, this.props.tabs
+                ? React.createElement(Tab, { id: this.props.tabs[this.state.index].id }, this.props.tabs[this.state.index].content)
+                : this.props.children[this.state.index])));
     };
     return TabList;
 }(React.PureComponent));

package/react/components/Tag.d.ts

@@ -5,7 +5,7 @@ interface IProps {
     shade?: 'light' | 'darker' | 'highlight1' | 'highlight2';
     shape?: 'round' | 'square';
     readOnly?: boolean;
-    onClick(): void;
+    onRemove?(): void;
 }
-export declare const Tag: ({ text, keyValue, shade, shape, readOnly, onClick }: IProps) => JSX.Element;
+export declare const Tag: ({ text, keyValue, shade, shape, readOnly, onRemove }: IProps) => JSX.Element;
 export {};

package/react/components/Tag.js

@@ -27,13 +27,13 @@ var React = __importStar(require("react"));
 var classnames_1 = __importDefault(require("classnames"));
 exports.Tag = function (_a) {
     var _b;
-    var text = _a.text, keyValue = _a.keyValue, shade = _a.shade, shape = _a.shape, readOnly = _a.readOnly, onClick = _a.onClick;
+    var text = _a.text, keyValue = _a.keyValue, shade = _a.shade, shape = _a.shape, readOnly = _a.readOnly, onRemove = _a.onRemove;
     var classes = classnames_1.default('tag-label', (_b = {},
         _b["tag-label--" + shade] = shade && shade !== 'light',
         _b['tag-label--square'] = shape === 'square',
         _b));
     return (React.createElement("span", { className: classes, key: keyValue },
         text,
-        !readOnly ? React.createElement("button", { className: 'tag-label__remove', onClick: onClick },
+        !readOnly ? React.createElement("button", { className: 'tag-label__remove', onClick: onRemove },
             React.createElement("i", { className: 'icon-close-small' })) : null));
 };

package/react/index.d.ts

@@ -44,7 +44,7 @@ export { DropdownLabel } from './components/DropdownFirst';
 export { DropdownDivider } from './components/DropdownFirst';
 export { Dropdown } from './components/Dropdown';
 export { Tag } from './components/Tag';
-export { TabLabel, TabPanel, TabContent, Tabs } from './components/TabCustom';
+export { TabItem, TabPanel, TabContent, TabNav } from './components/TabCustom';
 export { EmptyState } from './components/EmptyState';
 export { Autocomplete } from './components/Autocomplete';
 export { DonutChart } from './components/DonutChart';

package/react/index.js

@@ -96,10 +96,10 @@ Object.defineProperty(exports, "Dropdown", { enumerable: true, get: function ()
 var Tag_1 = require("./components/Tag");
 Object.defineProperty(exports, "Tag", { enumerable: true, get: function () { return Tag_1.Tag; } });
 var TabCustom_1 = require("./components/TabCustom");
-Object.defineProperty(exports, "TabLabel", { enumerable: true, get: function () { return TabCustom_1.TabLabel; } });
+Object.defineProperty(exports, "TabItem", { enumerable: true, get: function () { return TabCustom_1.TabItem; } });
 Object.defineProperty(exports, "TabPanel", { enumerable: true, get: function () { return TabCustom_1.TabPanel; } });
 Object.defineProperty(exports, "TabContent", { enumerable: true, get: function () { return TabCustom_1.TabContent; } });
-Object.defineProperty(exports, "Tabs", { enumerable: true, get: function () { return TabCustom_1.Tabs; } });
+Object.defineProperty(exports, "TabNav", { enumerable: true, get: function () { return TabCustom_1.TabNav; } });
 var EmptyState_1 = require("./components/EmptyState");
 Object.defineProperty(exports, "EmptyState", { enumerable: true, get: function () { return EmptyState_1.EmptyState; } });
 var Autocomplete_1 = require("./components/Autocomplete");