From 5c0254af6aab17a04aefa87df0c8bf577e11b943 Mon Sep 17 00:00:00 2001 From: mainframev Date: Wed, 13 May 2026 17:07:20 +0200 Subject: [PATCH 1/4] feat(react-headless-components-preview): add TeachingPopover component --- ...-7c305eb6-2458-4126-b561-228475292c80.json | 7 + ...-f2630a2b-c002-4016-9657-609f6f065d80.json | 7 + .../library/etc/teaching-popover.api.md | 315 ++++++++++++++++++ .../library/package.json | 7 + .../TeachingPopover/TeachingPopover.tsx | 23 ++ .../TeachingPopover/TeachingPopover.types.ts | 37 ++ .../TeachingPopoverBody.tsx | 14 + .../TeachingPopoverBody.types.ts | 5 + .../TeachingPopoverBody/index.ts | 8 + .../renderTeachingPopoverBody.ts | 1 + .../useTeachingPopoverBody.ts | 1 + .../TeachingPopoverCarousel.tsx | 17 + .../TeachingPopoverCarousel.types.ts | 6 + .../TeachingPopoverCarousel/index.ts | 9 + .../renderTeachingPopoverCarousel.ts | 19 ++ .../useTeachingPopoverCarousel.ts | 20 ++ .../TeachingPopoverCarouselCard.tsx | 16 + .../TeachingPopoverCarouselCard.types.ts | 5 + .../TeachingPopoverCarouselCard/index.ts | 8 + .../renderTeachingPopoverCarouselCard.ts | 1 + .../useTeachingPopoverCarouselCard.ts | 1 + .../TeachingPopoverCarouselFooter.tsx | 16 + .../TeachingPopoverCarouselFooter.types.ts | 13 + .../TeachingPopoverCarouselFooter/index.ts | 8 + .../renderTeachingPopoverCarouselFooter.tsx | 14 + .../useTeachingPopoverCarouselFooter.ts | 14 + .../TeachingPopoverCarouselFooterButton.tsx | 15 + ...achingPopoverCarouselFooterButton.types.ts | 5 + .../index.ts | 8 + ...nderTeachingPopoverCarouselFooterButton.ts | 10 + .../useTeachingPopoverCarouselFooterButton.ts | 1 + .../TeachingPopoverCarouselNav.tsx | 16 + .../TeachingPopoverCarouselNav.types.ts | 6 + .../TeachingPopoverCarouselNav/index.ts | 9 + .../renderTeachingPopoverCarouselNav.ts | 1 + .../useTeachingPopoverCarouselNav.ts | 1 + .../TeachingPopoverCarouselNavButton.tsx | 15 + .../TeachingPopoverCarouselNavButton.types.ts | 5 + .../TeachingPopoverCarouselNavButton/index.ts | 8 + .../renderTeachingPopoverCarouselNavButton.ts | 8 + .../useTeachingPopoverCarouselNavButton.ts | 1 + .../TeachingPopoverCarouselPageCount.tsx | 15 + .../TeachingPopoverCarouselPageCount.types.ts | 6 + .../TeachingPopoverCarouselPageCount/index.ts | 9 + .../renderTeachingPopoverCarouselPageCount.ts | 1 + .../useTeachingPopoverCarouselPageCount.ts | 1 + .../TeachingPopoverFooter.tsx | 14 + .../TeachingPopoverFooter.types.ts | 5 + .../TeachingPopoverFooter/index.ts | 4 + .../renderTeachingPopoverFooter.tsx | 16 + .../useTeachingPopoverFooter.ts | 1 + .../TeachingPopoverHeader.tsx | 14 + .../TeachingPopoverHeader.types.ts | 11 + .../TeachingPopoverHeader/index.ts | 8 + .../renderTeachingPopoverHeader.ts | 11 + .../useTeachingPopoverHeader.ts | 1 + .../TeachingPopoverSurface.tsx | 1 + .../TeachingPopoverSurface.types.ts | 5 + .../TeachingPopoverSurface/index.ts | 8 + .../renderTeachingPopoverSurface.tsx | 1 + .../useTeachingPopoverSurface.ts | 1 + .../TeachingPopoverTitle.tsx | 14 + .../TeachingPopoverTitle.types.ts | 11 + .../TeachingPopoverTitle/index.ts | 8 + .../renderTeachingPopoverTitle.ts | 10 + .../useTeachingPopoverTitle.ts | 1 + .../TeachingPopoverTrigger.tsx | 1 + .../TeachingPopoverTrigger.types.ts | 5 + .../TeachingPopoverTrigger/index.ts | 8 + .../renderTeachingPopoverTrigger.ts | 1 + .../useTeachingPopoverTrigger.ts | 1 + .../src/components/TeachingPopover/index.ts | 137 ++++++++ .../TeachingPopover/renderTeachingPopover.tsx | 26 ++ .../TeachingPopover/useTeachingPopover.ts | 14 + .../useTeachingPopoverContextValues.ts | 54 +++ .../library/src/teaching-popover.ts | 93 ++++++ .../TeachingPopoverDefault.stories.tsx | 34 ++ .../TeachingPopoverDescription.md | 3 + .../TeachingPopoverWithCarousel.stories.tsx | 90 +++++ .../src/TeachingPopover/index.stories.tsx | 18 + .../teaching-popover.module.css | 231 +++++++++++++ .../library/etc/react-teaching-popover.api.md | 8 + .../library/src/index.ts | 2 + 83 files changed, 1604 insertions(+) create mode 100644 change/@fluentui-react-headless-components-preview-7c305eb6-2458-4126-b561-228475292c80.json create mode 100644 change/@fluentui-react-teaching-popover-f2630a2b-c002-4016-9657-609f6f065d80.json create mode 100644 packages/react-components/react-headless-components-preview/library/etc/teaching-popover.api.md create mode 100644 packages/react-components/react-headless-components-preview/library/src/components/TeachingPopover/TeachingPopover.tsx create mode 100644 packages/react-components/react-headless-components-preview/library/src/components/TeachingPopover/TeachingPopover.types.ts create mode 100644 packages/react-components/react-headless-components-preview/library/src/components/TeachingPopover/TeachingPopoverBody/TeachingPopoverBody.tsx create mode 100644 packages/react-components/react-headless-components-preview/library/src/components/TeachingPopover/TeachingPopoverBody/TeachingPopoverBody.types.ts create mode 100644 packages/react-components/react-headless-components-preview/library/src/components/TeachingPopover/TeachingPopoverBody/index.ts create mode 100644 packages/react-components/react-headless-components-preview/library/src/components/TeachingPopover/TeachingPopoverBody/renderTeachingPopoverBody.ts create mode 100644 packages/react-components/react-headless-components-preview/library/src/components/TeachingPopover/TeachingPopoverBody/useTeachingPopoverBody.ts create mode 100644 packages/react-components/react-headless-components-preview/library/src/components/TeachingPopover/TeachingPopoverCarousel/TeachingPopoverCarousel.tsx create mode 100644 packages/react-components/react-headless-components-preview/library/src/components/TeachingPopover/TeachingPopoverCarousel/TeachingPopoverCarousel.types.ts create mode 100644 packages/react-components/react-headless-components-preview/library/src/components/TeachingPopover/TeachingPopoverCarousel/index.ts create mode 100644 packages/react-components/react-headless-components-preview/library/src/components/TeachingPopover/TeachingPopoverCarousel/renderTeachingPopoverCarousel.ts create mode 100644 packages/react-components/react-headless-components-preview/library/src/components/TeachingPopover/TeachingPopoverCarousel/useTeachingPopoverCarousel.ts create mode 100644 packages/react-components/react-headless-components-preview/library/src/components/TeachingPopover/TeachingPopoverCarouselCard/TeachingPopoverCarouselCard.tsx create mode 100644 packages/react-components/react-headless-components-preview/library/src/components/TeachingPopover/TeachingPopoverCarouselCard/TeachingPopoverCarouselCard.types.ts create mode 100644 packages/react-components/react-headless-components-preview/library/src/components/TeachingPopover/TeachingPopoverCarouselCard/index.ts create mode 100644 packages/react-components/react-headless-components-preview/library/src/components/TeachingPopover/TeachingPopoverCarouselCard/renderTeachingPopoverCarouselCard.ts create mode 100644 packages/react-components/react-headless-components-preview/library/src/components/TeachingPopover/TeachingPopoverCarouselCard/useTeachingPopoverCarouselCard.ts create mode 100644 packages/react-components/react-headless-components-preview/library/src/components/TeachingPopover/TeachingPopoverCarouselFooter/TeachingPopoverCarouselFooter.tsx create mode 100644 packages/react-components/react-headless-components-preview/library/src/components/TeachingPopover/TeachingPopoverCarouselFooter/TeachingPopoverCarouselFooter.types.ts create mode 100644 packages/react-components/react-headless-components-preview/library/src/components/TeachingPopover/TeachingPopoverCarouselFooter/index.ts create mode 100644 packages/react-components/react-headless-components-preview/library/src/components/TeachingPopover/TeachingPopoverCarouselFooter/renderTeachingPopoverCarouselFooter.tsx create mode 100644 packages/react-components/react-headless-components-preview/library/src/components/TeachingPopover/TeachingPopoverCarouselFooter/useTeachingPopoverCarouselFooter.ts create mode 100644 packages/react-components/react-headless-components-preview/library/src/components/TeachingPopover/TeachingPopoverCarouselFooterButton/TeachingPopoverCarouselFooterButton.tsx create mode 100644 packages/react-components/react-headless-components-preview/library/src/components/TeachingPopover/TeachingPopoverCarouselFooterButton/TeachingPopoverCarouselFooterButton.types.ts create mode 100644 packages/react-components/react-headless-components-preview/library/src/components/TeachingPopover/TeachingPopoverCarouselFooterButton/index.ts create mode 100644 packages/react-components/react-headless-components-preview/library/src/components/TeachingPopover/TeachingPopoverCarouselFooterButton/renderTeachingPopoverCarouselFooterButton.ts create mode 100644 packages/react-components/react-headless-components-preview/library/src/components/TeachingPopover/TeachingPopoverCarouselFooterButton/useTeachingPopoverCarouselFooterButton.ts create mode 100644 packages/react-components/react-headless-components-preview/library/src/components/TeachingPopover/TeachingPopoverCarouselNav/TeachingPopoverCarouselNav.tsx create mode 100644 packages/react-components/react-headless-components-preview/library/src/components/TeachingPopover/TeachingPopoverCarouselNav/TeachingPopoverCarouselNav.types.ts create mode 100644 packages/react-components/react-headless-components-preview/library/src/components/TeachingPopover/TeachingPopoverCarouselNav/index.ts create mode 100644 packages/react-components/react-headless-components-preview/library/src/components/TeachingPopover/TeachingPopoverCarouselNav/renderTeachingPopoverCarouselNav.ts create mode 100644 packages/react-components/react-headless-components-preview/library/src/components/TeachingPopover/TeachingPopoverCarouselNav/useTeachingPopoverCarouselNav.ts create mode 100644 packages/react-components/react-headless-components-preview/library/src/components/TeachingPopover/TeachingPopoverCarouselNavButton/TeachingPopoverCarouselNavButton.tsx create mode 100644 packages/react-components/react-headless-components-preview/library/src/components/TeachingPopover/TeachingPopoverCarouselNavButton/TeachingPopoverCarouselNavButton.types.ts create mode 100644 packages/react-components/react-headless-components-preview/library/src/components/TeachingPopover/TeachingPopoverCarouselNavButton/index.ts create mode 100644 packages/react-components/react-headless-components-preview/library/src/components/TeachingPopover/TeachingPopoverCarouselNavButton/renderTeachingPopoverCarouselNavButton.ts create mode 100644 packages/react-components/react-headless-components-preview/library/src/components/TeachingPopover/TeachingPopoverCarouselNavButton/useTeachingPopoverCarouselNavButton.ts create mode 100644 packages/react-components/react-headless-components-preview/library/src/components/TeachingPopover/TeachingPopoverCarouselPageCount/TeachingPopoverCarouselPageCount.tsx create mode 100644 packages/react-components/react-headless-components-preview/library/src/components/TeachingPopover/TeachingPopoverCarouselPageCount/TeachingPopoverCarouselPageCount.types.ts create mode 100644 packages/react-components/react-headless-components-preview/library/src/components/TeachingPopover/TeachingPopoverCarouselPageCount/index.ts create mode 100644 packages/react-components/react-headless-components-preview/library/src/components/TeachingPopover/TeachingPopoverCarouselPageCount/renderTeachingPopoverCarouselPageCount.ts create mode 100644 packages/react-components/react-headless-components-preview/library/src/components/TeachingPopover/TeachingPopoverCarouselPageCount/useTeachingPopoverCarouselPageCount.ts create mode 100644 packages/react-components/react-headless-components-preview/library/src/components/TeachingPopover/TeachingPopoverFooter/TeachingPopoverFooter.tsx create mode 100644 packages/react-components/react-headless-components-preview/library/src/components/TeachingPopover/TeachingPopoverFooter/TeachingPopoverFooter.types.ts create mode 100644 packages/react-components/react-headless-components-preview/library/src/components/TeachingPopover/TeachingPopoverFooter/index.ts create mode 100644 packages/react-components/react-headless-components-preview/library/src/components/TeachingPopover/TeachingPopoverFooter/renderTeachingPopoverFooter.tsx create mode 100644 packages/react-components/react-headless-components-preview/library/src/components/TeachingPopover/TeachingPopoverFooter/useTeachingPopoverFooter.ts create mode 100644 packages/react-components/react-headless-components-preview/library/src/components/TeachingPopover/TeachingPopoverHeader/TeachingPopoverHeader.tsx create mode 100644 packages/react-components/react-headless-components-preview/library/src/components/TeachingPopover/TeachingPopoverHeader/TeachingPopoverHeader.types.ts create mode 100644 packages/react-components/react-headless-components-preview/library/src/components/TeachingPopover/TeachingPopoverHeader/index.ts create mode 100644 packages/react-components/react-headless-components-preview/library/src/components/TeachingPopover/TeachingPopoverHeader/renderTeachingPopoverHeader.ts create mode 100644 packages/react-components/react-headless-components-preview/library/src/components/TeachingPopover/TeachingPopoverHeader/useTeachingPopoverHeader.ts create mode 100644 packages/react-components/react-headless-components-preview/library/src/components/TeachingPopover/TeachingPopoverSurface/TeachingPopoverSurface.tsx create mode 100644 packages/react-components/react-headless-components-preview/library/src/components/TeachingPopover/TeachingPopoverSurface/TeachingPopoverSurface.types.ts create mode 100644 packages/react-components/react-headless-components-preview/library/src/components/TeachingPopover/TeachingPopoverSurface/index.ts create mode 100644 packages/react-components/react-headless-components-preview/library/src/components/TeachingPopover/TeachingPopoverSurface/renderTeachingPopoverSurface.tsx create mode 100644 packages/react-components/react-headless-components-preview/library/src/components/TeachingPopover/TeachingPopoverSurface/useTeachingPopoverSurface.ts create mode 100644 packages/react-components/react-headless-components-preview/library/src/components/TeachingPopover/TeachingPopoverTitle/TeachingPopoverTitle.tsx create mode 100644 packages/react-components/react-headless-components-preview/library/src/components/TeachingPopover/TeachingPopoverTitle/TeachingPopoverTitle.types.ts create mode 100644 packages/react-components/react-headless-components-preview/library/src/components/TeachingPopover/TeachingPopoverTitle/index.ts create mode 100644 packages/react-components/react-headless-components-preview/library/src/components/TeachingPopover/TeachingPopoverTitle/renderTeachingPopoverTitle.ts create mode 100644 packages/react-components/react-headless-components-preview/library/src/components/TeachingPopover/TeachingPopoverTitle/useTeachingPopoverTitle.ts create mode 100644 packages/react-components/react-headless-components-preview/library/src/components/TeachingPopover/TeachingPopoverTrigger/TeachingPopoverTrigger.tsx create mode 100644 packages/react-components/react-headless-components-preview/library/src/components/TeachingPopover/TeachingPopoverTrigger/TeachingPopoverTrigger.types.ts create mode 100644 packages/react-components/react-headless-components-preview/library/src/components/TeachingPopover/TeachingPopoverTrigger/index.ts create mode 100644 packages/react-components/react-headless-components-preview/library/src/components/TeachingPopover/TeachingPopoverTrigger/renderTeachingPopoverTrigger.ts create mode 100644 packages/react-components/react-headless-components-preview/library/src/components/TeachingPopover/TeachingPopoverTrigger/useTeachingPopoverTrigger.ts create mode 100644 packages/react-components/react-headless-components-preview/library/src/components/TeachingPopover/index.ts create mode 100644 packages/react-components/react-headless-components-preview/library/src/components/TeachingPopover/renderTeachingPopover.tsx create mode 100644 packages/react-components/react-headless-components-preview/library/src/components/TeachingPopover/useTeachingPopover.ts create mode 100644 packages/react-components/react-headless-components-preview/library/src/components/TeachingPopover/useTeachingPopoverContextValues.ts create mode 100644 packages/react-components/react-headless-components-preview/library/src/teaching-popover.ts create mode 100644 packages/react-components/react-headless-components-preview/stories/src/TeachingPopover/TeachingPopoverDefault.stories.tsx create mode 100644 packages/react-components/react-headless-components-preview/stories/src/TeachingPopover/TeachingPopoverDescription.md create mode 100644 packages/react-components/react-headless-components-preview/stories/src/TeachingPopover/TeachingPopoverWithCarousel.stories.tsx create mode 100644 packages/react-components/react-headless-components-preview/stories/src/TeachingPopover/index.stories.tsx create mode 100644 packages/react-components/react-headless-components-preview/stories/src/TeachingPopover/teaching-popover.module.css diff --git a/change/@fluentui-react-headless-components-preview-7c305eb6-2458-4126-b561-228475292c80.json b/change/@fluentui-react-headless-components-preview-7c305eb6-2458-4126-b561-228475292c80.json new file mode 100644 index 00000000000000..37cadcb05535da --- /dev/null +++ b/change/@fluentui-react-headless-components-preview-7c305eb6-2458-4126-b561-228475292c80.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "feat: add headless TeachingPopover composed on top of the headless Popover and the v9 react-teaching-popover base hooks", + "packageName": "@fluentui/react-headless-components-preview", + "email": "viktorgenaev@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-teaching-popover-f2630a2b-c002-4016-9657-609f6f065d80.json b/change/@fluentui-react-teaching-popover-f2630a2b-c002-4016-9657-609f6f065d80.json new file mode 100644 index 00000000000000..5e61b175480f16 --- /dev/null +++ b/change/@fluentui-react-teaching-popover-f2630a2b-c002-4016-9657-609f6f065d80.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "feat: re-export TeachingPopoverCarouselContextValues and NavButtonRenderFunction types from the package barrel", + "packageName": "@fluentui/react-teaching-popover", + "email": "viktorgenaev@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/packages/react-components/react-headless-components-preview/library/etc/teaching-popover.api.md b/packages/react-components/react-headless-components-preview/library/etc/teaching-popover.api.md new file mode 100644 index 00000000000000..ce1e45b29bae80 --- /dev/null +++ b/packages/react-components/react-headless-components-preview/library/etc/teaching-popover.api.md @@ -0,0 +1,315 @@ +## API Report File for "@fluentui/react-headless-components-preview" + +> Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/). + +```ts + +import type { ARIAButtonType } from '@fluentui/react-aria'; +import type { ComponentProps } from '@fluentui/react-utilities'; +import type { ComponentState } from '@fluentui/react-utilities'; +import type { EventData } from '@fluentui/react-utilities'; +import type { EventHandler } from '@fluentui/react-utilities'; +import type { ForwardRefComponent } from '@fluentui/react-utilities'; +import type { JSXElement } from '@fluentui/react-utilities'; +import { NavButtonRenderFunction } from '@fluentui/react-teaching-popover'; +import type { PopoverContextValue as PopoverContextValue_2 } from '@fluentui/react-popover'; +import type { PopoverTriggerChildProps } from '@fluentui/react-popover'; +import { PositioningShorthand } from '@fluentui/react-positioning'; +import * as React_2 from 'react'; +import { renderTeachingPopoverBody_unstable as renderTeachingPopoverBody } from '@fluentui/react-teaching-popover'; +import { renderTeachingPopoverCarouselCard_unstable as renderTeachingPopoverCarouselCard } from '@fluentui/react-teaching-popover'; +import { renderTeachingPopoverCarouselNav_unstable as renderTeachingPopoverCarouselNav } from '@fluentui/react-teaching-popover'; +import { renderTeachingPopoverCarouselPageCount_unstable as renderTeachingPopoverCarouselPageCount } from '@fluentui/react-teaching-popover'; +import type { Slot } from '@fluentui/react-utilities'; +import { TeachingPopoverBodyProps } from '@fluentui/react-teaching-popover'; +import { TeachingPopoverBodySlots } from '@fluentui/react-teaching-popover'; +import { TeachingPopoverBodyState } from '@fluentui/react-teaching-popover'; +import { TeachingPopoverCarouselCardProps } from '@fluentui/react-teaching-popover'; +import { TeachingPopoverCarouselCardSlots } from '@fluentui/react-teaching-popover'; +import { TeachingPopoverCarouselCardState } from '@fluentui/react-teaching-popover'; +import { TeachingPopoverCarouselContextValues } from '@fluentui/react-teaching-popover'; +import { TeachingPopoverCarouselFooterButtonBaseProps as TeachingPopoverCarouselFooterButtonProps } from '@fluentui/react-teaching-popover'; +import { TeachingPopoverCarouselFooterButtonSlots } from '@fluentui/react-teaching-popover'; +import { TeachingPopoverCarouselFooterButtonBaseState as TeachingPopoverCarouselFooterButtonState } from '@fluentui/react-teaching-popover'; +import { TeachingPopoverCarouselNavButtonBaseProps as TeachingPopoverCarouselNavButtonProps } from '@fluentui/react-teaching-popover'; +import { TeachingPopoverCarouselNavButtonSlots } from '@fluentui/react-teaching-popover'; +import { TeachingPopoverCarouselNavButtonBaseState as TeachingPopoverCarouselNavButtonState } from '@fluentui/react-teaching-popover'; +import { TeachingPopoverCarouselNavBaseProps as TeachingPopoverCarouselNavProps } from '@fluentui/react-teaching-popover'; +import { TeachingPopoverCarouselNavSlots } from '@fluentui/react-teaching-popover'; +import { TeachingPopoverCarouselNavBaseState as TeachingPopoverCarouselNavState } from '@fluentui/react-teaching-popover'; +import { TeachingPopoverCarouselPageCountProps } from '@fluentui/react-teaching-popover'; +import { TeachingPopoverCarouselPageCountRenderFunction } from '@fluentui/react-teaching-popover'; +import { TeachingPopoverCarouselPageCountSlots } from '@fluentui/react-teaching-popover'; +import { TeachingPopoverCarouselPageCountState } from '@fluentui/react-teaching-popover'; +import { TeachingPopoverCarouselBaseProps as TeachingPopoverCarouselProps } from '@fluentui/react-teaching-popover'; +import { TeachingPopoverCarouselSlots } from '@fluentui/react-teaching-popover'; +import { TeachingPopoverCarouselBaseState as TeachingPopoverCarouselState } from '@fluentui/react-teaching-popover'; +import type { TeachingPopoverFooterBaseProps } from '@fluentui/react-teaching-popover'; +import type { TeachingPopoverFooterBaseState } from '@fluentui/react-teaching-popover'; +import type { TeachingPopoverHeaderBaseProps } from '@fluentui/react-teaching-popover'; +import type { TeachingPopoverHeaderBaseState } from '@fluentui/react-teaching-popover'; +import type { TeachingPopoverHeaderSlots } from '@fluentui/react-teaching-popover'; +import type { TeachingPopoverTitleBaseProps } from '@fluentui/react-teaching-popover'; +import type { TeachingPopoverTitleBaseState } from '@fluentui/react-teaching-popover'; +import type { TeachingPopoverTitleSlots } from '@fluentui/react-teaching-popover'; +import type { TriggerProps } from '@fluentui/react-utilities'; +import { useTeachingPopoverBody_unstable as useTeachingPopoverBody } from '@fluentui/react-teaching-popover'; +import { useTeachingPopoverCarouselBase_unstable as useTeachingPopoverCarousel } from '@fluentui/react-teaching-popover'; +import { useTeachingPopoverCarouselCard_unstable as useTeachingPopoverCarouselCard } from '@fluentui/react-teaching-popover'; +import { useTeachingPopoverCarouselFooterButtonBase_unstable as useTeachingPopoverCarouselFooterButton } from '@fluentui/react-teaching-popover'; +import { useTeachingPopoverCarouselNavBase_unstable as useTeachingPopoverCarouselNav } from '@fluentui/react-teaching-popover'; +import { useTeachingPopoverCarouselNavButtonBase_unstable as useTeachingPopoverCarouselNavButton } from '@fluentui/react-teaching-popover'; +import { useTeachingPopoverCarouselPageCount_unstable as useTeachingPopoverCarouselPageCount } from '@fluentui/react-teaching-popover'; +import { useTeachingPopoverFooterBase_unstable as useTeachingPopoverFooter } from '@fluentui/react-teaching-popover'; +import { useTeachingPopoverHeaderBase_unstable as useTeachingPopoverHeader } from '@fluentui/react-teaching-popover'; +import { useTeachingPopoverTitleBase_unstable as useTeachingPopoverTitle } from '@fluentui/react-teaching-popover'; + +export { NavButtonRenderFunction } + +// @public +export const renderTeachingPopover: (state: TeachingPopoverState, contextValues: TeachingPopoverContextValues) => React_2.ReactElement; + +export { renderTeachingPopoverBody } + +// @public +export const renderTeachingPopoverCarousel: (state: TeachingPopoverCarouselState, contextValues: TeachingPopoverCarouselContextValues) => JSXElement; + +export { renderTeachingPopoverCarouselCard } + +// @public (undocumented) +export const renderTeachingPopoverCarouselFooter: (state: TeachingPopoverCarouselFooterState) => JSXElement; + +// @public (undocumented) +export const renderTeachingPopoverCarouselFooterButton: (state: TeachingPopoverCarouselFooterButtonState) => JSXElement; + +export { renderTeachingPopoverCarouselNav } + +// @public (undocumented) +export const renderTeachingPopoverCarouselNavButton: (state: TeachingPopoverCarouselNavButtonState) => JSXElement; + +export { renderTeachingPopoverCarouselPageCount } + +// @public +export const renderTeachingPopoverFooter: (state: TeachingPopoverFooterState) => JSXElement; + +// @public +export const renderTeachingPopoverHeader: (state: TeachingPopoverHeaderState) => JSXElement; + +// @public (undocumented) +export const renderTeachingPopoverSurface: (state: TeachingPopoverSurfaceState) => JSXElement; + +// @public +export const renderTeachingPopoverTitle: (state: TeachingPopoverTitleState) => JSXElement; + +// @public +export const renderTeachingPopoverTrigger: (state: TeachingPopoverTriggerState) => JSXElement | null; + +// @public +export const TeachingPopover: { + (props: TeachingPopoverProps): JSXElement; + displayName: string; +}; + +// @public (undocumented) +export const TeachingPopoverBody: ForwardRefComponent; + +export { TeachingPopoverBodyProps } + +export { TeachingPopoverBodySlots } + +export { TeachingPopoverBodyState } + +// @public (undocumented) +export const TeachingPopoverCarousel: ForwardRefComponent; + +// @public (undocumented) +export const TeachingPopoverCarouselCard: ForwardRefComponent; + +export { TeachingPopoverCarouselCardProps } + +export { TeachingPopoverCarouselCardSlots } + +export { TeachingPopoverCarouselCardState } + +export { TeachingPopoverCarouselContextValues } + +// @public (undocumented) +export const TeachingPopoverCarouselFooter: ForwardRefComponent; + +// @public (undocumented) +export const TeachingPopoverCarouselFooterButton: ForwardRefComponent; + +export { TeachingPopoverCarouselFooterButtonProps } + +export { TeachingPopoverCarouselFooterButtonSlots } + +export { TeachingPopoverCarouselFooterButtonState } + +// @public (undocumented) +export type TeachingPopoverCarouselFooterProps = ComponentProps; + +// @public (undocumented) +export type TeachingPopoverCarouselFooterSlots = { + root: NonNullable>; +}; + +// @public (undocumented) +export type TeachingPopoverCarouselFooterState = ComponentState; + +// @public (undocumented) +export const TeachingPopoverCarouselNav: ForwardRefComponent; + +// @public (undocumented) +export const TeachingPopoverCarouselNavButton: ForwardRefComponent; + +export { TeachingPopoverCarouselNavButtonProps } + +export { TeachingPopoverCarouselNavButtonSlots } + +export { TeachingPopoverCarouselNavButtonState } + +export { TeachingPopoverCarouselNavProps } + +export { TeachingPopoverCarouselNavSlots } + +export { TeachingPopoverCarouselNavState } + +// @public (undocumented) +export const TeachingPopoverCarouselPageCount: ForwardRefComponent; + +export { TeachingPopoverCarouselPageCountProps } + +export { TeachingPopoverCarouselPageCountRenderFunction } + +export { TeachingPopoverCarouselPageCountSlots } + +export { TeachingPopoverCarouselPageCountState } + +export { TeachingPopoverCarouselProps } + +export { TeachingPopoverCarouselSlots } + +export { TeachingPopoverCarouselState } + +// @public (undocumented) +export type TeachingPopoverContextValues = { + popover: PopoverContextValue; + v9Popover: TeachingPopoverV9BridgedContextValue; +}; + +// @public (undocumented) +export const TeachingPopoverFooter: ForwardRefComponent; + +// @public (undocumented) +export type TeachingPopoverFooterProps = TeachingPopoverFooterBaseProps; + +// @public (undocumented) +export type TeachingPopoverFooterState = TeachingPopoverFooterBaseState; + +// @public (undocumented) +export const TeachingPopoverHeader: ForwardRefComponent; + +// @public (undocumented) +export type TeachingPopoverHeaderProps = TeachingPopoverHeaderBaseProps; + +export { TeachingPopoverHeaderSlots } + +// @public (undocumented) +export type TeachingPopoverHeaderState = TeachingPopoverHeaderBaseState; + +// @public +export type TeachingPopoverProps = PopoverProps; + +// @public +export type TeachingPopoverState = PopoverState; + +// @public +export const TeachingPopoverSurface: ForwardRefComponent; + +// @public (undocumented) +export type TeachingPopoverSurfaceProps = ComponentProps; + +// @public +export type TeachingPopoverSurfaceSlots = { + root: Slot<'div'>; +}; + +// @public (undocumented) +export type TeachingPopoverSurfaceState = ComponentState & { + withArrow: boolean | undefined; + arrowRef: React_2.RefObject; + 'data-open': string; +}; + +// @public (undocumented) +export const TeachingPopoverTitle: ForwardRefComponent; + +// @public (undocumented) +export type TeachingPopoverTitleProps = TeachingPopoverTitleBaseProps; + +export { TeachingPopoverTitleSlots } + +// @public (undocumented) +export type TeachingPopoverTitleState = TeachingPopoverTitleBaseState; + +// @public +export const TeachingPopoverTrigger: React_2.FC; + +// @public +export type TeachingPopoverTriggerChildProps = PopoverTriggerChildProps; + +// @public +export type TeachingPopoverTriggerProps = Omit, 'children'> & { + children: React_2.ReactElement; + disableButtonEnhancement?: boolean; +}; + +// @public +export type TeachingPopoverTriggerState = { + children: React_2.ReactElement | null; +}; + +// @public +export type TeachingPopoverV9BridgedContextValue = Pick; + +// @public +export const useTeachingPopover: (props: TeachingPopoverProps) => TeachingPopoverState; + +export { useTeachingPopoverBody } + +export { useTeachingPopoverCarousel } + +export { useTeachingPopoverCarouselCard } + +// @public +export const useTeachingPopoverCarouselContextValues: (state: TeachingPopoverCarouselState) => TeachingPopoverCarouselContextValues; + +// @public (undocumented) +export const useTeachingPopoverCarouselFooter: (props: TeachingPopoverCarouselFooterProps, ref: React_2.Ref) => TeachingPopoverCarouselFooterState; + +export { useTeachingPopoverCarouselFooterButton } + +export { useTeachingPopoverCarouselNav } + +export { useTeachingPopoverCarouselNavButton } + +export { useTeachingPopoverCarouselPageCount } + +// @public +export const useTeachingPopoverContextValues: (state: TeachingPopoverState) => TeachingPopoverContextValues; + +export { useTeachingPopoverFooter } + +export { useTeachingPopoverHeader } + +// @public +export const useTeachingPopoverSurface: (props: TeachingPopoverSurfaceProps, ref: React_2.Ref) => TeachingPopoverSurfaceState; + +export { useTeachingPopoverTitle } + +// @public +export const useTeachingPopoverTrigger: (props: TeachingPopoverTriggerProps) => TeachingPopoverTriggerState; + +// (No @packageDocumentation comment for this package) + +``` diff --git a/packages/react-components/react-headless-components-preview/library/package.json b/packages/react-components/react-headless-components-preview/library/package.json index 527a2145fbe4ad..b9ab9ec6438a04 100644 --- a/packages/react-components/react-headless-components-preview/library/package.json +++ b/packages/react-components/react-headless-components-preview/library/package.json @@ -56,6 +56,7 @@ "@fluentui/react-switch": "^9.7.2", "@fluentui/react-tabs": "^9.12.1", "@fluentui/react-tabster": "^9.26.14", + "@fluentui/react-teaching-popover": "^9.6.21", "@fluentui/react-tags": "^9.8.1", "@fluentui/react-textarea": "^9.7.2", "@fluentui/react-toolbar": "^9.8.0", @@ -274,6 +275,12 @@ "import": "./lib/tab-list.js", "require": "./lib-commonjs/tab-list.js" }, + "./teaching-popover": { + "types": "./dist/teaching-popover.d.ts", + "node": "./lib-commonjs/teaching-popover.js", + "import": "./lib/teaching-popover.js", + "require": "./lib-commonjs/teaching-popover.js" + }, "./textarea": { "types": "./dist/textarea.d.ts", "node": "./lib-commonjs/textarea.js", diff --git a/packages/react-components/react-headless-components-preview/library/src/components/TeachingPopover/TeachingPopover.tsx b/packages/react-components/react-headless-components-preview/library/src/components/TeachingPopover/TeachingPopover.tsx new file mode 100644 index 00000000000000..fbbd5cb5af8b6e --- /dev/null +++ b/packages/react-components/react-headless-components-preview/library/src/components/TeachingPopover/TeachingPopover.tsx @@ -0,0 +1,23 @@ +'use client'; + +import type { JSXElement } from '@fluentui/react-utilities'; +import type { TeachingPopoverProps } from './TeachingPopover.types'; +import { useTeachingPopover } from './useTeachingPopover'; +import { useTeachingPopoverContextValues } from './useTeachingPopoverContextValues'; +import { renderTeachingPopover } from './renderTeachingPopover'; + +/** + * Headless TeachingPopover component. + * + * Wraps the headless `Popover` and additionally bridges the v9 + * `PopoverContext` so sub-components built on `useTeachingPopover*Base_unstable` + * hooks from `@fluentui/react-teaching-popover` resolve their context reads. + */ +export const TeachingPopover = (props: TeachingPopoverProps): JSXElement => { + const state = useTeachingPopover(props); + const contextValues = useTeachingPopoverContextValues(state); + + return renderTeachingPopover(state, contextValues); +}; + +TeachingPopover.displayName = 'TeachingPopover'; diff --git a/packages/react-components/react-headless-components-preview/library/src/components/TeachingPopover/TeachingPopover.types.ts b/packages/react-components/react-headless-components-preview/library/src/components/TeachingPopover/TeachingPopover.types.ts new file mode 100644 index 00000000000000..1846d7f264e357 --- /dev/null +++ b/packages/react-components/react-headless-components-preview/library/src/components/TeachingPopover/TeachingPopover.types.ts @@ -0,0 +1,37 @@ +import type { PopoverContextValue as V9PopoverContextValue } from '@fluentui/react-popover'; +import type { PopoverProps, PopoverState, PopoverContextValue } from '../Popover/Popover.types'; + +/** + * TeachingPopover Props + */ +export type TeachingPopoverProps = PopoverProps; + +/** + * TeachingPopover State — identical to the headless Popover state. Styling + * concerns from the v9 component (`appearance`, `trapFocus`, `inline`) are + * intentionally omitted; consumers control presentation. + */ +export type TeachingPopoverState = PopoverState; + +/** + * Subset of the v9 `PopoverContextValue` that the v9 teaching-popover base + * hooks actually read (`toggleOpen`, `setOpen`, `triggerRef`). The other v9 + * fields fall back to `popoverContextDefaultValue` from `@fluentui/react-popover`. + */ +export type TeachingPopoverV9BridgedContextValue = Pick< + V9PopoverContextValue, + | 'open' + | 'setOpen' + | 'toggleOpen' + | 'triggerRef' + | 'contentRef' + | 'arrowRef' + | 'openOnHover' + | 'openOnContext' + | 'withArrow' +>; + +export type TeachingPopoverContextValues = { + popover: PopoverContextValue; + v9Popover: TeachingPopoverV9BridgedContextValue; +}; diff --git a/packages/react-components/react-headless-components-preview/library/src/components/TeachingPopover/TeachingPopoverBody/TeachingPopoverBody.tsx b/packages/react-components/react-headless-components-preview/library/src/components/TeachingPopover/TeachingPopoverBody/TeachingPopoverBody.tsx new file mode 100644 index 00000000000000..ff2c17262f98d5 --- /dev/null +++ b/packages/react-components/react-headless-components-preview/library/src/components/TeachingPopover/TeachingPopoverBody/TeachingPopoverBody.tsx @@ -0,0 +1,14 @@ +'use client'; + +import * as React from 'react'; +import type { ForwardRefComponent } from '@fluentui/react-utilities'; +import type { TeachingPopoverBodyProps } from './TeachingPopoverBody.types'; +import { useTeachingPopoverBody } from './useTeachingPopoverBody'; +import { renderTeachingPopoverBody } from './renderTeachingPopoverBody'; + +export const TeachingPopoverBody: ForwardRefComponent = React.forwardRef((props, ref) => { + const state = useTeachingPopoverBody(props, ref); + return renderTeachingPopoverBody(state); +}); + +TeachingPopoverBody.displayName = 'TeachingPopoverBody'; diff --git a/packages/react-components/react-headless-components-preview/library/src/components/TeachingPopover/TeachingPopoverBody/TeachingPopoverBody.types.ts b/packages/react-components/react-headless-components-preview/library/src/components/TeachingPopover/TeachingPopoverBody/TeachingPopoverBody.types.ts new file mode 100644 index 00000000000000..29dc0c22fe142d --- /dev/null +++ b/packages/react-components/react-headless-components-preview/library/src/components/TeachingPopover/TeachingPopoverBody/TeachingPopoverBody.types.ts @@ -0,0 +1,5 @@ +export type { + TeachingPopoverBodyProps, + TeachingPopoverBodySlots, + TeachingPopoverBodyState, +} from '@fluentui/react-teaching-popover'; diff --git a/packages/react-components/react-headless-components-preview/library/src/components/TeachingPopover/TeachingPopoverBody/index.ts b/packages/react-components/react-headless-components-preview/library/src/components/TeachingPopover/TeachingPopoverBody/index.ts new file mode 100644 index 00000000000000..56c5d3d564796d --- /dev/null +++ b/packages/react-components/react-headless-components-preview/library/src/components/TeachingPopover/TeachingPopoverBody/index.ts @@ -0,0 +1,8 @@ +export { TeachingPopoverBody } from './TeachingPopoverBody'; +export { useTeachingPopoverBody } from './useTeachingPopoverBody'; +export { renderTeachingPopoverBody } from './renderTeachingPopoverBody'; +export type { + TeachingPopoverBodyProps, + TeachingPopoverBodySlots, + TeachingPopoverBodyState, +} from './TeachingPopoverBody.types'; diff --git a/packages/react-components/react-headless-components-preview/library/src/components/TeachingPopover/TeachingPopoverBody/renderTeachingPopoverBody.ts b/packages/react-components/react-headless-components-preview/library/src/components/TeachingPopover/TeachingPopoverBody/renderTeachingPopoverBody.ts new file mode 100644 index 00000000000000..28077e68cbfd41 --- /dev/null +++ b/packages/react-components/react-headless-components-preview/library/src/components/TeachingPopover/TeachingPopoverBody/renderTeachingPopoverBody.ts @@ -0,0 +1 @@ +export { renderTeachingPopoverBody_unstable as renderTeachingPopoverBody } from '@fluentui/react-teaching-popover'; diff --git a/packages/react-components/react-headless-components-preview/library/src/components/TeachingPopover/TeachingPopoverBody/useTeachingPopoverBody.ts b/packages/react-components/react-headless-components-preview/library/src/components/TeachingPopover/TeachingPopoverBody/useTeachingPopoverBody.ts new file mode 100644 index 00000000000000..bdb775e24fbd6f --- /dev/null +++ b/packages/react-components/react-headless-components-preview/library/src/components/TeachingPopover/TeachingPopoverBody/useTeachingPopoverBody.ts @@ -0,0 +1 @@ +export { useTeachingPopoverBody_unstable as useTeachingPopoverBody } from '@fluentui/react-teaching-popover'; diff --git a/packages/react-components/react-headless-components-preview/library/src/components/TeachingPopover/TeachingPopoverCarousel/TeachingPopoverCarousel.tsx b/packages/react-components/react-headless-components-preview/library/src/components/TeachingPopover/TeachingPopoverCarousel/TeachingPopoverCarousel.tsx new file mode 100644 index 00000000000000..01c1d61731a1af --- /dev/null +++ b/packages/react-components/react-headless-components-preview/library/src/components/TeachingPopover/TeachingPopoverCarousel/TeachingPopoverCarousel.tsx @@ -0,0 +1,17 @@ +'use client'; + +import * as React from 'react'; +import type { ForwardRefComponent } from '@fluentui/react-utilities'; +import type { TeachingPopoverCarouselProps } from './TeachingPopoverCarousel.types'; +import { useTeachingPopoverCarousel, useTeachingPopoverCarouselContextValues } from './useTeachingPopoverCarousel'; +import { renderTeachingPopoverCarousel } from './renderTeachingPopoverCarousel'; + +export const TeachingPopoverCarousel: ForwardRefComponent = React.forwardRef( + (props, ref) => { + const state = useTeachingPopoverCarousel(props, ref); + const contextValues = useTeachingPopoverCarouselContextValues(state); + return renderTeachingPopoverCarousel(state, contextValues); + }, +); + +TeachingPopoverCarousel.displayName = 'TeachingPopoverCarousel'; diff --git a/packages/react-components/react-headless-components-preview/library/src/components/TeachingPopover/TeachingPopoverCarousel/TeachingPopoverCarousel.types.ts b/packages/react-components/react-headless-components-preview/library/src/components/TeachingPopover/TeachingPopoverCarousel/TeachingPopoverCarousel.types.ts new file mode 100644 index 00000000000000..312d61d3c926c1 --- /dev/null +++ b/packages/react-components/react-headless-components-preview/library/src/components/TeachingPopover/TeachingPopoverCarousel/TeachingPopoverCarousel.types.ts @@ -0,0 +1,6 @@ +export type { + TeachingPopoverCarouselBaseProps as TeachingPopoverCarouselProps, + TeachingPopoverCarouselBaseState as TeachingPopoverCarouselState, + TeachingPopoverCarouselContextValues, + TeachingPopoverCarouselSlots, +} from '@fluentui/react-teaching-popover'; diff --git a/packages/react-components/react-headless-components-preview/library/src/components/TeachingPopover/TeachingPopoverCarousel/index.ts b/packages/react-components/react-headless-components-preview/library/src/components/TeachingPopover/TeachingPopoverCarousel/index.ts new file mode 100644 index 00000000000000..d9384c9a2ea826 --- /dev/null +++ b/packages/react-components/react-headless-components-preview/library/src/components/TeachingPopover/TeachingPopoverCarousel/index.ts @@ -0,0 +1,9 @@ +export { TeachingPopoverCarousel } from './TeachingPopoverCarousel'; +export { useTeachingPopoverCarousel, useTeachingPopoverCarouselContextValues } from './useTeachingPopoverCarousel'; +export { renderTeachingPopoverCarousel } from './renderTeachingPopoverCarousel'; +export type { + TeachingPopoverCarouselProps, + TeachingPopoverCarouselState, + TeachingPopoverCarouselSlots, + TeachingPopoverCarouselContextValues, +} from './TeachingPopoverCarousel.types'; diff --git a/packages/react-components/react-headless-components-preview/library/src/components/TeachingPopover/TeachingPopoverCarousel/renderTeachingPopoverCarousel.ts b/packages/react-components/react-headless-components-preview/library/src/components/TeachingPopover/TeachingPopoverCarousel/renderTeachingPopoverCarousel.ts new file mode 100644 index 00000000000000..8bbbaefee7691a --- /dev/null +++ b/packages/react-components/react-headless-components-preview/library/src/components/TeachingPopover/TeachingPopoverCarousel/renderTeachingPopoverCarousel.ts @@ -0,0 +1,19 @@ +import { renderTeachingPopoverCarousel_unstable } from '@fluentui/react-teaching-popover'; +import type { JSXElement } from '@fluentui/react-utilities'; +import type { + TeachingPopoverCarouselContextValues, + TeachingPopoverCarouselState, +} from './TeachingPopoverCarousel.types'; + +/** + * Cast to v9's render signature — base state omits `appearance` and the + * render only reads the root slot and wraps with `CarouselProvider`. + */ +export const renderTeachingPopoverCarousel = ( + state: TeachingPopoverCarouselState, + contextValues: TeachingPopoverCarouselContextValues, +): JSXElement => + renderTeachingPopoverCarousel_unstable( + state as Parameters[0], + contextValues, + ); diff --git a/packages/react-components/react-headless-components-preview/library/src/components/TeachingPopover/TeachingPopoverCarousel/useTeachingPopoverCarousel.ts b/packages/react-components/react-headless-components-preview/library/src/components/TeachingPopover/TeachingPopoverCarousel/useTeachingPopoverCarousel.ts new file mode 100644 index 00000000000000..ddadae93db77a0 --- /dev/null +++ b/packages/react-components/react-headless-components-preview/library/src/components/TeachingPopover/TeachingPopoverCarousel/useTeachingPopoverCarousel.ts @@ -0,0 +1,20 @@ +'use client'; + +import { useTeachingPopoverCarouselContextValues_unstable } from '@fluentui/react-teaching-popover'; +import type { + TeachingPopoverCarouselContextValues, + TeachingPopoverCarouselState, +} from './TeachingPopoverCarousel.types'; + +export { useTeachingPopoverCarouselBase_unstable as useTeachingPopoverCarousel } from '@fluentui/react-teaching-popover'; + +/** + * Cast around the v9 contextValues helper, which is typed against the + * styled state but only reads carousel fields that exist on the base state. + */ +export const useTeachingPopoverCarouselContextValues = ( + state: TeachingPopoverCarouselState, +): TeachingPopoverCarouselContextValues => + useTeachingPopoverCarouselContextValues_unstable( + state as Parameters[0], + ); diff --git a/packages/react-components/react-headless-components-preview/library/src/components/TeachingPopover/TeachingPopoverCarouselCard/TeachingPopoverCarouselCard.tsx b/packages/react-components/react-headless-components-preview/library/src/components/TeachingPopover/TeachingPopoverCarouselCard/TeachingPopoverCarouselCard.tsx new file mode 100644 index 00000000000000..05187f14c36577 --- /dev/null +++ b/packages/react-components/react-headless-components-preview/library/src/components/TeachingPopover/TeachingPopoverCarouselCard/TeachingPopoverCarouselCard.tsx @@ -0,0 +1,16 @@ +'use client'; + +import * as React from 'react'; +import type { ForwardRefComponent } from '@fluentui/react-utilities'; +import type { TeachingPopoverCarouselCardProps } from './TeachingPopoverCarouselCard.types'; +import { useTeachingPopoverCarouselCard } from './useTeachingPopoverCarouselCard'; +import { renderTeachingPopoverCarouselCard } from './renderTeachingPopoverCarouselCard'; + +export const TeachingPopoverCarouselCard: ForwardRefComponent = React.forwardRef( + (props, ref) => { + const state = useTeachingPopoverCarouselCard(props, ref); + return renderTeachingPopoverCarouselCard(state); + }, +); + +TeachingPopoverCarouselCard.displayName = 'TeachingPopoverCarouselCard'; diff --git a/packages/react-components/react-headless-components-preview/library/src/components/TeachingPopover/TeachingPopoverCarouselCard/TeachingPopoverCarouselCard.types.ts b/packages/react-components/react-headless-components-preview/library/src/components/TeachingPopover/TeachingPopoverCarouselCard/TeachingPopoverCarouselCard.types.ts new file mode 100644 index 00000000000000..d5b40c259db6d4 --- /dev/null +++ b/packages/react-components/react-headless-components-preview/library/src/components/TeachingPopover/TeachingPopoverCarouselCard/TeachingPopoverCarouselCard.types.ts @@ -0,0 +1,5 @@ +export type { + TeachingPopoverCarouselCardProps, + TeachingPopoverCarouselCardSlots, + TeachingPopoverCarouselCardState, +} from '@fluentui/react-teaching-popover'; diff --git a/packages/react-components/react-headless-components-preview/library/src/components/TeachingPopover/TeachingPopoverCarouselCard/index.ts b/packages/react-components/react-headless-components-preview/library/src/components/TeachingPopover/TeachingPopoverCarouselCard/index.ts new file mode 100644 index 00000000000000..a53dead1da05f1 --- /dev/null +++ b/packages/react-components/react-headless-components-preview/library/src/components/TeachingPopover/TeachingPopoverCarouselCard/index.ts @@ -0,0 +1,8 @@ +export { TeachingPopoverCarouselCard } from './TeachingPopoverCarouselCard'; +export { useTeachingPopoverCarouselCard } from './useTeachingPopoverCarouselCard'; +export { renderTeachingPopoverCarouselCard } from './renderTeachingPopoverCarouselCard'; +export type { + TeachingPopoverCarouselCardProps, + TeachingPopoverCarouselCardSlots, + TeachingPopoverCarouselCardState, +} from './TeachingPopoverCarouselCard.types'; diff --git a/packages/react-components/react-headless-components-preview/library/src/components/TeachingPopover/TeachingPopoverCarouselCard/renderTeachingPopoverCarouselCard.ts b/packages/react-components/react-headless-components-preview/library/src/components/TeachingPopover/TeachingPopoverCarouselCard/renderTeachingPopoverCarouselCard.ts new file mode 100644 index 00000000000000..a81ed09667e72b --- /dev/null +++ b/packages/react-components/react-headless-components-preview/library/src/components/TeachingPopover/TeachingPopoverCarouselCard/renderTeachingPopoverCarouselCard.ts @@ -0,0 +1 @@ +export { renderTeachingPopoverCarouselCard_unstable as renderTeachingPopoverCarouselCard } from '@fluentui/react-teaching-popover'; diff --git a/packages/react-components/react-headless-components-preview/library/src/components/TeachingPopover/TeachingPopoverCarouselCard/useTeachingPopoverCarouselCard.ts b/packages/react-components/react-headless-components-preview/library/src/components/TeachingPopover/TeachingPopoverCarouselCard/useTeachingPopoverCarouselCard.ts new file mode 100644 index 00000000000000..6e36fd10ce16b0 --- /dev/null +++ b/packages/react-components/react-headless-components-preview/library/src/components/TeachingPopover/TeachingPopoverCarouselCard/useTeachingPopoverCarouselCard.ts @@ -0,0 +1 @@ +export { useTeachingPopoverCarouselCard_unstable as useTeachingPopoverCarouselCard } from '@fluentui/react-teaching-popover'; diff --git a/packages/react-components/react-headless-components-preview/library/src/components/TeachingPopover/TeachingPopoverCarouselFooter/TeachingPopoverCarouselFooter.tsx b/packages/react-components/react-headless-components-preview/library/src/components/TeachingPopover/TeachingPopoverCarouselFooter/TeachingPopoverCarouselFooter.tsx new file mode 100644 index 00000000000000..30ee96c879ab11 --- /dev/null +++ b/packages/react-components/react-headless-components-preview/library/src/components/TeachingPopover/TeachingPopoverCarouselFooter/TeachingPopoverCarouselFooter.tsx @@ -0,0 +1,16 @@ +'use client'; + +import * as React from 'react'; +import type { ForwardRefComponent } from '@fluentui/react-utilities'; +import type { TeachingPopoverCarouselFooterProps } from './TeachingPopoverCarouselFooter.types'; +import { useTeachingPopoverCarouselFooter } from './useTeachingPopoverCarouselFooter'; +import { renderTeachingPopoverCarouselFooter } from './renderTeachingPopoverCarouselFooter'; + +export const TeachingPopoverCarouselFooter: ForwardRefComponent = React.forwardRef( + (props, ref) => { + const state = useTeachingPopoverCarouselFooter(props, ref); + return renderTeachingPopoverCarouselFooter(state); + }, +); + +TeachingPopoverCarouselFooter.displayName = 'TeachingPopoverCarouselFooter'; diff --git a/packages/react-components/react-headless-components-preview/library/src/components/TeachingPopover/TeachingPopoverCarouselFooter/TeachingPopoverCarouselFooter.types.ts b/packages/react-components/react-headless-components-preview/library/src/components/TeachingPopover/TeachingPopoverCarouselFooter/TeachingPopoverCarouselFooter.types.ts new file mode 100644 index 00000000000000..9b5ee386be94c7 --- /dev/null +++ b/packages/react-components/react-headless-components-preview/library/src/components/TeachingPopover/TeachingPopoverCarouselFooter/TeachingPopoverCarouselFooter.types.ts @@ -0,0 +1,13 @@ +import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities'; + +export type TeachingPopoverCarouselFooterSlots = { + /** + * The element wrapping carousel navigation children (previous/next buttons, + * page count, etc.). Consumers compose children directly — no default slots. + */ + root: NonNullable>; +}; + +export type TeachingPopoverCarouselFooterProps = ComponentProps; + +export type TeachingPopoverCarouselFooterState = ComponentState; diff --git a/packages/react-components/react-headless-components-preview/library/src/components/TeachingPopover/TeachingPopoverCarouselFooter/index.ts b/packages/react-components/react-headless-components-preview/library/src/components/TeachingPopover/TeachingPopoverCarouselFooter/index.ts new file mode 100644 index 00000000000000..3f21fc3b86db9f --- /dev/null +++ b/packages/react-components/react-headless-components-preview/library/src/components/TeachingPopover/TeachingPopoverCarouselFooter/index.ts @@ -0,0 +1,8 @@ +export { TeachingPopoverCarouselFooter } from './TeachingPopoverCarouselFooter'; +export { useTeachingPopoverCarouselFooter } from './useTeachingPopoverCarouselFooter'; +export { renderTeachingPopoverCarouselFooter } from './renderTeachingPopoverCarouselFooter'; +export type { + TeachingPopoverCarouselFooterProps, + TeachingPopoverCarouselFooterSlots, + TeachingPopoverCarouselFooterState, +} from './TeachingPopoverCarouselFooter.types'; diff --git a/packages/react-components/react-headless-components-preview/library/src/components/TeachingPopover/TeachingPopoverCarouselFooter/renderTeachingPopoverCarouselFooter.tsx b/packages/react-components/react-headless-components-preview/library/src/components/TeachingPopover/TeachingPopoverCarouselFooter/renderTeachingPopoverCarouselFooter.tsx new file mode 100644 index 00000000000000..e79819a55a84d2 --- /dev/null +++ b/packages/react-components/react-headless-components-preview/library/src/components/TeachingPopover/TeachingPopoverCarouselFooter/renderTeachingPopoverCarouselFooter.tsx @@ -0,0 +1,14 @@ +/** @jsxRuntime automatic */ +/** @jsxImportSource @fluentui/react-jsx-runtime */ +import { assertSlots } from '@fluentui/react-utilities'; +import type { JSXElement } from '@fluentui/react-utilities'; +import type { + TeachingPopoverCarouselFooterSlots, + TeachingPopoverCarouselFooterState, +} from './TeachingPopoverCarouselFooter.types'; + +export const renderTeachingPopoverCarouselFooter = (state: TeachingPopoverCarouselFooterState): JSXElement => { + assertSlots(state); + + return ; +}; diff --git a/packages/react-components/react-headless-components-preview/library/src/components/TeachingPopover/TeachingPopoverCarouselFooter/useTeachingPopoverCarouselFooter.ts b/packages/react-components/react-headless-components-preview/library/src/components/TeachingPopover/TeachingPopoverCarouselFooter/useTeachingPopoverCarouselFooter.ts new file mode 100644 index 00000000000000..0cb7e56def2a73 --- /dev/null +++ b/packages/react-components/react-headless-components-preview/library/src/components/TeachingPopover/TeachingPopoverCarouselFooter/useTeachingPopoverCarouselFooter.ts @@ -0,0 +1,14 @@ +import type * as React from 'react'; +import { getIntrinsicElementProps, slot } from '@fluentui/react-utilities'; +import type { + TeachingPopoverCarouselFooterProps, + TeachingPopoverCarouselFooterState, +} from './TeachingPopoverCarouselFooter.types'; + +export const useTeachingPopoverCarouselFooter = ( + props: TeachingPopoverCarouselFooterProps, + ref: React.Ref, +): TeachingPopoverCarouselFooterState => ({ + components: { root: 'div' }, + root: slot.always(getIntrinsicElementProps('div', { ref, ...props }), { elementType: 'div' }), +}); diff --git a/packages/react-components/react-headless-components-preview/library/src/components/TeachingPopover/TeachingPopoverCarouselFooterButton/TeachingPopoverCarouselFooterButton.tsx b/packages/react-components/react-headless-components-preview/library/src/components/TeachingPopover/TeachingPopoverCarouselFooterButton/TeachingPopoverCarouselFooterButton.tsx new file mode 100644 index 00000000000000..64bf60d65284ea --- /dev/null +++ b/packages/react-components/react-headless-components-preview/library/src/components/TeachingPopover/TeachingPopoverCarouselFooterButton/TeachingPopoverCarouselFooterButton.tsx @@ -0,0 +1,15 @@ +'use client'; + +import * as React from 'react'; +import type { ForwardRefComponent } from '@fluentui/react-utilities'; +import type { TeachingPopoverCarouselFooterButtonProps } from './TeachingPopoverCarouselFooterButton.types'; +import { useTeachingPopoverCarouselFooterButton } from './useTeachingPopoverCarouselFooterButton'; +import { renderTeachingPopoverCarouselFooterButton } from './renderTeachingPopoverCarouselFooterButton'; + +export const TeachingPopoverCarouselFooterButton: ForwardRefComponent = + React.forwardRef((props, ref) => { + const state = useTeachingPopoverCarouselFooterButton(props, ref); + return renderTeachingPopoverCarouselFooterButton(state); + }); + +TeachingPopoverCarouselFooterButton.displayName = 'TeachingPopoverCarouselFooterButton'; diff --git a/packages/react-components/react-headless-components-preview/library/src/components/TeachingPopover/TeachingPopoverCarouselFooterButton/TeachingPopoverCarouselFooterButton.types.ts b/packages/react-components/react-headless-components-preview/library/src/components/TeachingPopover/TeachingPopoverCarouselFooterButton/TeachingPopoverCarouselFooterButton.types.ts new file mode 100644 index 00000000000000..4cbc1e7df06769 --- /dev/null +++ b/packages/react-components/react-headless-components-preview/library/src/components/TeachingPopover/TeachingPopoverCarouselFooterButton/TeachingPopoverCarouselFooterButton.types.ts @@ -0,0 +1,5 @@ +export type { + TeachingPopoverCarouselFooterButtonBaseProps as TeachingPopoverCarouselFooterButtonProps, + TeachingPopoverCarouselFooterButtonBaseState as TeachingPopoverCarouselFooterButtonState, + TeachingPopoverCarouselFooterButtonSlots, +} from '@fluentui/react-teaching-popover'; diff --git a/packages/react-components/react-headless-components-preview/library/src/components/TeachingPopover/TeachingPopoverCarouselFooterButton/index.ts b/packages/react-components/react-headless-components-preview/library/src/components/TeachingPopover/TeachingPopoverCarouselFooterButton/index.ts new file mode 100644 index 00000000000000..d856cd93ae5feb --- /dev/null +++ b/packages/react-components/react-headless-components-preview/library/src/components/TeachingPopover/TeachingPopoverCarouselFooterButton/index.ts @@ -0,0 +1,8 @@ +export { TeachingPopoverCarouselFooterButton } from './TeachingPopoverCarouselFooterButton'; +export { useTeachingPopoverCarouselFooterButton } from './useTeachingPopoverCarouselFooterButton'; +export { renderTeachingPopoverCarouselFooterButton } from './renderTeachingPopoverCarouselFooterButton'; +export type { + TeachingPopoverCarouselFooterButtonProps, + TeachingPopoverCarouselFooterButtonSlots, + TeachingPopoverCarouselFooterButtonState, +} from './TeachingPopoverCarouselFooterButton.types'; diff --git a/packages/react-components/react-headless-components-preview/library/src/components/TeachingPopover/TeachingPopoverCarouselFooterButton/renderTeachingPopoverCarouselFooterButton.ts b/packages/react-components/react-headless-components-preview/library/src/components/TeachingPopover/TeachingPopoverCarouselFooterButton/renderTeachingPopoverCarouselFooterButton.ts new file mode 100644 index 00000000000000..588c1c82ad3a68 --- /dev/null +++ b/packages/react-components/react-headless-components-preview/library/src/components/TeachingPopover/TeachingPopoverCarouselFooterButton/renderTeachingPopoverCarouselFooterButton.ts @@ -0,0 +1,10 @@ +import { renderTeachingPopoverCarouselFooterButton_unstable } from '@fluentui/react-teaching-popover'; +import type { JSXElement } from '@fluentui/react-utilities'; +import type { TeachingPopoverCarouselFooterButtonState } from './TeachingPopoverCarouselFooterButton.types'; + +export const renderTeachingPopoverCarouselFooterButton = ( + state: TeachingPopoverCarouselFooterButtonState, +): JSXElement => + renderTeachingPopoverCarouselFooterButton_unstable( + state as Parameters[0], + ); diff --git a/packages/react-components/react-headless-components-preview/library/src/components/TeachingPopover/TeachingPopoverCarouselFooterButton/useTeachingPopoverCarouselFooterButton.ts b/packages/react-components/react-headless-components-preview/library/src/components/TeachingPopover/TeachingPopoverCarouselFooterButton/useTeachingPopoverCarouselFooterButton.ts new file mode 100644 index 00000000000000..20b5a5fbc27746 --- /dev/null +++ b/packages/react-components/react-headless-components-preview/library/src/components/TeachingPopover/TeachingPopoverCarouselFooterButton/useTeachingPopoverCarouselFooterButton.ts @@ -0,0 +1 @@ +export { useTeachingPopoverCarouselFooterButtonBase_unstable as useTeachingPopoverCarouselFooterButton } from '@fluentui/react-teaching-popover'; diff --git a/packages/react-components/react-headless-components-preview/library/src/components/TeachingPopover/TeachingPopoverCarouselNav/TeachingPopoverCarouselNav.tsx b/packages/react-components/react-headless-components-preview/library/src/components/TeachingPopover/TeachingPopoverCarouselNav/TeachingPopoverCarouselNav.tsx new file mode 100644 index 00000000000000..1f14f8df92338c --- /dev/null +++ b/packages/react-components/react-headless-components-preview/library/src/components/TeachingPopover/TeachingPopoverCarouselNav/TeachingPopoverCarouselNav.tsx @@ -0,0 +1,16 @@ +'use client'; + +import * as React from 'react'; +import type { ForwardRefComponent } from '@fluentui/react-utilities'; +import type { TeachingPopoverCarouselNavProps } from './TeachingPopoverCarouselNav.types'; +import { useTeachingPopoverCarouselNav } from './useTeachingPopoverCarouselNav'; +import { renderTeachingPopoverCarouselNav } from './renderTeachingPopoverCarouselNav'; + +export const TeachingPopoverCarouselNav: ForwardRefComponent = React.forwardRef( + (props, ref) => { + const state = useTeachingPopoverCarouselNav(props, ref); + return renderTeachingPopoverCarouselNav(state); + }, +); + +TeachingPopoverCarouselNav.displayName = 'TeachingPopoverCarouselNav'; diff --git a/packages/react-components/react-headless-components-preview/library/src/components/TeachingPopover/TeachingPopoverCarouselNav/TeachingPopoverCarouselNav.types.ts b/packages/react-components/react-headless-components-preview/library/src/components/TeachingPopover/TeachingPopoverCarouselNav/TeachingPopoverCarouselNav.types.ts new file mode 100644 index 00000000000000..f62c05b6ae043c --- /dev/null +++ b/packages/react-components/react-headless-components-preview/library/src/components/TeachingPopover/TeachingPopoverCarouselNav/TeachingPopoverCarouselNav.types.ts @@ -0,0 +1,6 @@ +export type { + NavButtonRenderFunction, + TeachingPopoverCarouselNavBaseProps as TeachingPopoverCarouselNavProps, + TeachingPopoverCarouselNavBaseState as TeachingPopoverCarouselNavState, + TeachingPopoverCarouselNavSlots, +} from '@fluentui/react-teaching-popover'; diff --git a/packages/react-components/react-headless-components-preview/library/src/components/TeachingPopover/TeachingPopoverCarouselNav/index.ts b/packages/react-components/react-headless-components-preview/library/src/components/TeachingPopover/TeachingPopoverCarouselNav/index.ts new file mode 100644 index 00000000000000..6c1cef917871f7 --- /dev/null +++ b/packages/react-components/react-headless-components-preview/library/src/components/TeachingPopover/TeachingPopoverCarouselNav/index.ts @@ -0,0 +1,9 @@ +export { TeachingPopoverCarouselNav } from './TeachingPopoverCarouselNav'; +export { useTeachingPopoverCarouselNav } from './useTeachingPopoverCarouselNav'; +export { renderTeachingPopoverCarouselNav } from './renderTeachingPopoverCarouselNav'; +export type { + NavButtonRenderFunction, + TeachingPopoverCarouselNavProps, + TeachingPopoverCarouselNavSlots, + TeachingPopoverCarouselNavState, +} from './TeachingPopoverCarouselNav.types'; diff --git a/packages/react-components/react-headless-components-preview/library/src/components/TeachingPopover/TeachingPopoverCarouselNav/renderTeachingPopoverCarouselNav.ts b/packages/react-components/react-headless-components-preview/library/src/components/TeachingPopover/TeachingPopoverCarouselNav/renderTeachingPopoverCarouselNav.ts new file mode 100644 index 00000000000000..fab62afc1d776d --- /dev/null +++ b/packages/react-components/react-headless-components-preview/library/src/components/TeachingPopover/TeachingPopoverCarouselNav/renderTeachingPopoverCarouselNav.ts @@ -0,0 +1 @@ +export { renderTeachingPopoverCarouselNav_unstable as renderTeachingPopoverCarouselNav } from '@fluentui/react-teaching-popover'; diff --git a/packages/react-components/react-headless-components-preview/library/src/components/TeachingPopover/TeachingPopoverCarouselNav/useTeachingPopoverCarouselNav.ts b/packages/react-components/react-headless-components-preview/library/src/components/TeachingPopover/TeachingPopoverCarouselNav/useTeachingPopoverCarouselNav.ts new file mode 100644 index 00000000000000..b45308f926dbde --- /dev/null +++ b/packages/react-components/react-headless-components-preview/library/src/components/TeachingPopover/TeachingPopoverCarouselNav/useTeachingPopoverCarouselNav.ts @@ -0,0 +1 @@ +export { useTeachingPopoverCarouselNavBase_unstable as useTeachingPopoverCarouselNav } from '@fluentui/react-teaching-popover'; diff --git a/packages/react-components/react-headless-components-preview/library/src/components/TeachingPopover/TeachingPopoverCarouselNavButton/TeachingPopoverCarouselNavButton.tsx b/packages/react-components/react-headless-components-preview/library/src/components/TeachingPopover/TeachingPopoverCarouselNavButton/TeachingPopoverCarouselNavButton.tsx new file mode 100644 index 00000000000000..950ef5cd35f011 --- /dev/null +++ b/packages/react-components/react-headless-components-preview/library/src/components/TeachingPopover/TeachingPopoverCarouselNavButton/TeachingPopoverCarouselNavButton.tsx @@ -0,0 +1,15 @@ +'use client'; + +import * as React from 'react'; +import type { ForwardRefComponent } from '@fluentui/react-utilities'; +import type { TeachingPopoverCarouselNavButtonProps } from './TeachingPopoverCarouselNavButton.types'; +import { useTeachingPopoverCarouselNavButton } from './useTeachingPopoverCarouselNavButton'; +import { renderTeachingPopoverCarouselNavButton } from './renderTeachingPopoverCarouselNavButton'; + +export const TeachingPopoverCarouselNavButton: ForwardRefComponent = + React.forwardRef((props, ref) => { + const state = useTeachingPopoverCarouselNavButton(props, ref); + return renderTeachingPopoverCarouselNavButton(state); + }); + +TeachingPopoverCarouselNavButton.displayName = 'TeachingPopoverCarouselNavButton'; diff --git a/packages/react-components/react-headless-components-preview/library/src/components/TeachingPopover/TeachingPopoverCarouselNavButton/TeachingPopoverCarouselNavButton.types.ts b/packages/react-components/react-headless-components-preview/library/src/components/TeachingPopover/TeachingPopoverCarouselNavButton/TeachingPopoverCarouselNavButton.types.ts new file mode 100644 index 00000000000000..7dfec37bacd764 --- /dev/null +++ b/packages/react-components/react-headless-components-preview/library/src/components/TeachingPopover/TeachingPopoverCarouselNavButton/TeachingPopoverCarouselNavButton.types.ts @@ -0,0 +1,5 @@ +export type { + TeachingPopoverCarouselNavButtonBaseProps as TeachingPopoverCarouselNavButtonProps, + TeachingPopoverCarouselNavButtonBaseState as TeachingPopoverCarouselNavButtonState, + TeachingPopoverCarouselNavButtonSlots, +} from '@fluentui/react-teaching-popover'; diff --git a/packages/react-components/react-headless-components-preview/library/src/components/TeachingPopover/TeachingPopoverCarouselNavButton/index.ts b/packages/react-components/react-headless-components-preview/library/src/components/TeachingPopover/TeachingPopoverCarouselNavButton/index.ts new file mode 100644 index 00000000000000..67988db7679214 --- /dev/null +++ b/packages/react-components/react-headless-components-preview/library/src/components/TeachingPopover/TeachingPopoverCarouselNavButton/index.ts @@ -0,0 +1,8 @@ +export { TeachingPopoverCarouselNavButton } from './TeachingPopoverCarouselNavButton'; +export { useTeachingPopoverCarouselNavButton } from './useTeachingPopoverCarouselNavButton'; +export { renderTeachingPopoverCarouselNavButton } from './renderTeachingPopoverCarouselNavButton'; +export type { + TeachingPopoverCarouselNavButtonProps, + TeachingPopoverCarouselNavButtonSlots, + TeachingPopoverCarouselNavButtonState, +} from './TeachingPopoverCarouselNavButton.types'; diff --git a/packages/react-components/react-headless-components-preview/library/src/components/TeachingPopover/TeachingPopoverCarouselNavButton/renderTeachingPopoverCarouselNavButton.ts b/packages/react-components/react-headless-components-preview/library/src/components/TeachingPopover/TeachingPopoverCarouselNavButton/renderTeachingPopoverCarouselNavButton.ts new file mode 100644 index 00000000000000..8720fa32861e3f --- /dev/null +++ b/packages/react-components/react-headless-components-preview/library/src/components/TeachingPopover/TeachingPopoverCarouselNavButton/renderTeachingPopoverCarouselNavButton.ts @@ -0,0 +1,8 @@ +import { renderTeachingPopoverCarouselNavButton_unstable } from '@fluentui/react-teaching-popover'; +import type { JSXElement } from '@fluentui/react-utilities'; +import type { TeachingPopoverCarouselNavButtonState } from './TeachingPopoverCarouselNavButton.types'; + +export const renderTeachingPopoverCarouselNavButton = (state: TeachingPopoverCarouselNavButtonState): JSXElement => + renderTeachingPopoverCarouselNavButton_unstable( + state as Parameters[0], + ); diff --git a/packages/react-components/react-headless-components-preview/library/src/components/TeachingPopover/TeachingPopoverCarouselNavButton/useTeachingPopoverCarouselNavButton.ts b/packages/react-components/react-headless-components-preview/library/src/components/TeachingPopover/TeachingPopoverCarouselNavButton/useTeachingPopoverCarouselNavButton.ts new file mode 100644 index 00000000000000..bbeeaee8591be6 --- /dev/null +++ b/packages/react-components/react-headless-components-preview/library/src/components/TeachingPopover/TeachingPopoverCarouselNavButton/useTeachingPopoverCarouselNavButton.ts @@ -0,0 +1 @@ +export { useTeachingPopoverCarouselNavButtonBase_unstable as useTeachingPopoverCarouselNavButton } from '@fluentui/react-teaching-popover'; diff --git a/packages/react-components/react-headless-components-preview/library/src/components/TeachingPopover/TeachingPopoverCarouselPageCount/TeachingPopoverCarouselPageCount.tsx b/packages/react-components/react-headless-components-preview/library/src/components/TeachingPopover/TeachingPopoverCarouselPageCount/TeachingPopoverCarouselPageCount.tsx new file mode 100644 index 00000000000000..0db9501040dbfa --- /dev/null +++ b/packages/react-components/react-headless-components-preview/library/src/components/TeachingPopover/TeachingPopoverCarouselPageCount/TeachingPopoverCarouselPageCount.tsx @@ -0,0 +1,15 @@ +'use client'; + +import * as React from 'react'; +import type { ForwardRefComponent } from '@fluentui/react-utilities'; +import type { TeachingPopoverCarouselPageCountProps } from './TeachingPopoverCarouselPageCount.types'; +import { useTeachingPopoverCarouselPageCount } from './useTeachingPopoverCarouselPageCount'; +import { renderTeachingPopoverCarouselPageCount } from './renderTeachingPopoverCarouselPageCount'; + +export const TeachingPopoverCarouselPageCount: ForwardRefComponent = + React.forwardRef((props, ref) => { + const state = useTeachingPopoverCarouselPageCount(props, ref); + return renderTeachingPopoverCarouselPageCount(state); + }); + +TeachingPopoverCarouselPageCount.displayName = 'TeachingPopoverCarouselPageCount'; diff --git a/packages/react-components/react-headless-components-preview/library/src/components/TeachingPopover/TeachingPopoverCarouselPageCount/TeachingPopoverCarouselPageCount.types.ts b/packages/react-components/react-headless-components-preview/library/src/components/TeachingPopover/TeachingPopoverCarouselPageCount/TeachingPopoverCarouselPageCount.types.ts new file mode 100644 index 00000000000000..66b1eb6baf46f9 --- /dev/null +++ b/packages/react-components/react-headless-components-preview/library/src/components/TeachingPopover/TeachingPopoverCarouselPageCount/TeachingPopoverCarouselPageCount.types.ts @@ -0,0 +1,6 @@ +export type { + TeachingPopoverCarouselPageCountProps, + TeachingPopoverCarouselPageCountRenderFunction, + TeachingPopoverCarouselPageCountSlots, + TeachingPopoverCarouselPageCountState, +} from '@fluentui/react-teaching-popover'; diff --git a/packages/react-components/react-headless-components-preview/library/src/components/TeachingPopover/TeachingPopoverCarouselPageCount/index.ts b/packages/react-components/react-headless-components-preview/library/src/components/TeachingPopover/TeachingPopoverCarouselPageCount/index.ts new file mode 100644 index 00000000000000..0dcdbf4256f6e6 --- /dev/null +++ b/packages/react-components/react-headless-components-preview/library/src/components/TeachingPopover/TeachingPopoverCarouselPageCount/index.ts @@ -0,0 +1,9 @@ +export { TeachingPopoverCarouselPageCount } from './TeachingPopoverCarouselPageCount'; +export { useTeachingPopoverCarouselPageCount } from './useTeachingPopoverCarouselPageCount'; +export { renderTeachingPopoverCarouselPageCount } from './renderTeachingPopoverCarouselPageCount'; +export type { + TeachingPopoverCarouselPageCountProps, + TeachingPopoverCarouselPageCountRenderFunction, + TeachingPopoverCarouselPageCountSlots, + TeachingPopoverCarouselPageCountState, +} from './TeachingPopoverCarouselPageCount.types'; diff --git a/packages/react-components/react-headless-components-preview/library/src/components/TeachingPopover/TeachingPopoverCarouselPageCount/renderTeachingPopoverCarouselPageCount.ts b/packages/react-components/react-headless-components-preview/library/src/components/TeachingPopover/TeachingPopoverCarouselPageCount/renderTeachingPopoverCarouselPageCount.ts new file mode 100644 index 00000000000000..5798ec16684b31 --- /dev/null +++ b/packages/react-components/react-headless-components-preview/library/src/components/TeachingPopover/TeachingPopoverCarouselPageCount/renderTeachingPopoverCarouselPageCount.ts @@ -0,0 +1 @@ +export { renderTeachingPopoverCarouselPageCount_unstable as renderTeachingPopoverCarouselPageCount } from '@fluentui/react-teaching-popover'; diff --git a/packages/react-components/react-headless-components-preview/library/src/components/TeachingPopover/TeachingPopoverCarouselPageCount/useTeachingPopoverCarouselPageCount.ts b/packages/react-components/react-headless-components-preview/library/src/components/TeachingPopover/TeachingPopoverCarouselPageCount/useTeachingPopoverCarouselPageCount.ts new file mode 100644 index 00000000000000..a0a18015d5f719 --- /dev/null +++ b/packages/react-components/react-headless-components-preview/library/src/components/TeachingPopover/TeachingPopoverCarouselPageCount/useTeachingPopoverCarouselPageCount.ts @@ -0,0 +1 @@ +export { useTeachingPopoverCarouselPageCount_unstable as useTeachingPopoverCarouselPageCount } from '@fluentui/react-teaching-popover'; diff --git a/packages/react-components/react-headless-components-preview/library/src/components/TeachingPopover/TeachingPopoverFooter/TeachingPopoverFooter.tsx b/packages/react-components/react-headless-components-preview/library/src/components/TeachingPopover/TeachingPopoverFooter/TeachingPopoverFooter.tsx new file mode 100644 index 00000000000000..120f7c363d83ab --- /dev/null +++ b/packages/react-components/react-headless-components-preview/library/src/components/TeachingPopover/TeachingPopoverFooter/TeachingPopoverFooter.tsx @@ -0,0 +1,14 @@ +'use client'; + +import * as React from 'react'; +import type { ForwardRefComponent } from '@fluentui/react-utilities'; +import type { TeachingPopoverFooterProps } from './TeachingPopoverFooter.types'; +import { useTeachingPopoverFooter } from './useTeachingPopoverFooter'; +import { renderTeachingPopoverFooter } from './renderTeachingPopoverFooter'; + +export const TeachingPopoverFooter: ForwardRefComponent = React.forwardRef((props, ref) => { + const state = useTeachingPopoverFooter(props, ref); + return renderTeachingPopoverFooter(state); +}); + +TeachingPopoverFooter.displayName = 'TeachingPopoverFooter'; diff --git a/packages/react-components/react-headless-components-preview/library/src/components/TeachingPopover/TeachingPopoverFooter/TeachingPopoverFooter.types.ts b/packages/react-components/react-headless-components-preview/library/src/components/TeachingPopover/TeachingPopoverFooter/TeachingPopoverFooter.types.ts new file mode 100644 index 00000000000000..b4e52191960dee --- /dev/null +++ b/packages/react-components/react-headless-components-preview/library/src/components/TeachingPopover/TeachingPopoverFooter/TeachingPopoverFooter.types.ts @@ -0,0 +1,5 @@ +import type { TeachingPopoverFooterBaseProps, TeachingPopoverFooterBaseState } from '@fluentui/react-teaching-popover'; + +export type TeachingPopoverFooterProps = TeachingPopoverFooterBaseProps; + +export type TeachingPopoverFooterState = TeachingPopoverFooterBaseState; diff --git a/packages/react-components/react-headless-components-preview/library/src/components/TeachingPopover/TeachingPopoverFooter/index.ts b/packages/react-components/react-headless-components-preview/library/src/components/TeachingPopover/TeachingPopoverFooter/index.ts new file mode 100644 index 00000000000000..c707b46e7fb6dc --- /dev/null +++ b/packages/react-components/react-headless-components-preview/library/src/components/TeachingPopover/TeachingPopoverFooter/index.ts @@ -0,0 +1,4 @@ +export { TeachingPopoverFooter } from './TeachingPopoverFooter'; +export { useTeachingPopoverFooter } from './useTeachingPopoverFooter'; +export { renderTeachingPopoverFooter } from './renderTeachingPopoverFooter'; +export type { TeachingPopoverFooterProps, TeachingPopoverFooterState } from './TeachingPopoverFooter.types'; diff --git a/packages/react-components/react-headless-components-preview/library/src/components/TeachingPopover/TeachingPopoverFooter/renderTeachingPopoverFooter.tsx b/packages/react-components/react-headless-components-preview/library/src/components/TeachingPopover/TeachingPopoverFooter/renderTeachingPopoverFooter.tsx new file mode 100644 index 00000000000000..09e91fd559a944 --- /dev/null +++ b/packages/react-components/react-headless-components-preview/library/src/components/TeachingPopover/TeachingPopoverFooter/renderTeachingPopoverFooter.tsx @@ -0,0 +1,16 @@ +/** @jsxRuntime automatic */ +/** @jsxImportSource @fluentui/react-jsx-runtime */ +import { assertSlots } from '@fluentui/react-utilities'; +import type { JSXElement } from '@fluentui/react-utilities'; +import type { TeachingPopoverFooterState } from './TeachingPopoverFooter.types'; + +/** + * The headless footer leaves button composition to consumers — unlike the + * v9 render which emits dedicated `primary`/`secondary` Button slots that + * the headless base hook intentionally omits. + */ +export const renderTeachingPopoverFooter = (state: TeachingPopoverFooterState): JSXElement => { + assertSlots<{ root: NonNullable }>(state); + + return ; +}; diff --git a/packages/react-components/react-headless-components-preview/library/src/components/TeachingPopover/TeachingPopoverFooter/useTeachingPopoverFooter.ts b/packages/react-components/react-headless-components-preview/library/src/components/TeachingPopover/TeachingPopoverFooter/useTeachingPopoverFooter.ts new file mode 100644 index 00000000000000..b76c06142bfbbd --- /dev/null +++ b/packages/react-components/react-headless-components-preview/library/src/components/TeachingPopover/TeachingPopoverFooter/useTeachingPopoverFooter.ts @@ -0,0 +1 @@ +export { useTeachingPopoverFooterBase_unstable as useTeachingPopoverFooter } from '@fluentui/react-teaching-popover'; diff --git a/packages/react-components/react-headless-components-preview/library/src/components/TeachingPopover/TeachingPopoverHeader/TeachingPopoverHeader.tsx b/packages/react-components/react-headless-components-preview/library/src/components/TeachingPopover/TeachingPopoverHeader/TeachingPopoverHeader.tsx new file mode 100644 index 00000000000000..22a5e686afe947 --- /dev/null +++ b/packages/react-components/react-headless-components-preview/library/src/components/TeachingPopover/TeachingPopoverHeader/TeachingPopoverHeader.tsx @@ -0,0 +1,14 @@ +'use client'; + +import * as React from 'react'; +import type { ForwardRefComponent } from '@fluentui/react-utilities'; +import type { TeachingPopoverHeaderProps } from './TeachingPopoverHeader.types'; +import { useTeachingPopoverHeader } from './useTeachingPopoverHeader'; +import { renderTeachingPopoverHeader } from './renderTeachingPopoverHeader'; + +export const TeachingPopoverHeader: ForwardRefComponent = React.forwardRef((props, ref) => { + const state = useTeachingPopoverHeader(props, ref); + return renderTeachingPopoverHeader(state); +}); + +TeachingPopoverHeader.displayName = 'TeachingPopoverHeader'; diff --git a/packages/react-components/react-headless-components-preview/library/src/components/TeachingPopover/TeachingPopoverHeader/TeachingPopoverHeader.types.ts b/packages/react-components/react-headless-components-preview/library/src/components/TeachingPopover/TeachingPopoverHeader/TeachingPopoverHeader.types.ts new file mode 100644 index 00000000000000..918fb56e19c9a6 --- /dev/null +++ b/packages/react-components/react-headless-components-preview/library/src/components/TeachingPopover/TeachingPopoverHeader/TeachingPopoverHeader.types.ts @@ -0,0 +1,11 @@ +import type { + TeachingPopoverHeaderBaseProps, + TeachingPopoverHeaderBaseState, + TeachingPopoverHeaderSlots, +} from '@fluentui/react-teaching-popover'; + +export type TeachingPopoverHeaderProps = TeachingPopoverHeaderBaseProps; + +export type TeachingPopoverHeaderState = TeachingPopoverHeaderBaseState; + +export type { TeachingPopoverHeaderSlots }; diff --git a/packages/react-components/react-headless-components-preview/library/src/components/TeachingPopover/TeachingPopoverHeader/index.ts b/packages/react-components/react-headless-components-preview/library/src/components/TeachingPopover/TeachingPopoverHeader/index.ts new file mode 100644 index 00000000000000..cc67d538310a3e --- /dev/null +++ b/packages/react-components/react-headless-components-preview/library/src/components/TeachingPopover/TeachingPopoverHeader/index.ts @@ -0,0 +1,8 @@ +export { TeachingPopoverHeader } from './TeachingPopoverHeader'; +export { useTeachingPopoverHeader } from './useTeachingPopoverHeader'; +export { renderTeachingPopoverHeader } from './renderTeachingPopoverHeader'; +export type { + TeachingPopoverHeaderProps, + TeachingPopoverHeaderSlots, + TeachingPopoverHeaderState, +} from './TeachingPopoverHeader.types'; diff --git a/packages/react-components/react-headless-components-preview/library/src/components/TeachingPopover/TeachingPopoverHeader/renderTeachingPopoverHeader.ts b/packages/react-components/react-headless-components-preview/library/src/components/TeachingPopover/TeachingPopoverHeader/renderTeachingPopoverHeader.ts new file mode 100644 index 00000000000000..b1c1142eb79eb0 --- /dev/null +++ b/packages/react-components/react-headless-components-preview/library/src/components/TeachingPopover/TeachingPopoverHeader/renderTeachingPopoverHeader.ts @@ -0,0 +1,11 @@ +import { renderTeachingPopoverHeader_unstable } from '@fluentui/react-teaching-popover'; +import type { JSXElement } from '@fluentui/react-utilities'; +import type { TeachingPopoverHeaderState } from './TeachingPopoverHeader.types'; + +/** + * v9's render asserts a full `TeachingPopoverHeaderState` (which includes + * `appearance`). The base state intentionally omits it, but the render + * only reads slot fields — safe to cast. + */ +export const renderTeachingPopoverHeader = (state: TeachingPopoverHeaderState): JSXElement => + renderTeachingPopoverHeader_unstable(state as Parameters[0]); diff --git a/packages/react-components/react-headless-components-preview/library/src/components/TeachingPopover/TeachingPopoverHeader/useTeachingPopoverHeader.ts b/packages/react-components/react-headless-components-preview/library/src/components/TeachingPopover/TeachingPopoverHeader/useTeachingPopoverHeader.ts new file mode 100644 index 00000000000000..82ee8f1e2abcfc --- /dev/null +++ b/packages/react-components/react-headless-components-preview/library/src/components/TeachingPopover/TeachingPopoverHeader/useTeachingPopoverHeader.ts @@ -0,0 +1 @@ +export { useTeachingPopoverHeaderBase_unstable as useTeachingPopoverHeader } from '@fluentui/react-teaching-popover'; diff --git a/packages/react-components/react-headless-components-preview/library/src/components/TeachingPopover/TeachingPopoverSurface/TeachingPopoverSurface.tsx b/packages/react-components/react-headless-components-preview/library/src/components/TeachingPopover/TeachingPopoverSurface/TeachingPopoverSurface.tsx new file mode 100644 index 00000000000000..cb1c2d807fbd3d --- /dev/null +++ b/packages/react-components/react-headless-components-preview/library/src/components/TeachingPopover/TeachingPopoverSurface/TeachingPopoverSurface.tsx @@ -0,0 +1 @@ +export { PopoverSurface as TeachingPopoverSurface } from '../../Popover/PopoverSurface/PopoverSurface'; diff --git a/packages/react-components/react-headless-components-preview/library/src/components/TeachingPopover/TeachingPopoverSurface/TeachingPopoverSurface.types.ts b/packages/react-components/react-headless-components-preview/library/src/components/TeachingPopover/TeachingPopoverSurface/TeachingPopoverSurface.types.ts new file mode 100644 index 00000000000000..9c95aae7ba3e17 --- /dev/null +++ b/packages/react-components/react-headless-components-preview/library/src/components/TeachingPopover/TeachingPopoverSurface/TeachingPopoverSurface.types.ts @@ -0,0 +1,5 @@ +export type { + PopoverSurfaceSlots as TeachingPopoverSurfaceSlots, + PopoverSurfaceProps as TeachingPopoverSurfaceProps, + PopoverSurfaceState as TeachingPopoverSurfaceState, +} from '../../Popover/PopoverSurface/PopoverSurface.types'; diff --git a/packages/react-components/react-headless-components-preview/library/src/components/TeachingPopover/TeachingPopoverSurface/index.ts b/packages/react-components/react-headless-components-preview/library/src/components/TeachingPopover/TeachingPopoverSurface/index.ts new file mode 100644 index 00000000000000..57cf99f6e0edb1 --- /dev/null +++ b/packages/react-components/react-headless-components-preview/library/src/components/TeachingPopover/TeachingPopoverSurface/index.ts @@ -0,0 +1,8 @@ +export { TeachingPopoverSurface } from './TeachingPopoverSurface'; +export { useTeachingPopoverSurface } from './useTeachingPopoverSurface'; +export { renderTeachingPopoverSurface } from './renderTeachingPopoverSurface'; +export type { + TeachingPopoverSurfaceSlots, + TeachingPopoverSurfaceProps, + TeachingPopoverSurfaceState, +} from './TeachingPopoverSurface.types'; diff --git a/packages/react-components/react-headless-components-preview/library/src/components/TeachingPopover/TeachingPopoverSurface/renderTeachingPopoverSurface.tsx b/packages/react-components/react-headless-components-preview/library/src/components/TeachingPopover/TeachingPopoverSurface/renderTeachingPopoverSurface.tsx new file mode 100644 index 00000000000000..a9a47ead60481f --- /dev/null +++ b/packages/react-components/react-headless-components-preview/library/src/components/TeachingPopover/TeachingPopoverSurface/renderTeachingPopoverSurface.tsx @@ -0,0 +1 @@ +export { renderPopoverSurface as renderTeachingPopoverSurface } from '../../Popover/PopoverSurface/renderPopoverSurface'; diff --git a/packages/react-components/react-headless-components-preview/library/src/components/TeachingPopover/TeachingPopoverSurface/useTeachingPopoverSurface.ts b/packages/react-components/react-headless-components-preview/library/src/components/TeachingPopover/TeachingPopoverSurface/useTeachingPopoverSurface.ts new file mode 100644 index 00000000000000..0ae40ec8f123a1 --- /dev/null +++ b/packages/react-components/react-headless-components-preview/library/src/components/TeachingPopover/TeachingPopoverSurface/useTeachingPopoverSurface.ts @@ -0,0 +1 @@ +export { usePopoverSurface as useTeachingPopoverSurface } from '../../Popover/PopoverSurface/usePopoverSurface'; diff --git a/packages/react-components/react-headless-components-preview/library/src/components/TeachingPopover/TeachingPopoverTitle/TeachingPopoverTitle.tsx b/packages/react-components/react-headless-components-preview/library/src/components/TeachingPopover/TeachingPopoverTitle/TeachingPopoverTitle.tsx new file mode 100644 index 00000000000000..8ae7a2cece3cb8 --- /dev/null +++ b/packages/react-components/react-headless-components-preview/library/src/components/TeachingPopover/TeachingPopoverTitle/TeachingPopoverTitle.tsx @@ -0,0 +1,14 @@ +'use client'; + +import * as React from 'react'; +import type { ForwardRefComponent } from '@fluentui/react-utilities'; +import type { TeachingPopoverTitleProps } from './TeachingPopoverTitle.types'; +import { useTeachingPopoverTitle } from './useTeachingPopoverTitle'; +import { renderTeachingPopoverTitle } from './renderTeachingPopoverTitle'; + +export const TeachingPopoverTitle: ForwardRefComponent = React.forwardRef((props, ref) => { + const state = useTeachingPopoverTitle(props, ref); + return renderTeachingPopoverTitle(state); +}); + +TeachingPopoverTitle.displayName = 'TeachingPopoverTitle'; diff --git a/packages/react-components/react-headless-components-preview/library/src/components/TeachingPopover/TeachingPopoverTitle/TeachingPopoverTitle.types.ts b/packages/react-components/react-headless-components-preview/library/src/components/TeachingPopover/TeachingPopoverTitle/TeachingPopoverTitle.types.ts new file mode 100644 index 00000000000000..00ec8519bf9a00 --- /dev/null +++ b/packages/react-components/react-headless-components-preview/library/src/components/TeachingPopover/TeachingPopoverTitle/TeachingPopoverTitle.types.ts @@ -0,0 +1,11 @@ +import type { + TeachingPopoverTitleBaseProps, + TeachingPopoverTitleBaseState, + TeachingPopoverTitleSlots, +} from '@fluentui/react-teaching-popover'; + +export type TeachingPopoverTitleProps = TeachingPopoverTitleBaseProps; + +export type TeachingPopoverTitleState = TeachingPopoverTitleBaseState; + +export type { TeachingPopoverTitleSlots }; diff --git a/packages/react-components/react-headless-components-preview/library/src/components/TeachingPopover/TeachingPopoverTitle/index.ts b/packages/react-components/react-headless-components-preview/library/src/components/TeachingPopover/TeachingPopoverTitle/index.ts new file mode 100644 index 00000000000000..ba438d142db770 --- /dev/null +++ b/packages/react-components/react-headless-components-preview/library/src/components/TeachingPopover/TeachingPopoverTitle/index.ts @@ -0,0 +1,8 @@ +export { TeachingPopoverTitle } from './TeachingPopoverTitle'; +export { useTeachingPopoverTitle } from './useTeachingPopoverTitle'; +export { renderTeachingPopoverTitle } from './renderTeachingPopoverTitle'; +export type { + TeachingPopoverTitleProps, + TeachingPopoverTitleSlots, + TeachingPopoverTitleState, +} from './TeachingPopoverTitle.types'; diff --git a/packages/react-components/react-headless-components-preview/library/src/components/TeachingPopover/TeachingPopoverTitle/renderTeachingPopoverTitle.ts b/packages/react-components/react-headless-components-preview/library/src/components/TeachingPopover/TeachingPopoverTitle/renderTeachingPopoverTitle.ts new file mode 100644 index 00000000000000..0035964ed061a6 --- /dev/null +++ b/packages/react-components/react-headless-components-preview/library/src/components/TeachingPopover/TeachingPopoverTitle/renderTeachingPopoverTitle.ts @@ -0,0 +1,10 @@ +import { renderTeachingPopoverTitle_unstable } from '@fluentui/react-teaching-popover'; +import type { JSXElement } from '@fluentui/react-utilities'; +import type { TeachingPopoverTitleState } from './TeachingPopoverTitle.types'; + +/** + * Cast to v9's render signature — base state omits `appearance` and the + * render only reads slot fields. + */ +export const renderTeachingPopoverTitle = (state: TeachingPopoverTitleState): JSXElement => + renderTeachingPopoverTitle_unstable(state as Parameters[0]); diff --git a/packages/react-components/react-headless-components-preview/library/src/components/TeachingPopover/TeachingPopoverTitle/useTeachingPopoverTitle.ts b/packages/react-components/react-headless-components-preview/library/src/components/TeachingPopover/TeachingPopoverTitle/useTeachingPopoverTitle.ts new file mode 100644 index 00000000000000..c0da4bf53107d5 --- /dev/null +++ b/packages/react-components/react-headless-components-preview/library/src/components/TeachingPopover/TeachingPopoverTitle/useTeachingPopoverTitle.ts @@ -0,0 +1 @@ +export { useTeachingPopoverTitleBase_unstable as useTeachingPopoverTitle } from '@fluentui/react-teaching-popover'; diff --git a/packages/react-components/react-headless-components-preview/library/src/components/TeachingPopover/TeachingPopoverTrigger/TeachingPopoverTrigger.tsx b/packages/react-components/react-headless-components-preview/library/src/components/TeachingPopover/TeachingPopoverTrigger/TeachingPopoverTrigger.tsx new file mode 100644 index 00000000000000..a1846c9e6f3cf5 --- /dev/null +++ b/packages/react-components/react-headless-components-preview/library/src/components/TeachingPopover/TeachingPopoverTrigger/TeachingPopoverTrigger.tsx @@ -0,0 +1 @@ +export { PopoverTrigger as TeachingPopoverTrigger } from '../../Popover/PopoverTrigger/PopoverTrigger'; diff --git a/packages/react-components/react-headless-components-preview/library/src/components/TeachingPopover/TeachingPopoverTrigger/TeachingPopoverTrigger.types.ts b/packages/react-components/react-headless-components-preview/library/src/components/TeachingPopover/TeachingPopoverTrigger/TeachingPopoverTrigger.types.ts new file mode 100644 index 00000000000000..4fc687e3f0ed75 --- /dev/null +++ b/packages/react-components/react-headless-components-preview/library/src/components/TeachingPopover/TeachingPopoverTrigger/TeachingPopoverTrigger.types.ts @@ -0,0 +1,5 @@ +export type { + PopoverTriggerProps as TeachingPopoverTriggerProps, + PopoverTriggerState as TeachingPopoverTriggerState, + PopoverTriggerChildProps as TeachingPopoverTriggerChildProps, +} from '../../Popover/PopoverTrigger/PopoverTrigger.types'; diff --git a/packages/react-components/react-headless-components-preview/library/src/components/TeachingPopover/TeachingPopoverTrigger/index.ts b/packages/react-components/react-headless-components-preview/library/src/components/TeachingPopover/TeachingPopoverTrigger/index.ts new file mode 100644 index 00000000000000..f55474197a1469 --- /dev/null +++ b/packages/react-components/react-headless-components-preview/library/src/components/TeachingPopover/TeachingPopoverTrigger/index.ts @@ -0,0 +1,8 @@ +export { TeachingPopoverTrigger } from './TeachingPopoverTrigger'; +export { useTeachingPopoverTrigger } from './useTeachingPopoverTrigger'; +export { renderTeachingPopoverTrigger } from './renderTeachingPopoverTrigger'; +export type { + TeachingPopoverTriggerProps, + TeachingPopoverTriggerState, + TeachingPopoverTriggerChildProps, +} from './TeachingPopoverTrigger.types'; diff --git a/packages/react-components/react-headless-components-preview/library/src/components/TeachingPopover/TeachingPopoverTrigger/renderTeachingPopoverTrigger.ts b/packages/react-components/react-headless-components-preview/library/src/components/TeachingPopover/TeachingPopoverTrigger/renderTeachingPopoverTrigger.ts new file mode 100644 index 00000000000000..f9b2198f6968c3 --- /dev/null +++ b/packages/react-components/react-headless-components-preview/library/src/components/TeachingPopover/TeachingPopoverTrigger/renderTeachingPopoverTrigger.ts @@ -0,0 +1 @@ +export { renderPopoverTrigger as renderTeachingPopoverTrigger } from '../../Popover/PopoverTrigger/renderPopoverTrigger'; diff --git a/packages/react-components/react-headless-components-preview/library/src/components/TeachingPopover/TeachingPopoverTrigger/useTeachingPopoverTrigger.ts b/packages/react-components/react-headless-components-preview/library/src/components/TeachingPopover/TeachingPopoverTrigger/useTeachingPopoverTrigger.ts new file mode 100644 index 00000000000000..3cc001b10e140b --- /dev/null +++ b/packages/react-components/react-headless-components-preview/library/src/components/TeachingPopover/TeachingPopoverTrigger/useTeachingPopoverTrigger.ts @@ -0,0 +1 @@ +export { usePopoverTrigger as useTeachingPopoverTrigger } from '../../Popover/PopoverTrigger/usePopoverTrigger'; diff --git a/packages/react-components/react-headless-components-preview/library/src/components/TeachingPopover/index.ts b/packages/react-components/react-headless-components-preview/library/src/components/TeachingPopover/index.ts new file mode 100644 index 00000000000000..41845f5c061c56 --- /dev/null +++ b/packages/react-components/react-headless-components-preview/library/src/components/TeachingPopover/index.ts @@ -0,0 +1,137 @@ +export { TeachingPopover } from './TeachingPopover'; +export { useTeachingPopover } from './useTeachingPopover'; +export { useTeachingPopoverContextValues } from './useTeachingPopoverContextValues'; +export { renderTeachingPopover } from './renderTeachingPopover'; +export type { + TeachingPopoverProps, + TeachingPopoverState, + TeachingPopoverContextValues, + TeachingPopoverV9BridgedContextValue, +} from './TeachingPopover.types'; + +export { + TeachingPopoverTrigger, + useTeachingPopoverTrigger, + renderTeachingPopoverTrigger, +} from './TeachingPopoverTrigger'; +export type { + TeachingPopoverTriggerProps, + TeachingPopoverTriggerState, + TeachingPopoverTriggerChildProps, +} from './TeachingPopoverTrigger'; + +export { + TeachingPopoverSurface, + useTeachingPopoverSurface, + renderTeachingPopoverSurface, +} from './TeachingPopoverSurface'; +export type { + TeachingPopoverSurfaceProps, + TeachingPopoverSurfaceSlots, + TeachingPopoverSurfaceState, +} from './TeachingPopoverSurface'; + +export { TeachingPopoverBody, useTeachingPopoverBody, renderTeachingPopoverBody } from './TeachingPopoverBody'; +export type { + TeachingPopoverBodyProps, + TeachingPopoverBodySlots, + TeachingPopoverBodyState, +} from './TeachingPopoverBody'; + +export { TeachingPopoverHeader, useTeachingPopoverHeader, renderTeachingPopoverHeader } from './TeachingPopoverHeader'; +export type { + TeachingPopoverHeaderProps, + TeachingPopoverHeaderSlots, + TeachingPopoverHeaderState, +} from './TeachingPopoverHeader'; + +export { TeachingPopoverTitle, useTeachingPopoverTitle, renderTeachingPopoverTitle } from './TeachingPopoverTitle'; +export type { + TeachingPopoverTitleProps, + TeachingPopoverTitleSlots, + TeachingPopoverTitleState, +} from './TeachingPopoverTitle'; + +export { TeachingPopoverFooter, useTeachingPopoverFooter, renderTeachingPopoverFooter } from './TeachingPopoverFooter'; +export type { TeachingPopoverFooterProps, TeachingPopoverFooterState } from './TeachingPopoverFooter'; + +export { + TeachingPopoverCarousel, + useTeachingPopoverCarousel, + useTeachingPopoverCarouselContextValues, + renderTeachingPopoverCarousel, +} from './TeachingPopoverCarousel'; +export type { + TeachingPopoverCarouselProps, + TeachingPopoverCarouselSlots, + TeachingPopoverCarouselState, + TeachingPopoverCarouselContextValues, +} from './TeachingPopoverCarousel'; + +export { + TeachingPopoverCarouselCard, + useTeachingPopoverCarouselCard, + renderTeachingPopoverCarouselCard, +} from './TeachingPopoverCarouselCard'; +export type { + TeachingPopoverCarouselCardProps, + TeachingPopoverCarouselCardSlots, + TeachingPopoverCarouselCardState, +} from './TeachingPopoverCarouselCard'; + +export { + TeachingPopoverCarouselFooter, + useTeachingPopoverCarouselFooter, + renderTeachingPopoverCarouselFooter, +} from './TeachingPopoverCarouselFooter'; +export type { + TeachingPopoverCarouselFooterProps, + TeachingPopoverCarouselFooterSlots, + TeachingPopoverCarouselFooterState, +} from './TeachingPopoverCarouselFooter'; + +export { + TeachingPopoverCarouselFooterButton, + useTeachingPopoverCarouselFooterButton, + renderTeachingPopoverCarouselFooterButton, +} from './TeachingPopoverCarouselFooterButton'; +export type { + TeachingPopoverCarouselFooterButtonProps, + TeachingPopoverCarouselFooterButtonSlots, + TeachingPopoverCarouselFooterButtonState, +} from './TeachingPopoverCarouselFooterButton'; + +export { + TeachingPopoverCarouselNav, + useTeachingPopoverCarouselNav, + renderTeachingPopoverCarouselNav, +} from './TeachingPopoverCarouselNav'; +export type { + NavButtonRenderFunction, + TeachingPopoverCarouselNavProps, + TeachingPopoverCarouselNavSlots, + TeachingPopoverCarouselNavState, +} from './TeachingPopoverCarouselNav'; + +export { + TeachingPopoverCarouselNavButton, + useTeachingPopoverCarouselNavButton, + renderTeachingPopoverCarouselNavButton, +} from './TeachingPopoverCarouselNavButton'; +export type { + TeachingPopoverCarouselNavButtonProps, + TeachingPopoverCarouselNavButtonSlots, + TeachingPopoverCarouselNavButtonState, +} from './TeachingPopoverCarouselNavButton'; + +export { + TeachingPopoverCarouselPageCount, + useTeachingPopoverCarouselPageCount, + renderTeachingPopoverCarouselPageCount, +} from './TeachingPopoverCarouselPageCount'; +export type { + TeachingPopoverCarouselPageCountProps, + TeachingPopoverCarouselPageCountRenderFunction, + TeachingPopoverCarouselPageCountSlots, + TeachingPopoverCarouselPageCountState, +} from './TeachingPopoverCarouselPageCount'; diff --git a/packages/react-components/react-headless-components-preview/library/src/components/TeachingPopover/renderTeachingPopover.tsx b/packages/react-components/react-headless-components-preview/library/src/components/TeachingPopover/renderTeachingPopover.tsx new file mode 100644 index 00000000000000..5a715812556a6b --- /dev/null +++ b/packages/react-components/react-headless-components-preview/library/src/components/TeachingPopover/renderTeachingPopover.tsx @@ -0,0 +1,26 @@ +import * as React from 'react'; +import { + PopoverProvider as V9PopoverProvider, + type PopoverContextValue as V9PopoverContextValue, +} from '@fluentui/react-popover'; +import { PopoverProvider } from '../Popover/popoverContext'; +import type { TeachingPopoverContextValues, TeachingPopoverState } from './TeachingPopover.types'; + +/** + * Renders TeachingPopover by providing both the headless `PopoverContext` + * (consumed by headless sub-components) and the v9 `PopoverContext` + * (consumed by v9 teaching-popover base hooks). The bridged value is cast + * to `V9PopoverContextValue` — the omitted fields (`size`, `inline`, etc.) + * are styling concerns that no base hook reads. + */ +export const renderTeachingPopover = ( + state: TeachingPopoverState, + contextValues: TeachingPopoverContextValues, +): React.ReactElement => ( + + + {state.popoverTrigger} + {state.open ? state.popoverSurface : null} + + +); diff --git a/packages/react-components/react-headless-components-preview/library/src/components/TeachingPopover/useTeachingPopover.ts b/packages/react-components/react-headless-components-preview/library/src/components/TeachingPopover/useTeachingPopover.ts new file mode 100644 index 00000000000000..831923bdde6ae8 --- /dev/null +++ b/packages/react-components/react-headless-components-preview/library/src/components/TeachingPopover/useTeachingPopover.ts @@ -0,0 +1,14 @@ +'use client'; + +import { usePopover } from '../Popover/usePopover'; +import type { TeachingPopoverProps, TeachingPopoverState } from './TeachingPopover.types'; + +/** + * Returns the state for a TeachingPopover component. + * + * Built on top of the headless `Popover` and defaults `withArrow` to `true`, + * matching the v9 TeachingPopover convention. + */ +export const useTeachingPopover = (props: TeachingPopoverProps): TeachingPopoverState => { + return usePopover({ withArrow: true, ...props }); +}; diff --git a/packages/react-components/react-headless-components-preview/library/src/components/TeachingPopover/useTeachingPopoverContextValues.ts b/packages/react-components/react-headless-components-preview/library/src/components/TeachingPopover/useTeachingPopoverContextValues.ts new file mode 100644 index 00000000000000..7fcad395f84c8c --- /dev/null +++ b/packages/react-components/react-headless-components-preview/library/src/components/TeachingPopover/useTeachingPopoverContextValues.ts @@ -0,0 +1,54 @@ +'use client'; + +import * as React from 'react'; +import { usePopoverContextValues } from '../Popover/usePopover'; +import type { + TeachingPopoverContextValues, + TeachingPopoverState, + TeachingPopoverV9BridgedContextValue, +} from './TeachingPopover.types'; + +type V9SetOpen = TeachingPopoverV9BridgedContextValue['setOpen']; +type V9ToggleOpen = TeachingPopoverV9BridgedContextValue['toggleOpen']; + +/** + * Builds both the headless `PopoverContext` value and a v9-compatible + * `PopoverContext` value. The v9 bridge lets sub-components consume base + * hooks from `@fluentui/react-teaching-popover` (e.g. `useTeachingPopoverHeaderBase_unstable`), + * which read `toggleOpen` / `setOpen` / `triggerRef` from the v9 context. + * + * The v9 `OpenPopoverEvents` union is wider than the headless one (it + * accepts `FocusEvent`). Base hooks never fire focus-driven dismisses, so + * casting `state.setOpen` / `state.toggleOpen` to the v9 signatures is safe + * — no extra event types reach them in practice. + */ +export const useTeachingPopoverContextValues = (state: TeachingPopoverState): TeachingPopoverContextValues => { + const { popover } = usePopoverContextValues(state); + + const v9Popover = React.useMemo( + () => ({ + open: state.open, + setOpen: state.setOpen as unknown as V9SetOpen, + toggleOpen: state.toggleOpen as unknown as V9ToggleOpen, + triggerRef: state.triggerRef, + contentRef: state.contentRef, + arrowRef: state.arrowRef, + openOnHover: state.openOnHover, + openOnContext: state.openOnContext, + withArrow: state.withArrow, + }), + [ + state.open, + state.setOpen, + state.toggleOpen, + state.triggerRef, + state.contentRef, + state.arrowRef, + state.openOnHover, + state.openOnContext, + state.withArrow, + ], + ); + + return { popover, v9Popover }; +}; diff --git a/packages/react-components/react-headless-components-preview/library/src/teaching-popover.ts b/packages/react-components/react-headless-components-preview/library/src/teaching-popover.ts new file mode 100644 index 00000000000000..0b722a3dcd615a --- /dev/null +++ b/packages/react-components/react-headless-components-preview/library/src/teaching-popover.ts @@ -0,0 +1,93 @@ +export { + TeachingPopover, + useTeachingPopover, + useTeachingPopoverContextValues, + renderTeachingPopover, + TeachingPopoverTrigger, + useTeachingPopoverTrigger, + renderTeachingPopoverTrigger, + TeachingPopoverSurface, + useTeachingPopoverSurface, + renderTeachingPopoverSurface, + TeachingPopoverBody, + useTeachingPopoverBody, + renderTeachingPopoverBody, + TeachingPopoverHeader, + useTeachingPopoverHeader, + renderTeachingPopoverHeader, + TeachingPopoverTitle, + useTeachingPopoverTitle, + renderTeachingPopoverTitle, + TeachingPopoverFooter, + useTeachingPopoverFooter, + renderTeachingPopoverFooter, + TeachingPopoverCarousel, + useTeachingPopoverCarousel, + useTeachingPopoverCarouselContextValues, + renderTeachingPopoverCarousel, + TeachingPopoverCarouselCard, + useTeachingPopoverCarouselCard, + renderTeachingPopoverCarouselCard, + TeachingPopoverCarouselFooter, + useTeachingPopoverCarouselFooter, + renderTeachingPopoverCarouselFooter, + TeachingPopoverCarouselFooterButton, + useTeachingPopoverCarouselFooterButton, + renderTeachingPopoverCarouselFooterButton, + TeachingPopoverCarouselNav, + useTeachingPopoverCarouselNav, + renderTeachingPopoverCarouselNav, + TeachingPopoverCarouselNavButton, + useTeachingPopoverCarouselNavButton, + renderTeachingPopoverCarouselNavButton, + TeachingPopoverCarouselPageCount, + useTeachingPopoverCarouselPageCount, + renderTeachingPopoverCarouselPageCount, +} from './components/TeachingPopover'; +export type { + TeachingPopoverProps, + TeachingPopoverState, + TeachingPopoverContextValues, + TeachingPopoverV9BridgedContextValue, + TeachingPopoverTriggerProps, + TeachingPopoverTriggerState, + TeachingPopoverTriggerChildProps, + TeachingPopoverSurfaceProps, + TeachingPopoverSurfaceSlots, + TeachingPopoverSurfaceState, + TeachingPopoverBodyProps, + TeachingPopoverBodySlots, + TeachingPopoverBodyState, + TeachingPopoverHeaderProps, + TeachingPopoverHeaderSlots, + TeachingPopoverHeaderState, + TeachingPopoverTitleProps, + TeachingPopoverTitleSlots, + TeachingPopoverTitleState, + TeachingPopoverFooterProps, + TeachingPopoverFooterState, + TeachingPopoverCarouselProps, + TeachingPopoverCarouselSlots, + TeachingPopoverCarouselState, + TeachingPopoverCarouselContextValues, + TeachingPopoverCarouselCardProps, + TeachingPopoverCarouselCardSlots, + TeachingPopoverCarouselCardState, + TeachingPopoverCarouselFooterProps, + TeachingPopoverCarouselFooterSlots, + TeachingPopoverCarouselFooterState, + TeachingPopoverCarouselFooterButtonProps, + TeachingPopoverCarouselFooterButtonSlots, + TeachingPopoverCarouselFooterButtonState, + NavButtonRenderFunction, + TeachingPopoverCarouselNavProps, + TeachingPopoverCarouselNavSlots, + TeachingPopoverCarouselNavState, + TeachingPopoverCarouselNavButtonProps, + TeachingPopoverCarouselNavButtonSlots, + TeachingPopoverCarouselNavButtonState, + TeachingPopoverCarouselPageCountProps, + TeachingPopoverCarouselPageCountRenderFunction, + TeachingPopoverCarouselPageCountSlots, + TeachingPopoverCarouselPageCountState, +} from './components/TeachingPopover'; diff --git a/packages/react-components/react-headless-components-preview/stories/src/TeachingPopover/TeachingPopoverDefault.stories.tsx b/packages/react-components/react-headless-components-preview/stories/src/TeachingPopover/TeachingPopoverDefault.stories.tsx new file mode 100644 index 00000000000000..ef15049abb5188 --- /dev/null +++ b/packages/react-components/react-headless-components-preview/stories/src/TeachingPopover/TeachingPopoverDefault.stories.tsx @@ -0,0 +1,34 @@ +import * as React from 'react'; +import { + TeachingPopover, + TeachingPopoverTrigger, + TeachingPopoverSurface, + TeachingPopoverHeader, + TeachingPopoverTitle, + TeachingPopoverBody, + TeachingPopoverFooter, +} from '@fluentui/react-headless-components-preview/teaching-popover'; + +import styles from './teaching-popover.module.css'; + +export const Default = (): React.ReactNode => ( + + + + + + + 💡 + + + + Did you know? + + Teaching popovers are great for quick contextual learning moments — keep them short. + + + + + + +); diff --git a/packages/react-components/react-headless-components-preview/stories/src/TeachingPopover/TeachingPopoverDescription.md b/packages/react-components/react-headless-components-preview/stories/src/TeachingPopover/TeachingPopoverDescription.md new file mode 100644 index 00000000000000..26d31b5f32f582 --- /dev/null +++ b/packages/react-components/react-headless-components-preview/stories/src/TeachingPopover/TeachingPopoverDescription.md @@ -0,0 +1,3 @@ +The headless `TeachingPopover` is built on top of the headless `Popover`. It adds a structured header / title / body / footer composition and an optional paged carousel — without styling. Bring your own CSS. + +`TeachingPopover` re-uses the v9 `react-teaching-popover` base hooks for its sub-components (`Header`, `Title`, `Footer`, `Carousel*`) and bridges the v9 `PopoverContext` internally so dismiss buttons, finish handlers, and the carousel state machine all work transparently. diff --git a/packages/react-components/react-headless-components-preview/stories/src/TeachingPopover/TeachingPopoverWithCarousel.stories.tsx b/packages/react-components/react-headless-components-preview/stories/src/TeachingPopover/TeachingPopoverWithCarousel.stories.tsx new file mode 100644 index 00000000000000..97b821e317f12c --- /dev/null +++ b/packages/react-components/react-headless-components-preview/stories/src/TeachingPopover/TeachingPopoverWithCarousel.stories.tsx @@ -0,0 +1,90 @@ +import * as React from 'react'; +import { + TeachingPopover, + TeachingPopoverTrigger, + TeachingPopoverSurface, + TeachingPopoverHeader, + TeachingPopoverTitle, + TeachingPopoverBody, + TeachingPopoverCarousel, + TeachingPopoverCarouselCard, + TeachingPopoverCarouselFooter, + TeachingPopoverCarouselFooterButton, + TeachingPopoverCarouselNav, + TeachingPopoverCarouselNavButton, + TeachingPopoverCarouselPageCount, +} from '@fluentui/react-headless-components-preview/teaching-popover'; + +import styles from './teaching-popover.module.css'; + +const PAGES = ['intro', 'features', 'wrap-up'] as const; + +export const WithCarousel = (): React.ReactNode => ( + + + + + + `Slide ${i + 1} of ${PAGES.length}`}> +
+ + + 👋 + + + + Welcome + + Let's take a quick tour of the new features. + + + + + + ✨ + + + + Better workflows + + Save time with shortcuts you can configure to taste. + + + + + + 🎉 + + + + You're ready + + That's the highlights — explore at your own pace. + + + + + + Previous + + + {(value: string) => ( + + )} + + + {(current, total) => `${current} / ${total}`} + + + Next + + +
+ + + +); diff --git a/packages/react-components/react-headless-components-preview/stories/src/TeachingPopover/index.stories.tsx b/packages/react-components/react-headless-components-preview/stories/src/TeachingPopover/index.stories.tsx new file mode 100644 index 00000000000000..8c12d7c526fd3a --- /dev/null +++ b/packages/react-components/react-headless-components-preview/stories/src/TeachingPopover/index.stories.tsx @@ -0,0 +1,18 @@ +import { TeachingPopover } from '@fluentui/react-headless-components-preview/teaching-popover'; + +import descriptionMd from './TeachingPopoverDescription.md'; + +export { Default } from './TeachingPopoverDefault.stories'; +export { WithCarousel } from './TeachingPopoverWithCarousel.stories'; + +export default { + title: 'Components/TeachingPopover', + component: TeachingPopover, + parameters: { + docs: { + description: { + component: descriptionMd, + }, + }, + }, +}; diff --git a/packages/react-components/react-headless-components-preview/stories/src/TeachingPopover/teaching-popover.module.css b/packages/react-components/react-headless-components-preview/stories/src/TeachingPopover/teaching-popover.module.css new file mode 100644 index 00000000000000..bcde78a741ce3e --- /dev/null +++ b/packages/react-components/react-headless-components-preview/stories/src/TeachingPopover/teaching-popover.module.css @@ -0,0 +1,231 @@ +.trigger { + display: inline-flex; + align-items: center; + height: 36px; + padding: 0 var(--space-4); + border: 0; + border-radius: var(--radius-md); + background: var(--accent); + color: var(--accent-contrast); + font-size: 13.5px; + font-weight: 500; + cursor: pointer; +} + +.trigger:hover, +.trigger[data-open] { + background: var(--accent-strong); +} + +.trigger:focus-visible { + outline: var(--stroke-thick) solid var(--accent); + outline-offset: 2px; +} + +.surface { + background: var(--bg-elev); + border-radius: var(--radius-md); + border: var(--stroke-thin) solid var(--border); + box-shadow: var(--shadow-3); + padding: var(--space-4); + min-width: 280px; + max-width: 360px; +} + +.header { + display: flex; + align-items: center; + gap: var(--space-2); + margin: 0 0 var(--space-2); +} + +.headerSpacer { + flex: 1; +} + +.title { + font-size: 14px; + font-weight: 600; + color: var(--text); + margin: 0 0 var(--space-1); +} + +.body { + font-size: 13px; + color: var(--text-muted); + line-height: 1.45; + margin: 0 0 var(--space-3); +} + +.footer { + display: flex; + justify-content: flex-end; + gap: var(--space-2); + margin-top: var(--space-3); +} + +/* Dismiss / icon button — mirrors v9 subtle button appearance. */ +.iconButton { + display: inline-flex; + align-items: center; + justify-content: center; + width: 24px; + height: 24px; + padding: 0; + border: 0; + border-radius: var(--radius-sm); + background: transparent; + color: var(--text-muted); + font-size: 14px; + line-height: 1; + cursor: pointer; + transition: background-color 80ms ease, color 80ms ease; +} + +.iconButton:hover { + background: var(--surface-muted); + color: var(--text); +} + +.iconButton:active { + background: var(--surface-sunken); +} + +.iconButton:focus-visible { + outline: var(--stroke-thick) solid var(--accent); + outline-offset: 1px; +} + +/* + Action button — mirrors v9 Button medium / secondary appearance: + 32px tall, 1px neutral border, 4px radius, ~96px min-width to match the v9 + TeachingPopoverCarouselFooterButton minimum. +*/ +.actionButton { + display: inline-flex; + align-items: center; + justify-content: center; + height: 32px; + min-width: 96px; + padding: 0 var(--space-3); + border: var(--stroke-thin) solid var(--border-strong); + border-radius: var(--radius-md); + background: var(--bg-elev); + color: var(--text); + font-family: inherit; + font-size: 13px; + font-weight: 600; + line-height: 1; + cursor: pointer; + transition: background-color 80ms ease, border-color 80ms ease, color 80ms ease; +} + +.actionButton:hover { + background: var(--surface-muted); + border-color: var(--border-stronger); +} + +.actionButton:active { + background: var(--surface-sunken); +} + +.actionButton:focus-visible { + outline: var(--stroke-thick) solid var(--accent); + outline-offset: 2px; +} + +.actionButton:disabled { + background: var(--surface-muted); + border-color: var(--border); + color: var(--text-faint); + cursor: not-allowed; +} + +/* Primary variant — mirrors v9 Button primary appearance. */ +.actionButtonPrimary { + background: var(--accent); + border-color: var(--accent); + color: var(--accent-contrast); +} + +.actionButtonPrimary:hover { + background: var(--accent-strong); + border-color: var(--accent-strong); +} + +.actionButtonPrimary:active { + background: var(--accent-strong); + border-color: var(--accent-strong); +} + +.actionButtonPrimary:disabled { + background: var(--accent-soft); + border-color: var(--accent-soft); + color: var(--accent); +} + +.carousel { + display: flex; + flex-direction: column; + gap: var(--space-3); +} + +.carouselCard[hidden] { + display: none; +} + +.carouselFooter { + display: flex; + align-items: center; + justify-content: space-between; + gap: var(--space-2); + margin-top: var(--space-3); +} + +.carouselNav { + display: inline-flex; + align-items: center; + gap: var(--space-2); +} + +/* + Mirrors the v9 TeachingPopoverCarouselNavButton shape: an 8×8 circle when + unselected (30% accent), and a 16×8 rounded-rectangle "pill" when selected + (full accent). Width and border-radius animate so paging feels continuous. +*/ +.carouselNavButton { + display: flex; + box-sizing: border-box; + width: 8px; + height: 8px; + padding: 0; + border: 0; + border-radius: 50%; + background: color-mix(in srgb, var(--accent) 30%, transparent); + cursor: pointer; + transition: width 120ms ease, border-radius 120ms ease, background-color 120ms ease; +} + +@supports not (color: color-mix(in lch, white, black)) { + .carouselNavButton { + background: var(--accent); + opacity: 0.3; + } +} + +.carouselNavButton[aria-selected='true'] { + width: 16px; + border-radius: 4px; + background: var(--accent); + opacity: 1; +} + +.carouselNavButton:focus-visible { + outline: var(--stroke-thick) solid var(--accent); + outline-offset: 2px; +} + +.pageCount { + font-size: 12px; + color: var(--text-muted); +} diff --git a/packages/react-components/react-teaching-popover/library/etc/react-teaching-popover.api.md b/packages/react-components/react-teaching-popover/library/etc/react-teaching-popover.api.md index 91bea423e45cc2..4404529a4badde 100644 --- a/packages/react-components/react-teaching-popover/library/etc/react-teaching-popover.api.md +++ b/packages/react-components/react-teaching-popover/library/etc/react-teaching-popover.api.md @@ -28,6 +28,9 @@ import * as React_2 from 'react'; import type { Slot } from '@fluentui/react-utilities'; import type { SlotClassNames } from '@fluentui/react-utilities'; +// @public (undocumented) +export type NavButtonRenderFunction = (value: string) => React_2.ReactNode; + // @public export const renderTeachingPopover_unstable: (state: PopoverState, contextValues?: PopoverContextValues) => JSXElement; @@ -124,6 +127,11 @@ export type TeachingPopoverCarouselCardState = ComponentState; +// @public +export type TeachingPopoverCarouselContextValues = { + carousel: CarouselContextValue; +}; + // @public export const TeachingPopoverCarouselFooter: ForwardRefComponent; diff --git a/packages/react-components/react-teaching-popover/library/src/index.ts b/packages/react-components/react-teaching-popover/library/src/index.ts index 9a8a5e36168a8e..733654cbc29cd2 100644 --- a/packages/react-components/react-teaching-popover/library/src/index.ts +++ b/packages/react-components/react-teaching-popover/library/src/index.ts @@ -43,6 +43,7 @@ export { useTeachingPopoverCarouselContextValues_unstable, } from './TeachingPopoverCarousel'; export type { + TeachingPopoverCarouselContextValues, TeachingPopoverCarouselProps, TeachingPopoverCarouselSlots, TeachingPopoverCarouselState, @@ -67,6 +68,7 @@ export { useTeachingPopoverCarouselNav_unstable, } from './TeachingPopoverCarouselNav'; export type { + NavButtonRenderFunction, TeachingPopoverCarouselNavProps, TeachingPopoverCarouselNavSlots, TeachingPopoverCarouselNavState, From 67884ed960090968116ab129f49b6aaccc53605c Mon Sep 17 00:00:00 2001 From: mainframev Date: Mon, 18 May 2026 12:35:21 +0200 Subject: [PATCH 2/4] docs: polish stories visually --- .../TeachingPopoverDefault.stories.tsx | 32 ++-- .../TeachingPopoverWithCarousel.stories.tsx | 60 +++---- .../teaching-popover.module.css | 150 ++++++++++++++---- 3 files changed, 170 insertions(+), 72 deletions(-) diff --git a/packages/react-components/react-headless-components-preview/stories/src/TeachingPopover/TeachingPopoverDefault.stories.tsx b/packages/react-components/react-headless-components-preview/stories/src/TeachingPopover/TeachingPopoverDefault.stories.tsx index ef15049abb5188..2ea912e9294497 100644 --- a/packages/react-components/react-headless-components-preview/stories/src/TeachingPopover/TeachingPopoverDefault.stories.tsx +++ b/packages/react-components/react-headless-components-preview/stories/src/TeachingPopover/TeachingPopoverDefault.stories.tsx @@ -1,33 +1,37 @@ import * as React from 'react'; +import { DismissRegular, ImageRegular, LightbulbRegular } from '@fluentui/react-icons'; import { TeachingPopover, - TeachingPopoverTrigger, - TeachingPopoverSurface, - TeachingPopoverHeader, - TeachingPopoverTitle, TeachingPopoverBody, TeachingPopoverFooter, + TeachingPopoverHeader, + TeachingPopoverSurface, + TeachingPopoverTitle, + TeachingPopoverTrigger, } from '@fluentui/react-headless-components-preview/teaching-popover'; import styles from './teaching-popover.module.css'; export const Default = (): React.ReactNode => ( - + - + - - 💡 - - + }} + dismissButton={{ className: styles.dismissButton, children: }} + > + Tips - Did you know? - - Teaching popovers are great for quick contextual learning moments — keep them short. + }}> + Teaching Bubble Title +

This is a teaching popover body

 - + + diff --git a/packages/react-components/react-headless-components-preview/stories/src/TeachingPopover/TeachingPopoverWithCarousel.stories.tsx b/packages/react-components/react-headless-components-preview/stories/src/TeachingPopover/TeachingPopoverWithCarousel.stories.tsx index 97b821e317f12c..a777f27161fcec 100644 --- a/packages/react-components/react-headless-components-preview/stories/src/TeachingPopover/TeachingPopoverWithCarousel.stories.tsx +++ b/packages/react-components/react-headless-components-preview/stories/src/TeachingPopover/TeachingPopoverWithCarousel.stories.tsx @@ -1,10 +1,7 @@ import * as React from 'react'; +import { DismissRegular } from '@fluentui/react-icons'; import { TeachingPopover, - TeachingPopoverTrigger, - TeachingPopoverSurface, - TeachingPopoverHeader, - TeachingPopoverTitle, TeachingPopoverBody, TeachingPopoverCarousel, TeachingPopoverCarouselCard, @@ -13,14 +10,23 @@ import { TeachingPopoverCarouselNav, TeachingPopoverCarouselNavButton, TeachingPopoverCarouselPageCount, + TeachingPopoverHeader, + TeachingPopoverSurface, + TeachingPopoverTitle, + TeachingPopoverTrigger, } from '@fluentui/react-headless-components-preview/teaching-popover'; import styles from './teaching-popover.module.css'; const PAGES = ['intro', 'features', 'wrap-up'] as const; +const dismissButtonSlot = { + className: styles.dismissButton, + children: , +}; + export const WithCarousel = (): React.ReactNode => ( - + @@ -28,44 +34,44 @@ export const WithCarousel = (): React.ReactNode => ( `Slide ${i + 1} of ${PAGES.length}`}>
- - 👋 - - - - Welcome + 👋 }} + dismissButton={dismissButtonSlot} + /> - Let's take a quick tour of the new features. + Welcome +

Let's take a quick tour of the new features.

 - - ✨ - - - - Better workflows + ✨ }} + dismissButton={dismissButtonSlot} + /> - Save time with shortcuts you can configure to taste. + Better workflows +

Save time with shortcuts you can configure to taste.

 - - 🎉 - - - - You're ready + 🎉 }} + dismissButton={dismissButtonSlot} + /> - That's the highlights — explore at your own pace. + You're ready +

That's the highlights — explore at your own pace.

 - Previous + Back {(value: string) => ( diff --git a/packages/react-components/react-headless-components-preview/stories/src/TeachingPopover/teaching-popover.module.css b/packages/react-components/react-headless-components-preview/stories/src/TeachingPopover/teaching-popover.module.css index bcde78a741ce3e..3bbba811d86899 100644 --- a/packages/react-components/react-headless-components-preview/stories/src/TeachingPopover/teaching-popover.module.css +++ b/packages/react-components/react-headless-components-preview/stories/src/TeachingPopover/teaching-popover.module.css @@ -22,80 +22,168 @@ outline-offset: 2px; } +/* + TeachingPopover always renders with an arrow (the headless useTeachingPopover + defaults withArrow to true). The surface borrows the same arrow technique as + the headless Popover stories: overflow:visible plus a CSS filter drop-shadow + so the shadow traces around the rotated arrow shape (a box-shadow would clip + on the rotated square and a border wouldn't connect to it). +*/ .surface { background: var(--bg-elev); - border-radius: var(--radius-md); - border: var(--stroke-thin) solid var(--border); - box-shadow: var(--shadow-3); - padding: var(--space-4); - min-width: 280px; + border: 0; + border-radius: var(--radius-lg); + filter: drop-shadow(0 0 1px rgba(0, 0, 0, 0.12)) drop-shadow(0 4px 8px rgba(0, 0, 0, 0.14)); + overflow: visible; + padding: var(--space-5); + min-width: 320px; max-width: 360px; } -.header { - display: flex; - align-items: center; - gap: var(--space-2); - margin: 0 0 var(--space-2); +/* + Arrow rendering — headless popover surface paints a
and + keeps the surface's data-placement attribute in sync with usePositioning. + Mirrors stories/src/Popover/popover.module.css so visuals stay consistent. +*/ +.surface [data-arrow] { + position: absolute; + width: 12px; + height: 12px; + background: var(--bg-elev); + transform: rotate(45deg); } -.headerSpacer { - flex: 1; +.surface[data-placement^='above'] [data-arrow] { + bottom: -6px; } -.title { - font-size: 14px; - font-weight: 600; - color: var(--text); - margin: 0 0 var(--space-1); +.surface[data-placement^='below'] [data-arrow] { + top: -6px; } -.body { +.surface[data-placement^='before'] [data-arrow] { + right: -6px; +} + +.surface[data-placement^='after'] [data-arrow] { + left: -6px; +} + +.surface[data-placement='above'] [data-arrow], +.surface[data-placement='below'] [data-arrow] { + inset-inline: 0; + margin-inline: auto; +} + +.surface[data-placement='before'] [data-arrow], +.surface[data-placement='after'] [data-arrow] { + inset-block: 0; + margin-block: auto; +} + +.surface[data-placement$='-start'] [data-arrow] { + inset-inline-start: var(--arrow-padding, 12px); +} + +.surface[data-placement$='-end'] [data-arrow] { + inset-inline-end: var(--arrow-padding, 12px); +} + +.header { + display: flex; + align-items: center; + gap: var(--space-2); font-size: 13px; + font-weight: 500; color: var(--text-muted); - line-height: 1.45; margin: 0 0 var(--space-3); } -.footer { - display: flex; - justify-content: flex-end; - gap: var(--space-2); - margin-top: var(--space-3); +.headerIcon { + display: inline-flex; + align-items: center; + justify-content: center; + width: 16px; + height: 16px; + font-size: 16px; + color: var(--text-muted); } -/* Dismiss / icon button — mirrors v9 subtle button appearance. */ -.iconButton { +/* Dismiss button — boxed subtle button, mirrors v9 TeachingPopoverHeader__dismissButton. */ +.dismissButton { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; padding: 0; - border: 0; + margin-inline-start: auto; + border: var(--stroke-thin) solid var(--border-strong); border-radius: var(--radius-sm); background: transparent; color: var(--text-muted); font-size: 14px; line-height: 1; cursor: pointer; - transition: background-color 80ms ease, color 80ms ease; + transition: background-color 80ms ease, border-color 80ms ease, color 80ms ease; } -.iconButton:hover { +.dismissButton:hover { background: var(--surface-muted); + border-color: var(--border-stronger); color: var(--text); } -.iconButton:active { +.dismissButton:active { background: var(--surface-sunken); } -.iconButton:focus-visible { +.dismissButton:focus-visible { outline: var(--stroke-thick) solid var(--accent); outline-offset: 1px; } +.body { + display: flex; + flex-direction: column; + margin: 0 0 var(--space-4); +} + +/* Media placeholder — 288×176 (v9 'medium' aspect ratio) gray box. */ +.media { + display: flex; + align-items: center; + justify-content: center; + width: 100%; + aspect-ratio: 288 / 176; + background: var(--surface-muted); + border-radius: var(--radius-sm); + margin-bottom: var(--space-3); + color: var(--text-faint); + font-size: 64px; +} + +.title { + font-size: 16px; + font-weight: 600; + color: var(--text); + margin: 0 0 var(--space-1); +} + +.bodyText { + font-size: 14px; + color: var(--text); + line-height: 1.45; + margin: 0; +} + +.footer { + display: flex; + justify-content: flex-end; + gap: var(--space-2); + margin-top: 0; +} + /* Action button — mirrors v9 Button medium / secondary appearance: 32px tall, 1px neutral border, 4px radius, ~96px min-width to match the v9 From 4616f5b2ec2d73b00ecb8b77a3bf128a97eb46dc Mon Sep 17 00:00:00 2001 From: mainframev Date: Mon, 18 May 2026 13:33:22 +0200 Subject: [PATCH 3/4] fixup! feat(react-headless-components-preview): add TeachingPopover component --- ...-popover-f2630a2b-c002-4016-9657-609f6f065d80.json | 7 ------- .../library/etc/teaching-popover.api.md | 9 +++++---- .../TeachingPopoverCarousel.types.ts | 11 ++++++++++- .../TeachingPopoverCarouselNav.types.ts | 11 ++++++++++- .../library/etc/react-teaching-popover.api.md | 8 -------- .../react-teaching-popover/library/src/index.ts | 2 -- 6 files changed, 25 insertions(+), 23 deletions(-) delete mode 100644 change/@fluentui-react-teaching-popover-f2630a2b-c002-4016-9657-609f6f065d80.json diff --git a/change/@fluentui-react-teaching-popover-f2630a2b-c002-4016-9657-609f6f065d80.json b/change/@fluentui-react-teaching-popover-f2630a2b-c002-4016-9657-609f6f065d80.json deleted file mode 100644 index 5e61b175480f16..00000000000000 --- a/change/@fluentui-react-teaching-popover-f2630a2b-c002-4016-9657-609f6f065d80.json +++ /dev/null @@ -1,7 +0,0 @@ -{ - "type": "patch", - "comment": "feat: re-export TeachingPopoverCarouselContextValues and NavButtonRenderFunction types from the package barrel", - "packageName": "@fluentui/react-teaching-popover", - "email": "viktorgenaev@microsoft.com", - "dependentChangeType": "patch" -} diff --git a/packages/react-components/react-headless-components-preview/library/etc/teaching-popover.api.md b/packages/react-components/react-headless-components-preview/library/etc/teaching-popover.api.md index ce1e45b29bae80..d498a5c4447604 100644 --- a/packages/react-components/react-headless-components-preview/library/etc/teaching-popover.api.md +++ b/packages/react-components/react-headless-components-preview/library/etc/teaching-popover.api.md @@ -11,7 +11,6 @@ import type { EventData } from '@fluentui/react-utilities'; import type { EventHandler } from '@fluentui/react-utilities'; import type { ForwardRefComponent } from '@fluentui/react-utilities'; import type { JSXElement } from '@fluentui/react-utilities'; -import { NavButtonRenderFunction } from '@fluentui/react-teaching-popover'; import type { PopoverContextValue as PopoverContextValue_2 } from '@fluentui/react-popover'; import type { PopoverTriggerChildProps } from '@fluentui/react-popover'; import { PositioningShorthand } from '@fluentui/react-positioning'; @@ -27,7 +26,6 @@ import { TeachingPopoverBodyState } from '@fluentui/react-teaching-popover'; import { TeachingPopoverCarouselCardProps } from '@fluentui/react-teaching-popover'; import { TeachingPopoverCarouselCardSlots } from '@fluentui/react-teaching-popover'; import { TeachingPopoverCarouselCardState } from '@fluentui/react-teaching-popover'; -import { TeachingPopoverCarouselContextValues } from '@fluentui/react-teaching-popover'; import { TeachingPopoverCarouselFooterButtonBaseProps as TeachingPopoverCarouselFooterButtonProps } from '@fluentui/react-teaching-popover'; import { TeachingPopoverCarouselFooterButtonSlots } from '@fluentui/react-teaching-popover'; import { TeachingPopoverCarouselFooterButtonBaseState as TeachingPopoverCarouselFooterButtonState } from '@fluentui/react-teaching-popover'; @@ -56,6 +54,7 @@ import type { TriggerProps } from '@fluentui/react-utilities'; import { useTeachingPopoverBody_unstable as useTeachingPopoverBody } from '@fluentui/react-teaching-popover'; import { useTeachingPopoverCarouselBase_unstable as useTeachingPopoverCarousel } from '@fluentui/react-teaching-popover'; import { useTeachingPopoverCarouselCard_unstable as useTeachingPopoverCarouselCard } from '@fluentui/react-teaching-popover'; +import type { useTeachingPopoverCarouselContextValues_unstable } from '@fluentui/react-teaching-popover'; import { useTeachingPopoverCarouselFooterButtonBase_unstable as useTeachingPopoverCarouselFooterButton } from '@fluentui/react-teaching-popover'; import { useTeachingPopoverCarouselNavBase_unstable as useTeachingPopoverCarouselNav } from '@fluentui/react-teaching-popover'; import { useTeachingPopoverCarouselNavButtonBase_unstable as useTeachingPopoverCarouselNavButton } from '@fluentui/react-teaching-popover'; @@ -64,7 +63,8 @@ import { useTeachingPopoverFooterBase_unstable as useTeachingPopoverFooter } fro import { useTeachingPopoverHeaderBase_unstable as useTeachingPopoverHeader } from '@fluentui/react-teaching-popover'; import { useTeachingPopoverTitleBase_unstable as useTeachingPopoverTitle } from '@fluentui/react-teaching-popover'; -export { NavButtonRenderFunction } +// @public +export type NavButtonRenderFunction = TeachingPopoverCarouselNavState['renderNavButton']; // @public export const renderTeachingPopover: (state: TeachingPopoverState, contextValues: TeachingPopoverContextValues) => React_2.ReactElement; @@ -131,7 +131,8 @@ export { TeachingPopoverCarouselCardSlots } export { TeachingPopoverCarouselCardState } -export { TeachingPopoverCarouselContextValues } +// @public +export type TeachingPopoverCarouselContextValues = ReturnType; // @public (undocumented) export const TeachingPopoverCarouselFooter: ForwardRefComponent; diff --git a/packages/react-components/react-headless-components-preview/library/src/components/TeachingPopover/TeachingPopoverCarousel/TeachingPopoverCarousel.types.ts b/packages/react-components/react-headless-components-preview/library/src/components/TeachingPopover/TeachingPopoverCarousel/TeachingPopoverCarousel.types.ts index 312d61d3c926c1..3f0fbf7f857f56 100644 --- a/packages/react-components/react-headless-components-preview/library/src/components/TeachingPopover/TeachingPopoverCarousel/TeachingPopoverCarousel.types.ts +++ b/packages/react-components/react-headless-components-preview/library/src/components/TeachingPopover/TeachingPopoverCarousel/TeachingPopoverCarousel.types.ts @@ -1,6 +1,15 @@ +import type { useTeachingPopoverCarouselContextValues_unstable } from '@fluentui/react-teaching-popover'; + export type { TeachingPopoverCarouselBaseProps as TeachingPopoverCarouselProps, TeachingPopoverCarouselBaseState as TeachingPopoverCarouselState, - TeachingPopoverCarouselContextValues, TeachingPopoverCarouselSlots, } from '@fluentui/react-teaching-popover'; + +/** + * Context shared between TeachingPopoverCarousel and its children components. + * + * Derived from the v9 `useTeachingPopoverCarouselContextValues_unstable` return + * type, which is the package's public contract for this shape. + */ +export type TeachingPopoverCarouselContextValues = ReturnType; diff --git a/packages/react-components/react-headless-components-preview/library/src/components/TeachingPopover/TeachingPopoverCarouselNav/TeachingPopoverCarouselNav.types.ts b/packages/react-components/react-headless-components-preview/library/src/components/TeachingPopover/TeachingPopoverCarouselNav/TeachingPopoverCarouselNav.types.ts index f62c05b6ae043c..d8c5d7b6b4770f 100644 --- a/packages/react-components/react-headless-components-preview/library/src/components/TeachingPopover/TeachingPopoverCarouselNav/TeachingPopoverCarouselNav.types.ts +++ b/packages/react-components/react-headless-components-preview/library/src/components/TeachingPopover/TeachingPopoverCarouselNav/TeachingPopoverCarouselNav.types.ts @@ -1,6 +1,15 @@ +import type { TeachingPopoverCarouselNavBaseState } from '@fluentui/react-teaching-popover'; + export type { - NavButtonRenderFunction, TeachingPopoverCarouselNavBaseProps as TeachingPopoverCarouselNavProps, TeachingPopoverCarouselNavBaseState as TeachingPopoverCarouselNavState, TeachingPopoverCarouselNavSlots, } from '@fluentui/react-teaching-popover'; + +/** + * Render function for the carousel nav buttons. + * + * Derived from the v9 `TeachingPopoverCarouselNavBaseState.renderNavButton` + * field, which is the package's public contract for this shape. + */ +export type NavButtonRenderFunction = TeachingPopoverCarouselNavBaseState['renderNavButton']; diff --git a/packages/react-components/react-teaching-popover/library/etc/react-teaching-popover.api.md b/packages/react-components/react-teaching-popover/library/etc/react-teaching-popover.api.md index 4404529a4badde..91bea423e45cc2 100644 --- a/packages/react-components/react-teaching-popover/library/etc/react-teaching-popover.api.md +++ b/packages/react-components/react-teaching-popover/library/etc/react-teaching-popover.api.md @@ -28,9 +28,6 @@ import * as React_2 from 'react'; import type { Slot } from '@fluentui/react-utilities'; import type { SlotClassNames } from '@fluentui/react-utilities'; -// @public (undocumented) -export type NavButtonRenderFunction = (value: string) => React_2.ReactNode; - // @public export const renderTeachingPopover_unstable: (state: PopoverState, contextValues?: PopoverContextValues) => JSXElement; @@ -127,11 +124,6 @@ export type TeachingPopoverCarouselCardState = ComponentState; -// @public -export type TeachingPopoverCarouselContextValues = { - carousel: CarouselContextValue; -}; - // @public export const TeachingPopoverCarouselFooter: ForwardRefComponent; diff --git a/packages/react-components/react-teaching-popover/library/src/index.ts b/packages/react-components/react-teaching-popover/library/src/index.ts index 733654cbc29cd2..9a8a5e36168a8e 100644 --- a/packages/react-components/react-teaching-popover/library/src/index.ts +++ b/packages/react-components/react-teaching-popover/library/src/index.ts @@ -43,7 +43,6 @@ export { useTeachingPopoverCarouselContextValues_unstable, } from './TeachingPopoverCarousel'; export type { - TeachingPopoverCarouselContextValues, TeachingPopoverCarouselProps, TeachingPopoverCarouselSlots, TeachingPopoverCarouselState, @@ -68,7 +67,6 @@ export { useTeachingPopoverCarouselNav_unstable, } from './TeachingPopoverCarouselNav'; export type { - NavButtonRenderFunction, TeachingPopoverCarouselNavProps, TeachingPopoverCarouselNavSlots, TeachingPopoverCarouselNavState, From 3ec08c29b93ca27b797c052c7a7f0db23743a70a Mon Sep 17 00:00:00 2001 From: mainframev Date: Tue, 19 May 2026 11:02:01 +0200 Subject: [PATCH 4/4] chore: address review comments --- .../library/etc/teaching-popover.api.md | 10 +-- .../TeachingPopover/TeachingPopover.types.ts | 19 +++-- .../useTeachingPopoverCarousel.ts | 11 +-- ...nderTeachingPopoverCarouselFooterButton.ts | 7 +- .../renderTeachingPopoverCarouselNavButton.ts | 7 +- .../src/components/TeachingPopover/index.ts | 2 +- .../TeachingPopover/renderTeachingPopover.tsx | 17 ++-- .../useTeachingPopoverContextValues.ts | 31 +++---- .../library/src/teaching-popover.ts | 2 +- .../TeachingPopoverDefault.stories.tsx | 5 +- .../TeachingPopoverDescription.md | 2 +- .../TeachingPopoverWithCarousel.stories.tsx | 5 +- .../teaching-popover.module.css | 83 ------------------- 13 files changed, 56 insertions(+), 145 deletions(-) diff --git a/packages/react-components/react-headless-components-preview/library/etc/teaching-popover.api.md b/packages/react-components/react-headless-components-preview/library/etc/teaching-popover.api.md index d498a5c4447604..b3f7b54c037e03 100644 --- a/packages/react-components/react-headless-components-preview/library/etc/teaching-popover.api.md +++ b/packages/react-components/react-headless-components-preview/library/etc/teaching-popover.api.md @@ -110,6 +110,9 @@ export const TeachingPopover: { displayName: string; }; +// @public +export type TeachingPopoverBaseBridgedContextValue = Pick; + // @public (undocumented) export const TeachingPopoverBody: ForwardRefComponent; @@ -195,7 +198,7 @@ export { TeachingPopoverCarouselState } // @public (undocumented) export type TeachingPopoverContextValues = { popover: PopoverContextValue; - v9Popover: TeachingPopoverV9BridgedContextValue; + basePopover: TeachingPopoverBaseBridgedContextValue; }; // @public (undocumented) @@ -270,9 +273,6 @@ export type TeachingPopoverTriggerState = { children: React_2.ReactElement | null; }; -// @public -export type TeachingPopoverV9BridgedContextValue = Pick; - // @public export const useTeachingPopover: (props: TeachingPopoverProps) => TeachingPopoverState; @@ -282,7 +282,7 @@ export { useTeachingPopoverCarousel } export { useTeachingPopoverCarouselCard } -// @public +// @public (undocumented) export const useTeachingPopoverCarouselContextValues: (state: TeachingPopoverCarouselState) => TeachingPopoverCarouselContextValues; // @public (undocumented) diff --git a/packages/react-components/react-headless-components-preview/library/src/components/TeachingPopover/TeachingPopover.types.ts b/packages/react-components/react-headless-components-preview/library/src/components/TeachingPopover/TeachingPopover.types.ts index 1846d7f264e357..52ddc2f03464d5 100644 --- a/packages/react-components/react-headless-components-preview/library/src/components/TeachingPopover/TeachingPopover.types.ts +++ b/packages/react-components/react-headless-components-preview/library/src/components/TeachingPopover/TeachingPopover.types.ts @@ -1,4 +1,4 @@ -import type { PopoverContextValue as V9PopoverContextValue } from '@fluentui/react-popover'; +import type { PopoverContextValue as BasePopoverContextValue } from '@fluentui/react-popover'; import type { PopoverProps, PopoverState, PopoverContextValue } from '../Popover/Popover.types'; /** @@ -8,18 +8,19 @@ export type TeachingPopoverProps = PopoverProps; /** * TeachingPopover State — identical to the headless Popover state. Styling - * concerns from the v9 component (`appearance`, `trapFocus`, `inline`) are - * intentionally omitted; consumers control presentation. + * concerns from `@fluentui/react-teaching-popover` (`appearance`, `trapFocus`, + * `inline`) are intentionally omitted; consumers control presentation. */ export type TeachingPopoverState = PopoverState; /** - * Subset of the v9 `PopoverContextValue` that the v9 teaching-popover base - * hooks actually read (`toggleOpen`, `setOpen`, `triggerRef`). The other v9 - * fields fall back to `popoverContextDefaultValue` from `@fluentui/react-popover`. + * Subset of the `@fluentui/react-popover` `PopoverContextValue` that the + * `@fluentui/react-teaching-popover` base hooks actually read (`toggleOpen`, + * `setOpen`, `triggerRef`). The other fields fall back to + * `popoverContextDefaultValue` from `@fluentui/react-popover`. */ -export type TeachingPopoverV9BridgedContextValue = Pick< - V9PopoverContextValue, +export type TeachingPopoverBaseBridgedContextValue = Pick< + BasePopoverContextValue, | 'open' | 'setOpen' | 'toggleOpen' @@ -33,5 +34,5 @@ export type TeachingPopoverV9BridgedContextValue = Pick< export type TeachingPopoverContextValues = { popover: PopoverContextValue; - v9Popover: TeachingPopoverV9BridgedContextValue; + basePopover: TeachingPopoverBaseBridgedContextValue; }; diff --git a/packages/react-components/react-headless-components-preview/library/src/components/TeachingPopover/TeachingPopoverCarousel/useTeachingPopoverCarousel.ts b/packages/react-components/react-headless-components-preview/library/src/components/TeachingPopover/TeachingPopoverCarousel/useTeachingPopoverCarousel.ts index ddadae93db77a0..5f87a4c43747cf 100644 --- a/packages/react-components/react-headless-components-preview/library/src/components/TeachingPopover/TeachingPopoverCarousel/useTeachingPopoverCarousel.ts +++ b/packages/react-components/react-headless-components-preview/library/src/components/TeachingPopover/TeachingPopoverCarousel/useTeachingPopoverCarousel.ts @@ -8,13 +8,6 @@ import type { export { useTeachingPopoverCarouselBase_unstable as useTeachingPopoverCarousel } from '@fluentui/react-teaching-popover'; -/** - * Cast around the v9 contextValues helper, which is typed against the - * styled state but only reads carousel fields that exist on the base state. - */ -export const useTeachingPopoverCarouselContextValues = ( +export const useTeachingPopoverCarouselContextValues = useTeachingPopoverCarouselContextValues_unstable as ( state: TeachingPopoverCarouselState, -): TeachingPopoverCarouselContextValues => - useTeachingPopoverCarouselContextValues_unstable( - state as Parameters[0], - ); +) => TeachingPopoverCarouselContextValues; diff --git a/packages/react-components/react-headless-components-preview/library/src/components/TeachingPopover/TeachingPopoverCarouselFooterButton/renderTeachingPopoverCarouselFooterButton.ts b/packages/react-components/react-headless-components-preview/library/src/components/TeachingPopover/TeachingPopoverCarouselFooterButton/renderTeachingPopoverCarouselFooterButton.ts index 588c1c82ad3a68..58b4612770b39d 100644 --- a/packages/react-components/react-headless-components-preview/library/src/components/TeachingPopover/TeachingPopoverCarouselFooterButton/renderTeachingPopoverCarouselFooterButton.ts +++ b/packages/react-components/react-headless-components-preview/library/src/components/TeachingPopover/TeachingPopoverCarouselFooterButton/renderTeachingPopoverCarouselFooterButton.ts @@ -2,9 +2,6 @@ import { renderTeachingPopoverCarouselFooterButton_unstable } from '@fluentui/re import type { JSXElement } from '@fluentui/react-utilities'; import type { TeachingPopoverCarouselFooterButtonState } from './TeachingPopoverCarouselFooterButton.types'; -export const renderTeachingPopoverCarouselFooterButton = ( +export const renderTeachingPopoverCarouselFooterButton = renderTeachingPopoverCarouselFooterButton_unstable as ( state: TeachingPopoverCarouselFooterButtonState, -): JSXElement => - renderTeachingPopoverCarouselFooterButton_unstable( - state as Parameters[0], - ); +) => JSXElement; diff --git a/packages/react-components/react-headless-components-preview/library/src/components/TeachingPopover/TeachingPopoverCarouselNavButton/renderTeachingPopoverCarouselNavButton.ts b/packages/react-components/react-headless-components-preview/library/src/components/TeachingPopover/TeachingPopoverCarouselNavButton/renderTeachingPopoverCarouselNavButton.ts index 8720fa32861e3f..5d7a19c1b6b62f 100644 --- a/packages/react-components/react-headless-components-preview/library/src/components/TeachingPopover/TeachingPopoverCarouselNavButton/renderTeachingPopoverCarouselNavButton.ts +++ b/packages/react-components/react-headless-components-preview/library/src/components/TeachingPopover/TeachingPopoverCarouselNavButton/renderTeachingPopoverCarouselNavButton.ts @@ -2,7 +2,6 @@ import { renderTeachingPopoverCarouselNavButton_unstable } from '@fluentui/react import type { JSXElement } from '@fluentui/react-utilities'; import type { TeachingPopoverCarouselNavButtonState } from './TeachingPopoverCarouselNavButton.types'; -export const renderTeachingPopoverCarouselNavButton = (state: TeachingPopoverCarouselNavButtonState): JSXElement => - renderTeachingPopoverCarouselNavButton_unstable( - state as Parameters[0], - ); +export const renderTeachingPopoverCarouselNavButton = renderTeachingPopoverCarouselNavButton_unstable as ( + state: TeachingPopoverCarouselNavButtonState, +) => JSXElement; diff --git a/packages/react-components/react-headless-components-preview/library/src/components/TeachingPopover/index.ts b/packages/react-components/react-headless-components-preview/library/src/components/TeachingPopover/index.ts index 41845f5c061c56..59ef4828fbd7a1 100644 --- a/packages/react-components/react-headless-components-preview/library/src/components/TeachingPopover/index.ts +++ b/packages/react-components/react-headless-components-preview/library/src/components/TeachingPopover/index.ts @@ -6,7 +6,7 @@ export type { TeachingPopoverProps, TeachingPopoverState, TeachingPopoverContextValues, - TeachingPopoverV9BridgedContextValue, + TeachingPopoverBaseBridgedContextValue, } from './TeachingPopover.types'; export { diff --git a/packages/react-components/react-headless-components-preview/library/src/components/TeachingPopover/renderTeachingPopover.tsx b/packages/react-components/react-headless-components-preview/library/src/components/TeachingPopover/renderTeachingPopover.tsx index 5a715812556a6b..d45b36edd82c0c 100644 --- a/packages/react-components/react-headless-components-preview/library/src/components/TeachingPopover/renderTeachingPopover.tsx +++ b/packages/react-components/react-headless-components-preview/library/src/components/TeachingPopover/renderTeachingPopover.tsx @@ -1,26 +1,27 @@ import * as React from 'react'; import { - PopoverProvider as V9PopoverProvider, - type PopoverContextValue as V9PopoverContextValue, + PopoverProvider as BasePopoverProvider, + type PopoverContextValue as BasePopoverContextValue, } from '@fluentui/react-popover'; import { PopoverProvider } from '../Popover/popoverContext'; import type { TeachingPopoverContextValues, TeachingPopoverState } from './TeachingPopover.types'; /** * Renders TeachingPopover by providing both the headless `PopoverContext` - * (consumed by headless sub-components) and the v9 `PopoverContext` - * (consumed by v9 teaching-popover base hooks). The bridged value is cast - * to `V9PopoverContextValue` — the omitted fields (`size`, `inline`, etc.) - * are styling concerns that no base hook reads. + * (consumed by headless sub-components) and the `@fluentui/react-popover` + * `PopoverContext` (consumed by `@fluentui/react-teaching-popover` base + * hooks). The bridged value is cast to `BasePopoverContextValue` — the + * omitted fields (`size`, `inline`, etc.) are styling concerns that no base + * hook reads. */ export const renderTeachingPopover = ( state: TeachingPopoverState, contextValues: TeachingPopoverContextValues, ): React.ReactElement => ( - + {state.popoverTrigger} {state.open ? state.popoverSurface : null} - + ); diff --git a/packages/react-components/react-headless-components-preview/library/src/components/TeachingPopover/useTeachingPopoverContextValues.ts b/packages/react-components/react-headless-components-preview/library/src/components/TeachingPopover/useTeachingPopoverContextValues.ts index 7fcad395f84c8c..d85302a2970137 100644 --- a/packages/react-components/react-headless-components-preview/library/src/components/TeachingPopover/useTeachingPopoverContextValues.ts +++ b/packages/react-components/react-headless-components-preview/library/src/components/TeachingPopover/useTeachingPopoverContextValues.ts @@ -5,31 +5,32 @@ import { usePopoverContextValues } from '../Popover/usePopover'; import type { TeachingPopoverContextValues, TeachingPopoverState, - TeachingPopoverV9BridgedContextValue, + TeachingPopoverBaseBridgedContextValue, } from './TeachingPopover.types'; -type V9SetOpen = TeachingPopoverV9BridgedContextValue['setOpen']; -type V9ToggleOpen = TeachingPopoverV9BridgedContextValue['toggleOpen']; +type BaseSetOpen = TeachingPopoverBaseBridgedContextValue['setOpen']; +type BaseToggleOpen = TeachingPopoverBaseBridgedContextValue['toggleOpen']; /** - * Builds both the headless `PopoverContext` value and a v9-compatible - * `PopoverContext` value. The v9 bridge lets sub-components consume base - * hooks from `@fluentui/react-teaching-popover` (e.g. `useTeachingPopoverHeaderBase_unstable`), - * which read `toggleOpen` / `setOpen` / `triggerRef` from the v9 context. + * Builds both the headless `PopoverContext` value and a + * `@fluentui/react-popover`-compatible `PopoverContext` value. The bridge + * lets sub-components consume base hooks from + * `@fluentui/react-teaching-popover` (e.g. `useTeachingPopoverHeaderBase_unstable`), + * which read `toggleOpen` / `setOpen` / `triggerRef` from that context. * - * The v9 `OpenPopoverEvents` union is wider than the headless one (it - * accepts `FocusEvent`). Base hooks never fire focus-driven dismisses, so - * casting `state.setOpen` / `state.toggleOpen` to the v9 signatures is safe - * — no extra event types reach them in practice. + * The `@fluentui/react-popover` `OpenPopoverEvents` union is wider than the + * headless one (it accepts `FocusEvent`). Base hooks never fire focus-driven + * dismisses, so casting `state.setOpen` / `state.toggleOpen` to those + * signatures is safe — no extra event types reach them in practice. */ export const useTeachingPopoverContextValues = (state: TeachingPopoverState): TeachingPopoverContextValues => { const { popover } = usePopoverContextValues(state); - const v9Popover = React.useMemo( + const basePopover = React.useMemo( () => ({ open: state.open, - setOpen: state.setOpen as unknown as V9SetOpen, - toggleOpen: state.toggleOpen as unknown as V9ToggleOpen, + setOpen: state.setOpen as unknown as BaseSetOpen, + toggleOpen: state.toggleOpen as unknown as BaseToggleOpen, triggerRef: state.triggerRef, contentRef: state.contentRef, arrowRef: state.arrowRef, @@ -50,5 +51,5 @@ export const useTeachingPopoverContextValues = (state: TeachingPopoverState): Te ], ); - return { popover, v9Popover }; + return { popover, basePopover }; }; diff --git a/packages/react-components/react-headless-components-preview/library/src/teaching-popover.ts b/packages/react-components/react-headless-components-preview/library/src/teaching-popover.ts index 0b722a3dcd615a..88c13e8c377aae 100644 --- a/packages/react-components/react-headless-components-preview/library/src/teaching-popover.ts +++ b/packages/react-components/react-headless-components-preview/library/src/teaching-popover.ts @@ -48,7 +48,7 @@ export type { TeachingPopoverProps, TeachingPopoverState, TeachingPopoverContextValues, - TeachingPopoverV9BridgedContextValue, + TeachingPopoverBaseBridgedContextValue, TeachingPopoverTriggerProps, TeachingPopoverTriggerState, TeachingPopoverTriggerChildProps, diff --git a/packages/react-components/react-headless-components-preview/stories/src/TeachingPopover/TeachingPopoverDefault.stories.tsx b/packages/react-components/react-headless-components-preview/stories/src/TeachingPopover/TeachingPopoverDefault.stories.tsx index 2ea912e9294497..c4d74d757fc0a3 100644 --- a/packages/react-components/react-headless-components-preview/stories/src/TeachingPopover/TeachingPopoverDefault.stories.tsx +++ b/packages/react-components/react-headless-components-preview/stories/src/TeachingPopover/TeachingPopoverDefault.stories.tsx @@ -11,13 +11,14 @@ import { } from '@fluentui/react-headless-components-preview/teaching-popover'; import styles from './teaching-popover.module.css'; +import popoverStyles from '../Popover/popover.module.css'; export const Default = (): React.ReactNode => ( - + - + }} diff --git a/packages/react-components/react-headless-components-preview/stories/src/TeachingPopover/TeachingPopoverDescription.md b/packages/react-components/react-headless-components-preview/stories/src/TeachingPopover/TeachingPopoverDescription.md index 26d31b5f32f582..eecc374abe09bb 100644 --- a/packages/react-components/react-headless-components-preview/stories/src/TeachingPopover/TeachingPopoverDescription.md +++ b/packages/react-components/react-headless-components-preview/stories/src/TeachingPopover/TeachingPopoverDescription.md @@ -1,3 +1,3 @@ The headless `TeachingPopover` is built on top of the headless `Popover`. It adds a structured header / title / body / footer composition and an optional paged carousel — without styling. Bring your own CSS. -`TeachingPopover` re-uses the v9 `react-teaching-popover` base hooks for its sub-components (`Header`, `Title`, `Footer`, `Carousel*`) and bridges the v9 `PopoverContext` internally so dismiss buttons, finish handlers, and the carousel state machine all work transparently. +`TeachingPopover` re-uses the `@fluentui/react-teaching-popover` base hooks for its sub-components (`Header`, `Title`, `Footer`, `Carousel*`) and bridges the `@fluentui/react-popover` `PopoverContext` internally so dismiss buttons, finish handlers, and the carousel state machine all work transparently. diff --git a/packages/react-components/react-headless-components-preview/stories/src/TeachingPopover/TeachingPopoverWithCarousel.stories.tsx b/packages/react-components/react-headless-components-preview/stories/src/TeachingPopover/TeachingPopoverWithCarousel.stories.tsx index a777f27161fcec..42257ae3884ad9 100644 --- a/packages/react-components/react-headless-components-preview/stories/src/TeachingPopover/TeachingPopoverWithCarousel.stories.tsx +++ b/packages/react-components/react-headless-components-preview/stories/src/TeachingPopover/TeachingPopoverWithCarousel.stories.tsx @@ -17,6 +17,7 @@ import { } from '@fluentui/react-headless-components-preview/teaching-popover'; import styles from './teaching-popover.module.css'; +import popoverStyles from '../Popover/popover.module.css'; const PAGES = ['intro', 'features', 'wrap-up'] as const; @@ -28,9 +29,9 @@ const dismissButtonSlot = { export const WithCarousel = (): React.ReactNode => ( - + - + `Slide ${i + 1} of ${PAGES.length}`}>
diff --git a/packages/react-components/react-headless-components-preview/stories/src/TeachingPopover/teaching-popover.module.css b/packages/react-components/react-headless-components-preview/stories/src/TeachingPopover/teaching-popover.module.css index 3bbba811d86899..e8bacfc14a3a11 100644 --- a/packages/react-components/react-headless-components-preview/stories/src/TeachingPopover/teaching-popover.module.css +++ b/packages/react-components/react-headless-components-preview/stories/src/TeachingPopover/teaching-popover.module.css @@ -1,94 +1,11 @@ -.trigger { - display: inline-flex; - align-items: center; - height: 36px; - padding: 0 var(--space-4); - border: 0; - border-radius: var(--radius-md); - background: var(--accent); - color: var(--accent-contrast); - font-size: 13.5px; - font-weight: 500; - cursor: pointer; -} - -.trigger:hover, -.trigger[data-open] { - background: var(--accent-strong); -} - -.trigger:focus-visible { - outline: var(--stroke-thick) solid var(--accent); - outline-offset: 2px; -} - -/* - TeachingPopover always renders with an arrow (the headless useTeachingPopover - defaults withArrow to true). The surface borrows the same arrow technique as - the headless Popover stories: overflow:visible plus a CSS filter drop-shadow - so the shadow traces around the rotated arrow shape (a box-shadow would clip - on the rotated square and a border wouldn't connect to it). -*/ .surface { background: var(--bg-elev); - border: 0; border-radius: var(--radius-lg); - filter: drop-shadow(0 0 1px rgba(0, 0, 0, 0.12)) drop-shadow(0 4px 8px rgba(0, 0, 0, 0.14)); - overflow: visible; padding: var(--space-5); min-width: 320px; max-width: 360px; } -/* - Arrow rendering — headless popover surface paints a
and - keeps the surface's data-placement attribute in sync with usePositioning. - Mirrors stories/src/Popover/popover.module.css so visuals stay consistent. -*/ -.surface [data-arrow] { - position: absolute; - width: 12px; - height: 12px; - background: var(--bg-elev); - transform: rotate(45deg); -} - -.surface[data-placement^='above'] [data-arrow] { - bottom: -6px; -} - -.surface[data-placement^='below'] [data-arrow] { - top: -6px; -} - -.surface[data-placement^='before'] [data-arrow] { - right: -6px; -} - -.surface[data-placement^='after'] [data-arrow] { - left: -6px; -} - -.surface[data-placement='above'] [data-arrow], -.surface[data-placement='below'] [data-arrow] { - inset-inline: 0; - margin-inline: auto; -} - -.surface[data-placement='before'] [data-arrow], -.surface[data-placement='after'] [data-arrow] { - inset-block: 0; - margin-block: auto; -} - -.surface[data-placement$='-start'] [data-arrow] { - inset-inline-start: var(--arrow-padding, 12px); -} - -.surface[data-placement$='-end'] [data-arrow] { - inset-inline-end: var(--arrow-padding, 12px); -} - .header { display: flex; align-items: center;