@rio-cloud/rio-uikit 0.16.4-beta.8 → 1.0.0

package/components/selects/BaseSelectDropdown.js

@@ -0,0 +1,175 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// @ts-ignore-next-line importsNotUsedAsValues
+import { useLayoutEffect, useRef, useState } from 'react';
+import classNames from 'classnames';
+import isEmpty from 'lodash/fp/isEmpty';
+import noop from 'lodash/fp/noop';
+import { useDropDirection } from '../../utils/useDropDirection';
+import { DOWN, scrollItemIntoView, UP } 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();
+            return [...optionNodes].map(item => {
+                return {
+                    id: item.getAttribute(DATA_ATTRIBUTE_ID),
+                    text: item.textContent,
+                };
+            });
+        }
+    };
+    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;

package/components/selects/Multiselect.d.ts

@@ -1,98 +1,150 @@
-export class Multiselect extends React.Component<any, any, any> {
-    constructor(props: any);
-    state: {
-        isOpen: boolean;
-        selectedItems: any;
-        isFilterActive: boolean;
-        filterValue: string;
-        filteredOptions: any;
-        itemDOMValues: never[];
-        keyboardUsed: boolean;
-    };
-    onToggle(event: any): void;
-    handleClickOutside(): void;
-    handleFilterChange(event: any): void;
-    onOptionChange(event: any, selectedItem: any): void;
-    updateDOMValues(itemDOMValues: any): void;
-    closeMenu(): void;
-    onOpenMenu(dropup: any): void;
-    handleToggleKeyDown(event: any): void;
-    UNSAFE_componentWillMount(): void;
-    UNSAFE_componentWillReceiveProps(nextProps: any): void;
-    updateSelectedItems(options: any, value: any): void;
-    render(): import("react/jsx-runtime").JSX.Element;
-    multiselectWrapper: HTMLDivElement | null | undefined;
-    buildSelectionRepresentation(options: any): import("react/jsx-runtime").JSX.Element | "";
-    renderCounterMessage(selectedItems: any, counterMessage: any, renderCounterMessage: any): any;
-    isItemSelected(item: any): boolean;
-    renderSelectionItem(item: any, index: any): import("react/jsx-runtime").JSX.Element;
-    renderSelection(): any;
-    renderPlaceholder(placeholder: any): import("react/jsx-runtime").JSX.Element;
-    renderToggle(): import("react/jsx-runtime").JSX.Element;
-    refToggle: HTMLDivElement | null | undefined;
-    renderDropdownMenu(): import("react/jsx-runtime").JSX.Element;
-    renderFilterInput(): import("react/jsx-runtime").JSX.Element;
-    filterOptions(itemDOMValues: any, filterValue: any, options: any): any;
-    updateSelection(selectedItemId: any): any;
-    removeSelectedItem(event: any, itemId: any): void;
-    isAutoDropActive(): boolean;
-}
-export namespace Multiselect {
-    namespace defaultProps {
-        function onChange(): void;
-        const options: never[];
-        const selectedItems: never[];
-        const disabled: boolean;
-        const pullRight: boolean;
-        const hasError: boolean;
-        const useFilter: boolean;
-        const tabIndex: number;
-        const showSelectedItemIcon: boolean;
-        const showUnselectedItemIcons: boolean;
-    }
-    namespace propTypes {
-        export const id: PropTypes.Requireable<string>;
-        export const name: PropTypes.Requireable<string>;
-        const options_1: PropTypes.Requireable<(PropTypes.InferProps<{
-            id: PropTypes.Validator<string>;
-            label: PropTypes.Validator<NonNullable<NonNullable<PropTypes.ReactNodeLike>>>;
-            icon: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-            selected: PropTypes.Requireable<boolean>;
-            disabled: PropTypes.Requireable<boolean>;
-            header: PropTypes.Requireable<boolean>;
-        }> | null | undefined)[]>;
-        export { options_1 as options };
-        const onChange_1: PropTypes.Requireable<(...args: any[]) => any>;
-        export { onChange_1 as onChange };
-        export const placeholder: PropTypes.Requireable<NonNullable<PropTypes.ReactNodeLike>>;
-        export const dropup: PropTypes.Requireable<boolean>;
-        const pullRight_1: PropTypes.Requireable<boolean>;
-        export { pullRight_1 as pullRight };
-        export const autoDropDirection: PropTypes.Requireable<boolean>;
-        export const value: PropTypes.Requireable<any[]>;
-        export const bsSize: PropTypes.Requireable<string>;
-        const disabled_1: PropTypes.Requireable<boolean>;
-        export { disabled_1 as disabled };
-        export const className: PropTypes.Requireable<string>;
-        const tabIndex_1: PropTypes.Requireable<number>;
-        export { tabIndex_1 as tabIndex };
-        const hasError_1: PropTypes.Requireable<boolean>;
-        export { hasError_1 as hasError };
-        const useFilter_1: PropTypes.Requireable<boolean>;
-        export { useFilter_1 as useFilter };
-        export const noItemMessage: PropTypes.Requireable<NonNullable<PropTypes.ReactNodeLike>>;
-        export const counterMessage: PropTypes.Requireable<PropTypes.InferProps<{
-            one: PropTypes.Validator<NonNullable<NonNullable<PropTypes.ReactNodeLike>>>;
-            many: PropTypes.Validator<NonNullable<NonNullable<PropTypes.ReactNodeLike>>>;
-        }>>;
-        export const renderCounterMessage: PropTypes.Requireable<(...args: any[]) => any>;
-        const showSelectedItemIcon_1: PropTypes.Requireable<boolean>;
-        export { showSelectedItemIcon_1 as showSelectedItemIcon };
-        const showUnselectedItemIcons_1: PropTypes.Requireable<boolean>;
-        export { showUnselectedItemIcons_1 as showUnselectedItemIcons };
-    }
-}
-declare const _default: any;
-export default _default;
-import React from "react";
-import PropTypes from "prop-types";
+import React from 'react';
+import { type SelectOption } from './BaseSelectDropdown';
+import { type WithFeedbackAndAddonProps } from './WithFeedbackAndAddon';
+export type MultiselectCounterMessage = {
+    /**
+     * Text that will be used when a single item is selected.
+     */
+    one: string | React.ReactNode;
+    /**
+     * Text that will be used when multiple item are selected.
+     */
+    many: string | React.ReactNode;
+};
+export type MultiselectOption = SelectOption & {};
+export type MultiselectProps<T extends MultiselectOption> = Omit<WithFeedbackAndAddonProps, 'bsSize'> & {
+    /**
+     * Passed through as HTML attribute to the toggle button.
+     */
+    name?: string;
+    /**
+     * Passed as HTML attribute to the toggle button.
+     *
+     * @default Uses the value given to `name` if not provided explicitly.
+     */
+    id?: string;
+    /**
+     * Items to display in the dropdown menu.
+     *
+     * @default []
+     */
+    options?: T[];
+    /**
+     * Sets the ids of the selected options when the component is already mounted.
+     */
+    value?: string[];
+    /**
+     * Callback function triggered when an item is selected.
+     *
+     * @param selectedItemIds Array containing all the IDs that have been selected.
+     *
+     * @default () => {}
+     */
+    onChange?: (selectedItemIds: string[]) => void;
+    /**
+     * Text to display when nothing is selected.
+     */
+    placeholder?: string | React.ReactNode;
+    /**
+     * Defines whether the dropdown opens upwards.
+     *
+     * Set to `true` additionally disables autoDrop feature.
+     *
+     * @default false
+     */
+    dropup?: boolean;
+    /**
+     * Defines whether the dropdown opens right aligned to the dropdown toggle.
+     *
+     * Set to 'true' additionally disables autoDrop feature.
+     *
+     * @default false
+     */
+    pullRight?: boolean;
+    /**
+     * Enables or disables the autoDrop positioning feature.
+     *
+     * When enabled, the option list opens below or above the input depending on the surrounding space.
+     *
+     * @default true
+     */
+    autoDropDirection?: boolean;
+    /**
+     * Defines the size of the select to be rendered.
+     *
+     * @default 'md'
+     */
+    bsSize?: 'sm' | 'md' | 'lg';
+    /**
+     * Option to disable the opening of the option list.
+     *
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Sets the input's tabindex attribute.
+     *
+     * The tabindex attribute allows developers to make HTML elements focusable, allow or prevent them from being
+     * sequentially focusable (usually with the Tab key, hence the name) and determine their relative ordering for
+     * sequential focus navigation.
+     *
+     * @default 0
+     */
+    tabIndex?: number;
+    /**
+     * Defines whether the Bootstrap error classes shall be added to the toggle element.
+     *
+     * @default false
+     */
+    hasError?: boolean;
+    /**
+     * Defines whether the selected items wrap around within the dropdown toggle.
+     *
+     * @default false
+     */
+    multiline?: boolean;
+    /**
+     * Defines whether the component should be filterable.
+     *
+     * @default false
+     */
+    useFilter?: boolean;
+    /**
+     * Text that shall be shown when not match was found when filtering.
+     */
+    noItemMessage?: string | React.ReactNode;
+    /**
+     * Object that will render the number of selected items instead of individual items.
+     *
+     * Using this prop will disable the filter functionality.
+     */
+    counterMessage?: MultiselectCounterMessage;
+    /**
+     * Optional render function that is used to render the message how many items have been selected.
+     *
+     * Using this prop will disable the filter functionality.
+     *
+     * @param selectedAmount The total amount of selected items.
+     */
+    renderCounterMessage?: (selectedAmount: number) => React.ReactNode;
+    /**
+     * Set to show only the icon and not the label of selected item.
+     *
+     * @default false
+     */
+    showSelectedItemIcon?: boolean;
+    /**
+     * Set to show all item icons within the toggle element.
+     *
+     * Selected items are highlighted and unselected items are shown as inactive.
+     *
+     * @default false
+     */
+    showUnselectedItemIcons?: boolean;
+    /**
+     * Additional classes to be set to the select wrapper
+     */
+    className?: string;
+};
+declare const Multiselect: (props: MultiselectProps<MultiselectOption>) => import("react/jsx-runtime").JSX.Element;
+export default Multiselect;