@splunk/react-ui 5.7.1 → 5.9.0

package/SelectBase.js

@@ -9,26 +9,26 @@
     /******/    (() => {
         /******/ // getDefaultExport function for compatibility with non-harmony modules
         /******/ e.n = r => {
-            /******/ var t = r && r.__esModule ? 
+            /******/ var n = r && r.__esModule ? 
             /******/ () => r["default"]
             /******/ : () => r
             /******/;
-            e.d(t, {
-                a: t
+            e.d(n, {
+                a: n
             });
-            /******/            return t;
+            /******/            return n;
             /******/        };
         /******/    })();
     /******/
     /******/ /* webpack/runtime/define property getters */
     /******/    (() => {
         /******/ // define getter functions for harmony exports
-        /******/ e.d = (r, t) => {
-            /******/ for (var n in t) {
-                /******/ if (e.o(t, n) && !e.o(r, n)) {
-                    /******/ Object.defineProperty(r, n, {
+        /******/ e.d = (r, n) => {
+            /******/ for (var t in n) {
+                /******/ if (e.o(n, t) && !e.o(r, t)) {
+                    /******/ Object.defineProperty(r, t, {
                         enumerable: true,
-                        get: t[n]
+                        get: n[t]
                     });
                     /******/                }
                 /******/            }
@@ -61,23 +61,23 @@
         e.r(r);
     // EXPORTS
         e.d(r, {
-        Controls: () => /* reexport */ sr,
+        Controls: () => /* reexport */ dr,
         Divider: () => /* reexport */ w.Divider,
         Heading: () => /* reexport */ w.Heading,
-        Option: () => /* reexport */ U,
+        Option: () => /* reexport */ J,
         SelectAllOption: () => /* reexport */ oe,
-        default: () => /* reexport */ mr,
-        isOption: () => /* reexport */ tr
+        default: () => /* reexport */ gr,
+        isOption: () => /* reexport */ lr
     });
     // CONCATENATED MODULE: external "react"
-    const t = require("react");
-    var n =  e.n(t);
+    const n = require("react");
+    var t =  e.n(n);
     // CONCATENATED MODULE: external "lodash/castArray"
     const l = require("lodash/castArray");
     var a =  e.n(l);
     // CONCATENATED MODULE: external "lodash/has"
-    const o = require("lodash/has");
-    var i =  e.n(o);
+    const i = require("lodash/has");
+    var o =  e.n(i);
     // CONCATENATED MODULE: external "lodash/memoize"
     const u = require("lodash/memoize");
     var c =  e.n(u);
@@ -108,114 +108,156 @@
     const x = require("@splunk/react-ui/ScreenReaderContent");
     var j =  e.n(x);
     // CONCATENATED MODULE: external "@splunk/react-ui/Text"
-    const P = require("@splunk/react-ui/Text");
-    var E =  e.n(P);
+    const E = require("@splunk/react-ui/Text");
+    var P =  e.n(E);
     // CONCATENATED MODULE: external "@splunk/react-ui/useControlled"
     const A = require("@splunk/react-ui/useControlled");
     var L =  e.n(A);
     // CONCATENATED MODULE: external "@splunk/react-ui/usePrevious"
     const I = require("@splunk/react-ui/usePrevious");
-    var R =  e.n(I);
+    var D =  e.n(I);
     // CONCATENATED MODULE: external "@splunk/ui-utils/filter"
-    const M = require("@splunk/ui-utils/filter");
+    const R = require("@splunk/ui-utils/filter");
     // CONCATENATED MODULE: external "@splunk/ui-utils/i18n"
-    const q = require("@splunk/ui-utils/i18n");
+    const M = require("@splunk/ui-utils/i18n");
     // CONCATENATED MODULE: external "@splunk/ui-utils/id"
     const T = require("@splunk/ui-utils/id");
     // CONCATENATED MODULE: external "@splunk/ui-utils/scroll"
-    const D = require("@splunk/ui-utils/scroll");
-    // CONCATENATED MODULE: ./src/SelectBase/OptionBase.tsx
+    const q = require("@splunk/ui-utils/scroll");
+    // CONCATENATED MODULE: ./src/utils/disabled.ts
+    /**
+ * Normalizes the disabled prop and returns both the boolean state and normalized string value.
+ * Use this function to ensure consistent handling of disabled prop across components.
+ *
+ * @param disabled - The disabled prop value
+ * @param defaultWhenBooleanTrue - Optional normalization override for disabled={true}
+ * @returns Object with isDisabled boolean|undefined and disabledValue string
+ *
+ * TODO (SUI-8600): `disabled` prop should default to 'dimmed' for data entry components
+ */
     function _(e) {
+        var r = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : "dimmed";
+        if (e === "dimmed") {
+            return {
+                isDisabled: true,
+                disabledValue: "dimmed"
+            };
+        }
+        if (e === true) {
+            return {
+                isDisabled: true,
+                disabledValue: r
+            };
+        }
+        if (e === "disabled") {
+            return {
+                isDisabled: true,
+                disabledValue: "disabled"
+            };
+        }
+        if (e === false) {
+            return {
+                isDisabled: false,
+                disabledValue: undefined
+            };
+        }
+        return {
+            isDisabled: undefined,
+            disabledValue: undefined
+        };
+    }
+    // CONCATENATED MODULE: ./src/SelectBase/OptionBase.tsx
+    function B(e) {
         "@babel/helpers - typeof";
-        return _ = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function(e) {
+        return B = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function(e) {
             return typeof e;
         } : function(e) {
             return e && "function" == typeof Symbol && e.constructor === Symbol && e !== Symbol.prototype ? "symbol" : typeof e;
-        }, _(e);
+        }, B(e);
     }
-    function B() {
-        return B = Object.assign ? Object.assign.bind() : function(e) {
+    function V() {
+        return V = Object.assign ? Object.assign.bind() : function(e) {
             for (var r = 1; r < arguments.length; r++) {
-                var t = arguments[r];
-                for (var n in t) {
-                    ({}).hasOwnProperty.call(t, n) && (e[n] = t[n]);
+                var n = arguments[r];
+                for (var t in n) {
+                    ({}).hasOwnProperty.call(n, t) && (e[t] = n[t]);
                 }
             }
             return e;
-        }, B.apply(null, arguments);
+        }, V.apply(null, arguments);
     }
     function N(e, r) {
-        var t = Object.keys(e);
+        var n = Object.keys(e);
         if (Object.getOwnPropertySymbols) {
-            var n = Object.getOwnPropertySymbols(e);
-            r && (n = n.filter((function(r) {
+            var t = Object.getOwnPropertySymbols(e);
+            r && (t = t.filter((function(r) {
                 return Object.getOwnPropertyDescriptor(e, r).enumerable;
-            }))), t.push.apply(t, n);
+            }))), n.push.apply(n, t);
         }
-        return t;
+        return n;
     }
-    function V(e) {
+    function F(e) {
         for (var r = 1; r < arguments.length; r++) {
-            var t = null != arguments[r] ? arguments[r] : {};
-            r % 2 ? N(Object(t), !0).forEach((function(r) {
-                F(e, r, t[r]);
-            })) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : N(Object(t)).forEach((function(r) {
-                Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r));
+            var n = null != arguments[r] ? arguments[r] : {};
+            r % 2 ? N(Object(n), !0).forEach((function(r) {
+                K(e, r, n[r]);
+            })) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(n)) : N(Object(n)).forEach((function(r) {
+                Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(n, r));
             }));
         }
         return e;
     }
-    function F(e, r, t) {
-        return (r = K(r)) in e ? Object.defineProperty(e, r, {
-            value: t,
+    function K(e, r, n) {
+        return (r = H(r)) in e ? Object.defineProperty(e, r, {
+            value: n,
             enumerable: !0,
             configurable: !0,
             writable: !0
-        }) : e[r] = t, e;
+        }) : e[r] = n, e;
     }
-    function K(e) {
-        var r = H(e, "string");
-        return "symbol" == _(r) ? r : r + "";
+    function H(e) {
+        var r = z(e, "string");
+        return "symbol" == B(r) ? r : r + "";
     }
-    function H(e, r) {
-        if ("object" != _(e) || !e) return e;
-        var t = e[Symbol.toPrimitive];
-        if (void 0 !== t) {
-            var n = t.call(e, r || "default");
-            if ("object" != _(n)) return n;
+    function z(e, r) {
+        if ("object" != B(e) || !e) return e;
+        var n = e[Symbol.toPrimitive];
+        if (void 0 !== n) {
+            var t = n.call(e, r || "default");
+            if ("object" != B(t)) return t;
             throw new TypeError("@@toPrimitive must return a primitive value.");
         }
         return ("string" === r ? String : Number)(e);
     }
-    function z(e, r) {
+    function W(e, r) {
         if (null == e) return {};
-        var t, n, l = W(e, r);
+        var n, t, l = $(e, r);
         if (Object.getOwnPropertySymbols) {
             var a = Object.getOwnPropertySymbols(e);
-            for (n = 0; n < a.length; n++) {
-                t = a[n], -1 === r.indexOf(t) && {}.propertyIsEnumerable.call(e, t) && (l[t] = e[t]);
+            for (t = 0; t < a.length; t++) {
+                n = a[t], -1 === r.indexOf(n) && {}.propertyIsEnumerable.call(e, n) && (l[n] = e[n]);
             }
         }
         return l;
     }
-    function W(e, r) {
+    function $(e, r) {
         if (null == e) return {};
-        var t = {};
-        for (var n in e) {
-            if ({}.hasOwnProperty.call(e, n)) {
-                if (-1 !== r.indexOf(n)) continue;
-                t[n] = e[n];
+        var n = {};
+        for (var t in e) {
+            if ({}.hasOwnProperty.call(e, t)) {
+                if (-1 !== r.indexOf(t)) continue;
+                n[t] = e[t];
             }
         }
-        return t;
+        return n;
     }
-    var $ = {
+    var X = {
         /** @private */
         active: p().bool,
         children: p().node,
         description: p().string,
         descriptionPosition: p().oneOf([ "right", "bottom" ]),
-        disabled: p().bool,
+        disabled: p().oneOfType([ p().bool, p().oneOf([ "dimmed", "disabled" ]) ]),
         elementRef: p().oneOfType([ p().func, p().object ]),
         endAdornment: p().node,
         hidden: p().bool,
@@ -240,139 +282,141 @@
     };
     /**
  * An option within a `Multiselect`.
- */    function X(e) {
-        var r = e.children, l = e.descriptionPosition, a = l === void 0 ? "bottom" : l, o = e.disabled, i = e.elementRef, u = e.endAdornment, c = e.icon, s = e.label, f = e.multiple, d = e.onClick, p = e.role, v = p === void 0 ? "option" : p, b = e.value, m = z(e, [ "children", "descriptionPosition", "disabled", "elementRef", "endAdornment", "icon", "label", "multiple", "onClick", "role", "value" ]);
+ */    function U(e) {
+        var r = e.children, l = e.descriptionPosition, a = l === void 0 ? "bottom" : l, i = e.disabled, o = e.elementRef, u = e.endAdornment, c = e.icon, s = e.label, f = e.multiple, d = e.onClick, p = e.role, v = p === void 0 ? "option" : p, b = e.value, m = W(e, [ "children", "descriptionPosition", "disabled", "elementRef", "endAdornment", "icon", "label", "multiple", "onClick", "role", "value" ]);
         // @docs-props-type OptionPropsBase
-                var y = (0, t.useCallback)((function(e) {
-            if (!o) {
+                var y = _(i, "disabled"), g = y.isDisabled, h = y.disabledValue;
+        var S = (0, n.useCallback)((function(e) {
+            if (!g) {
                 d === null || d === void 0 ? void 0 : d(e, {
                     value: b
                 });
             }
-        }), [ o, d, b ]);
-        var g = b.toString();
-        var h = V({
+        }), [ g, d, b ]);
+        var O = b.toString();
+        var C = F({
             descriptionPosition: a,
-            disabled: o ? "disabled" : undefined
+            disabled: h,
+            "data-test-disabled": h
         }, m);
         
-        return n().createElement(w.Item, B({
+        return t().createElement(w.Item, V({
             "data-test-value": b,
             "data-test": "option",
-            elementRef: i,
+            elementRef: o,
             endAdornment: u
-        }, h, {
+        }, C, {
             selectable: true,
             selectableAppearance: f ? "checkbox" : "checkmark",
             startAdornment: c,
-            onClick: y,
+            onClick: S,
             role: v,
-            value: g
+            value: O
         }), r || s);
     }
-    X.propTypes = $;
-    X.type = w.Item;
+    U.propTypes = X;
+    U.type = w.Item;
  // For components to distinguish if their children are Options or Headings/Dividers
-    /* harmony default export */    const U = X;
+    /* harmony default export */    const J = U;
     // CONCATENATED MODULE: ./src/SelectBase/SelectAllOption.tsx
-    function J(e) {
+    function G(e) {
         "@babel/helpers - typeof";
-        return J = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function(e) {
+        return G = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function(e) {
             return typeof e;
         } : function(e) {
             return e && "function" == typeof Symbol && e.constructor === Symbol && e !== Symbol.prototype ? "symbol" : typeof e;
-        }, J(e);
+        }, G(e);
     }
-    function G() {
-        return G = Object.assign ? Object.assign.bind() : function(e) {
+    function Q() {
+        return Q = Object.assign ? Object.assign.bind() : function(e) {
             for (var r = 1; r < arguments.length; r++) {
-                var t = arguments[r];
-                for (var n in t) {
-                    ({}).hasOwnProperty.call(t, n) && (e[n] = t[n]);
+                var n = arguments[r];
+                for (var t in n) {
+                    ({}).hasOwnProperty.call(n, t) && (e[t] = n[t]);
                 }
             }
             return e;
-        }, G.apply(null, arguments);
+        }, Q.apply(null, arguments);
     }
-    function Q(e, r) {
+    function Y(e, r) {
         if (null == e) return {};
-        var t, n, l = Y(e, r);
+        var n, t, l = Z(e, r);
         if (Object.getOwnPropertySymbols) {
             var a = Object.getOwnPropertySymbols(e);
-            for (n = 0; n < a.length; n++) {
-                t = a[n], -1 === r.indexOf(t) && {}.propertyIsEnumerable.call(e, t) && (l[t] = e[t]);
+            for (t = 0; t < a.length; t++) {
+                n = a[t], -1 === r.indexOf(n) && {}.propertyIsEnumerable.call(e, n) && (l[n] = e[n]);
             }
         }
         return l;
     }
-    function Y(e, r) {
+    function Z(e, r) {
         if (null == e) return {};
-        var t = {};
-        for (var n in e) {
-            if ({}.hasOwnProperty.call(e, n)) {
-                if (-1 !== r.indexOf(n)) continue;
-                t[n] = e[n];
+        var n = {};
+        for (var t in e) {
+            if ({}.hasOwnProperty.call(e, t)) {
+                if (-1 !== r.indexOf(t)) continue;
+                n[t] = e[t];
             }
         }
-        return t;
+        return n;
     }
-    function Z(e, r) {
-        var t = Object.keys(e);
+    function ee(e, r) {
+        var n = Object.keys(e);
         if (Object.getOwnPropertySymbols) {
-            var n = Object.getOwnPropertySymbols(e);
-            r && (n = n.filter((function(r) {
+            var t = Object.getOwnPropertySymbols(e);
+            r && (t = t.filter((function(r) {
                 return Object.getOwnPropertyDescriptor(e, r).enumerable;
-            }))), t.push.apply(t, n);
+            }))), n.push.apply(n, t);
         }
-        return t;
+        return n;
     }
-    function ee(e) {
+    function re(e) {
         for (var r = 1; r < arguments.length; r++) {
-            var t = null != arguments[r] ? arguments[r] : {};
-            r % 2 ? Z(Object(t), !0).forEach((function(r) {
-                re(e, r, t[r]);
-            })) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : Z(Object(t)).forEach((function(r) {
-                Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r));
+            var n = null != arguments[r] ? arguments[r] : {};
+            r % 2 ? ee(Object(n), !0).forEach((function(r) {
+                ne(e, r, n[r]);
+            })) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(n)) : ee(Object(n)).forEach((function(r) {
+                Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(n, r));
             }));
         }
         return e;
     }
-    function re(e, r, t) {
+    function ne(e, r, n) {
         return (r = te(r)) in e ? Object.defineProperty(e, r, {
-            value: t,
+            value: n,
             enumerable: !0,
             configurable: !0,
             writable: !0
-        }) : e[r] = t, e;
+        }) : e[r] = n, e;
     }
     function te(e) {
-        var r = ne(e, "string");
-        return "symbol" == J(r) ? r : r + "";
+        var r = le(e, "string");
+        return "symbol" == G(r) ? r : r + "";
     }
-    function ne(e, r) {
-        if ("object" != J(e) || !e) return e;
-        var t = e[Symbol.toPrimitive];
-        if (void 0 !== t) {
-            var n = t.call(e, r || "default");
-            if ("object" != J(n)) return n;
+    function le(e, r) {
+        if ("object" != G(e) || !e) return e;
+        var n = e[Symbol.toPrimitive];
+        if (void 0 !== n) {
+            var t = n.call(e, r || "default");
+            if ("object" != G(t)) return t;
             throw new TypeError("@@toPrimitive must return a primitive value.");
         }
         return ("string" === r ? String : Number)(e);
     }
-    var le = ee(ee({}, U.propTypes), {}, {
+    var ae = re(re({}, J.propTypes), {}, {
         totalCount: p().number,
         // unlike OptionBase, there's a default value for this prop
         value: p().string
     });
-    function ae(e) {
-        var r = e.active, t = e.elementRef, l = e.id, a = e.label, o = e.onClick, i = e.selected, u = e.totalCount, c = e.value, s = c === void 0 ? "selectAll" : c, f = Q(e, [ "active", "elementRef", "id", "label", "onClick", "selected", "totalCount", "value" ]);
+    function ie(e) {
+        var r = e.active, n = e.elementRef, l = e.id, a = e.label, i = e.onClick, o = e.selected, u = e.totalCount, c = e.value, s = c === void 0 ? "selectAll" : c, f = Y(e, [ "active", "elementRef", "id", "label", "onClick", "selected", "totalCount", "value" ]);
         // @docs-props-type SelectAllOptionPropsBase
         // When toggle is changed the total count is not displayed anymore so the count is now shown in the Select all menu item
                 var d = u != null ? " (".concat(u === null || u === void 0 ? void 0 : u.toString(), ")") : "";
         
-        return n().createElement(U, G({
+        return t().createElement(J, Q({
             active: r,
-            elementRef: t,
+            elementRef: n,
             "aria-keyshortcuts": "Control+A",
             "data-test": "select-all",
             description: "".concat(d, " Ctrl-a"),
@@ -381,27 +425,27 @@
             key: "selectAll",
             multiple: true,
             label: a,
-            onClick: o,
-            selected: i,
+            onClick: i,
+            selected: o,
             role: "menuitemcheckbox",
             value: s
         }, f));
     }
-    ae.propTypes = le;
-    /* harmony default export */    const oe = ae;
+    ie.propTypes = ae;
+    /* harmony default export */    const oe = ie;
     // CONCATENATED MODULE: external "styled-components"
-    const ie = require("styled-components");
-    var ue =  e.n(ie);
+    const ue = require("styled-components");
+    var ce =  e.n(ue);
     // CONCATENATED MODULE: external "@splunk/react-ui/Button"
-    const ce = require("@splunk/react-ui/Button");
-    var se =  e.n(ce);
+    const se = require("@splunk/react-ui/Button");
+    var fe =  e.n(se);
     // CONCATENATED MODULE: external "@splunk/react-ui/Divider"
-    const fe = require("@splunk/react-ui/Divider");
-    var de =  e.n(fe);
+    const de = require("@splunk/react-ui/Divider");
+    var pe =  e.n(de);
     // CONCATENATED MODULE: external "@splunk/themes"
-    const pe = require("@splunk/themes");
+    const ve = require("@splunk/themes");
     // CONCATENATED MODULE: ./src/SelectBase/SelectBaseStyles.ts
-    var ve = ue()(se()).withConfig({
+    var be = ce()(fe()).withConfig({
         displayName: "SelectBaseStyles__StyledButton",
         componentId: "sc-1lmonqb-0"
     })([ "&[data-inline]{width:", ";}", "" ], (function(e) {
@@ -411,77 +455,77 @@
         var r = e.$multiple;
         return !r && "flex-grow: 0;";
     }));
-    var be = ue().span.withConfig({
+    var me = ce().span.withConfig({
         displayName: "SelectBaseStyles__StyledLinkIcon",
         componentId: "sc-1lmonqb-1"
-    })([ "padding-right:", ";" ], pe.variables.spacingXSmall);
-    var me = ue().span.withConfig({
+    })([ "padding-right:", ";" ], ve.variables.spacingXSmall);
+    var ye = ce().span.withConfig({
         displayName: "SelectBaseStyles__StyledLinkCaret",
         componentId: "sc-1lmonqb-2"
-    })([ "padding-left:", ";" ], pe.variables.spacingXSmall);
-    var ye = ue().div.withConfig({
+    })([ "padding-left:", ";" ], ve.variables.spacingXSmall);
+    var ge = ce().div.withConfig({
         displayName: "SelectBaseStyles__StyledFilter",
         componentId: "sc-1lmonqb-3"
-    })([ "padding:", " ", " ", ";min-width:160px;" ], pe.variables.spacingLarge, pe.variables.spacingLarge, pe.variables.spacingSmall);
-    var ge = ue().span.withConfig({
+    })([ "padding:", " ", " ", ";min-width:160px;" ], ve.variables.spacingLarge, ve.variables.spacingLarge, ve.variables.spacingSmall);
+    var he = ce().span.withConfig({
         displayName: "SelectBaseStyles__StyledCount",
         componentId: "sc-1lmonqb-4"
-    })([ "padding-right:", ";" ], pe.variables.spacingXSmall);
-    var he = ue()(O()).withConfig({
+    })([ "padding-right:", ";" ], ve.variables.spacingXSmall);
+    var Se = ce()(O()).withConfig({
         displayName: "SelectBaseStyles__StyledControlsLink",
         componentId: "sc-1lmonqb-5"
     })([ "", ";" ], (function(e) {
         var r = e.$disabled;
-        return r && (0, ie.css)([ "color:", ";" ], pe.variables.contentColorDisabled);
+        return r && (0, ue.css)([ "color:", ";" ], ve.variables.contentColorDisabled);
     }));
-    var Se = ue().div.withConfig({
+    var Oe = ce().div.withConfig({
         displayName: "SelectBaseStyles__StyledToggleAllControls",
         componentId: "sc-1lmonqb-6"
-    })([ "", ";gap:", ";padding:", " ", " ", ";" ], pe.mixins.reset("flex"), pe.variables.spacingMedium, pe.variables.spacingXSmall, pe.variables.spacingLarge, pe.variables.spacingSmall);
-    var Oe = ue()(de()).withConfig({
+    })([ "", ";gap:", ";padding:", " ", " ", ";" ], ve.mixins.reset("flex"), ve.variables.spacingMedium, ve.variables.spacingXSmall, ve.variables.spacingLarge, ve.variables.spacingSmall);
+    var we = ce()(pe()).withConfig({
         displayName: "SelectBaseStyles__StyledControlsDivider",
         componentId: "sc-1lmonqb-7"
-    })([ "border-color:", ";" ], pe.variables.borderColor);
+    })([ "border-color:", ";" ], ve.variables.borderColor);
     // CONCATENATED MODULE: ./src/utils/fuzzyMatch.ts
     // A utility for matching keyboard characters to list values
-    var we = function e(r, t) {
-        return r ? r.label.charAt(t).toLowerCase() : "";
+    var Ce = function e(r, n) {
+        return r ? r.label.charAt(n).toLowerCase() : "";
     };
-    var Ce = function e(r, t) {
+    var ke = function e(r, n) {
         if (!r.length) {
             return r;
         }
-        var n = null;
+        var t = null;
         var l = false;
         var a = r.filter((function(e) {
-            var r = we(e, t.index);
-            if (r === t.value) {
+            var r = Ce(e, n.index);
+            if (r === n.value) {
                 l = true;
                 return true;
             }
             // If we haven't found a match yet, keep track of the next closest match.
             // Secondary matching looks for the closest character of a higher value, and failing that, closest of a lower value.
                         if (!l) {
-                var a = we(n, t.index);
+                var a = Ce(t, n.index);
                 if (!a) {
-                    n = e;
-                } else if (r > t.value) {
-                    if (a < t.value) {
-                        n = e;
+                    t = e;
+                } else if (r > n.value) {
+                    if (a < n.value) {
+                        t = e;
                     } else if (a > r) {
-                        n = e;
+                        t = e;
                     }
                 } else if (r > a) {
-                    n = e;
+                    t = e;
                 }
             }
             return false;
         }));
-        return a.length === 0 && n ? [ n ] : a;
+        return a.length === 0 && t ? [ t ] : a;
     };
     // CONCATENATED MODULE: ./src/utils/ssrDocument.ts
     /* eslint-disable @typescript-eslint/no-empty-function */
-    var ke = {
+    var xe = {
         body: {
             appendChild: function e() {
                 return [];
@@ -535,16 +579,16 @@
             search: ""
         }
     };
-    function xe() {
-        var e = typeof document !== "undefined" ? document : ke;
+    function je() {
+        var e = typeof document !== "undefined" ? document : xe;
         return e;
     }
-    var je = xe();
-    /* harmony default export */    const Pe = /* unused pure expression or super */ null && je;
+    var Ee = je();
+    /* harmony default export */    const Pe = /* unused pure expression or super */ null && Ee;
     // CONCATENATED MODULE: ./src/utils/ssrWindow.ts
     /* eslint-disable @typescript-eslint/no-empty-function */
-    var Ee = {
-        document: ke,
+    var Ae = {
+        document: xe,
         navigator: {
             userAgent: ""
         },
@@ -598,12 +642,12 @@
             clearTimeout(r);
         }
     };
-    function Ae() {
-        var e = typeof window !== "undefined" ? window : Ee;
+    function Le() {
+        var e = typeof window !== "undefined" ? window : Ae;
         return e;
     }
-    var Le = Ae();
-    /* harmony default export */    const Ie = /* unused pure expression or super */ null && Le;
+    var Ie = Le();
+    /* harmony default export */    const De = /* unused pure expression or super */ null && Ie;
     // CONCATENATED MODULE: ./src/utils/updateReactRef.ts
     /**
  * Updates a React ref. Callback refs and object refs (from `createRef` and `useRef`) are supported.
@@ -625,147 +669,151 @@
     }
     // CONCATENATED MODULE: ./src/SelectBase/SelectBase.tsx
     function Me(e) {
-        return De(e) || Te(e) || Ve(e) || qe();
+        return _e(e) || qe(e) || Fe(e) || Te();
     }
-    function qe() {
+    function Te() {
         throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
     }
-    function Te(e) {
+    function qe(e) {
         if ("undefined" != typeof Symbol && null != e[Symbol.iterator] || null != e["@@iterator"]) return Array.from(e);
     }
-    function De(e) {
-        if (Array.isArray(e)) return Fe(e);
+    function _e(e) {
+        if (Array.isArray(e)) return Ke(e);
     }
-    function _e() {
-        return _e = Object.assign ? Object.assign.bind() : function(e) {
+    function Be() {
+        return Be = Object.assign ? Object.assign.bind() : function(e) {
             for (var r = 1; r < arguments.length; r++) {
-                var t = arguments[r];
-                for (var n in t) {
-                    ({}).hasOwnProperty.call(t, n) && (e[n] = t[n]);
+                var n = arguments[r];
+                for (var t in n) {
+                    ({}).hasOwnProperty.call(n, t) && (e[t] = n[t]);
                 }
             }
             return e;
-        }, _e.apply(null, arguments);
+        }, Be.apply(null, arguments);
     }
-    function Be(e, r) {
-        return He(e) || Ke(e, r) || Ve(e, r) || Ne();
+    function Ve(e, r) {
+        return ze(e) || He(e, r) || Fe(e, r) || Ne();
     }
     function Ne() {
         throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
     }
-    function Ve(e, r) {
+    function Fe(e, r) {
         if (e) {
-            if ("string" == typeof e) return Fe(e, r);
-            var t = {}.toString.call(e).slice(8, -1);
-            return "Object" === t && e.constructor && (t = e.constructor.name), "Map" === t || "Set" === t ? Array.from(e) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? Fe(e, r) : void 0;
+            if ("string" == typeof e) return Ke(e, r);
+            var n = {}.toString.call(e).slice(8, -1);
+            return "Object" === n && e.constructor && (n = e.constructor.name), "Map" === n || "Set" === n ? Array.from(e) : "Arguments" === n || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n) ? Ke(e, r) : void 0;
         }
     }
-    function Fe(e, r) {
+    function Ke(e, r) {
         (null == r || r > e.length) && (r = e.length);
-        for (var t = 0, n = Array(r); t < r; t++) {
-            n[t] = e[t];
+        for (var n = 0, t = Array(r); n < r; n++) {
+            t[n] = e[n];
         }
-        return n;
+        return t;
     }
-    function Ke(e, r) {
-        var t = null == e ? null : "undefined" != typeof Symbol && e[Symbol.iterator] || e["@@iterator"];
-        if (null != t) {
-            var n, l, a, o, i = [], u = !0, c = !1;
+    function He(e, r) {
+        var n = null == e ? null : "undefined" != typeof Symbol && e[Symbol.iterator] || e["@@iterator"];
+        if (null != n) {
+            var t, l, a, i, o = [], u = !0, c = !1;
             try {
-                if (a = (t = t.call(e)).next, 0 === r) {
-                    if (Object(t) !== t) return;
+                if (a = (n = n.call(e)).next, 0 === r) {
+                    if (Object(n) !== n) return;
                     u = !1;
-                } else for (;!(u = (n = a.call(t)).done) && (i.push(n.value), i.length !== r); u = !0) {
+                } else for (;!(u = (t = a.call(n)).done) && (o.push(t.value), o.length !== r); u = !0) {
                 }
             } catch (e) {
                 c = !0, l = e;
             } finally {
                 try {
-                    if (!u && null != t["return"] && (o = t["return"](), Object(o) !== o)) return;
+                    if (!u && null != n["return"] && (i = n["return"](), Object(i) !== i)) return;
                 } finally {
                     if (c) throw l;
                 }
             }
-            return i;
+            return o;
         }
     }
-    function He(e) {
+    function ze(e) {
         if (Array.isArray(e)) return e;
     }
-    function ze(e, r) {
+    function We(e, r) {
         if (null == e) return {};
-        var t, n, l = We(e, r);
+        var n, t, l = $e(e, r);
         if (Object.getOwnPropertySymbols) {
             var a = Object.getOwnPropertySymbols(e);
-            for (n = 0; n < a.length; n++) {
-                t = a[n], -1 === r.indexOf(t) && {}.propertyIsEnumerable.call(e, t) && (l[t] = e[t]);
+            for (t = 0; t < a.length; t++) {
+                n = a[t], -1 === r.indexOf(n) && {}.propertyIsEnumerable.call(e, n) && (l[n] = e[n]);
             }
         }
         return l;
     }
-    function We(e, r) {
+    function $e(e, r) {
         if (null == e) return {};
-        var t = {};
-        for (var n in e) {
-            if ({}.hasOwnProperty.call(e, n)) {
-                if (-1 !== r.indexOf(n)) continue;
-                t[n] = e[n];
+        var n = {};
+        for (var t in e) {
+            if ({}.hasOwnProperty.call(e, t)) {
+                if (-1 !== r.indexOf(t)) continue;
+                n[t] = e[t];
             }
         }
-        return t;
+        return n;
     }
-    function $e(e) {
+    function Xe(e) {
         "@babel/helpers - typeof";
-        return $e = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function(e) {
+        return Xe = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function(e) {
             return typeof e;
         } : function(e) {
             return e && "function" == typeof Symbol && e.constructor === Symbol && e !== Symbol.prototype ? "symbol" : typeof e;
-        }, $e(e);
+        }, Xe(e);
     }
-    function Xe(e, r) {
-        var t = Object.keys(e);
+    function Ue(e, r) {
+        var n = Object.keys(e);
         if (Object.getOwnPropertySymbols) {
-            var n = Object.getOwnPropertySymbols(e);
-            r && (n = n.filter((function(r) {
+            var t = Object.getOwnPropertySymbols(e);
+            r && (t = t.filter((function(r) {
                 return Object.getOwnPropertyDescriptor(e, r).enumerable;
-            }))), t.push.apply(t, n);
+            }))), n.push.apply(n, t);
         }
-        return t;
+        return n;
     }
-    function Ue(e) {
+    function Je(e) {
         for (var r = 1; r < arguments.length; r++) {
-            var t = null != arguments[r] ? arguments[r] : {};
-            r % 2 ? Xe(Object(t), !0).forEach((function(r) {
-                Je(e, r, t[r]);
-            })) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : Xe(Object(t)).forEach((function(r) {
-                Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r));
+            var n = null != arguments[r] ? arguments[r] : {};
+            r % 2 ? Ue(Object(n), !0).forEach((function(r) {
+                Ge(e, r, n[r]);
+            })) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(n)) : Ue(Object(n)).forEach((function(r) {
+                Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(n, r));
             }));
         }
         return e;
     }
-    function Je(e, r, t) {
-        return (r = Ge(r)) in e ? Object.defineProperty(e, r, {
-            value: t,
+    function Ge(e, r, n) {
+        return (r = Qe(r)) in e ? Object.defineProperty(e, r, {
+            value: n,
             enumerable: !0,
             configurable: !0,
             writable: !0
-        }) : e[r] = t, e;
+        }) : e[r] = n, e;
     }
-    function Ge(e) {
-        var r = Qe(e, "string");
-        return "symbol" == $e(r) ? r : r + "";
+    function Qe(e) {
+        var r = Ye(e, "string");
+        return "symbol" == Xe(r) ? r : r + "";
     }
-    function Qe(e, r) {
-        if ("object" != $e(e) || !e) return e;
-        var t = e[Symbol.toPrimitive];
-        if (void 0 !== t) {
-            var n = t.call(e, r || "default");
-            if ("object" != $e(n)) return n;
+    function Ye(e, r) {
+        if ("object" != Xe(e) || !e) return e;
+        var n = e[Symbol.toPrimitive];
+        if (void 0 !== n) {
+            var t = n.call(e, r || "default");
+            if ("object" != Xe(t)) return t;
             throw new TypeError("@@toPrimitive must return a primitive value.");
         }
         return ("string" === r ? String : Number)(e);
     }
-    var Ye = {
+    var Ze = function e(r) {
+        var n = _(r, "disabled"), t = n.isDisabled;
+        return !!t;
+    };
+    var er = {
         allowKeyMatching: p().bool,
         allowNewValues: p().bool,
         animateLoading: p().bool,
@@ -775,7 +823,7 @@
         defaultPlacement: p().oneOf([ "above", "below", "vertical" ]),
         defaultValues: p().array,
         describedBy: p().string,
-        disabled: p().bool,
+        disabled: p().oneOfType([ p().bool, p().oneOf([ "dimmed", "disabled" ]) ]),
         elementRef: p().oneOfType([ p().func, p().object ]),
         error: p().bool,
         filter: p().oneOf([ false, true, "controlled" ]),
@@ -816,65 +864,65 @@
         /** @private. */
         virtualization: p().number
     };
-    var Ze = c()((function(e) {
+    var rr = c()((function(e) {
         return [ e ];
     }));
     // preserve separate widths for single vs. multi mode
-        var er = c()((function(e) {
-        var r = e.anchorWidth, t = e.isMultiple, n = e.maxHeight, l = e.menuStyle;
-        return t ? Ue({
+        var nr = c()((function(e) {
+        var r = e.anchorWidth, n = e.isMultiple, t = e.maxHeight, l = e.menuStyle;
+        return n ? Je({
             width: Math.max(r !== null && r !== void 0 ? r : 0, 200),
-            maxHeight: n
-        }, l) : Ue({
+            maxHeight: t
+        }, l) : Je({
             minWidth: r !== null && r !== void 0 ? r : undefined,
             maxWidth: Math.max(r !== null && r !== void 0 ? r : 0, 300),
-            maxHeight: n
+            maxHeight: t
         }, l);
     }));
-    var rr = [ "clickAway", "escapeKey", "offScreen", "tabKey", "toggleClick" ];
-    function tr(e) {
-        return e && i()(e.props, "value");
+    var tr = [ "clickAway", "escapeKey", "offScreen", "tabKey", "toggleClick" ];
+    function lr(e) {
+        return e && o()(e.props, "value");
     }
-    function nr(e, r) {
-        return "".concat($e(e), "-").concat(e, "-").concat(r);
+    function ar(e, r) {
+        return "".concat(Xe(e), "-").concat(e, "-").concat(r);
     }
-    var lr = [ "append", "error", "prepend" ];
-    var ar = (0, q._)("No matches");
-    var or = (0, q._)("Select...");
-    var ir = 30;
-    var ur = {};
-    var cr =  n().createElement(y(), null);
-    var sr = function e(r) {
-        var t = r.activeItemId, l = r.filterA11yId, a = r.filterKeyword, o = r.hasChildren, i = r.inputId, u = r.inputRef, c = r.menuListboxId, s = r.multiple, f = r.onClearAll, d = r.onSelectAll, p = r.onTextBlur, v = r.onTextChange, b = r.onTextFocus, m = r.onTextKeyDown, y = r.optionSelection, g = r.placement, h = r.selectAllAppearance, S = r.textHasFocus;
-        var O = (0, q._)("Select all options".concat(y.current === "all" ? " disabled" : ""));
-        var w = (0, q._)("Clear all options".concat(y.current === "none" ? " disabled" : ""));
+    var ir = [ "append", "error", "prepend" ];
+    var or = (0, M._)("No matches");
+    var ur = (0, M._)("Select...");
+    var cr = 30;
+    var sr = {};
+    var fr =  t().createElement(y(), null);
+    var dr = function e(r) {
+        var n = r.activeItemId, l = r.filterA11yId, a = r.filterKeyword, i = r.hasChildren, o = r.inputId, u = r.inputRef, c = r.menuListboxId, s = r.multiple, f = r.onClearAll, d = r.onSelectAll, p = r.onTextBlur, v = r.onTextChange, b = r.onTextFocus, m = r.onTextKeyDown, y = r.optionSelection, g = r.placement, h = r.selectAllAppearance, S = r.textHasFocus;
+        var O = (0, M._)("Select all options".concat(y.current === "all" ? " disabled" : ""));
+        var w = (0, M._)("Clear all options".concat(y.current === "none" ? " disabled" : ""));
         // only visually disable these as opposed to fully disabling to avoid losing keyboard focus - see SUI-2731
-                var C =  n().createElement(Se, {
+                var C =  t().createElement(Oe, {
             key: "selectAll"
-        },  n().createElement(he, {
+        },  t().createElement(Se, {
             disabled: y.current === "all",
             appearance: "standalone",
             "aria-label": O,
             onClick: d,
             "data-test": "select-all",
             tag: "button"
-        }, a ? (0, q._)("Select all Matches") : (0, q._)("Select all")),  n().createElement(he, {
+        }, a ? (0, M._)("Select all Matches") : (0, M._)("Select all")),  t().createElement(Se, {
             disabled: y.current === "none",
             appearance: "standalone",
             "aria-label": w,
             onClick: f,
             "data-test": "clear-all",
             tag: "button"
-        }, a ? (0, q._)("Clear all Matches") : (0, q._)("Clear all")));
+        }, a ? (0, M._)("Clear all Matches") : (0, M._)("Clear all")));
         
-        return n().createElement("div", {
+        return t().createElement("div", {
             key: "controls"
-        }, l &&  n().createElement(j(), {
+        }, l &&  t().createElement(j(), {
             id: l
-        }, (0, q._)("Type to filter")), g === "above" &&  n().createElement(Oe, null),  n().createElement(ye, {
+        }, (0, M._)("Type to filter")), g === "above" &&  t().createElement(we, null),  t().createElement(ge, {
             key: "filter",
             "data-test": "filter"
-        },  n().createElement(E(), {
+        },  t().createElement(P(), {
             value: a,
             autoCapitalize: "off",
             autoComplete: "off",
@@ -884,88 +932,88 @@
             onKeyDown: m,
             onFocus: b,
             onBlur: p,
-            placeholder: (0, q._)("Filter"),
+            placeholder: (0, M._)("Filter"),
             role: "combobox",
             "aria-expanded": "true",
             "aria-controls": c,
-            "aria-owns": S && o ? t : undefined,
-            "aria-label": (0, q._)("Filter"),
+            "aria-owns": S && i ? n : undefined,
+            "aria-label": (0, M._)("Filter"),
             "aria-autocomplete": "list",
-            "aria-activedescendant": S && o ? t : undefined,
+            "aria-activedescendant": S && i ? n : undefined,
             inputRef: u,
-            inputId: i,
+            inputId: o,
             canClear: true,
-            startAdornment: cr
-        })), s && o && h === "buttongroup" && C, g === "below" &&  n().createElement(Oe, null));
+            startAdornment: fr
+        })), s && i && h === "buttongroup" && C, g === "below" &&  t().createElement(we, null));
     };
-    var fr = function e(r) {
-        var t = r.prefixLabel, n = r.label, l = r.suffixLabel;
-        var o = n;
-        if (t) {
-            o = [ "".concat(t, ": ") ].concat(o);
+    var pr = function e(r) {
+        var n = r.prefixLabel, t = r.label, l = r.suffixLabel;
+        var i = t;
+        if (n) {
+            i = [ "".concat(n, ": ") ].concat(i);
         }
         if (l) {
-            o = a()(o).concat(" ".concat(l));
+            i = a()(i).concat(" ".concat(l));
         }
-        return o;
+        return i;
     };
-    var dr = [];
-    var pr =  n().forwardRef((function(e, r) {
-        var l = e.appearance, a = l === void 0 ? "default" : l, o = e.append, i = e.children, u = e.currentValues, c = u === void 0 ? dr : u, s = e.describedBy, d = e.disabled, p = e.elementRef, v = e.error, m = e.inline, y = e.labelText, g = e.labelledBy, h = e.multiple, S = e.onClick, w = e.placeholder, C = e.prefixLabel, k = e.prepend, x = e.required, j = e.suffixLabel, P = e.toggle, E = e.toggleContent, A = e.maxLabelItems, L = A === void 0 ? ir : A, I = ze(e, [ "appearance", "append", "children", "currentValues", "describedBy", "disabled", "elementRef", "error", "inline", "labelText", "labelledBy", "multiple", "onClick", "placeholder", "prefixLabel", "prepend", "required", "suffixLabel", "toggle", "toggleContent", "maxLabelItems" ]);
-        var R = (0, t.useMemo)((function() {
-            var e = t.Children.toArray(i);
+    var vr = [];
+    var br =  t().forwardRef((function(e, r) {
+        var l = e.appearance, a = l === void 0 ? "default" : l, i = e.append, o = e.children, u = e.currentValues, c = u === void 0 ? vr : u, s = e.describedBy, d = e.disabled, p = e.elementRef, v = e.error, m = e.inline, y = e.labelText, g = e.labelledBy, h = e.multiple, S = e.onClick, w = e.placeholder, C = e.prefixLabel, k = e.prepend, x = e.required, j = e.suffixLabel, E = e.toggle, P = e.toggleContent, A = e.maxLabelItems, L = A === void 0 ? cr : A, I = We(e, [ "appearance", "append", "children", "currentValues", "describedBy", "disabled", "elementRef", "error", "inline", "labelText", "labelledBy", "multiple", "onClick", "placeholder", "prefixLabel", "prepend", "required", "suffixLabel", "toggle", "toggleContent", "maxLabelItems" ]);
+        var D = (0, n.useMemo)((function() {
+            var e = n.Children.toArray(o);
             var r = new Map;
-            for (var n = 0; n < e.length; n += 1) {
-                var l = e[n];
-                if (tr(l)) {
+            for (var t = 0; t < e.length; t += 1) {
+                var l = e[t];
+                if (lr(l)) {
                     r.set(l.props.value, l);
                 }
             }
             return r;
-        }), [ i ]);
-        var M = (0, t.useMemo)((function() {
+        }), [ o ]);
+        var R = (0, n.useMemo)((function() {
             var e = {
                 icon: null,
                 label: [],
                 ariaLabel: []
             };
             var r = h && c.length > L ? Math.max(1, L) : c.length;
-            for (var t = 0; t < r; t += 1) {
-                var n = c[t];
-                var l = R.get(n);
+            for (var n = 0; n < r; n += 1) {
+                var t = c[n];
+                var l = D.get(t);
                 if (l) {
-                    var a = l.props, o = a.children, i = a.icon, u = a.label;
-                    var s = E !== "optionLabel" && o ? o : u;
+                    var a = l.props, i = a.children, o = a.icon, u = a.label;
+                    var s = P !== "optionLabel" && i ? i : u;
                     e.label.push(s);
                     e.ariaLabel.push(u);
                     // if not in multiple mode, add the icon
                                         if (!h && c.length === 1) {
-                        e.icon = i;
+                        e.icon = o;
                     }
                 } else if (h) {
                     // only add values that don't match an option in "multiple" mode to preserve old behaviour
-                    e.label.push(n);
-                    e.ariaLabel.push(n.toString());
+                    e.label.push(t);
+                    e.ariaLabel.push(t.toString());
                 }
-                if (t < r - 1) {
-                    e.label.push((0, q._)(", "));
-                    e.ariaLabel.push((0, q._)(", "));
+                if (n < r - 1) {
+                    e.label.push((0, M._)(", "));
+                    e.ariaLabel.push((0, M._)(", "));
                 }
             }
             if (h && c.length > r && e.label.length) {
                 // add visual ellipsis to ensure truncation is shown
-                e.label.push((0, q._)("..."));
+                e.label.push((0, M._)("..."));
             }
             // only apply prefix / suffix if the label is not empty
                         if (e.label.length > 0) {
                 // If there's more than one item selected, read out the selected total
                 // rather than reading out each selected item
-                e.ariaLabel = fr({
+                e.ariaLabel = pr({
                     prefixLabel: C,
                     label: e.label.length > 1 ? [ "".concat(c.length, " items selected") ] : e.ariaLabel,
                     suffixLabel: j
                 });
-                e.label = fr({
+                e.label = pr({
                     prefixLabel: C,
                     label: e.label,
                     suffixLabel: j
@@ -976,74 +1024,77 @@
                         if (!e.label.length || !h && e.label.every((function(e) {
                 return e === "";
             }))) {
-                e.label = Ze(w);
+                e.label = rr(w);
                 e.ariaLabel = e.label;
             }
             return e;
-        }), [ c, L, h, R, w, C, j, E ]), T = M.label, D = M.ariaLabel, _ = M.icon;
-        var B = "aria-labelledby" in I;
-        var N = Ue({
+        }), [ c, L, h, D, w, C, j, P ]), T = R.label, q = R.ariaLabel, B = R.icon;
+        var V = "aria-labelledby" in I;
+        var N = _(d, "disabled"), F = N.disabledValue;
+        var K = Je({
             "aria-describedby": s,
-            "aria-label": g || B ? undefined : "".concat(y ? "".concat(y, ", ") : "").concat(D.join("")),
+            "aria-disabled": d === "dimmed" || undefined,
+            "aria-label": g || V ? undefined : "".concat(y ? "".concat(y, ", ") : "").concat(q.join("")),
             // aria-labelledby takes precedence over aria-label, so existence of both is redundant
             "aria-labelledby": g,
             "aria-required": x,
             "data-select-appearance": a,
-            append: o,
+            append: i,
             prepend: k,
             onClick: S,
             role: "combobox",
-            disabled: d ? "disabled" : undefined,
+            disabled: a === "link" ? d === true || d === "disabled" : F,
             elementRef: p,
             error: v,
             ref: r
         }, I);
         if (h) {
-            N["data-test-values"] = JSON.stringify(c);
+            K["data-test-values"] = JSON.stringify(c);
         } else {
-            var V = Be(c, 1), F = V[0];
-            N["data-test-value"] = F;
+            var H = Ve(c, 1), z = H[0];
+            K["data-test-value"] = z;
         }
-        if (P) {
+        K["data-test-disabled"] = F;
+        if (E) {
             
-            return (0, t.cloneElement)(P, N);
+            return (0, n.cloneElement)(E, K);
         }
         if (a === "link") {
             
-            return n().createElement(O(), _e({
+            return t().createElement(O(), Be({
                 tag: "button",
                 appearance: "standalone"
-            }, N, {
+            }, K, {
                 "data-select-appearance": "link"
-            }), !!_ &&  n().createElement(be, null, _), T || w,  n().createElement(me, null,  n().createElement(b(), null)));
+            }), !!B &&  t().createElement(me, null, B), T || w,  t().createElement(ye, null,  t().createElement(b(), null)));
         }
         // Using Button's secondary appearance as Select's default appearance.
-                var K = a === "default" ? "secondary" : a;
+                var W = a === "default" ? "secondary" : a;
         
-        return n().createElement(ve, _e({}, N, {
+        return t().createElement(be, Be({}, K, {
             $multiple: h,
-            appearance: K,
+            appearance: W,
             label: T,
             error: v,
-            icon: _,
+            icon: B,
             inline: m,
             isMenu: true,
             onClick: S
-        }, f()(I, lr)), !!c.length && h &&  n().createElement(ge, {
+        }, f()(I, ir)), !!c.length && h &&  t().createElement(he, {
             "data-role": "count"
         }, "(", c.length, ")"));
     }));
-    function vr(e) {
-        var r = e.currentValues, t = e.multiple;
-        if (t || !(r === null || r === void 0 ? void 0 : r.length)) {
+    function mr(e) {
+        var r = e.currentValues, n = e.multiple;
+        if (n || !(r === null || r === void 0 ? void 0 : r.length)) {
             return r !== null && r !== void 0 ? r : [];
         }
         return [ r[0] ];
     }
-    function br(e) {
-        var r = e.allowKeyMatching, l = r === void 0 ? true : r, a = e.animateLoading, o = e.appearance, i = o === void 0 ? "default" : o, u = e.append, c = e.allowNewValues, s = e.children, f = e.defaultPlacement, d = f === void 0 ? "vertical" : f, p = e.defaultValues, v = e.describedBy, b = e.disabled, m = e.elementRef, y = e.error, g = e.filter, S = e.footerMessage, O = e.inline, x = e.inputId, j = e.inputRef, P = e.isLoadingOptions, E = e.labelledBy, A = e.labelText, I = e.loadingMessage, _ = e.menuStyle, B = _ === void 0 ? ur : _, N = e.multiple, V = e.name, F = e.noOptionsMessage, K = F === void 0 ? ar : F, H = e.onChange, z = e.onScroll, W = e.onScrollBottom, $ = e.onFilterChange, X = e.onClick, J = e.onClose, G = e.onOpen, Q = e.required, Y = e.placeholder, Z = Y === void 0 ? or : Y, ee = e.prefixLabel, re = e.prepend, te = e.repositionMode, ne = te === void 0 ? "flip" : te, le = e.selectAllAppearance, ae = le === void 0 ? "buttongroup" : le, ie = e.showSelectedValuesFirst, ue = e.suffixLabel, ce = e.tabConfirmsNewValue, se = e.values, fe = e.virtualization, de = e.toggle, pe = e.toggleContent, ve = pe === void 0 ? "optionChildren" : pe, be = e.maxLabelItems, me = be === void 0 ? ir : be, ye = ze(e, [ "allowKeyMatching", "animateLoading", "appearance", "append", "allowNewValues", "children", "defaultPlacement", "defaultValues", "describedBy", "disabled", "elementRef", "error", "filter", "footerMessage", "inline", "inputId", "inputRef", "isLoadingOptions", "labelledBy", "labelText", "loadingMessage", "menuStyle", "multiple", "name", "noOptionsMessage", "onChange", "onScroll", "onScrollBottom", "onFilterChange", "onClick", "onClose", "onOpen", "required", "placeholder", "prefixLabel", "prepend", "repositionMode", "selectAllAppearance", "showSelectedValuesFirst", "suffixLabel", "tabConfirmsNewValue", "values", "virtualization", "toggle", "toggleContent", "maxLabelItems" ]);
+    function yr(e) {
+        var r = e.allowKeyMatching, l = r === void 0 ? true : r, a = e.animateLoading, i = e.appearance, o = i === void 0 ? "default" : i, u = e.append, c = e.allowNewValues, s = e.children, f = e.defaultPlacement, d = f === void 0 ? "vertical" : f, p = e.defaultValues, v = e.describedBy, b = e.disabled, m = e.elementRef, y = e.error, g = e.filter, S = e.footerMessage, O = e.inline, x = e.inputId, j = e.inputRef, E = e.isLoadingOptions, P = e.labelledBy, A = e.labelText, I = e.loadingMessage, B = e.menuStyle, V = B === void 0 ? sr : B, N = e.multiple, F = e.name, K = e.noOptionsMessage, H = K === void 0 ? or : K, z = e.onChange, W = e.onScroll, $ = e.onScrollBottom, X = e.onFilterChange, U = e.onClick, G = e.onClose, Q = e.onOpen, Y = e.required, Z = e.placeholder, ee = Z === void 0 ? ur : Z, re = e.prefixLabel, ne = e.prepend, te = e.repositionMode, le = te === void 0 ? "flip" : te, ae = e.selectAllAppearance, ie = ae === void 0 ? "buttongroup" : ae, ue = e.showSelectedValuesFirst, ce = e.suffixLabel, se = e.tabConfirmsNewValue, fe = e.values, de = e.virtualization, pe = e.toggle, ve = e.toggleContent, be = ve === void 0 ? "optionChildren" : ve, me = e.maxLabelItems, ye = me === void 0 ? cr : me, ge = We(e, [ "allowKeyMatching", "animateLoading", "appearance", "append", "allowNewValues", "children", "defaultPlacement", "defaultValues", "describedBy", "disabled", "elementRef", "error", "filter", "footerMessage", "inline", "inputId", "inputRef", "isLoadingOptions", "labelledBy", "labelText", "loadingMessage", "menuStyle", "multiple", "name", "noOptionsMessage", "onChange", "onScroll", "onScrollBottom", "onFilterChange", "onClick", "onClose", "onOpen", "required", "placeholder", "prefixLabel", "prepend", "repositionMode", "selectAllAppearance", "showSelectedValuesFirst", "suffixLabel", "tabConfirmsNewValue", "values", "virtualization", "toggle", "toggleContent", "maxLabelItems" ]);
         // @docs-props-type SelectBasePropsBase
-                var ge = L()({
+                var he = L()({
             componentName: "SelectBase",
             /* eslint-disable-next-line prefer-rest-params */
             componentProps: arguments[0],
@@ -1052,400 +1103,449 @@
             valuePropName: "values"
         });
         // states
-                var he = (0, t.useState)((function() {
+                var Se = (0, n.useState)((function() {
             return {
                 activeItemId: (0, T.createDOMID)("active-item"),
                 menuListboxId: (0, T.createDOMID)("menu-listbox")
             };
-        })), Se = Be(he, 1), Oe = Se[0], we = Oe.activeItemId, ke = Oe.menuListboxId;
-        var xe = (0, t.useState)(0), je = Be(xe, 2), Pe = je[0], Ee = je[1];
-        var Le = (0, t.useState)(""), Ie = Be(Le, 2), qe = Ie[0], Te = Ie[1];
-        var De = (0, t.useState)(false), Ne = Be(De, 2), Ve = Ne[0], Fe = Ne[1];
-        var Ke = (0, t.useState)(false), He = Be(Ke, 2), We = He[0], $e = He[1];
-        var Xe = (0, t.useState)([]), Ue = Be(Xe, 2), Je = Ue[0], Ge = Ue[1];
-        var Qe = (0, t.useState)(p || []), Ye = Be(Qe, 2), Ze = Ye[0], lr = Ye[1];
+        })), Oe = Ve(Se, 1), we = Oe[0], Ce = we.activeItemId, xe = we.menuListboxId;
+        var je = (0, n.useState)(0), Ee = Ve(je, 2), Pe = Ee[0], Ae = Ee[1];
+        var Ie = (0, n.useState)(""), De = Ve(Ie, 2), Te = De[0], qe = De[1];
+        var _e = (0, n.useState)(false), Ne = Ve(_e, 2), Fe = Ne[0], Ke = Ne[1];
+        var He = (0, n.useState)(false), ze = Ve(He, 2), $e = ze[0], Xe = ze[1];
+        var Ue = (0, n.useState)([]), Je = Ve(Ue, 2), Ge = Je[0], Qe = Je[1];
+        var Ye = (0, n.useState)(p || []), er = Ve(Ye, 2), rr = er[0], ir = er[1];
  // previous state
-                var cr = R()(Pe);
+                var fr = D()(Pe);
         // refs
-                var fr = (0, t.useRef)(null);
-        var dr = (0, t.useRef)(null);
-        var br = (0, t.useRef)(null);
-        var mr = (0, t.useRef)([]);
-        var yr = (0, t.useRef)([]);
-        var gr = (0, t.useRef)(cr);
-        var hr = (0, t.useRef)();
-        var Sr = (0, t.useRef)({});
-        var Or = (0, t.useRef)(0);
-        var wr = (0, t.useRef)([]);
-        var Cr = (0, t.useRef)(null);
-        var kr = (0, t.useRef)();
-        var xr = (0, t.useRef)(0);
-        var jr = (0, t.useRef)("none");
-        var Pr = (0, t.useState)(g ? (0, T.createDOMID)("filter") : undefined), Er = Be(Pr, 1), Ar = Er[0];
-        (0, t.useEffect)((function() {
+                var pr = (0, n.useRef)(null);
+        var vr = (0, n.useRef)(null);
+        var yr = (0, n.useRef)(null);
+        var gr = (0, n.useRef)([]);
+        var hr = (0, n.useRef)([]);
+        var Sr = (0, n.useRef)(fr);
+        var Or = (0, n.useRef)();
+        var wr = (0, n.useRef)({});
+        var Cr = (0, n.useRef)(0);
+        var kr = (0, n.useRef)([]);
+        var xr = (0, n.useRef)(null);
+        var jr = (0, n.useRef)();
+        var Er = (0, n.useRef)(0);
+        var Pr = (0, n.useRef)("none");
+        var Ar = (0, n.useState)(g ? (0, T.createDOMID)("filter") : undefined), Lr = Ve(Ar, 1), Ir = Lr[0];
+        var Dr = _(b, "disabled"), Rr = Dr.isDisabled;
+        (0, n.useEffect)((function() {
             if (false) {}
-        }), [ i, u, y, re ]);
-        var Lr = (0, t.useMemo)((function() {
-            var e = n().Children.toArray(s);
+        }), [ o, u, y, ne ]);
+        var Mr = (0, n.useMemo)((function() {
+            var e = t().Children.toArray(s);
             var r = new Map;
-            for (var t = 0; t < e.length; t += 1) {
-                var l = e[t];
-                if (tr(l)) {
+            for (var n = 0; n < e.length; n += 1) {
+                var l = e[n];
+                if (lr(l)) {
                     r.set(l.props.value, l);
                 }
             }
             return [ e, r ];
-        }), [ s ]), Ir = Be(Lr, 2), Rr = Ir[0], Mr = Ir[1];
-        var qr = vr({
-            currentValues: ge ? se : Ze,
+        }), [ s ]), Tr = Ve(Mr, 2), qr = Tr[0], _r = Tr[1];
+        var Br = mr({
+            currentValues: he ? fe : rr,
             multiple: N
         });
         // mutable object reference to currentValues to permit idempotent callbacks
-                var Tr = (0, t.useRef)(null);
-        Tr.current = qr;
-        var Dr = (0, t.useCallback)((function() {
+                var Vr = (0, n.useRef)(null);
+        Vr.current = Br;
+        var Nr = (0, n.useCallback)((function() {
             // in non-multiple mode, don't move values to the top of the list
-            return N && ie !== "never" ? Tr.current : [];
-        }), [ N, ie ]);
-        var _r = (0, t.useCallback)((function(e) {
-            var r = qe;
-            Fe(true);
-            Ge(Dr());
+            return N && ue !== "never" ? Vr.current : [];
+        }), [ N, ue ]);
+        var Fr = (0, n.useCallback)((function(e) {
+            if (Rr) {
+                return;
+            }
+            var r = Te;
+            Ke(true);
+            Qe(Nr());
             // SUI-3234: preserve existing behavior difference between <Select> and <Multiselect.Compact>
                         if (N) {
-                Te("");
+                qe("");
             }
-            if (r !== qe) {
-                $ === null || $ === void 0 ? void 0 : $(e, {
-                    keyword: qe
+            if (r !== Te) {
+                X === null || X === void 0 ? void 0 : X(e, {
+                    keyword: Te
                 });
             }
-        }), [ qe, Dr, N, $ ]);
-        (0, t.useEffect)((function() {
-            if (Ve) {
-                G === null || G === void 0 ? void 0 : G();
-                if (Cr.current && !g) {
-                    Cr.current.focus();
+        }), [ Rr, Te, Nr, N, X ]);
+        (0, n.useEffect)((function() {
+            if (Fe) {
+                Q === null || Q === void 0 ? void 0 : Q();
+                if (xr.current && !g) {
+                    xr.current.focus();
                 } else {
                     var e;
-                    Ee((e = kr.current) !== null && e !== void 0 ? e : 0);
+                    Ae((e = jr.current) !== null && e !== void 0 ? e : 0);
                 }
             }
-        }), [ G, Ve, Je, qe, g ]);
-        var Br = (0, t.useCallback)((function() {
-            Fe(false);
-            Ee(0);
-            gr.current = null;
-            J === null || J === void 0 ? void 0 : J();
-        }), [ J ]);
-        var Nr = (0, t.useCallback)((function(e, r) {
-            var t = new Set(Tr.current);
-            var n;
+        }), [ Q, Fe, Ge, Te, g ]);
+        var Kr = (0, n.useCallback)((function() {
+            Ke(false);
+            Ae(0);
+            Sr.current = null;
+            G === null || G === void 0 ? void 0 : G();
+        }), [ G ]);
+        var Hr = (0, n.useCallback)((function() {
+            Kr();
+        }), [ Kr ]);
+        var zr = (0, n.useCallback)((function(e, r) {
+            if (Rr) {
+                return;
+            }
+            var n = new Set(Vr.current);
+            var t;
             if (N) {
-                if (t.has(r)) {
-                    t["delete"](r);
+                if (n.has(r)) {
+                    n["delete"](r);
                 } else {
-                    t.add(r);
+                    n.add(r);
                 }
-                n = Array.from(t);
+                t = Array.from(n);
             } else {
                 // non-multiple mode must always have a value
-                n = [ r ];
+                t = [ r ];
             }
-            var l = !ge;
+            var l = !he;
             if (l) {
-                lr(n);
+                ir(t);
             }
             if (N) {
                 // in uncontrolled multiple mode, keep the menu open
                 if (l) {
-                    Fe(true);
+                    Ke(true);
                 }
             } else {
                 var a;
                 // non-multiple mode only supports a single selection
                 // so close the menu once a selection is made
-                                Br({
+                                Hr({
                     reason: "contentClick"
                 });
-                (a = fr.current) === null || a === void 0 ? void 0 : a.focus();
+                (a = pr.current) === null || a === void 0 ? void 0 : a.focus();
             }
-            H === null || H === void 0 ? void 0 : H(e, {
-                values: n,
-                name: V,
+            z === null || z === void 0 ? void 0 : z(e, {
+                values: t,
+                name: F,
                 reason: "valueToggle"
             });
-        }), [ Br, ge, N, V, H ]);
-        var Vr = function e() {
-            dr.current = null;
-            mr.current = [];
-            if (br.current) {
-                clearTimeout(br.current);
+        }), [ Hr, he, Rr, N, F, z ]);
+        var Wr = function e() {
+            vr.current = null;
+            gr.current = [];
+            if (yr.current) {
+                clearTimeout(yr.current);
             }
         };
-        var Fr = (0, t.useCallback)((function(e) {
+        var $r = (0, n.useCallback)((function(e) {
+            if (Rr) {
+                return;
+            }
             // this doesn't make sense if we can't select multiple values
-            if (!N) {
+                        if (!N) {
                 return;
             }
-            var r = Tr.current;
-            var t = new Set(r);
-            var n = new Set([].concat(Me(r), Me(wr.current)));
+            var r = Vr.current;
+            var n = new Set(r);
+            var t = new Set([].concat(Me(r), Me(kr.current)));
             // to keep track of custom values we create a copy of selected values and remove
             // items as they are accounted for in children, leaving only custom values
-                        var l = new Set(n);
+                        var l = new Set(t);
             var a = new Set;
-            Rr.forEach((function(e) {
-                if (tr(e)) {
+            qr.forEach((function(e) {
+                if (lr(e)) {
                     // this value is being represented in children so it is not custom
                     l["delete"](e.props.value);
-                }
-                if (tr(e) && n.has(e.props.value) && (!e.props.disabled || t.has(e.props.value))) {
-                    a.add(e.props.value);
+                    var r = Ze(e.props.disabled);
+                    if (t.has(e.props.value) && (!r || n.has(e.props.value))) {
+                        a.add(e.props.value);
+                    }
                 }
             }));
-            var o = [].concat(Me(Array.from(l)), Me(Array.from(a)));
-            if (!ge) {
-                lr(o);
+            var i = [].concat(Me(Array.from(l)), Me(Array.from(a)));
+            if (!he) {
+                ir(i);
             }
-            H === null || H === void 0 ? void 0 : H(e, {
-                values: o,
-                name: V,
+            z === null || z === void 0 ? void 0 : z(e, {
+                values: i,
+                name: F,
                 reason: "selectAll"
             });
-        }), [ Rr, ge, N, V, H ]);
-        var Kr = (0, t.useCallback)((function(e) {
+        }), [ qr, he, Rr, N, F, z ]);
+        var Xr = (0, n.useCallback)((function(e) {
+            if (Rr) {
+                return;
+            }
             // this doesn't make sense if we can't select multiple values
-            if (!N) {
+                        if (!N) {
                 return;
             }
-            var r = new Set(Tr.current);
-            var t = new Set(Tr.current);
-            for (var n = 0; n < wr.current.length; n += 1) {
-                t["delete"](wr.current[n]);
+            var r = new Set(Vr.current);
+            // Preserve hidden values only when "Clear matches" semantics apply
+                        var n = Te !== "";
+            var t = new Set;
+            if (n) {
+                t = new Set(Vr.current);
+                kr.current.forEach((function(e) {
+                    t["delete"](e);
+                }));
             }
             var l = new Set;
-            for (var a = 0; a < Rr.length; a += 1) {
-                var o = Rr[a];
+            for (var a = 0; a < qr.length; a += 1) {
+                var i = qr[a];
                 // this will unselect all selected values unless those values are disabled or hidden by the filter
-                                if (tr(o) && (r.has(o.props.value) && o.props.disabled || t.has(o.props.value))) {
-                    l.add(o.props.value);
+                                if (lr(i)) {
+                    var o = Ze(i.props.disabled);
+                    if (r.has(i.props.value) && o || t.has(i.props.value)) {
+                        l.add(i.props.value);
+                    }
                 }
             }
-            var i = Array.from(l);
-            if (!ge) {
-                lr(i);
+            var u = Array.from(l);
+            if (!he) {
+                ir(u);
             }
-            H === null || H === void 0 ? void 0 : H(e, {
-                values: i,
-                name: V,
+            z === null || z === void 0 ? void 0 : z(e, {
+                values: u,
+                name: F,
                 reason: "clearAll"
             });
-        }), [ Rr, ge, N, V, H ]);
-        var Hr = (0, t.useCallback)((function(e) {
-            if (Ve && !P) {
-                W === null || W === void 0 ? void 0 : W(e);
+        }), [ qr, Te, he, Rr, N, F, z ]);
+        var Ur = (0, n.useCallback)((function(e) {
+            if (Fe && !E) {
+                $ === null || $ === void 0 ? void 0 : $(e);
             }
-        }), [ Ve, P, W ]);
-        var zr = (0, t.useCallback)((function(e) {
-            var r = e.key;
-            if (r === "Tab") {
-                if (ce && hr.current && Or.current <= 1) {
-                    e.preventDefault();
-                    Nr(e, hr.current);
+        }), [ Fe, E, $ ]);
+        var Jr = (0, n.useCallback)((function(e) {
+            if (Rr) {
+                return;
+            }
+            var r = Cr.current;
+            var t = e.key;
+            var l = Or.current !== null && Or.current !== undefined ? _r.get(Or.current) : undefined;
+            var a = Ze(l === null || l === void 0 ? void 0 : l.props.disabled);
+            if (t === "Tab") {
+                if (se && Or.current && Cr.current <= 1) {
+                    if (!a) {
+                        e.preventDefault();
+                        zr(e, Or.current);
+                    }
                 }
             }
             if (e.shiftKey || e.metaKey || e.ctrlKey) {
-                if (r === "a" && (e.ctrlKey || e.metaKey)) {
+                if (t === "a" && (e.ctrlKey || e.metaKey)) {
                     // handle control + A
-                    if (jr.current === "all") {
-                        Kr(e);
+                    if (Pr.current === "all") {
+                        Xr(e);
                     } else {
-                        Fr(e);
+                        $r(e);
                     }
                 }
                 return;
             }
-            if (r === "ArrowDown") {
+            if (t === "ArrowDown") {
                 e.preventDefault();
-                Ee(Math.min(Pe + 1, ae === "checkbox" ? Or.current : Or.current - 1));
-                if (s && W) {
-                    var n = t.Children.toArray(s).length - (2 + Tr.current.length);
-                    if (Pe === n) {
-                        Hr(e);
+                var i = ie === "checkbox" ? r : r - 1;
+                if (i >= 0) {
+                    Ae(Math.min(Pe + 1, i));
+                }
+                if (s && $) {
+                    var o = n.Children.toArray(s).length - (2 + Vr.current.length);
+                    if (Pe === o) {
+                        Ur(e);
                     }
                 }
             }
-            if (r === "ArrowUp") {
+            if (t === "ArrowUp") {
                 e.preventDefault();
-                Ee(Math.max(Pe - 1, 0));
+                Ae(Math.max(Pe - 1, 0));
             }
-            if (r === "Enter" && hr.current && Ve) {
-                if (hr.current === "selectAll") {
-                    if (jr.current === "all") {
-                        Kr(e);
+            if (t === "Enter" && Or.current && Fe) {
+                if (Or.current === "selectAll") {
+                    if (Pr.current === "all") {
+                        Xr(e);
                     } else {
-                        Fr(e);
+                        $r(e);
                     }
-                } else {
+                } else if (!a) {
                     e.preventDefault();
-                    Nr(e, hr.current);
+                    zr(e, Or.current);
                 }
             }
-        }), [ Pe, s, Kr, Hr, Fr, W, Ve, ae, ce, Nr ]);
-        var Wr = (0, t.useCallback)((function(e, r) {
-            var t = r.value;
+        }), [ Pe, s, Xr, Ur, $r, Rr, _r, $, Fe, ie, se, zr ]);
+        var Gr = (0, n.useCallback)((function(e, r) {
+            var n = r.value;
+            if (Rr) {
+                return;
+            }
             e.preventDefault();
-            if (!Ve) {
+            if (!Fe) {
                 return;
             }
-            Nr(e, t);
-        }), [ Ve, Nr ]);
-        var $r = (0, t.useCallback)((function(e, r) {
-            var t = e.nativeEvent.key;
+            zr(e, n);
+        }), [ Rr, Fe, zr ]);
+        var Qr = (0, n.useCallback)((function(e, r) {
+            var n = e.nativeEvent.key;
             // Checking for a single character to avoid complications from double-byte languages and emojis.
-                        if (t.length === 1) {
-                var n = [];
+                        if (n.length === 1) {
+                var t = [];
                 var l = {
                     index: 0,
-                    value: t
+                    value: n
                 };
-                if (!dr.current) {
-                    if (t === " ") {
-                        Vr();
+                if (!vr.current) {
+                    if (n === " ") {
+                        Wr();
                         return;
                     }
-                    n = Ce(yr.current, l);
-                } else if (mr.current.length > 1) {
-                    l.index = dr.current.index + 1;
-                    n = Ce(mr.current, l);
+                    t = ke(hr.current, l);
+                } else if (gr.current.length > 1) {
+                    l.index = vr.current.index + 1;
+                    t = ke(gr.current, l);
                 }
-                if (n.length) {
+                if (t.length) {
                     var a;
-                    var o = 0;
+                    var i = 0;
                     // If the active option is a first character match, cycle to the next matching option.
-                                        if (l.index === 0 && n.length > 1) {
-                        var i = n.indexOf(yr.current[r]);
-                        if (i >= 0) {
-                            o = i === n.length - 1 ? 0 : i + 1;
+                                        if (l.index === 0 && t.length > 1) {
+                        var o = t.indexOf(hr.current[r]);
+                        if (o >= 0) {
+                            i = o === t.length - 1 ? 0 : o + 1;
                         }
                     }
-                    var u = n[o];
+                    var u = t[i];
                     var c = u.value, s = u.label;
-                    var f = Sr.current[nr(c, s)];
+                    var f = wr.current[ar(c, s)];
                     f === null || f === void 0 ? void 0 : (a = f.focus) === null || a === void 0 ? void 0 : a.call(f);
                 }
-                mr.current = n;
-                dr.current = l;
-                if (br.current) {
-                    clearTimeout(br.current);
+                gr.current = t;
+                vr.current = l;
+                if (yr.current) {
+                    clearTimeout(yr.current);
                 }
-                br.current = setTimeout(Vr, 500);
+                yr.current = setTimeout(Wr, 500);
                 e.preventDefault();
                 e.stopPropagation();
             }
         }), []);
-        var Xr = (0, t.useCallback)((function(e, r) {
-            var t = r.value;
-            Te(t);
-            Fe(true);
-            Ee(0);
-            $ === null || $ === void 0 ? void 0 : $(e, {
-                keyword: t
+        var Yr = (0, n.useCallback)((function(e, r) {
+            var n = r.value;
+            if (Rr) {
+                return;
+            }
+            qe(n);
+            Ke(true);
+            Ae(0);
+            X === null || X === void 0 ? void 0 : X(e, {
+                keyword: n
             });
-        }), [ $ ]);
-        var Ur = (0, t.useCallback)((function() {
-            $e(true);
+        }), [ Rr, X ]);
+        var Zr = (0, n.useCallback)((function() {
+            Xe(true);
         }), []);
-        var Jr = (0, t.useCallback)((function() {
-            $e(false);
+        var en = (0, n.useCallback)((function() {
+            Xe(false);
         }), []);
-        var Gr = (0, t.useCallback)((function(e) {
-            if (gr.current !== Pe) {
-                (0, D.scrollIntoViewIfNeeded)(e);
+        // Close when component becomes disabled/dimmed during an expanded state to prevent further selection
+                (0, n.useEffect)((function() {
+            if (Rr && Fe) {
+                Kr();
+            }
+        }), [ Rr, Fe, Kr ]);
+        var rn = (0, n.useCallback)((function(e) {
+            if (Sr.current !== Pe) {
+                (0, q.scrollIntoViewIfNeeded)(e);
             }
         }), [ Pe ]);
-        var Qr = (0, t.useCallback)((function(e, r, t) {
-            if (t) {
-                Cr.current = e;
+        var nn = (0, n.useCallback)((function(e, r, n) {
+            if (n) {
+                xr.current = e;
             }
             if (e == null) {
-                delete Sr.current[r];
+                delete wr.current[r];
             } else {
-                Sr.current[r] = e;
+                wr.current[r] = e;
             }
-        }), [ Sr ]);
-        var Yr = (0, t.useCallback)((function(e) {
-            fr.current = e;
+        }), [ wr ]);
+        var tn = (0, n.useCallback)((function(e) {
+            pr.current = e;
             Re(m, e);
-        }), [ m, fr ]);
-        var Zr = qr.some((function(e) {
-            var r = Mr.get(e);
-            return r && !r.props.disabled;
+        }), [ m, pr ]);
+        var ln = Br.some((function(e) {
+            var r = _r.get(e);
+            var n = Ze(r === null || r === void 0 ? void 0 : r.props.disabled);
+            return r && !n;
         }));
-        var et = ie === "immediately" ? Dr() : Je;
-        var rt = (0, t.useMemo)((function() {
-            Or.current = 0;
-            kr.current = undefined;
-            xr.current = 0;
-            hr.current = undefined;
-            yr.current = [];
-            var e = function e(r, t) {
+        var an = ue === "immediately" ? Nr() : Ge;
+        var on = (0, n.useMemo)((function() {
+            Cr.current = 0;
+            jr.current = undefined;
+            Er.current = 0;
+            Or.current = undefined;
+            hr.current = [];
+            var e = function e(r, n) {
                 return function(e) {
-                    return Qr(e, r, t);
+                    return nn(e, r, n);
                 };
             };
             var r;
             var a = 0;
-            var o = false;
+            var i = false;
             // used to avoid overwriting the selected item ref in multiple mode
-                        var i;
-            var u = new Set(qr);
-            var s = new Set(et !== null && et !== void 0 ? et : []);
-            var f = Rr.reduce((function(c, f, d) {
+                        var o;
+            var u = new Set(Br);
+            var s = new Set(an !== null && an !== void 0 ? an : []);
+            var f = qr.reduce((function(c, f, d) {
                 // ignore Headings and Dividers
-                if (!tr(f)) {
+                if (!lr(f)) {
                     c.push(f);
                     return c;
                 }
                 var p = f.props, v = p.disabled, b = p.hidden, m = p.label, y = p.value;
  // Find out if the search string exactly matches a value
-                                if (y === qe) {
+                                if (y === Te) {
                     r = true;
                 }
                 var h = u.has(y);
-                var S = !!h && !v && !i;
-                var O = l && !N && !g && !P && !W;
-                var C = nr(y, m);
+                var S = !!h && v !== true && v !== "disabled" && !o;
+                var O = l && !N && !g && !E && !$;
+                var C = ar(y, m);
                 var k = -1;
-                if (O && !v && !b) {
-                    yr.current.push({
+                if (O && v !== true && v !== "disabled" && !b) {
+                    hr.current.push({
                         label: m,
                         value: y
                     });
-                    k = yr.current.length - 1;
+                    k = hr.current.length - 1;
                 }
                 // Format the Menu.Item
-                                var x =  (0, t.cloneElement)(f, {
+                                var x =  (0, n.cloneElement)(f, {
                     elementRef: e(C, S),
                     key: f.key || d,
-                    onClick: Wr,
+                    onClick: Gr,
                     onKeyDown: O ? function(e) {
-                        return $r(e, k);
+                        return Qr(e, k);
                     } : undefined,
                     selected: h,
                     multiple: N,
                     role: "option"
                 });
                 if (S) {
-                    i = true;
+                    o = true;
                 }
                 if (s.has(y)) {
                     if (a === 0) {
-                        c.splice(a, 0,  n().createElement(w.Divider, {
+                        c.splice(a, 0,  t().createElement(w.Divider, {
                             key: "topDivider"
                         }));
-                        o = true;
+                        i = true;
                     }
                     c.splice(a, 0, x);
                     a += 1;
@@ -1456,30 +1556,30 @@
             }), []);
             // In multiple mode, add missing items
                         if (N) {
-                for (var d = qr.length - 1; d >= 0; d -= 1) {
-                    var p = qr[d];
-                    var v = Mr.get(p);
+                for (var d = Br.length - 1; d >= 0; d -= 1) {
+                    var p = Br[d];
+                    var v = _r.get(p);
                     if (!v) {
-                        if (p === qe) {
+                        if (p === Te) {
                             r = true;
                         }
                         var b = s.has(p);
-                        var m = et.length;
+                        var m = an.length;
                         if (a === 0) {
-                            f.splice(0, 0,  n().createElement(w.Divider, {
+                            f.splice(0, 0,  t().createElement(w.Divider, {
                                 key: "topDivider"
                             }));
                             a += 1;
-                            o = true;
+                            i = true;
                         }
                         var y = String(p);
-                        var h = nr(p, y);
-                        f.splice(b ? 0 : m + 1, 0,  n().createElement(U, {
+                        var h = ar(p, y);
+                        f.splice(b ? 0 : m + 1, 0,  t().createElement(J, {
                             elementRef: e(h),
                             label: y,
                             value: p,
                             key: "missing-value-".concat(p),
-                            onClick: Wr,
+                            onClick: Gr,
                             multiple: N,
                             selected: true
                         }));
@@ -1491,45 +1591,45 @@
             }
             var S = g === "controlled";
             // Filter the items
-                        var O = (0, M.stringToKeywords)(qe);
+                        var O = (0, R.stringToKeywords)(Te);
             f = S ? f : f.filter((function(e) {
-                if (tr(e)) {
-                    return (0, M.testPhrase)(e.props.label, O);
+                if (lr(e)) {
+                    return (0, R.testPhrase)(e.props.label, O);
                 }
                 return true;
  // Keep all headers and non-interactive options
                         })).map((function(e) {
-                if (!tr(e)) {
+                if (!lr(e)) {
                     return e;
                 }
                 // highlight matched text
-                                var r = O && (0, M.keywordLocations)(e.props.label, O);
+                                var r = O && (0, R.keywordLocations)(e.props.label, O);
                 
-                return (0, t.cloneElement)(e, {
+                return (0, n.cloneElement)(e, {
                     matchRanges: r || undefined
                 });
             }));
             // Add the option to add the new value
-                        if (c && !r && qe) {
-                var C = o ? a + 1 : a;
-                var k = "".concat(qe, " (new value)");
-                var x = nr(qe, k);
-                f.splice(C, 0,  n().createElement(U, {
+                        if (c && !r && Te) {
+                var C = i ? a + 1 : a;
+                var k = "".concat(Te, " (new value)");
+                var x = ar(Te, k);
+                f.splice(C, 0,  t().createElement(J, {
                     elementRef: e(x),
                     label: k,
-                    value: qe,
+                    value: Te,
                     key: "newValue",
                     multiple: N,
-                    onClick: Wr
+                    onClick: Gr
                 }));
             }
             // When selectAll is a menu item, add an offset so that activeItem accounts for the extra selectAll option.
-                        var j = ae === "checkbox" && N && f.length > 1 ? 1 : 0;
-            var E = true;
+                        var j = ie === "checkbox" && N && f.length > 1 ? 1 : 0;
+            var P = true;
             // Highlight the selected Items and remove hidden
                         f = f.reduce((function(e, r) {
                 // ignore Dividers & Headings
-                if (!tr(r)) {
+                if (!lr(r)) {
                     e.push(r);
                     return e;
                 }
@@ -1537,178 +1637,182 @@
                                 if (r.props && r.props.hidden) {
                     return e;
                 }
-                if (r.props.selected && !r.props.disabled && kr.current == null) {
-                    kr.current = Or.current;
+                if (r.props.selected && r.props.disabled !== true && r.props.disabled !== "disabled" && jr.current == null) {
+                    jr.current = Cr.current;
                 }
-                var n = j === Pe;
+                var t = r.props.disabled;
+                if (t === true || t === "disabled") {
+                    e.push(r);
+                    return e;
+                }
+                var l = j === Pe;
                 j += 1;
-                Or.current += 1;
-                xr.current += r.props.selected ? 1 : 0;
-                if (r.key !== "newValue" && !r.props.disabled && !r.props.selected) {
-                    E = false;
+                Cr.current += 1;
+                // Dimmed Options can receive focus but are not selectable
+                                Er.current += r.props.selected && t !== "dimmed" ? 1 : 0;
+                if (r.key !== "newValue" && t !== "dimmed" && !r.props.selected) {
+                    P = false;
                 }
-                if (!n || !We) {
+                if (!l || !$e) {
                     e.push(r);
                     return e;
                 }
-                if (!r.props.disabled) {
-                    hr.current = r.props.value;
-                }
-                var l =  (0, t.cloneElement)(r, {
-                    active: n,
-                    elementRef: Gr,
-                    id: we
+                Or.current = r.props.value;
+                var a =  (0, n.cloneElement)(r, {
+                    active: l,
+                    elementRef: rn,
+                    id: Ce
                 });
-                e.push(l);
+                e.push(a);
                 return e;
             }), []);
-            jr.current = xr.current === 0 && "none" || E && "all" || "some";
+            Pr.current = Er.current === 0 && "none" || P && "all" || "some";
             // add select all option
-                        if (ae === "checkbox" && N && Or.current > 0) {
+                        if (ie === "checkbox" && N && Cr.current > 0) {
                 var A = Pe === 0 && !!g;
                 var L;
-                if (jr.current === "all") {
-                    if (qe === "") {
-                        L = (0, q._)("Clear all");
+                if (Pr.current === "all") {
+                    if (Te === "") {
+                        L = (0, M._)("Clear all");
                     } else {
-                        L = (0, q._)("Clear all matches");
+                        L = (0, M._)("Clear all matches");
                     }
-                } else if (qe === "") {
-                    L = (0, q._)("Select all");
+                } else if (Te === "") {
+                    L = (0, M._)("Select all");
                 } else {
-                    L = (0, q._)("Select all matches");
+                    L = (0, M._)("Select all matches");
                 }
                 if (A) {
-                    hr.current = "selectAll";
+                    Or.current = "selectAll";
                 }
-                f.unshift( n().createElement(oe, {
+                f.unshift( t().createElement(oe, {
                     key: "select-all-option",
                     active: A,
-                    elementRef: Gr,
-                    id: A ? we : undefined,
-                    onClick: jr.current === "all" ? Kr : Fr,
+                    elementRef: rn,
+                    id: A ? Ce : undefined,
+                    onClick: Pr.current === "all" ? Xr : $r,
                     label: L,
-                    selected: jr.current === "all" || jr.current !== "none" && "some",
-                    totalCount: !!de && qr.length || undefined,
+                    selected: Pr.current === "all" || Pr.current !== "none" && "some",
+                    totalCount: !!pe && Br.length || undefined,
                     tabIndex: g ? -1 : undefined
-                }),  n().createElement(w.Divider, {
+                }),  t().createElement(w.Divider, {
                     key: "selectAllDivider"
                 }));
             }
-            wr.current = f.reduce((function(e, r) {
-                if (tr(r)) {
+            kr.current = f.reduce((function(e, r) {
+                if (lr(r)) {
                     e.push(r.props.value);
                 }
                 return e;
             }), []);
             return f;
-        }), [ Pe, we, l, c, Rr, Mr, qr, g, qe, Gr, Kr, Wr, $r, Qr, Fr, P, N, et, W, ae, We, de ]);
-        var tt = function e(r) {
-            var t = r.anchorWidth, l = r.maxHeight, o = r.placement, i = r.toggleId;
-            var u = er({
-                anchorWidth: t,
+        }), [ Pe, Ce, l, c, qr, _r, Br, g, Te, rn, Xr, Gr, Qr, nn, $r, E, N, an, $, ie, $e, pe ]);
+        var un = function e(r) {
+            var n = r.anchorWidth, l = r.maxHeight, i = r.placement, o = r.toggleId;
+            var u = nr({
+                anchorWidth: n,
                 isMultiple: N,
                 maxHeight: l,
-                menuStyle: B
+                menuStyle: V
             });
-            var c = qr.length > 0 && !Zr && !g ? 0 : undefined;
+            var c = Br.length > 0 && !ln && !g ? 0 : undefined;
             var s = {
                 "aria-multiselectable": N || undefined,
-                childrenStart: !!g &&  n().createElement(sr, {
-                    activeItemId: we,
-                    filterA11yId: Ar,
-                    filterKeyword: qe,
-                    hasChildren: rt.some((function(e) {
-                        return tr(e);
+                childrenStart: !!g &&  t().createElement(dr, {
+                    activeItemId: Ce,
+                    filterA11yId: Ir,
+                    filterKeyword: Te,
+                    hasChildren: on.some((function(e) {
+                        return lr(e);
                     })),
                     inputId: x,
                     inputRef: j,
-                    menuListboxId: ke,
+                    menuListboxId: xe,
                     multiple: N,
-                    onClearAll: Kr,
-                    onSelectAll: Fr,
-                    onTextBlur: Jr,
-                    onTextChange: Xr,
-                    onTextFocus: Ur,
-                    onTextKeyDown: zr,
-                    optionSelection: jr,
-                    placement: o,
-                    selectAllAppearance: ae,
-                    textHasFocus: We
+                    onClearAll: Xr,
+                    onSelectAll: $r,
+                    onTextBlur: en,
+                    onTextChange: Yr,
+                    onTextFocus: Zr,
+                    onTextKeyDown: Jr,
+                    optionSelection: Pr,
+                    placement: i,
+                    selectAllAppearance: ie,
+                    textHasFocus: $e
                 }),
                 focusMode: g ? "never" : undefined,
-                isLoading: P,
-                labelledBy: "".concat(Ar !== null && Ar !== void 0 ? Ar : "", " ").concat(i !== null && i !== void 0 ? i : "").trim(),
+                isLoading: E,
+                labelledBy: "".concat(Ir !== null && Ir !== void 0 ? Ir : "", " ").concat(o !== null && o !== void 0 ? o : "").trim(),
                 // NVDA ignores aria-labelledby attribute on popover, but reads it on menu
-                menuId: ke,
-                onScrollBottom: W ? Hr : undefined,
-                placement: o !== null && o !== void 0 ? o : undefined,
-                noOptionsMessage: K,
+                menuId: xe,
+                onScrollBottom: $ ? Ur : undefined,
+                placement: i !== null && i !== void 0 ? i : undefined,
+                noOptionsMessage: H,
                 footerMessage: S,
                 animateLoading: a,
                 loadingMessage: I,
-                onScroll: z,
+                onScroll: W,
                 style: u,
                 tabIndex: c
             };
-            if (fe) {
+            if (de) {
                 
-                return n().createElement(C.VirtualizedResultsMenu, _e({
-                    virtualization: fe
-                }, s), rt);
+                return t().createElement(C.VirtualizedResultsMenu, Be({
+                    virtualization: de
+                }, s), on);
             }
             
-            return n().createElement(k(), s, rt);
+            return t().createElement(k(), s, on);
         };
-        var nt = (0, t.useMemo)((function() {
+        var cn = (0, n.useMemo)((function() {
             
-            return n().createElement(pr, _e({
-                appearance: i,
+            return t().createElement(br, Be({
+                appearance: o,
                 append: u,
-                currentValues: qr,
+                currentValues: Br,
                 "data-test": N ? "multiselect" : "select",
                 describedBy: v,
                 disabled: b,
-                elementRef: Yr,
+                elementRef: tn,
                 error: y,
                 inline: O,
                 labelText: A,
-                labelledBy: E,
+                labelledBy: P,
                 multiple: N,
-                onClick: X,
-                placeholder: Z,
-                prefixLabel: ee,
-                prepend: re,
-                required: Q,
-                suffixLabel: ue,
-                toggle: de,
-                toggleContent: ve,
-                maxLabelItems: me
-            }, ye), s);
-        }), [ i, u, qr, N, v, b, Yr, y, O, A, E, X, Z, ee, re, Q, ue, de, ve, me, ye, s ]);
+                onClick: Rr ? undefined : U,
+                placeholder: ee,
+                prefixLabel: re,
+                prepend: ne,
+                required: Y,
+                suffixLabel: ce,
+                toggle: pe,
+                toggleContent: be,
+                maxLabelItems: ye
+            }, ge), s);
+        }), [ o, u, Br, N, v, b, tn, y, O, A, P, Rr, U, ee, re, ne, Y, ce, pe, be, ye, ge, s ]);
         
-        return n().createElement(h(), {
-            closeReasons: rr,
+        return t().createElement(h(), {
+            closeReasons: tr,
             inputId: x,
-            "aria-labelledby": Ar,
-            toggle: nt,
-            onRequestOpen: _r,
-            onRequestClose: Br,
-            open: Ve,
-            openWithArrowKeys: true,
-            repositionMode: ne,
+            "aria-labelledby": Ir,
+            toggle: cn,
+            onRequestOpen: Fr,
+            onRequestClose: Hr,
+            open: Fe,
+            openWithArrowKeys: !Rr,
+            repositionMode: le,
             defaultPlacement: d,
-            canCoverAnchor: Ae().innerHeight < 500,
+            canCoverAnchor: Le().innerHeight < 500,
             retainFocus: false,
-            takeFocus: qr.length === 0 || qr.length > 0 && !Zr || !!g
-        }, tt);
+            takeFocus: Br.length === 0 || Br.length > 0 && !ln || !!g
+        }, un);
     }
-    br.propTypes = Ye;
-    br.componentType = "SelectBase";
-    br.Option = U;
-    br.Divider = w.Divider;
-    br.Heading = w.Heading;
-    /* harmony default export */    const mr = br;
+    yr.propTypes = er;
+    yr.componentType = "SelectBase";
+    yr.Option = J;
+    yr.Divider = w.Divider;
+    yr.Heading = w.Heading;
+    /* harmony default export */    const gr = yr;
     // CONCATENATED MODULE: ./src/SelectBase/index.ts
     module.exports = r;
     /******/})();