superdesk-ui-framework 3.0.2 → 3.0.5

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

@@ -1,7 +1,21 @@
-interface ITagInput {
-    items?: Array<any>;
-    label: string;
-    freetype?: boolean;
+import * as React from 'react';
+interface IProps {
+    value: Array<string>;
+    onChange(value: Array<string>): void;
+    placeholder: string;
+    invalid?: boolean;
+    inlineLabel?: boolean;
+    labelHidden?: boolean;
+    tabindex?: number;
+    fullWidth?: boolean;
+    info?: string;
+    error?: string;
+    required?: boolean;
+    label?: string;
+    disabled?: boolean;
+}
+export declare class TagInput extends React.Component<IProps> {
+    private htmlId;
+    render(): JSX.Element;
 }
-export declare const TagInput: ({ items, label, freetype }: ITagInput) => JSX.Element;
 export {};

package/react/components/TagInput.js

@@ -1,4 +1,19 @@
 "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]; } });
@@ -24,177 +39,21 @@ var __importDefault = (this && this.__importDefault) || function (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)));
-};
+var chips_1 = require("@superdesk/primereact/chips");
+var Form_1 = require("./Form");
+var react_id_generator_1 = __importDefault(require("react-id-generator"));
+var TagInput = /** @class */ (function (_super) {
+    __extends(TagInput, _super);
+    function TagInput() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.htmlId = (0, react_id_generator_1.default)();
+        return _this;
+    }
+    TagInput.prototype.render = function () {
+        var _a = this.props, onChange = _a.onChange, value = _a.value, placeholder = _a.placeholder;
+        return (React.createElement(Form_1.InputWrapper, { label: this.props.label, error: this.props.error, required: this.props.required, disabled: this.props.disabled, invalid: this.props.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(chips_1.Chips, { className: "tags-input--multi-select sd-input__input ".concat(this.props.disabled ? ' tags-input__padding-disabled' : ''), allowDuplicate: false, separator: ",", onChange: function (event) { return onChange(event.value); }, value: value, placeholder: placeholder, disabled: this.props.disabled })));
+    };
+    return TagInput;
+}(React.Component));
 exports.TagInput = TagInput;

package/react/index.d.ts

@@ -48,14 +48,13 @@ export { DropdownLabel } from './components/DropdownFirst';
 export { DropdownDivider } from './components/DropdownFirst';
 export { Dropdown } from './components/Dropdown';
 export { Tag } from './components/Tag';
+export { TagInput } from './components/TagInput';
 export { TabLabel, TabPanel, TabContent, Tabs } from './components/TabCustom';
 export { EmptyState } from './components/EmptyState';
 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.TagInput = 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");
@@ -117,6 +116,8 @@ var Dropdown_1 = require("./components/Dropdown");
 Object.defineProperty(exports, "Dropdown", { enumerable: true, get: function () { return Dropdown_1.Dropdown; } });
 var Tag_1 = require("./components/Tag");
 Object.defineProperty(exports, "Tag", { enumerable: true, get: function () { return Tag_1.Tag; } });
+var TagInput_1 = require("./components/TagInput");
+Object.defineProperty(exports, "TagInput", { enumerable: true, get: function () { return TagInput_1.TagInput; } });
 var TabCustom_1 = require("./components/TabCustom");
 Object.defineProperty(exports, "TabLabel", { enumerable: true, get: function () { return TabCustom_1.TabLabel; } });
 Object.defineProperty(exports, "TabPanel", { enumerable: true, get: function () { return TabCustom_1.TabPanel; } });
@@ -132,10 +133,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/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 {};