npm - @fluentui/react-tabster - Versions diffs - 9.26.16 → 9.74.3-experimental.esm.20260709-49ee7a20cf.0 - Mend

@fluentui/react-tabster 9.26.16 → 9.74.3-experimental.esm.20260709-49ee7a20cf.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (114) hide show

package/lib/focus/createCustomFocusIndicatorStyle.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { defaultOptions, FOCUS_VISIBLE_ATTR, FOCUS_WITHIN_ATTR } from './constants';
+import { defaultOptions, FOCUS_VISIBLE_ATTR, FOCUS_WITHIN_ATTR } from "./constants.js";
 /**
  * Creates a style for @see makeStyles that includes the necessary selectors for focus.
  * Should be used only when @see createFocusOutlineStyle does not fit requirements

package/lib/focus/createCustomFocusIndicatorStyle.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/focus/createCustomFocusIndicatorStyle.ts"],"sourcesContent":["import { defaultOptions, FOCUS_VISIBLE_ATTR, FOCUS_WITHIN_ATTR } from './constants';\nimport type { 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 * @alias selectorType\n /\n selector?: 'focus' \| 'focus-within';\n /\n Customizes the selector provided based on the selector type.\n /\n customizeSelector?: (selector: string) => string;\n /\n Enables the browser default outline style\n * @deprecated The custom focus indicator no longer affects outline styles. Outline is overridden\n * in the default focus indicator function, `createFocusOutlineStyle`.\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 If you're using `createCustomFocusIndicatorStyle` instead of `createFocusOutlineStyle`\n * keep in mind that the default outline style is not going to be removed\n * (as it is in `createFocusOutlineStyle`),\n * and is your responsibility to manually remove it from your styles.\n \n @example\n * ```ts\n * // Link styles\n * const useStyles = makeStyles({\n focusIndicator: createCustomFocusIndicatorStyle({\n textDecorationColor: tokens.colorStrokeFocus2,\n textDecorationLine: 'underline',\n textDecorationStyle: 'double',\n outlineStyle: 'none',\n }),\n // Common styles.\n root: {\n // ❗️ DO NOT FORGET TO REMOVE THE DEFAULT OUTLINE STYLE\n ':focus-visible': {\n outlineStyle: 'none',\n },\n * ```\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: selectorType = defaultOptions.selector,\n customizeSelector = defaultOptions.customizeSelector,\n }: CreateCustomFocusIndicatorStyleOptions = defaultOptions,\n): TStyle extends GriffelStyle ? GriffelStyle : GriffelResetStyle {\n return { [customizeSelector(createBaseSelector(selectorType))]: style };\n}\n\nfunction createBaseSelector(selectorType: 'focus' \| 'focus-within'): string {\n switch (selectorType) {\n case 'focus':\n return `&[${FOCUS_VISIBLE_ATTR}]`;\n case 'focus-within':\n return `&[${FOCUS_WITHIN_ATTR}]:focus-within`;\n }\n}\n"],"names":["defaultOptions","FOCUS_VISIBLE_ATTR","FOCUS_WITHIN_ATTR","createCustomFocusIndicatorStyle","style","selector","selectorType","customizeSelector","createBaseSelector"],"mappings":"AAAA,SAASA,cAAc,EAAEC,kBAAkB,EAAEC,iBAAiB,QAAQ,~~cAAc~~;AA4BpF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6BC,GACD,OAAO,SAASC,gCACdC,KAAa,EACb,EACEC,UAAUC,eAAeN,eAAeK,QAAQ,EAChDE,oBAAoBP,eAAeO,iBAAiB,EACb,GAAGP,cAAc;IAE1D,OAAO;QAAE,CAACO,kBAAkBC,mBAAmBF,eAAe,EAAEF;IAAM;AACxE;AAEA,SAASI,mBAAmBF,YAAsC;IAChE,OAAQA;QACN,KAAK;YACH,OAAO,CAAC,EAAE,EAAEL,mBAAmB,CAAC,CAAC;QACnC,KAAK;YACH,OAAO,CAAC,EAAE,EAAEC,kBAAkB,cAAc,CAAC;IACjD;AACF"}
1	+ {"version":3,"sources":["../src/focus/createCustomFocusIndicatorStyle.ts"],"sourcesContent":["import { defaultOptions, FOCUS_VISIBLE_ATTR, FOCUS_WITHIN_ATTR } from './constants';\nimport type { 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 * @alias selectorType\n /\n selector?: 'focus' \| 'focus-within';\n /\n Customizes the selector provided based on the selector type.\n /\n customizeSelector?: (selector: string) => string;\n /\n Enables the browser default outline style\n * @deprecated The custom focus indicator no longer affects outline styles. Outline is overridden\n * in the default focus indicator function, `createFocusOutlineStyle`.\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 If you're using `createCustomFocusIndicatorStyle` instead of `createFocusOutlineStyle`\n * keep in mind that the default outline style is not going to be removed\n * (as it is in `createFocusOutlineStyle`),\n * and is your responsibility to manually remove it from your styles.\n \n @example\n * ```ts\n * // Link styles\n * const useStyles = makeStyles({\n focusIndicator: createCustomFocusIndicatorStyle({\n textDecorationColor: tokens.colorStrokeFocus2,\n textDecorationLine: 'underline',\n textDecorationStyle: 'double',\n outlineStyle: 'none',\n }),\n // Common styles.\n root: {\n // ❗️ DO NOT FORGET TO REMOVE THE DEFAULT OUTLINE STYLE\n ':focus-visible': {\n outlineStyle: 'none',\n },\n * ```\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: selectorType = defaultOptions.selector,\n customizeSelector = defaultOptions.customizeSelector,\n }: CreateCustomFocusIndicatorStyleOptions = defaultOptions,\n): TStyle extends GriffelStyle ? GriffelStyle : GriffelResetStyle {\n return { [customizeSelector(createBaseSelector(selectorType))]: style };\n}\n\nfunction createBaseSelector(selectorType: 'focus' \| 'focus-within'): string {\n switch (selectorType) {\n case 'focus':\n return `&[${FOCUS_VISIBLE_ATTR}]`;\n case 'focus-within':\n return `&[${FOCUS_WITHIN_ATTR}]:focus-within`;\n }\n}\n"],"names":["defaultOptions","FOCUS_VISIBLE_ATTR","FOCUS_WITHIN_ATTR","createCustomFocusIndicatorStyle","style","selector","selectorType","customizeSelector","createBaseSelector"],"mappings":"AAAA,SAASA,cAAc,EAAEC,kBAAkB,EAAEC,iBAAiB,QAAQ,iBAAc;AA4BpF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6BC,GACD,OAAO,SAASC,gCACdC,KAAa,EACb,EACEC,UAAUC,eAAeN,eAAeK,QAAQ,EAChDE,oBAAoBP,eAAeO,iBAAiB,EACb,GAAGP,cAAc;IAE1D,OAAO;QAAE,CAACO,kBAAkBC,mBAAmBF,eAAe,EAAEF;IAAM;AACxE;AAEA,SAASI,mBAAmBF,YAAsC;IAChE,OAAQA;QACN,KAAK;YACH,OAAO,CAAC,EAAE,EAAEL,mBAAmB,CAAC,CAAC;QACnC,KAAK;YACH,OAAO,CAAC,EAAE,EAAEC,kBAAkB,cAAc,CAAC;IACjD;AACF"}

package/lib/focus/createFocusOutlineStyle.js CHANGED Viewed

@@ -1,7 +1,7 @@
-import { tokens } from '@fluentui/react-theme';
-import { shorthands } from '@griffel/react';
-import { createCustomFocusIndicatorStyle } from './createCustomFocusIndicatorStyle';
-import { defaultOptions } from './constants';
+import { tokens } from "@fluentui/react-theme";
+import { shorthands } from "@griffel/react";
+import { createCustomFocusIndicatorStyle } from "./createCustomFocusIndicatorStyle.js";
+import { defaultOptions } from "./constants.js";
 /**
  * Get the position of the focus outline
  *

package/lib/focus/createFocusOutlineStyle.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/focus/createFocusOutlineStyle.ts"],"sourcesContent":["import { tokens } from '@fluentui/react-theme';\nimport { shorthands } from '@griffel/react';\nimport type { GriffelStyle } from '@griffel/react';\nimport type { CreateCustomFocusIndicatorStyleOptions } from './createCustomFocusIndicatorStyle';\nimport { createCustomFocusIndicatorStyle } 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 Omit<CreateCustomFocusIndicatorStyleOptions, 'enableOutline'> {\n style?: Partial<FocusOutlineStyleOptions>;\n\n /\n Enables the browser default outline style\n /\n enableOutline?: boolean;\n}\n\n/\n Get the position of the focus outline\n \n @param options - Configures the style of the focus outline\n * @param position - The position of the focus outline\n * @returns CSS value for the position of the focus outline\n /\nfunction getOutlinePosition(\n { outlineWidth, outlineOffset }: FocusOutlineStyleOptions,\n position: 'top' \| 'bottom' \| 'left' \| 'right',\n) {\n const offsetValue = (outlineOffset as FocusOutlineOffset)?.[position] \|\| outlineOffset;\n\n if (!outlineOffset) {\n return `calc(${outlineWidth} -1)`;\n }\n\n return `calc(0px - ${outlineWidth} - ${offsetValue})`;\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, outlineWidth } = options;\n\n return {\n ...shorthands.borderColor('transparent'),\n '@media (forced-colors: active)': {\n '::after': {\n ...shorthands.borderColor('Highlight'),\n },\n },\n '::after': {\n content: '\"\"',\n position: 'absolute',\n pointerEvents: 'none',\n zIndex: 1,\n\n border: `${outlineWidth} solid ${outlineColor}`,\n borderRadius: outlineRadius,\n\n top: getOutlinePosition(options, 'top'),\n right: getOutlinePosition(options, 'right'),\n bottom: getOutlinePosition(options, 'bottom'),\n left: getOutlinePosition(options, 'left'),\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 enableOutline = false,\n selector = defaultOptions.selector,\n customizeSelector,\n style = defaultOptions.style,\n}: CreateFocusOutlineStyleOptions = defaultOptions): GriffelStyle => ({\n ':focus': {\n outlineStyle: enableOutline ? undefined : 'none',\n },\n ':focus-visible': {\n outlineStyle: enableOutline ? undefined : 'none',\n },\n\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, customizeSelector },\n ),\n});\n"],"names":["tokens","shorthands","createCustomFocusIndicatorStyle","defaultOptions","getOutlinePosition","outlineWidth","outlineOffset","position","offsetValue","getFocusOutlineStyles","options","outlineRadius","outlineColor","borderColor","content","pointerEvents","zIndex","border","borderRadius","top","right","bottom","left","createFocusOutlineStyle","enableOutline","selector","customizeSelector","style","outlineStyle","undefined","colorStrokeFocus2","borderRadiusMedium"],"mappings":"AAAA,SAASA,MAAM,QAAQ,wBAAwB;AAC/C,SAASC,UAAU,QAAQ,iBAAiB;AAG5C,SAASC,+BAA+B,QAAQ,~~oCAAoC~~;AACpF,SAASC,cAAc,QAAQ,~~cAAc~~;AAsB7C;;;;;;CAMC,GACD,SAASC,mBACP,EAAEC,YAAY,EAAEC,aAAa,EAA4B,EACzDC,QAA6C;IAE7C,MAAMC,cAAc,CAACF,0BAAAA,oCAAD,AAACA,aAAsC,CAACC,SAAS,KAAID;IAEzE,IAAI,CAACA,eAAe;QAClB,OAAO,CAAC,KAAK,EAAED,aAAa,MAAM,CAAC;IACrC;IAEA,OAAO,CAAC,WAAW,EAAEA,aAAa,GAAG,EAAEG,YAAY,CAAC,CAAC;AACvD;AAEA;;;;;;CAMC,GACD,MAAMC,wBAAwB,CAACC;IAC7B,MAAM,EAAEC,aAAa,EAAEC,YAAY,EAAEP,YAAY,EAAE,GAAGK;IAEtD,OAAO;QACL,GAAGT,WAAWY,WAAW,CAAC,cAAc;QACxC,kCAAkC;YAChC,WAAW;gBACT,GAAGZ,WAAWY,WAAW,CAAC,YAAY;YACxC;QACF;QACA,WAAW;YACTC,SAAS;YACTP,UAAU;YACVQ,eAAe;YACfC,QAAQ;YAERC,QAAQ,GAAGZ,aAAa,OAAO,EAAEO,cAAc;YAC/CM,cAAcP;YAEdQ,KAAKf,mBAAmBM,SAAS;YACjCU,OAAOhB,mBAAmBM,SAAS;YACnCW,QAAQjB,mBAAmBM,SAAS;YACpCY,MAAMlB,mBAAmBM,SAAS;QACpC;IACF;AACF;AAEA;;;;;;CAMC,GACD,OAAO,MAAMa,0BAA0B,CAAC,EACtCC,gBAAgB,KAAK,EACrBC,WAAWtB,eAAesB,QAAQ,EAClCC,iBAAiB,EACjBC,QAAQxB,eAAewB,KAAK,EACG,GAAGxB,cAAc,GAAoB,CAAA;QACpE,UAAU;YACRyB,cAAcJ,gBAAgBK,YAAY;QAC5C;QACA,kBAAkB;YAChBD,cAAcJ,gBAAgBK,YAAY;QAC5C;QAEA,GAAG3B,gCACDO,sBAAsB;YACpBG,cAAcZ,OAAO8B,iBAAiB;YACtCnB,eAAeX,OAAO+B,kBAAkB;YACxC,wDAAwD;YACxD1B,cAAc;YACd,GAAGsB,KAAK;QACV,IACA;YAAEF;YAAUC;QAAkB,EAC/B;IACH,CAAA,EAAG"}
1	+ {"version":3,"sources":["../src/focus/createFocusOutlineStyle.ts"],"sourcesContent":["import { tokens } from '@fluentui/react-theme';\nimport { shorthands } from '@griffel/react';\nimport type { GriffelStyle } from '@griffel/react';\nimport type { CreateCustomFocusIndicatorStyleOptions } from './createCustomFocusIndicatorStyle';\nimport { createCustomFocusIndicatorStyle } 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 Omit<CreateCustomFocusIndicatorStyleOptions, 'enableOutline'> {\n style?: Partial<FocusOutlineStyleOptions>;\n\n /\n Enables the browser default outline style\n /\n enableOutline?: boolean;\n}\n\n/\n Get the position of the focus outline\n \n @param options - Configures the style of the focus outline\n * @param position - The position of the focus outline\n * @returns CSS value for the position of the focus outline\n /\nfunction getOutlinePosition(\n { outlineWidth, outlineOffset }: FocusOutlineStyleOptions,\n position: 'top' \| 'bottom' \| 'left' \| 'right',\n) {\n const offsetValue = (outlineOffset as FocusOutlineOffset)?.[position] \|\| outlineOffset;\n\n if (!outlineOffset) {\n return `calc(${outlineWidth} -1)`;\n }\n\n return `calc(0px - ${outlineWidth} - ${offsetValue})`;\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, outlineWidth } = options;\n\n return {\n ...shorthands.borderColor('transparent'),\n '@media (forced-colors: active)': {\n '::after': {\n ...shorthands.borderColor('Highlight'),\n },\n },\n '::after': {\n content: '\"\"',\n position: 'absolute',\n pointerEvents: 'none',\n zIndex: 1,\n\n border: `${outlineWidth} solid ${outlineColor}`,\n borderRadius: outlineRadius,\n\n top: getOutlinePosition(options, 'top'),\n right: getOutlinePosition(options, 'right'),\n bottom: getOutlinePosition(options, 'bottom'),\n left: getOutlinePosition(options, 'left'),\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 enableOutline = false,\n selector = defaultOptions.selector,\n customizeSelector,\n style = defaultOptions.style,\n}: CreateFocusOutlineStyleOptions = defaultOptions): GriffelStyle => ({\n ':focus': {\n outlineStyle: enableOutline ? undefined : 'none',\n },\n ':focus-visible': {\n outlineStyle: enableOutline ? undefined : 'none',\n },\n\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, customizeSelector },\n ),\n});\n"],"names":["tokens","shorthands","createCustomFocusIndicatorStyle","defaultOptions","getOutlinePosition","outlineWidth","outlineOffset","position","offsetValue","getFocusOutlineStyles","options","outlineRadius","outlineColor","borderColor","content","pointerEvents","zIndex","border","borderRadius","top","right","bottom","left","createFocusOutlineStyle","enableOutline","selector","customizeSelector","style","outlineStyle","undefined","colorStrokeFocus2","borderRadiusMedium"],"mappings":"AAAA,SAASA,MAAM,QAAQ,wBAAwB;AAC/C,SAASC,UAAU,QAAQ,iBAAiB;AAG5C,SAASC,+BAA+B,QAAQ,uCAAoC;AACpF,SAASC,cAAc,QAAQ,iBAAc;AAsB7C;;;;;;CAMC,GACD,SAASC,mBACP,EAAEC,YAAY,EAAEC,aAAa,EAA4B,EACzDC,QAA6C;IAE7C,MAAMC,cAAc,CAACF,0BAAAA,oCAAD,AAACA,aAAsC,CAACC,SAAS,KAAID;IAEzE,IAAI,CAACA,eAAe;QAClB,OAAO,CAAC,KAAK,EAAED,aAAa,MAAM,CAAC;IACrC;IAEA,OAAO,CAAC,WAAW,EAAEA,aAAa,GAAG,EAAEG,YAAY,CAAC,CAAC;AACvD;AAEA;;;;;;CAMC,GACD,MAAMC,wBAAwB,CAACC;IAC7B,MAAM,EAAEC,aAAa,EAAEC,YAAY,EAAEP,YAAY,EAAE,GAAGK;IAEtD,OAAO;QACL,GAAGT,WAAWY,WAAW,CAAC,cAAc;QACxC,kCAAkC;YAChC,WAAW;gBACT,GAAGZ,WAAWY,WAAW,CAAC,YAAY;YACxC;QACF;QACA,WAAW;YACTC,SAAS;YACTP,UAAU;YACVQ,eAAe;YACfC,QAAQ;YAERC,QAAQ,GAAGZ,aAAa,OAAO,EAAEO,cAAc;YAC/CM,cAAcP;YAEdQ,KAAKf,mBAAmBM,SAAS;YACjCU,OAAOhB,mBAAmBM,SAAS;YACnCW,QAAQjB,mBAAmBM,SAAS;YACpCY,MAAMlB,mBAAmBM,SAAS;QACpC;IACF;AACF;AAEA;;;;;;CAMC,GACD,OAAO,MAAMa,0BAA0B,CAAC,EACtCC,gBAAgB,KAAK,EACrBC,WAAWtB,eAAesB,QAAQ,EAClCC,iBAAiB,EACjBC,QAAQxB,eAAewB,KAAK,EACG,GAAGxB,cAAc,GAAoB,CAAA;QACpE,UAAU;YACRyB,cAAcJ,gBAAgBK,YAAY;QAC5C;QACA,kBAAkB;YAChBD,cAAcJ,gBAAgBK,YAAY;QAC5C;QAEA,GAAG3B,gCACDO,sBAAsB;YACpBG,cAAcZ,OAAO8B,iBAAiB;YACtCnB,eAAeX,OAAO+B,kBAAkB;YACxC,wDAAwD;YACxD1B,cAAc;YACd,GAAGsB,KAAK;QACV,IACA;YAAEF;YAAUC;QAAkB,EAC/B;IACH,CAAA,EAAG"}

package/lib/focus/focusVisiblePolyfill.js CHANGED Viewed

@@ -1,6 +1,6 @@
-import { isHTMLElement } from '@fluentui/react-utilities';
-import { KEYBORG_FOCUSIN, createKeyborg, disposeKeyborg } from 'keyborg';
-import { FOCUS_VISIBLE_ATTR } from './constants';
+import { isHTMLElement } from "@fluentui/react-utilities";
+import { KEYBORG_FOCUSIN, createKeyborg, disposeKeyborg } from "keyborg";
+import { FOCUS_VISIBLE_ATTR } from "./constants.js";
 /**
  * @internal
  * @param scope - Applies the ponyfill to all DOM children

package/lib/focus/focusVisiblePolyfill.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/focus/focusVisiblePolyfill.ts"],"sourcesContent":["import { isHTMLElement } from '@fluentui/react-utilities';\nimport type { KeyborgFocusInEvent } from 'keyborg';\nimport { KEYBORG_FOCUSIN, createKeyborg, disposeKeyborg } from 'keyborg';\n\nimport { FOCUS_VISIBLE_ATTR } from './constants';\n\n/*\n Because `addEventListener` type override falls back to 2nd definition (evt name is unknown string literal)\n * evt is being typed as a base class of MouseEvent -> `Event`.\n * This type is used to override `listener` calls to make TS happy\n /\ntype ListenerOverride = (evt: Event) => void;\n\ntype FocusVisibleState = {\n /\n Current element with focus visible in state\n /\n current: HTMLElement \| undefined;\n};\n\ntype HTMLElementWithFocusVisibleScope = {\n focusVisible: boolean \| undefined;\n} & HTMLElement;\n\n/\n @internal\n * @param scope - Applies the ponyfill to all DOM children\n * @param targetWindow - window\n */\nexport function applyFocusVisiblePolyfill(scope: HTMLElement, targetWindow: Window): () => void {\n if (alreadyInScope(scope)) {\n // Focus visible polyfill already applied at this scope\n return () => undefined;\n }\n\n const state: FocusVisibleState = {\n current: undefined,\n };\n\n const keyborg = createKeyborg(targetWindow);\n\n function registerElementIfNavigating(el: EventTarget \| HTMLElement \| null) {\n if (keyborg.isNavigatingWithKeyboard() && isHTMLElement(el)) {\n state.current = el;\n el.setAttribute(FOCUS_VISIBLE_ATTR, '');\n }\n }\n\n function disposeCurrentElement() {\n if (state.current) {\n state.current.removeAttribute(FOCUS_VISIBLE_ATTR);\n state.current = undefined;\n }\n }\n\n // When navigation mode changes remove the focus-visible selector\n keyborg.subscribe(isNavigatingWithKeyboard => {\n if (!isNavigatingWithKeyboard) {\n disposeCurrentElement();\n } else {\n registerElementIfNavigating(targetWindow.document.activeElement);\n }\n });\n\n // Keyborg's focusin event is delegated so it's only registered once on the window\n // and contains metadata about the focus event\n const keyborgListener = (e: KeyborgFocusInEvent) => {\n disposeCurrentElement();\n const target = e.composedPath()[0];\n registerElementIfNavigating(target);\n };\n\n // Make sure that when focus leaves the scope, the focus visible class is removed\n const blurListener = (e: FocusEvent) => {\n if (!e.relatedTarget \|\| (isHTMLElement(e.relatedTarget) && !scope.contains(e.relatedTarget))) {\n disposeCurrentElement();\n }\n };\n\n scope.addEventListener(KEYBORG_FOCUSIN, keyborgListener as ListenerOverride);\n scope.addEventListener('focusout', blurListener);\n (scope as HTMLElementWithFocusVisibleScope).focusVisible = true;\n\n if (scope.contains(targetWindow.document.activeElement)) {\n registerElementIfNavigating(targetWindow.document.activeElement);\n }\n\n // Return disposer\n return () => {\n disposeCurrentElement();\n\n scope.removeEventListener(KEYBORG_FOCUSIN, keyborgListener as ListenerOverride);\n scope.removeEventListener('focusout', blurListener);\n (scope as HTMLElementWithFocusVisibleScope).focusVisible = undefined;\n\n disposeKeyborg(keyborg);\n };\n}\n\nfunction alreadyInScope(el: HTMLElement \| null \| undefined): boolean {\n if (!el) {\n return false;\n }\n\n if ((el as HTMLElementWithFocusVisibleScope).focusVisible) {\n return true;\n }\n\n return alreadyInScope(el?.parentElement);\n}\n"],"names":["isHTMLElement","KEYBORG_FOCUSIN","createKeyborg","disposeKeyborg","FOCUS_VISIBLE_ATTR","applyFocusVisiblePolyfill","scope","targetWindow","alreadyInScope","undefined","state","current","keyborg","registerElementIfNavigating","el","isNavigatingWithKeyboard","setAttribute","disposeCurrentElement","removeAttribute","subscribe","document","activeElement","keyborgListener","e","target","composedPath","blurListener","relatedTarget","contains","addEventListener","focusVisible","removeEventListener","parentElement"],"mappings":"AAAA,SAASA,aAAa,QAAQ,4BAA4B;AAE1D,SAASC,eAAe,EAAEC,aAAa,EAAEC,cAAc,QAAQ,UAAU;AAEzE,SAASC,kBAAkB,QAAQ,~~cAAc~~;AAoBjD;;;;CAIC,GACD,OAAO,SAASC,0BAA0BC,KAAkB,EAAEC,YAAoB;IAChF,IAAIC,eAAeF,QAAQ;QACzB,uDAAuD;QACvD,OAAO,IAAMG;IACf;IAEA,MAAMC,QAA2B;QAC/BC,SAASF;IACX;IAEA,MAAMG,UAAUV,cAAcK;IAE9B,SAASM,4BAA4BC,EAAoC;QACvE,IAAIF,QAAQG,wBAAwB,MAAMf,cAAcc,KAAK;YAC3DJ,MAAMC,OAAO,GAAGG;YAChBA,GAAGE,YAAY,CAACZ,oBAAoB;QACtC;IACF;IAEA,SAASa;QACP,IAAIP,MAAMC,OAAO,EAAE;YACjBD,MAAMC,OAAO,CAACO,eAAe,CAACd;YAC9BM,MAAMC,OAAO,GAAGF;QAClB;IACF;IAEA,iEAAiE;IACjEG,QAAQO,SAAS,CAACJ,CAAAA;QAChB,IAAI,CAACA,0BAA0B;YAC7BE;QACF,OAAO;YACLJ,4BAA4BN,aAAaa,QAAQ,CAACC,aAAa;QACjE;IACF;IAEA,kFAAkF;IAClF,8CAA8C;IAC9C,MAAMC,kBAAkB,CAACC;QACvBN;QACA,MAAMO,SAASD,EAAEE,YAAY,EAAE,CAAC,EAAE;QAClCZ,4BAA4BW;IAC9B;IAEA,iFAAiF;IACjF,MAAME,eAAe,CAACH;QACpB,IAAI,CAACA,EAAEI,aAAa,IAAK3B,cAAcuB,EAAEI,aAAa,KAAK,CAACrB,MAAMsB,QAAQ,CAACL,EAAEI,aAAa,GAAI;YAC5FV;QACF;IACF;IAEAX,MAAMuB,gBAAgB,CAAC5B,iBAAiBqB;IACxChB,MAAMuB,gBAAgB,CAAC,YAAYH;IAClCpB,MAA2CwB,YAAY,GAAG;IAE3D,IAAIxB,MAAMsB,QAAQ,CAACrB,aAAaa,QAAQ,CAACC,aAAa,GAAG;QACvDR,4BAA4BN,aAAaa,QAAQ,CAACC,aAAa;IACjE;IAEA,kBAAkB;IAClB,OAAO;QACLJ;QAEAX,MAAMyB,mBAAmB,CAAC9B,iBAAiBqB;QAC3ChB,MAAMyB,mBAAmB,CAAC,YAAYL;QACrCpB,MAA2CwB,YAAY,GAAGrB;QAE3DN,eAAeS;IACjB;AACF;AAEA,SAASJ,eAAeM,EAAkC;IACxD,IAAI,CAACA,IAAI;QACP,OAAO;IACT;IAEA,IAAI,AAACA,GAAwCgB,YAAY,EAAE;QACzD,OAAO;IACT;IAEA,OAAOtB,eAAeM,eAAAA,yBAAAA,GAAIkB,aAAa;AACzC"}
1	+ {"version":3,"sources":["../src/focus/focusVisiblePolyfill.ts"],"sourcesContent":["import { isHTMLElement } from '@fluentui/react-utilities';\nimport type { KeyborgFocusInEvent } from 'keyborg';\nimport { KEYBORG_FOCUSIN, createKeyborg, disposeKeyborg } from 'keyborg';\n\nimport { FOCUS_VISIBLE_ATTR } from './constants';\n\n/*\n Because `addEventListener` type override falls back to 2nd definition (evt name is unknown string literal)\n * evt is being typed as a base class of MouseEvent -> `Event`.\n * This type is used to override `listener` calls to make TS happy\n /\ntype ListenerOverride = (evt: Event) => void;\n\ntype FocusVisibleState = {\n /\n Current element with focus visible in state\n /\n current: HTMLElement \| undefined;\n};\n\ntype HTMLElementWithFocusVisibleScope = {\n focusVisible: boolean \| undefined;\n} & HTMLElement;\n\n/\n @internal\n * @param scope - Applies the ponyfill to all DOM children\n * @param targetWindow - window\n */\nexport function applyFocusVisiblePolyfill(scope: HTMLElement, targetWindow: Window): () => void {\n if (alreadyInScope(scope)) {\n // Focus visible polyfill already applied at this scope\n return () => undefined;\n }\n\n const state: FocusVisibleState = {\n current: undefined,\n };\n\n const keyborg = createKeyborg(targetWindow);\n\n function registerElementIfNavigating(el: EventTarget \| HTMLElement \| null) {\n if (keyborg.isNavigatingWithKeyboard() && isHTMLElement(el)) {\n state.current = el;\n el.setAttribute(FOCUS_VISIBLE_ATTR, '');\n }\n }\n\n function disposeCurrentElement() {\n if (state.current) {\n state.current.removeAttribute(FOCUS_VISIBLE_ATTR);\n state.current = undefined;\n }\n }\n\n // When navigation mode changes remove the focus-visible selector\n keyborg.subscribe(isNavigatingWithKeyboard => {\n if (!isNavigatingWithKeyboard) {\n disposeCurrentElement();\n } else {\n registerElementIfNavigating(targetWindow.document.activeElement);\n }\n });\n\n // Keyborg's focusin event is delegated so it's only registered once on the window\n // and contains metadata about the focus event\n const keyborgListener = (e: KeyborgFocusInEvent) => {\n disposeCurrentElement();\n const target = e.composedPath()[0];\n registerElementIfNavigating(target);\n };\n\n // Make sure that when focus leaves the scope, the focus visible class is removed\n const blurListener = (e: FocusEvent) => {\n if (!e.relatedTarget \|\| (isHTMLElement(e.relatedTarget) && !scope.contains(e.relatedTarget))) {\n disposeCurrentElement();\n }\n };\n\n scope.addEventListener(KEYBORG_FOCUSIN, keyborgListener as ListenerOverride);\n scope.addEventListener('focusout', blurListener);\n (scope as HTMLElementWithFocusVisibleScope).focusVisible = true;\n\n if (scope.contains(targetWindow.document.activeElement)) {\n registerElementIfNavigating(targetWindow.document.activeElement);\n }\n\n // Return disposer\n return () => {\n disposeCurrentElement();\n\n scope.removeEventListener(KEYBORG_FOCUSIN, keyborgListener as ListenerOverride);\n scope.removeEventListener('focusout', blurListener);\n (scope as HTMLElementWithFocusVisibleScope).focusVisible = undefined;\n\n disposeKeyborg(keyborg);\n };\n}\n\nfunction alreadyInScope(el: HTMLElement \| null \| undefined): boolean {\n if (!el) {\n return false;\n }\n\n if ((el as HTMLElementWithFocusVisibleScope).focusVisible) {\n return true;\n }\n\n return alreadyInScope(el?.parentElement);\n}\n"],"names":["isHTMLElement","KEYBORG_FOCUSIN","createKeyborg","disposeKeyborg","FOCUS_VISIBLE_ATTR","applyFocusVisiblePolyfill","scope","targetWindow","alreadyInScope","undefined","state","current","keyborg","registerElementIfNavigating","el","isNavigatingWithKeyboard","setAttribute","disposeCurrentElement","removeAttribute","subscribe","document","activeElement","keyborgListener","e","target","composedPath","blurListener","relatedTarget","contains","addEventListener","focusVisible","removeEventListener","parentElement"],"mappings":"AAAA,SAASA,aAAa,QAAQ,4BAA4B;AAE1D,SAASC,eAAe,EAAEC,aAAa,EAAEC,cAAc,QAAQ,UAAU;AAEzE,SAASC,kBAAkB,QAAQ,iBAAc;AAoBjD;;;;CAIC,GACD,OAAO,SAASC,0BAA0BC,KAAkB,EAAEC,YAAoB;IAChF,IAAIC,eAAeF,QAAQ;QACzB,uDAAuD;QACvD,OAAO,IAAMG;IACf;IAEA,MAAMC,QAA2B;QAC/BC,SAASF;IACX;IAEA,MAAMG,UAAUV,cAAcK;IAE9B,SAASM,4BAA4BC,EAAoC;QACvE,IAAIF,QAAQG,wBAAwB,MAAMf,cAAcc,KAAK;YAC3DJ,MAAMC,OAAO,GAAGG;YAChBA,GAAGE,YAAY,CAACZ,oBAAoB;QACtC;IACF;IAEA,SAASa;QACP,IAAIP,MAAMC,OAAO,EAAE;YACjBD,MAAMC,OAAO,CAACO,eAAe,CAACd;YAC9BM,MAAMC,OAAO,GAAGF;QAClB;IACF;IAEA,iEAAiE;IACjEG,QAAQO,SAAS,CAACJ,CAAAA;QAChB,IAAI,CAACA,0BAA0B;YAC7BE;QACF,OAAO;YACLJ,4BAA4BN,aAAaa,QAAQ,CAACC,aAAa;QACjE;IACF;IAEA,kFAAkF;IAClF,8CAA8C;IAC9C,MAAMC,kBAAkB,CAACC;QACvBN;QACA,MAAMO,SAASD,EAAEE,YAAY,EAAE,CAAC,EAAE;QAClCZ,4BAA4BW;IAC9B;IAEA,iFAAiF;IACjF,MAAME,eAAe,CAACH;QACpB,IAAI,CAACA,EAAEI,aAAa,IAAK3B,cAAcuB,EAAEI,aAAa,KAAK,CAACrB,MAAMsB,QAAQ,CAACL,EAAEI,aAAa,GAAI;YAC5FV;QACF;IACF;IAEAX,MAAMuB,gBAAgB,CAAC5B,iBAAiBqB;IACxChB,MAAMuB,gBAAgB,CAAC,YAAYH;IAClCpB,MAA2CwB,YAAY,GAAG;IAE3D,IAAIxB,MAAMsB,QAAQ,CAACrB,aAAaa,QAAQ,CAACC,aAAa,GAAG;QACvDR,4BAA4BN,aAAaa,QAAQ,CAACC,aAAa;IACjE;IAEA,kBAAkB;IAClB,OAAO;QACLJ;QAEAX,MAAMyB,mBAAmB,CAAC9B,iBAAiBqB;QAC3ChB,MAAMyB,mBAAmB,CAAC,YAAYL;QACrCpB,MAA2CwB,YAAY,GAAGrB;QAE3DN,eAAeS;IACjB;AACF;AAEA,SAASJ,eAAeM,EAAkC;IACxD,IAAI,CAACA,IAAI;QACP,OAAO;IACT;IAEA,IAAI,AAACA,GAAwCgB,YAAY,EAAE;QACzD,OAAO;IACT;IAEA,OAAOtB,eAAeM,eAAAA,yBAAAA,GAAIkB,aAAa;AACzC"}

package/lib/focus/focusWithinPolyfill.js CHANGED Viewed

@@ -1,5 +1,5 @@
-import { KEYBORG_FOCUSIN, createKeyborg, disposeKeyborg } from 'keyborg';
-import { FOCUS_WITHIN_ATTR } from './constants';
+import { KEYBORG_FOCUSIN, createKeyborg, disposeKeyborg } from "keyborg";
+import { FOCUS_WITHIN_ATTR } from "./constants.js";
 /**
  * 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

package/lib/focus/focusWithinPolyfill.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/focus/focusWithinPolyfill.ts"],"sourcesContent":["import type { KeyborgFocusInEvent } from 'keyborg';\nimport { KEYBORG_FOCUSIN, createKeyborg, disposeKeyborg } from 'keyborg';\nimport { FOCUS_WITHIN_ATTR } from './constants';\n\n/*\n Because `addEventListener` type override falls back to 2nd definition (evt name is unknown string literal)\n * evt is being typed as a base class of MouseEvent -> `Event`.\n * This type is used to override `listener` calls to make TS happy\n /\ntype ListenerOverride = (evt: Event) => void;\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 applyFocusWithinPolyfill(element: HTMLElement, win: Window): () => void {\n const keyborg = createKeyborg(win);\n\n // When navigation mode changes to mouse, remove the focus-within selector\n keyborg.subscribe(isNavigatingWithKeyboard => {\n if (!isNavigatingWithKeyboard) {\n removeFocusWithinClass(element);\n }\n });\n\n // Keyborg's focusin event is delegated so it's only registered once on the window\n // and contains metadata about the focus event\n const keyborgListener = (e: KeyborgFocusInEvent) => {\n if (keyborg.isNavigatingWithKeyboard() && isHTMLElement(e.target)) {\n // Griffel can't create chained global styles so use the parent element for now\n applyFocusWithinClass(element);\n }\n };\n\n // Make sure that when focus leaves the scope, the focus within class is removed\n const blurListener = (e: FocusEvent) => {\n if (!e.relatedTarget \|\| (isHTMLElement(e.relatedTarget) && !element.contains(e.relatedTarget))) {\n removeFocusWithinClass(element);\n }\n };\n\n element.addEventListener(KEYBORG_FOCUSIN, keyborgListener as ListenerOverride);\n element.addEventListener('focusout', blurListener);\n\n // Return disposer\n return () => {\n element.removeEventListener(KEYBORG_FOCUSIN, keyborgListener as ListenerOverride);\n element.removeEventListener('focusout', blurListener);\n disposeKeyborg(keyborg);\n };\n}\n\nfunction applyFocusWithinClass(el: HTMLElement) {\n el.setAttribute(FOCUS_WITHIN_ATTR, '');\n}\n\nfunction removeFocusWithinClass(el: HTMLElement) {\n el.removeAttribute(FOCUS_WITHIN_ATTR);\n}\n\nfunction isHTMLElement(target: EventTarget \| null): target is HTMLElement {\n if (!target) {\n return false;\n }\n return Boolean(target && typeof target === 'object' && 'classList' in target && 'contains' in target);\n}\n"],"names":["KEYBORG_FOCUSIN","createKeyborg","disposeKeyborg","FOCUS_WITHIN_ATTR","applyFocusWithinPolyfill","element","win","keyborg","subscribe","isNavigatingWithKeyboard","removeFocusWithinClass","keyborgListener","e","isHTMLElement","target","applyFocusWithinClass","blurListener","relatedTarget","contains","addEventListener","removeEventListener","el","setAttribute","removeAttribute","Boolean"],"mappings":"AACA,SAASA,eAAe,EAAEC,aAAa,EAAEC,cAAc,QAAQ,UAAU;AACzE,SAASC,iBAAiB,QAAQ,~~cAAc~~;AAShD;;;;CAIC,GACD,OAAO,SAASC,yBAAyBC,OAAoB,EAAEC,GAAW;IACxE,MAAMC,UAAUN,cAAcK;IAE9B,0EAA0E;IAC1EC,QAAQC,SAAS,CAACC,CAAAA;QAChB,IAAI,CAACA,0BAA0B;YAC7BC,uBAAuBL;QACzB;IACF;IAEA,kFAAkF;IAClF,8CAA8C;IAC9C,MAAMM,kBAAkB,CAACC;QACvB,IAAIL,QAAQE,wBAAwB,MAAMI,cAAcD,EAAEE,MAAM,GAAG;YACjE,+EAA+E;YAC/EC,sBAAsBV;QACxB;IACF;IAEA,gFAAgF;IAChF,MAAMW,eAAe,CAACJ;QACpB,IAAI,CAACA,EAAEK,aAAa,IAAKJ,cAAcD,EAAEK,aAAa,KAAK,CAACZ,QAAQa,QAAQ,CAACN,EAAEK,aAAa,GAAI;YAC9FP,uBAAuBL;QACzB;IACF;IAEAA,QAAQc,gBAAgB,CAACnB,iBAAiBW;IAC1CN,QAAQc,gBAAgB,CAAC,YAAYH;IAErC,kBAAkB;IAClB,OAAO;QACLX,QAAQe,mBAAmB,CAACpB,iBAAiBW;QAC7CN,QAAQe,mBAAmB,CAAC,YAAYJ;QACxCd,eAAeK;IACjB;AACF;AAEA,SAASQ,sBAAsBM,EAAe;IAC5CA,GAAGC,YAAY,CAACnB,mBAAmB;AACrC;AAEA,SAASO,uBAAuBW,EAAe;IAC7CA,GAAGE,eAAe,CAACpB;AACrB;AAEA,SAASU,cAAcC,MAA0B;IAC/C,IAAI,CAACA,QAAQ;QACX,OAAO;IACT;IACA,OAAOU,QAAQV,UAAU,OAAOA,WAAW,YAAY,eAAeA,UAAU,cAAcA;AAChG"}
1	+ {"version":3,"sources":["../src/focus/focusWithinPolyfill.ts"],"sourcesContent":["import type { KeyborgFocusInEvent } from 'keyborg';\nimport { KEYBORG_FOCUSIN, createKeyborg, disposeKeyborg } from 'keyborg';\nimport { FOCUS_WITHIN_ATTR } from './constants';\n\n/*\n Because `addEventListener` type override falls back to 2nd definition (evt name is unknown string literal)\n * evt is being typed as a base class of MouseEvent -> `Event`.\n * This type is used to override `listener` calls to make TS happy\n /\ntype ListenerOverride = (evt: Event) => void;\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 applyFocusWithinPolyfill(element: HTMLElement, win: Window): () => void {\n const keyborg = createKeyborg(win);\n\n // When navigation mode changes to mouse, remove the focus-within selector\n keyborg.subscribe(isNavigatingWithKeyboard => {\n if (!isNavigatingWithKeyboard) {\n removeFocusWithinClass(element);\n }\n });\n\n // Keyborg's focusin event is delegated so it's only registered once on the window\n // and contains metadata about the focus event\n const keyborgListener = (e: KeyborgFocusInEvent) => {\n if (keyborg.isNavigatingWithKeyboard() && isHTMLElement(e.target)) {\n // Griffel can't create chained global styles so use the parent element for now\n applyFocusWithinClass(element);\n }\n };\n\n // Make sure that when focus leaves the scope, the focus within class is removed\n const blurListener = (e: FocusEvent) => {\n if (!e.relatedTarget \|\| (isHTMLElement(e.relatedTarget) && !element.contains(e.relatedTarget))) {\n removeFocusWithinClass(element);\n }\n };\n\n element.addEventListener(KEYBORG_FOCUSIN, keyborgListener as ListenerOverride);\n element.addEventListener('focusout', blurListener);\n\n // Return disposer\n return () => {\n element.removeEventListener(KEYBORG_FOCUSIN, keyborgListener as ListenerOverride);\n element.removeEventListener('focusout', blurListener);\n disposeKeyborg(keyborg);\n };\n}\n\nfunction applyFocusWithinClass(el: HTMLElement) {\n el.setAttribute(FOCUS_WITHIN_ATTR, '');\n}\n\nfunction removeFocusWithinClass(el: HTMLElement) {\n el.removeAttribute(FOCUS_WITHIN_ATTR);\n}\n\nfunction isHTMLElement(target: EventTarget \| null): target is HTMLElement {\n if (!target) {\n return false;\n }\n return Boolean(target && typeof target === 'object' && 'classList' in target && 'contains' in target);\n}\n"],"names":["KEYBORG_FOCUSIN","createKeyborg","disposeKeyborg","FOCUS_WITHIN_ATTR","applyFocusWithinPolyfill","element","win","keyborg","subscribe","isNavigatingWithKeyboard","removeFocusWithinClass","keyborgListener","e","isHTMLElement","target","applyFocusWithinClass","blurListener","relatedTarget","contains","addEventListener","removeEventListener","el","setAttribute","removeAttribute","Boolean"],"mappings":"AACA,SAASA,eAAe,EAAEC,aAAa,EAAEC,cAAc,QAAQ,UAAU;AACzE,SAASC,iBAAiB,QAAQ,iBAAc;AAShD;;;;CAIC,GACD,OAAO,SAASC,yBAAyBC,OAAoB,EAAEC,GAAW;IACxE,MAAMC,UAAUN,cAAcK;IAE9B,0EAA0E;IAC1EC,QAAQC,SAAS,CAACC,CAAAA;QAChB,IAAI,CAACA,0BAA0B;YAC7BC,uBAAuBL;QACzB;IACF;IAEA,kFAAkF;IAClF,8CAA8C;IAC9C,MAAMM,kBAAkB,CAACC;QACvB,IAAIL,QAAQE,wBAAwB,MAAMI,cAAcD,EAAEE,MAAM,GAAG;YACjE,+EAA+E;YAC/EC,sBAAsBV;QACxB;IACF;IAEA,gFAAgF;IAChF,MAAMW,eAAe,CAACJ;QACpB,IAAI,CAACA,EAAEK,aAAa,IAAKJ,cAAcD,EAAEK,aAAa,KAAK,CAACZ,QAAQa,QAAQ,CAACN,EAAEK,aAAa,GAAI;YAC9FP,uBAAuBL;QACzB;IACF;IAEAA,QAAQc,gBAAgB,CAACnB,iBAAiBW;IAC1CN,QAAQc,gBAAgB,CAAC,YAAYH;IAErC,kBAAkB;IAClB,OAAO;QACLX,QAAQe,mBAAmB,CAACpB,iBAAiBW;QAC7CN,QAAQe,mBAAmB,CAAC,YAAYJ;QACxCd,eAAeK;IACjB;AACF;AAEA,SAASQ,sBAAsBM,EAAe;IAC5CA,GAAGC,YAAY,CAACnB,mBAAmB;AACrC;AAEA,SAASO,uBAAuBW,EAAe;IAC7CA,GAAGE,eAAe,CAACpB;AACrB;AAEA,SAASU,cAAcC,MAA0B;IAC/C,IAAI,CAACA,QAAQ;QACX,OAAO;IACT;IACA,OAAOU,QAAQV,UAAU,OAAOA,WAAW,YAAY,eAAeA,UAAU,cAAcA;AAChG"}

package/lib/focus/index.js CHANGED Viewed

@@ -1,4 +1,4 @@
-export { createCustomFocusIndicatorStyle } from './createCustomFocusIndicatorStyle';
-export { createFocusOutlineStyle } from './createFocusOutlineStyle';
-export { applyFocusVisiblePolyfill } from './focusVisiblePolyfill';
-export { applyFocusWithinPolyfill } from './focusWithinPolyfill';
+export { createCustomFocusIndicatorStyle } from "./createCustomFocusIndicatorStyle.js";
+export { createFocusOutlineStyle } from "./createFocusOutlineStyle.js";
+export { applyFocusVisiblePolyfill } from "./focusVisiblePolyfill.js";
+export { applyFocusWithinPolyfill } from "./focusWithinPolyfill.js";

package/lib/focus/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/focus/index.ts"],"sourcesContent":["export type { CreateCustomFocusIndicatorStyleOptions } from './createCustomFocusIndicatorStyle';\nexport { createCustomFocusIndicatorStyle } from './createCustomFocusIndicatorStyle';\nexport type {\n CreateFocusOutlineStyleOptions,\n FocusOutlineOffset,\n FocusOutlineStyleOptions,\n} from './createFocusOutlineStyle';\nexport { createFocusOutlineStyle } from './createFocusOutlineStyle';\nexport { applyFocusVisiblePolyfill } from './focusVisiblePolyfill';\nexport { applyFocusWithinPolyfill } from './focusWithinPolyfill';\n"],"names":["createCustomFocusIndicatorStyle","createFocusOutlineStyle","applyFocusVisiblePolyfill","applyFocusWithinPolyfill"],"mappings":"AACA,SAASA,+BAA+B,QAAQ,~~oCAAoC~~;AAMpF,SAASC,uBAAuB,QAAQ~~,4BAA4B~~;AACpE,SAASC,yBAAyB,QAAQ,~~yBAAyB~~;AACnE,SAASC,wBAAwB,QAAQ,~~wBAAwB~~"}
1	+ {"version":3,"sources":["../src/focus/index.ts"],"sourcesContent":["export type { CreateCustomFocusIndicatorStyleOptions } from './createCustomFocusIndicatorStyle';\nexport { createCustomFocusIndicatorStyle } from './createCustomFocusIndicatorStyle';\nexport type {\n CreateFocusOutlineStyleOptions,\n FocusOutlineOffset,\n FocusOutlineStyleOptions,\n} from './createFocusOutlineStyle';\nexport { createFocusOutlineStyle } from './createFocusOutlineStyle';\nexport { applyFocusVisiblePolyfill } from './focusVisiblePolyfill';\nexport { applyFocusWithinPolyfill } from './focusWithinPolyfill';\n"],"names":["createCustomFocusIndicatorStyle","createFocusOutlineStyle","applyFocusVisiblePolyfill","applyFocusWithinPolyfill"],"mappings":"AACA,SAASA,+BAA+B,QAAQ,uCAAoC;AAMpF,SAASC,uBAAuB,QAAQ,+BAA4B;AACpE,SAASC,yBAAyB,QAAQ,4BAAyB;AACnE,SAASC,wBAAwB,QAAQ,2BAAwB"}

package/lib/hooks/index.js CHANGED Viewed

@@ -1,19 +1,19 @@
-export { useArrowNavigationGroup } from './useArrowNavigationGroup';
-export { useFocusableGroup } from './useFocusableGroup';
-export { useFocusFinders } from './useFocusFinders';
-export { useFocusVisible } from './useFocusVisible';
-export { useFocusWithin } from './useFocusWithin';
-export { useKeyboardNavAttribute } from './useKeyboardNavAttribute';
-export { useOnKeyboardNavigationChange } from './useOnKeyboardNavigationChange';
-export { useModalAttributes } from './useModalAttributes';
-export { useDangerousNeverHidden_unstable } from './useDangerousNeverHidden';
-export { useTabsterAttributes } from './useTabsterAttributes';
-export { useObservedElement } from './useObservedElement';
-export { useMergedTabsterAttributes_unstable } from './useMergeTabsterAttributes';
-export { useFocusObserved } from './useFocusObserved';
-export { useRestoreFocusSource, useRestoreFocusTarget } from './useRestoreFocus';
-export { useUncontrolledFocus } from './useUncontrolledFocus';
-export { useIsNavigatingWithKeyboard } from './useIsNavigatingWithKeyboard';
-export { useSetKeyboardNavigation } from './useSetKeyboardNavigation';
-export { useFocusedElementChange } from './useFocusedElementChange';
-export { useActivateModal } from './useActivateModal';
+export { useArrowNavigationGroup } from "./useArrowNavigationGroup.js";
+export { useFocusableGroup } from "./useFocusableGroup.js";
+export { useFocusFinders } from "./useFocusFinders.js";
+export { useFocusVisible } from "./useFocusVisible.js";
+export { useFocusWithin } from "./useFocusWithin.js";
+export { useKeyboardNavAttribute } from "./useKeyboardNavAttribute.js";
+export { useOnKeyboardNavigationChange } from "./useOnKeyboardNavigationChange.js";
+export { useModalAttributes } from "./useModalAttributes.js";
+export { useDangerousNeverHidden_unstable } from "./useDangerousNeverHidden.js";
+export { useTabsterAttributes } from "./useTabsterAttributes.js";
+export { useObservedElement } from "./useObservedElement.js";
+export { useMergedTabsterAttributes_unstable } from "./useMergeTabsterAttributes.js";
+export { useFocusObserved } from "./useFocusObserved.js";
+export { useRestoreFocusSource, useRestoreFocusTarget } from "./useRestoreFocus.js";
+export { useUncontrolledFocus } from "./useUncontrolledFocus.js";
+export { useIsNavigatingWithKeyboard } from "./useIsNavigatingWithKeyboard.js";
+export { useSetKeyboardNavigation } from "./useSetKeyboardNavigation.js";
+export { useFocusedElementChange } from "./useFocusedElementChange.js";
+export { useActivateModal } from "./useActivateModal.js";

package/lib/hooks/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/hooks/index.ts"],"sourcesContent":["export type { UseArrowNavigationGroupOptions } from './useArrowNavigationGroup';\nexport { useArrowNavigationGroup } from './useArrowNavigationGroup';\nexport type { UseFocusableGroupOptions } from './useFocusableGroup';\nexport { useFocusableGroup } from './useFocusableGroup';\nexport { useFocusFinders } from './useFocusFinders';\nexport { useFocusVisible } from './useFocusVisible';\nexport { useFocusWithin } from './useFocusWithin';\nexport { useKeyboardNavAttribute } from './useKeyboardNavAttribute';\nexport { useOnKeyboardNavigationChange } from './useOnKeyboardNavigationChange';\nexport type { UseModalAttributesOptions } from './useModalAttributes';\nexport { useModalAttributes } from './useModalAttributes';\nexport { useDangerousNeverHidden_unstable } from './useDangerousNeverHidden';\nexport { useTabsterAttributes } from './useTabsterAttributes';\nexport { useObservedElement } from './useObservedElement';\nexport { useMergedTabsterAttributes_unstable } from './useMergeTabsterAttributes';\nexport { useFocusObserved } from './useFocusObserved';\nexport { useRestoreFocusSource, useRestoreFocusTarget } from './useRestoreFocus';\nexport { useUncontrolledFocus } from './useUncontrolledFocus';\nexport { useIsNavigatingWithKeyboard } from './useIsNavigatingWithKeyboard';\nexport { useSetKeyboardNavigation } from './useSetKeyboardNavigation';\nexport { useFocusedElementChange } from './useFocusedElementChange';\nexport { useActivateModal } from './useActivateModal';\n"],"names":["useArrowNavigationGroup","useFocusableGroup","useFocusFinders","useFocusVisible","useFocusWithin","useKeyboardNavAttribute","useOnKeyboardNavigationChange","useModalAttributes","useDangerousNeverHidden_unstable","useTabsterAttributes","useObservedElement","useMergedTabsterAttributes_unstable","useFocusObserved","useRestoreFocusSource","useRestoreFocusTarget","useUncontrolledFocus","useIsNavigatingWithKeyboard","useSetKeyboardNavigation","useFocusedElementChange","useActivateModal"],"mappings":"AACA,SAASA,uBAAuB,QAAQ~~,4BAA4B~~;AAEpE,SAASC,iBAAiB,QAAQ,~~sBAAsB~~;AACxD,SAASC,eAAe,QAAQ,~~oBAAoB~~;AACpD,SAASC,eAAe,QAAQ,~~oBAAoB~~;AACpD,SAASC,cAAc,QAAQ,~~mBAAmB~~;AAClD,SAASC,uBAAuB,QAAQ~~,4BAA4B~~;AACpE,SAASC,6BAA6B,QAAQ,~~kCAAkC~~;AAEhF,SAASC,kBAAkB,QAAQ,~~uBAAuB~~;AAC1D,SAASC,gCAAgC,QAAQ~~,4BAA4B~~;AAC7E,SAASC,oBAAoB,QAAQ,~~yBAAyB~~;AAC9D,SAASC,kBAAkB,QAAQ,~~uBAAuB~~;AAC1D,SAASC,mCAAmC,QAAQ,~~8BAA8B~~;AAClF,SAASC,gBAAgB,QAAQ,~~qBAAqB~~;AACtD,SAASC,qBAAqB,EAAEC,qBAAqB,QAAQ,~~oBAAoB~~;AACjF,SAASC,oBAAoB,QAAQ,~~yBAAyB~~;AAC9D,SAASC,2BAA2B,QAAQ,~~gCAAgC~~;AAC5E,SAASC,wBAAwB,QAAQ,~~6BAA6B~~;AACtE,SAASC,uBAAuB,QAAQ~~,4BAA4B~~;AACpE,SAASC,gBAAgB,QAAQ,~~qBAAqB~~"}
1	+ {"version":3,"sources":["../src/hooks/index.ts"],"sourcesContent":["export type { UseArrowNavigationGroupOptions } from './useArrowNavigationGroup';\nexport { useArrowNavigationGroup } from './useArrowNavigationGroup';\nexport type { UseFocusableGroupOptions } from './useFocusableGroup';\nexport { useFocusableGroup } from './useFocusableGroup';\nexport { useFocusFinders } from './useFocusFinders';\nexport { useFocusVisible } from './useFocusVisible';\nexport { useFocusWithin } from './useFocusWithin';\nexport { useKeyboardNavAttribute } from './useKeyboardNavAttribute';\nexport { useOnKeyboardNavigationChange } from './useOnKeyboardNavigationChange';\nexport type { UseModalAttributesOptions } from './useModalAttributes';\nexport { useModalAttributes } from './useModalAttributes';\nexport { useDangerousNeverHidden_unstable } from './useDangerousNeverHidden';\nexport { useTabsterAttributes } from './useTabsterAttributes';\nexport { useObservedElement } from './useObservedElement';\nexport { useMergedTabsterAttributes_unstable } from './useMergeTabsterAttributes';\nexport { useFocusObserved } from './useFocusObserved';\nexport { useRestoreFocusSource, useRestoreFocusTarget } from './useRestoreFocus';\nexport { useUncontrolledFocus } from './useUncontrolledFocus';\nexport { useIsNavigatingWithKeyboard } from './useIsNavigatingWithKeyboard';\nexport { useSetKeyboardNavigation } from './useSetKeyboardNavigation';\nexport { useFocusedElementChange } from './useFocusedElementChange';\nexport { useActivateModal } from './useActivateModal';\n"],"names":["useArrowNavigationGroup","useFocusableGroup","useFocusFinders","useFocusVisible","useFocusWithin","useKeyboardNavAttribute","useOnKeyboardNavigationChange","useModalAttributes","useDangerousNeverHidden_unstable","useTabsterAttributes","useObservedElement","useMergedTabsterAttributes_unstable","useFocusObserved","useRestoreFocusSource","useRestoreFocusTarget","useUncontrolledFocus","useIsNavigatingWithKeyboard","useSetKeyboardNavigation","useFocusedElementChange","useActivateModal"],"mappings":"AACA,SAASA,uBAAuB,QAAQ,+BAA4B;AAEpE,SAASC,iBAAiB,QAAQ,yBAAsB;AACxD,SAASC,eAAe,QAAQ,uBAAoB;AACpD,SAASC,eAAe,QAAQ,uBAAoB;AACpD,SAASC,cAAc,QAAQ,sBAAmB;AAClD,SAASC,uBAAuB,QAAQ,+BAA4B;AACpE,SAASC,6BAA6B,QAAQ,qCAAkC;AAEhF,SAASC,kBAAkB,QAAQ,0BAAuB;AAC1D,SAASC,gCAAgC,QAAQ,+BAA4B;AAC7E,SAASC,oBAAoB,QAAQ,4BAAyB;AAC9D,SAASC,kBAAkB,QAAQ,0BAAuB;AAC1D,SAASC,mCAAmC,QAAQ,iCAA8B;AAClF,SAASC,gBAAgB,QAAQ,wBAAqB;AACtD,SAASC,qBAAqB,EAAEC,qBAAqB,QAAQ,uBAAoB;AACjF,SAASC,oBAAoB,QAAQ,4BAAyB;AAC9D,SAASC,2BAA2B,QAAQ,mCAAgC;AAC5E,SAASC,wBAAwB,QAAQ,gCAA6B;AACtE,SAASC,uBAAuB,QAAQ,+BAA4B;AACpE,SAASC,gBAAgB,QAAQ,wBAAqB"}

package/lib/hooks/useActivateModal.js CHANGED Viewed

@@ -1,8 +1,8 @@
 'use client';
-import * as React from 'react';
-import { getModalizer } from 'tabster';
-import { useTimeout } from '@fluentui/react-utilities';
-import { useTabster } from './useTabster';
+import * as React from "react";
+import { getModalizer } from "tabster";
+import { useTimeout } from "@fluentui/react-utilities";
+import { useTabster } from "./useTabster.js";
 /**
  * Returns a function that activates a modal by element from the modal or modal container.
  */ export function useActivateModal() {

package/lib/hooks/useActivateModal.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/hooks/useActivateModal.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { getModalizer } from 'tabster';\nimport { useTimeout } from '@fluentui/react-utilities';\nimport { useTabster } from './useTabster';\n\n/*\n Returns a function that activates a modal by element from the modal or modal container.\n */\nexport function useActivateModal(): (elementFromModal: HTMLElement \| undefined) => void {\n const modalizerRefAPI = useTabster(getModalizer);\n\n const [setActivateModalTimeout] = useTimeout();\n const activateModal = React.useCallback(\n (elementFromModal: HTMLElement \| undefined) => {\n // We call the actual activation function on the next tick, because with the typical use case,\n // the hook will be called on the same tick when other Tabster attributes are being applied,\n // and on the current tick the element has just received the attributes, but Tabster has not\n // instantiated the Modalizer yet.\n setActivateModalTimeout(() => {\n modalizerRefAPI.current?.activate(elementFromModal);\n }, 0);\n },\n [modalizerRefAPI, setActivateModalTimeout],\n );\n\n return activateModal;\n}\n"],"names":["React","getModalizer","useTimeout","useTabster","useActivateModal","modalizerRefAPI","setActivateModalTimeout","activateModal","useCallback","elementFromModal","current","activate"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,YAAY,QAAQ,UAAU;AACvC,SAASC,UAAU,QAAQ,4BAA4B;AACvD,SAASC,UAAU,QAAQ,~~eAAe~~;AAE1C;;CAEC,GACD,OAAO,SAASC;IACd,MAAMC,kBAAkBF,WAAWF;IAEnC,MAAM,CAACK,wBAAwB,GAAGJ;IAClC,MAAMK,gBAAgBP,MAAMQ,WAAW,CACrC,CAACC;QACC,8FAA8F;QAC9F,4FAA4F;QAC5F,4FAA4F;QAC5F,kCAAkC;QAClCH,wBAAwB;gBACtBD;aAAAA,2BAAAA,gBAAgBK,OAAO,cAAvBL,+CAAAA,yBAAyBM,QAAQ,CAACF;QACpC,GAAG;IACL,GACA;QAACJ;QAAiBC;KAAwB;IAG5C,OAAOC;AACT"}
1	+ {"version":3,"sources":["../src/hooks/useActivateModal.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { getModalizer } from 'tabster';\nimport { useTimeout } from '@fluentui/react-utilities';\nimport { useTabster } from './useTabster';\n\n/*\n Returns a function that activates a modal by element from the modal or modal container.\n */\nexport function useActivateModal(): (elementFromModal: HTMLElement \| undefined) => void {\n const modalizerRefAPI = useTabster(getModalizer);\n\n const [setActivateModalTimeout] = useTimeout();\n const activateModal = React.useCallback(\n (elementFromModal: HTMLElement \| undefined) => {\n // We call the actual activation function on the next tick, because with the typical use case,\n // the hook will be called on the same tick when other Tabster attributes are being applied,\n // and on the current tick the element has just received the attributes, but Tabster has not\n // instantiated the Modalizer yet.\n setActivateModalTimeout(() => {\n modalizerRefAPI.current?.activate(elementFromModal);\n }, 0);\n },\n [modalizerRefAPI, setActivateModalTimeout],\n );\n\n return activateModal;\n}\n"],"names":["React","getModalizer","useTimeout","useTabster","useActivateModal","modalizerRefAPI","setActivateModalTimeout","activateModal","useCallback","elementFromModal","current","activate"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,YAAY,QAAQ,UAAU;AACvC,SAASC,UAAU,QAAQ,4BAA4B;AACvD,SAASC,UAAU,QAAQ,kBAAe;AAE1C;;CAEC,GACD,OAAO,SAASC;IACd,MAAMC,kBAAkBF,WAAWF;IAEnC,MAAM,CAACK,wBAAwB,GAAGJ;IAClC,MAAMK,gBAAgBP,MAAMQ,WAAW,CACrC,CAACC;QACC,8FAA8F;QAC9F,4FAA4F;QAC5F,4FAA4F;QAC5F,kCAAkC;QAClCH,wBAAwB;gBACtBD;aAAAA,2BAAAA,gBAAgBK,OAAO,cAAvBL,+CAAAA,yBAAyBM,QAAQ,CAACF;QACpC,GAAG;IACL,GACA;QAACJ;QAAiBC;KAAwB;IAG5C,OAAOC;AACT"}

package/lib/hooks/useArrowNavigationGroup.js CHANGED Viewed

@@ -1,7 +1,7 @@
 'use client';
-import { getMover, MoverDirections } from 'tabster';
-import { useTabsterAttributes } from './useTabsterAttributes';
-import { useTabster } from './useTabster';
+import { getMover, MoverDirections } from "tabster";
+import { useTabsterAttributes } from "./useTabsterAttributes.js";
+import { useTabster } from "./useTabster.js";
 /**
  * A hook that returns the necessary tabster attributes to support arrow key navigation
  * @param options - Options to configure keyboard navigation

package/lib/hooks/useArrowNavigationGroup.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/hooks/useArrowNavigationGroup.ts"],"sourcesContent":["'use client';\n\nimport type { Types } from 'tabster';\nimport { getMover, MoverDirections } from 'tabster';\nimport { useTabsterAttributes } from './useTabsterAttributes';\nimport { useTabster } from './useTabster';\n\nexport interface UseArrowNavigationGroupOptions {\n /*\n Focus will navigate vertically, horizontally or in both directions (grid), defaults to horizontally\n * @defaultValue vertical\n /\n axis?: 'vertical' \| 'horizontal' \| 'grid' \| 'grid-linear' \| 'both';\n /\n Focus will cycle to the first/last elements of the group without stopping\n /\n circular?: boolean;\n /\n Last focused element in the group will be remembered and focused (if still\n * available) when tabbing from outside of the group\n * @default true\n /\n memorizeCurrent?: boolean;\n /\n Allow tabbing within the arrow navigation group items.\n /\n tabbable?: boolean;\n /\n Tabster should ignore default handling of keydown events\n /\n ignoreDefaultKeydown?: Types.FocusableProps['ignoreKeydown'];\n /\n The default focusable item in the group will be an element with Focusable.isDefault property.\n * Note that there is no way in \\@fluentui/react-tabster to set default focusable element,\n * and this option is currently for internal testing purposes only.\n /\n // eslint-disable-next-line @typescript-eslint/naming-convention\n unstable_hasDefault?: boolean;\n}\n\n/\n A hook that returns the necessary tabster attributes to support arrow key navigation\n * @param options - Options to configure keyboard navigation\n */\nexport const useArrowNavigationGroup = (options: UseArrowNavigationGroupOptions = {}): Types.TabsterDOMAttribute => {\n const {\n circular,\n axis,\n memorizeCurrent = true,\n tabbable,\n ignoreDefaultKeydown,\n // eslint-disable-next-line @typescript-eslint/naming-convention\n unstable_hasDefault,\n } = options;\n\n useTabster(getMover);\n\n return useTabsterAttributes({\n mover: {\n cyclic: !!circular,\n direction: axisToMoverDirection(axis ?? 'vertical'),\n memorizeCurrent,\n tabbable,\n hasDefault: unstable_hasDefault,\n },\n ...(ignoreDefaultKeydown && {\n focusable: {\n ignoreKeydown: ignoreDefaultKeydown,\n },\n }),\n });\n};\n\nfunction axisToMoverDirection(axis: UseArrowNavigationGroupOptions['axis']): Types.MoverDirection {\n switch (axis) {\n case 'horizontal':\n return MoverDirections.Horizontal;\n case 'grid':\n return MoverDirections.Grid;\n case 'grid-linear':\n return MoverDirections.GridLinear;\n case 'both':\n return MoverDirections.Both;\n\n case 'vertical':\n default:\n return MoverDirections.Vertical;\n }\n}\n"],"names":["getMover","MoverDirections","useTabsterAttributes","useTabster","useArrowNavigationGroup","options","circular","axis","memorizeCurrent","tabbable","ignoreDefaultKeydown","unstable_hasDefault","mover","cyclic","direction","axisToMoverDirection","hasDefault","focusable","ignoreKeydown","Horizontal","Grid","GridLinear","Both","Vertical"],"mappings":"AAAA;AAGA,SAASA,QAAQ,EAAEC,eAAe,QAAQ,UAAU;AACpD,SAASC,oBAAoB,QAAQ,~~yBAAyB~~;AAC9D,SAASC,UAAU,QAAQ,~~eAAe~~;AAmC1C;;;CAGC,GACD,OAAO,MAAMC,0BAA0B,CAACC,UAA0C,CAAC,CAAC;IAClF,MAAM,EACJC,QAAQ,EACRC,IAAI,EACJC,kBAAkB,IAAI,EACtBC,QAAQ,EACRC,oBAAoB,EACpB,gEAAgE;IAChEC,mBAAmB,EACpB,GAAGN;IAEJF,WAAWH;IAEX,OAAOE,qBAAqB;QAC1BU,OAAO;YACLC,QAAQ,CAAC,CAACP;YACVQ,WAAWC,qBAAqBR,iBAAAA,kBAAAA,OAAQ;YACxCC;YACAC;YACAO,YAAYL;QACd;QACA,GAAID,wBAAwB;YAC1BO,WAAW;gBACTC,eAAeR;YACjB;QACF,CAAC;IACH;AACF,EAAE;AAEF,SAASK,qBAAqBR,IAA4C;IACxE,OAAQA;QACN,KAAK;YACH,OAAON,gBAAgBkB,UAAU;QACnC,KAAK;YACH,OAAOlB,gBAAgBmB,IAAI;QAC7B,KAAK;YACH,OAAOnB,gBAAgBoB,UAAU;QACnC,KAAK;YACH,OAAOpB,gBAAgBqB,IAAI;QAE7B,KAAK;QACL;YACE,OAAOrB,gBAAgBsB,QAAQ;IACnC;AACF"}
1	+ {"version":3,"sources":["../src/hooks/useArrowNavigationGroup.ts"],"sourcesContent":["'use client';\n\nimport type { Types } from 'tabster';\nimport { getMover, MoverDirections } from 'tabster';\nimport { useTabsterAttributes } from './useTabsterAttributes';\nimport { useTabster } from './useTabster';\n\nexport interface UseArrowNavigationGroupOptions {\n /*\n Focus will navigate vertically, horizontally or in both directions (grid), defaults to horizontally\n * @defaultValue vertical\n /\n axis?: 'vertical' \| 'horizontal' \| 'grid' \| 'grid-linear' \| 'both';\n /\n Focus will cycle to the first/last elements of the group without stopping\n /\n circular?: boolean;\n /\n Last focused element in the group will be remembered and focused (if still\n * available) when tabbing from outside of the group\n * @default true\n /\n memorizeCurrent?: boolean;\n /\n Allow tabbing within the arrow navigation group items.\n /\n tabbable?: boolean;\n /\n Tabster should ignore default handling of keydown events\n /\n ignoreDefaultKeydown?: Types.FocusableProps['ignoreKeydown'];\n /\n The default focusable item in the group will be an element with Focusable.isDefault property.\n * Note that there is no way in \\@fluentui/react-tabster to set default focusable element,\n * and this option is currently for internal testing purposes only.\n /\n // eslint-disable-next-line @typescript-eslint/naming-convention\n unstable_hasDefault?: boolean;\n}\n\n/\n A hook that returns the necessary tabster attributes to support arrow key navigation\n * @param options - Options to configure keyboard navigation\n */\nexport const useArrowNavigationGroup = (options: UseArrowNavigationGroupOptions = {}): Types.TabsterDOMAttribute => {\n const {\n circular,\n axis,\n memorizeCurrent = true,\n tabbable,\n ignoreDefaultKeydown,\n // eslint-disable-next-line @typescript-eslint/naming-convention\n unstable_hasDefault,\n } = options;\n\n useTabster(getMover);\n\n return useTabsterAttributes({\n mover: {\n cyclic: !!circular,\n direction: axisToMoverDirection(axis ?? 'vertical'),\n memorizeCurrent,\n tabbable,\n hasDefault: unstable_hasDefault,\n },\n ...(ignoreDefaultKeydown && {\n focusable: {\n ignoreKeydown: ignoreDefaultKeydown,\n },\n }),\n });\n};\n\nfunction axisToMoverDirection(axis: UseArrowNavigationGroupOptions['axis']): Types.MoverDirection {\n switch (axis) {\n case 'horizontal':\n return MoverDirections.Horizontal;\n case 'grid':\n return MoverDirections.Grid;\n case 'grid-linear':\n return MoverDirections.GridLinear;\n case 'both':\n return MoverDirections.Both;\n\n case 'vertical':\n default:\n return MoverDirections.Vertical;\n }\n}\n"],"names":["getMover","MoverDirections","useTabsterAttributes","useTabster","useArrowNavigationGroup","options","circular","axis","memorizeCurrent","tabbable","ignoreDefaultKeydown","unstable_hasDefault","mover","cyclic","direction","axisToMoverDirection","hasDefault","focusable","ignoreKeydown","Horizontal","Grid","GridLinear","Both","Vertical"],"mappings":"AAAA;AAGA,SAASA,QAAQ,EAAEC,eAAe,QAAQ,UAAU;AACpD,SAASC,oBAAoB,QAAQ,4BAAyB;AAC9D,SAASC,UAAU,QAAQ,kBAAe;AAmC1C;;;CAGC,GACD,OAAO,MAAMC,0BAA0B,CAACC,UAA0C,CAAC,CAAC;IAClF,MAAM,EACJC,QAAQ,EACRC,IAAI,EACJC,kBAAkB,IAAI,EACtBC,QAAQ,EACRC,oBAAoB,EACpB,gEAAgE;IAChEC,mBAAmB,EACpB,GAAGN;IAEJF,WAAWH;IAEX,OAAOE,qBAAqB;QAC1BU,OAAO;YACLC,QAAQ,CAAC,CAACP;YACVQ,WAAWC,qBAAqBR,iBAAAA,kBAAAA,OAAQ;YACxCC;YACAC;YACAO,YAAYL;QACd;QACA,GAAID,wBAAwB;YAC1BO,WAAW;gBACTC,eAAeR;YACjB;QACF,CAAC;IACH;AACF,EAAE;AAEF,SAASK,qBAAqBR,IAA4C;IACxE,OAAQA;QACN,KAAK;YACH,OAAON,gBAAgBkB,UAAU;QACnC,KAAK;YACH,OAAOlB,gBAAgBmB,IAAI;QAC7B,KAAK;YACH,OAAOnB,gBAAgBoB,UAAU;QACnC,KAAK;YACH,OAAOpB,gBAAgBqB,IAAI;QAE7B,KAAK;QACL;YACE,OAAOrB,gBAAgBsB,QAAQ;IACnC;AACF"}

package/lib/hooks/useFocusFinders.js CHANGED Viewed

@@ -1,7 +1,7 @@
 'use client';
-import * as React from 'react';
-import { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';
-import { useTabster } from './useTabster';
+import * as React from "react";
+import { useFluent_unstable as useFluent } from "@fluentui/react-shared-contexts";
+import { useTabster } from "./useTabster.js";
 /**
  * Returns a set of helper functions that will traverse focusable elements in the context of a root DOM element
  */ export const useFocusFinders = ()=>{

package/lib/hooks/useFocusFinders.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/hooks/useFocusFinders.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { Types as TabsterTypes } from 'tabster';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { useTabster } from './useTabster';\n\n/*\n Returns a set of helper functions that will traverse focusable elements in the context of a root DOM element\n */\nexport const useFocusFinders = (): {\n findAllFocusable: (container: HTMLElement \| null, acceptCondition?: (el: HTMLElement) => boolean) => HTMLElement[];\n findFirstFocusable: (container: HTMLElement \| null) => HTMLElement \| null \| undefined;\n findLastFocusable: (container: HTMLElement \| null) => HTMLElement \| null \| undefined;\n findNextFocusable: (\n currentElement: HTMLElement \| null,\n options?: { container?: HTMLElement },\n ) => HTMLElement \| null \| undefined;\n findPrevFocusable: (\n currentElement: HTMLElement \| null,\n options?: { container?: HTMLElement },\n ) => HTMLElement \| null \| undefined;\n} => {\n const tabsterRef = useTabster();\n const { targetDocument } = useFluent();\n\n // Narrow props for now and let need dictate additional props in the future\n const findAllFocusable = React.useCallback(\n (container: HTMLElement \| null, acceptCondition?: (el: HTMLElement) => boolean) =>\n (container && tabsterRef.current?.focusable.findAll({ container, acceptCondition })) \|\| [],\n [tabsterRef],\n );\n\n const findFirstFocusable = React.useCallback(\n (container: HTMLElement \| null) => container && tabsterRef.current?.focusable.findFirst({ container }),\n [tabsterRef],\n );\n\n const findLastFocusable = React.useCallback(\n (container: HTMLElement \| null) => container && tabsterRef.current?.focusable.findLast({ container }),\n [tabsterRef],\n );\n\n const findNextFocusable = React.useCallback(\n (currentElement: HTMLElement \| null, options: Pick<Partial<TabsterTypes.FindNextProps>, 'container'> = {}) => {\n if (!tabsterRef.current \|\| !targetDocument \|\| !currentElement) {\n return null;\n }\n\n const { container = targetDocument.body } = options;\n\n return tabsterRef.current.focusable.findNext({ currentElement, container });\n },\n [tabsterRef, targetDocument],\n );\n\n const findPrevFocusable = React.useCallback(\n (currentElement: HTMLElement \| null, options: Pick<Partial<TabsterTypes.FindNextProps>, 'container'> = {}) => {\n if (!tabsterRef.current \|\| !targetDocument \|\| !currentElement) {\n return null;\n }\n\n const { container = targetDocument.body } = options;\n\n return tabsterRef.current.focusable.findPrev({ currentElement, container });\n },\n [tabsterRef, targetDocument],\n );\n\n return {\n findAllFocusable,\n findFirstFocusable,\n findLastFocusable,\n findNextFocusable,\n findPrevFocusable,\n };\n};\n"],"names":["React","useFluent_unstable","useFluent","useTabster","useFocusFinders","tabsterRef","targetDocument","findAllFocusable","useCallback","container","acceptCondition","current","focusable","findAll","findFirstFocusable","findFirst","findLastFocusable","findLast","findNextFocusable","currentElement","options","body","findNext","findPrevFocusable","findPrev"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,sBAAsBC,SAAS,QAAQ,kCAAkC;AAClF,SAASC,UAAU,QAAQ,~~eAAe~~;AAE1C;;CAEC,GACD,OAAO,MAAMC,kBAAkB;IAa7B,MAAMC,aAAaF;IACnB,MAAM,EAAEG,cAAc,EAAE,GAAGJ;IAE3B,2EAA2E;IAC3E,MAAMK,mBAAmBP,MAAMQ,WAAW,CACxC,CAACC,WAA+BC;YAChBL;eAAd,AAACI,eAAaJ,sBAAAA,WAAWM,OAAO,cAAlBN,0CAAAA,oBAAoBO,SAAS,CAACC,OAAO,CAAC;YAAEJ;YAAWC;QAAgB,OAAO,EAAE;OAC5F;QAACL;KAAW;IAGd,MAAMS,qBAAqBd,MAAMQ,WAAW,CAC1C,CAACC;YAA+CJ;eAAbI,eAAaJ,sBAAAA,WAAWM,OAAO,cAAlBN,0CAAAA,oBAAoBO,SAAS,CAACG,SAAS,CAAC;YAAEN;QAAU;OACpG;QAACJ;KAAW;IAGd,MAAMW,oBAAoBhB,MAAMQ,WAAW,CACzC,CAACC;YAA+CJ;eAAbI,eAAaJ,sBAAAA,WAAWM,OAAO,cAAlBN,0CAAAA,oBAAoBO,SAAS,CAACK,QAAQ,CAAC;YAAER;QAAU;OACnG;QAACJ;KAAW;IAGd,MAAMa,oBAAoBlB,MAAMQ,WAAW,CACzC,CAACW,gBAAoCC,UAAkE,CAAC,CAAC;QACvG,IAAI,CAACf,WAAWM,OAAO,IAAI,CAACL,kBAAkB,CAACa,gBAAgB;YAC7D,OAAO;QACT;QAEA,MAAM,EAAEV,YAAYH,eAAee,IAAI,EAAE,GAAGD;QAE5C,OAAOf,WAAWM,OAAO,CAACC,SAAS,CAACU,QAAQ,CAAC;YAAEH;YAAgBV;QAAU;IAC3E,GACA;QAACJ;QAAYC;KAAe;IAG9B,MAAMiB,oBAAoBvB,MAAMQ,WAAW,CACzC,CAACW,gBAAoCC,UAAkE,CAAC,CAAC;QACvG,IAAI,CAACf,WAAWM,OAAO,IAAI,CAACL,kBAAkB,CAACa,gBAAgB;YAC7D,OAAO;QACT;QAEA,MAAM,EAAEV,YAAYH,eAAee,IAAI,EAAE,GAAGD;QAE5C,OAAOf,WAAWM,OAAO,CAACC,SAAS,CAACY,QAAQ,CAAC;YAAEL;YAAgBV;QAAU;IAC3E,GACA;QAACJ;QAAYC;KAAe;IAG9B,OAAO;QACLC;QACAO;QACAE;QACAE;QACAK;IACF;AACF,EAAE"}
1	+ {"version":3,"sources":["../src/hooks/useFocusFinders.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { Types as TabsterTypes } from 'tabster';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { useTabster } from './useTabster';\n\n/*\n Returns a set of helper functions that will traverse focusable elements in the context of a root DOM element\n */\nexport const useFocusFinders = (): {\n findAllFocusable: (container: HTMLElement \| null, acceptCondition?: (el: HTMLElement) => boolean) => HTMLElement[];\n findFirstFocusable: (container: HTMLElement \| null) => HTMLElement \| null \| undefined;\n findLastFocusable: (container: HTMLElement \| null) => HTMLElement \| null \| undefined;\n findNextFocusable: (\n currentElement: HTMLElement \| null,\n options?: { container?: HTMLElement },\n ) => HTMLElement \| null \| undefined;\n findPrevFocusable: (\n currentElement: HTMLElement \| null,\n options?: { container?: HTMLElement },\n ) => HTMLElement \| null \| undefined;\n} => {\n const tabsterRef = useTabster();\n const { targetDocument } = useFluent();\n\n // Narrow props for now and let need dictate additional props in the future\n const findAllFocusable = React.useCallback(\n (container: HTMLElement \| null, acceptCondition?: (el: HTMLElement) => boolean) =>\n (container && tabsterRef.current?.focusable.findAll({ container, acceptCondition })) \|\| [],\n [tabsterRef],\n );\n\n const findFirstFocusable = React.useCallback(\n (container: HTMLElement \| null) => container && tabsterRef.current?.focusable.findFirst({ container }),\n [tabsterRef],\n );\n\n const findLastFocusable = React.useCallback(\n (container: HTMLElement \| null) => container && tabsterRef.current?.focusable.findLast({ container }),\n [tabsterRef],\n );\n\n const findNextFocusable = React.useCallback(\n (currentElement: HTMLElement \| null, options: Pick<Partial<TabsterTypes.FindNextProps>, 'container'> = {}) => {\n if (!tabsterRef.current \|\| !targetDocument \|\| !currentElement) {\n return null;\n }\n\n const { container = targetDocument.body } = options;\n\n return tabsterRef.current.focusable.findNext({ currentElement, container });\n },\n [tabsterRef, targetDocument],\n );\n\n const findPrevFocusable = React.useCallback(\n (currentElement: HTMLElement \| null, options: Pick<Partial<TabsterTypes.FindNextProps>, 'container'> = {}) => {\n if (!tabsterRef.current \|\| !targetDocument \|\| !currentElement) {\n return null;\n }\n\n const { container = targetDocument.body } = options;\n\n return tabsterRef.current.focusable.findPrev({ currentElement, container });\n },\n [tabsterRef, targetDocument],\n );\n\n return {\n findAllFocusable,\n findFirstFocusable,\n findLastFocusable,\n findNextFocusable,\n findPrevFocusable,\n };\n};\n"],"names":["React","useFluent_unstable","useFluent","useTabster","useFocusFinders","tabsterRef","targetDocument","findAllFocusable","useCallback","container","acceptCondition","current","focusable","findAll","findFirstFocusable","findFirst","findLastFocusable","findLast","findNextFocusable","currentElement","options","body","findNext","findPrevFocusable","findPrev"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,sBAAsBC,SAAS,QAAQ,kCAAkC;AAClF,SAASC,UAAU,QAAQ,kBAAe;AAE1C;;CAEC,GACD,OAAO,MAAMC,kBAAkB;IAa7B,MAAMC,aAAaF;IACnB,MAAM,EAAEG,cAAc,EAAE,GAAGJ;IAE3B,2EAA2E;IAC3E,MAAMK,mBAAmBP,MAAMQ,WAAW,CACxC,CAACC,WAA+BC;YAChBL;eAAd,AAACI,eAAaJ,sBAAAA,WAAWM,OAAO,cAAlBN,0CAAAA,oBAAoBO,SAAS,CAACC,OAAO,CAAC;YAAEJ;YAAWC;QAAgB,OAAO,EAAE;OAC5F;QAACL;KAAW;IAGd,MAAMS,qBAAqBd,MAAMQ,WAAW,CAC1C,CAACC;YAA+CJ;eAAbI,eAAaJ,sBAAAA,WAAWM,OAAO,cAAlBN,0CAAAA,oBAAoBO,SAAS,CAACG,SAAS,CAAC;YAAEN;QAAU;OACpG;QAACJ;KAAW;IAGd,MAAMW,oBAAoBhB,MAAMQ,WAAW,CACzC,CAACC;YAA+CJ;eAAbI,eAAaJ,sBAAAA,WAAWM,OAAO,cAAlBN,0CAAAA,oBAAoBO,SAAS,CAACK,QAAQ,CAAC;YAAER;QAAU;OACnG;QAACJ;KAAW;IAGd,MAAMa,oBAAoBlB,MAAMQ,WAAW,CACzC,CAACW,gBAAoCC,UAAkE,CAAC,CAAC;QACvG,IAAI,CAACf,WAAWM,OAAO,IAAI,CAACL,kBAAkB,CAACa,gBAAgB;YAC7D,OAAO;QACT;QAEA,MAAM,EAAEV,YAAYH,eAAee,IAAI,EAAE,GAAGD;QAE5C,OAAOf,WAAWM,OAAO,CAACC,SAAS,CAACU,QAAQ,CAAC;YAAEH;YAAgBV;QAAU;IAC3E,GACA;QAACJ;QAAYC;KAAe;IAG9B,MAAMiB,oBAAoBvB,MAAMQ,WAAW,CACzC,CAACW,gBAAoCC,UAAkE,CAAC,CAAC;QACvG,IAAI,CAACf,WAAWM,OAAO,IAAI,CAACL,kBAAkB,CAACa,gBAAgB;YAC7D,OAAO;QACT;QAEA,MAAM,EAAEV,YAAYH,eAAee,IAAI,EAAE,GAAGD;QAE5C,OAAOf,WAAWM,OAAO,CAACC,SAAS,CAACY,QAAQ,CAAC;YAAEL;YAAgBV;QAAU;IAC3E,GACA;QAACJ;QAAYC;KAAe;IAG9B,OAAO;QACLC;QACAO;QACAE;QACAE;QACAK;IACF;AACF,EAAE"}

package/lib/hooks/useFocusObserved.js CHANGED Viewed

@@ -1,7 +1,7 @@
 'use client';
-import * as React from 'react';
-import { getObservedElement } from 'tabster';
-import { useTabster } from './useTabster';
+import * as React from "react";
+import { getObservedElement } from "tabster";
+import { useTabster } from "./useTabster.js";
 /**
  * @param name - The observed element to focus
  * @param options - Options for the focus observed

package/lib/hooks/useFocusObserved.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/hooks/useFocusObserved.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { Types as TabsterTypes } from 'tabster';\nimport { getObservedElement } from 'tabster';\nimport { useTabster } from './useTabster';\n\ninterface UseFocusObservedOptions {\n /*\n After timeout the focus attempt fails\n /\n timeout?: number;\n}\n\n/\n @param name - The observed element to focus\n * @param options - Options for the focus observed\n \n @returns Function that will focus an element\n */\nexport function useFocusObserved(\n name: string,\n options: UseFocusObservedOptions = {},\n): () => TabsterTypes.ObservedElementAsyncRequest<boolean> {\n const { timeout = 1000 } = options;\n const observedAPIRef = useTabster(getObservedElement);\n\n return React.useCallback(() => {\n const observerAPI = observedAPIRef.current;\n\n if (observerAPI) {\n return observerAPI.requestFocus(name, timeout);\n }\n\n return {\n result: Promise.resolve(false),\n cancel: () => null,\n diagnostics: {},\n };\n }, [observedAPIRef, name, timeout]);\n}\n"],"names":["React","getObservedElement","useTabster","useFocusObserved","name","options","timeout","observedAPIRef","useCallback","observerAPI","current","requestFocus","result","Promise","resolve","cancel","diagnostics"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,kBAAkB,QAAQ,UAAU;AAC7C,SAASC,UAAU,QAAQ,~~eAAe~~;AAS1C;;;;;CAKC,GACD,OAAO,SAASC,iBACdC,IAAY,EACZC,UAAmC,CAAC,CAAC;IAErC,MAAM,EAAEC,UAAU,IAAI,EAAE,GAAGD;IAC3B,MAAME,iBAAiBL,WAAWD;IAElC,OAAOD,MAAMQ,WAAW,CAAC;QACvB,MAAMC,cAAcF,eAAeG,OAAO;QAE1C,IAAID,aAAa;YACf,OAAOA,YAAYE,YAAY,CAACP,MAAME;QACxC;QAEA,OAAO;YACLM,QAAQC,QAAQC,OAAO,CAAC;YACxBC,QAAQ,IAAM;YACdC,aAAa,CAAC;QAChB;IACF,GAAG;QAACT;QAAgBH;QAAME;KAAQ;AACpC"}
1	+ {"version":3,"sources":["../src/hooks/useFocusObserved.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { Types as TabsterTypes } from 'tabster';\nimport { getObservedElement } from 'tabster';\nimport { useTabster } from './useTabster';\n\ninterface UseFocusObservedOptions {\n /*\n After timeout the focus attempt fails\n /\n timeout?: number;\n}\n\n/\n @param name - The observed element to focus\n * @param options - Options for the focus observed\n \n @returns Function that will focus an element\n */\nexport function useFocusObserved(\n name: string,\n options: UseFocusObservedOptions = {},\n): () => TabsterTypes.ObservedElementAsyncRequest<boolean> {\n const { timeout = 1000 } = options;\n const observedAPIRef = useTabster(getObservedElement);\n\n return React.useCallback(() => {\n const observerAPI = observedAPIRef.current;\n\n if (observerAPI) {\n return observerAPI.requestFocus(name, timeout);\n }\n\n return {\n result: Promise.resolve(false),\n cancel: () => null,\n diagnostics: {},\n };\n }, [observedAPIRef, name, timeout]);\n}\n"],"names":["React","getObservedElement","useTabster","useFocusObserved","name","options","timeout","observedAPIRef","useCallback","observerAPI","current","requestFocus","result","Promise","resolve","cancel","diagnostics"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,kBAAkB,QAAQ,UAAU;AAC7C,SAASC,UAAU,QAAQ,kBAAe;AAS1C;;;;;CAKC,GACD,OAAO,SAASC,iBACdC,IAAY,EACZC,UAAmC,CAAC,CAAC;IAErC,MAAM,EAAEC,UAAU,IAAI,EAAE,GAAGD;IAC3B,MAAME,iBAAiBL,WAAWD;IAElC,OAAOD,MAAMQ,WAAW,CAAC;QACvB,MAAMC,cAAcF,eAAeG,OAAO;QAE1C,IAAID,aAAa;YACf,OAAOA,YAAYE,YAAY,CAACP,MAAME;QACxC;QAEA,OAAO;YACLM,QAAQC,QAAQC,OAAO,CAAC;YACxBC,QAAQ,IAAM;YACdC,aAAa,CAAC;QAChB;IACF,GAAG;QAACT;QAAgBH;QAAME;KAAQ;AACpC"}

package/lib/hooks/useFocusVisible.js CHANGED Viewed

@@ -1,7 +1,7 @@
 'use client';
-import * as React from 'react';
-import { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';
-import { applyFocusVisiblePolyfill } from '../focus/focusVisiblePolyfill';
+import * as React from "react";
+import { useFluent_unstable as useFluent } from "@fluentui/react-shared-contexts";
+import { applyFocusVisiblePolyfill } from "../focus/focusVisiblePolyfill.js";
 export function useFocusVisible(options = {}) {
     const contextValue = useFluent();
     const scopeRef = React.useRef(null);

package/lib/hooks/useFocusVisible.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/hooks/useFocusVisible.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\n\nimport { applyFocusVisiblePolyfill } from '../focus/focusVisiblePolyfill';\n\ntype UseFocusVisibleOptions = {\n targetDocument?: Document;\n};\n\nexport function useFocusVisible<TElement extends HTMLElement = HTMLElement>(\n options: UseFocusVisibleOptions = {},\n): React.RefObject<TElement \| null> {\n const contextValue = useFluent();\n const scopeRef = React.useRef<TElement>(null);\n\n const targetDocument = options.targetDocument ?? contextValue.targetDocument;\n\n React.useEffect(() => {\n if (targetDocument?.defaultView && scopeRef.current) {\n return applyFocusVisiblePolyfill(scopeRef.current, targetDocument.defaultView);\n }\n }, [scopeRef, targetDocument]);\n\n return scopeRef;\n}\n"],"names":["React","useFluent_unstable","useFluent","applyFocusVisiblePolyfill","useFocusVisible","options","contextValue","scopeRef","useRef","targetDocument","useEffect","defaultView","current"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,sBAAsBC,SAAS,QAAQ,kCAAkC;AAElF,SAASC,yBAAyB,QAAQ,~~gCAAgC~~;AAM1E,OAAO,SAASC,gBACdC,UAAkC,CAAC,CAAC;IAEpC,MAAMC,eAAeJ;IACrB,MAAMK,WAAWP,MAAMQ,MAAM,CAAW;QAEjBH;IAAvB,MAAMI,iBAAiBJ,CAAAA,0BAAAA,QAAQI,cAAc,cAAtBJ,qCAAAA,0BAA0BC,aAAaG,cAAc;IAE5ET,MAAMU,SAAS,CAAC;QACd,IAAID,CAAAA,2BAAAA,qCAAAA,eAAgBE,WAAW,KAAIJ,SAASK,OAAO,EAAE;YACnD,OAAOT,0BAA0BI,SAASK,OAAO,EAAEH,eAAeE,WAAW;QAC/E;IACF,GAAG;QAACJ;QAAUE;KAAe;IAE7B,OAAOF;AACT"}
1	+ {"version":3,"sources":["../src/hooks/useFocusVisible.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\n\nimport { applyFocusVisiblePolyfill } from '../focus/focusVisiblePolyfill';\n\ntype UseFocusVisibleOptions = {\n targetDocument?: Document;\n};\n\nexport function useFocusVisible<TElement extends HTMLElement = HTMLElement>(\n options: UseFocusVisibleOptions = {},\n): React.RefObject<TElement \| null> {\n const contextValue = useFluent();\n const scopeRef = React.useRef<TElement>(null);\n\n const targetDocument = options.targetDocument ?? contextValue.targetDocument;\n\n React.useEffect(() => {\n if (targetDocument?.defaultView && scopeRef.current) {\n return applyFocusVisiblePolyfill(scopeRef.current, targetDocument.defaultView);\n }\n }, [scopeRef, targetDocument]);\n\n return scopeRef;\n}\n"],"names":["React","useFluent_unstable","useFluent","applyFocusVisiblePolyfill","useFocusVisible","options","contextValue","scopeRef","useRef","targetDocument","useEffect","defaultView","current"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,sBAAsBC,SAAS,QAAQ,kCAAkC;AAElF,SAASC,yBAAyB,QAAQ,mCAAgC;AAM1E,OAAO,SAASC,gBACdC,UAAkC,CAAC,CAAC;IAEpC,MAAMC,eAAeJ;IACrB,MAAMK,WAAWP,MAAMQ,MAAM,CAAW;QAEjBH;IAAvB,MAAMI,iBAAiBJ,CAAAA,0BAAAA,QAAQI,cAAc,cAAtBJ,qCAAAA,0BAA0BC,aAAaG,cAAc;IAE5ET,MAAMU,SAAS,CAAC;QACd,IAAID,CAAAA,2BAAAA,qCAAAA,eAAgBE,WAAW,KAAIJ,SAASK,OAAO,EAAE;YACnD,OAAOT,0BAA0BI,SAASK,OAAO,EAAEH,eAAeE,WAAW;QAC/E;IACF,GAAG;QAACJ;QAAUE;KAAe;IAE7B,OAAOF;AACT"}

package/lib/hooks/useFocusWithin.js CHANGED Viewed

@@ -1,7 +1,7 @@
 'use client';
-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.js";
 /**
  * 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

package/lib/hooks/useFocusWithin.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/hooks/useFocusWithin.ts"],"sourcesContent":["'use client';\n\nimport * 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>(): React.RefObject<TElement \| null> {\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"],"names":["React","useFluent_unstable","useFluent","applyFocusWithinPolyfill","useFocusWithin","targetDocument","elementRef","useRef","useEffect","defaultView","current"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,sBAAsBC,SAAS,QAAQ,kCAAkC;AAClF,SAASC,wBAAwB,QAAQ~~,+BAA~~+B;AAExE;;;;CAIC,GACD,OAAO,SAASC;IACd,MAAM,EAAEC,cAAc,EAAE,GAAGH;IAC3B,MAAMI,aAAaN,MAAMO,MAAM,CAAW;IAE1CP,MAAMQ,SAAS,CAAC;QACd,IAAIH,CAAAA,2BAAAA,qCAAAA,eAAgBI,WAAW,KAAIH,WAAWI,OAAO,EAAE;YACrD,OAAOP,yBAAyBG,WAAWI,OAAO,EAAEL,eAAeI,WAAW;QAChF;IACF,GAAG;QAACH;QAAYD;KAAe;IAE/B,OAAOC;AACT"}
1	+ {"version":3,"sources":["../src/hooks/useFocusWithin.ts"],"sourcesContent":["'use client';\n\nimport * 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>(): React.RefObject<TElement \| null> {\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"],"names":["React","useFluent_unstable","useFluent","applyFocusWithinPolyfill","useFocusWithin","targetDocument","elementRef","useRef","useEffect","defaultView","current"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,sBAAsBC,SAAS,QAAQ,kCAAkC;AAClF,SAASC,wBAAwB,QAAQ,kCAA+B;AAExE;;;;CAIC,GACD,OAAO,SAASC;IACd,MAAM,EAAEC,cAAc,EAAE,GAAGH;IAC3B,MAAMI,aAAaN,MAAMO,MAAM,CAAW;IAE1CP,MAAMQ,SAAS,CAAC;QACd,IAAIH,CAAAA,2BAAAA,qCAAAA,eAAgBI,WAAW,KAAIH,WAAWI,OAAO,EAAE;YACrD,OAAOP,yBAAyBG,WAAWI,OAAO,EAAEL,eAAeI,WAAW;QAChF;IACF,GAAG;QAACH;QAAYD;KAAe;IAE/B,OAAOC;AACT"}

package/lib/hooks/useFocusableGroup.js CHANGED Viewed

@@ -1,7 +1,7 @@
 'use client';
-import { getGroupper, GroupperTabbabilities } from 'tabster';
-import { useTabsterAttributes } from './useTabsterAttributes';
-import { useTabster } from './useTabster';
+import { getGroupper, GroupperTabbabilities } from "tabster";
+import { useTabsterAttributes } from "./useTabsterAttributes.js";
+import { useTabster } from "./useTabster.js";
 /**
  * A hook that returns the necessary tabster attributes to support groupping.
  * @param options - Options to configure keyboard navigation

package/lib/hooks/useFocusableGroup.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/hooks/useFocusableGroup.ts"],"sourcesContent":["'use client';\n\nimport type { Types } from 'tabster';\nimport { getGroupper, GroupperTabbabilities } 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 Tabster can ignore default handling of keydown events\n /\n ignoreDefaultKeydown?: Types.FocusableProps['ignoreKeydown'];\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 useTabster(getGroupper);\n\n return useTabsterAttributes({\n groupper: {\n tabbability: getTabbability(options?.tabBehavior),\n },\n focusable: {\n ignoreKeydown: options?.ignoreDefaultKeydown,\n },\n });\n};\n\nconst getTabbability = (\n tabBehavior?: UseFocusableGroupOptions['tabBehavior'],\n): Types.GroupperTabbability \| undefined => {\n switch (tabBehavior) {\n case 'unlimited':\n return GroupperTabbabilities.Unlimited;\n case 'limited':\n return GroupperTabbabilities.Limited;\n case 'limited-trap-focus':\n return GroupperTabbabilities.LimitedTrapFocus;\n default:\n return undefined;\n }\n};\n"],"names":["getGroupper","GroupperTabbabilities","useTabsterAttributes","useTabster","useFocusableGroup","options","groupper","tabbability","getTabbability","tabBehavior","focusable","ignoreKeydown","ignoreDefaultKeydown","Unlimited","Limited","LimitedTrapFocus","undefined"],"mappings":"AAAA;AAGA,SAASA,WAAW,EAAEC,qBAAqB,QAAQ,UAAU;AAC7D,SAASC,oBAAoB,QAAQ,~~yBAAyB~~;AAC9D,SAASC,UAAU,QAAQ,~~eAAe~~;AAc1C;;;CAGC,GACD,OAAO,MAAMC,oBAAoB,CAACC;IAChCF,WAAWH;IAEX,OAAOE,qBAAqB;QAC1BI,UAAU;YACRC,aAAaC,eAAeH,oBAAAA,8BAAAA,QAASI,WAAW;QAClD;QACAC,WAAW;YACTC,aAAa,EAAEN,oBAAAA,8BAAAA,QAASO,oBAAoB;QAC9C;IACF;AACF,EAAE;AAEF,MAAMJ,iBAAiB,CACrBC;IAEA,OAAQA;QACN,KAAK;YACH,OAAOR,sBAAsBY,SAAS;QACxC,KAAK;YACH,OAAOZ,sBAAsBa,OAAO;QACtC,KAAK;YACH,OAAOb,sBAAsBc,gBAAgB;QAC/C;YACE,OAAOC;IACX;AACF"}
1	+ {"version":3,"sources":["../src/hooks/useFocusableGroup.ts"],"sourcesContent":["'use client';\n\nimport type { Types } from 'tabster';\nimport { getGroupper, GroupperTabbabilities } 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 Tabster can ignore default handling of keydown events\n /\n ignoreDefaultKeydown?: Types.FocusableProps['ignoreKeydown'];\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 useTabster(getGroupper);\n\n return useTabsterAttributes({\n groupper: {\n tabbability: getTabbability(options?.tabBehavior),\n },\n focusable: {\n ignoreKeydown: options?.ignoreDefaultKeydown,\n },\n });\n};\n\nconst getTabbability = (\n tabBehavior?: UseFocusableGroupOptions['tabBehavior'],\n): Types.GroupperTabbability \| undefined => {\n switch (tabBehavior) {\n case 'unlimited':\n return GroupperTabbabilities.Unlimited;\n case 'limited':\n return GroupperTabbabilities.Limited;\n case 'limited-trap-focus':\n return GroupperTabbabilities.LimitedTrapFocus;\n default:\n return undefined;\n }\n};\n"],"names":["getGroupper","GroupperTabbabilities","useTabsterAttributes","useTabster","useFocusableGroup","options","groupper","tabbability","getTabbability","tabBehavior","focusable","ignoreKeydown","ignoreDefaultKeydown","Unlimited","Limited","LimitedTrapFocus","undefined"],"mappings":"AAAA;AAGA,SAASA,WAAW,EAAEC,qBAAqB,QAAQ,UAAU;AAC7D,SAASC,oBAAoB,QAAQ,4BAAyB;AAC9D,SAASC,UAAU,QAAQ,kBAAe;AAc1C;;;CAGC,GACD,OAAO,MAAMC,oBAAoB,CAACC;IAChCF,WAAWH;IAEX,OAAOE,qBAAqB;QAC1BI,UAAU;YACRC,aAAaC,eAAeH,oBAAAA,8BAAAA,QAASI,WAAW;QAClD;QACAC,WAAW;YACTC,aAAa,EAAEN,oBAAAA,8BAAAA,QAASO,oBAAoB;QAC9C;IACF;AACF,EAAE;AAEF,MAAMJ,iBAAiB,CACrBC;IAEA,OAAQA;QACN,KAAK;YACH,OAAOR,sBAAsBY,SAAS;QACxC,KAAK;YACH,OAAOZ,sBAAsBa,OAAO;QACtC,KAAK;YACH,OAAOb,sBAAsBc,gBAAgB;QAC/C;YACE,OAAOC;IACX;AACF"}

package/lib/hooks/useFocusedElementChange.js CHANGED Viewed

@@ -1,9 +1,9 @@
 'use client';
-import { disposeTabster } from 'tabster';
-import * as React from 'react';
-import { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';
-import { useEventCallback } from '@fluentui/react-utilities';
-import { createTabsterWithConfig } from './useTabster';
+import { disposeTabster } from "tabster";
+import * as React from "react";
+import { useFluent_unstable as useFluent } from "@fluentui/react-shared-contexts";
+import { useEventCallback } from "@fluentui/react-utilities";
+import { createTabsterWithConfig } from "./useTabster.js";
 /**
  * Subscribes to the tabster focused element. Calls the callback when the focused element changes.
  * @param callback - Callback to subscribe to the focused element.

package/lib/hooks/useFocusedElementChange.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/hooks/useFocusedElementChange.ts"],"sourcesContent":["'use client';\n\nimport { type Types as TabsterTypes, disposeTabster } from 'tabster';\nimport * as React from 'react';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { useEventCallback } from '@fluentui/react-utilities';\n\nimport { createTabsterWithConfig } from './useTabster';\n\n/*\n Subscribes to the tabster focused element. Calls the callback when the focused element changes.\n * @param callback - Callback to subscribe to the focused element.\n */\nexport function useFocusedElementChange(\n callback: TabsterTypes.SubscribableCallback<HTMLElement \| undefined, TabsterTypes.FocusedElementDetail>,\n): void {\n const { targetDocument } = useFluent();\n const listener = useEventCallback(callback);\n\n React.useEffect(() => {\n const tabster = createTabsterWithConfig(targetDocument);\n\n if (tabster) {\n tabster.focusedElement.subscribe(listener);\n\n return () => {\n tabster.focusedElement.unsubscribe(listener);\n disposeTabster(tabster);\n };\n }\n }, [listener, targetDocument]);\n}\n"],"names":["disposeTabster","React","useFluent_unstable","useFluent","useEventCallback","createTabsterWithConfig","useFocusedElementChange","callback","targetDocument","listener","useEffect","tabster","focusedElement","subscribe","unsubscribe"],"mappings":"AAAA;AAEA,SAAqCA,cAAc,QAAQ,UAAU;AACrE,YAAYC,WAAW,QAAQ;AAC/B,SAASC,sBAAsBC,SAAS,QAAQ,kCAAkC;AAClF,SAASC,gBAAgB,QAAQ,4BAA4B;AAE7D,SAASC,uBAAuB,QAAQ,~~eAAe~~;AAEvD;;;CAGC,GACD,OAAO,SAASC,wBACdC,QAAuG;IAEvG,MAAM,EAAEC,cAAc,EAAE,GAAGL;IAC3B,MAAMM,WAAWL,iBAAiBG;IAElCN,MAAMS,SAAS,CAAC;QACd,MAAMC,UAAUN,wBAAwBG;QAExC,IAAIG,SAAS;YACXA,QAAQC,cAAc,CAACC,SAAS,CAACJ;YAEjC,OAAO;gBACLE,QAAQC,cAAc,CAACE,WAAW,CAACL;gBACnCT,eAAeW;YACjB;QACF;IACF,GAAG;QAACF;QAAUD;KAAe;AAC/B"}
1	+ {"version":3,"sources":["../src/hooks/useFocusedElementChange.ts"],"sourcesContent":["'use client';\n\nimport { type Types as TabsterTypes, disposeTabster } from 'tabster';\nimport * as React from 'react';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { useEventCallback } from '@fluentui/react-utilities';\n\nimport { createTabsterWithConfig } from './useTabster';\n\n/*\n Subscribes to the tabster focused element. Calls the callback when the focused element changes.\n * @param callback - Callback to subscribe to the focused element.\n */\nexport function useFocusedElementChange(\n callback: TabsterTypes.SubscribableCallback<HTMLElement \| undefined, TabsterTypes.FocusedElementDetail>,\n): void {\n const { targetDocument } = useFluent();\n const listener = useEventCallback(callback);\n\n React.useEffect(() => {\n const tabster = createTabsterWithConfig(targetDocument);\n\n if (tabster) {\n tabster.focusedElement.subscribe(listener);\n\n return () => {\n tabster.focusedElement.unsubscribe(listener);\n disposeTabster(tabster);\n };\n }\n }, [listener, targetDocument]);\n}\n"],"names":["disposeTabster","React","useFluent_unstable","useFluent","useEventCallback","createTabsterWithConfig","useFocusedElementChange","callback","targetDocument","listener","useEffect","tabster","focusedElement","subscribe","unsubscribe"],"mappings":"AAAA;AAEA,SAAqCA,cAAc,QAAQ,UAAU;AACrE,YAAYC,WAAW,QAAQ;AAC/B,SAASC,sBAAsBC,SAAS,QAAQ,kCAAkC;AAClF,SAASC,gBAAgB,QAAQ,4BAA4B;AAE7D,SAASC,uBAAuB,QAAQ,kBAAe;AAEvD;;;CAGC,GACD,OAAO,SAASC,wBACdC,QAAuG;IAEvG,MAAM,EAAEC,cAAc,EAAE,GAAGL;IAC3B,MAAMM,WAAWL,iBAAiBG;IAElCN,MAAMS,SAAS,CAAC;QACd,MAAMC,UAAUN,wBAAwBG;QAExC,IAAIG,SAAS;YACXA,QAAQC,cAAc,CAACC,SAAS,CAACJ;YAEjC,OAAO;gBACLE,QAAQC,cAAc,CAACE,WAAW,CAACL;gBACnCT,eAAeW;YACjB;QACF;IACF,GAAG;QAACF;QAAUD;KAAe;AAC/B"}

package/lib/hooks/useIsNavigatingWithKeyboard.js CHANGED Viewed

@@ -1,6 +1,6 @@
 'use client';
-import * as React from 'react';
-import { useKeyborgRef } from './useKeyborgRef';
+import * as React from "react";
+import { useKeyborgRef } from "./useKeyborgRef.js";
 /**
  * Instantiates [keyborg](https://github.com/microsoft/keyborg) and checks if the user is navigating with the keyboard.
  * @returns

package/lib/hooks/useIsNavigatingWithKeyboard.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/hooks/useIsNavigatingWithKeyboard.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useKeyborgRef } from './useKeyborgRef';\n\n/*\n Instantiates [keyborg](https://github.com/microsoft/keyborg) and checks if the user is navigating with the keyboard.\n * @returns\n */\nexport function useIsNavigatingWithKeyboard(): () => boolean {\n const keyborgRef = useKeyborgRef();\n\n return React.useCallback(() => {\n return keyborgRef.current?.isNavigatingWithKeyboard() ?? false;\n }, [keyborgRef]);\n}\n"],"names":["React","useKeyborgRef","useIsNavigatingWithKeyboard","keyborgRef","useCallback","current","isNavigatingWithKeyboard"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,aAAa,QAAQ,~~kBAAkB~~;AAEhD;;;CAGC,GACD,OAAO,SAASC;IACd,MAAMC,aAAaF;IAEnB,OAAOD,MAAMI,WAAW,CAAC;YAChBD;YAAAA;QAAP,OAAOA,CAAAA,gDAAAA,sBAAAA,WAAWE,OAAO,cAAlBF,0CAAAA,oBAAoBG,wBAAwB,gBAA5CH,0DAAAA,+CAAkD;IAC3D,GAAG;QAACA;KAAW;AACjB"}
1	+ {"version":3,"sources":["../src/hooks/useIsNavigatingWithKeyboard.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useKeyborgRef } from './useKeyborgRef';\n\n/*\n Instantiates [keyborg](https://github.com/microsoft/keyborg) and checks if the user is navigating with the keyboard.\n * @returns\n */\nexport function useIsNavigatingWithKeyboard(): () => boolean {\n const keyborgRef = useKeyborgRef();\n\n return React.useCallback(() => {\n return keyborgRef.current?.isNavigatingWithKeyboard() ?? false;\n }, [keyborgRef]);\n}\n"],"names":["React","useKeyborgRef","useIsNavigatingWithKeyboard","keyborgRef","useCallback","current","isNavigatingWithKeyboard"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,aAAa,QAAQ,qBAAkB;AAEhD;;;CAGC,GACD,OAAO,SAASC;IACd,MAAMC,aAAaF;IAEnB,OAAOD,MAAMI,WAAW,CAAC;YAChBD;YAAAA;QAAP,OAAOA,CAAAA,gDAAAA,sBAAAA,WAAWE,OAAO,cAAlBF,0CAAAA,oBAAoBG,wBAAwB,gBAA5CH,0DAAAA,+CAAkD;IAC3D,GAAG;QAACA;KAAW;AACjB"}

package/lib/hooks/useKeyboardNavAttribute.js CHANGED Viewed

@@ -1,8 +1,8 @@
 'use client';
-import * as React from 'react';
-import { createKeyborg } from 'keyborg';
-import { KEYBOARD_NAV_ATTRIBUTE } from '../focus/constants';
-import { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';
+import * as React from "react";
+import { createKeyborg } from "keyborg";
+import { KEYBOARD_NAV_ATTRIBUTE } from "../focus/constants.js";
+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

package/lib/hooks/useKeyboardNavAttribute.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/hooks/useKeyboardNavAttribute.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { createKeyborg } from 'keyborg';\nimport { KEYBOARD_NAV_ATTRIBUTE } from '../focus/constants';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport type { KeyborgCallback } from 'keyborg';\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>(): React.RefObject<E \| null> {\n const { targetDocument } = useFluent();\n const keyborg = React.useMemo(() => targetDocument && createKeyborg(targetDocument.defaultView!), [targetDocument]);\n const ref = React.useRef<E>(null);\n React.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\n return ref;\n}\n\nfunction setBooleanAttribute(elementRef: React.RefObject<HTMLElement \| null>, 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"],"names":["React","createKeyborg","KEYBOARD_NAV_ATTRIBUTE","useFluent_unstable","useFluent","useKeyboardNavAttribute","targetDocument","keyborg","useMemo","defaultView","ref","useRef","useEffect","setBooleanAttribute","isNavigatingWithKeyboard","cb","next","subscribe","unsubscribe","elementRef","attribute","value","current","setAttribute","removeAttribute"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,aAAa,QAAQ,UAAU;AACxC,SAASC,sBAAsB,QAAQ,~~qBAAqB~~;AAC5D,SAASC,sBAAsBC,SAAS,QAAQ,kCAAkC;AAGlF;;;;CAIC,GACD,OAAO,SAASC;IACd,MAAM,EAAEC,cAAc,EAAE,GAAGF;IAC3B,MAAMG,UAAUP,MAAMQ,OAAO,CAAC,IAAMF,kBAAkBL,cAAcK,eAAeG,WAAW,GAAI;QAACH;KAAe;IAClH,MAAMI,MAAMV,MAAMW,MAAM,CAAI;IAC5BX,MAAMY,SAAS,CAAC;QACd,IAAIL,SAAS;YACXM,oBAAoBH,KAAKR,wBAAwBK,QAAQO,wBAAwB;YACjF,MAAMC,KAAsBC,CAAAA;gBAC1BH,oBAAoBH,KAAKR,wBAAwBc;YACnD;YACAT,QAAQU,SAAS,CAACF;YAClB,OAAO,IAAMR,QAAQW,WAAW,CAACH;QACnC;IACF,GAAG;QAACR;KAAQ;IAEZ,OAAOG;AACT;AAEA,SAASG,oBAAoBM,UAA+C,EAAEC,SAAiB,EAAEC,KAAc;IAC7G,IAAI,CAACF,WAAWG,OAAO,EAAE;QACvB;IACF;IACA,IAAID,OAAO;QACTF,WAAWG,OAAO,CAACC,YAAY,CAACH,WAAW;IAC7C,OAAO;QACLD,WAAWG,OAAO,CAACE,eAAe,CAACJ;IACrC;AACF"}
1	+ {"version":3,"sources":["../src/hooks/useKeyboardNavAttribute.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { createKeyborg } from 'keyborg';\nimport { KEYBOARD_NAV_ATTRIBUTE } from '../focus/constants';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport type { KeyborgCallback } from 'keyborg';\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>(): React.RefObject<E \| null> {\n const { targetDocument } = useFluent();\n const keyborg = React.useMemo(() => targetDocument && createKeyborg(targetDocument.defaultView!), [targetDocument]);\n const ref = React.useRef<E>(null);\n React.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\n return ref;\n}\n\nfunction setBooleanAttribute(elementRef: React.RefObject<HTMLElement \| null>, 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"],"names":["React","createKeyborg","KEYBOARD_NAV_ATTRIBUTE","useFluent_unstable","useFluent","useKeyboardNavAttribute","targetDocument","keyborg","useMemo","defaultView","ref","useRef","useEffect","setBooleanAttribute","isNavigatingWithKeyboard","cb","next","subscribe","unsubscribe","elementRef","attribute","value","current","setAttribute","removeAttribute"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,aAAa,QAAQ,UAAU;AACxC,SAASC,sBAAsB,QAAQ,wBAAqB;AAC5D,SAASC,sBAAsBC,SAAS,QAAQ,kCAAkC;AAGlF;;;;CAIC,GACD,OAAO,SAASC;IACd,MAAM,EAAEC,cAAc,EAAE,GAAGF;IAC3B,MAAMG,UAAUP,MAAMQ,OAAO,CAAC,IAAMF,kBAAkBL,cAAcK,eAAeG,WAAW,GAAI;QAACH;KAAe;IAClH,MAAMI,MAAMV,MAAMW,MAAM,CAAI;IAC5BX,MAAMY,SAAS,CAAC;QACd,IAAIL,SAAS;YACXM,oBAAoBH,KAAKR,wBAAwBK,QAAQO,wBAAwB;YACjF,MAAMC,KAAsBC,CAAAA;gBAC1BH,oBAAoBH,KAAKR,wBAAwBc;YACnD;YACAT,QAAQU,SAAS,CAACF;YAClB,OAAO,IAAMR,QAAQW,WAAW,CAACH;QACnC;IACF,GAAG;QAACR;KAAQ;IAEZ,OAAOG;AACT;AAEA,SAASG,oBAAoBM,UAA+C,EAAEC,SAAiB,EAAEC,KAAc;IAC7G,IAAI,CAACF,WAAWG,OAAO,EAAE;QACvB;IACF;IACA,IAAID,OAAO;QACTF,WAAWG,OAAO,CAACC,YAAY,CAACH,WAAW;IAC7C,OAAO;QACLD,WAAWG,OAAO,CAACE,eAAe,CAACJ;IACrC;AACF"}

package/lib/hooks/useKeyborgRef.js CHANGED Viewed

@@ -1,7 +1,7 @@
 'use client';
-import * as React from 'react';
-import { createKeyborg, disposeKeyborg } from 'keyborg';
-import { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';
+import * as React from "react";
+import { createKeyborg, disposeKeyborg } from "keyborg";
+import { useFluent_unstable as useFluent } from "@fluentui/react-shared-contexts";
 /**
  * Instantiates [keyborg](https://github.com/microsoft/keyborg)
  *

package/lib/hooks/useMergeTabsterAttributes.js CHANGED Viewed

@@ -1,6 +1,6 @@
 'use client';
-import * as React from 'react';
-import { TABSTER_ATTRIBUTE_NAME } from 'tabster';
+import * as React from "react";
+import { TABSTER_ATTRIBUTE_NAME } from "tabster";
 /**
  * Merges a collection of tabster attributes.
  *

package/lib/hooks/useModalAttributes.js CHANGED Viewed

@@ -1,9 +1,9 @@
 'use client';
-import { getModalizer, getRestorer, RestorerTypes } from 'tabster';
-import { useId } from '@fluentui/react-utilities';
-import { useTabsterAttributes } from './useTabsterAttributes';
-import { useTabster } from './useTabster';
-import { DangerousNeverHiddenAttribute } from './useDangerousNeverHidden';
+import { getModalizer, getRestorer, RestorerTypes } from "tabster";
+import { useId } from "@fluentui/react-utilities";
+import { useTabsterAttributes } from "./useTabsterAttributes.js";
+import { useTabster } from "./useTabster.js";
+import { DangerousNeverHiddenAttribute } from "./useDangerousNeverHidden.js";
 const tabsterAccessibleCheck = (element)=>{
     return element.hasAttribute(DangerousNeverHiddenAttribute);
 };

package/lib/hooks/useModalAttributes.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/hooks/useModalAttributes.ts"],"sourcesContent":["'use client';\n\nimport { getModalizer, getRestorer, RestorerTypes } from 'tabster';\nimport type { Types as TabsterTypes } from 'tabster';\n\nimport { useId } from '@fluentui/react-utilities';\nimport { useTabsterAttributes } from './useTabsterAttributes';\nimport { useTabster } from './useTabster';\nimport { DangerousNeverHiddenAttribute } from './useDangerousNeverHidden';\n\nexport interface UseModalAttributesOptions {\n /*\n Traps focus inside the elements the attributes are applied.\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 traditional force-focus behavior to match previous versions of Fluent.\n * Without this, users can tab out of the focus trap and into the browser chrome.\n * This matches the behavior of the native <dialog> element and inert.\n * We recommend setting this to true based on user feedback and consistency.\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\nconst tabsterAccessibleCheck: TabsterTypes.ModalizerElementAccessibleCheck = element => {\n return element.hasAttribute(DangerousNeverHiddenAttribute);\n};\n\nfunction initTabsterModules(tabster: TabsterTypes.TabsterCore) {\n getModalizer(tabster, undefined, tabsterAccessibleCheck);\n getRestorer(tabster);\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\n // Initializes the modalizer and restorer APIs\n useTabster(initTabsterModules);\n\n const id = useId('modal-', options.id);\n const modalAttributes = useTabsterAttributes({\n restorer: { type: RestorerTypes.Source },\n ...(trapFocus && {\n modalizer: {\n id,\n isOthersAccessible: !trapFocus,\n isAlwaysAccessible: alwaysFocusable,\n isTrapped: legacyTrapFocus && trapFocus,\n },\n }),\n });\n\n const triggerAttributes = useTabsterAttributes({\n restorer: { type: RestorerTypes.Target },\n });\n\n return { modalAttributes, triggerAttributes };\n};\n"],"names":["getModalizer","getRestorer","RestorerTypes","useId","useTabsterAttributes","useTabster","DangerousNeverHiddenAttribute","tabsterAccessibleCheck","element","hasAttribute","initTabsterModules","tabster","undefined","useModalAttributes","options","trapFocus","alwaysFocusable","legacyTrapFocus","id","modalAttributes","restorer","type","Source","modalizer","isOthersAccessible","isAlwaysAccessible","isTrapped","triggerAttributes","Target"],"mappings":"AAAA;AAEA,SAASA,YAAY,EAAEC,WAAW,EAAEC,aAAa,QAAQ,UAAU;AAGnE,SAASC,KAAK,QAAQ,4BAA4B;AAClD,SAASC,oBAAoB,QAAQ,~~yBAAyB~~;AAC9D,SAASC,UAAU,QAAQ,~~eAAe~~;AAC1C,SAASC,6BAA6B,QAAQ~~,4BAA4B~~;AA6B1E,MAAMC,yBAAuEC,CAAAA;IAC3E,OAAOA,QAAQC,YAAY,CAACH;AAC9B;AAEA,SAASI,mBAAmBC,OAAiC;IAC3DX,aAAaW,SAASC,WAAWL;IACjCN,YAAYU;AACd;AAEA;;;;;;CAMC,GACD,OAAO,MAAME,qBAAqB,CAChCC,UAAqC,CAAC,CAAC;IAEvC,MAAM,EAAEC,SAAS,EAAEC,eAAe,EAAEC,eAAe,EAAE,GAAGH;IAExD,8CAA8C;IAC9CT,WAAWK;IAEX,MAAMQ,KAAKf,MAAM,UAAUW,QAAQI,EAAE;IACrC,MAAMC,kBAAkBf,qBAAqB;QAC3CgB,UAAU;YAAEC,MAAMnB,cAAcoB,MAAM;QAAC;QACvC,GAAIP,aAAa;YACfQ,WAAW;gBACTL;gBACAM,oBAAoB,CAACT;gBACrBU,oBAAoBT;gBACpBU,WAAWT,mBAAmBF;YAChC;QACF,CAAC;IACH;IAEA,MAAMY,oBAAoBvB,qBAAqB;QAC7CgB,UAAU;YAAEC,MAAMnB,cAAc0B,MAAM;QAAC;IACzC;IAEA,OAAO;QAAET;QAAiBQ;IAAkB;AAC9C,EAAE"}
1	+ {"version":3,"sources":["../src/hooks/useModalAttributes.ts"],"sourcesContent":["'use client';\n\nimport { getModalizer, getRestorer, RestorerTypes } from 'tabster';\nimport type { Types as TabsterTypes } from 'tabster';\n\nimport { useId } from '@fluentui/react-utilities';\nimport { useTabsterAttributes } from './useTabsterAttributes';\nimport { useTabster } from './useTabster';\nimport { DangerousNeverHiddenAttribute } from './useDangerousNeverHidden';\n\nexport interface UseModalAttributesOptions {\n /*\n Traps focus inside the elements the attributes are applied.\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 traditional force-focus behavior to match previous versions of Fluent.\n * Without this, users can tab out of the focus trap and into the browser chrome.\n * This matches the behavior of the native <dialog> element and inert.\n * We recommend setting this to true based on user feedback and consistency.\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\nconst tabsterAccessibleCheck: TabsterTypes.ModalizerElementAccessibleCheck = element => {\n return element.hasAttribute(DangerousNeverHiddenAttribute);\n};\n\nfunction initTabsterModules(tabster: TabsterTypes.TabsterCore) {\n getModalizer(tabster, undefined, tabsterAccessibleCheck);\n getRestorer(tabster);\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\n // Initializes the modalizer and restorer APIs\n useTabster(initTabsterModules);\n\n const id = useId('modal-', options.id);\n const modalAttributes = useTabsterAttributes({\n restorer: { type: RestorerTypes.Source },\n ...(trapFocus && {\n modalizer: {\n id,\n isOthersAccessible: !trapFocus,\n isAlwaysAccessible: alwaysFocusable,\n isTrapped: legacyTrapFocus && trapFocus,\n },\n }),\n });\n\n const triggerAttributes = useTabsterAttributes({\n restorer: { type: RestorerTypes.Target },\n });\n\n return { modalAttributes, triggerAttributes };\n};\n"],"names":["getModalizer","getRestorer","RestorerTypes","useId","useTabsterAttributes","useTabster","DangerousNeverHiddenAttribute","tabsterAccessibleCheck","element","hasAttribute","initTabsterModules","tabster","undefined","useModalAttributes","options","trapFocus","alwaysFocusable","legacyTrapFocus","id","modalAttributes","restorer","type","Source","modalizer","isOthersAccessible","isAlwaysAccessible","isTrapped","triggerAttributes","Target"],"mappings":"AAAA;AAEA,SAASA,YAAY,EAAEC,WAAW,EAAEC,aAAa,QAAQ,UAAU;AAGnE,SAASC,KAAK,QAAQ,4BAA4B;AAClD,SAASC,oBAAoB,QAAQ,4BAAyB;AAC9D,SAASC,UAAU,QAAQ,kBAAe;AAC1C,SAASC,6BAA6B,QAAQ,+BAA4B;AA6B1E,MAAMC,yBAAuEC,CAAAA;IAC3E,OAAOA,QAAQC,YAAY,CAACH;AAC9B;AAEA,SAASI,mBAAmBC,OAAiC;IAC3DX,aAAaW,SAASC,WAAWL;IACjCN,YAAYU;AACd;AAEA;;;;;;CAMC,GACD,OAAO,MAAME,qBAAqB,CAChCC,UAAqC,CAAC,CAAC;IAEvC,MAAM,EAAEC,SAAS,EAAEC,eAAe,EAAEC,eAAe,EAAE,GAAGH;IAExD,8CAA8C;IAC9CT,WAAWK;IAEX,MAAMQ,KAAKf,MAAM,UAAUW,QAAQI,EAAE;IACrC,MAAMC,kBAAkBf,qBAAqB;QAC3CgB,UAAU;YAAEC,MAAMnB,cAAcoB,MAAM;QAAC;QACvC,GAAIP,aAAa;YACfQ,WAAW;gBACTL;gBACAM,oBAAoB,CAACT;gBACrBU,oBAAoBT;gBACpBU,WAAWT,mBAAmBF;YAChC;QACF,CAAC;IACH;IAEA,MAAMY,oBAAoBvB,qBAAqB;QAC7CgB,UAAU;YAAEC,MAAMnB,cAAc0B,MAAM;QAAC;IACzC;IAEA,OAAO;QAAET;QAAiBQ;IAAkB;AAC9C,EAAE"}