@fluentui/react-aria 9.12.1 → 9.13.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 +27 -2
- package/dist/index.d.ts +8 -3
- package/lib/AriaLiveAnnouncer/AriaLiveAnnouncer.js.map +1 -1
- package/lib/AriaLiveAnnouncer/AriaLiveAnnouncer.types.js.map +1 -1
- package/lib/AriaLiveAnnouncer/index.js.map +1 -1
- package/lib/AriaLiveAnnouncer/renderAriaLiveAnnouncer.js.map +1 -1
- package/lib/AriaLiveAnnouncer/useAriaLiveAnnouncer.js.map +1 -1
- package/lib/AriaLiveAnnouncer/useAriaLiveAnnouncerContextValues.js.map +1 -1
- package/lib/AriaLiveAnnouncer/useAriaNotifyAnnounce.js.map +1 -1
- package/lib/AriaLiveAnnouncer/useDomAnnounce.js.map +1 -1
- package/lib/activedescendant/ActiveDescendantContext.js +4 -1
- package/lib/activedescendant/ActiveDescendantContext.js.map +1 -1
- package/lib/activedescendant/constants.js.map +1 -1
- package/lib/activedescendant/index.js.map +1 -1
- package/lib/activedescendant/scrollIntoView.js.map +1 -1
- package/lib/activedescendant/types.js.map +1 -1
- package/lib/activedescendant/useActiveDescendant.js +35 -3
- package/lib/activedescendant/useActiveDescendant.js.map +1 -1
- package/lib/activedescendant/useOptionWalker.js.map +1 -1
- package/lib/button/index.js.map +1 -1
- package/lib/button/types.js.map +1 -1
- package/lib/button/useARIAButtonProps.js.map +1 -1
- package/lib/button/useARIAButtonShorthand.js.map +1 -1
- package/lib/index.js.map +1 -1
- package/lib-commonjs/AriaLiveAnnouncer/AriaLiveAnnouncer.js.map +1 -1
- package/lib-commonjs/AriaLiveAnnouncer/AriaLiveAnnouncer.types.js.map +1 -1
- package/lib-commonjs/AriaLiveAnnouncer/index.js +3 -3
- package/lib-commonjs/AriaLiveAnnouncer/index.js.map +1 -1
- package/lib-commonjs/AriaLiveAnnouncer/renderAriaLiveAnnouncer.js.map +1 -1
- package/lib-commonjs/AriaLiveAnnouncer/useAriaLiveAnnouncer.js.map +1 -1
- package/lib-commonjs/AriaLiveAnnouncer/useAriaLiveAnnouncerContextValues.js.map +1 -1
- package/lib-commonjs/AriaLiveAnnouncer/useAriaNotifyAnnounce.js.map +1 -1
- package/lib-commonjs/AriaLiveAnnouncer/useDomAnnounce.js.map +1 -1
- package/lib-commonjs/activedescendant/ActiveDescendantContext.js +4 -1
- package/lib-commonjs/activedescendant/ActiveDescendantContext.js.map +1 -1
- package/lib-commonjs/activedescendant/constants.js.map +1 -1
- package/lib-commonjs/activedescendant/index.js.map +1 -1
- package/lib-commonjs/activedescendant/scrollIntoView.js.map +1 -1
- package/lib-commonjs/activedescendant/types.js.map +1 -1
- package/lib-commonjs/activedescendant/useActiveDescendant.js +35 -3
- package/lib-commonjs/activedescendant/useActiveDescendant.js.map +1 -1
- package/lib-commonjs/activedescendant/useOptionWalker.js.map +1 -1
- package/lib-commonjs/button/index.js.map +1 -1
- package/lib-commonjs/button/types.js.map +1 -1
- package/lib-commonjs/button/useARIAButtonProps.js.map +1 -1
- package/lib-commonjs/button/useARIAButtonShorthand.js.map +1 -1
- package/lib-commonjs/index.js +17 -17
- package/lib-commonjs/index.js.map +1 -1
- package/package.json +5 -5
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useAriaLiveAnnouncer.
|
|
1
|
+
{"version":3,"sources":["useAriaLiveAnnouncer.ts"],"sourcesContent":["import * as React from 'react';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { useDomAnnounce_unstable } from './useDomAnnounce';\nimport { useAriaNotifyAnnounce_unstable } from './useAriaNotifyAnnounce';\n\nimport type { AriaLiveAnnouncerState, AriaLiveAnnouncerProps } from './AriaLiveAnnouncer.types';\n\nexport const useAriaLiveAnnouncer_unstable = (props: AriaLiveAnnouncerProps): AriaLiveAnnouncerState => {\n const { targetDocument } = useFluent();\n const domAnnounce = useDomAnnounce_unstable();\n const ariaNotifyAnnounce = useAriaNotifyAnnounce_unstable();\n\n const announce = React.useMemo(() => {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n const supportsAriaNotify = typeof (targetDocument as any)?.ariaNotify === 'function';\n return supportsAriaNotify ? ariaNotifyAnnounce : domAnnounce;\n }, [targetDocument, ariaNotifyAnnounce, domAnnounce]);\n\n return {\n announce,\n children: props.children,\n };\n};\n"],"names":["useAriaLiveAnnouncer_unstable","props","targetDocument","useFluent","domAnnounce","useDomAnnounce_unstable","ariaNotifyAnnounce","useAriaNotifyAnnounce_unstable","announce","React","useMemo","supportsAriaNotify","ariaNotify","children"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAOaA;;;eAAAA;;;;iEAPU;qCACyB;gCACR;uCACO;AAIxC,MAAMA,gCAAgC,CAACC;IAC5C,MAAM,EAAEC,cAAc,EAAE,GAAGC,IAAAA,uCAAAA;IAC3B,MAAMC,cAAcC,IAAAA,uCAAAA;IACpB,MAAMC,qBAAqBC,IAAAA,qDAAAA;IAE3B,MAAMC,WAAWC,OAAMC,OAAO,CAAC;QAC7B,8DAA8D;QAC9D,MAAMC,qBAAqB,OAAQT,CAAAA,mBAAAA,QAAAA,mBAAAA,KAAAA,IAAAA,KAAAA,IAADA,eAAyBU,UAAU,AAAVA,MAAe;QAC1E,OAAOD,qBAAqBL,qBAAqBF;IACnD,GAAG;QAACF;QAAgBI;QAAoBF;KAAY;IAEpD,OAAO;QACLI;QACAK,UAAUZ,MAAMY,QAAQ;IAC1B;AACF"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useAriaLiveAnnouncerContextValues.
|
|
1
|
+
{"version":3,"sources":["useAriaLiveAnnouncerContextValues.ts"],"sourcesContent":["import * as React from 'react';\nimport type { AriaLiveAnnouncerContextValues, AriaLiveAnnouncerState } from './AriaLiveAnnouncer.types';\n\nexport function useAriaLiveAnnouncerContextValues_unstable(\n state: AriaLiveAnnouncerState,\n): AriaLiveAnnouncerContextValues {\n const { announce } = state;\n\n return React.useMemo(() => ({ announce: { announce } }), [announce]);\n}\n"],"names":["useAriaLiveAnnouncerContextValues_unstable","state","announce","React","useMemo"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAGgBA;;;eAAAA;;;;iEAHO;AAGhB,SAASA,2CACdC,KAA6B;IAE7B,MAAM,EAAEC,QAAQ,EAAE,GAAGD;IAErB,OAAOE,OAAMC,OAAO,CAAC,IAAO,CAAA;YAAEF,UAAU;gBAAEA;YAAS;QAAE,CAAA,GAAI;QAACA;KAAS;AACrE"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useAriaNotifyAnnounce.
|
|
1
|
+
{"version":3,"sources":["useAriaNotifyAnnounce.ts"],"sourcesContent":["import { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport type { AnnounceOptions } from '@fluentui/react-shared-contexts';\nimport * as React from 'react';\n\nimport type { AriaLiveAnnounceFn } from './AriaLiveAnnouncer.types';\n\ntype AriaNotifyOptions = {\n notificationID?: string;\n priority?: 'none' | 'important';\n interrupt?: 'all' | 'pending' | 'none';\n};\n\ntype DocumentWithAriaNotify = Document & {\n ariaNotify: (message: string, options: AriaNotifyOptions) => void;\n};\n\n/* INTERNAL: implementation of the announcer using the ariaNotify API */\nexport const useAriaNotifyAnnounce_unstable = (): AriaLiveAnnounceFn => {\n const { targetDocument } = useFluent();\n\n const announce: AriaLiveAnnounceFn = React.useCallback(\n (message: string, options: AnnounceOptions = {}) => {\n if (!targetDocument) {\n return;\n }\n\n const { alert = false, polite, batchId } = options;\n\n // default priority to 0 if polite, 2 if alert, and 1 by default\n // used to set both ariaNotify's priority and interrupt\n const defaultPriority = polite ? 0 : alert ? 2 : 1;\n const priority = options.priority ?? defaultPriority;\n\n // map fluent announce options to ariaNotify options\n const ariaNotifyOptions: AriaNotifyOptions = {\n notificationID: batchId,\n priority: priority > 1 ? 'important' : 'none',\n interrupt: batchId ? (priority > 0 ? 'all' : 'pending') : 'none',\n };\n\n (targetDocument as DocumentWithAriaNotify).ariaNotify(message, ariaNotifyOptions);\n },\n [targetDocument],\n );\n\n return announce;\n};\n"],"names":["useAriaNotifyAnnounce_unstable","targetDocument","useFluent","announce","React","useCallback","message","options","alert","polite","batchId","defaultPriority","priority","ariaNotifyOptions","notificationID","interrupt","ariaNotify"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAiBaA;;;eAAAA;;;;qCAjBmC;iEAEzB;AAehB,MAAMA,iCAAiC;IAC5C,MAAM,EAAEC,cAAc,EAAE,GAAGC,IAAAA,uCAAAA;IAE3B,MAAMC,WAA+BC,OAAMC,WAAW,CACpD,CAACC,SAAiBC,UAA2B,CAAC,CAAC;QAC7C,IAAI,CAACN,gBAAgB;YACnB;QACF;QAEA,MAAM,EAAEO,QAAQ,KAAK,EAAEC,MAAM,EAAEC,OAAO,EAAE,GAAGH;QAE3C,gEAAgE;QAChE,uDAAuD;QACvD,MAAMI,kBAAkBF,SAAS,IAAID,QAAQ,IAAI;YAChCD;QAAjB,MAAMK,WAAWL,CAAAA,oBAAAA,QAAQK,QAAQ,AAARA,MAAQ,QAAhBL,sBAAAA,KAAAA,IAAAA,oBAAoBI;QAErC,oDAAoD;QACpD,MAAME,oBAAuC;YAC3CC,gBAAgBJ;YAChBE,UAAUA,WAAW,IAAI,cAAc;YACvCG,WAAWL,UAAWE,WAAW,IAAI,QAAQ,YAAa;QAC5D;QAECX,eAA0Ce,UAAU,CAACV,SAASO;IACjE,GACA;QAACZ;KAAe;IAGlB,OAAOE;AACT"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useDomAnnounce.
|
|
1
|
+
{"version":3,"sources":["useDomAnnounce.ts"],"sourcesContent":["import { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport type { AnnounceOptions } from '@fluentui/react-shared-contexts';\nimport { createPriorityQueue, useTimeout } from '@fluentui/react-utilities';\nimport * as React from 'react';\n\nimport type { AriaLiveAnnounceFn, AriaLiveMessage } from './AriaLiveAnnouncer.types';\n\n/** The duration the message needs to be in present in DOM for screen readers to register a change and announce */\nconst MESSAGE_DURATION = 500;\n\nconst VISUALLY_HIDDEN_STYLES = {\n clip: 'rect(0px, 0px, 0px, 0px)',\n height: '1px',\n margin: '-1px',\n width: '1px',\n position: 'absolute',\n overflow: 'hidden',\n textWrap: 'nowrap',\n};\n\n/* INTERNAL: implementation of the announcer using a live region element */\nexport const useDomAnnounce_unstable = (): AriaLiveAnnounceFn => {\n const { targetDocument } = useFluent();\n\n const timeoutRef = React.useRef<number | undefined>(undefined);\n const [setAnnounceTimeout, clearAnnounceTimeout] = useTimeout();\n\n const elementRef = React.useRef<HTMLDivElement | null>(null);\n\n const order = React.useRef(0);\n\n // investigate alert implementation later\n // const [alertList, setAlertList] = React.useState<string[]>([]);\n\n const batchMessages = React.useRef<{ batchId: string; message: AriaLiveMessage }[]>([]);\n\n const [messageQueue] = React.useState(() =>\n createPriorityQueue<AriaLiveMessage>((a, b) => {\n if (a.priority !== b.priority) {\n return b.priority - a.priority;\n }\n\n return a.createdAt - b.createdAt;\n }),\n );\n\n const queueMessage = React.useCallback(() => {\n if (timeoutRef.current || !elementRef.current) {\n return;\n }\n\n const runCycle = () => {\n if (!elementRef.current) {\n return;\n }\n\n if (targetDocument && messageQueue.peek()) {\n // need a wrapping element for Narrator/Edge, which currently does not pick up text-only live region changes\n // consistently\n // if this is fixed, we can set textContent to the string directly\n\n const wrappingEl = targetDocument.createElement('span');\n\n wrappingEl.innerText = messageQueue\n .all()\n .filter(msg => msg.message.trim().length > 0)\n .reduce((prevText, currMsg) => prevText + currMsg.message + '. ', '');\n\n elementRef.current.innerText = '';\n elementRef.current.appendChild(wrappingEl);\n\n messageQueue.clear();\n batchMessages.current = [];\n\n // begin new cycle to clear (or update) messages\n timeoutRef.current = setAnnounceTimeout(() => {\n runCycle();\n }, MESSAGE_DURATION);\n } else {\n elementRef.current.textContent = '';\n clearAnnounceTimeout();\n\n timeoutRef.current = undefined;\n }\n };\n\n runCycle();\n }, [clearAnnounceTimeout, messageQueue, setAnnounceTimeout, targetDocument]);\n\n const announce: AriaLiveAnnounceFn = React.useCallback(\n (message: string, options: AnnounceOptions = {}) => {\n const { alert = false, priority = 0, batchId } = options;\n\n // check if message is an alert\n if (alert) {\n // TODO: alert implementation\n // setAlertList([...alertList, message]);\n }\n\n const liveMessage: AriaLiveMessage = {\n message,\n createdAt: order.current++,\n priority,\n batchId,\n };\n\n // check if batchId exists\n if (batchId) {\n // update associated msg if it does\n const batchMessage = batchMessages.current.find(msg => msg.batchId === batchId);\n\n if (batchMessage) {\n // replace existing message in queue\n messageQueue.remove(batchMessage.message);\n\n // update list of existing batchIds w/ most recent message\n batchMessage.message = liveMessage;\n } else {\n // update list of existing batchIds, add new if doesn't already exist\n batchMessages.current = [...batchMessages.current, { batchId, message: liveMessage }];\n }\n }\n\n // add new message\n messageQueue.enqueue(liveMessage);\n queueMessage();\n },\n [messageQueue, queueMessage],\n );\n\n React.useEffect(() => {\n if (!targetDocument) {\n return;\n }\n\n const element = targetDocument.createElement('div');\n element.setAttribute('aria-live', 'assertive');\n\n Object.assign(element.style, VISUALLY_HIDDEN_STYLES);\n targetDocument.body.append(element);\n\n elementRef.current = element;\n\n return () => {\n element.remove();\n elementRef.current = null;\n clearAnnounceTimeout();\n timeoutRef.current = undefined;\n };\n }, [clearAnnounceTimeout, targetDocument]);\n\n return announce;\n};\n"],"names":["useDomAnnounce_unstable","MESSAGE_DURATION","VISUALLY_HIDDEN_STYLES","clip","height","margin","width","position","overflow","textWrap","targetDocument","useFluent","timeoutRef","React","useRef","undefined","setAnnounceTimeout","clearAnnounceTimeout","useTimeout","elementRef","order","batchMessages","messageQueue","useState","createPriorityQueue","a","b","priority","createdAt","queueMessage","useCallback","current","runCycle","peek","wrappingEl","createElement","innerText","all","filter","msg","message","trim","length","reduce","prevText","currMsg","appendChild","clear","textContent","announce","options","alert","batchId","liveMessage","batchMessage","find","remove","enqueue","useEffect","element","setAttribute","Object","assign","style","body","append"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
|
|
@@ -30,11 +30,14 @@ const activeDescendantContextDefaultValue = {
|
|
|
30
30
|
first: noop,
|
|
31
31
|
focus: noop,
|
|
32
32
|
focusLastActive: noop,
|
|
33
|
+
scrollActiveIntoView: noop,
|
|
33
34
|
last: noop,
|
|
34
35
|
next: noop,
|
|
35
36
|
prev: noop,
|
|
36
37
|
showAttributes: noop,
|
|
37
|
-
hideAttributes: noop
|
|
38
|
+
hideAttributes: noop,
|
|
39
|
+
showFocusVisibleAttributes: noop,
|
|
40
|
+
hideFocusVisibleAttributes: noop
|
|
38
41
|
}
|
|
39
42
|
};
|
|
40
43
|
const ActiveDescendantContext = /*#__PURE__*/ _react.createContext(undefined);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["ActiveDescendantContext.
|
|
1
|
+
{"version":3,"sources":["ActiveDescendantContext.ts"],"sourcesContent":["import * as React from 'react';\nimport { ActiveDescendantImperativeRef } from './types';\n\nexport type ActiveDescendantContextValue = {\n controller: ActiveDescendantImperativeRef;\n};\n\nconst noop = () => undefined;\n\nconst activeDescendantContextDefaultValue: ActiveDescendantContextValue = {\n controller: {\n active: noop,\n blur: noop,\n find: noop,\n first: noop,\n focus: noop,\n focusLastActive: noop,\n scrollActiveIntoView: noop,\n last: noop,\n next: noop,\n prev: noop,\n showAttributes: noop,\n hideAttributes: noop,\n showFocusVisibleAttributes: noop,\n hideFocusVisibleAttributes: noop,\n },\n};\n\nconst ActiveDescendantContext = React.createContext<ActiveDescendantContextValue | undefined>(undefined);\n\nexport const ActiveDescendantContextProvider = ActiveDescendantContext.Provider;\nexport const useActiveDescendantContext = () =>\n React.useContext(ActiveDescendantContext) ?? activeDescendantContextDefaultValue;\nexport const useHasParentActiveDescendantContext = () => !!React.useContext(ActiveDescendantContext);\n"],"names":["ActiveDescendantContextProvider","useActiveDescendantContext","useHasParentActiveDescendantContext","noop","undefined","activeDescendantContextDefaultValue","controller","active","blur","find","first","focus","focusLastActive","scrollActiveIntoView","last","next","prev","showAttributes","hideAttributes","showFocusVisibleAttributes","hideFocusVisibleAttributes","ActiveDescendantContext","React","createContext","Provider","useContext"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IA8BaA,+BAAAA;eAAAA;;IACAC,0BAAAA;eAAAA;;IAEAC,mCAAAA;eAAAA;;;;iEAjCU;AAOvB,MAAMC,OAAO,IAAMC;AAEnB,MAAMC,sCAAoE;IACxEC,YAAY;QACVC,QAAQJ;QACRK,MAAML;QACNM,MAAMN;QACNO,OAAOP;QACPQ,OAAOR;QACPS,iBAAiBT;QACjBU,sBAAsBV;QACtBW,MAAMX;QACNY,MAAMZ;QACNa,MAAMb;QACNc,gBAAgBd;QAChBe,gBAAgBf;QAChBgB,4BAA4BhB;QAC5BiB,4BAA4BjB;IAC9B;AACF;AAEA,MAAMkB,wCAA0BC,OAAMC,aAAa,CAA2CnB;AAEvF,MAAMJ,kCAAkCqB,wBAAwBG,QAAQ;AACxE,MAAMvB,6BAA6B;QACxCqB;WAAAA,CAAAA,oBAAAA,OAAMG,UAAU,CAACJ,wBAAAA,MAAAA,QAAjBC,sBAAAA,KAAAA,IAAAA,oBAA6CjB;AAAkC;AAC1E,MAAMH,sCAAsC,IAAM,CAAC,CAACoB,OAAMG,UAAU,CAACJ"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["constants.
|
|
1
|
+
{"version":3,"sources":["constants.ts"],"sourcesContent":["/**\n * Applied to the element that is active descendant\n */\nexport const ACTIVEDESCENDANT_ATTRIBUTE = 'data-activedescendant';\n\n/**\n * Applied to the active descendant when the user is navigating with keyboard\n */\nexport const ACTIVEDESCENDANT_FOCUSVISIBLE_ATTRIBUTE = 'data-activedescendant-focusvisible';\n"],"names":["ACTIVEDESCENDANT_ATTRIBUTE","ACTIVEDESCENDANT_FOCUSVISIBLE_ATTRIBUTE"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA;;CAEC;;;;;;;;;;;IACYA,0BAAAA;eAAAA;;IAKAC,uCAAAA;eAAAA;;;AALN,MAAMD,6BAA6B;AAKnC,MAAMC,0CAA0C"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["index.
|
|
1
|
+
{"version":3,"sources":["index.ts"],"sourcesContent":["export * from './ActiveDescendantContext';\nexport * from './useActiveDescendant';\nexport * from './constants';\nexport * from './types';\n"],"names":[],"rangeMappings":";;;;;;;;","mappings":";;;;;uBAAc;uBACA;uBACA;uBACA"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["scrollIntoView.
|
|
1
|
+
{"version":3,"sources":["scrollIntoView.ts"],"sourcesContent":["export const scrollIntoView = (target: HTMLElement | null | undefined) => {\n if (!target) {\n return;\n }\n\n const scrollParent = findScrollableParent(target.parentElement as HTMLElement);\n if (!scrollParent) {\n return;\n }\n\n const { offsetHeight } = target;\n const offsetTop = getTotalOffsetTop(target, scrollParent);\n\n const { scrollMarginTop, scrollMarginBottom } = getScrollMargins(target);\n\n const { offsetHeight: parentOffsetHeight, scrollTop } = scrollParent;\n\n const isAbove = offsetTop - scrollMarginTop < scrollTop;\n const isBelow = offsetTop + offsetHeight + scrollMarginBottom > scrollTop + parentOffsetHeight;\n\n const buffer = 2;\n\n if (isAbove) {\n scrollParent.scrollTo(0, offsetTop - scrollMarginTop - buffer);\n } else if (isBelow) {\n scrollParent.scrollTo(0, offsetTop + offsetHeight + scrollMarginBottom - parentOffsetHeight + buffer);\n }\n};\n\nconst findScrollableParent = (element: HTMLElement | null): HTMLElement | null => {\n if (!element) {\n return null;\n }\n\n if (element.scrollHeight > element.offsetHeight) {\n return element;\n }\n\n return findScrollableParent(element.parentElement);\n};\n\nconst getTotalOffsetTop = (element: HTMLElement, scrollParent: HTMLElement): number => {\n if (!element || element === scrollParent) {\n return 0;\n }\n\n if (element.contains(scrollParent)) {\n // subtract the scroll parent's offset top from the running total if the offsetParent is above it\n return scrollParent.offsetTop * -1;\n }\n\n return element.offsetTop + getTotalOffsetTop(element.offsetParent as HTMLElement, scrollParent);\n};\n\nconst getScrollMargins = (element: HTMLElement) => {\n const win = element.ownerDocument?.defaultView;\n if (!win) {\n return {\n scrollMarginTop: 0,\n scrollMarginBottom: 0,\n };\n }\n\n const computedStyles = win.getComputedStyle(element);\n const scrollMarginTop =\n getIntValueOfComputedStyle(computedStyles.scrollMarginTop) ??\n getIntValueOfComputedStyle(computedStyles.scrollMarginBlockStart);\n const scrollMarginBottom =\n getIntValueOfComputedStyle(computedStyles.scrollMarginBottom) ??\n getIntValueOfComputedStyle(computedStyles.scrollMarginBlockEnd);\n return {\n scrollMarginTop,\n scrollMarginBottom,\n };\n};\n\nconst getIntValueOfComputedStyle = (computedStyle: string) => {\n return computedStyle ? parseInt(computedStyle, 10) : 0;\n};\n"],"names":["scrollIntoView","target","scrollParent","findScrollableParent","parentElement","offsetHeight","offsetTop","getTotalOffsetTop","scrollMarginTop","scrollMarginBottom","getScrollMargins","parentOffsetHeight","scrollTop","isAbove","isBelow","buffer","scrollTo","element","scrollHeight","contains","offsetParent","win","ownerDocument","defaultView","computedStyles","getComputedStyle","getIntValueOfComputedStyle","scrollMarginBlockStart","scrollMarginBlockEnd","computedStyle","parseInt"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAAaA;;;eAAAA;;;AAAN,MAAMA,iBAAiB,CAACC;IAC7B,IAAI,CAACA,QAAQ;QACX;IACF;IAEA,MAAMC,eAAeC,qBAAqBF,OAAOG,aAAa;IAC9D,IAAI,CAACF,cAAc;QACjB;IACF;IAEA,MAAM,EAAEG,YAAY,EAAE,GAAGJ;IACzB,MAAMK,YAAYC,kBAAkBN,QAAQC;IAE5C,MAAM,EAAEM,eAAe,EAAEC,kBAAkB,EAAE,GAAGC,iBAAiBT;IAEjE,MAAM,EAAEI,cAAcM,kBAAkB,EAAEC,SAAS,EAAE,GAAGV;IAExD,MAAMW,UAAUP,YAAYE,kBAAkBI;IAC9C,MAAME,UAAUR,YAAYD,eAAeI,qBAAqBG,YAAYD;IAE5E,MAAMI,SAAS;IAEf,IAAIF,SAAS;QACXX,aAAac,QAAQ,CAAC,GAAGV,YAAYE,kBAAkBO;IACzD,OAAO,IAAID,SAAS;QAClBZ,aAAac,QAAQ,CAAC,GAAGV,YAAYD,eAAeI,qBAAqBE,qBAAqBI;IAChG;AACF;AAEA,MAAMZ,uBAAuB,CAACc;IAC5B,IAAI,CAACA,SAAS;QACZ,OAAO;IACT;IAEA,IAAIA,QAAQC,YAAY,GAAGD,QAAQZ,YAAY,EAAE;QAC/C,OAAOY;IACT;IAEA,OAAOd,qBAAqBc,QAAQb,aAAa;AACnD;AAEA,MAAMG,oBAAoB,CAACU,SAAsBf;IAC/C,IAAI,CAACe,WAAWA,YAAYf,cAAc;QACxC,OAAO;IACT;IAEA,IAAIe,QAAQE,QAAQ,CAACjB,eAAe;QAClC,iGAAiG;QACjG,OAAOA,aAAaI,SAAS,GAAG,CAAC;IACnC;IAEA,OAAOW,QAAQX,SAAS,GAAGC,kBAAkBU,QAAQG,YAAY,EAAiBlB;AACpF;AAEA,MAAMQ,mBAAmB,CAACO;QACZA;IAAZ,MAAMI,MAAAA,AAAMJ,CAAAA,yBAAAA,QAAQK,aAAa,AAAbA,MAAa,QAArBL,2BAAAA,KAAAA,IAAAA,KAAAA,IAAAA,uBAAuBM,WAAW;IAC9C,IAAI,CAACF,KAAK;QACR,OAAO;YACLb,iBAAiB;YACjBC,oBAAoB;QACtB;IACF;IAEA,MAAMe,iBAAiBH,IAAII,gBAAgB,CAACR;QAE1CS;IADF,MAAMlB,kBACJkB,CAAAA,8BAAAA,2BAA2BF,eAAehB,eAAe,CAAA,MAAA,QAAzDkB,gCAAAA,KAAAA,IAAAA,8BACAA,2BAA2BF,eAAeG,sBAAsB;QAEhED;IADF,MAAMjB,qBACJiB,CAAAA,+BAAAA,2BAA2BF,eAAef,kBAAkB,CAAA,MAAA,QAA5DiB,iCAAAA,KAAAA,IAAAA,+BACAA,2BAA2BF,eAAeI,oBAAoB;IAChE,OAAO;QACLpB;QACAC;IACF;AACF;AAEA,MAAMiB,6BAA6B,CAACG;IAClC,OAAOA,gBAAgBC,SAASD,eAAe,MAAM;AACvD"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["types.
|
|
1
|
+
{"version":3,"sources":["types.ts"],"sourcesContent":["import * as React from 'react';\n\nexport interface ActiveDescendantImperativeRef {\n first: (options?: IteratorOptions) => string | undefined;\n last: (options?: IteratorOptions) => string | undefined;\n next: (options?: IteratorOptions) => string | undefined;\n prev: (options?: IteratorOptions) => string | undefined;\n find: (predicate: (id: string) => boolean, options?: IteratorOptions & FindOptions) => string | undefined;\n blur: () => void;\n active: () => string | undefined;\n focus: (id: string) => void;\n /**\n * @deprecated This function is not used internally anymore and will be removed in the future\n */\n focusLastActive: () => void;\n /**\n * Scrolls the active option into view, if it still exists\n */\n scrollActiveIntoView: () => void;\n hideAttributes: () => void;\n showAttributes: () => void;\n hideFocusVisibleAttributes: () => void;\n showFocusVisibleAttributes: () => void;\n}\n\nexport interface ActiveDescendantOptions {\n /**\n * @param el - HTML element to test\n * @returns whether the element can be an active descendant\n */\n matchOption: (el: HTMLElement) => boolean;\n /**\n * Forward imperative refs when exposing functionality from a React component\n */\n imperativeRef?: React.RefObject<ActiveDescendantImperativeRef>;\n}\n\nexport interface FindOptions {\n /**\n * Starts the search from a specific id\n */\n startFrom?: string;\n}\n\nexport interface UseActiveDescendantReturn<\n TActiveParentElement extends HTMLElement = HTMLElement,\n TListboxElement extends HTMLElement = HTMLElement,\n> {\n /**\n * Attach this to the element that contains all active descendants\n */\n listboxRef: React.Ref<TListboxElement>;\n /**\n * Attach this to the element that has an active descendant\n */\n activeParentRef: React.Ref<TActiveParentElement>;\n /**\n * Imperative functions to manage active descendants within the listboxRef\n */\n controller: ActiveDescendantImperativeRef;\n}\n\nexport interface IteratorOptions {\n /**\n * When passive, the active descendant is changed\n * @default false\n */\n passive?: boolean;\n}\n"],"names":[],"rangeMappings":";;;;;","mappings":";;;;;iEAAuB"}
|
|
@@ -32,6 +32,7 @@ const createActiveDescendantChangeEvent = (detail)=>new CustomEvent('activedesce
|
|
|
32
32
|
function useActiveDescendant(options) {
|
|
33
33
|
const { imperativeRef, matchOption: matchOptionUnstable } = options;
|
|
34
34
|
const focusVisibleRef = _react.useRef(false);
|
|
35
|
+
const shouldShowFocusVisibleAttrRef = _react.useRef(true);
|
|
35
36
|
const activeIdRef = _react.useRef(null);
|
|
36
37
|
const lastActiveIdRef = _react.useRef(null);
|
|
37
38
|
const activeParentRef = _react.useRef(null);
|
|
@@ -55,7 +56,7 @@ function useActiveDescendant(options) {
|
|
|
55
56
|
if (!active) {
|
|
56
57
|
return;
|
|
57
58
|
}
|
|
58
|
-
if (isNavigatingWithKeyboard) {
|
|
59
|
+
if (isNavigatingWithKeyboard && shouldShowFocusVisibleAttrRef.current) {
|
|
59
60
|
active.setAttribute(_constants.ACTIVEDESCENDANT_FOCUSVISIBLE_ATTRIBUTE, '');
|
|
60
61
|
} else {
|
|
61
62
|
active.removeAttribute(_constants.ACTIVEDESCENDANT_FOCUSVISIBLE_ATTRIBUTE);
|
|
@@ -72,6 +73,20 @@ function useActiveDescendant(options) {
|
|
|
72
73
|
}, [
|
|
73
74
|
listboxRef
|
|
74
75
|
]);
|
|
76
|
+
const setShouldShowFocusVisibleAttribute = _react.useCallback((shouldShow)=>{
|
|
77
|
+
shouldShowFocusVisibleAttrRef.current = shouldShow;
|
|
78
|
+
const active = getActiveDescendant();
|
|
79
|
+
if (!active) {
|
|
80
|
+
return;
|
|
81
|
+
}
|
|
82
|
+
if (shouldShow && focusVisibleRef.current) {
|
|
83
|
+
active.setAttribute(_constants.ACTIVEDESCENDANT_FOCUSVISIBLE_ATTRIBUTE, '');
|
|
84
|
+
} else {
|
|
85
|
+
active.removeAttribute(_constants.ACTIVEDESCENDANT_FOCUSVISIBLE_ATTRIBUTE);
|
|
86
|
+
}
|
|
87
|
+
}, [
|
|
88
|
+
getActiveDescendant
|
|
89
|
+
]);
|
|
75
90
|
const blurActiveDescendant = _react.useCallback(()=>{
|
|
76
91
|
const active = getActiveDescendant();
|
|
77
92
|
if (active) {
|
|
@@ -95,7 +110,7 @@ function useActiveDescendant(options) {
|
|
|
95
110
|
(0, _scrollIntoView.scrollIntoView)(nextActive);
|
|
96
111
|
setAttribute(nextActive.id);
|
|
97
112
|
nextActive.setAttribute(_constants.ACTIVEDESCENDANT_ATTRIBUTE, '');
|
|
98
|
-
if (focusVisibleRef.current) {
|
|
113
|
+
if (focusVisibleRef.current && shouldShowFocusVisibleAttrRef.current) {
|
|
99
114
|
nextActive.setAttribute(_constants.ACTIVEDESCENDANT_FOCUSVISIBLE_ATTRIBUTE, '');
|
|
100
115
|
}
|
|
101
116
|
const event = createActiveDescendantChangeEvent({
|
|
@@ -179,6 +194,16 @@ function useActiveDescendant(options) {
|
|
|
179
194
|
}
|
|
180
195
|
return target === null || target === void 0 ? void 0 : target.id;
|
|
181
196
|
},
|
|
197
|
+
scrollActiveIntoView: ()=>{
|
|
198
|
+
if (!listboxRef.current) {
|
|
199
|
+
return;
|
|
200
|
+
}
|
|
201
|
+
const active = getActiveDescendant();
|
|
202
|
+
if (!active) {
|
|
203
|
+
return;
|
|
204
|
+
}
|
|
205
|
+
(0, _scrollIntoView.scrollIntoView)(active);
|
|
206
|
+
},
|
|
182
207
|
showAttributes () {
|
|
183
208
|
attributeVisibilityRef.current = true;
|
|
184
209
|
setAttribute();
|
|
@@ -186,6 +211,12 @@ function useActiveDescendant(options) {
|
|
|
186
211
|
hideAttributes () {
|
|
187
212
|
attributeVisibilityRef.current = false;
|
|
188
213
|
removeAttribute();
|
|
214
|
+
},
|
|
215
|
+
showFocusVisibleAttributes () {
|
|
216
|
+
setShouldShowFocusVisibleAttribute(true);
|
|
217
|
+
},
|
|
218
|
+
hideFocusVisibleAttributes () {
|
|
219
|
+
setShouldShowFocusVisibleAttribute(false);
|
|
189
220
|
}
|
|
190
221
|
}), [
|
|
191
222
|
optionWalker,
|
|
@@ -194,7 +225,8 @@ function useActiveDescendant(options) {
|
|
|
194
225
|
removeAttribute,
|
|
195
226
|
focusActiveDescendant,
|
|
196
227
|
blurActiveDescendant,
|
|
197
|
-
getActiveDescendant
|
|
228
|
+
getActiveDescendant,
|
|
229
|
+
setShouldShowFocusVisibleAttribute
|
|
198
230
|
]);
|
|
199
231
|
_react.useImperativeHandle(imperativeRef, ()=>controller);
|
|
200
232
|
return {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useActiveDescendant.js"],"sourcesContent":["import * as React from 'react';\nimport { useEventCallback, useMergedRefs } from '@fluentui/react-utilities';\nimport { useOnKeyboardNavigationChange } from '@fluentui/react-tabster';\nimport { useOptionWalker } from './useOptionWalker';\nimport { ACTIVEDESCENDANT_ATTRIBUTE, ACTIVEDESCENDANT_FOCUSVISIBLE_ATTRIBUTE } from './constants';\nimport { scrollIntoView } from './scrollIntoView';\nexport const createActiveDescendantChangeEvent = (detail)=>new CustomEvent('activedescendantchange', {\n bubbles: true,\n cancelable: false,\n composed: true,\n detail\n });\nexport function useActiveDescendant(options) {\n const { imperativeRef, matchOption: matchOptionUnstable } = options;\n const focusVisibleRef = React.useRef(false);\n const activeIdRef = React.useRef(null);\n const lastActiveIdRef = React.useRef(null);\n const activeParentRef = React.useRef(null);\n const attributeVisibilityRef = React.useRef(true);\n const removeAttribute = React.useCallback(()=>{\n var _activeParentRef_current;\n (_activeParentRef_current = activeParentRef.current) === null || _activeParentRef_current === void 0 ? void 0 : _activeParentRef_current.removeAttribute('aria-activedescendant');\n }, []);\n const setAttribute = React.useCallback((id)=>{\n if (id) {\n activeIdRef.current = id;\n }\n if (attributeVisibilityRef.current && activeIdRef.current) {\n var _activeParentRef_current;\n (_activeParentRef_current = activeParentRef.current) === null || _activeParentRef_current === void 0 ? void 0 : _activeParentRef_current.setAttribute('aria-activedescendant', activeIdRef.current);\n }\n }, []);\n useOnKeyboardNavigationChange((isNavigatingWithKeyboard)=>{\n focusVisibleRef.current = isNavigatingWithKeyboard;\n const active = getActiveDescendant();\n if (!active) {\n return;\n }\n if (isNavigatingWithKeyboard) {\n active.setAttribute(ACTIVEDESCENDANT_FOCUSVISIBLE_ATTRIBUTE, '');\n } else {\n active.removeAttribute(ACTIVEDESCENDANT_FOCUSVISIBLE_ATTRIBUTE);\n }\n });\n const matchOption = useEventCallback(matchOptionUnstable);\n const listboxRef = React.useRef(null);\n const { optionWalker, listboxCallbackRef } = useOptionWalker({\n matchOption\n });\n const getActiveDescendant = React.useCallback(()=>{\n var _listboxRef_current;\n return (_listboxRef_current = listboxRef.current) === null || _listboxRef_current === void 0 ? void 0 : _listboxRef_current.querySelector(`#${activeIdRef.current}`);\n }, [\n listboxRef\n ]);\n const blurActiveDescendant = React.useCallback(()=>{\n const active = getActiveDescendant();\n if (active) {\n active.removeAttribute(ACTIVEDESCENDANT_ATTRIBUTE);\n active.removeAttribute(ACTIVEDESCENDANT_FOCUSVISIBLE_ATTRIBUTE);\n }\n removeAttribute();\n lastActiveIdRef.current = activeIdRef.current;\n activeIdRef.current = null;\n var _active_id;\n return (_active_id = active === null || active === void 0 ? void 0 : active.id) !== null && _active_id !== void 0 ? _active_id : null;\n }, [\n getActiveDescendant,\n removeAttribute\n ]);\n const focusActiveDescendant = React.useCallback((nextActive)=>{\n if (!nextActive) {\n return;\n }\n const previousActiveId = blurActiveDescendant();\n scrollIntoView(nextActive);\n setAttribute(nextActive.id);\n nextActive.setAttribute(ACTIVEDESCENDANT_ATTRIBUTE, '');\n if (focusVisibleRef.current) {\n nextActive.setAttribute(ACTIVEDESCENDANT_FOCUSVISIBLE_ATTRIBUTE, '');\n }\n const event = createActiveDescendantChangeEvent({\n id: nextActive.id,\n previousId: previousActiveId\n });\n nextActive.dispatchEvent(event);\n }, [\n blurActiveDescendant,\n setAttribute\n ]);\n const controller = React.useMemo(()=>({\n first: ({ passive } = {})=>{\n const first = optionWalker.first();\n if (!passive) {\n focusActiveDescendant(first);\n }\n return first === null || first === void 0 ? void 0 : first.id;\n },\n last: ({ passive } = {})=>{\n const last = optionWalker.last();\n if (!passive) {\n focusActiveDescendant(last);\n }\n return last === null || last === void 0 ? void 0 : last.id;\n },\n next: ({ passive } = {})=>{\n const active = getActiveDescendant();\n if (!active) {\n return;\n }\n optionWalker.setCurrent(active);\n const next = optionWalker.next();\n if (!passive) {\n focusActiveDescendant(next);\n }\n return next === null || next === void 0 ? void 0 : next.id;\n },\n prev: ({ passive } = {})=>{\n const active = getActiveDescendant();\n if (!active) {\n return;\n }\n optionWalker.setCurrent(active);\n const next = optionWalker.prev();\n if (!passive) {\n focusActiveDescendant(next);\n }\n return next === null || next === void 0 ? void 0 : next.id;\n },\n blur: ()=>{\n blurActiveDescendant();\n },\n active: ()=>{\n var _getActiveDescendant;\n return (_getActiveDescendant = getActiveDescendant()) === null || _getActiveDescendant === void 0 ? void 0 : _getActiveDescendant.id;\n },\n focus: (id)=>{\n if (!listboxRef.current) {\n return;\n }\n const target = listboxRef.current.querySelector(`#${id}`);\n if (target) {\n focusActiveDescendant(target);\n }\n },\n focusLastActive: ()=>{\n if (!listboxRef.current || !lastActiveIdRef.current) {\n return;\n }\n const target = listboxRef.current.querySelector(`#${lastActiveIdRef.current}`);\n if (target) {\n focusActiveDescendant(target);\n return true;\n }\n },\n find (predicate, { passive, startFrom } = {}) {\n const target = optionWalker.find(predicate, startFrom);\n if (!passive) {\n focusActiveDescendant(target);\n }\n return target === null || target === void 0 ? void 0 : target.id;\n },\n showAttributes () {\n attributeVisibilityRef.current = true;\n setAttribute();\n },\n hideAttributes () {\n attributeVisibilityRef.current = false;\n removeAttribute();\n }\n }), [\n optionWalker,\n listboxRef,\n setAttribute,\n removeAttribute,\n focusActiveDescendant,\n blurActiveDescendant,\n getActiveDescendant\n ]);\n React.useImperativeHandle(imperativeRef, ()=>controller);\n return {\n listboxRef: useMergedRefs(listboxRef, listboxCallbackRef),\n activeParentRef,\n controller\n };\n}\n"],"names":["createActiveDescendantChangeEvent","useActiveDescendant","detail","CustomEvent","bubbles","cancelable","composed","options","imperativeRef","matchOption","matchOptionUnstable","focusVisibleRef","React","useRef","activeIdRef","lastActiveIdRef","activeParentRef","attributeVisibilityRef","removeAttribute","useCallback","_activeParentRef_current","current","setAttribute","id","useOnKeyboardNavigationChange","isNavigatingWithKeyboard","active","getActiveDescendant","ACTIVEDESCENDANT_FOCUSVISIBLE_ATTRIBUTE","useEventCallback","listboxRef","optionWalker","listboxCallbackRef","useOptionWalker","_listboxRef_current","querySelector","blurActiveDescendant","ACTIVEDESCENDANT_ATTRIBUTE","_active_id","focusActiveDescendant","nextActive","previousActiveId","scrollIntoView","event","previousId","dispatchEvent","controller","useMemo","first","passive","last","next","setCurrent","prev","blur","_getActiveDescendant","focus","target","focusLastActive","find","predicate","startFrom","showAttributes","hideAttributes","useImperativeHandle","useMergedRefs"],"mappings":";;;;;;;;;;;IAMaA,iCAAiC;eAAjCA;;IAMGC,mBAAmB;eAAnBA;;;;iEAZO;gCACyB;8BACF;iCACd;2BACoD;gCACrD;AACxB,MAAMD,oCAAoC,CAACE,SAAS,IAAIC,YAAY,0BAA0B;QAC7FC,SAAS;QACTC,YAAY;QACZC,UAAU;QACVJ;IACJ;AACG,SAASD,oBAAoBM,OAAO;IACvC,MAAM,EAAEC,aAAa,EAAEC,aAAaC,mBAAmB,EAAE,GAAGH;IAC5D,MAAMI,kBAAkBC,OAAMC,MAAM,CAAC;IACrC,MAAMC,cAAcF,OAAMC,MAAM,CAAC;IACjC,MAAME,kBAAkBH,OAAMC,MAAM,CAAC;IACrC,MAAMG,kBAAkBJ,OAAMC,MAAM,CAAC;IACrC,MAAMI,yBAAyBL,OAAMC,MAAM,CAAC;IAC5C,MAAMK,kBAAkBN,OAAMO,WAAW,CAAC;QACtC,IAAIC;QACHA,CAAAA,2BAA2BJ,gBAAgBK,OAAO,AAAD,MAAO,QAAQD,6BAA6B,KAAK,IAAI,KAAK,IAAIA,yBAAyBF,eAAe,CAAC;IAC7J,GAAG,EAAE;IACL,MAAMI,eAAeV,OAAMO,WAAW,CAAC,CAACI;QACpC,IAAIA,IAAI;YACJT,YAAYO,OAAO,GAAGE;QAC1B;QACA,IAAIN,uBAAuBI,OAAO,IAAIP,YAAYO,OAAO,EAAE;YACvD,IAAID;YACHA,CAAAA,2BAA2BJ,gBAAgBK,OAAO,AAAD,MAAO,QAAQD,6BAA6B,KAAK,IAAI,KAAK,IAAIA,yBAAyBE,YAAY,CAAC,yBAAyBR,YAAYO,OAAO;QACtM;IACJ,GAAG,EAAE;IACLG,IAAAA,2CAA6B,EAAC,CAACC;QAC3Bd,gBAAgBU,OAAO,GAAGI;QAC1B,MAAMC,SAASC;QACf,IAAI,CAACD,QAAQ;YACT;QACJ;QACA,IAAID,0BAA0B;YAC1BC,OAAOJ,YAAY,CAACM,kDAAuC,EAAE;QACjE,OAAO;YACHF,OAAOR,eAAe,CAACU,kDAAuC;QAClE;IACJ;IACA,MAAMnB,cAAcoB,IAAAA,gCAAgB,EAACnB;IACrC,MAAMoB,aAAalB,OAAMC,MAAM,CAAC;IAChC,MAAM,EAAEkB,YAAY,EAAEC,kBAAkB,EAAE,GAAGC,IAAAA,gCAAe,EAAC;QACzDxB;IACJ;IACA,MAAMkB,sBAAsBf,OAAMO,WAAW,CAAC;QAC1C,IAAIe;QACJ,OAAO,AAACA,CAAAA,sBAAsBJ,WAAWT,OAAO,AAAD,MAAO,QAAQa,wBAAwB,KAAK,IAAI,KAAK,IAAIA,oBAAoBC,aAAa,CAAC,CAAC,CAAC,EAAErB,YAAYO,OAAO,CAAC,CAAC;IACvK,GAAG;QACCS;KACH;IACD,MAAMM,uBAAuBxB,OAAMO,WAAW,CAAC;QAC3C,MAAMO,SAASC;QACf,IAAID,QAAQ;YACRA,OAAOR,eAAe,CAACmB,qCAA0B;YACjDX,OAAOR,eAAe,CAACU,kDAAuC;QAClE;QACAV;QACAH,gBAAgBM,OAAO,GAAGP,YAAYO,OAAO;QAC7CP,YAAYO,OAAO,GAAG;QACtB,IAAIiB;QACJ,OAAO,AAACA,CAAAA,aAAaZ,WAAW,QAAQA,WAAW,KAAK,IAAI,KAAK,IAAIA,OAAOH,EAAE,AAAD,MAAO,QAAQe,eAAe,KAAK,IAAIA,aAAa;IACrI,GAAG;QACCX;QACAT;KACH;IACD,MAAMqB,wBAAwB3B,OAAMO,WAAW,CAAC,CAACqB;QAC7C,IAAI,CAACA,YAAY;YACb;QACJ;QACA,MAAMC,mBAAmBL;QACzBM,IAAAA,8BAAc,EAACF;QACflB,aAAakB,WAAWjB,EAAE;QAC1BiB,WAAWlB,YAAY,CAACe,qCAA0B,EAAE;QACpD,IAAI1B,gBAAgBU,OAAO,EAAE;YACzBmB,WAAWlB,YAAY,CAACM,kDAAuC,EAAE;QACrE;QACA,MAAMe,QAAQ3C,kCAAkC;YAC5CuB,IAAIiB,WAAWjB,EAAE;YACjBqB,YAAYH;QAChB;QACAD,WAAWK,aAAa,CAACF;IAC7B,GAAG;QACCP;QACAd;KACH;IACD,MAAMwB,aAAalC,OAAMmC,OAAO,CAAC,IAAK,CAAA;YAC9BC,OAAO,CAAC,EAAEC,OAAO,EAAE,GAAG,CAAC,CAAC;gBACpB,MAAMD,QAAQjB,aAAaiB,KAAK;gBAChC,IAAI,CAACC,SAAS;oBACVV,sBAAsBS;gBAC1B;gBACA,OAAOA,UAAU,QAAQA,UAAU,KAAK,IAAI,KAAK,IAAIA,MAAMzB,EAAE;YACjE;YACA2B,MAAM,CAAC,EAAED,OAAO,EAAE,GAAG,CAAC,CAAC;gBACnB,MAAMC,OAAOnB,aAAamB,IAAI;gBAC9B,IAAI,CAACD,SAAS;oBACVV,sBAAsBW;gBAC1B;gBACA,OAAOA,SAAS,QAAQA,SAAS,KAAK,IAAI,KAAK,IAAIA,KAAK3B,EAAE;YAC9D;YACA4B,MAAM,CAAC,EAAEF,OAAO,EAAE,GAAG,CAAC,CAAC;gBACnB,MAAMvB,SAASC;gBACf,IAAI,CAACD,QAAQ;oBACT;gBACJ;gBACAK,aAAaqB,UAAU,CAAC1B;gBACxB,MAAMyB,OAAOpB,aAAaoB,IAAI;gBAC9B,IAAI,CAACF,SAAS;oBACVV,sBAAsBY;gBAC1B;gBACA,OAAOA,SAAS,QAAQA,SAAS,KAAK,IAAI,KAAK,IAAIA,KAAK5B,EAAE;YAC9D;YACA8B,MAAM,CAAC,EAAEJ,OAAO,EAAE,GAAG,CAAC,CAAC;gBACnB,MAAMvB,SAASC;gBACf,IAAI,CAACD,QAAQ;oBACT;gBACJ;gBACAK,aAAaqB,UAAU,CAAC1B;gBACxB,MAAMyB,OAAOpB,aAAasB,IAAI;gBAC9B,IAAI,CAACJ,SAAS;oBACVV,sBAAsBY;gBAC1B;gBACA,OAAOA,SAAS,QAAQA,SAAS,KAAK,IAAI,KAAK,IAAIA,KAAK5B,EAAE;YAC9D;YACA+B,MAAM;gBACFlB;YACJ;YACAV,QAAQ;gBACJ,IAAI6B;gBACJ,OAAO,AAACA,CAAAA,uBAAuB5B,qBAAoB,MAAO,QAAQ4B,yBAAyB,KAAK,IAAI,KAAK,IAAIA,qBAAqBhC,EAAE;YACxI;YACAiC,OAAO,CAACjC;gBACJ,IAAI,CAACO,WAAWT,OAAO,EAAE;oBACrB;gBACJ;gBACA,MAAMoC,SAAS3B,WAAWT,OAAO,CAACc,aAAa,CAAC,CAAC,CAAC,EAAEZ,GAAG,CAAC;gBACxD,IAAIkC,QAAQ;oBACRlB,sBAAsBkB;gBAC1B;YACJ;YACAC,iBAAiB;gBACb,IAAI,CAAC5B,WAAWT,OAAO,IAAI,CAACN,gBAAgBM,OAAO,EAAE;oBACjD;gBACJ;gBACA,MAAMoC,SAAS3B,WAAWT,OAAO,CAACc,aAAa,CAAC,CAAC,CAAC,EAAEpB,gBAAgBM,OAAO,CAAC,CAAC;gBAC7E,IAAIoC,QAAQ;oBACRlB,sBAAsBkB;oBACtB,OAAO;gBACX;YACJ;YACAE,MAAMC,SAAS,EAAE,EAAEX,OAAO,EAAEY,SAAS,EAAE,GAAG,CAAC,CAAC;gBACxC,MAAMJ,SAAS1B,aAAa4B,IAAI,CAACC,WAAWC;gBAC5C,IAAI,CAACZ,SAAS;oBACVV,sBAAsBkB;gBAC1B;gBACA,OAAOA,WAAW,QAAQA,WAAW,KAAK,IAAI,KAAK,IAAIA,OAAOlC,EAAE;YACpE;YACAuC;gBACI7C,uBAAuBI,OAAO,GAAG;gBACjCC;YACJ;YACAyC;gBACI9C,uBAAuBI,OAAO,GAAG;gBACjCH;YACJ;QACJ,CAAA,GAAI;QACJa;QACAD;QACAR;QACAJ;QACAqB;QACAH;QACAT;KACH;IACDf,OAAMoD,mBAAmB,CAACxD,eAAe,IAAIsC;IAC7C,OAAO;QACHhB,YAAYmC,IAAAA,6BAAa,EAACnC,YAAYE;QACtChB;QACA8B;IACJ;AACJ"}
|
|
1
|
+
{"version":3,"sources":["useActiveDescendant.ts"],"sourcesContent":["import * as React from 'react';\nimport { useEventCallback, useMergedRefs } from '@fluentui/react-utilities';\nimport { useOnKeyboardNavigationChange } from '@fluentui/react-tabster';\nimport { useOptionWalker } from './useOptionWalker';\nimport type { ActiveDescendantImperativeRef, ActiveDescendantOptions, UseActiveDescendantReturn } from './types';\nimport { ACTIVEDESCENDANT_ATTRIBUTE, ACTIVEDESCENDANT_FOCUSVISIBLE_ATTRIBUTE } from './constants';\nimport { scrollIntoView } from './scrollIntoView';\n\ninterface ActiveDescendantChangeEventDetail {\n id: string;\n previousId: string | null;\n}\n\nexport type ActiveDescendantChangeEvent = CustomEvent<ActiveDescendantChangeEventDetail>;\n\nexport const createActiveDescendantChangeEvent = (\n detail: ActiveDescendantChangeEventDetail,\n): ActiveDescendantChangeEvent =>\n new CustomEvent<ActiveDescendantChangeEventDetail>('activedescendantchange', {\n bubbles: true,\n cancelable: false,\n composed: true,\n detail,\n });\n\nexport function useActiveDescendant<TActiveParentElement extends HTMLElement, TListboxElement extends HTMLElement>(\n options: ActiveDescendantOptions,\n): UseActiveDescendantReturn<TActiveParentElement, TListboxElement> {\n const { imperativeRef, matchOption: matchOptionUnstable } = options;\n const focusVisibleRef = React.useRef(false);\n const shouldShowFocusVisibleAttrRef = React.useRef(true);\n const activeIdRef = React.useRef<string | null>(null);\n const lastActiveIdRef = React.useRef<string | null>(null);\n const activeParentRef = React.useRef<TActiveParentElement>(null);\n const attributeVisibilityRef = React.useRef(true);\n\n const removeAttribute = React.useCallback(() => {\n activeParentRef.current?.removeAttribute('aria-activedescendant');\n }, []);\n\n const setAttribute = React.useCallback((id?: string) => {\n if (id) {\n activeIdRef.current = id;\n }\n if (attributeVisibilityRef.current && activeIdRef.current) {\n activeParentRef.current?.setAttribute('aria-activedescendant', activeIdRef.current);\n }\n }, []);\n\n useOnKeyboardNavigationChange(isNavigatingWithKeyboard => {\n focusVisibleRef.current = isNavigatingWithKeyboard;\n\n const active = getActiveDescendant();\n if (!active) {\n return;\n }\n\n if (isNavigatingWithKeyboard && shouldShowFocusVisibleAttrRef.current) {\n active.setAttribute(ACTIVEDESCENDANT_FOCUSVISIBLE_ATTRIBUTE, '');\n } else {\n active.removeAttribute(ACTIVEDESCENDANT_FOCUSVISIBLE_ATTRIBUTE);\n }\n });\n\n const matchOption = useEventCallback(matchOptionUnstable);\n const listboxRef = React.useRef<TListboxElement>(null);\n const { optionWalker, listboxCallbackRef } = useOptionWalker<TListboxElement>({ matchOption });\n\n const getActiveDescendant = React.useCallback(() => {\n return listboxRef.current?.querySelector<HTMLElement>(`#${activeIdRef.current}`);\n }, [listboxRef]);\n\n const setShouldShowFocusVisibleAttribute = React.useCallback(\n (shouldShow: boolean) => {\n shouldShowFocusVisibleAttrRef.current = shouldShow;\n\n const active = getActiveDescendant();\n if (!active) {\n return;\n }\n\n if (shouldShow && focusVisibleRef.current) {\n active.setAttribute(ACTIVEDESCENDANT_FOCUSVISIBLE_ATTRIBUTE, '');\n } else {\n active.removeAttribute(ACTIVEDESCENDANT_FOCUSVISIBLE_ATTRIBUTE);\n }\n },\n [getActiveDescendant],\n );\n\n const blurActiveDescendant = React.useCallback(() => {\n const active = getActiveDescendant();\n if (active) {\n active.removeAttribute(ACTIVEDESCENDANT_ATTRIBUTE);\n active.removeAttribute(ACTIVEDESCENDANT_FOCUSVISIBLE_ATTRIBUTE);\n }\n\n removeAttribute();\n lastActiveIdRef.current = activeIdRef.current;\n activeIdRef.current = null;\n return active?.id ?? null;\n }, [getActiveDescendant, removeAttribute]);\n\n const focusActiveDescendant = React.useCallback(\n (nextActive: HTMLElement | null) => {\n if (!nextActive) {\n return;\n }\n\n const previousActiveId = blurActiveDescendant();\n\n scrollIntoView(nextActive);\n setAttribute(nextActive.id);\n nextActive.setAttribute(ACTIVEDESCENDANT_ATTRIBUTE, '');\n\n if (focusVisibleRef.current && shouldShowFocusVisibleAttrRef.current) {\n nextActive.setAttribute(ACTIVEDESCENDANT_FOCUSVISIBLE_ATTRIBUTE, '');\n }\n\n const event = createActiveDescendantChangeEvent({ id: nextActive.id, previousId: previousActiveId });\n nextActive.dispatchEvent(event);\n },\n [blurActiveDescendant, setAttribute],\n );\n\n const controller: ActiveDescendantImperativeRef = React.useMemo(\n () => ({\n first: ({ passive } = {}) => {\n const first = optionWalker.first();\n if (!passive) {\n focusActiveDescendant(first);\n }\n\n return first?.id;\n },\n last: ({ passive } = {}) => {\n const last = optionWalker.last();\n if (!passive) {\n focusActiveDescendant(last);\n }\n\n return last?.id;\n },\n next: ({ passive } = {}) => {\n const active = getActiveDescendant();\n if (!active) {\n return;\n }\n\n optionWalker.setCurrent(active);\n const next = optionWalker.next();\n if (!passive) {\n focusActiveDescendant(next);\n }\n\n return next?.id;\n },\n prev: ({ passive } = {}) => {\n const active = getActiveDescendant();\n if (!active) {\n return;\n }\n\n optionWalker.setCurrent(active);\n const next = optionWalker.prev();\n\n if (!passive) {\n focusActiveDescendant(next);\n }\n\n return next?.id;\n },\n blur: () => {\n blurActiveDescendant();\n },\n active: () => {\n return getActiveDescendant()?.id;\n },\n focus: (id: string) => {\n if (!listboxRef.current) {\n return;\n }\n\n const target = listboxRef.current.querySelector<HTMLElement>(`#${id}`);\n if (target) {\n focusActiveDescendant(target);\n }\n },\n focusLastActive: () => {\n if (!listboxRef.current || !lastActiveIdRef.current) {\n return;\n }\n\n const target = listboxRef.current.querySelector<HTMLElement>(`#${lastActiveIdRef.current}`);\n if (target) {\n focusActiveDescendant(target);\n return true;\n }\n },\n find(predicate, { passive, startFrom } = {}) {\n const target = optionWalker.find(predicate, startFrom);\n if (!passive) {\n focusActiveDescendant(target);\n }\n\n return target?.id;\n },\n scrollActiveIntoView: () => {\n if (!listboxRef.current) {\n return;\n }\n\n const active = getActiveDescendant();\n if (!active) {\n return;\n }\n\n scrollIntoView(active);\n },\n showAttributes() {\n attributeVisibilityRef.current = true;\n setAttribute();\n },\n hideAttributes() {\n attributeVisibilityRef.current = false;\n removeAttribute();\n },\n showFocusVisibleAttributes() {\n setShouldShowFocusVisibleAttribute(true);\n },\n hideFocusVisibleAttributes() {\n setShouldShowFocusVisibleAttribute(false);\n },\n }),\n [\n optionWalker,\n listboxRef,\n setAttribute,\n removeAttribute,\n focusActiveDescendant,\n blurActiveDescendant,\n getActiveDescendant,\n setShouldShowFocusVisibleAttribute,\n ],\n );\n\n React.useImperativeHandle(imperativeRef, () => controller);\n\n return { listboxRef: useMergedRefs(listboxRef, listboxCallbackRef), activeParentRef, controller };\n}\n"],"names":["createActiveDescendantChangeEvent","useActiveDescendant","detail","CustomEvent","bubbles","cancelable","composed","options","imperativeRef","matchOption","matchOptionUnstable","focusVisibleRef","React","useRef","shouldShowFocusVisibleAttrRef","activeIdRef","lastActiveIdRef","activeParentRef","attributeVisibilityRef","removeAttribute","useCallback","current","setAttribute","id","useOnKeyboardNavigationChange","isNavigatingWithKeyboard","active","getActiveDescendant","ACTIVEDESCENDANT_FOCUSVISIBLE_ATTRIBUTE","useEventCallback","listboxRef","optionWalker","listboxCallbackRef","useOptionWalker","querySelector","setShouldShowFocusVisibleAttribute","shouldShow","blurActiveDescendant","ACTIVEDESCENDANT_ATTRIBUTE","focusActiveDescendant","nextActive","previousActiveId","scrollIntoView","event","previousId","dispatchEvent","controller","useMemo","first","passive","last","next","setCurrent","prev","blur","focus","target","focusLastActive","find","predicate","startFrom","scrollActiveIntoView","showAttributes","hideAttributes","showFocusVisibleAttributes","hideFocusVisibleAttributes","useImperativeHandle","useMergedRefs"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAeaA,iCAAAA;eAAAA;;IAUGC,mBAAAA;eAAAA;;;;iEAzBO;gCACyB;8BACF;iCACd;2BAEoD;gCACrD;AASxB,MAAMD,oCAAoC,CAC/CE,SAEA,IAAIC,YAA+C,0BAA0B;QAC3EC,SAAS;QACTC,YAAY;QACZC,UAAU;QACVJ;IACF;AAEK,SAASD,oBACdM,OAAgC;IAEhC,MAAM,EAAEC,aAAa,EAAEC,aAAaC,mBAAmB,EAAE,GAAGH;IAC5D,MAAMI,kBAAkBC,OAAMC,MAAM,CAAC;IACrC,MAAMC,gCAAgCF,OAAMC,MAAM,CAAC;IACnD,MAAME,cAAcH,OAAMC,MAAM,CAAgB;IAChD,MAAMG,kBAAkBJ,OAAMC,MAAM,CAAgB;IACpD,MAAMI,kBAAkBL,OAAMC,MAAM,CAAuB;IAC3D,MAAMK,yBAAyBN,OAAMC,MAAM,CAAC;IAE5C,MAAMM,kBAAkBP,OAAMQ,WAAW,CAAC;YACxCH;QAAAA,CAAAA,2BAAAA,gBAAgBI,OAAO,AAAPA,MAAO,QAAvBJ,6BAAAA,KAAAA,IAAAA,KAAAA,IAAAA,yBAAyBE,eAAe,CAAC;IAC3C,GAAG,EAAE;IAEL,MAAMG,eAAeV,OAAMQ,WAAW,CAAC,CAACG;QACtC,IAAIA,IAAI;YACNR,YAAYM,OAAO,GAAGE;QACxB;QACA,IAAIL,uBAAuBG,OAAO,IAAIN,YAAYM,OAAO,EAAE;gBACzDJ;YAAAA,CAAAA,2BAAAA,gBAAgBI,OAAO,AAAPA,MAAO,QAAvBJ,6BAAAA,KAAAA,IAAAA,KAAAA,IAAAA,yBAAyBK,YAAY,CAAC,yBAAyBP,YAAYM,OAAO;QACpF;IACF,GAAG,EAAE;IAELG,IAAAA,2CAAAA,EAA8BC,CAAAA;QAC5Bd,gBAAgBU,OAAO,GAAGI;QAE1B,MAAMC,SAASC;QACf,IAAI,CAACD,QAAQ;YACX;QACF;QAEA,IAAID,4BAA4BX,8BAA8BO,OAAO,EAAE;YACrEK,OAAOJ,YAAY,CAACM,kDAAAA,EAAyC;QAC/D,OAAO;YACLF,OAAOP,eAAe,CAACS,kDAAAA;QACzB;IACF;IAEA,MAAMnB,cAAcoB,IAAAA,gCAAAA,EAAiBnB;IACrC,MAAMoB,aAAalB,OAAMC,MAAM,CAAkB;IACjD,MAAM,EAAEkB,YAAY,EAAEC,kBAAkB,EAAE,GAAGC,IAAAA,gCAAAA,EAAiC;QAAExB;IAAY;IAE5F,MAAMkB,sBAAsBf,OAAMQ,WAAW,CAAC;YACrCU;QAAP,OAAA,AAAOA,CAAAA,sBAAAA,WAAWT,OAAO,AAAPA,MAAO,QAAlBS,wBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,oBAAoBI,aAAa,CAAc,CAAC,CAAC,EAAEnB,YAAYM,OAAO,CAAC,CAAC;IACjF,GAAG;QAACS;KAAW;IAEf,MAAMK,qCAAqCvB,OAAMQ,WAAW,CAC1D,CAACgB;QACCtB,8BAA8BO,OAAO,GAAGe;QAExC,MAAMV,SAASC;QACf,IAAI,CAACD,QAAQ;YACX;QACF;QAEA,IAAIU,cAAczB,gBAAgBU,OAAO,EAAE;YACzCK,OAAOJ,YAAY,CAACM,kDAAAA,EAAyC;QAC/D,OAAO;YACLF,OAAOP,eAAe,CAACS,kDAAAA;QACzB;IACF,GACA;QAACD;KAAoB;IAGvB,MAAMU,uBAAuBzB,OAAMQ,WAAW,CAAC;QAC7C,MAAMM,SAASC;QACf,IAAID,QAAQ;YACVA,OAAOP,eAAe,CAACmB,qCAAAA;YACvBZ,OAAOP,eAAe,CAACS,kDAAAA;QACzB;QAEAT;QACAH,gBAAgBK,OAAO,GAAGN,YAAYM,OAAO;QAC7CN,YAAYM,OAAO,GAAG;YACfK;QAAP,OAAOA,CAAAA,aAAAA,WAAAA,QAAAA,WAAAA,KAAAA,IAAAA,KAAAA,IAAAA,OAAQH,EAAE,AAAFA,MAAE,QAAVG,eAAAA,KAAAA,IAAAA,aAAc;IACvB,GAAG;QAACC;QAAqBR;KAAgB;IAEzC,MAAMoB,wBAAwB3B,OAAMQ,WAAW,CAC7C,CAACoB;QACC,IAAI,CAACA,YAAY;YACf;QACF;QAEA,MAAMC,mBAAmBJ;QAEzBK,IAAAA,8BAAAA,EAAeF;QACflB,aAAakB,WAAWjB,EAAE;QAC1BiB,WAAWlB,YAAY,CAACgB,qCAAAA,EAA4B;QAEpD,IAAI3B,gBAAgBU,OAAO,IAAIP,8BAA8BO,OAAO,EAAE;YACpEmB,WAAWlB,YAAY,CAACM,kDAAAA,EAAyC;QACnE;QAEA,MAAMe,QAAQ3C,kCAAkC;YAAEuB,IAAIiB,WAAWjB,EAAE;YAAEqB,YAAYH;QAAiB;QAClGD,WAAWK,aAAa,CAACF;IAC3B,GACA;QAACN;QAAsBf;KAAa;IAGtC,MAAMwB,aAA4ClC,OAAMmC,OAAO,CAC7D,IAAO,CAAA;YACLC,OAAO,CAAC,EAAEC,OAAO,EAAE,GAAG,CAAC,CAAC;gBACtB,MAAMD,QAAQjB,aAAaiB,KAAK;gBAChC,IAAI,CAACC,SAAS;oBACZV,sBAAsBS;gBACxB;gBAEA,OAAOA,UAAAA,QAAAA,UAAAA,KAAAA,IAAAA,KAAAA,IAAAA,MAAOzB,EAAE;YAClB;YACA2B,MAAM,CAAC,EAAED,OAAO,EAAE,GAAG,CAAC,CAAC;gBACrB,MAAMC,OAAOnB,aAAamB,IAAI;gBAC9B,IAAI,CAACD,SAAS;oBACZV,sBAAsBW;gBACxB;gBAEA,OAAOA,SAAAA,QAAAA,SAAAA,KAAAA,IAAAA,KAAAA,IAAAA,KAAM3B,EAAE;YACjB;YACA4B,MAAM,CAAC,EAAEF,OAAO,EAAE,GAAG,CAAC,CAAC;gBACrB,MAAMvB,SAASC;gBACf,IAAI,CAACD,QAAQ;oBACX;gBACF;gBAEAK,aAAaqB,UAAU,CAAC1B;gBACxB,MAAMyB,OAAOpB,aAAaoB,IAAI;gBAC9B,IAAI,CAACF,SAAS;oBACZV,sBAAsBY;gBACxB;gBAEA,OAAOA,SAAAA,QAAAA,SAAAA,KAAAA,IAAAA,KAAAA,IAAAA,KAAM5B,EAAE;YACjB;YACA8B,MAAM,CAAC,EAAEJ,OAAO,EAAE,GAAG,CAAC,CAAC;gBACrB,MAAMvB,SAASC;gBACf,IAAI,CAACD,QAAQ;oBACX;gBACF;gBAEAK,aAAaqB,UAAU,CAAC1B;gBACxB,MAAMyB,OAAOpB,aAAasB,IAAI;gBAE9B,IAAI,CAACJ,SAAS;oBACZV,sBAAsBY;gBACxB;gBAEA,OAAOA,SAAAA,QAAAA,SAAAA,KAAAA,IAAAA,KAAAA,IAAAA,KAAM5B,EAAE;YACjB;YACA+B,MAAM;gBACJjB;YACF;YACAX,QAAQ;oBACCC;gBAAP,OAAA,AAAOA,CAAAA,uBAAAA,qBAAAA,MAAAA,QAAAA,yBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,qBAAuBJ,EAAE;YAClC;YACAgC,OAAO,CAAChC;gBACN,IAAI,CAACO,WAAWT,OAAO,EAAE;oBACvB;gBACF;gBAEA,MAAMmC,SAAS1B,WAAWT,OAAO,CAACa,aAAa,CAAc,CAAC,CAAC,EAAEX,GAAG,CAAC;gBACrE,IAAIiC,QAAQ;oBACVjB,sBAAsBiB;gBACxB;YACF;YACAC,iBAAiB;gBACf,IAAI,CAAC3B,WAAWT,OAAO,IAAI,CAACL,gBAAgBK,OAAO,EAAE;oBACnD;gBACF;gBAEA,MAAMmC,SAAS1B,WAAWT,OAAO,CAACa,aAAa,CAAc,CAAC,CAAC,EAAElB,gBAAgBK,OAAO,CAAC,CAAC;gBAC1F,IAAImC,QAAQ;oBACVjB,sBAAsBiB;oBACtB,OAAO;gBACT;YACF;YACAE,MAAKC,SAAS,EAAE,EAAEV,OAAO,EAAEW,SAAS,EAAE,GAAG,CAAC,CAAC;gBACzC,MAAMJ,SAASzB,aAAa2B,IAAI,CAACC,WAAWC;gBAC5C,IAAI,CAACX,SAAS;oBACZV,sBAAsBiB;gBACxB;gBAEA,OAAOA,WAAAA,QAAAA,WAAAA,KAAAA,IAAAA,KAAAA,IAAAA,OAAQjC,EAAE;YACnB;YACAsC,sBAAsB;gBACpB,IAAI,CAAC/B,WAAWT,OAAO,EAAE;oBACvB;gBACF;gBAEA,MAAMK,SAASC;gBACf,IAAI,CAACD,QAAQ;oBACX;gBACF;gBAEAgB,IAAAA,8BAAAA,EAAehB;YACjB;YACAoC;gBACE5C,uBAAuBG,OAAO,GAAG;gBACjCC;YACF;YACAyC;gBACE7C,uBAAuBG,OAAO,GAAG;gBACjCF;YACF;YACA6C;gBACE7B,mCAAmC;YACrC;YACA8B;gBACE9B,mCAAmC;YACrC;QACF,CAAA,GACA;QACEJ;QACAD;QACAR;QACAH;QACAoB;QACAF;QACAV;QACAQ;KACD;IAGHvB,OAAMsD,mBAAmB,CAAC1D,eAAe,IAAMsC;IAE/C,OAAO;QAAEhB,YAAYqC,IAAAA,6BAAAA,EAAcrC,YAAYE;QAAqBf;QAAiB6B;IAAW;AAClG"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useOptionWalker.
|
|
1
|
+
{"version":3,"sources":["useOptionWalker.ts"],"sourcesContent":["import * as React from 'react';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { isHTMLElement } from '@fluentui/react-utilities';\n\ninterface UseOptionWalkerOptions {\n matchOption: (el: HTMLElement) => boolean;\n}\n\nexport function useOptionWalker<TListboxElement extends HTMLElement>(options: UseOptionWalkerOptions) {\n const { matchOption } = options;\n const { targetDocument } = useFluent();\n const treeWalkerRef = React.useRef<TreeWalker | null>(null);\n const listboxRef = React.useRef<TListboxElement | null>(null);\n\n const optionFilter = React.useCallback(\n (node: Node) => {\n if (isHTMLElement(node) && matchOption(node)) {\n return NodeFilter.FILTER_ACCEPT;\n }\n\n return NodeFilter.FILTER_SKIP;\n },\n [matchOption],\n );\n\n const setListbox = React.useCallback(\n (el: TListboxElement) => {\n if (el && targetDocument) {\n listboxRef.current = el;\n treeWalkerRef.current = targetDocument.createTreeWalker(el, NodeFilter.SHOW_ELEMENT, optionFilter);\n } else {\n listboxRef.current = null;\n }\n },\n [targetDocument, optionFilter],\n );\n\n const optionWalker = React.useMemo(\n () => ({\n first: () => {\n if (!treeWalkerRef.current || !listboxRef.current) {\n return null;\n }\n\n treeWalkerRef.current.currentNode = listboxRef.current;\n return treeWalkerRef.current.firstChild() as HTMLElement | null;\n },\n last: () => {\n if (!treeWalkerRef.current || !listboxRef.current) {\n return null;\n }\n\n treeWalkerRef.current.currentNode = listboxRef.current;\n return treeWalkerRef.current.lastChild() as HTMLElement | null;\n },\n next: () => {\n if (!treeWalkerRef.current) {\n return null;\n }\n\n return treeWalkerRef.current.nextNode() as HTMLElement | null;\n },\n prev: () => {\n if (!treeWalkerRef.current) {\n return null;\n }\n\n return treeWalkerRef.current.previousNode() as HTMLElement | null;\n },\n find: (predicate: (id: string) => boolean, startFrom?: string) => {\n if (!treeWalkerRef.current || !listboxRef.current) {\n return null;\n }\n\n const start = startFrom ? targetDocument?.getElementById(startFrom) : null;\n treeWalkerRef.current.currentNode = start ?? listboxRef.current;\n let cur: HTMLElement | null = treeWalkerRef.current.currentNode as HTMLElement;\n while (cur && !predicate(cur.id)) {\n cur = treeWalkerRef.current.nextNode() as HTMLElement | null;\n }\n\n return cur;\n },\n setCurrent: (el: HTMLElement) => {\n if (!treeWalkerRef.current) {\n return;\n }\n\n treeWalkerRef.current.currentNode = el;\n },\n }),\n [targetDocument],\n );\n\n return {\n optionWalker,\n listboxCallbackRef: setListbox,\n };\n}\n"],"names":["useOptionWalker","options","matchOption","targetDocument","useFluent","treeWalkerRef","React","useRef","listboxRef","optionFilter","useCallback","node","isHTMLElement","NodeFilter","FILTER_ACCEPT","FILTER_SKIP","setListbox","el","current","createTreeWalker","SHOW_ELEMENT","optionWalker","useMemo","first","currentNode","firstChild","last","lastChild","next","nextNode","prev","previousNode","find","predicate","startFrom","start","getElementById","cur","id","setCurrent","listboxCallbackRef"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAQgBA;;;eAAAA;;;;iEARO;qCACyB;gCAClB;AAMvB,SAASA,gBAAqDC,OAA+B;IAClG,MAAM,EAAEC,WAAW,EAAE,GAAGD;IACxB,MAAM,EAAEE,cAAc,EAAE,GAAGC,IAAAA,uCAAAA;IAC3B,MAAMC,gBAAgBC,OAAMC,MAAM,CAAoB;IACtD,MAAMC,aAAaF,OAAMC,MAAM,CAAyB;IAExD,MAAME,eAAeH,OAAMI,WAAW,CACpC,CAACC;QACC,IAAIC,IAAAA,6BAAAA,EAAcD,SAAST,YAAYS,OAAO;YAC5C,OAAOE,WAAWC,aAAa;QACjC;QAEA,OAAOD,WAAWE,WAAW;IAC/B,GACA;QAACb;KAAY;IAGf,MAAMc,aAAaV,OAAMI,WAAW,CAClC,CAACO;QACC,IAAIA,MAAMd,gBAAgB;YACxBK,WAAWU,OAAO,GAAGD;YACrBZ,cAAca,OAAO,GAAGf,eAAegB,gBAAgB,CAACF,IAAIJ,WAAWO,YAAY,EAAEX;QACvF,OAAO;YACLD,WAAWU,OAAO,GAAG;QACvB;IACF,GACA;QAACf;QAAgBM;KAAa;IAGhC,MAAMY,eAAef,OAAMgB,OAAO,CAChC,IAAO,CAAA;YACLC,OAAO;gBACL,IAAI,CAAClB,cAAca,OAAO,IAAI,CAACV,WAAWU,OAAO,EAAE;oBACjD,OAAO;gBACT;gBAEAb,cAAca,OAAO,CAACM,WAAW,GAAGhB,WAAWU,OAAO;gBACtD,OAAOb,cAAca,OAAO,CAACO,UAAU;YACzC;YACAC,MAAM;gBACJ,IAAI,CAACrB,cAAca,OAAO,IAAI,CAACV,WAAWU,OAAO,EAAE;oBACjD,OAAO;gBACT;gBAEAb,cAAca,OAAO,CAACM,WAAW,GAAGhB,WAAWU,OAAO;gBACtD,OAAOb,cAAca,OAAO,CAACS,SAAS;YACxC;YACAC,MAAM;gBACJ,IAAI,CAACvB,cAAca,OAAO,EAAE;oBAC1B,OAAO;gBACT;gBAEA,OAAOb,cAAca,OAAO,CAACW,QAAQ;YACvC;YACAC,MAAM;gBACJ,IAAI,CAACzB,cAAca,OAAO,EAAE;oBAC1B,OAAO;gBACT;gBAEA,OAAOb,cAAca,OAAO,CAACa,YAAY;YAC3C;YACAC,MAAM,CAACC,WAAoCC;gBACzC,IAAI,CAAC7B,cAAca,OAAO,IAAI,CAACV,WAAWU,OAAO,EAAE;oBACjD,OAAO;gBACT;gBAEA,MAAMiB,QAAQD,YAAY/B,mBAAAA,QAAAA,mBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,eAAgBiC,cAAc,CAACF,aAAa;gBACtE7B,cAAca,OAAO,CAACM,WAAW,GAAGW,UAAAA,QAAAA,UAAAA,KAAAA,IAAAA,QAAS3B,WAAWU,OAAO;gBAC/D,IAAImB,MAA0BhC,cAAca,OAAO,CAACM,WAAW;gBAC/D,MAAOa,OAAO,CAACJ,UAAUI,IAAIC,EAAE,EAAG;oBAChCD,MAAMhC,cAAca,OAAO,CAACW,QAAQ;gBACtC;gBAEA,OAAOQ;YACT;YACAE,YAAY,CAACtB;gBACX,IAAI,CAACZ,cAAca,OAAO,EAAE;oBAC1B;gBACF;gBAEAb,cAAca,OAAO,CAACM,WAAW,GAAGP;YACtC;QACF,CAAA,GACA;QAACd;KAAe;IAGlB,OAAO;QACLkB;QACAmB,oBAAoBxB;IACtB;AACF"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["index.
|
|
1
|
+
{"version":3,"sources":["index.ts"],"sourcesContent":["export * from './useARIAButtonProps';\nexport * from './useARIAButtonShorthand';\nexport * from './types';\n"],"names":[],"rangeMappings":";;;;;;;","mappings":";;;;;uBAAc;uBACA;uBACA"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["types.
|
|
1
|
+
{"version":3,"sources":["types.ts"],"sourcesContent":["import type { ExtractSlotProps, Slot, UnionToIntersection } from '@fluentui/react-utilities';\nimport * as React from 'react';\n\nexport type ARIAButtonType = 'button' | 'a' | 'div';\n\nexport type ARIAButtonElement<AlternateAs extends 'a' | 'div' = 'a' | 'div'> =\n | HTMLButtonElement\n | (AlternateAs extends 'a' ? HTMLAnchorElement : never)\n | (AlternateAs extends 'div' ? HTMLDivElement : never);\n\n/**\n * @internal\n */\nexport type ARIAButtonElementIntersection<AlternateAs extends 'a' | 'div' = 'a' | 'div'> = UnionToIntersection<\n ARIAButtonElement<AlternateAs>\n>;\n\n/**\n * Props expected by `useARIAButtonProps` hooks\n */\nexport type ARIAButtonProps<Type extends ARIAButtonType = ARIAButtonType> = React.PropsWithRef<\n JSX.IntrinsicElements[Type]\n> & {\n disabled?: boolean;\n /**\n * When set, allows the button to be focusable even when it has been disabled.\n * This is used in scenarios where it is important to keep a consistent tab order\n * for screen reader and keyboard users. The primary example of this\n * pattern is when the disabled button is in a menu or a commandbar and is seldom used for standalone buttons.\n *\n * @default false\n */\n disabledFocusable?: boolean;\n};\n\nexport type ARIAButtonSlotProps<AlternateAs extends 'a' | 'div' = 'a' | 'div'> = ExtractSlotProps<\n Slot<'button', AlternateAs>\n> &\n Pick<ARIAButtonProps<ARIAButtonType>, 'disabled' | 'disabledFocusable'>;\n\n/**\n * Props that will be modified internally by `useARIAButtonProps` by each case.\n * This typing is to ensure a well specified return value for `useARIAbButtonProps`\n */\nexport type ARIAButtonAlteredProps<Type extends ARIAButtonType> =\n | (Type extends 'button'\n ? Pick<\n JSX.IntrinsicElements['button'],\n 'onClick' | 'onKeyDown' | 'onKeyUp' | 'disabled' | 'aria-disabled' | 'tabIndex'\n >\n : never)\n | (Type extends 'a'\n ? Pick<\n JSX.IntrinsicElements['a'],\n 'onClick' | 'onKeyDown' | 'onKeyUp' | 'aria-disabled' | 'tabIndex' | 'role' | 'href'\n >\n : never)\n | (Type extends 'div'\n ? Pick<JSX.IntrinsicElements['div'], 'onClick' | 'onKeyDown' | 'onKeyUp' | 'aria-disabled' | 'tabIndex' | 'role'>\n : never);\n\n/**\n * Merge of props provided by the user and props provided internally.\n */\nexport type ARIAButtonResultProps<Type extends ARIAButtonType, Props> = Props &\n UnionToIntersection<ARIAButtonAlteredProps<Type>>;\n"],"names":[],"rangeMappings":";;;;;","mappings":";;;;;iEACuB"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useARIAButtonProps.
|
|
1
|
+
{"version":3,"sources":["useARIAButtonProps.ts"],"sourcesContent":["import { Enter, Space } from '@fluentui/keyboard-keys';\nimport { useEventCallback } from '@fluentui/react-utilities';\nimport * as React from 'react';\nimport type { ARIAButtonElementIntersection, ARIAButtonProps, ARIAButtonResultProps, ARIAButtonType } from './types';\n\n/**\n * @internal\n *\n * Button keyboard handling, role, disabled and tabIndex implementation that ensures ARIA spec\n * for multiple scenarios of non native button elements. Ensuring 1st rule of ARIA for cases\n * where no attribute addition is required.\n *\n * @param type - the proper scenario to be interpreted by the hook.\n * 1. `button` - Minimal interference from the hook, as semantic button already supports most of the states\n * 2. `a` or `div` - Proper keyboard/mouse handling plus other support to ensure ARIA behavior\n * @param props - the props to be passed down the line to the desired element.\n * This hook will encapsulate proper properties, such as `onClick`, `onKeyDown`, `onKeyUp`, etc,.\n *\n * @example\n * ```tsx\n * const buttonProps = useARIAButtonProps('a', {\n * href: './some-route'\n * onClick: () => console.log('this should run both on click and Space and Enter')\n * })\n *\n * // ...\n *\n * return (\n * <a {...buttonProps}>This anchor will behave as a proper button</a>\n * )\n * ```\n */\nexport function useARIAButtonProps<Type extends ARIAButtonType, Props extends ARIAButtonProps<Type>>(\n type?: Type,\n props?: Props,\n): ARIAButtonResultProps<Type, Props> {\n const {\n disabled,\n disabledFocusable = false,\n ['aria-disabled']: ariaDisabled,\n onClick,\n onKeyDown,\n onKeyUp,\n ...rest\n } = props ?? {};\n\n const normalizedARIADisabled = typeof ariaDisabled === 'string' ? ariaDisabled === 'true' : ariaDisabled;\n\n const isDisabled = disabled || disabledFocusable || normalizedARIADisabled;\n\n const handleClick = useEventCallback((ev: React.MouseEvent<ARIAButtonElementIntersection>) => {\n if (isDisabled) {\n ev.preventDefault();\n ev.stopPropagation();\n } else {\n onClick?.(ev);\n }\n });\n\n const handleKeyDown = useEventCallback((ev: React.KeyboardEvent<ARIAButtonElementIntersection>) => {\n onKeyDown?.(ev);\n\n if (ev.isDefaultPrevented()) {\n return;\n }\n\n const key = ev.key;\n\n if (isDisabled && (key === Enter || key === Space)) {\n ev.preventDefault();\n ev.stopPropagation();\n return;\n }\n\n if (key === Space) {\n ev.preventDefault();\n return;\n }\n\n // If enter is pressed, activate the button\n else if (key === Enter) {\n ev.preventDefault();\n ev.currentTarget.click();\n }\n });\n\n const handleKeyUp = useEventCallback((ev: React.KeyboardEvent<ARIAButtonElementIntersection>) => {\n onKeyUp?.(ev);\n\n if (ev.isDefaultPrevented()) {\n return;\n }\n\n const key = ev.key;\n\n if (isDisabled && (key === Enter || key === Space)) {\n ev.preventDefault();\n ev.stopPropagation();\n return;\n }\n\n if (key === Space) {\n ev.preventDefault();\n ev.currentTarget.click();\n }\n });\n\n // If a <button> tag is to be rendered we just need to set disabled and aria-disabled correctly\n if (type === 'button' || type === undefined) {\n return {\n ...rest,\n disabled: disabled && !disabledFocusable,\n 'aria-disabled': disabledFocusable ? true : normalizedARIADisabled,\n // onclick should still use internal handler to ensure prevention if disabled\n // if disabledFocusable then there's no requirement for handlers as those events should not be propagated\n onClick: disabledFocusable ? undefined : handleClick,\n onKeyUp: disabledFocusable ? undefined : onKeyUp,\n onKeyDown: disabledFocusable ? undefined : onKeyDown,\n } as ARIAButtonResultProps<Type, Props>;\n }\n\n // If an <a> or <div> tag is to be rendered we have to remove disabled and type,\n // and set aria-disabled, role and tabIndex.\n else {\n const resultProps = {\n role: 'button',\n tabIndex: disabled && !disabledFocusable ? undefined : 0,\n ...rest,\n // If it's not a <button> than listeners are required even with disabledFocusable\n // Since you cannot assure the default behavior of the element\n // E.g: <a> will redirect on click\n onClick: handleClick,\n onKeyUp: handleKeyUp,\n onKeyDown: handleKeyDown,\n 'aria-disabled': disabled || disabledFocusable || normalizedARIADisabled,\n } as ARIAButtonResultProps<Type, Props>;\n\n if (type === 'a' && isDisabled) {\n (resultProps as ARIAButtonResultProps<'a', Props>).href = undefined;\n }\n\n return resultProps;\n }\n}\n"],"names":["useARIAButtonProps","type","props","disabled","disabledFocusable","ariaDisabled","onClick","onKeyDown","onKeyUp","rest","normalizedARIADisabled","isDisabled","handleClick","useEventCallback","ev","preventDefault","stopPropagation","handleKeyDown","isDefaultPrevented","key","Enter","Space","currentTarget","click","handleKeyUp","undefined","resultProps","role","tabIndex","href"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAgCgBA;;;eAAAA;;;;8BAhCa;gCACI;iEACV;AA8BhB,SAASA,mBACdC,IAAW,EACXC,KAAa;IAEb,MAAM,EACJC,QAAQ,EACRC,oBAAoB,KAAK,EACzB,CAAC,gBAAgB,EAAEC,YAAY,EAC/BC,OAAO,EACPC,SAAS,EACTC,OAAO,EACP,GAAGC,MACJ,GAAGP,UAAAA,QAAAA,UAAAA,KAAAA,IAAAA,QAAS,CAAC;IAEd,MAAMQ,yBAAyB,OAAOL,iBAAiB,WAAWA,iBAAiB,SAASA;IAE5F,MAAMM,aAAaR,YAAYC,qBAAqBM;IAEpD,MAAME,cAAcC,IAAAA,gCAAAA,EAAiB,CAACC;QACpC,IAAIH,YAAY;YACdG,GAAGC,cAAc;YACjBD,GAAGE,eAAe;QACpB,OAAO;YACLV,YAAAA,QAAAA,YAAAA,KAAAA,IAAAA,KAAAA,IAAAA,QAAUQ;QACZ;IACF;IAEA,MAAMG,gBAAgBJ,IAAAA,gCAAAA,EAAiB,CAACC;QACtCP,cAAAA,QAAAA,cAAAA,KAAAA,IAAAA,KAAAA,IAAAA,UAAYO;QAEZ,IAAIA,GAAGI,kBAAkB,IAAI;YAC3B;QACF;QAEA,MAAMC,MAAML,GAAGK,GAAG;QAElB,IAAIR,cAAeQ,CAAAA,QAAQC,mBAAAA,IAASD,QAAQE,mBAAI,AAAJA,GAAQ;YAClDP,GAAGC,cAAc;YACjBD,GAAGE,eAAe;YAClB;QACF;QAEA,IAAIG,QAAQE,mBAAAA,EAAO;YACjBP,GAAGC,cAAc;YACjB;QACF,OAGK,IAAII,QAAQC,mBAAAA,EAAO;YACtBN,GAAGC,cAAc;YACjBD,GAAGQ,aAAa,CAACC,KAAK;QACxB;IACF;IAEA,MAAMC,cAAcX,IAAAA,gCAAAA,EAAiB,CAACC;QACpCN,YAAAA,QAAAA,YAAAA,KAAAA,IAAAA,KAAAA,IAAAA,QAAUM;QAEV,IAAIA,GAAGI,kBAAkB,IAAI;YAC3B;QACF;QAEA,MAAMC,MAAML,GAAGK,GAAG;QAElB,IAAIR,cAAeQ,CAAAA,QAAQC,mBAAAA,IAASD,QAAQE,mBAAI,AAAJA,GAAQ;YAClDP,GAAGC,cAAc;YACjBD,GAAGE,eAAe;YAClB;QACF;QAEA,IAAIG,QAAQE,mBAAAA,EAAO;YACjBP,GAAGC,cAAc;YACjBD,GAAGQ,aAAa,CAACC,KAAK;QACxB;IACF;IAEA,+FAA+F;IAC/F,IAAItB,SAAS,YAAYA,SAASwB,WAAW;QAC3C,OAAO;YACL,GAAGhB,IAAI;YACPN,UAAUA,YAAY,CAACC;YACvB,iBAAiBA,oBAAoB,OAAOM;YAC5C,6EAA6E;YAC7E,yGAAyG;YACzGJ,SAASF,oBAAoBqB,YAAYb;YACzCJ,SAASJ,oBAAoBqB,YAAYjB;YACzCD,WAAWH,oBAAoBqB,YAAYlB;QAC7C;IACF,OAIK;QACH,MAAMmB,cAAc;YAClBC,MAAM;YACNC,UAAUzB,YAAY,CAACC,oBAAoBqB,YAAY;YACvD,GAAGhB,IAAI;YACP,iFAAiF;YACjF,8DAA8D;YAC9D,kCAAkC;YAClCH,SAASM;YACTJ,SAASgB;YACTjB,WAAWU;YACX,iBAAiBd,YAAYC,qBAAqBM;QACpD;QAEA,IAAIT,SAAS,OAAOU,YAAY;YAC7Be,YAAkDG,IAAI,GAAGJ;QAC5D;QAEA,OAAOC;IACT;AACF"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useARIAButtonShorthand.
|
|
1
|
+
{"version":3,"sources":["useARIAButtonShorthand.ts"],"sourcesContent":["import { resolveShorthand } from '@fluentui/react-utilities';\nimport { useARIAButtonProps } from './useARIAButtonProps';\nimport type { ResolveShorthandFunction } from '@fluentui/react-utilities';\nimport type { ARIAButtonProps, ARIAButtonSlotProps, ARIAButtonType } from './types';\n\n/**\n * @internal\n *\n * @deprecated use useARIAButtonProps instead\n *\n * This function expects to receive a slot, if `as` property is not desired use `useARIAButtonProps` instead\n *\n * Button keyboard handling, role, disabled and tabIndex implementation that ensures ARIA spec\n * for multiple scenarios of shorthand properties. Ensuring 1st rule of ARIA for cases\n * where no attribute addition is required.\n */\n// eslint-disable-next-line deprecation/deprecation\nexport const useARIAButtonShorthand: ResolveShorthandFunction<ARIAButtonSlotProps> = (value, options) => {\n // eslint-disable-next-line deprecation/deprecation\n const shorthand = resolveShorthand(value, options);\n const shorthandARIAButton = useARIAButtonProps<ARIAButtonType, ARIAButtonProps>(shorthand?.as ?? 'button', shorthand);\n return shorthand && shorthandARIAButton;\n};\n"],"names":["useARIAButtonShorthand","value","options","shorthand","resolveShorthand","shorthandARIAButton","useARIAButtonProps","as"],"rangeMappings":";;;;;;;;;;;;;;;;;;","mappings":";;;;+BAiBaA;;;eAAAA;;;gCAjBoB;oCACE;AAgB5B,MAAMA,yBAAwE,CAACC,OAAOC;IAC3F,mDAAmD;IACnD,MAAMC,YAAYC,IAAAA,gCAAAA,EAAiBH,OAAOC;QACsCC;IAAhF,MAAME,sBAAsBC,IAAAA,sCAAAA,EAAoDH,CAAAA,gBAAAA,cAAAA,QAAAA,cAAAA,KAAAA,IAAAA,KAAAA,IAAAA,UAAWI,EAAE,AAAFA,MAAE,QAAbJ,kBAAAA,KAAAA,IAAAA,gBAAiB,UAAUA;IAC3G,OAAOA,aAAaE;AACtB"}
|
package/lib-commonjs/index.js
CHANGED
|
@@ -9,38 +9,38 @@ function _export(target, all) {
|
|
|
9
9
|
});
|
|
10
10
|
}
|
|
11
11
|
_export(exports, {
|
|
12
|
-
useARIAButtonShorthand: function() {
|
|
13
|
-
return _index.useARIAButtonShorthand;
|
|
14
|
-
},
|
|
15
|
-
useARIAButtonProps: function() {
|
|
16
|
-
return _index.useARIAButtonProps;
|
|
17
|
-
},
|
|
18
|
-
useActiveDescendant: function() {
|
|
19
|
-
return _activedescendant.useActiveDescendant;
|
|
20
|
-
},
|
|
21
12
|
ACTIVEDESCENDANT_FOCUSVISIBLE_ATTRIBUTE: function() {
|
|
22
13
|
return _activedescendant.ACTIVEDESCENDANT_FOCUSVISIBLE_ATTRIBUTE;
|
|
23
14
|
},
|
|
24
15
|
ActiveDescendantContextProvider: function() {
|
|
25
16
|
return _activedescendant.ActiveDescendantContextProvider;
|
|
26
17
|
},
|
|
27
|
-
useActiveDescendantContext: function() {
|
|
28
|
-
return _activedescendant.useActiveDescendantContext;
|
|
29
|
-
},
|
|
30
|
-
useHasParentActiveDescendantContext: function() {
|
|
31
|
-
return _activedescendant.useHasParentActiveDescendantContext;
|
|
32
|
-
},
|
|
33
18
|
AriaLiveAnnouncer: function() {
|
|
34
19
|
return _index1.AriaLiveAnnouncer;
|
|
35
20
|
},
|
|
36
21
|
renderAriaLiveAnnouncer_unstable: function() {
|
|
37
22
|
return _index1.renderAriaLiveAnnouncer_unstable;
|
|
38
23
|
},
|
|
39
|
-
|
|
40
|
-
return
|
|
24
|
+
useARIAButtonProps: function() {
|
|
25
|
+
return _index.useARIAButtonProps;
|
|
26
|
+
},
|
|
27
|
+
useARIAButtonShorthand: function() {
|
|
28
|
+
return _index.useARIAButtonShorthand;
|
|
29
|
+
},
|
|
30
|
+
useActiveDescendant: function() {
|
|
31
|
+
return _activedescendant.useActiveDescendant;
|
|
32
|
+
},
|
|
33
|
+
useActiveDescendantContext: function() {
|
|
34
|
+
return _activedescendant.useActiveDescendantContext;
|
|
41
35
|
},
|
|
42
36
|
useAriaLiveAnnouncerContextValues_unstable: function() {
|
|
43
37
|
return _index1.useAriaLiveAnnouncerContextValues_unstable;
|
|
38
|
+
},
|
|
39
|
+
useAriaLiveAnnouncer_unstable: function() {
|
|
40
|
+
return _index1.useAriaLiveAnnouncer_unstable;
|
|
41
|
+
},
|
|
42
|
+
useHasParentActiveDescendantContext: function() {
|
|
43
|
+
return _activedescendant.useHasParentActiveDescendantContext;
|
|
44
44
|
}
|
|
45
45
|
});
|
|
46
46
|
const _index = require("./button/index");
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["index.
|
|
1
|
+
{"version":3,"sources":["index.ts"],"sourcesContent":["export {\n // eslint-disable-next-line deprecation/deprecation\n useARIAButtonShorthand,\n useARIAButtonProps,\n} from './button/index';\nexport {\n useActiveDescendant,\n ACTIVEDESCENDANT_FOCUSVISIBLE_ATTRIBUTE,\n ActiveDescendantContextProvider,\n useActiveDescendantContext,\n useHasParentActiveDescendantContext,\n} from './activedescendant';\nexport type {\n ActiveDescendantImperativeRef,\n ActiveDescendantOptions,\n ActiveDescendantContextValue,\n ActiveDescendantChangeEvent,\n} from './activedescendant';\nexport type {\n ARIAButtonSlotProps,\n ARIAButtonProps,\n ARIAButtonResultProps,\n ARIAButtonType,\n ARIAButtonElement,\n ARIAButtonElementIntersection,\n ARIAButtonAlteredProps,\n} from './button/index';\n\nexport {\n AriaLiveAnnouncer,\n renderAriaLiveAnnouncer_unstable,\n useAriaLiveAnnouncer_unstable,\n useAriaLiveAnnouncerContextValues_unstable,\n} from './AriaLiveAnnouncer/index';\nexport type { AriaLiveAnnouncerProps, AriaLiveAnnouncerState } from './AriaLiveAnnouncer/index';\n"],"names":["ACTIVEDESCENDANT_FOCUSVISIBLE_ATTRIBUTE","ActiveDescendantContextProvider","AriaLiveAnnouncer","renderAriaLiveAnnouncer_unstable","useARIAButtonProps","useARIAButtonShorthand","useActiveDescendant","useActiveDescendantContext","useAriaLiveAnnouncerContextValues_unstable","useAriaLiveAnnouncer_unstable","useHasParentActiveDescendantContext"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAOEA,uCAAuC;eAAvCA,yDAAuC;;IACvCC,+BAA+B;eAA/BA,iDAA+B;;IAqB/BC,iBAAiB;eAAjBA,yBAAiB;;IACjBC,gCAAgC;eAAhCA,wCAAgC;;IA3BhCC,kBAAkB;eAAlBA,yBAAkB;;IADlBC,sBAAsB;eAAtBA,6BAAsB;;IAItBC,mBAAmB;eAAnBA,qCAAmB;;IAGnBC,0BAA0B;eAA1BA,4CAA0B;;IAuB1BC,0CAA0C;eAA1CA,kDAA0C;;IAD1CC,6BAA6B;eAA7BA,qCAA6B;;IArB7BC,mCAAmC;eAAnCA,qDAAmC;;;uBAN9B;kCAOA;wBAsBA"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fluentui/react-aria",
|
|
3
|
-
"version": "9.
|
|
3
|
+
"version": "9.13.1",
|
|
4
4
|
"description": "React helper to ensure ARIA",
|
|
5
5
|
"main": "lib-commonjs/index.js",
|
|
6
6
|
"module": "lib/index.js",
|
|
@@ -33,10 +33,10 @@
|
|
|
33
33
|
},
|
|
34
34
|
"dependencies": {
|
|
35
35
|
"@fluentui/keyboard-keys": "^9.0.7",
|
|
36
|
-
"@fluentui/react-shared-contexts": "^9.19.
|
|
37
|
-
"@fluentui/react-jsx-runtime": "^9.0.
|
|
38
|
-
"@fluentui/react-tabster": "^9.22.
|
|
39
|
-
"@fluentui/react-utilities": "^9.18.
|
|
36
|
+
"@fluentui/react-shared-contexts": "^9.19.1",
|
|
37
|
+
"@fluentui/react-jsx-runtime": "^9.0.41",
|
|
38
|
+
"@fluentui/react-tabster": "^9.22.2",
|
|
39
|
+
"@fluentui/react-utilities": "^9.18.12",
|
|
40
40
|
"@swc/helpers": "^0.5.1"
|
|
41
41
|
},
|
|
42
42
|
"peerDependencies": {
|