@rio-cloud/rio-uikit 0.16.4-beta.13 → 0.16.4-beta.15

package/lib/es/components/tag/Tag.d.ts

@@ -1,37 +1,70 @@
+import { type PropsWithChildren } from 'react';
+export type TagSize = 'small';
+export type TagProps = {
+    /**
+     * Defines if the tag is active.
+     *
+     * @default false
+     */
+    active?: boolean;
+    /**
+     * Defines if the tag is clickable.
+     *
+     * @default false
+     */
+    clickable?: boolean;
+    /**
+     * Defines if the tag is deletable.
+     *
+     * @default false
+     */
+    deletable?: boolean;
+    /**
+     * Defines if the tag is revertable.
+     *
+     * @default false
+     */
+    revertable?: boolean;
+    /**
+     * Defines if the tag is disabled.
+     *
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Define any rioglyph icon like "rioglyph-truck".
+     */
+    icon?: string;
+    /**
+     * Sets a more subtle style for border and background.
+     *
+     * @default false
+     */
+    muted?: boolean;
+    /**
+     * Defines if the tag is round.
+     *
+     * @default true
+     */
+    round?: boolean;
+    /**
+     * Defines if the tag is selectable.
+     *
+     * @default false
+     */
+    selectable?: boolean;
+    /**
+     * Defines if you want to render the tag in a different size.
+     *
+     * Possible values are: 'small'
+     */
+    size?: TagSize;
+    multiline?: boolean;
+    [remainingProp: string]: unknown;
+    /**
+     * Additional classes to be set on the wrapper element.
+     */
+    className?: string;
+};
+declare const Tag: (props: PropsWithChildren<TagProps>) => import("react/jsx-runtime").JSX.Element;
 export default Tag;
-declare function Tag(props: any): import("react/jsx-runtime").JSX.Element;
-declare namespace Tag {
-    namespace defaultProps {
-        const active: boolean;
-        const clickable: boolean;
-        const deletable: boolean;
-        const revertable: boolean;
-        const disabled: boolean;
-        const muted: boolean;
-        const round: boolean;
-        const selectable: boolean;
-    }
-    namespace propTypes {
-        const active_1: PropTypes.Requireable<boolean>;
-        export { active_1 as active };
-        export const className: PropTypes.Requireable<string>;
-        const clickable_1: PropTypes.Requireable<boolean>;
-        export { clickable_1 as clickable };
-        const deletable_1: PropTypes.Requireable<boolean>;
-        export { deletable_1 as deletable };
-        const revertable_1: PropTypes.Requireable<boolean>;
-        export { revertable_1 as revertable };
-        const disabled_1: PropTypes.Requireable<boolean>;
-        export { disabled_1 as disabled };
-        export const icon: PropTypes.Requireable<string>;
-        const muted_1: PropTypes.Requireable<boolean>;
-        export { muted_1 as muted };
-        export const multiline: PropTypes.Requireable<boolean>;
-        const round_1: PropTypes.Requireable<boolean>;
-        export { round_1 as round };
-        const selectable_1: PropTypes.Requireable<boolean>;
-        export { selectable_1 as selectable };
-        export const size: PropTypes.Requireable<string>;
-    }
-}
-import PropTypes from "prop-types";

package/lib/es/components/tag/Tag.js

@@ -2,36 +2,13 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = tslib_1.__importDefault(require("react"));
-const prop_types_1 = tslib_1.__importDefault(require("prop-types"));
+// @ts-ignore-next-line importsNotUsedAsValues
+require("react");
 const classnames_1 = tslib_1.__importDefault(require("classnames"));
-const Tag = props => {
-    const { children, icon, active, disabled, clickable, selectable, deletable, revertable, multiline, muted, round } = props, remainingProps = tslib_1.__rest(props, ["children", "icon", "active", "disabled", "clickable", "selectable", "deletable", "revertable", "multiline", "muted", "round"]);
-    return ((0, jsx_runtime_1.jsx)("div", Object.assign({}, remainingProps, { className: (0, classnames_1.default)('tag', props.size === 'small' && 'tag-small', icon && `rioglyph ${icon}`, active && 'active clickable rioglyph rioglyph-ok', disabled && 'disabled', clickable && 'clickable', selectable && 'selectable clickable rioglyph rioglyph-checkbox', deletable && 'deletable clickable rioglyph rioglyph-remove', revertable && 'revertable clickable rioglyph rioglyph-revert', multiline && 'multiline', muted && 'tag-muted', !round && 'rounded', // sounds wrong, but is right
-        props.className) }, { children: (0, jsx_runtime_1.jsx)("div", Object.assign({ className: 'tag-inner' }, { children: children })) })));
-};
-Tag.defaultProps = {
-    active: false,
-    clickable: false,
-    deletable: false,
-    revertable: false,
-    disabled: false,
-    muted: false,
-    round: true,
-    selectable: false,
-};
-Tag.propTypes = {
-    active: prop_types_1.default.bool,
-    className: prop_types_1.default.string,
-    clickable: prop_types_1.default.bool,
-    deletable: prop_types_1.default.bool,
-    revertable: prop_types_1.default.bool,
-    disabled: prop_types_1.default.bool,
-    icon: prop_types_1.default.string,
-    muted: prop_types_1.default.bool,
-    multiline: prop_types_1.default.bool,
-    round: prop_types_1.default.bool,
-    selectable: prop_types_1.default.bool,
-    size: prop_types_1.default.oneOf(['small']),
+const Tag = (props) => {
+    const { children, icon, active = false, disabled = false, clickable = false, selectable = false, deletable = false, revertable = false, multiline = false, muted = false, round = true, size, className } = props, remainingProps = tslib_1.__rest(props, ["children", "icon", "active", "disabled", "clickable", "selectable", "deletable", "revertable", "multiline", "muted", "round", "size", "className"]);
+    const tagClasses = (0, classnames_1.default)('tag', size === 'small' && 'tag-small', icon && `rioglyph ${icon}`, active && 'active clickable rioglyph rioglyph-ok', disabled && 'disabled', clickable && 'clickable', selectable && 'selectable clickable rioglyph rioglyph-checkbox', deletable && 'deletable clickable rioglyph rioglyph-remove', revertable && 'revertable clickable rioglyph rioglyph-revert', multiline && 'multiline', muted && 'tag-muted', !round && 'rounded', // sounds wrong, but is right
+    props.className);
+    return ((0, jsx_runtime_1.jsx)("div", Object.assign({}, remainingProps, { className: tagClasses }, { children: (0, jsx_runtime_1.jsx)("div", Object.assign({ className: 'tag-inner' }, { children: children })) })));
 };
 exports.default = Tag;

package/lib/es/components/tag/TagList.d.ts

@@ -1,17 +1,25 @@
+import { type PropsWithChildren } from 'react';
+export type TagListProps = {
+    /**
+     * Defines if the tag list is rendered inline or vertically.
+     *
+     * @default true
+     */
+    inline?: boolean;
+    /**
+     * Defines if the tag has the same with as it`s parent container.
+     *
+     * @default false
+     */
+    autoTagWidth?: boolean;
+    /**
+     * Possible values are 1-6
+     */
+    tagsPerRow?: 1 | 2 | 3 | 4 | 6;
+    /**
+     * Additional classes to be set on the wrapper element.
+     */
+    className?: string;
+};
+declare const TagList: (props: PropsWithChildren<TagListProps>) => import("react/jsx-runtime").JSX.Element;
 export default TagList;
-declare function TagList(props: any): import("react/jsx-runtime").JSX.Element;
-declare namespace TagList {
-    namespace defaultProps {
-        const inline: boolean;
-        const autoTagWidth: boolean;
-    }
-    namespace propTypes {
-        const inline_1: PropTypes.Requireable<boolean>;
-        export { inline_1 as inline };
-        const autoTagWidth_1: PropTypes.Requireable<boolean>;
-        export { autoTagWidth_1 as autoTagWidth };
-        export const tagsPerRow: any;
-        export const className: PropTypes.Requireable<string>;
-    }
-}
-import PropTypes from "prop-types";

package/lib/es/components/tag/TagList.js

@@ -2,22 +2,13 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = tslib_1.__importDefault(require("react"));
-const prop_types_1 = tslib_1.__importDefault(require("prop-types"));
+// @ts-ignore-next-line importsNotUsedAsValues
+require("react");
 const classnames_1 = tslib_1.__importDefault(require("classnames"));
-const TagList = props => {
-    const { children, inline, autoTagWidth, tagsPerRow } = props, remainingProps = tslib_1.__rest(props, ["children", "inline", "autoTagWidth", "tagsPerRow"]);
+const TagList = (props) => {
+    const { children, inline = true, autoTagWidth = false, tagsPerRow } = props, remainingProps = tslib_1.__rest(props, ["children", "inline", "autoTagWidth", "tagsPerRow"]);
+    const tagListClasses = (0, classnames_1.default)('taglist', !autoTagWidth && 'taglist-autowidth', !inline && 'taglist-vertical', tagsPerRow && 'row display-flex-sm flex-wrap-sm', props.className);
     const wrappedChildren = (0, jsx_runtime_1.jsx)("div", Object.assign({ className: `tags-per-row-${tagsPerRow}` }, { children: children }));
-    return ((0, jsx_runtime_1.jsx)("div", Object.assign({}, remainingProps, { className: (0, classnames_1.default)('taglist', !autoTagWidth && 'taglist-autowidth', !inline && 'taglist-vertical', tagsPerRow && 'row display-flex-sm flex-wrap-sm', props.className) }, { children: tagsPerRow ? wrappedChildren : children })));
-};
-TagList.defaultProps = {
-    inline: true,
-    autoTagWidth: false,
-};
-TagList.propTypes = {
-    inline: prop_types_1.default.bool,
-    autoTagWidth: prop_types_1.default.bool,
-    tagsPerRow: prop_types_1.default.PropTypes.oneOf([1, 2, 3, 4, 6]),
-    className: prop_types_1.default.string,
+    return ((0, jsx_runtime_1.jsx)("div", Object.assign({}, remainingProps, { className: tagListClasses }, { children: tagsPerRow ? wrappedChildren : children })));
 };
 exports.default = TagList;

package/lib/es/components/tagManager/CustomSuggestionItem.d.ts

@@ -1,13 +1,7 @@
+import React from 'react';
+export type CustomSuggestionItemProps = {
+    value?: string | React.ReactNode;
+    placeholder?: string | React.ReactNode;
+};
+declare const CustomSuggestionItem: ({ value, placeholder }: CustomSuggestionItemProps) => import("react/jsx-runtime").JSX.Element;
 export default CustomSuggestionItem;
-declare function CustomSuggestionItem({ value, placeholder }: {
-    value: any;
-    placeholder: any;
-}): import("react/jsx-runtime").JSX.Element;
-declare namespace CustomSuggestionItem {
-    const defaultProps: {};
-    namespace propTypes {
-        const value: PropTypes.Requireable<NonNullable<PropTypes.ReactNodeLike>>;
-        const placeholder: PropTypes.Requireable<NonNullable<PropTypes.ReactNodeLike>>;
-    }
-}
-import PropTypes from "prop-types";

package/lib/es/components/tagManager/CustomSuggestionItem.js

@@ -2,17 +2,12 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = tslib_1.__importDefault(require("react"));
-const prop_types_1 = tslib_1.__importDefault(require("prop-types"));
+// @ts-ignore-next-line importsNotUsedAsValues
+require("react");
 const classnames_1 = tslib_1.__importDefault(require("classnames"));
 const CustomSuggestionItem = ({ value, placeholder }) => {
-    const wrapperClassNames = (0, classnames_1.default)('display-flex align-items-center', 'padding-top-5 padding-bottom-5', !value && 'text-color-gray');
-    const iconClassNames = (0, classnames_1.default)('margin-left--5 margin-right-5 margin-top--1', 'rioglyph', !value ? 'rioglyph-arrow-up' : 'rioglyph-plus');
+    const wrapperClassNames = (0, classnames_1.default)('display-flex align-items-center padding-top-5 padding-bottom-5', !value && 'text-color-gray');
+    const iconClassNames = (0, classnames_1.default)('margin-left--5 margin-right-5 margin-top--1 rioglyph', value ? 'rioglyph-plus' : 'rioglyph-arrow-up');
     return ((0, jsx_runtime_1.jsxs)("span", Object.assign({ className: wrapperClassNames }, { children: [(0, jsx_runtime_1.jsx)("span", { className: iconClassNames }), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: 'text-italic' }, { children: value || placeholder }))] })));
 };
-CustomSuggestionItem.defaultProps = {};
-CustomSuggestionItem.propTypes = {
-    value: prop_types_1.default.oneOfType([prop_types_1.default.string, prop_types_1.default.node]),
-    placeholder: prop_types_1.default.oneOfType([prop_types_1.default.string, prop_types_1.default.node]),
-};
 exports.default = CustomSuggestionItem;

package/lib/es/components/tagManager/TagManager.d.ts

@@ -1,27 +1,62 @@
+import React from 'react';
+import type { TagManagerTag } from './TagManagerTag';
+export type { TagManagerTag } from './TagManagerTag';
+export type TagManagerProps = {
+    /**
+     * The list of existing tags to be listed.
+     */
+    tagList: TagManagerTag[];
+    /**
+     * The list of tags used as suggestions for the built-in AutoSuggest.
+     */
+    tagSuggestions: TagManagerTag[];
+    /**
+     * Callback function triggered when the list of tags changes.
+     *
+     * For instance when a tag was added by the AutoSuggest or when a tag is marked to be deleted.
+     *
+     * This function returns the updated list of tags where tags may have additional properties indicating whether they
+     * have to be removed or added to your data.
+     *
+     * @param newTags The updated list of tags.
+     */
+    onTagListChange?: (newTags: TagManagerTag[]) => void;
+    /**
+     * The placeholder message for the AutoSuggest input.
+     */
+    placeholder?: string;
+    /**
+     * The placeholder message for custom tag in the AutoSuggest dropdown.
+     *
+     * This is only relevant when having custom tags enabled.
+     */
+    customTagPlaceholder?: string;
+    /**
+     * The header message for existing tags in the AutoSuggest dropdown.
+     *
+     * This is only relevant when having custom tags enabled.
+     */
+    dropdownSeparatorText?: string;
+    /**
+     * Enables or disabled to add custom tags from the AutoSuggest dropdown.
+     *
+     * @default true
+     */
+    useCustomTags?: boolean;
+    /**
+     * Define whether the input shall be shown and to allow to select tags.
+     *
+     * @default true
+     */
+    showInput?: boolean;
+    /**
+     * The message to be shown when no tag suggestion could be found for the entered value of the AutoSuggest.
+     */
+    noItemMessage?: string | React.ReactNode;
+    /**
+     * Additional classes to be set on the wrapper element.
+     */
+    className?: string;
+};
+declare const TagManager: (props: TagManagerProps) => import("react/jsx-runtime").JSX.Element;
 export default TagManager;
-declare function TagManager(props: any): import("react/jsx-runtime").JSX.Element;
-declare namespace TagManager {
-    namespace defaultProps {
-        const useCustomTags: boolean;
-        const showInput: boolean;
-    }
-    namespace propTypes {
-        export const tagList: PropTypes.Validator<(PropTypes.InferProps<{
-            label: PropTypes.Requireable<string>;
-        }> | null | undefined)[]>;
-        export const tagSuggestions: PropTypes.Validator<(PropTypes.InferProps<{
-            label: PropTypes.Requireable<string>;
-        }> | null | undefined)[]>;
-        export const onTagListChange: PropTypes.Requireable<(...args: any[]) => any>;
-        export const placeholder: PropTypes.Requireable<string>;
-        export const customTagPlaceholder: PropTypes.Requireable<string>;
-        export const dropdownSeparatorText: PropTypes.Requireable<string>;
-        const useCustomTags_1: PropTypes.Requireable<boolean>;
-        export { useCustomTags_1 as useCustomTags };
-        export const noItemMessage: PropTypes.Requireable<NonNullable<PropTypes.ReactNodeLike>>;
-        const showInput_1: PropTypes.Requireable<boolean>;
-        export { showInput_1 as showInput };
-        export const className: PropTypes.Requireable<string>;
-    }
-}
-import PropTypes from "prop-types";

package/lib/es/components/tagManager/TagManager.js

@@ -2,12 +2,12 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = tslib_1.__importStar(require("react"));
-const prop_types_1 = tslib_1.__importDefault(require("prop-types"));
+const react_1 = require("react");
 const classnames_1 = tslib_1.__importDefault(require("classnames"));
 const isEmpty_1 = tslib_1.__importDefault(require("lodash/fp/isEmpty"));
 const isEqual_1 = tslib_1.__importDefault(require("lodash/fp/isEqual"));
 const compact_1 = tslib_1.__importDefault(require("lodash/fp/compact"));
+const noop_1 = tslib_1.__importDefault(require("lodash/fp/noop"));
 const AutoSuggest_1 = tslib_1.__importDefault(require("../autosuggest/AutoSuggest"));
 const CustomSuggestionItem_1 = tslib_1.__importDefault(require("./CustomSuggestionItem"));
 const TagManagerItemList_1 = tslib_1.__importDefault(require("./TagManagerItemList"));
@@ -16,26 +16,29 @@ const getCustomSuggestion = (value, placeholder) => ({
     label: value,
     disabled: (0, isEmpty_1.default)(value),
 });
-const getSuggestionSeparator = dropdownSeparatorText => ({
+const getSuggestionSeparator = (dropdownSeparatorText) => ({
     header: true,
     label: dropdownSeparatorText,
 });
-const cleanupTagState = tag => {
+const cleanupTagState = (tag) => {
     delete tag.toAdd;
     delete tag.toRemove;
     return tag;
 };
 const hasTagAlreadySelected = (tags, newSuggestion) => !!tags.find(tag => tag.label === newSuggestion.label);
-const getNewSuggestion = suggestion => {
+const getNewSuggestion = (suggestion) => {
     const newSuggestion = suggestion.customSuggestion ? { label: suggestion.label } : suggestion;
     newSuggestion.toAdd = true;
     return newSuggestion;
 };
 const buildSuggestions = (useCustomTags, customTagPlaceholder, dropdownSeparatorText) => (value, suggestions) => {
-    const cleanedSuggestions = suggestions.map(cleanupTagState);
+    const cleanedSuggestions = suggestions.map(cleanupTagState).filter(item => item.label);
     return (0, compact_1.default)([
         useCustomTags && getCustomSuggestion(value, customTagPlaceholder),
-        useCustomTags && !(0, isEmpty_1.default)(cleanedSuggestions) && getSuggestionSeparator(dropdownSeparatorText),
+        useCustomTags &&
+            !(0, isEmpty_1.default)(cleanedSuggestions) &&
+            !(0, isEmpty_1.default)(dropdownSeparatorText) &&
+            getSuggestionSeparator(dropdownSeparatorText),
         ...cleanedSuggestions,
     ]);
 };
@@ -51,31 +54,32 @@ const filterSuggestions = (suggestions, selectedTagNames, value = '') => suggest
         !suggestion.header &&
         !suggestion.customSuggestion);
 });
-const TagManager = props => {
-    const { tagList, tagSuggestions, placeholder, className, customTagPlaceholder, dropdownSeparatorText, onTagListChange, useCustomTags, noItemMessage, showInput } = props, remainingProps = tslib_1.__rest(props, ["tagList", "tagSuggestions", "placeholder", "className", "customTagPlaceholder", "dropdownSeparatorText", "onTagListChange", "useCustomTags", "noItemMessage", "showInput"]);
+const TagManager = (props) => {
+    const { tagList, tagSuggestions, placeholder, className, customTagPlaceholder, dropdownSeparatorText, onTagListChange = noop_1.default, useCustomTags = true, noItemMessage, showInput = true } = props, remainingProps = tslib_1.__rest(props, ["tagList", "tagSuggestions", "placeholder", "className", "customTagPlaceholder", "dropdownSeparatorText", "onTagListChange", "useCustomTags", "noItemMessage", "showInput"]);
     const [tags, setTags] = (0, react_1.useState)(tagList);
     const [inputValue, setInputValue] = (0, react_1.useState)('');
-    const [currentSuggestions, setCurrentSuggestions] = (0, react_1.useState)();
+    const [currentSuggestions, setCurrentSuggestions] = (0, react_1.useState)([]);
     const getSuggestions = buildSuggestions(useCustomTags, customTagPlaceholder, dropdownSeparatorText);
     // Update internal list of tags when they change from the outside i.e. when they have been saved,
     // additionally, cleanup previous state for adding or removing tags
-    (0, react_1.useEffect)(() => setTags(tagList.map(cleanupTagState)), [tagList]);
+    (0, react_1.useEffect)(() => setTags((0, compact_1.default)(tagList.map(cleanupTagState))), [tagList]);
     // build suggestion when passed tag suggestions passed change i.e. when a tag got selected and removed from the list
     (0, react_1.useEffect)(() => setCurrentSuggestions(getSuggestions(inputValue, tagSuggestions)), [tagSuggestions]);
     // build suggestions when input value change as it should filter the list on suggestions
     (0, react_1.useEffect)(() => {
-        const selectedTagNames = tags.map(tag => tag.label);
+        const selectedTagNames = (0, compact_1.default)(tags.map(tag => tag.label));
         const value = inputValue || '';
         const filteredList = filterSuggestions(tagSuggestions, selectedTagNames, value);
         setCurrentSuggestions(getSuggestions(value, filteredList));
     }, [tags, inputValue, tagSuggestions]);
-    const updateTags = updatedTags => {
+    const updateTags = (updatedTags) => {
         setTags(updatedTags);
         // Notify outside component
+        console.log(updatedTags);
         onTagListChange(updatedTags);
     };
     const handleSuggestionsChange = ({ value }) => setInputValue(value);
-    const handleSuggestionSelected = (event, { suggestion }) => {
+    const handleSuggestionSelected = (_, { suggestion }) => {
         setInputValue('');
         const newSuggestion = getNewSuggestion(suggestion);
         if (hasTagAlreadySelected(tags, newSuggestion)) {
@@ -85,7 +89,7 @@ const TagManager = props => {
         updateTags([...tags, newSuggestion]);
     };
     const updateTagsWithSelectedTag = (tagItems, selectedTag) => {
-        const updatedTags = tagItems.map(tag => {
+        return tagItems.map(tag => {
             if ((0, isEqual_1.default)(tag.label, selectedTag.label)) {
                 // update tag and mark as "to remove"
                 if (tag.toRemove) {
@@ -97,9 +101,8 @@ const TagManager = props => {
             }
             return tag;
         });
-        return updatedTags;
     };
-    const handleRemoveFromTagList = selectedTag => {
+    const handleRemoveFromTagList = (selectedTag) => {
         if (selectedTag.toAdd) {
             updateTags(tags.filter(tag => !(0, isEqual_1.default)(tag, selectedTag)));
         }
@@ -113,27 +116,7 @@ const TagManager = props => {
         value: inputValue,
         tabIndex: 1,
     };
-    const autosuggestClasses = (0, classnames_1.default)(!(0, isEmpty_1.default)(tags) && 'margin-bottom-10');
-    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({}, remainingProps, { className: (0, classnames_1.default)('TagManager', className) }, { children: [showInput && ((0, jsx_runtime_1.jsx)(AutoSuggest_1.default, { className: autosuggestClasses, inputProps: inputProps, suggestions: currentSuggestions, onSuggestionSelected: handleSuggestionSelected, onSuggestionsFetchRequested: handleSuggestionsChange, openOnFocus: true, noItemMessage: noItemMessage })), (0, jsx_runtime_1.jsx)(TagManagerItemList_1.default, { tags: tags, onRemoveFromTagList: handleRemoveFromTagList })] })));
-};
-TagManager.defaultProps = {
-    useCustomTags: true,
-    showInput: true,
-};
-TagManager.propTypes = {
-    tagList: prop_types_1.default.arrayOf(prop_types_1.default.shape({
-        label: prop_types_1.default.string,
-    })).isRequired,
-    tagSuggestions: prop_types_1.default.arrayOf(prop_types_1.default.shape({
-        label: prop_types_1.default.string,
-    })).isRequired,
-    onTagListChange: prop_types_1.default.func,
-    placeholder: prop_types_1.default.string,
-    customTagPlaceholder: prop_types_1.default.string,
-    dropdownSeparatorText: prop_types_1.default.string,
-    useCustomTags: prop_types_1.default.bool,
-    noItemMessage: prop_types_1.default.oneOfType([prop_types_1.default.string, prop_types_1.default.node]),
-    showInput: prop_types_1.default.bool,
-    className: prop_types_1.default.string,
+    const autoSuggestClasses = (0, classnames_1.default)(!(0, isEmpty_1.default)(tags) && 'margin-bottom-10');
+    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({}, remainingProps, { className: (0, classnames_1.default)('TagManager', className) }, { children: [showInput && ((0, jsx_runtime_1.jsx)(AutoSuggest_1.default, { className: autoSuggestClasses, inputProps: inputProps, suggestions: currentSuggestions, onSuggestionSelected: handleSuggestionSelected, onSuggestionsFetchRequested: handleSuggestionsChange, openOnFocus: true, noItemMessage: noItemMessage })), (0, jsx_runtime_1.jsx)(TagManagerItemList_1.default, { tags: tags, onRemoveFromTagList: handleRemoveFromTagList })] })));
 };
 exports.default = TagManager;

package/lib/es/components/tagManager/TagManagerItemList.d.ts

@@ -1,14 +1,7 @@
+import type { TagManagerTag } from './TagManagerTag';
+export type TagManagerItemListProps = {
+    tags: TagManagerTag[];
+    onRemoveFromTagList?: (tag: TagManagerTag) => void;
+};
+declare const TagManagerItemList: (props: TagManagerItemListProps) => import("react/jsx-runtime").JSX.Element;
 export default TagManagerItemList;
-declare function TagManagerItemList(props: any): import("react/jsx-runtime").JSX.Element;
-declare namespace TagManagerItemList {
-    const defaultProps: {};
-    namespace propTypes {
-        const tags: PropTypes.Requireable<(PropTypes.InferProps<{
-            label: PropTypes.Requireable<string>;
-            toAdd: PropTypes.Requireable<boolean>;
-            toRemove: PropTypes.Requireable<boolean>;
-        }> | null | undefined)[]>;
-        const onRemoveFromTagList: PropTypes.Requireable<(...args: any[]) => any>;
-    }
-}
-import PropTypes from "prop-types";

package/lib/es/components/tagManager/TagManagerItemList.js

@@ -2,25 +2,15 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = tslib_1.__importDefault(require("react"));
-const prop_types_1 = tslib_1.__importDefault(require("prop-types"));
+require("react");
 const classnames_1 = tslib_1.__importDefault(require("classnames"));
 const TagList_1 = tslib_1.__importDefault(require("../tag/TagList"));
 const Tag_1 = tslib_1.__importDefault(require("../tag/Tag"));
-const TagManagerItemList = props => {
-    const { tags, onRemoveFromTagList } = props;
+const TagManagerItemList = (props) => {
+    const { tags, onRemoveFromTagList = () => { } } = props;
     return ((0, jsx_runtime_1.jsx)(TagList_1.default, Object.assign({ inline: false }, { children: tags.map(tag => {
             const tagClasses = (0, classnames_1.default)(tag.toAdd && 'border-color-success text-color-success', tag.toRemove && 'border-color-danger text-color-danger');
             return ((0, jsx_runtime_1.jsx)(Tag_1.default, Object.assign({ className: tagClasses, deletable: true, round: false, onClick: () => onRemoveFromTagList(tag) }, { children: tag.label }), tag.label));
         }) })));
 };
-TagManagerItemList.defaultProps = {};
-TagManagerItemList.propTypes = {
-    tags: prop_types_1.default.arrayOf(prop_types_1.default.shape({
-        label: prop_types_1.default.string,
-        toAdd: prop_types_1.default.bool,
-        toRemove: prop_types_1.default.bool,
-    })),
-    onRemoveFromTagList: prop_types_1.default.func,
-};
 exports.default = TagManagerItemList;

package/lib/es/components/tagManager/TagManagerTag.d.ts

@@ -0,0 +1,5 @@
+export type TagManagerTag = {
+    label?: string;
+    toAdd?: boolean;
+    toRemove?: boolean;
+};

package/lib/es/components/tagManager/TagManagerTag.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });