@sprinklrjs/spaceweb 14.13.1 → 14.14.0

package/a11y/accessibilityIsolation.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Hide all content outside `keepNode` from assistive technology while a modal
+ * `[aria-live]` descendants of `document.body` visible.
+ */
+export declare function isolateAccessibilityTree(keepNode: HTMLElement): () => void;

package/a11y/accessibilityIsolation.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.isolateAccessibilityTree = void 0;
+var aria_hidden_1 = require("aria-hidden");
+/**
+ * Hide all content outside `keepNode` from assistive technology while a modal
+ * `[aria-live]` descendants of `document.body` visible.
+ */
+function isolateAccessibilityTree(keepNode) {
+    return (0, aria_hidden_1.hideOthers)(keepNode);
+}
+exports.isolateAccessibilityTree = isolateAccessibilityTree;

package/asyncSelect/hooks/useAsyncSelect.d.ts

@@ -127,6 +127,24 @@ export declare const useAsyncSelect: ({ loadOptions, initialOptions, resolveSele
         }>;
         index?: number | undefined;
     }, props: import("../../baseui/select").SelectProps) => import("react").ReactNode) | null | undefined;
+    getValueAriaLabel?: ((a: {
+        option: Readonly<{
+            [x: string]: any;
+            id?: import("../types").Id | undefined;
+            label?: import("react").ReactNode;
+            disabled?: boolean | undefined;
+            disabledTooltipConfig?: Omit<import("../../tooltip").ActionableTooltipProps, "children"> | undefined;
+            clearableValue?: boolean | undefined;
+            isCreatable?: boolean | undefined;
+            __optgroup?: string | undefined;
+            searchTags?: string[] | undefined;
+            tooltipContent?: import("react").ReactNode | import("../../baseui/popover").ContentRenderProp;
+            __closeOnSelect?: boolean | undefined;
+            __onSelectResetsInput?: boolean | undefined;
+            __groupSelectAll?: boolean | undefined;
+        }>;
+        index?: number | undefined;
+    }, props: import("../../baseui/select").SelectProps) => string | undefined) | null | undefined;
     ignoreCase?: boolean | undefined;
     controlRef?: import("../../select").ControlRef | undefined;
     labelKey?: string | undefined;
@@ -305,6 +323,24 @@ export declare const useAsyncSelect: ({ loadOptions, initialOptions, resolveSele
         }>;
         index?: number | undefined;
     }, props: import("../../baseui/select").SelectProps) => import("react").ReactNode) | null | undefined;
+    getValueAriaLabel?: ((a: {
+        option: Readonly<{
+            [x: string]: any;
+            id?: import("../types").Id | undefined;
+            label?: import("react").ReactNode;
+            disabled?: boolean | undefined;
+            disabledTooltipConfig?: Omit<import("../../tooltip").ActionableTooltipProps, "children"> | undefined;
+            clearableValue?: boolean | undefined;
+            isCreatable?: boolean | undefined;
+            __optgroup?: string | undefined;
+            searchTags?: string[] | undefined;
+            tooltipContent?: import("react").ReactNode | import("../../baseui/popover").ContentRenderProp;
+            __closeOnSelect?: boolean | undefined;
+            __onSelectResetsInput?: boolean | undefined;
+            __groupSelectAll?: boolean | undefined;
+        }>;
+        index?: number | undefined;
+    }, props: import("../../baseui/select").SelectProps) => string | undefined) | null | undefined;
     ignoreCase?: boolean | undefined;
     controlRef?: import("../../select").ControlRef | undefined;
     labelKey?: string | undefined;
@@ -486,6 +522,24 @@ export declare const useAsyncSelect: ({ loadOptions, initialOptions, resolveSele
         }>;
         index?: number | undefined;
     }, props: import("../../baseui/select").SelectProps) => import("react").ReactNode) | null | undefined;
+    getValueAriaLabel?: ((a: {
+        option: Readonly<{
+            [x: string]: any;
+            id?: import("../types").Id | undefined;
+            label?: import("react").ReactNode;
+            disabled?: boolean | undefined;
+            disabledTooltipConfig?: Omit<import("../../tooltip").ActionableTooltipProps, "children"> | undefined;
+            clearableValue?: boolean | undefined;
+            isCreatable?: boolean | undefined;
+            __optgroup?: string | undefined;
+            searchTags?: string[] | undefined;
+            tooltipContent?: import("react").ReactNode | import("../../baseui/popover").ContentRenderProp;
+            __closeOnSelect?: boolean | undefined;
+            __onSelectResetsInput?: boolean | undefined;
+            __groupSelectAll?: boolean | undefined;
+        }>;
+        index?: number | undefined;
+    }, props: import("../../baseui/select").SelectProps) => string | undefined) | null | undefined;
     ignoreCase?: boolean | undefined;
     controlRef?: import("../../select").ControlRef | undefined;
     labelKey?: string | undefined;

package/asyncSelect/hooks/useGroupedAsyncSelect.d.ts

@@ -95,6 +95,24 @@ export declare const useGroupedAsyncSelect: ({ onChange, showSelectAll, selectAl
         }>;
         index?: number | undefined;
     }, props: import("../../baseui/select").SelectProps) => import("react").ReactNode) | null | undefined;
+    getValueAriaLabel?: ((a: {
+        option: Readonly<{
+            [x: string]: any;
+            id?: import("../types").Id | undefined;
+            label?: import("react").ReactNode;
+            disabled?: boolean | undefined;
+            disabledTooltipConfig?: Omit<import("../../tooltip").ActionableTooltipProps, "children"> | undefined;
+            clearableValue?: boolean | undefined;
+            isCreatable?: boolean | undefined;
+            __optgroup?: string | undefined;
+            searchTags?: string[] | undefined;
+            tooltipContent?: import("react").ReactNode | import("../../baseui/popover").ContentRenderProp;
+            __closeOnSelect?: boolean | undefined;
+            __onSelectResetsInput?: boolean | undefined;
+            __groupSelectAll?: boolean | undefined;
+        }>;
+        index?: number | undefined;
+    }, props: import("../../baseui/select").SelectProps) => string | undefined) | null | undefined;
     ignoreCase?: boolean | undefined;
     controlRef?: import("../../select").ControlRef | undefined;
     labelKey?: string | undefined;
@@ -241,6 +259,24 @@ export declare const useGroupedAsyncSelect: ({ onChange, showSelectAll, selectAl
         }>;
         index?: number | undefined;
     }, props: import("../../baseui/select").SelectProps) => import("react").ReactNode) | null | undefined;
+    getValueAriaLabel?: ((a: {
+        option: Readonly<{
+            [x: string]: any;
+            id?: import("../types").Id | undefined;
+            label?: import("react").ReactNode;
+            disabled?: boolean | undefined;
+            disabledTooltipConfig?: Omit<import("../../tooltip").ActionableTooltipProps, "children"> | undefined;
+            clearableValue?: boolean | undefined;
+            isCreatable?: boolean | undefined;
+            __optgroup?: string | undefined;
+            searchTags?: string[] | undefined;
+            tooltipContent?: import("react").ReactNode | import("../../baseui/popover").ContentRenderProp;
+            __closeOnSelect?: boolean | undefined;
+            __onSelectResetsInput?: boolean | undefined;
+            __groupSelectAll?: boolean | undefined;
+        }>;
+        index?: number | undefined;
+    }, props: import("../../baseui/select").SelectProps) => string | undefined) | null | undefined;
     ignoreCase?: boolean | undefined;
     controlRef?: import("../../select").ControlRef | undefined;
     labelKey?: string | undefined;
@@ -389,6 +425,24 @@ export declare const useGroupedAsyncSelect: ({ onChange, showSelectAll, selectAl
         }>;
         index?: number | undefined;
     }, props: import("../../baseui/select").SelectProps) => import("react").ReactNode) | null | undefined;
+    getValueAriaLabel?: ((a: {
+        option: Readonly<{
+            [x: string]: any;
+            id?: import("../types").Id | undefined;
+            label?: import("react").ReactNode;
+            disabled?: boolean | undefined;
+            disabledTooltipConfig?: Omit<import("../../tooltip").ActionableTooltipProps, "children"> | undefined;
+            clearableValue?: boolean | undefined;
+            isCreatable?: boolean | undefined;
+            __optgroup?: string | undefined;
+            searchTags?: string[] | undefined;
+            tooltipContent?: import("react").ReactNode | import("../../baseui/popover").ContentRenderProp;
+            __closeOnSelect?: boolean | undefined;
+            __onSelectResetsInput?: boolean | undefined;
+            __groupSelectAll?: boolean | undefined;
+        }>;
+        index?: number | undefined;
+    }, props: import("../../baseui/select").SelectProps) => string | undefined) | null | undefined;
     ignoreCase?: boolean | undefined;
     controlRef?: import("../../select").ControlRef | undefined;
     labelKey?: string | undefined;

package/baseui/modal/modal.d.ts

@@ -10,6 +10,7 @@ declare class Modal extends React.Component<ModalProps, ModalState> {
     dialogContainerRef: React.RefObject<HTMLElement>;
     lastFocus: HTMLElement | undefined | null;
     lastMountNodeOverflowStyle: string | undefined | null;
+    releaseModalAccessibilityIsolation: (() => void) | undefined;
     rootRef: React.RefObject<HTMLElement>;
     state: {
         isVisible: boolean;
@@ -23,10 +24,13 @@ declare class Modal extends React.Component<ModalProps, ModalState> {
     handleBlur: (_event: SyntheticEvent) => void;
     disableMountNodeScroll(): void;
     resetMountNodeScroll(): void;
+    enableModalAccessibilityIsolation(): void;
+    disableModalAccessibilityIsolation(): void;
     onEscape: () => void;
     onDocumentClick: (e: MouseEvent) => void;
     onBackdropClick: () => void;
     onCloseClick: () => void;
+    onLayerMount: () => void;
     clearTimers(): void;
     didOpen(): void;
     didClose(): void;

package/baseui/modal/modal.js

@@ -17,6 +17,7 @@ var constants_1 = require("./constants");
 var styled_components_1 = require("./styled-components");
 var close_icon_1 = require("./close-icon");
 var focusVisible_1 = require("../utils/focusVisible");
+var accessibilityIsolation_1 = require("../../a11y/accessibilityIsolation");
 var Modal = /** @class */ (function (_super) {
     tslib_1.__extends(Modal, _super);
     function Modal() {
@@ -63,6 +64,11 @@ var Modal = /** @class */ (function (_super) {
         _this.onCloseClick = function () {
             _this.triggerClose(constants_1.CLOSE_SOURCE.closeButton);
         };
+        _this.onLayerMount = function () {
+            if (_this.props.isOpen) {
+                _this.enableModalAccessibilityIsolation();
+            }
+        };
         _this.animateOutComplete = function () {
             _this.setState({
                 isVisible: false,
@@ -84,6 +90,7 @@ var Modal = /** @class */ (function (_super) {
         }
     };
     Modal.prototype.componentWillUnmount = function () {
+        this.disableModalAccessibilityIsolation();
         this.resetMountNodeScroll();
         this.clearTimers();
         this.prevMounted = this.mounted;
@@ -123,6 +130,19 @@ var Modal = /** @class */ (function (_super) {
             this.lastMountNodeOverflowStyle = null;
         }
     };
+    Modal.prototype.enableModalAccessibilityIsolation = function () {
+        if (this.releaseModalAccessibilityIsolation || !this.rootRef.current) {
+            return;
+        }
+        this.releaseModalAccessibilityIsolation = (0, accessibilityIsolation_1.isolateAccessibilityTree)(this.rootRef.current);
+    };
+    Modal.prototype.disableModalAccessibilityIsolation = function () {
+        if (!this.releaseModalAccessibilityIsolation) {
+            return;
+        }
+        this.releaseModalAccessibilityIsolation();
+        this.releaseModalAccessibilityIsolation = undefined;
+    };
     Modal.prototype.clearTimers = function () {
         if (this.animateOutTimer) {
             clearTimeout(this.animateOutTimer);
@@ -142,6 +162,7 @@ var Modal = /** @class */ (function (_super) {
         // Clear any existing timers (like previous animateOutTimer)
         this.clearTimers();
         this.disableMountNodeScroll();
+        this.enableModalAccessibilityIsolation();
         if (this.props.animate) {
             this.animateStartTimer = requestAnimationFrame(function () {
                 _this.setState({ isVisible: true });
@@ -152,6 +173,7 @@ var Modal = /** @class */ (function (_super) {
         }
     };
     Modal.prototype.didClose = function () {
+        this.disableModalAccessibilityIsolation();
         this.resetMountNodeScroll();
         this.animateOutTimer = setTimeout(this.animateOutComplete, 500);
     };
@@ -208,7 +230,7 @@ var Modal = /** @class */ (function (_super) {
         }
         return ((0, jsx_runtime_1.jsx)(react_focus_lock_1.default, tslib_1.__assign({ disabled: !focusLock, 
             // Allow focus to escape when UI is within an iframe
-            crossFrame: false, returnFocus: returnFocus, autoFocus: autoFocus }, { children: (0, jsx_runtime_1.jsx)(Root, tslib_1.__assign({ "data-baseweb": constants_1.BASEWEB_NAME, ref: this.rootRef }, sharedProps, rootProps, { children: (0, jsx_runtime_1.jsx)(DialogContainer, tslib_1.__assign({ "data-testid": "spaceweb-modal-dialog-container", ref: this.dialogContainerRef }, sharedProps, dialogContainerProps, { children: (0, jsx_runtime_1.jsxs)(Dialog, tslib_1.__assign({ tabIndex: -1, "aria-modal": true, role: role }, sharedProps, dialogProps, { style: [dialogueWidth ? { '--sw-width': dialogueWidth } : {}, dialogProps === null || dialogProps === void 0 ? void 0 : dialogProps.style] }, { children: [renderedContent, closeable ? ((0, jsx_runtime_1.jsx)(Close, tslib_1.__assign({ onClick: this.onCloseClick }, sharedProps, closeProps, { onFocus: (0, focusVisible_1.forkFocus)(closeProps, this.handleFocus), onBlur: (0, focusVisible_1.forkBlur)(closeProps, this.handleBlur) }, { children: (0, jsx_runtime_1.jsx)(close_icon_1.CloseIcon, {}) }))) : null] })) })) })) })));
+            crossFrame: false, returnFocus: returnFocus, autoFocus: autoFocus }, { children: (0, jsx_runtime_1.jsx)(Root, tslib_1.__assign({ "data-baseweb": constants_1.BASEWEB_NAME, ref: this.rootRef }, sharedProps, rootProps, { children: (0, jsx_runtime_1.jsx)(DialogContainer, tslib_1.__assign({ "data-testid": "spaceweb-modal-dialog-container", ref: this.dialogContainerRef }, sharedProps, dialogContainerProps, { children: (0, jsx_runtime_1.jsxs)(Dialog, tslib_1.__assign({ tabIndex: -1, role: role }, sharedProps, dialogProps, { style: [dialogueWidth ? { '--sw-width': dialogueWidth } : {}, dialogProps === null || dialogProps === void 0 ? void 0 : dialogProps.style] }, { children: [renderedContent, closeable ? ((0, jsx_runtime_1.jsx)(Close, tslib_1.__assign({ onClick: this.onCloseClick }, sharedProps, closeProps, { onFocus: (0, focusVisible_1.forkFocus)(closeProps, this.handleFocus), onBlur: (0, focusVisible_1.forkBlur)(closeProps, this.handleBlur) }, { children: (0, jsx_runtime_1.jsx)(close_icon_1.CloseIcon, {}) }))) : null] })) })) })) })));
     };
     Modal.prototype.render = function () {
         // Only render an open and non-renderAll modal on the browser (portals aren't supported server-side)
@@ -216,7 +238,7 @@ var Modal = /** @class */ (function (_super) {
         var renderedContent = mountedAndOpen || this.props.renderAll ? this.getChildren() : null;
         if (renderedContent) {
             if (mountedAndOpen) {
-                return ((0, jsx_runtime_1.jsx)(layer_1.Layer, tslib_1.__assign({ onEscape: this.onEscape, onDocumentClick: this.onDocumentClick, mountNode: this.props.mountNode }, { children: this.renderModal(renderedContent) })));
+                return ((0, jsx_runtime_1.jsx)(layer_1.Layer, tslib_1.__assign({ onEscape: this.onEscape, onDocumentClick: this.onDocumentClick, onMount: this.onLayerMount, mountNode: this.props.mountNode }, { children: this.renderModal(renderedContent) })));
             }
             return (0, jsx_runtime_1.jsx)(styled_components_1.Hidden, { children: renderedContent });
         }

package/baseui/select/default-props.d.ts

@@ -32,6 +32,7 @@ declare const defaultProps: {
     filterOutSelected: boolean;
     getOptionLabel: null;
     getValueLabel: null;
+    getValueAriaLabel: null;
     ignoreCase: boolean;
     isLoading: boolean;
     labelKey: string;

package/baseui/select/default-props.js

@@ -34,6 +34,8 @@ var defaultProps = {
     getOptionLabel: null,
     // @ts-ignore
     getValueLabel: null,
+    // @ts-ignore
+    getValueAriaLabel: null,
     ignoreCase: true,
     isLoading: false,
     labelKey: 'label',

package/baseui/select/select-component.d.ts

@@ -5,6 +5,8 @@ type GetOptionLabel = NonNullable<SelectProps['getOptionLabel']>;
 export declare function getOptionLabel({ option }: Parameters<GetOptionLabel>[0], { selectLocale, labelKey }: SelectProps): ReactNode;
 type GetValueLabel = NonNullable<SelectProps['getValueLabel']>;
 export declare function getValueLabel({ option }: Parameters<GetValueLabel>[0], { labelKey }: SelectProps): ReactNode;
+type GetValueAriaLabel = NonNullable<SelectProps['getValueAriaLabel']>;
+export declare function getValueAriaLabel({ option }: Parameters<GetValueAriaLabel>[0], { labelKey }: SelectProps): string | undefined;
 declare class Select extends Component<SelectProps, SelectState> {
     static defaultProps: {
         'aria-label': null;
@@ -39,6 +41,7 @@ declare class Select extends Component<SelectProps, SelectState> {
         filterOutSelected: boolean;
         getOptionLabel: null;
         getValueLabel: null;
+        getValueAriaLabel: null;
         ignoreCase: boolean;
         isLoading: boolean;
         labelKey: string;
@@ -108,6 +111,7 @@ declare class Select extends Component<SelectProps, SelectState> {
     handleKeyDown: (event: KeyboardEvent) => void;
     getOptionLabel: GetOptionLabel;
     getValueLabel: GetValueLabel;
+    getValueAriaLabel: GetValueAriaLabel;
     getMemoizedOptionsMap: (options: Options, valueKey: string) => Map<string, Option>;
     /**
      * Extends the value into an array from the given options

package/baseui/select/select-component.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getValueLabel = exports.getOptionLabel = void 0;
+exports.getValueAriaLabel = exports.getValueLabel = exports.getOptionLabel = void 0;
 var tslib_1 = require("tslib");
 var jsx_runtime_1 = require("react/jsx-runtime");
 /*
@@ -54,6 +54,13 @@ function getValueLabel(_a, _b) {
     return labelKey && option[labelKey];
 }
 exports.getValueLabel = getValueLabel;
+function getValueAriaLabel(_a, _b) {
+    var option = _a.option;
+    var labelKey = _b.labelKey;
+    var label = labelKey && option[labelKey];
+    return typeof label === 'string' ? label : undefined;
+}
+exports.getValueAriaLabel = getValueAriaLabel;
 var Select = /** @class */ (function (_super) {
     tslib_1.__extends(Select, _super);
     function Select() {
@@ -406,6 +413,8 @@ var Select = /** @class */ (function (_super) {
         _this.getOptionLabel = function (optionData, props) { return getOptionLabel(optionData, props); };
         // eslint-disable-next-line class-methods-use-this -- delegates to module-level helper
         _this.getValueLabel = function (optionData, props) { return getValueLabel(optionData, props); };
+        // eslint-disable-next-line class-methods-use-this -- delegates to module-level helper
+        _this.getValueAriaLabel = function (optionData, props) { return getValueAriaLabel(optionData, props); };
         _this.getMemoizedOptionsMap = (0, memoize_one_1.default)(function (options, valueKey) {
             var normalizedOptions = _this.getMemoizedNormalizedOptions(options);
             return new Map(normalizedOptions.map(function (option) { return [String(option[valueKey]), option]; }));
@@ -773,6 +782,7 @@ var Select = /** @class */ (function (_super) {
         var _a = this.props.overrides, overrides = _a === void 0 ? {} : _a;
         var sharedProps = this.getSharedProps();
         var renderLabel = this.props.getValueLabel || this.getValueLabel;
+        var renderAriaLabel = this.props.getValueAriaLabel || this.getValueAriaLabel;
         var Value = this.props.valueComponent || Noop;
         var _b = tslib_1.__read((0, overrides_1.getOverrides)(overrides.ExtraTagPopover, popover_2.StatefulPopover), 2), ExtraTagPopover = _b[0], extraTagPopoverProps = _b[1];
         var _c = tslib_1.__read((0, overrides_1.getOverrides)(overrides.ExtraTagPopoverList, list_1.List), 2), ExtraTagPopoverList = _c[0], extraTagPopoverListProps = _c[1];
@@ -801,7 +811,7 @@ var Select = /** @class */ (function (_super) {
                                 // if not stopped, backspace event will be handled by select as well.
                                 // which might remove pop last item from select.
                                 e.stopPropagation();
-                            }, disabled: disabled, overrides: { Tag: overrides.Tag, MultiValue: overrides.MultiValue }, tabIndex: 0 }, sharedProps, { "$disabled": disabled, ref: i === _this.state.focusedExtraValueTagIdx
+                            }, disabled: disabled, overrides: { Tag: overrides.Tag, MultiValue: overrides.MultiValue }, tabIndex: 0 }, sharedProps, { "$disabled": disabled, ariaLabel: renderAriaLabel({ option: value, index: i }, _this.props), ref: i === _this.state.focusedExtraValueTagIdx
                                 ? function (valueEl) {
                                     valueEl === null || valueEl === void 0 ? void 0 : valueEl.focus();
                                 }
@@ -818,6 +828,7 @@ var Select = /** @class */ (function (_super) {
         var _b = this.props.overrides, overrides = _b === void 0 ? {} : _b;
         var sharedProps = this.getSharedProps();
         var renderLabel = this.props.getValueLabel || this.getValueLabel;
+        var renderAriaLabel = this.props.getValueAriaLabel || this.getValueAriaLabel;
         var Value = this.props.valueComponent || Noop;
         if (!valueArray.length) {
             return null;
@@ -828,7 +839,7 @@ var Select = /** @class */ (function (_super) {
             var remainingTagsCount = valueArray.length - _limitTag;
             return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [valueArray.slice(0, _limitTag).map(function (value, i) {
                         var disabled = sharedProps.$disabled || value.clearableValue === false;
-                        return ((0, jsx_runtime_1.jsx)(Value, tslib_1.__assign({ value: value, removeValue: function () { return _this.removeValueAndFocus(value); }, disabled: disabled, overrides: { Tag: overrides.Tag, MultiValue: overrides.MultiValue } }, sharedProps, { "$disabled": disabled, noTooltipOnTruncation: _this.props.noTooltipOnTruncation, 
+                        return ((0, jsx_runtime_1.jsx)(Value, tslib_1.__assign({ value: value, removeValue: function () { return _this.removeValueAndFocus(value); }, disabled: disabled, overrides: { Tag: overrides.Tag, MultiValue: overrides.MultiValue } }, sharedProps, { "$disabled": disabled, noTooltipOnTruncation: _this.props.noTooltipOnTruncation, ariaLabel: renderAriaLabel({ option: value, index: i }, _this.props), 
                             //react calls ref function whenever we pass it and not just on mount
                             ref: i === _this.state.currentValueTagIdx
                                 ? function (valueEl) {

package/baseui/select/stateful-select.d.ts

@@ -35,6 +35,7 @@ declare namespace StatefulSelect {
         filterOutSelected: boolean;
         getOptionLabel: null;
         getValueLabel: null;
+        getValueAriaLabel: null;
         ignoreCase: boolean;
         isLoading: boolean;
         labelKey: string;

package/baseui/select/types.d.ts

@@ -153,6 +153,11 @@ export type SelectProps = {
         option: Option;
         index?: number;
     }, props: SelectProps) => React.ReactNode) | null;
+    /** A custom method to get an aria-label for a selected option tag. */
+    getValueAriaLabel?: ((a: {
+        option: Option;
+        index?: number;
+    }, props: SelectProps) => string | undefined) | null;
     /** Sets the id attribute of the internal input element. Allows for usage with labels. */
     id?: string;
     /** Defines if the comparison for a new creatable value should be case-insensitive. */

package/esm/a11y/accessibilityIsolation.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Hide all content outside `keepNode` from assistive technology while a modal
+ * `[aria-live]` descendants of `document.body` visible.
+ */
+export declare function isolateAccessibilityTree(keepNode: HTMLElement): () => void;

package/esm/a11y/accessibilityIsolation.js

@@ -0,0 +1,8 @@
+import { hideOthers } from 'aria-hidden';
+/**
+ * Hide all content outside `keepNode` from assistive technology while a modal
+ * `[aria-live]` descendants of `document.body` visible.
+ */
+export function isolateAccessibilityTree(keepNode) {
+    return hideOthers(keepNode);
+}

package/esm/asyncSelect/hooks/useAsyncSelect.d.ts

@@ -127,6 +127,24 @@ export declare const useAsyncSelect: ({ loadOptions, initialOptions, resolveSele
         }>;
         index?: number | undefined;
     }, props: import("../../baseui/select").SelectProps) => import("react").ReactNode) | null | undefined;
+    getValueAriaLabel?: ((a: {
+        option: Readonly<{
+            [x: string]: any;
+            id?: import("../types").Id | undefined;
+            label?: import("react").ReactNode;
+            disabled?: boolean | undefined;
+            disabledTooltipConfig?: Omit<import("../../tooltip").ActionableTooltipProps, "children"> | undefined;
+            clearableValue?: boolean | undefined;
+            isCreatable?: boolean | undefined;
+            __optgroup?: string | undefined;
+            searchTags?: string[] | undefined;
+            tooltipContent?: import("react").ReactNode | import("../../baseui/popover").ContentRenderProp;
+            __closeOnSelect?: boolean | undefined;
+            __onSelectResetsInput?: boolean | undefined;
+            __groupSelectAll?: boolean | undefined;
+        }>;
+        index?: number | undefined;
+    }, props: import("../../baseui/select").SelectProps) => string | undefined) | null | undefined;
     ignoreCase?: boolean | undefined;
     controlRef?: import("../../select").ControlRef | undefined;
     labelKey?: string | undefined;
@@ -305,6 +323,24 @@ export declare const useAsyncSelect: ({ loadOptions, initialOptions, resolveSele
         }>;
         index?: number | undefined;
     }, props: import("../../baseui/select").SelectProps) => import("react").ReactNode) | null | undefined;
+    getValueAriaLabel?: ((a: {
+        option: Readonly<{
+            [x: string]: any;
+            id?: import("../types").Id | undefined;
+            label?: import("react").ReactNode;
+            disabled?: boolean | undefined;
+            disabledTooltipConfig?: Omit<import("../../tooltip").ActionableTooltipProps, "children"> | undefined;
+            clearableValue?: boolean | undefined;
+            isCreatable?: boolean | undefined;
+            __optgroup?: string | undefined;
+            searchTags?: string[] | undefined;
+            tooltipContent?: import("react").ReactNode | import("../../baseui/popover").ContentRenderProp;
+            __closeOnSelect?: boolean | undefined;
+            __onSelectResetsInput?: boolean | undefined;
+            __groupSelectAll?: boolean | undefined;
+        }>;
+        index?: number | undefined;
+    }, props: import("../../baseui/select").SelectProps) => string | undefined) | null | undefined;
     ignoreCase?: boolean | undefined;
     controlRef?: import("../../select").ControlRef | undefined;
     labelKey?: string | undefined;
@@ -486,6 +522,24 @@ export declare const useAsyncSelect: ({ loadOptions, initialOptions, resolveSele
         }>;
         index?: number | undefined;
     }, props: import("../../baseui/select").SelectProps) => import("react").ReactNode) | null | undefined;
+    getValueAriaLabel?: ((a: {
+        option: Readonly<{
+            [x: string]: any;
+            id?: import("../types").Id | undefined;
+            label?: import("react").ReactNode;
+            disabled?: boolean | undefined;
+            disabledTooltipConfig?: Omit<import("../../tooltip").ActionableTooltipProps, "children"> | undefined;
+            clearableValue?: boolean | undefined;
+            isCreatable?: boolean | undefined;
+            __optgroup?: string | undefined;
+            searchTags?: string[] | undefined;
+            tooltipContent?: import("react").ReactNode | import("../../baseui/popover").ContentRenderProp;
+            __closeOnSelect?: boolean | undefined;
+            __onSelectResetsInput?: boolean | undefined;
+            __groupSelectAll?: boolean | undefined;
+        }>;
+        index?: number | undefined;
+    }, props: import("../../baseui/select").SelectProps) => string | undefined) | null | undefined;
     ignoreCase?: boolean | undefined;
     controlRef?: import("../../select").ControlRef | undefined;
     labelKey?: string | undefined;

package/esm/asyncSelect/hooks/useGroupedAsyncSelect.d.ts

@@ -95,6 +95,24 @@ export declare const useGroupedAsyncSelect: ({ onChange, showSelectAll, selectAl
         }>;
         index?: number | undefined;
     }, props: import("../../baseui/select").SelectProps) => import("react").ReactNode) | null | undefined;
+    getValueAriaLabel?: ((a: {
+        option: Readonly<{
+            [x: string]: any;
+            id?: import("../types").Id | undefined;
+            label?: import("react").ReactNode;
+            disabled?: boolean | undefined;
+            disabledTooltipConfig?: Omit<import("../../tooltip").ActionableTooltipProps, "children"> | undefined;
+            clearableValue?: boolean | undefined;
+            isCreatable?: boolean | undefined;
+            __optgroup?: string | undefined;
+            searchTags?: string[] | undefined;
+            tooltipContent?: import("react").ReactNode | import("../../baseui/popover").ContentRenderProp;
+            __closeOnSelect?: boolean | undefined;
+            __onSelectResetsInput?: boolean | undefined;
+            __groupSelectAll?: boolean | undefined;
+        }>;
+        index?: number | undefined;
+    }, props: import("../../baseui/select").SelectProps) => string | undefined) | null | undefined;
     ignoreCase?: boolean | undefined;
     controlRef?: import("../../select").ControlRef | undefined;
     labelKey?: string | undefined;
@@ -241,6 +259,24 @@ export declare const useGroupedAsyncSelect: ({ onChange, showSelectAll, selectAl
         }>;
         index?: number | undefined;
     }, props: import("../../baseui/select").SelectProps) => import("react").ReactNode) | null | undefined;
+    getValueAriaLabel?: ((a: {
+        option: Readonly<{
+            [x: string]: any;
+            id?: import("../types").Id | undefined;
+            label?: import("react").ReactNode;
+            disabled?: boolean | undefined;
+            disabledTooltipConfig?: Omit<import("../../tooltip").ActionableTooltipProps, "children"> | undefined;
+            clearableValue?: boolean | undefined;
+            isCreatable?: boolean | undefined;
+            __optgroup?: string | undefined;
+            searchTags?: string[] | undefined;
+            tooltipContent?: import("react").ReactNode | import("../../baseui/popover").ContentRenderProp;
+            __closeOnSelect?: boolean | undefined;
+            __onSelectResetsInput?: boolean | undefined;
+            __groupSelectAll?: boolean | undefined;
+        }>;
+        index?: number | undefined;
+    }, props: import("../../baseui/select").SelectProps) => string | undefined) | null | undefined;
     ignoreCase?: boolean | undefined;
     controlRef?: import("../../select").ControlRef | undefined;
     labelKey?: string | undefined;
@@ -389,6 +425,24 @@ export declare const useGroupedAsyncSelect: ({ onChange, showSelectAll, selectAl
         }>;
         index?: number | undefined;
     }, props: import("../../baseui/select").SelectProps) => import("react").ReactNode) | null | undefined;
+    getValueAriaLabel?: ((a: {
+        option: Readonly<{
+            [x: string]: any;
+            id?: import("../types").Id | undefined;
+            label?: import("react").ReactNode;
+            disabled?: boolean | undefined;
+            disabledTooltipConfig?: Omit<import("../../tooltip").ActionableTooltipProps, "children"> | undefined;
+            clearableValue?: boolean | undefined;
+            isCreatable?: boolean | undefined;
+            __optgroup?: string | undefined;
+            searchTags?: string[] | undefined;
+            tooltipContent?: import("react").ReactNode | import("../../baseui/popover").ContentRenderProp;
+            __closeOnSelect?: boolean | undefined;
+            __onSelectResetsInput?: boolean | undefined;
+            __groupSelectAll?: boolean | undefined;
+        }>;
+        index?: number | undefined;
+    }, props: import("../../baseui/select").SelectProps) => string | undefined) | null | undefined;
     ignoreCase?: boolean | undefined;
     controlRef?: import("../../select").ControlRef | undefined;
     labelKey?: string | undefined;

package/esm/baseui/modal/modal.d.ts

@@ -10,6 +10,7 @@ declare class Modal extends React.Component<ModalProps, ModalState> {
     dialogContainerRef: React.RefObject<HTMLElement>;
     lastFocus: HTMLElement | undefined | null;
     lastMountNodeOverflowStyle: string | undefined | null;
+    releaseModalAccessibilityIsolation: (() => void) | undefined;
     rootRef: React.RefObject<HTMLElement>;
     state: {
         isVisible: boolean;
@@ -23,10 +24,13 @@ declare class Modal extends React.Component<ModalProps, ModalState> {
     handleBlur: (_event: SyntheticEvent) => void;
     disableMountNodeScroll(): void;
     resetMountNodeScroll(): void;
+    enableModalAccessibilityIsolation(): void;
+    disableModalAccessibilityIsolation(): void;
     onEscape: () => void;
     onDocumentClick: (e: MouseEvent) => void;
     onBackdropClick: () => void;
     onCloseClick: () => void;
+    onLayerMount: () => void;
     clearTimers(): void;
     didOpen(): void;
     didClose(): void;