@rio-cloud/rio-uikit 0.16.4-beta.25 → 0.16.4-beta.26

package/Colors.d.ts

@@ -1,21 +1 @@
-declare module '@rio-cloud/rio-uikit/Colors' {
-    type Colors = {
-        'gray-darkest': string;
-        'gray-darker': string;
-        'gray-dark': string;
-        gray: string;
-        'gray-light': string;
-        'gray-lighter': string;
-        'gray-lightest': string;
-        'color-highlight-darkest': string;
-        'color-highlight-darker': string;
-        'color-highlight-dark': string;
-        'color-highlight': string;
-        'color-highlight-light': string;
-        'color-highlight-lighter': string;
-        'color-highlight-lightest': string;
-    };
-
-    const colors: Colors;
-    export default colors;
-}
+export { default } from './styles/variables/colors/colors.json';

package/Colors.js

@@ -1,2 +1 @@
-import _colors from './styles/variables/colors/colors.json';
-export { _colors as default };
+export { default } from './styles/variables/colors/colors.json';

package/Multiselect.d.ts

@@ -1,12 +1,2 @@
-import React from 'react';
-import { MultiselectProps, MultiselectOption } from './types';
-
-export { MultiselectOption } from './types';
-export { MultiselectCounterMessage } from './types';
-
-export default class Multiselect<T extends MultiselectOption> extends React.Component<MultiselectProps<T>> {
-    static SIZE_SM = 'sm';
-    static SIZE_LG = 'lg';
-    static SIZE_SMALL = 'small';
-    static SIZE_LARGE = 'large';
-}
+export { default } from './components/selects/Multiselect';
+export * from './components/selects/Multiselect';

package/Multiselect.js

@@ -1,2 +1,2 @@
-import { default as _Multiselect } from './components/selects/Multiselect';
-export { _Multiselect as default };
+export { default } from './components/selects/Multiselect';
+export * from './components/selects/Multiselect';

package/Select.d.ts

@@ -1,5 +1,2 @@
-import React from 'react';
-import { SelectProps } from './types';
-
-export { SelectOption } from './types';
-export default class Select<T extends SelectOption> extends React.Component<SelectProps<T>> {}
+export { default } from './components/selects/Select';
+export * from './components/selects/Select';

package/Select.js

@@ -1,2 +1,2 @@
-import { default as _Select } from './components/selects/Select';
-export { _Select as default };
+export { default } from './components/selects/Select';
+export * from './components/selects/Select';

package/components/applicationLayout/ApplicationLayoutBody.d.ts

@@ -7,7 +7,7 @@ export type ApplicationLayoutBodyProps = {
     enableScrollToTop?: boolean;
     /**
      * Always show vertical scrollbar to prevent the content from jumping.
-     * @default false
+     * @default true
      */
     forceScrollbar?: boolean;
     /**

package/components/applicationLayout/ApplicationLayoutBody.js

@@ -3,10 +3,11 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { useState, useRef, useEffect, forwardRef, useImperativeHandle, } from 'react';
 import debounce from 'lodash/fp/debounce';
 import classNames from 'classnames';
+import SmoothScrollbars from '../smoothScrollbars/SmoothScrollbars';
 const RESIZE_THROTTLING = 200;
 const DEFAULT_BOTTOM_BAR_HEIGHT = 54;
 const ApplicationLayoutBody = forwardRef((props, ref) => {
-    const { className, innerClassName, forceScrollbar = false, enableScrollToTop = true, banner, navigation, bottomBar, bottomBarHeight = DEFAULT_BOTTOM_BAR_HEIGHT, children } = props, remainingProps = __rest(props, ["className", "innerClassName", "forceScrollbar", "enableScrollToTop", "banner", "navigation", "bottomBar", "bottomBarHeight", "children"]);
+    const { className, innerClassName, forceScrollbar = true, enableScrollToTop = true, banner, navigation, bottomBar, bottomBarHeight = DEFAULT_BOTTOM_BAR_HEIGHT, children } = props, remainingProps = __rest(props, ["className", "innerClassName", "forceScrollbar", "enableScrollToTop", "banner", "navigation", "bottomBar", "bottomBarHeight", "children"]);
     const [offset, setOffset] = useState(0);
     const moduleContentRef = useRef(null);
     const layoutBodyRef = useRef(null);
@@ -19,24 +20,31 @@ const ApplicationLayoutBody = forwardRef((props, ref) => {
     }, [bottomBarHeight]);
     const handleScroll = debounce(RESIZE_THROTTLING)(() => {
         if (moduleContentRef.current) {
-            setOffset(moduleContentRef.current.scrollTop);
+            setOffset(moduleContentRef.current.getScrollTop());
         }
     });
     const handleToTop = () => {
+        var _a;
         if (!moduleContentRef.current) {
             return;
         }
-        const currentScroll = moduleContentRef.current.scrollTop;
+        const scrollWrapper = moduleContentRef.current.container;
+        const scrollingElement = scrollWrapper.firstElementChild;
+        const currentScroll = (_a = scrollingElement === null || scrollingElement === void 0 ? void 0 : scrollingElement.scrollTop) !== null && _a !== void 0 ? _a : 0;
         if (currentScroll > 0) {
             window.requestAnimationFrame(handleToTop);
-            moduleContentRef.current.scrollTo(0, currentScroll - currentScroll / 5);
+            scrollingElement === null || scrollingElement === void 0 ? void 0 : scrollingElement.scrollTo(0, currentScroll - currentScroll / 5);
+            scrollWrapper.classList.add('is-scrolling-to-top');
             setOffset(currentScroll);
         }
+        else {
+            scrollWrapper.classList.remove('is-scrolling-to-top');
+        }
     };
     const classes = classNames('ApplicationLayoutBody', bottomBar && 'has-footer', className);
-    const innerClasses = classNames('module-content', forceScrollbar && 'overflow-y-scroll', innerClassName && innerClassName);
+    const innerClasses = classNames('module-content', innerClassName && innerClassName);
     const offsetThreshold = window.innerHeight * 0.1;
     const scrollToTopClasses = classNames('scroll-to-top', offset > offsetThreshold && 'in');
-    return (_jsxs(React.Fragment, { children: [_jsxs("div", Object.assign({}, remainingProps, { ref: layoutBodyRef, className: classes }, { children: [_jsxs("div", Object.assign({ className: 'module-content-wrapper' }, { children: [navigation && navigation, banner && banner, _jsx("div", Object.assign({ className: innerClasses, onScroll: handleScroll, ref: moduleContentRef }, { children: children }))] })), enableScrollToTop && (_jsx("span", Object.assign({ className: scrollToTopClasses }, { children: _jsx("button", Object.assign({ type: 'button', className: 'btn btn-primary btn-icon-only', onClick: handleToTop }, { children: _jsx("span", { className: 'rioglyph rioglyph-arrow-up' }) })) })))] })), bottomBar && bottomBar] }));
+    return (_jsxs(React.Fragment, { children: [_jsxs("div", Object.assign({}, remainingProps, { ref: layoutBodyRef, className: classes }, { children: [_jsxs("div", Object.assign({ className: 'module-content-wrapper' }, { children: [navigation && navigation, banner && banner, _jsx(SmoothScrollbars, Object.assign({ ref: moduleContentRef, slideIn: !forceScrollbar, largeTrack: true, trackOffset: true, className: innerClasses, onScroll: handleScroll }, { children: children }))] })), enableScrollToTop && (_jsx("span", Object.assign({ className: scrollToTopClasses }, { children: _jsx("button", Object.assign({ type: 'button', className: 'btn btn-primary btn-icon-only', onClick: handleToTop }, { children: _jsx("span", { className: 'rioglyph rioglyph-arrow-up' }) })) })))] })), bottomBar && bottomBar] }));
 });
 export default ApplicationLayoutBody;

package/components/assetTree/AssetTree.js

@@ -12,6 +12,7 @@ import TreeSidebar from './TreeSidebar';
 import getWidthInBoundaries from '../../utils/getWidthInBoundaries';
 import mergeRefs from '../../utils/mergeRefs';
 import usePrevious from '../../usePrevious';
+import SmoothScrollbars from '../smoothScrollbars/SmoothScrollbars';
 const DEFAULT_WIDTH = 350;
 const DEFAULT_MIN_WIDTH = 100;
 const DEFAULT_MAX_WIDTH = 0;
@@ -99,7 +100,7 @@ const AssetTree = memo(forwardRef((props, ref) => {
         setIsResize(false);
         onResizeEnd();
     };
-    return (_jsxs("div", Object.assign({}, remainingProps, { className: classes, style: style, ref: mergedRefs }, { children: [_jsx("div", { className: resizeLimitClasses, style: resizeLimitStyle }), _jsxs("div", Object.assign({ className: 'AssetTreeContent' }, { children: [_jsx(TreeSidebar, Object.assign({ onSelectCategory: handleSelectCategory, currentCategoryId: currentCategoryId, onClick: handleToggleTreeContent }, { children: isArray(children) ? children : [children] })), _jsx("div", Object.assign({ className: 'AssetTreeBody' }, { children: useOffscreen ? renderTreesOffscreen(childrenArray, currentCategoryId) : category }))] })), resizable && isOpen && (_jsx(Resizer, { onResizeStart: handleResizeStart, onResize: handleResize, onResizeEnd: handleResizeEnd, direction: Resizer.HORIZONTAL, position: Resizer.RIGHT }))] })));
+    return (_jsxs("div", Object.assign({}, remainingProps, { className: classes, style: style, ref: mergedRefs }, { children: [_jsx("div", { className: resizeLimitClasses, style: resizeLimitStyle }), _jsxs("div", Object.assign({ className: 'AssetTreeContent' }, { children: [_jsx(TreeSidebar, Object.assign({ onSelectCategory: handleSelectCategory, currentCategoryId: currentCategoryId, onClick: handleToggleTreeContent }, { children: isArray(children) ? children : [children] })), _jsx(SmoothScrollbars, Object.assign({ slideIn: true, className: 'AssetTreeBody' }, { children: useOffscreen ? renderTreesOffscreen(childrenArray, currentCategoryId) : category }))] })), resizable && isOpen && (_jsx(Resizer, { onResizeStart: handleResizeStart, onResize: handleResize, onResizeEnd: handleResizeEnd, direction: Resizer.HORIZONTAL, position: Resizer.RIGHT }))] })));
 }));
 AssetTree.displayName = 'AssetTree';
 Object.assign(AssetTree, TreeMode);

package/components/assetTree/Tree.js

@@ -256,7 +256,7 @@ const Tree = React.memo((props) => {
     const hasSearchAndNoGroups = hasInternalSearchValue() && isEmpty(state.groupedItems) && hasExternalGroups;
     const hideSelectAll = hasSearchAndNoItems || hasSearchAndNoGroups;
     const isIndeterminate = hasPartiallySelectedGroups() || hasPartiallySelectedItems();
-    const treeClassNames = classNames('Tree', 'overflow-x-hidden', className);
+    const treeClassNames = classNames('Tree', className);
     const treeHeadClasses = classNames('TreeHead', 'display-flex gap-5', 'padding-15');
     const shouldRenderTree = () => hasGroups() && !hasInternalSearchValue();
     const content = cond([

package/components/editableContent/EditableContent.js

@@ -99,7 +99,7 @@ const EditableContent = (props) => {
     }
     const textWrapperClasses = classNames(className, isEditMode && 'opacity-0');
     const overlayWrapperClasses = classNames('EditableContentEditor', 'display-flex gap-5', 'padding-5', 'rounded', 'shadow-accent', 'z-index-max', 'bg-white', editorClassName);
-    const inputWrapperClasses = classNames('display-flex flex-column gap-5', 'margin-0', !hasCustomControl && 'form-group has-feedback', hasError && 'has-error');
+    const inputWrapperClasses = classNames('display-flex flex-column gap-5', 'margin-0', 'form-group has-feedback', hasError && 'has-error');
     const inputClasses = classNames('form-control', size === 'lg' && 'input-lg', inputClassName);
     const inputStyle = {
         minWidth: '100px',

package/components/map/components/features/ContextMenu.js

@@ -3,7 +3,9 @@ import { useContext, useRef, useLayoutEffect } from 'react';
 import isEmpty from 'lodash/fp/isEmpty';
 import { MapContext } from '../context';
 const HERE_ITEM_CLASS = 'H_context_menu_item';
-const centeredSpinner = '<div class="flex-1-1 display-flex justify-content-center align-items-center"><div class="spinner"></div></div>';
+const centeredSpinner = 
+// eslint-disable-next-line max-len
+'<svg aria-labelledby="ggtrwic-aria" role="img" height="14" width="135px" class="ContentLoader  use-mix-blend-mode"><title id="ggtrwic-aria">Loading...</title><rect role="presentation" x="0" y="0" width="100%" height="100%" clip-path="url(#ggtrwic-diff)" style="fill: url(&quot;#ggtrwic-animated-diff&quot;);"></rect><defs><clipPath id="ggtrwic-diff"><rect width="100%" height="100%" rx="3" ry="3"></rect></clipPath><linearGradient id="ggtrwic-animated-diff"><stop offset="0%" stop-color="#f5f6f7" stop-opacity="1"><animate attributeName="offset" values="-2; -2; 1" keyTimes="0; 0.25; 1" dur="2s" repeatCount="indefinite"></animate></stop><stop offset="50%" stop-color="#aaaaaa" stop-opacity="1"><animate attributeName="offset" values="-1; -1; 2" keyTimes="0; 0.25; 1" dur="2s" repeatCount="indefinite"></animate></stop><stop offset="100%" stop-color="#f5f6f7" stop-opacity="1"><animate attributeName="offset" values="0; 0; 3" keyTimes="0; 0.25; 1" dur="2s" repeatCount="indefinite"></animate></stop></linearGradient></defs></svg>';
 const getDOMMenuItems = () => document.getElementsByClassName(HERE_ITEM_CLASS);
 // Query DOM nodes for "H_context_menu_item" and update label when children label has changed.
 // This function allows to use HTML markup for the menu items in the second render

package/components/selects/BaseSelectDropdown.d.ts

@@ -0,0 +1,56 @@
+import React from 'react';
+export type OptionDOMValue = {
+    id: string;
+    text: string;
+};
+export type SelectOption = {
+    /**
+     * Used to identify an option
+     */
+    id: string;
+    /**
+     * The option item text
+     */
+    label: string | React.ReactNode;
+    /**
+     * Icon to be displayed in front of the label
+     */
+    icon?: React.ReactNode;
+    /**
+     * Defines whether the menu item is selected or not
+     *
+     * @default false
+     */
+    selected?: boolean;
+    /**
+     * Setting "disabled" to true will disable the respective item
+     *
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Will treat the given value as a menu header
+     */
+    header?: boolean;
+};
+export type BaseSelectDropdownProps = {
+    options?: SelectOption[];
+    isOpen?: boolean;
+    updateDOMValues?: (values: OptionDOMValue[] | undefined) => void;
+    onOpen?: (hasDropup: boolean) => void;
+    onSelect?: (selectedItem: SelectOption | undefined) => void;
+    onClose?: () => void;
+    placeholder?: string | React.ReactNode;
+    dropup?: boolean;
+    pullRight?: boolean;
+    autoDropDirection?: boolean;
+    noItemMessage?: string | React.ReactNode;
+    focusedItemIndex?: number;
+    dropdownClassName?: string;
+    requestItemDOMValues?: boolean;
+    keyboardUsed?: boolean;
+    useActiveClass?: boolean;
+};
+declare const BaseSelectDropdown: (props: BaseSelectDropdownProps) => import("react/jsx-runtime").JSX.Element;
+export declare const filterOptions: (itemDOMValues: OptionDOMValue[], filterValue: string, options: SelectOption[]) => SelectOption[];
+export default BaseSelectDropdown;

package/components/selects/BaseSelectDropdown.js

@@ -0,0 +1,176 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// @ts-ignore-next-line importsNotUsedAsValues
+import { useState, useRef, useLayoutEffect } from 'react';
+import classNames from 'classnames';
+import isEmpty from 'lodash/fp/isEmpty';
+import noop from 'lodash/fp/noop';
+import { useDropDirection } from '../../utils/useDropDirection';
+import { scrollItemIntoView, UP, DOWN } from '../../utils/scrollItemIntoView';
+import useEffectOnce from '../../hooks/useEffectOnce';
+import useKey from '../../useKey';
+import DropdownHeader from './DropdownHeader';
+import NoItemMessage from './NoItemMessage';
+const DATA_ATTRIBUTE_ID = 'data-item-id';
+const DEFAULT_FOCUSED_ITEM_INDEX = 0;
+const HIGHLIGHT_CLASS = 'focus';
+const BaseSelectDropdown = (props) => {
+    const { isOpen = false, updateDOMValues = noop, onOpen = noop, onSelect = noop, onClose = noop, options = [], autoDropDirection = true, dropup = false, pullRight = false, useActiveClass = false, focusedItemIndex: externalFocusedItemIndex, keyboardUsed: externalKeyboardUsed, noItemMessage, dropdownClassName, } = props;
+    const [focusedItemIndex, setFocusedItemIndex] = useState(externalFocusedItemIndex || DEFAULT_FOCUSED_ITEM_INDEX);
+    const [keyboardUsed, setKeyboardUsed] = useState(externalKeyboardUsed);
+    const dropdownMenuRef = useRef(null);
+    useEffectOnce(() => {
+        // all available items need to be rendered in order to know their DOM value
+        // which will be used for filtering in the parent component
+        const currentItemDOMValues = updateItemDOMValues();
+        updateDOMValues(currentItemDOMValues);
+    });
+    // Overwrite position of dropdown menu in case auto drop is enabled
+    const dropDirection = useDropDirection({ pullRight, dropup, autoDropDirection, dropdownMenuRef }, [isOpen]);
+    // Add or remove the "dropup" class from the parent Select/Multiselect component to position
+    // the dropdown element accordingly via CSS
+    useLayoutEffect(() => {
+        if (dropdownMenuRef.current) {
+            const parent = dropdownMenuRef.current.parentElement;
+            if (dropDirection.dropup) {
+                parent === null || parent === void 0 ? void 0 : parent.classList.add('dropup');
+            }
+            else {
+                parent === null || parent === void 0 ? void 0 : parent.classList.remove('dropup');
+            }
+        }
+    }, [dropDirection, dropdownMenuRef]);
+    // update internal state for isOpen
+    const [previousIsOpen, setPreviousIsOpen] = useState(isOpen);
+    if (isOpen && !previousIsOpen) {
+        onOpen(dropDirection.dropup);
+        setPreviousIsOpen(isOpen);
+    }
+    else if (!isOpen && previousIsOpen) {
+        onClose();
+        setPreviousIsOpen(isOpen);
+    }
+    useKey(event => {
+        if (isOpen) {
+            switch (event.key) {
+                case 'Escape': {
+                    // close dropdown on esc
+                    onClose();
+                    break;
+                }
+                case 'Tab': {
+                    // close dropdown on tab
+                    onClose();
+                    break;
+                }
+                case 'Enter': {
+                    // select item on enter
+                    selectOptionOnEnter(event);
+                    break;
+                }
+                case 'ArrowUp': {
+                    // prevent scrolling the page when dropdown menu is open
+                    event.preventDefault();
+                    // select item above on arrow up key
+                    focusOption(UP);
+                    scrollItemIntoView(UP, dropdownMenuRef.current, getFocusedOptionNode());
+                    break;
+                }
+                case 'ArrowDown': {
+                    // prevent scrolling the page when dropdown menu is open
+                    event.preventDefault();
+                    // select item below on arrow down key
+                    focusOption(DOWN);
+                    scrollItemIntoView(DOWN, dropdownMenuRef.current, getFocusedOptionNode());
+                    break;
+                }
+                default:
+                    break;
+            }
+        }
+    });
+    const focusOption = (direction) => {
+        let nextFocusedItem = 0;
+        switch (direction) {
+            case UP: {
+                nextFocusedItem = focusedItemIndex <= 0 ? focusedItemIndex : focusedItemIndex - 1;
+                break;
+            }
+            case DOWN: {
+                nextFocusedItem = focusedItemIndex === options.length - 1 ? focusedItemIndex : focusedItemIndex + 1;
+                break;
+            }
+            default:
+                break;
+        }
+        // In case the next item index is negative, means outside the bounds of the items,
+        // reset it depending on the current direction
+        const indexLimit = direction === UP ? options.length - 1 : 0;
+        setFocusedItemIndex(nextFocusedItem < 0 ? indexLimit : nextFocusedItem);
+        setKeyboardUsed(true);
+    };
+    const getOptionNodes = () => {
+        const node = dropdownMenuRef.current;
+        return (node === null || node === void 0 ? void 0 : node.getElementsByTagName('a')) || [];
+    };
+    const updateItemDOMValues = () => {
+        if (dropdownMenuRef.current) {
+            const optionNodes = getOptionNodes();
+            const itemDOMValuesMapped = [...optionNodes].map(item => {
+                return {
+                    id: item.getAttribute(DATA_ATTRIBUTE_ID),
+                    text: item.textContent,
+                };
+            });
+            return itemDOMValuesMapped;
+        }
+    };
+    const getFocusedOptionNode = () => {
+        const optionNodes = getOptionNodes();
+        return [...optionNodes].find(item => item.className.includes(HIGHLIGHT_CLASS));
+    };
+    const selectOptionOnEnter = (event) => {
+        event.preventDefault();
+        // When no filter result was found, avoid selecting anything
+        if (isEmpty(options)) {
+            return;
+        }
+        const match = getFocusedOptionNode();
+        if (match) {
+            const selectedItem = options.find(option => option.id === match.getAttribute(DATA_ATTRIBUTE_ID));
+            onSelect(selectedItem);
+        }
+    };
+    const handleOptionChange = (event) => {
+        event.preventDefault();
+        const optionId = event.currentTarget.getElementsByTagName('input')[0].value;
+        const selectedItem = options.find(option => option.id === optionId);
+        onSelect(selectedItem);
+    };
+    const dropdownMenuClasses = classNames('dropdown-menu', dropDirection.pullRight && 'pull-right', dropdownClassName);
+    // Don't show the dropdown, when no match are found when filtering unless there is a not found message
+    if (isEmpty(options)) {
+        return _jsx(NoItemMessage, { noItemMessage: noItemMessage, className: dropdownMenuClasses });
+    }
+    return (_jsx("ul", Object.assign({ className: dropdownMenuClasses, ref: dropdownMenuRef, role: 'menu' }, { children: options.map((option, index) => {
+            if (option.header) {
+                return _jsx(DropdownHeader, { icon: option.icon, label: option.label }, option.id);
+            }
+            // Show focused style only when keyboard is in use
+            const anchorClassNames = classNames('display-flex align-items-center', keyboardUsed && focusedItemIndex === index ? HIGHLIGHT_CLASS : '', option.disabled && 'pointer-events-none');
+            const wrapperClassNames = classNames(option.disabled && 'disabled', useActiveClass && option.selected && 'active');
+            return (_jsx("li", Object.assign({ className: wrapperClassNames, role: 'listitem' }, { children: _jsxs("a", Object.assign({ role: 'menuitem', className: anchorClassNames, "data-item-id": option.id, "data-item-index": index, 
+                    // Note, we need to assign the click callback only when it's not disabled
+                    // otherwise the functions is still triggered
+                    // biome-ignore lint/a11y/useValidAnchor: due to old structure and backwards compatibility
+                    onClick: option.disabled ? undefined : handleOptionChange }, { children: [_jsxs("span", { children: [option.icon && _jsx("span", Object.assign({ className: 'margin-right-5' }, { children: option.icon })), option.label] }), _jsx("input", { type: 'hidden', value: option.id })] })) }), option.id));
+        }) })));
+};
+export const filterOptions = (itemDOMValues, filterValue, options) => {
+    const filteredDOMValues = itemDOMValues.filter(item => item.text.toLowerCase().includes(filterValue.toLowerCase()));
+    // Filter the options according to the filtered DOM values and map the IDs since the filter cannot be done
+    // on the options itself as they might contain arbitrary components
+    return options.filter(option => {
+        return filteredDOMValues.find(domValue => domValue.id === option.id);
+    });
+};
+export default BaseSelectDropdown;

package/components/selects/ClearButton.d.ts

@@ -0,0 +1,8 @@
+import type { SelectOption } from './Select';
+export type ClearButtonProps = {
+    showClear: boolean;
+    selectedItem: SelectOption | null;
+    onClear: () => void;
+};
+declare const ClearButton: (props: ClearButtonProps) => import("react/jsx-runtime").JSX.Element;
+export default ClearButton;

package/components/selects/ClearButton.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+// @ts-ignore-next-line importsNotUsedAsValues
+import 'react';
+import classNames from 'classnames';
+import isNil from 'lodash/fp/isNil';
+const ClearButton = (props) => {
+    const { showClear, selectedItem, onClear } = props;
+    const clearButtonClassNames = classNames('clearButton', (!showClear || isNil(selectedItem)) && 'hide pointer-events-none');
+    return (_jsx("span", Object.assign({ className: clearButtonClassNames, onClick: onClear }, { children: _jsx("span", { className: 'clearButtonIcon rioglyph rioglyph-remove-sign' }) })));
+};
+export default ClearButton;

package/components/selects/DropdownHeader.d.ts

@@ -1,14 +1,8 @@
+import React from 'react';
+export type DropdownHeaderProps = {
+    icon?: React.ReactNode;
+    center?: boolean;
+    label: string | React.ReactNode;
+};
+declare const DropdownHeader: (props: DropdownHeaderProps) => import("react/jsx-runtime").JSX.Element;
 export default DropdownHeader;
-declare function DropdownHeader(props: any): import("react/jsx-runtime").JSX.Element;
-declare namespace DropdownHeader {
-    namespace defaultProps {
-        const center: boolean;
-    }
-    namespace propTypes {
-        export const icon: PropTypes.Requireable<string>;
-        const center_1: PropTypes.Requireable<boolean>;
-        export { center_1 as center };
-        export const label: PropTypes.Requireable<NonNullable<PropTypes.ReactNodeLike>>;
-    }
-}
-import PropTypes from "prop-types";

package/components/selects/DropdownHeader.js

@@ -1,16 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React from 'react';
-import PropTypes from 'prop-types';
-const DropdownHeader = props => {
-    const { icon, label, center } = props;
+// @ts-ignore-next-line importsNotUsedAsValues
+import 'react';
+const DropdownHeader = (props) => {
+    const { icon, label, center = true } = props;
     return (_jsx("li", Object.assign({ className: `dropdown-header ${center ? 'center' : ''}` }, { children: _jsxs("span", Object.assign({ className: 'dropdown-header-text' }, { children: [icon && _jsx("span", Object.assign({ className: 'margin-right-5' }, { children: icon })), label] })) })));
 };
-DropdownHeader.defaultProps = {
-    center: true,
-};
-DropdownHeader.propTypes = {
-    icon: PropTypes.string,
-    center: PropTypes.bool,
-    label: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
-};
 export default DropdownHeader;