From 9bf35a105ddca8f05389013507027563558b3792 Mon Sep 17 00:00:00 2001 From: EnricoGianoglio Date: Thu, 16 Apr 2026 15:38:28 +0200 Subject: [PATCH 01/12] move CAP component wrappers into components folder and separate from published customStyleHooks --- packages/react-cap-theme/.swcrc | 3 +- .../AccordionHeader/AccordionHeader.tsx | 30 ++++++++++ .../src/components/react-accordion/index.ts | 3 +- .../src/components/react-button/Button.ts | 11 ---- .../src/components/react-button/MenuButton.ts | 10 ---- .../components/react-button/SplitButton.ts | 10 ---- .../components/react-button/ToggleButton.ts | 9 --- .../react-button/components/Button/Button.tsx | 12 ++-- .../components/Button/Button.utils.ts | 13 +---- .../components/Button/renderButton.tsx | 4 +- .../components/Button/useButton.ts | 5 +- .../components/MenuButton/MenuButton.tsx | 11 ++-- .../MenuButton/renderMenuButton.tsx | 2 +- .../components/MenuButton/useMenuButton.tsx | 5 +- .../components/SplitButton/SplitButton.tsx | 12 ++-- .../SplitButton/renderSplitButton.tsx | 5 +- .../components/SplitButton/useSplitButton.ts | 5 +- .../components/ToggleButton/ToggleButton.tsx | 13 +++-- .../ToggleButton/renderToggleButton.tsx | 4 +- .../ToggleButton/useToggleButton.ts | 4 +- .../src/components/react-button/index.ts | 8 +-- .../react-button/utils/toBaseState.ts | 27 +++++++++ .../components/Checkbox/Checkbox.tsx | 27 +++++++++ .../components/Checkbox/useCheckbox.tsx | 5 +- .../src/components/react-checkbox/index.ts | 2 +- .../useAccordionHeaderStyles.styles.ts | 0 .../useAccordionPanelStyles.styles.ts | 0 .../customStyleHooks/react-accordion/index.ts | 2 + .../Avatar/useAvatarStyles.styles.ts | 0 .../useAvatarGroupItemStyles.styles.ts | 0 .../useAvatarGroupPopoverStyles.styles.ts | 0 .../react-avatar/index.ts | 0 .../components/Badge/useBadgeStyles.styles.ts | 0 .../react-badge/index.ts | 0 .../customStyleHooks/react-button/Button.ts | 7 +++ .../react-button/MenuButton.ts | 6 ++ .../react-button/SplitButton.ts | 6 ++ .../react-button/ToggleButton.ts | 5 ++ .../components/Button/Button.types.ts | 0 .../Button/useButtonStyles.styles.ts | 0 .../components/MenuButton/MenuButton.types.ts | 0 .../MenuButton/useMenuButtonStyles.styles.ts | 0 .../SplitButton/SplitButton.types.ts | 0 .../useSplitButtonStyles.styles.ts | 0 .../ToggleButton/ToggleButton.types.ts | 0 .../useToggleButtonStyles.styles.ts | 11 ++-- .../customStyleHooks/react-button/index.ts | 24 ++++++++ .../components/Carousel/Carousel.types.ts | 0 .../components/Carousel/CarouselContext.ts | 0 .../components/Carousel/renderCarousel.tsx | 0 .../components/Carousel/useCarousel.ts | 0 .../Carousel/useCarouselContextValues.ts | 0 .../Carousel/useCarouselStyles.styles.ts | 0 .../CarouselAutoplayButton.types.ts | 0 .../renderCarouselAutoplayButton.tsx | 0 .../useCarouselAutoplayButton.ts | 0 .../useCarouselAutoplayButtonStyles.styles.ts | 0 .../CarouselButton/CarouselButton.types.ts | 0 .../CarouselButton/renderCarouselButton.tsx | 0 .../CarouselButton/useCarouselButton.ts | 0 .../useCarouselButtonStyles.styles.ts | 0 .../CarouselNav/CarouselNav.types.ts | 0 .../components/CarouselNav/useCarouselNav.ts | 0 .../useCarouselNavContextValues.ts | 0 .../useCarouselNavStyles.styles.ts | 0 .../useCarouselNavButtonStyles.styles.ts | 0 .../CarouselNavContainer.types.ts | 0 .../renderCarouselNavContainer.tsx | 0 .../useCarouselNavContainer.ts | 0 .../useCarouselNavContainerStyles.styles.ts | 0 .../useCarouselNavImageButtonStyles.styles.ts | 0 .../react-carousel/index.ts | 0 .../components/Checkbox/Checkbox.types.ts | 0 .../Checkbox/useCheckboxStyles.styles.ts | 11 +--- .../customStyleHooks/react-checkbox/index.ts | 6 ++ .../useDialogActionsStyles.styles.ts | 0 .../DialogBody/useDialogBodyStyles.styles.ts | 0 .../useDialogSurfaceStyles.styles.ts | 0 .../DialogTitle/DialogTitle.types.ts | 0 .../components/DialogTitle/useDialogTitle.tsx | 0 .../useDialogTitleStyles.styles.ts | 0 .../react-dialog/constants/queries.ts | 0 .../react-dialog/index.ts | 0 .../components/Drawer/Drawer.types.ts | 0 .../components/Drawer/useDrawer.ts | 0 .../DrawerBody/useDrawerBodyStyles.styles.ts | 0 .../useDrawerFooterStyles.styles.ts | 0 .../useDrawerHeaderStyles.styles.ts | 0 .../useDrawerHeaderNavigationStyles.styles.ts | 0 .../useDrawerHeaderTitleStyles.styles.ts | 0 .../InlineDrawer/InlineDrawer.types.ts | 0 .../InlineDrawer/useInlineDrawer.ts | 0 .../useInlineDrawerStyles.styles.ts | 0 .../useOverlayDrawerStyles.styles.ts | 0 .../react-drawer/index.ts | 0 .../shared/useDrawerBaseStyles.styles.ts | 0 .../react-icons/index.ts | 0 .../components/Image/useImageStyles.styles.ts | 0 .../react-image/index.ts | 0 .../components/Label/Label.types.ts | 0 .../components/Label/useLabelStyles.styles.ts | 0 .../react-label/index.ts | 0 .../react-link/components/Link/Link.types.ts | 0 .../react-link/components/Link/Link.utils.ts | 0 .../react-link/components/Link/useLink.ts | 0 .../components/Link/useLinkStyles.styles.ts | 0 .../react-link/index.ts | 0 .../react-menu/Menu.ts | 0 .../react-menu/MenuDivider.ts | 0 .../react-menu/MenuGroup.ts | 0 .../react-menu/MenuGroupHeader.ts | 0 .../react-menu/MenuItem.ts | 0 .../react-menu/MenuItemCheckbox.ts | 0 .../react-menu/MenuItemLink.ts | 0 .../react-menu/MenuItemRadio.ts | 0 .../react-menu/MenuItemSwatchPicker.ts | 0 .../react-menu/MenuItemSwitch.ts | 0 .../react-menu/MenuList.ts | 0 .../react-menu/MenuPopover.ts | 0 .../react-menu/MenuSplitGroup.ts | 0 .../react-menu/MenuTrigger.ts | 0 .../useMenuDividerStyles.styles.ts | 0 .../useMenuGroupHeaderStyles.styles.ts | 0 .../MenuItem/useMenuItemStyles.styles.ts | 0 .../useMenuItemCheckboxStyles.styles.ts | 0 .../MenuItemRadio/useMenuItemRadio.tsx | 0 .../useMenuItemRadioStyles.styles.ts | 0 .../MenuItemSwatchPicker.tsx | 0 .../MenuItemSwatchPicker.types.ts | 0 .../useMenuItemSwatchPicker.tsx | 0 .../useMenuItemSwatchPickerStyles.styles.ts | 0 .../useMenuPopoverStyles.styles.ts | 0 .../useMenuSplitGroupStyles.styles.ts | 0 .../react-menu/index.ts | 0 .../usePopoverSurfaceStyles.styles.ts | 0 .../react-popover/index.ts | 0 .../components/Tooltip/Tooltip.types.ts | 0 .../components/Tooltip/useTooltip.ts | 0 .../Tooltip/useTooltipStyles.styles.ts | 0 .../react-tooltip/index.ts | 0 .../tokens/index.ts | 0 .../tokens/tokens.ts | 0 .../tokens/types.ts | 0 packages/react-cap-theme/src/index.ts | 56 +++++++++---------- packages/react-cap-theme/tsconfig.lib.json | 1 + 145 files changed, 240 insertions(+), 135 deletions(-) create mode 100644 packages/react-cap-theme/src/components/react-accordion/components/AccordionHeader/AccordionHeader.tsx delete mode 100644 packages/react-cap-theme/src/components/react-button/Button.ts delete mode 100644 packages/react-cap-theme/src/components/react-button/MenuButton.ts delete mode 100644 packages/react-cap-theme/src/components/react-button/SplitButton.ts delete mode 100644 packages/react-cap-theme/src/components/react-button/ToggleButton.ts create mode 100644 packages/react-cap-theme/src/components/react-button/utils/toBaseState.ts create mode 100644 packages/react-cap-theme/src/components/react-checkbox/components/Checkbox/Checkbox.tsx rename packages/react-cap-theme/src/{components => customStyleHooks}/react-accordion/components/AccordionHeader/useAccordionHeaderStyles.styles.ts (100%) rename packages/react-cap-theme/src/{components => customStyleHooks}/react-accordion/components/AccordionPanel/useAccordionPanelStyles.styles.ts (100%) create mode 100644 packages/react-cap-theme/src/customStyleHooks/react-accordion/index.ts rename packages/react-cap-theme/src/{components => customStyleHooks}/react-avatar/components/Avatar/useAvatarStyles.styles.ts (100%) rename packages/react-cap-theme/src/{components => customStyleHooks}/react-avatar/components/AvatarGroupItem/useAvatarGroupItemStyles.styles.ts (100%) rename packages/react-cap-theme/src/{components => customStyleHooks}/react-avatar/components/AvatarGroupPopover/useAvatarGroupPopoverStyles.styles.ts (100%) rename packages/react-cap-theme/src/{components => customStyleHooks}/react-avatar/index.ts (100%) rename packages/react-cap-theme/src/{components => customStyleHooks}/react-badge/components/Badge/useBadgeStyles.styles.ts (100%) rename packages/react-cap-theme/src/{components => customStyleHooks}/react-badge/index.ts (100%) create mode 100644 packages/react-cap-theme/src/customStyleHooks/react-button/Button.ts create mode 100644 packages/react-cap-theme/src/customStyleHooks/react-button/MenuButton.ts create mode 100644 packages/react-cap-theme/src/customStyleHooks/react-button/SplitButton.ts create mode 100644 packages/react-cap-theme/src/customStyleHooks/react-button/ToggleButton.ts rename packages/react-cap-theme/src/{components => customStyleHooks}/react-button/components/Button/Button.types.ts (100%) rename packages/react-cap-theme/src/{components => customStyleHooks}/react-button/components/Button/useButtonStyles.styles.ts (100%) rename packages/react-cap-theme/src/{components => customStyleHooks}/react-button/components/MenuButton/MenuButton.types.ts (100%) rename packages/react-cap-theme/src/{components => customStyleHooks}/react-button/components/MenuButton/useMenuButtonStyles.styles.ts (100%) rename packages/react-cap-theme/src/{components => customStyleHooks}/react-button/components/SplitButton/SplitButton.types.ts (100%) rename packages/react-cap-theme/src/{components => customStyleHooks}/react-button/components/SplitButton/useSplitButtonStyles.styles.ts (100%) rename packages/react-cap-theme/src/{components => customStyleHooks}/react-button/components/ToggleButton/ToggleButton.types.ts (100%) rename packages/react-cap-theme/src/{components => customStyleHooks}/react-button/components/ToggleButton/useToggleButtonStyles.styles.ts (97%) create mode 100644 packages/react-cap-theme/src/customStyleHooks/react-button/index.ts rename packages/react-cap-theme/src/{components => customStyleHooks}/react-carousel/components/Carousel/Carousel.types.ts (100%) rename packages/react-cap-theme/src/{components => customStyleHooks}/react-carousel/components/Carousel/CarouselContext.ts (100%) rename packages/react-cap-theme/src/{components => customStyleHooks}/react-carousel/components/Carousel/renderCarousel.tsx (100%) rename packages/react-cap-theme/src/{components => customStyleHooks}/react-carousel/components/Carousel/useCarousel.ts (100%) rename packages/react-cap-theme/src/{components => customStyleHooks}/react-carousel/components/Carousel/useCarouselContextValues.ts (100%) rename packages/react-cap-theme/src/{components => customStyleHooks}/react-carousel/components/Carousel/useCarouselStyles.styles.ts (100%) rename packages/react-cap-theme/src/{components => customStyleHooks}/react-carousel/components/CarouselAutoplayButton/CarouselAutoplayButton.types.ts (100%) rename packages/react-cap-theme/src/{components => customStyleHooks}/react-carousel/components/CarouselAutoplayButton/renderCarouselAutoplayButton.tsx (100%) rename packages/react-cap-theme/src/{components => customStyleHooks}/react-carousel/components/CarouselAutoplayButton/useCarouselAutoplayButton.ts (100%) rename packages/react-cap-theme/src/{components => customStyleHooks}/react-carousel/components/CarouselAutoplayButton/useCarouselAutoplayButtonStyles.styles.ts (100%) rename packages/react-cap-theme/src/{components => customStyleHooks}/react-carousel/components/CarouselButton/CarouselButton.types.ts (100%) rename packages/react-cap-theme/src/{components => customStyleHooks}/react-carousel/components/CarouselButton/renderCarouselButton.tsx (100%) rename packages/react-cap-theme/src/{components => customStyleHooks}/react-carousel/components/CarouselButton/useCarouselButton.ts (100%) rename packages/react-cap-theme/src/{components => customStyleHooks}/react-carousel/components/CarouselButton/useCarouselButtonStyles.styles.ts (100%) rename packages/react-cap-theme/src/{components => customStyleHooks}/react-carousel/components/CarouselNav/CarouselNav.types.ts (100%) rename packages/react-cap-theme/src/{components => customStyleHooks}/react-carousel/components/CarouselNav/useCarouselNav.ts (100%) rename packages/react-cap-theme/src/{components => customStyleHooks}/react-carousel/components/CarouselNav/useCarouselNavContextValues.ts (100%) rename packages/react-cap-theme/src/{components => customStyleHooks}/react-carousel/components/CarouselNav/useCarouselNavStyles.styles.ts (100%) rename packages/react-cap-theme/src/{components => customStyleHooks}/react-carousel/components/CarouselNavButton/useCarouselNavButtonStyles.styles.ts (100%) rename packages/react-cap-theme/src/{components => customStyleHooks}/react-carousel/components/CarouselNavContainer/CarouselNavContainer.types.ts (100%) rename packages/react-cap-theme/src/{components => customStyleHooks}/react-carousel/components/CarouselNavContainer/renderCarouselNavContainer.tsx (100%) rename packages/react-cap-theme/src/{components => customStyleHooks}/react-carousel/components/CarouselNavContainer/useCarouselNavContainer.ts (100%) rename packages/react-cap-theme/src/{components => customStyleHooks}/react-carousel/components/CarouselNavContainer/useCarouselNavContainerStyles.styles.ts (100%) rename packages/react-cap-theme/src/{components => customStyleHooks}/react-carousel/components/CarouselNavImageButton/useCarouselNavImageButtonStyles.styles.ts (100%) rename packages/react-cap-theme/src/{components => customStyleHooks}/react-carousel/index.ts (100%) rename packages/react-cap-theme/src/{components => customStyleHooks}/react-checkbox/components/Checkbox/Checkbox.types.ts (100%) rename packages/react-cap-theme/src/{components => customStyleHooks}/react-checkbox/components/Checkbox/useCheckboxStyles.styles.ts (94%) create mode 100644 packages/react-cap-theme/src/customStyleHooks/react-checkbox/index.ts rename packages/react-cap-theme/src/{components => customStyleHooks}/react-dialog/components/DialogActions/useDialogActionsStyles.styles.ts (100%) rename packages/react-cap-theme/src/{components => customStyleHooks}/react-dialog/components/DialogBody/useDialogBodyStyles.styles.ts (100%) rename packages/react-cap-theme/src/{components => customStyleHooks}/react-dialog/components/DialogSurface/useDialogSurfaceStyles.styles.ts (100%) rename packages/react-cap-theme/src/{components => customStyleHooks}/react-dialog/components/DialogTitle/DialogTitle.types.ts (100%) rename packages/react-cap-theme/src/{components => customStyleHooks}/react-dialog/components/DialogTitle/useDialogTitle.tsx (100%) rename packages/react-cap-theme/src/{components => customStyleHooks}/react-dialog/components/DialogTitle/useDialogTitleStyles.styles.ts (100%) rename packages/react-cap-theme/src/{components => customStyleHooks}/react-dialog/constants/queries.ts (100%) rename packages/react-cap-theme/src/{components => customStyleHooks}/react-dialog/index.ts (100%) rename packages/react-cap-theme/src/{components => customStyleHooks}/react-drawer/components/Drawer/Drawer.types.ts (100%) rename packages/react-cap-theme/src/{components => customStyleHooks}/react-drawer/components/Drawer/useDrawer.ts (100%) rename packages/react-cap-theme/src/{components => customStyleHooks}/react-drawer/components/DrawerBody/useDrawerBodyStyles.styles.ts (100%) rename packages/react-cap-theme/src/{components => customStyleHooks}/react-drawer/components/DrawerFooter/useDrawerFooterStyles.styles.ts (100%) rename packages/react-cap-theme/src/{components => customStyleHooks}/react-drawer/components/DrawerHeader/useDrawerHeaderStyles.styles.ts (100%) rename packages/react-cap-theme/src/{components => customStyleHooks}/react-drawer/components/DrawerHeaderNavigation/useDrawerHeaderNavigationStyles.styles.ts (100%) rename packages/react-cap-theme/src/{components => customStyleHooks}/react-drawer/components/DrawerHeaderTitle/useDrawerHeaderTitleStyles.styles.ts (100%) rename packages/react-cap-theme/src/{components => customStyleHooks}/react-drawer/components/InlineDrawer/InlineDrawer.types.ts (100%) rename packages/react-cap-theme/src/{components => customStyleHooks}/react-drawer/components/InlineDrawer/useInlineDrawer.ts (100%) rename packages/react-cap-theme/src/{components => customStyleHooks}/react-drawer/components/InlineDrawer/useInlineDrawerStyles.styles.ts (100%) rename packages/react-cap-theme/src/{components => customStyleHooks}/react-drawer/components/OverlayDrawer/useOverlayDrawerStyles.styles.ts (100%) rename packages/react-cap-theme/src/{components => customStyleHooks}/react-drawer/index.ts (100%) rename packages/react-cap-theme/src/{components => customStyleHooks}/react-drawer/shared/useDrawerBaseStyles.styles.ts (100%) rename packages/react-cap-theme/src/{components => customStyleHooks}/react-icons/index.ts (100%) rename packages/react-cap-theme/src/{components => customStyleHooks}/react-image/components/Image/useImageStyles.styles.ts (100%) rename packages/react-cap-theme/src/{components => customStyleHooks}/react-image/index.ts (100%) rename packages/react-cap-theme/src/{components => customStyleHooks}/react-label/components/Label/Label.types.ts (100%) rename packages/react-cap-theme/src/{components => customStyleHooks}/react-label/components/Label/useLabelStyles.styles.ts (100%) rename packages/react-cap-theme/src/{components => customStyleHooks}/react-label/index.ts (100%) rename packages/react-cap-theme/src/{components => customStyleHooks}/react-link/components/Link/Link.types.ts (100%) rename packages/react-cap-theme/src/{components => customStyleHooks}/react-link/components/Link/Link.utils.ts (100%) rename packages/react-cap-theme/src/{components => customStyleHooks}/react-link/components/Link/useLink.ts (100%) rename packages/react-cap-theme/src/{components => customStyleHooks}/react-link/components/Link/useLinkStyles.styles.ts (100%) rename packages/react-cap-theme/src/{components => customStyleHooks}/react-link/index.ts (100%) rename packages/react-cap-theme/src/{components => customStyleHooks}/react-menu/Menu.ts (100%) rename packages/react-cap-theme/src/{components => customStyleHooks}/react-menu/MenuDivider.ts (100%) rename packages/react-cap-theme/src/{components => customStyleHooks}/react-menu/MenuGroup.ts (100%) rename packages/react-cap-theme/src/{components => customStyleHooks}/react-menu/MenuGroupHeader.ts (100%) rename packages/react-cap-theme/src/{components => customStyleHooks}/react-menu/MenuItem.ts (100%) rename packages/react-cap-theme/src/{components => customStyleHooks}/react-menu/MenuItemCheckbox.ts (100%) rename packages/react-cap-theme/src/{components => customStyleHooks}/react-menu/MenuItemLink.ts (100%) rename packages/react-cap-theme/src/{components => customStyleHooks}/react-menu/MenuItemRadio.ts (100%) rename packages/react-cap-theme/src/{components => customStyleHooks}/react-menu/MenuItemSwatchPicker.ts (100%) rename packages/react-cap-theme/src/{components => customStyleHooks}/react-menu/MenuItemSwitch.ts (100%) rename packages/react-cap-theme/src/{components => customStyleHooks}/react-menu/MenuList.ts (100%) rename packages/react-cap-theme/src/{components => customStyleHooks}/react-menu/MenuPopover.ts (100%) rename packages/react-cap-theme/src/{components => customStyleHooks}/react-menu/MenuSplitGroup.ts (100%) rename packages/react-cap-theme/src/{components => customStyleHooks}/react-menu/MenuTrigger.ts (100%) rename packages/react-cap-theme/src/{components => customStyleHooks}/react-menu/components/MenuDivider/useMenuDividerStyles.styles.ts (100%) rename packages/react-cap-theme/src/{components => customStyleHooks}/react-menu/components/MenuGroupHeader/useMenuGroupHeaderStyles.styles.ts (100%) rename packages/react-cap-theme/src/{components => customStyleHooks}/react-menu/components/MenuItem/useMenuItemStyles.styles.ts (100%) rename packages/react-cap-theme/src/{components => customStyleHooks}/react-menu/components/MenuItemCheckbox/useMenuItemCheckboxStyles.styles.ts (100%) rename packages/react-cap-theme/src/{components => customStyleHooks}/react-menu/components/MenuItemRadio/useMenuItemRadio.tsx (100%) rename packages/react-cap-theme/src/{components => customStyleHooks}/react-menu/components/MenuItemRadio/useMenuItemRadioStyles.styles.ts (100%) rename packages/react-cap-theme/src/{components => customStyleHooks}/react-menu/components/MenuItemSwatchPicker/MenuItemSwatchPicker.tsx (100%) rename packages/react-cap-theme/src/{components => customStyleHooks}/react-menu/components/MenuItemSwatchPicker/MenuItemSwatchPicker.types.ts (100%) rename packages/react-cap-theme/src/{components => customStyleHooks}/react-menu/components/MenuItemSwatchPicker/useMenuItemSwatchPicker.tsx (100%) rename packages/react-cap-theme/src/{components => customStyleHooks}/react-menu/components/MenuItemSwatchPicker/useMenuItemSwatchPickerStyles.styles.ts (100%) rename packages/react-cap-theme/src/{components => customStyleHooks}/react-menu/components/MenuPopover/useMenuPopoverStyles.styles.ts (100%) rename packages/react-cap-theme/src/{components => customStyleHooks}/react-menu/components/MenuSplitGroup/useMenuSplitGroupStyles.styles.ts (100%) rename packages/react-cap-theme/src/{components => customStyleHooks}/react-menu/index.ts (100%) rename packages/react-cap-theme/src/{components => customStyleHooks}/react-popover/components/PopoverSurface/usePopoverSurfaceStyles.styles.ts (100%) rename packages/react-cap-theme/src/{components => customStyleHooks}/react-popover/index.ts (100%) rename packages/react-cap-theme/src/{components => customStyleHooks}/react-tooltip/components/Tooltip/Tooltip.types.ts (100%) rename packages/react-cap-theme/src/{components => customStyleHooks}/react-tooltip/components/Tooltip/useTooltip.ts (100%) rename packages/react-cap-theme/src/{components => customStyleHooks}/react-tooltip/components/Tooltip/useTooltipStyles.styles.ts (100%) rename packages/react-cap-theme/src/{components => customStyleHooks}/react-tooltip/index.ts (100%) rename packages/react-cap-theme/src/{components => customStyleHooks}/tokens/index.ts (100%) rename packages/react-cap-theme/src/{components => customStyleHooks}/tokens/tokens.ts (100%) rename packages/react-cap-theme/src/{components => customStyleHooks}/tokens/types.ts (100%) diff --git a/packages/react-cap-theme/.swcrc b/packages/react-cap-theme/.swcrc index 0f4746f47..4f9426e2a 100644 --- a/packages/react-cap-theme/.swcrc +++ b/packages/react-cap-theme/.swcrc @@ -24,7 +24,8 @@ ".*\\.test.tsx?$", "./src/jest-setup.ts$", "./**/jest-setup.ts$", - ".*.js$" + ".*.js$", + "src/components" ], "$schema": "https://json.schemastore.org/swcrc" } diff --git a/packages/react-cap-theme/src/components/react-accordion/components/AccordionHeader/AccordionHeader.tsx b/packages/react-cap-theme/src/components/react-accordion/components/AccordionHeader/AccordionHeader.tsx new file mode 100644 index 000000000..97b8a0e56 --- /dev/null +++ b/packages/react-cap-theme/src/components/react-accordion/components/AccordionHeader/AccordionHeader.tsx @@ -0,0 +1,30 @@ +import * as React from 'react'; +import type { ForwardRefComponent } from '@fluentui/react-utilities'; +import { + renderAccordionHeader_unstable, + useAccordionHeaderContextValues_unstable, + type AccordionHeaderProps, +} from '@fluentui/react-accordion'; +import { useAccordionHeader } from './useAccordionHeader'; +import { useAccordionHeaderStyles_unstable } from '@fluentui/react-components'; +import { useAccordionHeaderStyles as useCAPAccordionHeader } from '../../../../customStyleHooks/react-accordion'; +/** + * An accordion header is used as a button in the heading + * + * @param props - The accordion header configuration and event handlers + * @param ref - Reference to the accordion header element + * @returns The rendered accordion header component + * @alpha + */ +export const AccordionHeader: ForwardRefComponent = + React.forwardRef((props, ref) => { + const state = useAccordionHeader(props, ref); + + useAccordionHeaderStyles_unstable(state); + useCAPAccordionHeader(state); + + return renderAccordionHeader_unstable( + state, + useAccordionHeaderContextValues_unstable(state) + ); + }); diff --git a/packages/react-cap-theme/src/components/react-accordion/index.ts b/packages/react-cap-theme/src/components/react-accordion/index.ts index 292a7bf3c..6aa0cf0b1 100644 --- a/packages/react-cap-theme/src/components/react-accordion/index.ts +++ b/packages/react-cap-theme/src/components/react-accordion/index.ts @@ -1,2 +1 @@ -export { useAccordionHeaderStyles } from './components/AccordionHeader/useAccordionHeaderStyles.styles'; -export { useAccordionPanelStyles } from './components/AccordionPanel/useAccordionPanelStyles.styles'; +export { AccordionHeader as CAPAccordionHeader } from './components/AccordionHeader/AccordionHeader'; diff --git a/packages/react-cap-theme/src/components/react-button/Button.ts b/packages/react-cap-theme/src/components/react-button/Button.ts deleted file mode 100644 index 7be64da92..000000000 --- a/packages/react-cap-theme/src/components/react-button/Button.ts +++ /dev/null @@ -1,11 +0,0 @@ -export { buttonClassNames } from '@fluentui/react-button'; -export { Button } from './components/Button/Button'; -export { renderButton } from './components/Button/renderButton'; -export { useButton } from './components/Button/useButton'; -export { useButtonStyles } from './components/Button/useButtonStyles.styles'; -export type { - ButtonProps, - ButtonSlots, - ButtonState, - ButtonAppearance, -} from './components/Button/Button.types'; diff --git a/packages/react-cap-theme/src/components/react-button/MenuButton.ts b/packages/react-cap-theme/src/components/react-button/MenuButton.ts deleted file mode 100644 index fb94787a3..000000000 --- a/packages/react-cap-theme/src/components/react-button/MenuButton.ts +++ /dev/null @@ -1,10 +0,0 @@ -export { menuButtonClassNames } from '@fluentui/react-button'; -export { MenuButton } from './components/MenuButton/MenuButton'; -export { renderMenuButton } from './components/MenuButton/renderMenuButton'; -export { useMenuButton } from './components/MenuButton/useMenuButton'; -export { useMenuButtonStyles } from './components/MenuButton/useMenuButtonStyles.styles'; -export type { - MenuButtonProps, - MenuButtonSlots, - MenuButtonState, -} from './components/MenuButton/MenuButton.types'; diff --git a/packages/react-cap-theme/src/components/react-button/SplitButton.ts b/packages/react-cap-theme/src/components/react-button/SplitButton.ts deleted file mode 100644 index 156b83a8f..000000000 --- a/packages/react-cap-theme/src/components/react-button/SplitButton.ts +++ /dev/null @@ -1,10 +0,0 @@ -export { splitButtonClassNames } from '@fluentui/react-button'; -export { SplitButton } from './components/SplitButton/SplitButton'; -export { renderSplitButton } from './components/SplitButton/renderSplitButton'; -export { useSplitButton } from './components/SplitButton/useSplitButton'; -export { useSplitButtonStyles } from './components/SplitButton/useSplitButtonStyles.styles'; -export type { - SplitButtonProps, - SplitButtonSlots, - SplitButtonState, -} from './components/SplitButton/SplitButton.types'; diff --git a/packages/react-cap-theme/src/components/react-button/ToggleButton.ts b/packages/react-cap-theme/src/components/react-button/ToggleButton.ts deleted file mode 100644 index 025aa690b..000000000 --- a/packages/react-cap-theme/src/components/react-button/ToggleButton.ts +++ /dev/null @@ -1,9 +0,0 @@ -export { toggleButtonClassNames } from '@fluentui/react-button'; -export { ToggleButton } from './components/ToggleButton/ToggleButton'; -export { renderToggleButton } from './components/ToggleButton/renderToggleButton'; -export { useToggleButton } from './components/ToggleButton/useToggleButton'; -export { useToggleButtonStyles } from './components/ToggleButton/useToggleButtonStyles.styles'; -export type { - ToggleButtonProps, - ToggleButtonState, -} from './components/ToggleButton/ToggleButton.types'; diff --git a/packages/react-cap-theme/src/components/react-button/components/Button/Button.tsx b/packages/react-cap-theme/src/components/react-button/components/Button/Button.tsx index e27127b06..e1eb6fe08 100644 --- a/packages/react-cap-theme/src/components/react-button/components/Button/Button.tsx +++ b/packages/react-cap-theme/src/components/react-button/components/Button/Button.tsx @@ -1,18 +1,18 @@ -import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts'; import type { ForwardRefComponent } from '@fluentui/react-utilities'; import * as React from 'react'; -import type { ButtonProps } from './Button.types'; import { renderButton } from './renderButton'; import { useButton } from './useButton'; -import { useButtonStyles } from './useButtonStyles.styles'; +import { useButtonStyles_unstable } from '@fluentui/react-components'; +import { useButtonStyles as useCAPButtonStyles } from '../../../../customStyleHooks/react-button'; +import type { ButtonProps } from '../../../../customStyleHooks/react-button/'; +import { toBaseState } from '../../utils/toBaseState'; export const Button: ForwardRefComponent = React.forwardRef( (props, ref) => { const state = useButton(props, ref); - useButtonStyles(state); - - useCustomStyleHook_unstable('useButtonStyles_unstable')(state); + useButtonStyles_unstable(toBaseState(state)); + useCAPButtonStyles(state); return renderButton(state); // Casting is required due to lack of distributive union to support unions on @types/react diff --git a/packages/react-cap-theme/src/components/react-button/components/Button/Button.utils.ts b/packages/react-cap-theme/src/components/react-button/components/Button/Button.utils.ts index a3d635eba..e86372047 100644 --- a/packages/react-cap-theme/src/components/react-button/components/Button/Button.utils.ts +++ b/packages/react-cap-theme/src/components/react-button/components/Button/Button.utils.ts @@ -1,12 +1,8 @@ -import type { - ButtonState as BaseButtonState, - ButtonProps as BaseButtonProps, -} from '@fluentui/react-button'; +import type { ButtonProps as BaseButtonProps } from '@fluentui/react-button'; import type { ButtonAppearance, ButtonProps, - ButtonState, -} from './Button.types'; +} from '../../../../customStyleHooks/react-button'; export const baseAppearanceMap: Record< ButtonAppearance, @@ -24,8 +20,3 @@ export const toBaseProps = (props: ButtonProps): BaseButtonProps => ({ ...props, appearance: props.appearance && baseAppearanceMap[props.appearance], }); - -export const toBaseState = (state: ButtonState): BaseButtonState => ({ - ...state, - appearance: baseAppearanceMap[state.appearance] ?? 'secondary', -}); diff --git a/packages/react-cap-theme/src/components/react-button/components/Button/renderButton.tsx b/packages/react-cap-theme/src/components/react-button/components/Button/renderButton.tsx index f5b69d40f..38cde1f4d 100644 --- a/packages/react-cap-theme/src/components/react-button/components/Button/renderButton.tsx +++ b/packages/react-cap-theme/src/components/react-button/components/Button/renderButton.tsx @@ -3,8 +3,8 @@ import { type ButtonState as BaseButtonState, } from '@fluentui/react-button'; import type { JSXElement } from '@fluentui/react-utilities'; -import type { ButtonState } from './Button.types'; -import { toBaseState } from './Button.utils'; +import type { ButtonState } from '../../../../customStyleHooks/react-button'; +import { toBaseState } from '../../utils/toBaseState'; export const renderButton = (state: ButtonState): JSXElement => { const baseState: BaseButtonState = toBaseState(state); diff --git a/packages/react-cap-theme/src/components/react-button/components/Button/useButton.ts b/packages/react-cap-theme/src/components/react-button/components/Button/useButton.ts index 6f284a16e..f998d4900 100644 --- a/packages/react-cap-theme/src/components/react-button/components/Button/useButton.ts +++ b/packages/react-cap-theme/src/components/react-button/components/Button/useButton.ts @@ -1,5 +1,8 @@ import { useButton_unstable as useBaseState } from '@fluentui/react-button'; -import type { ButtonProps, ButtonState } from './Button.types'; +import type { + ButtonProps, + ButtonState, +} from '../../../../customStyleHooks/react-button'; import { toBaseProps } from './Button.utils'; export const useButton = ( diff --git a/packages/react-cap-theme/src/components/react-button/components/MenuButton/MenuButton.tsx b/packages/react-cap-theme/src/components/react-button/components/MenuButton/MenuButton.tsx index 35c94ea90..2982a82c1 100644 --- a/packages/react-cap-theme/src/components/react-button/components/MenuButton/MenuButton.tsx +++ b/packages/react-cap-theme/src/components/react-button/components/MenuButton/MenuButton.tsx @@ -1,16 +1,17 @@ -import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts'; import type { ForwardRefComponent } from '@fluentui/react-utilities'; import * as React from 'react'; -import type { MenuButtonProps } from './MenuButton.types'; import { renderMenuButton } from './renderMenuButton'; import { useMenuButton } from './useMenuButton'; -import { useMenuButtonStyles } from './useMenuButtonStyles.styles'; +import { useMenuButtonStyles_unstable } from '@fluentui/react-components'; +import { useMenuButtonStyles as useCAPMenuButtonStyles } from '../../../../customStyleHooks/react-button'; +import type { MenuButtonProps } from '../../../../customStyleHooks/react-button'; +import { toBaseState } from '../../utils/toBaseState'; export const MenuButton: ForwardRefComponent = React.forwardRef((props, ref) => { const state = useMenuButton(props, ref); - useMenuButtonStyles(state); - useCustomStyleHook_unstable('useMenuButtonStyles_unstable')(state); + useMenuButtonStyles_unstable(toBaseState(state)); + useCAPMenuButtonStyles(state); return renderMenuButton(state); }) as ForwardRefComponent; diff --git a/packages/react-cap-theme/src/components/react-button/components/MenuButton/renderMenuButton.tsx b/packages/react-cap-theme/src/components/react-button/components/MenuButton/renderMenuButton.tsx index 2d6bb4f6e..bc54e1b28 100644 --- a/packages/react-cap-theme/src/components/react-button/components/MenuButton/renderMenuButton.tsx +++ b/packages/react-cap-theme/src/components/react-button/components/MenuButton/renderMenuButton.tsx @@ -1,7 +1,7 @@ import { renderMenuButton_unstable } from '@fluentui/react-button'; import type { JSXElement } from '@fluentui/react-utilities'; import { baseAppearanceMap } from '../Button/Button.utils'; -import type { MenuButtonState } from './MenuButton.types'; +import type { MenuButtonState } from '../../../../customStyleHooks/react-button'; export const renderMenuButton = (state: MenuButtonState): JSXElement => { return renderMenuButton_unstable({ diff --git a/packages/react-cap-theme/src/components/react-button/components/MenuButton/useMenuButton.tsx b/packages/react-cap-theme/src/components/react-button/components/MenuButton/useMenuButton.tsx index 5e39024cb..272347a79 100644 --- a/packages/react-cap-theme/src/components/react-button/components/MenuButton/useMenuButton.tsx +++ b/packages/react-cap-theme/src/components/react-button/components/MenuButton/useMenuButton.tsx @@ -7,7 +7,10 @@ import { import { slot } from '@fluentui/react-utilities'; import * as React from 'react'; import { baseAppearanceMap } from '../Button/Button.utils'; -import type { MenuButtonProps, MenuButtonState } from './MenuButton.types'; +import type { + MenuButtonProps, + MenuButtonState, +} from '../../../../customStyleHooks/react-button'; const ChevronDownIcon = bundleIcon(ChevronDownFilled, ChevronDownRegular); diff --git a/packages/react-cap-theme/src/components/react-button/components/SplitButton/SplitButton.tsx b/packages/react-cap-theme/src/components/react-button/components/SplitButton/SplitButton.tsx index e0532d085..e9f514ad9 100644 --- a/packages/react-cap-theme/src/components/react-button/components/SplitButton/SplitButton.tsx +++ b/packages/react-cap-theme/src/components/react-button/components/SplitButton/SplitButton.tsx @@ -1,17 +1,17 @@ -import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts'; import type { ForwardRefComponent } from '@fluentui/react-utilities'; import * as React from 'react'; import { renderSplitButton } from './renderSplitButton'; -import type { SplitButtonProps } from './SplitButton.types'; +import type { SplitButtonProps } from '../../../../customStyleHooks/react-button/components/SplitButton/SplitButton.types'; import { useSplitButton } from './useSplitButton'; -import { useSplitButtonStyles } from './useSplitButtonStyles.styles'; +import { useSplitButtonStyles as useCAPSplitButtonStyles } from '../../../../customStyleHooks/react-button/components/SplitButton/useSplitButtonStyles.styles'; +import { useSplitButtonStyles_unstable } from '@fluentui/react-components'; +import { toBaseState } from '../../utils/toBaseState'; export const SplitButton: ForwardRefComponent = React.forwardRef((props, ref) => { const state = useSplitButton(props, ref); - - useSplitButtonStyles(state); - useCustomStyleHook_unstable('useSplitButtonStyles_unstable')(state); + useSplitButtonStyles_unstable(toBaseState(state)); + useCAPSplitButtonStyles(state); return renderSplitButton(state); }); diff --git a/packages/react-cap-theme/src/components/react-button/components/SplitButton/renderSplitButton.tsx b/packages/react-cap-theme/src/components/react-button/components/SplitButton/renderSplitButton.tsx index 0decc6a3c..4de1e5cd9 100644 --- a/packages/react-cap-theme/src/components/react-button/components/SplitButton/renderSplitButton.tsx +++ b/packages/react-cap-theme/src/components/react-button/components/SplitButton/renderSplitButton.tsx @@ -2,7 +2,10 @@ /** @jsxRuntime classic */ import { assertSlots, type JSXElement } from '@fluentui/react-utilities'; -import type { SplitButtonSlots, SplitButtonState } from './SplitButton.types'; +import type { + SplitButtonSlots, + SplitButtonState, +} from '../../../../customStyleHooks/react-button'; export const renderSplitButton = (state: SplitButtonState): JSXElement => { assertSlots(state); diff --git a/packages/react-cap-theme/src/components/react-button/components/SplitButton/useSplitButton.ts b/packages/react-cap-theme/src/components/react-button/components/SplitButton/useSplitButton.ts index 18858a6be..54d24ed72 100644 --- a/packages/react-cap-theme/src/components/react-button/components/SplitButton/useSplitButton.ts +++ b/packages/react-cap-theme/src/components/react-button/components/SplitButton/useSplitButton.ts @@ -5,7 +5,10 @@ import { slot, } from '@fluentui/react-utilities'; import type * as React from 'react'; -import type { SplitButtonProps, SplitButtonState } from './SplitButton.types'; +import type { + SplitButtonProps, + SplitButtonState, +} from '../../../../customStyleHooks/react-button'; export const useSplitButton = ( props: SplitButtonProps, diff --git a/packages/react-cap-theme/src/components/react-button/components/ToggleButton/ToggleButton.tsx b/packages/react-cap-theme/src/components/react-button/components/ToggleButton/ToggleButton.tsx index 296c0d328..f3ac9864c 100644 --- a/packages/react-cap-theme/src/components/react-button/components/ToggleButton/ToggleButton.tsx +++ b/packages/react-cap-theme/src/components/react-button/components/ToggleButton/ToggleButton.tsx @@ -1,17 +1,18 @@ -import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts'; import type { ForwardRefComponent } from '@fluentui/react-utilities'; import * as React from 'react'; - import { renderToggleButton } from './renderToggleButton'; -import type { ToggleButtonProps } from './ToggleButton.types'; import { useToggleButton } from './useToggleButton'; -import { useToggleButtonStyles } from './useToggleButtonStyles.styles'; +import { useToggleButtonStyles_unstable } from '@fluentui/react-components'; +import { useToggleButtonStyles as useCAPToggleButton } from '../../../../customStyleHooks/react-button'; +import type { ToggleButtonProps } from '../../../../customStyleHooks/react-button'; +import { toBaseState } from '../../utils/toBaseState'; export const ToggleButton: ForwardRefComponent = React.forwardRef((props, ref) => { const state = useToggleButton(props, ref); - useToggleButtonStyles(state); - useCustomStyleHook_unstable('useToggleButtonStyles_unstable')(state); + + useToggleButtonStyles_unstable(toBaseState(state)); + useCAPToggleButton(state); return renderToggleButton(state); }) as ForwardRefComponent; diff --git a/packages/react-cap-theme/src/components/react-button/components/ToggleButton/renderToggleButton.tsx b/packages/react-cap-theme/src/components/react-button/components/ToggleButton/renderToggleButton.tsx index 03ba63216..2d7366271 100644 --- a/packages/react-cap-theme/src/components/react-button/components/ToggleButton/renderToggleButton.tsx +++ b/packages/react-cap-theme/src/components/react-button/components/ToggleButton/renderToggleButton.tsx @@ -1,6 +1,6 @@ import type { JSXElement } from '@fluentui/react-utilities'; -import { renderButton } from '../../Button'; -import type { ToggleButtonState } from './ToggleButton.types'; +import { renderButton } from '../Button/renderButton'; +import type { ToggleButtonState } from '../../../../customStyleHooks/react-button'; export const renderToggleButton = (state: ToggleButtonState): JSXElement => renderButton(state); diff --git a/packages/react-cap-theme/src/components/react-button/components/ToggleButton/useToggleButton.ts b/packages/react-cap-theme/src/components/react-button/components/ToggleButton/useToggleButton.ts index f82d5f089..9924e0d51 100644 --- a/packages/react-cap-theme/src/components/react-button/components/ToggleButton/useToggleButton.ts +++ b/packages/react-cap-theme/src/components/react-button/components/ToggleButton/useToggleButton.ts @@ -1,10 +1,10 @@ import { useToggleState } from '@fluentui/react-button'; -import { useButton } from '../../Button'; +import { useButton } from '../Button/useButton'; import type { ToggleButtonProps, ToggleButtonState, -} from './ToggleButton.types'; +} from '../../../../customStyleHooks/react-button'; export const useToggleButton = ( props: ToggleButtonProps, diff --git a/packages/react-cap-theme/src/components/react-button/index.ts b/packages/react-cap-theme/src/components/react-button/index.ts index c0def487b..727536ee1 100644 --- a/packages/react-cap-theme/src/components/react-button/index.ts +++ b/packages/react-cap-theme/src/components/react-button/index.ts @@ -1,4 +1,4 @@ -export { useButtonStyles } from './components/Button/useButtonStyles.styles'; -export { useMenuButtonStyles } from './components/MenuButton/useMenuButtonStyles.styles'; -export { useSplitButtonStyles } from './components/SplitButton/useSplitButtonStyles.styles'; -export { useToggleButtonStyles } from './components/ToggleButton/useToggleButtonStyles.styles'; +export { Button as CAPButton } from './components/Button/Button'; +export { MenuButton as CAPMenuButton } from './components/MenuButton/MenuButton'; +export { SplitButton as CAPSplitButton } from './components/SplitButton/SplitButton'; +export { ToggleButton as CAPToggleButton } from './components/ToggleButton/ToggleButton'; diff --git a/packages/react-cap-theme/src/components/react-button/utils/toBaseState.ts b/packages/react-cap-theme/src/components/react-button/utils/toBaseState.ts new file mode 100644 index 000000000..e0a28574f --- /dev/null +++ b/packages/react-cap-theme/src/components/react-button/utils/toBaseState.ts @@ -0,0 +1,27 @@ +import type { ButtonProps as BaseButtonProps } from '@fluentui/react-button'; +import type { ButtonAppearance } from '../../../customStyleHooks/react-button'; + +export const baseAppearanceMap: Record< + ButtonAppearance, + BaseButtonProps['appearance'] +> = { + secondary: 'secondary', + primary: 'primary', + outline: 'outline', + subtle: 'subtle', + transparent: 'transparent', + tint: 'primary', +}; + +/** + * Maps a CAP state's `appearance` to a base Fluent UI appearance. + * + * Shallow spread — slot objects (root, icon, etc.) remain shared references, + * so className mutations by base Fluent style hooks propagate to the original state. + */ +export const toBaseState = ( + state: S +): S & { appearance: BaseButtonProps['appearance'] } => ({ + ...state, + appearance: baseAppearanceMap[state.appearance] ?? 'secondary', +}); diff --git a/packages/react-cap-theme/src/components/react-checkbox/components/Checkbox/Checkbox.tsx b/packages/react-cap-theme/src/components/react-checkbox/components/Checkbox/Checkbox.tsx new file mode 100644 index 000000000..2d69bb8f1 --- /dev/null +++ b/packages/react-cap-theme/src/components/react-checkbox/components/Checkbox/Checkbox.tsx @@ -0,0 +1,27 @@ +import { renderCheckbox_unstable } from '@fluentui/react-checkbox'; +import type { ForwardRefComponent } from '@fluentui/react-utilities'; +import * as React from 'react'; +import { useCheckbox } from './useCheckbox'; +import { useCheckboxStyles_unstable } from '@fluentui/react-components'; +import { useCheckboxStyles as useCAPCheckboxStyles } from '../../../../customStyleHooks/react-checkbox'; +import type { CheckboxProps } from '../../../../customStyleHooks/react-checkbox'; +/** + * Experimental Checkbox component that provides enhanced styling and behavior for SharePoint. + * + * @param props - The checkbox configuration and event handlers + * @param ref - Reference to the checkbox input element + * @returns The rendered checkbox component + * @alpha + */ +export const Checkbox: ForwardRefComponent = React.forwardRef( + (props, ref) => { + const state = useCheckbox(props, ref); + + useCheckboxStyles_unstable(state); + useCAPCheckboxStyles(state); + + return renderCheckbox_unstable(state); + } +); + +Checkbox.displayName = 'Checkbox'; diff --git a/packages/react-cap-theme/src/components/react-checkbox/components/Checkbox/useCheckbox.tsx b/packages/react-cap-theme/src/components/react-checkbox/components/Checkbox/useCheckbox.tsx index 5f7c38a77..f3fb0339d 100644 --- a/packages/react-cap-theme/src/components/react-checkbox/components/Checkbox/useCheckbox.tsx +++ b/packages/react-cap-theme/src/components/react-checkbox/components/Checkbox/useCheckbox.tsx @@ -12,7 +12,10 @@ import { } from '@fluentui/react-icons'; import { slot } from '@fluentui/react-utilities'; import * as React from 'react'; -import type { CheckboxProps, CheckboxState } from './Checkbox.types'; +import type { + CheckboxProps, + CheckboxState, +} from '../../../../customStyleHooks/react-checkbox/components/Checkbox/Checkbox.types'; const CircleCheckmark = bundleIcon(CheckmarkCircleRegular, RadioButtonRegular); const SquareCheckmark = bundleIcon( diff --git a/packages/react-cap-theme/src/components/react-checkbox/index.ts b/packages/react-cap-theme/src/components/react-checkbox/index.ts index 4e0f50e8f..9224d90b0 100644 --- a/packages/react-cap-theme/src/components/react-checkbox/index.ts +++ b/packages/react-cap-theme/src/components/react-checkbox/index.ts @@ -1 +1 @@ -export { useCheckboxStyles } from './components/Checkbox/useCheckboxStyles.styles'; +export { Checkbox as CAPCheckbox } from './components/Checkbox/Checkbox'; diff --git a/packages/react-cap-theme/src/components/react-accordion/components/AccordionHeader/useAccordionHeaderStyles.styles.ts b/packages/react-cap-theme/src/customStyleHooks/react-accordion/components/AccordionHeader/useAccordionHeaderStyles.styles.ts similarity index 100% rename from packages/react-cap-theme/src/components/react-accordion/components/AccordionHeader/useAccordionHeaderStyles.styles.ts rename to packages/react-cap-theme/src/customStyleHooks/react-accordion/components/AccordionHeader/useAccordionHeaderStyles.styles.ts diff --git a/packages/react-cap-theme/src/components/react-accordion/components/AccordionPanel/useAccordionPanelStyles.styles.ts b/packages/react-cap-theme/src/customStyleHooks/react-accordion/components/AccordionPanel/useAccordionPanelStyles.styles.ts similarity index 100% rename from packages/react-cap-theme/src/components/react-accordion/components/AccordionPanel/useAccordionPanelStyles.styles.ts rename to packages/react-cap-theme/src/customStyleHooks/react-accordion/components/AccordionPanel/useAccordionPanelStyles.styles.ts diff --git a/packages/react-cap-theme/src/customStyleHooks/react-accordion/index.ts b/packages/react-cap-theme/src/customStyleHooks/react-accordion/index.ts new file mode 100644 index 000000000..292a7bf3c --- /dev/null +++ b/packages/react-cap-theme/src/customStyleHooks/react-accordion/index.ts @@ -0,0 +1,2 @@ +export { useAccordionHeaderStyles } from './components/AccordionHeader/useAccordionHeaderStyles.styles'; +export { useAccordionPanelStyles } from './components/AccordionPanel/useAccordionPanelStyles.styles'; diff --git a/packages/react-cap-theme/src/components/react-avatar/components/Avatar/useAvatarStyles.styles.ts b/packages/react-cap-theme/src/customStyleHooks/react-avatar/components/Avatar/useAvatarStyles.styles.ts similarity index 100% rename from packages/react-cap-theme/src/components/react-avatar/components/Avatar/useAvatarStyles.styles.ts rename to packages/react-cap-theme/src/customStyleHooks/react-avatar/components/Avatar/useAvatarStyles.styles.ts diff --git a/packages/react-cap-theme/src/components/react-avatar/components/AvatarGroupItem/useAvatarGroupItemStyles.styles.ts b/packages/react-cap-theme/src/customStyleHooks/react-avatar/components/AvatarGroupItem/useAvatarGroupItemStyles.styles.ts similarity index 100% rename from packages/react-cap-theme/src/components/react-avatar/components/AvatarGroupItem/useAvatarGroupItemStyles.styles.ts rename to packages/react-cap-theme/src/customStyleHooks/react-avatar/components/AvatarGroupItem/useAvatarGroupItemStyles.styles.ts diff --git a/packages/react-cap-theme/src/components/react-avatar/components/AvatarGroupPopover/useAvatarGroupPopoverStyles.styles.ts b/packages/react-cap-theme/src/customStyleHooks/react-avatar/components/AvatarGroupPopover/useAvatarGroupPopoverStyles.styles.ts similarity index 100% rename from packages/react-cap-theme/src/components/react-avatar/components/AvatarGroupPopover/useAvatarGroupPopoverStyles.styles.ts rename to packages/react-cap-theme/src/customStyleHooks/react-avatar/components/AvatarGroupPopover/useAvatarGroupPopoverStyles.styles.ts diff --git a/packages/react-cap-theme/src/components/react-avatar/index.ts b/packages/react-cap-theme/src/customStyleHooks/react-avatar/index.ts similarity index 100% rename from packages/react-cap-theme/src/components/react-avatar/index.ts rename to packages/react-cap-theme/src/customStyleHooks/react-avatar/index.ts diff --git a/packages/react-cap-theme/src/components/react-badge/components/Badge/useBadgeStyles.styles.ts b/packages/react-cap-theme/src/customStyleHooks/react-badge/components/Badge/useBadgeStyles.styles.ts similarity index 100% rename from packages/react-cap-theme/src/components/react-badge/components/Badge/useBadgeStyles.styles.ts rename to packages/react-cap-theme/src/customStyleHooks/react-badge/components/Badge/useBadgeStyles.styles.ts diff --git a/packages/react-cap-theme/src/components/react-badge/index.ts b/packages/react-cap-theme/src/customStyleHooks/react-badge/index.ts similarity index 100% rename from packages/react-cap-theme/src/components/react-badge/index.ts rename to packages/react-cap-theme/src/customStyleHooks/react-badge/index.ts diff --git a/packages/react-cap-theme/src/customStyleHooks/react-button/Button.ts b/packages/react-cap-theme/src/customStyleHooks/react-button/Button.ts new file mode 100644 index 000000000..82fbb80c4 --- /dev/null +++ b/packages/react-cap-theme/src/customStyleHooks/react-button/Button.ts @@ -0,0 +1,7 @@ +export { useButtonStyles } from './components/Button/useButtonStyles.styles'; +export type { + ButtonProps, + ButtonSlots, + ButtonState, + ButtonAppearance, +} from './components/Button/Button.types'; diff --git a/packages/react-cap-theme/src/customStyleHooks/react-button/MenuButton.ts b/packages/react-cap-theme/src/customStyleHooks/react-button/MenuButton.ts new file mode 100644 index 000000000..9c97077e9 --- /dev/null +++ b/packages/react-cap-theme/src/customStyleHooks/react-button/MenuButton.ts @@ -0,0 +1,6 @@ +export { useMenuButtonStyles } from './components/MenuButton/useMenuButtonStyles.styles'; +export type { + MenuButtonProps, + MenuButtonSlots, + MenuButtonState, +} from './components/MenuButton/MenuButton.types'; diff --git a/packages/react-cap-theme/src/customStyleHooks/react-button/SplitButton.ts b/packages/react-cap-theme/src/customStyleHooks/react-button/SplitButton.ts new file mode 100644 index 000000000..280fad8ad --- /dev/null +++ b/packages/react-cap-theme/src/customStyleHooks/react-button/SplitButton.ts @@ -0,0 +1,6 @@ +export { useSplitButtonStyles } from './components/SplitButton/useSplitButtonStyles.styles'; +export type { + SplitButtonProps, + SplitButtonSlots, + SplitButtonState, +} from './components/SplitButton/SplitButton.types'; diff --git a/packages/react-cap-theme/src/customStyleHooks/react-button/ToggleButton.ts b/packages/react-cap-theme/src/customStyleHooks/react-button/ToggleButton.ts new file mode 100644 index 000000000..fa1227705 --- /dev/null +++ b/packages/react-cap-theme/src/customStyleHooks/react-button/ToggleButton.ts @@ -0,0 +1,5 @@ +export { useToggleButtonStyles } from './components/ToggleButton/useToggleButtonStyles.styles'; +export type { + ToggleButtonProps, + ToggleButtonState, +} from './components/ToggleButton/ToggleButton.types'; diff --git a/packages/react-cap-theme/src/components/react-button/components/Button/Button.types.ts b/packages/react-cap-theme/src/customStyleHooks/react-button/components/Button/Button.types.ts similarity index 100% rename from packages/react-cap-theme/src/components/react-button/components/Button/Button.types.ts rename to packages/react-cap-theme/src/customStyleHooks/react-button/components/Button/Button.types.ts diff --git a/packages/react-cap-theme/src/components/react-button/components/Button/useButtonStyles.styles.ts b/packages/react-cap-theme/src/customStyleHooks/react-button/components/Button/useButtonStyles.styles.ts similarity index 100% rename from packages/react-cap-theme/src/components/react-button/components/Button/useButtonStyles.styles.ts rename to packages/react-cap-theme/src/customStyleHooks/react-button/components/Button/useButtonStyles.styles.ts diff --git a/packages/react-cap-theme/src/components/react-button/components/MenuButton/MenuButton.types.ts b/packages/react-cap-theme/src/customStyleHooks/react-button/components/MenuButton/MenuButton.types.ts similarity index 100% rename from packages/react-cap-theme/src/components/react-button/components/MenuButton/MenuButton.types.ts rename to packages/react-cap-theme/src/customStyleHooks/react-button/components/MenuButton/MenuButton.types.ts diff --git a/packages/react-cap-theme/src/components/react-button/components/MenuButton/useMenuButtonStyles.styles.ts b/packages/react-cap-theme/src/customStyleHooks/react-button/components/MenuButton/useMenuButtonStyles.styles.ts similarity index 100% rename from packages/react-cap-theme/src/components/react-button/components/MenuButton/useMenuButtonStyles.styles.ts rename to packages/react-cap-theme/src/customStyleHooks/react-button/components/MenuButton/useMenuButtonStyles.styles.ts diff --git a/packages/react-cap-theme/src/components/react-button/components/SplitButton/SplitButton.types.ts b/packages/react-cap-theme/src/customStyleHooks/react-button/components/SplitButton/SplitButton.types.ts similarity index 100% rename from packages/react-cap-theme/src/components/react-button/components/SplitButton/SplitButton.types.ts rename to packages/react-cap-theme/src/customStyleHooks/react-button/components/SplitButton/SplitButton.types.ts diff --git a/packages/react-cap-theme/src/components/react-button/components/SplitButton/useSplitButtonStyles.styles.ts b/packages/react-cap-theme/src/customStyleHooks/react-button/components/SplitButton/useSplitButtonStyles.styles.ts similarity index 100% rename from packages/react-cap-theme/src/components/react-button/components/SplitButton/useSplitButtonStyles.styles.ts rename to packages/react-cap-theme/src/customStyleHooks/react-button/components/SplitButton/useSplitButtonStyles.styles.ts diff --git a/packages/react-cap-theme/src/components/react-button/components/ToggleButton/ToggleButton.types.ts b/packages/react-cap-theme/src/customStyleHooks/react-button/components/ToggleButton/ToggleButton.types.ts similarity index 100% rename from packages/react-cap-theme/src/components/react-button/components/ToggleButton/ToggleButton.types.ts rename to packages/react-cap-theme/src/customStyleHooks/react-button/components/ToggleButton/ToggleButton.types.ts diff --git a/packages/react-cap-theme/src/components/react-button/components/ToggleButton/useToggleButtonStyles.styles.ts b/packages/react-cap-theme/src/customStyleHooks/react-button/components/ToggleButton/useToggleButtonStyles.styles.ts similarity index 97% rename from packages/react-cap-theme/src/components/react-button/components/ToggleButton/useToggleButtonStyles.styles.ts rename to packages/react-cap-theme/src/customStyleHooks/react-button/components/ToggleButton/useToggleButtonStyles.styles.ts index ef569b172..14edb0a0c 100644 --- a/packages/react-cap-theme/src/components/react-button/components/ToggleButton/useToggleButtonStyles.styles.ts +++ b/packages/react-cap-theme/src/customStyleHooks/react-button/components/ToggleButton/useToggleButtonStyles.styles.ts @@ -1,4 +1,7 @@ -import { toggleButtonClassNames } from '@fluentui/react-button'; +import { + buttonClassNames, + toggleButtonClassNames, +} from '@fluentui/react-button'; import { iconFilledClassName, iconRegularClassName, @@ -13,7 +16,7 @@ import { mergeClasses, shorthands, } from '@griffel/react'; -import { buttonClassNames, useButtonStyles } from '../../Button'; +import { useButtonStyles } from '../../Button'; import type { ToggleButtonState } from './ToggleButton.types'; const highContrastPrimaryStyles: GriffelStyle = { @@ -191,6 +194,8 @@ export const useToggleButtonStyles = ( const { appearance, checked, disabled, disabledFocusable } = state; const showAsDisabled = disabled || disabledFocusable; + useButtonStyles(state); + state.root.className = mergeClasses( state.root.className, toggleButtonClassNames.root, @@ -212,7 +217,5 @@ export const useToggleButtonStyles = ( ); } - useButtonStyles(state); - return state; }; diff --git a/packages/react-cap-theme/src/customStyleHooks/react-button/index.ts b/packages/react-cap-theme/src/customStyleHooks/react-button/index.ts new file mode 100644 index 000000000..b83e6a910 --- /dev/null +++ b/packages/react-cap-theme/src/customStyleHooks/react-button/index.ts @@ -0,0 +1,24 @@ +export { useButtonStyles } from './Button'; +export type { + ButtonProps, + ButtonSlots, + ButtonState, + ButtonAppearance, +} from './Button'; + +export { useMenuButtonStyles } from './MenuButton'; +export type { + MenuButtonProps, + MenuButtonSlots, + MenuButtonState, +} from './MenuButton'; + +export { useSplitButtonStyles } from './SplitButton'; +export type { + SplitButtonProps, + SplitButtonSlots, + SplitButtonState, +} from './SplitButton'; + +export { useToggleButtonStyles } from './ToggleButton'; +export type { ToggleButtonProps, ToggleButtonState } from './ToggleButton'; diff --git a/packages/react-cap-theme/src/components/react-carousel/components/Carousel/Carousel.types.ts b/packages/react-cap-theme/src/customStyleHooks/react-carousel/components/Carousel/Carousel.types.ts similarity index 100% rename from packages/react-cap-theme/src/components/react-carousel/components/Carousel/Carousel.types.ts rename to packages/react-cap-theme/src/customStyleHooks/react-carousel/components/Carousel/Carousel.types.ts diff --git a/packages/react-cap-theme/src/components/react-carousel/components/Carousel/CarouselContext.ts b/packages/react-cap-theme/src/customStyleHooks/react-carousel/components/Carousel/CarouselContext.ts similarity index 100% rename from packages/react-cap-theme/src/components/react-carousel/components/Carousel/CarouselContext.ts rename to packages/react-cap-theme/src/customStyleHooks/react-carousel/components/Carousel/CarouselContext.ts diff --git a/packages/react-cap-theme/src/components/react-carousel/components/Carousel/renderCarousel.tsx b/packages/react-cap-theme/src/customStyleHooks/react-carousel/components/Carousel/renderCarousel.tsx similarity index 100% rename from packages/react-cap-theme/src/components/react-carousel/components/Carousel/renderCarousel.tsx rename to packages/react-cap-theme/src/customStyleHooks/react-carousel/components/Carousel/renderCarousel.tsx diff --git a/packages/react-cap-theme/src/components/react-carousel/components/Carousel/useCarousel.ts b/packages/react-cap-theme/src/customStyleHooks/react-carousel/components/Carousel/useCarousel.ts similarity index 100% rename from packages/react-cap-theme/src/components/react-carousel/components/Carousel/useCarousel.ts rename to packages/react-cap-theme/src/customStyleHooks/react-carousel/components/Carousel/useCarousel.ts diff --git a/packages/react-cap-theme/src/components/react-carousel/components/Carousel/useCarouselContextValues.ts b/packages/react-cap-theme/src/customStyleHooks/react-carousel/components/Carousel/useCarouselContextValues.ts similarity index 100% rename from packages/react-cap-theme/src/components/react-carousel/components/Carousel/useCarouselContextValues.ts rename to packages/react-cap-theme/src/customStyleHooks/react-carousel/components/Carousel/useCarouselContextValues.ts diff --git a/packages/react-cap-theme/src/components/react-carousel/components/Carousel/useCarouselStyles.styles.ts b/packages/react-cap-theme/src/customStyleHooks/react-carousel/components/Carousel/useCarouselStyles.styles.ts similarity index 100% rename from packages/react-cap-theme/src/components/react-carousel/components/Carousel/useCarouselStyles.styles.ts rename to packages/react-cap-theme/src/customStyleHooks/react-carousel/components/Carousel/useCarouselStyles.styles.ts diff --git a/packages/react-cap-theme/src/components/react-carousel/components/CarouselAutoplayButton/CarouselAutoplayButton.types.ts b/packages/react-cap-theme/src/customStyleHooks/react-carousel/components/CarouselAutoplayButton/CarouselAutoplayButton.types.ts similarity index 100% rename from packages/react-cap-theme/src/components/react-carousel/components/CarouselAutoplayButton/CarouselAutoplayButton.types.ts rename to packages/react-cap-theme/src/customStyleHooks/react-carousel/components/CarouselAutoplayButton/CarouselAutoplayButton.types.ts diff --git a/packages/react-cap-theme/src/components/react-carousel/components/CarouselAutoplayButton/renderCarouselAutoplayButton.tsx b/packages/react-cap-theme/src/customStyleHooks/react-carousel/components/CarouselAutoplayButton/renderCarouselAutoplayButton.tsx similarity index 100% rename from packages/react-cap-theme/src/components/react-carousel/components/CarouselAutoplayButton/renderCarouselAutoplayButton.tsx rename to packages/react-cap-theme/src/customStyleHooks/react-carousel/components/CarouselAutoplayButton/renderCarouselAutoplayButton.tsx diff --git a/packages/react-cap-theme/src/components/react-carousel/components/CarouselAutoplayButton/useCarouselAutoplayButton.ts b/packages/react-cap-theme/src/customStyleHooks/react-carousel/components/CarouselAutoplayButton/useCarouselAutoplayButton.ts similarity index 100% rename from packages/react-cap-theme/src/components/react-carousel/components/CarouselAutoplayButton/useCarouselAutoplayButton.ts rename to packages/react-cap-theme/src/customStyleHooks/react-carousel/components/CarouselAutoplayButton/useCarouselAutoplayButton.ts diff --git a/packages/react-cap-theme/src/components/react-carousel/components/CarouselAutoplayButton/useCarouselAutoplayButtonStyles.styles.ts b/packages/react-cap-theme/src/customStyleHooks/react-carousel/components/CarouselAutoplayButton/useCarouselAutoplayButtonStyles.styles.ts similarity index 100% rename from packages/react-cap-theme/src/components/react-carousel/components/CarouselAutoplayButton/useCarouselAutoplayButtonStyles.styles.ts rename to packages/react-cap-theme/src/customStyleHooks/react-carousel/components/CarouselAutoplayButton/useCarouselAutoplayButtonStyles.styles.ts diff --git a/packages/react-cap-theme/src/components/react-carousel/components/CarouselButton/CarouselButton.types.ts b/packages/react-cap-theme/src/customStyleHooks/react-carousel/components/CarouselButton/CarouselButton.types.ts similarity index 100% rename from packages/react-cap-theme/src/components/react-carousel/components/CarouselButton/CarouselButton.types.ts rename to packages/react-cap-theme/src/customStyleHooks/react-carousel/components/CarouselButton/CarouselButton.types.ts diff --git a/packages/react-cap-theme/src/components/react-carousel/components/CarouselButton/renderCarouselButton.tsx b/packages/react-cap-theme/src/customStyleHooks/react-carousel/components/CarouselButton/renderCarouselButton.tsx similarity index 100% rename from packages/react-cap-theme/src/components/react-carousel/components/CarouselButton/renderCarouselButton.tsx rename to packages/react-cap-theme/src/customStyleHooks/react-carousel/components/CarouselButton/renderCarouselButton.tsx diff --git a/packages/react-cap-theme/src/components/react-carousel/components/CarouselButton/useCarouselButton.ts b/packages/react-cap-theme/src/customStyleHooks/react-carousel/components/CarouselButton/useCarouselButton.ts similarity index 100% rename from packages/react-cap-theme/src/components/react-carousel/components/CarouselButton/useCarouselButton.ts rename to packages/react-cap-theme/src/customStyleHooks/react-carousel/components/CarouselButton/useCarouselButton.ts diff --git a/packages/react-cap-theme/src/components/react-carousel/components/CarouselButton/useCarouselButtonStyles.styles.ts b/packages/react-cap-theme/src/customStyleHooks/react-carousel/components/CarouselButton/useCarouselButtonStyles.styles.ts similarity index 100% rename from packages/react-cap-theme/src/components/react-carousel/components/CarouselButton/useCarouselButtonStyles.styles.ts rename to packages/react-cap-theme/src/customStyleHooks/react-carousel/components/CarouselButton/useCarouselButtonStyles.styles.ts diff --git a/packages/react-cap-theme/src/components/react-carousel/components/CarouselNav/CarouselNav.types.ts b/packages/react-cap-theme/src/customStyleHooks/react-carousel/components/CarouselNav/CarouselNav.types.ts similarity index 100% rename from packages/react-cap-theme/src/components/react-carousel/components/CarouselNav/CarouselNav.types.ts rename to packages/react-cap-theme/src/customStyleHooks/react-carousel/components/CarouselNav/CarouselNav.types.ts diff --git a/packages/react-cap-theme/src/components/react-carousel/components/CarouselNav/useCarouselNav.ts b/packages/react-cap-theme/src/customStyleHooks/react-carousel/components/CarouselNav/useCarouselNav.ts similarity index 100% rename from packages/react-cap-theme/src/components/react-carousel/components/CarouselNav/useCarouselNav.ts rename to packages/react-cap-theme/src/customStyleHooks/react-carousel/components/CarouselNav/useCarouselNav.ts diff --git a/packages/react-cap-theme/src/components/react-carousel/components/CarouselNav/useCarouselNavContextValues.ts b/packages/react-cap-theme/src/customStyleHooks/react-carousel/components/CarouselNav/useCarouselNavContextValues.ts similarity index 100% rename from packages/react-cap-theme/src/components/react-carousel/components/CarouselNav/useCarouselNavContextValues.ts rename to packages/react-cap-theme/src/customStyleHooks/react-carousel/components/CarouselNav/useCarouselNavContextValues.ts diff --git a/packages/react-cap-theme/src/components/react-carousel/components/CarouselNav/useCarouselNavStyles.styles.ts b/packages/react-cap-theme/src/customStyleHooks/react-carousel/components/CarouselNav/useCarouselNavStyles.styles.ts similarity index 100% rename from packages/react-cap-theme/src/components/react-carousel/components/CarouselNav/useCarouselNavStyles.styles.ts rename to packages/react-cap-theme/src/customStyleHooks/react-carousel/components/CarouselNav/useCarouselNavStyles.styles.ts diff --git a/packages/react-cap-theme/src/components/react-carousel/components/CarouselNavButton/useCarouselNavButtonStyles.styles.ts b/packages/react-cap-theme/src/customStyleHooks/react-carousel/components/CarouselNavButton/useCarouselNavButtonStyles.styles.ts similarity index 100% rename from packages/react-cap-theme/src/components/react-carousel/components/CarouselNavButton/useCarouselNavButtonStyles.styles.ts rename to packages/react-cap-theme/src/customStyleHooks/react-carousel/components/CarouselNavButton/useCarouselNavButtonStyles.styles.ts diff --git a/packages/react-cap-theme/src/components/react-carousel/components/CarouselNavContainer/CarouselNavContainer.types.ts b/packages/react-cap-theme/src/customStyleHooks/react-carousel/components/CarouselNavContainer/CarouselNavContainer.types.ts similarity index 100% rename from packages/react-cap-theme/src/components/react-carousel/components/CarouselNavContainer/CarouselNavContainer.types.ts rename to packages/react-cap-theme/src/customStyleHooks/react-carousel/components/CarouselNavContainer/CarouselNavContainer.types.ts diff --git a/packages/react-cap-theme/src/components/react-carousel/components/CarouselNavContainer/renderCarouselNavContainer.tsx b/packages/react-cap-theme/src/customStyleHooks/react-carousel/components/CarouselNavContainer/renderCarouselNavContainer.tsx similarity index 100% rename from packages/react-cap-theme/src/components/react-carousel/components/CarouselNavContainer/renderCarouselNavContainer.tsx rename to packages/react-cap-theme/src/customStyleHooks/react-carousel/components/CarouselNavContainer/renderCarouselNavContainer.tsx diff --git a/packages/react-cap-theme/src/components/react-carousel/components/CarouselNavContainer/useCarouselNavContainer.ts b/packages/react-cap-theme/src/customStyleHooks/react-carousel/components/CarouselNavContainer/useCarouselNavContainer.ts similarity index 100% rename from packages/react-cap-theme/src/components/react-carousel/components/CarouselNavContainer/useCarouselNavContainer.ts rename to packages/react-cap-theme/src/customStyleHooks/react-carousel/components/CarouselNavContainer/useCarouselNavContainer.ts diff --git a/packages/react-cap-theme/src/components/react-carousel/components/CarouselNavContainer/useCarouselNavContainerStyles.styles.ts b/packages/react-cap-theme/src/customStyleHooks/react-carousel/components/CarouselNavContainer/useCarouselNavContainerStyles.styles.ts similarity index 100% rename from packages/react-cap-theme/src/components/react-carousel/components/CarouselNavContainer/useCarouselNavContainerStyles.styles.ts rename to packages/react-cap-theme/src/customStyleHooks/react-carousel/components/CarouselNavContainer/useCarouselNavContainerStyles.styles.ts diff --git a/packages/react-cap-theme/src/components/react-carousel/components/CarouselNavImageButton/useCarouselNavImageButtonStyles.styles.ts b/packages/react-cap-theme/src/customStyleHooks/react-carousel/components/CarouselNavImageButton/useCarouselNavImageButtonStyles.styles.ts similarity index 100% rename from packages/react-cap-theme/src/components/react-carousel/components/CarouselNavImageButton/useCarouselNavImageButtonStyles.styles.ts rename to packages/react-cap-theme/src/customStyleHooks/react-carousel/components/CarouselNavImageButton/useCarouselNavImageButtonStyles.styles.ts diff --git a/packages/react-cap-theme/src/components/react-carousel/index.ts b/packages/react-cap-theme/src/customStyleHooks/react-carousel/index.ts similarity index 100% rename from packages/react-cap-theme/src/components/react-carousel/index.ts rename to packages/react-cap-theme/src/customStyleHooks/react-carousel/index.ts diff --git a/packages/react-cap-theme/src/components/react-checkbox/components/Checkbox/Checkbox.types.ts b/packages/react-cap-theme/src/customStyleHooks/react-checkbox/components/Checkbox/Checkbox.types.ts similarity index 100% rename from packages/react-cap-theme/src/components/react-checkbox/components/Checkbox/Checkbox.types.ts rename to packages/react-cap-theme/src/customStyleHooks/react-checkbox/components/Checkbox/Checkbox.types.ts diff --git a/packages/react-cap-theme/src/components/react-checkbox/components/Checkbox/useCheckboxStyles.styles.ts b/packages/react-cap-theme/src/customStyleHooks/react-checkbox/components/Checkbox/useCheckboxStyles.styles.ts similarity index 94% rename from packages/react-cap-theme/src/components/react-checkbox/components/Checkbox/useCheckboxStyles.styles.ts rename to packages/react-cap-theme/src/customStyleHooks/react-checkbox/components/Checkbox/useCheckboxStyles.styles.ts index d5719b9b8..fbd731178 100644 --- a/packages/react-cap-theme/src/components/react-checkbox/components/Checkbox/useCheckboxStyles.styles.ts +++ b/packages/react-cap-theme/src/customStyleHooks/react-checkbox/components/Checkbox/useCheckboxStyles.styles.ts @@ -1,7 +1,4 @@ -import { - checkboxClassNames, - useCheckboxStyles_unstable, -} from '@fluentui/react-checkbox'; +import { checkboxClassNames } from '@fluentui/react-checkbox'; import { iconFilledClassName, iconRegularClassName, @@ -130,7 +127,7 @@ export const useCheckboxStyles = (state: CheckboxState): CheckboxState => { if (state.indicator) { state.indicator.className = mergeClasses( state.indicator.className, - baseOverrides.indicator, + !!color && baseOverrides.indicator, sizeStyles[size], !disabled && !checked && indicatorStyles.unchecked, !disabled && checked && indicatorStyles[`${color}Checked`], @@ -147,9 +144,5 @@ export const useCheckboxStyles = (state: CheckboxState): CheckboxState => { ); } - const { color: _, ...baseState } = state; - void _; - useCheckboxStyles_unstable(baseState); - return state; }; diff --git a/packages/react-cap-theme/src/customStyleHooks/react-checkbox/index.ts b/packages/react-cap-theme/src/customStyleHooks/react-checkbox/index.ts new file mode 100644 index 000000000..df7cf67df --- /dev/null +++ b/packages/react-cap-theme/src/customStyleHooks/react-checkbox/index.ts @@ -0,0 +1,6 @@ +export { useCheckboxStyles } from './components/Checkbox/useCheckboxStyles.styles'; +export type { + CheckboxProps, + CheckboxSlots, + CheckboxState, +} from './components/Checkbox/Checkbox.types'; diff --git a/packages/react-cap-theme/src/components/react-dialog/components/DialogActions/useDialogActionsStyles.styles.ts b/packages/react-cap-theme/src/customStyleHooks/react-dialog/components/DialogActions/useDialogActionsStyles.styles.ts similarity index 100% rename from packages/react-cap-theme/src/components/react-dialog/components/DialogActions/useDialogActionsStyles.styles.ts rename to packages/react-cap-theme/src/customStyleHooks/react-dialog/components/DialogActions/useDialogActionsStyles.styles.ts diff --git a/packages/react-cap-theme/src/components/react-dialog/components/DialogBody/useDialogBodyStyles.styles.ts b/packages/react-cap-theme/src/customStyleHooks/react-dialog/components/DialogBody/useDialogBodyStyles.styles.ts similarity index 100% rename from packages/react-cap-theme/src/components/react-dialog/components/DialogBody/useDialogBodyStyles.styles.ts rename to packages/react-cap-theme/src/customStyleHooks/react-dialog/components/DialogBody/useDialogBodyStyles.styles.ts diff --git a/packages/react-cap-theme/src/components/react-dialog/components/DialogSurface/useDialogSurfaceStyles.styles.ts b/packages/react-cap-theme/src/customStyleHooks/react-dialog/components/DialogSurface/useDialogSurfaceStyles.styles.ts similarity index 100% rename from packages/react-cap-theme/src/components/react-dialog/components/DialogSurface/useDialogSurfaceStyles.styles.ts rename to packages/react-cap-theme/src/customStyleHooks/react-dialog/components/DialogSurface/useDialogSurfaceStyles.styles.ts diff --git a/packages/react-cap-theme/src/components/react-dialog/components/DialogTitle/DialogTitle.types.ts b/packages/react-cap-theme/src/customStyleHooks/react-dialog/components/DialogTitle/DialogTitle.types.ts similarity index 100% rename from packages/react-cap-theme/src/components/react-dialog/components/DialogTitle/DialogTitle.types.ts rename to packages/react-cap-theme/src/customStyleHooks/react-dialog/components/DialogTitle/DialogTitle.types.ts diff --git a/packages/react-cap-theme/src/components/react-dialog/components/DialogTitle/useDialogTitle.tsx b/packages/react-cap-theme/src/customStyleHooks/react-dialog/components/DialogTitle/useDialogTitle.tsx similarity index 100% rename from packages/react-cap-theme/src/components/react-dialog/components/DialogTitle/useDialogTitle.tsx rename to packages/react-cap-theme/src/customStyleHooks/react-dialog/components/DialogTitle/useDialogTitle.tsx diff --git a/packages/react-cap-theme/src/components/react-dialog/components/DialogTitle/useDialogTitleStyles.styles.ts b/packages/react-cap-theme/src/customStyleHooks/react-dialog/components/DialogTitle/useDialogTitleStyles.styles.ts similarity index 100% rename from packages/react-cap-theme/src/components/react-dialog/components/DialogTitle/useDialogTitleStyles.styles.ts rename to packages/react-cap-theme/src/customStyleHooks/react-dialog/components/DialogTitle/useDialogTitleStyles.styles.ts diff --git a/packages/react-cap-theme/src/components/react-dialog/constants/queries.ts b/packages/react-cap-theme/src/customStyleHooks/react-dialog/constants/queries.ts similarity index 100% rename from packages/react-cap-theme/src/components/react-dialog/constants/queries.ts rename to packages/react-cap-theme/src/customStyleHooks/react-dialog/constants/queries.ts diff --git a/packages/react-cap-theme/src/components/react-dialog/index.ts b/packages/react-cap-theme/src/customStyleHooks/react-dialog/index.ts similarity index 100% rename from packages/react-cap-theme/src/components/react-dialog/index.ts rename to packages/react-cap-theme/src/customStyleHooks/react-dialog/index.ts diff --git a/packages/react-cap-theme/src/components/react-drawer/components/Drawer/Drawer.types.ts b/packages/react-cap-theme/src/customStyleHooks/react-drawer/components/Drawer/Drawer.types.ts similarity index 100% rename from packages/react-cap-theme/src/components/react-drawer/components/Drawer/Drawer.types.ts rename to packages/react-cap-theme/src/customStyleHooks/react-drawer/components/Drawer/Drawer.types.ts diff --git a/packages/react-cap-theme/src/components/react-drawer/components/Drawer/useDrawer.ts b/packages/react-cap-theme/src/customStyleHooks/react-drawer/components/Drawer/useDrawer.ts similarity index 100% rename from packages/react-cap-theme/src/components/react-drawer/components/Drawer/useDrawer.ts rename to packages/react-cap-theme/src/customStyleHooks/react-drawer/components/Drawer/useDrawer.ts diff --git a/packages/react-cap-theme/src/components/react-drawer/components/DrawerBody/useDrawerBodyStyles.styles.ts b/packages/react-cap-theme/src/customStyleHooks/react-drawer/components/DrawerBody/useDrawerBodyStyles.styles.ts similarity index 100% rename from packages/react-cap-theme/src/components/react-drawer/components/DrawerBody/useDrawerBodyStyles.styles.ts rename to packages/react-cap-theme/src/customStyleHooks/react-drawer/components/DrawerBody/useDrawerBodyStyles.styles.ts diff --git a/packages/react-cap-theme/src/components/react-drawer/components/DrawerFooter/useDrawerFooterStyles.styles.ts b/packages/react-cap-theme/src/customStyleHooks/react-drawer/components/DrawerFooter/useDrawerFooterStyles.styles.ts similarity index 100% rename from packages/react-cap-theme/src/components/react-drawer/components/DrawerFooter/useDrawerFooterStyles.styles.ts rename to packages/react-cap-theme/src/customStyleHooks/react-drawer/components/DrawerFooter/useDrawerFooterStyles.styles.ts diff --git a/packages/react-cap-theme/src/components/react-drawer/components/DrawerHeader/useDrawerHeaderStyles.styles.ts b/packages/react-cap-theme/src/customStyleHooks/react-drawer/components/DrawerHeader/useDrawerHeaderStyles.styles.ts similarity index 100% rename from packages/react-cap-theme/src/components/react-drawer/components/DrawerHeader/useDrawerHeaderStyles.styles.ts rename to packages/react-cap-theme/src/customStyleHooks/react-drawer/components/DrawerHeader/useDrawerHeaderStyles.styles.ts diff --git a/packages/react-cap-theme/src/components/react-drawer/components/DrawerHeaderNavigation/useDrawerHeaderNavigationStyles.styles.ts b/packages/react-cap-theme/src/customStyleHooks/react-drawer/components/DrawerHeaderNavigation/useDrawerHeaderNavigationStyles.styles.ts similarity index 100% rename from packages/react-cap-theme/src/components/react-drawer/components/DrawerHeaderNavigation/useDrawerHeaderNavigationStyles.styles.ts rename to packages/react-cap-theme/src/customStyleHooks/react-drawer/components/DrawerHeaderNavigation/useDrawerHeaderNavigationStyles.styles.ts diff --git a/packages/react-cap-theme/src/components/react-drawer/components/DrawerHeaderTitle/useDrawerHeaderTitleStyles.styles.ts b/packages/react-cap-theme/src/customStyleHooks/react-drawer/components/DrawerHeaderTitle/useDrawerHeaderTitleStyles.styles.ts similarity index 100% rename from packages/react-cap-theme/src/components/react-drawer/components/DrawerHeaderTitle/useDrawerHeaderTitleStyles.styles.ts rename to packages/react-cap-theme/src/customStyleHooks/react-drawer/components/DrawerHeaderTitle/useDrawerHeaderTitleStyles.styles.ts diff --git a/packages/react-cap-theme/src/components/react-drawer/components/InlineDrawer/InlineDrawer.types.ts b/packages/react-cap-theme/src/customStyleHooks/react-drawer/components/InlineDrawer/InlineDrawer.types.ts similarity index 100% rename from packages/react-cap-theme/src/components/react-drawer/components/InlineDrawer/InlineDrawer.types.ts rename to packages/react-cap-theme/src/customStyleHooks/react-drawer/components/InlineDrawer/InlineDrawer.types.ts diff --git a/packages/react-cap-theme/src/components/react-drawer/components/InlineDrawer/useInlineDrawer.ts b/packages/react-cap-theme/src/customStyleHooks/react-drawer/components/InlineDrawer/useInlineDrawer.ts similarity index 100% rename from packages/react-cap-theme/src/components/react-drawer/components/InlineDrawer/useInlineDrawer.ts rename to packages/react-cap-theme/src/customStyleHooks/react-drawer/components/InlineDrawer/useInlineDrawer.ts diff --git a/packages/react-cap-theme/src/components/react-drawer/components/InlineDrawer/useInlineDrawerStyles.styles.ts b/packages/react-cap-theme/src/customStyleHooks/react-drawer/components/InlineDrawer/useInlineDrawerStyles.styles.ts similarity index 100% rename from packages/react-cap-theme/src/components/react-drawer/components/InlineDrawer/useInlineDrawerStyles.styles.ts rename to packages/react-cap-theme/src/customStyleHooks/react-drawer/components/InlineDrawer/useInlineDrawerStyles.styles.ts diff --git a/packages/react-cap-theme/src/components/react-drawer/components/OverlayDrawer/useOverlayDrawerStyles.styles.ts b/packages/react-cap-theme/src/customStyleHooks/react-drawer/components/OverlayDrawer/useOverlayDrawerStyles.styles.ts similarity index 100% rename from packages/react-cap-theme/src/components/react-drawer/components/OverlayDrawer/useOverlayDrawerStyles.styles.ts rename to packages/react-cap-theme/src/customStyleHooks/react-drawer/components/OverlayDrawer/useOverlayDrawerStyles.styles.ts diff --git a/packages/react-cap-theme/src/components/react-drawer/index.ts b/packages/react-cap-theme/src/customStyleHooks/react-drawer/index.ts similarity index 100% rename from packages/react-cap-theme/src/components/react-drawer/index.ts rename to packages/react-cap-theme/src/customStyleHooks/react-drawer/index.ts diff --git a/packages/react-cap-theme/src/components/react-drawer/shared/useDrawerBaseStyles.styles.ts b/packages/react-cap-theme/src/customStyleHooks/react-drawer/shared/useDrawerBaseStyles.styles.ts similarity index 100% rename from packages/react-cap-theme/src/components/react-drawer/shared/useDrawerBaseStyles.styles.ts rename to packages/react-cap-theme/src/customStyleHooks/react-drawer/shared/useDrawerBaseStyles.styles.ts diff --git a/packages/react-cap-theme/src/components/react-icons/index.ts b/packages/react-cap-theme/src/customStyleHooks/react-icons/index.ts similarity index 100% rename from packages/react-cap-theme/src/components/react-icons/index.ts rename to packages/react-cap-theme/src/customStyleHooks/react-icons/index.ts diff --git a/packages/react-cap-theme/src/components/react-image/components/Image/useImageStyles.styles.ts b/packages/react-cap-theme/src/customStyleHooks/react-image/components/Image/useImageStyles.styles.ts similarity index 100% rename from packages/react-cap-theme/src/components/react-image/components/Image/useImageStyles.styles.ts rename to packages/react-cap-theme/src/customStyleHooks/react-image/components/Image/useImageStyles.styles.ts diff --git a/packages/react-cap-theme/src/components/react-image/index.ts b/packages/react-cap-theme/src/customStyleHooks/react-image/index.ts similarity index 100% rename from packages/react-cap-theme/src/components/react-image/index.ts rename to packages/react-cap-theme/src/customStyleHooks/react-image/index.ts diff --git a/packages/react-cap-theme/src/components/react-label/components/Label/Label.types.ts b/packages/react-cap-theme/src/customStyleHooks/react-label/components/Label/Label.types.ts similarity index 100% rename from packages/react-cap-theme/src/components/react-label/components/Label/Label.types.ts rename to packages/react-cap-theme/src/customStyleHooks/react-label/components/Label/Label.types.ts diff --git a/packages/react-cap-theme/src/components/react-label/components/Label/useLabelStyles.styles.ts b/packages/react-cap-theme/src/customStyleHooks/react-label/components/Label/useLabelStyles.styles.ts similarity index 100% rename from packages/react-cap-theme/src/components/react-label/components/Label/useLabelStyles.styles.ts rename to packages/react-cap-theme/src/customStyleHooks/react-label/components/Label/useLabelStyles.styles.ts diff --git a/packages/react-cap-theme/src/components/react-label/index.ts b/packages/react-cap-theme/src/customStyleHooks/react-label/index.ts similarity index 100% rename from packages/react-cap-theme/src/components/react-label/index.ts rename to packages/react-cap-theme/src/customStyleHooks/react-label/index.ts diff --git a/packages/react-cap-theme/src/components/react-link/components/Link/Link.types.ts b/packages/react-cap-theme/src/customStyleHooks/react-link/components/Link/Link.types.ts similarity index 100% rename from packages/react-cap-theme/src/components/react-link/components/Link/Link.types.ts rename to packages/react-cap-theme/src/customStyleHooks/react-link/components/Link/Link.types.ts diff --git a/packages/react-cap-theme/src/components/react-link/components/Link/Link.utils.ts b/packages/react-cap-theme/src/customStyleHooks/react-link/components/Link/Link.utils.ts similarity index 100% rename from packages/react-cap-theme/src/components/react-link/components/Link/Link.utils.ts rename to packages/react-cap-theme/src/customStyleHooks/react-link/components/Link/Link.utils.ts diff --git a/packages/react-cap-theme/src/components/react-link/components/Link/useLink.ts b/packages/react-cap-theme/src/customStyleHooks/react-link/components/Link/useLink.ts similarity index 100% rename from packages/react-cap-theme/src/components/react-link/components/Link/useLink.ts rename to packages/react-cap-theme/src/customStyleHooks/react-link/components/Link/useLink.ts diff --git a/packages/react-cap-theme/src/components/react-link/components/Link/useLinkStyles.styles.ts b/packages/react-cap-theme/src/customStyleHooks/react-link/components/Link/useLinkStyles.styles.ts similarity index 100% rename from packages/react-cap-theme/src/components/react-link/components/Link/useLinkStyles.styles.ts rename to packages/react-cap-theme/src/customStyleHooks/react-link/components/Link/useLinkStyles.styles.ts diff --git a/packages/react-cap-theme/src/components/react-link/index.ts b/packages/react-cap-theme/src/customStyleHooks/react-link/index.ts similarity index 100% rename from packages/react-cap-theme/src/components/react-link/index.ts rename to packages/react-cap-theme/src/customStyleHooks/react-link/index.ts diff --git a/packages/react-cap-theme/src/components/react-menu/Menu.ts b/packages/react-cap-theme/src/customStyleHooks/react-menu/Menu.ts similarity index 100% rename from packages/react-cap-theme/src/components/react-menu/Menu.ts rename to packages/react-cap-theme/src/customStyleHooks/react-menu/Menu.ts diff --git a/packages/react-cap-theme/src/components/react-menu/MenuDivider.ts b/packages/react-cap-theme/src/customStyleHooks/react-menu/MenuDivider.ts similarity index 100% rename from packages/react-cap-theme/src/components/react-menu/MenuDivider.ts rename to packages/react-cap-theme/src/customStyleHooks/react-menu/MenuDivider.ts diff --git a/packages/react-cap-theme/src/components/react-menu/MenuGroup.ts b/packages/react-cap-theme/src/customStyleHooks/react-menu/MenuGroup.ts similarity index 100% rename from packages/react-cap-theme/src/components/react-menu/MenuGroup.ts rename to packages/react-cap-theme/src/customStyleHooks/react-menu/MenuGroup.ts diff --git a/packages/react-cap-theme/src/components/react-menu/MenuGroupHeader.ts b/packages/react-cap-theme/src/customStyleHooks/react-menu/MenuGroupHeader.ts similarity index 100% rename from packages/react-cap-theme/src/components/react-menu/MenuGroupHeader.ts rename to packages/react-cap-theme/src/customStyleHooks/react-menu/MenuGroupHeader.ts diff --git a/packages/react-cap-theme/src/components/react-menu/MenuItem.ts b/packages/react-cap-theme/src/customStyleHooks/react-menu/MenuItem.ts similarity index 100% rename from packages/react-cap-theme/src/components/react-menu/MenuItem.ts rename to packages/react-cap-theme/src/customStyleHooks/react-menu/MenuItem.ts diff --git a/packages/react-cap-theme/src/components/react-menu/MenuItemCheckbox.ts b/packages/react-cap-theme/src/customStyleHooks/react-menu/MenuItemCheckbox.ts similarity index 100% rename from packages/react-cap-theme/src/components/react-menu/MenuItemCheckbox.ts rename to packages/react-cap-theme/src/customStyleHooks/react-menu/MenuItemCheckbox.ts diff --git a/packages/react-cap-theme/src/components/react-menu/MenuItemLink.ts b/packages/react-cap-theme/src/customStyleHooks/react-menu/MenuItemLink.ts similarity index 100% rename from packages/react-cap-theme/src/components/react-menu/MenuItemLink.ts rename to packages/react-cap-theme/src/customStyleHooks/react-menu/MenuItemLink.ts diff --git a/packages/react-cap-theme/src/components/react-menu/MenuItemRadio.ts b/packages/react-cap-theme/src/customStyleHooks/react-menu/MenuItemRadio.ts similarity index 100% rename from packages/react-cap-theme/src/components/react-menu/MenuItemRadio.ts rename to packages/react-cap-theme/src/customStyleHooks/react-menu/MenuItemRadio.ts diff --git a/packages/react-cap-theme/src/components/react-menu/MenuItemSwatchPicker.ts b/packages/react-cap-theme/src/customStyleHooks/react-menu/MenuItemSwatchPicker.ts similarity index 100% rename from packages/react-cap-theme/src/components/react-menu/MenuItemSwatchPicker.ts rename to packages/react-cap-theme/src/customStyleHooks/react-menu/MenuItemSwatchPicker.ts diff --git a/packages/react-cap-theme/src/components/react-menu/MenuItemSwitch.ts b/packages/react-cap-theme/src/customStyleHooks/react-menu/MenuItemSwitch.ts similarity index 100% rename from packages/react-cap-theme/src/components/react-menu/MenuItemSwitch.ts rename to packages/react-cap-theme/src/customStyleHooks/react-menu/MenuItemSwitch.ts diff --git a/packages/react-cap-theme/src/components/react-menu/MenuList.ts b/packages/react-cap-theme/src/customStyleHooks/react-menu/MenuList.ts similarity index 100% rename from packages/react-cap-theme/src/components/react-menu/MenuList.ts rename to packages/react-cap-theme/src/customStyleHooks/react-menu/MenuList.ts diff --git a/packages/react-cap-theme/src/components/react-menu/MenuPopover.ts b/packages/react-cap-theme/src/customStyleHooks/react-menu/MenuPopover.ts similarity index 100% rename from packages/react-cap-theme/src/components/react-menu/MenuPopover.ts rename to packages/react-cap-theme/src/customStyleHooks/react-menu/MenuPopover.ts diff --git a/packages/react-cap-theme/src/components/react-menu/MenuSplitGroup.ts b/packages/react-cap-theme/src/customStyleHooks/react-menu/MenuSplitGroup.ts similarity index 100% rename from packages/react-cap-theme/src/components/react-menu/MenuSplitGroup.ts rename to packages/react-cap-theme/src/customStyleHooks/react-menu/MenuSplitGroup.ts diff --git a/packages/react-cap-theme/src/components/react-menu/MenuTrigger.ts b/packages/react-cap-theme/src/customStyleHooks/react-menu/MenuTrigger.ts similarity index 100% rename from packages/react-cap-theme/src/components/react-menu/MenuTrigger.ts rename to packages/react-cap-theme/src/customStyleHooks/react-menu/MenuTrigger.ts diff --git a/packages/react-cap-theme/src/components/react-menu/components/MenuDivider/useMenuDividerStyles.styles.ts b/packages/react-cap-theme/src/customStyleHooks/react-menu/components/MenuDivider/useMenuDividerStyles.styles.ts similarity index 100% rename from packages/react-cap-theme/src/components/react-menu/components/MenuDivider/useMenuDividerStyles.styles.ts rename to packages/react-cap-theme/src/customStyleHooks/react-menu/components/MenuDivider/useMenuDividerStyles.styles.ts diff --git a/packages/react-cap-theme/src/components/react-menu/components/MenuGroupHeader/useMenuGroupHeaderStyles.styles.ts b/packages/react-cap-theme/src/customStyleHooks/react-menu/components/MenuGroupHeader/useMenuGroupHeaderStyles.styles.ts similarity index 100% rename from packages/react-cap-theme/src/components/react-menu/components/MenuGroupHeader/useMenuGroupHeaderStyles.styles.ts rename to packages/react-cap-theme/src/customStyleHooks/react-menu/components/MenuGroupHeader/useMenuGroupHeaderStyles.styles.ts diff --git a/packages/react-cap-theme/src/components/react-menu/components/MenuItem/useMenuItemStyles.styles.ts b/packages/react-cap-theme/src/customStyleHooks/react-menu/components/MenuItem/useMenuItemStyles.styles.ts similarity index 100% rename from packages/react-cap-theme/src/components/react-menu/components/MenuItem/useMenuItemStyles.styles.ts rename to packages/react-cap-theme/src/customStyleHooks/react-menu/components/MenuItem/useMenuItemStyles.styles.ts diff --git a/packages/react-cap-theme/src/components/react-menu/components/MenuItemCheckbox/useMenuItemCheckboxStyles.styles.ts b/packages/react-cap-theme/src/customStyleHooks/react-menu/components/MenuItemCheckbox/useMenuItemCheckboxStyles.styles.ts similarity index 100% rename from packages/react-cap-theme/src/components/react-menu/components/MenuItemCheckbox/useMenuItemCheckboxStyles.styles.ts rename to packages/react-cap-theme/src/customStyleHooks/react-menu/components/MenuItemCheckbox/useMenuItemCheckboxStyles.styles.ts diff --git a/packages/react-cap-theme/src/components/react-menu/components/MenuItemRadio/useMenuItemRadio.tsx b/packages/react-cap-theme/src/customStyleHooks/react-menu/components/MenuItemRadio/useMenuItemRadio.tsx similarity index 100% rename from packages/react-cap-theme/src/components/react-menu/components/MenuItemRadio/useMenuItemRadio.tsx rename to packages/react-cap-theme/src/customStyleHooks/react-menu/components/MenuItemRadio/useMenuItemRadio.tsx diff --git a/packages/react-cap-theme/src/components/react-menu/components/MenuItemRadio/useMenuItemRadioStyles.styles.ts b/packages/react-cap-theme/src/customStyleHooks/react-menu/components/MenuItemRadio/useMenuItemRadioStyles.styles.ts similarity index 100% rename from packages/react-cap-theme/src/components/react-menu/components/MenuItemRadio/useMenuItemRadioStyles.styles.ts rename to packages/react-cap-theme/src/customStyleHooks/react-menu/components/MenuItemRadio/useMenuItemRadioStyles.styles.ts diff --git a/packages/react-cap-theme/src/components/react-menu/components/MenuItemSwatchPicker/MenuItemSwatchPicker.tsx b/packages/react-cap-theme/src/customStyleHooks/react-menu/components/MenuItemSwatchPicker/MenuItemSwatchPicker.tsx similarity index 100% rename from packages/react-cap-theme/src/components/react-menu/components/MenuItemSwatchPicker/MenuItemSwatchPicker.tsx rename to packages/react-cap-theme/src/customStyleHooks/react-menu/components/MenuItemSwatchPicker/MenuItemSwatchPicker.tsx diff --git a/packages/react-cap-theme/src/components/react-menu/components/MenuItemSwatchPicker/MenuItemSwatchPicker.types.ts b/packages/react-cap-theme/src/customStyleHooks/react-menu/components/MenuItemSwatchPicker/MenuItemSwatchPicker.types.ts similarity index 100% rename from packages/react-cap-theme/src/components/react-menu/components/MenuItemSwatchPicker/MenuItemSwatchPicker.types.ts rename to packages/react-cap-theme/src/customStyleHooks/react-menu/components/MenuItemSwatchPicker/MenuItemSwatchPicker.types.ts diff --git a/packages/react-cap-theme/src/components/react-menu/components/MenuItemSwatchPicker/useMenuItemSwatchPicker.tsx b/packages/react-cap-theme/src/customStyleHooks/react-menu/components/MenuItemSwatchPicker/useMenuItemSwatchPicker.tsx similarity index 100% rename from packages/react-cap-theme/src/components/react-menu/components/MenuItemSwatchPicker/useMenuItemSwatchPicker.tsx rename to packages/react-cap-theme/src/customStyleHooks/react-menu/components/MenuItemSwatchPicker/useMenuItemSwatchPicker.tsx diff --git a/packages/react-cap-theme/src/components/react-menu/components/MenuItemSwatchPicker/useMenuItemSwatchPickerStyles.styles.ts b/packages/react-cap-theme/src/customStyleHooks/react-menu/components/MenuItemSwatchPicker/useMenuItemSwatchPickerStyles.styles.ts similarity index 100% rename from packages/react-cap-theme/src/components/react-menu/components/MenuItemSwatchPicker/useMenuItemSwatchPickerStyles.styles.ts rename to packages/react-cap-theme/src/customStyleHooks/react-menu/components/MenuItemSwatchPicker/useMenuItemSwatchPickerStyles.styles.ts diff --git a/packages/react-cap-theme/src/components/react-menu/components/MenuPopover/useMenuPopoverStyles.styles.ts b/packages/react-cap-theme/src/customStyleHooks/react-menu/components/MenuPopover/useMenuPopoverStyles.styles.ts similarity index 100% rename from packages/react-cap-theme/src/components/react-menu/components/MenuPopover/useMenuPopoverStyles.styles.ts rename to packages/react-cap-theme/src/customStyleHooks/react-menu/components/MenuPopover/useMenuPopoverStyles.styles.ts diff --git a/packages/react-cap-theme/src/components/react-menu/components/MenuSplitGroup/useMenuSplitGroupStyles.styles.ts b/packages/react-cap-theme/src/customStyleHooks/react-menu/components/MenuSplitGroup/useMenuSplitGroupStyles.styles.ts similarity index 100% rename from packages/react-cap-theme/src/components/react-menu/components/MenuSplitGroup/useMenuSplitGroupStyles.styles.ts rename to packages/react-cap-theme/src/customStyleHooks/react-menu/components/MenuSplitGroup/useMenuSplitGroupStyles.styles.ts diff --git a/packages/react-cap-theme/src/components/react-menu/index.ts b/packages/react-cap-theme/src/customStyleHooks/react-menu/index.ts similarity index 100% rename from packages/react-cap-theme/src/components/react-menu/index.ts rename to packages/react-cap-theme/src/customStyleHooks/react-menu/index.ts diff --git a/packages/react-cap-theme/src/components/react-popover/components/PopoverSurface/usePopoverSurfaceStyles.styles.ts b/packages/react-cap-theme/src/customStyleHooks/react-popover/components/PopoverSurface/usePopoverSurfaceStyles.styles.ts similarity index 100% rename from packages/react-cap-theme/src/components/react-popover/components/PopoverSurface/usePopoverSurfaceStyles.styles.ts rename to packages/react-cap-theme/src/customStyleHooks/react-popover/components/PopoverSurface/usePopoverSurfaceStyles.styles.ts diff --git a/packages/react-cap-theme/src/components/react-popover/index.ts b/packages/react-cap-theme/src/customStyleHooks/react-popover/index.ts similarity index 100% rename from packages/react-cap-theme/src/components/react-popover/index.ts rename to packages/react-cap-theme/src/customStyleHooks/react-popover/index.ts diff --git a/packages/react-cap-theme/src/components/react-tooltip/components/Tooltip/Tooltip.types.ts b/packages/react-cap-theme/src/customStyleHooks/react-tooltip/components/Tooltip/Tooltip.types.ts similarity index 100% rename from packages/react-cap-theme/src/components/react-tooltip/components/Tooltip/Tooltip.types.ts rename to packages/react-cap-theme/src/customStyleHooks/react-tooltip/components/Tooltip/Tooltip.types.ts diff --git a/packages/react-cap-theme/src/components/react-tooltip/components/Tooltip/useTooltip.ts b/packages/react-cap-theme/src/customStyleHooks/react-tooltip/components/Tooltip/useTooltip.ts similarity index 100% rename from packages/react-cap-theme/src/components/react-tooltip/components/Tooltip/useTooltip.ts rename to packages/react-cap-theme/src/customStyleHooks/react-tooltip/components/Tooltip/useTooltip.ts diff --git a/packages/react-cap-theme/src/components/react-tooltip/components/Tooltip/useTooltipStyles.styles.ts b/packages/react-cap-theme/src/customStyleHooks/react-tooltip/components/Tooltip/useTooltipStyles.styles.ts similarity index 100% rename from packages/react-cap-theme/src/components/react-tooltip/components/Tooltip/useTooltipStyles.styles.ts rename to packages/react-cap-theme/src/customStyleHooks/react-tooltip/components/Tooltip/useTooltipStyles.styles.ts diff --git a/packages/react-cap-theme/src/components/react-tooltip/index.ts b/packages/react-cap-theme/src/customStyleHooks/react-tooltip/index.ts similarity index 100% rename from packages/react-cap-theme/src/components/react-tooltip/index.ts rename to packages/react-cap-theme/src/customStyleHooks/react-tooltip/index.ts diff --git a/packages/react-cap-theme/src/components/tokens/index.ts b/packages/react-cap-theme/src/customStyleHooks/tokens/index.ts similarity index 100% rename from packages/react-cap-theme/src/components/tokens/index.ts rename to packages/react-cap-theme/src/customStyleHooks/tokens/index.ts diff --git a/packages/react-cap-theme/src/components/tokens/tokens.ts b/packages/react-cap-theme/src/customStyleHooks/tokens/tokens.ts similarity index 100% rename from packages/react-cap-theme/src/components/tokens/tokens.ts rename to packages/react-cap-theme/src/customStyleHooks/tokens/tokens.ts diff --git a/packages/react-cap-theme/src/components/tokens/types.ts b/packages/react-cap-theme/src/customStyleHooks/tokens/types.ts similarity index 100% rename from packages/react-cap-theme/src/components/tokens/types.ts rename to packages/react-cap-theme/src/customStyleHooks/tokens/types.ts diff --git a/packages/react-cap-theme/src/index.ts b/packages/react-cap-theme/src/index.ts index 2d16b537d..45692868b 100644 --- a/packages/react-cap-theme/src/index.ts +++ b/packages/react-cap-theme/src/index.ts @@ -6,7 +6,7 @@ import type { import { useAccordionHeaderStyles, useAccordionPanelStyles, -} from './components/react-accordion'; +} from './customStyleHooks/react-accordion'; import type { AvatarState, AvatarGroupItemState, @@ -16,19 +16,19 @@ import { useAvatarStyles, useAvatarGroupItemStyles, useAvatarGroupPopoverStyles, -} from './components/react-avatar'; +} from './customStyleHooks/react-avatar'; import type { BadgeState } from '@fluentui/react-badge'; -import { useBadgeStyles } from './components/react-badge'; +import { useBadgeStyles } from './customStyleHooks/react-badge'; import { useButtonStyles, useMenuButtonStyles, useSplitButtonStyles, useToggleButtonStyles, -} from './components/react-button'; -import type { ButtonState } from './components/react-button/components/Button/Button.types'; -import type { MenuButtonState } from './components/react-button/components/MenuButton/MenuButton.types'; -import type { SplitButtonState } from './components/react-button/components/SplitButton/SplitButton.types'; -import type { ToggleButtonState } from './components/react-button/components/ToggleButton/ToggleButton.types'; +} from './customStyleHooks/react-button'; +import type { ButtonState } from './customStyleHooks/react-button/components/Button/Button.types'; +import type { MenuButtonState } from './customStyleHooks/react-button/components/MenuButton/MenuButton.types'; +import type { SplitButtonState } from './customStyleHooks/react-button/components/SplitButton/SplitButton.types'; +import type { ToggleButtonState } from './customStyleHooks/react-button/components/ToggleButton/ToggleButton.types'; import { useCarouselStyles, useCarouselAutoplayButtonStyles, @@ -37,24 +37,24 @@ import { useCarouselNavButtonStyles, useCarouselNavContainerStyles, useCarouselNavImageButtonStyles, -} from './components/react-carousel'; -import type { CarouselState } from './components/react-carousel/components/Carousel/Carousel.types'; -import type { CarouselAutoplayButtonState } from './components/react-carousel/components/CarouselAutoplayButton/CarouselAutoplayButton.types'; -import type { CarouselButtonState } from './components/react-carousel/components/CarouselButton/CarouselButton.types'; -import type { CarouselNavState } from './components/react-carousel/components/CarouselNav/CarouselNav.types'; -import type { CarouselNavContainerState } from './components/react-carousel/components/CarouselNavContainer/CarouselNavContainer.types'; +} from './customStyleHooks/react-carousel'; +import type { CarouselState } from './customStyleHooks/react-carousel/components/Carousel/Carousel.types'; +import type { CarouselAutoplayButtonState } from './customStyleHooks/react-carousel/components/CarouselAutoplayButton/CarouselAutoplayButton.types'; +import type { CarouselButtonState } from './customStyleHooks/react-carousel/components/CarouselButton/CarouselButton.types'; +import type { CarouselNavState } from './customStyleHooks/react-carousel/components/CarouselNav/CarouselNav.types'; +import type { CarouselNavContainerState } from './customStyleHooks/react-carousel/components/CarouselNavContainer/CarouselNavContainer.types'; import type { CarouselNavButtonState, CarouselNavImageButtonState, } from '@fluentui/react-carousel'; -import { useCheckboxStyles } from './components/react-checkbox'; -import type { CheckboxState } from './components/react-checkbox/components/Checkbox/Checkbox.types'; +import { useCheckboxStyles } from './customStyleHooks/react-checkbox'; +import type { CheckboxState } from './customStyleHooks/react-checkbox/components/Checkbox/Checkbox.types'; import { useDialogActionsStyles, useDialogBodyStyles, useDialogSurfaceStyles, useDialogTitleStyles, -} from './components/react-dialog'; +} from './customStyleHooks/react-dialog'; import type { DialogActionsState, DialogBodyState, @@ -69,7 +69,7 @@ import { useDrawerHeaderTitleStyles, useInlineDrawerStyles, useOverlayDrawerStyles, -} from './components/react-drawer'; +} from './customStyleHooks/react-drawer'; import type { DrawerBodyState, DrawerFooterState, @@ -78,13 +78,13 @@ import type { DrawerHeaderTitleState, OverlayDrawerState, } from '@fluentui/react-drawer'; -import type { InlineDrawerState } from './components/react-drawer/components/InlineDrawer/InlineDrawer.types'; -import { useImageStyles } from './components/react-image'; +import type { InlineDrawerState } from './customStyleHooks/react-drawer/components/InlineDrawer/InlineDrawer.types'; +import { useImageStyles } from './customStyleHooks/react-image'; import type { ImageState } from '@fluentui/react-image'; -import { useLabelStyles } from './components/react-label'; -import type { LabelState } from './components/react-label/components/Label/Label.types'; -import { useLinkStyles } from './components/react-link'; -import type { LinkState } from './components/react-link/components/Link/Link.types'; +import { useLabelStyles } from './customStyleHooks/react-label'; +import type { LabelState } from './customStyleHooks/react-label/components/Label/Label.types'; +import { useLinkStyles } from './customStyleHooks/react-link'; +import type { LinkState } from './customStyleHooks/react-link/components/Link/Link.types'; import { useMenuDividerStyles, useMenuGroupHeaderStyles, @@ -93,7 +93,7 @@ import { useMenuItemRadioStyles, useMenuPopoverStyles, useMenuSplitGroupStyles, -} from './components/react-menu'; +} from './customStyleHooks/react-menu'; import type { MenuDividerState, MenuGroupHeaderState, @@ -103,10 +103,10 @@ import type { MenuPopoverState, MenuSplitGroupState, } from '@fluentui/react-menu'; -import { usePopoverSurfaceStyles } from './components/react-popover'; +import { usePopoverSurfaceStyles } from './customStyleHooks/react-popover'; import type { PopoverSurfaceState } from '@fluentui/react-popover'; -import { useTooltipStyles } from './components/react-tooltip'; -import type { TooltipState } from './components/react-tooltip/components/Tooltip/Tooltip.types'; +import { useTooltipStyles } from './customStyleHooks/react-tooltip'; +import type { TooltipState } from './customStyleHooks/react-tooltip/components/Tooltip/Tooltip.types'; export const CAP_STYLE_HOOKS: NonNullable< FluentProviderProps['customStyleHooks_unstable'] diff --git a/packages/react-cap-theme/tsconfig.lib.json b/packages/react-cap-theme/tsconfig.lib.json index 884038eac..546d49830 100644 --- a/packages/react-cap-theme/tsconfig.lib.json +++ b/packages/react-cap-theme/tsconfig.lib.json @@ -9,6 +9,7 @@ "jest.config.ts", "src/**/*.test.ts", "src/**/*.test.tsx", + "src/components/**", "files/**" ] } From 2c77693c3280707838e8a4f9470a850b918b9ac1 Mon Sep 17 00:00:00 2001 From: EnricoGianoglio Date: Thu, 16 Apr 2026 17:36:10 +0200 Subject: [PATCH 02/12] fix typecheck --- packages/react-cap-theme/src/components/react-button/index.ts | 2 ++ .../CarouselAutoplayButton/useCarouselAutoplayButton.ts | 2 +- .../components/CarouselButton/useCarouselButton.ts | 2 +- 3 files changed, 4 insertions(+), 2 deletions(-) diff --git a/packages/react-cap-theme/src/components/react-button/index.ts b/packages/react-cap-theme/src/components/react-button/index.ts index 727536ee1..a110c633c 100644 --- a/packages/react-cap-theme/src/components/react-button/index.ts +++ b/packages/react-cap-theme/src/components/react-button/index.ts @@ -1,4 +1,6 @@ export { Button as CAPButton } from './components/Button/Button'; +export { useButton } from './components/Button/useButton'; export { MenuButton as CAPMenuButton } from './components/MenuButton/MenuButton'; export { SplitButton as CAPSplitButton } from './components/SplitButton/SplitButton'; export { ToggleButton as CAPToggleButton } from './components/ToggleButton/ToggleButton'; +export { useToggleButton } from './components/ToggleButton/useToggleButton'; diff --git a/packages/react-cap-theme/src/customStyleHooks/react-carousel/components/CarouselAutoplayButton/useCarouselAutoplayButton.ts b/packages/react-cap-theme/src/customStyleHooks/react-carousel/components/CarouselAutoplayButton/useCarouselAutoplayButton.ts index 4710fade5..f6dc9fabd 100644 --- a/packages/react-cap-theme/src/customStyleHooks/react-carousel/components/CarouselAutoplayButton/useCarouselAutoplayButton.ts +++ b/packages/react-cap-theme/src/customStyleHooks/react-carousel/components/CarouselAutoplayButton/useCarouselAutoplayButton.ts @@ -1,6 +1,6 @@ import type { ARIAButtonElement } from '@fluentui/react-aria'; import { useCarouselAutoplayButton_unstable } from '@fluentui/react-carousel'; -import { useToggleButton } from '../../../react-button/components/ToggleButton/useToggleButton'; +import { useToggleButton } from '../../../../components/react-button'; import type { CarouselAutoplayButtonProps, CarouselAutoplayButtonState, diff --git a/packages/react-cap-theme/src/customStyleHooks/react-carousel/components/CarouselButton/useCarouselButton.ts b/packages/react-cap-theme/src/customStyleHooks/react-carousel/components/CarouselButton/useCarouselButton.ts index 110b550f0..1f14cf276 100644 --- a/packages/react-cap-theme/src/customStyleHooks/react-carousel/components/CarouselButton/useCarouselButton.ts +++ b/packages/react-cap-theme/src/customStyleHooks/react-carousel/components/CarouselButton/useCarouselButton.ts @@ -1,6 +1,6 @@ import type { ARIAButtonElement } from '@fluentui/react-aria'; import { useCarouselButton_unstable } from '@fluentui/react-carousel'; -import { useButton } from '../../../react-button/components/Button/useButton'; +import { useButton } from '../../../../components/react-button'; import type { Ref } from 'react'; import type { CarouselButtonProps, From 86210c4ad57fb85d9fc11c6fcc9e2cd84a2903df Mon Sep 17 00:00:00 2001 From: EnricoGianoglio Date: Fri, 17 Apr 2026 16:32:33 +0200 Subject: [PATCH 03/12] export AvatarGroupPopover wrapper --- .../AvatarGroupPopover/AvatarGroupPopover.tsx | 25 +++++++++++ .../useAvatarGroupPopover.ts | 41 +++++++++++++++++++ .../src/components/react-avatar/index.ts | 1 + .../PopoverSurface/PopoverSurface.tsx | 22 ++++++++++ .../src/components/react-popover/index.ts | 1 + .../AvatarGroupPopover.types.ts | 32 +++++++++++++++ .../useAvatarGroupPopoverStyles.styles.ts | 6 +-- .../customStyleHooks/react-avatar/index.ts | 4 ++ 8 files changed, 127 insertions(+), 5 deletions(-) create mode 100644 packages/react-cap-theme/src/components/react-avatar/components/AvatarGroupPopover/AvatarGroupPopover.tsx create mode 100644 packages/react-cap-theme/src/components/react-avatar/components/AvatarGroupPopover/useAvatarGroupPopover.ts create mode 100644 packages/react-cap-theme/src/components/react-avatar/index.ts create mode 100644 packages/react-cap-theme/src/components/react-popover/components/PopoverSurface/PopoverSurface.tsx create mode 100644 packages/react-cap-theme/src/components/react-popover/index.ts create mode 100644 packages/react-cap-theme/src/customStyleHooks/react-avatar/components/AvatarGroupPopover/AvatarGroupPopover.types.ts diff --git a/packages/react-cap-theme/src/components/react-avatar/components/AvatarGroupPopover/AvatarGroupPopover.tsx b/packages/react-cap-theme/src/components/react-avatar/components/AvatarGroupPopover/AvatarGroupPopover.tsx new file mode 100644 index 000000000..26bf124f3 --- /dev/null +++ b/packages/react-cap-theme/src/components/react-avatar/components/AvatarGroupPopover/AvatarGroupPopover.tsx @@ -0,0 +1,25 @@ +import { + renderAvatarGroupPopover_unstable, + useAvatarGroupPopoverContextValues_unstable, + type AvatarGroupPopoverState as FluentAvatarGroupPopoverState, +} from '@fluentui/react-avatar'; +import type * as React from 'react'; +import { useAvatarGroupPopoverStyles_unstable } from '@fluentui/react-components'; +import { useAvatarGroupPopover } from './useAvatarGroupPopover'; +import type { AvatarGroupPopoverProps } from '../../../../customStyleHooks/react-avatar'; +import { useAvatarGroupPopoverStyles as useCAPAvatarGroupPopoverStyles } from '../../../../customStyleHooks/react-avatar'; + +export const AvatarGroupPopover: React.FC = ( + props +) => { + const state = useAvatarGroupPopover(props); + const baseState = state as unknown as FluentAvatarGroupPopoverState; + const contextValues = useAvatarGroupPopoverContextValues_unstable(baseState); + + useAvatarGroupPopoverStyles_unstable(baseState); + useCAPAvatarGroupPopoverStyles(state); + + return renderAvatarGroupPopover_unstable(baseState, contextValues); +}; + +AvatarGroupPopover.displayName = 'AvatarGroupPopover'; diff --git a/packages/react-cap-theme/src/components/react-avatar/components/AvatarGroupPopover/useAvatarGroupPopover.ts b/packages/react-cap-theme/src/components/react-avatar/components/AvatarGroupPopover/useAvatarGroupPopover.ts new file mode 100644 index 000000000..8b6d1722f --- /dev/null +++ b/packages/react-cap-theme/src/components/react-avatar/components/AvatarGroupPopover/useAvatarGroupPopover.ts @@ -0,0 +1,41 @@ +import { useAvatarGroupPopover_unstable } from '@fluentui/react-avatar'; +import { slot } from '@fluentui/react-utilities'; +import { PopoverSurface } from '../../../react-popover'; +import { Tooltip } from '../../../react-tooltip'; +import type { + AvatarGroupPopoverProps, + AvatarGroupPopoverState, +} from '../../../../customStyleHooks/react-avatar'; + +export const useAvatarGroupPopover = ( + props: AvatarGroupPopoverProps +): AvatarGroupPopoverState => { + const { tooltip: tooltipProps, ...baseProps } = props; + const state = useAvatarGroupPopover_unstable(baseProps); + + const popoverSurface = slot.always(props.popoverSurface, { + defaultProps: { + 'aria-label': 'Overflow', + tabIndex: 0, + }, + elementType: PopoverSurface, + }); + const tooltip = slot.always(tooltipProps, { + defaultProps: { + content: 'View more people.', + relationship: 'label', + }, + elementType: Tooltip, + }); + + return { + ...state, + components: { + ...state.components, + popoverSurface: PopoverSurface, + tooltip: Tooltip, + }, + popoverSurface, + tooltip, + }; +}; diff --git a/packages/react-cap-theme/src/components/react-avatar/index.ts b/packages/react-cap-theme/src/components/react-avatar/index.ts new file mode 100644 index 000000000..39331e921 --- /dev/null +++ b/packages/react-cap-theme/src/components/react-avatar/index.ts @@ -0,0 +1 @@ +export { AvatarGroupPopover as CAPAvatarGroupPopover } from './components/AvatarGroupPopover/AvatarGroupPopover'; diff --git a/packages/react-cap-theme/src/components/react-popover/components/PopoverSurface/PopoverSurface.tsx b/packages/react-cap-theme/src/components/react-popover/components/PopoverSurface/PopoverSurface.tsx new file mode 100644 index 000000000..686184d9c --- /dev/null +++ b/packages/react-cap-theme/src/components/react-popover/components/PopoverSurface/PopoverSurface.tsx @@ -0,0 +1,22 @@ +import type { PopoverSurfaceProps } from '@fluentui/react-popover'; +import { + renderPopoverSurface_unstable, + usePopoverSurface_unstable, +} from '@fluentui/react-popover'; +// import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts'; +import type { ForwardRefComponent } from '@fluentui/react-utilities'; +import * as React from 'react'; +import { usePopoverSurfaceStyles_unstable } from '@fluentui/react-components'; +import { usePopoverSurfaceStyles } from '../../../../customStyleHooks/react-popover'; + +export const PopoverSurface: ForwardRefComponent = + React.forwardRef((props, ref) => { + const state = usePopoverSurface_unstable(props, ref); + usePopoverSurfaceStyles_unstable(state); + usePopoverSurfaceStyles(state); + // useCustomStyleHook_unstable('usePopoverSurfaceStyles_unstable')(state); + + return renderPopoverSurface_unstable(state); + }); + +PopoverSurface.displayName = 'PopoverSurface'; diff --git a/packages/react-cap-theme/src/components/react-popover/index.ts b/packages/react-cap-theme/src/components/react-popover/index.ts new file mode 100644 index 000000000..fa135ecae --- /dev/null +++ b/packages/react-cap-theme/src/components/react-popover/index.ts @@ -0,0 +1 @@ +export { PopoverSurface } from './components/PopoverSurface/PopoverSurface'; diff --git a/packages/react-cap-theme/src/customStyleHooks/react-avatar/components/AvatarGroupPopover/AvatarGroupPopover.types.ts b/packages/react-cap-theme/src/customStyleHooks/react-avatar/components/AvatarGroupPopover/AvatarGroupPopover.types.ts new file mode 100644 index 000000000..293e35403 --- /dev/null +++ b/packages/react-cap-theme/src/customStyleHooks/react-avatar/components/AvatarGroupPopover/AvatarGroupPopover.types.ts @@ -0,0 +1,32 @@ +import type { + AvatarGroupPopoverProps as FluentAvatarGroupPopoverProps, + AvatarGroupPopoverSlots as FluentAvatarGroupPopoverSlots, + AvatarGroupPopoverState as FluentAvatarGroupPopoverState, +} from '@fluentui/react-avatar'; +import type { + ComponentProps, + ComponentState, + Slot, +} from '@fluentui/react-utilities'; +import type { PopoverSurface } from '@fluentui/react-popover'; +import type { TooltipProps } from '../../../react-tooltip'; + +export type AvatarGroupPopoverSlots = Omit< + FluentAvatarGroupPopoverSlots, + 'popoverSurface' | 'tooltip' +> & { + popoverSurface: NonNullable>; + tooltip: NonNullable>; +}; + +export type AvatarGroupPopoverProps = Omit< + ComponentProps>, + 'children' +> & + Pick; + +export type AvatarGroupPopoverState = ComponentState & + Pick< + FluentAvatarGroupPopoverState, + 'indicator' | 'count' | 'popoverOpen' | 'layout' | 'size' + >; diff --git a/packages/react-cap-theme/src/customStyleHooks/react-avatar/components/AvatarGroupPopover/useAvatarGroupPopoverStyles.styles.ts b/packages/react-cap-theme/src/customStyleHooks/react-avatar/components/AvatarGroupPopover/useAvatarGroupPopoverStyles.styles.ts index 6a64cf966..9dc1b329c 100644 --- a/packages/react-cap-theme/src/customStyleHooks/react-avatar/components/AvatarGroupPopover/useAvatarGroupPopoverStyles.styles.ts +++ b/packages/react-cap-theme/src/customStyleHooks/react-avatar/components/AvatarGroupPopover/useAvatarGroupPopoverStyles.styles.ts @@ -1,10 +1,7 @@ -import { - useAvatarGroupPopoverStyles_unstable, - type AvatarGroupPopoverState, -} from '@fluentui/react-avatar'; import { getSlotClassNameProp_unstable } from '@fluentui/react-utilities'; import { tokens } from '@fluentui/tokens'; import { makeStyles, mergeClasses } from '@griffel/react'; +import type { AvatarGroupPopoverState } from './AvatarGroupPopover.types'; const useTriggerButtonStyles = makeStyles({ thin: { @@ -62,6 +59,5 @@ export const useAvatarGroupPopoverStyles = ( ); } - useAvatarGroupPopoverStyles_unstable(state); return state; }; diff --git a/packages/react-cap-theme/src/customStyleHooks/react-avatar/index.ts b/packages/react-cap-theme/src/customStyleHooks/react-avatar/index.ts index cff2a23db..1be18e6d8 100644 --- a/packages/react-cap-theme/src/customStyleHooks/react-avatar/index.ts +++ b/packages/react-cap-theme/src/customStyleHooks/react-avatar/index.ts @@ -1,3 +1,7 @@ export { useAvatarStyles } from './components/Avatar/useAvatarStyles.styles'; export { useAvatarGroupItemStyles } from './components/AvatarGroupItem/useAvatarGroupItemStyles.styles'; export { useAvatarGroupPopoverStyles } from './components/AvatarGroupPopover/useAvatarGroupPopoverStyles.styles'; +export type { + AvatarGroupPopoverProps, + AvatarGroupPopoverState, +} from './components/AvatarGroupPopover/AvatarGroupPopover.types'; From c529abf1e44e3d5a322311944b937c1b98554074 Mon Sep 17 00:00:00 2001 From: EnricoGianoglio Date: Fri, 17 Apr 2026 16:33:34 +0200 Subject: [PATCH 04/12] export Label CAP wrapper --- .../react-label/components/Label/Label.tsx | 27 +++++++++++++++ .../components/Label/renderLabel.tsx | 28 ++++++++++++++++ .../react-label/components/Label/useLabel.ts | 33 +++++++++++++++++++ .../src/components/react-label/index.ts | 1 + .../components/Label/Label.types.ts | 24 ++++++++++++-- .../src/customStyleHooks/react-label/index.ts | 5 +++ 6 files changed, 116 insertions(+), 2 deletions(-) create mode 100644 packages/react-cap-theme/src/components/react-label/components/Label/Label.tsx create mode 100644 packages/react-cap-theme/src/components/react-label/components/Label/renderLabel.tsx create mode 100644 packages/react-cap-theme/src/components/react-label/components/Label/useLabel.ts create mode 100644 packages/react-cap-theme/src/components/react-label/index.ts diff --git a/packages/react-cap-theme/src/components/react-label/components/Label/Label.tsx b/packages/react-cap-theme/src/components/react-label/components/Label/Label.tsx new file mode 100644 index 000000000..a85322056 --- /dev/null +++ b/packages/react-cap-theme/src/components/react-label/components/Label/Label.tsx @@ -0,0 +1,27 @@ +import type { ForwardRefComponent } from '@fluentui/react-utilities'; +import * as React from 'react'; +import { useLabelStyles_unstable } from '@fluentui/react-components'; +import { renderLabel } from './renderLabel'; +import { useLabel } from './useLabel'; +import type { LabelProps } from '../../../../customStyleHooks/react-label'; +import { useLabelStyles as useCAPLabelStyles } from '../../../../customStyleHooks/react-label'; + +/** + * Label component for SharePoint Design System with SP-specific typography and theming. + * @param props - The label configuration and event handlers + * @param ref - React ref for the label element + * @returns JSX.Element representing the rendered label + * @alpha + */ +export const Label: ForwardRefComponent = React.forwardRef( + (props, ref) => { + const state = useLabel(props, ref); + + useLabelStyles_unstable(state); + useCAPLabelStyles(state); + + return renderLabel(state); + } +); + +Label.displayName = 'Label'; diff --git a/packages/react-cap-theme/src/components/react-label/components/Label/renderLabel.tsx b/packages/react-cap-theme/src/components/react-label/components/Label/renderLabel.tsx new file mode 100644 index 000000000..2162a8b72 --- /dev/null +++ b/packages/react-cap-theme/src/components/react-label/components/Label/renderLabel.tsx @@ -0,0 +1,28 @@ +/** @jsx createElement */ +/** @jsxRuntime classic */ + +// eslint-disable-next-line @typescript-eslint/no-unused-vars +import { createElement } from '@fluentui/react-jsx-runtime'; // createElement custom JSX pragma is required to support slot creation +import { assertSlots, type JSXElement } from '@fluentui/react-utilities'; +import type { + LabelSlots, + LabelState, +} from '../../../../customStyleHooks/react-label'; + +/** + * Render the final JSX of Label. + * @param state - Label state + * @returns The rendered Label element + * @alpha + */ +export const renderLabel = (state: LabelState): JSXElement => { + assertSlots(state); + + return ( + + {state.icon && } + {state.root.children} + {state.required && } + + ); +}; diff --git a/packages/react-cap-theme/src/components/react-label/components/Label/useLabel.ts b/packages/react-cap-theme/src/components/react-label/components/Label/useLabel.ts new file mode 100644 index 000000000..68a6dd7ad --- /dev/null +++ b/packages/react-cap-theme/src/components/react-label/components/Label/useLabel.ts @@ -0,0 +1,33 @@ +import { useLabel_unstable } from '@fluentui/react-label'; +import { slot } from '@fluentui/react-utilities'; +import type { Ref } from 'react'; +import type { + LabelState, + LabelProps, +} from '../../../../customStyleHooks/react-label'; + +/** + * Custom hook that creates and returns state for the Label component. + * @param props - Label props + * @param ref - React ref for the label element + * @returns Label state + * @alpha + */ +export const useLabel = ( + props: LabelProps, + ref: Ref +): LabelState => { + const baseState = useLabel_unstable(props, ref); + const iconElementType = 'span'; + const components: LabelState['components'] = { + ...baseState.components, + icon: iconElementType, + }; + const icon = slot.optional(props.icon, { elementType: iconElementType }); + + return { + ...baseState, + icon, + components, + }; +}; diff --git a/packages/react-cap-theme/src/components/react-label/index.ts b/packages/react-cap-theme/src/components/react-label/index.ts new file mode 100644 index 000000000..75b950f26 --- /dev/null +++ b/packages/react-cap-theme/src/components/react-label/index.ts @@ -0,0 +1 @@ +export { Label as CAPLabel } from './components/Label/Label'; diff --git a/packages/react-cap-theme/src/customStyleHooks/react-label/components/Label/Label.types.ts b/packages/react-cap-theme/src/customStyleHooks/react-label/components/Label/Label.types.ts index c228ff2fb..ecfb244a6 100644 --- a/packages/react-cap-theme/src/customStyleHooks/react-label/components/Label/Label.types.ts +++ b/packages/react-cap-theme/src/customStyleHooks/react-label/components/Label/Label.types.ts @@ -2,11 +2,31 @@ import type { LabelProps as BaseLabelProps, LabelSlots as BaseLabelSlots, } from '@fluentui/react-label'; -import type { ComponentState, Slot } from '@fluentui/react-utilities'; +import type { + ComponentProps, + ComponentState, + Slot, +} from '@fluentui/react-utilities'; +/** + * Label slots specific to SharePoint. + * @alpha + */ export type LabelSlots = BaseLabelSlots & { /** Optional icon rendered alongside the label text. */ icon?: Slot<'span'>; }; -export type LabelState = ComponentState & BaseLabelProps; +/** + * Props for the Label component specific to SharePoint. + * @alpha + */ +export type LabelProps = Omit, 'required'> & + Pick; + +/** + * State for the Label component specific to SharePoint. + * @alpha + */ +export type LabelState = ComponentState & + Required>; diff --git a/packages/react-cap-theme/src/customStyleHooks/react-label/index.ts b/packages/react-cap-theme/src/customStyleHooks/react-label/index.ts index 00822ba58..85c2afa06 100644 --- a/packages/react-cap-theme/src/customStyleHooks/react-label/index.ts +++ b/packages/react-cap-theme/src/customStyleHooks/react-label/index.ts @@ -1 +1,6 @@ export { useLabelStyles } from './components/Label/useLabelStyles.styles'; +export type { + LabelProps, + LabelState, + LabelSlots, +} from './components/Label/Label.types'; From 98470a93f0c1ce090f72da7cc312abf71e203741 Mon Sep 17 00:00:00 2001 From: EnricoGianoglio Date: Fri, 17 Apr 2026 16:34:46 +0200 Subject: [PATCH 05/12] export Tooltip CAP wrapper --- .../components/Tooltip/Tooltip.tsx | 18 ++++++++++++++++++ .../components/Tooltip/useTooltip.ts | 5 ++++- .../src/components/react-tooltip/index.ts | 1 + .../customStyleHooks/react-tooltip/index.ts | 4 ++++ 4 files changed, 27 insertions(+), 1 deletion(-) create mode 100644 packages/react-cap-theme/src/components/react-tooltip/components/Tooltip/Tooltip.tsx rename packages/react-cap-theme/src/{customStyleHooks => components}/react-tooltip/components/Tooltip/useTooltip.ts (84%) create mode 100644 packages/react-cap-theme/src/components/react-tooltip/index.ts diff --git a/packages/react-cap-theme/src/components/react-tooltip/components/Tooltip/Tooltip.tsx b/packages/react-cap-theme/src/components/react-tooltip/components/Tooltip/Tooltip.tsx new file mode 100644 index 000000000..8226ada25 --- /dev/null +++ b/packages/react-cap-theme/src/components/react-tooltip/components/Tooltip/Tooltip.tsx @@ -0,0 +1,18 @@ +import { renderTooltip_unstable } from '@fluentui/react-tooltip'; +import type { FluentTriggerComponent } from '@fluentui/react-utilities'; +import type * as React from 'react'; +import { useTooltipStyles_unstable } from '@fluentui/react-components'; +import { useTooltip_unstable } from './useTooltip'; +import type { TooltipProps } from '../../../../customStyleHooks/react-tooltip'; +import { useTooltipStyles as useCAPTooltipStyles } from '../../../../customStyleHooks/react-tooltip'; + +export const Tooltip: React.FC = (props) => { + const state = useTooltip_unstable(props); + useTooltipStyles_unstable(state); + useCAPTooltipStyles(state); + + return renderTooltip_unstable(state); +}; + +Tooltip.displayName = 'Tooltip'; +(Tooltip as FluentTriggerComponent).isFluentTriggerComponent = true; diff --git a/packages/react-cap-theme/src/customStyleHooks/react-tooltip/components/Tooltip/useTooltip.ts b/packages/react-cap-theme/src/components/react-tooltip/components/Tooltip/useTooltip.ts similarity index 84% rename from packages/react-cap-theme/src/customStyleHooks/react-tooltip/components/Tooltip/useTooltip.ts rename to packages/react-cap-theme/src/components/react-tooltip/components/Tooltip/useTooltip.ts index f6fb20494..be2b39e9d 100644 --- a/packages/react-cap-theme/src/customStyleHooks/react-tooltip/components/Tooltip/useTooltip.ts +++ b/packages/react-cap-theme/src/components/react-tooltip/components/Tooltip/useTooltip.ts @@ -1,5 +1,8 @@ import { useTooltip_unstable as useFluentTooltip_unstable } from '@fluentui/react-tooltip'; -import type { TooltipProps, TooltipState } from './Tooltip.types'; +import type { + TooltipProps, + TooltipState, +} from '../../../../customStyleHooks/react-tooltip'; export const useTooltip_unstable = (props: TooltipProps): TooltipState => { const { appearance, ...rest } = props; diff --git a/packages/react-cap-theme/src/components/react-tooltip/index.ts b/packages/react-cap-theme/src/components/react-tooltip/index.ts new file mode 100644 index 000000000..03295ae63 --- /dev/null +++ b/packages/react-cap-theme/src/components/react-tooltip/index.ts @@ -0,0 +1 @@ +export { Tooltip } from './components/Tooltip/Tooltip'; diff --git a/packages/react-cap-theme/src/customStyleHooks/react-tooltip/index.ts b/packages/react-cap-theme/src/customStyleHooks/react-tooltip/index.ts index 9728baa51..06769ba96 100644 --- a/packages/react-cap-theme/src/customStyleHooks/react-tooltip/index.ts +++ b/packages/react-cap-theme/src/customStyleHooks/react-tooltip/index.ts @@ -1 +1,5 @@ export { useTooltipStyles_unstable as useTooltipStyles } from './components/Tooltip/useTooltipStyles.styles'; +export type { + TooltipProps, + TooltipState, +} from './components/Tooltip/Tooltip.types'; From 3d62a504b8267d3d9f654c89563cac8cc0e24924 Mon Sep 17 00:00:00 2001 From: EnricoGianoglio Date: Fri, 17 Apr 2026 16:37:48 +0200 Subject: [PATCH 06/12] export Link CAP wrapper --- .../react-link/components/Link/Link.tsx | 24 +++++++++++++++++++ .../react-link/components/Link/Link.utils.ts | 5 +++- .../react-link/components/Link/useLink.ts | 5 +++- .../src/components/react-link/index.ts | 1 + .../components/Link/useLinkStyles.styles.ts | 3 --- .../src/customStyleHooks/react-link/index.ts | 1 + 6 files changed, 34 insertions(+), 5 deletions(-) create mode 100644 packages/react-cap-theme/src/components/react-link/components/Link/Link.tsx rename packages/react-cap-theme/src/{customStyleHooks => components}/react-link/components/Link/Link.utils.ts (89%) rename packages/react-cap-theme/src/{customStyleHooks => components}/react-link/components/Link/useLink.ts (83%) create mode 100644 packages/react-cap-theme/src/components/react-link/index.ts diff --git a/packages/react-cap-theme/src/components/react-link/components/Link/Link.tsx b/packages/react-cap-theme/src/components/react-link/components/Link/Link.tsx new file mode 100644 index 000000000..4e6421e16 --- /dev/null +++ b/packages/react-cap-theme/src/components/react-link/components/Link/Link.tsx @@ -0,0 +1,24 @@ +import { + renderLink_unstable, + useLinkStyles_unstable, + type LinkState as FluentLinkState, +} from '@fluentui/react-link'; +import type { ForwardRefComponent } from '@fluentui/react-utilities'; +import * as React from 'react'; +import { toBaseState } from './Link.utils'; +import { useLink } from './useLink'; +import type { LinkProps } from '../../../../customStyleHooks/react-link'; +import { useLinkStyles as useCAPLinkStyles } from '../../../../customStyleHooks/react-link'; + +export const Link: ForwardRefComponent = React.forwardRef( + (props, ref) => { + const state = useLink(props, ref); + + useLinkStyles_unstable(state as FluentLinkState); + useCAPLinkStyles(state); + + return renderLink_unstable(toBaseState(state)); + } +); + +Link.displayName = 'Link'; diff --git a/packages/react-cap-theme/src/customStyleHooks/react-link/components/Link/Link.utils.ts b/packages/react-cap-theme/src/components/react-link/components/Link/Link.utils.ts similarity index 89% rename from packages/react-cap-theme/src/customStyleHooks/react-link/components/Link/Link.utils.ts rename to packages/react-cap-theme/src/components/react-link/components/Link/Link.utils.ts index 3e48797b8..0147f1bc8 100644 --- a/packages/react-cap-theme/src/customStyleHooks/react-link/components/Link/Link.utils.ts +++ b/packages/react-cap-theme/src/components/react-link/components/Link/Link.utils.ts @@ -2,7 +2,10 @@ import type { LinkProps as FluentLinkProps, LinkState as FluentLinkState, } from '@fluentui/react-link'; -import type { LinkProps, LinkState } from './Link.types'; +import type { + LinkProps, + LinkState, +} from '../../../../customStyleHooks/react-link'; export const baseAppearanceMap: Record< NonNullable, diff --git a/packages/react-cap-theme/src/customStyleHooks/react-link/components/Link/useLink.ts b/packages/react-cap-theme/src/components/react-link/components/Link/useLink.ts similarity index 83% rename from packages/react-cap-theme/src/customStyleHooks/react-link/components/Link/useLink.ts rename to packages/react-cap-theme/src/components/react-link/components/Link/useLink.ts index 59fb2e99d..6843ab5f5 100644 --- a/packages/react-cap-theme/src/customStyleHooks/react-link/components/Link/useLink.ts +++ b/packages/react-cap-theme/src/components/react-link/components/Link/useLink.ts @@ -1,6 +1,9 @@ import { useLink_unstable as useBaseLink } from '@fluentui/react-link'; import type * as React from 'react'; -import type { LinkProps, LinkState } from './Link.types'; +import type { + LinkProps, + LinkState, +} from '../../../../customStyleHooks/react-link'; import { toBaseProps } from './Link.utils'; export const useLink = ( diff --git a/packages/react-cap-theme/src/components/react-link/index.ts b/packages/react-cap-theme/src/components/react-link/index.ts new file mode 100644 index 000000000..e75820335 --- /dev/null +++ b/packages/react-cap-theme/src/components/react-link/index.ts @@ -0,0 +1 @@ +export { Link as CAPLink } from './components/Link/Link'; diff --git a/packages/react-cap-theme/src/customStyleHooks/react-link/components/Link/useLinkStyles.styles.ts b/packages/react-cap-theme/src/customStyleHooks/react-link/components/Link/useLinkStyles.styles.ts index fbcac26aa..a501a7723 100644 --- a/packages/react-cap-theme/src/customStyleHooks/react-link/components/Link/useLinkStyles.styles.ts +++ b/packages/react-cap-theme/src/customStyleHooks/react-link/components/Link/useLinkStyles.styles.ts @@ -1,10 +1,8 @@ -import { useLinkStyles_unstable } from '@fluentui/react-link'; import { getSlotClassNameProp_unstable } from '@fluentui/react-utilities'; import { tokens } from '@fluentui/tokens'; import { makeStyles, mergeClasses } from '@griffel/react'; import type { LinkState } from './Link.types'; -import { toBaseState } from './Link.utils'; const useStyles = makeStyles({ bold: { @@ -34,6 +32,5 @@ export const useLinkStyles = (state: LinkState): LinkState => { getSlotClassNameProp_unstable(state.root) ); - useLinkStyles_unstable(toBaseState(state)); return state; }; diff --git a/packages/react-cap-theme/src/customStyleHooks/react-link/index.ts b/packages/react-cap-theme/src/customStyleHooks/react-link/index.ts index 4959300c8..9254e1b4d 100644 --- a/packages/react-cap-theme/src/customStyleHooks/react-link/index.ts +++ b/packages/react-cap-theme/src/customStyleHooks/react-link/index.ts @@ -1 +1,2 @@ export { useLinkStyles } from './components/Link/useLinkStyles.styles'; +export type { LinkProps, LinkState } from './components/Link/Link.types'; From 68f1a96408d13a6de10abaeddb7ef5ecaa9bafb8 Mon Sep 17 00:00:00 2001 From: EnricoGianoglio Date: Fri, 17 Apr 2026 19:35:38 +0200 Subject: [PATCH 07/12] renamed CapTooltip --- .../components/AvatarGroupPopover/useAvatarGroupPopover.ts | 6 +++--- .../react-cap-theme/src/components/react-tooltip/index.ts | 2 +- packages/react-cap-theme/src/index.ts | 1 - 3 files changed, 4 insertions(+), 5 deletions(-) diff --git a/packages/react-cap-theme/src/components/react-avatar/components/AvatarGroupPopover/useAvatarGroupPopover.ts b/packages/react-cap-theme/src/components/react-avatar/components/AvatarGroupPopover/useAvatarGroupPopover.ts index 8b6d1722f..e3eb5bc8b 100644 --- a/packages/react-cap-theme/src/components/react-avatar/components/AvatarGroupPopover/useAvatarGroupPopover.ts +++ b/packages/react-cap-theme/src/components/react-avatar/components/AvatarGroupPopover/useAvatarGroupPopover.ts @@ -1,7 +1,7 @@ import { useAvatarGroupPopover_unstable } from '@fluentui/react-avatar'; import { slot } from '@fluentui/react-utilities'; import { PopoverSurface } from '../../../react-popover'; -import { Tooltip } from '../../../react-tooltip'; +import { CAPTooltip } from '../../../react-tooltip'; import type { AvatarGroupPopoverProps, AvatarGroupPopoverState, @@ -25,7 +25,7 @@ export const useAvatarGroupPopover = ( content: 'View more people.', relationship: 'label', }, - elementType: Tooltip, + elementType: CAPTooltip, }); return { @@ -33,7 +33,7 @@ export const useAvatarGroupPopover = ( components: { ...state.components, popoverSurface: PopoverSurface, - tooltip: Tooltip, + tooltip: CAPTooltip, }, popoverSurface, tooltip, diff --git a/packages/react-cap-theme/src/components/react-tooltip/index.ts b/packages/react-cap-theme/src/components/react-tooltip/index.ts index 03295ae63..2e104f9cb 100644 --- a/packages/react-cap-theme/src/components/react-tooltip/index.ts +++ b/packages/react-cap-theme/src/components/react-tooltip/index.ts @@ -1 +1 @@ -export { Tooltip } from './components/Tooltip/Tooltip'; +export { Tooltip as CAPTooltip } from './components/Tooltip/Tooltip'; diff --git a/packages/react-cap-theme/src/index.ts b/packages/react-cap-theme/src/index.ts index 50403b7c9..f1f1624d2 100644 --- a/packages/react-cap-theme/src/index.ts +++ b/packages/react-cap-theme/src/index.ts @@ -31,7 +31,6 @@ import type { SplitButtonState, ToggleButtonState, } from './customStyleHooks/react-button'; - import { useCarouselStyles, useCarouselAutoplayButtonStyles, From 86a1777af5526daec5cd5d4dee69bb51b8a720df Mon Sep 17 00:00:00 2001 From: EnricoGianoglio Date: Fri, 17 Apr 2026 20:11:39 +0200 Subject: [PATCH 08/12] export CAP Carousel wrapper --- .../src/components/react-button/Button.ts | 10 ++-- .../src/components/react-button/MenuButton.ts | 7 +-- .../components/react-button/SplitButton.ts | 7 +-- .../components/react-button/ToggleButton.ts | 7 +-- .../src/components/react-button/index.ts | 28 ++-------- .../components/Carousel/Carousel.tsx | 22 ++++++++ .../components/Carousel/CarouselContext.ts | 25 +++++++++ .../components/Carousel/renderCarousel.tsx | 28 ++++++++++ .../components/Carousel/useCarousel.ts | 16 ++++++ .../Carousel/useCarouselContextValues.ts | 52 +++++++++++++++++++ .../CarouselAutoplayButton.tsx | 21 ++++++++ .../renderCarouselAutoplayButton.tsx | 14 +++++ .../useCarouselAutoplayButton.ts | 36 +++++++++++++ .../CarouselButton/CarouselButton.tsx | 19 +++++++ .../CarouselButton/renderCarouselButton.tsx | 14 +++++ .../CarouselButton/useCarouselButton.ts | 41 +++++++++++++++ .../components/CarouselNav/CarouselNav.tsx | 21 ++++++++ .../components/CarouselNav/useCarouselNav.ts | 15 ++++++ .../useCarouselNavContextValues.ts | 14 +++++ .../CarouselNavContainer.tsx | 19 +++++++ .../renderCarouselNavContainer.tsx | 37 +++++++++++++ .../useCarouselNavContainer.ts | 49 +++++++++++++++++ .../src/components/react-carousel/index.ts | 5 ++ .../customStyleHooks/react-carousel/index.ts | 30 +++++++++-- 24 files changed, 484 insertions(+), 53 deletions(-) create mode 100644 packages/react-cap-theme/src/components/react-carousel/components/Carousel/Carousel.tsx create mode 100644 packages/react-cap-theme/src/components/react-carousel/components/Carousel/CarouselContext.ts create mode 100644 packages/react-cap-theme/src/components/react-carousel/components/Carousel/renderCarousel.tsx create mode 100644 packages/react-cap-theme/src/components/react-carousel/components/Carousel/useCarousel.ts create mode 100644 packages/react-cap-theme/src/components/react-carousel/components/Carousel/useCarouselContextValues.ts create mode 100644 packages/react-cap-theme/src/components/react-carousel/components/CarouselAutoplayButton/CarouselAutoplayButton.tsx create mode 100644 packages/react-cap-theme/src/components/react-carousel/components/CarouselAutoplayButton/renderCarouselAutoplayButton.tsx create mode 100644 packages/react-cap-theme/src/components/react-carousel/components/CarouselAutoplayButton/useCarouselAutoplayButton.ts create mode 100644 packages/react-cap-theme/src/components/react-carousel/components/CarouselButton/CarouselButton.tsx create mode 100644 packages/react-cap-theme/src/components/react-carousel/components/CarouselButton/renderCarouselButton.tsx create mode 100644 packages/react-cap-theme/src/components/react-carousel/components/CarouselButton/useCarouselButton.ts create mode 100644 packages/react-cap-theme/src/components/react-carousel/components/CarouselNav/CarouselNav.tsx create mode 100644 packages/react-cap-theme/src/components/react-carousel/components/CarouselNav/useCarouselNav.ts create mode 100644 packages/react-cap-theme/src/components/react-carousel/components/CarouselNav/useCarouselNavContextValues.ts create mode 100644 packages/react-cap-theme/src/components/react-carousel/components/CarouselNavContainer/CarouselNavContainer.tsx create mode 100644 packages/react-cap-theme/src/components/react-carousel/components/CarouselNavContainer/renderCarouselNavContainer.tsx create mode 100644 packages/react-cap-theme/src/components/react-carousel/components/CarouselNavContainer/useCarouselNavContainer.ts create mode 100644 packages/react-cap-theme/src/components/react-carousel/index.ts diff --git a/packages/react-cap-theme/src/components/react-button/Button.ts b/packages/react-cap-theme/src/components/react-button/Button.ts index 82fbb80c4..0eb6a4b99 100644 --- a/packages/react-cap-theme/src/components/react-button/Button.ts +++ b/packages/react-cap-theme/src/components/react-button/Button.ts @@ -1,7 +1,3 @@ -export { useButtonStyles } from './components/Button/useButtonStyles.styles'; -export type { - ButtonProps, - ButtonSlots, - ButtonState, - ButtonAppearance, -} from './components/Button/Button.types'; +export { Button as CAPButton } from './components/Button/Button'; +export { renderButton } from './components/Button/renderButton'; +export { useButton } from './components/Button/useButton'; diff --git a/packages/react-cap-theme/src/components/react-button/MenuButton.ts b/packages/react-cap-theme/src/components/react-button/MenuButton.ts index 9c97077e9..c2d7ad7b0 100644 --- a/packages/react-cap-theme/src/components/react-button/MenuButton.ts +++ b/packages/react-cap-theme/src/components/react-button/MenuButton.ts @@ -1,6 +1 @@ -export { useMenuButtonStyles } from './components/MenuButton/useMenuButtonStyles.styles'; -export type { - MenuButtonProps, - MenuButtonSlots, - MenuButtonState, -} from './components/MenuButton/MenuButton.types'; +export { MenuButton as CAPMenuButton } from './components/MenuButton/MenuButton'; diff --git a/packages/react-cap-theme/src/components/react-button/SplitButton.ts b/packages/react-cap-theme/src/components/react-button/SplitButton.ts index 280fad8ad..4ca02c894 100644 --- a/packages/react-cap-theme/src/components/react-button/SplitButton.ts +++ b/packages/react-cap-theme/src/components/react-button/SplitButton.ts @@ -1,6 +1 @@ -export { useSplitButtonStyles } from './components/SplitButton/useSplitButtonStyles.styles'; -export type { - SplitButtonProps, - SplitButtonSlots, - SplitButtonState, -} from './components/SplitButton/SplitButton.types'; +export { SplitButton as CAPSplitButton } from './components/SplitButton/SplitButton'; diff --git a/packages/react-cap-theme/src/components/react-button/ToggleButton.ts b/packages/react-cap-theme/src/components/react-button/ToggleButton.ts index fa1227705..4bfec3364 100644 --- a/packages/react-cap-theme/src/components/react-button/ToggleButton.ts +++ b/packages/react-cap-theme/src/components/react-button/ToggleButton.ts @@ -1,5 +1,2 @@ -export { useToggleButtonStyles } from './components/ToggleButton/useToggleButtonStyles.styles'; -export type { - ToggleButtonProps, - ToggleButtonState, -} from './components/ToggleButton/ToggleButton.types'; +export { ToggleButton as CAPToggleButton } from './components/ToggleButton/ToggleButton'; +export { useToggleButton } from './components/ToggleButton/useToggleButton'; diff --git a/packages/react-cap-theme/src/components/react-button/index.ts b/packages/react-cap-theme/src/components/react-button/index.ts index b83e6a910..09615f89e 100644 --- a/packages/react-cap-theme/src/components/react-button/index.ts +++ b/packages/react-cap-theme/src/components/react-button/index.ts @@ -1,24 +1,4 @@ -export { useButtonStyles } from './Button'; -export type { - ButtonProps, - ButtonSlots, - ButtonState, - ButtonAppearance, -} from './Button'; - -export { useMenuButtonStyles } from './MenuButton'; -export type { - MenuButtonProps, - MenuButtonSlots, - MenuButtonState, -} from './MenuButton'; - -export { useSplitButtonStyles } from './SplitButton'; -export type { - SplitButtonProps, - SplitButtonSlots, - SplitButtonState, -} from './SplitButton'; - -export { useToggleButtonStyles } from './ToggleButton'; -export type { ToggleButtonProps, ToggleButtonState } from './ToggleButton'; +export { CAPButton, renderButton, useButton } from './Button'; +export { CAPMenuButton } from './MenuButton'; +export { CAPSplitButton } from './SplitButton'; +export { CAPToggleButton, useToggleButton } from './ToggleButton'; diff --git a/packages/react-cap-theme/src/components/react-carousel/components/Carousel/Carousel.tsx b/packages/react-cap-theme/src/components/react-carousel/components/Carousel/Carousel.tsx new file mode 100644 index 000000000..626b6068b --- /dev/null +++ b/packages/react-cap-theme/src/components/react-carousel/components/Carousel/Carousel.tsx @@ -0,0 +1,22 @@ +import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts'; +import type { ForwardRefComponent } from '@fluentui/react-utilities'; +import * as React from 'react'; +import { renderCarousel } from './renderCarousel'; +import { useCarousel } from './useCarousel'; +import { useCarouselContextValues } from './useCarouselContextValues'; +import { useCarouselStyles } from '../../../../customStyleHooks/react-carousel'; +import type { CarouselProps } from '../../../../customStyleHooks/react-carousel'; + +export const Carousel: ForwardRefComponent = React.forwardRef( + (props, ref) => { + const state = useCarousel(props, ref); + const contextValues = useCarouselContextValues(state); + + useCarouselStyles(state); + useCustomStyleHook_unstable('useCarouselStyles_unstable')(state); + + return renderCarousel(state, contextValues); + } +); + +Carousel.displayName = 'Carousel'; diff --git a/packages/react-cap-theme/src/components/react-carousel/components/Carousel/CarouselContext.ts b/packages/react-cap-theme/src/components/react-carousel/components/Carousel/CarouselContext.ts new file mode 100644 index 000000000..ea5922ea6 --- /dev/null +++ b/packages/react-cap-theme/src/components/react-carousel/components/Carousel/CarouselContext.ts @@ -0,0 +1,25 @@ +import { carouselContextDefaultValue as fluentCarouselContextDefaultValue } from '@fluentui/react-carousel'; +import { + type ContextSelector, + createContext, + useContextSelector, +} from '@fluentui/react-context-selector'; +import type { CarouselContextValues } from '../../../../customStyleHooks/react-carousel'; + +export const carouselContextDefaultValue: CarouselContextValues = { + carousel: fluentCarouselContextDefaultValue, + layout: 'inline', +}; + +const CarouselContext = createContext( + undefined +); + +export const CarouselProvider = CarouselContext.Provider; + +export const useCarouselContext = ( + selector: ContextSelector +): T => + useContextSelector(CarouselContext, (ctx = carouselContextDefaultValue) => + selector(ctx) + ); diff --git a/packages/react-cap-theme/src/components/react-carousel/components/Carousel/renderCarousel.tsx b/packages/react-cap-theme/src/components/react-carousel/components/Carousel/renderCarousel.tsx new file mode 100644 index 000000000..b617d495c --- /dev/null +++ b/packages/react-cap-theme/src/components/react-carousel/components/Carousel/renderCarousel.tsx @@ -0,0 +1,28 @@ +/** @jsxRuntime automatic */ +/** @jsxImportSource @fluentui/react-jsx-runtime */ +import { + type CarouselSlots, + renderCarousel_unstable, +} from '@fluentui/react-carousel'; +import { assertSlots, type JSXElement } from '@fluentui/react-utilities'; +import type { + CarouselContextValues, + CarouselState, +} from '../../../../customStyleHooks/react-carousel'; +import { CarouselProvider } from './CarouselContext'; + +export const renderCarousel = ( + state: CarouselState, + contextValues: CarouselContextValues +): JSXElement => { + const { layout, ...fluentState } = state; + void layout; + + assertSlots(state); + + return ( + + {renderCarousel_unstable(fluentState, contextValues)} + + ); +}; diff --git a/packages/react-cap-theme/src/components/react-carousel/components/Carousel/useCarousel.ts b/packages/react-cap-theme/src/components/react-carousel/components/Carousel/useCarousel.ts new file mode 100644 index 000000000..bc8cd0651 --- /dev/null +++ b/packages/react-cap-theme/src/components/react-carousel/components/Carousel/useCarousel.ts @@ -0,0 +1,16 @@ +import { useCarousel_unstable } from '@fluentui/react-carousel'; +import type * as React from 'react'; +import type { + CarouselProps, + CarouselState, +} from '../../../../customStyleHooks/react-carousel'; + +export const useCarousel = ( + props: CarouselProps, + ref: React.Ref +): CarouselState => { + const { layout = 'inline', ...fluentProps } = props; + const baseState = useCarousel_unstable(fluentProps, ref); + + return { ...baseState, layout }; +}; diff --git a/packages/react-cap-theme/src/components/react-carousel/components/Carousel/useCarouselContextValues.ts b/packages/react-cap-theme/src/components/react-carousel/components/Carousel/useCarouselContextValues.ts new file mode 100644 index 000000000..b8b9eb91e --- /dev/null +++ b/packages/react-cap-theme/src/components/react-carousel/components/Carousel/useCarouselContextValues.ts @@ -0,0 +1,52 @@ +import * as React from 'react'; +import type { + CarouselContextValues, + CarouselState, +} from '../../../../customStyleHooks/react-carousel'; + +export function useCarouselContextValues( + state: CarouselState +): CarouselContextValues { + const { + activeIndex, + circular, + containerRef, + layout, + viewportRef, + enableAutoplay, + resetAutoplay, + selectPageByElement, + selectPageByDirection, + selectPageByIndex, + subscribeForValues, + } = state; + + const carousel = React.useMemo( + () => ({ + activeIndex, + circular, + containerRef, + viewportRef, + enableAutoplay, + resetAutoplay, + selectPageByElement, + selectPageByDirection, + selectPageByIndex, + subscribeForValues, + }), + [ + activeIndex, + circular, + containerRef, + viewportRef, + enableAutoplay, + resetAutoplay, + selectPageByElement, + selectPageByDirection, + selectPageByIndex, + subscribeForValues, + ] + ); + + return { carousel, layout }; +} diff --git a/packages/react-cap-theme/src/components/react-carousel/components/CarouselAutoplayButton/CarouselAutoplayButton.tsx b/packages/react-cap-theme/src/components/react-carousel/components/CarouselAutoplayButton/CarouselAutoplayButton.tsx new file mode 100644 index 000000000..4217c9c9a --- /dev/null +++ b/packages/react-cap-theme/src/components/react-carousel/components/CarouselAutoplayButton/CarouselAutoplayButton.tsx @@ -0,0 +1,21 @@ +import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts'; +import type { ForwardRefComponent } from '@fluentui/react-utilities'; +import { forwardRef } from 'react'; +import { renderCarouselAutoplayButton } from './renderCarouselAutoplayButton'; +import { useCarouselAutoplayButton } from './useCarouselAutoplayButton'; +import type { CarouselAutoplayButtonProps } from '../../../../customStyleHooks/react-carousel'; +import { useCarouselAutoplayButtonStyles } from '../../../../customStyleHooks/react-carousel'; + +export const CarouselAutoplayButton: ForwardRefComponent = + forwardRef((props, ref) => { + const state = useCarouselAutoplayButton(props, ref); + + useCarouselAutoplayButtonStyles(state); + useCustomStyleHook_unstable('useCarouselAutoplayButtonStyles_unstable')( + state + ); + + return renderCarouselAutoplayButton(state); + }); + +CarouselAutoplayButton.displayName = 'CarouselAutoplayButton'; diff --git a/packages/react-cap-theme/src/components/react-carousel/components/CarouselAutoplayButton/renderCarouselAutoplayButton.tsx b/packages/react-cap-theme/src/components/react-carousel/components/CarouselAutoplayButton/renderCarouselAutoplayButton.tsx new file mode 100644 index 000000000..e5bb67308 --- /dev/null +++ b/packages/react-cap-theme/src/components/react-carousel/components/CarouselAutoplayButton/renderCarouselAutoplayButton.tsx @@ -0,0 +1,14 @@ +import type { JSXElement } from '@fluentui/react-utilities'; +import { assertSlots } from '@fluentui/react-utilities'; +import { renderButton } from '../../../react-button'; +import type { + CarouselAutoplayButtonSlots, + CarouselAutoplayButtonState, +} from '../../../../customStyleHooks/react-carousel'; + +export const renderCarouselAutoplayButton = ( + state: CarouselAutoplayButtonState +): JSXElement => { + assertSlots(state); + return renderButton(state); +}; diff --git a/packages/react-cap-theme/src/components/react-carousel/components/CarouselAutoplayButton/useCarouselAutoplayButton.ts b/packages/react-cap-theme/src/components/react-carousel/components/CarouselAutoplayButton/useCarouselAutoplayButton.ts new file mode 100644 index 000000000..4763025c5 --- /dev/null +++ b/packages/react-cap-theme/src/components/react-carousel/components/CarouselAutoplayButton/useCarouselAutoplayButton.ts @@ -0,0 +1,36 @@ +import type { ARIAButtonElement } from '@fluentui/react-aria'; +import { useCarouselAutoplayButton_unstable } from '@fluentui/react-carousel'; +import { useToggleButton } from '../../../react-button'; +import type { + CarouselAutoplayButtonProps, + CarouselAutoplayButtonState, +} from '../../../../customStyleHooks/react-carousel'; +import type { CarouselAutoplayButtonProps as FluentCarouselAutoplayButtonProps } from '@fluentui/react-carousel'; + +export const useCarouselAutoplayButton = ( + props: CarouselAutoplayButtonProps, + ref: React.Ref +): CarouselAutoplayButtonState => { + const fluentState = useCarouselAutoplayButton_unstable( + props as FluentCarouselAutoplayButtonProps, + ref + ); + const { onCheckedChange, checked, defaultChecked, ...buttonProps } = props; + void checked; + void defaultChecked; + void onCheckedChange; + + return { + ...useToggleButton( + { + icon: fluentState.icon, + ...buttonProps, + checked: fluentState.checked, + onClick: fluentState.root.onClick as React.MouseEventHandler< + HTMLAnchorElement & HTMLButtonElement + >, + }, + ref as React.Ref + ), + }; +}; diff --git a/packages/react-cap-theme/src/components/react-carousel/components/CarouselButton/CarouselButton.tsx b/packages/react-cap-theme/src/components/react-carousel/components/CarouselButton/CarouselButton.tsx new file mode 100644 index 000000000..d7b0b3ac5 --- /dev/null +++ b/packages/react-cap-theme/src/components/react-carousel/components/CarouselButton/CarouselButton.tsx @@ -0,0 +1,19 @@ +import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts'; +import type { ForwardRefComponent } from '@fluentui/react-utilities'; +import { forwardRef } from 'react'; +import { renderCarouselButton } from './renderCarouselButton'; +import { useCarouselButton } from './useCarouselButton'; +import type { CarouselButtonProps } from '../../../../customStyleHooks/react-carousel'; +import { useCarouselButtonStyles } from '../../../../customStyleHooks/react-carousel'; + +export const CarouselButton: ForwardRefComponent = + forwardRef((props, ref) => { + const state = useCarouselButton(props, ref); + + useCarouselButtonStyles(state); + useCustomStyleHook_unstable('useCarouselButtonStyles_unstable')(state); + + return renderCarouselButton(state); + }); + +CarouselButton.displayName = 'CarouselButton'; diff --git a/packages/react-cap-theme/src/components/react-carousel/components/CarouselButton/renderCarouselButton.tsx b/packages/react-cap-theme/src/components/react-carousel/components/CarouselButton/renderCarouselButton.tsx new file mode 100644 index 000000000..c9482ba13 --- /dev/null +++ b/packages/react-cap-theme/src/components/react-carousel/components/CarouselButton/renderCarouselButton.tsx @@ -0,0 +1,14 @@ +import type { JSXElement } from '@fluentui/react-utilities'; +import { assertSlots } from '@fluentui/react-utilities'; +import { renderButton } from '../../../react-button'; +import type { + CarouselButtonSlots, + CarouselButtonState, +} from '../../../../customStyleHooks/react-carousel'; + +export const renderCarouselButton = ( + state: CarouselButtonState +): JSXElement => { + assertSlots(state); + return renderButton(state); +}; diff --git a/packages/react-cap-theme/src/components/react-carousel/components/CarouselButton/useCarouselButton.ts b/packages/react-cap-theme/src/components/react-carousel/components/CarouselButton/useCarouselButton.ts new file mode 100644 index 000000000..2921362ec --- /dev/null +++ b/packages/react-cap-theme/src/components/react-carousel/components/CarouselButton/useCarouselButton.ts @@ -0,0 +1,41 @@ +import type { ARIAButtonElement } from '@fluentui/react-aria'; +import { useCarouselButton_unstable } from '@fluentui/react-carousel'; +import { useButton } from '../../../react-button'; +import type { Ref } from 'react'; +import type { + CarouselButtonProps, + CarouselButtonState, +} from '../../../../customStyleHooks/react-carousel'; +import type { CarouselButtonProps as FluentCarouselButtonProps } from '@fluentui/react-carousel'; + +export const useCarouselButton = ( + props: CarouselButtonProps, + ref: Ref +): CarouselButtonState => { + const fluentState = useCarouselButton_unstable( + props as FluentCarouselButtonProps, + ref + ); + const { navType = 'next', ...buttonProps } = props; + void navType; + + const buttonState = useButton( + { + icon: fluentState.icon, + disabled: fluentState.disabled, + tabIndex: fluentState.root.tabIndex, + 'aria-disabled': fluentState.root['aria-disabled'], + appearance: 'subtle', + ...buttonProps, + onClick: fluentState.root.onClick as React.MouseEventHandler< + HTMLButtonElement & HTMLAnchorElement + >, + }, + fluentState.root.ref as Ref + ); + + return { + ...fluentState, + ...buttonState, + }; +}; diff --git a/packages/react-cap-theme/src/components/react-carousel/components/CarouselNav/CarouselNav.tsx b/packages/react-cap-theme/src/components/react-carousel/components/CarouselNav/CarouselNav.tsx new file mode 100644 index 000000000..b3847c2c9 --- /dev/null +++ b/packages/react-cap-theme/src/components/react-carousel/components/CarouselNav/CarouselNav.tsx @@ -0,0 +1,21 @@ +import { renderCarouselNav_unstable } from '@fluentui/react-carousel'; +import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts'; +import type { ForwardRefComponent } from '@fluentui/react-utilities'; +import * as React from 'react'; +import { useCarouselNav } from './useCarouselNav'; +import { useCarouselNavContextValues } from './useCarouselNavContextValues'; +import type { CarouselNavProps } from '../../../../customStyleHooks/react-carousel'; +import { useCarouselNavStyles } from '../../../../customStyleHooks/react-carousel'; + +export const CarouselNav: ForwardRefComponent = + React.forwardRef((props, ref) => { + const state = useCarouselNav(props, ref); + const contextValues = useCarouselNavContextValues(state); + + useCarouselNavStyles(state); + useCustomStyleHook_unstable('useCarouselNavStyles_unstable')(state); + + return renderCarouselNav_unstable(state, contextValues); + }); + +CarouselNav.displayName = 'CarouselNav'; diff --git a/packages/react-cap-theme/src/components/react-carousel/components/CarouselNav/useCarouselNav.ts b/packages/react-cap-theme/src/components/react-carousel/components/CarouselNav/useCarouselNav.ts new file mode 100644 index 000000000..decc68416 --- /dev/null +++ b/packages/react-cap-theme/src/components/react-carousel/components/CarouselNav/useCarouselNav.ts @@ -0,0 +1,15 @@ +import { useCarouselNav_unstable } from '@fluentui/react-carousel'; +import type { + CarouselNavProps, + CarouselNavState, +} from '../../../../customStyleHooks/react-carousel'; + +export const useCarouselNav = ( + props: CarouselNavProps, + ref: React.Ref +): CarouselNavState => { + const { density = 'compact' } = props; + const baseState = useCarouselNav_unstable(props, ref); + + return { ...baseState, density }; +}; diff --git a/packages/react-cap-theme/src/components/react-carousel/components/CarouselNav/useCarouselNavContextValues.ts b/packages/react-cap-theme/src/components/react-carousel/components/CarouselNav/useCarouselNavContextValues.ts new file mode 100644 index 000000000..0ce792bf1 --- /dev/null +++ b/packages/react-cap-theme/src/components/react-carousel/components/CarouselNav/useCarouselNavContextValues.ts @@ -0,0 +1,14 @@ +import * as React from 'react'; +import type { + CarouselNavContextValues, + CarouselNavState, +} from '../../../../customStyleHooks/react-carousel'; + +export const useCarouselNavContextValues = ( + state: CarouselNavState +): CarouselNavContextValues => { + const { appearance } = state; + const carouselNav = React.useMemo(() => ({ appearance }), [appearance]); + + return { carouselNav }; +}; diff --git a/packages/react-cap-theme/src/components/react-carousel/components/CarouselNavContainer/CarouselNavContainer.tsx b/packages/react-cap-theme/src/components/react-carousel/components/CarouselNavContainer/CarouselNavContainer.tsx new file mode 100644 index 000000000..cf9139627 --- /dev/null +++ b/packages/react-cap-theme/src/components/react-carousel/components/CarouselNavContainer/CarouselNavContainer.tsx @@ -0,0 +1,19 @@ +import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts'; +import type { ForwardRefComponent } from '@fluentui/react-utilities'; +import * as React from 'react'; +import { renderCarouselNavContainer } from './renderCarouselNavContainer'; +import { useCarouselNavContainer } from './useCarouselNavContainer'; +import type { CarouselNavContainerProps } from '../../../../customStyleHooks/react-carousel'; +import { useCarouselNavContainerStyles } from '../../../../customStyleHooks/react-carousel'; + +export const CarouselNavContainer: ForwardRefComponent = + React.forwardRef((props, ref) => { + const state = useCarouselNavContainer(props, ref); + useCarouselNavContainerStyles(state); + useCustomStyleHook_unstable('useCarouselNavContainerStyles_unstable')( + state + ); + return renderCarouselNavContainer(state); + }); + +CarouselNavContainer.displayName = 'CarouselNavContainer'; diff --git a/packages/react-cap-theme/src/components/react-carousel/components/CarouselNavContainer/renderCarouselNavContainer.tsx b/packages/react-cap-theme/src/components/react-carousel/components/CarouselNavContainer/renderCarouselNavContainer.tsx new file mode 100644 index 000000000..0c9ad5e24 --- /dev/null +++ b/packages/react-cap-theme/src/components/react-carousel/components/CarouselNavContainer/renderCarouselNavContainer.tsx @@ -0,0 +1,37 @@ +/** @jsxRuntime automatic */ +/** @jsxImportSource @fluentui/react-jsx-runtime */ +import { assertSlots, type JSXElement } from '@fluentui/react-utilities'; +import type { + CarouselNavContainerSlots, + CarouselNavContainerState, +} from '../../../../customStyleHooks/react-carousel'; + +export const renderCarouselNavContainer = ( + state: CarouselNavContainerState +): JSXElement => { + assertSlots(state); + + return ( + + {!state.autoplayTooltip && state.autoplay && } + {state.autoplayTooltip && state.autoplay && ( + + + + )} + {!state.prevTooltip && state.prev && } + {state.prevTooltip && state.prev && ( + + + + )} + {state.root.children} + {!state.nextTooltip && state.next && } + {state.nextTooltip && state.next && ( + + + + )} + + ); +}; diff --git a/packages/react-cap-theme/src/components/react-carousel/components/CarouselNavContainer/useCarouselNavContainer.ts b/packages/react-cap-theme/src/components/react-carousel/components/CarouselNavContainer/useCarouselNavContainer.ts new file mode 100644 index 000000000..24b611394 --- /dev/null +++ b/packages/react-cap-theme/src/components/react-carousel/components/CarouselNavContainer/useCarouselNavContainer.ts @@ -0,0 +1,49 @@ +import type { CarouselNavContainerProps as FluentCarouselNavContainerProps } from '@fluentui/react-carousel'; +import { useCarouselNavContainer_unstable } from '@fluentui/react-carousel'; +import { slot } from '@fluentui/react-utilities'; +import { CAPTooltip } from '../../../react-tooltip'; +import { useCarouselContext } from '../Carousel/CarouselContext'; +import type { + CarouselNavContainerProps, + CarouselNavContainerState, +} from '../../../../customStyleHooks/react-carousel'; + +export const useCarouselNavContainer = ( + props: CarouselNavContainerProps, + ref: React.Ref +): CarouselNavContainerState => { + const layout = useCarouselContext((ctx) => props.layout ?? ctx.layout); + const baseLayout = layout === 'inline-expanded' ? 'overlay-expanded' : layout; + const baseState = useCarouselNavContainer_unstable( + { ...props, layout: baseLayout } as FluentCarouselNavContainerProps, + ref + ); + + baseState.components.nextTooltip = CAPTooltip; + baseState.components.prevTooltip = CAPTooltip; + baseState.components.autoplayTooltip = CAPTooltip; + const nextTooltip = slot.optional(props.nextTooltip, { + defaultProps: {}, + elementType: CAPTooltip, + renderByDefault: false, + }); + const prevTooltip = slot.optional(props.prevTooltip, { + defaultProps: {}, + elementType: CAPTooltip, + renderByDefault: false, + }); + const autoplayTooltip = slot.optional(props.autoplayTooltip, { + defaultProps: {}, + elementType: CAPTooltip, + renderByDefault: false, + }); + + return { + ...baseState, + autoplayTooltip, + baseLayout, + layout, + nextTooltip, + prevTooltip, + }; +}; diff --git a/packages/react-cap-theme/src/components/react-carousel/index.ts b/packages/react-cap-theme/src/components/react-carousel/index.ts new file mode 100644 index 000000000..565df5a75 --- /dev/null +++ b/packages/react-cap-theme/src/components/react-carousel/index.ts @@ -0,0 +1,5 @@ +export { Carousel as CAPCarousel } from './components/Carousel/Carousel'; +export { CarouselAutoplayButton as CAPCarouselAutoplayButton } from './components/CarouselAutoplayButton/CarouselAutoplayButton'; +export { CarouselButton as CAPCarouselButton } from './components/CarouselButton/CarouselButton'; +export { CarouselNav as CAPCarouselNav } from './components/CarouselNav/CarouselNav'; +export { CarouselNavContainer as CAPCarouselNavContainer } from './components/CarouselNavContainer/CarouselNavContainer'; diff --git a/packages/react-cap-theme/src/customStyleHooks/react-carousel/index.ts b/packages/react-cap-theme/src/customStyleHooks/react-carousel/index.ts index 5f853910e..06413056b 100644 --- a/packages/react-cap-theme/src/customStyleHooks/react-carousel/index.ts +++ b/packages/react-cap-theme/src/customStyleHooks/react-carousel/index.ts @@ -1,18 +1,38 @@ export { useCarouselStyles } from './components/Carousel/useCarouselStyles.styles'; -export type { CarouselState } from './components/Carousel/Carousel.types'; +export type { + CarouselContextValues, + CarouselProps, + CarouselState, +} from './components/Carousel/Carousel.types'; export { useCarouselAutoplayButtonStyles } from './components/CarouselAutoplayButton/useCarouselAutoplayButtonStyles.styles'; -export type { CarouselAutoplayButtonState } from './components/CarouselAutoplayButton/CarouselAutoplayButton.types'; +export type { + CarouselAutoplayButtonProps, + CarouselAutoplayButtonSlots, + CarouselAutoplayButtonState, +} from './components/CarouselAutoplayButton/CarouselAutoplayButton.types'; export { useCarouselButtonStyles } from './components/CarouselButton/useCarouselButtonStyles.styles'; -export type { CarouselButtonState } from './components/CarouselButton/CarouselButton.types'; +export type { + CarouselButtonProps, + CarouselButtonSlots, + CarouselButtonState, +} from './components/CarouselButton/CarouselButton.types'; export { useCarouselNavStyles } from './components/CarouselNav/useCarouselNavStyles.styles'; -export type { CarouselNavState } from './components/CarouselNav/CarouselNav.types'; +export type { + CarouselNavContextValues, + CarouselNavProps, + CarouselNavState, +} from './components/CarouselNav/CarouselNav.types'; export { useCarouselNavButtonStyles } from './components/CarouselNavButton/useCarouselNavButtonStyles.styles'; export { useCarouselNavContainerStyles } from './components/CarouselNavContainer/useCarouselNavContainerStyles.styles'; -export type { CarouselNavContainerState } from './components/CarouselNavContainer/CarouselNavContainer.types'; +export type { + CarouselNavContainerProps, + CarouselNavContainerSlots, + CarouselNavContainerState, +} from './components/CarouselNavContainer/CarouselNavContainer.types'; export { useCarouselNavImageButtonStyles } from './components/CarouselNavImageButton/useCarouselNavImageButtonStyles.styles'; From dda299261f4c038d140558cb9553f86742804aa0 Mon Sep 17 00:00:00 2001 From: EnricoGianoglio Date: Sat, 18 Apr 2026 02:08:52 +0200 Subject: [PATCH 09/12] export CAP DialogTitle wrapper --- .../react-cap-theme/.storybook/preview.tsx | 2 +- .../components/DialogTitle/DialogTitle.tsx | 22 +++++++++++++++++++ .../components/DialogTitle/useDialogTitle.tsx | 4 ++-- .../src/components/react-dialog/index.ts | 1 + .../customStyleHooks/react-dialog/index.ts | 1 + 5 files changed, 27 insertions(+), 3 deletions(-) create mode 100644 packages/react-cap-theme/src/components/react-dialog/components/DialogTitle/DialogTitle.tsx rename packages/react-cap-theme/src/{customStyleHooks => components}/react-dialog/components/DialogTitle/useDialogTitle.tsx (92%) create mode 100644 packages/react-cap-theme/src/components/react-dialog/index.ts diff --git a/packages/react-cap-theme/.storybook/preview.tsx b/packages/react-cap-theme/.storybook/preview.tsx index a02d2b638..047ceeaea 100644 --- a/packages/react-cap-theme/.storybook/preview.tsx +++ b/packages/react-cap-theme/.storybook/preview.tsx @@ -9,7 +9,7 @@ import { CAP_STYLE_HOOKS } from '../src/index'; import type { JSXElement } from '@fluentui/react-utilities'; import type { Preview, StoryFn } from '@storybook/react'; -import { CAPTokens } from '../src/components/tokens/types'; +import { CAPTokens } from '../src/customStyleHooks/tokens/types'; const capTheme: Record = { ...webLightTheme, diff --git a/packages/react-cap-theme/src/components/react-dialog/components/DialogTitle/DialogTitle.tsx b/packages/react-cap-theme/src/components/react-dialog/components/DialogTitle/DialogTitle.tsx new file mode 100644 index 000000000..e4d2f147c --- /dev/null +++ b/packages/react-cap-theme/src/components/react-dialog/components/DialogTitle/DialogTitle.tsx @@ -0,0 +1,22 @@ +import { + renderDialogTitle_unstable, + useDialogTitleStyles_unstable, +} from '@fluentui/react-dialog'; +import type { ForwardRefComponent } from '@fluentui/react-utilities'; +import { forwardRef } from 'react'; +import { useDialogTitle } from './useDialogTitle'; +import { useDialogTitleStyles as useCAPDialogTitleStyles } from '../../../../customStyleHooks/react-dialog'; +import type { DialogTitleProps } from '../../../../customStyleHooks/react-dialog'; + +export const DialogTitle: ForwardRefComponent = forwardRef( + (props, ref) => { + const state = useDialogTitle(props, ref); + + useDialogTitleStyles_unstable(state); + useCAPDialogTitleStyles(state); + + return renderDialogTitle_unstable(state); + } +); + +DialogTitle.displayName = 'DialogTitle'; diff --git a/packages/react-cap-theme/src/customStyleHooks/react-dialog/components/DialogTitle/useDialogTitle.tsx b/packages/react-cap-theme/src/components/react-dialog/components/DialogTitle/useDialogTitle.tsx similarity index 92% rename from packages/react-cap-theme/src/customStyleHooks/react-dialog/components/DialogTitle/useDialogTitle.tsx rename to packages/react-cap-theme/src/components/react-dialog/components/DialogTitle/useDialogTitle.tsx index 1988c1910..ca660ded8 100644 --- a/packages/react-cap-theme/src/customStyleHooks/react-dialog/components/DialogTitle/useDialogTitle.tsx +++ b/packages/react-cap-theme/src/components/react-dialog/components/DialogTitle/useDialogTitle.tsx @@ -1,5 +1,4 @@ import { Button } from '@fluentui/react-button'; -import type { DialogTitleState } from '@fluentui/react-dialog'; import { DialogTrigger, useDialogContext_unstable, @@ -7,7 +6,8 @@ import { } from '@fluentui/react-dialog'; import { Dismiss16Regular } from '@fluentui/react-icons'; import * as React from 'react'; -import type { DialogTitleProps } from './DialogTitle.types'; +import type { DialogTitleState } from '@fluentui/react-dialog'; +import type { DialogTitleProps } from '../../../../customStyleHooks/react-dialog'; export const useDialogTitle = ( props: DialogTitleProps, diff --git a/packages/react-cap-theme/src/components/react-dialog/index.ts b/packages/react-cap-theme/src/components/react-dialog/index.ts new file mode 100644 index 000000000..a6bef8094 --- /dev/null +++ b/packages/react-cap-theme/src/components/react-dialog/index.ts @@ -0,0 +1 @@ +export { DialogTitle as CAPDialogTitle } from './components/DialogTitle/DialogTitle'; diff --git a/packages/react-cap-theme/src/customStyleHooks/react-dialog/index.ts b/packages/react-cap-theme/src/customStyleHooks/react-dialog/index.ts index 73536a20f..198b6c158 100644 --- a/packages/react-cap-theme/src/customStyleHooks/react-dialog/index.ts +++ b/packages/react-cap-theme/src/customStyleHooks/react-dialog/index.ts @@ -2,3 +2,4 @@ export { useDialogActionsStyles } from './components/DialogActions/useDialogActi export { useDialogBodyStyles } from './components/DialogBody/useDialogBodyStyles.styles'; export { useDialogSurfaceStyles } from './components/DialogSurface/useDialogSurfaceStyles.styles'; export { useDialogTitleStyles } from './components/DialogTitle/useDialogTitleStyles.styles'; +export type { DialogTitleProps } from './components/DialogTitle/DialogTitle.types'; From d9042109ef695192f656bde5bf876fa527cf69ae Mon Sep 17 00:00:00 2001 From: EnricoGianoglio Date: Sat, 18 Apr 2026 02:15:49 +0200 Subject: [PATCH 10/12] export CAP InlineDrawer wrapper --- .../components/InlineDrawer/InlineDrawer.tsx | 24 +++++++++++++++++++ .../InlineDrawer/useInlineDrawer.ts | 15 ++++++++++++ .../src/components/react-drawer/index.ts | 1 + .../customStyleHooks/react-drawer/index.ts | 5 +++- 4 files changed, 44 insertions(+), 1 deletion(-) create mode 100644 packages/react-cap-theme/src/components/react-drawer/components/InlineDrawer/InlineDrawer.tsx create mode 100644 packages/react-cap-theme/src/components/react-drawer/components/InlineDrawer/useInlineDrawer.ts create mode 100644 packages/react-cap-theme/src/components/react-drawer/index.ts diff --git a/packages/react-cap-theme/src/components/react-drawer/components/InlineDrawer/InlineDrawer.tsx b/packages/react-cap-theme/src/components/react-drawer/components/InlineDrawer/InlineDrawer.tsx new file mode 100644 index 000000000..ab33d23be --- /dev/null +++ b/packages/react-cap-theme/src/components/react-drawer/components/InlineDrawer/InlineDrawer.tsx @@ -0,0 +1,24 @@ +import { + renderInlineDrawer_unstable, + useDrawerContextValue, +} from '@fluentui/react-drawer'; +import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts'; +import type { ForwardRefComponent } from '@fluentui/react-utilities'; +import { forwardRef } from 'react'; +import { useInlineDrawer } from './useInlineDrawer'; +import type { InlineDrawerProps } from '../../../../customStyleHooks/react-drawer'; +import { useInlineDrawerStyles } from '../../../../customStyleHooks/react-drawer'; + +export const InlineDrawer: ForwardRefComponent = forwardRef( + (props, ref) => { + const state = useInlineDrawer(props, ref); + const contextValue = useDrawerContextValue(); + + useInlineDrawerStyles(state); + useCustomStyleHook_unstable('useInlineDrawerStyles_unstable')(state); + + return renderInlineDrawer_unstable(state, contextValue); + } +); + +InlineDrawer.displayName = 'InlineDrawer'; diff --git a/packages/react-cap-theme/src/components/react-drawer/components/InlineDrawer/useInlineDrawer.ts b/packages/react-cap-theme/src/components/react-drawer/components/InlineDrawer/useInlineDrawer.ts new file mode 100644 index 000000000..48deabd89 --- /dev/null +++ b/packages/react-cap-theme/src/components/react-drawer/components/InlineDrawer/useInlineDrawer.ts @@ -0,0 +1,15 @@ +import { useInlineDrawer_unstable } from '@fluentui/react-drawer'; +import type * as React from 'react'; +import type { + InlineDrawerProps, + InlineDrawerState, +} from '../../../../customStyleHooks/react-drawer'; + +export const useInlineDrawer = ( + props: InlineDrawerProps, + ref: React.Ref +): InlineDrawerState => { + const { appearance = 'solid' } = props; + const state = useInlineDrawer_unstable(props, ref); + return { ...state, appearance }; +}; diff --git a/packages/react-cap-theme/src/components/react-drawer/index.ts b/packages/react-cap-theme/src/components/react-drawer/index.ts new file mode 100644 index 000000000..76aca7d5b --- /dev/null +++ b/packages/react-cap-theme/src/components/react-drawer/index.ts @@ -0,0 +1 @@ +export { InlineDrawer as CAPInlineDrawer } from './components/InlineDrawer/InlineDrawer'; diff --git a/packages/react-cap-theme/src/customStyleHooks/react-drawer/index.ts b/packages/react-cap-theme/src/customStyleHooks/react-drawer/index.ts index 4b3a22375..bac85e790 100644 --- a/packages/react-cap-theme/src/customStyleHooks/react-drawer/index.ts +++ b/packages/react-cap-theme/src/customStyleHooks/react-drawer/index.ts @@ -4,5 +4,8 @@ export { useDrawerHeaderStyles } from './components/DrawerHeader/useDrawerHeader export { useDrawerHeaderNavigationStyles } from './components/DrawerHeaderNavigation/useDrawerHeaderNavigationStyles.styles'; export { useDrawerHeaderTitleStyles } from './components/DrawerHeaderTitle/useDrawerHeaderTitleStyles.styles'; export { useInlineDrawerStyles } from './components/InlineDrawer/useInlineDrawerStyles.styles'; -export type { InlineDrawerState } from './components/InlineDrawer/InlineDrawer.types'; +export type { + InlineDrawerProps, + InlineDrawerState, +} from './components/InlineDrawer/InlineDrawer.types'; export { useOverlayDrawerStyles } from './components/OverlayDrawer/useOverlayDrawerStyles.styles'; From a1c2ab56ad0cb47bff914a5d1f0fae13c478e578 Mon Sep 17 00:00:00 2001 From: EnricoGianoglio Date: Sat, 18 Apr 2026 02:22:59 +0200 Subject: [PATCH 11/12] export CAP Input wrapper --- .../react-input/components/Input/Input.tsx | 32 +++++++++++++++++++ .../react-input/components/Input/useInput.ts | 28 ++++++++++++++++ .../src/components/react-input/index.ts | 1 + 3 files changed, 61 insertions(+) create mode 100644 packages/react-cap-theme/src/components/react-input/components/Input/Input.tsx create mode 100644 packages/react-cap-theme/src/components/react-input/components/Input/useInput.ts create mode 100644 packages/react-cap-theme/src/components/react-input/index.ts diff --git a/packages/react-cap-theme/src/components/react-input/components/Input/Input.tsx b/packages/react-cap-theme/src/components/react-input/components/Input/Input.tsx new file mode 100644 index 000000000..f93a1ba4a --- /dev/null +++ b/packages/react-cap-theme/src/components/react-input/components/Input/Input.tsx @@ -0,0 +1,32 @@ +import { forwardRef } from 'react'; +import { + renderInput_unstable, + useInputStyles_unstable, +} from '@fluentui/react-input'; +import type { ForwardRefComponent } from '@fluentui/react-utilities'; +import { useInput } from './useInput'; +import type { InputProps } from '../../../../customStyleHooks/react-input'; +import { useInputStyles as useCAPInputStyles } from '../../../../customStyleHooks/react-input'; + +/** + * The Input component allows people to enter and edit text. + * + * @example + * ```tsx + * + * ``` + * + * @alpha + */ +export const Input: ForwardRefComponent = forwardRef( + (props, ref) => { + const state = useInput(props, ref); + + useInputStyles_unstable(state); + useCAPInputStyles(state); + + return renderInput_unstable(state); + } +); + +Input.displayName = 'Input'; diff --git a/packages/react-cap-theme/src/components/react-input/components/Input/useInput.ts b/packages/react-cap-theme/src/components/react-input/components/Input/useInput.ts new file mode 100644 index 000000000..c10983a7f --- /dev/null +++ b/packages/react-cap-theme/src/components/react-input/components/Input/useInput.ts @@ -0,0 +1,28 @@ +import type { ForwardedRef } from 'react'; +import { useInput_unstable } from '@fluentui/react-input'; + +import type { + InputProps, + InputState, +} from '../../../../customStyleHooks/react-input'; + +/** + * Create the state required to render Input component. + * @param props - Props from this instance of Input + * @param ref - Reference to the HTMLInputElement (not root) of Input + * @returns The Input state object + * @alpha + */ +export const useInput = ( + props: InputProps, + ref: ForwardedRef +): InputState => { + const { color, appearance, ...rest } = props; + const baseState = useInput_unstable({ appearance, ...rest }, ref); + + return { + ...baseState, + color: color ?? 'brand', + appearance: appearance ?? 'outline', + }; +}; diff --git a/packages/react-cap-theme/src/components/react-input/index.ts b/packages/react-cap-theme/src/components/react-input/index.ts new file mode 100644 index 000000000..fc54f0a9e --- /dev/null +++ b/packages/react-cap-theme/src/components/react-input/index.ts @@ -0,0 +1 @@ +export { Input as CAPInput } from './components/Input/Input'; From 361974d527cce517bb6ff93705de47b1893a8231 Mon Sep 17 00:00:00 2001 From: EnricoGianoglio Date: Mon, 20 Apr 2026 15:51:45 +0200 Subject: [PATCH 12/12] refactoring InlineDrawer --- .../react-drawer/components/InlineDrawer/InlineDrawer.tsx | 8 ++++---- .../components/PopoverSurface/PopoverSurface.tsx | 2 -- .../react-tooltip/components/Tooltip/Tooltip.tsx | 1 + 3 files changed, 5 insertions(+), 6 deletions(-) diff --git a/packages/react-cap-theme/src/components/react-drawer/components/InlineDrawer/InlineDrawer.tsx b/packages/react-cap-theme/src/components/react-drawer/components/InlineDrawer/InlineDrawer.tsx index ab33d23be..6f181b1af 100644 --- a/packages/react-cap-theme/src/components/react-drawer/components/InlineDrawer/InlineDrawer.tsx +++ b/packages/react-cap-theme/src/components/react-drawer/components/InlineDrawer/InlineDrawer.tsx @@ -1,21 +1,21 @@ import { renderInlineDrawer_unstable, useDrawerContextValue, + useInlineDrawerStyles_unstable, } from '@fluentui/react-drawer'; -import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts'; import type { ForwardRefComponent } from '@fluentui/react-utilities'; import { forwardRef } from 'react'; import { useInlineDrawer } from './useInlineDrawer'; import type { InlineDrawerProps } from '../../../../customStyleHooks/react-drawer'; -import { useInlineDrawerStyles } from '../../../../customStyleHooks/react-drawer'; +import { useInlineDrawerStyles as useCAPInlineDrawerStyles } from '../../../../customStyleHooks/react-drawer'; export const InlineDrawer: ForwardRefComponent = forwardRef( (props, ref) => { const state = useInlineDrawer(props, ref); const contextValue = useDrawerContextValue(); - useInlineDrawerStyles(state); - useCustomStyleHook_unstable('useInlineDrawerStyles_unstable')(state); + useInlineDrawerStyles_unstable(state); + useCAPInlineDrawerStyles(state); return renderInlineDrawer_unstable(state, contextValue); } diff --git a/packages/react-cap-theme/src/components/react-popover/components/PopoverSurface/PopoverSurface.tsx b/packages/react-cap-theme/src/components/react-popover/components/PopoverSurface/PopoverSurface.tsx index 686184d9c..244f4fa07 100644 --- a/packages/react-cap-theme/src/components/react-popover/components/PopoverSurface/PopoverSurface.tsx +++ b/packages/react-cap-theme/src/components/react-popover/components/PopoverSurface/PopoverSurface.tsx @@ -3,7 +3,6 @@ import { renderPopoverSurface_unstable, usePopoverSurface_unstable, } from '@fluentui/react-popover'; -// import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts'; import type { ForwardRefComponent } from '@fluentui/react-utilities'; import * as React from 'react'; import { usePopoverSurfaceStyles_unstable } from '@fluentui/react-components'; @@ -14,7 +13,6 @@ export const PopoverSurface: ForwardRefComponent = const state = usePopoverSurface_unstable(props, ref); usePopoverSurfaceStyles_unstable(state); usePopoverSurfaceStyles(state); - // useCustomStyleHook_unstable('usePopoverSurfaceStyles_unstable')(state); return renderPopoverSurface_unstable(state); }); diff --git a/packages/react-cap-theme/src/components/react-tooltip/components/Tooltip/Tooltip.tsx b/packages/react-cap-theme/src/components/react-tooltip/components/Tooltip/Tooltip.tsx index 8226ada25..4020cefde 100644 --- a/packages/react-cap-theme/src/components/react-tooltip/components/Tooltip/Tooltip.tsx +++ b/packages/react-cap-theme/src/components/react-tooltip/components/Tooltip/Tooltip.tsx @@ -8,6 +8,7 @@ import { useTooltipStyles as useCAPTooltipStyles } from '../../../../customStyle export const Tooltip: React.FC = (props) => { const state = useTooltip_unstable(props); + useTooltipStyles_unstable(state); useCAPTooltipStyles(state);