diff --git a/.codesandbox/ci.json b/.codesandbox/ci.json index ca72bb41e8229..2cd7dc2ea27a1 100644 --- a/.codesandbox/ci.json +++ b/.codesandbox/ci.json @@ -2,5 +2,5 @@ "buildCommand": "build:codesandbox", "packages": ["packages/react", "packages/react-components/react-components"], "sandboxes": ["x5u3t", "spnyu"], - "node": "14" + "node": "16" } diff --git a/.devops/templates/tools.yml b/.devops/templates/tools.yml index 5b8b5d5004929..808451359407f 100644 --- a/.devops/templates/tools.yml +++ b/.devops/templates/tools.yml @@ -2,7 +2,7 @@ steps: - task: NodeTool@0 inputs: - versionSpec: '14.18.1' + versionSpec: '16.18.1' checkLatest: false displayName: 'Install Node.js' diff --git a/.github/CODEOWNERS b/.github/CODEOWNERS index a2389381423bf..036771c2bafd7 100644 --- a/.github/CODEOWNERS +++ b/.github/CODEOWNERS @@ -133,6 +133,7 @@ apps/recipes-react-components @microsoft/cxe-red @microsoft/cxe-coastal @microso #### Packages packages/azure-themes @Jacqueline-ms @robtaft-ms packages/bundle-size @microsoft/teams-prg +packages/react-conformance @microsoft/fluentui-react-build packages/date-time-utilities @microsoft/cxe-red packages/eslint-plugin @microsoft/fluentui-react-build packages/foundation-legacy @microsoft/cxe-red @khmakoto @@ -219,7 +220,6 @@ packages/react-components/babel-preset-global-context @microsoft/teams-prg packages/react-components/react-table @microsoft/teams-prg packages/react-components/react-progress @microsoft/cxe-red @tomi-msft packages/react-components/react-persona @microsoft/cxe-red @sopranopillow -packages/react-components/react-avatar-context @microsoft/teams-prg packages/react-components/react-infobutton @microsoft/cxe-red @sopranopillow packages/react-components/react-tree @microsoft/teams-prg packages/react-components/react-virtualizer @microsoft/xc-uxe @Mitch-At-Work diff --git a/.github/workflows/check-packages.yml b/.github/workflows/check-packages.yml index 26c19808851d0..fc352c1c4a715 100644 --- a/.github/workflows/check-packages.yml +++ b/.github/workflows/check-packages.yml @@ -12,7 +12,7 @@ jobs: - uses: actions/setup-node@v3 with: - node-version: 14.18.1 + node-version: 16.18.1 cache: 'yarn' - uses: tj-actions/changed-files@v34 @@ -44,7 +44,7 @@ jobs: - uses: actions/setup-node@v3 with: - node-version: 14.18.1 + node-version: 16.18.1 - uses: actions/github-script@v6 with: @@ -70,7 +70,7 @@ jobs: - uses: actions/setup-node@v3 with: - node-version: 14.18.1 + node-version: 16.18.1 - uses: actions/github-script@v6 with: diff --git a/.github/workflows/docsite-publish-chromatic.yml b/.github/workflows/docsite-publish-chromatic.yml index fc8ef562d8eba..20610ef7235f2 100644 --- a/.github/workflows/docsite-publish-chromatic.yml +++ b/.github/workflows/docsite-publish-chromatic.yml @@ -37,7 +37,7 @@ jobs: - uses: actions/setup-node@v3 with: - node-version: 14.18.1 + node-version: 16.18.1 cache: 'yarn' - name: Install packages diff --git a/.github/workflows/docsite-publish-ghpages.yml b/.github/workflows/docsite-publish-ghpages.yml index f358f4ce03052..6cc781319d398 100644 --- a/.github/workflows/docsite-publish-ghpages.yml +++ b/.github/workflows/docsite-publish-ghpages.yml @@ -37,7 +37,7 @@ jobs: - uses: actions/setup-node@v3 with: - node-version: 14.18.1 + node-version: 16.18.1 cache: 'yarn' - name: Install packages diff --git a/apps/public-docsite-v9/src/Concepts/Migration/FromV8/Components/Slider/Sliderv9Examples.stories.tsx b/apps/public-docsite-v9/src/Concepts/Migration/FromV8/Components/Slider/Sliderv9Examples.stories.tsx index bcf94140fb3f6..75c26dff94bf3 100644 --- a/apps/public-docsite-v9/src/Concepts/Migration/FromV8/Components/Slider/Sliderv9Examples.stories.tsx +++ b/apps/public-docsite-v9/src/Concepts/Migration/FromV8/Components/Slider/Sliderv9Examples.stories.tsx @@ -33,7 +33,7 @@ export const V9ControlledExample = () => { ); }; -const getFormattedExampleStyles = makeStyles({ +const useGetFormattedExampleStyles = makeStyles({ wrapper: { display: 'grid', alignItems: 'center', @@ -43,7 +43,7 @@ const getFormattedExampleStyles = makeStyles({ }); export const V9FormattedValueExample = () => { - const styles = getFormattedExampleStyles(); + const styles = useGetFormattedExampleStyles(); const [sliderValue, setSliderValue] = React.useState(0); const sliderOnChange: SliderProps['onChange'] = (ev, data) => setSliderValue(data.value); const formattedId = useId(); diff --git a/apps/react-18-tests-v8/jest.config.js b/apps/react-18-tests-v8/jest.config.js index dc4ce5443ae58..b61ba13a65141 100644 --- a/apps/react-18-tests-v8/jest.config.js +++ b/apps/react-18-tests-v8/jest.config.js @@ -15,7 +15,7 @@ if (config.globals) { // override ts-jest config, otherwise it gets merged config.globals['ts-jest'] = { tsconfig: '/tsconfig.spec.json', - diagnostics: { warnOnly: true /* , exclude: ['packages/**'] */ }, + isolatedModules: true, }; } diff --git a/apps/react-18-tests-v9/jest.config.js b/apps/react-18-tests-v9/jest.config.js index ff2e84e73010a..08de436edf022 100644 --- a/apps/react-18-tests-v9/jest.config.js +++ b/apps/react-18-tests-v9/jest.config.js @@ -9,7 +9,7 @@ module.exports = { globals: { 'ts-jest': { tsconfig: '/tsconfig.spec.json', - diagnostics: { warnOnly: true, exclude: ['packages/**'] }, + isolatedModules: true, }, }, transform: { diff --git a/apps/ssr-tests-v9/jest.config.js b/apps/ssr-tests-v9/jest.config.js index 3b7292734386e..71f9ab6510d2f 100644 --- a/apps/ssr-tests-v9/jest.config.js +++ b/apps/ssr-tests-v9/jest.config.js @@ -9,7 +9,7 @@ module.exports = { globals: { 'ts-jest': { tsconfig: '/tsconfig.spec.json', - diagnostics: false, + isolatedModules: true, }, }, transform: { diff --git a/apps/stress-test/jest.config.js b/apps/stress-test/jest.config.js index 3b7292734386e..71f9ab6510d2f 100644 --- a/apps/stress-test/jest.config.js +++ b/apps/stress-test/jest.config.js @@ -9,7 +9,7 @@ module.exports = { globals: { 'ts-jest': { tsconfig: '/tsconfig.spec.json', - diagnostics: false, + isolatedModules: true, }, }, transform: { diff --git a/apps/vr-tests-react-components/jest.config.js b/apps/vr-tests-react-components/jest.config.js index ee67c7a86d250..860d9c97635c5 100644 --- a/apps/vr-tests-react-components/jest.config.js +++ b/apps/vr-tests-react-components/jest.config.js @@ -9,7 +9,7 @@ module.exports = { globals: { 'ts-jest': { tsconfig: '/tsconfig.json', - diagnostics: false, + isolatedModules: true, }, }, transform: { diff --git a/change/@fluentui-eslint-plugin-5fd26f6f-a0b9-458f-80e0-86e99da9672a.json b/change/@fluentui-eslint-plugin-5fd26f6f-a0b9-458f-80e0-86e99da9672a.json new file mode 100644 index 0000000000000..f99e254f762e8 --- /dev/null +++ b/change/@fluentui-eslint-plugin-5fd26f6f-a0b9-458f-80e0-86e99da9672a.json @@ -0,0 +1,7 @@ +{ + "type": "minor", + "comment": "feat: enable @griffel/hook-naming rule", + "packageName": "@fluentui/eslint-plugin", + "email": "olfedias@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-global-context-bd251f47-0c11-4359-86a3-0ddfbab981a4.json b/change/@fluentui-global-context-bd251f47-0c11-4359-86a3-0ddfbab981a4.json new file mode 100644 index 0000000000000..fe5f8da92b509 --- /dev/null +++ b/change/@fluentui-global-context-bd251f47-0c11-4359-86a3-0ddfbab981a4.json @@ -0,0 +1,7 @@ +{ + "type": "none", + "comment": "chore: update internal types to reflect node 16 types", + "packageName": "@fluentui/global-context", + "email": "martinhochel@microsoft.com", + "dependentChangeType": "none" +} diff --git a/change/@fluentui-react-alert-bf0a8560-2a11-4cbd-abab-090b17f2f115.json b/change/@fluentui-react-alert-bf0a8560-2a11-4cbd-abab-090b17f2f115.json new file mode 100644 index 0000000000000..67ec74f9958e0 --- /dev/null +++ b/change/@fluentui-react-alert-bf0a8560-2a11-4cbd-abab-090b17f2f115.json @@ -0,0 +1,7 @@ +{ + "type": "prerelease", + "comment": "chore: move makeStyles() calls to .styles.ts files", + "packageName": "@fluentui/react-alert", + "email": "olfedias@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-card-89b5306c-af55-4d03-b990-f2b07036e565.json b/change/@fluentui-react-card-89b5306c-af55-4d03-b990-f2b07036e565.json new file mode 100644 index 0000000000000..6297d62da6515 --- /dev/null +++ b/change/@fluentui-react-card-89b5306c-af55-4d03-b990-f2b07036e565.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "chore: move makeStyles() calls to .styles.ts files", + "packageName": "@fluentui/react-card", + "email": "olfedias@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-combobox-aa8ff159-8fa3-4a0b-acf2-8b9bad6c66b7.json b/change/@fluentui-react-combobox-aa8ff159-8fa3-4a0b-acf2-8b9bad6c66b7.json new file mode 100644 index 0000000000000..02fbdfb85912e --- /dev/null +++ b/change/@fluentui-react-combobox-aa8ff159-8fa3-4a0b-acf2-8b9bad6c66b7.json @@ -0,0 +1,7 @@ +{ + "type": "minor", + "comment": "feat: allow space character insertion while typing in freeform combobox", + "packageName": "@fluentui/react-combobox", + "email": "sarah.higley@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-components-9cf91ecc-b503-4ff6-92cb-f50e3d21b209.json b/change/@fluentui-react-components-9cf91ecc-b503-4ff6-92cb-f50e3d21b209.json new file mode 100644 index 0000000000000..44692a4396bbb --- /dev/null +++ b/change/@fluentui-react-components-9cf91ecc-b503-4ff6-92cb-f50e3d21b209.json @@ -0,0 +1,7 @@ +{ + "type": "minor", + "comment": "feat: added useOverflowCount to react-components exports", + "packageName": "@fluentui/react-components", + "email": "kakrookaran@gmail.com", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-conformance-9b875b33-ced4-434a-9690-448766658f08.json b/change/@fluentui-react-conformance-9b875b33-ced4-434a-9690-448766658f08.json new file mode 100644 index 0000000000000..26d48b6da4a78 --- /dev/null +++ b/change/@fluentui-react-conformance-9b875b33-ced4-434a-9690-448766658f08.json @@ -0,0 +1,7 @@ +{ + "type": "minor", + "comment": "feat: add new TS config api to be able to specify configName and configDir", + "packageName": "@fluentui/react-conformance", + "email": "martinhochel@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-data-grid-react-window-4eb5b7ef-7eb3-43be-8678-f904b1c34516.json b/change/@fluentui-react-data-grid-react-window-4eb5b7ef-7eb3-43be-8678-f904b1c34516.json new file mode 100644 index 0000000000000..68215b548f09e --- /dev/null +++ b/change/@fluentui-react-data-grid-react-window-4eb5b7ef-7eb3-43be-8678-f904b1c34516.json @@ -0,0 +1,7 @@ +{ + "type": "prerelease", + "comment": "chore: move makeStyles() calls to .styles.ts files", + "packageName": "@fluentui/react-data-grid-react-window", + "email": "olfedias@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-dialog-589ba0e3-87be-4c97-84f7-1e0e44d016c0.json b/change/@fluentui-react-dialog-589ba0e3-87be-4c97-84f7-1e0e44d016c0.json new file mode 100644 index 0000000000000..5e622cf4dad62 --- /dev/null +++ b/change/@fluentui-react-dialog-589ba0e3-87be-4c97-84f7-1e0e44d016c0.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "chore: move makeStyles() calls to .styles.ts files", + "packageName": "@fluentui/react-dialog", + "email": "olfedias@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-docsite-components-7f162818-fcb4-4cbe-8dc1-6d855e04b980.json b/change/@fluentui-react-docsite-components-7f162818-fcb4-4cbe-8dc1-6d855e04b980.json new file mode 100644 index 0000000000000..e2cdde7c9ca42 --- /dev/null +++ b/change/@fluentui-react-docsite-components-7f162818-fcb4-4cbe-8dc1-6d855e04b980.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "Enable export to codepen for react charting", + "packageName": "@fluentui/react-docsite-components", + "email": "atishay.jain@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-image-92afbcf5-895a-4a67-a8d1-44863348de3e.json b/change/@fluentui-react-image-92afbcf5-895a-4a67-a8d1-44863348de3e.json new file mode 100644 index 0000000000000..34eebf3ee4df2 --- /dev/null +++ b/change/@fluentui-react-image-92afbcf5-895a-4a67-a8d1-44863348de3e.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "chore: move makeStyles() calls to .styles.ts files", + "packageName": "@fluentui/react-image", + "email": "olfedias@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-menu-219a86a1-336b-4011-9f84-a69f77ffcf64.json b/change/@fluentui-react-menu-219a86a1-336b-4011-9f84-a69f77ffcf64.json new file mode 100644 index 0000000000000..39639448387eb --- /dev/null +++ b/change/@fluentui-react-menu-219a86a1-336b-4011-9f84-a69f77ffcf64.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "fix: Menu should not steal focus on re-render", + "packageName": "@fluentui/react-menu", + "email": "lingfangao@hotmail.com", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-menu-ce914d92-b9ef-49ba-9259-00beb4ee18b6.json b/change/@fluentui-react-menu-ce914d92-b9ef-49ba-9259-00beb4ee18b6.json new file mode 100644 index 0000000000000..4f19e9862ee6c --- /dev/null +++ b/change/@fluentui-react-menu-ce914d92-b9ef-49ba-9259-00beb4ee18b6.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "chore: move makeStyles() calls to .styles.ts files", + "packageName": "@fluentui/react-menu", + "email": "olfedias@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-monaco-editor-eacbbb2f-ad95-4072-81d7-0d97fa23090f.json b/change/@fluentui-react-monaco-editor-eacbbb2f-ad95-4072-81d7-0d97fa23090f.json new file mode 100644 index 0000000000000..a14c3d39ca0a1 --- /dev/null +++ b/change/@fluentui-react-monaco-editor-eacbbb2f-ad95-4072-81d7-0d97fa23090f.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "Add react charting to support export to codepen", + "packageName": "@fluentui/react-monaco-editor", + "email": "atishay.jain@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-overflow-a55c8fa2-3e82-481d-9e24-f502760f0c87.json b/change/@fluentui-react-overflow-a55c8fa2-3e82-481d-9e24-f502760f0c87.json new file mode 100644 index 0000000000000..41e78b13023a7 --- /dev/null +++ b/change/@fluentui-react-overflow-a55c8fa2-3e82-481d-9e24-f502760f0c87.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "chore: move makeStyles() calls to .styles.ts files", + "packageName": "@fluentui/react-overflow", + "email": "olfedias@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-popover-3d948712-f4d9-4e1b-bd80-1b38cd60da1c.json b/change/@fluentui-react-popover-3d948712-f4d9-4e1b-bd80-1b38cd60da1c.json new file mode 100644 index 0000000000000..29f554ac83bcf --- /dev/null +++ b/change/@fluentui-react-popover-3d948712-f4d9-4e1b-bd80-1b38cd60da1c.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "chore: move makeStyles() calls to .styles.ts files", + "packageName": "@fluentui/react-popover", + "email": "olfedias@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-portal-c5baa26a-8d16-4d09-a003-7ab57ca5659b.json b/change/@fluentui-react-portal-c5baa26a-8d16-4d09-a003-7ab57ca5659b.json new file mode 100644 index 0000000000000..90aadd2091f39 --- /dev/null +++ b/change/@fluentui-react-portal-c5baa26a-8d16-4d09-a003-7ab57ca5659b.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "chore: move makeStyles() calls to .styles.ts files", + "packageName": "@fluentui/react-portal", + "email": "olfedias@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-provider-0530b7e5-56a7-4fee-be88-952cc1896cc8.json b/change/@fluentui-react-provider-0530b7e5-56a7-4fee-be88-952cc1896cc8.json new file mode 100644 index 0000000000000..b0213707de247 --- /dev/null +++ b/change/@fluentui-react-provider-0530b7e5-56a7-4fee-be88-952cc1896cc8.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "chore: move makeStyles() calls to .styles.ts files", + "packageName": "@fluentui/react-provider", + "email": "olfedias@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-table-51c05197-e10f-49cd-a537-b19d4a4f7dd9.json b/change/@fluentui-react-table-51c05197-e10f-49cd-a537-b19d4a4f7dd9.json new file mode 100644 index 0000000000000..530abec2115ea --- /dev/null +++ b/change/@fluentui-react-table-51c05197-e10f-49cd-a537-b19d4a4f7dd9.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "chore: move makeStyles() calls to .styles.ts files", + "packageName": "@fluentui/react-table", + "email": "olfedias@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-text-7a7f2c17-ac1a-481e-92c2-28e5e19a1c7a.json b/change/@fluentui-react-text-7a7f2c17-ac1a-481e-92c2-28e5e19a1c7a.json new file mode 100644 index 0000000000000..9f41c3834f73e --- /dev/null +++ b/change/@fluentui-react-text-7a7f2c17-ac1a-481e-92c2-28e5e19a1c7a.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "chore: move makeStyles() calls to .styles.ts files", + "packageName": "@fluentui/react-text", + "email": "olfedias@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-toolbar-f331e95e-2241-42a7-8319-e27d78457cc5.json b/change/@fluentui-react-toolbar-f331e95e-2241-42a7-8319-e27d78457cc5.json new file mode 100644 index 0000000000000..3de71bf9ea345 --- /dev/null +++ b/change/@fluentui-react-toolbar-f331e95e-2241-42a7-8319-e27d78457cc5.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "chore: move makeStyles() calls to .styles.ts files", + "packageName": "@fluentui/react-toolbar", + "email": "olfedias@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-tree-84a7e55a-0a40-4b0e-8bb8-a3feb88fa234.json b/change/@fluentui-react-tree-84a7e55a-0a40-4b0e-8bb8-a3feb88fa234.json new file mode 100644 index 0000000000000..f42640c8d4809 --- /dev/null +++ b/change/@fluentui-react-tree-84a7e55a-0a40-4b0e-8bb8-a3feb88fa234.json @@ -0,0 +1,7 @@ +{ + "type": "prerelease", + "comment": "feat: makes useFlatTree generic", + "packageName": "@fluentui/react-tree", + "email": "bernardo.sunderhus@gmail.com", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-tree-8e9777b6-6274-44dd-b7ce-08b5886bec49.json b/change/@fluentui-react-tree-8e9777b6-6274-44dd-b7ce-08b5886bec49.json new file mode 100644 index 0000000000000..db09e5486bcbe --- /dev/null +++ b/change/@fluentui-react-tree-8e9777b6-6274-44dd-b7ce-08b5886bec49.json @@ -0,0 +1,7 @@ +{ + "type": "prerelease", + "comment": "chore: updates useOpenItemsState internals", + "packageName": "@fluentui/react-tree", + "email": "bernardo.sunderhus@gmail.com", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-tree-a7765c4b-3557-4927-9f74-96da76ce5ccb.json b/change/@fluentui-react-tree-a7765c4b-3557-4927-9f74-96da76ce5ccb.json new file mode 100644 index 0000000000000..870eac1d9832d --- /dev/null +++ b/change/@fluentui-react-tree-a7765c4b-3557-4927-9f74-96da76ce5ccb.json @@ -0,0 +1,7 @@ +{ + "type": "prerelease", + "comment": "chore: move makeStyles() calls to .styles.ts files", + "packageName": "@fluentui/react-tree", + "email": "olfedias@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-tree-d2b17f80-1a10-4456-a7dd-89b53f9a27f4.json b/change/@fluentui-react-tree-d2b17f80-1a10-4456-a7dd-89b53f9a27f4.json new file mode 100644 index 0000000000000..17dbe4f6863fe --- /dev/null +++ b/change/@fluentui-react-tree-d2b17f80-1a10-4456-a7dd-89b53f9a27f4.json @@ -0,0 +1,7 @@ +{ + "type": "prerelease", + "comment": "feat: adds lazy loading story", + "packageName": "@fluentui/react-tree", + "email": "bernardo.sunderhus@gmail.com", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-utilities-fa9ce15a-c1d5-4b9a-93e7-e07b2d60b837.json b/change/@fluentui-react-utilities-fa9ce15a-c1d5-4b9a-93e7-e07b2d60b837.json new file mode 100644 index 0000000000000..0eb8f7bc317d7 --- /dev/null +++ b/change/@fluentui-react-utilities-fa9ce15a-c1d5-4b9a-93e7-e07b2d60b837.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "chore: simplifies useControllableState hook internals", + "packageName": "@fluentui/react-utilities", + "email": "bernardo.sunderhus@gmail.com", + "dependentChangeType": "patch" +} diff --git a/package.json b/package.json index 12d49f6b292c6..a86ad0a03c512 100644 --- a/package.json +++ b/package.json @@ -8,7 +8,7 @@ "url": "https://github.com/microsoft/fluentui" }, "engines": { - "node": "^14.18.1 || ^16.0.0" + "node": "^16.18.1 || ^18.0.0" }, "scripts": { "build": "lage build --verbose", @@ -89,7 +89,7 @@ "@cypress/webpack-dev-server": "1.8.3", "@fluentui/react-icons": "^2.0.196", "@griffel/babel-preset": "1.4.8", - "@griffel/eslint-plugin": "1.0.0", + "@griffel/eslint-plugin": "^1.2.0", "@griffel/jest-serializer": "1.1.4", "@griffel/react": "^1.5.2", "@griffel/webpack-extraction-plugin": "0.3.3", @@ -165,7 +165,7 @@ "@types/lodash": "4.14.182", "@types/markdown-table": "2.0.0", "@types/micromatch": "4.0.2", - "@types/node": "14.18.32", + "@types/node": "16.18.1", "@types/node-fetch": "2.5.7", "@types/prettier": "2.7.2", "@types/progress": "2.0.5", diff --git a/packages/eslint-plugin/package.json b/packages/eslint-plugin/package.json index 333859b9a1e34..01a723281b577 100644 --- a/packages/eslint-plugin/package.json +++ b/packages/eslint-plugin/package.json @@ -13,6 +13,7 @@ "test": "yarn jest --passWithNoTests" }, "dependencies": { + "@griffel/eslint-plugin": "^1.2.0", "@rnx-kit/eslint-plugin": "^0.2.5", "@typescript-eslint/eslint-plugin": "^4.22.0", "@typescript-eslint/experimental-utils": "^4.22.0", diff --git a/packages/eslint-plugin/src/configs/react-config.js b/packages/eslint-plugin/src/configs/react-config.js index e3a86533ddc77..a65c56b48539b 100644 --- a/packages/eslint-plugin/src/configs/react-config.js +++ b/packages/eslint-plugin/src/configs/react-config.js @@ -25,6 +25,7 @@ module.exports = { * griffel eslint rules * @see https://github.com/microsoft/griffel/tree/main/packages/eslint-plugin */ + '@griffel/hook-naming': 'error', '@griffel/no-shorthands': 'error', /** * react eslint rules diff --git a/packages/react-components/babel-preset-global-context/jest.config.js b/packages/react-components/babel-preset-global-context/jest.config.js index c35f80f6a167e..a962e4119eb6d 100644 --- a/packages/react-components/babel-preset-global-context/jest.config.js +++ b/packages/react-components/babel-preset-global-context/jest.config.js @@ -9,7 +9,7 @@ module.exports = { globals: { 'ts-jest': { tsconfig: '/tsconfig.spec.json', - diagnostics: false, + isolatedModules: true, }, }, transform: { diff --git a/packages/react-components/babel-preset-storybook-full-source/jest.config.js b/packages/react-components/babel-preset-storybook-full-source/jest.config.js index dafc6e0002a6b..3a35e5b8bdd72 100644 --- a/packages/react-components/babel-preset-storybook-full-source/jest.config.js +++ b/packages/react-components/babel-preset-storybook-full-source/jest.config.js @@ -9,7 +9,7 @@ module.exports = { globals: { 'ts-jest': { tsconfig: '/tsconfig.spec.json', - diagnostics: false, + isolatedModules: true, }, }, transform: { diff --git a/packages/react-components/global-context/jest.config.js b/packages/react-components/global-context/jest.config.js index 89b83781aad75..cc8d64ae4a43a 100644 --- a/packages/react-components/global-context/jest.config.js +++ b/packages/react-components/global-context/jest.config.js @@ -9,7 +9,7 @@ module.exports = { globals: { 'ts-jest': { tsconfig: '/tsconfig.spec.json', - diagnostics: false, + isolatedModules: true, }, }, transform: { diff --git a/packages/react-components/global-context/src/types.ts b/packages/react-components/global-context/src/types.ts index 0010ac80544e8..79a9007e8228b 100644 --- a/packages/react-components/global-context/src/types.ts +++ b/packages/react-components/global-context/src/types.ts @@ -1,3 +1,3 @@ import * as React from 'react'; -export type GlobalObject = (typeof globalThis | NodeJS.Global) & Record>; +export type GlobalObject = typeof globalThis & Record>; diff --git a/packages/react-components/keyboard-keys/jest.config.js b/packages/react-components/keyboard-keys/jest.config.js index f4f30182fe771..5e16ee4e6b8d8 100644 --- a/packages/react-components/keyboard-keys/jest.config.js +++ b/packages/react-components/keyboard-keys/jest.config.js @@ -9,7 +9,7 @@ module.exports = { globals: { 'ts-jest': { tsconfig: '/tsconfig.spec.json', - diagnostics: false, + isolatedModules: true, }, }, transform: { diff --git a/packages/react-components/priority-overflow/jest.config.js b/packages/react-components/priority-overflow/jest.config.js index 5be1fb0250886..994e3d649a430 100644 --- a/packages/react-components/priority-overflow/jest.config.js +++ b/packages/react-components/priority-overflow/jest.config.js @@ -9,7 +9,7 @@ module.exports = { globals: { 'ts-jest': { tsconfig: '/tsconfig.spec.json', - diagnostics: false, + isolatedModules: true, }, }, transform: { diff --git a/packages/react-components/react-accordion/jest.config.js b/packages/react-components/react-accordion/jest.config.js index 9d2d508dfbe13..fb3c3825bb3dc 100644 --- a/packages/react-components/react-accordion/jest.config.js +++ b/packages/react-components/react-accordion/jest.config.js @@ -9,7 +9,7 @@ module.exports = { globals: { 'ts-jest': { tsconfig: '/tsconfig.spec.json', - diagnostics: false, + isolatedModules: true, }, }, transform: { diff --git a/packages/react-components/react-accordion/src/testing/isConformant.ts b/packages/react-components/react-accordion/src/testing/isConformant.ts index 183b694ab7ee3..d3e3e430022c8 100644 --- a/packages/react-components/react-accordion/src/testing/isConformant.ts +++ b/packages/react-components/react-accordion/src/testing/isConformant.ts @@ -6,6 +6,7 @@ export function isConformant( testInfo: Omit, 'componentPath'> & { componentPath?: string }, ) { const defaultOptions: Partial> = { + tsConfig: { configName: 'tsconfig.spec.json' }, componentPath: require.main?.filename.replace('.test', ''), extraTests: griffelTests as TestObject, }; diff --git a/packages/react-components/react-alert/jest.config.js b/packages/react-components/react-alert/jest.config.js index 7e1223ecf873b..9693d4ad4d9f0 100644 --- a/packages/react-components/react-alert/jest.config.js +++ b/packages/react-components/react-alert/jest.config.js @@ -9,7 +9,7 @@ module.exports = { globals: { 'ts-jest': { tsconfig: '/tsconfig.spec.json', - diagnostics: false, + isolatedModules: true, }, }, transform: { diff --git a/packages/react-components/react-alert/src/components/Alert/Alert.test.tsx b/packages/react-components/react-alert/src/components/Alert/Alert.test.tsx index 67357cb0e2ba6..fea73e3f02df3 100644 --- a/packages/react-components/react-alert/src/components/Alert/Alert.test.tsx +++ b/packages/react-components/react-alert/src/components/Alert/Alert.test.tsx @@ -4,7 +4,7 @@ import { render, screen } from '@testing-library/react'; import { isConformant } from '../../testing/isConformant'; import { Alert } from './Alert'; -import { alertClassNames } from './useAlertStyles'; +import { alertClassNames } from './useAlertStyles.styles'; describe('Alert', () => { isConformant({ diff --git a/packages/react-components/react-alert/src/components/Alert/Alert.tsx b/packages/react-components/react-alert/src/components/Alert/Alert.tsx index f8a41b80a2783..cfa91747e5ba9 100644 --- a/packages/react-components/react-alert/src/components/Alert/Alert.tsx +++ b/packages/react-components/react-alert/src/components/Alert/Alert.tsx @@ -2,7 +2,7 @@ import * as React from 'react'; import { renderAlert_unstable } from './renderAlert'; import { useAlert_unstable } from './useAlert'; -import { useAlertStyles_unstable } from './useAlertStyles'; +import { useAlertStyles_unstable } from './useAlertStyles.styles'; import type { AlertProps } from './Alert.types'; import type { ForwardRefComponent } from '@fluentui/react-utilities'; diff --git a/packages/react-components/react-alert/src/components/Alert/index.ts b/packages/react-components/react-alert/src/components/Alert/index.ts index 1ea74ef4adfd4..46340d6b4b928 100644 --- a/packages/react-components/react-alert/src/components/Alert/index.ts +++ b/packages/react-components/react-alert/src/components/Alert/index.ts @@ -2,4 +2,4 @@ export * from './Alert'; export * from './Alert.types'; export * from './renderAlert'; export * from './useAlert'; -export * from './useAlertStyles'; +export * from './useAlertStyles.styles'; diff --git a/packages/react-components/react-alert/src/components/Alert/useAlertStyles.ts b/packages/react-components/react-alert/src/components/Alert/useAlertStyles.styles.ts similarity index 100% rename from packages/react-components/react-alert/src/components/Alert/useAlertStyles.ts rename to packages/react-components/react-alert/src/components/Alert/useAlertStyles.styles.ts diff --git a/packages/react-components/react-alert/src/testing/isConformant.ts b/packages/react-components/react-alert/src/testing/isConformant.ts index 77f88408cbd83..a3d988f29a172 100644 --- a/packages/react-components/react-alert/src/testing/isConformant.ts +++ b/packages/react-components/react-alert/src/testing/isConformant.ts @@ -6,6 +6,7 @@ export function isConformant( testInfo: Omit, 'componentPath'> & { componentPath?: string }, ) { const defaultOptions: Partial> = { + tsConfig: { configName: 'tsconfig.spec.json' }, componentPath: require.main?.filename.replace('.test', ''), extraTests: griffelTests as TestObject, }; diff --git a/packages/react-components/react-aria/jest.config.js b/packages/react-components/react-aria/jest.config.js index aabf1e411b3ec..c5e519a6f36d1 100644 --- a/packages/react-components/react-aria/jest.config.js +++ b/packages/react-components/react-aria/jest.config.js @@ -9,7 +9,7 @@ module.exports = { globals: { 'ts-jest': { tsconfig: '/tsconfig.spec.json', - diagnostics: false, + isolatedModules: true, }, }, transform: { diff --git a/packages/react-components/react-avatar-context/.babelrc.json b/packages/react-components/react-avatar-context/.babelrc.json deleted file mode 100644 index 45fb71ca16d2c..0000000000000 --- a/packages/react-components/react-avatar-context/.babelrc.json +++ /dev/null @@ -1,4 +0,0 @@ -{ - "extends": "../../../.babelrc-v9.json", - "plugins": ["annotate-pure-calls", "@babel/transform-react-pure-annotations"] -} diff --git a/packages/react-components/react-avatar-context/.eslintrc.json b/packages/react-components/react-avatar-context/.eslintrc.json deleted file mode 100644 index ceea884c70dcc..0000000000000 --- a/packages/react-components/react-avatar-context/.eslintrc.json +++ /dev/null @@ -1,4 +0,0 @@ -{ - "extends": ["plugin:@fluentui/eslint-plugin/react"], - "root": true -} diff --git a/packages/react-components/react-avatar-context/.npmignore b/packages/react-components/react-avatar-context/.npmignore deleted file mode 100644 index f7ce568a6dbf7..0000000000000 --- a/packages/react-components/react-avatar-context/.npmignore +++ /dev/null @@ -1,30 +0,0 @@ -.storybook/ -.vscode/ -bundle-size/ -config/ -coverage/ -docs/ -etc/ -node_modules/ -src/ -stories/ -dist/types/ -temp/ -__fixtures__ -__mocks__ -__tests__ - -*.api.json -*.log -*.spec.* -*.cy.* -*.test.* -*.yml - -# config files -*config.* -*rc.* -.editorconfig -.eslint* -.git* -.prettierignore diff --git a/packages/react-components/react-avatar-context/.swcrc b/packages/react-components/react-avatar-context/.swcrc deleted file mode 100644 index b4ffa86dee306..0000000000000 --- a/packages/react-components/react-avatar-context/.swcrc +++ /dev/null @@ -1,30 +0,0 @@ -{ - "$schema": "https://json.schemastore.org/swcrc", - "exclude": [ - "/testing", - "/**/*.cy.ts", - "/**/*.cy.tsx", - "/**/*.spec.ts", - "/**/*.spec.tsx", - "/**/*.test.ts", - "/**/*.test.tsx" - ], - "jsc": { - "parser": { - "syntax": "typescript", - "tsx": true, - "decorators": false, - "dynamicImport": false - }, - "externalHelpers": true, - "transform": { - "react": { - "runtime": "classic", - "useSpread": true - } - }, - "target": "es2019" - }, - "minify": false, - "sourceMaps": true -} diff --git a/packages/react-components/react-avatar-context/LICENSE b/packages/react-components/react-avatar-context/LICENSE deleted file mode 100644 index 8ffd46fad3eca..0000000000000 --- a/packages/react-components/react-avatar-context/LICENSE +++ /dev/null @@ -1,15 +0,0 @@ -@fluentui/react-avatar-context - -Copyright (c) Microsoft Corporation - -All rights reserved. - -MIT License - -Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the ""Software""), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: - -The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. - -THE SOFTWARE IS PROVIDED *AS IS*, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. - -Note: Usage of the fonts and icons referenced in Fluent UI React is subject to the terms listed at https://aka.ms/fluentui-assets-license diff --git a/packages/react-components/react-avatar-context/README.md b/packages/react-components/react-avatar-context/README.md deleted file mode 100644 index c3ad62ac1a187..0000000000000 --- a/packages/react-components/react-avatar-context/README.md +++ /dev/null @@ -1,5 +0,0 @@ -# @fluentui/react-avatar-context - -**React Avatar Context components for [Fluent UI React](https://react.fluentui.dev/)** - -These are not production-ready components and **should never be used in product**. This space is useful for testing new components whose APIs might change before final release. diff --git a/packages/react-components/react-avatar-context/config/api-extractor.json b/packages/react-components/react-avatar-context/config/api-extractor.json deleted file mode 100644 index e533bf30b48a2..0000000000000 --- a/packages/react-components/react-avatar-context/config/api-extractor.json +++ /dev/null @@ -1,4 +0,0 @@ -{ - "$schema": "https://developer.microsoft.com/json-schemas/api-extractor/v7/api-extractor.schema.json", - "extends": "@fluentui/scripts-api-extractor/api-extractor.common.v-next.json" -} diff --git a/packages/react-components/react-avatar-context/config/tests.js b/packages/react-components/react-avatar-context/config/tests.js deleted file mode 100644 index 2e211ae9e2142..0000000000000 --- a/packages/react-components/react-avatar-context/config/tests.js +++ /dev/null @@ -1 +0,0 @@ -/** Jest test setup file. */ diff --git a/packages/react-components/react-avatar-context/docs/Spec.md b/packages/react-components/react-avatar-context/docs/Spec.md deleted file mode 100644 index 1cd591a26b2fd..0000000000000 --- a/packages/react-components/react-avatar-context/docs/Spec.md +++ /dev/null @@ -1,63 +0,0 @@ -# @fluentui/react-avatar-context Spec - -## Background - -_Description and use cases of this component_ - -## Prior Art - -_Include background research done for this component_ - -- _Link to Open UI research_ -- _Link to comparison of v7 and v0_ -- _Link to GitHub epic issue for the converged component_ - -## Sample Code - -_Provide some representative example code that uses the proposed API for the component_ - -## Variants - -_Describe visual or functional variants of this control, if applicable. For example, a slider could have a 2D variant._ - -## API - -_List the **Props** and **Slots** proposed for the component. Ideally this would just be a link to the component's `.types.ts` file_ - -## Structure - -- _**Public**_ -- _**Internal**_ -- _**DOM** - how the component will be rendered as HTML elements_ - -## Migration - -_Describe what will need to be done to upgrade from the existing implementations:_ - -- _Migration from v8_ -- _Migration from v0_ - -## Behaviors - -_Explain how the component will behave in use, including:_ - -- _Component States_ -- _Interaction_ - - _Keyboard_ - - _Cursor_ - - _Touch_ - - _Screen readers_ - -## Accessibility - -Base accessibility information is included in the design document. After the spec is filled and review, outcomes from it need to be communicated to design and incorporated in the design document. - -- Decide whether to use **native element** or folow **ARIA** and provide reasons -- Identify the **[ARIA](https://www.w3.org/TR/wai-aria-practices-1.2/) pattern** and, if the component is listed there, follow its specification as possible. -- Identify accessibility **variants**, the `role` ([ARIA roles](https://www.w3.org/TR/wai-aria-1.1/#role_definitions)) of the component, its `slots` and `aria-*` props. -- Describe the **keyboard navigation**: Tab Oder and Arrow Key Navigation. Describe any other keyboard **shortcuts** used -- Specify texts for **state change announcements** - [ARIA live regions - ](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Live_Regions) (number of available items in dropdown, error messages, confirmations, ...) -- Identify UI parts that appear on **hover or focus** and specify keyboard and screen reader interaction with them -- List cases when **focus** needs to be **trapped** in sections of the UI (for dialogs and popups or for hierarchical navigation) -- List cases when **focus** needs to be **moved programatically** (if parts of the UI are appearing/disappearing or other cases) diff --git a/packages/react-components/react-avatar-context/etc/react-avatar-context.api.md b/packages/react-components/react-avatar-context/etc/react-avatar-context.api.md deleted file mode 100644 index 30d00c02ec77f..0000000000000 --- a/packages/react-components/react-avatar-context/etc/react-avatar-context.api.md +++ /dev/null @@ -1,9 +0,0 @@ -## API Report File for "@fluentui/react-avatar-context" - -> Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/). - -```ts - -// (No @packageDocumentation comment for this package) - -``` diff --git a/packages/react-components/react-avatar-context/jest.config.js b/packages/react-components/react-avatar-context/jest.config.js deleted file mode 100644 index a86805833bc25..0000000000000 --- a/packages/react-components/react-avatar-context/jest.config.js +++ /dev/null @@ -1,21 +0,0 @@ -// @ts-check - -/** - * @type {import('@jest/types').Config.InitialOptions} - */ -module.exports = { - displayName: 'react-avatar-context', - preset: '../../../jest.preset.js', - globals: { - 'ts-jest': { - tsconfig: '/tsconfig.spec.json', - diagnostics: false, - }, - }, - transform: { - '^.+\\.tsx?$': 'ts-jest', - }, - coverageDirectory: './coverage', - setupFilesAfterEnv: ['./config/tests.js'], - snapshotSerializers: ['@griffel/jest-serializer'], -}; diff --git a/packages/react-components/react-avatar-context/just.config.ts b/packages/react-components/react-avatar-context/just.config.ts deleted file mode 100644 index b7b2c9a33bf43..0000000000000 --- a/packages/react-components/react-avatar-context/just.config.ts +++ /dev/null @@ -1,5 +0,0 @@ -import { preset, task } from '@fluentui/scripts-tasks'; - -preset(); - -task('build', 'build:react-components').cached?.(); diff --git a/packages/react-components/react-avatar-context/package.json b/packages/react-components/react-avatar-context/package.json deleted file mode 100644 index 4d9325f6f2e7a..0000000000000 --- a/packages/react-components/react-avatar-context/package.json +++ /dev/null @@ -1,60 +0,0 @@ -{ - "name": "@fluentui/react-avatar-context", - "version": "9.0.0-alpha.0", - "private": true, - "description": "Context to override avatar props", - "main": "lib-commonjs/index.js", - "module": "lib/index.js", - "typings": "./dist/index.d.ts", - "sideEffects": false, - "repository": { - "type": "git", - "url": "https://github.com/microsoft/fluentui" - }, - "license": "MIT", - "scripts": { - "build": "just-scripts build", - "clean": "just-scripts clean", - "code-style": "just-scripts code-style", - "just": "just-scripts", - "lint": "just-scripts lint", - "test": "jest --passWithNoTests", - "generate-api": "just-scripts generate-api", - "type-check": "tsc -b tsconfig.json" - }, - "devDependencies": { - "@fluentui/eslint-plugin": "*", - "@fluentui/react-conformance": "*", - "@fluentui/react-conformance-griffel": "9.0.0-beta.20", - "@fluentui/scripts-api-extractor": "*", - "@fluentui/scripts-tasks": "*" - }, - "dependencies": { - "@fluentui/react-theme": "^9.1.7", - "@fluentui/react-utilities": "^9.8.0", - "@griffel/react": "^1.5.2", - "@swc/helpers": "^0.4.14" - }, - "peerDependencies": { - "@types/react": ">=16.8.0 <19.0.0", - "@types/react-dom": ">=16.8.0 <19.0.0", - "react": ">=16.8.0 <19.0.0", - "react-dom": ">=16.8.0 <19.0.0" - }, - "beachball": { - "disallowedChangeTypes": [ - "major", - "minor", - "patch" - ] - }, - "exports": { - ".": { - "types": "./dist/index.d.ts", - "node": "./lib-commonjs/index.js", - "import": "./lib/index.js", - "require": "./lib-commonjs/index.js" - }, - "./package.json": "./package.json" - } -} diff --git a/packages/react-components/react-avatar-context/src/index.ts b/packages/react-components/react-avatar-context/src/index.ts deleted file mode 100644 index aacbad0068e24..0000000000000 --- a/packages/react-components/react-avatar-context/src/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -// TODO: replace with real exports -export {}; diff --git a/packages/react-components/react-avatar-context/tsconfig.json b/packages/react-components/react-avatar-context/tsconfig.json deleted file mode 100644 index 12ca516af1c5b..0000000000000 --- a/packages/react-components/react-avatar-context/tsconfig.json +++ /dev/null @@ -1,22 +0,0 @@ -{ - "extends": "../../../tsconfig.base.json", - "compilerOptions": { - "target": "ES2019", - "noEmit": true, - "isolatedModules": true, - "importHelpers": true, - "jsx": "react", - "noUnusedLocals": true, - "preserveConstEnums": true - }, - "include": [], - "files": [], - "references": [ - { - "path": "./tsconfig.lib.json" - }, - { - "path": "./tsconfig.spec.json" - } - ] -} diff --git a/packages/react-components/react-avatar-context/tsconfig.lib.json b/packages/react-components/react-avatar-context/tsconfig.lib.json deleted file mode 100644 index b2da24eff1b32..0000000000000 --- a/packages/react-components/react-avatar-context/tsconfig.lib.json +++ /dev/null @@ -1,14 +0,0 @@ -{ - "extends": "./tsconfig.json", - "compilerOptions": { - "noEmit": false, - "lib": ["ES2019", "dom"], - "declaration": true, - "declarationDir": "../../../dist/out-tsc/types", - "outDir": "../../../dist/out-tsc", - "inlineSources": true, - "types": ["static-assets", "environment"] - }, - "exclude": ["**/*.spec.ts", "**/*.spec.tsx", "**/*.test.ts", "**/*.test.tsx"], - "include": ["./src/**/*.ts", "./src/**/*.tsx"] -} diff --git a/packages/react-components/react-avatar-context/tsconfig.spec.json b/packages/react-components/react-avatar-context/tsconfig.spec.json deleted file mode 100644 index 469fcba4d7ba7..0000000000000 --- a/packages/react-components/react-avatar-context/tsconfig.spec.json +++ /dev/null @@ -1,9 +0,0 @@ -{ - "extends": "./tsconfig.json", - "compilerOptions": { - "module": "CommonJS", - "outDir": "dist", - "types": ["jest", "node"] - }, - "include": ["**/*.spec.ts", "**/*.spec.tsx", "**/*.test.ts", "**/*.test.tsx", "**/*.d.ts"] -} diff --git a/packages/react-components/react-avatar/jest.config.js b/packages/react-components/react-avatar/jest.config.js index 474b19047973a..8e485ee197fab 100644 --- a/packages/react-components/react-avatar/jest.config.js +++ b/packages/react-components/react-avatar/jest.config.js @@ -9,7 +9,7 @@ module.exports = { globals: { 'ts-jest': { tsconfig: '/tsconfig.spec.json', - diagnostics: false, + isolatedModules: true, }, }, transform: { diff --git a/packages/react-components/react-avatar/src/testing/isConformant.ts b/packages/react-components/react-avatar/src/testing/isConformant.ts index 183b694ab7ee3..d3e3e430022c8 100644 --- a/packages/react-components/react-avatar/src/testing/isConformant.ts +++ b/packages/react-components/react-avatar/src/testing/isConformant.ts @@ -6,6 +6,7 @@ export function isConformant( testInfo: Omit, 'componentPath'> & { componentPath?: string }, ) { const defaultOptions: Partial> = { + tsConfig: { configName: 'tsconfig.spec.json' }, componentPath: require.main?.filename.replace('.test', ''), extraTests: griffelTests as TestObject, }; diff --git a/packages/react-components/react-badge/jest.config.js b/packages/react-components/react-badge/jest.config.js index 2650ceafefa74..c7a12e9171bd8 100644 --- a/packages/react-components/react-badge/jest.config.js +++ b/packages/react-components/react-badge/jest.config.js @@ -9,7 +9,7 @@ module.exports = { globals: { 'ts-jest': { tsconfig: '/tsconfig.spec.json', - diagnostics: false, + isolatedModules: true, }, }, transform: { diff --git a/packages/react-components/react-badge/src/testing/isConformant.ts b/packages/react-components/react-badge/src/testing/isConformant.ts index 183b694ab7ee3..d3e3e430022c8 100644 --- a/packages/react-components/react-badge/src/testing/isConformant.ts +++ b/packages/react-components/react-badge/src/testing/isConformant.ts @@ -6,6 +6,7 @@ export function isConformant( testInfo: Omit, 'componentPath'> & { componentPath?: string }, ) { const defaultOptions: Partial> = { + tsConfig: { configName: 'tsconfig.spec.json' }, componentPath: require.main?.filename.replace('.test', ''), extraTests: griffelTests as TestObject, }; diff --git a/packages/react-components/react-breadcrumb/jest.config.js b/packages/react-components/react-breadcrumb/jest.config.js index e71124efdbbd7..5c481895ec2ff 100644 --- a/packages/react-components/react-breadcrumb/jest.config.js +++ b/packages/react-components/react-breadcrumb/jest.config.js @@ -9,7 +9,7 @@ module.exports = { globals: { 'ts-jest': { tsconfig: '/tsconfig.spec.json', - diagnostics: false, + isolatedModules: true, }, }, transform: { diff --git a/packages/react-components/react-breadcrumb/src/components/Breadcrumb/Breadcrumb.tsx b/packages/react-components/react-breadcrumb/src/components/Breadcrumb/Breadcrumb.tsx index 8e83671f14929..9555f5673305d 100644 --- a/packages/react-components/react-breadcrumb/src/components/Breadcrumb/Breadcrumb.tsx +++ b/packages/react-components/react-breadcrumb/src/components/Breadcrumb/Breadcrumb.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import { useBreadcrumb_unstable } from './useBreadcrumb'; import { renderBreadcrumb_unstable } from './renderBreadcrumb'; -import { useBreadcrumbStyles_unstable } from './useBreadcrumbStyles'; +import { useBreadcrumbStyles_unstable } from './useBreadcrumbStyles.styles'; import type { BreadcrumbProps } from './Breadcrumb.types'; import type { ForwardRefComponent } from '@fluentui/react-utilities'; import { useBreadcrumbContextValues_unstable } from './useBreadcrumbContextValue'; diff --git a/packages/react-components/react-breadcrumb/src/components/Breadcrumb/index.ts b/packages/react-components/react-breadcrumb/src/components/Breadcrumb/index.ts index c066b0fd3486b..e35661576ed45 100644 --- a/packages/react-components/react-breadcrumb/src/components/Breadcrumb/index.ts +++ b/packages/react-components/react-breadcrumb/src/components/Breadcrumb/index.ts @@ -2,4 +2,4 @@ export * from './Breadcrumb'; export * from './Breadcrumb.types'; export * from './renderBreadcrumb'; export * from './useBreadcrumb'; -export * from './useBreadcrumbStyles'; +export * from './useBreadcrumbStyles.styles'; diff --git a/packages/react-components/react-breadcrumb/src/components/Breadcrumb/useBreadcrumbStyles.ts b/packages/react-components/react-breadcrumb/src/components/Breadcrumb/useBreadcrumbStyles.styles.ts similarity index 100% rename from packages/react-components/react-breadcrumb/src/components/Breadcrumb/useBreadcrumbStyles.ts rename to packages/react-components/react-breadcrumb/src/components/Breadcrumb/useBreadcrumbStyles.styles.ts diff --git a/packages/react-components/react-breadcrumb/src/components/BreadcrumbButton/BreadcrumbButton.test.tsx b/packages/react-components/react-breadcrumb/src/components/BreadcrumbButton/BreadcrumbButton.test.tsx index f8802fb668921..aa9dabc8891a7 100644 --- a/packages/react-components/react-breadcrumb/src/components/BreadcrumbButton/BreadcrumbButton.test.tsx +++ b/packages/react-components/react-breadcrumb/src/components/BreadcrumbButton/BreadcrumbButton.test.tsx @@ -3,7 +3,7 @@ import { render } from '@testing-library/react'; import { BreadcrumbButton } from './BreadcrumbButton'; import { BreadcrumbButtonProps } from './BreadcrumbButton.types'; import { isConformant } from '../../testing/isConformant'; -import { breadcrumbButtonClassNames } from './useBreadcrumbButtonStyles'; +import { breadcrumbButtonClassNames } from './useBreadcrumbButtonStyles.styles'; describe('BreadcrumbButton', () => { isConformant({ diff --git a/packages/react-components/react-breadcrumb/src/components/BreadcrumbButton/BreadcrumbButton.tsx b/packages/react-components/react-breadcrumb/src/components/BreadcrumbButton/BreadcrumbButton.tsx index 5aacb6d6bfb86..55457e345642c 100644 --- a/packages/react-components/react-breadcrumb/src/components/BreadcrumbButton/BreadcrumbButton.tsx +++ b/packages/react-components/react-breadcrumb/src/components/BreadcrumbButton/BreadcrumbButton.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import { useBreadcrumbButton_unstable } from './useBreadcrumbButton'; import { renderBreadcrumbButton_unstable } from './renderBreadcrumbButton'; -import { useBreadcrumbButtonStyles_unstable } from './useBreadcrumbButtonStyles'; +import { useBreadcrumbButtonStyles_unstable } from './useBreadcrumbButtonStyles.styles'; import type { BreadcrumbButtonProps } from './BreadcrumbButton.types'; import type { ForwardRefComponent } from '@fluentui/react-utilities'; diff --git a/packages/react-components/react-breadcrumb/src/components/BreadcrumbButton/index.ts b/packages/react-components/react-breadcrumb/src/components/BreadcrumbButton/index.ts index b2eda0e214561..d972283c4ee09 100644 --- a/packages/react-components/react-breadcrumb/src/components/BreadcrumbButton/index.ts +++ b/packages/react-components/react-breadcrumb/src/components/BreadcrumbButton/index.ts @@ -2,4 +2,4 @@ export * from './BreadcrumbButton'; export * from './BreadcrumbButton.types'; export * from './renderBreadcrumbButton'; export * from './useBreadcrumbButton'; -export * from './useBreadcrumbButtonStyles'; +export * from './useBreadcrumbButtonStyles.styles'; diff --git a/packages/react-components/react-breadcrumb/src/components/BreadcrumbButton/useBreadcrumbButtonStyles.ts b/packages/react-components/react-breadcrumb/src/components/BreadcrumbButton/useBreadcrumbButtonStyles.styles.ts similarity index 100% rename from packages/react-components/react-breadcrumb/src/components/BreadcrumbButton/useBreadcrumbButtonStyles.ts rename to packages/react-components/react-breadcrumb/src/components/BreadcrumbButton/useBreadcrumbButtonStyles.styles.ts 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 802946382f33a..de51ae013fd53 100644 --- a/packages/react-components/react-breadcrumb/src/components/BreadcrumbDivider/BreadcrumbDivider.tsx +++ b/packages/react-components/react-breadcrumb/src/components/BreadcrumbDivider/BreadcrumbDivider.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import { useBreadcrumbDivider_unstable } from './useBreadcrumbDivider'; import { renderBreadcrumbDivider_unstable } from './renderBreadcrumbDivider'; -import { useBreadcrumbDividerStyles_unstable } from './useBreadcrumbDividerStyles'; +import { useBreadcrumbDividerStyles_unstable } from './useBreadcrumbDividerStyles.styles'; import type { BreadcrumbDividerProps } from './BreadcrumbDivider.types'; import type { ForwardRefComponent } from '@fluentui/react-utilities'; diff --git a/packages/react-components/react-breadcrumb/src/components/BreadcrumbDivider/index.ts b/packages/react-components/react-breadcrumb/src/components/BreadcrumbDivider/index.ts index 2718c3f9ddff5..e984ecbb9aeb8 100644 --- a/packages/react-components/react-breadcrumb/src/components/BreadcrumbDivider/index.ts +++ b/packages/react-components/react-breadcrumb/src/components/BreadcrumbDivider/index.ts @@ -2,4 +2,4 @@ export * from './BreadcrumbDivider'; export * from './BreadcrumbDivider.types'; export * from './renderBreadcrumbDivider'; export * from './useBreadcrumbDivider'; -export * from './useBreadcrumbDividerStyles'; +export * from './useBreadcrumbDividerStyles.styles'; diff --git a/packages/react-components/react-breadcrumb/src/components/BreadcrumbDivider/useBreadcrumbDividerStyles.ts b/packages/react-components/react-breadcrumb/src/components/BreadcrumbDivider/useBreadcrumbDividerStyles.styles.ts similarity index 100% rename from packages/react-components/react-breadcrumb/src/components/BreadcrumbDivider/useBreadcrumbDividerStyles.ts rename to packages/react-components/react-breadcrumb/src/components/BreadcrumbDivider/useBreadcrumbDividerStyles.styles.ts 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 f4146c74b7bc6..3909738690525 100644 --- a/packages/react-components/react-breadcrumb/src/components/BreadcrumbItem/BreadcrumbItem.tsx +++ b/packages/react-components/react-breadcrumb/src/components/BreadcrumbItem/BreadcrumbItem.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import { useBreadcrumbItem_unstable } from './useBreadcrumbItem'; import { renderBreadcrumbItem_unstable } from './renderBreadcrumbItem'; -import { useBreadcrumbItemStyles_unstable } from './useBreadcrumbItemStyles'; +import { useBreadcrumbItemStyles_unstable } from './useBreadcrumbItemStyles.styles'; import type { BreadcrumbItemProps } from './BreadcrumbItem.types'; import type { ForwardRefComponent } from '@fluentui/react-utilities'; diff --git a/packages/react-components/react-breadcrumb/src/components/BreadcrumbItem/index.ts b/packages/react-components/react-breadcrumb/src/components/BreadcrumbItem/index.ts index 84e95cdc702d9..c5bfc978fdde0 100644 --- a/packages/react-components/react-breadcrumb/src/components/BreadcrumbItem/index.ts +++ b/packages/react-components/react-breadcrumb/src/components/BreadcrumbItem/index.ts @@ -2,4 +2,4 @@ export * from './BreadcrumbItem'; export * from './BreadcrumbItem.types'; export * from './renderBreadcrumbItem'; export * from './useBreadcrumbItem'; -export * from './useBreadcrumbItemStyles'; +export * from './useBreadcrumbItemStyles.styles'; diff --git a/packages/react-components/react-breadcrumb/src/components/BreadcrumbItem/useBreadcrumbItemStyles.ts b/packages/react-components/react-breadcrumb/src/components/BreadcrumbItem/useBreadcrumbItemStyles.styles.ts similarity index 100% rename from packages/react-components/react-breadcrumb/src/components/BreadcrumbItem/useBreadcrumbItemStyles.ts rename to packages/react-components/react-breadcrumb/src/components/BreadcrumbItem/useBreadcrumbItemStyles.styles.ts diff --git a/packages/react-components/react-breadcrumb/src/components/BreadcrumbLink/BreadcrumbLink.test.tsx b/packages/react-components/react-breadcrumb/src/components/BreadcrumbLink/BreadcrumbLink.test.tsx index 7392ba74d4b81..3f9a666eacdc0 100644 --- a/packages/react-components/react-breadcrumb/src/components/BreadcrumbLink/BreadcrumbLink.test.tsx +++ b/packages/react-components/react-breadcrumb/src/components/BreadcrumbLink/BreadcrumbLink.test.tsx @@ -3,7 +3,7 @@ import { render } from '@testing-library/react'; import { BreadcrumbLink } from './BreadcrumbLink'; import type { BreadcrumbLinkProps } from './BreadcrumbLink.types'; import { isConformant } from '../../testing/isConformant'; -import { breadcrumbLinkClassNames } from './useBreadcrumbLinkStyles'; +import { breadcrumbLinkClassNames } from './useBreadcrumbLinkStyles.styles'; describe('BreadcrumbLink', () => { isConformant({ diff --git a/packages/react-components/react-breadcrumb/src/components/BreadcrumbLink/BreadcrumbLink.tsx b/packages/react-components/react-breadcrumb/src/components/BreadcrumbLink/BreadcrumbLink.tsx index 2d72ea2d22374..4d8458785af5b 100644 --- a/packages/react-components/react-breadcrumb/src/components/BreadcrumbLink/BreadcrumbLink.tsx +++ b/packages/react-components/react-breadcrumb/src/components/BreadcrumbLink/BreadcrumbLink.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import { useBreadcrumbLink_unstable } from './useBreadcrumbLink'; import { renderBreadcrumbLink_unstable } from './renderBreadcrumbLink'; -import { useBreadcrumbLinkStyles_unstable } from './useBreadcrumbLinkStyles'; +import { useBreadcrumbLinkStyles_unstable } from './useBreadcrumbLinkStyles.styles'; import type { BreadcrumbLinkProps } from './BreadcrumbLink.types'; import type { ForwardRefComponent } from '@fluentui/react-utilities'; diff --git a/packages/react-components/react-breadcrumb/src/components/BreadcrumbLink/index.ts b/packages/react-components/react-breadcrumb/src/components/BreadcrumbLink/index.ts index 6b75401067862..cefc4bb166b4c 100644 --- a/packages/react-components/react-breadcrumb/src/components/BreadcrumbLink/index.ts +++ b/packages/react-components/react-breadcrumb/src/components/BreadcrumbLink/index.ts @@ -2,4 +2,4 @@ export * from './BreadcrumbLink'; export * from './BreadcrumbLink.types'; export * from './renderBreadcrumbLink'; export * from './useBreadcrumbLink'; -export * from './useBreadcrumbLinkStyles'; +export * from './useBreadcrumbLinkStyles.styles'; diff --git a/packages/react-components/react-breadcrumb/src/components/BreadcrumbLink/useBreadcrumbLinkStyles.ts b/packages/react-components/react-breadcrumb/src/components/BreadcrumbLink/useBreadcrumbLinkStyles.styles.ts similarity index 100% rename from packages/react-components/react-breadcrumb/src/components/BreadcrumbLink/useBreadcrumbLinkStyles.ts rename to packages/react-components/react-breadcrumb/src/components/BreadcrumbLink/useBreadcrumbLinkStyles.styles.ts diff --git a/packages/react-components/react-breadcrumb/src/testing/isConformant.ts b/packages/react-components/react-breadcrumb/src/testing/isConformant.ts index 77f88408cbd83..a3d988f29a172 100644 --- a/packages/react-components/react-breadcrumb/src/testing/isConformant.ts +++ b/packages/react-components/react-breadcrumb/src/testing/isConformant.ts @@ -6,6 +6,7 @@ export function isConformant( testInfo: Omit, 'componentPath'> & { componentPath?: string }, ) { const defaultOptions: Partial> = { + tsConfig: { configName: 'tsconfig.spec.json' }, componentPath: require.main?.filename.replace('.test', ''), extraTests: griffelTests as TestObject, }; diff --git a/packages/react-components/react-button/jest.config.js b/packages/react-components/react-button/jest.config.js index fa9febaae3144..c40bf76983caf 100644 --- a/packages/react-components/react-button/jest.config.js +++ b/packages/react-components/react-button/jest.config.js @@ -9,7 +9,7 @@ module.exports = { globals: { 'ts-jest': { tsconfig: '/tsconfig.spec.json', - diagnostics: false, + isolatedModules: true, }, }, transform: { diff --git a/packages/react-components/react-button/src/testing/isConformant.ts b/packages/react-components/react-button/src/testing/isConformant.ts index 77f88408cbd83..a3d988f29a172 100644 --- a/packages/react-components/react-button/src/testing/isConformant.ts +++ b/packages/react-components/react-button/src/testing/isConformant.ts @@ -6,6 +6,7 @@ export function isConformant( testInfo: Omit, 'componentPath'> & { componentPath?: string }, ) { const defaultOptions: Partial> = { + tsConfig: { configName: 'tsconfig.spec.json' }, componentPath: require.main?.filename.replace('.test', ''), extraTests: griffelTests as TestObject, }; diff --git a/packages/react-components/react-card/jest.config.js b/packages/react-components/react-card/jest.config.js index 718afb7101794..d54241a41570d 100644 --- a/packages/react-components/react-card/jest.config.js +++ b/packages/react-components/react-card/jest.config.js @@ -9,7 +9,7 @@ module.exports = { globals: { 'ts-jest': { tsconfig: '/tsconfig.spec.json', - diagnostics: false, + isolatedModules: true, }, }, transform: { diff --git a/packages/react-components/react-card/src/components/Card/Card.test.tsx b/packages/react-components/react-card/src/components/Card/Card.test.tsx index 28b2059b1396d..f229f0d0a136a 100644 --- a/packages/react-components/react-card/src/components/Card/Card.test.tsx +++ b/packages/react-components/react-card/src/components/Card/Card.test.tsx @@ -3,7 +3,7 @@ import { render } from '@testing-library/react'; import { Card } from './Card'; import { isConformant } from '../../testing/isConformant'; import { CardProps } from './Card.types'; -import { cardClassNames } from './useCardStyles'; +import { cardClassNames } from './useCardStyles.styles'; describe('Card', () => { isConformant({ diff --git a/packages/react-components/react-card/src/components/Card/Card.tsx b/packages/react-components/react-card/src/components/Card/Card.tsx index baa98b06197aa..a872b34554c64 100644 --- a/packages/react-components/react-card/src/components/Card/Card.tsx +++ b/packages/react-components/react-card/src/components/Card/Card.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import { useCard_unstable } from './useCard'; import { renderCard_unstable } from './renderCard'; -import { useCardStyles_unstable } from './useCardStyles'; +import { useCardStyles_unstable } from './useCardStyles.styles'; import type { CardProps } from './Card.types'; import type { ForwardRefComponent } from '@fluentui/react-utilities'; import { useCardContextValue } from './useCardContextValue'; diff --git a/packages/react-components/react-card/src/components/Card/index.ts b/packages/react-components/react-card/src/components/Card/index.ts index 1ad6404c375f3..c1f77d8ed7948 100644 --- a/packages/react-components/react-card/src/components/Card/index.ts +++ b/packages/react-components/react-card/src/components/Card/index.ts @@ -3,4 +3,4 @@ export * from './Card.types'; export * from './CardContext'; export * from './renderCard'; export * from './useCard'; -export * from './useCardStyles'; +export * from './useCardStyles.styles'; diff --git a/packages/react-components/react-card/src/components/Card/useCardStyles.ts b/packages/react-components/react-card/src/components/Card/useCardStyles.styles.ts similarity index 99% rename from packages/react-components/react-card/src/components/Card/useCardStyles.ts rename to packages/react-components/react-card/src/components/Card/useCardStyles.styles.ts index dc59fde63a8ec..7154e20454626 100644 --- a/packages/react-components/react-card/src/components/Card/useCardStyles.ts +++ b/packages/react-components/react-card/src/components/Card/useCardStyles.styles.ts @@ -3,9 +3,9 @@ import { tokens } from '@fluentui/react-theme'; import type { SlotClassNames } from '@fluentui/react-utilities'; import { createFocusOutlineStyle } from '@fluentui/react-tabster'; -import { cardPreviewClassNames } from '../CardPreview/useCardPreviewStyles'; -import { cardHeaderClassNames } from '../CardHeader/useCardHeaderStyles'; -import { cardFooterClassNames } from '../CardFooter/useCardFooterStyles'; +import { cardPreviewClassNames } from '../CardPreview/useCardPreviewStyles.styles'; +import { cardHeaderClassNames } from '../CardHeader/useCardHeaderStyles.styles'; +import { cardFooterClassNames } from '../CardFooter/useCardFooterStyles.styles'; import type { CardSlots, CardState } from './Card.types'; /** diff --git a/packages/react-components/react-card/src/components/CardFooter/CardFooter.tsx b/packages/react-components/react-card/src/components/CardFooter/CardFooter.tsx index a661a4fe86a16..f10bdfe29e666 100644 --- a/packages/react-components/react-card/src/components/CardFooter/CardFooter.tsx +++ b/packages/react-components/react-card/src/components/CardFooter/CardFooter.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import { useCardFooter_unstable } from './useCardFooter'; import { renderCardFooter_unstable } from './renderCardFooter'; -import { useCardFooterStyles_unstable } from './useCardFooterStyles'; +import { useCardFooterStyles_unstable } from './useCardFooterStyles.styles'; import type { CardFooterProps } from './CardFooter.types'; import type { ForwardRefComponent } from '@fluentui/react-utilities'; diff --git a/packages/react-components/react-card/src/components/CardFooter/index.ts b/packages/react-components/react-card/src/components/CardFooter/index.ts index 38d7a22066ae9..c95072f03c4c9 100644 --- a/packages/react-components/react-card/src/components/CardFooter/index.ts +++ b/packages/react-components/react-card/src/components/CardFooter/index.ts @@ -2,4 +2,4 @@ export * from './CardFooter'; export * from './CardFooter.types'; export * from './renderCardFooter'; export * from './useCardFooter'; -export * from './useCardFooterStyles'; +export * from './useCardFooterStyles.styles'; diff --git a/packages/react-components/react-card/src/components/CardFooter/useCardFooterStyles.ts b/packages/react-components/react-card/src/components/CardFooter/useCardFooterStyles.styles.ts similarity index 100% rename from packages/react-components/react-card/src/components/CardFooter/useCardFooterStyles.ts rename to packages/react-components/react-card/src/components/CardFooter/useCardFooterStyles.styles.ts diff --git a/packages/react-components/react-card/src/components/CardHeader/CardHeader.tsx b/packages/react-components/react-card/src/components/CardHeader/CardHeader.tsx index 10b158648ee69..483542a78b130 100644 --- a/packages/react-components/react-card/src/components/CardHeader/CardHeader.tsx +++ b/packages/react-components/react-card/src/components/CardHeader/CardHeader.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import { useCardHeader_unstable } from './useCardHeader'; import { renderCardHeader_unstable } from './renderCardHeader'; -import { useCardHeaderStyles_unstable } from './useCardHeaderStyles'; +import { useCardHeaderStyles_unstable } from './useCardHeaderStyles.styles'; import type { CardHeaderProps } from './CardHeader.types'; import type { ForwardRefComponent } from '@fluentui/react-utilities'; diff --git a/packages/react-components/react-card/src/components/CardHeader/index.ts b/packages/react-components/react-card/src/components/CardHeader/index.ts index 4c35f766d4d84..6f516cdf246ba 100644 --- a/packages/react-components/react-card/src/components/CardHeader/index.ts +++ b/packages/react-components/react-card/src/components/CardHeader/index.ts @@ -2,4 +2,4 @@ export * from './CardHeader'; export * from './CardHeader.types'; export * from './renderCardHeader'; export * from './useCardHeader'; -export * from './useCardHeaderStyles'; +export * from './useCardHeaderStyles.styles'; diff --git a/packages/react-components/react-card/src/components/CardHeader/useCardHeader.ts b/packages/react-components/react-card/src/components/CardHeader/useCardHeader.ts index 2db087a598536..3f1f487923d6c 100644 --- a/packages/react-components/react-card/src/components/CardHeader/useCardHeader.ts +++ b/packages/react-components/react-card/src/components/CardHeader/useCardHeader.ts @@ -2,7 +2,7 @@ import * as React from 'react'; import { getNativeElementProps, resolveShorthand, useId } from '@fluentui/react-utilities'; import type { CardHeaderProps, CardHeaderState } from './CardHeader.types'; import { useCardContext_unstable } from '../Card/CardContext'; -import { cardHeaderClassNames } from './useCardHeaderStyles'; +import { cardHeaderClassNames } from './useCardHeaderStyles.styles'; /** * Create the state required to render CardHeader. diff --git a/packages/react-components/react-card/src/components/CardHeader/useCardHeaderStyles.ts b/packages/react-components/react-card/src/components/CardHeader/useCardHeaderStyles.styles.ts similarity index 100% rename from packages/react-components/react-card/src/components/CardHeader/useCardHeaderStyles.ts rename to packages/react-components/react-card/src/components/CardHeader/useCardHeaderStyles.styles.ts diff --git a/packages/react-components/react-card/src/components/CardPreview/CardPreview.tsx b/packages/react-components/react-card/src/components/CardPreview/CardPreview.tsx index 1945aed07ea74..f9afcaf1ea699 100644 --- a/packages/react-components/react-card/src/components/CardPreview/CardPreview.tsx +++ b/packages/react-components/react-card/src/components/CardPreview/CardPreview.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import { useCardPreview_unstable } from './useCardPreview'; import { renderCardPreview_unstable } from './renderCardPreview'; -import { useCardPreviewStyles_unstable } from './useCardPreviewStyles'; +import { useCardPreviewStyles_unstable } from './useCardPreviewStyles.styles'; import type { CardPreviewProps } from './CardPreview.types'; import type { ForwardRefComponent } from '@fluentui/react-utilities'; diff --git a/packages/react-components/react-card/src/components/CardPreview/index.ts b/packages/react-components/react-card/src/components/CardPreview/index.ts index 3673e23eddfe4..5b3c4eedc68b2 100644 --- a/packages/react-components/react-card/src/components/CardPreview/index.ts +++ b/packages/react-components/react-card/src/components/CardPreview/index.ts @@ -2,4 +2,4 @@ export * from './CardPreview'; export * from './CardPreview.types'; export * from './renderCardPreview'; export * from './useCardPreview'; -export * from './useCardPreviewStyles'; +export * from './useCardPreviewStyles.styles'; diff --git a/packages/react-components/react-card/src/components/CardPreview/useCardPreview.ts b/packages/react-components/react-card/src/components/CardPreview/useCardPreview.ts index 6f711c44fba09..2f57899252209 100644 --- a/packages/react-components/react-card/src/components/CardPreview/useCardPreview.ts +++ b/packages/react-components/react-card/src/components/CardPreview/useCardPreview.ts @@ -2,7 +2,7 @@ import * as React from 'react'; import { getNativeElementProps, resolveShorthand, useMergedRefs } from '@fluentui/react-utilities'; import type { CardPreviewProps, CardPreviewState } from './CardPreview.types'; import { useCardContext_unstable } from '../Card/CardContext'; -import { cardPreviewClassNames } from './useCardPreviewStyles'; +import { cardPreviewClassNames } from './useCardPreviewStyles.styles'; /** * Create the state required to render CardPreview. diff --git a/packages/react-components/react-card/src/components/CardPreview/useCardPreviewStyles.ts b/packages/react-components/react-card/src/components/CardPreview/useCardPreviewStyles.styles.ts similarity index 100% rename from packages/react-components/react-card/src/components/CardPreview/useCardPreviewStyles.ts rename to packages/react-components/react-card/src/components/CardPreview/useCardPreviewStyles.styles.ts diff --git a/packages/react-components/react-card/src/testing/isConformant.ts b/packages/react-components/react-card/src/testing/isConformant.ts index 77f88408cbd83..a3d988f29a172 100644 --- a/packages/react-components/react-card/src/testing/isConformant.ts +++ b/packages/react-components/react-card/src/testing/isConformant.ts @@ -6,6 +6,7 @@ export function isConformant( testInfo: Omit, 'componentPath'> & { componentPath?: string }, ) { const defaultOptions: Partial> = { + tsConfig: { configName: 'tsconfig.spec.json' }, componentPath: require.main?.filename.replace('.test', ''), extraTests: griffelTests as TestObject, }; diff --git a/packages/react-components/react-checkbox/jest.config.js b/packages/react-components/react-checkbox/jest.config.js index 276dda279da40..fe5acb2984289 100644 --- a/packages/react-components/react-checkbox/jest.config.js +++ b/packages/react-components/react-checkbox/jest.config.js @@ -9,7 +9,7 @@ module.exports = { globals: { 'ts-jest': { tsconfig: '/tsconfig.spec.json', - diagnostics: false, + isolatedModules: true, }, }, transform: { diff --git a/packages/react-components/react-checkbox/src/testing/isConformant.ts b/packages/react-components/react-checkbox/src/testing/isConformant.ts index 2ffff9d342a7e..0aad9515bbca6 100644 --- a/packages/react-components/react-checkbox/src/testing/isConformant.ts +++ b/packages/react-components/react-checkbox/src/testing/isConformant.ts @@ -5,6 +5,7 @@ export function isConformant( testInfo: Omit, 'componentPath'> & { componentPath?: string }, ) { const defaultOptions: Partial> = { + tsConfig: { configName: 'tsconfig.spec.json' }, componentPath: require.main?.filename.replace('.test', ''), extraTests: griffelTests as TestObject, }; diff --git a/packages/react-components/react-combobox/jest.config.js b/packages/react-components/react-combobox/jest.config.js index 42cc3e30eb229..021405129645a 100644 --- a/packages/react-components/react-combobox/jest.config.js +++ b/packages/react-components/react-combobox/jest.config.js @@ -9,7 +9,7 @@ module.exports = { globals: { 'ts-jest': { tsconfig: '/tsconfig.spec.json', - diagnostics: false, + isolatedModules: true, }, }, transform: { diff --git a/packages/react-components/react-combobox/src/components/Combobox/Combobox.test.tsx b/packages/react-components/react-combobox/src/components/Combobox/Combobox.test.tsx index 78956a9e8b26a..94d929bbc1dc2 100644 --- a/packages/react-components/react-combobox/src/components/Combobox/Combobox.test.tsx +++ b/packages/react-components/react-combobox/src/components/Combobox/Combobox.test.tsx @@ -663,6 +663,58 @@ describe('Combobox', () => { }); }); + /* Freeform space key behavior */ + it('inserts space character when typing in a freeform combobox', () => { + const onOptionSelect = jest.fn(); + + const { getByRole } = render( + + + + + , + ); + + userEvent.type(getByRole('combobox'), 're '); + + expect(onOptionSelect).not.toHaveBeenCalled(); + expect((getByRole('combobox') as HTMLInputElement).value).toEqual('re '); + }); + + it('uses space to select after arrowing through options in a freeform combobox', () => { + const onOptionSelect = jest.fn(); + + const { getByRole } = render( + + + + + , + ); + + userEvent.type(getByRole('combobox'), 're{ArrowDown} '); + + expect(onOptionSelect).toHaveBeenCalledTimes(1); + expect((getByRole('combobox') as HTMLInputElement).value).toEqual('Green'); + }); + + it('inserts space character in closed freeform combobox', () => { + const onOptionSelect = jest.fn(); + + const { getByRole } = render( + + + + + , + ); + + userEvent.type(getByRole('combobox'), 'r{ArrowDown}{Escape} '); + + expect(onOptionSelect).not.toHaveBeenCalled(); + expect((getByRole('combobox') as HTMLInputElement).value).toEqual('r '); + }); + /* Active option */ it('should set active option on click', () => { const { getByTestId } = render( diff --git a/packages/react-components/react-combobox/src/components/Combobox/useCombobox.tsx b/packages/react-components/react-combobox/src/components/Combobox/useCombobox.tsx index ff0ef098d580b..b394426c17041 100644 --- a/packages/react-components/react-combobox/src/components/Combobox/useCombobox.tsx +++ b/packages/react-components/react-combobox/src/components/Combobox/useCombobox.tsx @@ -66,6 +66,10 @@ export const useCombobox_unstable = (props: ComboboxProps, ref: React.Ref(); React.useEffect(() => { @@ -150,20 +154,6 @@ export const useCombobox_unstable = (props: ComboboxProps, ref: React.Ref) => { - if (!open && getDropdownActionFromKey(ev) === 'Type') { - baseState.setOpen(ev, true); - } - - // clear activedescendant when moving the text insertion cursor - if (ev.key === ArrowLeft || ev.key === ArrowRight) { - setHideActiveDescendant(true); - } else { - setHideActiveDescendant(false); - } - }; - // resolve input and listbox slot props let triggerSlot: Slot<'input'>; let listboxSlot: Slot | undefined; @@ -178,9 +168,9 @@ export const useCombobox_unstable = (props: ComboboxProps, ref: React.Ref) => { + if (!open && getDropdownActionFromKey(ev) === 'Type') { + baseState.setOpen(ev, true); + } + + // clear activedescendant when moving the text insertion cursor + if (ev.key === ArrowLeft || ev.key === ArrowRight) { + setHideActiveDescendant(true); + } else { + setHideActiveDescendant(false); + } + + // update typing state to true if the user is typing + const action = getDropdownActionFromKey(ev, { open, multiselect }); + if (action === 'Type') { + isTyping.current = true; + } + // otherwise, update the typing state to false if opening or navigating dropdown options + // other actions, like closing the dropdown, should not impact typing state. + else if ( + (action === 'Open' && ev.key !== ' ') || + action === 'Next' || + action === 'Previous' || + action === 'First' || + action === 'Last' || + action === 'PageUp' || + action === 'PageDown' + ) { + isTyping.current = false; + } + + // allow space to insert a character if freeform & the last action was typing, or if the popup is closed + if (freeform && (isTyping.current || !open) && ev.key === ' ') { + resolvedPropsOnKeyDown?.(ev); + return; + } + + // if we're not allowing space to type, continue with default behavior + defaultOnTriggerKeyDown?.(ev); + }); + /* handle open/close + focus change when clicking expandIcon */ const { onMouseDown: onIconMouseDown, onClick: onIconClick } = state.expandIcon || {}; const onExpandIconMouseDown = useEventCallback( diff --git a/packages/react-components/react-combobox/src/testing/isConformant.ts b/packages/react-components/react-combobox/src/testing/isConformant.ts index 77f88408cbd83..a3d988f29a172 100644 --- a/packages/react-components/react-combobox/src/testing/isConformant.ts +++ b/packages/react-components/react-combobox/src/testing/isConformant.ts @@ -6,6 +6,7 @@ export function isConformant( testInfo: Omit, 'componentPath'> & { componentPath?: string }, ) { const defaultOptions: Partial> = { + tsConfig: { configName: 'tsconfig.spec.json' }, componentPath: require.main?.filename.replace('.test', ''), extraTests: griffelTests as TestObject, }; diff --git a/packages/react-components/react-components/etc/react-components.api.md b/packages/react-components/react-components/etc/react-components.api.md index 0586f75d6a974..07a2faca39bb7 100644 --- a/packages/react-components/react-components/etc/react-components.api.md +++ b/packages/react-components/react-components/etc/react-components.api.md @@ -909,6 +909,7 @@ import { useOption_unstable } from '@fluentui/react-combobox'; import { useOptionGroup_unstable } from '@fluentui/react-combobox'; import { useOptionGroupStyles_unstable } from '@fluentui/react-combobox'; import { useOptionStyles_unstable } from '@fluentui/react-combobox'; +import { useOverflowCount } from '@fluentui/react-overflow'; import { useOverflowMenu } from '@fluentui/react-overflow'; import { usePersona_unstable } from '@fluentui/react-persona'; import { usePersonaStyles_unstable } from '@fluentui/react-persona'; @@ -2813,6 +2814,8 @@ export { useOptionGroupStyles_unstable } export { useOptionStyles_unstable } +export { useOverflowCount } + export { useOverflowMenu } export { usePersona_unstable } diff --git a/packages/react-components/react-components/jest.config.js b/packages/react-components/react-components/jest.config.js index 97e86a16f06bf..111eb73ae8db1 100644 --- a/packages/react-components/react-components/jest.config.js +++ b/packages/react-components/react-components/jest.config.js @@ -9,7 +9,7 @@ module.exports = { globals: { 'ts-jest': { tsconfig: '/tsconfig.spec.json', - diagnostics: false, + isolatedModules: true, }, }, transform: { diff --git a/packages/react-components/react-components/src/index.ts b/packages/react-components/react-components/src/index.ts index da899f3541fe7..e01e20f27b10d 100644 --- a/packages/react-components/react-components/src/index.ts +++ b/packages/react-components/react-components/src/index.ts @@ -811,6 +811,7 @@ export { OverflowItem, useIsOverflowGroupVisible, useIsOverflowItemVisible, + useOverflowCount, useOverflowMenu, DATA_OVERFLOWING, DATA_OVERFLOW_MENU, diff --git a/packages/react-components/react-conformance-griffel/jest.config.js b/packages/react-components/react-conformance-griffel/jest.config.js index 6023f4a9b558f..73b42aa998da6 100644 --- a/packages/react-components/react-conformance-griffel/jest.config.js +++ b/packages/react-components/react-conformance-griffel/jest.config.js @@ -9,7 +9,7 @@ module.exports = { globals: { 'ts-jest': { tsconfig: '/tsconfig.spec.json', - diagnostics: false, + isolatedModules: true, }, }, transform: { diff --git a/packages/react-components/react-context-selector/jest.config.js b/packages/react-components/react-context-selector/jest.config.js index 39023dd6182c6..dcd74005c508f 100644 --- a/packages/react-components/react-context-selector/jest.config.js +++ b/packages/react-components/react-context-selector/jest.config.js @@ -9,7 +9,7 @@ module.exports = { globals: { 'ts-jest': { tsconfig: '/tsconfig.spec.json', - diagnostics: false, + isolatedModules: true, }, }, transform: { diff --git a/packages/react-components/react-data-grid-react-window/jest.config.js b/packages/react-components/react-data-grid-react-window/jest.config.js index 7a70c69372d17..5368c2f62c2c4 100644 --- a/packages/react-components/react-data-grid-react-window/jest.config.js +++ b/packages/react-components/react-data-grid-react-window/jest.config.js @@ -9,7 +9,7 @@ module.exports = { globals: { 'ts-jest': { tsconfig: '/tsconfig.spec.json', - diagnostics: false, + isolatedModules: true, }, }, transform: { diff --git a/packages/react-components/react-data-grid-react-window/src/components/DataGrid/DataGrid.tsx b/packages/react-components/react-data-grid-react-window/src/components/DataGrid/DataGrid.tsx index b2daaa21a7941..62bfa0648d030 100644 --- a/packages/react-components/react-data-grid-react-window/src/components/DataGrid/DataGrid.tsx +++ b/packages/react-components/react-data-grid-react-window/src/components/DataGrid/DataGrid.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import { useDataGrid_unstable } from './useDataGrid'; +import { useDataGrid_unstable } from './useDataGrid.styles'; import { renderDataGrid_unstable, useDataGridStyles_unstable, diff --git a/packages/react-components/react-data-grid-react-window/src/components/DataGrid/index.ts b/packages/react-components/react-data-grid-react-window/src/components/DataGrid/index.ts index 0b3589e2b3bc1..b5c5a7388b1d7 100644 --- a/packages/react-components/react-data-grid-react-window/src/components/DataGrid/index.ts +++ b/packages/react-components/react-data-grid-react-window/src/components/DataGrid/index.ts @@ -1,2 +1,2 @@ export * from './DataGrid'; -export * from './useDataGrid'; +export * from './useDataGrid.styles'; diff --git a/packages/react-components/react-data-grid-react-window/src/components/DataGrid/useDataGrid.ts b/packages/react-components/react-data-grid-react-window/src/components/DataGrid/useDataGrid.styles.ts similarity index 100% rename from packages/react-components/react-data-grid-react-window/src/components/DataGrid/useDataGrid.ts rename to packages/react-components/react-data-grid-react-window/src/components/DataGrid/useDataGrid.styles.ts diff --git a/packages/react-components/react-data-grid-react-window/src/components/DataGridBody/DataGridBody.tsx b/packages/react-components/react-data-grid-react-window/src/components/DataGridBody/DataGridBody.tsx index 754782dcc6881..481937ef050f6 100644 --- a/packages/react-components/react-data-grid-react-window/src/components/DataGridBody/DataGridBody.tsx +++ b/packages/react-components/react-data-grid-react-window/src/components/DataGridBody/DataGridBody.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; import type { ForwardRefComponent } from '@fluentui/react-utilities'; -import { useDataGridBodyStyles_unstable } from './useDataGridBodyStyles'; +import { useDataGridBodyStyles_unstable } from './useDataGridBodyStyles.styles'; import { useDataGridBody_unstable } from './useDataGridBody'; import { renderDataGridBody_unstable } from './renderDataGridBody'; import type { DataGridBodyProps } from './DataGridBody.types'; diff --git a/packages/react-components/react-data-grid-react-window/src/components/DataGridBody/useDataGridBodyStyles.ts b/packages/react-components/react-data-grid-react-window/src/components/DataGridBody/useDataGridBodyStyles.styles.ts similarity index 100% rename from packages/react-components/react-data-grid-react-window/src/components/DataGridBody/useDataGridBodyStyles.ts rename to packages/react-components/react-data-grid-react-window/src/components/DataGridBody/useDataGridBodyStyles.styles.ts diff --git a/packages/react-components/react-data-grid-react-window/src/components/DataGridRow/DataGridRow.tsx b/packages/react-components/react-data-grid-react-window/src/components/DataGridRow/DataGridRow.tsx index 11c6f85063d87..b5d8b394ca3ef 100644 --- a/packages/react-components/react-data-grid-react-window/src/components/DataGridRow/DataGridRow.tsx +++ b/packages/react-components/react-data-grid-react-window/src/components/DataGridRow/DataGridRow.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; import { useDataGridRowStyles_unstable, renderDataGridRow_unstable } from '@fluentui/react-table'; -import { useDataGridRow_unstable } from './useDataGridRow'; +import { useDataGridRow_unstable } from './useDataGridRow.styles'; import type { DataGridRowProps } from '@fluentui/react-table'; import type { ForwardRefComponent } from '@fluentui/react-utilities'; diff --git a/packages/react-components/react-data-grid-react-window/src/components/DataGridRow/index.ts b/packages/react-components/react-data-grid-react-window/src/components/DataGridRow/index.ts index 15727b3664100..a5ab3d0a834cd 100644 --- a/packages/react-components/react-data-grid-react-window/src/components/DataGridRow/index.ts +++ b/packages/react-components/react-data-grid-react-window/src/components/DataGridRow/index.ts @@ -1,2 +1,2 @@ export * from './DataGridRow'; -export * from './useDataGridRow'; +export * from './useDataGridRow.styles'; diff --git a/packages/react-components/react-data-grid-react-window/src/components/DataGridRow/useDataGridRow.ts b/packages/react-components/react-data-grid-react-window/src/components/DataGridRow/useDataGridRow.styles.ts similarity index 100% rename from packages/react-components/react-data-grid-react-window/src/components/DataGridRow/useDataGridRow.ts rename to packages/react-components/react-data-grid-react-window/src/components/DataGridRow/useDataGridRow.styles.ts diff --git a/packages/react-components/react-data-grid-react-window/src/testing/isConformant.ts b/packages/react-components/react-data-grid-react-window/src/testing/isConformant.ts index 77f88408cbd83..a3d988f29a172 100644 --- a/packages/react-components/react-data-grid-react-window/src/testing/isConformant.ts +++ b/packages/react-components/react-data-grid-react-window/src/testing/isConformant.ts @@ -6,6 +6,7 @@ export function isConformant( testInfo: Omit, 'componentPath'> & { componentPath?: string }, ) { const defaultOptions: Partial> = { + tsConfig: { configName: 'tsconfig.spec.json' }, componentPath: require.main?.filename.replace('.test', ''), extraTests: griffelTests as TestObject, }; diff --git a/packages/react-components/react-datepicker-compat/jest.config.js b/packages/react-components/react-datepicker-compat/jest.config.js index f3fbfc2d76eb2..023d31b89fd1e 100644 --- a/packages/react-components/react-datepicker-compat/jest.config.js +++ b/packages/react-components/react-datepicker-compat/jest.config.js @@ -9,7 +9,7 @@ module.exports = { globals: { 'ts-jest': { tsconfig: '/tsconfig.spec.json', - diagnostics: false, + isolatedModules: true, }, }, transform: { diff --git a/packages/react-components/react-datepicker-compat/src/testing/isConformant.ts b/packages/react-components/react-datepicker-compat/src/testing/isConformant.ts index 77f88408cbd83..a3d988f29a172 100644 --- a/packages/react-components/react-datepicker-compat/src/testing/isConformant.ts +++ b/packages/react-components/react-datepicker-compat/src/testing/isConformant.ts @@ -6,6 +6,7 @@ export function isConformant( testInfo: Omit, 'componentPath'> & { componentPath?: string }, ) { const defaultOptions: Partial> = { + tsConfig: { configName: 'tsconfig.spec.json' }, componentPath: require.main?.filename.replace('.test', ''), extraTests: griffelTests as TestObject, }; diff --git a/packages/react-components/react-dialog/jest.config.js b/packages/react-components/react-dialog/jest.config.js index 67ac9847a41d8..4057edf6c64b4 100644 --- a/packages/react-components/react-dialog/jest.config.js +++ b/packages/react-components/react-dialog/jest.config.js @@ -9,7 +9,7 @@ module.exports = { globals: { 'ts-jest': { tsconfig: '/tsconfig.spec.json', - diagnostics: false, + isolatedModules: true, }, }, transform: { 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 8f6b2ef5c8ed8..3ef410875ce1a 100644 --- a/packages/react-components/react-dialog/src/components/DialogActions/DialogActions.tsx +++ b/packages/react-components/react-dialog/src/components/DialogActions/DialogActions.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import { useDialogActions_unstable } from './useDialogActions'; import { renderDialogActions_unstable } from './renderDialogActions'; -import { useDialogActionsStyles_unstable } from './useDialogActionsStyles'; +import { useDialogActionsStyles_unstable } from './useDialogActionsStyles.styles'; import type { DialogActionsProps } from './DialogActions.types'; import type { ForwardRefComponent } from '@fluentui/react-utilities'; import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts'; diff --git a/packages/react-components/react-dialog/src/components/DialogActions/index.ts b/packages/react-components/react-dialog/src/components/DialogActions/index.ts index 5b6fc48233a89..0bb1d1cf48bd5 100644 --- a/packages/react-components/react-dialog/src/components/DialogActions/index.ts +++ b/packages/react-components/react-dialog/src/components/DialogActions/index.ts @@ -2,4 +2,4 @@ export * from './DialogActions'; export * from './DialogActions.types'; export * from './renderDialogActions'; export * from './useDialogActions'; -export * from './useDialogActionsStyles'; +export * from './useDialogActionsStyles.styles'; diff --git a/packages/react-components/react-dialog/src/components/DialogActions/useDialogActionsStyles.ts b/packages/react-components/react-dialog/src/components/DialogActions/useDialogActionsStyles.styles.ts similarity index 100% rename from packages/react-components/react-dialog/src/components/DialogActions/useDialogActionsStyles.ts rename to packages/react-components/react-dialog/src/components/DialogActions/useDialogActionsStyles.styles.ts 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 ec18e06c68371..e0cc53b302e1d 100644 --- a/packages/react-components/react-dialog/src/components/DialogBody/DialogBody.tsx +++ b/packages/react-components/react-dialog/src/components/DialogBody/DialogBody.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import { useDialogBody_unstable } from './useDialogBody'; import { renderDialogBody_unstable } from './renderDialogBody'; -import { useDialogBodyStyles_unstable } from './useDialogBodyStyles'; +import { useDialogBodyStyles_unstable } from './useDialogBodyStyles.styles'; import type { DialogBodyProps } from './DialogBody.types'; import type { ForwardRefComponent } from '@fluentui/react-utilities'; import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts'; diff --git a/packages/react-components/react-dialog/src/components/DialogBody/index.ts b/packages/react-components/react-dialog/src/components/DialogBody/index.ts index caade527cc447..bd1e90e0a99cb 100644 --- a/packages/react-components/react-dialog/src/components/DialogBody/index.ts +++ b/packages/react-components/react-dialog/src/components/DialogBody/index.ts @@ -2,4 +2,4 @@ export * from './DialogBody'; export * from './DialogBody.types'; export * from './renderDialogBody'; export * from './useDialogBody'; -export * from './useDialogBodyStyles'; +export * from './useDialogBodyStyles.styles'; diff --git a/packages/react-components/react-dialog/src/components/DialogBody/useDialogBodyStyles.ts b/packages/react-components/react-dialog/src/components/DialogBody/useDialogBodyStyles.styles.ts similarity index 100% rename from packages/react-components/react-dialog/src/components/DialogBody/useDialogBodyStyles.ts rename to packages/react-components/react-dialog/src/components/DialogBody/useDialogBodyStyles.styles.ts 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 d5a1ff53429a2..70b4a65cc56c5 100644 --- a/packages/react-components/react-dialog/src/components/DialogContent/DialogContent.tsx +++ b/packages/react-components/react-dialog/src/components/DialogContent/DialogContent.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import { useDialogContent_unstable } from './useDialogContent'; import { renderDialogContent_unstable } from './renderDialogContent'; -import { useDialogContentStyles_unstable } from './useDialogContentStyles'; +import { useDialogContentStyles_unstable } from './useDialogContentStyles.styles'; import type { DialogContentProps } from './DialogContent.types'; import type { ForwardRefComponent } from '@fluentui/react-utilities'; import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts'; diff --git a/packages/react-components/react-dialog/src/components/DialogContent/index.ts b/packages/react-components/react-dialog/src/components/DialogContent/index.ts index ccedb8165f7d7..b82b9c3521b39 100644 --- a/packages/react-components/react-dialog/src/components/DialogContent/index.ts +++ b/packages/react-components/react-dialog/src/components/DialogContent/index.ts @@ -2,4 +2,4 @@ export * from './DialogContent'; export * from './DialogContent.types'; export * from './renderDialogContent'; export * from './useDialogContent'; -export * from './useDialogContentStyles'; +export * from './useDialogContentStyles.styles'; diff --git a/packages/react-components/react-dialog/src/components/DialogContent/useDialogContentStyles.ts b/packages/react-components/react-dialog/src/components/DialogContent/useDialogContentStyles.styles.ts similarity index 100% rename from packages/react-components/react-dialog/src/components/DialogContent/useDialogContentStyles.ts rename to packages/react-components/react-dialog/src/components/DialogContent/useDialogContentStyles.styles.ts 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 c3fa7e9fca088..b84396ac84677 100644 --- a/packages/react-components/react-dialog/src/components/DialogSurface/DialogSurface.tsx +++ b/packages/react-components/react-dialog/src/components/DialogSurface/DialogSurface.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import { useDialogSurface_unstable } from './useDialogSurface'; import { renderDialogSurface_unstable } from './renderDialogSurface'; -import { useDialogSurfaceStyles_unstable } from './useDialogSurfaceStyles'; +import { useDialogSurfaceStyles_unstable } from './useDialogSurfaceStyles.styles'; import type { DialogSurfaceProps } from './DialogSurface.types'; import type { ForwardRefComponent } from '@fluentui/react-utilities'; import { useDialogSurfaceContextValues_unstable } from './useDialogSurfaceContextValues'; diff --git a/packages/react-components/react-dialog/src/components/DialogSurface/index.ts b/packages/react-components/react-dialog/src/components/DialogSurface/index.ts index d19bafa777e14..15d5efe48eeec 100644 --- a/packages/react-components/react-dialog/src/components/DialogSurface/index.ts +++ b/packages/react-components/react-dialog/src/components/DialogSurface/index.ts @@ -2,4 +2,4 @@ export * from './DialogSurface'; export * from './DialogSurface.types'; export * from './renderDialogSurface'; export * from './useDialogSurface'; -export * from './useDialogSurfaceStyles'; +export * from './useDialogSurfaceStyles.styles'; diff --git a/packages/react-components/react-dialog/src/components/DialogSurface/useDialogSurfaceStyles.ts b/packages/react-components/react-dialog/src/components/DialogSurface/useDialogSurfaceStyles.styles.ts similarity index 100% rename from packages/react-components/react-dialog/src/components/DialogSurface/useDialogSurfaceStyles.ts rename to packages/react-components/react-dialog/src/components/DialogSurface/useDialogSurfaceStyles.styles.ts 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 7bc0ce7591f56..2d60f6ef40f04 100644 --- a/packages/react-components/react-dialog/src/components/DialogTitle/DialogTitle.tsx +++ b/packages/react-components/react-dialog/src/components/DialogTitle/DialogTitle.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import { useDialogTitle_unstable } from './useDialogTitle'; import { renderDialogTitle_unstable } from './renderDialogTitle'; -import { useDialogTitleStyles_unstable } from './useDialogTitleStyles'; +import { useDialogTitleStyles_unstable } from './useDialogTitleStyles.styles'; import type { DialogTitleProps } from './DialogTitle.types'; import type { ForwardRefComponent } from '@fluentui/react-utilities'; import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts'; diff --git a/packages/react-components/react-dialog/src/components/DialogTitle/index.ts b/packages/react-components/react-dialog/src/components/DialogTitle/index.ts index 047ee38dc730a..af498e61b1d6c 100644 --- a/packages/react-components/react-dialog/src/components/DialogTitle/index.ts +++ b/packages/react-components/react-dialog/src/components/DialogTitle/index.ts @@ -2,4 +2,4 @@ export * from './DialogTitle'; export * from './DialogTitle.types'; export * from './renderDialogTitle'; export * from './useDialogTitle'; -export * from './useDialogTitleStyles'; +export * from './useDialogTitleStyles.styles'; diff --git a/packages/react-components/react-dialog/src/components/DialogTitle/useDialogTitle.tsx b/packages/react-components/react-dialog/src/components/DialogTitle/useDialogTitle.tsx index 0e08fdc625575..5aef3e2cbfb26 100644 --- a/packages/react-components/react-dialog/src/components/DialogTitle/useDialogTitle.tsx +++ b/packages/react-components/react-dialog/src/components/DialogTitle/useDialogTitle.tsx @@ -5,7 +5,7 @@ import { useDialogContext_unstable } from '../../contexts/dialogContext'; import { Dismiss24Regular } from '@fluentui/react-icons'; import { resolveShorthand } from '@fluentui/react-utilities'; import { DialogTrigger } from '../DialogTrigger/DialogTrigger'; -import { useDialogTitleInternalStyles } from './useDialogTitleStyles'; +import { useDialogTitleInternalStyles } from './useDialogTitleStyles.styles'; /** * Create the state required to render DialogTitle. diff --git a/packages/react-components/react-dialog/src/components/DialogTitle/useDialogTitleStyles.ts b/packages/react-components/react-dialog/src/components/DialogTitle/useDialogTitleStyles.styles.ts similarity index 100% rename from packages/react-components/react-dialog/src/components/DialogTitle/useDialogTitleStyles.ts rename to packages/react-components/react-dialog/src/components/DialogTitle/useDialogTitleStyles.styles.ts diff --git a/packages/react-components/react-dialog/src/components/DialogTrigger/DialogTrigger.tsx b/packages/react-components/react-dialog/src/components/DialogTrigger/DialogTrigger.tsx index a7a461654a948..d69fd85ace76d 100644 --- a/packages/react-components/react-dialog/src/components/DialogTrigger/DialogTrigger.tsx +++ b/packages/react-components/react-dialog/src/components/DialogTrigger/DialogTrigger.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import { useDialogTrigger_unstable } from './useDialogTrigger'; +import { useDialogTrigger_unstable } from './useDialogTrigger.styles'; import { renderDialogTrigger_unstable } from './renderDialogTrigger'; import type { DialogTriggerProps } from './DialogTrigger.types'; import type { FluentTriggerComponent } from '@fluentui/react-utilities'; diff --git a/packages/react-components/react-dialog/src/components/DialogTrigger/index.ts b/packages/react-components/react-dialog/src/components/DialogTrigger/index.ts index cefe8176cb56b..a6458850c55c0 100644 --- a/packages/react-components/react-dialog/src/components/DialogTrigger/index.ts +++ b/packages/react-components/react-dialog/src/components/DialogTrigger/index.ts @@ -1,4 +1,4 @@ export * from './DialogTrigger'; export * from './DialogTrigger.types'; export * from './renderDialogTrigger'; -export * from './useDialogTrigger'; +export * from './useDialogTrigger.styles'; diff --git a/packages/react-components/react-dialog/src/components/DialogTrigger/useDialogTrigger.ts b/packages/react-components/react-dialog/src/components/DialogTrigger/useDialogTrigger.styles.ts similarity index 100% rename from packages/react-components/react-dialog/src/components/DialogTrigger/useDialogTrigger.ts rename to packages/react-components/react-dialog/src/components/DialogTrigger/useDialogTrigger.styles.ts diff --git a/packages/react-components/react-dialog/src/testing/isConformant.ts b/packages/react-components/react-dialog/src/testing/isConformant.ts index 77f88408cbd83..a3d988f29a172 100644 --- a/packages/react-components/react-dialog/src/testing/isConformant.ts +++ b/packages/react-components/react-dialog/src/testing/isConformant.ts @@ -6,6 +6,7 @@ export function isConformant( testInfo: Omit, 'componentPath'> & { componentPath?: string }, ) { const defaultOptions: Partial> = { + tsConfig: { configName: 'tsconfig.spec.json' }, componentPath: require.main?.filename.replace('.test', ''), extraTests: griffelTests as TestObject, }; diff --git a/packages/react-components/react-divider/jest.config.js b/packages/react-components/react-divider/jest.config.js index d18346b0729fd..a8098f399f0a5 100644 --- a/packages/react-components/react-divider/jest.config.js +++ b/packages/react-components/react-divider/jest.config.js @@ -9,7 +9,7 @@ module.exports = { globals: { 'ts-jest': { tsconfig: '/tsconfig.spec.json', - diagnostics: false, + isolatedModules: true, }, }, transform: { diff --git a/packages/react-components/react-divider/src/testing/isConformant.ts b/packages/react-components/react-divider/src/testing/isConformant.ts index 2ffff9d342a7e..0aad9515bbca6 100644 --- a/packages/react-components/react-divider/src/testing/isConformant.ts +++ b/packages/react-components/react-divider/src/testing/isConformant.ts @@ -5,6 +5,7 @@ export function isConformant( testInfo: Omit, 'componentPath'> & { componentPath?: string }, ) { const defaultOptions: Partial> = { + tsConfig: { configName: 'tsconfig.spec.json' }, componentPath: require.main?.filename.replace('.test', ''), extraTests: griffelTests as TestObject, }; diff --git a/packages/react-components/react-drawer/jest.config.js b/packages/react-components/react-drawer/jest.config.js index 94e954e0a6995..efc18f02183c2 100644 --- a/packages/react-components/react-drawer/jest.config.js +++ b/packages/react-components/react-drawer/jest.config.js @@ -9,7 +9,7 @@ module.exports = { globals: { 'ts-jest': { tsconfig: '/tsconfig.spec.json', - diagnostics: false, + isolatedModules: true, }, }, transform: { diff --git a/packages/react-components/react-drawer/src/components/Drawer/Drawer.tsx b/packages/react-components/react-drawer/src/components/Drawer/Drawer.tsx index 8d0e913f7930b..1674263fc5202 100644 --- a/packages/react-components/react-drawer/src/components/Drawer/Drawer.tsx +++ b/packages/react-components/react-drawer/src/components/Drawer/Drawer.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import { useDrawer_unstable } from './useDrawer'; import { renderDrawer_unstable } from './renderDrawer'; -import { useDrawerStyles_unstable } from './useDrawerStyles'; +import { useDrawerStyles_unstable } from './useDrawerStyles.styles'; import type { DrawerProps } from './Drawer.types'; import type { ForwardRefComponent } from '@fluentui/react-utilities'; diff --git a/packages/react-components/react-drawer/src/components/Drawer/index.ts b/packages/react-components/react-drawer/src/components/Drawer/index.ts index 3bd2cab50d5f8..9e93458b3402f 100644 --- a/packages/react-components/react-drawer/src/components/Drawer/index.ts +++ b/packages/react-components/react-drawer/src/components/Drawer/index.ts @@ -2,4 +2,4 @@ export * from './Drawer'; export * from './Drawer.types'; export * from './renderDrawer'; export * from './useDrawer'; -export * from './useDrawerStyles'; +export * from './useDrawerStyles.styles'; diff --git a/packages/react-components/react-drawer/src/components/Drawer/useDrawerStyles.ts b/packages/react-components/react-drawer/src/components/Drawer/useDrawerStyles.styles.ts similarity index 100% rename from packages/react-components/react-drawer/src/components/Drawer/useDrawerStyles.ts rename to packages/react-components/react-drawer/src/components/Drawer/useDrawerStyles.styles.ts diff --git a/packages/react-components/react-drawer/src/testing/isConformant.ts b/packages/react-components/react-drawer/src/testing/isConformant.ts index 77f88408cbd83..a3d988f29a172 100644 --- a/packages/react-components/react-drawer/src/testing/isConformant.ts +++ b/packages/react-components/react-drawer/src/testing/isConformant.ts @@ -6,6 +6,7 @@ export function isConformant( testInfo: Omit, 'componentPath'> & { componentPath?: string }, ) { const defaultOptions: Partial> = { + tsConfig: { configName: 'tsconfig.spec.json' }, componentPath: require.main?.filename.replace('.test', ''), extraTests: griffelTests as TestObject, }; diff --git a/packages/react-components/react-field/jest.config.js b/packages/react-components/react-field/jest.config.js index a5a95459b194a..5190c367303a7 100644 --- a/packages/react-components/react-field/jest.config.js +++ b/packages/react-components/react-field/jest.config.js @@ -9,7 +9,7 @@ module.exports = { globals: { 'ts-jest': { tsconfig: '/tsconfig.spec.json', - diagnostics: false, + isolatedModules: true, }, }, transform: { diff --git a/packages/react-components/react-field/src/testing/isConformant.ts b/packages/react-components/react-field/src/testing/isConformant.ts index 2ffff9d342a7e..0aad9515bbca6 100644 --- a/packages/react-components/react-field/src/testing/isConformant.ts +++ b/packages/react-components/react-field/src/testing/isConformant.ts @@ -5,6 +5,7 @@ export function isConformant( testInfo: Omit, 'componentPath'> & { componentPath?: string }, ) { const defaultOptions: Partial> = { + tsConfig: { configName: 'tsconfig.spec.json' }, componentPath: require.main?.filename.replace('.test', ''), extraTests: griffelTests as TestObject, }; diff --git a/packages/react-components/react-image/jest.config.js b/packages/react-components/react-image/jest.config.js index 6cc92ea82d5d4..8c23e4216db0e 100644 --- a/packages/react-components/react-image/jest.config.js +++ b/packages/react-components/react-image/jest.config.js @@ -9,7 +9,7 @@ module.exports = { globals: { 'ts-jest': { tsconfig: '/tsconfig.spec.json', - diagnostics: false, + isolatedModules: true, }, }, transform: { 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 d3340dd4ab5ea..1adca6b730603 100644 --- a/packages/react-components/react-image/src/components/Image/Image.tsx +++ b/packages/react-components/react-image/src/components/Image/Image.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import { renderImage_unstable } from './renderImage'; import { useImage_unstable } from './useImage'; -import { useImageStyles_unstable } from './useImageStyles'; +import { useImageStyles_unstable } from './useImageStyles.styles'; import type { ImageProps } from './Image.types'; import type { ForwardRefComponent } from '@fluentui/react-utilities'; import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts'; diff --git a/packages/react-components/react-image/src/components/Image/index.ts b/packages/react-components/react-image/src/components/Image/index.ts index 1ce909a1ae2b8..85f137b8d4db0 100644 --- a/packages/react-components/react-image/src/components/Image/index.ts +++ b/packages/react-components/react-image/src/components/Image/index.ts @@ -2,4 +2,4 @@ export * from './Image.types'; export * from './Image'; export * from './renderImage'; export * from './useImage'; -export * from './useImageStyles'; +export * from './useImageStyles.styles'; diff --git a/packages/react-components/react-image/src/components/Image/useImageStyles.ts b/packages/react-components/react-image/src/components/Image/useImageStyles.styles.ts similarity index 100% rename from packages/react-components/react-image/src/components/Image/useImageStyles.ts rename to packages/react-components/react-image/src/components/Image/useImageStyles.styles.ts diff --git a/packages/react-components/react-image/src/testing/isConformant.ts b/packages/react-components/react-image/src/testing/isConformant.ts index 77f88408cbd83..a3d988f29a172 100644 --- a/packages/react-components/react-image/src/testing/isConformant.ts +++ b/packages/react-components/react-image/src/testing/isConformant.ts @@ -6,6 +6,7 @@ export function isConformant( testInfo: Omit, 'componentPath'> & { componentPath?: string }, ) { const defaultOptions: Partial> = { + tsConfig: { configName: 'tsconfig.spec.json' }, componentPath: require.main?.filename.replace('.test', ''), extraTests: griffelTests as TestObject, }; diff --git a/packages/react-components/react-infobutton/jest.config.js b/packages/react-components/react-infobutton/jest.config.js index 57088d9b82184..1bf9ac3cbf559 100644 --- a/packages/react-components/react-infobutton/jest.config.js +++ b/packages/react-components/react-infobutton/jest.config.js @@ -9,7 +9,7 @@ module.exports = { globals: { 'ts-jest': { tsconfig: '/tsconfig.spec.json', - diagnostics: false, + isolatedModules: true, }, }, transform: { diff --git a/packages/react-components/react-infobutton/src/testing/isConformant.ts b/packages/react-components/react-infobutton/src/testing/isConformant.ts index 77f88408cbd83..a3d988f29a172 100644 --- a/packages/react-components/react-infobutton/src/testing/isConformant.ts +++ b/packages/react-components/react-infobutton/src/testing/isConformant.ts @@ -6,6 +6,7 @@ export function isConformant( testInfo: Omit, 'componentPath'> & { componentPath?: string }, ) { const defaultOptions: Partial> = { + tsConfig: { configName: 'tsconfig.spec.json' }, componentPath: require.main?.filename.replace('.test', ''), extraTests: griffelTests as TestObject, }; diff --git a/packages/react-components/react-input/jest.config.js b/packages/react-components/react-input/jest.config.js index a7110dfad207e..38e8aef2383f6 100644 --- a/packages/react-components/react-input/jest.config.js +++ b/packages/react-components/react-input/jest.config.js @@ -9,7 +9,7 @@ module.exports = { globals: { 'ts-jest': { tsconfig: '/tsconfig.spec.json', - diagnostics: false, + isolatedModules: true, }, }, transform: { diff --git a/packages/react-components/react-input/src/testing/isConformant.ts b/packages/react-components/react-input/src/testing/isConformant.ts index 77f88408cbd83..a3d988f29a172 100644 --- a/packages/react-components/react-input/src/testing/isConformant.ts +++ b/packages/react-components/react-input/src/testing/isConformant.ts @@ -6,6 +6,7 @@ export function isConformant( testInfo: Omit, 'componentPath'> & { componentPath?: string }, ) { const defaultOptions: Partial> = { + tsConfig: { configName: 'tsconfig.spec.json' }, componentPath: require.main?.filename.replace('.test', ''), extraTests: griffelTests as TestObject, }; diff --git a/packages/react-components/react-jsx-runtime/jest.config.js b/packages/react-components/react-jsx-runtime/jest.config.js index b3440c12005ef..160d733973758 100644 --- a/packages/react-components/react-jsx-runtime/jest.config.js +++ b/packages/react-components/react-jsx-runtime/jest.config.js @@ -9,7 +9,7 @@ module.exports = { globals: { 'ts-jest': { tsconfig: '/tsconfig.spec.json', - diagnostics: false, + isolatedModules: true, }, }, transform: { diff --git a/packages/react-components/react-label/jest.config.js b/packages/react-components/react-label/jest.config.js index 00d608e89df8b..d8b0c7895c8b9 100644 --- a/packages/react-components/react-label/jest.config.js +++ b/packages/react-components/react-label/jest.config.js @@ -9,7 +9,7 @@ module.exports = { globals: { 'ts-jest': { tsconfig: '/tsconfig.spec.json', - diagnostics: false, + isolatedModules: true, }, }, transform: { diff --git a/packages/react-components/react-label/src/testing/isConformant.ts b/packages/react-components/react-label/src/testing/isConformant.ts index 77f88408cbd83..a3d988f29a172 100644 --- a/packages/react-components/react-label/src/testing/isConformant.ts +++ b/packages/react-components/react-label/src/testing/isConformant.ts @@ -6,6 +6,7 @@ export function isConformant( testInfo: Omit, 'componentPath'> & { componentPath?: string }, ) { const defaultOptions: Partial> = { + tsConfig: { configName: 'tsconfig.spec.json' }, componentPath: require.main?.filename.replace('.test', ''), extraTests: griffelTests as TestObject, }; diff --git a/packages/react-components/react-link/jest.config.js b/packages/react-components/react-link/jest.config.js index ce3f6a490ef56..23277d27bcf9f 100644 --- a/packages/react-components/react-link/jest.config.js +++ b/packages/react-components/react-link/jest.config.js @@ -9,7 +9,7 @@ module.exports = { globals: { 'ts-jest': { tsconfig: '/tsconfig.spec.json', - diagnostics: false, + isolatedModules: true, }, }, transform: { diff --git a/packages/react-components/react-link/src/testing/isConformant.ts b/packages/react-components/react-link/src/testing/isConformant.ts index 77f88408cbd83..a3d988f29a172 100644 --- a/packages/react-components/react-link/src/testing/isConformant.ts +++ b/packages/react-components/react-link/src/testing/isConformant.ts @@ -6,6 +6,7 @@ export function isConformant( testInfo: Omit, 'componentPath'> & { componentPath?: string }, ) { const defaultOptions: Partial> = { + tsConfig: { configName: 'tsconfig.spec.json' }, componentPath: require.main?.filename.replace('.test', ''), extraTests: griffelTests as TestObject, }; diff --git a/packages/react-components/react-menu/jest.config.js b/packages/react-components/react-menu/jest.config.js index 89dddbb7628ac..3b5908251f56f 100644 --- a/packages/react-components/react-menu/jest.config.js +++ b/packages/react-components/react-menu/jest.config.js @@ -9,7 +9,7 @@ module.exports = { globals: { 'ts-jest': { tsconfig: '/tsconfig.spec.json', - diagnostics: false, + isolatedModules: true, }, }, transform: { diff --git a/packages/react-components/react-menu/src/components/Menu/Menu.cy.tsx b/packages/react-components/react-menu/src/components/Menu/Menu.cy.tsx index 6aec751ad2b68..03c8b64f4e585 100644 --- a/packages/react-components/react-menu/src/components/Menu/Menu.cy.tsx +++ b/packages/react-components/react-menu/src/components/Menu/Menu.cy.tsx @@ -132,6 +132,41 @@ describe('MenuTrigger', () => { ); cy.get(menuTriggerSelector).should('not.be.focused'); }); + + it('should not focus itself after re-render', () => { + const Example = () => { + const [count, setCount] = React.useState(0); + + React.useEffect(() => { + // trigger 2 re-renders to make sure that the focus effect has finished running + // after first re-render + if (count < 2) { + setCount(c => c + 1); + } + }, [count]); + + return ( + <> + + + + + + + Item + + + + + + ); + }; + + mount(); + cy.get(menuTriggerSelector).should('have.attr', 'data-status', 'complete').should('not.be.focused'); + }); }); describe('Custom Trigger', () => { @@ -391,7 +426,7 @@ describe('MenuItemRadio', () => { }); describe('Menu', () => { - it('should not focus trigger on dismiss if another elemnt is focused', () => { + it('should not focus trigger on dismiss if another element is focused', () => { mount( <> diff --git a/packages/react-components/react-menu/src/components/Menu/Menu.test.tsx b/packages/react-components/react-menu/src/components/Menu/Menu.test.tsx index d876ba971a07e..58d3fe512e16d 100644 --- a/packages/react-components/react-menu/src/components/Menu/Menu.test.tsx +++ b/packages/react-components/react-menu/src/components/Menu/Menu.test.tsx @@ -144,7 +144,6 @@ describe('Menu', () => { - {/* eslint-disable-next-line @fluentui/max-len */} {/* @ts-expect-error - MenuItemComponent is union of 3 non-matching interfaces. Unnecessary narrowing logic would be needed which is out of scope for what is being tested */} Item diff --git a/packages/react-components/react-menu/src/components/Menu/useMenu.tsx b/packages/react-components/react-menu/src/components/Menu/useMenu.tsx index 5030194e69e75..cf6c19f807ca0 100644 --- a/packages/react-components/react-menu/src/components/Menu/useMenu.tsx +++ b/packages/react-components/react-menu/src/components/Menu/useMenu.tsx @@ -292,7 +292,9 @@ const useMenuOpenState = ( } } } - }, [state.triggerRef, state.isSubmenu, open, focusFirst, firstMount, targetDocument, state.menuPopoverRef]); + // firstMount change should not re-run this effect + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [state.triggerRef, state.isSubmenu, open, focusFirst, targetDocument, state.menuPopoverRef]); return [open, setOpen] as const; }; 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 f431113e52757..3ab30d21a7b71 100644 --- a/packages/react-components/react-menu/src/components/MenuDivider/MenuDivider.tsx +++ b/packages/react-components/react-menu/src/components/MenuDivider/MenuDivider.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; import { useMenuDivider_unstable } from './useMenuDivider'; -import { useMenuDividerStyles_unstable } from './useMenuDividerStyles'; +import { useMenuDividerStyles_unstable } from './useMenuDividerStyles.styles'; import { renderMenuDivider_unstable } from './renderMenuDivider'; import type { MenuDividerProps } from './MenuDivider.types'; import type { ForwardRefComponent } from '@fluentui/react-utilities'; diff --git a/packages/react-components/react-menu/src/components/MenuDivider/index.ts b/packages/react-components/react-menu/src/components/MenuDivider/index.ts index bd1eccccc7fe7..b3ce7e41abbce 100644 --- a/packages/react-components/react-menu/src/components/MenuDivider/index.ts +++ b/packages/react-components/react-menu/src/components/MenuDivider/index.ts @@ -2,4 +2,4 @@ export * from './MenuDivider.types'; export * from './MenuDivider'; export * from './renderMenuDivider'; export * from './useMenuDivider'; -export * from './useMenuDividerStyles'; +export * from './useMenuDividerStyles.styles'; diff --git a/packages/react-components/react-menu/src/components/MenuDivider/useMenuDividerStyles.ts b/packages/react-components/react-menu/src/components/MenuDivider/useMenuDividerStyles.styles.ts similarity index 100% rename from packages/react-components/react-menu/src/components/MenuDivider/useMenuDividerStyles.ts rename to packages/react-components/react-menu/src/components/MenuDivider/useMenuDividerStyles.styles.ts 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 2476fd06badce..5e219f6318a4d 100644 --- a/packages/react-components/react-menu/src/components/MenuGroup/MenuGroup.tsx +++ b/packages/react-components/react-menu/src/components/MenuGroup/MenuGroup.tsx @@ -4,7 +4,7 @@ import { renderMenuGroup_unstable } from './renderMenuGroup'; import { useMenuGroupContextValues_unstable } from './useMenuGroupContextValues'; import type { MenuGroupProps } from './MenuGroup.types'; import type { ForwardRefComponent } from '@fluentui/react-utilities'; -import { useMenuGroupStyles_unstable } from './useMenuGroupStyles'; +import { useMenuGroupStyles_unstable } from './useMenuGroupStyles.styles'; import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts'; /** diff --git a/packages/react-components/react-menu/src/components/MenuGroup/index.ts b/packages/react-components/react-menu/src/components/MenuGroup/index.ts index 75c785120a432..698b5c6bce609 100644 --- a/packages/react-components/react-menu/src/components/MenuGroup/index.ts +++ b/packages/react-components/react-menu/src/components/MenuGroup/index.ts @@ -3,4 +3,4 @@ export * from './MenuGroup'; export * from './renderMenuGroup'; export * from './useMenuGroup'; export * from './useMenuGroupContextValues'; -export * from './useMenuGroupStyles'; +export * from './useMenuGroupStyles.styles'; diff --git a/packages/react-components/react-menu/src/components/MenuGroup/useMenuGroupStyles.ts b/packages/react-components/react-menu/src/components/MenuGroup/useMenuGroupStyles.styles.ts similarity index 100% rename from packages/react-components/react-menu/src/components/MenuGroup/useMenuGroupStyles.ts rename to packages/react-components/react-menu/src/components/MenuGroup/useMenuGroupStyles.styles.ts 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 0a64728ade434..a858b018cde69 100644 --- a/packages/react-components/react-menu/src/components/MenuGroupHeader/MenuGroupHeader.tsx +++ b/packages/react-components/react-menu/src/components/MenuGroupHeader/MenuGroupHeader.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; import { useMenuGroupHeader_unstable } from './useMenuGroupHeader'; -import { useMenuGroupHeaderStyles_unstable } from './useMenuGroupHeaderStyles'; +import { useMenuGroupHeaderStyles_unstable } from './useMenuGroupHeaderStyles.styles'; import { renderMenuGroupHeader_unstable } from './renderMenuGroupHeader'; import type { MenuGroupHeaderProps } from './MenuGroupHeader.types'; import type { ForwardRefComponent } from '@fluentui/react-utilities'; diff --git a/packages/react-components/react-menu/src/components/MenuGroupHeader/index.ts b/packages/react-components/react-menu/src/components/MenuGroupHeader/index.ts index cfa4eae82c728..0ed602008ef44 100644 --- a/packages/react-components/react-menu/src/components/MenuGroupHeader/index.ts +++ b/packages/react-components/react-menu/src/components/MenuGroupHeader/index.ts @@ -2,4 +2,4 @@ export * from './MenuGroupHeader.types'; export * from './MenuGroupHeader'; export * from './renderMenuGroupHeader'; export * from './useMenuGroupHeader'; -export * from './useMenuGroupHeaderStyles'; +export * from './useMenuGroupHeaderStyles.styles'; diff --git a/packages/react-components/react-menu/src/components/MenuGroupHeader/useMenuGroupHeaderStyles.ts b/packages/react-components/react-menu/src/components/MenuGroupHeader/useMenuGroupHeaderStyles.styles.ts similarity index 100% rename from packages/react-components/react-menu/src/components/MenuGroupHeader/useMenuGroupHeaderStyles.ts rename to packages/react-components/react-menu/src/components/MenuGroupHeader/useMenuGroupHeaderStyles.styles.ts 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 1675b14a5e334..e0e0781cc4bbe 100644 --- a/packages/react-components/react-menu/src/components/MenuItem/MenuItem.tsx +++ b/packages/react-components/react-menu/src/components/MenuItem/MenuItem.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import { useMenuItem_unstable } from './useMenuItem'; import { renderMenuItem_unstable } from './renderMenuItem'; -import { useMenuItemStyles_unstable } from './useMenuItemStyles'; +import { useMenuItemStyles_unstable } from './useMenuItemStyles.styles'; import type { MenuItemProps } from './MenuItem.types'; import type { ForwardRefComponent } from '@fluentui/react-utilities'; import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts'; diff --git a/packages/react-components/react-menu/src/components/MenuItem/index.ts b/packages/react-components/react-menu/src/components/MenuItem/index.ts index 0b29cffc22b17..d7dd7263467eb 100644 --- a/packages/react-components/react-menu/src/components/MenuItem/index.ts +++ b/packages/react-components/react-menu/src/components/MenuItem/index.ts @@ -2,4 +2,4 @@ export * from './MenuItem'; export * from './MenuItem.types'; export * from './renderMenuItem'; export * from './useMenuItem'; -export * from './useMenuItemStyles'; +export * from './useMenuItemStyles.styles'; diff --git a/packages/react-components/react-menu/src/components/MenuItem/useMenuItemStyles.ts b/packages/react-components/react-menu/src/components/MenuItem/useMenuItemStyles.styles.ts similarity index 100% rename from packages/react-components/react-menu/src/components/MenuItem/useMenuItemStyles.ts rename to packages/react-components/react-menu/src/components/MenuItem/useMenuItemStyles.styles.ts 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 2c7ed1b5f2f0f..27a8a0612fbc6 100644 --- a/packages/react-components/react-menu/src/components/MenuItemCheckbox/MenuItemCheckbox.tsx +++ b/packages/react-components/react-menu/src/components/MenuItemCheckbox/MenuItemCheckbox.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import { useMenuItemCheckbox_unstable } from './useMenuItemCheckbox'; import { renderMenuItemCheckbox_unstable } from './renderMenuItemCheckbox'; -import { useMenuItemCheckboxStyles_unstable } from './useMenuItemCheckboxStyles'; +import { useMenuItemCheckboxStyles_unstable } from './useMenuItemCheckboxStyles.styles'; import type { MenuItemCheckboxProps } from './MenuItemCheckbox.types'; import type { ForwardRefComponent } from '@fluentui/react-utilities'; import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts'; diff --git a/packages/react-components/react-menu/src/components/MenuItemCheckbox/index.ts b/packages/react-components/react-menu/src/components/MenuItemCheckbox/index.ts index a83c37b3b835d..2c8eda2b015be 100644 --- a/packages/react-components/react-menu/src/components/MenuItemCheckbox/index.ts +++ b/packages/react-components/react-menu/src/components/MenuItemCheckbox/index.ts @@ -2,4 +2,4 @@ export * from './MenuItemCheckbox.types'; export * from './MenuItemCheckbox'; export * from './renderMenuItemCheckbox'; export * from './useMenuItemCheckbox'; -export * from './useMenuItemCheckboxStyles'; +export * from './useMenuItemCheckboxStyles.styles'; diff --git a/packages/react-components/react-menu/src/components/MenuItemCheckbox/useMenuItemCheckboxStyles.ts b/packages/react-components/react-menu/src/components/MenuItemCheckbox/useMenuItemCheckboxStyles.styles.ts similarity index 98% rename from packages/react-components/react-menu/src/components/MenuItemCheckbox/useMenuItemCheckboxStyles.ts rename to packages/react-components/react-menu/src/components/MenuItemCheckbox/useMenuItemCheckboxStyles.styles.ts index fbd280b4ecb39..c9d99176b6a14 100644 --- a/packages/react-components/react-menu/src/components/MenuItemCheckbox/useMenuItemCheckboxStyles.ts +++ b/packages/react-components/react-menu/src/components/MenuItemCheckbox/useMenuItemCheckboxStyles.styles.ts @@ -1,6 +1,6 @@ import { mergeClasses } from '@griffel/react'; import { useCheckmarkStyles_unstable } from '../../selectable/index'; -import { useMenuItemStyles_unstable } from '../MenuItem/useMenuItemStyles'; +import { useMenuItemStyles_unstable } from '../MenuItem/useMenuItemStyles.styles'; import type { SlotClassNames } from '@fluentui/react-utilities'; import type { MenuItemSlots } from '../index'; import type { MenuItemCheckboxState } from './MenuItemCheckbox.types'; 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 2297cec627f5e..29987dfca3c4a 100644 --- a/packages/react-components/react-menu/src/components/MenuItemRadio/MenuItemRadio.tsx +++ b/packages/react-components/react-menu/src/components/MenuItemRadio/MenuItemRadio.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import { useMenuItemRadio_unstable } from './useMenuItemRadio'; import { renderMenuItemRadio_unstable } from './renderMenuItemRadio'; -import { useMenuItemRadioStyles_unstable } from './useMenuItemRadioStyles'; +import { useMenuItemRadioStyles_unstable } from './useMenuItemRadioStyles.styles'; import type { MenuItemRadioProps } from './MenuItemRadio.types'; import type { ForwardRefComponent } from '@fluentui/react-utilities'; import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts'; diff --git a/packages/react-components/react-menu/src/components/MenuItemRadio/index.ts b/packages/react-components/react-menu/src/components/MenuItemRadio/index.ts index 5fccfd5f89c2c..8ca3847c61329 100644 --- a/packages/react-components/react-menu/src/components/MenuItemRadio/index.ts +++ b/packages/react-components/react-menu/src/components/MenuItemRadio/index.ts @@ -2,4 +2,4 @@ export * from './MenuItemRadio.types'; export * from './MenuItemRadio'; export * from './renderMenuItemRadio'; export * from './useMenuItemRadio'; -export * from './useMenuItemRadioStyles'; +export * from './useMenuItemRadioStyles.styles'; diff --git a/packages/react-components/react-menu/src/components/MenuItemRadio/useMenuItemRadioStyles.ts b/packages/react-components/react-menu/src/components/MenuItemRadio/useMenuItemRadioStyles.styles.ts similarity index 98% rename from packages/react-components/react-menu/src/components/MenuItemRadio/useMenuItemRadioStyles.ts rename to packages/react-components/react-menu/src/components/MenuItemRadio/useMenuItemRadioStyles.styles.ts index 7da6c66881a01..d55c3d848a173 100644 --- a/packages/react-components/react-menu/src/components/MenuItemRadio/useMenuItemRadioStyles.ts +++ b/packages/react-components/react-menu/src/components/MenuItemRadio/useMenuItemRadioStyles.styles.ts @@ -1,6 +1,6 @@ import { mergeClasses } from '@griffel/react'; import { useCheckmarkStyles_unstable } from '../../selectable/index'; -import { useMenuItemStyles_unstable } from '../MenuItem/useMenuItemStyles'; +import { useMenuItemStyles_unstable } from '../MenuItem/useMenuItemStyles.styles'; import type { SlotClassNames } from '@fluentui/react-utilities'; import type { MenuItemSlots } from '../index'; import type { MenuItemRadioState } from './MenuItemRadio.types'; 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 4786a7c9120b3..3e8992f4363d5 100644 --- a/packages/react-components/react-menu/src/components/MenuList/MenuList.tsx +++ b/packages/react-components/react-menu/src/components/MenuList/MenuList.tsx @@ -2,7 +2,7 @@ import * as React from 'react'; import { useMenuList_unstable } from './useMenuList'; import { renderMenuList_unstable } from './renderMenuList'; import { useMenuListContextValues_unstable } from './useMenuListContextValues'; -import { useMenuListStyles_unstable } from './useMenuListStyles'; +import { useMenuListStyles_unstable } from './useMenuListStyles.styles'; import type { MenuListProps } from './MenuList.types'; import type { ForwardRefComponent } from '@fluentui/react-utilities'; import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts'; diff --git a/packages/react-components/react-menu/src/components/MenuList/index.ts b/packages/react-components/react-menu/src/components/MenuList/index.ts index ffa4d4b2b0602..b31eacd3ed553 100644 --- a/packages/react-components/react-menu/src/components/MenuList/index.ts +++ b/packages/react-components/react-menu/src/components/MenuList/index.ts @@ -2,5 +2,5 @@ export * from './MenuList'; export * from './MenuList.types'; export * from './renderMenuList'; export * from './useMenuList'; -export * from './useMenuListStyles'; +export * from './useMenuListStyles.styles'; export * from './useMenuListContextValues'; diff --git a/packages/react-components/react-menu/src/components/MenuList/useMenuListStyles.ts b/packages/react-components/react-menu/src/components/MenuList/useMenuListStyles.styles.ts similarity index 100% rename from packages/react-components/react-menu/src/components/MenuList/useMenuListStyles.ts rename to packages/react-components/react-menu/src/components/MenuList/useMenuListStyles.styles.ts 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 1e0dbc2573362..fdbd423a2def1 100644 --- a/packages/react-components/react-menu/src/components/MenuPopover/MenuPopover.tsx +++ b/packages/react-components/react-menu/src/components/MenuPopover/MenuPopover.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; import { useMenuPopover_unstable } from './useMenuPopover'; -import { useMenuPopoverStyles_unstable } from './useMenuPopoverStyles'; +import { useMenuPopoverStyles_unstable } from './useMenuPopoverStyles.styles'; import { renderMenuPopover_unstable } from './renderMenuPopover'; import type { MenuPopoverProps } from './MenuPopover.types'; import type { ForwardRefComponent } from '@fluentui/react-utilities'; diff --git a/packages/react-components/react-menu/src/components/MenuPopover/index.ts b/packages/react-components/react-menu/src/components/MenuPopover/index.ts index 8d0c44ba098a7..84ae361cc00a8 100644 --- a/packages/react-components/react-menu/src/components/MenuPopover/index.ts +++ b/packages/react-components/react-menu/src/components/MenuPopover/index.ts @@ -2,4 +2,4 @@ export * from './MenuPopover'; export * from './MenuPopover.types'; export * from './renderMenuPopover'; export * from './useMenuPopover'; -export * from './useMenuPopoverStyles'; +export * from './useMenuPopoverStyles.styles'; diff --git a/packages/react-components/react-menu/src/components/MenuPopover/useMenuPopoverStyles.ts b/packages/react-components/react-menu/src/components/MenuPopover/useMenuPopoverStyles.styles.ts similarity index 100% rename from packages/react-components/react-menu/src/components/MenuPopover/useMenuPopoverStyles.ts rename to packages/react-components/react-menu/src/components/MenuPopover/useMenuPopoverStyles.styles.ts 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 1271e8217e0db..fc090d1da217e 100644 --- a/packages/react-components/react-menu/src/components/MenuSplitGroup/MenuSplitGroup.tsx +++ b/packages/react-components/react-menu/src/components/MenuSplitGroup/MenuSplitGroup.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import { useMenuSplitGroup_unstable } from './useMenuSplitGroup'; import { renderMenuSplitGroup_unstable } from './renderMenuSplitGroup'; -import { useMenuSplitGroupStyles_unstable } from './useMenuSplitGroupStyles'; +import { useMenuSplitGroupStyles_unstable } from './useMenuSplitGroupStyles.styles'; import type { MenuSplitGroupProps } from './MenuSplitGroup.types'; import type { ForwardRefComponent } from '@fluentui/react-utilities'; import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts'; diff --git a/packages/react-components/react-menu/src/components/MenuSplitGroup/index.ts b/packages/react-components/react-menu/src/components/MenuSplitGroup/index.ts index b2a65af21252e..a9bf5ffac60a8 100644 --- a/packages/react-components/react-menu/src/components/MenuSplitGroup/index.ts +++ b/packages/react-components/react-menu/src/components/MenuSplitGroup/index.ts @@ -2,4 +2,4 @@ export * from './MenuSplitGroup'; export * from './MenuSplitGroup.types'; export * from './renderMenuSplitGroup'; export * from './useMenuSplitGroup'; -export * from './useMenuSplitGroupStyles'; +export * from './useMenuSplitGroupStyles.styles'; diff --git a/packages/react-components/react-menu/src/components/MenuSplitGroup/useMenuSplitGroupStyles.ts b/packages/react-components/react-menu/src/components/MenuSplitGroup/useMenuSplitGroupStyles.styles.ts similarity index 99% rename from packages/react-components/react-menu/src/components/MenuSplitGroup/useMenuSplitGroupStyles.ts rename to packages/react-components/react-menu/src/components/MenuSplitGroup/useMenuSplitGroupStyles.styles.ts index 683ae56cc594a..318db14dc7524 100644 --- a/packages/react-components/react-menu/src/components/MenuSplitGroup/useMenuSplitGroupStyles.ts +++ b/packages/react-components/react-menu/src/components/MenuSplitGroup/useMenuSplitGroupStyles.styles.ts @@ -1,6 +1,6 @@ import { makeStyles, mergeClasses } from '@griffel/react'; import { tokens } from '@fluentui/react-theme'; -import { menuItemClassNames } from '../MenuItem/useMenuItemStyles'; +import { menuItemClassNames } from '../MenuItem/useMenuItemStyles.styles'; import type { MenuSplitGroupSlots, MenuSplitGroupState } from './MenuSplitGroup.types'; import type { SlotClassNames } from '@fluentui/react-utilities'; diff --git a/packages/react-components/react-menu/src/components/MenuTrigger/MenuTrigger.tsx b/packages/react-components/react-menu/src/components/MenuTrigger/MenuTrigger.tsx index 6b380e0dd3687..f33a6edd402c5 100644 --- a/packages/react-components/react-menu/src/components/MenuTrigger/MenuTrigger.tsx +++ b/packages/react-components/react-menu/src/components/MenuTrigger/MenuTrigger.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import { useMenuTrigger_unstable } from './useMenuTrigger'; +import { useMenuTrigger_unstable } from './useMenuTrigger.styles'; import { renderMenuTrigger_unstable } from './renderMenuTrigger'; import type { MenuTriggerProps } from './MenuTrigger.types'; import type { FluentTriggerComponent } from '@fluentui/react-utilities'; diff --git a/packages/react-components/react-menu/src/components/MenuTrigger/index.ts b/packages/react-components/react-menu/src/components/MenuTrigger/index.ts index b5b4a29882293..87de2ef026bca 100644 --- a/packages/react-components/react-menu/src/components/MenuTrigger/index.ts +++ b/packages/react-components/react-menu/src/components/MenuTrigger/index.ts @@ -1,4 +1,4 @@ export * from './MenuTrigger'; export * from './MenuTrigger.types'; export * from './renderMenuTrigger'; -export * from './useMenuTrigger'; +export * from './useMenuTrigger.styles'; diff --git a/packages/react-components/react-menu/src/components/MenuTrigger/useMenuTrigger.ts b/packages/react-components/react-menu/src/components/MenuTrigger/useMenuTrigger.styles.ts similarity index 100% rename from packages/react-components/react-menu/src/components/MenuTrigger/useMenuTrigger.ts rename to packages/react-components/react-menu/src/components/MenuTrigger/useMenuTrigger.styles.ts diff --git a/packages/react-components/react-menu/src/selectable/index.ts b/packages/react-components/react-menu/src/selectable/index.ts index 3b6e83350f951..6f5ded7fa4194 100644 --- a/packages/react-components/react-menu/src/selectable/index.ts +++ b/packages/react-components/react-menu/src/selectable/index.ts @@ -1,2 +1,2 @@ -export * from './useCheckmarkStyles'; +export * from './useCheckmarkStyles.styles'; export * from './types'; diff --git a/packages/react-components/react-menu/src/selectable/useCheckmarkStyles.ts b/packages/react-components/react-menu/src/selectable/useCheckmarkStyles.styles.ts similarity index 100% rename from packages/react-components/react-menu/src/selectable/useCheckmarkStyles.ts rename to packages/react-components/react-menu/src/selectable/useCheckmarkStyles.styles.ts diff --git a/packages/react-components/react-menu/src/testing/isConformant.ts b/packages/react-components/react-menu/src/testing/isConformant.ts index 77f88408cbd83..a3d988f29a172 100644 --- a/packages/react-components/react-menu/src/testing/isConformant.ts +++ b/packages/react-components/react-menu/src/testing/isConformant.ts @@ -6,6 +6,7 @@ export function isConformant( testInfo: Omit, 'componentPath'> & { componentPath?: string }, ) { const defaultOptions: Partial> = { + tsConfig: { configName: 'tsconfig.spec.json' }, componentPath: require.main?.filename.replace('.test', ''), extraTests: griffelTests as TestObject, }; diff --git a/packages/react-components/react-migration-v0-v9/jest.config.js b/packages/react-components/react-migration-v0-v9/jest.config.js index 8e16e3dd157c9..a35b099dddca6 100644 --- a/packages/react-components/react-migration-v0-v9/jest.config.js +++ b/packages/react-components/react-migration-v0-v9/jest.config.js @@ -9,7 +9,7 @@ module.exports = { globals: { 'ts-jest': { tsconfig: '/tsconfig.spec.json', - diagnostics: false, + isolatedModules: true, }, }, transform: { diff --git a/packages/react-components/react-migration-v8-v9/jest.config.js b/packages/react-components/react-migration-v8-v9/jest.config.js index 92a09e8740001..c248112b9c0b9 100644 --- a/packages/react-components/react-migration-v8-v9/jest.config.js +++ b/packages/react-components/react-migration-v8-v9/jest.config.js @@ -9,7 +9,7 @@ module.exports = { globals: { 'ts-jest': { tsconfig: '/tsconfig.spec.json', - diagnostics: false, + isolatedModules: true, }, }, transform: { diff --git a/packages/react-components/react-migration-v8-v9/src/testing/isConformant.ts b/packages/react-components/react-migration-v8-v9/src/testing/isConformant.ts index 77f88408cbd83..a3d988f29a172 100644 --- a/packages/react-components/react-migration-v8-v9/src/testing/isConformant.ts +++ b/packages/react-components/react-migration-v8-v9/src/testing/isConformant.ts @@ -6,6 +6,7 @@ export function isConformant( testInfo: Omit, 'componentPath'> & { componentPath?: string }, ) { const defaultOptions: Partial> = { + tsConfig: { configName: 'tsconfig.spec.json' }, componentPath: require.main?.filename.replace('.test', ''), extraTests: griffelTests as TestObject, }; diff --git a/packages/react-components/react-overflow/jest.config.js b/packages/react-components/react-overflow/jest.config.js index 461774fbaae0d..1951191f764dd 100644 --- a/packages/react-components/react-overflow/jest.config.js +++ b/packages/react-components/react-overflow/jest.config.js @@ -9,7 +9,7 @@ module.exports = { globals: { 'ts-jest': { tsconfig: '/tsconfig.spec.json', - diagnostics: false, + isolatedModules: true, }, }, transform: { diff --git a/packages/react-components/react-overflow/src/components/Overflow.tsx b/packages/react-components/react-overflow/src/components/Overflow.tsx index d5b4db2422182..3dbd46e94a6e4 100644 --- a/packages/react-components/react-overflow/src/components/Overflow.tsx +++ b/packages/react-components/react-overflow/src/components/Overflow.tsx @@ -1,25 +1,11 @@ import * as React from 'react'; -import { makeStyles, mergeClasses } from '@griffel/react'; +import { mergeClasses } from '@griffel/react'; import type { OnUpdateOverflow, OverflowGroupState, ObserveOptions } from '@fluentui/priority-overflow'; import { applyTriggerPropsToChildren, useMergedRefs } from '@fluentui/react-utilities'; import { OverflowContext } from '../overflowContext'; import { updateVisibilityAttribute, useOverflowContainer } from '../useOverflowContainer'; -import { DATA_OVERFLOWING, DATA_OVERFLOW_MENU } from '../constants'; - -const useStyles = makeStyles({ - overflowMenu: { - [`& [${DATA_OVERFLOW_MENU}]`]: { - flexShrink: 0, - }, - }, - - overflowingItems: { - [`& [${DATA_OVERFLOWING}]`]: { - display: 'none', - }, - }, -}); +import { useOverflowStyles } from './useOverflowStyles.styles'; /** * Overflow Props @@ -34,7 +20,7 @@ export type OverflowProps = Partial< * Provides an OverflowContext for OverflowItem descendants. */ export const Overflow = React.forwardRef((props: OverflowProps, ref) => { - const styles = useStyles(); + const styles = useOverflowStyles(); const { children, minimumVisible, overflowAxis = 'horizontal', overflowDirection, padding } = props; diff --git a/packages/react-components/react-overflow/src/components/useOverflowStyles.styles.ts b/packages/react-components/react-overflow/src/components/useOverflowStyles.styles.ts new file mode 100644 index 0000000000000..804444fb6c464 --- /dev/null +++ b/packages/react-components/react-overflow/src/components/useOverflowStyles.styles.ts @@ -0,0 +1,16 @@ +import { makeStyles } from '@griffel/react'; +import { DATA_OVERFLOWING, DATA_OVERFLOW_MENU } from '../constants'; + +export const useOverflowStyles = makeStyles({ + overflowMenu: { + [`& [${DATA_OVERFLOW_MENU}]`]: { + flexShrink: 0, + }, + }, + + overflowingItems: { + [`& [${DATA_OVERFLOWING}]`]: { + display: 'none', + }, + }, +}); diff --git a/packages/react-components/react-persona/jest.config.js b/packages/react-components/react-persona/jest.config.js index 64fccb00346d1..354a58e2ffde3 100644 --- a/packages/react-components/react-persona/jest.config.js +++ b/packages/react-components/react-persona/jest.config.js @@ -9,7 +9,7 @@ module.exports = { globals: { 'ts-jest': { tsconfig: '/tsconfig.spec.json', - diagnostics: false, + isolatedModules: true, }, }, transform: { diff --git a/packages/react-components/react-persona/src/testing/isConformant.ts b/packages/react-components/react-persona/src/testing/isConformant.ts index 77f88408cbd83..a3d988f29a172 100644 --- a/packages/react-components/react-persona/src/testing/isConformant.ts +++ b/packages/react-components/react-persona/src/testing/isConformant.ts @@ -6,6 +6,7 @@ export function isConformant( testInfo: Omit, 'componentPath'> & { componentPath?: string }, ) { const defaultOptions: Partial> = { + tsConfig: { configName: 'tsconfig.spec.json' }, componentPath: require.main?.filename.replace('.test', ''), extraTests: griffelTests as TestObject, }; diff --git a/packages/react-components/react-popover/jest.config.js b/packages/react-components/react-popover/jest.config.js index c6dd2288db246..82f46dd78f772 100644 --- a/packages/react-components/react-popover/jest.config.js +++ b/packages/react-components/react-popover/jest.config.js @@ -9,7 +9,7 @@ module.exports = { globals: { 'ts-jest': { tsconfig: '/tsconfig.spec.json', - diagnostics: false, + isolatedModules: true, }, }, transform: { 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 66d07f3e0b338..382cf2adb2281 100644 --- a/packages/react-components/react-popover/src/components/PopoverSurface/PopoverSurface.tsx +++ b/packages/react-components/react-popover/src/components/PopoverSurface/PopoverSurface.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import { usePopoverSurface_unstable } from './usePopoverSurface'; import { renderPopoverSurface_unstable } from './renderPopoverSurface'; -import { usePopoverSurfaceStyles_unstable } from './usePopoverSurfaceStyles'; +import { usePopoverSurfaceStyles_unstable } from './usePopoverSurfaceStyles.styles'; import type { PopoverSurfaceProps } from './PopoverSurface.types'; import type { ForwardRefComponent } from '@fluentui/react-utilities'; import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts'; diff --git a/packages/react-components/react-popover/src/components/PopoverSurface/index.ts b/packages/react-components/react-popover/src/components/PopoverSurface/index.ts index 0878d009f3271..ef6e2e67f2830 100644 --- a/packages/react-components/react-popover/src/components/PopoverSurface/index.ts +++ b/packages/react-components/react-popover/src/components/PopoverSurface/index.ts @@ -2,4 +2,4 @@ export * from './PopoverSurface'; export * from './PopoverSurface.types'; export * from './renderPopoverSurface'; export * from './usePopoverSurface'; -export * from './usePopoverSurfaceStyles'; +export * from './usePopoverSurfaceStyles.styles'; diff --git a/packages/react-components/react-popover/src/components/PopoverSurface/usePopoverSurfaceStyles.ts b/packages/react-components/react-popover/src/components/PopoverSurface/usePopoverSurfaceStyles.styles.ts similarity index 100% rename from packages/react-components/react-popover/src/components/PopoverSurface/usePopoverSurfaceStyles.ts rename to packages/react-components/react-popover/src/components/PopoverSurface/usePopoverSurfaceStyles.styles.ts diff --git a/packages/react-components/react-popover/src/testing/isConformant.ts b/packages/react-components/react-popover/src/testing/isConformant.ts index 77f88408cbd83..a3d988f29a172 100644 --- a/packages/react-components/react-popover/src/testing/isConformant.ts +++ b/packages/react-components/react-popover/src/testing/isConformant.ts @@ -6,6 +6,7 @@ export function isConformant( testInfo: Omit, 'componentPath'> & { componentPath?: string }, ) { const defaultOptions: Partial> = { + tsConfig: { configName: 'tsconfig.spec.json' }, componentPath: require.main?.filename.replace('.test', ''), extraTests: griffelTests as TestObject, }; diff --git a/packages/react-components/react-portal-compat-context/jest.config.js b/packages/react-components/react-portal-compat-context/jest.config.js index 4f76964fc037d..dfa6b9d19723d 100644 --- a/packages/react-components/react-portal-compat-context/jest.config.js +++ b/packages/react-components/react-portal-compat-context/jest.config.js @@ -9,7 +9,7 @@ module.exports = { globals: { 'ts-jest': { tsconfig: '/tsconfig.spec.json', - diagnostics: false, + isolatedModules: true, }, }, transform: { diff --git a/packages/react-components/react-portal-compat/jest.config.js b/packages/react-components/react-portal-compat/jest.config.js index be4da49608cee..4525efa606492 100644 --- a/packages/react-components/react-portal-compat/jest.config.js +++ b/packages/react-components/react-portal-compat/jest.config.js @@ -9,7 +9,7 @@ module.exports = { globals: { 'ts-jest': { tsconfig: '/tsconfig.spec.json', - diagnostics: false, + isolatedModules: true, }, }, transform: { diff --git a/packages/react-components/react-portal/jest.config.js b/packages/react-components/react-portal/jest.config.js index dbf98b99ea189..77869cbf6d663 100644 --- a/packages/react-components/react-portal/jest.config.js +++ b/packages/react-components/react-portal/jest.config.js @@ -9,7 +9,7 @@ module.exports = { globals: { 'ts-jest': { tsconfig: '/tsconfig.spec.json', - diagnostics: false, + isolatedModules: true, }, }, transform: { diff --git a/packages/react-components/react-portal/src/components/Portal/usePortalMountNode.ts b/packages/react-components/react-portal/src/components/Portal/usePortalMountNode.ts index ffc2e73f903ad..a7ee0d1aba8dd 100644 --- a/packages/react-components/react-portal/src/components/Portal/usePortalMountNode.ts +++ b/packages/react-components/react-portal/src/components/Portal/usePortalMountNode.ts @@ -3,10 +3,12 @@ import { useThemeClassName_unstable as useThemeClassName, useFluent_unstable as useFluent, } from '@fluentui/react-shared-contexts'; -import { makeStyles, mergeClasses } from '@griffel/react'; +import { mergeClasses } from '@griffel/react'; import { useFocusVisible } from '@fluentui/react-tabster'; import { useDisposable } from 'use-disposable'; +import { usePortalMountNodeStylesStyles } from './usePortalMountNodeStyles.styles'; + const useInsertionEffect = (React as never)['useInsertion' + 'Effect'] as typeof React.useLayoutEffect | undefined; export type UsePortalMountNodeOptions = { @@ -18,20 +20,13 @@ export type UsePortalMountNodeOptions = { className?: string; }; -const useStyles = makeStyles({ - root: { - position: 'relative', - zIndex: 1000000, - }, -}); - /** * Creates a new element on a "document.body" to mount portals. */ export const usePortalMountNode = (options: UsePortalMountNodeOptions): HTMLElement | null => { const { targetDocument, dir } = useFluent(); const focusVisibleRef = useFocusVisible() as React.MutableRefObject; - const classes = useStyles(); + const classes = usePortalMountNodeStylesStyles(); const themeClassName = useThemeClassName(); const className = mergeClasses(themeClassName, classes.root, options.className); diff --git a/packages/react-components/react-portal/src/components/Portal/usePortalMountNodeStyles.styles.ts b/packages/react-components/react-portal/src/components/Portal/usePortalMountNodeStyles.styles.ts new file mode 100644 index 0000000000000..8ba1b843d5070 --- /dev/null +++ b/packages/react-components/react-portal/src/components/Portal/usePortalMountNodeStyles.styles.ts @@ -0,0 +1,8 @@ +import { makeStyles } from '@griffel/react'; + +export const usePortalMountNodeStylesStyles = makeStyles({ + root: { + position: 'relative', + zIndex: 1000000, + }, +}); diff --git a/packages/react-components/react-positioning/jest.config.js b/packages/react-components/react-positioning/jest.config.js index 2c4d600b111c2..ba952e33e2bb7 100644 --- a/packages/react-components/react-positioning/jest.config.js +++ b/packages/react-components/react-positioning/jest.config.js @@ -9,7 +9,7 @@ module.exports = { globals: { 'ts-jest': { tsconfig: '/tsconfig.spec.json', - diagnostics: false, + isolatedModules: true, }, }, transform: { diff --git a/packages/react-components/react-progress/jest.config.js b/packages/react-components/react-progress/jest.config.js index f22d09ca37207..797661d97bfb8 100644 --- a/packages/react-components/react-progress/jest.config.js +++ b/packages/react-components/react-progress/jest.config.js @@ -9,7 +9,7 @@ module.exports = { globals: { 'ts-jest': { tsconfig: '/tsconfig.spec.json', - diagnostics: false, + isolatedModules: true, }, }, transform: { diff --git a/packages/react-components/react-progress/src/testing/isConformant.ts b/packages/react-components/react-progress/src/testing/isConformant.ts index 77f88408cbd83..a3d988f29a172 100644 --- a/packages/react-components/react-progress/src/testing/isConformant.ts +++ b/packages/react-components/react-progress/src/testing/isConformant.ts @@ -6,6 +6,7 @@ export function isConformant( testInfo: Omit, 'componentPath'> & { componentPath?: string }, ) { const defaultOptions: Partial> = { + tsConfig: { configName: 'tsconfig.spec.json' }, componentPath: require.main?.filename.replace('.test', ''), extraTests: griffelTests as TestObject, }; diff --git a/packages/react-components/react-provider/jest.config.js b/packages/react-components/react-provider/jest.config.js index aa1e59a8f1e8c..220d2d09f585f 100644 --- a/packages/react-components/react-provider/jest.config.js +++ b/packages/react-components/react-provider/jest.config.js @@ -9,7 +9,7 @@ module.exports = { globals: { 'ts-jest': { tsconfig: '/tsconfig.spec.json', - diagnostics: false, + isolatedModules: true, }, }, transform: { diff --git a/packages/react-components/react-provider/src/components/FluentProvider/FluentProvider.tsx b/packages/react-components/react-provider/src/components/FluentProvider/FluentProvider.tsx index 049ed66fb97a8..6fbcb494a3c1a 100644 --- a/packages/react-components/react-provider/src/components/FluentProvider/FluentProvider.tsx +++ b/packages/react-components/react-provider/src/components/FluentProvider/FluentProvider.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import { renderFluentProvider_unstable } from './renderFluentProvider'; import { useFluentProvider_unstable } from './useFluentProvider'; -import { useFluentProviderStyles_unstable } from './useFluentProviderStyles'; +import { useFluentProviderStyles_unstable } from './useFluentProviderStyles.styles'; import { useFluentProviderContextValues_unstable } from './useFluentProviderContextValues'; import type { FluentProviderProps } from './FluentProvider.types'; diff --git a/packages/react-components/react-provider/src/components/FluentProvider/index.ts b/packages/react-components/react-provider/src/components/FluentProvider/index.ts index 2542f778ac7f6..1004a7accf870 100644 --- a/packages/react-components/react-provider/src/components/FluentProvider/index.ts +++ b/packages/react-components/react-provider/src/components/FluentProvider/index.ts @@ -2,6 +2,6 @@ export * from './FluentProvider'; export * from './FluentProvider.types'; export * from './renderFluentProvider'; export * from './useFluentProvider'; -export * from './useFluentProviderStyles'; +export * from './useFluentProviderStyles.styles'; export * from './useFluentProviderContextValues'; export * from './useFluentProviderThemeStyleTag'; diff --git a/packages/react-components/react-provider/src/components/FluentProvider/useFluentProviderStyles.ts b/packages/react-components/react-provider/src/components/FluentProvider/useFluentProviderStyles.styles.ts similarity index 100% rename from packages/react-components/react-provider/src/components/FluentProvider/useFluentProviderStyles.ts rename to packages/react-components/react-provider/src/components/FluentProvider/useFluentProviderStyles.styles.ts diff --git a/packages/react-components/react-provider/src/components/FluentProvider/useFluentProviderThemeStyleTag.ts b/packages/react-components/react-provider/src/components/FluentProvider/useFluentProviderThemeStyleTag.ts index 4145979442488..3751196dcea89 100644 --- a/packages/react-components/react-provider/src/components/FluentProvider/useFluentProviderThemeStyleTag.ts +++ b/packages/react-components/react-provider/src/components/FluentProvider/useFluentProviderThemeStyleTag.ts @@ -2,7 +2,7 @@ import { useId, useIsomorphicLayoutEffect } from '@fluentui/react-utilities'; import * as React from 'react'; import type { FluentProviderState } from './FluentProvider.types'; -import { fluentProviderClassNames } from './useFluentProviderStyles'; +import { fluentProviderClassNames } from './useFluentProviderStyles.styles'; // String concatenation is used to prevent bundlers to complain with older versions of React const useInsertionEffect = (React as never)['useInsertion' + 'Effect'] diff --git a/packages/react-components/react-provider/src/testing/isConformant.ts b/packages/react-components/react-provider/src/testing/isConformant.ts index b94dff389b235..34ed187e09864 100644 --- a/packages/react-components/react-provider/src/testing/isConformant.ts +++ b/packages/react-components/react-provider/src/testing/isConformant.ts @@ -5,6 +5,7 @@ export function isConformant( testInfo: Omit, 'componentPath'> & { componentPath?: string }, ) { const defaultOptions: Partial> = { + tsConfig: { configName: 'tsconfig.spec.json' }, componentPath: require.main?.filename.replace('.test', ''), }; diff --git a/packages/react-components/react-radio/jest.config.js b/packages/react-components/react-radio/jest.config.js index c8dc1fb78a935..b43b20471e990 100644 --- a/packages/react-components/react-radio/jest.config.js +++ b/packages/react-components/react-radio/jest.config.js @@ -9,7 +9,7 @@ module.exports = { globals: { 'ts-jest': { tsconfig: '/tsconfig.spec.json', - diagnostics: false, + isolatedModules: true, }, }, transform: { diff --git a/packages/react-components/react-radio/src/testing/isConformant.ts b/packages/react-components/react-radio/src/testing/isConformant.ts index 77f88408cbd83..a3d988f29a172 100644 --- a/packages/react-components/react-radio/src/testing/isConformant.ts +++ b/packages/react-components/react-radio/src/testing/isConformant.ts @@ -6,6 +6,7 @@ export function isConformant( testInfo: Omit, 'componentPath'> & { componentPath?: string }, ) { const defaultOptions: Partial> = { + tsConfig: { configName: 'tsconfig.spec.json' }, componentPath: require.main?.filename.replace('.test', ''), extraTests: griffelTests as TestObject, }; diff --git a/packages/react-components/react-select/jest.config.js b/packages/react-components/react-select/jest.config.js index ce2b7e4228dec..040f6a5a8e2b7 100644 --- a/packages/react-components/react-select/jest.config.js +++ b/packages/react-components/react-select/jest.config.js @@ -9,7 +9,7 @@ module.exports = { globals: { 'ts-jest': { tsconfig: '/tsconfig.spec.json', - diagnostics: false, + isolatedModules: true, }, }, transform: { diff --git a/packages/react-components/react-select/src/testing/isConformant.ts b/packages/react-components/react-select/src/testing/isConformant.ts index 77f88408cbd83..a3d988f29a172 100644 --- a/packages/react-components/react-select/src/testing/isConformant.ts +++ b/packages/react-components/react-select/src/testing/isConformant.ts @@ -6,6 +6,7 @@ export function isConformant( testInfo: Omit, 'componentPath'> & { componentPath?: string }, ) { const defaultOptions: Partial> = { + tsConfig: { configName: 'tsconfig.spec.json' }, componentPath: require.main?.filename.replace('.test', ''), extraTests: griffelTests as TestObject, }; diff --git a/packages/react-components/react-shared-contexts/jest.config.js b/packages/react-components/react-shared-contexts/jest.config.js index 232fc8fc07d0c..2463dccb4ea51 100644 --- a/packages/react-components/react-shared-contexts/jest.config.js +++ b/packages/react-components/react-shared-contexts/jest.config.js @@ -9,7 +9,7 @@ module.exports = { globals: { 'ts-jest': { tsconfig: '/tsconfig.spec.json', - diagnostics: false, + isolatedModules: true, }, }, transform: { diff --git a/packages/react-components/react-skeleton/jest.config.js b/packages/react-components/react-skeleton/jest.config.js index 0a32212b98d50..1ecf245a63a96 100644 --- a/packages/react-components/react-skeleton/jest.config.js +++ b/packages/react-components/react-skeleton/jest.config.js @@ -9,7 +9,7 @@ module.exports = { globals: { 'ts-jest': { tsconfig: '/tsconfig.spec.json', - diagnostics: false, + isolatedModules: true, }, }, transform: { diff --git a/packages/react-components/react-skeleton/src/testing/isConformant.ts b/packages/react-components/react-skeleton/src/testing/isConformant.ts index 77f88408cbd83..a3d988f29a172 100644 --- a/packages/react-components/react-skeleton/src/testing/isConformant.ts +++ b/packages/react-components/react-skeleton/src/testing/isConformant.ts @@ -6,6 +6,7 @@ export function isConformant( testInfo: Omit, 'componentPath'> & { componentPath?: string }, ) { const defaultOptions: Partial> = { + tsConfig: { configName: 'tsconfig.spec.json' }, componentPath: require.main?.filename.replace('.test', ''), extraTests: griffelTests as TestObject, }; diff --git a/packages/react-components/react-slider/jest.config.js b/packages/react-components/react-slider/jest.config.js index f267c71f237f0..c3527dc791054 100644 --- a/packages/react-components/react-slider/jest.config.js +++ b/packages/react-components/react-slider/jest.config.js @@ -9,7 +9,7 @@ module.exports = { globals: { 'ts-jest': { tsconfig: '/tsconfig.spec.json', - diagnostics: false, + isolatedModules: true, }, }, transform: { diff --git a/packages/react-components/react-slider/src/testing/isConformant.ts b/packages/react-components/react-slider/src/testing/isConformant.ts index 77f88408cbd83..a3d988f29a172 100644 --- a/packages/react-components/react-slider/src/testing/isConformant.ts +++ b/packages/react-components/react-slider/src/testing/isConformant.ts @@ -6,6 +6,7 @@ export function isConformant( testInfo: Omit, 'componentPath'> & { componentPath?: string }, ) { const defaultOptions: Partial> = { + tsConfig: { configName: 'tsconfig.spec.json' }, componentPath: require.main?.filename.replace('.test', ''), extraTests: griffelTests as TestObject, }; diff --git a/packages/react-components/react-spinbutton/jest.config.js b/packages/react-components/react-spinbutton/jest.config.js index 4d703b5734aa2..47a29c6c2e390 100644 --- a/packages/react-components/react-spinbutton/jest.config.js +++ b/packages/react-components/react-spinbutton/jest.config.js @@ -9,7 +9,7 @@ module.exports = { globals: { 'ts-jest': { tsconfig: '/tsconfig.spec.json', - diagnostics: false, + isolatedModules: true, }, }, transform: { diff --git a/packages/react-components/react-spinbutton/src/testing/isConformant.ts b/packages/react-components/react-spinbutton/src/testing/isConformant.ts index 77f88408cbd83..a3d988f29a172 100644 --- a/packages/react-components/react-spinbutton/src/testing/isConformant.ts +++ b/packages/react-components/react-spinbutton/src/testing/isConformant.ts @@ -6,6 +6,7 @@ export function isConformant( testInfo: Omit, 'componentPath'> & { componentPath?: string }, ) { const defaultOptions: Partial> = { + tsConfig: { configName: 'tsconfig.spec.json' }, componentPath: require.main?.filename.replace('.test', ''), extraTests: griffelTests as TestObject, }; diff --git a/packages/react-components/react-spinner/jest.config.js b/packages/react-components/react-spinner/jest.config.js index 74cc94ecc6bb6..7fd228d7caa3e 100644 --- a/packages/react-components/react-spinner/jest.config.js +++ b/packages/react-components/react-spinner/jest.config.js @@ -9,7 +9,7 @@ module.exports = { globals: { 'ts-jest': { tsconfig: '/tsconfig.spec.json', - diagnostics: false, + isolatedModules: true, }, }, transform: { diff --git a/packages/react-components/react-spinner/src/testing/isConformant.ts b/packages/react-components/react-spinner/src/testing/isConformant.ts index 77f88408cbd83..a3d988f29a172 100644 --- a/packages/react-components/react-spinner/src/testing/isConformant.ts +++ b/packages/react-components/react-spinner/src/testing/isConformant.ts @@ -6,6 +6,7 @@ export function isConformant( testInfo: Omit, 'componentPath'> & { componentPath?: string }, ) { const defaultOptions: Partial> = { + tsConfig: { configName: 'tsconfig.spec.json' }, componentPath: require.main?.filename.replace('.test', ''), extraTests: griffelTests as TestObject, }; diff --git a/packages/react-components/react-storybook-addon-codesandbox/jest.config.js b/packages/react-components/react-storybook-addon-codesandbox/jest.config.js index 6ebf7bca345a5..804d6a8c53638 100644 --- a/packages/react-components/react-storybook-addon-codesandbox/jest.config.js +++ b/packages/react-components/react-storybook-addon-codesandbox/jest.config.js @@ -9,7 +9,7 @@ module.exports = { globals: { 'ts-jest': { tsconfig: '/tsconfig.spec.json', - diagnostics: false, + isolatedModules: true, }, }, transform: { diff --git a/packages/react-components/react-storybook-addon/jest.config.js b/packages/react-components/react-storybook-addon/jest.config.js index a0e17fee3482d..717be5c5306c8 100644 --- a/packages/react-components/react-storybook-addon/jest.config.js +++ b/packages/react-components/react-storybook-addon/jest.config.js @@ -9,7 +9,7 @@ module.exports = { globals: { 'ts-jest': { tsconfig: '/tsconfig.spec.json', - diagnostics: false, + isolatedModules: true, }, }, transform: { diff --git a/packages/react-components/react-switch/jest.config.js b/packages/react-components/react-switch/jest.config.js index 7ab58b7b5e477..81ead1f0a2875 100644 --- a/packages/react-components/react-switch/jest.config.js +++ b/packages/react-components/react-switch/jest.config.js @@ -9,7 +9,7 @@ module.exports = { globals: { 'ts-jest': { tsconfig: '/tsconfig.spec.json', - diagnostics: false, + isolatedModules: true, }, }, transform: { diff --git a/packages/react-components/react-switch/src/testing/isConformant.ts b/packages/react-components/react-switch/src/testing/isConformant.ts index 77f88408cbd83..a3d988f29a172 100644 --- a/packages/react-components/react-switch/src/testing/isConformant.ts +++ b/packages/react-components/react-switch/src/testing/isConformant.ts @@ -6,6 +6,7 @@ export function isConformant( testInfo: Omit, 'componentPath'> & { componentPath?: string }, ) { const defaultOptions: Partial> = { + tsConfig: { configName: 'tsconfig.spec.json' }, componentPath: require.main?.filename.replace('.test', ''), extraTests: griffelTests as TestObject, }; diff --git a/packages/react-components/react-table/jest.config.js b/packages/react-components/react-table/jest.config.js index 95fa209faa546..d09be1dc61ef3 100644 --- a/packages/react-components/react-table/jest.config.js +++ b/packages/react-components/react-table/jest.config.js @@ -9,7 +9,7 @@ module.exports = { globals: { 'ts-jest': { tsconfig: '/tsconfig.spec.json', - diagnostics: false, + isolatedModules: true, }, }, transform: { 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 f343a48003fe3..143a2e4f40f5c 100644 --- a/packages/react-components/react-table/src/components/DataGrid/DataGrid.tsx +++ b/packages/react-components/react-table/src/components/DataGrid/DataGrid.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import { useDataGrid_unstable } from './useDataGrid'; import { renderDataGrid_unstable } from './renderDataGrid'; -import { useDataGridStyles_unstable } from './useDataGridStyles'; +import { useDataGridStyles_unstable } from './useDataGridStyles.styles'; import type { DataGridProps } from './DataGrid.types'; import type { ForwardRefComponent } from '@fluentui/react-utilities'; import { useDataGridContextValues_unstable } from './useDataGridContextValues'; diff --git a/packages/react-components/react-table/src/components/DataGrid/index.ts b/packages/react-components/react-table/src/components/DataGrid/index.ts index f421b8aa7c553..f876576160de7 100644 --- a/packages/react-components/react-table/src/components/DataGrid/index.ts +++ b/packages/react-components/react-table/src/components/DataGrid/index.ts @@ -2,5 +2,5 @@ export * from './DataGrid'; export * from './DataGrid.types'; export * from './renderDataGrid'; export * from './useDataGrid'; -export * from './useDataGridStyles'; +export * from './useDataGridStyles.styles'; export * from './useDataGridContextValues'; diff --git a/packages/react-components/react-table/src/components/DataGrid/useDataGridStyles.ts b/packages/react-components/react-table/src/components/DataGrid/useDataGridStyles.styles.ts similarity index 98% rename from packages/react-components/react-table/src/components/DataGrid/useDataGridStyles.ts rename to packages/react-components/react-table/src/components/DataGrid/useDataGridStyles.styles.ts index a9ec5e97cb67b..75ab5dbd14655 100644 --- a/packages/react-components/react-table/src/components/DataGrid/useDataGridStyles.ts +++ b/packages/react-components/react-table/src/components/DataGrid/useDataGridStyles.styles.ts @@ -1,7 +1,7 @@ import { mergeClasses } from '@griffel/react'; import type { DataGridSlots, DataGridState } from './DataGrid.types'; import type { SlotClassNames } from '@fluentui/react-utilities'; -import { useTableStyles_unstable } from '../Table/useTableStyles'; +import { useTableStyles_unstable } from '../Table/useTableStyles.styles'; export const dataGridClassNames: SlotClassNames = { root: 'fui-DataGrid', 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 565e4d6318fba..12f54d4f99200 100644 --- a/packages/react-components/react-table/src/components/DataGridBody/DataGridBody.tsx +++ b/packages/react-components/react-table/src/components/DataGridBody/DataGridBody.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import { useDataGridBody_unstable } from './useDataGridBody'; import { renderDataGridBody_unstable } from './renderDataGridBody'; -import { useDataGridBodyStyles_unstable } from './useDataGridBodyStyles'; +import { useDataGridBodyStyles_unstable } from './useDataGridBodyStyles.styles'; import type { DataGridBodyProps } from './DataGridBody.types'; import type { ForwardRefComponent } from '@fluentui/react-utilities'; import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts'; diff --git a/packages/react-components/react-table/src/components/DataGridBody/index.ts b/packages/react-components/react-table/src/components/DataGridBody/index.ts index 2cd323b85ed44..70d2bbdad7493 100644 --- a/packages/react-components/react-table/src/components/DataGridBody/index.ts +++ b/packages/react-components/react-table/src/components/DataGridBody/index.ts @@ -2,4 +2,4 @@ export * from './DataGridBody'; export * from './DataGridBody.types'; export * from './renderDataGridBody'; export * from './useDataGridBody'; -export * from './useDataGridBodyStyles'; +export * from './useDataGridBodyStyles.styles'; diff --git a/packages/react-components/react-table/src/components/DataGridBody/useDataGridBodyStyles.ts b/packages/react-components/react-table/src/components/DataGridBody/useDataGridBodyStyles.styles.ts similarity index 96% rename from packages/react-components/react-table/src/components/DataGridBody/useDataGridBodyStyles.ts rename to packages/react-components/react-table/src/components/DataGridBody/useDataGridBodyStyles.styles.ts index b46f062ae745d..fd5393204352d 100644 --- a/packages/react-components/react-table/src/components/DataGridBody/useDataGridBodyStyles.ts +++ b/packages/react-components/react-table/src/components/DataGridBody/useDataGridBodyStyles.styles.ts @@ -1,7 +1,7 @@ import { mergeClasses } from '@griffel/react'; import type { DataGridBodySlots, DataGridBodyState } from './DataGridBody.types'; import type { SlotClassNames } from '@fluentui/react-utilities'; -import { useTableBodyStyles_unstable } from '../TableBody/useTableBodyStyles'; +import { useTableBodyStyles_unstable } from '../TableBody/useTableBodyStyles.styles'; export const dataGridBodyClassNames: SlotClassNames = { root: 'fui-DataGridBody', 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 869a865d3ba85..cdb95d92b0924 100644 --- a/packages/react-components/react-table/src/components/DataGridCell/DataGridCell.tsx +++ b/packages/react-components/react-table/src/components/DataGridCell/DataGridCell.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import { useDataGridCell_unstable } from './useDataGridCell'; import { renderDataGridCell_unstable } from './renderDataGridCell'; -import { useDataGridCellStyles_unstable } from './useDataGridCellStyles'; +import { useDataGridCellStyles_unstable } from './useDataGridCellStyles.styles'; import type { DataGridCellProps } from './DataGridCell.types'; import type { ForwardRefComponent } from '@fluentui/react-utilities'; import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts'; diff --git a/packages/react-components/react-table/src/components/DataGridCell/index.ts b/packages/react-components/react-table/src/components/DataGridCell/index.ts index bb9c252d5b0f2..acc2e821b8f74 100644 --- a/packages/react-components/react-table/src/components/DataGridCell/index.ts +++ b/packages/react-components/react-table/src/components/DataGridCell/index.ts @@ -2,4 +2,4 @@ export * from './DataGridCell'; export * from './DataGridCell.types'; export * from './renderDataGridCell'; export * from './useDataGridCell'; -export * from './useDataGridCellStyles'; +export * from './useDataGridCellStyles.styles'; diff --git a/packages/react-components/react-table/src/components/DataGridCell/useDataGridCellStyles.ts b/packages/react-components/react-table/src/components/DataGridCell/useDataGridCellStyles.styles.ts similarity index 96% rename from packages/react-components/react-table/src/components/DataGridCell/useDataGridCellStyles.ts rename to packages/react-components/react-table/src/components/DataGridCell/useDataGridCellStyles.styles.ts index fcb43be655866..3a0754b803c27 100644 --- a/packages/react-components/react-table/src/components/DataGridCell/useDataGridCellStyles.ts +++ b/packages/react-components/react-table/src/components/DataGridCell/useDataGridCellStyles.styles.ts @@ -1,7 +1,7 @@ import { mergeClasses } from '@griffel/react'; import type { DataGridCellSlots, DataGridCellState } from './DataGridCell.types'; import type { SlotClassNames } from '@fluentui/react-utilities'; -import { useTableCellStyles_unstable } from '../TableCell/useTableCellStyles'; +import { useTableCellStyles_unstable } from '../TableCell/useTableCellStyles.styles'; export const dataGridCellClassNames: SlotClassNames = { root: 'fui-DataGridCell', 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 4096bc44e2eab..d70b92843ecd6 100644 --- a/packages/react-components/react-table/src/components/DataGridHeader/DataGridHeader.tsx +++ b/packages/react-components/react-table/src/components/DataGridHeader/DataGridHeader.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import { useDataGridHeader_unstable } from './useDataGridHeader'; import { renderDataGridHeader_unstable } from './renderDataGridHeader'; -import { useDataGridHeaderStyles_unstable } from './useDataGridHeaderStyles'; +import { useDataGridHeaderStyles_unstable } from './useDataGridHeaderStyles.styles'; import type { DataGridHeaderProps } from './DataGridHeader.types'; import type { ForwardRefComponent } from '@fluentui/react-utilities'; import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts'; diff --git a/packages/react-components/react-table/src/components/DataGridHeader/index.ts b/packages/react-components/react-table/src/components/DataGridHeader/index.ts index 477a72f22fc16..4b2eca977eb04 100644 --- a/packages/react-components/react-table/src/components/DataGridHeader/index.ts +++ b/packages/react-components/react-table/src/components/DataGridHeader/index.ts @@ -2,4 +2,4 @@ export * from './DataGridHeader'; export * from './DataGridHeader.types'; export * from './renderDataGridHeader'; export * from './useDataGridHeader'; -export * from './useDataGridHeaderStyles'; +export * from './useDataGridHeaderStyles.styles'; diff --git a/packages/react-components/react-table/src/components/DataGridHeader/useDataGridHeaderStyles.ts b/packages/react-components/react-table/src/components/DataGridHeader/useDataGridHeaderStyles.styles.ts similarity index 96% rename from packages/react-components/react-table/src/components/DataGridHeader/useDataGridHeaderStyles.ts rename to packages/react-components/react-table/src/components/DataGridHeader/useDataGridHeaderStyles.styles.ts index 230b15e8dfee2..9041cbe07e46f 100644 --- a/packages/react-components/react-table/src/components/DataGridHeader/useDataGridHeaderStyles.ts +++ b/packages/react-components/react-table/src/components/DataGridHeader/useDataGridHeaderStyles.styles.ts @@ -1,7 +1,7 @@ import { mergeClasses } from '@griffel/react'; import type { DataGridHeaderSlots, DataGridHeaderState } from './DataGridHeader.types'; import type { SlotClassNames } from '@fluentui/react-utilities'; -import { useTableHeaderStyles_unstable } from '../TableHeader/useTableHeaderStyles'; +import { useTableHeaderStyles_unstable } from '../TableHeader/useTableHeaderStyles.styles'; export const dataGridHeaderClassNames: SlotClassNames = { root: 'fui-DataGridHeader', 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 abd9fb7f63dd1..15afdbc2fac35 100644 --- a/packages/react-components/react-table/src/components/DataGridHeaderCell/DataGridHeaderCell.tsx +++ b/packages/react-components/react-table/src/components/DataGridHeaderCell/DataGridHeaderCell.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import { useDataGridHeaderCell_unstable } from './useDataGridHeaderCell'; import { renderDataGridHeaderCell_unstable } from './renderDataGridHeaderCell'; -import { useDataGridHeaderCellStyles_unstable } from './useDataGridHeaderCellStyles'; +import { useDataGridHeaderCellStyles_unstable } from './useDataGridHeaderCellStyles.styles'; import type { DataGridHeaderCellProps } from './DataGridHeaderCell.types'; import type { ForwardRefComponent } from '@fluentui/react-utilities'; import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts'; diff --git a/packages/react-components/react-table/src/components/DataGridHeaderCell/index.ts b/packages/react-components/react-table/src/components/DataGridHeaderCell/index.ts index db9da53f26b38..2a624c8e3bee3 100644 --- a/packages/react-components/react-table/src/components/DataGridHeaderCell/index.ts +++ b/packages/react-components/react-table/src/components/DataGridHeaderCell/index.ts @@ -2,4 +2,4 @@ export * from './DataGridHeaderCell'; export * from './DataGridHeaderCell.types'; export * from './renderDataGridHeaderCell'; export * from './useDataGridHeaderCell'; -export * from './useDataGridHeaderCellStyles'; +export * from './useDataGridHeaderCellStyles.styles'; diff --git a/packages/react-components/react-table/src/components/DataGridHeaderCell/useDataGridHeaderCellStyles.ts b/packages/react-components/react-table/src/components/DataGridHeaderCell/useDataGridHeaderCellStyles.styles.ts similarity index 96% rename from packages/react-components/react-table/src/components/DataGridHeaderCell/useDataGridHeaderCellStyles.ts rename to packages/react-components/react-table/src/components/DataGridHeaderCell/useDataGridHeaderCellStyles.styles.ts index f5c0d1f9b6e7e..0942aa206d04f 100644 --- a/packages/react-components/react-table/src/components/DataGridHeaderCell/useDataGridHeaderCellStyles.ts +++ b/packages/react-components/react-table/src/components/DataGridHeaderCell/useDataGridHeaderCellStyles.styles.ts @@ -1,7 +1,7 @@ import { mergeClasses } from '@griffel/react'; import type { DataGridHeaderCellSlots, DataGridHeaderCellState } from './DataGridHeaderCell.types'; import type { SlotClassNames } from '@fluentui/react-utilities'; -import { useTableHeaderCellStyles_unstable } from '../TableHeaderCell/useTableHeaderCellStyles'; +import { useTableHeaderCellStyles_unstable } from '../TableHeaderCell/useTableHeaderCellStyles.styles'; export const dataGridHeaderCellClassNames: SlotClassNames = { root: 'fui-DataGridHeaderCell', 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 dc8f9c92c18ae..36bfd9647550b 100644 --- a/packages/react-components/react-table/src/components/DataGridRow/DataGridRow.tsx +++ b/packages/react-components/react-table/src/components/DataGridRow/DataGridRow.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import { useDataGridRow_unstable } from './useDataGridRow'; import { renderDataGridRow_unstable } from './renderDataGridRow'; -import { useDataGridRowStyles_unstable } from './useDataGridRowStyles'; +import { useDataGridRowStyles_unstable } from './useDataGridRowStyles.styles'; import type { DataGridRowProps } from './DataGridRow.types'; import type { ForwardRefComponent } from '@fluentui/react-utilities'; import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts'; diff --git a/packages/react-components/react-table/src/components/DataGridRow/index.ts b/packages/react-components/react-table/src/components/DataGridRow/index.ts index 7f77535e67fcb..a1f4708efd51b 100644 --- a/packages/react-components/react-table/src/components/DataGridRow/index.ts +++ b/packages/react-components/react-table/src/components/DataGridRow/index.ts @@ -2,4 +2,4 @@ export * from './DataGridRow'; export * from './DataGridRow.types'; export * from './renderDataGridRow'; export * from './useDataGridRow'; -export * from './useDataGridRowStyles'; +export * from './useDataGridRowStyles.styles'; diff --git a/packages/react-components/react-table/src/components/DataGridRow/useDataGridRowStyles.ts b/packages/react-components/react-table/src/components/DataGridRow/useDataGridRowStyles.styles.ts similarity index 97% rename from packages/react-components/react-table/src/components/DataGridRow/useDataGridRowStyles.ts rename to packages/react-components/react-table/src/components/DataGridRow/useDataGridRowStyles.styles.ts index 6fd74d486148a..a2c73909d9c9e 100644 --- a/packages/react-components/react-table/src/components/DataGridRow/useDataGridRowStyles.ts +++ b/packages/react-components/react-table/src/components/DataGridRow/useDataGridRowStyles.styles.ts @@ -1,7 +1,7 @@ import { mergeClasses } from '@griffel/react'; import type { DataGridRowSlots, DataGridRowState } from './DataGridRow.types'; import type { SlotClassNames } from '@fluentui/react-utilities'; -import { useTableRowStyles_unstable } from '../TableRow/useTableRowStyles'; +import { useTableRowStyles_unstable } from '../TableRow/useTableRowStyles.styles'; export const dataGridRowClassNames: SlotClassNames = { root: 'fui-DataGridRow', diff --git a/packages/react-components/react-table/src/components/DataGridSelectionCell/DataGridSelectionCell.test.tsx b/packages/react-components/react-table/src/components/DataGridSelectionCell/DataGridSelectionCell.test.tsx index 3d6051ac6b994..40e22740df127 100644 --- a/packages/react-components/react-table/src/components/DataGridSelectionCell/DataGridSelectionCell.test.tsx +++ b/packages/react-components/react-table/src/components/DataGridSelectionCell/DataGridSelectionCell.test.tsx @@ -3,7 +3,7 @@ import { fireEvent, render } from '@testing-library/react'; import { DataGridSelectionCell } from './DataGridSelectionCell'; import { isConformant } from '../../testing/isConformant'; import { DataGridSelectionCellProps } from '../../../dist/index'; -import { dataGridSelectionCellClassNames } from './useDataGridSelectionCellStyles'; +import { dataGridSelectionCellClassNames } from './useDataGridSelectionCellStyles.styles'; import { mockDataGridContext } from '../../testing/mockDataGridContext'; import { DataGridContextProvider } from '../../contexts/dataGridContext'; import { DataGridHeader } from '../DataGridHeader/DataGridHeader'; 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 9ee5b2ff85d15..eaeca2e328277 100644 --- a/packages/react-components/react-table/src/components/DataGridSelectionCell/DataGridSelectionCell.tsx +++ b/packages/react-components/react-table/src/components/DataGridSelectionCell/DataGridSelectionCell.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import { useDataGridSelectionCell_unstable } from './useDataGridSelectionCell'; import { renderDataGridSelectionCell_unstable } from './renderDataGridSelectionCell'; -import { useDataGridSelectionCellStyles_unstable } from './useDataGridSelectionCellStyles'; +import { useDataGridSelectionCellStyles_unstable } from './useDataGridSelectionCellStyles.styles'; import type { DataGridSelectionCellProps } from './DataGridSelectionCell.types'; import type { ForwardRefComponent } from '@fluentui/react-utilities'; import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts'; diff --git a/packages/react-components/react-table/src/components/DataGridSelectionCell/index.ts b/packages/react-components/react-table/src/components/DataGridSelectionCell/index.ts index d06337ec6a34a..4a02154501941 100644 --- a/packages/react-components/react-table/src/components/DataGridSelectionCell/index.ts +++ b/packages/react-components/react-table/src/components/DataGridSelectionCell/index.ts @@ -2,4 +2,4 @@ export * from './DataGridSelectionCell'; export * from './DataGridSelectionCell.types'; export * from './renderDataGridSelectionCell'; export * from './useDataGridSelectionCell'; -export * from './useDataGridSelectionCellStyles'; +export * from './useDataGridSelectionCellStyles.styles'; diff --git a/packages/react-components/react-table/src/components/DataGridSelectionCell/useDataGridSelectionCellStyles.ts b/packages/react-components/react-table/src/components/DataGridSelectionCell/useDataGridSelectionCellStyles.styles.ts similarity index 96% rename from packages/react-components/react-table/src/components/DataGridSelectionCell/useDataGridSelectionCellStyles.ts rename to packages/react-components/react-table/src/components/DataGridSelectionCell/useDataGridSelectionCellStyles.styles.ts index 8fc1f07aa6e59..94a64ded462b1 100644 --- a/packages/react-components/react-table/src/components/DataGridSelectionCell/useDataGridSelectionCellStyles.ts +++ b/packages/react-components/react-table/src/components/DataGridSelectionCell/useDataGridSelectionCellStyles.styles.ts @@ -1,7 +1,7 @@ import { mergeClasses } from '@griffel/react'; import type { DataGridSelectionCellSlots, DataGridSelectionCellState } from './DataGridSelectionCell.types'; import type { SlotClassNames } from '@fluentui/react-utilities'; -import { useTableSelectionCellStyles_unstable } from '../TableSelectionCell/useTableSelectionCellStyles'; +import { useTableSelectionCellStyles_unstable } from '../TableSelectionCell/useTableSelectionCellStyles.styles'; export const dataGridSelectionCellClassNames: SlotClassNames = { root: 'fui-DataGridSelectionCell', diff --git a/packages/react-components/react-table/src/components/Table/Table.tsx b/packages/react-components/react-table/src/components/Table/Table.tsx index 2461cecf770a0..351473003d80f 100644 --- a/packages/react-components/react-table/src/components/Table/Table.tsx +++ b/packages/react-components/react-table/src/components/Table/Table.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import { useTable_unstable } from './useTable'; import { renderTable_unstable } from './renderTable'; -import { useTableStyles_unstable } from './useTableStyles'; +import { useTableStyles_unstable } from './useTableStyles.styles'; import type { TableProps } from './Table.types'; import type { ForwardRefComponent } from '@fluentui/react-utilities'; import { useTableContextValues_unstable } from './useTableContextValues'; diff --git a/packages/react-components/react-table/src/components/Table/index.ts b/packages/react-components/react-table/src/components/Table/index.ts index bc41c5a7cc597..62c03067863ef 100644 --- a/packages/react-components/react-table/src/components/Table/index.ts +++ b/packages/react-components/react-table/src/components/Table/index.ts @@ -2,4 +2,4 @@ export * from './Table'; export * from './Table.types'; export * from './renderTable'; export * from './useTable'; -export * from './useTableStyles'; +export * from './useTableStyles.styles'; diff --git a/packages/react-components/react-table/src/components/Table/useTableStyles.ts b/packages/react-components/react-table/src/components/Table/useTableStyles.styles.ts similarity index 100% rename from packages/react-components/react-table/src/components/Table/useTableStyles.ts rename to packages/react-components/react-table/src/components/Table/useTableStyles.styles.ts 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 e5914023cd9ae..3083e1c1afaf2 100644 --- a/packages/react-components/react-table/src/components/TableBody/TableBody.tsx +++ b/packages/react-components/react-table/src/components/TableBody/TableBody.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import { useTableBody_unstable } from './useTableBody'; import { renderTableBody_unstable } from './renderTableBody'; -import { useTableBodyStyles_unstable } from './useTableBodyStyles'; +import { useTableBodyStyles_unstable } from './useTableBodyStyles.styles'; import type { TableBodyProps } from './TableBody.types'; import type { ForwardRefComponent } from '@fluentui/react-utilities'; import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts'; diff --git a/packages/react-components/react-table/src/components/TableBody/index.ts b/packages/react-components/react-table/src/components/TableBody/index.ts index 8c4dd6cd1a56c..6cba4f6068996 100644 --- a/packages/react-components/react-table/src/components/TableBody/index.ts +++ b/packages/react-components/react-table/src/components/TableBody/index.ts @@ -2,4 +2,4 @@ export * from './TableBody'; export * from './TableBody.types'; export * from './renderTableBody'; export * from './useTableBody'; -export * from './useTableBodyStyles'; +export * from './useTableBodyStyles.styles'; diff --git a/packages/react-components/react-table/src/components/TableBody/useTableBodyStyles.ts b/packages/react-components/react-table/src/components/TableBody/useTableBodyStyles.styles.ts similarity index 100% rename from packages/react-components/react-table/src/components/TableBody/useTableBodyStyles.ts rename to packages/react-components/react-table/src/components/TableBody/useTableBodyStyles.styles.ts 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 0231e23c9a13d..96128ee5211b3 100644 --- a/packages/react-components/react-table/src/components/TableCell/TableCell.tsx +++ b/packages/react-components/react-table/src/components/TableCell/TableCell.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import { useTableCell_unstable } from './useTableCell'; import { renderTableCell_unstable } from './renderTableCell'; -import { useTableCellStyles_unstable } from './useTableCellStyles'; +import { useTableCellStyles_unstable } from './useTableCellStyles.styles'; import type { TableCellProps } from './TableCell.types'; import type { ForwardRefComponent } from '@fluentui/react-utilities'; import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts'; diff --git a/packages/react-components/react-table/src/components/TableCell/index.ts b/packages/react-components/react-table/src/components/TableCell/index.ts index f8aff12d06ba7..b139f3158cae7 100644 --- a/packages/react-components/react-table/src/components/TableCell/index.ts +++ b/packages/react-components/react-table/src/components/TableCell/index.ts @@ -2,4 +2,4 @@ export * from './TableCell'; export * from './TableCell.types'; export * from './renderTableCell'; export * from './useTableCell'; -export * from './useTableCellStyles'; +export * from './useTableCellStyles.styles'; diff --git a/packages/react-components/react-table/src/components/TableCell/useTableCellStyles.ts b/packages/react-components/react-table/src/components/TableCell/useTableCellStyles.styles.ts similarity index 100% rename from packages/react-components/react-table/src/components/TableCell/useTableCellStyles.ts rename to packages/react-components/react-table/src/components/TableCell/useTableCellStyles.styles.ts 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 f6108a1f10598..61a0e575f7090 100644 --- a/packages/react-components/react-table/src/components/TableCellActions/TableCellActions.tsx +++ b/packages/react-components/react-table/src/components/TableCellActions/TableCellActions.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import { useTableCellActions_unstable } from './useTableCellActions'; import { renderTableCellActions_unstable } from './renderTableCellActions'; -import { useTableCellActionsStyles_unstable } from './useTableCellActionsStyles'; +import { useTableCellActionsStyles_unstable } from './useTableCellActionsStyles.styles'; import type { TableCellActionsProps } from './TableCellActions.types'; import type { ForwardRefComponent } from '@fluentui/react-utilities'; import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts'; diff --git a/packages/react-components/react-table/src/components/TableCellActions/index.ts b/packages/react-components/react-table/src/components/TableCellActions/index.ts index 888f8d60a4dbb..e804786b725db 100644 --- a/packages/react-components/react-table/src/components/TableCellActions/index.ts +++ b/packages/react-components/react-table/src/components/TableCellActions/index.ts @@ -2,4 +2,4 @@ export * from './TableCellActions'; export * from './TableCellActions.types'; export * from './renderTableCellActions'; export * from './useTableCellActions'; -export * from './useTableCellActionsStyles'; +export * from './useTableCellActionsStyles.styles'; diff --git a/packages/react-components/react-table/src/components/TableCellActions/useTableCellActionsStyles.ts b/packages/react-components/react-table/src/components/TableCellActions/useTableCellActionsStyles.styles.ts similarity index 100% rename from packages/react-components/react-table/src/components/TableCellActions/useTableCellActionsStyles.ts rename to packages/react-components/react-table/src/components/TableCellActions/useTableCellActionsStyles.styles.ts 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 90ccb32c50edc..055d77820fdef 100644 --- a/packages/react-components/react-table/src/components/TableCellLayout/TableCellLayout.tsx +++ b/packages/react-components/react-table/src/components/TableCellLayout/TableCellLayout.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import { useTableCellLayout_unstable } from './useTableCellLayout'; import { renderTableCellLayout_unstable } from './renderTableCellLayout'; -import { useTableCellLayoutStyles_unstable } from './useTableCellLayoutStyles'; +import { useTableCellLayoutStyles_unstable } from './useTableCellLayoutStyles.styles'; import { useTableCellLayoutContextValues_unstable } from './useTableCellLayoutContextValues'; import type { TableCellLayoutProps } from './TableCellLayout.types'; import type { ForwardRefComponent } from '@fluentui/react-utilities'; diff --git a/packages/react-components/react-table/src/components/TableCellLayout/index.ts b/packages/react-components/react-table/src/components/TableCellLayout/index.ts index c76976f4a904e..ed50c859d49c1 100644 --- a/packages/react-components/react-table/src/components/TableCellLayout/index.ts +++ b/packages/react-components/react-table/src/components/TableCellLayout/index.ts @@ -2,4 +2,4 @@ export * from './TableCellLayout'; export * from './TableCellLayout.types'; export * from './renderTableCellLayout'; export * from './useTableCellLayout'; -export * from './useTableCellLayoutStyles'; +export * from './useTableCellLayoutStyles.styles'; diff --git a/packages/react-components/react-table/src/components/TableCellLayout/useTableCellLayoutStyles.ts b/packages/react-components/react-table/src/components/TableCellLayout/useTableCellLayoutStyles.styles.ts similarity index 100% rename from packages/react-components/react-table/src/components/TableCellLayout/useTableCellLayoutStyles.ts rename to packages/react-components/react-table/src/components/TableCellLayout/useTableCellLayoutStyles.styles.ts 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 54a36922baa0e..a4b17c9c5649d 100644 --- a/packages/react-components/react-table/src/components/TableHeader/TableHeader.tsx +++ b/packages/react-components/react-table/src/components/TableHeader/TableHeader.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import { useTableHeader_unstable } from './useTableHeader'; import { renderTableHeader_unstable } from './renderTableHeader'; -import { useTableHeaderStyles_unstable } from './useTableHeaderStyles'; +import { useTableHeaderStyles_unstable } from './useTableHeaderStyles.styles'; import type { TableHeaderProps } from './TableHeader.types'; import type { ForwardRefComponent } from '@fluentui/react-utilities'; import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts'; diff --git a/packages/react-components/react-table/src/components/TableHeader/index.ts b/packages/react-components/react-table/src/components/TableHeader/index.ts index 35201a649691c..5833e1a260034 100644 --- a/packages/react-components/react-table/src/components/TableHeader/index.ts +++ b/packages/react-components/react-table/src/components/TableHeader/index.ts @@ -2,4 +2,4 @@ export * from './TableHeader'; export * from './TableHeader.types'; export * from './renderTableHeader'; export * from './useTableHeader'; -export * from './useTableHeaderStyles'; +export * from './useTableHeaderStyles.styles'; diff --git a/packages/react-components/react-table/src/components/TableHeader/useTableHeaderStyles.ts b/packages/react-components/react-table/src/components/TableHeader/useTableHeaderStyles.styles.ts similarity index 100% rename from packages/react-components/react-table/src/components/TableHeader/useTableHeaderStyles.ts rename to packages/react-components/react-table/src/components/TableHeader/useTableHeaderStyles.styles.ts 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 9a97cd5d8376d..3fe52ae6e3902 100644 --- a/packages/react-components/react-table/src/components/TableHeaderCell/TableHeaderCell.tsx +++ b/packages/react-components/react-table/src/components/TableHeaderCell/TableHeaderCell.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import { useTableHeaderCell_unstable } from './useTableHeaderCell'; import { renderTableHeaderCell_unstable } from './renderTableHeaderCell'; -import { useTableHeaderCellStyles_unstable } from './useTableHeaderCellStyles'; +import { useTableHeaderCellStyles_unstable } from './useTableHeaderCellStyles.styles'; import type { TableHeaderCellProps } from './TableHeaderCell.types'; import type { ForwardRefComponent } from '@fluentui/react-utilities'; import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts'; diff --git a/packages/react-components/react-table/src/components/TableHeaderCell/index.ts b/packages/react-components/react-table/src/components/TableHeaderCell/index.ts index 05fc1673fa6ea..f3c47af321ee1 100644 --- a/packages/react-components/react-table/src/components/TableHeaderCell/index.ts +++ b/packages/react-components/react-table/src/components/TableHeaderCell/index.ts @@ -2,4 +2,4 @@ export * from './TableHeaderCell'; export * from './TableHeaderCell.types'; export * from './renderTableHeaderCell'; export * from './useTableHeaderCell'; -export * from './useTableHeaderCellStyles'; +export * from './useTableHeaderCellStyles.styles'; diff --git a/packages/react-components/react-table/src/components/TableHeaderCell/useTableHeaderCellStyles.ts b/packages/react-components/react-table/src/components/TableHeaderCell/useTableHeaderCellStyles.styles.ts similarity index 100% rename from packages/react-components/react-table/src/components/TableHeaderCell/useTableHeaderCellStyles.ts rename to packages/react-components/react-table/src/components/TableHeaderCell/useTableHeaderCellStyles.styles.ts 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 48baf470cb615..9e21f4d72d533 100644 --- a/packages/react-components/react-table/src/components/TableResizeHandle/TableResizeHandle.tsx +++ b/packages/react-components/react-table/src/components/TableResizeHandle/TableResizeHandle.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import { useTableResizeHandle_unstable } from './useTableResizeHandle'; import { renderTableResizeHandle_unstable } from './renderTableResizeHandle'; -import { useTableResizeHandleStyles_unstable } from './useTableResizeHandleStyles'; +import { useTableResizeHandleStyles_unstable } from './useTableResizeHandleStyles.styles'; import type { TableResizeHandleProps } from './TableResizeHandle.types'; import type { ForwardRefComponent } from '@fluentui/react-utilities'; import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts'; diff --git a/packages/react-components/react-table/src/components/TableResizeHandle/index.ts b/packages/react-components/react-table/src/components/TableResizeHandle/index.ts index 412c6ccf8fc7d..3d1ea5ea6a7fb 100644 --- a/packages/react-components/react-table/src/components/TableResizeHandle/index.ts +++ b/packages/react-components/react-table/src/components/TableResizeHandle/index.ts @@ -2,4 +2,4 @@ export * from './TableResizeHandle'; export * from './TableResizeHandle.types'; export * from './renderTableResizeHandle'; export * from './useTableResizeHandle'; -export * from './useTableResizeHandleStyles'; +export * from './useTableResizeHandleStyles.styles'; diff --git a/packages/react-components/react-table/src/components/TableResizeHandle/useTableResizeHandleStyles.ts b/packages/react-components/react-table/src/components/TableResizeHandle/useTableResizeHandleStyles.styles.ts similarity index 100% rename from packages/react-components/react-table/src/components/TableResizeHandle/useTableResizeHandleStyles.ts rename to packages/react-components/react-table/src/components/TableResizeHandle/useTableResizeHandleStyles.styles.ts 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 ac8c2aadf3cd8..ef865ec244e94 100644 --- a/packages/react-components/react-table/src/components/TableRow/TableRow.tsx +++ b/packages/react-components/react-table/src/components/TableRow/TableRow.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import { useTableRow_unstable } from './useTableRow'; import { renderTableRow_unstable } from './renderTableRow'; -import { useTableRowStyles_unstable } from './useTableRowStyles'; +import { useTableRowStyles_unstable } from './useTableRowStyles.styles'; import type { TableRowProps } from './TableRow.types'; import type { ForwardRefComponent } from '@fluentui/react-utilities'; import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts'; diff --git a/packages/react-components/react-table/src/components/TableRow/index.ts b/packages/react-components/react-table/src/components/TableRow/index.ts index 04ac572ad59e7..2c11c5c63deea 100644 --- a/packages/react-components/react-table/src/components/TableRow/index.ts +++ b/packages/react-components/react-table/src/components/TableRow/index.ts @@ -2,4 +2,4 @@ export * from './TableRow'; export * from './TableRow.types'; export * from './renderTableRow'; export * from './useTableRow'; -export * from './useTableRowStyles'; +export * from './useTableRowStyles.styles'; diff --git a/packages/react-components/react-table/src/components/TableRow/useTableRowStyles.ts b/packages/react-components/react-table/src/components/TableRow/useTableRowStyles.styles.ts similarity index 98% rename from packages/react-components/react-table/src/components/TableRow/useTableRowStyles.ts rename to packages/react-components/react-table/src/components/TableRow/useTableRowStyles.styles.ts index f81165c875e13..5d0428f07fcc6 100644 --- a/packages/react-components/react-table/src/components/TableRow/useTableRowStyles.ts +++ b/packages/react-components/react-table/src/components/TableRow/useTableRowStyles.styles.ts @@ -2,8 +2,8 @@ import { makeStyles, mergeClasses, shorthands } from '@griffel/react'; import { tokens } from '@fluentui/react-theme'; import type { TableRowSlots, TableRowState } from './TableRow.types'; import type { SlotClassNames } from '@fluentui/react-utilities'; -import { tableCellActionsClassNames } from '../TableCellActions/useTableCellActionsStyles'; -import { tableSelectionCellClassNames } from '../TableSelectionCell/useTableSelectionCellStyles'; +import { tableCellActionsClassNames } from '../TableCellActions/useTableCellActionsStyles.styles'; +import { tableSelectionCellClassNames } from '../TableSelectionCell/useTableSelectionCellStyles.styles'; import { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster'; export const tableRowClassName = 'fui-TableRow'; diff --git a/packages/react-components/react-table/src/components/TableSelectionCell/TableSelectionCell.test.tsx b/packages/react-components/react-table/src/components/TableSelectionCell/TableSelectionCell.test.tsx index 37bde18504ae1..8e588344607c0 100644 --- a/packages/react-components/react-table/src/components/TableSelectionCell/TableSelectionCell.test.tsx +++ b/packages/react-components/react-table/src/components/TableSelectionCell/TableSelectionCell.test.tsx @@ -5,7 +5,7 @@ import { TableSelectionCell } from './TableSelectionCell'; import { isConformant } from '../../testing/isConformant'; import { TableSelectionCellProps } from './TableSelectionCell.types'; import { tableContextDefaultValue, TableContextProvider } from '../../contexts/tableContext'; -import { tableSelectionCellClassNames } from './useTableSelectionCellStyles'; +import { tableSelectionCellClassNames } from './useTableSelectionCellStyles.styles'; const tr = document.createElement('tr'); describe('TableSelectionCell', () => { 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 c6cea6d292325..0bee270a7beae 100644 --- a/packages/react-components/react-table/src/components/TableSelectionCell/TableSelectionCell.tsx +++ b/packages/react-components/react-table/src/components/TableSelectionCell/TableSelectionCell.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import { useTableSelectionCell_unstable } from './useTableSelectionCell'; import { renderTableSelectionCell_unstable } from './renderTableSelectionCell'; -import { useTableSelectionCellStyles_unstable } from './useTableSelectionCellStyles'; +import { useTableSelectionCellStyles_unstable } from './useTableSelectionCellStyles.styles'; import type { TableSelectionCellProps } from './TableSelectionCell.types'; import type { ForwardRefComponent } from '@fluentui/react-utilities'; import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts'; diff --git a/packages/react-components/react-table/src/components/TableSelectionCell/index.ts b/packages/react-components/react-table/src/components/TableSelectionCell/index.ts index 25e99a893b946..d5fabee4714b5 100644 --- a/packages/react-components/react-table/src/components/TableSelectionCell/index.ts +++ b/packages/react-components/react-table/src/components/TableSelectionCell/index.ts @@ -2,4 +2,4 @@ export * from './TableSelectionCell'; export * from './TableSelectionCell.types'; export * from './renderTableSelectionCell'; export * from './useTableSelectionCell'; -export * from './useTableSelectionCellStyles'; +export * from './useTableSelectionCellStyles.styles'; diff --git a/packages/react-components/react-table/src/components/TableSelectionCell/useTableSelectionCellStyles.ts b/packages/react-components/react-table/src/components/TableSelectionCell/useTableSelectionCellStyles.styles.ts similarity index 100% rename from packages/react-components/react-table/src/components/TableSelectionCell/useTableSelectionCellStyles.ts rename to packages/react-components/react-table/src/components/TableSelectionCell/useTableSelectionCellStyles.styles.ts diff --git a/packages/react-components/react-table/src/testing/isConformant.ts b/packages/react-components/react-table/src/testing/isConformant.ts index 77f88408cbd83..a3d988f29a172 100644 --- a/packages/react-components/react-table/src/testing/isConformant.ts +++ b/packages/react-components/react-table/src/testing/isConformant.ts @@ -6,6 +6,7 @@ export function isConformant( testInfo: Omit, 'componentPath'> & { componentPath?: string }, ) { const defaultOptions: Partial> = { + tsConfig: { configName: 'tsconfig.spec.json' }, componentPath: require.main?.filename.replace('.test', ''), extraTests: griffelTests as TestObject, }; diff --git a/packages/react-components/react-tabs/jest.config.js b/packages/react-components/react-tabs/jest.config.js index 82f3e969dc35f..2ede66dbfa5c1 100644 --- a/packages/react-components/react-tabs/jest.config.js +++ b/packages/react-components/react-tabs/jest.config.js @@ -9,7 +9,7 @@ module.exports = { globals: { 'ts-jest': { tsconfig: '/tsconfig.spec.json', - diagnostics: false, + isolatedModules: true, }, }, transform: { diff --git a/packages/react-components/react-tabs/src/testing/isConformant.ts b/packages/react-components/react-tabs/src/testing/isConformant.ts index 77f88408cbd83..a3d988f29a172 100644 --- a/packages/react-components/react-tabs/src/testing/isConformant.ts +++ b/packages/react-components/react-tabs/src/testing/isConformant.ts @@ -6,6 +6,7 @@ export function isConformant( testInfo: Omit, 'componentPath'> & { componentPath?: string }, ) { const defaultOptions: Partial> = { + tsConfig: { configName: 'tsconfig.spec.json' }, componentPath: require.main?.filename.replace('.test', ''), extraTests: griffelTests as TestObject, }; diff --git a/packages/react-components/react-tabster/jest.config.js b/packages/react-components/react-tabster/jest.config.js index 3459449cccb60..5563b6a59af63 100644 --- a/packages/react-components/react-tabster/jest.config.js +++ b/packages/react-components/react-tabster/jest.config.js @@ -9,7 +9,7 @@ module.exports = { globals: { 'ts-jest': { tsconfig: '/tsconfig.spec.json', - diagnostics: false, + isolatedModules: true, }, }, transform: { diff --git a/packages/react-components/react-tags/jest.config.js b/packages/react-components/react-tags/jest.config.js index 9b6d68d291110..4d18f3a220ad8 100644 --- a/packages/react-components/react-tags/jest.config.js +++ b/packages/react-components/react-tags/jest.config.js @@ -9,7 +9,7 @@ module.exports = { globals: { 'ts-jest': { tsconfig: '/tsconfig.spec.json', - diagnostics: false, + isolatedModules: true, }, }, transform: { diff --git a/packages/react-components/react-tags/src/testing/isConformant.ts b/packages/react-components/react-tags/src/testing/isConformant.ts index 77f88408cbd83..a3d988f29a172 100644 --- a/packages/react-components/react-tags/src/testing/isConformant.ts +++ b/packages/react-components/react-tags/src/testing/isConformant.ts @@ -6,6 +6,7 @@ export function isConformant( testInfo: Omit, 'componentPath'> & { componentPath?: string }, ) { const defaultOptions: Partial> = { + tsConfig: { configName: 'tsconfig.spec.json' }, componentPath: require.main?.filename.replace('.test', ''), extraTests: griffelTests as TestObject, }; diff --git a/packages/react-components/react-text/jest.config.js b/packages/react-components/react-text/jest.config.js index 8e3d3aaf2d53b..810103ae043c5 100644 --- a/packages/react-components/react-text/jest.config.js +++ b/packages/react-components/react-text/jest.config.js @@ -9,7 +9,7 @@ module.exports = { globals: { 'ts-jest': { tsconfig: '/tsconfig.spec.json', - diagnostics: false, + isolatedModules: true, }, }, transform: { 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 c30202af56062..f88995ee8eadb 100644 --- a/packages/react-components/react-text/src/components/Text/Text.tsx +++ b/packages/react-components/react-text/src/components/Text/Text.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import { useText_unstable } from './useText'; import { renderText_unstable } from './renderText'; -import { useTextStyles_unstable } from './useTextStyles'; +import { useTextStyles_unstable } from './useTextStyles.styles'; import type { TextProps } from './Text.types'; import type { ForwardRefComponent } from '@fluentui/react-utilities'; import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts'; diff --git a/packages/react-components/react-text/src/components/Text/index.ts b/packages/react-components/react-text/src/components/Text/index.ts index 04fc42f94ff61..d4f8729f99a20 100644 --- a/packages/react-components/react-text/src/components/Text/index.ts +++ b/packages/react-components/react-text/src/components/Text/index.ts @@ -2,4 +2,4 @@ export * from './Text'; export * from './Text.types'; export * from './renderText'; export * from './useText'; -export * from './useTextStyles'; +export * from './useTextStyles.styles'; diff --git a/packages/react-components/react-text/src/components/Text/useTextStyles.ts b/packages/react-components/react-text/src/components/Text/useTextStyles.styles.ts similarity index 100% rename from packages/react-components/react-text/src/components/Text/useTextStyles.ts rename to packages/react-components/react-text/src/components/Text/useTextStyles.styles.ts diff --git a/packages/react-components/react-text/src/components/presets/Body1/Body1.tsx b/packages/react-components/react-text/src/components/presets/Body1/Body1.tsx index 8e9d350ca58e6..57ebe7173fbec 100644 --- a/packages/react-components/react-text/src/components/presets/Body1/Body1.tsx +++ b/packages/react-components/react-text/src/components/presets/Body1/Body1.tsx @@ -1,26 +1,13 @@ import type { FunctionComponent } from 'react'; -import { makeStyles } from '@griffel/react'; import { createPreset } from '../createPreset'; -import { SlotClassNames } from '@fluentui/react-utilities'; -import type { TextSlots, TextPresetProps } from '../../Text/Text.types'; -import { typographyStyles } from '@fluentui/react-theme'; - -export const body1ClassNames: SlotClassNames = { - root: 'fui-Body1', -}; - -/** - * Styles for the root slot - */ -const useStyles = makeStyles({ - root: typographyStyles.body1, -}); +import type { TextPresetProps } from '../../Text/Text.types'; +import { body1ClassNames, useBody1Styles } from './useBody1Styles.styles'; /** * Text preset component for the Body1 typography variant */ export const Body1: FunctionComponent = createPreset({ - useStyles, + useStyles: useBody1Styles, className: body1ClassNames.root, displayName: 'Body1', }); diff --git a/packages/react-components/react-text/src/components/presets/Body1/index.ts b/packages/react-components/react-text/src/components/presets/Body1/index.ts index 121209a453aa4..0bf95e904f87a 100644 --- a/packages/react-components/react-text/src/components/presets/Body1/index.ts +++ b/packages/react-components/react-text/src/components/presets/Body1/index.ts @@ -1 +1,2 @@ export * from './Body1'; +export { body1ClassNames } from './useBody1Styles.styles'; diff --git a/packages/react-components/react-text/src/components/presets/Body1/useBody1Styles.styles.ts b/packages/react-components/react-text/src/components/presets/Body1/useBody1Styles.styles.ts new file mode 100644 index 0000000000000..0df28b21d38eb --- /dev/null +++ b/packages/react-components/react-text/src/components/presets/Body1/useBody1Styles.styles.ts @@ -0,0 +1,15 @@ +import { makeStyles } from '@griffel/react'; +import { SlotClassNames } from '@fluentui/react-utilities'; +import type { TextSlots } from '../../Text/Text.types'; +import { typographyStyles } from '@fluentui/react-theme'; + +export const body1ClassNames: SlotClassNames = { + root: 'fui-Body1', +}; + +/** + * Styles for the root slot + */ +export const useBody1Styles = makeStyles({ + root: typographyStyles.body1, +}); diff --git a/packages/react-components/react-text/src/components/presets/Body1Strong/Body1Strong.tsx b/packages/react-components/react-text/src/components/presets/Body1Strong/Body1Strong.tsx index 586c08d518a09..74df154999825 100644 --- a/packages/react-components/react-text/src/components/presets/Body1Strong/Body1Strong.tsx +++ b/packages/react-components/react-text/src/components/presets/Body1Strong/Body1Strong.tsx @@ -1,26 +1,13 @@ import type { FunctionComponent } from 'react'; -import { makeStyles } from '@griffel/react'; import { createPreset } from '../createPreset'; -import { SlotClassNames } from '@fluentui/react-utilities'; -import type { TextSlots, TextPresetProps } from '../../Text/Text.types'; -import { typographyStyles } from '@fluentui/react-theme'; - -export const body1StrongClassNames: SlotClassNames = { - root: 'fui-Body1Strong', -}; - -/** - * Styles for the root slot - */ -const useStyles = makeStyles({ - root: typographyStyles.body1Strong, -}); +import type { TextPresetProps } from '../../Text/Text.types'; +import { body1StrongClassNames, useBody1StrongStyles } from './useBody1StrongStyles.styles'; /** * Text preset component for the Body1Strong typography variant */ export const Body1Strong: FunctionComponent = createPreset({ - useStyles, + useStyles: useBody1StrongStyles, className: body1StrongClassNames.root, displayName: 'Body1Strong', }); diff --git a/packages/react-components/react-text/src/components/presets/Body1Strong/index.ts b/packages/react-components/react-text/src/components/presets/Body1Strong/index.ts index 09d233a0f3c9f..e434a5b659852 100644 --- a/packages/react-components/react-text/src/components/presets/Body1Strong/index.ts +++ b/packages/react-components/react-text/src/components/presets/Body1Strong/index.ts @@ -1 +1,2 @@ export * from './Body1Strong'; +export { body1StrongClassNames } from './useBody1StrongStyles.styles'; diff --git a/packages/react-components/react-text/src/components/presets/Body1Strong/useBody1StrongStyles.styles.ts b/packages/react-components/react-text/src/components/presets/Body1Strong/useBody1StrongStyles.styles.ts new file mode 100644 index 0000000000000..a29f3e9c1702f --- /dev/null +++ b/packages/react-components/react-text/src/components/presets/Body1Strong/useBody1StrongStyles.styles.ts @@ -0,0 +1,15 @@ +import { makeStyles } from '@griffel/react'; +import { SlotClassNames } from '@fluentui/react-utilities'; +import type { TextSlots } from '../../Text/Text.types'; +import { typographyStyles } from '@fluentui/react-theme'; + +export const body1StrongClassNames: SlotClassNames = { + root: 'fui-Body1Strong', +}; + +/** + * Styles for the root slot + */ +export const useBody1StrongStyles = makeStyles({ + root: typographyStyles.body1Strong, +}); diff --git a/packages/react-components/react-text/src/components/presets/Body1Stronger/Body1Stronger.tsx b/packages/react-components/react-text/src/components/presets/Body1Stronger/Body1Stronger.tsx index d28a061293ba8..fb7efac4e0595 100644 --- a/packages/react-components/react-text/src/components/presets/Body1Stronger/Body1Stronger.tsx +++ b/packages/react-components/react-text/src/components/presets/Body1Stronger/Body1Stronger.tsx @@ -1,26 +1,13 @@ import type { FunctionComponent } from 'react'; -import { makeStyles } from '@griffel/react'; import { createPreset } from '../createPreset'; -import { SlotClassNames } from '@fluentui/react-utilities'; -import type { TextSlots, TextPresetProps } from '../../Text/Text.types'; -import { typographyStyles } from '@fluentui/react-theme'; - -export const body1StrongerClassNames: SlotClassNames = { - root: 'fui-Body1Stronger', -}; - -/** - * Styles for the root slot - */ -const useStyles = makeStyles({ - root: typographyStyles.body1Stronger, -}); +import type { TextPresetProps } from '../../Text/Text.types'; +import { body1StrongerClassNames, useBody1StrongerStyles } from './useBody1StrongerStyles.styles'; /** * Text preset component for the Body1Stronger typography variant */ export const Body1Stronger: FunctionComponent = createPreset({ - useStyles, + useStyles: useBody1StrongerStyles, className: body1StrongerClassNames.root, displayName: 'Body1Stronger', }); diff --git a/packages/react-components/react-text/src/components/presets/Body1Stronger/index.ts b/packages/react-components/react-text/src/components/presets/Body1Stronger/index.ts index df60a4c601787..2a4f350cf7fc5 100644 --- a/packages/react-components/react-text/src/components/presets/Body1Stronger/index.ts +++ b/packages/react-components/react-text/src/components/presets/Body1Stronger/index.ts @@ -1 +1,2 @@ export * from './Body1Stronger'; +export { body1StrongerClassNames } from './useBody1StrongerStyles.styles'; diff --git a/packages/react-components/react-text/src/components/presets/Body1Stronger/useBody1StrongerStyles.styles.ts b/packages/react-components/react-text/src/components/presets/Body1Stronger/useBody1StrongerStyles.styles.ts new file mode 100644 index 0000000000000..cb883ab7e0846 --- /dev/null +++ b/packages/react-components/react-text/src/components/presets/Body1Stronger/useBody1StrongerStyles.styles.ts @@ -0,0 +1,15 @@ +import { makeStyles } from '@griffel/react'; +import { SlotClassNames } from '@fluentui/react-utilities'; +import type { TextSlots } from '../../Text/Text.types'; +import { typographyStyles } from '@fluentui/react-theme'; + +export const body1StrongerClassNames: SlotClassNames = { + root: 'fui-Body1Stronger', +}; + +/** + * Styles for the root slot + */ +export const useBody1StrongerStyles = makeStyles({ + root: typographyStyles.body1Stronger, +}); diff --git a/packages/react-components/react-text/src/components/presets/Body2/Body2.tsx b/packages/react-components/react-text/src/components/presets/Body2/Body2.tsx index 906a855cdddb4..bed7b51c95c51 100644 --- a/packages/react-components/react-text/src/components/presets/Body2/Body2.tsx +++ b/packages/react-components/react-text/src/components/presets/Body2/Body2.tsx @@ -1,26 +1,13 @@ import type { FunctionComponent } from 'react'; -import { makeStyles } from '@griffel/react'; import { createPreset } from '../createPreset'; -import { SlotClassNames } from '@fluentui/react-utilities'; -import type { TextSlots, TextPresetProps } from '../../Text/Text.types'; -import { typographyStyles } from '@fluentui/react-theme'; - -export const body2ClassNames: SlotClassNames = { - root: 'fui-Body2', -}; - -/** - * Styles for the root slot - */ -const useStyles = makeStyles({ - root: typographyStyles.body2, -}); +import type { TextPresetProps } from '../../Text/Text.types'; +import { body2ClassNames, useBody2Styles } from './useBody2Styles.styles'; /** * Text preset component for the Body2 typography variant */ export const Body2: FunctionComponent = createPreset({ - useStyles, + useStyles: useBody2Styles, className: body2ClassNames.root, displayName: 'Body2', }); diff --git a/packages/react-components/react-text/src/components/presets/Body2/index.ts b/packages/react-components/react-text/src/components/presets/Body2/index.ts index b334621f5b630..9afbb9a9a0c73 100644 --- a/packages/react-components/react-text/src/components/presets/Body2/index.ts +++ b/packages/react-components/react-text/src/components/presets/Body2/index.ts @@ -1 +1,2 @@ export * from './Body2'; +export { body2ClassNames } from './useBody2Styles.styles'; diff --git a/packages/react-components/react-text/src/components/presets/Body2/useBody2Styles.styles.ts b/packages/react-components/react-text/src/components/presets/Body2/useBody2Styles.styles.ts new file mode 100644 index 0000000000000..116208d5d3834 --- /dev/null +++ b/packages/react-components/react-text/src/components/presets/Body2/useBody2Styles.styles.ts @@ -0,0 +1,15 @@ +import { makeStyles } from '@griffel/react'; +import { SlotClassNames } from '@fluentui/react-utilities'; +import type { TextSlots } from '../../Text/Text.types'; +import { typographyStyles } from '@fluentui/react-theme'; + +export const body2ClassNames: SlotClassNames = { + root: 'fui-Body2', +}; + +/** + * Styles for the root slot + */ +export const useBody2Styles = makeStyles({ + root: typographyStyles.body2, +}); diff --git a/packages/react-components/react-text/src/components/presets/Caption1/Caption1.tsx b/packages/react-components/react-text/src/components/presets/Caption1/Caption1.tsx index 022527268cde0..c2b403a165652 100644 --- a/packages/react-components/react-text/src/components/presets/Caption1/Caption1.tsx +++ b/packages/react-components/react-text/src/components/presets/Caption1/Caption1.tsx @@ -1,26 +1,13 @@ import type { FunctionComponent } from 'react'; -import { makeStyles } from '@griffel/react'; import { createPreset } from '../createPreset'; -import { SlotClassNames } from '@fluentui/react-utilities'; -import type { TextSlots, TextPresetProps } from '../../Text/Text.types'; -import { typographyStyles } from '@fluentui/react-theme'; - -export const caption1ClassNames: SlotClassNames = { - root: 'fui-Caption1', -}; - -/** - * Styles for the root slot - */ -const useStyles = makeStyles({ - root: typographyStyles.caption1, -}); +import type { TextPresetProps } from '../../Text/Text.types'; +import { caption1ClassNames, useCaption1Styles } from './useCaption1Styles.styles'; /** * Text preset component for the Caption1 typography variant */ export const Caption1: FunctionComponent = createPreset({ - useStyles, + useStyles: useCaption1Styles, className: caption1ClassNames.root, displayName: 'Caption1', }); diff --git a/packages/react-components/react-text/src/components/presets/Caption1/index.ts b/packages/react-components/react-text/src/components/presets/Caption1/index.ts index 9884a53b5ce8e..0d699882e6451 100644 --- a/packages/react-components/react-text/src/components/presets/Caption1/index.ts +++ b/packages/react-components/react-text/src/components/presets/Caption1/index.ts @@ -1 +1,2 @@ export * from './Caption1'; +export { caption1ClassNames } from './useCaption1Styles.styles'; diff --git a/packages/react-components/react-text/src/components/presets/Caption1/useCaption1Styles.styles.ts b/packages/react-components/react-text/src/components/presets/Caption1/useCaption1Styles.styles.ts new file mode 100644 index 0000000000000..cff14d3f68638 --- /dev/null +++ b/packages/react-components/react-text/src/components/presets/Caption1/useCaption1Styles.styles.ts @@ -0,0 +1,15 @@ +import { makeStyles } from '@griffel/react'; +import { SlotClassNames } from '@fluentui/react-utilities'; +import type { TextSlots } from '../../Text/Text.types'; +import { typographyStyles } from '@fluentui/react-theme'; + +export const caption1ClassNames: SlotClassNames = { + root: 'fui-Caption1', +}; + +/** + * Styles for the root slot + */ +export const useCaption1Styles = makeStyles({ + root: typographyStyles.caption1, +}); diff --git a/packages/react-components/react-text/src/components/presets/Caption1Strong/Caption1Strong.tsx b/packages/react-components/react-text/src/components/presets/Caption1Strong/Caption1Strong.tsx index 00df4122aac1f..781359befa902 100644 --- a/packages/react-components/react-text/src/components/presets/Caption1Strong/Caption1Strong.tsx +++ b/packages/react-components/react-text/src/components/presets/Caption1Strong/Caption1Strong.tsx @@ -1,26 +1,13 @@ import type { FunctionComponent } from 'react'; -import { makeStyles } from '@griffel/react'; import { createPreset } from '../createPreset'; -import { SlotClassNames } from '@fluentui/react-utilities'; -import type { TextSlots, TextPresetProps } from '../../Text/Text.types'; -import { typographyStyles } from '@fluentui/react-theme'; - -export const caption1StrongClassNames: SlotClassNames = { - root: 'fui-Caption1Strong', -}; - -/** - * Styles for the root slot - */ -const useStyles = makeStyles({ - root: typographyStyles.caption1Strong, -}); +import type { TextPresetProps } from '../../Text/Text.types'; +import { caption1StrongClassNames, useCaption1StrongStyles } from './useCaption1StrongStyles.styles'; /** * Text preset component for the Caption1Strong typography variant */ export const Caption1Strong: FunctionComponent = createPreset({ - useStyles, + useStyles: useCaption1StrongStyles, className: caption1StrongClassNames.root, displayName: 'Caption1Strong', }); diff --git a/packages/react-components/react-text/src/components/presets/Caption1Strong/index.ts b/packages/react-components/react-text/src/components/presets/Caption1Strong/index.ts index 5295cf11b13b4..2d1a76c38fd84 100644 --- a/packages/react-components/react-text/src/components/presets/Caption1Strong/index.ts +++ b/packages/react-components/react-text/src/components/presets/Caption1Strong/index.ts @@ -1 +1,2 @@ export * from './Caption1Strong'; +export { caption1StrongClassNames } from './useCaption1StrongStyles.styles'; diff --git a/packages/react-components/react-text/src/components/presets/Caption1Strong/useCaption1StrongStyles.styles.ts b/packages/react-components/react-text/src/components/presets/Caption1Strong/useCaption1StrongStyles.styles.ts new file mode 100644 index 0000000000000..0e9512d9753ba --- /dev/null +++ b/packages/react-components/react-text/src/components/presets/Caption1Strong/useCaption1StrongStyles.styles.ts @@ -0,0 +1,15 @@ +import { makeStyles } from '@griffel/react'; +import { SlotClassNames } from '@fluentui/react-utilities'; +import type { TextSlots } from '../../Text/Text.types'; +import { typographyStyles } from '@fluentui/react-theme'; + +export const caption1StrongClassNames: SlotClassNames = { + root: 'fui-Caption1Strong', +}; + +/** + * Styles for the root slot + */ +export const useCaption1StrongStyles = makeStyles({ + root: typographyStyles.caption1Strong, +}); diff --git a/packages/react-components/react-text/src/components/presets/Caption1Stronger/Caption1Stronger.tsx b/packages/react-components/react-text/src/components/presets/Caption1Stronger/Caption1Stronger.tsx index e3ef507ccb122..a8b27c99c773c 100644 --- a/packages/react-components/react-text/src/components/presets/Caption1Stronger/Caption1Stronger.tsx +++ b/packages/react-components/react-text/src/components/presets/Caption1Stronger/Caption1Stronger.tsx @@ -1,26 +1,13 @@ import type { FunctionComponent } from 'react'; -import { makeStyles } from '@griffel/react'; import { createPreset } from '../createPreset'; -import { SlotClassNames } from '@fluentui/react-utilities'; -import type { TextSlots, TextPresetProps } from '../../Text/Text.types'; -import { typographyStyles } from '@fluentui/react-theme'; - -export const caption1StrongerClassNames: SlotClassNames = { - root: 'fui-Caption1Stronger', -}; - -/** - * Styles for the root slot - */ -const useStyles = makeStyles({ - root: typographyStyles.caption1Stronger, -}); +import type { TextPresetProps } from '../../Text/Text.types'; +import { caption1StrongerClassNames, useCaption1StrongerStyles } from './useCaption1Stronger.styles'; /** * Text preset component for the Caption1Stronger typography variant */ export const Caption1Stronger: FunctionComponent = createPreset({ - useStyles, + useStyles: useCaption1StrongerStyles, className: caption1StrongerClassNames.root, displayName: 'Caption1Stronger', }); diff --git a/packages/react-components/react-text/src/components/presets/Caption1Stronger/index.ts b/packages/react-components/react-text/src/components/presets/Caption1Stronger/index.ts index 97da77e682c63..bf291a220f6c8 100644 --- a/packages/react-components/react-text/src/components/presets/Caption1Stronger/index.ts +++ b/packages/react-components/react-text/src/components/presets/Caption1Stronger/index.ts @@ -1 +1,2 @@ export * from './Caption1Stronger'; +export { caption1StrongerClassNames } from './useCaption1Stronger.styles'; diff --git a/packages/react-components/react-text/src/components/presets/Caption1Stronger/useCaption1Stronger.styles.ts b/packages/react-components/react-text/src/components/presets/Caption1Stronger/useCaption1Stronger.styles.ts new file mode 100644 index 0000000000000..57094df4c6767 --- /dev/null +++ b/packages/react-components/react-text/src/components/presets/Caption1Stronger/useCaption1Stronger.styles.ts @@ -0,0 +1,15 @@ +import { makeStyles } from '@griffel/react'; +import { SlotClassNames } from '@fluentui/react-utilities'; +import type { TextSlots } from '../../Text/Text.types'; +import { typographyStyles } from '@fluentui/react-theme'; + +export const caption1StrongerClassNames: SlotClassNames = { + root: 'fui-Caption1Stronger', +}; + +/** + * Styles for the root slot + */ +export const useCaption1StrongerStyles = makeStyles({ + root: typographyStyles.caption1Stronger, +}); diff --git a/packages/react-components/react-text/src/components/presets/Caption2/Caption2.tsx b/packages/react-components/react-text/src/components/presets/Caption2/Caption2.tsx index 5e47ecf75eadb..6cc1bdf15a2db 100644 --- a/packages/react-components/react-text/src/components/presets/Caption2/Caption2.tsx +++ b/packages/react-components/react-text/src/components/presets/Caption2/Caption2.tsx @@ -1,26 +1,13 @@ import type { FunctionComponent } from 'react'; -import { makeStyles } from '@griffel/react'; import { createPreset } from '../createPreset'; -import { SlotClassNames } from '@fluentui/react-utilities'; -import type { TextSlots, TextPresetProps } from '../../Text/Text.types'; -import { typographyStyles } from '@fluentui/react-theme'; - -export const caption2ClassNames: SlotClassNames = { - root: 'fui-Caption2', -}; - -/** - * Styles for the root slot - */ -const useStyles = makeStyles({ - root: typographyStyles.caption2, -}); +import type { TextPresetProps } from '../../Text/Text.types'; +import { caption2ClassNames, useCaption2Styles } from './useCaption2Styles.styles'; /** * Text preset component for the Caption2 typography variant */ export const Caption2: FunctionComponent = createPreset({ - useStyles, + useStyles: useCaption2Styles, className: caption2ClassNames.root, displayName: 'Caption2', }); diff --git a/packages/react-components/react-text/src/components/presets/Caption2/index.ts b/packages/react-components/react-text/src/components/presets/Caption2/index.ts index 0b834aa6325c1..d60c40bdfbd25 100644 --- a/packages/react-components/react-text/src/components/presets/Caption2/index.ts +++ b/packages/react-components/react-text/src/components/presets/Caption2/index.ts @@ -1 +1,2 @@ export * from './Caption2'; +export { caption2ClassNames } from './useCaption2Styles.styles'; diff --git a/packages/react-components/react-text/src/components/presets/Caption2/useCaption2Styles.styles.ts b/packages/react-components/react-text/src/components/presets/Caption2/useCaption2Styles.styles.ts new file mode 100644 index 0000000000000..3b91b20030bae --- /dev/null +++ b/packages/react-components/react-text/src/components/presets/Caption2/useCaption2Styles.styles.ts @@ -0,0 +1,15 @@ +import { makeStyles } from '@griffel/react'; +import { SlotClassNames } from '@fluentui/react-utilities'; +import type { TextSlots } from '../../Text/Text.types'; +import { typographyStyles } from '@fluentui/react-theme'; + +export const caption2ClassNames: SlotClassNames = { + root: 'fui-Caption2', +}; + +/** + * Styles for the root slot + */ +export const useCaption2Styles = makeStyles({ + root: typographyStyles.caption2, +}); diff --git a/packages/react-components/react-text/src/components/presets/Caption2Strong/Caption2Strong.tsx b/packages/react-components/react-text/src/components/presets/Caption2Strong/Caption2Strong.tsx index aa1d4a5a31aca..663c4da0ad5f8 100644 --- a/packages/react-components/react-text/src/components/presets/Caption2Strong/Caption2Strong.tsx +++ b/packages/react-components/react-text/src/components/presets/Caption2Strong/Caption2Strong.tsx @@ -1,26 +1,14 @@ import type { FunctionComponent } from 'react'; -import { makeStyles } from '@griffel/react'; import { createPreset } from '../createPreset'; -import { SlotClassNames } from '@fluentui/react-utilities'; -import type { TextSlots, TextPresetProps } from '../../Text/Text.types'; -import { typographyStyles } from '@fluentui/react-theme'; -export const caption2StrongClassNames: SlotClassNames = { - root: 'fui-Caption2Strong', -}; - -/** - * Styles for the root slot - */ -const useStyles = makeStyles({ - root: typographyStyles.caption2Strong, -}); +import type { TextPresetProps } from '../../Text/Text.types'; +import { caption2StrongClassNames, useCaption2StrongStyles } from './useCaption2StrongStyles.styles'; /** * Text preset component for the Caption2Strong typography variant */ export const Caption2Strong: FunctionComponent = createPreset({ - useStyles, + useStyles: useCaption2StrongStyles, className: caption2StrongClassNames.root, displayName: 'Caption2Strong', }); diff --git a/packages/react-components/react-text/src/components/presets/Caption2Strong/index.ts b/packages/react-components/react-text/src/components/presets/Caption2Strong/index.ts index ea02534c04948..04bab7797e501 100644 --- a/packages/react-components/react-text/src/components/presets/Caption2Strong/index.ts +++ b/packages/react-components/react-text/src/components/presets/Caption2Strong/index.ts @@ -1 +1,2 @@ export * from './Caption2Strong'; +export { caption2StrongClassNames } from './useCaption2StrongStyles.styles'; diff --git a/packages/react-components/react-text/src/components/presets/Caption2Strong/useCaption2StrongStyles.styles.ts b/packages/react-components/react-text/src/components/presets/Caption2Strong/useCaption2StrongStyles.styles.ts new file mode 100644 index 0000000000000..7f8770d425567 --- /dev/null +++ b/packages/react-components/react-text/src/components/presets/Caption2Strong/useCaption2StrongStyles.styles.ts @@ -0,0 +1,15 @@ +import { makeStyles } from '@griffel/react'; +import { SlotClassNames } from '@fluentui/react-utilities'; +import type { TextSlots } from '../../Text/Text.types'; +import { typographyStyles } from '@fluentui/react-theme'; + +export const caption2StrongClassNames: SlotClassNames = { + root: 'fui-Caption2Strong', +}; + +/** + * Styles for the root slot + */ +export const useCaption2StrongStyles = makeStyles({ + root: typographyStyles.caption2Strong, +}); diff --git a/packages/react-components/react-text/src/components/presets/Display/Display.tsx b/packages/react-components/react-text/src/components/presets/Display/Display.tsx index 76715f6a1c2fc..339e9045eb341 100644 --- a/packages/react-components/react-text/src/components/presets/Display/Display.tsx +++ b/packages/react-components/react-text/src/components/presets/Display/Display.tsx @@ -1,26 +1,13 @@ import type { FunctionComponent } from 'react'; -import { makeStyles } from '@griffel/react'; import { createPreset } from '../createPreset'; -import { SlotClassNames } from '@fluentui/react-utilities'; -import type { TextSlots, TextPresetProps } from '../../Text/Text.types'; -import { typographyStyles } from '@fluentui/react-theme'; - -export const displayClassNames: SlotClassNames = { - root: 'fui-Display', -}; - -/** - * Styles for the root slot - */ -const useStyles = makeStyles({ - root: typographyStyles.display, -}); +import type { TextPresetProps } from '../../Text/Text.types'; +import { displayClassNames, useDisplayStyles } from './useDisplayStyles.styles'; /** * Text preset component for the Display typography variant */ export const Display: FunctionComponent = createPreset({ - useStyles, + useStyles: useDisplayStyles, className: displayClassNames.root, displayName: 'Display', }); diff --git a/packages/react-components/react-text/src/components/presets/Display/index.ts b/packages/react-components/react-text/src/components/presets/Display/index.ts index 6a069964d8a04..016778725109b 100644 --- a/packages/react-components/react-text/src/components/presets/Display/index.ts +++ b/packages/react-components/react-text/src/components/presets/Display/index.ts @@ -1 +1,2 @@ export * from './Display'; +export { displayClassNames } from './useDisplayStyles.styles'; diff --git a/packages/react-components/react-text/src/components/presets/Display/useDisplayStyles.styles.ts b/packages/react-components/react-text/src/components/presets/Display/useDisplayStyles.styles.ts new file mode 100644 index 0000000000000..354c41720f213 --- /dev/null +++ b/packages/react-components/react-text/src/components/presets/Display/useDisplayStyles.styles.ts @@ -0,0 +1,15 @@ +import { makeStyles } from '@griffel/react'; +import { SlotClassNames } from '@fluentui/react-utilities'; +import type { TextSlots } from '../../Text/Text.types'; +import { typographyStyles } from '@fluentui/react-theme'; + +export const displayClassNames: SlotClassNames = { + root: 'fui-Display', +}; + +/** + * Styles for the root slot + */ +export const useDisplayStyles = makeStyles({ + root: typographyStyles.display, +}); diff --git a/packages/react-components/react-text/src/components/presets/LargeTitle/LargeTitle.tsx b/packages/react-components/react-text/src/components/presets/LargeTitle/LargeTitle.tsx index a2f8f2062928f..e7591a75ba23c 100644 --- a/packages/react-components/react-text/src/components/presets/LargeTitle/LargeTitle.tsx +++ b/packages/react-components/react-text/src/components/presets/LargeTitle/LargeTitle.tsx @@ -1,26 +1,13 @@ import type { FunctionComponent } from 'react'; -import { makeStyles } from '@griffel/react'; import { createPreset } from '../createPreset'; -import { SlotClassNames } from '@fluentui/react-utilities'; -import type { TextSlots, TextPresetProps } from '../../Text/Text.types'; -import { typographyStyles } from '@fluentui/react-theme'; - -export const largeTitleClassNames: SlotClassNames = { - root: 'fui-LargeTitle', -}; - -/** - * Styles for the root slot - */ -const useStyles = makeStyles({ - root: typographyStyles.largeTitle, -}); +import type { TextPresetProps } from '../../Text/Text.types'; +import { largeTitleClassNames, useLargeTitleStyles } from './useLargeTitleStyles.styles'; /** * Text preset component for the Large Title typography variant */ export const LargeTitle: FunctionComponent = createPreset({ - useStyles, + useStyles: useLargeTitleStyles, className: largeTitleClassNames.root, displayName: 'LargeTitle', }); diff --git a/packages/react-components/react-text/src/components/presets/LargeTitle/index.ts b/packages/react-components/react-text/src/components/presets/LargeTitle/index.ts index 7845d85250ad9..e1b89327732a7 100644 --- a/packages/react-components/react-text/src/components/presets/LargeTitle/index.ts +++ b/packages/react-components/react-text/src/components/presets/LargeTitle/index.ts @@ -1 +1,2 @@ export * from './LargeTitle'; +export { largeTitleClassNames } from './useLargeTitleStyles.styles'; diff --git a/packages/react-components/react-text/src/components/presets/LargeTitle/useLargeTitleStyles.styles.ts b/packages/react-components/react-text/src/components/presets/LargeTitle/useLargeTitleStyles.styles.ts new file mode 100644 index 0000000000000..864703643dcc3 --- /dev/null +++ b/packages/react-components/react-text/src/components/presets/LargeTitle/useLargeTitleStyles.styles.ts @@ -0,0 +1,15 @@ +import { makeStyles } from '@griffel/react'; +import { SlotClassNames } from '@fluentui/react-utilities'; +import type { TextSlots } from '../../Text/Text.types'; +import { typographyStyles } from '@fluentui/react-theme'; + +export const largeTitleClassNames: SlotClassNames = { + root: 'fui-LargeTitle', +}; + +/** + * Styles for the root slot + */ +export const useLargeTitleStyles = makeStyles({ + root: typographyStyles.largeTitle, +}); diff --git a/packages/react-components/react-text/src/components/presets/Subtitle1/Subtitle1.tsx b/packages/react-components/react-text/src/components/presets/Subtitle1/Subtitle1.tsx index 63a100459e9d9..99c2e2ebfb288 100644 --- a/packages/react-components/react-text/src/components/presets/Subtitle1/Subtitle1.tsx +++ b/packages/react-components/react-text/src/components/presets/Subtitle1/Subtitle1.tsx @@ -1,26 +1,13 @@ import type { FunctionComponent } from 'react'; -import { makeStyles } from '@griffel/react'; import { createPreset } from '../createPreset'; -import { SlotClassNames } from '@fluentui/react-utilities'; -import type { TextSlots, TextPresetProps } from '../../Text/Text.types'; -import { typographyStyles } from '@fluentui/react-theme'; - -export const subtitle1ClassNames: SlotClassNames = { - root: 'fui-Subtitle1', -}; - -/** - * Styles for the root slot - */ -const useStyles = makeStyles({ - root: typographyStyles.subtitle1, -}); +import type { TextPresetProps } from '../../Text/Text.types'; +import { subtitle1ClassNames, useSubtitle1Styles } from './useSubtitle1Styles.styles'; /** * Text preset component for the Subtitle1 typography variant */ export const Subtitle1: FunctionComponent = createPreset({ - useStyles, + useStyles: useSubtitle1Styles, className: subtitle1ClassNames.root, displayName: 'Subtitle1', }); diff --git a/packages/react-components/react-text/src/components/presets/Subtitle1/index.ts b/packages/react-components/react-text/src/components/presets/Subtitle1/index.ts index 3673881ac6ea7..a3be128b5d24f 100644 --- a/packages/react-components/react-text/src/components/presets/Subtitle1/index.ts +++ b/packages/react-components/react-text/src/components/presets/Subtitle1/index.ts @@ -1 +1,2 @@ export * from './Subtitle1'; +export { subtitle1ClassNames } from './useSubtitle1Styles.styles'; diff --git a/packages/react-components/react-text/src/components/presets/Subtitle1/useSubtitle1Styles.styles.ts b/packages/react-components/react-text/src/components/presets/Subtitle1/useSubtitle1Styles.styles.ts new file mode 100644 index 0000000000000..06f48757cca04 --- /dev/null +++ b/packages/react-components/react-text/src/components/presets/Subtitle1/useSubtitle1Styles.styles.ts @@ -0,0 +1,15 @@ +import { makeStyles } from '@griffel/react'; +import { SlotClassNames } from '@fluentui/react-utilities'; +import type { TextSlots } from '../../Text/Text.types'; +import { typographyStyles } from '@fluentui/react-theme'; + +export const subtitle1ClassNames: SlotClassNames = { + root: 'fui-Subtitle1', +}; + +/** + * Styles for the root slot + */ +export const useSubtitle1Styles = makeStyles({ + root: typographyStyles.subtitle1, +}); diff --git a/packages/react-components/react-text/src/components/presets/Subtitle2/Subtitle2.tsx b/packages/react-components/react-text/src/components/presets/Subtitle2/Subtitle2.tsx index f61e1ef8039bc..34c1eb80c4e2e 100644 --- a/packages/react-components/react-text/src/components/presets/Subtitle2/Subtitle2.tsx +++ b/packages/react-components/react-text/src/components/presets/Subtitle2/Subtitle2.tsx @@ -1,26 +1,13 @@ import type { FunctionComponent } from 'react'; -import { makeStyles } from '@griffel/react'; import { createPreset } from '../createPreset'; -import { SlotClassNames } from '@fluentui/react-utilities'; -import type { TextSlots, TextPresetProps } from '../../Text/Text.types'; -import { typographyStyles } from '@fluentui/react-theme'; - -export const subtitle2ClassNames: SlotClassNames = { - root: 'fui-Subtitle2', -}; - -/** - * Styles for the root slot - */ -const useStyles = makeStyles({ - root: typographyStyles.subtitle2, -}); +import type { TextPresetProps } from '../../Text/Text.types'; +import { subtitle2ClassNames, useSubtitle2Styles } from './useSubtitle2Styles.styles'; /** * Text preset component for the Subtitle2 typography variant */ export const Subtitle2: FunctionComponent = createPreset({ - useStyles, + useStyles: useSubtitle2Styles, className: subtitle2ClassNames.root, displayName: 'Subtitle2', }); diff --git a/packages/react-components/react-text/src/components/presets/Subtitle2/index.ts b/packages/react-components/react-text/src/components/presets/Subtitle2/index.ts index 35d7ce8145e88..92a8c98a88cb2 100644 --- a/packages/react-components/react-text/src/components/presets/Subtitle2/index.ts +++ b/packages/react-components/react-text/src/components/presets/Subtitle2/index.ts @@ -1 +1,2 @@ export * from './Subtitle2'; +export { subtitle2ClassNames } from './useSubtitle2Styles.styles'; diff --git a/packages/react-components/react-text/src/components/presets/Subtitle2/useSubtitle2Styles.styles.ts b/packages/react-components/react-text/src/components/presets/Subtitle2/useSubtitle2Styles.styles.ts new file mode 100644 index 0000000000000..9ce5de3a44f6c --- /dev/null +++ b/packages/react-components/react-text/src/components/presets/Subtitle2/useSubtitle2Styles.styles.ts @@ -0,0 +1,15 @@ +import { makeStyles } from '@griffel/react'; +import { SlotClassNames } from '@fluentui/react-utilities'; +import type { TextSlots } from '../../Text/Text.types'; +import { typographyStyles } from '@fluentui/react-theme'; + +export const subtitle2ClassNames: SlotClassNames = { + root: 'fui-Subtitle2', +}; + +/** + * Styles for the root slot + */ +export const useSubtitle2Styles = makeStyles({ + root: typographyStyles.subtitle2, +}); diff --git a/packages/react-components/react-text/src/components/presets/Subtitle2Stronger/Subtitle2Stronger.tsx b/packages/react-components/react-text/src/components/presets/Subtitle2Stronger/Subtitle2Stronger.tsx index 7b4c7dfc9856b..391b272a37e54 100644 --- a/packages/react-components/react-text/src/components/presets/Subtitle2Stronger/Subtitle2Stronger.tsx +++ b/packages/react-components/react-text/src/components/presets/Subtitle2Stronger/Subtitle2Stronger.tsx @@ -1,26 +1,13 @@ import type { FunctionComponent } from 'react'; -import { makeStyles } from '@griffel/react'; import { createPreset } from '../createPreset'; -import { SlotClassNames } from '@fluentui/react-utilities'; -import type { TextSlots, TextPresetProps } from '../../Text/Text.types'; -import { typographyStyles } from '@fluentui/react-theme'; - -export const subtitle2StrongerClassNames: SlotClassNames = { - root: 'fui-Subtitle2Stronger', -}; - -/** - * Styles for the root slot - */ -const useStyles = makeStyles({ - root: typographyStyles.subtitle2Stronger, -}); +import type { TextPresetProps } from '../../Text/Text.types'; +import { subtitle2StrongerClassNames, useSubtitle2StrongerStyles } from './useSubtitle2Stronger.styles'; /** * Text preset component for the Subtitle2Stronger typography variant */ export const Subtitle2Stronger: FunctionComponent = createPreset({ - useStyles, + useStyles: useSubtitle2StrongerStyles, className: subtitle2StrongerClassNames.root, displayName: 'Subtitle2Stronger', }); diff --git a/packages/react-components/react-text/src/components/presets/Subtitle2Stronger/index.ts b/packages/react-components/react-text/src/components/presets/Subtitle2Stronger/index.ts index 44c03d2ae31aa..4713f1e409743 100644 --- a/packages/react-components/react-text/src/components/presets/Subtitle2Stronger/index.ts +++ b/packages/react-components/react-text/src/components/presets/Subtitle2Stronger/index.ts @@ -1 +1,2 @@ export * from './Subtitle2Stronger'; +export { subtitle2StrongerClassNames } from './useSubtitle2Stronger.styles'; diff --git a/packages/react-components/react-text/src/components/presets/Subtitle2Stronger/useSubtitle2Stronger.styles.ts b/packages/react-components/react-text/src/components/presets/Subtitle2Stronger/useSubtitle2Stronger.styles.ts new file mode 100644 index 0000000000000..a0fbdcfb1b708 --- /dev/null +++ b/packages/react-components/react-text/src/components/presets/Subtitle2Stronger/useSubtitle2Stronger.styles.ts @@ -0,0 +1,15 @@ +import { makeStyles } from '@griffel/react'; +import { SlotClassNames } from '@fluentui/react-utilities'; +import type { TextSlots } from '../../Text/Text.types'; +import { typographyStyles } from '@fluentui/react-theme'; + +export const subtitle2StrongerClassNames: SlotClassNames = { + root: 'fui-Subtitle2Stronger', +}; + +/** + * Styles for the root slot + */ +export const useSubtitle2StrongerStyles = makeStyles({ + root: typographyStyles.subtitle2Stronger, +}); diff --git a/packages/react-components/react-text/src/components/presets/Title1/Title1.tsx b/packages/react-components/react-text/src/components/presets/Title1/Title1.tsx index d9e9e338d59b9..5de7152c0f910 100644 --- a/packages/react-components/react-text/src/components/presets/Title1/Title1.tsx +++ b/packages/react-components/react-text/src/components/presets/Title1/Title1.tsx @@ -1,26 +1,13 @@ import type { FunctionComponent } from 'react'; -import { makeStyles } from '@griffel/react'; import { createPreset } from '../createPreset'; -import { SlotClassNames } from '@fluentui/react-utilities'; -import type { TextSlots, TextPresetProps } from '../../Text/Text.types'; -import { typographyStyles } from '@fluentui/react-theme'; - -export const title1ClassNames: SlotClassNames = { - root: 'fui-Title1', -}; - -/** - * Styles for the root slot - */ -const useStyles = makeStyles({ - root: typographyStyles.title1, -}); +import type { TextPresetProps } from '../../Text/Text.types'; +import { title1ClassNames, useTitle1Styles } from './useTitle1Styles.styles'; /** * Text preset component for the Title 1 typography variant */ export const Title1: FunctionComponent = createPreset({ - useStyles, + useStyles: useTitle1Styles, className: title1ClassNames.root, displayName: 'Title1', }); diff --git a/packages/react-components/react-text/src/components/presets/Title1/index.ts b/packages/react-components/react-text/src/components/presets/Title1/index.ts index b32f898402c89..acb670600bf46 100644 --- a/packages/react-components/react-text/src/components/presets/Title1/index.ts +++ b/packages/react-components/react-text/src/components/presets/Title1/index.ts @@ -1 +1,2 @@ export * from './Title1'; +export { title1ClassNames } from './useTitle1Styles.styles'; diff --git a/packages/react-components/react-text/src/components/presets/Title1/useTitle1Styles.styles.ts b/packages/react-components/react-text/src/components/presets/Title1/useTitle1Styles.styles.ts new file mode 100644 index 0000000000000..126f5eda5accf --- /dev/null +++ b/packages/react-components/react-text/src/components/presets/Title1/useTitle1Styles.styles.ts @@ -0,0 +1,15 @@ +import { makeStyles } from '@griffel/react'; +import { SlotClassNames } from '@fluentui/react-utilities'; +import type { TextSlots } from '../../Text/Text.types'; +import { typographyStyles } from '@fluentui/react-theme'; + +export const title1ClassNames: SlotClassNames = { + root: 'fui-Title1', +}; + +/** + * Styles for the root slot + */ +export const useTitle1Styles = makeStyles({ + root: typographyStyles.title1, +}); diff --git a/packages/react-components/react-text/src/components/presets/Title2/Title2.tsx b/packages/react-components/react-text/src/components/presets/Title2/Title2.tsx index 33eb812b34897..9b3dce66f6a85 100644 --- a/packages/react-components/react-text/src/components/presets/Title2/Title2.tsx +++ b/packages/react-components/react-text/src/components/presets/Title2/Title2.tsx @@ -1,26 +1,13 @@ import type { FunctionComponent } from 'react'; -import { makeStyles } from '@griffel/react'; import { createPreset } from '../createPreset'; -import { SlotClassNames } from '@fluentui/react-utilities'; -import type { TextSlots, TextPresetProps } from '../../Text/Text.types'; -import { typographyStyles } from '@fluentui/react-theme'; - -export const title2ClassNames: SlotClassNames = { - root: 'fui-Title2', -}; - -/** - * Styles for the root slot - */ -const useStyles = makeStyles({ - root: typographyStyles.title2, -}); +import type { TextPresetProps } from '../../Text/Text.types'; +import { title2ClassNames, useTitle2Styles } from './useTitle2Styles.styles'; /** * Text preset component for the Title 2 typography variant */ export const Title2: FunctionComponent = createPreset({ - useStyles, + useStyles: useTitle2Styles, className: title2ClassNames.root, displayName: 'Title2', }); diff --git a/packages/react-components/react-text/src/components/presets/Title2/index.ts b/packages/react-components/react-text/src/components/presets/Title2/index.ts index e6db0795e90e6..0fe89ad1bf5c3 100644 --- a/packages/react-components/react-text/src/components/presets/Title2/index.ts +++ b/packages/react-components/react-text/src/components/presets/Title2/index.ts @@ -1 +1,2 @@ export * from './Title2'; +export { title2ClassNames } from './useTitle2Styles.styles'; diff --git a/packages/react-components/react-text/src/components/presets/Title2/useTitle2Styles.styles.ts b/packages/react-components/react-text/src/components/presets/Title2/useTitle2Styles.styles.ts new file mode 100644 index 0000000000000..0d6a78592c958 --- /dev/null +++ b/packages/react-components/react-text/src/components/presets/Title2/useTitle2Styles.styles.ts @@ -0,0 +1,15 @@ +import { makeStyles } from '@griffel/react'; +import { SlotClassNames } from '@fluentui/react-utilities'; +import type { TextSlots } from '../../Text/Text.types'; +import { typographyStyles } from '@fluentui/react-theme'; + +export const title2ClassNames: SlotClassNames = { + root: 'fui-Title2', +}; + +/** + * Styles for the root slot + */ +export const useTitle2Styles = makeStyles({ + root: typographyStyles.title2, +}); diff --git a/packages/react-components/react-text/src/components/presets/Title3/Title3.tsx b/packages/react-components/react-text/src/components/presets/Title3/Title3.tsx index db0ec281c5bcd..4144d1239aea8 100644 --- a/packages/react-components/react-text/src/components/presets/Title3/Title3.tsx +++ b/packages/react-components/react-text/src/components/presets/Title3/Title3.tsx @@ -1,26 +1,13 @@ import type { FunctionComponent } from 'react'; -import { makeStyles } from '@griffel/react'; import { createPreset } from '../createPreset'; -import { SlotClassNames } from '@fluentui/react-utilities'; -import type { TextSlots, TextPresetProps } from '../../Text/Text.types'; -import { typographyStyles } from '@fluentui/react-theme'; - -export const title3ClassNames: SlotClassNames = { - root: 'fui-Title3', -}; - -/** - * Styles for the root slot - */ -const useStyles = makeStyles({ - root: typographyStyles.title3, -}); +import type { TextPresetProps } from '../../Text/Text.types'; +import { title3ClassNames, useTitle3Styles } from './useTitle3Styles.styles'; /** * Text preset component for the Title 3 typography variant */ export const Title3: FunctionComponent = createPreset({ - useStyles, + useStyles: useTitle3Styles, className: title3ClassNames.root, displayName: 'Title3', }); diff --git a/packages/react-components/react-text/src/components/presets/Title3/index.ts b/packages/react-components/react-text/src/components/presets/Title3/index.ts index ad1eaed1b185b..96e536b87a53e 100644 --- a/packages/react-components/react-text/src/components/presets/Title3/index.ts +++ b/packages/react-components/react-text/src/components/presets/Title3/index.ts @@ -1 +1,2 @@ export * from './Title3'; +export { title3ClassNames } from './useTitle3Styles.styles'; diff --git a/packages/react-components/react-text/src/components/presets/Title3/useTitle3Styles.styles.ts b/packages/react-components/react-text/src/components/presets/Title3/useTitle3Styles.styles.ts new file mode 100644 index 0000000000000..26996a6eb0209 --- /dev/null +++ b/packages/react-components/react-text/src/components/presets/Title3/useTitle3Styles.styles.ts @@ -0,0 +1,15 @@ +import { makeStyles } from '@griffel/react'; +import { SlotClassNames } from '@fluentui/react-utilities'; +import type { TextSlots } from '../../Text/Text.types'; +import { typographyStyles } from '@fluentui/react-theme'; + +export const title3ClassNames: SlotClassNames = { + root: 'fui-Title3', +}; + +/** + * Styles for the root slot + */ +export const useTitle3Styles = makeStyles({ + root: typographyStyles.title3, +}); diff --git a/packages/react-components/react-text/src/testing/isConformant.ts b/packages/react-components/react-text/src/testing/isConformant.ts index 55b0ea70534bb..4e3ee30c5804c 100644 --- a/packages/react-components/react-text/src/testing/isConformant.ts +++ b/packages/react-components/react-text/src/testing/isConformant.ts @@ -6,6 +6,7 @@ export function isConformant( testInfo: Omit, 'componentPath'> & { componentPath?: string }, ) { const defaultOptions: Partial> = { + tsConfig: { configName: 'tsconfig.spec.json' }, componentPath: require.main?.filename.replace('.test', ''), extraTests: griffelTests as TestObject, testOptions: { diff --git a/packages/react-components/react-textarea/jest.config.js b/packages/react-components/react-textarea/jest.config.js index d5255744ad5b2..01e8d7422ca9b 100644 --- a/packages/react-components/react-textarea/jest.config.js +++ b/packages/react-components/react-textarea/jest.config.js @@ -9,7 +9,7 @@ module.exports = { globals: { 'ts-jest': { tsconfig: '/tsconfig.spec.json', - diagnostics: false, + isolatedModules: true, }, }, transform: { diff --git a/packages/react-components/react-textarea/src/testing/isConformant.ts b/packages/react-components/react-textarea/src/testing/isConformant.ts index 77f88408cbd83..a3d988f29a172 100644 --- a/packages/react-components/react-textarea/src/testing/isConformant.ts +++ b/packages/react-components/react-textarea/src/testing/isConformant.ts @@ -6,6 +6,7 @@ export function isConformant( testInfo: Omit, 'componentPath'> & { componentPath?: string }, ) { const defaultOptions: Partial> = { + tsConfig: { configName: 'tsconfig.spec.json' }, componentPath: require.main?.filename.replace('.test', ''), extraTests: griffelTests as TestObject, }; diff --git a/packages/react-components/react-theme-sass/jest.config.js b/packages/react-components/react-theme-sass/jest.config.js index c87480044d94a..e07cac11ede90 100644 --- a/packages/react-components/react-theme-sass/jest.config.js +++ b/packages/react-components/react-theme-sass/jest.config.js @@ -9,7 +9,7 @@ module.exports = { globals: { 'ts-jest': { tsconfig: '/tsconfig.spec.json', - diagnostics: false, + isolatedModules: true, }, }, testEnvironment: 'jest-environment-node-single-context', diff --git a/packages/react-components/react-theme/jest.config.js b/packages/react-components/react-theme/jest.config.js index ff0a627f6eb09..c7c0c9b227b41 100644 --- a/packages/react-components/react-theme/jest.config.js +++ b/packages/react-components/react-theme/jest.config.js @@ -9,7 +9,7 @@ module.exports = { globals: { 'ts-jest': { tsconfig: '/tsconfig.spec.json', - diagnostics: false, + isolatedModules: true, }, }, transform: { diff --git a/packages/react-components/react-toolbar/jest.config.js b/packages/react-components/react-toolbar/jest.config.js index f3bfbe21ad217..1246913f97d58 100644 --- a/packages/react-components/react-toolbar/jest.config.js +++ b/packages/react-components/react-toolbar/jest.config.js @@ -9,7 +9,7 @@ module.exports = { globals: { 'ts-jest': { tsconfig: '/tsconfig.spec.json', - diagnostics: false, + isolatedModules: true, }, }, transform: { 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 4a454af882ae0..68ed049c95d20 100644 --- a/packages/react-components/react-toolbar/src/components/Toolbar/Toolbar.tsx +++ b/packages/react-components/react-toolbar/src/components/Toolbar/Toolbar.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import { useToolbar_unstable } from './useToolbar'; import { renderToolbar_unstable } from './renderToolbar'; -import { useToolbarStyles_unstable } from './useToolbarStyles'; +import { useToolbarStyles_unstable } from './useToolbarStyles.styles'; import type { ToolbarProps } from './Toolbar.types'; import type { ForwardRefComponent } from '@fluentui/react-utilities'; import { useToolbarContextValues_unstable } from './useToolbarContextValues'; diff --git a/packages/react-components/react-toolbar/src/components/Toolbar/index.ts b/packages/react-components/react-toolbar/src/components/Toolbar/index.ts index f95378e9bd6b2..69923b5119d08 100644 --- a/packages/react-components/react-toolbar/src/components/Toolbar/index.ts +++ b/packages/react-components/react-toolbar/src/components/Toolbar/index.ts @@ -2,4 +2,4 @@ export * from './Toolbar'; export * from './Toolbar.types'; export * from './renderToolbar'; export * from './useToolbar'; -export * from './useToolbarStyles'; +export * from './useToolbarStyles.styles'; diff --git a/packages/react-components/react-toolbar/src/components/Toolbar/useToolbarStyles.ts b/packages/react-components/react-toolbar/src/components/Toolbar/useToolbarStyles.styles.ts similarity index 100% rename from packages/react-components/react-toolbar/src/components/Toolbar/useToolbarStyles.ts rename to packages/react-components/react-toolbar/src/components/Toolbar/useToolbarStyles.styles.ts 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 1d4db5f7d309c..1d08bc07b92b7 100644 --- a/packages/react-components/react-toolbar/src/components/ToolbarButton/ToolbarButton.tsx +++ b/packages/react-components/react-toolbar/src/components/ToolbarButton/ToolbarButton.tsx @@ -2,7 +2,7 @@ import * as React from 'react'; import type { ToolbarButtonProps } from './ToolbarButton.types'; import type { ForwardRefComponent } from '@fluentui/react-utilities'; import { renderButton_unstable } from '@fluentui/react-button'; -import { useToolbarButtonStyles_unstable } from './useToolbarButtonStyles'; +import { useToolbarButtonStyles_unstable } from './useToolbarButtonStyles.styles'; import { useToolbarButton_unstable } from './useToolbarButton'; import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts'; diff --git a/packages/react-components/react-toolbar/src/components/ToolbarButton/index.ts b/packages/react-components/react-toolbar/src/components/ToolbarButton/index.ts index ea2b104a69c55..07f7480541e08 100644 --- a/packages/react-components/react-toolbar/src/components/ToolbarButton/index.ts +++ b/packages/react-components/react-toolbar/src/components/ToolbarButton/index.ts @@ -1,4 +1,4 @@ export * from './ToolbarButton'; export * from './ToolbarButton.types'; export * from './useToolbarButton'; -export * from './useToolbarButtonStyles'; +export * from './useToolbarButtonStyles.styles'; diff --git a/packages/react-components/react-toolbar/src/components/ToolbarButton/useToolbarButtonStyles.ts b/packages/react-components/react-toolbar/src/components/ToolbarButton/useToolbarButtonStyles.styles.ts similarity index 100% rename from packages/react-components/react-toolbar/src/components/ToolbarButton/useToolbarButtonStyles.ts rename to packages/react-components/react-toolbar/src/components/ToolbarButton/useToolbarButtonStyles.styles.ts 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 2d782d28f5d7d..95e8a33a4c454 100644 --- a/packages/react-components/react-toolbar/src/components/ToolbarDivider/ToolbarDivider.tsx +++ b/packages/react-components/react-toolbar/src/components/ToolbarDivider/ToolbarDivider.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import { useToolbarDividerStyles_unstable } from './useToolbarDividerStyles'; +import { useToolbarDividerStyles_unstable } from './useToolbarDividerStyles.styles'; import type { ToolbarDividerProps } from './ToolbarDivider.types'; import type { ForwardRefComponent } from '@fluentui/react-utilities'; import { renderDivider_unstable } from '@fluentui/react-divider'; diff --git a/packages/react-components/react-toolbar/src/components/ToolbarDivider/index.ts b/packages/react-components/react-toolbar/src/components/ToolbarDivider/index.ts index 3359e5be98b32..0ebab6cffe848 100644 --- a/packages/react-components/react-toolbar/src/components/ToolbarDivider/index.ts +++ b/packages/react-components/react-toolbar/src/components/ToolbarDivider/index.ts @@ -1,4 +1,4 @@ export * from './ToolbarDivider'; export * from './ToolbarDivider.types'; -export * from './useToolbarDividerStyles'; +export * from './useToolbarDividerStyles.styles'; export * from './useToolbarDivider'; diff --git a/packages/react-components/react-toolbar/src/components/ToolbarDivider/useToolbarDividerStyles.ts b/packages/react-components/react-toolbar/src/components/ToolbarDivider/useToolbarDividerStyles.styles.ts similarity index 100% rename from packages/react-components/react-toolbar/src/components/ToolbarDivider/useToolbarDividerStyles.ts rename to packages/react-components/react-toolbar/src/components/ToolbarDivider/useToolbarDividerStyles.styles.ts 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 c04c294b3d593..4bddc84627086 100644 --- a/packages/react-components/react-toolbar/src/components/ToolbarGroup/ToolbarGroup.tsx +++ b/packages/react-components/react-toolbar/src/components/ToolbarGroup/ToolbarGroup.tsx @@ -2,7 +2,7 @@ import * as React from 'react'; import type { ToolbarGroupProps } from './ToolbarGroup.types'; import type { ForwardRefComponent } from '@fluentui/react-utilities'; import { useToolbarGroup_unstable } from './useToolbarGroup'; -import { useToolbarGroupStyles_unstable } from './useToolbarGroupStyles'; +import { useToolbarGroupStyles_unstable } from './useToolbarGroupStyles.styles'; import { renderToolbarGroup_unstable } from './renderToolbarGroup'; import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts'; diff --git a/packages/react-components/react-toolbar/src/components/ToolbarGroup/index.ts b/packages/react-components/react-toolbar/src/components/ToolbarGroup/index.ts index 730484358f752..66bd4a383dbdc 100644 --- a/packages/react-components/react-toolbar/src/components/ToolbarGroup/index.ts +++ b/packages/react-components/react-toolbar/src/components/ToolbarGroup/index.ts @@ -1,5 +1,5 @@ export * from './ToolbarGroup'; export * from './ToolbarGroup.types'; export * from './useToolbarGroup'; -export * from './useToolbarGroupStyles'; +export * from './useToolbarGroupStyles.styles'; export * from './renderToolbarGroup'; diff --git a/packages/react-components/react-toolbar/src/components/ToolbarGroup/useToolbarGroupStyles.ts b/packages/react-components/react-toolbar/src/components/ToolbarGroup/useToolbarGroupStyles.styles.ts similarity index 100% rename from packages/react-components/react-toolbar/src/components/ToolbarGroup/useToolbarGroupStyles.ts rename to packages/react-components/react-toolbar/src/components/ToolbarGroup/useToolbarGroupStyles.styles.ts 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 89c26fec2c496..af670034ce45d 100644 --- a/packages/react-components/react-toolbar/src/components/ToolbarRadioButton/ToolbarRadioButton.tsx +++ b/packages/react-components/react-toolbar/src/components/ToolbarRadioButton/ToolbarRadioButton.tsx @@ -3,7 +3,7 @@ import type { ToolbarRadioButtonProps } from './ToolbarRadioButton.types'; 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 { useToolbarRadioButtonStyles_unstable } from './useToolbarRadioButtonStyles.styles'; import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts'; /** diff --git a/packages/react-components/react-toolbar/src/components/ToolbarRadioButton/index.ts b/packages/react-components/react-toolbar/src/components/ToolbarRadioButton/index.ts index 91f7efc3c7502..b3e066045727e 100644 --- a/packages/react-components/react-toolbar/src/components/ToolbarRadioButton/index.ts +++ b/packages/react-components/react-toolbar/src/components/ToolbarRadioButton/index.ts @@ -1,4 +1,4 @@ export * from './ToolbarRadioButton'; export * from './ToolbarRadioButton.types'; export * from './useToolbarRadioButton'; -export * from './useToolbarRadioButtonStyles'; +export * from './useToolbarRadioButtonStyles.styles'; diff --git a/packages/react-components/react-toolbar/src/components/ToolbarRadioButton/useToolbarRadioButtonStyles.ts b/packages/react-components/react-toolbar/src/components/ToolbarRadioButton/useToolbarRadioButtonStyles.styles.ts similarity index 100% rename from packages/react-components/react-toolbar/src/components/ToolbarRadioButton/useToolbarRadioButtonStyles.ts rename to packages/react-components/react-toolbar/src/components/ToolbarRadioButton/useToolbarRadioButtonStyles.styles.ts 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 de23a76ef0b34..446e767906075 100644 --- a/packages/react-components/react-toolbar/src/components/ToolbarToggleButton/ToolbarToggleButton.tsx +++ b/packages/react-components/react-toolbar/src/components/ToolbarToggleButton/ToolbarToggleButton.tsx @@ -3,7 +3,7 @@ import type { ToolbarToggleButtonProps } from './ToolbarToggleButton.types'; 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 { useToolbarToggleButtonStyles_unstable } from './useToolbarToggleButtonStyles.styles'; import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts'; /** diff --git a/packages/react-components/react-toolbar/src/components/ToolbarToggleButton/index.ts b/packages/react-components/react-toolbar/src/components/ToolbarToggleButton/index.ts index ad4700e597dcc..cfd874ac1e2ce 100644 --- a/packages/react-components/react-toolbar/src/components/ToolbarToggleButton/index.ts +++ b/packages/react-components/react-toolbar/src/components/ToolbarToggleButton/index.ts @@ -1,4 +1,4 @@ export * from './ToolbarToggleButton'; export * from './ToolbarToggleButton.types'; export * from './useToolbarToggleButton'; -export * from './useToolbarToggleButtonStyles'; +export * from './useToolbarToggleButtonStyles.styles'; diff --git a/packages/react-components/react-toolbar/src/components/ToolbarToggleButton/useToolbarToggleButtonStyles.ts b/packages/react-components/react-toolbar/src/components/ToolbarToggleButton/useToolbarToggleButtonStyles.styles.ts similarity index 100% rename from packages/react-components/react-toolbar/src/components/ToolbarToggleButton/useToolbarToggleButtonStyles.ts rename to packages/react-components/react-toolbar/src/components/ToolbarToggleButton/useToolbarToggleButtonStyles.styles.ts diff --git a/packages/react-components/react-toolbar/src/testing/isConformant.ts b/packages/react-components/react-toolbar/src/testing/isConformant.ts index 77f88408cbd83..a3d988f29a172 100644 --- a/packages/react-components/react-toolbar/src/testing/isConformant.ts +++ b/packages/react-components/react-toolbar/src/testing/isConformant.ts @@ -6,6 +6,7 @@ export function isConformant( testInfo: Omit, 'componentPath'> & { componentPath?: string }, ) { const defaultOptions: Partial> = { + tsConfig: { configName: 'tsconfig.spec.json' }, componentPath: require.main?.filename.replace('.test', ''), extraTests: griffelTests as TestObject, }; diff --git a/packages/react-components/react-tooltip/jest.config.js b/packages/react-components/react-tooltip/jest.config.js index 3c184b0adf74f..0a11228e23599 100644 --- a/packages/react-components/react-tooltip/jest.config.js +++ b/packages/react-components/react-tooltip/jest.config.js @@ -9,7 +9,7 @@ module.exports = { globals: { 'ts-jest': { tsconfig: '/tsconfig.spec.json', - diagnostics: false, + isolatedModules: true, }, }, transform: { diff --git a/packages/react-components/react-tooltip/src/testing/isConformant.ts b/packages/react-components/react-tooltip/src/testing/isConformant.ts index b94dff389b235..34ed187e09864 100644 --- a/packages/react-components/react-tooltip/src/testing/isConformant.ts +++ b/packages/react-components/react-tooltip/src/testing/isConformant.ts @@ -5,6 +5,7 @@ export function isConformant( testInfo: Omit, 'componentPath'> & { componentPath?: string }, ) { const defaultOptions: Partial> = { + tsConfig: { configName: 'tsconfig.spec.json' }, componentPath: require.main?.filename.replace('.test', ''), }; diff --git a/packages/react-components/react-tree/etc/react-tree.api.md b/packages/react-components/react-tree/etc/react-tree.api.md index 1635f372aff3f..0dd460d3d5810 100644 --- a/packages/react-components/react-tree/etc/react-tree.api.md +++ b/packages/react-components/react-tree/etc/react-tree.api.md @@ -30,33 +30,42 @@ import type { SlotClassNames } from '@fluentui/react-utilities'; import { SlotRenderFunction } from '@fluentui/react-utilities'; // @public -export const flattenTree_unstable: (items: NestedTreeItem[]) => FlatTreeItemProps[]; +export const flattenTree_unstable: >(items: NestedTreeItem[]) => FlattenedTreeItem[]; // @public -export type FlatTree = { - getTreeProps(): FlatTreeProps; - navigate(data: TreeNavigationData_unstable): void; - getNextNavigableItem(visibleItems: FlatTreeItem[], data: TreeNavigationData_unstable): FlatTreeItem | undefined; - items(): IterableIterator>; +export type FlatTree = FlatTreeItemProps> = { + getTreeProps(): FlatTreeProps; + navigate(data: TreeNavigationData_unstable): void; + getNextNavigableItem(visibleItems: FlatTreeItem[], data: TreeNavigationData_unstable): FlatTreeItem | undefined; + items(): IterableIterator>; }; -// @public (undocumented) -export type FlatTreeItem = Readonly>; +// @public +export type FlatTreeItem = FlatTreeItemProps> = { + index: number; + level: number; + childrenSize: number; + value: Props['value']; + parentValue: Props['parentValue']; + ref: React_2.RefObject; + getTreeItemProps(): Required> & Omit; +}; // @public (undocumented) -export type FlatTreeItemProps = Omit & { +export type FlatTreeItemProps = TreeItemProps & { value: Value; parentValue?: Value; }; // @public (undocumented) -export type FlatTreeProps = Required, 'openItems' | 'onOpenChange' | 'onNavigation_unstable'> & { +export type FlatTreeProps = Required, 'openItems' | 'onOpenChange' | 'onNavigation_unstable'>> & { ref: React_2.Ref; -}>; + openItems: ImmutableSet; +}; // @public (undocumented) -export type NestedTreeItem = Omit, 'subtree'> & { - subtree?: NestedTreeItem[]; +export type NestedTreeItem> = Omit & { + subtree?: NestedTreeItem[]; }; // @public (undocumented) @@ -281,7 +290,7 @@ export type TreeSlots = { export type TreeState = ComponentState & TreeContextValue; // @public -export function useFlatTree_unstable(flatTreeItemProps: FlatTreeItemProps[], options?: Pick, 'openItems' | 'defaultOpenItems' | 'onOpenChange' | 'onNavigation_unstable'>): FlatTree; +export function useFlatTree_unstable = FlatTreeItemProps>(flatTreeItemProps: Props[], options?: FlatTreeOptions): FlatTree; // @public export const useTree_unstable: (props: TreeProps, ref: React_2.Ref) => TreeState; diff --git a/packages/react-components/react-tree/jest.config.js b/packages/react-components/react-tree/jest.config.js index 387ed673bf25f..164d5ddfb8b50 100644 --- a/packages/react-components/react-tree/jest.config.js +++ b/packages/react-components/react-tree/jest.config.js @@ -9,7 +9,7 @@ module.exports = { globals: { 'ts-jest': { tsconfig: '/tsconfig.spec.json', - diagnostics: false, + isolatedModules: true, }, }, transform: { diff --git a/packages/react-components/react-tree/src/components/Tree/Tree.tsx b/packages/react-components/react-tree/src/components/Tree/Tree.tsx index 2c5a4c5e5a173..ee9016afd7607 100644 --- a/packages/react-components/react-tree/src/components/Tree/Tree.tsx +++ b/packages/react-components/react-tree/src/components/Tree/Tree.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import { useTree_unstable } from './useTree'; import { renderTree_unstable } from './renderTree'; -import { useTreeStyles_unstable } from './useTreeStyles'; +import { useTreeStyles_unstable } from './useTreeStyles.styles'; import type { TreeProps } from './Tree.types'; import type { ForwardRefComponent } from '@fluentui/react-utilities'; import { useTreeContextValues_unstable } from './useTreeContextValues'; diff --git a/packages/react-components/react-tree/src/components/Tree/index.ts b/packages/react-components/react-tree/src/components/Tree/index.ts index 74cb6cbad4ce4..d20cc73b01b66 100644 --- a/packages/react-components/react-tree/src/components/Tree/index.ts +++ b/packages/react-components/react-tree/src/components/Tree/index.ts @@ -2,5 +2,5 @@ export * from './Tree'; export * from './Tree.types'; export * from './renderTree'; export * from './useTree'; -export * from './useTreeStyles'; +export * from './useTreeStyles.styles'; export * from './useTreeContextValues'; diff --git a/packages/react-components/react-tree/src/components/Tree/useTreeStyles.ts b/packages/react-components/react-tree/src/components/Tree/useTreeStyles.styles.ts similarity index 100% rename from packages/react-components/react-tree/src/components/Tree/useTreeStyles.ts rename to packages/react-components/react-tree/src/components/Tree/useTreeStyles.styles.ts diff --git a/packages/react-components/react-tree/src/components/TreeItem/TreeItem.test.tsx b/packages/react-components/react-tree/src/components/TreeItem/TreeItem.test.tsx index 0a5646e496787..4a79c204c7e02 100644 --- a/packages/react-components/react-tree/src/components/TreeItem/TreeItem.test.tsx +++ b/packages/react-components/react-tree/src/components/TreeItem/TreeItem.test.tsx @@ -3,7 +3,7 @@ import { render } from '@testing-library/react'; import { TreeItem } from './TreeItem'; import { isConformant } from '../../testing/isConformant'; import { TreeItemProps } from './TreeItem.types'; -import { treeItemClassNames } from './useTreeItemStyles'; +import { treeItemClassNames } from './useTreeItemStyles.styles'; describe('TreeItem', () => { isConformant({ diff --git a/packages/react-components/react-tree/src/components/TreeItem/TreeItem.tsx b/packages/react-components/react-tree/src/components/TreeItem/TreeItem.tsx index 036727d24ec97..9d4e8ac7df285 100644 --- a/packages/react-components/react-tree/src/components/TreeItem/TreeItem.tsx +++ b/packages/react-components/react-tree/src/components/TreeItem/TreeItem.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import { useTreeItem_unstable } from './useTreeItem'; import { renderTreeItem_unstable } from './renderTreeItem'; -import { useTreeItemStyles_unstable } from './useTreeItemStyles'; +import { useTreeItemStyles_unstable } from './useTreeItemStyles.styles'; import type { TreeItemProps } from './TreeItem.types'; import type { ForwardRefComponent } from '@fluentui/react-utilities'; import { useTreeItemContextValues_unstable } from './useTreeItemContextValues'; diff --git a/packages/react-components/react-tree/src/components/TreeItem/index.ts b/packages/react-components/react-tree/src/components/TreeItem/index.ts index 782392551a2c7..13edf795ebafd 100644 --- a/packages/react-components/react-tree/src/components/TreeItem/index.ts +++ b/packages/react-components/react-tree/src/components/TreeItem/index.ts @@ -2,4 +2,4 @@ export * from './TreeItem'; export * from './TreeItem.types'; export * from './renderTreeItem'; export * from './useTreeItem'; -export * from './useTreeItemStyles'; +export * from './useTreeItemStyles.styles'; diff --git a/packages/react-components/react-tree/src/components/TreeItem/useTreeItem.tsx b/packages/react-components/react-tree/src/components/TreeItem/useTreeItem.tsx index ea8479cd00454..0fc5c07644517 100644 --- a/packages/react-components/react-tree/src/components/TreeItem/useTreeItem.tsx +++ b/packages/react-components/react-tree/src/components/TreeItem/useTreeItem.tsx @@ -3,7 +3,7 @@ import { getNativeElementProps, isResolvedShorthand, resolveShorthand, useId } f import { ChevronRight12Regular } from '@fluentui/react-icons'; import { useFluent_unstable } from '@fluentui/react-shared-contexts'; import { useEventCallback } from '@fluentui/react-utilities'; -import { expandIconInlineStyles } from './useTreeItemStyles'; +import { expandIconInlineStyles } from './useTreeItemStyles.styles'; import { ArrowDown, ArrowLeft, ArrowRight, ArrowUp, End, Enter, Home } from '@fluentui/keyboard-keys'; import { useMergedRefs } from '@fluentui/react-utilities'; import { elementContains } from '@fluentui/react-portal'; diff --git a/packages/react-components/react-tree/src/components/TreeItem/useTreeItemStyles.ts b/packages/react-components/react-tree/src/components/TreeItem/useTreeItemStyles.styles.ts similarity index 100% rename from packages/react-components/react-tree/src/components/TreeItem/useTreeItemStyles.ts rename to packages/react-components/react-tree/src/components/TreeItem/useTreeItemStyles.styles.ts diff --git a/packages/react-components/react-tree/src/components/TreeItemLayout/TreeItemLayout.tsx b/packages/react-components/react-tree/src/components/TreeItemLayout/TreeItemLayout.tsx index 7de4b11e7d2a2..07b36cf2917db 100644 --- a/packages/react-components/react-tree/src/components/TreeItemLayout/TreeItemLayout.tsx +++ b/packages/react-components/react-tree/src/components/TreeItemLayout/TreeItemLayout.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import { useTreeItemLayout_unstable } from './useTreeItemLayout'; import { renderTreeItemLayout_unstable } from './renderTreeItemLayout'; -import { useTreeItemLayoutStyles_unstable } from './useTreeItemLayoutStyles'; +import { useTreeItemLayoutStyles_unstable } from './useTreeItemLayoutStyles.styles'; import type { TreeItemLayoutProps } from './TreeItemLayout.types'; import type { ForwardRefComponent } from '@fluentui/react-utilities'; diff --git a/packages/react-components/react-tree/src/components/TreeItemLayout/index.ts b/packages/react-components/react-tree/src/components/TreeItemLayout/index.ts index dde92733e51c3..106a4ff9418a7 100644 --- a/packages/react-components/react-tree/src/components/TreeItemLayout/index.ts +++ b/packages/react-components/react-tree/src/components/TreeItemLayout/index.ts @@ -2,4 +2,4 @@ export * from './TreeItemLayout'; export * from './TreeItemLayout.types'; export * from './renderTreeItemLayout'; export * from './useTreeItemLayout'; -export * from './useTreeItemLayoutStyles'; +export * from './useTreeItemLayoutStyles.styles'; diff --git a/packages/react-components/react-tree/src/components/TreeItemLayout/useTreeItemLayoutStyles.ts b/packages/react-components/react-tree/src/components/TreeItemLayout/useTreeItemLayoutStyles.styles.ts similarity index 100% rename from packages/react-components/react-tree/src/components/TreeItemLayout/useTreeItemLayoutStyles.ts rename to packages/react-components/react-tree/src/components/TreeItemLayout/useTreeItemLayoutStyles.styles.ts diff --git a/packages/react-components/react-tree/src/components/TreeItemPersonaLayout/TreeItemPersonaLayout.tsx b/packages/react-components/react-tree/src/components/TreeItemPersonaLayout/TreeItemPersonaLayout.tsx index 55ede65c081c0..04861958f7b09 100644 --- a/packages/react-components/react-tree/src/components/TreeItemPersonaLayout/TreeItemPersonaLayout.tsx +++ b/packages/react-components/react-tree/src/components/TreeItemPersonaLayout/TreeItemPersonaLayout.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import { useTreeItemPersonaLayout_unstable } from './useTreeItemPersonaLayout'; import { renderTreeItemPersonaLayout_unstable } from './renderTreeItemPersonaLayout'; -import { useTreeItemPersonaLayoutStyles_unstable } from './useTreeItemPersonaLayoutStyles'; +import { useTreeItemPersonaLayoutStyles_unstable } from './useTreeItemPersonaLayoutStyles.styles'; import type { TreeItemPersonaLayoutProps } from './TreeItemPersonaLayout.types'; import type { ForwardRefComponent } from '@fluentui/react-utilities'; import { useTreeItemPersonaLayoutContextValues_unstable } from './useTreeItemPersonaLayoutContextValues'; diff --git a/packages/react-components/react-tree/src/components/TreeItemPersonaLayout/index.ts b/packages/react-components/react-tree/src/components/TreeItemPersonaLayout/index.ts index 991ac32128c44..7a14fd4503d7c 100644 --- a/packages/react-components/react-tree/src/components/TreeItemPersonaLayout/index.ts +++ b/packages/react-components/react-tree/src/components/TreeItemPersonaLayout/index.ts @@ -2,4 +2,4 @@ export * from './TreeItemPersonaLayout'; export * from './TreeItemPersonaLayout.types'; export * from './renderTreeItemPersonaLayout'; export * from './useTreeItemPersonaLayout'; -export * from './useTreeItemPersonaLayoutStyles'; +export * from './useTreeItemPersonaLayoutStyles.styles'; diff --git a/packages/react-components/react-tree/src/components/TreeItemPersonaLayout/useTreeItemPersonaLayoutStyles.ts b/packages/react-components/react-tree/src/components/TreeItemPersonaLayout/useTreeItemPersonaLayoutStyles.styles.ts similarity index 100% rename from packages/react-components/react-tree/src/components/TreeItemPersonaLayout/useTreeItemPersonaLayoutStyles.ts rename to packages/react-components/react-tree/src/components/TreeItemPersonaLayout/useTreeItemPersonaLayoutStyles.styles.ts diff --git a/packages/react-components/react-tree/src/hooks/useFlatTree.ts b/packages/react-components/react-tree/src/hooks/useFlatTree.ts index b3def6b57e043..f6888be33b84a 100644 --- a/packages/react-components/react-tree/src/hooks/useFlatTree.ts +++ b/packages/react-components/react-tree/src/hooks/useFlatTree.ts @@ -12,35 +12,39 @@ import type { TreeProps, } from '../Tree'; import type { TreeItemProps } from '../TreeItem'; +import { ImmutableSet } from '../utils/ImmutableSet'; -export type FlatTreeItemProps = Omit & { +export type FlatTreeItemProps = TreeItemProps & { value: Value; parentValue?: Value; }; -export type FlatTreeItem = Readonly>; - /** - * @internal - * Used internally on createFlatTreeItems and VisibleFlatTreeItemGenerator - * to ensure required properties when building a FlatTreeITem + * The item that is returned by `useFlatTree`, it represents a wrapper around the properties provided to + * `useFlatTree` but with extra information that might be useful on flat tree scenarios */ -export type MutableFlatTreeItem = { - parentValue?: Value; - childrenSize: number; +export type FlatTreeItem = FlatTreeItemProps> = { index: number; - value: Value; level: number; + childrenSize: number; + value: Props['value']; + parentValue: Props['parentValue']; + /** + * A reference to the element that will render the `TreeItem`, + * this is necessary for nodes with parents (to ensure child to parent navigation), + * if a node has no parent then this reference will be null. + */ ref: React.RefObject; - getTreeItemProps(): Required< - Pick, 'value' | 'aria-setsize' | 'aria-level' | 'aria-posinset' | 'leaf'> - > & - TreeItemProps; + getTreeItemProps(): Required> & + Omit; }; export type FlatTreeProps = Required< - Pick, 'openItems' | 'onOpenChange' | 'onNavigation_unstable'> & { ref: React.Ref } ->; + Pick, 'openItems' | 'onOpenChange' | 'onNavigation_unstable'> +> & { + ref: React.Ref; + openItems: ImmutableSet; +}; /** * FlatTree API to manage all required mechanisms to convert a list of items into renderable TreeItems @@ -52,13 +56,13 @@ export type FlatTreeProps = Required< * * On simple scenarios it is advised to simply use a nested structure instead. */ -export type FlatTree = { +export type FlatTree = FlatTreeItemProps> = { /** * returns the properties required for the Tree component to work properly. * That includes: * `openItems`, `onOpenChange`, `onNavigation_unstable` and `ref` */ - getTreeProps(): FlatTreeProps; + getTreeProps(): FlatTreeProps; /** * internal method used to react to an `onNavigation` event. * This method ensures proper navigation on keyboard and mouse interaction. @@ -82,7 +86,7 @@ export type FlatTree = { * }; *``` */ - navigate(data: TreeNavigationData_unstable): void; + navigate(data: TreeNavigationData_unstable): void; /** * returns next item to be focused on a navigation. * This method is provided to decouple the element that needs to be focused from @@ -91,15 +95,20 @@ export type FlatTree = { * On the case of TypeAhead navigation this method returns the current item. */ getNextNavigableItem( - visibleItems: FlatTreeItem[], - data: TreeNavigationData_unstable, - ): FlatTreeItem | undefined; + visibleItems: FlatTreeItem[], + data: TreeNavigationData_unstable, + ): FlatTreeItem | undefined; /** * an iterable containing all visually available flat tree items */ - items(): IterableIterator>; + items(): IterableIterator>; }; +type FlatTreeOptions = FlatTreeItemProps> = Pick< + TreeProps, + 'openItems' | 'defaultOpenItems' | 'onOpenChange' | 'onNavigation_unstable' +>; + /** * this hook provides FlatTree API to manage all required mechanisms to convert a list of items into renderable TreeItems * in multiple scenarios including virtualization. @@ -112,15 +121,15 @@ export type FlatTree = { * @param flatTreeItemProps - a list of tree items * @param options - in case control over the internal openItems is required */ -export function useFlatTree_unstable( - flatTreeItemProps: FlatTreeItemProps[], - options: Pick, 'openItems' | 'defaultOpenItems' | 'onOpenChange' | 'onNavigation_unstable'> = {}, -): FlatTree { - const [openItems, updateOpenItems] = useOpenItemsState(options); +export function useFlatTree_unstable = FlatTreeItemProps>( + flatTreeItemProps: Props[], + options: FlatTreeOptions = {}, +): FlatTree { + const [openItems, updateOpenItems] = useOpenItemsState(options); const flatTreeItems = React.useMemo(() => createFlatTreeItems(flatTreeItemProps), [flatTreeItemProps]); const [navigate, navigationRef] = useFlatTreeNavigation(flatTreeItems); - const handleOpenChange = useEventCallback((event: TreeOpenChangeEvent, data: TreeOpenChangeData) => { + const handleOpenChange = useEventCallback((event: TreeOpenChangeEvent, data: TreeOpenChangeData) => { options.onOpenChange?.(event, data); if (!event.isDefaultPrevented()) { updateOpenItems(data); @@ -129,7 +138,7 @@ export function useFlatTree_unstable( }); const handleNavigation = useEventCallback( - (event: TreeNavigationEvent_unstable, data: TreeNavigationData_unstable) => { + (event: TreeNavigationEvent_unstable, data: TreeNavigationData_unstable) => { options.onNavigation_unstable?.(event, data); if (!event.isDefaultPrevented()) { navigate(data); @@ -139,7 +148,7 @@ export function useFlatTree_unstable( ); const getNextNavigableItem = useEventCallback( - (visibleItems: FlatTreeItem[], data: TreeNavigationData_unstable) => { + (visibleItems: FlatTreeItem[], data: TreeNavigationData_unstable) => { const item = flatTreeItems.get(data.value); if (item) { switch (data.type) { @@ -175,7 +184,7 @@ export function useFlatTree_unstable( ); const items = React.useCallback( - () => VisibleFlatTreeItemGenerator(openItems, flatTreeItems), + () => VisibleFlatTreeItemGenerator(openItems, flatTreeItems), [openItems, flatTreeItems], ); diff --git a/packages/react-components/react-tree/src/hooks/useFlatTreeNavigation.ts b/packages/react-components/react-tree/src/hooks/useFlatTreeNavigation.ts index b1b9e6d55cc7c..afb4d6a35fe34 100644 --- a/packages/react-components/react-tree/src/hooks/useFlatTreeNavigation.ts +++ b/packages/react-components/react-tree/src/hooks/useFlatTreeNavigation.ts @@ -7,13 +7,16 @@ import { treeDataTypes } from '../utils/tokens'; import { treeItemFilter } from '../utils/treeItemFilter'; import { HTMLElementWalker, useHTMLElementWalkerRef } from './useHTMLElementWalker'; import { useRovingTabIndex } from './useRovingTabIndexes'; +import { FlatTreeItemProps } from './useFlatTree'; -export function useFlatTreeNavigation(flatTreeItems: FlatTreeItems) { +export function useFlatTreeNavigation = FlatTreeItemProps>( + flatTreeItems: FlatTreeItems, +) { const { targetDocument } = useFluent_unstable(); const [treeItemWalkerRef, treeItemWalkerRootRef] = useHTMLElementWalkerRef(treeItemFilter); const [{ rove }, rovingRootRef] = useRovingTabIndex(treeItemFilter); - function getNextElement(data: TreeNavigationData_unstable) { + function getNextElement(data: TreeNavigationData_unstable) { if (!targetDocument || !treeItemWalkerRef.current) { return null; } @@ -43,7 +46,7 @@ export function useFlatTreeNavigation(flatTreeItems: FlatTreeIte return treeItemWalker.previousElement(); } } - const navigate = useEventCallback((data: TreeNavigationData_unstable) => { + const navigate = useEventCallback((data: TreeNavigationData_unstable) => { const nextElement = getNextElement(data); if (nextElement) { rove(nextElement); @@ -66,7 +69,7 @@ function firstChild(target: HTMLElement, treeWalker: HTMLElementWalker): HTMLEle return null; } -function parentElement(flatTreeItems: FlatTreeItems, value: Value) { +function parentElement(flatTreeItems: FlatTreeItems>, value: unknown) { const flatTreeItem = flatTreeItems.get(value); if (flatTreeItem?.parentValue) { const parentItem = flatTreeItems.get(flatTreeItem.parentValue); diff --git a/packages/react-components/react-tree/src/hooks/useOpenItemsState.ts b/packages/react-components/react-tree/src/hooks/useOpenItemsState.ts index 2dbb3990aac2e..1fe50eccb2e10 100644 --- a/packages/react-components/react-tree/src/hooks/useOpenItemsState.ts +++ b/packages/react-components/react-tree/src/hooks/useOpenItemsState.ts @@ -6,10 +6,7 @@ import type { TreeOpenChangeData, TreeProps } from '../Tree'; export function useOpenItemsState(props: Pick, 'openItems' | 'defaultOpenItems'>) { const [openItems, setOpenItems] = useControllableState({ state: React.useMemo(() => props.openItems && createImmutableSet(props.openItems), [props.openItems]), - defaultState: React.useMemo( - () => props.defaultOpenItems && createImmutableSet(props.defaultOpenItems), - [props.defaultOpenItems], - ), + defaultState: props.defaultOpenItems && (() => createImmutableSet(props.defaultOpenItems)), initialState: emptyImmutableSet, }); const updateOpenItems = useEventCallback((data: TreeOpenChangeData) => diff --git a/packages/react-components/react-tree/src/testing/isConformant.ts b/packages/react-components/react-tree/src/testing/isConformant.ts index 77f88408cbd83..a3d988f29a172 100644 --- a/packages/react-components/react-tree/src/testing/isConformant.ts +++ b/packages/react-components/react-tree/src/testing/isConformant.ts @@ -6,6 +6,7 @@ export function isConformant( testInfo: Omit, 'componentPath'> & { componentPath?: string }, ) { const defaultOptions: Partial> = { + tsConfig: { configName: 'tsconfig.spec.json' }, componentPath: require.main?.filename.replace('.test', ''), extraTests: griffelTests as TestObject, }; diff --git a/packages/react-components/react-tree/src/utils/createFlatTreeItems.ts b/packages/react-components/react-tree/src/utils/createFlatTreeItems.ts index 1cb3d00eb1fe4..6643c14990f5e 100644 --- a/packages/react-components/react-tree/src/utils/createFlatTreeItems.ts +++ b/packages/react-components/react-tree/src/utils/createFlatTreeItems.ts @@ -1,33 +1,33 @@ import type { ImmutableSet } from './ImmutableSet'; -import type { FlatTreeItem, FlatTreeItemProps, MutableFlatTreeItem } from '../hooks/useFlatTree'; +import type { FlatTreeItem, FlatTreeItemProps } from '../hooks/useFlatTree'; import * as React from 'react'; /** * @internal */ -export type FlatTreeItems = { +export type FlatTreeItems> = { size: number; - root: FlatTreeItem; - get(key: Value): FlatTreeItem | undefined; - set(key: Value, value: FlatTreeItem): void; - getByIndex(index: number): FlatTreeItem; + root: FlatTreeItem; + get(key: Props['value']): FlatTreeItem | undefined; + set(key: Props['value'], value: FlatTreeItem): void; + getByIndex(index: number): FlatTreeItem; }; /** * creates a list of flat tree items * and provides a map to access each item by id */ -export function createFlatTreeItems( - flatTreeItemProps: FlatTreeItemProps[], -): FlatTreeItems { - const root = createFlatTreeRootItem(); - const itemsPerValue = new Map>([[flatTreeRootId as Value, root]]); - const items: MutableFlatTreeItem[] = []; +export function createFlatTreeItems>( + flatTreeItemProps: Props[], +): FlatTreeItems { + const root = createFlatTreeRootItem(); + const itemsPerValue = new Map>>([[root.value, root]]); + const items: FlatTreeItem>[] = []; for (let index = 0; index < flatTreeItemProps.length; index++) { - const { parentValue = flatTreeRootId as Value, ...treeItemProps } = flatTreeItemProps[index]; + const { parentValue = flatTreeRootId, ...treeItemProps } = flatTreeItemProps[index]; - const nextItemProps: FlatTreeItemProps | undefined = flatTreeItemProps[index + 1]; + const nextItemProps: Props | undefined = flatTreeItemProps[index + 1]; const currentParent = itemsPerValue.get(parentValue); if (!currentParent) { if (process.env.NODE_ENV === 'development') { @@ -38,12 +38,13 @@ export function createFlatTreeItems( } break; } - const isLeaf = nextItemProps?.parentValue !== treeItemProps.value; + const isLeaf = + treeItemProps.leaf ?? (treeItemProps.value === undefined || nextItemProps?.parentValue !== treeItemProps.value); const currentLevel = (currentParent.level ?? 0) + 1; const currentChildrenSize = ++currentParent.childrenSize; const ref = React.createRef(); - const flatTreeItem: MutableFlatTreeItem = { + const flatTreeItem: FlatTreeItem> = { value: treeItemProps.value, getTreeItemProps: () => ({ ...treeItemProps, @@ -64,27 +65,30 @@ export function createFlatTreeItems( items.push(flatTreeItem); } - return { + const flatTreeItems: FlatTreeItems> = { root, size: items.length, getByIndex: index => items[index], - get: id => itemsPerValue.get(id), - set: (id, value) => itemsPerValue.set(id, value), + get: key => itemsPerValue.get(key), + set: (key, value) => itemsPerValue.set(key, value), }; + + return flatTreeItems as FlatTreeItems; } -export const flatTreeRootId = '__fuiFlatTreeRoot' as unknown; +export const flatTreeRootId = '__fuiFlatTreeRoot'; -function createFlatTreeRootItem(): FlatTreeItem { +function createFlatTreeRootItem(): FlatTreeItem { return { ref: { current: null }, - value: flatTreeRootId as Value, + value: flatTreeRootId, + parentValue: undefined, getTreeItemProps: () => { if (process.env.NODE_ENV !== 'production') { // eslint-disable-next-line no-console console.error('useFlatTree: internal error, trying to access treeitem props from invalid root element'); } - return { value: flatTreeRootId as Value, 'aria-setsize': -1, 'aria-level': -1, 'aria-posinset': -1, leaf: true }; + return { value: flatTreeRootId, 'aria-setsize': -1, 'aria-level': -1, 'aria-posinset': -1, leaf: true }; }, childrenSize: 0, get index() { @@ -99,12 +103,12 @@ function createFlatTreeRootItem(): FlatTreeItem { } // eslint-disable-next-line @typescript-eslint/naming-convention -export function* VisibleFlatTreeItemGenerator( - openItems: ImmutableSet, - flatTreeItems: FlatTreeItems, +export function* VisibleFlatTreeItemGenerator>( + openItems: ImmutableSet, + flatTreeItems: FlatTreeItems, ) { for (let index = 0, visibleIndex = 0; index < flatTreeItems.size; index++) { - const item: MutableFlatTreeItem = flatTreeItems.getByIndex(index); + const item = flatTreeItems.getByIndex(index) as FlatTreeItem; const parent = item.parentValue ? flatTreeItems.get(item.parentValue) ?? flatTreeItems.root : flatTreeItems.root; if (isItemVisible(item, openItems, flatTreeItems)) { item.index = visibleIndex++; @@ -115,10 +119,10 @@ export function* VisibleFlatTreeItemGenerator( } } -function isItemVisible( - item: FlatTreeItem, - openItems: ImmutableSet, - flatTreeItems: FlatTreeItems, +function isItemVisible( + item: FlatTreeItem>, + openItems: ImmutableSet, + flatTreeItems: FlatTreeItems>, ) { if (item.level === 1) { return true; diff --git a/packages/react-components/react-tree/src/utils/flattenTree.ts b/packages/react-components/react-tree/src/utils/flattenTree.ts index d41b65ea8ce39..035d147f449d8 100644 --- a/packages/react-components/react-tree/src/utils/flattenTree.ts +++ b/packages/react-components/react-tree/src/utils/flattenTree.ts @@ -2,30 +2,33 @@ import * as React from 'react'; import { FlatTreeItemProps } from '../hooks/useFlatTree'; import { TreeItemProps } from '../TreeItem'; -export type NestedTreeItem = Omit, 'subtree'> & { - subtree?: NestedTreeItem[]; +export type NestedTreeItem> = Omit & { + subtree?: NestedTreeItem[]; }; +export type FlattenedTreeItem> = FlatTreeItemProps> & + Props; + let count = 1; -function flattenTreeRecursive( - items: NestedTreeItem[], - parent?: FlatTreeItemProps, +function flattenTreeRecursive>( + items: NestedTreeItem[], + parent?: FlatTreeItemProps & Props, level = 1, -): FlatTreeItemProps[] { - return items.reduce[]>((acc, { subtree, ...item }, index) => { +): FlattenedTreeItem[] { + return items.reduce[]>((acc, { subtree, ...item }, index) => { const id = item.id ?? `fui-FlatTreeItem-${count++}`; - const flatTreeItem: FlatTreeItemProps = { + const flatTreeItem = { 'aria-level': level, 'aria-posinset': index + 1, 'aria-setsize': items.length, parentValue: parent?.value, - value: item.value ?? (id as unknown as Value), + value: item.value ?? (id as unknown as Props['value']), leaf: subtree === undefined, ...item, - }; + } as FlattenedTreeItem; acc.push(flatTreeItem); if (subtree !== undefined) { - acc.push(...flattenTreeRecursive(subtree, flatTreeItem, level + 1)); + acc.push(...flattenTreeRecursive(subtree, flatTreeItem, level + 1)); } return acc; }, []); @@ -72,8 +75,9 @@ function flattenTreeRecursive( * ``` */ // eslint-disable-next-line @typescript-eslint/naming-convention -export const flattenTree_unstable = (items: NestedTreeItem[]): FlatTreeItemProps[] => - flattenTreeRecursive(items); +export const flattenTree_unstable = >( + items: NestedTreeItem[], +): FlattenedTreeItem[] => flattenTreeRecursive(items); /** * @internal diff --git a/packages/react-components/react-tree/stories/D_flatTree/TreeItemAddRemove.stories.tsx b/packages/react-components/react-tree/stories/D_flatTree/TreeItemAddRemove.stories.tsx index ede8cbcd248d4..e99aa65ed5b5e 100644 --- a/packages/react-components/react-tree/stories/D_flatTree/TreeItemAddRemove.stories.tsx +++ b/packages/react-components/react-tree/stories/D_flatTree/TreeItemAddRemove.stories.tsx @@ -12,15 +12,17 @@ import { Delete20Regular } from '@fluentui/react-icons'; import { Button } from '@fluentui/react-components'; import story from './TreeItemAddRemove.md'; -const defaultSubTrees: FlatTreeItemProps[][] = [ +type ItemProps = FlatTreeItemProps & { content: string }; + +const defaultSubTrees: ItemProps[][] = [ [ - { value: '1', children: Level 1, item 1 }, - { value: '1-1', parentValue: '1', children: Item 1-1 }, - { value: '1-2', parentValue: '1', children: Item 1-2 }, + { value: '1', content: 'Level 1, item 1' }, + { value: '1-1', parentValue: '1', content: 'Item 1-1' }, + { value: '1-2', parentValue: '1', content: 'Item 1-2' }, ], [ - { value: '2', children: Level 1, item 2 }, - { value: '2-1', parentValue: '2', children: Item 2-1 }, + { value: '2', content: 'Level 1, item 2' }, + { value: '2-1', parentValue: '2', content: 'Item 2-1' }, ], ]; @@ -38,12 +40,12 @@ export const AddRemoveTreeItem = () => { setTrees(currentTrees => { const lastItem = currentTrees[subtreeIndex][currentTrees[subtreeIndex].length - 1]; const newItemValue = `${subtreeIndex + 1}-${Number(lastItem.value.slice(2)) + 1}`; - const nextSubTree: FlatTreeItemProps[] = [ + const nextSubTree: ItemProps[] = [ ...currentTrees[subtreeIndex], { value: newItemValue, parentValue: currentTrees[subtreeIndex][0].value, - children: New item {newItemValue}, + content: `New item ${newItemValue}`, }, ]; return [...currentTrees.slice(0, subtreeIndex), nextSubTree, ...currentTrees.slice(subtreeIndex + 1)]; @@ -63,13 +65,13 @@ export const AddRemoveTreeItem = () => { { value: '1-btn', parentValue: '1', - children: Add new item, + content: 'Add new item', }, ...trees[1], { value: '2-btn', parentValue: '2', - children: Add new item, + content: 'Add new item', }, ], [trees], @@ -81,10 +83,11 @@ export const AddRemoveTreeItem = () => { {Array.from(flatTree.items(), item => { const isUndeletable = item.level === 1 || item.value.endsWith('-btn'); + const { content, ...treeItemProps } = item.getTreeItemProps(); return ( { /> ) } - /> + > + {content} + ); })} diff --git a/packages/react-components/react-tree/stories/D_flatTree/TreeLazyLoading.md b/packages/react-components/react-tree/stories/D_flatTree/TreeLazyLoading.md new file mode 100644 index 0000000000000..6f0a7922844b2 --- /dev/null +++ b/packages/react-components/react-tree/stories/D_flatTree/TreeLazyLoading.md @@ -0,0 +1 @@ +In this lazy-loading hierarchical `Tree` structure example, the `LazyTreeItem` component and `useFlatTree` hook are utilized to create an efficient and dynamic tree. The tree loads and displays data on-demand, improving initial rendering time and performance. The `LazyTreeItem` component handles loading states and tree structure updates upon clicking a tree item. The `useFlatTree` hook converts the flat array of items into a tree structure, and allows control over individual `TreeItem` components' open/closed states using the `openItems` and `onOpenChange` props. diff --git a/packages/react-components/react-tree/stories/D_flatTree/TreeLazyLoading.stories.tsx b/packages/react-components/react-tree/stories/D_flatTree/TreeLazyLoading.stories.tsx new file mode 100644 index 0000000000000..6dffcabe2b440 --- /dev/null +++ b/packages/react-components/react-tree/stories/D_flatTree/TreeLazyLoading.stories.tsx @@ -0,0 +1,113 @@ +import * as React from 'react'; +import { + FlatTreeItemProps, + Tree, + TreeItem, + TreeItemLayout, + TreeOpenChangeData, + TreeOpenChangeEvent, + useFlatTree_unstable, +} from '@fluentui/react-tree'; +import story from './TreeLazyLoading.md'; +import { Spinner } from '@fluentui/react-components'; + +interface Result { + results: { name: string }[]; +} + +type Entity = FlatTreeItemProps & { name: string }; + +export const LazyLoading = () => { + const peopleTree = useQuery([]); + const planetsTree = useQuery([]); + const starshipsTree = useQuery([]); + const trees = { + people: peopleTree, + planets: planetsTree, + starships: starshipsTree, + }; + + const tree = React.useMemo( + () => [ + { + name: 'People', + value: 'people', + leaf: false, + }, + ...peopleTree.value, + { + name: 'Planets', + value: 'planets', + leaf: false, + }, + ...planetsTree.value, + { + name: 'Starship', + value: 'starships', + leaf: false, + }, + ...starshipsTree.value, + ], + [peopleTree, planetsTree, starshipsTree], + ); + + const handleOpenChange = (_: TreeOpenChangeEvent, data: TreeOpenChangeData) => { + if (data.open) { + if ( + (data.value === 'people' || data.value === 'planets' || data.value === 'starships') && + !trees[data.value].isLoaded + ) { + trees[data.value].query(() => + fetch(`https://swapi.dev/api/${data.value}`) + .then(result => result.json()) + .then((json: Result) => + json.results.map(people => ({ + value: `${data.value}/${people.name}`, + parentValue: data.value, + name: people.name, + })), + ), + ); + } + } + }; + + const flatTree = useFlatTree_unstable(tree, { onOpenChange: handleOpenChange }); + const treeProps = flatTree.getTreeProps(); + return ( + + {Array.from(flatTree.items(), item => { + const { name, ...itemProps } = item.getTreeItemProps(); + const { isLoading = false } = trees[item.value as 'people' | 'planets' | 'starships'] ?? {}; + return ( + : undefined} key={item.value} {...itemProps}> + {name} + + ); + })} + + ); +}; + +LazyLoading.parameters = { + docs: { + description: { + story, + }, + }, +}; + +/** + * This function is just for the sake of the example, + * a library for fetching data (like react-query) might be a better option + */ +function useQuery(initialValue: Value) { + const [queryResult, setQueryResult] = React.useState({ value: initialValue, isLoading: false, isLoaded: false }); + const query = (fn: () => Promise | Value) => { + setQueryResult(curr => ({ ...curr, isLoading: true })); + Promise.resolve(fn()).then(nextValue => { + setQueryResult({ value: nextValue, isLoaded: true, isLoading: false }); + }); + }; + return { ...queryResult, query } as const; +} diff --git a/packages/react-components/react-tree/stories/D_flatTree/Virtualization.stories.tsx b/packages/react-components/react-tree/stories/D_flatTree/Virtualization.stories.tsx index cefd20fde4213..27e4a3441c782 100644 --- a/packages/react-components/react-tree/stories/D_flatTree/Virtualization.stories.tsx +++ b/packages/react-components/react-tree/stories/D_flatTree/Virtualization.stories.tsx @@ -18,28 +18,30 @@ import { FixedSizeList, FixedSizeListProps, ListChildComponentProps } from 'reac import { ForwardRefComponent, getSlots } from '@fluentui/react-components'; import story from './Virtualization.md'; -const defaultItems: FlatTreeItemProps[] = [ +type ItemProps = FlatTreeItemProps & { content: string }; + +const defaultItems: ItemProps[] = [ { id: 'flatTreeItem_lvl-1_item-1', value: 'flatTreeItem_lvl-1_item-1', - children: Level 1, item 1, + content: `Level 1, item 1`, }, ...Array.from({ length: 300 }, (_, i) => ({ id: `flatTreeItem_lvl-1_item-1--child:${i}`, value: `flatTreeItem_lvl-1_item-1--child:${i}`, parentValue: 'flatTreeItem_lvl-1_item-1', - children: Item {i + 1}, + content: `Item ${i + 1}`, })), { id: 'flatTreeItem_lvl-1_item-2', value: 'flatTreeItem_lvl-1_item-2', - children: Level 1, item 2, + content: `Level 1, item 2`, }, ...Array.from({ length: 300 }, (_, index) => ({ id: `flatTreeItem_lvl-1_item-2--child:${index}`, value: `flatTreeItem_lvl-1_item-2--child:${index}`, parentValue: 'flatTreeItem_lvl-1_item-2', - children: Item {index + 1}, + content: `Item ${index + 1}`, })), ]; @@ -67,9 +69,10 @@ interface FixedSizeTreeItemProps extends ListChildComponentProps { const FixedSizeTreeItem = (props: FixedSizeTreeItemProps) => { const flatTreeItem = props.data[props.index]; + const { content, ...treeItemProps } = flatTreeItem.getTreeItemProps(); return ( - - Item {props.index} + + {content} ); }; @@ -91,6 +94,7 @@ export const Virtualization = () => { } flatTree.navigate(data); }; + return ( ([ +type Item = TreeItemProps & { layout: string }; + +const defaultItems = flattenTree_unstable([ { - children: level 1, item 1, + layout: 'level 1, item 1', subtree: [ + { layout: 'level 2, item 1' }, { - children: level 2, item 1, - }, - { - children: level 2, item 2, + layout: 'level 2, item 2', }, { - children: level 2, item 3, + layout: 'level 2, item 3', }, ], }, { - children: level 1, item 2, + layout: 'level 1, item 2', subtree: [ { - children: level 2, item 1, + layout: 'level 2, item 1', subtree: [ { - children: level 3, item 1, + layout: 'level 3, item 1', subtree: [ { - children: level 4, item 1, + layout: 'level 4, item 1', }, ], }, @@ -38,12 +45,17 @@ const defaultItems = flattenTree_unstable([ ]); export const FlattenTree = () => { - const flatTree = useFlatTree_unstable(defaultItems); + const flatTree = useFlatTree_unstable(defaultItems); return ( - {Array.from(flatTree.items(), item => ( - - ))} + {Array.from(flatTree.items(), item => { + const { layout, ...itemProps } = item.getTreeItemProps(); + return ( + + {layout} + + ); + })} ); }; diff --git a/packages/react-components/react-tree/stories/D_flatTree/index.stories.tsx b/packages/react-components/react-tree/stories/D_flatTree/index.stories.tsx index a054b8503018f..eb95c8aa5cd06 100644 --- a/packages/react-components/react-tree/stories/D_flatTree/index.stories.tsx +++ b/packages/react-components/react-tree/stories/D_flatTree/index.stories.tsx @@ -5,6 +5,7 @@ export { UseFlatTree as Default } from './useFlatTree.stories'; export { FlattenTree as flattenTree } from './flattenTree.stories'; export { Virtualization } from './Virtualization.stories'; export { AddRemoveTreeItem } from './TreeItemAddRemove.stories'; +export { LazyLoading } from './TreeLazyLoading.stories'; export default { title: 'Preview Components/Tree/flatTree', diff --git a/packages/react-components/react-tree/stories/D_flatTree/useFlatTree.stories.tsx b/packages/react-components/react-tree/stories/D_flatTree/useFlatTree.stories.tsx index 89edcaa09579b..cb9f9e5d60d5f 100644 --- a/packages/react-components/react-tree/stories/D_flatTree/useFlatTree.stories.tsx +++ b/packages/react-components/react-tree/stories/D_flatTree/useFlatTree.stories.tsx @@ -2,64 +2,21 @@ import * as React from 'react'; import { Tree, TreeItem, TreeItemLayout, useFlatTree_unstable, FlatTreeItemProps } from '@fluentui/react-tree'; import story from './useFlatTree.md'; -const defaultItems: FlatTreeItemProps[] = [ - { - value: '1', - children: Level 1, item 1, - }, - { - value: '1-1', - parentValue: '1', - children: Level 2, item 1, - }, - { - value: '1-2', - parentValue: '1', - children: Level 2, item 2, - }, - { - value: '1-3', - parentValue: '1', - children: Level 2, item 3, - }, - { - value: '2', - children: Level 1, item 2, - }, - { - value: '2-1', - parentValue: '2', - children: Level 2, item 1, - }, - { - value: '2-1-1', - parentValue: '2-1', - children: Level 3, item 1, - }, - { - value: '2-2', - parentValue: '2', - children: Level 2, item 2, - }, - { - value: '2-2-1', - parentValue: '2-2', - children: Level 3, item 1, - }, - { - value: '2-2-2', - parentValue: '2-2', - children: Level 3, item 2, - }, - { - value: '2-2-3', - parentValue: '2-2', - children: Level 3, item 3, - }, - { - value: '3', - children: Level 1, item 3, - }, +type Item = FlatTreeItemProps & { content: string }; + +const defaultItems: Item[] = [ + { value: '1', content: 'Level 1, item 1' }, + { value: '1-1', parentValue: '1', content: 'Level 2, item 1' }, + { value: '1-2', parentValue: '1', content: 'Level 2, item 2' }, + { value: '1-3', parentValue: '1', content: 'Level 2, item 3' }, + { value: '2', content: 'Level 1, item 2' }, + { value: '2-1', parentValue: '2', content: 'Level 2, item 1' }, + { value: '2-1-1', parentValue: '2-1', content: 'Level 3, item 1' }, + { value: '2-2', parentValue: '2', content: 'Level 2, item 2' }, + { value: '2-2-1', parentValue: '2-2', content: 'Level 3, item 1' }, + { value: '2-2-2', parentValue: '2-2', content: 'Level 3, item 2' }, + { value: '2-2-3', parentValue: '2-2', content: 'Level 3, item 3' }, + { value: '3', content: 'Level 1, item 3' }, ]; export const UseFlatTree = () => { @@ -67,9 +24,14 @@ export const UseFlatTree = () => { return ( - {Array.from(flatTree.items(), flatTreeItem => ( - - ))} + {Array.from(flatTree.items(), flatTreeItem => { + const { content, ...treeItemProps } = flatTreeItem.getTreeItemProps(); + return ( + + {content} + + ); + })} ); }; diff --git a/packages/react-components/react-utilities/jest.config.js b/packages/react-components/react-utilities/jest.config.js index ad0713da7e648..1b8b528f2a67f 100644 --- a/packages/react-components/react-utilities/jest.config.js +++ b/packages/react-components/react-utilities/jest.config.js @@ -9,7 +9,7 @@ module.exports = { globals: { 'ts-jest': { tsconfig: '/tsconfig.spec.json', - diagnostics: false, + isolatedModules: true, }, }, transform: { diff --git a/packages/react-components/react-utilities/src/hooks/useControllableState.ts b/packages/react-components/react-utilities/src/hooks/useControllableState.ts index 3cb467a3cbdcd..4bb5f59b58804 100644 --- a/packages/react-components/react-utilities/src/hooks/useControllableState.ts +++ b/packages/react-components/react-utilities/src/hooks/useControllableState.ts @@ -19,10 +19,6 @@ export type UseControllableStateOptions = { initialState: State; }; -function isFactoryDispatch(newState: React.SetStateAction): newState is (prevState: State) => State { - return typeof newState === 'function'; -} - /** * @internal * @@ -42,40 +38,21 @@ function isFactoryDispatch(newState: React.SetStateAction): newSta export const useControllableState = ( options: UseControllableStateOptions, ): [State, React.Dispatch>] => { - const isControlled = useIsControlled(options.state); const initialState = typeof options.defaultState === 'undefined' ? options.initialState : options.defaultState; const [internalState, setInternalState] = React.useState(initialState); - - const state = isControlled ? (options.state as State) : internalState; - - const stateRef = React.useRef(state); - React.useEffect(() => { - stateRef.current = state; - }, [state]); - - // To match the behavior of the setter returned by React.useState, this callback's identity - // should never change. This means it MUST NOT directly reference variables that can change. - const setState = React.useCallback((newState: React.SetStateAction) => { - // React dispatch can use a factory - // https://reactjs.org/docs/hooks-reference.html#functional-updates - if (isFactoryDispatch(newState)) { - stateRef.current = newState(stateRef.current); - } else { - stateRef.current = newState; - } - - setInternalState(stateRef.current); - }, []); - - return [state, setState]; + return useIsControlled(options.state) ? [options.state, noop] : [internalState, setInternalState]; }; +function noop() { + /* noop */ +} + /** * Helper hook to handle previous comparison of controlled/uncontrolled * Prints an error when isControlled value switches between subsequent renders * @returns - whether the value is controlled */ -const useIsControlled = (controlledValue: unknown) => { +const useIsControlled = (controlledValue?: V): controlledValue is V => { const [isControlled] = React.useState(() => controlledValue !== undefined); if (process.env.NODE_ENV !== 'production') { diff --git a/packages/react-components/react-virtualizer/jest.config.js b/packages/react-components/react-virtualizer/jest.config.js index 606059485bce0..406a515d1ffd1 100644 --- a/packages/react-components/react-virtualizer/jest.config.js +++ b/packages/react-components/react-virtualizer/jest.config.js @@ -4,12 +4,12 @@ * @type {import('@jest/types').Config.InitialOptions} */ module.exports = { - displayName: 'virtualizer', + displayName: 'react-virtualizer', preset: '../../../jest.preset.js', globals: { 'ts-jest': { tsconfig: '/tsconfig.spec.json', - diagnostics: false, + isolatedModules: true, }, }, transform: { diff --git a/packages/react-components/theme-designer/jest.config.js b/packages/react-components/theme-designer/jest.config.js index 37c42ffb59b17..a3449c2a84753 100644 --- a/packages/react-components/theme-designer/jest.config.js +++ b/packages/react-components/theme-designer/jest.config.js @@ -9,7 +9,7 @@ module.exports = { globals: { 'ts-jest': { tsconfig: '/tsconfig.spec.json', - diagnostics: false, + isolatedModules: true, }, }, transform: { diff --git a/packages/react-conformance/src/isConformant.ts b/packages/react-conformance/src/isConformant.ts index 734e1cb009082..2711019ebf321 100644 --- a/packages/react-conformance/src/isConformant.ts +++ b/packages/react-conformance/src/isConformant.ts @@ -8,14 +8,28 @@ import { getComponentDoc } from './utils/getComponentDoc'; export function isConformant(...testInfo: Partial>[]) { const mergedOptions = merge(...testInfo); - const { componentPath, displayName, disabledTests = [], extraTests, tsconfigDir } = mergedOptions; + + const { + componentPath, + displayName, + disabledTests = [], + extraTests, + tsConfig, + // eslint-disable-next-line deprecation/deprecation + tsconfigDir, + } = mergedOptions; + + const mergedTsConfig = { + configDir: tsConfig?.configDir ?? tsconfigDir, + configName: tsConfig?.configName, + }; describe('isConformant', () => { if (!fs.existsSync(componentPath)) { throw new Error(`Path ${componentPath} does not exist`); } - const tsProgram = createTsProgram(componentPath, tsconfigDir); + const tsProgram = createTsProgram(componentPath, mergedTsConfig); const components = getComponentDoc(componentPath, tsProgram); const mainComponents = components.filter(comp => comp.displayName === displayName); diff --git a/packages/react-conformance/src/types.ts b/packages/react-conformance/src/types.ts index 0abb94ea054c5..5e950e4e3af70 100644 --- a/packages/react-conformance/src/types.ts +++ b/packages/react-conformance/src/types.ts @@ -92,10 +92,16 @@ export interface IsConformantOptions { primarySlot?: keyof TProps | 'root'; /** + * @deprecated - use `tsConfig` property + * * Test will load the first tsconfig.json file working upwards from `tsconfigDir`. * @defaultvalue the directory of the component being tested */ tsconfigDir?: string; + /** + * replaces tsconfigDir + */ + tsConfig?: Partial<{ configName: string; configDir: string }>; } export type ConformanceTest = ( diff --git a/packages/react-conformance/src/utils/createTsProgram.ts b/packages/react-conformance/src/utils/createTsProgram.ts index c2fb35a59d1d4..9c35cf1047392 100644 --- a/packages/react-conformance/src/utils/createTsProgram.ts +++ b/packages/react-conformance/src/utils/createTsProgram.ts @@ -5,18 +5,23 @@ import * as ts from 'typescript'; let program: ts.Program; /** - * Creates a cached TS Program. + * Creates a ~cached~ TS Program. + * @remarks this will be never cached with current use/setup as jest creates this for every it/describe() block 🐌 */ -export function createTsProgram(componentPath: string, tsconfigDir?: string): ts.Program { +export function createTsProgram( + sourcePath: string, + options: Partial<{ configDir: string; configName: string }> = {}, +): ts.Program { + const { configName, configDir } = options; if (!program) { // Calling parse() from react-docgen-typescript would create a new ts.Program for every component, // which can take multiple seconds in a large project. For better performance, we create a single // ts.Program per package and pass it to parseWithProgramProvider(). - const tsconfigPath = ts.findConfigFile(tsconfigDir ?? componentPath, fs.existsSync); + const tsconfigPath = ts.findConfigFile(configDir ?? sourcePath, fs.existsSync, configName); if (!tsconfigPath) { - throw new Error('Cannot find tsconfig.json'); + throw new Error(`Cannot find ${configName}`); } const compilerOptions = getCompilerOptions(tsconfigPath); @@ -33,9 +38,9 @@ export function createTsProgram(componentPath: string, tsconfigDir?: string): ts program = ts.createProgram([rootFile], compilerOptions); } - if (!program.getSourceFile(componentPath)) { + if (!program.getSourceFile(sourcePath)) { // See earlier comment for why it's handled this way (can reconsider if it becomes a problem) - throw new Error(`Component file "${componentPath}" does not appear to be referenced from the project index file`); + throw new Error(`Component file "${sourcePath}" does not appear to be referenced from the project index file`); } return program; diff --git a/packages/react-docsite-components/src/components/CodepenComponent/CodepenComponent.tsx b/packages/react-docsite-components/src/components/CodepenComponent/CodepenComponent.tsx index d3593c6aa29d9..d7032f452a648 100644 --- a/packages/react-docsite-components/src/components/CodepenComponent/CodepenComponent.tsx +++ b/packages/react-docsite-components/src/components/CodepenComponent/CodepenComponent.tsx @@ -48,6 +48,10 @@ const CodepenComponentBase: React.FunctionComponent = props => { jsContentStr.indexOf('window.FluentUIExampleData') !== -1 ? script('@fluentui/example-data@8/dist/example-data.js') : '', + // load charting bundle only if used + jsContentStr.indexOf('window.FluentUIReactCharting') !== -1 + ? script('@fluentui/react-charting@5/dist/react-charting.js') + : '', `
`, ] .filter(line => !!line) diff --git a/packages/react-monaco-editor/src/utilities/defaultSupportedPackages.ts b/packages/react-monaco-editor/src/utilities/defaultSupportedPackages.ts index 71715d02e3fb0..1a096a6ada144 100644 --- a/packages/react-monaco-editor/src/utilities/defaultSupportedPackages.ts +++ b/packages/react-monaco-editor/src/utilities/defaultSupportedPackages.ts @@ -18,6 +18,11 @@ const exampleDataGroup: IPackageGroup = { loadGlobal: cb => require.ensure([], require => cb(require('@fluentui/example-data'))), packages: [], }; +const chartingGroup: IPackageGroup = { + globalName: 'FluentUIReactCharting', + loadGlobal: cb => require.ensure([], require => cb(require('@fluentui/react-charting'))), + packages: [], +}; let typesContext: __WebpackModuleApi.RequireContext | undefined; try { @@ -32,6 +37,7 @@ try { } catch (ex) { // We're probably running in jest, which doesn't have webpack's require.context } +const loadTypes = () => ''; if (typesContext) { typesContext.keys().forEach(dtsPath => { // The api-extractor .d.ts rollups use the package's unscoped name (such as "utilities") @@ -57,7 +63,6 @@ if (typesContext) { }); } else { // Use some defaults for jest tests (real types won't be loaded) - const loadTypes = () => ''; fabricGroup.packages.push( { packageName: '@fluentui/date-time-utilities', loadTypes }, { packageName: '@fluentui/dom-utilities', loadTypes }, @@ -74,9 +79,12 @@ if (typesContext) { hooksGroup.packages.push({ packageName: '@fluentui/react-hooks', loadTypes }); exampleDataGroup.packages.push({ packageName: '@fluentui/example-data', loadTypes }); } +if (typeof window === 'object' && window.location.href.indexOf('react-charting') !== -1) { + chartingGroup.packages.push({ packageName: '@fluentui/react-charting', loadTypes }); +} /** * Default supported packages for imports: `@fluentui/react` and everything it exports, * plus `@fluentui/example-data`. (React is implicitly supported.) */ -export const SUPPORTED_PACKAGES: IPackageGroup[] = [fabricGroup, hooksGroup, exampleDataGroup]; +export const SUPPORTED_PACKAGES: IPackageGroup[] = [fabricGroup, hooksGroup, exampleDataGroup, chartingGroup]; diff --git a/packages/react/src/components/DetailsList/DetailsList.test.tsx b/packages/react/src/components/DetailsList/DetailsList.test.tsx index d2e40b859ee35..0daf2b79faf2c 100644 --- a/packages/react/src/components/DetailsList/DetailsList.test.tsx +++ b/packages/react/src/components/DetailsList/DetailsList.test.tsx @@ -68,19 +68,16 @@ function customColumnDivider( describe('DetailsList', () => { let spy: jest.SpyInstance; - beforeAll(() => { + beforeEach(() => { /* eslint-disable-next-line @typescript-eslint/no-empty-function */ spy = jest.spyOn(window, 'scrollTo').mockImplementation(() => {}); + resetIds(); }); afterAll(() => { spy.mockRestore(); }); - beforeEach(() => { - resetIds(); - }); - afterEach(() => { if ((setTimeout as unknown as jest.Mock).mock) { jest.runOnlyPendingTimers(); diff --git a/packages/react/src/components/DetailsList/DetailsListV2.test.tsx b/packages/react/src/components/DetailsList/DetailsListV2.test.tsx index da42473541867..9766f957b55d8 100644 --- a/packages/react/src/components/DetailsList/DetailsListV2.test.tsx +++ b/packages/react/src/components/DetailsList/DetailsListV2.test.tsx @@ -77,7 +77,8 @@ const groupProps: IDetailsGroupRenderProps = { */ describe('DetailsListV2', () => { let spy: jest.SpyInstance; - beforeAll(() => { + + beforeEach(() => { /* eslint-disable-next-line @typescript-eslint/no-empty-function */ spy = jest.spyOn(window, 'scrollTo').mockImplementation(() => {}); }); diff --git a/packages/react/src/components/Dialog/Dialog.deprecated.test.tsx b/packages/react/src/components/Dialog/Dialog.deprecated.test.tsx index 57c18ad1942db..c6ac7dc65bfc3 100644 --- a/packages/react/src/components/Dialog/Dialog.deprecated.test.tsx +++ b/packages/react/src/components/Dialog/Dialog.deprecated.test.tsx @@ -6,24 +6,24 @@ import { resetIds, setWarningCallback } from '../../Utilities'; import { DialogBase } from './Dialog.base'; describe('Dialog deprecated props', () => { - beforeEach(() => { - resetIds(); + beforeAll(() => { + // eslint-disable-next-line @typescript-eslint/no-empty-function + const noop = () => {}; + // Prevent warn deprecations from failing test + setWarningCallback(noop); }); - afterAll(() => { + beforeEach(() => { resetIds(); - }); - - beforeAll(() => { - // Prevent warn deprecations from failing test - setWarningCallback(() => { - /* no-op */ - }); (ReactDOM.createPortal as any) = jest.fn((element, node) => { return element; }); }); + afterAll(() => { + setWarningCallback(); + }); + afterEach(() => { (ReactDOM.createPortal as any).mockClear(); jest.useRealTimers(); diff --git a/packages/react/src/components/Dialog/Dialog.test.tsx b/packages/react/src/components/Dialog/Dialog.test.tsx index 1d5b969ac78d7..83186263f8f3a 100644 --- a/packages/react/src/components/Dialog/Dialog.test.tsx +++ b/packages/react/src/components/Dialog/Dialog.test.tsx @@ -14,11 +14,6 @@ describe('Dialog', () => { resetIds(); }); - afterEach(() => { - setWarningCallback(); - jest.useRealTimers(); - }); - afterAll(() => { resetIds(); }); @@ -86,11 +81,14 @@ describe('Dialog', () => { expect(queryByRole('dialog')).toBeFalsy(); expect(onDismissed).toHaveBeenCalledTimes(1); + + jest.useRealTimers(); }); it('deprecated isOpen controls open state of the dialog', () => { // suppress deprecation warning as error - setWarningCallback(() => undefined); + // eslint-disable-next-line @typescript-eslint/no-empty-function + setWarningCallback(() => {}); jest.useFakeTimers(); const onDismissed = jest.fn(); @@ -106,6 +104,9 @@ describe('Dialog', () => { expect(queryByRole('dialog')).toBeFalsy(); expect(onDismissed).toHaveBeenCalledTimes(1); + + jest.useRealTimers(); + setWarningCallback(); }); it('Properly attaches auto-generated aria attributes IDs', () => { @@ -154,7 +155,7 @@ describe('Dialog', () => {