@fluentui/react-teaching-popover 9.1.26 → 9.2.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 +15 -2
- package/dist/index.d.ts +3 -2
- package/lib/components/TeachingPopoverCarouselNavButton/useTeachingPopoverCarouselNavButton.js +1 -0
- package/lib/components/TeachingPopoverCarouselNavButton/useTeachingPopoverCarouselNavButton.js.map +1 -1
- package/lib/components/TeachingPopoverHeader/TeachingPopoverHeader.types.js.map +1 -1
- package/lib/components/TeachingPopoverHeader/useTeachingPopoverHeader.js +3 -3
- package/lib/components/TeachingPopoverHeader/useTeachingPopoverHeader.js.map +1 -1
- package/lib-commonjs/components/TeachingPopoverCarouselNavButton/useTeachingPopoverCarouselNavButton.js +1 -0
- package/lib-commonjs/components/TeachingPopoverCarouselNavButton/useTeachingPopoverCarouselNavButton.js.map +1 -1
- package/lib-commonjs/components/TeachingPopoverHeader/TeachingPopoverHeader.types.js.map +1 -1
- package/lib-commonjs/components/TeachingPopoverHeader/useTeachingPopoverHeader.js +3 -3
- package/lib-commonjs/components/TeachingPopoverHeader/useTeachingPopoverHeader.js.map +1 -1
- package/package.json +5 -5
package/CHANGELOG.md
CHANGED
|
@@ -1,12 +1,25 @@
|
|
|
1
1
|
# Change Log - @fluentui/react-teaching-popover
|
|
2
2
|
|
|
3
|
-
This log was last generated on Wed,
|
|
3
|
+
This log was last generated on Wed, 08 Jan 2025 18:29:14 GMT and should not be manually modified.
|
|
4
4
|
|
|
5
5
|
<!-- Start content -->
|
|
6
6
|
|
|
7
|
+
## [9.2.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-teaching-popover_v9.2.0)
|
|
8
|
+
|
|
9
|
+
Wed, 08 Jan 2025 18:29:14 GMT
|
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-teaching-popover_v9.1.26..@fluentui/react-teaching-popover_v9.2.0)
|
|
11
|
+
|
|
12
|
+
### Minor changes
|
|
13
|
+
|
|
14
|
+
- fix: accName updates and semantic fixes ([PR #33194](https://github.com/microsoft/fluentui/pull/33194) by sarah.higley@microsoft.com)
|
|
15
|
+
- Bump @fluentui/react-jsx-runtime to v9.0.49 ([PR #33550](https://github.com/microsoft/fluentui/pull/33550) by beachball)
|
|
16
|
+
- Bump @fluentui/react-popover to v9.9.30 ([PR #33550](https://github.com/microsoft/fluentui/pull/33550) by beachball)
|
|
17
|
+
- Bump @fluentui/react-button to v9.3.99 ([PR #33550](https://github.com/microsoft/fluentui/pull/33550) by beachball)
|
|
18
|
+
- Bump @fluentui/react-aria to v9.13.13 ([PR #33550](https://github.com/microsoft/fluentui/pull/33550) by beachball)
|
|
19
|
+
|
|
7
20
|
## [9.1.26](https://github.com/microsoft/fluentui/tree/@fluentui/react-teaching-popover_v9.1.26)
|
|
8
21
|
|
|
9
|
-
Wed, 18 Dec 2024 10:
|
|
22
|
+
Wed, 18 Dec 2024 10:59:37 GMT
|
|
10
23
|
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-teaching-popover_v9.1.25..@fluentui/react-teaching-popover_v9.1.26)
|
|
11
24
|
|
|
12
25
|
### Patches
|
package/dist/index.d.ts
CHANGED
|
@@ -467,10 +467,11 @@ export declare type TeachingPopoverHeaderProps = ComponentProps<TeachingPopoverH
|
|
|
467
467
|
|
|
468
468
|
export declare type TeachingPopoverHeaderSlots = {
|
|
469
469
|
/**
|
|
470
|
-
* The element wrapping the text and close button. By default this is an
|
|
470
|
+
* The element wrapping the text and close button. By default this is an div; although it can be a heading, this should not be done.
|
|
471
|
+
* Instead, wrap the child text in a heading tag if one is needed.
|
|
471
472
|
* Be sure to include role and aria heading level if div is used.
|
|
472
473
|
*/
|
|
473
|
-
root: Slot<'
|
|
474
|
+
root: Slot<'div', 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'>;
|
|
474
475
|
/**
|
|
475
476
|
* The component to be used as close button in heading
|
|
476
477
|
*/
|
package/lib/components/TeachingPopoverCarouselNavButton/useTeachingPopoverCarouselNavButton.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/TeachingPopoverCarouselNavButton/useTeachingPopoverCarouselNavButton.tsx"],"sourcesContent":["import * as React from 'react';\nimport { ARIAButtonSlotProps, useARIAButtonProps } from '@fluentui/react-aria';\nimport { usePopoverContext_unstable } from '@fluentui/react-popover';\nimport { useTabsterAttributes } from '@fluentui/react-tabster';\nimport { getIntrinsicElementProps, isHTMLElement, slot, useEventCallback } from '@fluentui/react-utilities';\n\nimport type {\n TeachingPopoverCarouselNavButtonProps,\n TeachingPopoverCarouselNavButtonState,\n} from './TeachingPopoverCarouselNavButton.types';\nimport { useCarouselContext_unstable } from '../TeachingPopoverCarousel/Carousel/CarouselContext';\nimport { useValueIdContext } from '../TeachingPopoverCarouselNav/valueIdContext';\n\n/**\n * Create the state required to render TeachingPopoverCarouselNavButton.\n *\n * The returned state can be modified with hooks such as useTeachingPopoverCarouselNavButtonStyles_unstable,\n * before being passed to renderTeachingPopoverCarouselNavButton_unstable.\n *\n * @param props - props from this instance of TeachingPopoverCarouselNavButton\n * @param ref - reference to root HTMLElement of TeachingPopoverCarouselNavButton\n */\nexport const useTeachingPopoverCarouselNavButton_unstable = (\n props: TeachingPopoverCarouselNavButtonProps,\n ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>,\n): TeachingPopoverCarouselNavButtonState => {\n const { onClick, as = 'a' } = props;\n\n const value = useValueIdContext();\n\n const appearance = usePopoverContext_unstable(context => context.appearance);\n const selectPageByValue = useCarouselContext_unstable(c => c.selectPageByValue);\n const isSelected = useCarouselContext_unstable(c => c.value === value);\n\n const handleClick: ARIAButtonSlotProps<'a'>['onClick'] = useEventCallback(event => {\n onClick?.(event);\n\n if (!event.defaultPrevented && isHTMLElement(event.target)) {\n selectPageByValue(event, value);\n }\n });\n\n const defaultTabProps = useTabsterAttributes({\n focusable: { isDefault: isSelected },\n });\n\n const _carouselButton = slot.always<ARIAButtonSlotProps<'a'>>(\n getIntrinsicElementProps(as, useARIAButtonProps(props.as, props)),\n {\n elementType: 'button',\n defaultProps: {\n ref: ref as React.Ref<HTMLButtonElement & HTMLAnchorElement>,\n role: 'tab',\n type: 'button',\n ...defaultTabProps,\n },\n },\n );\n\n _carouselButton.onClick = handleClick;\n\n const state: TeachingPopoverCarouselNavButtonState = {\n isSelected,\n appearance,\n components: {\n root: 'button',\n },\n root: _carouselButton,\n };\n\n return state;\n};\n"],"names":["React","useARIAButtonProps","usePopoverContext_unstable","useTabsterAttributes","getIntrinsicElementProps","isHTMLElement","slot","useEventCallback","useCarouselContext_unstable","useValueIdContext","useTeachingPopoverCarouselNavButton_unstable","props","ref","onClick","as","value","appearance","context","selectPageByValue","c","isSelected","handleClick","event","defaultPrevented","target","defaultTabProps","focusable","isDefault","_carouselButton","always","elementType","defaultProps","role","type","state","components","root"],"rangeMappings":"
|
|
1
|
+
{"version":3,"sources":["../src/components/TeachingPopoverCarouselNavButton/useTeachingPopoverCarouselNavButton.tsx"],"sourcesContent":["import * as React from 'react';\nimport { ARIAButtonSlotProps, useARIAButtonProps } from '@fluentui/react-aria';\nimport { usePopoverContext_unstable } from '@fluentui/react-popover';\nimport { useTabsterAttributes } from '@fluentui/react-tabster';\nimport { getIntrinsicElementProps, isHTMLElement, slot, useEventCallback } from '@fluentui/react-utilities';\n\nimport type {\n TeachingPopoverCarouselNavButtonProps,\n TeachingPopoverCarouselNavButtonState,\n} from './TeachingPopoverCarouselNavButton.types';\nimport { useCarouselContext_unstable } from '../TeachingPopoverCarousel/Carousel/CarouselContext';\nimport { useValueIdContext } from '../TeachingPopoverCarouselNav/valueIdContext';\n\n/**\n * Create the state required to render TeachingPopoverCarouselNavButton.\n *\n * The returned state can be modified with hooks such as useTeachingPopoverCarouselNavButtonStyles_unstable,\n * before being passed to renderTeachingPopoverCarouselNavButton_unstable.\n *\n * @param props - props from this instance of TeachingPopoverCarouselNavButton\n * @param ref - reference to root HTMLElement of TeachingPopoverCarouselNavButton\n */\nexport const useTeachingPopoverCarouselNavButton_unstable = (\n props: TeachingPopoverCarouselNavButtonProps,\n ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>,\n): TeachingPopoverCarouselNavButtonState => {\n const { onClick, as = 'a' } = props;\n\n const value = useValueIdContext();\n\n const appearance = usePopoverContext_unstable(context => context.appearance);\n const selectPageByValue = useCarouselContext_unstable(c => c.selectPageByValue);\n const isSelected = useCarouselContext_unstable(c => c.value === value);\n\n const handleClick: ARIAButtonSlotProps<'a'>['onClick'] = useEventCallback(event => {\n onClick?.(event);\n\n if (!event.defaultPrevented && isHTMLElement(event.target)) {\n selectPageByValue(event, value);\n }\n });\n\n const defaultTabProps = useTabsterAttributes({\n focusable: { isDefault: isSelected },\n });\n\n const _carouselButton = slot.always<ARIAButtonSlotProps<'a'>>(\n getIntrinsicElementProps(as, useARIAButtonProps(props.as, props)),\n {\n elementType: 'button',\n defaultProps: {\n ref: ref as React.Ref<HTMLButtonElement & HTMLAnchorElement>,\n role: 'tab',\n type: 'button',\n 'aria-selected': `${!!isSelected}`,\n ...defaultTabProps,\n },\n },\n );\n\n _carouselButton.onClick = handleClick;\n\n const state: TeachingPopoverCarouselNavButtonState = {\n isSelected,\n appearance,\n components: {\n root: 'button',\n },\n root: _carouselButton,\n };\n\n return state;\n};\n"],"names":["React","useARIAButtonProps","usePopoverContext_unstable","useTabsterAttributes","getIntrinsicElementProps","isHTMLElement","slot","useEventCallback","useCarouselContext_unstable","useValueIdContext","useTeachingPopoverCarouselNavButton_unstable","props","ref","onClick","as","value","appearance","context","selectPageByValue","c","isSelected","handleClick","event","defaultPrevented","target","defaultTabProps","focusable","isDefault","_carouselButton","always","elementType","defaultProps","role","type","state","components","root"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAA8BC,kBAAkB,QAAQ,uBAAuB;AAC/E,SAASC,0BAA0B,QAAQ,0BAA0B;AACrE,SAASC,oBAAoB,QAAQ,0BAA0B;AAC/D,SAASC,wBAAwB,EAAEC,aAAa,EAAEC,IAAI,EAAEC,gBAAgB,QAAQ,4BAA4B;AAM5G,SAASC,2BAA2B,QAAQ,sDAAsD;AAClG,SAASC,iBAAiB,QAAQ,+CAA+C;AAEjF;;;;;;;;CAQC,GACD,OAAO,MAAMC,+CAA+C,CAC1DC,OACAC;IAEA,MAAM,EAAEC,OAAO,EAAEC,KAAK,GAAG,EAAE,GAAGH;IAE9B,MAAMI,QAAQN;IAEd,MAAMO,aAAad,2BAA2Be,CAAAA,UAAWA,QAAQD,UAAU;IAC3E,MAAME,oBAAoBV,4BAA4BW,CAAAA,IAAKA,EAAED,iBAAiB;IAC9E,MAAME,aAAaZ,4BAA4BW,CAAAA,IAAKA,EAAEJ,KAAK,KAAKA;IAEhE,MAAMM,cAAmDd,iBAAiBe,CAAAA;QACxET,oBAAAA,8BAAAA,QAAUS;QAEV,IAAI,CAACA,MAAMC,gBAAgB,IAAIlB,cAAciB,MAAME,MAAM,GAAG;YAC1DN,kBAAkBI,OAAOP;QAC3B;IACF;IAEA,MAAMU,kBAAkBtB,qBAAqB;QAC3CuB,WAAW;YAAEC,WAAWP;QAAW;IACrC;IAEA,MAAMQ,kBAAkBtB,KAAKuB,MAAM,CACjCzB,yBAAyBU,IAAIb,mBAAmBU,MAAMG,EAAE,EAAEH,SAC1D;QACEmB,aAAa;QACbC,cAAc;YACZnB,KAAKA;YACLoB,MAAM;YACNC,MAAM;YACN,iBAAiB,CAAC,EAAE,CAAC,CAACb,WAAW,CAAC;YAClC,GAAGK,eAAe;QACpB;IACF;IAGFG,gBAAgBf,OAAO,GAAGQ;IAE1B,MAAMa,QAA+C;QACnDd;QACAJ;QACAmB,YAAY;YACVC,MAAM;QACR;QACAA,MAAMR;IACR;IAEA,OAAOM;AACT,EAAE"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/TeachingPopoverHeader/TeachingPopoverHeader.types.ts"],"sourcesContent":["import { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport { PopoverContextValue } from '@fluentui/react-popover';\n\nexport type TeachingPopoverHeaderSlots = {\n /**\n * The element wrapping the text and close button. By default this is an
|
|
1
|
+
{"version":3,"sources":["../src/components/TeachingPopoverHeader/TeachingPopoverHeader.types.ts"],"sourcesContent":["import { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport { PopoverContextValue } from '@fluentui/react-popover';\n\nexport type TeachingPopoverHeaderSlots = {\n /**\n * The element wrapping the text and close button. By default this is an div; although it can be a heading, this should not be done.\n * Instead, wrap the child text in a heading tag if one is needed.\n * Be sure to include role and aria heading level if div is used.\n */\n root: Slot<'div', 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'>;\n /**\n * The component to be used as close button in heading\n */\n dismissButton?: Slot<'button'>;\n /**\n * Initial icon slot rendered before children content in heading.\n */\n icon?: Slot<'div'>;\n};\n\nexport type TeachingPopoverHeaderState = ComponentState<TeachingPopoverHeaderSlots> &\n Pick<PopoverContextValue, 'appearance'>;\n\nexport type TeachingPopoverHeaderProps = ComponentProps<TeachingPopoverHeaderSlots>;\n"],"names":[],"rangeMappings":"","mappings":"AAuBA,WAAoF"}
|
|
@@ -22,15 +22,15 @@ import { usePopoverContext_unstable } from '@fluentui/react-popover';
|
|
|
22
22
|
return {
|
|
23
23
|
appearance,
|
|
24
24
|
components: {
|
|
25
|
-
root: '
|
|
25
|
+
root: 'div',
|
|
26
26
|
dismissButton: 'button',
|
|
27
27
|
icon: 'div'
|
|
28
28
|
},
|
|
29
|
-
root: slot.always(getIntrinsicElementProps('
|
|
29
|
+
root: slot.always(getIntrinsicElementProps('div', {
|
|
30
30
|
ref,
|
|
31
31
|
...props
|
|
32
32
|
}), {
|
|
33
|
-
elementType: '
|
|
33
|
+
elementType: 'div'
|
|
34
34
|
}),
|
|
35
35
|
icon: slot.optional(icon, {
|
|
36
36
|
renderByDefault: true,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/TeachingPopoverHeader/useTeachingPopoverHeader.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getIntrinsicElementProps, useEventCallback, slot } from '@fluentui/react-utilities';\nimport type { TeachingPopoverHeaderProps, TeachingPopoverHeaderState } from './TeachingPopoverHeader.types';\n\nimport { Dismiss12Regular, Lightbulb16Regular } from '@fluentui/react-icons';\nimport { usePopoverContext_unstable } from '@fluentui/react-popover';\n\n/**\n * Returns the props and state required to render the component\n * @param props - TeachingPopoverHeader properties\n * @param ref - reference to root HTMLElement of TeachingPopoverHeader\n */\nexport const useTeachingPopoverHeader_unstable = (\n props: TeachingPopoverHeaderProps,\n ref: React.Ref<HTMLDivElement>,\n): TeachingPopoverHeaderState => {\n const { dismissButton, icon } = props;\n\n const setOpen = usePopoverContext_unstable(context => context.setOpen);\n const triggerRef = usePopoverContext_unstable(context => context.triggerRef);\n const appearance = usePopoverContext_unstable(context => context.appearance);\n\n const onDismissButtonClick = useEventCallback((ev: React.MouseEvent<HTMLButtonElement>) => {\n if (!ev.defaultPrevented) {\n setOpen(ev, false);\n }\n\n if (triggerRef.current) {\n triggerRef.current.focus();\n }\n });\n\n return {\n appearance,\n components: {\n root: '
|
|
1
|
+
{"version":3,"sources":["../src/components/TeachingPopoverHeader/useTeachingPopoverHeader.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getIntrinsicElementProps, useEventCallback, slot } from '@fluentui/react-utilities';\nimport type { TeachingPopoverHeaderProps, TeachingPopoverHeaderState } from './TeachingPopoverHeader.types';\n\nimport { Dismiss12Regular, Lightbulb16Regular } from '@fluentui/react-icons';\nimport { usePopoverContext_unstable } from '@fluentui/react-popover';\n\n/**\n * Returns the props and state required to render the component\n * @param props - TeachingPopoverHeader properties\n * @param ref - reference to root HTMLElement of TeachingPopoverHeader\n */\nexport const useTeachingPopoverHeader_unstable = (\n props: TeachingPopoverHeaderProps,\n ref: React.Ref<HTMLDivElement>,\n): TeachingPopoverHeaderState => {\n const { dismissButton, icon } = props;\n\n const setOpen = usePopoverContext_unstable(context => context.setOpen);\n const triggerRef = usePopoverContext_unstable(context => context.triggerRef);\n const appearance = usePopoverContext_unstable(context => context.appearance);\n\n const onDismissButtonClick = useEventCallback((ev: React.MouseEvent<HTMLButtonElement>) => {\n if (!ev.defaultPrevented) {\n setOpen(ev, false);\n }\n\n if (triggerRef.current) {\n triggerRef.current.focus();\n }\n });\n\n return {\n appearance,\n components: {\n root: 'div',\n dismissButton: 'button',\n icon: 'div',\n },\n root: slot.always(\n getIntrinsicElementProps('div', {\n ref,\n ...props,\n }),\n { elementType: 'div' },\n ),\n icon: slot.optional(icon, {\n renderByDefault: true,\n defaultProps: {\n children: <Lightbulb16Regular />,\n 'aria-hidden': true,\n },\n elementType: 'div',\n }),\n dismissButton: slot.optional(dismissButton, {\n renderByDefault: true,\n defaultProps: {\n children: <Dismiss12Regular />,\n role: 'button',\n 'aria-label': 'dismiss',\n onClick: onDismissButtonClick,\n },\n elementType: 'button',\n }),\n };\n};\n"],"names":["React","getIntrinsicElementProps","useEventCallback","slot","Dismiss12Regular","Lightbulb16Regular","usePopoverContext_unstable","useTeachingPopoverHeader_unstable","props","ref","dismissButton","icon","setOpen","context","triggerRef","appearance","onDismissButtonClick","ev","defaultPrevented","current","focus","components","root","always","elementType","optional","renderByDefault","defaultProps","children","role","onClick"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,wBAAwB,EAAEC,gBAAgB,EAAEC,IAAI,QAAQ,4BAA4B;AAG7F,SAASC,gBAAgB,EAAEC,kBAAkB,QAAQ,wBAAwB;AAC7E,SAASC,0BAA0B,QAAQ,0BAA0B;AAErE;;;;CAIC,GACD,OAAO,MAAMC,oCAAoC,CAC/CC,OACAC;IAEA,MAAM,EAAEC,aAAa,EAAEC,IAAI,EAAE,GAAGH;IAEhC,MAAMI,UAAUN,2BAA2BO,CAAAA,UAAWA,QAAQD,OAAO;IACrE,MAAME,aAAaR,2BAA2BO,CAAAA,UAAWA,QAAQC,UAAU;IAC3E,MAAMC,aAAaT,2BAA2BO,CAAAA,UAAWA,QAAQE,UAAU;IAE3E,MAAMC,uBAAuBd,iBAAiB,CAACe;QAC7C,IAAI,CAACA,GAAGC,gBAAgB,EAAE;YACxBN,QAAQK,IAAI;QACd;QAEA,IAAIH,WAAWK,OAAO,EAAE;YACtBL,WAAWK,OAAO,CAACC,KAAK;QAC1B;IACF;IAEA,OAAO;QACLL;QACAM,YAAY;YACVC,MAAM;YACNZ,eAAe;YACfC,MAAM;QACR;QACAW,MAAMnB,KAAKoB,MAAM,CACftB,yBAAyB,OAAO;YAC9BQ;YACA,GAAGD,KAAK;QACV,IACA;YAAEgB,aAAa;QAAM;QAEvBb,MAAMR,KAAKsB,QAAQ,CAACd,MAAM;YACxBe,iBAAiB;YACjBC,cAAc;gBACZC,wBAAU,oBAACvB;gBACX,eAAe;YACjB;YACAmB,aAAa;QACf;QACAd,eAAeP,KAAKsB,QAAQ,CAACf,eAAe;YAC1CgB,iBAAiB;YACjBC,cAAc;gBACZC,wBAAU,oBAACxB;gBACXyB,MAAM;gBACN,cAAc;gBACdC,SAASd;YACX;YACAQ,aAAa;QACf;IACF;AACF,EAAE"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/TeachingPopoverCarouselNavButton/useTeachingPopoverCarouselNavButton.tsx"],"sourcesContent":["import * as React from 'react';\nimport { ARIAButtonSlotProps, useARIAButtonProps } from '@fluentui/react-aria';\nimport { usePopoverContext_unstable } from '@fluentui/react-popover';\nimport { useTabsterAttributes } from '@fluentui/react-tabster';\nimport { getIntrinsicElementProps, isHTMLElement, slot, useEventCallback } from '@fluentui/react-utilities';\n\nimport type {\n TeachingPopoverCarouselNavButtonProps,\n TeachingPopoverCarouselNavButtonState,\n} from './TeachingPopoverCarouselNavButton.types';\nimport { useCarouselContext_unstable } from '../TeachingPopoverCarousel/Carousel/CarouselContext';\nimport { useValueIdContext } from '../TeachingPopoverCarouselNav/valueIdContext';\n\n/**\n * Create the state required to render TeachingPopoverCarouselNavButton.\n *\n * The returned state can be modified with hooks such as useTeachingPopoverCarouselNavButtonStyles_unstable,\n * before being passed to renderTeachingPopoverCarouselNavButton_unstable.\n *\n * @param props - props from this instance of TeachingPopoverCarouselNavButton\n * @param ref - reference to root HTMLElement of TeachingPopoverCarouselNavButton\n */\nexport const useTeachingPopoverCarouselNavButton_unstable = (\n props: TeachingPopoverCarouselNavButtonProps,\n ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>,\n): TeachingPopoverCarouselNavButtonState => {\n const { onClick, as = 'a' } = props;\n\n const value = useValueIdContext();\n\n const appearance = usePopoverContext_unstable(context => context.appearance);\n const selectPageByValue = useCarouselContext_unstable(c => c.selectPageByValue);\n const isSelected = useCarouselContext_unstable(c => c.value === value);\n\n const handleClick: ARIAButtonSlotProps<'a'>['onClick'] = useEventCallback(event => {\n onClick?.(event);\n\n if (!event.defaultPrevented && isHTMLElement(event.target)) {\n selectPageByValue(event, value);\n }\n });\n\n const defaultTabProps = useTabsterAttributes({\n focusable: { isDefault: isSelected },\n });\n\n const _carouselButton = slot.always<ARIAButtonSlotProps<'a'>>(\n getIntrinsicElementProps(as, useARIAButtonProps(props.as, props)),\n {\n elementType: 'button',\n defaultProps: {\n ref: ref as React.Ref<HTMLButtonElement & HTMLAnchorElement>,\n role: 'tab',\n type: 'button',\n ...defaultTabProps,\n },\n },\n );\n\n _carouselButton.onClick = handleClick;\n\n const state: TeachingPopoverCarouselNavButtonState = {\n isSelected,\n appearance,\n components: {\n root: 'button',\n },\n root: _carouselButton,\n };\n\n return state;\n};\n"],"names":["useTeachingPopoverCarouselNavButton_unstable","props","ref","onClick","as","value","useValueIdContext","appearance","usePopoverContext_unstable","context","selectPageByValue","useCarouselContext_unstable","c","isSelected","handleClick","useEventCallback","event","defaultPrevented","isHTMLElement","target","defaultTabProps","useTabsterAttributes","focusable","isDefault","_carouselButton","slot","always","getIntrinsicElementProps","useARIAButtonProps","elementType","defaultProps","role","type","state","components","root"],"rangeMappings":"
|
|
1
|
+
{"version":3,"sources":["../src/components/TeachingPopoverCarouselNavButton/useTeachingPopoverCarouselNavButton.tsx"],"sourcesContent":["import * as React from 'react';\nimport { ARIAButtonSlotProps, useARIAButtonProps } from '@fluentui/react-aria';\nimport { usePopoverContext_unstable } from '@fluentui/react-popover';\nimport { useTabsterAttributes } from '@fluentui/react-tabster';\nimport { getIntrinsicElementProps, isHTMLElement, slot, useEventCallback } from '@fluentui/react-utilities';\n\nimport type {\n TeachingPopoverCarouselNavButtonProps,\n TeachingPopoverCarouselNavButtonState,\n} from './TeachingPopoverCarouselNavButton.types';\nimport { useCarouselContext_unstable } from '../TeachingPopoverCarousel/Carousel/CarouselContext';\nimport { useValueIdContext } from '../TeachingPopoverCarouselNav/valueIdContext';\n\n/**\n * Create the state required to render TeachingPopoverCarouselNavButton.\n *\n * The returned state can be modified with hooks such as useTeachingPopoverCarouselNavButtonStyles_unstable,\n * before being passed to renderTeachingPopoverCarouselNavButton_unstable.\n *\n * @param props - props from this instance of TeachingPopoverCarouselNavButton\n * @param ref - reference to root HTMLElement of TeachingPopoverCarouselNavButton\n */\nexport const useTeachingPopoverCarouselNavButton_unstable = (\n props: TeachingPopoverCarouselNavButtonProps,\n ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>,\n): TeachingPopoverCarouselNavButtonState => {\n const { onClick, as = 'a' } = props;\n\n const value = useValueIdContext();\n\n const appearance = usePopoverContext_unstable(context => context.appearance);\n const selectPageByValue = useCarouselContext_unstable(c => c.selectPageByValue);\n const isSelected = useCarouselContext_unstable(c => c.value === value);\n\n const handleClick: ARIAButtonSlotProps<'a'>['onClick'] = useEventCallback(event => {\n onClick?.(event);\n\n if (!event.defaultPrevented && isHTMLElement(event.target)) {\n selectPageByValue(event, value);\n }\n });\n\n const defaultTabProps = useTabsterAttributes({\n focusable: { isDefault: isSelected },\n });\n\n const _carouselButton = slot.always<ARIAButtonSlotProps<'a'>>(\n getIntrinsicElementProps(as, useARIAButtonProps(props.as, props)),\n {\n elementType: 'button',\n defaultProps: {\n ref: ref as React.Ref<HTMLButtonElement & HTMLAnchorElement>,\n role: 'tab',\n type: 'button',\n 'aria-selected': `${!!isSelected}`,\n ...defaultTabProps,\n },\n },\n );\n\n _carouselButton.onClick = handleClick;\n\n const state: TeachingPopoverCarouselNavButtonState = {\n isSelected,\n appearance,\n components: {\n root: 'button',\n },\n root: _carouselButton,\n };\n\n return state;\n};\n"],"names":["useTeachingPopoverCarouselNavButton_unstable","props","ref","onClick","as","value","useValueIdContext","appearance","usePopoverContext_unstable","context","selectPageByValue","useCarouselContext_unstable","c","isSelected","handleClick","useEventCallback","event","defaultPrevented","isHTMLElement","target","defaultTabProps","useTabsterAttributes","focusable","isDefault","_carouselButton","slot","always","getIntrinsicElementProps","useARIAButtonProps","elementType","defaultProps","role","type","state","components","root"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAsBaA;;;eAAAA;;;;iEAtBU;2BACiC;8BACb;8BACN;gCAC2C;iCAMpC;gCACV;AAW3B,MAAMA,+CAA+C,CAC1DC,OACAC;IAEA,MAAM,EAAEC,OAAO,EAAEC,KAAK,GAAG,EAAE,GAAGH;IAE9B,MAAMI,QAAQC,IAAAA,iCAAAA;IAEd,MAAMC,aAAaC,IAAAA,wCAAAA,EAA2BC,CAAAA,UAAWA,QAAQF,UAAU;IAC3E,MAAMG,oBAAoBC,IAAAA,4CAAAA,EAA4BC,CAAAA,IAAKA,EAAEF,iBAAiB;IAC9E,MAAMG,aAAaF,IAAAA,4CAAAA,EAA4BC,CAAAA,IAAKA,EAAEP,KAAK,KAAKA;IAEhE,MAAMS,cAAmDC,IAAAA,gCAAAA,EAAiBC,CAAAA;QACxEb,YAAAA,QAAAA,YAAAA,KAAAA,IAAAA,KAAAA,IAAAA,QAAUa;QAEV,IAAI,CAACA,MAAMC,gBAAgB,IAAIC,IAAAA,6BAAAA,EAAcF,MAAMG,MAAM,GAAG;YAC1DT,kBAAkBM,OAAOX;QAC3B;IACF;IAEA,MAAMe,kBAAkBC,IAAAA,kCAAAA,EAAqB;QAC3CC,WAAW;YAAEC,WAAWV;QAAW;IACrC;IAEA,MAAMW,kBAAkBC,oBAAAA,CAAKC,MAAM,CACjCC,IAAAA,wCAAAA,EAAyBvB,IAAIwB,IAAAA,6BAAAA,EAAmB3B,MAAMG,EAAE,EAAEH,SAC1D;QACE4B,aAAa;QACbC,cAAc;YACZ5B,KAAKA;YACL6B,MAAM;YACNC,MAAM;YACN,iBAAiB,CAAC,EAAE,CAAC,CAACnB,WAAW,CAAC;YAClC,GAAGO,eAAe;QACpB;IACF;IAGFI,gBAAgBrB,OAAO,GAAGW;IAE1B,MAAMmB,QAA+C;QACnDpB;QACAN;QACA2B,YAAY;YACVC,MAAM;QACR;QACAA,MAAMX;IACR;IAEA,OAAOS;AACT"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/TeachingPopoverHeader/TeachingPopoverHeader.types.ts"],"sourcesContent":["import { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport { PopoverContextValue } from '@fluentui/react-popover';\n\nexport type TeachingPopoverHeaderSlots = {\n /**\n * The element wrapping the text and close button. By default this is an
|
|
1
|
+
{"version":3,"sources":["../src/components/TeachingPopoverHeader/TeachingPopoverHeader.types.ts"],"sourcesContent":["import { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport { PopoverContextValue } from '@fluentui/react-popover';\n\nexport type TeachingPopoverHeaderSlots = {\n /**\n * The element wrapping the text and close button. By default this is an div; although it can be a heading, this should not be done.\n * Instead, wrap the child text in a heading tag if one is needed.\n * Be sure to include role and aria heading level if div is used.\n */\n root: Slot<'div', 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'>;\n /**\n * The component to be used as close button in heading\n */\n dismissButton?: Slot<'button'>;\n /**\n * Initial icon slot rendered before children content in heading.\n */\n icon?: Slot<'div'>;\n};\n\nexport type TeachingPopoverHeaderState = ComponentState<TeachingPopoverHeaderSlots> &\n Pick<PopoverContextValue, 'appearance'>;\n\nexport type TeachingPopoverHeaderProps = ComponentProps<TeachingPopoverHeaderSlots>;\n"],"names":[],"rangeMappings":"","mappings":""}
|
|
@@ -29,15 +29,15 @@ const useTeachingPopoverHeader_unstable = (props, ref)=>{
|
|
|
29
29
|
return {
|
|
30
30
|
appearance,
|
|
31
31
|
components: {
|
|
32
|
-
root: '
|
|
32
|
+
root: 'div',
|
|
33
33
|
dismissButton: 'button',
|
|
34
34
|
icon: 'div'
|
|
35
35
|
},
|
|
36
|
-
root: _reactutilities.slot.always((0, _reactutilities.getIntrinsicElementProps)('
|
|
36
|
+
root: _reactutilities.slot.always((0, _reactutilities.getIntrinsicElementProps)('div', {
|
|
37
37
|
ref,
|
|
38
38
|
...props
|
|
39
39
|
}), {
|
|
40
|
-
elementType: '
|
|
40
|
+
elementType: 'div'
|
|
41
41
|
}),
|
|
42
42
|
icon: _reactutilities.slot.optional(icon, {
|
|
43
43
|
renderByDefault: true,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/TeachingPopoverHeader/useTeachingPopoverHeader.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getIntrinsicElementProps, useEventCallback, slot } from '@fluentui/react-utilities';\nimport type { TeachingPopoverHeaderProps, TeachingPopoverHeaderState } from './TeachingPopoverHeader.types';\n\nimport { Dismiss12Regular, Lightbulb16Regular } from '@fluentui/react-icons';\nimport { usePopoverContext_unstable } from '@fluentui/react-popover';\n\n/**\n * Returns the props and state required to render the component\n * @param props - TeachingPopoverHeader properties\n * @param ref - reference to root HTMLElement of TeachingPopoverHeader\n */\nexport const useTeachingPopoverHeader_unstable = (\n props: TeachingPopoverHeaderProps,\n ref: React.Ref<HTMLDivElement>,\n): TeachingPopoverHeaderState => {\n const { dismissButton, icon } = props;\n\n const setOpen = usePopoverContext_unstable(context => context.setOpen);\n const triggerRef = usePopoverContext_unstable(context => context.triggerRef);\n const appearance = usePopoverContext_unstable(context => context.appearance);\n\n const onDismissButtonClick = useEventCallback((ev: React.MouseEvent<HTMLButtonElement>) => {\n if (!ev.defaultPrevented) {\n setOpen(ev, false);\n }\n\n if (triggerRef.current) {\n triggerRef.current.focus();\n }\n });\n\n return {\n appearance,\n components: {\n root: '
|
|
1
|
+
{"version":3,"sources":["../src/components/TeachingPopoverHeader/useTeachingPopoverHeader.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getIntrinsicElementProps, useEventCallback, slot } from '@fluentui/react-utilities';\nimport type { TeachingPopoverHeaderProps, TeachingPopoverHeaderState } from './TeachingPopoverHeader.types';\n\nimport { Dismiss12Regular, Lightbulb16Regular } from '@fluentui/react-icons';\nimport { usePopoverContext_unstable } from '@fluentui/react-popover';\n\n/**\n * Returns the props and state required to render the component\n * @param props - TeachingPopoverHeader properties\n * @param ref - reference to root HTMLElement of TeachingPopoverHeader\n */\nexport const useTeachingPopoverHeader_unstable = (\n props: TeachingPopoverHeaderProps,\n ref: React.Ref<HTMLDivElement>,\n): TeachingPopoverHeaderState => {\n const { dismissButton, icon } = props;\n\n const setOpen = usePopoverContext_unstable(context => context.setOpen);\n const triggerRef = usePopoverContext_unstable(context => context.triggerRef);\n const appearance = usePopoverContext_unstable(context => context.appearance);\n\n const onDismissButtonClick = useEventCallback((ev: React.MouseEvent<HTMLButtonElement>) => {\n if (!ev.defaultPrevented) {\n setOpen(ev, false);\n }\n\n if (triggerRef.current) {\n triggerRef.current.focus();\n }\n });\n\n return {\n appearance,\n components: {\n root: 'div',\n dismissButton: 'button',\n icon: 'div',\n },\n root: slot.always(\n getIntrinsicElementProps('div', {\n ref,\n ...props,\n }),\n { elementType: 'div' },\n ),\n icon: slot.optional(icon, {\n renderByDefault: true,\n defaultProps: {\n children: <Lightbulb16Regular />,\n 'aria-hidden': true,\n },\n elementType: 'div',\n }),\n dismissButton: slot.optional(dismissButton, {\n renderByDefault: true,\n defaultProps: {\n children: <Dismiss12Regular />,\n role: 'button',\n 'aria-label': 'dismiss',\n onClick: onDismissButtonClick,\n },\n elementType: 'button',\n }),\n };\n};\n"],"names":["useTeachingPopoverHeader_unstable","props","ref","dismissButton","icon","setOpen","usePopoverContext_unstable","context","triggerRef","appearance","onDismissButtonClick","useEventCallback","ev","defaultPrevented","current","focus","components","root","slot","always","getIntrinsicElementProps","elementType","optional","renderByDefault","defaultProps","children","React","createElement","Lightbulb16Regular","Dismiss12Regular","role","onClick"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAYaA;;;eAAAA;;;;iEAZU;gCAC0C;4BAGZ;8BACV;AAOpC,MAAMA,oCAAoC,CAC/CC,OACAC;IAEA,MAAM,EAAEC,aAAa,EAAEC,IAAI,EAAE,GAAGH;IAEhC,MAAMI,UAAUC,IAAAA,wCAAAA,EAA2BC,CAAAA,UAAWA,QAAQF,OAAO;IACrE,MAAMG,aAAaF,IAAAA,wCAAAA,EAA2BC,CAAAA,UAAWA,QAAQC,UAAU;IAC3E,MAAMC,aAAaH,IAAAA,wCAAAA,EAA2BC,CAAAA,UAAWA,QAAQE,UAAU;IAE3E,MAAMC,uBAAuBC,IAAAA,gCAAAA,EAAiB,CAACC;QAC7C,IAAI,CAACA,GAAGC,gBAAgB,EAAE;YACxBR,QAAQO,IAAI;QACd;QAEA,IAAIJ,WAAWM,OAAO,EAAE;YACtBN,WAAWM,OAAO,CAACC,KAAK;QAC1B;IACF;IAEA,OAAO;QACLN;QACAO,YAAY;YACVC,MAAM;YACNd,eAAe;YACfC,MAAM;QACR;QACAa,MAAMC,oBAAAA,CAAKC,MAAM,CACfC,IAAAA,wCAAAA,EAAyB,OAAO;YAC9BlB;YACA,GAAGD,KAAK;QACV,IACA;YAAEoB,aAAa;QAAM;QAEvBjB,MAAMc,oBAAAA,CAAKI,QAAQ,CAAClB,MAAM;YACxBmB,iBAAiB;YACjBC,cAAc;gBACZC,UAAAA,WAAAA,GAAUC,OAAAC,aAAA,CAACC,8BAAAA,EAAAA;gBACX,eAAe;YACjB;YACAP,aAAa;QACf;QACAlB,eAAee,oBAAAA,CAAKI,QAAQ,CAACnB,eAAe;YAC1CoB,iBAAiB;YACjBC,cAAc;gBACZC,UAAAA,WAAAA,GAAUC,OAAAC,aAAA,CAACE,4BAAAA,EAAAA;gBACXC,MAAM;gBACN,cAAc;gBACdC,SAASrB;YACX;YACAW,aAAa;QACf;IACF;AACF"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fluentui/react-teaching-popover",
|
|
3
|
-
"version": "9.
|
|
3
|
+
"version": "9.2.0",
|
|
4
4
|
"description": "New fluentui react package",
|
|
5
5
|
"main": "lib-commonjs/index.js",
|
|
6
6
|
"module": "lib/index.js",
|
|
@@ -24,17 +24,17 @@
|
|
|
24
24
|
"@fluentui/scripts-api-extractor": "*"
|
|
25
25
|
},
|
|
26
26
|
"dependencies": {
|
|
27
|
-
"@fluentui/react-jsx-runtime": "^9.0.
|
|
27
|
+
"@fluentui/react-jsx-runtime": "^9.0.49",
|
|
28
28
|
"@fluentui/react-theme": "^9.1.24",
|
|
29
29
|
"@fluentui/react-utilities": "^9.18.19",
|
|
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.9.
|
|
34
|
-
"@fluentui/react-button": "^9.3.
|
|
33
|
+
"@fluentui/react-popover": "^9.9.30",
|
|
34
|
+
"@fluentui/react-button": "^9.3.99",
|
|
35
35
|
"@fluentui/react-tabster": "^9.23.2",
|
|
36
36
|
"@fluentui/react-icons": "^2.0.245",
|
|
37
|
-
"@fluentui/react-aria": "^9.13.
|
|
37
|
+
"@fluentui/react-aria": "^9.13.13",
|
|
38
38
|
"@fluentui/react-context-selector": "^9.1.71",
|
|
39
39
|
"use-sync-external-store": "^1.2.0"
|
|
40
40
|
},
|