@rio-cloud/rio-uikit 0.16.4-beta.7 → 1.0.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/autoAnimateFrames.d.ts

@@ -0,0 +1 @@
+export declare const autoAnimateFrames: (el: any, action: any, oldCoords: any, newCoords: any) => KeyframeEffect;

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

@@ -0,0 +1,55 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.autoAnimateFrames = void 0;
+const auto_animate_1 = require("@formkit/auto-animate");
+const autoAnimateFrames = (el, action, oldCoords, newCoords) => {
+    let keyframes;
+    // supply a different set of keyframes for each action
+    if (action === 'add') {
+        keyframes = [
+            { transform: 'scale(0)', opacity: 0 },
+            { transform: 'scale(1.15)', opacity: 1 },
+            { transform: 'scale(1)', opacity: 1 },
+        ];
+    }
+    // keyframes can have as many "steps" as you prefer
+    // and you can use the 'offset' key to tune the timing
+    if (action === 'remove') {
+        keyframes = [
+            { transform: 'scale(1)', opacity: 1 },
+            { transform: 'scale(1.15)', opacity: 1 },
+            { transform: 'scale(0.75)', opacity: 0.1 },
+            { transform: 'scale(0.5)', opacity: 0 },
+        ];
+    }
+    if (action === 'remain') {
+        // for items that remain, calculate the delta
+        // from their old position to their new position
+        const deltaX = oldCoords.left - newCoords.left;
+        const deltaY = oldCoords.top - newCoords.top;
+        // use the getTransitionSizes() helper function to
+        // get the old and new widths of the elements
+        const [widthFrom, widthTo, heightFrom, heightTo] = (0, auto_animate_1.getTransitionSizes)(el, oldCoords, newCoords);
+        // set up our steps with our positioning keyframes
+        const start = { transform: `translate(${deltaX}px, ${deltaY}px)` };
+        const mid = { transform: `translate(${deltaX * -0.15}px, ${deltaY * -0.15}px)` };
+        const end = { transform: 'translate(0, 0)' };
+        // if the dimensions changed, animate them too.
+        if (widthFrom !== widthTo) {
+            start.width = `${widthFrom}px`;
+            mid.width = `${widthFrom >= widthTo ? widthTo / 1.05 : widthTo * 1.05}px`;
+            end.width = `${widthTo}px`;
+        }
+        if (heightFrom !== heightTo) {
+            start.height = `${heightFrom}px`;
+            mid.height = `${heightFrom >= heightTo ? heightTo / 1.05 : heightTo * 1.05}px`;
+            end.height = `${heightTo}px`;
+        }
+        keyframes = [start, mid, end];
+    }
+    // return our KeyframeEffect() and pass
+    // it the chosen keyframes.
+    // @ts-ignore
+    return new KeyframeEffect(el, keyframes, { duration: 600, easing: 'ease-out' });
+};
+exports.autoAnimateFrames = autoAnimateFrames;

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

@@ -0,0 +1 @@
+export function excludeFromList(list: any, itemId: any): any;

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

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.excludeFromList = void 0;
+const excludeFromList = (list, itemId) => list.filter(item => item !== itemId);
+exports.excludeFromList = excludeFromList;

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