superdesk-ui-framework 3.0.1 → 3.0.4

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

@@ -1,23 +1,22 @@
 import * as React from 'react';
 interface IProps {
+    activeTab: string | null;
+    onActiveTabChange(val: string | null): void;
     items: Array<ISideBarTab | 'divider'>;
     side?: 'none' | 'left' | 'right';
 }
 export interface ISideBarTab {
+    id: string;
     icon: string;
     size: 'small' | 'big';
     tooltip?: string;
-    active?: boolean;
     badgeValue?: string;
-    onClick(event: React.MouseEvent<HTMLButtonElement, MouseEvent>): void;
+    onClick(event: React.MouseEvent<HTMLAnchorElement, MouseEvent>): void;
 }
-interface IState {
-    index: number;
-    closeIndex: number;
-}
-export declare class SideBarTabs extends React.PureComponent<IProps, IState> {
+export declare class SideBarTabs extends React.PureComponent<IProps> {
     constructor(props: IProps);
-    handleClick(item: ISideBarTab, indexNumber: number, event: any): void;
+    componentDidMount(): void;
+    handleClick(item: ISideBarTab, event: React.MouseEvent<HTMLAnchorElement, MouseEvent>): void;
     render(): JSX.Element;
 }
 export {};

package/react/components/Navigation/SideBarTabs.js

@@ -33,34 +33,37 @@ 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.SideBarTabs = void 0;
 var React = __importStar(require("react"));
 var Icon_1 = require("../Icon");
 var Badge_1 = require("../Badge");
+var classnames_1 = __importDefault(require("classnames"));
 var SideBarTabs = /** @class */ (function (_super) {
     __extends(SideBarTabs, _super);
     function SideBarTabs(props) {
         var _this = _super.call(this, props) || this;
-        _this.state = {
-            index: -1,
-            closeIndex: -1,
-        };
         _this.handleClick = _this.handleClick.bind(_this);
         return _this;
     }
-    SideBarTabs.prototype.handleClick = function (item, indexNumber, event) {
-        this.setState({
-            index: indexNumber,
-        });
-        if (this.state.index === indexNumber) {
-            this.setState({
-                closeIndex: indexNumber,
-                index: -1,
-            });
+    SideBarTabs.prototype.componentDidMount = function () {
+        var _this = this;
+        var activeItem = this.props.items.find(function (item) { return item !== 'divider' && item.id === _this.props.activeTab; });
+        if (activeItem != null && activeItem !== 'divider') {
+            this.props.onActiveTabChange(activeItem.id);
+        }
+    };
+    SideBarTabs.prototype.handleClick = function (item, event) {
+        if (this.props.activeTab === item.id) {
+            this.props.onActiveTabChange(null);
+        }
+        else {
+            this.props.onActiveTabChange(item.id);
+            item.onClick(event);
         }
-        item.active = !item.active;
-        item.onClick(event);
     };
     SideBarTabs.prototype.render = function () {
         var _this = this;
@@ -70,13 +73,9 @@ var SideBarTabs = /** @class */ (function (_super) {
                     return (React.createElement("li", { key: index, className: 'sd-sidetab-menu__spacer' }));
                 }
                 else {
-                    return (React.createElement("li", { key: index, "data-sd-tooltip": item['tooltip'], "data-flow": 'left' },
-                        React.createElement("a", { role: 'button', "aria-label": item['tooltip'], className: 'sd-sidetab-menu__btn' + (item['active'] ?
-                                ' sd-sidetab-menu__btn--active' :
-                                (index === _this.state.index ? ' sd-sidetab-menu__btn--active' : '')), onClick: function () { return _this.handleClick(item, index, event); } },
-                            item['badgeValue'] != null
-                                ? (React.createElement(Badge_1.Badge, { text: item['badgeValue'], type: 'primary' }))
-                                : null,
+                    return (React.createElement("li", { key: index, "data-sd-tooltip": item.tooltip, "data-flow": 'left' },
+                        React.createElement("a", { role: 'button', "aria-label": item.tooltip, className: (0, classnames_1.default)('sd-sidetab-menu__btn', { 'sd-sidetab-menu__btn--active': item.id === _this.props.activeTab }), onClick: function (event) { return _this.handleClick(item, event); } },
+                            item.badgeValue != null && (React.createElement(Badge_1.Badge, { text: item['badgeValue'], type: 'primary' })),
                             React.createElement("span", { className: 'sd-sidetab-menu__main-icon ' },
                                 React.createElement(Icon_1.Icon, { size: item['size'], name: item['icon'] })),
                             React.createElement("i", { className: 'sd-sidetab-menu__helper-icon icon-close-small' }))));

package/react/index.d.ts

@@ -54,8 +54,6 @@ export { Autocomplete } from './components/Autocomplete';
 export { DonutChart } from './components/DonutChart';
 export { Carousel } from './components/Carousel';
 export { Modal } from './components/Modal';
-export { TagInput } from './components/TagInput';
-export { TagInputTest } from './components/TagInputTest';
 export { GridList } from './components/GridList';
 export { GridItem, GridItemContent, GridItemMedia, GridItemFooter, GridItemContentBlock, GridItemTime, GridItemTitle, GridItemText, GridItemSlug, GridItemFooterBlock, GridItemFooterActions, GridItemTopActions, GridItemCheckWrapper } from './components/GridItem';
 export { toasted } from './components/Toast';

package/react/index.js

@@ -13,8 +13,7 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.DropdownLabel = exports.DropdownItem = exports.DropdownFirst = exports.HeadingText = exports.ContentDivider = exports.Divider = exports.Icon = exports.Prop = exports.PropsList = exports.StrechBar = exports.SlidingToolbar = exports.SubNavDivider = exports.SubNav = exports.LeftMenu = exports.TabList = exports.Tab = exports.NavButton = exports.CheckButtonGroup = exports.CheckGroup = exports.CheckboxButton = exports.RadioButtonGroup = exports.Checkbox = exports.RadioGroup = exports.Loader = exports.ButtonGroup = exports.SwitchGroup = exports.Switch = exports.FormLabel = exports.TimePicker = exports.DatePickerISO = exports.DatePicker = exports.getDurationString = exports.DurationInput = exports.Tooltip = exports.IconLabel = exports.IconButton = exports.AvatarGroup = exports.AvatarContentImage = exports.AvatarContentText = exports.AvatarWrapper = exports.Alert = exports.Badge = exports.Label = exports.Popover = exports.SelectWithTemplate = exports.Option = exports.Select = exports.Input = exports.Button = exports.HelloWorld = void 0;
-exports.ContentListItem = exports.TableListItem = exports.TableList = exports.TreeSelect = exports.BottomNav = exports.Heading = exports.Time = exports.Text = exports.LoadingOverlay = exports.Spinner = exports.ListItemLoader = exports.Skeleton = exports.WithSizeObserver = exports.SearchBar = exports.CreateButton = exports.DropZone = exports.ThemeSelector = exports.IconPicker = exports.SelectGrid = exports.ToggleBox = exports.Menu = exports.toasted = exports.GridItemCheckWrapper = exports.GridItemTopActions = exports.GridItemFooterActions = exports.GridItemFooterBlock = exports.GridItemSlug = exports.GridItemText = exports.GridItemTitle = exports.GridItemTime = exports.GridItemContentBlock = exports.GridItemFooter = exports.GridItemMedia = exports.GridItemContent = exports.GridItem = exports.GridList = exports.TagInputTest = exports.TagInput = exports.Modal = exports.Carousel = exports.DonutChart = exports.Autocomplete = exports.EmptyState = exports.Tabs = exports.TabContent = exports.TabPanel = exports.TabLabel = exports.Tag = exports.Dropdown = exports.DropdownDivider = void 0;
-exports.MultiSelect = void 0;
+exports.MultiSelect = exports.ContentListItem = exports.TableListItem = exports.TableList = exports.TreeSelect = exports.BottomNav = exports.Heading = exports.Time = exports.Text = exports.LoadingOverlay = exports.Spinner = exports.ListItemLoader = exports.Skeleton = exports.WithSizeObserver = exports.SearchBar = exports.CreateButton = exports.DropZone = exports.ThemeSelector = exports.IconPicker = exports.SelectGrid = exports.ToggleBox = exports.Menu = exports.toasted = exports.GridItemCheckWrapper = exports.GridItemTopActions = exports.GridItemFooterActions = exports.GridItemFooterBlock = exports.GridItemSlug = exports.GridItemText = exports.GridItemTitle = exports.GridItemTime = exports.GridItemContentBlock = exports.GridItemFooter = exports.GridItemMedia = exports.GridItemContent = exports.GridItem = exports.GridList = exports.Modal = exports.Carousel = exports.DonutChart = exports.Autocomplete = exports.EmptyState = exports.Tabs = exports.TabContent = exports.TabPanel = exports.TabLabel = exports.Tag = exports.Dropdown = exports.DropdownDivider = void 0;
 var HelloWorld_1 = require("./components/HelloWorld");
 Object.defineProperty(exports, "HelloWorld", { enumerable: true, get: function () { return HelloWorld_1.HelloWorld; } });
 var Button_1 = require("./components/Button");
@@ -132,10 +131,6 @@ var Carousel_1 = require("./components/Carousel");
 Object.defineProperty(exports, "Carousel", { enumerable: true, get: function () { return Carousel_1.Carousel; } });
 var Modal_1 = require("./components/Modal");
 Object.defineProperty(exports, "Modal", { enumerable: true, get: function () { return Modal_1.Modal; } });
-var TagInput_1 = require("./components/TagInput");
-Object.defineProperty(exports, "TagInput", { enumerable: true, get: function () { return TagInput_1.TagInput; } });
-var TagInputTest_1 = require("./components/TagInputTest");
-Object.defineProperty(exports, "TagInputTest", { enumerable: true, get: function () { return TagInputTest_1.TagInputTest; } });
 var GridList_1 = require("./components/GridList");
 Object.defineProperty(exports, "GridList", { enumerable: true, get: function () { return GridList_1.GridList; } });
 var GridItem_1 = require("./components/GridItem");

package/app-typescript/components/TagInputTest.tsx

@@ -1,76 +0,0 @@
-import * as React from 'react';
-import { AutoComplete } from '@superdesk/primereact/autocomplete';
-
-//   work in progress used Autocomplete from primereact miss:
-//  1. style for component
-//  2. category select
-//  3. freetype text
-
-interface IProps {
-    items: Array<any>;
-    keyValue: string; // Field of a suggested object to resolve and display
-    minLength?: number;
-}
-
-interface IState {
-    selectedItem: any;
-    filteredItems: any;
-}
-
-export class TagInputTest extends React.Component<IProps, IState> {
-    constructor(props: IProps) {
-        super(props);
-        this.state = {
-            selectedItem: null,
-            filteredItems: null,
-        };
-
-        this.searchItem = this.searchItem.bind(this);
-        this.itemTemplate = this.itemTemplate.bind(this);
-        this.handleItem = this.handleItem.bind(this);
-    }
-
-    searchItem(event: any) {
-        setTimeout(() => {
-            let filteredItems;
-            if (!event.query.trim().length) {
-                filteredItems = [...this.props.items];
-            } else {
-                filteredItems = this.props.items.filter((item) => {
-                    return item[this.props.keyValue].toLowerCase().startsWith(event.query.toLowerCase());
-                });
-            }
-
-            this.setState({ filteredItems });
-        }, 250);
-    }
-
-    itemTemplate(item: any) {
-        return (
-            <div>
-                <div>{item[this.props.keyValue]}</div>
-            </div>
-        );
-    }
-
-    handleItem(e: any) {
-        this.setState({ selectedItem: e.value });
-    }
-
-    render() {
-        return (
-            <div>
-                <AutoComplete
-                    value={this.state.selectedItem}
-                    suggestions={this.state.filteredItems}
-                    completeMethod={this.searchItem}
-                    field={this.props.keyValue}
-                    multiple
-                    dropdown={true}
-                    minLength={this.props.minLength ? this.props.minLength : 1}
-                    onChange={(e) => this.handleItem(e)} />
-
-            </div>
-        );
-    }
-}

package/dist/react/TagInputs.tsx

@@ -1,92 +0,0 @@
-import * as React from 'react';
-import * as Markup from '../../js/react';
-import { TagInput, TagInputTest } from '../../../app-typescript';
-
-export default class TagInputDoc extends React.Component {
-    render() {
-        return (
-            <React.Fragment>
-                <section className="docs-page__container">
-                    <h2 className="docs-page__h2">Tag Input IN PROGRESS</h2>
-                    <p className="docs-page__paragraph">
-                        A tag input is an input box that automatically creates tags – also called tokens – out of typed text every time a certain key is pressed. It's useful for tagging and highlighting information right on the input box.
-                    </p>
-                    <Markup.ReactMarkupCodePreview>{`
-                    
-                `}
-                    </Markup.ReactMarkupCodePreview>
-                    <p className='docs-page__paragraph'>PRIME REACT TEST</p>
-                    <Markup.ReactMarkup>
-                        <Markup.ReactMarkupPreview>
-                            <p className="docs-page__paragraph">Test Tag Input</p>
-                            <div className='form__row'>
-                                <TagInputTest
-                                    items={[
-                                        { name: 'Afghanistan', code: 'AF' },
-                                        { name: 'Åland Islands', code: 'AX' },
-                                        { name: 'Albania', code: 'AL' },
-                                        { name: 'Algeria', code: 'DZ' },
-                                        { name: 'American Samoa', code: 'AS' },
-                                        { name: 'AndorrA', code: 'AD' },
-                                        { name: 'Angola', code: 'AO' },
-                                        { name: 'Anguilla', code: 'AI' },
-                                        { name: 'Antarctica', code: 'AQ' },
-                                        { name: 'Antigua and Barbuda', code: 'AG' },
-                                        { name: 'Argentina', code: 'AR' },
-                                        { name: 'Armenia', code: 'AM' },
-                                        { name: 'Aruba', code: 'AW' },
-                                        { name: 'Australia', code: 'AU' },
-                                        { name: 'Austria', code: 'AT' },
-                                        { name: 'Azerbaijan', code: 'AZ' },
-                                        { name: 'Bahamas', code: 'BS' },
-                                        { name: 'Bahrain', code: 'BH' },
-                                        { name: 'Bangladesh', code: 'BD' },
-                                        { name: 'Barbados', code: 'BB' },
-                                        { name: 'Belarus', code: 'BY' },
-                                        { name: 'Belgium', code: 'BE' },
-                                        { name: 'Belize', code: 'BZ' },
-                                        { name: 'Benin', code: 'BJ' },
-                                        { name: 'Bermuda', code: 'BM' },
-                                        { name: 'Bhutan', code: 'BT' },
-                                        { name: 'Bolivia', code: 'BO' },
-                                        { name: 'Bosnia and Herzegovina', code: 'BA' },
-                                        { name: 'Botswana', code: 'BW' },
-                                        { name: 'Bouvet Island', code: 'BV' }]}
-                                    keyValue='name'
-                                />
-                            </div>
-                        </Markup.ReactMarkupPreview>
-                        <Markup.ReactMarkupCode>{`
-
-                    `}
-                        </Markup.ReactMarkupCode>
-                    </Markup.ReactMarkup>
-
-                    <p className='docs-page__paragraph'>TAG INPUT FROM SCRATCH TEST</p>
-                    <Markup.ReactMarkup>
-                        <Markup.ReactMarkupPreview>
-                            <p className="docs-page__paragraph">// Tag input with button for picking items from list</p>
-                            <div className='form__row'>
-                                <TagInput label='Cars' items={['Audi', 'BMW', 'Hyundai', 'Opel', 'Audi2', 'BMW2', 'Hyundai2', 'Opel2', 'Audi3', 'BMW3', 'Hyundai3', 'Opel3', 'Audi4', 'BMW4', 'Hyundai4', 'Opel4', 'Audi5', 'BMW5', 'Hyundai5', 'Opel5', 'Audi6', 'BMW6', 'Hyundai6', 'Opel6']} />
-                            </div>
-
-                            <p className="docs-page__paragraph">// Tag input with suggestions + freetype text</p>
-                            <div className='form__row'>
-                                <TagInput label='Cars' freetype={true} items={['Audi', 'BMW', 'Hyundai', 'Opel', 'Audi2', 'BMW2', 'Hyundai2', 'Opel2', 'Audi3', 'BMW3', 'Hyundai3', 'Opel3', 'Audi4', 'BMW4', 'Hyundai4', 'Opel4', 'Audi5', 'BMW5', 'Hyundai5', 'Opel5', 'Audi6', 'BMW6', 'Hyundai6', 'Opel6']} />
-                            </div>
-
-                            <p className="docs-page__paragraph">// Only freetype text</p>
-                            <div className='form__row'>
-                                <TagInput label='Cars' freetype={true} />
-                            </div>
-                        </Markup.ReactMarkupPreview>
-                        <Markup.ReactMarkupCode>{`
-
-                    `}
-                        </Markup.ReactMarkupCode>
-                    </Markup.ReactMarkup>
-                </section>
-            </React.Fragment>
-        )
-    }
-}

package/examples/pages/react/TagInputs.tsx

@@ -1,92 +0,0 @@
-import * as React from 'react';
-import * as Markup from '../../js/react';
-import { TagInput, TagInputTest } from '../../../app-typescript';
-
-export default class TagInputDoc extends React.Component {
-    render() {
-        return (
-            <React.Fragment>
-                <section className="docs-page__container">
-                    <h2 className="docs-page__h2">Tag Input IN PROGRESS</h2>
-                    <p className="docs-page__paragraph">
-                        A tag input is an input box that automatically creates tags – also called tokens – out of typed text every time a certain key is pressed. It's useful for tagging and highlighting information right on the input box.
-                    </p>
-                    <Markup.ReactMarkupCodePreview>{`
-                    
-                `}
-                    </Markup.ReactMarkupCodePreview>
-                    <p className='docs-page__paragraph'>PRIME REACT TEST</p>
-                    <Markup.ReactMarkup>
-                        <Markup.ReactMarkupPreview>
-                            <p className="docs-page__paragraph">Test Tag Input</p>
-                            <div className='form__row'>
-                                <TagInputTest
-                                    items={[
-                                        { name: 'Afghanistan', code: 'AF' },
-                                        { name: 'Åland Islands', code: 'AX' },
-                                        { name: 'Albania', code: 'AL' },
-                                        { name: 'Algeria', code: 'DZ' },
-                                        { name: 'American Samoa', code: 'AS' },
-                                        { name: 'AndorrA', code: 'AD' },
-                                        { name: 'Angola', code: 'AO' },
-                                        { name: 'Anguilla', code: 'AI' },
-                                        { name: 'Antarctica', code: 'AQ' },
-                                        { name: 'Antigua and Barbuda', code: 'AG' },
-                                        { name: 'Argentina', code: 'AR' },
-                                        { name: 'Armenia', code: 'AM' },
-                                        { name: 'Aruba', code: 'AW' },
-                                        { name: 'Australia', code: 'AU' },
-                                        { name: 'Austria', code: 'AT' },
-                                        { name: 'Azerbaijan', code: 'AZ' },
-                                        { name: 'Bahamas', code: 'BS' },
-                                        { name: 'Bahrain', code: 'BH' },
-                                        { name: 'Bangladesh', code: 'BD' },
-                                        { name: 'Barbados', code: 'BB' },
-                                        { name: 'Belarus', code: 'BY' },
-                                        { name: 'Belgium', code: 'BE' },
-                                        { name: 'Belize', code: 'BZ' },
-                                        { name: 'Benin', code: 'BJ' },
-                                        { name: 'Bermuda', code: 'BM' },
-                                        { name: 'Bhutan', code: 'BT' },
-                                        { name: 'Bolivia', code: 'BO' },
-                                        { name: 'Bosnia and Herzegovina', code: 'BA' },
-                                        { name: 'Botswana', code: 'BW' },
-                                        { name: 'Bouvet Island', code: 'BV' }]}
-                                    keyValue='name'
-                                />
-                            </div>
-                        </Markup.ReactMarkupPreview>
-                        <Markup.ReactMarkupCode>{`
-
-                    `}
-                        </Markup.ReactMarkupCode>
-                    </Markup.ReactMarkup>
-
-                    <p className='docs-page__paragraph'>TAG INPUT FROM SCRATCH TEST</p>
-                    <Markup.ReactMarkup>
-                        <Markup.ReactMarkupPreview>
-                            <p className="docs-page__paragraph">// Tag input with button for picking items from list</p>
-                            <div className='form__row'>
-                                <TagInput label='Cars' items={['Audi', 'BMW', 'Hyundai', 'Opel', 'Audi2', 'BMW2', 'Hyundai2', 'Opel2', 'Audi3', 'BMW3', 'Hyundai3', 'Opel3', 'Audi4', 'BMW4', 'Hyundai4', 'Opel4', 'Audi5', 'BMW5', 'Hyundai5', 'Opel5', 'Audi6', 'BMW6', 'Hyundai6', 'Opel6']} />
-                            </div>
-
-                            <p className="docs-page__paragraph">// Tag input with suggestions + freetype text</p>
-                            <div className='form__row'>
-                                <TagInput label='Cars' freetype={true} items={['Audi', 'BMW', 'Hyundai', 'Opel', 'Audi2', 'BMW2', 'Hyundai2', 'Opel2', 'Audi3', 'BMW3', 'Hyundai3', 'Opel3', 'Audi4', 'BMW4', 'Hyundai4', 'Opel4', 'Audi5', 'BMW5', 'Hyundai5', 'Opel5', 'Audi6', 'BMW6', 'Hyundai6', 'Opel6']} />
-                            </div>
-
-                            <p className="docs-page__paragraph">// Only freetype text</p>
-                            <div className='form__row'>
-                                <TagInput label='Cars' freetype={true} />
-                            </div>
-                        </Markup.ReactMarkupPreview>
-                        <Markup.ReactMarkupCode>{`
-
-                    `}
-                        </Markup.ReactMarkupCode>
-                    </Markup.ReactMarkup>
-                </section>
-            </React.Fragment>
-        )
-    }
-}

package/react/components/TagInput.d.ts

@@ -1,7 +0,0 @@
-interface ITagInput {
-    items?: Array<any>;
-    label: string;
-    freetype?: boolean;
-}
-export declare const TagInput: ({ items, label, freetype }: ITagInput) => JSX.Element;
-export {};

package/react/components/TagInput.js

@@ -1,200 +0,0 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.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.TagInput = void 0;
-var React = __importStar(require("react"));
-var classnames_1 = __importDefault(require("classnames"));
-var core_1 = require("@popperjs/core");
-var lodash_1 = require("lodash");
-var TagInput = function (_a) {
-    var items = _a.items, label = _a.label, freetype = _a.freetype;
-    var _b = React.useState([]), tags = _b[0], setTags = _b[1];
-    var _c = React.useState(false), openSuggestion = _c[0], setOpenSuggestion = _c[1];
-    var inputRef = React.useRef(null);
-    var refTagInput = React.useRef(null);
-    var refSuggestions = React.useRef(null);
-    // number for select
-    var _d = React.useState(-1), selectNumber = _d[0], setSelectNumber = _d[1];
-    // autocomplete
-    var _e = React.useState([]), suggestions = _e[0], setSuggestions = _e[1];
-    // focused
-    var _f = React.useState(false), focus = _f[0], setFocus = _f[1];
-    // invalid-tag
-    var _g = React.useState(false), invalid = _g[0], setInvalid = _g[1];
-    React.useEffect(function () {
-        var menuRef = refSuggestions.current;
-        var toggleRef = refTagInput.current;
-        if (toggleRef && menuRef) {
-            (0, core_1.createPopper)(toggleRef, menuRef, {
-                placement: 'bottom-start',
-            });
-        }
-    }, [suggestions]);
-    function inputKeyDown(e) {
-        var val = e.target.value;
-        if (val.length > 1) {
-            setInvalid(false);
-        }
-        if (e.key === 'Enter' && val) {
-            if (val.length > 2 && freetype) {
-                setInvalid(false);
-                if (checkTag(val) === 0) {
-                    setTags(function (tag) { return tag.concat(val); });
-                    var inputRefVariable = inputRef.current;
-                    if (inputRefVariable) {
-                        inputRefVariable.value = null;
-                    }
-                }
-            }
-            else {
-                setInvalid(true);
-            }
-        }
-        else if (e.key === 'Backspace' && !val) {
-            setSelectNumber(tags.length - 1);
-            if (selectNumber !== -1) {
-                removeTag(selectNumber);
-                setSelectNumber(-1);
-            }
-        }
-        else if (e.key === 'ArrowLeft' && !val) {
-            if (selectNumber > 0) {
-                setSelectNumber(selectNumber - 1);
-            }
-            else {
-                setSelectNumber(tags.length - 1);
-            }
-        }
-        else if (e.key === 'ArrowRight' && !val) {
-            if (selectNumber !== -1 && selectNumber < tags.length - 1) {
-                setSelectNumber(selectNumber + 1);
-            }
-            else {
-                setSelectNumber(0);
-            }
-        }
-    }
-    function checkTag(newTag) {
-        var count = 0;
-        tags.forEach(function (tag) {
-            if (tag === newTag) {
-                count = 1;
-            }
-        });
-        return count;
-    }
-    function removeTag(i) {
-        var newTags = (0, lodash_1.clone)(tags);
-        newTags.splice(i, 1);
-        setTags(newTags);
-    }
-    function onTextChanged(e) {
-        if (items) {
-            var value = e.target.value;
-            var newSuggestions = [];
-            if (value.length > 1) {
-                var regex_1 = new RegExp("^".concat(value), 'i');
-                newSuggestions = items.sort().filter(function (v) { return regex_1.test(v); });
-            }
-            setSuggestions(newSuggestions);
-        }
-    }
-    function addTag(item) {
-        if (checkTag(item) === 0) {
-            setTags(function (tag) { return tag.concat(item); });
-            var inputRefVariable = inputRef.current;
-            if (inputRefVariable) {
-                inputRefVariable.value = null;
-            }
-        }
-        setSuggestions([]);
-    }
-    function toggleSuggestions() {
-        if (!openSuggestion) {
-            setOpenSuggestion(true);
-            document.addEventListener('click', closeSuggestions);
-        }
-        else {
-            setOpenSuggestion(false);
-        }
-    }
-    function closeSuggestions() {
-        document.removeEventListener('click', closeSuggestions);
-        setOpenSuggestion(false);
-    }
-    function toggleFocus() {
-        if (!focus) {
-            setFocus(true);
-            document.addEventListener('click', removeFocus);
-        }
-        else {
-            setFocus(false);
-        }
-    }
-    function removeFocus() {
-        document.removeEventListener('click', removeFocus);
-        setFocus(false);
-    }
-    function renderSuggestions() {
-        if (openSuggestion) {
-            return (React.createElement("div", { className: 'autocomplete', ref: refSuggestions },
-                React.createElement("ul", { className: 'suggestion-list' }, suggestions.length !== 0 ? (suggestions.map(function (item, index) {
-                    return React.createElement("li", { className: 'suggestion-item', onClick: function () { return addTag(item); }, key: index }, item);
-                })) : (items === null || items === void 0 ? void 0 : items.map(function (item, index) {
-                    return React.createElement("li", { className: 'suggestion-item', onClick: function () { return addTag(item); }, key: index }, item);
-                })))));
-        }
-        else if (suggestions.length === 0) {
-            return null;
-        }
-        else {
-            return (React.createElement("div", { className: 'autocomplete', ref: refSuggestions },
-                React.createElement("ul", { className: 'suggestion-list' }, suggestions.map(function (item, index) {
-                    return React.createElement("li", { className: 'suggestion-item', onClick: function () { return addTag(item); }, key: index }, item);
-                }))));
-        }
-    }
-    var classes = (0, classnames_1.default)('tags-input__tags', {
-        'focused': focus,
-        'tag-input__invalid-tag': invalid,
-    });
-    return (React.createElement("div", { className: 'sd-tag-input', "data-label": label },
-        React.createElement("label", { className: 'tags-input__label' }, label),
-        React.createElement("div", { className: 'tags-input', ref: refTagInput },
-            React.createElement("div", { className: classes },
-                items ?
-                    React.createElement("button", { className: "tags-input__add-button", onClick: toggleSuggestions },
-                        React.createElement("i", { className: "icon-plus-large" })) : null,
-                React.createElement("ul", { className: 'tags-input__tag-list' },
-                    tags.map(function (tag, i) {
-                        return (React.createElement("li", { className: 'tags-input__tag-item' + (selectNumber === i ? ' selected' : ''), key: i },
-                            tag,
-                            React.createElement("a", { type: 'button', className: 'tags-input__remove-button', onClick: function () { return removeTag(i); } },
-                                React.createElement("i", { className: 'icon-close-small' }))));
-                    }),
-                    React.createElement("li", { className: 'input-tag__tags__input' },
-                        React.createElement("input", { type: 'text', className: 'tags-input__input' + (invalid ? ' invalid-tag' : ''), onChange: onTextChanged, ref: inputRef, onKeyDown: inputKeyDown, onClick: toggleFocus })))),
-            items ? renderSuggestions() : null)));
-};
-exports.TagInput = TagInput;

package/react/components/TagInputTest.d.ts

@@ -1,18 +0,0 @@
-import * as React from 'react';
-interface IProps {
-    items: Array<any>;
-    keyValue: string;
-    minLength?: number;
-}
-interface IState {
-    selectedItem: any;
-    filteredItems: any;
-}
-export declare class TagInputTest extends React.Component<IProps, IState> {
-    constructor(props: IProps);
-    searchItem(event: any): void;
-    itemTemplate(item: any): JSX.Element;
-    handleItem(e: any): void;
-    render(): JSX.Element;
-}
-export {};