@fluentui/react-tabster 9.25.3 → 9.26.1
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.
- package/CHANGELOG.md +20 -2
- package/lib/focus/constants.js.map +1 -1
- package/lib/focus/createCustomFocusIndicatorStyle.js.map +1 -1
- package/lib/focus/createFocusOutlineStyle.js.map +1 -1
- package/lib/focus/focusVisiblePolyfill.js.map +1 -1
- package/lib/focus/focusWithinPolyfill.js.map +1 -1
- package/lib/focus/index.js.map +1 -1
- package/lib/hooks/index.js.map +1 -1
- package/lib/hooks/useActivateModal.js.map +1 -1
- package/lib/hooks/useArrowNavigationGroup.js.map +1 -1
- package/lib/hooks/useFocusFinders.js.map +1 -1
- package/lib/hooks/useFocusObserved.js.map +1 -1
- package/lib/hooks/useFocusVisible.js.map +1 -1
- package/lib/hooks/useFocusWithin.js.map +1 -1
- package/lib/hooks/useFocusableGroup.js.map +1 -1
- package/lib/hooks/useFocusedElementChange.js.map +1 -1
- package/lib/hooks/useIsNavigatingWithKeyboard.js.map +1 -1
- package/lib/hooks/useKeyboardNavAttribute.js.map +1 -1
- package/lib/hooks/useKeyborgRef.js.map +1 -1
- package/lib/hooks/useMergeTabsterAttributes.js.map +1 -1
- package/lib/hooks/useModalAttributes.js.map +1 -1
- package/lib/hooks/useObservedElement.js.map +1 -1
- package/lib/hooks/useOnKeyboardNavigationChange.js.map +1 -1
- package/lib/hooks/useRestoreFocus.js.map +1 -1
- package/lib/hooks/useSetKeyboardNavigation.js.map +1 -1
- package/lib/hooks/useTabster.js.map +1 -1
- package/lib/hooks/useTabsterAttributes.js.map +1 -1
- package/lib/hooks/useUncontrolledFocus.js.map +1 -1
- package/lib/index.js.map +1 -1
- package/lib/tabster-types-6.0.1-do-not-use.js.map +1 -1
- package/lib-commonjs/focus/constants.js.map +1 -1
- package/lib-commonjs/focus/createCustomFocusIndicatorStyle.js.map +1 -1
- package/lib-commonjs/focus/createFocusOutlineStyle.js.map +1 -1
- package/lib-commonjs/focus/focusVisiblePolyfill.js.map +1 -1
- package/lib-commonjs/focus/focusWithinPolyfill.js.map +1 -1
- package/lib-commonjs/focus/index.js.map +1 -1
- package/lib-commonjs/hooks/index.js.map +1 -1
- package/lib-commonjs/hooks/useActivateModal.js.map +1 -1
- package/lib-commonjs/hooks/useArrowNavigationGroup.js.map +1 -1
- package/lib-commonjs/hooks/useFocusFinders.js.map +1 -1
- package/lib-commonjs/hooks/useFocusObserved.js.map +1 -1
- package/lib-commonjs/hooks/useFocusVisible.js.map +1 -1
- package/lib-commonjs/hooks/useFocusWithin.js.map +1 -1
- package/lib-commonjs/hooks/useFocusableGroup.js.map +1 -1
- package/lib-commonjs/hooks/useFocusedElementChange.js.map +1 -1
- package/lib-commonjs/hooks/useIsNavigatingWithKeyboard.js.map +1 -1
- package/lib-commonjs/hooks/useKeyboardNavAttribute.js.map +1 -1
- package/lib-commonjs/hooks/useKeyborgRef.js.map +1 -1
- package/lib-commonjs/hooks/useMergeTabsterAttributes.js.map +1 -1
- package/lib-commonjs/hooks/useModalAttributes.js.map +1 -1
- package/lib-commonjs/hooks/useObservedElement.js.map +1 -1
- package/lib-commonjs/hooks/useOnKeyboardNavigationChange.js.map +1 -1
- package/lib-commonjs/hooks/useRestoreFocus.js.map +1 -1
- package/lib-commonjs/hooks/useSetKeyboardNavigation.js.map +1 -1
- package/lib-commonjs/hooks/useTabster.js.map +1 -1
- package/lib-commonjs/hooks/useTabsterAttributes.js.map +1 -1
- package/lib-commonjs/hooks/useUncontrolledFocus.js.map +1 -1
- package/lib-commonjs/index.js.map +1 -1
- package/lib-commonjs/tabster-types-6.0.1-do-not-use.js.map +1 -1
- package/package.json +2 -2
package/CHANGELOG.md
CHANGED
@@ -1,12 +1,30 @@
|
|
1
1
|
# Change Log - @fluentui/react-tabster
|
2
2
|
|
3
|
-
This log was last generated on
|
3
|
+
This log was last generated on Mon, 28 Jul 2025 18:44:12 GMT and should not be manually modified.
|
4
4
|
|
5
5
|
<!-- Start content -->
|
6
6
|
|
7
|
+
## [9.26.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-tabster_v9.26.1)
|
8
|
+
|
9
|
+
Mon, 28 Jul 2025 18:44:12 GMT
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tabster_v9.26.0..@fluentui/react-tabster_v9.26.1)
|
11
|
+
|
12
|
+
### Patches
|
13
|
+
|
14
|
+
- Bump @fluentui/react-utilities to v9.23.0 ([PR #34918](https://github.com/microsoft/fluentui/pull/34918) by beachball)
|
15
|
+
|
16
|
+
## [9.26.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-tabster_v9.26.0)
|
17
|
+
|
18
|
+
Thu, 17 Jul 2025 13:49:48 GMT
|
19
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tabster_v9.25.3..@fluentui/react-tabster_v9.26.0)
|
20
|
+
|
21
|
+
### Minor changes
|
22
|
+
|
23
|
+
- feat: enable griffel raw styles ([PR #34853](https://github.com/microsoft/fluentui/pull/34853) by martinhochel@microsoft.com)
|
24
|
+
|
7
25
|
## [9.25.3](https://github.com/microsoft/fluentui/tree/@fluentui/react-tabster_v9.25.3)
|
8
26
|
|
9
|
-
Fri, 27 Jun 2025 13:
|
27
|
+
Fri, 27 Jun 2025 13:39:40 GMT
|
10
28
|
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tabster_v9.25.2..@fluentui/react-tabster_v9.25.3)
|
11
29
|
|
12
30
|
### Patches
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["../src/focus/constants.ts"],"sourcesContent":["export const KEYBOARD_NAV_ATTRIBUTE = 'data-keyboard-nav' as const;\nexport const KEYBOARD_NAV_SELECTOR = `:global([${KEYBOARD_NAV_ATTRIBUTE}])` as const;\n\n/**\n * @internal\n */\nexport const FOCUS_VISIBLE_ATTR = 'data-fui-focus-visible';\n\n/**\n * @internal\n */\nexport const FOCUS_WITHIN_ATTR = 'data-fui-focus-within';\nexport const defaultOptions = {\n style: {},\n selector: 'focus',\n customizeSelector: (selector: string) => selector,\n} as const;\n"],"names":["KEYBOARD_NAV_ATTRIBUTE","KEYBOARD_NAV_SELECTOR","FOCUS_VISIBLE_ATTR","FOCUS_WITHIN_ATTR","defaultOptions","style","selector","customizeSelector"],"
|
1
|
+
{"version":3,"sources":["../src/focus/constants.ts"],"sourcesContent":["export const KEYBOARD_NAV_ATTRIBUTE = 'data-keyboard-nav' as const;\nexport const KEYBOARD_NAV_SELECTOR = `:global([${KEYBOARD_NAV_ATTRIBUTE}])` as const;\n\n/**\n * @internal\n */\nexport const FOCUS_VISIBLE_ATTR = 'data-fui-focus-visible';\n\n/**\n * @internal\n */\nexport const FOCUS_WITHIN_ATTR = 'data-fui-focus-within';\nexport const defaultOptions = {\n style: {},\n selector: 'focus',\n customizeSelector: (selector: string) => selector,\n} as const;\n"],"names":["KEYBOARD_NAV_ATTRIBUTE","KEYBOARD_NAV_SELECTOR","FOCUS_VISIBLE_ATTR","FOCUS_WITHIN_ATTR","defaultOptions","style","selector","customizeSelector"],"mappings":"AAAA,OAAO,MAAMA,yBAAyB,oBAA6B;AACnE,OAAO,MAAMC,wBAAwB,CAAC,SAAS,EAAED,uBAAuB,EAAE,CAAC,CAAU;AAErF;;CAEC,GACD,OAAO,MAAME,qBAAqB,yBAAyB;AAE3D;;CAEC,GACD,OAAO,MAAMC,oBAAoB,wBAAwB;AACzD,OAAO,MAAMC,iBAAiB;IAC5BC,OAAO,CAAC;IACRC,UAAU;IACVC,mBAAmB,CAACD,WAAqBA;AAC3C,EAAW"}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["../src/focus/createCustomFocusIndicatorStyle.ts"],"sourcesContent":["import { defaultOptions, FOCUS_VISIBLE_ATTR, FOCUS_WITHIN_ATTR } from './constants';\nimport { makeResetStyles } from '@griffel/react';\nimport type { GriffelStyle } from '@griffel/react';\n\n// TODO: Use the type directly from @griffel/react\n// https://github.com/microsoft/griffel/pull/278\ntype GriffelResetStyle = Parameters<typeof makeResetStyles>[0];\n\nexport interface CreateCustomFocusIndicatorStyleOptions {\n /**\n * Control if the indicator appears when the corresponding element is focused,\n * or any child is focused within the corresponding element.\n * @default 'focus'\n * @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"],"
|
1
|
+
{"version":3,"sources":["../src/focus/createCustomFocusIndicatorStyle.ts"],"sourcesContent":["import { defaultOptions, FOCUS_VISIBLE_ATTR, FOCUS_WITHIN_ATTR } from './constants';\nimport { makeResetStyles } from '@griffel/react';\nimport type { GriffelStyle } from '@griffel/react';\n\n// TODO: Use the type directly from @griffel/react\n// https://github.com/microsoft/griffel/pull/278\ntype GriffelResetStyle = Parameters<typeof makeResetStyles>[0];\n\nexport interface CreateCustomFocusIndicatorStyleOptions {\n /**\n * Control if the indicator appears when the corresponding element is focused,\n * or any child is focused within the corresponding element.\n * @default 'focus'\n * @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 +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 {\n createCustomFocusIndicatorStyle,\n CreateCustomFocusIndicatorStyleOptions,\n} from './createCustomFocusIndicatorStyle';\nimport { defaultOptions } from './constants';\n\nexport type FocusOutlineOffset = Record<'top' | 'bottom' | 'left' | 'right', string>;\nexport type FocusOutlineStyleOptions = {\n /**\n * Only property not supported by the native CSS `outline`, if this is no longer needed\n * we can just go native instead\n */\n outlineRadius: string;\n outlineColor: string;\n outlineWidth: string;\n outlineOffset?: string | FocusOutlineOffset;\n};\nexport interface CreateFocusOutlineStyleOptions extends 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"],"
|
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 {\n createCustomFocusIndicatorStyle,\n CreateCustomFocusIndicatorStyleOptions,\n} from './createCustomFocusIndicatorStyle';\nimport { defaultOptions } from './constants';\n\nexport type FocusOutlineOffset = Record<'top' | 'bottom' | 'left' | 'right', string>;\nexport type FocusOutlineStyleOptions = {\n /**\n * Only property not supported by the native CSS `outline`, if this is no longer needed\n * we can just go native instead\n */\n outlineRadius: string;\n outlineColor: string;\n outlineWidth: string;\n outlineOffset?: string | FocusOutlineOffset;\n};\nexport interface CreateFocusOutlineStyleOptions extends 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;AAE5C,SACEC,+BAA+B,QAE1B,oCAAoC;AAC3C,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 +1 @@
|
|
1
|
-
{"version":3,"sources":["../src/focus/focusVisiblePolyfill.ts"],"sourcesContent":["import { isHTMLElement } from '@fluentui/react-utilities';\nimport { KEYBORG_FOCUSIN, KeyborgFocusInEvent, 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"],"
|
1
|
+
{"version":3,"sources":["../src/focus/focusVisiblePolyfill.ts"],"sourcesContent":["import { isHTMLElement } from '@fluentui/react-utilities';\nimport { KEYBORG_FOCUSIN, KeyborgFocusInEvent, 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;AAC1D,SAASC,eAAe,EAAuBC,aAAa,EAAEC,cAAc,QAAQ,UAAU;AAE9F,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 +1 @@
|
|
1
|
-
{"version":3,"sources":["../src/focus/focusWithinPolyfill.ts"],"sourcesContent":["import { KEYBORG_FOCUSIN, KeyborgFocusInEvent, 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"],"
|
1
|
+
{"version":3,"sources":["../src/focus/focusWithinPolyfill.ts"],"sourcesContent":["import { KEYBORG_FOCUSIN, KeyborgFocusInEvent, 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":"AAAA,SAASA,eAAe,EAAuBC,aAAa,EAAEC,cAAc,QAAQ,UAAU;AAC9F,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"}
|
package/lib/focus/index.js.map
CHANGED
@@ -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"],"
|
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"}
|
package/lib/hooks/index.js.map
CHANGED
@@ -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 { useDangerousNeverHidden_unstable, useModalAttributes } from './useModalAttributes';\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","useDangerousNeverHidden_unstable","useModalAttributes","useTabsterAttributes","useObservedElement","useMergedTabsterAttributes_unstable","useFocusObserved","useRestoreFocusSource","useRestoreFocusTarget","useUncontrolledFocus","useIsNavigatingWithKeyboard","useSetKeyboardNavigation","useFocusedElementChange","useActivateModal"],"
|
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 { useDangerousNeverHidden_unstable, useModalAttributes } from './useModalAttributes';\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","useDangerousNeverHidden_unstable","useModalAttributes","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,gCAAgC,EAAEC,kBAAkB,QAAQ,uBAAuB;AAC5F,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 +1 @@
|
|
1
|
-
{"version":3,"sources":["../src/hooks/useActivateModal.ts"],"sourcesContent":["import * 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"],"
|
1
|
+
{"version":3,"sources":["../src/hooks/useActivateModal.ts"],"sourcesContent":["import * 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,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 +1 @@
|
|
1
|
-
{"version":3,"sources":["../src/hooks/useArrowNavigationGroup.ts"],"sourcesContent":["import { Types, 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"],"
|
1
|
+
{"version":3,"sources":["../src/hooks/useArrowNavigationGroup.ts"],"sourcesContent":["import { Types, 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,SAAgBA,QAAQ,EAAEC,eAAe,QAAQ,UAAU;AAC3D,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 +1 @@
|
|
1
|
-
{"version":3,"sources":["../src/hooks/useFocusFinders.ts"],"sourcesContent":["import * as React from 'react';\nimport { 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 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, acceptCondition?: (el: HTMLElement) => boolean) =>\n tabsterRef.current?.focusable.findAll({ container, acceptCondition }) || [],\n [tabsterRef],\n );\n\n const findFirstFocusable = React.useCallback(\n (container: HTMLElement) => tabsterRef.current?.focusable.findFirst({ container }),\n [tabsterRef],\n );\n\n const findLastFocusable = React.useCallback(\n (container: HTMLElement) => tabsterRef.current?.focusable.findLast({ container }),\n [tabsterRef],\n );\n\n const findNextFocusable = React.useCallback(\n (currentElement: HTMLElement, options: Pick<Partial<TabsterTypes.FindNextProps>, 'container'> = {}) => {\n if (!tabsterRef.current || !targetDocument) {\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, options: Pick<Partial<TabsterTypes.FindNextProps>, 'container'> = {}) => {\n if (!tabsterRef.current || !targetDocument) {\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"],"
|
1
|
+
{"version":3,"sources":["../src/hooks/useFocusFinders.ts"],"sourcesContent":["import * as React from 'react';\nimport { 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 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, acceptCondition?: (el: HTMLElement) => boolean) =>\n tabsterRef.current?.focusable.findAll({ container, acceptCondition }) || [],\n [tabsterRef],\n );\n\n const findFirstFocusable = React.useCallback(\n (container: HTMLElement) => tabsterRef.current?.focusable.findFirst({ container }),\n [tabsterRef],\n );\n\n const findLastFocusable = React.useCallback(\n (container: HTMLElement) => tabsterRef.current?.focusable.findLast({ container }),\n [tabsterRef],\n );\n\n const findNextFocusable = React.useCallback(\n (currentElement: HTMLElement, options: Pick<Partial<TabsterTypes.FindNextProps>, 'container'> = {}) => {\n if (!tabsterRef.current || !targetDocument) {\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, options: Pick<Partial<TabsterTypes.FindNextProps>, 'container'> = {}) => {\n if (!tabsterRef.current || !targetDocument) {\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,YAAYA,WAAW,QAAQ;AAE/B,SAASC,sBAAsBC,SAAS,QAAQ,kCAAkC;AAClF,SAASC,UAAU,QAAQ,eAAe;AAE1C;;CAEC,GACD,OAAO,MAAMC,kBAAkB;IAC7B,MAAMC,aAAaF;IACnB,MAAM,EAAEG,cAAc,EAAE,GAAGJ;IAE3B,2EAA2E;IAC3E,MAAMK,mBAAmBP,MAAMQ,WAAW,CACxC,CAACC,WAAwBC;YACvBL;eAAAA,EAAAA,sBAAAA,WAAWM,OAAO,cAAlBN,0CAAAA,oBAAoBO,SAAS,CAACC,OAAO,CAAC;YAAEJ;YAAWC;QAAgB,OAAM,EAAE;OAC7E;QAACL;KAAW;IAGd,MAAMS,qBAAqBd,MAAMQ,WAAW,CAC1C,CAACC;YAA2BJ;gBAAAA,sBAAAA,WAAWM,OAAO,cAAlBN,0CAAAA,oBAAoBO,SAAS,CAACG,SAAS,CAAC;YAAEN;QAAU;OAChF;QAACJ;KAAW;IAGd,MAAMW,oBAAoBhB,MAAMQ,WAAW,CACzC,CAACC;YAA2BJ;gBAAAA,sBAAAA,WAAWM,OAAO,cAAlBN,0CAAAA,oBAAoBO,SAAS,CAACK,QAAQ,CAAC;YAAER;QAAU;OAC/E;QAACJ;KAAW;IAGd,MAAMa,oBAAoBlB,MAAMQ,WAAW,CACzC,CAACW,gBAA6BC,UAAkE,CAAC,CAAC;QAChG,IAAI,CAACf,WAAWM,OAAO,IAAI,CAACL,gBAAgB;YAC1C,OAAO;QACT;QAEA,MAAM,EAAEG,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,gBAA6BC,UAAkE,CAAC,CAAC;QAChG,IAAI,CAACf,WAAWM,OAAO,IAAI,CAACL,gBAAgB;YAC1C,OAAO;QACT;QAEA,MAAM,EAAEG,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 +1 @@
|
|
1
|
-
{"version":3,"sources":["../src/hooks/useFocusObserved.ts"],"sourcesContent":["import * as React from 'react';\nimport { getObservedElement, Types as TabsterTypes } 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 };\n }, [observedAPIRef, name, timeout]);\n}\n"],"names":["React","getObservedElement","useTabster","useFocusObserved","name","options","timeout","observedAPIRef","useCallback","observerAPI","current","requestFocus","result","Promise","resolve","cancel"],"
|
1
|
+
{"version":3,"sources":["../src/hooks/useFocusObserved.ts"],"sourcesContent":["import * as React from 'react';\nimport { getObservedElement, Types as TabsterTypes } 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 };\n }, [observedAPIRef, name, timeout]);\n}\n"],"names":["React","getObservedElement","useTabster","useFocusObserved","name","options","timeout","observedAPIRef","useCallback","observerAPI","current","requestFocus","result","Promise","resolve","cancel"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,kBAAkB,QAA+B,UAAU;AACpE,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;QAChB;IACF,GAAG;QAACR;QAAgBH;QAAME;KAAQ;AACpC"}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["../src/hooks/useFocusVisible.ts"],"sourcesContent":["import * 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>(options: UseFocusVisibleOptions = {}) {\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"],"
|
1
|
+
{"version":3,"sources":["../src/hooks/useFocusVisible.ts"],"sourcesContent":["import * 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>(options: UseFocusVisibleOptions = {}) {\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,YAAYA,WAAW,QAAQ;AAC/B,SAASC,sBAAsBC,SAAS,QAAQ,kCAAkC;AAElF,SAASC,yBAAyB,QAAQ,gCAAgC;AAM1E,OAAO,SAASC,gBAA4DC,UAAkC,CAAC,CAAC;IAC9G,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 +1 @@
|
|
1
|
-
{"version":3,"sources":["../src/hooks/useFocusWithin.ts"],"sourcesContent":["import * as React from 'react';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { applyFocusWithinPolyfill } from '../focus/focusWithinPolyfill';\n\n/**\n * A ponyfill that allows `:focus-within` to support visibility based on keyboard/mouse navigation\n * like `:focus-visible` https://github.com/WICG/focus-visible/issues/151\n * @returns ref to the element that uses `:focus-within` styles\n */\nexport function useFocusWithin<TElement extends HTMLElement = HTMLElement>() {\n const { targetDocument } = useFluent();\n const elementRef = React.useRef<TElement>(null);\n\n React.useEffect(() => {\n if (targetDocument?.defaultView && elementRef.current) {\n return applyFocusWithinPolyfill(elementRef.current, targetDocument.defaultView);\n }\n }, [elementRef, targetDocument]);\n\n return elementRef;\n}\n"],"names":["React","useFluent_unstable","useFluent","applyFocusWithinPolyfill","useFocusWithin","targetDocument","elementRef","useRef","useEffect","defaultView","current"],"
|
1
|
+
{"version":3,"sources":["../src/hooks/useFocusWithin.ts"],"sourcesContent":["import * as React from 'react';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { applyFocusWithinPolyfill } from '../focus/focusWithinPolyfill';\n\n/**\n * A ponyfill that allows `:focus-within` to support visibility based on keyboard/mouse navigation\n * like `:focus-visible` https://github.com/WICG/focus-visible/issues/151\n * @returns ref to the element that uses `:focus-within` styles\n */\nexport function useFocusWithin<TElement extends HTMLElement = HTMLElement>() {\n const { targetDocument } = useFluent();\n const elementRef = React.useRef<TElement>(null);\n\n React.useEffect(() => {\n if (targetDocument?.defaultView && elementRef.current) {\n return applyFocusWithinPolyfill(elementRef.current, targetDocument.defaultView);\n }\n }, [elementRef, targetDocument]);\n\n return elementRef;\n}\n"],"names":["React","useFluent_unstable","useFluent","applyFocusWithinPolyfill","useFocusWithin","targetDocument","elementRef","useRef","useEffect","defaultView","current"],"mappings":"AAAA,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 +1 @@
|
|
1
|
-
{"version":3,"sources":["../src/hooks/useFocusableGroup.ts"],"sourcesContent":["import { Types, 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"],"
|
1
|
+
{"version":3,"sources":["../src/hooks/useFocusableGroup.ts"],"sourcesContent":["import { Types, 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,SAAgBA,WAAW,EAAEC,qBAAqB,QAAQ,UAAU;AACpE,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 +1 @@
|
|
1
|
-
{"version":3,"sources":["../src/hooks/useFocusedElementChange.ts"],"sourcesContent":["import { 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) {\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"],"
|
1
|
+
{"version":3,"sources":["../src/hooks/useFocusedElementChange.ts"],"sourcesContent":["import { 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) {\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,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 +1 @@
|
|
1
|
-
{"version":3,"sources":["../src/hooks/useIsNavigatingWithKeyboard.ts"],"sourcesContent":["import * 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"],"
|
1
|
+
{"version":3,"sources":["../src/hooks/useIsNavigatingWithKeyboard.ts"],"sourcesContent":["import * 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,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 +1 @@
|
|
1
|
-
{"version":3,"sources":["../src/hooks/useKeyboardNavAttribute.ts"],"sourcesContent":["import * 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>() {\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 return ref;\n}\n\nfunction setBooleanAttribute(elementRef: React.RefObject<HTMLElement>, attribute: string, value: boolean) {\n if (!elementRef.current) {\n return;\n }\n if (value) {\n elementRef.current.setAttribute(attribute, '');\n } else {\n elementRef.current.removeAttribute(attribute);\n }\n}\n"],"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"],"
|
1
|
+
{"version":3,"sources":["../src/hooks/useKeyboardNavAttribute.ts"],"sourcesContent":["import * 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>() {\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 return ref;\n}\n\nfunction setBooleanAttribute(elementRef: React.RefObject<HTMLElement>, attribute: string, value: boolean) {\n if (!elementRef.current) {\n return;\n }\n if (value) {\n elementRef.current.setAttribute(attribute, '');\n } else {\n elementRef.current.removeAttribute(attribute);\n }\n}\n"],"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,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;IACZ,OAAOG;AACT;AAEA,SAASG,oBAAoBM,UAAwC,EAAEC,SAAiB,EAAEC,KAAc;IACtG,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 +1 @@
|
|
1
|
-
{"version":3,"sources":["../src/hooks/useKeyborgRef.ts"],"sourcesContent":["import * as React from 'react';\nimport { createKeyborg, disposeKeyborg, type Keyborg } from 'keyborg';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\n\n/**\n * @internal\n * Instantiates [keyborg](https://github.com/microsoft/keyborg)\n * @returns - keyborg instance\n */\nexport function useKeyborgRef() {\n const { targetDocument } = useFluent();\n const keyborgRef = React.useRef<Keyborg | null>(null);\n\n React.useEffect(() => {\n const targetWindow = targetDocument?.defaultView;\n\n if (targetWindow) {\n const keyborg = createKeyborg(targetWindow);\n keyborgRef.current = keyborg;\n\n return () => {\n disposeKeyborg(keyborg);\n keyborgRef.current = null;\n };\n }\n }, [targetDocument]);\n\n return keyborgRef;\n}\n"],"names":["React","createKeyborg","disposeKeyborg","useFluent_unstable","useFluent","useKeyborgRef","targetDocument","keyborgRef","useRef","useEffect","targetWindow","defaultView","keyborg","current"],"
|
1
|
+
{"version":3,"sources":["../src/hooks/useKeyborgRef.ts"],"sourcesContent":["import * as React from 'react';\nimport { createKeyborg, disposeKeyborg, type Keyborg } from 'keyborg';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\n\n/**\n * @internal\n * Instantiates [keyborg](https://github.com/microsoft/keyborg)\n * @returns - keyborg instance\n */\nexport function useKeyborgRef() {\n const { targetDocument } = useFluent();\n const keyborgRef = React.useRef<Keyborg | null>(null);\n\n React.useEffect(() => {\n const targetWindow = targetDocument?.defaultView;\n\n if (targetWindow) {\n const keyborg = createKeyborg(targetWindow);\n keyborgRef.current = keyborg;\n\n return () => {\n disposeKeyborg(keyborg);\n keyborgRef.current = null;\n };\n }\n }, [targetDocument]);\n\n return keyborgRef;\n}\n"],"names":["React","createKeyborg","disposeKeyborg","useFluent_unstable","useFluent","useKeyborgRef","targetDocument","keyborgRef","useRef","useEffect","targetWindow","defaultView","keyborg","current"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,aAAa,EAAEC,cAAc,QAAsB,UAAU;AACtE,SAASC,sBAAsBC,SAAS,QAAQ,kCAAkC;AAElF;;;;CAIC,GACD,OAAO,SAASC;IACd,MAAM,EAAEC,cAAc,EAAE,GAAGF;IAC3B,MAAMG,aAAaP,MAAMQ,MAAM,CAAiB;IAEhDR,MAAMS,SAAS,CAAC;QACd,MAAMC,eAAeJ,2BAAAA,qCAAAA,eAAgBK,WAAW;QAEhD,IAAID,cAAc;YAChB,MAAME,UAAUX,cAAcS;YAC9BH,WAAWM,OAAO,GAAGD;YAErB,OAAO;gBACLV,eAAeU;gBACfL,WAAWM,OAAO,GAAG;YACvB;QACF;IACF,GAAG;QAACP;KAAe;IAEnB,OAAOC;AACT"}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["../src/hooks/useMergeTabsterAttributes.ts"],"sourcesContent":["import * as React from 'react';\nimport { Types, TABSTER_ATTRIBUTE_NAME } from 'tabster';\n\n/**\n * Merges a collection of tabster attributes.\n *\n * ⚠️The attributes passed as arguments to this hook cannot change at runtime.\n * @internal\n * @param attributes - collection of tabster attributes from other react-tabster hooks\n * @returns single merged tabster attribute\n */\nexport const useMergedTabsterAttributes_unstable = (\n ...attributes: (Partial<Types.TabsterDOMAttribute> | null | undefined)[]\n): Types.TabsterDOMAttribute => {\n 'use no memo';\n\n const stringAttributes = attributes.reduce<string[]>((acc, curr) => {\n if (curr?.[TABSTER_ATTRIBUTE_NAME]) {\n acc.push(curr[TABSTER_ATTRIBUTE_NAME]);\n }\n return acc;\n }, []);\n\n if (process.env.NODE_ENV !== 'production') {\n // ignoring rules of hooks because this is a condition based on the environment\n // it's safe to ignore the rule\n // eslint-disable-next-line react-hooks/rules-of-hooks\n useWarnIfUnstableAttributes(stringAttributes);\n }\n\n return React.useMemo(\n () => ({\n [TABSTER_ATTRIBUTE_NAME]: stringAttributes.length > 0 ? stringAttributes.reduce(mergeJSONStrings) : undefined,\n }),\n // disable exhaustive-deps because we want to memoize the result of the reduction\n // this is safe because the collection of attributes is not expected to change at runtime\n // eslint-disable-next-line react-hooks/exhaustive-deps\n stringAttributes,\n );\n};\n\n/**\n * Merges two JSON strings into one.\n */\nconst mergeJSONStrings = (a: string, b: string): string =>\n JSON.stringify(Object.assign(safelyParseJSON(a), safelyParseJSON(b)));\n\n/**\n * Tries to parse a JSON string and returns an object.\n * If the JSON string is invalid, an empty object is returned.\n */\nconst safelyParseJSON = (json: string): object => {\n try {\n return JSON.parse(json);\n } catch {\n return {};\n }\n};\n\n/**\n * Helper hook that ensures that the attributes passed to the hook are stable.\n * This is necessary because the attributes are expected to not change at runtime.\n *\n * This hook will console.warn if the attributes change at runtime.\n */\nconst useWarnIfUnstableAttributes = (attributes: string[]) => {\n 'use no memo';\n\n const initialAttributesRef = React.useRef(attributes);\n\n let isStable = initialAttributesRef.current.length === attributes.length;\n if (initialAttributesRef.current !== attributes && isStable) {\n for (let i = 0; i < attributes.length; i++) {\n if (initialAttributesRef.current[i] !== attributes[i]) {\n isStable = false;\n break;\n }\n }\n }\n React.useEffect(() => {\n if (!isStable) {\n const error = new Error();\n // eslint-disable-next-line no-console\n console.warn(/** #__DE-INDENT__ */ `\n @fluentui/react-tabster [useMergedTabsterAttributes]:\n The attributes passed to the hook changed at runtime.\n This might lead to unexpected behavior, please ensure that the attributes are stable.\n ${error.stack}\n `);\n }\n }, [isStable]);\n};\n"],"names":["React","TABSTER_ATTRIBUTE_NAME","useMergedTabsterAttributes_unstable","attributes","stringAttributes","reduce","acc","curr","push","process","env","NODE_ENV","useWarnIfUnstableAttributes","useMemo","length","mergeJSONStrings","undefined","a","b","JSON","stringify","Object","assign","safelyParseJSON","json","parse","initialAttributesRef","useRef","isStable","current","i","useEffect","error","Error","console","warn","stack"],"
|
1
|
+
{"version":3,"sources":["../src/hooks/useMergeTabsterAttributes.ts"],"sourcesContent":["import * as React from 'react';\nimport { Types, TABSTER_ATTRIBUTE_NAME } from 'tabster';\n\n/**\n * Merges a collection of tabster attributes.\n *\n * ⚠️The attributes passed as arguments to this hook cannot change at runtime.\n * @internal\n * @param attributes - collection of tabster attributes from other react-tabster hooks\n * @returns single merged tabster attribute\n */\nexport const useMergedTabsterAttributes_unstable = (\n ...attributes: (Partial<Types.TabsterDOMAttribute> | null | undefined)[]\n): Types.TabsterDOMAttribute => {\n 'use no memo';\n\n const stringAttributes = attributes.reduce<string[]>((acc, curr) => {\n if (curr?.[TABSTER_ATTRIBUTE_NAME]) {\n acc.push(curr[TABSTER_ATTRIBUTE_NAME]);\n }\n return acc;\n }, []);\n\n if (process.env.NODE_ENV !== 'production') {\n // ignoring rules of hooks because this is a condition based on the environment\n // it's safe to ignore the rule\n // eslint-disable-next-line react-hooks/rules-of-hooks\n useWarnIfUnstableAttributes(stringAttributes);\n }\n\n return React.useMemo(\n () => ({\n [TABSTER_ATTRIBUTE_NAME]: stringAttributes.length > 0 ? stringAttributes.reduce(mergeJSONStrings) : undefined,\n }),\n // disable exhaustive-deps because we want to memoize the result of the reduction\n // this is safe because the collection of attributes is not expected to change at runtime\n // eslint-disable-next-line react-hooks/exhaustive-deps\n stringAttributes,\n );\n};\n\n/**\n * Merges two JSON strings into one.\n */\nconst mergeJSONStrings = (a: string, b: string): string =>\n JSON.stringify(Object.assign(safelyParseJSON(a), safelyParseJSON(b)));\n\n/**\n * Tries to parse a JSON string and returns an object.\n * If the JSON string is invalid, an empty object is returned.\n */\nconst safelyParseJSON = (json: string): object => {\n try {\n return JSON.parse(json);\n } catch {\n return {};\n }\n};\n\n/**\n * Helper hook that ensures that the attributes passed to the hook are stable.\n * This is necessary because the attributes are expected to not change at runtime.\n *\n * This hook will console.warn if the attributes change at runtime.\n */\nconst useWarnIfUnstableAttributes = (attributes: string[]) => {\n 'use no memo';\n\n const initialAttributesRef = React.useRef(attributes);\n\n let isStable = initialAttributesRef.current.length === attributes.length;\n if (initialAttributesRef.current !== attributes && isStable) {\n for (let i = 0; i < attributes.length; i++) {\n if (initialAttributesRef.current[i] !== attributes[i]) {\n isStable = false;\n break;\n }\n }\n }\n React.useEffect(() => {\n if (!isStable) {\n const error = new Error();\n // eslint-disable-next-line no-console\n console.warn(/** #__DE-INDENT__ */ `\n @fluentui/react-tabster [useMergedTabsterAttributes]:\n The attributes passed to the hook changed at runtime.\n This might lead to unexpected behavior, please ensure that the attributes are stable.\n ${error.stack}\n `);\n }\n }, [isStable]);\n};\n"],"names":["React","TABSTER_ATTRIBUTE_NAME","useMergedTabsterAttributes_unstable","attributes","stringAttributes","reduce","acc","curr","push","process","env","NODE_ENV","useWarnIfUnstableAttributes","useMemo","length","mergeJSONStrings","undefined","a","b","JSON","stringify","Object","assign","safelyParseJSON","json","parse","initialAttributesRef","useRef","isStable","current","i","useEffect","error","Error","console","warn","stack"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAAgBC,sBAAsB,QAAQ,UAAU;AAExD;;;;;;;CAOC,GACD,OAAO,MAAMC,sCAAsC,CACjD,GAAGC;IAEH;IAEA,MAAMC,mBAAmBD,WAAWE,MAAM,CAAW,CAACC,KAAKC;QACzD,IAAIA,iBAAAA,2BAAAA,IAAM,CAACN,uBAAuB,EAAE;YAClCK,IAAIE,IAAI,CAACD,IAAI,CAACN,uBAAuB;QACvC;QACA,OAAOK;IACT,GAAG,EAAE;IAEL,IAAIG,QAAQC,GAAG,CAACC,QAAQ,KAAK,cAAc;QACzC,+EAA+E;QAC/E,+BAA+B;QAC/B,sDAAsD;QACtDC,4BAA4BR;IAC9B;IAEA,OAAOJ,MAAMa,OAAO,CAClB,IAAO,CAAA;YACL,CAACZ,uBAAuB,EAAEG,iBAAiBU,MAAM,GAAG,IAAIV,iBAAiBC,MAAM,CAACU,oBAAoBC;QACtG,CAAA,GACA,iFAAiF;IACjF,yFAAyF;IACzF,uDAAuD;IACvDZ;AAEJ,EAAE;AAEF;;CAEC,GACD,MAAMW,mBAAmB,CAACE,GAAWC,IACnCC,KAAKC,SAAS,CAACC,OAAOC,MAAM,CAACC,gBAAgBN,IAAIM,gBAAgBL;AAEnE;;;CAGC,GACD,MAAMK,kBAAkB,CAACC;IACvB,IAAI;QACF,OAAOL,KAAKM,KAAK,CAACD;IACpB,EAAE,OAAM;QACN,OAAO,CAAC;IACV;AACF;AAEA;;;;;CAKC,GACD,MAAMZ,8BAA8B,CAACT;IACnC;IAEA,MAAMuB,uBAAuB1B,MAAM2B,MAAM,CAACxB;IAE1C,IAAIyB,WAAWF,qBAAqBG,OAAO,CAACf,MAAM,KAAKX,WAAWW,MAAM;IACxE,IAAIY,qBAAqBG,OAAO,KAAK1B,cAAcyB,UAAU;QAC3D,IAAK,IAAIE,IAAI,GAAGA,IAAI3B,WAAWW,MAAM,EAAEgB,IAAK;YAC1C,IAAIJ,qBAAqBG,OAAO,CAACC,EAAE,KAAK3B,UAAU,CAAC2B,EAAE,EAAE;gBACrDF,WAAW;gBACX;YACF;QACF;IACF;IACA5B,MAAM+B,SAAS,CAAC;QACd,IAAI,CAACH,UAAU;YACb,MAAMI,QAAQ,IAAIC;YAClB,sCAAsC;YACtCC,QAAQC,IAAI,CAAC,mBAAmB,GAAG,CAAC;;;;QAIlC,EAAEH,MAAMI,KAAK,CAAC;MAChB,CAAC;QACH;IACF,GAAG;QAACR;KAAS;AACf"}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["../src/hooks/useModalAttributes.ts"],"sourcesContent":["import { useId } from '@fluentui/react-utilities';\nimport { useTabsterAttributes } from './useTabsterAttributes';\nimport { getModalizer, getRestorer, Types as TabsterTypes, RestorerTypes } from 'tabster';\nimport { useTabster } from './useTabster';\n\nconst DangerousNeverHiddenAttribute = 'data-tabster-never-hide';\nconst DangerousNeverHiddenPropObject = { [DangerousNeverHiddenAttribute]: '' };\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\n/**\n * !!DANGEROUS!! Designates an element that will not be hidden even when outside an open modal.\n * Only works for top-level elements; should be used with extreme care.\n * @returns Attribute to apply to the target element that should never receive aria-hidden\n */\nexport function useDangerousNeverHidden_unstable(): { [key: string]: string } {\n return DangerousNeverHiddenPropObject;\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":["useId","useTabsterAttributes","getModalizer","getRestorer","RestorerTypes","useTabster","DangerousNeverHiddenAttribute","DangerousNeverHiddenPropObject","useDangerousNeverHidden_unstable","tabsterAccessibleCheck","element","hasAttribute","initTabsterModules","tabster","undefined","useModalAttributes","options","trapFocus","alwaysFocusable","legacyTrapFocus","id","modalAttributes","restorer","type","Source","modalizer","isOthersAccessible","isAlwaysAccessible","isTrapped","triggerAttributes","Target"],"
|
1
|
+
{"version":3,"sources":["../src/hooks/useModalAttributes.ts"],"sourcesContent":["import { useId } from '@fluentui/react-utilities';\nimport { useTabsterAttributes } from './useTabsterAttributes';\nimport { getModalizer, getRestorer, Types as TabsterTypes, RestorerTypes } from 'tabster';\nimport { useTabster } from './useTabster';\n\nconst DangerousNeverHiddenAttribute = 'data-tabster-never-hide';\nconst DangerousNeverHiddenPropObject = { [DangerousNeverHiddenAttribute]: '' };\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\n/**\n * !!DANGEROUS!! Designates an element that will not be hidden even when outside an open modal.\n * Only works for top-level elements; should be used with extreme care.\n * @returns Attribute to apply to the target element that should never receive aria-hidden\n */\nexport function useDangerousNeverHidden_unstable(): { [key: string]: string } {\n return DangerousNeverHiddenPropObject;\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":["useId","useTabsterAttributes","getModalizer","getRestorer","RestorerTypes","useTabster","DangerousNeverHiddenAttribute","DangerousNeverHiddenPropObject","useDangerousNeverHidden_unstable","tabsterAccessibleCheck","element","hasAttribute","initTabsterModules","tabster","undefined","useModalAttributes","options","trapFocus","alwaysFocusable","legacyTrapFocus","id","modalAttributes","restorer","type","Source","modalizer","isOthersAccessible","isAlwaysAccessible","isTrapped","triggerAttributes","Target"],"mappings":"AAAA,SAASA,KAAK,QAAQ,4BAA4B;AAClD,SAASC,oBAAoB,QAAQ,yBAAyB;AAC9D,SAASC,YAAY,EAAEC,WAAW,EAAyBC,aAAa,QAAQ,UAAU;AAC1F,SAASC,UAAU,QAAQ,eAAe;AAE1C,MAAMC,gCAAgC;AACtC,MAAMC,iCAAiC;IAAE,CAACD,8BAA8B,EAAE;AAAG;AA6B7E;;;;CAIC,GACD,OAAO,SAASE;IACd,OAAOD;AACT;AAEA,MAAME,yBAAuEC,CAAAA;IAC3E,OAAOA,QAAQC,YAAY,CAACL;AAC9B;AAEA,SAASM,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;IAC9CX,WAAWO;IAEX,MAAMQ,KAAKpB,MAAM,UAAUgB,QAAQI,EAAE;IACrC,MAAMC,kBAAkBpB,qBAAqB;QAC3CqB,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,oBAAoB5B,qBAAqB;QAC7CqB,UAAU;YAAEC,MAAMnB,cAAc0B,MAAM;QAAC;IACzC;IAEA,OAAO;QAAET;QAAiBQ;IAAkB;AAC9C,EAAE"}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["../src/hooks/useObservedElement.ts"],"sourcesContent":["import { getObservedElement, Types as TabsterTypes } from 'tabster';\n\nimport { useTabster } from './useTabster';\nimport { useTabsterAttributes } from './useTabsterAttributes';\n\nexport function useObservedElement(name: string | string[]): TabsterTypes.TabsterDOMAttribute {\n useTabster(getObservedElement);\n\n return useTabsterAttributes({ observed: { names: Array.isArray(name) ? name : [name] } });\n}\n"],"names":["getObservedElement","useTabster","useTabsterAttributes","useObservedElement","name","observed","names","Array","isArray"],"
|
1
|
+
{"version":3,"sources":["../src/hooks/useObservedElement.ts"],"sourcesContent":["import { getObservedElement, Types as TabsterTypes } from 'tabster';\n\nimport { useTabster } from './useTabster';\nimport { useTabsterAttributes } from './useTabsterAttributes';\n\nexport function useObservedElement(name: string | string[]): TabsterTypes.TabsterDOMAttribute {\n useTabster(getObservedElement);\n\n return useTabsterAttributes({ observed: { names: Array.isArray(name) ? name : [name] } });\n}\n"],"names":["getObservedElement","useTabster","useTabsterAttributes","useObservedElement","name","observed","names","Array","isArray"],"mappings":"AAAA,SAASA,kBAAkB,QAA+B,UAAU;AAEpE,SAASC,UAAU,QAAQ,eAAe;AAC1C,SAASC,oBAAoB,QAAQ,yBAAyB;AAE9D,OAAO,SAASC,mBAAmBC,IAAuB;IACxDH,WAAWD;IAEX,OAAOE,qBAAqB;QAAEG,UAAU;YAAEC,OAAOC,MAAMC,OAAO,CAACJ,QAAQA,OAAO;gBAACA;aAAK;QAAC;IAAE;AACzF"}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["../src/hooks/useOnKeyboardNavigationChange.ts"],"sourcesContent":["import type { KeyborgCallback } from 'keyborg';\nimport * as React from 'react';\nimport { useEventCallback } from '@fluentui/react-utilities';\n\nimport { useKeyborgRef } from './useKeyborgRef';\n\n/**\n * Instantiates [keyborg](https://github.com/microsoft/keyborg) and subscribes to changes\n * in the keyboard navigation mode.\n *\n * @param callback - called every time the keyboard navigation state changes\n */\nexport function useOnKeyboardNavigationChange(callback: (isNavigatingWithKeyboard: boolean) => void) {\n const keyborgRef = useKeyborgRef();\n const eventCallback = useEventCallback(callback);\n\n React.useEffect(() => {\n const keyborg = keyborgRef.current;\n\n if (keyborg) {\n const cb: KeyborgCallback = next => {\n eventCallback(next);\n };\n\n keyborg.subscribe(cb);\n cb(keyborg.isNavigatingWithKeyboard());\n\n return () => {\n keyborg.unsubscribe(cb);\n };\n }\n }, [keyborgRef, eventCallback]);\n}\n"],"names":["React","useEventCallback","useKeyborgRef","useOnKeyboardNavigationChange","callback","keyborgRef","eventCallback","useEffect","keyborg","current","cb","next","subscribe","isNavigatingWithKeyboard","unsubscribe"],"
|
1
|
+
{"version":3,"sources":["../src/hooks/useOnKeyboardNavigationChange.ts"],"sourcesContent":["import type { KeyborgCallback } from 'keyborg';\nimport * as React from 'react';\nimport { useEventCallback } from '@fluentui/react-utilities';\n\nimport { useKeyborgRef } from './useKeyborgRef';\n\n/**\n * Instantiates [keyborg](https://github.com/microsoft/keyborg) and subscribes to changes\n * in the keyboard navigation mode.\n *\n * @param callback - called every time the keyboard navigation state changes\n */\nexport function useOnKeyboardNavigationChange(callback: (isNavigatingWithKeyboard: boolean) => void) {\n const keyborgRef = useKeyborgRef();\n const eventCallback = useEventCallback(callback);\n\n React.useEffect(() => {\n const keyborg = keyborgRef.current;\n\n if (keyborg) {\n const cb: KeyborgCallback = next => {\n eventCallback(next);\n };\n\n keyborg.subscribe(cb);\n cb(keyborg.isNavigatingWithKeyboard());\n\n return () => {\n keyborg.unsubscribe(cb);\n };\n }\n }, [keyborgRef, eventCallback]);\n}\n"],"names":["React","useEventCallback","useKeyborgRef","useOnKeyboardNavigationChange","callback","keyborgRef","eventCallback","useEffect","keyborg","current","cb","next","subscribe","isNavigatingWithKeyboard","unsubscribe"],"mappings":"AACA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,gBAAgB,QAAQ,4BAA4B;AAE7D,SAASC,aAAa,QAAQ,kBAAkB;AAEhD;;;;;CAKC,GACD,OAAO,SAASC,8BAA8BC,QAAqD;IACjG,MAAMC,aAAaH;IACnB,MAAMI,gBAAgBL,iBAAiBG;IAEvCJ,MAAMO,SAAS,CAAC;QACd,MAAMC,UAAUH,WAAWI,OAAO;QAElC,IAAID,SAAS;YACX,MAAME,KAAsBC,CAAAA;gBAC1BL,cAAcK;YAChB;YAEAH,QAAQI,SAAS,CAACF;YAClBA,GAAGF,QAAQK,wBAAwB;YAEnC,OAAO;gBACLL,QAAQM,WAAW,CAACJ;YACtB;QACF;IACF,GAAG;QAACL;QAAYC;KAAc;AAChC"}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["../src/hooks/useRestoreFocus.ts"],"sourcesContent":["import { getRestorer, getTabsterAttribute, Types as TabsterTypes, RestorerTypes } from 'tabster';\nimport { useTabster } from './useTabster';\n\n/**\n * Focus will be restored to the most recent target element when it is lost from a source\n * @returns Attribute to apply to the target element where focus is restored\n */\nexport function useRestoreFocusTarget(): TabsterTypes.TabsterDOMAttribute {\n // Initializes the restorer API\n useTabster(getRestorer);\n\n return getTabsterAttribute({ restorer: { type: RestorerTypes.Target } });\n}\n\n/**\n * Focus will be restored to the most recent target element when it is lost from a source\n * @returns Attribute to apply to the element that might lose focus\n */\nexport function useRestoreFocusSource(): TabsterTypes.TabsterDOMAttribute {\n // Initializes the restorer API\n useTabster(getRestorer);\n\n return getTabsterAttribute({ restorer: { type: RestorerTypes.Source } });\n}\n"],"names":["getRestorer","getTabsterAttribute","RestorerTypes","useTabster","useRestoreFocusTarget","restorer","type","Target","useRestoreFocusSource","Source"],"
|
1
|
+
{"version":3,"sources":["../src/hooks/useRestoreFocus.ts"],"sourcesContent":["import { getRestorer, getTabsterAttribute, Types as TabsterTypes, RestorerTypes } from 'tabster';\nimport { useTabster } from './useTabster';\n\n/**\n * Focus will be restored to the most recent target element when it is lost from a source\n * @returns Attribute to apply to the target element where focus is restored\n */\nexport function useRestoreFocusTarget(): TabsterTypes.TabsterDOMAttribute {\n // Initializes the restorer API\n useTabster(getRestorer);\n\n return getTabsterAttribute({ restorer: { type: RestorerTypes.Target } });\n}\n\n/**\n * Focus will be restored to the most recent target element when it is lost from a source\n * @returns Attribute to apply to the element that might lose focus\n */\nexport function useRestoreFocusSource(): TabsterTypes.TabsterDOMAttribute {\n // Initializes the restorer API\n useTabster(getRestorer);\n\n return getTabsterAttribute({ restorer: { type: RestorerTypes.Source } });\n}\n"],"names":["getRestorer","getTabsterAttribute","RestorerTypes","useTabster","useRestoreFocusTarget","restorer","type","Target","useRestoreFocusSource","Source"],"mappings":"AAAA,SAASA,WAAW,EAAEC,mBAAmB,EAAyBC,aAAa,QAAQ,UAAU;AACjG,SAASC,UAAU,QAAQ,eAAe;AAE1C;;;CAGC,GACD,OAAO,SAASC;IACd,+BAA+B;IAC/BD,WAAWH;IAEX,OAAOC,oBAAoB;QAAEI,UAAU;YAAEC,MAAMJ,cAAcK,MAAM;QAAC;IAAE;AACxE;AAEA;;;CAGC,GACD,OAAO,SAASC;IACd,+BAA+B;IAC/BL,WAAWH;IAEX,OAAOC,oBAAoB;QAAEI,UAAU;YAAEC,MAAMJ,cAAcO,MAAM;QAAC;IAAE;AACxE"}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["../src/hooks/useSetKeyboardNavigation.ts"],"sourcesContent":["import * as React from 'react';\nimport { useKeyborgRef } from './useKeyborgRef';\n\n/**\n */\nexport function useSetKeyboardNavigation() {\n const keyborgRef = useKeyborgRef();\n\n return React.useCallback(\n (isNavigatingWithKeyboard: boolean) => {\n keyborgRef.current?.setVal(isNavigatingWithKeyboard);\n },\n [keyborgRef],\n );\n}\n"],"names":["React","useKeyborgRef","useSetKeyboardNavigation","keyborgRef","useCallback","isNavigatingWithKeyboard","current","setVal"],"
|
1
|
+
{"version":3,"sources":["../src/hooks/useSetKeyboardNavigation.ts"],"sourcesContent":["import * as React from 'react';\nimport { useKeyborgRef } from './useKeyborgRef';\n\n/**\n */\nexport function useSetKeyboardNavigation() {\n const keyborgRef = useKeyborgRef();\n\n return React.useCallback(\n (isNavigatingWithKeyboard: boolean) => {\n keyborgRef.current?.setVal(isNavigatingWithKeyboard);\n },\n [keyborgRef],\n );\n}\n"],"names":["React","useKeyborgRef","useSetKeyboardNavigation","keyborgRef","useCallback","isNavigatingWithKeyboard","current","setVal"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,aAAa,QAAQ,kBAAkB;AAEhD;CACC,GACD,OAAO,SAASC;IACd,MAAMC,aAAaF;IAEnB,OAAOD,MAAMI,WAAW,CACtB,CAACC;YACCF;SAAAA,sBAAAA,WAAWG,OAAO,cAAlBH,0CAAAA,oBAAoBI,MAAM,CAACF;IAC7B,GACA;QAACF;KAAW;AAEhB"}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["../src/hooks/useTabster.ts"],"sourcesContent":["import * as React from 'react';\nimport { createTabster, disposeTabster, Types as TabsterTypes } from 'tabster';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { getParent, useIsomorphicLayoutEffect, usePrevious } from '@fluentui/react-utilities';\n\ninterface WindowWithTabsterShadowDOMAPI extends Window {\n __tabsterShadowDOMAPI?: TabsterTypes.DOMAPI;\n}\n\ntype UseTabsterFactory<FactoryResult> = (tabster: TabsterTypes.TabsterCore) => FactoryResult;\n\nconst DEFAULT_FACTORY: UseTabsterFactory<TabsterTypes.TabsterCore> = tabster => {\n return tabster;\n};\n\n/**\n * Creates a tabster instance with the provided configuration\n *\n * @internal\n * @param targetDocument\n */\nexport function createTabsterWithConfig(targetDocument: Document | undefined): TabsterTypes.TabsterCore | undefined {\n const defaultView = targetDocument?.defaultView || undefined;\n const shadowDOMAPI = (defaultView as WindowWithTabsterShadowDOMAPI | undefined)?.__tabsterShadowDOMAPI;\n\n if (defaultView) {\n return createTabster(defaultView, {\n autoRoot: {},\n controlTab: false,\n getParent,\n checkUncontrolledTrappingFocus: element =>\n !!element.firstElementChild?.hasAttribute('data-is-focus-trap-zone-bumper'),\n DOMAPI: shadowDOMAPI,\n });\n }\n}\n\n/**\n * Tries to get a tabster instance on the current window or creates a new one\n * Since Tabster is single instance only, feel free to call this hook to ensure Tabster exists if necessary\n *\n * @internal\n * @returns Tabster a ref to core instance or a factory result\n */\nexport function useTabster(): React.RefObject<TabsterTypes.TabsterCore | null>;\nexport function useTabster<FactoryResult>(\n factory: UseTabsterFactory<FactoryResult>,\n): React.RefObject<FactoryResult | null>;\n\nexport function useTabster<FactoryResult>(factory = DEFAULT_FACTORY) {\n const { targetDocument } = useFluent();\n const factoryResultRef = React.useRef<FactoryResult | null>(null);\n\n useIsomorphicLayoutEffect(() => {\n const tabster = createTabsterWithConfig(targetDocument);\n\n if (tabster) {\n factoryResultRef.current = factory(tabster) as FactoryResult;\n\n return () => {\n disposeTabster(tabster);\n factoryResultRef.current = null;\n };\n }\n }, [targetDocument, factory]);\n\n if (process.env.NODE_ENV !== 'production') {\n // eslint-disable-next-line\n const previousFactory = usePrevious(factory);\n\n if (previousFactory !== null && previousFactory !== factory) {\n throw new Error(\n [\n '@fluentui/react-tabster: ',\n 'The factory function passed to useTabster has changed. This should not ever happen.',\n ].join('\\n'),\n );\n }\n }\n\n return factoryResultRef;\n}\n"],"names":["React","createTabster","disposeTabster","useFluent_unstable","useFluent","getParent","useIsomorphicLayoutEffect","usePrevious","DEFAULT_FACTORY","tabster","createTabsterWithConfig","targetDocument","defaultView","undefined","shadowDOMAPI","__tabsterShadowDOMAPI","autoRoot","controlTab","checkUncontrolledTrappingFocus","element","firstElementChild","hasAttribute","DOMAPI","useTabster","factory","factoryResultRef","useRef","current","process","env","NODE_ENV","previousFactory","Error","join"],"
|
1
|
+
{"version":3,"sources":["../src/hooks/useTabster.ts"],"sourcesContent":["import * as React from 'react';\nimport { createTabster, disposeTabster, Types as TabsterTypes } from 'tabster';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { getParent, useIsomorphicLayoutEffect, usePrevious } from '@fluentui/react-utilities';\n\ninterface WindowWithTabsterShadowDOMAPI extends Window {\n __tabsterShadowDOMAPI?: TabsterTypes.DOMAPI;\n}\n\ntype UseTabsterFactory<FactoryResult> = (tabster: TabsterTypes.TabsterCore) => FactoryResult;\n\nconst DEFAULT_FACTORY: UseTabsterFactory<TabsterTypes.TabsterCore> = tabster => {\n return tabster;\n};\n\n/**\n * Creates a tabster instance with the provided configuration\n *\n * @internal\n * @param targetDocument\n */\nexport function createTabsterWithConfig(targetDocument: Document | undefined): TabsterTypes.TabsterCore | undefined {\n const defaultView = targetDocument?.defaultView || undefined;\n const shadowDOMAPI = (defaultView as WindowWithTabsterShadowDOMAPI | undefined)?.__tabsterShadowDOMAPI;\n\n if (defaultView) {\n return createTabster(defaultView, {\n autoRoot: {},\n controlTab: false,\n getParent,\n checkUncontrolledTrappingFocus: element =>\n !!element.firstElementChild?.hasAttribute('data-is-focus-trap-zone-bumper'),\n DOMAPI: shadowDOMAPI,\n });\n }\n}\n\n/**\n * Tries to get a tabster instance on the current window or creates a new one\n * Since Tabster is single instance only, feel free to call this hook to ensure Tabster exists if necessary\n *\n * @internal\n * @returns Tabster a ref to core instance or a factory result\n */\nexport function useTabster(): React.RefObject<TabsterTypes.TabsterCore | null>;\nexport function useTabster<FactoryResult>(\n factory: UseTabsterFactory<FactoryResult>,\n): React.RefObject<FactoryResult | null>;\n\nexport function useTabster<FactoryResult>(factory = DEFAULT_FACTORY) {\n const { targetDocument } = useFluent();\n const factoryResultRef = React.useRef<FactoryResult | null>(null);\n\n useIsomorphicLayoutEffect(() => {\n const tabster = createTabsterWithConfig(targetDocument);\n\n if (tabster) {\n factoryResultRef.current = factory(tabster) as FactoryResult;\n\n return () => {\n disposeTabster(tabster);\n factoryResultRef.current = null;\n };\n }\n }, [targetDocument, factory]);\n\n if (process.env.NODE_ENV !== 'production') {\n // eslint-disable-next-line\n const previousFactory = usePrevious(factory);\n\n if (previousFactory !== null && previousFactory !== factory) {\n throw new Error(\n [\n '@fluentui/react-tabster: ',\n 'The factory function passed to useTabster has changed. This should not ever happen.',\n ].join('\\n'),\n );\n }\n }\n\n return factoryResultRef;\n}\n"],"names":["React","createTabster","disposeTabster","useFluent_unstable","useFluent","getParent","useIsomorphicLayoutEffect","usePrevious","DEFAULT_FACTORY","tabster","createTabsterWithConfig","targetDocument","defaultView","undefined","shadowDOMAPI","__tabsterShadowDOMAPI","autoRoot","controlTab","checkUncontrolledTrappingFocus","element","firstElementChild","hasAttribute","DOMAPI","useTabster","factory","factoryResultRef","useRef","current","process","env","NODE_ENV","previousFactory","Error","join"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,aAAa,EAAEC,cAAc,QAA+B,UAAU;AAC/E,SAASC,sBAAsBC,SAAS,QAAQ,kCAAkC;AAClF,SAASC,SAAS,EAAEC,yBAAyB,EAAEC,WAAW,QAAQ,4BAA4B;AAQ9F,MAAMC,kBAA+DC,CAAAA;IACnE,OAAOA;AACT;AAEA;;;;;CAKC,GACD,OAAO,SAASC,wBAAwBC,cAAoC;IAC1E,MAAMC,cAAcD,CAAAA,2BAAAA,qCAAAA,eAAgBC,WAAW,KAAIC;IACnD,MAAMC,eAAgBF,wBAAAA,kCAAD,AAACA,YAA2DG,qBAAqB;IAEtG,IAAIH,aAAa;QACf,OAAOX,cAAcW,aAAa;YAChCI,UAAU,CAAC;YACXC,YAAY;YACZZ;YACAa,gCAAgCC,CAAAA;oBAC5BA;uBAAF,CAAC,GAACA,6BAAAA,QAAQC,iBAAiB,cAAzBD,iDAAAA,2BAA2BE,YAAY,CAAC;;YAC5CC,QAAQR;QACV;IACF;AACF;AAcA,OAAO,SAASS,WAA0BC,UAAUhB,eAAe;IACjE,MAAM,EAAEG,cAAc,EAAE,GAAGP;IAC3B,MAAMqB,mBAAmBzB,MAAM0B,MAAM,CAAuB;IAE5DpB,0BAA0B;QACxB,MAAMG,UAAUC,wBAAwBC;QAExC,IAAIF,SAAS;YACXgB,iBAAiBE,OAAO,GAAGH,QAAQf;YAEnC,OAAO;gBACLP,eAAeO;gBACfgB,iBAAiBE,OAAO,GAAG;YAC7B;QACF;IACF,GAAG;QAAChB;QAAgBa;KAAQ;IAE5B,IAAII,QAAQC,GAAG,CAACC,QAAQ,KAAK,cAAc;QACzC,2BAA2B;QAC3B,MAAMC,kBAAkBxB,YAAYiB;QAEpC,IAAIO,oBAAoB,QAAQA,oBAAoBP,SAAS;YAC3D,MAAM,IAAIQ,MACR;gBACE;gBACA;aACD,CAACC,IAAI,CAAC;QAEX;IACF;IAEA,OAAOR;AACT"}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["../src/hooks/useTabsterAttributes.ts"],"sourcesContent":["import { getTabsterAttribute, Types as TabsterTypes, TABSTER_ATTRIBUTE_NAME } from 'tabster';\nimport { useTabster } from './useTabster';\nimport * as React from 'react';\n\n/**\n * @internal\n * Hook that returns tabster attributes while ensuring tabster exists\n */\nexport const useTabsterAttributes = (props: TabsterTypes.TabsterAttributeProps): TabsterTypes.TabsterDOMAttribute => {\n // A tabster instance is not necessary to generate tabster attributes\n // but calling the hook will ensure that a tabster instance exists internally and avoids consumers doing the same\n useTabster();\n\n const strAttr = getTabsterAttribute(props, true);\n\n return React.useMemo(\n () => ({\n [TABSTER_ATTRIBUTE_NAME]: strAttr,\n }),\n [strAttr],\n );\n};\n"],"names":["getTabsterAttribute","TABSTER_ATTRIBUTE_NAME","useTabster","React","useTabsterAttributes","props","strAttr","useMemo"],"
|
1
|
+
{"version":3,"sources":["../src/hooks/useTabsterAttributes.ts"],"sourcesContent":["import { getTabsterAttribute, Types as TabsterTypes, TABSTER_ATTRIBUTE_NAME } from 'tabster';\nimport { useTabster } from './useTabster';\nimport * as React from 'react';\n\n/**\n * @internal\n * Hook that returns tabster attributes while ensuring tabster exists\n */\nexport const useTabsterAttributes = (props: TabsterTypes.TabsterAttributeProps): TabsterTypes.TabsterDOMAttribute => {\n // A tabster instance is not necessary to generate tabster attributes\n // but calling the hook will ensure that a tabster instance exists internally and avoids consumers doing the same\n useTabster();\n\n const strAttr = getTabsterAttribute(props, true);\n\n return React.useMemo(\n () => ({\n [TABSTER_ATTRIBUTE_NAME]: strAttr,\n }),\n [strAttr],\n );\n};\n"],"names":["getTabsterAttribute","TABSTER_ATTRIBUTE_NAME","useTabster","React","useTabsterAttributes","props","strAttr","useMemo"],"mappings":"AAAA,SAASA,mBAAmB,EAAyBC,sBAAsB,QAAQ,UAAU;AAC7F,SAASC,UAAU,QAAQ,eAAe;AAC1C,YAAYC,WAAW,QAAQ;AAE/B;;;CAGC,GACD,OAAO,MAAMC,uBAAuB,CAACC;IACnC,qEAAqE;IACrE,iHAAiH;IACjHH;IAEA,MAAMI,UAAUN,oBAAoBK,OAAO;IAE3C,OAAOF,MAAMI,OAAO,CAClB,IAAO,CAAA;YACL,CAACN,uBAAuB,EAAEK;QAC5B,CAAA,GACA;QAACA;KAAQ;AAEb,EAAE"}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["../src/hooks/useUncontrolledFocus.ts"],"sourcesContent":["import { getTabsterAttribute, Types as TabsterTypes } from 'tabster';\nimport { useTabster } from './useTabster';\n\n/**\n * Designates an area where tabster does not control focus\n * @returns Attribute to apply to the target element that should be uncontrolled by tabster\n */\nexport function useUncontrolledFocus(): TabsterTypes.TabsterDOMAttribute {\n useTabster();\n\n return getTabsterAttribute({ uncontrolled: {} });\n}\n"],"names":["getTabsterAttribute","useTabster","useUncontrolledFocus","uncontrolled"],"
|
1
|
+
{"version":3,"sources":["../src/hooks/useUncontrolledFocus.ts"],"sourcesContent":["import { getTabsterAttribute, Types as TabsterTypes } from 'tabster';\nimport { useTabster } from './useTabster';\n\n/**\n * Designates an area where tabster does not control focus\n * @returns Attribute to apply to the target element that should be uncontrolled by tabster\n */\nexport function useUncontrolledFocus(): TabsterTypes.TabsterDOMAttribute {\n useTabster();\n\n return getTabsterAttribute({ uncontrolled: {} });\n}\n"],"names":["getTabsterAttribute","useTabster","useUncontrolledFocus","uncontrolled"],"mappings":"AAAA,SAASA,mBAAmB,QAA+B,UAAU;AACrE,SAASC,UAAU,QAAQ,eAAe;AAE1C;;;CAGC,GACD,OAAO,SAASC;IACdD;IAEA,OAAOD,oBAAoB;QAAEG,cAAc,CAAC;IAAE;AAChD"}
|
package/lib/index.js.map
CHANGED
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["../src/index.ts"],"sourcesContent":["export {\n useArrowNavigationGroup,\n useFocusableGroup,\n useFocusFinders,\n useFocusVisible,\n useFocusWithin,\n useKeyboardNavAttribute,\n useDangerousNeverHidden_unstable,\n useModalAttributes,\n useTabsterAttributes,\n useObservedElement,\n useFocusObserved,\n useMergedTabsterAttributes_unstable,\n useRestoreFocusSource,\n useRestoreFocusTarget,\n useUncontrolledFocus,\n useOnKeyboardNavigationChange,\n useIsNavigatingWithKeyboard,\n useSetKeyboardNavigation,\n useFocusedElementChange,\n useActivateModal,\n} from './hooks/index';\nexport type {\n UseArrowNavigationGroupOptions,\n UseFocusableGroupOptions,\n UseModalAttributesOptions,\n} from './hooks/index';\n\nexport { createCustomFocusIndicatorStyle, createFocusOutlineStyle } from './focus/index';\n\nexport type {\n CreateCustomFocusIndicatorStyleOptions,\n CreateFocusOutlineStyleOptions,\n FocusOutlineOffset,\n FocusOutlineStyleOptions,\n} from './focus/index';\n\nexport { applyFocusVisiblePolyfill } from './focus/index';\nimport {\n type Types,\n type EventsTypes,\n dispatchGroupperMoveFocusEvent,\n dispatchMoverMoveFocusEvent,\n MoverMoveFocusEventName,\n MoverMoveFocusEvent,\n MoverKeys,\n GroupperMoveFocusEventName,\n GroupperMoveFocusEvent,\n GroupperMoveFocusActions,\n MoverMemorizedElementEventName,\n MoverMemorizedElementEvent,\n TabsterMoveFocusEventName,\n TabsterMoveFocusEvent,\n} from 'tabster';\n\nexport type TabsterDOMAttribute = Types.TabsterDOMAttribute;\n\nexport type { KeyborgFocusInEvent } from 'keyborg';\nexport { KEYBORG_FOCUSIN } from 'keyborg';\n\n// WARNING! ATTENTION! Tabster.Types was exported from here by mistake. To avoid breaking changes,\n// we are putting a snapshot of Tabster.Types@6.0.1 and marking the entire export as deprecated.\n// eslint-disable-next-line @typescript-eslint/naming-convention\nimport * as TabsterTypes6_0_1_DoNotUse from './tabster-types-6.0.1-do-not-use';\nexport {\n /** @deprecated (Do not use! Exposed by mistake and will be removed in the next major version.) */\n TabsterTypes6_0_1_DoNotUse as TabsterTypes,\n /** @deprecated Use element.dispatchEvent(new GroupperMoveFocusEvent({ action: GroupperMoveFocusActions.Escape })) */\n dispatchGroupperMoveFocusEvent,\n /** @deprecated Use element.dispatchEvent(new MoverMoveFocusEvent({ key: MoverKeys.ArrowDown })) */\n dispatchMoverMoveFocusEvent,\n};\n\n/**\n * For all exports below, we don't do wildcard exports to keep Tabster API flexible. We export only required\n * parts when they are needed.\n */\n\nexport { MoverMoveFocusEventName, MoverMoveFocusEvent, MoverKeys };\nexport type MoverMoveFocusEventDetail = EventsTypes.MoverMoveFocusEventDetail;\n\nexport { GroupperMoveFocusEventName, GroupperMoveFocusEvent, GroupperMoveFocusActions };\nexport type GroupperMoveFocusEventDetail = EventsTypes.GroupperMoveFocusEventDetail;\n\nexport { MoverMemorizedElementEventName, MoverMemorizedElementEvent };\nexport type MoverMemorizedElementEventDetail = EventsTypes.MoverMemorizedElementEventDetail;\n\nexport { TabsterMoveFocusEventName, TabsterMoveFocusEvent };\nexport type TabsterMoveFocusEventDetail = EventsTypes.TabsterMoveFocusEventDetail;\n"],"names":["useArrowNavigationGroup","useFocusableGroup","useFocusFinders","useFocusVisible","useFocusWithin","useKeyboardNavAttribute","useDangerousNeverHidden_unstable","useModalAttributes","useTabsterAttributes","useObservedElement","useFocusObserved","useMergedTabsterAttributes_unstable","useRestoreFocusSource","useRestoreFocusTarget","useUncontrolledFocus","useOnKeyboardNavigationChange","useIsNavigatingWithKeyboard","useSetKeyboardNavigation","useFocusedElementChange","useActivateModal","createCustomFocusIndicatorStyle","createFocusOutlineStyle","applyFocusVisiblePolyfill","dispatchGroupperMoveFocusEvent","dispatchMoverMoveFocusEvent","MoverMoveFocusEventName","MoverMoveFocusEvent","MoverKeys","GroupperMoveFocusEventName","GroupperMoveFocusEvent","GroupperMoveFocusActions","MoverMemorizedElementEventName","MoverMemorizedElementEvent","TabsterMoveFocusEventName","TabsterMoveFocusEvent","KEYBORG_FOCUSIN","TabsterTypes6_0_1_DoNotUse","TabsterTypes"],"
|
1
|
+
{"version":3,"sources":["../src/index.ts"],"sourcesContent":["export {\n useArrowNavigationGroup,\n useFocusableGroup,\n useFocusFinders,\n useFocusVisible,\n useFocusWithin,\n useKeyboardNavAttribute,\n useDangerousNeverHidden_unstable,\n useModalAttributes,\n useTabsterAttributes,\n useObservedElement,\n useFocusObserved,\n useMergedTabsterAttributes_unstable,\n useRestoreFocusSource,\n useRestoreFocusTarget,\n useUncontrolledFocus,\n useOnKeyboardNavigationChange,\n useIsNavigatingWithKeyboard,\n useSetKeyboardNavigation,\n useFocusedElementChange,\n useActivateModal,\n} from './hooks/index';\nexport type {\n UseArrowNavigationGroupOptions,\n UseFocusableGroupOptions,\n UseModalAttributesOptions,\n} from './hooks/index';\n\nexport { createCustomFocusIndicatorStyle, createFocusOutlineStyle } from './focus/index';\n\nexport type {\n CreateCustomFocusIndicatorStyleOptions,\n CreateFocusOutlineStyleOptions,\n FocusOutlineOffset,\n FocusOutlineStyleOptions,\n} from './focus/index';\n\nexport { applyFocusVisiblePolyfill } from './focus/index';\nimport {\n type Types,\n type EventsTypes,\n dispatchGroupperMoveFocusEvent,\n dispatchMoverMoveFocusEvent,\n MoverMoveFocusEventName,\n MoverMoveFocusEvent,\n MoverKeys,\n GroupperMoveFocusEventName,\n GroupperMoveFocusEvent,\n GroupperMoveFocusActions,\n MoverMemorizedElementEventName,\n MoverMemorizedElementEvent,\n TabsterMoveFocusEventName,\n TabsterMoveFocusEvent,\n} from 'tabster';\n\nexport type TabsterDOMAttribute = Types.TabsterDOMAttribute;\n\nexport type { KeyborgFocusInEvent } from 'keyborg';\nexport { KEYBORG_FOCUSIN } from 'keyborg';\n\n// WARNING! ATTENTION! Tabster.Types was exported from here by mistake. To avoid breaking changes,\n// we are putting a snapshot of Tabster.Types@6.0.1 and marking the entire export as deprecated.\n// eslint-disable-next-line @typescript-eslint/naming-convention\nimport * as TabsterTypes6_0_1_DoNotUse from './tabster-types-6.0.1-do-not-use';\nexport {\n /** @deprecated (Do not use! Exposed by mistake and will be removed in the next major version.) */\n TabsterTypes6_0_1_DoNotUse as TabsterTypes,\n /** @deprecated Use element.dispatchEvent(new GroupperMoveFocusEvent({ action: GroupperMoveFocusActions.Escape })) */\n dispatchGroupperMoveFocusEvent,\n /** @deprecated Use element.dispatchEvent(new MoverMoveFocusEvent({ key: MoverKeys.ArrowDown })) */\n dispatchMoverMoveFocusEvent,\n};\n\n/**\n * For all exports below, we don't do wildcard exports to keep Tabster API flexible. We export only required\n * parts when they are needed.\n */\n\nexport { MoverMoveFocusEventName, MoverMoveFocusEvent, MoverKeys };\nexport type MoverMoveFocusEventDetail = EventsTypes.MoverMoveFocusEventDetail;\n\nexport { GroupperMoveFocusEventName, GroupperMoveFocusEvent, GroupperMoveFocusActions };\nexport type GroupperMoveFocusEventDetail = EventsTypes.GroupperMoveFocusEventDetail;\n\nexport { MoverMemorizedElementEventName, MoverMemorizedElementEvent };\nexport type MoverMemorizedElementEventDetail = EventsTypes.MoverMemorizedElementEventDetail;\n\nexport { TabsterMoveFocusEventName, TabsterMoveFocusEvent };\nexport type TabsterMoveFocusEventDetail = EventsTypes.TabsterMoveFocusEventDetail;\n"],"names":["useArrowNavigationGroup","useFocusableGroup","useFocusFinders","useFocusVisible","useFocusWithin","useKeyboardNavAttribute","useDangerousNeverHidden_unstable","useModalAttributes","useTabsterAttributes","useObservedElement","useFocusObserved","useMergedTabsterAttributes_unstable","useRestoreFocusSource","useRestoreFocusTarget","useUncontrolledFocus","useOnKeyboardNavigationChange","useIsNavigatingWithKeyboard","useSetKeyboardNavigation","useFocusedElementChange","useActivateModal","createCustomFocusIndicatorStyle","createFocusOutlineStyle","applyFocusVisiblePolyfill","dispatchGroupperMoveFocusEvent","dispatchMoverMoveFocusEvent","MoverMoveFocusEventName","MoverMoveFocusEvent","MoverKeys","GroupperMoveFocusEventName","GroupperMoveFocusEvent","GroupperMoveFocusActions","MoverMemorizedElementEventName","MoverMemorizedElementEvent","TabsterMoveFocusEventName","TabsterMoveFocusEvent","KEYBORG_FOCUSIN","TabsterTypes6_0_1_DoNotUse","TabsterTypes"],"mappings":"AAAA,SACEA,uBAAuB,EACvBC,iBAAiB,EACjBC,eAAe,EACfC,eAAe,EACfC,cAAc,EACdC,uBAAuB,EACvBC,gCAAgC,EAChCC,kBAAkB,EAClBC,oBAAoB,EACpBC,kBAAkB,EAClBC,gBAAgB,EAChBC,mCAAmC,EACnCC,qBAAqB,EACrBC,qBAAqB,EACrBC,oBAAoB,EACpBC,6BAA6B,EAC7BC,2BAA2B,EAC3BC,wBAAwB,EACxBC,uBAAuB,EACvBC,gBAAgB,QACX,gBAAgB;AAOvB,SAASC,+BAA+B,EAAEC,uBAAuB,QAAQ,gBAAgB;AASzF,SAASC,yBAAyB,QAAQ,gBAAgB;AAC1D,SAGEC,8BAA8B,EAC9BC,2BAA2B,EAC3BC,uBAAuB,EACvBC,mBAAmB,EACnBC,SAAS,EACTC,0BAA0B,EAC1BC,sBAAsB,EACtBC,wBAAwB,EACxBC,8BAA8B,EAC9BC,0BAA0B,EAC1BC,yBAAyB,EACzBC,qBAAqB,QAChB,UAAU;AAKjB,SAASC,eAAe,QAAQ,UAAU;AAE1C,kGAAkG;AAClG,gGAAgG;AAChG,gEAAgE;AAChE,YAAYC,gCAAgC,mCAAmC;AAC/E,SACE,iGAAiG,GACjGA,8BAA8BC,YAAY,EAC1C,mHAAmH,GACnHd,8BAA8B,EAC9B,iGAAiG,GACjGC,2BAA2B,GAC3B;AAEF;;;CAGC,GAED,SAASC,uBAAuB,EAAEC,mBAAmB,EAAEC,SAAS,GAAG;AAGnE,SAASC,0BAA0B,EAAEC,sBAAsB,EAAEC,wBAAwB,GAAG;AAGxF,SAASC,8BAA8B,EAAEC,0BAA0B,GAAG;AAGtE,SAASC,yBAAyB,EAAEC,qBAAqB,GAAG"}
|