naive-ui 2.23.2 → 2.24.3

package/lib/drawer/src/DrawerBodyWrapper.d.ts

@@ -20,6 +20,15 @@ declare const _default: import("vue").DefineComponent<{
         required: true;
     };
     scrollbarProps: PropType<ScrollbarProps>;
+    trapFocus: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    autoFocus: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    onEsc: PropType<() => void>;
 }, {
     bodyRef: import("vue").Ref<HTMLElement | null>;
     mergedClsPrefix: import("vue").Ref<string>;
@@ -163,22 +172,37 @@ declare const _default: import("vue").DefineComponent<{
     displayed: import("vue").Ref<boolean | undefined>;
     transitionName: import("vue").ComputedRef<string>;
     handleAfterLeave: () => void;
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
-    show?: unknown;
-    displayDirective?: unknown;
-    placement?: unknown;
-    contentStyle?: unknown;
-    nativeScrollbar?: unknown;
-    scrollbarProps?: unknown;
-} & {
-    placement: Placement;
-    displayDirective: "show" | "if";
-    nativeScrollbar: boolean;
-} & {
-    show?: boolean | undefined;
-    contentStyle?: string | CSSProperties | undefined;
-    scrollbarProps?: ScrollbarProps | undefined;
-}>, {
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    show: {
+        type: PropType<boolean | undefined>;
+        default: undefined;
+    };
+    displayDirective: {
+        type: PropType<"show" | "if">;
+        required: true;
+    };
+    placement: {
+        type: PropType<Placement>;
+        required: true;
+    };
+    contentStyle: PropType<string | CSSProperties>;
+    nativeScrollbar: {
+        type: BooleanConstructor;
+        required: true;
+    };
+    scrollbarProps: PropType<ScrollbarProps>;
+    trapFocus: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    autoFocus: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    onEsc: PropType<() => void>;
+}>>, {
     show: boolean | undefined;
+    autoFocus: boolean;
+    trapFocus: boolean;
 }>;
 export default _default;

package/lib/drawer/src/DrawerBodyWrapper.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const vue_1 = require("vue");
+const vueuc_1 = require("vueuc");
 const _internal_1 = require("../../_internal");
 const interface_1 = require("../../popover/src/interface");
 const interface_2 = require("../../modal/src/interface");
@@ -26,7 +27,16 @@ exports.default = (0, vue_1.defineComponent)({
             type: Boolean,
             required: true
         },
-        scrollbarProps: Object
+        scrollbarProps: Object,
+        trapFocus: {
+            type: Boolean,
+            default: true
+        },
+        autoFocus: {
+            type: Boolean,
+            default: true
+        },
+        onEsc: Function
     },
     setup(props) {
         const displayedRef = (0, vue_1.ref)(props.show);
@@ -63,19 +73,26 @@ exports.default = (0, vue_1.defineComponent)({
     render() {
         const { $slots, mergedClsPrefix } = this;
         return this.displayDirective === 'show' || this.displayed || this.show
-            ? (0, vue_1.withDirectives)((0, vue_1.h)("div", null,
-                (0, vue_1.h)(vue_1.Transition, { name: this.transitionName, appear: this.isMounted, onAfterLeave: this.handleAfterLeave }, {
-                    default: () => (0, vue_1.withDirectives)((0, vue_1.h)('div', (0, vue_1.mergeProps)(this.$attrs, {
-                        ref: 'bodyRef',
-                        class: [
-                            `${mergedClsPrefix}-drawer`,
-                            `${mergedClsPrefix}-drawer--${this.placement}-placement`,
-                            this.nativeScrollbar &&
-                                `${mergedClsPrefix}-drawer--native-scrollbar`
-                        ]
-                    }), [
-                        this.nativeScrollbar ? ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-drawer-content-wrapper`, style: this.contentStyle }, $slots)) : ((0, vue_1.h)(_internal_1.NScrollbar, Object.assign({}, this.scrollbarProps, { contentStyle: this.contentStyle, contentClass: `${mergedClsPrefix}-drawer-content-wrapper`, theme: this.mergedTheme.peers.Scrollbar, themeOverrides: this.mergedTheme.peerOverrides.Scrollbar }), $slots))
-                    ]), [[vue_1.vShow, this.show]])
+            ? (0, vue_1.withDirectives)(
+            /* Keep the wrapper dom. Make sure the drawer has a host.
+              Nor the detached content will disappear without transition */
+            (0, vue_1.h)("div", { role: "none" },
+                (0, vue_1.h)(vueuc_1.VFocusTrap, { disabled: !this.trapFocus, active: this.show, autoFocus: this.autoFocus, onEsc: this.onEsc }, {
+                    default: () => ((0, vue_1.h)(vue_1.Transition, { name: this.transitionName, appear: this.isMounted, onAfterLeave: this.handleAfterLeave }, {
+                        default: () => (0, vue_1.withDirectives)((0, vue_1.h)('div', (0, vue_1.mergeProps)(this.$attrs, {
+                            role: 'dialog',
+                            ref: 'bodyRef',
+                            'aria-modal': 'true',
+                            class: [
+                                `${mergedClsPrefix}-drawer`,
+                                `${mergedClsPrefix}-drawer--${this.placement}-placement`,
+                                this.nativeScrollbar &&
+                                    `${mergedClsPrefix}-drawer--native-scrollbar`
+                            ]
+                        }), [
+                            this.nativeScrollbar ? ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-drawer-content-wrapper`, style: this.contentStyle, role: "none" }, $slots)) : ((0, vue_1.h)(_internal_1.NScrollbar, Object.assign({}, this.scrollbarProps, { contentStyle: this.contentStyle, contentClass: `${mergedClsPrefix}-drawer-content-wrapper`, theme: this.mergedTheme.peers.Scrollbar, themeOverrides: this.mergedTheme.peerOverrides.Scrollbar }), $slots))
+                        ]), [[vue_1.vShow, this.show]])
+                    }))
                 })), [
                 [
                     vue_1.vShow,

package/lib/drawer/src/DrawerContent.d.ts

@@ -170,26 +170,21 @@ declare const _default: import("vue").DefineComponent<{
         };
     }>;
     mergedClsPrefix: import("vue").Ref<string>;
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
-    title?: unknown;
-    headerStyle?: unknown;
-    footerStyle?: unknown;
-    bodyStyle?: unknown;
-    bodyContentStyle?: unknown;
-    nativeScrollbar?: unknown;
-    scrollbarProps?: unknown;
-    closable?: unknown;
-} & {
-    closable: boolean;
-    nativeScrollbar: boolean;
-} & {
-    title?: string | undefined;
-    bodyStyle?: string | CSSProperties | undefined;
-    headerStyle?: string | CSSProperties | undefined;
-    footerStyle?: string | CSSProperties | undefined;
-    scrollbarProps?: ScrollbarProps | undefined;
-    bodyContentStyle?: string | CSSProperties | undefined;
-}>, {
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    title: {
+        type: StringConstructor;
+    };
+    headerStyle: PropType<string | CSSProperties>;
+    footerStyle: PropType<string | CSSProperties>;
+    bodyStyle: PropType<string | CSSProperties>;
+    bodyContentStyle: PropType<string | CSSProperties>;
+    nativeScrollbar: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    scrollbarProps: PropType<ScrollbarProps>;
+    closable: BooleanConstructor;
+}>>, {
     closable: boolean;
     nativeScrollbar: boolean;
 }>;

package/lib/drawer/src/DrawerContent.js

@@ -36,16 +36,16 @@ exports.default = (0, vue_1.defineComponent)({
     },
     render() {
         const { title, mergedClsPrefix, nativeScrollbar, mergedTheme, bodyStyle, bodyContentStyle, headerStyle, footerStyle, scrollbarProps, closable, $slots } = this;
-        return ((0, vue_1.h)("div", { class: [
+        return ((0, vue_1.h)("div", { role: "none", class: [
                 `${mergedClsPrefix}-drawer-content`,
                 nativeScrollbar &&
                     `${mergedClsPrefix}-drawer-content--native-scrollbar`
             ] },
-            $slots.header || title || closable ? ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-drawer-header`, style: headerStyle },
-                (0, vue_1.h)("div", { class: `${mergedClsPrefix}-drawer-header__main` }, $slots.header !== undefined ? $slots.header() : title),
+            $slots.header || title || closable ? ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-drawer-header`, style: headerStyle, role: "none" },
+                (0, vue_1.h)("div", { class: `${mergedClsPrefix}-drawer-header__main`, role: "heading", "aria-level": "1" }, $slots.header !== undefined ? $slots.header() : title),
                 closable && ((0, vue_1.h)(_internal_1.NBaseClose, { onClick: this.handleCloseClick, clsPrefix: mergedClsPrefix, class: `${mergedClsPrefix}-drawer-header__close` })))) : null,
-            nativeScrollbar ? ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-drawer-body`, style: bodyStyle },
-                (0, vue_1.h)("div", { class: `${mergedClsPrefix}-drawer-body-content-wrapper`, style: bodyContentStyle }, $slots))) : ((0, vue_1.h)(_internal_1.NScrollbar, Object.assign({ themeOverrides: mergedTheme.peerOverrides.Scrollbar, theme: mergedTheme.peers.Scrollbar }, scrollbarProps, { class: `${mergedClsPrefix}-drawer-body`, contentClass: `${mergedClsPrefix}-drawer-body-content-wrapper`, contentStyle: bodyContentStyle }), $slots)),
-            $slots.footer ? ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-drawer-footer`, style: footerStyle }, $slots.footer())) : null));
+            nativeScrollbar ? ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-drawer-body`, style: bodyStyle, role: "none" },
+                (0, vue_1.h)("div", { class: `${mergedClsPrefix}-drawer-body-content-wrapper`, style: bodyContentStyle, role: "none" }, $slots))) : ((0, vue_1.h)(_internal_1.NScrollbar, Object.assign({ themeOverrides: mergedTheme.peerOverrides.Scrollbar, theme: mergedTheme.peers.Scrollbar }, scrollbarProps, { class: `${mergedClsPrefix}-drawer-body`, contentClass: `${mergedClsPrefix}-drawer-body-content-wrapper`, contentStyle: bodyContentStyle }), $slots)),
+            $slots.footer ? ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-drawer-footer`, style: footerStyle, role: "none" }, $slots.footer())) : null));
     }
 });

package/lib/drawer/src/interface.d.ts

@@ -1,12 +1,12 @@
-import { Ref, InjectionKey } from 'vue';
+import { Ref } from 'vue';
 import type { MergedTheme } from '../../_mixins';
 import type { DrawerTheme } from '../styles';
 export declare type DrawerBodyInjection = Ref<HTMLElement | null> | null;
-export declare const drawerBodyInjectionKey: InjectionKey<DrawerBodyInjection>;
+export declare const drawerBodyInjectionKey: import("vue").InjectionKey<DrawerBodyInjection>;
 export interface DrawerInjection {
     isMountedRef: Ref<boolean>;
     mergedThemeRef: Ref<MergedTheme<DrawerTheme>>;
     mergedClsPrefixRef: Ref<string>;
     doUpdateShow: (show: boolean) => void;
 }
-export declare const drawerInjectionKey: InjectionKey<DrawerInjection>;
+export declare const drawerInjectionKey: import("vue").InjectionKey<DrawerInjection>;

package/lib/drawer/src/interface.js

@@ -1,5 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.drawerInjectionKey = exports.drawerBodyInjectionKey = void 0;
-exports.drawerBodyInjectionKey = Symbol('drawerBody');
-exports.drawerInjectionKey = Symbol('drawer');
+const create_injection_key_1 = require("../../_utils/vue/create-injection-key");
+exports.drawerBodyInjectionKey = (0, create_injection_key_1.createInjectionKey)('n-drawer-body');
+exports.drawerInjectionKey = (0, create_injection_key_1.createInjectionKey)('n-drawer');

package/lib/dropdown/src/Dropdown.d.ts

@@ -1,4 +1,4 @@
-import { PropType, CSSProperties, InjectionKey, Ref } from 'vue';
+import { PropType, CSSProperties, Ref } from 'vue';
 import { Key, TreeNode } from 'treemate';
 import { FollowerPlacement } from 'vueuc';
 import { MaybeArray, ExtractPublicPropTypes } from '../../_utils';
@@ -18,7 +18,7 @@ export interface DropdownInjection {
     doSelect: OnUpdateValueImpl;
     doUpdateShow: (value: boolean) => void;
 }
-export declare const dropdownInjectionKey: InjectionKey<DropdownInjection>;
+export declare const dropdownInjectionKey: import("vue").InjectionKey<DropdownInjection>;
 declare const dropdownProps: {
     readonly theme: PropType<import("../../_mixins").Theme<"Dropdown", {
         optionHeightSmall: string;
@@ -321,6 +321,7 @@ declare const dropdownProps: {
         type: PropType<import("../../popover/src/Popover").TriggerEventHandlers[]>;
         default: () => never[];
     };
+    readonly internalTrapFocus: BooleanConstructor;
     readonly onShow: PropType<MaybeArray<(value: boolean) => void> | undefined>;
     readonly onHide: PropType<MaybeArray<(value: boolean) => void> | undefined>;
     readonly arrow: {
@@ -633,6 +634,7 @@ declare const _default: import("vue").DefineComponent<{
         type: PropType<import("../../popover/src/Popover").TriggerEventHandlers[]>;
         default: () => never[];
     };
+    readonly internalTrapFocus: BooleanConstructor;
     readonly onShow: PropType<MaybeArray<(value: boolean) => void> | undefined>;
     readonly onHide: PropType<MaybeArray<(value: boolean) => void> | undefined>;
     readonly arrow: {
@@ -830,87 +832,8 @@ declare const _default: import("vue").DefineComponent<{
     mergedShow: import("vue").ComputedRef<boolean>;
     doUpdateShow: (value: boolean) => void;
     cssVars: import("vue").ComputedRef<any>;
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
-    readonly theme?: unknown;
-    readonly themeOverrides?: unknown;
-    readonly builtinThemeOverrides?: unknown;
-    readonly animated?: unknown;
-    readonly keyboard?: unknown;
-    readonly size?: unknown;
-    readonly inverted?: unknown;
-    readonly placement?: unknown;
-    readonly onSelect?: unknown;
-    readonly options?: unknown;
-    readonly showArrow?: unknown;
-    readonly renderLabel?: unknown;
-    readonly renderIcon?: unknown;
-    readonly labelField?: unknown;
-    readonly keyField?: unknown;
-    readonly childrenField?: unknown;
-    readonly value?: unknown;
-    readonly show?: unknown;
-    readonly defaultShow?: unknown;
-    readonly trigger?: unknown;
-    readonly delay?: unknown;
-    readonly duration?: unknown;
-    readonly raw?: unknown;
-    readonly x?: unknown;
-    readonly y?: unknown;
-    readonly disabled?: unknown;
-    readonly getDisabled?: unknown;
-    readonly displayDirective?: unknown;
-    readonly arrowStyle?: unknown;
-    readonly flip?: unknown;
-    readonly width?: unknown;
-    readonly overlap?: unknown;
-    readonly internalExtraClass?: unknown;
-    readonly onClickoutside?: unknown;
-    readonly 'onUpdate:show'?: unknown;
-    readonly onUpdateShow?: unknown;
-    readonly zIndex?: unknown;
-    readonly to?: unknown;
-    readonly internalSyncTargetWithParent?: unknown;
-    readonly internalInheritedEventHandlers?: unknown;
-    readonly onShow?: unknown;
-    readonly onHide?: unknown;
-    readonly arrow?: unknown;
-    readonly minWidth?: unknown;
-    readonly maxWidth?: unknown;
-} & {
-    size: "small" | "medium" | "large" | "huge";
-    flip: boolean;
-    disabled: boolean;
-    duration: number;
-    raw: boolean;
-    placement: FollowerPlacement;
-    overlap: boolean;
-    keyField: string;
-    trigger: import("../../popover").PopoverTrigger;
-    showArrow: boolean;
-    delay: number;
-    displayDirective: "show" | "if";
-    animated: boolean;
-    defaultShow: boolean;
-    internalExtraClass: string[];
-    internalSyncTargetWithParent: boolean;
-    internalInheritedEventHandlers: import("../../popover/src/Popover").TriggerEventHandlers[];
-    options: DropdownMixedOption[];
-    labelField: string;
-    keyboard: boolean;
-    inverted: boolean;
-    childrenField: string;
-} & {
-    value?: Key | null | undefined;
-    show?: boolean | undefined;
-    x?: number | undefined;
-    y?: number | undefined;
-    maxWidth?: number | undefined;
-    minWidth?: number | undefined;
-    width?: number | "trigger" | undefined;
-    zIndex?: number | undefined;
-    onSelect?: MaybeArray<OnUpdateValue> | undefined;
-    to?: string | boolean | HTMLElement | undefined;
-    theme?: import("../../_mixins").Theme<"Dropdown", {
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    readonly theme: PropType<import("../../_mixins").Theme<"Dropdown", {
         optionHeightSmall: string;
         optionHeightMedium: string;
         optionHeightLarge: string;
@@ -979,8 +902,8 @@ declare const _default: import("vue").DefineComponent<{
             arrowHeight: string;
             padding: string;
         }, any>;
-    }> | undefined;
-    themeOverrides?: import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Dropdown", {
+    }>>;
+    readonly themeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Dropdown", {
         optionHeightSmall: string;
         optionHeightMedium: string;
         optionHeightLarge: string;
@@ -1049,8 +972,8 @@ declare const _default: import("vue").DefineComponent<{
             arrowHeight: string;
             padding: string;
         }, any>;
-    }>> | undefined;
-    builtinThemeOverrides?: import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Dropdown", {
+    }>>>;
+    readonly builtinThemeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Dropdown", {
         optionHeightSmall: string;
         optionHeightMedium: string;
         optionHeightLarge: string;
@@ -1119,18 +1042,108 @@ declare const _default: import("vue").DefineComponent<{
             arrowHeight: string;
             padding: string;
         }, any>;
-    }>> | undefined;
-    renderIcon?: RenderIcon | undefined;
-    renderLabel?: RenderLabel | undefined;
-    arrowStyle?: string | CSSProperties | undefined;
-    onClickoutside?: ((e: MouseEvent) => void) | undefined;
-    getDisabled?: (() => boolean) | undefined;
-    "onUpdate:show"?: MaybeArray<(value: boolean) => void> | undefined;
-    onUpdateShow?: MaybeArray<(value: boolean) => void> | undefined;
-    onShow?: MaybeArray<(value: boolean) => void> | undefined;
-    onHide?: MaybeArray<(value: boolean) => void> | undefined;
-    arrow?: boolean | undefined;
-}>, {
+    }>>>;
+    readonly animated: {
+        readonly type: BooleanConstructor;
+        readonly default: true;
+    };
+    readonly keyboard: {
+        readonly type: BooleanConstructor;
+        readonly default: true;
+    };
+    readonly size: {
+        readonly type: PropType<"small" | "medium" | "large" | "huge">;
+        readonly default: "medium";
+    };
+    readonly inverted: BooleanConstructor;
+    readonly placement: {
+        readonly type: PropType<FollowerPlacement>;
+        readonly default: "bottom";
+    };
+    readonly onSelect: PropType<MaybeArray<OnUpdateValue>>;
+    readonly options: {
+        readonly type: PropType<DropdownMixedOption[]>;
+        readonly default: () => never[];
+    };
+    readonly showArrow: BooleanConstructor;
+    readonly renderLabel: PropType<RenderLabel>;
+    readonly renderIcon: PropType<RenderIcon>;
+    readonly labelField: {
+        readonly type: StringConstructor;
+        readonly default: "label";
+    };
+    readonly keyField: {
+        readonly type: StringConstructor;
+        readonly default: "key";
+    };
+    readonly childrenField: {
+        readonly type: StringConstructor;
+        readonly default: "children";
+    };
+    readonly value: PropType<Key | null>;
+    readonly show: {
+        type: PropType<boolean | undefined>;
+        default: undefined;
+    };
+    readonly defaultShow: BooleanConstructor;
+    readonly trigger: {
+        type: PropType<import("../../popover").PopoverTrigger>;
+        default: string;
+    };
+    readonly delay: {
+        type: NumberConstructor;
+        default: number;
+    };
+    readonly duration: {
+        type: NumberConstructor;
+        default: number;
+    };
+    readonly raw: BooleanConstructor;
+    readonly x: NumberConstructor;
+    readonly y: NumberConstructor;
+    readonly disabled: BooleanConstructor;
+    readonly getDisabled: PropType<() => boolean>;
+    readonly displayDirective: {
+        type: PropType<"show" | "if">;
+        default: string;
+    };
+    readonly arrowStyle: PropType<string | CSSProperties>;
+    readonly flip: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    readonly width: {
+        type: PropType<number | "trigger">;
+        default: undefined;
+    };
+    readonly overlap: BooleanConstructor;
+    readonly internalExtraClass: {
+        type: PropType<string[]>;
+        default: () => never[];
+    };
+    readonly onClickoutside: PropType<(e: MouseEvent) => void>;
+    readonly 'onUpdate:show': PropType<MaybeArray<(value: boolean) => void>>;
+    readonly onUpdateShow: PropType<MaybeArray<(value: boolean) => void>>;
+    readonly zIndex: NumberConstructor;
+    readonly to: {
+        type: PropType<string | boolean | HTMLElement>;
+        default: undefined;
+    };
+    readonly internalSyncTargetWithParent: BooleanConstructor;
+    readonly internalInheritedEventHandlers: {
+        type: PropType<import("../../popover/src/Popover").TriggerEventHandlers[]>;
+        default: () => never[];
+    };
+    readonly internalTrapFocus: BooleanConstructor;
+    readonly onShow: PropType<MaybeArray<(value: boolean) => void> | undefined>;
+    readonly onHide: PropType<MaybeArray<(value: boolean) => void> | undefined>;
+    readonly arrow: {
+        type: PropType<boolean | undefined>;
+        default: undefined;
+    };
+    readonly minWidth: NumberConstructor;
+    readonly maxWidth: NumberConstructor;
+}>>, {
     size: "small" | "medium" | "large" | "huge";
     show: boolean | undefined;
     flip: boolean;
@@ -1146,6 +1159,7 @@ declare const _default: import("vue").DefineComponent<{
     showArrow: boolean;
     delay: number;
     displayDirective: "show" | "if";
+    internalTrapFocus: boolean;
     animated: boolean;
     defaultShow: boolean;
     internalExtraClass: string[];

package/lib/dropdown/src/Dropdown.js

@@ -14,7 +14,7 @@ const _utils_1 = require("../../_utils");
 const styles_1 = require("../styles");
 const DropdownMenu_1 = __importDefault(require("./DropdownMenu"));
 const index_cssr_1 = __importDefault(require("./styles/index.cssr"));
-exports.dropdownInjectionKey = Symbol('dropdown');
+exports.dropdownInjectionKey = (0, _utils_1.createInjectionKey)('n-dropdown');
 const dropdownBaseProps = {
     animated: {
         type: Boolean,

package/lib/dropdown/src/DropdownDivider.d.ts

@@ -3,9 +3,10 @@ declare const _default: import("vue").DefineComponent<{
         type: StringConstructor;
         required: true;
     };
-}, unknown, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
-    clsPrefix?: unknown;
-} & {
-    clsPrefix: string;
-} & {}>, {}>;
+}, unknown, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    clsPrefix: {
+        type: StringConstructor;
+        required: true;
+    };
+}>>, {}>;
 export default _default;

package/lib/dropdown/src/DropdownGroup.d.ts

@@ -13,15 +13,20 @@ declare const _default: import("vue").DefineComponent<{
         type: PropType<string | number | null>;
         default: null;
     };
-}, unknown, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
-    clsPrefix?: unknown;
-    tmNode?: unknown;
-    parentKey?: unknown;
-} & {
-    clsPrefix: string;
-    tmNode: TreeNode<import("../..").MenuOption, import("../..").MenuGroupOption, import("../../menu/src/interface").MenuIgnoredOption>;
-    parentKey: string | number | null;
-} & {}>, {
+}, unknown, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    clsPrefix: {
+        type: StringConstructor;
+        required: true;
+    };
+    tmNode: {
+        type: PropType<TreeNode<import("../..").MenuOption, import("../..").MenuGroupOption, import("../../menu/src/interface").MenuIgnoredOption>>;
+        required: true;
+    };
+    parentKey: {
+        type: PropType<string | number | null>;
+        default: null;
+    };
+}>>, {
     parentKey: string | number | null;
 }>;
 export default _default;

package/lib/dropdown/src/DropdownGroupHeader.d.ts

@@ -12,11 +12,14 @@ declare const _default: import("vue").DefineComponent<{
     showIcon: import("vue").Ref<boolean>;
     hasSubmenu: import("vue").Ref<boolean>;
     renderLabel: import("vue").Ref<import("./interface").RenderLabelImpl | undefined>;
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
-    clsPrefix?: unknown;
-    tmNode?: unknown;
-} & {
-    clsPrefix: string;
-    tmNode: Record<string, any>;
-} & {}>, {}>;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    clsPrefix: {
+        type: StringConstructor;
+        required: true;
+    };
+    tmNode: {
+        type: ObjectConstructor;
+        required: true;
+    };
+}>>, {}>;
 export default _default;

package/lib/dropdown/src/DropdownMenu.d.ts

@@ -1,10 +1,10 @@
-import { InjectionKey, PropType, Ref, CSSProperties } from 'vue';
+import { PropType, Ref, CSSProperties } from 'vue';
 import { TreeNode } from 'treemate';
 export interface NDropdownMenuInjection {
     showIconRef: Ref<boolean>;
     hasSubmenuRef: Ref<boolean>;
 }
-export declare const dropdownMenuInjectionKey: InjectionKey<NDropdownMenuInjection>;
+export declare const dropdownMenuInjectionKey: import("vue").InjectionKey<NDropdownMenuInjection>;
 declare const _default: import("vue").DefineComponent<{
     showArrow: BooleanConstructor;
     arrowStyle: PropType<string | CSSProperties>;
@@ -20,20 +20,22 @@ declare const _default: import("vue").DefineComponent<{
         type: (StringConstructor | NumberConstructor)[];
         default: null;
     };
-}, void, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
-    showArrow?: unknown;
-    arrowStyle?: unknown;
-    clsPrefix?: unknown;
-    tmNodes?: unknown;
-    parentKey?: unknown;
-} & {
-    clsPrefix: string;
-    showArrow: boolean;
-    parentKey: string | number;
-    tmNodes: TreeNode<import("../..").MenuOption, import("../..").MenuGroupOption, import("../../menu/src/interface").MenuIgnoredOption>[];
-} & {
-    arrowStyle?: string | CSSProperties | undefined;
-}>, {
+}, void, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    showArrow: BooleanConstructor;
+    arrowStyle: PropType<string | CSSProperties>;
+    clsPrefix: {
+        type: StringConstructor;
+        required: true;
+    };
+    tmNodes: {
+        type: PropType<TreeNode<import("../..").MenuOption, import("../..").MenuGroupOption, import("../../menu/src/interface").MenuIgnoredOption>[]>;
+        default: () => never[];
+    };
+    parentKey: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: null;
+    };
+}>>, {
     showArrow: boolean;
     parentKey: string | number;
     tmNodes: TreeNode<import("../..").MenuOption, import("../..").MenuGroupOption, import("../../menu/src/interface").MenuIgnoredOption>[];

package/lib/dropdown/src/DropdownMenu.js

@@ -12,7 +12,8 @@ const DropdownGroup_1 = __importDefault(require("./DropdownGroup"));
 const DropdownRenderOption_1 = __importDefault(require("./DropdownRenderOption"));
 const utils_1 = require("./utils");
 const Dropdown_1 = require("./Dropdown");
-exports.dropdownMenuInjectionKey = Symbol('dropdownMenu');
+const _utils_1 = require("../../_utils");
+exports.dropdownMenuInjectionKey = (0, _utils_1.createInjectionKey)('n-dropdown-menu');
 exports.default = (0, vue_1.defineComponent)({
     name: 'DropdownMenu',
     props: {