@fluentui/react-tabster - npm Package Compare versions

Comparing version 9.23.3 to 9.24.0

dist/index.d.ts

@@ -1342,2 +1342,7 @@ import { dispatchGroupperMoveFocusEvent } from 'tabster';
 /**
+ * Returns a function that activates a modal by element from the modal or modal container.
+ */
+export declare function useActivateModal(): (elementFromModal: HTMLElement | undefined) => void;
+
+/**
  * A hook that returns the necessary tabster attributes to support arrow key navigation
@@ -1381,2 +1386,11 @@ * @param options - Options to configure keyboard navigation
 /**
+ * !!DANGEROUS!! Designates an element that will not be hidden even when outside an open modal.
+ * Only works for top-level elements; should be used with extreme care.
+ * @returns Attribute to apply to the target element that should never receive aria-hidden
+ */
+export declare function useDangerousNeverHidden_unstable(): {
+    [key: string]: string;
+};
+
+/**
  * A hook that returns the necessary tabster attributes to support groupping.
@@ -1383,0 +1397,0 @@ * @param options - Options to configure keyboard navigation

lib-commonjs/hooks/index.js

@@ -12,5 +12,11 @@ "use strict";
 _export(exports, {
+    useActivateModal: function() {
+        return _useActivateModal.useActivateModal;
+    },
     useArrowNavigationGroup: function() {
         return _useArrowNavigationGroup.useArrowNavigationGroup;
     },
+    useDangerousNeverHidden_unstable: function() {
+        return _useModalAttributes.useDangerousNeverHidden_unstable;
+    },
     useFocusFinders: function() {
@@ -85,1 +91,2 @@ return _useFocusFinders.useFocusFinders;
 const _useFocusedElementChange = require("./useFocusedElementChange");
+const _useActivateModal = require("./useActivateModal");

lib-commonjs/hooks/useModalAttributes.js

@@ -5,5 +5,13 @@ "use strict";
 });
-Object.defineProperty(exports, "useModalAttributes", {
-    enumerable: true,
-    get: function() {
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    useDangerousNeverHidden_unstable: function() {
+        return useDangerousNeverHidden_unstable;
+    },
+    useModalAttributes: function() {
         return useModalAttributes;
@@ -16,2 +24,12 @@ }
 const _useTabster = require("./useTabster");
+const DangerousNeverHiddenAttribute = 'data-tabster-never-hide';
+const DangerousNeverHiddenPropObject = {
+    [DangerousNeverHiddenAttribute]: ''
+};
+function useDangerousNeverHidden_unstable() {
+    return DangerousNeverHiddenPropObject;
+}
+const tabsterAccessibleCheck = (element)=>{
+    return element.hasAttribute(DangerousNeverHiddenAttribute);
+};
 const useModalAttributes = (options = {})=>{
@@ -22,3 +40,3 @@ const { trapFocus, alwaysFocusable, legacyTrapFocus } = options;
     if (tabster) {
-        (0, _tabster.getModalizer)(tabster);
+        (0, _tabster.getModalizer)(tabster, undefined, tabsterAccessibleCheck);
         (0, _tabster.getRestorer)(tabster);
@@ -25,0 +43,0 @@ }

lib-commonjs/index.js

@@ -65,5 +65,11 @@ "use strict";
     },
+    useActivateModal: function() {
+        return _index.useActivateModal;
+    },
     useArrowNavigationGroup: function() {
         return _index.useArrowNavigationGroup;
     },
+    useDangerousNeverHidden_unstable: function() {
+        return _index.useDangerousNeverHidden_unstable;
+    },
     useFocusFinders: function() {
@@ -70,0 +76,0 @@ return _index.useFocusFinders;

lib/hooks/index.js

@@ -8,3 +8,3 @@ export { useArrowNavigationGroup } from './useArrowNavigationGroup';
 export { useOnKeyboardNavigationChange } from './useOnKeyboardNavigationChange';
-export { useModalAttributes } from './useModalAttributes';
+export { useDangerousNeverHidden_unstable, useModalAttributes } from './useModalAttributes';
 export { useTabsterAttributes } from './useTabsterAttributes';
@@ -19,1 +19,2 @@ export { useObservedElement } from './useObservedElement';
 export { useFocusedElementChange } from './useFocusedElementChange';
+export { useActivateModal } from './useActivateModal';

lib/hooks/useModalAttributes.js

@@ -5,3 +5,17 @@ import { useId } from '@fluentui/react-utilities';
 import { useTabster } from './useTabster';
+const DangerousNeverHiddenAttribute = 'data-tabster-never-hide';
+const DangerousNeverHiddenPropObject = {
+    [DangerousNeverHiddenAttribute]: ''
+};
 /**
+ * !!DANGEROUS!! Designates an element that will not be hidden even when outside an open modal.
+ * Only works for top-level elements; should be used with extreme care.
+ * @returns Attribute to apply to the target element that should never receive aria-hidden
+ */ export function useDangerousNeverHidden_unstable() {
+    return DangerousNeverHiddenPropObject;
+}
+const tabsterAccessibleCheck = (element)=>{
+    return element.hasAttribute(DangerousNeverHiddenAttribute);
+};
+/**
  * Applies modal dialog behaviour through DOM attributes
@@ -17,3 +31,3 @@ * Modal element will focus trap and hide other content on the page
     if (tabster) {
-        getModalizer(tabster);
+        getModalizer(tabster, undefined, tabsterAccessibleCheck);
         getRestorer(tabster);
@@ -20,0 +34,0 @@ }

lib/index.js

@@ -1,2 +0,2 @@
-export { useArrowNavigationGroup, useFocusableGroup, useFocusFinders, useFocusVisible, useFocusWithin, useKeyboardNavAttribute, useModalAttributes, useTabsterAttributes, useObservedElement, useFocusObserved, useMergedTabsterAttributes_unstable, useRestoreFocusSource, useRestoreFocusTarget, useUncontrolledFocus, useOnKeyboardNavigationChange, useIsNavigatingWithKeyboard, useSetKeyboardNavigation, useFocusedElementChange } from './hooks/index';
+export { useArrowNavigationGroup, useFocusableGroup, useFocusFinders, useFocusVisible, useFocusWithin, useKeyboardNavAttribute, useDangerousNeverHidden_unstable, useModalAttributes, useTabsterAttributes, useObservedElement, useFocusObserved, useMergedTabsterAttributes_unstable, useRestoreFocusSource, useRestoreFocusTarget, useUncontrolledFocus, useOnKeyboardNavigationChange, useIsNavigatingWithKeyboard, useSetKeyboardNavigation, useFocusedElementChange, useActivateModal } from './hooks/index';
 export { createCustomFocusIndicatorStyle, createFocusOutlineStyle } from './focus/index';
@@ -3,0 +3,0 @@ export { applyFocusVisiblePolyfill } from './focus/index';

package.json

 {
   "name": "@fluentui/react-tabster",
-  "version": "9.23.3",
+  "version": "9.24.0",
   "description": "Utilities for focus management and facade for tabster",
@@ -26,3 +26,3 @@ "main": "lib-commonjs/index.js",
     "keyborg": "^2.6.0",
-    "tabster": "^8.2.0"
+    "tabster": "^8.5.0"
   },
@@ -29,0 +29,0 @@ "peerDependencies": {

No alert changes

Improved metrics

Total package byte prevSize

490792

increased by2.6%

Number of package files

121

increased by3.42%

Lines of code

3795

increased by3.13%

Published versions last two months

33

increased by13.79%

Published versions last year

270

increased by0.75%

Dependency changes

• Updatedtabster@^8.5.0