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

package/lib/es/components/assetTree/TreeSummary.d.ts

@@ -1,3 +1,45 @@
+import React, { type PropsWithChildren } from 'react';
+export type AssetType = 'truck' | 'trailer' | 'bus' | 'van' | 'driver';
+export type TreeSummaryCounts = {
+    /**
+     * The amount of trucks
+     */
+    truck?: number;
+    /**
+     * The amount of trailers
+     */
+    trailer?: number;
+    /**
+     * The amount of buses
+     */
+    bus?: number;
+    /**
+     * The amount of vans
+     */
+    van?: number;
+    /**
+     * The amount of drivers
+     */
+    driver?: number;
+};
+export type DefaultAssetCountsProps = {
+    assetCounts: TreeSummaryCounts;
+};
+export type TreeSummaryProps = {
+    /**
+     * The object containing various asset type counter.
+     */
+    assetCounts?: TreeSummaryCounts;
+    /**
+     * The number of grid columns used for the built-in `TreeSummaryRow`.
+     *
+     * @default 4
+     */
+    gridCols?: number;
+    /**
+     * Additional classes added to the wrapping element.
+     */
+    className?: string;
+};
+declare const TreeSummary: React.MemoExoticComponent<(props: PropsWithChildren<TreeSummaryProps>) => import("react/jsx-runtime").JSX.Element>;
 export default TreeSummary;
-declare const TreeSummary: React.NamedExoticComponent<object>;
-import React from "react";

package/lib/es/components/assetTree/TreeSummary.js

@@ -2,32 +2,18 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
+// @ts-ignore-next-line importsNotUsedAsValues
 const react_1 = tslib_1.__importDefault(require("react"));
-const prop_types_1 = tslib_1.__importDefault(require("prop-types"));
 const classnames_1 = tslib_1.__importDefault(require("classnames"));
 const TypeCounter_1 = tslib_1.__importDefault(require("./TypeCounter"));
+const TreeSummaryRow_1 = tslib_1.__importDefault(require("./TreeSummaryRow"));
 const DefaultAssetCounts = ({ assetCounts }) => {
     const { truck, bus, van, trailer, driver } = assetCounts;
-    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: 'display-flex' }, { children: [(0, jsx_runtime_1.jsx)(TypeCounter_1.default, { hideOnZero: true, icon: 'truck-baseline', value: truck }), (0, jsx_runtime_1.jsx)(TypeCounter_1.default, { hideOnZero: true, icon: 'trailer-baseline', value: trailer }), (0, jsx_runtime_1.jsx)(TypeCounter_1.default, { hideOnZero: true, icon: 'bus-baseline', value: bus }), (0, jsx_runtime_1.jsx)(TypeCounter_1.default, { hideOnZero: true, icon: 'van-baseline', value: van }), (0, jsx_runtime_1.jsx)(TypeCounter_1.default, { hideOnZero: true, icon: 'driver', value: driver })] })));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(TypeCounter_1.default, { hideOnZero: true, icon: 'truck-baseline', value: truck }), (0, jsx_runtime_1.jsx)(TypeCounter_1.default, { hideOnZero: true, icon: 'trailer-baseline', value: trailer }), (0, jsx_runtime_1.jsx)(TypeCounter_1.default, { hideOnZero: true, icon: 'bus-baseline', value: bus }), (0, jsx_runtime_1.jsx)(TypeCounter_1.default, { hideOnZero: true, icon: 'van-baseline', value: van }), (0, jsx_runtime_1.jsx)(TypeCounter_1.default, { hideOnZero: true, icon: 'driver', value: driver })] }));
 };
-const TreeSummary = react_1.default.memo(props => {
-    const { className, assetCounts, children } = props;
-    const classes = (0, classnames_1.default)('TreeSummary', 'display-flex', 'flex-wrap', 'align-items-center', 'column-gap-15', 'row-gap-5', className);
-    return (0, jsx_runtime_1.jsx)("div", Object.assign({ className: classes }, { children: children || (0, jsx_runtime_1.jsx)(DefaultAssetCounts, { assetCounts: assetCounts }) }));
+const TreeSummary = react_1.default.memo((props) => {
+    const { className = '', assetCounts = {}, gridCols, children } = props;
+    const classes = (0, classnames_1.default)('TreeSummary', 'display-flex flex-wrap', 'align-items-center', 'gap-10', 'padding-left-3', className);
+    return ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: classes }, { children: children || ((0, jsx_runtime_1.jsx)(TreeSummaryRow_1.default, Object.assign({ gridCols: gridCols }, { children: (0, jsx_runtime_1.jsx)(DefaultAssetCounts, { assetCounts: assetCounts }) }))) })));
 });
-TreeSummary.displayName = 'TreeSummary';
-TreeSummary.defaultProps = {
-    assetCounts: {},
-    className: '',
-};
-TreeSummary.propTypes = {
-    assetCounts: prop_types_1.default.shape({
-        truck: prop_types_1.default.number,
-        trailer: prop_types_1.default.number,
-        bus: prop_types_1.default.number,
-        van: prop_types_1.default.number,
-        driver: prop_types_1.default.number,
-    }),
-    className: prop_types_1.default.string,
-};
 exports.default = TreeSummary;

package/lib/es/components/assetTree/TreeSummaryRow.d.ts

@@ -0,0 +1,12 @@
+import { type PropsWithChildren } from 'react';
+export type TreeSummaryRowProps = {
+    /**
+     * Defined the number of grid columns for a single row. Note, when the
+     * amount of children exceed the columns it will wrap around to a new line.
+     *
+     * @default 4
+     */
+    gridCols?: number;
+};
+export declare const TreeSummaryRow: ({ gridCols, children }: PropsWithChildren<TreeSummaryRowProps>) => import("react/jsx-runtime").JSX.Element;
+export default TreeSummaryRow;

package/lib/es/components/assetTree/TreeSummaryRow.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TreeSummaryRow = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+// @ts-ignore-next-line importsNotUsedAsValues
+require("react");
+const TreeSummaryRow = ({ gridCols = 4, children }) => ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: `TreeSummaryRow display-grid grid-cols-${gridCols} gap-10` }, { children: children })));
+exports.TreeSummaryRow = TreeSummaryRow;
+exports.default = exports.TreeSummaryRow;

package/lib/es/components/assetTree/TypeCounter.d.ts

@@ -1,3 +1,46 @@
+import React from 'react';
+export type TypeCounterProps = {
+    /**
+     * The item type for that counter. This will be used as a return value for the onClick callback.
+     */
+    type?: string;
+    /**
+     * The icon name. Note, when using the built-in generic type counter, the icon name will the
+     * same as the item type. So make sure there is a corresponding icon for the defined type.
+     */
+    icon?: string;
+    /**
+     * Sets the active styling if active
+     */
+    isActive?: boolean;
+    /**
+     * Should be set when there is a type filter set in the tree to style the counter accordingly.
+     *
+     * @default false
+     */
+    hasFilter?: boolean;
+    /**
+     * Allows for interactivity. Use this prop when you allow clicking on the counter.
+     *
+     * @default false
+     */
+    enableActivity?: boolean;
+    /**
+     * Defines if the counter is rendered at all when the value is not defined ot 0.
+     *
+     * @default false
+     */
+    hideOnZero?: boolean;
+    /**
+     * Callback function when the counter is clicked. It returns the type value.
+     * @param type
+     * @returns
+     */
+    onClick?: (type: string) => void;
+    /**
+     * A custom value to be shown in the counter.
+     */
+    value?: string | React.ReactNode | number;
+};
+declare const TypeCounter: React.ForwardRefExoticComponent<TypeCounterProps & React.RefAttributes<HTMLDivElement>>;
 export default TypeCounter;
-declare const TypeCounter: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
-import React from "react";

package/lib/es/components/assetTree/TypeCounter.js

@@ -2,33 +2,23 @@
 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"));
+// @ts-ignore-next-line importsNotUsedAsValues
+const react_1 = require("react");
 const classnames_1 = tslib_1.__importDefault(require("classnames"));
+const noop_1 = tslib_1.__importDefault(require("lodash/fp/noop"));
+const useHover_1 = tslib_1.__importDefault(require("../../hooks/useHover"));
+const mergeRefs_1 = tslib_1.__importDefault(require("../../utils/mergeRefs"));
 const TypeCounter = (0, react_1.forwardRef)((props, ref) => {
-    const { icon, value, isActive, hasFilter, enableActivity, onClick, type, hideOnZero } = props, remainingProps = tslib_1.__rest(props, ["icon", "value", "isActive", "hasFilter", "enableActivity", "onClick", "type", "hideOnZero"]);
-    const wrapperClassName = (0, classnames_1.default)('TypeCounter', 'display-flex align-items-center', 'user-select-none', enableActivity ? 'cursor-pointer' : 'pointer-events-none', enableActivity && hasFilter && !isActive && 'opacity-50');
-    const counterClassNames = (0, classnames_1.default)('TreeLabelCount', 'label label-condensed', isActive ? 'label-primary' : 'label-muted label-filled');
-    const handleClick = () => onClick(type);
+    const { icon, value, isActive, hasFilter = false, enableActivity = false, onClick = noop_1.default, type, hideOnZero = false } = props, remainingProps = tslib_1.__rest(props, ["icon", "value", "isActive", "hasFilter", "enableActivity", "onClick", "type", "hideOnZero"]);
+    const internalRef = (0, react_1.useRef)(null);
+    const mergedRef = (0, mergeRefs_1.default)([ref, internalRef]);
+    const isHover = (0, useHover_1.default)(internalRef);
+    const wrapperClassName = (0, classnames_1.default)('TypeCounter', 'display-flex align-items-center', 'user-select-none', 'margin-right-2', enableActivity ? 'cursor-pointer' : 'pointer-events-none', enableActivity && hasFilter && !isActive && !isHover && 'opacity-50');
+    const counterClassNames = (0, classnames_1.default)('TreeLabelCount', 'label label-condensed', isHover && !isActive && 'bg-white text-color-darker', isHover && !isActive && 'border-color-gray', isHover && isActive && 'border-color-primary', isActive ? 'label-primary' : 'label-muted label-filled');
+    const handleClick = () => type && onClick(type);
     if (hideOnZero && !value) {
         return null;
     }
-    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ ref: ref }, remainingProps, { className: wrapperClassName, onClick: handleClick }, { children: [(0, jsx_runtime_1.jsx)("span", { className: `rioglyph rioglyph-${icon} text-size-16 margin-right-2 margin-left--4` }), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: counterClassNames }, { children: value || 0 }))] })));
+    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ ref: mergedRef }, remainingProps, { className: wrapperClassName, onClick: handleClick }, { children: [(0, jsx_runtime_1.jsx)("span", { className: `rioglyph rioglyph-${icon} text-size-16 margin-right-2` }), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: counterClassNames }, { children: value || 0 }))] })));
 });
-TypeCounter.defaultProps = {
-    hideOnZero: false,
-};
-TypeCounter.propTypes = {
-    type: prop_types_1.default.string,
-    icon: prop_types_1.default.string,
-    // Highlights the current active filter
-    isActive: prop_types_1.default.bool,
-    // Defined if there is a filter
-    hasFilter: prop_types_1.default.bool,
-    // Allow the counter to be clickable
-    enableActivity: prop_types_1.default.bool,
-    hideOnZero: prop_types_1.default.bool,
-    onClick: prop_types_1.default.func,
-    value: prop_types_1.default.oneOfType([prop_types_1.default.string, prop_types_1.default.node, prop_types_1.default.number]),
-};
 exports.default = TypeCounter;

package/lib/es/components/assetTree/treeReducer.d.ts

@@ -0,0 +1,47 @@
+import type { GroupedItem, TreeItem, TreeGroup } from './Tree';
+import type { TreeSummaryCounts, AssetType } from './TreeSummary';
+export type State = {
+    groupedItems: GroupedItem[];
+    flatItems: TreeItem[];
+    allChecked: boolean;
+    searchValue: string;
+    assetCounts: TreeSummaryCounts;
+    typeFilter: string[];
+    visibleTypeCounters: AssetType[];
+    emptyGroups: TreeGroup[];
+};
+type Action = {
+    type: 'assetCounted';
+    payload: TreeSummaryCounts;
+} | {
+    type: 'allCheckedChanged';
+    payload: boolean;
+} | {
+    type: 'searchValueChanged';
+    payload: string;
+} | {
+    type: 'flatItemsChanged';
+    payload: TreeItem[];
+} | {
+    type: 'groupedItemsChanged';
+    payload: GroupedItem[];
+} | {
+    type: 'typeFilterChanged';
+    payload: string[];
+} | {
+    type: 'visibleTypeCountersChanged';
+    payload: AssetType[];
+} | {
+    type: 'emptyGroupsChanged';
+    payload: TreeGroup[];
+};
+export declare const assetCounted: (payload: TreeSummaryCounts) => Action;
+export declare const allCheckedChanged: (payload: boolean) => Action;
+export declare const searchValueChanged: (payload: string) => Action;
+export declare const flatItemsChanged: (payload: TreeItem[]) => Action;
+export declare const groupedItemsChanged: (payload: GroupedItem[]) => Action;
+export declare const typeFilterChanged: (payload: string[]) => Action;
+export declare const visibleTypeCountersChanged: (payload: AssetType[]) => Action;
+export declare const emptyGroupsChanged: (payload: TreeGroup[]) => Action;
+export declare const treeReducer: (state: State, action: Action) => State;
+export {};

package/lib/es/components/assetTree/treeReducer.js

@@ -0,0 +1,47 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.treeReducer = exports.emptyGroupsChanged = exports.visibleTypeCountersChanged = exports.typeFilterChanged = exports.groupedItemsChanged = exports.flatItemsChanged = exports.searchValueChanged = exports.allCheckedChanged = exports.assetCounted = void 0;
+const tslib_1 = require("tslib");
+const tiny_invariant_1 = tslib_1.__importDefault(require("tiny-invariant"));
+const assetCounted = (payload) => ({ type: 'assetCounted', payload });
+exports.assetCounted = assetCounted;
+const allCheckedChanged = (payload) => ({ type: 'allCheckedChanged', payload });
+exports.allCheckedChanged = allCheckedChanged;
+const searchValueChanged = (payload) => ({ type: 'searchValueChanged', payload });
+exports.searchValueChanged = searchValueChanged;
+const flatItemsChanged = (payload) => ({ type: 'flatItemsChanged', payload });
+exports.flatItemsChanged = flatItemsChanged;
+const groupedItemsChanged = (payload) => ({ type: 'groupedItemsChanged', payload });
+exports.groupedItemsChanged = groupedItemsChanged;
+const typeFilterChanged = (payload) => ({ type: 'typeFilterChanged', payload });
+exports.typeFilterChanged = typeFilterChanged;
+const visibleTypeCountersChanged = (payload) => ({
+    type: 'visibleTypeCountersChanged',
+    payload,
+});
+exports.visibleTypeCountersChanged = visibleTypeCountersChanged;
+const emptyGroupsChanged = (payload) => ({ type: 'emptyGroupsChanged', payload });
+exports.emptyGroupsChanged = emptyGroupsChanged;
+const treeReducer = (state, action) => {
+    switch (action.type) {
+        case 'assetCounted':
+            return Object.assign(Object.assign({}, state), { assetCounts: action.payload });
+        case 'allCheckedChanged':
+            return Object.assign(Object.assign({}, state), { allChecked: action.payload });
+        case 'searchValueChanged':
+            return Object.assign(Object.assign({}, state), { searchValue: action.payload, allChecked: false });
+        case 'flatItemsChanged':
+            return Object.assign(Object.assign({}, state), { flatItems: action.payload });
+        case 'groupedItemsChanged':
+            return Object.assign(Object.assign({}, state), { groupedItems: action.payload });
+        case 'typeFilterChanged':
+            return Object.assign(Object.assign({}, state), { typeFilter: action.payload });
+        case 'visibleTypeCountersChanged':
+            return Object.assign(Object.assign({}, state), { visibleTypeCounters: action.payload });
+        case 'emptyGroupsChanged':
+            return Object.assign(Object.assign({}, state), { emptyGroups: action.payload });
+        default:
+            (0, tiny_invariant_1.default)(false, 'Unknown action type in tree reducer');
+    }
+};
+exports.treeReducer = treeReducer;

package/lib/es/components/assetTree/treeUtils.d.ts

@@ -0,0 +1,20 @@
+/// <reference types="lodash" />
+/// <reference types="lodash" />
+import type { TreeItem, TreeGroup, GroupedItems } from './Tree';
+export declare const notEqual: (value: any, other: any) => boolean;
+export declare const notEmpty: (value?: any) => boolean;
+export declare const filterOutByItemId: (list: string[]) => (item: TreeItem | TreeGroup) => boolean;
+export declare const containsItemById: (list: string[]) => (item: TreeGroup) => boolean;
+export declare const getListIds: (list: TreeItem[] | TreeGroup[]) => string[];
+export declare const getTypeCounts: (items: TreeItem[]) => import("lodash").Dictionary<number>;
+export declare const getSubTypeCounts: (items: TreeItem[]) => import("lodash").Dictionary<number>;
+export declare const debounceFn: <T extends (...args: any[]) => any>(fn: T) => import("lodash").DebouncedFunc<T>;
+export declare const getFullName: (item: TreeItem) => string;
+export declare const getFlatItems: (items: TreeItem[], searchValue: string) => TreeItem[];
+export declare const filterEmptyGroups: import("lodash/fp").LodashFilter2x1<GroupedItems>;
+export declare const filterAssetByType: (types?: string[]) => import("lodash/fp").LodashFilter2x1<TreeItem>;
+export declare const excludeFromList: <T>(list: T[], itemId: T) => T[];
+export declare const sortGroupsByName: (groups: GroupedItems) => TreeItem[];
+export declare const sortGroupItemsByName: (groups: GroupedItems) => GroupedItems;
+export declare const getMappedItemsToGroups: (groups: TreeGroup[], items: TreeItem[]) => GroupedItems;
+export declare const addOrRemoveFromList: <T>(list: T[], item: T) => T[];

package/lib/es/components/assetTree/treeUtils.js

@@ -0,0 +1,106 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.addOrRemoveFromList = exports.getMappedItemsToGroups = exports.sortGroupItemsByName = exports.sortGroupsByName = exports.excludeFromList = exports.filterAssetByType = exports.filterEmptyGroups = exports.getFlatItems = exports.getFullName = exports.debounceFn = exports.getSubTypeCounts = exports.getTypeCounts = exports.getListIds = exports.containsItemById = exports.filterOutByItemId = exports.notEmpty = exports.notEqual = void 0;
+const tslib_1 = require("tslib");
+const isEmpty_1 = tslib_1.__importDefault(require("lodash/fp/isEmpty"));
+const isEqual_1 = tslib_1.__importDefault(require("lodash/fp/isEqual"));
+const orderBy_1 = tslib_1.__importDefault(require("lodash/fp/orderBy"));
+const isObject_1 = tslib_1.__importDefault(require("lodash/fp/isObject"));
+const debounce_1 = tslib_1.__importDefault(require("lodash/fp/debounce"));
+const countBy_1 = tslib_1.__importDefault(require("lodash/fp/countBy"));
+const flow_1 = tslib_1.__importDefault(require("lodash/fp/flow"));
+const filter_1 = tslib_1.__importDefault(require("lodash/fp/filter"));
+const negate_1 = tslib_1.__importDefault(require("lodash/fp/negate"));
+const mapValues_1 = tslib_1.__importDefault(require("lodash/fp/mapValues"));
+const searchNormalized_1 = require("../../utils/searchNormalized");
+const SEARCH_DEBOUNCE = 100;
+exports.notEqual = (0, negate_1.default)(isEqual_1.default);
+exports.notEmpty = (0, negate_1.default)(isEmpty_1.default);
+const filterOutByItemId = (list) => (item) => !list.includes(item.id);
+exports.filterOutByItemId = filterOutByItemId;
+const containsItemById = (list) => (item) => list.includes(item.id);
+exports.containsItemById = containsItemById;
+const getListIds = (list) => list.map(listItem => listItem.id);
+exports.getListIds = getListIds;
+const getTypeCounts = (items) => (0, countBy_1.default)(item => item.type, items);
+exports.getTypeCounts = getTypeCounts;
+const getSubTypeCounts = (items) => (0, countBy_1.default)(item => item.subType, items);
+exports.getSubTypeCounts = getSubTypeCounts;
+// biome-ignore lint/suspicious/noExplicitAny: <explanation>
+const debounceFn = (fn) => (0, debounce_1.default)(SEARCH_DEBOUNCE, fn);
+exports.debounceFn = debounceFn;
+const isNameObject = (item) => (0, isObject_1.default)(item.name);
+const getFullName = (item) => `${item.name.firstName} ${item.name.lastName}`;
+exports.getFullName = getFullName;
+const getName = (item) => (isNameObject(item) ? (0, exports.getFullName)(item) : item.name);
+const orderByName = (0, orderBy_1.default)([
+    (item) => {
+        var _a;
+        return isNameObject(item)
+            ? item.name.lastName.toLowerCase()
+            : (_a = item.name.toLowerCase()) !== null && _a !== void 0 ? _a : '';
+    },
+], ['asc']);
+// TODO: extend to use provided external search function instead?
+const filterByName = (searchValue) => (item) => {
+    if (searchValue) {
+        return (0, searchNormalized_1.searchNormalized)(getName(item), searchValue);
+    }
+    return true;
+};
+const getFlatItems = (items, searchValue) => (0, flow_1.default)((0, filter_1.default)(filterByName(searchValue)), orderByName)(items);
+exports.getFlatItems = getFlatItems;
+exports.filterEmptyGroups = (0, filter_1.default)((group) => (0, exports.notEmpty)(group.items));
+const filterAssetByType = (types = []) => (0, filter_1.default)((asset) => types.includes(asset.type));
+exports.filterAssetByType = filterAssetByType;
+const excludeFromList = (list, itemId) => list.filter(item => item !== itemId);
+exports.excludeFromList = excludeFromList;
+const sortGroupsByName = (groups) => {
+    const fixedGroups = {};
+    const sortableGroups = {};
+    (0, mapValues_1.default)((group) => {
+        if (group.position === 'last') {
+            fixedGroups[group.id] = Object.assign({}, group);
+        }
+        else {
+            sortableGroups[group.id] = Object.assign({}, group);
+        }
+    })(groups);
+    const sortedGroups = orderByName(sortableGroups);
+    return (0, isEmpty_1.default)(fixedGroups) ? sortedGroups : Object.assign(Object.assign({}, sortedGroups), fixedGroups);
+};
+exports.sortGroupsByName = sortGroupsByName;
+const sortGroupItemsByName = (groups) => {
+    return (0, mapValues_1.default)((group) => (Object.assign(Object.assign({}, group), { items: orderByName(group.items) })))(groups);
+};
+exports.sortGroupItemsByName = sortGroupItemsByName;
+const getMappedItemsToGroups = (groups, items) => {
+    const mappedGroups = {};
+    // build an object for listing the groups by id
+    groups.forEach(group => {
+        mappedGroups[group.id] = Object.assign(Object.assign({}, group), { items: [] });
+    });
+    items.forEach(item => {
+        // add items to the respective group
+        const groupIds = item.groupIds || [];
+        groupIds.forEach(groupId => {
+            const mappedGroup = mappedGroups[groupId];
+            if (mappedGroup) {
+                mappedGroup.items.push(item);
+            }
+        });
+    });
+    return mappedGroups;
+};
+exports.getMappedItemsToGroups = getMappedItemsToGroups;
+const addOrRemoveFromList = (list, item) => {
+    const listSet = new Set(list);
+    if (listSet.has(item)) {
+        listSet.delete(item);
+    }
+    else {
+        listSet.add(item);
+    }
+    return [...listSet];
+};
+exports.addOrRemoveFromList = addOrRemoveFromList;

package/lib/es/components/autosuggest/AutoSuggest.d.ts

@@ -1,7 +1,23 @@
 import React from 'react';
 export type AutoSuggestSuggestion = {
-    label: string;
+    /**
+     * The text label for a suggestion item. If present, this will be returned when selecting the suggestion.
+     */
+    label?: string;
+    /**
+     * Set to disable the suggestion and disallow selecting it.
+     *
+     * @default false
+     */
     disabled?: boolean;
+    /**
+     * Optional custom suggestion node that will be rendered as given. Example, this is used by the TagManager
+     * to render a placeholder with an icon next to it.
+     */
+    customSuggestion?: React.ReactNode;
+    /**
+     * Additional key-value pairs that are not relevant for rendering but may be handled on your side.
+     */
     [name: string]: string | React.ReactNode;
 };
 export type SelectedSuggestion = {
@@ -9,6 +25,10 @@ export type SelectedSuggestion = {
     suggestion: AutoSuggestSuggestion;
 };
 export type AutoSuggestInputProps = {
+    /**
+     * A native input id attribute. Passed through as HTML attribute to the input element.
+     */
+    id?: string;
     /**
      * The value to be set for the input. Using this prop the input can be controlled from the outside.
      */
@@ -79,7 +99,11 @@ export type AutoSuggestInputProps = {
      */
     className?: string;
 };
-export type AutoSuggestProps = {
+export type AutoSuggestProps<T = AutoSuggestSuggestion> = {
+    /**
+     * A native input id attribute on the component root. Passed through as HTML attribute to the input element.
+     */
+    id?: string;
     /**
      * Object to define properties for the input component. For the input, the ClearableInput
      * component is used.
@@ -88,6 +112,10 @@ export type AutoSuggestProps = {
     /**
      * Array of items which will be displayed. Items can be arbitrary objects as long as they
      * have a label defined.
+     *
+     * __Important__: in case you specify your own custom renderer via `renderSuggestion` prop, you
+     * can pass our own object that does not need to have a label. In this case you may want to
+     * specify the `customSuggestionKey` to avoid react throwing an error of rendering menu items with the same key.
      */
     suggestions?: AutoSuggestSuggestion[];
     /**
@@ -138,6 +166,11 @@ export type AutoSuggestProps = {
      * @returns
      */
     renderSuggestion?: (suggestion: AutoSuggestSuggestion) => React.ReactNode;
+    /**
+     * When rendering your own custom suggestions that do not have the `label` attribute, use this prop to specify
+     * a unique value for each suggestion which will be used as a react key for the individual menu items.
+     */
+    customSuggestionKey?: string;
     /**
      * Boolean that disabled autoDropDirection and opens the dropdown-menu be above the toggle.
      * @default false

package/lib/es/components/autosuggest/AutoSuggest.js

@@ -18,7 +18,8 @@ const AutoSuggestAddons_1 = tslib_1.__importDefault(require("./AutoSuggestAddons
 const DropdownSpinner_1 = tslib_1.__importDefault(require("./DropdownSpinner"));
 const NoItemMessage_1 = tslib_1.__importDefault(require("./NoItemMessage"));
 const AutoSuggest = (props) => {
-    const { onSuggestionSelected = noop_1.default, onSuggestionsFetchRequested = noop_1.default, onSuggestionHighlighted = noop_1.default, renderSuggestion = suggestion => suggestion.label, getSuggestionValue = suggestion => suggestion.label, suggestions = [], autoDropDirection = true, pullRight = false, dropup = false, isLoading = false, openOnFocus = false, closeOnSelect = true, showSelectedItemsInInput = true, autoComplete = 'off', inputProps = {
+    const { id, onSuggestionSelected = noop_1.default, onSuggestionsFetchRequested = noop_1.default, onSuggestionHighlighted = noop_1.default, renderSuggestion, customSuggestionKey, getSuggestionValue, suggestions = [], autoDropDirection = true, pullRight = false, dropup = false, isLoading = false, openOnFocus = false, closeOnSelect = true, showSelectedItemsInInput = true, autoComplete = 'off', inputProps = {
+        id,
         disabled: false,
         onChange: noop_1.default,
         onClear: noop_1.default,
@@ -29,7 +30,7 @@ const AutoSuggest = (props) => {
         tabIndex: 0,
         value: undefined,
         icon: undefined,
-    }, leadingInputAddons, trailingInputAddons, noItemMessage, dropdownClassName = '', className = '' } = props, remainingProps = tslib_1.__rest(props, ["onSuggestionSelected", "onSuggestionsFetchRequested", "onSuggestionHighlighted", "renderSuggestion", "getSuggestionValue", "suggestions", "autoDropDirection", "pullRight", "dropup", "isLoading", "openOnFocus", "closeOnSelect", "showSelectedItemsInInput", "autoComplete", "inputProps", "leadingInputAddons", "trailingInputAddons", "noItemMessage", "dropdownClassName", "className"]);
+    }, leadingInputAddons, trailingInputAddons, noItemMessage, dropdownClassName = '', className = '' } = props, remainingProps = tslib_1.__rest(props, ["id", "onSuggestionSelected", "onSuggestionsFetchRequested", "onSuggestionHighlighted", "renderSuggestion", "customSuggestionKey", "getSuggestionValue", "suggestions", "autoDropDirection", "pullRight", "dropup", "isLoading", "openOnFocus", "closeOnSelect", "showSelectedItemsInInput", "autoComplete", "inputProps", "leadingInputAddons", "trailingInputAddons", "noItemMessage", "dropdownClassName", "className"]);
     const [isOpen, setIsOpen] = (0, react_1.useState)(false);
     const [value, setValue] = (0, react_1.useState)(inputProps.value || '');
     const [highlightedItemIndex, setHighlightedItemIndex] = (0, react_1.useState)(-1);
@@ -51,7 +52,8 @@ const AutoSuggest = (props) => {
     // has an overflow and can scroll. In this case, we need to scroll to the highlighted suggestion
     // so the user can see it
     (0, react_1.useEffect)(() => {
-        (0, scrollItemIntoView_1.scrollItemIntoView)(direction, dropdownMenuRef.current, getFocusedOptionNode());
+        const focusedItem = getFocusedOptionNode();
+        (0, scrollItemIntoView_1.scrollItemIntoView)(direction, dropdownMenuRef.current, focusedItem);
     }, [highlightedItemIndex, direction]);
     // Used to store the list item reference to allow highlighting a single node.
     // Update that list of nodes again when the suggestions change from the outside.
@@ -160,30 +162,30 @@ const AutoSuggest = (props) => {
             inputProps.onClear(event);
         }
     };
+    const getDefaultSuggestionValue = (suggestion) => {
+        var _a, _b;
+        return (_b = (_a = suggestion.label) !== null && _a !== void 0 ? _a : suggestion[customSuggestionKey !== null && customSuggestionKey !== void 0 ? customSuggestionKey : '']) !== null && _b !== void 0 ? _b : '';
+    };
     const onSuggestionClicked = (event, suggestion) => {
-        updateInputValue(getSuggestionValue(suggestion), event, closeOnSelect);
+        const getSuggestionValueFunction = getSuggestionValue ? getSuggestionValue : getDefaultSuggestionValue;
+        const suggestionValue = getSuggestionValueFunction(suggestion);
+        updateInputValue(suggestionValue, event, closeOnSelect);
         // fire callback with the selected item
         onSuggestionSelected(event, {
             suggestion,
-            suggestionValue: getSuggestionValue(suggestion),
+            suggestionValue,
         });
     };
-    const onMouseEnter = (event) => {
-        const newIndex = event.currentTarget.getAttribute('data-item-index');
-        if (newIndex) {
-            setHighlightedItemIndex(Number(newIndex));
-            handleHighlightedSuggestionChanged(Number(newIndex));
-        }
-    };
     const renderInput = () => {
-        const { icon, value: ignoredExternalValue } = inputProps, remainingInputProps = tslib_1.__rest(inputProps, ["icon", "value"]);
-        const clearableProps = Object.assign(Object.assign({}, remainingInputProps), { onClick: () => openMenu });
-        const input = ((0, jsx_runtime_1.jsx)(ClearableInput_1.default, Object.assign({}, clearableProps, { ref: inputRef, autoComplete: autoComplete, onChange: handleInputChange, onClear: clearInputValue, onFocus: handleFocus, value: showSelectedItemsInInput ? value : '' })));
+        const { id: inputPropId, icon, value: ignoredExternalValue } = inputProps, remainingInputProps = tslib_1.__rest(inputProps, ["id", "icon", "value"]);
+        const clearableProps = Object.assign({ id: id !== null && id !== void 0 ? id : inputPropId }, remainingInputProps);
+        const input = ((0, jsx_runtime_1.jsx)(ClearableInput_1.default, Object.assign({}, clearableProps, { ref: inputRef, autoComplete: autoComplete, onChange: handleInputChange, onClear: clearInputValue, onFocus: handleFocus, onClick: openMenu, value: showSelectedItemsInInput ? value : '' })));
         if (icon || leadingInputAddons || trailingInputAddons) {
             return ((0, jsx_runtime_1.jsx)(AutoSuggestAddons_1.default, Object.assign({ icon: icon, leadingInputAddons: leadingInputAddons, trailingInputAddons: trailingInputAddons }, { children: input })));
         }
         return input;
     };
+    const renderDefaultSuggestion = (suggestion) => suggestion.label;
     const renderDropdownMenu = () => {
         const dropdownMenuClasses = (0, classnames_1.default)('dropdown-menu', dropDirection.pullRight && 'pull-right', dropdownClassName);
         if (isLoading) {
@@ -194,10 +196,18 @@ const AutoSuggest = (props) => {
             return null;
         }
         return ((0, jsx_runtime_1.jsxs)("ul", Object.assign({ role: 'menu', className: dropdownMenuClasses, ref: dropdownMenuRef }, { children: [hasNoSuggestions && noItemMessage && (0, jsx_runtime_1.jsx)(NoItemMessage_1.default, { message: noItemMessage }, 'NoItemMessage'), suggestions.map((suggestion, index) => {
-                    if (suggestion.header) {
-                        return (0, jsx_runtime_1.jsx)(DropdownHeader_1.default, { label: suggestion.label }, suggestion.label);
+                    var _a;
+                    // In case a custom renderer is used but the customSuggestionKey is not set, throw an error
+                    if (renderSuggestion && !suggestion.label && !customSuggestionKey) {
+                        throw new Error('The "customSuggestionKey" need to be set when using a custom renderer ' +
+                            'and not using the "label" prop for suggestions');
+                    }
+                    const key = `index-${(_a = suggestion.label) !== null && _a !== void 0 ? _a : suggestion[customSuggestionKey !== null && customSuggestionKey !== void 0 ? customSuggestionKey : '']}`;
+                    if (suggestion.header && suggestion.label) {
+                        return (0, jsx_runtime_1.jsx)(DropdownHeader_1.default, { label: suggestion.label }, key);
                     }
-                    return ((0, jsx_runtime_1.jsx)(MenuItem_1.default, { active: index === highlightedItemIndex, disabled: suggestion.disabled, value: suggestion.customSuggestion ? suggestion.customSuggestion : renderSuggestion(suggestion), onSelect: (_, event) => onSuggestionClicked(event, suggestion), index: index, onMouseEnter: onMouseEnter }, `index-${suggestion.label}`));
+                    const renderFunction = renderSuggestion ? renderSuggestion : renderDefaultSuggestion;
+                    return ((0, jsx_runtime_1.jsx)(MenuItem_1.default, { active: index === highlightedItemIndex, disabled: suggestion.disabled, value: suggestion.customSuggestion ? suggestion.customSuggestion : renderFunction(suggestion), onSelect: (_, event) => onSuggestionClicked(event, suggestion), index: index }, key));
                 })] })));
     };
     const classes = (0, classnames_1.default)('AutoSuggest', 'dropdown', isOpen && 'open', dropDirection.dropup && 'dropup', className);

package/lib/es/components/bottomSheet/BottomSheet.d.ts

@@ -1,4 +1,4 @@
-import React, { MutableRefObject, PropsWithChildren, ReactNode } from 'react';
+import React, { type MutableRefObject, type PropsWithChildren, type ReactNode } from 'react';
 export type BottomSheetProps = {
     /**
      * Set the visibility of the bottom sheet. The component is already mounted and just moved offscreen.
@@ -52,7 +52,7 @@ export type BottomSheetProps = {
      * Set to `true` to render a modal like backdrop to emphasize the bottom sheet.
      * @default false
      */
-    useBackdrop?: boolean;
+    hasBackdrop?: boolean;
     /**
      * Callback function triggered when the backdrop is clicked. Usually used to close the bottom sheet.
      */

package/lib/es/components/bottomSheet/BottomSheet.js

@@ -11,7 +11,7 @@ const portalRoot_1 = require("../../utils/portalRoot");
 const OFFSET_POSITION = -1000;
 const DEFAULT_OFFSET_PX = 15;
 const BottomSheet = (props) => {
-    const { show = false, onClose, width, height, title, detach = false, detachOffset = DEFAULT_OFFSET_PX, useBackdrop = false, showCloseButton = true, showMaximizeButton = false, onHeightChange = () => { }, bodyRef, bodyClassName, className, children, onBackdropClick = () => { } } = props, remainingProps = tslib_1.__rest(props, ["show", "onClose", "width", "height", "title", "detach", "detachOffset", "useBackdrop", "showCloseButton", "showMaximizeButton", "onHeightChange", "bodyRef", "bodyClassName", "className", "children", "onBackdropClick"]);
+    const { show = false, onClose, width, height, title, detach = false, detachOffset = DEFAULT_OFFSET_PX, hasBackdrop = false, showCloseButton = true, showMaximizeButton = false, onHeightChange = () => { }, bodyRef, bodyClassName, className, children, onBackdropClick = () => { } } = props, remainingProps = tslib_1.__rest(props, ["show", "onClose", "width", "height", "title", "detach", "detachOffset", "hasBackdrop", "showCloseButton", "showMaximizeButton", "onHeightChange", "bodyRef", "bodyClassName", "className", "children", "onBackdropClick"]);
     const [isShown, setIsShown] = (0, react_1.useState)(show);
     const [isMaxHeight, setIsMaxHeight] = (0, react_1.useState)(false);
     (0, react_1.useEffect)(() => setIsShown(show), [show]);
@@ -52,6 +52,6 @@ const BottomSheet = (props) => {
                     height: isShown ? sheetHeight : 0,
                 } }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: 'bottom-sheet-header' }, { children: [title && ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: 'bottom-sheet-title display-flex justify-content-between padding-15 ' +
                                     'border border-top-none border-left-none border-right-none border-color-lighter' }, { children: (0, jsx_runtime_1.jsx)("div", Object.assign({ className: 'text-size-18' }, { children: title })) }))), showCloseButton && ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: 'bottom-sheet-close position-absolute top-10 right-10' }, { children: (0, jsx_runtime_1.jsx)("button", Object.assign({ type: 'button', className: 'btn btn-muted btn-sm btn-icon-only', onClick: handleToggle }, { children: (0, jsx_runtime_1.jsx)("span", { className: 'rioglyph rioglyph-remove' }) })) }))), showMaximizeButton && ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: 'bottom-sheet-maximize height-30 ' +
-                                    'position-absolute top-5 left-50pct translate-x-50 cursor-pointer', onClick: handleMaximize }, { children: (0, jsx_runtime_1.jsx)("div", { className: 'height-5 width-40 rounded bg-lighter' }) })))] })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: sheetBodyClasses, ref: bodyRef }, { children: isShown && children }))] })), useBackdrop && isShown && (0, jsx_runtime_1.jsx)("div", { className: 'bottom-sheet-backdrop', onClick: handleBackdropClick })] }), modalRoot);
+                                    'position-absolute top-5 left-50pct translate-x-50 cursor-pointer', onClick: handleMaximize }, { children: (0, jsx_runtime_1.jsx)("div", { className: 'height-5 width-40 rounded bg-lighter' }) })))] })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: sheetBodyClasses, ref: bodyRef }, { children: isShown && children }))] })), hasBackdrop && isShown && (0, jsx_runtime_1.jsx)("div", { className: 'bottom-sheet-backdrop', onClick: handleBackdropClick })] }), modalRoot);
 };
 exports.default = BottomSheet;