@fluentui/react-teaching-popover 0.0.0-nightly-20240523-0405.1 → 0.0.0-nightly-20240527-0405.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.
Files changed (6) hide show
  1. package/CHANGELOG.md +28 -15
  2. package/lib/components/TeachingPopoverCarousel/Carousel/Carousel.js +10 -3
  3. package/lib/components/TeachingPopoverCarousel/Carousel/Carousel.js.map +1 -1
  4. package/lib-commonjs/components/TeachingPopoverCarousel/Carousel/Carousel.js +10 -3
  5. package/lib-commonjs/components/TeachingPopoverCarousel/Carousel/Carousel.js.map +1 -1
  6. package/package.json +12 -12
package/CHANGELOG.md CHANGED
@@ -1,28 +1,41 @@
1
1
  # Change Log - @fluentui/react-teaching-popover
2
2
 
3
- This log was last generated on Thu, 23 May 2024 04:21:19 GMT and should not be manually modified.
3
+ This log was last generated on Mon, 27 May 2024 04:21:52 GMT and should not be manually modified.
4
4
 
5
5
  <!-- Start content -->
6
6
 
7
- ## [0.0.0-nightly-20240523-0405.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-teaching-popover_v0.0.0-nightly-20240523-0405.1)
7
+ ## [0.0.0-nightly-20240527-0405.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-teaching-popover_v0.0.0-nightly-20240527-0405.1)
8
8
 
9
- Thu, 23 May 2024 04:21:19 GMT
10
- [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-teaching-popover_v9.1.5..@fluentui/react-teaching-popover_v0.0.0-nightly-20240523-0405.1)
9
+ Mon, 27 May 2024 04:21:52 GMT
10
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-teaching-popover_v9.1.6..@fluentui/react-teaching-popover_v0.0.0-nightly-20240527-0405.1)
11
11
 
12
12
  ### Changes
13
13
 
14
14
  - Release nightly v9 ([commit](https://github.com/microsoft/fluentui/commit/not available) by fluentui-internal@service.microsoft.com)
15
- - Bump @fluentui/react-jsx-runtime to v0.0.0-nightly-20240523-0405.1 ([commit](https://github.com/microsoft/fluentui/commit/3887e8a821be5ba372892da287733bd1f4eead41) by beachball)
16
- - Bump @fluentui/react-theme to v0.0.0-nightly-20240523-0405.1 ([commit](https://github.com/microsoft/fluentui/commit/3887e8a821be5ba372892da287733bd1f4eead41) by beachball)
17
- - Bump @fluentui/react-utilities to v0.0.0-nightly-20240523-0405.1 ([commit](https://github.com/microsoft/fluentui/commit/3887e8a821be5ba372892da287733bd1f4eead41) by beachball)
18
- - Bump @fluentui/react-shared-contexts to v0.0.0-nightly-20240523-0405.1 ([commit](https://github.com/microsoft/fluentui/commit/3887e8a821be5ba372892da287733bd1f4eead41) by beachball)
19
- - Bump @fluentui/react-popover to v0.0.0-nightly-20240523-0405.1 ([commit](https://github.com/microsoft/fluentui/commit/3887e8a821be5ba372892da287733bd1f4eead41) by beachball)
20
- - Bump @fluentui/react-button to v0.0.0-nightly-20240523-0405.1 ([commit](https://github.com/microsoft/fluentui/commit/3887e8a821be5ba372892da287733bd1f4eead41) by beachball)
21
- - Bump @fluentui/react-tabster to v0.0.0-nightly-20240523-0405.1 ([commit](https://github.com/microsoft/fluentui/commit/3887e8a821be5ba372892da287733bd1f4eead41) by beachball)
22
- - Bump @fluentui/react-aria to v0.0.0-nightly-20240523-0405.1 ([commit](https://github.com/microsoft/fluentui/commit/3887e8a821be5ba372892da287733bd1f4eead41) by beachball)
23
- - Bump @fluentui/react-context-selector to v0.0.0-nightly-20240523-0405.1 ([commit](https://github.com/microsoft/fluentui/commit/3887e8a821be5ba372892da287733bd1f4eead41) by beachball)
24
- - Bump @fluentui/react-conformance to v0.0.0-nightly-20240523-0405.1 ([commit](https://github.com/microsoft/fluentui/commit/3887e8a821be5ba372892da287733bd1f4eead41) by beachball)
25
- - Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20240523-0405.1 ([commit](https://github.com/microsoft/fluentui/commit/3887e8a821be5ba372892da287733bd1f4eead41) by beachball)
15
+ - Bump @fluentui/react-jsx-runtime to v0.0.0-nightly-20240527-0405.1 ([commit](https://github.com/microsoft/fluentui/commit/f9144c282523b83f2bf4e1800db9fdba3a806376) by beachball)
16
+ - Bump @fluentui/react-theme to v0.0.0-nightly-20240527-0405.1 ([commit](https://github.com/microsoft/fluentui/commit/f9144c282523b83f2bf4e1800db9fdba3a806376) by beachball)
17
+ - Bump @fluentui/react-utilities to v0.0.0-nightly-20240527-0405.1 ([commit](https://github.com/microsoft/fluentui/commit/f9144c282523b83f2bf4e1800db9fdba3a806376) by beachball)
18
+ - Bump @fluentui/react-shared-contexts to v0.0.0-nightly-20240527-0405.1 ([commit](https://github.com/microsoft/fluentui/commit/f9144c282523b83f2bf4e1800db9fdba3a806376) by beachball)
19
+ - Bump @fluentui/react-popover to v0.0.0-nightly-20240527-0405.1 ([commit](https://github.com/microsoft/fluentui/commit/f9144c282523b83f2bf4e1800db9fdba3a806376) by beachball)
20
+ - Bump @fluentui/react-button to v0.0.0-nightly-20240527-0405.1 ([commit](https://github.com/microsoft/fluentui/commit/f9144c282523b83f2bf4e1800db9fdba3a806376) by beachball)
21
+ - Bump @fluentui/react-tabster to v0.0.0-nightly-20240527-0405.1 ([commit](https://github.com/microsoft/fluentui/commit/f9144c282523b83f2bf4e1800db9fdba3a806376) by beachball)
22
+ - Bump @fluentui/react-aria to v0.0.0-nightly-20240527-0405.1 ([commit](https://github.com/microsoft/fluentui/commit/f9144c282523b83f2bf4e1800db9fdba3a806376) by beachball)
23
+ - Bump @fluentui/react-context-selector to v0.0.0-nightly-20240527-0405.1 ([commit](https://github.com/microsoft/fluentui/commit/f9144c282523b83f2bf4e1800db9fdba3a806376) by beachball)
24
+ - Bump @fluentui/react-conformance to v0.0.0-nightly-20240527-0405.1 ([commit](https://github.com/microsoft/fluentui/commit/f9144c282523b83f2bf4e1800db9fdba3a806376) by beachball)
25
+ - Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20240527-0405.1 ([commit](https://github.com/microsoft/fluentui/commit/f9144c282523b83f2bf4e1800db9fdba3a806376) by beachball)
26
+
27
+ ## [9.1.6](https://github.com/microsoft/fluentui/tree/@fluentui/react-teaching-popover_v9.1.6)
28
+
29
+ Thu, 23 May 2024 08:02:50 GMT
30
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-teaching-popover_v9.1.5..@fluentui/react-teaching-popover_v9.1.6)
31
+
32
+ ### Patches
33
+
34
+ - chore: replace usage of .shorthands() in styles ([PR #31458](https://github.com/microsoft/fluentui/pull/31458) by olfedias@microsoft.com)
35
+ - Bump @fluentui/react-popover to v9.9.10 ([commit](https://github.com/microsoft/fluentui/commit/03599d609e8310b08c57d1f871cffbf717d79207) by beachball)
36
+ - Bump @fluentui/react-button to v9.3.82 ([commit](https://github.com/microsoft/fluentui/commit/03599d609e8310b08c57d1f871cffbf717d79207) by beachball)
37
+ - Bump @fluentui/react-tabster to v9.21.4 ([commit](https://github.com/microsoft/fluentui/commit/03599d609e8310b08c57d1f871cffbf717d79207) by beachball)
38
+ - Bump @fluentui/react-aria to v9.11.4 ([commit](https://github.com/microsoft/fluentui/commit/03599d609e8310b08c57d1f871cffbf717d79207) by beachball)
26
39
 
27
40
  ## [9.1.5](https://github.com/microsoft/fluentui/tree/@fluentui/react-teaching-popover_v9.1.5)
28
41
 
package/lib/components/TeachingPopoverCarousel/Carousel/Carousel.js CHANGED
@@ -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();
package/lib/components/TeachingPopoverCarousel/Carousel/Carousel.js.map CHANGED
@@ -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":"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"}
package/lib-commonjs/components/TeachingPopoverCarousel/Carousel/Carousel.js CHANGED
@@ -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();
package/lib-commonjs/components/TeachingPopoverCarousel/Carousel/Carousel.js.map CHANGED
@@ -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": "0.0.0-nightly-20240523-0405.1",
3
+ "version": "0.0.0-nightly-20240527-0405.1",
4
4
  "description": "New fluentui react package",
5
5
  "main": "lib-commonjs/index.js",
6
6
  "module": "lib/index.js",
@@ -30,24 +30,24 @@
30
30
  },
31
31
  "devDependencies": {
32
32
  "@fluentui/eslint-plugin": "*",
33
- "@fluentui/react-conformance": "0.0.0-nightly-20240523-0405.1",
34
- "@fluentui/react-conformance-griffel": "0.0.0-nightly-20240523-0405.1",
33
+ "@fluentui/react-conformance": "0.0.0-nightly-20240527-0405.1",
34
+ "@fluentui/react-conformance-griffel": "0.0.0-nightly-20240527-0405.1",
35
35
  "@fluentui/scripts-api-extractor": "*",
36
36
  "@fluentui/scripts-tasks": "*"
37
37
  },
38
38
  "dependencies": {
39
- "@fluentui/react-jsx-runtime": "0.0.0-nightly-20240523-0405.1",
40
- "@fluentui/react-theme": "0.0.0-nightly-20240523-0405.1",
41
- "@fluentui/react-utilities": "0.0.0-nightly-20240523-0405.1",
39
+ "@fluentui/react-jsx-runtime": "0.0.0-nightly-20240527-0405.1",
40
+ "@fluentui/react-theme": "0.0.0-nightly-20240527-0405.1",
41
+ "@fluentui/react-utilities": "0.0.0-nightly-20240527-0405.1",
42
42
  "@griffel/react": "^1.5.22",
43
43
  "@swc/helpers": "^0.5.1",
44
- "@fluentui/react-shared-contexts": "0.0.0-nightly-20240523-0405.1",
45
- "@fluentui/react-popover": "0.0.0-nightly-20240523-0405.1",
46
- "@fluentui/react-button": "0.0.0-nightly-20240523-0405.1",
47
- "@fluentui/react-tabster": "0.0.0-nightly-20240523-0405.1",
44
+ "@fluentui/react-shared-contexts": "0.0.0-nightly-20240527-0405.1",
45
+ "@fluentui/react-popover": "0.0.0-nightly-20240527-0405.1",
46
+ "@fluentui/react-button": "0.0.0-nightly-20240527-0405.1",
47
+ "@fluentui/react-tabster": "0.0.0-nightly-20240527-0405.1",
48
48
  "@fluentui/react-icons": "^2.0.239",
49
- "@fluentui/react-aria": "0.0.0-nightly-20240523-0405.1",
50
- "@fluentui/react-context-selector": "0.0.0-nightly-20240523-0405.1",
49
+ "@fluentui/react-aria": "0.0.0-nightly-20240527-0405.1",
50
+ "@fluentui/react-context-selector": "0.0.0-nightly-20240527-0405.1",
51
51
  "use-sync-external-store": "^1.2.0"
52
52
  },
53
53
  "peerDependencies": {