@splunk/react-ui 5.7.1 → 5.9.0

package/Multiselect.js

@@ -64,7 +64,7 @@
         Divider: () => /* reexport */ u.Divider,
         Heading: () => /* reexport */ u.Heading,
         Option: () => /* reexport */ h,
-        default: () => /* reexport */ an
+        default: () => /* reexport */ cn
     });
     // CONCATENATED MODULE: external "react"
     const r = require("react");
@@ -129,7 +129,7 @@
         compact: i().bool,
         description: i().string,
         descriptionPosition: i().oneOf([ "right", "bottom" ]),
-        disabled: i().bool,
+        disabled: i().oneOfType([ i().bool, i().oneOf([ "dimmed", "disabled" ]) ]),
         /**
    * @private Undocumented due to limitations in supporting in compact `Multiselect` (see SUI-8286 notes for more info).
    */
@@ -243,7 +243,7 @@
         defaultPlacement: i().oneOf([ "above", "below", "vertical" ]),
         defaultValues: i().array,
         describedBy: i().string,
-        disabled: i().bool,
+        disabled: i().oneOfType([ i().bool, i().oneOf([ "dimmed", "disabled" ]) ]),
         elementRef: i().oneOfType([ i().func, i().object ]),
         error: i().bool,
         filter: i().oneOf([ false, true, "controlled" ]),
@@ -276,11 +276,11 @@
         virtualization: i().number
     };
     // TS: not typed controlled/uncontrolled, handled by Multiselect wrapper component
-        var x = {};
-    var V = (0, d._)("No matches");
+        var V = {};
+    var E = (0, d._)("No matches");
     var N = (0, d._)("Select...");
-    function B(e) {
-        var n = e.allowNewValues, o = e.animateLoading, a = e.append, l = e.children, i = e.controlledFilter, u = e.defaultPlacement, s = u === void 0 ? "vertical" : u, c = e.defaultValues, d = e.describedBy, v = e.disabled, b = e.elementRef, m = e.error, g = e.filter, y = e.footerMessage, h = e.inline, O = e.inputId, w = e.inputRef, S = e.isLoadingOptions, k = e.labelledBy, j = e.loadingMessage, B = e.menuStyle, R = B === void 0 ? x : B, E = e.name, F = e.noOptionsMessage, I = F === void 0 ? V : F, A = e.onChange, q = e.onClose, D = e.onFilterChange, L = e.onOpen, T = e.onScroll, _ = e.onScrollBottom, H = e.placeholder, $ = H === void 0 ? N : H, z = e.prepend, K = e.repositionMode, W = e.selectAllAppearance, U = e.showSelectedValuesFirst, G = U === void 0 ? "nextOpen" : U, X = e.tabConfirmsNewValue, J = e.values, Q = e.virtualization, Y = P(e, [ "allowNewValues", "animateLoading", "append", "children", "controlledFilter", "defaultPlacement", "defaultValues", "describedBy", "disabled", "elementRef", "error", "filter", "footerMessage", "inline", "inputId", "inputRef", "isLoadingOptions", "labelledBy", "loadingMessage", "menuStyle", "name", "noOptionsMessage", "onChange", "onClose", "onFilterChange", "onOpen", "onScroll", "onScrollBottom", "placeholder", "prepend", "repositionMode", "selectAllAppearance", "showSelectedValuesFirst", "tabConfirmsNewValue", "values", "virtualization" ]);
+    function x(e) {
+        var n = e.allowNewValues, o = e.animateLoading, a = e.append, l = e.children, i = e.controlledFilter, u = e.defaultPlacement, s = u === void 0 ? "vertical" : u, c = e.defaultValues, d = e.describedBy, v = e.disabled, b = e.elementRef, m = e.error, g = e.filter, y = e.footerMessage, h = e.inline, O = e.inputId, w = e.inputRef, S = e.isLoadingOptions, k = e.labelledBy, j = e.loadingMessage, x = e.menuStyle, B = x === void 0 ? V : x, R = e.name, I = e.noOptionsMessage, F = I === void 0 ? E : I, q = e.onChange, A = e.onClose, D = e.onFilterChange, L = e.onOpen, T = e.onScroll, _ = e.onScrollBottom, H = e.placeholder, $ = H === void 0 ? N : H, z = e.prepend, K = e.repositionMode, W = e.selectAllAppearance, U = e.showSelectedValuesFirst, G = U === void 0 ? "nextOpen" : U, X = e.tabConfirmsNewValue, J = e.values, Q = e.virtualization, Y = P(e, [ "allowNewValues", "animateLoading", "append", "children", "controlledFilter", "defaultPlacement", "defaultValues", "describedBy", "disabled", "elementRef", "error", "filter", "footerMessage", "inline", "inputId", "inputRef", "isLoadingOptions", "labelledBy", "loadingMessage", "menuStyle", "name", "noOptionsMessage", "onChange", "onClose", "onFilterChange", "onOpen", "onScroll", "onScrollBottom", "placeholder", "prepend", "repositionMode", "selectAllAppearance", "showSelectedValuesFirst", "tabConfirmsNewValue", "values", "virtualization" ]);
         // @docs-props-type CompactPropsBase
                 C({
             componentName: "Multiselect",
@@ -336,11 +336,11 @@
             isLoadingOptions: S,
             labelledBy: k,
             loadingMessage: j,
-            menuStyle: R,
-            name: E,
-            noOptionsMessage: I,
-            onChange: A,
-            onClose: q,
+            menuStyle: B,
+            name: R,
+            noOptionsMessage: F,
+            onChange: q,
+            onClose: A,
             onFilterChange: D,
             onOpen: L,
             onScroll: T,
@@ -356,107 +356,208 @@
             multiple: true
         }));
     }
-    B.propTypes = j;
-    B.Option = h;
-    B.Divider = u.Divider;
-    B.Heading = u.Heading;
-    /* harmony default export */    const R = B;
+    x.propTypes = j;
+    x.Option = h;
+    x.Divider = u.Divider;
+    x.Heading = u.Heading;
+    /* harmony default export */    const B = x;
     // CONCATENATED MODULE: external "lodash/defer"
-    const E = require("lodash/defer");
-    var F =  e.n(E);
+    const R = require("lodash/defer");
+    var I =  e.n(R);
     // CONCATENATED MODULE: external "lodash/get"
-    const I = require("lodash/get");
-    var A =  e.n(I);
+    const F = require("lodash/get");
+    var q =  e.n(F);
     // CONCATENATED MODULE: external "lodash/isString"
-    const q = require("lodash/isString");
-    var D =  e.n(q);
+    const A = require("lodash/isString");
+    var D =  e.n(A);
     // CONCATENATED MODULE: external "lodash/keys"
     const L = require("lodash/keys");
     var T =  e.n(L);
-    // CONCATENATED MODULE: external "lodash/last"
-    const _ = require("lodash/last");
-    var H =  e.n(_);
     // CONCATENATED MODULE: external "lodash/memoize"
-    const $ = require("lodash/memoize");
-    var z =  e.n($);
+    const _ = require("lodash/memoize");
+    var H =  e.n(_);
     // CONCATENATED MODULE: external "lodash/omit"
-    const K = require("lodash/omit");
-    var W =  e.n(K);
+    const $ = require("lodash/omit");
+    var z =  e.n($);
     // CONCATENATED MODULE: external "lodash/pickBy"
-    const U = require("lodash/pickBy");
-    var G =  e.n(U);
+    const K = require("lodash/pickBy");
+    var W =  e.n(K);
     // CONCATENATED MODULE: external "lodash/without"
-    const X = require("lodash/without");
-    var J =  e.n(X);
+    const U = require("lodash/without");
+    var G =  e.n(U);
     // CONCATENATED MODULE: external "@splunk/react-ui/Popover"
-    const Q = require("@splunk/react-ui/Popover");
-    var Y =  e.n(Q);
+    const X = require("@splunk/react-ui/Popover");
+    var J =  e.n(X);
     // CONCATENATED MODULE: external "@splunk/react-ui/ResultsMenu"
-    const Z = require("@splunk/react-ui/ResultsMenu");
-    var ee =  e.n(Z);
+    const Q = require("@splunk/react-ui/ResultsMenu");
+    var Y =  e.n(Q);
     // CONCATENATED MODULE: external "@splunk/react-ui/ScreenReaderContent"
-    const ne = require("@splunk/react-ui/ScreenReaderContent");
-    var re =  e.n(ne);
+    const Z = require("@splunk/react-ui/ScreenReaderContent");
+    var ee =  e.n(Z);
     // CONCATENATED MODULE: external "@splunk/ui-utils/filter"
-    const te = require("@splunk/ui-utils/filter");
+    const ne = require("@splunk/ui-utils/filter");
     // CONCATENATED MODULE: external "@splunk/ui-utils/format"
-    const oe = require("@splunk/ui-utils/format");
+    const re = require("@splunk/ui-utils/format");
     // CONCATENATED MODULE: external "@splunk/ui-utils/id"
-    const ae = require("@splunk/ui-utils/id");
+    const te = require("@splunk/ui-utils/id");
     // CONCATENATED MODULE: external "@splunk/ui-utils/scroll"
-    const le = require("@splunk/ui-utils/scroll");
+    const oe = require("@splunk/ui-utils/scroll");
     // CONCATENATED MODULE: external "styled-components"
-    const ie = require("styled-components");
-    var ue =  e.n(ie);
+    const ae = require("styled-components");
+    var le =  e.n(ae);
     // CONCATENATED MODULE: external "@splunk/react-ui/Box"
-    const se = require("@splunk/react-ui/Box");
-    var ce =  e.n(se);
+    const ie = require("@splunk/react-ui/Box");
+    var ue =  e.n(ie);
     // CONCATENATED MODULE: external "@splunk/react-ui/Chip"
-    const de = require("@splunk/react-ui/Chip");
-    var fe =  e.n(de);
+    const se = require("@splunk/react-ui/Chip");
+    var ce =  e.n(se);
     // CONCATENATED MODULE: external "@splunk/themes"
-    const pe = require("@splunk/themes");
+    const de = require("@splunk/themes");
     // CONCATENATED MODULE: ./src/Multiselect/NormalStyles.ts
-    var ve = ue()(ce()).withConfig({
+    var fe = le()(ue()).withConfig({
         displayName: "NormalStyles__StyledBox",
         componentId: "sc-1uwwpco-0"
-    })([ "display:flex;align-items:center;flex-wrap:wrap;gap:", ";border-radius:", ";min-width:200px;min-height:", ";max-height:300px;overflow-y:auto;border:", " solid ", ";padding-inline:", ";background-color:", ";", " ", " ", " ", " ", " ", " ", " &[data-inline]{width:400px;}" ], pe.variables.spacingXSmall, pe.variables.borderRadius, pe.variables.inputHeight, pe.variables.inputBorderWidth, pe.variables.interactiveColorBorder, pe.variables.spacingXSmall, pe.variables.interactiveColorBackground, (function(e) {
+    })([ "display:flex;align-items:center;flex-wrap:wrap;gap:", ";border-radius:", ";min-width:200px;min-height:", ";max-height:300px;overflow-y:auto;border:", " solid ", ";padding-inline:", ";background-color:", ";", " ", " ", " ", " ", " ", " ", " &[data-inline]{width:400px;}" ], de.variables.spacingXSmall, de.variables.borderRadius, de.variables.inputHeight, de.variables.inputBorderWidth, de.variables.interactiveColorBorder, de.variables.spacingXSmall, de.variables.interactiveColorBackground, (function(e) {
         var n = e.$append;
-        return n && (0, ie.css)([ "border-start-end-radius:0;border-end-end-radius:0;border-inline-end:none;" ]);
+        return n && (0, ae.css)([ "border-start-end-radius:0;border-end-end-radius:0;border-inline-end:none;" ]);
     }), (function(e) {
         var n = e.$prepend;
-        return n && (0, ie.css)([ "border-start-start-radius:0;border-end-start-radius:0;" ]);
+        return n && (0, ae.css)([ "border-start-start-radius:0;border-end-start-radius:0;" ]);
     }), (function(e) {
         var n = e.$hasFocus;
-        return n && (0, ie.css)([ "box-shadow:", ";" ], pe.variables.focusShadow);
+        return n && (0, ae.css)([ "box-shadow:", ";" ], de.variables.focusShadow);
     }), (function(e) {
         var n = e.$error;
-        return n && (0, ie.css)([ "border-color:", ";&:hover:not([disabled]){border-color:", ";}" ], pe.variables.interactiveColorAccentError, pe.variables.interactiveColorAccentErrorStrong);
+        return n && (0, ae.css)([ "border-color:", ";&:hover:not([disabled]){border-color:", ";}" ], de.variables.interactiveColorAccentError, de.variables.interactiveColorAccentErrorStrong);
     }), (function(e) {
         var n = e.$disabled;
-        return n && (0, ie.css)([ "border-color:", ";background-color:", ";cursor:not-allowed;" ], pe.variables.interactiveColorBorderDisabled, pe.variables.interactiveColorBackgroundDisabled);
+        return n && (0, ae.css)([ "border-color:", ";background-color:", ";cursor:not-allowed;" ], de.variables.interactiveColorBorderDisabled, de.variables.interactiveColorBackgroundDisabled);
     }), (function(e) {
         var n = e.$disabled, r = e.$hasFocus;
-        return !n && !r && (0, ie.css)([ "&:hover{border-color:", ";}" ], pe.variables.interactiveColorBorderHover);
+        return !n && !r && (0, ae.css)([ "&:hover{border-color:", ";}" ], de.variables.interactiveColorBorderHover);
     }), (function(e) {
         var n = e.$popoverOpen;
-        return n && (0, ie.css)([ "position:relative;z-index:calc(", " - 2);" ], pe.variables.zindexFixedNavbar);
+        return n && (0, ae.css)([ "position:relative;z-index:calc(", " - 2);" ], de.variables.zindexFixedNavbar);
     }));
-    var be = ue().span.withConfig({
+    var pe = le().span.withConfig({
         displayName: "NormalStyles__StyledButtonsWrapper",
         componentId: "sc-1uwwpco-1"
     })([ "display:contents;" ]);
-    var me = ue().input.withConfig({
+    var ve = le().input.withConfig({
         displayName: "NormalStyles__StyledInput",
         componentId: "sc-1uwwpco-2"
-    })([ "", ";flex:1 0 auto;max-width:100%;" ], pe.mixins.reset("block"));
-    var ge = ue()(fe()).withConfig({
+    })([ "", ";flex:1 0 auto;max-width:100%;" ], de.mixins.reset("block"));
+    var be = le()(ce()).withConfig({
         displayName: "NormalStyles__StyledChip",
         componentId: "sc-1uwwpco-3"
     })([ "line-height:1.1429;height:auto;", ";&:not([disabled]):focus{box-shadow:", ";}" ], (0, 
-    pe.pick)({
-        compact: (0, ie.css)([ "padding-block:2px;" ])
-    }), pe.variables.focusShadowInset);
+    de.pick)({
+        compact: (0, ae.css)([ "padding-block:2px;" ])
+    }), de.variables.focusShadowInset);
+    // 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 me(e) {
+        var n = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : "dimmed";
+        if (e === "dimmed") {
+            return {
+                isDisabled: true,
+                disabledValue: "dimmed"
+            };
+        }
+        if (e === true) {
+            return {
+                isDisabled: true,
+                disabledValue: n
+            };
+        }
+        if (e === "disabled") {
+            return {
+                isDisabled: true,
+                disabledValue: "disabled"
+            };
+        }
+        if (e === false) {
+            return {
+                isDisabled: false,
+                disabledValue: undefined
+            };
+        }
+        return {
+            isDisabled: undefined,
+            disabledValue: undefined
+        };
+    }
+    // CONCATENATED MODULE: ./src/utils/ssrDocument.ts
+    /* eslint-disable @typescript-eslint/no-empty-function */
+    var ge = {
+        body: {
+            appendChild: function e() {
+                return [];
+            }
+        },
+        addEventListener: function e() {},
+        removeEventListener: function e() {},
+        activeElement: {
+            blur: function e() {},
+            nodeName: ""
+        },
+        querySelector: function e() {
+            return null;
+        },
+        querySelectorAll: function e() {
+            return [];
+        },
+        getElementById: function e() {
+            return null;
+        },
+        createEvent: function e() {
+            return {
+                initEvent: function e() {}
+            };
+        },
+        createElement: function e() {
+            return {
+                children: [],
+                childNodes: [],
+                style: {},
+                setAttribute: function e() {},
+                getElementsByTagName: function e() {
+                    return [];
+                }
+            };
+        },
+        createElementNS: function e() {
+            return {};
+        },
+        importNode: function e() {
+            return null;
+        },
+        location: {
+            hash: "",
+            host: "",
+            hostname: "",
+            href: "",
+            origin: "",
+            pathname: "",
+            protocol: "",
+            search: ""
+        }
+    };
+    function ye() {
+        var e = typeof document !== "undefined" ? document : ge;
+        return e;
+    }
+    var he = ye();
+    /* harmony default export */    const Oe = /* unused pure expression or super */ null && he;
     // CONCATENATED MODULE: ./src/utils/updateReactRef.ts
     /**
  * Updates a React ref. Callback refs and object refs (from `createRef` and `useRef`) are supported.
@@ -464,7 +565,7 @@
  * @param ref - The React callback or object ref. Can be `null` or `undefined`.
  * @param current - The new value of the ref.
  */
-    function ye(e, n) {
+    function we(e, n) {
         if (e) {
             if (typeof e === "function") {
                 e(n);
@@ -477,16 +578,16 @@
         }
     }
     // CONCATENATED MODULE: ./src/Multiselect/Normal.tsx
-    function he(e) {
+    function Se(e) {
         "@babel/helpers - typeof";
-        return he = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function(e) {
+        return Se = "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;
-        }, he(e);
+        }, Se(e);
     }
-    function Oe() {
-        return Oe = Object.assign ? Object.assign.bind() : function(e) {
+    function Ce() {
+        return Ce = Object.assign ? Object.assign.bind() : function(e) {
             for (var n = 1; n < arguments.length; n++) {
                 var r = arguments[n];
                 for (var t in r) {
@@ -494,27 +595,27 @@
                 }
             }
             return e;
-        }, Oe.apply(null, arguments);
+        }, Ce.apply(null, arguments);
     }
-    function we(e) {
-        return Me(e) || Ce(e) || je(e) || Se();
+    function Me(e) {
+        return je(e) || ke(e) || Ne(e) || Pe();
     }
-    function Se() {
+    function Pe() {
         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 Ce(e) {
+    function ke(e) {
         if ("undefined" != typeof Symbol && null != e[Symbol.iterator] || null != e["@@iterator"]) return Array.from(e);
     }
-    function Me(e) {
+    function je(e) {
         if (Array.isArray(e)) return xe(e);
     }
-    function Pe(e, n) {
-        return Ne(e) || Ve(e, n) || je(e, n) || ke();
+    function Ve(e, n) {
+        return Re(e) || Be(e, n) || Ne(e, n) || Ee();
     }
-    function ke() {
+    function Ee() {
         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 je(e, n) {
+    function Ne(e, n) {
         if (e) {
             if ("string" == typeof e) return xe(e, n);
             var r = {}.toString.call(e).slice(8, -1);
@@ -528,7 +629,7 @@
         }
         return t;
     }
-    function Ve(e, n) {
+    function Be(e, n) {
         var r = null == e ? null : "undefined" != typeof Symbol && e[Symbol.iterator] || e["@@iterator"];
         if (null != r) {
             var t, o, a, l, i = [], u = !0, s = !1;
@@ -550,12 +651,12 @@
             return i;
         }
     }
-    function Ne(e) {
+    function Re(e) {
         if (Array.isArray(e)) return e;
     }
-    function Be(e, n) {
+    function Ie(e, n) {
         if (null == e) return {};
-        var r, t, o = Re(e, n);
+        var r, t, o = Fe(e, n);
         if (Object.getOwnPropertySymbols) {
             var a = Object.getOwnPropertySymbols(e);
             for (t = 0; t < a.length; t++) {
@@ -564,7 +665,7 @@
         }
         return o;
     }
-    function Re(e, n) {
+    function Fe(e, n) {
         if (null == e) return {};
         var r = {};
         for (var t in e) {
@@ -575,7 +676,7 @@
         }
         return r;
     }
-    function Ee(e, n) {
+    function qe(e, n) {
         var r = Object.keys(e);
         if (Object.getOwnPropertySymbols) {
             var t = Object.getOwnPropertySymbols(e);
@@ -585,40 +686,40 @@
         }
         return r;
     }
-    function Fe(e) {
+    function Ae(e) {
         for (var n = 1; n < arguments.length; n++) {
             var r = null != arguments[n] ? arguments[n] : {};
-            n % 2 ? Ee(Object(r), !0).forEach((function(n) {
-                Ie(e, n, r[n]);
-            })) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(r)) : Ee(Object(r)).forEach((function(n) {
+            n % 2 ? qe(Object(r), !0).forEach((function(n) {
+                De(e, n, r[n]);
+            })) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(r)) : qe(Object(r)).forEach((function(n) {
                 Object.defineProperty(e, n, Object.getOwnPropertyDescriptor(r, n));
             }));
         }
         return e;
     }
-    function Ie(e, n, r) {
-        return (n = Ae(n)) in e ? Object.defineProperty(e, n, {
+    function De(e, n, r) {
+        return (n = Le(n)) in e ? Object.defineProperty(e, n, {
             value: r,
             enumerable: !0,
             configurable: !0,
             writable: !0
         }) : e[n] = r, e;
     }
-    function Ae(e) {
-        var n = qe(e, "string");
-        return "symbol" == he(n) ? n : n + "";
+    function Le(e) {
+        var n = Te(e, "string");
+        return "symbol" == Se(n) ? n : n + "";
     }
-    function qe(e, n) {
-        if ("object" != he(e) || !e) return e;
+    function Te(e, n) {
+        if ("object" != Se(e) || !e) return e;
         var r = e[Symbol.toPrimitive];
         if (void 0 !== r) {
             var t = r.call(e, n || "default");
-            if ("object" != he(t)) return t;
+            if ("object" != Se(t)) return t;
             throw new TypeError("@@toPrimitive must return a primitive value.");
         }
         return ("string" === n ? String : Number)(e);
     }
-    var De = {
+    var _e = {
         allowNewValues: i().bool,
         animateLoading: i().bool,
         append: i().bool,
@@ -627,7 +728,7 @@
         defaultPlacement: i().oneOf([ "above", "below", "vertical" ]),
         defaultValues: i().array,
         describedBy: i().string,
-        disabled: i().bool,
+        disabled: i().oneOfType([ i().bool, i().oneOf([ "dimmed", "disabled" ]) ]),
         elementRef: i().oneOfType([ i().func, i().object ]),
         error: i().bool,
         footerMessage: i().node,
@@ -654,29 +755,33 @@
         tabConfirmsNewValue: i().bool,
         values: i().array
     };
-    var Le = z()((function(e) {
+    var He = H()((function(e) {
         return {
             flexBasis: e,
             width: e
         };
     }));
     // export for testing purpose
-        var Te = z()((function(e) {
+        var $e = H()((function(e) {
         var n = e.anchorWidth, r = n === void 0 ? 0 : n, t = e.maxHeight, o = e.menuStyle;
-        return Fe({
+        return Ae({
             maxHeight: t,
             overflow: "auto",
             width: Math.max(r, 200)
         }, o || {});
     }));
     // TS: not typed controlled/uncontrolled, handled by Multiselect wrapper component
-        var _e = {};
-    var He = (0, d._)("No matches");
-    var $e = (0, d._)("Select...");
-    function ze(e) {
-        var n = e.allowNewValues, o = e.animateLoading, l = e.append, i = e.children, u = e.controlledFilter, s = e.defaultPlacement, f = s === void 0 ? "vertical" : s, p = e.defaultValues, v = e.describedBy, b = e.disabled, m = e.elementRef, g = e.error, y = e.footerMessage, O = e.inline, w = e.inputId, S = e.inputRef, C = e.isLoadingOptions, M = e.labelledBy, P = e.loadingMessage, k = e.menuStyle, j = k === void 0 ? _e : k, x = e.name, V = e.noOptionsMessage, N = V === void 0 ? He : V, B = e.onChange, R = e.onClose, E = e.onFilterChange, I = e.onScroll, q = e.onScrollBottom, L = e.onOpen, _ = e.placeholder, $ = _ === void 0 ? $e : _, z = e.prepend, K = e.required, U = e.repositionMode, X = e.tabConfirmsNewValue, Q = e.values, Z = Be(e, [ "allowNewValues", "animateLoading", "append", "children", "controlledFilter", "defaultPlacement", "defaultValues", "describedBy", "disabled", "elementRef", "error", "footerMessage", "inline", "inputId", "inputRef", "isLoadingOptions", "labelledBy", "loadingMessage", "menuStyle", "name", "noOptionsMessage", "onChange", "onClose", "onFilterChange", "onScroll", "onScrollBottom", "onOpen", "placeholder", "prepend", "required", "repositionMode", "tabConfirmsNewValue", "values" ]);
+        var ze = {};
+    var Ke = (0, d._)("No matches");
+    var We = (0, d._)("Select...");
+    var Ue = function e(n) {
+        var r = me(n, "disabled"), t = r.isDisabled;
+        return !!t;
+    };
+    function Ge(e) {
+        var n = e.allowNewValues, o = e.animateLoading, l = e.append, i = e.children, u = e.controlledFilter, s = e.defaultPlacement, f = s === void 0 ? "vertical" : s, p = e.defaultValues, v = e.describedBy, b = e.disabled, m = e.elementRef, g = e.error, y = e.footerMessage, O = e.inline, w = e.inputId, S = e.inputRef, C = e.isLoadingOptions, M = e.labelledBy, P = e.loadingMessage, k = e.menuStyle, j = k === void 0 ? ze : k, V = e.name, E = e.noOptionsMessage, N = E === void 0 ? Ke : E, x = e.onChange, B = e.onClose, R = e.onFilterChange, F = e.onScroll, A = e.onScrollBottom, L = e.onOpen, _ = e.placeholder, H = _ === void 0 ? We : _, $ = e.prepend, K = e.required, U = e.repositionMode, X = e.tabConfirmsNewValue, Q = e.values, Z = Ie(e, [ "allowNewValues", "animateLoading", "append", "children", "controlledFilter", "defaultPlacement", "defaultValues", "describedBy", "disabled", "elementRef", "error", "footerMessage", "inline", "inputId", "inputRef", "isLoadingOptions", "labelledBy", "loadingMessage", "menuStyle", "name", "noOptionsMessage", "onChange", "onClose", "onFilterChange", "onScroll", "onScrollBottom", "onOpen", "placeholder", "prepend", "required", "repositionMode", "tabConfirmsNewValue", "values" ]);
         // @docs-props-type NormalPropsBase
-                var ne = c()({
+                var ae = c()({
             componentName: "Multiselect",
             /* eslint-disable-next-line prefer-rest-params */
             componentProps: arguments[0],
@@ -685,219 +790,288 @@
             valuePropName: "values"
         });
         if (false) {}
-        var ie = (0, r.useState)(0), ue = Pe(ie, 2), se = ue[0], ce = ue[1];
-        var de = (0, r.useState)(null), fe = Pe(de, 2), pe = fe[0], he = fe[1];
-        var Se = (0, r.useState)(""), Ce = Pe(Se, 2), Me = Ce[0], ke = Ce[1];
-        var je = (0, r.useState)(false), xe = Pe(je, 2), Ve = xe[0], Ne = xe[1];
-        var Re = (0, r.useState)(false), Ee = Pe(Re, 2), Ie = Ee[0], Ae = Ee[1];
-        var qe = (0, r.useState)(p || []), De = Pe(qe, 2), ze = De[0], Ke = De[1];
-        var We = (0, r.useState)(""), Ue = Pe(We, 2), Ge = Ue[0], Xe = Ue[1];
-        var Je = ne && Q ? Q : ze;
-        var Qe = Je.slice(0);
-        var Ye = Je.indexOf(Me) >= 0;
-        var Ze = (0, r.useRef)(null);
-        var en = (0, r.useRef)(null);
-        var nn = (0, r.useRef)(undefined);
-        var rn = (0, r.useRef)(0);
-        var tn = (0, r.useState)((function() {
+        var le = (0, r.useState)(0), ie = Ve(le, 2), ue = ie[0], se = ie[1];
+        var ce = (0, r.useState)(null), de = Ve(ce, 2), ge = de[0], he = de[1];
+        var Oe = (0, r.useState)(""), Se = Ve(Oe, 2), Pe = Se[0], ke = Se[1];
+        var je = (0, r.useState)(false), Ee = Ve(je, 2), Ne = Ee[0], xe = Ee[1];
+        var Be = (0, r.useState)(false), Re = Ve(Be, 2), Fe = Re[0], qe = Re[1];
+        var De = (0, r.useState)(p || []), Le = Ve(De, 2), Te = Le[0], _e = Le[1];
+        var Ge = (0, r.useState)(""), Xe = Ve(Ge, 2), Je = Xe[0], Qe = Xe[1];
+        var Ye = ae && Q ? Q : Te;
+        var Ze = Ye.indexOf(Pe) >= 0;
+        var en = me(b, "disabled"), nn = en.isDisabled, rn = en.disabledValue;
+        var tn = (0, r.useMemo)((function() {
+            return r.Children.toArray(i);
+        }), [ i ]);
+        var on = (0, r.useMemo)((function() {
+            return tn.filter(r.isValidElement).filter((function(e) {
+                return e.type === h;
+            }));
+        }), [ tn ]);
+        var an = (0, r.useMemo)((function() {
+            var e = new Map;
+            on.forEach((function(n) {
+                e.set(n.props.value, n);
+            }));
+            return [ e ];
+        }), [ on ]), ln = Ve(an, 1), un = ln[0];
+        var sn = (0, r.useMemo)((function() {
+            var e = Ye.slice(0);
+            var n = new Set;
+            // Map Options to selected values
+                        if (Ye.length) {
+                on.forEach((function(r) {
+                    var t = Ye.indexOf(r.props.value);
+                    if (t !== -1) {
+                        e[t] = r;
+                        if (Ue(r.props.disabled)) {
+                            n.add(r.props.value);
+                        }
+                    }
+                }));
+            }
             return {
-                activeItemId: (0, ae.createDOMID)("active-item"),
-                popoverId: (0, ae.createDOMID)("popover")
+                selectedItems: e,
+                disabledSelectedItems: n
             };
-        })), on = Pe(tn, 1), an = on[0], ln = an.activeItemId, un = an.popoverId;
+        }), [ on, Ye ]), cn = sn.selectedItems, dn = sn.disabledSelectedItems;
+        var fn = (0, r.useRef)(null);
+        var pn = (0, r.useRef)(null);
+        var vn = (0, r.useRef)(undefined);
+        var bn = (0, r.useRef)(0);
+        var mn = (0, r.useState)((function() {
+            return {
+                activeItemId: (0, te.createDOMID)("active-item"),
+                popoverId: (0, te.createDOMID)("popover")
+            };
+        })), gn = Ve(mn, 1), yn = gn[0], hn = yn.activeItemId, On = yn.popoverId;
         (0, r.useEffect)((function() {
-            if (ne) {
+            if (ae) {
                 ke("");
-                ce(0);
+                se(0);
             }
-        }), [ Q, ne ]);
+        }), [ Q, ae ]);
         // Tracks the prev activeIndex so its known if scrolling is needed in handleActiveOptionMount - can't use usePrevious b/c the value needs wiped on Menu close
                 (0, r.useEffect)((function() {
-            en.current = se;
-        }), [ se ]);
-        var sn = (0, r.useCallback)((function(e) {
+            pn.current = ue;
+        }), [ ue ]);
+        var wn = (0, r.useCallback)((function(e) {
             var n = e.resetFilterKeyword;
-            if (!Ie) {
+            if (!Fe) {
                 ke((function(e) {
                     return n ? "" : e;
                 }));
-                Ne(true);
-                Ae(true);
+                xe(true);
+                qe(true);
                 L === null || L === void 0 ? void 0 : L();
             }
-        }), [ Ie, L ]);
-        var cn = (0, r.useCallback)((function() {
-            if (Ve) {
-                sn({
+        }), [ Fe, L ]);
+        var Sn = (0, r.useCallback)((function() {
+            if (Ne) {
+                wn({
                     resetFilterKeyword: false
                 });
             } else {
                 var e;
-                (e = Ze.current) === null || e === void 0 ? void 0 : e.focus();
+                (e = fn.current) === null || e === void 0 ? void 0 : e.focus();
             }
-        }), [ Ve, sn ]);
-        var dn = (0, r.useCallback)((function(e, n) {
-            if (!Ie) {
+        }), [ Ne, wn ]);
+        var Cn = (0, r.useCallback)((function(e, n) {
+            if (!Fe || nn) {
                 return;
             }
-            var r = (Je || []).concat([ n ]);
-            if (!ne) {
-                Ke(r);
-                ce(0);
-                Ae(true);
+            var r = (Ye || []).concat([ n ]);
+            if (!ae) {
+                _e(r);
+                se(0);
+                qe(true);
                 ke("");
             }
-            B === null || B === void 0 ? void 0 : B(e, {
+            x === null || x === void 0 ? void 0 : x(e, {
                 values: r,
-                name: x
+                name: V
             });
-        }), [ Ie, Je, ne, B, x ]);
-        var fn = (0, r.useCallback)((function(e, n) {
-            var r = J()(Je, n);
-            if (!ne) {
-                Ke(r);
+        }), [ Fe, nn, Ye, ae, x, V ]);
+        var Mn = (0, r.useCallback)((function(e, n) {
+            var r = G()(Ye, n);
+            if (!ae) {
+                _e(r);
             }
-            B === null || B === void 0 ? void 0 : B(e, {
+            x === null || x === void 0 ? void 0 : x(e, {
                 values: r,
-                name: x
+                name: V
             });
-        }), [ Je, ne, x, B ]);
-        var pn = (0, r.useCallback)((function(e) {
-            if (Ie && !C) {
-                q === null || q === void 0 ? void 0 : q(e);
-                Xe("".concat(rn.current, " options, loading more options"));
+        }), [ Ye, ae, V, x ]);
+        var Pn = (0, r.useCallback)((function(e) {
+            if (Fe && !C) {
+                A === null || A === void 0 ? void 0 : A(e);
+                Qe("".concat(bn.current, " options, loading more options"));
             }
-        }), [ Ie, C, q ]);
-        var vn = (0, r.useCallback)((function(e, n) {
+        }), [ Fe, C, A ]);
+        var kn = (0, r.useCallback)((function(e, n) {
             var r = n.value;
-            F()((function() {
-                return fn(e, r);
+            I()((function() {
+                return Mn(e, r);
             }));
-        }), [ fn ]);
-        var bn = (0, r.useCallback)((function(e) {
-            if (Me !== "") {
-                E === null || E === void 0 ? void 0 : E(e, {
+        }), [ Mn ]);
+        var jn = (0, r.useCallback)((function(e) {
+            xe(true);
+            if (nn) {
+                return;
+            }
+            if (Pe !== "") {
+                R === null || R === void 0 ? void 0 : R(e, {
                     keyword: ""
                 });
             }
-            sn({
+            wn({
                 resetFilterKeyword: true
             });
-        }), [ Me, E, sn ]);
-        var mn = (0, r.useCallback)((function(e) {
+        }), [ nn, Pe, R, wn ]);
+        var Vn = (0, r.useCallback)((function(e) {
             var n;
+            var r = bn.current;
             var t = e.key;
-            if (t === "Tab" && Ie) {
-                if (X && nn.current !== undefined && rn.current <= 1) {
-                    var o;
+            if (nn) {
+                return;
+            }
+            var o = vn.current === undefined ? undefined : un.get(vn.current);
+            var a = Ue(o === null || o === void 0 ? void 0 : o.props.disabled);
+            if (t === "Tab" && Fe) {
+                if (!a && X && vn.current !== undefined && bn.current <= 1) {
+                    var l;
                     e.preventDefault();
-                    dn(e, nn.current);
-                    (o = Ze.current) === null || o === void 0 ? void 0 : o.focus();
+                    Cn(e, vn.current);
+                    (l = fn.current) === null || l === void 0 ? void 0 : l.focus();
                 } else {
-                    Ae(false);
+                    qe(false);
                 }
             }
             if (e.shiftKey || e.metaKey || e.ctrlKey) {
                 return;
             }
-            if (t === "End" && Ie) {
+            if (t === "End" && Fe) {
                 e.preventDefault();
-                ce(rn.current - 1);
+                if (r > 0) {
+                    se(r - 1);
+                }
             }
-            if (t === "Home" && Ie) {
+            if (t === "Home" && Fe) {
                 e.preventDefault();
-                ce(0);
+                se(0);
             }
             if (t === "ArrowDown") {
                 e.preventDefault();
-                if (Ie) {
-                    ce((function(e) {
-                        return Math.min(e + 1, rn.current - 1);
-                    }));
+                if (Fe) {
+                    if (r > 0) {
+                        se((function(e) {
+                            return Math.min(e + 1, r - 1);
+                        }));
+                    }
                 } else {
-                    ce(0);
-                    Ae(true);
+                    se(0);
+                    qe(true);
                 }
-                if (i && q) {
-                    var a = r.Children.toArray(i).length - (2 + ((Je === null || Je === void 0 ? void 0 : Je.length) || 0));
-                    if (se === a) {
-                        pn(e);
+                if (i && A) {
+                    var u = tn.length - (2 + ((Ye === null || Ye === void 0 ? void 0 : Ye.length) || 0));
+                    if (ue === u) {
+                        Pn(e);
                     }
                 }
             }
             if (t === "ArrowUp") {
                 e.preventDefault();
-                if (Ie) {
-                    ce((function(e) {
+                if (Fe) {
+                    se((function(e) {
                         return Math.max(e - 1, 0);
                     }));
                 } else {
-                    ce(0);
-                    Ae(true);
+                    se(0);
+                    qe(true);
                 }
             }
-            if (t === "Enter" && nn.current !== undefined && Ie) {
-                dn(e, nn.current);
+            if (t === "Enter" && !a && vn.current !== undefined && Fe) {
+                e.preventDefault();
+                Cn(e, vn.current);
             }
-            if (t === "Backspace" && ((n = Ze.current) === null || n === void 0 ? void 0 : n.value) === "" && Je.length) {
-                fn(e, H()(Je));
+            if (t === "Backspace" && ((n = fn.current) === null || n === void 0 ? void 0 : n.value) === "" && Ye.length) {
+                var s;
+                for (var c = Ye.length - 1; c >= 0; c -= 1) {
+                    var d = Ye[c];
+                    if (!dn.has(d)) {
+                        s = d;
+                        break;
+                    }
+                }
+                if (s !== undefined) {
+                    Mn(e, s);
+                }
             }
-        }), [ Ie, Je, X, dn, i, q, se, pn, fn ]);
-        var gn = (0, r.useCallback)((function(e) {
+        }), [ nn, Fe, Ye, X, Cn, i, un, tn, A, ue, Pn, dn, Mn ]);
+        var En = (0, r.useCallback)((function(e) {
             ke(e.target.value);
-            Ae(true);
-            ce(0);
-            E === null || E === void 0 ? void 0 : E(e, {
+            qe(true);
+            se(0);
+            R === null || R === void 0 ? void 0 : R(e, {
                 keyword: e.target.value
             });
-        }), [ E ]);
-        var yn = (0, r.useCallback)((function(e, n) {
+        }), [ R ]);
+        var Nn = (0, r.useCallback)((function(e, n) {
             var r;
             var t = n.value;
             e.stopPropagation();
-            dn(e, t);
-            (r = Ze.current) === null || r === void 0 ? void 0 : r.focus();
-        }), [ dn ]);
-        var hn = (0, r.useCallback)((function(e) {
-            var n = document.getElementById(un);
-            var r = e.relatedTarget || document.activeElement;
+            Cn(e, t);
+            (r = fn.current) === null || r === void 0 ? void 0 : r.focus();
+        }), [ Cn ]);
+        // Close when component becomes disabled/dimmed during an open state to prevent further selection
+                (0, r.useEffect)((function() {
+            if (nn && Fe) {
+                qe(false);
+                pn.current = null;
+                B === null || B === void 0 ? void 0 : B();
+            }
+        }), [ nn, Fe, B ]);
+        var xn = (0, r.useCallback)((function(e) {
+            var n = ye();
+            var r = n.getElementById(On);
+            var t = e.relatedTarget || n.activeElement;
  // IE11 doesn't support relatedTarget but sets activeElement
-                        var t = n && r && n.contains(r);
+                        var o = r && t && r.contains(t);
  // TS: target as Node is an unsafe assumption
-                        ke(t ? Me : "");
-            Ne(false);
-            if (!t) {
-                E === null || E === void 0 ? void 0 : E(e, {
+                        ke(o ? Pe : "");
+            xe(false);
+            if (!nn && !o) {
+                R === null || R === void 0 ? void 0 : R(e, {
                     keyword: ""
                 });
             }
-        }), [ Me, E, un ]);
-        var On = (0, r.useCallback)((function(e) {
+        }), [ nn, Pe, R, On ]);
+        var Bn = (0, r.useCallback)((function(e) {
             var n = e.reason, r = e.event;
-            if (n === "escapeKey" || n === "offScreen" || n === "clickAway" && r !== undefined && !(pe === null || pe === void 0 ? void 0 : pe.contains(r.target))) {
-                Ae(false);
-                en.current = null;
-                R === null || R === void 0 ? void 0 : R();
+            if (n === "escapeKey" || n === "offScreen" || n === "clickAway" && r !== undefined && !(ge === null || ge === void 0 ? void 0 : ge.contains(r.target))) {
+                qe(false);
+                pn.current = null;
+                B === null || B === void 0 ? void 0 : B();
             }
             if (n === "escapeKey") {
                 var t;
-                (t = Ze.current) === null || t === void 0 ? void 0 : t.focus();
+                (t = fn.current) === null || t === void 0 ? void 0 : t.focus();
             }
-        }), [ pe, R ]);
-        var wn = (0, r.useCallback)((function(e) {
+        }), [ ge, B ]);
+        var Rn = (0, r.useCallback)((function(e) {
             he(e);
-            ye(m, e);
+            we(m, e);
         }), [ m ]);
-        var Sn = (0, r.useCallback)((function(e) {
-            Ze.current = e;
-            ye(S, e);
+        var In = (0, r.useCallback)((function(e) {
+            fn.current = e;
+            we(S, e);
         }), [ S ]);
-        var Cn = (0, r.useCallback)((function(e) {
-            if (en.current !== se) {
-                (0, le.scrollIntoViewIfNeeded)(e);
+        var Fn = (0, r.useCallback)((function(e) {
+            if (pn.current !== ue) {
+                (0, oe.scrollIntoViewIfNeeded)(e);
             }
-        }), [ se ]);
-        var Mn = (0, r.useCallback)((function(e) {
+        }), [ ue ]);
+        var qn = (0, r.useCallback)((function(e) {
             // selectedOptions may contain items or unmatched values at this point
             return e.map((function(e) {
                 var n = e;
@@ -906,13 +1080,13 @@
                 if (r != null) {
                     var o = r.children, a = r.icon, l = r.label, i = r.selectedAppearance, u = r.selectedBackgroundColor, s = r.selectedForegroundColor, c = r.value;
                     
-                    return t().createElement(ge, {
+                    return t().createElement(be, {
                         "aria-selected": true,
-                        disabled: b,
+                        disabled: !!nn || Ue(r.disabled),
                         icon: a,
                         key: c.toString(),
                         "data-test": "selected-option",
-                        onRequestRemove: vn,
+                        onRequestRemove: kn,
                         role: "option",
                         value: c,
                         appearance: i,
@@ -921,18 +1095,18 @@
                     }, o || l);
                 }
                 
-                return t().createElement(ge, {
+                return t().createElement(be, {
                     "aria-selected": true,
-                    disabled: b,
-                    key: (0, ae.createGUID)(),
+                    disabled: nn,
+                    key: (0, te.createGUID)(),
                     "data-test": "selected-option",
-                    onRequestRemove: vn,
+                    onRequestRemove: kn,
                     role: "option",
                     value: n
                 }, n);
             }));
-        }), [ b, vn ]);
-        var Pn = function e(n) {
+        }), [ nn, kn ]);
+        var An = function e(n) {
             return n.map((function(e) {
                 var n = e;
  // TS: faking props here
@@ -941,39 +1115,26 @@
                     
                     return t().createElement("span", {
                         key: r.value.toString()
-                    }, r.children || r.label, (0, oe.sprintf)((0, d._)(" selected")));
+                    }, r.children || r.label, (0, re.sprintf)((0, d._)(" selected")));
                 }
                 
                 return t().createElement("span", {
-                    key: (0, ae.createGUID)()
-                },  t().createElement(t().Fragment, null, n, (0, oe.sprintf)((0, d._)(" selected"))));
+                    key: (0, te.createGUID)()
+                },  t().createElement(t().Fragment, null, n, (0, re.sprintf)((0, d._)(" selected"))));
             }));
         };
-        // Map Options to selected values
-                if (Je && Je.length) {
-            r.Children.toArray(i).filter(r.isValidElement).filter((function(e) {
-                return e.type === h;
-            })).forEach((function(e) {
-                if (e.type === h) {
-                    var n = Je.indexOf(e.props.value);
-                    if (n !== -1) {
-                        Qe[n] = e;
-                    }
-                }
-            }));
-        }
         // Filter the items
-                var kn = (0, te.stringToKeywords)(Me);
-        var jn = u ? r.Children.toArray(i) : r.Children.toArray(i).filter((function(e) {
-            if (A()(e, [ "props", "label" ], false)) {
-                return (0, te.testPhrase)(e.props.label, kn);
+                var Dn = (0, ne.stringToKeywords)(Pe);
+        var Ln = u ? tn : tn.filter((function(e) {
+            if (q()(e, [ "props", "label" ], false)) {
+                return (0, ne.testPhrase)(e.props.label, Dn);
             }
             return true;
  // Keep all headers and non-interactive options
                 }));
-        rn.current = 0;
-        nn.current = undefined;
-        var xn = r.Children.map(jn, (function(e, n) {
+        bn.current = 0;
+        vn.current = undefined;
+        var Tn = r.Children.map(Ln, (function(e, n) {
             var t = e.props;
             if (!t || !a()(t, "value")) {
                 // ignore Headings and Dividers
@@ -982,22 +1143,22 @@
             var o = e;
             var l = o.props, i = l.children, s = l.label, c = l.matchRanges, d = l.value;
  // find out if the search string exactly matches a value
-                        if (d === Me) {
-                Ye = true;
+                        if (d === Pe) {
+                Ze = true;
             }
             // remove items that are already selected
-                        var f = Je.indexOf(d);
+                        var f = Ye.indexOf(d);
             if (f >= 0) {
                 return null;
             }
             // highlight matched text
                         var p = i === undefined || D()(i);
-            var v = p && !u && !c && kn && (0, te.keywordLocations)(s, kn);
+            var v = p && !u && !c && Dn && (0, ne.keywordLocations)(s, Dn);
             // clone item
                         var b =  (0, r.cloneElement)(o, {
                 // eslint-disable-next-line react/no-array-index-key
                 key: n,
-                onClick: yn,
+                onClick: Nn,
                 matchRanges: p && (c || v) || undefined
             });
             return b;
@@ -1005,155 +1166,160 @@
             return e !== null;
         })) || [];
         // Add the option to add the new value
-                if (n && !Ye && Me) {
-            xn.unshift( t().createElement(h, {
-                label: "".concat(Me),
+                if (n && !Ze && Pe) {
+            Tn.unshift( t().createElement(h, {
+                label: "".concat(Pe),
                 description: (0, d._)("(New value)"),
                 descriptionPosition: "right",
-                value: Me,
+                value: Pe,
                 key: "newValue",
-                onClick: yn
+                onClick: Nn
             }));
         }
         // highlight the selected Item
-                var Vn = r.Children.map(xn, (function(e) {
+                var _n = r.Children.map(Tn, (function(e) {
             var n = e.props;
             if (!n || !a()(n, "value")) {
                 // ignore Headings and Dividers
                 return e;
             }
             var t = e;
-            var o = t.props, l = o.disabled, i = o.value;
-            var u = rn.current === se;
-            rn.current += 1;
-            if (!u) {
+            var o = t.props.value;
+            var l = me(t.props.disabled, "disabled"), i = l.disabledValue;
+            if (i === "disabled") {
                 return t;
             }
-            if (!l) {
-                nn.current = i;
+            var u = bn.current === ue;
+            bn.current += 1;
+            if (!u) {
+                return t;
             }
+            vn.current = o;
             var s =  (0, r.cloneElement)(t, {
                 active: u,
-                id: ln,
+                id: hn,
                 elementRef: function e(n) {
-                    Cn(n);
-                    ye(t.props.elementRef, n);
+                    Fn(n);
+                    we(t.props.elementRef, n);
                 }
             });
             return s;
         }));
-        var Nn = function e(n) {
+        var Hn = function e(n) {
             var r = n.anchorWidth, a = n.maxHeight, l = n.placement;
-            var i = Te({
+            var i = $e({
                 anchorWidth: r,
                 maxHeight: a,
                 menuStyle: j
             });
             
-            return t().createElement(ee(), {
+            return t().createElement(Y(), {
                 focusMode: "never",
                 placement: l !== null && l !== void 0 ? l : undefined,
                 isLoading: C,
-                onScrollBottom: q ? pn : undefined,
+                onScrollBottom: A ? Pn : undefined,
                 noOptionsMessage: N,
                 footerMessage: y,
                 animateLoading: o,
                 loadingMessage: P,
-                onScroll: I,
+                onScroll: F,
                 style: i
-            }, Vn);
+            }, _n);
         };
-        var Bn = Le("".concat(Me.length * .8, "em"));
-        var Rn = Fe(Fe({}, G()(Z, (function(e, n) {
+        var $n = He("".concat(Pe.length * .8, "em"));
+        var zn = Ae(Ae({}, W()(Z, (function(e, n) {
             return n === "role" || n.indexOf("aria-") === 0;
         }))), {}, {
             "aria-describedby": v,
             "aria-labelledby": M,
             "aria-invalid": g || undefined
         });
-        var En = Fe({}, G()(Z, (function(e, n) {
+        var Kn = Ae({}, W()(Z, (function(e, n) {
             return n === "aria-label" || n === "aria-describedby";
         })));
         
-        return t().createElement(t().Fragment, null,  t().createElement(ve, Oe({
+        return t().createElement(t().Fragment, null,  t().createElement(fe, Ce({
             key: "control",
             $append: l,
-            "data-test-values": JSON.stringify(Je),
-            "data-test-disabled": b ? "disabled" : undefined,
+            "data-test-values": JSON.stringify(Ye),
+            "data-test-disabled": rn,
             inline: O,
-            $hasFocus: Ve
-        }, W().apply(void 0, [ Z ].concat(we(T()(Rn)))), {
-            onClick: b ? undefined : cn,
-            $disabled: b,
+            $hasFocus: Ne
+        }, z().apply(void 0, [ Z ].concat(Me(T()(zn)))), {
+            onClick: nn ? undefined : Sn,
+            $disabled: nn,
             $error: g,
-            "data-test-popover-id": un,
-            $popoverOpen: Ie,
-            $prepend: z,
+            "data-test-popover-id": On,
+            $popoverOpen: Fe,
+            $prepend: $,
             flex: true,
-            elementRef: wn,
+            ref: Rn,
             role: "group",
-            "aria-disabled": b || undefined,
+            "aria-disabled": nn || undefined,
             "aria-labelledby": M
-        }, En),  t().createElement(be, {
+        }, Kn),  t().createElement(pe, {
             role: "listbox",
             "aria-invalid": g,
             "aria-multiselectable": "true"
-        }, Mn(Qe)), !b &&  t().createElement(me, Oe({
+        }, qn(cn)),  t().createElement(ve, Ce({
             role: "combobox",
             "data-test": "textbox",
             id: w,
-            ref: Sn,
-            onBlur: hn,
-            onFocus: bn,
-            onChange: gn,
-            onKeyDown: mn,
-            value: Me,
+            ref: In,
+            onBlur: xn,
+            onFocus: jn,
+            onChange: nn ? undefined : En,
+            onKeyDown: nn ? undefined : Vn,
+            value: Pe,
             autoCapitalize: "off",
             autoComplete: "off",
             autoCorrect: "off",
             spellCheck: false,
-            style: Bn,
-            placeholder: Je.length ? "" : $,
+            readOnly: !!nn,
+            style: $n,
+            placeholder: Ye.length ? "" : H,
             required: K,
-            "aria-activedescendant": Ie && rn.current > 0 ? ln : undefined,
+            disabled: rn === "disabled",
+            "aria-disabled": rn === "dimmed" || undefined,
+            "aria-activedescendant": Fe && bn.current > 0 ? hn : undefined,
             "aria-autocomplete": "list",
-            "aria-controls": Ie ? un : undefined,
-            "aria-owns": Ie ? un : undefined,
-            "aria-expanded": Ie,
+            "aria-controls": Fe ? On : undefined,
+            "aria-owns": Fe ? On : undefined,
+            "aria-expanded": Fe,
             "aria-haspopup": true
-        }, Rn)),  t().createElement(Y(), {
-            open: Ie && !!pe,
+        }, zn)),  t().createElement(J(), {
+            open: Fe && !!ge,
             autoCloseWhenOffScreen: true,
-            anchor: pe,
-            onRequestClose: On,
+            anchor: ge,
+            onRequestClose: Bn,
             canCoverAnchor: false,
             defaultPlacement: f,
             repositionMode: U,
-            id: un
-        }, Nn)),  t().createElement(re(), {
+            id: On
+        }, Hn)),  t().createElement(ee(), {
             role: "status",
             "aria-relevant": "text"
-        }, Ge),  t().createElement(re(), {
+        }, Je),  t().createElement(ee(), {
             role: "alert",
             "aria-relevant": "additions"
-        }, Pn(Qe)));
+        }, An(cn)));
     }
-    ze.propTypes = De;
-    ze.Option = h;
-    ze.Divider = u.Divider;
-    ze.Heading = u.Heading;
-    /* harmony default export */    const Ke = ze;
+    Ge.propTypes = _e;
+    Ge.Option = h;
+    Ge.Divider = u.Divider;
+    Ge.Heading = u.Heading;
+    /* harmony default export */    const Xe = Ge;
     // CONCATENATED MODULE: ./src/Multiselect/Multiselect.tsx
-    function We(e) {
+    function Je(e) {
         "@babel/helpers - typeof";
-        return We = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function(e) {
+        return Je = "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;
-        }, We(e);
+        }, Je(e);
     }
-    function Ue() {
-        return Ue = Object.assign ? Object.assign.bind() : function(e) {
+    function Qe() {
+        return Qe = Object.assign ? Object.assign.bind() : function(e) {
             for (var n = 1; n < arguments.length; n++) {
                 var r = arguments[n];
                 for (var t in r) {
@@ -1161,9 +1327,9 @@
                 }
             }
             return e;
-        }, Ue.apply(null, arguments);
+        }, Qe.apply(null, arguments);
     }
-    function Ge(e, n) {
+    function Ye(e, n) {
         var r = Object.keys(e);
         if (Object.getOwnPropertySymbols) {
             var t = Object.getOwnPropertySymbols(e);
@@ -1173,42 +1339,42 @@
         }
         return r;
     }
-    function Xe(e) {
+    function Ze(e) {
         for (var n = 1; n < arguments.length; n++) {
             var r = null != arguments[n] ? arguments[n] : {};
-            n % 2 ? Ge(Object(r), !0).forEach((function(n) {
-                Je(e, n, r[n]);
-            })) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(r)) : Ge(Object(r)).forEach((function(n) {
+            n % 2 ? Ye(Object(r), !0).forEach((function(n) {
+                en(e, n, r[n]);
+            })) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(r)) : Ye(Object(r)).forEach((function(n) {
                 Object.defineProperty(e, n, Object.getOwnPropertyDescriptor(r, n));
             }));
         }
         return e;
     }
-    function Je(e, n, r) {
-        return (n = Qe(n)) in e ? Object.defineProperty(e, n, {
+    function en(e, n, r) {
+        return (n = nn(n)) in e ? Object.defineProperty(e, n, {
             value: r,
             enumerable: !0,
             configurable: !0,
             writable: !0
         }) : e[n] = r, e;
     }
-    function Qe(e) {
-        var n = Ye(e, "string");
-        return "symbol" == We(n) ? n : n + "";
+    function nn(e) {
+        var n = rn(e, "string");
+        return "symbol" == Je(n) ? n : n + "";
     }
-    function Ye(e, n) {
-        if ("object" != We(e) || !e) return e;
+    function rn(e, n) {
+        if ("object" != Je(e) || !e) return e;
         var r = e[Symbol.toPrimitive];
         if (void 0 !== r) {
             var t = r.call(e, n || "default");
-            if ("object" != We(t)) return t;
+            if ("object" != Je(t)) return t;
             throw new TypeError("@@toPrimitive must return a primitive value.");
         }
         return ("string" === n ? String : Number)(e);
     }
-    function Ze(e, n) {
+    function tn(e, n) {
         if (null == e) return {};
-        var r, t, o = en(e, n);
+        var r, t, o = on(e, n);
         if (Object.getOwnPropertySymbols) {
             var a = Object.getOwnPropertySymbols(e);
             for (t = 0; t < a.length; t++) {
@@ -1217,7 +1383,7 @@
         }
         return o;
     }
-    function en(e, n) {
+    function on(e, n) {
         if (null == e) return {};
         var r = {};
         for (var t in e) {
@@ -1230,7 +1396,7 @@
     }
     /** @public */
     /** @public */
-    /** @public */    var nn = {
+    /** @public */    var an = {
         allowNewValues: i().bool,
         animateLoading: i().bool,
         append: i().bool,
@@ -1240,7 +1406,7 @@
         defaultPlacement: i().oneOf([ "above", "below", "vertical" ]),
         defaultValues: i().array,
         describedBy: i().string,
-        disabled: i().bool,
+        disabled: i().oneOfType([ i().bool, i().oneOf([ "dimmed", "disabled" ]) ]),
         elementRef: i().oneOfType([ i().func, i().object ]),
         error: i().bool,
         filter: i().oneOf([ false, true, "controlled" ]),
@@ -1272,10 +1438,10 @@
         /** @private */
         virtualization: i().number
     };
-    var rn = (0, d._)("No matches");
-    var tn = (0, d._)("Select...");
-    function on(e) {
-        var n = e.allowNewValues, o = e.animateLoading, a = e.append, l = e.compact, i = e.children, u = e.controlledFilter, s = e.defaultPlacement, d = s === void 0 ? "vertical" : s, f = e.defaultValues, p = e.describedBy, v = e.disabled, b = e.elementRef, m = e.error, g = e.filter, y = e.footerMessage, h = e.inline, O = e.inputId, w = e.inputRef, S = e.isLoadingOptions, C = e.labelledBy, M = e.loadingMessage, P = e.menuStyle, k = e.name, j = e.noOptionsMessage, x = j === void 0 ? rn : j, V = e.onChange, N = e.onClose, B = e.onFilterChange, E = e.onOpen, F = e.onScroll, I = e.onScrollBottom, A = e.placeholder, q = A === void 0 ? tn : A, D = e.prepend, L = e.repositionMode, T = L === void 0 ? "flip" : L, _ = e.selectAllAppearance, H = e.showSelectedValuesFirst, $ = e.tabConfirmsNewValue, z = e.values, K = e.virtualization, W = Ze(e, [ "allowNewValues", "animateLoading", "append", "compact", "children", "controlledFilter", "defaultPlacement", "defaultValues", "describedBy", "disabled", "elementRef", "error", "filter", "footerMessage", "inline", "inputId", "inputRef", "isLoadingOptions", "labelledBy", "loadingMessage", "menuStyle", "name", "noOptionsMessage", "onChange", "onClose", "onFilterChange", "onOpen", "onScroll", "onScrollBottom", "placeholder", "prepend", "repositionMode", "selectAllAppearance", "showSelectedValuesFirst", "tabConfirmsNewValue", "values", "virtualization" ]);
+    var ln = (0, d._)("No matches");
+    var un = (0, d._)("Select...");
+    function sn(e) {
+        var n = e.allowNewValues, o = e.animateLoading, a = e.append, l = e.compact, i = e.children, u = e.controlledFilter, s = e.defaultPlacement, d = s === void 0 ? "vertical" : s, f = e.defaultValues, p = e.describedBy, v = e.disabled, b = e.elementRef, m = e.error, g = e.filter, y = e.footerMessage, h = e.inline, O = e.inputId, w = e.inputRef, S = e.isLoadingOptions, C = e.labelledBy, M = e.loadingMessage, P = e.menuStyle, k = e.name, j = e.noOptionsMessage, V = j === void 0 ? ln : j, E = e.onChange, N = e.onClose, x = e.onFilterChange, R = e.onOpen, I = e.onScroll, F = e.onScrollBottom, q = e.placeholder, A = q === void 0 ? un : q, D = e.prepend, L = e.repositionMode, T = L === void 0 ? "flip" : L, _ = e.selectAllAppearance, H = e.showSelectedValuesFirst, $ = e.tabConfirmsNewValue, z = e.values, K = e.virtualization, W = tn(e, [ "allowNewValues", "animateLoading", "append", "compact", "children", "controlledFilter", "defaultPlacement", "defaultValues", "describedBy", "disabled", "elementRef", "error", "filter", "footerMessage", "inline", "inputId", "inputRef", "isLoadingOptions", "labelledBy", "loadingMessage", "menuStyle", "name", "noOptionsMessage", "onChange", "onClose", "onFilterChange", "onOpen", "onScroll", "onScrollBottom", "placeholder", "prepend", "repositionMode", "selectAllAppearance", "showSelectedValuesFirst", "tabConfirmsNewValue", "values", "virtualization" ]);
         // @docs-props-type MultiselectPropsBase
                 var U = c()({
             componentName: "Multiselect",
@@ -1294,7 +1460,7 @@
         }), [ l, G ]);
         // Compact uses Button, which defaults `inline` to true, explicitly pass a boolean to prevent the underlying Button from applying its default.
                 var X = !!h;
-        var J = Xe({
+        var J = Ze({
             allowNewValues: n,
             animateLoading: o,
             append: a,
@@ -1314,14 +1480,14 @@
             loadingMessage: M,
             menuStyle: P,
             name: k,
-            noOptionsMessage: x,
+            noOptionsMessage: V,
             onClose: N,
-            onChange: V,
-            onFilterChange: B,
-            onOpen: E,
-            onScroll: F,
-            onScrollBottom: I,
-            placeholder: q,
+            onChange: E,
+            onFilterChange: x,
+            onOpen: R,
+            onScroll: I,
+            onScrollBottom: F,
+            placeholder: A,
             prepend: D,
             repositionMode: T,
             showSelectedValuesFirst: H,
@@ -1349,22 +1515,22 @@
         };
         if (l) {
             
-            return t().createElement(R, Ue({
+            return t().createElement(B, Qe({
                 "data-test": "multiselect"
             }, Z, ee, J));
         }
         
-        return t().createElement(Ke, Ue({
+        return t().createElement(Xe, Qe({
             "data-test": "multiselect"
         }, Z, J));
     }
     // TODO: SUI-3402, this can be removed when ControlGroup no longer needs to inspect componentType
-        on.componentType = "Multiselect";
-    on.Option = h;
-    on.Heading = u.Heading;
-    on.Divider = u.Divider;
-    on.propTypes = nn;
-    /* harmony default export */    const an = on;
+        sn.componentType = "Multiselect";
+    sn.Option = h;
+    sn.Heading = u.Heading;
+    sn.Divider = u.Divider;
+    sn.propTypes = an;
+    /* harmony default export */    const cn = sn;
     // CONCATENATED MODULE: ./src/Multiselect/index.ts
     module.exports = n;
     /******/})();