@fluentui/react-tabster 0.0.0-nightly-20230317-1454.1 → 0.0.0-nightly-20230321-0440.1

package/lib/hooks/useFocusWithin.js

@@ -1,6 +1,6 @@
-import * as React from "react";
-import { useFluent_unstable as useFluent } from "@fluentui/react-shared-contexts";
-import { applyFocusWithinPolyfill } from "../focus/focusWithinPolyfill";
+import * as React from 'react';
+import { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';
+import { applyFocusWithinPolyfill } from '../focus/focusWithinPolyfill';
 /**
  * A ponyfill that allows `:focus-within` to support visibility based on keyboard/mouse navigation
  * like `:focus-visible` https://github.com/WICG/focus-visible/issues/151
@@ -12,7 +12,7 @@ export function useFocusWithin() {
   } = useFluent();
   const elementRef = React.useRef(null);
   React.useEffect(() => {
-    if (targetDocument?.defaultView && elementRef.current) {
+    if ((targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.defaultView) && elementRef.current) {
       return applyFocusWithinPolyfill(elementRef.current, targetDocument.defaultView);
     }
   }, [elementRef, targetDocument]);

package/lib/hooks/useFocusWithin.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","useFluent_unstable","useFluent","applyFocusWithinPolyfill","useFocusWithin","targetDocument","elementRef","useRef","useEffect","defaultView","current"],"sources":["../../src/hooks/useFocusWithin.ts"],"sourcesContent":["import * as React from 'react';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { applyFocusWithinPolyfill } from '../focus/focusWithinPolyfill';\n\n/**\n * A ponyfill that allows `:focus-within` to support visibility based on keyboard/mouse navigation\n * like `:focus-visible` https://github.com/WICG/focus-visible/issues/151\n * @returns ref to the element that uses `:focus-within` styles\n */\nexport function useFocusWithin<TElement extends HTMLElement = HTMLElement>() {\n  const { targetDocument } = useFluent();\n  const elementRef = React.useRef<TElement>(null);\n\n  React.useEffect(() => {\n    if (targetDocument?.defaultView && elementRef.current) {\n      return applyFocusWithinPolyfill(elementRef.current, targetDocument.defaultView);\n    }\n  }, [elementRef, targetDocument]);\n\n  return elementRef;\n}\n"],"mappings":"AAAA,YAAYA,KAAA,MAAW;AACvB,SAASC,kBAAA,IAAsBC,SAAS,QAAQ;AAChD,SAASC,wBAAwB,QAAQ;AAEzC;;;;;AAKA,OAAO,SAASC,eAAA,EAA6D;EAC3E,MAAM;IAAEC;EAAc,CAAE,GAAGH,SAAA;EAC3B,MAAMI,UAAA,GAAaN,KAAA,CAAMO,MAAM,CAAW,IAAI;EAE9CP,KAAA,CAAMQ,SAAS,CAAC,MAAM;IACpB,IAAIH,cAAA,EAAgBI,WAAA,IAAeH,UAAA,CAAWI,OAAO,EAAE;MACrD,OAAOP,wBAAA,CAAyBG,UAAA,CAAWI,OAAO,EAAEL,cAAA,CAAeI,WAAW;IAChF;EACF,GAAG,CAACH,UAAA,EAAYD,cAAA,CAAe;EAE/B,OAAOC,UAAA;AACT"}
+{"version":3,"names":["React","useFluent_unstable","useFluent","applyFocusWithinPolyfill","useFocusWithin","targetDocument","elementRef","useRef","useEffect","defaultView","current"],"sources":["../../../../../../../../packages/react-components/react-tabster/src/hooks/useFocusWithin.ts"],"sourcesContent":["import * as React from 'react';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { applyFocusWithinPolyfill } from '../focus/focusWithinPolyfill';\n\n/**\n * A ponyfill that allows `:focus-within` to support visibility based on keyboard/mouse navigation\n * like `:focus-visible` https://github.com/WICG/focus-visible/issues/151\n * @returns ref to the element that uses `:focus-within` styles\n */\nexport function useFocusWithin<TElement extends HTMLElement = HTMLElement>() {\n  const { targetDocument } = useFluent();\n  const elementRef = React.useRef<TElement>(null);\n\n  React.useEffect(() => {\n    if (targetDocument?.defaultView && elementRef.current) {\n      return applyFocusWithinPolyfill(elementRef.current, targetDocument.defaultView);\n    }\n  }, [elementRef, targetDocument]);\n\n  return elementRef;\n}\n"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,kBAAkB,IAAIC,SAAS,QAAQ,iCAAiC;AACjF,SAASC,wBAAwB,QAAQ,8BAA8B;AAEvE;;;;;AAKA,OAAM,SAAUC,cAAcA,CAAA;EAC5B,MAAM;IAAEC;EAAc,CAAE,GAAGH,SAAS,EAAE;EACtC,MAAMI,UAAU,GAAGN,KAAK,CAACO,MAAM,CAAW,IAAI,CAAC;EAE/CP,KAAK,CAACQ,SAAS,CAAC,MAAK;IACnB,IAAI,CAAAH,cAAc,aAAdA,cAAc,uBAAdA,cAAc,CAAEI,WAAW,KAAIH,UAAU,CAACI,OAAO,EAAE;MACrD,OAAOP,wBAAwB,CAACG,UAAU,CAACI,OAAO,EAAEL,cAAc,CAACI,WAAW,CAAC;;EAEnF,CAAC,EAAE,CAACH,UAAU,EAAED,cAAc,CAAC,CAAC;EAEhC,OAAOC,UAAU;AACnB"}

package/lib/hooks/useFocusableGroup.js

@@ -1,6 +1,6 @@
-import { Types, getGroupper } from "tabster";
-import { useTabsterAttributes } from "./useTabsterAttributes";
-import { useTabster } from "./useTabster";
+import { Types, getGroupper } from 'tabster';
+import { useTabsterAttributes } from './useTabsterAttributes';
+import { useTabster } from './useTabster';
 /**
  * A hook that returns the necessary tabster attributes to support groupping.
  * @param options - Options to configure keyboard navigation
@@ -12,17 +12,17 @@ export const useFocusableGroup = options => {
   }
   return useTabsterAttributes({
     groupper: {
-      tabbability: getTabbability(options?.tabBehavior)
+      tabbability: getTabbability(options === null || options === void 0 ? void 0 : options.tabBehavior)
     }
   });
 };
 const getTabbability = tabBehavior => {
   switch (tabBehavior) {
-    case "unlimited":
+    case 'unlimited':
       return Types.GroupperTabbabilities.Unlimited;
-    case "limited":
+    case 'limited':
       return Types.GroupperTabbabilities.Limited;
-    case "limited-trap-focus":
+    case 'limited-trap-focus':
       return Types.GroupperTabbabilities.LimitedTrapFocus;
     default:
       return undefined;

package/lib/hooks/useFocusableGroup.js.map

@@ -1 +1 @@
-{"version":3,"names":["Types","getGroupper","useTabsterAttributes","useTabster","useFocusableGroup","options","tabster","groupper","tabbability","getTabbability","tabBehavior","GroupperTabbabilities","Unlimited","Limited","LimitedTrapFocus","undefined"],"sources":["../../src/hooks/useFocusableGroup.ts"],"sourcesContent":["import { Types, getGroupper } from 'tabster';\nimport { useTabsterAttributes } from './useTabsterAttributes';\nimport { useTabster } from './useTabster';\n\nexport interface UseFocusableGroupOptions {\n  /**\n   * Behavior for the Tab key.\n   */\n  tabBehavior?: 'unlimited' | 'limited' | 'limited-trap-focus';\n}\n\n/**\n * A hook that returns the necessary tabster attributes to support groupping.\n * @param options - Options to configure keyboard navigation\n */\nexport const useFocusableGroup = (options?: UseFocusableGroupOptions): Types.TabsterDOMAttribute => {\n  const tabster = useTabster();\n\n  if (tabster) {\n    getGroupper(tabster);\n  }\n\n  return useTabsterAttributes({\n    groupper: {\n      tabbability: getTabbability(options?.tabBehavior),\n    },\n  });\n};\n\nconst getTabbability = (\n  tabBehavior?: UseFocusableGroupOptions['tabBehavior'],\n): Types.GroupperTabbability | undefined => {\n  switch (tabBehavior) {\n    case 'unlimited':\n      return Types.GroupperTabbabilities.Unlimited;\n    case 'limited':\n      return Types.GroupperTabbabilities.Limited;\n    case 'limited-trap-focus':\n      return Types.GroupperTabbabilities.LimitedTrapFocus;\n    default:\n      return undefined;\n  }\n};\n"],"mappings":"AAAA,SAASA,KAAK,EAAEC,WAAW,QAAQ;AACnC,SAASC,oBAAoB,QAAQ;AACrC,SAASC,UAAU,QAAQ;AAS3B;;;;AAIA,OAAO,MAAMC,iBAAA,GAAqBC,OAAA,IAAkE;EAClG,MAAMC,OAAA,GAAUH,UAAA;EAEhB,IAAIG,OAAA,EAAS;IACXL,WAAA,CAAYK,OAAA;EACd;EAEA,OAAOJ,oBAAA,CAAqB;IAC1BK,QAAA,EAAU;MACRC,WAAA,EAAaC,cAAA,CAAeJ,OAAA,EAASK,WAAA;IACvC;EACF;AACF;AAEA,MAAMD,cAAA,GACJC,WAAA,IAC0C;EAC1C,QAAQA,WAAA;IACN,KAAK;MACH,OAAOV,KAAA,CAAMW,qBAAqB,CAACC,SAAS;IAC9C,KAAK;MACH,OAAOZ,KAAA,CAAMW,qBAAqB,CAACE,OAAO;IAC5C,KAAK;MACH,OAAOb,KAAA,CAAMW,qBAAqB,CAACG,gBAAgB;IACrD;MACE,OAAOC,SAAA;EAAA;AAEb"}
+{"version":3,"names":["Types","getGroupper","useTabsterAttributes","useTabster","useFocusableGroup","options","tabster","groupper","tabbability","getTabbability","tabBehavior","GroupperTabbabilities","Unlimited","Limited","LimitedTrapFocus","undefined"],"sources":["../../../../../../../../packages/react-components/react-tabster/src/hooks/useFocusableGroup.ts"],"sourcesContent":["import { Types, getGroupper } from 'tabster';\nimport { useTabsterAttributes } from './useTabsterAttributes';\nimport { useTabster } from './useTabster';\n\nexport interface UseFocusableGroupOptions {\n  /**\n   * Behavior for the Tab key.\n   */\n  tabBehavior?: 'unlimited' | 'limited' | 'limited-trap-focus';\n}\n\n/**\n * A hook that returns the necessary tabster attributes to support groupping.\n * @param options - Options to configure keyboard navigation\n */\nexport const useFocusableGroup = (options?: UseFocusableGroupOptions): Types.TabsterDOMAttribute => {\n  const tabster = useTabster();\n\n  if (tabster) {\n    getGroupper(tabster);\n  }\n\n  return useTabsterAttributes({\n    groupper: {\n      tabbability: getTabbability(options?.tabBehavior),\n    },\n  });\n};\n\nconst getTabbability = (\n  tabBehavior?: UseFocusableGroupOptions['tabBehavior'],\n): Types.GroupperTabbability | undefined => {\n  switch (tabBehavior) {\n    case 'unlimited':\n      return Types.GroupperTabbabilities.Unlimited;\n    case 'limited':\n      return Types.GroupperTabbabilities.Limited;\n    case 'limited-trap-focus':\n      return Types.GroupperTabbabilities.LimitedTrapFocus;\n    default:\n      return undefined;\n  }\n};\n"],"mappings":"AAAA,SAASA,KAAK,EAAEC,WAAW,QAAQ,SAAS;AAC5C,SAASC,oBAAoB,QAAQ,wBAAwB;AAC7D,SAASC,UAAU,QAAQ,cAAc;AASzC;;;;AAIA,OAAO,MAAMC,iBAAiB,GAAIC,OAAkC,IAA+B;EACjG,MAAMC,OAAO,GAAGH,UAAU,EAAE;EAE5B,IAAIG,OAAO,EAAE;IACXL,WAAW,CAACK,OAAO,CAAC;;EAGtB,OAAOJ,oBAAoB,CAAC;IAC1BK,QAAQ,EAAE;MACRC,WAAW,EAAEC,cAAc,CAACJ,OAAO,aAAPA,OAAO,uBAAPA,OAAO,CAAEK,WAAW;;GAEnD,CAAC;AACJ,CAAC;AAED,MAAMD,cAAc,GAClBC,WAAqD,IACZ;EACzC,QAAQA,WAAW;IACjB,KAAK,WAAW;MACd,OAAOV,KAAK,CAACW,qBAAqB,CAACC,SAAS;IAC9C,KAAK,SAAS;MACZ,OAAOZ,KAAK,CAACW,qBAAqB,CAACE,OAAO;IAC5C,KAAK,oBAAoB;MACvB,OAAOb,KAAK,CAACW,qBAAqB,CAACG,gBAAgB;IACrD;MACE,OAAOC,SAAS;EAAC;AAEvB,CAAC"}

package/lib/hooks/useKeyboardNavAttribute.js

@@ -1,7 +1,7 @@
-import { createKeyborg } from "keyborg";
-import { useEffect, useMemo, useRef } from "react";
-import { KEYBOARD_NAV_ATTRIBUTE } from "../focus/constants";
-import { useFluent_unstable as useFluent } from "@fluentui/react-shared-contexts";
+import { createKeyborg } from 'keyborg';
+import { useEffect, useMemo, useRef } from 'react';
+import { KEYBOARD_NAV_ATTRIBUTE } from '../focus/constants';
+import { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';
 /**
  * Instantiates [keyborg](https://github.com/microsoft/keyborg) and adds `data-keyboard-nav`
  * attribute to a referenced element to ensure keyboard navigation awareness
@@ -30,7 +30,7 @@ function setBooleanAttribute(elementRef, attribute, value) {
     return;
   }
   if (value) {
-    elementRef.current.setAttribute(attribute, "");
+    elementRef.current.setAttribute(attribute, '');
   } else {
     elementRef.current.removeAttribute(attribute);
   }

package/lib/hooks/useKeyboardNavAttribute.js.map

@@ -1 +1 @@
-{"version":3,"names":["createKeyborg","useEffect","useMemo","useRef","KEYBOARD_NAV_ATTRIBUTE","useFluent_unstable","useFluent","useKeyboardNavAttribute","targetDocument","keyborg","defaultView","ref","setBooleanAttribute","isNavigatingWithKeyboard","cb","next","subscribe","unsubscribe","elementRef","attribute","value","current","setAttribute","removeAttribute"],"sources":["../../src/hooks/useKeyboardNavAttribute.ts"],"sourcesContent":["import { createKeyborg } from 'keyborg';\nimport { useEffect, useMemo, useRef } from 'react';\nimport { KEYBOARD_NAV_ATTRIBUTE } from '../focus/constants';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport type { KeyborgCallback } from 'keyborg';\nimport type { RefObject } from 'react';\n\n/**\n * Instantiates [keyborg](https://github.com/microsoft/keyborg) and adds `data-keyboard-nav`\n * attribute to a referenced element to ensure keyboard navigation awareness\n * synced to keyborg logic without having to cause a re-render on react tree.\n */\nexport function useKeyboardNavAttribute<E extends HTMLElement>() {\n  const { targetDocument } = useFluent();\n  const keyborg = useMemo(() => targetDocument && createKeyborg(targetDocument.defaultView!), [targetDocument]);\n  const ref = useRef<E>(null);\n  useEffect(() => {\n    if (keyborg) {\n      setBooleanAttribute(ref, KEYBOARD_NAV_ATTRIBUTE, keyborg.isNavigatingWithKeyboard());\n      const cb: KeyborgCallback = next => {\n        setBooleanAttribute(ref, KEYBOARD_NAV_ATTRIBUTE, next);\n      };\n      keyborg.subscribe(cb);\n      return () => keyborg.unsubscribe(cb);\n    }\n  }, [keyborg]);\n  return ref;\n}\n\nfunction setBooleanAttribute(elementRef: RefObject<HTMLElement>, attribute: string, value: boolean) {\n  if (!elementRef.current) {\n    return;\n  }\n  if (value) {\n    elementRef.current.setAttribute(attribute, '');\n  } else {\n    elementRef.current.removeAttribute(attribute);\n  }\n}\n"],"mappings":"AAAA,SAASA,aAAa,QAAQ;AAC9B,SAASC,SAAS,EAAEC,OAAO,EAAEC,MAAM,QAAQ;AAC3C,SAASC,sBAAsB,QAAQ;AACvC,SAASC,kBAAA,IAAsBC,SAAS,QAAQ;AAIhD;;;;;AAKA,OAAO,SAASC,wBAAA,EAAiD;EAC/D,MAAM;IAAEC;EAAc,CAAE,GAAGF,SAAA;EAC3B,MAAMG,OAAA,GAAUP,OAAA,CAAQ,MAAMM,cAAA,IAAkBR,aAAA,CAAcQ,cAAA,CAAeE,WAAW,GAAI,CAACF,cAAA,CAAe;EAC5G,MAAMG,GAAA,GAAMR,MAAA,CAAU,IAAI;EAC1BF,SAAA,CAAU,MAAM;IACd,IAAIQ,OAAA,EAAS;MACXG,mBAAA,CAAoBD,GAAA,EAAKP,sBAAA,EAAwBK,OAAA,CAAQI,wBAAwB;MACjF,MAAMC,EAAA,GAAsBC,IAAA,IAAQ;QAClCH,mBAAA,CAAoBD,GAAA,EAAKP,sBAAA,EAAwBW,IAAA;MACnD;MACAN,OAAA,CAAQO,SAAS,CAACF,EAAA;MAClB,OAAO,MAAML,OAAA,CAAQQ,WAAW,CAACH,EAAA;IACnC;EACF,GAAG,CAACL,OAAA,CAAQ;EACZ,OAAOE,GAAA;AACT;AAEA,SAASC,oBAAoBM,UAAkC,EAAEC,SAAiB,EAAEC,KAAc,EAAE;EAClG,IAAI,CAACF,UAAA,CAAWG,OAAO,EAAE;IACvB;EACF;EACA,IAAID,KAAA,EAAO;IACTF,UAAA,CAAWG,OAAO,CAACC,YAAY,CAACH,SAAA,EAAW;EAC7C,OAAO;IACLD,UAAA,CAAWG,OAAO,CAACE,eAAe,CAACJ,SAAA;EACrC;AACF"}
+{"version":3,"names":["createKeyborg","useEffect","useMemo","useRef","KEYBOARD_NAV_ATTRIBUTE","useFluent_unstable","useFluent","useKeyboardNavAttribute","targetDocument","keyborg","defaultView","ref","setBooleanAttribute","isNavigatingWithKeyboard","cb","next","subscribe","unsubscribe","elementRef","attribute","value","current","setAttribute","removeAttribute"],"sources":["../../../../../../../../packages/react-components/react-tabster/src/hooks/useKeyboardNavAttribute.ts"],"sourcesContent":["import { createKeyborg } from 'keyborg';\nimport { useEffect, useMemo, useRef } from 'react';\nimport { KEYBOARD_NAV_ATTRIBUTE } from '../focus/constants';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport type { KeyborgCallback } from 'keyborg';\nimport type { RefObject } from 'react';\n\n/**\n * Instantiates [keyborg](https://github.com/microsoft/keyborg) and adds `data-keyboard-nav`\n * attribute to a referenced element to ensure keyboard navigation awareness\n * synced to keyborg logic without having to cause a re-render on react tree.\n */\nexport function useKeyboardNavAttribute<E extends HTMLElement>() {\n  const { targetDocument } = useFluent();\n  const keyborg = useMemo(() => targetDocument && createKeyborg(targetDocument.defaultView!), [targetDocument]);\n  const ref = useRef<E>(null);\n  useEffect(() => {\n    if (keyborg) {\n      setBooleanAttribute(ref, KEYBOARD_NAV_ATTRIBUTE, keyborg.isNavigatingWithKeyboard());\n      const cb: KeyborgCallback = next => {\n        setBooleanAttribute(ref, KEYBOARD_NAV_ATTRIBUTE, next);\n      };\n      keyborg.subscribe(cb);\n      return () => keyborg.unsubscribe(cb);\n    }\n  }, [keyborg]);\n  return ref;\n}\n\nfunction setBooleanAttribute(elementRef: RefObject<HTMLElement>, attribute: string, value: boolean) {\n  if (!elementRef.current) {\n    return;\n  }\n  if (value) {\n    elementRef.current.setAttribute(attribute, '');\n  } else {\n    elementRef.current.removeAttribute(attribute);\n  }\n}\n"],"mappings":"AAAA,SAASA,aAAa,QAAQ,SAAS;AACvC,SAASC,SAAS,EAAEC,OAAO,EAAEC,MAAM,QAAQ,OAAO;AAClD,SAASC,sBAAsB,QAAQ,oBAAoB;AAC3D,SAASC,kBAAkB,IAAIC,SAAS,QAAQ,iCAAiC;AAIjF;;;;;AAKA,OAAM,SAAUC,uBAAuBA,CAAA;EACrC,MAAM;IAAEC;EAAc,CAAE,GAAGF,SAAS,EAAE;EACtC,MAAMG,OAAO,GAAGP,OAAO,CAAC,MAAMM,cAAc,IAAIR,aAAa,CAACQ,cAAc,CAACE,WAAY,CAAC,EAAE,CAACF,cAAc,CAAC,CAAC;EAC7G,MAAMG,GAAG,GAAGR,MAAM,CAAI,IAAI,CAAC;EAC3BF,SAAS,CAAC,MAAK;IACb,IAAIQ,OAAO,EAAE;MACXG,mBAAmB,CAACD,GAAG,EAAEP,sBAAsB,EAAEK,OAAO,CAACI,wBAAwB,EAAE,CAAC;MACpF,MAAMC,EAAE,GAAoBC,IAAI,IAAG;QACjCH,mBAAmB,CAACD,GAAG,EAAEP,sBAAsB,EAAEW,IAAI,CAAC;MACxD,CAAC;MACDN,OAAO,CAACO,SAAS,CAACF,EAAE,CAAC;MACrB,OAAO,MAAML,OAAO,CAACQ,WAAW,CAACH,EAAE,CAAC;;EAExC,CAAC,EAAE,CAACL,OAAO,CAAC,CAAC;EACb,OAAOE,GAAG;AACZ;AAEA,SAASC,mBAAmBA,CAACM,UAAkC,EAAEC,SAAiB,EAAEC,KAAc;EAChG,IAAI,CAACF,UAAU,CAACG,OAAO,EAAE;IACvB;;EAEF,IAAID,KAAK,EAAE;IACTF,UAAU,CAACG,OAAO,CAACC,YAAY,CAACH,SAAS,EAAE,EAAE,CAAC;GAC/C,MAAM;IACLD,UAAU,CAACG,OAAO,CAACE,eAAe,CAACJ,SAAS,CAAC;;AAEjD"}

package/lib/hooks/useModalAttributes.js

@@ -1,7 +1,7 @@
-import { useId } from "@fluentui/react-utilities";
-import { useTabsterAttributes } from "./useTabsterAttributes";
-import { getDeloser, getModalizer } from "tabster";
-import { useTabster } from "./useTabster";
+import { useId } from '@fluentui/react-utilities';
+import { useTabsterAttributes } from './useTabsterAttributes';
+import { getDeloser, getModalizer } from 'tabster';
+import { useTabster } from './useTabster';
 /**
  * Applies modal dialog behaviour through DOM attributes
  * Modal element will focus trap and hide other content on the page
@@ -21,7 +21,7 @@ export const useModalAttributes = (options = {}) => {
     getModalizer(tabster);
     getDeloser(tabster);
   }
-  const id = useId("modal-", options.id);
+  const id = useId('modal-', options.id);
   const modalAttributes = useTabsterAttributes({
     deloser: {},
     modalizer: {

package/lib/hooks/useModalAttributes.js.map

@@ -1 +1 @@
-{"version":3,"names":["useId","useTabsterAttributes","getDeloser","getModalizer","useTabster","useModalAttributes","options","trapFocus","alwaysFocusable","legacyTrapFocus","tabster","id","modalAttributes","deloser","modalizer","isOthersAccessible","isAlwaysAccessible","isTrapped","triggerAttributes"],"sources":["../../src/hooks/useModalAttributes.ts"],"sourcesContent":["import { useId } from '@fluentui/react-utilities';\nimport { useTabsterAttributes } from './useTabsterAttributes';\nimport { getDeloser, getModalizer, Types as TabsterTypes } from 'tabster';\nimport { useTabster } from './useTabster';\n\nexport interface UseModalAttributesOptions {\n  /**\n   * Traps focus inside the elements the attributes are applied.\n   * Prefer this to `legacyTrapFocus`\n   * it forbids users to tab out of the focus trap into the actual browser.\n   */\n  trapFocus?: boolean;\n\n  /**\n   * Traps focus inside the elements the attributes are applied.\n   * This prop enables legacy behavior to match previous versions of Fluent and is not\n   * recommended for general use.\n   * Enabling `legacyTrapFocus` prevents users from tabbing out of the focus trap and into\n   * the actual browser. Prefer using `trapFocus` instead of this prop.\n   */\n  legacyTrapFocus?: boolean;\n\n  /**\n   * Always reachabled in Tab order\n   */\n  alwaysFocusable?: boolean;\n\n  /**\n   * Id to use for the modalizer. An id will be generated if not provided.\n   */\n  id?: string;\n}\n\n/**\n * Applies modal dialog behaviour through DOM attributes\n * Modal element will focus trap and hide other content on the page\n * The trigger element will be focused if focus is lost after the modal element is removed\n *\n * @returns DOM attributes to apply to the modal element and its trigger\n */\nexport const useModalAttributes = (\n  options: UseModalAttributesOptions = {},\n): { modalAttributes: TabsterTypes.TabsterDOMAttribute; triggerAttributes: TabsterTypes.TabsterDOMAttribute } => {\n  const { trapFocus, alwaysFocusable, legacyTrapFocus } = options;\n  const tabster = useTabster();\n  // Initializes the modalizer and deloser APIs\n  if (tabster) {\n    getModalizer(tabster);\n    getDeloser(tabster);\n  }\n\n  const id = useId('modal-', options.id);\n  const modalAttributes = useTabsterAttributes({\n    deloser: {},\n    modalizer: {\n      id,\n      isOthersAccessible: !trapFocus,\n      isAlwaysAccessible: alwaysFocusable,\n      isTrapped: legacyTrapFocus && trapFocus,\n    },\n  });\n\n  const triggerAttributes = useTabsterAttributes({\n    deloser: {},\n  });\n\n  return { modalAttributes, triggerAttributes };\n};\n"],"mappings":"AAAA,SAASA,KAAK,QAAQ;AACtB,SAASC,oBAAoB,QAAQ;AACrC,SAASC,UAAU,EAAEC,YAAY,QAA+B;AAChE,SAASC,UAAU,QAAQ;AA8B3B;;;;;;;AAOA,OAAO,MAAMC,kBAAA,GAAqBA,CAChCC,OAAA,GAAqC,CAAC,CAAC,KACwE;EAC/G,MAAM;IAAEC,SAAA;IAAWC,eAAA;IAAiBC;EAAe,CAAE,GAAGH,OAAA;EACxD,MAAMI,OAAA,GAAUN,UAAA;EAChB;EACA,IAAIM,OAAA,EAAS;IACXP,YAAA,CAAaO,OAAA;IACbR,UAAA,CAAWQ,OAAA;EACb;EAEA,MAAMC,EAAA,GAAKX,KAAA,CAAM,UAAUM,OAAA,CAAQK,EAAE;EACrC,MAAMC,eAAA,GAAkBX,oBAAA,CAAqB;IAC3CY,OAAA,EAAS,CAAC;IACVC,SAAA,EAAW;MACTH,EAAA;MACAI,kBAAA,EAAoB,CAACR,SAAA;MACrBS,kBAAA,EAAoBR,eAAA;MACpBS,SAAA,EAAWR,eAAA,IAAmBF;IAChC;EACF;EAEA,MAAMW,iBAAA,GAAoBjB,oBAAA,CAAqB;IAC7CY,OAAA,EAAS,CAAC;EACZ;EAEA,OAAO;IAAED,eAAA;IAAiBM;EAAkB;AAC9C"}
+{"version":3,"names":["useId","useTabsterAttributes","getDeloser","getModalizer","useTabster","useModalAttributes","options","trapFocus","alwaysFocusable","legacyTrapFocus","tabster","id","modalAttributes","deloser","modalizer","isOthersAccessible","isAlwaysAccessible","isTrapped","triggerAttributes"],"sources":["../../../../../../../../packages/react-components/react-tabster/src/hooks/useModalAttributes.ts"],"sourcesContent":["import { useId } from '@fluentui/react-utilities';\nimport { useTabsterAttributes } from './useTabsterAttributes';\nimport { getDeloser, getModalizer, Types as TabsterTypes } from 'tabster';\nimport { useTabster } from './useTabster';\n\nexport interface UseModalAttributesOptions {\n  /**\n   * Traps focus inside the elements the attributes are applied.\n   * Prefer this to `legacyTrapFocus`\n   * it forbids users to tab out of the focus trap into the actual browser.\n   */\n  trapFocus?: boolean;\n\n  /**\n   * Traps focus inside the elements the attributes are applied.\n   * This prop enables legacy behavior to match previous versions of Fluent and is not\n   * recommended for general use.\n   * Enabling `legacyTrapFocus` prevents users from tabbing out of the focus trap and into\n   * the actual browser. Prefer using `trapFocus` instead of this prop.\n   */\n  legacyTrapFocus?: boolean;\n\n  /**\n   * Always reachabled in Tab order\n   */\n  alwaysFocusable?: boolean;\n\n  /**\n   * Id to use for the modalizer. An id will be generated if not provided.\n   */\n  id?: string;\n}\n\n/**\n * Applies modal dialog behaviour through DOM attributes\n * Modal element will focus trap and hide other content on the page\n * The trigger element will be focused if focus is lost after the modal element is removed\n *\n * @returns DOM attributes to apply to the modal element and its trigger\n */\nexport const useModalAttributes = (\n  options: UseModalAttributesOptions = {},\n): { modalAttributes: TabsterTypes.TabsterDOMAttribute; triggerAttributes: TabsterTypes.TabsterDOMAttribute } => {\n  const { trapFocus, alwaysFocusable, legacyTrapFocus } = options;\n  const tabster = useTabster();\n  // Initializes the modalizer and deloser APIs\n  if (tabster) {\n    getModalizer(tabster);\n    getDeloser(tabster);\n  }\n\n  const id = useId('modal-', options.id);\n  const modalAttributes = useTabsterAttributes({\n    deloser: {},\n    modalizer: {\n      id,\n      isOthersAccessible: !trapFocus,\n      isAlwaysAccessible: alwaysFocusable,\n      isTrapped: legacyTrapFocus && trapFocus,\n    },\n  });\n\n  const triggerAttributes = useTabsterAttributes({\n    deloser: {},\n  });\n\n  return { modalAttributes, triggerAttributes };\n};\n"],"mappings":"AAAA,SAASA,KAAK,QAAQ,2BAA2B;AACjD,SAASC,oBAAoB,QAAQ,wBAAwB;AAC7D,SAASC,UAAU,EAAEC,YAAY,QAA+B,SAAS;AACzE,SAASC,UAAU,QAAQ,cAAc;AA8BzC;;;;;;;AAOA,OAAO,MAAMC,kBAAkB,GAAGA,CAChCC,OAAA,GAAqC,EAAE,KACuE;EAC9G,MAAM;IAAEC,SAAS;IAAEC,eAAe;IAAEC;EAAe,CAAE,GAAGH,OAAO;EAC/D,MAAMI,OAAO,GAAGN,UAAU,EAAE;EAC5B;EACA,IAAIM,OAAO,EAAE;IACXP,YAAY,CAACO,OAAO,CAAC;IACrBR,UAAU,CAACQ,OAAO,CAAC;;EAGrB,MAAMC,EAAE,GAAGX,KAAK,CAAC,QAAQ,EAAEM,OAAO,CAACK,EAAE,CAAC;EACtC,MAAMC,eAAe,GAAGX,oBAAoB,CAAC;IAC3CY,OAAO,EAAE,EAAE;IACXC,SAAS,EAAE;MACTH,EAAE;MACFI,kBAAkB,EAAE,CAACR,SAAS;MAC9BS,kBAAkB,EAAER,eAAe;MACnCS,SAAS,EAAER,eAAe,IAAIF;;GAEjC,CAAC;EAEF,MAAMW,iBAAiB,GAAGjB,oBAAoB,CAAC;IAC7CY,OAAO,EAAE;GACV,CAAC;EAEF,OAAO;IAAED,eAAe;IAAEM;EAAiB,CAAE;AAC/C,CAAC"}

package/lib/hooks/useTabster.js

@@ -1,7 +1,7 @@
-import * as React from "react";
-import { useFluent_unstable as useFluent } from "@fluentui/react-shared-contexts";
-import { createTabster, disposeTabster } from "tabster";
-import { useIsomorphicLayoutEffect } from "@fluentui/react-utilities";
+import * as React from 'react';
+import { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';
+import { createTabster, disposeTabster } from 'tabster';
+import { useIsomorphicLayoutEffect } from '@fluentui/react-utilities';
 /**
  * Tries to get a tabster instance on the current window or creates a new one
  * Since Tabster is single instance only, feel free to call this hook to ensure Tabster exists if necessary
@@ -13,7 +13,7 @@ export const useTabster = () => {
   const {
     targetDocument
   } = useFluent();
-  const defaultView = targetDocument?.defaultView || undefined;
+  const defaultView = (targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.defaultView) || undefined;
   const tabster = React.useMemo(() => {
     if (!defaultView) {
       return null;

package/lib/hooks/useTabster.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","useFluent_unstable","useFluent","createTabster","disposeTabster","useIsomorphicLayoutEffect","useTabster","targetDocument","defaultView","undefined","tabster","useMemo","autoRoot","controlTab"],"sources":["../../src/hooks/useTabster.ts"],"sourcesContent":["import * as React from 'react';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { createTabster, disposeTabster, Types as TabsterTypes } from 'tabster';\nimport { useIsomorphicLayoutEffect } from '@fluentui/react-utilities';\n\n/**\n * Tries to get a tabster instance on the current window or creates a new one\n * Since Tabster is single instance only, feel free to call this hook to ensure Tabster exists if necessary\n *\n * @internal\n * @returns Tabster core instance\n */\nexport const useTabster = (): TabsterTypes.TabsterCore | null => {\n  const { targetDocument } = useFluent();\n\n  const defaultView = targetDocument?.defaultView || undefined;\n  const tabster = React.useMemo(() => {\n    if (!defaultView) {\n      return null;\n    }\n\n    return createTabster(defaultView, { autoRoot: {}, controlTab: false });\n  }, [defaultView]);\n\n  useIsomorphicLayoutEffect(() => {\n    return () => {\n      if (tabster) {\n        disposeTabster(tabster);\n      }\n    };\n  }, [tabster]);\n\n  return tabster;\n};\n"],"mappings":"AAAA,YAAYA,KAAA,MAAW;AACvB,SAASC,kBAAA,IAAsBC,SAAS,QAAQ;AAChD,SAASC,aAAa,EAAEC,cAAc,QAA+B;AACrE,SAASC,yBAAyB,QAAQ;AAE1C;;;;;;;AAOA,OAAO,MAAMC,UAAA,GAAaA,CAAA,KAAuC;EAC/D,MAAM;IAAEC;EAAc,CAAE,GAAGL,SAAA;EAE3B,MAAMM,WAAA,GAAcD,cAAA,EAAgBC,WAAA,IAAeC,SAAA;EACnD,MAAMC,OAAA,GAAUV,KAAA,CAAMW,OAAO,CAAC,MAAM;IAClC,IAAI,CAACH,WAAA,EAAa;MAChB,OAAO,IAAI;IACb;IAEA,OAAOL,aAAA,CAAcK,WAAA,EAAa;MAAEI,QAAA,EAAU,CAAC;MAAGC,UAAA,EAAY;IAAM;EACtE,GAAG,CAACL,WAAA,CAAY;EAEhBH,yBAAA,CAA0B,MAAM;IAC9B,OAAO,MAAM;MACX,IAAIK,OAAA,EAAS;QACXN,cAAA,CAAeM,OAAA;MACjB;IACF;EACF,GAAG,CAACA,OAAA,CAAQ;EAEZ,OAAOA,OAAA;AACT"}
+{"version":3,"names":["React","useFluent_unstable","useFluent","createTabster","disposeTabster","useIsomorphicLayoutEffect","useTabster","targetDocument","defaultView","undefined","tabster","useMemo","autoRoot","controlTab"],"sources":["../../../../../../../../packages/react-components/react-tabster/src/hooks/useTabster.ts"],"sourcesContent":["import * as React from 'react';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { createTabster, disposeTabster, Types as TabsterTypes } from 'tabster';\nimport { useIsomorphicLayoutEffect } from '@fluentui/react-utilities';\n\n/**\n * Tries to get a tabster instance on the current window or creates a new one\n * Since Tabster is single instance only, feel free to call this hook to ensure Tabster exists if necessary\n *\n * @internal\n * @returns Tabster core instance\n */\nexport const useTabster = (): TabsterTypes.TabsterCore | null => {\n  const { targetDocument } = useFluent();\n\n  const defaultView = targetDocument?.defaultView || undefined;\n  const tabster = React.useMemo(() => {\n    if (!defaultView) {\n      return null;\n    }\n\n    return createTabster(defaultView, { autoRoot: {}, controlTab: false });\n  }, [defaultView]);\n\n  useIsomorphicLayoutEffect(() => {\n    return () => {\n      if (tabster) {\n        disposeTabster(tabster);\n      }\n    };\n  }, [tabster]);\n\n  return tabster;\n};\n"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,kBAAkB,IAAIC,SAAS,QAAQ,iCAAiC;AACjF,SAASC,aAAa,EAAEC,cAAc,QAA+B,SAAS;AAC9E,SAASC,yBAAyB,QAAQ,2BAA2B;AAErE;;;;;;;AAOA,OAAO,MAAMC,UAAU,GAAGA,CAAA,KAAsC;EAC9D,MAAM;IAAEC;EAAc,CAAE,GAAGL,SAAS,EAAE;EAEtC,MAAMM,WAAW,GAAG,CAAAD,cAAc,aAAdA,cAAc,uBAAdA,cAAc,CAAEC,WAAW,KAAIC,SAAS;EAC5D,MAAMC,OAAO,GAAGV,KAAK,CAACW,OAAO,CAAC,MAAK;IACjC,IAAI,CAACH,WAAW,EAAE;MAChB,OAAO,IAAI;;IAGb,OAAOL,aAAa,CAACK,WAAW,EAAE;MAAEI,QAAQ,EAAE,EAAE;MAAEC,UAAU,EAAE;IAAK,CAAE,CAAC;EACxE,CAAC,EAAE,CAACL,WAAW,CAAC,CAAC;EAEjBH,yBAAyB,CAAC,MAAK;IAC7B,OAAO,MAAK;MACV,IAAIK,OAAO,EAAE;QACXN,cAAc,CAACM,OAAO,CAAC;;IAE3B,CAAC;EACH,CAAC,EAAE,CAACA,OAAO,CAAC,CAAC;EAEb,OAAOA,OAAO;AAChB,CAAC"}

package/lib/hooks/useTabsterAttributes.js

@@ -1,5 +1,5 @@
-import { getTabsterAttribute } from "tabster";
-import { useTabster } from "./useTabster";
+import { getTabsterAttribute } from 'tabster';
+import { useTabster } from './useTabster';
 /**
  * @internal
  * Hook that returns tabster attributes while ensuring tabster exists

package/lib/hooks/useTabsterAttributes.js.map

@@ -1 +1 @@
-{"version":3,"names":["getTabsterAttribute","useTabster","useTabsterAttributes","props"],"sources":["../../src/hooks/useTabsterAttributes.ts"],"sourcesContent":["import { getTabsterAttribute, Types as TabsterTypes } from 'tabster';\nimport { useTabster } from './useTabster';\n\n/**\n * @internal\n * Hook that returns tabster attributes while ensuring tabster exists\n */\nexport const useTabsterAttributes = (props: TabsterTypes.TabsterAttributeProps): TabsterTypes.TabsterDOMAttribute => {\n  // A tabster instance is not necessary to generate tabster attributes\n  // but calling the hook will ensure that a tabster instance exists internally and avoids consumers doing the same\n  useTabster();\n\n  return getTabsterAttribute(props);\n};\n"],"mappings":"AAAA,SAASA,mBAAmB,QAA+B;AAC3D,SAASC,UAAU,QAAQ;AAE3B;;;;AAIA,OAAO,MAAMC,oBAAA,GAAwBC,KAAA,IAAgF;EACnH;EACA;EACAF,UAAA;EAEA,OAAOD,mBAAA,CAAoBG,KAAA;AAC7B"}
+{"version":3,"names":["getTabsterAttribute","useTabster","useTabsterAttributes","props"],"sources":["../../../../../../../../packages/react-components/react-tabster/src/hooks/useTabsterAttributes.ts"],"sourcesContent":["import { getTabsterAttribute, Types as TabsterTypes } from 'tabster';\nimport { useTabster } from './useTabster';\n\n/**\n * @internal\n * Hook that returns tabster attributes while ensuring tabster exists\n */\nexport const useTabsterAttributes = (props: TabsterTypes.TabsterAttributeProps): TabsterTypes.TabsterDOMAttribute => {\n  // A tabster instance is not necessary to generate tabster attributes\n  // but calling the hook will ensure that a tabster instance exists internally and avoids consumers doing the same\n  useTabster();\n\n  return getTabsterAttribute(props);\n};\n"],"mappings":"AAAA,SAASA,mBAAmB,QAA+B,SAAS;AACpE,SAASC,UAAU,QAAQ,cAAc;AAEzC;;;;AAIA,OAAO,MAAMC,oBAAoB,GAAIC,KAAyC,IAAsC;EAClH;EACA;EACAF,UAAU,EAAE;EAEZ,OAAOD,mBAAmB,CAACG,KAAK,CAAC;AACnC,CAAC"}

package/lib/index.js

@@ -1,4 +1,4 @@
-export { useArrowNavigationGroup, useFocusableGroup, useFocusFinders, useFocusVisible, useFocusWithin, useKeyboardNavAttribute, useModalAttributes, useTabsterAttributes } from "./hooks/index";
-export { createCustomFocusIndicatorStyle, createFocusOutlineStyle } from "./focus/index";
-export { applyFocusVisiblePolyfill } from "./focus/index";
+export { useArrowNavigationGroup, useFocusableGroup, useFocusFinders, useFocusVisible, useFocusWithin, useKeyboardNavAttribute, useModalAttributes, useTabsterAttributes } from './hooks/index';
+export { createCustomFocusIndicatorStyle, createFocusOutlineStyle } from './focus/index';
+export { applyFocusVisiblePolyfill } from './focus/index';
 //# sourceMappingURL=index.js.map

package/lib/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["useArrowNavigationGroup","useFocusableGroup","useFocusFinders","useFocusVisible","useFocusWithin","useKeyboardNavAttribute","useModalAttributes","useTabsterAttributes","createCustomFocusIndicatorStyle","createFocusOutlineStyle","applyFocusVisiblePolyfill"],"sources":["../src/index.ts"],"sourcesContent":["export {\n  useArrowNavigationGroup,\n  useFocusableGroup,\n  useFocusFinders,\n  useFocusVisible,\n  useFocusWithin,\n  useKeyboardNavAttribute,\n  useModalAttributes,\n  useTabsterAttributes,\n} from './hooks/index';\nexport type {\n  UseArrowNavigationGroupOptions,\n  UseFocusableGroupOptions,\n  UseModalAttributesOptions,\n} from './hooks/index';\n\nexport { createCustomFocusIndicatorStyle, createFocusOutlineStyle } from './focus/index';\n\nexport type {\n  CreateCustomFocusIndicatorStyleOptions,\n  CreateFocusOutlineStyleOptions,\n  FocusOutlineOffset,\n  FocusOutlineStyleOptions,\n} from './focus/index';\n\nexport { applyFocusVisiblePolyfill } from './focus/index';\n"],"mappings":"AAAA,SACEA,uBAAuB,EACvBC,iBAAiB,EACjBC,eAAe,EACfC,eAAe,EACfC,cAAc,EACdC,uBAAuB,EACvBC,kBAAkB,EAClBC,oBAAoB,QACf;AAOP,SAASC,+BAA+B,EAAEC,uBAAuB,QAAQ;AASzE,SAASC,yBAAyB,QAAQ"}
+{"version":3,"names":["useArrowNavigationGroup","useFocusableGroup","useFocusFinders","useFocusVisible","useFocusWithin","useKeyboardNavAttribute","useModalAttributes","useTabsterAttributes","createCustomFocusIndicatorStyle","createFocusOutlineStyle","applyFocusVisiblePolyfill"],"sources":["../../../../../../../packages/react-components/react-tabster/src/index.ts"],"sourcesContent":["export {\n  useArrowNavigationGroup,\n  useFocusableGroup,\n  useFocusFinders,\n  useFocusVisible,\n  useFocusWithin,\n  useKeyboardNavAttribute,\n  useModalAttributes,\n  useTabsterAttributes,\n} from './hooks/index';\nexport type {\n  UseArrowNavigationGroupOptions,\n  UseFocusableGroupOptions,\n  UseModalAttributesOptions,\n} from './hooks/index';\n\nexport { createCustomFocusIndicatorStyle, createFocusOutlineStyle } from './focus/index';\n\nexport type {\n  CreateCustomFocusIndicatorStyleOptions,\n  CreateFocusOutlineStyleOptions,\n  FocusOutlineOffset,\n  FocusOutlineStyleOptions,\n} from './focus/index';\n\nexport { applyFocusVisiblePolyfill } from './focus/index';\n"],"mappings":"AAAA,SACEA,uBAAuB,EACvBC,iBAAiB,EACjBC,eAAe,EACfC,eAAe,EACfC,cAAc,EACdC,uBAAuB,EACvBC,kBAAkB,EAClBC,oBAAoB,QACf,eAAe;AAOtB,SAASC,+BAA+B,EAAEC,uBAAuB,QAAQ,eAAe;AASxF,SAASC,yBAAyB,QAAQ,eAAe"}

package/lib-commonjs/focus/constants.js

@@ -1,27 +1,21 @@
 "use strict";
+
 Object.defineProperty(exports, "__esModule", {
-    value: true
-});
-function _export(target, all) {
-    for(var name in all)Object.defineProperty(target, name, {
-        enumerable: true,
-        get: all[name]
-    });
-}
-_export(exports, {
-    KEYBOARD_NAV_ATTRIBUTE: ()=>KEYBOARD_NAV_ATTRIBUTE,
-    KEYBOARD_NAV_SELECTOR: ()=>KEYBOARD_NAV_SELECTOR,
-    FOCUS_VISIBLE_ATTR: ()=>FOCUS_VISIBLE_ATTR,
-    FOCUS_WITHIN_ATTR: ()=>FOCUS_WITHIN_ATTR,
-    defaultOptions: ()=>defaultOptions
+  value: true
 });
-const KEYBOARD_NAV_ATTRIBUTE = "data-keyboard-nav";
-const KEYBOARD_NAV_SELECTOR = `:global([${KEYBOARD_NAV_ATTRIBUTE}])`;
-const FOCUS_VISIBLE_ATTR = "data-fui-focus-visible";
-const FOCUS_WITHIN_ATTR = "data-fui-focus-within";
-const defaultOptions = {
-    style: {},
-    selector: "focus"
-}; //# sourceMappingURL=constants.js.map
-
+exports.defaultOptions = exports.FOCUS_WITHIN_ATTR = exports.FOCUS_VISIBLE_ATTR = exports.KEYBOARD_NAV_SELECTOR = exports.KEYBOARD_NAV_ATTRIBUTE = void 0;
+exports.KEYBOARD_NAV_ATTRIBUTE = 'data-keyboard-nav';
+exports.KEYBOARD_NAV_SELECTOR = `:global([${exports.KEYBOARD_NAV_ATTRIBUTE}])`;
+/**
+ * @internal
+ */
+exports.FOCUS_VISIBLE_ATTR = 'data-fui-focus-visible';
+/**
+ * @internal
+ */
+exports.FOCUS_WITHIN_ATTR = 'data-fui-focus-within';
+exports.defaultOptions = {
+  style: {},
+  selector: 'focus'
+};
 //# sourceMappingURL=constants.js.map

package/lib-commonjs/focus/constants.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../lib/focus/constants.js"],"sourcesContent":["export const KEYBOARD_NAV_ATTRIBUTE = \"data-keyboard-nav\";\nexport const KEYBOARD_NAV_SELECTOR = `:global([${KEYBOARD_NAV_ATTRIBUTE}])`;\n/**\n * @internal\n */\nexport const FOCUS_VISIBLE_ATTR = \"data-fui-focus-visible\";\n/**\n * @internal\n */\nexport const FOCUS_WITHIN_ATTR = \"data-fui-focus-within\";\nexport const defaultOptions = {\n  style: {},\n  selector: \"focus\"\n};\n//# sourceMappingURL=constants.js.map"],"names":["KEYBOARD_NAV_ATTRIBUTE","KEYBOARD_NAV_SELECTOR","FOCUS_VISIBLE_ATTR","FOCUS_WITHIN_ATTR","defaultOptions","style","selector"],"mappings":";;;;;;;;;;;IAAaA,sBAAsB,MAAtBA;IACAC,qBAAqB,MAArBA;IAIAC,kBAAkB,MAAlBA;IAIAC,iBAAiB,MAAjBA;IACAC,cAAc,MAAdA;;AAVN,MAAMJ,yBAAyB;AAC/B,MAAMC,wBAAwB,CAAC,SAAS,EAAED,uBAAuB,EAAE,CAAC;AAIpE,MAAME,qBAAqB;AAI3B,MAAMC,oBAAoB;AAC1B,MAAMC,iBAAiB;IAC5BC,OAAO,CAAC;IACRC,UAAU;AACZ,GACA,qCAAqC"}
+{"version":3,"names":["exports","KEYBOARD_NAV_ATTRIBUTE","KEYBOARD_NAV_SELECTOR","FOCUS_VISIBLE_ATTR","FOCUS_WITHIN_ATTR","defaultOptions","style","selector"],"sources":["../../../../../../../../packages/react-components/react-tabster/src/focus/constants.ts"],"sourcesContent":["export const KEYBOARD_NAV_ATTRIBUTE = 'data-keyboard-nav' as const;\nexport const KEYBOARD_NAV_SELECTOR = `:global([${KEYBOARD_NAV_ATTRIBUTE}])` as const;\n\n/**\n * @internal\n */\nexport const FOCUS_VISIBLE_ATTR = 'data-fui-focus-visible';\n\n/**\n * @internal\n */\nexport const FOCUS_WITHIN_ATTR = 'data-fui-focus-within';\nexport const defaultOptions = {\n  style: {},\n  selector: 'focus',\n} as const;\n"],"mappings":";;;;;;AAAaA,OAAA,CAAAC,sBAAsB,GAAG,mBAA4B;AACrDD,OAAA,CAAAE,qBAAqB,GAAG,YAAYF,OAAA,CAAAC,sBAAsB,IAAa;AAEpF;;;AAGaD,OAAA,CAAAG,kBAAkB,GAAG,wBAAwB;AAE1D;;;AAGaH,OAAA,CAAAI,iBAAiB,GAAG,uBAAuB;AAC3CJ,OAAA,CAAAK,cAAc,GAAG;EAC5BC,KAAK,EAAE,EAAE;EACTC,QAAQ,EAAE;CACF"}

package/lib-commonjs/focus/createCustomFocusIndicatorStyle.js

@@ -1,27 +1,35 @@
 "use strict";
+
 Object.defineProperty(exports, "__esModule", {
-    value: true
-});
-Object.defineProperty(exports, "createCustomFocusIndicatorStyle", {
-    enumerable: true,
-    get: ()=>createCustomFocusIndicatorStyle
+  value: true
 });
-const _constants = require("./constants");
-function createCustomFocusIndicatorStyle(style, { selector =_constants.defaultOptions.selector , enableOutline =false  } = _constants.defaultOptions) {
-    return {
-        ":focus": {
-            outlineStyle: enableOutline ? undefined : "none"
-        },
-        ":focus-visible": {
-            outlineStyle: enableOutline ? undefined : "none"
-        },
-        ...selector === "focus" && {
-            [`&[${_constants.FOCUS_VISIBLE_ATTR}]`]: style
-        },
-        ...selector === "focus-within" && {
-            [`&[${_constants.FOCUS_WITHIN_ATTR}]:${selector}`]: style
-        }
-    };
-} //# sourceMappingURL=createCustomFocusIndicatorStyle.js.map
-
+exports.createCustomFocusIndicatorStyle = void 0;
+const constants_1 = /*#__PURE__*/require("./constants");
+/**
+ * Creates a style for @see makeStyles that includes the necessary selectors for focus.
+ * Should be used only when @see createFocusOutlineStyle does not fit requirements
+ *
+ * @param style - styling applied on focus, defaults to @see getDefaultFocusOutlineStyles
+ * @param options - Configure the style of the focus outline
+ */
+function createCustomFocusIndicatorStyle(style, {
+  selector = constants_1.defaultOptions.selector,
+  enableOutline = false
+} = constants_1.defaultOptions) {
+  return {
+    ':focus': {
+      outlineStyle: enableOutline ? undefined : 'none'
+    },
+    ':focus-visible': {
+      outlineStyle: enableOutline ? undefined : 'none'
+    },
+    ...(selector === 'focus' && {
+      [`&[${constants_1.FOCUS_VISIBLE_ATTR}]`]: style
+    }),
+    ...(selector === 'focus-within' && {
+      [`&[${constants_1.FOCUS_WITHIN_ATTR}]:${selector}`]: style
+    })
+  };
+}
+exports.createCustomFocusIndicatorStyle = createCustomFocusIndicatorStyle;
 //# sourceMappingURL=createCustomFocusIndicatorStyle.js.map

package/lib-commonjs/focus/createCustomFocusIndicatorStyle.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../lib/focus/createCustomFocusIndicatorStyle.js"],"sourcesContent":["import { defaultOptions, FOCUS_VISIBLE_ATTR, FOCUS_WITHIN_ATTR } from \"./constants\";\n/**\n * Creates a style for @see makeStyles that includes the necessary selectors for focus.\n * Should be used only when @see createFocusOutlineStyle does not fit requirements\n *\n * @param style - styling applied on focus, defaults to @see getDefaultFocusOutlineStyles\n * @param options - Configure the style of the focus outline\n */\nexport function createCustomFocusIndicatorStyle(style, {\n  selector = defaultOptions.selector,\n  enableOutline = false\n} = defaultOptions) {\n  return {\n    \":focus\": {\n      outlineStyle: enableOutline ? undefined : \"none\"\n    },\n    \":focus-visible\": {\n      outlineStyle: enableOutline ? undefined : \"none\"\n    },\n    ...(selector === \"focus\" && {\n      [`&[${FOCUS_VISIBLE_ATTR}]`]: style\n    }),\n    ...(selector === \"focus-within\" && {\n      [`&[${FOCUS_WITHIN_ATTR}]:${selector}`]: style\n    })\n  };\n}\n//# sourceMappingURL=createCustomFocusIndicatorStyle.js.map"],"names":["createCustomFocusIndicatorStyle","style","selector","defaultOptions","enableOutline","outlineStyle","undefined","FOCUS_VISIBLE_ATTR","FOCUS_WITHIN_ATTR"],"mappings":";;;;+BAQgBA;;aAAAA;;2BARsD;AAQ/D,SAASA,gCAAgCC,KAAK,EAAE,EACrDC,UAAWC,yBAAc,CAACD,QAAQ,CAAA,EAClCE,eAAgB,KAAK,CAAA,EACtB,GAAGD,yBAAc,EAAE;IAClB,OAAO;QACL,UAAU;YACRE,cAAcD,gBAAgBE,YAAY,MAAM;QAClD;QACA,kBAAkB;YAChBD,cAAcD,gBAAgBE,YAAY,MAAM;QAClD;QACA,GAAIJ,aAAa,WAAW;YAC1B,CAAC,CAAC,EAAE,EAAEK,6BAAkB,CAAC,CAAC,CAAC,CAAC,EAAEN;QAChC,CAAC;QACD,GAAIC,aAAa,kBAAkB;YACjC,CAAC,CAAC,EAAE,EAAEM,4BAAiB,CAAC,EAAE,EAAEN,SAAS,CAAC,CAAC,EAAED;QAC3C,CAAC;IACH;AACF,EACA,2DAA2D"}
+{"version":3,"names":["constants_1","require","createCustomFocusIndicatorStyle","style","selector","defaultOptions","enableOutline","outlineStyle","undefined","FOCUS_VISIBLE_ATTR","FOCUS_WITHIN_ATTR","exports"],"sources":["../../../../../../../../packages/react-components/react-tabster/src/focus/createCustomFocusIndicatorStyle.ts"],"sourcesContent":["import { defaultOptions, FOCUS_VISIBLE_ATTR, FOCUS_WITHIN_ATTR } from './constants';\nimport { makeResetStyles } from '@griffel/react';\nimport type { GriffelStyle } from '@griffel/react';\n\n// TODO: Use the type directly from @griffel/react\n// https://github.com/microsoft/griffel/pull/278\ntype GriffelResetStyle = Parameters<typeof makeResetStyles>[0];\n\nexport interface CreateCustomFocusIndicatorStyleOptions {\n  /**\n   * Control if the indicator appears when the corresponding element is focused,\n   * or any child is focused within the corresponding element.\n   * @default 'focus'\n   */\n  selector?: 'focus' | 'focus-within';\n  /**\n   * Enables the browser default outline style\n   * @default false\n   */\n  enableOutline?: boolean;\n}\n\n/**\n * Creates a style for @see makeStyles that includes the necessary selectors for focus.\n * Should be used only when @see createFocusOutlineStyle does not fit requirements\n *\n * @param style - styling applied on focus, defaults to @see getDefaultFocusOutlineStyles\n * @param options - Configure the style of the focus outline\n */\nexport function createCustomFocusIndicatorStyle<TStyle extends GriffelStyle | GriffelResetStyle>(\n  style: TStyle,\n  {\n    selector = defaultOptions.selector,\n    enableOutline = false,\n  }: CreateCustomFocusIndicatorStyleOptions = defaultOptions,\n): TStyle extends GriffelStyle ? GriffelStyle : GriffelResetStyle {\n  return {\n    ':focus': {\n      outlineStyle: enableOutline ? undefined : 'none',\n    },\n    ':focus-visible': {\n      outlineStyle: enableOutline ? undefined : 'none',\n    },\n\n    ...(selector === 'focus' && {\n      [`&[${FOCUS_VISIBLE_ATTR}]`]: style,\n    }),\n    ...(selector === 'focus-within' && {\n      [`&[${FOCUS_WITHIN_ATTR}]:${selector}`]: style,\n    }),\n  };\n}\n"],"mappings":";;;;;;AAAA,MAAAA,WAAA,gBAAAC,OAAA;AAsBA;;;;;;;AAOA,SAAgBC,+BAA+BA,CAC7CC,KAAa,EACb;EACEC,QAAQ,GAAGJ,WAAA,CAAAK,cAAc,CAACD,QAAQ;EAClCE,aAAa,GAAG;AAAK,IACqBN,WAAA,CAAAK,cAAc;EAE1D,OAAO;IACL,QAAQ,EAAE;MACRE,YAAY,EAAED,aAAa,GAAGE,SAAS,GAAG;KAC3C;IACD,gBAAgB,EAAE;MAChBD,YAAY,EAAED,aAAa,GAAGE,SAAS,GAAG;KAC3C;IAED,IAAIJ,QAAQ,KAAK,OAAO,IAAI;MAC1B,CAAC,KAAKJ,WAAA,CAAAS,kBAAkB,GAAG,GAAGN;KAC/B,CAAC;IACF,IAAIC,QAAQ,KAAK,cAAc,IAAI;MACjC,CAAC,KAAKJ,WAAA,CAAAU,iBAAiB,KAAKN,QAAQ,EAAE,GAAGD;KAC1C;GACF;AACH;AAtBAQ,OAAA,CAAAT,+BAAA,GAAAA,+BAAA"}

package/lib-commonjs/focus/createFocusOutlineStyle.js

@@ -1,53 +1,68 @@
 "use strict";
+
 Object.defineProperty(exports, "__esModule", {
-    value: true
-});
-Object.defineProperty(exports, "createFocusOutlineStyle", {
-    enumerable: true,
-    get: ()=>createFocusOutlineStyle
+  value: true
 });
-const _reactTheme = require("@fluentui/react-theme");
-const _react = require("@griffel/react");
-const _createCustomFocusIndicatorStyle = require("./createCustomFocusIndicatorStyle");
-const _constants = require("./constants");
+exports.createFocusOutlineStyle = void 0;
+const react_theme_1 = /*#__PURE__*/require("@fluentui/react-theme");
+const react_1 = /*#__PURE__*/require("@griffel/react");
+const createCustomFocusIndicatorStyle_1 = /*#__PURE__*/require("./createCustomFocusIndicatorStyle");
+const constants_1 = /*#__PURE__*/require("./constants");
 /**
  * NOTE: the element with the focus outline needs to have `position: relative` so that the
  * pseudo element can be properly positioned.
  *
  * @param options - Configures the style of the focus outline
  * @returns focus outline styles object
- */ const getFocusOutlineStyles = (options)=>{
-    const { outlineRadius , outlineColor , outlineOffset , outlineWidth  } = options;
-    const outlineOffsetTop = outlineOffset?.top || outlineOffset;
-    const outlineOffsetBottom = outlineOffset?.bottom || outlineOffset;
-    const outlineOffsetLeft = outlineOffset?.left || outlineOffset;
-    const outlineOffsetRight = outlineOffset?.right || outlineOffset;
-    return {
-        ..._react.shorthands.borderColor("transparent"),
-        "::after": {
-            content: '""',
-            position: "absolute",
-            pointerEvents: "none",
-            zIndex: 1,
-            ..._react.shorthands.borderStyle("solid"),
-            ..._react.shorthands.borderWidth(outlineWidth),
-            ..._react.shorthands.borderRadius(outlineRadius),
-            ..._react.shorthands.borderColor(outlineColor),
-            top: !outlineOffset ? `-${outlineWidth}` : `calc(0px - ${outlineWidth} - ${outlineOffsetTop})`,
-            bottom: !outlineOffset ? `-${outlineWidth}` : `calc(0px - ${outlineWidth} - ${outlineOffsetBottom})`,
-            left: !outlineOffset ? `-${outlineWidth}` : `calc(0px - ${outlineWidth} - ${outlineOffsetLeft})`,
-            right: !outlineOffset ? `-${outlineWidth}` : `calc(0px - ${outlineWidth} - ${outlineOffsetRight})`
-        }
-    };
+ */
+const getFocusOutlineStyles = options => {
+  var _a, _b, _c, _d;
+  const {
+    outlineRadius,
+    outlineColor,
+    outlineOffset,
+    outlineWidth
+  } = options;
+  const outlineOffsetTop = ((_a = outlineOffset) === null || _a === void 0 ? void 0 : _a.top) || outlineOffset;
+  const outlineOffsetBottom = ((_b = outlineOffset) === null || _b === void 0 ? void 0 : _b.bottom) || outlineOffset;
+  const outlineOffsetLeft = ((_c = outlineOffset) === null || _c === void 0 ? void 0 : _c.left) || outlineOffset;
+  const outlineOffsetRight = ((_d = outlineOffset) === null || _d === void 0 ? void 0 : _d.right) || outlineOffset;
+  return {
+    ...react_1.shorthands.borderColor('transparent'),
+    '::after': {
+      content: '""',
+      position: 'absolute',
+      pointerEvents: 'none',
+      zIndex: 1,
+      ...react_1.shorthands.borderStyle('solid'),
+      ...react_1.shorthands.borderWidth(outlineWidth),
+      ...react_1.shorthands.borderRadius(outlineRadius),
+      ...react_1.shorthands.borderColor(outlineColor),
+      top: !outlineOffset ? `-${outlineWidth}` : `calc(0px - ${outlineWidth} - ${outlineOffsetTop})`,
+      bottom: !outlineOffset ? `-${outlineWidth}` : `calc(0px - ${outlineWidth} - ${outlineOffsetBottom})`,
+      left: !outlineOffset ? `-${outlineWidth}` : `calc(0px - ${outlineWidth} - ${outlineOffsetLeft})`,
+      right: !outlineOffset ? `-${outlineWidth}` : `calc(0px - ${outlineWidth} - ${outlineOffsetRight})`
+    }
+  };
 };
-const createFocusOutlineStyle = ({ selector =_constants.defaultOptions.selector , style =_constants.defaultOptions.style  } = _constants.defaultOptions)=>(0, _createCustomFocusIndicatorStyle.createCustomFocusIndicatorStyle)(getFocusOutlineStyles({
-        outlineColor: _reactTheme.tokens.colorStrokeFocus2,
-        outlineRadius: _reactTheme.tokens.borderRadiusMedium,
-        // FIXME: tokens.strokeWidthThick causes some weird bugs
-        outlineWidth: "2px",
-        ...style
-    }), {
-        selector
-    }); //# sourceMappingURL=createFocusOutlineStyle.js.map
-
+/**
+ * NOTE: The element with the focus outline needs to have `position: relative` so that the
+ * pseudo element can be properly positioned.
+ *
+ * @param options - Configure the style of the focus outline
+ * @returns focus outline styles object for @see makeStyles
+ */
+const createFocusOutlineStyle = ({
+  selector = constants_1.defaultOptions.selector,
+  style = constants_1.defaultOptions.style
+} = constants_1.defaultOptions) => createCustomFocusIndicatorStyle_1.createCustomFocusIndicatorStyle(getFocusOutlineStyles({
+  outlineColor: react_theme_1.tokens.colorStrokeFocus2,
+  outlineRadius: react_theme_1.tokens.borderRadiusMedium,
+  // FIXME: tokens.strokeWidthThick causes some weird bugs
+  outlineWidth: '2px',
+  ...style
+}), {
+  selector
+});
+exports.createFocusOutlineStyle = createFocusOutlineStyle;
 //# sourceMappingURL=createFocusOutlineStyle.js.map

package/lib-commonjs/focus/createFocusOutlineStyle.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../lib/focus/createFocusOutlineStyle.js"],"sourcesContent":["import { tokens } from \"@fluentui/react-theme\";\nimport { shorthands } from \"@griffel/react\";\nimport { createCustomFocusIndicatorStyle } from \"./createCustomFocusIndicatorStyle\";\nimport { defaultOptions } from \"./constants\";\n/**\n * NOTE: the element with the focus outline needs to have `position: relative` so that the\n * pseudo element can be properly positioned.\n *\n * @param options - Configures the style of the focus outline\n * @returns focus outline styles object\n */\nconst getFocusOutlineStyles = options => {\n  const {\n    outlineRadius,\n    outlineColor,\n    outlineOffset,\n    outlineWidth\n  } = options;\n  const outlineOffsetTop = outlineOffset?.top || outlineOffset;\n  const outlineOffsetBottom = outlineOffset?.bottom || outlineOffset;\n  const outlineOffsetLeft = outlineOffset?.left || outlineOffset;\n  const outlineOffsetRight = outlineOffset?.right || outlineOffset;\n  return {\n    ...shorthands.borderColor(\"transparent\"),\n    \"::after\": {\n      content: '\"\"',\n      position: \"absolute\",\n      pointerEvents: \"none\",\n      zIndex: 1,\n      ...shorthands.borderStyle(\"solid\"),\n      ...shorthands.borderWidth(outlineWidth),\n      ...shorthands.borderRadius(outlineRadius),\n      ...shorthands.borderColor(outlineColor),\n      top: !outlineOffset ? `-${outlineWidth}` : `calc(0px - ${outlineWidth} - ${outlineOffsetTop})`,\n      bottom: !outlineOffset ? `-${outlineWidth}` : `calc(0px - ${outlineWidth} - ${outlineOffsetBottom})`,\n      left: !outlineOffset ? `-${outlineWidth}` : `calc(0px - ${outlineWidth} - ${outlineOffsetLeft})`,\n      right: !outlineOffset ? `-${outlineWidth}` : `calc(0px - ${outlineWidth} - ${outlineOffsetRight})`\n    }\n  };\n};\n/**\n * NOTE: The element with the focus outline needs to have `position: relative` so that the\n * pseudo element can be properly positioned.\n *\n * @param options - Configure the style of the focus outline\n * @returns focus outline styles object for @see makeStyles\n */\nexport const createFocusOutlineStyle = ({\n  selector = defaultOptions.selector,\n  style = defaultOptions.style\n} = defaultOptions) => createCustomFocusIndicatorStyle(getFocusOutlineStyles({\n  outlineColor: tokens.colorStrokeFocus2,\n  outlineRadius: tokens.borderRadiusMedium,\n  // FIXME: tokens.strokeWidthThick causes some weird bugs\n  outlineWidth: \"2px\",\n  ...style\n}), {\n  selector\n});\n//# sourceMappingURL=createFocusOutlineStyle.js.map"],"names":["createFocusOutlineStyle","getFocusOutlineStyles","options","outlineRadius","outlineColor","outlineOffset","outlineWidth","outlineOffsetTop","top","outlineOffsetBottom","bottom","outlineOffsetLeft","left","outlineOffsetRight","right","shorthands","borderColor","content","position","pointerEvents","zIndex","borderStyle","borderWidth","borderRadius","selector","defaultOptions","style","createCustomFocusIndicatorStyle","tokens","colorStrokeFocus2","borderRadiusMedium"],"mappings":";;;;+BA+CaA;;aAAAA;;4BA/CU;uBACI;iDACqB;2BACjB;AAC/B;;;;;;CAMC,GACD,MAAMC,wBAAwBC,CAAAA,UAAW;IACvC,MAAM,EACJC,cAAa,EACbC,aAAY,EACZC,cAAa,EACbC,aAAY,EACb,GAAGJ;IACJ,MAAMK,mBAAmBF,eAAeG,OAAOH;IAC/C,MAAMI,sBAAsBJ,eAAeK,UAAUL;IACrD,MAAMM,oBAAoBN,eAAeO,QAAQP;IACjD,MAAMQ,qBAAqBR,eAAeS,SAAST;IACnD,OAAO;QACL,GAAGU,iBAAU,CAACC,WAAW,CAAC,cAAc;QACxC,WAAW;YACTC,SAAS;YACTC,UAAU;YACVC,eAAe;YACfC,QAAQ;YACR,GAAGL,iBAAU,CAACM,WAAW,CAAC,QAAQ;YAClC,GAAGN,iBAAU,CAACO,WAAW,CAAChB,aAAa;YACvC,GAAGS,iBAAU,CAACQ,YAAY,CAACpB,cAAc;YACzC,GAAGY,iBAAU,CAACC,WAAW,CAACZ,aAAa;YACvCI,KAAK,CAACH,gBAAgB,CAAC,CAAC,EAAEC,aAAa,CAAC,GAAG,CAAC,WAAW,EAAEA,aAAa,GAAG,EAAEC,iBAAiB,CAAC,CAAC;YAC9FG,QAAQ,CAACL,gBAAgB,CAAC,CAAC,EAAEC,aAAa,CAAC,GAAG,CAAC,WAAW,EAAEA,aAAa,GAAG,EAAEG,oBAAoB,CAAC,CAAC;YACpGG,MAAM,CAACP,gBAAgB,CAAC,CAAC,EAAEC,aAAa,CAAC,GAAG,CAAC,WAAW,EAAEA,aAAa,GAAG,EAAEK,kBAAkB,CAAC,CAAC;YAChGG,OAAO,CAACT,gBAAgB,CAAC,CAAC,EAAEC,aAAa,CAAC,GAAG,CAAC,WAAW,EAAEA,aAAa,GAAG,EAAEO,mBAAmB,CAAC,CAAC;QACpG;IACF;AACF;AAQO,MAAMb,0BAA0B,CAAC,EACtCwB,UAAWC,yBAAc,CAACD,QAAQ,CAAA,EAClCE,OAAQD,yBAAc,CAACC,KAAK,CAAA,EAC7B,GAAGD,yBAAc,GAAKE,IAAAA,gEAA+B,EAAC1B,sBAAsB;QAC3EG,cAAcwB,kBAAM,CAACC,iBAAiB;QACtC1B,eAAeyB,kBAAM,CAACE,kBAAkB;QACxC,wDAAwD;QACxDxB,cAAc;QACd,GAAGoB,KAAK;IACV,IAAI;QACFF;IACF,IACA,mDAAmD"}
+{"version":3,"names":["react_theme_1","require","react_1","createCustomFocusIndicatorStyle_1","constants_1","getFocusOutlineStyles","options","outlineRadius","outlineColor","outlineOffset","outlineWidth","outlineOffsetTop","_a","top","outlineOffsetBottom","_b","bottom","outlineOffsetLeft","_c","left","outlineOffsetRight","_d","right","shorthands","borderColor","content","position","pointerEvents","zIndex","borderStyle","borderWidth","borderRadius","createFocusOutlineStyle","selector","defaultOptions","style","createCustomFocusIndicatorStyle","tokens","colorStrokeFocus2","borderRadiusMedium","exports"],"sources":["../../../../../../../../packages/react-components/react-tabster/src/focus/createFocusOutlineStyle.ts"],"sourcesContent":["import { tokens } from '@fluentui/react-theme';\nimport { shorthands } from '@griffel/react';\nimport type { GriffelStyle } from '@griffel/react';\nimport {\n  createCustomFocusIndicatorStyle,\n  CreateCustomFocusIndicatorStyleOptions,\n} from './createCustomFocusIndicatorStyle';\nimport { defaultOptions } from './constants';\n\nexport type FocusOutlineOffset = Record<'top' | 'bottom' | 'left' | 'right', string>;\nexport type FocusOutlineStyleOptions = {\n  /**\n   * Only property not supported by the native CSS `outline`, if this is no longer needed\n   * we can just go native instead\n   */\n  outlineRadius: string;\n  outlineColor: string;\n  outlineWidth: string;\n  outlineOffset?: string | FocusOutlineOffset;\n};\nexport interface CreateFocusOutlineStyleOptions extends CreateCustomFocusIndicatorStyleOptions {\n  style?: Partial<FocusOutlineStyleOptions>;\n}\n\n/**\n * NOTE: the element with the focus outline needs to have `position: relative` so that the\n * pseudo element can be properly positioned.\n *\n * @param options - Configures the style of the focus outline\n * @returns focus outline styles object\n */\nconst getFocusOutlineStyles = (options: FocusOutlineStyleOptions): GriffelStyle => {\n  const { outlineRadius, outlineColor, outlineOffset, outlineWidth } = options;\n\n  const outlineOffsetTop = (outlineOffset as FocusOutlineOffset)?.top || outlineOffset;\n  const outlineOffsetBottom = (outlineOffset as FocusOutlineOffset)?.bottom || outlineOffset;\n  const outlineOffsetLeft = (outlineOffset as FocusOutlineOffset)?.left || outlineOffset;\n  const outlineOffsetRight = (outlineOffset as FocusOutlineOffset)?.right || outlineOffset;\n\n  return {\n    ...shorthands.borderColor('transparent'),\n    '::after': {\n      content: '\"\"',\n      position: 'absolute',\n      pointerEvents: 'none',\n      zIndex: 1,\n\n      ...shorthands.borderStyle('solid'),\n      ...shorthands.borderWidth(outlineWidth),\n      ...shorthands.borderRadius(outlineRadius),\n      ...shorthands.borderColor(outlineColor),\n\n      top: !outlineOffset ? `-${outlineWidth}` : `calc(0px - ${outlineWidth} - ${outlineOffsetTop})`,\n      bottom: !outlineOffset ? `-${outlineWidth}` : `calc(0px - ${outlineWidth} - ${outlineOffsetBottom})`,\n      left: !outlineOffset ? `-${outlineWidth}` : `calc(0px - ${outlineWidth} - ${outlineOffsetLeft})`,\n      right: !outlineOffset ? `-${outlineWidth}` : `calc(0px - ${outlineWidth} - ${outlineOffsetRight})`,\n    },\n  };\n};\n\n/**\n * NOTE: The element with the focus outline needs to have `position: relative` so that the\n * pseudo element can be properly positioned.\n *\n * @param options - Configure the style of the focus outline\n * @returns focus outline styles object for @see makeStyles\n */\nexport const createFocusOutlineStyle = ({\n  selector = defaultOptions.selector,\n  style = defaultOptions.style,\n}: CreateFocusOutlineStyleOptions = defaultOptions): GriffelStyle =>\n  createCustomFocusIndicatorStyle(\n    getFocusOutlineStyles({\n      outlineColor: tokens.colorStrokeFocus2,\n      outlineRadius: tokens.borderRadiusMedium,\n      // FIXME: tokens.strokeWidthThick causes some weird bugs\n      outlineWidth: '2px',\n      ...style,\n    }),\n    { selector },\n  );\n"],"mappings":";;;;;;AAAA,MAAAA,aAAA,gBAAAC,OAAA;AACA,MAAAC,OAAA,gBAAAD,OAAA;AAEA,MAAAE,iCAAA,gBAAAF,OAAA;AAIA,MAAAG,WAAA,gBAAAH,OAAA;AAiBA;;;;;;;AAOA,MAAMI,qBAAqB,GAAIC,OAAiC,IAAkB;;EAChF,MAAM;IAAEC,aAAa;IAAEC,YAAY;IAAEC,aAAa;IAAEC;EAAY,CAAE,GAAGJ,OAAO;EAE5E,MAAMK,gBAAgB,GAAG,EAAAC,EAAA,GAACH,aAAoC,cAAAG,EAAA,uBAAAA,EAAA,CAAEC,GAAG,KAAIJ,aAAa;EACpF,MAAMK,mBAAmB,GAAG,EAAAC,EAAA,GAACN,aAAoC,cAAAM,EAAA,uBAAAA,EAAA,CAAEC,MAAM,KAAIP,aAAa;EAC1F,MAAMQ,iBAAiB,GAAG,EAAAC,EAAA,GAACT,aAAoC,cAAAS,EAAA,uBAAAA,EAAA,CAAEC,IAAI,KAAIV,aAAa;EACtF,MAAMW,kBAAkB,GAAG,EAAAC,EAAA,GAACZ,aAAoC,cAAAY,EAAA,uBAAAA,EAAA,CAAEC,KAAK,KAAIb,aAAa;EAExF,OAAO;IACL,GAAGP,OAAA,CAAAqB,UAAU,CAACC,WAAW,CAAC,aAAa,CAAC;IACxC,SAAS,EAAE;MACTC,OAAO,EAAE,IAAI;MACbC,QAAQ,EAAE,UAAU;MACpBC,aAAa,EAAE,MAAM;MACrBC,MAAM,EAAE,CAAC;MAET,GAAG1B,OAAA,CAAAqB,UAAU,CAACM,WAAW,CAAC,OAAO,CAAC;MAClC,GAAG3B,OAAA,CAAAqB,UAAU,CAACO,WAAW,CAACpB,YAAY,CAAC;MACvC,GAAGR,OAAA,CAAAqB,UAAU,CAACQ,YAAY,CAACxB,aAAa,CAAC;MACzC,GAAGL,OAAA,CAAAqB,UAAU,CAACC,WAAW,CAAChB,YAAY,CAAC;MAEvCK,GAAG,EAAE,CAACJ,aAAa,GAAG,IAAIC,YAAY,EAAE,GAAG,cAAcA,YAAY,MAAMC,gBAAgB,GAAG;MAC9FK,MAAM,EAAE,CAACP,aAAa,GAAG,IAAIC,YAAY,EAAE,GAAG,cAAcA,YAAY,MAAMI,mBAAmB,GAAG;MACpGK,IAAI,EAAE,CAACV,aAAa,GAAG,IAAIC,YAAY,EAAE,GAAG,cAAcA,YAAY,MAAMO,iBAAiB,GAAG;MAChGK,KAAK,EAAE,CAACb,aAAa,GAAG,IAAIC,YAAY,EAAE,GAAG,cAAcA,YAAY,MAAMU,kBAAkB;;GAElG;AACH,CAAC;AAED;;;;;;;AAOO,MAAMY,uBAAuB,GAAGA,CAAC;EACtCC,QAAQ,GAAG7B,WAAA,CAAA8B,cAAc,CAACD,QAAQ;EAClCE,KAAK,GAAG/B,WAAA,CAAA8B,cAAc,CAACC;AAAK,IACM/B,WAAA,CAAA8B,cAAc,KAChD/B,iCAAA,CAAAiC,+BAA+B,CAC7B/B,qBAAqB,CAAC;EACpBG,YAAY,EAAER,aAAA,CAAAqC,MAAM,CAACC,iBAAiB;EACtC/B,aAAa,EAAEP,aAAA,CAAAqC,MAAM,CAACE,kBAAkB;EACxC;EACA7B,YAAY,EAAE,KAAK;EACnB,GAAGyB;CACJ,CAAC,EACF;EAAEF;AAAQ,CAAE,CACb;AAbUO,OAAA,CAAAR,uBAAuB,GAAAA,uBAAA"}