diff --git a/change/@fluentui-react-accordion-7979203f-77d1-434d-83a4-d6c6b82cff92.json b/change/@fluentui-react-accordion-7979203f-77d1-434d-83a4-d6c6b82cff92.json new file mode 100644 index 0000000000000..3463b2cf93384 --- /dev/null +++ b/change/@fluentui-react-accordion-7979203f-77d1-434d-83a4-d6c6b82cff92.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "Update to use single hook selector", + "packageName": "@fluentui/react-accordion", + "email": "gcox@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-avatar-410511e9-48ba-4a8e-ad67-49398e93c4c9.json b/change/@fluentui-react-avatar-410511e9-48ba-4a8e-ad67-49398e93c4c9.json new file mode 100644 index 0000000000000..c2c8e04131ffc --- /dev/null +++ b/change/@fluentui-react-avatar-410511e9-48ba-4a8e-ad67-49398e93c4c9.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "Update to use single hook selector", + "packageName": "@fluentui/react-avatar", + "email": "gcox@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-badge-02074864-69a0-4b49-8806-ca7fbee6a2ff.json b/change/@fluentui-react-badge-02074864-69a0-4b49-8806-ca7fbee6a2ff.json new file mode 100644 index 0000000000000..f03fb4c705e66 --- /dev/null +++ b/change/@fluentui-react-badge-02074864-69a0-4b49-8806-ca7fbee6a2ff.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "Update to use single hook selector", + "packageName": "@fluentui/react-badge", + "email": "gcox@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-button-a418e04f-553e-43b3-995a-6ccbcf1ea081.json b/change/@fluentui-react-button-a418e04f-553e-43b3-995a-6ccbcf1ea081.json new file mode 100644 index 0000000000000..d1a0df06f2bef --- /dev/null +++ b/change/@fluentui-react-button-a418e04f-553e-43b3-995a-6ccbcf1ea081.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "Update to use single hook selector", + "packageName": "@fluentui/react-button", + "email": "gcox@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-checkbox-154b90a6-17c3-4c5d-8609-fc1438460273.json b/change/@fluentui-react-checkbox-154b90a6-17c3-4c5d-8609-fc1438460273.json new file mode 100644 index 0000000000000..c2b2809916306 --- /dev/null +++ b/change/@fluentui-react-checkbox-154b90a6-17c3-4c5d-8609-fc1438460273.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "Update to use single hook selector", + "packageName": "@fluentui/react-checkbox", + "email": "gcox@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-combobox-cac5541c-d84d-430d-95d0-e54a46aab88f.json b/change/@fluentui-react-combobox-cac5541c-d84d-430d-95d0-e54a46aab88f.json new file mode 100644 index 0000000000000..8b13665aa657b --- /dev/null +++ b/change/@fluentui-react-combobox-cac5541c-d84d-430d-95d0-e54a46aab88f.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "Update to use single hook selector", + "packageName": "@fluentui/react-combobox", + "email": "gcox@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-dialog-91eec82a-0ce5-472b-a3ee-fffe02628a9e.json b/change/@fluentui-react-dialog-91eec82a-0ce5-472b-a3ee-fffe02628a9e.json new file mode 100644 index 0000000000000..2c661414b7338 --- /dev/null +++ b/change/@fluentui-react-dialog-91eec82a-0ce5-472b-a3ee-fffe02628a9e.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "Update to use single hook selector", + "packageName": "@fluentui/react-dialog", + "email": "gcox@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-divider-70c81c00-b1cf-4322-8344-dc0ea8613f3b.json b/change/@fluentui-react-divider-70c81c00-b1cf-4322-8344-dc0ea8613f3b.json new file mode 100644 index 0000000000000..019c6084ba3d7 --- /dev/null +++ b/change/@fluentui-react-divider-70c81c00-b1cf-4322-8344-dc0ea8613f3b.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "Update to use single hook selector", + "packageName": "@fluentui/react-divider", + "email": "gcox@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-image-963a7dc3-d44a-40fd-838c-5d2746dfdb06.json b/change/@fluentui-react-image-963a7dc3-d44a-40fd-838c-5d2746dfdb06.json new file mode 100644 index 0000000000000..6f3b5f836ce5e --- /dev/null +++ b/change/@fluentui-react-image-963a7dc3-d44a-40fd-838c-5d2746dfdb06.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "Update to use single hook selector", + "packageName": "@fluentui/react-image", + "email": "gcox@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-input-74af82c7-b28a-4aa5-92a6-f14903faeece.json b/change/@fluentui-react-input-74af82c7-b28a-4aa5-92a6-f14903faeece.json new file mode 100644 index 0000000000000..4968a5179f9a3 --- /dev/null +++ b/change/@fluentui-react-input-74af82c7-b28a-4aa5-92a6-f14903faeece.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "Update to use single hook selector", + "packageName": "@fluentui/react-input", + "email": "gcox@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-label-7d5e12b6-6fc3-450a-a2f6-49ce816011fa.json b/change/@fluentui-react-label-7d5e12b6-6fc3-450a-a2f6-49ce816011fa.json new file mode 100644 index 0000000000000..6575838bcaf72 --- /dev/null +++ b/change/@fluentui-react-label-7d5e12b6-6fc3-450a-a2f6-49ce816011fa.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "Update to use single hook selector", + "packageName": "@fluentui/react-label", + "email": "gcox@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-menu-4cdd5c1d-0404-420f-b984-861538a209a8.json b/change/@fluentui-react-menu-4cdd5c1d-0404-420f-b984-861538a209a8.json new file mode 100644 index 0000000000000..d3cba56624a25 --- /dev/null +++ b/change/@fluentui-react-menu-4cdd5c1d-0404-420f-b984-861538a209a8.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "Update to use single hook selector", + "packageName": "@fluentui/react-menu", + "email": "gcox@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-persona-5acc929d-c45f-4975-bc3a-fcdc3b643769.json b/change/@fluentui-react-persona-5acc929d-c45f-4975-bc3a-fcdc3b643769.json new file mode 100644 index 0000000000000..0610f1a0a52b4 --- /dev/null +++ b/change/@fluentui-react-persona-5acc929d-c45f-4975-bc3a-fcdc3b643769.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "Update to use single hook selector", + "packageName": "@fluentui/react-persona", + "email": "gcox@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-popover-327e6424-ea83-444e-a490-abe84aa5cccf.json b/change/@fluentui-react-popover-327e6424-ea83-444e-a490-abe84aa5cccf.json new file mode 100644 index 0000000000000..4b15573eaf324 --- /dev/null +++ b/change/@fluentui-react-popover-327e6424-ea83-444e-a490-abe84aa5cccf.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "Update to use single hook selector", + "packageName": "@fluentui/react-popover", + "email": "gcox@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-progress-1df15ae2-e24b-4805-b369-4b67395cfcf6.json b/change/@fluentui-react-progress-1df15ae2-e24b-4805-b369-4b67395cfcf6.json new file mode 100644 index 0000000000000..a48ec6bfdffdc --- /dev/null +++ b/change/@fluentui-react-progress-1df15ae2-e24b-4805-b369-4b67395cfcf6.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "Update to use single hook selector", + "packageName": "@fluentui/react-progress", + "email": "gcox@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-provider-52269bd1-3dfa-4225-a528-7edc96211a5f.json b/change/@fluentui-react-provider-52269bd1-3dfa-4225-a528-7edc96211a5f.json new file mode 100644 index 0000000000000..7dcdfa61964bd --- /dev/null +++ b/change/@fluentui-react-provider-52269bd1-3dfa-4225-a528-7edc96211a5f.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "Update to use single hook selector", + "packageName": "@fluentui/react-provider", + "email": "gcox@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-radio-1392ccd9-a854-44f1-b915-908c11e414aa.json b/change/@fluentui-react-radio-1392ccd9-a854-44f1-b915-908c11e414aa.json new file mode 100644 index 0000000000000..858e4ab380a41 --- /dev/null +++ b/change/@fluentui-react-radio-1392ccd9-a854-44f1-b915-908c11e414aa.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "Update to use single hook selector", + "packageName": "@fluentui/react-radio", + "email": "gcox@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-select-52a430c2-9512-46ee-9dd1-261a2659f86b.json b/change/@fluentui-react-select-52a430c2-9512-46ee-9dd1-261a2659f86b.json new file mode 100644 index 0000000000000..0771f885c1c43 --- /dev/null +++ b/change/@fluentui-react-select-52a430c2-9512-46ee-9dd1-261a2659f86b.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "Update to use single hook selector", + "packageName": "@fluentui/react-select", + "email": "gcox@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-shared-contexts-3de40e97-26fd-408f-985c-50fded79967c.json b/change/@fluentui-react-shared-contexts-3de40e97-26fd-408f-985c-50fded79967c.json new file mode 100644 index 0000000000000..e3be2f6198f41 --- /dev/null +++ b/change/@fluentui-react-shared-contexts-3de40e97-26fd-408f-985c-50fded79967c.json @@ -0,0 +1,7 @@ +{ + "type": "minor", + "comment": "Updated to provide single hook for noop tree-shaking", + "packageName": "@fluentui/react-shared-contexts", + "email": "gcox@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-slider-d6ce4d43-f065-4f30-8712-9967e3316358.json b/change/@fluentui-react-slider-d6ce4d43-f065-4f30-8712-9967e3316358.json new file mode 100644 index 0000000000000..d3d09020cd430 --- /dev/null +++ b/change/@fluentui-react-slider-d6ce4d43-f065-4f30-8712-9967e3316358.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "Update to use single hook selector", + "packageName": "@fluentui/react-slider", + "email": "gcox@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-spinbutton-77ad3b93-a4fa-4bd1-bc51-397a4b9cd82a.json b/change/@fluentui-react-spinbutton-77ad3b93-a4fa-4bd1-bc51-397a4b9cd82a.json new file mode 100644 index 0000000000000..91dd75d65f57d --- /dev/null +++ b/change/@fluentui-react-spinbutton-77ad3b93-a4fa-4bd1-bc51-397a4b9cd82a.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "Update to use single hook selector", + "packageName": "@fluentui/react-spinbutton", + "email": "gcox@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-spinner-8a73a610-d0d6-4e11-9494-104bd865147d.json b/change/@fluentui-react-spinner-8a73a610-d0d6-4e11-9494-104bd865147d.json new file mode 100644 index 0000000000000..7839392d7b884 --- /dev/null +++ b/change/@fluentui-react-spinner-8a73a610-d0d6-4e11-9494-104bd865147d.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "Update to use single hook selector", + "packageName": "@fluentui/react-spinner", + "email": "gcox@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-switch-5a80e932-3327-4c33-9fd7-e18705834ee1.json b/change/@fluentui-react-switch-5a80e932-3327-4c33-9fd7-e18705834ee1.json new file mode 100644 index 0000000000000..cefd7db9862cf --- /dev/null +++ b/change/@fluentui-react-switch-5a80e932-3327-4c33-9fd7-e18705834ee1.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "Update to use single hook selector", + "packageName": "@fluentui/react-switch", + "email": "gcox@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-table-01084d02-30e2-4c40-87e3-1712e09feb03.json b/change/@fluentui-react-table-01084d02-30e2-4c40-87e3-1712e09feb03.json new file mode 100644 index 0000000000000..b6ad23886558e --- /dev/null +++ b/change/@fluentui-react-table-01084d02-30e2-4c40-87e3-1712e09feb03.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "Update to use single hook selector", + "packageName": "@fluentui/react-table", + "email": "gcox@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-tabs-18090de5-624d-4d4b-a292-8857a76026f6.json b/change/@fluentui-react-tabs-18090de5-624d-4d4b-a292-8857a76026f6.json new file mode 100644 index 0000000000000..ea33de5eac06b --- /dev/null +++ b/change/@fluentui-react-tabs-18090de5-624d-4d4b-a292-8857a76026f6.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "Update to use single hook selector", + "packageName": "@fluentui/react-tabs", + "email": "gcox@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-text-2011f896-0e0d-4c45-89e7-66b4763fb5da.json b/change/@fluentui-react-text-2011f896-0e0d-4c45-89e7-66b4763fb5da.json new file mode 100644 index 0000000000000..fee35cce429f8 --- /dev/null +++ b/change/@fluentui-react-text-2011f896-0e0d-4c45-89e7-66b4763fb5da.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "Update to use single hook selector", + "packageName": "@fluentui/react-text", + "email": "gcox@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-textarea-27974bbc-d69c-4c5b-9ad8-5f331a25fcd7.json b/change/@fluentui-react-textarea-27974bbc-d69c-4c5b-9ad8-5f331a25fcd7.json new file mode 100644 index 0000000000000..50f40886f1b84 --- /dev/null +++ b/change/@fluentui-react-textarea-27974bbc-d69c-4c5b-9ad8-5f331a25fcd7.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "Update to use single hook selector", + "packageName": "@fluentui/react-textarea", + "email": "gcox@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-toolbar-9055847a-c5db-4e39-9320-34bb4d94525f.json b/change/@fluentui-react-toolbar-9055847a-c5db-4e39-9320-34bb4d94525f.json new file mode 100644 index 0000000000000..a871025dbc6f3 --- /dev/null +++ b/change/@fluentui-react-toolbar-9055847a-c5db-4e39-9320-34bb4d94525f.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "Update to use single hook selector", + "packageName": "@fluentui/react-toolbar", + "email": "gcox@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-tooltip-db63968f-9b0e-4bfd-ae01-f690f2f933b0.json b/change/@fluentui-react-tooltip-db63968f-9b0e-4bfd-ae01-f690f2f933b0.json new file mode 100644 index 0000000000000..82f4dc6e6cad5 --- /dev/null +++ b/change/@fluentui-react-tooltip-db63968f-9b0e-4bfd-ae01-f690f2f933b0.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "Update to use single hook selector", + "packageName": "@fluentui/react-tooltip", + "email": "gcox@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/packages/react-components/react-accordion/src/components/Accordion/Accordion.tsx b/packages/react-components/react-accordion/src/components/Accordion/Accordion.tsx index 7e570969ae0de..96541a5b99bde 100644 --- a/packages/react-components/react-accordion/src/components/Accordion/Accordion.tsx +++ b/packages/react-components/react-accordion/src/components/Accordion/Accordion.tsx @@ -2,7 +2,7 @@ import * as React from 'react'; import { renderAccordion_unstable } from './renderAccordion'; import { useAccordion_unstable } from './useAccordion'; import { useAccordionContextValues_unstable } from './useAccordionContextValues'; -import { useCustomStyleHooks_unstable } from '@fluentui/react-shared-contexts'; +import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts'; import { useAccordionStyles_unstable } from './useAccordionStyles'; import type { AccordionProps } from './Accordion.types'; import type { ForwardRefComponent } from '@fluentui/react-utilities'; @@ -17,8 +17,7 @@ export const Accordion: ForwardRefComponent = React.forwardRef = React. useAccordionHeaderStyles_unstable(state); - const { useAccordionHeaderStyles_unstable: useCustomStyles } = useCustomStyleHooks_unstable(); - useCustomStyles(state); + useCustomStyleHook_unstable('useAccordionHeaderStyles_unstable')(state); return renderAccordionHeader_unstable(state, contextValues); }); diff --git a/packages/react-components/react-accordion/src/components/AccordionItem/AccordionItem.tsx b/packages/react-components/react-accordion/src/components/AccordionItem/AccordionItem.tsx index 73badf5a935c9..31dd4c02890fa 100644 --- a/packages/react-components/react-accordion/src/components/AccordionItem/AccordionItem.tsx +++ b/packages/react-components/react-accordion/src/components/AccordionItem/AccordionItem.tsx @@ -2,7 +2,7 @@ import * as React from 'react'; import { useAccordionItem_unstable } from './useAccordionItem'; import { useAccordionItemContextValues_unstable } from './useAccordionItemContextValues'; import { renderAccordionItem_unstable } from './renderAccordionItem'; -import { useCustomStyleHooks_unstable } from '@fluentui/react-shared-contexts'; +import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts'; import { useAccordionItemStyles_unstable } from './useAccordionItemStyles'; import type { AccordionItemProps } from './AccordionItem.types'; import type { ForwardRefComponent } from '@fluentui/react-utilities'; @@ -16,8 +16,7 @@ export const AccordionItem: ForwardRefComponent = React.forw useAccordionItemStyles_unstable(state); - const { useAccordionItemStyles_unstable: useCustomStyles } = useCustomStyleHooks_unstable(); - useCustomStyles(state); + useCustomStyleHook_unstable('useAccordionItemStyles_unstable')(state); return renderAccordionItem_unstable(state, contextValues); }); diff --git a/packages/react-components/react-accordion/src/components/AccordionPanel/AccordionPanel.tsx b/packages/react-components/react-accordion/src/components/AccordionPanel/AccordionPanel.tsx index b997e9047bb4e..1bb9be54771ba 100644 --- a/packages/react-components/react-accordion/src/components/AccordionPanel/AccordionPanel.tsx +++ b/packages/react-components/react-accordion/src/components/AccordionPanel/AccordionPanel.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import { useAccordionPanel_unstable } from './useAccordionPanel'; import { renderAccordionPanel_unstable } from './renderAccordionPanel'; -import { useCustomStyleHooks_unstable } from '@fluentui/react-shared-contexts'; +import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts'; import { useAccordionPanelStyles_unstable } from './useAccordionPanelStyles'; import type { AccordionPanelProps } from './AccordionPanel.types'; import type { ForwardRefComponent } from '@fluentui/react-utilities'; @@ -14,8 +14,7 @@ export const AccordionPanel: ForwardRefComponent = React.fo useAccordionPanelStyles_unstable(state); - const { useAccordionPanelStyles_unstable: useCustomStyles } = useCustomStyleHooks_unstable(); - useCustomStyles(state); + useCustomStyleHook_unstable('useAccordionPanelStyles_unstable')(state); return renderAccordionPanel_unstable(state); }); diff --git a/packages/react-components/react-avatar/src/components/Avatar/Avatar.tsx b/packages/react-components/react-avatar/src/components/Avatar/Avatar.tsx index 1ca28ec370bf9..923e6f9079e51 100644 --- a/packages/react-components/react-avatar/src/components/Avatar/Avatar.tsx +++ b/packages/react-components/react-avatar/src/components/Avatar/Avatar.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import { renderAvatar_unstable } from './renderAvatar'; import { useAvatar_unstable } from './useAvatar'; -import { useCustomStyleHooks_unstable } from '@fluentui/react-shared-contexts'; +import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts'; import { useAvatarStyles_unstable } from './useAvatarStyles'; import type { AvatarProps } from './Avatar.types'; import type { ForwardRefComponent } from '@fluentui/react-utilities'; @@ -11,8 +11,7 @@ export const Avatar: ForwardRefComponent = React.forwardRef((props, useAvatarStyles_unstable(state); - const { useAvatarStyles_unstable: useCustomStyles } = useCustomStyleHooks_unstable(); - useCustomStyles(state); + useCustomStyleHook_unstable('useAvatarStyles_unstable')(state); return renderAvatar_unstable(state); }); diff --git a/packages/react-components/react-avatar/src/components/AvatarGroup/AvatarGroup.tsx b/packages/react-components/react-avatar/src/components/AvatarGroup/AvatarGroup.tsx index 6749474de179f..424dada196e5f 100644 --- a/packages/react-components/react-avatar/src/components/AvatarGroup/AvatarGroup.tsx +++ b/packages/react-components/react-avatar/src/components/AvatarGroup/AvatarGroup.tsx @@ -2,7 +2,7 @@ import * as React from 'react'; import { renderAvatarGroup_unstable } from './renderAvatarGroup'; import { useAvatarGroup_unstable } from './useAvatarGroup'; import { useAvatarGroupContextValues } from './useAvatarGroupContextValues'; -import { useCustomStyleHooks_unstable } from '@fluentui/react-shared-contexts'; +import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts'; import { useAvatarGroupStyles_unstable } from './useAvatarGroupStyles'; import type { AvatarGroupProps } from './AvatarGroup.types'; import type { ForwardRefComponent } from '@fluentui/react-utilities'; @@ -17,8 +17,7 @@ export const AvatarGroup: ForwardRefComponent = React.forwardR useAvatarGroupStyles_unstable(state); - const { useAvatarGroupStyles_unstable: useCustomStyles } = useCustomStyleHooks_unstable(); - useCustomStyles(state); + useCustomStyleHook_unstable('useAvatarGroupStyles_unstable')(state); return renderAvatarGroup_unstable(state, contextValues); }); diff --git a/packages/react-components/react-avatar/src/components/AvatarGroupItem/AvatarGroupItem.tsx b/packages/react-components/react-avatar/src/components/AvatarGroupItem/AvatarGroupItem.tsx index 5b726da4ba642..aafb752bc596f 100644 --- a/packages/react-components/react-avatar/src/components/AvatarGroupItem/AvatarGroupItem.tsx +++ b/packages/react-components/react-avatar/src/components/AvatarGroupItem/AvatarGroupItem.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import { renderAvatarGroupItem_unstable } from './renderAvatarGroupItem'; import { useAvatarGroupItem_unstable } from './useAvatarGroupItem'; -import { useCustomStyleHooks_unstable } from '@fluentui/react-shared-contexts'; +import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts'; import { useAvatarGroupItemStyles_unstable } from './useAvatarGroupItemStyles'; import type { AvatarGroupItemProps } from './AvatarGroupItem.types'; import type { ForwardRefComponent } from '@fluentui/react-utilities'; @@ -15,8 +15,7 @@ export const AvatarGroupItem: ForwardRefComponent = React. useAvatarGroupItemStyles_unstable(state); - const { useAvatarGroupItemStyles_unstable: useCustomStyles } = useCustomStyleHooks_unstable(); - useCustomStyles(state); + useCustomStyleHook_unstable('useAvatarGroupItemStyles_unstable')(state); return renderAvatarGroupItem_unstable(state); }); diff --git a/packages/react-components/react-avatar/src/components/AvatarGroupPopover/AvatarGroupPopover.tsx b/packages/react-components/react-avatar/src/components/AvatarGroupPopover/AvatarGroupPopover.tsx index 45fe10e600e55..21a2a0ddb935c 100644 --- a/packages/react-components/react-avatar/src/components/AvatarGroupPopover/AvatarGroupPopover.tsx +++ b/packages/react-components/react-avatar/src/components/AvatarGroupPopover/AvatarGroupPopover.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import { renderAvatarGroupPopover_unstable } from './renderAvatarGroupPopover'; import { useAvatarGroupPopoverContextValues } from './useAvatarGroupPopoverContextValues'; -import { useCustomStyleHooks_unstable } from '@fluentui/react-shared-contexts'; +import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts'; import { useAvatarGroupPopover_unstable } from './useAvatarGroupPopover'; import { useAvatarGroupPopoverStyles_unstable } from './useAvatarGroupPopoverStyles'; import type { AvatarGroupPopoverProps } from './AvatarGroupPopover.types'; @@ -15,8 +15,7 @@ export const AvatarGroupPopover: React.FC = props => { useAvatarGroupPopoverStyles_unstable(state); - const { useAvatarGroupPopoverStyles_unstable: useCustomStyles } = useCustomStyleHooks_unstable(); - useCustomStyles(state); + useCustomStyleHook_unstable('useAvatarGroupPopoverStyles_unstable')(state); return renderAvatarGroupPopover_unstable(state, contextValues); }; diff --git a/packages/react-components/react-badge/src/components/Badge/Badge.tsx b/packages/react-components/react-badge/src/components/Badge/Badge.tsx index 48d7f3bd96f8c..50fd66812c03a 100644 --- a/packages/react-components/react-badge/src/components/Badge/Badge.tsx +++ b/packages/react-components/react-badge/src/components/Badge/Badge.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import { useBadge_unstable } from './useBadge'; import { useBadgeStyles_unstable } from './useBadgeStyles'; -import { useCustomStyleHooks_unstable } from '@fluentui/react-shared-contexts'; +import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts'; import { renderBadge_unstable } from './renderBadge'; import type { BadgeProps } from './Badge.types'; import type { ForwardRefComponent } from '@fluentui/react-utilities'; @@ -14,8 +14,7 @@ export const Badge: ForwardRefComponent = React.forwardRef((props, r useBadgeStyles_unstable(state); - const { useBadgeStyles_unstable: useCustomStyles } = useCustomStyleHooks_unstable(); - useCustomStyles(state); + useCustomStyleHook_unstable('useBadgeStyles_unstable')(state); return renderBadge_unstable(state); }); diff --git a/packages/react-components/react-badge/src/components/CounterBadge/CounterBadge.tsx b/packages/react-components/react-badge/src/components/CounterBadge/CounterBadge.tsx index a858c04623105..eb3443ecf6020 100644 --- a/packages/react-components/react-badge/src/components/CounterBadge/CounterBadge.tsx +++ b/packages/react-components/react-badge/src/components/CounterBadge/CounterBadge.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import { useCounterBadge_unstable } from './useCounterBadge'; import { useCounterBadgeStyles_unstable } from './useCounterBadgeStyles'; -import { useCustomStyleHooks_unstable } from '@fluentui/react-shared-contexts'; +import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts'; import { renderBadge_unstable } from '../Badge/index'; import type { CounterBadgeProps } from './CounterBadge.types'; import type { ForwardRefComponent } from '@fluentui/react-utilities'; @@ -14,8 +14,7 @@ export const CounterBadge: ForwardRefComponent = React.forwar useCounterBadgeStyles_unstable(state); - const { useCounterBadgeStyles_unstable: useCustomStyles } = useCustomStyleHooks_unstable(); - useCustomStyles(state); + useCustomStyleHook_unstable('useCounterBadgeStyles_unstable')(state); return renderBadge_unstable(state); }); diff --git a/packages/react-components/react-badge/src/components/PresenceBadge/PresenceBadge.tsx b/packages/react-components/react-badge/src/components/PresenceBadge/PresenceBadge.tsx index 137950ee85b09..ec47b57beca8a 100644 --- a/packages/react-components/react-badge/src/components/PresenceBadge/PresenceBadge.tsx +++ b/packages/react-components/react-badge/src/components/PresenceBadge/PresenceBadge.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import { usePresenceBadge_unstable } from './usePresenceBadge'; import { usePresenceBadgeStyles_unstable } from './usePresenceBadgeStyles'; -import { useCustomStyleHooks_unstable } from '@fluentui/react-shared-contexts'; +import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts'; import { renderBadge_unstable } from '../../Badge'; import type { PresenceBadgeProps } from './PresenceBadge.types'; import type { ForwardRefComponent } from '@fluentui/react-utilities'; @@ -14,8 +14,7 @@ export const PresenceBadge: ForwardRefComponent = React.forw usePresenceBadgeStyles_unstable(state); - const { usePresenceBadgeStyles_unstable: useCustomStyles } = useCustomStyleHooks_unstable(); - useCustomStyles(state); + useCustomStyleHook_unstable('usePresenceBadgeStyles_unstable')(state); return renderBadge_unstable(state); }); diff --git a/packages/react-components/react-breadcrumb/src/components/BreadcrumbDivider/BreadcrumbDivider.tsx b/packages/react-components/react-breadcrumb/src/components/BreadcrumbDivider/BreadcrumbDivider.tsx index 09e558ff9d2c8..802946382f33a 100644 --- a/packages/react-components/react-breadcrumb/src/components/BreadcrumbDivider/BreadcrumbDivider.tsx +++ b/packages/react-components/react-breadcrumb/src/components/BreadcrumbDivider/BreadcrumbDivider.tsx @@ -4,7 +4,6 @@ import { renderBreadcrumbDivider_unstable } from './renderBreadcrumbDivider'; import { useBreadcrumbDividerStyles_unstable } from './useBreadcrumbDividerStyles'; import type { BreadcrumbDividerProps } from './BreadcrumbDivider.types'; import type { ForwardRefComponent } from '@fluentui/react-utilities'; -import { useCustomStyleHooks_unstable } from '@fluentui/react-shared-contexts'; /** * BreadcrumbDivider component - TODO: add more docs @@ -14,9 +13,6 @@ export const BreadcrumbDivider: ForwardRefComponent = Re useBreadcrumbDividerStyles_unstable(state); - const { useTextStyles_unstable: useCustomStyles } = useCustomStyleHooks_unstable(); - useCustomStyles(state); - return renderBreadcrumbDivider_unstable(state); }); diff --git a/packages/react-components/react-breadcrumb/src/components/BreadcrumbItem/BreadcrumbItem.tsx b/packages/react-components/react-breadcrumb/src/components/BreadcrumbItem/BreadcrumbItem.tsx index 4ff447e07b3b1..f4146c74b7bc6 100644 --- a/packages/react-components/react-breadcrumb/src/components/BreadcrumbItem/BreadcrumbItem.tsx +++ b/packages/react-components/react-breadcrumb/src/components/BreadcrumbItem/BreadcrumbItem.tsx @@ -4,7 +4,6 @@ import { renderBreadcrumbItem_unstable } from './renderBreadcrumbItem'; import { useBreadcrumbItemStyles_unstable } from './useBreadcrumbItemStyles'; import type { BreadcrumbItemProps } from './BreadcrumbItem.types'; import type { ForwardRefComponent } from '@fluentui/react-utilities'; -import { useCustomStyleHooks_unstable } from '@fluentui/react-shared-contexts'; /** * BreadcrumbItem component - TODO: add more docs @@ -14,9 +13,6 @@ export const BreadcrumbItem: ForwardRefComponent = React.fo useBreadcrumbItemStyles_unstable(state); - const { useTextStyles_unstable: useCustomStyles } = useCustomStyleHooks_unstable(); - useCustomStyles(state); - return renderBreadcrumbItem_unstable(state); }); diff --git a/packages/react-components/react-button/src/components/Button/Button.tsx b/packages/react-components/react-button/src/components/Button/Button.tsx index e1fc1e70b871d..9e608b6130cdf 100644 --- a/packages/react-components/react-button/src/components/Button/Button.tsx +++ b/packages/react-components/react-button/src/components/Button/Button.tsx @@ -4,7 +4,7 @@ import { useButton_unstable } from './useButton'; import { useButtonStyles_unstable } from './useButtonStyles'; import type { ButtonProps } from './Button.types'; import type { ForwardRefComponent } from '@fluentui/react-utilities'; -import { useCustomStyleHooks_unstable } from '@fluentui/react-shared-contexts'; +import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts'; /** * Buttons give people a way to trigger an action. @@ -14,8 +14,7 @@ export const Button: ForwardRefComponent = React.forwardRef((props, useButtonStyles_unstable(state); - const { useButtonStyles_unstable: useCustomStyles } = useCustomStyleHooks_unstable(); - useCustomStyles(state); + useCustomStyleHook_unstable('useButtonStyles_unstable')(state); return renderButton_unstable(state); // Casting is required due to lack of distributive union to support unions on @types/react diff --git a/packages/react-components/react-button/src/components/CompoundButton/CompoundButton.tsx b/packages/react-components/react-button/src/components/CompoundButton/CompoundButton.tsx index 9af761b8f906e..950655c931eaf 100644 --- a/packages/react-components/react-button/src/components/CompoundButton/CompoundButton.tsx +++ b/packages/react-components/react-button/src/components/CompoundButton/CompoundButton.tsx @@ -4,7 +4,7 @@ import { useCompoundButton_unstable } from './useCompoundButton'; import { useCompoundButtonStyles_unstable } from './useCompoundButtonStyles'; import type { ForwardRefComponent } from '@fluentui/react-utilities'; import type { CompoundButtonProps } from './CompoundButton.types'; -import { useCustomStyleHooks_unstable } from '@fluentui/react-shared-contexts'; +import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts'; /** * CompoundButtons are buttons that can have secondary content that adds extra information to the user. @@ -14,8 +14,7 @@ export const CompoundButton: ForwardRefComponent = React.fo useCompoundButtonStyles_unstable(state); - const { useCompoundButtonStyles_unstable: useCustomStyles } = useCustomStyleHooks_unstable(); - useCustomStyles(state); + useCustomStyleHook_unstable('useCompoundButtonStyles_unstable')(state); return renderCompoundButton_unstable(state); // Casting is required due to lack of distributive union to support unions on @types/react diff --git a/packages/react-components/react-button/src/components/MenuButton/MenuButton.tsx b/packages/react-components/react-button/src/components/MenuButton/MenuButton.tsx index 7646b0e3737e7..c08ced5c95bf0 100644 --- a/packages/react-components/react-button/src/components/MenuButton/MenuButton.tsx +++ b/packages/react-components/react-button/src/components/MenuButton/MenuButton.tsx @@ -4,7 +4,7 @@ import { useMenuButton_unstable } from './useMenuButton'; import { useMenuButtonStyles_unstable } from './useMenuButtonStyles'; import type { MenuButtonProps } from './MenuButton.types'; import type { ForwardRefComponent } from '@fluentui/react-utilities'; -import { useCustomStyleHooks_unstable } from '@fluentui/react-shared-contexts'; +import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts'; /** * MenuButtons are buttons that have a chevron icon after the button contents and are usually clicked to open/close @@ -15,8 +15,7 @@ export const MenuButton: ForwardRefComponent = React.forwardRef useMenuButtonStyles_unstable(state); - const { useMenuButtonStyles_unstable: useCustomStyles } = useCustomStyleHooks_unstable(); - useCustomStyles(state); + useCustomStyleHook_unstable('useMenuButtonStyles_unstable')(state); return renderMenuButton_unstable(state); // Casting is required due to lack of distributive union to support unions on @types/react diff --git a/packages/react-components/react-button/src/components/SplitButton/SplitButton.tsx b/packages/react-components/react-button/src/components/SplitButton/SplitButton.tsx index ec7c3fc661b63..1efd20161e41b 100644 --- a/packages/react-components/react-button/src/components/SplitButton/SplitButton.tsx +++ b/packages/react-components/react-button/src/components/SplitButton/SplitButton.tsx @@ -4,7 +4,7 @@ import { useSplitButton_unstable } from './useSplitButton'; import { useSplitButtonStyles_unstable } from './useSplitButtonStyles'; import type { SplitButtonProps } from './SplitButton.types'; import { ForwardRefComponent } from '@fluentui/react-utilities'; -import { useCustomStyleHooks_unstable } from '@fluentui/react-shared-contexts'; +import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts'; /** * SplitButtons are a grouping of two interactive surfaces where interacting with the first one triggers a primary @@ -15,8 +15,7 @@ export const SplitButton: ForwardRefComponent = React.forwardR useSplitButtonStyles_unstable(state); - const { useSplitButtonStyles_unstable: useCustomStyles } = useCustomStyleHooks_unstable(); - useCustomStyles(state); + useCustomStyleHook_unstable('useSplitButtonStyles_unstable')(state); return renderSplitButton_unstable(state); // Casting is required due to lack of distributive union to support unions on @types/react diff --git a/packages/react-components/react-button/src/components/ToggleButton/ToggleButton.tsx b/packages/react-components/react-button/src/components/ToggleButton/ToggleButton.tsx index bc7f006401781..b3fc2f371ac87 100644 --- a/packages/react-components/react-button/src/components/ToggleButton/ToggleButton.tsx +++ b/packages/react-components/react-button/src/components/ToggleButton/ToggleButton.tsx @@ -4,7 +4,7 @@ import { useToggleButton_unstable } from './useToggleButton'; import { useToggleButtonStyles_unstable } from './useToggleButtonStyles'; import type { ToggleButtonProps } from './ToggleButton.types'; import type { ForwardRefComponent } from '@fluentui/react-utilities'; -import { useCustomStyleHooks_unstable } from '@fluentui/react-shared-contexts'; +import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts'; /** * ToggleButtons are buttons that toggle between two defined states when triggered. @@ -14,8 +14,7 @@ export const ToggleButton: ForwardRefComponent = React.forwar useToggleButtonStyles_unstable(state); - const { useToggleButtonStyles_unstable: useCustomStyles } = useCustomStyleHooks_unstable(); - useCustomStyles(state); + useCustomStyleHook_unstable('useToggleButtonStyles_unstable')(state); return renderToggleButton_unstable(state); // Casting is required due to lack of distributive union to support unions on @types/react diff --git a/packages/react-components/react-checkbox/src/components/Checkbox/Checkbox.tsx b/packages/react-components/react-checkbox/src/components/Checkbox/Checkbox.tsx index d4fa5a1bab26a..f38a43f4b6d80 100644 --- a/packages/react-components/react-checkbox/src/components/Checkbox/Checkbox.tsx +++ b/packages/react-components/react-checkbox/src/components/Checkbox/Checkbox.tsx @@ -4,7 +4,7 @@ import { renderCheckbox_unstable } from './renderCheckbox'; import { useCheckboxStyles_unstable } from './useCheckboxStyles'; import type { CheckboxProps } from './Checkbox.types'; import type { ForwardRefComponent } from '@fluentui/react-utilities'; -import { useCustomStyleHooks_unstable } from '@fluentui/react-shared-contexts'; +import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts'; /** * Checkboxes give people a way to select one or more items from a group, @@ -15,8 +15,7 @@ export const Checkbox: ForwardRefComponent = React.forwardRef((pr useCheckboxStyles_unstable(state); - const { useAccordionHeaderStyles_unstable: useCustomStyles } = useCustomStyleHooks_unstable(); - useCustomStyles(state); + useCustomStyleHook_unstable('useCheckboxStyles_unstable')(state); return renderCheckbox_unstable(state); }); diff --git a/packages/react-components/react-combobox/src/components/Combobox/Combobox.tsx b/packages/react-components/react-combobox/src/components/Combobox/Combobox.tsx index 0b735b7325968..146c04d14bf6b 100644 --- a/packages/react-components/react-combobox/src/components/Combobox/Combobox.tsx +++ b/packages/react-components/react-combobox/src/components/Combobox/Combobox.tsx @@ -5,7 +5,7 @@ import { useComboboxStyles_unstable } from './useComboboxStyles'; import type { ComboboxProps } from './Combobox.types'; import { useComboboxContextValues } from '../../contexts/useComboboxContextValues'; import type { ForwardRefComponent } from '@fluentui/react-utilities'; -import { useCustomStyleHooks_unstable } from '@fluentui/react-shared-contexts'; +import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts'; /** * Combobox component: a selection control that allows users to choose from a set of possible options @@ -16,8 +16,7 @@ export const Combobox: ForwardRefComponent = React.forwardRef((pr useComboboxStyles_unstable(state); - const { useComboboxStyles_unstable: useCustomStyles } = useCustomStyleHooks_unstable(); - useCustomStyles(state); + useCustomStyleHook_unstable('useComboboxStyles_unstable')(state); return renderCombobox_unstable(state, contextValues); }); diff --git a/packages/react-components/react-combobox/src/components/Dropdown/Dropdown.tsx b/packages/react-components/react-combobox/src/components/Dropdown/Dropdown.tsx index 4e5ec5133e972..daed766849a9d 100644 --- a/packages/react-components/react-combobox/src/components/Dropdown/Dropdown.tsx +++ b/packages/react-components/react-combobox/src/components/Dropdown/Dropdown.tsx @@ -5,7 +5,7 @@ import { useDropdownStyles_unstable } from './useDropdownStyles'; import type { DropdownProps } from './Dropdown.types'; import { useComboboxContextValues } from '../../contexts/useComboboxContextValues'; import type { ForwardRefComponent } from '@fluentui/react-utilities'; -import { useCustomStyleHooks_unstable } from '@fluentui/react-shared-contexts'; +import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts'; /** * Dropdown component: a selection control that allows users to choose from a set of possible options @@ -16,8 +16,7 @@ export const Dropdown: ForwardRefComponent = React.forwardRef((pr useDropdownStyles_unstable(state); - const { useDropdownStyles_unstable: useCustomStyles } = useCustomStyleHooks_unstable(); - useCustomStyles(state); + useCustomStyleHook_unstable('useDropdownStyles_unstable')(state); return renderDropdown_unstable(state, contextValues); }); diff --git a/packages/react-components/react-combobox/src/components/Listbox/Listbox.tsx b/packages/react-components/react-combobox/src/components/Listbox/Listbox.tsx index 2f6773ae42845..fb0bc844fcda3 100644 --- a/packages/react-components/react-combobox/src/components/Listbox/Listbox.tsx +++ b/packages/react-components/react-combobox/src/components/Listbox/Listbox.tsx @@ -5,7 +5,7 @@ import { useListboxStyles_unstable } from './useListboxStyles'; import type { ListboxProps } from './Listbox.types'; import { useListboxContextValues } from '../../contexts/useListboxContextValues'; import type { ForwardRefComponent } from '@fluentui/react-utilities'; -import { useCustomStyleHooks_unstable } from '@fluentui/react-shared-contexts'; +import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts'; /** * Listbox component: a standalone selection control, or the popup in a Combobox @@ -16,8 +16,7 @@ export const Listbox: ForwardRefComponent = React.forwardRef((prop useListboxStyles_unstable(state); - const { useListboxStyles_unstable: useCustomStyles } = useCustomStyleHooks_unstable(); - useCustomStyles(state); + useCustomStyleHook_unstable('useListboxStyles_unstable')(state); return renderListbox_unstable(state, contextValues); }); diff --git a/packages/react-components/react-combobox/src/components/Option/Option.tsx b/packages/react-components/react-combobox/src/components/Option/Option.tsx index 041806912d396..906572dc49a98 100644 --- a/packages/react-components/react-combobox/src/components/Option/Option.tsx +++ b/packages/react-components/react-combobox/src/components/Option/Option.tsx @@ -4,7 +4,7 @@ import { renderOption_unstable } from './renderOption'; import { useOptionStyles_unstable } from './useOptionStyles'; import type { OptionProps } from './Option.types'; import type { ForwardRefComponent } from '@fluentui/react-utilities'; -import { useCustomStyleHooks_unstable } from '@fluentui/react-shared-contexts'; +import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts'; /** * Option component: a styled child option of a Combobox @@ -14,8 +14,7 @@ export const Option: ForwardRefComponent = React.forwardRef((props, useOptionStyles_unstable(state); - const { useOptionStyles_unstable: useCustomStyles } = useCustomStyleHooks_unstable(); - useCustomStyles(state); + useCustomStyleHook_unstable('useOptionStyles_unstable')(state); return renderOption_unstable(state); }); diff --git a/packages/react-components/react-combobox/src/components/OptionGroup/OptionGroup.tsx b/packages/react-components/react-combobox/src/components/OptionGroup/OptionGroup.tsx index 106543e867ffb..b5a23c3aa6914 100644 --- a/packages/react-components/react-combobox/src/components/OptionGroup/OptionGroup.tsx +++ b/packages/react-components/react-combobox/src/components/OptionGroup/OptionGroup.tsx @@ -4,7 +4,7 @@ import { renderOptionGroup_unstable } from './renderOptionGroup'; import { useOptionGroupStyles_unstable } from './useOptionGroupStyles'; import type { OptionGroupProps } from './OptionGroup.types'; import type { ForwardRefComponent } from '@fluentui/react-utilities'; -import { useCustomStyleHooks_unstable } from '@fluentui/react-shared-contexts'; +import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts'; /** * OptionGroup component: allows grouping of Option components within a Combobox @@ -14,8 +14,7 @@ export const OptionGroup: ForwardRefComponent = React.forwardR useOptionGroupStyles_unstable(state); - const { useOptionGroupStyles_unstable: useCustomStyles } = useCustomStyleHooks_unstable(); - useCustomStyles(state); + useCustomStyleHook_unstable('useOptionGroupStyles_unstable')(state); return renderOptionGroup_unstable(state); }); diff --git a/packages/react-components/react-dialog/src/components/DialogActions/DialogActions.tsx b/packages/react-components/react-dialog/src/components/DialogActions/DialogActions.tsx index bae52f10611cd..8f6b2ef5c8ed8 100644 --- a/packages/react-components/react-dialog/src/components/DialogActions/DialogActions.tsx +++ b/packages/react-components/react-dialog/src/components/DialogActions/DialogActions.tsx @@ -4,7 +4,7 @@ import { renderDialogActions_unstable } from './renderDialogActions'; import { useDialogActionsStyles_unstable } from './useDialogActionsStyles'; import type { DialogActionsProps } from './DialogActions.types'; import type { ForwardRefComponent } from '@fluentui/react-utilities'; -import { useCustomStyleHooks_unstable } from '@fluentui/react-shared-contexts'; +import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts'; /** * `DialogActions` is a container for the actions of the dialog. @@ -15,8 +15,7 @@ export const DialogActions: ForwardRefComponent = React.forw useDialogActionsStyles_unstable(state); - const { useDialogActionsStyles_unstable: useCustomStyles } = useCustomStyleHooks_unstable(); - useCustomStyles(state); + useCustomStyleHook_unstable('useDialogActionsStyles_unstable')(state); return renderDialogActions_unstable(state); }); diff --git a/packages/react-components/react-dialog/src/components/DialogBody/DialogBody.tsx b/packages/react-components/react-dialog/src/components/DialogBody/DialogBody.tsx index d74b7c6cc21ec..ec18e06c68371 100644 --- a/packages/react-components/react-dialog/src/components/DialogBody/DialogBody.tsx +++ b/packages/react-components/react-dialog/src/components/DialogBody/DialogBody.tsx @@ -4,7 +4,7 @@ import { renderDialogBody_unstable } from './renderDialogBody'; import { useDialogBodyStyles_unstable } from './useDialogBodyStyles'; import type { DialogBodyProps } from './DialogBody.types'; import type { ForwardRefComponent } from '@fluentui/react-utilities'; -import { useCustomStyleHooks_unstable } from '@fluentui/react-shared-contexts'; +import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts'; /** * The `DialogBody` is a container where the content of the dialog is rendered. @@ -15,8 +15,7 @@ export const DialogBody: ForwardRefComponent = React.forwardRef useDialogBodyStyles_unstable(state); - const { useDialogBodyStyles_unstable: useCustomStyles } = useCustomStyleHooks_unstable(); - useCustomStyles(state); + useCustomStyleHook_unstable('useDialogBodyStyles_unstable')(state); return renderDialogBody_unstable(state); }); diff --git a/packages/react-components/react-dialog/src/components/DialogContent/DialogContent.tsx b/packages/react-components/react-dialog/src/components/DialogContent/DialogContent.tsx index 8db28989e55b5..d5a1ff53429a2 100644 --- a/packages/react-components/react-dialog/src/components/DialogContent/DialogContent.tsx +++ b/packages/react-components/react-dialog/src/components/DialogContent/DialogContent.tsx @@ -4,7 +4,7 @@ import { renderDialogContent_unstable } from './renderDialogContent'; import { useDialogContentStyles_unstable } from './useDialogContentStyles'; import type { DialogContentProps } from './DialogContent.types'; import type { ForwardRefComponent } from '@fluentui/react-utilities'; -import { useCustomStyleHooks_unstable } from '@fluentui/react-shared-contexts'; +import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts'; /** * The `DialogContent` is a container where the content of the dialog is rendered. @@ -15,8 +15,7 @@ export const DialogContent: ForwardRefComponent = React.forw useDialogContentStyles_unstable(state); - const { useDialogContentStyles_unstable: useCustomStyles } = useCustomStyleHooks_unstable(); - useCustomStyles(state); + useCustomStyleHook_unstable('useDialogContentStyles_unstable')(state); return renderDialogContent_unstable(state); }); diff --git a/packages/react-components/react-dialog/src/components/DialogSurface/DialogSurface.tsx b/packages/react-components/react-dialog/src/components/DialogSurface/DialogSurface.tsx index fcf304315d9e7..c3fa7e9fca088 100644 --- a/packages/react-components/react-dialog/src/components/DialogSurface/DialogSurface.tsx +++ b/packages/react-components/react-dialog/src/components/DialogSurface/DialogSurface.tsx @@ -5,7 +5,7 @@ import { useDialogSurfaceStyles_unstable } from './useDialogSurfaceStyles'; import type { DialogSurfaceProps } from './DialogSurface.types'; import type { ForwardRefComponent } from '@fluentui/react-utilities'; import { useDialogSurfaceContextValues_unstable } from './useDialogSurfaceContextValues'; -import { useCustomStyleHooks_unstable } from '@fluentui/react-shared-contexts'; +import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts'; /** * DialogSurface component represents the visual part of a `Dialog` as a whole, @@ -17,8 +17,7 @@ export const DialogSurface: ForwardRefComponent = React.forw useDialogSurfaceStyles_unstable(state); - const { useDialogSurfaceStyles_unstable: useCustomStyles } = useCustomStyleHooks_unstable(); - useCustomStyles(state); + useCustomStyleHook_unstable('useDialogSurfaceStyles_unstable')(state); return renderDialogSurface_unstable(state, contextValues); }); diff --git a/packages/react-components/react-dialog/src/components/DialogTitle/DialogTitle.tsx b/packages/react-components/react-dialog/src/components/DialogTitle/DialogTitle.tsx index 37830ae3a156e..7bc0ce7591f56 100644 --- a/packages/react-components/react-dialog/src/components/DialogTitle/DialogTitle.tsx +++ b/packages/react-components/react-dialog/src/components/DialogTitle/DialogTitle.tsx @@ -4,7 +4,7 @@ import { renderDialogTitle_unstable } from './renderDialogTitle'; import { useDialogTitleStyles_unstable } from './useDialogTitleStyles'; import type { DialogTitleProps } from './DialogTitle.types'; import type { ForwardRefComponent } from '@fluentui/react-utilities'; -import { useCustomStyleHooks_unstable } from '@fluentui/react-shared-contexts'; +import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts'; /** * The `DialogTitle` component expects to have a title/header @@ -15,8 +15,7 @@ export const DialogTitle: ForwardRefComponent = React.forwardR useDialogTitleStyles_unstable(state); - const { useDialogTitleStyles_unstable: useCustomStyles } = useCustomStyleHooks_unstable(); - useCustomStyles(state); + useCustomStyleHook_unstable('useDialogTitleStyles_unstable')(state); return renderDialogTitle_unstable(state); }); diff --git a/packages/react-components/react-divider/src/components/Divider/Divider.tsx b/packages/react-components/react-divider/src/components/Divider/Divider.tsx index ff2f2e5822d8f..3e903864c7667 100644 --- a/packages/react-components/react-divider/src/components/Divider/Divider.tsx +++ b/packages/react-components/react-divider/src/components/Divider/Divider.tsx @@ -4,7 +4,7 @@ import { useDivider_unstable } from './useDivider'; import { useDividerStyles_unstable } from './useDividerStyles'; import type { ForwardRefComponent } from '@fluentui/react-utilities'; import type { DividerProps } from './Divider.types'; -import { useCustomStyleHooks_unstable } from '@fluentui/react-shared-contexts'; +import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts'; /** * A divider visually segments content into groups. @@ -14,8 +14,7 @@ export const Divider: ForwardRefComponent = React.forwardRef((prop useDividerStyles_unstable(state); - const { useDividerStyles_unstable: useCustomStyles } = useCustomStyleHooks_unstable(); - useCustomStyles(state); + useCustomStyleHook_unstable('useDividerStyles_unstable')(state); return renderDivider_unstable(state); }); diff --git a/packages/react-components/react-image/src/components/Image/Image.tsx b/packages/react-components/react-image/src/components/Image/Image.tsx index 69965888d83c7..d3340dd4ab5ea 100644 --- a/packages/react-components/react-image/src/components/Image/Image.tsx +++ b/packages/react-components/react-image/src/components/Image/Image.tsx @@ -4,7 +4,7 @@ import { useImage_unstable } from './useImage'; import { useImageStyles_unstable } from './useImageStyles'; import type { ImageProps } from './Image.types'; import type { ForwardRefComponent } from '@fluentui/react-utilities'; -import { useCustomStyleHooks_unstable } from '@fluentui/react-shared-contexts'; +import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts'; /** * The Image component ensures the consistent styling of images. @@ -14,8 +14,7 @@ export const Image: ForwardRefComponent = React.forwardRef((props, r useImageStyles_unstable(state); - const { useImageStyles_unstable: useCustomStyles } = useCustomStyleHooks_unstable(); - useCustomStyles(state); + useCustomStyleHook_unstable('useImageStyles_unstable')(state); return renderImage_unstable(state); }); diff --git a/packages/react-components/react-input/src/components/Input/Input.tsx b/packages/react-components/react-input/src/components/Input/Input.tsx index 4dfd321bd54cc..e8c197cc08837 100644 --- a/packages/react-components/react-input/src/components/Input/Input.tsx +++ b/packages/react-components/react-input/src/components/Input/Input.tsx @@ -4,7 +4,7 @@ import { renderInput_unstable } from './renderInput'; import { useInputStyles_unstable } from './useInputStyles'; import type { InputProps } from './Input.types'; import type { ForwardRefComponent } from '@fluentui/react-utilities'; -import { useCustomStyleHooks_unstable } from '@fluentui/react-shared-contexts'; +import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts'; /** * The Input component allows people to enter and edit text. @@ -14,8 +14,7 @@ export const Input: ForwardRefComponent = React.forwardRef((props, r useInputStyles_unstable(state); - const { useInputStyles_unstable: useCustomStyles } = useCustomStyleHooks_unstable(); - useCustomStyles(state); + useCustomStyleHook_unstable('useInputStyles_unstable')(state); return renderInput_unstable(state); }); diff --git a/packages/react-components/react-label/src/components/Label/Label.tsx b/packages/react-components/react-label/src/components/Label/Label.tsx index 912bb25ef2f5e..dd1278bfc4014 100644 --- a/packages/react-components/react-label/src/components/Label/Label.tsx +++ b/packages/react-components/react-label/src/components/Label/Label.tsx @@ -4,7 +4,7 @@ import { renderLabel_unstable } from './renderLabel'; import { useLabelStyles_unstable } from './useLabelStyles'; import type { LabelProps } from './Label.types'; import type { ForwardRefComponent } from '@fluentui/react-utilities'; -import { useCustomStyleHooks_unstable } from '@fluentui/react-shared-contexts'; +import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts'; /** * A label component provides a title or name to a component. @@ -14,8 +14,7 @@ export const Label: ForwardRefComponent = React.forwardRef((props, r useLabelStyles_unstable(state); - const { useLabelStyles_unstable: useCustomStyles } = useCustomStyleHooks_unstable(); - useCustomStyles(state); + useCustomStyleHook_unstable('useLabelStyles_unstable')(state); return renderLabel_unstable(state); }); diff --git a/packages/react-components/react-menu/src/components/MenuDivider/MenuDivider.tsx b/packages/react-components/react-menu/src/components/MenuDivider/MenuDivider.tsx index 11ed7f15a5a2f..f431113e52757 100644 --- a/packages/react-components/react-menu/src/components/MenuDivider/MenuDivider.tsx +++ b/packages/react-components/react-menu/src/components/MenuDivider/MenuDivider.tsx @@ -4,7 +4,7 @@ import { useMenuDividerStyles_unstable } from './useMenuDividerStyles'; import { renderMenuDivider_unstable } from './renderMenuDivider'; import type { MenuDividerProps } from './MenuDivider.types'; import type { ForwardRefComponent } from '@fluentui/react-utilities'; -import { useCustomStyleHooks_unstable } from '@fluentui/react-shared-contexts'; +import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts'; /** * Define a styled MenuDivider, using the `useMenuDivider_unstable` hook. @@ -14,8 +14,7 @@ export const MenuDivider: ForwardRefComponent = React.forwardR useMenuDividerStyles_unstable(state); - const { useMenuDividerStyles_unstable: useCustomStyles } = useCustomStyleHooks_unstable(); - useCustomStyles(state); + useCustomStyleHook_unstable('useMenuDividerStyles_unstable')(state); return renderMenuDivider_unstable(state); }); diff --git a/packages/react-components/react-menu/src/components/MenuGroup/MenuGroup.tsx b/packages/react-components/react-menu/src/components/MenuGroup/MenuGroup.tsx index dd0996d986ac9..2476fd06badce 100644 --- a/packages/react-components/react-menu/src/components/MenuGroup/MenuGroup.tsx +++ b/packages/react-components/react-menu/src/components/MenuGroup/MenuGroup.tsx @@ -5,7 +5,7 @@ import { useMenuGroupContextValues_unstable } from './useMenuGroupContextValues' import type { MenuGroupProps } from './MenuGroup.types'; import type { ForwardRefComponent } from '@fluentui/react-utilities'; import { useMenuGroupStyles_unstable } from './useMenuGroupStyles'; -import { useCustomStyleHooks_unstable } from '@fluentui/react-shared-contexts'; +import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts'; /** * Define a styled MenuGroup, using the `useMenuGroup_unstable` hook. @@ -16,8 +16,7 @@ export const MenuGroup: ForwardRefComponent = React.forwardRef(( useMenuGroupStyles_unstable(state); - const { useMenuGroupStyles_unstable: useCustomStyles } = useCustomStyleHooks_unstable(); - useCustomStyles(state); + useCustomStyleHook_unstable('useMenuGroupStyles_unstable')(state); return renderMenuGroup_unstable(state, contextValues); }); diff --git a/packages/react-components/react-menu/src/components/MenuGroupHeader/MenuGroupHeader.tsx b/packages/react-components/react-menu/src/components/MenuGroupHeader/MenuGroupHeader.tsx index 5de609a128d31..0a64728ade434 100644 --- a/packages/react-components/react-menu/src/components/MenuGroupHeader/MenuGroupHeader.tsx +++ b/packages/react-components/react-menu/src/components/MenuGroupHeader/MenuGroupHeader.tsx @@ -4,7 +4,7 @@ import { useMenuGroupHeaderStyles_unstable } from './useMenuGroupHeaderStyles'; import { renderMenuGroupHeader_unstable } from './renderMenuGroupHeader'; import type { MenuGroupHeaderProps } from './MenuGroupHeader.types'; import type { ForwardRefComponent } from '@fluentui/react-utilities'; -import { useCustomStyleHooks_unstable } from '@fluentui/react-shared-contexts'; +import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts'; /** * Define a styled MenuGroupHeader, using the `useMenuGroupHeader_unstable` hook. @@ -14,8 +14,7 @@ export const MenuGroupHeader: ForwardRefComponent = React. useMenuGroupHeaderStyles_unstable(state); - const { useMenuGroupHeaderStyles_unstable: useCustomStyles } = useCustomStyleHooks_unstable(); - useCustomStyles(state); + useCustomStyleHook_unstable('useMenuGroupHeaderStyles_unstable')(state); return renderMenuGroupHeader_unstable(state); }); diff --git a/packages/react-components/react-menu/src/components/MenuItem/MenuItem.tsx b/packages/react-components/react-menu/src/components/MenuItem/MenuItem.tsx index 865a09fb21c2f..1675b14a5e334 100644 --- a/packages/react-components/react-menu/src/components/MenuItem/MenuItem.tsx +++ b/packages/react-components/react-menu/src/components/MenuItem/MenuItem.tsx @@ -4,7 +4,7 @@ import { renderMenuItem_unstable } from './renderMenuItem'; import { useMenuItemStyles_unstable } from './useMenuItemStyles'; import type { MenuItemProps } from './MenuItem.types'; import type { ForwardRefComponent } from '@fluentui/react-utilities'; -import { useCustomStyleHooks_unstable } from '@fluentui/react-shared-contexts'; +import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts'; /** * Define a styled MenuItem, using the `useMenuItem_unstable` and `useMenuItemStyles_unstable` hook. @@ -14,8 +14,7 @@ export const MenuItem: ForwardRefComponent = React.forwardRef((pr useMenuItemStyles_unstable(state); - const { useMenuItemStyles_unstable: useCustomStyles } = useCustomStyleHooks_unstable(); - useCustomStyles(state); + useCustomStyleHook_unstable('useMenuItemStyles_unstable')(state); return renderMenuItem_unstable(state); }); diff --git a/packages/react-components/react-menu/src/components/MenuItemCheckbox/MenuItemCheckbox.tsx b/packages/react-components/react-menu/src/components/MenuItemCheckbox/MenuItemCheckbox.tsx index 33314faaea86a..2c7ed1b5f2f0f 100644 --- a/packages/react-components/react-menu/src/components/MenuItemCheckbox/MenuItemCheckbox.tsx +++ b/packages/react-components/react-menu/src/components/MenuItemCheckbox/MenuItemCheckbox.tsx @@ -4,7 +4,7 @@ import { renderMenuItemCheckbox_unstable } from './renderMenuItemCheckbox'; import { useMenuItemCheckboxStyles_unstable } from './useMenuItemCheckboxStyles'; import type { MenuItemCheckboxProps } from './MenuItemCheckbox.types'; import type { ForwardRefComponent } from '@fluentui/react-utilities'; -import { useCustomStyleHooks_unstable } from '@fluentui/react-shared-contexts'; +import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts'; /** * Define a styled MenuItemCheckbox, using the `useMenuItemCheckbox_unstable` hook. @@ -14,8 +14,7 @@ export const MenuItemCheckbox: ForwardRefComponent = Reac useMenuItemCheckboxStyles_unstable(state); - const { useMenuItemCheckboxStyles_unstable: useCustomStyles } = useCustomStyleHooks_unstable(); - useCustomStyles(state); + useCustomStyleHook_unstable('useMenuItemCheckboxStyles_unstable')(state); return renderMenuItemCheckbox_unstable(state); }); diff --git a/packages/react-components/react-menu/src/components/MenuItemRadio/MenuItemRadio.tsx b/packages/react-components/react-menu/src/components/MenuItemRadio/MenuItemRadio.tsx index 987b2179e8b81..2297cec627f5e 100644 --- a/packages/react-components/react-menu/src/components/MenuItemRadio/MenuItemRadio.tsx +++ b/packages/react-components/react-menu/src/components/MenuItemRadio/MenuItemRadio.tsx @@ -4,7 +4,7 @@ import { renderMenuItemRadio_unstable } from './renderMenuItemRadio'; import { useMenuItemRadioStyles_unstable } from './useMenuItemRadioStyles'; import type { MenuItemRadioProps } from './MenuItemRadio.types'; import type { ForwardRefComponent } from '@fluentui/react-utilities'; -import { useCustomStyleHooks_unstable } from '@fluentui/react-shared-contexts'; +import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts'; /** * Define a styled MenuItemRadio, using the `useMenuItemRadio_unstable` hook. @@ -14,8 +14,7 @@ export const MenuItemRadio: ForwardRefComponent = React.forw useMenuItemRadioStyles_unstable(state); - const { useMenuItemRadioStyles_unstable: useCustomStyles } = useCustomStyleHooks_unstable(); - useCustomStyles(state); + useCustomStyleHook_unstable('useMenuItemRadioStyles_unstable')(state); return renderMenuItemRadio_unstable(state); }); diff --git a/packages/react-components/react-menu/src/components/MenuList/MenuList.tsx b/packages/react-components/react-menu/src/components/MenuList/MenuList.tsx index 0be9eb0cd2832..4786a7c9120b3 100644 --- a/packages/react-components/react-menu/src/components/MenuList/MenuList.tsx +++ b/packages/react-components/react-menu/src/components/MenuList/MenuList.tsx @@ -5,7 +5,7 @@ import { useMenuListContextValues_unstable } from './useMenuListContextValues'; import { useMenuListStyles_unstable } from './useMenuListStyles'; import type { MenuListProps } from './MenuList.types'; import type { ForwardRefComponent } from '@fluentui/react-utilities'; -import { useCustomStyleHooks_unstable } from '@fluentui/react-shared-contexts'; +import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts'; /** * Define a styled MenuList, using the `useMenuList_unstable` hook. @@ -16,8 +16,7 @@ export const MenuList: ForwardRefComponent = React.forwardRef((pr useMenuListStyles_unstable(state); - const { useMenuListStyles_unstable: useCustomStyles } = useCustomStyleHooks_unstable(); - useCustomStyles(state); + useCustomStyleHook_unstable('useMenuListStyles_unstable')(state); return renderMenuList_unstable(state, contextValues); }); diff --git a/packages/react-components/react-menu/src/components/MenuPopover/MenuPopover.tsx b/packages/react-components/react-menu/src/components/MenuPopover/MenuPopover.tsx index 242f48a33d476..1e0dbc2573362 100644 --- a/packages/react-components/react-menu/src/components/MenuPopover/MenuPopover.tsx +++ b/packages/react-components/react-menu/src/components/MenuPopover/MenuPopover.tsx @@ -4,7 +4,7 @@ import { useMenuPopoverStyles_unstable } from './useMenuPopoverStyles'; import { renderMenuPopover_unstable } from './renderMenuPopover'; import type { MenuPopoverProps } from './MenuPopover.types'; import type { ForwardRefComponent } from '@fluentui/react-utilities'; -import { useCustomStyleHooks_unstable } from '@fluentui/react-shared-contexts'; +import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts'; /** * Popover intended to wrap `MenuList` and adds styling and interaction support specific to menus @@ -14,8 +14,7 @@ export const MenuPopover: ForwardRefComponent = React.forwardR useMenuPopoverStyles_unstable(state); - const { useMenuPopoverStyles_unstable: useCustomStyles } = useCustomStyleHooks_unstable(); - useCustomStyles(state); + useCustomStyleHook_unstable('useMenuPopoverStyles_unstable')(state); return renderMenuPopover_unstable(state); }); diff --git a/packages/react-components/react-menu/src/components/MenuSplitGroup/MenuSplitGroup.tsx b/packages/react-components/react-menu/src/components/MenuSplitGroup/MenuSplitGroup.tsx index 456c4835a8f10..1271e8217e0db 100644 --- a/packages/react-components/react-menu/src/components/MenuSplitGroup/MenuSplitGroup.tsx +++ b/packages/react-components/react-menu/src/components/MenuSplitGroup/MenuSplitGroup.tsx @@ -4,7 +4,7 @@ import { renderMenuSplitGroup_unstable } from './renderMenuSplitGroup'; import { useMenuSplitGroupStyles_unstable } from './useMenuSplitGroupStyles'; import type { MenuSplitGroupProps } from './MenuSplitGroup.types'; import type { ForwardRefComponent } from '@fluentui/react-utilities'; -import { useCustomStyleHooks_unstable } from '@fluentui/react-shared-contexts'; +import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts'; /** * Layout wrapper that provides extra keyboard navigation behavior for two `MenuItem` components. @@ -14,8 +14,7 @@ export const MenuSplitGroup: ForwardRefComponent = React.fo useMenuSplitGroupStyles_unstable(state); - const { useMenuSplitGroupStyles_unstable: useCustomStyles } = useCustomStyleHooks_unstable(); - useCustomStyles(state); + useCustomStyleHook_unstable('useMenuSplitGroupStyles_unstable')(state); return renderMenuSplitGroup_unstable(state); }); diff --git a/packages/react-components/react-persona/src/components/Persona/Persona.tsx b/packages/react-components/react-persona/src/components/Persona/Persona.tsx index 158135a604248..ae2c8dfda0a86 100644 --- a/packages/react-components/react-persona/src/components/Persona/Persona.tsx +++ b/packages/react-components/react-persona/src/components/Persona/Persona.tsx @@ -4,7 +4,7 @@ import { usePersona_unstable } from './usePersona'; import { usePersonaStyles_unstable } from './usePersonaStyles'; import type { ForwardRefComponent } from '@fluentui/react-utilities'; import type { PersonaProps } from './Persona.types'; -import { useCustomStyleHooks_unstable } from '@fluentui/react-shared-contexts'; +import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts'; /** * A Persona is a visual representation of a person or status that showcases an Avatar, PresenceBadge, @@ -15,8 +15,7 @@ export const Persona: ForwardRefComponent = React.forwardRef((prop usePersonaStyles_unstable(state); - const { usePersonaStyles_unstable: useCustomStyles } = useCustomStyleHooks_unstable(); - useCustomStyles(state); + useCustomStyleHook_unstable('usePersonaStyles_unstable')(state); return renderPersona_unstable(state); }); diff --git a/packages/react-components/react-popover/src/components/PopoverSurface/PopoverSurface.tsx b/packages/react-components/react-popover/src/components/PopoverSurface/PopoverSurface.tsx index 7702400edc576..66d07f3e0b338 100644 --- a/packages/react-components/react-popover/src/components/PopoverSurface/PopoverSurface.tsx +++ b/packages/react-components/react-popover/src/components/PopoverSurface/PopoverSurface.tsx @@ -4,7 +4,7 @@ import { renderPopoverSurface_unstable } from './renderPopoverSurface'; import { usePopoverSurfaceStyles_unstable } from './usePopoverSurfaceStyles'; import type { PopoverSurfaceProps } from './PopoverSurface.types'; import type { ForwardRefComponent } from '@fluentui/react-utilities'; -import { useCustomStyleHooks_unstable } from '@fluentui/react-shared-contexts'; +import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts'; /** * PopoverSurface component renders react children in a positioned box @@ -14,8 +14,7 @@ export const PopoverSurface: ForwardRefComponent = React.fo usePopoverSurfaceStyles_unstable(state); - const { usePopoverSurfaceStyles_unstable: useCustomStyles } = useCustomStyleHooks_unstable(); - useCustomStyles(state); + useCustomStyleHook_unstable('usePopoverSurfaceStyles_unstable')(state); return renderPopoverSurface_unstable(state); }); diff --git a/packages/react-components/react-progress/src/components/ProgressBar/ProgressBar.tsx b/packages/react-components/react-progress/src/components/ProgressBar/ProgressBar.tsx index 6a55419a2d12d..57a4947157c25 100644 --- a/packages/react-components/react-progress/src/components/ProgressBar/ProgressBar.tsx +++ b/packages/react-components/react-progress/src/components/ProgressBar/ProgressBar.tsx @@ -4,7 +4,7 @@ import { renderProgressBar_unstable } from './renderProgressBar'; import { useProgressBarStyles_unstable } from './useProgressBarStyles'; import type { ProgressBarProps } from './ProgressBar.types'; import type { ForwardRefComponent } from '@fluentui/react-utilities'; -import { useCustomStyleHooks_unstable } from '@fluentui/react-shared-contexts'; +import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts'; /** * A ProgressBar bar shows the progression of a task. @@ -14,8 +14,7 @@ export const ProgressBar: ForwardRefComponent = React.forwardR useProgressBarStyles_unstable(state); - const { useProgressBarStyles_unstable: useCustomStyles } = useCustomStyleHooks_unstable(); - useCustomStyles(state); + useCustomStyleHook_unstable('useProgressBarStyles_unstable')(state); return renderProgressBar_unstable(state); }); diff --git a/packages/react-components/react-provider/etc/react-provider.api.md b/packages/react-components/react-provider/etc/react-provider.api.md index af4ee0d9cbc89..cf515b46eb399 100644 --- a/packages/react-components/react-provider/etc/react-provider.api.md +++ b/packages/react-components/react-provider/etc/react-provider.api.md @@ -6,7 +6,7 @@ import { ComponentProps } from '@fluentui/react-utilities'; import type { ComponentState } from '@fluentui/react-utilities'; -import { CustomStyleHooksContextValue_unstable } from '@fluentui/react-shared-contexts'; +import type { CustomStyleHooksContextValue_unstable } from '@fluentui/react-shared-contexts'; import { OverridesContextValue_unstable } from '@fluentui/react-shared-contexts'; import type { PartialTheme } from '@fluentui/react-theme'; import type { ProviderContextValue_unstable } from '@fluentui/react-shared-contexts'; @@ -21,7 +21,91 @@ import type { TooltipVisibilityContextValue_unstable } from '@fluentui/react-sha // @public (undocumented) export const FluentProvider: React_2.ForwardRefExoticComponent, "dir"> & { applyStylesToPortals?: boolean | undefined; - customStyleHooks_unstable?: Partial | undefined; + customStyleHooks_unstable?: Partial<{ + useAccordionHeaderStyles_unstable: (state: unknown) => void; + useAccordionItemStyles_unstable: (state: unknown) => void; + useAccordionPanelStyles_unstable: (state: unknown) => void; + useAccordionStyles_unstable: (state: unknown) => void; + useAvatarStyles_unstable: (state: unknown) => void; + useAvatarGroupStyles_unstable: (state: unknown) => void; + useAvatarGroupItemStyles_unstable: (state: unknown) => void; + useAvatarGroupPopoverStyles_unstable: (state: unknown) => void; + useBadgeStyles_unstable: (state: unknown) => void; + useCounterBadgeStyles_unstable: (state: unknown) => void; + useCardHeaderStyles_unstable: (state: unknown) => void; + useCardStyles_unstable: (state: unknown) => void; + useCardFooterStyles_unstable: (state: unknown) => void; + useCardPreviewStyles_unstable: (state: unknown) => void; + usePresenceBadgeStyles_unstable: (state: unknown) => void; + useButtonStyles_unstable: (state: unknown) => void; + useCompoundButtonStyles_unstable: (state: unknown) => void; + useMenuButtonStyles_unstable: (state: unknown) => void; + useSplitButtonStyles_unstable: (state: unknown) => void; + useToggleButtonStyles_unstable: (state: unknown) => void; + useCheckboxStyles_unstable: (state: unknown) => void; + useComboboxStyles_unstable: (state: unknown) => void; + useDropdownStyles_unstable: (state: unknown) => void; + useListboxStyles_unstable: (state: unknown) => void; + useOptionStyles_unstable: (state: unknown) => void; + useOptionGroupStyles_unstable: (state: unknown) => void; + useDividerStyles_unstable: (state: unknown) => void; + useInputStyles_unstable: (state: unknown) => void; + useImageStyles_unstable: (state: unknown) => void; + useLabelStyles_unstable: (state: unknown) => void; + useLinkStyles_unstable: (state: unknown) => void; + useMenuDividerStyles_unstable: (state: unknown) => void; + useMenuGroupHeaderStyles_unstable: (state: unknown) => void; + useMenuGroupStyles_unstable: (state: unknown) => void; + useMenuItemCheckboxStyles_unstable: (state: unknown) => void; + useMenuItemRadioStyles_unstable: (state: unknown) => void; + useMenuItemStyles_unstable: (state: unknown) => void; + useMenuListStyles_unstable: (state: unknown) => void; + useMenuPopoverStyles_unstable: (state: unknown) => void; + useMenuSplitGroupStyles_unstable: (state: unknown) => void; + usePersonaStyles_unstable: (state: unknown) => void; + usePopoverSurfaceStyles_unstable: (state: unknown) => void; + useRadioGroupStyles_unstable: (state: unknown) => void; + useRadioStyles_unstable: (state: unknown) => void; + useSelectStyles_unstable: (state: unknown) => void; + useSliderStyles_unstable: (state: unknown) => void; + useSpinButtonStyles_unstable: (state: unknown) => void; + useSpinnerStyles_unstable: (state: unknown) => void; + useSwitchStyles_unstable: (state: unknown) => void; + useTabStyles_unstable: (state: unknown) => void; + useTabListStyles_unstable: (state: unknown) => void; + useTextStyles_unstable: (state: unknown) => void; + useTextareaStyles_unstable: (state: unknown) => void; + useTooltipStyles_unstable: (state: unknown) => void; + useDialogTitleStyles_unstable: (state: unknown) => void; + useDialogBodyStyles_unstable: (state: unknown) => void; + useDialogActionsStyles_unstable: (state: unknown) => void; + useDialogSurfaceStyles_unstable: (state: unknown) => void; + useDialogContentStyles_unstable: (state: unknown) => void; + useProgressBarStyles_unstable: (state: unknown) => void; + useToolbarButtonStyles_unstable: (state: unknown) => void; + useToolbarRadioButtonStyles_unstable: (state: unknown) => void; + useToolbarGroupStyles_unstable: (state: unknown) => void; + useToolbarToggleButtonStyles_unstable: (state: unknown) => void; + useToolbarDividerStyles_unstable: (state: unknown) => void; + useToolbarStyles_unstable: (state: unknown) => void; + useTableCellStyles_unstable: (state: unknown) => void; + useTableRowStyles_unstable: (state: unknown) => void; + useTableBodyStyles_unstable: (state: unknown) => void; + useTableStyles_unstable: (state: unknown) => void; + useTableHeaderStyles_unstable: (state: unknown) => void; + useTableHeaderCellStyles_unstable: (state: unknown) => void; + useTableResizeHandleStyles_unstable: (state: unknown) => void; + useTableSelectionCellStyles_unstable: (state: unknown) => void; + useTableCellActionsStyles_unstable: (state: unknown) => void; + useTableCellLayoutStyles_unstable: (state: unknown) => void; + useDataGridCellStyles_unstable: (state: unknown) => void; + useDataGridRowStyles_unstable: (state: unknown) => void; + useDataGridBodyStyles_unstable: (state: unknown) => void; + useDataGridStyles_unstable: (state: unknown) => void; + useDataGridHeaderStyles_unstable: (state: unknown) => void; + useDataGridHeaderCellStyles_unstable: (state: unknown) => void; + useDataGridSelectionCellStyles_unstable: (state: unknown) => void; + }> | undefined; dir?: "ltr" | "rtl" | undefined; targetDocument?: Document | undefined; theme?: Partial | undefined; @@ -40,7 +124,7 @@ export type FluentProviderContextValues = Pick; +export type FluentProviderCustomStyleHooks = CustomStyleHooksContextValue_unstable; // @public (undocumented) export type FluentProviderProps = Omit, 'dir'> & { diff --git a/packages/react-components/react-provider/src/components/FluentProvider/FluentProvider.types.ts b/packages/react-components/react-provider/src/components/FluentProvider/FluentProvider.types.ts index 462d4293f76a8..8c87322ccca12 100644 --- a/packages/react-components/react-provider/src/components/FluentProvider/FluentProvider.types.ts +++ b/packages/react-components/react-provider/src/components/FluentProvider/FluentProvider.types.ts @@ -15,7 +15,7 @@ export type FluentProviderSlots = { // exported for callers to avoid referencing react-shared-context // and applying Partial<> when passing custom style hooks. -export type FluentProviderCustomStyleHooks = Partial; +export type FluentProviderCustomStyleHooks = CustomStyleHooksContextValue; export type FluentProviderProps = Omit, 'dir'> & { /** diff --git a/packages/react-components/react-provider/src/components/FluentProvider/useFluentProvider.test.tsx b/packages/react-components/react-provider/src/components/FluentProvider/useFluentProvider.test.tsx index b9613d15c2c88..15218eca48b1f 100644 --- a/packages/react-components/react-provider/src/components/FluentProvider/useFluentProvider.test.tsx +++ b/packages/react-components/react-provider/src/components/FluentProvider/useFluentProvider.test.tsx @@ -112,8 +112,8 @@ describe('useFluentProvider_unstable', () => { () => useFluentProvider_unstable({ customStyleHooks_unstable: customStylesA }, React.createRef()), ); - // Default hooks are still defined - expect(result.current.customStyleHooks_unstable.useAvatarStyles_unstable).toBeInstanceOf(Function); + // default is undefined as the selector provides no-op + expect(result.current.customStyleHooks_unstable.useAvatarStyles_unstable).toBeUndefined(); expect(result.current.customStyleHooks_unstable.useButtonStyles_unstable).toEqual( customStylesA.useButtonStyles_unstable, @@ -134,8 +134,8 @@ describe('useFluentProvider_unstable', () => { }, ); - // Default hooks are still defined - expect(result.current.customStyleHooks_unstable.useAvatarStyles_unstable).toBeInstanceOf(Function); + // default is undefined as the selector provides no-op + expect(result.current.customStyleHooks_unstable.useAvatarStyles_unstable).toBeUndefined(); // Overrides from outer FluentProvider are preserved expect(result.current.customStyleHooks_unstable.useImageStyles_unstable).toEqual( diff --git a/packages/react-components/react-provider/src/components/FluentProvider/useFluentProvider.ts b/packages/react-components/react-provider/src/components/FluentProvider/useFluentProvider.ts index d1ef14183c685..eea3f32a31788 100644 --- a/packages/react-components/react-provider/src/components/FluentProvider/useFluentProvider.ts +++ b/packages/react-components/react-provider/src/components/FluentProvider/useFluentProvider.ts @@ -3,7 +3,7 @@ import { ThemeContext_unstable as ThemeContext, useFluent_unstable as useFluent, useOverrides_unstable as useOverrides, - useCustomStyleHooks_unstable as useCustomStyleHooks, + CustomStyleHooksContext_unstable as CustomStyleHooksContext, } from '@fluentui/react-shared-contexts'; import type { CustomStyleHooksContextValue_unstable as CustomStyleHooksContextValue, @@ -32,7 +32,7 @@ export const useFluentProvider_unstable = ( const parentContext = useFluent(); const parentTheme = useTheme(); const parentOverrides = useOverrides(); - const parentCustomStyleHooks = useCustomStyleHooks(); + const parentCustomStyleHooks: CustomStyleHooksContextValue = React.useContext(CustomStyleHooksContext) || {}; /** * TODO: add merge functions to "dir" merge, @@ -52,7 +52,6 @@ export const useFluentProvider_unstable = ( const mergedOverrides = shallowMerge(parentOverrides, overrides); - // parentCustomStyleHooks will not be a partial const mergedCustomStyleHooks = shallowMerge( parentCustomStyleHooks, customStyleHooks_unstable, diff --git a/packages/react-components/react-radio/src/components/Radio/Radio.tsx b/packages/react-components/react-radio/src/components/Radio/Radio.tsx index 1ace4479bed34..6a4637640fab2 100644 --- a/packages/react-components/react-radio/src/components/Radio/Radio.tsx +++ b/packages/react-components/react-radio/src/components/Radio/Radio.tsx @@ -4,7 +4,7 @@ import type { RadioProps } from './Radio.types'; import { renderRadio_unstable } from './renderRadio'; import { useRadio_unstable } from './useRadio'; import { useRadioStyles_unstable } from './useRadioStyles'; -import { useCustomStyleHooks_unstable } from '@fluentui/react-shared-contexts'; +import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts'; /** * Radio component is a wrapper for a radio button with a label. @@ -14,8 +14,7 @@ export const Radio: ForwardRefComponent = React.forwardRef((props, r useRadioStyles_unstable(state); - const { useRadioStyles_unstable: useCustomStyles } = useCustomStyleHooks_unstable(); - useCustomStyles(state); + useCustomStyleHook_unstable('useRadioStyles_unstable')(state); return renderRadio_unstable(state); }); diff --git a/packages/react-components/react-radio/src/components/RadioGroup/RadioGroup.tsx b/packages/react-components/react-radio/src/components/RadioGroup/RadioGroup.tsx index d25c3980d78b5..f222f4169aca7 100644 --- a/packages/react-components/react-radio/src/components/RadioGroup/RadioGroup.tsx +++ b/packages/react-components/react-radio/src/components/RadioGroup/RadioGroup.tsx @@ -5,7 +5,7 @@ import { renderRadioGroup_unstable } from './renderRadioGroup'; import { useRadioGroup_unstable } from './useRadioGroup'; import { useRadioGroupStyles_unstable } from './useRadioGroupStyles'; import { useRadioGroupContextValues } from '../../contexts/useRadioGroupContextValues'; -import { useCustomStyleHooks_unstable } from '@fluentui/react-shared-contexts'; +import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts'; /** * A RadioGroup component presents a set of options where only one option can be selected. @@ -16,8 +16,7 @@ export const RadioGroup: ForwardRefComponent = React.forwardRef useRadioGroupStyles_unstable(state); - const { useRadioGroupStyles_unstable: useCustomStyles } = useCustomStyleHooks_unstable(); - useCustomStyles(state); + useCustomStyleHook_unstable('useRadioGroupStyles_unstable')(state); return renderRadioGroup_unstable(state, contextValues); }); diff --git a/packages/react-components/react-select/src/components/Select/Select.tsx b/packages/react-components/react-select/src/components/Select/Select.tsx index 8b9a421d25bff..baae3e3e40c8c 100644 --- a/packages/react-components/react-select/src/components/Select/Select.tsx +++ b/packages/react-components/react-select/src/components/Select/Select.tsx @@ -4,7 +4,7 @@ import { renderSelect_unstable } from './renderSelect'; import { useSelectStyles_unstable } from './useSelectStyles'; import type { SelectProps } from './Select.types'; import type { ForwardRefComponent } from '@fluentui/react-utilities'; -import { useCustomStyleHooks_unstable } from '@fluentui/react-shared-contexts'; +import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts'; /** * Select component @@ -14,8 +14,7 @@ export const Select: ForwardRefComponent = React.forwardRef((props, useSelectStyles_unstable(state); - const { useSelectStyles_unstable: useCustomStyles } = useCustomStyleHooks_unstable(); - useCustomStyles(state); + useCustomStyleHook_unstable('useSelectStyles_unstable')(state); return renderSelect_unstable(state); }); diff --git a/packages/react-components/react-shared-contexts/etc/react-shared-contexts.api.md b/packages/react-components/react-shared-contexts/etc/react-shared-contexts.api.md index f4993f6c6d8e7..9f9695443505c 100644 --- a/packages/react-components/react-shared-contexts/etc/react-shared-contexts.api.md +++ b/packages/react-components/react-shared-contexts/etc/react-shared-contexts.api.md @@ -8,10 +8,94 @@ import * as React_2 from 'react'; import type { Theme } from '@fluentui/react-theme'; // @internal (undocumented) -export const CustomStyleHooksContext_unstable: React_2.Context; +export const CustomStyleHooksContext_unstable: React_2.Context | undefined>; // @public (undocumented) -export type CustomStyleHooksContextValue_unstable = { +export type CustomStyleHooksContextValue_unstable = Partial<{ useAccordionHeaderStyles_unstable: CustomStyleHook; useAccordionItemStyles_unstable: CustomStyleHook; useAccordionPanelStyles_unstable: CustomStyleHook; @@ -95,10 +179,94 @@ export type CustomStyleHooksContextValue_unstable = { useDataGridHeaderStyles_unstable: CustomStyleHook; useDataGridHeaderCellStyles_unstable: CustomStyleHook; useDataGridSelectionCellStyles_unstable: CustomStyleHook; -}; +}>; // @internal (undocumented) -export const CustomStyleHooksProvider_unstable: React_2.Provider; +export const CustomStyleHooksProvider_unstable: React_2.Provider | undefined>; // @internal (undocumented) export type OverridesContextValue_unstable = { @@ -142,8 +310,8 @@ export type TooltipVisibilityContextValue_unstable = { // @internal (undocumented) export const TooltipVisibilityProvider_unstable: React_2.Provider; -// @public (undocumented) -export function useCustomStyleHooks_unstable(): CustomStyleHooksContextValue_unstable; +// @public +export const useCustomStyleHook_unstable: (hook: keyof CustomStyleHooksContextValue_unstable) => CustomStyleHook; // @public (undocumented) export function useFluent_unstable(): ProviderContextValue_unstable; diff --git a/packages/react-components/react-shared-contexts/src/CustomStyleHooksContext/CustomStyleHooksContext.ts b/packages/react-components/react-shared-contexts/src/CustomStyleHooksContext/CustomStyleHooksContext.ts index 9f03c236e0a1c..33f69e86580c2 100644 --- a/packages/react-components/react-shared-contexts/src/CustomStyleHooksContext/CustomStyleHooksContext.ts +++ b/packages/react-components/react-shared-contexts/src/CustomStyleHooksContext/CustomStyleHooksContext.ts @@ -5,7 +5,7 @@ import * as React from 'react'; type CustomStyleHook = (state: unknown) => void; // The list of hooks is built from the exports from react-components/src/index -export type CustomStyleHooksContextValue = { +export type CustomStyleHooksContextValue = Partial<{ useAccordionHeaderStyles_unstable: CustomStyleHook; useAccordionItemStyles_unstable: CustomStyleHook; useAccordionPanelStyles_unstable: CustomStyleHook; @@ -89,7 +89,7 @@ export type CustomStyleHooksContextValue = { useDataGridHeaderStyles_unstable: CustomStyleHook; useDataGridHeaderCellStyles_unstable: CustomStyleHook; useDataGridSelectionCellStyles_unstable: CustomStyleHook; -}; +}>; /** * @internal @@ -97,97 +97,17 @@ export type CustomStyleHooksContextValue = { export const CustomStyleHooksContext = React.createContext(undefined); const noop = () => {}; -const customStyleHooksContextDefaultValue: CustomStyleHooksContextValue = { - useAccordionHeaderStyles_unstable: noop, - useAccordionItemStyles_unstable: noop, - useAccordionPanelStyles_unstable: noop, - useAccordionStyles_unstable: noop, - useAvatarStyles_unstable: noop, - useAvatarGroupStyles_unstable: noop, - useAvatarGroupItemStyles_unstable: noop, - useAvatarGroupPopoverStyles_unstable: noop, - useBadgeStyles_unstable: noop, - useCounterBadgeStyles_unstable: noop, - useCardHeaderStyles_unstable: noop, - useCardStyles_unstable: noop, - useCardFooterStyles_unstable: noop, - useCardPreviewStyles_unstable: noop, - usePresenceBadgeStyles_unstable: noop, - useButtonStyles_unstable: noop, - useCompoundButtonStyles_unstable: noop, - useMenuButtonStyles_unstable: noop, - useSplitButtonStyles_unstable: noop, - useToggleButtonStyles_unstable: noop, - useCheckboxStyles_unstable: noop, - useComboboxStyles_unstable: noop, - useDropdownStyles_unstable: noop, - useListboxStyles_unstable: noop, - useOptionStyles_unstable: noop, - useOptionGroupStyles_unstable: noop, - useDividerStyles_unstable: noop, - useInputStyles_unstable: noop, - useImageStyles_unstable: noop, - useLabelStyles_unstable: noop, - useLinkStyles_unstable: noop, - useMenuDividerStyles_unstable: noop, - useMenuGroupHeaderStyles_unstable: noop, - useMenuGroupStyles_unstable: noop, - useMenuItemCheckboxStyles_unstable: noop, - useMenuItemRadioStyles_unstable: noop, - useMenuItemStyles_unstable: noop, - useMenuListStyles_unstable: noop, - useMenuPopoverStyles_unstable: noop, - useMenuSplitGroupStyles_unstable: noop, - usePersonaStyles_unstable: noop, - usePopoverSurfaceStyles_unstable: noop, - useRadioGroupStyles_unstable: noop, - useRadioStyles_unstable: noop, - useSelectStyles_unstable: noop, - useSliderStyles_unstable: noop, - useSpinButtonStyles_unstable: noop, - useSpinnerStyles_unstable: noop, - useSwitchStyles_unstable: noop, - useTabStyles_unstable: noop, - useTabListStyles_unstable: noop, - useTextStyles_unstable: noop, - useTextareaStyles_unstable: noop, - useTooltipStyles_unstable: noop, - useDialogTitleStyles_unstable: noop, - useDialogBodyStyles_unstable: noop, - useDialogActionsStyles_unstable: noop, - useDialogSurfaceStyles_unstable: noop, - useDialogContentStyles_unstable: noop, - useProgressBarStyles_unstable: noop, - useToolbarButtonStyles_unstable: noop, - useToolbarRadioButtonStyles_unstable: noop, - useToolbarGroupStyles_unstable: noop, - useToolbarToggleButtonStyles_unstable: noop, - useToolbarDividerStyles_unstable: noop, - useToolbarStyles_unstable: noop, - useTableCellStyles_unstable: noop, - useTableRowStyles_unstable: noop, - useTableBodyStyles_unstable: noop, - useTableStyles_unstable: noop, - useTableHeaderStyles_unstable: noop, - useTableHeaderCellStyles_unstable: noop, - useTableResizeHandleStyles_unstable: noop, - useTableSelectionCellStyles_unstable: noop, - useTableCellActionsStyles_unstable: noop, - useTableCellLayoutStyles_unstable: noop, - useDataGridCellStyles_unstable: noop, - useDataGridRowStyles_unstable: noop, - useDataGridBodyStyles_unstable: noop, - useDataGridStyles_unstable: noop, - useDataGridHeaderStyles_unstable: noop, - useDataGridHeaderCellStyles_unstable: noop, - useDataGridSelectionCellStyles_unstable: noop, -}; /** * @internal */ export const CustomStyleHooksProvider = CustomStyleHooksContext.Provider; -export function useCustomStyleHooks(): CustomStyleHooksContextValue { - return React.useContext(CustomStyleHooksContext) ?? customStyleHooksContextDefaultValue; -} +/** + * Gets a custom style hook + * @param hook - One of the hook properties in CustomStyleHooksContextValue + * @returns The corresponding hook when defined, otherwise a no-op function. + */ +export const useCustomStyleHook = (hook: keyof CustomStyleHooksContextValue): CustomStyleHook => { + return React.useContext(CustomStyleHooksContext)?.[hook] ?? noop; +}; diff --git a/packages/react-components/react-shared-contexts/src/index.ts b/packages/react-components/react-shared-contexts/src/index.ts index 362cfd8299eb4..ee633ce59b253 100644 --- a/packages/react-components/react-shared-contexts/src/index.ts +++ b/packages/react-components/react-shared-contexts/src/index.ts @@ -23,10 +23,8 @@ export { export type { OverridesContextValue as OverridesContextValue_unstable } from './OverridesContext'; export { - CustomStyleHooksProvider as CustomStyleHooksProvider_unstable, - useCustomStyleHooks as useCustomStyleHooks_unstable, -} from './CustomStyleHooksContext'; -export type { - CustomStyleHooksContextValue as CustomStyleHooksContextValue_unstable, CustomStyleHooksContext as CustomStyleHooksContext_unstable, + CustomStyleHooksProvider as CustomStyleHooksProvider_unstable, + useCustomStyleHook as useCustomStyleHook_unstable, } from './CustomStyleHooksContext'; +export type { CustomStyleHooksContextValue as CustomStyleHooksContextValue_unstable } from './CustomStyleHooksContext'; diff --git a/packages/react-components/react-slider/src/components/Slider/Slider.tsx b/packages/react-components/react-slider/src/components/Slider/Slider.tsx index ad40a8c9dd0c4..faabab328ed36 100644 --- a/packages/react-components/react-slider/src/components/Slider/Slider.tsx +++ b/packages/react-components/react-slider/src/components/Slider/Slider.tsx @@ -4,7 +4,7 @@ import { renderSlider_unstable } from './renderSlider'; import { useSliderStyles_unstable } from './useSliderStyles'; import type { SliderProps } from './Slider.types'; import type { ForwardRefComponent } from '@fluentui/react-utilities'; -import { useCustomStyleHooks_unstable } from '@fluentui/react-shared-contexts'; +import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts'; /** * The Slider component allows users to quickly select a value by dragging a thumb across a rail. @@ -14,8 +14,7 @@ export const Slider: ForwardRefComponent = React.forwardRef((props, useSliderStyles_unstable(state); - const { useSliderStyles_unstable: useCustomStyles } = useCustomStyleHooks_unstable(); - useCustomStyles(state); + useCustomStyleHook_unstable('useSliderStyles_unstable')(state); return renderSlider_unstable(state); }); diff --git a/packages/react-components/react-spinbutton/src/components/SpinButton/SpinButton.tsx b/packages/react-components/react-spinbutton/src/components/SpinButton/SpinButton.tsx index 5e44b486c536f..22ee917655a53 100644 --- a/packages/react-components/react-spinbutton/src/components/SpinButton/SpinButton.tsx +++ b/packages/react-components/react-spinbutton/src/components/SpinButton/SpinButton.tsx @@ -4,7 +4,7 @@ import { renderSpinButton_unstable } from './renderSpinButton'; import { useSpinButtonStyles_unstable } from './useSpinButtonStyles'; import type { SpinButtonProps } from './SpinButton.types'; import type { ForwardRefComponent } from '@fluentui/react-utilities'; -import { useCustomStyleHooks_unstable } from '@fluentui/react-shared-contexts'; +import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts'; /** * A SpinButton allows someone to incrementally adjust a value in small steps. @@ -14,8 +14,7 @@ export const SpinButton: ForwardRefComponent = React.forwardRef useSpinButtonStyles_unstable(state); - const { useSpinButtonStyles_unstable: useCustomStyles } = useCustomStyleHooks_unstable(); - useCustomStyles(state); + useCustomStyleHook_unstable('useSpinButtonStyles_unstable')(state); return renderSpinButton_unstable(state); }); diff --git a/packages/react-components/react-spinner/src/components/Spinner/Spinner.tsx b/packages/react-components/react-spinner/src/components/Spinner/Spinner.tsx index d0cf166ed1641..d0737299e025a 100644 --- a/packages/react-components/react-spinner/src/components/Spinner/Spinner.tsx +++ b/packages/react-components/react-spinner/src/components/Spinner/Spinner.tsx @@ -4,7 +4,7 @@ import { renderSpinner_unstable } from './renderSpinner'; import { useSpinnerStyles_unstable } from './useSpinnerStyles'; import type { SpinnerProps } from './Spinner.types'; import type { ForwardRefComponent } from '@fluentui/react-utilities'; -import { useCustomStyleHooks_unstable } from '@fluentui/react-shared-contexts'; +import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts'; /** * Converged Spinner component for the fluentui repo @@ -14,8 +14,7 @@ export const Spinner: ForwardRefComponent = React.forwardRef((prop useSpinnerStyles_unstable(state); - const { useSpinnerStyles_unstable: useCustomStyles } = useCustomStyleHooks_unstable(); - useCustomStyles(state); + useCustomStyleHook_unstable('useSpinnerStyles_unstable')(state); return renderSpinner_unstable(state); }); diff --git a/packages/react-components/react-switch/src/components/Switch/Switch.tsx b/packages/react-components/react-switch/src/components/Switch/Switch.tsx index 4b28b95ddcba4..7a320888c797a 100644 --- a/packages/react-components/react-switch/src/components/Switch/Switch.tsx +++ b/packages/react-components/react-switch/src/components/Switch/Switch.tsx @@ -4,7 +4,7 @@ import { renderSwitch_unstable } from './renderSwitch'; import { useSwitchStyles_unstable } from './useSwitchStyles'; import type { SwitchProps } from './Switch.types'; import type { ForwardRefComponent } from '@fluentui/react-utilities'; -import { useCustomStyleHooks_unstable } from '@fluentui/react-shared-contexts'; +import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts'; /** * Switches enable users to trigger an option on or off through pressing the component. @@ -14,8 +14,7 @@ export const Switch: ForwardRefComponent = React.forwardRef((props, useSwitchStyles_unstable(state); - const { useSwitchStyles_unstable: useCustomStyles } = useCustomStyleHooks_unstable(); - useCustomStyles(state); + useCustomStyleHook_unstable('useSwitchStyles_unstable')(state); return renderSwitch_unstable(state); }); diff --git a/packages/react-components/react-table/src/components/DataGrid/DataGrid.tsx b/packages/react-components/react-table/src/components/DataGrid/DataGrid.tsx index 957028800767c..f343a48003fe3 100644 --- a/packages/react-components/react-table/src/components/DataGrid/DataGrid.tsx +++ b/packages/react-components/react-table/src/components/DataGrid/DataGrid.tsx @@ -5,7 +5,7 @@ import { useDataGridStyles_unstable } from './useDataGridStyles'; import type { DataGridProps } from './DataGrid.types'; import type { ForwardRefComponent } from '@fluentui/react-utilities'; import { useDataGridContextValues_unstable } from './useDataGridContextValues'; -import { useCustomStyleHooks_unstable } from '@fluentui/react-shared-contexts'; +import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts'; /** * DataGrid component @@ -15,8 +15,7 @@ export const DataGrid: ForwardRefComponent = React.forwardRef((pr useDataGridStyles_unstable(state); - const { useDataGridStyles_unstable: useCustomStyles } = useCustomStyleHooks_unstable(); - useCustomStyles(state); + useCustomStyleHook_unstable('useDataGridStyles_unstable')(state); return renderDataGrid_unstable(state, useDataGridContextValues_unstable(state)); }); diff --git a/packages/react-components/react-table/src/components/DataGridBody/DataGridBody.tsx b/packages/react-components/react-table/src/components/DataGridBody/DataGridBody.tsx index d219ba79b52be..565e4d6318fba 100644 --- a/packages/react-components/react-table/src/components/DataGridBody/DataGridBody.tsx +++ b/packages/react-components/react-table/src/components/DataGridBody/DataGridBody.tsx @@ -4,7 +4,7 @@ import { renderDataGridBody_unstable } from './renderDataGridBody'; import { useDataGridBodyStyles_unstable } from './useDataGridBodyStyles'; import type { DataGridBodyProps } from './DataGridBody.types'; import type { ForwardRefComponent } from '@fluentui/react-utilities'; -import { useCustomStyleHooks_unstable } from '@fluentui/react-shared-contexts'; +import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts'; /** * DataGridBody component @@ -15,8 +15,7 @@ export const DataGridBody: ForwardRefComponent & useDataGridBodyStyles_unstable(state); - const { useDataGridBodyStyles_unstable: useCustomStyles } = useCustomStyleHooks_unstable(); - useCustomStyles(state); + useCustomStyleHook_unstable('useDataGridBodyStyles_unstable')(state); return renderDataGridBody_unstable(state); }) as ForwardRefComponent & ((props: DataGridBodyProps) => JSX.Element); diff --git a/packages/react-components/react-table/src/components/DataGridCell/DataGridCell.tsx b/packages/react-components/react-table/src/components/DataGridCell/DataGridCell.tsx index 649a9736380bf..869a865d3ba85 100644 --- a/packages/react-components/react-table/src/components/DataGridCell/DataGridCell.tsx +++ b/packages/react-components/react-table/src/components/DataGridCell/DataGridCell.tsx @@ -4,7 +4,7 @@ import { renderDataGridCell_unstable } from './renderDataGridCell'; import { useDataGridCellStyles_unstable } from './useDataGridCellStyles'; import type { DataGridCellProps } from './DataGridCell.types'; import type { ForwardRefComponent } from '@fluentui/react-utilities'; -import { useCustomStyleHooks_unstable } from '@fluentui/react-shared-contexts'; +import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts'; /** * DataGridCell component @@ -14,8 +14,7 @@ export const DataGridCell: ForwardRefComponent = React.forwar useDataGridCellStyles_unstable(state); - const { useDataGridCellStyles_unstable: useCustomStyles } = useCustomStyleHooks_unstable(); - useCustomStyles(state); + useCustomStyleHook_unstable('useDataGridCellStyles_unstable')(state); return renderDataGridCell_unstable(state); }); diff --git a/packages/react-components/react-table/src/components/DataGridHeader/DataGridHeader.tsx b/packages/react-components/react-table/src/components/DataGridHeader/DataGridHeader.tsx index 29c02f3e62b65..4096bc44e2eab 100644 --- a/packages/react-components/react-table/src/components/DataGridHeader/DataGridHeader.tsx +++ b/packages/react-components/react-table/src/components/DataGridHeader/DataGridHeader.tsx @@ -4,7 +4,7 @@ import { renderDataGridHeader_unstable } from './renderDataGridHeader'; import { useDataGridHeaderStyles_unstable } from './useDataGridHeaderStyles'; import type { DataGridHeaderProps } from './DataGridHeader.types'; import type { ForwardRefComponent } from '@fluentui/react-utilities'; -import { useCustomStyleHooks_unstable } from '@fluentui/react-shared-contexts'; +import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts'; /** * DataGridHeader component @@ -14,8 +14,7 @@ export const DataGridHeader: ForwardRefComponent = React.fo useDataGridHeaderStyles_unstable(state); - const { useDataGridHeaderStyles_unstable: useCustomStyles } = useCustomStyleHooks_unstable(); - useCustomStyles(state); + useCustomStyleHook_unstable('useDataGridHeaderStyles_unstable')(state); return renderDataGridHeader_unstable(state); }); diff --git a/packages/react-components/react-table/src/components/DataGridHeaderCell/DataGridHeaderCell.tsx b/packages/react-components/react-table/src/components/DataGridHeaderCell/DataGridHeaderCell.tsx index b1c0bb6faaff8..abd9fb7f63dd1 100644 --- a/packages/react-components/react-table/src/components/DataGridHeaderCell/DataGridHeaderCell.tsx +++ b/packages/react-components/react-table/src/components/DataGridHeaderCell/DataGridHeaderCell.tsx @@ -4,7 +4,7 @@ import { renderDataGridHeaderCell_unstable } from './renderDataGridHeaderCell'; import { useDataGridHeaderCellStyles_unstable } from './useDataGridHeaderCellStyles'; import type { DataGridHeaderCellProps } from './DataGridHeaderCell.types'; import type { ForwardRefComponent } from '@fluentui/react-utilities'; -import { useCustomStyleHooks_unstable } from '@fluentui/react-shared-contexts'; +import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts'; /** * DataGridHeaderCell component @@ -14,8 +14,7 @@ export const DataGridHeaderCell: ForwardRefComponent = useDataGridHeaderCellStyles_unstable(state); - const { useDataGridHeaderCellStyles_unstable: useCustomStyles } = useCustomStyleHooks_unstable(); - useCustomStyles(state); + useCustomStyleHook_unstable('useDataGridHeaderCellStyles_unstable')(state); return renderDataGridHeaderCell_unstable(state); }); diff --git a/packages/react-components/react-table/src/components/DataGridRow/DataGridRow.tsx b/packages/react-components/react-table/src/components/DataGridRow/DataGridRow.tsx index 2561aec9bb3c4..dc8f9c92c18ae 100644 --- a/packages/react-components/react-table/src/components/DataGridRow/DataGridRow.tsx +++ b/packages/react-components/react-table/src/components/DataGridRow/DataGridRow.tsx @@ -4,7 +4,7 @@ import { renderDataGridRow_unstable } from './renderDataGridRow'; import { useDataGridRowStyles_unstable } from './useDataGridRowStyles'; import type { DataGridRowProps } from './DataGridRow.types'; import type { ForwardRefComponent } from '@fluentui/react-utilities'; -import { useCustomStyleHooks_unstable } from '@fluentui/react-shared-contexts'; +import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts'; /** * DataGridRow component @@ -15,8 +15,7 @@ export const DataGridRow: ForwardRefComponent & useDataGridRowStyles_unstable(state); - const { useDataGridRowStyles_unstable: useCustomStyles } = useCustomStyleHooks_unstable(); - useCustomStyles(state); + useCustomStyleHook_unstable('useDataGridRowStyles_unstable')(state); return renderDataGridRow_unstable(state); }) as ForwardRefComponent & ((props: DataGridRowProps) => JSX.Element); diff --git a/packages/react-components/react-table/src/components/DataGridSelectionCell/DataGridSelectionCell.tsx b/packages/react-components/react-table/src/components/DataGridSelectionCell/DataGridSelectionCell.tsx index cb11ce2204168..9ee5b2ff85d15 100644 --- a/packages/react-components/react-table/src/components/DataGridSelectionCell/DataGridSelectionCell.tsx +++ b/packages/react-components/react-table/src/components/DataGridSelectionCell/DataGridSelectionCell.tsx @@ -4,7 +4,7 @@ import { renderDataGridSelectionCell_unstable } from './renderDataGridSelectionC import { useDataGridSelectionCellStyles_unstable } from './useDataGridSelectionCellStyles'; import type { DataGridSelectionCellProps } from './DataGridSelectionCell.types'; import type { ForwardRefComponent } from '@fluentui/react-utilities'; -import { useCustomStyleHooks_unstable } from '@fluentui/react-shared-contexts'; +import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts'; /** * DataGridSelectionCell component @@ -14,8 +14,7 @@ export const DataGridSelectionCell: ForwardRefComponent = React.forwardRef((props, r useTableStyles_unstable(state); - const { useTableStyles_unstable: useCustomStyles } = useCustomStyleHooks_unstable(); - useCustomStyles(state); + useCustomStyleHook_unstable('useTableStyles_unstable')(state); return renderTable_unstable(state, useTableContextValues_unstable(state)); }); diff --git a/packages/react-components/react-table/src/components/TableBody/TableBody.tsx b/packages/react-components/react-table/src/components/TableBody/TableBody.tsx index 125fa17c48545..e5914023cd9ae 100644 --- a/packages/react-components/react-table/src/components/TableBody/TableBody.tsx +++ b/packages/react-components/react-table/src/components/TableBody/TableBody.tsx @@ -4,7 +4,7 @@ import { renderTableBody_unstable } from './renderTableBody'; import { useTableBodyStyles_unstable } from './useTableBodyStyles'; import type { TableBodyProps } from './TableBody.types'; import type { ForwardRefComponent } from '@fluentui/react-utilities'; -import { useCustomStyleHooks_unstable } from '@fluentui/react-shared-contexts'; +import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts'; /** * TableBody component @@ -14,8 +14,7 @@ export const TableBody: ForwardRefComponent = React.forwardRef(( useTableBodyStyles_unstable(state); - const { useTableBodyStyles_unstable: useCustomStyles } = useCustomStyleHooks_unstable(); - useCustomStyles(state); + useCustomStyleHook_unstable('useTableBodyStyles_unstable')(state); return renderTableBody_unstable(state); }); diff --git a/packages/react-components/react-table/src/components/TableCell/TableCell.tsx b/packages/react-components/react-table/src/components/TableCell/TableCell.tsx index df8b4e87d0ad7..0231e23c9a13d 100644 --- a/packages/react-components/react-table/src/components/TableCell/TableCell.tsx +++ b/packages/react-components/react-table/src/components/TableCell/TableCell.tsx @@ -4,7 +4,7 @@ import { renderTableCell_unstable } from './renderTableCell'; import { useTableCellStyles_unstable } from './useTableCellStyles'; import type { TableCellProps } from './TableCell.types'; import type { ForwardRefComponent } from '@fluentui/react-utilities'; -import { useCustomStyleHooks_unstable } from '@fluentui/react-shared-contexts'; +import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts'; /** * TableCell component @@ -14,8 +14,7 @@ export const TableCell: ForwardRefComponent = React.forwardRef(( useTableCellStyles_unstable(state); - const { useTableCellStyles_unstable: useCustomStyles } = useCustomStyleHooks_unstable(); - useCustomStyles(state); + useCustomStyleHook_unstable('useTableCellStyles_unstable')(state); return renderTableCell_unstable(state); }); diff --git a/packages/react-components/react-table/src/components/TableCellActions/TableCellActions.tsx b/packages/react-components/react-table/src/components/TableCellActions/TableCellActions.tsx index eef2a743d330d..f6108a1f10598 100644 --- a/packages/react-components/react-table/src/components/TableCellActions/TableCellActions.tsx +++ b/packages/react-components/react-table/src/components/TableCellActions/TableCellActions.tsx @@ -4,7 +4,7 @@ import { renderTableCellActions_unstable } from './renderTableCellActions'; import { useTableCellActionsStyles_unstable } from './useTableCellActionsStyles'; import type { TableCellActionsProps } from './TableCellActions.types'; import type { ForwardRefComponent } from '@fluentui/react-utilities'; -import { useCustomStyleHooks_unstable } from '@fluentui/react-shared-contexts'; +import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts'; /** * TableCellActions component @@ -14,8 +14,7 @@ export const TableCellActions: ForwardRefComponent = Reac useTableCellActionsStyles_unstable(state); - const { useTableCellActionsStyles_unstable: useCustomStyles } = useCustomStyleHooks_unstable(); - useCustomStyles(state); + useCustomStyleHook_unstable('useTableCellActionsStyles_unstable')(state); return renderTableCellActions_unstable(state); }); diff --git a/packages/react-components/react-table/src/components/TableCellLayout/TableCellLayout.tsx b/packages/react-components/react-table/src/components/TableCellLayout/TableCellLayout.tsx index 2064b20bc40bb..90ccb32c50edc 100644 --- a/packages/react-components/react-table/src/components/TableCellLayout/TableCellLayout.tsx +++ b/packages/react-components/react-table/src/components/TableCellLayout/TableCellLayout.tsx @@ -5,7 +5,7 @@ import { useTableCellLayoutStyles_unstable } from './useTableCellLayoutStyles'; import { useTableCellLayoutContextValues_unstable } from './useTableCellLayoutContextValues'; import type { TableCellLayoutProps } from './TableCellLayout.types'; import type { ForwardRefComponent } from '@fluentui/react-utilities'; -import { useCustomStyleHooks_unstable } from '@fluentui/react-shared-contexts'; +import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts'; /** * TableCellLayout component @@ -15,8 +15,7 @@ export const TableCellLayout: ForwardRefComponent = React. useTableCellLayoutStyles_unstable(state); - const { useTableCellLayoutStyles_unstable: useCustomStyles } = useCustomStyleHooks_unstable(); - useCustomStyles(state); + useCustomStyleHook_unstable('useTableCellLayoutStyles_unstable')(state); return renderTableCellLayout_unstable(state, useTableCellLayoutContextValues_unstable(state)); }); diff --git a/packages/react-components/react-table/src/components/TableHeader/TableHeader.tsx b/packages/react-components/react-table/src/components/TableHeader/TableHeader.tsx index a6920f9f15ca6..54a36922baa0e 100644 --- a/packages/react-components/react-table/src/components/TableHeader/TableHeader.tsx +++ b/packages/react-components/react-table/src/components/TableHeader/TableHeader.tsx @@ -4,7 +4,7 @@ import { renderTableHeader_unstable } from './renderTableHeader'; import { useTableHeaderStyles_unstable } from './useTableHeaderStyles'; import type { TableHeaderProps } from './TableHeader.types'; import type { ForwardRefComponent } from '@fluentui/react-utilities'; -import { useCustomStyleHooks_unstable } from '@fluentui/react-shared-contexts'; +import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts'; /** * TableHeader component @@ -14,8 +14,7 @@ export const TableHeader: ForwardRefComponent = React.forwardR useTableHeaderStyles_unstable(state); - const { useTableHeaderStyles_unstable: useCustomStyles } = useCustomStyleHooks_unstable(); - useCustomStyles(state); + useCustomStyleHook_unstable('useTableHeaderStyles_unstable')(state); return renderTableHeader_unstable(state); }); diff --git a/packages/react-components/react-table/src/components/TableHeaderCell/TableHeaderCell.tsx b/packages/react-components/react-table/src/components/TableHeaderCell/TableHeaderCell.tsx index c89e413956448..9a97cd5d8376d 100644 --- a/packages/react-components/react-table/src/components/TableHeaderCell/TableHeaderCell.tsx +++ b/packages/react-components/react-table/src/components/TableHeaderCell/TableHeaderCell.tsx @@ -4,7 +4,7 @@ import { renderTableHeaderCell_unstable } from './renderTableHeaderCell'; import { useTableHeaderCellStyles_unstable } from './useTableHeaderCellStyles'; import type { TableHeaderCellProps } from './TableHeaderCell.types'; import type { ForwardRefComponent } from '@fluentui/react-utilities'; -import { useCustomStyleHooks_unstable } from '@fluentui/react-shared-contexts'; +import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts'; /** * TableHeaderCell component @@ -14,8 +14,7 @@ export const TableHeaderCell: ForwardRefComponent = React. useTableHeaderCellStyles_unstable(state); - const { useTableHeaderCellStyles_unstable: useCustomStyles } = useCustomStyleHooks_unstable(); - useCustomStyles(state); + useCustomStyleHook_unstable('useTableHeaderCellStyles_unstable')(state); return renderTableHeaderCell_unstable(state); }); diff --git a/packages/react-components/react-table/src/components/TableResizeHandle/TableResizeHandle.tsx b/packages/react-components/react-table/src/components/TableResizeHandle/TableResizeHandle.tsx index 67863b2566f58..48baf470cb615 100644 --- a/packages/react-components/react-table/src/components/TableResizeHandle/TableResizeHandle.tsx +++ b/packages/react-components/react-table/src/components/TableResizeHandle/TableResizeHandle.tsx @@ -4,7 +4,7 @@ import { renderTableResizeHandle_unstable } from './renderTableResizeHandle'; import { useTableResizeHandleStyles_unstable } from './useTableResizeHandleStyles'; import type { TableResizeHandleProps } from './TableResizeHandle.types'; import type { ForwardRefComponent } from '@fluentui/react-utilities'; -import { useCustomStyleHooks_unstable } from '@fluentui/react-shared-contexts'; +import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts'; /** * TableResizeHandle component - TODO: add more docs @@ -14,8 +14,7 @@ export const TableResizeHandle: ForwardRefComponent = Re useTableResizeHandleStyles_unstable(state); - const { useTableResizeHandleStyles_unstable: useCustomStyles } = useCustomStyleHooks_unstable(); - useCustomStyles(state); + useCustomStyleHook_unstable('useTableResizeHandleStyles_unstable')(state); return renderTableResizeHandle_unstable(state); }); diff --git a/packages/react-components/react-table/src/components/TableRow/TableRow.tsx b/packages/react-components/react-table/src/components/TableRow/TableRow.tsx index 1322f826ea43b..ac8c2aadf3cd8 100644 --- a/packages/react-components/react-table/src/components/TableRow/TableRow.tsx +++ b/packages/react-components/react-table/src/components/TableRow/TableRow.tsx @@ -4,7 +4,7 @@ import { renderTableRow_unstable } from './renderTableRow'; import { useTableRowStyles_unstable } from './useTableRowStyles'; import type { TableRowProps } from './TableRow.types'; import type { ForwardRefComponent } from '@fluentui/react-utilities'; -import { useCustomStyleHooks_unstable } from '@fluentui/react-shared-contexts'; +import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts'; /** * TableRow component @@ -14,8 +14,7 @@ export const TableRow: ForwardRefComponent = React.forwardRef((pr useTableRowStyles_unstable(state); - const { useTableRowStyles_unstable: useCustomStyles } = useCustomStyleHooks_unstable(); - useCustomStyles(state); + useCustomStyleHook_unstable('useTableRowStyles_unstable')(state); return renderTableRow_unstable(state); }); diff --git a/packages/react-components/react-table/src/components/TableSelectionCell/TableSelectionCell.tsx b/packages/react-components/react-table/src/components/TableSelectionCell/TableSelectionCell.tsx index 18f86766f4328..c6cea6d292325 100644 --- a/packages/react-components/react-table/src/components/TableSelectionCell/TableSelectionCell.tsx +++ b/packages/react-components/react-table/src/components/TableSelectionCell/TableSelectionCell.tsx @@ -4,7 +4,7 @@ import { renderTableSelectionCell_unstable } from './renderTableSelectionCell'; import { useTableSelectionCellStyles_unstable } from './useTableSelectionCellStyles'; import type { TableSelectionCellProps } from './TableSelectionCell.types'; import type { ForwardRefComponent } from '@fluentui/react-utilities'; -import { useCustomStyleHooks_unstable } from '@fluentui/react-shared-contexts'; +import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts'; /** * TableSelectionCell component @@ -14,8 +14,7 @@ export const TableSelectionCell: ForwardRefComponent = useTableSelectionCellStyles_unstable(state); - const { useTableSelectionCellStyles_unstable: useCustomStyles } = useCustomStyleHooks_unstable(); - useCustomStyles(state); + useCustomStyleHook_unstable('useTableSelectionCellStyles_unstable')(state); return renderTableSelectionCell_unstable(state); }); diff --git a/packages/react-components/react-tabs/src/components/Tab/Tab.tsx b/packages/react-components/react-tabs/src/components/Tab/Tab.tsx index 764b4f87decbd..a193d1c82147d 100644 --- a/packages/react-components/react-tabs/src/components/Tab/Tab.tsx +++ b/packages/react-components/react-tabs/src/components/Tab/Tab.tsx @@ -4,7 +4,7 @@ import { renderTab_unstable } from './renderTab'; import { useTabStyles_unstable } from './useTabStyles'; import type { TabProps } from './Tab.types'; import type { ForwardRefComponent } from '@fluentui/react-utilities'; -import { useCustomStyleHooks_unstable } from '@fluentui/react-shared-contexts'; +import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts'; /** * A tab provides a selectable item in a tab list. @@ -14,8 +14,7 @@ export const Tab: ForwardRefComponent = React.forwardRef((props, ref) useTabStyles_unstable(state); - const { useTabStyles_unstable: useCustomStyles } = useCustomStyleHooks_unstable(); - useCustomStyles(state); + useCustomStyleHook_unstable('useTabStyles_unstable')(state); return renderTab_unstable(state); }); diff --git a/packages/react-components/react-tabs/src/components/TabList/TabList.tsx b/packages/react-components/react-tabs/src/components/TabList/TabList.tsx index 2c938dbb72c49..bd5ce0ae03331 100644 --- a/packages/react-components/react-tabs/src/components/TabList/TabList.tsx +++ b/packages/react-components/react-tabs/src/components/TabList/TabList.tsx @@ -5,7 +5,7 @@ import { useTabListStyles_unstable } from './useTabListStyles'; import type { TabListProps } from './TabList.types'; import type { ForwardRefComponent } from '@fluentui/react-utilities'; import { useTabListContextValues_unstable } from './useTabListContextValues'; -import { useCustomStyleHooks_unstable } from '@fluentui/react-shared-contexts'; +import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts'; /** * A tab list provides single selection from a set of tabs. @@ -16,8 +16,7 @@ export const TabList: ForwardRefComponent = React.forwardRef((prop useTabListStyles_unstable(state); - const { useTabListStyles_unstable: useCustomStyles } = useCustomStyleHooks_unstable(); - useCustomStyles(state); + useCustomStyleHook_unstable('useTabListStyles_unstable')(state); return renderTabList_unstable(state, contextValues); }); diff --git a/packages/react-components/react-text/src/components/Text/Text.tsx b/packages/react-components/react-text/src/components/Text/Text.tsx index f9ca2632f0f94..c30202af56062 100644 --- a/packages/react-components/react-text/src/components/Text/Text.tsx +++ b/packages/react-components/react-text/src/components/Text/Text.tsx @@ -4,7 +4,7 @@ import { renderText_unstable } from './renderText'; import { useTextStyles_unstable } from './useTextStyles'; import type { TextProps } from './Text.types'; import type { ForwardRefComponent } from '@fluentui/react-utilities'; -import { useCustomStyleHooks_unstable } from '@fluentui/react-shared-contexts'; +import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts'; /** * Typography and styling abstraction component used to ensure consistency of text. @@ -14,8 +14,7 @@ export const Text: ForwardRefComponent = React.forwardRef((props, ref useTextStyles_unstable(state); - const { useTextStyles_unstable: useCustomStyles } = useCustomStyleHooks_unstable(); - useCustomStyles(state); + useCustomStyleHook_unstable('useTextStyles_unstable')(state); return renderText_unstable(state); // Work around some small mismatches in inferred types which don't matter in practice diff --git a/packages/react-components/react-textarea/src/components/Textarea/Textarea.tsx b/packages/react-components/react-textarea/src/components/Textarea/Textarea.tsx index 9f5cbf5d4523e..3d42fbfd89935 100644 --- a/packages/react-components/react-textarea/src/components/Textarea/Textarea.tsx +++ b/packages/react-components/react-textarea/src/components/Textarea/Textarea.tsx @@ -4,7 +4,7 @@ import { useTextarea_unstable } from './useTextarea'; import { useTextareaStyles_unstable } from './useTextareaStyles'; import type { ForwardRefComponent } from '@fluentui/react-utilities'; import type { TextareaProps } from './Textarea.types'; -import { useCustomStyleHooks_unstable } from '@fluentui/react-shared-contexts'; +import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts'; /** * The Textarea component allows the user to enter and edit text in multiple lines. @@ -14,8 +14,7 @@ export const Textarea: ForwardRefComponent = React.forwardRef((pr useTextareaStyles_unstable(state); - const { useTextareaStyles_unstable: useCustomStyles } = useCustomStyleHooks_unstable(); - useCustomStyles(state); + useCustomStyleHook_unstable('useTextareaStyles_unstable')(state); return renderTextarea_unstable(state); }); diff --git a/packages/react-components/react-toolbar/src/components/Toolbar/Toolbar.tsx b/packages/react-components/react-toolbar/src/components/Toolbar/Toolbar.tsx index f0a9ca51f6866..4a454af882ae0 100644 --- a/packages/react-components/react-toolbar/src/components/Toolbar/Toolbar.tsx +++ b/packages/react-components/react-toolbar/src/components/Toolbar/Toolbar.tsx @@ -5,7 +5,7 @@ import { useToolbarStyles_unstable } from './useToolbarStyles'; import type { ToolbarProps } from './Toolbar.types'; import type { ForwardRefComponent } from '@fluentui/react-utilities'; import { useToolbarContextValues_unstable } from './useToolbarContextValues'; -import { useCustomStyleHooks_unstable } from '@fluentui/react-shared-contexts'; +import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts'; /** * Toolbar component @@ -16,8 +16,7 @@ export const Toolbar: ForwardRefComponent = React.forwardRef((prop useToolbarStyles_unstable(state); - const { useToolbarStyles_unstable: useCustomStyles } = useCustomStyleHooks_unstable(); - useCustomStyles(state); + useCustomStyleHook_unstable('useToolbarStyles_unstable')(state); return renderToolbar_unstable(state, contextValues); }); diff --git a/packages/react-components/react-toolbar/src/components/ToolbarButton/ToolbarButton.tsx b/packages/react-components/react-toolbar/src/components/ToolbarButton/ToolbarButton.tsx index 91be114bdd934..1d4db5f7d309c 100644 --- a/packages/react-components/react-toolbar/src/components/ToolbarButton/ToolbarButton.tsx +++ b/packages/react-components/react-toolbar/src/components/ToolbarButton/ToolbarButton.tsx @@ -4,7 +4,7 @@ import type { ForwardRefComponent } from '@fluentui/react-utilities'; import { renderButton_unstable } from '@fluentui/react-button'; import { useToolbarButtonStyles_unstable } from './useToolbarButtonStyles'; import { useToolbarButton_unstable } from './useToolbarButton'; -import { useCustomStyleHooks_unstable } from '@fluentui/react-shared-contexts'; +import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts'; /** * ToolbarButton component is a Button to be used inside Toolbar @@ -15,8 +15,7 @@ export const ToolbarButton: ForwardRefComponent = React.forw useToolbarButtonStyles_unstable(state); - const { useToolbarButtonStyles_unstable: useCustomStyles } = useCustomStyleHooks_unstable(); - useCustomStyles(state); + useCustomStyleHook_unstable('useToolbarButtonStyles_unstable')(state); return renderButton_unstable(state); // Casting is required due to lack of distributive union to support unions on @types/react diff --git a/packages/react-components/react-toolbar/src/components/ToolbarDivider/ToolbarDivider.tsx b/packages/react-components/react-toolbar/src/components/ToolbarDivider/ToolbarDivider.tsx index c2f48533f21a3..2d782d28f5d7d 100644 --- a/packages/react-components/react-toolbar/src/components/ToolbarDivider/ToolbarDivider.tsx +++ b/packages/react-components/react-toolbar/src/components/ToolbarDivider/ToolbarDivider.tsx @@ -4,7 +4,7 @@ import type { ToolbarDividerProps } from './ToolbarDivider.types'; import type { ForwardRefComponent } from '@fluentui/react-utilities'; import { renderDivider_unstable } from '@fluentui/react-divider'; import { useToolbarDivider_unstable } from './useToolbarDivider'; -import { useCustomStyleHooks_unstable } from '@fluentui/react-shared-contexts'; +import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts'; /** * ToolbarDivider component @@ -14,8 +14,7 @@ export const ToolbarDivider: ForwardRefComponent = React.fo useToolbarDividerStyles_unstable(state); - const { useToolbarDividerStyles_unstable: useCustomStyles } = useCustomStyleHooks_unstable(); - useCustomStyles(state); + useCustomStyleHook_unstable('useToolbarDividerStyles_unstable')(state); return renderDivider_unstable(state); }); diff --git a/packages/react-components/react-toolbar/src/components/ToolbarGroup/ToolbarGroup.tsx b/packages/react-components/react-toolbar/src/components/ToolbarGroup/ToolbarGroup.tsx index 99eb603ca6e3f..c04c294b3d593 100644 --- a/packages/react-components/react-toolbar/src/components/ToolbarGroup/ToolbarGroup.tsx +++ b/packages/react-components/react-toolbar/src/components/ToolbarGroup/ToolbarGroup.tsx @@ -4,7 +4,7 @@ import type { ForwardRefComponent } from '@fluentui/react-utilities'; import { useToolbarGroup_unstable } from './useToolbarGroup'; import { useToolbarGroupStyles_unstable } from './useToolbarGroupStyles'; import { renderToolbarGroup_unstable } from './renderToolbarGroup'; -import { useCustomStyleHooks_unstable } from '@fluentui/react-shared-contexts'; +import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts'; /** * ToolbarGroup component is a Button to be used inside Toolbar @@ -15,8 +15,7 @@ export const ToolbarGroup: ForwardRefComponent = React.forwar useToolbarGroupStyles_unstable(state); - const { useToolbarGroupStyles_unstable: useCustomStyles } = useCustomStyleHooks_unstable(); - useCustomStyles(state); + useCustomStyleHook_unstable('useToolbarGroupStyles_unstable')(state); return renderToolbarGroup_unstable(state); // Casting is required due to lack of distributive union to support unions on @types/react diff --git a/packages/react-components/react-toolbar/src/components/ToolbarRadioButton/ToolbarRadioButton.tsx b/packages/react-components/react-toolbar/src/components/ToolbarRadioButton/ToolbarRadioButton.tsx index 4cfd6401277dd..89c26fec2c496 100644 --- a/packages/react-components/react-toolbar/src/components/ToolbarRadioButton/ToolbarRadioButton.tsx +++ b/packages/react-components/react-toolbar/src/components/ToolbarRadioButton/ToolbarRadioButton.tsx @@ -4,7 +4,7 @@ import type { ForwardRefComponent } from '@fluentui/react-utilities'; import { renderToggleButton_unstable } from '@fluentui/react-button'; import { useToolbarRadioButton_unstable } from './useToolbarRadioButton'; import { useToolbarRadioButtonStyles_unstable } from './useToolbarRadioButtonStyles'; -import { useCustomStyleHooks_unstable } from '@fluentui/react-shared-contexts'; +import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts'; /** * ToolbarRadioButton component @@ -14,8 +14,7 @@ export const ToolbarRadioButton: ForwardRefComponent = useToolbarRadioButtonStyles_unstable(state); - const { useToolbarRadioButtonStyles_unstable: useCustomStyles } = useCustomStyleHooks_unstable(); - useCustomStyles(state); + useCustomStyleHook_unstable('useToolbarRadioButtonStyles_unstable')(state); return renderToggleButton_unstable(state); }) as ForwardRefComponent; diff --git a/packages/react-components/react-toolbar/src/components/ToolbarRadioGroup/ToolbarRadioGroup.tsx b/packages/react-components/react-toolbar/src/components/ToolbarRadioGroup/ToolbarRadioGroup.tsx index 9539546bc450f..6096bc00cab2b 100644 --- a/packages/react-components/react-toolbar/src/components/ToolbarRadioGroup/ToolbarRadioGroup.tsx +++ b/packages/react-components/react-toolbar/src/components/ToolbarRadioGroup/ToolbarRadioGroup.tsx @@ -6,7 +6,7 @@ import { useToolbarGroupStyles_unstable, useToolbarGroup_unstable, } from '../../ToolbarGroup'; -import { useCustomStyleHooks_unstable } from '@fluentui/react-shared-contexts'; +import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts'; /** * ToolbarRadioGroup component is a Button to be used inside Toolbar @@ -17,8 +17,7 @@ export const ToolbarRadioGroup: ForwardRefComponent = Re useToolbarGroupStyles_unstable(state); - const { useToolbarGroupStyles_unstable: useCustomStyles } = useCustomStyleHooks_unstable(); - useCustomStyles(state); + useCustomStyleHook_unstable('useToolbarGroupStyles_unstable')(state); return renderToolbarGroup_unstable(state); // Casting is required due to lack of distributive union to support unions on @types/react diff --git a/packages/react-components/react-toolbar/src/components/ToolbarToggleButton/ToolbarToggleButton.tsx b/packages/react-components/react-toolbar/src/components/ToolbarToggleButton/ToolbarToggleButton.tsx index 80fc7463bd1b8..de23a76ef0b34 100644 --- a/packages/react-components/react-toolbar/src/components/ToolbarToggleButton/ToolbarToggleButton.tsx +++ b/packages/react-components/react-toolbar/src/components/ToolbarToggleButton/ToolbarToggleButton.tsx @@ -4,7 +4,7 @@ import type { ForwardRefComponent } from '@fluentui/react-utilities'; import { renderToggleButton_unstable } from '@fluentui/react-button'; import { useToolbarToggleButton_unstable } from './useToolbarToggleButton'; import { useToolbarToggleButtonStyles_unstable } from './useToolbarToggleButtonStyles'; -import { useCustomStyleHooks_unstable } from '@fluentui/react-shared-contexts'; +import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts'; /** * ToolbarToggleButton component @@ -14,8 +14,7 @@ export const ToolbarToggleButton: ForwardRefComponent useToolbarToggleButtonStyles_unstable(state); - const { useToolbarToggleButtonStyles_unstable: useCustomStyles } = useCustomStyleHooks_unstable(); - useCustomStyles(state); + useCustomStyleHook_unstable('useToolbarToggleButtonStyles_unstable')(state); return renderToggleButton_unstable(state); }) as ForwardRefComponent; diff --git a/packages/react-components/react-tooltip/src/components/Tooltip/Tooltip.tsx b/packages/react-components/react-tooltip/src/components/Tooltip/Tooltip.tsx index 4a0c6fc760718..3070dfda8c492 100644 --- a/packages/react-components/react-tooltip/src/components/Tooltip/Tooltip.tsx +++ b/packages/react-components/react-tooltip/src/components/Tooltip/Tooltip.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import { useTooltip_unstable } from './useTooltip'; import { renderTooltip_unstable } from './renderTooltip'; -import { useCustomStyleHooks_unstable } from '@fluentui/react-shared-contexts'; +import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts'; import { useTooltipStyles_unstable } from './useTooltipStyles'; import type { TooltipProps } from './Tooltip.types'; import type { FluentTriggerComponent } from '@fluentui/react-utilities'; @@ -14,8 +14,7 @@ export const Tooltip: React.FC = props => { useTooltipStyles_unstable(state); - const { useTooltipStyles_unstable: useCustomStyles } = useCustomStyleHooks_unstable(); - useCustomStyles(state); + useCustomStyleHook_unstable('useTooltipStyles_unstable')(state); return renderTooltip_unstable(state); };