@rio-cloud/rio-uikit 1.10.1 → 1.12.0

package/src/components/feedback/FeedbackReactions.d.ts

@@ -0,0 +1,71 @@
+import React, { type ComponentProps } from 'react';
+type FeedbackReactionsProps = ComponentProps<'div'> & {
+    /**
+     * Optional headline inlined with the buttons.
+     */
+    headline?: React.ReactNode;
+    /**
+     * Size of the reaction buttons.
+     *
+     * @default 'md'
+     */
+    size?: 'sm' | 'md';
+    /**
+     * Position of the reaction button labels.
+     *
+     * @default 'bottom'
+     */
+    labelPosition?: 'right' | 'bottom';
+    /**
+     * Label for the up button.
+     */
+    labelUp?: React.ReactNode;
+    /**
+     * Label for the down button.
+     */
+    labelDown?: React.ReactNode;
+    /**
+     * Custom fill color for the up button.
+     *
+     * @default 'bg-lightest'
+     */
+    colorFillUp?: string;
+    /**
+     * Custom fill color for the down button.
+     *
+     * @default 'bg-lightest'
+     */
+    colorFillDown?: string;
+    /**
+     * Custom hover color for the up button.
+     *
+     * @default 'primary'
+     */
+    colorHoverUp?: string;
+    /**
+     * Custom hover color for the down button.
+     *
+     * @default 'primary'
+     */
+    colorHoverDown?: string;
+    /**
+     * Callback function triggered on up vote.
+     */
+    onVoteUp?: VoidFunction;
+    /**
+     * Callback function triggered on down vote.
+     */
+    onVoteDown?: VoidFunction;
+    /**
+     * Additional classes applied to the individual reaction item (button and label).
+     */
+    itemClassName?: string;
+    /**
+     * Defines whether the reaction icon is animated.
+     *
+     * @default false
+     */
+    animated?: boolean;
+};
+declare const FeedbackReactions: (props: FeedbackReactionsProps) => import("react/jsx-runtime").JSX.Element;
+export default FeedbackReactions;

package/src/components/feedback/FeedbackReactions.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef } from 'react';
+import classNames from 'classnames';
+import { motion } from 'framer-motion';
+import useHover from '../../hooks/useHover';
+const FeedbackReactions = (props) => {
+    const { headline, animated, labelUp, labelDown, labelPosition = 'bottom', size = 'md', colorFillUp = '', colorFillDown = '', colorHoverUp = 'primary', colorHoverDown = 'primary', onVoteUp = () => { }, onVoteDown = () => { }, itemClassName, ...remainingProps } = props;
+    const hasLabels = !!labelUp || !!labelDown;
+    const wrapperClassName = classNames(hasLabels ? 'display-grid grid-cols-2' : 'display-flex', 'gap-15', 'padding-top-5', 'user-select-none');
+    return (_jsxs("div", { ...remainingProps, className: wrapperClassName, children: [_jsx(FeedbackItem, { size: size, fillColor: colorFillDown, hoverColor: colorHoverDown, animated: animated, iconName: 'thumbs-down', text: labelDown, labelPosition: labelPosition, onClick: onVoteDown, className: itemClassName }), _jsx(FeedbackItem, { size: size, fillColor: colorFillUp, hoverColor: colorHoverUp, animated: animated, iconName: 'thumbs-up', text: labelUp, labelPosition: labelPosition, onClick: onVoteUp, className: itemClassName })] }));
+};
+const FeedbackItem = (props) => {
+    const { size, text, iconName, onClick, fillColor, hoverColor, animated = false, labelPosition = 'bottom', className, } = props;
+    const ref = useRef(null);
+    const isHover = useHover(ref);
+    const iconClasses = classNames(size === 'sm' ? 'width-40' : 'width-50', 'aspect-ratio-1', 'border rounded-circle', fillColor ? `bg-${fillColor} text-color-white` : 'bg-lightest', isHover ? `border-color-${hoverColor} text-color-${hoverColor}` : 'border-color-lightest', 'display-grid place-items-center', 'text-size-14');
+    const wrapperClassName = classNames('display-flex', 'gap-10', labelPosition === 'bottom' ? 'flex-column' : '', 'align-items-center', 'text-center', 'cursor-pointer', className);
+    const isUp = iconName.includes('up');
+    return (_jsxs("div", { ref: ref, className: wrapperClassName, onClick: onClick, children: [_jsx("div", { className: iconClasses, children: _jsx(motion.span, { initial: { y: 0, rotate: 0 }, animate: animated && isHover ? { y: [0, isUp ? -3 : 3, 0], rotate: [0, isUp ? -10 : 10, 0] } : { y: 0 }, transition: {
+                        duration: 0.6,
+                        repeat: isHover ? Number.POSITIVE_INFINITY : 0,
+                        repeatType: 'loop',
+                    }, className: `rioglyph rioglyph-${iconName} text-size-200pct` }) }), _jsx("div", { className: `text-wrap-balance line-height-125rel text-medium ${isHover ? `text-color-${hoverColor}` : 'text-color-darker'}`, children: text })] }));
+};
+export default FeedbackReactions;

package/src/components/filepicker/FilePicker.d.ts

@@ -0,0 +1,58 @@
+import { type ReactNode } from 'react';
+type FilePickerRenderProps = {
+    isDragActive: boolean;
+};
+export type FilePickerProps = {
+    /**
+     * Defines the file picker display mode.
+     *
+     * Possible values are `'button'` for a single button, `'dropzone'` for a custom dropzone passed as child function,
+     * or `'full'` for showing both.
+     *
+     * @default 'button'
+     */
+    displayMode?: 'button' | 'dropzone' | 'full';
+    /**
+     * Indicating if multiple files may be selected.
+     *
+     * @default true
+     */
+    multiple?: boolean;
+    /**
+     * Text to display on Button if displayMode is set to "button".
+     *
+     * @default 'Select files'
+     */
+    label?: string | ReactNode;
+    /**
+     * Maximum file size in byte. 5 MB = 5,242,880 byte
+     */
+    maxSize?: number;
+    /**
+     * Function called after one or multiple files have been picked.
+     */
+    onPick?: (files: FileList | null) => void;
+    /**
+     * Additional classes for the select button.
+     *
+     * @default ''
+     */
+    className?: string;
+    /**
+     * Object list of accepted Mime Types as keys and file extensions array as value.
+     */
+    accept?: {
+        [mimeType: string]: string[];
+    };
+    /**
+     * Pass a custom dropzone element as function receiving some render props.
+     */
+    children?: ({ isDragActive }: FilePickerRenderProps) => any;
+};
+declare const FilePicker: {
+    (props: FilePickerProps): import("react/jsx-runtime").JSX.Element;
+    DISPLAY_MODE_BUTTON: "button";
+    DISPLAY_MODE_DROPZONE: "dropzone";
+    DISPLAY_MODE_FULL: "full";
+};
+export default FilePicker;

package/src/components/filepicker/FilePicker.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useRef } from 'react';
+import Dropzone from 'react-dropzone';
+import noop from 'lodash/noop';
+import Button from '../button/Button';
+const FilePicker = (props) => {
+    const { displayMode = 'button', multiple = true, label = 'Select files', maxSize, onPick = noop, className = '', accept, children, ...remainingProps } = props;
+    const dropzoneRef = useRef(null);
+    const isFull = displayMode === 'full';
+    const showButton = isFull || displayMode === 'button';
+    const showDropzone = isFull || displayMode === 'dropzone';
+    const handleDrop = useCallback((acceptedFiles, rejectedFiles) => {
+        const hasImagesType = accept && Object.keys(accept).some(mimeType => mimeType.startsWith('image'));
+        const files = hasImagesType
+            ? acceptedFiles.map(file => Object.assign(file, { preview: URL.createObjectURL(file) }))
+            : acceptedFiles;
+        onPick(files, rejectedFiles);
+    }, [onPick, accept]);
+    const handleClick = () => dropzoneRef.current?.open();
+    return (_jsxs("div", { className: 'FilePicker', children: [showButton && (_jsx(Button, { onClick: handleClick, className: className, children: label })), _jsx(Dropzone, { ...remainingProps, onDrop: handleDrop, accept: accept, multiple: multiple, maxSize: maxSize, ref: dropzoneRef, children: ({ getRootProps, getInputProps, isDragActive }) => {
+                    return (_jsxs("div", { ...getRootProps(), children: [_jsx("input", { ...getInputProps() }), showDropzone && children && children({ isDragActive })] }));
+                } })] }));
+};
+FilePicker.DISPLAY_MODE_BUTTON = 'button';
+FilePicker.DISPLAY_MODE_DROPZONE = 'dropzone';
+FilePicker.DISPLAY_MODE_FULL = 'full';
+export default FilePicker;

package/src/components/formLabel/FormLabel.d.ts

@@ -0,0 +1,13 @@
+import React, { type PropsWithChildren, type ComponentProps } from 'react';
+export type FormLabelProps = ComponentProps<'label'> & {
+    /**
+     * Additional supporting text displayed next to the label.
+     */
+    supportingText?: string | React.ReactElement;
+    /**
+     * Additional classes set to the outer element.
+     */
+    className?: string;
+};
+declare const FormLabel: (props: PropsWithChildren<FormLabelProps>) => import("react/jsx-runtime").JSX.Element;
+export default FormLabel;

package/src/components/formLabel/FormLabel.js

@@ -0,0 +1,37 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// biome-ignore lint/style/useImportType: required for JSX runtime compatibility with older toolchains
+import { useEffect, useRef, useState } from 'react';
+import classNames from 'classnames';
+const FormLabel = (props) => {
+    const { className = '', children, supportingText, ...remainingProps } = props;
+    const elementRef = useRef(null);
+    const [parentSize, setParentSize] = useState(null);
+    const isLabel = 'htmlFor' in remainingProps;
+    useEffect(() => {
+        if (!elementRef.current) {
+            return;
+        }
+        const parent = elementRef.current.parentElement;
+        if (!parent) {
+            return;
+        }
+        if (parent.classList.contains('form-group-lg')) {
+            setParentSize('lg');
+        }
+        else if (parent.classList.contains('form-group-sm')) {
+            setParentSize('sm');
+        }
+    }, []);
+    const supportingTextClasses = classNames('text-color-gray', typeof supportingText === 'string' && 'text-italic', parentSize === 'sm' && 'text-size-10', parentSize === 'lg' && 'text-size-14', !parentSize && 'text-size-12');
+    if (isLabel && remainingProps.htmlFor) {
+        const labelClasses = classNames(!supportingText && 'display-inline-block', supportingText && 'display-inline-flex flex-wrap justify-content-between width-100pct', className);
+        return (
+        // biome-ignore lint/a11y/noLabelWithoutControl: <explanation>
+        _jsxs("label", { ref: elementRef, ...remainingProps, className: labelClasses, children: [_jsx("span", { children: children }), supportingText && _jsx("span", { className: supportingTextClasses, children: supportingText })] }));
+    }
+    const classes = classNames('text-color-dark', 'max-width-100pct', parentSize === 'sm' && 'text-size-10', parentSize === 'lg' && 'text-size-14', !parentSize && 'text-size-12', !supportingText && 'display-inline-block', supportingText && 'display-inline-flex flex-wrap justify-content-between width-100pct', !className.includes('margin-bottom') && 'margin-bottom-5', className);
+    return (
+    // @ts-ignore
+    _jsxs("div", { ref: elementRef, ...remainingProps, className: classes, children: [children, supportingText && _jsx("span", { className: supportingTextClasses, children: supportingText })] }));
+};
+export default FormLabel;

package/src/components/formLabel/LabeledElement.d.ts

@@ -0,0 +1,28 @@
+import React, { type PropsWithChildren } from 'react';
+import { type FormLabelProps } from './FormLabel';
+export type LabeledElementProps = {
+    /**
+     * The text to display for the label.
+     */
+    label: string | React.ReactElement;
+    /**
+     * Optional ID of the element associated with the label.
+     */
+    htmlFor?: string;
+    /**
+     * Additional props for the FormLabel, excluding children and htmlFor.
+     */
+    labelProps?: Omit<FormLabelProps, 'children'>;
+    /**
+     * If true, removes the bottom margin from the label.
+     *
+     * @default false
+     */
+    noGap?: boolean;
+    /**
+     * Additional classes for styling the wrapper.
+     */
+    className?: string;
+};
+declare const LabeledElement: (props: PropsWithChildren<LabeledElementProps>) => import("react/jsx-runtime").JSX.Element;
+export default LabeledElement;

package/src/components/formLabel/LabeledElement.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import classNames from 'classnames';
+import FormLabel from './FormLabel';
+const LabeledElement = (props) => {
+    const { label, htmlFor, labelProps = {}, noGap = false, className = '', children, ...remainingProps } = props;
+    // Extract and handle the `className` prop separately for the label
+    const { className: labelClassName, ...otherLabelProps } = labelProps;
+    const combinedLabelClassName = classNames(labelClassName, noGap && 'margin-bottom-0');
+    return (_jsxs("div", { ...remainingProps, className: classNames('LabeledElement display-flex flex-column', className), children: [_jsx(FormLabel, { htmlFor: htmlFor, ...otherLabelProps, className: combinedLabelClassName, children: label }), children] }));
+};
+export default LabeledElement;

package/src/components/groupedItemList/GroupedItemList.d.ts

@@ -0,0 +1,79 @@
+import React from 'react';
+import { SortDirectionType } from '../../SortUtils';
+export type Group = {
+    groupKey: string;
+    items: any[];
+};
+export type GroupedItemListProps<T> = {
+    /**
+     * The list of items to be grouped and rendered.
+     *
+     * By default, the component assumes an item object containing an 'id' and 'name' property
+     * plus some other attributes.
+     */
+    items: T[];
+    /**
+     * The property of the items to group by as a string, or a custom group function.
+     * Defaults to 'name' if not provided.
+     *
+     * @default 'name'
+     */
+    groupBy?: keyof T | ((item: T) => string);
+    /**
+     * The order in which to sort the groups. Accepts 'asc' for ascending or 'desc' for descending.
+     * @default 'asc'.
+     */
+    groupSortOrder?: SortDirectionType;
+    /**
+     * The order in which to sort the items inside a group. Accepts 'asc' for ascending or 'desc' for descending.
+     * @default 'asc'.
+     */
+    itemSortOrder?: SortDirectionType;
+    /**
+     * Sorting function for the groups.
+     */
+    groupSortFunction?: (groups: Group[]) => Group[];
+    /**
+     * Sorting function for the items within each group.
+     */
+    itemSortFunction?: (items: T[]) => T[];
+    /**
+     * A custom render function for the group divider.
+     * Receives the group key (e.g., letter or date) as a parameter.
+     */
+    renderDivider?: (groupKey: string) => React.ReactNode;
+    /**
+     * A custom render function for individual list items.
+     * Receives an item as a parameter.
+     */
+    renderItem?: (item: T) => React.ReactNode;
+    /**
+     * Specifies the HTML element to use for the list inside each group.
+     * Default is 'div'. Use 'ul' for rendering the list items as `<li>` elements.
+     */
+    listElement?: 'div' | 'ul';
+    /**
+     * Optional class name for the list element inside each group.
+     * Applied to the `div` or `ul` wrapping the items.
+     */
+    listElementClassName?: string;
+    /**
+     * Optional class name for the divider element in each group.
+     * Applied to the `div` wrapping each group divider.
+     */
+    dividerElementClassName?: string;
+    /**
+     * Optional class name for the outer wrapper element.
+     * Applied to the outer `div` wrapping the entire component.
+     */
+    className?: string;
+};
+/**
+ * A React component that groups and renders a list of items based on a specified property.
+ * The component can be customized to render dividers and list items in different styles.
+ *
+ * @param {GroupedItemListProps} props - The props for the component.
+ * @returns {JSX.Element} The grouped and rendered list component.
+ */
+declare const GroupedItemList: <T>(props: GroupedItemListProps<T>) => import("react/jsx-runtime").JSX.Element;
+export default GroupedItemList;

package/src/components/groupedItemList/GroupedItemList.js

@@ -0,0 +1,74 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useMemo } from 'react';
+import { naturalSortByProperty, sortByProperty } from '../../SortUtils';
+/**
+ * A React component that groups and renders a list of items based on a specified property.
+ * The component can be customized to render dividers and list items in different styles.
+ *
+ * @param {GroupedItemListProps} props - The props for the component.
+ * @returns {JSX.Element} The grouped and rendered list component.
+ */
+const GroupedItemList = (props) => {
+    const { items, groupBy = 'name', groupSortOrder = 'asc', // Default to ascending order if not specified
+    groupSortFunction, itemSortFunction, itemSortOrder = 'asc', // Default to ascending order if not specified
+    renderDivider, renderItem, listElement = 'div', // Default to 'div' if not specified
+    listElementClassName, dividerElementClassName, className, } = props;
+    // Default group sorting function or specific function provided
+    const groupSortFn = groupSortFunction
+        ? groupSortFunction
+        : (groups) => naturalSortByProperty(groups, 'groupKey', groupSortOrder);
+    // Default item sorting within groups or specific function provided
+    const itemSortFn = itemSortFunction
+        ? itemSortFunction
+        : (itemsToSort) => sortByProperty(itemsToSort, groupBy, itemSortOrder);
+    // Determine the grouping function based on the type of groupBy
+    // const getGroupKey = (item: T): string => {
+    //     if (typeof groupBy === 'string') {
+    //         if (groupBy === 'name') {
+    //             return (item as any).name?.[0]?.toUpperCase() ?? '';
+    //         }
+    //         return (item as any)[groupBy]?.toString() ?? '';
+    //     } else if (typeof groupBy === 'function') {
+    //         return groupBy(item);
+    //     }
+    //     throw new Error('Please define a "groupBy" property as a string or function.');
+    // };
+    const getGroupKey = typeof groupBy === 'function'
+        ? groupBy
+        : (item) => item[groupBy]?.[0]?.toUpperCase() ?? '';
+    // Group items by the specified property
+    // const allGroups = useMemo(
+    //     () =>
+    //         items.reduce<Record<string, T[]>>((acc, item) => {
+    //             const groupKey = getGroupKey(item);
+    //             if (!acc[groupKey]) {
+    //                 acc[groupKey] = [];
+    //             }
+    //             acc[groupKey].push(item);
+    //             return acc;
+    //         }, {}),
+    //     [items, getGroupKey]
+    // );
+    // Group items by the specified property
+    const groupedItems = useMemo(() => {
+        // Explicitly typing the accumulator as Record<string, T[]>
+        const groups = items.reduce((acc, item) => {
+            const groupKey = getGroupKey(item);
+            if (!acc[groupKey]) {
+                acc[groupKey] = [];
+            }
+            acc[groupKey].push(item);
+            return acc;
+        }, {});
+        return Object.keys(groups).map(groupKey => ({
+            groupKey,
+            items: groups[groupKey],
+        }));
+    }, [items, getGroupKey]);
+    // Assign the specified list element ('div' or 'ul')
+    const ListElement = listElement;
+    // Sort groups using the provided sort function
+    const sortedGroups = useMemo(() => groupSortFn(groupedItems), [groupedItems, groupSortFn]);
+    return (_jsx("div", { className: `grouped-item-list ${className ?? ''}`, children: sortedGroups.map(group => (_jsxs(React.Fragment, { children: [_jsx("div", { className: `group-divider ${dividerElementClassName ?? ''}`, children: renderDivider ? renderDivider(group.groupKey) : group.groupKey }), _jsx(ListElement, { className: listElementClassName, children: itemSortFn(group.items).map(item => renderItem ? (renderItem(item)) : (_jsx(React.Fragment, { children: _jsx("div", { className: 'item-name', children: item.name }) }, item.id ?? crypto.randomUUID()))) })] }, group.groupKey))) }));
+};
+export default GroupedItemList;

package/src/components/licensePlate/LicensePlate.d.ts

@@ -0,0 +1,19 @@
+import { type PropsWithChildren } from 'react';
+export type LicensePlateProps = {
+    /**
+     * The country code.
+     *
+     * Should be a string with 1-3 capital letters.
+     */
+    countryCode?: string;
+    /**
+     * Whether the EU stars should be hidden.
+     */
+    hideStars?: boolean;
+    /**
+     * Additional classes added to the wrapping element.
+     */
+    className?: string;
+};
+declare const LicensePlate: (props: PropsWithChildren<LicensePlateProps>) => import("react/jsx-runtime").JSX.Element;
+export default LicensePlate;

package/src/components/licensePlate/LicensePlate.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const euStars = (_jsx("svg", { xmlns: 'http://www.w3.org/2000/svg', width: '10', height: '10', children: _jsx("path", { fill: '#FFC200', fillRule: 'nonzero', d: 'M5.143.439H5.6L5.23.71l.141.438L5 .88l-.371.27.14-.438L4.4.439h.459L5 0zm2.198.594h.458l-.37.272.141.44-.371-.271-.372.27.142-.439-.372-.271h.46l.142-.44zm1.607 1.625h.458l-.37.272.141.44-.371-.271-.372.27.142-.438-.371-.272.459-.001.142-.438zm.593 2.208H10l-.37.272.14.44-.37-.272-.372.271.14-.438-.37-.272.46-.001.141-.438zm-.59 2.214h.459l-.37.271.14.44-.37-.271-.372.271.141-.439-.371-.271.46-.001.141-.439zM7.337 8.701h.459l-.371.272.141.44-.371-.27-.371.27.14-.44-.37-.27.459-.002.142-.438zm-2.201.588h.458l-.37.272.141.439-.371-.27-.372.27.142-.439-.372-.271.46-.001.142-.438zM2.938 8.7h.458l-.37.273.141.439-.371-.27-.372.27.141-.44-.37-.27h.459l.142-.44zM1.33 7.083h.458l-.37.272.14.44-.371-.271-.372.27.142-.439-.37-.271h.458l.143-.44zM.743 4.869H1.2l-.37.272.141.439-.371-.27-.372.27.142-.439L0 4.87l.459-.001L.6 4.43zm.581-2.217h.459l-.37.272.14.439-.37-.27-.372.27.14-.439-.37-.271h.459l.142-.44zM2.94 1.03h.459l-.37.272.14.44-.37-.272-.372.271.14-.439-.37-.271.458-.001.143-.439z' }) }));
+const LicensePlate = (props) => {
+    const { countryCode, hideStars, className = '', children } = props;
+    let letterCount = '';
+    if (countryCode?.length === 2)
+        letterCount = 'two-letters';
+    if (countryCode?.length === 3)
+        letterCount = 'three-letters';
+    return (_jsx("div", { className: `license-plate ${className}`, children: _jsxs("div", { className: 'plate-content', children: [countryCode && (_jsxs("div", { className: 'plate-country', children: [!hideStars && _jsx("span", { className: 'stars', children: euStars }), _jsx("span", { className: `plate-country-code ${letterCount}`, children: countryCode })] })), _jsx("div", { className: 'plate-number', children: children })] }) }));
+};
+export default LicensePlate;

package/src/components/listMenu/ListMenu.d.ts

@@ -0,0 +1,73 @@
+import React, { type ReactNode } from 'react';
+import { type ListMenuNavItem, type ListMenuItem } from './ListMenuGroup';
+export type { ListMenuNavItem, ListMenuItem } from './ListMenuGroup';
+export type ListMenuProps<T extends ListMenuNavItem> = {
+    /**
+     * List of menu item groups to be shown.
+     */
+    menuItems: ListMenuItem<T>[];
+    /**
+     * Enables the filter.
+     *
+     * @default false
+     */
+    enableFilter?: boolean;
+    /**
+     * Focus the filter input.
+     *
+     * @default false
+     */
+    focusFilter?: boolean;
+    /**
+     * Define the attribute key for filtering.
+     *
+     * @default 'key'
+     */
+    filterKey?: keyof T;
+    /**
+     * The placeholder text for the filter input.
+     */
+    filterPlaceholder?: string;
+    /**
+     * Gets called when the filter input changes.
+     *
+     * @param value
+     * @returns
+     */
+    onFilterChange?: (value: string) => void;
+    /**
+     * A localized message to be shown when the filter result is empty.
+     */
+    notFoundMessage?: string | ReactNode;
+    /**
+     * The menu uses collapses on smaller screens using an expander panel.
+     *
+     * @default true
+     */
+    responsive?: boolean;
+    /**
+     * Enables automatic closing of the expander panel.
+     *
+     * Only relevant when using the `responsive` flag. Note: Make sure to not stop the events from bubbling up when
+     * clicking on a list item!
+     *
+     * Using `event.stopPropagation()` will prevent the panel from closing.
+     *
+     * @default true
+     */
+    autoClose?: boolean;
+    /**
+     * Additional classes to be set on the menu group element.
+     */
+    groupClassName?: string;
+    /**
+     * Additional addon for the input group.
+     */
+    trailingInputAddon?: React.ReactNode;
+    /**
+     * Additional classes to be set on the wrapper element.
+     */
+    className?: string;
+};
+declare const ListMenu: <T extends ListMenuNavItem>(props: ListMenuProps<T>) => import("react/jsx-runtime").JSX.Element;
+export default ListMenu;

package/src/components/listMenu/ListMenu.js

@@ -0,0 +1,85 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// biome-ignore lint/style/useImportType: <explanation>
+import { useEffect, useRef, useState } from 'react';
+import isEmpty from 'lodash/fp/isEmpty';
+import debounce from 'lodash/fp/debounce';
+import classNames from 'classnames';
+import useEffectOnce from '../../hooks/useEffectOnce';
+import ClearableInput from '../clearableInput/ClearableInput';
+import ExpanderPanel from '../expander/ExpanderPanel';
+import ListMenuGroup from './ListMenuGroup';
+import useEsc from '../../hooks/useEsc';
+import useWindowResize from '../../hooks/useWindowResize';
+import useKey from '../../hooks/useKey';
+const RESIZE_THROTTLING = 10;
+const MOBILE_MAX_WIDTH = 580;
+const filterMenuItems = (items, value, filterKey) => items.map(item => ({
+    ...item,
+    navItems: item.navItems.filter(navItem => navItem[filterKey].toLowerCase().includes(value.toLowerCase())),
+}));
+const hasMenuItems = (items) => items.find(({ navItems }) => !isEmpty(navItems));
+const ListMenu = (props) => {
+    const { menuItems, focusFilter = false, enableFilter = false, filterPlaceholder, onFilterChange = () => { }, notFoundMessage, className = '', groupClassName = '', responsive = true, autoClose = true, filterKey = 'key', trailingInputAddon, ...remainingProps } = props;
+    const [filterValue, setFilterValue] = useState('');
+    const [isMobileMode, setIsMobileMode] = useState(false);
+    const [isExpanderOpen, setIsExpanderOpen] = useState(false);
+    const [mobileHeader, setMobileHeader] = useState('');
+    const inputRef = useRef(null);
+    const listRef = useRef(null);
+    const buildMobileHeader = () => {
+        if (responsive && listRef.current) {
+            const [activeElement] = listRef.current.getElementsByClassName('active');
+            setMobileHeader(_jsxs("div", { className: 'display-flex align-items-center', children: [_jsx("span", { className: 'rioglyph rioglyph-menu-hamburger margin-right-10' }), _jsx("span", { children: activeElement?.innerText })] }));
+        }
+    };
+    // clear filter input on esc
+    useEsc(() => {
+        if (enableFilter && inputRef.current === document.activeElement) {
+            setFilterValue('');
+        }
+    });
+    // Convert the menu to an expandable panel for smaller screens
+    const handleMobileSize = debounce(RESIZE_THROTTLING)(() => {
+        buildMobileHeader();
+        setIsMobileMode(window.innerWidth < MOBILE_MAX_WIDTH);
+    });
+    // Render a dropdown menu on mobile on mount
+    useEffect(handleMobileSize, []);
+    useWindowResize(handleMobileSize);
+    const focusInput = () => {
+        inputRef.current?.focus();
+    };
+    useKey((event) => {
+        if ((event.metaKey || event.ctrlKey) && event.key === 'k') {
+            event.preventDefault();
+            focusInput();
+        }
+    });
+    // Focus filter input if requested
+    useEffectOnce(() => {
+        focusFilter && focusInput();
+    });
+    // biome-ignore lint/correctness/useExhaustiveDependencies: <explanation>
+    useEffect(() => buildMobileHeader, [menuItems]);
+    const handleClear = () => focusFilter && focusInput();
+    const handleFilterChange = (value) => {
+        setFilterValue(value);
+        onFilterChange(value);
+    };
+    const filteredMenuItems = filterMenuItems(menuItems, filterValue, filterKey);
+    const handleExpanderBodyClick = (event) => {
+        const isListItem = event.target.parentElement?.tagName.toLowerCase() === 'li';
+        if (autoClose && isListItem) {
+            setIsExpanderOpen(false);
+        }
+    };
+    const formClassNames = classNames('form-group', 'margin-bottom-5', 'padding-left-15', 'padding-right-15', 'padding-bottom-15', 'position-sticky', 'top-0', 'z-index-1');
+    const listMenu = (_jsxs("div", { ...remainingProps, className: `ListMenu ${className} ${filterValue ? 'filtered' : ''}`, ref: listRef, children: [enableFilter && (_jsx("div", { className: formClassNames, children: _jsxs("div", { className: 'input-group width-100pct', children: [_jsx("span", { className: 'input-group-addon', children: _jsx("span", { className: 'rioglyph rioglyph-search', "aria-hidden": 'true' }) }), _jsx(ClearableInput, { value: filterValue, inputRef: inputRef, placeholder: filterPlaceholder, onChange: handleFilterChange, onClear: handleClear }), trailingInputAddon && trailingInputAddon] }) })), !hasMenuItems(filteredMenuItems) && (_jsx("div", { className: 'padding-top-25 text-center text-color-gray', children: notFoundMessage })), filteredMenuItems.map((menuGroup, index) => (
+            // biome-ignore lint/suspicious/noArrayIndexKey: using a random key would re-render the list every time the parent updates
+            _jsx(ListMenuGroup, { className: groupClassName, menuGroup: menuGroup }, index)))] }));
+    if (responsive && isMobileMode) {
+        return (_jsx(ExpanderPanel, { title: mobileHeader, bsStyle: 'default', open: isExpanderOpen, onToggle: () => setIsExpanderOpen(!isExpanderOpen), unmountOnExit: false, className: 'shadow-default', children: _jsx("div", { onClick: handleExpanderBodyClick, children: listMenu }) }));
+    }
+    return listMenu;
+};
+export default ListMenu;