@fluentui/react-teaching-popover 9.2.3 → 9.3.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +27 -2
- package/dist/index.d.ts +26 -19
- package/lib/components/TeachingPopoverCarousel/Carousel/Carousel.js +19 -17
- package/lib/components/TeachingPopoverCarousel/Carousel/Carousel.js.map +1 -1
- package/lib/components/TeachingPopoverCarousel/Carousel/Carousel.types.js.map +1 -1
- package/lib/components/TeachingPopoverCarousel/TeachingPopoverCarousel.types.js.map +1 -1
- package/lib/components/TeachingPopoverCarousel/useTeachingPopoverCarousel.js +1 -0
- package/lib/components/TeachingPopoverCarousel/useTeachingPopoverCarousel.js.map +1 -1
- package/lib-commonjs/components/TeachingPopoverCarousel/Carousel/Carousel.js +18 -16
- package/lib-commonjs/components/TeachingPopoverCarousel/Carousel/Carousel.js.map +1 -1
- package/lib-commonjs/components/TeachingPopoverCarousel/Carousel/Carousel.types.js.map +1 -1
- package/lib-commonjs/components/TeachingPopoverCarousel/TeachingPopoverCarousel.types.js.map +1 -1
- package/lib-commonjs/components/TeachingPopoverCarousel/useTeachingPopoverCarousel.js +1 -0
- package/lib-commonjs/components/TeachingPopoverCarousel/useTeachingPopoverCarousel.js.map +1 -1
- package/package.json +5 -5
package/CHANGELOG.md
CHANGED
|
@@ -1,12 +1,37 @@
|
|
|
1
1
|
# Change Log - @fluentui/react-teaching-popover
|
|
2
2
|
|
|
3
|
-
This log was last generated on
|
|
3
|
+
This log was last generated on Fri, 21 Feb 2025 14:30:47 GMT and should not be manually modified.
|
|
4
4
|
|
|
5
5
|
<!-- Start content -->
|
|
6
6
|
|
|
7
|
+
## [9.3.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-teaching-popover_v9.3.0)
|
|
8
|
+
|
|
9
|
+
Fri, 21 Feb 2025 14:30:47 GMT
|
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-teaching-popover_v9.2.4..@fluentui/react-teaching-popover_v9.3.0)
|
|
11
|
+
|
|
12
|
+
### Minor changes
|
|
13
|
+
|
|
14
|
+
- Bump @fluentui/react-popover to v9.10.0 ([PR #33876](https://github.com/microsoft/fluentui/pull/33876) by beachball)
|
|
15
|
+
- Bump @fluentui/react-button to v9.4.0 ([PR #33876](https://github.com/microsoft/fluentui/pull/33876) by beachball)
|
|
16
|
+
- Bump @fluentui/react-tabster to v9.24.0 ([PR #33876](https://github.com/microsoft/fluentui/pull/33876) by beachball)
|
|
17
|
+
- Bump @fluentui/react-aria to v9.14.0 ([PR #33876](https://github.com/microsoft/fluentui/pull/33876) by beachball)
|
|
18
|
+
|
|
19
|
+
### Patches
|
|
20
|
+
|
|
21
|
+
- fix: TeachingPopoverCarousel fires announce() messages on slide change ([PR #33833](https://github.com/microsoft/fluentui/pull/33833) by sarah.higley@microsoft.com)
|
|
22
|
+
|
|
23
|
+
## [9.2.4](https://github.com/microsoft/fluentui/tree/@fluentui/react-teaching-popover_v9.2.4)
|
|
24
|
+
|
|
25
|
+
Fri, 07 Feb 2025 10:42:12 GMT
|
|
26
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-teaching-popover_v9.2.3..@fluentui/react-teaching-popover_v9.2.4)
|
|
27
|
+
|
|
28
|
+
### Patches
|
|
29
|
+
|
|
30
|
+
- Bump @fluentui/react-button to v9.3.102 ([PR #33797](https://github.com/microsoft/fluentui/pull/33797) by beachball)
|
|
31
|
+
|
|
7
32
|
## [9.2.3](https://github.com/microsoft/fluentui/tree/@fluentui/react-teaching-popover_v9.2.3)
|
|
8
33
|
|
|
9
|
-
Tue, 28 Jan 2025 21:
|
|
34
|
+
Tue, 28 Jan 2025 21:26:35 GMT
|
|
10
35
|
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-teaching-popover_v9.2.2..@fluentui/react-teaching-popover_v9.2.3)
|
|
11
36
|
|
|
12
37
|
### Patches
|
package/dist/index.d.ts
CHANGED
|
@@ -7,7 +7,7 @@ import { ButtonState } from '@fluentui/react-button';
|
|
|
7
7
|
import { ComponentProps } from '@fluentui/react-utilities';
|
|
8
8
|
import { ComponentState } from '@fluentui/react-utilities';
|
|
9
9
|
import { EventData } from '@fluentui/react-utilities';
|
|
10
|
-
import
|
|
10
|
+
import { EventHandler } from '@fluentui/react-utilities';
|
|
11
11
|
import type { ForwardRefComponent } from '@fluentui/react-utilities';
|
|
12
12
|
import { JSXElementConstructor } from 'react';
|
|
13
13
|
import { PopoverContextValue } from '@fluentui/react-popover';
|
|
@@ -383,24 +383,7 @@ export declare type TeachingPopoverCarouselPageCountState = ComponentState<Teach
|
|
|
383
383
|
/**
|
|
384
384
|
* TeachingPopoverCarousel Props
|
|
385
385
|
*/
|
|
386
|
-
export declare type TeachingPopoverCarouselProps = ComponentProps<TeachingPopoverCarouselSlots> &
|
|
387
|
-
/**
|
|
388
|
-
* The initial page to display in uncontrolled mode.
|
|
389
|
-
*/
|
|
390
|
-
defaultValue?: string;
|
|
391
|
-
/**
|
|
392
|
-
* The value of the currently active page.
|
|
393
|
-
*/
|
|
394
|
-
value?: string;
|
|
395
|
-
/**
|
|
396
|
-
* Callback to notify a page change.
|
|
397
|
-
*/
|
|
398
|
-
onValueChange?: EventHandler<CarouselValueChangeData>;
|
|
399
|
-
/**
|
|
400
|
-
* Callback to notify when the final button step of a carousel has been activated.
|
|
401
|
-
*/
|
|
402
|
-
onFinish?: EventHandler<CarouselValueChangeData>;
|
|
403
|
-
};
|
|
386
|
+
export declare type TeachingPopoverCarouselProps = ComponentProps<TeachingPopoverCarouselSlots> & UseCarouselOptions;
|
|
404
387
|
|
|
405
388
|
export declare type TeachingPopoverCarouselSlots = {
|
|
406
389
|
/**
|
|
@@ -570,6 +553,30 @@ export declare type TeachingPopoverTriggerProps = PopoverTriggerProps;
|
|
|
570
553
|
*/
|
|
571
554
|
export declare type TeachingPopoverTriggerState = PopoverTriggerState;
|
|
572
555
|
|
|
556
|
+
declare type UseCarouselOptions = {
|
|
557
|
+
/**
|
|
558
|
+
* Localizes the string used to announce carousel page changes to screen reader users
|
|
559
|
+
* Defaults to: undefined
|
|
560
|
+
*/
|
|
561
|
+
announcement?: (newValue: string) => string;
|
|
562
|
+
/**
|
|
563
|
+
* The initial page to display in uncontrolled mode.
|
|
564
|
+
*/
|
|
565
|
+
defaultValue?: string;
|
|
566
|
+
/**
|
|
567
|
+
* The value of the currently active page.
|
|
568
|
+
*/
|
|
569
|
+
value?: string;
|
|
570
|
+
/**
|
|
571
|
+
* Callback to notify a page change.
|
|
572
|
+
*/
|
|
573
|
+
onValueChange?: EventHandler<CarouselValueChangeData>;
|
|
574
|
+
/**
|
|
575
|
+
* Callback to notify when the final button step of a carousel has been activated.
|
|
576
|
+
*/
|
|
577
|
+
onFinish?: EventHandler<CarouselValueChangeData>;
|
|
578
|
+
};
|
|
579
|
+
|
|
573
580
|
export declare const useTeachingPopover_unstable: (props: TeachingPopoverProps) => TeachingPopoverState;
|
|
574
581
|
|
|
575
582
|
/**
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
2
|
import { isHTMLElement, useMergedRefs, useControllableState, useEventCallback } from '@fluentui/react-utilities';
|
|
3
|
-
import { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';
|
|
3
|
+
import { useAnnounce, useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';
|
|
4
4
|
import { CAROUSEL_ITEM } from './constants';
|
|
5
5
|
import { useCarouselWalker_unstable } from './useCarouselWalker';
|
|
6
6
|
import { createCarouselStore } from './createCarouselStore';
|
|
@@ -8,7 +8,7 @@ import { createCarouselStore } from './createCarouselStore';
|
|
|
8
8
|
// For now, we won't export this publicly, is only for internal TeachingPopover use until stabilized.
|
|
9
9
|
export function useCarousel_unstable(options) {
|
|
10
10
|
'use no memo';
|
|
11
|
-
const { onValueChange, onFinish } = options;
|
|
11
|
+
const { announcement, onValueChange, onFinish } = options;
|
|
12
12
|
const { targetDocument } = useFluent();
|
|
13
13
|
const win = targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.defaultView;
|
|
14
14
|
const { ref: carouselRef, walker: carouselWalker } = useCarouselWalker_unstable();
|
|
@@ -19,6 +19,7 @@ export function useCarousel_unstable(options) {
|
|
|
19
19
|
initialState: null
|
|
20
20
|
});
|
|
21
21
|
const rootRef = React.useRef(null);
|
|
22
|
+
const { announce } = useAnnounce();
|
|
22
23
|
if (process.env.NODE_ENV !== 'production') {
|
|
23
24
|
// eslint-disable-next-line react-hooks/rules-of-hooks
|
|
24
25
|
React.useEffect(()=>{
|
|
@@ -90,6 +91,20 @@ export function useCarousel_unstable(options) {
|
|
|
90
91
|
store,
|
|
91
92
|
win
|
|
92
93
|
]);
|
|
94
|
+
const updateSlide = useEventCallback((event, newValue)=>{
|
|
95
|
+
setValue(newValue);
|
|
96
|
+
onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange(event, {
|
|
97
|
+
event,
|
|
98
|
+
type: 'click',
|
|
99
|
+
value: newValue
|
|
100
|
+
});
|
|
101
|
+
const announceText = announcement === null || announcement === void 0 ? void 0 : announcement(newValue);
|
|
102
|
+
if (announceText) {
|
|
103
|
+
announce(announceText, {
|
|
104
|
+
polite: true
|
|
105
|
+
});
|
|
106
|
+
}
|
|
107
|
+
});
|
|
93
108
|
const selectPageByDirection = useEventCallback((event, direction)=>{
|
|
94
109
|
const active = carouselWalker.active();
|
|
95
110
|
if (!(active === null || active === void 0 ? void 0 : active.value)) {
|
|
@@ -97,12 +112,7 @@ export function useCarousel_unstable(options) {
|
|
|
97
112
|
}
|
|
98
113
|
const newPage = direction === 'prev' ? carouselWalker.prevPage(active.value) : carouselWalker.nextPage(active.value);
|
|
99
114
|
if (newPage) {
|
|
100
|
-
|
|
101
|
-
onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange(event, {
|
|
102
|
-
event,
|
|
103
|
-
type: 'click',
|
|
104
|
-
value: newPage === null || newPage === void 0 ? void 0 : newPage.value
|
|
105
|
-
});
|
|
115
|
+
updateSlide(event, newPage === null || newPage === void 0 ? void 0 : newPage.value);
|
|
106
116
|
} else {
|
|
107
117
|
onFinish === null || onFinish === void 0 ? void 0 : onFinish(event, {
|
|
108
118
|
event,
|
|
@@ -111,21 +121,13 @@ export function useCarousel_unstable(options) {
|
|
|
111
121
|
});
|
|
112
122
|
}
|
|
113
123
|
});
|
|
114
|
-
const selectPageByValue = useEventCallback((event, _value)=>{
|
|
115
|
-
setValue(_value);
|
|
116
|
-
onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange(event, {
|
|
117
|
-
event,
|
|
118
|
-
type: 'click',
|
|
119
|
-
value: _value
|
|
120
|
-
});
|
|
121
|
-
});
|
|
122
124
|
return {
|
|
123
125
|
carouselRef: useMergedRefs(rootRef, carouselRef),
|
|
124
126
|
carousel: {
|
|
125
127
|
store,
|
|
126
128
|
value,
|
|
127
129
|
selectPageByDirection,
|
|
128
|
-
selectPageByValue
|
|
130
|
+
selectPageByValue: updateSlide
|
|
129
131
|
}
|
|
130
132
|
};
|
|
131
133
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/TeachingPopoverCarousel/Carousel/Carousel.tsx"],"sourcesContent":["import * as React from 'react';\nimport {
|
|
1
|
+
{"version":3,"sources":["../src/components/TeachingPopoverCarousel/Carousel/Carousel.tsx"],"sourcesContent":["import * as React from 'react';\nimport { isHTMLElement, useMergedRefs, useControllableState, useEventCallback } from '@fluentui/react-utilities';\nimport { useAnnounce, useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\n\nimport { CAROUSEL_ITEM } from './constants';\nimport { useCarouselWalker_unstable } from './useCarouselWalker';\nimport { createCarouselStore } from './createCarouselStore';\nimport type { UseCarouselOptions } from './Carousel.types';\nimport { CarouselContextValue } from './CarouselContext';\n\n// TODO: Migrate this into an external @fluentui/carousel component\n// For now, we won't export this publicly, is only for internal TeachingPopover use until stabilized.\nexport function useCarousel_unstable(options: UseCarouselOptions) {\n 'use no memo';\n\n const { announcement, onValueChange, onFinish } = options;\n\n const { targetDocument } = useFluent();\n const win = targetDocument?.defaultView;\n const { ref: carouselRef, walker: carouselWalker } = useCarouselWalker_unstable();\n const [store] = React.useState(() => createCarouselStore());\n\n const [value, setValue] = useControllableState({\n defaultState: options.defaultValue,\n state: options.value,\n initialState: null,\n });\n const rootRef = React.useRef<HTMLDivElement>(null);\n\n const { announce } = useAnnounce();\n\n if (process.env.NODE_ENV !== 'production') {\n // eslint-disable-next-line react-hooks/rules-of-hooks\n React.useEffect(() => {\n if (value === null) {\n // eslint-disable-next-line no-console\n console.error(\n 'useCarousel: Carousel needs to have a `defaultValue` or `value` prop set. If you want to control the value, use the `value` prop.',\n );\n }\n }, [value]);\n }\n\n React.useEffect(() => {\n const allItems = rootRef.current?.querySelectorAll(`[${CAROUSEL_ITEM}]`)!;\n\n for (let i = 0; i < allItems.length; i++) {\n store.addValue(allItems.item(i).getAttribute(CAROUSEL_ITEM)!);\n }\n\n return () => {\n store.clear();\n };\n }, [store]);\n\n React.useEffect(() => {\n if (!win) {\n return;\n }\n\n const config: MutationObserverInit = {\n attributes: true,\n attributeFilter: [CAROUSEL_ITEM],\n childList: true,\n subtree: true,\n };\n\n // Callback function to execute when mutations are observed\n const callback: MutationCallback = mutationList => {\n for (const mutation of mutationList) {\n for (const addedNode of Array.from(mutation.addedNodes)) {\n if (isHTMLElement(addedNode) && addedNode.hasAttribute(CAROUSEL_ITEM)) {\n const newValue = addedNode.getAttribute(CAROUSEL_ITEM)!;\n const newNode = carouselWalker.find(newValue);\n if (!newNode?.value) {\n return;\n }\n\n const previousNode = carouselWalker.prevPage(newNode?.value);\n store.insertValue(newValue, previousNode?.value ?? null);\n }\n }\n\n for (const removedNode of Array.from(mutation.removedNodes)) {\n if (isHTMLElement(removedNode) && removedNode?.hasAttribute(CAROUSEL_ITEM)) {\n const removedValue = removedNode.getAttribute(CAROUSEL_ITEM)!;\n\n store.removeValue(removedValue);\n }\n }\n }\n };\n\n // Create an observer instance linked to the callback function\n const observer = new win.MutationObserver(callback);\n\n // Start observing the target node for configured mutations\n observer.observe(rootRef.current!, config);\n\n // Later, you can stop observing\n return () => {\n observer.disconnect();\n };\n }, [carouselWalker, store, win]);\n\n const updateSlide = useEventCallback(\n (event: React.MouseEvent<HTMLButtonElement | HTMLAnchorElement>, newValue: string) => {\n setValue(newValue);\n onValueChange?.(event, { event, type: 'click', value: newValue });\n\n const announceText = announcement?.(newValue);\n if (announceText) {\n announce(announceText, { polite: true });\n }\n },\n );\n\n const selectPageByDirection: CarouselContextValue['selectPageByDirection'] = useEventCallback((event, direction) => {\n const active = carouselWalker.active();\n\n if (!active?.value) {\n return;\n }\n\n const newPage =\n direction === 'prev' ? carouselWalker.prevPage(active.value) : carouselWalker.nextPage(active.value);\n\n if (newPage) {\n updateSlide(event, newPage?.value);\n } else {\n onFinish?.(event, { event, type: 'click', value: active?.value });\n }\n });\n\n return {\n carouselRef: useMergedRefs(rootRef, carouselRef),\n carousel: {\n store,\n value,\n selectPageByDirection,\n selectPageByValue: updateSlide,\n },\n };\n}\n"],"names":["React","isHTMLElement","useMergedRefs","useControllableState","useEventCallback","useAnnounce","useFluent_unstable","useFluent","CAROUSEL_ITEM","useCarouselWalker_unstable","createCarouselStore","useCarousel_unstable","options","announcement","onValueChange","onFinish","targetDocument","win","defaultView","ref","carouselRef","walker","carouselWalker","store","useState","value","setValue","defaultState","defaultValue","state","initialState","rootRef","useRef","announce","process","env","NODE_ENV","useEffect","console","error","allItems","current","querySelectorAll","i","length","addValue","item","getAttribute","clear","config","attributes","attributeFilter","childList","subtree","callback","mutationList","mutation","addedNode","Array","from","addedNodes","hasAttribute","newValue","newNode","find","previousNode","prevPage","insertValue","removedNode","removedNodes","removedValue","removeValue","observer","MutationObserver","observe","disconnect","updateSlide","event","type","announceText","polite","selectPageByDirection","direction","active","newPage","nextPage","carousel","selectPageByValue"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/TeachingPopoverCarousel/Carousel/Carousel.types.ts"],"sourcesContent":["import * as React from 'react';\nimport { EventData } from '@fluentui/react-utilities';\n\nexport type CarouselStore = {\n clear: () => void;\n addValue: (value: string) => void;\n insertValue: (value: string, prev: string | null) => void;\n removeValue: (value: string) => void;\n subscribe: (listener: () => void) => () => void;\n getSnapshot: () => string[];\n};\n\nexport type CarouselItem = {\n el: HTMLElement;\n value: string | null;\n};\n\nexport type CarouselValueChangeData = EventData<'click', React.MouseEvent<HTMLButtonElement | HTMLAnchorElement>> & {\n /**\n * The value to be set after event has occurred.\n */\n value?: string;\n};\n"],"names":["React"],"rangeMappings":"","mappings":"AAAA,YAAYA,WAAW,QAAQ"}
|
|
1
|
+
{"version":3,"sources":["../src/components/TeachingPopoverCarousel/Carousel/Carousel.types.ts"],"sourcesContent":["import * as React from 'react';\nimport { EventData, EventHandler } from '@fluentui/react-utilities';\n\nexport type CarouselStore = {\n clear: () => void;\n addValue: (value: string) => void;\n insertValue: (value: string, prev: string | null) => void;\n removeValue: (value: string) => void;\n subscribe: (listener: () => void) => () => void;\n getSnapshot: () => string[];\n};\n\nexport type CarouselItem = {\n el: HTMLElement;\n value: string | null;\n};\n\nexport type UseCarouselOptions = {\n /**\n * Localizes the string used to announce carousel page changes to screen reader users\n * Defaults to: undefined\n */\n announcement?: (newValue: string) => string;\n\n /**\n * The initial page to display in uncontrolled mode.\n */\n defaultValue?: string;\n\n /**\n * The value of the currently active page.\n */\n value?: string;\n\n /**\n * Callback to notify a page change.\n */\n onValueChange?: EventHandler<CarouselValueChangeData>;\n\n /**\n * Callback to notify when the final button step of a carousel has been activated.\n */\n onFinish?: EventHandler<CarouselValueChangeData>;\n};\n\nexport type CarouselValueChangeData = EventData<'click', React.MouseEvent<HTMLButtonElement | HTMLAnchorElement>> & {\n /**\n * The value to be set after event has occurred.\n */\n value?: string;\n};\n"],"names":["React"],"rangeMappings":"","mappings":"AAAA,YAAYA,WAAW,QAAQ"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/TeachingPopoverCarousel/TeachingPopoverCarousel.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState,
|
|
1
|
+
{"version":3,"sources":["../src/components/TeachingPopoverCarousel/TeachingPopoverCarousel.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport { type PopoverContextValue } from '@fluentui/react-popover';\n\nimport { type CarouselContextValue } from './Carousel/CarouselContext';\nimport type { UseCarouselOptions } from './Carousel/Carousel.types';\n\nexport type TeachingPopoverCarouselSlots = {\n /**\n * The element wrapping carousel pages and navigation.\n */\n root: NonNullable<Slot<'div'>>;\n};\n\n/**\n * TeachingPopoverCarousel Props\n */\nexport type TeachingPopoverCarouselProps = ComponentProps<TeachingPopoverCarouselSlots> & UseCarouselOptions;\n\n/**\n * TeachingPopoverCarousel State and Context Hooks\n */\nexport type TeachingPopoverCarouselState = ComponentState<Required<TeachingPopoverCarouselSlots>> &\n Partial<Pick<PopoverContextValue, 'appearance'>> &\n CarouselContextValue;\n\n/**\n * Context shared between TeachingPopoverCarousel and its children components\n */\nexport type TeachingPopoverCarouselContextValues = {\n carousel: CarouselContextValue;\n};\n"],"names":[],"rangeMappings":";;","mappings":"AAyBA;;CAEC,GACD,WAEE"}
|
|
@@ -10,6 +10,7 @@ export const useTeachingPopoverCarousel_unstable = (props, ref)=>{
|
|
|
10
10
|
toggleOpen(event);
|
|
11
11
|
});
|
|
12
12
|
const { carousel, carouselRef } = useCarousel_unstable({
|
|
13
|
+
announcement: props.announcement,
|
|
13
14
|
defaultValue: props.defaultValue,
|
|
14
15
|
value: props.value,
|
|
15
16
|
onValueChange: props.onValueChange,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/TeachingPopoverCarousel/useTeachingPopoverCarousel.ts"],"sourcesContent":["import * as React from 'react';\nimport { getIntrinsicElementProps, slot, useEventCallback, useMergedRefs } from '@fluentui/react-utilities';\nimport type { TeachingPopoverCarouselProps, TeachingPopoverCarouselState } from './TeachingPopoverCarousel.types';\nimport { usePopoverContext_unstable } from '@fluentui/react-popover';\nimport { useCarousel_unstable
|
|
1
|
+
{"version":3,"sources":["../src/components/TeachingPopoverCarousel/useTeachingPopoverCarousel.ts"],"sourcesContent":["import * as React from 'react';\nimport { getIntrinsicElementProps, slot, useEventCallback, useMergedRefs } from '@fluentui/react-utilities';\nimport type { TeachingPopoverCarouselProps, TeachingPopoverCarouselState } from './TeachingPopoverCarousel.types';\nimport { usePopoverContext_unstable } from '@fluentui/react-popover';\nimport { useCarousel_unstable } from './Carousel/Carousel';\n\nexport const useTeachingPopoverCarousel_unstable = (\n props: TeachingPopoverCarouselProps,\n ref: React.Ref<HTMLDivElement>,\n): TeachingPopoverCarouselState => {\n const toggleOpen = usePopoverContext_unstable(c => c.toggleOpen);\n const handleFinish: TeachingPopoverCarouselProps['onFinish'] = useEventCallback((event, data) => {\n props.onFinish?.(event, data);\n toggleOpen(event as React.MouseEvent<HTMLElement>);\n });\n\n const { carousel, carouselRef } = useCarousel_unstable({\n announcement: props.announcement,\n defaultValue: props.defaultValue,\n value: props.value,\n onValueChange: props.onValueChange,\n onFinish: handleFinish,\n });\n\n const appearance = usePopoverContext_unstable(context => context.appearance);\n return {\n appearance,\n components: {\n root: 'div',\n },\n root: slot.always(\n getIntrinsicElementProps('div', {\n ref: useMergedRefs(ref, carouselRef),\n ...props,\n }),\n { elementType: 'div' },\n ),\n ...carousel,\n };\n};\n"],"names":["React","getIntrinsicElementProps","slot","useEventCallback","useMergedRefs","usePopoverContext_unstable","useCarousel_unstable","useTeachingPopoverCarousel_unstable","props","ref","toggleOpen","c","handleFinish","event","data","onFinish","carousel","carouselRef","announcement","defaultValue","value","onValueChange","appearance","context","components","root","always","elementType"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,wBAAwB,EAAEC,IAAI,EAAEC,gBAAgB,EAAEC,aAAa,QAAQ,4BAA4B;AAE5G,SAASC,0BAA0B,QAAQ,0BAA0B;AACrE,SAASC,oBAAoB,QAAQ,sBAAsB;AAE3D,OAAO,MAAMC,sCAAsC,CACjDC,OACAC;IAEA,MAAMC,aAAaL,2BAA2BM,CAAAA,IAAKA,EAAED,UAAU;IAC/D,MAAME,eAAyDT,iBAAiB,CAACU,OAAOC;YACtFN;SAAAA,kBAAAA,MAAMO,QAAQ,cAAdP,sCAAAA,qBAAAA,OAAiBK,OAAOC;QACxBJ,WAAWG;IACb;IAEA,MAAM,EAAEG,QAAQ,EAAEC,WAAW,EAAE,GAAGX,qBAAqB;QACrDY,cAAcV,MAAMU,YAAY;QAChCC,cAAcX,MAAMW,YAAY;QAChCC,OAAOZ,MAAMY,KAAK;QAClBC,eAAeb,MAAMa,aAAa;QAClCN,UAAUH;IACZ;IAEA,MAAMU,aAAajB,2BAA2BkB,CAAAA,UAAWA,QAAQD,UAAU;IAC3E,OAAO;QACLA;QACAE,YAAY;YACVC,MAAM;QACR;QACAA,MAAMvB,KAAKwB,MAAM,CACfzB,yBAAyB,OAAO;YAC9BQ,KAAKL,cAAcK,KAAKQ;YACxB,GAAGT,KAAK;QACV,IACA;YAAEmB,aAAa;QAAM;QAEvB,GAAGX,QAAQ;IACb;AACF,EAAE"}
|
|
@@ -17,7 +17,7 @@ const _useCarouselWalker = require("./useCarouselWalker");
|
|
|
17
17
|
const _createCarouselStore = require("./createCarouselStore");
|
|
18
18
|
function useCarousel_unstable(options) {
|
|
19
19
|
'use no memo';
|
|
20
|
-
const { onValueChange, onFinish } = options;
|
|
20
|
+
const { announcement, onValueChange, onFinish } = options;
|
|
21
21
|
const { targetDocument } = (0, _reactsharedcontexts.useFluent_unstable)();
|
|
22
22
|
const win = targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.defaultView;
|
|
23
23
|
const { ref: carouselRef, walker: carouselWalker } = (0, _useCarouselWalker.useCarouselWalker_unstable)();
|
|
@@ -28,6 +28,7 @@ function useCarousel_unstable(options) {
|
|
|
28
28
|
initialState: null
|
|
29
29
|
});
|
|
30
30
|
const rootRef = _react.useRef(null);
|
|
31
|
+
const { announce } = (0, _reactsharedcontexts.useAnnounce)();
|
|
31
32
|
if (process.env.NODE_ENV !== 'production') {
|
|
32
33
|
// eslint-disable-next-line react-hooks/rules-of-hooks
|
|
33
34
|
_react.useEffect(()=>{
|
|
@@ -99,6 +100,20 @@ function useCarousel_unstable(options) {
|
|
|
99
100
|
store,
|
|
100
101
|
win
|
|
101
102
|
]);
|
|
103
|
+
const updateSlide = (0, _reactutilities.useEventCallback)((event, newValue)=>{
|
|
104
|
+
setValue(newValue);
|
|
105
|
+
onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange(event, {
|
|
106
|
+
event,
|
|
107
|
+
type: 'click',
|
|
108
|
+
value: newValue
|
|
109
|
+
});
|
|
110
|
+
const announceText = announcement === null || announcement === void 0 ? void 0 : announcement(newValue);
|
|
111
|
+
if (announceText) {
|
|
112
|
+
announce(announceText, {
|
|
113
|
+
polite: true
|
|
114
|
+
});
|
|
115
|
+
}
|
|
116
|
+
});
|
|
102
117
|
const selectPageByDirection = (0, _reactutilities.useEventCallback)((event, direction)=>{
|
|
103
118
|
const active = carouselWalker.active();
|
|
104
119
|
if (!(active === null || active === void 0 ? void 0 : active.value)) {
|
|
@@ -106,12 +121,7 @@ function useCarousel_unstable(options) {
|
|
|
106
121
|
}
|
|
107
122
|
const newPage = direction === 'prev' ? carouselWalker.prevPage(active.value) : carouselWalker.nextPage(active.value);
|
|
108
123
|
if (newPage) {
|
|
109
|
-
|
|
110
|
-
onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange(event, {
|
|
111
|
-
event,
|
|
112
|
-
type: 'click',
|
|
113
|
-
value: newPage === null || newPage === void 0 ? void 0 : newPage.value
|
|
114
|
-
});
|
|
124
|
+
updateSlide(event, newPage === null || newPage === void 0 ? void 0 : newPage.value);
|
|
115
125
|
} else {
|
|
116
126
|
onFinish === null || onFinish === void 0 ? void 0 : onFinish(event, {
|
|
117
127
|
event,
|
|
@@ -120,21 +130,13 @@ function useCarousel_unstable(options) {
|
|
|
120
130
|
});
|
|
121
131
|
}
|
|
122
132
|
});
|
|
123
|
-
const selectPageByValue = (0, _reactutilities.useEventCallback)((event, _value)=>{
|
|
124
|
-
setValue(_value);
|
|
125
|
-
onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange(event, {
|
|
126
|
-
event,
|
|
127
|
-
type: 'click',
|
|
128
|
-
value: _value
|
|
129
|
-
});
|
|
130
|
-
});
|
|
131
133
|
return {
|
|
132
134
|
carouselRef: (0, _reactutilities.useMergedRefs)(rootRef, carouselRef),
|
|
133
135
|
carousel: {
|
|
134
136
|
store,
|
|
135
137
|
value,
|
|
136
138
|
selectPageByDirection,
|
|
137
|
-
selectPageByValue
|
|
139
|
+
selectPageByValue: updateSlide
|
|
138
140
|
}
|
|
139
141
|
};
|
|
140
142
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/TeachingPopoverCarousel/Carousel/Carousel.tsx"],"sourcesContent":["import * as React from 'react';\nimport {
|
|
1
|
+
{"version":3,"sources":["../src/components/TeachingPopoverCarousel/Carousel/Carousel.tsx"],"sourcesContent":["import * as React from 'react';\nimport { isHTMLElement, useMergedRefs, useControllableState, useEventCallback } from '@fluentui/react-utilities';\nimport { useAnnounce, useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\n\nimport { CAROUSEL_ITEM } from './constants';\nimport { useCarouselWalker_unstable } from './useCarouselWalker';\nimport { createCarouselStore } from './createCarouselStore';\nimport type { UseCarouselOptions } from './Carousel.types';\nimport { CarouselContextValue } from './CarouselContext';\n\n// TODO: Migrate this into an external @fluentui/carousel component\n// For now, we won't export this publicly, is only for internal TeachingPopover use until stabilized.\nexport function useCarousel_unstable(options: UseCarouselOptions) {\n 'use no memo';\n\n const { announcement, onValueChange, onFinish } = options;\n\n const { targetDocument } = useFluent();\n const win = targetDocument?.defaultView;\n const { ref: carouselRef, walker: carouselWalker } = useCarouselWalker_unstable();\n const [store] = React.useState(() => createCarouselStore());\n\n const [value, setValue] = useControllableState({\n defaultState: options.defaultValue,\n state: options.value,\n initialState: null,\n });\n const rootRef = React.useRef<HTMLDivElement>(null);\n\n const { announce } = useAnnounce();\n\n if (process.env.NODE_ENV !== 'production') {\n // eslint-disable-next-line react-hooks/rules-of-hooks\n React.useEffect(() => {\n if (value === null) {\n // eslint-disable-next-line no-console\n console.error(\n 'useCarousel: Carousel needs to have a `defaultValue` or `value` prop set. If you want to control the value, use the `value` prop.',\n );\n }\n }, [value]);\n }\n\n React.useEffect(() => {\n const allItems = rootRef.current?.querySelectorAll(`[${CAROUSEL_ITEM}]`)!;\n\n for (let i = 0; i < allItems.length; i++) {\n store.addValue(allItems.item(i).getAttribute(CAROUSEL_ITEM)!);\n }\n\n return () => {\n store.clear();\n };\n }, [store]);\n\n React.useEffect(() => {\n if (!win) {\n return;\n }\n\n const config: MutationObserverInit = {\n attributes: true,\n attributeFilter: [CAROUSEL_ITEM],\n childList: true,\n subtree: true,\n };\n\n // Callback function to execute when mutations are observed\n const callback: MutationCallback = mutationList => {\n for (const mutation of mutationList) {\n for (const addedNode of Array.from(mutation.addedNodes)) {\n if (isHTMLElement(addedNode) && addedNode.hasAttribute(CAROUSEL_ITEM)) {\n const newValue = addedNode.getAttribute(CAROUSEL_ITEM)!;\n const newNode = carouselWalker.find(newValue);\n if (!newNode?.value) {\n return;\n }\n\n const previousNode = carouselWalker.prevPage(newNode?.value);\n store.insertValue(newValue, previousNode?.value ?? null);\n }\n }\n\n for (const removedNode of Array.from(mutation.removedNodes)) {\n if (isHTMLElement(removedNode) && removedNode?.hasAttribute(CAROUSEL_ITEM)) {\n const removedValue = removedNode.getAttribute(CAROUSEL_ITEM)!;\n\n store.removeValue(removedValue);\n }\n }\n }\n };\n\n // Create an observer instance linked to the callback function\n const observer = new win.MutationObserver(callback);\n\n // Start observing the target node for configured mutations\n observer.observe(rootRef.current!, config);\n\n // Later, you can stop observing\n return () => {\n observer.disconnect();\n };\n }, [carouselWalker, store, win]);\n\n const updateSlide = useEventCallback(\n (event: React.MouseEvent<HTMLButtonElement | HTMLAnchorElement>, newValue: string) => {\n setValue(newValue);\n onValueChange?.(event, { event, type: 'click', value: newValue });\n\n const announceText = announcement?.(newValue);\n if (announceText) {\n announce(announceText, { polite: true });\n }\n },\n );\n\n const selectPageByDirection: CarouselContextValue['selectPageByDirection'] = useEventCallback((event, direction) => {\n const active = carouselWalker.active();\n\n if (!active?.value) {\n return;\n }\n\n const newPage =\n direction === 'prev' ? carouselWalker.prevPage(active.value) : carouselWalker.nextPage(active.value);\n\n if (newPage) {\n updateSlide(event, newPage?.value);\n } else {\n onFinish?.(event, { event, type: 'click', value: active?.value });\n }\n });\n\n return {\n carouselRef: useMergedRefs(rootRef, carouselRef),\n carousel: {\n store,\n value,\n selectPageByDirection,\n selectPageByValue: updateSlide,\n },\n };\n}\n"],"names":["useCarousel_unstable","options","announcement","onValueChange","onFinish","targetDocument","useFluent","win","defaultView","ref","carouselRef","walker","carouselWalker","useCarouselWalker_unstable","store","React","useState","createCarouselStore","value","setValue","useControllableState","defaultState","defaultValue","state","initialState","rootRef","useRef","announce","useAnnounce","process","env","NODE_ENV","useEffect","console","error","allItems","current","querySelectorAll","CAROUSEL_ITEM","i","length","addValue","item","getAttribute","clear","config","attributes","attributeFilter","childList","subtree","callback","mutationList","mutation","addedNode","Array","from","addedNodes","isHTMLElement","hasAttribute","newValue","newNode","find","previousNode","prevPage","insertValue","removedNode","removedNodes","removedValue","removeValue","observer","MutationObserver","observe","disconnect","updateSlide","useEventCallback","event","type","announceText","polite","selectPageByDirection","direction","active","newPage","nextPage","useMergedRefs","carousel","selectPageByValue"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/TeachingPopoverCarousel/Carousel/Carousel.types.ts"],"sourcesContent":["import * as React from 'react';\nimport { EventData } from '@fluentui/react-utilities';\n\nexport type CarouselStore = {\n clear: () => void;\n addValue: (value: string) => void;\n insertValue: (value: string, prev: string | null) => void;\n removeValue: (value: string) => void;\n subscribe: (listener: () => void) => () => void;\n getSnapshot: () => string[];\n};\n\nexport type CarouselItem = {\n el: HTMLElement;\n value: string | null;\n};\n\nexport type CarouselValueChangeData = EventData<'click', React.MouseEvent<HTMLButtonElement | HTMLAnchorElement>> & {\n /**\n * The value to be set after event has occurred.\n */\n value?: string;\n};\n"],"names":[],"rangeMappings":";;;;;","mappings":";;;;;iEAAuB"}
|
|
1
|
+
{"version":3,"sources":["../src/components/TeachingPopoverCarousel/Carousel/Carousel.types.ts"],"sourcesContent":["import * as React from 'react';\nimport { EventData, EventHandler } from '@fluentui/react-utilities';\n\nexport type CarouselStore = {\n clear: () => void;\n addValue: (value: string) => void;\n insertValue: (value: string, prev: string | null) => void;\n removeValue: (value: string) => void;\n subscribe: (listener: () => void) => () => void;\n getSnapshot: () => string[];\n};\n\nexport type CarouselItem = {\n el: HTMLElement;\n value: string | null;\n};\n\nexport type UseCarouselOptions = {\n /**\n * Localizes the string used to announce carousel page changes to screen reader users\n * Defaults to: undefined\n */\n announcement?: (newValue: string) => string;\n\n /**\n * The initial page to display in uncontrolled mode.\n */\n defaultValue?: string;\n\n /**\n * The value of the currently active page.\n */\n value?: string;\n\n /**\n * Callback to notify a page change.\n */\n onValueChange?: EventHandler<CarouselValueChangeData>;\n\n /**\n * Callback to notify when the final button step of a carousel has been activated.\n */\n onFinish?: EventHandler<CarouselValueChangeData>;\n};\n\nexport type CarouselValueChangeData = EventData<'click', React.MouseEvent<HTMLButtonElement | HTMLAnchorElement>> & {\n /**\n * The value to be set after event has occurred.\n */\n value?: string;\n};\n"],"names":[],"rangeMappings":";;;;;","mappings":";;;;;iEAAuB"}
|
package/lib-commonjs/components/TeachingPopoverCarousel/TeachingPopoverCarousel.types.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/TeachingPopoverCarousel/TeachingPopoverCarousel.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState,
|
|
1
|
+
{"version":3,"sources":["../src/components/TeachingPopoverCarousel/TeachingPopoverCarousel.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport { type PopoverContextValue } from '@fluentui/react-popover';\n\nimport { type CarouselContextValue } from './Carousel/CarouselContext';\nimport type { UseCarouselOptions } from './Carousel/Carousel.types';\n\nexport type TeachingPopoverCarouselSlots = {\n /**\n * The element wrapping carousel pages and navigation.\n */\n root: NonNullable<Slot<'div'>>;\n};\n\n/**\n * TeachingPopoverCarousel Props\n */\nexport type TeachingPopoverCarouselProps = ComponentProps<TeachingPopoverCarouselSlots> & UseCarouselOptions;\n\n/**\n * TeachingPopoverCarousel State and Context Hooks\n */\nexport type TeachingPopoverCarouselState = ComponentState<Required<TeachingPopoverCarouselSlots>> &\n Partial<Pick<PopoverContextValue, 'appearance'>> &\n CarouselContextValue;\n\n/**\n * Context shared between TeachingPopoverCarousel and its children components\n */\nexport type TeachingPopoverCarouselContextValues = {\n carousel: CarouselContextValue;\n};\n"],"names":[],"rangeMappings":";;","mappings":"AAyBA;;CAEC"}
|
|
@@ -21,6 +21,7 @@ const useTeachingPopoverCarousel_unstable = (props, ref)=>{
|
|
|
21
21
|
toggleOpen(event);
|
|
22
22
|
});
|
|
23
23
|
const { carousel, carouselRef } = (0, _Carousel.useCarousel_unstable)({
|
|
24
|
+
announcement: props.announcement,
|
|
24
25
|
defaultValue: props.defaultValue,
|
|
25
26
|
value: props.value,
|
|
26
27
|
onValueChange: props.onValueChange,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/TeachingPopoverCarousel/useTeachingPopoverCarousel.ts"],"sourcesContent":["import * as React from 'react';\nimport { getIntrinsicElementProps, slot, useEventCallback, useMergedRefs } from '@fluentui/react-utilities';\nimport type { TeachingPopoverCarouselProps, TeachingPopoverCarouselState } from './TeachingPopoverCarousel.types';\nimport { usePopoverContext_unstable } from '@fluentui/react-popover';\nimport { useCarousel_unstable
|
|
1
|
+
{"version":3,"sources":["../src/components/TeachingPopoverCarousel/useTeachingPopoverCarousel.ts"],"sourcesContent":["import * as React from 'react';\nimport { getIntrinsicElementProps, slot, useEventCallback, useMergedRefs } from '@fluentui/react-utilities';\nimport type { TeachingPopoverCarouselProps, TeachingPopoverCarouselState } from './TeachingPopoverCarousel.types';\nimport { usePopoverContext_unstable } from '@fluentui/react-popover';\nimport { useCarousel_unstable } from './Carousel/Carousel';\n\nexport const useTeachingPopoverCarousel_unstable = (\n props: TeachingPopoverCarouselProps,\n ref: React.Ref<HTMLDivElement>,\n): TeachingPopoverCarouselState => {\n const toggleOpen = usePopoverContext_unstable(c => c.toggleOpen);\n const handleFinish: TeachingPopoverCarouselProps['onFinish'] = useEventCallback((event, data) => {\n props.onFinish?.(event, data);\n toggleOpen(event as React.MouseEvent<HTMLElement>);\n });\n\n const { carousel, carouselRef } = useCarousel_unstable({\n announcement: props.announcement,\n defaultValue: props.defaultValue,\n value: props.value,\n onValueChange: props.onValueChange,\n onFinish: handleFinish,\n });\n\n const appearance = usePopoverContext_unstable(context => context.appearance);\n return {\n appearance,\n components: {\n root: 'div',\n },\n root: slot.always(\n getIntrinsicElementProps('div', {\n ref: useMergedRefs(ref, carouselRef),\n ...props,\n }),\n { elementType: 'div' },\n ),\n ...carousel,\n };\n};\n"],"names":["useTeachingPopoverCarousel_unstable","props","ref","toggleOpen","usePopoverContext_unstable","c","handleFinish","useEventCallback","event","data","onFinish","carousel","carouselRef","useCarousel_unstable","announcement","defaultValue","value","onValueChange","appearance","context","components","root","slot","always","getIntrinsicElementProps","useMergedRefs","elementType"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAMaA;;;eAAAA;;;;iEANU;gCACyD;8BAErC;0BACN;AAE9B,MAAMA,sCAAsC,CACjDC,OACAC;IAEA,MAAMC,aAAaC,IAAAA,wCAAAA,EAA2BC,CAAAA,IAAKA,EAAEF,UAAU;IAC/D,MAAMG,eAAyDC,IAAAA,gCAAAA,EAAiB,CAACC,OAAOC;YACtFR;QAAAA,CAAAA,kBAAAA,MAAMS,QAAQ,AAARA,MAAQ,QAAdT,oBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,gBAAAA,IAAAA,CAAAA,OAAiBO,OAAOC;QACxBN,WAAWK;IACb;IAEA,MAAM,EAAEG,QAAQ,EAAEC,WAAW,EAAE,GAAGC,IAAAA,8BAAAA,EAAqB;QACrDC,cAAcb,MAAMa,YAAY;QAChCC,cAAcd,MAAMc,YAAY;QAChCC,OAAOf,MAAMe,KAAK;QAClBC,eAAehB,MAAMgB,aAAa;QAClCP,UAAUJ;IACZ;IAEA,MAAMY,aAAad,IAAAA,wCAAAA,EAA2Be,CAAAA,UAAWA,QAAQD,UAAU;IAC3E,OAAO;QACLA;QACAE,YAAY;YACVC,MAAM;QACR;QACAA,MAAMC,oBAAAA,CAAKC,MAAM,CACfC,IAAAA,wCAAAA,EAAyB,OAAO;YAC9BtB,KAAKuB,IAAAA,6BAAAA,EAAcvB,KAAKU;YACxB,GAAGX,KAAK;QACV,IACA;YAAEyB,aAAa;QAAM;QAEvB,GAAGf,QAAQ;IACb;AACF"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fluentui/react-teaching-popover",
|
|
3
|
-
"version": "9.
|
|
3
|
+
"version": "9.3.0",
|
|
4
4
|
"description": "New fluentui react package",
|
|
5
5
|
"main": "lib-commonjs/index.js",
|
|
6
6
|
"module": "lib/index.js",
|
|
@@ -30,11 +30,11 @@
|
|
|
30
30
|
"@griffel/react": "^1.5.22",
|
|
31
31
|
"@swc/helpers": "^0.5.1",
|
|
32
32
|
"@fluentui/react-shared-contexts": "^9.21.2",
|
|
33
|
-
"@fluentui/react-popover": "^9.
|
|
34
|
-
"@fluentui/react-button": "^9.
|
|
35
|
-
"@fluentui/react-tabster": "^9.
|
|
33
|
+
"@fluentui/react-popover": "^9.10.0",
|
|
34
|
+
"@fluentui/react-button": "^9.4.0",
|
|
35
|
+
"@fluentui/react-tabster": "^9.24.0",
|
|
36
36
|
"@fluentui/react-icons": "^2.0.245",
|
|
37
|
-
"@fluentui/react-aria": "^9.
|
|
37
|
+
"@fluentui/react-aria": "^9.14.0",
|
|
38
38
|
"@fluentui/react-context-selector": "^9.1.72",
|
|
39
39
|
"use-sync-external-store": "^1.2.0"
|
|
40
40
|
},
|