@fluentui/react-teaching-popover 9.1.6 → 9.1.8

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 CHANGED
@@ -1,25 +1,54 @@
1
1
  # Change Log - @fluentui/react-teaching-popover
2
2
 
3
- This log was last generated on Thu, 23 May 2024 07:58:02 GMT and should not be manually modified.
3
+ This log was last generated on Mon, 17 Jun 2024 07:31:08 GMT and should not be manually modified.
4
4
 
5
5
  <!-- Start content -->
6
6
 
7
+ ## [9.1.8](https://github.com/microsoft/fluentui/tree/@fluentui/react-teaching-popover_v9.1.8)
8
+
9
+ Mon, 17 Jun 2024 07:31:08 GMT
10
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-teaching-popover_v9.1.7..@fluentui/react-teaching-popover_v9.1.8)
11
+
12
+ ### Patches
13
+
14
+ - Bump @fluentui/react-popover to v9.9.12 ([commit](https://github.com/microsoft/fluentui/commit/9ae683c22f2e65d94422a571ad5d3f97d0a77234) by beachball)
15
+ - Bump @fluentui/react-button to v9.3.84 ([commit](https://github.com/microsoft/fluentui/commit/9ae683c22f2e65d94422a571ad5d3f97d0a77234) by beachball)
16
+ - Bump @fluentui/react-tabster to v9.22.0 ([commit](https://github.com/microsoft/fluentui/commit/9ae683c22f2e65d94422a571ad5d3f97d0a77234) by beachball)
17
+ - Bump @fluentui/react-aria to v9.12.1 ([commit](https://github.com/microsoft/fluentui/commit/9ae683c22f2e65d94422a571ad5d3f97d0a77234) by beachball)
18
+ - Bump @fluentui/react-context-selector to v9.1.62 ([commit](https://github.com/microsoft/fluentui/commit/9ae683c22f2e65d94422a571ad5d3f97d0a77234) by beachball)
19
+
20
+ ## [9.1.7](https://github.com/microsoft/fluentui/tree/@fluentui/react-teaching-popover_v9.1.7)
21
+
22
+ Thu, 06 Jun 2024 15:26:40 GMT
23
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-teaching-popover_v9.1.6..@fluentui/react-teaching-popover_v9.1.7)
24
+
25
+ ### Patches
26
+
27
+ - Use `MutationObserver` from global context. ([PR #30967](https://github.com/microsoft/fluentui/pull/30967) by seanmonahan@microsoft.com)
28
+ - Bump @fluentui/react-jsx-runtime to v9.0.39 ([PR #31586](https://github.com/microsoft/fluentui/pull/31586) by beachball)
29
+ - Bump @fluentui/react-utilities to v9.18.10 ([PR #31586](https://github.com/microsoft/fluentui/pull/31586) by beachball)
30
+ - Bump @fluentui/react-popover to v9.9.11 ([PR #31586](https://github.com/microsoft/fluentui/pull/31586) by beachball)
31
+ - Bump @fluentui/react-button to v9.3.83 ([PR #31586](https://github.com/microsoft/fluentui/pull/31586) by beachball)
32
+ - Bump @fluentui/react-tabster to v9.21.5 ([PR #31586](https://github.com/microsoft/fluentui/pull/31586) by beachball)
33
+ - Bump @fluentui/react-aria to v9.12.0 ([PR #31586](https://github.com/microsoft/fluentui/pull/31586) by beachball)
34
+ - Bump @fluentui/react-context-selector to v9.1.61 ([PR #31586](https://github.com/microsoft/fluentui/pull/31586) by beachball)
35
+
7
36
  ## [9.1.6](https://github.com/microsoft/fluentui/tree/@fluentui/react-teaching-popover_v9.1.6)
8
37
 
9
- Thu, 23 May 2024 07:58:02 GMT
38
+ Thu, 23 May 2024 08:02:50 GMT
10
39
  [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-teaching-popover_v9.1.5..@fluentui/react-teaching-popover_v9.1.6)
11
40
 
12
41
  ### Patches
13
42
 
14
43
  - chore: replace usage of .shorthands() in styles ([PR #31458](https://github.com/microsoft/fluentui/pull/31458) by olfedias@microsoft.com)
15
- - Bump @fluentui/react-popover to v9.9.10 ([commit](https://github.com/microsoft/fluentui/commit/10e6758b203de79c53ce31ba264e137f83f50ff4) by beachball)
16
- - Bump @fluentui/react-button to v9.3.82 ([commit](https://github.com/microsoft/fluentui/commit/10e6758b203de79c53ce31ba264e137f83f50ff4) by beachball)
17
- - Bump @fluentui/react-tabster to v9.21.4 ([commit](https://github.com/microsoft/fluentui/commit/10e6758b203de79c53ce31ba264e137f83f50ff4) by beachball)
18
- - Bump @fluentui/react-aria to v9.11.4 ([commit](https://github.com/microsoft/fluentui/commit/10e6758b203de79c53ce31ba264e137f83f50ff4) by beachball)
44
+ - Bump @fluentui/react-popover to v9.9.10 ([commit](https://github.com/microsoft/fluentui/commit/03599d609e8310b08c57d1f871cffbf717d79207) by beachball)
45
+ - Bump @fluentui/react-button to v9.3.82 ([commit](https://github.com/microsoft/fluentui/commit/03599d609e8310b08c57d1f871cffbf717d79207) by beachball)
46
+ - Bump @fluentui/react-tabster to v9.21.4 ([commit](https://github.com/microsoft/fluentui/commit/03599d609e8310b08c57d1f871cffbf717d79207) by beachball)
47
+ - Bump @fluentui/react-aria to v9.11.4 ([commit](https://github.com/microsoft/fluentui/commit/03599d609e8310b08c57d1f871cffbf717d79207) by beachball)
19
48
 
20
49
  ## [9.1.5](https://github.com/microsoft/fluentui/tree/@fluentui/react-teaching-popover_v9.1.5)
21
50
 
22
- Mon, 20 May 2024 12:45:06 GMT
51
+ Mon, 20 May 2024 12:45:06 GMT
23
52
  [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-teaching-popover_v9.1.4..@fluentui/react-teaching-popover_v9.1.5)
24
53
 
25
54
  ### Patches
@@ -36,17 +65,17 @@ Mon, 20 May 2024 12:45:06 GMT
36
65
 
37
66
  ## [9.1.4](https://github.com/microsoft/fluentui/tree/@fluentui/react-teaching-popover_v9.1.4)
38
67
 
39
- Thu, 16 May 2024 09:25:19 GMT
68
+ Thu, 16 May 2024 09:25:19 GMT
40
69
  [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-teaching-popover_v9.1.3..@fluentui/react-teaching-popover_v9.1.4)
41
70
 
42
71
  ### Patches
43
72
 
44
- - chore: Upgrade react-icons version to 2.0.239 to pick up provider export map fix. ([PR #31287](https://github.com/microsoft/fluentui/pull/31287) by ololubek@microsoft.com)
73
+ - chore: Upgrade react-icons version to 2.0.239 to pick up provider export map fix. ([PR #31287](https://github.com/microsoft/fluentui/pull/31287) by ololubek@microsoft.com)
45
74
  - Bump @fluentui/react-button to v9.3.80 ([PR #31390](https://github.com/microsoft/fluentui/pull/31390) by beachball)
46
75
 
47
76
  ## [9.1.3](https://github.com/microsoft/fluentui/tree/@fluentui/react-teaching-popover_v9.1.3)
48
77
 
49
- Thu, 09 May 2024 19:35:12 GMT
78
+ Thu, 09 May 2024 19:35:12 GMT
50
79
  [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-teaching-popover_v9.1.2..@fluentui/react-teaching-popover_v9.1.3)
51
80
 
52
81
  ### Patches
@@ -58,7 +87,7 @@ Thu, 09 May 2024 19:35:12 GMT
58
87
 
59
88
  ## [9.1.2](https://github.com/microsoft/fluentui/tree/@fluentui/react-teaching-popover_v9.1.2)
60
89
 
61
- Mon, 06 May 2024 12:55:02 GMT
90
+ Mon, 06 May 2024 12:55:02 GMT
62
91
  [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-teaching-popover_v9.1.1..@fluentui/react-teaching-popover_v9.1.2)
63
92
 
64
93
  ### Patches
@@ -74,12 +103,12 @@ Mon, 06 May 2024 12:55:02 GMT
74
103
 
75
104
  ## [9.1.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-teaching-popover_v9.1.1)
76
105
 
77
- Thu, 02 May 2024 11:36:42 GMT
106
+ Thu, 02 May 2024 11:36:42 GMT
78
107
  [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-teaching-popover_v9.1.0..@fluentui/react-teaching-popover_v9.1.1)
79
108
 
80
109
  ### Patches
81
110
 
82
- - chore: upgrade @fluentui/react-icons to 2.0.237. ([PR #31139](https://github.com/microsoft/fluentui/pull/31139) by ololubek@microsoft.com)
111
+ - chore: upgrade @fluentui/react-icons to 2.0.237. ([PR #31139](https://github.com/microsoft/fluentui/pull/31139) by ololubek@microsoft.com)
83
112
  - fix: Arrow was 1px offset and incorrect box-sizing ([PR #31161](https://github.com/microsoft/fluentui/pull/31161) by edwardwang.94@gmail.com)
84
113
  - chore: fix TeachingPopover package name in LICENSE file and import path in bundle size ([PR #31159](https://github.com/microsoft/fluentui/pull/31159) by seanmonahan@microsoft.com)
85
114
  - Bump @fluentui/react-popover to v9.9.6 ([PR #31231](https://github.com/microsoft/fluentui/pull/31231) by beachball)
@@ -89,7 +118,7 @@ Thu, 02 May 2024 11:36:42 GMT
89
118
 
90
119
  ## [9.1.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-teaching-popover_v9.1.0)
91
120
 
92
- Tue, 23 Apr 2024 08:17:46 GMT
121
+ Tue, 23 Apr 2024 08:17:46 GMT
93
122
  [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-teaching-popover-preview_v0.3.0..@fluentui/react-teaching-popover_v9.1.0)
94
123
 
95
124
  ### Minor changes
@@ -106,7 +135,7 @@ Tue, 23 Apr 2024 08:17:46 GMT
106
135
 
107
136
  ## [0.3.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-teaching-popover-preview_v0.3.0)
108
137
 
109
- Wed, 17 Apr 2024 21:54:04 GMT
138
+ Wed, 17 Apr 2024 21:54:04 GMT
110
139
  [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-teaching-popover-preview_v0.2.5..@fluentui/react-teaching-popover-preview_v0.3.0)
111
140
 
112
141
  ### Minor changes
@@ -1,5 +1,6 @@
1
- import { isHTMLElement, useMergedRefs, useControllableState, useEventCallback } from '@fluentui/react-utilities';
2
1
  import * as React from 'react';
2
+ import { isHTMLElement, useMergedRefs, useControllableState, useEventCallback } from '@fluentui/react-utilities';
3
+ import { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';
3
4
  import { CAROUSEL_ITEM } from './constants';
4
5
  import { useCarouselWalker_unstable } from './useCarouselWalker';
5
6
  import { createCarouselStore } from './createCarouselStore';
@@ -7,6 +8,8 @@ import { createCarouselStore } from './createCarouselStore';
7
8
  // For now, we won't export this publicly, is only for internal TeachingPopover use until stabilized.
8
9
  export function useCarousel_unstable(options) {
9
10
  const { onValueChange, onFinish } = options;
11
+ const { targetDocument } = useFluent();
12
+ const win = targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.defaultView;
10
13
  const { ref: carouselRef, walker: carouselWalker } = useCarouselWalker_unstable();
11
14
  const [store] = React.useState(()=>createCarouselStore());
12
15
  const [value, setValue] = useControllableState({
@@ -39,6 +42,9 @@ export function useCarousel_unstable(options) {
39
42
  store
40
43
  ]);
41
44
  React.useEffect(()=>{
45
+ if (!win) {
46
+ return;
47
+ }
42
48
  const config = {
43
49
  attributes: true,
44
50
  attributeFilter: [
@@ -71,7 +77,7 @@ export function useCarousel_unstable(options) {
71
77
  }
72
78
  };
73
79
  // Create an observer instance linked to the callback function
74
- const observer = new MutationObserver(callback);
80
+ const observer = new win.MutationObserver(callback);
75
81
  // Start observing the target node for configured mutations
76
82
  observer.observe(rootRef.current, config);
77
83
  // Later, you can stop observing
@@ -80,7 +86,8 @@ export function useCarousel_unstable(options) {
80
86
  };
81
87
  }, [
82
88
  carouselWalker,
83
- store
89
+ store,
90
+ win
84
91
  ]);
85
92
  const selectPageByDirection = useEventCallback((event, direction)=>{
86
93
  const active = carouselWalker.active();
@@ -1 +1 @@
1
- {"version":3,"sources":["Carousel.tsx"],"sourcesContent":["import {\n isHTMLElement,\n useMergedRefs,\n useControllableState,\n type EventHandler,\n useEventCallback,\n} from '@fluentui/react-utilities';\nimport * as React from 'react';\n\nimport { CAROUSEL_ITEM } from './constants';\nimport { useCarouselWalker_unstable } from './useCarouselWalker';\nimport { createCarouselStore } from './createCarouselStore';\nimport type { CarouselValueChangeData } from './Carousel.types';\nimport { CarouselContextValue } from './CarouselContext';\n\nexport type UseCarouselOptions = {\n defaultValue?: string;\n value?: string;\n\n onValueChange?: EventHandler<CarouselValueChangeData>;\n onFinish?: EventHandler<CarouselValueChangeData>;\n};\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 const { onValueChange, onFinish } = options;\n\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 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 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 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]);\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 setValue(newPage?.value);\n onValueChange?.(event, { event, type: 'click', value: newPage?.value });\n } else {\n onFinish?.(event, { event, type: 'click', value: active?.value });\n }\n });\n\n const selectPageByValue: CarouselContextValue['selectPageByValue'] = useEventCallback((event, _value) => {\n setValue(_value);\n onValueChange?.(event, { event, type: 'click', value: _value });\n });\n\n return {\n carouselRef: useMergedRefs(rootRef, carouselRef),\n carousel: {\n store,\n value,\n selectPageByDirection,\n selectPageByValue,\n },\n };\n}\n"],"names":["isHTMLElement","useMergedRefs","useControllableState","useEventCallback","React","CAROUSEL_ITEM","useCarouselWalker_unstable","createCarouselStore","useCarousel_unstable","options","onValueChange","onFinish","ref","carouselRef","walker","carouselWalker","store","useState","value","setValue","defaultState","defaultValue","state","initialState","rootRef","useRef","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","selectPageByDirection","event","direction","active","newPage","nextPage","type","selectPageByValue","_value","carousel"],"mappings":"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"}
1
+ {"version":3,"sources":["Carousel.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n isHTMLElement,\n useMergedRefs,\n useControllableState,\n type EventHandler,\n useEventCallback,\n} from '@fluentui/react-utilities';\nimport { 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 { CarouselValueChangeData } from './Carousel.types';\nimport { CarouselContextValue } from './CarouselContext';\n\nexport type UseCarouselOptions = {\n defaultValue?: string;\n value?: string;\n\n onValueChange?: EventHandler<CarouselValueChangeData>;\n onFinish?: EventHandler<CarouselValueChangeData>;\n};\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 const { 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 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 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 setValue(newPage?.value);\n onValueChange?.(event, { event, type: 'click', value: newPage?.value });\n } else {\n onFinish?.(event, { event, type: 'click', value: active?.value });\n }\n });\n\n const selectPageByValue: CarouselContextValue['selectPageByValue'] = useEventCallback((event, _value) => {\n setValue(_value);\n onValueChange?.(event, { event, type: 'click', value: _value });\n });\n\n return {\n carouselRef: useMergedRefs(rootRef, carouselRef),\n carousel: {\n store,\n value,\n selectPageByDirection,\n selectPageByValue,\n },\n };\n}\n"],"names":["React","isHTMLElement","useMergedRefs","useControllableState","useEventCallback","useFluent_unstable","useFluent","CAROUSEL_ITEM","useCarouselWalker_unstable","createCarouselStore","useCarousel_unstable","options","onValueChange","onFinish","targetDocument","win","defaultView","ref","carouselRef","walker","carouselWalker","store","useState","value","setValue","defaultState","defaultValue","state","initialState","rootRef","useRef","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","selectPageByDirection","event","direction","active","newPage","nextPage","type","selectPageByValue","_value","carousel"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SACEC,aAAa,EACbC,aAAa,EACbC,oBAAoB,EAEpBC,gBAAgB,QACX,4BAA4B;AACnC,SAASC,sBAAsBC,SAAS,QAAQ,kCAAkC;AAElF,SAASC,aAAa,QAAQ,cAAc;AAC5C,SAASC,0BAA0B,QAAQ,sBAAsB;AACjE,SAASC,mBAAmB,QAAQ,wBAAwB;AAY5D,mEAAmE;AACnE,qGAAqG;AACrG,OAAO,SAASC,qBAAqBC,OAA2B;IAC9D,MAAM,EAAEC,aAAa,EAAEC,QAAQ,EAAE,GAAGF;IAEpC,MAAM,EAAEG,cAAc,EAAE,GAAGR;IAC3B,MAAMS,MAAMD,2BAAAA,qCAAAA,eAAgBE,WAAW;IACvC,MAAM,EAAEC,KAAKC,WAAW,EAAEC,QAAQC,cAAc,EAAE,GAAGZ;IACrD,MAAM,CAACa,MAAM,GAAGrB,MAAMsB,QAAQ,CAAC,IAAMb;IAErC,MAAM,CAACc,OAAOC,SAAS,GAAGrB,qBAAqB;QAC7CsB,cAAcd,QAAQe,YAAY;QAClCC,OAAOhB,QAAQY,KAAK;QACpBK,cAAc;IAChB;IACA,MAAMC,UAAU7B,MAAM8B,MAAM,CAAiB;IAE7C,IAAIC,QAAQC,GAAG,CAACC,QAAQ,KAAK,cAAc;QACzC,sDAAsD;QACtDjC,MAAMkC,SAAS,CAAC;YACd,IAAIX,UAAU,MAAM;gBAClB,sCAAsC;gBACtCY,QAAQC,KAAK,CACX;YAEJ;QACF,GAAG;YAACb;SAAM;IACZ;IAEAvB,MAAMkC,SAAS,CAAC;YACGL;QAAjB,MAAMQ,YAAWR,mBAAAA,QAAQS,OAAO,cAAfT,uCAAAA,iBAAiBU,gBAAgB,CAAC,CAAC,CAAC,EAAEhC,cAAc,CAAC,CAAC;QAEvE,IAAK,IAAIiC,IAAI,GAAGA,IAAIH,SAASI,MAAM,EAAED,IAAK;YACxCnB,MAAMqB,QAAQ,CAACL,SAASM,IAAI,CAACH,GAAGI,YAAY,CAACrC;QAC/C;QAEA,OAAO;YACLc,MAAMwB,KAAK;QACb;IACF,GAAG;QAACxB;KAAM;IAEVrB,MAAMkC,SAAS,CAAC;QACd,IAAI,CAACnB,KAAK;YACR;QACF;QAEA,MAAM+B,SAA+B;YACnCC,YAAY;YACZC,iBAAiB;gBAACzC;aAAc;YAChC0C,WAAW;YACXC,SAAS;QACX;QAEA,2DAA2D;QAC3D,MAAMC,WAA6BC,CAAAA;YACjC,KAAK,MAAMC,YAAYD,aAAc;gBACnC,KAAK,MAAME,aAAaC,MAAMC,IAAI,CAACH,SAASI,UAAU,EAAG;oBACvD,IAAIxD,cAAcqD,cAAcA,UAAUI,YAAY,CAACnD,gBAAgB;wBACrE,MAAMoD,WAAWL,UAAUV,YAAY,CAACrC;wBACxC,MAAMqD,UAAUxC,eAAeyC,IAAI,CAACF;wBACpC,IAAI,EAACC,oBAAAA,8BAAAA,QAASrC,KAAK,GAAE;4BACnB;wBACF;wBAEA,MAAMuC,eAAe1C,eAAe2C,QAAQ,CAACH,oBAAAA,8BAAAA,QAASrC,KAAK;4BAC/BuC;wBAA5BzC,MAAM2C,WAAW,CAACL,UAAUG,CAAAA,sBAAAA,yBAAAA,mCAAAA,aAAcvC,KAAK,cAAnBuC,iCAAAA,sBAAuB;oBACrD;gBACF;gBAEA,KAAK,MAAMG,eAAeV,MAAMC,IAAI,CAACH,SAASa,YAAY,EAAG;oBAC3D,IAAIjE,cAAcgE,iBAAgBA,wBAAAA,kCAAAA,YAAaP,YAAY,CAACnD,iBAAgB;wBAC1E,MAAM4D,eAAeF,YAAYrB,YAAY,CAACrC;wBAE9Cc,MAAM+C,WAAW,CAACD;oBACpB;gBACF;YACF;QACF;QAEA,8DAA8D;QAC9D,MAAME,WAAW,IAAItD,IAAIuD,gBAAgB,CAACnB;QAE1C,2DAA2D;QAC3DkB,SAASE,OAAO,CAAC1C,QAAQS,OAAO,EAAGQ;QAEnC,gCAAgC;QAChC,OAAO;YACLuB,SAASG,UAAU;QACrB;IACF,GAAG;QAACpD;QAAgBC;QAAON;KAAI;IAE/B,MAAM0D,wBAAuErE,iBAAiB,CAACsE,OAAOC;QACpG,MAAMC,SAASxD,eAAewD,MAAM;QAEpC,IAAI,EAACA,mBAAAA,6BAAAA,OAAQrD,KAAK,GAAE;YAClB;QACF;QAEA,MAAMsD,UACJF,cAAc,SAASvD,eAAe2C,QAAQ,CAACa,OAAOrD,KAAK,IAAIH,eAAe0D,QAAQ,CAACF,OAAOrD,KAAK;QAErG,IAAIsD,SAAS;YACXrD,SAASqD,oBAAAA,8BAAAA,QAAStD,KAAK;YACvBX,0BAAAA,oCAAAA,cAAgB8D,OAAO;gBAAEA;gBAAOK,MAAM;gBAASxD,KAAK,EAAEsD,oBAAAA,8BAAAA,QAAStD,KAAK;YAAC;QACvE,OAAO;YACLV,qBAAAA,+BAAAA,SAAW6D,OAAO;gBAAEA;gBAAOK,MAAM;gBAASxD,KAAK,EAAEqD,mBAAAA,6BAAAA,OAAQrD,KAAK;YAAC;QACjE;IACF;IAEA,MAAMyD,oBAA+D5E,iBAAiB,CAACsE,OAAOO;QAC5FzD,SAASyD;QACTrE,0BAAAA,oCAAAA,cAAgB8D,OAAO;YAAEA;YAAOK,MAAM;YAASxD,OAAO0D;QAAO;IAC/D;IAEA,OAAO;QACL/D,aAAahB,cAAc2B,SAASX;QACpCgE,UAAU;YACR7D;YACAE;YACAkD;YACAO;QACF;IACF;AACF"}
@@ -9,13 +9,16 @@ Object.defineProperty(exports, "useCarousel_unstable", {
9
9
  }
10
10
  });
11
11
  const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
12
- const _reactutilities = require("@fluentui/react-utilities");
13
12
  const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
13
+ const _reactutilities = require("@fluentui/react-utilities");
14
+ const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
14
15
  const _constants = require("./constants");
15
16
  const _useCarouselWalker = require("./useCarouselWalker");
16
17
  const _createCarouselStore = require("./createCarouselStore");
17
18
  function useCarousel_unstable(options) {
18
19
  const { onValueChange, onFinish } = options;
20
+ const { targetDocument } = (0, _reactsharedcontexts.useFluent_unstable)();
21
+ const win = targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.defaultView;
19
22
  const { ref: carouselRef, walker: carouselWalker } = (0, _useCarouselWalker.useCarouselWalker_unstable)();
20
23
  const [store] = _react.useState(()=>(0, _createCarouselStore.createCarouselStore)());
21
24
  const [value, setValue] = (0, _reactutilities.useControllableState)({
@@ -48,6 +51,9 @@ function useCarousel_unstable(options) {
48
51
  store
49
52
  ]);
50
53
  _react.useEffect(()=>{
54
+ if (!win) {
55
+ return;
56
+ }
51
57
  const config = {
52
58
  attributes: true,
53
59
  attributeFilter: [
@@ -80,7 +86,7 @@ function useCarousel_unstable(options) {
80
86
  }
81
87
  };
82
88
  // Create an observer instance linked to the callback function
83
- const observer = new MutationObserver(callback);
89
+ const observer = new win.MutationObserver(callback);
84
90
  // Start observing the target node for configured mutations
85
91
  observer.observe(rootRef.current, config);
86
92
  // Later, you can stop observing
@@ -89,7 +95,8 @@ function useCarousel_unstable(options) {
89
95
  };
90
96
  }, [
91
97
  carouselWalker,
92
- store
98
+ store,
99
+ win
93
100
  ]);
94
101
  const selectPageByDirection = (0, _reactutilities.useEventCallback)((event, direction)=>{
95
102
  const active = carouselWalker.active();
@@ -1 +1 @@
1
- {"version":3,"sources":["Carousel.js"],"sourcesContent":["import { isHTMLElement, useMergedRefs, useControllableState, useEventCallback } from '@fluentui/react-utilities';\nimport * as React from 'react';\nimport { CAROUSEL_ITEM } from './constants';\nimport { useCarouselWalker_unstable } from './useCarouselWalker';\nimport { createCarouselStore } from './createCarouselStore';\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) {\n const { onValueChange, onFinish } = options;\n const { ref: carouselRef, walker: carouselWalker } = useCarouselWalker_unstable();\n const [store] = React.useState(()=>createCarouselStore());\n const [value, setValue] = useControllableState({\n defaultState: options.defaultValue,\n state: options.value,\n initialState: null\n });\n const rootRef = React.useRef(null);\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('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 var _rootRef_current;\n const allItems = (_rootRef_current = rootRef.current) === null || _rootRef_current === void 0 ? void 0 : _rootRef_current.querySelectorAll(`[${CAROUSEL_ITEM}]`);\n for(let i = 0; i < allItems.length; i++){\n store.addValue(allItems.item(i).getAttribute(CAROUSEL_ITEM));\n }\n return ()=>{\n store.clear();\n };\n }, [\n store\n ]);\n React.useEffect(()=>{\n const config = {\n attributes: true,\n attributeFilter: [\n CAROUSEL_ITEM\n ],\n childList: true,\n subtree: true\n };\n // Callback function to execute when mutations are observed\n const callback = (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 === null || newNode === void 0 ? void 0 : newNode.value)) {\n return;\n }\n const previousNode = carouselWalker.prevPage(newNode === null || newNode === void 0 ? void 0 : newNode.value);\n var _previousNode_value;\n store.insertValue(newValue, (_previousNode_value = previousNode === null || previousNode === void 0 ? void 0 : previousNode.value) !== null && _previousNode_value !== void 0 ? _previousNode_value : null);\n }\n }\n for (const removedNode of Array.from(mutation.removedNodes)){\n if (isHTMLElement(removedNode) && (removedNode === null || removedNode === void 0 ? void 0 : removedNode.hasAttribute(CAROUSEL_ITEM))) {\n const removedValue = removedNode.getAttribute(CAROUSEL_ITEM);\n store.removeValue(removedValue);\n }\n }\n }\n };\n // Create an observer instance linked to the callback function\n const observer = new MutationObserver(callback);\n // Start observing the target node for configured mutations\n observer.observe(rootRef.current, config);\n // Later, you can stop observing\n return ()=>{\n observer.disconnect();\n };\n }, [\n carouselWalker,\n store\n ]);\n const selectPageByDirection = useEventCallback((event, direction)=>{\n const active = carouselWalker.active();\n if (!(active === null || active === void 0 ? void 0 : active.value)) {\n return;\n }\n const newPage = direction === 'prev' ? carouselWalker.prevPage(active.value) : carouselWalker.nextPage(active.value);\n if (newPage) {\n setValue(newPage === null || newPage === void 0 ? void 0 : newPage.value);\n onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange(event, {\n event,\n type: 'click',\n value: newPage === null || newPage === void 0 ? void 0 : newPage.value\n });\n } else {\n onFinish === null || onFinish === void 0 ? void 0 : onFinish(event, {\n event,\n type: 'click',\n value: active === null || active === void 0 ? void 0 : active.value\n });\n }\n });\n const selectPageByValue = useEventCallback((event, _value)=>{\n setValue(_value);\n onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange(event, {\n event,\n type: 'click',\n value: _value\n });\n });\n return {\n carouselRef: useMergedRefs(rootRef, carouselRef),\n carousel: {\n store,\n value,\n selectPageByDirection,\n selectPageByValue\n }\n };\n}\n"],"names":["useCarousel_unstable","options","onValueChange","onFinish","ref","carouselRef","walker","carouselWalker","useCarouselWalker_unstable","store","React","useState","createCarouselStore","value","setValue","useControllableState","defaultState","defaultValue","state","initialState","rootRef","useRef","process","env","NODE_ENV","useEffect","console","error","_rootRef_current","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","_previousNode_value","insertValue","removedNode","removedNodes","removedValue","removeValue","observer","MutationObserver","observe","disconnect","selectPageByDirection","useEventCallback","event","direction","active","newPage","nextPage","type","selectPageByValue","_value","useMergedRefs","carousel"],"mappings":"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"}
1
+ {"version":3,"sources":["Carousel.js"],"sourcesContent":["import * as React from 'react';\nimport { isHTMLElement, useMergedRefs, useControllableState, useEventCallback } from '@fluentui/react-utilities';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { CAROUSEL_ITEM } from './constants';\nimport { useCarouselWalker_unstable } from './useCarouselWalker';\nimport { createCarouselStore } from './createCarouselStore';\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) {\n const { onValueChange, onFinish } = options;\n const { targetDocument } = useFluent();\n const win = targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.defaultView;\n const { ref: carouselRef, walker: carouselWalker } = useCarouselWalker_unstable();\n const [store] = React.useState(()=>createCarouselStore());\n const [value, setValue] = useControllableState({\n defaultState: options.defaultValue,\n state: options.value,\n initialState: null\n });\n const rootRef = React.useRef(null);\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('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 var _rootRef_current;\n const allItems = (_rootRef_current = rootRef.current) === null || _rootRef_current === void 0 ? void 0 : _rootRef_current.querySelectorAll(`[${CAROUSEL_ITEM}]`);\n for(let i = 0; i < allItems.length; i++){\n store.addValue(allItems.item(i).getAttribute(CAROUSEL_ITEM));\n }\n return ()=>{\n store.clear();\n };\n }, [\n store\n ]);\n React.useEffect(()=>{\n if (!win) {\n return;\n }\n const config = {\n attributes: true,\n attributeFilter: [\n CAROUSEL_ITEM\n ],\n childList: true,\n subtree: true\n };\n // Callback function to execute when mutations are observed\n const callback = (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 === null || newNode === void 0 ? void 0 : newNode.value)) {\n return;\n }\n const previousNode = carouselWalker.prevPage(newNode === null || newNode === void 0 ? void 0 : newNode.value);\n var _previousNode_value;\n store.insertValue(newValue, (_previousNode_value = previousNode === null || previousNode === void 0 ? void 0 : previousNode.value) !== null && _previousNode_value !== void 0 ? _previousNode_value : null);\n }\n }\n for (const removedNode of Array.from(mutation.removedNodes)){\n if (isHTMLElement(removedNode) && (removedNode === null || removedNode === void 0 ? void 0 : removedNode.hasAttribute(CAROUSEL_ITEM))) {\n const removedValue = removedNode.getAttribute(CAROUSEL_ITEM);\n store.removeValue(removedValue);\n }\n }\n }\n };\n // Create an observer instance linked to the callback function\n const observer = new win.MutationObserver(callback);\n // Start observing the target node for configured mutations\n observer.observe(rootRef.current, config);\n // Later, you can stop observing\n return ()=>{\n observer.disconnect();\n };\n }, [\n carouselWalker,\n store,\n win\n ]);\n const selectPageByDirection = useEventCallback((event, direction)=>{\n const active = carouselWalker.active();\n if (!(active === null || active === void 0 ? void 0 : active.value)) {\n return;\n }\n const newPage = direction === 'prev' ? carouselWalker.prevPage(active.value) : carouselWalker.nextPage(active.value);\n if (newPage) {\n setValue(newPage === null || newPage === void 0 ? void 0 : newPage.value);\n onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange(event, {\n event,\n type: 'click',\n value: newPage === null || newPage === void 0 ? void 0 : newPage.value\n });\n } else {\n onFinish === null || onFinish === void 0 ? void 0 : onFinish(event, {\n event,\n type: 'click',\n value: active === null || active === void 0 ? void 0 : active.value\n });\n }\n });\n const selectPageByValue = useEventCallback((event, _value)=>{\n setValue(_value);\n onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange(event, {\n event,\n type: 'click',\n value: _value\n });\n });\n return {\n carouselRef: useMergedRefs(rootRef, carouselRef),\n carousel: {\n store,\n value,\n selectPageByDirection,\n selectPageByValue\n }\n };\n}\n"],"names":["useCarousel_unstable","options","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","process","env","NODE_ENV","useEffect","console","error","_rootRef_current","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","_previousNode_value","insertValue","removedNode","removedNodes","removedValue","removeValue","observer","MutationObserver","observe","disconnect","selectPageByDirection","useEventCallback","event","direction","active","newPage","nextPage","type","selectPageByValue","_value","useMergedRefs","carousel"],"mappings":"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"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@fluentui/react-teaching-popover",
3
- "version": "9.1.6",
3
+ "version": "9.1.8",
4
4
  "description": "New fluentui react package",
5
5
  "main": "lib-commonjs/index.js",
6
6
  "module": "lib/index.js",
@@ -23,10 +23,9 @@
23
23
  "generate-api": "just-scripts generate-api",
24
24
  "lint": "just-scripts lint",
25
25
  "start": "yarn storybook",
26
- "storybook": "start-storybook",
26
+ "storybook": "yarn --cwd ../stories storybook",
27
27
  "test": "jest --passWithNoTests",
28
- "test-ssr": "test-ssr \"./stories/**/*.stories.tsx\"",
29
- "type-check": "tsc -b tsconfig.json"
28
+ "type-check": "just-scripts type-check"
30
29
  },
31
30
  "devDependencies": {
32
31
  "@fluentui/eslint-plugin": "*",
@@ -36,18 +35,18 @@
36
35
  "@fluentui/scripts-tasks": "*"
37
36
  },
38
37
  "dependencies": {
39
- "@fluentui/react-jsx-runtime": "^9.0.38",
38
+ "@fluentui/react-jsx-runtime": "^9.0.39",
40
39
  "@fluentui/react-theme": "^9.1.19",
41
- "@fluentui/react-utilities": "^9.18.9",
40
+ "@fluentui/react-utilities": "^9.18.10",
42
41
  "@griffel/react": "^1.5.22",
43
42
  "@swc/helpers": "^0.5.1",
44
43
  "@fluentui/react-shared-contexts": "^9.19.0",
45
- "@fluentui/react-popover": "^9.9.10",
46
- "@fluentui/react-button": "^9.3.82",
47
- "@fluentui/react-tabster": "^9.21.4",
44
+ "@fluentui/react-popover": "^9.9.12",
45
+ "@fluentui/react-button": "^9.3.84",
46
+ "@fluentui/react-tabster": "^9.22.0",
48
47
  "@fluentui/react-icons": "^2.0.239",
49
- "@fluentui/react-aria": "^9.11.4",
50
- "@fluentui/react-context-selector": "^9.1.60",
48
+ "@fluentui/react-aria": "^9.12.1",
49
+ "@fluentui/react-context-selector": "^9.1.62",
51
50
  "use-sync-external-store": "^1.2.0"
52
51
  },
53
52
  "peerDependencies": {