@rio-cloud/rio-uikit 1.4.0 → 1.5.0

package/components/map/components/features/basics/polygonColors.d.ts

@@ -0,0 +1,252 @@
+export declare const colorMapColdplay: {
+    'color-coldplay-wine': {
+        stroke: string;
+        fill: string;
+    };
+    'color-coldplay-aubergine': {
+        stroke: string;
+        fill: string;
+    };
+    'color-coldplay-kashmir': {
+        stroke: string;
+        fill: string;
+    };
+    'color-coldplay-fountain': {
+        stroke: string;
+        fill: string;
+    };
+    'color-coldplay-turquoise': {
+        stroke: string;
+        fill: string;
+    };
+    'color-coldplay-bermuda': {
+        stroke: string;
+        fill: string;
+    };
+    'color-coldplay-moos': {
+        stroke: string;
+        fill: string;
+    };
+    'color-coldplay-primrose': {
+        stroke: string;
+        fill: string;
+    };
+    'color-coldplay-khaki': {
+        stroke: string;
+        fill: string;
+    };
+};
+export declare const colorMapWarmup: {
+    'color-warmup-crimson': {
+        stroke: string;
+        fill: string;
+    };
+    'color-warmup-victoria': {
+        stroke: string;
+        fill: string;
+    };
+    'color-warmup-cadillac': {
+        stroke: string;
+        fill: string;
+    };
+    'color-warmup-raspberry': {
+        stroke: string;
+        fill: string;
+    };
+    'color-warmup-cerise': {
+        stroke: string;
+        fill: string;
+    };
+    'color-warmup-charm': {
+        stroke: string;
+        fill: string;
+    };
+    'color-warmup-salmon': {
+        stroke: string;
+        fill: string;
+    };
+    'color-warmup-cherokee': {
+        stroke: string;
+        fill: string;
+    };
+    'color-warmup-corn': {
+        stroke: string;
+        fill: string;
+    };
+};
+export declare const colorMapGray: {
+    'gray-darkest': {
+        stroke: string;
+        fill: string;
+    };
+    'gray-darker': {
+        stroke: string;
+        fill: string;
+    };
+    'gray-dark': {
+        stroke: string;
+        fill: string;
+    };
+    gray: {
+        stroke: string;
+        fill: string;
+    };
+    'gray-light': {
+        stroke: string;
+        fill: string;
+    };
+    'gray-lighter': {
+        stroke: string;
+        fill: string;
+    };
+    'gray-lightest': {
+        stroke: string;
+        fill: string;
+    };
+    'gray-decent': {
+        stroke: string;
+        fill: string;
+    };
+};
+export declare const colorMapBrand: {
+    'brand-primary': {
+        stroke: string;
+        fill: string;
+    };
+    'brand-secondary': {
+        stroke: string;
+        fill: string;
+    };
+    'brand-info': {
+        stroke: string;
+        fill: string;
+    };
+    'brand-success': {
+        stroke: string;
+        fill: string;
+    };
+    'brand-warning': {
+        stroke: string;
+        fill: string;
+    };
+    'brand-danger': {
+        stroke: string;
+        fill: string;
+    };
+};
+export declare const colorMapStatus: {
+    'color-status-available': {
+        stroke: string;
+        fill: string;
+    };
+    'color-status-driving': {
+        stroke: string;
+        fill: string;
+    };
+    'color-status-resting': {
+        stroke: string;
+        fill: string;
+    };
+    'color-status-working': {
+        stroke: string;
+        fill: string;
+    };
+};
+export declare const colorMapMarker: {
+    'color-map-marker-text': {
+        stroke: string;
+        fill: string;
+    };
+    'color-map-marker-active': {
+        stroke: string;
+        fill: string;
+    };
+    'color-map-marker-asset': {
+        stroke: string;
+        fill: string;
+    };
+    'color-map-marker-poi': {
+        stroke: string;
+        fill: string;
+    };
+    'color-map-marker-geofence': {
+        stroke: string;
+        fill: string;
+    };
+    'color-map-marker-route': {
+        stroke: string;
+        fill: string;
+    };
+    'color-map-marker-info': {
+        stroke: string;
+        fill: string;
+    };
+    'color-map-marker-success': {
+        stroke: string;
+        fill: string;
+    };
+    'color-map-marker-warning': {
+        stroke: string;
+        fill: string;
+    };
+    'color-map-marker-danger': {
+        stroke: string;
+        fill: string;
+    };
+};
+export declare const colorMapRating: {
+    'color-rating-1': {
+        stroke: string;
+        fill: string;
+    };
+    'color-rating-2': {
+        stroke: string;
+        fill: string;
+    };
+    'color-rating-3': {
+        stroke: string;
+        fill: string;
+    };
+    'color-rating-4': {
+        stroke: string;
+        fill: string;
+    };
+    'color-rating-5': {
+        stroke: string;
+        fill: string;
+    };
+};
+export declare const colorMapHighlight: {
+    'color-highlight-darkest': {
+        stroke: string;
+        fill: string;
+    };
+    'color-highlight-darker': {
+        stroke: string;
+        fill: string;
+    };
+    'color-highlight-dark': {
+        stroke: string;
+        fill: string;
+    };
+    'color-highlight': {
+        stroke: string;
+        fill: string;
+    };
+    'color-highlight-light': {
+        stroke: string;
+        fill: string;
+    };
+    'color-highlight-lighter': {
+        stroke: string;
+        fill: string;
+    };
+    'color-highlight-lightest': {
+        stroke: string;
+        fill: string;
+    };
+    'color-highlight-decent': {
+        stroke: string;
+        fill: string;
+    };
+};

package/components/map/components/features/basics/polygonColors.js

@@ -0,0 +1,252 @@
+export const colorMapColdplay = {
+    'color-coldplay-wine': {
+        stroke: 'rgba(82, 13, 78, 0.65)',
+        fill: 'rgba(82, 13, 78, 0.25)',
+    },
+    'color-coldplay-aubergine': {
+        stroke: 'rgba(90, 72, 118, 0.65)',
+        fill: 'rgba(90, 72, 118, 0.25)',
+    },
+    'color-coldplay-kashmir': {
+        stroke: 'rgba(83, 110, 139, 0.65)',
+        fill: 'rgba(83, 110, 139, 0.25)',
+    },
+    'color-coldplay-fountain': {
+        stroke: 'rgba(103, 171, 197, 0.65)',
+        fill: 'rgba(103, 171, 197, 0.25)',
+    },
+    'color-coldplay-turquoise': {
+        stroke: 'rgba(78, 204, 193, 0.65)',
+        fill: 'rgba(78, 204, 193, 0.25)',
+    },
+    'color-coldplay-bermuda': {
+        stroke: 'rgba(121, 212, 179, 0.65)',
+        fill: 'rgba(121, 212, 179, 0.25)',
+    },
+    'color-coldplay-moos': {
+        stroke: 'rgba(161, 218, 163, 0.65)',
+        fill: 'rgba(161, 218, 163, 0.25)',
+    },
+    'color-coldplay-primrose': {
+        stroke: 'rgba(199, 226, 145, 0.65)',
+        fill: 'rgba(199, 226, 145, 0.25)',
+    },
+    'color-coldplay-khaki': {
+        stroke: 'rgba(240, 235, 131, 0.65)',
+        fill: 'rgba(240, 235, 131, 0.25)',
+    },
+};
+export const colorMapWarmup = {
+    'color-warmup-crimson': {
+        stroke: 'rgba(49, 20, 79, 0.65)',
+        fill: 'rgba(49, 20, 79, 0.25)',
+    },
+    'color-warmup-victoria': {
+        stroke: 'rgba(73, 61, 109, 0.65)',
+        fill: 'rgba(73, 61, 109, 0.25)',
+    },
+    'color-warmup-cadillac': {
+        stroke: 'rgba(126, 62, 114, 0.65)',
+        fill: 'rgba(126, 62, 114, 0.25)',
+    },
+    'color-warmup-raspberry': {
+        stroke: 'rgba(178, 54, 114, 0.65)',
+        fill: 'rgba(178, 54, 114, 0.25)',
+    },
+    'color-warmup-cerise': {
+        stroke: 'rgba(231, 36, 114, 0.65)',
+        fill: 'rgba(231, 36, 114, 0.25)',
+    },
+    'color-warmup-charm': {
+        stroke: 'rgba(201, 119, 141, 0.65)',
+        fill: 'rgba(201, 119, 141, 0.25)',
+    },
+    'color-warmup-salmon': {
+        stroke: 'rgba(241, 149, 136, 0.65)',
+        fill: 'rgba(241, 149, 136, 0.25)',
+    },
+    'color-warmup-cherokee': {
+        stroke: 'rgba(245, 187, 137, 0.65)',
+        fill: 'rgba(245, 187, 137, 0.25)',
+    },
+    'color-warmup-corn': {
+        stroke: 'rgba(253, 224, 130, 0.65)',
+        fill: 'rgba(253, 224, 130, 0.25)',
+    },
+};
+export const colorMapGray = {
+    'gray-darkest': {
+        stroke: 'rgba(42, 55, 64, 0.65)',
+        fill: 'rgba(42, 55, 64, 0.25)',
+    },
+    'gray-darker': {
+        stroke: 'rgba(76, 86, 103, 0.65)',
+        fill: 'rgba(76, 86, 103, 0.25)',
+    },
+    'gray-dark': {
+        stroke: 'rgba(105, 122, 139, 0.65)',
+        fill: 'rgba(105, 122, 139, 0.25)',
+    },
+    gray: {
+        stroke: 'rgba(167, 175, 187, 0.65)',
+        fill: 'rgba(167, 175, 187, 0.25)',
+    },
+    'gray-light': {
+        stroke: 'rgba(208, 216, 222, 0.65)',
+        fill: 'rgba(208, 216, 222, 0.25)',
+    },
+    'gray-lighter': {
+        stroke: 'rgba(229, 235, 240, 0.65)',
+        fill: 'rgba(229, 235, 240, 0.25)',
+    },
+    'gray-lightest': {
+        stroke: 'rgba(246, 248, 249, 0.65)',
+        fill: 'rgba(246, 248, 249, 0.25)',
+    },
+    'gray-decent': {
+        stroke: 'rgba(253, 253, 253, 0.65)',
+        fill: 'rgba(253, 253, 253, 0.25)',
+    },
+};
+export const colorMapBrand = {
+    'brand-primary': {
+        stroke: 'rgba(48, 180, 192, 0.65)',
+        fill: 'rgba(48, 180, 192, 0.25)',
+    },
+    'brand-secondary': {
+        stroke: 'rgba(178, 54, 114, 0.65)',
+        fill: 'rgba(178, 54, 114, 0.25)',
+    },
+    'brand-info': {
+        stroke: 'rgba(75, 128, 166, 0.65)',
+        fill: 'rgba(75, 128, 166, 0.25)',
+    },
+    'brand-success': {
+        stroke: 'rgba(92, 184, 92, 0.65)',
+        fill: 'rgba(92, 184, 92, 0.25)',
+    },
+    'brand-warning': {
+        stroke: 'rgba(255, 142, 60, 0.65)',
+        fill: 'rgba(255, 142, 60, 0.25)',
+    },
+    'brand-danger': {
+        stroke: 'rgba(226, 40, 55, 0.65)',
+        fill: 'rgba(226, 40, 55, 0.25)',
+    },
+};
+export const colorMapStatus = {
+    'color-status-available': {
+        stroke: 'rgba(35, 155, 125, 0.65)',
+        fill: 'rgba(35, 155, 125, 0.25)',
+    },
+    'color-status-driving': {
+        stroke: 'rgba(54, 144, 174, 0.65)',
+        fill: 'rgba(54, 144, 174, 0.25)',
+    },
+    'color-status-resting': {
+        stroke: 'rgba(98, 107, 114, 0.65)',
+        fill: 'rgba(98, 107, 114, 0.25)',
+    },
+    'color-status-working': {
+        stroke: 'rgba(148, 72, 139, 0.65)',
+        fill: 'rgba(148, 72, 139, 0.25)',
+    },
+};
+export const colorMapMarker = {
+    'color-map-marker-text': {
+        stroke: 'rgba(255, 255, 255, 0.65)',
+        fill: 'rgba(255, 255, 255, 0.25)',
+    },
+    'color-map-marker-active': {
+        stroke: 'rgba(255, 255, 255, 0.65)',
+        fill: 'rgba(255, 255, 255, 0.25)',
+    },
+    'color-map-marker-asset': {
+        stroke: 'rgba(42, 55, 64, 0.65)',
+        fill: 'rgba(42, 55, 64, 0.25)',
+    },
+    'color-map-marker-poi': {
+        stroke: 'rgba(203, 57, 149, 0.65)',
+        fill: 'rgba(203, 57, 149, 0.25)',
+    },
+    'color-map-marker-geofence': {
+        stroke: 'rgba(242, 84, 95, 0.65)',
+        fill: 'rgba(242, 84, 95, 0.25)',
+    },
+    'color-map-marker-route': {
+        stroke: 'rgba(54, 175, 215, 0.65)',
+        fill: 'rgba(54, 175, 215, 0.25)',
+    },
+    'color-map-marker-info': {
+        stroke: 'rgba(63, 117, 155, 0.65)',
+        fill: 'rgba(63, 117, 155, 0.25)',
+    },
+    'color-map-marker-success': {
+        stroke: 'rgba(92, 184, 92, 0.65)',
+        fill: 'rgba(92, 184, 92, 0.25)',
+    },
+    'color-map-marker-warning': {
+        stroke: 'rgba(255, 142, 60, 0.65)',
+        fill: 'rgba(255, 142, 60, 0.25)',
+    },
+    'color-map-marker-danger': {
+        stroke: 'rgba(226, 40, 55, 0.65)',
+        fill: 'rgba(226, 40, 55, 0.25)',
+    },
+};
+export const colorMapRating = {
+    'color-rating-1': {
+        stroke: 'rgba(226, 40, 55, 0.65)',
+        fill: 'rgba(226, 40, 55, 0.25)',
+    },
+    'color-rating-2': {
+        stroke: 'rgba(255, 142, 60, 0.65)',
+        fill: 'rgba(255, 142, 60, 0.25)',
+    },
+    'color-rating-3': {
+        stroke: 'rgba(248, 197, 117, 0.65)',
+        fill: 'rgba(248, 197, 117, 0.25)',
+    },
+    'color-rating-4': {
+        stroke: 'rgba(92, 184, 92, 0.65)',
+        fill: 'rgba(92, 184, 92, 0.25)',
+    },
+    'color-rating-5': {
+        stroke: 'rgba(75, 146, 76, 0.65)',
+        fill: 'rgba(75, 146, 76, 0.25)',
+    },
+};
+export const colorMapHighlight = {
+    'color-highlight-darkest': {
+        stroke: 'rgba(21, 75, 86, 0.65)',
+        fill: 'rgba(21, 75, 86, 0.25)',
+    },
+    'color-highlight-darker': {
+        stroke: 'rgba(32, 110, 126, 0.65)',
+        fill: 'rgba(32, 110, 126, 0.25)',
+    },
+    'color-highlight-dark': {
+        stroke: 'rgba(38, 136, 151, 0.65)',
+        fill: 'rgba(38, 136, 151, 0.25)',
+    },
+    'color-highlight': {
+        stroke: 'rgba(48, 180, 192, 0.65)',
+        fill: 'rgba(48, 180, 192, 0.25)',
+    },
+    'color-highlight-light': {
+        stroke: 'rgba(141, 219, 227, 0.65)',
+        fill: 'rgba(141, 219, 227, 0.25)',
+    },
+    'color-highlight-lighter': {
+        stroke: 'rgba(206, 240, 243, 0.65)',
+        fill: 'rgba(206, 240, 243, 0.25)',
+    },
+    'color-highlight-lightest': {
+        stroke: 'rgba(235, 249, 250, 0.65)',
+        fill: 'rgba(235, 249, 250, 0.25)',
+    },
+    'color-highlight-decent': {
+        stroke: 'rgba(243, 251, 252, 0.65)',
+        fill: 'rgba(243, 251, 252, 0.25)',
+    },
+};

package/components/map/utils/mapTypes.d.ts

@@ -161,6 +161,6 @@ export type IncidentDataPoint = {
     roadClosed: boolean;
     position: Position;
 };
-export declare const markerColorOptions: readonly ["bg-map-marker-asset", "bg-map-marker-poi", "bg-map-marker-geofence", "bg-map-marker-route", "bg-map-marker-info", "bg-map-marker-success", "bg-map-marker-warning", "bg-map-marker-danger"];
+export declare const markerColorOptions: readonly ["bg-map-marker-asset", "bg-map-marker-poi", "bg-map-marker-geofence", "bg-map-marker-route", "bg-map-marker-info", "bg-map-marker-success", "bg-map-marker-warning", "bg-map-marker-danger", "bg-map-marker-restrictions"];
 export type MarkerColor = (typeof markerColorOptions)[number];
 export declare const markerColorMapping: Record<MarkerColor, string>;

package/components/map/utils/mapTypes.js

@@ -19,6 +19,7 @@ export const markerColorOptions = [
     'bg-map-marker-success',
     'bg-map-marker-warning',
     'bg-map-marker-danger',
+    'bg-map-marker-restrictions',
 ];
 export const markerColorMapping = {
     'bg-map-marker-asset': '--color-map-marker-asset',
@@ -29,4 +30,5 @@ export const markerColorMapping = {
     'bg-map-marker-success': '--color-map-marker-success',
     'bg-map-marker-warning': '--color-map-marker-warning',
     'bg-map-marker-danger': '--color-map-marker-danger',
+    'bg-map-marker-restrictions': '--color-map-marker-restrictions',
 };

package/components/mapMarker/SingleMapMarker.d.ts

@@ -1,6 +1,6 @@
-import { type ReactNode } from 'react';
+import { type ComponentProps, type ReactNode } from 'react';
 import { type MarkerColor } from '../map/utils/mapTypes';
-export type SingleMapMarkerProps = {
+export type SingleMapMarkerProps = ComponentProps<'div'> & {
     /**
      * Defines the rotation of the arrow in deg.
      *
@@ -73,6 +73,7 @@ export type SingleMapMarkerProps = {
      * - `bg-map-marker-success`
      * - `bg-map-marker-warning`
      * - `bg-map-marker-danger`
+     * - `bg-map-marker-restrictions`
      *
      * @default 'bg-map-marker-asset'
      */

package/components/mapMarker/SingleMapMarker.js

@@ -16,12 +16,12 @@ const MapStateIndicator = (props) => {
 };
 const getIcons = (iconNames = []) => iconNames.map((name, index) => (_jsx("div", { className: `rio-map-icon rioglyph rioglyph-${name}` }, `rio-map-icon-${name}-${index}`)));
 const SingleMapMarker = (props) => {
-    const { bearing = DEFAULT_BEARING, name, warningCount = 0, exceptionCount = 0, active = false, clickable = true, fixed = false, moving = false, pinging = false, anchorIconName, stateIconName, iconNames, markerColor = 'bg-map-marker-asset', textColor, anchorSize, markerOnHover = false, anchorOnly = !name && !iconNames, cursor = 'cursor-pointer', } = props;
+    const { bearing = DEFAULT_BEARING, name, warningCount = 0, exceptionCount = 0, active = false, clickable = true, fixed = false, moving = false, pinging = false, anchorIconName, stateIconName, iconNames, markerColor = 'bg-map-marker-asset', textColor, anchorSize, markerOnHover = false, anchorOnly = !name && !iconNames, cursor = 'cursor-pointer', className, style, } = props;
     const largeAnchor = anchorSize === 'lg';
-    const classes = classNames(active && 'active', 'rio-map-marker', 'rio-map-marker-bottom-center', !clickable && 'not-clickable');
+    const classes = classNames(active && 'active', 'rio-map-marker', 'rio-map-marker-bottom-center', !clickable && 'not-clickable', className);
     const anchorClasses = classNames('rio-map-anchor', largeAnchor ? 'rio-map-anchor-lg' : '', cursor);
     const singleClasses = classNames('rio-map-single', fixed && 'fixed', moving && 'moving', textColor, markerOnHover && 'visible-on-hover', active && 'active', pinging && 'pinging', cursor);
     const markerBackgroundColor = `var(${markerColorMapping[markerColor]})`;
-    return (_jsx("div", Object.assign({ className: classes, style: { color: markerBackgroundColor }, "data-marker-type": markerColor.replace('bg-', 'single-') }, { children: _jsxs("div", Object.assign({ className: 'rio-map-marker-translate' }, { children: [!anchorOnly && (_jsxs(_Fragment, { children: [_jsxs("div", Object.assign({ className: singleClasses }, { children: [_jsx(MapStateIndicator, { moving: moving, bearing: bearing, stateIconName: stateIconName }), getIcons(iconNames), name && _jsx("div", Object.assign({ className: 'rio-map-name' }, { children: name })), exceptionCount > 0 && _jsx("div", Object.assign({ className: 'rio-map-bubble exception' }, { children: exceptionCount })), warningCount > 0 && _jsx("div", Object.assign({ className: 'rio-map-bubble warning' }, { children: warningCount }))] })), _jsx("div", { className: 'rio-map-anchor-arrow' })] })), _jsx("div", Object.assign({ className: anchorClasses }, { children: anchorIconName && largeAnchor && _jsx("span", { className: `rioglyph rioglyph-${anchorIconName}` }) }))] })) })));
+    return (_jsx("div", Object.assign({ className: classes, style: Object.assign(Object.assign({}, style), { color: markerBackgroundColor }), "data-marker-type": markerColor.replace('bg-', 'single-') }, { children: _jsxs("div", Object.assign({ className: 'rio-map-marker-translate' }, { children: [!anchorOnly && (_jsxs(_Fragment, { children: [_jsxs("div", Object.assign({ className: singleClasses }, { children: [_jsx(MapStateIndicator, { moving: moving, bearing: bearing, stateIconName: stateIconName }), getIcons(iconNames), name && _jsx("div", Object.assign({ className: 'rio-map-name' }, { children: name })), exceptionCount > 0 && _jsx("div", Object.assign({ className: 'rio-map-bubble exception' }, { children: exceptionCount })), warningCount > 0 && _jsx("div", Object.assign({ className: 'rio-map-bubble warning' }, { children: warningCount }))] })), _jsx("div", { className: 'rio-map-anchor-arrow' })] })), _jsx("div", Object.assign({ className: anchorClasses }, { children: anchorIconName && largeAnchor && _jsx("span", { className: `rioglyph rioglyph-${anchorIconName}` }) }))] })) })));
 };
 export default SingleMapMarker;

package/components/selects/BaseSelectDropdown.d.ts

@@ -48,7 +48,6 @@ export type BaseSelectDropdownProps<T extends SelectOption> = {
     noItemMessage?: string | React.ReactNode;
     focusedItemIndex?: number;
     dropdownClassName?: string;
-    requestItemDOMValues?: boolean;
     keyboardUsed?: boolean;
     useActiveClass?: boolean;
 };

package/components/selects/BaseSelectDropdown.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // @ts-ignore-next-line importsNotUsedAsValues
-import { useLayoutEffect, useRef, useState } from 'react';
+import { useEffect, useLayoutEffect, useRef, useState } from 'react';
 import classNames from 'classnames';
 import isEmpty from 'lodash/fp/isEmpty';
 import noop from 'lodash/fp/noop';
@@ -40,6 +40,12 @@ const BaseSelectDropdown = (props) => {
             }
         }
     }, [dropDirection, dropdownMenuRef]);
+    // biome-ignore lint/correctness/useExhaustiveDependencies: <explanation>
+    useEffect(() => {
+        if (dropdownMenuRef.current) {
+            updateDOMValues(updateItemDOMValues());
+        }
+    }, [dropdownMenuRef.current]);
     // update internal state for isOpen
     const [previousIsOpen, setPreviousIsOpen] = useState(isOpen);
     if (isOpen && !previousIsOpen) {

package/components/selects/Multiselect.js

@@ -24,7 +24,6 @@ const Multiselect = (props) => {
     const [filteredOptions, setFilteredOptions] = useState(options);
     const [itemDOMValues, setItemDOMValues] = useState([]);
     const [focusedItemIndex, setFocusedItemIndex] = useState(DEFAULT_FOCUSED_ITEM_INDEX);
-    const [requestItemDOMValues, setRequestItemDOMValues] = useState(false);
     const [keyboardUsed, setKeyboardUsed] = useState(false);
     const refToggle = useRef(null);
     const refMultiSelectWrapper = useRef(null);
@@ -57,12 +56,10 @@ const Multiselect = (props) => {
     if (!isEqual(options, previousOptions)) {
         updateSelectedItems(options, value);
         setFilteredOptions(options);
-        setRequestItemDOMValues(true);
         setPreviousOptions(options);
     }
     const updateDOMValues = (updatedItemDOMValues = []) => {
         setItemDOMValues(updatedItemDOMValues);
-        setRequestItemDOMValues(false);
     };
     const renderFilter = () => (_jsx(MultiselectToggleFilter, { isActive: isFilterActive || !!filterValue, selectedItemIds: selectedItemIds, filterValue: filterValue, onFilterChange: handleFilterChange, multiline: multiline }));
     const renderSelection = () => {
@@ -86,7 +83,7 @@ const Multiselect = (props) => {
             option.selected = selectedItemIds.indexOf(option.id) !== -1;
             return option;
         });
-        return (_jsx(BaseSelectDropdown, { isOpen: isOpen, isLoading: isLoading, options: nonSelectedOptions, focusedItemIndex: focusedItemIndex, keyboardUsed: keyboardUsed, updateDOMValues: updateDOMValues, onSelect: onOptionChange, onClose: closeMenu, noItemMessage: noItemMessage, pullRight: pullRight, useActiveClass: true, dropup: dropup, autoDropDirection: autoDropDirection, requestItemDOMValues: requestItemDOMValues }));
+        return (_jsx(BaseSelectDropdown, { isOpen: isOpen, isLoading: isLoading, options: nonSelectedOptions, focusedItemIndex: focusedItemIndex, keyboardUsed: keyboardUsed, updateDOMValues: updateDOMValues, onSelect: onOptionChange, onClose: closeMenu, noItemMessage: noItemMessage, pullRight: pullRight, useActiveClass: true, dropup: dropup, autoDropDirection: autoDropDirection }));
     };
     const handleFilterChange = (event) => {
         event.preventDefault();

package/components/selects/Select.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { type SelectOption } from './BaseSelectDropdown';
-import { WithFeedbackAndAddonProps } from './WithFeedbackAndAddon';
+import { type WithFeedbackAndAddonProps } from './WithFeedbackAndAddon';
 export type { SelectOption } from './BaseSelectDropdown';
 export type SelectProps<T extends SelectOption> = Omit<WithFeedbackAndAddonProps, 'bsSize'> & {
     /**

package/components/selects/Select.js

@@ -23,7 +23,6 @@ const Select = (props) => {
     const [filteredOptions, setFilteredOptions] = useState(options);
     const [itemDOMValues, setItemDOMValues] = useState([]);
     const [focusedItemIndex, setFocusedItemIndex] = useState(DEFAULT_FOCUSED_ITEM_INDEX);
-    const [requestItemDOMValues, setRequestItemDOMValues] = useState(false);
     const [keyboardUsed, setKeyboardUsed] = useState(false);
     const refSelect = useRef();
     const refToggle = useRef(null);
@@ -44,7 +43,6 @@ const Select = (props) => {
     if (!isEqual(options, previousOptions)) {
         updateSelectedItem(options, value);
         setFilteredOptions(options);
-        setRequestItemDOMValues(true);
         setPreviousOptions(options);
     }
     const [previousValue, setPreviousValue] = useState(value);
@@ -54,7 +52,6 @@ const Select = (props) => {
     }
     const updateDOMValues = (itemDOMValuesToUpdated = []) => {
         setItemDOMValues(itemDOMValuesToUpdated);
-        setRequestItemDOMValues(false);
     };
     const handleClearSelectedItem = () => {
         setSelectedItem(null);
@@ -82,7 +79,7 @@ const Select = (props) => {
         else if (keyboardUsed) {
             currentFocusedItemIndex = 0;
         }
-        return (_jsx(BaseSelectDropdown, { isOpen: isOpen, isLoading: isLoading, options: filteredOptions, focusedItemIndex: currentFocusedItemIndex, keyboardUsed: keyboardUsed, updateDOMValues: updateDOMValues, onSelect: onOptionChange, onClose: closeMenu, noItemMessage: noItemMessage, pullRight: pullRight, dropup: dropup, autoDropDirection: autoDropDirection, dropdownClassName: dropdownClassName, requestItemDOMValues: requestItemDOMValues }));
+        return (_jsx(BaseSelectDropdown, { isOpen: isOpen, isLoading: isLoading, options: filteredOptions, focusedItemIndex: currentFocusedItemIndex, keyboardUsed: keyboardUsed, updateDOMValues: updateDOMValues, onSelect: onOptionChange, onClose: closeMenu, noItemMessage: noItemMessage, pullRight: pullRight, dropup: dropup, autoDropDirection: autoDropDirection, dropdownClassName: dropdownClassName }));
     };
     const handleFilterChange = (event) => {
         event.preventDefault();