naive-ui 2.41.1 → 2.43.0

package/lib/menu/src/MenuOption.js

@@ -21,13 +21,15 @@ exports.NMenuOption = (0, vue_1.defineComponent)({
     props: exports.menuItemProps,
     setup(props) {
         const MenuChild = (0, use_menu_child_1.useMenuChild)(props);
-        const { NSubmenu, NMenu } = MenuChild;
+        const { NSubmenu, NMenu, NMenuOptionGroup } = MenuChild;
         const { props: menuProps, mergedClsPrefixRef, mergedCollapsedRef } = NMenu;
-        const submenuDisabledRef = NSubmenu
+        const parentDisabledRef = NSubmenu
             ? NSubmenu.mergedDisabledRef
-            : { value: false };
+            : NMenuOptionGroup
+                ? NMenuOptionGroup.mergedDisabledRef
+                : { value: false };
         const mergedDisabledRef = (0, vue_1.computed)(() => {
-            return submenuDisabledRef.value || props.disabled;
+            return parentDisabledRef.value || props.disabled;
         });
         function doClick(e) {
             const { onClick } = props;

package/lib/menu/src/MenuOptionContent.d.ts

@@ -82,8 +82,8 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     selected: boolean;
     hover: boolean;
     showArrow: boolean;
-    childActive: boolean;
     collapsed: boolean;
+    childActive: boolean;
     isEllipsisPlaceholder: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 export default _default;

package/lib/menu/src/MenuOptionGroup.d.ts

@@ -22,7 +22,7 @@ export declare const menuItemGroupProps: {
     readonly title: PropType<string | (() => import("vue").VNodeChild)>;
     readonly extra: PropType<string | (() => import("vue").VNodeChild)>;
 };
-export declare const menuItemGroupPropKeys: ("extra" | "root" | "title" | "tmNode" | "level" | "isGroup" | "tmNodes" | "internalKey")[];
+export declare const menuItemGroupPropKeys: ("extra" | "root" | "title" | "tmNodes" | "level" | "isGroup" | "tmNode" | "internalKey")[];
 export declare const NMenuOptionGroup: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     readonly tmNode: {
         readonly type: PropType<TmNode>;

package/lib/menu/src/MenuOptionGroup.js

@@ -19,10 +19,16 @@ exports.NMenuOptionGroup = (0, vue_1.defineComponent)({
     name: 'MenuOptionGroup',
     props: exports.menuItemGroupProps,
     setup(props) {
-        (0, vue_1.provide)(context_1.submenuInjectionKey, null);
         const MenuChild = (0, use_menu_child_1.useMenuChild)(props);
+        const { NSubmenu } = MenuChild;
+        const mergedDisabledRef = (0, vue_1.computed)(() => {
+            if (NSubmenu === null || NSubmenu === void 0 ? void 0 : NSubmenu.mergedDisabledRef.value)
+                return true;
+            return props.tmNode.disabled;
+        });
         (0, vue_1.provide)(context_1.menuItemGroupInjectionKey, {
-            paddingLeftRef: MenuChild.paddingLeft
+            paddingLeftRef: MenuChild.paddingLeft,
+            mergedDisabledRef
         });
         const { mergedClsPrefixRef, props: menuProps } = (0, vue_1.inject)(context_1.menuInjectionKey);
         return function () {

package/lib/menu/src/Submenu.d.ts

@@ -35,7 +35,7 @@ export declare const submenuProps: {
     readonly title: PropType<string | (() => VNodeChild)>;
     readonly extra: PropType<string | (() => VNodeChild)>;
 };
-export declare const submenuPropKeys: ("extra" | "root" | "disabled" | "title" | "icon" | "onClick" | "tmNode" | "level" | "isGroup" | "tmNodes" | "internalKey" | "isEllipsisPlaceholder" | "rawNodes" | "domId" | "virtualChildActive")[];
+export declare const submenuPropKeys: ("extra" | "root" | "disabled" | "title" | "icon" | "onClick" | "tmNodes" | "level" | "isGroup" | "tmNode" | "internalKey" | "isEllipsisPlaceholder" | "rawNodes" | "domId" | "virtualChildActive")[];
 export declare const NSubmenu: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     readonly rawNodes: {
         readonly type: PropType<MenuMixedOption[]>;
@@ -176,7 +176,20 @@ export declare const NSubmenu: import("vue").DefineComponent<import("vue").Extra
                     arrowOffsetVertical: string;
                     arrowHeight: string;
                     padding: string;
-                }, any>;
+                }, {
+                    Scrollbar: import("../../_mixins").Theme<"Scrollbar", {
+                        height: string;
+                        width: string;
+                        borderRadius: string;
+                        color: string;
+                        colorHover: string;
+                        railInsetHorizontalBottom: string;
+                        railInsetHorizontalTop: string;
+                        railInsetVerticalRight: string;
+                        railInsetVerticalLeft: string;
+                        railColor: string;
+                    }, any>;
+                }>;
             }>;
             Dropdown: import("../../_mixins").Theme<"Dropdown", {
                 optionHeightSmall: string;
@@ -246,7 +259,20 @@ export declare const NSubmenu: import("vue").DefineComponent<import("vue").Extra
                     arrowOffsetVertical: string;
                     arrowHeight: string;
                     padding: string;
-                }, any>;
+                }, {
+                    Scrollbar: import("../../_mixins").Theme<"Scrollbar", {
+                        height: string;
+                        width: string;
+                        borderRadius: string;
+                        color: string;
+                        colorHover: string;
+                        railInsetHorizontalBottom: string;
+                        railInsetHorizontalTop: string;
+                        railInsetVerticalRight: string;
+                        railInsetVerticalLeft: string;
+                        railColor: string;
+                    }, any>;
+                }>;
             }>;
         };
         peerOverrides: {
@@ -265,7 +291,20 @@ export declare const NSubmenu: import("vue").DefineComponent<import("vue").Extra
                         arrowOffsetVertical: string;
                         arrowHeight: string;
                         padding: string;
-                    }, any>> | undefined;
+                    }, {
+                        Scrollbar: import("../../_mixins").Theme<"Scrollbar", {
+                            height: string;
+                            width: string;
+                            borderRadius: string;
+                            color: string;
+                            colorHover: string;
+                            railInsetHorizontalBottom: string;
+                            railInsetHorizontalTop: string;
+                            railInsetVerticalRight: string;
+                            railInsetVerticalLeft: string;
+                            railColor: string;
+                        }, any>;
+                    }>> | undefined;
                 } | undefined;
             } | undefined;
             Dropdown?: {
@@ -283,7 +322,20 @@ export declare const NSubmenu: import("vue").DefineComponent<import("vue").Extra
                         arrowOffsetVertical: string;
                         arrowHeight: string;
                         padding: string;
-                    }, any>> | undefined;
+                    }, {
+                        Scrollbar: import("../../_mixins").Theme<"Scrollbar", {
+                            height: string;
+                            width: string;
+                            borderRadius: string;
+                            color: string;
+                            colorHover: string;
+                            railInsetHorizontalBottom: string;
+                            railInsetHorizontalTop: string;
+                            railInsetVerticalRight: string;
+                            railInsetVerticalLeft: string;
+                            railColor: string;
+                        }, any>;
+                    }>> | undefined;
                 } | undefined;
             } | undefined;
         };
@@ -391,7 +443,20 @@ export declare const NSubmenu: import("vue").DefineComponent<import("vue").Extra
                     arrowOffsetVertical: string;
                     arrowHeight: string;
                     padding: string;
-                }, any>;
+                }, {
+                    Scrollbar: import("../../_mixins").Theme<"Scrollbar", {
+                        height: string;
+                        width: string;
+                        borderRadius: string;
+                        color: string;
+                        colorHover: string;
+                        railInsetHorizontalBottom: string;
+                        railInsetHorizontalTop: string;
+                        railInsetVerticalRight: string;
+                        railInsetVerticalLeft: string;
+                        railColor: string;
+                    }, any>;
+                }>;
             }>;
             Dropdown: import("../../_mixins").Theme<"Dropdown", {
                 optionHeightSmall: string;
@@ -461,7 +526,20 @@ export declare const NSubmenu: import("vue").DefineComponent<import("vue").Extra
                     arrowOffsetVertical: string;
                     arrowHeight: string;
                     padding: string;
-                }, any>;
+                }, {
+                    Scrollbar: import("../../_mixins").Theme<"Scrollbar", {
+                        height: string;
+                        width: string;
+                        borderRadius: string;
+                        color: string;
+                        colorHover: string;
+                        railInsetHorizontalBottom: string;
+                        railInsetHorizontalTop: string;
+                        railInsetVerticalRight: string;
+                        railInsetVerticalLeft: string;
+                        railColor: string;
+                    }, any>;
+                }>;
             }>;
         };
         peerOverrides: {
@@ -480,7 +558,20 @@ export declare const NSubmenu: import("vue").DefineComponent<import("vue").Extra
                         arrowOffsetVertical: string;
                         arrowHeight: string;
                         padding: string;
-                    }, any>> | undefined;
+                    }, {
+                        Scrollbar: import("../../_mixins").Theme<"Scrollbar", {
+                            height: string;
+                            width: string;
+                            borderRadius: string;
+                            color: string;
+                            colorHover: string;
+                            railInsetHorizontalBottom: string;
+                            railInsetHorizontalTop: string;
+                            railInsetVerticalRight: string;
+                            railInsetVerticalLeft: string;
+                            railColor: string;
+                        }, any>;
+                    }>> | undefined;
                 } | undefined;
             } | undefined;
             Dropdown?: {
@@ -498,7 +589,20 @@ export declare const NSubmenu: import("vue").DefineComponent<import("vue").Extra
                         arrowOffsetVertical: string;
                         arrowHeight: string;
                         padding: string;
-                    }, any>> | undefined;
+                    }, {
+                        Scrollbar: import("../../_mixins").Theme<"Scrollbar", {
+                            height: string;
+                            width: string;
+                            borderRadius: string;
+                            color: string;
+                            colorHover: string;
+                            railInsetHorizontalBottom: string;
+                            railInsetHorizontalTop: string;
+                            railInsetVerticalRight: string;
+                            railInsetVerticalLeft: string;
+                            railColor: string;
+                        }, any>;
+                    }>> | undefined;
                 } | undefined;
             } | undefined;
         };
@@ -557,8 +661,8 @@ export declare const NSubmenu: import("vue").DefineComponent<import("vue").Extra
 }>> & Readonly<{}>, {
     readonly root: boolean;
     readonly disabled: boolean;
-    readonly isGroup: boolean;
     readonly tmNodes: TmNode[];
+    readonly isGroup: boolean;
     readonly isEllipsisPlaceholder: boolean;
     readonly rawNodes: MenuMixedOption[];
     readonly virtualChildActive: boolean;

package/lib/menu/src/use-menu-child.d.ts

@@ -25,6 +25,7 @@ export interface SubmenuInjection {
 }
 export interface MenuOptionGroupInjection {
     paddingLeftRef: Ref<number | undefined>;
+    mergedDisabledRef: Ref<boolean>;
 }
 export interface UseMenuChild {
     dropdownPlacement: ComputedRef<FollowerPlacement>;
@@ -34,5 +35,6 @@ export interface UseMenuChild {
     iconMarginRight: ComputedRef<number>;
     NMenu: MenuInjection;
     NSubmenu: SubmenuInjection | null;
+    NMenuOptionGroup: MenuOptionGroupInjection | null;
 }
 export declare function useMenuChild(props: UseMenuChildProps): UseMenuChild;

package/lib/menu/src/use-menu-child.js

@@ -78,6 +78,7 @@ function useMenuChild(props) {
         paddingLeft: paddingLeftRef,
         iconMarginRight: iconMarginRightRef,
         NMenu,
-        NSubmenu
+        NSubmenu,
+        NMenuOptionGroup
     };
 }

package/lib/menu/styles/light.d.ts

@@ -220,7 +220,20 @@ declare const menuLight: import("../../_mixins/use-theme").Theme<"Menu", {
             arrowOffsetVertical: string;
             arrowHeight: string;
             padding: string;
-        }, any>;
+        }, {
+            Scrollbar: import("../../_mixins/use-theme").Theme<"Scrollbar", {
+                height: string;
+                width: string;
+                borderRadius: string;
+                color: string;
+                colorHover: string;
+                railInsetHorizontalBottom: string;
+                railInsetHorizontalTop: string;
+                railInsetVerticalRight: string;
+                railInsetVerticalLeft: string;
+                railColor: string;
+            }, any>;
+        }>;
     }>;
     Dropdown: import("../../_mixins/use-theme").Theme<"Dropdown", {
         optionHeightSmall: string;
@@ -290,7 +303,20 @@ declare const menuLight: import("../../_mixins/use-theme").Theme<"Menu", {
             arrowOffsetVertical: string;
             arrowHeight: string;
             padding: string;
-        }, any>;
+        }, {
+            Scrollbar: import("../../_mixins/use-theme").Theme<"Scrollbar", {
+                height: string;
+                width: string;
+                borderRadius: string;
+                color: string;
+                colorHover: string;
+                railInsetHorizontalBottom: string;
+                railInsetHorizontalTop: string;
+                railInsetVerticalRight: string;
+                railInsetVerticalLeft: string;
+                railColor: string;
+            }, any>;
+        }>;
     }>;
 }>;
 export default menuLight;

package/lib/message/src/Message.d.ts

@@ -49,6 +49,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         '--n-close-icon-color-hover': string;
         '--n-line-height': string;
         '--n-border-radius': string;
+        '--n-border': string;
     }> | undefined;
     themeClass: import("vue").Ref<string, string> | undefined;
     onRender: (() => void) | undefined;

package/lib/message/src/Message.js

@@ -30,7 +30,7 @@ exports.default = (0, vue_1.defineComponent)({
         const themeRef = (0, _mixins_1.useTheme)('Message', '-message', index_cssr_1.default, styles_1.messageLight, messageProviderProps, mergedClsPrefixRef);
         const cssVarsRef = (0, vue_1.computed)(() => {
             const { type } = props;
-            const { common: { cubicBezierEaseInOut }, self: { padding, margin, maxWidth, iconMargin, closeMargin, closeSize, iconSize, fontSize, lineHeight, borderRadius, iconColorInfo, iconColorSuccess, iconColorWarning, iconColorError, iconColorLoading, closeIconSize, closeBorderRadius, [(0, _utils_1.createKey)('textColor', type)]: textColor, [(0, _utils_1.createKey)('boxShadow', type)]: boxShadow, [(0, _utils_1.createKey)('color', type)]: color, [(0, _utils_1.createKey)('closeColorHover', type)]: closeColorHover, [(0, _utils_1.createKey)('closeColorPressed', type)]: closeColorPressed, [(0, _utils_1.createKey)('closeIconColor', type)]: closeIconColor, [(0, _utils_1.createKey)('closeIconColorPressed', type)]: closeIconColorPressed, [(0, _utils_1.createKey)('closeIconColorHover', type)]: closeIconColorHover } } = themeRef.value;
+            const { common: { cubicBezierEaseInOut }, self: { padding, margin, maxWidth, iconMargin, closeMargin, closeSize, iconSize, fontSize, lineHeight, borderRadius, border, iconColorInfo, iconColorSuccess, iconColorWarning, iconColorError, iconColorLoading, closeIconSize, closeBorderRadius, [(0, _utils_1.createKey)('textColor', type)]: textColor, [(0, _utils_1.createKey)('boxShadow', type)]: boxShadow, [(0, _utils_1.createKey)('color', type)]: color, [(0, _utils_1.createKey)('closeColorHover', type)]: closeColorHover, [(0, _utils_1.createKey)('closeColorPressed', type)]: closeColorPressed, [(0, _utils_1.createKey)('closeIconColor', type)]: closeIconColor, [(0, _utils_1.createKey)('closeIconColorPressed', type)]: closeIconColorPressed, [(0, _utils_1.createKey)('closeIconColorHover', type)]: closeIconColorHover } } = themeRef.value;
             return {
                 '--n-bezier': cubicBezierEaseInOut,
                 '--n-margin': margin,
@@ -57,7 +57,8 @@ exports.default = (0, vue_1.defineComponent)({
                 '--n-close-icon-color-pressed': closeIconColorPressed,
                 '--n-close-icon-color-hover': closeIconColorHover,
                 '--n-line-height': lineHeight,
-                '--n-border-radius': borderRadius
+                '--n-border-radius': borderRadius,
+                '--n-border': border
             };
         });
         const themeClassHandle = inlineThemeDisabled

package/lib/message/src/MessageProvider.d.ts

@@ -104,6 +104,7 @@ export declare const messageProviderProps: {
         loadingColor: string;
         lineHeight: string;
         borderRadius: string;
+        border: string;
         margin: string;
         padding: string;
         maxWidth: string;
@@ -174,6 +175,7 @@ export declare const messageProviderProps: {
         loadingColor: string;
         lineHeight: string;
         borderRadius: string;
+        border: string;
         margin: string;
         padding: string;
         maxWidth: string;
@@ -244,6 +246,7 @@ export declare const messageProviderProps: {
         loadingColor: string;
         lineHeight: string;
         borderRadius: string;
+        border: string;
         margin: string;
         padding: string;
         maxWidth: string;
@@ -332,6 +335,7 @@ declare const _default: import("vue").DefineComponent<ExtractPropTypes<{
         loadingColor: string;
         lineHeight: string;
         borderRadius: string;
+        border: string;
         margin: string;
         padding: string;
         maxWidth: string;
@@ -402,6 +406,7 @@ declare const _default: import("vue").DefineComponent<ExtractPropTypes<{
         loadingColor: string;
         lineHeight: string;
         borderRadius: string;
+        border: string;
         margin: string;
         padding: string;
         maxWidth: string;
@@ -472,6 +477,7 @@ declare const _default: import("vue").DefineComponent<ExtractPropTypes<{
         loadingColor: string;
         lineHeight: string;
         borderRadius: string;
+        border: string;
         margin: string;
         padding: string;
         maxWidth: string;
@@ -584,6 +590,7 @@ declare const _default: import("vue").DefineComponent<ExtractPropTypes<{
         loadingColor: string;
         lineHeight: string;
         borderRadius: string;
+        border: string;
         margin: string;
         padding: string;
         maxWidth: string;
@@ -654,6 +661,7 @@ declare const _default: import("vue").DefineComponent<ExtractPropTypes<{
         loadingColor: string;
         lineHeight: string;
         borderRadius: string;
+        border: string;
         margin: string;
         padding: string;
         maxWidth: string;
@@ -724,6 +732,7 @@ declare const _default: import("vue").DefineComponent<ExtractPropTypes<{
         loadingColor: string;
         lineHeight: string;
         borderRadius: string;
+        border: string;
         margin: string;
         padding: string;
         maxWidth: string;
@@ -737,8 +746,8 @@ declare const _default: import("vue").DefineComponent<ExtractPropTypes<{
     }, any>>>;
 }>> & Readonly<{}>, {
     duration: number;
-    placement: "top" | "bottom" | "top-left" | "top-right" | "bottom-left" | "bottom-right";
     closable: boolean;
+    placement: "top" | "bottom" | "top-left" | "top-right" | "bottom-left" | "bottom-right";
     keepAliveOnHover: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 export default _default;

package/lib/message/src/styles/index.cssr.js

@@ -60,6 +60,7 @@ exports.default = (0, cssr_1.c)([(0, cssr_1.cB)('message-wrapper', `
  margin-bottom .3s var(--n-bezier);
  padding: var(--n-padding);
  border-radius: var(--n-border-radius);
+ border: var(--n-border);
  flex-wrap: nowrap;
  overflow: hidden;
  max-width: var(--n-max-width);

package/lib/message/styles/light.d.ts

@@ -59,6 +59,7 @@ export declare function self(vars: ThemeCommonVars): {
     loadingColor: string;
     lineHeight: string;
     borderRadius: string;
+    border: string;
     margin: string;
     padding: string;
     maxWidth: string;

package/lib/message/styles/light.js

@@ -13,7 +13,7 @@ function self(vars) {
         closeIconColor,
         closeIconColorHover,
         closeIconColorPressed, closeColorHoverInfo: closeColorHover, closeColorPressedInfo: closeColorPressed, closeIconColorInfo: closeIconColor, closeIconColorHoverInfo: closeIconColorHover, closeIconColorPressedInfo: closeIconColorPressed, closeColorHoverSuccess: closeColorHover, closeColorPressedSuccess: closeColorPressed, closeIconColorSuccess: closeIconColor, closeIconColorHoverSuccess: closeIconColorHover, closeIconColorPressedSuccess: closeIconColorPressed, closeColorHoverError: closeColorHover, closeColorPressedError: closeColorPressed, closeIconColorError: closeIconColor, closeIconColorHoverError: closeIconColorHover, closeIconColorPressedError: closeIconColorPressed, closeColorHoverWarning: closeColorHover, closeColorPressedWarning: closeColorPressed, closeIconColorWarning: closeIconColor, closeIconColorHoverWarning: closeIconColorHover, closeIconColorPressedWarning: closeIconColorPressed, closeColorHoverLoading: closeColorHover, closeColorPressedLoading: closeColorPressed, closeIconColorLoading: closeIconColor, closeIconColorHoverLoading: closeIconColorHover, closeIconColorPressedLoading: closeIconColorPressed, loadingColor: primaryColor, lineHeight,
-        borderRadius });
+        borderRadius, border: '0' });
 }
 const messageLight = {
     name: 'Message',

package/lib/modal/src/BodyWrapper.d.ts

@@ -56,6 +56,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     contentStyle: PropType<string | import("vue").CSSProperties>;
     actionClass: PropType<string | Array<string | undefined>>;
     actionStyle: PropType<string | import("vue").CSSProperties>;
+    closeFocusable: BooleanConstructor;
     headerClass: StringConstructor;
     headerStyle: PropType<import("vue").CSSProperties | string>;
     headerExtraClass: StringConstructor;
@@ -102,6 +103,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         type: PropType<boolean | ModalDraggableOptions>;
         default: boolean;
     };
+    maskHidden: BooleanConstructor;
 }>, {
     mergedTheme: import("vue").Ref<{
         common: import("../..").ThemeCommonVars;
@@ -1231,6 +1233,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     contentStyle: PropType<string | import("vue").CSSProperties>;
     actionClass: PropType<string | Array<string | undefined>>;
     actionStyle: PropType<string | import("vue").CSSProperties>;
+    closeFocusable: BooleanConstructor;
     headerClass: StringConstructor;
     headerStyle: PropType<import("vue").CSSProperties | string>;
     headerExtraClass: StringConstructor;
@@ -1277,20 +1280,23 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         type: PropType<boolean | ModalDraggableOptions>;
         default: boolean;
     };
+    maskHidden: BooleanConstructor;
 }>> & Readonly<{}>, {
-    type: "error" | "default" | "info" | "success" | "warning";
+    type: "error" | "default" | "info" | "warning" | "success";
     tag: keyof HTMLElementTagNameMap;
     size: "small" | "medium" | "large" | "huge";
     draggable: boolean | ModalDraggableOptions;
     loading: boolean;
     autoFocus: boolean;
-    bordered: boolean;
     showIcon: boolean;
+    bordered: boolean;
     closable: boolean;
-    hoverable: boolean;
     embedded: boolean;
     segmented: boolean | import("../../card").CardSegmented;
-    trapFocus: boolean;
+    hoverable: boolean;
+    closeFocusable: boolean;
     blockScroll: boolean;
+    trapFocus: boolean;
+    maskHidden: boolean;
 }, SlotsType<ModalSlots>, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 export default _default;

package/lib/modal/src/BodyWrapper.js

@@ -33,7 +33,7 @@ exports.default = (0, vue_1.defineComponent)({
         }, blockScroll: Boolean, draggable: {
             type: [Boolean, Object],
             default: false
-        } }, presetProps_1.presetProps), { renderMask: Function, 
+        }, maskHidden: Boolean }, presetProps_1.presetProps), { renderMask: Function, 
         // events
         onClickoutside: Function, onBeforeLeave: {
             type: Function,
@@ -199,13 +199,17 @@ exports.default = (0, vue_1.defineComponent)({
             }, $attrs, childNode.props || {});
         }
         return this.displayDirective === 'show' || this.displayed || this.show
-            ? (0, vue_1.withDirectives)((0, vue_1.h)("div", { role: "none", class: `${mergedClsPrefix}-modal-body-wrapper` },
+            ? (0, vue_1.withDirectives)((0, vue_1.h)("div", { role: "none", class: [
+                    `${mergedClsPrefix}-modal-body-wrapper`,
+                    this.maskHidden
+                        && `${mergedClsPrefix}-modal-body-wrapper--mask-hidden`
+                ] },
                 (0, vue_1.h)(_internal_1.NScrollbar, { ref: "scrollbarRef", theme: this.mergedTheme.peers.Scrollbar, themeOverrides: this.mergedTheme.peerOverrides.Scrollbar, contentClass: `${mergedClsPrefix}-modal-scroll-content` }, {
                     default: () => {
                         var _a;
                         return [
                             (_a = this.renderMask) === null || _a === void 0 ? void 0 : _a.call(this),
-                            (0, vue_1.h)(vueuc_1.VFocusTrap, { disabled: !this.trapFocus, active: this.show, onEsc: this.onEsc, autoFocus: this.autoFocus }, {
+                            (0, vue_1.h)(vueuc_1.VFocusTrap, { disabled: !this.trapFocus || this.maskHidden, active: this.show, onEsc: this.onEsc, autoFocus: this.autoFocus }, {
                                 default: () => {
                                     var _a;
                                     return ((0, vue_1.h)(vue_1.Transition, { name: "fade-in-scale-up-transition", appear: (_a = this.appear) !== null && _a !== void 0 ? _a : this.isMounted, onEnter: handleEnter, onAfterEnter: handleAfterEnter, onAfterLeave: handleAfterLeave, onBeforeLeave: handleBeforeLeave }, {