impact-ui 4.0.0-alpha.2 → 4.0.0-alpha.21

package/dist/components/Select/index.js

@@ -1,29 +1,35 @@
+!function(){"use strict";try{if("undefined"!=typeof document){var e=document.createElement("style");e.appendChild(document.createTextNode('*,:after,:before{box-sizing:border-box}body,textarea{font-style:normal;font-weight:500}a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{border:0;font-size:100%;font:inherit;margin:0;padding:0;vertical-align:initial}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:"";content:none}table{border-collapse:collapse;border-spacing:0}body{font-family:Manrope,sans-serif}.impact-notification-separator{background-color:#d9dde7;display:inline-block;height:16px;width:1.5px}.impact-notification-horizontal-separator{background-color:#d9dde7;display:inline-block;height:1px;width:100%}ul.storybook-order-list{list-style-type:disc;padding-left:12px}ul.storybook-order-list li{font-size:12px;line-height:20px;padding-bottom:8px}ul.storybook-order-list li strong{font-weight:800}ul.storybook-order-child-list{list-style-type:circle;padding-left:20px}ul.storybook-order-child-list li{font-size:12px;line-height:20px;padding-bottom:8px}ul.storybook-order-child-list li strong{font-weight:800}.ia-select-main-container-v3{align-items:center;display:flex;gap:5px}.top-orientation{align-items:flex-start;flex-direction:column}.isAgGridCellRenderer{width:100%}.isAgGridCellRenderer .ia-select-button-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:100%}.isAgGridCellRenderer .ia-select-button-text-span{display:block;flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ia-select-label-v3{line-height:18px;white-space:nowrap}.ia-select-container-v3{position:relative}.ia-select-container-v3 [aria-disabled=true]{background-color:#f8f9fb!important;border:1px solid #d9dde7!important;border-radius:8px;cursor:not-allowed;pointer-events:none}.multi-select__control{display:none}.multi-select__option{font-size:14px;padding:8px 16px}@media screen and (max-width:1399px) and (min-width:1200px){.multi-select__option{font-size:12px;padding:5px 16px}}.multi-select__option--is-selected{background-color:#984d4d;color:#1d1d1d}.multi-select__option--is-selected:active{background-color:#cfafaf}.loading-option{color:green;pointer-events:none}.loading-option-multi label{color:#ff0;pointer-events:none}.ia-select-container-v3-styled-menu{background:#fff;border-radius:4px;box-shadow:0 3px 6px #00000040;margin-top:4px;min-width:240px;padding:8px 0;position:absolute;z-index:2;z-index:99999}.ia-select-container-v3-blanket{bottom:0;left:0;position:fixed;right:0;top:0;z-index:1}.ia-select-styled-dropdown-main-button{align-items:center;background:#fff;border:1px solid #0000001f;border-radius:4px;box-sizing:border-box;color:#1d1d1d;cursor:pointer;display:flex;font-size:14px;height:37px;justify-content:space-between;padding:8px 12px;text-align:left;width:100%}@media screen and (max-width:1399px) and (min-width:1200px){.ia-select-styled-dropdown-main-button{font-size:12px;height:28px}}.ia-select-styled-dropdown-main-button.is-with-clearable{gap:16px}.ia-select-button-clear-icon{background-image:url(https://impact-kit.devs.iaproducts.ai/api/v1/files/uploads/impact-ui/prod/icons/notification-close.svg);background-position:end;background-repeat:no-repeat;background-size:10px;height:10px;margin-left:10px;position:absolute;right:40px;top:10px;width:10px}.ia-select-chevron-icon{background:url(https://impact-kit.devs.iaproducts.ai/api/v1/files/uploads/impact-ui/prod/icons/select-chevron.svg) no-repeat;background-position:50%;background-size:10px;display:inline-block;flex-shrink:0;height:10px;margin-left:10px;transform:rotate(0);width:10px}.ia-select-chevron-icon.open{transform:rotate(180deg)}.ia-select-search-box{background:url(https://impact-kit.devs.iaproducts.ai/api/v1/files/uploads/impact-ui/prod/icons/search.svg) no-repeat;background-position:16px;background-size:12px;border:none;border-bottom:1px solid blue;box-sizing:border-box;font-family:Poppins,sans-serif;font-size:14px;height:37px;outline:none;padding:0 16px 0 34px;width:100%}@media screen and (max-width:1399px) and (min-width:1200px){.ia-select-search-box{height:28px}}.ia-select-search-box::placeholder{color:#b4bac7}.ia-select-clear-all-button{background-color:initial;border:none;box-sizing:border-box;color:#60697d;cursor:pointer;font-size:12px;font-weight:400;height:26px;line-height:18px}.ia-select-selectAll-container{align-items:center;box-sizing:border-box;display:flex;height:35px;justify-content:space-between;margin-bottom:2px;padding:4px 12px;position:relative}.ia-select-selectAll-container:after{background:#d9dde7;bottom:-3px;content:" ";height:1px;left:-6px;position:absolute;right:-6px}.ia-select-selectAll-container:hover{background-color:#f5f6fa;border-radius:8px}.ia-select-selectAll-container .impact-form-checkbox-container .MuiFormControlLabel-label{color:#1f2b4d}.menulistScroll{margin-top:3px}.menulistScroll .ia-select-no-options-message{align-items:center;color:#60697d;display:flex;font-weight:500;height:50px;justify-content:center;line-height:16px}.ia-select-max-selectable-options{background:url(https://impact-kit.devs.iaproducts.ai/api/v1/files/uploads/impact-ui/prod/icons/selectInfoIcon.svg) no-repeat;background-position:12px 10px;border-top:1px solid #f5f6fa;color:#60697d;display:flex;font-family:Manrope,sans-serif;font-size:12px;font-weight:500;line-height:16px;padding:9px 0 4px 34px}.ia-select-button-text{align-items:center;color:#1f2b4d;display:flex;font-family:Manrope,sans-serif!important;font-weight:500;gap:8px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ia-select-button-text svg{font-size:18px}.ia-select-button-text.impact-select-table{align-items:center;box-sizing:border-box;display:flex;flex:1 1 auto;gap:0;max-width:100%;min-width:0;overflow:hidden;width:100%}.ia-select-button-text.impact-select-table .ia-select-button-text-span{box-sizing:border-box;display:block;flex:1;max-width:100%;min-width:0;overflow:hidden;position:relative;text-overflow:ellipsis;white-space:nowrap;width:100%}.ia-select-button-text-full-width{width:90%}.ia-select-button-text-span{display:inline-block;font-weight:500;max-width:100%;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.placeholder .ia-select-button-text-span{font-weight:400}.ia-select-button-text.placeholder{color:#b4bac7;font-weight:400}.select-label-with-icon{color:#1f2b4d;font-family:Manrope,sans-serif;font-size:14px;font-weight:500;height:20px;line-height:20px;text-align:left;width:100%}.select-label-with-icon span{display:inline-block}.select-label-with-icon .selected-children-count{color:#6b7280;font-size:12px;margin-left:4px}.select-label-with-icon-multi span{max-width:153px}.impact-checkbox-label.disabled .select-label-with-icon{color:#b4bac7!important}.select-options-tag-group{display:flex;gap:4px;margin-top:4px;position:absolute;width:70px}.select-options-tag-group span{width:100%}.select-options-tag-group span>div{background-color:#eceefd;border:none!important}.select-options-tag-list{background:#fff;border-radius:12px;box-shadow:0 4px 8px #0000001f;display:flex;flex-direction:column;margin-top:2px;max-height:200px;overflow-y:auto;padding:4px 8px;position:absolute;width:91px;z-index:10}.tag-group-more{background:url(https://impact-kit.devs.iaproducts.ai/api/v1/files/uploads/impact-ui/prod/icons/menu-ext.svg) 50% no-repeat;display:inline-block;display:flex;height:20px;transform:rotate(90deg);width:14px!important;z-index:10}.tag-group-open>div{background-color:#eceefd}.ia-select-container-v3-styled-menu{border:none;border-radius:12px;box-shadow:0 1px 6px #1a277c24;margin-top:6px;padding:8px 6px}.menulistScroll{max-height:300px!important;overflow-y:hidden!important;padding-top:0!important}.menulistScroll .css-d7l1ni-option{background-color:initial;border-radius:8px;height:35px;margin-bottom:2px}.menulistScroll .css-d7l1ni-option:focus,.menulistScroll .css-d7l1ni-option:hover{background-color:#f5f6fa}.ia-select-search-box{background-position:12px;border-bottom:none;font-family:Manrope,sans-serif;font-weight:400;height:35px;padding-left:30px}.ia-select-search-box::placeholder{font-weight:400}.ia-select-search-box:not(:placeholder-shown){font-weight:500}.css-13cymwt-control{display:none!important}.ia-select-label-v3{color:#60697d;font-family:Manrope,sans-serif;font-size:12px;font-weight:500}.ia-select-main-container-v3{gap:6px}.css-tr4s17-option{background-color:#edf0ff!important;border-radius:8px;color:#1f2b4d!important;font-family:Manrope,sans-serif;font-weight:500;height:36px;margin-bottom:2px}.ia-select-styled-dropdown-main-button{border:1px solid #c3c8d4;border-radius:8px;color:#1f2b4d;font-family:Manrope,sans-serif!important;font-weight:500;height:32px}.ia-select-styled-dropdown-main-button:hover{border:1px solid #4259ee}.impact-select-error,.impact-select-error:hover{border:1px solid #e15554!important}.impact-select-disabled{background-color:#f2f4fb}.impact-select-disabled,.impact-select-disabled:hover{border:1px solid #d9dde7}.ia-select-loading-container{align-items:center;display:flex;justify-content:center;min-height:100px;width:100%}.default-select-tooltip,.select-tooltip{z-index:999999!important}.ia-select-dropdown-container{gap:4px}.ia-select-dropdown-v3{position:relative}.ia-select-dropdown-v3 .select__menu{position:absolute;z-index:1}.ia-select-dropdown-v3 .css-1s9izoc,.ia-select-dropdown-v3 .css-qr46ko{padding:0}.ia-select-dropdown-v3 .css-1s9izoc{border-bottom:1px solid #d9dde7}.ia-select-dropdown-v3 .css-1s9izoc:last-child{border-bottom:none}.ia-select-dropdown-v3 .ia-select-group-heading-container{align-items:center;display:flex;height:35px;justify-content:space-between;padding:0 12px}.ia-select-dropdown-v3 .ia-select-group-heading-container .css-jtaw72-group{color:#b4bac7;font-size:12px;font-weight:700;line-height:20px;padding:0;text-transform:capitalize}.ia-select-dropdown-v3 .ia-select-option{background-color:initial;cursor:pointer;margin-bottom:2px}.ia-select-dropdown-v3 .ia-select-option:has(.disabled){opacity:.5;pointer-events:none}.ia-select-dropdown-v3 .ia-select-option.submenu-active,.ia-select-dropdown-v3 .ia-select-option:hover{background-color:#f5f6fa;border-radius:8px}.select-option-content .select-submenu-chevron{bottom:11px;color:#60697d;height:16px;position:absolute;right:12px;width:16px}.ia-select-submenu-header{background-color:#f9fafb;border-bottom:1px solid #e5e7eb;padding:8px 12px}.ia-select-submenu-header .ia-select-submenu-back{align-items:center;background:none;border:none;color:#6b7280;cursor:pointer;display:flex;font-size:14px;font-weight:500;gap:4px;padding:0}.ia-select-submenu-header .ia-select-submenu-back:hover{color:#374151}.ia-select-dropdown-container{display:flex;position:relative}.ia-select-dropdown-v3{flex:1}.select-label-with-icon{align-items:center;display:flex;flex:1;gap:8px;min-width:0}.select-label-with-icon span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ia-select-submenu{background:#fff;border:1px solid #e0e0e0;border-radius:8px;box-shadow:0 2px 8px #00000014;padding:8px 6px;z-index:3}.ia-select-submenu-content .select-option-content:not(:first-child){margin-top:2px}.ia-select-submenu-content .select-option-content{padding:7.5px 0 7.5px 12px}.ia-select-submenu-content .select-option-content:hover{background-color:#f5f6fa!important;border-radius:8px;color:#1f2b4d!important}.ia-select-submenu-content .select-option-content.selected{background-color:#edf0ff!important;border-radius:8px;color:#1f2b4d!important}.ia-select-chevron-icon.disabled{cursor:not-allowed;filter:grayscale(100%);opacity:.4;opacity:.2;pointer-events:none}.ia-select-footer-message{align-items:center;border-top:1px solid #f5f6fa;display:flex;justify-content:space-between;padding:8px 12px 4px}.ia-select-footer-message .ia-select-max-selectable-options{background-position:0 1px;border:none;padding:0 0 0 20px}.ia-select-footer-message .ia-styles.ia-btn.ia-btn-with-icon{height:16px}.ia-select-footer-message .ia-select-footer-description{color:#60697d;font-size:12px;font-weight:500;line-height:16px}.ia-select-footer-message .ia-select-footer-action-button{color:#4259ee;cursor:pointer;font-size:12px;font-weight:500;padding:0;white-space:nowrap}')),document.head.appendChild(e)}}catch(t){console.error("vite-plugin-css-injected-by-js",t)}}();
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import React__default, { useState, useRef, useMemo, useEffect, useCallback } from "react";
-import StateManagedSelect$1 from "../../node_modules/react-select/dist/react-select.esm.js";
+import ReactSelect from "react-select";
 import { Alert } from "../Alert/index.js";
 import { CustomGroupHeading } from "./customGroupHeading.js";
 import Dropdown from "./dropdown.js";
+import { Checkbox } from "../Checkbox/index.js";
+import { Toast } from "../Toast/index.js";
+import { Tooltip } from "../Tooltip/index.js";
 import { useClickOutside } from "./hooks/useClickOutside.js";
+import { useKeyboardNavigation } from "./hooks/useKeyboardNavigation.js";
+import { useScrollIntoView } from "./hooks/useScrollIntoView.js";
+import { useTypeahead } from "./hooks/useTypeahead.js";
 import { MenuList } from "./menuList.js";
 import { Option } from "./optionList.js";
 import SearchFilter from "./SearchFilter.js";
 import { SelectedOptionsTags } from "./selected-option-tags.js";
-import { Checkbox } from "../Checkbox/index.js";
-import { flattenOptions, handleSelectAllWhenCompLoads, handleDropdownClose, getPlaceholder, handleSearch, onKeyDown, handleDropdownOpen } from "./utils.js";
+import { flattenOptions, handleSelectAllWhenCompLoads, handleDropdownClose, getPlaceholder, handleSearch, handleDropdownOpen } from "./utils.js";
 import { HelperText } from "../common/HelperText/index.js";
-import { Tooltip } from "../Tooltip/index.js";
-/* empty css                   */
+
 const selectStyles = {
   menu: () => ({})
 };
+const SUBMENU_MAX_HEIGHT = 200;
 const countTotalSelectedOptions = (selectedOptions) => {
   if (!selectedOptions) return 0;
   if (Array.isArray(selectedOptions)) return selectedOptions.length;
   return selectedOptions.value !== void 0 ? 1 : 0;
 };
 const Select = React__default.memo(function Select2(props) {
-  var _a, _b, _c, _d;
+  var _a, _b;
   const {
     isOpen,
     setIsOpen,
@@ -69,6 +75,8 @@ const Select = React__default.memo(function Select2(props) {
     onBlur,
     isGrouped,
     selectId,
+    id,
+    "data-testid": dataTestId,
     column,
     customPlaceholderAfterSelect,
     isMultiInSubmenu = false,
@@ -77,27 +85,47 @@ const Select = React__default.memo(function Select2(props) {
     helperText,
     dropdownPosition,
     maxSelectableOptions,
-    noOptionMessage = "No options available"
+    noOptionMessage = "No options available",
+    isLoadingMore = false,
+    onSearchBlur,
+    showFooterMessage = {},
+    selectionLabels = {}
   } = props;
+  const resolvedSelectId = selectId ?? id;
   const [submenuOptions, setSubmenuOptions] = useState(null);
   const [submenuParent, setSubmenuParent] = useState(null);
   const flattenInitialOptions = flattenOptions(initialOptions);
   const searchBarRef = useRef(null);
   const containerRef = useRef(null);
-  const focusedIndex = useRef(0);
   const dropdownButtonRef = useRef(null);
   const textSpanRef = useRef(null);
   const [isTextTruncated, setIsTextTruncated] = useState(false);
+  const [openToast, setOpenToast] = useState(false);
+  const [toastMessage, setToastMessage] = useState("");
   const memoizedOptions = useMemo(() => currentOptions, [currentOptions]);
+  const flatOptions = useMemo(
+    () => isGrouped ? flattenOptions(currentOptions) : currentOptions,
+    [currentOptions, isGrouped]
+  );
+  const listboxId = useMemo(
+    () => `ia-select-listbox-${resolvedSelectId || Math.random().toString(36).slice(2, 9)}`,
+    [resolvedSelectId]
+  );
   const submenuTimeoutRef = useRef(null);
-  const [submenuPosition, setSubmenuPosition] = useState({ top: 0, left: 0, width: 0 });
+  const [submenuPosition, setSubmenuPosition] = useState({ top: 0, bottom: "auto", left: 0, width: 0 });
   const dropdownMenuRef = useRef(null);
   const menuRef = useRef(null);
+  const listRef = useRef(null);
   const [isSubmenuHovered, setIsSubmenuHovered] = useState(false);
   const [searchTerm, setSearchTerm] = useState("");
-  const [columnWidth, setColumnWidth] = useState(
-    column ? ((_a = column.getActualWidth) == null ? void 0 : _a.call(column)) ?? ((_b = column.getWidth) == null ? void 0 : _b.call(column)) : void 0
-  );
+  const [isKeyboardNav, setIsKeyboardNav] = useState(false);
+  const [submenuHighlightedIndex, setSubmenuHighlightedIndex] = useState(-1);
+  const [isSubmenuKeyboardActive, setIsSubmenuKeyboardActive] = useState(false);
+  const [columnWidth, setColumnWidth] = useState(() => {
+    var _a2, _b2;
+    const width2 = ((_a2 = column == null ? void 0 : column.getActualWidth) == null ? void 0 : _a2.call(column)) ?? ((_b2 = column == null ? void 0 : column.getWidth) == null ? void 0 : _b2.call(column));
+    return width2 !== void 0 ? width2 - 12 : void 0;
+  });
   useEffect(() => {
     if (textSpanRef.current) {
       const isTruncated = textSpanRef.current.scrollWidth > textSpanRef.current.clientWidth;
@@ -177,8 +205,40 @@ const Select = React__default.memo(function Select2(props) {
     },
     [initialOptions, currentOptions, setSelectedOptions, setIsSelectAll]
   );
+  const closeDropdown = useCallback(
+    (event) => {
+      handleDropdownClose({
+        externalOnDropdownClose,
+        setCurrentOptions,
+        initialOptions: isGrouped ? flattenInitialOptions : initialOptions,
+        currentOptions,
+        setIsOpen,
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        onBlur,
+        event
+      });
+      setTimeout(() => {
+        var _a2;
+        return (_a2 = dropdownButtonRef.current) == null ? void 0 : _a2.focus();
+      }, 0);
+    },
+    [
+      externalOnDropdownClose,
+      setCurrentOptions,
+      initialOptions,
+      isGrouped,
+      flattenInitialOptions,
+      currentOptions,
+      setIsOpen,
+      onBlur
+    ]
+  );
   const handleSelect = useCallback(
     (selectedValues, event, index) => {
+      var _a2;
+      if (!isMulti) {
+        (_a2 = searchBarRef.current) == null ? void 0 : _a2.blur();
+      }
       if ((event == null ? void 0 : event.action) === "clear") {
         if (externalOnChange) {
           externalOnChange([], event, index);
@@ -312,6 +372,188 @@ const Select = React__default.memo(function Select2(props) {
     const total = countTotalSelectedOptions(selectedOptions);
     return maxSelectableOptions !== void 0 && total >= maxSelectableOptions;
   }, [maxSelectableOptions, selectedOptions]);
+  const getOptionDisabled = useCallback((opt) => {
+    return !!(opt.disabled || opt.isDisabled);
+  }, []);
+  const hasSelectAll = !!(isMulti && toggleSelectAll && !isLoading);
+  const handleSelectAllToggle = useCallback(() => {
+    const syntheticEvent = {
+      target: { checked: !isSelectAll }
+    };
+    if (externalOnSelectAll) {
+      externalOnSelectAll(syntheticEvent);
+    } else if (!isSelectAll) {
+      const currentSelected = Array.isArray(selectedOptions) ? selectedOptions : [];
+      const restCurrentOptions = currentOptions.filter(
+        (option) => !currentSelected.find((sel) => sel.label === option.label && option.value === sel.value)
+      );
+      const newSelected = [...currentSelected, ...restCurrentOptions];
+      setIsSelectAll == null ? void 0 : setIsSelectAll(true);
+      setSelectedOptions(newSelected);
+      if (externalOnChange) externalOnChange(newSelected);
+    } else {
+      setIsSelectAll == null ? void 0 : setIsSelectAll(false);
+      setSelectedOptions([]);
+      if (externalOnChange) externalOnChange([]);
+    }
+  }, [
+    isSelectAll,
+    externalOnChange,
+    externalOnSelectAll,
+    currentOptions,
+    selectedOptions,
+    setSelectedOptions,
+    setIsSelectAll
+  ]);
+  const handleOptionSelect = useCallback(
+    (opt, index) => {
+      var _a2, _b2;
+      if (opt.children && opt.children.length > 0) {
+        setSubmenuOptions(opt.children);
+        setSubmenuParent(opt);
+        setIsSubmenuKeyboardActive(true);
+        setSubmenuHighlightedIndex(0);
+        const optionNodes = (_a2 = dropdownMenuRef.current) == null ? void 0 : _a2.querySelectorAll('[role="option"]');
+        const optionNode = optionNodes == null ? void 0 : optionNodes[index];
+        const dropdownRect = (_b2 = dropdownMenuRef.current) == null ? void 0 : _b2.getBoundingClientRect();
+        const optionRect = optionNode == null ? void 0 : optionNode.getBoundingClientRect();
+        if (dropdownRect && optionRect) {
+          const spaceBelow = window.innerHeight - optionRect.bottom;
+          if (spaceBelow < SUBMENU_MAX_HEIGHT) {
+            setSubmenuPosition({
+              top: "auto",
+              bottom: dropdownRect.bottom - optionRect.bottom,
+              left: dropdownRect.width + 12,
+              width: dropdownRect.width
+            });
+          } else {
+            setSubmenuPosition({
+              top: optionRect.top - dropdownRect.top,
+              bottom: "auto",
+              left: dropdownRect.width + 12,
+              width: dropdownRect.width
+            });
+          }
+        }
+        return;
+      }
+      const actionMeta = { option: opt, action: "select-option" };
+      if (isMulti) {
+        handleSelect(selectedOptions, actionMeta, index);
+      } else {
+        handleSelect(opt, actionMeta, index);
+        closeDropdown();
+      }
+    },
+    [isMulti, selectedOptions, closeDropdown, handleSelect]
+  );
+  const {
+    highlightedIndex,
+    setHighlightedIndex,
+    handleKeyDown: navKeyDown
+  } = useKeyboardNavigation({
+    options: flatOptions,
+    isOpen,
+    onSelect: handleOptionSelect,
+    onClose: closeDropdown,
+    isMulti,
+    selectedOption: isMulti ? null : selectedOptions,
+    getOptionDisabled,
+    hasSelectAll,
+    onSelectAllToggle: handleSelectAllToggle,
+    onNavigateUp: isWithSearch && !hasSelectAll ? () => {
+      var _a2;
+      setIsKeyboardNav(false);
+      (_a2 = searchBarRef.current) == null ? void 0 : _a2.focus();
+    } : void 0
+  });
+  const { handleTypeahead, resetBuffer } = useTypeahead({
+    options: flatOptions,
+    setHighlightedIndex,
+    isActive: isOpen && !isWithSearch
+  });
+  useScrollIntoView({
+    highlightedIndex,
+    listRef,
+    isVirtualized: !isGrouped,
+    containerRef: dropdownMenuRef
+  });
+  const handleSubmenuKeyDown = useCallback(
+    (e) => {
+      var _a2, _b2;
+      if (isSubmenuKeyboardActive && submenuOptions) {
+        switch (e.key) {
+          case "ArrowDown":
+            e.preventDefault();
+            setSubmenuHighlightedIndex((prev) => prev < submenuOptions.length - 1 ? prev + 1 : 0);
+            return true;
+          case "ArrowUp":
+            e.preventDefault();
+            setSubmenuHighlightedIndex((prev) => prev > 0 ? prev - 1 : submenuOptions.length - 1);
+            return true;
+          case "ArrowLeft":
+            e.preventDefault();
+            setIsSubmenuKeyboardActive(false);
+            setSubmenuOptions(null);
+            setSubmenuParent(null);
+            setSubmenuHighlightedIndex(-1);
+            return true;
+          case "Escape":
+            e.preventDefault();
+            setIsSubmenuKeyboardActive(false);
+            setSubmenuOptions(null);
+            setSubmenuParent(null);
+            setSubmenuHighlightedIndex(-1);
+            return true;
+          case "Enter":
+          case " ": {
+            e.preventDefault();
+            if (submenuHighlightedIndex >= 0 && submenuHighlightedIndex < submenuOptions.length) {
+              const submenuEl = (_a2 = dropdownMenuRef.current) == null ? void 0 : _a2.querySelector(".ia-select-submenu");
+              const optionEls = submenuEl == null ? void 0 : submenuEl.querySelectorAll(".select-option-content");
+              (_b2 = optionEls == null ? void 0 : optionEls[submenuHighlightedIndex]) == null ? void 0 : _b2.click();
+            }
+            return true;
+          }
+          default:
+            return true;
+        }
+      }
+      if (e.key === "ArrowRight" && highlightedIndex >= 0) {
+        const currentOpt = flatOptions[highlightedIndex];
+        if ((currentOpt == null ? void 0 : currentOpt.children) && currentOpt.children.length > 0) {
+          e.preventDefault();
+          handleOptionSelect(currentOpt, highlightedIndex);
+          return true;
+        }
+      }
+      return false;
+    },
+    [
+      isSubmenuKeyboardActive,
+      submenuOptions,
+      submenuHighlightedIndex,
+      highlightedIndex,
+      flatOptions,
+      handleOptionSelect
+    ]
+  );
+  useEffect(() => {
+    if (!isOpen) {
+      resetBuffer();
+      setIsKeyboardNav(false);
+      setIsSubmenuKeyboardActive(false);
+      setSubmenuHighlightedIndex(-1);
+    }
+  }, [isOpen, resetBuffer]);
+  useEffect(() => {
+    if (isOpen && isWithSearch) {
+      setTimeout(() => {
+        var _a2;
+        return (_a2 = searchBarRef.current) == null ? void 0 : _a2.focus();
+      }, 0);
+    }
+  }, [isOpen, isWithSearch]);
   const handleOptionHover = useCallback(
     (option, _index, event) => {
       var _a2;
@@ -323,11 +565,23 @@ const Select = React__default.memo(function Select2(props) {
         const dropdownRect = (_a2 = dropdownMenuRef.current) == null ? void 0 : _a2.getBoundingClientRect();
         const optionRect = optionNode.getBoundingClientRect();
         if (dropdownRect && optionRect) {
-          setSubmenuPosition({
-            top: optionRect.top - dropdownRect.top,
-            left: dropdownRect.width + 12,
-            width: dropdownRect.width
-          });
+          const spaceBelow = window.innerHeight - optionRect.bottom;
+          const openUpward = spaceBelow < SUBMENU_MAX_HEIGHT;
+          if (openUpward) {
+            setSubmenuPosition({
+              top: "auto",
+              bottom: dropdownRect.bottom - optionRect.bottom,
+              left: dropdownRect.width + 12,
+              width: dropdownRect.width
+            });
+          } else {
+            setSubmenuPosition({
+              top: optionRect.top - dropdownRect.top,
+              bottom: "auto",
+              left: dropdownRect.width + 12,
+              width: dropdownRect.width
+            });
+          }
         }
         setSubmenuOptions(option.children);
         setSubmenuParent(option);
@@ -395,7 +649,8 @@ const Select = React__default.memo(function Select2(props) {
     isMulti,
     selectedOptions,
     placeholder,
-    customPlaceholderAfterSelect
+    customPlaceholderAfterSelect,
+    selectionLabels
   );
   const isPlaceholder = placeholderText === placeholder;
   return /* @__PURE__ */ jsxs(
@@ -425,6 +680,7 @@ const Select = React__default.memo(function Select2(props) {
                 dropdownButtonRef,
                 dropDownPortalClassName,
                 dropdownPosition,
+                isKeyboardNav,
                 isOpen,
                 menuRef,
                 portalContainer: portalContainerResolved,
@@ -433,10 +689,16 @@ const Select = React__default.memo(function Select2(props) {
                     "button",
                     {
                       ref: dropdownButtonRef,
-                      className: `ia-select-styled-dropdown-main-button ${isError ? "impact-select-error" : ""} ${isDisabled ? "impact-select-disabled" : ""} ${isClearable ? "is-with-clearable" : ""}`,
+                      "aria-activedescendant": isOpen && highlightedIndex >= 0 ? `${listboxId}-option-${highlightedIndex}` : void 0,
+                      "aria-controls": isOpen ? listboxId : void 0,
+                      "aria-expanded": !!isOpen,
+                      "aria-haspopup": "listbox",
+                      className: `ia-select-styled-dropdown-main-button ${isError ? "impact-select-error" : ""} ${isDisabled ? "impact-select-disabled" : ""} ${isClearable ? "is-with-clearable" : ""} ${isOpen && isKeyboardNav && isWithSearch ? "ia-select-button-keyboard-open" : ""}`,
+                      "data-testid": dataTestId,
                       disabled: isDisabled,
-                      id: selectId,
+                      id: resolvedSelectId,
                       name,
+                      role: "combobox",
                       style: {
                         minWidth: isAgGridCellRenderer ? "0" : minWidth ?? "240px",
                         width: isAgGridCellRenderer ? "100%" : width ?? minWidth ?? "240px",
@@ -454,6 +716,7 @@ const Select = React__default.memo(function Select2(props) {
                       onClick: (e) => {
                         e.preventDefault();
                         e.stopPropagation();
+                        setIsKeyboardNav(false);
                         isOpen ? handleDropdownClose({
                           externalOnDropdownClose,
                           setCurrentOptions,
@@ -469,9 +732,24 @@ const Select = React__default.memo(function Select2(props) {
                           setIsOpen
                         });
                       },
-                      onKeyDown: !isWithSearch ? (e) => {
-                        onKeyDown({ e, focusedIndex, currentOptions });
-                      } : void 0,
+                      onKeyDown: (e) => {
+                        if (!isOpen) {
+                          if (e.key === "Enter" || e.key === " " || e.key === "ArrowDown" || e.key === "ArrowUp") {
+                            e.preventDefault();
+                            setIsKeyboardNav(true);
+                            handleDropdownOpen({ externalOnDropdownOpen, isOpen, setIsOpen });
+                            return;
+                          }
+                          return;
+                        }
+                        setIsKeyboardNav(true);
+                        if (handleSubmenuKeyDown(e)) return;
+                        if (!isWithSearch) {
+                          const consumed = handleTypeahead(e);
+                          if (consumed) return;
+                        }
+                        navKeyDown(e);
+                      },
                       children: [
                         /* @__PURE__ */ jsxs(
                           "div",
@@ -483,19 +761,27 @@ const Select = React__default.memo(function Select2(props) {
                                 Tooltip,
                                 {
                                   orientation: "top",
-                                  title: getPlaceholder(isMulti, selectedOptions, placeholder),
+                                  title: getPlaceholder(
+                                    isMulti,
+                                    selectedOptions,
+                                    placeholder,
+                                    customPlaceholderAfterSelect,
+                                    selectionLabels
+                                  ),
                                   variant: "tertiary",
-                                  children: /* @__PURE__ */ jsx("span", { ref: textSpanRef, className: "ia-select-button-text-span", children: isMultiInSubmenu && !isMulti && !Array.isArray(selectedOptions) && selectedOptions.children && (selectedOptions.children.length ?? 0) > 0 ? selectedOptions.children.length === 1 ? (_c = selectedOptions.children[0]) == null ? void 0 : _c.label : `Selected (${selectedOptions.children.length})` : placeholderText })
+                                  children: /* @__PURE__ */ jsx("span", { ref: textSpanRef, className: "ia-select-button-text-span", children: isMultiInSubmenu && !isMulti && selectedOptions && !Array.isArray(selectedOptions) && selectedOptions.children && (selectedOptions.children.length ?? 0) > 0 ? selectedOptions.children.length === 1 ? (_a = selectedOptions.children[0]) == null ? void 0 : _a.label : `${selectionLabels.selected ?? "Selected"} (${selectedOptions.children.length})` : placeholderText })
                                 }
-                              ) : /* @__PURE__ */ jsx("span", { ref: textSpanRef, className: "ia-select-button-text-span", children: !isMulti && !Array.isArray(selectedOptions) && selectedOptions.children && (selectedOptions.children.length ?? 0) > 0 ? selectedOptions.children.length === 1 ? (_d = selectedOptions.children[0]) == null ? void 0 : _d.label : `Selected (${selectedOptions.children.length})` : placeholderText })
+                              ) : /* @__PURE__ */ jsx("span", { ref: textSpanRef, className: "ia-select-button-text-span", children: !isMulti && selectedOptions && !Array.isArray(selectedOptions) && selectedOptions.children && (selectedOptions.children.length ?? 0) > 0 ? selectedOptions.children.length === 1 ? (_b = selectedOptions.children[0]) == null ? void 0 : _b.label : `${selectionLabels.selected ?? "Selected"} (${selectedOptions.children.length})` : placeholderText })
                             ]
                           }
                         ),
                         isMulti && selectedArr.length > 0 && isClearable && /* @__PURE__ */ jsx(
                           "div",
                           {
+                            "aria-label": "Clear selection",
                             className: "ia-select-button-clear-icon",
                             role: "button",
+                            tabIndex: 0,
                             onClick: (event) => {
                               event.stopPropagation();
                               if (externalOnClearAll) {
@@ -505,14 +791,29 @@ const Select = React__default.memo(function Select2(props) {
                                 setIsSelectAll == null ? void 0 : setIsSelectAll(false);
                                 syncParentChildSelection([]);
                               }
+                            },
+                            onKeyDown: (event) => {
+                              if (event.key === "Enter" || event.key === " ") {
+                                event.preventDefault();
+                                event.stopPropagation();
+                                if (externalOnClearAll) {
+                                  externalOnClearAll();
+                                } else {
+                                  setSelectedOptions([]);
+                                  setIsSelectAll == null ? void 0 : setIsSelectAll(false);
+                                  syncParentChildSelection([]);
+                                }
+                              }
                             }
                           }
                         ),
                         !isMulti && isClearable && selectedOptions && !Array.isArray(selectedOptions) && Object.keys(selectedOptions).length > 0 && /* @__PURE__ */ jsx(
                           "div",
                           {
+                            "aria-label": "Clear selection",
                             className: "ia-select-button-clear-icon",
                             role: "button",
+                            tabIndex: 0,
                             onClick: (event) => {
                               event.stopPropagation();
                               if (externalOnClearAll) {
@@ -522,6 +823,19 @@ const Select = React__default.memo(function Select2(props) {
                                 setIsSelectAll == null ? void 0 : setIsSelectAll(false);
                                 syncParentChildSelection([]);
                               }
+                            },
+                            onKeyDown: (event) => {
+                              if (event.key === "Enter" || event.key === " ") {
+                                event.preventDefault();
+                                event.stopPropagation();
+                                if (externalOnClearAll) {
+                                  externalOnClearAll();
+                                } else {
+                                  setSelectedOptions([]);
+                                  setIsSelectAll == null ? void 0 : setIsSelectAll(false);
+                                  syncParentChildSelection([]);
+                                }
+                              }
                             }
                           }
                         ),
@@ -570,20 +884,24 @@ const Select = React__default.memo(function Select2(props) {
                     {
                       ref: searchBarRef,
                       externalOnSearch,
+                      highlightedIndex,
                       isClearable,
                       isLoading,
                       isMulti,
                       isSelectAll,
+                      isSelectAllHighlighted: isKeyboardNav && hasSelectAll && highlightedIndex === -1,
                       isWithSearch,
                       searchPlaceholder,
                       searchTerm,
                       selectedOptions,
+                      selectionLabels,
+                      setHighlightedIndex,
+                      setIsKeyboardNav,
                       setSearchTerm,
                       toggleSelectAll,
                       onClearAll: handleClearAllWrapper,
-                      onKeyDown: (e) => {
-                        onKeyDown({ e, focusedIndex, currentOptions });
-                      },
+                      onClose: closeDropdown,
+                      onKeyDown: navKeyDown,
                       onSearch: (event) => {
                         handleSearch({
                           event,
@@ -593,28 +911,32 @@ const Select = React__default.memo(function Select2(props) {
                           setSearchTerm
                         });
                       },
-                      onSelectAll: handleSelectAllWrapper
+                      onSearchBlur,
+                      onSelectAll: handleSelectAllWrapper,
+                      onSubmenuKeyDown: handleSubmenuKeyDown
                     }
                   ),
                   /* @__PURE__ */ jsxs("div", { ref: dropdownMenuRef, className: "ia-select-dropdown-container", children: [
                     /* @__PURE__ */ jsx(
-                      StateManagedSelect$1,
+                      ReactSelect,
                       {
                         autoFocus: true,
                         menuIsOpen: true,
                         backspaceRemovesValue: false,
                         className: "ia-select-dropdown-v3",
                         classNames: {
-                          option: () => "ia-select-option"
+                          option: ({ data }) => {
+                            const opt = data;
+                            const optIdx = flatOptions.findIndex((o) => o.value === (opt == null ? void 0 : opt.value));
+                            return `ia-select-option${(submenuParent == null ? void 0 : submenuParent.value) === (opt == null ? void 0 : opt.value) ? " submenu-active" : ""}${isKeyboardNav && optIdx >= 0 && optIdx === highlightedIndex ? " ia-select-option-highlighted" : ""}`;
+                          }
                         },
                         components: {
                           IndicatorSeparator: null,
                           Option: (optionProps) => {
-                            var _a2, _b2, _c2, _d2;
+                            var _a2, _b2, _c, _d;
                             const data = optionProps.data;
-                            const optionIndex = memoizedOptions.findIndex(
-                              (opt) => opt.value === data.value
-                            );
+                            const optionIndex = flatOptions.findIndex((opt) => opt.value === data.value);
                             const parentOption = (initialOptions || []).find(
                               (parent) => parent.children && parent.children.some((child) => child.value === data.value)
                             );
@@ -632,9 +954,11 @@ const Select = React__default.memo(function Select2(props) {
                                 }
                               } else {
                                 if (parentOption) {
-                                  isSelected = !!(selectedOptions && !Array.isArray(selectedOptions) && ((_c2 = selectedOptions.children) == null ? void 0 : _c2.some(
+                                  isSelected = !!(selectedOptions && !Array.isArray(selectedOptions) && ((_c = selectedOptions.children) == null ? void 0 : _c.some(
                                     (child) => child.value === data.value
                                   )));
+                                } else if (data.children) {
+                                  isSelected = !!(selectedOptions && !Array.isArray(selectedOptions) && selectedOptions.value === data.value);
                                 } else {
                                   isSelected = !!(selectedOptions && !Array.isArray(selectedOptions) && selectedOptions.value === data.value);
                                 }
@@ -642,7 +966,7 @@ const Select = React__default.memo(function Select2(props) {
                             } else {
                               if (parentOption) {
                                 const selectedParent = Array.isArray(selectedOptions) ? selectedOptions.find((sel) => sel.value === parentOption.value) : null;
-                                isSelected = !!(selectedParent && ((_d2 = selectedParent.children) == null ? void 0 : _d2.some((child) => child.value === data.value)));
+                                isSelected = !!(selectedParent && ((_d = selectedParent.children) == null ? void 0 : _d.some((child) => child.value === data.value)));
                               } else {
                                 isSelected = Array.isArray(selectedOptions) ? selectedOptions.some((sel) => sel.value === data.value) : false;
                               }
@@ -689,7 +1013,7 @@ const Select = React__default.memo(function Select2(props) {
                         value: selectedOptions,
                         onChange: (selectedValues, actionMeta) => {
                           const option = actionMeta == null ? void 0 : actionMeta.option;
-                          const idx = memoizedOptions.findIndex(
+                          const idx = flatOptions.findIndex(
                             (opt) => opt.value === ((option == null ? void 0 : option.value) ?? (selectedValues == null ? void 0 : selectedValues.value))
                           );
                           if (!isMulti) {
@@ -703,16 +1027,29 @@ const Select = React__default.memo(function Select2(props) {
                         },
                         onMenuScrollToBottom,
                         captureMenuScroll: false,
-                        ...{ noOptionMessage, maxSelectableOptions }
+                        ...{
+                          noOptionMessage,
+                          maxSelectableOptions,
+                          isLoadingMore,
+                          showFooterMessage,
+                          listboxId,
+                          highlightedIndex,
+                          setHighlightedIndex,
+                          isKeyboardNav,
+                          setIsKeyboardNav,
+                          listRef,
+                          submenuParent
+                        }
                       }
                     ),
-                    submenuOptions && submenuParent && /* @__PURE__ */ jsx(
+                    submenuOptions && /* @__PURE__ */ jsx(
                       "div",
                       {
                         className: "ia-select-submenu",
                         style: {
                           position: "absolute",
                           top: submenuPosition.top,
+                          bottom: submenuPosition.bottom,
                           left: submenuPosition.left,
                           width: submenuPosition.width
                         },
@@ -731,129 +1068,158 @@ const Select = React__default.memo(function Select2(props) {
                             }
                           }, 100);
                         },
-                        children: /* @__PURE__ */ jsx("div", { className: "ia-select-submenu-content", children: submenuOptions.map((option) => {
-                          var _a2;
-                          const isChildSelected = !isMulti ? !!(selectedOptions && !Array.isArray(selectedOptions) && ((_a2 = selectedOptions.children) == null ? void 0 : _a2.some((child) => child.value === option.value))) : (() => {
-                            const selectedOptionsArray = Array.isArray(selectedOptions) ? selectedOptions : [];
-                            const parentOpt = selectedOptionsArray.find(
-                              (sel) => sel.value === submenuParent.value
-                            );
-                            return parentOpt ? (parentOpt.children ?? []).some(
-                              (child) => child.value === option.value
-                            ) : false;
-                          })();
-                          return /* @__PURE__ */ jsx(
-                            "div",
-                            {
-                              className: `select-option-content${isChildSelected ? " selected" : ""}`,
-                              onClick: () => {
-                                if (!isMulti) {
-                                  if (isMultiInSubmenu) {
-                                    if (isChildSelected) {
-                                      const single = selectedOptions;
-                                      if (single.children) {
-                                        const updatedChildren = single.children.filter(
-                                          (child) => child.value !== option.value
-                                        );
-                                        if (updatedChildren.length === 0) {
-                                          setSelectedOptions(null);
-                                          if (externalOnChange)
-                                            externalOnChange(null, { option }, void 0);
+                        children: /* @__PURE__ */ jsx(
+                          "div",
+                          {
+                            "aria-label": "Submenu options",
+                            className: "ia-select-submenu-content",
+                            role: "listbox",
+                            children: submenuOptions.map((option, subIdx) => {
+                              var _a2, _b2;
+                              const isChildSelected = !isMulti ? isMultiInSubmenu ? !!(selectedOptions && !Array.isArray(selectedOptions) && ((_a2 = selectedOptions.children) == null ? void 0 : _a2.some((child) => child.value === option.value))) : !!(selectedOptions && !Array.isArray(selectedOptions) && ((_b2 = selectedOptions.children) == null ? void 0 : _b2.some((child) => child.value === option.value))) : (() => {
+                                const selectedOptionsArray = Array.isArray(selectedOptions) ? selectedOptions : [];
+                                const parentOpt = submenuParent ? selectedOptionsArray.find((sel) => sel.value === submenuParent.value) : null;
+                                return parentOpt ? (parentOpt.children ?? []).some(
+                                  (child) => child.value === option.value
+                                ) : false;
+                              })();
+                              const isSubHighlighted = isSubmenuKeyboardActive && subIdx === submenuHighlightedIndex;
+                              return /* @__PURE__ */ jsx(
+                                "div",
+                                {
+                                  "aria-selected": !!isChildSelected,
+                                  className: `select-option-content${isChildSelected ? " selected" : ""}${isSubHighlighted ? " ia-select-option-highlighted" : ""}`,
+                                  id: `${listboxId}-submenu-option-${subIdx}`,
+                                  role: "option",
+                                  onClick: (event) => {
+                                    if (!isMulti) {
+                                      if (isMultiInSubmenu) {
+                                        if (isChildSelected) {
+                                          const single = selectedOptions;
+                                          if (single.children) {
+                                            const updatedChildren = single.children.filter(
+                                              (child) => child.value !== option.value
+                                            );
+                                            if (updatedChildren.length === 0) {
+                                              setSelectedOptions(null);
+                                              if (externalOnChange)
+                                                externalOnChange(null, { option }, void 0);
+                                            } else {
+                                              const newSelected = { ...single, children: updatedChildren };
+                                              setSelectedOptions(newSelected);
+                                              if (externalOnChange)
+                                                externalOnChange(newSelected, { option }, void 0);
+                                            }
+                                          }
                                         } else {
-                                          const newSelected = { ...single, children: updatedChildren };
-                                          setSelectedOptions(newSelected);
-                                          if (externalOnChange)
-                                            externalOnChange(newSelected, { option }, void 0);
+                                          if (!selectedOptions) {
+                                            if (maxSelectableOptions !== void 0) {
+                                              const currentCount = countTotalSelectedOptions(selectedOptions);
+                                              if (currentCount >= maxSelectableOptions) {
+                                                return;
+                                              }
+                                            }
+                                            const newSelected = { ...submenuParent, children: [option] };
+                                            setSelectedOptions(newSelected);
+                                            if (externalOnChange)
+                                              externalOnChange(newSelected, { option }, void 0);
+                                          } else if (selectedOptions.value === (submenuParent == null ? void 0 : submenuParent.value)) {
+                                            const single = selectedOptions;
+                                            const newSelected = {
+                                              ...single,
+                                              children: [...single.children ?? [], option]
+                                            };
+                                            setSelectedOptions(newSelected);
+                                            if (externalOnChange)
+                                              externalOnChange(newSelected, { option }, void 0);
+                                          } else {
+                                            if (maxSelectableOptions !== void 0) {
+                                              const currentCount = countTotalSelectedOptions(selectedOptions);
+                                              if (currentCount >= maxSelectableOptions) {
+                                                return;
+                                              }
+                                            }
+                                            const newSelected = { ...submenuParent, children: [option] };
+                                            setSelectedOptions(newSelected);
+                                            if (externalOnChange)
+                                              externalOnChange(newSelected, { option }, void 0);
+                                          }
                                         }
-                                      }
-                                    } else {
-                                      if (!selectedOptions) {
-                                        const newSelected = { ...submenuParent, children: [option] };
-                                        setSelectedOptions(newSelected);
-                                        if (externalOnChange)
-                                          externalOnChange(newSelected, { option }, void 0);
-                                      } else if (selectedOptions.value === submenuParent.value) {
-                                        const single = selectedOptions;
-                                        const newSelected = {
-                                          ...single,
-                                          children: [...single.children ?? [], option]
-                                        };
-                                        setSelectedOptions(newSelected);
-                                        if (externalOnChange)
-                                          externalOnChange(newSelected, { option }, void 0);
                                       } else {
                                         const newSelected = { ...submenuParent, children: [option] };
                                         setSelectedOptions(newSelected);
                                         if (externalOnChange)
                                           externalOnChange(newSelected, { option }, void 0);
+                                        handleDropdownClose({
+                                          externalOnDropdownClose,
+                                          setCurrentOptions,
+                                          initialOptions,
+                                          currentOptions,
+                                          setIsOpen,
+                                          // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                                          onBlur,
+                                          event
+                                        });
                                       }
-                                    }
-                                  } else {
-                                    const newSelected = { ...submenuParent, children: [option] };
-                                    setSelectedOptions(newSelected);
-                                    if (externalOnChange)
-                                      externalOnChange(newSelected, { option }, void 0);
-                                    handleDropdownClose({
-                                      externalOnDropdownClose,
-                                      setCurrentOptions,
-                                      initialOptions,
-                                      currentOptions,
-                                      setIsOpen,
-                                      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                                      onBlur
-                                    });
-                                  }
-                                } else {
-                                  const newSelectedOptions = Array.isArray(selectedOptions) ? [...selectedOptions] : [];
-                                  const parentIndex = newSelectedOptions.findIndex(
-                                    (sel) => sel.value === submenuParent.value
-                                  );
-                                  if (isChildSelected) {
-                                    if (parentIndex !== -1) {
-                                      const parent = { ...newSelectedOptions[parentIndex] };
-                                      parent.children = (parent.children ?? []).filter(
-                                        (child) => child.value !== option.value
+                                    } else {
+                                      const newSelectedOptions = Array.isArray(selectedOptions) ? [...selectedOptions] : [];
+                                      const parentIndex = newSelectedOptions.findIndex(
+                                        (sel) => sel.value === (submenuParent == null ? void 0 : submenuParent.value)
                                       );
-                                      if (parent.children.length === 0) {
-                                        newSelectedOptions.splice(parentIndex, 1);
+                                      if (isChildSelected) {
+                                        if (parentIndex !== -1) {
+                                          const parent = { ...newSelectedOptions[parentIndex] };
+                                          parent.children = (parent.children ?? []).filter(
+                                            (child) => child.value !== option.value
+                                          );
+                                          if (parent.children.length === 0) {
+                                            newSelectedOptions.splice(parentIndex, 1);
+                                          } else {
+                                            newSelectedOptions[parentIndex] = parent;
+                                          }
+                                        }
                                       } else {
-                                        newSelectedOptions[parentIndex] = parent;
+                                        if (parentIndex !== -1) {
+                                          const parent = { ...newSelectedOptions[parentIndex] };
+                                          if (!(parent.children ?? []).some(
+                                            (child) => child.value === option.value
+                                          )) {
+                                            parent.children = [...parent.children ?? [], option];
+                                          }
+                                          newSelectedOptions[parentIndex] = parent;
+                                        } else {
+                                          if (maxSelectableOptions !== void 0) {
+                                            const currentCount = countTotalSelectedOptions(selectedOptions);
+                                            if (currentCount >= maxSelectableOptions) {
+                                              return;
+                                            }
+                                          }
+                                          newSelectedOptions.push({
+                                            ...submenuParent,
+                                            children: [option]
+                                          });
+                                        }
                                       }
+                                      setSelectedOptions(newSelectedOptions);
+                                      if (externalOnChange)
+                                        externalOnChange(newSelectedOptions, { option }, void 0);
                                     }
-                                  } else {
-                                    if (parentIndex !== -1) {
-                                      const parent = { ...newSelectedOptions[parentIndex] };
-                                      if (!(parent.children ?? []).some(
-                                        (child) => child.value === option.value
-                                      )) {
-                                        parent.children = [...parent.children ?? [], option];
-                                      }
-                                      newSelectedOptions[parentIndex] = parent;
-                                    } else {
-                                      newSelectedOptions.push({
-                                        ...submenuParent,
-                                        children: [option]
-                                      });
+                                  },
+                                  children: isMulti || isMultiInSubmenu ? /* @__PURE__ */ jsx(
+                                    Checkbox,
+                                    {
+                                      checked: isChildSelected,
+                                      label: /* @__PURE__ */ jsx("div", { className: "select-label-with-icon", children: option.label }),
+                                      withoutFormLabel: true,
+                                      onChange: () => null
                                     }
-                                  }
-                                  setSelectedOptions(newSelectedOptions);
-                                  if (externalOnChange)
-                                    externalOnChange(newSelectedOptions, { option }, void 0);
-                                }
-                              },
-                              children: isMulti || isMultiInSubmenu ? /* @__PURE__ */ jsx(
-                                Checkbox,
-                                {
-                                  checked: isChildSelected,
-                                  label: /* @__PURE__ */ jsx("div", { className: "select-label-with-icon", children: option.label }),
-                                  withoutFormLabel: true,
-                                  onChange: () => null
-                                }
-                              ) : /* @__PURE__ */ jsx("div", { className: "select-label-with-icon", children: option.label })
-                            },
-                            option.value
-                          );
-                        }) })
+                                  ) : /* @__PURE__ */ jsx("div", { className: "select-label-with-icon", children: option.label })
+                                },
+                                option.value
+                              );
+                            })
+                          }
+                        )
                       }
                     )
                   ] })
@@ -861,6 +1227,18 @@ const Select = React__default.memo(function Select2(props) {
               }
             )
           }
+        ),
+        /* @__PURE__ */ jsx(
+          Toast,
+          {
+            isOpen: openToast,
+            message: toastMessage,
+            position: "top-right",
+            variant: "error",
+            onClose: () => {
+              setOpenToast(false);
+            }
+          }
         )
       ]
     }