diff --git a/.codesandbox/ci.json b/.codesandbox/ci.json index ca72bb41e8229c..2cd7dc2ea27a1e 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/.devcontainer/Dockerfile b/.devcontainer/Dockerfile index 13ae7dd53e4f18..1ffe54fd051bc3 100644 --- a/.devcontainer/Dockerfile +++ b/.devcontainer/Dockerfile @@ -1,7 +1,7 @@ # See here for image contents: https://github.com/microsoft/vscode-dev-containers/tree/v0.222.0/containers/javascript-node/.devcontainer/base.Dockerfile # [Choice] Node.js version (use -bullseye variants on local arm64/Apple Silicon): 16, 14, 12, 16-bullseye, 14-bullseye, 12-bullseye, 16-buster, 14-buster, 12-buster -ARG VARIANT="14-bullseye" +ARG VARIANT="16-bullseye" FROM mcr.microsoft.com/vscode/devcontainers/javascript-node:0-${VARIANT} # [Optional] Uncomment this section to install additional OS packages. diff --git a/.devcontainer/devcontainer.json b/.devcontainer/devcontainer.json index 9239298f19fa90..2d7b3cdd017cd7 100644 --- a/.devcontainer/devcontainer.json +++ b/.devcontainer/devcontainer.json @@ -7,7 +7,7 @@ // Update 'VARIANT' to pick a Node version: 16, 14, 12. // Append -bullseye or -buster to pin to an OS version. // Use -bullseye variants on local arm64/Apple Silicon. - "args": { "VARIANT": "14" } + "args": { "VARIANT": "16" } }, // Set *default* container specific settings.json values on container create. "settings": {}, diff --git a/.devops/templates/tools.yml b/.devops/templates/tools.yml index 5b8b5d5004929c..808451359407fe 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 a2389381423bfc..a4f842967e3abc 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,13 +220,12 @@ 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 packages/react-components/react-skeleton @microsoft/cxe-red packages/tokens @microsoft/teams-prg -packages/react-components/react-tags @microsoft/cxe-coastal @TristanWatanabe +packages/react-components/react-tags @microsoft/cxe-coastal @YuanboXue-Amber packages/react-components/react-data-grid-react-window @microsoft/teams-prg packages/react-components/react-migration-v0-v9 @microsoft/teams-prg packages/react-components/react-datepicker-compat @microsoft/cxe-red @sopranopillow @khmakoto @@ -235,6 +235,7 @@ packages/react-components/react-drawer @microsoft/cxe-prg packages/react-components/react-storybook-addon-codesandbox @microsoft/fluentui-react-build packages/react-components/babel-preset-storybook-full-source @microsoft/fluentui-react-build packages/react-components/react-jsx-runtime @microsoft/teams-prg +packages/react-components/react-toast @microsoft/teams-prg # <%= NX-CODEOWNER-PLACEHOLDER %> ## Components diff --git a/.github/workflows/check-packages.yml b/.github/workflows/check-packages.yml index 26c19808851d00..fc352c1c4a7158 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 fc8ef562d8eba7..20610ef7235f29 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 f358f4ce03052a..6cc781319d3985 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/perf-test-react-components/package.json b/apps/perf-test-react-components/package.json index 76bb970904f1f3..96bd3644c28506 100644 --- a/apps/perf-test-react-components/package.json +++ b/apps/perf-test-react-components/package.json @@ -20,13 +20,13 @@ "dependencies": { "@fluentui/scripts-perf-test-flamegrill": "*", "@griffel/core": "^1.9.0", - "@fluentui/react-avatar": "^9.4.9", - "@fluentui/react-button": "^9.3.9", - "@fluentui/react-field": "^9.1.0", - "@fluentui/react-infobutton": "9.0.0-beta.27", - "@fluentui/react-persona": "^9.2.8", - "@fluentui/react-provider": "^9.5.3", - "@fluentui/react-spinbutton": "^9.2.10", + "@fluentui/react-avatar": "^9.4.10", + "@fluentui/react-button": "^9.3.10", + "@fluentui/react-field": "^9.1.1", + "@fluentui/react-infobutton": "9.0.0-beta.28", + "@fluentui/react-persona": "^9.2.9", + "@fluentui/react-provider": "^9.5.4", + "@fluentui/react-spinbutton": "^9.2.11", "@fluentui/react-theme": "^9.1.7", "@microsoft/load-themed-styles": "^1.10.26", "react": "17.0.2", diff --git a/apps/perf-test/package.json b/apps/perf-test/package.json index 2783b59ef08a47..63d182c4ae1b70 100644 --- a/apps/perf-test/package.json +++ b/apps/perf-test/package.json @@ -19,8 +19,8 @@ }, "dependencies": { "@fluentui/scripts-perf-test-flamegrill": "*", - "@fluentui/example-data": "^8.4.7", - "@fluentui/react": "^8.107.6", + "@fluentui/example-data": "^8.4.8", + "@fluentui/react": "^8.109.0", "@microsoft/load-themed-styles": "^1.10.26", "react": "17.0.2", "react-dom": "17.0.2", diff --git a/apps/public-docsite-resources/package.json b/apps/public-docsite-resources/package.json index 28f61da3c5481d..94bb817414ba1d 100644 --- a/apps/public-docsite-resources/package.json +++ b/apps/public-docsite-resources/package.json @@ -27,22 +27,22 @@ "update-snapshots": "just-scripts jest -u" }, "devDependencies": { - "@fluentui/api-docs": "^8.2.7", + "@fluentui/api-docs": "^8.2.8", "@fluentui/eslint-plugin": "*", "@fluentui/scripts-monorepo": "*", "@fluentui/scripts-tasks": "*", "@fluentui/scripts-webpack": "*" }, "dependencies": { - "@fluentui/react": "^8.107.6", + "@fluentui/react": "^8.109.0", "@fluentui/react-examples": "^8.34.4", "@microsoft/load-themed-styles": "^1.10.26", - "@fluentui/azure-themes": "^8.5.80", - "@fluentui/react-docsite-components": "^8.11.41", - "@fluentui/font-icons-mdl2": "^8.5.13", - "@fluentui/set-version": "^8.2.6", - "@fluentui/theme-samples": "^8.7.76", - "@fluentui/react-monaco-editor": "^1.7.76", + "@fluentui/azure-themes": "^8.6.1", + "@fluentui/react-docsite-components": "^8.12.4", + "@fluentui/font-icons-mdl2": "^8.5.15", + "@fluentui/set-version": "^8.2.8", + "@fluentui/theme-samples": "^8.7.81", + "@fluentui/react-monaco-editor": "^1.7.81", "office-ui-fabric-core": "^11.0.0", "react": "17.0.2", "react-dom": "17.0.2", diff --git a/apps/public-docsite-v9/.storybook/fix-title.js b/apps/public-docsite-v9/.storybook/fix-title.js index 2bd55cf8cb82b1..3f72f01ea672c5 100644 --- a/apps/public-docsite-v9/.storybook/fix-title.js +++ b/apps/public-docsite-v9/.storybook/fix-title.js @@ -1,6 +1,11 @@ const fs = require('fs'); const path = require('path'); +/** + * + * @param {string} filePath + * @param {string} title + */ function fixTitle(filePath, title) { const htmlDocumentPath = path.resolve(__dirname, filePath); const htmlDocument = fs.readFileSync(htmlDocumentPath, 'utf-8'); diff --git a/apps/public-docsite-v9/.storybook/main.js b/apps/public-docsite-v9/.storybook/main.js index 01f295d0ccc576..a57e9a915e54d5 100644 --- a/apps/public-docsite-v9/.storybook/main.js +++ b/apps/public-docsite-v9/.storybook/main.js @@ -1,16 +1,9 @@ -// @ts-check - -const { - getPackageStoriesGlob, - createPathAliasesConfig, - registerTsPaths, - rules, - registerRules, -} = require('@fluentui/scripts-storybook'); +const path = require('path'); +const { getPackageStoriesGlob, registerTsPaths, rules, registerRules } = require('@fluentui/scripts-storybook'); const rootMain = require('../../../.storybook/main'); -const { tsConfigAllPath } = createPathAliasesConfig(); +const tsConfigAllPath = path.join(__dirname, '../../../tsconfig.base.all.json'); module.exports = /** @type {Omit} */ ({ ...rootMain, diff --git a/apps/public-docsite-v9/.storybook/preview.js b/apps/public-docsite-v9/.storybook/preview.js index ebe4c1cf402845..1963954c0e0d4f 100644 --- a/apps/public-docsite-v9/.storybook/preview.js +++ b/apps/public-docsite-v9/.storybook/preview.js @@ -1,6 +1,8 @@ +import * as rootPreview from '../../../.storybook/preview'; + import { FluentDocsContainer } from '../src/DocsComponents/FluentDocsContainer.stories'; import { FluentDocsPage } from '../src/DocsComponents/FluentDocsPage.stories'; -import * as rootPreview from '../../../.storybook/preview'; + import './docs-root-v9.css'; /** @type {NonNullable} */ diff --git a/apps/public-docsite-v9/.storybook/theme.js b/apps/public-docsite-v9/.storybook/theme.js index bd13f4a67625fa..269f6d7244393a 100644 --- a/apps/public-docsite-v9/.storybook/theme.js +++ b/apps/public-docsite-v9/.storybook/theme.js @@ -1,4 +1,5 @@ import { create } from '@storybook/theming'; + import logo from '../public/fluentui-logo.svg'; /** diff --git a/apps/public-docsite-v9/.storybook/tsconfig.json b/apps/public-docsite-v9/.storybook/tsconfig.json new file mode 100644 index 00000000000000..663aae308c427c --- /dev/null +++ b/apps/public-docsite-v9/.storybook/tsconfig.json @@ -0,0 +1,9 @@ +{ + "extends": "../tsconfig.json", + "compilerOptions": { + "allowJs": true, + "checkJs": true, + "types": ["node", "static-assets", "storybook__addons"] + }, + "include": ["*.js"] +} diff --git a/apps/public-docsite-v9/package.json b/apps/public-docsite-v9/package.json index 0c626bd8905a00..e8a3a7c7d968b1 100644 --- a/apps/public-docsite-v9/package.json +++ b/apps/public-docsite-v9/package.json @@ -12,6 +12,7 @@ "code-style": "just-scripts code-style", "just": "just-scripts", "lint": "just-scripts lint", + "type-check": "just-scripts type-check", "start": "yarn storybook:docs", "storybook": "start-storybook --port 3000 --no-manager-cache", "storybook:docs": "yarn storybook --docs" @@ -22,13 +23,13 @@ "@fluentui/scripts-tasks": "*" }, "dependencies": { - "@fluentui/react-datepicker-compat": "0.0.0-beta.2", - "@fluentui/react-migration-v8-v9": "^9.2.9", + "@fluentui/react-datepicker-compat": "^0.0.1", + "@fluentui/react-migration-v8-v9": "^9.2.10", "@fluentui/react-migration-v0-v9": "9.0.0-alpha.0", - "@fluentui/react": "^8.107.6", + "@fluentui/react": "^8.109.0", "@fluentui/react-northstar": "^0.66.4", "@fluentui/react-icons-northstar": "^0.66.4", - "@fluentui/react-components": "^9.19.0", + "@fluentui/react-components": "^9.19.1", "@fluentui/react-storybook-addon": "9.0.0-rc.1", "@fluentui/react-storybook-addon-codesandbox": "9.0.0-alpha.0", "@griffel/react": "^1.5.2", 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 bcf94140fb3f68..75c26dff94bf3e 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/public-docsite-v9/src/Concepts/Theming.stories.mdx b/apps/public-docsite-v9/src/Concepts/Theming.stories.mdx index 93003cad90de96..108926744da185 100644 --- a/apps/public-docsite-v9/src/Concepts/Theming.stories.mdx +++ b/apps/public-docsite-v9/src/Concepts/Theming.stories.mdx @@ -14,7 +14,7 @@ const exampleTheme = { }; ``` -You can browse all the available tokens in **[Theme](/docs/theme-color--page)** section of the docs. +You can browse all the available tokens in **[Theme](/docs/theme-colors--page)** section of the docs. ## How theme is applied diff --git a/apps/public-docsite-v9/tsconfig.app.json b/apps/public-docsite-v9/tsconfig.app.json new file mode 100644 index 00000000000000..ef06ccd867c65b --- /dev/null +++ b/apps/public-docsite-v9/tsconfig.app.json @@ -0,0 +1,13 @@ +{ + "extends": "./tsconfig.json", + "compilerOptions": { + "module": "ESNext", + "target": "ES2019", + "noEmit": false, + "outDir": "lib", + "jsx": "react", + "sourceMap": true, + "types": ["webpack-env"] + }, + "include": ["src"] +} diff --git a/apps/public-docsite-v9/tsconfig.json b/apps/public-docsite-v9/tsconfig.json index cc35ba4818249e..215391a01f5626 100644 --- a/apps/public-docsite-v9/tsconfig.json +++ b/apps/public-docsite-v9/tsconfig.json @@ -1,21 +1,23 @@ { + "extends": "../../tsconfig.base.all.json", "compilerOptions": { - "target": "es5", - "outDir": "lib", - "module": "commonjs", - "jsx": "react", - "declaration": true, - "sourceMap": true, + "module": "ESNext", + "target": "ES2019", "noEmit": true, "experimentalDecorators": true, "noUnusedLocals": true, - "forceConsistentCasingInFileNames": true, "strictNullChecks": true, "noImplicitAny": true, - "moduleResolution": "node", - "preserveConstEnums": true, - "skipLibCheck": true, - "types": ["webpack-env", "@storybook/react"] + "types": ["webpack-env"] }, - "include": ["src"] + "include": [], + "files": [], + "references": [ + { + "path": "./tsconfig.app.json" + }, + { + "path": "./.storybook/tsconfig.json" + } + ] } diff --git a/apps/public-docsite/package.json b/apps/public-docsite/package.json index aca0378a3b9e13..bb1b6619a32275 100644 --- a/apps/public-docsite/package.json +++ b/apps/public-docsite/package.json @@ -23,29 +23,29 @@ }, "license": "MIT", "devDependencies": { - "@fluentui/common-styles": "^1.2.22", + "@fluentui/common-styles": "^1.2.24", "@fluentui/eslint-plugin": "*", - "@fluentui/react-monaco-editor": "^1.7.76", + "@fluentui/react-monaco-editor": "^1.7.81", "write-file-webpack-plugin": "^4.1.0", "@fluentui/scripts-tasks": "*", "@fluentui/scripts-webpack": "*" }, "dependencies": { - "@fluentui/font-icons-mdl2": "^8.5.13", + "@fluentui/font-icons-mdl2": "^8.5.15", "@fluentui/public-docsite-resources": "^8.1.41", - "@fluentui/public-docsite-setup": "^0.3.18", - "@fluentui/react": "^8.107.6", - "@fluentui/react-docsite-components": "^8.11.41", + "@fluentui/public-docsite-setup": "^0.3.19", + "@fluentui/react": "^8.109.0", + "@fluentui/react-docsite-components": "^8.12.4", "@fluentui/react-examples": "^8.34.4", - "@fluentui/react-experiments": "^8.14.71", - "@fluentui/fluent2-theme": "^8.107.0", - "@fluentui/react-file-type-icons": "^8.8.13", - "@fluentui/react-icons-mdl2": "^1.3.37", - "@fluentui/react-icons-mdl2-branded": "^1.2.38", - "@fluentui/set-version": "^8.2.6", - "@fluentui/theme": "^2.6.25", - "@fluentui/theme-samples": "^8.7.76", - "@fluentui/utilities": "^8.13.9", + "@fluentui/react-experiments": "^8.14.76", + "@fluentui/fluent2-theme": "^8.107.5", + "@fluentui/react-file-type-icons": "^8.8.15", + "@fluentui/react-icons-mdl2": "^1.3.39", + "@fluentui/react-icons-mdl2-branded": "^1.2.40", + "@fluentui/set-version": "^8.2.8", + "@fluentui/theme": "^2.6.27", + "@fluentui/theme-samples": "^8.7.81", + "@fluentui/utilities": "^8.13.11", "@microsoft/load-themed-styles": "^1.10.26", "office-ui-fabric-core": "^11.0.0", "react": "17.0.2", diff --git a/apps/public-docsite/src/SiteDefinition/SiteDefinition.tsx b/apps/public-docsite/src/SiteDefinition/SiteDefinition.tsx index 3948ae4db1fa84..a64e92ecf17530 100644 --- a/apps/public-docsite/src/SiteDefinition/SiteDefinition.tsx +++ b/apps/public-docsite/src/SiteDefinition/SiteDefinition.tsx @@ -62,21 +62,7 @@ export const SiteDefinition: ISiteDefinition = { { from: '#/styles/web/fluent-theme', to: '#/controls/web/themes' }, { from: '#/examples', to: '#/controls/web' }, ], - messageBars: [ - { - path: '#', - text: ( - - 🎉 Announcing Fluent UI React v9 stable release! Visit{' '} - - Fluent UI React v9 - {' '} - to see more. - - ), - sessionStoragePrefix: 'FluentUI9', - }, - ], + messageBars: [], // This is defined by loadSite() from @fluentui/public-docsite-setup versionSwitcherDefinition: window.__versionSwitcherDefinition, }; diff --git a/apps/public-docsite/src/pages/Controls/ControlsAreaPage.tsx b/apps/public-docsite/src/pages/Controls/ControlsAreaPage.tsx index 25528c11ca408b..a75cc53f520ce0 100644 --- a/apps/public-docsite/src/pages/Controls/ControlsAreaPage.tsx +++ b/apps/public-docsite/src/pages/Controls/ControlsAreaPage.tsx @@ -9,6 +9,13 @@ export interface IControlsPageProps extends IPageProps {} const apiRequireContext = require.context('@fluentui/public-docsite-resources/dist/api/', true, /^(?!references).*/); +const webPlatformBanner = { + banner: { + title: 'Fluent UI v9', + message: 'Check out the all new [Fluent UI version 9](https://react.fluentui.dev)!', + }, +}; + const ControlsAreaPageBase: React.FunctionComponent = props => { let jsonDocs: IPageJson; if (props.platform === 'web' && !props.jsonDocs) { @@ -25,6 +32,7 @@ const ControlsAreaPageBase: React.FunctionComponent = props subTitle={getSubTitle(props.platform!)} jsonDocs={jsonDocs!} {...props} + {...(props.platform === Platforms.web && webPlatformBanner)} versionSwitcherDefinition={ props.platform === Platforms.web ? SiteDefinition.versionSwitcherDefinition : undefined } diff --git a/apps/react-18-tests-v8/jest.config.js b/apps/react-18-tests-v8/jest.config.js index dc4ce5443ae587..b61ba13a651417 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-v8/package.json b/apps/react-18-tests-v8/package.json index 77d8dad2fa5a0b..0d8ca0c10281d3 100644 --- a/apps/react-18-tests-v8/package.json +++ b/apps/react-18-tests-v8/package.json @@ -21,8 +21,8 @@ "@fluentui/scripts-webpack": "*" }, "dependencies": { - "@fluentui/react": "^8.107.6", - "@fluentui/react-hooks": "^8.6.20", + "@fluentui/react": "^8.109.0", + "@fluentui/react-hooks": "^8.6.22", "@types/react": "18.0.14", "@types/react-dom": "18.0.6", "react": "18.2.0", diff --git a/apps/react-18-tests-v9/jest.config.js b/apps/react-18-tests-v9/jest.config.js index ff2e84e73010a6..08de436edf022a 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/react-18-tests-v9/package.json b/apps/react-18-tests-v9/package.json index ea6888f531cf49..344993ad2164ef 100644 --- a/apps/react-18-tests-v9/package.json +++ b/apps/react-18-tests-v9/package.json @@ -19,7 +19,7 @@ "@fluentui/scripts-tasks": "*" }, "dependencies": { - "@fluentui/react-components": "^9.19.0", + "@fluentui/react-components": "^9.19.1", "@types/react": "18.0.14", "@types/react-dom": "18.0.6", "react": "18.2.0", diff --git a/apps/recipes-react-components/package.json b/apps/recipes-react-components/package.json index 49d93e6bcfe543..265361f87413c2 100644 --- a/apps/recipes-react-components/package.json +++ b/apps/recipes-react-components/package.json @@ -16,10 +16,10 @@ "@fluentui/scripts-tasks": "*" }, "dependencies": { - "@fluentui/react-components": "^9.19.0", + "@fluentui/react-components": "^9.19.1", "@fluentui/react-icons": "^2.0.196", "@fluentui/react-theme": "^9.1.7", - "@fluentui/react-provider": "^9.5.3", + "@fluentui/react-provider": "^9.5.4", "@fluentui/react-storybook-addon": "9.0.0-rc.1", "@fluentui/react-storybook-addon-codesandbox": "9.0.0-alpha.0", "@griffel/react": "^1.5.2", diff --git a/apps/ssr-tests-v9/jest.config.js b/apps/ssr-tests-v9/jest.config.js index 3b7292734386e0..71f9ab6510d2fa 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/ssr-tests-v9/package.json b/apps/ssr-tests-v9/package.json index 55e5200f116409..e07db339e9d385 100644 --- a/apps/ssr-tests-v9/package.json +++ b/apps/ssr-tests-v9/package.json @@ -20,7 +20,7 @@ "type-check": "tsc -b tsconfig.json" }, "dependencies": { - "@fluentui/react-components": "^9.19.0" + "@fluentui/react-components": "^9.19.1" }, "devDependencies": { "@fluentui/eslint-plugin": "*", diff --git a/apps/ssr-tests/package.json b/apps/ssr-tests/package.json index 88d990bc22fa84..845568190450cb 100644 --- a/apps/ssr-tests/package.json +++ b/apps/ssr-tests/package.json @@ -13,7 +13,7 @@ }, "license": "MIT", "devDependencies": { - "@fluentui/react": "^8.107.6", + "@fluentui/react": "^8.109.0", "@microsoft/load-themed-styles": "^1.10.26", "@types/mocha": "7.0.2", "@fluentui/public-docsite-resources": "^8.1.41", diff --git a/apps/stress-test/jest.config.js b/apps/stress-test/jest.config.js index 3b7292734386e0..71f9ab6510d2fa 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/stress-test/package.json b/apps/stress-test/package.json index ed4b24f748de8c..f65fd143a3f165 100644 --- a/apps/stress-test/package.json +++ b/apps/stress-test/package.json @@ -10,8 +10,8 @@ "type-check": "tsc -b tsconfig.type.json" }, "dependencies": { - "@fluentui/react": "^8.107.6", - "@fluentui/react-components": "^9.19.0", + "@fluentui/react": "^8.109.0", + "@fluentui/react-components": "^9.19.1", "@fluentui/react-icons": "^2.0.196", "@fluentui/web-components": "^2.5.14", "@microsoft/fast-element": "^1.11.1", diff --git a/apps/stress-test/webpack/webpack.config.ts b/apps/stress-test/webpack/webpack.config.ts index e2ff29043c58b9..b3a42e043ce9bc 100644 --- a/apps/stress-test/webpack/webpack.config.ts +++ b/apps/stress-test/webpack/webpack.config.ts @@ -2,7 +2,7 @@ import * as path from 'path'; import { fileURLToPath } from 'url'; import { CleanWebpackPlugin } from 'clean-webpack-plugin'; // eslint-disable-next-line import/no-extraneous-dependencies -import { registerTsPaths, createPathAliasesConfig, rules } from '@fluentui/scripts-storybook'; +import { registerTsPaths, rules } from '@fluentui/scripts-storybook'; import { configurePages } from './pageConfig.js'; import { configureGriffel } from './griffelConfig.js'; import * as WebpackDevServer from 'webpack-dev-server'; @@ -12,7 +12,7 @@ const enabledReactProfiling = true; const __dirname = path.dirname(fileURLToPath(import.meta.url)); -const { tsConfigAllPath } = createPathAliasesConfig(); +const tsConfigAllPath = path.join(__dirname, '../../../tsconfig.base.all.json'); type WebpackArgs = { mode: 'production' | 'development' | 'none'; diff --git a/apps/theming-designer/package.json b/apps/theming-designer/package.json index 0a2d939ddd0e6e..278e8311f957e5 100644 --- a/apps/theming-designer/package.json +++ b/apps/theming-designer/package.json @@ -19,13 +19,13 @@ "@fluentui/scripts-webpack": "*" }, "dependencies": { - "@fluentui/react": "^8.107.6", - "@fluentui/merge-styles": "^8.5.7", - "@fluentui/react-docsite-components": "^8.11.41", - "@fluentui/foundation-legacy": "^8.2.33", - "@fluentui/scheme-utilities": "^8.3.26", - "@fluentui/set-version": "^8.2.6", - "@fluentui/font-icons-mdl2": "^8.5.13", + "@fluentui/react": "^8.109.0", + "@fluentui/merge-styles": "^8.5.9", + "@fluentui/react-docsite-components": "^8.12.4", + "@fluentui/foundation-legacy": "^8.2.35", + "@fluentui/scheme-utilities": "^8.3.28", + "@fluentui/set-version": "^8.2.8", + "@fluentui/font-icons-mdl2": "^8.5.15", "@microsoft/load-themed-styles": "^1.10.26", "react": "17.0.2", "react-dom": "17.0.2", diff --git a/apps/ts-minbar-test-react-components/package.json b/apps/ts-minbar-test-react-components/package.json index 9d590a3f21cc5e..d23cd46b210da0 100644 --- a/apps/ts-minbar-test-react-components/package.json +++ b/apps/ts-minbar-test-react-components/package.json @@ -5,7 +5,7 @@ "description": "Testing Fluent UI React Components compatibility with Typescript 3.9", "license": "MIT", "dependencies": { - "@fluentui/react-components": "^9.19.0" + "@fluentui/react-components": "^9.19.1" }, "scripts": { "type-check": "tsc -p .", diff --git a/apps/ts-minbar-test-react/package.json b/apps/ts-minbar-test-react/package.json index f144f8f0b2b954..8b9c9357b2a506 100644 --- a/apps/ts-minbar-test-react/package.json +++ b/apps/ts-minbar-test-react/package.json @@ -5,7 +5,7 @@ "description": "Testing Fluent UI React compatibility with Typescript 3.9", "license": "MIT", "dependencies": { - "@fluentui/react": "^8.107.6" + "@fluentui/react": "^8.109.0" }, "scripts": { "type-check": "tsc -p .", diff --git a/apps/ts-minbar-test-react/src/index.ts b/apps/ts-minbar-test-react/src/index.ts index da1ecaff5a6cae..b268f2e16afbb0 100644 --- a/apps/ts-minbar-test-react/src/index.ts +++ b/apps/ts-minbar-test-react/src/index.ts @@ -1,4 +1,3 @@ -import * as fs from 'fs'; import * as path from 'path'; import { @@ -25,13 +24,10 @@ async function performTest() { tempPaths = prepareTempDirs(`${testName}-`); logger(`✔️ Temporary directories created under ${tempPaths.root}`); - // https://github.com/microsoft/fluentui/issues/27425 - remove related logic once issue will be resolved - const pinnedReactTypesVersion = '17.0.55'; - // Install dependencies, using the minimum TS version supported for consumers const dependencies = [ '@types/node@14', - `@types/react@${pinnedReactTypesVersion}`, + `@types/react@17`, '@types/react-dom@17', 'react@17', 'react-dom@17', @@ -44,13 +40,6 @@ async function performTest() { const packedPackages = await packProjectPackages(logger, lernaRoot, ['@fluentui/react']); await addResolutionPathsForProjectPackages(tempPaths.testApp); - // Remove Start - once will be resolved https://github.com/microsoft/fluentui/issues/27425 - const jsonPath = path.resolve(tempPaths.testApp, 'package.json'); - const packageJson = JSON.parse(fs.readFileSync(jsonPath, 'utf-8')); - packageJson.resolutions['@types/react-dom/@types/react'] = pinnedReactTypesVersion; - fs.writeFileSync(jsonPath, JSON.stringify(packageJson), 'utf-8'); - // Remove End - await shEcho(`yarn add ${packedPackages['@fluentui/react']}`, tempPaths.testApp); logger(`✔️ Fluent UI packages were added to dependencies`); diff --git a/apps/vr-tests-react-components/jest.config.js b/apps/vr-tests-react-components/jest.config.js index ee67c7a86d2501..860d9c97635c56 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/apps/vr-tests-react-components/package.json b/apps/vr-tests-react-components/package.json index 68cf48257cf97c..04b2c993ac1996 100644 --- a/apps/vr-tests-react-components/package.json +++ b/apps/vr-tests-react-components/package.json @@ -20,47 +20,47 @@ "@fluentui/scripts-storybook": "*" }, "dependencies": { - "@fluentui/react-accordion": "^9.1.9", - "@fluentui/react-avatar": "^9.4.9", - "@fluentui/react-badge": "^9.1.9", - "@fluentui/react-button": "^9.3.9", - "@fluentui/react-card": "^9.0.7", - "@fluentui/react-checkbox": "^9.1.10", - "@fluentui/react-combobox": "^9.2.10", - "@fluentui/react-datepicker-compat": "0.0.0-beta.2", - "@fluentui/react-dialog": "^9.5.2", - "@fluentui/react-divider": "^9.2.9", - "@fluentui/react-field": "^9.1.0", + "@fluentui/react-accordion": "^9.1.10", + "@fluentui/react-avatar": "^9.4.10", + "@fluentui/react-badge": "^9.1.10", + "@fluentui/react-button": "^9.3.10", + "@fluentui/react-card": "^9.0.8", + "@fluentui/react-checkbox": "^9.1.11", + "@fluentui/react-combobox": "^9.2.11", + "@fluentui/react-datepicker-compat": "^0.0.1", + "@fluentui/react-dialog": "^9.5.3", + "@fluentui/react-divider": "^9.2.10", + "@fluentui/react-field": "^9.1.1", "@fluentui/react-icons": "^2.0.196", - "@fluentui/react-image": "^9.1.6", - "@fluentui/react-infobutton": "9.0.0-beta.27", - "@fluentui/react-input": "^9.4.10", - "@fluentui/react-label": "^9.1.9", - "@fluentui/react-link": "^9.0.35", - "@fluentui/react-menu": "^9.7.9", - "@fluentui/react-persona": "^9.2.8", - "@fluentui/react-popover": "^9.5.9", + "@fluentui/react-image": "^9.1.7", + "@fluentui/react-infobutton": "9.0.0-beta.28", + "@fluentui/react-input": "^9.4.11", + "@fluentui/react-label": "^9.1.10", + "@fluentui/react-link": "^9.0.36", + "@fluentui/react-menu": "^9.7.10", + "@fluentui/react-persona": "^9.2.9", + "@fluentui/react-popover": "^9.5.10", "@fluentui/react-portal": "^9.2.6", "@fluentui/react-positioning": "^9.5.10", - "@fluentui/react-progress": "^9.1.10", - "@fluentui/react-provider": "^9.5.3", - "@fluentui/react-radio": "^9.1.10", - "@fluentui/react-select": "^9.1.10", + "@fluentui/react-progress": "^9.1.11", + "@fluentui/react-provider": "^9.5.4", + "@fluentui/react-radio": "^9.1.11", + "@fluentui/react-select": "^9.1.11", "@fluentui/react-shared-contexts": "^9.3.3", - "@fluentui/react-skeleton": "9.0.0-beta.9", - "@fluentui/react-slider": "^9.1.10", - "@fluentui/react-spinner": "^9.1.9", - "@fluentui/react-spinbutton": "^9.2.10", + "@fluentui/react-skeleton": "9.0.0-beta.10", + "@fluentui/react-slider": "^9.1.11", + "@fluentui/react-spinner": "^9.1.10", + "@fluentui/react-spinbutton": "^9.2.11", "@fluentui/react-storybook-addon": "9.0.0-rc.1", "@fluentui/react-storybook-addon-codesandbox": "9.0.0-alpha.0", - "@fluentui/react-switch": "^9.1.10", - "@fluentui/react-tabs": "^9.3.10", - "@fluentui/react-table": "^9.2.6", - "@fluentui/react-text": "^9.3.6", - "@fluentui/react-textarea": "^9.3.10", + "@fluentui/react-switch": "^9.1.11", + "@fluentui/react-tabs": "^9.3.11", + "@fluentui/react-table": "^9.2.7", + "@fluentui/react-text": "^9.3.7", + "@fluentui/react-textarea": "^9.3.11", "@fluentui/react-theme": "^9.1.7", - "@fluentui/react-tooltip": "^9.2.9", - "@fluentui/react-toolbar": "^9.1.10", + "@fluentui/react-tooltip": "^9.2.10", + "@fluentui/react-toolbar": "^9.1.11", "@fluentui/react-utilities": "^9.8.0", "@griffel/react": "^1.5.2", "react": "17.0.2", diff --git a/apps/vr-tests-react-components/src/stories/Avatar.stories.tsx b/apps/vr-tests-react-components/src/stories/Avatar.stories.tsx index 282b0674b386ed..5345c5135a46ef 100644 --- a/apps/vr-tests-react-components/src/stories/Avatar.stories.tsx +++ b/apps/vr-tests-react-components/src/stories/Avatar.stories.tsx @@ -2,6 +2,7 @@ import { storiesOf } from '@storybook/react'; import * as React from 'react'; import { Steps, StoryWright } from 'storywright'; import { Avatar, AvatarProps } from '@fluentui/react-avatar'; +import { tokens } from '@fluentui/react-theme'; import { PeopleRegular, PersonCallRegular } from '@fluentui/react-icons'; const imageRoot = 'http://fabricweb.azureedge.net/fabric-website/assets/images/avatar'; @@ -230,11 +231,28 @@ storiesOf('Avatar Converged', module) .addStory('size+active+ring-shadow', () => ( ))*/ + .addStory( + 'badgeMask', + () => ( +
+ +
+ ), + { includeRtl: true }, + ) .addStory('customSize+image', () => ) .addStory('customSize+name+badge', () => ( )) - .addStory('customSize+icon+active', () => ) + .addStory('customSize+icon+active', () => ) .addStory('color', () => , { includeHighContrast: true, includeDarkMode: true, diff --git a/apps/vr-tests-react-components/src/stories/DatePickerCompat.stories.tsx b/apps/vr-tests-react-components/src/stories/DatePickerCompat.stories.tsx index a6dcf7050d5791..d4e49f10299288 100644 --- a/apps/vr-tests-react-components/src/stories/DatePickerCompat.stories.tsx +++ b/apps/vr-tests-react-components/src/stories/DatePickerCompat.stories.tsx @@ -1,6 +1,7 @@ import * as React from 'react'; import { Steps, StoryWright } from 'storywright'; import { DatePicker as DatePickerBase, DateRangeType } from '@fluentui/react-datepicker-compat'; +import { Field } from '@fluentui/react-field'; import { storiesOf } from '@storybook/react'; import { TestWrapperDecorator } from '../utilities/TestWrapperDecorator'; import type { DatePickerProps } from '@fluentui/react-datepicker-compat'; @@ -37,18 +38,14 @@ storiesOf('DatePicker Compat', module) .addDecorator(story => ( {story()} )) - .addStory('DateRange: day', () => ( - - )) - .addStory('DateRange: week', () => ( - - )) + .addStory('DateRange: day', () => ) + .addStory('DateRange: week', () => ) .addStory('DateRange: work week', () => ( - + )) .addStory( 'DateRange: month', - () => , + () => , { includeDarkMode: true, includeHighContrast: true, @@ -61,7 +58,7 @@ storiesOf('DatePicker Compat', module) calendar={{ calendarDayProps: { getMarkedDays: (start, end) => [new Date('3/15/2023'), new Date('3/10/2023')] }, }} - popover={{ open: true }} + defaultOpen={true} /> ), { @@ -69,12 +66,24 @@ storiesOf('DatePicker Compat', module) includeHighContrast: true, }, ) - .addStory('showWeekNumbers', () => , { + .addStory('showWeekNumbers', () => , { includeDarkMode: true, includeHighContrast: true, }) .addStory('allowTextInput', () => ) - .addStory('Required', () => ) + .addStory('Required', () => ( + + + + )) .addStory('Underlined', () => ) - .addStory('Underlined and required', () => ) - .addStory('With label', () => ); + .addStory('Underlined and required', () => ( + + + + )) + .addStory('With label', () => ( + + + + )); diff --git a/apps/vr-tests/package.json b/apps/vr-tests/package.json index ffa70fbf984cc0..507fefc9bd9759 100644 --- a/apps/vr-tests/package.json +++ b/apps/vr-tests/package.json @@ -20,12 +20,12 @@ "@fluentui/scripts-tasks": "*" }, "dependencies": { - "@fluentui/example-data": "^8.4.7", - "@fluentui/font-icons-mdl2": "^8.5.13", - "@fluentui/react": "^8.107.6", - "@fluentui/react-experiments": "^8.14.71", - "@fluentui/react-hooks": "^8.6.20", - "@fluentui/react-icons-mdl2": "^1.3.37", + "@fluentui/example-data": "^8.4.8", + "@fluentui/font-icons-mdl2": "^8.5.15", + "@fluentui/react": "^8.109.0", + "@fluentui/react-experiments": "^8.14.76", + "@fluentui/react-hooks": "^8.6.22", + "@fluentui/react-icons-mdl2": "^1.3.39", "@fluentui/storybook": "^1.0.0", "react": "17.0.2", "react-dom": "17.0.2", diff --git a/azure-pipelines.yml b/azure-pipelines.yml index 3a4a437264cd75..00e58ddc63b17e 100644 --- a/azure-pipelines.yml +++ b/azure-pipelines.yml @@ -31,7 +31,8 @@ jobs: - script: | yarn nx workspace-lint yarn nx run @fluentui/nx-workspace-tools:check-graph - displayName: NX workspace lint + yarn nx workspace-generator tsconfig-base-all --verify + displayName: Workspace lint - script: | # @fluentui/api-docs is used within apps/public-docsite-resources/just.config.ts, thus it needs to be build in advance diff --git a/change/@fluentui-babel-preset-global-context-c4a6b25c-8ca3-4466-8b10-43aadd3b0941.json b/change/@fluentui-babel-preset-global-context-c4a6b25c-8ca3-4466-8b10-43aadd3b0941.json new file mode 100644 index 00000000000000..8671002cdb7da5 --- /dev/null +++ b/change/@fluentui-babel-preset-global-context-c4a6b25c-8ca3-4466-8b10-43aadd3b0941.json @@ -0,0 +1,7 @@ +{ + "type": "none", + "comment": "fix: update npmignore files to fix npm8/node16 regression how npm publish works", + "packageName": "@fluentui/babel-preset-global-context", + "email": "martinhochel@microsoft.com", + "dependentChangeType": "none" +} 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 00000000000000..fe5f8da92b5095 --- /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-global-context-f043e2ef-88bb-43d0-861e-d8a90108ebba.json b/change/@fluentui-global-context-f043e2ef-88bb-43d0-861e-d8a90108ebba.json new file mode 100644 index 00000000000000..9d32fb827e8582 --- /dev/null +++ b/change/@fluentui-global-context-f043e2ef-88bb-43d0-861e-d8a90108ebba.json @@ -0,0 +1,7 @@ +{ + "type": "none", + "comment": "fix: update npmignore files to fix npm8/node16 regression how npm publish works", + "packageName": "@fluentui/global-context", + "email": "martinhochel@microsoft.com", + "dependentChangeType": "none" +} diff --git a/change/@fluentui-keyboard-keys-635a36fe-90cd-4e94-9b91-cdc763164de5.json b/change/@fluentui-keyboard-keys-635a36fe-90cd-4e94-9b91-cdc763164de5.json new file mode 100644 index 00000000000000..0960a2b254ce68 --- /dev/null +++ b/change/@fluentui-keyboard-keys-635a36fe-90cd-4e94-9b91-cdc763164de5.json @@ -0,0 +1,7 @@ +{ + "type": "none", + "comment": "fix: update npmignore files to fix npm8/node16 regression how npm publish works", + "packageName": "@fluentui/keyboard-keys", + "email": "martinhochel@microsoft.com", + "dependentChangeType": "none" +} diff --git a/change/@fluentui-priority-overflow-bd64adf1-019d-4f23-8b9d-c59f073c16f4.json b/change/@fluentui-priority-overflow-bd64adf1-019d-4f23-8b9d-c59f073c16f4.json new file mode 100644 index 00000000000000..0058c91ac75aef --- /dev/null +++ b/change/@fluentui-priority-overflow-bd64adf1-019d-4f23-8b9d-c59f073c16f4.json @@ -0,0 +1,7 @@ +{ + "type": "none", + "comment": "fix: update npmignore files to fix npm8/node16 regression how npm publish works", + "packageName": "@fluentui/priority-overflow", + "email": "martinhochel@microsoft.com", + "dependentChangeType": "none" +} diff --git a/change/@fluentui-react-accordion-7979203f-77d1-434d-83a4-d6c6b82cff92.json b/change/@fluentui-react-accordion-7979203f-77d1-434d-83a4-d6c6b82cff92.json new file mode 100644 index 00000000000000..3463b2cf93384e --- /dev/null +++ b/change/@fluentui-react-accordion-7979203f-77d1-434d-83a4-d6c6b82cff92.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "Update to use single hook selector", + "packageName": "@fluentui/react-accordion", + "email": "gcox@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-accordion-aba06404-9805-45cf-ade1-6a492731a92f.json b/change/@fluentui-react-accordion-aba06404-9805-45cf-ade1-6a492731a92f.json new file mode 100644 index 00000000000000..abfc440bcf26d2 --- /dev/null +++ b/change/@fluentui-react-accordion-aba06404-9805-45cf-ade1-6a492731a92f.json @@ -0,0 +1,7 @@ +{ + "type": "none", + "comment": "fix: update npmignore files to fix npm8/node16 regression how npm publish works", + "packageName": "@fluentui/react-accordion", + "email": "martinhochel@microsoft.com", + "dependentChangeType": "none" +} diff --git a/change/@fluentui-react-alert-27509a22-8255-4af8-aa0c-5a129d8d7ddc.json b/change/@fluentui-react-alert-27509a22-8255-4af8-aa0c-5a129d8d7ddc.json new file mode 100644 index 00000000000000..6875e4ae90daa4 --- /dev/null +++ b/change/@fluentui-react-alert-27509a22-8255-4af8-aa0c-5a129d8d7ddc.json @@ -0,0 +1,7 @@ +{ + "type": "none", + "comment": "fix: update npmignore files to fix npm8/node16 regression how npm publish works", + "packageName": "@fluentui/react-alert", + "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 00000000000000..67ec74f9958e0c --- /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-alert-d8871ce1-c56c-4938-8322-697717c6160a.json b/change/@fluentui-react-alert-d8871ce1-c56c-4938-8322-697717c6160a.json deleted file mode 100644 index be92a57b47059b..00000000000000 --- a/change/@fluentui-react-alert-d8871ce1-c56c-4938-8322-697717c6160a.json +++ /dev/null @@ -1,7 +0,0 @@ -{ - "type": "prerelease", - "comment": "bugfix: remove caret from react-jsx-runtime prerelease dependency", - "packageName": "@fluentui/react-alert", - "email": "bernardo.sunderhus@gmail.com", - "dependentChangeType": "patch" -} diff --git a/change/@fluentui-react-aria-59eb2b08-dc8b-437e-ad60-c1ef6316771a.json b/change/@fluentui-react-aria-59eb2b08-dc8b-437e-ad60-c1ef6316771a.json new file mode 100644 index 00000000000000..2028a96c5d155b --- /dev/null +++ b/change/@fluentui-react-aria-59eb2b08-dc8b-437e-ad60-c1ef6316771a.json @@ -0,0 +1,7 @@ +{ + "type": "none", + "comment": "fix: update npmignore files to fix npm8/node16 regression how npm publish works", + "packageName": "@fluentui/react-aria", + "email": "martinhochel@microsoft.com", + "dependentChangeType": "none" +} diff --git a/change/@fluentui-react-avatar-410511e9-48ba-4a8e-ad67-49398e93c4c9.json b/change/@fluentui-react-avatar-410511e9-48ba-4a8e-ad67-49398e93c4c9.json new file mode 100644 index 00000000000000..c2c8e04131ffc6 --- /dev/null +++ b/change/@fluentui-react-avatar-410511e9-48ba-4a8e-ad67-49398e93c4c9.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "Update to use single hook selector", + "packageName": "@fluentui/react-avatar", + "email": "gcox@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-avatar-4dcc2dda-2c06-40ae-a470-fe31e7e590c0.json b/change/@fluentui-react-avatar-4dcc2dda-2c06-40ae-a470-fe31e7e590c0.json new file mode 100644 index 00000000000000..8b537ece145777 --- /dev/null +++ b/change/@fluentui-react-avatar-4dcc2dda-2c06-40ae-a470-fe31e7e590c0.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "chore: move makeStyles() calls to .styles.ts files", + "packageName": "@fluentui/react-avatar", + "email": "olfedias@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-avatar-760817f7-6ac8-4e84-8292-97987dfd22e9.json b/change/@fluentui-react-avatar-760817f7-6ac8-4e84-8292-97987dfd22e9.json new file mode 100644 index 00000000000000..ed24db597dbf72 --- /dev/null +++ b/change/@fluentui-react-avatar-760817f7-6ac8-4e84-8292-97987dfd22e9.json @@ -0,0 +1,7 @@ +{ + "type": "none", + "comment": "fix: update npmignore files to fix npm8/node16 regression how npm publish works", + "packageName": "@fluentui/react-avatar", + "email": "martinhochel@microsoft.com", + "dependentChangeType": "none" +} diff --git a/change/@fluentui-react-avatar-e8c58b22-266b-4609-9169-1a26cdef500c.json b/change/@fluentui-react-avatar-e8c58b22-266b-4609-9169-1a26cdef500c.json new file mode 100644 index 00000000000000..75d39b8085001d --- /dev/null +++ b/change/@fluentui-react-avatar-e8c58b22-266b-4609-9169-1a26cdef500c.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "fix: Make border around badge transparent, not a solid color", + "packageName": "@fluentui/react-avatar", + "email": "behowell@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-badge-02074864-69a0-4b49-8806-ca7fbee6a2ff.json b/change/@fluentui-react-badge-02074864-69a0-4b49-8806-ca7fbee6a2ff.json new file mode 100644 index 00000000000000..f03fb4c705e66c --- /dev/null +++ b/change/@fluentui-react-badge-02074864-69a0-4b49-8806-ca7fbee6a2ff.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "Update to use single hook selector", + "packageName": "@fluentui/react-badge", + "email": "gcox@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-badge-4331f494-c456-4abe-979c-b6b951160968.json b/change/@fluentui-react-badge-4331f494-c456-4abe-979c-b6b951160968.json new file mode 100644 index 00000000000000..f83020f690df79 --- /dev/null +++ b/change/@fluentui-react-badge-4331f494-c456-4abe-979c-b6b951160968.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "chore: move makeStyles() calls to .styles.ts files", + "packageName": "@fluentui/react-badge", + "email": "olfedias@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-badge-814d6341-524b-4cb5-8d3f-11f9777fe68c.json b/change/@fluentui-react-badge-814d6341-524b-4cb5-8d3f-11f9777fe68c.json new file mode 100644 index 00000000000000..0c14a3f68bd9db --- /dev/null +++ b/change/@fluentui-react-badge-814d6341-524b-4cb5-8d3f-11f9777fe68c.json @@ -0,0 +1,7 @@ +{ + "type": "none", + "comment": "fix: update npmignore files to fix npm8/node16 regression how npm publish works", + "packageName": "@fluentui/react-badge", + "email": "martinhochel@microsoft.com", + "dependentChangeType": "none" +} diff --git a/change/@fluentui-react-button-4dd3c0d3-ef8c-4cad-9037-d02351896796.json b/change/@fluentui-react-button-4dd3c0d3-ef8c-4cad-9037-d02351896796.json new file mode 100644 index 00000000000000..60174df7d2337b --- /dev/null +++ b/change/@fluentui-react-button-4dd3c0d3-ef8c-4cad-9037-d02351896796.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "chore: move makeStyles() calls to .styles.ts files", + "packageName": "@fluentui/react-button", + "email": "olfedias@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-button-a418e04f-553e-43b3-995a-6ccbcf1ea081.json b/change/@fluentui-react-button-a418e04f-553e-43b3-995a-6ccbcf1ea081.json new file mode 100644 index 00000000000000..d1a0df06f2befc --- /dev/null +++ b/change/@fluentui-react-button-a418e04f-553e-43b3-995a-6ccbcf1ea081.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "Update to use single hook selector", + "packageName": "@fluentui/react-button", + "email": "gcox@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-button-f0cd84b9-b133-4674-9bc5-4ce6b22d9661.json b/change/@fluentui-react-button-f0cd84b9-b133-4674-9bc5-4ce6b22d9661.json new file mode 100644 index 00000000000000..b2cea66848ddf9 --- /dev/null +++ b/change/@fluentui-react-button-f0cd84b9-b133-4674-9bc5-4ce6b22d9661.json @@ -0,0 +1,7 @@ +{ + "type": "none", + "comment": "fix: update npmignore files to fix npm8/node16 regression how npm publish works", + "packageName": "@fluentui/react-button", + "email": "martinhochel@microsoft.com", + "dependentChangeType": "none" +} 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 00000000000000..6297d62da65155 --- /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-card-8a202be4-ec11-4b5b-bd12-91411913b37a.json b/change/@fluentui-react-card-8a202be4-ec11-4b5b-bd12-91411913b37a.json new file mode 100644 index 00000000000000..8aee0c5a99311b --- /dev/null +++ b/change/@fluentui-react-card-8a202be4-ec11-4b5b-bd12-91411913b37a.json @@ -0,0 +1,7 @@ +{ + "type": "none", + "comment": "fix: update npmignore files to fix npm8/node16 regression how npm publish works", + "packageName": "@fluentui/react-card", + "email": "martinhochel@microsoft.com", + "dependentChangeType": "none" +} diff --git a/change/@fluentui-react-charting-053d3178-4089-4eb8-af55-9706b4484337.json b/change/@fluentui-react-charting-053d3178-4089-4eb8-af55-9706b4484337.json new file mode 100644 index 00000000000000..a48947a68702c9 --- /dev/null +++ b/change/@fluentui-react-charting-053d3178-4089-4eb8-af55-9706b4484337.json @@ -0,0 +1,7 @@ +{ + "type": "none", + "comment": "Added component tests for donut chart", + "packageName": "@fluentui/react-charting", + "email": "srmukher@microsoft.com", + "dependentChangeType": "none" +} diff --git a/change/@fluentui-react-checkbox-154b90a6-17c3-4c5d-8609-fc1438460273.json b/change/@fluentui-react-checkbox-154b90a6-17c3-4c5d-8609-fc1438460273.json new file mode 100644 index 00000000000000..c2b28099163068 --- /dev/null +++ b/change/@fluentui-react-checkbox-154b90a6-17c3-4c5d-8609-fc1438460273.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "Update to use single hook selector", + "packageName": "@fluentui/react-checkbox", + "email": "gcox@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-checkbox-320896ab-38af-4156-89fe-216ef2406e87.json b/change/@fluentui-react-checkbox-320896ab-38af-4156-89fe-216ef2406e87.json new file mode 100644 index 00000000000000..a0cef02f02a55f --- /dev/null +++ b/change/@fluentui-react-checkbox-320896ab-38af-4156-89fe-216ef2406e87.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "chore: move makeStyles() calls to .styles.ts files", + "packageName": "@fluentui/react-checkbox", + "email": "olfedias@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-checkbox-fd4a1b76-b34e-45f7-bf8e-e120ceff4e5b.json b/change/@fluentui-react-checkbox-fd4a1b76-b34e-45f7-bf8e-e120ceff4e5b.json new file mode 100644 index 00000000000000..465b4c3d6ec987 --- /dev/null +++ b/change/@fluentui-react-checkbox-fd4a1b76-b34e-45f7-bf8e-e120ceff4e5b.json @@ -0,0 +1,7 @@ +{ + "type": "none", + "comment": "fix: update npmignore files to fix npm8/node16 regression how npm publish works", + "packageName": "@fluentui/react-checkbox", + "email": "martinhochel@microsoft.com", + "dependentChangeType": "none" +} diff --git a/change/@fluentui-react-combobox-353146d6-11ec-4521-877b-6981faafae14.json b/change/@fluentui-react-combobox-353146d6-11ec-4521-877b-6981faafae14.json new file mode 100644 index 00000000000000..387ee308ad1101 --- /dev/null +++ b/change/@fluentui-react-combobox-353146d6-11ec-4521-877b-6981faafae14.json @@ -0,0 +1,7 @@ +{ + "type": "none", + "comment": "fix: update npmignore files to fix npm8/node16 regression how npm publish works", + "packageName": "@fluentui/react-combobox", + "email": "martinhochel@microsoft.com", + "dependentChangeType": "none" +} 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 00000000000000..02fbdfb85912e8 --- /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-combobox-cac5541c-d84d-430d-95d0-e54a46aab88f.json b/change/@fluentui-react-combobox-cac5541c-d84d-430d-95d0-e54a46aab88f.json new file mode 100644 index 00000000000000..8b13665aa657b7 --- /dev/null +++ b/change/@fluentui-react-combobox-cac5541c-d84d-430d-95d0-e54a46aab88f.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "Update to use single hook selector", + "packageName": "@fluentui/react-combobox", + "email": "gcox@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-components-2650b04b-ae05-48fe-9254-11329cd2a435.json b/change/@fluentui-react-components-2650b04b-ae05-48fe-9254-11329cd2a435.json new file mode 100644 index 00000000000000..44a87121751ca0 --- /dev/null +++ b/change/@fluentui-react-components-2650b04b-ae05-48fe-9254-11329cd2a435.json @@ -0,0 +1,7 @@ +{ + "type": "none", + "comment": "fix: update npmignore files to fix npm8/node16 regression how npm publish works", + "packageName": "@fluentui/react-components", + "email": "martinhochel@microsoft.com", + "dependentChangeType": "none" +} 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 00000000000000..44692a4396bbb5 --- /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-griffel-5aeafe58-b7be-478c-adc6-fdd3b3aee58b.json b/change/@fluentui-react-conformance-griffel-5aeafe58-b7be-478c-adc6-fdd3b3aee58b.json new file mode 100644 index 00000000000000..50e66c154d7a1f --- /dev/null +++ b/change/@fluentui-react-conformance-griffel-5aeafe58-b7be-478c-adc6-fdd3b3aee58b.json @@ -0,0 +1,7 @@ +{ + "type": "none", + "comment": "fix: update npmignore files to fix npm8/node16 regression how npm publish works", + "packageName": "@fluentui/react-conformance-griffel", + "email": "martinhochel@microsoft.com", + "dependentChangeType": "none" +} diff --git a/change/@fluentui-react-context-selector-05d4f325-4569-438c-befb-173f1eefc2ed.json b/change/@fluentui-react-context-selector-05d4f325-4569-438c-befb-173f1eefc2ed.json new file mode 100644 index 00000000000000..8f296f7441e8fe --- /dev/null +++ b/change/@fluentui-react-context-selector-05d4f325-4569-438c-befb-173f1eefc2ed.json @@ -0,0 +1,7 @@ +{ + "type": "none", + "comment": "fix: update npmignore files to fix npm8/node16 regression how npm publish works", + "packageName": "@fluentui/react-context-selector", + "email": "martinhochel@microsoft.com", + "dependentChangeType": "none" +} 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 00000000000000..68215b548f09eb --- /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-data-grid-react-window-7b969639-ce1d-417e-bc8a-07fbef28706a.json b/change/@fluentui-react-data-grid-react-window-7b969639-ce1d-417e-bc8a-07fbef28706a.json deleted file mode 100644 index 98401707042334..00000000000000 --- a/change/@fluentui-react-data-grid-react-window-7b969639-ce1d-417e-bc8a-07fbef28706a.json +++ /dev/null @@ -1,7 +0,0 @@ -{ - "type": "prerelease", - "comment": "bugfix: remove caret from react-jsx-runtime prerelease dependency", - "packageName": "@fluentui/react-data-grid-react-window", - "email": "bernardo.sunderhus@gmail.com", - "dependentChangeType": "patch" -} diff --git a/change/@fluentui-react-data-grid-react-window-8c358ca1-f9b3-41af-89c8-4116b8338d8a.json b/change/@fluentui-react-data-grid-react-window-8c358ca1-f9b3-41af-89c8-4116b8338d8a.json new file mode 100644 index 00000000000000..d87f167b0c81fb --- /dev/null +++ b/change/@fluentui-react-data-grid-react-window-8c358ca1-f9b3-41af-89c8-4116b8338d8a.json @@ -0,0 +1,7 @@ +{ + "type": "none", + "comment": "fix: update npmignore files to fix npm8/node16 regression how npm publish works", + "packageName": "@fluentui/react-data-grid-react-window", + "email": "martinhochel@microsoft.com", + "dependentChangeType": "none" +} diff --git a/change/@fluentui-react-datepicker-compat-2c5abb61-d6d2-48f0-8084-70df28bb9b84.json b/change/@fluentui-react-datepicker-compat-2c5abb61-d6d2-48f0-8084-70df28bb9b84.json new file mode 100644 index 00000000000000..c6a42c6f1b1ca8 --- /dev/null +++ b/change/@fluentui-react-datepicker-compat-2c5abb61-d6d2-48f0-8084-70df28bb9b84.json @@ -0,0 +1,7 @@ +{ + "type": "none", + "comment": "chore: Add description to README.", + "packageName": "@fluentui/react-datepicker-compat", + "email": "esteban.230@hotmail.com", + "dependentChangeType": "none" +} diff --git a/change/@fluentui-react-datepicker-compat-6171355b-d1b3-4486-9dd1-60593ea037f8.json b/change/@fluentui-react-datepicker-compat-6171355b-d1b3-4486-9dd1-60593ea037f8.json new file mode 100644 index 00000000000000..c6fab62a7a1e80 --- /dev/null +++ b/change/@fluentui-react-datepicker-compat-6171355b-d1b3-4486-9dd1-60593ea037f8.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "chore: move makeStyles() calls to .styles.ts files", + "packageName": "@fluentui/react-datepicker-compat", + "email": "olfedias@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-datepicker-compat-a2c1c0f8-3661-430f-b63b-6b948aa8ca1c.json b/change/@fluentui-react-datepicker-compat-a2c1c0f8-3661-430f-b63b-6b948aa8ca1c.json new file mode 100644 index 00000000000000..68afef2665535a --- /dev/null +++ b/change/@fluentui-react-datepicker-compat-a2c1c0f8-3661-430f-b63b-6b948aa8ca1c.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "chore: update version", + "packageName": "@fluentui/react-datepicker-compat", + "email": "olfedias@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-datepicker-compat-e1e57041-b67f-4d6a-b453-febf07af46a6.json b/change/@fluentui-react-datepicker-compat-e1e57041-b67f-4d6a-b453-febf07af46a6.json new file mode 100644 index 00000000000000..7c37c75d2d9a73 --- /dev/null +++ b/change/@fluentui-react-datepicker-compat-e1e57041-b67f-4d6a-b453-febf07af46a6.json @@ -0,0 +1,7 @@ +{ + "type": "none", + "comment": "fix: update npmignore files to fix npm8/node16 regression how npm publish works", + "packageName": "@fluentui/react-datepicker-compat", + "email": "martinhochel@microsoft.com", + "dependentChangeType": "none" +} diff --git a/change/@fluentui-react-datepicker-compat-f7349def-c3e5-4ea0-9ca7-e2be0c852515.json b/change/@fluentui-react-datepicker-compat-f7349def-c3e5-4ea0-9ca7-e2be0c852515.json new file mode 100644 index 00000000000000..989091ae937ff5 --- /dev/null +++ b/change/@fluentui-react-datepicker-compat-f7349def-c3e5-4ea0-9ca7-e2be0c852515.json @@ -0,0 +1,7 @@ +{ + "type": "minor", + "comment": "fix: Make onValidationError onValidationResult so the error is updated when there's no longer an error.", + "packageName": "@fluentui/react-datepicker-compat", + "email": "esteban.230@hotmail.com", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-dialog-130da648-4855-42fc-a151-bf9cdd86508b.json b/change/@fluentui-react-dialog-130da648-4855-42fc-a151-bf9cdd86508b.json new file mode 100644 index 00000000000000..71015f5388a3c4 --- /dev/null +++ b/change/@fluentui-react-dialog-130da648-4855-42fc-a151-bf9cdd86508b.json @@ -0,0 +1,7 @@ +{ + "type": "none", + "comment": "fix: update npmignore files to fix npm8/node16 regression how npm publish works", + "packageName": "@fluentui/react-dialog", + "email": "martinhochel@microsoft.com", + "dependentChangeType": "none" +} 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 00000000000000..5e622cf4dad62d --- /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-dialog-91eec82a-0ce5-472b-a3ee-fffe02628a9e.json b/change/@fluentui-react-dialog-91eec82a-0ce5-472b-a3ee-fffe02628a9e.json new file mode 100644 index 00000000000000..2c661414b73382 --- /dev/null +++ b/change/@fluentui-react-dialog-91eec82a-0ce5-472b-a3ee-fffe02628a9e.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "Update to use single hook selector", + "packageName": "@fluentui/react-dialog", + "email": "gcox@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-dialog-a8221575-28db-40a9-9e34-fffaf0b1c9a8.json b/change/@fluentui-react-dialog-a8221575-28db-40a9-9e34-fffaf0b1c9a8.json deleted file mode 100644 index f4f0b21bb78c56..00000000000000 --- a/change/@fluentui-react-dialog-a8221575-28db-40a9-9e34-fffaf0b1c9a8.json +++ /dev/null @@ -1,7 +0,0 @@ -{ - "type": "patch", - "comment": "bugfix: remove caret from react-jsx-runtime prerelease dependency", - "packageName": "@fluentui/react-dialog", - "email": "bernardo.sunderhus@gmail.com", - "dependentChangeType": "patch" -} diff --git a/change/@fluentui-react-divider-70c81c00-b1cf-4322-8344-dc0ea8613f3b.json b/change/@fluentui-react-divider-70c81c00-b1cf-4322-8344-dc0ea8613f3b.json new file mode 100644 index 00000000000000..019c6084ba3d70 --- /dev/null +++ b/change/@fluentui-react-divider-70c81c00-b1cf-4322-8344-dc0ea8613f3b.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "Update to use single hook selector", + "packageName": "@fluentui/react-divider", + "email": "gcox@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-divider-9e05260c-41cc-4130-b89d-5f0d38642bb4.json b/change/@fluentui-react-divider-9e05260c-41cc-4130-b89d-5f0d38642bb4.json new file mode 100644 index 00000000000000..c0c199b5bd02de --- /dev/null +++ b/change/@fluentui-react-divider-9e05260c-41cc-4130-b89d-5f0d38642bb4.json @@ -0,0 +1,7 @@ +{ + "type": "none", + "comment": "fix: update npmignore files to fix npm8/node16 regression how npm publish works", + "packageName": "@fluentui/react-divider", + "email": "martinhochel@microsoft.com", + "dependentChangeType": "none" +} diff --git a/change/@fluentui-react-field-0ba2564a-2a43-4917-badc-1b34a24559b6.json b/change/@fluentui-react-field-0ba2564a-2a43-4917-badc-1b34a24559b6.json new file mode 100644 index 00000000000000..3031e5c2a9eeb9 --- /dev/null +++ b/change/@fluentui-react-field-0ba2564a-2a43-4917-badc-1b34a24559b6.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "chore: move makeStyles() calls to .styles.ts files", + "packageName": "@fluentui/react-field", + "email": "olfedias@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-field-cfdf911a-86cc-47ac-a9d1-fc3270990a32.json b/change/@fluentui-react-field-cfdf911a-86cc-47ac-a9d1-fc3270990a32.json new file mode 100644 index 00000000000000..393b8b22d4eaa9 --- /dev/null +++ b/change/@fluentui-react-field-cfdf911a-86cc-47ac-a9d1-fc3270990a32.json @@ -0,0 +1,7 @@ +{ + "type": "none", + "comment": "fix: update npmignore files to fix npm8/node16 regression how npm publish works", + "packageName": "@fluentui/react-field", + "email": "martinhochel@microsoft.com", + "dependentChangeType": "none" +} 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 00000000000000..34eebf3ee4df25 --- /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-image-963a7dc3-d44a-40fd-838c-5d2746dfdb06.json b/change/@fluentui-react-image-963a7dc3-d44a-40fd-838c-5d2746dfdb06.json new file mode 100644 index 00000000000000..6f3b5f836ce5e8 --- /dev/null +++ b/change/@fluentui-react-image-963a7dc3-d44a-40fd-838c-5d2746dfdb06.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "Update to use single hook selector", + "packageName": "@fluentui/react-image", + "email": "gcox@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-image-bfccb005-a567-4bdf-903e-93b8d048cc4c.json b/change/@fluentui-react-image-bfccb005-a567-4bdf-903e-93b8d048cc4c.json new file mode 100644 index 00000000000000..41cab88b4f3bc5 --- /dev/null +++ b/change/@fluentui-react-image-bfccb005-a567-4bdf-903e-93b8d048cc4c.json @@ -0,0 +1,7 @@ +{ + "type": "none", + "comment": "fix: update npmignore files to fix npm8/node16 regression how npm publish works", + "packageName": "@fluentui/react-image", + "email": "martinhochel@microsoft.com", + "dependentChangeType": "none" +} diff --git a/change/@fluentui-react-infobutton-bca277a3-e081-4d19-861a-3da46964021f.json b/change/@fluentui-react-infobutton-bca277a3-e081-4d19-861a-3da46964021f.json new file mode 100644 index 00000000000000..6c0d93c52e08b9 --- /dev/null +++ b/change/@fluentui-react-infobutton-bca277a3-e081-4d19-861a-3da46964021f.json @@ -0,0 +1,7 @@ +{ + "type": "none", + "comment": "fix: update npmignore files to fix npm8/node16 regression how npm publish works", + "packageName": "@fluentui/react-infobutton", + "email": "martinhochel@microsoft.com", + "dependentChangeType": "none" +} diff --git a/change/@fluentui-react-infobutton-d0d934b3-5320-413f-9efc-d9bb1d67ae25.json b/change/@fluentui-react-infobutton-d0d934b3-5320-413f-9efc-d9bb1d67ae25.json new file mode 100644 index 00000000000000..78c95cd9c9cfb0 --- /dev/null +++ b/change/@fluentui-react-infobutton-d0d934b3-5320-413f-9efc-d9bb1d67ae25.json @@ -0,0 +1,7 @@ +{ + "type": "prerelease", + "comment": "chore: move makeStyles() calls to .styles.ts files", + "packageName": "@fluentui/react-infobutton", + "email": "olfedias@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-input-74af82c7-b28a-4aa5-92a6-f14903faeece.json b/change/@fluentui-react-input-74af82c7-b28a-4aa5-92a6-f14903faeece.json new file mode 100644 index 00000000000000..4968a5179f9a3a --- /dev/null +++ b/change/@fluentui-react-input-74af82c7-b28a-4aa5-92a6-f14903faeece.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "Update to use single hook selector", + "packageName": "@fluentui/react-input", + "email": "gcox@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-input-86f21b6d-1f42-466d-a12a-ed4795ab6a25.json b/change/@fluentui-react-input-86f21b6d-1f42-466d-a12a-ed4795ab6a25.json new file mode 100644 index 00000000000000..ad9c3f704a5a03 --- /dev/null +++ b/change/@fluentui-react-input-86f21b6d-1f42-466d-a12a-ed4795ab6a25.json @@ -0,0 +1,7 @@ +{ + "type": "none", + "comment": "fix: update npmignore files to fix npm8/node16 regression how npm publish works", + "packageName": "@fluentui/react-input", + "email": "martinhochel@microsoft.com", + "dependentChangeType": "none" +} diff --git a/change/@fluentui-react-input-d2f00642-9b3e-4cd7-b464-50a8b4a9092c.json b/change/@fluentui-react-input-d2f00642-9b3e-4cd7-b464-50a8b4a9092c.json new file mode 100644 index 00000000000000..29ad243a5350c8 --- /dev/null +++ b/change/@fluentui-react-input-d2f00642-9b3e-4cd7-b464-50a8b4a9092c.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "chore: move makeStyles() calls to .styles.ts files", + "packageName": "@fluentui/react-input", + "email": "olfedias@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-jsx-runtime-eb172eb8-8264-4a7e-b951-60c0c3286569.json b/change/@fluentui-react-jsx-runtime-eb172eb8-8264-4a7e-b951-60c0c3286569.json new file mode 100644 index 00000000000000..0c899a559c2abb --- /dev/null +++ b/change/@fluentui-react-jsx-runtime-eb172eb8-8264-4a7e-b951-60c0c3286569.json @@ -0,0 +1,7 @@ +{ + "type": "none", + "comment": "fix: update npmignore files to fix npm8/node16 regression how npm publish works", + "packageName": "@fluentui/react-jsx-runtime", + "email": "martinhochel@microsoft.com", + "dependentChangeType": "none" +} diff --git a/change/@fluentui-react-label-0db0f635-e7b2-49ee-907c-9e24f9ad4af4.json b/change/@fluentui-react-label-0db0f635-e7b2-49ee-907c-9e24f9ad4af4.json new file mode 100644 index 00000000000000..1269cf9a263301 --- /dev/null +++ b/change/@fluentui-react-label-0db0f635-e7b2-49ee-907c-9e24f9ad4af4.json @@ -0,0 +1,7 @@ +{ + "type": "none", + "comment": "fix: update npmignore files to fix npm8/node16 regression how npm publish works", + "packageName": "@fluentui/react-label", + "email": "martinhochel@microsoft.com", + "dependentChangeType": "none" +} diff --git a/change/@fluentui-react-label-7d5e12b6-6fc3-450a-a2f6-49ce816011fa.json b/change/@fluentui-react-label-7d5e12b6-6fc3-450a-a2f6-49ce816011fa.json new file mode 100644 index 00000000000000..6575838bcaf72e --- /dev/null +++ b/change/@fluentui-react-label-7d5e12b6-6fc3-450a-a2f6-49ce816011fa.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "Update to use single hook selector", + "packageName": "@fluentui/react-label", + "email": "gcox@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-label-8eefd0a0-8ece-4f6c-bc55-ddaa4edc62d4.json b/change/@fluentui-react-label-8eefd0a0-8ece-4f6c-bc55-ddaa4edc62d4.json new file mode 100644 index 00000000000000..035a6b3328115e --- /dev/null +++ b/change/@fluentui-react-label-8eefd0a0-8ece-4f6c-bc55-ddaa4edc62d4.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "chore: move makeStyles() calls to .styles.ts files", + "packageName": "@fluentui/react-label", + "email": "olfedias@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-link-27f8457a-61e2-40ff-951f-70e9ee60d1d4.json b/change/@fluentui-react-link-27f8457a-61e2-40ff-951f-70e9ee60d1d4.json new file mode 100644 index 00000000000000..a1d49d545753df --- /dev/null +++ b/change/@fluentui-react-link-27f8457a-61e2-40ff-951f-70e9ee60d1d4.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "chore: move makeStyles() calls to .styles.ts files", + "packageName": "@fluentui/react-link", + "email": "olfedias@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-link-5a88c0b8-d2d1-46ba-8b66-492c3dbe28cd.json b/change/@fluentui-react-link-5a88c0b8-d2d1-46ba-8b66-492c3dbe28cd.json new file mode 100644 index 00000000000000..ce25603fe47482 --- /dev/null +++ b/change/@fluentui-react-link-5a88c0b8-d2d1-46ba-8b66-492c3dbe28cd.json @@ -0,0 +1,7 @@ +{ + "type": "none", + "comment": "fix: update npmignore files to fix npm8/node16 regression how npm publish works", + "packageName": "@fluentui/react-link", + "email": "martinhochel@microsoft.com", + "dependentChangeType": "none" +} diff --git a/change/@fluentui-react-menu-1936244e-b19e-46c3-b864-f0abc205741b.json b/change/@fluentui-react-menu-1936244e-b19e-46c3-b864-f0abc205741b.json deleted file mode 100644 index 3cc06092ac664b..00000000000000 --- a/change/@fluentui-react-menu-1936244e-b19e-46c3-b864-f0abc205741b.json +++ /dev/null @@ -1,7 +0,0 @@ -{ - "type": "patch", - "comment": "bugfix: remove caret from react-jsx-runtime prerelease dependency", - "packageName": "@fluentui/react-menu", - "email": "bernardo.sunderhus@gmail.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 00000000000000..39639448387ebc --- /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-4cdd5c1d-0404-420f-b984-861538a209a8.json b/change/@fluentui-react-menu-4cdd5c1d-0404-420f-b984-861538a209a8.json new file mode 100644 index 00000000000000..d3cba56624a251 --- /dev/null +++ b/change/@fluentui-react-menu-4cdd5c1d-0404-420f-b984-861538a209a8.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "Update to use single hook selector", + "packageName": "@fluentui/react-menu", + "email": "gcox@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-menu-77c77dcb-6137-4c2f-9fe6-dcde9b4021e5.json b/change/@fluentui-react-menu-77c77dcb-6137-4c2f-9fe6-dcde9b4021e5.json new file mode 100644 index 00000000000000..42781fbfa25678 --- /dev/null +++ b/change/@fluentui-react-menu-77c77dcb-6137-4c2f-9fe6-dcde9b4021e5.json @@ -0,0 +1,7 @@ +{ + "type": "none", + "comment": "fix: update npmignore files to fix npm8/node16 regression how npm publish works", + "packageName": "@fluentui/react-menu", + "email": "martinhochel@microsoft.com", + "dependentChangeType": "none" +} 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 00000000000000..4f19e9862ee6c2 --- /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-migration-v8-v9-17168b0a-5966-4a82-97c1-e0d5041e6c39.json b/change/@fluentui-react-migration-v8-v9-17168b0a-5966-4a82-97c1-e0d5041e6c39.json new file mode 100644 index 00000000000000..40086a5de9a3f8 --- /dev/null +++ b/change/@fluentui-react-migration-v8-v9-17168b0a-5966-4a82-97c1-e0d5041e6c39.json @@ -0,0 +1,7 @@ +{ + "type": "none", + "comment": "fix: update npmignore files to fix npm8/node16 regression how npm publish works", + "packageName": "@fluentui/react-migration-v8-v9", + "email": "martinhochel@microsoft.com", + "dependentChangeType": "none" +} diff --git a/change/@fluentui-react-migration-v8-v9-ca54b58c-216f-4a2c-bc44-b19249dd8d16.json b/change/@fluentui-react-migration-v8-v9-ca54b58c-216f-4a2c-bc44-b19249dd8d16.json new file mode 100644 index 00000000000000..e559a82c4d869e --- /dev/null +++ b/change/@fluentui-react-migration-v8-v9-ca54b58c-216f-4a2c-bc44-b19249dd8d16.json @@ -0,0 +1,7 @@ +{ + "type": "none", + "comment": "chore: enable build-less DX for storybook", + "packageName": "@fluentui/react-migration-v8-v9", + "email": "martinhochel@microsoft.com", + "dependentChangeType": "none" +} diff --git a/change/@fluentui-react-overflow-7c4d84bd-1b82-4374-b4fa-2a9662c6fbc5.json b/change/@fluentui-react-overflow-7c4d84bd-1b82-4374-b4fa-2a9662c6fbc5.json new file mode 100644 index 00000000000000..658cf0d4b683ef --- /dev/null +++ b/change/@fluentui-react-overflow-7c4d84bd-1b82-4374-b4fa-2a9662c6fbc5.json @@ -0,0 +1,7 @@ +{ + "type": "none", + "comment": "fix: update npmignore files to fix npm8/node16 regression how npm publish works", + "packageName": "@fluentui/react-overflow", + "email": "martinhochel@microsoft.com", + "dependentChangeType": "none" +} 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 00000000000000..41e78b13023a74 --- /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-persona-5acc929d-c45f-4975-bc3a-fcdc3b643769.json b/change/@fluentui-react-persona-5acc929d-c45f-4975-bc3a-fcdc3b643769.json new file mode 100644 index 00000000000000..0610f1a0a52b4c --- /dev/null +++ b/change/@fluentui-react-persona-5acc929d-c45f-4975-bc3a-fcdc3b643769.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "Update to use single hook selector", + "packageName": "@fluentui/react-persona", + "email": "gcox@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-persona-6f8e249d-3b57-4f17-8e44-244e8e4e7afc.json b/change/@fluentui-react-persona-6f8e249d-3b57-4f17-8e44-244e8e4e7afc.json new file mode 100644 index 00000000000000..770a8f8ab2e9dc --- /dev/null +++ b/change/@fluentui-react-persona-6f8e249d-3b57-4f17-8e44-244e8e4e7afc.json @@ -0,0 +1,7 @@ +{ + "type": "none", + "comment": "fix: update npmignore files to fix npm8/node16 regression how npm publish works", + "packageName": "@fluentui/react-persona", + "email": "martinhochel@microsoft.com", + "dependentChangeType": "none" +} diff --git a/change/@fluentui-react-persona-d62921b6-b5c0-408c-9c95-07e22833e410.json b/change/@fluentui-react-persona-d62921b6-b5c0-408c-9c95-07e22833e410.json new file mode 100644 index 00000000000000..efaa5e7e0749a7 --- /dev/null +++ b/change/@fluentui-react-persona-d62921b6-b5c0-408c-9c95-07e22833e410.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "chore: move makeStyles() calls to .styles.ts files", + "packageName": "@fluentui/react-persona", + "email": "olfedias@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-popover-1c3254b4-b7d6-4751-a471-21cb345897b2.json b/change/@fluentui-react-popover-1c3254b4-b7d6-4751-a471-21cb345897b2.json deleted file mode 100644 index bf31343e6848db..00000000000000 --- a/change/@fluentui-react-popover-1c3254b4-b7d6-4751-a471-21cb345897b2.json +++ /dev/null @@ -1,7 +0,0 @@ -{ - "type": "patch", - "comment": "bugfix: remove caret from react-jsx-runtime prerelease dependency", - "packageName": "@fluentui/react-popover", - "email": "bernardo.sunderhus@gmail.com", - "dependentChangeType": "patch" -} diff --git a/change/@fluentui-react-popover-327e6424-ea83-444e-a490-abe84aa5cccf.json b/change/@fluentui-react-popover-327e6424-ea83-444e-a490-abe84aa5cccf.json new file mode 100644 index 00000000000000..4b15573eaf3242 --- /dev/null +++ b/change/@fluentui-react-popover-327e6424-ea83-444e-a490-abe84aa5cccf.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "Update to use single hook selector", + "packageName": "@fluentui/react-popover", + "email": "gcox@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-popover-3d948712-f4d9-4e1b-bd80-1b38cd60da1c.json b/change/@fluentui-react-popover-3d948712-f4d9-4e1b-bd80-1b38cd60da1c.json new file mode 100644 index 00000000000000..29f554ac83bcfd --- /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-popover-4dcf90d9-f842-4bc5-b1ae-4415768d0d9c.json b/change/@fluentui-react-popover-4dcf90d9-f842-4bc5-b1ae-4415768d0d9c.json new file mode 100644 index 00000000000000..0033d003cb4272 --- /dev/null +++ b/change/@fluentui-react-popover-4dcf90d9-f842-4bc5-b1ae-4415768d0d9c.json @@ -0,0 +1,7 @@ +{ + "type": "none", + "comment": "fix: update npmignore files to fix npm8/node16 regression how npm publish works", + "packageName": "@fluentui/react-popover", + "email": "martinhochel@microsoft.com", + "dependentChangeType": "none" +} diff --git a/change/@fluentui-react-portal-12c90c1d-e89b-47e2-8837-9fd3ea319175.json b/change/@fluentui-react-portal-12c90c1d-e89b-47e2-8837-9fd3ea319175.json new file mode 100644 index 00000000000000..69163c38605189 --- /dev/null +++ b/change/@fluentui-react-portal-12c90c1d-e89b-47e2-8837-9fd3ea319175.json @@ -0,0 +1,7 @@ +{ + "type": "none", + "comment": "fix: update npmignore files to fix npm8/node16 regression how npm publish works", + "packageName": "@fluentui/react-portal", + "email": "martinhochel@microsoft.com", + "dependentChangeType": "none" +} 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 00000000000000..90aadd2091f390 --- /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-portal-compat-87118ffd-bb5d-48aa-bcb7-18b23d015706.json b/change/@fluentui-react-portal-compat-87118ffd-bb5d-48aa-bcb7-18b23d015706.json new file mode 100644 index 00000000000000..688aa403694cd5 --- /dev/null +++ b/change/@fluentui-react-portal-compat-87118ffd-bb5d-48aa-bcb7-18b23d015706.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "fix: Class ID detection compatible with React 18", + "packageName": "@fluentui/react-portal-compat", + "email": "hanj@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-portal-compat-9771e2fb-45b5-439b-97e9-246a694e7eff.json b/change/@fluentui-react-portal-compat-9771e2fb-45b5-439b-97e9-246a694e7eff.json new file mode 100644 index 00000000000000..787ef5f82bc1e2 --- /dev/null +++ b/change/@fluentui-react-portal-compat-9771e2fb-45b5-439b-97e9-246a694e7eff.json @@ -0,0 +1,7 @@ +{ + "type": "none", + "comment": "fix: update npmignore files to fix npm8/node16 regression how npm publish works", + "packageName": "@fluentui/react-portal-compat", + "email": "martinhochel@microsoft.com", + "dependentChangeType": "none" +} diff --git a/change/@fluentui-react-portal-compat-context-43dbc57e-62a5-462a-8032-7de1c1389567.json b/change/@fluentui-react-portal-compat-context-43dbc57e-62a5-462a-8032-7de1c1389567.json new file mode 100644 index 00000000000000..7c3c38a0d638af --- /dev/null +++ b/change/@fluentui-react-portal-compat-context-43dbc57e-62a5-462a-8032-7de1c1389567.json @@ -0,0 +1,7 @@ +{ + "type": "none", + "comment": "fix: update npmignore files to fix npm8/node16 regression how npm publish works", + "packageName": "@fluentui/react-portal-compat-context", + "email": "martinhochel@microsoft.com", + "dependentChangeType": "none" +} diff --git a/change/@fluentui-react-positioning-5acdc82f-fccc-4e19-a05d-562d7ce11902.json b/change/@fluentui-react-positioning-5acdc82f-fccc-4e19-a05d-562d7ce11902.json new file mode 100644 index 00000000000000..7ba1b01484f7eb --- /dev/null +++ b/change/@fluentui-react-positioning-5acdc82f-fccc-4e19-a05d-562d7ce11902.json @@ -0,0 +1,7 @@ +{ + "type": "none", + "comment": "fix: update npmignore files to fix npm8/node16 regression how npm publish works", + "packageName": "@fluentui/react-positioning", + "email": "martinhochel@microsoft.com", + "dependentChangeType": "none" +} diff --git a/change/@fluentui-react-progress-02b62137-0430-49d7-b9c4-fb4032de2a72.json b/change/@fluentui-react-progress-02b62137-0430-49d7-b9c4-fb4032de2a72.json new file mode 100644 index 00000000000000..37daadac33057b --- /dev/null +++ b/change/@fluentui-react-progress-02b62137-0430-49d7-b9c4-fb4032de2a72.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "chore: move makeStyles() calls to .styles.ts files", + "packageName": "@fluentui/react-progress", + "email": "olfedias@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-progress-1df15ae2-e24b-4805-b369-4b67395cfcf6.json b/change/@fluentui-react-progress-1df15ae2-e24b-4805-b369-4b67395cfcf6.json new file mode 100644 index 00000000000000..a48ec6bfdffdcb --- /dev/null +++ b/change/@fluentui-react-progress-1df15ae2-e24b-4805-b369-4b67395cfcf6.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "Update to use single hook selector", + "packageName": "@fluentui/react-progress", + "email": "gcox@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-progress-b335c37a-f60b-485c-8a5a-befcf8bd4060.json b/change/@fluentui-react-progress-b335c37a-f60b-485c-8a5a-befcf8bd4060.json new file mode 100644 index 00000000000000..a1f8a38347131f --- /dev/null +++ b/change/@fluentui-react-progress-b335c37a-f60b-485c-8a5a-befcf8bd4060.json @@ -0,0 +1,7 @@ +{ + "type": "none", + "comment": "fix: update npmignore files to fix npm8/node16 regression how npm publish works", + "packageName": "@fluentui/react-progress", + "email": "martinhochel@microsoft.com", + "dependentChangeType": "none" +} 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 00000000000000..b0213707de2471 --- /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-provider-2698c8f2-b6a5-467a-b0b5-7acfa7061f49.json b/change/@fluentui-react-provider-2698c8f2-b6a5-467a-b0b5-7acfa7061f49.json deleted file mode 100644 index 2b21976d4f0ef4..00000000000000 --- a/change/@fluentui-react-provider-2698c8f2-b6a5-467a-b0b5-7acfa7061f49.json +++ /dev/null @@ -1,7 +0,0 @@ -{ - "type": "patch", - "comment": "bugfix: remove caret from react-jsx-runtime prerelease dependency", - "packageName": "@fluentui/react-provider", - "email": "bernardo.sunderhus@gmail.com", - "dependentChangeType": "patch" -} diff --git a/change/@fluentui-react-provider-52269bd1-3dfa-4225-a528-7edc96211a5f.json b/change/@fluentui-react-provider-52269bd1-3dfa-4225-a528-7edc96211a5f.json new file mode 100644 index 00000000000000..7dcdfa61964bde --- /dev/null +++ b/change/@fluentui-react-provider-52269bd1-3dfa-4225-a528-7edc96211a5f.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "Update to use single hook selector", + "packageName": "@fluentui/react-provider", + "email": "gcox@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-provider-6a6fa164-492b-441d-bb9f-7da6bd0a19d0.json b/change/@fluentui-react-provider-6a6fa164-492b-441d-bb9f-7da6bd0a19d0.json new file mode 100644 index 00000000000000..b0db57127461c6 --- /dev/null +++ b/change/@fluentui-react-provider-6a6fa164-492b-441d-bb9f-7da6bd0a19d0.json @@ -0,0 +1,7 @@ +{ + "type": "none", + "comment": "fix: update npmignore files to fix npm8/node16 regression how npm publish works", + "packageName": "@fluentui/react-provider", + "email": "martinhochel@microsoft.com", + "dependentChangeType": "none" +} diff --git a/change/@fluentui-react-provider-d5d6ba04-fdeb-4003-be12-17ef140ed50c.json b/change/@fluentui-react-provider-d5d6ba04-fdeb-4003-be12-17ef140ed50c.json new file mode 100644 index 00000000000000..5d4d779063c634 --- /dev/null +++ b/change/@fluentui-react-provider-d5d6ba04-fdeb-4003-be12-17ef140ed50c.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "add style overrides for upcoming drawer components", + "packageName": "@fluentui/react-provider", + "email": "marcosvmmoura@gmail.com", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-radio-1392ccd9-a854-44f1-b915-908c11e414aa.json b/change/@fluentui-react-radio-1392ccd9-a854-44f1-b915-908c11e414aa.json new file mode 100644 index 00000000000000..858e4ab380a415 --- /dev/null +++ b/change/@fluentui-react-radio-1392ccd9-a854-44f1-b915-908c11e414aa.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "Update to use single hook selector", + "packageName": "@fluentui/react-radio", + "email": "gcox@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-radio-7b0d86ce-e45c-44f9-868e-b3c62ade5cbf.json b/change/@fluentui-react-radio-7b0d86ce-e45c-44f9-868e-b3c62ade5cbf.json new file mode 100644 index 00000000000000..60e370e9a9e97a --- /dev/null +++ b/change/@fluentui-react-radio-7b0d86ce-e45c-44f9-868e-b3c62ade5cbf.json @@ -0,0 +1,7 @@ +{ + "type": "none", + "comment": "fix: update npmignore files to fix npm8/node16 regression how npm publish works", + "packageName": "@fluentui/react-radio", + "email": "martinhochel@microsoft.com", + "dependentChangeType": "none" +} diff --git a/change/@fluentui-react-radio-7d0c7d56-ee46-4308-959f-49fb1eb9f577.json b/change/@fluentui-react-radio-7d0c7d56-ee46-4308-959f-49fb1eb9f577.json new file mode 100644 index 00000000000000..e3c54ffe563f05 --- /dev/null +++ b/change/@fluentui-react-radio-7d0c7d56-ee46-4308-959f-49fb1eb9f577.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "chore: move makeStyles() calls to .styles.ts files", + "packageName": "@fluentui/react-radio", + "email": "olfedias@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-select-52a430c2-9512-46ee-9dd1-261a2659f86b.json b/change/@fluentui-react-select-52a430c2-9512-46ee-9dd1-261a2659f86b.json new file mode 100644 index 00000000000000..0771f885c1c438 --- /dev/null +++ b/change/@fluentui-react-select-52a430c2-9512-46ee-9dd1-261a2659f86b.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "Update to use single hook selector", + "packageName": "@fluentui/react-select", + "email": "gcox@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-select-66d8dd9e-32fb-4a47-ae75-7db67bbf9bb4.json b/change/@fluentui-react-select-66d8dd9e-32fb-4a47-ae75-7db67bbf9bb4.json new file mode 100644 index 00000000000000..bfb3f97da5cb33 --- /dev/null +++ b/change/@fluentui-react-select-66d8dd9e-32fb-4a47-ae75-7db67bbf9bb4.json @@ -0,0 +1,7 @@ +{ + "type": "none", + "comment": "fix: update npmignore files to fix npm8/node16 regression how npm publish works", + "packageName": "@fluentui/react-select", + "email": "martinhochel@microsoft.com", + "dependentChangeType": "none" +} diff --git a/change/@fluentui-react-shared-contexts-21887178-3231-4e86-9041-f7ddea32b8fe.json b/change/@fluentui-react-shared-contexts-21887178-3231-4e86-9041-f7ddea32b8fe.json new file mode 100644 index 00000000000000..be87d7c23e1300 --- /dev/null +++ b/change/@fluentui-react-shared-contexts-21887178-3231-4e86-9041-f7ddea32b8fe.json @@ -0,0 +1,7 @@ +{ + "type": "none", + "comment": "fix: update npmignore files to fix npm8/node16 regression how npm publish works", + "packageName": "@fluentui/react-shared-contexts", + "email": "martinhochel@microsoft.com", + "dependentChangeType": "none" +} diff --git a/change/@fluentui-react-shared-contexts-3de40e97-26fd-408f-985c-50fded79967c.json b/change/@fluentui-react-shared-contexts-3de40e97-26fd-408f-985c-50fded79967c.json new file mode 100644 index 00000000000000..e3be2f6198f41c --- /dev/null +++ b/change/@fluentui-react-shared-contexts-3de40e97-26fd-408f-985c-50fded79967c.json @@ -0,0 +1,7 @@ +{ + "type": "minor", + "comment": "Updated to provide single hook for noop tree-shaking", + "packageName": "@fluentui/react-shared-contexts", + "email": "gcox@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-shared-contexts-4e124152-f0bd-4310-9a56-2ce177884ec7.json b/change/@fluentui-react-shared-contexts-4e124152-f0bd-4310-9a56-2ce177884ec7.json new file mode 100644 index 00000000000000..7c672761835229 --- /dev/null +++ b/change/@fluentui-react-shared-contexts-4e124152-f0bd-4310-9a56-2ce177884ec7.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "add style overrides for upcoming drawer components", + "packageName": "@fluentui/react-shared-contexts", + "email": "marcosvmmoura@gmail.com", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-skeleton-50e30320-4803-4403-a4e3-ad463e7134bf.json b/change/@fluentui-react-skeleton-50e30320-4803-4403-a4e3-ad463e7134bf.json new file mode 100644 index 00000000000000..3ce06293683eca --- /dev/null +++ b/change/@fluentui-react-skeleton-50e30320-4803-4403-a4e3-ad463e7134bf.json @@ -0,0 +1,7 @@ +{ + "type": "prerelease", + "comment": "chore: move makeStyles() calls to .styles.ts files", + "packageName": "@fluentui/react-skeleton", + "email": "olfedias@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-skeleton-cedca5c9-7eee-4b11-a9c3-51aca879cbf2.json b/change/@fluentui-react-skeleton-cedca5c9-7eee-4b11-a9c3-51aca879cbf2.json new file mode 100644 index 00000000000000..7615bb50842f56 --- /dev/null +++ b/change/@fluentui-react-skeleton-cedca5c9-7eee-4b11-a9c3-51aca879cbf2.json @@ -0,0 +1,7 @@ +{ + "type": "none", + "comment": "fix: update npmignore files to fix npm8/node16 regression how npm publish works", + "packageName": "@fluentui/react-skeleton", + "email": "martinhochel@microsoft.com", + "dependentChangeType": "none" +} diff --git a/change/@fluentui-react-slider-83ca1529-e805-469c-82ef-bcdfc8ef0adc.json b/change/@fluentui-react-slider-83ca1529-e805-469c-82ef-bcdfc8ef0adc.json new file mode 100644 index 00000000000000..d8ea75d12bb27e --- /dev/null +++ b/change/@fluentui-react-slider-83ca1529-e805-469c-82ef-bcdfc8ef0adc.json @@ -0,0 +1,7 @@ +{ + "type": "none", + "comment": "fix: update npmignore files to fix npm8/node16 regression how npm publish works", + "packageName": "@fluentui/react-slider", + "email": "martinhochel@microsoft.com", + "dependentChangeType": "none" +} diff --git a/change/@fluentui-react-slider-d6ce4d43-f065-4f30-8712-9967e3316358.json b/change/@fluentui-react-slider-d6ce4d43-f065-4f30-8712-9967e3316358.json new file mode 100644 index 00000000000000..d3d09020cd4302 --- /dev/null +++ b/change/@fluentui-react-slider-d6ce4d43-f065-4f30-8712-9967e3316358.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "Update to use single hook selector", + "packageName": "@fluentui/react-slider", + "email": "gcox@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-spinbutton-21a40d2e-abc4-432e-87ff-254913633d38.json b/change/@fluentui-react-spinbutton-21a40d2e-abc4-432e-87ff-254913633d38.json new file mode 100644 index 00000000000000..674b3b88746224 --- /dev/null +++ b/change/@fluentui-react-spinbutton-21a40d2e-abc4-432e-87ff-254913633d38.json @@ -0,0 +1,7 @@ +{ + "type": "none", + "comment": "fix: update npmignore files to fix npm8/node16 regression how npm publish works", + "packageName": "@fluentui/react-spinbutton", + "email": "martinhochel@microsoft.com", + "dependentChangeType": "none" +} diff --git a/change/@fluentui-react-spinbutton-77ad3b93-a4fa-4bd1-bc51-397a4b9cd82a.json b/change/@fluentui-react-spinbutton-77ad3b93-a4fa-4bd1-bc51-397a4b9cd82a.json new file mode 100644 index 00000000000000..91dd75d65f57de --- /dev/null +++ b/change/@fluentui-react-spinbutton-77ad3b93-a4fa-4bd1-bc51-397a4b9cd82a.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "Update to use single hook selector", + "packageName": "@fluentui/react-spinbutton", + "email": "gcox@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-spinbutton-a866fa25-1598-4d9f-a2a2-bf50dfc5226b.json b/change/@fluentui-react-spinbutton-a866fa25-1598-4d9f-a2a2-bf50dfc5226b.json new file mode 100644 index 00000000000000..e389812a6de235 --- /dev/null +++ b/change/@fluentui-react-spinbutton-a866fa25-1598-4d9f-a2a2-bf50dfc5226b.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "chore: move makeStyles() calls to .styles.ts files", + "packageName": "@fluentui/react-spinbutton", + "email": "olfedias@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-spinner-2f4b6484-48a6-4c0b-9e03-d0d9a9068501.json b/change/@fluentui-react-spinner-2f4b6484-48a6-4c0b-9e03-d0d9a9068501.json new file mode 100644 index 00000000000000..0e15c1fd58da9a --- /dev/null +++ b/change/@fluentui-react-spinner-2f4b6484-48a6-4c0b-9e03-d0d9a9068501.json @@ -0,0 +1,7 @@ +{ + "type": "none", + "comment": "fix: update npmignore files to fix npm8/node16 regression how npm publish works", + "packageName": "@fluentui/react-spinner", + "email": "martinhochel@microsoft.com", + "dependentChangeType": "none" +} diff --git a/change/@fluentui-react-spinner-8a73a610-d0d6-4e11-9494-104bd865147d.json b/change/@fluentui-react-spinner-8a73a610-d0d6-4e11-9494-104bd865147d.json new file mode 100644 index 00000000000000..7839392d7b884d --- /dev/null +++ b/change/@fluentui-react-spinner-8a73a610-d0d6-4e11-9494-104bd865147d.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "Update to use single hook selector", + "packageName": "@fluentui/react-spinner", + "email": "gcox@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-spinner-e9512161-6252-4093-b8c5-07cf2e3d51c5.json b/change/@fluentui-react-spinner-e9512161-6252-4093-b8c5-07cf2e3d51c5.json new file mode 100644 index 00000000000000..f7080b09bb712d --- /dev/null +++ b/change/@fluentui-react-spinner-e9512161-6252-4093-b8c5-07cf2e3d51c5.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "chore: move makeStyles() calls to .styles.ts files", + "packageName": "@fluentui/react-spinner", + "email": "olfedias@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-switch-5a80e932-3327-4c33-9fd7-e18705834ee1.json b/change/@fluentui-react-switch-5a80e932-3327-4c33-9fd7-e18705834ee1.json new file mode 100644 index 00000000000000..cefd7db9862cf8 --- /dev/null +++ b/change/@fluentui-react-switch-5a80e932-3327-4c33-9fd7-e18705834ee1.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "Update to use single hook selector", + "packageName": "@fluentui/react-switch", + "email": "gcox@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-switch-7f987421-f4c3-4db8-ae5a-785d357a3fae.json b/change/@fluentui-react-switch-7f987421-f4c3-4db8-ae5a-785d357a3fae.json new file mode 100644 index 00000000000000..03c8b373fa54c0 --- /dev/null +++ b/change/@fluentui-react-switch-7f987421-f4c3-4db8-ae5a-785d357a3fae.json @@ -0,0 +1,7 @@ +{ + "type": "none", + "comment": "fix: update npmignore files to fix npm8/node16 regression how npm publish works", + "packageName": "@fluentui/react-switch", + "email": "martinhochel@microsoft.com", + "dependentChangeType": "none" +} diff --git a/change/@fluentui-react-switch-a35a71c1-8d26-4f49-894e-9c8d3eb27ac0.json b/change/@fluentui-react-switch-a35a71c1-8d26-4f49-894e-9c8d3eb27ac0.json new file mode 100644 index 00000000000000..fadecfb2041090 --- /dev/null +++ b/change/@fluentui-react-switch-a35a71c1-8d26-4f49-894e-9c8d3eb27ac0.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "chore: move makeStyles() calls to .styles.ts files", + "packageName": "@fluentui/react-switch", + "email": "olfedias@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-table-01084d02-30e2-4c40-87e3-1712e09feb03.json b/change/@fluentui-react-table-01084d02-30e2-4c40-87e3-1712e09feb03.json new file mode 100644 index 00000000000000..b6ad23886558e5 --- /dev/null +++ b/change/@fluentui-react-table-01084d02-30e2-4c40-87e3-1712e09feb03.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "Update to use single hook selector", + "packageName": "@fluentui/react-table", + "email": "gcox@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-table-2982fe2f-5f84-4758-8dba-ff7b3870ec73.json b/change/@fluentui-react-table-2982fe2f-5f84-4758-8dba-ff7b3870ec73.json new file mode 100644 index 00000000000000..23f3014ac2e9d9 --- /dev/null +++ b/change/@fluentui-react-table-2982fe2f-5f84-4758-8dba-ff7b3870ec73.json @@ -0,0 +1,7 @@ +{ + "type": "none", + "comment": "fix: update npmignore files to fix npm8/node16 regression how npm publish works", + "packageName": "@fluentui/react-table", + "email": "martinhochel@microsoft.com", + "dependentChangeType": "none" +} 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 00000000000000..530abec2115ead --- /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-table-af958513-1325-4780-aa3a-366aac56e366.json b/change/@fluentui-react-table-af958513-1325-4780-aa3a-366aac56e366.json deleted file mode 100644 index af120a681c765a..00000000000000 --- a/change/@fluentui-react-table-af958513-1325-4780-aa3a-366aac56e366.json +++ /dev/null @@ -1,7 +0,0 @@ -{ - "type": "patch", - "comment": "bugfix: remove caret from react-jsx-runtime prerelease dependency", - "packageName": "@fluentui/react-table", - "email": "bernardo.sunderhus@gmail.com", - "dependentChangeType": "patch" -} diff --git a/change/@fluentui-react-tabs-18090de5-624d-4d4b-a292-8857a76026f6.json b/change/@fluentui-react-tabs-18090de5-624d-4d4b-a292-8857a76026f6.json new file mode 100644 index 00000000000000..ea33de5eac06b0 --- /dev/null +++ b/change/@fluentui-react-tabs-18090de5-624d-4d4b-a292-8857a76026f6.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "Update to use single hook selector", + "packageName": "@fluentui/react-tabs", + "email": "gcox@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-tabs-a1511f5d-a62d-4ba3-b6f8-691a5c3ec520.json b/change/@fluentui-react-tabs-a1511f5d-a62d-4ba3-b6f8-691a5c3ec520.json new file mode 100644 index 00000000000000..02981bd9eb3abf --- /dev/null +++ b/change/@fluentui-react-tabs-a1511f5d-a62d-4ba3-b6f8-691a5c3ec520.json @@ -0,0 +1,7 @@ +{ + "type": "none", + "comment": "fix: update npmignore files to fix npm8/node16 regression how npm publish works", + "packageName": "@fluentui/react-tabs", + "email": "martinhochel@microsoft.com", + "dependentChangeType": "none" +} diff --git a/change/@fluentui-react-tabster-66ee6a85-9880-421f-8dae-bafdbc081d29.json b/change/@fluentui-react-tabster-66ee6a85-9880-421f-8dae-bafdbc081d29.json new file mode 100644 index 00000000000000..2c5f70a6717f86 --- /dev/null +++ b/change/@fluentui-react-tabster-66ee6a85-9880-421f-8dae-bafdbc081d29.json @@ -0,0 +1,7 @@ +{ + "type": "none", + "comment": "fix: update npmignore files to fix npm8/node16 regression how npm publish works", + "packageName": "@fluentui/react-tabster", + "email": "martinhochel@microsoft.com", + "dependentChangeType": "none" +} diff --git a/change/@fluentui-react-text-2011f896-0e0d-4c45-89e7-66b4763fb5da.json b/change/@fluentui-react-text-2011f896-0e0d-4c45-89e7-66b4763fb5da.json new file mode 100644 index 00000000000000..fee35cce429f8e --- /dev/null +++ b/change/@fluentui-react-text-2011f896-0e0d-4c45-89e7-66b4763fb5da.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "Update to use single hook selector", + "packageName": "@fluentui/react-text", + "email": "gcox@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-text-35877960-54d5-40bf-82f8-be7030d40a8f.json b/change/@fluentui-react-text-35877960-54d5-40bf-82f8-be7030d40a8f.json new file mode 100644 index 00000000000000..beb9f75225a197 --- /dev/null +++ b/change/@fluentui-react-text-35877960-54d5-40bf-82f8-be7030d40a8f.json @@ -0,0 +1,7 @@ +{ + "type": "none", + "comment": "fix: update npmignore files to fix npm8/node16 regression how npm publish works", + "packageName": "@fluentui/react-text", + "email": "martinhochel@microsoft.com", + "dependentChangeType": "none" +} 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 00000000000000..9f41c3834f73e5 --- /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-textarea-27974bbc-d69c-4c5b-9ad8-5f331a25fcd7.json b/change/@fluentui-react-textarea-27974bbc-d69c-4c5b-9ad8-5f331a25fcd7.json new file mode 100644 index 00000000000000..50f40886f1b84a --- /dev/null +++ b/change/@fluentui-react-textarea-27974bbc-d69c-4c5b-9ad8-5f331a25fcd7.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "Update to use single hook selector", + "packageName": "@fluentui/react-textarea", + "email": "gcox@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-textarea-41cf17e8-7afd-4d6a-92bf-29e5d0b4ad86.json b/change/@fluentui-react-textarea-41cf17e8-7afd-4d6a-92bf-29e5d0b4ad86.json new file mode 100644 index 00000000000000..855c3d5774048a --- /dev/null +++ b/change/@fluentui-react-textarea-41cf17e8-7afd-4d6a-92bf-29e5d0b4ad86.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "chore: move makeStyles() calls to .styles.ts files", + "packageName": "@fluentui/react-textarea", + "email": "olfedias@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-textarea-556e72e6-3d67-4601-b499-a72784886ead.json b/change/@fluentui-react-textarea-556e72e6-3d67-4601-b499-a72784886ead.json new file mode 100644 index 00000000000000..5190c27d9c20a6 --- /dev/null +++ b/change/@fluentui-react-textarea-556e72e6-3d67-4601-b499-a72784886ead.json @@ -0,0 +1,7 @@ +{ + "type": "none", + "comment": "fix: update npmignore files to fix npm8/node16 regression how npm publish works", + "packageName": "@fluentui/react-textarea", + "email": "martinhochel@microsoft.com", + "dependentChangeType": "none" +} diff --git a/change/@fluentui-react-theme-dabe4f6a-7aa2-4d4a-b9d2-a669ced35fb1.json b/change/@fluentui-react-theme-dabe4f6a-7aa2-4d4a-b9d2-a669ced35fb1.json new file mode 100644 index 00000000000000..3021069a3ce541 --- /dev/null +++ b/change/@fluentui-react-theme-dabe4f6a-7aa2-4d4a-b9d2-a669ced35fb1.json @@ -0,0 +1,7 @@ +{ + "type": "none", + "comment": "fix: update npmignore files to fix npm8/node16 regression how npm publish works", + "packageName": "@fluentui/react-theme", + "email": "martinhochel@microsoft.com", + "dependentChangeType": "none" +} diff --git a/change/@fluentui-react-theme-sass-f9799cf9-b29c-490f-9d34-350051a5464c.json b/change/@fluentui-react-theme-sass-f9799cf9-b29c-490f-9d34-350051a5464c.json new file mode 100644 index 00000000000000..958cb67deeb035 --- /dev/null +++ b/change/@fluentui-react-theme-sass-f9799cf9-b29c-490f-9d34-350051a5464c.json @@ -0,0 +1,7 @@ +{ + "type": "none", + "comment": "fix: update npmignore files to fix npm8/node16 regression how npm publish works", + "packageName": "@fluentui/react-theme-sass", + "email": "martinhochel@microsoft.com", + "dependentChangeType": "none" +} diff --git a/change/@fluentui-react-toolbar-3fb5631d-7961-4f5d-833b-f67c45abb2c2.json b/change/@fluentui-react-toolbar-3fb5631d-7961-4f5d-833b-f67c45abb2c2.json deleted file mode 100644 index 97c01bea04a405..00000000000000 --- a/change/@fluentui-react-toolbar-3fb5631d-7961-4f5d-833b-f67c45abb2c2.json +++ /dev/null @@ -1,7 +0,0 @@ -{ - "type": "patch", - "comment": "bugfix: remove caret from react-jsx-runtime prerelease dependency", - "packageName": "@fluentui/react-toolbar", - "email": "bernardo.sunderhus@gmail.com", - "dependentChangeType": "patch" -} diff --git a/change/@fluentui-react-toolbar-9055847a-c5db-4e39-9320-34bb4d94525f.json b/change/@fluentui-react-toolbar-9055847a-c5db-4e39-9320-34bb4d94525f.json new file mode 100644 index 00000000000000..a871025dbc6f31 --- /dev/null +++ b/change/@fluentui-react-toolbar-9055847a-c5db-4e39-9320-34bb4d94525f.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "Update to use single hook selector", + "packageName": "@fluentui/react-toolbar", + "email": "gcox@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-toolbar-adb85069-12ca-468c-9a54-c4da1baf117e.json b/change/@fluentui-react-toolbar-adb85069-12ca-468c-9a54-c4da1baf117e.json new file mode 100644 index 00000000000000..4d00ca15178922 --- /dev/null +++ b/change/@fluentui-react-toolbar-adb85069-12ca-468c-9a54-c4da1baf117e.json @@ -0,0 +1,7 @@ +{ + "type": "none", + "comment": "fix: update npmignore files to fix npm8/node16 regression how npm publish works", + "packageName": "@fluentui/react-toolbar", + "email": "martinhochel@microsoft.com", + "dependentChangeType": "none" +} 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 00000000000000..3de71bf9ea345d --- /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-tooltip-6fdda25e-8e95-4877-846f-66558e6a4a7d.json b/change/@fluentui-react-tooltip-6fdda25e-8e95-4877-846f-66558e6a4a7d.json new file mode 100644 index 00000000000000..90d3c9e7a87a8a --- /dev/null +++ b/change/@fluentui-react-tooltip-6fdda25e-8e95-4877-846f-66558e6a4a7d.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "chore: move makeStyles() calls to .styles.ts files", + "packageName": "@fluentui/react-tooltip", + "email": "olfedias@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-tooltip-75aa2887-2b01-40ed-a321-36b592385d06.json b/change/@fluentui-react-tooltip-75aa2887-2b01-40ed-a321-36b592385d06.json new file mode 100644 index 00000000000000..9cae03a363572f --- /dev/null +++ b/change/@fluentui-react-tooltip-75aa2887-2b01-40ed-a321-36b592385d06.json @@ -0,0 +1,7 @@ +{ + "type": "none", + "comment": "fix: update npmignore files to fix npm8/node16 regression how npm publish works", + "packageName": "@fluentui/react-tooltip", + "email": "martinhochel@microsoft.com", + "dependentChangeType": "none" +} diff --git a/change/@fluentui-react-tooltip-db63968f-9b0e-4bfd-ae01-f690f2f933b0.json b/change/@fluentui-react-tooltip-db63968f-9b0e-4bfd-ae01-f690f2f933b0.json new file mode 100644 index 00000000000000..82f4dc6e6cad56 --- /dev/null +++ b/change/@fluentui-react-tooltip-db63968f-9b0e-4bfd-ae01-f690f2f933b0.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "Update to use single hook selector", + "packageName": "@fluentui/react-tooltip", + "email": "gcox@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-tree-331af5e5-0217-4fbb-b822-ce32d2abc90d.json b/change/@fluentui-react-tree-84a7e55a-0a40-4b0e-8bb8-a3feb88fa234.json similarity index 63% rename from change/@fluentui-react-tree-331af5e5-0217-4fbb-b822-ce32d2abc90d.json rename to change/@fluentui-react-tree-84a7e55a-0a40-4b0e-8bb8-a3feb88fa234.json index 43a1c954efcc3f..f42640c8d48098 100644 --- a/change/@fluentui-react-tree-331af5e5-0217-4fbb-b822-ce32d2abc90d.json +++ b/change/@fluentui-react-tree-84a7e55a-0a40-4b0e-8bb8-a3feb88fa234.json @@ -1,6 +1,6 @@ { "type": "prerelease", - "comment": "bugfix: remove caret from react-jsx-runtime prerelease dependency", + "comment": "feat: makes useFlatTree generic", "packageName": "@fluentui/react-tree", "email": "bernardo.sunderhus@gmail.com", "dependentChangeType": "patch" diff --git a/change/@fluentui-react-jsx-runtime-e321b00b-0fc8-427c-bb82-36948756d961.json b/change/@fluentui-react-tree-8e9777b6-6274-44dd-b7ce-08b5886bec49.json similarity index 50% rename from change/@fluentui-react-jsx-runtime-e321b00b-0fc8-427c-bb82-36948756d961.json rename to change/@fluentui-react-tree-8e9777b6-6274-44dd-b7ce-08b5886bec49.json index 19520bca0aa681..db09e5486bcbe9 100644 --- a/change/@fluentui-react-jsx-runtime-e321b00b-0fc8-427c-bb82-36948756d961.json +++ b/change/@fluentui-react-tree-8e9777b6-6274-44dd-b7ce-08b5886bec49.json @@ -1,7 +1,7 @@ { "type": "prerelease", - "comment": "chore: simplify createElement method", - "packageName": "@fluentui/react-jsx-runtime", + "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 00000000000000..870eac1d9832d7 --- /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 00000000000000..17dbe4f6863fe3 --- /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-tree-eda40c8b-3965-4508-a78e-c876208de14b.json b/change/@fluentui-react-tree-eda40c8b-3965-4508-a78e-c876208de14b.json new file mode 100644 index 00000000000000..b417d86be6d040 --- /dev/null +++ b/change/@fluentui-react-tree-eda40c8b-3965-4508-a78e-c876208de14b.json @@ -0,0 +1,7 @@ +{ + "type": "none", + "comment": "fix: update npmignore files to fix npm8/node16 regression how npm publish works", + "packageName": "@fluentui/react-tree", + "email": "martinhochel@microsoft.com", + "dependentChangeType": "none" +} diff --git a/change/@fluentui-react-utilities-ed426104-eb57-4b75-8717-24d21e30a0bb.json b/change/@fluentui-react-utilities-ed426104-eb57-4b75-8717-24d21e30a0bb.json new file mode 100644 index 00000000000000..0713f1d4698bf4 --- /dev/null +++ b/change/@fluentui-react-utilities-ed426104-eb57-4b75-8717-24d21e30a0bb.json @@ -0,0 +1,7 @@ +{ + "type": "none", + "comment": "fix: update npmignore files to fix npm8/node16 regression how npm publish works", + "packageName": "@fluentui/react-utilities", + "email": "martinhochel@microsoft.com", + "dependentChangeType": "none" +} 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 00000000000000..0eb8f7bc317d7a --- /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/change/@fluentui-react-virtualizer-746d5d00-25f1-4c51-af78-e38be2a9e3f0.json b/change/@fluentui-react-virtualizer-746d5d00-25f1-4c51-af78-e38be2a9e3f0.json new file mode 100644 index 00000000000000..47c67f06376370 --- /dev/null +++ b/change/@fluentui-react-virtualizer-746d5d00-25f1-4c51-af78-e38be2a9e3f0.json @@ -0,0 +1,7 @@ +{ + "type": "none", + "comment": "fix: update npmignore files to fix npm8/node16 regression how npm publish works", + "packageName": "@fluentui/react-virtualizer", + "email": "martinhochel@microsoft.com", + "dependentChangeType": "none" +} diff --git a/change/@fluentui-tokens-b0e8f9c4-bc2a-4803-b177-d2917b0d07c6.json b/change/@fluentui-tokens-b0e8f9c4-bc2a-4803-b177-d2917b0d07c6.json new file mode 100644 index 00000000000000..55536880c5aa40 --- /dev/null +++ b/change/@fluentui-tokens-b0e8f9c4-bc2a-4803-b177-d2917b0d07c6.json @@ -0,0 +1,7 @@ +{ + "type": "none", + "comment": "fix: update npmignore files to fix npm8/node16 regression how npm publish works", + "packageName": "@fluentui/tokens", + "email": "martinhochel@microsoft.com", + "dependentChangeType": "none" +} diff --git a/lage.config.js b/lage.config.js index a2474bb61c3cf3..ce4035b7d54f93 100644 --- a/lage.config.js +++ b/lage.config.js @@ -5,7 +5,8 @@ module.exports = { 'build:info': [], bundle: ['build'], 'bundle-size': ['build'], - lint: [], + // adding temporary back until import plugin rule is resolved https://github.com/microsoft/fluentui/issues/27727 + lint: ['build'], clean: [], test: ['build'], 'type-check': ['build'], diff --git a/package.json b/package.json index 12d49f6b292c6f..a86ad0a03c512d 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/api-docs/package.json b/packages/api-docs/package.json index e599976b6a8884..8cd5a902a62740 100644 --- a/packages/api-docs/package.json +++ b/packages/api-docs/package.json @@ -1,6 +1,6 @@ { "name": "@fluentui/api-docs", - "version": "8.2.7", + "version": "8.2.8", "description": "Transforms API Extractor .api.json files into .page.json files", "repository": { "type": "git", diff --git a/packages/azure-themes/CHANGELOG.json b/packages/azure-themes/CHANGELOG.json index 3e722de3bc4d6a..0a92ec1fa4b51d 100644 --- a/packages/azure-themes/CHANGELOG.json +++ b/packages/azure-themes/CHANGELOG.json @@ -1,6 +1,107 @@ { "name": "@fluentui/azure-themes", "entries": [ + { + "date": "Tue, 02 May 2023 00:58:19 GMT", + "tag": "@fluentui/azure-themes_v8.6.1", + "version": "8.6.1", + "comments": { + "patch": [ + { + "author": "beachball", + "package": "@fluentui/azure-themes", + "comment": "Bump @fluentui/react to v8.109.0", + "commit": "c2326dc86037b18a6673697885703b5953ffd0c2" + }, + { + "author": "beachball", + "package": "@fluentui/azure-themes", + "comment": "Bump @fluentui/set-version to v8.2.8", + "commit": "c2326dc86037b18a6673697885703b5953ffd0c2" + } + ] + } + }, + { + "date": "Mon, 01 May 2023 07:39:53 GMT", + "tag": "@fluentui/azure-themes_v8.6.0", + "version": "8.6.0", + "comments": { + "patch": [ + { + "author": "30805892+Jacqueline-ms@users.noreply.github.com", + "package": "@fluentui/azure-themes", + "commit": "d9f8a815f9424d6174c4ef45ce3b977ffc28b67f", + "comment": "dropdown style bug fix for high contrast themes" + } + ], + "minor": [ + { + "author": "30805892+Jacqueline-ms@users.noreply.github.com", + "package": "@fluentui/azure-themes", + "commit": "4acd563e14d4a257585cff2dba2fb826ce9c059b", + "comment": "feat: Adding Azure Theme Tag Button variant for primary and default buttons" + }, + { + "author": "beachball", + "package": "@fluentui/azure-themes", + "comment": "Bump @fluentui/react to v8.108.3", + "commit": "46f19b90d2088f055f9cd4bfad840f72fe68f0d8" + }, + { + "author": "beachball", + "package": "@fluentui/azure-themes", + "comment": "Bump @fluentui/set-version to v8.2.7", + "commit": "46f19b90d2088f055f9cd4bfad840f72fe68f0d8" + } + ] + } + }, + { + "date": "Tue, 25 Apr 2023 07:38:32 GMT", + "tag": "@fluentui/azure-themes_v8.5.83", + "version": "8.5.83", + "comments": { + "patch": [ + { + "author": "beachball", + "package": "@fluentui/azure-themes", + "comment": "Bump @fluentui/react to v8.108.2", + "commit": "2d93a25e46b76bb473f1deaea3180df5ef3c53ec" + } + ] + } + }, + { + "date": "Fri, 21 Apr 2023 07:49:09 GMT", + "tag": "@fluentui/azure-themes_v8.5.82", + "version": "8.5.82", + "comments": { + "patch": [ + { + "author": "beachball", + "package": "@fluentui/azure-themes", + "comment": "Bump @fluentui/react to v8.108.1", + "commit": "ab5e8979917780ec8cf6b3b08b3696fc1b7a83f4" + } + ] + } + }, + { + "date": "Thu, 20 Apr 2023 07:47:57 GMT", + "tag": "@fluentui/azure-themes_v8.5.81", + "version": "8.5.81", + "comments": { + "patch": [ + { + "author": "beachball", + "package": "@fluentui/azure-themes", + "comment": "Bump @fluentui/react to v8.108.0", + "commit": "f7d88ee6fb582989efc057880ddfe60228649189" + } + ] + } + }, { "date": "Mon, 17 Apr 2023 07:40:26 GMT", "tag": "@fluentui/azure-themes_v8.5.80", diff --git a/packages/azure-themes/CHANGELOG.md b/packages/azure-themes/CHANGELOG.md index cd29fc0aed9de9..efab34ed7185ee 100644 --- a/packages/azure-themes/CHANGELOG.md +++ b/packages/azure-themes/CHANGELOG.md @@ -1,9 +1,61 @@ # Change Log - @fluentui/azure-themes -This log was last generated on Mon, 17 Apr 2023 07:40:26 GMT and should not be manually modified. +This log was last generated on Tue, 02 May 2023 00:58:19 GMT and should not be manually modified. +## [8.6.1](https://github.com/microsoft/fluentui/tree/@fluentui/azure-themes_v8.6.1) + +Tue, 02 May 2023 00:58:19 GMT +[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/azure-themes_v8.6.0..@fluentui/azure-themes_v8.6.1) + +### Patches + +- Bump @fluentui/react to v8.109.0 ([PR #27736](https://github.com/microsoft/fluentui/pull/27736) by beachball) +- Bump @fluentui/set-version to v8.2.8 ([PR #27736](https://github.com/microsoft/fluentui/pull/27736) by beachball) + +## [8.6.0](https://github.com/microsoft/fluentui/tree/@fluentui/azure-themes_v8.6.0) + +Mon, 01 May 2023 07:39:53 GMT +[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/azure-themes_v8.5.83..@fluentui/azure-themes_v8.6.0) + +### Minor changes + +- feat: Adding Azure Theme Tag Button variant for primary and default buttons ([PR #27186](https://github.com/microsoft/fluentui/pull/27186) by 30805892+Jacqueline-ms@users.noreply.github.com) +- Bump @fluentui/react to v8.108.3 ([PR #27724](https://github.com/microsoft/fluentui/pull/27724) by beachball) +- Bump @fluentui/set-version to v8.2.7 ([PR #27724](https://github.com/microsoft/fluentui/pull/27724) by beachball) + +### Patches + +- dropdown style bug fix for high contrast themes ([PR #27346](https://github.com/microsoft/fluentui/pull/27346) by 30805892+Jacqueline-ms@users.noreply.github.com) + +## [8.5.83](https://github.com/microsoft/fluentui/tree/@fluentui/azure-themes_v8.5.83) + +Tue, 25 Apr 2023 07:38:32 GMT +[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/azure-themes_v8.5.82..@fluentui/azure-themes_v8.5.83) + +### Patches + +- Bump @fluentui/react to v8.108.2 ([PR #26482](https://github.com/microsoft/fluentui/pull/26482) by beachball) + +## [8.5.82](https://github.com/microsoft/fluentui/tree/@fluentui/azure-themes_v8.5.82) + +Fri, 21 Apr 2023 07:49:09 GMT +[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/azure-themes_v8.5.81..@fluentui/azure-themes_v8.5.82) + +### Patches + +- Bump @fluentui/react to v8.108.1 ([PR #27586](https://github.com/microsoft/fluentui/pull/27586) by beachball) + +## [8.5.81](https://github.com/microsoft/fluentui/tree/@fluentui/azure-themes_v8.5.81) + +Thu, 20 Apr 2023 07:47:57 GMT +[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/azure-themes_v8.5.80..@fluentui/azure-themes_v8.5.81) + +### Patches + +- Bump @fluentui/react to v8.108.0 ([PR #27637](https://github.com/microsoft/fluentui/pull/27637) by beachball) + ## [8.5.80](https://github.com/microsoft/fluentui/tree/@fluentui/azure-themes_v8.5.80) Mon, 17 Apr 2023 07:40:26 GMT diff --git a/packages/azure-themes/package.json b/packages/azure-themes/package.json index a5dd7436ed6a1f..a5de99735f542c 100644 --- a/packages/azure-themes/package.json +++ b/packages/azure-themes/package.json @@ -1,6 +1,6 @@ { "name": "@fluentui/azure-themes", - "version": "8.5.80", + "version": "8.6.1", "description": "Azure themes for Fluent UI React", "main": "lib-commonjs/index.js", "module": "lib/index.js", @@ -28,8 +28,8 @@ "@fluentui/scripts-webpack": "*" }, "dependencies": { - "@fluentui/react": "^8.107.6", - "@fluentui/set-version": "^8.2.6", + "@fluentui/react": "^8.109.0", + "@fluentui/set-version": "^8.2.8", "tslib": "^2.1.0" } } diff --git a/packages/azure-themes/src/azure/AzureColors.ts b/packages/azure-themes/src/azure/AzureColors.ts index 9dc26a97aeb7f1..0c9b4a99aa44c4 100644 --- a/packages/azure-themes/src/azure/AzureColors.ts +++ b/packages/azure-themes/src/azure/AzureColors.ts @@ -2,9 +2,12 @@ import { IAzureSemanticColors } from './IAzureSemanticColors'; export namespace BaseColors { export const BLUE_F0F6FF = '#F0F6FF'; + export const BLUE_B3D7F2 = '#b3d7f2'; export const BLUE_CCE1FF = '#cce1ff'; + export const BLUE_CCE4F6 = '#cce4f6'; export const BLUE_C7E0F4 = '#C7E0F4'; export const BLUE_DEECF9 = '#deecf9'; + export const BLUE_E6F2FB = '#e6f2fb'; export const BLUE_0000CD = '#0000cd'; export const BLUE_00245B = '#00245B'; export const BLUE_00E8E8 = '#00e8e8'; @@ -115,6 +118,7 @@ export namespace BaseColors { export const GRAY_808080_070 = 'rgba(128, 128, 128, .70)'; export const BLUE_55B3FF_010 = 'rgba(85, 179, 255, .10)'; export const BLUE_55B3FF_020 = 'rgba(85, 179, 255, .20)'; + export const BLUE_55B3FF_040 = 'rgba(85, 179, 255, .4)'; // Extended Palette Colors (not in Azure spec) export const GRAY_FFFFFF_050 = 'rgba(255,255,255,.5)'; // overlay light @@ -300,6 +304,15 @@ export const DarkSemanticColors: IAzureSemanticColors = { }, focus: BaseColors.GRAY_A19F9D, }, + dropDown: { + background: { + rest: BaseColors.GRAY_252423, + hover: BaseColors.GRAY_323130, + }, + text: { + hovered: BaseColors.WHITE, + }, + }, item: { hover: BaseColors.GRAY_323130, select: BaseColors.GRAY_3B3A39, @@ -309,6 +322,23 @@ export const DarkSemanticColors: IAzureSemanticColors = { primary: BaseColors.GRAY_808080, secondary: BaseColors.GRAY_404040, }, + tagButton: { + rest: { + text: BaseColors.WHITE, + background: BaseColors.BLUE_55B3FF_040, + border: BaseColors.TRANSPARENT, + }, + hover: { + text: BaseColors.WHITE, + background: BaseColors.BLUE_55B3FF_040, + border: BaseColors.GRAY_808080_070, + }, + pressed: { + text: BaseColors.WHITE, + background: BaseColors.BLUE_55B3FF_040, + border: BaseColors.BLUE_4894FE, + }, + }, toggle: { disabled: { backrgound: BaseColors.GRAY_484644, @@ -554,6 +584,15 @@ export const HighContrastDarkSemanticColors: IAzureSemanticColors = { }, focus: BaseColors.GRAY_A19F9D, }, + dropDown: { + background: { + rest: BaseColors.GRAY_1B1A19, + hover: BaseColors.TRANSPARENT, + }, + text: { + hovered: BaseColors.WHITE, + }, + }, item: { hover: BaseColors.BLUE_00FFFF, select: BaseColors.GRAY_808080_050, @@ -563,6 +602,23 @@ export const HighContrastDarkSemanticColors: IAzureSemanticColors = { primary: BaseColors.GRAY_808080, secondary: BaseColors.GRAY_404040, }, + tagButton: { + rest: { + text: BaseColors.WHITE, + background: BaseColors.BLUE_55B3FF_040, + border: BaseColors.TRANSPARENT, + }, + hover: { + text: BaseColors.WHITE, + background: BaseColors.BLUE_55B3FF_040, + border: BaseColors.WHITE, + }, + pressed: { + text: BaseColors.WHITE, + background: BaseColors.BLUE_55B3FF_040, + border: BaseColors.BLUE_4894FE, + }, + }, toggle: { disabled: { backrgound: BaseColors.GRAY_484644, @@ -808,6 +864,15 @@ export const LightSemanticColors: IAzureSemanticColors = { }, focus: BaseColors.GRAY_605E5C, }, + dropDown: { + background: { + rest: BaseColors.WHITE, + hover: BaseColors.GRAY_F3F2F1, + }, + text: { + hovered: BaseColors.GRAY_302928, + }, + }, item: { hover: BaseColors.GRAY_F3F2F1, select: BaseColors.GRAY_EDEBE9, @@ -817,6 +882,23 @@ export const LightSemanticColors: IAzureSemanticColors = { primary: BaseColors.GRAY_F7F7F7, secondary: BaseColors.GRAY_DFDFDF, }, + tagButton: { + rest: { + text: BaseColors.BLACK, + background: BaseColors.BLUE_E6F2FB, + border: BaseColors.BLUE_E6F2FB, + }, + hover: { + text: BaseColors.BLACK, + background: BaseColors.BLUE_CCE4F6, + border: BaseColors.BLUE_CCE4F6, + }, + pressed: { + text: BaseColors.BLACK, + background: BaseColors.BLUE_B3D7F2, + border: BaseColors.BLUE_015CDA, + }, + }, toggle: { disabled: { backrgound: BaseColors.WHITE, @@ -1062,6 +1144,15 @@ export const HighContrastLightSemanticColors: IAzureSemanticColors = { }, focus: BaseColors.GRAY_323130, }, + dropDown: { + background: { + rest: BaseColors.WHITE, + hover: BaseColors.TRANSPARENT, + }, + text: { + hovered: BaseColors.BLACK, + }, + }, item: { hover: BaseColors.PURPLE_800080, select: BaseColors.GRAY_EDEBE9, @@ -1071,6 +1162,23 @@ export const HighContrastLightSemanticColors: IAzureSemanticColors = { primary: BaseColors.GRAY_F7F7F7, secondary: BaseColors.GRAY_DFDFDF, }, + tagButton: { + rest: { + text: BaseColors.BLACK, + background: BaseColors.BLUE_E6F2FB, + border: BaseColors.BLUE_E6F2FB, + }, + hover: { + text: BaseColors.BLACK, + background: BaseColors.BLUE_CCE4F6, + border: BaseColors.BLUE_CCE4F6, + }, + pressed: { + text: BaseColors.BLACK, + background: BaseColors.BLUE_B3D7F2, + border: BaseColors.BLUE_015CDA, + }, + }, toggle: { disabled: { backrgound: BaseColors.WHITE, diff --git a/packages/azure-themes/src/azure/AzureThemeDark.ts b/packages/azure-themes/src/azure/AzureThemeDark.ts index 825af8db2be660..77fc6c33d099db 100644 --- a/packages/azure-themes/src/azure/AzureThemeDark.ts +++ b/packages/azure-themes/src/azure/AzureThemeDark.ts @@ -21,11 +21,19 @@ const darkExtendedSemanticColors: Partial = { buttonBackgroundDisabled: DarkSemanticColors.disabledButton.background, buttonBackgroundHovered: DarkSemanticColors.secondaryButton.hover.background, buttonBackgroundPressed: DarkSemanticColors.secondaryButton.pressed.background, + ButtonBackgroundTag: DarkSemanticColors.tagButton.rest.background, + ButtonBackgroundTagHovered: DarkSemanticColors.tagButton.hover.background, + ButtonBackgroundTagPressed: DarkSemanticColors.tagButton.pressed.background, + ButtonBackgroundTagText: DarkSemanticColors.tagButton.rest.text, + ButtonBackgroundTagTextHovered: DarkSemanticColors.tagButton.hover.text, ButtonBorderDanger: DarkSemanticColors.dangerButton.rest.border, ButtonBorderDangerHovered: DarkSemanticColors.dangerButton.hover.border, ButtonBorderDangerPressed: DarkSemanticColors.dangerButton.pressed.border, ButtonBorderDisabled: DarkSemanticColors.disabledButton.background, ButtonBorderFocus: DarkSemanticColors.secondaryButton.focus.border, + ButtonBorderTag: DarkSemanticColors.tagButton.rest.border, + ButtonBorderTagHovered: DarkSemanticColors.tagButton.hover.border, + ButtonBorderTagPressed: DarkSemanticColors.tagButton.pressed.border, buttonText: DarkSemanticColors.secondaryButton.rest.text, buttonTextChecked: DarkSemanticColors.secondaryButton.pressed.text, buttonTextCheckedHovered: DarkSemanticColors.secondaryButton.hover.border, @@ -52,6 +60,9 @@ const darkExtendedSemanticColors: Partial = { datePickerSelectionText: DarkSemanticColors.datePicker.rest.text, disabledBackground: CommonSemanticColors.backgrounds.disabled, disabledBodyText: DarkSemanticColors.text.disabled, + dropdownBackground: DarkSemanticColors.dropDown.background.rest, + dropdownItemHover: DarkSemanticColors.dropDown.text.hovered, + dropdownTextHovered: DarkSemanticColors.dropDown.text.hovered, errorBackground: DarkSemanticColors.controlOutlines.error, errorText: DarkSemanticColors.text.error, focusBorder: DarkSemanticColors.controlOutlines.accent, diff --git a/packages/azure-themes/src/azure/AzureThemeHighContrastDark.ts b/packages/azure-themes/src/azure/AzureThemeHighContrastDark.ts index 3c89908c1a79b4..41e04fdddeadd0 100644 --- a/packages/azure-themes/src/azure/AzureThemeHighContrastDark.ts +++ b/packages/azure-themes/src/azure/AzureThemeHighContrastDark.ts @@ -21,11 +21,19 @@ const highContrastDarkExtendedSemanticColors: Partial = buttonBackgroundDisabled: HighContrastDarkSemanticColors.primaryButton.disabled.background, buttonBackgroundHovered: HighContrastDarkSemanticColors.secondaryButton.hover.background, buttonBackgroundPressed: HighContrastDarkSemanticColors.secondaryButton.pressed.background, + ButtonBackgroundTag: HighContrastDarkSemanticColors.tagButton.rest.background, + ButtonBackgroundTagHovered: HighContrastDarkSemanticColors.tagButton.hover.background, + ButtonBackgroundTagPressed: HighContrastDarkSemanticColors.tagButton.pressed.background, + ButtonBackgroundTagText: HighContrastDarkSemanticColors.tagButton.rest.text, + ButtonBackgroundTagTextHovered: HighContrastDarkSemanticColors.tagButton.hover.text, ButtonBorderDanger: HighContrastDarkSemanticColors.dangerButton.rest.border, ButtonBorderDangerHovered: HighContrastDarkSemanticColors.dangerButton.hover.border, ButtonBorderDangerPressed: HighContrastDarkSemanticColors.dangerButton.pressed.border, ButtonBorderDisabled: HighContrastDarkSemanticColors.disabledButton.background, ButtonBorderFocus: HighContrastDarkSemanticColors.secondaryButton.focus.border, + ButtonBorderTag: HighContrastDarkSemanticColors.tagButton.rest.border, + ButtonBorderTagHovered: HighContrastDarkSemanticColors.tagButton.hover.border, + ButtonBorderTagPressed: HighContrastDarkSemanticColors.tagButton.pressed.border, buttonText: HighContrastDarkSemanticColors.secondaryButton.rest.text, buttonTextChecked: HighContrastDarkSemanticColors.secondaryButton.pressed.text, buttonTextCheckedHovered: HighContrastDarkSemanticColors.secondaryButton.hover.border, @@ -53,6 +61,9 @@ const highContrastDarkExtendedSemanticColors: Partial = datePickerSelectionText: HighContrastDarkSemanticColors.datePicker.rest.text, disabledBackground: CommonSemanticColors.backgrounds.disabled, disabledBodyText: HighContrastDarkSemanticColors.text.disabled, + dropdownBackground: HighContrastDarkSemanticColors.dropDown.background.rest, + dropdownItemHover: HighContrastDarkSemanticColors.dropDown.background.hover, + dropdownTextHovered: HighContrastDarkSemanticColors.dropDown.text.hovered, errorBackground: HighContrastDarkSemanticColors.controlOutlines.error, errorText: HighContrastDarkSemanticColors.text.error, focusBorder: HighContrastDarkSemanticColors.controlOutlines.accent, diff --git a/packages/azure-themes/src/azure/AzureThemeHighContrastLight.ts b/packages/azure-themes/src/azure/AzureThemeHighContrastLight.ts index 00a4fe76cc23be..d42fa5f029a13f 100644 --- a/packages/azure-themes/src/azure/AzureThemeHighContrastLight.ts +++ b/packages/azure-themes/src/azure/AzureThemeHighContrastLight.ts @@ -21,11 +21,19 @@ const highContrastLightExtendedSemanticColors: Partial buttonBackgroundDisabled: HighContrastLightSemanticColors.disabledButton.background, buttonBackgroundHovered: HighContrastLightSemanticColors.secondaryButton.hover.background, buttonBackgroundPressed: HighContrastLightSemanticColors.secondaryButton.pressed.background, + ButtonBackgroundTag: HighContrastLightSemanticColors.tagButton.rest.background, + ButtonBackgroundTagHovered: HighContrastLightSemanticColors.tagButton.hover.background, + ButtonBackgroundTagPressed: HighContrastLightSemanticColors.tagButton.pressed.background, + ButtonBackgroundTagText: HighContrastLightSemanticColors.tagButton.rest.text, + ButtonBackgroundTagTextHovered: HighContrastLightSemanticColors.tagButton.hover.text, ButtonBorderDanger: HighContrastLightSemanticColors.dangerButton.rest.border, ButtonBorderDangerHovered: HighContrastLightSemanticColors.dangerButton.hover.border, ButtonBorderDangerPressed: HighContrastLightSemanticColors.dangerButton.pressed.border, ButtonBorderDisabled: HighContrastLightSemanticColors.disabledButton.text, ButtonBorderFocus: HighContrastLightSemanticColors.secondaryButton.focus.border, + ButtonBorderTag: HighContrastLightSemanticColors.tagButton.rest.border, + ButtonBorderTagHovered: HighContrastLightSemanticColors.tagButton.hover.border, + ButtonBorderTagPressed: HighContrastLightSemanticColors.tagButton.pressed.border, buttonText: HighContrastLightSemanticColors.secondaryButton.rest.text, buttonTextChecked: HighContrastLightSemanticColors.secondaryButton.pressed.text, buttonTextCheckedHovered: HighContrastLightSemanticColors.secondaryButton.hover.border, @@ -53,6 +61,9 @@ const highContrastLightExtendedSemanticColors: Partial datePickerSelectionText: HighContrastLightSemanticColors.datePicker.rest.text, disabledBackground: CommonSemanticColors.backgrounds.disabled, disabledBodyText: HighContrastLightSemanticColors.text.disabled, + dropdownBackground: HighContrastLightSemanticColors.dropDown.background.rest, + dropdownItemHover: HighContrastLightSemanticColors.dropDown.background.hover, + dropdownTextHovered: HighContrastLightSemanticColors.dropDown.text.hovered, errorBackground: HighContrastLightSemanticColors.controlOutlines.error, errorText: HighContrastLightSemanticColors.text.error, focusBorder: HighContrastLightSemanticColors.controlOutlines.accent, diff --git a/packages/azure-themes/src/azure/AzureThemeLight.ts b/packages/azure-themes/src/azure/AzureThemeLight.ts index 66e742b3501668..83cb672241e468 100644 --- a/packages/azure-themes/src/azure/AzureThemeLight.ts +++ b/packages/azure-themes/src/azure/AzureThemeLight.ts @@ -21,11 +21,19 @@ const lightExtendedSemanticColors: Partial = { buttonBackgroundDisabled: LightSemanticColors.disabledButton.background, buttonBackgroundHovered: LightSemanticColors.secondaryButton.hover.background, buttonBackgroundPressed: LightSemanticColors.secondaryButton.pressed.background, + ButtonBackgroundTag: LightSemanticColors.tagButton.rest.background, + ButtonBackgroundTagHovered: LightSemanticColors.tagButton.hover.background, + ButtonBackgroundTagPressed: LightSemanticColors.tagButton.pressed.background, + ButtonBackgroundTagText: LightSemanticColors.tagButton.rest.text, + ButtonBackgroundTagTextHovered: LightSemanticColors.tagButton.hover.text, ButtonBorderDanger: LightSemanticColors.dangerButton.rest.border, ButtonBorderDangerHovered: LightSemanticColors.dangerButton.hover.border, ButtonBorderDangerPressed: LightSemanticColors.dangerButton.pressed.border, ButtonBorderDisabled: LightSemanticColors.disabledButton.background, ButtonBorderFocus: LightSemanticColors.secondaryButton.focus.border, + ButtonBorderTag: LightSemanticColors.tagButton.rest.border, + ButtonBorderTagHovered: LightSemanticColors.tagButton.hover.border, + ButtonBorderTagPressed: LightSemanticColors.tagButton.pressed.border, buttonText: LightSemanticColors.secondaryButton.rest.text, buttonTextChecked: LightSemanticColors.secondaryButton.pressed.text, buttonTextCheckedHovered: LightSemanticColors.secondaryButton.hover.border, @@ -53,6 +61,9 @@ const lightExtendedSemanticColors: Partial = { datePickerSelectionText: LightSemanticColors.datePicker.rest.text, disabledBackground: CommonSemanticColors.backgrounds.disabled, disabledBodyText: LightSemanticColors.text.disabled, + dropdownBackground: LightSemanticColors.dropDown.background.rest, + dropdownItemHover: LightSemanticColors.dropDown.background.hover, + dropdownTextHovered: LightSemanticColors.dropDown.text.hovered, errorBackground: LightSemanticColors.controlOutlines.error, errorText: LightSemanticColors.text.error, focusBorder: LightSemanticColors.controlOutlines.accent, diff --git a/packages/azure-themes/src/azure/IAzureSemanticColors.ts b/packages/azure-themes/src/azure/IAzureSemanticColors.ts index 7de8c77bd19d7c..f9ccaedf55681f 100644 --- a/packages/azure-themes/src/azure/IAzureSemanticColors.ts +++ b/packages/azure-themes/src/azure/IAzureSemanticColors.ts @@ -143,6 +143,15 @@ export interface IAzureSemanticColors { }; focus: string; }; + dropDown: { + background: { + rest: string; + hover: string; + }; + text: { + hovered: string; + }; + }; item: { hover: string; select: string; @@ -152,6 +161,23 @@ export interface IAzureSemanticColors { primary: string; secondary: string; }; + tagButton: { + rest: { + text: string; + background: string; + border: string; + }; + hover: { + text: string; + background: string; + border: string; + }; + pressed: { + text: string; + background: string; + border: string; + }; + }; toggle: { disabled: { backrgound: string; diff --git a/packages/azure-themes/src/azure/IExtendedSemanticColors.ts b/packages/azure-themes/src/azure/IExtendedSemanticColors.ts index 597272b5aa2b22..75c15b3919119d 100644 --- a/packages/azure-themes/src/azure/IExtendedSemanticColors.ts +++ b/packages/azure-themes/src/azure/IExtendedSemanticColors.ts @@ -19,6 +19,9 @@ export interface IExtendedSemanticColors extends ISemanticColors { buttonBackgroundPressed: string; ButtonBorderDisabled: string; ButtonBorderFocus: string; + ButtonBorderTag: string; + ButtonBorderTagHovered: string; + ButtonBorderTagPressed: string; buttonText: string; buttonTextChecked: string; buttonTextCheckedHovered: string; @@ -71,6 +74,9 @@ export interface IExtendedSemanticColors extends ISemanticColors { datePickerSelectionText: string; disabledBackground: string; disabledBodyText: string; + dropdownBackground: string; + dropdownItemHover: string; + dropdownTextHovered: string; errorBackground: string; errorText: string; focusBorder: string; @@ -106,6 +112,11 @@ export interface IExtendedSemanticColors extends ISemanticColors { primaryButtonBackgroundDisabled: string; primaryButtonBackgroundHovered: string; primaryButtonBackgroundPressed: string; + ButtonBackgroundTag: string; + ButtonBackgroundTagHovered: string; + ButtonBackgroundTagPressed: string; + ButtonBackgroundTagText: string; + ButtonBackgroundTagTextHovered: string; ButtonBorderDanger: string; ButtonBorderDangerHovered: string; ButtonBorderDangerPressed: string; diff --git a/packages/azure-themes/src/azure/styles/DefaultButton.styles.ts b/packages/azure-themes/src/azure/styles/DefaultButton.styles.ts index 7ab43979640d6a..2a265c6915ea91 100644 --- a/packages/azure-themes/src/azure/styles/DefaultButton.styles.ts +++ b/packages/azure-themes/src/azure/styles/DefaultButton.styles.ts @@ -13,8 +13,8 @@ export const DefaultButtonStyles = (theme: ITheme): Partial => { height: StyleConstants.inputControlHeight, padding: '0px 16px', border: `${StyleConstants.borderWidth} solid ${semanticColors.inputBorder}`, - // danger button selectors: { + // danger button '&.danger': { outlineColor: extendedSemanticColors.ButtonBackgroundDanger, borderColor: extendedSemanticColors.ButtonBorderDanger, @@ -41,6 +41,33 @@ export const DefaultButtonStyles = (theme: ITheme): Partial => { }, }, }, + // tag button + '&.tag': { + outlineColor: extendedSemanticColors.ButtonBackgroundTag, + borderColor: `${extendedSemanticColors.ButtonBorderTag} !important`, + backgroundColor: extendedSemanticColors.ButtonBackgroundTag, + color: extendedSemanticColors.ButtonBackgroundTagText, + selectors: { + ':hover': { + outlineColor: extendedSemanticColors.ButtonBackgroundTagHovered, + borderColor: `${extendedSemanticColors.ButtonBorderTagHovered} !important`, + backgroundColor: extendedSemanticColors.ButtonBackgroundTagHovered, + color: extendedSemanticColors.ButtonBackgroundTagTextHovered, + }, + ':active': { + outlineColor: extendedSemanticColors.ButtonBackgroundTagPressed, + borderColor: extendedSemanticColors.ButtonBorderTagPressed, + backgroundColor: `${extendedSemanticColors.ButtonBackgroundTagPressed} !important`, + color: extendedSemanticColors.ButtonBackgroundTagTextHovered, + }, + ':focus': { + outlineColor: `${extendedSemanticColors.ButtonBackgroundTagPressed} !important`, + borderColor: `${extendedSemanticColors.ButtonBackgroundTagPressed} !important`, + backgroundColor: `${extendedSemanticColors.ButtonBackgroundTagPressed} !important`, + color: `${extendedSemanticColors.ButtonBackgroundTagTextHovered} !important`, + }, + }, + }, // standard button '&.is-expanded': { color: semanticColors.buttonTextHovered, diff --git a/packages/azure-themes/src/azure/styles/DropDown.styles.ts b/packages/azure-themes/src/azure/styles/DropDown.styles.ts index ff3a1c07ed09a5..873ee1a412f07b 100644 --- a/packages/azure-themes/src/azure/styles/DropDown.styles.ts +++ b/packages/azure-themes/src/azure/styles/DropDown.styles.ts @@ -76,14 +76,14 @@ export const DropdownStyles = (props: IDropdownStyleProps): Partial => { padding: StyleConstants.buttonPadding, border: `${StyleConstants.borderWidth} solid ${semanticColors.primaryButtonBorder}`, selectors: { + // danger button '&.danger': { outlineColor: extendedSemanticColors.ButtonBackgroundDanger, borderColor: `${extendedSemanticColors.ButtonBorderDanger} !important`, @@ -39,6 +40,33 @@ export const PrimaryButtonStyles = (theme: ITheme): Partial => { }, }, }, + // tag button + '&.tag': { + outlineColor: extendedSemanticColors.ButtonBackgroundTag, + borderColor: `${extendedSemanticColors.ButtonBorderTag} !important`, + backgroundColor: extendedSemanticColors.ButtonBackgroundTag, + color: extendedSemanticColors.ButtonBackgroundTagText, + selectors: { + ':hover': { + outlineColor: extendedSemanticColors.ButtonBackgroundTagHovered, + borderColor: `${extendedSemanticColors.ButtonBorderTagHovered} !important`, + backgroundColor: extendedSemanticColors.ButtonBackgroundTagHovered, + color: extendedSemanticColors.ButtonBackgroundTagTextHovered, + }, + ':active': { + outlineColor: extendedSemanticColors.ButtonBackgroundTagPressed, + borderColor: extendedSemanticColors.ButtonBorderTagPressed, + backgroundColor: `${extendedSemanticColors.ButtonBackgroundTagPressed} !important`, + color: extendedSemanticColors.ButtonBackgroundTagTextHovered, + }, + ':focus': { + outlineColor: `${extendedSemanticColors.ButtonBackgroundTagPressed} !important`, + borderColor: `${extendedSemanticColors.ButtonBackgroundTagPressed} !important`, + backgroundColor: `${extendedSemanticColors.ButtonBackgroundTagPressed} !important`, + color: `${extendedSemanticColors.ButtonBackgroundTagTextHovered} !important`, + }, + }, + }, }, }, rootFocused: { diff --git a/packages/codemods/package.json b/packages/codemods/package.json index 8eefa4bbdde978..b7e0066f519cf0 100644 --- a/packages/codemods/package.json +++ b/packages/codemods/package.json @@ -1,6 +1,6 @@ { "name": "@fluentui/codemods", - "version": "8.4.9", + "version": "8.4.10", "description": "Tool enabling easy upgrades to new Fluent UI versions", "main": "lib-commonjs/index.js", "typings": "lib-commonjs/index.d.ts", diff --git a/packages/common-styles/CHANGELOG.json b/packages/common-styles/CHANGELOG.json index 812403f355a56b..527bb3efc65045 100644 --- a/packages/common-styles/CHANGELOG.json +++ b/packages/common-styles/CHANGELOG.json @@ -1,6 +1,36 @@ { "name": "@fluentui/common-styles", "entries": [ + { + "date": "Tue, 02 May 2023 00:58:19 GMT", + "tag": "@fluentui/common-styles_v1.2.24", + "version": "1.2.24", + "comments": { + "patch": [ + { + "author": "beachball", + "package": "@fluentui/common-styles", + "comment": "Bump @fluentui/style-utilities to v8.9.8", + "commit": "c2326dc86037b18a6673697885703b5953ffd0c2" + } + ] + } + }, + { + "date": "Mon, 01 May 2023 07:39:54 GMT", + "tag": "@fluentui/common-styles_v1.2.23", + "version": "1.2.23", + "comments": { + "patch": [ + { + "author": "beachball", + "package": "@fluentui/common-styles", + "comment": "Bump @fluentui/style-utilities to v8.9.7", + "commit": "46f19b90d2088f055f9cd4bfad840f72fe68f0d8" + } + ] + } + }, { "date": "Fri, 17 Mar 2023 08:15:56 GMT", "tag": "@fluentui/common-styles_v1.2.22", diff --git a/packages/common-styles/CHANGELOG.md b/packages/common-styles/CHANGELOG.md index 2c7bb7ea9f2a4c..859f55022f456d 100644 --- a/packages/common-styles/CHANGELOG.md +++ b/packages/common-styles/CHANGELOG.md @@ -1,9 +1,27 @@ # Change Log - @fluentui/common-styles -This log was last generated on Fri, 17 Mar 2023 08:15:56 GMT and should not be manually modified. +This log was last generated on Tue, 02 May 2023 00:58:19 GMT and should not be manually modified. +## [1.2.24](https://github.com/microsoft/fluentui/tree/@fluentui/common-styles_v1.2.24) + +Tue, 02 May 2023 00:58:19 GMT +[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/common-styles_v1.2.23..@fluentui/common-styles_v1.2.24) + +### Patches + +- Bump @fluentui/style-utilities to v8.9.8 ([PR #27736](https://github.com/microsoft/fluentui/pull/27736) by beachball) + +## [1.2.23](https://github.com/microsoft/fluentui/tree/@fluentui/common-styles_v1.2.23) + +Mon, 01 May 2023 07:39:54 GMT +[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/common-styles_v1.2.22..@fluentui/common-styles_v1.2.23) + +### Patches + +- Bump @fluentui/style-utilities to v8.9.7 ([PR #27724](https://github.com/microsoft/fluentui/pull/27724) by beachball) + ## [1.2.22](https://github.com/microsoft/fluentui/tree/@fluentui/common-styles_v1.2.22) Fri, 17 Mar 2023 08:15:56 GMT diff --git a/packages/common-styles/package.json b/packages/common-styles/package.json index 48c848c5faf486..dc984a39b09aa6 100644 --- a/packages/common-styles/package.json +++ b/packages/common-styles/package.json @@ -1,6 +1,6 @@ { "name": "@fluentui/common-styles", - "version": "1.2.22", + "version": "1.2.24", "description": "Common style definitions for Fluent UI React components", "repository": { "type": "git", @@ -18,7 +18,7 @@ "office-ui-fabric-core": "^11.0.0" }, "devDependencies": { - "@fluentui/style-utilities": "^8.9.6", + "@fluentui/style-utilities": "^8.9.8", "@fluentui/scripts-tasks": "*" } } diff --git a/packages/cra-template/CHANGELOG.json b/packages/cra-template/CHANGELOG.json index 476758a3ae40ea..8c93995c116c51 100644 --- a/packages/cra-template/CHANGELOG.json +++ b/packages/cra-template/CHANGELOG.json @@ -1,6 +1,81 @@ { "name": "@fluentui/cra-template", "entries": [ + { + "date": "Tue, 02 May 2023 00:58:19 GMT", + "tag": "@fluentui/cra-template_v8.4.82", + "version": "8.4.82", + "comments": { + "patch": [ + { + "author": "beachball", + "package": "@fluentui/cra-template", + "comment": "Bump @fluentui/react to v8.109.0", + "commit": "c2326dc86037b18a6673697885703b5953ffd0c2" + } + ] + } + }, + { + "date": "Mon, 01 May 2023 07:39:54 GMT", + "tag": "@fluentui/cra-template_v8.4.81", + "version": "8.4.81", + "comments": { + "patch": [ + { + "author": "beachball", + "package": "@fluentui/cra-template", + "comment": "Bump @fluentui/react to v8.108.3", + "commit": "46f19b90d2088f055f9cd4bfad840f72fe68f0d8" + } + ] + } + }, + { + "date": "Tue, 25 Apr 2023 07:38:32 GMT", + "tag": "@fluentui/cra-template_v8.4.80", + "version": "8.4.80", + "comments": { + "patch": [ + { + "author": "beachball", + "package": "@fluentui/cra-template", + "comment": "Bump @fluentui/react to v8.108.2", + "commit": "2d93a25e46b76bb473f1deaea3180df5ef3c53ec" + } + ] + } + }, + { + "date": "Fri, 21 Apr 2023 07:49:09 GMT", + "tag": "@fluentui/cra-template_v8.4.79", + "version": "8.4.79", + "comments": { + "patch": [ + { + "author": "beachball", + "package": "@fluentui/cra-template", + "comment": "Bump @fluentui/react to v8.108.1", + "commit": "ab5e8979917780ec8cf6b3b08b3696fc1b7a83f4" + } + ] + } + }, + { + "date": "Thu, 20 Apr 2023 07:47:57 GMT", + "tag": "@fluentui/cra-template_v8.4.78", + "version": "8.4.78", + "comments": { + "patch": [ + { + "author": "beachball", + "package": "@fluentui/cra-template", + "comment": "Bump @fluentui/react to v8.108.0", + "commit": "f7d88ee6fb582989efc057880ddfe60228649189" + } + ] + } + }, { "date": "Mon, 17 Apr 2023 07:40:26 GMT", "tag": "@fluentui/cra-template_v8.4.77", diff --git a/packages/cra-template/CHANGELOG.md b/packages/cra-template/CHANGELOG.md index e1745e30312b7f..1b9b4103795972 100644 --- a/packages/cra-template/CHANGELOG.md +++ b/packages/cra-template/CHANGELOG.md @@ -1,9 +1,54 @@ # Change Log - @fluentui/cra-template -This log was last generated on Mon, 17 Apr 2023 07:40:26 GMT and should not be manually modified. +This log was last generated on Tue, 02 May 2023 00:58:19 GMT and should not be manually modified. +## [8.4.82](https://github.com/microsoft/fluentui/tree/@fluentui/cra-template_v8.4.82) + +Tue, 02 May 2023 00:58:19 GMT +[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/cra-template_v8.4.81..@fluentui/cra-template_v8.4.82) + +### Patches + +- Bump @fluentui/react to v8.109.0 ([PR #27736](https://github.com/microsoft/fluentui/pull/27736) by beachball) + +## [8.4.81](https://github.com/microsoft/fluentui/tree/@fluentui/cra-template_v8.4.81) + +Mon, 01 May 2023 07:39:54 GMT +[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/cra-template_v8.4.80..@fluentui/cra-template_v8.4.81) + +### Patches + +- Bump @fluentui/react to v8.108.3 ([PR #27724](https://github.com/microsoft/fluentui/pull/27724) by beachball) + +## [8.4.80](https://github.com/microsoft/fluentui/tree/@fluentui/cra-template_v8.4.80) + +Tue, 25 Apr 2023 07:38:32 GMT +[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/cra-template_v8.4.79..@fluentui/cra-template_v8.4.80) + +### Patches + +- Bump @fluentui/react to v8.108.2 ([PR #26482](https://github.com/microsoft/fluentui/pull/26482) by beachball) + +## [8.4.79](https://github.com/microsoft/fluentui/tree/@fluentui/cra-template_v8.4.79) + +Fri, 21 Apr 2023 07:49:09 GMT +[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/cra-template_v8.4.78..@fluentui/cra-template_v8.4.79) + +### Patches + +- Bump @fluentui/react to v8.108.1 ([PR #27586](https://github.com/microsoft/fluentui/pull/27586) by beachball) + +## [8.4.78](https://github.com/microsoft/fluentui/tree/@fluentui/cra-template_v8.4.78) + +Thu, 20 Apr 2023 07:47:57 GMT +[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/cra-template_v8.4.77..@fluentui/cra-template_v8.4.78) + +### Patches + +- Bump @fluentui/react to v8.108.0 ([PR #27637](https://github.com/microsoft/fluentui/pull/27637) by beachball) + ## [8.4.77](https://github.com/microsoft/fluentui/tree/@fluentui/cra-template_v8.4.77) Mon, 17 Apr 2023 07:40:26 GMT diff --git a/packages/cra-template/package.json b/packages/cra-template/package.json index 04e135d8d816ad..85296771f6fa94 100644 --- a/packages/cra-template/package.json +++ b/packages/cra-template/package.json @@ -1,6 +1,6 @@ { "name": "@fluentui/cra-template", - "version": "8.4.77", + "version": "8.4.82", "description": "Create React App template for Fluent UI React (@fluentui/react)", "repository": { "type": "git", @@ -18,7 +18,7 @@ "template.json" ], "devDependencies": { - "@fluentui/react": "^8.107.6", + "@fluentui/react": "^8.109.0", "@fluentui/scripts-projects-test": "*", "@fluentui/scripts-monorepo": "*" } diff --git a/packages/date-time-utilities/.npmignore b/packages/date-time-utilities/.npmignore index 5ffaa387b655fa..94fc5ed77b7dfc 100644 --- a/packages/date-time-utilities/.npmignore +++ b/packages/date-time-utilities/.npmignore @@ -30,3 +30,6 @@ tsd.json tslint.json typings visualtests +!lib +!lib-commonjs +!lib-amd diff --git a/packages/date-time-utilities/CHANGELOG.json b/packages/date-time-utilities/CHANGELOG.json index 80c2442e75f644..1482ac12108d80 100644 --- a/packages/date-time-utilities/CHANGELOG.json +++ b/packages/date-time-utilities/CHANGELOG.json @@ -1,6 +1,57 @@ { "name": "@fluentui/date-time-utilities", "entries": [ + { + "date": "Tue, 02 May 2023 00:58:14 GMT", + "tag": "@fluentui/date-time-utilities_v8.5.9", + "version": "8.5.9", + "comments": { + "patch": [ + { + "author": "tristan.watanabe@gmail.com", + "package": "@fluentui/date-time-utilities", + "commit": "c2326dc86037b18a6673697885703b5953ffd0c2", + "comment": "fix: esm, cjs, and amd folders should all be published correctly." + }, + { + "author": "beachball", + "package": "@fluentui/date-time-utilities", + "comment": "Bump @fluentui/set-version to v8.2.8", + "commit": "c2326dc86037b18a6673697885703b5953ffd0c2" + } + ] + } + }, + { + "date": "Mon, 01 May 2023 07:39:54 GMT", + "tag": "@fluentui/date-time-utilities_v8.5.8", + "version": "8.5.8", + "comments": { + "patch": [ + { + "author": "beachball", + "package": "@fluentui/date-time-utilities", + "comment": "Bump @fluentui/set-version to v8.2.7", + "commit": "46f19b90d2088f055f9cd4bfad840f72fe68f0d8" + } + ] + } + }, + { + "date": "Tue, 25 Apr 2023 07:38:31 GMT", + "tag": "@fluentui/date-time-utilities_v8.5.7", + "version": "8.5.7", + "comments": { + "patch": [ + { + "author": "jamwu@microsoft.com", + "package": "@fluentui/date-time-utilities", + "commit": "2d93a25e46b76bb473f1deaea3180df5ef3c53ec", + "comment": "chore: Refactored getDateFromTimeSelection variable names." + } + ] + } + }, { "date": "Fri, 17 Mar 2023 08:15:56 GMT", "tag": "@fluentui/date-time-utilities_v8.5.6", diff --git a/packages/date-time-utilities/CHANGELOG.md b/packages/date-time-utilities/CHANGELOG.md index 9ad6408814aa6c..14ce6a51a11497 100644 --- a/packages/date-time-utilities/CHANGELOG.md +++ b/packages/date-time-utilities/CHANGELOG.md @@ -1,9 +1,37 @@ # Change Log - @fluentui/date-time-utilities -This log was last generated on Fri, 17 Mar 2023 08:15:56 GMT and should not be manually modified. +This log was last generated on Tue, 02 May 2023 00:58:14 GMT and should not be manually modified. +## [8.5.9](https://github.com/microsoft/fluentui/tree/@fluentui/date-time-utilities_v8.5.9) + +Tue, 02 May 2023 00:58:14 GMT +[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/date-time-utilities_v8.5.8..@fluentui/date-time-utilities_v8.5.9) + +### Patches + +- fix: esm, cjs, and amd folders should all be published correctly. ([PR #27736](https://github.com/microsoft/fluentui/pull/27736) by tristan.watanabe@gmail.com) +- Bump @fluentui/set-version to v8.2.8 ([PR #27736](https://github.com/microsoft/fluentui/pull/27736) by beachball) + +## [8.5.8](https://github.com/microsoft/fluentui/tree/@fluentui/date-time-utilities_v8.5.8) + +Mon, 01 May 2023 07:39:54 GMT +[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/date-time-utilities_v8.5.7..@fluentui/date-time-utilities_v8.5.8) + +### Patches + +- Bump @fluentui/set-version to v8.2.7 ([PR #27724](https://github.com/microsoft/fluentui/pull/27724) by beachball) + +## [8.5.7](https://github.com/microsoft/fluentui/tree/@fluentui/date-time-utilities_v8.5.7) + +Tue, 25 Apr 2023 07:38:31 GMT +[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/date-time-utilities_v8.5.6..@fluentui/date-time-utilities_v8.5.7) + +### Patches + +- chore: Refactored getDateFromTimeSelection variable names. ([PR #26482](https://github.com/microsoft/fluentui/pull/26482) by jamwu@microsoft.com) + ## [8.5.6](https://github.com/microsoft/fluentui/tree/@fluentui/date-time-utilities_v8.5.6) Fri, 17 Mar 2023 08:15:56 GMT diff --git a/packages/date-time-utilities/etc/date-time-utilities.api.md b/packages/date-time-utilities/etc/date-time-utilities.api.md index e747d16316d409..0da93885a90d41 100644 --- a/packages/date-time-utilities/etc/date-time-utilities.api.md +++ b/packages/date-time-utilities/etc/date-time-utilities.api.md @@ -105,7 +105,7 @@ export const formatYear: (date: Date) => string; export const getBoundedDateRange: (dateRange: Date[], minDate?: Date | undefined, maxDate?: Date | undefined) => Date[]; // @public -export const getDateFromTimeSelection: (useHour12: boolean, baseDate: Date, selectedTime: string) => Date; +export const getDateFromTimeSelection: (useHour12: boolean, dateStartAnchor: Date, selectedTime: string) => Date; // @public export function getDatePartHashValue(date: Date): number; diff --git a/packages/date-time-utilities/package.json b/packages/date-time-utilities/package.json index 7153bc3ea9d952..901837fef2447c 100644 --- a/packages/date-time-utilities/package.json +++ b/packages/date-time-utilities/package.json @@ -1,6 +1,6 @@ { "name": "@fluentui/date-time-utilities", - "version": "8.5.6", + "version": "8.5.9", "description": "Date-time utilities", "main": "lib-commonjs/index.js", "module": "lib/index.js", @@ -29,7 +29,7 @@ "@fluentui/scripts-tasks": "*" }, "dependencies": { - "@fluentui/set-version": "^8.2.6", + "@fluentui/set-version": "^8.2.8", "tslib": "^2.1.0" }, "exports": { diff --git a/packages/date-time-utilities/src/timeFormatting/index.ts b/packages/date-time-utilities/src/timeFormatting/index.ts index cb5ba9a67b011d..b2725d2f212547 100644 --- a/packages/date-time-utilities/src/timeFormatting/index.ts +++ b/packages/date-time-utilities/src/timeFormatting/index.ts @@ -4,10 +4,17 @@ * @param showSeconds - Whether to show seconds in the formatted string * @param useHour12 - Whether to use 12-hour time */ -export const formatTimeString = (date: Date, showSeconds?: boolean, useHour12?: boolean): string => - date.toLocaleTimeString([], { +export const formatTimeString = (date: Date, showSeconds?: boolean, useHour12?: boolean): string => { + let localeTimeString = date.toLocaleTimeString([], { hour: 'numeric', minute: '2-digit', second: showSeconds ? '2-digit' : undefined, hour12: useHour12, }); + + if (!useHour12 && localeTimeString.slice(0, 2) === '24') { + localeTimeString = '00' + localeTimeString.slice(2); + } + + return localeTimeString; +}; diff --git a/packages/date-time-utilities/src/timeMath/timeMath.ts b/packages/date-time-utilities/src/timeMath/timeMath.ts index 73ff189d0bee38..8c7add20fea439 100644 --- a/packages/date-time-utilities/src/timeMath/timeMath.ts +++ b/packages/date-time-utilities/src/timeMath/timeMath.ts @@ -40,11 +40,11 @@ export const ceilMinuteToIncrement = (date: Date, increments: number) => { /** * Returns a date object from the selected time. * @param useHour12 - If the time picker uses 12 or 24 hour formatting - * @param baseDate - The baseline date to calculate the offset of the selected time + * @param dateStartAnchor - The baseline date to calculate the offset of the selected time * @param selectedTime - A string representing the user selected time * @returns A new date object offset from the baseDate using the selected time. */ -export const getDateFromTimeSelection = (useHour12: boolean, baseDate: Date, selectedTime: string): Date => { +export const getDateFromTimeSelection = (useHour12: boolean, dateStartAnchor: Date, selectedTime: string): Date => { const [, selectedHours, selectedMinutes, selectedSeconds, selectedAp] = TimeConstants.TimeFormatRegex.exec(selectedTime) || []; @@ -61,17 +61,20 @@ export const getDateFromTimeSelection = (useHour12: boolean, baseDate: Date, sel } let hoursOffset; - if (baseDate.getHours() > hours || (baseDate.getHours() === hours && baseDate.getMinutes() > minutes)) { - hoursOffset = TimeConstants.HoursInOneDay - baseDate.getHours() + hours; + if ( + dateStartAnchor.getHours() > hours || + (dateStartAnchor.getHours() === hours && dateStartAnchor.getMinutes() > minutes) + ) { + hoursOffset = TimeConstants.HoursInOneDay - dateStartAnchor.getHours() + hours; } else { - hoursOffset = Math.abs(baseDate.getHours() - hours); + hoursOffset = Math.abs(dateStartAnchor.getHours() - hours); } const offset = TimeConstants.MillisecondsIn1Sec * TimeConstants.MinutesInOneHour * hoursOffset * TimeConstants.SecondsInOneMinute + seconds * TimeConstants.MillisecondsIn1Sec; - const date = new Date(baseDate.getTime() + offset); + const date = new Date(dateStartAnchor.getTime() + offset); date.setMinutes(minutes); date.setSeconds(seconds); diff --git a/packages/dom-utilities/.npmignore b/packages/dom-utilities/.npmignore index 24337b6c973e82..55143c65bfd341 100644 --- a/packages/dom-utilities/.npmignore +++ b/packages/dom-utilities/.npmignore @@ -32,3 +32,6 @@ tsd.json tslint.json typings visualtests +!lib +!lib-commonjs +!lib-amd diff --git a/packages/dom-utilities/CHANGELOG.json b/packages/dom-utilities/CHANGELOG.json index aff8533c30a74f..f1902f10326ae8 100644 --- a/packages/dom-utilities/CHANGELOG.json +++ b/packages/dom-utilities/CHANGELOG.json @@ -1,6 +1,42 @@ { "name": "@fluentui/dom-utilities", "entries": [ + { + "date": "Tue, 02 May 2023 00:58:14 GMT", + "tag": "@fluentui/dom-utilities_v2.2.8", + "version": "2.2.8", + "comments": { + "patch": [ + { + "author": "tristan.watanabe@gmail.com", + "package": "@fluentui/dom-utilities", + "commit": "c2326dc86037b18a6673697885703b5953ffd0c2", + "comment": "fix: esm, cjs, and amd folders should all be published correctly." + }, + { + "author": "beachball", + "package": "@fluentui/dom-utilities", + "comment": "Bump @fluentui/set-version to v8.2.8", + "commit": "c2326dc86037b18a6673697885703b5953ffd0c2" + } + ] + } + }, + { + "date": "Mon, 01 May 2023 07:39:54 GMT", + "tag": "@fluentui/dom-utilities_v2.2.7", + "version": "2.2.7", + "comments": { + "patch": [ + { + "author": "beachball", + "package": "@fluentui/dom-utilities", + "comment": "Bump @fluentui/set-version to v8.2.7", + "commit": "46f19b90d2088f055f9cd4bfad840f72fe68f0d8" + } + ] + } + }, { "date": "Fri, 17 Mar 2023 08:15:56 GMT", "tag": "@fluentui/dom-utilities_v2.2.6", diff --git a/packages/dom-utilities/CHANGELOG.md b/packages/dom-utilities/CHANGELOG.md index 95c4bbd2088852..0acc5e6c3c01e2 100644 --- a/packages/dom-utilities/CHANGELOG.md +++ b/packages/dom-utilities/CHANGELOG.md @@ -1,9 +1,28 @@ # Change Log - @fluentui/dom-utilities -This log was last generated on Fri, 17 Mar 2023 08:15:56 GMT and should not be manually modified. +This log was last generated on Tue, 02 May 2023 00:58:14 GMT and should not be manually modified. +## [2.2.8](https://github.com/microsoft/fluentui/tree/@fluentui/dom-utilities_v2.2.8) + +Tue, 02 May 2023 00:58:14 GMT +[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/dom-utilities_v2.2.7..@fluentui/dom-utilities_v2.2.8) + +### Patches + +- fix: esm, cjs, and amd folders should all be published correctly. ([PR #27736](https://github.com/microsoft/fluentui/pull/27736) by tristan.watanabe@gmail.com) +- Bump @fluentui/set-version to v8.2.8 ([PR #27736](https://github.com/microsoft/fluentui/pull/27736) by beachball) + +## [2.2.7](https://github.com/microsoft/fluentui/tree/@fluentui/dom-utilities_v2.2.7) + +Mon, 01 May 2023 07:39:54 GMT +[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/dom-utilities_v2.2.6..@fluentui/dom-utilities_v2.2.7) + +### Patches + +- Bump @fluentui/set-version to v8.2.7 ([PR #27724](https://github.com/microsoft/fluentui/pull/27724) by beachball) + ## [2.2.6](https://github.com/microsoft/fluentui/tree/@fluentui/dom-utilities_v2.2.6) Fri, 17 Mar 2023 08:15:56 GMT diff --git a/packages/dom-utilities/package.json b/packages/dom-utilities/package.json index 97cc4711fb202c..4fbeb55a765eb4 100644 --- a/packages/dom-utilities/package.json +++ b/packages/dom-utilities/package.json @@ -1,6 +1,6 @@ { "name": "@fluentui/dom-utilities", - "version": "2.2.6", + "version": "2.2.8", "description": "DOM utilities for use within Fluent web components", "main": "lib-commonjs/index.js", "module": "lib/index.js", @@ -29,7 +29,7 @@ "@fluentui/scripts-tasks": "*" }, "dependencies": { - "@fluentui/set-version": "^8.2.6", + "@fluentui/set-version": "^8.2.8", "tslib": "^2.1.0" }, "exports": { diff --git a/packages/eslint-plugin/CHANGELOG.json b/packages/eslint-plugin/CHANGELOG.json index 810858f6f85c4d..09e7f1e12829e9 100644 --- a/packages/eslint-plugin/CHANGELOG.json +++ b/packages/eslint-plugin/CHANGELOG.json @@ -1,6 +1,21 @@ { "name": "@fluentui/eslint-plugin", "entries": [ + { + "date": "Mon, 01 May 2023 07:39:54 GMT", + "tag": "@fluentui/eslint-plugin_v1.16.0", + "version": "1.16.0", + "comments": { + "minor": [ + { + "author": "olfedias@microsoft.com", + "package": "@fluentui/eslint-plugin", + "commit": "e0e8de0dadce1a0adcd77acb96028d562773b53d", + "comment": "feat: enable @griffel/hook-naming rule" + } + ] + } + }, { "date": "Mon, 17 Apr 2023 07:40:24 GMT", "tag": "@fluentui/eslint-plugin_v1.15.0", diff --git a/packages/eslint-plugin/CHANGELOG.md b/packages/eslint-plugin/CHANGELOG.md index a95ba5875fc2d9..a1e551569f9a5a 100644 --- a/packages/eslint-plugin/CHANGELOG.md +++ b/packages/eslint-plugin/CHANGELOG.md @@ -1,9 +1,18 @@ # Change Log - @fluentui/eslint-plugin -This log was last generated on Mon, 17 Apr 2023 07:40:24 GMT and should not be manually modified. +This log was last generated on Mon, 01 May 2023 07:39:54 GMT and should not be manually modified. +## [1.16.0](https://github.com/microsoft/fluentui/tree/@fluentui/eslint-plugin_v1.16.0) + +Mon, 01 May 2023 07:39:54 GMT +[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/eslint-plugin_v1.15.0..@fluentui/eslint-plugin_v1.16.0) + +### Minor changes + +- feat: enable @griffel/hook-naming rule ([PR #27687](https://github.com/microsoft/fluentui/pull/27687) by olfedias@microsoft.com) + ## [1.15.0](https://github.com/microsoft/fluentui/tree/@fluentui/eslint-plugin_v1.15.0) Mon, 17 Apr 2023 07:40:24 GMT diff --git a/packages/eslint-plugin/package.json b/packages/eslint-plugin/package.json index 333859b9a1e342..fe1b117742c42b 100644 --- a/packages/eslint-plugin/package.json +++ b/packages/eslint-plugin/package.json @@ -1,6 +1,6 @@ { "name": "@fluentui/eslint-plugin", - "version": "1.15.0", + "version": "1.16.0", "description": "ESLint configuration and custom rules for Fluent UI", "main": "src/index.js", "repository": { @@ -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 e3a86533ddc77c..a65c56b48539b3 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/example-data/package.json b/packages/example-data/package.json index 21c535e2aae81d..c6bae5aaa05b08 100644 --- a/packages/example-data/package.json +++ b/packages/example-data/package.json @@ -1,6 +1,6 @@ { "name": "@fluentui/example-data", - "version": "8.4.7", + "version": "8.4.8", "description": "Data generators for Fluent UI React examples.", "main": "lib-commonjs/index.js", "module": "lib/index.js", diff --git a/packages/fluent2-theme/CHANGELOG.json b/packages/fluent2-theme/CHANGELOG.json index ff16437848e3f1..44ed7484b0e732 100644 --- a/packages/fluent2-theme/CHANGELOG.json +++ b/packages/fluent2-theme/CHANGELOG.json @@ -1,6 +1,93 @@ { "name": "@fluentui/fluent2-theme", "entries": [ + { + "date": "Tue, 02 May 2023 00:58:19 GMT", + "tag": "@fluentui/fluent2-theme_v8.107.5", + "version": "8.107.5", + "comments": { + "patch": [ + { + "author": "beachball", + "package": "@fluentui/fluent2-theme", + "comment": "Bump @fluentui/react to v8.109.0", + "commit": "c2326dc86037b18a6673697885703b5953ffd0c2" + }, + { + "author": "beachball", + "package": "@fluentui/fluent2-theme", + "comment": "Bump @fluentui/set-version to v8.2.8", + "commit": "c2326dc86037b18a6673697885703b5953ffd0c2" + } + ] + } + }, + { + "date": "Mon, 01 May 2023 07:39:54 GMT", + "tag": "@fluentui/fluent2-theme_v8.107.4", + "version": "8.107.4", + "comments": { + "patch": [ + { + "author": "beachball", + "package": "@fluentui/fluent2-theme", + "comment": "Bump @fluentui/react to v8.108.3", + "commit": "46f19b90d2088f055f9cd4bfad840f72fe68f0d8" + }, + { + "author": "beachball", + "package": "@fluentui/fluent2-theme", + "comment": "Bump @fluentui/set-version to v8.2.7", + "commit": "46f19b90d2088f055f9cd4bfad840f72fe68f0d8" + } + ] + } + }, + { + "date": "Tue, 25 Apr 2023 07:38:32 GMT", + "tag": "@fluentui/fluent2-theme_v8.107.3", + "version": "8.107.3", + "comments": { + "patch": [ + { + "author": "beachball", + "package": "@fluentui/fluent2-theme", + "comment": "Bump @fluentui/react to v8.108.2", + "commit": "2d93a25e46b76bb473f1deaea3180df5ef3c53ec" + } + ] + } + }, + { + "date": "Fri, 21 Apr 2023 07:49:09 GMT", + "tag": "@fluentui/fluent2-theme_v8.107.2", + "version": "8.107.2", + "comments": { + "patch": [ + { + "author": "beachball", + "package": "@fluentui/fluent2-theme", + "comment": "Bump @fluentui/react to v8.108.1", + "commit": "ab5e8979917780ec8cf6b3b08b3696fc1b7a83f4" + } + ] + } + }, + { + "date": "Thu, 20 Apr 2023 07:47:57 GMT", + "tag": "@fluentui/fluent2-theme_v8.107.1", + "version": "8.107.1", + "comments": { + "patch": [ + { + "author": "beachball", + "package": "@fluentui/fluent2-theme", + "comment": "Bump @fluentui/react to v8.108.0", + "commit": "f7d88ee6fb582989efc057880ddfe60228649189" + } + ] + } + }, { "date": "Mon, 17 Apr 2023 07:40:25 GMT", "tag": "@fluentui/fluent2-theme_v8.107.0", diff --git a/packages/fluent2-theme/CHANGELOG.md b/packages/fluent2-theme/CHANGELOG.md index 8820ac0bfe77fc..7c3e8a17210d00 100644 --- a/packages/fluent2-theme/CHANGELOG.md +++ b/packages/fluent2-theme/CHANGELOG.md @@ -1,9 +1,56 @@ # Change Log - @fluentui/fluent2-theme -This log was last generated on Mon, 17 Apr 2023 07:40:25 GMT and should not be manually modified. +This log was last generated on Tue, 02 May 2023 00:58:19 GMT and should not be manually modified. +## [8.107.5](https://github.com/microsoft/fluentui/tree/@fluentui/fluent2-theme_v8.107.5) + +Tue, 02 May 2023 00:58:19 GMT +[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/fluent2-theme_v8.107.4..@fluentui/fluent2-theme_v8.107.5) + +### Patches + +- Bump @fluentui/react to v8.109.0 ([PR #27736](https://github.com/microsoft/fluentui/pull/27736) by beachball) +- Bump @fluentui/set-version to v8.2.8 ([PR #27736](https://github.com/microsoft/fluentui/pull/27736) by beachball) + +## [8.107.4](https://github.com/microsoft/fluentui/tree/@fluentui/fluent2-theme_v8.107.4) + +Mon, 01 May 2023 07:39:54 GMT +[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/fluent2-theme_v8.107.3..@fluentui/fluent2-theme_v8.107.4) + +### Patches + +- Bump @fluentui/react to v8.108.3 ([PR #27724](https://github.com/microsoft/fluentui/pull/27724) by beachball) +- Bump @fluentui/set-version to v8.2.7 ([PR #27724](https://github.com/microsoft/fluentui/pull/27724) by beachball) + +## [8.107.3](https://github.com/microsoft/fluentui/tree/@fluentui/fluent2-theme_v8.107.3) + +Tue, 25 Apr 2023 07:38:32 GMT +[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/fluent2-theme_v8.107.2..@fluentui/fluent2-theme_v8.107.3) + +### Patches + +- Bump @fluentui/react to v8.108.2 ([PR #26482](https://github.com/microsoft/fluentui/pull/26482) by beachball) + +## [8.107.2](https://github.com/microsoft/fluentui/tree/@fluentui/fluent2-theme_v8.107.2) + +Fri, 21 Apr 2023 07:49:09 GMT +[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/fluent2-theme_v8.107.1..@fluentui/fluent2-theme_v8.107.2) + +### Patches + +- Bump @fluentui/react to v8.108.1 ([PR #27586](https://github.com/microsoft/fluentui/pull/27586) by beachball) + +## [8.107.1](https://github.com/microsoft/fluentui/tree/@fluentui/fluent2-theme_v8.107.1) + +Thu, 20 Apr 2023 07:47:57 GMT +[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/fluent2-theme_v8.107.0..@fluentui/fluent2-theme_v8.107.1) + +### Patches + +- Bump @fluentui/react to v8.108.0 ([PR #27637](https://github.com/microsoft/fluentui/pull/27637) by beachball) + ## [8.107.0](https://github.com/microsoft/fluentui/tree/@fluentui/fluent2-theme_v8.107.0) Mon, 17 Apr 2023 07:40:25 GMT diff --git a/packages/fluent2-theme/package.json b/packages/fluent2-theme/package.json index fe93046cea4871..db3cf6a2a6c8df 100644 --- a/packages/fluent2-theme/package.json +++ b/packages/fluent2-theme/package.json @@ -1,6 +1,6 @@ { "name": "@fluentui/fluent2-theme", - "version": "8.107.0", + "version": "8.107.5", "description": "A Fluent2 theme for Fluent UI React 8.x", "main": "lib-commonjs/index.js", "module": "lib/index.js", @@ -28,8 +28,8 @@ "@fluentui/scripts-webpack": "*" }, "dependencies": { - "@fluentui/react": "^8.107.6", - "@fluentui/set-version": "^8.2.6", + "@fluentui/react": "^8.109.0", + "@fluentui/set-version": "^8.2.8", "tslib": "^2.1.0" } } diff --git a/packages/fluentui/e2e/tsconfig.json b/packages/fluentui/e2e/tsconfig.json index a343a32b4060d2..62bb069602de13 100644 --- a/packages/fluentui/e2e/tsconfig.json +++ b/packages/fluentui/e2e/tsconfig.json @@ -3,9 +3,10 @@ "compilerOptions": { "allowSyntheticDefaultImports": true, "isolatedModules": false, + "noEmit": true, + "emitDeclarationOnly": false, "module": "esnext", - "types": ["node", "webpack-env", "cypress", "cypress-real-events"], - "skipLibCheck": true + "types": ["node", "webpack-env", "cypress", "cypress-real-events"] }, "include": ["."] } diff --git a/packages/fluentui/perf/tsconfig.json b/packages/fluentui/perf/tsconfig.json index b6b2b56975a4d6..cbbf13b831240c 100644 --- a/packages/fluentui/perf/tsconfig.json +++ b/packages/fluentui/perf/tsconfig.json @@ -2,6 +2,7 @@ "extends": "../../../tsconfig.base.v0.json", "compilerOptions": { "noEmit": true, + "emitDeclarationOnly": false, "module": "esnext", "types": ["node", "webpack-env"] }, diff --git a/packages/fluentui/projects-test/tsconfig.json b/packages/fluentui/projects-test/tsconfig.json index 36a27e87aad4ad..5ada62d3057c33 100644 --- a/packages/fluentui/projects-test/tsconfig.json +++ b/packages/fluentui/projects-test/tsconfig.json @@ -4,9 +4,8 @@ "allowSyntheticDefaultImports": true, "module": "esnext", "types": ["node"], - "skipLibCheck": true, "outDir": "dist/dts", - "noEmit": true, + "emitDeclarationOnly": false, "composite": true }, "include": ["src"], diff --git a/packages/fluentui/react-northstar/jest.config.js b/packages/fluentui/react-northstar/jest.config.js index 627d34cdebc3ad..58083ac69d28b5 100644 --- a/packages/fluentui/react-northstar/jest.config.js +++ b/packages/fluentui/react-northstar/jest.config.js @@ -1,13 +1,25 @@ +const path = require('path'); +const fs = require('fs'); +const { workspaceRoot } = require('@nrwl/devkit'); +const { pathsToModuleNameMapper } = require('ts-jest'); const { createV0Config: commonConfig } = require('@fluentui/scripts-jest'); const config = commonConfig({ - name: 'react', + displayName: 'react-northstar', moduleNameMapper: { // Legacy aliases, they should not be used in new tests - '^src/(.*)$': `/src/$1`, - 'test/(.*)$': `/test/$1`, + ...getAliases(), }, }); config.setupFilesAfterEnv = [...config.setupFilesAfterEnv, './jest-setup.js']; module.exports = config; + +function getAliases() { + const tsConfig = JSON.parse(fs.readFileSync(path.join(__dirname, 'tsconfig.spec.json'))); + const tsPathAliases = pathsToModuleNameMapper(tsConfig.compilerOptions.paths, { + prefix: `/${path.relative(__dirname, workspaceRoot)}/`, + }); + + return tsPathAliases; +} diff --git a/packages/fluentui/react-northstar/test/specs/commonTests/extraConformanceTests.tsx b/packages/fluentui/react-northstar/test/specs/commonTests/extraConformanceTests.tsx index e4a72f5930ff4e..d8ce93d18f195b 100644 --- a/packages/fluentui/react-northstar/test/specs/commonTests/extraConformanceTests.tsx +++ b/packages/fluentui/react-northstar/test/specs/commonTests/extraConformanceTests.tsx @@ -1,6 +1,6 @@ import * as _ from 'lodash'; import * as path from 'path'; -import { TestObject } from '@fluentui/react-conformance'; +import type { TestObject } from '@fluentui/react-conformance'; import * as doctrine from 'doctrine'; diff --git a/packages/fluentui/react-northstar/test/specs/commonTests/isConformant.tsx b/packages/fluentui/react-northstar/test/specs/commonTests/isConformant.tsx index 01f829bea9ae2d..0966bd2232c75f 100644 --- a/packages/fluentui/react-northstar/test/specs/commonTests/isConformant.tsx +++ b/packages/fluentui/react-northstar/test/specs/commonTests/isConformant.tsx @@ -22,7 +22,7 @@ import * as FluentUI from 'src/index'; import { getEventTargetComponent, EVENT_TARGET_ATTRIBUTE } from './eventTarget'; import { extraConformanceTests } from './extraConformanceTests'; -export interface Conformant +interface Conformant extends Pick, 'disabledTests' | 'testOptions' | 'getTargetElement'> { /** Path to the test file. */ testPath: string; @@ -75,6 +75,7 @@ export function isConformant( } = options; const defaultConfig: IsConformantOptions = { + tsConfig: { configName: 'tsconfig.spec.json' }, renderOptions: { wrapper: EmptyThemeProvider }, componentPath: testPath .replace(/test[/\\]specs/, 'src') diff --git a/packages/fluentui/react-northstar/test/specs/components/Carousel/Carousel-test.tsx b/packages/fluentui/react-northstar/test/specs/components/Carousel/Carousel-test.tsx index 152ae0917ddadf..6804f49ffeffec 100644 --- a/packages/fluentui/react-northstar/test/specs/components/Carousel/Carousel-test.tsx +++ b/packages/fluentui/react-northstar/test/specs/components/Carousel/Carousel-test.tsx @@ -60,8 +60,6 @@ const getNavigationNavigationItemAtIndexWrapper = (wrapper: ReactWrapper, index: findIntrinsicElement(wrapper, `.${carouselNavigationItemClassName}`).at(index); const getButtonWrapper = (wrapper: ReactWrapper): CommonWrapper => findIntrinsicElement(wrapper, `#${buttonName}`); -jest.useFakeTimers(); - describe('Carousel', () => { isConformant(Carousel, { testPath: __filename, @@ -244,6 +242,8 @@ describe('Carousel', () => { items: items.map(item => ({ key: item.key, icon: { name: 'icon-circle' } })), }; + jest.useFakeTimers(); + afterEach(() => { jest.runAllTimers(); }); diff --git a/packages/fluentui/react-northstar/test/specs/components/Dropdown/Dropdown-test.tsx b/packages/fluentui/react-northstar/test/specs/components/Dropdown/Dropdown-test.tsx index acc8fd69161100..e8921f5f42e158 100644 --- a/packages/fluentui/react-northstar/test/specs/components/Dropdown/Dropdown-test.tsx +++ b/packages/fluentui/react-northstar/test/specs/components/Dropdown/Dropdown-test.tsx @@ -12,7 +12,6 @@ import { ShorthandValue } from 'src/types'; import { List } from 'src/components/List/List'; jest.dontMock('@fluentui/keyboard-key'); -jest.useFakeTimers(); describe('Dropdown', () => { isConformant(Dropdown, { @@ -327,6 +326,7 @@ describe('Dropdown', () => { }); describe('highlightedIndex', () => { + jest.useFakeTimers(); afterEach(() => { act(() => { jest.runAllTimers(); @@ -1292,6 +1292,7 @@ describe('Dropdown', () => { }); describe('getA11ySelectionMessage', () => { + jest.useFakeTimers(); afterEach(() => { jest.runAllTimers(); }); diff --git a/packages/fluentui/react-northstar/tsconfig.json b/packages/fluentui/react-northstar/tsconfig.json index 2859e3b14d8e83..f22addcb1f6e42 100644 --- a/packages/fluentui/react-northstar/tsconfig.json +++ b/packages/fluentui/react-northstar/tsconfig.json @@ -3,13 +3,10 @@ "compilerOptions": { "composite": true, "outDir": "dist/dts", - "skipLibCheck": true, "types": ["node", "jest", "@testing-library/jest-dom"], "paths": { - "docs/*": ["packages/fluentui/docs/*"], "src/*": ["packages/fluentui/react-northstar/src/*"], - "test/*": ["packages/fluentui/react-northstar/test/*"], - "@fluentui/a11y-testing": ["packages/a11y-testing/src/index"] + "test/*": ["packages/fluentui/react-northstar/test/*"] } }, "include": ["src", "test"], diff --git a/packages/fluentui/react-northstar/tsconfig.spec.json b/packages/fluentui/react-northstar/tsconfig.spec.json new file mode 100644 index 00000000000000..487c22c774b4d3 --- /dev/null +++ b/packages/fluentui/react-northstar/tsconfig.spec.json @@ -0,0 +1,14 @@ +{ + "extends": "./tsconfig.json", + "compilerOptions": { + "noEmit": true, + "emitDeclarationOnly": false, + "composite": false, + "types": ["node", "jest", "@testing-library/jest-dom"], + "paths": { + "src/*": ["packages/fluentui/react-northstar/src/*"], + "test/*": ["packages/fluentui/react-northstar/test/*"] + } + }, + "include": ["test"] +} diff --git a/packages/font-icons-mdl2/.npmignore b/packages/font-icons-mdl2/.npmignore index 24337b6c973e82..55143c65bfd341 100644 --- a/packages/font-icons-mdl2/.npmignore +++ b/packages/font-icons-mdl2/.npmignore @@ -32,3 +32,6 @@ tsd.json tslint.json typings visualtests +!lib +!lib-commonjs +!lib-amd diff --git a/packages/font-icons-mdl2/CHANGELOG.json b/packages/font-icons-mdl2/CHANGELOG.json index c066e80378d50d..5d5b4300ce8777 100644 --- a/packages/font-icons-mdl2/CHANGELOG.json +++ b/packages/font-icons-mdl2/CHANGELOG.json @@ -1,6 +1,66 @@ { "name": "@fluentui/font-icons-mdl2", "entries": [ + { + "date": "Tue, 02 May 2023 00:58:14 GMT", + "tag": "@fluentui/font-icons-mdl2_v8.5.15", + "version": "8.5.15", + "comments": { + "patch": [ + { + "author": "tristan.watanabe@gmail.com", + "package": "@fluentui/font-icons-mdl2", + "commit": "c2326dc86037b18a6673697885703b5953ffd0c2", + "comment": "fix: esm, cjs, and amd folders should all be published correctly." + }, + { + "author": "beachball", + "package": "@fluentui/font-icons-mdl2", + "comment": "Bump @fluentui/set-version to v8.2.8", + "commit": "c2326dc86037b18a6673697885703b5953ffd0c2" + }, + { + "author": "beachball", + "package": "@fluentui/font-icons-mdl2", + "comment": "Bump @fluentui/style-utilities to v8.9.8", + "commit": "c2326dc86037b18a6673697885703b5953ffd0c2" + }, + { + "author": "beachball", + "package": "@fluentui/font-icons-mdl2", + "comment": "Bump @fluentui/utilities to v8.13.11", + "commit": "c2326dc86037b18a6673697885703b5953ffd0c2" + } + ] + } + }, + { + "date": "Mon, 01 May 2023 07:39:54 GMT", + "tag": "@fluentui/font-icons-mdl2_v8.5.14", + "version": "8.5.14", + "comments": { + "patch": [ + { + "author": "beachball", + "package": "@fluentui/font-icons-mdl2", + "comment": "Bump @fluentui/set-version to v8.2.7", + "commit": "46f19b90d2088f055f9cd4bfad840f72fe68f0d8" + }, + { + "author": "beachball", + "package": "@fluentui/font-icons-mdl2", + "comment": "Bump @fluentui/style-utilities to v8.9.7", + "commit": "46f19b90d2088f055f9cd4bfad840f72fe68f0d8" + }, + { + "author": "beachball", + "package": "@fluentui/font-icons-mdl2", + "comment": "Bump @fluentui/utilities to v8.13.10", + "commit": "46f19b90d2088f055f9cd4bfad840f72fe68f0d8" + } + ] + } + }, { "date": "Fri, 17 Mar 2023 08:15:56 GMT", "tag": "@fluentui/font-icons-mdl2_v8.5.13", diff --git a/packages/font-icons-mdl2/CHANGELOG.md b/packages/font-icons-mdl2/CHANGELOG.md index f470973294ad87..452e7c5f9b9025 100644 --- a/packages/font-icons-mdl2/CHANGELOG.md +++ b/packages/font-icons-mdl2/CHANGELOG.md @@ -1,9 +1,32 @@ # Change Log - @fluentui/font-icons-mdl2 -This log was last generated on Fri, 17 Mar 2023 08:15:56 GMT and should not be manually modified. +This log was last generated on Tue, 02 May 2023 00:58:14 GMT and should not be manually modified. +## [8.5.15](https://github.com/microsoft/fluentui/tree/@fluentui/font-icons-mdl2_v8.5.15) + +Tue, 02 May 2023 00:58:14 GMT +[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/font-icons-mdl2_v8.5.14..@fluentui/font-icons-mdl2_v8.5.15) + +### Patches + +- fix: esm, cjs, and amd folders should all be published correctly. ([PR #27736](https://github.com/microsoft/fluentui/pull/27736) by tristan.watanabe@gmail.com) +- Bump @fluentui/set-version to v8.2.8 ([PR #27736](https://github.com/microsoft/fluentui/pull/27736) by beachball) +- Bump @fluentui/style-utilities to v8.9.8 ([PR #27736](https://github.com/microsoft/fluentui/pull/27736) by beachball) +- Bump @fluentui/utilities to v8.13.11 ([PR #27736](https://github.com/microsoft/fluentui/pull/27736) by beachball) + +## [8.5.14](https://github.com/microsoft/fluentui/tree/@fluentui/font-icons-mdl2_v8.5.14) + +Mon, 01 May 2023 07:39:54 GMT +[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/font-icons-mdl2_v8.5.13..@fluentui/font-icons-mdl2_v8.5.14) + +### Patches + +- Bump @fluentui/set-version to v8.2.7 ([PR #27724](https://github.com/microsoft/fluentui/pull/27724) by beachball) +- Bump @fluentui/style-utilities to v8.9.7 ([PR #27724](https://github.com/microsoft/fluentui/pull/27724) by beachball) +- Bump @fluentui/utilities to v8.13.10 ([PR #27724](https://github.com/microsoft/fluentui/pull/27724) by beachball) + ## [8.5.13](https://github.com/microsoft/fluentui/tree/@fluentui/font-icons-mdl2_v8.5.13) Fri, 17 Mar 2023 08:15:56 GMT diff --git a/packages/font-icons-mdl2/package.json b/packages/font-icons-mdl2/package.json index 3862f6db97bd5c..088a3541fedf91 100644 --- a/packages/font-icons-mdl2/package.json +++ b/packages/font-icons-mdl2/package.json @@ -1,6 +1,6 @@ { "name": "@fluentui/font-icons-mdl2", - "version": "8.5.13", + "version": "8.5.15", "description": "Fluent UI React icon set.", "main": "lib-commonjs/index.js", "module": "lib/index.js", @@ -27,9 +27,9 @@ "@fluentui/scripts-tasks": "*" }, "dependencies": { - "@fluentui/set-version": "^8.2.6", - "@fluentui/style-utilities": "^8.9.6", - "@fluentui/utilities": "^8.13.9", + "@fluentui/set-version": "^8.2.8", + "@fluentui/style-utilities": "^8.9.8", + "@fluentui/utilities": "^8.13.11", "tslib": "^2.1.0" }, "exports": { diff --git a/packages/foundation-legacy/.npmignore b/packages/foundation-legacy/.npmignore index 24337b6c973e82..55143c65bfd341 100644 --- a/packages/foundation-legacy/.npmignore +++ b/packages/foundation-legacy/.npmignore @@ -32,3 +32,6 @@ tsd.json tslint.json typings visualtests +!lib +!lib-commonjs +!lib-amd diff --git a/packages/foundation-legacy/CHANGELOG.json b/packages/foundation-legacy/CHANGELOG.json index b42b6da9d3d5ef..74297649f724de 100644 --- a/packages/foundation-legacy/CHANGELOG.json +++ b/packages/foundation-legacy/CHANGELOG.json @@ -1,6 +1,90 @@ { "name": "@fluentui/foundation-legacy", "entries": [ + { + "date": "Tue, 02 May 2023 00:58:15 GMT", + "tag": "@fluentui/foundation-legacy_v8.2.35", + "version": "8.2.35", + "comments": { + "patch": [ + { + "author": "tristan.watanabe@gmail.com", + "package": "@fluentui/foundation-legacy", + "commit": "c2326dc86037b18a6673697885703b5953ffd0c2", + "comment": "fix: esm, cjs, and amd folders should all be published correctly." + }, + { + "author": "beachball", + "package": "@fluentui/foundation-legacy", + "comment": "Bump @fluentui/merge-styles to v8.5.9", + "commit": "c2326dc86037b18a6673697885703b5953ffd0c2" + }, + { + "author": "beachball", + "package": "@fluentui/foundation-legacy", + "comment": "Bump @fluentui/set-version to v8.2.8", + "commit": "c2326dc86037b18a6673697885703b5953ffd0c2" + }, + { + "author": "beachball", + "package": "@fluentui/foundation-legacy", + "comment": "Bump @fluentui/style-utilities to v8.9.8", + "commit": "c2326dc86037b18a6673697885703b5953ffd0c2" + }, + { + "author": "beachball", + "package": "@fluentui/foundation-legacy", + "comment": "Bump @fluentui/utilities to v8.13.11", + "commit": "c2326dc86037b18a6673697885703b5953ffd0c2" + }, + { + "author": "beachball", + "package": "@fluentui/foundation-legacy", + "comment": "Bump @fluentui/jest-serializer-merge-styles to v8.0.26", + "commit": "c2326dc86037b18a6673697885703b5953ffd0c2" + } + ] + } + }, + { + "date": "Mon, 01 May 2023 07:39:54 GMT", + "tag": "@fluentui/foundation-legacy_v8.2.34", + "version": "8.2.34", + "comments": { + "patch": [ + { + "author": "beachball", + "package": "@fluentui/foundation-legacy", + "comment": "Bump @fluentui/merge-styles to v8.5.8", + "commit": "46f19b90d2088f055f9cd4bfad840f72fe68f0d8" + }, + { + "author": "beachball", + "package": "@fluentui/foundation-legacy", + "comment": "Bump @fluentui/set-version to v8.2.7", + "commit": "46f19b90d2088f055f9cd4bfad840f72fe68f0d8" + }, + { + "author": "beachball", + "package": "@fluentui/foundation-legacy", + "comment": "Bump @fluentui/style-utilities to v8.9.7", + "commit": "46f19b90d2088f055f9cd4bfad840f72fe68f0d8" + }, + { + "author": "beachball", + "package": "@fluentui/foundation-legacy", + "comment": "Bump @fluentui/utilities to v8.13.10", + "commit": "46f19b90d2088f055f9cd4bfad840f72fe68f0d8" + }, + { + "author": "beachball", + "package": "@fluentui/foundation-legacy", + "comment": "Bump @fluentui/jest-serializer-merge-styles to v8.0.25", + "commit": "46f19b90d2088f055f9cd4bfad840f72fe68f0d8" + } + ] + } + }, { "date": "Fri, 17 Mar 2023 08:15:56 GMT", "tag": "@fluentui/foundation-legacy_v8.2.33", diff --git a/packages/foundation-legacy/CHANGELOG.md b/packages/foundation-legacy/CHANGELOG.md index a0c2f6510f0848..feee617564cae4 100644 --- a/packages/foundation-legacy/CHANGELOG.md +++ b/packages/foundation-legacy/CHANGELOG.md @@ -1,9 +1,36 @@ # Change Log - @fluentui/foundation-legacy -This log was last generated on Fri, 17 Mar 2023 08:15:56 GMT and should not be manually modified. +This log was last generated on Tue, 02 May 2023 00:58:15 GMT and should not be manually modified. +## [8.2.35](https://github.com/microsoft/fluentui/tree/@fluentui/foundation-legacy_v8.2.35) + +Tue, 02 May 2023 00:58:15 GMT +[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/foundation-legacy_v8.2.34..@fluentui/foundation-legacy_v8.2.35) + +### Patches + +- fix: esm, cjs, and amd folders should all be published correctly. ([PR #27736](https://github.com/microsoft/fluentui/pull/27736) by tristan.watanabe@gmail.com) +- Bump @fluentui/merge-styles to v8.5.9 ([PR #27736](https://github.com/microsoft/fluentui/pull/27736) by beachball) +- Bump @fluentui/set-version to v8.2.8 ([PR #27736](https://github.com/microsoft/fluentui/pull/27736) by beachball) +- Bump @fluentui/style-utilities to v8.9.8 ([PR #27736](https://github.com/microsoft/fluentui/pull/27736) by beachball) +- Bump @fluentui/utilities to v8.13.11 ([PR #27736](https://github.com/microsoft/fluentui/pull/27736) by beachball) +- Bump @fluentui/jest-serializer-merge-styles to v8.0.26 ([PR #27736](https://github.com/microsoft/fluentui/pull/27736) by beachball) + +## [8.2.34](https://github.com/microsoft/fluentui/tree/@fluentui/foundation-legacy_v8.2.34) + +Mon, 01 May 2023 07:39:54 GMT +[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/foundation-legacy_v8.2.33..@fluentui/foundation-legacy_v8.2.34) + +### Patches + +- Bump @fluentui/merge-styles to v8.5.8 ([PR #27724](https://github.com/microsoft/fluentui/pull/27724) by beachball) +- Bump @fluentui/set-version to v8.2.7 ([PR #27724](https://github.com/microsoft/fluentui/pull/27724) by beachball) +- Bump @fluentui/style-utilities to v8.9.7 ([PR #27724](https://github.com/microsoft/fluentui/pull/27724) by beachball) +- Bump @fluentui/utilities to v8.13.10 ([PR #27724](https://github.com/microsoft/fluentui/pull/27724) by beachball) +- Bump @fluentui/jest-serializer-merge-styles to v8.0.25 ([PR #27724](https://github.com/microsoft/fluentui/pull/27724) by beachball) + ## [8.2.33](https://github.com/microsoft/fluentui/tree/@fluentui/foundation-legacy_v8.2.33) Fri, 17 Mar 2023 08:15:56 GMT diff --git a/packages/foundation-legacy/package.json b/packages/foundation-legacy/package.json index f32ac0c971ff2e..4c580e7dc8b3bc 100644 --- a/packages/foundation-legacy/package.json +++ b/packages/foundation-legacy/package.json @@ -1,6 +1,6 @@ { "name": "@fluentui/foundation-legacy", - "version": "8.2.33", + "version": "8.2.35", "description": "Legacy utilities for building Fluent UI React components.", "main": "lib-commonjs/index.js", "module": "lib/index.js", @@ -26,7 +26,7 @@ }, "devDependencies": { "@fluentui/eslint-plugin": "*", - "@fluentui/jest-serializer-merge-styles": "^8.0.24", + "@fluentui/jest-serializer-merge-styles": "^8.0.26", "react-hooks-testing-library": "^0.5.0", "@fluentui/scripts-api-extractor": "*", "@fluentui/scripts-jest": "*", @@ -34,10 +34,10 @@ "@fluentui/scripts-webpack": "*" }, "dependencies": { - "@fluentui/merge-styles": "^8.5.7", - "@fluentui/set-version": "^8.2.6", - "@fluentui/style-utilities": "^8.9.6", - "@fluentui/utilities": "^8.13.9", + "@fluentui/merge-styles": "^8.5.9", + "@fluentui/set-version": "^8.2.8", + "@fluentui/style-utilities": "^8.9.8", + "@fluentui/utilities": "^8.13.11", "tslib": "^2.1.0" }, "peerDependencies": { diff --git a/packages/jest-serializer-merge-styles/CHANGELOG.json b/packages/jest-serializer-merge-styles/CHANGELOG.json index e6931736963e2f..2da92e87aac93e 100644 --- a/packages/jest-serializer-merge-styles/CHANGELOG.json +++ b/packages/jest-serializer-merge-styles/CHANGELOG.json @@ -1,6 +1,36 @@ { "name": "@fluentui/jest-serializer-merge-styles", "entries": [ + { + "date": "Tue, 02 May 2023 00:58:19 GMT", + "tag": "@fluentui/jest-serializer-merge-styles_v8.0.26", + "version": "8.0.26", + "comments": { + "patch": [ + { + "author": "beachball", + "package": "@fluentui/jest-serializer-merge-styles", + "comment": "Bump @fluentui/merge-styles to v8.5.9", + "commit": "c2326dc86037b18a6673697885703b5953ffd0c2" + } + ] + } + }, + { + "date": "Mon, 01 May 2023 07:39:54 GMT", + "tag": "@fluentui/jest-serializer-merge-styles_v8.0.25", + "version": "8.0.25", + "comments": { + "patch": [ + { + "author": "beachball", + "package": "@fluentui/jest-serializer-merge-styles", + "comment": "Bump @fluentui/merge-styles to v8.5.8", + "commit": "46f19b90d2088f055f9cd4bfad840f72fe68f0d8" + } + ] + } + }, { "date": "Fri, 17 Mar 2023 08:15:56 GMT", "tag": "@fluentui/jest-serializer-merge-styles_v8.0.24", diff --git a/packages/jest-serializer-merge-styles/CHANGELOG.md b/packages/jest-serializer-merge-styles/CHANGELOG.md index 9ccec02671857b..daf6691737461f 100644 --- a/packages/jest-serializer-merge-styles/CHANGELOG.md +++ b/packages/jest-serializer-merge-styles/CHANGELOG.md @@ -1,9 +1,27 @@ # Change Log - @fluentui/jest-serializer-merge-styles -This log was last generated on Fri, 17 Mar 2023 08:15:56 GMT and should not be manually modified. +This log was last generated on Tue, 02 May 2023 00:58:19 GMT and should not be manually modified. +## [8.0.26](https://github.com/microsoft/fluentui/tree/@fluentui/jest-serializer-merge-styles_v8.0.26) + +Tue, 02 May 2023 00:58:19 GMT +[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/jest-serializer-merge-styles_v8.0.25..@fluentui/jest-serializer-merge-styles_v8.0.26) + +### Patches + +- Bump @fluentui/merge-styles to v8.5.9 ([PR #27736](https://github.com/microsoft/fluentui/pull/27736) by beachball) + +## [8.0.25](https://github.com/microsoft/fluentui/tree/@fluentui/jest-serializer-merge-styles_v8.0.25) + +Mon, 01 May 2023 07:39:54 GMT +[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/jest-serializer-merge-styles_v8.0.24..@fluentui/jest-serializer-merge-styles_v8.0.25) + +### Patches + +- Bump @fluentui/merge-styles to v8.5.8 ([PR #27724](https://github.com/microsoft/fluentui/pull/27724) by beachball) + ## [8.0.24](https://github.com/microsoft/fluentui/tree/@fluentui/jest-serializer-merge-styles_v8.0.24) Fri, 17 Mar 2023 08:15:56 GMT diff --git a/packages/jest-serializer-merge-styles/package.json b/packages/jest-serializer-merge-styles/package.json index 773daec07d1725..c4dbb9b6a92e6d 100644 --- a/packages/jest-serializer-merge-styles/package.json +++ b/packages/jest-serializer-merge-styles/package.json @@ -1,6 +1,6 @@ { "name": "@fluentui/jest-serializer-merge-styles", - "version": "8.0.24", + "version": "8.0.26", "description": "Jest serializer for merge-styles.", "main": "lib-commonjs/index.js", "typings": "lib-commonjs/index.d.ts", @@ -24,6 +24,6 @@ "@fluentui/scripts-tasks": "*" }, "dependencies": { - "@fluentui/merge-styles": "^8.5.7" + "@fluentui/merge-styles": "^8.5.9" } } diff --git a/packages/keyboard-key/.npmignore b/packages/keyboard-key/.npmignore index 24337b6c973e82..55143c65bfd341 100644 --- a/packages/keyboard-key/.npmignore +++ b/packages/keyboard-key/.npmignore @@ -32,3 +32,6 @@ tsd.json tslint.json typings visualtests +!lib +!lib-commonjs +!lib-amd diff --git a/packages/keyboard-key/CHANGELOG.json b/packages/keyboard-key/CHANGELOG.json index 93270f952ce4e1..94d5889755b58e 100644 --- a/packages/keyboard-key/CHANGELOG.json +++ b/packages/keyboard-key/CHANGELOG.json @@ -1,6 +1,21 @@ { "name": "@fluentui/keyboard-key", "entries": [ + { + "date": "Tue, 02 May 2023 00:58:15 GMT", + "tag": "@fluentui/keyboard-key_v0.4.8", + "version": "0.4.8", + "comments": { + "patch": [ + { + "author": "tristan.watanabe@gmail.com", + "package": "@fluentui/keyboard-key", + "commit": "c2326dc86037b18a6673697885703b5953ffd0c2", + "comment": "fix: esm, cjs, and amd folders should all be published correctly." + } + ] + } + }, { "date": "Wed, 01 Mar 2023 07:45:39 GMT", "tag": "@fluentui/keyboard-key_v0.4.5", diff --git a/packages/keyboard-key/CHANGELOG.md b/packages/keyboard-key/CHANGELOG.md index cbbf6dd8093d43..7ba1119d1b2d8a 100644 --- a/packages/keyboard-key/CHANGELOG.md +++ b/packages/keyboard-key/CHANGELOG.md @@ -1,9 +1,18 @@ # Change Log - @fluentui/keyboard-key -This log was last generated on Thu, 03 Mar 2022 07:24:26 GMT and should not be manually modified. +This log was last generated on Tue, 02 May 2023 00:58:15 GMT and should not be manually modified. +## [0.4.8](https://github.com/microsoft/fluentui/tree/@fluentui/keyboard-key_v0.4.8) + +Tue, 02 May 2023 00:58:15 GMT +[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/keyboard-key_v0.4.5..@fluentui/keyboard-key_v0.4.8) + +### Patches + +- fix: esm, cjs, and amd folders should all be published correctly. ([PR #27736](https://github.com/microsoft/fluentui/pull/27736) by tristan.watanabe@gmail.com) + ## [0.4.0](https://github.com/microsoft/fluentui/tree/@fluentui/keyboard-key_v0.4.0) Thu, 03 Mar 2022 07:24:26 GMT diff --git a/packages/keyboard-key/package.json b/packages/keyboard-key/package.json index 78b3ac16e9d222..5a0b03b53275cf 100644 --- a/packages/keyboard-key/package.json +++ b/packages/keyboard-key/package.json @@ -1,6 +1,6 @@ { "name": "@fluentui/keyboard-key", - "version": "0.4.6", + "version": "0.4.8", "description": "A simple utility for determining the KeyboardEvent.key property from a keyboard event.", "main": "lib-commonjs/index.js", "module": "lib/index.js", diff --git a/packages/merge-styles/.npmignore b/packages/merge-styles/.npmignore index 24337b6c973e82..55143c65bfd341 100644 --- a/packages/merge-styles/.npmignore +++ b/packages/merge-styles/.npmignore @@ -32,3 +32,6 @@ tsd.json tslint.json typings visualtests +!lib +!lib-commonjs +!lib-amd diff --git a/packages/merge-styles/CHANGELOG.json b/packages/merge-styles/CHANGELOG.json index 4154650cc7e7e9..c5b72555a7bbb3 100644 --- a/packages/merge-styles/CHANGELOG.json +++ b/packages/merge-styles/CHANGELOG.json @@ -1,6 +1,42 @@ { "name": "@fluentui/merge-styles", "entries": [ + { + "date": "Tue, 02 May 2023 00:58:15 GMT", + "tag": "@fluentui/merge-styles_v8.5.9", + "version": "8.5.9", + "comments": { + "patch": [ + { + "author": "tristan.watanabe@gmail.com", + "package": "@fluentui/merge-styles", + "commit": "c2326dc86037b18a6673697885703b5953ffd0c2", + "comment": "fix: esm, cjs, and amd folders should all be published correctly." + }, + { + "author": "beachball", + "package": "@fluentui/merge-styles", + "comment": "Bump @fluentui/set-version to v8.2.8", + "commit": "c2326dc86037b18a6673697885703b5953ffd0c2" + } + ] + } + }, + { + "date": "Mon, 01 May 2023 07:39:54 GMT", + "tag": "@fluentui/merge-styles_v8.5.8", + "version": "8.5.8", + "comments": { + "patch": [ + { + "author": "beachball", + "package": "@fluentui/merge-styles", + "comment": "Bump @fluentui/set-version to v8.2.7", + "commit": "46f19b90d2088f055f9cd4bfad840f72fe68f0d8" + } + ] + } + }, { "date": "Fri, 17 Mar 2023 08:15:56 GMT", "tag": "@fluentui/merge-styles_v8.5.7", diff --git a/packages/merge-styles/CHANGELOG.md b/packages/merge-styles/CHANGELOG.md index 930ab1f9bb82d1..650bcbf8b0bc9a 100644 --- a/packages/merge-styles/CHANGELOG.md +++ b/packages/merge-styles/CHANGELOG.md @@ -1,9 +1,28 @@ # Change Log - @fluentui/merge-styles -This log was last generated on Fri, 17 Mar 2023 08:15:56 GMT and should not be manually modified. +This log was last generated on Tue, 02 May 2023 00:58:15 GMT and should not be manually modified. +## [8.5.9](https://github.com/microsoft/fluentui/tree/@fluentui/merge-styles_v8.5.9) + +Tue, 02 May 2023 00:58:15 GMT +[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/merge-styles_v8.5.8..@fluentui/merge-styles_v8.5.9) + +### Patches + +- fix: esm, cjs, and amd folders should all be published correctly. ([PR #27736](https://github.com/microsoft/fluentui/pull/27736) by tristan.watanabe@gmail.com) +- Bump @fluentui/set-version to v8.2.8 ([PR #27736](https://github.com/microsoft/fluentui/pull/27736) by beachball) + +## [8.5.8](https://github.com/microsoft/fluentui/tree/@fluentui/merge-styles_v8.5.8) + +Mon, 01 May 2023 07:39:54 GMT +[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/merge-styles_v8.5.7..@fluentui/merge-styles_v8.5.8) + +### Patches + +- Bump @fluentui/set-version to v8.2.7 ([PR #27724](https://github.com/microsoft/fluentui/pull/27724) by beachball) + ## [8.5.7](https://github.com/microsoft/fluentui/tree/@fluentui/merge-styles_v8.5.7) Fri, 17 Mar 2023 08:15:56 GMT diff --git a/packages/merge-styles/package.json b/packages/merge-styles/package.json index 95ca1068fddf91..fbc2289ff5bbd6 100644 --- a/packages/merge-styles/package.json +++ b/packages/merge-styles/package.json @@ -1,6 +1,6 @@ { "name": "@fluentui/merge-styles", - "version": "8.5.7", + "version": "8.5.9", "description": "Style loading utilities.", "main": "lib-commonjs/index.js", "module": "lib/index.js", @@ -31,7 +31,7 @@ "@fluentui/scripts-webpack": "*" }, "dependencies": { - "@fluentui/set-version": "^8.2.6", + "@fluentui/set-version": "^8.2.8", "tslib": "^2.1.0" }, "exports": { diff --git a/packages/monaco-editor/package.json b/packages/monaco-editor/package.json index 26f38010c24c8b..fd2cc6bc122afb 100644 --- a/packages/monaco-editor/package.json +++ b/packages/monaco-editor/package.json @@ -1,6 +1,6 @@ { "name": "@fluentui/monaco-editor", - "version": "1.3.6", + "version": "1.3.7", "description": "Version of monaco-editor with configuration helpers and transformed CSS files", "module": "./lib/monacoBundle.js", "typings": "./esm/vs/editor/editor.api.d.ts", diff --git a/packages/public-docsite-setup/package.json b/packages/public-docsite-setup/package.json index fd9466174e44f8..b6c60871261885 100644 --- a/packages/public-docsite-setup/package.json +++ b/packages/public-docsite-setup/package.json @@ -1,6 +1,6 @@ { "name": "@fluentui/public-docsite-setup", - "version": "0.3.18", + "version": "0.3.19", "description": "Bootstrap code for the Fluent UI website. Internal use only.", "main": "lib-commonjs/index.js", "module": "lib/index.js", diff --git a/packages/react-cards/CHANGELOG.json b/packages/react-cards/CHANGELOG.json index da9f74574332dc..59991ae4d1addd 100644 --- a/packages/react-cards/CHANGELOG.json +++ b/packages/react-cards/CHANGELOG.json @@ -1,6 +1,117 @@ { "name": "@fluentui/react-cards", "entries": [ + { + "date": "Tue, 02 May 2023 00:58:19 GMT", + "tag": "@fluentui/react-cards_v0.205.81", + "version": "0.205.81", + "comments": { + "patch": [ + { + "author": "beachball", + "package": "@fluentui/react-cards", + "comment": "Bump @fluentui/react to v8.109.0", + "commit": "c2326dc86037b18a6673697885703b5953ffd0c2" + }, + { + "author": "beachball", + "package": "@fluentui/react-cards", + "comment": "Bump @fluentui/foundation-legacy to v8.2.35", + "commit": "c2326dc86037b18a6673697885703b5953ffd0c2" + }, + { + "author": "beachball", + "package": "@fluentui/react-cards", + "comment": "Bump @fluentui/set-version to v8.2.8", + "commit": "c2326dc86037b18a6673697885703b5953ffd0c2" + }, + { + "author": "beachball", + "package": "@fluentui/react-cards", + "comment": "Bump @fluentui/jest-serializer-merge-styles to v8.0.26", + "commit": "c2326dc86037b18a6673697885703b5953ffd0c2" + } + ] + } + }, + { + "date": "Mon, 01 May 2023 07:39:54 GMT", + "tag": "@fluentui/react-cards_v0.205.80", + "version": "0.205.80", + "comments": { + "patch": [ + { + "author": "beachball", + "package": "@fluentui/react-cards", + "comment": "Bump @fluentui/react to v8.108.3", + "commit": "46f19b90d2088f055f9cd4bfad840f72fe68f0d8" + }, + { + "author": "beachball", + "package": "@fluentui/react-cards", + "comment": "Bump @fluentui/foundation-legacy to v8.2.34", + "commit": "46f19b90d2088f055f9cd4bfad840f72fe68f0d8" + }, + { + "author": "beachball", + "package": "@fluentui/react-cards", + "comment": "Bump @fluentui/set-version to v8.2.7", + "commit": "46f19b90d2088f055f9cd4bfad840f72fe68f0d8" + }, + { + "author": "beachball", + "package": "@fluentui/react-cards", + "comment": "Bump @fluentui/jest-serializer-merge-styles to v8.0.25", + "commit": "46f19b90d2088f055f9cd4bfad840f72fe68f0d8" + } + ] + } + }, + { + "date": "Tue, 25 Apr 2023 07:38:32 GMT", + "tag": "@fluentui/react-cards_v0.205.79", + "version": "0.205.79", + "comments": { + "patch": [ + { + "author": "beachball", + "package": "@fluentui/react-cards", + "comment": "Bump @fluentui/react to v8.108.2", + "commit": "2d93a25e46b76bb473f1deaea3180df5ef3c53ec" + } + ] + } + }, + { + "date": "Fri, 21 Apr 2023 07:49:09 GMT", + "tag": "@fluentui/react-cards_v0.205.78", + "version": "0.205.78", + "comments": { + "patch": [ + { + "author": "beachball", + "package": "@fluentui/react-cards", + "comment": "Bump @fluentui/react to v8.108.1", + "commit": "ab5e8979917780ec8cf6b3b08b3696fc1b7a83f4" + } + ] + } + }, + { + "date": "Thu, 20 Apr 2023 07:47:57 GMT", + "tag": "@fluentui/react-cards_v0.205.77", + "version": "0.205.77", + "comments": { + "patch": [ + { + "author": "beachball", + "package": "@fluentui/react-cards", + "comment": "Bump @fluentui/react to v8.108.0", + "commit": "f7d88ee6fb582989efc057880ddfe60228649189" + } + ] + } + }, { "date": "Mon, 17 Apr 2023 07:40:26 GMT", "tag": "@fluentui/react-cards_v0.205.76", diff --git a/packages/react-cards/CHANGELOG.md b/packages/react-cards/CHANGELOG.md index 51c186a0375092..cba2259ae6f3c0 100644 --- a/packages/react-cards/CHANGELOG.md +++ b/packages/react-cards/CHANGELOG.md @@ -1,9 +1,60 @@ # Change Log - @fluentui/react-cards -This log was last generated on Mon, 17 Apr 2023 07:40:26 GMT and should not be manually modified. +This log was last generated on Tue, 02 May 2023 00:58:19 GMT and should not be manually modified. +## [0.205.81](https://github.com/microsoft/fluentui/tree/@fluentui/react-cards_v0.205.81) + +Tue, 02 May 2023 00:58:19 GMT +[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-cards_v0.205.80..@fluentui/react-cards_v0.205.81) + +### Patches + +- Bump @fluentui/react to v8.109.0 ([PR #27736](https://github.com/microsoft/fluentui/pull/27736) by beachball) +- Bump @fluentui/foundation-legacy to v8.2.35 ([PR #27736](https://github.com/microsoft/fluentui/pull/27736) by beachball) +- Bump @fluentui/set-version to v8.2.8 ([PR #27736](https://github.com/microsoft/fluentui/pull/27736) by beachball) +- Bump @fluentui/jest-serializer-merge-styles to v8.0.26 ([PR #27736](https://github.com/microsoft/fluentui/pull/27736) by beachball) + +## [0.205.80](https://github.com/microsoft/fluentui/tree/@fluentui/react-cards_v0.205.80) + +Mon, 01 May 2023 07:39:54 GMT +[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-cards_v0.205.79..@fluentui/react-cards_v0.205.80) + +### Patches + +- Bump @fluentui/react to v8.108.3 ([PR #27724](https://github.com/microsoft/fluentui/pull/27724) by beachball) +- Bump @fluentui/foundation-legacy to v8.2.34 ([PR #27724](https://github.com/microsoft/fluentui/pull/27724) by beachball) +- Bump @fluentui/set-version to v8.2.7 ([PR #27724](https://github.com/microsoft/fluentui/pull/27724) by beachball) +- Bump @fluentui/jest-serializer-merge-styles to v8.0.25 ([PR #27724](https://github.com/microsoft/fluentui/pull/27724) by beachball) + +## [0.205.79](https://github.com/microsoft/fluentui/tree/@fluentui/react-cards_v0.205.79) + +Tue, 25 Apr 2023 07:38:32 GMT +[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-cards_v0.205.78..@fluentui/react-cards_v0.205.79) + +### Patches + +- Bump @fluentui/react to v8.108.2 ([PR #26482](https://github.com/microsoft/fluentui/pull/26482) by beachball) + +## [0.205.78](https://github.com/microsoft/fluentui/tree/@fluentui/react-cards_v0.205.78) + +Fri, 21 Apr 2023 07:49:09 GMT +[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-cards_v0.205.77..@fluentui/react-cards_v0.205.78) + +### Patches + +- Bump @fluentui/react to v8.108.1 ([PR #27586](https://github.com/microsoft/fluentui/pull/27586) by beachball) + +## [0.205.77](https://github.com/microsoft/fluentui/tree/@fluentui/react-cards_v0.205.77) + +Thu, 20 Apr 2023 07:47:57 GMT +[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-cards_v0.205.76..@fluentui/react-cards_v0.205.77) + +### Patches + +- Bump @fluentui/react to v8.108.0 ([PR #27637](https://github.com/microsoft/fluentui/pull/27637) by beachball) + ## [0.205.76](https://github.com/microsoft/fluentui/tree/@fluentui/react-cards_v0.205.76) Mon, 17 Apr 2023 07:40:26 GMT diff --git a/packages/react-cards/package.json b/packages/react-cards/package.json index efc9ffcf192568..3b03df2350cc68 100644 --- a/packages/react-cards/package.json +++ b/packages/react-cards/package.json @@ -1,6 +1,6 @@ { "name": "@fluentui/react-cards", - "version": "0.205.76", + "version": "0.205.81", "description": "Deprecated experimental Card container components for Fluent UI React.", "main": "lib-commonjs/index.js", "module": "lib/index.js", @@ -27,16 +27,16 @@ }, "devDependencies": { "@fluentui/eslint-plugin": "*", - "@fluentui/jest-serializer-merge-styles": "^8.0.24", + "@fluentui/jest-serializer-merge-styles": "^8.0.26", "@fluentui/scripts-api-extractor": "*", "@fluentui/scripts-jest": "*", "@fluentui/scripts-tasks": "*", "@fluentui/scripts-webpack": "*" }, "dependencies": { - "@fluentui/react": "^8.107.6", - "@fluentui/foundation-legacy": "^8.2.33", - "@fluentui/set-version": "^8.2.6", + "@fluentui/react": "^8.109.0", + "@fluentui/foundation-legacy": "^8.2.35", + "@fluentui/set-version": "^8.2.8", "@microsoft/load-themed-styles": "^1.10.26", "tslib": "^2.1.0" }, diff --git a/packages/react-charting/CHANGELOG.json b/packages/react-charting/CHANGELOG.json index 7018950e1c9301..3b7abf553de1aa 100644 --- a/packages/react-charting/CHANGELOG.json +++ b/packages/react-charting/CHANGELOG.json @@ -1,6 +1,138 @@ { "name": "@fluentui/react-charting", "entries": [ + { + "date": "Tue, 02 May 2023 00:58:19 GMT", + "tag": "@fluentui/react-charting_v5.16.24", + "version": "5.16.24", + "comments": { + "patch": [ + { + "author": "beachball", + "package": "@fluentui/react-charting", + "comment": "Bump @fluentui/react-focus to v8.8.21", + "commit": "c2326dc86037b18a6673697885703b5953ffd0c2" + }, + { + "author": "beachball", + "package": "@fluentui/react-charting", + "comment": "Bump @fluentui/set-version to v8.2.8", + "commit": "c2326dc86037b18a6673697885703b5953ffd0c2" + }, + { + "author": "beachball", + "package": "@fluentui/react-charting", + "comment": "Bump @fluentui/react to v8.109.0", + "commit": "c2326dc86037b18a6673697885703b5953ffd0c2" + }, + { + "author": "beachball", + "package": "@fluentui/react-charting", + "comment": "Bump @fluentui/jest-serializer-merge-styles to v8.0.26", + "commit": "c2326dc86037b18a6673697885703b5953ffd0c2" + } + ] + } + }, + { + "date": "Mon, 01 May 2023 07:39:54 GMT", + "tag": "@fluentui/react-charting_v5.16.23", + "version": "5.16.23", + "comments": { + "patch": [ + { + "author": "beachball", + "package": "@fluentui/react-charting", + "comment": "Bump @fluentui/react-focus to v8.8.20", + "commit": "46f19b90d2088f055f9cd4bfad840f72fe68f0d8" + }, + { + "author": "beachball", + "package": "@fluentui/react-charting", + "comment": "Bump @fluentui/set-version to v8.2.7", + "commit": "46f19b90d2088f055f9cd4bfad840f72fe68f0d8" + }, + { + "author": "beachball", + "package": "@fluentui/react-charting", + "comment": "Bump @fluentui/react to v8.108.3", + "commit": "46f19b90d2088f055f9cd4bfad840f72fe68f0d8" + }, + { + "author": "beachball", + "package": "@fluentui/react-charting", + "comment": "Bump @fluentui/jest-serializer-merge-styles to v8.0.25", + "commit": "46f19b90d2088f055f9cd4bfad840f72fe68f0d8" + } + ] + } + }, + { + "date": "Tue, 25 Apr 2023 07:38:31 GMT", + "tag": "@fluentui/react-charting_v5.16.22", + "version": "5.16.22", + "comments": { + "patch": [ + { + "author": "kumarkshitij@microsoft.com", + "package": "@fluentui/react-charting", + "commit": "999a7998e3913ab823fe24069f0b5d1aab2b2ce0", + "comment": "Disable focus on non-interactive elements" + }, + { + "author": "beachball", + "package": "@fluentui/react-charting", + "comment": "Bump @fluentui/react to v8.108.2", + "commit": "2d93a25e46b76bb473f1deaea3180df5ef3c53ec" + } + ] + } + }, + { + "date": "Mon, 24 Apr 2023 07:36:03 GMT", + "tag": "@fluentui/react-charting_v5.16.21", + "version": "5.16.21", + "comments": { + "patch": [ + { + "author": "kumarkshitij@microsoft.com", + "package": "@fluentui/react-charting", + "commit": "948b5bf9871303d1742f1b9a17a3bd4006ce2fea", + "comment": "Make line chart screen reader accessible" + } + ] + } + }, + { + "date": "Fri, 21 Apr 2023 07:49:09 GMT", + "tag": "@fluentui/react-charting_v5.16.20", + "version": "5.16.20", + "comments": { + "patch": [ + { + "author": "beachball", + "package": "@fluentui/react-charting", + "comment": "Bump @fluentui/react to v8.108.1", + "commit": "ab5e8979917780ec8cf6b3b08b3696fc1b7a83f4" + } + ] + } + }, + { + "date": "Thu, 20 Apr 2023 07:47:57 GMT", + "tag": "@fluentui/react-charting_v5.16.19", + "version": "5.16.19", + "comments": { + "patch": [ + { + "author": "beachball", + "package": "@fluentui/react-charting", + "comment": "Bump @fluentui/react to v8.108.0", + "commit": "f7d88ee6fb582989efc057880ddfe60228649189" + } + ] + } + }, { "date": "Mon, 17 Apr 2023 07:40:26 GMT", "tag": "@fluentui/react-charting_v5.16.18", diff --git a/packages/react-charting/CHANGELOG.md b/packages/react-charting/CHANGELOG.md index cfd06940bd8cd6..9732a7204f0347 100644 --- a/packages/react-charting/CHANGELOG.md +++ b/packages/react-charting/CHANGELOG.md @@ -1,9 +1,70 @@ # Change Log - @fluentui/react-charting -This log was last generated on Mon, 17 Apr 2023 07:40:26 GMT and should not be manually modified. +This log was last generated on Tue, 02 May 2023 00:58:19 GMT and should not be manually modified. +## [5.16.24](https://github.com/microsoft/fluentui/tree/@fluentui/react-charting_v5.16.24) + +Tue, 02 May 2023 00:58:19 GMT +[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-charting_v5.16.23..@fluentui/react-charting_v5.16.24) + +### Patches + +- Bump @fluentui/react-focus to v8.8.21 ([PR #27736](https://github.com/microsoft/fluentui/pull/27736) by beachball) +- Bump @fluentui/set-version to v8.2.8 ([PR #27736](https://github.com/microsoft/fluentui/pull/27736) by beachball) +- Bump @fluentui/react to v8.109.0 ([PR #27736](https://github.com/microsoft/fluentui/pull/27736) by beachball) +- Bump @fluentui/jest-serializer-merge-styles to v8.0.26 ([PR #27736](https://github.com/microsoft/fluentui/pull/27736) by beachball) + +## [5.16.23](https://github.com/microsoft/fluentui/tree/@fluentui/react-charting_v5.16.23) + +Mon, 01 May 2023 07:39:54 GMT +[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-charting_v5.16.22..@fluentui/react-charting_v5.16.23) + +### Patches + +- Bump @fluentui/react-focus to v8.8.20 ([PR #27724](https://github.com/microsoft/fluentui/pull/27724) by beachball) +- Bump @fluentui/set-version to v8.2.7 ([PR #27724](https://github.com/microsoft/fluentui/pull/27724) by beachball) +- Bump @fluentui/react to v8.108.3 ([PR #27724](https://github.com/microsoft/fluentui/pull/27724) by beachball) +- Bump @fluentui/jest-serializer-merge-styles to v8.0.25 ([PR #27724](https://github.com/microsoft/fluentui/pull/27724) by beachball) + +## [5.16.22](https://github.com/microsoft/fluentui/tree/@fluentui/react-charting_v5.16.22) + +Tue, 25 Apr 2023 07:38:31 GMT +[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-charting_v5.16.21..@fluentui/react-charting_v5.16.22) + +### Patches + +- Disable focus on non-interactive elements ([PR #27580](https://github.com/microsoft/fluentui/pull/27580) by kumarkshitij@microsoft.com) +- Bump @fluentui/react to v8.108.2 ([PR #26482](https://github.com/microsoft/fluentui/pull/26482) by beachball) + +## [5.16.21](https://github.com/microsoft/fluentui/tree/@fluentui/react-charting_v5.16.21) + +Mon, 24 Apr 2023 07:36:03 GMT +[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-charting_v5.16.20..@fluentui/react-charting_v5.16.21) + +### Patches + +- Make line chart screen reader accessible ([PR #27632](https://github.com/microsoft/fluentui/pull/27632) by kumarkshitij@microsoft.com) + +## [5.16.20](https://github.com/microsoft/fluentui/tree/@fluentui/react-charting_v5.16.20) + +Fri, 21 Apr 2023 07:49:09 GMT +[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-charting_v5.16.19..@fluentui/react-charting_v5.16.20) + +### Patches + +- Bump @fluentui/react to v8.108.1 ([PR #27586](https://github.com/microsoft/fluentui/pull/27586) by beachball) + +## [5.16.19](https://github.com/microsoft/fluentui/tree/@fluentui/react-charting_v5.16.19) + +Thu, 20 Apr 2023 07:47:57 GMT +[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-charting_v5.16.18..@fluentui/react-charting_v5.16.19) + +### Patches + +- Bump @fluentui/react to v8.108.0 ([PR #27637](https://github.com/microsoft/fluentui/pull/27637) by beachball) + ## [5.16.18](https://github.com/microsoft/fluentui/tree/@fluentui/react-charting_v5.16.18) Mon, 17 Apr 2023 07:40:26 GMT diff --git a/packages/react-charting/config/setup-env.js b/packages/react-charting/config/setup-env.js new file mode 100644 index 00000000000000..093264800d8c6e --- /dev/null +++ b/packages/react-charting/config/setup-env.js @@ -0,0 +1 @@ +require('@testing-library/jest-dom'); diff --git a/packages/react-charting/docs/TestPlans/BasicDonutChart.png b/packages/react-charting/docs/TestPlans/BasicDonutChart.png new file mode 100644 index 00000000000000..847d9ffb767fd2 Binary files /dev/null and b/packages/react-charting/docs/TestPlans/BasicDonutChart.png differ diff --git a/packages/react-charting/docs/TestPlans/DonutChart/ComponentTests.md b/packages/react-charting/docs/TestPlans/DonutChart/ComponentTests.md new file mode 100644 index 00000000000000..0c4434f9bc9d61 --- /dev/null +++ b/packages/react-charting/docs/TestPlans/DonutChart/ComponentTests.md @@ -0,0 +1,35 @@ +
+ +# Component testing - Donut chart test plan + +![Alt text](BasicDonutChart.png) + +### Subcomponents: Pie and Legend + +### Library used: jest and (enzyme or react testing library) + +
+ +| Test case | Execution steps | Validation steps | Library used | +| -------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------- | ------------ | +| Test case 1: [Snapshot testing] [Component] |
  • Renders donut chart with data.
| Donut chart renders correctly | Enzyme | +| Test case 2: [Snapshot testing] [Individual Props] | Renders donut chart with:
  • HideTooltip prop set to “true”.
| Donut chart renders correctly | Enzyme | +| |
  • HideLegend prop set to “true”.
| Donut chart renders correctly | Enzyme | +| |
  • EnabledLegendsWrapLines prop set to “true”.
| Donut chart renders correctly | Enzyme | +| |
  • ValueInsideDonut set to a string / number.
| Donut chart renders correctly | Enzyme | +| |
  • HideLabels prop set to "false".
| Donut chart renders correctly | Enzyme | +| |
  • HideLabels prop set to "false" and ShowLabelsInPercent prop set to "true".
| Donut chart renders correctly | Enzyme | +| Test case 3: [Specific DOM elements] Renders individual elements on a prop change: |
  • HideLegend prop is set to “false”.
| Legend mounts correctly | Enzyme | +| |
  • HideTootip prop is set to “false”.
| Callout mounts correctly | Enzyme | +| |
  • onRenderCalloutPerStack prop is not given.
| Should not render onRenderCalloutPerStack | Enzyme | +| |
  • onRenderCalloutPerDataPoint prop is given.
| Should render onRenderCalloutPerDataPoint correctly | Enzyme | +| Test case 4: [Mouse events – Donut chart] Renders individual elements on mouse events: |
  • On mouse over on the donut chart.
| Should render callout | Enzyme | +| |
  • On mouse move on Pie 1 (step 1) -> mouse leave (step 2) -> mouse move on Pie 2 (step 3).
| Html in step 1 should not be the same as in step 3 | Enzyme | +| |
  • On mouse over with onRenderCalloutPerDataPoint prop provided.
| Should render the custom callout | Enzyme | +| |
  • On mouse over, followed by mouse leave on callout.
| On mouse over, callout should be defined, on mouse leave, callout should disappear. | Enzyme | +| Test case 5: [Mouse events – Legends] Renders individual elements on mouse events: |
  • On mouse over on legends.
| Should highlight the corresponding pie | RTL | +| |
  • On mouse over on legends.
| Should change the value inside donut with the legend value | Enzyme | +| |
  • On click on Pie.
| Should highlight the corresponding pie with aria-selected set to “true” and tabIndex set to 0. | RTL | +| |
  • On mouse out after mouse over on first legend.
| Should have opacity 0.1 for second Pie initially (during mouseOver on first legend) and opacity set to 1 for both the Pies on mouse out. | RTL | +| Test case 6: [Keyboard events – Donut chart] Renders individual elements on keyboard events: |
  • On focus on a Pie.
| Should render the corresponding callout | RTL | +| |
  • On blur on a Pie.
| Should remove focus from the corresponding Pie | RTL | diff --git a/packages/react-charting/jest.config.js b/packages/react-charting/jest.config.js index b70cd24668eeb4..0ac954180f24ef 100644 --- a/packages/react-charting/jest.config.js +++ b/packages/react-charting/jest.config.js @@ -19,7 +19,7 @@ function getEsmOnlyPackagesToCjsMapping() { const config = createConfig({ setupFiles: ['./config/tests.js'], snapshotSerializers: ['@fluentui/jest-serializer-merge-styles', 'enzyme-to-json/serializer'], - + setupFilesAfterEnv: ['./config/setup-env.js'], moduleNameMapper: { ...getEsmOnlyPackagesToCjsMapping(), }, diff --git a/packages/react-charting/package.json b/packages/react-charting/package.json index 9ebf5bde1c8b00..8f806ec256cb96 100644 --- a/packages/react-charting/package.json +++ b/packages/react-charting/package.json @@ -1,6 +1,6 @@ { "name": "@fluentui/react-charting", - "version": "5.16.18", + "version": "5.16.24", "description": "Experimental React charting components for building experiences for Microsoft 365.", "main": "lib-commonjs/index.js", "module": "lib/index.js", @@ -28,15 +28,16 @@ }, "devDependencies": { "@fluentui/eslint-plugin": "*", - "@fluentui/react": "^8.107.6", + "@fluentui/react": "^8.109.0", "@types/react-addons-test-utils": "0.14.18", - "@fluentui/jest-serializer-merge-styles": "^8.0.24", + "@fluentui/jest-serializer-merge-styles": "^8.0.26", "@fluentui/scripts-jest": "*", "@fluentui/scripts-tasks": "*", "@fluentui/scripts-webpack": "*" }, "dependencies": { - "@fluentui/react-focus": "^8.8.19", + "@fluentui/react-focus": "^8.8.21", + "@fluentui/theme-samples": "^8.7.70", "@microsoft/load-themed-styles": "^1.10.26", "@types/d3-array": "1.2.1", "@types/d3-axis": "1.0.10", @@ -48,7 +49,7 @@ "@types/d3-shape": "2.1.0", "@types/d3-time-format": "^2.1.0", "@types/d3-time": "^1.1.0", - "@fluentui/set-version": "^8.2.6", + "@fluentui/set-version": "^8.2.8", "d3-array": "1.2.1", "d3-axis": "1.0.8", "d3-format": "^1.4.4", @@ -62,7 +63,7 @@ "tslib": "^2.1.0" }, "peerDependencies": { - "@fluentui/react": "^8.107.6", + "@fluentui/react": "^8.109.0", "@types/react": ">=16.8.0 <19.0.0", "@types/react-dom": ">=16.8.0 <19.0.0", "react": ">=16.8.0 <19.0.0", diff --git a/packages/react-charting/src/components/DonutChart/DonutChart.test.tsx b/packages/react-charting/src/components/DonutChart/DonutChart.test.tsx index d6ca50995241cd..bb7efc643b61fb 100644 --- a/packages/react-charting/src/components/DonutChart/DonutChart.test.tsx +++ b/packages/react-charting/src/components/DonutChart/DonutChart.test.tsx @@ -32,11 +32,12 @@ function sharedAfterEach() { const points: IChartDataPoint[] = [ { legend: 'first', data: 20000, color: '#E5E5E5', xAxisCalloutData: '2020/04/30' }, { legend: 'second', data: 39000, color: '#0078D4', xAxisCalloutData: '2020/04/20' }, + { legend: 'third', data: 45000, color: '#DADADA', xAxisCalloutData: '2020/04/25' }, ]; const chartTitle = 'Stacked Bar chart example'; -const chartPoints: IChartProps = { +export const chartPoints: IChartProps = { chartTitle: chartTitle, chartData: points, }; diff --git a/packages/react-charting/src/components/DonutChart/DonutChartRTL.test.tsx b/packages/react-charting/src/components/DonutChart/DonutChartRTL.test.tsx new file mode 100644 index 00000000000000..d0e65307484d42 --- /dev/null +++ b/packages/react-charting/src/components/DonutChart/DonutChartRTL.test.tsx @@ -0,0 +1,204 @@ +import { render, screen, queryAllByAttribute, fireEvent, act } from '@testing-library/react'; +import { chartPoints } from './DonutChart.test'; +import { DonutChart } from './index'; +import * as React from 'react'; +import { DarkTheme } from '@fluentui/theme-samples'; +import { ThemeProvider } from '@fluentui/react'; +import * as utils from '../../utilities/utilities'; + +test('Should hide callout on mouse leave', () => { + // Arrange + const { container } = render(); + + // Act + const getById = queryAllByAttribute.bind(null, 'id'); + fireEvent.mouseOver(getById(container, /Pie/i)[0]); + expect(getById(container, /callout/i)[0]).toBeDefined(); + fireEvent.mouseLeave(getById(container, /Pie/i)[0]); + + // Assert + expect(getById(container, /callout/i)[0]).toHaveStyle('opacity: 0'); + expect(container).toMatchSnapshot(); +}); + +test('Should show callout on focus', () => { + // Arrange + const { container } = render(); + + // Act + const getById = queryAllByAttribute.bind(null, 'id'); + fireEvent.focus(getById(container, /Pie/i)[0]); + + // Assert + expect(getById(container, /focusRing/i)).toBeDefined(); +}); + +test('Should remove focus on blur', () => { + // Arrange + const { container } = render(); + + // Act + const getById = queryAllByAttribute.bind(null, 'id'); + fireEvent.blur(getById(container, /Pie/i)[0]); + + // Assert + const value = getById(container, /Pie/i)[0].getAttribute('id'); + expect(value).not.toContain('focusRing'); +}); + +test('Should highlight the corresponding Pie on mouse over on legends', () => { + // Arrange + const { container } = render(); + + // Act + const legend = screen.queryByText('first'); + expect(legend).toBeDefined(); + fireEvent.mouseOver(legend!); + + // Assert + const getById = queryAllByAttribute.bind(null, 'id'); + expect(getById(container, /Pie.*?second/i)[0]).toHaveAttribute('opacity', '0.1'); + expect(getById(container, /Pie.*?third/i)[0]).toHaveAttribute('opacity', '0.1'); +}); + +test('Should select legend on single mouse click on legends', () => { + // Arrange + const { container } = render(); + + // Act + const legend = screen.queryByText('first'); + expect(legend).toBeDefined(); + fireEvent.click(legend!); + + // Assert + const getById = queryAllByAttribute.bind(null, 'id'); + expect(getById(container, /Pie.*?second/i)[0]).toHaveAttribute('opacity', '0.1'); + const firstLegend = screen.queryByText('first')?.closest('button'); + expect(firstLegend).toHaveAttribute('aria-selected', 'true'); + expect(firstLegend).toHaveAttribute('tabIndex', '0'); +}); + +test('Should deselect legend on double mouse click on legends', () => { + // Arrange + const { container } = render(); + + // Act + const legend = screen.queryByText('first'); + expect(legend).toBeDefined(); + + //single click on first legend + fireEvent.click(legend!); + const getById = queryAllByAttribute.bind(null, 'id'); + expect(getById(container, /Pie.*?second/i)[0]).toHaveAttribute('opacity', '0.1'); + const firstLegend = screen.queryByText('first')?.closest('button'); + expect(firstLegend).toHaveAttribute('aria-selected', 'true'); + expect(firstLegend).toHaveAttribute('tabIndex', '0'); + // double click on same first legend + fireEvent.click(legend!); + + // Assert + expect(firstLegend).toHaveAttribute('aria-selected', 'false'); +}); + +test('Should show Pies with same opacity on mouse out of legends', () => { + // Arrange + const { container } = render(); + + // Act + const legend = screen.queryByText('first'); + expect(legend).toBeDefined(); + fireEvent.mouseOver(legend!); + const getById = queryAllByAttribute.bind(null, 'id'); + expect(getById(container, /Pie.*?second/i)[0]).toHaveAttribute('opacity', '0.1'); + fireEvent.mouseOut(legend!); + + // Assert + expect(getById(container, /Pie.*?first/i)[0]).toHaveAttribute('opacity', '1'); + expect(getById(container, /Pie.*?second/i)[0]).toHaveAttribute('opacity', '1'); +}); + +test('Should display correct callout data on mouse move', () => { + // Arrange + const { container } = render(); + + // Act + const getById = queryAllByAttribute.bind(null, 'id'); + fireEvent.mouseOver(getById(container, /Pie/i)[0]); + expect(getById(container, /callout/i)[0]).toHaveTextContent('20,000'); + fireEvent.mouseLeave(getById(container, /Pie/i)[0]); + fireEvent.mouseOver(getById(container, /Pie/i)[1]); + + // Assert + expect(getById(container, /callout/i)[0]).toHaveTextContent('39,000'); +}); + +test('Should reflect theme change', () => { + // Arrange + const { container } = render( + + + , + ); + + // Assert + expect(container).toMatchSnapshot(); +}); + +describe('Screen resolution', () => { + const originalInnerWidth = global.innerWidth; + const originalInnerHeight = global.innerHeight; + afterEach(() => { + global.innerWidth = originalInnerWidth; + global.innerHeight = originalInnerHeight; + act(() => { + global.dispatchEvent(new Event('resize')); + }); + }); + + test('Should remain unchanged on zoom in', () => { + // Arrange + const { container } = render(); + + // Act + global.innerWidth = window.innerWidth / 2; + global.innerHeight = window.innerHeight / 2; + act(() => { + global.dispatchEvent(new Event('resize')); + }); + + // Assert + expect(container).toMatchSnapshot(); + }); + + test('Should remain unchanged on zoom out', () => { + // Arrange + const { container } = render(); + + // Act + global.innerWidth = window.innerWidth * 2; + global.innerHeight = window.innerHeight * 2; + act(() => { + global.dispatchEvent(new Event('resize')); + }); + + // Assert + expect(container).toMatchSnapshot(); + }); +}); + +test('Should change value inside donut with the legend value on mouseOver legend ', () => { + // Mock the implementation of wrapTextInsideDonut as it internally calls a Browser Function like + // getComputedTextLength() which will otherwise lead to a crash if mounted + jest.spyOn(utils, 'wrapTextInsideDonut').mockImplementation(() => '1000'); + // Arrange + const { container } = render( + , + ); + const getByClass = queryAllByAttribute.bind(null, 'class'); + + // Act + fireEvent.mouseOver(screen.getByText('first')); + + // Assert + expect(getByClass(container, /insideDonutString.*?/)[0].textContent).toBe('20,000'); +}); diff --git a/packages/react-charting/src/components/DonutChart/__snapshots__/DonutChart.test.tsx.snap b/packages/react-charting/src/components/DonutChart/__snapshots__/DonutChart.test.tsx.snap index 704e8d6b879c64..1e4d32b9c68c07 100644 --- a/packages/react-charting/src/components/DonutChart/__snapshots__/DonutChart.test.tsx.snap +++ b/packages/react-charting/src/components/DonutChart/__snapshots__/DonutChart.test.tsx.snap @@ -60,7 +60,7 @@ exports[`DonutChart - mouse events Should render callout correctly on mouseover &::-moz-focus-inner { border: 0; } - d="M0.5852252416681621,-54.99688637928982A55,55,0,0,1,46.747508639798205,28.977067414974766L-16.565176770869186,-11.206913872688409Z" + d="M0.5852252416681621,-54.99688637928982A55,55,0,0,1,51.38327129377018,-19.61528565050261L-18.954518060764226,6.381711767556007Z" data-is-focusable={true} id="_Pie_1first20000" onBlur={[Function]} @@ -86,7 +86,7 @@ exports[`DonutChart - mouse events Should render callout correctly on mouseover &::-moz-focus-inner { border: 0; } - d="M46.12029951098431,29.965279458351464A55,55,0,1,1,-0.5852252416682054,-54.99688637928982L-0.5852252416681382,19.99143595183984Z" + d="M51.78904378270381,-18.51742271681424A55,55,0,0,1,-22.33777910309799,50.259562520392066L8.845500303099026,-17.937589703967337Z" data-is-focusable={true} id="_Pie_1second39000" onBlur={[Function]} @@ -98,6 +98,32 @@ exports[`DonutChart - mouse events Should render callout correctly on mouseover role="img" /> + + + @@ -341,7 +367,7 @@ exports[`DonutChart - mouse events Should render callout correctly on mouseover aria-label="first" aria-posinset={1} aria-selected={false} - aria-setsize={2} + aria-setsize={3} className= { @@ -432,7 +458,7 @@ exports[`DonutChart - mouse events Should render callout correctly on mouseover aria-label="second" aria-posinset={2} aria-selected={false} - aria-setsize={2} + aria-setsize={3} className= { @@ -509,6 +535,97 @@ exports[`DonutChart - mouse events Should render callout correctly on mouseover +
+ +
@@ -579,7 +696,7 @@ exports[`DonutChart - mouse events Should render customized callout on mouseover &::-moz-focus-inner { border: 0; } - d="M0.5852252416681621,-54.99688637928982A55,55,0,0,1,46.747508639798205,28.977067414974766L-16.565176770869186,-11.206913872688409Z" + d="M0.5852252416681621,-54.99688637928982A55,55,0,0,1,51.38327129377018,-19.61528565050261L-18.954518060764226,6.381711767556007Z" data-is-focusable={true} id="_Pie_1first20000" onBlur={[Function]} @@ -605,7 +722,7 @@ exports[`DonutChart - mouse events Should render customized callout on mouseover &::-moz-focus-inner { border: 0; } - d="M46.12029951098431,29.965279458351464A55,55,0,1,1,-0.5852252416682054,-54.99688637928982L-0.5852252416681382,19.99143595183984Z" + d="M51.78904378270381,-18.51742271681424A55,55,0,0,1,-22.33777910309799,50.259562520392066L8.845500303099026,-17.937589703967337Z" data-is-focusable={true} id="_Pie_1second39000" onBlur={[Function]} @@ -617,6 +734,32 @@ exports[`DonutChart - mouse events Should render customized callout on mouseover role="img" /> + + + @@ -778,7 +921,7 @@ exports[`DonutChart - mouse events Should render customized callout on mouseover aria-label="first" aria-posinset={1} aria-selected={false} - aria-setsize={2} + aria-setsize={3} className= { @@ -869,7 +1012,7 @@ exports[`DonutChart - mouse events Should render customized callout on mouseover aria-label="second" aria-posinset={2} aria-selected={false} - aria-setsize={2} + aria-setsize={3} className= { @@ -946,6 +1089,97 @@ exports[`DonutChart - mouse events Should render customized callout on mouseover +
+ +
@@ -1016,7 +1250,7 @@ exports[`DonutChart snapShot testing Should render arc labels 1`] = ` &::-moz-focus-inner { border: 0; } - d="M0.5999900000500041,-59.99700002499991A60,60,0,0,1,50.977019571412924,31.644011686506882L0,0Z" + d="M0.5999900000500041,-59.99700002499991A60,60,0,0,1,56.06817542356052,-21.36257720109735L0,0Z" data-is-focusable={true} id="_Pie_20first20000" onBlur={[Function]} @@ -1038,8 +1272,8 @@ exports[`DonutChart snapShot testing Should render arc labels 1`] = ` } dominantBaseline="auto" textAnchor="start" - x={54.33177576763747} - y={-29.867342398264405} + x={35.43557344375781} + y={-50.87553571916512} > 20.0k @@ -1058,7 +1292,7 @@ exports[`DonutChart snapShot testing Should render arc labels 1`] = ` &::-moz-focus-inner { border: 0; } - d="M50.33398646478252,32.65715551855505A60,60,0,1,1,-0.5999900000500514,-59.99700002499991L0,0Z" + d="M56.484185223414,-20.237016075673292A60,60,0,0,1,-24.40360777596704,54.81299049966861L0,0Z" data-is-focusable={true} id="_Pie_20second39000" onBlur={[Function]} @@ -1079,13 +1313,55 @@ exports[`DonutChart snapShot testing Should render arc labels 1`] = ` font-weight: 600; } dominantBaseline="hanging" - textAnchor="end" - x={-54.33177576763744} - y={29.867342398264462} + textAnchor="start" + x={42.16983494620299} + y={45.45002772947447} > 39.0k + + + + 45.0k + + @@ -1169,7 +1445,7 @@ exports[`DonutChart snapShot testing Should render arc labels 1`] = ` aria-label="first" aria-posinset={1} aria-selected={false} - aria-setsize={2} + aria-setsize={3} className= { @@ -1259,7 +1535,7 @@ exports[`DonutChart snapShot testing Should render arc labels 1`] = ` aria-label="second" aria-posinset={2} aria-selected={false} - aria-setsize={2} + aria-setsize={3} className= { @@ -1336,15 +1612,105 @@ exports[`DonutChart snapShot testing Should render arc labels 1`] = ` - - - - - - - - -`; +
+ +
+ + + + + + + + +`; exports[`DonutChart snapShot testing Should render arc labels in percentage format 1`] = `
- 34% + 19% @@ -1448,7 +1814,7 @@ exports[`DonutChart snapShot testing Should render arc labels in percentage form &::-moz-focus-inner { border: 0; } - d="M50.33398646478252,32.65715551855505A60,60,0,1,1,-0.5999900000500514,-59.99700002499991L0,0Z" + d="M56.484185223414,-20.237016075673292A60,60,0,0,1,-24.40360777596704,54.81299049966861L0,0Z" data-is-focusable={true} id="_Pie_24second39000" onBlur={[Function]} @@ -1469,11 +1835,53 @@ exports[`DonutChart snapShot testing Should render arc labels in percentage form font-weight: 600; } dominantBaseline="hanging" + textAnchor="start" + x={42.16983494620299} + y={45.45002772947447} + > + 38% + + + + + - 66% + 43% @@ -1559,7 +1967,7 @@ exports[`DonutChart snapShot testing Should render arc labels in percentage form aria-label="first" aria-posinset={1} aria-selected={false} - aria-setsize={2} + aria-setsize={3} className= { @@ -1649,7 +2057,7 @@ exports[`DonutChart snapShot testing Should render arc labels in percentage form aria-label="second" aria-posinset={2} aria-selected={false} - aria-setsize={2} + aria-setsize={3} className= { @@ -1726,6 +2134,96 @@ exports[`DonutChart snapShot testing Should render arc labels in percentage form
+
+ +
@@ -1796,7 +2294,7 @@ exports[`DonutChart snapShot testing renders DonutChart correctly 1`] = ` &::-moz-focus-inner { border: 0; } - d="M1.141252199959434,-99.99348750501748A100,100,0,0,1,85.03612397688221,52.619935566174156L47.03809752649778,28.502936359043495A55,55,0,0,0,1.1412521999594298,-54.98815821080106Z" + d="M1.141252199959434,-99.99348750501748A100,100,0,0,1,93.39656512824911,-35.736278796829446L51.18232065229373,-20.133803730189335A55,55,0,0,0,1.1412521999594298,-54.98815821080106Z" data-is-focusable={true} id="_Pie_1first20000" onBlur={[Function]} @@ -1822,7 +2320,7 @@ exports[`DonutChart snapShot testing renders DonutChart correctly 1`] = ` &::-moz-focus-inner { border: 0; } - d="M83.81299867891468,54.54705539667788A100,100,0,1,1,-1.141252199959535,-99.99348750501748L-1.1412521999594853,-54.98815821080106A55,55,0,1,0,45.81497222853026,30.430056189547226Z" + d="M94.18786514866262,-33.595327930195076A100,100,0,0,1,-40.54357552149029,91.41235411000646L-21.828478096689523,50.482844055999315A55,55,0,0,0,51.97362067270725,-17.992852863554965Z" data-is-focusable={true} id="_Pie_1second39000" onBlur={[Function]} @@ -1834,6 +2332,32 @@ exports[`DonutChart snapShot testing renders DonutChart correctly 1`] = ` role="img" /> + + + @@ -1917,7 +2441,7 @@ exports[`DonutChart snapShot testing renders DonutChart correctly 1`] = ` aria-label="first" aria-posinset={1} aria-selected={false} - aria-setsize={2} + aria-setsize={3} className= { @@ -2007,7 +2531,7 @@ exports[`DonutChart snapShot testing renders DonutChart correctly 1`] = ` aria-label="second" aria-posinset={2} aria-selected={false} - aria-setsize={2} + aria-setsize={3} className= { @@ -2084,6 +2608,96 @@ exports[`DonutChart snapShot testing renders DonutChart correctly 1`] = ` +
+ +
@@ -2154,7 +2768,7 @@ exports[`DonutChart snapShot testing renders enabledLegendsWrapLines correctly 1 &::-moz-focus-inner { border: 0; } - d="M0.9999833334166736,-99.99500004166653A100,100,0,0,1,84.96169928568821,52.74001947751147L0,0Z" + d="M0.9999833334166736,-99.99500004166653A100,100,0,0,1,93.44695903926753,-35.60429533516224L0,0Z" data-is-focusable={true} id="_Pie_12first20000" onBlur={[Function]} @@ -2180,7 +2794,7 @@ exports[`DonutChart snapShot testing renders enabledLegendsWrapLines correctly 1 &::-moz-focus-inner { border: 0; } - d="M83.8899774413042,54.42859253092508A100,100,0,1,1,-0.9999833334167523,-99.99500004166653L0,0Z" + d="M94.14030870569,-33.728360126122155A100,100,0,0,1,-40.67267962661173,91.35498416611435L0,0Z" data-is-focusable={true} id="_Pie_12second39000" onBlur={[Function]} @@ -2192,6 +2806,32 @@ exports[`DonutChart snapShot testing renders enabledLegendsWrapLines correctly 1 role="img" /> + + + @@ -2272,10 +2912,100 @@ exports[`DonutChart snapShot testing renders enabledLegendsWrapLines correctly 1 role="none" > + +
+
@@ -2362,10 +3092,10 @@ exports[`DonutChart snapShot testing renders enabledLegendsWrapLines correctly 1 role="none" > @@ -2512,7 +3242,7 @@ exports[`DonutChart snapShot testing renders hideLegend correctly 1`] = ` &::-moz-focus-inner { border: 0; } - d="M0.9999833334166736,-99.99500004166653A100,100,0,0,1,84.96169928568821,52.74001947751147L0,0Z" + d="M0.9999833334166736,-99.99500004166653A100,100,0,0,1,93.44695903926753,-35.60429533516224L0,0Z" data-is-focusable={true} id="_Pie_5first20000" onBlur={[Function]} @@ -2538,7 +3268,7 @@ exports[`DonutChart snapShot testing renders hideLegend correctly 1`] = ` &::-moz-focus-inner { border: 0; } - d="M83.8899774413042,54.42859253092508A100,100,0,1,1,-0.9999833334167523,-99.99500004166653L0,0Z" + d="M94.14030870569,-33.728360126122155A100,100,0,0,1,-40.67267962661173,91.35498416611435L0,0Z" data-is-focusable={true} id="_Pie_5second39000" onBlur={[Function]} @@ -2550,6 +3280,32 @@ exports[`DonutChart snapShot testing renders hideLegend correctly 1`] = ` role="img" /> + + + @@ -2620,7 +3376,7 @@ exports[`DonutChart snapShot testing renders hideTooltip correctly 1`] = ` &::-moz-focus-inner { border: 0; } - d="M0.9999833334166736,-99.99500004166653A100,100,0,0,1,84.96169928568821,52.74001947751147L0,0Z" + d="M0.9999833334166736,-99.99500004166653A100,100,0,0,1,93.44695903926753,-35.60429533516224L0,0Z" data-is-focusable={true} id="_Pie_8first20000" onBlur={[Function]} @@ -2646,7 +3402,7 @@ exports[`DonutChart snapShot testing renders hideTooltip correctly 1`] = ` &::-moz-focus-inner { border: 0; } - d="M83.8899774413042,54.42859253092508A100,100,0,1,1,-0.9999833334167523,-99.99500004166653L0,0Z" + d="M94.14030870569,-33.728360126122155A100,100,0,0,1,-40.67267962661173,91.35498416611435L0,0Z" data-is-focusable={true} id="_Pie_8second39000" onBlur={[Function]} @@ -2658,6 +3414,32 @@ exports[`DonutChart snapShot testing renders hideTooltip correctly 1`] = ` role="img" /> + + + @@ -2741,7 +3523,7 @@ exports[`DonutChart snapShot testing renders hideTooltip correctly 1`] = ` aria-label="first" aria-posinset={1} aria-selected={false} - aria-setsize={2} + aria-setsize={3} className= { @@ -2831,7 +3613,7 @@ exports[`DonutChart snapShot testing renders hideTooltip correctly 1`] = ` aria-label="second" aria-posinset={2} aria-selected={false} - aria-setsize={2} + aria-setsize={3} className= { @@ -2908,6 +3690,96 @@ exports[`DonutChart snapShot testing renders hideTooltip correctly 1`] = ` +
+ +
@@ -2978,7 +3850,7 @@ exports[`DonutChart snapShot testing renders value inside onf the pie 1`] = ` &::-moz-focus-inner { border: 0; } - d="M0.9999833334166736,-99.99500004166653A100,100,0,0,1,84.96169928568821,52.74001947751147L0,0Z" + d="M0.9999833334166736,-99.99500004166653A100,100,0,0,1,93.44695903926753,-35.60429533516224L0,0Z" data-is-focusable={true} id="_Pie_16first20000" onBlur={[Function]} @@ -3004,7 +3876,7 @@ exports[`DonutChart snapShot testing renders value inside onf the pie 1`] = ` &::-moz-focus-inner { border: 0; } - d="M83.8899774413042,54.42859253092508A100,100,0,1,1,-0.9999833334167523,-99.99500004166653L0,0Z" + d="M94.14030870569,-33.728360126122155A100,100,0,0,1,-40.67267962661173,91.35498416611435L0,0Z" data-is-focusable={true} id="_Pie_16second39000" onBlur={[Function]} @@ -3016,6 +3888,32 @@ exports[`DonutChart snapShot testing renders value inside onf the pie 1`] = ` role="img" /> + + + +
+ +
diff --git a/packages/react-charting/src/components/DonutChart/__snapshots__/DonutChartRTL.test.tsx.snap b/packages/react-charting/src/components/DonutChart/__snapshots__/DonutChartRTL.test.tsx.snap new file mode 100644 index 00000000000000..12a197ade6576a --- /dev/null +++ b/packages/react-charting/src/components/DonutChart/__snapshots__/DonutChartRTL.test.tsx.snap @@ -0,0 +1,6194 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`DonutChart - mouse events Should render callout correctly on mouseover 1`] = ` +
+
+
+ + + + + + + + + + + + + +
+
+
+ +
+
+
+
+
+
+
+
+
+ +
+
+ +
+
+ +
+
+
+
+
+
+
+
+
+`; + +exports[`DonutChart - mouse events Should render customized callout on mouseover 1`] = ` +
+
+
+ + + + + + + + + + + + + +
+
+
+ +
+
+
+
+
+
+
+
+
+ +
+
+ +
+
+ +
+
+
+
+
+
+
+
+
+`; + +exports[`DonutChart snapShot testing Should render arc labels 1`] = ` +
+
+
+ + + + + + 20.0k + + + + + + 39.0k + + + + + + 45.0k + + + + +
+
+ +
+
+
+
+
+
+
+
+ +
+
+ +
+
+ +
+
+
+
+
+
+
+
+
+`; + +exports[`DonutChart snapShot testing Should render arc labels in percentage format 1`] = ` +
+
+
+ + + + + + 19% + + + + + + 38% + + + + + + 43% + + + + +
+
+ +
+
+
+
+
+
+
+
+ +
+
+ +
+
+ +
+
+
+
+
+
+
+
+
+`; + +exports[`DonutChart snapShot testing renders DonutChart correctly 1`] = ` +
+
+
+ + + + + + + + + + + + + +
+
+ +
+
+
+
+
+
+
+
+ +
+
+ +
+
+ +
+
+
+
+
+
+
+
+
+`; + +exports[`DonutChart snapShot testing renders enabledLegendsWrapLines correctly 1`] = ` +
+
+
+ + + + + + + + + + + + + +
+
+ +
+
+
+
+
+
+
+
+ +
+
+ +
+
+ +
+
+
+
+
+
+
+
+
+`; + +exports[`DonutChart snapShot testing renders hideLegend correctly 1`] = ` +
+
+
+ + + + + + + + + + + + + +
+
+ +
+`; + +exports[`DonutChart snapShot testing renders hideTooltip correctly 1`] = ` +
+
+
+ + + + + + + + + + + + + +
+
+ +
+
+
+
+
+
+
+
+ +
+
+ +
+
+ +
+
+
+
+
+
+
+
+
+`; + +exports[`DonutChart snapShot testing renders value inside onf the pie 1`] = ` +
+
+
+ + + + + + + + + + + + + 1,000 + + + +
+
+ +
+
+
+
+
+
+
+
+ +
+
+ +
+
+ +
+
+
+
+
+
+
+
+
+`; + +exports[`Screen resolution Should remain unchanged on zoom in 1`] = ` +
+
+
+
+ + + + + + + + + + + + + +
+
+ +
+
+
+
+
+
+
+
+ +
+
+ +
+
+ +
+
+
+
+
+
+
+
+
+
+`; + +exports[`Screen resolution Should remain unchanged on zoom out 1`] = ` +
+
+
+
+ + + + + + + + + + + + + +
+
+ +
+
+
+
+
+
+
+
+ +
+
+ +
+
+ +
+
+
+
+
+
+
+
+
+
+`; + +exports[`Should hide callout on mouse leave 1`] = ` +
+
+
+
+ + + + + + + + + + + + + +
+
+ +
+
+
+
+
+
+
+
+ +
+
+ +
+
+ +
+
+
+
+
+
+
+
+
+
+`; + +exports[`Should reflect theme change 1`] = ` +
+
+
+
+
+ + + + + + + + + + + + + +
+
+ +
+
+
+
+
+
+
+
+ +
+
+ +
+
+ +
+
+
+
+
+
+
+
+
+
+
+`; diff --git a/packages/react-charting/src/components/HorizontalBarChart/HorizontalBarChart.base.tsx b/packages/react-charting/src/components/HorizontalBarChart/HorizontalBarChart.base.tsx index 7427b3660216ec..29f0e0c2efc8bb 100644 --- a/packages/react-charting/src/components/HorizontalBarChart/HorizontalBarChart.base.tsx +++ b/packages/react-charting/src/components/HorizontalBarChart/HorizontalBarChart.base.tsx @@ -14,8 +14,8 @@ import { import { Callout, DirectionalHint } from '@fluentui/react/lib/Callout'; import { ChartHoverCard, convertToLocaleString, getAccessibleDataObject } from '../../utilities/index'; import { FocusZone, FocusZoneDirection } from '@fluentui/react-focus'; -import { TooltipHost, TooltipOverflowMode } from '@fluentui/react'; import { formatPrefix as d3FormatPrefix } from 'd3-format'; +import { FocusableTooltipText } from '../../utilities/FocusableTooltipText'; const getClassNames = classNamesFunction(); @@ -100,15 +100,11 @@ export class HorizontalBarChartBase extends React.Component
{points!.chartTitle && ( - - - {points!.chartTitle} - - + accessibilityData={points!.chartTitleAccessibilityData} + /> )} {chartDataText}
@@ -225,9 +221,7 @@ export class HorizontalBarChartBase extends React.Component { return this.props.barChartCustomData ? ( -
- {this.props.barChartCustomData(data)} -
+
{this.props.barChartCustomData(data)}
) : ( this._getDefaultTextData(data) ); @@ -240,7 +234,7 @@ export class HorizontalBarChartBase extends React.Component one @@ -96,7 +96,7 @@ exports[`HorizontalBarChart - mouse events Should render callout correctly on mo font-size: 14px; font-weight: 600; } - data-is-focusable={true} + data-is-focusable={false} role="text" > 1,543 @@ -231,7 +231,7 @@ exports[`HorizontalBarChart - mouse events Should render callout correctly on mo role="none" > two @@ -263,7 +263,7 @@ exports[`HorizontalBarChart - mouse events Should render callout correctly on mo font-size: 14px; font-weight: 600; } - data-is-focusable={true} + data-is-focusable={false} role="text" > 800 @@ -574,7 +574,7 @@ exports[`HorizontalBarChart - mouse events Should render customized callout on m role="none" > one @@ -606,7 +606,7 @@ exports[`HorizontalBarChart - mouse events Should render customized callout on m font-size: 14px; font-weight: 600; } - data-is-focusable={true} + data-is-focusable={false} role="text" > 1,543 @@ -741,7 +741,7 @@ exports[`HorizontalBarChart - mouse events Should render customized callout on m role="none" > two @@ -773,7 +773,7 @@ exports[`HorizontalBarChart - mouse events Should render customized callout on m font-size: 14px; font-weight: 600; } - data-is-focusable={true} + data-is-focusable={false} role="text" > 800 @@ -1004,7 +1004,7 @@ exports[`HorizontalBarChart snapShot testing Should not render bar labels in abs role="none" > one @@ -1136,7 +1136,7 @@ exports[`HorizontalBarChart snapShot testing Should not render bar labels in abs role="none" > two @@ -1285,7 +1285,7 @@ exports[`HorizontalBarChart snapShot testing Should render absolute-scale varian role="none" > one @@ -1435,7 +1435,7 @@ exports[`HorizontalBarChart snapShot testing Should render absolute-scale varian role="none" > two diff --git a/packages/react-charting/src/components/LineChart/LineChart.base.tsx b/packages/react-charting/src/components/LineChart/LineChart.base.tsx index 86a5db5dbcd80a..9d9d55a360231b 100644 --- a/packages/react-charting/src/components/LineChart/LineChart.base.tsx +++ b/packages/react-charting/src/components/LineChart/LineChart.base.tsx @@ -568,6 +568,15 @@ export class LineChartBase extends React.Component { + this._refCallback(e!, circleId); + }} + onFocus={() => this._handleFocus(circleId, x1, xAxisCalloutData, circleId, xAxisCalloutAccessibilityData)} + onBlur={this._handleMouseOut} + {...this._getClickHandler(this._points[i].data[0].onDataPointClick)} />, ); } @@ -576,7 +585,7 @@ export class LineChartBase extends React.Component a.startIndex - b.startIndex) ?? []; // Use path rendering technique for larger datasets to optimize performance. - if (this.props.optimizeLargeData!) { + if (this.props.optimizeLargeData && this._points[i].data.length > 1) { const line = d3Line() // eslint-disable-next-line @typescript-eslint/no-explicit-any .x((d: any) => this._xAxisScale(d[0])) @@ -634,8 +643,12 @@ export class LineChartBase extends React.Component, ); } else { @@ -650,6 +663,10 @@ export class LineChartBase extends React.Component, ); } @@ -664,7 +681,6 @@ export class LineChartBase extends React.Component, ); - } else { + } else if (!this.props.optimizeLargeData) { for (let j = 1; j < this._points[i].data.length; j++) { const gapResult = this._checkInGap(j, gaps, gapIndex); const isInGap = gapResult.isInGap; @@ -726,11 +742,13 @@ export class LineChartBase extends React.Component this._handleFocus(lineId, x1, xAxisCalloutData, circleId, xAxisCalloutAccessibilityData)} onBlur={this._handleMouseOut} - onClick={this._onDataPointClick.bind(this, this._points[i].data[j - 1].onDataPointClick)} + {...this._getClickHandler(this._points[i].data[j - 1].onDataPointClick)} opacity={isLegendSelected && !currentPointHidden ? 1 : 0.01} fill={this._getPointFill(lineColor, circleId, j, false)} stroke={lineColor} strokeWidth={strokeWidth} + role="img" + aria-label={this._getAriaLabel(i, j - 1)} />, ); if (j + 1 === this._points[i].data.length) { @@ -778,11 +796,13 @@ export class LineChartBase extends React.Component, ); /* eslint-enable react/jsx-no-bind */ @@ -847,7 +867,7 @@ export class LineChartBase extends React.Component, ); } @@ -1103,7 +1123,6 @@ export class LineChartBase extends React.Component `translate(${_this._xAxisScale(x)}, 0)`) .attr('visibility', 'visibility'); @@ -1173,16 +1192,18 @@ export class LineChartBase extends React.Component void) => { + /** + * Screen readers announce an element as clickable if the onClick attribute is set. + * This function sets the attribute only when a click event handler is provided. + */ + private _getClickHandler = (func?: () => void): { onClick?: () => void } => { if (func) { - func(); + return { + onClick: func, + }; } - }; - private _onDataPointClick = (func: () => void) => { - if (func) { - func(); - } + return {}; }; private _handleMouseOut = () => { @@ -1326,4 +1347,14 @@ export class LineChartBase extends React.Component { return colorFillBar.applyPattern ? 1 : 0.4; }; + + private _getAriaLabel = (lineIndex: number, pointIndex: number): string => { + const line = this._points[lineIndex]; + const point = line.data[pointIndex]; + const formattedDate = point.x instanceof Date ? point.x.toLocaleString() : point.x; + const xValue = point.xAxisCalloutData || formattedDate; + const legend = line.legend; + const yValue = point.yAxisCalloutData || point.y; + return point.callOutAccessibilityData?.ariaLabel || `${xValue}. ${legend}, ${yValue}.`; + }; } diff --git a/packages/react-charting/src/components/LineChart/__snapshots__/LineChart.test.tsx.snap b/packages/react-charting/src/components/LineChart/__snapshots__/LineChart.test.tsx.snap index 80ca284639e148..4afb2190e3cc48 100644 --- a/packages/react-charting/src/components/LineChart/__snapshots__/LineChart.test.tsx.snap +++ b/packages/react-charting/src/components/LineChart/__snapshots__/LineChart.test.tsx.snap @@ -113,7 +113,6 @@ exports[`LineChart - mouse events Should render callout correctly on mouseover 1 @@ -633,7 +634,6 @@ exports[`LineChart - mouse events Should render customized callout on mouseover @@ -1051,7 +1053,6 @@ exports[`LineChart - mouse events Should render customized callout per stack on @@ -1468,7 +1471,6 @@ exports[`LineChart snapShot testing Should render with default colors when line @@ -1801,7 +1805,6 @@ exports[`LineChart snapShot testing renders LineChart correctly 1`] = ` @@ -2134,7 +2139,6 @@ exports[`LineChart snapShot testing renders enabledLegendsWrapLines correctly 1` @@ -2447,7 +2453,6 @@ exports[`LineChart snapShot testing renders hideLegend correctly 1`] = ` @@ -2620,7 +2627,6 @@ exports[`LineChart snapShot testing renders hideTooltip correctly 1`] = ` @@ -2953,7 +2961,6 @@ exports[`LineChart snapShot testing renders showXAxisLablesTooltip correctly 1`] @@ -3286,7 +3295,6 @@ exports[`LineChart snapShot testing renders wrapXAxisLables correctly 1`] = ` @@ -3619,7 +3629,6 @@ exports[`LineChart snapShot testing renders yAxisTickFormat correctly 1`] = ` diff --git a/packages/react-charting/src/components/StackedBarChart/MultiStackedBarChart.base.tsx b/packages/react-charting/src/components/StackedBarChart/MultiStackedBarChart.base.tsx index eef7f841fd278d..900834299ee678 100644 --- a/packages/react-charting/src/components/StackedBarChart/MultiStackedBarChart.base.tsx +++ b/packages/react-charting/src/components/StackedBarChart/MultiStackedBarChart.base.tsx @@ -14,8 +14,8 @@ import { import { Callout, DirectionalHint } from '@fluentui/react/lib/Callout'; import { FocusZone, FocusZoneDirection } from '@fluentui/react-focus'; import { ChartHoverCard, convertToLocaleString, getAccessibleDataObject } from '../../utilities/index'; -import { TooltipHost, TooltipOverflowMode } from '@fluentui/react'; import { formatPrefix as d3FormatPrefix } from 'd3-format'; +import { FocusableTooltipText } from '../../utilities/FocusableTooltipText'; const getClassNames = classNamesFunction(); @@ -258,7 +258,6 @@ export class MultiStackedBarChartBase extends React.Component @@ -297,16 +296,14 @@ export class MultiStackedBarChartBase extends React.Component
{data!.chartTitle && ( - - {data!.chartTitle} - + accessibilityData={data!.chartTitleAccessibilityData} + /> )} {showRatio && ( -
+
{getChartData()} {!hideDenominator && ( @@ -318,7 +315,7 @@ export class MultiStackedBarChartBase extends React.Component {getChartData()}
diff --git a/packages/react-charting/src/components/StackedBarChart/StackedBarChart.base.tsx b/packages/react-charting/src/components/StackedBarChart/StackedBarChart.base.tsx index 54ddd468de6d94..62b1866bf576d9 100644 --- a/packages/react-charting/src/components/StackedBarChart/StackedBarChart.base.tsx +++ b/packages/react-charting/src/components/StackedBarChart/StackedBarChart.base.tsx @@ -7,7 +7,7 @@ import { IRefArrayData, IStackedBarChartProps, IStackedBarChartStyleProps, IStac import { Callout, DirectionalHint } from '@fluentui/react/lib/Callout'; import { FocusZone, FocusZoneDirection } from '@fluentui/react-focus'; import { ChartHoverCard, convertToLocaleString, getAccessibleDataObject } from '../../utilities/index'; -import { TooltipHost, TooltipOverflowMode } from '@fluentui/react'; +import { FocusableTooltipText } from '../../utilities/FocusableTooltipText'; const getClassNames = classNamesFunction(); export interface IStackedBarChartState { @@ -107,16 +107,14 @@ export class StackedBarChartBase extends React.Component
{data!.chartTitle && ( - - {data!.chartTitle} - + accessibilityData={data!.chartTitleAccessibilityData} + /> )} {showRatio && ( -
+
{getChartData()} {!this.props.hideDenominator && ( @@ -128,7 +126,7 @@ export class StackedBarChartBase extends React.Component {getChartData()}
diff --git a/packages/react-charting/src/components/StackedBarChart/__snapshots__/MultiStackedBarChart.test.tsx.snap b/packages/react-charting/src/components/StackedBarChart/__snapshots__/MultiStackedBarChart.test.tsx.snap index 8d619ca410f83c..768da972c94ff0 100644 --- a/packages/react-charting/src/components/StackedBarChart/__snapshots__/MultiStackedBarChart.test.tsx.snap +++ b/packages/react-charting/src/components/StackedBarChart/__snapshots__/MultiStackedBarChart.test.tsx.snap @@ -72,7 +72,7 @@ exports[`MultiStackedBarChart - mouse events Should render callout correctly on role="none" > Monitored @@ -97,7 +97,7 @@ exports[`MultiStackedBarChart - mouse events Should render callout correctly on
Unmonitored @@ -303,7 +303,7 @@ exports[`MultiStackedBarChart - mouse events Should render callout correctly on
Monitored @@ -761,7 +761,7 @@ exports[`MultiStackedBarChart - mouse events Should render customized callout on
Unmonitored @@ -967,7 +967,7 @@ exports[`MultiStackedBarChart - mouse events Should render customized callout on
Monitored @@ -1491,7 +1491,7 @@ exports[`MultiStackedBarChart snapShot testing Should not render bar labels in a role="none" > Unmonitored @@ -1758,7 +1758,7 @@ exports[`MultiStackedBarChart snapShot testing Should render absolute-scale vari role="none" > Monitored @@ -1882,7 +1882,6 @@ exports[`MultiStackedBarChart snapShot testing Should render absolute-scale vari font-size: 12px; font-weight: 600; } - data-is-focusable={true} dominantBaseline="central" role="img" transform="translate(4)" @@ -1950,7 +1949,7 @@ exports[`MultiStackedBarChart snapShot testing Should render absolute-scale vari role="none" > Unmonitored @@ -2074,7 +2073,6 @@ exports[`MultiStackedBarChart snapShot testing Should render absolute-scale vari font-size: 12px; font-weight: 600; } - data-is-focusable={true} dominantBaseline="central" role="img" transform="translate(4)" @@ -2235,7 +2233,7 @@ exports[`MultiStackedBarChart snapShot testing renders MultiStackedBarChart corr role="none" > Monitored @@ -2260,7 +2258,7 @@ exports[`MultiStackedBarChart snapShot testing renders MultiStackedBarChart corr
Unmonitored @@ -2460,7 +2458,7 @@ exports[`MultiStackedBarChart snapShot testing renders MultiStackedBarChart corr
Monitored @@ -2753,7 +2751,7 @@ exports[`MultiStackedBarChart snapShot testing renders hideDenominator correctly
Unmonitored @@ -2943,7 +2941,7 @@ exports[`MultiStackedBarChart snapShot testing renders hideDenominator correctly
Monitored @@ -3226,7 +3224,7 @@ exports[`MultiStackedBarChart snapShot testing renders hideLegend correctly 1`]
Unmonitored @@ -3426,7 +3424,7 @@ exports[`MultiStackedBarChart snapShot testing renders hideLegend correctly 1`]
Monitored @@ -3797,7 +3795,7 @@ exports[`MultiStackedBarChart snapShot testing renders hideRatio correctly 1`] = role="none" > Unmonitored @@ -3822,7 +3820,7 @@ exports[`MultiStackedBarChart snapShot testing renders hideRatio correctly 1`] =
Monitored @@ -4296,7 +4294,7 @@ exports[`MultiStackedBarChart snapShot testing renders hideTooltip correctly 1`]
Unmonitored @@ -4496,7 +4494,7 @@ exports[`MultiStackedBarChart snapShot testing renders hideTooltip correctly 1`]
Stacked bar chart 2nd example @@ -84,7 +84,7 @@ exports[`StackedBarChart - mouse events Should render callout correctly on mouse
Stacked bar chart 2nd example @@ -454,7 +454,7 @@ exports[`StackedBarChart - mouse events Should render customized callout on mous
Stacked bar chart 2nd example @@ -741,7 +741,7 @@ exports[`StackedBarChart snapShot testing renders StackedBarChart correctly 1`]
Stacked bar chart 2nd example @@ -948,7 +948,7 @@ exports[`StackedBarChart snapShot testing renders enabledLegendsWrapLines correc
Stacked bar chart 2nd example @@ -1155,7 +1155,7 @@ exports[`StackedBarChart snapShot testing renders hideDenominator correctly 1`]
Stacked bar chart 2nd example @@ -1352,7 +1352,7 @@ exports[`StackedBarChart snapShot testing renders hideLegend correctly 1`] = `
Stacked bar chart 2nd example @@ -1715,7 +1715,7 @@ exports[`StackedBarChart snapShot testing renders hideTooltip correctly 1`] = ` role="none" > Stacked bar chart 2nd example @@ -1740,7 +1740,7 @@ exports[`StackedBarChart snapShot testing renders hideTooltip correctly 1`] = `
Stacked bar chart 2nd example diff --git a/packages/react-charting/src/components/VerticalStackedBarChart/VerticalStackedBarChart.base.tsx b/packages/react-charting/src/components/VerticalStackedBarChart/VerticalStackedBarChart.base.tsx index fd6d11de38ae0a..8f87e8191df4b5 100644 --- a/packages/react-charting/src/components/VerticalStackedBarChart/VerticalStackedBarChart.base.tsx +++ b/packages/react-charting/src/components/VerticalStackedBarChart/VerticalStackedBarChart.base.tsx @@ -826,7 +826,6 @@ export class VerticalStackedBarChartBase extends React.Component< y={yPoint - 6} textAnchor="middle" className={this._classNames.barLabel} - data-is-focusable={true} aria-label={`Total: ${barTotalValue}`} role="img" transform={`translate(${xScaleBandwidthTranslate}, 0)`} diff --git a/packages/react-charting/src/components/VerticalStackedBarChart/__snapshots__/VerticalStackedBarChart.test.tsx.snap b/packages/react-charting/src/components/VerticalStackedBarChart/__snapshots__/VerticalStackedBarChart.test.tsx.snap index f65548423df860..c08589f1d6b270 100644 --- a/packages/react-charting/src/components/VerticalStackedBarChart/__snapshots__/VerticalStackedBarChart.test.tsx.snap +++ b/packages/react-charting/src/components/VerticalStackedBarChart/__snapshots__/VerticalStackedBarChart.test.tsx.snap @@ -162,7 +162,6 @@ exports[`VerticalStackedBarChart - mouse events Should render callout correctly font-size: 12px; font-weight: 600; } - data-is-focusable={true} role="img" textAnchor="middle" transform="translate(0, 0)" @@ -236,7 +235,6 @@ exports[`VerticalStackedBarChart - mouse events Should render callout correctly font-size: 12px; font-weight: 600; } - data-is-focusable={true} role="img" textAnchor="middle" transform="translate(0, 0)" @@ -810,7 +808,6 @@ exports[`VerticalStackedBarChart - mouse events Should render customized callout font-size: 12px; font-weight: 600; } - data-is-focusable={true} role="img" textAnchor="middle" transform="translate(0, 0)" @@ -884,7 +881,6 @@ exports[`VerticalStackedBarChart - mouse events Should render customized callout font-size: 12px; font-weight: 600; } - data-is-focusable={true} role="img" textAnchor="middle" transform="translate(0, 0)" @@ -1367,7 +1363,6 @@ exports[`VerticalStackedBarChart - mouse events Should render customized callout font-size: 12px; font-weight: 600; } - data-is-focusable={true} role="img" textAnchor="middle" transform="translate(0, 0)" @@ -1432,7 +1427,6 @@ exports[`VerticalStackedBarChart - mouse events Should render customized callout font-size: 12px; font-weight: 600; } - data-is-focusable={true} role="img" textAnchor="middle" transform="translate(0, 0)" diff --git a/packages/react-charting/src/utilities/FocusableTooltipText.tsx b/packages/react-charting/src/utilities/FocusableTooltipText.tsx new file mode 100644 index 00000000000000..96e4d270a8472e --- /dev/null +++ b/packages/react-charting/src/utilities/FocusableTooltipText.tsx @@ -0,0 +1,80 @@ +import * as React from 'react'; +import { hasOverflow, ITooltipHostProps, TooltipHost, TooltipOverflowMode } from '@fluentui/react'; +import { getAccessibleDataObject } from './index'; +import { IAccessibilityProps } from '../types/index'; +import { Async } from '../Utilities'; + +interface IFocusableTooltipTextProps { + className?: ITooltipHostProps['hostClassName']; + content?: ITooltipHostProps['content']; + accessibilityData?: IAccessibilityProps; +} + +interface IFocusableTooltipTextState { + textOverflow: boolean; +} + +/** + * Component to make the text focusable when the overflowed content is clipped + * because of the CSS text-overflow property. + */ +export class FocusableTooltipText extends React.Component { + private _tooltipChild = React.createRef(); + private _resizeObserver?: ResizeObserver; + private _async: Async; + + constructor(props: IFocusableTooltipTextProps) { + super(props); + + this.state = { + textOverflow: false, + }; + + this._async = new Async(this); + } + + public render(): React.ReactNode { + const { className, content, accessibilityData } = this.props; + + return ( + + + {content} + + + ); + } + + public componentDidMount(): void { + const overflowElement = this._getTargetElement(); + if (window.ResizeObserver && overflowElement) { + this._resizeObserver = new ResizeObserver(this._async.debounce(this._checkTextOverflow, 500)); + this._resizeObserver.observe(overflowElement); + } + } + + public componentWillUnmount(): void { + this._resizeObserver?.disconnect(); + this._async.dispose(); + } + + private _checkTextOverflow = (): void => { + const overflowElement = this._getTargetElement(); + const textOverflow = !!overflowElement && hasOverflow(overflowElement); + if (textOverflow !== this.state.textOverflow) { + this.setState({ textOverflow }); + } + }; + + private _getTargetElement = (): HTMLElement | undefined => { + if (!this._tooltipChild.current || !this._tooltipChild.current.parentElement) { + return undefined; + } + + return this._tooltipChild.current.parentElement; + }; +} diff --git a/packages/react-charting/tsconfig.json b/packages/react-charting/tsconfig.json index d9e220a59c2150..0c2581357d8c0c 100644 --- a/packages/react-charting/tsconfig.json +++ b/packages/react-charting/tsconfig.json @@ -19,7 +19,7 @@ "skipLibCheck": true, "lib": ["es5", "dom"], "typeRoots": ["../../node_modules/@types", "../../typings"], - "types": ["jest", "custom-global"], + "types": ["jest", "custom-global", "@testing-library/jest-dom"], "isolatedModules": true }, "include": ["src"] diff --git a/packages/react-components/babel-preset-global-context/.npmignore b/packages/react-components/babel-preset-global-context/.npmignore index f7ce568a6dbf7c..26904cdfffc9bd 100644 --- a/packages/react-components/babel-preset-global-context/.npmignore +++ b/packages/react-components/babel-preset-global-context/.npmignore @@ -28,3 +28,9 @@ __tests__ .eslint* .git* .prettierignore + +# exclude gitignore patterns explicitly +!lib +!lib-commonjs +!lib-amd +!dist/*.d.ts 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 c35f80f6a167e9..a962e4119eb6d0 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/.npmignore b/packages/react-components/babel-preset-storybook-full-source/.npmignore index f7ce568a6dbf7c..26904cdfffc9bd 100644 --- a/packages/react-components/babel-preset-storybook-full-source/.npmignore +++ b/packages/react-components/babel-preset-storybook-full-source/.npmignore @@ -28,3 +28,9 @@ __tests__ .eslint* .git* .prettierignore + +# exclude gitignore patterns explicitly +!lib +!lib-commonjs +!lib-amd +!dist/*.d.ts 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 dafc6e0002a6b0..3a35e5b8bdd727 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/.npmignore b/packages/react-components/global-context/.npmignore index f7ce568a6dbf7c..26904cdfffc9bd 100644 --- a/packages/react-components/global-context/.npmignore +++ b/packages/react-components/global-context/.npmignore @@ -28,3 +28,9 @@ __tests__ .eslint* .git* .prettierignore + +# exclude gitignore patterns explicitly +!lib +!lib-commonjs +!lib-amd +!dist/*.d.ts diff --git a/packages/react-components/global-context/jest.config.js b/packages/react-components/global-context/jest.config.js index 89b83781aad754..cc8d64ae4a43a1 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 0010ac80544e83..79a9007e8228b3 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/.npmignore b/packages/react-components/keyboard-keys/.npmignore index f7ce568a6dbf7c..26904cdfffc9bd 100644 --- a/packages/react-components/keyboard-keys/.npmignore +++ b/packages/react-components/keyboard-keys/.npmignore @@ -28,3 +28,9 @@ __tests__ .eslint* .git* .prettierignore + +# exclude gitignore patterns explicitly +!lib +!lib-commonjs +!lib-amd +!dist/*.d.ts diff --git a/packages/react-components/keyboard-keys/jest.config.js b/packages/react-components/keyboard-keys/jest.config.js index f4f30182fe7715..5e16ee4e6b8d8a 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/.npmignore b/packages/react-components/priority-overflow/.npmignore index f7ce568a6dbf7c..26904cdfffc9bd 100644 --- a/packages/react-components/priority-overflow/.npmignore +++ b/packages/react-components/priority-overflow/.npmignore @@ -28,3 +28,9 @@ __tests__ .eslint* .git* .prettierignore + +# exclude gitignore patterns explicitly +!lib +!lib-commonjs +!lib-amd +!dist/*.d.ts diff --git a/packages/react-components/priority-overflow/jest.config.js b/packages/react-components/priority-overflow/jest.config.js index 5be1fb02508866..994e3d649a4309 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/.npmignore b/packages/react-components/react-accordion/.npmignore index f7ce568a6dbf7c..26904cdfffc9bd 100644 --- a/packages/react-components/react-accordion/.npmignore +++ b/packages/react-components/react-accordion/.npmignore @@ -28,3 +28,9 @@ __tests__ .eslint* .git* .prettierignore + +# exclude gitignore patterns explicitly +!lib +!lib-commonjs +!lib-amd +!dist/*.d.ts diff --git a/packages/react-components/react-accordion/CHANGELOG.json b/packages/react-components/react-accordion/CHANGELOG.json index e4921e220795f6..21918fe6e13c25 100644 --- a/packages/react-components/react-accordion/CHANGELOG.json +++ b/packages/react-components/react-accordion/CHANGELOG.json @@ -1,6 +1,27 @@ { "name": "@fluentui/react-accordion", "entries": [ + { + "date": "Mon, 24 Apr 2023 08:12:31 GMT", + "tag": "@fluentui/react-accordion_v9.1.10", + "version": "9.1.10", + "comments": { + "patch": [ + { + "author": "bernardo.sunderhus@gmail.com", + "package": "@fluentui/react-accordion", + "commit": "93de47a555e31b091d76657bd25c0180e290eee0", + "comment": "feat: adopt custom JSX pragma" + }, + { + "author": "beachball", + "package": "@fluentui/react-accordion", + "comment": "Bump @fluentui/react-jsx-runtime to v9.0.0-alpha.2", + "commit": "505433ac64f144c9cca456097413d6af4582e5ee" + } + ] + } + }, { "date": "Mon, 17 Apr 2023 17:54:02 GMT", "tag": "@fluentui/react-accordion_v9.1.9", diff --git a/packages/react-components/react-accordion/CHANGELOG.md b/packages/react-components/react-accordion/CHANGELOG.md index ebb46ab2a62549..5e184e7aeaedb0 100644 --- a/packages/react-components/react-accordion/CHANGELOG.md +++ b/packages/react-components/react-accordion/CHANGELOG.md @@ -1,9 +1,19 @@ # Change Log - @fluentui/react-accordion -This log was last generated on Mon, 17 Apr 2023 17:54:02 GMT and should not be manually modified. +This log was last generated on Mon, 24 Apr 2023 08:12:31 GMT and should not be manually modified. +## [9.1.10](https://github.com/microsoft/fluentui/tree/@fluentui/react-accordion_v9.1.10) + +Mon, 24 Apr 2023 08:12:31 GMT +[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-accordion_v9.1.9..@fluentui/react-accordion_v9.1.10) + +### Patches + +- feat: adopt custom JSX pragma ([PR #27601](https://github.com/microsoft/fluentui/pull/27601) by bernardo.sunderhus@gmail.com) +- Bump @fluentui/react-jsx-runtime to v9.0.0-alpha.2 ([commit](https://github.com/microsoft/fluentui/commit/505433ac64f144c9cca456097413d6af4582e5ee) by beachball) + ## [9.1.9](https://github.com/microsoft/fluentui/tree/@fluentui/react-accordion_v9.1.9) Mon, 17 Apr 2023 17:54:02 GMT diff --git a/packages/react-components/react-accordion/jest.config.js b/packages/react-components/react-accordion/jest.config.js index 9d2d508dfbe130..fb3c3825bb3dc9 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/package.json b/packages/react-components/react-accordion/package.json index 40aa7974f46c00..0ac4ffacd90c27 100644 --- a/packages/react-components/react-accordion/package.json +++ b/packages/react-components/react-accordion/package.json @@ -1,6 +1,6 @@ { "name": "@fluentui/react-accordion", - "version": "9.1.9", + "version": "9.1.10", "description": "Fluent UI accordion component", "main": "lib-commonjs/index.js", "module": "lib/index.js", @@ -35,6 +35,7 @@ "@fluentui/react-aria": "^9.3.18", "@fluentui/react-context-selector": "^9.1.18", "@fluentui/react-icons": "^2.0.196", + "@fluentui/react-jsx-runtime": "9.0.0-alpha.2", "@fluentui/react-shared-contexts": "^9.3.3", "@fluentui/react-tabster": "^9.6.5", "@fluentui/react-theme": "^9.1.7", diff --git a/packages/react-components/react-accordion/src/components/Accordion/Accordion.tsx b/packages/react-components/react-accordion/src/components/Accordion/Accordion.tsx index 7e570969ae0dec..96541a5b99bded 100644 --- a/packages/react-components/react-accordion/src/components/Accordion/Accordion.tsx +++ b/packages/react-components/react-accordion/src/components/Accordion/Accordion.tsx @@ -2,7 +2,7 @@ import * as React from 'react'; import { renderAccordion_unstable } from './renderAccordion'; import { useAccordion_unstable } from './useAccordion'; import { useAccordionContextValues_unstable } from './useAccordionContextValues'; -import { useCustomStyleHooks_unstable } from '@fluentui/react-shared-contexts'; +import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts'; import { useAccordionStyles_unstable } from './useAccordionStyles'; import type { AccordionProps } from './Accordion.types'; import type { ForwardRefComponent } from '@fluentui/react-utilities'; @@ -17,8 +17,7 @@ export const Accordion: ForwardRefComponent = React.forwardRef { - const { slots, slotProps } = getSlots(state); + const { slots, slotProps } = getSlotsNext(state); return ( diff --git a/packages/react-components/react-accordion/src/components/AccordionHeader/AccordionHeader.tsx b/packages/react-components/react-accordion/src/components/AccordionHeader/AccordionHeader.tsx index 536b800ebeabe2..0cd1528a711d41 100644 --- a/packages/react-components/react-accordion/src/components/AccordionHeader/AccordionHeader.tsx +++ b/packages/react-components/react-accordion/src/components/AccordionHeader/AccordionHeader.tsx @@ -2,7 +2,7 @@ import * as React from 'react'; import { useAccordionHeader_unstable } from './useAccordionHeader'; import { renderAccordionHeader_unstable } from './renderAccordionHeader'; import { useAccordionHeaderStyles_unstable } from './useAccordionHeaderStyles'; -import { useCustomStyleHooks_unstable } from '@fluentui/react-shared-contexts'; +import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts'; import { useAccordionHeaderContextValues_unstable } from './useAccordionHeaderContextValues'; import type { AccordionHeaderProps } from './AccordionHeader.types'; import type { ForwardRefComponent } from '@fluentui/react-utilities'; @@ -17,8 +17,7 @@ export const AccordionHeader: ForwardRefComponent = React. useAccordionHeaderStyles_unstable(state); - const { useAccordionHeaderStyles_unstable: useCustomStyles } = useCustomStyleHooks_unstable(); - useCustomStyles(state); + useCustomStyleHook_unstable('useAccordionHeaderStyles_unstable')(state); return renderAccordionHeader_unstable(state, contextValues); }); diff --git a/packages/react-components/react-accordion/src/components/AccordionHeader/renderAccordionHeader.tsx b/packages/react-components/react-accordion/src/components/AccordionHeader/renderAccordionHeader.tsx index 7613332db1b678..937a1812bd1a30 100644 --- a/packages/react-components/react-accordion/src/components/AccordionHeader/renderAccordionHeader.tsx +++ b/packages/react-components/react-accordion/src/components/AccordionHeader/renderAccordionHeader.tsx @@ -1,5 +1,9 @@ -import * as React from 'react'; -import { getSlots } from '@fluentui/react-utilities'; +/** @jsxRuntime classic */ +/** @jsx createElement */ + +import { createElement } from '@fluentui/react-jsx-runtime'; + +import { getSlotsNext } from '@fluentui/react-utilities'; import { AccordionHeaderContext } from './AccordionHeaderContext'; import type { AccordionHeaderState, AccordionHeaderSlots, AccordionHeaderContextValues } from './AccordionHeader.types'; @@ -10,7 +14,7 @@ export const renderAccordionHeader_unstable = ( state: AccordionHeaderState, contextValues: AccordionHeaderContextValues, ) => { - const { slots, slotProps } = getSlots(state); + const { slots, slotProps } = getSlotsNext(state); return ( diff --git a/packages/react-components/react-accordion/src/components/AccordionItem/AccordionItem.tsx b/packages/react-components/react-accordion/src/components/AccordionItem/AccordionItem.tsx index 73badf5a935c9f..31dd4c02890fa3 100644 --- a/packages/react-components/react-accordion/src/components/AccordionItem/AccordionItem.tsx +++ b/packages/react-components/react-accordion/src/components/AccordionItem/AccordionItem.tsx @@ -2,7 +2,7 @@ import * as React from 'react'; import { useAccordionItem_unstable } from './useAccordionItem'; import { useAccordionItemContextValues_unstable } from './useAccordionItemContextValues'; import { renderAccordionItem_unstable } from './renderAccordionItem'; -import { useCustomStyleHooks_unstable } from '@fluentui/react-shared-contexts'; +import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts'; import { useAccordionItemStyles_unstable } from './useAccordionItemStyles'; import type { AccordionItemProps } from './AccordionItem.types'; import type { ForwardRefComponent } from '@fluentui/react-utilities'; @@ -16,8 +16,7 @@ export const AccordionItem: ForwardRefComponent = React.forw useAccordionItemStyles_unstable(state); - const { useAccordionItemStyles_unstable: useCustomStyles } = useCustomStyleHooks_unstable(); - useCustomStyles(state); + useCustomStyleHook_unstable('useAccordionItemStyles_unstable')(state); return renderAccordionItem_unstable(state, contextValues); }); diff --git a/packages/react-components/react-accordion/src/components/AccordionItem/renderAccordionItem.tsx b/packages/react-components/react-accordion/src/components/AccordionItem/renderAccordionItem.tsx index 0c65a6488aa1a2..659b3851ab40bc 100644 --- a/packages/react-components/react-accordion/src/components/AccordionItem/renderAccordionItem.tsx +++ b/packages/react-components/react-accordion/src/components/AccordionItem/renderAccordionItem.tsx @@ -1,5 +1,9 @@ -import * as React from 'react'; -import { getSlots } from '@fluentui/react-utilities'; +/** @jsxRuntime classic */ +/** @jsx createElement */ + +import { createElement } from '@fluentui/react-jsx-runtime'; + +import { getSlotsNext } from '@fluentui/react-utilities'; import { AccordionItemContext } from './AccordionItemContext'; import type { AccordionItemState, AccordionItemSlots, AccordionItemContextValues } from './AccordionItem.types'; @@ -7,7 +11,7 @@ import type { AccordionItemState, AccordionItemSlots, AccordionItemContextValues * Function that renders the final JSX of the component */ export const renderAccordionItem_unstable = (state: AccordionItemState, contextValues: AccordionItemContextValues) => { - const { slots, slotProps } = getSlots(state); + const { slots, slotProps } = getSlotsNext(state); return ( diff --git a/packages/react-components/react-accordion/src/components/AccordionPanel/AccordionPanel.tsx b/packages/react-components/react-accordion/src/components/AccordionPanel/AccordionPanel.tsx index b997e9047bb4e9..1bb9be54771bae 100644 --- a/packages/react-components/react-accordion/src/components/AccordionPanel/AccordionPanel.tsx +++ b/packages/react-components/react-accordion/src/components/AccordionPanel/AccordionPanel.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import { useAccordionPanel_unstable } from './useAccordionPanel'; import { renderAccordionPanel_unstable } from './renderAccordionPanel'; -import { useCustomStyleHooks_unstable } from '@fluentui/react-shared-contexts'; +import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts'; import { useAccordionPanelStyles_unstable } from './useAccordionPanelStyles'; import type { AccordionPanelProps } from './AccordionPanel.types'; import type { ForwardRefComponent } from '@fluentui/react-utilities'; @@ -14,8 +14,7 @@ export const AccordionPanel: ForwardRefComponent = React.fo useAccordionPanelStyles_unstable(state); - const { useAccordionPanelStyles_unstable: useCustomStyles } = useCustomStyleHooks_unstable(); - useCustomStyles(state); + useCustomStyleHook_unstable('useAccordionPanelStyles_unstable')(state); return renderAccordionPanel_unstable(state); }); diff --git a/packages/react-components/react-accordion/src/components/AccordionPanel/renderAccordionPanel.tsx b/packages/react-components/react-accordion/src/components/AccordionPanel/renderAccordionPanel.tsx index 68e8818a9347a6..7a4ebb205f5ed2 100644 --- a/packages/react-components/react-accordion/src/components/AccordionPanel/renderAccordionPanel.tsx +++ b/packages/react-components/react-accordion/src/components/AccordionPanel/renderAccordionPanel.tsx @@ -1,11 +1,15 @@ -import * as React from 'react'; -import { getSlots } from '@fluentui/react-utilities'; +/** @jsxRuntime classic */ +/** @jsx createElement */ + +import { createElement } from '@fluentui/react-jsx-runtime'; + +import { getSlotsNext } from '@fluentui/react-utilities'; import type { AccordionPanelState, AccordionPanelSlots } from './AccordionPanel.types'; /** * Function that renders the final JSX of the component */ export const renderAccordionPanel_unstable = (state: AccordionPanelState) => { - const { slots, slotProps } = getSlots(state); + const { slots, slotProps } = getSlotsNext(state); return state.open ? {slotProps.root.children} : null; }; diff --git a/packages/react-components/react-accordion/src/testing/isConformant.ts b/packages/react-components/react-accordion/src/testing/isConformant.ts index 183b694ab7ee30..d3e3e430022c85 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/.npmignore b/packages/react-components/react-alert/.npmignore index f7ce568a6dbf7c..26904cdfffc9bd 100644 --- a/packages/react-components/react-alert/.npmignore +++ b/packages/react-components/react-alert/.npmignore @@ -28,3 +28,9 @@ __tests__ .eslint* .git* .prettierignore + +# exclude gitignore patterns explicitly +!lib +!lib-commonjs +!lib-amd +!dist/*.d.ts diff --git a/packages/react-components/react-alert/CHANGELOG.json b/packages/react-components/react-alert/CHANGELOG.json index 30cad4f72ef200..7cdad13118ad67 100644 --- a/packages/react-components/react-alert/CHANGELOG.json +++ b/packages/react-components/react-alert/CHANGELOG.json @@ -1,6 +1,39 @@ { "name": "@fluentui/react-alert", "entries": [ + { + "date": "Mon, 24 Apr 2023 08:12:31 GMT", + "tag": "@fluentui/react-alert_v9.0.0-beta.45", + "version": "9.0.0-beta.45", + "comments": { + "prerelease": [ + { + "author": "bernardo.sunderhus@gmail.com", + "package": "@fluentui/react-alert", + "commit": "85c36e249b33b0bad79be4edd1a943dfc5233b11", + "comment": "bugfix: remove caret from react-jsx-runtime prerelease dependency" + }, + { + "author": "beachball", + "package": "@fluentui/react-alert", + "comment": "Bump @fluentui/react-avatar to v9.4.10", + "commit": "505433ac64f144c9cca456097413d6af4582e5ee" + }, + { + "author": "beachball", + "package": "@fluentui/react-alert", + "comment": "Bump @fluentui/react-button to v9.3.10", + "commit": "505433ac64f144c9cca456097413d6af4582e5ee" + }, + { + "author": "beachball", + "package": "@fluentui/react-alert", + "comment": "Bump @fluentui/react-jsx-runtime to v9.0.0-alpha.2", + "commit": "505433ac64f144c9cca456097413d6af4582e5ee" + } + ] + } + }, { "date": "Mon, 17 Apr 2023 17:53:44 GMT", "tag": "@fluentui/react-alert_v9.0.0-beta.44", diff --git a/packages/react-components/react-alert/CHANGELOG.md b/packages/react-components/react-alert/CHANGELOG.md index 8e31d7a53699b5..b367eb6544566c 100644 --- a/packages/react-components/react-alert/CHANGELOG.md +++ b/packages/react-components/react-alert/CHANGELOG.md @@ -1,9 +1,21 @@ # Change Log - @fluentui/react-alert -This log was last generated on Mon, 17 Apr 2023 17:53:44 GMT and should not be manually modified. +This log was last generated on Mon, 24 Apr 2023 08:12:31 GMT and should not be manually modified. +## [9.0.0-beta.45](https://github.com/microsoft/fluentui/tree/@fluentui/react-alert_v9.0.0-beta.45) + +Mon, 24 Apr 2023 08:12:31 GMT +[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-alert_v9.0.0-beta.44..@fluentui/react-alert_v9.0.0-beta.45) + +### Changes + +- bugfix: remove caret from react-jsx-runtime prerelease dependency ([PR #27588](https://github.com/microsoft/fluentui/pull/27588) by bernardo.sunderhus@gmail.com) +- Bump @fluentui/react-avatar to v9.4.10 ([commit](https://github.com/microsoft/fluentui/commit/505433ac64f144c9cca456097413d6af4582e5ee) by beachball) +- Bump @fluentui/react-button to v9.3.10 ([commit](https://github.com/microsoft/fluentui/commit/505433ac64f144c9cca456097413d6af4582e5ee) by beachball) +- Bump @fluentui/react-jsx-runtime to v9.0.0-alpha.2 ([commit](https://github.com/microsoft/fluentui/commit/505433ac64f144c9cca456097413d6af4582e5ee) by beachball) + ## [9.0.0-beta.44](https://github.com/microsoft/fluentui/tree/@fluentui/react-alert_v9.0.0-beta.44) Mon, 17 Apr 2023 17:53:44 GMT diff --git a/packages/react-components/react-alert/jest.config.js b/packages/react-components/react-alert/jest.config.js index 7e1223ecf873b3..9693d4ad4d9f07 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/package.json b/packages/react-components/react-alert/package.json index cbce531c5ce562..21cbd14479deb9 100644 --- a/packages/react-components/react-alert/package.json +++ b/packages/react-components/react-alert/package.json @@ -1,6 +1,6 @@ { "name": "@fluentui/react-alert", - "version": "9.0.0-beta.44", + "version": "9.0.0-beta.45", "description": "An alert component to display brief messages", "main": "lib-commonjs/index.js", "module": "lib/index.js", @@ -32,13 +32,13 @@ "@fluentui/scripts-tasks": "*" }, "dependencies": { - "@fluentui/react-avatar": "^9.4.9", - "@fluentui/react-button": "^9.3.9", + "@fluentui/react-avatar": "^9.4.10", + "@fluentui/react-button": "^9.3.10", "@fluentui/react-icons": "^2.0.196", "@fluentui/react-tabster": "^9.6.5", "@fluentui/react-theme": "^9.1.7", "@fluentui/react-utilities": "^9.8.0", - "@fluentui/react-jsx-runtime": "9.0.0-alpha.1", + "@fluentui/react-jsx-runtime": "9.0.0-alpha.2", "@griffel/react": "^1.5.2", "@swc/helpers": "^0.4.14" }, 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 67357cb0e2ba6f..fea73e3f02df33 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 f8a41b80a27833..cfa91747e5ba94 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 1ea74ef4adfd4b..46340d6b4b9281 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 77f88408cbd839..a3d988f29a1728 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/.npmignore b/packages/react-components/react-aria/.npmignore index f7ce568a6dbf7c..26904cdfffc9bd 100644 --- a/packages/react-components/react-aria/.npmignore +++ b/packages/react-components/react-aria/.npmignore @@ -28,3 +28,9 @@ __tests__ .eslint* .git* .prettierignore + +# exclude gitignore patterns explicitly +!lib +!lib-commonjs +!lib-amd +!dist/*.d.ts diff --git a/packages/react-components/react-aria/jest.config.js b/packages/react-components/react-aria/jest.config.js index aabf1e411b3ec3..c5e519a6f36d16 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/.npmignore b/packages/react-components/react-avatar/.npmignore index f7ce568a6dbf7c..26904cdfffc9bd 100644 --- a/packages/react-components/react-avatar/.npmignore +++ b/packages/react-components/react-avatar/.npmignore @@ -28,3 +28,9 @@ __tests__ .eslint* .git* .prettierignore + +# exclude gitignore patterns explicitly +!lib +!lib-commonjs +!lib-amd +!dist/*.d.ts diff --git a/packages/react-components/react-avatar/CHANGELOG.json b/packages/react-components/react-avatar/CHANGELOG.json index a94b865fd5c494..548d8120844e87 100644 --- a/packages/react-components/react-avatar/CHANGELOG.json +++ b/packages/react-components/react-avatar/CHANGELOG.json @@ -1,6 +1,45 @@ { "name": "@fluentui/react-avatar", "entries": [ + { + "date": "Mon, 24 Apr 2023 08:12:31 GMT", + "tag": "@fluentui/react-avatar_v9.4.10", + "version": "9.4.10", + "comments": { + "patch": [ + { + "author": "bernardo.sunderhus@gmail.com", + "package": "@fluentui/react-avatar", + "commit": "d340ff4b1c3aa7e1818780ec4d41f46c86e451c9", + "comment": "chore: adopt custom JSX pragma" + }, + { + "author": "beachball", + "package": "@fluentui/react-avatar", + "comment": "Bump @fluentui/react-badge to v9.1.10", + "commit": "505433ac64f144c9cca456097413d6af4582e5ee" + }, + { + "author": "beachball", + "package": "@fluentui/react-avatar", + "comment": "Bump @fluentui/react-popover to v9.5.10", + "commit": "505433ac64f144c9cca456097413d6af4582e5ee" + }, + { + "author": "beachball", + "package": "@fluentui/react-avatar", + "comment": "Bump @fluentui/react-tooltip to v9.2.10", + "commit": "505433ac64f144c9cca456097413d6af4582e5ee" + }, + { + "author": "beachball", + "package": "@fluentui/react-avatar", + "comment": "Bump @fluentui/react-jsx-runtime to v9.0.0-alpha.2", + "commit": "505433ac64f144c9cca456097413d6af4582e5ee" + } + ] + } + }, { "date": "Mon, 17 Apr 2023 17:53:45 GMT", "tag": "@fluentui/react-avatar_v9.4.9", diff --git a/packages/react-components/react-avatar/CHANGELOG.md b/packages/react-components/react-avatar/CHANGELOG.md index 9cc5e9956c9623..2f2728991e0133 100644 --- a/packages/react-components/react-avatar/CHANGELOG.md +++ b/packages/react-components/react-avatar/CHANGELOG.md @@ -1,9 +1,22 @@ # Change Log - @fluentui/react-avatar -This log was last generated on Mon, 17 Apr 2023 17:53:45 GMT and should not be manually modified. +This log was last generated on Mon, 24 Apr 2023 08:12:31 GMT and should not be manually modified. +## [9.4.10](https://github.com/microsoft/fluentui/tree/@fluentui/react-avatar_v9.4.10) + +Mon, 24 Apr 2023 08:12:31 GMT +[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-avatar_v9.4.9..@fluentui/react-avatar_v9.4.10) + +### Patches + +- chore: adopt custom JSX pragma ([PR #27602](https://github.com/microsoft/fluentui/pull/27602) by bernardo.sunderhus@gmail.com) +- Bump @fluentui/react-badge to v9.1.10 ([commit](https://github.com/microsoft/fluentui/commit/505433ac64f144c9cca456097413d6af4582e5ee) by beachball) +- Bump @fluentui/react-popover to v9.5.10 ([commit](https://github.com/microsoft/fluentui/commit/505433ac64f144c9cca456097413d6af4582e5ee) by beachball) +- Bump @fluentui/react-tooltip to v9.2.10 ([commit](https://github.com/microsoft/fluentui/commit/505433ac64f144c9cca456097413d6af4582e5ee) by beachball) +- Bump @fluentui/react-jsx-runtime to v9.0.0-alpha.2 ([commit](https://github.com/microsoft/fluentui/commit/505433ac64f144c9cca456097413d6af4582e5ee) by beachball) + ## [9.4.9](https://github.com/microsoft/fluentui/tree/@fluentui/react-avatar_v9.4.9) Mon, 17 Apr 2023 17:53:45 GMT diff --git a/packages/react-components/react-avatar/jest.config.js b/packages/react-components/react-avatar/jest.config.js index 474b19047973a3..8e485ee197faba 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/package.json b/packages/react-components/react-avatar/package.json index 7adcb0d62c46e0..a87dd16f3b6659 100644 --- a/packages/react-components/react-avatar/package.json +++ b/packages/react-components/react-avatar/package.json @@ -1,6 +1,6 @@ { "name": "@fluentui/react-avatar", - "version": "9.4.9", + "version": "9.4.10", "description": "React components for building Microsoft web experiences.", "main": "lib-commonjs/index.js", "module": "lib/index.js", @@ -36,15 +36,16 @@ "@fluentui/scripts-tasks": "*" }, "dependencies": { - "@fluentui/react-badge": "^9.1.9", + "@fluentui/react-badge": "^9.1.10", "@fluentui/react-context-selector": "^9.1.18", "@fluentui/react-icons": "^2.0.196", - "@fluentui/react-popover": "^9.5.9", + "@fluentui/react-popover": "^9.5.10", "@fluentui/react-shared-contexts": "^9.3.3", "@fluentui/react-tabster": "^9.6.5", "@fluentui/react-theme": "^9.1.7", - "@fluentui/react-tooltip": "^9.2.9", + "@fluentui/react-tooltip": "^9.2.10", "@fluentui/react-utilities": "^9.8.0", + "@fluentui/react-jsx-runtime": "9.0.0-alpha.2", "@griffel/react": "^1.5.2", "@swc/helpers": "^0.4.14" }, diff --git a/packages/react-components/react-avatar/src/components/Avatar/Avatar.test.tsx b/packages/react-components/react-avatar/src/components/Avatar/Avatar.test.tsx index 246fb12945aab3..0fbbc8340169c7 100644 --- a/packages/react-components/react-avatar/src/components/Avatar/Avatar.test.tsx +++ b/packages/react-components/react-avatar/src/components/Avatar/Avatar.test.tsx @@ -2,7 +2,7 @@ import * as React from 'react'; import { isConformant } from '../../testing/isConformant'; import { Avatar } from './Avatar'; import { render, screen } from '@testing-library/react'; -import { avatarClassNames } from './useAvatarStyles'; +import { avatarClassNames } from './useAvatarStyles.styles'; import { DEFAULT_STRINGS } from './useAvatar'; describe('Avatar', () => { diff --git a/packages/react-components/react-avatar/src/components/Avatar/Avatar.tsx b/packages/react-components/react-avatar/src/components/Avatar/Avatar.tsx index 1ca28ec370bf98..98dfb77bd5002e 100644 --- a/packages/react-components/react-avatar/src/components/Avatar/Avatar.tsx +++ b/packages/react-components/react-avatar/src/components/Avatar/Avatar.tsx @@ -1,8 +1,8 @@ import * as React from 'react'; import { renderAvatar_unstable } from './renderAvatar'; import { useAvatar_unstable } from './useAvatar'; -import { useCustomStyleHooks_unstable } from '@fluentui/react-shared-contexts'; -import { useAvatarStyles_unstable } from './useAvatarStyles'; +import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts'; +import { useAvatarStyles_unstable } from './useAvatarStyles.styles'; import type { AvatarProps } from './Avatar.types'; import type { ForwardRefComponent } from '@fluentui/react-utilities'; @@ -11,8 +11,7 @@ export const Avatar: ForwardRefComponent = React.forwardRef((props, useAvatarStyles_unstable(state); - const { useAvatarStyles_unstable: useCustomStyles } = useCustomStyleHooks_unstable(); - useCustomStyles(state); + useCustomStyleHook_unstable('useAvatarStyles_unstable')(state); return renderAvatar_unstable(state); }); diff --git a/packages/react-components/react-avatar/src/components/Avatar/index.ts b/packages/react-components/react-avatar/src/components/Avatar/index.ts index 5641bfd7b3bebb..d10c3d89de1d57 100644 --- a/packages/react-components/react-avatar/src/components/Avatar/index.ts +++ b/packages/react-components/react-avatar/src/components/Avatar/index.ts @@ -2,4 +2,4 @@ export * from './Avatar.types'; export * from './Avatar'; export * from './renderAvatar'; export * from './useAvatar'; -export * from './useAvatarStyles'; +export * from './useAvatarStyles.styles'; diff --git a/packages/react-components/react-avatar/src/components/Avatar/renderAvatar.tsx b/packages/react-components/react-avatar/src/components/Avatar/renderAvatar.tsx index 1a68971339b9bf..203a126982e162 100644 --- a/packages/react-components/react-avatar/src/components/Avatar/renderAvatar.tsx +++ b/packages/react-components/react-avatar/src/components/Avatar/renderAvatar.tsx @@ -1,9 +1,13 @@ -import * as React from 'react'; -import { getSlots } from '@fluentui/react-utilities'; +/** @jsxRuntime classic */ +/** @jsx createElement */ + +import { createElement } from '@fluentui/react-jsx-runtime'; + +import { getSlotsNext } from '@fluentui/react-utilities'; import type { AvatarSlots, AvatarState } from './Avatar.types'; export const renderAvatar_unstable = (state: AvatarState) => { - const { slots, slotProps } = getSlots(state); + const { slots, slotProps } = getSlotsNext(state); return ( diff --git a/packages/react-components/react-avatar/src/components/Avatar/useAvatarStyles.ts b/packages/react-components/react-avatar/src/components/Avatar/useAvatarStyles.styles.ts similarity index 70% rename from packages/react-components/react-avatar/src/components/Avatar/useAvatarStyles.ts rename to packages/react-components/react-avatar/src/components/Avatar/useAvatarStyles.styles.ts index 8165d7b7c2091b..5152c8930da4b6 100644 --- a/packages/react-components/react-avatar/src/components/Avatar/useAvatarStyles.ts +++ b/packages/react-components/react-avatar/src/components/Avatar/useAvatarStyles.styles.ts @@ -1,7 +1,7 @@ -import { makeResetStyles, makeStyles, mergeClasses, shorthands } from '@griffel/react'; import { tokens } from '@fluentui/react-theme'; -import type { AvatarSlots, AvatarState } from './Avatar.types'; import type { SlotClassNames } from '@fluentui/react-utilities'; +import { makeResetStyles, makeStyles, mergeClasses, shorthands } from '@griffel/react'; +import type { AvatarSlots, AvatarState } from './Avatar.types'; export const avatarClassNames: SlotClassNames = { root: 'fui-Avatar', @@ -11,6 +11,14 @@ export const avatarClassNames: SlotClassNames = { badge: 'fui-Avatar__badge', }; +// CSS variables used internally in Avatar's styles +const vars = { + badgeRadius: '--fui-Avatar-badgeRadius', + badgeGap: '--fui-Avatar-badgeGap', + badgeAlign: '--fui-Avatar-badgeAlign', + ringWidth: '--fui-Avatar-ringWidth', +}; + const useRootClassName = makeResetStyles({ display: 'inline-block', flexShrink: 0, @@ -22,6 +30,29 @@ const useRootClassName = makeResetStyles({ fontSize: tokens.fontSizeBase300, width: '32px', height: '32px', + + // ::before is the ring, and ::after is the shadow. + // These are not displayed by default; the ring and shadow clases set content: "" to display them when appropriate. + '::before,::after': { + position: 'absolute', + top: 0, + left: 0, + bottom: 0, + right: 0, + zIndex: -1, + margin: `calc(-2 * var(${vars.ringWidth}, 0px))`, + borderRadius: 'inherit', + transitionProperty: 'margin, opacity', + transitionTimingFunction: `${tokens.curveEasyEaseMax}, ${tokens.curveLinear}`, + transitionDuration: `${tokens.durationUltraSlow}, ${tokens.durationSlower}`, + '@media screen and (prefers-reduced-motion: reduce)': { + transitionDuration: '0.01ms', + }, + }, + '::before': { + borderStyle: 'solid', + borderWidth: `var(${vars.ringWidth})`, + }, }); const useImageClassName = makeResetStyles({ @@ -55,6 +86,27 @@ const useIconInitialsClassName = makeResetStyles({ borderRadius: 'inherit', }); +/** + * Helper to create a maskImage that punches out a circle larger than the badge by `badgeGap`. + * This creates a transparent gap between the badge and Avatar. + * + * Used by the icon, initials, and image slots, as well as the ring ::before pseudo-element. + */ +const badgeMask = (margin?: string) => { + // Center the cutout at the badge's radius away from the edge. + // The ring (::before) also has a 2 * ringWidth margin that also needs to be offset. + const centerOffset = margin ? `calc(var(${vars.badgeRadius}) + ${margin})` : `var(${vars.badgeRadius})`; + // radial-gradient does not have anti-aliasing, so the transparent and opaque gradient stops are offset by +/- 0.25px + // to "fade" from transparent to opaque over a half-pixel and ease the transition. + const innerRadius = `calc(var(${vars.badgeRadius}) + var(${vars.badgeGap}) - 0.25px)`; + const outerRadius = `calc(var(${vars.badgeRadius}) + var(${vars.badgeGap}) + 0.25px)`; + + return ( + `radial-gradient(circle at bottom ${centerOffset} var(${vars.badgeAlign}) ${centerOffset}, ` + + `transparent ${innerRadius}, white ${outerRadius})` + ); +}; + const useStyles = makeStyles({ textCaption2Strong: { fontSize: tokens.fontSizeBase100 }, textCaption1Strong: { fontSize: tokens.fontSizeBase200 }, @@ -84,76 +136,97 @@ const useStyles = makeStyles({ '@media screen and (prefers-reduced-motion: reduce)': { transitionDuration: '0.01ms', }, - - '::before': { - content: '""', - position: 'absolute', - top: 0, - left: 0, - bottom: 0, - right: 0, - - ...shorthands.borderRadius('inherit'), - transitionProperty: 'margin, opacity', - transitionDuration: `${tokens.durationUltraSlow}, ${tokens.durationSlower}`, - transitionTimingFunction: `${tokens.curveEasyEaseMax}, ${tokens.curveLinear}`, - - '@media screen and (prefers-reduced-motion: reduce)': { - transitionDuration: '0.01ms', - }, - }, }, ring: { - '::before': { - ...shorthands.borderStyle('solid'), - }, + // Show the ::before pseudo-element, which is the ring + '::before': { content: '""' }, + }, + ringBadgeCutout: { + '::before': { maskImage: badgeMask(/*margin =*/ `2 * var(${vars.ringWidth})`) }, }, ringThick: { - '::before': { - ...shorthands.margin(`calc(-2 * ${tokens.strokeWidthThick})`), - ...shorthands.borderWidth(tokens.strokeWidthThick), - }, + [vars.ringWidth]: tokens.strokeWidthThick, }, ringThicker: { - '::before': { - ...shorthands.margin(`calc(-2 * ${tokens.strokeWidthThicker})`), - ...shorthands.borderWidth(tokens.strokeWidthThicker), - }, + [vars.ringWidth]: tokens.strokeWidthThicker, }, ringThickest: { - '::before': { - ...shorthands.margin(`calc(-2 * ${tokens.strokeWidthThickest})`), - ...shorthands.borderWidth(tokens.strokeWidthThickest), - }, + [vars.ringWidth]: tokens.strokeWidthThickest, }, - shadow4: { '::before': { boxShadow: tokens.shadow4 } }, - shadow8: { '::before': { boxShadow: tokens.shadow8 } }, - shadow16: { '::before': { boxShadow: tokens.shadow16 } }, - shadow28: { '::before': { boxShadow: tokens.shadow28 } }, + shadow: { + // Show the ::after pseudo-element, which is the shadow + '::after': { content: '""' }, + }, + shadow4: { + '::after': { boxShadow: tokens.shadow4 }, + }, + shadow8: { + '::after': { boxShadow: tokens.shadow8 }, + }, + shadow16: { + '::after': { boxShadow: tokens.shadow16 }, + }, + shadow28: { + '::after': { boxShadow: tokens.shadow28 }, + }, inactive: { opacity: '0.8', transform: 'scale(0.875)', transitionTimingFunction: `${tokens.curveDecelerateMin}, ${tokens.curveLinear}`, - '::before': { + '::before,::after': { ...shorthands.margin(0), opacity: 0, transitionTimingFunction: `${tokens.curveDecelerateMin}, ${tokens.curveLinear}`, }, }, + // Applied to the badge slot badge: { position: 'absolute', bottom: 0, right: 0, - boxShadow: `0 0 0 ${tokens.strokeWidthThin} ${tokens.colorNeutralBackground1}`, }, - badgeLarge: { - boxShadow: `0 0 0 ${tokens.strokeWidthThick} ${tokens.colorNeutralBackground1}`, + // Applied to the image, initials, or icon slot when there is a badge + badgeCutout: { + maskImage: badgeMask(), + }, + + // Applied to the root when there is a badge + badgeAlign: { + // Griffel won't auto-flip the "right" alignment to "left" in RTL if it is inline in the maskImage, + // so split it out into a css variable that will auto-flip. + [vars.badgeAlign]: 'right', + }, + + // Badge size: applied to root when there is a badge + tiny: { + [vars.badgeRadius]: '3px', + [vars.badgeGap]: tokens.strokeWidthThin, + }, + 'extra-small': { + [vars.badgeRadius]: '5px', + [vars.badgeGap]: tokens.strokeWidthThin, + }, + small: { + [vars.badgeRadius]: '6px', + [vars.badgeGap]: tokens.strokeWidthThin, + }, + medium: { + [vars.badgeRadius]: '8px', + [vars.badgeGap]: tokens.strokeWidthThin, + }, + large: { + [vars.badgeRadius]: '10px', + [vars.badgeGap]: tokens.strokeWidthThick, + }, + 'extra-large': { + [vars.badgeRadius]: '14px', + [vars.badgeGap]: tokens.strokeWidthThick, }, icon12: { fontSize: '12px' }, @@ -186,162 +259,228 @@ const useColorStyles = makeStyles({ neutral: { color: tokens.colorNeutralForeground3, backgroundColor: tokens.colorNeutralBackground6, - // The ::before element is the ring when active - '::before': { color: tokens.colorBrandStroke1 }, }, brand: { color: tokens.colorNeutralForegroundStaticInverted, backgroundColor: tokens.colorBrandBackgroundStatic, - '::before': { color: tokens.colorBrandStroke1 }, }, 'dark-red': { color: tokens.colorPaletteDarkRedForeground2, backgroundColor: tokens.colorPaletteDarkRedBackground2, - '::before': { color: tokens.colorPaletteDarkRedBorderActive }, }, cranberry: { color: tokens.colorPaletteCranberryForeground2, backgroundColor: tokens.colorPaletteCranberryBackground2, - '::before': { color: tokens.colorPaletteCranberryBorderActive }, }, red: { color: tokens.colorPaletteRedForeground2, backgroundColor: tokens.colorPaletteRedBackground2, - '::before': { color: tokens.colorPaletteRedBorderActive }, }, pumpkin: { color: tokens.colorPalettePumpkinForeground2, backgroundColor: tokens.colorPalettePumpkinBackground2, - '::before': { color: tokens.colorPalettePumpkinBorderActive }, }, peach: { color: tokens.colorPalettePeachForeground2, backgroundColor: tokens.colorPalettePeachBackground2, - '::before': { color: tokens.colorPalettePeachBorderActive }, }, marigold: { color: tokens.colorPaletteMarigoldForeground2, backgroundColor: tokens.colorPaletteMarigoldBackground2, - '::before': { color: tokens.colorPaletteMarigoldBorderActive }, }, gold: { color: tokens.colorPaletteGoldForeground2, backgroundColor: tokens.colorPaletteGoldBackground2, - '::before': { color: tokens.colorPaletteGoldBorderActive }, }, brass: { color: tokens.colorPaletteBrassForeground2, backgroundColor: tokens.colorPaletteBrassBackground2, - '::before': { color: tokens.colorPaletteBrassBorderActive }, }, brown: { color: tokens.colorPaletteBrownForeground2, backgroundColor: tokens.colorPaletteBrownBackground2, - '::before': { color: tokens.colorPaletteBrownBorderActive }, }, forest: { color: tokens.colorPaletteForestForeground2, backgroundColor: tokens.colorPaletteForestBackground2, - '::before': { color: tokens.colorPaletteForestBorderActive }, }, seafoam: { color: tokens.colorPaletteSeafoamForeground2, backgroundColor: tokens.colorPaletteSeafoamBackground2, - '::before': { color: tokens.colorPaletteSeafoamBorderActive }, }, 'dark-green': { color: tokens.colorPaletteDarkGreenForeground2, backgroundColor: tokens.colorPaletteDarkGreenBackground2, - '::before': { color: tokens.colorPaletteDarkGreenBorderActive }, }, 'light-teal': { color: tokens.colorPaletteLightTealForeground2, backgroundColor: tokens.colorPaletteLightTealBackground2, - '::before': { color: tokens.colorPaletteLightTealBorderActive }, }, teal: { color: tokens.colorPaletteTealForeground2, backgroundColor: tokens.colorPaletteTealBackground2, - '::before': { color: tokens.colorPaletteTealBorderActive }, }, steel: { color: tokens.colorPaletteSteelForeground2, backgroundColor: tokens.colorPaletteSteelBackground2, - '::before': { color: tokens.colorPaletteSteelBorderActive }, }, blue: { color: tokens.colorPaletteBlueForeground2, backgroundColor: tokens.colorPaletteBlueBackground2, - '::before': { color: tokens.colorPaletteBlueBorderActive }, }, 'royal-blue': { color: tokens.colorPaletteRoyalBlueForeground2, backgroundColor: tokens.colorPaletteRoyalBlueBackground2, - '::before': { color: tokens.colorPaletteRoyalBlueBorderActive }, }, cornflower: { color: tokens.colorPaletteCornflowerForeground2, backgroundColor: tokens.colorPaletteCornflowerBackground2, - '::before': { color: tokens.colorPaletteCornflowerBorderActive }, }, navy: { color: tokens.colorPaletteNavyForeground2, backgroundColor: tokens.colorPaletteNavyBackground2, - '::before': { color: tokens.colorPaletteNavyBorderActive }, }, lavender: { color: tokens.colorPaletteLavenderForeground2, backgroundColor: tokens.colorPaletteLavenderBackground2, - '::before': { color: tokens.colorPaletteLavenderBorderActive }, }, purple: { color: tokens.colorPalettePurpleForeground2, backgroundColor: tokens.colorPalettePurpleBackground2, - '::before': { color: tokens.colorPalettePurpleBorderActive }, }, grape: { color: tokens.colorPaletteGrapeForeground2, backgroundColor: tokens.colorPaletteGrapeBackground2, - '::before': { color: tokens.colorPaletteGrapeBorderActive }, }, lilac: { color: tokens.colorPaletteLilacForeground2, backgroundColor: tokens.colorPaletteLilacBackground2, - '::before': { color: tokens.colorPaletteLilacBorderActive }, }, pink: { color: tokens.colorPalettePinkForeground2, backgroundColor: tokens.colorPalettePinkBackground2, - '::before': { color: tokens.colorPalettePinkBorderActive }, }, magenta: { color: tokens.colorPaletteMagentaForeground2, backgroundColor: tokens.colorPaletteMagentaBackground2, - '::before': { color: tokens.colorPaletteMagentaBorderActive }, }, plum: { color: tokens.colorPalettePlumForeground2, backgroundColor: tokens.colorPalettePlumBackground2, - '::before': { color: tokens.colorPalettePlumBorderActive }, }, beige: { color: tokens.colorPaletteBeigeForeground2, backgroundColor: tokens.colorPaletteBeigeBackground2, - '::before': { color: tokens.colorPaletteBeigeBorderActive }, }, mink: { color: tokens.colorPaletteMinkForeground2, backgroundColor: tokens.colorPaletteMinkBackground2, - '::before': { color: tokens.colorPaletteMinkBorderActive }, }, platinum: { color: tokens.colorPalettePlatinumForeground2, backgroundColor: tokens.colorPalettePlatinumBackground2, - '::before': { color: tokens.colorPalettePlatinumBorderActive }, }, anchor: { color: tokens.colorPaletteAnchorForeground2, backgroundColor: tokens.colorPaletteAnchorBackground2, + }, +}); + +const useRingColorStyles = makeStyles({ + neutral: { + '::before': { color: tokens.colorBrandStroke1 }, + }, + brand: { + '::before': { color: tokens.colorBrandStroke1 }, + }, + 'dark-red': { + '::before': { color: tokens.colorPaletteDarkRedBorderActive }, + }, + cranberry: { + '::before': { color: tokens.colorPaletteCranberryBorderActive }, + }, + red: { + '::before': { color: tokens.colorPaletteRedBorderActive }, + }, + pumpkin: { + '::before': { color: tokens.colorPalettePumpkinBorderActive }, + }, + peach: { + '::before': { color: tokens.colorPalettePeachBorderActive }, + }, + marigold: { + '::before': { color: tokens.colorPaletteMarigoldBorderActive }, + }, + gold: { + '::before': { color: tokens.colorPaletteGoldBorderActive }, + }, + brass: { + '::before': { color: tokens.colorPaletteBrassBorderActive }, + }, + brown: { + '::before': { color: tokens.colorPaletteBrownBorderActive }, + }, + forest: { + '::before': { color: tokens.colorPaletteForestBorderActive }, + }, + seafoam: { + '::before': { color: tokens.colorPaletteSeafoamBorderActive }, + }, + 'dark-green': { + '::before': { color: tokens.colorPaletteDarkGreenBorderActive }, + }, + 'light-teal': { + '::before': { color: tokens.colorPaletteLightTealBorderActive }, + }, + teal: { + '::before': { color: tokens.colorPaletteTealBorderActive }, + }, + steel: { + '::before': { color: tokens.colorPaletteSteelBorderActive }, + }, + blue: { + '::before': { color: tokens.colorPaletteBlueBorderActive }, + }, + 'royal-blue': { + '::before': { color: tokens.colorPaletteRoyalBlueBorderActive }, + }, + cornflower: { + '::before': { color: tokens.colorPaletteCornflowerBorderActive }, + }, + navy: { + '::before': { color: tokens.colorPaletteNavyBorderActive }, + }, + lavender: { + '::before': { color: tokens.colorPaletteLavenderBorderActive }, + }, + purple: { + '::before': { color: tokens.colorPalettePurpleBorderActive }, + }, + grape: { + '::before': { color: tokens.colorPaletteGrapeBorderActive }, + }, + lilac: { + '::before': { color: tokens.colorPaletteLilacBorderActive }, + }, + pink: { + '::before': { color: tokens.colorPalettePinkBorderActive }, + }, + magenta: { + '::before': { color: tokens.colorPaletteMagentaBorderActive }, + }, + plum: { + '::before': { color: tokens.colorPalettePlumBorderActive }, + }, + beige: { + '::before': { color: tokens.colorPaletteBeigeBorderActive }, + }, + mink: { + '::before': { color: tokens.colorPaletteMinkBorderActive }, + }, + platinum: { + '::before': { color: tokens.colorPalettePlatinumBorderActive }, + }, + anchor: { '::before': { color: tokens.colorPaletteAnchorBorderActive }, }, }); @@ -355,8 +494,13 @@ export const useAvatarStyles_unstable = (state: AvatarState): AvatarState => { const styles = useStyles(); const sizeStyles = useSizeStyles(); const colorStyles = useColorStyles(); + const ringColorStyles = useRingColorStyles(); + + const rootClasses = [rootClassName, size !== 32 && sizeStyles[size]]; - const rootClasses = [rootClassName, size !== 32 && sizeStyles[size], colorStyles[color]]; + if (state.badge) { + rootClasses.push(styles.badgeAlign, styles[state.badge.size || 'medium']); + } if (size <= 24) { rootClasses.push(styles.textCaption2Strong); @@ -388,7 +532,10 @@ export const useAvatarStyles_unstable = (state: AvatarState): AvatarState => { rootClasses.push(styles.activeOrInactive); if (activeAppearance === 'ring' || activeAppearance === 'ring-shadow') { - rootClasses.push(styles.ring); + rootClasses.push(styles.ring, ringColorStyles[color]); + if (state.badge) { + rootClasses.push(styles.ringBadgeCutout); + } if (size <= 48) { rootClasses.push(styles.ringThick); @@ -400,6 +547,7 @@ export const useAvatarStyles_unstable = (state: AvatarState): AvatarState => { } if (activeAppearance === 'shadow' || activeAppearance === 'ring-shadow') { + rootClasses.push(styles.shadow); if (size <= 28) { rootClasses.push(styles.shadow4); } else if (size <= 48) { @@ -420,20 +568,27 @@ export const useAvatarStyles_unstable = (state: AvatarState): AvatarState => { state.root.className = mergeClasses(avatarClassNames.root, ...rootClasses, state.root.className); if (state.badge) { - state.badge.className = mergeClasses( - avatarClassNames.badge, - styles.badge, - size >= 64 && styles.badgeLarge, - state.badge.className, - ); + state.badge.className = mergeClasses(avatarClassNames.badge, styles.badge, state.badge.className); } if (state.image) { - state.image.className = mergeClasses(avatarClassNames.image, imageClassName, state.image.className); + state.image.className = mergeClasses( + avatarClassNames.image, + imageClassName, + colorStyles[color], + state.badge && styles.badgeCutout, + state.image.className, + ); } if (state.initials) { - state.initials.className = mergeClasses(avatarClassNames.initials, iconInitialsClassName, state.initials.className); + state.initials.className = mergeClasses( + avatarClassNames.initials, + iconInitialsClassName, + colorStyles[color], + state.badge && styles.badgeCutout, + state.initials.className, + ); } if (state.icon) { @@ -458,6 +613,8 @@ export const useAvatarStyles_unstable = (state: AvatarState): AvatarState => { avatarClassNames.icon, iconInitialsClassName, iconSizeClass, + colorStyles[color], + state.badge && styles.badgeCutout, state.icon.className, ); } diff --git a/packages/react-components/react-avatar/src/components/AvatarGroup/AvatarGroup.tsx b/packages/react-components/react-avatar/src/components/AvatarGroup/AvatarGroup.tsx index 6749474de179fd..9b16cf4ee0e5ee 100644 --- a/packages/react-components/react-avatar/src/components/AvatarGroup/AvatarGroup.tsx +++ b/packages/react-components/react-avatar/src/components/AvatarGroup/AvatarGroup.tsx @@ -2,8 +2,8 @@ import * as React from 'react'; import { renderAvatarGroup_unstable } from './renderAvatarGroup'; import { useAvatarGroup_unstable } from './useAvatarGroup'; import { useAvatarGroupContextValues } from './useAvatarGroupContextValues'; -import { useCustomStyleHooks_unstable } from '@fluentui/react-shared-contexts'; -import { useAvatarGroupStyles_unstable } from './useAvatarGroupStyles'; +import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts'; +import { useAvatarGroupStyles_unstable } from './useAvatarGroupStyles.styles'; import type { AvatarGroupProps } from './AvatarGroup.types'; import type { ForwardRefComponent } from '@fluentui/react-utilities'; @@ -17,8 +17,7 @@ export const AvatarGroup: ForwardRefComponent = React.forwardR useAvatarGroupStyles_unstable(state); - const { useAvatarGroupStyles_unstable: useCustomStyles } = useCustomStyleHooks_unstable(); - useCustomStyles(state); + useCustomStyleHook_unstable('useAvatarGroupStyles_unstable')(state); return renderAvatarGroup_unstable(state, contextValues); }); diff --git a/packages/react-components/react-avatar/src/components/AvatarGroup/index.ts b/packages/react-components/react-avatar/src/components/AvatarGroup/index.ts index fcd3bb96e2b6b6..95618fcc1b7d34 100644 --- a/packages/react-components/react-avatar/src/components/AvatarGroup/index.ts +++ b/packages/react-components/react-avatar/src/components/AvatarGroup/index.ts @@ -2,5 +2,5 @@ export * from './AvatarGroup'; export * from './AvatarGroup.types'; export * from './renderAvatarGroup'; export * from './useAvatarGroup'; -export * from './useAvatarGroupStyles'; +export * from './useAvatarGroupStyles.styles'; export * from './useAvatarGroupContextValues'; diff --git a/packages/react-components/react-avatar/src/components/AvatarGroup/renderAvatarGroup.tsx b/packages/react-components/react-avatar/src/components/AvatarGroup/renderAvatarGroup.tsx index 991278293efcec..c5937f7e5c7db3 100644 --- a/packages/react-components/react-avatar/src/components/AvatarGroup/renderAvatarGroup.tsx +++ b/packages/react-components/react-avatar/src/components/AvatarGroup/renderAvatarGroup.tsx @@ -1,5 +1,9 @@ -import * as React from 'react'; -import { getSlots } from '@fluentui/react-utilities'; +/** @jsxRuntime classic */ +/** @jsx createElement */ + +import { createElement } from '@fluentui/react-jsx-runtime'; + +import { getSlotsNext } from '@fluentui/react-utilities'; import { AvatarGroupProvider } from '../../contexts/AvatarGroupContext'; import type { AvatarGroupState, AvatarGroupSlots, AvatarGroupContextValues } from './AvatarGroup.types'; @@ -7,7 +11,7 @@ import type { AvatarGroupState, AvatarGroupSlots, AvatarGroupContextValues } fro * Render the final JSX of AvatarGroup */ export const renderAvatarGroup_unstable = (state: AvatarGroupState, contextValues: AvatarGroupContextValues) => { - const { slots, slotProps } = getSlots(state); + const { slots, slotProps } = getSlotsNext(state); return ( diff --git a/packages/react-components/react-avatar/src/components/AvatarGroup/useAvatarGroupStyles.ts b/packages/react-components/react-avatar/src/components/AvatarGroup/useAvatarGroupStyles.styles.ts similarity index 94% rename from packages/react-components/react-avatar/src/components/AvatarGroup/useAvatarGroupStyles.ts rename to packages/react-components/react-avatar/src/components/AvatarGroup/useAvatarGroupStyles.styles.ts index 919771c27e4db5..f718af7676bfd4 100644 --- a/packages/react-components/react-avatar/src/components/AvatarGroup/useAvatarGroupStyles.ts +++ b/packages/react-components/react-avatar/src/components/AvatarGroup/useAvatarGroupStyles.styles.ts @@ -1,6 +1,6 @@ import { makeStyles, mergeClasses } from '@griffel/react'; import { tokens } from '@fluentui/react-theme'; -import { useSizeStyles } from '../Avatar/useAvatarStyles'; +import { useSizeStyles } from '../Avatar/useAvatarStyles.styles'; import type { AvatarGroupSlots, AvatarGroupState } from './AvatarGroup.types'; import type { SlotClassNames } from '@fluentui/react-utilities'; diff --git a/packages/react-components/react-avatar/src/components/AvatarGroupItem/AvatarGroupItem.tsx b/packages/react-components/react-avatar/src/components/AvatarGroupItem/AvatarGroupItem.tsx index 5b726da4ba642d..94a54c94e722a9 100644 --- a/packages/react-components/react-avatar/src/components/AvatarGroupItem/AvatarGroupItem.tsx +++ b/packages/react-components/react-avatar/src/components/AvatarGroupItem/AvatarGroupItem.tsx @@ -1,8 +1,8 @@ import * as React from 'react'; import { renderAvatarGroupItem_unstable } from './renderAvatarGroupItem'; import { useAvatarGroupItem_unstable } from './useAvatarGroupItem'; -import { useCustomStyleHooks_unstable } from '@fluentui/react-shared-contexts'; -import { useAvatarGroupItemStyles_unstable } from './useAvatarGroupItemStyles'; +import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts'; +import { useAvatarGroupItemStyles_unstable } from './useAvatarGroupItemStyles.styles'; import type { AvatarGroupItemProps } from './AvatarGroupItem.types'; import type { ForwardRefComponent } from '@fluentui/react-utilities'; @@ -15,8 +15,7 @@ export const AvatarGroupItem: ForwardRefComponent = React. useAvatarGroupItemStyles_unstable(state); - const { useAvatarGroupItemStyles_unstable: useCustomStyles } = useCustomStyleHooks_unstable(); - useCustomStyles(state); + useCustomStyleHook_unstable('useAvatarGroupItemStyles_unstable')(state); return renderAvatarGroupItem_unstable(state); }); diff --git a/packages/react-components/react-avatar/src/components/AvatarGroupItem/index.ts b/packages/react-components/react-avatar/src/components/AvatarGroupItem/index.ts index c120de3fe011ed..9e10c244cc7acd 100644 --- a/packages/react-components/react-avatar/src/components/AvatarGroupItem/index.ts +++ b/packages/react-components/react-avatar/src/components/AvatarGroupItem/index.ts @@ -2,4 +2,4 @@ export * from './AvatarGroupItem'; export * from './AvatarGroupItem.types'; export * from './renderAvatarGroupItem'; export * from './useAvatarGroupItem'; -export * from './useAvatarGroupItemStyles'; +export * from './useAvatarGroupItemStyles.styles'; diff --git a/packages/react-components/react-avatar/src/components/AvatarGroupItem/renderAvatarGroupItem.tsx b/packages/react-components/react-avatar/src/components/AvatarGroupItem/renderAvatarGroupItem.tsx index 6b8fac77d0ae91..fe27c39ad144bc 100644 --- a/packages/react-components/react-avatar/src/components/AvatarGroupItem/renderAvatarGroupItem.tsx +++ b/packages/react-components/react-avatar/src/components/AvatarGroupItem/renderAvatarGroupItem.tsx @@ -1,12 +1,16 @@ -import * as React from 'react'; -import { getSlots } from '@fluentui/react-utilities'; +/** @jsxRuntime classic */ +/** @jsx createElement */ + +import { createElement } from '@fluentui/react-jsx-runtime'; + +import { getSlotsNext } from '@fluentui/react-utilities'; import type { AvatarGroupItemState, AvatarGroupItemSlots } from './AvatarGroupItem.types'; /** * Render the final JSX of AvatarGroupItem */ export const renderAvatarGroupItem_unstable = (state: AvatarGroupItemState) => { - const { slots, slotProps } = getSlots(state); + const { slots, slotProps } = getSlotsNext(state); return ( diff --git a/packages/react-components/react-avatar/src/components/AvatarGroupItem/useAvatarGroupItemStyles.ts b/packages/react-components/react-avatar/src/components/AvatarGroupItem/useAvatarGroupItemStyles.styles.ts similarity index 100% rename from packages/react-components/react-avatar/src/components/AvatarGroupItem/useAvatarGroupItemStyles.ts rename to packages/react-components/react-avatar/src/components/AvatarGroupItem/useAvatarGroupItemStyles.styles.ts diff --git a/packages/react-components/react-avatar/src/components/AvatarGroupPopover/AvatarGroupPopover.test.tsx b/packages/react-components/react-avatar/src/components/AvatarGroupPopover/AvatarGroupPopover.test.tsx index 003ae62a5c3a11..ddec3ad5a3ca72 100644 --- a/packages/react-components/react-avatar/src/components/AvatarGroupPopover/AvatarGroupPopover.test.tsx +++ b/packages/react-components/react-avatar/src/components/AvatarGroupPopover/AvatarGroupPopover.test.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import { AvatarGroupItem } from '../AvatarGroupItem/AvatarGroupItem'; import { AvatarGroupPopover } from './AvatarGroupPopover'; -import { avatarGroupPopoverClassNames } from './useAvatarGroupPopoverStyles'; +import { avatarGroupPopoverClassNames } from './useAvatarGroupPopoverStyles.styles'; import { isConformant } from '../../testing/isConformant'; import { render, RenderResult, screen } from '@testing-library/react'; diff --git a/packages/react-components/react-avatar/src/components/AvatarGroupPopover/AvatarGroupPopover.tsx b/packages/react-components/react-avatar/src/components/AvatarGroupPopover/AvatarGroupPopover.tsx index 45fe10e600e553..27d2af261736f1 100644 --- a/packages/react-components/react-avatar/src/components/AvatarGroupPopover/AvatarGroupPopover.tsx +++ b/packages/react-components/react-avatar/src/components/AvatarGroupPopover/AvatarGroupPopover.tsx @@ -1,9 +1,9 @@ import * as React from 'react'; import { renderAvatarGroupPopover_unstable } from './renderAvatarGroupPopover'; import { useAvatarGroupPopoverContextValues } from './useAvatarGroupPopoverContextValues'; -import { useCustomStyleHooks_unstable } from '@fluentui/react-shared-contexts'; +import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts'; import { useAvatarGroupPopover_unstable } from './useAvatarGroupPopover'; -import { useAvatarGroupPopoverStyles_unstable } from './useAvatarGroupPopoverStyles'; +import { useAvatarGroupPopoverStyles_unstable } from './useAvatarGroupPopoverStyles.styles'; import type { AvatarGroupPopoverProps } from './AvatarGroupPopover.types'; /** @@ -15,8 +15,7 @@ export const AvatarGroupPopover: React.FC = props => { useAvatarGroupPopoverStyles_unstable(state); - const { useAvatarGroupPopoverStyles_unstable: useCustomStyles } = useCustomStyleHooks_unstable(); - useCustomStyles(state); + useCustomStyleHook_unstable('useAvatarGroupPopoverStyles_unstable')(state); return renderAvatarGroupPopover_unstable(state, contextValues); }; diff --git a/packages/react-components/react-avatar/src/components/AvatarGroupPopover/index.ts b/packages/react-components/react-avatar/src/components/AvatarGroupPopover/index.ts index 16cc71a50aa56d..272834b2b801dc 100644 --- a/packages/react-components/react-avatar/src/components/AvatarGroupPopover/index.ts +++ b/packages/react-components/react-avatar/src/components/AvatarGroupPopover/index.ts @@ -2,4 +2,4 @@ export * from './AvatarGroupPopover'; export * from './AvatarGroupPopover.types'; export * from './renderAvatarGroupPopover'; export * from './useAvatarGroupPopover'; -export * from './useAvatarGroupPopoverStyles'; +export * from './useAvatarGroupPopoverStyles.styles'; diff --git a/packages/react-components/react-avatar/src/components/AvatarGroupPopover/renderAvatarGroupPopover.tsx b/packages/react-components/react-avatar/src/components/AvatarGroupPopover/renderAvatarGroupPopover.tsx index 3cc5008e14d8ea..4d14b7aa161332 100644 --- a/packages/react-components/react-avatar/src/components/AvatarGroupPopover/renderAvatarGroupPopover.tsx +++ b/packages/react-components/react-avatar/src/components/AvatarGroupPopover/renderAvatarGroupPopover.tsx @@ -1,7 +1,11 @@ -import * as React from 'react'; +/** @jsxRuntime classic */ +/** @jsx createElement */ + +import { createElement } from '@fluentui/react-jsx-runtime'; import { AvatarGroupProvider } from '../../contexts/AvatarGroupContext'; import { AvatarGroupContextValues } from '../AvatarGroup/AvatarGroup.types'; -import { getSlots } from '@fluentui/react-utilities'; + +import { getSlotsNext } from '@fluentui/react-utilities'; import { PopoverProps, PopoverTrigger } from '@fluentui/react-popover'; import { TooltipProps } from '@fluentui/react-tooltip'; import type { AvatarGroupPopoverState, AvatarGroupPopoverSlots } from './AvatarGroupPopover.types'; @@ -13,7 +17,7 @@ export const renderAvatarGroupPopover_unstable = ( state: AvatarGroupPopoverState, contextValues: AvatarGroupContextValues, ) => { - const { slots, slotProps } = getSlots(state); + const { slots, slotProps } = getSlotsNext(state); return ( diff --git a/packages/react-components/react-avatar/src/components/AvatarGroupPopover/useAvatarGroupPopoverStyles.ts b/packages/react-components/react-avatar/src/components/AvatarGroupPopover/useAvatarGroupPopoverStyles.styles.ts similarity index 98% rename from packages/react-components/react-avatar/src/components/AvatarGroupPopover/useAvatarGroupPopoverStyles.ts rename to packages/react-components/react-avatar/src/components/AvatarGroupPopover/useAvatarGroupPopoverStyles.styles.ts index 0350ad9c9dd5d8..e95178adad99e8 100644 --- a/packages/react-components/react-avatar/src/components/AvatarGroupPopover/useAvatarGroupPopoverStyles.ts +++ b/packages/react-components/react-avatar/src/components/AvatarGroupPopover/useAvatarGroupPopoverStyles.styles.ts @@ -1,8 +1,8 @@ import { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster'; import { makeStyles, mergeClasses, shorthands } from '@griffel/react'; import { tokens, typographyStyles } from '@fluentui/react-theme'; -import { useGroupChildClassName } from '../AvatarGroupItem/useAvatarGroupItemStyles'; -import { useSizeStyles } from '../Avatar/useAvatarStyles'; +import { useGroupChildClassName } from '../AvatarGroupItem/useAvatarGroupItemStyles.styles'; +import { useSizeStyles } from '../Avatar/useAvatarStyles.styles'; import type { AvatarGroupPopoverSlots, AvatarGroupPopoverState } from './AvatarGroupPopover.types'; import type { SlotClassNames } from '@fluentui/react-utilities'; diff --git a/packages/react-components/react-avatar/src/testing/isConformant.ts b/packages/react-components/react-avatar/src/testing/isConformant.ts index 183b694ab7ee30..d3e3e430022c85 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/.npmignore b/packages/react-components/react-badge/.npmignore index f7ce568a6dbf7c..26904cdfffc9bd 100644 --- a/packages/react-components/react-badge/.npmignore +++ b/packages/react-components/react-badge/.npmignore @@ -28,3 +28,9 @@ __tests__ .eslint* .git* .prettierignore + +# exclude gitignore patterns explicitly +!lib +!lib-commonjs +!lib-amd +!dist/*.d.ts diff --git a/packages/react-components/react-badge/CHANGELOG.json b/packages/react-components/react-badge/CHANGELOG.json index 092f69f395c6c5..6a1de06560d0f0 100644 --- a/packages/react-components/react-badge/CHANGELOG.json +++ b/packages/react-components/react-badge/CHANGELOG.json @@ -1,6 +1,27 @@ { "name": "@fluentui/react-badge", "entries": [ + { + "date": "Mon, 24 Apr 2023 08:12:32 GMT", + "tag": "@fluentui/react-badge_v9.1.10", + "version": "9.1.10", + "comments": { + "patch": [ + { + "author": "bernardo.sunderhus@gmail.com", + "package": "@fluentui/react-badge", + "commit": "477d9f6d64d777f857dedec6a71e58baa31fbe30", + "comment": "chore: adopt custom JSX pragma" + }, + { + "author": "beachball", + "package": "@fluentui/react-badge", + "comment": "Bump @fluentui/react-jsx-runtime to v9.0.0-alpha.2", + "commit": "505433ac64f144c9cca456097413d6af4582e5ee" + } + ] + } + }, { "date": "Mon, 17 Apr 2023 17:54:02 GMT", "tag": "@fluentui/react-badge_v9.1.9", diff --git a/packages/react-components/react-badge/CHANGELOG.md b/packages/react-components/react-badge/CHANGELOG.md index df2baabe9e2019..7b42d073066220 100644 --- a/packages/react-components/react-badge/CHANGELOG.md +++ b/packages/react-components/react-badge/CHANGELOG.md @@ -1,9 +1,19 @@ # Change Log - @fluentui/react-badge -This log was last generated on Mon, 17 Apr 2023 17:54:02 GMT and should not be manually modified. +This log was last generated on Mon, 24 Apr 2023 08:12:32 GMT and should not be manually modified. +## [9.1.10](https://github.com/microsoft/fluentui/tree/@fluentui/react-badge_v9.1.10) + +Mon, 24 Apr 2023 08:12:32 GMT +[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-badge_v9.1.9..@fluentui/react-badge_v9.1.10) + +### Patches + +- chore: adopt custom JSX pragma ([PR #27603](https://github.com/microsoft/fluentui/pull/27603) by bernardo.sunderhus@gmail.com) +- Bump @fluentui/react-jsx-runtime to v9.0.0-alpha.2 ([commit](https://github.com/microsoft/fluentui/commit/505433ac64f144c9cca456097413d6af4582e5ee) by beachball) + ## [9.1.9](https://github.com/microsoft/fluentui/tree/@fluentui/react-badge_v9.1.9) Mon, 17 Apr 2023 17:54:02 GMT diff --git a/packages/react-components/react-badge/jest.config.js b/packages/react-components/react-badge/jest.config.js index 2650ceafefa74e..c7a12e9171bd8e 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/package.json b/packages/react-components/react-badge/package.json index 92e18b56e91e1c..2082a9fd2bf966 100644 --- a/packages/react-components/react-badge/package.json +++ b/packages/react-components/react-badge/package.json @@ -1,6 +1,6 @@ { "name": "@fluentui/react-badge", - "version": "9.1.9", + "version": "9.1.10", "description": "React components for building web experiences", "main": "lib-commonjs/index.js", "module": "lib/index.js", @@ -33,6 +33,7 @@ }, "dependencies": { "@fluentui/react-icons": "^2.0.196", + "@fluentui/react-jsx-runtime": "9.0.0-alpha.2", "@fluentui/react-shared-contexts": "^9.3.3", "@fluentui/react-theme": "^9.1.7", "@fluentui/react-utilities": "^9.8.0", diff --git a/packages/react-components/react-badge/src/components/Badge/Badge.tsx b/packages/react-components/react-badge/src/components/Badge/Badge.tsx index 48d7f3bd96f8c1..30c3c6f84b6a81 100644 --- a/packages/react-components/react-badge/src/components/Badge/Badge.tsx +++ b/packages/react-components/react-badge/src/components/Badge/Badge.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import { useBadge_unstable } from './useBadge'; -import { useBadgeStyles_unstable } from './useBadgeStyles'; -import { useCustomStyleHooks_unstable } from '@fluentui/react-shared-contexts'; +import { useBadgeStyles_unstable } from './useBadgeStyles.styles'; +import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts'; import { renderBadge_unstable } from './renderBadge'; import type { BadgeProps } from './Badge.types'; import type { ForwardRefComponent } from '@fluentui/react-utilities'; @@ -14,8 +14,7 @@ export const Badge: ForwardRefComponent = React.forwardRef((props, r useBadgeStyles_unstable(state); - const { useBadgeStyles_unstable: useCustomStyles } = useCustomStyleHooks_unstable(); - useCustomStyles(state); + useCustomStyleHook_unstable('useBadgeStyles_unstable')(state); return renderBadge_unstable(state); }); diff --git a/packages/react-components/react-badge/src/components/Badge/index.ts b/packages/react-components/react-badge/src/components/Badge/index.ts index 91594e6ab5cee2..b74a9cefb773fb 100644 --- a/packages/react-components/react-badge/src/components/Badge/index.ts +++ b/packages/react-components/react-badge/src/components/Badge/index.ts @@ -3,4 +3,4 @@ export * from './Badge'; export type { BadgeProps, BadgeSlots, BadgeState } from './Badge.types'; export * from './renderBadge'; export * from './useBadge'; -export * from './useBadgeStyles'; +export * from './useBadgeStyles.styles'; diff --git a/packages/react-components/react-badge/src/components/Badge/renderBadge.tsx b/packages/react-components/react-badge/src/components/Badge/renderBadge.tsx index cae7c4e7c57cbc..5783fbb51bb67a 100644 --- a/packages/react-components/react-badge/src/components/Badge/renderBadge.tsx +++ b/packages/react-components/react-badge/src/components/Badge/renderBadge.tsx @@ -1,9 +1,13 @@ -import * as React from 'react'; -import { getSlots } from '@fluentui/react-utilities'; +/** @jsxRuntime classic */ +/** @jsx createElement */ + +import { createElement } from '@fluentui/react-jsx-runtime'; + +import { getSlotsNext } from '@fluentui/react-utilities'; import type { BadgeState, BadgeSlots } from './Badge.types'; export const renderBadge_unstable = (state: BadgeState) => { - const { slots, slotProps } = getSlots(state); + const { slots, slotProps } = getSlotsNext(state); return ( diff --git a/packages/react-components/react-badge/src/components/Badge/useBadgeStyles.ts b/packages/react-components/react-badge/src/components/Badge/useBadgeStyles.styles.ts similarity index 100% rename from packages/react-components/react-badge/src/components/Badge/useBadgeStyles.ts rename to packages/react-components/react-badge/src/components/Badge/useBadgeStyles.styles.ts diff --git a/packages/react-components/react-badge/src/components/CounterBadge/CounterBadge.tsx b/packages/react-components/react-badge/src/components/CounterBadge/CounterBadge.tsx index a858c04623105d..5f6c9416d2cf4e 100644 --- a/packages/react-components/react-badge/src/components/CounterBadge/CounterBadge.tsx +++ b/packages/react-components/react-badge/src/components/CounterBadge/CounterBadge.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import { useCounterBadge_unstable } from './useCounterBadge'; -import { useCounterBadgeStyles_unstable } from './useCounterBadgeStyles'; -import { useCustomStyleHooks_unstable } from '@fluentui/react-shared-contexts'; +import { useCounterBadgeStyles_unstable } from './useCounterBadgeStyles.styles'; +import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts'; import { renderBadge_unstable } from '../Badge/index'; import type { CounterBadgeProps } from './CounterBadge.types'; import type { ForwardRefComponent } from '@fluentui/react-utilities'; @@ -14,8 +14,7 @@ export const CounterBadge: ForwardRefComponent = React.forwar useCounterBadgeStyles_unstable(state); - const { useCounterBadgeStyles_unstable: useCustomStyles } = useCustomStyleHooks_unstable(); - useCustomStyles(state); + useCustomStyleHook_unstable('useCounterBadgeStyles_unstable')(state); return renderBadge_unstable(state); }); diff --git a/packages/react-components/react-badge/src/components/CounterBadge/index.ts b/packages/react-components/react-badge/src/components/CounterBadge/index.ts index db71e455affdb7..2534ccd5622dda 100644 --- a/packages/react-components/react-badge/src/components/CounterBadge/index.ts +++ b/packages/react-components/react-badge/src/components/CounterBadge/index.ts @@ -1,4 +1,4 @@ export * from './CounterBadge'; export * from './CounterBadge.types'; export * from './useCounterBadge'; -export * from './useCounterBadgeStyles'; +export * from './useCounterBadgeStyles.styles'; diff --git a/packages/react-components/react-badge/src/components/CounterBadge/useCounterBadgeStyles.ts b/packages/react-components/react-badge/src/components/CounterBadge/useCounterBadgeStyles.styles.ts similarity index 99% rename from packages/react-components/react-badge/src/components/CounterBadge/useCounterBadgeStyles.ts rename to packages/react-components/react-badge/src/components/CounterBadge/useCounterBadgeStyles.styles.ts index e9188d3433e64a..7cb8a987d9f804 100644 --- a/packages/react-components/react-badge/src/components/CounterBadge/useCounterBadgeStyles.ts +++ b/packages/react-components/react-badge/src/components/CounterBadge/useCounterBadgeStyles.styles.ts @@ -1,5 +1,5 @@ import { shorthands, mergeClasses, makeStyles } from '@griffel/react'; -import { useBadgeStyles_unstable } from '../Badge/useBadgeStyles'; +import { useBadgeStyles_unstable } from '../Badge/useBadgeStyles.styles'; import type { SlotClassNames } from '@fluentui/react-utilities'; import type { BadgeSlots } from '../Badge/Badge.types'; import type { CounterBadgeState } from './CounterBadge.types'; diff --git a/packages/react-components/react-badge/src/components/PresenceBadge/PresenceBadge.tsx b/packages/react-components/react-badge/src/components/PresenceBadge/PresenceBadge.tsx index 137950ee85b09c..78218b570024e9 100644 --- a/packages/react-components/react-badge/src/components/PresenceBadge/PresenceBadge.tsx +++ b/packages/react-components/react-badge/src/components/PresenceBadge/PresenceBadge.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import { usePresenceBadge_unstable } from './usePresenceBadge'; -import { usePresenceBadgeStyles_unstable } from './usePresenceBadgeStyles'; -import { useCustomStyleHooks_unstable } from '@fluentui/react-shared-contexts'; +import { usePresenceBadgeStyles_unstable } from './usePresenceBadgeStyles.styles'; +import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts'; import { renderBadge_unstable } from '../../Badge'; import type { PresenceBadgeProps } from './PresenceBadge.types'; import type { ForwardRefComponent } from '@fluentui/react-utilities'; @@ -14,8 +14,7 @@ export const PresenceBadge: ForwardRefComponent = React.forw usePresenceBadgeStyles_unstable(state); - const { usePresenceBadgeStyles_unstable: useCustomStyles } = useCustomStyleHooks_unstable(); - useCustomStyles(state); + useCustomStyleHook_unstable('usePresenceBadgeStyles_unstable')(state); return renderBadge_unstable(state); }); diff --git a/packages/react-components/react-badge/src/components/PresenceBadge/index.ts b/packages/react-components/react-badge/src/components/PresenceBadge/index.ts index b76261edb855ee..704bb60868e687 100644 --- a/packages/react-components/react-badge/src/components/PresenceBadge/index.ts +++ b/packages/react-components/react-badge/src/components/PresenceBadge/index.ts @@ -1,4 +1,4 @@ export * from './PresenceBadge'; export * from './PresenceBadge.types'; export * from './usePresenceBadge'; -export * from './usePresenceBadgeStyles'; +export * from './usePresenceBadgeStyles.styles'; diff --git a/packages/react-components/react-badge/src/components/PresenceBadge/usePresenceBadgeStyles.ts b/packages/react-components/react-badge/src/components/PresenceBadge/usePresenceBadgeStyles.styles.ts similarity index 100% rename from packages/react-components/react-badge/src/components/PresenceBadge/usePresenceBadgeStyles.ts rename to packages/react-components/react-badge/src/components/PresenceBadge/usePresenceBadgeStyles.styles.ts diff --git a/packages/react-components/react-badge/src/testing/isConformant.ts b/packages/react-components/react-badge/src/testing/isConformant.ts index 183b694ab7ee30..d3e3e430022c85 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/.npmignore b/packages/react-components/react-breadcrumb/.npmignore index f7ce568a6dbf7c..26904cdfffc9bd 100644 --- a/packages/react-components/react-breadcrumb/.npmignore +++ b/packages/react-components/react-breadcrumb/.npmignore @@ -28,3 +28,9 @@ __tests__ .eslint* .git* .prettierignore + +# exclude gitignore patterns explicitly +!lib +!lib-commonjs +!lib-amd +!dist/*.d.ts diff --git a/packages/react-components/react-breadcrumb/etc/react-breadcrumb.api.md b/packages/react-components/react-breadcrumb/etc/react-breadcrumb.api.md index e9aa54106b689d..6c0af3279e104c 100644 --- a/packages/react-components/react-breadcrumb/etc/react-breadcrumb.api.md +++ b/packages/react-components/react-breadcrumb/etc/react-breadcrumb.api.md @@ -23,7 +23,7 @@ export const Breadcrumb: ForwardRefComponent; // @public export const BreadcrumbButton: ForwardRefComponent; -// @public (undocumented) +// @public export const breadcrumbButtonClassNames: SlotClassNames; // @public @@ -118,6 +118,23 @@ export type BreadcrumbSlots = { // @public export type BreadcrumbState = ComponentState & Required>; +// @public (undocumented) +export type PartitionBreadcrumbItems = { + startDisplayedItems: readonly T[]; + overflowItems?: readonly T[]; + endDisplayedItems?: readonly T[]; +}; + +// @public +export const partitionBreadcrumbItems: (options: PartitionBreadcrumbItemsOptions) => PartitionBreadcrumbItems; + +// @public (undocumented) +export type PartitionBreadcrumbItemsOptions = { + items: readonly T[]; + maxDisplayedItems?: number; + overflowIndex?: number; +}; + // @public export const renderBreadcrumb_unstable: (state: BreadcrumbState, contextValues: BreadcrumbContextValues) => JSX.Element; diff --git a/packages/react-components/react-breadcrumb/jest.config.js b/packages/react-components/react-breadcrumb/jest.config.js index e71124efdbbd7f..5c481895ec2ffd 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/package.json b/packages/react-components/react-breadcrumb/package.json index dd8724f7ec96a4..08ff3a4b943feb 100644 --- a/packages/react-components/react-breadcrumb/package.json +++ b/packages/react-components/react-breadcrumb/package.json @@ -32,12 +32,13 @@ "@fluentui/scripts-tasks": "*" }, "dependencies": { - "@fluentui/react-button": "^9.3.9", + "@fluentui/react-button": "^9.3.10", "@fluentui/react-icons": "^2.0.196", - "@fluentui/react-link": "^9.0.35", + "@fluentui/react-link": "^9.0.36", "@fluentui/react-shared-contexts": "^9.3.3", "@fluentui/react-theme": "^9.1.7", "@fluentui/react-utilities": "^9.8.0", + "@fluentui/react-jsx-runtime": "9.0.0-alpha.2", "@griffel/react": "^1.5.2", "@swc/helpers": "^0.4.14" }, 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 8e83671f149290..9555f5673305d8 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 c066b0fd3486b6..e35661576ed45b 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/renderBreadcrumb.tsx b/packages/react-components/react-breadcrumb/src/components/Breadcrumb/renderBreadcrumb.tsx index 85d2f540a79380..f05de6ba2ab3b4 100644 --- a/packages/react-components/react-breadcrumb/src/components/Breadcrumb/renderBreadcrumb.tsx +++ b/packages/react-components/react-breadcrumb/src/components/Breadcrumb/renderBreadcrumb.tsx @@ -1,12 +1,16 @@ -import * as React from 'react'; -import { getSlots } from '@fluentui/react-utilities'; +/** @jsxRuntime classic */ +/** @jsx createElement */ + +import { createElement } from '@fluentui/react-jsx-runtime'; + +import { getSlotsNext } from '@fluentui/react-utilities'; import { BreadcrumbProvider } from './BreadcrumbContext'; import type { BreadcrumbState, BreadcrumbSlots, BreadcrumbContextValues } from './Breadcrumb.types'; /** * Render the final JSX of Breadcrumb */ export const renderBreadcrumb_unstable = (state: BreadcrumbState, contextValues: BreadcrumbContextValues) => { - const { slots, slotProps } = getSlots(state); + const { slots, slotProps } = getSlotsNext(state); const { root, list } = slotProps; return ( 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 57% 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 index 961cf057a5c57b..9db5fc5b756ee4 100644 --- a/packages/react-components/react-breadcrumb/src/components/Breadcrumb/useBreadcrumbStyles.ts +++ b/packages/react-components/react-breadcrumb/src/components/Breadcrumb/useBreadcrumbStyles.styles.ts @@ -1,4 +1,4 @@ -import { makeStyles, mergeClasses } from '@griffel/react'; +import { makeResetStyles, mergeClasses } from '@griffel/react'; import type { BreadcrumbSlots, BreadcrumbState } from './Breadcrumb.types'; import type { SlotClassNames } from '@fluentui/react-utilities'; @@ -7,26 +7,22 @@ export const breadcrumbClassNames: SlotClassNames = { list: 'fui-Breadcrumb__list', }; -/** - * Styles for the root slot - */ -const useStyles = makeStyles({ - root: {}, - list: { - listStyleType: 'none', - display: 'flex', - alignItems: 'center', - }, +const useListClassName = makeResetStyles({ + listStyleType: 'none', + display: 'flex', + alignItems: 'center', + margin: 0, + padding: 0, }); /** * Apply styling to the Breadcrumb slots based on the state */ export const useBreadcrumbStyles_unstable = (state: BreadcrumbState): BreadcrumbState => { - const styles = useStyles(); - state.root.className = mergeClasses(breadcrumbClassNames.root, styles.root, state.root.className); + const listBaseClassName = useListClassName(); + state.root.className = mergeClasses(breadcrumbClassNames.root, state.root.className); if (state.list) { - state.list.className = mergeClasses(breadcrumbClassNames.list, styles.list, state.list.className); + state.list.className = mergeClasses(listBaseClassName, breadcrumbClassNames.list, state.list.className); } return state; }; 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 f8802fb6689216..aa9dabc8891a7e 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 5aacb6d6bfb866..55457e345642cc 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 b2eda0e214561b..d972283c4ee090 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 58% 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 index d677904f30a2e9..3a877265eccab8 100644 --- a/packages/react-components/react-breadcrumb/src/components/BreadcrumbButton/useBreadcrumbButtonStyles.ts +++ b/packages/react-components/react-breadcrumb/src/components/BreadcrumbButton/useBreadcrumbButtonStyles.styles.ts @@ -4,14 +4,22 @@ import type { SlotClassNames } from '@fluentui/react-utilities'; import { useButtonStyles_unstable } from '@fluentui/react-button'; import { tokens, typographyStyles } from '@fluentui/react-theme'; +/** + * Static CSS class names used internally for the component slots. + */ export const breadcrumbButtonClassNames: SlotClassNames = { root: 'fui-BreadcrumbButton', icon: 'fui-BreadcrumbButton__icon', }; /** - * Styles for the root slot + * CSS variable names used internally for styling in the Breadcrumb. */ +export const breadcrumbCSSVars = { + breadcrumbIconSizeVar: '--fui-Breadcrumb--icon-size', + breadcrumbIconLineHeightVar: '--fui-Breadcrumb--icon-line-height', +}; + const useStyles = makeStyles({ root: {}, small: { @@ -40,11 +48,33 @@ const useStyles = makeStyles({ }, }); +const useIconStyles = makeStyles({ + base: { + fontSize: `var(${breadcrumbCSSVars.breadcrumbIconSizeVar})`, + height: `var(${breadcrumbCSSVars.breadcrumbIconSizeVar})`, + lineHeight: `var(${breadcrumbCSSVars.breadcrumbIconLineHeightVar})`, + width: `var(${breadcrumbCSSVars.breadcrumbIconSizeVar})`, + }, + small: { + [breadcrumbCSSVars.breadcrumbIconSizeVar]: '12px', + [breadcrumbCSSVars.breadcrumbIconLineHeightVar]: tokens.lineHeightBase200, + }, + medium: { + [breadcrumbCSSVars.breadcrumbIconSizeVar]: '16px', + [breadcrumbCSSVars.breadcrumbIconLineHeightVar]: tokens.lineHeightBase400, + }, + large: { + [breadcrumbCSSVars.breadcrumbIconSizeVar]: '20px', + [breadcrumbCSSVars.breadcrumbIconLineHeightVar]: tokens.lineHeightBase600, + }, +}); /** * Apply styling to the BreadcrumbButton slots based on the state */ export const useBreadcrumbButtonStyles_unstable = (state: BreadcrumbButtonState): BreadcrumbButtonState => { const styles = useStyles(); + const iconStyles = useIconStyles(); + const currentSizeMap = { small: styles.currentSmall, medium: styles.currentMedium, @@ -58,6 +88,10 @@ export const useBreadcrumbButtonStyles_unstable = (state: BreadcrumbButtonState) state.root.className, ); + if (state.icon) { + state.icon.className = mergeClasses(iconStyles.base, iconStyles[state.size], state.icon.className); + } + useButtonStyles_unstable(state); return state; diff --git a/packages/react-components/react-breadcrumb/src/components/BreadcrumbDivider/BreadcrumbDivider.tsx b/packages/react-components/react-breadcrumb/src/components/BreadcrumbDivider/BreadcrumbDivider.tsx index 09e558ff9d2c80..de51ae013fd53e 100644 --- a/packages/react-components/react-breadcrumb/src/components/BreadcrumbDivider/BreadcrumbDivider.tsx +++ b/packages/react-components/react-breadcrumb/src/components/BreadcrumbDivider/BreadcrumbDivider.tsx @@ -1,10 +1,9 @@ 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'; -import { useCustomStyleHooks_unstable } from '@fluentui/react-shared-contexts'; /** * BreadcrumbDivider component - TODO: add more docs @@ -14,9 +13,6 @@ export const BreadcrumbDivider: ForwardRefComponent = Re useBreadcrumbDividerStyles_unstable(state); - const { useTextStyles_unstable: useCustomStyles } = useCustomStyleHooks_unstable(); - useCustomStyles(state); - return renderBreadcrumbDivider_unstable(state); }); diff --git a/packages/react-components/react-breadcrumb/src/components/BreadcrumbDivider/index.ts b/packages/react-components/react-breadcrumb/src/components/BreadcrumbDivider/index.ts index 2718c3f9ddff52..e984ecbb9aeb89 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/renderBreadcrumbDivider.tsx b/packages/react-components/react-breadcrumb/src/components/BreadcrumbDivider/renderBreadcrumbDivider.tsx index 8aab11683aa7a7..9162c15726fad6 100644 --- a/packages/react-components/react-breadcrumb/src/components/BreadcrumbDivider/renderBreadcrumbDivider.tsx +++ b/packages/react-components/react-breadcrumb/src/components/BreadcrumbDivider/renderBreadcrumbDivider.tsx @@ -1,12 +1,16 @@ -import * as React from 'react'; -import { getSlots } from '@fluentui/react-utilities'; +/** @jsxRuntime classic */ +/** @jsx createElement */ + +import { createElement } from '@fluentui/react-jsx-runtime'; + +import { getSlotsNext } from '@fluentui/react-utilities'; import type { BreadcrumbDividerState, BreadcrumbDividerSlots } from './BreadcrumbDivider.types'; /** * Render the final JSX of BreadcrumbDivider */ export const renderBreadcrumbDivider_unstable = (state: BreadcrumbDividerState) => { - const { slots, slotProps } = getSlots(state); + const { slots, slotProps } = getSlotsNext(state); return ; }; 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 4ff447e07b3b1d..3909738690525b 100644 --- a/packages/react-components/react-breadcrumb/src/components/BreadcrumbItem/BreadcrumbItem.tsx +++ b/packages/react-components/react-breadcrumb/src/components/BreadcrumbItem/BreadcrumbItem.tsx @@ -1,10 +1,9 @@ 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'; -import { useCustomStyleHooks_unstable } from '@fluentui/react-shared-contexts'; /** * BreadcrumbItem component - TODO: add more docs @@ -14,9 +13,6 @@ export const BreadcrumbItem: ForwardRefComponent = React.fo useBreadcrumbItemStyles_unstable(state); - const { useTextStyles_unstable: useCustomStyles } = useCustomStyleHooks_unstable(); - useCustomStyles(state); - return renderBreadcrumbItem_unstable(state); }); diff --git a/packages/react-components/react-breadcrumb/src/components/BreadcrumbItem/index.ts b/packages/react-components/react-breadcrumb/src/components/BreadcrumbItem/index.ts index 84e95cdc702d9e..c5bfc978fdde03 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/renderBreadcrumbItem.tsx b/packages/react-components/react-breadcrumb/src/components/BreadcrumbItem/renderBreadcrumbItem.tsx index d0618c09576a44..bec3d568eb4120 100644 --- a/packages/react-components/react-breadcrumb/src/components/BreadcrumbItem/renderBreadcrumbItem.tsx +++ b/packages/react-components/react-breadcrumb/src/components/BreadcrumbItem/renderBreadcrumbItem.tsx @@ -1,12 +1,16 @@ -import * as React from 'react'; -import { getSlots } from '@fluentui/react-utilities'; +/** @jsxRuntime classic */ +/** @jsx createElement */ + +import { createElement } from '@fluentui/react-jsx-runtime'; + +import { getSlotsNext } from '@fluentui/react-utilities'; import type { BreadcrumbItemState, BreadcrumbItemSlots } from './BreadcrumbItem.types'; /** * Render the final JSX of BreadcrumbItem */ export const renderBreadcrumbItem_unstable = (state: BreadcrumbItemState) => { - const { slots, slotProps } = getSlots(state); + const { slots, slotProps } = getSlotsNext(state); return {slotProps.root.children}; }; 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 97% 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 index aea064dd8ea41e..e11d177e4fc6e9 100644 --- a/packages/react-components/react-breadcrumb/src/components/BreadcrumbItem/useBreadcrumbItemStyles.ts +++ b/packages/react-components/react-breadcrumb/src/components/BreadcrumbItem/useBreadcrumbItemStyles.styles.ts @@ -14,6 +14,7 @@ const useStyles = makeStyles({ root: { display: 'flex', alignItems: 'center', + color: tokens.colorNeutralForeground2, }, small: { height: '24px', 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 7392ba74d4b811..3f9a666eacdc04 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 2d72ea2d223740..4d8458785af5b8 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 6b754010678625..cefc4bb166b4c6 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/renderBreadcrumbLink.tsx b/packages/react-components/react-breadcrumb/src/components/BreadcrumbLink/renderBreadcrumbLink.tsx index 682caa518a5703..e2acf57c918adf 100644 --- a/packages/react-components/react-breadcrumb/src/components/BreadcrumbLink/renderBreadcrumbLink.tsx +++ b/packages/react-components/react-breadcrumb/src/components/BreadcrumbLink/renderBreadcrumbLink.tsx @@ -1,12 +1,16 @@ -import * as React from 'react'; -import { getSlots } from '@fluentui/react-utilities'; +/** @jsxRuntime classic */ +/** @jsx createElement */ + +import { createElement } from '@fluentui/react-jsx-runtime'; + +import { getSlotsNext } from '@fluentui/react-utilities'; import type { BreadcrumbLinkState, BreadcrumbLinkSlots } from './BreadcrumbLink.types'; /** * Render the final JSX of BreadcrumbLink */ export const renderBreadcrumbLink_unstable = (state: BreadcrumbLinkState) => { - const { slots, slotProps } = getSlots(state); + const { slots, slotProps } = getSlotsNext(state); const { iconOnly, iconPosition } = state; return ( 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/index.ts b/packages/react-components/react-breadcrumb/src/index.ts index 0488598d5f2099..9aad9d3e51deaf 100644 --- a/packages/react-components/react-breadcrumb/src/index.ts +++ b/packages/react-components/react-breadcrumb/src/index.ts @@ -22,6 +22,8 @@ export { useBreadcrumbItem_unstable, } from './BreadcrumbItem'; export type { BreadcrumbItemProps, BreadcrumbItemSlots, BreadcrumbItemState } from './BreadcrumbItem'; +export { partitionBreadcrumbItems } from './utils/index'; +export type { PartitionBreadcrumbItemsOptions, PartitionBreadcrumbItems } from './utils/index'; export { BreadcrumbButton, breadcrumbButtonClassNames, diff --git a/packages/react-components/react-breadcrumb/src/testing/isConformant.ts b/packages/react-components/react-breadcrumb/src/testing/isConformant.ts index 77f88408cbd839..a3d988f29a1728 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-breadcrumb/src/utils/index.ts b/packages/react-components/react-breadcrumb/src/utils/index.ts new file mode 100644 index 00000000000000..2dd789f3fdc64f --- /dev/null +++ b/packages/react-components/react-breadcrumb/src/utils/index.ts @@ -0,0 +1,2 @@ +export { partitionBreadcrumbItems } from './partitionBreadcrumbItems'; +export type { PartitionBreadcrumbItems, PartitionBreadcrumbItemsOptions } from './partitionBreadcrumbItems'; diff --git a/packages/react-components/react-breadcrumb/src/utils/partitionBreadcrumbItems.test.ts b/packages/react-components/react-breadcrumb/src/utils/partitionBreadcrumbItems.test.ts new file mode 100644 index 00000000000000..89266c11a55333 --- /dev/null +++ b/packages/react-components/react-breadcrumb/src/utils/partitionBreadcrumbItems.test.ts @@ -0,0 +1,74 @@ +import { partitionBreadcrumbItems, PartitionBreadcrumbItemsOptions } from './partitionBreadcrumbItems'; +const items = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10]; +const testData = [ + [ + { items, overflowIndex: 2, maxDisplayedItems: 3 }, + { startDisplayedItems: [0, 1], overflowItems: [2, 3, 4, 5, 6, 7, 8, 9], endDisplayedItems: [10] }, + ], + [ + { items, maxDisplayedItems: 8, overflowIndex: 7 }, + { startDisplayedItems: [0, 1, 2, 3, 4, 5, 6], overflowItems: [7, 8, 9], endDisplayedItems: [10] }, + ], + [ + { items, maxDisplayedItems: 2, overflowIndex: 2 }, + { startDisplayedItems: [0], overflowItems: [1, 2, 3, 4, 5, 6, 7, 8, 9], endDisplayedItems: [10] }, + ], + [ + { items, maxDisplayedItems: 3, overflowIndex: 3 }, + { startDisplayedItems: [0, 1], overflowItems: [2, 3, 4, 5, 6, 7, 8, 9], endDisplayedItems: [10] }, + ], + [ + { items, maxDisplayedItems: 7, overflowIndex: 7 }, + { startDisplayedItems: [0, 1, 2, 3, 4, 5], overflowItems: [6, 7, 8, 9], endDisplayedItems: [10] }, + ], + [ + { items, maxDisplayedItems: 9, overflowIndex: 9 }, + { startDisplayedItems: [0, 1, 2, 3, 4, 5, 6, 7], overflowItems: [8, 9], endDisplayedItems: [10] }, + ], +]; + +const maxDisplayedItemsData = [ + [ + { items, maxDisplayedItems: 3 }, + { startDisplayedItems: [0], overflowItems: [1, 2, 3, 4, 5, 6, 7, 8], endDisplayedItems: [9, 10] }, + ], + [ + { items, maxDisplayedItems: 2 }, + { startDisplayedItems: [0], overflowItems: [1, 2, 3, 4, 5, 6, 7, 8, 9], endDisplayedItems: [10] }, + ], +]; +const overflowIndexData = [ + [ + { items, overflowIndex: 2 }, + { startDisplayedItems: [0, 1], overflowItems: [2, 3, 4, 5, 6], endDisplayedItems: [7, 8, 9, 10] }, + ], + [ + { items, overflowIndex: 0 }, + { startDisplayedItems: [], overflowItems: [0, 1, 2, 3, 4], endDisplayedItems: [5, 6, 7, 8, 9, 10] }, + ], +]; + +describe('partitionBreadcrumbItems method', () => { + it.each(testData)("splits items correctly '%s'", (testItems, expected) => { + expect(partitionBreadcrumbItems(testItems as PartitionBreadcrumbItemsOptions)).toStrictEqual(expected); + }); + it.each(maxDisplayedItemsData)( + "splits items correctly if maxDisplayedItems are passed '%s'", + (testItems, expected) => { + expect(partitionBreadcrumbItems(testItems as PartitionBreadcrumbItemsOptions)).toStrictEqual(expected); + }, + ); + it.each(overflowIndexData)("splits items correctly if overflowINdex is passed '%s'", (testItems, expected) => { + expect(partitionBreadcrumbItems(testItems as PartitionBreadcrumbItemsOptions)).toStrictEqual(expected); + }); + expect(partitionBreadcrumbItems({ items } as PartitionBreadcrumbItemsOptions)).toStrictEqual({ + startDisplayedItems: [0], + overflowItems: [1, 2, 3, 4, 5], + endDisplayedItems: [6, 7, 8, 9, 10], + }); + expect(partitionBreadcrumbItems({} as PartitionBreadcrumbItemsOptions)).toStrictEqual({ + startDisplayedItems: [], + overflowItems: undefined, + endDisplayedItems: undefined, + }); +}); diff --git a/packages/react-components/react-breadcrumb/src/utils/partitionBreadcrumbItems.ts b/packages/react-components/react-breadcrumb/src/utils/partitionBreadcrumbItems.ts new file mode 100644 index 00000000000000..c53485db1c19b6 --- /dev/null +++ b/packages/react-components/react-breadcrumb/src/utils/partitionBreadcrumbItems.ts @@ -0,0 +1,56 @@ +const DEFAULT_OVERFLOW_INDEX = 1; +const DEFAULT_MAX_DISPLAYED_ITEMS = 6; + +export type PartitionBreadcrumbItemsOptions = { + items: readonly T[]; + maxDisplayedItems?: number; + overflowIndex?: number; +}; + +export type PartitionBreadcrumbItems = { + startDisplayedItems: readonly T[]; + overflowItems?: readonly T[]; + endDisplayedItems?: readonly T[]; +}; + +/** + * Get the displayed items and overflowing items based on the array of BreadcrumbItems needed for Breadcrumb. + * + * @param options - Configure the partition options + * + * @returns Three arrays split into displayed items and overflow items based on maxDisplayedItems. + */ +export const partitionBreadcrumbItems = ( + options: PartitionBreadcrumbItemsOptions, +): PartitionBreadcrumbItems => { + let startDisplayedItems; + let overflowItems; + let endDisplayedItems; + + const { items = [] } = options; + const itemsCount = items.length; + const maxDisplayedItems = getMaxDisplayedItems(options.maxDisplayedItems); + let overflowIndex = options.overflowIndex ?? DEFAULT_OVERFLOW_INDEX; + startDisplayedItems = items.slice(0, overflowIndex); + + const numberItemsToHide = itemsCount - maxDisplayedItems; + + if (numberItemsToHide > 0) { + overflowIndex = overflowIndex === maxDisplayedItems ? overflowIndex - 1 : overflowIndex; + const menuLastItemIdx = overflowIndex + numberItemsToHide; + + startDisplayedItems = startDisplayedItems.slice(0, overflowIndex); + overflowItems = items.slice(overflowIndex, menuLastItemIdx); + endDisplayedItems = items.slice(menuLastItemIdx, itemsCount); + } + + return { + startDisplayedItems, + overflowItems, + endDisplayedItems, + }; +}; + +function getMaxDisplayedItems(maxDisplayedItems: number | undefined) { + return maxDisplayedItems && maxDisplayedItems >= 0 ? maxDisplayedItems : DEFAULT_MAX_DISPLAYED_ITEMS; +} diff --git a/packages/react-components/react-breadcrumb/stories/Breadcrumb/BreadcrumbWithOverflow.stories.tsx b/packages/react-components/react-breadcrumb/stories/Breadcrumb/BreadcrumbWithOverflow.stories.tsx new file mode 100644 index 00000000000000..a0e5f7bff89e8c --- /dev/null +++ b/packages/react-components/react-breadcrumb/stories/Breadcrumb/BreadcrumbWithOverflow.stories.tsx @@ -0,0 +1,280 @@ +import * as React from 'react'; +import { + ButtonProps, + makeStyles, + mergeClasses, + shorthands, + tokens, + Button, + Menu, + MenuList, + MenuPopover, + MenuTrigger, + useIsOverflowItemVisible, + useIsOverflowGroupVisible, + useOverflowMenu, + Overflow, + OverflowItem, + MenuItem, +} from '@fluentui/react-components'; +import { + CalendarMonthFilled, + CalendarMonthRegular, + MoreHorizontalRegular, + MoreHorizontalFilled, + bundleIcon, +} from '@fluentui/react-icons'; +import { + Breadcrumb, + BreadcrumbItem, + BreadcrumbButton, + BreadcrumbDivider, + partitionBreadcrumbItems, +} from '@fluentui/react-breadcrumb'; +import type { PartitionBreadcrumbItems } from '@fluentui/react-breadcrumb'; + +const CalendarMonth = bundleIcon(CalendarMonthFilled, CalendarMonthRegular); +const MoreHorizontal = bundleIcon(MoreHorizontalFilled, MoreHorizontalRegular); + +type Item = { + key: number; + item?: string; + buttonProps?: { + onClick?: () => void; + icon?: ButtonProps['icon']; + disabled?: boolean; + iconPosition?: 'before' | 'after'; + }; +}; + +export const buttonItems: Item[] = [ + { + key: 0, + item: 'Item 0', + buttonProps: { + onClick: () => console.log('item 0 was clicked'), + }, + }, + { + key: 1, + item: 'Item 1', + buttonProps: { + icon: , + onClick: () => console.log('item 1 was clicked'), + }, + }, + { + key: 2, + item: 'Item 2', + buttonProps: { + onClick: () => console.log('item 2 was clicked'), + }, + }, + { + key: 3, + item: 'Item 3', + buttonProps: { + onClick: () => console.log('item 3 was clicked'), + }, + }, + { + key: 4, + item: 'Item 4', + buttonProps: { + onClick: () => console.log('item 4 was clicked'), + }, + }, + { + key: 5, + item: 'Item 5', + buttonProps: { + icon: , + iconPosition: 'after', + onClick: () => console.log('item 5 was clicked'), + }, + }, + { + key: 6, + item: 'Item 6', + buttonProps: { + onClick: () => console.log('item 6 was clicked'), + disabled: true, + }, + }, + { + key: 7, + item: 'Item 7', + buttonProps: { + onClick: () => console.log('item 7 was clicked'), + }, + }, +]; + +const useOverflowMenuStyles = makeStyles({ + menu: { + backgroundColor: tokens.colorNeutralBackground1, + }, + menuButton: { + alignSelf: 'center', + }, +}); + +const useExampleStyles = makeStyles({ + example: { + backgroundColor: tokens.colorNeutralBackground2, + ...shorthands.overflow('hidden'), + ...shorthands.padding('5px'), + zIndex: 0, //stop the browser resize handle from piercing the overflow menu + }, + horizontal: { + height: 'fit-content', + minWidth: '150px', + resize: 'horizontal', + width: '600px', + }, +}); + +const useStyles = makeStyles({ + root: { + alignItems: 'flex-start', + display: 'flex', + flexDirection: 'column', + justifyContent: 'flex-start', + ...shorthands.overflow('auto'), + ...shorthands.padding('50px', '20px'), + rowGap: '20px', + minHeight: '600px', //lets the page remain at a minimum height when vertical tabs are resized + }, +}); + +const OverflowBreadcrumbButton: React.FC<{ id: string; item: Item }> = props => { + const { item, id } = props; + const isVisible = useIsOverflowItemVisible(id); + + if (isVisible) { + return null; + } + + return {item.item}; +}; + +const OverflowGroupDivider: React.FC<{ + groupId: number; +}> = props => { + const groupVisibility = useIsOverflowGroupVisible(props.groupId.toString()); + if (groupVisibility === 'hidden') { + return null; + } + + return ; +}; + +const ControlledOverflowMenu = (props: PartitionBreadcrumbItems) => { + const { overflowItems, startDisplayedItems, endDisplayedItems } = props; + const { ref, isOverflowing, overflowCount } = useOverflowMenu(); + + const styles = useOverflowMenuStyles(); + + if (!isOverflowing && overflowItems && overflowItems.length === 0) { + return null; + } + + return ( + + + + ); +}; +const BreadcrumbControlledOverflowExample = () => { + const styles = useExampleStyles(); + + const { startDisplayedItems, overflowItems, endDisplayedItems }: PartitionBreadcrumbItems = + partitionBreadcrumbItems({ + items: buttonItems, + maxDisplayedItems: 4, + }); + + return ( +
+ + + {startDisplayedItems.map((item: Item) => { + return ( + + + + {item.item} + + + + + ); + })} + + + {endDisplayedItems && + endDisplayedItems.map((item: Item) => { + const isLastItem = item.key === buttonItems.length - 1; + + return ( + + + + + {item.item} + + + + {!isLastItem && } + + ); + })} + + +
+ ); +}; + +export const BreadcrumbWithOverflow = () => { + const styles = useStyles(); + + return ( +
+ +
+ ); +}; diff --git a/packages/react-components/react-breadcrumb/stories/Breadcrumb/index.stories.tsx b/packages/react-components/react-breadcrumb/stories/Breadcrumb/index.stories.tsx index 4698d7df0fee75..e8f0fd5aad0f75 100644 --- a/packages/react-components/react-breadcrumb/stories/Breadcrumb/index.stories.tsx +++ b/packages/react-components/react-breadcrumb/stories/Breadcrumb/index.stories.tsx @@ -4,6 +4,7 @@ import descriptionMd from './BreadcrumbDescription.md'; import bestPracticesMd from './BreadcrumbBestPractices.md'; export { Default } from './BreadcrumbDefault.stories'; +export { BreadcrumbWithOverflow } from './BreadcrumbWithOverflow.stories'; export default { title: 'Preview Components/Breadcrumb', diff --git a/packages/react-components/react-breadcrumb/stories/BreadcrumbItem/BreadcrumbItemDefault.stories.tsx b/packages/react-components/react-breadcrumb/stories/BreadcrumbItem/BreadcrumbItemDefault.stories.tsx index db9889840a588f..b30a603a7bcbd4 100644 --- a/packages/react-components/react-breadcrumb/stories/BreadcrumbItem/BreadcrumbItemDefault.stories.tsx +++ b/packages/react-components/react-breadcrumb/stories/BreadcrumbItem/BreadcrumbItemDefault.stories.tsx @@ -10,6 +10,6 @@ export const Default = () => ( Item - Item + Item ); diff --git a/packages/react-components/react-button/.npmignore b/packages/react-components/react-button/.npmignore index f7ce568a6dbf7c..26904cdfffc9bd 100644 --- a/packages/react-components/react-button/.npmignore +++ b/packages/react-components/react-button/.npmignore @@ -28,3 +28,9 @@ __tests__ .eslint* .git* .prettierignore + +# exclude gitignore patterns explicitly +!lib +!lib-commonjs +!lib-amd +!dist/*.d.ts diff --git a/packages/react-components/react-button/CHANGELOG.json b/packages/react-components/react-button/CHANGELOG.json index 838a67423da080..91827d29a2f723 100644 --- a/packages/react-components/react-button/CHANGELOG.json +++ b/packages/react-components/react-button/CHANGELOG.json @@ -1,6 +1,27 @@ { "name": "@fluentui/react-button", "entries": [ + { + "date": "Mon, 24 Apr 2023 08:12:32 GMT", + "tag": "@fluentui/react-button_v9.3.10", + "version": "9.3.10", + "comments": { + "patch": [ + { + "author": "bernardo.sunderhus@gmail.com", + "package": "@fluentui/react-button", + "commit": "d65eb9f6ec233104ab627532468fa64d71bbd702", + "comment": "chore: adopt custom JSX pragma" + }, + { + "author": "beachball", + "package": "@fluentui/react-button", + "comment": "Bump @fluentui/react-jsx-runtime to v9.0.0-alpha.2", + "commit": "505433ac64f144c9cca456097413d6af4582e5ee" + } + ] + } + }, { "date": "Mon, 17 Apr 2023 17:54:02 GMT", "tag": "@fluentui/react-button_v9.3.9", diff --git a/packages/react-components/react-button/CHANGELOG.md b/packages/react-components/react-button/CHANGELOG.md index 2ba92ef06715c5..d06ea0bd4f6e08 100644 --- a/packages/react-components/react-button/CHANGELOG.md +++ b/packages/react-components/react-button/CHANGELOG.md @@ -1,9 +1,19 @@ # Change Log - @fluentui/react-button -This log was last generated on Mon, 17 Apr 2023 17:54:02 GMT and should not be manually modified. +This log was last generated on Mon, 24 Apr 2023 08:12:32 GMT and should not be manually modified. +## [9.3.10](https://github.com/microsoft/fluentui/tree/@fluentui/react-button_v9.3.10) + +Mon, 24 Apr 2023 08:12:32 GMT +[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-button_v9.3.9..@fluentui/react-button_v9.3.10) + +### Patches + +- chore: adopt custom JSX pragma ([PR #27605](https://github.com/microsoft/fluentui/pull/27605) by bernardo.sunderhus@gmail.com) +- Bump @fluentui/react-jsx-runtime to v9.0.0-alpha.2 ([commit](https://github.com/microsoft/fluentui/commit/505433ac64f144c9cca456097413d6af4582e5ee) by beachball) + ## [9.3.9](https://github.com/microsoft/fluentui/tree/@fluentui/react-button_v9.3.9) Mon, 17 Apr 2023 17:54:02 GMT diff --git a/packages/react-components/react-button/jest.config.js b/packages/react-components/react-button/jest.config.js index fa9febaae31442..c40bf76983caf5 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/package.json b/packages/react-components/react-button/package.json index 1518095f4cc514..c016c933e3a688 100644 --- a/packages/react-components/react-button/package.json +++ b/packages/react-components/react-button/package.json @@ -1,6 +1,6 @@ { "name": "@fluentui/react-button", - "version": "9.3.9", + "version": "9.3.10", "description": "Fluent UI React Button component.", "main": "lib-commonjs/index.js", "module": "lib/index.js", @@ -36,6 +36,7 @@ "@fluentui/keyboard-keys": "^9.0.2", "@fluentui/react-aria": "^9.3.18", "@fluentui/react-icons": "^2.0.196", + "@fluentui/react-jsx-runtime": "9.0.0-alpha.2", "@fluentui/react-shared-contexts": "^9.3.3", "@fluentui/react-tabster": "^9.6.5", "@fluentui/react-theme": "^9.1.7", diff --git a/packages/react-components/react-button/src/components/Button/Button.tsx b/packages/react-components/react-button/src/components/Button/Button.tsx index e1fc1e70b871dd..2ab70e0fec1df6 100644 --- a/packages/react-components/react-button/src/components/Button/Button.tsx +++ b/packages/react-components/react-button/src/components/Button/Button.tsx @@ -1,10 +1,10 @@ import * as React from 'react'; import { renderButton_unstable } from './renderButton'; import { useButton_unstable } from './useButton'; -import { useButtonStyles_unstable } from './useButtonStyles'; +import { useButtonStyles_unstable } from './useButtonStyles.styles'; import type { ButtonProps } from './Button.types'; import type { ForwardRefComponent } from '@fluentui/react-utilities'; -import { useCustomStyleHooks_unstable } from '@fluentui/react-shared-contexts'; +import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts'; /** * Buttons give people a way to trigger an action. @@ -14,8 +14,7 @@ export const Button: ForwardRefComponent = React.forwardRef((props, useButtonStyles_unstable(state); - const { useButtonStyles_unstable: useCustomStyles } = useCustomStyleHooks_unstable(); - useCustomStyles(state); + useCustomStyleHook_unstable('useButtonStyles_unstable')(state); return renderButton_unstable(state); // Casting is required due to lack of distributive union to support unions on @types/react diff --git a/packages/react-components/react-button/src/components/Button/index.ts b/packages/react-components/react-button/src/components/Button/index.ts index aed7aa52a83e25..13abd561ef142f 100644 --- a/packages/react-components/react-button/src/components/Button/index.ts +++ b/packages/react-components/react-button/src/components/Button/index.ts @@ -3,4 +3,4 @@ export * from './Button'; export type { ButtonProps, ButtonSlots, ButtonState } from './Button.types'; export * from './renderButton'; export * from './useButton'; -export { buttonClassNames, useButtonStyles_unstable } from './useButtonStyles'; +export { buttonClassNames, useButtonStyles_unstable } from './useButtonStyles.styles'; diff --git a/packages/react-components/react-button/src/components/Button/renderButton.tsx b/packages/react-components/react-button/src/components/Button/renderButton.tsx index a93eca455e7a54..c003b557e3ebb3 100644 --- a/packages/react-components/react-button/src/components/Button/renderButton.tsx +++ b/packages/react-components/react-button/src/components/Button/renderButton.tsx @@ -1,12 +1,16 @@ -import * as React from 'react'; -import { getSlots } from '@fluentui/react-utilities'; +/** @jsxRuntime classic */ +/** @jsx createElement */ + +import { createElement } from '@fluentui/react-jsx-runtime'; + +import { getSlotsNext } from '@fluentui/react-utilities'; import type { ButtonSlots, ButtonState } from './Button.types'; /** * Renders a Button component by passing the state defined props to the appropriate slots. */ export const renderButton_unstable = (state: ButtonState) => { - const { slots, slotProps } = getSlots(state); + const { slots, slotProps } = getSlotsNext(state); const { iconOnly, iconPosition } = state; return ( diff --git a/packages/react-components/react-button/src/components/Button/useButtonStyles.ts b/packages/react-components/react-button/src/components/Button/useButtonStyles.styles.ts similarity index 100% rename from packages/react-components/react-button/src/components/Button/useButtonStyles.ts rename to packages/react-components/react-button/src/components/Button/useButtonStyles.styles.ts diff --git a/packages/react-components/react-button/src/components/CompoundButton/CompoundButton.tsx b/packages/react-components/react-button/src/components/CompoundButton/CompoundButton.tsx index 9af761b8f906e6..4ad7a5c4615c29 100644 --- a/packages/react-components/react-button/src/components/CompoundButton/CompoundButton.tsx +++ b/packages/react-components/react-button/src/components/CompoundButton/CompoundButton.tsx @@ -1,10 +1,10 @@ import * as React from 'react'; import { renderCompoundButton_unstable } from './renderCompoundButton'; import { useCompoundButton_unstable } from './useCompoundButton'; -import { useCompoundButtonStyles_unstable } from './useCompoundButtonStyles'; +import { useCompoundButtonStyles_unstable } from './useCompoundButtonStyles.styles'; import type { ForwardRefComponent } from '@fluentui/react-utilities'; import type { CompoundButtonProps } from './CompoundButton.types'; -import { useCustomStyleHooks_unstable } from '@fluentui/react-shared-contexts'; +import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts'; /** * CompoundButtons are buttons that can have secondary content that adds extra information to the user. @@ -14,8 +14,7 @@ export const CompoundButton: ForwardRefComponent = React.fo useCompoundButtonStyles_unstable(state); - const { useCompoundButtonStyles_unstable: useCustomStyles } = useCustomStyleHooks_unstable(); - useCustomStyles(state); + useCustomStyleHook_unstable('useCompoundButtonStyles_unstable')(state); return renderCompoundButton_unstable(state); // Casting is required due to lack of distributive union to support unions on @types/react diff --git a/packages/react-components/react-button/src/components/CompoundButton/index.ts b/packages/react-components/react-button/src/components/CompoundButton/index.ts index c03cf9a82ace7c..e5682a639bc944 100644 --- a/packages/react-components/react-button/src/components/CompoundButton/index.ts +++ b/packages/react-components/react-button/src/components/CompoundButton/index.ts @@ -2,4 +2,4 @@ export * from './CompoundButton'; export * from './CompoundButton.types'; export * from './renderCompoundButton'; export * from './useCompoundButton'; -export { compoundButtonClassNames, useCompoundButtonStyles_unstable } from './useCompoundButtonStyles'; +export { compoundButtonClassNames, useCompoundButtonStyles_unstable } from './useCompoundButtonStyles.styles'; diff --git a/packages/react-components/react-button/src/components/CompoundButton/renderCompoundButton.tsx b/packages/react-components/react-button/src/components/CompoundButton/renderCompoundButton.tsx index a23a3b5c3403de..fe1cdcbe022364 100644 --- a/packages/react-components/react-button/src/components/CompoundButton/renderCompoundButton.tsx +++ b/packages/react-components/react-button/src/components/CompoundButton/renderCompoundButton.tsx @@ -1,12 +1,16 @@ -import * as React from 'react'; -import { getSlots } from '@fluentui/react-utilities'; +/** @jsxRuntime classic */ +/** @jsx createElement */ + +import { createElement } from '@fluentui/react-jsx-runtime'; + +import { getSlotsNext } from '@fluentui/react-utilities'; import type { CompoundButtonSlots, CompoundButtonState } from './CompoundButton.types'; /** * Renders a CompoundButton component by passing the state defined props to the appropriate slots. */ export const renderCompoundButton_unstable = (state: CompoundButtonState) => { - const { slots, slotProps } = getSlots(state); + const { slots, slotProps } = getSlotsNext(state); const { iconOnly, iconPosition } = state; return ( diff --git a/packages/react-components/react-button/src/components/CompoundButton/useCompoundButtonStyles.ts b/packages/react-components/react-button/src/components/CompoundButton/useCompoundButtonStyles.styles.ts similarity index 99% rename from packages/react-components/react-button/src/components/CompoundButton/useCompoundButtonStyles.ts rename to packages/react-components/react-button/src/components/CompoundButton/useCompoundButtonStyles.styles.ts index b2acd1992a6018..41501e16a65cc6 100644 --- a/packages/react-components/react-button/src/components/CompoundButton/useCompoundButtonStyles.ts +++ b/packages/react-components/react-button/src/components/CompoundButton/useCompoundButtonStyles.styles.ts @@ -1,6 +1,6 @@ import { tokens } from '@fluentui/react-theme'; import { shorthands, mergeClasses, makeStyles } from '@griffel/react'; -import { useButtonStyles_unstable } from '../Button/useButtonStyles'; +import { useButtonStyles_unstable } from '../Button/useButtonStyles.styles'; import type { SlotClassNames } from '@fluentui/react-utilities'; import type { CompoundButtonSlots, CompoundButtonState } from './CompoundButton.types'; diff --git a/packages/react-components/react-button/src/components/MenuButton/MenuButton.test.tsx b/packages/react-components/react-button/src/components/MenuButton/MenuButton.test.tsx index c513929211a6f0..5d3b1148818428 100644 --- a/packages/react-components/react-button/src/components/MenuButton/MenuButton.test.tsx +++ b/packages/react-components/react-button/src/components/MenuButton/MenuButton.test.tsx @@ -4,7 +4,7 @@ import userEvent from '@testing-library/user-event'; import { isConformant } from '../../testing/isConformant'; import { MenuButton } from './MenuButton'; import { MenuButtonProps } from './MenuButton.types'; -import { menuButtonClassNames } from './useMenuButtonStyles'; +import { menuButtonClassNames } from './useMenuButtonStyles.styles'; describe('MenuButton', () => { isConformant({ diff --git a/packages/react-components/react-button/src/components/MenuButton/MenuButton.tsx b/packages/react-components/react-button/src/components/MenuButton/MenuButton.tsx index 7646b0e3737e7c..84bbb98f373380 100644 --- a/packages/react-components/react-button/src/components/MenuButton/MenuButton.tsx +++ b/packages/react-components/react-button/src/components/MenuButton/MenuButton.tsx @@ -1,10 +1,10 @@ import * as React from 'react'; import { renderMenuButton_unstable } from './renderMenuButton'; import { useMenuButton_unstable } from './useMenuButton'; -import { useMenuButtonStyles_unstable } from './useMenuButtonStyles'; +import { useMenuButtonStyles_unstable } from './useMenuButtonStyles.styles'; import type { MenuButtonProps } from './MenuButton.types'; import type { ForwardRefComponent } from '@fluentui/react-utilities'; -import { useCustomStyleHooks_unstable } from '@fluentui/react-shared-contexts'; +import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts'; /** * MenuButtons are buttons that have a chevron icon after the button contents and are usually clicked to open/close @@ -15,8 +15,7 @@ export const MenuButton: ForwardRefComponent = React.forwardRef useMenuButtonStyles_unstable(state); - const { useMenuButtonStyles_unstable: useCustomStyles } = useCustomStyleHooks_unstable(); - useCustomStyles(state); + useCustomStyleHook_unstable('useMenuButtonStyles_unstable')(state); return renderMenuButton_unstable(state); // Casting is required due to lack of distributive union to support unions on @types/react diff --git a/packages/react-components/react-button/src/components/MenuButton/index.ts b/packages/react-components/react-button/src/components/MenuButton/index.ts index 1a2f243d7c1b3b..3c101cb75fb087 100644 --- a/packages/react-components/react-button/src/components/MenuButton/index.ts +++ b/packages/react-components/react-button/src/components/MenuButton/index.ts @@ -2,4 +2,4 @@ export * from './MenuButton.types'; export * from './MenuButton'; export * from './renderMenuButton'; export * from './useMenuButton'; -export { menuButtonClassNames, useMenuButtonStyles_unstable } from './useMenuButtonStyles'; +export { menuButtonClassNames, useMenuButtonStyles_unstable } from './useMenuButtonStyles.styles'; diff --git a/packages/react-components/react-button/src/components/MenuButton/renderMenuButton.tsx b/packages/react-components/react-button/src/components/MenuButton/renderMenuButton.tsx index 7667223943301e..ecc6cbdbbf352c 100644 --- a/packages/react-components/react-button/src/components/MenuButton/renderMenuButton.tsx +++ b/packages/react-components/react-button/src/components/MenuButton/renderMenuButton.tsx @@ -1,12 +1,16 @@ -import * as React from 'react'; -import { getSlots } from '@fluentui/react-utilities'; +/** @jsxRuntime classic */ +/** @jsx createElement */ + +import { createElement } from '@fluentui/react-jsx-runtime'; + +import { getSlotsNext } from '@fluentui/react-utilities'; import type { MenuButtonSlots, MenuButtonState } from './MenuButton.types'; /** * Renders a MenuButton component by passing the state defined props to the appropriate slots. */ export const renderMenuButton_unstable = (state: MenuButtonState) => { - const { slots, slotProps } = getSlots(state); + const { slots, slotProps } = getSlotsNext(state); const { icon, iconOnly } = state; return ( diff --git a/packages/react-components/react-button/src/components/MenuButton/useMenuButtonStyles.ts b/packages/react-components/react-button/src/components/MenuButton/useMenuButtonStyles.styles.ts similarity index 99% rename from packages/react-components/react-button/src/components/MenuButton/useMenuButtonStyles.ts rename to packages/react-components/react-button/src/components/MenuButton/useMenuButtonStyles.styles.ts index ce8c0866695e3f..2c4a2062bb956b 100644 --- a/packages/react-components/react-button/src/components/MenuButton/useMenuButtonStyles.ts +++ b/packages/react-components/react-button/src/components/MenuButton/useMenuButtonStyles.styles.ts @@ -2,7 +2,7 @@ import { iconFilledClassName, iconRegularClassName } from '@fluentui/react-icons import { tokens } from '@fluentui/react-theme'; import type { SlotClassNames } from '@fluentui/react-utilities'; import { mergeClasses, makeStyles, shorthands } from '@griffel/react'; -import { useButtonStyles_unstable } from '../Button/useButtonStyles'; +import { useButtonStyles_unstable } from '../Button/useButtonStyles.styles'; import type { MenuButtonSlots, MenuButtonState } from './MenuButton.types'; export const menuButtonClassNames: SlotClassNames = { diff --git a/packages/react-components/react-button/src/components/SplitButton/SplitButton.tsx b/packages/react-components/react-button/src/components/SplitButton/SplitButton.tsx index ec7c3fc661b639..6896cad7436621 100644 --- a/packages/react-components/react-button/src/components/SplitButton/SplitButton.tsx +++ b/packages/react-components/react-button/src/components/SplitButton/SplitButton.tsx @@ -1,10 +1,10 @@ import * as React from 'react'; import { renderSplitButton_unstable } from './renderSplitButton'; import { useSplitButton_unstable } from './useSplitButton'; -import { useSplitButtonStyles_unstable } from './useSplitButtonStyles'; +import { useSplitButtonStyles_unstable } from './useSplitButtonStyles.styles'; import type { SplitButtonProps } from './SplitButton.types'; import { ForwardRefComponent } from '@fluentui/react-utilities'; -import { useCustomStyleHooks_unstable } from '@fluentui/react-shared-contexts'; +import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts'; /** * SplitButtons are a grouping of two interactive surfaces where interacting with the first one triggers a primary @@ -15,8 +15,7 @@ export const SplitButton: ForwardRefComponent = React.forwardR useSplitButtonStyles_unstable(state); - const { useSplitButtonStyles_unstable: useCustomStyles } = useCustomStyleHooks_unstable(); - useCustomStyles(state); + useCustomStyleHook_unstable('useSplitButtonStyles_unstable')(state); return renderSplitButton_unstable(state); // Casting is required due to lack of distributive union to support unions on @types/react diff --git a/packages/react-components/react-button/src/components/SplitButton/index.ts b/packages/react-components/react-button/src/components/SplitButton/index.ts index 916cfacdcab8d4..e2093e966b8822 100644 --- a/packages/react-components/react-button/src/components/SplitButton/index.ts +++ b/packages/react-components/react-button/src/components/SplitButton/index.ts @@ -2,4 +2,4 @@ export * from './SplitButton'; export * from './SplitButton.types'; export * from './renderSplitButton'; export * from './useSplitButton'; -export { splitButtonClassNames, useSplitButtonStyles_unstable } from './useSplitButtonStyles'; +export { splitButtonClassNames, useSplitButtonStyles_unstable } from './useSplitButtonStyles.styles'; diff --git a/packages/react-components/react-button/src/components/SplitButton/renderSplitButton.tsx b/packages/react-components/react-button/src/components/SplitButton/renderSplitButton.tsx index d1da41522a7a8c..25897f2ab7ec57 100644 --- a/packages/react-components/react-button/src/components/SplitButton/renderSplitButton.tsx +++ b/packages/react-components/react-button/src/components/SplitButton/renderSplitButton.tsx @@ -1,12 +1,16 @@ -import * as React from 'react'; -import { getSlots } from '@fluentui/react-utilities'; +/** @jsxRuntime classic */ +/** @jsx createElement */ + +import { createElement } from '@fluentui/react-jsx-runtime'; + +import { getSlotsNext } from '@fluentui/react-utilities'; import type { SplitButtonSlots, SplitButtonState } from './SplitButton.types'; /** * Renders a SplitButton component by passing the state defined props to the appropriate slots. */ export const renderSplitButton_unstable = (state: SplitButtonState) => { - const { slots, slotProps } = getSlots(state); + const { slots, slotProps } = getSlotsNext(state); return ( diff --git a/packages/react-components/react-button/src/components/SplitButton/useSplitButtonStyles.ts b/packages/react-components/react-button/src/components/SplitButton/useSplitButtonStyles.styles.ts similarity index 100% rename from packages/react-components/react-button/src/components/SplitButton/useSplitButtonStyles.ts rename to packages/react-components/react-button/src/components/SplitButton/useSplitButtonStyles.styles.ts diff --git a/packages/react-components/react-button/src/components/ToggleButton/ToggleButton.tsx b/packages/react-components/react-button/src/components/ToggleButton/ToggleButton.tsx index bc7f006401781c..125f007ab22ff8 100644 --- a/packages/react-components/react-button/src/components/ToggleButton/ToggleButton.tsx +++ b/packages/react-components/react-button/src/components/ToggleButton/ToggleButton.tsx @@ -1,10 +1,10 @@ import * as React from 'react'; import { renderToggleButton_unstable } from './renderToggleButton'; import { useToggleButton_unstable } from './useToggleButton'; -import { useToggleButtonStyles_unstable } from './useToggleButtonStyles'; +import { useToggleButtonStyles_unstable } from './useToggleButtonStyles.styles'; import type { ToggleButtonProps } from './ToggleButton.types'; import type { ForwardRefComponent } from '@fluentui/react-utilities'; -import { useCustomStyleHooks_unstable } from '@fluentui/react-shared-contexts'; +import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts'; /** * ToggleButtons are buttons that toggle between two defined states when triggered. @@ -14,8 +14,7 @@ export const ToggleButton: ForwardRefComponent = React.forwar useToggleButtonStyles_unstable(state); - const { useToggleButtonStyles_unstable: useCustomStyles } = useCustomStyleHooks_unstable(); - useCustomStyles(state); + useCustomStyleHook_unstable('useToggleButtonStyles_unstable')(state); return renderToggleButton_unstable(state); // Casting is required due to lack of distributive union to support unions on @types/react diff --git a/packages/react-components/react-button/src/components/ToggleButton/index.ts b/packages/react-components/react-button/src/components/ToggleButton/index.ts index f73efaf5130655..e2c9e651ddf016 100644 --- a/packages/react-components/react-button/src/components/ToggleButton/index.ts +++ b/packages/react-components/react-button/src/components/ToggleButton/index.ts @@ -2,4 +2,4 @@ export * from './ToggleButton'; export * from './ToggleButton.types'; export * from './renderToggleButton'; export * from './useToggleButton'; -export { toggleButtonClassNames, useToggleButtonStyles_unstable } from './useToggleButtonStyles'; +export { toggleButtonClassNames, useToggleButtonStyles_unstable } from './useToggleButtonStyles.styles'; diff --git a/packages/react-components/react-button/src/components/ToggleButton/useToggleButtonStyles.ts b/packages/react-components/react-button/src/components/ToggleButton/useToggleButtonStyles.styles.ts similarity index 99% rename from packages/react-components/react-button/src/components/ToggleButton/useToggleButtonStyles.ts rename to packages/react-components/react-button/src/components/ToggleButton/useToggleButtonStyles.styles.ts index f86d55ca9a80ba..eb59db2e7e4889 100644 --- a/packages/react-components/react-button/src/components/ToggleButton/useToggleButtonStyles.ts +++ b/packages/react-components/react-button/src/components/ToggleButton/useToggleButtonStyles.styles.ts @@ -2,7 +2,7 @@ import { iconFilledClassName, iconRegularClassName } from '@fluentui/react-icons import { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster'; import { tokens } from '@fluentui/react-theme'; import { shorthands, mergeClasses, makeStyles } from '@griffel/react'; -import { useButtonStyles_unstable } from '../Button/useButtonStyles'; +import { useButtonStyles_unstable } from '../Button/useButtonStyles.styles'; import type { SlotClassNames } from '@fluentui/react-utilities'; import type { ButtonSlots } from '../Button/Button.types'; import type { ToggleButtonState } from './ToggleButton.types'; diff --git a/packages/react-components/react-button/src/testing/isConformant.ts b/packages/react-components/react-button/src/testing/isConformant.ts index 77f88408cbd839..a3d988f29a1728 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/.npmignore b/packages/react-components/react-card/.npmignore index f7ce568a6dbf7c..26904cdfffc9bd 100644 --- a/packages/react-components/react-card/.npmignore +++ b/packages/react-components/react-card/.npmignore @@ -28,3 +28,9 @@ __tests__ .eslint* .git* .prettierignore + +# exclude gitignore patterns explicitly +!lib +!lib-commonjs +!lib-amd +!dist/*.d.ts diff --git a/packages/react-components/react-card/CHANGELOG.json b/packages/react-components/react-card/CHANGELOG.json index fe011366d6aabd..fe921938baf611 100644 --- a/packages/react-components/react-card/CHANGELOG.json +++ b/packages/react-components/react-card/CHANGELOG.json @@ -1,6 +1,33 @@ { "name": "@fluentui/react-card", "entries": [ + { + "date": "Mon, 24 Apr 2023 08:12:32 GMT", + "tag": "@fluentui/react-card_v9.0.8", + "version": "9.0.8", + "comments": { + "patch": [ + { + "author": "bernardo.sunderhus@gmail.com", + "package": "@fluentui/react-card", + "commit": "2c2438a98002403210039275ce54f94367f2b3fe", + "comment": "chore: adopt custom JSX pragma" + }, + { + "author": "beachball", + "package": "@fluentui/react-card", + "comment": "Bump @fluentui/react-jsx-runtime to v9.0.0-alpha.2", + "commit": "505433ac64f144c9cca456097413d6af4582e5ee" + }, + { + "author": "beachball", + "package": "@fluentui/react-card", + "comment": "Bump @fluentui/react-button to v9.3.10", + "commit": "505433ac64f144c9cca456097413d6af4582e5ee" + } + ] + } + }, { "date": "Mon, 17 Apr 2023 17:53:45 GMT", "tag": "@fluentui/react-card_v9.0.7", diff --git a/packages/react-components/react-card/CHANGELOG.md b/packages/react-components/react-card/CHANGELOG.md index 0d3bc038223942..4b296d2c618f73 100644 --- a/packages/react-components/react-card/CHANGELOG.md +++ b/packages/react-components/react-card/CHANGELOG.md @@ -1,9 +1,20 @@ # Change Log - @fluentui/react-card -This log was last generated on Mon, 17 Apr 2023 17:53:45 GMT and should not be manually modified. +This log was last generated on Mon, 24 Apr 2023 08:12:32 GMT and should not be manually modified. +## [9.0.8](https://github.com/microsoft/fluentui/tree/@fluentui/react-card_v9.0.8) + +Mon, 24 Apr 2023 08:12:32 GMT +[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-card_v9.0.7..@fluentui/react-card_v9.0.8) + +### Patches + +- chore: adopt custom JSX pragma ([PR #27606](https://github.com/microsoft/fluentui/pull/27606) by bernardo.sunderhus@gmail.com) +- Bump @fluentui/react-jsx-runtime to v9.0.0-alpha.2 ([commit](https://github.com/microsoft/fluentui/commit/505433ac64f144c9cca456097413d6af4582e5ee) by beachball) +- Bump @fluentui/react-button to v9.3.10 ([commit](https://github.com/microsoft/fluentui/commit/505433ac64f144c9cca456097413d6af4582e5ee) by beachball) + ## [9.0.7](https://github.com/microsoft/fluentui/tree/@fluentui/react-card_v9.0.7) Mon, 17 Apr 2023 17:53:45 GMT diff --git a/packages/react-components/react-card/jest.config.js b/packages/react-components/react-card/jest.config.js index 718afb7101794a..d54241a41570df 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/package.json b/packages/react-components/react-card/package.json index f12d3001d262e3..a74353006b634e 100644 --- a/packages/react-components/react-card/package.json +++ b/packages/react-components/react-card/package.json @@ -1,6 +1,6 @@ { "name": "@fluentui/react-card", - "version": "9.0.7", + "version": "9.0.8", "private": false, "description": "Card container components for Fluent UI React.", "main": "lib-commonjs/index.js", @@ -31,7 +31,7 @@ "@fluentui/eslint-plugin": "*", "@fluentui/react-conformance-griffel": "9.0.0-beta.20", "@fluentui/react-conformance": "*", - "@fluentui/react-button": "^9.3.9", + "@fluentui/react-button": "^9.3.10", "@fluentui/scripts-api-extractor": "*", "@fluentui/scripts-cypress": "*", "@fluentui/scripts-tasks": "*" @@ -41,6 +41,7 @@ "@fluentui/react-tabster": "^9.6.5", "@fluentui/react-theme": "^9.1.7", "@fluentui/react-utilities": "^9.8.0", + "@fluentui/react-jsx-runtime": "9.0.0-alpha.2", "@griffel/react": "^1.5.2", "@swc/helpers": "^0.4.14" }, 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 28b2059b1396da..f229f0d0a136af 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 baa98b06197aa4..a872b34554c645 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 1ad6404c375f38..c1f77d8ed79487 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/renderCard.tsx b/packages/react-components/react-card/src/components/Card/renderCard.tsx index e934d7567b9028..82efe6a178a756 100644 --- a/packages/react-components/react-card/src/components/Card/renderCard.tsx +++ b/packages/react-components/react-card/src/components/Card/renderCard.tsx @@ -1,5 +1,9 @@ -import * as React from 'react'; -import { getSlots } from '@fluentui/react-utilities'; +/** @jsxRuntime classic */ +/** @jsx createElement */ + +import { createElement } from '@fluentui/react-jsx-runtime'; + +import { getSlotsNext } from '@fluentui/react-utilities'; import type { CardContextValue, CardSlots, CardState } from './Card.types'; import { CardProvider } from './CardContext'; @@ -7,7 +11,7 @@ import { CardProvider } from './CardContext'; * Render the final JSX of Card. */ export const renderCard_unstable = (state: CardState, cardContextValue: CardContextValue) => { - const { slots, slotProps } = getSlots(state); + const { slots, slotProps } = getSlotsNext(state); return ( 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 dc59fde63a8ec1..7154e20454626e 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 a661a4fe86a166..f10bdfe29e6665 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 38d7a22066ae90..c95072f03c4c93 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/renderCardFooter.tsx b/packages/react-components/react-card/src/components/CardFooter/renderCardFooter.tsx index 129e9ba10dc95a..2e002dbc7ec8d7 100644 --- a/packages/react-components/react-card/src/components/CardFooter/renderCardFooter.tsx +++ b/packages/react-components/react-card/src/components/CardFooter/renderCardFooter.tsx @@ -1,12 +1,16 @@ -import * as React from 'react'; -import { getSlots } from '@fluentui/react-utilities'; +/** @jsxRuntime classic */ +/** @jsx createElement */ + +import { createElement } from '@fluentui/react-jsx-runtime'; + +import { getSlotsNext } from '@fluentui/react-utilities'; import type { CardFooterSlots, CardFooterState } from './CardFooter.types'; /** * Render the final JSX of CardFooter. */ export const renderCardFooter_unstable = (state: CardFooterState) => { - const { slots, slotProps } = getSlots(state); + const { slots, slotProps } = getSlotsNext(state); return ( 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 10b158648ee693..483542a78b1308 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 4c35f766d4d846..6f516cdf246ba4 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/renderCardHeader.tsx b/packages/react-components/react-card/src/components/CardHeader/renderCardHeader.tsx index 46649f68fc4968..50df7c35a3236c 100644 --- a/packages/react-components/react-card/src/components/CardHeader/renderCardHeader.tsx +++ b/packages/react-components/react-card/src/components/CardHeader/renderCardHeader.tsx @@ -1,12 +1,16 @@ -import * as React from 'react'; -import { getSlots } from '@fluentui/react-utilities'; +/** @jsxRuntime classic */ +/** @jsx createElement */ + +import { createElement } from '@fluentui/react-jsx-runtime'; + +import { getSlotsNext } from '@fluentui/react-utilities'; import type { CardHeaderSlots, CardHeaderState } from './CardHeader.types'; /** * Render the final JSX of CardHeader. */ export const renderCardHeader_unstable = (state: CardHeaderState) => { - const { slots, slotProps } = getSlots(state); + const { slots, slotProps } = getSlotsNext(state); return ( 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 2db087a5985365..3f1f487923d6cf 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 1945aed07ea749..f9afcaf1ea6991 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 3673e23eddfe42..5b3c4eedc68b2c 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/renderCardPreview.tsx b/packages/react-components/react-card/src/components/CardPreview/renderCardPreview.tsx index f85b88f18e66c7..ce7491ba7af4da 100644 --- a/packages/react-components/react-card/src/components/CardPreview/renderCardPreview.tsx +++ b/packages/react-components/react-card/src/components/CardPreview/renderCardPreview.tsx @@ -1,12 +1,16 @@ -import * as React from 'react'; -import { getSlots } from '@fluentui/react-utilities'; +/** @jsxRuntime classic */ +/** @jsx createElement */ + +import { createElement } from '@fluentui/react-jsx-runtime'; + +import { getSlotsNext } from '@fluentui/react-utilities'; import type { CardPreviewSlots, CardPreviewState } from './CardPreview.types'; /** * Render the final JSX of CardPreview. */ export const renderCardPreview_unstable = (state: CardPreviewState) => { - const { slots, slotProps } = getSlots(state); + const { slots, slotProps } = getSlotsNext(state); return ( 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 6f711c44fba094..2f578992522092 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 77f88408cbd839..a3d988f29a1728 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/.npmignore b/packages/react-components/react-checkbox/.npmignore index f7ce568a6dbf7c..26904cdfffc9bd 100644 --- a/packages/react-components/react-checkbox/.npmignore +++ b/packages/react-components/react-checkbox/.npmignore @@ -28,3 +28,9 @@ __tests__ .eslint* .git* .prettierignore + +# exclude gitignore patterns explicitly +!lib +!lib-commonjs +!lib-amd +!dist/*.d.ts diff --git a/packages/react-components/react-checkbox/CHANGELOG.json b/packages/react-components/react-checkbox/CHANGELOG.json index e042ab39d4fd0a..7fe8bd5e7f96cc 100644 --- a/packages/react-components/react-checkbox/CHANGELOG.json +++ b/packages/react-components/react-checkbox/CHANGELOG.json @@ -1,6 +1,39 @@ { "name": "@fluentui/react-checkbox", "entries": [ + { + "date": "Mon, 24 Apr 2023 08:12:32 GMT", + "tag": "@fluentui/react-checkbox_v9.1.11", + "version": "9.1.11", + "comments": { + "patch": [ + { + "author": "bernardo.sunderhus@gmail.com", + "package": "@fluentui/react-checkbox", + "commit": "a8d61a5dde83114c2746c8bba8a0410afea8fa65", + "comment": "chore: adopt custom JSX pragma" + }, + { + "author": "beachball", + "package": "@fluentui/react-checkbox", + "comment": "Bump @fluentui/react-field to v9.1.1", + "commit": "505433ac64f144c9cca456097413d6af4582e5ee" + }, + { + "author": "beachball", + "package": "@fluentui/react-checkbox", + "comment": "Bump @fluentui/react-jsx-runtime to v9.0.0-alpha.2", + "commit": "505433ac64f144c9cca456097413d6af4582e5ee" + }, + { + "author": "beachball", + "package": "@fluentui/react-checkbox", + "comment": "Bump @fluentui/react-label to v9.1.10", + "commit": "505433ac64f144c9cca456097413d6af4582e5ee" + } + ] + } + }, { "date": "Mon, 17 Apr 2023 17:53:46 GMT", "tag": "@fluentui/react-checkbox_v9.1.10", diff --git a/packages/react-components/react-checkbox/CHANGELOG.md b/packages/react-components/react-checkbox/CHANGELOG.md index a24e92d0975a9a..fe6bcf8a40474b 100644 --- a/packages/react-components/react-checkbox/CHANGELOG.md +++ b/packages/react-components/react-checkbox/CHANGELOG.md @@ -1,9 +1,21 @@ # Change Log - @fluentui/react-checkbox -This log was last generated on Mon, 17 Apr 2023 17:53:46 GMT and should not be manually modified. +This log was last generated on Mon, 24 Apr 2023 08:12:32 GMT and should not be manually modified. +## [9.1.11](https://github.com/microsoft/fluentui/tree/@fluentui/react-checkbox_v9.1.11) + +Mon, 24 Apr 2023 08:12:32 GMT +[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-checkbox_v9.1.10..@fluentui/react-checkbox_v9.1.11) + +### Patches + +- chore: adopt custom JSX pragma ([PR #27607](https://github.com/microsoft/fluentui/pull/27607) by bernardo.sunderhus@gmail.com) +- Bump @fluentui/react-field to v9.1.1 ([commit](https://github.com/microsoft/fluentui/commit/505433ac64f144c9cca456097413d6af4582e5ee) by beachball) +- Bump @fluentui/react-jsx-runtime to v9.0.0-alpha.2 ([commit](https://github.com/microsoft/fluentui/commit/505433ac64f144c9cca456097413d6af4582e5ee) by beachball) +- Bump @fluentui/react-label to v9.1.10 ([commit](https://github.com/microsoft/fluentui/commit/505433ac64f144c9cca456097413d6af4582e5ee) by beachball) + ## [9.1.10](https://github.com/microsoft/fluentui/tree/@fluentui/react-checkbox_v9.1.10) Mon, 17 Apr 2023 17:53:46 GMT diff --git a/packages/react-components/react-checkbox/jest.config.js b/packages/react-components/react-checkbox/jest.config.js index 276dda279da40e..fe5acb2984289a 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/package.json b/packages/react-components/react-checkbox/package.json index d3e9d644cae685..93b6a676f88f39 100644 --- a/packages/react-components/react-checkbox/package.json +++ b/packages/react-components/react-checkbox/package.json @@ -1,6 +1,6 @@ { "name": "@fluentui/react-checkbox", - "version": "9.1.10", + "version": "9.1.11", "description": "Fluent UI checkbox component", "main": "lib-commonjs/index.js", "module": "lib/index.js", @@ -32,9 +32,10 @@ "@fluentui/scripts-tasks": "*" }, "dependencies": { - "@fluentui/react-field": "^9.1.0", + "@fluentui/react-field": "^9.1.1", "@fluentui/react-icons": "^2.0.196", - "@fluentui/react-label": "^9.1.9", + "@fluentui/react-jsx-runtime": "9.0.0-alpha.2", + "@fluentui/react-label": "^9.1.10", "@fluentui/react-shared-contexts": "^9.3.3", "@fluentui/react-tabster": "^9.6.5", "@fluentui/react-theme": "^9.1.7", diff --git a/packages/react-components/react-checkbox/src/components/Checkbox/Checkbox.tsx b/packages/react-components/react-checkbox/src/components/Checkbox/Checkbox.tsx index d4fa5a1bab26a8..a780c422c1c7f6 100644 --- a/packages/react-components/react-checkbox/src/components/Checkbox/Checkbox.tsx +++ b/packages/react-components/react-checkbox/src/components/Checkbox/Checkbox.tsx @@ -1,10 +1,10 @@ import * as React from 'react'; import { useCheckbox_unstable } from './useCheckbox'; import { renderCheckbox_unstable } from './renderCheckbox'; -import { useCheckboxStyles_unstable } from './useCheckboxStyles'; +import { useCheckboxStyles_unstable } from './useCheckboxStyles.styles'; import type { CheckboxProps } from './Checkbox.types'; import type { ForwardRefComponent } from '@fluentui/react-utilities'; -import { useCustomStyleHooks_unstable } from '@fluentui/react-shared-contexts'; +import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts'; /** * Checkboxes give people a way to select one or more items from a group, @@ -15,8 +15,7 @@ export const Checkbox: ForwardRefComponent = React.forwardRef((pr useCheckboxStyles_unstable(state); - const { useAccordionHeaderStyles_unstable: useCustomStyles } = useCustomStyleHooks_unstable(); - useCustomStyles(state); + useCustomStyleHook_unstable('useCheckboxStyles_unstable')(state); return renderCheckbox_unstable(state); }); diff --git a/packages/react-components/react-checkbox/src/components/Checkbox/index.ts b/packages/react-components/react-checkbox/src/components/Checkbox/index.ts index 7d0737ecf30ec5..80df796a399fc1 100644 --- a/packages/react-components/react-checkbox/src/components/Checkbox/index.ts +++ b/packages/react-components/react-checkbox/src/components/Checkbox/index.ts @@ -2,4 +2,4 @@ export * from './Checkbox'; export * from './Checkbox.types'; export * from './renderCheckbox'; export * from './useCheckbox'; -export * from './useCheckboxStyles'; +export * from './useCheckboxStyles.styles'; diff --git a/packages/react-components/react-checkbox/src/components/Checkbox/renderCheckbox.tsx b/packages/react-components/react-checkbox/src/components/Checkbox/renderCheckbox.tsx index a8a55bc925097c..7a55ab5833815f 100644 --- a/packages/react-components/react-checkbox/src/components/Checkbox/renderCheckbox.tsx +++ b/packages/react-components/react-checkbox/src/components/Checkbox/renderCheckbox.tsx @@ -1,9 +1,13 @@ -import * as React from 'react'; -import { getSlots } from '@fluentui/react-utilities'; +/** @jsxRuntime classic */ +/** @jsx createElement */ + +import { createElement } from '@fluentui/react-jsx-runtime'; + +import { getSlotsNext } from '@fluentui/react-utilities'; import { CheckboxState, CheckboxSlots } from './Checkbox.types'; export const renderCheckbox_unstable = (state: CheckboxState) => { - const { slots, slotProps } = getSlots(state); + const { slots, slotProps } = getSlotsNext(state); return ( diff --git a/packages/react-components/react-checkbox/src/components/Checkbox/useCheckboxStyles.ts b/packages/react-components/react-checkbox/src/components/Checkbox/useCheckboxStyles.styles.ts similarity index 100% rename from packages/react-components/react-checkbox/src/components/Checkbox/useCheckboxStyles.ts rename to packages/react-components/react-checkbox/src/components/Checkbox/useCheckboxStyles.styles.ts diff --git a/packages/react-components/react-checkbox/src/testing/isConformant.ts b/packages/react-components/react-checkbox/src/testing/isConformant.ts index 2ffff9d342a7e8..0aad9515bbca63 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/.npmignore b/packages/react-components/react-combobox/.npmignore index f7ce568a6dbf7c..26904cdfffc9bd 100644 --- a/packages/react-components/react-combobox/.npmignore +++ b/packages/react-components/react-combobox/.npmignore @@ -28,3 +28,9 @@ __tests__ .eslint* .git* .prettierignore + +# exclude gitignore patterns explicitly +!lib +!lib-commonjs +!lib-amd +!dist/*.d.ts diff --git a/packages/react-components/react-combobox/CHANGELOG.json b/packages/react-components/react-combobox/CHANGELOG.json index 7d9cda9c1f56c6..94d236368cbc96 100644 --- a/packages/react-components/react-combobox/CHANGELOG.json +++ b/packages/react-components/react-combobox/CHANGELOG.json @@ -1,6 +1,33 @@ { "name": "@fluentui/react-combobox", "entries": [ + { + "date": "Mon, 24 Apr 2023 08:12:33 GMT", + "tag": "@fluentui/react-combobox_v9.2.11", + "version": "9.2.11", + "comments": { + "patch": [ + { + "author": "bernardo.sunderhus@gmail.com", + "package": "@fluentui/react-combobox", + "commit": "e5b5ac12b9221dbf0d3ec42a4b22a962746774b1", + "comment": "chore: adopt custom JSX pragma" + }, + { + "author": "beachball", + "package": "@fluentui/react-combobox", + "comment": "Bump @fluentui/react-field to v9.1.1", + "commit": "505433ac64f144c9cca456097413d6af4582e5ee" + }, + { + "author": "beachball", + "package": "@fluentui/react-combobox", + "comment": "Bump @fluentui/react-jsx-runtime to v9.0.0-alpha.2", + "commit": "505433ac64f144c9cca456097413d6af4582e5ee" + } + ] + } + }, { "date": "Mon, 17 Apr 2023 17:53:46 GMT", "tag": "@fluentui/react-combobox_v9.2.10", diff --git a/packages/react-components/react-combobox/CHANGELOG.md b/packages/react-components/react-combobox/CHANGELOG.md index 4881af921c99d2..c253c5604e4ccf 100644 --- a/packages/react-components/react-combobox/CHANGELOG.md +++ b/packages/react-components/react-combobox/CHANGELOG.md @@ -1,9 +1,20 @@ # Change Log - @fluentui/react-combobox -This log was last generated on Mon, 17 Apr 2023 17:53:46 GMT and should not be manually modified. +This log was last generated on Mon, 24 Apr 2023 08:12:33 GMT and should not be manually modified. +## [9.2.11](https://github.com/microsoft/fluentui/tree/@fluentui/react-combobox_v9.2.11) + +Mon, 24 Apr 2023 08:12:33 GMT +[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-combobox_v9.2.10..@fluentui/react-combobox_v9.2.11) + +### Patches + +- chore: adopt custom JSX pragma ([PR #27608](https://github.com/microsoft/fluentui/pull/27608) by bernardo.sunderhus@gmail.com) +- Bump @fluentui/react-field to v9.1.1 ([commit](https://github.com/microsoft/fluentui/commit/505433ac64f144c9cca456097413d6af4582e5ee) by beachball) +- Bump @fluentui/react-jsx-runtime to v9.0.0-alpha.2 ([commit](https://github.com/microsoft/fluentui/commit/505433ac64f144c9cca456097413d6af4582e5ee) by beachball) + ## [9.2.10](https://github.com/microsoft/fluentui/tree/@fluentui/react-combobox_v9.2.10) Mon, 17 Apr 2023 17:53:46 GMT diff --git a/packages/react-components/react-combobox/jest.config.js b/packages/react-components/react-combobox/jest.config.js index 42cc3e30eb2292..021405129645a4 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/package.json b/packages/react-components/react-combobox/package.json index c8d5be64a7800a..9ea81eec2d0da3 100644 --- a/packages/react-components/react-combobox/package.json +++ b/packages/react-components/react-combobox/package.json @@ -1,6 +1,6 @@ { "name": "@fluentui/react-combobox", - "version": "9.2.10", + "version": "9.2.11", "description": "Fluent UI React Combobox component", "main": "lib-commonjs/index.js", "module": "lib/index.js", @@ -34,8 +34,9 @@ "dependencies": { "@fluentui/keyboard-keys": "^9.0.2", "@fluentui/react-context-selector": "^9.1.18", - "@fluentui/react-field": "^9.1.0", + "@fluentui/react-field": "^9.1.1", "@fluentui/react-icons": "^2.0.196", + "@fluentui/react-jsx-runtime": "9.0.0-alpha.2", "@fluentui/react-portal": "^9.2.6", "@fluentui/react-positioning": "^9.5.10", "@fluentui/react-shared-contexts": "^9.3.3", 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 78956a9e8b26a1..94d929bbc1dc23 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/Combobox.tsx b/packages/react-components/react-combobox/src/components/Combobox/Combobox.tsx index 0b735b7325968d..146c04d14bf6bf 100644 --- a/packages/react-components/react-combobox/src/components/Combobox/Combobox.tsx +++ b/packages/react-components/react-combobox/src/components/Combobox/Combobox.tsx @@ -5,7 +5,7 @@ import { useComboboxStyles_unstable } from './useComboboxStyles'; import type { ComboboxProps } from './Combobox.types'; import { useComboboxContextValues } from '../../contexts/useComboboxContextValues'; import type { ForwardRefComponent } from '@fluentui/react-utilities'; -import { useCustomStyleHooks_unstable } from '@fluentui/react-shared-contexts'; +import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts'; /** * Combobox component: a selection control that allows users to choose from a set of possible options @@ -16,8 +16,7 @@ export const Combobox: ForwardRefComponent = React.forwardRef((pr useComboboxStyles_unstable(state); - const { useComboboxStyles_unstable: useCustomStyles } = useCustomStyleHooks_unstable(); - useCustomStyles(state); + useCustomStyleHook_unstable('useComboboxStyles_unstable')(state); return renderCombobox_unstable(state, contextValues); }); diff --git a/packages/react-components/react-combobox/src/components/Combobox/renderCombobox.tsx b/packages/react-components/react-combobox/src/components/Combobox/renderCombobox.tsx index 88be0cfdf12acb..d52f0b32ab2b2c 100644 --- a/packages/react-components/react-combobox/src/components/Combobox/renderCombobox.tsx +++ b/packages/react-components/react-combobox/src/components/Combobox/renderCombobox.tsx @@ -1,6 +1,11 @@ -import * as React from 'react'; +/** @jsxRuntime classic */ +/** @jsx createElement */ + import { Portal } from '@fluentui/react-portal'; -import { getSlots } from '@fluentui/react-utilities'; + +import { createElement } from '@fluentui/react-jsx-runtime'; + +import { getSlotsNext } from '@fluentui/react-utilities'; import { ComboboxContext } from '../../contexts/ComboboxContext'; import type { ComboboxContextValues, ComboboxState, ComboboxSlots } from './Combobox.types'; @@ -8,7 +13,7 @@ import type { ComboboxContextValues, ComboboxState, ComboboxSlots } from './Comb * Render the final JSX of Combobox */ export const renderCombobox_unstable = (state: ComboboxState, contextValues: ComboboxContextValues) => { - const { slots, slotProps } = getSlots(state); + const { slots, slotProps } = getSlotsNext(state); return ( 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 ff0ef098d580b6..b394426c170417 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/components/Dropdown/Dropdown.tsx b/packages/react-components/react-combobox/src/components/Dropdown/Dropdown.tsx index 4e5ec5133e9728..daed766849a9d4 100644 --- a/packages/react-components/react-combobox/src/components/Dropdown/Dropdown.tsx +++ b/packages/react-components/react-combobox/src/components/Dropdown/Dropdown.tsx @@ -5,7 +5,7 @@ import { useDropdownStyles_unstable } from './useDropdownStyles'; import type { DropdownProps } from './Dropdown.types'; import { useComboboxContextValues } from '../../contexts/useComboboxContextValues'; import type { ForwardRefComponent } from '@fluentui/react-utilities'; -import { useCustomStyleHooks_unstable } from '@fluentui/react-shared-contexts'; +import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts'; /** * Dropdown component: a selection control that allows users to choose from a set of possible options @@ -16,8 +16,7 @@ export const Dropdown: ForwardRefComponent = React.forwardRef((pr useDropdownStyles_unstable(state); - const { useDropdownStyles_unstable: useCustomStyles } = useCustomStyleHooks_unstable(); - useCustomStyles(state); + useCustomStyleHook_unstable('useDropdownStyles_unstable')(state); return renderDropdown_unstable(state, contextValues); }); diff --git a/packages/react-components/react-combobox/src/components/Dropdown/renderDropdown.tsx b/packages/react-components/react-combobox/src/components/Dropdown/renderDropdown.tsx index 37116cb18015ee..5a01a3706f128c 100644 --- a/packages/react-components/react-combobox/src/components/Dropdown/renderDropdown.tsx +++ b/packages/react-components/react-combobox/src/components/Dropdown/renderDropdown.tsx @@ -1,6 +1,11 @@ -import * as React from 'react'; +/** @jsxRuntime classic */ +/** @jsx createElement */ + import { Portal } from '@fluentui/react-portal'; -import { getSlots } from '@fluentui/react-utilities'; + +import { createElement } from '@fluentui/react-jsx-runtime'; + +import { getSlotsNext } from '@fluentui/react-utilities'; import { ComboboxContext } from '../../contexts/ComboboxContext'; import type { DropdownContextValues, DropdownState, DropdownSlots } from './Dropdown.types'; @@ -8,7 +13,7 @@ import type { DropdownContextValues, DropdownState, DropdownSlots } from './Drop * Render the final JSX of Dropdown */ export const renderDropdown_unstable = (state: DropdownState, contextValues: DropdownContextValues) => { - const { slots, slotProps } = getSlots(state); + const { slots, slotProps } = getSlotsNext(state); return ( diff --git a/packages/react-components/react-combobox/src/components/Listbox/Listbox.tsx b/packages/react-components/react-combobox/src/components/Listbox/Listbox.tsx index 2f6773ae428457..fb0bc844fcda37 100644 --- a/packages/react-components/react-combobox/src/components/Listbox/Listbox.tsx +++ b/packages/react-components/react-combobox/src/components/Listbox/Listbox.tsx @@ -5,7 +5,7 @@ import { useListboxStyles_unstable } from './useListboxStyles'; import type { ListboxProps } from './Listbox.types'; import { useListboxContextValues } from '../../contexts/useListboxContextValues'; import type { ForwardRefComponent } from '@fluentui/react-utilities'; -import { useCustomStyleHooks_unstable } from '@fluentui/react-shared-contexts'; +import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts'; /** * Listbox component: a standalone selection control, or the popup in a Combobox @@ -16,8 +16,7 @@ export const Listbox: ForwardRefComponent = React.forwardRef((prop useListboxStyles_unstable(state); - const { useListboxStyles_unstable: useCustomStyles } = useCustomStyleHooks_unstable(); - useCustomStyles(state); + useCustomStyleHook_unstable('useListboxStyles_unstable')(state); return renderListbox_unstable(state, contextValues); }); diff --git a/packages/react-components/react-combobox/src/components/Listbox/renderListbox.tsx b/packages/react-components/react-combobox/src/components/Listbox/renderListbox.tsx index 725c0ac6a7cf5b..a4cb18ecb9a7e6 100644 --- a/packages/react-components/react-combobox/src/components/Listbox/renderListbox.tsx +++ b/packages/react-components/react-combobox/src/components/Listbox/renderListbox.tsx @@ -1,5 +1,9 @@ -import * as React from 'react'; -import { getSlots } from '@fluentui/react-utilities'; +/** @jsxRuntime classic */ +/** @jsx createElement */ + +import { createElement } from '@fluentui/react-jsx-runtime'; + +import { getSlotsNext } from '@fluentui/react-utilities'; import type { ListboxContextValues, ListboxState, ListboxSlots } from './Listbox.types'; import { ListboxContext } from '../../contexts/ListboxContext'; @@ -7,7 +11,7 @@ import { ListboxContext } from '../../contexts/ListboxContext'; * Render the final JSX of Listbox */ export const renderListbox_unstable = (state: ListboxState, contextValues: ListboxContextValues) => { - const { slots, slotProps } = getSlots(state); + const { slots, slotProps } = getSlotsNext(state); return ( diff --git a/packages/react-components/react-combobox/src/components/Option/Option.tsx b/packages/react-components/react-combobox/src/components/Option/Option.tsx index 041806912d3968..906572dc49a987 100644 --- a/packages/react-components/react-combobox/src/components/Option/Option.tsx +++ b/packages/react-components/react-combobox/src/components/Option/Option.tsx @@ -4,7 +4,7 @@ import { renderOption_unstable } from './renderOption'; import { useOptionStyles_unstable } from './useOptionStyles'; import type { OptionProps } from './Option.types'; import type { ForwardRefComponent } from '@fluentui/react-utilities'; -import { useCustomStyleHooks_unstable } from '@fluentui/react-shared-contexts'; +import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts'; /** * Option component: a styled child option of a Combobox @@ -14,8 +14,7 @@ export const Option: ForwardRefComponent = React.forwardRef((props, useOptionStyles_unstable(state); - const { useOptionStyles_unstable: useCustomStyles } = useCustomStyleHooks_unstable(); - useCustomStyles(state); + useCustomStyleHook_unstable('useOptionStyles_unstable')(state); return renderOption_unstable(state); }); diff --git a/packages/react-components/react-combobox/src/components/Option/renderOption.tsx b/packages/react-components/react-combobox/src/components/Option/renderOption.tsx index 9d2b459fce6b5e..dd71fc2e0711d9 100644 --- a/packages/react-components/react-combobox/src/components/Option/renderOption.tsx +++ b/packages/react-components/react-combobox/src/components/Option/renderOption.tsx @@ -1,12 +1,16 @@ -import * as React from 'react'; -import { getSlots } from '@fluentui/react-utilities'; +/** @jsxRuntime classic */ +/** @jsx createElement */ + +import { createElement } from '@fluentui/react-jsx-runtime'; + +import { getSlotsNext } from '@fluentui/react-utilities'; import type { OptionState, OptionSlots } from './Option.types'; /** * Render the final JSX of Option */ export const renderOption_unstable = (state: OptionState) => { - const { slots, slotProps } = getSlots(state); + const { slots, slotProps } = getSlotsNext(state); return ( diff --git a/packages/react-components/react-combobox/src/components/OptionGroup/OptionGroup.tsx b/packages/react-components/react-combobox/src/components/OptionGroup/OptionGroup.tsx index 106543e867ffb3..b5a23c3aa6914a 100644 --- a/packages/react-components/react-combobox/src/components/OptionGroup/OptionGroup.tsx +++ b/packages/react-components/react-combobox/src/components/OptionGroup/OptionGroup.tsx @@ -4,7 +4,7 @@ import { renderOptionGroup_unstable } from './renderOptionGroup'; import { useOptionGroupStyles_unstable } from './useOptionGroupStyles'; import type { OptionGroupProps } from './OptionGroup.types'; import type { ForwardRefComponent } from '@fluentui/react-utilities'; -import { useCustomStyleHooks_unstable } from '@fluentui/react-shared-contexts'; +import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts'; /** * OptionGroup component: allows grouping of Option components within a Combobox @@ -14,8 +14,7 @@ export const OptionGroup: ForwardRefComponent = React.forwardR useOptionGroupStyles_unstable(state); - const { useOptionGroupStyles_unstable: useCustomStyles } = useCustomStyleHooks_unstable(); - useCustomStyles(state); + useCustomStyleHook_unstable('useOptionGroupStyles_unstable')(state); return renderOptionGroup_unstable(state); }); diff --git a/packages/react-components/react-combobox/src/components/OptionGroup/renderOptionGroup.tsx b/packages/react-components/react-combobox/src/components/OptionGroup/renderOptionGroup.tsx index b425d91ba98853..6a79640ad8cfe8 100644 --- a/packages/react-components/react-combobox/src/components/OptionGroup/renderOptionGroup.tsx +++ b/packages/react-components/react-combobox/src/components/OptionGroup/renderOptionGroup.tsx @@ -1,12 +1,16 @@ -import * as React from 'react'; -import { getSlots } from '@fluentui/react-utilities'; +/** @jsxRuntime classic */ +/** @jsx createElement */ + +import { createElement } from '@fluentui/react-jsx-runtime'; + +import { getSlotsNext } from '@fluentui/react-utilities'; import type { OptionGroupState, OptionGroupSlots } from './OptionGroup.types'; /** * Render the final JSX of OptionGroup */ export const renderOptionGroup_unstable = (state: OptionGroupState) => { - const { slots, slotProps } = getSlots(state); + const { slots, slotProps } = getSlotsNext(state); return ( diff --git a/packages/react-components/react-combobox/src/testing/isConformant.ts b/packages/react-components/react-combobox/src/testing/isConformant.ts index 77f88408cbd839..a3d988f29a1728 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/.npmignore b/packages/react-components/react-components/.npmignore index f7ce568a6dbf7c..26904cdfffc9bd 100644 --- a/packages/react-components/react-components/.npmignore +++ b/packages/react-components/react-components/.npmignore @@ -28,3 +28,9 @@ __tests__ .eslint* .git* .prettierignore + +# exclude gitignore patterns explicitly +!lib +!lib-commonjs +!lib-amd +!dist/*.d.ts diff --git a/packages/react-components/react-components/CHANGELOG.json b/packages/react-components/react-components/CHANGELOG.json index 03610f2ae28007..5f689be48f6882 100644 --- a/packages/react-components/react-components/CHANGELOG.json +++ b/packages/react-components/react-components/CHANGELOG.json @@ -1,6 +1,313 @@ { "name": "@fluentui/react-components", "entries": [ + { + "date": "Mon, 24 Apr 2023 08:12:30 GMT", + "tag": "@fluentui/react-components_v9.19.1", + "version": "9.19.1", + "comments": { + "patch": [ + { + "author": "bernardo.sunderhus@gmail.com", + "package": "@fluentui/react-accordion", + "commit": "93de47a555e31b091d76657bd25c0180e290eee0", + "comment": "feat: adopt custom JSX pragma" + }, + { + "author": "bernardo.sunderhus@gmail.com", + "package": "@fluentui/react-avatar", + "commit": "d340ff4b1c3aa7e1818780ec4d41f46c86e451c9", + "comment": "chore: adopt custom JSX pragma" + }, + { + "author": "bernardo.sunderhus@gmail.com", + "package": "@fluentui/react-badge", + "commit": "477d9f6d64d777f857dedec6a71e58baa31fbe30", + "comment": "chore: adopt custom JSX pragma" + }, + { + "author": "bernardo.sunderhus@gmail.com", + "package": "@fluentui/react-button", + "commit": "d65eb9f6ec233104ab627532468fa64d71bbd702", + "comment": "chore: adopt custom JSX pragma" + }, + { + "author": "bernardo.sunderhus@gmail.com", + "package": "@fluentui/react-card", + "commit": "2c2438a98002403210039275ce54f94367f2b3fe", + "comment": "chore: adopt custom JSX pragma" + }, + { + "author": "bernardo.sunderhus@gmail.com", + "package": "@fluentui/react-checkbox", + "commit": "a8d61a5dde83114c2746c8bba8a0410afea8fa65", + "comment": "chore: adopt custom JSX pragma" + }, + { + "author": "bernardo.sunderhus@gmail.com", + "package": "@fluentui/react-combobox", + "commit": "e5b5ac12b9221dbf0d3ec42a4b22a962746774b1", + "comment": "chore: adopt custom JSX pragma" + }, + { + "author": "bernardo.sunderhus@gmail.com", + "package": "@fluentui/react-components", + "commit": "4dde6727c7e7fe7fbf6fedb4e1619deddbd3e16a", + "comment": "removes TreeItemId type from react-tree" + }, + { + "author": "bernardo.sunderhus@gmail.com", + "package": "@fluentui/react-datepicker-compat", + "commit": "59ef51fcd9e2ab84a4a480e0a02bc05ecd3a6697", + "comment": "chore: adopt custom JSX pragma" + }, + { + "author": "bernardo.sunderhus@gmail.com", + "package": "@fluentui/react-dialog", + "commit": "b287dc6426477a8ec03b6a845ea0ee3ba0bfb726", + "comment": "bugfix: DialogTitle root as h2 by default" + }, + { + "author": "bernardo.sunderhus@gmail.com", + "package": "@fluentui/react-dialog", + "commit": "85c36e249b33b0bad79be4edd1a943dfc5233b11", + "comment": "bugfix: remove caret from react-jsx-runtime prerelease dependency" + }, + { + "author": "bernardo.sunderhus@gmail.com", + "package": "@fluentui/react-dialog", + "commit": "1227882a7a3813f21c45df6eb27aa65a89a5c45c", + "comment": "chore: hoist tabster modal attributes to Dialog component" + }, + { + "author": "bernardo.sunderhus@gmail.com", + "package": "@fluentui/react-divider", + "commit": "ec5f15a5fb78104ff874f1f16eda663fecde1704", + "comment": "chore: adopt custom JSX pragma" + }, + { + "author": "bernardo.sunderhus@gmail.com", + "package": "@fluentui/react-field", + "commit": "7e199488cd02df78788b833bf29ed7e312b9e41f", + "comment": "chore: adopt custom JSX pragma" + }, + { + "author": "bernardo.sunderhus@gmail.com", + "package": "@fluentui/react-image", + "commit": "a6ff85541907771d5172fbd804e05a380fd0a906", + "comment": "chore: adopt custom JSX pragma" + }, + { + "author": "bernardo.sunderhus@gmail.com", + "package": "@fluentui/react-input", + "commit": "e3f0d22908c3c70c89a984a4025a76eb66a0928d", + "comment": "chore: adopt custom JSX pragma" + }, + { + "author": "bernardo.sunderhus@gmail.com", + "package": "@fluentui/react-label", + "commit": "b61892e1d2e6b8bef5b5b1ba22e08247238fb45c", + "comment": "chore: adopt custom JSX pragma" + }, + { + "author": "bernardo.sunderhus@gmail.com", + "package": "@fluentui/react-link", + "commit": "a781d26259ea8fc330842aceb439edf2b1378288", + "comment": "chore: adopt custom JSX pragma" + }, + { + "author": "bernardo.sunderhus@gmail.com", + "package": "@fluentui/react-menu", + "commit": "85c36e249b33b0bad79be4edd1a943dfc5233b11", + "comment": "bugfix: remove caret from react-jsx-runtime prerelease dependency" + }, + { + "author": "bernardo.sunderhus@gmail.com", + "package": "@fluentui/react-persona", + "commit": "4f02d916ac12350bd7323d02961fde2de7658658", + "comment": "chore: adopt custom JSX pragma" + }, + { + "author": "bernardo.sunderhus@gmail.com", + "package": "@fluentui/react-popover", + "commit": "92f70e62b4c8256f81aae5d521477af851656f5d", + "comment": "bugfix: ensure legacyTrapFocus works properly" + }, + { + "author": "bernardo.sunderhus@gmail.com", + "package": "@fluentui/react-popover", + "commit": "85c36e249b33b0bad79be4edd1a943dfc5233b11", + "comment": "bugfix: remove caret from react-jsx-runtime prerelease dependency" + }, + { + "author": "bernardo.sunderhus@gmail.com", + "package": "@fluentui/react-progress", + "commit": "4a712dff672b89d0407040354652993822cb541f", + "comment": "chore: adopt custom JSX pragma" + }, + { + "author": "bernardo.sunderhus@gmail.com", + "package": "@fluentui/react-provider", + "commit": "85c36e249b33b0bad79be4edd1a943dfc5233b11", + "comment": "bugfix: remove caret from react-jsx-runtime prerelease dependency" + }, + { + "author": "bernardo.sunderhus@gmail.com", + "package": "@fluentui/react-radio", + "commit": "4b4c462351678e8b6f81e3955d6d0a4a25cb212c", + "comment": "chore: adopt custom JSX pragma" + }, + { + "author": "bernardo.sunderhus@gmail.com", + "package": "@fluentui/react-select", + "commit": "fa11c3889e6606bf7b0f8693b75f470b61da5a68", + "comment": "chore: adopt custom JSX pragma" + }, + { + "author": "bernardo.sunderhus@gmail.com", + "package": "@fluentui/react-slider", + "commit": "1013f6c9298ee3bc942544f8e4634c225c222db2", + "comment": "chore: adopt custom JSX pragma" + }, + { + "author": "bernardo.sunderhus@gmail.com", + "package": "@fluentui/react-spinbutton", + "commit": "30931f6ca6133ba309323814aa3785abe26378b6", + "comment": "chore: adopt custom JSX pragma" + }, + { + "author": "bernardo.sunderhus@gmail.com", + "package": "@fluentui/react-spinner", + "commit": "cc2d9e296c0a45b6af258e5e3e13b8371f8602d3", + "comment": "chore: adopt custom JSX pragma" + }, + { + "author": "bernardo.sunderhus@gmail.com", + "package": "@fluentui/react-switch", + "commit": "3af4f74b06db2bb4a1a85361fd7b4595c0e97921", + "comment": "chore: adopt custom JSX pragma" + }, + { + "author": "bernardo.sunderhus@gmail.com", + "package": "@fluentui/react-table", + "commit": "85c36e249b33b0bad79be4edd1a943dfc5233b11", + "comment": "bugfix: remove caret from react-jsx-runtime prerelease dependency" + }, + { + "author": "bernardo.sunderhus@gmail.com", + "package": "@fluentui/react-tabs", + "commit": "fe299ee315a83fdafe7fb3e3cbd2075cc19867e7", + "comment": "chore: adopts custom JSX pragma" + }, + { + "author": "bernardo.sunderhus@gmail.com", + "package": "@fluentui/react-text", + "commit": "8b1ce88b43df03b09d0251921a01c0f0499d1cbe", + "comment": "chore: adopt custom JSX pragma" + }, + { + "author": "bernardo.sunderhus@gmail.com", + "package": "@fluentui/react-textarea", + "commit": "4ca91d59dad4b9ad26955d59db15b81b7dfe6faa", + "comment": "chore: adopt custom JSX pragma" + }, + { + "author": "bernardo.sunderhus@gmail.com", + "package": "@fluentui/react-toolbar", + "commit": "85c36e249b33b0bad79be4edd1a943dfc5233b11", + "comment": "bugfix: remove caret from react-jsx-runtime prerelease dependency" + }, + { + "author": "bernardo.sunderhus@gmail.com", + "package": "@fluentui/react-tooltip", + "commit": "cf79cc20319c377dda47c0a2b135eeb1b5b7efdf", + "comment": "chore: adopt custom JSX pragma" + } + ], + "prerelease": [ + { + "author": "bernardo.sunderhus@gmail.com", + "package": "@fluentui/react-alert", + "commit": "85c36e249b33b0bad79be4edd1a943dfc5233b11", + "comment": "bugfix: remove caret from react-jsx-runtime prerelease dependency" + }, + { + "author": "bernardo.sunderhus@gmail.com", + "package": "@fluentui/react-data-grid-react-window", + "commit": "85c36e249b33b0bad79be4edd1a943dfc5233b11", + "comment": "bugfix: remove caret from react-jsx-runtime prerelease dependency" + }, + { + "author": "bernardo.sunderhus@gmail.com", + "package": "@fluentui/react-infobutton", + "commit": "dd76eca6f3584188994575d1d15d805a24ee9a91", + "comment": "chore: adopt custom JSX pragma" + }, + { + "author": "bernardo.sunderhus@gmail.com", + "package": "@fluentui/react-jsx-runtime", + "commit": "391878bf4d8a8210a8279a6ced8bf9a64daf4c64", + "comment": "chore: simplify createElement method" + }, + { + "author": "bernardo.sunderhus@gmail.com", + "package": "@fluentui/react-skeleton", + "commit": "c899af235684ed0e2745db9c8e394692865b6765", + "comment": "chore: adopt custom JSX pragma" + }, + { + "author": "bernardo.sunderhus@gmail.com", + "package": "@fluentui/react-tree", + "commit": "85c36e249b33b0bad79be4edd1a943dfc5233b11", + "comment": "bugfix: remove caret from react-jsx-runtime prerelease dependency" + }, + { + "author": "bernardo.sunderhus@gmail.com", + "package": "@fluentui/react-tree", + "commit": "acbc5fcb1381e9adcc4e1fa678a374d42a79438b", + "comment": "bugfix: fix parent navigation after independency from id" + }, + { + "author": "bernardo.sunderhus@gmail.com", + "package": "@fluentui/react-tree", + "commit": "4dde6727c7e7fe7fbf6fedb4e1619deddbd3e16a", + "comment": "feat: value property over id" + }, + { + "author": "bernardo.sunderhus@gmail.com", + "package": "@fluentui/react-tree", + "commit": "ab5e8979917780ec8cf6b3b08b3696fc1b7a83f4", + "comment": "chore: restructure stories, add separate category for flat tree" + }, + { + "author": "bernardo.sunderhus@gmail.com", + "package": "@fluentui/react-virtualizer", + "commit": "142c07abdeedea8f6b2e0cc15acf02795ce7f0fc", + "comment": "chore: adopt custom JSX pragma" + } + ], + "minor": [ + { + "author": "esteban.230@hotmail.com", + "package": "@fluentui/react-datepicker-compat", + "commit": "f7d88ee6fb582989efc057880ddfe60228649189", + "comment": "feat: Add error handling to DatePicker." + }, + { + "author": "esteban.230@hotmail.com", + "package": "@fluentui/react-datepicker-compat", + "commit": "bb8dfe06f4f2910eef1561c76410bf91b009fa37", + "comment": "feat: Move DatePicker compat to stable." + }, + { + "author": "esteban.230@hotmail.com", + "package": "@fluentui/react-datepicker-compat", + "commit": "011c6f0665a03aa804aac1e0f900e70229518c7c", + "comment": "feat: Refactor DatePicker to remove Field and error handling logic." + } + ] + } + }, { "date": "Mon, 17 Apr 2023 17:53:43 GMT", "tag": "@fluentui/react-components_v9.19.0", diff --git a/packages/react-components/react-components/CHANGELOG.md b/packages/react-components/react-components/CHANGELOG.md index 3562b3783a9518..4088303cffc01d 100644 --- a/packages/react-components/react-components/CHANGELOG.md +++ b/packages/react-components/react-components/CHANGELOG.md @@ -1,9 +1,113 @@ # Change Log - @fluentui/react-components -This log was last generated on Mon, 17 Apr 2023 17:53:43 GMT and should not be manually modified. +This log was last generated on Mon, 24 Apr 2023 08:12:30 GMT and should not be manually modified. +## [9.19.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-components_v9.19.1) + +Mon, 24 Apr 2023 08:12:30 GMT +[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-components_v9.19.0..@fluentui/react-components_v9.19.1) + +### Minor changes + +- `@fluentui/react-datepicker-compat` + - feat: Add error handling to DatePicker. ([PR #27637](https://github.com/microsoft/fluentui/pull/27637) by esteban.230@hotmail.com) + - feat: Move DatePicker compat to stable. ([PR #27378](https://github.com/microsoft/fluentui/pull/27378) by esteban.230@hotmail.com) + - feat: Refactor DatePicker to remove Field and error handling logic. ([PR #27509](https://github.com/microsoft/fluentui/pull/27509) by esteban.230@hotmail.com) + +### Patches + +- `@fluentui/react-accordion` + - feat: adopt custom JSX pragma ([PR #27601](https://github.com/microsoft/fluentui/pull/27601) by bernardo.sunderhus@gmail.com) +- `@fluentui/react-avatar` + - chore: adopt custom JSX pragma ([PR #27602](https://github.com/microsoft/fluentui/pull/27602) by bernardo.sunderhus@gmail.com) +- `@fluentui/react-badge` + - chore: adopt custom JSX pragma ([PR #27603](https://github.com/microsoft/fluentui/pull/27603) by bernardo.sunderhus@gmail.com) +- `@fluentui/react-button` + - chore: adopt custom JSX pragma ([PR #27605](https://github.com/microsoft/fluentui/pull/27605) by bernardo.sunderhus@gmail.com) +- `@fluentui/react-card` + - chore: adopt custom JSX pragma ([PR #27606](https://github.com/microsoft/fluentui/pull/27606) by bernardo.sunderhus@gmail.com) +- `@fluentui/react-checkbox` + - chore: adopt custom JSX pragma ([PR #27607](https://github.com/microsoft/fluentui/pull/27607) by bernardo.sunderhus@gmail.com) +- `@fluentui/react-combobox` + - chore: adopt custom JSX pragma ([PR #27608](https://github.com/microsoft/fluentui/pull/27608) by bernardo.sunderhus@gmail.com) +- `@fluentui/react-components` + - removes TreeItemId type from react-tree ([PR #27532](https://github.com/microsoft/fluentui/pull/27532) by bernardo.sunderhus@gmail.com) +- `@fluentui/react-datepicker-compat` + - chore: adopt custom JSX pragma ([PR #27609](https://github.com/microsoft/fluentui/pull/27609) by bernardo.sunderhus@gmail.com) +- `@fluentui/react-dialog` + - bugfix: DialogTitle root as h2 by default ([PR #27555](https://github.com/microsoft/fluentui/pull/27555) by bernardo.sunderhus@gmail.com) + - bugfix: remove caret from react-jsx-runtime prerelease dependency ([PR #27588](https://github.com/microsoft/fluentui/pull/27588) by bernardo.sunderhus@gmail.com) + - chore: hoist tabster modal attributes to Dialog component ([PR #27541](https://github.com/microsoft/fluentui/pull/27541) by bernardo.sunderhus@gmail.com) +- `@fluentui/react-divider` + - chore: adopt custom JSX pragma ([PR #27610](https://github.com/microsoft/fluentui/pull/27610) by bernardo.sunderhus@gmail.com) +- `@fluentui/react-field` + - chore: adopt custom JSX pragma ([PR #27612](https://github.com/microsoft/fluentui/pull/27612) by bernardo.sunderhus@gmail.com) +- `@fluentui/react-image` + - chore: adopt custom JSX pragma ([PR #27613](https://github.com/microsoft/fluentui/pull/27613) by bernardo.sunderhus@gmail.com) +- `@fluentui/react-input` + - chore: adopt custom JSX pragma ([PR #27614](https://github.com/microsoft/fluentui/pull/27614) by bernardo.sunderhus@gmail.com) +- `@fluentui/react-label` + - chore: adopt custom JSX pragma ([PR #27616](https://github.com/microsoft/fluentui/pull/27616) by bernardo.sunderhus@gmail.com) +- `@fluentui/react-link` + - chore: adopt custom JSX pragma ([PR #27620](https://github.com/microsoft/fluentui/pull/27620) by bernardo.sunderhus@gmail.com) +- `@fluentui/react-menu` + - bugfix: remove caret from react-jsx-runtime prerelease dependency ([PR #27588](https://github.com/microsoft/fluentui/pull/27588) by bernardo.sunderhus@gmail.com) +- `@fluentui/react-persona` + - chore: adopt custom JSX pragma ([PR #27619](https://github.com/microsoft/fluentui/pull/27619) by bernardo.sunderhus@gmail.com) +- `@fluentui/react-popover` + - bugfix: ensure legacyTrapFocus works properly ([PR #27574](https://github.com/microsoft/fluentui/pull/27574) by bernardo.sunderhus@gmail.com) + - bugfix: remove caret from react-jsx-runtime prerelease dependency ([PR #27588](https://github.com/microsoft/fluentui/pull/27588) by bernardo.sunderhus@gmail.com) +- `@fluentui/react-progress` + - chore: adopt custom JSX pragma ([PR #27617](https://github.com/microsoft/fluentui/pull/27617) by bernardo.sunderhus@gmail.com) +- `@fluentui/react-provider` + - bugfix: remove caret from react-jsx-runtime prerelease dependency ([PR #27588](https://github.com/microsoft/fluentui/pull/27588) by bernardo.sunderhus@gmail.com) +- `@fluentui/react-radio` + - chore: adopt custom JSX pragma ([PR #27618](https://github.com/microsoft/fluentui/pull/27618) by bernardo.sunderhus@gmail.com) +- `@fluentui/react-select` + - chore: adopt custom JSX pragma ([PR #27621](https://github.com/microsoft/fluentui/pull/27621) by bernardo.sunderhus@gmail.com) +- `@fluentui/react-slider` + - chore: adopt custom JSX pragma ([PR #27624](https://github.com/microsoft/fluentui/pull/27624) by bernardo.sunderhus@gmail.com) +- `@fluentui/react-spinbutton` + - chore: adopt custom JSX pragma ([PR #27625](https://github.com/microsoft/fluentui/pull/27625) by bernardo.sunderhus@gmail.com) +- `@fluentui/react-spinner` + - chore: adopt custom JSX pragma ([PR #27622](https://github.com/microsoft/fluentui/pull/27622) by bernardo.sunderhus@gmail.com) +- `@fluentui/react-switch` + - chore: adopt custom JSX pragma ([PR #27627](https://github.com/microsoft/fluentui/pull/27627) by bernardo.sunderhus@gmail.com) +- `@fluentui/react-table` + - bugfix: remove caret from react-jsx-runtime prerelease dependency ([PR #27588](https://github.com/microsoft/fluentui/pull/27588) by bernardo.sunderhus@gmail.com) +- `@fluentui/react-tabs` + - chore: adopts custom JSX pragma ([PR #27640](https://github.com/microsoft/fluentui/pull/27640) by bernardo.sunderhus@gmail.com) +- `@fluentui/react-text` + - chore: adopt custom JSX pragma ([PR #27626](https://github.com/microsoft/fluentui/pull/27626) by bernardo.sunderhus@gmail.com) +- `@fluentui/react-textarea` + - chore: adopt custom JSX pragma ([PR #27631](https://github.com/microsoft/fluentui/pull/27631) by bernardo.sunderhus@gmail.com) +- `@fluentui/react-toolbar` + - bugfix: remove caret from react-jsx-runtime prerelease dependency ([PR #27588](https://github.com/microsoft/fluentui/pull/27588) by bernardo.sunderhus@gmail.com) +- `@fluentui/react-tooltip` + - chore: adopt custom JSX pragma ([PR #27630](https://github.com/microsoft/fluentui/pull/27630) by bernardo.sunderhus@gmail.com) + +### Changes + +- `@fluentui/react-alert` + - bugfix: remove caret from react-jsx-runtime prerelease dependency ([PR #27588](https://github.com/microsoft/fluentui/pull/27588) by bernardo.sunderhus@gmail.com) +- `@fluentui/react-data-grid-react-window` + - bugfix: remove caret from react-jsx-runtime prerelease dependency ([PR #27588](https://github.com/microsoft/fluentui/pull/27588) by bernardo.sunderhus@gmail.com) +- `@fluentui/react-infobutton` + - chore: adopt custom JSX pragma ([PR #27615](https://github.com/microsoft/fluentui/pull/27615) by bernardo.sunderhus@gmail.com) +- `@fluentui/react-jsx-runtime` + - chore: simplify createElement method ([PR #27573](https://github.com/microsoft/fluentui/pull/27573) by bernardo.sunderhus@gmail.com) +- `@fluentui/react-skeleton` + - chore: adopt custom JSX pragma ([PR #27623](https://github.com/microsoft/fluentui/pull/27623) by bernardo.sunderhus@gmail.com) +- `@fluentui/react-tree` + - bugfix: remove caret from react-jsx-runtime prerelease dependency ([PR #27588](https://github.com/microsoft/fluentui/pull/27588) by bernardo.sunderhus@gmail.com) + - bugfix: fix parent navigation after independency from id ([PR #27642](https://github.com/microsoft/fluentui/pull/27642) by bernardo.sunderhus@gmail.com) + - feat: value property over id ([PR #27532](https://github.com/microsoft/fluentui/pull/27532) by bernardo.sunderhus@gmail.com) + - chore: restructure stories, add separate category for flat tree ([PR #27586](https://github.com/microsoft/fluentui/pull/27586) by bernardo.sunderhus@gmail.com) +- `@fluentui/react-virtualizer` + - chore: adopt custom JSX pragma ([PR #27629](https://github.com/microsoft/fluentui/pull/27629) by bernardo.sunderhus@gmail.com) + ## [9.19.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-components_v9.19.0) Mon, 17 Apr 2023 17:53:43 GMT 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 0586f75d6a974a..07a2faca39bb7f 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/etc/react-components.unstable.api.md b/packages/react-components/react-components/etc/react-components.unstable.api.md index 4ff2dcdb7324ce..43406b8392284c 100644 --- a/packages/react-components/react-components/etc/react-components.unstable.api.md +++ b/packages/react-components/react-components/etc/react-components.unstable.api.md @@ -53,7 +53,6 @@ import { treeClassNames } from '@fluentui/react-tree'; import { TreeContextValue } from '@fluentui/react-tree'; import { TreeItem } from '@fluentui/react-tree'; import { treeItemClassNames } from '@fluentui/react-tree'; -import { TreeItemId } from '@fluentui/react-tree'; import { TreeItemLayout } from '@fluentui/react-tree'; import { treeItemLayoutClassNames } from '@fluentui/react-tree'; import { TreeItemLayoutProps } from '@fluentui/react-tree'; @@ -215,8 +214,6 @@ export { TreeItem } export { treeItemClassNames } -export { TreeItemId } - export { TreeItemLayout } export { treeItemLayoutClassNames } diff --git a/packages/react-components/react-components/jest.config.js b/packages/react-components/react-components/jest.config.js index 97e86a16f06bf6..111eb73ae8db18 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/package.json b/packages/react-components/react-components/package.json index d2464a17618903..7a202015498eec 100644 --- a/packages/react-components/react-components/package.json +++ b/packages/react-components/react-components/package.json @@ -1,6 +1,6 @@ { "name": "@fluentui/react-components", - "version": "9.19.0", + "version": "9.19.1", "description": "Suite package for converged React components", "main": "lib-commonjs/index.js", "module": "lib/index.js", @@ -31,49 +31,49 @@ "@fluentui/scripts-tasks": "*" }, "dependencies": { - "@fluentui/react-accordion": "^9.1.9", - "@fluentui/react-alert": "9.0.0-beta.44", - "@fluentui/react-avatar": "^9.4.9", - "@fluentui/react-badge": "^9.1.9", - "@fluentui/react-button": "^9.3.9", - "@fluentui/react-card": "^9.0.7", - "@fluentui/react-checkbox": "^9.1.10", - "@fluentui/react-combobox": "^9.2.10", - "@fluentui/react-dialog": "^9.5.2", - "@fluentui/react-divider": "^9.2.9", - "@fluentui/react-field": "^9.1.0", - "@fluentui/react-image": "^9.1.6", - "@fluentui/react-infobutton": "9.0.0-beta.27", - "@fluentui/react-input": "^9.4.10", - "@fluentui/react-label": "^9.1.9", - "@fluentui/react-link": "^9.0.35", - "@fluentui/react-menu": "^9.7.9", + "@fluentui/react-accordion": "^9.1.10", + "@fluentui/react-alert": "9.0.0-beta.45", + "@fluentui/react-avatar": "^9.4.10", + "@fluentui/react-badge": "^9.1.10", + "@fluentui/react-button": "^9.3.10", + "@fluentui/react-card": "^9.0.8", + "@fluentui/react-checkbox": "^9.1.11", + "@fluentui/react-combobox": "^9.2.11", + "@fluentui/react-dialog": "^9.5.3", + "@fluentui/react-divider": "^9.2.10", + "@fluentui/react-field": "^9.1.1", + "@fluentui/react-image": "^9.1.7", + "@fluentui/react-infobutton": "9.0.0-beta.28", + "@fluentui/react-input": "^9.4.11", + "@fluentui/react-label": "^9.1.10", + "@fluentui/react-link": "^9.0.36", + "@fluentui/react-menu": "^9.7.10", "@fluentui/react-overflow": "^9.0.15", - "@fluentui/react-persona": "^9.2.8", + "@fluentui/react-persona": "^9.2.9", "@fluentui/react-portal": "^9.2.6", - "@fluentui/react-popover": "^9.5.9", + "@fluentui/react-popover": "^9.5.10", "@fluentui/react-positioning": "^9.5.10", - "@fluentui/react-progress": "^9.1.10", - "@fluentui/react-provider": "^9.5.3", - "@fluentui/react-radio": "^9.1.10", - "@fluentui/react-select": "^9.1.10", + "@fluentui/react-progress": "^9.1.11", + "@fluentui/react-provider": "^9.5.4", + "@fluentui/react-radio": "^9.1.11", + "@fluentui/react-select": "^9.1.11", "@fluentui/react-shared-contexts": "^9.3.3", - "@fluentui/react-skeleton": "9.0.0-beta.9", - "@fluentui/react-slider": "^9.1.10", - "@fluentui/react-spinbutton": "^9.2.10", - "@fluentui/react-spinner": "^9.1.9", - "@fluentui/react-switch": "^9.1.10", - "@fluentui/react-table": "^9.2.6", - "@fluentui/react-tabs": "^9.3.10", + "@fluentui/react-skeleton": "9.0.0-beta.10", + "@fluentui/react-slider": "^9.1.11", + "@fluentui/react-spinbutton": "^9.2.11", + "@fluentui/react-spinner": "^9.1.10", + "@fluentui/react-switch": "^9.1.11", + "@fluentui/react-table": "^9.2.7", + "@fluentui/react-tabs": "^9.3.11", "@fluentui/react-tabster": "^9.6.5", - "@fluentui/react-textarea": "^9.3.10", + "@fluentui/react-textarea": "^9.3.11", "@fluentui/react-theme": "^9.1.7", - "@fluentui/react-toolbar": "^9.1.10", - "@fluentui/react-tooltip": "^9.2.9", + "@fluentui/react-toolbar": "^9.1.11", + "@fluentui/react-tooltip": "^9.2.10", "@fluentui/react-utilities": "^9.8.0", - "@fluentui/react-text": "^9.3.6", - "@fluentui/react-virtualizer": "9.0.0-alpha.17", - "@fluentui/react-tree": "9.0.0-beta.11", + "@fluentui/react-text": "^9.3.7", + "@fluentui/react-virtualizer": "9.0.0-alpha.18", + "@fluentui/react-tree": "9.0.0-beta.12", "@griffel/react": "^1.5.2", "@swc/helpers": "^0.4.14" }, diff --git a/packages/react-components/react-components/src/index.ts b/packages/react-components/react-components/src/index.ts index da899f3541fe71..e01e20f27b10d5 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-components/src/unstable/index.ts b/packages/react-components/react-components/src/unstable/index.ts index 2a60e6660eb1e6..757959fabfaf71 100644 --- a/packages/react-components/react-components/src/unstable/index.ts +++ b/packages/react-components/react-components/src/unstable/index.ts @@ -125,7 +125,6 @@ export type { TreeItemLayoutState, TreeItemLayoutSlots, TreeItemLayoutProps, - TreeItemId, TreeContextValue, NestedTreeItem, FlatTree, diff --git a/packages/react-components/react-conformance-griffel/.npmignore b/packages/react-components/react-conformance-griffel/.npmignore index f7ce568a6dbf7c..26904cdfffc9bd 100644 --- a/packages/react-components/react-conformance-griffel/.npmignore +++ b/packages/react-components/react-conformance-griffel/.npmignore @@ -28,3 +28,9 @@ __tests__ .eslint* .git* .prettierignore + +# exclude gitignore patterns explicitly +!lib +!lib-commonjs +!lib-amd +!dist/*.d.ts diff --git a/packages/react-components/react-conformance-griffel/jest.config.js b/packages/react-components/react-conformance-griffel/jest.config.js index 6023f4a9b558fe..73b42aa998da69 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-conformance-griffel/package.json b/packages/react-components/react-conformance-griffel/package.json index 7bf3d251b79787..589493f7a459fb 100644 --- a/packages/react-components/react-conformance-griffel/package.json +++ b/packages/react-components/react-conformance-griffel/package.json @@ -29,7 +29,7 @@ "@types/react": ">=16.8.0 <19.0.0", "@types/react-dom": ">=16.8.0 <19.0.0", "typescript": "^4.3.0", - "@fluentui/react-conformance": "^0.15.8" + "@fluentui/react-conformance": "^0.16.0" }, "dependencies": { "@griffel/react": "^1.5.2", diff --git a/packages/react-components/react-context-selector/.npmignore b/packages/react-components/react-context-selector/.npmignore index f7ce568a6dbf7c..26904cdfffc9bd 100644 --- a/packages/react-components/react-context-selector/.npmignore +++ b/packages/react-components/react-context-selector/.npmignore @@ -28,3 +28,9 @@ __tests__ .eslint* .git* .prettierignore + +# exclude gitignore patterns explicitly +!lib +!lib-commonjs +!lib-amd +!dist/*.d.ts diff --git a/packages/react-components/react-context-selector/jest.config.js b/packages/react-components/react-context-selector/jest.config.js index 39023dd6182c60..dcd74005c508f8 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/.npmignore b/packages/react-components/react-data-grid-react-window/.npmignore index f7ce568a6dbf7c..26904cdfffc9bd 100644 --- a/packages/react-components/react-data-grid-react-window/.npmignore +++ b/packages/react-components/react-data-grid-react-window/.npmignore @@ -28,3 +28,9 @@ __tests__ .eslint* .git* .prettierignore + +# exclude gitignore patterns explicitly +!lib +!lib-commonjs +!lib-amd +!dist/*.d.ts diff --git a/packages/react-components/react-data-grid-react-window/CHANGELOG.json b/packages/react-components/react-data-grid-react-window/CHANGELOG.json index 3a06f4e8d75caa..0ffb033f8a065e 100644 --- a/packages/react-components/react-data-grid-react-window/CHANGELOG.json +++ b/packages/react-components/react-data-grid-react-window/CHANGELOG.json @@ -1,6 +1,39 @@ { "name": "@fluentui/react-data-grid-react-window", "entries": [ + { + "date": "Mon, 24 Apr 2023 08:12:33 GMT", + "tag": "@fluentui/react-data-grid-react-window_v9.0.0-beta.23", + "version": "9.0.0-beta.23", + "comments": { + "prerelease": [ + { + "author": "bernardo.sunderhus@gmail.com", + "package": "@fluentui/react-data-grid-react-window", + "commit": "85c36e249b33b0bad79be4edd1a943dfc5233b11", + "comment": "bugfix: remove caret from react-jsx-runtime prerelease dependency" + }, + { + "author": "beachball", + "package": "@fluentui/react-data-grid-react-window", + "comment": "Bump @fluentui/react-table to v9.2.7", + "commit": "505433ac64f144c9cca456097413d6af4582e5ee" + }, + { + "author": "beachball", + "package": "@fluentui/react-data-grid-react-window", + "comment": "Bump @fluentui/react-jsx-runtime to v9.0.0-alpha.2", + "commit": "505433ac64f144c9cca456097413d6af4582e5ee" + }, + { + "author": "beachball", + "package": "@fluentui/react-data-grid-react-window", + "comment": "Bump @fluentui/react-components to v9.19.1", + "commit": "505433ac64f144c9cca456097413d6af4582e5ee" + } + ] + } + }, { "date": "Mon, 17 Apr 2023 17:53:49 GMT", "tag": "@fluentui/react-data-grid-react-window_v9.0.0-beta.22", diff --git a/packages/react-components/react-data-grid-react-window/CHANGELOG.md b/packages/react-components/react-data-grid-react-window/CHANGELOG.md index 2c8b08a48a34e2..21d16ba0ce6278 100644 --- a/packages/react-components/react-data-grid-react-window/CHANGELOG.md +++ b/packages/react-components/react-data-grid-react-window/CHANGELOG.md @@ -1,9 +1,21 @@ # Change Log - @fluentui/react-data-grid-react-window -This log was last generated on Mon, 17 Apr 2023 17:53:49 GMT and should not be manually modified. +This log was last generated on Mon, 24 Apr 2023 08:12:33 GMT and should not be manually modified. +## [9.0.0-beta.23](https://github.com/microsoft/fluentui/tree/@fluentui/react-data-grid-react-window_v9.0.0-beta.23) + +Mon, 24 Apr 2023 08:12:33 GMT +[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-data-grid-react-window_v9.0.0-beta.22..@fluentui/react-data-grid-react-window_v9.0.0-beta.23) + +### Changes + +- bugfix: remove caret from react-jsx-runtime prerelease dependency ([PR #27588](https://github.com/microsoft/fluentui/pull/27588) by bernardo.sunderhus@gmail.com) +- Bump @fluentui/react-table to v9.2.7 ([commit](https://github.com/microsoft/fluentui/commit/505433ac64f144c9cca456097413d6af4582e5ee) by beachball) +- Bump @fluentui/react-jsx-runtime to v9.0.0-alpha.2 ([commit](https://github.com/microsoft/fluentui/commit/505433ac64f144c9cca456097413d6af4582e5ee) by beachball) +- Bump @fluentui/react-components to v9.19.1 ([commit](https://github.com/microsoft/fluentui/commit/505433ac64f144c9cca456097413d6af4582e5ee) by beachball) + ## [9.0.0-beta.22](https://github.com/microsoft/fluentui/tree/@fluentui/react-data-grid-react-window_v9.0.0-beta.22) Mon, 17 Apr 2023 17:53:49 GMT 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 7a70c69372d17a..5368c2f62c2c4b 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/package.json b/packages/react-components/react-data-grid-react-window/package.json index 7f7a2823ade109..e696bd912c750c 100644 --- a/packages/react-components/react-data-grid-react-window/package.json +++ b/packages/react-components/react-data-grid-react-window/package.json @@ -1,6 +1,6 @@ { "name": "@fluentui/react-data-grid-react-window", - "version": "9.0.0-beta.22", + "version": "9.0.0-beta.23", "description": "Virtualized DataGrid components and utilities powered by react-window", "main": "lib-commonjs/index.js", "module": "lib/index.js", @@ -29,14 +29,14 @@ "@fluentui/scripts-tasks": "*" }, "dependencies": { - "@fluentui/react-table": "^9.2.6", + "@fluentui/react-table": "^9.2.7", "@fluentui/react-utilities": "^9.8.0", - "@fluentui/react-jsx-runtime": "9.0.0-alpha.1", + "@fluentui/react-jsx-runtime": "9.0.0-alpha.2", "@swc/helpers": "^0.4.14", "react-window": "^1.8.6" }, "peerDependencies": { - "@fluentui/react-components": "^9.19.0", + "@fluentui/react-components": "^9.19.1", "@types/react": ">=16.8.0 <19.0.0", "@types/react-dom": ">=16.8.0 <19.0.0", "react": ">=16.8.0 <19.0.0", 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 b2daaa21a7941e..62bfa0648d0305 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 0b3589e2b3bc1d..b5c5a7388b1d75 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 754782dcc6881e..481937ef050f61 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 11c6f85063d87c..b5d8b394ca3ef3 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 15727b3664100a..a5ab3d0a834cda 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 77f88408cbd839..a3d988f29a1728 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/.npmignore b/packages/react-components/react-datepicker-compat/.npmignore index f7ce568a6dbf7c..26904cdfffc9bd 100644 --- a/packages/react-components/react-datepicker-compat/.npmignore +++ b/packages/react-components/react-datepicker-compat/.npmignore @@ -28,3 +28,9 @@ __tests__ .eslint* .git* .prettierignore + +# exclude gitignore patterns explicitly +!lib +!lib-commonjs +!lib-amd +!dist/*.d.ts diff --git a/packages/react-components/react-datepicker-compat/CHANGELOG.json b/packages/react-components/react-datepicker-compat/CHANGELOG.json index 5be266e0a9670e..fe01f5dfd12a23 100644 --- a/packages/react-components/react-datepicker-compat/CHANGELOG.json +++ b/packages/react-components/react-datepicker-compat/CHANGELOG.json @@ -1,6 +1,65 @@ { "name": "@fluentui/react-datepicker-compat", "entries": [ + { + "date": "Mon, 24 Apr 2023 08:12:34 GMT", + "tag": "@fluentui/react-datepicker-compat_v0.0.0", + "version": "0.0.0", + "comments": { + "minor": [ + { + "author": "esteban.230@hotmail.com", + "package": "@fluentui/react-datepicker-compat", + "commit": "f7d88ee6fb582989efc057880ddfe60228649189", + "comment": "feat: Add error handling to DatePicker." + }, + { + "author": "esteban.230@hotmail.com", + "package": "@fluentui/react-datepicker-compat", + "commit": "bb8dfe06f4f2910eef1561c76410bf91b009fa37", + "comment": "feat: Move DatePicker compat to stable." + }, + { + "author": "esteban.230@hotmail.com", + "package": "@fluentui/react-datepicker-compat", + "commit": "011c6f0665a03aa804aac1e0f900e70229518c7c", + "comment": "feat: Refactor DatePicker to remove Field and error handling logic." + }, + { + "author": "beachball", + "package": "@fluentui/react-datepicker-compat", + "comment": "Bump @fluentui/react-field to v9.1.1", + "commit": "505433ac64f144c9cca456097413d6af4582e5ee" + }, + { + "author": "beachball", + "package": "@fluentui/react-datepicker-compat", + "comment": "Bump @fluentui/react-input to v9.4.11", + "commit": "505433ac64f144c9cca456097413d6af4582e5ee" + }, + { + "author": "beachball", + "package": "@fluentui/react-datepicker-compat", + "comment": "Bump @fluentui/react-jsx-runtime to v9.0.0-alpha.2", + "commit": "505433ac64f144c9cca456097413d6af4582e5ee" + }, + { + "author": "beachball", + "package": "@fluentui/react-datepicker-compat", + "comment": "Bump @fluentui/react-popover to v9.5.10", + "commit": "505433ac64f144c9cca456097413d6af4582e5ee" + } + ], + "patch": [ + { + "author": "bernardo.sunderhus@gmail.com", + "package": "@fluentui/react-datepicker-compat", + "commit": "59ef51fcd9e2ab84a4a480e0a02bc05ecd3a6697", + "comment": "chore: adopt custom JSX pragma" + } + ] + } + }, { "date": "Mon, 17 Apr 2023 17:53:49 GMT", "tag": "@fluentui/react-datepicker-compat_v0.0.0-beta.2", diff --git a/packages/react-components/react-datepicker-compat/CHANGELOG.md b/packages/react-components/react-datepicker-compat/CHANGELOG.md index 66da511701c938..b7e9b294dd00f7 100644 --- a/packages/react-components/react-datepicker-compat/CHANGELOG.md +++ b/packages/react-components/react-datepicker-compat/CHANGELOG.md @@ -1,9 +1,28 @@ # Change Log - @fluentui/react-datepicker-compat -This log was last generated on Mon, 17 Apr 2023 17:53:49 GMT and should not be manually modified. +This log was last generated on Mon, 24 Apr 2023 08:12:34 GMT and should not be manually modified. +## [0.0.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-datepicker-compat_v0.0.0) + +Mon, 24 Apr 2023 08:12:34 GMT +[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-datepicker-compat_v0.0.0-beta.2..@fluentui/react-datepicker-compat_v0.0.0) + +### Minor changes + +- feat: Add error handling to DatePicker. ([PR #27637](https://github.com/microsoft/fluentui/pull/27637) by esteban.230@hotmail.com) +- feat: Move DatePicker compat to stable. ([PR #27378](https://github.com/microsoft/fluentui/pull/27378) by esteban.230@hotmail.com) +- feat: Refactor DatePicker to remove Field and error handling logic. ([PR #27509](https://github.com/microsoft/fluentui/pull/27509) by esteban.230@hotmail.com) +- Bump @fluentui/react-field to v9.1.1 ([commit](https://github.com/microsoft/fluentui/commit/505433ac64f144c9cca456097413d6af4582e5ee) by beachball) +- Bump @fluentui/react-input to v9.4.11 ([commit](https://github.com/microsoft/fluentui/commit/505433ac64f144c9cca456097413d6af4582e5ee) by beachball) +- Bump @fluentui/react-jsx-runtime to v9.0.0-alpha.2 ([commit](https://github.com/microsoft/fluentui/commit/505433ac64f144c9cca456097413d6af4582e5ee) by beachball) +- Bump @fluentui/react-popover to v9.5.10 ([commit](https://github.com/microsoft/fluentui/commit/505433ac64f144c9cca456097413d6af4582e5ee) by beachball) + +### Patches + +- chore: adopt custom JSX pragma ([PR #27609](https://github.com/microsoft/fluentui/pull/27609) by bernardo.sunderhus@gmail.com) + ## [0.0.0-beta.2](https://github.com/microsoft/fluentui/tree/@fluentui/react-datepicker-compat_v0.0.0-beta.2) Mon, 17 Apr 2023 17:53:49 GMT diff --git a/packages/react-components/react-datepicker-compat/README.md b/packages/react-components/react-datepicker-compat/README.md index db6d4210b89614..8a2b389dfc4a08 100644 --- a/packages/react-components/react-datepicker-compat/README.md +++ b/packages/react-components/react-datepicker-compat/README.md @@ -2,14 +2,14 @@ **React Datepicker 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. +Picking a date can be tough without context. A date picker (DatePicker) offers a popup control that’s optimized for picking a single date from a calendar view where contextual information like the day of the week or fullness of the calendar is important. You can modify the calendar to provide additional context or to limit available dates. ## Usage To import DatePicker: ```js -import { DatePicker } from '@fluentui/react-datepicker'; +import { DatePicker } from '@fluentui/react-datepicker-compat'; ``` ### Examples diff --git a/packages/react-components/react-datepicker-compat/etc/react-datepicker-compat.api.md b/packages/react-components/react-datepicker-compat/etc/react-datepicker-compat.api.md index 866f73ef186db2..f6efab232fb882 100644 --- a/packages/react-components/react-datepicker-compat/etc/react-datepicker-compat.api.md +++ b/packages/react-components/react-datepicker-compat/etc/react-datepicker-compat.api.md @@ -8,11 +8,9 @@ import type { ComponentProps } from '@fluentui/react-utilities'; import type { ComponentState } from '@fluentui/react-utilities'; -import { Field } from '@fluentui/react-field'; import type { ForwardRefComponent } from '@fluentui/react-utilities'; import { Input } from '@fluentui/react-input'; -import type { PopoverProps } from '@fluentui/react-popover'; -import { PopoverSurface } from '@fluentui/react-popover'; +import type { PositioningProps } from '@fluentui/react-positioning'; import * as React_2 from 'react'; import type { Slot } from '@fluentui/react-utilities'; import type { SlotClassNames } from '@fluentui/react-utilities'; @@ -154,12 +152,14 @@ export const DatePicker: ForwardRefComponent; // @public (undocumented) export const datePickerClassNames: SlotClassNames; +// @public +export type DatePickerErrorType = 'invalid-input' | 'out-of-bounds' | 'required-input'; + // @public (undocumented) -export type DatePickerProps = ComponentProps> & { +export type DatePickerProps = Omit>, 'defaultValue' | 'value'> & { componentRef?: React_2.RefObject; onSelectDate?: (date: Date | null | undefined) => void; - label?: string; - isRequired?: boolean; + required?: boolean; disabled?: boolean; underlined?: boolean; isMonthPickerVisible?: boolean; @@ -167,13 +167,19 @@ export type DatePickerProps = ComponentProps> & { allowTextInput?: boolean; disableAutoFocus?: boolean; openOnClick?: boolean; + defaultOpen?: boolean; + open?: boolean; + onOpenChange?: (open: boolean) => void; + onValidationResult?: (data: DatePickerValidationResultData) => void; + inlinePopup?: boolean; + positioning?: PositioningProps; placeholder?: string; today?: Date; value?: Date; formatDate?: (date?: Date) => string; parseDateFromString?: (dateStr: string) => Date | null; firstDayOfWeek?: DayOfWeek; - strings?: DatePickerStrings; + strings?: CalendarStrings; highlightCurrentMonth?: boolean; highlightSelectedMonth?: boolean; showWeekNumbers?: boolean; @@ -185,18 +191,13 @@ export type DatePickerProps = ComponentProps> & { maxDate?: Date; initialPickerDate?: Date; allFocusable?: boolean; - onAfterMenuDismiss?: () => void; showCloseButton?: boolean; - tabIndex?: number; }; -// @public (undocumented) -export interface DatePickerStrings extends CalendarStrings { - invalidInputErrorMessage?: string; - isOutOfBoundsErrorMessage?: string; - isRequiredErrorMessage?: string; - isResetStatusMessage?: string; -} +// @public +export type DatePickerValidationResultData = { + error?: DatePickerErrorType; +}; // @public export enum DateRangeType { @@ -232,10 +233,10 @@ export enum DayOfWeek { export const DAYS_IN_WEEK = 7; // @public (undocumented) -export const defaultCalendarStrings: CalendarStrings; +export const defaultDatePickerErrorStrings: Record; // @public (undocumented) -export const defaultDatePickerStrings: DatePickerStrings; +export const defaultDatePickerStrings: CalendarStrings; // @public export enum FirstWeekOfYear { diff --git a/packages/react-components/react-datepicker-compat/jest.config.js b/packages/react-components/react-datepicker-compat/jest.config.js index f3fbfc2d76eb22..023d31b89fd1e4 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/package.json b/packages/react-components/react-datepicker-compat/package.json index 8b5c5c2132295f..ab2692a9113c90 100644 --- a/packages/react-components/react-datepicker-compat/package.json +++ b/packages/react-components/react-datepicker-compat/package.json @@ -1,6 +1,6 @@ { "name": "@fluentui/react-datepicker-compat", - "version": "0.0.0-beta.2", + "version": "0.0.1", "description": "React components for building web experiences", "main": "lib-commonjs/index.js", "module": "lib/index.js", @@ -34,16 +34,18 @@ "@fluentui/scripts-tasks": "*" }, "dependencies": { - "@fluentui/react-theme": "^9.1.7", - "@fluentui/react-utilities": "^9.8.0", "@fluentui/keyboard-keys": "^9.0.2", - "@fluentui/react-field": "^9.1.0", + "@fluentui/react-field": "^9.1.1", "@fluentui/react-icons": "^2.0.196", + "@fluentui/react-input": "^9.4.11", + "@fluentui/react-jsx-runtime": "9.0.0-alpha.2", + "@fluentui/react-popover": "^9.5.10", + "@fluentui/react-portal": "^9.2.6", + "@fluentui/react-positioning": "^9.5.10", "@fluentui/react-shared-contexts": "^9.3.3", "@fluentui/react-tabster": "^9.6.5", - "@fluentui/react-popover": "^9.5.9", - "@fluentui/react-positioning": "^9.5.10", - "@fluentui/react-input": "^9.4.10", + "@fluentui/react-theme": "^9.1.7", + "@fluentui/react-utilities": "^9.8.0", "@griffel/react": "^1.5.2", "@swc/helpers": "^0.4.14" }, @@ -56,8 +58,7 @@ "beachball": { "disallowedChangeTypes": [ "major", - "minor", - "patch" + "prerelease" ] }, "exports": { diff --git a/packages/react-components/react-datepicker-compat/src/components/Calendar/Calendar.tsx b/packages/react-components/react-datepicker-compat/src/components/Calendar/Calendar.tsx index b96bda0a2ca009..70b03f288ae824 100644 --- a/packages/react-components/react-datepicker-compat/src/components/Calendar/Calendar.tsx +++ b/packages/react-components/react-datepicker-compat/src/components/Calendar/Calendar.tsx @@ -14,7 +14,7 @@ import { } from '../../utils'; import { CalendarDay } from '../CalendarDay/CalendarDay'; import { CalendarMonth } from '../CalendarMonth/CalendarMonth'; -import { useCalendarStyles_unstable } from './useCalendarStyles'; +import { useCalendarStyles_unstable } from './useCalendarStyles.styles'; import type { ICalendarDay } from '../CalendarDay/CalendarDay.types'; import type { ICalendarMonth } from '../CalendarMonth/CalendarMonth.types'; import type { CalendarProps } from './Calendar.types'; diff --git a/packages/react-components/react-datepicker-compat/src/components/Calendar/index.ts b/packages/react-components/react-datepicker-compat/src/components/Calendar/index.ts index 2ddec78ce3226c..e03daab6f730fb 100644 --- a/packages/react-components/react-datepicker-compat/src/components/Calendar/index.ts +++ b/packages/react-components/react-datepicker-compat/src/components/Calendar/index.ts @@ -1,4 +1,4 @@ export * from './Calendar'; export * from './Calendar.types'; -export * from './useCalendarStyles'; +export * from './useCalendarStyles.styles'; export { defaultCalendarStrings } from './defaults'; diff --git a/packages/react-components/react-datepicker-compat/src/components/Calendar/useCalendarStyles.ts b/packages/react-components/react-datepicker-compat/src/components/Calendar/useCalendarStyles.styles.ts similarity index 100% rename from packages/react-components/react-datepicker-compat/src/components/Calendar/useCalendarStyles.ts rename to packages/react-components/react-datepicker-compat/src/components/Calendar/useCalendarStyles.styles.ts diff --git a/packages/react-components/react-datepicker-compat/src/components/CalendarDay/CalendarDay.tsx b/packages/react-components/react-datepicker-compat/src/components/CalendarDay/CalendarDay.tsx index c97047633558ee..7d3ac925a13795 100644 --- a/packages/react-components/react-datepicker-compat/src/components/CalendarDay/CalendarDay.tsx +++ b/packages/react-components/react-datepicker-compat/src/components/CalendarDay/CalendarDay.tsx @@ -5,7 +5,7 @@ import { useId } from '@fluentui/react-utilities'; import { mergeClasses } from '@griffel/react'; import { addMonths, compareDatePart, getMonthEnd, getMonthStart } from '../../utils'; import { CalendarDayGrid } from '../CalendarDayGrid/CalendarDayGrid'; -import { useCalendarDayStyles_unstable } from './useCalendarDayStyles'; +import { useCalendarDayStyles_unstable } from './useCalendarDayStyles.styles'; import type { ICalendarDayGrid } from '../CalendarDayGrid/CalendarDayGrid.types'; import type { CalendarDayProps, CalendarDayStyles } from './CalendarDay.types'; diff --git a/packages/react-components/react-datepicker-compat/src/components/CalendarDay/index.ts b/packages/react-components/react-datepicker-compat/src/components/CalendarDay/index.ts index 9d0c4c2684a883..e7be79824e0009 100644 --- a/packages/react-components/react-datepicker-compat/src/components/CalendarDay/index.ts +++ b/packages/react-components/react-datepicker-compat/src/components/CalendarDay/index.ts @@ -1,3 +1,3 @@ export * from './CalendarDay'; export * from './CalendarDay.types'; -export * from './useCalendarDayStyles'; +export * from './useCalendarDayStyles.styles'; diff --git a/packages/react-components/react-datepicker-compat/src/components/CalendarDay/useCalendarDayStyles.ts b/packages/react-components/react-datepicker-compat/src/components/CalendarDay/useCalendarDayStyles.styles.ts similarity index 100% rename from packages/react-components/react-datepicker-compat/src/components/CalendarDay/useCalendarDayStyles.ts rename to packages/react-components/react-datepicker-compat/src/components/CalendarDay/useCalendarDayStyles.styles.ts diff --git a/packages/react-components/react-datepicker-compat/src/components/CalendarDayGrid/CalendarDayGrid.tsx b/packages/react-components/react-datepicker-compat/src/components/CalendarDayGrid/CalendarDayGrid.tsx index 2210c733ef6b37..4c3b7bc89d72ac 100644 --- a/packages/react-components/react-datepicker-compat/src/components/CalendarDayGrid/CalendarDayGrid.tsx +++ b/packages/react-components/react-datepicker-compat/src/components/CalendarDayGrid/CalendarDayGrid.tsx @@ -2,11 +2,11 @@ import * as React from 'react'; import { useArrowNavigationGroup } from '@fluentui/react-tabster'; import { useId } from '@fluentui/react-utilities'; import { getBoundedDateRange, getDateRangeArray, isRestrictedDate, DateRangeType, DayOfWeek } from '../../utils'; -import { useCalendarDayGridStyles_unstable } from './useCalendarDayGridStyles'; +import { useCalendarDayGridStyles_unstable } from './useCalendarDayGridStyles.styles'; import { CalendarMonthHeaderRow } from './CalendarMonthHeaderRow'; import { CalendarGridRow } from './CalendarGridRow'; import { useWeeks } from './useWeeks'; -import { useWeekCornerStyles, WeekCorners } from './useWeekCornerStyles'; +import { useWeekCornerStyles, WeekCorners } from './useWeekCornerStyles.styles'; import { mergeClasses } from '@griffel/react'; import type { Day } from '../../utils'; import type { CalendarDayGridProps } from './CalendarDayGrid.types'; @@ -163,7 +163,7 @@ export const CalendarDayGrid: React.FunctionComponent = pr weekIndex={-1} rowClassName={classNames.firstTransitionWeek} aria-role="presentation" - aria-hidden={true} + ariaHidden={true} /> {weeks!.slice(1, weeks!.length - 1).map((week: DayInfo[], weekIndex: number) => ( = pr weekIndex={-2} rowClassName={classNames.lastTransitionWeek} aria-role="presentation" - aria-hidden={true} + ariaHidden={true} /> diff --git a/packages/react-components/react-datepicker-compat/src/components/CalendarDayGrid/CalendarGridDayCell.tsx b/packages/react-components/react-datepicker-compat/src/components/CalendarDayGrid/CalendarGridDayCell.tsx index 7af91fdd078730..843d53be01a8e6 100644 --- a/packages/react-components/react-datepicker-compat/src/components/CalendarDayGrid/CalendarGridDayCell.tsx +++ b/packages/react-components/react-datepicker-compat/src/components/CalendarDayGrid/CalendarGridDayCell.tsx @@ -4,8 +4,8 @@ import { getRTLSafeKey } from '@fluentui/react-utilities'; import { useFluent_unstable } from '@fluentui/react-shared-contexts'; import { mergeClasses } from '@griffel/react'; import { addDays, addWeeks, compareDates, findAvailableDate, DateRangeType } from '../../utils'; -import { weekCornersClassNames } from './useWeekCornerStyles'; -import { extraCalendarDayGridClassNames } from './useCalendarDayGridStyles'; +import { weekCornersClassNames } from './useWeekCornerStyles.styles'; +import { extraCalendarDayGridClassNames } from './useCalendarDayGridStyles.styles'; import type { AvailableDateOptions } from '../../utils'; import type { DayInfo } from './CalendarDayGrid'; import type { CalendarGridRowProps } from './CalendarGridRow'; diff --git a/packages/react-components/react-datepicker-compat/src/components/CalendarDayGrid/CalendarGridRow.tsx b/packages/react-components/react-datepicker-compat/src/components/CalendarDayGrid/CalendarGridRow.tsx index 2b54420b9ae792..0c6eb8e928addc 100644 --- a/packages/react-components/react-datepicker-compat/src/components/CalendarDayGrid/CalendarGridRow.tsx +++ b/packages/react-components/react-datepicker-compat/src/components/CalendarDayGrid/CalendarGridRow.tsx @@ -3,7 +3,7 @@ import { getWeekNumbersInMonth } from '../../utils'; import { CalendarGridDayCell } from './CalendarGridDayCell'; import type { CalendarDayGridProps, CalendarDayGridStyles } from './CalendarDayGrid.types'; import type { DayInfo } from './CalendarDayGrid'; -import type { WeekCorners } from './useWeekCornerStyles'; +import type { WeekCorners } from './useWeekCornerStyles.styles'; /** * @internal diff --git a/packages/react-components/react-datepicker-compat/src/components/CalendarDayGrid/index.ts b/packages/react-components/react-datepicker-compat/src/components/CalendarDayGrid/index.ts index 6a77d9911036dc..5b26ba8bc2f066 100644 --- a/packages/react-components/react-datepicker-compat/src/components/CalendarDayGrid/index.ts +++ b/packages/react-components/react-datepicker-compat/src/components/CalendarDayGrid/index.ts @@ -1,5 +1,5 @@ export * from './CalendarDayGrid'; export * from './CalendarDayGrid.types'; -export * from './useCalendarDayGridStyles'; -export { calendarDayGridClassNames, extraCalendarDayGridClassNames } from './useCalendarDayGridStyles'; -export type { WeekCorners } from './useWeekCornerStyles'; +export * from './useCalendarDayGridStyles.styles'; +export { calendarDayGridClassNames, extraCalendarDayGridClassNames } from './useCalendarDayGridStyles.styles'; +export type { WeekCorners } from './useWeekCornerStyles.styles'; diff --git a/packages/react-components/react-datepicker-compat/src/components/CalendarDayGrid/useCalendarDayGridStyles.ts b/packages/react-components/react-datepicker-compat/src/components/CalendarDayGrid/useCalendarDayGridStyles.styles.ts similarity index 99% rename from packages/react-components/react-datepicker-compat/src/components/CalendarDayGrid/useCalendarDayGridStyles.ts rename to packages/react-components/react-datepicker-compat/src/components/CalendarDayGrid/useCalendarDayGridStyles.styles.ts index d7f9c5f10dc62b..a54ab99d1b4ff3 100644 --- a/packages/react-components/react-datepicker-compat/src/components/CalendarDayGrid/useCalendarDayGridStyles.ts +++ b/packages/react-components/react-datepicker-compat/src/components/CalendarDayGrid/useCalendarDayGridStyles.styles.ts @@ -16,7 +16,7 @@ import { TRANSITION_ROW_DISAPPEARANCE, } from '../../utils'; import { AnimationDirection } from '../Calendar/Calendar.types'; -import { weekCornersClassNames } from './useWeekCornerStyles'; +import { weekCornersClassNames } from './useWeekCornerStyles.styles'; import type { SlotClassNames } from '@fluentui/react-utilities'; import type { CalendarDayGridStyles, CalendarDayGridStyleProps } from './CalendarDayGrid.types'; diff --git a/packages/react-components/react-datepicker-compat/src/components/CalendarDayGrid/useWeekCornerStyles.ts b/packages/react-components/react-datepicker-compat/src/components/CalendarDayGrid/useWeekCornerStyles.styles.ts similarity index 100% rename from packages/react-components/react-datepicker-compat/src/components/CalendarDayGrid/useWeekCornerStyles.ts rename to packages/react-components/react-datepicker-compat/src/components/CalendarDayGrid/useWeekCornerStyles.styles.ts diff --git a/packages/react-components/react-datepicker-compat/src/components/CalendarMonth/useCalendarMonthStyles.ts b/packages/react-components/react-datepicker-compat/src/components/CalendarMonth/useCalendarMonthStyles.ts index 7d7be506b453c4..2127843467aac2 100644 --- a/packages/react-components/react-datepicker-compat/src/components/CalendarMonth/useCalendarMonthStyles.ts +++ b/packages/react-components/react-datepicker-compat/src/components/CalendarMonth/useCalendarMonthStyles.ts @@ -1,4 +1,4 @@ -import { useCalendarPickerStyles_unstable } from '../CalendarPicker/useCalendarPickerStyles'; +import { useCalendarPickerStyles_unstable } from '../CalendarPicker/useCalendarPickerStyles.styles'; import type { CalendarMonthStyleProps, CalendarMonthStyles } from './CalendarMonth.types'; /** diff --git a/packages/react-components/react-datepicker-compat/src/components/CalendarPicker/index.ts b/packages/react-components/react-datepicker-compat/src/components/CalendarPicker/index.ts index 5831223b103f2c..45fa614ab928d6 100644 --- a/packages/react-components/react-datepicker-compat/src/components/CalendarPicker/index.ts +++ b/packages/react-components/react-datepicker-compat/src/components/CalendarPicker/index.ts @@ -1,2 +1,2 @@ export * from './CalendarPicker.types'; -export * from './useCalendarPickerStyles'; +export * from './useCalendarPickerStyles.styles'; diff --git a/packages/react-components/react-datepicker-compat/src/components/CalendarPicker/useCalendarPickerStyles.ts b/packages/react-components/react-datepicker-compat/src/components/CalendarPicker/useCalendarPickerStyles.styles.ts similarity index 100% rename from packages/react-components/react-datepicker-compat/src/components/CalendarPicker/useCalendarPickerStyles.ts rename to packages/react-components/react-datepicker-compat/src/components/CalendarPicker/useCalendarPickerStyles.styles.ts diff --git a/packages/react-components/react-datepicker-compat/src/components/CalendarYear/CalendarYear.tsx b/packages/react-components/react-datepicker-compat/src/components/CalendarYear/CalendarYear.tsx index 1282d635e49ea7..b1749e779908c1 100644 --- a/packages/react-components/react-datepicker-compat/src/components/CalendarYear/CalendarYear.tsx +++ b/packages/react-components/react-datepicker-compat/src/components/CalendarYear/CalendarYear.tsx @@ -4,7 +4,7 @@ import { ArrowDownRegular, ArrowUpRegular } from '@fluentui/react-icons'; import { useFluent_unstable } from '@fluentui/react-shared-contexts'; import { useArrowNavigationGroup } from '@fluentui/react-tabster'; import { mergeClasses } from '@griffel/react'; -import { useCalendarYearStyles_unstable } from './useCalendarYearStyles'; +import { useCalendarYearStyles_unstable } from './useCalendarYearStyles.styles'; import type { CalendarYearStrings, CalendarYearProps, diff --git a/packages/react-components/react-datepicker-compat/src/components/CalendarYear/index.ts b/packages/react-components/react-datepicker-compat/src/components/CalendarYear/index.ts index 17644f289001a2..d03d1a5c9d2fe0 100644 --- a/packages/react-components/react-datepicker-compat/src/components/CalendarYear/index.ts +++ b/packages/react-components/react-datepicker-compat/src/components/CalendarYear/index.ts @@ -1,3 +1,3 @@ export * from './CalendarYear'; export * from './CalendarYear.types'; -export * from './useCalendarYearStyles'; +export * from './useCalendarYearStyles.styles'; diff --git a/packages/react-components/react-datepicker-compat/src/components/CalendarYear/useCalendarYearStyles.ts b/packages/react-components/react-datepicker-compat/src/components/CalendarYear/useCalendarYearStyles.styles.ts similarity index 91% rename from packages/react-components/react-datepicker-compat/src/components/CalendarYear/useCalendarYearStyles.ts rename to packages/react-components/react-datepicker-compat/src/components/CalendarYear/useCalendarYearStyles.styles.ts index 95512b1ce4832e..e81f0c58cc0f97 100644 --- a/packages/react-components/react-datepicker-compat/src/components/CalendarYear/useCalendarYearStyles.ts +++ b/packages/react-components/react-datepicker-compat/src/components/CalendarYear/useCalendarYearStyles.styles.ts @@ -1,4 +1,4 @@ -import { useCalendarPickerStyles_unstable } from '../CalendarPicker/useCalendarPickerStyles'; +import { useCalendarPickerStyles_unstable } from '../CalendarPicker/useCalendarPickerStyles.styles'; import type { CalendarYearStyleProps, CalendarYearStyles } from './CalendarYear.types'; /** diff --git a/packages/react-components/react-datepicker-compat/src/components/DatePicker/DatePicker.cy.tsx b/packages/react-components/react-datepicker-compat/src/components/DatePicker/DatePicker.cy.tsx index daec8df4f5f373..c6e4b86d949bc5 100644 --- a/packages/react-components/react-datepicker-compat/src/components/DatePicker/DatePicker.cy.tsx +++ b/packages/react-components/react-datepicker-compat/src/components/DatePicker/DatePicker.cy.tsx @@ -12,7 +12,6 @@ const mount = (element: JSX.Element) => { const inputSelector = '[role="combobox"]'; const popoverSelector = '[role="dialog"]'; -const fieldErrorMessageSelector = '[role=alert]'; describe('DatePicker', () => { it('opens a default datepicker', () => { @@ -26,106 +25,10 @@ describe('DatePicker', () => { cy.get(inputSelector).click({ force: true }).get(popoverSelector).should('not.exist'); }); - it('should render DatePicker and calloutId must exist in the DOM when isDatePickerShown is set', () => { + it('should render DatePicker and popupId must exist in the DOM when the popup is open', () => { mount(); cy.get(inputSelector).click(); cy.get('body').find('[aria-owns]').should('exist'); }); - - it('should clear error message when required input has date text and allowTextInput is true', () => { - mount(); - - // Open DatePicker and dismiss - cy.get(inputSelector).click().get('body').click('bottomRight'); - cy.get(fieldErrorMessageSelector).should('exist'); - - // Type a date and dismiss - cy.get(inputSelector).click().click().type('Jan 1 2030').get('body').click('bottomRight'); - - cy.get(fieldErrorMessageSelector).should('not.exist'); - }); - - it('clears error message when required input has date selected from calendar and allowTextInput is true', () => { - mount(); - - // Open picker and dismiss to show error message - cy.get(inputSelector).click().get('body').click('bottomRight'); - cy.get(fieldErrorMessageSelector).should('exist'); - - // Select a date from calendar, we choose 10 since the first 0-6 days in the grid are not really dates, and dismiss - cy.get(inputSelector).click().get('[role="gridcell"]').its(10).click().get('body').click('bottomRight'); - cy.get(fieldErrorMessageSelector).should('not.exist'); - }); - - it('should not clear initial error when datepicker is opened', () => { - mount(); - - cy.get(fieldErrorMessageSelector).should('exist'); - - // open and dismiss picker - cy.get(inputSelector).click().get('body').click('bottomRight'); - cy.get(fieldErrorMessageSelector).should('exist'); - }); - - it('should reset status message after selecting a valid date', () => { - mount(); - - cy.get(fieldErrorMessageSelector).should('not.exist'); - cy.get(inputSelector).click().click().type('test').get('body').click('bottomRight'); - cy.get(fieldErrorMessageSelector).should('exist'); - cy.get(inputSelector).click().get('[role="gridcell"]').its(10).click().get('body').click('bottomRight'); - cy.get(fieldErrorMessageSelector).should('not.exist'); - }); -}); - -describe('When boundaries are specified', () => { - const defaultDate = new Date('Dec 15 2017'); - const minDate = new Date('Jan 1 2017'); - const maxDate = new Date('Dec 31 2017'); - const strings = { - months: [ - 'January', - 'February', - 'March', - 'April', - 'May', - 'June', - 'July', - 'August', - 'September', - 'October', - 'November', - 'December', - ], - shortMonths: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'], - days: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'], - shortDays: ['S', 'M', 'T', 'W', 'T', 'F', 'S'], - goToToday: 'Go to today', - isOutOfBoundsErrorMessage: 'out of bounds', - }; - - beforeEach(() => { - mount(); - }); - - it('should throw validation error for date outside boundary', () => { - // Before min date - cy.get(inputSelector).click().click().clear().type('Jan 1 2010{enter}').get('body').click('bottomRight'); - cy.get(fieldErrorMessageSelector).should('exist').should('have.text', 'out of bounds'); - - // After max date - cy.get(inputSelector).click().click().clear().type('Jan 1 2020{enter}').get('body').click('bottomRight'); - cy.get(fieldErrorMessageSelector).should('exist').should('have.text', 'out of bounds'); - }); - - it('should not throw validation error for date inside boundary', () => { - // In boundary - cy.get(inputSelector).click().click().clear().type('Dec 16 2017{enter}').get('body').click('bottomRight'); - cy.get(fieldErrorMessageSelector).should('not.exist'); - - // In boundary - cy.get(inputSelector).click().click().clear().type('Jan 1 2017{enter}').get('body').click('bottomRight'); - cy.get(fieldErrorMessageSelector).should('not.exist'); - }); }); diff --git a/packages/react-components/react-datepicker-compat/src/components/DatePicker/DatePicker.test.tsx b/packages/react-components/react-datepicker-compat/src/components/DatePicker/DatePicker.test.tsx index 93200e4cf71793..b11b6394a759ea 100644 --- a/packages/react-components/react-datepicker-compat/src/components/DatePicker/DatePicker.test.tsx +++ b/packages/react-components/react-datepicker-compat/src/components/DatePicker/DatePicker.test.tsx @@ -2,7 +2,7 @@ import * as React from 'react'; import { fireEvent, render, RenderResult } from '@testing-library/react'; import { DatePicker } from './DatePicker'; import { isConformant } from '../../testing/isConformant'; -import { datePickerClassNames } from './useDatePickerStyles'; +import { datePickerClassNames } from './useDatePickerStyles.styles'; import { resetIdsForTests } from '@fluentui/react-utilities'; // testing-library's queryByRole function doesn't look inside portals @@ -38,10 +38,7 @@ describe('DatePicker', () => { props: {}, expectedClassNames: { root: datePickerClassNames.root, - field: datePickerClassNames.field, - wrapper: datePickerClassNames.wrapper, - popoverSurface: datePickerClassNames.popoverSurface, - input: datePickerClassNames.input, + popupSurface: datePickerClassNames.popupSurface, calendar: datePickerClassNames.calendar, }, getPortalElement: getDatepickerPopoverElement, @@ -55,7 +52,7 @@ describe('DatePicker', () => { expect(result.findByTestId('test-id')).toBeTruthy(); }); - it('should not render DatePicker when isDatePickerShown is not set', () => { + it('should not render popup when it is not open', () => { const result = render(); expect(result).toMatchSnapshot(); }); @@ -72,7 +69,7 @@ describe('DatePicker', () => { it('should call onSelectDate even when required input is empty when allowTextInput is true', () => { const onSelectDate = jest.fn(); - const result = render(); + const result = render(); const input = result.getByRole('combobox'); fireEvent.change(input, { target: { value: 'Jan 1 2030' } }); diff --git a/packages/react-components/react-datepicker-compat/src/components/DatePicker/DatePicker.tsx b/packages/react-components/react-datepicker-compat/src/components/DatePicker/DatePicker.tsx index 8b5a6225523ad6..d951e166cf0a6f 100644 --- a/packages/react-components/react-datepicker-compat/src/components/DatePicker/DatePicker.tsx +++ b/packages/react-components/react-datepicker-compat/src/components/DatePicker/DatePicker.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import { renderDatePicker_unstable } from './renderDatePicker'; import { useDatePicker_unstable } from './useDatePicker'; -import { useDatePickerStyles_unstable } from './useDatePickerStyles'; +import { useDatePickerStyles_unstable } from './useDatePickerStyles.styles'; import type { ForwardRefComponent } from '@fluentui/react-utilities'; import type { DatePickerProps } from './DatePicker.types'; diff --git a/packages/react-components/react-datepicker-compat/src/components/DatePicker/DatePicker.types.ts b/packages/react-components/react-datepicker-compat/src/components/DatePicker/DatePicker.types.ts index 3da1b83ade0eac..7418c522045b40 100644 --- a/packages/react-components/react-datepicker-compat/src/components/DatePicker/DatePicker.types.ts +++ b/packages/react-components/react-datepicker-compat/src/components/DatePicker/DatePicker.types.ts @@ -1,36 +1,30 @@ import * as React from 'react'; -import { Input } from '@fluentui/react-input'; -import { Field } from '@fluentui/react-field'; import { DayOfWeek, FirstWeekOfYear } from '../../utils'; -import { PopoverSurface } from '@fluentui/react-popover'; -import type { PopoverProps } from '@fluentui/react-popover'; +import { Input } from '@fluentui/react-input'; import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities'; import type { CalendarProps } from '../Calendar/Calendar.types'; import type { CalendarStrings, DateFormatting } from '../../utils'; +import type { PositioningProps } from '@fluentui/react-positioning'; export type DatePickerSlots = { - root: NonNullable>; - field: NonNullable>; - input: NonNullable>; - wrapper: NonNullable>; - popover: NonNullable>>; - popoverSurface: NonNullable>; + root: NonNullable>; calendar: NonNullable>>; + popupSurface?: Slot<'div'>; }; // eslint-disable-next-line @typescript-eslint/naming-convention export interface IDatePicker { - /** Sets focus to the text field */ + /** Sets focus to the input */ focus(): void; /** Reset the state of the picker to the default */ reset(): void; - /** Open the datepicker callout */ + /** Open the datepicker popup */ showDatePickerPopup(): void; } -export type DatePickerProps = ComponentProps> & { +export type DatePickerProps = Omit>, 'defaultValue' | 'value'> & { /** * Optional callback to access the IDatePicker interface. Use this instead of ref for accessing * the public methods and properties of the component. @@ -43,15 +37,10 @@ export type DatePickerProps = ComponentProps> & { onSelectDate?: (date: Date | null | undefined) => void; /** - * Label for the DatePicker - */ - label?: string; - - /** - * Whether the DatePicker is a required field or not + * Whether the DatePicker is a required field or not. When using ``, this prop is automatically set. * @default false */ - isRequired?: boolean; + required?: boolean; /** * Disabled state of the DatePicker. @@ -96,6 +85,44 @@ export type DatePickerProps = ComponentProps> & { */ openOnClick?: boolean; + /** + * Whether the DatePicker should be open by default + * + * @default false + */ + defaultOpen?: boolean; + + /** + * Whether the DatePicker is open or not + * + * @default false + */ + open?: boolean; + + /** + * Callback to run when the DatePicker's open state changes + */ + onOpenChange?: (open: boolean) => void; + + /** + * Callback to run after the DatePicker's input has been validated + */ + onValidationResult?: (data: DatePickerValidationResultData) => void; + + /** + * Whether the DatePicker should render the popup as inline or in a portal + * + * @default false + */ + inlinePopup?: boolean; + + /** + * Configure the positioning of the DatePicker dialog + * + * @default below + */ + positioning?: PositioningProps; + /** * Placeholder text for the DatePicker */ @@ -130,9 +157,9 @@ export type DatePickerProps = ComponentProps> & { firstDayOfWeek?: DayOfWeek; /** - * Localized strings to use in the DatePicker + * Localized strings to use in the Calendar */ - strings?: DatePickerStrings; + strings?: CalendarStrings; /** * Whether the month picker should highlight the current month @@ -196,47 +223,29 @@ export type DatePickerProps = ComponentProps> & { */ allFocusable?: boolean; - /** - * Callback that runs after DatePicker's menu (Calendar) is closed - */ - onAfterMenuDismiss?: () => void; - /** * Whether the CalendarDay close button should be shown or not. */ showCloseButton?: boolean; - - /** - * The tabIndex of the Input - */ - tabIndex?: number; }; +/** + * State used in rendering DatePicker. + */ export type DatePickerState = ComponentState & { disabled: boolean; - isDatePickerShown: boolean; + inlinePopup: boolean; }; -export interface DatePickerStrings extends CalendarStrings { - /** - * Error message to render for Input if isRequired validation fails. - */ - isRequiredErrorMessage?: string; - - /** - * Error message to render for Input if input date string parsing fails. - */ - invalidInputErrorMessage?: string; - - /** - * Error message to render for Input if date boundary (minDate, maxDate) validation fails. - */ - isOutOfBoundsErrorMessage?: string; +/** + * Data passed to the `onValidationResult` callback. + */ +export type DatePickerValidationResultData = { + /** The error found when validating the input. */ + error?: DatePickerErrorType; +}; - /** - * Status message to render for Input the input date parsing fails, - * and the typed value is cleared and reset to the previous value. - * e.g. "Invalid entry `{0}`, date reset to `{1}`" - */ - isResetStatusMessage?: string; -} +/** + * Error types returned by the `onValidationResult` callback. + */ +export type DatePickerErrorType = 'invalid-input' | 'out-of-bounds' | 'required-input'; diff --git a/packages/react-components/react-datepicker-compat/src/components/DatePicker/__snapshots__/DatePicker.test.tsx.snap b/packages/react-components/react-datepicker-compat/src/components/DatePicker/__snapshots__/DatePicker.test.tsx.snap index 847e2f30745755..ac4fa18fffa310 100644 --- a/packages/react-components/react-datepicker-compat/src/components/DatePicker/__snapshots__/DatePicker.test.tsx.snap +++ b/packages/react-components/react-datepicker-compat/src/components/DatePicker/__snapshots__/DatePicker.test.tsx.snap @@ -1,105 +1,77 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`DatePicker should not render DatePicker when isDatePickerShown is not set 1`] = ` +exports[`DatePicker should not render popup when it is not open 1`] = ` Object { "asFragment": [Function], "baseElement":
-
- -
+ + + +
, "container":
-
- -
+ + + +
, "debug": [Function], "findAllByAltText": [Function], diff --git a/packages/react-components/react-datepicker-compat/src/components/DatePicker/defaults.ts b/packages/react-components/react-datepicker-compat/src/components/DatePicker/defaults.ts index 074d1795b30ddf..d1b88828b935e7 100644 --- a/packages/react-components/react-datepicker-compat/src/components/DatePicker/defaults.ts +++ b/packages/react-components/react-datepicker-compat/src/components/DatePicker/defaults.ts @@ -1,14 +1,18 @@ import { defaultCalendarStrings } from '../Calendar/defaults'; -import type { DatePickerStrings } from './DatePicker.types'; +import type { CalendarStrings } from '../../utils/index'; +import type { DatePickerErrorType } from './DatePicker.types'; -export const defaultDatePickerStrings: DatePickerStrings = { +export const defaultDatePickerStrings: CalendarStrings = { ...defaultCalendarStrings, prevMonthAriaLabel: 'Go to previous month', nextMonthAriaLabel: 'Go to next month', prevYearAriaLabel: 'Go to previous year', nextYearAriaLabel: 'Go to next year', closeButtonAriaLabel: 'Close date picker', - isRequiredErrorMessage: 'Field is required', - invalidInputErrorMessage: 'Invalid date format', - isResetStatusMessage: 'Invalid entry "{0}", date reset to "{1}"', +}; + +export const defaultDatePickerErrorStrings: Record = { + 'invalid-input': 'Invalid date format', + 'out-of-bounds': 'Date is out of bounds', + 'required-input': 'Field is required', }; diff --git a/packages/react-components/react-datepicker-compat/src/components/DatePicker/index.ts b/packages/react-components/react-datepicker-compat/src/components/DatePicker/index.ts index 22b33b88eed32b..c2a86e3f747f16 100644 --- a/packages/react-components/react-datepicker-compat/src/components/DatePicker/index.ts +++ b/packages/react-components/react-datepicker-compat/src/components/DatePicker/index.ts @@ -3,4 +3,4 @@ export * from './DatePicker'; export * from './DatePicker.types'; export * from './renderDatePicker'; export * from './useDatePicker'; -export * from './useDatePickerStyles'; +export * from './useDatePickerStyles.styles'; diff --git a/packages/react-components/react-datepicker-compat/src/components/DatePicker/renderDatePicker.tsx b/packages/react-components/react-datepicker-compat/src/components/DatePicker/renderDatePicker.tsx index ec0bd1391b231d..89b9b65545eef3 100644 --- a/packages/react-components/react-datepicker-compat/src/components/DatePicker/renderDatePicker.tsx +++ b/packages/react-components/react-datepicker-compat/src/components/DatePicker/renderDatePicker.tsx @@ -1,41 +1,36 @@ +/** @jsxRuntime classic */ +/** @jsxFrag React.Fragment */ +/** @jsx createElement */ + import * as React from 'react'; -import { PopoverTrigger } from '@fluentui/react-popover'; -import { getSlots } from '@fluentui/react-utilities'; +import { createElement } from '@fluentui/react-jsx-runtime'; +import { Portal } from '@fluentui/react-portal'; +import { getSlotsNext } from '@fluentui/react-utilities'; import type { CalendarProps } from '../Calendar/Calendar.types'; import type { DatePickerSlots, DatePickerState } from './DatePicker.types'; -import type { PopoverProps } from '@fluentui/react-popover'; /** * Render the final JSX of DatePicker */ export const renderDatePicker_unstable = (state: DatePickerState) => { - const { slots, slotProps } = getSlots(state); + const { slots, slotProps } = getSlotsNext(state); + const { inlinePopup } = state; return ( - - - - - {popoverTriggerChildProps => { - // onKeyDown/Up and onClick are not needed as DatePicker handles opening and closing the popover - // internally. These also cause issues when typing in the input and clicking the input to open, not - // letting the user open the popover by clicking the input and causing issues with BACKSPACE and SPACE - // keys. - const { onClick, onKeyDown, onKeyUp, role, ...inputTriggerProps } = popoverTriggerChildProps; - const inputProps = { input: { ...inputTriggerProps } }; - - return ( - - - - ); - }} - - + <> + + {slots.popupSurface && + (inlinePopup ? ( + - - - - + + ) : ( + + + + + + ))} + ); }; diff --git a/packages/react-components/react-datepicker-compat/src/components/DatePicker/useDatePicker.tsx b/packages/react-components/react-datepicker-compat/src/components/DatePicker/useDatePicker.tsx index 5c5e3a3ef13be6..b5325235b64d57 100644 --- a/packages/react-components/react-datepicker-compat/src/components/DatePicker/useDatePicker.tsx +++ b/packages/react-components/react-datepicker-compat/src/components/DatePicker/useDatePicker.tsx @@ -1,32 +1,34 @@ import * as React from 'react'; import { ArrowDown, Enter, Escape } from '@fluentui/keyboard-keys'; +import { Calendar } from '../Calendar/Calendar'; import { CalendarMonthRegular } from '@fluentui/react-icons'; +import { compareDatePart, DayOfWeek, FirstWeekOfYear } from '../../utils'; +import { defaultDatePickerStrings } from './defaults'; import { Input } from '@fluentui/react-input'; -import { Field } from '@fluentui/react-field'; import { - getNativeElementProps, mergeCallbacks, resolveShorthand, useControllableState, + useEventCallback, useId, + useMergedRefs, + useOnClickOutside, + useOnScrollOutside, } from '@fluentui/react-utilities'; -import { compareDatePart, getDatePartHashValue, DayOfWeek, FirstWeekOfYear } from '../../utils'; -import { Calendar } from '../Calendar/Calendar'; -import { defaultDatePickerStrings } from './defaults'; -import { OnOpenChangeData, OpenPopoverEvents, Popover } from '@fluentui/react-popover'; -import { PopoverSurface } from '@fluentui/react-popover'; -import { PositioningImperativeRef } from '@fluentui/react-positioning'; -import type { PopoverProps } from '@fluentui/react-popover'; -import type { InputProps, InputOnChangeData } from '@fluentui/react-input'; +import { useFieldContext_unstable as useFieldContext } from '@fluentui/react-field'; +import { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts'; +import { useFocusFinders, useModalAttributes } from '@fluentui/react-tabster'; +import { usePopupPositioning } from '../../utils/usePopupPositioning'; import type { CalendarProps, ICalendar } from '../Calendar/Calendar.types'; -import type { DatePickerProps, DatePickerState } from './DatePicker.types'; +import type { DatePickerProps, DatePickerState, DatePickerValidationResultData } from './DatePicker.types'; +import type { InputProps, InputOnChangeData } from '@fluentui/react-input'; function isDateOutOfBounds(date: Date, minDate?: Date, maxDate?: Date): boolean { return (!!minDate && compareDatePart(minDate!, date) > 0) || (!!maxDate && compareDatePart(maxDate!, date) < 0); } function useFocusLogic() { - const inputRef = React.useRef<{ focus: () => void }>(null); + const inputRef = React.useRef(null); const preventFocusOpeningPicker = React.useRef(false); const focus = () => { @@ -40,24 +42,28 @@ function useFocusLogic() { return [focus, inputRef, preventFocusOpeningPicker, preventNextFocusOpeningPicker] as const; } -function useCalendarVisibility({ allowTextInput, onAfterMenuDismiss }: DatePickerProps, focus: () => void) { - const [isCalendarShown, setIsCalendarShown] = React.useState(false); +function usePopupVisibility(props: DatePickerProps) { + const [open, setOpen] = useControllableState({ + initialState: false, + defaultState: props.defaultOpen, + state: props.open, + }); const isMounted = React.useRef(false); React.useEffect( () => { - if (isMounted.current && !isCalendarShown) { + if (isMounted.current && !open) { // If DatePicker's menu (Calendar) is closed, run onAfterMenuDismiss - onAfterMenuDismiss?.(); + props.onOpenChange?.(false); } isMounted.current = true; }, - // Should only run on allowTextInput or isCalendarShown change + // Should only run on allowTextInput or open change // eslint-disable-next-line react-hooks/exhaustive-deps - [allowTextInput, isCalendarShown], + [props.allowTextInput, open], ); - return [isCalendarShown, setIsCalendarShown] as const; + return [open, setOpen] as const; } function useSelectedDate({ formatDate, onSelectDate, value }: DatePickerProps) { @@ -87,103 +93,6 @@ function useSelectedDate({ formatDate, onSelectDate, value }: DatePickerProps) { return [selectedDate, formattedDate, setSelectedDate, setFormattedDate] as const; } -function useErrorMessage( - { - allowTextInput, - formatDate, - isRequired, - maxDate, - minDate, - onSelectDate, - parseDateFromString, - strings, - }: DatePickerProps, - selectedDate: Date | undefined, - setSelectedDate: (date: Date | undefined) => void, - inputValue: string, - isCalendarShown: boolean, -) { - const [errorMessage, setErrorMessage] = React.useState(); - const [statusMessage, setStatusMessage] = React.useState(); - - const validateTextInput = (date: Date | null = null): void => { - if (allowTextInput) { - if (inputValue || date) { - // Don't parse if the selected date has the same formatted string as what we're about to parse. - // The formatted string might be ambiguous (ex: "1/2/3" or "New Year Eve") and the parser might - // not be able to come up with the exact same date. - if (selectedDate && !errorMessage && formatDate && formatDate(date ?? selectedDate) === inputValue) { - return; - } - date = date || parseDateFromString!(inputValue); - - // Check if date is null, or date is Invalid Date - if (!date || isNaN(date.getTime())) { - // Reset invalid input field, if formatting is available - setSelectedDate(selectedDate); - // default the newer isResetStatusMessage string to invalidInputErrorMessage for legacy support - const selectedText = formatDate ? formatDate(selectedDate) : ''; - const statusText = strings!.isResetStatusMessage - ? strings!.isResetStatusMessage.replace('{0}', inputValue).replace('{1}', selectedText) - : strings!.invalidInputErrorMessage || ''; - setStatusMessage(statusText); - } else { - // Check against optional date boundaries - if (isDateOutOfBounds(date, minDate, maxDate)) { - setErrorMessage(strings!.isOutOfBoundsErrorMessage || ' '); - } else { - setSelectedDate(date); - setErrorMessage(undefined); - setStatusMessage(undefined); - } - } - } else { - // Only show error for empty inputValue if it is a required field - setErrorMessage(isRequired ? strings!.isRequiredErrorMessage || ' ' : undefined); - - // If no input date string or input date string is invalid - // date variable will be null, callback should expect null value for this case - onSelectDate?.(date); - } - } else if (isRequired && !inputValue) { - // Check when DatePicker is a required field but has NO input value - setErrorMessage(strings!.isRequiredErrorMessage || ' '); - } else { - // Cleanup the error message and status message - setErrorMessage(undefined); - setStatusMessage(undefined); - } - }; - - const minDatePartHashValue = minDate && getDatePartHashValue(minDate); - const maxDatePartHashValue = maxDate && getDatePartHashValue(maxDate); - const selectedDatePartHashValue = selectedDate && getDatePartHashValue(selectedDate); - React.useEffect(() => { - if (isRequired && !selectedDate) { - setErrorMessage(strings!.isRequiredErrorMessage || ' '); - } else if (selectedDate && isDateOutOfBounds(selectedDate, minDate, maxDate)) { - setErrorMessage(strings!.isOutOfBoundsErrorMessage || ' '); - } else { - setErrorMessage(undefined); - } - // eslint-disable-next-line react-hooks/exhaustive-deps - }, [ - // We don't want to compare the date itself, since two instances of date at the same time are not equal - minDatePartHashValue, - maxDatePartHashValue, - selectedDatePartHashValue, - isRequired, - ]); - - return [ - isCalendarShown ? undefined : errorMessage, - validateTextInput, - setErrorMessage, - isCalendarShown ? undefined : statusMessage, - setStatusMessage, - ] as const; -} - const defaultFormatDate = (date?: Date) => (date ? date.toDateString() : ''); const defaultParseDateFromString = (dateStr: string) => { const date = Date.parse(dateStr); @@ -197,7 +106,7 @@ const defaultParseDateFromString = (dateStr: string) => { * before being passed to renderDatePicker_unstable. * * @param props - props from this instance of DatePicker - * @param ref - reference to root HTMLElement of DatePicker + * @param ref - reference to root Input slot */ export const useDatePicker_unstable = (props: DatePickerProps, ref: React.Ref): DatePickerState => { const { @@ -205,7 +114,7 @@ export const useDatePicker_unstable = (props: DatePickerProps, ref: React.Ref(null); - - const [focus, _, preventFocusOpeningPicker, preventNextFocusOpeningPicker] = useFocusLogic(); - const [isCalendarShown, setIsCalendarShown] = useCalendarVisibility({ allowTextInput, onAfterMenuDismiss }, focus); + const [focus, rootRef, preventFocusOpeningPicker, preventNextFocusOpeningPicker] = useFocusLogic(); const [selectedDate, formattedDate, setSelectedDate, setFormattedDate] = useSelectedDate({ formatDate, onSelectDate: onUserSelectDate, value, }); - const [errorMessage, validateTextInput, setErrorMessage, statusMessage, setStatusMessage] = useErrorMessage( - { + const [open, setOpenState] = usePopupVisibility(props); + const fieldContext = useFieldContext(); + const required = fieldContext?.required ?? props.required; + const popupSurfaceId = useId('datePicker-popoverSurface'); + + const validateTextInput = React.useCallback( + (date: Date | null = null): void => { + let error: DatePickerValidationResultData['error'] | undefined; + + if (allowTextInput) { + if (formattedDate || date) { + // Don't parse if the selected date has the same formatted string as what we're about to parse. + // The formatted string might be ambiguous (ex: "1/2/3" or "New Year Eve") and the parser might + // not be able to come up with the exact same date. + if (selectedDate && formatDate && formatDate(date ?? selectedDate) === formattedDate) { + return; + } + date = date || parseDateFromString!(formattedDate); + + // Check if date is null or date is an invalid date + if (!date || isNaN(date.getTime())) { + // Reset input if formatting is available + setSelectedDate(selectedDate); + error = 'invalid-input'; + } else { + if (isDateOutOfBounds(date, minDate, maxDate)) { + error = 'out-of-bounds'; + } else { + setSelectedDate(date); + } + } + } else { + if (required) { + error = 'required-input'; + } + + onUserSelectDate?.(date); + } + } else if (required && !formattedDate) { + error = 'required-input'; + } + + onValidationResult?.({ error }); + }, + [ allowTextInput, formatDate, - isRequired, + formattedDate, maxDate, minDate, - onSelectDate: onUserSelectDate, + onUserSelectDate, + onValidationResult, parseDateFromString, - strings, + required, + selectedDate, + setSelectedDate, + ], + ); + + const setOpen = React.useCallback( + (newState: boolean) => { + onOpenChange?.(newState); + setOpenState(newState); }, - selectedDate, - setSelectedDate, - formattedDate, - isCalendarShown, + [onOpenChange, setOpenState], ); const dismissDatePickerPopup = React.useCallback( (newlySelectedDate?: Date): void => { - if (isCalendarShown) { - setIsCalendarShown(false); + if (open) { + setOpen(false); validateTextInput(newlySelectedDate); if (!allowTextInput && newlySelectedDate) { @@ -273,15 +226,15 @@ export const useDatePicker_unstable = (props: DatePickerProps, ref: React.Ref { - if (!isCalendarShown) { + if (!open) { preventNextFocusOpeningPicker(); - setIsCalendarShown(true); + setOpen(true); } - }, [isCalendarShown, preventNextFocusOpeningPicker, setIsCalendarShown]); + }, [open, preventNextFocusOpeningPicker, setOpen]); /** * Callback for closing the calendar callout @@ -290,75 +243,36 @@ export const useDatePicker_unstable = (props: DatePickerProps, ref: React.Ref { preventNextFocusOpeningPicker(); dismissDatePickerPopup(newlySelectedDate); - // don't need to focus the text box, if necessary the focusTrapZone will do it }, [dismissDatePickerPopup, preventNextFocusOpeningPicker], ); - const handleEscKey = React.useCallback( - (ev: React.KeyboardEvent): void => { - if (isCalendarShown) { - ev.stopPropagation(); - calendarDismissed(); - } - }, - [calendarDismissed, isCalendarShown], - ); - - React.useImperativeHandle( - props.componentRef, - () => ({ - focus, - reset() { - setIsCalendarShown(false); - setSelectedDate(undefined); - setErrorMessage(undefined); - setStatusMessage(undefined); - }, - showDatePickerPopup, - }), - [focus, setErrorMessage, setIsCalendarShown, setSelectedDate, setStatusMessage, showDatePickerPopup], - ); - - const onInputFocus = React.useCallback((): void => { - if (disableAutoFocus) { - return; - } - - if (!allowTextInput) { - if (!preventFocusOpeningPicker.current) { - showDatePickerPopup(); - } - preventFocusOpeningPicker.current = false; - } - }, [allowTextInput, disableAutoFocus, preventFocusOpeningPicker, showDatePickerPopup]); - - const onInputBlur = React.useCallback((): void => { - validateTextInput(); - }, [validateTextInput]); - const onInputChange = React.useCallback( - (ev: React.FormEvent, data: InputOnChangeData): void => { + (ev: React.ChangeEvent, data: InputOnChangeData) => { const { value: newValue } = data; if (allowTextInput) { - if (isCalendarShown) { + if (open) { dismissDatePickerPopup(); } setFormattedDate(newValue); } }, - [allowTextInput, dismissDatePickerPopup, isCalendarShown, setFormattedDate], + [allowTextInput, dismissDatePickerPopup, open, setFormattedDate], ); + const onInputBlur: React.FocusEventHandler = React.useCallback((): void => { + validateTextInput(); + }, [validateTextInput]); + const onInputKeyDown = React.useCallback( (ev: React.KeyboardEvent): void => { switch (ev.key) { case Enter: ev.preventDefault(); ev.stopPropagation(); - if (!isCalendarShown) { + if (!open) { validateTextInput(); showDatePickerPopup(); } else { @@ -371,11 +285,16 @@ export const useDatePicker_unstable = (props: DatePickerProps, ref: React.Ref { + const onInputFocus: React.FocusEventHandler = React.useCallback((): void => { + if (disableAutoFocus) { + return; + } + + if (!allowTextInput) { + if (!preventFocusOpeningPicker.current) { + showDatePickerPopup(); + } + preventFocusOpeningPicker.current = false; + } + }, [allowTextInput, disableAutoFocus, preventFocusOpeningPicker, showDatePickerPopup]); + + const onInputClick: React.MouseEventHandler = React.useCallback((): void => { // default openOnClick to !props.disableAutoFocus for legacy support of disableAutoFocus behavior - const openOnClick = props.openOnClick || !props.disableAutoFocus; - if (openOnClick && !isCalendarShown && !props.disabled) { + if ((openOnClick || !disableAutoFocus) && !open && !props.disabled) { showDatePickerPopup(); return; } - if (props.allowTextInput) { + + if (allowTextInput) { dismissDatePickerPopup(); } }, [ + allowTextInput, + disableAutoFocus, dismissDatePickerPopup, - isCalendarShown, - props.allowTextInput, + openOnClick, + open, props.disabled, - props.disableAutoFocus, - props.openOnClick, showDatePickerPopup, ]); const onIconClick = (ev: React.MouseEvent): void => { ev.stopPropagation(); - if (!isCalendarShown && !props.disabled) { + if (!open && !props.disabled) { showDatePickerPopup(); } else if (props.allowTextInput) { dismissDatePickerPopup(); } }; - const inputId = props.id && props.id !== id ? props.id : id + '-label'; - const inputAppearance: InputProps['appearance'] = underlined ? 'underline' : borderless ? 'filled-lighter' : 'outline'; - const onPopoverOpenChange = React.useCallback( - (ev: OpenPopoverEvents, data: OnOpenChangeData) => { - if (!data.open) { - calendarDismissed(); - } - }, - [calendarDismissed], - ); - - const root = getNativeElementProps('div', { - ref, - ...props, - }); - - const inputRef = React.useRef(null); - const inputShorthand = resolveShorthand(props.input, { + const [triggerWrapperRef, popupRef] = usePopupPositioning(props); + const rootShorthand = resolveShorthand(restOfProps, { required: true, defaultProps: { appearance: inputAppearance, - 'aria-controls': isCalendarShown ? calloutId : undefined, - 'aria-expanded': isCalendarShown, + 'aria-controls': open ? popupSurfaceId : undefined, + 'aria-expanded': open, 'aria-haspopup': 'dialog', - 'aria-label': props['aria-label'], contentAfter: } />, - disabled, - id: inputId, - placeholder, readOnly: !allowTextInput, - required: isRequired, role: 'combobox', - tabIndex, root: { - ref: inputRef, + ref: useMergedRefs(triggerWrapperRef, ref), + 'aria-owns': popupSurfaceId, + }, + input: { + ref: rootRef, }, }, }); - inputShorthand.onBlur = onInputBlur; - inputShorthand.onClick = onInputClick; - inputShorthand.onFocus = onInputFocus; - inputShorthand.onKeyDown = onInputKeyDown; - inputShorthand.onChange = mergeCallbacks(onInputChange, props.input?.onChange); - inputShorthand.value = formattedDate; - - const fieldShorthand = resolveShorthand(props.field, { - defaultProps: { - label, - required: isRequired, - validationMessage: errorMessage ?? statusMessage, - validationState: errorMessage ? 'error' : undefined, - }, - required: true, + rootShorthand.onChange = mergeCallbacks(rootShorthand.onChange, onInputChange); + rootShorthand.onBlur = mergeCallbacks(rootShorthand.onBlur, onInputBlur); + rootShorthand.onKeyDown = mergeCallbacks(rootShorthand.onKeyDown, onInputKeyDown); + rootShorthand.onFocus = mergeCallbacks(rootShorthand.onFocus, onInputFocus); + rootShorthand.onClick = mergeCallbacks(rootShorthand.onClick, onInputClick); + + const { modalAttributes } = useModalAttributes({ trapFocus: true, alwaysFocusable: true, legacyTrapFocus: false }); + const popupSurfaceShorthand = open + ? resolveShorthand(props.popupSurface, { + required: true, + defaultProps: { + 'aria-label': 'Calendar', + 'aria-modal': true, + id: popupSurfaceId, + role: 'dialog', + ref: popupRef, + ...modalAttributes, + }, + }) + : undefined; + + const { targetDocument } = useFluent(); + useOnClickOutside({ + element: targetDocument, + callback: ev => dismissDatePickerPopup(), + refs: [triggerWrapperRef, popupRef], + disabled: !open, }); - const wrapperShorthand = resolveShorthand(props.wrapper, { - defaultProps: { - 'aria-owns': isCalendarShown ? calloutId : undefined, - }, - required: true, + useOnScrollOutside({ + element: targetDocument, + callback: ev => dismissDatePickerPopup(), + refs: [triggerWrapperRef, popupRef], + disabled: !open, }); - const positioningRef = React.useRef(null); - const popoverShorthand = resolveShorthand(props.popover, { - defaultProps: { - onOpenChange: onPopoverOpenChange, - open: isCalendarShown, - positioning: { align: 'start', position: 'below', positioningRef }, - trapFocus: true, - }, - required: true, - }); + const { findFirstFocusable } = useFocusFinders(); + React.useEffect(() => { + if (disableAutoFocus) { + return; + } - const popoverSurfaceShorthand = resolveShorthand(props.popoverSurface, { - defaultProps: { - 'aria-label': 'Calendar', - id: calloutId, - role: 'dialog', - }, - required: true, - }); + if (open && popupRef.current) { + const firstFocusable = findFirstFocusable(popupRef.current); + firstFocusable?.focus(); + } + }, [disableAutoFocus, findFirstFocusable, open, popupRef]); + + const popupOnClick = useEventCallback( + mergeCallbacks((ev: React.MouseEvent) => { + rootRef.current?.focus(); + }, popupSurfaceShorthand?.onClick), + ); + + if (popupSurfaceShorthand) { + popupSurfaceShorthand.onClick = popupOnClick; + } const calendarShorthand = resolveShorthand(props.calendar, { required: true, @@ -535,37 +456,36 @@ export const useDatePicker_unstable = (props: DatePickerProps, ref: React.Ref ({ + focus, + reset() { + setOpen(false); + setSelectedDate(undefined); + }, + showDatePickerPopup, + }), + [focus, setOpen, setSelectedDate, showDatePickerPopup], + ); + const state: DatePickerState = { - disabled: !!disabled, - isDatePickerShown: isCalendarShown, + disabled: !!props.disabled, + inlinePopup, - // Slots definition components: { - root: 'div', - field: Field, - input: Input, - wrapper: 'div', - popover: Popover as React.FC>, - popoverSurface: PopoverSurface, + root: Input, calendar: Calendar as React.FC>, + popupSurface: 'div', }, calendar: calendarShorthand, - input: inputShorthand, - field: fieldShorthand, - popover: popoverShorthand, - popoverSurface: popoverSurfaceShorthand, - root, - wrapper: wrapperShorthand, + root: rootShorthand, + popupSurface: popupSurfaceShorthand, }; + state.root.value = formattedDate; state.calendar.onSelectDate = mergeCallbacks(state.calendar.onSelectDate, calendarDismissed); - React.useEffect(() => { - if (inputRef.current) { - positioningRef.current?.setTarget(inputRef.current); - } - }, [inputRef, positioningRef]); - return state; }; diff --git a/packages/react-components/react-datepicker-compat/src/components/DatePicker/useDatePickerStyles.styles.ts b/packages/react-components/react-datepicker-compat/src/components/DatePicker/useDatePickerStyles.styles.ts new file mode 100644 index 00000000000000..c2baf78218c827 --- /dev/null +++ b/packages/react-components/react-datepicker-compat/src/components/DatePicker/useDatePickerStyles.styles.ts @@ -0,0 +1,66 @@ +import { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react'; +import { tokens, typographyStyles } from '@fluentui/react-theme'; +import type { SlotClassNames } from '@fluentui/react-utilities'; +import type { DatePickerSlots, DatePickerState } from './DatePicker.types'; + +export const datePickerClassNames: SlotClassNames = { + root: 'fui-DatePicker', + calendar: 'fui-DatePicker__calendar', + popupSurface: 'fui-DatePicker__popupSurface', +}; + +const useStyles = makeStyles({ + base: { + position: 'relative', + cursor: 'pointer', + '& input': { + cursor: 'pointer', + }, + }, + disabled: { + cursor: 'default', + '& input': { + cursor: 'default', + }, + }, +}); + +const usePopupSurfaceClassName = makeResetStyles({ + backgroundColor: tokens.colorNeutralBackground1, + boxShadow: tokens.shadow16, + borderRadius: tokens.borderRadiusMedium, + borderWidth: '1px', + borderStyle: 'solid', + borderColor: tokens.colorTransparentStroke, + display: 'inline-flex', + color: tokens.colorNeutralForeground1, + ...typographyStyles.body1, +}); + +/** + * Apply styling to the DatePicker slots based on the state + */ +export const useDatePickerStyles_unstable = (state: DatePickerState): DatePickerState => { + const styles = useStyles(); + const popupSurfaceClassName = usePopupSurfaceClassName(); + const { disabled } = state; + + state.root.className = mergeClasses( + datePickerClassNames.root, + styles.base, + disabled && styles.disabled, + state.root.className, + ); + + if (state.popupSurface) { + state.popupSurface.className = mergeClasses( + datePickerClassNames.popupSurface, + popupSurfaceClassName, + state.popupSurface.className, + ); + } + + state.calendar.className = mergeClasses(datePickerClassNames.calendar, state.calendar.className); + + return state; +}; diff --git a/packages/react-components/react-datepicker-compat/src/components/DatePicker/useDatePickerStyles.ts b/packages/react-components/react-datepicker-compat/src/components/DatePicker/useDatePickerStyles.ts deleted file mode 100644 index e8534ef70661d4..00000000000000 --- a/packages/react-components/react-datepicker-compat/src/components/DatePicker/useDatePickerStyles.ts +++ /dev/null @@ -1,77 +0,0 @@ -import { tokens } from '@fluentui/react-theme'; -import { makeStyles, mergeClasses, shorthands } from '@griffel/react'; -import type { SlotClassNames } from '@fluentui/react-utilities'; -import type { DatePickerSlots, DatePickerState } from './DatePicker.types'; - -export const datePickerClassNames: SlotClassNames = { - root: 'fui-DatePicker', - field: 'fui-DatePicker__field', - wrapper: 'fui-DatePicker__wrapper', - popover: 'fui-DatePicker__popover', - popoverSurface: 'fui-DatePicker__popoverSurface', - input: 'fui-DatePicker__input', - calendar: 'fui-DatePicker__calendar', -}; - -const useRootStyles = makeStyles({ - base: { - fontFamily: tokens.fontFamilyBase, - // NOTE: Using 20px as we don't have an 18px font size in the ramp - fontSize: tokens.fontSizeBase500, - fontWeight: tokens.fontWeightRegular, - }, - normalize: { - boxShadow: 'none', - boxSizing: 'border-box', - ...shorthands.margin(0), - ...shorthands.padding(0), - }, -}); - -const useTextFieldStyles = makeStyles({ - base: { - position: 'relative', - '& input[readonly]': { - cursor: 'pointer', - }, - }, - disabled: { - '& input[readonly]': { - cursor: 'default', - }, - }, -}); - -/** - * Apply styling to the DatePicker slots based on the state - */ -export const useDatePickerStyles_unstable = (state: DatePickerState): DatePickerState => { - const rootStyles = useRootStyles(); - const textFieldStyles = useTextFieldStyles(); - const { disabled, isDatePickerShown } = state; - - state.root.className = mergeClasses( - datePickerClassNames.root, - rootStyles.base, - isDatePickerShown && 'is-open', - rootStyles.normalize, - state.root.className, - ); - - state.wrapper.className = mergeClasses(datePickerClassNames.wrapper, state.wrapper.className); - - state.input.className = mergeClasses( - datePickerClassNames.input, - textFieldStyles.base, - disabled && textFieldStyles.disabled, - state.input.className, - ); - - state.field.className = mergeClasses(datePickerClassNames.field, state.field.className); - - state.popoverSurface.className = mergeClasses(datePickerClassNames.popoverSurface, state.popoverSurface.className); - - state.calendar.className = mergeClasses(datePickerClassNames.calendar, state.calendar.className); - - return state; -}; diff --git a/packages/react-components/react-datepicker-compat/src/index.ts b/packages/react-components/react-datepicker-compat/src/index.ts index 6cafa9be51e38b..848bab160b509a 100644 --- a/packages/react-components/react-datepicker-compat/src/index.ts +++ b/packages/react-components/react-datepicker-compat/src/index.ts @@ -1,4 +1,4 @@ -export { AnimationDirection, defaultCalendarStrings } from './Calendar'; +export { AnimationDirection } from './Calendar'; export type { CalendarProps, ICalendar } from './Calendar'; export type { CalendarDayProps, ICalendarDay } from './CalendarDay'; @@ -8,12 +8,13 @@ export type { CalendarMonthProps, ICalendarMonth } from './CalendarMonth'; export { DatePicker, datePickerClassNames, + defaultDatePickerErrorStrings, defaultDatePickerStrings, renderDatePicker_unstable, useDatePicker_unstable, useDatePickerStyles_unstable, } from './DatePicker'; -export type { DatePickerProps, DatePickerStrings, IDatePicker } from './DatePicker'; +export type { DatePickerErrorType, DatePickerProps, DatePickerValidationResultData, IDatePicker } from './DatePicker'; export { DAYS_IN_WEEK, 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 77f88408cbd839..a3d988f29a1728 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-datepicker-compat/src/utils/usePopupPositioning.ts b/packages/react-components/react-datepicker-compat/src/utils/usePopupPositioning.ts new file mode 100644 index 00000000000000..31c99e279420a8 --- /dev/null +++ b/packages/react-components/react-datepicker-compat/src/utils/usePopupPositioning.ts @@ -0,0 +1,26 @@ +import * as React from 'react'; +import { resolvePositioningShorthand, usePositioning } from '@fluentui/react-positioning'; +import type { DatePickerProps } from '../DatePicker'; + +/** + * Hook used to handle positioning of the popup. + * + * @param props - DatePicker props + * @returns tuple of trigger and popup refs + * @internal + */ +export function usePopupPositioning( + props: DatePickerProps, +): [triggerRef: React.MutableRefObject, popupRef: React.MutableRefObject] { + const { positioning } = props; + + const popupOptions = { + position: 'below' as const, + align: 'start' as const, + ...resolvePositioningShorthand(positioning), + }; + + const { targetRef, containerRef } = usePositioning(popupOptions); + + return [targetRef, containerRef]; +} diff --git a/packages/react-components/react-datepicker-compat/stories/DatePicker/DatePickerBestPractices.md b/packages/react-components/react-datepicker-compat/stories/DatePicker/DatePickerBestPractices.md index 2eff74285ba0c3..565293a34f8b9c 100644 --- a/packages/react-components/react-datepicker-compat/stories/DatePicker/DatePickerBestPractices.md +++ b/packages/react-components/react-datepicker-compat/stories/DatePicker/DatePickerBestPractices.md @@ -8,6 +8,7 @@ Best Practices - Use the `DatePicker` control the way it's designed and built. - The control provides the date in a specific format. If the date can be entered in an input field, provide helper text in the appropriate format. - The control provides English strings by default. For localized apps, you must override these using the strings prop. +- Use `` when possible and provide the `required` prop through the `` component. ### Don't diff --git a/packages/react-components/react-datepicker-compat/stories/DatePicker/DatePickerControlled.stories.tsx b/packages/react-components/react-datepicker-compat/stories/DatePicker/DatePickerControlled.stories.tsx index a24611716a33fa..91d8898b31e412 100644 --- a/packages/react-components/react-datepicker-compat/stories/DatePicker/DatePickerControlled.stories.tsx +++ b/packages/react-components/react-datepicker-compat/stories/DatePicker/DatePickerControlled.stories.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; -import { makeStyles, Button } from '@fluentui/react-components'; import { addDays, DatePicker } from '@fluentui/react-datepicker-compat'; +import { Button, Field, makeStyles } from '@fluentui/react-components'; const useStyles = makeStyles({ root: { @@ -31,13 +31,14 @@ export const Controlled = () => { return (
- void} - placeholder="Select a date..." - aria-label="Select a date" - className={styles.control} - /> + + void} + placeholder="Select a date..." + className={styles.control} + /> +
+ + + + + + + + + + + + + + , + ); + cy.get(dialogTriggerOpenSelector).realClick(); + cy.get(dialogTriggerCloseSelector).should('be.focused'); + cy.get('#extra-btn-outside').realClick().should('be.focused'); + cy.get('#extra-btn-inside').realClick().should('be.focused').realType('{esc}'); + cy.get(dialogSurfaceSelector).should('not.exist'); + }); }); describe('modalType = alert', () => { it('should not close with escape keydown', () => { diff --git a/packages/react-components/react-dialog/src/components/Dialog/useDialog.ts b/packages/react-components/react-dialog/src/components/Dialog/useDialog.ts index a1c3d2aebb0ccb..ffce253ffac893 100644 --- a/packages/react-components/react-dialog/src/components/Dialog/useDialog.ts +++ b/packages/react-components/react-dialog/src/components/Dialog/useDialog.ts @@ -5,6 +5,7 @@ import { useDisableBodyScroll, useFocusFirstElement } from '../../utils'; import { DialogContext } from '../../contexts'; import type { DialogOpenChangeData, DialogProps, DialogState } from './Dialog.types'; +import { useModalAttributes } from '@fluentui/react-tabster'; /** * Create the state required to render Dialog. @@ -45,6 +46,11 @@ export const useDialog_unstable = (props: DialogProps): DialogState => { } }, [disableBodyScroll, isBodyScrollLocked]); + const { modalAttributes, triggerAttributes } = useModalAttributes({ + trapFocus: modalType !== 'non-modal', + legacyTrapFocus: !inertTrapFocus, + }); + return { components: { backdrop: 'div', @@ -58,6 +64,8 @@ export const useDialog_unstable = (props: DialogProps): DialogState => { dialogTitleId: useId('dialog-title-'), isNestedDialog: useHasParentContext(DialogContext), dialogRef: focusRef, + modalAttributes: modalType !== 'non-modal' ? modalAttributes : undefined, + triggerAttributes, }; }; diff --git a/packages/react-components/react-dialog/src/components/Dialog/useDialogContextValues.ts b/packages/react-components/react-dialog/src/components/Dialog/useDialogContextValues.ts index 474ce5e99c9bc5..7670d1f8eb8ed8 100644 --- a/packages/react-components/react-dialog/src/components/Dialog/useDialogContextValues.ts +++ b/packages/react-components/react-dialog/src/components/Dialog/useDialogContextValues.ts @@ -2,7 +2,17 @@ import type { DialogContextValue, DialogSurfaceContextValue } from '../../contex import type { DialogContextValues, DialogState } from './Dialog.types'; export function useDialogContextValues_unstable(state: DialogState): DialogContextValues { - const { modalType, open, dialogRef, dialogTitleId, isNestedDialog, inertTrapFocus, requestOpenChange } = state; + const { + modalType, + open, + dialogRef, + dialogTitleId, + isNestedDialog, + inertTrapFocus, + requestOpenChange, + modalAttributes, + triggerAttributes, + } = state; /** * This context is created with "@fluentui/react-context-selector", @@ -15,6 +25,8 @@ export function useDialogContextValues_unstable(state: DialogState): DialogConte dialogTitleId, isNestedDialog, inertTrapFocus, + modalAttributes, + triggerAttributes, requestOpenChange, }; 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 bae52f10611cd0..3ef410875ce1ab 100644 --- a/packages/react-components/react-dialog/src/components/DialogActions/DialogActions.tsx +++ b/packages/react-components/react-dialog/src/components/DialogActions/DialogActions.tsx @@ -1,10 +1,10 @@ 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 { useCustomStyleHooks_unstable } from '@fluentui/react-shared-contexts'; +import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts'; /** * `DialogActions` is a container for the actions of the dialog. @@ -15,8 +15,7 @@ export const DialogActions: ForwardRefComponent = React.forw useDialogActionsStyles_unstable(state); - const { useDialogActionsStyles_unstable: useCustomStyles } = useCustomStyleHooks_unstable(); - useCustomStyles(state); + useCustomStyleHook_unstable('useDialogActionsStyles_unstable')(state); return renderDialogActions_unstable(state); }); diff --git a/packages/react-components/react-dialog/src/components/DialogActions/index.ts b/packages/react-components/react-dialog/src/components/DialogActions/index.ts index 5b6fc48233a897..0bb1d1cf48bd54 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 d74b7c6cc21ece..e0cc53b302e1dd 100644 --- a/packages/react-components/react-dialog/src/components/DialogBody/DialogBody.tsx +++ b/packages/react-components/react-dialog/src/components/DialogBody/DialogBody.tsx @@ -1,10 +1,10 @@ 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 { useCustomStyleHooks_unstable } from '@fluentui/react-shared-contexts'; +import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts'; /** * The `DialogBody` is a container where the content of the dialog is rendered. @@ -15,8 +15,7 @@ export const DialogBody: ForwardRefComponent = React.forwardRef useDialogBodyStyles_unstable(state); - const { useDialogBodyStyles_unstable: useCustomStyles } = useCustomStyleHooks_unstable(); - useCustomStyles(state); + useCustomStyleHook_unstable('useDialogBodyStyles_unstable')(state); return renderDialogBody_unstable(state); }); diff --git a/packages/react-components/react-dialog/src/components/DialogBody/index.ts b/packages/react-components/react-dialog/src/components/DialogBody/index.ts index caade527cc447e..bd1e90e0a99cb2 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 8db28989e55b58..70b4a65cc56c5d 100644 --- a/packages/react-components/react-dialog/src/components/DialogContent/DialogContent.tsx +++ b/packages/react-components/react-dialog/src/components/DialogContent/DialogContent.tsx @@ -1,10 +1,10 @@ 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 { useCustomStyleHooks_unstable } from '@fluentui/react-shared-contexts'; +import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts'; /** * The `DialogContent` is a container where the content of the dialog is rendered. @@ -15,8 +15,7 @@ export const DialogContent: ForwardRefComponent = React.forw useDialogContentStyles_unstable(state); - const { useDialogContentStyles_unstable: useCustomStyles } = useCustomStyleHooks_unstable(); - useCustomStyles(state); + useCustomStyleHook_unstable('useDialogContentStyles_unstable')(state); return renderDialogContent_unstable(state); }); diff --git a/packages/react-components/react-dialog/src/components/DialogContent/index.ts b/packages/react-components/react-dialog/src/components/DialogContent/index.ts index ccedb8165f7d77..b82b9c3521b398 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 fcf304315d9e7e..b84396ac846775 100644 --- a/packages/react-components/react-dialog/src/components/DialogSurface/DialogSurface.tsx +++ b/packages/react-components/react-dialog/src/components/DialogSurface/DialogSurface.tsx @@ -1,11 +1,11 @@ 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'; -import { useCustomStyleHooks_unstable } from '@fluentui/react-shared-contexts'; +import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts'; /** * DialogSurface component represents the visual part of a `Dialog` as a whole, @@ -17,8 +17,7 @@ export const DialogSurface: ForwardRefComponent = React.forw useDialogSurfaceStyles_unstable(state); - const { useDialogSurfaceStyles_unstable: useCustomStyles } = useCustomStyleHooks_unstable(); - useCustomStyles(state); + useCustomStyleHook_unstable('useDialogSurfaceStyles_unstable')(state); return renderDialogSurface_unstable(state, contextValues); }); diff --git a/packages/react-components/react-dialog/src/components/DialogSurface/index.ts b/packages/react-components/react-dialog/src/components/DialogSurface/index.ts index d19bafa777e149..15d5efe48eeec0 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/useDialogSurface.ts b/packages/react-components/react-dialog/src/components/DialogSurface/useDialogSurface.ts index 631f4028010911..3cc9418d841403 100644 --- a/packages/react-components/react-dialog/src/components/DialogSurface/useDialogSurface.ts +++ b/packages/react-components/react-dialog/src/components/DialogSurface/useDialogSurface.ts @@ -9,7 +9,6 @@ import { import type { DialogSurfaceElement, DialogSurfaceProps, DialogSurfaceState } from './DialogSurface.types'; import { useDialogContext_unstable } from '../../contexts'; import { isEscapeKeyDismiss } from '../../utils'; -import { useModalAttributes } from '@fluentui/react-tabster'; /** * Create the state required to render DialogSurface. @@ -26,7 +25,7 @@ export const useDialogSurface_unstable = ( ): DialogSurfaceState => { const { backdrop, as } = props; const modalType = useDialogContext_unstable(ctx => ctx.modalType); - const inertTrapFocus = useDialogContext_unstable(ctx => ctx.inertTrapFocus); + const modalAttributes = useDialogContext_unstable(ctx => ctx.modalAttributes); const dialogRef = useDialogContext_unstable(ctx => ctx.dialogRef); const open = useDialogContext_unstable(ctx => ctx.open); const requestOpenChange = useDialogContext_unstable(ctx => ctx.requestOpenChange); @@ -60,11 +59,6 @@ export const useDialogSurface_unstable = ( } }); - const { modalAttributes } = useModalAttributes({ - trapFocus: modalType !== 'non-modal', - legacyTrapFocus: !inertTrapFocus, - }); - return { components: { backdrop: 'div', 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 37830ae3a156e2..2d60f6ef40f04f 100644 --- a/packages/react-components/react-dialog/src/components/DialogTitle/DialogTitle.tsx +++ b/packages/react-components/react-dialog/src/components/DialogTitle/DialogTitle.tsx @@ -1,10 +1,10 @@ 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 { useCustomStyleHooks_unstable } from '@fluentui/react-shared-contexts'; +import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts'; /** * The `DialogTitle` component expects to have a title/header @@ -15,8 +15,7 @@ export const DialogTitle: ForwardRefComponent = React.forwardR useDialogTitleStyles_unstable(state); - const { useDialogTitleStyles_unstable: useCustomStyles } = useCustomStyleHooks_unstable(); - useCustomStyles(state); + useCustomStyleHook_unstable('useDialogTitleStyles_unstable')(state); return renderDialogTitle_unstable(state); }); diff --git a/packages/react-components/react-dialog/src/components/DialogTitle/DialogTitle.types.ts b/packages/react-components/react-dialog/src/components/DialogTitle/DialogTitle.types.ts index 5369a1bff90327..7388cb8d1e36ca 100644 --- a/packages/react-components/react-dialog/src/components/DialogTitle/DialogTitle.types.ts +++ b/packages/react-components/react-dialog/src/components/DialogTitle/DialogTitle.types.ts @@ -2,9 +2,10 @@ import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utili export type DialogTitleSlots = { /** - * By default this is a div, but can be a heading. + * By default this is a h2, but can be any heading or div, + * if `div` is provided do not forget to also provide proper `role="heading"` and `aria-level` attributes */ - root: Slot<'div', 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'>; + root: Slot<'h2', 'h1' | 'h3' | 'h4' | 'h5' | 'h6' | 'div'>; /** * By default a Dialog with modalType='non-modal' will have a close button action */ diff --git a/packages/react-components/react-dialog/src/components/DialogTitle/__snapshots__/DialogTitle.test.tsx.snap b/packages/react-components/react-dialog/src/components/DialogTitle/__snapshots__/DialogTitle.test.tsx.snap index c32d25e64a3c62..d675f3663fedaf 100644 --- a/packages/react-components/react-dialog/src/components/DialogTitle/__snapshots__/DialogTitle.test.tsx.snap +++ b/packages/react-components/react-dialog/src/components/DialogTitle/__snapshots__/DialogTitle.test.tsx.snap @@ -2,10 +2,10 @@ exports[`DialogTitle renders a default state 1`] = `
-
Default DialogTitle -
+
`; 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 047ee38dc730a9..af498e61b1d6ce 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 df669cb699cc32..5aef3e2cbfb26f 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. @@ -23,10 +23,10 @@ export const useDialogTitle_unstable = (props: DialogTitleProps, ref: React.Ref< return { components: { - root: 'div', + root: 'h2', action: 'div', }, - root: getNativeElementProps(as ?? 'div', { + root: getNativeElementProps(as ?? 'h2', { ref, id: useDialogContext_unstable(ctx => ctx.dialogTitleId), ...props, 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 98% 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 index 5b334a662eda62..a6c74cef3b6abb 100644 --- a/packages/react-components/react-dialog/src/components/DialogTitle/useDialogTitleStyles.ts +++ b/packages/react-components/react-dialog/src/components/DialogTitle/useDialogTitleStyles.styles.ts @@ -17,6 +17,7 @@ const useStyles = makeStyles({ root: { ...typographyStyles.subtitle1, ...shorthands.gridArea(TITLE_GRID_AREA), + ...shorthands.margin(0), }, rootWithoutCloseButton: { ...shorthands.gridArea(TITLE_GRID_AREA, TITLE_GRID_AREA, TITLE_ACTION_GRID_AREA, TITLE_ACTION_GRID_AREA), 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 a7a461654a9489..d69fd85ace76d3 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 cefe8176cb56b8..a6458850c55c0c 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 94% 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 index 2d28e8c48e1b02..827b4ff31f0134 100644 --- a/packages/react-components/react-dialog/src/components/DialogTrigger/useDialogTrigger.ts +++ b/packages/react-components/react-dialog/src/components/DialogTrigger/useDialogTrigger.styles.ts @@ -1,5 +1,4 @@ import * as React from 'react'; -import { useModalAttributes } from '@fluentui/react-tabster'; import { applyTriggerPropsToChildren, getTriggerChild, useEventCallback } from '@fluentui/react-utilities'; import type { DialogTriggerProps, DialogTriggerState } from './DialogTrigger.types'; import { useDialogContext_unstable, useDialogSurfaceContext_unstable } from '../../contexts'; @@ -19,8 +18,7 @@ export const useDialogTrigger_unstable = (props: DialogTriggerProps): DialogTrig const child = getTriggerChild(children); const requestOpenChange = useDialogContext_unstable(ctx => ctx.requestOpenChange); - - const { triggerAttributes } = useModalAttributes(); + const triggerAttributes = useDialogContext_unstable(ctx => ctx.triggerAttributes); const handleClick = useEventCallback( (event: React.MouseEvent) => { diff --git a/packages/react-components/react-dialog/src/contexts/dialogContext.ts b/packages/react-components/react-dialog/src/contexts/dialogContext.ts index f677c50d09028c..c186f2f0b5ddf4 100644 --- a/packages/react-components/react-dialog/src/contexts/dialogContext.ts +++ b/packages/react-components/react-dialog/src/contexts/dialogContext.ts @@ -3,6 +3,7 @@ import { createContext, ContextSelector, useContextSelector } from '@fluentui/re import { DialogSurfaceElement } from '../DialogSurface'; import type { Context } from '@fluentui/react-context-selector'; import type { DialogModalType, DialogOpenChangeData } from '../Dialog'; +import { useModalAttributes } from '@fluentui/react-tabster'; export type DialogContextValue = { open: boolean; @@ -15,7 +16,7 @@ export type DialogContextValue = { * Requests dialog main component to update it's internal open state */ requestOpenChange: (data: DialogOpenChangeData) => void; -}; +} & Partial>; const defaultContextValue: DialogContextValue = { open: false, diff --git a/packages/react-components/react-dialog/src/testing/isConformant.ts b/packages/react-components/react-dialog/src/testing/isConformant.ts index 77f88408cbd839..a3d988f29a1728 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-dialog/src/testing/mockUseDialogContext.ts b/packages/react-components/react-dialog/src/testing/mockUseDialogContext.ts index c594cf159eefb2..9d66e16e935b01 100644 --- a/packages/react-components/react-dialog/src/testing/mockUseDialogContext.ts +++ b/packages/react-components/react-dialog/src/testing/mockUseDialogContext.ts @@ -16,6 +16,8 @@ export const mockUseDialogContext = (options: Partial = {}) requestOpenChange() { /* noop */ }, + modalAttributes: undefined, + triggerAttributes: { 'data-tabster': '{"deloser":{}}' }, ...options, }; // eslint-disable-next-line @typescript-eslint/no-explicit-any diff --git a/packages/react-components/react-divider/.npmignore b/packages/react-components/react-divider/.npmignore index f7ce568a6dbf7c..26904cdfffc9bd 100644 --- a/packages/react-components/react-divider/.npmignore +++ b/packages/react-components/react-divider/.npmignore @@ -28,3 +28,9 @@ __tests__ .eslint* .git* .prettierignore + +# exclude gitignore patterns explicitly +!lib +!lib-commonjs +!lib-amd +!dist/*.d.ts diff --git a/packages/react-components/react-divider/CHANGELOG.json b/packages/react-components/react-divider/CHANGELOG.json index b54399e9a5e458..2f71508410c720 100644 --- a/packages/react-components/react-divider/CHANGELOG.json +++ b/packages/react-components/react-divider/CHANGELOG.json @@ -1,6 +1,27 @@ { "name": "@fluentui/react-divider", "entries": [ + { + "date": "Mon, 24 Apr 2023 08:12:36 GMT", + "tag": "@fluentui/react-divider_v9.2.10", + "version": "9.2.10", + "comments": { + "patch": [ + { + "author": "bernardo.sunderhus@gmail.com", + "package": "@fluentui/react-divider", + "commit": "ec5f15a5fb78104ff874f1f16eda663fecde1704", + "comment": "chore: adopt custom JSX pragma" + }, + { + "author": "beachball", + "package": "@fluentui/react-divider", + "comment": "Bump @fluentui/react-jsx-runtime to v9.0.0-alpha.2", + "commit": "505433ac64f144c9cca456097413d6af4582e5ee" + } + ] + } + }, { "date": "Mon, 17 Apr 2023 17:54:02 GMT", "tag": "@fluentui/react-divider_v9.2.9", diff --git a/packages/react-components/react-divider/CHANGELOG.md b/packages/react-components/react-divider/CHANGELOG.md index 52317233823c2e..a4760b99f38969 100644 --- a/packages/react-components/react-divider/CHANGELOG.md +++ b/packages/react-components/react-divider/CHANGELOG.md @@ -1,9 +1,19 @@ # Change Log - @fluentui/react-divider -This log was last generated on Mon, 17 Apr 2023 17:54:02 GMT and should not be manually modified. +This log was last generated on Mon, 24 Apr 2023 08:12:36 GMT and should not be manually modified. +## [9.2.10](https://github.com/microsoft/fluentui/tree/@fluentui/react-divider_v9.2.10) + +Mon, 24 Apr 2023 08:12:36 GMT +[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-divider_v9.2.9..@fluentui/react-divider_v9.2.10) + +### Patches + +- chore: adopt custom JSX pragma ([PR #27610](https://github.com/microsoft/fluentui/pull/27610) by bernardo.sunderhus@gmail.com) +- Bump @fluentui/react-jsx-runtime to v9.0.0-alpha.2 ([commit](https://github.com/microsoft/fluentui/commit/505433ac64f144c9cca456097413d6af4582e5ee) by beachball) + ## [9.2.9](https://github.com/microsoft/fluentui/tree/@fluentui/react-divider_v9.2.9) Mon, 17 Apr 2023 17:54:02 GMT diff --git a/packages/react-components/react-divider/jest.config.js b/packages/react-components/react-divider/jest.config.js index d18346b0729fd2..a8098f399f0a5e 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/package.json b/packages/react-components/react-divider/package.json index 92a02f2198fda8..609e0ccca7185f 100644 --- a/packages/react-components/react-divider/package.json +++ b/packages/react-components/react-divider/package.json @@ -1,6 +1,6 @@ { "name": "@fluentui/react-divider", - "version": "9.2.9", + "version": "9.2.10", "description": "Fluent UI component to visually separate content.", "main": "lib-commonjs/index.js", "module": "lib/index.js", @@ -33,6 +33,7 @@ }, "dependencies": { "@griffel/react": "^1.5.2", + "@fluentui/react-jsx-runtime": "9.0.0-alpha.2", "@fluentui/react-shared-contexts": "^9.3.3", "@fluentui/react-theme": "^9.1.7", "@fluentui/react-utilities": "^9.8.0", diff --git a/packages/react-components/react-divider/src/components/Divider/Divider.tsx b/packages/react-components/react-divider/src/components/Divider/Divider.tsx index ff2f2e5822d8f4..3e903864c76675 100644 --- a/packages/react-components/react-divider/src/components/Divider/Divider.tsx +++ b/packages/react-components/react-divider/src/components/Divider/Divider.tsx @@ -4,7 +4,7 @@ import { useDivider_unstable } from './useDivider'; import { useDividerStyles_unstable } from './useDividerStyles'; import type { ForwardRefComponent } from '@fluentui/react-utilities'; import type { DividerProps } from './Divider.types'; -import { useCustomStyleHooks_unstable } from '@fluentui/react-shared-contexts'; +import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts'; /** * A divider visually segments content into groups. @@ -14,8 +14,7 @@ export const Divider: ForwardRefComponent = React.forwardRef((prop useDividerStyles_unstable(state); - const { useDividerStyles_unstable: useCustomStyles } = useCustomStyleHooks_unstable(); - useCustomStyles(state); + useCustomStyleHook_unstable('useDividerStyles_unstable')(state); return renderDivider_unstable(state); }); diff --git a/packages/react-components/react-divider/src/components/Divider/renderDivider.tsx b/packages/react-components/react-divider/src/components/Divider/renderDivider.tsx index 109c905f25d135..cc176067477f5e 100644 --- a/packages/react-components/react-divider/src/components/Divider/renderDivider.tsx +++ b/packages/react-components/react-divider/src/components/Divider/renderDivider.tsx @@ -1,12 +1,16 @@ -import * as React from 'react'; -import { getSlots } from '@fluentui/react-utilities'; +/** @jsxRuntime classic */ +/** @jsx createElement */ + +import { createElement } from '@fluentui/react-jsx-runtime'; + +import { getSlotsNext } from '@fluentui/react-utilities'; import { DividerSlots, DividerState } from './Divider.types'; /** * Renders a Divider component by passing the slot props (defined in `state`) to the appropriate slots. */ export const renderDivider_unstable = (state: DividerState) => { - const { slots, slotProps } = getSlots(state); + const { slots, slotProps } = getSlotsNext(state); return ( {slotProps.root.children !== undefined && ( diff --git a/packages/react-components/react-divider/src/testing/isConformant.ts b/packages/react-components/react-divider/src/testing/isConformant.ts index 2ffff9d342a7e8..0aad9515bbca63 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/.npmignore b/packages/react-components/react-drawer/.npmignore index f7ce568a6dbf7c..26904cdfffc9bd 100644 --- a/packages/react-components/react-drawer/.npmignore +++ b/packages/react-components/react-drawer/.npmignore @@ -28,3 +28,9 @@ __tests__ .eslint* .git* .prettierignore + +# exclude gitignore patterns explicitly +!lib +!lib-commonjs +!lib-amd +!dist/*.d.ts diff --git a/packages/react-components/react-drawer/etc/react-drawer.api.md b/packages/react-components/react-drawer/etc/react-drawer.api.md index 4f4806f94bebd7..7eab4725ea1b68 100644 --- a/packages/react-components/react-drawer/etc/react-drawer.api.md +++ b/packages/react-components/react-drawer/etc/react-drawer.api.md @@ -67,6 +67,7 @@ export type DrawerProps = ComponentProps> & { type?: 'inline' | 'overlay'; size?: 'small' | 'medium' | 'large' | 'full'; modal?: boolean; + lightDismiss?: boolean; separator?: boolean; } & Pick; diff --git a/packages/react-components/react-drawer/jest.config.js b/packages/react-components/react-drawer/jest.config.js index 94e954e0a69955..efc18f02183c24 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/package.json b/packages/react-components/react-drawer/package.json index 2ab04afc26b599..2dbc980b5a5dcd 100644 --- a/packages/react-components/react-drawer/package.json +++ b/packages/react-components/react-drawer/package.json @@ -24,8 +24,7 @@ "type-check": "tsc -b tsconfig.json", "generate-api": "just-scripts generate-api", "storybook": "start-storybook", - "start": "yarn storybook", - "test-ssr": "test-ssr ./stories/**/*.stories.tsx" + "start": "yarn storybook" }, "devDependencies": { "@fluentui/eslint-plugin": "*", @@ -36,7 +35,9 @@ "@fluentui/scripts-cypress": "*" }, "dependencies": { - "@fluentui/react-dialog": "^9.5.2", + "@fluentui/react-dialog": "^9.5.3", + "@fluentui/react-jsx-runtime": "9.0.0-alpha.2", + "@fluentui/react-shared-contexts": "^9.3.3", "@fluentui/react-theme": "^9.1.7", "@fluentui/react-utilities": "^9.8.0", "@griffel/react": "^1.5.2", diff --git a/packages/react-components/react-drawer/src/components/Drawer/Drawer.cy.tsx b/packages/react-components/react-drawer/src/components/Drawer/Drawer.cy.tsx index 78c3209b4f4e0b..da1ff5d484f34b 100644 --- a/packages/react-components/react-drawer/src/components/Drawer/Drawer.cy.tsx +++ b/packages/react-components/react-drawer/src/components/Drawer/Drawer.cy.tsx @@ -3,11 +3,21 @@ import { mount } from '@cypress/react'; import type {} from '@cypress/react'; import { FluentProvider } from '@fluentui/react-provider'; import { webLightTheme } from '@fluentui/react-theme'; -import { Drawer } from '@fluentui/react-drawer'; +import { Drawer, DrawerProps } from '@fluentui/react-drawer'; +import { dialogSurfaceClassNames } from '@fluentui/react-dialog'; const mountFluent = (element: JSX.Element) => { mount({element}); }; +const backdropSelector = `.${dialogSurfaceClassNames.backdrop}`; + +const ControlledDrawer = ({ open: initialOpen = false, ...props }: DrawerProps) => { + const [isOpen, setIsOpen] = React.useState(initialOpen); + + React.useEffect(() => setIsOpen(initialOpen), [initialOpen]); + + return setIsOpen(open)} {...props} />; +}; describe('Drawer', () => { it('render drawer component', () => { @@ -22,7 +32,7 @@ describe('Drawer', () => { return ( <> - + @@ -36,4 +46,20 @@ describe('Drawer', () => { cy.get('#button').click(); cy.get('#drawer').should('exist'); }); + + it('should dismiss the drawer when clicking the backdrop', () => { + mountFluent(); + + cy.get('#drawer').should('exist'); + cy.get(backdropSelector).click({ force: true }); + cy.get('#drawer').should('not.exist'); + }); + + it('should NOT dismiss the drawer when clicking on the backdrop if `lightDismiss` is false', () => { + mountFluent(); + + cy.get('#drawer').should('exist'); + cy.get(backdropSelector).click({ force: true }); + cy.get('#drawer').should('exist'); + }); }); 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 13ded85aa7b97c..5982cd3abc98a1 100644 --- a/packages/react-components/react-drawer/src/components/Drawer/Drawer.tsx +++ b/packages/react-components/react-drawer/src/components/Drawer/Drawer.tsx @@ -1,17 +1,20 @@ 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'; +import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts'; /** - * Drawer component - TODO: add more docs + * Drawer contains supplementary content and are used for complex creation, edit, or management experiences. */ export const Drawer: ForwardRefComponent = React.forwardRef((props, ref) => { const state = useDrawer_unstable(props, ref); useDrawerStyles_unstable(state); + useCustomStyleHook_unstable('useDrawerStyles_unstable')(state); + return renderDrawer_unstable(state); }); diff --git a/packages/react-components/react-drawer/src/components/Drawer/Drawer.types.ts b/packages/react-components/react-drawer/src/components/Drawer/Drawer.types.ts index 810a0a399e5f43..e79b8e3a26fa6c 100644 --- a/packages/react-components/react-drawer/src/components/Drawer/Drawer.types.ts +++ b/packages/react-components/react-drawer/src/components/Drawer/Drawer.types.ts @@ -53,6 +53,13 @@ export type DrawerProps = ComponentProps> & { */ modal?: boolean; + /** + * When this is true, the drawer will be closed on a click on the overlay. + * This prop is only used when `type` is `overlay`. + * @defaultvalue true + */ + lightDismiss?: boolean; + /** * Whether the drawer has a separator line. * This prop only works when `type` is `inline`. 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 3bd2cab50d5f8e..9e93458b3402fd 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/renderDrawer.tsx b/packages/react-components/react-drawer/src/components/Drawer/renderDrawer.tsx index 2309335bf7fd9d..6ec4ac8b41ac2c 100644 --- a/packages/react-components/react-drawer/src/components/Drawer/renderDrawer.tsx +++ b/packages/react-components/react-drawer/src/components/Drawer/renderDrawer.tsx @@ -1,5 +1,9 @@ -import * as React from 'react'; -import { getSlots } from '@fluentui/react-utilities'; +/** @jsxRuntime classic */ +/** @jsx createElement */ + +import { createElement } from '@fluentui/react-jsx-runtime'; + +import { getSlotsNext } from '@fluentui/react-utilities'; import type { DrawerState, DrawerSlots } from './Drawer.types'; import { Dialog, DialogSurface, DialogSurfaceProps } from '@fluentui/react-dialog'; @@ -7,7 +11,7 @@ import { Dialog, DialogSurface, DialogSurfaceProps } from '@fluentui/react-dialo * Render the final JSX of Drawer */ export const renderDrawer_unstable = (state: DrawerState) => { - const { slots, slotProps } = getSlots(state); + const { slots, slotProps } = getSlotsNext(state); const dialogSurfaceProps = { ...slotProps.root, diff --git a/packages/react-components/react-drawer/src/components/Drawer/useDrawer.ts b/packages/react-components/react-drawer/src/components/Drawer/useDrawer.ts index 9e4d7d4831d13f..7f7d048b809c39 100644 --- a/packages/react-components/react-drawer/src/components/Drawer/useDrawer.ts +++ b/packages/react-components/react-drawer/src/components/Drawer/useDrawer.ts @@ -4,6 +4,18 @@ import { DialogProps } from '@fluentui/react-dialog'; import type { DrawerProps, DrawerState } from './Drawer.types'; +const getModalType = (modal?: DrawerProps['modal'], lightDismiss?: DrawerProps['lightDismiss']) => { + if (!modal) { + return 'non-modal'; + } + + if (!lightDismiss) { + return 'alert'; + } + + return 'modal'; +}; + /** * Create the state required to render Drawer. * @@ -19,6 +31,7 @@ export const useDrawer_unstable = (props: DrawerProps, ref: React.Ref { return { + modalType: getModalType(modal, lightDismiss), open, onOpenChange, - modalType: modal ? 'modal' : 'non-modal', children, } as DialogProps; - }, [children, modal, onOpenChange, open]); + }, [children, lightDismiss, modal, onOpenChange, open]); const dialogSurfaceProps = { ...otherProps, 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 97% 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 index 382b921157d606..0cb0c9d2d1f64e 100644 --- a/packages/react-components/react-drawer/src/components/Drawer/useDrawerStyles.ts +++ b/packages/react-components/react-drawer/src/components/Drawer/useDrawerStyles.styles.ts @@ -26,12 +26,14 @@ const useStyles = makeStyles({ [drawerCSSVars.borderRadius]: 0, - boxSizing: 'border-box', width: `var(${drawerCSSVars.size})`, maxWidth: 'calc(100vw - 48px)', height: 'auto', + boxSizing: 'border-box', display: 'flex', flexDirection: 'column', + alignItems: 'flex-start', + justifyContent: 'flex-start', backgroundColor: tokens.colorNeutralBackground1, }, @@ -43,8 +45,6 @@ const useStyles = makeStyles({ inline: { position: 'relative', - alignItems: 'stretch', - justifyContent: 'stretch', }, leftDrawer: { diff --git a/packages/react-components/react-drawer/src/components/DrawerBody/DrawerBody.cy.tsx b/packages/react-components/react-drawer/src/components/DrawerBody/DrawerBody.cy.tsx new file mode 100644 index 00000000000000..2ded070a7f7950 --- /dev/null +++ b/packages/react-components/react-drawer/src/components/DrawerBody/DrawerBody.cy.tsx @@ -0,0 +1,48 @@ +import * as React from 'react'; +import { mount } from '@cypress/react'; +import type {} from '@cypress/react'; +import { FluentProvider } from '@fluentui/react-provider'; +import { webLightTheme } from '@fluentui/react-theme'; +import { Drawer, DrawerBody } from '@fluentui/react-drawer'; + +const mountFluent = (element: JSX.Element) => { + mount({element}); +}; + +function assertScrollPosition(element: HTMLElement, position: number) { + expect(element.scrollTop).to.equal(position); +} + +describe('DrawerBody', () => { + it('render drawer body component', () => { + mountFluent(); + + cy.get('#drawer-body').should('exist'); + }); + + it('scroll drawer body', () => { + const Example = () => ( + + + Lorem ipsum dolor sit amet consectetur, adipisicing elit. Corrupti, animi? Quos, eum pariatur. Labore magni + vel doloremque reiciendis, consequatur porro explicabo similique harum illo, ad hic, earum nobis accusantium + quasi? Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident eligendi impedit culpa ea ipsum + voluptate inventore labore, delectus nam veniam dolor debitis dolorem blanditiis in, natus deleniti illo. + Asperiores, porro. Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellat obcaecati aperiam + recusandae. Pariatur dolorem cumque odit delectus voluptates ea ipsam culpa voluptate? Praesentium beatae + corrupti accusamus. Suscipit voluptas natus illo? + + + ); + + mountFluent(); + + cy.get('#drawer-body') + .scrollTo('bottom') + .should($e => assertScrollPosition($e[0], $e[0].scrollHeight - $e[0].clientHeight)); + + cy.get('#drawer-body') + .scrollTo('top') + .should($e => assertScrollPosition($e[0], 0)); + }); +}); diff --git a/packages/react-components/react-drawer/src/components/DrawerBody/DrawerBody.tsx b/packages/react-components/react-drawer/src/components/DrawerBody/DrawerBody.tsx index fb2691171d7c53..ced951f5b159c4 100644 --- a/packages/react-components/react-drawer/src/components/DrawerBody/DrawerBody.tsx +++ b/packages/react-components/react-drawer/src/components/DrawerBody/DrawerBody.tsx @@ -1,17 +1,20 @@ import * as React from 'react'; import { useDrawerBody_unstable } from './useDrawerBody'; import { renderDrawerBody_unstable } from './renderDrawerBody'; -import { useDrawerBodyStyles_unstable } from './useDrawerBodyStyles'; +import { useDrawerBodyStyles_unstable } from './useDrawerBodyStyles.styles'; import type { DrawerBodyProps } from './DrawerBody.types'; import type { ForwardRefComponent } from '@fluentui/react-utilities'; +import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts'; /** - * DrawerBody component - TODO: add more docs + * DrawerBody provides with a container for the main content of a Drawer. */ export const DrawerBody: ForwardRefComponent = React.forwardRef((props, ref) => { const state = useDrawerBody_unstable(props, ref); useDrawerBodyStyles_unstable(state); + useCustomStyleHook_unstable('useDrawerBodyStyles_unstable')(state); + return renderDrawerBody_unstable(state); }); diff --git a/packages/react-components/react-drawer/src/components/DrawerBody/index.ts b/packages/react-components/react-drawer/src/components/DrawerBody/index.ts index b8273e016d6ed6..17a23b055f990e 100644 --- a/packages/react-components/react-drawer/src/components/DrawerBody/index.ts +++ b/packages/react-components/react-drawer/src/components/DrawerBody/index.ts @@ -2,4 +2,4 @@ export * from './DrawerBody'; export * from './DrawerBody.types'; export * from './renderDrawerBody'; export * from './useDrawerBody'; -export * from './useDrawerBodyStyles'; +export * from './useDrawerBodyStyles.styles'; diff --git a/packages/react-components/react-drawer/src/components/DrawerBody/useDrawerBodyStyles.ts b/packages/react-components/react-drawer/src/components/DrawerBody/useDrawerBodyStyles.styles.ts similarity index 100% rename from packages/react-components/react-drawer/src/components/DrawerBody/useDrawerBodyStyles.ts rename to packages/react-components/react-drawer/src/components/DrawerBody/useDrawerBodyStyles.styles.ts diff --git a/packages/react-components/react-drawer/src/index.ts b/packages/react-components/react-drawer/src/index.ts index 522a7d962237cc..f92da13e278f38 100644 --- a/packages/react-components/react-drawer/src/index.ts +++ b/packages/react-components/react-drawer/src/index.ts @@ -1,4 +1,3 @@ -// TODO: replace with real exports export { Drawer, drawerCSSVars, diff --git a/packages/react-components/react-drawer/src/testing/isConformant.ts b/packages/react-components/react-drawer/src/testing/isConformant.ts index 77f88408cbd839..a3d988f29a1728 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-drawer/stories/Drawer/DrawerBestPractices.md b/packages/react-components/react-drawer/stories/Drawer/DrawerBestPractices.md index 08ff8ddeeb5f86..0a91ded0389bca 100644 --- a/packages/react-components/react-drawer/stories/Drawer/DrawerBestPractices.md +++ b/packages/react-components/react-drawer/stories/Drawer/DrawerBestPractices.md @@ -1,5 +1,11 @@ ## Best practices +TODO: To be added by a future contribution, when all the implementation of sub components is finished. + ### Do +TODO + ### Don't + +TODO diff --git a/packages/react-components/react-drawer/stories/Drawer/DrawerPreventClose.stories.tsx b/packages/react-components/react-drawer/stories/Drawer/DrawerPreventClose.stories.tsx new file mode 100644 index 00000000000000..02d079a65bbd95 --- /dev/null +++ b/packages/react-components/react-drawer/stories/Drawer/DrawerPreventClose.stories.tsx @@ -0,0 +1,22 @@ +import * as React from 'react'; +import { Drawer } from '@fluentui/react-drawer'; +import { Button } from '@fluentui/react-components'; + +export const PreventClose = () => { + const [open, setOpen] = React.useState(false); + + return ( +
+ + +

This drawer cannot be closed when clicking outside nor using the "ESC" key

+ + + +
+ ); +}; diff --git a/packages/react-components/react-drawer/stories/Drawer/index.stories.tsx b/packages/react-components/react-drawer/stories/Drawer/index.stories.tsx index 571b02052031f7..48f0c9d4d65b84 100644 --- a/packages/react-components/react-drawer/stories/Drawer/index.stories.tsx +++ b/packages/react-components/react-drawer/stories/Drawer/index.stories.tsx @@ -4,12 +4,13 @@ import bestPracticesMd from './DrawerBestPractices.md'; import previewMd from './DrawerPreview.md'; export { Default } from './DrawerDefault.stories'; +export { DefaultOpen } from './DrawerDefaultOpen.stories'; +export { AlwaysOpen } from './DrawerAlwaysOpen.stories'; +export { PreventClose } from './DrawerPreventClose.stories'; export { Position } from './DrawerPosition.stories'; export { Inline } from './DrawerInline.stories'; export { Size } from './DrawerSize.stories'; export { CustomSize } from './DrawerCustomSize.stories'; -export { DefaultOpen } from './DrawerDefaultOpen.stories'; -export { AlwaysOpen } from './DrawerAlwaysOpen.stories'; export { Separator } from './DrawerSeparator.stories'; export default { diff --git a/packages/react-components/react-drawer/tsconfig.lib.json b/packages/react-components/react-drawer/tsconfig.lib.json index e17f808c039339..6f90cf95c005bd 100644 --- a/packages/react-components/react-drawer/tsconfig.lib.json +++ b/packages/react-components/react-drawer/tsconfig.lib.json @@ -16,9 +16,7 @@ "**/*.test.ts", "**/*.test.tsx", "**/*.stories.ts", - "**/*.stories.tsx", - "**/*.cy.ts", - "**/*.cy.tsx" + "**/*.stories.tsx" ], "include": ["./src/**/*.ts", "./src/**/*.tsx"] } diff --git a/packages/react-components/react-field/.npmignore b/packages/react-components/react-field/.npmignore index f7ce568a6dbf7c..26904cdfffc9bd 100644 --- a/packages/react-components/react-field/.npmignore +++ b/packages/react-components/react-field/.npmignore @@ -28,3 +28,9 @@ __tests__ .eslint* .git* .prettierignore + +# exclude gitignore patterns explicitly +!lib +!lib-commonjs +!lib-amd +!dist/*.d.ts diff --git a/packages/react-components/react-field/CHANGELOG.json b/packages/react-components/react-field/CHANGELOG.json index 221c00145ff2f4..607c1a78186142 100644 --- a/packages/react-components/react-field/CHANGELOG.json +++ b/packages/react-components/react-field/CHANGELOG.json @@ -1,6 +1,33 @@ { "name": "@fluentui/react-field", "entries": [ + { + "date": "Mon, 24 Apr 2023 08:12:36 GMT", + "tag": "@fluentui/react-field_v9.1.1", + "version": "9.1.1", + "comments": { + "patch": [ + { + "author": "bernardo.sunderhus@gmail.com", + "package": "@fluentui/react-field", + "commit": "7e199488cd02df78788b833bf29ed7e312b9e41f", + "comment": "chore: adopt custom JSX pragma" + }, + { + "author": "beachball", + "package": "@fluentui/react-field", + "comment": "Bump @fluentui/react-jsx-runtime to v9.0.0-alpha.2", + "commit": "505433ac64f144c9cca456097413d6af4582e5ee" + }, + { + "author": "beachball", + "package": "@fluentui/react-field", + "comment": "Bump @fluentui/react-label to v9.1.10", + "commit": "505433ac64f144c9cca456097413d6af4582e5ee" + } + ] + } + }, { "date": "Mon, 17 Apr 2023 17:53:50 GMT", "tag": "@fluentui/react-field_v9.1.0", diff --git a/packages/react-components/react-field/CHANGELOG.md b/packages/react-components/react-field/CHANGELOG.md index 2ff3814b348040..06a4391b5d2543 100644 --- a/packages/react-components/react-field/CHANGELOG.md +++ b/packages/react-components/react-field/CHANGELOG.md @@ -1,9 +1,20 @@ # Change Log - @fluentui/react-field -This log was last generated on Mon, 17 Apr 2023 17:53:50 GMT and should not be manually modified. +This log was last generated on Mon, 24 Apr 2023 08:12:36 GMT and should not be manually modified. +## [9.1.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-field_v9.1.1) + +Mon, 24 Apr 2023 08:12:36 GMT +[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-field_v9.1.0..@fluentui/react-field_v9.1.1) + +### Patches + +- chore: adopt custom JSX pragma ([PR #27612](https://github.com/microsoft/fluentui/pull/27612) by bernardo.sunderhus@gmail.com) +- Bump @fluentui/react-jsx-runtime to v9.0.0-alpha.2 ([commit](https://github.com/microsoft/fluentui/commit/505433ac64f144c9cca456097413d6af4582e5ee) by beachball) +- Bump @fluentui/react-label to v9.1.10 ([commit](https://github.com/microsoft/fluentui/commit/505433ac64f144c9cca456097413d6af4582e5ee) by beachball) + ## [9.1.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-field_v9.1.0) Mon, 17 Apr 2023 17:53:50 GMT diff --git a/packages/react-components/react-field/jest.config.js b/packages/react-components/react-field/jest.config.js index a5a95459b194ac..5190c367303a77 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/package.json b/packages/react-components/react-field/package.json index 6ad18b0621b0da..c354dfccb599e8 100644 --- a/packages/react-components/react-field/package.json +++ b/packages/react-components/react-field/package.json @@ -1,6 +1,6 @@ { "name": "@fluentui/react-field", - "version": "9.1.0", + "version": "9.1.1", "description": "Fluent UI Field components", "main": "lib-commonjs/index.js", "module": "lib/index.js", @@ -34,7 +34,8 @@ "dependencies": { "@fluentui/react-context-selector": "^9.1.18", "@fluentui/react-icons": "^2.0.196", - "@fluentui/react-label": "^9.1.9", + "@fluentui/react-jsx-runtime": "9.0.0-alpha.2", + "@fluentui/react-label": "^9.1.10", "@fluentui/react-theme": "^9.1.7", "@fluentui/react-utilities": "^9.8.0", "@griffel/react": "^1.5.2", diff --git a/packages/react-components/react-field/src/components/Field/Field.tsx b/packages/react-components/react-field/src/components/Field/Field.tsx index 49133a8d0ddb2a..541f2158dfe3a6 100644 --- a/packages/react-components/react-field/src/components/Field/Field.tsx +++ b/packages/react-components/react-field/src/components/Field/Field.tsx @@ -3,7 +3,7 @@ import type { ForwardRefComponent } from '@fluentui/react-utilities'; import type { FieldProps } from './Field.types'; import { renderField_unstable } from './renderField'; import { useField_unstable } from './useField'; -import { useFieldStyles_unstable } from './useFieldStyles'; +import { useFieldStyles_unstable } from './useFieldStyles.styles'; import { useFieldContextValues_unstable } from '../../contexts/index'; export const Field: ForwardRefComponent = React.forwardRef((props, ref) => { diff --git a/packages/react-components/react-field/src/components/Field/index.ts b/packages/react-components/react-field/src/components/Field/index.ts index 58de843dab1d0a..a18c35b78a94f5 100644 --- a/packages/react-components/react-field/src/components/Field/index.ts +++ b/packages/react-components/react-field/src/components/Field/index.ts @@ -2,4 +2,4 @@ export * from './Field.types'; export * from './Field'; export * from './renderField'; export * from './useField'; -export * from './useFieldStyles'; +export * from './useFieldStyles.styles'; diff --git a/packages/react-components/react-field/src/components/Field/renderField.tsx b/packages/react-components/react-field/src/components/Field/renderField.tsx index c4a299b3cdffa1..668687b69580a6 100644 --- a/packages/react-components/react-field/src/components/Field/renderField.tsx +++ b/packages/react-components/react-field/src/components/Field/renderField.tsx @@ -1,6 +1,9 @@ -import * as React from 'react'; +/** @jsxRuntime classic */ +/** @jsx createElement */ -import { getSlots } from '@fluentui/react-utilities'; +import { createElement } from '@fluentui/react-jsx-runtime'; + +import { getSlotsNext } from '@fluentui/react-utilities'; import { FieldContextProvider, getFieldControlProps } from '../../contexts/index'; import type { FieldContextValues, FieldSlots, FieldState } from './Field.types'; @@ -8,7 +11,7 @@ import type { FieldContextValues, FieldSlots, FieldState } from './Field.types'; * Render the final JSX of Field */ export const renderField_unstable = (state: FieldState, contextValues: FieldContextValues) => { - const { slots, slotProps } = getSlots(state); + const { slots, slotProps } = getSlotsNext(state); let { children } = state; if (typeof children === 'function') { diff --git a/packages/react-components/react-field/src/components/Field/useFieldStyles.ts b/packages/react-components/react-field/src/components/Field/useFieldStyles.styles.ts similarity index 100% rename from packages/react-components/react-field/src/components/Field/useFieldStyles.ts rename to packages/react-components/react-field/src/components/Field/useFieldStyles.styles.ts diff --git a/packages/react-components/react-field/src/testing/isConformant.ts b/packages/react-components/react-field/src/testing/isConformant.ts index 2ffff9d342a7e8..0aad9515bbca63 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/.npmignore b/packages/react-components/react-image/.npmignore index f7ce568a6dbf7c..26904cdfffc9bd 100644 --- a/packages/react-components/react-image/.npmignore +++ b/packages/react-components/react-image/.npmignore @@ -28,3 +28,9 @@ __tests__ .eslint* .git* .prettierignore + +# exclude gitignore patterns explicitly +!lib +!lib-commonjs +!lib-amd +!dist/*.d.ts diff --git a/packages/react-components/react-image/CHANGELOG.json b/packages/react-components/react-image/CHANGELOG.json index 884fca874b115f..02aa2b03b5ad35 100644 --- a/packages/react-components/react-image/CHANGELOG.json +++ b/packages/react-components/react-image/CHANGELOG.json @@ -1,6 +1,27 @@ { "name": "@fluentui/react-image", "entries": [ + { + "date": "Mon, 24 Apr 2023 08:12:36 GMT", + "tag": "@fluentui/react-image_v9.1.7", + "version": "9.1.7", + "comments": { + "patch": [ + { + "author": "bernardo.sunderhus@gmail.com", + "package": "@fluentui/react-image", + "commit": "a6ff85541907771d5172fbd804e05a380fd0a906", + "comment": "chore: adopt custom JSX pragma" + }, + { + "author": "beachball", + "package": "@fluentui/react-image", + "comment": "Bump @fluentui/react-jsx-runtime to v9.0.0-alpha.2", + "commit": "505433ac64f144c9cca456097413d6af4582e5ee" + } + ] + } + }, { "date": "Mon, 17 Apr 2023 17:54:02 GMT", "tag": "@fluentui/react-image_v9.1.6", diff --git a/packages/react-components/react-image/CHANGELOG.md b/packages/react-components/react-image/CHANGELOG.md index 3ad617083d5814..6fed03da594b70 100644 --- a/packages/react-components/react-image/CHANGELOG.md +++ b/packages/react-components/react-image/CHANGELOG.md @@ -1,9 +1,19 @@ # Change Log - @fluentui/react-image -This log was last generated on Mon, 17 Apr 2023 17:54:02 GMT and should not be manually modified. +This log was last generated on Mon, 24 Apr 2023 08:12:36 GMT and should not be manually modified. +## [9.1.7](https://github.com/microsoft/fluentui/tree/@fluentui/react-image_v9.1.7) + +Mon, 24 Apr 2023 08:12:36 GMT +[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-image_v9.1.6..@fluentui/react-image_v9.1.7) + +### Patches + +- chore: adopt custom JSX pragma ([PR #27613](https://github.com/microsoft/fluentui/pull/27613) by bernardo.sunderhus@gmail.com) +- Bump @fluentui/react-jsx-runtime to v9.0.0-alpha.2 ([commit](https://github.com/microsoft/fluentui/commit/505433ac64f144c9cca456097413d6af4582e5ee) by beachball) + ## [9.1.6](https://github.com/microsoft/fluentui/tree/@fluentui/react-image_v9.1.6) Mon, 17 Apr 2023 17:54:02 GMT diff --git a/packages/react-components/react-image/jest.config.js b/packages/react-components/react-image/jest.config.js index 6cc92ea82d5d48..8c23e4216db0e4 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/package.json b/packages/react-components/react-image/package.json index fac5b8ce2512d0..14997edbf2bdbe 100644 --- a/packages/react-components/react-image/package.json +++ b/packages/react-components/react-image/package.json @@ -1,6 +1,6 @@ { "name": "@fluentui/react-image", - "version": "9.1.6", + "version": "9.1.7", "description": "Fluent UI React Image component.", "main": "lib-commonjs/index.js", "module": "lib/index.js", @@ -35,6 +35,7 @@ "@griffel/react": "^1.5.2", "@fluentui/react-shared-contexts": "^9.3.3", "@fluentui/react-utilities": "^9.8.0", + "@fluentui/react-jsx-runtime": "9.0.0-alpha.2", "@fluentui/react-theme": "^9.1.7", "@swc/helpers": "^0.4.14" }, 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 69965888d83c71..1adca6b7306034 100644 --- a/packages/react-components/react-image/src/components/Image/Image.tsx +++ b/packages/react-components/react-image/src/components/Image/Image.tsx @@ -1,10 +1,10 @@ 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 { useCustomStyleHooks_unstable } from '@fluentui/react-shared-contexts'; +import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts'; /** * The Image component ensures the consistent styling of images. @@ -14,8 +14,7 @@ export const Image: ForwardRefComponent = React.forwardRef((props, r useImageStyles_unstable(state); - const { useImageStyles_unstable: useCustomStyles } = useCustomStyleHooks_unstable(); - useCustomStyles(state); + useCustomStyleHook_unstable('useImageStyles_unstable')(state); return renderImage_unstable(state); }); diff --git a/packages/react-components/react-image/src/components/Image/index.ts b/packages/react-components/react-image/src/components/Image/index.ts index 1ce909a1ae2b85..85f137b8d4db02 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/renderImage.tsx b/packages/react-components/react-image/src/components/Image/renderImage.tsx index 1e11216329f065..5c2fb355842161 100644 --- a/packages/react-components/react-image/src/components/Image/renderImage.tsx +++ b/packages/react-components/react-image/src/components/Image/renderImage.tsx @@ -1,5 +1,9 @@ -import * as React from 'react'; -import { getSlots } from '@fluentui/react-utilities'; +/** @jsxRuntime classic */ +/** @jsx createElement */ + +import { createElement } from '@fluentui/react-jsx-runtime'; + +import { getSlotsNext } from '@fluentui/react-utilities'; import { ImageSlots, ImageState } from './Image.types'; /** @@ -7,7 +11,7 @@ import { ImageSlots, ImageState } from './Image.types'; * Given the state of an image, renders it. */ export const renderImage_unstable = (state: ImageState) => { - const { slots, slotProps } = getSlots(state); + const { slots, slotProps } = getSlotsNext(state); return ; }; 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 77f88408cbd839..a3d988f29a1728 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/.npmignore b/packages/react-components/react-infobutton/.npmignore index f7ce568a6dbf7c..26904cdfffc9bd 100644 --- a/packages/react-components/react-infobutton/.npmignore +++ b/packages/react-components/react-infobutton/.npmignore @@ -28,3 +28,9 @@ __tests__ .eslint* .git* .prettierignore + +# exclude gitignore patterns explicitly +!lib +!lib-commonjs +!lib-amd +!dist/*.d.ts diff --git a/packages/react-components/react-infobutton/CHANGELOG.json b/packages/react-components/react-infobutton/CHANGELOG.json index c885e9854755a9..e1fd98cb519ebd 100644 --- a/packages/react-components/react-infobutton/CHANGELOG.json +++ b/packages/react-components/react-infobutton/CHANGELOG.json @@ -1,6 +1,39 @@ { "name": "@fluentui/react-infobutton", "entries": [ + { + "date": "Mon, 24 Apr 2023 08:12:37 GMT", + "tag": "@fluentui/react-infobutton_v9.0.0-beta.28", + "version": "9.0.0-beta.28", + "comments": { + "prerelease": [ + { + "author": "bernardo.sunderhus@gmail.com", + "package": "@fluentui/react-infobutton", + "commit": "dd76eca6f3584188994575d1d15d805a24ee9a91", + "comment": "chore: adopt custom JSX pragma" + }, + { + "author": "beachball", + "package": "@fluentui/react-infobutton", + "comment": "Bump @fluentui/react-label to v9.1.10", + "commit": "505433ac64f144c9cca456097413d6af4582e5ee" + }, + { + "author": "beachball", + "package": "@fluentui/react-infobutton", + "comment": "Bump @fluentui/react-popover to v9.5.10", + "commit": "505433ac64f144c9cca456097413d6af4582e5ee" + }, + { + "author": "beachball", + "package": "@fluentui/react-infobutton", + "comment": "Bump @fluentui/react-jsx-runtime to v9.0.0-alpha.2", + "commit": "505433ac64f144c9cca456097413d6af4582e5ee" + } + ] + } + }, { "date": "Mon, 17 Apr 2023 17:54:02 GMT", "tag": "@fluentui/react-infobutton_v9.0.0-beta.27", diff --git a/packages/react-components/react-infobutton/CHANGELOG.md b/packages/react-components/react-infobutton/CHANGELOG.md index 368125d3d7d320..898fb206ea2d8b 100644 --- a/packages/react-components/react-infobutton/CHANGELOG.md +++ b/packages/react-components/react-infobutton/CHANGELOG.md @@ -1,9 +1,21 @@ # Change Log - @fluentui/react-infobutton -This log was last generated on Mon, 17 Apr 2023 17:54:02 GMT and should not be manually modified. +This log was last generated on Mon, 24 Apr 2023 08:12:37 GMT and should not be manually modified. +## [9.0.0-beta.28](https://github.com/microsoft/fluentui/tree/@fluentui/react-infobutton_v9.0.0-beta.28) + +Mon, 24 Apr 2023 08:12:37 GMT +[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-infobutton_v9.0.0-beta.27..@fluentui/react-infobutton_v9.0.0-beta.28) + +### Changes + +- chore: adopt custom JSX pragma ([PR #27615](https://github.com/microsoft/fluentui/pull/27615) by bernardo.sunderhus@gmail.com) +- Bump @fluentui/react-label to v9.1.10 ([commit](https://github.com/microsoft/fluentui/commit/505433ac64f144c9cca456097413d6af4582e5ee) by beachball) +- Bump @fluentui/react-popover to v9.5.10 ([commit](https://github.com/microsoft/fluentui/commit/505433ac64f144c9cca456097413d6af4582e5ee) by beachball) +- Bump @fluentui/react-jsx-runtime to v9.0.0-alpha.2 ([commit](https://github.com/microsoft/fluentui/commit/505433ac64f144c9cca456097413d6af4582e5ee) by beachball) + ## [9.0.0-beta.27](https://github.com/microsoft/fluentui/tree/@fluentui/react-infobutton_v9.0.0-beta.27) Mon, 17 Apr 2023 17:54:02 GMT diff --git a/packages/react-components/react-infobutton/jest.config.js b/packages/react-components/react-infobutton/jest.config.js index 57088d9b82184e..1bf9ac3cbf5597 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/package.json b/packages/react-components/react-infobutton/package.json index d9afdba9d19768..ef622f34e44f25 100644 --- a/packages/react-components/react-infobutton/package.json +++ b/packages/react-components/react-infobutton/package.json @@ -1,6 +1,6 @@ { "name": "@fluentui/react-infobutton", - "version": "9.0.0-beta.27", + "version": "9.0.0-beta.28", "description": "React components for building web experiences", "main": "lib-commonjs/index.js", "module": "lib/index.js", @@ -33,11 +33,12 @@ }, "dependencies": { "@fluentui/react-icons": "^2.0.196", - "@fluentui/react-label": "^9.1.9", - "@fluentui/react-popover": "^9.5.9", + "@fluentui/react-label": "^9.1.10", + "@fluentui/react-popover": "^9.5.10", "@fluentui/react-tabster": "^9.6.5", "@fluentui/react-theme": "^9.1.7", "@fluentui/react-utilities": "^9.8.0", + "@fluentui/react-jsx-runtime": "9.0.0-alpha.2", "@griffel/react": "^1.5.2", "@swc/helpers": "^0.4.14" }, diff --git a/packages/react-components/react-infobutton/src/components/InfoButton/InfoButton.test.tsx b/packages/react-components/react-infobutton/src/components/InfoButton/InfoButton.test.tsx index 0a1918c8997acc..68c1fb065394c9 100644 --- a/packages/react-components/react-infobutton/src/components/InfoButton/InfoButton.test.tsx +++ b/packages/react-components/react-infobutton/src/components/InfoButton/InfoButton.test.tsx @@ -1,6 +1,6 @@ import { InfoButton } from './InfoButton'; import { isConformant } from '../../testing/isConformant'; -import { infoButtonClassNames } from './useInfoButtonStyles'; +import { infoButtonClassNames } from './useInfoButtonStyles.styles'; import type { RenderResult } from '@testing-library/react'; // testing-library's queryByRole function doesn't look inside portals diff --git a/packages/react-components/react-infobutton/src/components/InfoButton/InfoButton.tsx b/packages/react-components/react-infobutton/src/components/InfoButton/InfoButton.tsx index 867bc036864b26..626c887e3503f6 100644 --- a/packages/react-components/react-infobutton/src/components/InfoButton/InfoButton.tsx +++ b/packages/react-components/react-infobutton/src/components/InfoButton/InfoButton.tsx @@ -2,7 +2,7 @@ import * as React from 'react'; import { ForwardRefComponent } from '@fluentui/react-utilities'; import { renderInfoButton_unstable } from './renderInfoButton'; import { useInfoButton_unstable } from './useInfoButton'; -import { useInfoButtonStyles_unstable } from './useInfoButtonStyles'; +import { useInfoButtonStyles_unstable } from './useInfoButtonStyles.styles'; import type { InfoButtonProps } from './InfoButton.types'; /** diff --git a/packages/react-components/react-infobutton/src/components/InfoButton/index.ts b/packages/react-components/react-infobutton/src/components/InfoButton/index.ts index caa9ae82b7cdd3..5dd78b2d5989e6 100644 --- a/packages/react-components/react-infobutton/src/components/InfoButton/index.ts +++ b/packages/react-components/react-infobutton/src/components/InfoButton/index.ts @@ -2,4 +2,4 @@ export * from './InfoButton'; export * from './InfoButton.types'; export * from './renderInfoButton'; export * from './useInfoButton'; -export * from './useInfoButtonStyles'; +export * from './useInfoButtonStyles.styles'; diff --git a/packages/react-components/react-infobutton/src/components/InfoButton/renderInfoButton.tsx b/packages/react-components/react-infobutton/src/components/InfoButton/renderInfoButton.tsx index 2e3c89e8ee9f3c..86a27d7306e0b9 100644 --- a/packages/react-components/react-infobutton/src/components/InfoButton/renderInfoButton.tsx +++ b/packages/react-components/react-infobutton/src/components/InfoButton/renderInfoButton.tsx @@ -1,5 +1,9 @@ -import * as React from 'react'; -import { getSlots } from '@fluentui/react-utilities'; +/** @jsxRuntime classic */ +/** @jsx createElement */ + +import { createElement } from '@fluentui/react-jsx-runtime'; + +import { getSlotsNext } from '@fluentui/react-utilities'; import { PopoverTrigger } from '@fluentui/react-popover'; import type { PopoverProps } from '@fluentui/react-popover'; import type { InfoButtonState, InfoButtonSlots } from './InfoButton.types'; @@ -8,7 +12,7 @@ import type { InfoButtonState, InfoButtonSlots } from './InfoButton.types'; * Render the final JSX of InfoButton */ export const renderInfoButton_unstable = (state: InfoButtonState) => { - const { slots, slotProps } = getSlots(state); + const { slots, slotProps } = getSlotsNext(state); return ( diff --git a/packages/react-components/react-infobutton/src/components/InfoButton/useInfoButtonStyles.ts b/packages/react-components/react-infobutton/src/components/InfoButton/useInfoButtonStyles.styles.ts similarity index 100% rename from packages/react-components/react-infobutton/src/components/InfoButton/useInfoButtonStyles.ts rename to packages/react-components/react-infobutton/src/components/InfoButton/useInfoButtonStyles.styles.ts diff --git a/packages/react-components/react-infobutton/src/components/InfoLabel/InfoLabel.tsx b/packages/react-components/react-infobutton/src/components/InfoLabel/InfoLabel.tsx index ccd509c21f69a9..69b12ad1e0577c 100644 --- a/packages/react-components/react-infobutton/src/components/InfoLabel/InfoLabel.tsx +++ b/packages/react-components/react-infobutton/src/components/InfoLabel/InfoLabel.tsx @@ -4,7 +4,7 @@ import type { ForwardRefComponent } from '@fluentui/react-utilities'; import type { InfoLabelProps } from './InfoLabel.types'; import { renderInfoLabel_unstable } from './renderInfoLabel'; import { useInfoLabel_unstable } from './useInfoLabel'; -import { useInfoLabelStyles_unstable } from './useInfoLabelStyles'; +import { useInfoLabelStyles_unstable } from './useInfoLabelStyles.styles'; /** * InfoLabel component diff --git a/packages/react-components/react-infobutton/src/components/InfoLabel/index.ts b/packages/react-components/react-infobutton/src/components/InfoLabel/index.ts index 4511700f741cdf..2f2b2f38df5bfc 100644 --- a/packages/react-components/react-infobutton/src/components/InfoLabel/index.ts +++ b/packages/react-components/react-infobutton/src/components/InfoLabel/index.ts @@ -2,4 +2,4 @@ export * from './InfoLabel'; export * from './InfoLabel.types'; export * from './renderInfoLabel'; export * from './useInfoLabel'; -export * from './useInfoLabelStyles'; +export * from './useInfoLabelStyles.styles'; diff --git a/packages/react-components/react-infobutton/src/components/InfoLabel/renderInfoLabel.tsx b/packages/react-components/react-infobutton/src/components/InfoLabel/renderInfoLabel.tsx index bc2374ed78f990..11df0bd9ca6aba 100644 --- a/packages/react-components/react-infobutton/src/components/InfoLabel/renderInfoLabel.tsx +++ b/packages/react-components/react-infobutton/src/components/InfoLabel/renderInfoLabel.tsx @@ -1,13 +1,16 @@ -import * as React from 'react'; +/** @jsxRuntime classic */ +/** @jsx createElement */ -import { getSlots } from '@fluentui/react-utilities'; +import { createElement } from '@fluentui/react-jsx-runtime'; + +import { getSlotsNext } from '@fluentui/react-utilities'; import type { InfoLabelSlots, InfoLabelState } from './InfoLabel.types'; /** * Render the final JSX of InfoLabel */ export const renderInfoLabel_unstable = (state: InfoLabelState) => { - const { slots, slotProps } = getSlots(state); + const { slots, slotProps } = getSlotsNext(state); return ( diff --git a/packages/react-components/react-infobutton/src/components/InfoLabel/useInfoLabelStyles.ts b/packages/react-components/react-infobutton/src/components/InfoLabel/useInfoLabelStyles.styles.ts similarity index 100% rename from packages/react-components/react-infobutton/src/components/InfoLabel/useInfoLabelStyles.ts rename to packages/react-components/react-infobutton/src/components/InfoLabel/useInfoLabelStyles.styles.ts diff --git a/packages/react-components/react-infobutton/src/testing/isConformant.ts b/packages/react-components/react-infobutton/src/testing/isConformant.ts index 77f88408cbd839..a3d988f29a1728 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/.npmignore b/packages/react-components/react-input/.npmignore index f7ce568a6dbf7c..26904cdfffc9bd 100644 --- a/packages/react-components/react-input/.npmignore +++ b/packages/react-components/react-input/.npmignore @@ -28,3 +28,9 @@ __tests__ .eslint* .git* .prettierignore + +# exclude gitignore patterns explicitly +!lib +!lib-commonjs +!lib-amd +!dist/*.d.ts diff --git a/packages/react-components/react-input/CHANGELOG.json b/packages/react-components/react-input/CHANGELOG.json index d649a003e25137..6cc66357e50987 100644 --- a/packages/react-components/react-input/CHANGELOG.json +++ b/packages/react-components/react-input/CHANGELOG.json @@ -1,6 +1,39 @@ { "name": "@fluentui/react-input", "entries": [ + { + "date": "Mon, 24 Apr 2023 08:12:37 GMT", + "tag": "@fluentui/react-input_v9.4.11", + "version": "9.4.11", + "comments": { + "patch": [ + { + "author": "bernardo.sunderhus@gmail.com", + "package": "@fluentui/react-input", + "commit": "e3f0d22908c3c70c89a984a4025a76eb66a0928d", + "comment": "chore: adopt custom JSX pragma" + }, + { + "author": "beachball", + "package": "@fluentui/react-input", + "comment": "Bump @fluentui/react-field to v9.1.1", + "commit": "505433ac64f144c9cca456097413d6af4582e5ee" + }, + { + "author": "beachball", + "package": "@fluentui/react-input", + "comment": "Bump @fluentui/react-jsx-runtime to v9.0.0-alpha.2", + "commit": "505433ac64f144c9cca456097413d6af4582e5ee" + }, + { + "author": "beachball", + "package": "@fluentui/react-input", + "comment": "Bump @fluentui/react-text to v9.3.7", + "commit": "505433ac64f144c9cca456097413d6af4582e5ee" + } + ] + } + }, { "date": "Mon, 17 Apr 2023 17:53:51 GMT", "tag": "@fluentui/react-input_v9.4.10", diff --git a/packages/react-components/react-input/CHANGELOG.md b/packages/react-components/react-input/CHANGELOG.md index f3420ffc493099..558966e3b5e854 100644 --- a/packages/react-components/react-input/CHANGELOG.md +++ b/packages/react-components/react-input/CHANGELOG.md @@ -1,9 +1,21 @@ # Change Log - @fluentui/react-input -This log was last generated on Mon, 17 Apr 2023 17:53:51 GMT and should not be manually modified. +This log was last generated on Mon, 24 Apr 2023 08:12:37 GMT and should not be manually modified. +## [9.4.11](https://github.com/microsoft/fluentui/tree/@fluentui/react-input_v9.4.11) + +Mon, 24 Apr 2023 08:12:37 GMT +[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-input_v9.4.10..@fluentui/react-input_v9.4.11) + +### Patches + +- chore: adopt custom JSX pragma ([PR #27614](https://github.com/microsoft/fluentui/pull/27614) by bernardo.sunderhus@gmail.com) +- Bump @fluentui/react-field to v9.1.1 ([commit](https://github.com/microsoft/fluentui/commit/505433ac64f144c9cca456097413d6af4582e5ee) by beachball) +- Bump @fluentui/react-jsx-runtime to v9.0.0-alpha.2 ([commit](https://github.com/microsoft/fluentui/commit/505433ac64f144c9cca456097413d6af4582e5ee) by beachball) +- Bump @fluentui/react-text to v9.3.7 ([commit](https://github.com/microsoft/fluentui/commit/505433ac64f144c9cca456097413d6af4582e5ee) by beachball) + ## [9.4.10](https://github.com/microsoft/fluentui/tree/@fluentui/react-input_v9.4.10) Mon, 17 Apr 2023 17:53:51 GMT diff --git a/packages/react-components/react-input/jest.config.js b/packages/react-components/react-input/jest.config.js index a7110dfad207e8..38e8aef2383f6a 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/package.json b/packages/react-components/react-input/package.json index b4e93ac29dd770..a0ded07c99dadb 100644 --- a/packages/react-components/react-input/package.json +++ b/packages/react-components/react-input/package.json @@ -1,6 +1,6 @@ { "name": "@fluentui/react-input", - "version": "9.4.10", + "version": "9.4.11", "description": "Fluent UI React Input component", "main": "lib-commonjs/index.js", "module": "lib/index.js", @@ -28,12 +28,13 @@ "@fluentui/eslint-plugin": "*", "@fluentui/react-conformance": "*", "@fluentui/react-conformance-griffel": "9.0.0-beta.20", - "@fluentui/react-text": "^9.3.6", + "@fluentui/react-text": "^9.3.7", "@fluentui/scripts-api-extractor": "*", "@fluentui/scripts-tasks": "*" }, "dependencies": { - "@fluentui/react-field": "^9.1.0", + "@fluentui/react-field": "^9.1.1", + "@fluentui/react-jsx-runtime": "9.0.0-alpha.2", "@fluentui/react-shared-contexts": "^9.3.3", "@fluentui/react-theme": "^9.1.7", "@fluentui/react-utilities": "^9.8.0", diff --git a/packages/react-components/react-input/src/components/Input/Input.tsx b/packages/react-components/react-input/src/components/Input/Input.tsx index 4dfd321bd54ccf..04479c9b734d56 100644 --- a/packages/react-components/react-input/src/components/Input/Input.tsx +++ b/packages/react-components/react-input/src/components/Input/Input.tsx @@ -1,10 +1,10 @@ import * as React from 'react'; import { useInput_unstable } from './useInput'; import { renderInput_unstable } from './renderInput'; -import { useInputStyles_unstable } from './useInputStyles'; +import { useInputStyles_unstable } from './useInputStyles.styles'; import type { InputProps } from './Input.types'; import type { ForwardRefComponent } from '@fluentui/react-utilities'; -import { useCustomStyleHooks_unstable } from '@fluentui/react-shared-contexts'; +import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts'; /** * The Input component allows people to enter and edit text. @@ -14,8 +14,7 @@ export const Input: ForwardRefComponent = React.forwardRef((props, r useInputStyles_unstable(state); - const { useInputStyles_unstable: useCustomStyles } = useCustomStyleHooks_unstable(); - useCustomStyles(state); + useCustomStyleHook_unstable('useInputStyles_unstable')(state); return renderInput_unstable(state); }); diff --git a/packages/react-components/react-input/src/components/Input/index.ts b/packages/react-components/react-input/src/components/Input/index.ts index 902a4e5b6c0a6b..6c560f63800fbb 100644 --- a/packages/react-components/react-input/src/components/Input/index.ts +++ b/packages/react-components/react-input/src/components/Input/index.ts @@ -2,4 +2,4 @@ export * from './Input'; export * from './Input.types'; export * from './renderInput'; export * from './useInput'; -export * from './useInputStyles'; +export * from './useInputStyles.styles'; diff --git a/packages/react-components/react-input/src/components/Input/renderInput.tsx b/packages/react-components/react-input/src/components/Input/renderInput.tsx index 6be34243bba17f..7f663cdc82c0a0 100644 --- a/packages/react-components/react-input/src/components/Input/renderInput.tsx +++ b/packages/react-components/react-input/src/components/Input/renderInput.tsx @@ -1,12 +1,16 @@ -import * as React from 'react'; -import { getSlots } from '@fluentui/react-utilities'; +/** @jsxRuntime classic */ +/** @jsx createElement */ + +import { createElement } from '@fluentui/react-jsx-runtime'; + +import { getSlotsNext } from '@fluentui/react-utilities'; import type { InputSlots, InputState } from './Input.types'; /** * Render the final JSX of Input */ export const renderInput_unstable = (state: InputState) => { - const { slots, slotProps } = getSlots(state); + const { slots, slotProps } = getSlotsNext(state); return ( {slots.contentBefore && } diff --git a/packages/react-components/react-input/src/components/Input/useInputStyles.ts b/packages/react-components/react-input/src/components/Input/useInputStyles.styles.ts similarity index 100% rename from packages/react-components/react-input/src/components/Input/useInputStyles.ts rename to packages/react-components/react-input/src/components/Input/useInputStyles.styles.ts diff --git a/packages/react-components/react-input/src/testing/isConformant.ts b/packages/react-components/react-input/src/testing/isConformant.ts index 77f88408cbd839..a3d988f29a1728 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/.npmignore b/packages/react-components/react-jsx-runtime/.npmignore index f7ce568a6dbf7c..26904cdfffc9bd 100644 --- a/packages/react-components/react-jsx-runtime/.npmignore +++ b/packages/react-components/react-jsx-runtime/.npmignore @@ -28,3 +28,9 @@ __tests__ .eslint* .git* .prettierignore + +# exclude gitignore patterns explicitly +!lib +!lib-commonjs +!lib-amd +!dist/*.d.ts diff --git a/packages/react-components/react-jsx-runtime/CHANGELOG.json b/packages/react-components/react-jsx-runtime/CHANGELOG.json index 7b3d129ad6da47..2b34f1a1c5cb11 100644 --- a/packages/react-components/react-jsx-runtime/CHANGELOG.json +++ b/packages/react-components/react-jsx-runtime/CHANGELOG.json @@ -1,6 +1,21 @@ { "name": "@fluentui/react-jsx-runtime", "entries": [ + { + "date": "Mon, 24 Apr 2023 08:12:37 GMT", + "tag": "@fluentui/react-jsx-runtime_v9.0.0-alpha.2", + "version": "9.0.0-alpha.2", + "comments": { + "prerelease": [ + { + "author": "bernardo.sunderhus@gmail.com", + "package": "@fluentui/react-jsx-runtime", + "commit": "391878bf4d8a8210a8279a6ced8bf9a64daf4c64", + "comment": "chore: simplify createElement method" + } + ] + } + }, { "date": "Mon, 17 Apr 2023 17:53:51 GMT", "tag": "@fluentui/react-jsx-runtime_v9.0.0-alpha.1", diff --git a/packages/react-components/react-jsx-runtime/CHANGELOG.md b/packages/react-components/react-jsx-runtime/CHANGELOG.md index 64e575f50f208d..6ec1bef002f2bb 100644 --- a/packages/react-components/react-jsx-runtime/CHANGELOG.md +++ b/packages/react-components/react-jsx-runtime/CHANGELOG.md @@ -1,9 +1,18 @@ # Change Log - @fluentui/react-jsx-runtime -This log was last generated on Mon, 17 Apr 2023 17:53:51 GMT and should not be manually modified. +This log was last generated on Mon, 24 Apr 2023 08:12:37 GMT and should not be manually modified. +## [9.0.0-alpha.2](https://github.com/microsoft/fluentui/tree/@fluentui/react-jsx-runtime_v9.0.0-alpha.2) + +Mon, 24 Apr 2023 08:12:37 GMT +[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-jsx-runtime_v9.0.0-alpha.1..@fluentui/react-jsx-runtime_v9.0.0-alpha.2) + +### Changes + +- chore: simplify createElement method ([PR #27573](https://github.com/microsoft/fluentui/pull/27573) by bernardo.sunderhus@gmail.com) + ## [9.0.0-alpha.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-jsx-runtime_v9.0.0-alpha.1) Mon, 17 Apr 2023 17:53:51 GMT diff --git a/packages/react-components/react-jsx-runtime/jest.config.js b/packages/react-components/react-jsx-runtime/jest.config.js index b3440c12005efe..160d7339737587 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-jsx-runtime/package.json b/packages/react-components/react-jsx-runtime/package.json index 0da42689a61aef..20f2251c32bd31 100644 --- a/packages/react-components/react-jsx-runtime/package.json +++ b/packages/react-components/react-jsx-runtime/package.json @@ -1,6 +1,6 @@ { "name": "@fluentui/react-jsx-runtime", - "version": "9.0.0-alpha.1", + "version": "9.0.0-alpha.2", "description": "React components for building web experiences", "main": "lib-commonjs/index.js", "module": "lib/index.js", diff --git a/packages/react-components/react-label/.npmignore b/packages/react-components/react-label/.npmignore index f7ce568a6dbf7c..26904cdfffc9bd 100644 --- a/packages/react-components/react-label/.npmignore +++ b/packages/react-components/react-label/.npmignore @@ -28,3 +28,9 @@ __tests__ .eslint* .git* .prettierignore + +# exclude gitignore patterns explicitly +!lib +!lib-commonjs +!lib-amd +!dist/*.d.ts diff --git a/packages/react-components/react-label/CHANGELOG.json b/packages/react-components/react-label/CHANGELOG.json index 2abde8cf8124cd..f59ec23f85f927 100644 --- a/packages/react-components/react-label/CHANGELOG.json +++ b/packages/react-components/react-label/CHANGELOG.json @@ -1,6 +1,27 @@ { "name": "@fluentui/react-label", "entries": [ + { + "date": "Mon, 24 Apr 2023 08:12:38 GMT", + "tag": "@fluentui/react-label_v9.1.10", + "version": "9.1.10", + "comments": { + "patch": [ + { + "author": "bernardo.sunderhus@gmail.com", + "package": "@fluentui/react-label", + "commit": "b61892e1d2e6b8bef5b5b1ba22e08247238fb45c", + "comment": "chore: adopt custom JSX pragma" + }, + { + "author": "beachball", + "package": "@fluentui/react-label", + "comment": "Bump @fluentui/react-jsx-runtime to v9.0.0-alpha.2", + "commit": "505433ac64f144c9cca456097413d6af4582e5ee" + } + ] + } + }, { "date": "Mon, 17 Apr 2023 17:54:02 GMT", "tag": "@fluentui/react-label_v9.1.9", diff --git a/packages/react-components/react-label/CHANGELOG.md b/packages/react-components/react-label/CHANGELOG.md index 69cd10061778dc..151fb0cb74aaae 100644 --- a/packages/react-components/react-label/CHANGELOG.md +++ b/packages/react-components/react-label/CHANGELOG.md @@ -1,9 +1,19 @@ # Change Log - @fluentui/react-label -This log was last generated on Mon, 17 Apr 2023 17:54:02 GMT and should not be manually modified. +This log was last generated on Mon, 24 Apr 2023 08:12:38 GMT and should not be manually modified. +## [9.1.10](https://github.com/microsoft/fluentui/tree/@fluentui/react-label_v9.1.10) + +Mon, 24 Apr 2023 08:12:38 GMT +[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-label_v9.1.9..@fluentui/react-label_v9.1.10) + +### Patches + +- chore: adopt custom JSX pragma ([PR #27616](https://github.com/microsoft/fluentui/pull/27616) by bernardo.sunderhus@gmail.com) +- Bump @fluentui/react-jsx-runtime to v9.0.0-alpha.2 ([commit](https://github.com/microsoft/fluentui/commit/505433ac64f144c9cca456097413d6af4582e5ee) by beachball) + ## [9.1.9](https://github.com/microsoft/fluentui/tree/@fluentui/react-label_v9.1.9) Mon, 17 Apr 2023 17:54:02 GMT diff --git a/packages/react-components/react-label/jest.config.js b/packages/react-components/react-label/jest.config.js index 00d608e89df8b4..d8b0c7895c8b90 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/package.json b/packages/react-components/react-label/package.json index 02ddacbe02f2e8..c8daf17f9c3c8a 100644 --- a/packages/react-components/react-label/package.json +++ b/packages/react-components/react-label/package.json @@ -1,6 +1,6 @@ { "name": "@fluentui/react-label", - "version": "9.1.9", + "version": "9.1.10", "description": "Fluent UI React Label component", "main": "lib-commonjs/index.js", "module": "lib/index.js", @@ -35,6 +35,7 @@ "@fluentui/react-shared-contexts": "^9.3.3", "@fluentui/react-theme": "^9.1.7", "@fluentui/react-utilities": "^9.8.0", + "@fluentui/react-jsx-runtime": "9.0.0-alpha.2", "@griffel/react": "^1.5.2", "@swc/helpers": "^0.4.14" }, diff --git a/packages/react-components/react-label/src/components/Label/Label.tsx b/packages/react-components/react-label/src/components/Label/Label.tsx index 912bb25ef2f5ed..902b2433c1d958 100644 --- a/packages/react-components/react-label/src/components/Label/Label.tsx +++ b/packages/react-components/react-label/src/components/Label/Label.tsx @@ -1,10 +1,10 @@ import * as React from 'react'; import { useLabel_unstable } from './useLabel'; import { renderLabel_unstable } from './renderLabel'; -import { useLabelStyles_unstable } from './useLabelStyles'; +import { useLabelStyles_unstable } from './useLabelStyles.styles'; import type { LabelProps } from './Label.types'; import type { ForwardRefComponent } from '@fluentui/react-utilities'; -import { useCustomStyleHooks_unstable } from '@fluentui/react-shared-contexts'; +import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts'; /** * A label component provides a title or name to a component. @@ -14,8 +14,7 @@ export const Label: ForwardRefComponent = React.forwardRef((props, r useLabelStyles_unstable(state); - const { useLabelStyles_unstable: useCustomStyles } = useCustomStyleHooks_unstable(); - useCustomStyles(state); + useCustomStyleHook_unstable('useLabelStyles_unstable')(state); return renderLabel_unstable(state); }); diff --git a/packages/react-components/react-label/src/components/Label/index.ts b/packages/react-components/react-label/src/components/Label/index.ts index 1f1611f932d12e..48994071fd36d8 100644 --- a/packages/react-components/react-label/src/components/Label/index.ts +++ b/packages/react-components/react-label/src/components/Label/index.ts @@ -2,4 +2,4 @@ export * from './Label'; export * from './Label.types'; export * from './renderLabel'; export * from './useLabel'; -export * from './useLabelStyles'; +export * from './useLabelStyles.styles'; diff --git a/packages/react-components/react-label/src/components/Label/renderLabel.tsx b/packages/react-components/react-label/src/components/Label/renderLabel.tsx index 4f63b95f7ff121..3dd9889ba0495f 100644 --- a/packages/react-components/react-label/src/components/Label/renderLabel.tsx +++ b/packages/react-components/react-label/src/components/Label/renderLabel.tsx @@ -1,12 +1,16 @@ -import * as React from 'react'; -import { getSlots } from '@fluentui/react-utilities'; +/** @jsxRuntime classic */ +/** @jsx createElement */ + +import { createElement } from '@fluentui/react-jsx-runtime'; + +import { getSlotsNext } from '@fluentui/react-utilities'; import type { LabelState, LabelSlots } from './Label.types'; /** * Render the final JSX of Label */ export const renderLabel_unstable = (state: LabelState) => { - const { slots, slotProps } = getSlots(state); + const { slots, slotProps } = getSlotsNext(state); return ( diff --git a/packages/react-components/react-label/src/components/Label/useLabelStyles.ts b/packages/react-components/react-label/src/components/Label/useLabelStyles.styles.ts similarity index 100% rename from packages/react-components/react-label/src/components/Label/useLabelStyles.ts rename to packages/react-components/react-label/src/components/Label/useLabelStyles.styles.ts diff --git a/packages/react-components/react-label/src/testing/isConformant.ts b/packages/react-components/react-label/src/testing/isConformant.ts index 77f88408cbd839..a3d988f29a1728 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/.npmignore b/packages/react-components/react-link/.npmignore index f7ce568a6dbf7c..26904cdfffc9bd 100644 --- a/packages/react-components/react-link/.npmignore +++ b/packages/react-components/react-link/.npmignore @@ -28,3 +28,9 @@ __tests__ .eslint* .git* .prettierignore + +# exclude gitignore patterns explicitly +!lib +!lib-commonjs +!lib-amd +!dist/*.d.ts diff --git a/packages/react-components/react-link/CHANGELOG.json b/packages/react-components/react-link/CHANGELOG.json index f6c07269c275a9..8847540631f769 100644 --- a/packages/react-components/react-link/CHANGELOG.json +++ b/packages/react-components/react-link/CHANGELOG.json @@ -1,6 +1,27 @@ { "name": "@fluentui/react-link", "entries": [ + { + "date": "Mon, 24 Apr 2023 08:12:38 GMT", + "tag": "@fluentui/react-link_v9.0.36", + "version": "9.0.36", + "comments": { + "patch": [ + { + "author": "bernardo.sunderhus@gmail.com", + "package": "@fluentui/react-link", + "commit": "a781d26259ea8fc330842aceb439edf2b1378288", + "comment": "chore: adopt custom JSX pragma" + }, + { + "author": "beachball", + "package": "@fluentui/react-link", + "comment": "Bump @fluentui/react-jsx-runtime to v9.0.0-alpha.2", + "commit": "505433ac64f144c9cca456097413d6af4582e5ee" + } + ] + } + }, { "date": "Mon, 17 Apr 2023 17:54:02 GMT", "tag": "@fluentui/react-link_v9.0.35", diff --git a/packages/react-components/react-link/CHANGELOG.md b/packages/react-components/react-link/CHANGELOG.md index efddaa879d004f..c7b0f3e57d4c5b 100644 --- a/packages/react-components/react-link/CHANGELOG.md +++ b/packages/react-components/react-link/CHANGELOG.md @@ -1,9 +1,19 @@ # Change Log - @fluentui/react-link -This log was last generated on Mon, 17 Apr 2023 17:54:02 GMT and should not be manually modified. +This log was last generated on Mon, 24 Apr 2023 08:12:38 GMT and should not be manually modified. +## [9.0.36](https://github.com/microsoft/fluentui/tree/@fluentui/react-link_v9.0.36) + +Mon, 24 Apr 2023 08:12:38 GMT +[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-link_v9.0.35..@fluentui/react-link_v9.0.36) + +### Patches + +- chore: adopt custom JSX pragma ([PR #27620](https://github.com/microsoft/fluentui/pull/27620) by bernardo.sunderhus@gmail.com) +- Bump @fluentui/react-jsx-runtime to v9.0.0-alpha.2 ([commit](https://github.com/microsoft/fluentui/commit/505433ac64f144c9cca456097413d6af4582e5ee) by beachball) + ## [9.0.35](https://github.com/microsoft/fluentui/tree/@fluentui/react-link_v9.0.35) Mon, 17 Apr 2023 17:54:02 GMT diff --git a/packages/react-components/react-link/jest.config.js b/packages/react-components/react-link/jest.config.js index ce3f6a490ef569..23277d27bcf9f9 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/package.json b/packages/react-components/react-link/package.json index 529b89b9d1936f..8cdea1a43f92b2 100644 --- a/packages/react-components/react-link/package.json +++ b/packages/react-components/react-link/package.json @@ -1,6 +1,6 @@ { "name": "@fluentui/react-link", - "version": "9.0.35", + "version": "9.0.36", "description": "Fluent UI React Link component", "main": "lib-commonjs/index.js", "module": "lib/index.js", @@ -34,6 +34,7 @@ }, "dependencies": { "@fluentui/keyboard-keys": "^9.0.2", + "@fluentui/react-jsx-runtime": "9.0.0-alpha.2", "@fluentui/react-tabster": "^9.6.5", "@fluentui/react-theme": "^9.1.7", "@fluentui/react-utilities": "^9.8.0", diff --git a/packages/react-components/react-link/src/components/Link/Link.tsx b/packages/react-components/react-link/src/components/Link/Link.tsx index 75f4f9887801af..ac581a28416c45 100644 --- a/packages/react-components/react-link/src/components/Link/Link.tsx +++ b/packages/react-components/react-link/src/components/Link/Link.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; import { useLink_unstable } from './useLink'; -import { useLinkStyles_unstable } from './useLinkStyles'; +import { useLinkStyles_unstable } from './useLinkStyles.styles'; import { renderLink_unstable } from './renderLink'; import type { LinkProps } from './Link.types'; import type { ForwardRefComponent } from '@fluentui/react-utilities'; diff --git a/packages/react-components/react-link/src/components/Link/index.ts b/packages/react-components/react-link/src/components/Link/index.ts index 7b45d7f01fa9a8..9301f7f49ea997 100644 --- a/packages/react-components/react-link/src/components/Link/index.ts +++ b/packages/react-components/react-link/src/components/Link/index.ts @@ -3,4 +3,4 @@ export * from './Link.types'; export * from './renderLink'; export * from './useLink'; export * from './useLinkState'; -export * from './useLinkStyles'; +export * from './useLinkStyles.styles'; diff --git a/packages/react-components/react-link/src/components/Link/renderLink.tsx b/packages/react-components/react-link/src/components/Link/renderLink.tsx index 59eb3652a32f2c..b1fb6f737b35e1 100644 --- a/packages/react-components/react-link/src/components/Link/renderLink.tsx +++ b/packages/react-components/react-link/src/components/Link/renderLink.tsx @@ -1,12 +1,16 @@ -import * as React from 'react'; -import { getSlots } from '@fluentui/react-utilities'; +/** @jsxRuntime classic */ +/** @jsx createElement */ + +import { createElement } from '@fluentui/react-jsx-runtime'; + +import { getSlotsNext } from '@fluentui/react-utilities'; import type { LinkSlots, LinkState } from './Link.types'; /** * Renders a Link component by passing the state defined props to the appropriate slots. */ export const renderLink_unstable = (state: LinkState) => { - const { slots, slotProps } = getSlots(state); + const { slots, slotProps } = getSlotsNext(state); return ; }; diff --git a/packages/react-components/react-link/src/components/Link/useLinkStyles.ts b/packages/react-components/react-link/src/components/Link/useLinkStyles.styles.ts similarity index 100% rename from packages/react-components/react-link/src/components/Link/useLinkStyles.ts rename to packages/react-components/react-link/src/components/Link/useLinkStyles.styles.ts diff --git a/packages/react-components/react-link/src/testing/isConformant.ts b/packages/react-components/react-link/src/testing/isConformant.ts index 77f88408cbd839..a3d988f29a1728 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/.npmignore b/packages/react-components/react-menu/.npmignore index f7ce568a6dbf7c..26904cdfffc9bd 100644 --- a/packages/react-components/react-menu/.npmignore +++ b/packages/react-components/react-menu/.npmignore @@ -28,3 +28,9 @@ __tests__ .eslint* .git* .prettierignore + +# exclude gitignore patterns explicitly +!lib +!lib-commonjs +!lib-amd +!dist/*.d.ts diff --git a/packages/react-components/react-menu/CHANGELOG.json b/packages/react-components/react-menu/CHANGELOG.json index 66e5bc2510e79e..1a92711ca9e4fb 100644 --- a/packages/react-components/react-menu/CHANGELOG.json +++ b/packages/react-components/react-menu/CHANGELOG.json @@ -1,6 +1,27 @@ { "name": "@fluentui/react-menu", "entries": [ + { + "date": "Mon, 24 Apr 2023 08:12:38 GMT", + "tag": "@fluentui/react-menu_v9.7.10", + "version": "9.7.10", + "comments": { + "patch": [ + { + "author": "bernardo.sunderhus@gmail.com", + "package": "@fluentui/react-menu", + "commit": "85c36e249b33b0bad79be4edd1a943dfc5233b11", + "comment": "bugfix: remove caret from react-jsx-runtime prerelease dependency" + }, + { + "author": "beachball", + "package": "@fluentui/react-menu", + "comment": "Bump @fluentui/react-jsx-runtime to v9.0.0-alpha.2", + "commit": "505433ac64f144c9cca456097413d6af4582e5ee" + } + ] + } + }, { "date": "Mon, 17 Apr 2023 17:53:52 GMT", "tag": "@fluentui/react-menu_v9.7.9", diff --git a/packages/react-components/react-menu/CHANGELOG.md b/packages/react-components/react-menu/CHANGELOG.md index 0f52a27042efe2..13aa3a677a739c 100644 --- a/packages/react-components/react-menu/CHANGELOG.md +++ b/packages/react-components/react-menu/CHANGELOG.md @@ -1,9 +1,19 @@ # Change Log - @fluentui/react-menu -This log was last generated on Mon, 17 Apr 2023 17:53:52 GMT and should not be manually modified. +This log was last generated on Mon, 24 Apr 2023 08:12:38 GMT and should not be manually modified. +## [9.7.10](https://github.com/microsoft/fluentui/tree/@fluentui/react-menu_v9.7.10) + +Mon, 24 Apr 2023 08:12:38 GMT +[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-menu_v9.7.9..@fluentui/react-menu_v9.7.10) + +### Patches + +- bugfix: remove caret from react-jsx-runtime prerelease dependency ([PR #27588](https://github.com/microsoft/fluentui/pull/27588) by bernardo.sunderhus@gmail.com) +- Bump @fluentui/react-jsx-runtime to v9.0.0-alpha.2 ([commit](https://github.com/microsoft/fluentui/commit/505433ac64f144c9cca456097413d6af4582e5ee) by beachball) + ## [9.7.9](https://github.com/microsoft/fluentui/tree/@fluentui/react-menu_v9.7.9) Mon, 17 Apr 2023 17:53:52 GMT diff --git a/packages/react-components/react-menu/jest.config.js b/packages/react-components/react-menu/jest.config.js index 89dddbb7628acf..3b5908251f56fa 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/package.json b/packages/react-components/react-menu/package.json index f71dbc699d08b4..f4786ef8dd2a6c 100644 --- a/packages/react-components/react-menu/package.json +++ b/packages/react-components/react-menu/package.json @@ -1,6 +1,6 @@ { "name": "@fluentui/react-menu", - "version": "9.7.9", + "version": "9.7.10", "description": "Fluent UI menu component", "main": "lib-commonjs/index.js", "module": "lib/index.js", @@ -45,7 +45,7 @@ "@fluentui/react-tabster": "^9.6.5", "@fluentui/react-theme": "^9.1.7", "@fluentui/react-utilities": "^9.8.0", - "@fluentui/react-jsx-runtime": "9.0.0-alpha.1", + "@fluentui/react-jsx-runtime": "9.0.0-alpha.2", "@griffel/react": "^1.5.2", "@swc/helpers": "^0.4.14" }, 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 6aec751ad2b68b..03c8b64f4e585a 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 d876ba971a07ee..58d3fe512e16d5 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 5030194e69e75c..cf6c19f807ca04 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 11ed7f15a5a2fd..3ab30d21a7b710 100644 --- a/packages/react-components/react-menu/src/components/MenuDivider/MenuDivider.tsx +++ b/packages/react-components/react-menu/src/components/MenuDivider/MenuDivider.tsx @@ -1,10 +1,10 @@ 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'; -import { useCustomStyleHooks_unstable } from '@fluentui/react-shared-contexts'; +import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts'; /** * Define a styled MenuDivider, using the `useMenuDivider_unstable` hook. @@ -14,8 +14,7 @@ export const MenuDivider: ForwardRefComponent = React.forwardR useMenuDividerStyles_unstable(state); - const { useMenuDividerStyles_unstable: useCustomStyles } = useCustomStyleHooks_unstable(); - useCustomStyles(state); + useCustomStyleHook_unstable('useMenuDividerStyles_unstable')(state); return renderMenuDivider_unstable(state); }); diff --git a/packages/react-components/react-menu/src/components/MenuDivider/index.ts b/packages/react-components/react-menu/src/components/MenuDivider/index.ts index bd1eccccc7fe72..b3ce7e41abbce1 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 dd0996d986ac9f..5e219f6318a4d0 100644 --- a/packages/react-components/react-menu/src/components/MenuGroup/MenuGroup.tsx +++ b/packages/react-components/react-menu/src/components/MenuGroup/MenuGroup.tsx @@ -4,8 +4,8 @@ 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 { useCustomStyleHooks_unstable } from '@fluentui/react-shared-contexts'; +import { useMenuGroupStyles_unstable } from './useMenuGroupStyles.styles'; +import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts'; /** * Define a styled MenuGroup, using the `useMenuGroup_unstable` hook. @@ -16,8 +16,7 @@ export const MenuGroup: ForwardRefComponent = React.forwardRef(( useMenuGroupStyles_unstable(state); - const { useMenuGroupStyles_unstable: useCustomStyles } = useCustomStyleHooks_unstable(); - useCustomStyles(state); + useCustomStyleHook_unstable('useMenuGroupStyles_unstable')(state); return renderMenuGroup_unstable(state, contextValues); }); diff --git a/packages/react-components/react-menu/src/components/MenuGroup/index.ts b/packages/react-components/react-menu/src/components/MenuGroup/index.ts index 75c785120a4328..698b5c6bce6099 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 5de609a128d316..a858b018cde692 100644 --- a/packages/react-components/react-menu/src/components/MenuGroupHeader/MenuGroupHeader.tsx +++ b/packages/react-components/react-menu/src/components/MenuGroupHeader/MenuGroupHeader.tsx @@ -1,10 +1,10 @@ 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'; -import { useCustomStyleHooks_unstable } from '@fluentui/react-shared-contexts'; +import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts'; /** * Define a styled MenuGroupHeader, using the `useMenuGroupHeader_unstable` hook. @@ -14,8 +14,7 @@ export const MenuGroupHeader: ForwardRefComponent = React. useMenuGroupHeaderStyles_unstable(state); - const { useMenuGroupHeaderStyles_unstable: useCustomStyles } = useCustomStyleHooks_unstable(); - useCustomStyles(state); + useCustomStyleHook_unstable('useMenuGroupHeaderStyles_unstable')(state); return renderMenuGroupHeader_unstable(state); }); diff --git a/packages/react-components/react-menu/src/components/MenuGroupHeader/index.ts b/packages/react-components/react-menu/src/components/MenuGroupHeader/index.ts index cfa4eae82c7289..0ed602008ef442 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 865a09fb21c2f5..e0e0781cc4bbeb 100644 --- a/packages/react-components/react-menu/src/components/MenuItem/MenuItem.tsx +++ b/packages/react-components/react-menu/src/components/MenuItem/MenuItem.tsx @@ -1,10 +1,10 @@ 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 { useCustomStyleHooks_unstable } from '@fluentui/react-shared-contexts'; +import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts'; /** * Define a styled MenuItem, using the `useMenuItem_unstable` and `useMenuItemStyles_unstable` hook. @@ -14,8 +14,7 @@ export const MenuItem: ForwardRefComponent = React.forwardRef((pr useMenuItemStyles_unstable(state); - const { useMenuItemStyles_unstable: useCustomStyles } = useCustomStyleHooks_unstable(); - useCustomStyles(state); + useCustomStyleHook_unstable('useMenuItemStyles_unstable')(state); return renderMenuItem_unstable(state); }); diff --git a/packages/react-components/react-menu/src/components/MenuItem/index.ts b/packages/react-components/react-menu/src/components/MenuItem/index.ts index 0b29cffc22b177..d7dd7263467eb6 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 33314faaea86a1..27a8a0612fbc66 100644 --- a/packages/react-components/react-menu/src/components/MenuItemCheckbox/MenuItemCheckbox.tsx +++ b/packages/react-components/react-menu/src/components/MenuItemCheckbox/MenuItemCheckbox.tsx @@ -1,10 +1,10 @@ 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 { useCustomStyleHooks_unstable } from '@fluentui/react-shared-contexts'; +import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts'; /** * Define a styled MenuItemCheckbox, using the `useMenuItemCheckbox_unstable` hook. @@ -14,8 +14,7 @@ export const MenuItemCheckbox: ForwardRefComponent = Reac useMenuItemCheckboxStyles_unstable(state); - const { useMenuItemCheckboxStyles_unstable: useCustomStyles } = useCustomStyleHooks_unstable(); - useCustomStyles(state); + useCustomStyleHook_unstable('useMenuItemCheckboxStyles_unstable')(state); return renderMenuItemCheckbox_unstable(state); }); diff --git a/packages/react-components/react-menu/src/components/MenuItemCheckbox/index.ts b/packages/react-components/react-menu/src/components/MenuItemCheckbox/index.ts index a83c37b3b835de..2c8eda2b015be2 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 fbd280b4ecb398..c9d99176b6a145 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 987b2179e8b81d..29987dfca3c4a5 100644 --- a/packages/react-components/react-menu/src/components/MenuItemRadio/MenuItemRadio.tsx +++ b/packages/react-components/react-menu/src/components/MenuItemRadio/MenuItemRadio.tsx @@ -1,10 +1,10 @@ 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 { useCustomStyleHooks_unstable } from '@fluentui/react-shared-contexts'; +import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts'; /** * Define a styled MenuItemRadio, using the `useMenuItemRadio_unstable` hook. @@ -14,8 +14,7 @@ export const MenuItemRadio: ForwardRefComponent = React.forw useMenuItemRadioStyles_unstable(state); - const { useMenuItemRadioStyles_unstable: useCustomStyles } = useCustomStyleHooks_unstable(); - useCustomStyles(state); + useCustomStyleHook_unstable('useMenuItemRadioStyles_unstable')(state); return renderMenuItemRadio_unstable(state); }); diff --git a/packages/react-components/react-menu/src/components/MenuItemRadio/index.ts b/packages/react-components/react-menu/src/components/MenuItemRadio/index.ts index 5fccfd5f89c2cc..8ca3847c613294 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 7da6c66881a013..d55c3d848a173f 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 0be9eb0cd2832d..3e8992f4363d51 100644 --- a/packages/react-components/react-menu/src/components/MenuList/MenuList.tsx +++ b/packages/react-components/react-menu/src/components/MenuList/MenuList.tsx @@ -2,10 +2,10 @@ 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 { useCustomStyleHooks_unstable } from '@fluentui/react-shared-contexts'; +import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts'; /** * Define a styled MenuList, using the `useMenuList_unstable` hook. @@ -16,8 +16,7 @@ export const MenuList: ForwardRefComponent = React.forwardRef((pr useMenuListStyles_unstable(state); - const { useMenuListStyles_unstable: useCustomStyles } = useCustomStyleHooks_unstable(); - useCustomStyles(state); + useCustomStyleHook_unstable('useMenuListStyles_unstable')(state); return renderMenuList_unstable(state, contextValues); }); diff --git a/packages/react-components/react-menu/src/components/MenuList/index.ts b/packages/react-components/react-menu/src/components/MenuList/index.ts index ffa4d4b2b0602c..b31eacd3ed5534 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 242f48a33d476a..fdbd423a2def19 100644 --- a/packages/react-components/react-menu/src/components/MenuPopover/MenuPopover.tsx +++ b/packages/react-components/react-menu/src/components/MenuPopover/MenuPopover.tsx @@ -1,10 +1,10 @@ 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'; -import { useCustomStyleHooks_unstable } from '@fluentui/react-shared-contexts'; +import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts'; /** * Popover intended to wrap `MenuList` and adds styling and interaction support specific to menus @@ -14,8 +14,7 @@ export const MenuPopover: ForwardRefComponent = React.forwardR useMenuPopoverStyles_unstable(state); - const { useMenuPopoverStyles_unstable: useCustomStyles } = useCustomStyleHooks_unstable(); - useCustomStyles(state); + useCustomStyleHook_unstable('useMenuPopoverStyles_unstable')(state); return renderMenuPopover_unstable(state); }); diff --git a/packages/react-components/react-menu/src/components/MenuPopover/index.ts b/packages/react-components/react-menu/src/components/MenuPopover/index.ts index 8d0c44ba098a74..84ae361cc00a89 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 456c4835a8f105..fc090d1da217e2 100644 --- a/packages/react-components/react-menu/src/components/MenuSplitGroup/MenuSplitGroup.tsx +++ b/packages/react-components/react-menu/src/components/MenuSplitGroup/MenuSplitGroup.tsx @@ -1,10 +1,10 @@ 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 { useCustomStyleHooks_unstable } from '@fluentui/react-shared-contexts'; +import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts'; /** * Layout wrapper that provides extra keyboard navigation behavior for two `MenuItem` components. @@ -14,8 +14,7 @@ export const MenuSplitGroup: ForwardRefComponent = React.fo useMenuSplitGroupStyles_unstable(state); - const { useMenuSplitGroupStyles_unstable: useCustomStyles } = useCustomStyleHooks_unstable(); - useCustomStyles(state); + useCustomStyleHook_unstable('useMenuSplitGroupStyles_unstable')(state); return renderMenuSplitGroup_unstable(state); }); diff --git a/packages/react-components/react-menu/src/components/MenuSplitGroup/index.ts b/packages/react-components/react-menu/src/components/MenuSplitGroup/index.ts index b2a65af21252e0..a9bf5ffac60a87 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 683ae56cc594ae..318db14dc7524f 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 6b380e0dd3687c..f33a6edd402c5d 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 b5b4a29882293f..87de2ef026bca3 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 3b6e83350f9512..6f5ded7fa41945 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 77f88408cbd839..a3d988f29a1728 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/.npmignore b/packages/react-components/react-migration-v0-v9/.npmignore index f7ce568a6dbf7c..26904cdfffc9bd 100644 --- a/packages/react-components/react-migration-v0-v9/.npmignore +++ b/packages/react-components/react-migration-v0-v9/.npmignore @@ -28,3 +28,9 @@ __tests__ .eslint* .git* .prettierignore + +# exclude gitignore patterns explicitly +!lib +!lib-commonjs +!lib-amd +!dist/*.d.ts diff --git a/packages/react-components/react-migration-v0-v9/.storybook/main.js b/packages/react-components/react-migration-v0-v9/.storybook/main.js index 15a002e45f8ce0..3679d73941ae18 100644 --- a/packages/react-components/react-migration-v0-v9/.storybook/main.js +++ b/packages/react-components/react-migration-v0-v9/.storybook/main.js @@ -1,7 +1,9 @@ -const { registerTsPaths, createPathAliasesConfig } = require('@fluentui/scripts-storybook'); +const path = require('path'); +const { registerTsPaths } = require('@fluentui/scripts-storybook'); + const rootMain = require('../../../../.storybook/main'); -const { tsConfigAllPath } = createPathAliasesConfig(); +const tsConfigAllPath = path.join(__dirname, '../../../../tsconfig.base.all.json'); module.exports = /** @type {Omit} */ ({ ...rootMain, diff --git a/packages/react-components/react-migration-v0-v9/etc/react-migration-v0-v9.api.md b/packages/react-components/react-migration-v0-v9/etc/react-migration-v0-v9.api.md index e5d6fe9b6ba211..0ba63bb5217d4b 100644 --- a/packages/react-components/react-migration-v0-v9/etc/react-migration-v0-v9.api.md +++ b/packages/react-components/react-migration-v0-v9/etc/react-migration-v0-v9.api.md @@ -7,11 +7,11 @@ import { ComponentProps } from '@fluentui/react-components'; import { GriffelStyle } from '@fluentui/react-components'; import { ObjectOf } from '@fluentui/react-northstar'; -import { ObjectShorthandValue } from '@fluentui/react-northstar'; +import type { ObjectShorthandValue } from '@fluentui/react-northstar'; import * as React_2 from 'react'; import { Slot } from '@fluentui/react-components'; import { Slot as Slot_2 } from '@fluentui/react-utilities'; -import { SlotRenderFunction } from '@fluentui/react-components'; +import { SlotRenderFunction } from '@fluentui/react-utilities'; // @public (undocumented) export const Flex: React_2.ForwardRefExoticComponent & FlexProps & React_2.RefAttributes>; @@ -133,7 +133,7 @@ export type StyledTextSlots = { }; // @public (undocumented) -export const useFlexStyles: () => Record<"fill" | "wrap" | "inline" | "flex" | "column" | "alignItemsFlexStart" | "alignItemsCenter" | "alignItemsFlexEnd" | "alignItemsStretch" | "justifyContentFlexStart" | "justifyContentCenter" | "justifyContentFlexEnd" | "justifyContentStretch" | "justifyContentSpaceAround" | "justifyContentSpaceBetween" | "justifyContentSpaceEvenly" | "gapForColumnFlexSmall" | "gapForColumnFlexSmaller" | "gapForColumnFlexMedium" | "gapForColumnFlexLarge" | "gapForRowFlexSmall" | "gapForRowFlexSmaller" | "gapForRowFlexMedium" | "gapForRowFlexLarge" | "paddingMedium", string>; +export const useFlexStyles: () => Record<"flex" | "fill" | "column" | "wrap" | "inline" | "alignItemsFlexStart" | "alignItemsCenter" | "alignItemsFlexEnd" | "alignItemsStretch" | "justifyContentFlexStart" | "justifyContentCenter" | "justifyContentFlexEnd" | "justifyContentStretch" | "justifyContentSpaceAround" | "justifyContentSpaceBetween" | "justifyContentSpaceEvenly" | "gapForColumnFlexSmall" | "gapForColumnFlexSmaller" | "gapForColumnFlexMedium" | "gapForColumnFlexLarge" | "gapForRowFlexSmall" | "gapForRowFlexSmaller" | "gapForRowFlexMedium" | "gapForRowFlexLarge" | "paddingMedium", string>; // @public (undocumented) export const useGridStyles: () => Record<"grid" | "onlyRows" | "rows1" | "rows2" | "rows3" | "columns1" | "columns2" | "columns3" | "columnsDefault", string>; 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 8e16e3dd157c95..a35b099dddca61 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-v0-v9/package.json b/packages/react-components/react-migration-v0-v9/package.json index 5875802d4d3714..9174861f4c6d19 100644 --- a/packages/react-components/react-migration-v0-v9/package.json +++ b/packages/react-components/react-migration-v0-v9/package.json @@ -19,7 +19,7 @@ "just": "just-scripts", "lint": "just-scripts lint", "test": "jest --passWithNoTests", - "type-check": "tsc -b tsconfig.json", + "type-check": "just-scripts type-check", "generate-api": "just-scripts generate-api", "storybook": "start-storybook", "start": "yarn storybook" @@ -36,9 +36,9 @@ "@fluentui/react-icons": "^2.0.196", "@fluentui/react-theme": "^9.1.7", "@fluentui/react-utilities": "^9.8.0", - "@fluentui/react-jsx-runtime": "9.0.0-alpha.1", + "@fluentui/react-jsx-runtime": "9.0.0-alpha.2", "@griffel/react": "^1.5.2", - "@fluentui/react-components": "^9.19.0", + "@fluentui/react-components": "^9.19.1", "@fluentui/react-northstar": "^0.66.4", "@swc/helpers": "^0.4.14" }, diff --git a/packages/react-components/react-migration-v0-v9/src/components/FormField/FormFieldShim.tsx b/packages/react-components/react-migration-v0-v9/src/components/FormField/FormFieldShim.tsx index 76ccfdf5318165..165e0537e2252e 100644 --- a/packages/react-components/react-migration-v0-v9/src/components/FormField/FormFieldShim.tsx +++ b/packages/react-components/react-migration-v0-v9/src/components/FormField/FormFieldShim.tsx @@ -5,7 +5,8 @@ import { useFieldStyles_unstable, useField_unstable, } from '@fluentui/react-components'; -import { ObjectShorthandValue } from '@fluentui/react-northstar'; +import type { ObjectShorthandValue } from '@fluentui/react-northstar'; + import * as React from 'react'; type WithContent = ObjectShorthandValue> | string; diff --git a/packages/react-components/react-migration-v0-v9/tsconfig.json b/packages/react-components/react-migration-v0-v9/tsconfig.json index 1941a041d46c19..cb0beb41b1488d 100644 --- a/packages/react-components/react-migration-v0-v9/tsconfig.json +++ b/packages/react-components/react-migration-v0-v9/tsconfig.json @@ -1,6 +1,7 @@ { - "extends": "../../../tsconfig.base.json", + "extends": "../../../tsconfig.base.all.json", "compilerOptions": { + "strict": true, "target": "ES2019", "noEmit": true, "isolatedModules": true, diff --git a/packages/react-components/react-migration-v8-v9/.npmignore b/packages/react-components/react-migration-v8-v9/.npmignore index f7ce568a6dbf7c..26904cdfffc9bd 100644 --- a/packages/react-components/react-migration-v8-v9/.npmignore +++ b/packages/react-components/react-migration-v8-v9/.npmignore @@ -28,3 +28,9 @@ __tests__ .eslint* .git* .prettierignore + +# exclude gitignore patterns explicitly +!lib +!lib-commonjs +!lib-amd +!dist/*.d.ts diff --git a/packages/react-components/react-migration-v8-v9/.storybook/main.js b/packages/react-components/react-migration-v8-v9/.storybook/main.js index 41673434a97056..cbbdca67753d11 100644 --- a/packages/react-components/react-migration-v8-v9/.storybook/main.js +++ b/packages/react-components/react-migration-v8-v9/.storybook/main.js @@ -1,7 +1,9 @@ -const { registerTsPaths, createPathAliasesConfig, registerRules, rules } = require('@fluentui/scripts-storybook'); +const path = require('path'); +const { registerTsPaths, registerRules, rules } = require('@fluentui/scripts-storybook'); + const rootMain = require('../../../../.storybook/main'); -const { tsConfigAllPath } = createPathAliasesConfig(); +const tsConfigAllPath = path.join(__dirname, '../../../../tsconfig.base.all.json'); module.exports = /** @type {Omit} */ ({ ...rootMain, diff --git a/packages/react-components/react-migration-v8-v9/CHANGELOG.json b/packages/react-components/react-migration-v8-v9/CHANGELOG.json index 8771b5201c4faa..0ff30c3c78b049 100644 --- a/packages/react-components/react-migration-v8-v9/CHANGELOG.json +++ b/packages/react-components/react-migration-v8-v9/CHANGELOG.json @@ -1,6 +1,21 @@ { "name": "@fluentui/react-migration-v8-v9", "entries": [ + { + "date": "Mon, 24 Apr 2023 08:12:46 GMT", + "tag": "@fluentui/react-migration-v8-v9_v9.2.10", + "version": "9.2.10", + "comments": { + "patch": [ + { + "author": "beachball", + "package": "@fluentui/react-migration-v8-v9", + "comment": "Bump @fluentui/react-components to v9.19.1", + "commit": "505433ac64f144c9cca456097413d6af4582e5ee" + } + ] + } + }, { "date": "Mon, 17 Apr 2023 17:54:02 GMT", "tag": "@fluentui/react-migration-v8-v9_v9.2.9", diff --git a/packages/react-components/react-migration-v8-v9/CHANGELOG.md b/packages/react-components/react-migration-v8-v9/CHANGELOG.md index 33bd575cf1e03e..529149c2dfe586 100644 --- a/packages/react-components/react-migration-v8-v9/CHANGELOG.md +++ b/packages/react-components/react-migration-v8-v9/CHANGELOG.md @@ -1,9 +1,18 @@ # Change Log - @fluentui/react-migration-v8-v9 -This log was last generated on Mon, 17 Apr 2023 17:54:02 GMT and should not be manually modified. +This log was last generated on Mon, 24 Apr 2023 08:12:46 GMT and should not be manually modified. +## [9.2.10](https://github.com/microsoft/fluentui/tree/@fluentui/react-migration-v8-v9_v9.2.10) + +Mon, 24 Apr 2023 08:12:46 GMT +[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-migration-v8-v9_v9.2.9..@fluentui/react-migration-v8-v9_v9.2.10) + +### Patches + +- Bump @fluentui/react-components to v9.19.1 ([commit](https://github.com/microsoft/fluentui/commit/505433ac64f144c9cca456097413d6af4582e5ee) by beachball) + ## [9.2.9](https://github.com/microsoft/fluentui/tree/@fluentui/react-migration-v8-v9_v9.2.9) Mon, 17 Apr 2023 17:54:02 GMT 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 92a09e8740001d..c248112b9c0b90 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/package.json b/packages/react-components/react-migration-v8-v9/package.json index 847741e4776d60..0be91f87223545 100644 --- a/packages/react-components/react-migration-v8-v9/package.json +++ b/packages/react-components/react-migration-v8-v9/package.json @@ -1,6 +1,6 @@ { "name": "@fluentui/react-migration-v8-v9", - "version": "9.2.9", + "version": "9.2.10", "description": "Migration shim components and methods for hybrid v8/v9 applications building on Fluent UI React.", "main": "lib-commonjs/index.js", "module": "lib/index.js", @@ -18,7 +18,7 @@ "just": "just-scripts", "lint": "just-scripts lint", "test": "jest --passWithNoTests", - "type-check": "tsc -b tsconfig.json", + "type-check": "just-scripts type-check", "generate-api": "just-scripts generate-api", "storybook": "start-storybook", "start": "yarn storybook" @@ -32,9 +32,9 @@ }, "dependencies": { "@ctrl/tinycolor": "3.3.4", - "@fluentui/fluent2-theme": "^8.107.0", - "@fluentui/react": "^8.107.6", - "@fluentui/react-components": "^9.19.0", + "@fluentui/fluent2-theme": "^8.107.5", + "@fluentui/react": "^8.109.0", + "@fluentui/react-components": "^9.19.1", "@fluentui/react-icons": "^2.0.196", "@fluentui/react-theme": "^9.1.7", "@fluentui/react-utilities": "^9.8.0", 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 77f88408cbd839..a3d988f29a1728 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-migration-v8-v9/tsconfig.json b/packages/react-components/react-migration-v8-v9/tsconfig.json index 1941a041d46c19..4908309138a098 100644 --- a/packages/react-components/react-migration-v8-v9/tsconfig.json +++ b/packages/react-components/react-migration-v8-v9/tsconfig.json @@ -1,13 +1,15 @@ { - "extends": "../../../tsconfig.base.json", + "extends": "../../../tsconfig.base.all.json", "compilerOptions": { + "strict": true, "target": "ES2019", "noEmit": true, "isolatedModules": true, "importHelpers": true, "jsx": "react", "noUnusedLocals": true, - "preserveConstEnums": true + "preserveConstEnums": true, + "paths": {} }, "include": [], "files": [], diff --git a/packages/react-components/react-overflow/.npmignore b/packages/react-components/react-overflow/.npmignore index f7ce568a6dbf7c..26904cdfffc9bd 100644 --- a/packages/react-components/react-overflow/.npmignore +++ b/packages/react-components/react-overflow/.npmignore @@ -28,3 +28,9 @@ __tests__ .eslint* .git* .prettierignore + +# exclude gitignore patterns explicitly +!lib +!lib-commonjs +!lib-amd +!dist/*.d.ts diff --git a/packages/react-components/react-overflow/jest.config.js b/packages/react-components/react-overflow/jest.config.js index 461774fbaae0d9..1951191f764ddd 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 d5b4db24221829..3dbd46e94a6e43 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 00000000000000..804444fb6c464e --- /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/.npmignore b/packages/react-components/react-persona/.npmignore index f7ce568a6dbf7c..26904cdfffc9bd 100644 --- a/packages/react-components/react-persona/.npmignore +++ b/packages/react-components/react-persona/.npmignore @@ -28,3 +28,9 @@ __tests__ .eslint* .git* .prettierignore + +# exclude gitignore patterns explicitly +!lib +!lib-commonjs +!lib-amd +!dist/*.d.ts diff --git a/packages/react-components/react-persona/CHANGELOG.json b/packages/react-components/react-persona/CHANGELOG.json index d1eb4f144bb88a..68671ea810c15b 100644 --- a/packages/react-components/react-persona/CHANGELOG.json +++ b/packages/react-components/react-persona/CHANGELOG.json @@ -1,6 +1,39 @@ { "name": "@fluentui/react-persona", "entries": [ + { + "date": "Mon, 24 Apr 2023 08:12:39 GMT", + "tag": "@fluentui/react-persona_v9.2.9", + "version": "9.2.9", + "comments": { + "patch": [ + { + "author": "bernardo.sunderhus@gmail.com", + "package": "@fluentui/react-persona", + "commit": "4f02d916ac12350bd7323d02961fde2de7658658", + "comment": "chore: adopt custom JSX pragma" + }, + { + "author": "beachball", + "package": "@fluentui/react-persona", + "comment": "Bump @fluentui/react-avatar to v9.4.10", + "commit": "505433ac64f144c9cca456097413d6af4582e5ee" + }, + { + "author": "beachball", + "package": "@fluentui/react-persona", + "comment": "Bump @fluentui/react-badge to v9.1.10", + "commit": "505433ac64f144c9cca456097413d6af4582e5ee" + }, + { + "author": "beachball", + "package": "@fluentui/react-persona", + "comment": "Bump @fluentui/react-jsx-runtime to v9.0.0-alpha.2", + "commit": "505433ac64f144c9cca456097413d6af4582e5ee" + } + ] + } + }, { "date": "Mon, 17 Apr 2023 17:54:02 GMT", "tag": "@fluentui/react-persona_v9.2.8", diff --git a/packages/react-components/react-persona/CHANGELOG.md b/packages/react-components/react-persona/CHANGELOG.md index 717cec6e6a8af6..7c303947af6978 100644 --- a/packages/react-components/react-persona/CHANGELOG.md +++ b/packages/react-components/react-persona/CHANGELOG.md @@ -1,9 +1,21 @@ # Change Log - @fluentui/react-persona -This log was last generated on Mon, 17 Apr 2023 17:54:02 GMT and should not be manually modified. +This log was last generated on Mon, 24 Apr 2023 08:12:39 GMT and should not be manually modified. +## [9.2.9](https://github.com/microsoft/fluentui/tree/@fluentui/react-persona_v9.2.9) + +Mon, 24 Apr 2023 08:12:39 GMT +[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-persona_v9.2.8..@fluentui/react-persona_v9.2.9) + +### Patches + +- chore: adopt custom JSX pragma ([PR #27619](https://github.com/microsoft/fluentui/pull/27619) by bernardo.sunderhus@gmail.com) +- Bump @fluentui/react-avatar to v9.4.10 ([commit](https://github.com/microsoft/fluentui/commit/505433ac64f144c9cca456097413d6af4582e5ee) by beachball) +- Bump @fluentui/react-badge to v9.1.10 ([commit](https://github.com/microsoft/fluentui/commit/505433ac64f144c9cca456097413d6af4582e5ee) by beachball) +- Bump @fluentui/react-jsx-runtime to v9.0.0-alpha.2 ([commit](https://github.com/microsoft/fluentui/commit/505433ac64f144c9cca456097413d6af4582e5ee) by beachball) + ## [9.2.8](https://github.com/microsoft/fluentui/tree/@fluentui/react-persona_v9.2.8) Mon, 17 Apr 2023 17:54:02 GMT diff --git a/packages/react-components/react-persona/jest.config.js b/packages/react-components/react-persona/jest.config.js index 64fccb00346d15..354a58e2ffde32 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/package.json b/packages/react-components/react-persona/package.json index 857ac2a5582897..081dd71c0f9e7f 100644 --- a/packages/react-components/react-persona/package.json +++ b/packages/react-components/react-persona/package.json @@ -1,6 +1,6 @@ { "name": "@fluentui/react-persona", - "version": "9.2.8", + "version": "9.2.9", "description": "React components for building web experiences", "main": "lib-commonjs/index.js", "module": "lib/index.js", @@ -32,11 +32,12 @@ "@fluentui/scripts-tasks": "*" }, "dependencies": { - "@fluentui/react-avatar": "^9.4.9", - "@fluentui/react-badge": "^9.1.9", + "@fluentui/react-avatar": "^9.4.10", + "@fluentui/react-badge": "^9.1.10", "@fluentui/react-shared-contexts": "^9.3.3", "@fluentui/react-theme": "^9.1.7", "@fluentui/react-utilities": "^9.8.0", + "@fluentui/react-jsx-runtime": "9.0.0-alpha.2", "@griffel/react": "^1.5.2", "@swc/helpers": "^0.4.14" }, diff --git a/packages/react-components/react-persona/src/components/Persona/Persona.test.tsx b/packages/react-components/react-persona/src/components/Persona/Persona.test.tsx index d76325ea88c69e..43b6c38e408fd4 100644 --- a/packages/react-components/react-persona/src/components/Persona/Persona.test.tsx +++ b/packages/react-components/react-persona/src/components/Persona/Persona.test.tsx @@ -2,7 +2,7 @@ import * as React from 'react'; import { isConformant } from '../../testing/isConformant'; import { omit } from '@fluentui/react-utilities'; import { Persona } from './Persona'; -import { personaClassNames } from './usePersonaStyles'; +import { personaClassNames } from './usePersonaStyles.styles'; import { render, screen } from '@testing-library/react'; describe('Persona', () => { diff --git a/packages/react-components/react-persona/src/components/Persona/Persona.tsx b/packages/react-components/react-persona/src/components/Persona/Persona.tsx index 158135a604248d..fbed5e04cdfad7 100644 --- a/packages/react-components/react-persona/src/components/Persona/Persona.tsx +++ b/packages/react-components/react-persona/src/components/Persona/Persona.tsx @@ -1,10 +1,10 @@ import * as React from 'react'; import { renderPersona_unstable } from './renderPersona'; import { usePersona_unstable } from './usePersona'; -import { usePersonaStyles_unstable } from './usePersonaStyles'; +import { usePersonaStyles_unstable } from './usePersonaStyles.styles'; import type { ForwardRefComponent } from '@fluentui/react-utilities'; import type { PersonaProps } from './Persona.types'; -import { useCustomStyleHooks_unstable } from '@fluentui/react-shared-contexts'; +import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts'; /** * A Persona is a visual representation of a person or status that showcases an Avatar, PresenceBadge, @@ -15,8 +15,7 @@ export const Persona: ForwardRefComponent = React.forwardRef((prop usePersonaStyles_unstable(state); - const { usePersonaStyles_unstable: useCustomStyles } = useCustomStyleHooks_unstable(); - useCustomStyles(state); + useCustomStyleHook_unstable('usePersonaStyles_unstable')(state); return renderPersona_unstable(state); }); diff --git a/packages/react-components/react-persona/src/components/Persona/index.ts b/packages/react-components/react-persona/src/components/Persona/index.ts index 5c74f72ff3dbc6..fbe484c63048ae 100644 --- a/packages/react-components/react-persona/src/components/Persona/index.ts +++ b/packages/react-components/react-persona/src/components/Persona/index.ts @@ -2,4 +2,4 @@ export * from './Persona'; export * from './Persona.types'; export * from './renderPersona'; export * from './usePersona'; -export * from './usePersonaStyles'; +export * from './usePersonaStyles.styles'; diff --git a/packages/react-components/react-persona/src/components/Persona/renderPersona.tsx b/packages/react-components/react-persona/src/components/Persona/renderPersona.tsx index cb0ce5506071c2..0004764b621a40 100644 --- a/packages/react-components/react-persona/src/components/Persona/renderPersona.tsx +++ b/packages/react-components/react-persona/src/components/Persona/renderPersona.tsx @@ -1,5 +1,9 @@ -import * as React from 'react'; -import { getSlots } from '@fluentui/react-utilities'; +/** @jsxRuntime classic */ +/** @jsx createElement */ + +import { createElement } from '@fluentui/react-jsx-runtime'; + +import { getSlotsNext } from '@fluentui/react-utilities'; import type { PersonaState, PersonaSlots } from './Persona.types'; /** @@ -7,7 +11,7 @@ import type { PersonaState, PersonaSlots } from './Persona.types'; */ export const renderPersona_unstable = (state: PersonaState) => { const { presenceOnly, textPosition } = state; - const { slots, slotProps } = getSlots(state); + const { slots, slotProps } = getSlotsNext(state); const coin = presenceOnly ? slots.presence && diff --git a/packages/react-components/react-persona/src/components/Persona/usePersonaStyles.ts b/packages/react-components/react-persona/src/components/Persona/usePersonaStyles.styles.ts similarity index 100% rename from packages/react-components/react-persona/src/components/Persona/usePersonaStyles.ts rename to packages/react-components/react-persona/src/components/Persona/usePersonaStyles.styles.ts diff --git a/packages/react-components/react-persona/src/testing/isConformant.ts b/packages/react-components/react-persona/src/testing/isConformant.ts index 77f88408cbd839..a3d988f29a1728 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/.npmignore b/packages/react-components/react-popover/.npmignore index f7ce568a6dbf7c..26904cdfffc9bd 100644 --- a/packages/react-components/react-popover/.npmignore +++ b/packages/react-components/react-popover/.npmignore @@ -28,3 +28,9 @@ __tests__ .eslint* .git* .prettierignore + +# exclude gitignore patterns explicitly +!lib +!lib-commonjs +!lib-amd +!dist/*.d.ts diff --git a/packages/react-components/react-popover/CHANGELOG.json b/packages/react-components/react-popover/CHANGELOG.json index 1d0f7a1f0aa3a5..96b12cc22d9b0c 100644 --- a/packages/react-components/react-popover/CHANGELOG.json +++ b/packages/react-components/react-popover/CHANGELOG.json @@ -1,6 +1,33 @@ { "name": "@fluentui/react-popover", "entries": [ + { + "date": "Mon, 24 Apr 2023 08:12:39 GMT", + "tag": "@fluentui/react-popover_v9.5.10", + "version": "9.5.10", + "comments": { + "patch": [ + { + "author": "bernardo.sunderhus@gmail.com", + "package": "@fluentui/react-popover", + "commit": "92f70e62b4c8256f81aae5d521477af851656f5d", + "comment": "bugfix: ensure legacyTrapFocus works properly" + }, + { + "author": "bernardo.sunderhus@gmail.com", + "package": "@fluentui/react-popover", + "commit": "85c36e249b33b0bad79be4edd1a943dfc5233b11", + "comment": "bugfix: remove caret from react-jsx-runtime prerelease dependency" + }, + { + "author": "beachball", + "package": "@fluentui/react-popover", + "comment": "Bump @fluentui/react-jsx-runtime to v9.0.0-alpha.2", + "commit": "505433ac64f144c9cca456097413d6af4582e5ee" + } + ] + } + }, { "date": "Mon, 17 Apr 2023 17:53:52 GMT", "tag": "@fluentui/react-popover_v9.5.9", diff --git a/packages/react-components/react-popover/CHANGELOG.md b/packages/react-components/react-popover/CHANGELOG.md index 4c98a0a4d96037..7f97e2a1f17ae7 100644 --- a/packages/react-components/react-popover/CHANGELOG.md +++ b/packages/react-components/react-popover/CHANGELOG.md @@ -1,9 +1,20 @@ # Change Log - @fluentui/react-popover -This log was last generated on Mon, 17 Apr 2023 17:53:52 GMT and should not be manually modified. +This log was last generated on Mon, 24 Apr 2023 08:12:39 GMT and should not be manually modified. +## [9.5.10](https://github.com/microsoft/fluentui/tree/@fluentui/react-popover_v9.5.10) + +Mon, 24 Apr 2023 08:12:39 GMT +[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-popover_v9.5.9..@fluentui/react-popover_v9.5.10) + +### Patches + +- bugfix: ensure legacyTrapFocus works properly ([PR #27574](https://github.com/microsoft/fluentui/pull/27574) by bernardo.sunderhus@gmail.com) +- bugfix: remove caret from react-jsx-runtime prerelease dependency ([PR #27588](https://github.com/microsoft/fluentui/pull/27588) by bernardo.sunderhus@gmail.com) +- Bump @fluentui/react-jsx-runtime to v9.0.0-alpha.2 ([commit](https://github.com/microsoft/fluentui/commit/505433ac64f144c9cca456097413d6af4582e5ee) by beachball) + ## [9.5.9](https://github.com/microsoft/fluentui/tree/@fluentui/react-popover_v9.5.9) Mon, 17 Apr 2023 17:53:52 GMT diff --git a/packages/react-components/react-popover/jest.config.js b/packages/react-components/react-popover/jest.config.js index c6dd2288db246f..82f46dd78f7728 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/package.json b/packages/react-components/react-popover/package.json index 331efbd8360350..453c81533d63b7 100644 --- a/packages/react-components/react-popover/package.json +++ b/packages/react-components/react-popover/package.json @@ -1,6 +1,6 @@ { "name": "@fluentui/react-popover", - "version": "9.5.9", + "version": "9.5.10", "description": "Popover component for Fluent UI", "main": "lib-commonjs/index.js", "module": "lib/index.js", @@ -44,7 +44,7 @@ "@fluentui/react-tabster": "^9.6.5", "@fluentui/react-theme": "^9.1.7", "@fluentui/react-utilities": "^9.8.0", - "@fluentui/react-jsx-runtime": "9.0.0-alpha.1", + "@fluentui/react-jsx-runtime": "9.0.0-alpha.2", "@griffel/react": "^1.5.2", "@swc/helpers": "^0.4.14" }, diff --git a/packages/react-components/react-popover/src/components/Popover/Popover.cy.tsx b/packages/react-components/react-popover/src/components/Popover/Popover.cy.tsx index cfa2ced9252487..4069d2bc9e2a72 100644 --- a/packages/react-components/react-popover/src/components/Popover/Popover.cy.tsx +++ b/packages/react-components/react-popover/src/components/Popover/Popover.cy.tsx @@ -377,7 +377,29 @@ describe('Popover', () => { cy.contains('One').should('have.focus').realPress(['Shift', 'Tab']); cy.contains('Two').should('have.focus'); }); + + it('should work as inertTrapFocus when set to false', () => { + mount( + + + + + + + + + + , + ); + + cy.get(popoverTriggerSelector).focus().realPress('Enter'); + + cy.contains('One').should('have.focus').realPress('Tab'); + cy.contains('Two').should('have.focus').realPress('Tab'); + cy.focused().should('not.exist'); + }); }); + describe('inert focus trap behaviour', () => { it('Tab should go to the window', () => { mount( diff --git a/packages/react-components/react-popover/src/components/Popover/usePopover.ts b/packages/react-components/react-popover/src/components/Popover/usePopover.ts index 4417479968e32a..8c6f3ccd962d7e 100644 --- a/packages/react-components/react-popover/src/components/Popover/usePopover.ts +++ b/packages/react-components/react-popover/src/components/Popover/usePopover.ts @@ -136,6 +136,8 @@ export const usePopover_unstable = (props: PopoverProps): PopoverState => { return { ...initialState, ...positioningRefs, + // eslint-disable-next-line deprecation/deprecation + inertTrapFocus: props.inertTrapFocus ?? (props.legacyTrapFocus === undefined ? false : !props.legacyTrapFocus), popoverTrigger, popoverSurface, open, 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 7702400edc5763..382cf2adb22813 100644 --- a/packages/react-components/react-popover/src/components/PopoverSurface/PopoverSurface.tsx +++ b/packages/react-components/react-popover/src/components/PopoverSurface/PopoverSurface.tsx @@ -1,10 +1,10 @@ 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 { useCustomStyleHooks_unstable } from '@fluentui/react-shared-contexts'; +import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts'; /** * PopoverSurface component renders react children in a positioned box @@ -14,8 +14,7 @@ export const PopoverSurface: ForwardRefComponent = React.fo usePopoverSurfaceStyles_unstable(state); - const { usePopoverSurfaceStyles_unstable: useCustomStyles } = useCustomStyleHooks_unstable(); - useCustomStyles(state); + useCustomStyleHook_unstable('usePopoverSurfaceStyles_unstable')(state); return renderPopoverSurface_unstable(state); }); diff --git a/packages/react-components/react-popover/src/components/PopoverSurface/index.ts b/packages/react-components/react-popover/src/components/PopoverSurface/index.ts index 0878d009f32711..ef6e2e67f2830e 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 77f88408cbd839..a3d988f29a1728 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/.npmignore b/packages/react-components/react-portal-compat-context/.npmignore index f7ce568a6dbf7c..26904cdfffc9bd 100644 --- a/packages/react-components/react-portal-compat-context/.npmignore +++ b/packages/react-components/react-portal-compat-context/.npmignore @@ -28,3 +28,9 @@ __tests__ .eslint* .git* .prettierignore + +# exclude gitignore patterns explicitly +!lib +!lib-commonjs +!lib-amd +!dist/*.d.ts 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 4f76964fc037d4..dfa6b9d19723dd 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/.npmignore b/packages/react-components/react-portal-compat/.npmignore index f7ce568a6dbf7c..26904cdfffc9bd 100644 --- a/packages/react-components/react-portal-compat/.npmignore +++ b/packages/react-components/react-portal-compat/.npmignore @@ -28,3 +28,9 @@ __tests__ .eslint* .git* .prettierignore + +# exclude gitignore patterns explicitly +!lib +!lib-commonjs +!lib-amd +!dist/*.d.ts diff --git a/packages/react-components/react-portal-compat/CHANGELOG.json b/packages/react-components/react-portal-compat/CHANGELOG.json index 3f0025ebea5337..00ad6e43bfe32a 100644 --- a/packages/react-components/react-portal-compat/CHANGELOG.json +++ b/packages/react-components/react-portal-compat/CHANGELOG.json @@ -1,6 +1,21 @@ { "name": "@fluentui/react-portal-compat", "entries": [ + { + "date": "Mon, 24 Apr 2023 08:12:46 GMT", + "tag": "@fluentui/react-portal-compat_v9.0.54", + "version": "9.0.54", + "comments": { + "patch": [ + { + "author": "beachball", + "package": "@fluentui/react-portal-compat", + "comment": "Bump @fluentui/react-components to v9.19.1", + "commit": "505433ac64f144c9cca456097413d6af4582e5ee" + } + ] + } + }, { "date": "Mon, 17 Apr 2023 17:54:02 GMT", "tag": "@fluentui/react-portal-compat_v9.0.53", diff --git a/packages/react-components/react-portal-compat/CHANGELOG.md b/packages/react-components/react-portal-compat/CHANGELOG.md index 92f6d08f2968c9..3eb18c16314eae 100644 --- a/packages/react-components/react-portal-compat/CHANGELOG.md +++ b/packages/react-components/react-portal-compat/CHANGELOG.md @@ -1,9 +1,18 @@ # Change Log - @fluentui/react-portal-compat -This log was last generated on Mon, 17 Apr 2023 17:54:02 GMT and should not be manually modified. +This log was last generated on Mon, 24 Apr 2023 08:12:46 GMT and should not be manually modified. +## [9.0.54](https://github.com/microsoft/fluentui/tree/@fluentui/react-portal-compat_v9.0.54) + +Mon, 24 Apr 2023 08:12:46 GMT +[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-portal-compat_v9.0.53..@fluentui/react-portal-compat_v9.0.54) + +### Patches + +- Bump @fluentui/react-components to v9.19.1 ([commit](https://github.com/microsoft/fluentui/commit/505433ac64f144c9cca456097413d6af4582e5ee) by beachball) + ## [9.0.53](https://github.com/microsoft/fluentui/tree/@fluentui/react-portal-compat_v9.0.53) Mon, 17 Apr 2023 17:54:02 GMT diff --git a/packages/react-components/react-portal-compat/jest.config.js b/packages/react-components/react-portal-compat/jest.config.js index be4da49608cee4..4525efa6064922 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-compat/package.json b/packages/react-components/react-portal-compat/package.json index 015533f57bfba2..764ec2d55cdd80 100644 --- a/packages/react-components/react-portal-compat/package.json +++ b/packages/react-components/react-portal-compat/package.json @@ -1,6 +1,6 @@ { "name": "@fluentui/react-portal-compat", - "version": "9.0.53", + "version": "9.0.54", "description": "A package that contains compatibility layer for React Portals", "main": "lib-commonjs/index.js", "module": "lib/index.js", @@ -26,7 +26,7 @@ }, "devDependencies": { "@fluentui/eslint-plugin": "*", - "@fluentui/react-components": "^9.19.0", + "@fluentui/react-components": "^9.19.1", "@fluentui/react-shared-contexts": "^9.3.3", "@fluentui/scripts-api-extractor": "*", "@fluentui/scripts-cypress": "*", @@ -38,7 +38,7 @@ "@swc/helpers": "^0.4.14" }, "peerDependencies": { - "@fluentui/react-components": "^9.19.0", + "@fluentui/react-components": "^9.19.1", "@types/react": ">=16.8.0 <19.0.0", "react": ">=16.8.0 <19.0.0" }, diff --git a/packages/react-components/react-portal-compat/src/PortalCompatProvider.test.tsx b/packages/react-components/react-portal-compat/src/PortalCompatProvider.test.tsx index c9f7c5e2d6fa60..1f81af86cc1657 100644 --- a/packages/react-components/react-portal-compat/src/PortalCompatProvider.test.tsx +++ b/packages/react-components/react-portal-compat/src/PortalCompatProvider.test.tsx @@ -41,6 +41,24 @@ describe('PortalCompatProvider', () => { `); }); + it('during register adds a className from "ThemeClassNameContext" context with a React 18 compatible ID', () => { + const element = document.createElement('div'); + const { result } = renderHook(() => usePortalCompat(), { + wrapper: props => ( + + {props.children} + + ), + }); + + expect(result.current(element)).toBeInstanceOf(Function); + expect(element.classList).toMatchInlineSnapshot(` + DOMTokenList { + "0": "fui-FluentProviderR1a", + } + `); + }); + it('during unregister remove a className from "ThemeClassNameContext" context', () => { const element = document.createElement('div'); diff --git a/packages/react-components/react-portal-compat/src/PortalCompatProvider.tsx b/packages/react-components/react-portal-compat/src/PortalCompatProvider.tsx index f41b3901e2de1d..c6a85ffce88eab 100644 --- a/packages/react-components/react-portal-compat/src/PortalCompatProvider.tsx +++ b/packages/react-components/react-portal-compat/src/PortalCompatProvider.tsx @@ -5,7 +5,7 @@ import { applyFocusVisiblePolyfill } from '@fluentui/react-tabster'; import type { RegisterPortalFn } from '@fluentui/react-portal-compat-context'; -const CLASS_NAME_REGEX = new RegExp(`(${fluentProviderClassNames.root}\\d+)`); +const CLASS_NAME_REGEX = new RegExp(`(${fluentProviderClassNames.root}\\w+)`); export const PortalCompatProvider: React.FC<{ children?: React.ReactNode }> = props => { const { children } = props; diff --git a/packages/react-components/react-portal/.npmignore b/packages/react-components/react-portal/.npmignore index f7ce568a6dbf7c..26904cdfffc9bd 100644 --- a/packages/react-components/react-portal/.npmignore +++ b/packages/react-components/react-portal/.npmignore @@ -28,3 +28,9 @@ __tests__ .eslint* .git* .prettierignore + +# exclude gitignore patterns explicitly +!lib +!lib-commonjs +!lib-amd +!dist/*.d.ts diff --git a/packages/react-components/react-portal/jest.config.js b/packages/react-components/react-portal/jest.config.js index dbf98b99ea1897..77869cbf6d6636 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 ffc2e73f903add..a7ee0d1aba8dd8 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 00000000000000..8ba1b843d5070b --- /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/.npmignore b/packages/react-components/react-positioning/.npmignore index f7ce568a6dbf7c..26904cdfffc9bd 100644 --- a/packages/react-components/react-positioning/.npmignore +++ b/packages/react-components/react-positioning/.npmignore @@ -28,3 +28,9 @@ __tests__ .eslint* .git* .prettierignore + +# exclude gitignore patterns explicitly +!lib +!lib-commonjs +!lib-amd +!dist/*.d.ts diff --git a/packages/react-components/react-positioning/jest.config.js b/packages/react-components/react-positioning/jest.config.js index 2c4d600b111c23..ba952e33e2bb7f 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/.npmignore b/packages/react-components/react-progress/.npmignore index f7ce568a6dbf7c..26904cdfffc9bd 100644 --- a/packages/react-components/react-progress/.npmignore +++ b/packages/react-components/react-progress/.npmignore @@ -28,3 +28,9 @@ __tests__ .eslint* .git* .prettierignore + +# exclude gitignore patterns explicitly +!lib +!lib-commonjs +!lib-amd +!dist/*.d.ts diff --git a/packages/react-components/react-progress/CHANGELOG.json b/packages/react-components/react-progress/CHANGELOG.json index cbc3c8978dab72..c17d6a8e8fb30f 100644 --- a/packages/react-components/react-progress/CHANGELOG.json +++ b/packages/react-components/react-progress/CHANGELOG.json @@ -1,6 +1,33 @@ { "name": "@fluentui/react-progress", "entries": [ + { + "date": "Mon, 24 Apr 2023 08:12:40 GMT", + "tag": "@fluentui/react-progress_v9.1.11", + "version": "9.1.11", + "comments": { + "patch": [ + { + "author": "bernardo.sunderhus@gmail.com", + "package": "@fluentui/react-progress", + "commit": "4a712dff672b89d0407040354652993822cb541f", + "comment": "chore: adopt custom JSX pragma" + }, + { + "author": "beachball", + "package": "@fluentui/react-progress", + "comment": "Bump @fluentui/react-field to v9.1.1", + "commit": "505433ac64f144c9cca456097413d6af4582e5ee" + }, + { + "author": "beachball", + "package": "@fluentui/react-progress", + "comment": "Bump @fluentui/react-jsx-runtime to v9.0.0-alpha.2", + "commit": "505433ac64f144c9cca456097413d6af4582e5ee" + } + ] + } + }, { "date": "Mon, 17 Apr 2023 17:53:53 GMT", "tag": "@fluentui/react-progress_v9.1.10", diff --git a/packages/react-components/react-progress/CHANGELOG.md b/packages/react-components/react-progress/CHANGELOG.md index 225c7e3b7439e8..e96ab19bac5997 100644 --- a/packages/react-components/react-progress/CHANGELOG.md +++ b/packages/react-components/react-progress/CHANGELOG.md @@ -1,9 +1,20 @@ # Change Log - @fluentui/react-progress -This log was last generated on Mon, 17 Apr 2023 17:53:53 GMT and should not be manually modified. +This log was last generated on Mon, 24 Apr 2023 08:12:40 GMT and should not be manually modified. +## [9.1.11](https://github.com/microsoft/fluentui/tree/@fluentui/react-progress_v9.1.11) + +Mon, 24 Apr 2023 08:12:40 GMT +[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-progress_v9.1.10..@fluentui/react-progress_v9.1.11) + +### Patches + +- chore: adopt custom JSX pragma ([PR #27617](https://github.com/microsoft/fluentui/pull/27617) by bernardo.sunderhus@gmail.com) +- Bump @fluentui/react-field to v9.1.1 ([commit](https://github.com/microsoft/fluentui/commit/505433ac64f144c9cca456097413d6af4582e5ee) by beachball) +- Bump @fluentui/react-jsx-runtime to v9.0.0-alpha.2 ([commit](https://github.com/microsoft/fluentui/commit/505433ac64f144c9cca456097413d6af4582e5ee) by beachball) + ## [9.1.10](https://github.com/microsoft/fluentui/tree/@fluentui/react-progress_v9.1.10) Mon, 17 Apr 2023 17:53:53 GMT diff --git a/packages/react-components/react-progress/jest.config.js b/packages/react-components/react-progress/jest.config.js index f22d09ca37207e..797661d97bfb8c 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/package.json b/packages/react-components/react-progress/package.json index 4241ec76d651e8..5b895b3523d634 100644 --- a/packages/react-components/react-progress/package.json +++ b/packages/react-components/react-progress/package.json @@ -1,6 +1,6 @@ { "name": "@fluentui/react-progress", - "version": "9.1.10", + "version": "9.1.11", "description": "Progress component for FluentUI v9", "main": "lib-commonjs/index.js", "module": "lib/index.js", @@ -32,7 +32,8 @@ "@fluentui/scripts-tasks": "*" }, "dependencies": { - "@fluentui/react-field": "^9.1.0", + "@fluentui/react-field": "^9.1.1", + "@fluentui/react-jsx-runtime": "9.0.0-alpha.2", "@fluentui/react-shared-contexts": "^9.3.3", "@fluentui/react-theme": "^9.1.7", "@fluentui/react-utilities": "^9.8.0", diff --git a/packages/react-components/react-progress/src/components/ProgressBar/ProgressBar.tsx b/packages/react-components/react-progress/src/components/ProgressBar/ProgressBar.tsx index 6a55419a2d12d7..29e6ad098fe785 100644 --- a/packages/react-components/react-progress/src/components/ProgressBar/ProgressBar.tsx +++ b/packages/react-components/react-progress/src/components/ProgressBar/ProgressBar.tsx @@ -1,10 +1,10 @@ import * as React from 'react'; import { useProgressBar_unstable } from './useProgressBar'; import { renderProgressBar_unstable } from './renderProgressBar'; -import { useProgressBarStyles_unstable } from './useProgressBarStyles'; +import { useProgressBarStyles_unstable } from './useProgressBarStyles.styles'; import type { ProgressBarProps } from './ProgressBar.types'; import type { ForwardRefComponent } from '@fluentui/react-utilities'; -import { useCustomStyleHooks_unstable } from '@fluentui/react-shared-contexts'; +import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts'; /** * A ProgressBar bar shows the progression of a task. @@ -14,8 +14,7 @@ export const ProgressBar: ForwardRefComponent = React.forwardR useProgressBarStyles_unstable(state); - const { useProgressBarStyles_unstable: useCustomStyles } = useCustomStyleHooks_unstable(); - useCustomStyles(state); + useCustomStyleHook_unstable('useProgressBarStyles_unstable')(state); return renderProgressBar_unstable(state); }); diff --git a/packages/react-components/react-progress/src/components/ProgressBar/index.ts b/packages/react-components/react-progress/src/components/ProgressBar/index.ts index 23bf0c0756c32c..535b489ef99bf2 100644 --- a/packages/react-components/react-progress/src/components/ProgressBar/index.ts +++ b/packages/react-components/react-progress/src/components/ProgressBar/index.ts @@ -2,4 +2,4 @@ export * from './ProgressBar'; export * from './ProgressBar.types'; export * from './renderProgressBar'; export * from './useProgressBar'; -export * from './useProgressBarStyles'; +export * from './useProgressBarStyles.styles'; diff --git a/packages/react-components/react-progress/src/components/ProgressBar/renderProgressBar.tsx b/packages/react-components/react-progress/src/components/ProgressBar/renderProgressBar.tsx index 83108d779540d0..614c7840d5b298 100644 --- a/packages/react-components/react-progress/src/components/ProgressBar/renderProgressBar.tsx +++ b/packages/react-components/react-progress/src/components/ProgressBar/renderProgressBar.tsx @@ -1,11 +1,15 @@ -import * as React from 'react'; -import { getSlots } from '@fluentui/react-utilities'; +/** @jsxRuntime classic */ +/** @jsx createElement */ + +import { createElement } from '@fluentui/react-jsx-runtime'; + +import { getSlotsNext } from '@fluentui/react-utilities'; import type { ProgressBarState, ProgressBarSlots } from './ProgressBar.types'; /** * Render the final JSX of ProgressBar */ export const renderProgressBar_unstable = (state: ProgressBarState) => { - const { slots, slotProps } = getSlots(state); + const { slots, slotProps } = getSlotsNext(state); return {slots.bar && }; }; diff --git a/packages/react-components/react-progress/src/components/ProgressBar/useProgressBarStyles.ts b/packages/react-components/react-progress/src/components/ProgressBar/useProgressBarStyles.styles.ts similarity index 100% rename from packages/react-components/react-progress/src/components/ProgressBar/useProgressBarStyles.ts rename to packages/react-components/react-progress/src/components/ProgressBar/useProgressBarStyles.styles.ts diff --git a/packages/react-components/react-progress/src/testing/isConformant.ts b/packages/react-components/react-progress/src/testing/isConformant.ts index 77f88408cbd839..a3d988f29a1728 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/.npmignore b/packages/react-components/react-provider/.npmignore index f7ce568a6dbf7c..26904cdfffc9bd 100644 --- a/packages/react-components/react-provider/.npmignore +++ b/packages/react-components/react-provider/.npmignore @@ -28,3 +28,9 @@ __tests__ .eslint* .git* .prettierignore + +# exclude gitignore patterns explicitly +!lib +!lib-commonjs +!lib-amd +!dist/*.d.ts diff --git a/packages/react-components/react-provider/CHANGELOG.json b/packages/react-components/react-provider/CHANGELOG.json index bae50f6a46ba74..5ffa3c098da20a 100644 --- a/packages/react-components/react-provider/CHANGELOG.json +++ b/packages/react-components/react-provider/CHANGELOG.json @@ -1,6 +1,27 @@ { "name": "@fluentui/react-provider", "entries": [ + { + "date": "Mon, 24 Apr 2023 08:12:40 GMT", + "tag": "@fluentui/react-provider_v9.5.4", + "version": "9.5.4", + "comments": { + "patch": [ + { + "author": "bernardo.sunderhus@gmail.com", + "package": "@fluentui/react-provider", + "commit": "85c36e249b33b0bad79be4edd1a943dfc5233b11", + "comment": "bugfix: remove caret from react-jsx-runtime prerelease dependency" + }, + { + "author": "beachball", + "package": "@fluentui/react-provider", + "comment": "Bump @fluentui/react-jsx-runtime to v9.0.0-alpha.2", + "commit": "505433ac64f144c9cca456097413d6af4582e5ee" + } + ] + } + }, { "date": "Mon, 17 Apr 2023 17:53:54 GMT", "tag": "@fluentui/react-provider_v9.5.3", diff --git a/packages/react-components/react-provider/CHANGELOG.md b/packages/react-components/react-provider/CHANGELOG.md index 6c1e82d795b5c3..8695c4ef9dd9b5 100644 --- a/packages/react-components/react-provider/CHANGELOG.md +++ b/packages/react-components/react-provider/CHANGELOG.md @@ -1,9 +1,19 @@ # Change Log - @fluentui/react-provider -This log was last generated on Mon, 17 Apr 2023 17:53:54 GMT and should not be manually modified. +This log was last generated on Mon, 24 Apr 2023 08:12:40 GMT and should not be manually modified. +## [9.5.4](https://github.com/microsoft/fluentui/tree/@fluentui/react-provider_v9.5.4) + +Mon, 24 Apr 2023 08:12:40 GMT +[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-provider_v9.5.3..@fluentui/react-provider_v9.5.4) + +### Patches + +- bugfix: remove caret from react-jsx-runtime prerelease dependency ([PR #27588](https://github.com/microsoft/fluentui/pull/27588) by bernardo.sunderhus@gmail.com) +- Bump @fluentui/react-jsx-runtime to v9.0.0-alpha.2 ([commit](https://github.com/microsoft/fluentui/commit/505433ac64f144c9cca456097413d6af4582e5ee) by beachball) + ## [9.5.3](https://github.com/microsoft/fluentui/tree/@fluentui/react-provider_v9.5.3) Mon, 17 Apr 2023 17:53:54 GMT diff --git a/packages/react-components/react-provider/etc/react-provider.api.md b/packages/react-components/react-provider/etc/react-provider.api.md index af4ee0d9cbc897..b7e2f50274ebb5 100644 --- a/packages/react-components/react-provider/etc/react-provider.api.md +++ b/packages/react-components/react-provider/etc/react-provider.api.md @@ -6,7 +6,7 @@ import { ComponentProps } from '@fluentui/react-utilities'; import type { ComponentState } from '@fluentui/react-utilities'; -import { CustomStyleHooksContextValue_unstable } from '@fluentui/react-shared-contexts'; +import type { CustomStyleHooksContextValue_unstable } from '@fluentui/react-shared-contexts'; import { OverridesContextValue_unstable } from '@fluentui/react-shared-contexts'; import type { PartialTheme } from '@fluentui/react-theme'; import type { ProviderContextValue_unstable } from '@fluentui/react-shared-contexts'; @@ -21,7 +21,93 @@ import type { TooltipVisibilityContextValue_unstable } from '@fluentui/react-sha // @public (undocumented) export const FluentProvider: React_2.ForwardRefExoticComponent, "dir"> & { applyStylesToPortals?: boolean | undefined; - customStyleHooks_unstable?: Partial | undefined; + customStyleHooks_unstable?: Partial<{ + useAccordionHeaderStyles_unstable: (state: unknown) => void; + useAccordionItemStyles_unstable: (state: unknown) => void; + useAccordionPanelStyles_unstable: (state: unknown) => void; + useAccordionStyles_unstable: (state: unknown) => void; + useAvatarStyles_unstable: (state: unknown) => void; + useAvatarGroupStyles_unstable: (state: unknown) => void; + useAvatarGroupItemStyles_unstable: (state: unknown) => void; + useAvatarGroupPopoverStyles_unstable: (state: unknown) => void; + useBadgeStyles_unstable: (state: unknown) => void; + useCounterBadgeStyles_unstable: (state: unknown) => void; + useCardHeaderStyles_unstable: (state: unknown) => void; + useCardStyles_unstable: (state: unknown) => void; + useCardFooterStyles_unstable: (state: unknown) => void; + useCardPreviewStyles_unstable: (state: unknown) => void; + usePresenceBadgeStyles_unstable: (state: unknown) => void; + useButtonStyles_unstable: (state: unknown) => void; + useCompoundButtonStyles_unstable: (state: unknown) => void; + useMenuButtonStyles_unstable: (state: unknown) => void; + useSplitButtonStyles_unstable: (state: unknown) => void; + useToggleButtonStyles_unstable: (state: unknown) => void; + useCheckboxStyles_unstable: (state: unknown) => void; + useComboboxStyles_unstable: (state: unknown) => void; + useDropdownStyles_unstable: (state: unknown) => void; + useListboxStyles_unstable: (state: unknown) => void; + useOptionStyles_unstable: (state: unknown) => void; + useOptionGroupStyles_unstable: (state: unknown) => void; + useDividerStyles_unstable: (state: unknown) => void; + useInputStyles_unstable: (state: unknown) => void; + useImageStyles_unstable: (state: unknown) => void; + useLabelStyles_unstable: (state: unknown) => void; + useLinkStyles_unstable: (state: unknown) => void; + useMenuDividerStyles_unstable: (state: unknown) => void; + useMenuGroupHeaderStyles_unstable: (state: unknown) => void; + useMenuGroupStyles_unstable: (state: unknown) => void; + useMenuItemCheckboxStyles_unstable: (state: unknown) => void; + useMenuItemRadioStyles_unstable: (state: unknown) => void; + useMenuItemStyles_unstable: (state: unknown) => void; + useMenuListStyles_unstable: (state: unknown) => void; + useMenuPopoverStyles_unstable: (state: unknown) => void; + useMenuSplitGroupStyles_unstable: (state: unknown) => void; + usePersonaStyles_unstable: (state: unknown) => void; + usePopoverSurfaceStyles_unstable: (state: unknown) => void; + useRadioGroupStyles_unstable: (state: unknown) => void; + useRadioStyles_unstable: (state: unknown) => void; + useSelectStyles_unstable: (state: unknown) => void; + useSliderStyles_unstable: (state: unknown) => void; + useSpinButtonStyles_unstable: (state: unknown) => void; + useSpinnerStyles_unstable: (state: unknown) => void; + useSwitchStyles_unstable: (state: unknown) => void; + useTabStyles_unstable: (state: unknown) => void; + useTabListStyles_unstable: (state: unknown) => void; + useTextStyles_unstable: (state: unknown) => void; + useTextareaStyles_unstable: (state: unknown) => void; + useTooltipStyles_unstable: (state: unknown) => void; + useDialogTitleStyles_unstable: (state: unknown) => void; + useDialogBodyStyles_unstable: (state: unknown) => void; + useDialogActionsStyles_unstable: (state: unknown) => void; + useDialogSurfaceStyles_unstable: (state: unknown) => void; + useDialogContentStyles_unstable: (state: unknown) => void; + useProgressBarStyles_unstable: (state: unknown) => void; + useToolbarButtonStyles_unstable: (state: unknown) => void; + useToolbarRadioButtonStyles_unstable: (state: unknown) => void; + useToolbarGroupStyles_unstable: (state: unknown) => void; + useToolbarToggleButtonStyles_unstable: (state: unknown) => void; + useToolbarDividerStyles_unstable: (state: unknown) => void; + useToolbarStyles_unstable: (state: unknown) => void; + useTableCellStyles_unstable: (state: unknown) => void; + useTableRowStyles_unstable: (state: unknown) => void; + useTableBodyStyles_unstable: (state: unknown) => void; + useTableStyles_unstable: (state: unknown) => void; + useTableHeaderStyles_unstable: (state: unknown) => void; + useTableHeaderCellStyles_unstable: (state: unknown) => void; + useTableResizeHandleStyles_unstable: (state: unknown) => void; + useTableSelectionCellStyles_unstable: (state: unknown) => void; + useTableCellActionsStyles_unstable: (state: unknown) => void; + useTableCellLayoutStyles_unstable: (state: unknown) => void; + useDataGridCellStyles_unstable: (state: unknown) => void; + useDataGridRowStyles_unstable: (state: unknown) => void; + useDataGridBodyStyles_unstable: (state: unknown) => void; + useDataGridStyles_unstable: (state: unknown) => void; + useDataGridHeaderStyles_unstable: (state: unknown) => void; + useDataGridHeaderCellStyles_unstable: (state: unknown) => void; + useDataGridSelectionCellStyles_unstable: (state: unknown) => void; + useDrawerStyles_unstable: (state: unknown) => void; + useDrawerBodyStyles_unstable: (state: unknown) => void; + }> | undefined; dir?: "ltr" | "rtl" | undefined; targetDocument?: Document | undefined; theme?: Partial | undefined; @@ -40,7 +126,7 @@ export type FluentProviderContextValues = Pick; +export type FluentProviderCustomStyleHooks = CustomStyleHooksContextValue_unstable; // @public (undocumented) export type FluentProviderProps = Omit, 'dir'> & { diff --git a/packages/react-components/react-provider/jest.config.js b/packages/react-components/react-provider/jest.config.js index aa1e59a8f1e8cd..220d2d09f585f0 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/package.json b/packages/react-components/react-provider/package.json index 5a6f68bdcd9459..d1482c52430e84 100644 --- a/packages/react-components/react-provider/package.json +++ b/packages/react-components/react-provider/package.json @@ -1,6 +1,6 @@ { "name": "@fluentui/react-provider", - "version": "9.5.3", + "version": "9.5.4", "description": "Fluent UI React provider component", "main": "lib-commonjs/index.js", "module": "lib/index.js", @@ -38,7 +38,7 @@ "@fluentui/react-tabster": "^9.6.5", "@fluentui/react-theme": "^9.1.7", "@fluentui/react-utilities": "^9.8.0", - "@fluentui/react-jsx-runtime": "9.0.0-alpha.1", + "@fluentui/react-jsx-runtime": "9.0.0-alpha.2", "@swc/helpers": "^0.4.14" }, "peerDependencies": { 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 049ed66fb97a85..6fbcb494a3c1a6 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/FluentProvider.types.ts b/packages/react-components/react-provider/src/components/FluentProvider/FluentProvider.types.ts index 462d4293f76a81..8c87322ccca121 100644 --- a/packages/react-components/react-provider/src/components/FluentProvider/FluentProvider.types.ts +++ b/packages/react-components/react-provider/src/components/FluentProvider/FluentProvider.types.ts @@ -15,7 +15,7 @@ export type FluentProviderSlots = { // exported for callers to avoid referencing react-shared-context // and applying Partial<> when passing custom style hooks. -export type FluentProviderCustomStyleHooks = Partial; +export type FluentProviderCustomStyleHooks = CustomStyleHooksContextValue; export type FluentProviderProps = Omit, 'dir'> & { /** diff --git a/packages/react-components/react-provider/src/components/FluentProvider/index.ts b/packages/react-components/react-provider/src/components/FluentProvider/index.ts index 2542f778ac7f60..1004a7accf8707 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/useFluentProvider.test.tsx b/packages/react-components/react-provider/src/components/FluentProvider/useFluentProvider.test.tsx index b9613d15c2c887..15218eca48b1f6 100644 --- a/packages/react-components/react-provider/src/components/FluentProvider/useFluentProvider.test.tsx +++ b/packages/react-components/react-provider/src/components/FluentProvider/useFluentProvider.test.tsx @@ -112,8 +112,8 @@ describe('useFluentProvider_unstable', () => { () => useFluentProvider_unstable({ customStyleHooks_unstable: customStylesA }, React.createRef()), ); - // Default hooks are still defined - expect(result.current.customStyleHooks_unstable.useAvatarStyles_unstable).toBeInstanceOf(Function); + // default is undefined as the selector provides no-op + expect(result.current.customStyleHooks_unstable.useAvatarStyles_unstable).toBeUndefined(); expect(result.current.customStyleHooks_unstable.useButtonStyles_unstable).toEqual( customStylesA.useButtonStyles_unstable, @@ -134,8 +134,8 @@ describe('useFluentProvider_unstable', () => { }, ); - // Default hooks are still defined - expect(result.current.customStyleHooks_unstable.useAvatarStyles_unstable).toBeInstanceOf(Function); + // default is undefined as the selector provides no-op + expect(result.current.customStyleHooks_unstable.useAvatarStyles_unstable).toBeUndefined(); // Overrides from outer FluentProvider are preserved expect(result.current.customStyleHooks_unstable.useImageStyles_unstable).toEqual( diff --git a/packages/react-components/react-provider/src/components/FluentProvider/useFluentProvider.ts b/packages/react-components/react-provider/src/components/FluentProvider/useFluentProvider.ts index d1ef14183c6856..eea3f32a317881 100644 --- a/packages/react-components/react-provider/src/components/FluentProvider/useFluentProvider.ts +++ b/packages/react-components/react-provider/src/components/FluentProvider/useFluentProvider.ts @@ -3,7 +3,7 @@ import { ThemeContext_unstable as ThemeContext, useFluent_unstable as useFluent, useOverrides_unstable as useOverrides, - useCustomStyleHooks_unstable as useCustomStyleHooks, + CustomStyleHooksContext_unstable as CustomStyleHooksContext, } from '@fluentui/react-shared-contexts'; import type { CustomStyleHooksContextValue_unstable as CustomStyleHooksContextValue, @@ -32,7 +32,7 @@ export const useFluentProvider_unstable = ( const parentContext = useFluent(); const parentTheme = useTheme(); const parentOverrides = useOverrides(); - const parentCustomStyleHooks = useCustomStyleHooks(); + const parentCustomStyleHooks: CustomStyleHooksContextValue = React.useContext(CustomStyleHooksContext) || {}; /** * TODO: add merge functions to "dir" merge, @@ -52,7 +52,6 @@ export const useFluentProvider_unstable = ( const mergedOverrides = shallowMerge(parentOverrides, overrides); - // parentCustomStyleHooks will not be a partial const mergedCustomStyleHooks = shallowMerge( parentCustomStyleHooks, customStyleHooks_unstable, diff --git a/packages/react-components/react-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 41459794424887..3751196dcea892 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 b94dff389b2351..34ed187e098648 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/.npmignore b/packages/react-components/react-radio/.npmignore index f7ce568a6dbf7c..26904cdfffc9bd 100644 --- a/packages/react-components/react-radio/.npmignore +++ b/packages/react-components/react-radio/.npmignore @@ -28,3 +28,9 @@ __tests__ .eslint* .git* .prettierignore + +# exclude gitignore patterns explicitly +!lib +!lib-commonjs +!lib-amd +!dist/*.d.ts diff --git a/packages/react-components/react-radio/CHANGELOG.json b/packages/react-components/react-radio/CHANGELOG.json index fee7cd7baba651..1116b48b3ed7ba 100644 --- a/packages/react-components/react-radio/CHANGELOG.json +++ b/packages/react-components/react-radio/CHANGELOG.json @@ -1,6 +1,39 @@ { "name": "@fluentui/react-radio", "entries": [ + { + "date": "Mon, 24 Apr 2023 08:12:40 GMT", + "tag": "@fluentui/react-radio_v9.1.11", + "version": "9.1.11", + "comments": { + "patch": [ + { + "author": "bernardo.sunderhus@gmail.com", + "package": "@fluentui/react-radio", + "commit": "4b4c462351678e8b6f81e3955d6d0a4a25cb212c", + "comment": "chore: adopt custom JSX pragma" + }, + { + "author": "beachball", + "package": "@fluentui/react-radio", + "comment": "Bump @fluentui/react-field to v9.1.1", + "commit": "505433ac64f144c9cca456097413d6af4582e5ee" + }, + { + "author": "beachball", + "package": "@fluentui/react-radio", + "comment": "Bump @fluentui/react-jsx-runtime to v9.0.0-alpha.2", + "commit": "505433ac64f144c9cca456097413d6af4582e5ee" + }, + { + "author": "beachball", + "package": "@fluentui/react-radio", + "comment": "Bump @fluentui/react-label to v9.1.10", + "commit": "505433ac64f144c9cca456097413d6af4582e5ee" + } + ] + } + }, { "date": "Mon, 17 Apr 2023 17:53:54 GMT", "tag": "@fluentui/react-radio_v9.1.10", diff --git a/packages/react-components/react-radio/CHANGELOG.md b/packages/react-components/react-radio/CHANGELOG.md index 667f973c1166e8..a1f5ddca1e7d6d 100644 --- a/packages/react-components/react-radio/CHANGELOG.md +++ b/packages/react-components/react-radio/CHANGELOG.md @@ -1,9 +1,21 @@ # Change Log - @fluentui/react-radio -This log was last generated on Mon, 17 Apr 2023 17:53:54 GMT and should not be manually modified. +This log was last generated on Mon, 24 Apr 2023 08:12:40 GMT and should not be manually modified. +## [9.1.11](https://github.com/microsoft/fluentui/tree/@fluentui/react-radio_v9.1.11) + +Mon, 24 Apr 2023 08:12:40 GMT +[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-radio_v9.1.10..@fluentui/react-radio_v9.1.11) + +### Patches + +- chore: adopt custom JSX pragma ([PR #27618](https://github.com/microsoft/fluentui/pull/27618) by bernardo.sunderhus@gmail.com) +- Bump @fluentui/react-field to v9.1.1 ([commit](https://github.com/microsoft/fluentui/commit/505433ac64f144c9cca456097413d6af4582e5ee) by beachball) +- Bump @fluentui/react-jsx-runtime to v9.0.0-alpha.2 ([commit](https://github.com/microsoft/fluentui/commit/505433ac64f144c9cca456097413d6af4582e5ee) by beachball) +- Bump @fluentui/react-label to v9.1.10 ([commit](https://github.com/microsoft/fluentui/commit/505433ac64f144c9cca456097413d6af4582e5ee) by beachball) + ## [9.1.10](https://github.com/microsoft/fluentui/tree/@fluentui/react-radio_v9.1.10) Mon, 17 Apr 2023 17:53:54 GMT diff --git a/packages/react-components/react-radio/jest.config.js b/packages/react-components/react-radio/jest.config.js index c8dc1fb78a9359..b43b20471e9901 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/package.json b/packages/react-components/react-radio/package.json index 54624190662895..3a6df3bb3a8f4f 100644 --- a/packages/react-components/react-radio/package.json +++ b/packages/react-components/react-radio/package.json @@ -1,6 +1,6 @@ { "name": "@fluentui/react-radio", - "version": "9.1.10", + "version": "9.1.11", "description": "Fluent UI Radio component", "main": "lib-commonjs/index.js", "module": "lib/index.js", @@ -32,9 +32,10 @@ "@fluentui/scripts-tasks": "*" }, "dependencies": { - "@fluentui/react-field": "^9.1.0", + "@fluentui/react-field": "^9.1.1", "@fluentui/react-icons": "^2.0.196", - "@fluentui/react-label": "^9.1.9", + "@fluentui/react-jsx-runtime": "9.0.0-alpha.2", + "@fluentui/react-label": "^9.1.10", "@fluentui/react-shared-contexts": "^9.3.3", "@fluentui/react-tabster": "^9.6.5", "@fluentui/react-theme": "^9.1.7", diff --git a/packages/react-components/react-radio/src/components/Radio/Radio.tsx b/packages/react-components/react-radio/src/components/Radio/Radio.tsx index 1ace4479bed34a..08599f7d95a39e 100644 --- a/packages/react-components/react-radio/src/components/Radio/Radio.tsx +++ b/packages/react-components/react-radio/src/components/Radio/Radio.tsx @@ -3,8 +3,8 @@ import type { ForwardRefComponent } from '@fluentui/react-utilities'; import type { RadioProps } from './Radio.types'; import { renderRadio_unstable } from './renderRadio'; import { useRadio_unstable } from './useRadio'; -import { useRadioStyles_unstable } from './useRadioStyles'; -import { useCustomStyleHooks_unstable } from '@fluentui/react-shared-contexts'; +import { useRadioStyles_unstable } from './useRadioStyles.styles'; +import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts'; /** * Radio component is a wrapper for a radio button with a label. @@ -14,8 +14,7 @@ export const Radio: ForwardRefComponent = React.forwardRef((props, r useRadioStyles_unstable(state); - const { useRadioStyles_unstable: useCustomStyles } = useCustomStyleHooks_unstable(); - useCustomStyles(state); + useCustomStyleHook_unstable('useRadioStyles_unstable')(state); return renderRadio_unstable(state); }); diff --git a/packages/react-components/react-radio/src/components/Radio/index.ts b/packages/react-components/react-radio/src/components/Radio/index.ts index f69bc1f6d69e3f..5cf3a3bd0267b8 100644 --- a/packages/react-components/react-radio/src/components/Radio/index.ts +++ b/packages/react-components/react-radio/src/components/Radio/index.ts @@ -2,4 +2,4 @@ export * from './Radio'; export * from './Radio.types'; export * from './renderRadio'; export * from './useRadio'; -export * from './useRadioStyles'; +export * from './useRadioStyles.styles'; diff --git a/packages/react-components/react-radio/src/components/Radio/renderRadio.tsx b/packages/react-components/react-radio/src/components/Radio/renderRadio.tsx index fcad4d316cda52..083b737bf1db43 100644 --- a/packages/react-components/react-radio/src/components/Radio/renderRadio.tsx +++ b/packages/react-components/react-radio/src/components/Radio/renderRadio.tsx @@ -1,12 +1,16 @@ -import * as React from 'react'; -import { getSlots } from '@fluentui/react-utilities'; +/** @jsxRuntime classic */ +/** @jsx createElement */ + +import { createElement } from '@fluentui/react-jsx-runtime'; + +import { getSlotsNext } from '@fluentui/react-utilities'; import type { RadioSlots, RadioState } from './Radio.types'; /** * Render the final JSX of Radio */ export const renderRadio_unstable = (state: RadioState) => { - const { slots, slotProps } = getSlots(state); + const { slots, slotProps } = getSlotsNext(state); return ( diff --git a/packages/react-components/react-radio/src/components/Radio/useRadioStyles.ts b/packages/react-components/react-radio/src/components/Radio/useRadioStyles.styles.ts similarity index 100% rename from packages/react-components/react-radio/src/components/Radio/useRadioStyles.ts rename to packages/react-components/react-radio/src/components/Radio/useRadioStyles.styles.ts diff --git a/packages/react-components/react-radio/src/components/RadioGroup/RadioGroup.tsx b/packages/react-components/react-radio/src/components/RadioGroup/RadioGroup.tsx index d25c3980d78b57..845a021afb66d5 100644 --- a/packages/react-components/react-radio/src/components/RadioGroup/RadioGroup.tsx +++ b/packages/react-components/react-radio/src/components/RadioGroup/RadioGroup.tsx @@ -3,9 +3,9 @@ import type { ForwardRefComponent } from '@fluentui/react-utilities'; import { RadioGroupProps } from './RadioGroup.types'; import { renderRadioGroup_unstable } from './renderRadioGroup'; import { useRadioGroup_unstable } from './useRadioGroup'; -import { useRadioGroupStyles_unstable } from './useRadioGroupStyles'; +import { useRadioGroupStyles_unstable } from './useRadioGroupStyles.styles'; import { useRadioGroupContextValues } from '../../contexts/useRadioGroupContextValues'; -import { useCustomStyleHooks_unstable } from '@fluentui/react-shared-contexts'; +import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts'; /** * A RadioGroup component presents a set of options where only one option can be selected. @@ -16,8 +16,7 @@ export const RadioGroup: ForwardRefComponent = React.forwardRef useRadioGroupStyles_unstable(state); - const { useRadioGroupStyles_unstable: useCustomStyles } = useCustomStyleHooks_unstable(); - useCustomStyles(state); + useCustomStyleHook_unstable('useRadioGroupStyles_unstable')(state); return renderRadioGroup_unstable(state, contextValues); }); diff --git a/packages/react-components/react-radio/src/components/RadioGroup/index.ts b/packages/react-components/react-radio/src/components/RadioGroup/index.ts index f6430b58da8a57..e8fe3953340a19 100644 --- a/packages/react-components/react-radio/src/components/RadioGroup/index.ts +++ b/packages/react-components/react-radio/src/components/RadioGroup/index.ts @@ -2,4 +2,4 @@ export * from './RadioGroup'; export * from './RadioGroup.types'; export * from './renderRadioGroup'; export * from './useRadioGroup'; -export * from './useRadioGroupStyles'; +export * from './useRadioGroupStyles.styles'; diff --git a/packages/react-components/react-radio/src/components/RadioGroup/renderRadioGroup.tsx b/packages/react-components/react-radio/src/components/RadioGroup/renderRadioGroup.tsx index 9223d0697de903..066663b1ed6c11 100644 --- a/packages/react-components/react-radio/src/components/RadioGroup/renderRadioGroup.tsx +++ b/packages/react-components/react-radio/src/components/RadioGroup/renderRadioGroup.tsx @@ -1,5 +1,9 @@ -import * as React from 'react'; -import { getSlots } from '@fluentui/react-utilities'; +/** @jsxRuntime classic */ +/** @jsx createElement */ + +import { createElement } from '@fluentui/react-jsx-runtime'; + +import { getSlotsNext } from '@fluentui/react-utilities'; import { RadioGroupContext } from '../../contexts/RadioGroupContext'; import { RadioGroupContextValues, RadioGroupSlots, RadioGroupState } from './RadioGroup.types'; @@ -7,7 +11,7 @@ import { RadioGroupContextValues, RadioGroupSlots, RadioGroupState } from './Rad * Render the final JSX of RadioGroup */ export const renderRadioGroup_unstable = (state: RadioGroupState, contextValues: RadioGroupContextValues) => { - const { slots, slotProps } = getSlots(state); + const { slots, slotProps } = getSlotsNext(state); return ( diff --git a/packages/react-components/react-radio/src/components/RadioGroup/useRadioGroupStyles.ts b/packages/react-components/react-radio/src/components/RadioGroup/useRadioGroupStyles.styles.ts similarity index 100% rename from packages/react-components/react-radio/src/components/RadioGroup/useRadioGroupStyles.ts rename to packages/react-components/react-radio/src/components/RadioGroup/useRadioGroupStyles.styles.ts diff --git a/packages/react-components/react-radio/src/testing/isConformant.ts b/packages/react-components/react-radio/src/testing/isConformant.ts index 77f88408cbd839..a3d988f29a1728 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/.npmignore b/packages/react-components/react-select/.npmignore index f7ce568a6dbf7c..26904cdfffc9bd 100644 --- a/packages/react-components/react-select/.npmignore +++ b/packages/react-components/react-select/.npmignore @@ -28,3 +28,9 @@ __tests__ .eslint* .git* .prettierignore + +# exclude gitignore patterns explicitly +!lib +!lib-commonjs +!lib-amd +!dist/*.d.ts diff --git a/packages/react-components/react-select/CHANGELOG.json b/packages/react-components/react-select/CHANGELOG.json index 9c1be0fc9cc396..f4bd97093c00f3 100644 --- a/packages/react-components/react-select/CHANGELOG.json +++ b/packages/react-components/react-select/CHANGELOG.json @@ -1,6 +1,33 @@ { "name": "@fluentui/react-select", "entries": [ + { + "date": "Mon, 24 Apr 2023 08:12:40 GMT", + "tag": "@fluentui/react-select_v9.1.11", + "version": "9.1.11", + "comments": { + "patch": [ + { + "author": "bernardo.sunderhus@gmail.com", + "package": "@fluentui/react-select", + "commit": "fa11c3889e6606bf7b0f8693b75f470b61da5a68", + "comment": "chore: adopt custom JSX pragma" + }, + { + "author": "beachball", + "package": "@fluentui/react-select", + "comment": "Bump @fluentui/react-field to v9.1.1", + "commit": "505433ac64f144c9cca456097413d6af4582e5ee" + }, + { + "author": "beachball", + "package": "@fluentui/react-select", + "comment": "Bump @fluentui/react-jsx-runtime to v9.0.0-alpha.2", + "commit": "505433ac64f144c9cca456097413d6af4582e5ee" + } + ] + } + }, { "date": "Mon, 17 Apr 2023 17:53:55 GMT", "tag": "@fluentui/react-select_v9.1.10", diff --git a/packages/react-components/react-select/CHANGELOG.md b/packages/react-components/react-select/CHANGELOG.md index a121474ba7eedf..ccbb6e02464c8b 100644 --- a/packages/react-components/react-select/CHANGELOG.md +++ b/packages/react-components/react-select/CHANGELOG.md @@ -1,9 +1,20 @@ # Change Log - @fluentui/react-select -This log was last generated on Mon, 17 Apr 2023 17:53:55 GMT and should not be manually modified. +This log was last generated on Mon, 24 Apr 2023 08:12:40 GMT and should not be manually modified. +## [9.1.11](https://github.com/microsoft/fluentui/tree/@fluentui/react-select_v9.1.11) + +Mon, 24 Apr 2023 08:12:40 GMT +[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-select_v9.1.10..@fluentui/react-select_v9.1.11) + +### Patches + +- chore: adopt custom JSX pragma ([PR #27621](https://github.com/microsoft/fluentui/pull/27621) by bernardo.sunderhus@gmail.com) +- Bump @fluentui/react-field to v9.1.1 ([commit](https://github.com/microsoft/fluentui/commit/505433ac64f144c9cca456097413d6af4582e5ee) by beachball) +- Bump @fluentui/react-jsx-runtime to v9.0.0-alpha.2 ([commit](https://github.com/microsoft/fluentui/commit/505433ac64f144c9cca456097413d6af4582e5ee) by beachball) + ## [9.1.10](https://github.com/microsoft/fluentui/tree/@fluentui/react-select_v9.1.10) Mon, 17 Apr 2023 17:53:55 GMT diff --git a/packages/react-components/react-select/jest.config.js b/packages/react-components/react-select/jest.config.js index ce2b7e4228dec4..040f6a5a8e2b7a 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/package.json b/packages/react-components/react-select/package.json index 4190796b7e274f..6bef45733fe44d 100644 --- a/packages/react-components/react-select/package.json +++ b/packages/react-components/react-select/package.json @@ -1,6 +1,6 @@ { "name": "@fluentui/react-select", - "version": "9.1.10", + "version": "9.1.11", "description": "Fluent UI React Select component", "main": "lib-commonjs/index.js", "module": "lib/index.js", @@ -32,8 +32,9 @@ "@fluentui/scripts-tasks": "*" }, "dependencies": { - "@fluentui/react-field": "^9.1.0", + "@fluentui/react-field": "^9.1.1", "@fluentui/react-icons": "^2.0.196", + "@fluentui/react-jsx-runtime": "9.0.0-alpha.2", "@fluentui/react-shared-contexts": "^9.3.3", "@fluentui/react-theme": "^9.1.7", "@fluentui/react-utilities": "^9.8.0", diff --git a/packages/react-components/react-select/src/components/Select/Select.tsx b/packages/react-components/react-select/src/components/Select/Select.tsx index 8b9a421d25bff6..baae3e3e40c8ca 100644 --- a/packages/react-components/react-select/src/components/Select/Select.tsx +++ b/packages/react-components/react-select/src/components/Select/Select.tsx @@ -4,7 +4,7 @@ import { renderSelect_unstable } from './renderSelect'; import { useSelectStyles_unstable } from './useSelectStyles'; import type { SelectProps } from './Select.types'; import type { ForwardRefComponent } from '@fluentui/react-utilities'; -import { useCustomStyleHooks_unstable } from '@fluentui/react-shared-contexts'; +import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts'; /** * Select component @@ -14,8 +14,7 @@ export const Select: ForwardRefComponent = React.forwardRef((props, useSelectStyles_unstable(state); - const { useSelectStyles_unstable: useCustomStyles } = useCustomStyleHooks_unstable(); - useCustomStyles(state); + useCustomStyleHook_unstable('useSelectStyles_unstable')(state); return renderSelect_unstable(state); }); diff --git a/packages/react-components/react-select/src/components/Select/renderSelect.tsx b/packages/react-components/react-select/src/components/Select/renderSelect.tsx index 7da66b6fd78f15..753292ead0b047 100644 --- a/packages/react-components/react-select/src/components/Select/renderSelect.tsx +++ b/packages/react-components/react-select/src/components/Select/renderSelect.tsx @@ -1,12 +1,16 @@ -import * as React from 'react'; -import { getSlots } from '@fluentui/react-utilities'; +/** @jsxRuntime classic */ +/** @jsx createElement */ + +import { createElement } from '@fluentui/react-jsx-runtime'; + +import { getSlotsNext } from '@fluentui/react-utilities'; import type { SelectSlots, SelectState } from './Select.types'; /** * Render the final JSX of Select */ export const renderSelect_unstable = (state: SelectState) => { - const { slots, slotProps } = getSlots(state); + const { slots, slotProps } = getSlotsNext(state); return ( {slotProps.select.children} diff --git a/packages/react-components/react-select/src/testing/isConformant.ts b/packages/react-components/react-select/src/testing/isConformant.ts index 77f88408cbd839..a3d988f29a1728 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/.npmignore b/packages/react-components/react-shared-contexts/.npmignore index f7ce568a6dbf7c..26904cdfffc9bd 100644 --- a/packages/react-components/react-shared-contexts/.npmignore +++ b/packages/react-components/react-shared-contexts/.npmignore @@ -28,3 +28,9 @@ __tests__ .eslint* .git* .prettierignore + +# exclude gitignore patterns explicitly +!lib +!lib-commonjs +!lib-amd +!dist/*.d.ts diff --git a/packages/react-components/react-shared-contexts/etc/react-shared-contexts.api.md b/packages/react-components/react-shared-contexts/etc/react-shared-contexts.api.md index f4993f6c6d8e7b..34cfb47f5c4f08 100644 --- a/packages/react-components/react-shared-contexts/etc/react-shared-contexts.api.md +++ b/packages/react-components/react-shared-contexts/etc/react-shared-contexts.api.md @@ -8,10 +8,96 @@ import * as React_2 from 'react'; import type { Theme } from '@fluentui/react-theme'; // @internal (undocumented) -export const CustomStyleHooksContext_unstable: React_2.Context; +export const CustomStyleHooksContext_unstable: React_2.Context | undefined>; // @public (undocumented) -export type CustomStyleHooksContextValue_unstable = { +export type CustomStyleHooksContextValue_unstable = Partial<{ useAccordionHeaderStyles_unstable: CustomStyleHook; useAccordionItemStyles_unstable: CustomStyleHook; useAccordionPanelStyles_unstable: CustomStyleHook; @@ -95,10 +181,98 @@ export type CustomStyleHooksContextValue_unstable = { useDataGridHeaderStyles_unstable: CustomStyleHook; useDataGridHeaderCellStyles_unstable: CustomStyleHook; useDataGridSelectionCellStyles_unstable: CustomStyleHook; -}; + useDrawerStyles_unstable: CustomStyleHook; + useDrawerBodyStyles_unstable: CustomStyleHook; +}>; // @internal (undocumented) -export const CustomStyleHooksProvider_unstable: React_2.Provider; +export const CustomStyleHooksProvider_unstable: React_2.Provider | undefined>; // @internal (undocumented) export type OverridesContextValue_unstable = { @@ -142,8 +316,8 @@ export type TooltipVisibilityContextValue_unstable = { // @internal (undocumented) export const TooltipVisibilityProvider_unstable: React_2.Provider; -// @public (undocumented) -export function useCustomStyleHooks_unstable(): CustomStyleHooksContextValue_unstable; +// @public +export const useCustomStyleHook_unstable: (hook: keyof CustomStyleHooksContextValue_unstable) => CustomStyleHook; // @public (undocumented) export function useFluent_unstable(): ProviderContextValue_unstable; diff --git a/packages/react-components/react-shared-contexts/jest.config.js b/packages/react-components/react-shared-contexts/jest.config.js index 232fc8fc07d0c8..2463dccb4ea510 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-shared-contexts/src/CustomStyleHooksContext/CustomStyleHooksContext.ts b/packages/react-components/react-shared-contexts/src/CustomStyleHooksContext/CustomStyleHooksContext.ts index 9f03c236e0a1c3..c0695054d26c97 100644 --- a/packages/react-components/react-shared-contexts/src/CustomStyleHooksContext/CustomStyleHooksContext.ts +++ b/packages/react-components/react-shared-contexts/src/CustomStyleHooksContext/CustomStyleHooksContext.ts @@ -5,7 +5,7 @@ import * as React from 'react'; type CustomStyleHook = (state: unknown) => void; // The list of hooks is built from the exports from react-components/src/index -export type CustomStyleHooksContextValue = { +export type CustomStyleHooksContextValue = Partial<{ useAccordionHeaderStyles_unstable: CustomStyleHook; useAccordionItemStyles_unstable: CustomStyleHook; useAccordionPanelStyles_unstable: CustomStyleHook; @@ -89,7 +89,9 @@ export type CustomStyleHooksContextValue = { useDataGridHeaderStyles_unstable: CustomStyleHook; useDataGridHeaderCellStyles_unstable: CustomStyleHook; useDataGridSelectionCellStyles_unstable: CustomStyleHook; -}; + useDrawerStyles_unstable: CustomStyleHook; + useDrawerBodyStyles_unstable: CustomStyleHook; +}>; /** * @internal @@ -97,97 +99,17 @@ export type CustomStyleHooksContextValue = { export const CustomStyleHooksContext = React.createContext(undefined); const noop = () => {}; -const customStyleHooksContextDefaultValue: CustomStyleHooksContextValue = { - useAccordionHeaderStyles_unstable: noop, - useAccordionItemStyles_unstable: noop, - useAccordionPanelStyles_unstable: noop, - useAccordionStyles_unstable: noop, - useAvatarStyles_unstable: noop, - useAvatarGroupStyles_unstable: noop, - useAvatarGroupItemStyles_unstable: noop, - useAvatarGroupPopoverStyles_unstable: noop, - useBadgeStyles_unstable: noop, - useCounterBadgeStyles_unstable: noop, - useCardHeaderStyles_unstable: noop, - useCardStyles_unstable: noop, - useCardFooterStyles_unstable: noop, - useCardPreviewStyles_unstable: noop, - usePresenceBadgeStyles_unstable: noop, - useButtonStyles_unstable: noop, - useCompoundButtonStyles_unstable: noop, - useMenuButtonStyles_unstable: noop, - useSplitButtonStyles_unstable: noop, - useToggleButtonStyles_unstable: noop, - useCheckboxStyles_unstable: noop, - useComboboxStyles_unstable: noop, - useDropdownStyles_unstable: noop, - useListboxStyles_unstable: noop, - useOptionStyles_unstable: noop, - useOptionGroupStyles_unstable: noop, - useDividerStyles_unstable: noop, - useInputStyles_unstable: noop, - useImageStyles_unstable: noop, - useLabelStyles_unstable: noop, - useLinkStyles_unstable: noop, - useMenuDividerStyles_unstable: noop, - useMenuGroupHeaderStyles_unstable: noop, - useMenuGroupStyles_unstable: noop, - useMenuItemCheckboxStyles_unstable: noop, - useMenuItemRadioStyles_unstable: noop, - useMenuItemStyles_unstable: noop, - useMenuListStyles_unstable: noop, - useMenuPopoverStyles_unstable: noop, - useMenuSplitGroupStyles_unstable: noop, - usePersonaStyles_unstable: noop, - usePopoverSurfaceStyles_unstable: noop, - useRadioGroupStyles_unstable: noop, - useRadioStyles_unstable: noop, - useSelectStyles_unstable: noop, - useSliderStyles_unstable: noop, - useSpinButtonStyles_unstable: noop, - useSpinnerStyles_unstable: noop, - useSwitchStyles_unstable: noop, - useTabStyles_unstable: noop, - useTabListStyles_unstable: noop, - useTextStyles_unstable: noop, - useTextareaStyles_unstable: noop, - useTooltipStyles_unstable: noop, - useDialogTitleStyles_unstable: noop, - useDialogBodyStyles_unstable: noop, - useDialogActionsStyles_unstable: noop, - useDialogSurfaceStyles_unstable: noop, - useDialogContentStyles_unstable: noop, - useProgressBarStyles_unstable: noop, - useToolbarButtonStyles_unstable: noop, - useToolbarRadioButtonStyles_unstable: noop, - useToolbarGroupStyles_unstable: noop, - useToolbarToggleButtonStyles_unstable: noop, - useToolbarDividerStyles_unstable: noop, - useToolbarStyles_unstable: noop, - useTableCellStyles_unstable: noop, - useTableRowStyles_unstable: noop, - useTableBodyStyles_unstable: noop, - useTableStyles_unstable: noop, - useTableHeaderStyles_unstable: noop, - useTableHeaderCellStyles_unstable: noop, - useTableResizeHandleStyles_unstable: noop, - useTableSelectionCellStyles_unstable: noop, - useTableCellActionsStyles_unstable: noop, - useTableCellLayoutStyles_unstable: noop, - useDataGridCellStyles_unstable: noop, - useDataGridRowStyles_unstable: noop, - useDataGridBodyStyles_unstable: noop, - useDataGridStyles_unstable: noop, - useDataGridHeaderStyles_unstable: noop, - useDataGridHeaderCellStyles_unstable: noop, - useDataGridSelectionCellStyles_unstable: noop, -}; /** * @internal */ export const CustomStyleHooksProvider = CustomStyleHooksContext.Provider; -export function useCustomStyleHooks(): CustomStyleHooksContextValue { - return React.useContext(CustomStyleHooksContext) ?? customStyleHooksContextDefaultValue; -} +/** + * Gets a custom style hook + * @param hook - One of the hook properties in CustomStyleHooksContextValue + * @returns The corresponding hook when defined, otherwise a no-op function. + */ +export const useCustomStyleHook = (hook: keyof CustomStyleHooksContextValue): CustomStyleHook => { + return React.useContext(CustomStyleHooksContext)?.[hook] ?? noop; +}; diff --git a/packages/react-components/react-shared-contexts/src/index.ts b/packages/react-components/react-shared-contexts/src/index.ts index 362cfd8299eb4d..ee633ce59b2539 100644 --- a/packages/react-components/react-shared-contexts/src/index.ts +++ b/packages/react-components/react-shared-contexts/src/index.ts @@ -23,10 +23,8 @@ export { export type { OverridesContextValue as OverridesContextValue_unstable } from './OverridesContext'; export { - CustomStyleHooksProvider as CustomStyleHooksProvider_unstable, - useCustomStyleHooks as useCustomStyleHooks_unstable, -} from './CustomStyleHooksContext'; -export type { - CustomStyleHooksContextValue as CustomStyleHooksContextValue_unstable, CustomStyleHooksContext as CustomStyleHooksContext_unstable, + CustomStyleHooksProvider as CustomStyleHooksProvider_unstable, + useCustomStyleHook as useCustomStyleHook_unstable, } from './CustomStyleHooksContext'; +export type { CustomStyleHooksContextValue as CustomStyleHooksContextValue_unstable } from './CustomStyleHooksContext'; diff --git a/packages/react-components/react-skeleton/.npmignore b/packages/react-components/react-skeleton/.npmignore index f7ce568a6dbf7c..26904cdfffc9bd 100644 --- a/packages/react-components/react-skeleton/.npmignore +++ b/packages/react-components/react-skeleton/.npmignore @@ -28,3 +28,9 @@ __tests__ .eslint* .git* .prettierignore + +# exclude gitignore patterns explicitly +!lib +!lib-commonjs +!lib-amd +!dist/*.d.ts diff --git a/packages/react-components/react-skeleton/CHANGELOG.json b/packages/react-components/react-skeleton/CHANGELOG.json index 3cbf88528fda6d..60666989e89ae4 100644 --- a/packages/react-components/react-skeleton/CHANGELOG.json +++ b/packages/react-components/react-skeleton/CHANGELOG.json @@ -1,6 +1,33 @@ { "name": "@fluentui/react-skeleton", "entries": [ + { + "date": "Mon, 24 Apr 2023 08:12:41 GMT", + "tag": "@fluentui/react-skeleton_v9.0.0-beta.10", + "version": "9.0.0-beta.10", + "comments": { + "prerelease": [ + { + "author": "bernardo.sunderhus@gmail.com", + "package": "@fluentui/react-skeleton", + "commit": "c899af235684ed0e2745db9c8e394692865b6765", + "comment": "chore: adopt custom JSX pragma" + }, + { + "author": "beachball", + "package": "@fluentui/react-skeleton", + "comment": "Bump @fluentui/react-field to v9.1.1", + "commit": "505433ac64f144c9cca456097413d6af4582e5ee" + }, + { + "author": "beachball", + "package": "@fluentui/react-skeleton", + "comment": "Bump @fluentui/react-jsx-runtime to v9.0.0-alpha.2", + "commit": "505433ac64f144c9cca456097413d6af4582e5ee" + } + ] + } + }, { "date": "Mon, 17 Apr 2023 17:53:56 GMT", "tag": "@fluentui/react-skeleton_v9.0.0-beta.9", diff --git a/packages/react-components/react-skeleton/CHANGELOG.md b/packages/react-components/react-skeleton/CHANGELOG.md index d4b3f639f108e0..1a8cf89d756252 100644 --- a/packages/react-components/react-skeleton/CHANGELOG.md +++ b/packages/react-components/react-skeleton/CHANGELOG.md @@ -1,9 +1,20 @@ # Change Log - @fluentui/react-skeleton -This log was last generated on Mon, 17 Apr 2023 17:53:56 GMT and should not be manually modified. +This log was last generated on Mon, 24 Apr 2023 08:12:41 GMT and should not be manually modified. +## [9.0.0-beta.10](https://github.com/microsoft/fluentui/tree/@fluentui/react-skeleton_v9.0.0-beta.10) + +Mon, 24 Apr 2023 08:12:41 GMT +[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-skeleton_v9.0.0-beta.9..@fluentui/react-skeleton_v9.0.0-beta.10) + +### Changes + +- chore: adopt custom JSX pragma ([PR #27623](https://github.com/microsoft/fluentui/pull/27623) by bernardo.sunderhus@gmail.com) +- Bump @fluentui/react-field to v9.1.1 ([commit](https://github.com/microsoft/fluentui/commit/505433ac64f144c9cca456097413d6af4582e5ee) by beachball) +- Bump @fluentui/react-jsx-runtime to v9.0.0-alpha.2 ([commit](https://github.com/microsoft/fluentui/commit/505433ac64f144c9cca456097413d6af4582e5ee) by beachball) + ## [9.0.0-beta.9](https://github.com/microsoft/fluentui/tree/@fluentui/react-skeleton_v9.0.0-beta.9) Mon, 17 Apr 2023 17:53:56 GMT diff --git a/packages/react-components/react-skeleton/jest.config.js b/packages/react-components/react-skeleton/jest.config.js index 0a32212b98d50f..1ecf245a63a963 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/package.json b/packages/react-components/react-skeleton/package.json index b76bb43afca20e..8a9575a44c3b90 100644 --- a/packages/react-components/react-skeleton/package.json +++ b/packages/react-components/react-skeleton/package.json @@ -1,6 +1,6 @@ { "name": "@fluentui/react-skeleton", - "version": "9.0.0-beta.9", + "version": "9.0.0-beta.10", "description": "Converged v9 Skeleton Component", "main": "lib-commonjs/index.js", "module": "lib/index.js", @@ -31,7 +31,8 @@ "@fluentui/scripts-tasks": "*" }, "dependencies": { - "@fluentui/react-field": "^9.1.0", + "@fluentui/react-field": "^9.1.1", + "@fluentui/react-jsx-runtime": "9.0.0-alpha.2", "@fluentui/react-shared-contexts": "^9.3.3", "@fluentui/react-theme": "^9.1.7", "@fluentui/react-utilities": "^9.8.0", diff --git a/packages/react-components/react-skeleton/src/components/Skeleton/renderSkeleton.tsx b/packages/react-components/react-skeleton/src/components/Skeleton/renderSkeleton.tsx index beb9a32e6248c8..f132fe2a8bd0c7 100644 --- a/packages/react-components/react-skeleton/src/components/Skeleton/renderSkeleton.tsx +++ b/packages/react-components/react-skeleton/src/components/Skeleton/renderSkeleton.tsx @@ -1,5 +1,9 @@ -import * as React from 'react'; -import { getSlots } from '@fluentui/react-utilities'; +/** @jsxRuntime classic */ +/** @jsx createElement */ + +import { createElement } from '@fluentui/react-jsx-runtime'; + +import { getSlotsNext } from '@fluentui/react-utilities'; import { SkeletonContextProvider } from '../../contexts/SkeletonContext'; import type { SkeletonContextValues, SkeletonSlots, SkeletonState } from './Skeleton.types'; @@ -7,7 +11,7 @@ import type { SkeletonContextValues, SkeletonSlots, SkeletonState } from './Skel * Render the final JSX of Skeleton */ export const renderSkeleton_unstable = (state: SkeletonState, contextValues: SkeletonContextValues) => { - const { slots, slotProps } = getSlots(state); + const { slots, slotProps } = getSlotsNext(state); return ( diff --git a/packages/react-components/react-skeleton/src/components/SkeletonItem/SkeletonItem.tsx b/packages/react-components/react-skeleton/src/components/SkeletonItem/SkeletonItem.tsx index 838f9e497233f0..af79e7819bcd2f 100644 --- a/packages/react-components/react-skeleton/src/components/SkeletonItem/SkeletonItem.tsx +++ b/packages/react-components/react-skeleton/src/components/SkeletonItem/SkeletonItem.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import { useSkeletonItem_unstable } from './useSkeletonItem'; import { renderSkeletonItem_unstable } from './renderSkeletonItem'; -import { useSkeletonItemStyles_unstable } from './useSkeletonItemStyles'; +import { useSkeletonItemStyles_unstable } from './useSkeletonItemStyles.styles'; import type { SkeletonItemProps } from './SkeletonItem.types'; import type { ForwardRefComponent } from '@fluentui/react-utilities'; diff --git a/packages/react-components/react-skeleton/src/components/SkeletonItem/index.ts b/packages/react-components/react-skeleton/src/components/SkeletonItem/index.ts index a17a851f08e5d7..63490a2e6e2352 100644 --- a/packages/react-components/react-skeleton/src/components/SkeletonItem/index.ts +++ b/packages/react-components/react-skeleton/src/components/SkeletonItem/index.ts @@ -2,4 +2,4 @@ export * from './SkeletonItem'; export * from './SkeletonItem.types'; export * from './renderSkeletonItem'; export * from './useSkeletonItem'; -export * from './useSkeletonItemStyles'; +export * from './useSkeletonItemStyles.styles'; diff --git a/packages/react-components/react-skeleton/src/components/SkeletonItem/renderSkeletonItem.tsx b/packages/react-components/react-skeleton/src/components/SkeletonItem/renderSkeletonItem.tsx index 1e912838de3d7b..67725d223973a9 100644 --- a/packages/react-components/react-skeleton/src/components/SkeletonItem/renderSkeletonItem.tsx +++ b/packages/react-components/react-skeleton/src/components/SkeletonItem/renderSkeletonItem.tsx @@ -1,12 +1,16 @@ -import * as React from 'react'; -import { getSlots } from '@fluentui/react-utilities'; +/** @jsxRuntime classic */ +/** @jsx createElement */ + +import { createElement } from '@fluentui/react-jsx-runtime'; + +import { getSlotsNext } from '@fluentui/react-utilities'; import type { SkeletonItemState, SkeletonItemSlots } from './SkeletonItem.types'; /** * Render the final JSX of SkeletonItem */ export const renderSkeletonItem_unstable = (state: SkeletonItemState) => { - const { slots, slotProps } = getSlots(state); + const { slots, slotProps } = getSlotsNext(state); return ; }; diff --git a/packages/react-components/react-skeleton/src/components/SkeletonItem/useSkeletonItemStyles.ts b/packages/react-components/react-skeleton/src/components/SkeletonItem/useSkeletonItemStyles.styles.ts similarity index 100% rename from packages/react-components/react-skeleton/src/components/SkeletonItem/useSkeletonItemStyles.ts rename to packages/react-components/react-skeleton/src/components/SkeletonItem/useSkeletonItemStyles.styles.ts diff --git a/packages/react-components/react-skeleton/src/testing/isConformant.ts b/packages/react-components/react-skeleton/src/testing/isConformant.ts index 77f88408cbd839..a3d988f29a1728 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/.npmignore b/packages/react-components/react-slider/.npmignore index f7ce568a6dbf7c..26904cdfffc9bd 100644 --- a/packages/react-components/react-slider/.npmignore +++ b/packages/react-components/react-slider/.npmignore @@ -28,3 +28,9 @@ __tests__ .eslint* .git* .prettierignore + +# exclude gitignore patterns explicitly +!lib +!lib-commonjs +!lib-amd +!dist/*.d.ts diff --git a/packages/react-components/react-slider/CHANGELOG.json b/packages/react-components/react-slider/CHANGELOG.json index c576904fc425bb..c166744fce4e13 100644 --- a/packages/react-components/react-slider/CHANGELOG.json +++ b/packages/react-components/react-slider/CHANGELOG.json @@ -1,6 +1,39 @@ { "name": "@fluentui/react-slider", "entries": [ + { + "date": "Mon, 24 Apr 2023 08:12:41 GMT", + "tag": "@fluentui/react-slider_v9.1.11", + "version": "9.1.11", + "comments": { + "patch": [ + { + "author": "bernardo.sunderhus@gmail.com", + "package": "@fluentui/react-slider", + "commit": "1013f6c9298ee3bc942544f8e4634c225c222db2", + "comment": "chore: adopt custom JSX pragma" + }, + { + "author": "beachball", + "package": "@fluentui/react-slider", + "comment": "Bump @fluentui/react-field to v9.1.1", + "commit": "505433ac64f144c9cca456097413d6af4582e5ee" + }, + { + "author": "beachball", + "package": "@fluentui/react-slider", + "comment": "Bump @fluentui/react-jsx-runtime to v9.0.0-alpha.2", + "commit": "505433ac64f144c9cca456097413d6af4582e5ee" + }, + { + "author": "beachball", + "package": "@fluentui/react-slider", + "comment": "Bump @fluentui/react-label to v9.1.10", + "commit": "505433ac64f144c9cca456097413d6af4582e5ee" + } + ] + } + }, { "date": "Mon, 17 Apr 2023 17:53:56 GMT", "tag": "@fluentui/react-slider_v9.1.10", diff --git a/packages/react-components/react-slider/CHANGELOG.md b/packages/react-components/react-slider/CHANGELOG.md index 305644d7f8b6a4..95fcd93282cfe5 100644 --- a/packages/react-components/react-slider/CHANGELOG.md +++ b/packages/react-components/react-slider/CHANGELOG.md @@ -1,9 +1,21 @@ # Change Log - @fluentui/react-slider -This log was last generated on Mon, 17 Apr 2023 17:53:56 GMT and should not be manually modified. +This log was last generated on Mon, 24 Apr 2023 08:12:41 GMT and should not be manually modified. +## [9.1.11](https://github.com/microsoft/fluentui/tree/@fluentui/react-slider_v9.1.11) + +Mon, 24 Apr 2023 08:12:41 GMT +[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-slider_v9.1.10..@fluentui/react-slider_v9.1.11) + +### Patches + +- chore: adopt custom JSX pragma ([PR #27624](https://github.com/microsoft/fluentui/pull/27624) by bernardo.sunderhus@gmail.com) +- Bump @fluentui/react-field to v9.1.1 ([commit](https://github.com/microsoft/fluentui/commit/505433ac64f144c9cca456097413d6af4582e5ee) by beachball) +- Bump @fluentui/react-jsx-runtime to v9.0.0-alpha.2 ([commit](https://github.com/microsoft/fluentui/commit/505433ac64f144c9cca456097413d6af4582e5ee) by beachball) +- Bump @fluentui/react-label to v9.1.10 ([commit](https://github.com/microsoft/fluentui/commit/505433ac64f144c9cca456097413d6af4582e5ee) by beachball) + ## [9.1.10](https://github.com/microsoft/fluentui/tree/@fluentui/react-slider_v9.1.10) Mon, 17 Apr 2023 17:53:56 GMT diff --git a/packages/react-components/react-slider/jest.config.js b/packages/react-components/react-slider/jest.config.js index f267c71f237f04..c3527dc791054a 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/package.json b/packages/react-components/react-slider/package.json index fa02c1087d1603..7cae295ba3c0e3 100644 --- a/packages/react-components/react-slider/package.json +++ b/packages/react-components/react-slider/package.json @@ -1,6 +1,6 @@ { "name": "@fluentui/react-slider", - "version": "9.1.10", + "version": "9.1.11", "description": "Fluent UI React Slider component.", "main": "lib-commonjs/index.js", "module": "lib/index.js", @@ -28,13 +28,14 @@ "@fluentui/eslint-plugin": "*", "@fluentui/react-conformance": "*", "@fluentui/react-conformance-griffel": "9.0.0-beta.20", - "@fluentui/react-label": "^9.1.9", + "@fluentui/react-label": "^9.1.10", "@fluentui/scripts-api-extractor": "*", "@fluentui/scripts-tasks": "*" }, "dependencies": { "@griffel/react": "^1.5.2", - "@fluentui/react-field": "^9.1.0", + "@fluentui/react-field": "^9.1.1", + "@fluentui/react-jsx-runtime": "9.0.0-alpha.2", "@fluentui/react-shared-contexts": "^9.3.3", "@fluentui/react-tabster": "^9.6.5", "@fluentui/react-theme": "^9.1.7", diff --git a/packages/react-components/react-slider/src/components/Slider/Slider.tsx b/packages/react-components/react-slider/src/components/Slider/Slider.tsx index ad40a8c9dd0c40..faabab328ed365 100644 --- a/packages/react-components/react-slider/src/components/Slider/Slider.tsx +++ b/packages/react-components/react-slider/src/components/Slider/Slider.tsx @@ -4,7 +4,7 @@ import { renderSlider_unstable } from './renderSlider'; import { useSliderStyles_unstable } from './useSliderStyles'; import type { SliderProps } from './Slider.types'; import type { ForwardRefComponent } from '@fluentui/react-utilities'; -import { useCustomStyleHooks_unstable } from '@fluentui/react-shared-contexts'; +import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts'; /** * The Slider component allows users to quickly select a value by dragging a thumb across a rail. @@ -14,8 +14,7 @@ export const Slider: ForwardRefComponent = React.forwardRef((props, useSliderStyles_unstable(state); - const { useSliderStyles_unstable: useCustomStyles } = useCustomStyleHooks_unstable(); - useCustomStyles(state); + useCustomStyleHook_unstable('useSliderStyles_unstable')(state); return renderSlider_unstable(state); }); diff --git a/packages/react-components/react-slider/src/components/Slider/renderSlider.tsx b/packages/react-components/react-slider/src/components/Slider/renderSlider.tsx index 72ead5b8769a59..1427f7dadc0e49 100644 --- a/packages/react-components/react-slider/src/components/Slider/renderSlider.tsx +++ b/packages/react-components/react-slider/src/components/Slider/renderSlider.tsx @@ -1,12 +1,16 @@ -import * as React from 'react'; -import { getSlots } from '@fluentui/react-utilities'; +/** @jsxRuntime classic */ +/** @jsx createElement */ + +import { createElement } from '@fluentui/react-jsx-runtime'; + +import { getSlotsNext } from '@fluentui/react-utilities'; import type { SliderState, SliderSlots } from './Slider.types'; /** * Render the final JSX of Slider */ export const renderSlider_unstable = (state: SliderState) => { - const { slots, slotProps } = getSlots(state); + const { slots, slotProps } = getSlotsNext(state); return ( diff --git a/packages/react-components/react-slider/src/testing/isConformant.ts b/packages/react-components/react-slider/src/testing/isConformant.ts index 77f88408cbd839..a3d988f29a1728 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/.npmignore b/packages/react-components/react-spinbutton/.npmignore index f7ce568a6dbf7c..26904cdfffc9bd 100644 --- a/packages/react-components/react-spinbutton/.npmignore +++ b/packages/react-components/react-spinbutton/.npmignore @@ -28,3 +28,9 @@ __tests__ .eslint* .git* .prettierignore + +# exclude gitignore patterns explicitly +!lib +!lib-commonjs +!lib-amd +!dist/*.d.ts diff --git a/packages/react-components/react-spinbutton/CHANGELOG.json b/packages/react-components/react-spinbutton/CHANGELOG.json index 3ee203dc051bf6..f8105e1dc3fb46 100644 --- a/packages/react-components/react-spinbutton/CHANGELOG.json +++ b/packages/react-components/react-spinbutton/CHANGELOG.json @@ -1,6 +1,39 @@ { "name": "@fluentui/react-spinbutton", "entries": [ + { + "date": "Mon, 24 Apr 2023 08:12:41 GMT", + "tag": "@fluentui/react-spinbutton_v9.2.11", + "version": "9.2.11", + "comments": { + "patch": [ + { + "author": "bernardo.sunderhus@gmail.com", + "package": "@fluentui/react-spinbutton", + "commit": "30931f6ca6133ba309323814aa3785abe26378b6", + "comment": "chore: adopt custom JSX pragma" + }, + { + "author": "beachball", + "package": "@fluentui/react-spinbutton", + "comment": "Bump @fluentui/react-field to v9.1.1", + "commit": "505433ac64f144c9cca456097413d6af4582e5ee" + }, + { + "author": "beachball", + "package": "@fluentui/react-spinbutton", + "comment": "Bump @fluentui/react-jsx-runtime to v9.0.0-alpha.2", + "commit": "505433ac64f144c9cca456097413d6af4582e5ee" + }, + { + "author": "beachball", + "package": "@fluentui/react-spinbutton", + "comment": "Bump @fluentui/react-label to v9.1.10", + "commit": "505433ac64f144c9cca456097413d6af4582e5ee" + } + ] + } + }, { "date": "Mon, 17 Apr 2023 17:53:57 GMT", "tag": "@fluentui/react-spinbutton_v9.2.10", diff --git a/packages/react-components/react-spinbutton/CHANGELOG.md b/packages/react-components/react-spinbutton/CHANGELOG.md index 796911f01b5ad8..8fa7c6fd3bcaaf 100644 --- a/packages/react-components/react-spinbutton/CHANGELOG.md +++ b/packages/react-components/react-spinbutton/CHANGELOG.md @@ -1,9 +1,21 @@ # Change Log - @fluentui/react-spinbutton -This log was last generated on Mon, 17 Apr 2023 17:53:57 GMT and should not be manually modified. +This log was last generated on Mon, 24 Apr 2023 08:12:41 GMT and should not be manually modified. +## [9.2.11](https://github.com/microsoft/fluentui/tree/@fluentui/react-spinbutton_v9.2.11) + +Mon, 24 Apr 2023 08:12:41 GMT +[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-spinbutton_v9.2.10..@fluentui/react-spinbutton_v9.2.11) + +### Patches + +- chore: adopt custom JSX pragma ([PR #27625](https://github.com/microsoft/fluentui/pull/27625) by bernardo.sunderhus@gmail.com) +- Bump @fluentui/react-field to v9.1.1 ([commit](https://github.com/microsoft/fluentui/commit/505433ac64f144c9cca456097413d6af4582e5ee) by beachball) +- Bump @fluentui/react-jsx-runtime to v9.0.0-alpha.2 ([commit](https://github.com/microsoft/fluentui/commit/505433ac64f144c9cca456097413d6af4582e5ee) by beachball) +- Bump @fluentui/react-label to v9.1.10 ([commit](https://github.com/microsoft/fluentui/commit/505433ac64f144c9cca456097413d6af4582e5ee) by beachball) + ## [9.2.10](https://github.com/microsoft/fluentui/tree/@fluentui/react-spinbutton_v9.2.10) Mon, 17 Apr 2023 17:53:57 GMT diff --git a/packages/react-components/react-spinbutton/jest.config.js b/packages/react-components/react-spinbutton/jest.config.js index 4d703b5734aa25..47a29c6c2e3904 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/package.json b/packages/react-components/react-spinbutton/package.json index b1635cda8a802f..82adccd84e229e 100644 --- a/packages/react-components/react-spinbutton/package.json +++ b/packages/react-components/react-spinbutton/package.json @@ -1,6 +1,6 @@ { "name": "@fluentui/react-spinbutton", - "version": "9.2.10", + "version": "9.2.11", "description": "Fluent UI React SpinButton component.", "main": "lib-commonjs/index.js", "module": "lib/index.js", @@ -28,15 +28,16 @@ "@fluentui/eslint-plugin": "*", "@fluentui/react-conformance": "*", "@fluentui/react-conformance-griffel": "9.0.0-beta.20", - "@fluentui/react-label": "^9.1.9", + "@fluentui/react-label": "^9.1.10", "@fluentui/scripts-api-extractor": "*", "@fluentui/scripts-tasks": "*" }, "dependencies": { "@griffel/react": "^1.5.2", "@fluentui/keyboard-keys": "^9.0.2", - "@fluentui/react-field": "^9.1.0", + "@fluentui/react-field": "^9.1.1", "@fluentui/react-icons": "^2.0.196", + "@fluentui/react-jsx-runtime": "9.0.0-alpha.2", "@fluentui/react-shared-contexts": "^9.3.3", "@fluentui/react-theme": "^9.1.7", "@fluentui/react-utilities": "^9.8.0", diff --git a/packages/react-components/react-spinbutton/src/components/SpinButton/SpinButton.tsx b/packages/react-components/react-spinbutton/src/components/SpinButton/SpinButton.tsx index 5e44b486c536f3..c9f89c0abbb73a 100644 --- a/packages/react-components/react-spinbutton/src/components/SpinButton/SpinButton.tsx +++ b/packages/react-components/react-spinbutton/src/components/SpinButton/SpinButton.tsx @@ -1,10 +1,10 @@ import * as React from 'react'; import { useSpinButton_unstable } from './useSpinButton'; import { renderSpinButton_unstable } from './renderSpinButton'; -import { useSpinButtonStyles_unstable } from './useSpinButtonStyles'; +import { useSpinButtonStyles_unstable } from './useSpinButtonStyles.styles'; import type { SpinButtonProps } from './SpinButton.types'; import type { ForwardRefComponent } from '@fluentui/react-utilities'; -import { useCustomStyleHooks_unstable } from '@fluentui/react-shared-contexts'; +import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts'; /** * A SpinButton allows someone to incrementally adjust a value in small steps. @@ -14,8 +14,7 @@ export const SpinButton: ForwardRefComponent = React.forwardRef useSpinButtonStyles_unstable(state); - const { useSpinButtonStyles_unstable: useCustomStyles } = useCustomStyleHooks_unstable(); - useCustomStyles(state); + useCustomStyleHook_unstable('useSpinButtonStyles_unstable')(state); return renderSpinButton_unstable(state); }); diff --git a/packages/react-components/react-spinbutton/src/components/SpinButton/index.ts b/packages/react-components/react-spinbutton/src/components/SpinButton/index.ts index 89eb026295e0ea..d8ff4f37771085 100644 --- a/packages/react-components/react-spinbutton/src/components/SpinButton/index.ts +++ b/packages/react-components/react-spinbutton/src/components/SpinButton/index.ts @@ -2,4 +2,4 @@ export * from './SpinButton'; export * from './SpinButton.types'; export * from './renderSpinButton'; export * from './useSpinButton'; -export * from './useSpinButtonStyles'; +export * from './useSpinButtonStyles.styles'; diff --git a/packages/react-components/react-spinbutton/src/components/SpinButton/renderSpinButton.tsx b/packages/react-components/react-spinbutton/src/components/SpinButton/renderSpinButton.tsx index 2a8380f6591b71..46619359d2c4a4 100644 --- a/packages/react-components/react-spinbutton/src/components/SpinButton/renderSpinButton.tsx +++ b/packages/react-components/react-spinbutton/src/components/SpinButton/renderSpinButton.tsx @@ -1,12 +1,16 @@ -import * as React from 'react'; -import { getSlots } from '@fluentui/react-utilities'; +/** @jsxRuntime classic */ +/** @jsx createElement */ + +import { createElement } from '@fluentui/react-jsx-runtime'; + +import { getSlotsNext } from '@fluentui/react-utilities'; import type { SpinButtonState, SpinButtonSlots } from './SpinButton.types'; /** * Render the final JSX of SpinButton */ export const renderSpinButton_unstable = (state: SpinButtonState) => { - const { slots, slotProps } = getSlots(state); + const { slots, slotProps } = getSlotsNext(state); return ( diff --git a/packages/react-components/react-spinbutton/src/components/SpinButton/useSpinButtonStyles.ts b/packages/react-components/react-spinbutton/src/components/SpinButton/useSpinButtonStyles.styles.ts similarity index 100% rename from packages/react-components/react-spinbutton/src/components/SpinButton/useSpinButtonStyles.ts rename to packages/react-components/react-spinbutton/src/components/SpinButton/useSpinButtonStyles.styles.ts diff --git a/packages/react-components/react-spinbutton/src/testing/isConformant.ts b/packages/react-components/react-spinbutton/src/testing/isConformant.ts index 77f88408cbd839..a3d988f29a1728 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/.npmignore b/packages/react-components/react-spinner/.npmignore index f7ce568a6dbf7c..26904cdfffc9bd 100644 --- a/packages/react-components/react-spinner/.npmignore +++ b/packages/react-components/react-spinner/.npmignore @@ -28,3 +28,9 @@ __tests__ .eslint* .git* .prettierignore + +# exclude gitignore patterns explicitly +!lib +!lib-commonjs +!lib-amd +!dist/*.d.ts diff --git a/packages/react-components/react-spinner/CHANGELOG.json b/packages/react-components/react-spinner/CHANGELOG.json index fad1ec87fb93e6..0a54e14ffca15a 100644 --- a/packages/react-components/react-spinner/CHANGELOG.json +++ b/packages/react-components/react-spinner/CHANGELOG.json @@ -1,6 +1,33 @@ { "name": "@fluentui/react-spinner", "entries": [ + { + "date": "Mon, 24 Apr 2023 08:12:42 GMT", + "tag": "@fluentui/react-spinner_v9.1.10", + "version": "9.1.10", + "comments": { + "patch": [ + { + "author": "bernardo.sunderhus@gmail.com", + "package": "@fluentui/react-spinner", + "commit": "cc2d9e296c0a45b6af258e5e3e13b8371f8602d3", + "comment": "chore: adopt custom JSX pragma" + }, + { + "author": "beachball", + "package": "@fluentui/react-spinner", + "comment": "Bump @fluentui/react-jsx-runtime to v9.0.0-alpha.2", + "commit": "505433ac64f144c9cca456097413d6af4582e5ee" + }, + { + "author": "beachball", + "package": "@fluentui/react-spinner", + "comment": "Bump @fluentui/react-label to v9.1.10", + "commit": "505433ac64f144c9cca456097413d6af4582e5ee" + } + ] + } + }, { "date": "Mon, 17 Apr 2023 17:54:02 GMT", "tag": "@fluentui/react-spinner_v9.1.9", diff --git a/packages/react-components/react-spinner/CHANGELOG.md b/packages/react-components/react-spinner/CHANGELOG.md index 1478238346e28d..d76cf613b0a3a9 100644 --- a/packages/react-components/react-spinner/CHANGELOG.md +++ b/packages/react-components/react-spinner/CHANGELOG.md @@ -1,9 +1,20 @@ # Change Log - @fluentui/react-spinner -This log was last generated on Mon, 17 Apr 2023 17:54:02 GMT and should not be manually modified. +This log was last generated on Mon, 24 Apr 2023 08:12:42 GMT and should not be manually modified. +## [9.1.10](https://github.com/microsoft/fluentui/tree/@fluentui/react-spinner_v9.1.10) + +Mon, 24 Apr 2023 08:12:42 GMT +[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-spinner_v9.1.9..@fluentui/react-spinner_v9.1.10) + +### Patches + +- chore: adopt custom JSX pragma ([PR #27622](https://github.com/microsoft/fluentui/pull/27622) by bernardo.sunderhus@gmail.com) +- Bump @fluentui/react-jsx-runtime to v9.0.0-alpha.2 ([commit](https://github.com/microsoft/fluentui/commit/505433ac64f144c9cca456097413d6af4582e5ee) by beachball) +- Bump @fluentui/react-label to v9.1.10 ([commit](https://github.com/microsoft/fluentui/commit/505433ac64f144c9cca456097413d6af4582e5ee) by beachball) + ## [9.1.9](https://github.com/microsoft/fluentui/tree/@fluentui/react-spinner_v9.1.9) Mon, 17 Apr 2023 17:54:02 GMT diff --git a/packages/react-components/react-spinner/jest.config.js b/packages/react-components/react-spinner/jest.config.js index 74cc94ecc6bb64..7fd228d7caa3ec 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/package.json b/packages/react-components/react-spinner/package.json index 8344e99192fd91..d1857e1c80e1fd 100644 --- a/packages/react-components/react-spinner/package.json +++ b/packages/react-components/react-spinner/package.json @@ -1,6 +1,6 @@ { "name": "@fluentui/react-spinner", - "version": "9.1.9", + "version": "9.1.10", "description": "Spinner component for Fluent UI React", "main": "lib-commonjs/index.js", "module": "lib/index.js", @@ -32,7 +32,8 @@ "@fluentui/scripts-tasks": "*" }, "dependencies": { - "@fluentui/react-label": "^9.1.9", + "@fluentui/react-jsx-runtime": "9.0.0-alpha.2", + "@fluentui/react-label": "^9.1.10", "@fluentui/react-shared-contexts": "^9.3.3", "@fluentui/react-theme": "^9.1.7", "@fluentui/react-utilities": "^9.8.0", diff --git a/packages/react-components/react-spinner/src/components/Spinner/Spinner.tsx b/packages/react-components/react-spinner/src/components/Spinner/Spinner.tsx index d0cf166ed16419..68960739cc7911 100644 --- a/packages/react-components/react-spinner/src/components/Spinner/Spinner.tsx +++ b/packages/react-components/react-spinner/src/components/Spinner/Spinner.tsx @@ -1,10 +1,10 @@ import * as React from 'react'; import { useSpinner_unstable } from './useSpinner'; import { renderSpinner_unstable } from './renderSpinner'; -import { useSpinnerStyles_unstable } from './useSpinnerStyles'; +import { useSpinnerStyles_unstable } from './useSpinnerStyles.styles'; import type { SpinnerProps } from './Spinner.types'; import type { ForwardRefComponent } from '@fluentui/react-utilities'; -import { useCustomStyleHooks_unstable } from '@fluentui/react-shared-contexts'; +import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts'; /** * Converged Spinner component for the fluentui repo @@ -14,8 +14,7 @@ export const Spinner: ForwardRefComponent = React.forwardRef((prop useSpinnerStyles_unstable(state); - const { useSpinnerStyles_unstable: useCustomStyles } = useCustomStyleHooks_unstable(); - useCustomStyles(state); + useCustomStyleHook_unstable('useSpinnerStyles_unstable')(state); return renderSpinner_unstable(state); }); diff --git a/packages/react-components/react-spinner/src/components/Spinner/index.ts b/packages/react-components/react-spinner/src/components/Spinner/index.ts index 13a43eb7f804ee..314d2206d0fd54 100644 --- a/packages/react-components/react-spinner/src/components/Spinner/index.ts +++ b/packages/react-components/react-spinner/src/components/Spinner/index.ts @@ -2,4 +2,4 @@ export * from './Spinner'; export * from './Spinner.types'; export * from './renderSpinner'; export * from './useSpinner'; -export * from './useSpinnerStyles'; +export * from './useSpinnerStyles.styles'; diff --git a/packages/react-components/react-spinner/src/components/Spinner/renderSpinner.tsx b/packages/react-components/react-spinner/src/components/Spinner/renderSpinner.tsx index bd84097faaa089..e3a24a960e4554 100644 --- a/packages/react-components/react-spinner/src/components/Spinner/renderSpinner.tsx +++ b/packages/react-components/react-spinner/src/components/Spinner/renderSpinner.tsx @@ -1,12 +1,16 @@ -import * as React from 'react'; -import { getSlots } from '@fluentui/react-utilities'; +/** @jsxRuntime classic */ +/** @jsx createElement */ + +import { createElement } from '@fluentui/react-jsx-runtime'; + +import { getSlotsNext } from '@fluentui/react-utilities'; import type { SpinnerState, SpinnerSlots } from './Spinner.types'; /** * Render the final JSX of Spinner */ export const renderSpinner_unstable = (state: SpinnerState) => { - const { slots, slotProps } = getSlots(state); + const { slots, slotProps } = getSlotsNext(state); const { labelPosition } = state; return ( diff --git a/packages/react-components/react-spinner/src/components/Spinner/useSpinnerStyles.ts b/packages/react-components/react-spinner/src/components/Spinner/useSpinnerStyles.styles.ts similarity index 100% rename from packages/react-components/react-spinner/src/components/Spinner/useSpinnerStyles.ts rename to packages/react-components/react-spinner/src/components/Spinner/useSpinnerStyles.styles.ts diff --git a/packages/react-components/react-spinner/src/testing/isConformant.ts b/packages/react-components/react-spinner/src/testing/isConformant.ts index 77f88408cbd839..a3d988f29a1728 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/.npmignore b/packages/react-components/react-storybook-addon-codesandbox/.npmignore index f7ce568a6dbf7c..26904cdfffc9bd 100644 --- a/packages/react-components/react-storybook-addon-codesandbox/.npmignore +++ b/packages/react-components/react-storybook-addon-codesandbox/.npmignore @@ -28,3 +28,9 @@ __tests__ .eslint* .git* .prettierignore + +# exclude gitignore patterns explicitly +!lib +!lib-commonjs +!lib-amd +!dist/*.d.ts 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 6ebf7bca345a5a..804d6a8c536387 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/.npmignore b/packages/react-components/react-storybook-addon/.npmignore index f7ce568a6dbf7c..26904cdfffc9bd 100644 --- a/packages/react-components/react-storybook-addon/.npmignore +++ b/packages/react-components/react-storybook-addon/.npmignore @@ -28,3 +28,9 @@ __tests__ .eslint* .git* .prettierignore + +# exclude gitignore patterns explicitly +!lib +!lib-commonjs +!lib-amd +!dist/*.d.ts diff --git a/packages/react-components/react-storybook-addon/jest.config.js b/packages/react-components/react-storybook-addon/jest.config.js index a0e17fee3482d2..717be5c5306c89 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-storybook-addon/package.json b/packages/react-components/react-storybook-addon/package.json index 364af05d13feaf..1497984b1b2391 100644 --- a/packages/react-components/react-storybook-addon/package.json +++ b/packages/react-components/react-storybook-addon/package.json @@ -31,7 +31,7 @@ }, "dependencies": { "@fluentui/react-theme": "^9.1.7", - "@fluentui/react-provider": "^9.5.3", + "@fluentui/react-provider": "^9.5.4", "@swc/helpers": "^0.4.14" }, "peerDependencies": { diff --git a/packages/react-components/react-switch/.npmignore b/packages/react-components/react-switch/.npmignore index f7ce568a6dbf7c..26904cdfffc9bd 100644 --- a/packages/react-components/react-switch/.npmignore +++ b/packages/react-components/react-switch/.npmignore @@ -28,3 +28,9 @@ __tests__ .eslint* .git* .prettierignore + +# exclude gitignore patterns explicitly +!lib +!lib-commonjs +!lib-amd +!dist/*.d.ts diff --git a/packages/react-components/react-switch/CHANGELOG.json b/packages/react-components/react-switch/CHANGELOG.json index 7bd59299272b30..3497fa354f515e 100644 --- a/packages/react-components/react-switch/CHANGELOG.json +++ b/packages/react-components/react-switch/CHANGELOG.json @@ -1,6 +1,39 @@ { "name": "@fluentui/react-switch", "entries": [ + { + "date": "Mon, 24 Apr 2023 08:12:42 GMT", + "tag": "@fluentui/react-switch_v9.1.11", + "version": "9.1.11", + "comments": { + "patch": [ + { + "author": "bernardo.sunderhus@gmail.com", + "package": "@fluentui/react-switch", + "commit": "3af4f74b06db2bb4a1a85361fd7b4595c0e97921", + "comment": "chore: adopt custom JSX pragma" + }, + { + "author": "beachball", + "package": "@fluentui/react-switch", + "comment": "Bump @fluentui/react-field to v9.1.1", + "commit": "505433ac64f144c9cca456097413d6af4582e5ee" + }, + { + "author": "beachball", + "package": "@fluentui/react-switch", + "comment": "Bump @fluentui/react-jsx-runtime to v9.0.0-alpha.2", + "commit": "505433ac64f144c9cca456097413d6af4582e5ee" + }, + { + "author": "beachball", + "package": "@fluentui/react-switch", + "comment": "Bump @fluentui/react-label to v9.1.10", + "commit": "505433ac64f144c9cca456097413d6af4582e5ee" + } + ] + } + }, { "date": "Mon, 17 Apr 2023 17:53:58 GMT", "tag": "@fluentui/react-switch_v9.1.10", diff --git a/packages/react-components/react-switch/CHANGELOG.md b/packages/react-components/react-switch/CHANGELOG.md index 2a1224a1185996..37461c7b18c01e 100644 --- a/packages/react-components/react-switch/CHANGELOG.md +++ b/packages/react-components/react-switch/CHANGELOG.md @@ -1,9 +1,21 @@ # Change Log - @fluentui/react-switch -This log was last generated on Mon, 17 Apr 2023 17:53:58 GMT and should not be manually modified. +This log was last generated on Mon, 24 Apr 2023 08:12:42 GMT and should not be manually modified. +## [9.1.11](https://github.com/microsoft/fluentui/tree/@fluentui/react-switch_v9.1.11) + +Mon, 24 Apr 2023 08:12:42 GMT +[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-switch_v9.1.10..@fluentui/react-switch_v9.1.11) + +### Patches + +- chore: adopt custom JSX pragma ([PR #27627](https://github.com/microsoft/fluentui/pull/27627) by bernardo.sunderhus@gmail.com) +- Bump @fluentui/react-field to v9.1.1 ([commit](https://github.com/microsoft/fluentui/commit/505433ac64f144c9cca456097413d6af4582e5ee) by beachball) +- Bump @fluentui/react-jsx-runtime to v9.0.0-alpha.2 ([commit](https://github.com/microsoft/fluentui/commit/505433ac64f144c9cca456097413d6af4582e5ee) by beachball) +- Bump @fluentui/react-label to v9.1.10 ([commit](https://github.com/microsoft/fluentui/commit/505433ac64f144c9cca456097413d6af4582e5ee) by beachball) + ## [9.1.10](https://github.com/microsoft/fluentui/tree/@fluentui/react-switch_v9.1.10) Mon, 17 Apr 2023 17:53:58 GMT diff --git a/packages/react-components/react-switch/jest.config.js b/packages/react-components/react-switch/jest.config.js index 7ab58b7b5e4770..81ead1f0a2875e 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/package.json b/packages/react-components/react-switch/package.json index dcb2a397bff3b0..54728d96a086ce 100644 --- a/packages/react-components/react-switch/package.json +++ b/packages/react-components/react-switch/package.json @@ -1,6 +1,6 @@ { "name": "@fluentui/react-switch", - "version": "9.1.10", + "version": "9.1.11", "description": "Fluent UI React Switch component.", "main": "lib-commonjs/index.js", "module": "lib/index.js", @@ -32,9 +32,10 @@ "@fluentui/scripts-tasks": "*" }, "dependencies": { - "@fluentui/react-field": "^9.1.0", + "@fluentui/react-field": "^9.1.1", "@fluentui/react-icons": "^2.0.196", - "@fluentui/react-label": "^9.1.9", + "@fluentui/react-jsx-runtime": "9.0.0-alpha.2", + "@fluentui/react-label": "^9.1.10", "@fluentui/react-shared-contexts": "^9.3.3", "@fluentui/react-tabster": "^9.6.5", "@fluentui/react-theme": "^9.1.7", diff --git a/packages/react-components/react-switch/src/components/Switch/Switch.tsx b/packages/react-components/react-switch/src/components/Switch/Switch.tsx index 4b28b95ddcba43..72cfb17e3f7723 100644 --- a/packages/react-components/react-switch/src/components/Switch/Switch.tsx +++ b/packages/react-components/react-switch/src/components/Switch/Switch.tsx @@ -1,10 +1,10 @@ import * as React from 'react'; import { useSwitch_unstable } from './useSwitch'; import { renderSwitch_unstable } from './renderSwitch'; -import { useSwitchStyles_unstable } from './useSwitchStyles'; +import { useSwitchStyles_unstable } from './useSwitchStyles.styles'; import type { SwitchProps } from './Switch.types'; import type { ForwardRefComponent } from '@fluentui/react-utilities'; -import { useCustomStyleHooks_unstable } from '@fluentui/react-shared-contexts'; +import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts'; /** * Switches enable users to trigger an option on or off through pressing the component. @@ -14,8 +14,7 @@ export const Switch: ForwardRefComponent = React.forwardRef((props, useSwitchStyles_unstable(state); - const { useSwitchStyles_unstable: useCustomStyles } = useCustomStyleHooks_unstable(); - useCustomStyles(state); + useCustomStyleHook_unstable('useSwitchStyles_unstable')(state); return renderSwitch_unstable(state); }); diff --git a/packages/react-components/react-switch/src/components/Switch/index.ts b/packages/react-components/react-switch/src/components/Switch/index.ts index 425156a0384107..713072beea0aa8 100644 --- a/packages/react-components/react-switch/src/components/Switch/index.ts +++ b/packages/react-components/react-switch/src/components/Switch/index.ts @@ -2,4 +2,4 @@ export * from './Switch'; export * from './Switch.types'; export * from './renderSwitch'; export * from './useSwitch'; -export * from './useSwitchStyles'; +export * from './useSwitchStyles.styles'; diff --git a/packages/react-components/react-switch/src/components/Switch/renderSwitch.tsx b/packages/react-components/react-switch/src/components/Switch/renderSwitch.tsx index b75fea2186c89b..2963395d749842 100644 --- a/packages/react-components/react-switch/src/components/Switch/renderSwitch.tsx +++ b/packages/react-components/react-switch/src/components/Switch/renderSwitch.tsx @@ -1,12 +1,16 @@ -import * as React from 'react'; -import { getSlots } from '@fluentui/react-utilities'; +/** @jsxRuntime classic */ +/** @jsx createElement */ + +import { createElement } from '@fluentui/react-jsx-runtime'; + +import { getSlotsNext } from '@fluentui/react-utilities'; import type { SwitchState, SwitchSlots } from './Switch.types'; /** * Render a Switch component by passing the state defined props to the appropriate slots. */ export const renderSwitch_unstable = (state: SwitchState) => { - const { slots, slotProps } = getSlots(state); + const { slots, slotProps } = getSlotsNext(state); const { labelPosition } = state; return ( diff --git a/packages/react-components/react-switch/src/components/Switch/useSwitchStyles.ts b/packages/react-components/react-switch/src/components/Switch/useSwitchStyles.styles.ts similarity index 100% rename from packages/react-components/react-switch/src/components/Switch/useSwitchStyles.ts rename to packages/react-components/react-switch/src/components/Switch/useSwitchStyles.styles.ts diff --git a/packages/react-components/react-switch/src/testing/isConformant.ts b/packages/react-components/react-switch/src/testing/isConformant.ts index 77f88408cbd839..a3d988f29a1728 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/.npmignore b/packages/react-components/react-table/.npmignore index f7ce568a6dbf7c..26904cdfffc9bd 100644 --- a/packages/react-components/react-table/.npmignore +++ b/packages/react-components/react-table/.npmignore @@ -28,3 +28,9 @@ __tests__ .eslint* .git* .prettierignore + +# exclude gitignore patterns explicitly +!lib +!lib-commonjs +!lib-amd +!dist/*.d.ts diff --git a/packages/react-components/react-table/CHANGELOG.json b/packages/react-components/react-table/CHANGELOG.json index 06d18a96c84099..c4998837fb2e06 100644 --- a/packages/react-components/react-table/CHANGELOG.json +++ b/packages/react-components/react-table/CHANGELOG.json @@ -1,6 +1,45 @@ { "name": "@fluentui/react-table", "entries": [ + { + "date": "Mon, 24 Apr 2023 08:12:42 GMT", + "tag": "@fluentui/react-table_v9.2.7", + "version": "9.2.7", + "comments": { + "patch": [ + { + "author": "bernardo.sunderhus@gmail.com", + "package": "@fluentui/react-table", + "commit": "85c36e249b33b0bad79be4edd1a943dfc5233b11", + "comment": "bugfix: remove caret from react-jsx-runtime prerelease dependency" + }, + { + "author": "beachball", + "package": "@fluentui/react-table", + "comment": "Bump @fluentui/react-avatar to v9.4.10", + "commit": "505433ac64f144c9cca456097413d6af4582e5ee" + }, + { + "author": "beachball", + "package": "@fluentui/react-table", + "comment": "Bump @fluentui/react-checkbox to v9.1.11", + "commit": "505433ac64f144c9cca456097413d6af4582e5ee" + }, + { + "author": "beachball", + "package": "@fluentui/react-table", + "comment": "Bump @fluentui/react-radio to v9.1.11", + "commit": "505433ac64f144c9cca456097413d6af4582e5ee" + }, + { + "author": "beachball", + "package": "@fluentui/react-table", + "comment": "Bump @fluentui/react-jsx-runtime to v9.0.0-alpha.2", + "commit": "505433ac64f144c9cca456097413d6af4582e5ee" + } + ] + } + }, { "date": "Mon, 17 Apr 2023 17:53:59 GMT", "tag": "@fluentui/react-table_v9.2.6", diff --git a/packages/react-components/react-table/CHANGELOG.md b/packages/react-components/react-table/CHANGELOG.md index 94100fc4c82a4a..5e2f83f5a05338 100644 --- a/packages/react-components/react-table/CHANGELOG.md +++ b/packages/react-components/react-table/CHANGELOG.md @@ -1,9 +1,22 @@ # Change Log - @fluentui/react-table -This log was last generated on Mon, 17 Apr 2023 17:53:59 GMT and should not be manually modified. +This log was last generated on Mon, 24 Apr 2023 08:12:42 GMT and should not be manually modified. +## [9.2.7](https://github.com/microsoft/fluentui/tree/@fluentui/react-table_v9.2.7) + +Mon, 24 Apr 2023 08:12:42 GMT +[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-table_v9.2.6..@fluentui/react-table_v9.2.7) + +### Patches + +- bugfix: remove caret from react-jsx-runtime prerelease dependency ([PR #27588](https://github.com/microsoft/fluentui/pull/27588) by bernardo.sunderhus@gmail.com) +- Bump @fluentui/react-avatar to v9.4.10 ([commit](https://github.com/microsoft/fluentui/commit/505433ac64f144c9cca456097413d6af4582e5ee) by beachball) +- Bump @fluentui/react-checkbox to v9.1.11 ([commit](https://github.com/microsoft/fluentui/commit/505433ac64f144c9cca456097413d6af4582e5ee) by beachball) +- Bump @fluentui/react-radio to v9.1.11 ([commit](https://github.com/microsoft/fluentui/commit/505433ac64f144c9cca456097413d6af4582e5ee) by beachball) +- Bump @fluentui/react-jsx-runtime to v9.0.0-alpha.2 ([commit](https://github.com/microsoft/fluentui/commit/505433ac64f144c9cca456097413d6af4582e5ee) by beachball) + ## [9.2.6](https://github.com/microsoft/fluentui/tree/@fluentui/react-table_v9.2.6) Mon, 17 Apr 2023 17:53:59 GMT diff --git a/packages/react-components/react-table/jest.config.js b/packages/react-components/react-table/jest.config.js index 95fa209faa5463..d09be1dc61ef38 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/package.json b/packages/react-components/react-table/package.json index 50b7266a9f7b38..3ab83a020845d3 100644 --- a/packages/react-components/react-table/package.json +++ b/packages/react-components/react-table/package.json @@ -1,6 +1,6 @@ { "name": "@fluentui/react-table", - "version": "9.2.6", + "version": "9.2.7", "description": "React components for building web experiences", "main": "lib-commonjs/index.js", "module": "lib/index.js", @@ -34,16 +34,16 @@ "dependencies": { "@fluentui/keyboard-keys": "^9.0.2", "@fluentui/react-aria": "^9.3.18", - "@fluentui/react-avatar": "^9.4.9", - "@fluentui/react-checkbox": "^9.1.10", + "@fluentui/react-avatar": "^9.4.10", + "@fluentui/react-checkbox": "^9.1.11", "@fluentui/react-context-selector": "^9.1.18", "@fluentui/react-icons": "^2.0.196", - "@fluentui/react-radio": "^9.1.10", + "@fluentui/react-radio": "^9.1.11", "@fluentui/react-shared-contexts": "^9.3.3", "@fluentui/react-tabster": "^9.6.5", "@fluentui/react-theme": "^9.1.7", "@fluentui/react-utilities": "^9.8.0", - "@fluentui/react-jsx-runtime": "9.0.0-alpha.1", + "@fluentui/react-jsx-runtime": "9.0.0-alpha.2", "@griffel/react": "^1.5.2", "@swc/helpers": "^0.4.14" }, 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 957028800767c0..143a2e4f40f5c5 100644 --- a/packages/react-components/react-table/src/components/DataGrid/DataGrid.tsx +++ b/packages/react-components/react-table/src/components/DataGrid/DataGrid.tsx @@ -1,11 +1,11 @@ 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'; -import { useCustomStyleHooks_unstable } from '@fluentui/react-shared-contexts'; +import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts'; /** * DataGrid component @@ -15,8 +15,7 @@ export const DataGrid: ForwardRefComponent = React.forwardRef((pr useDataGridStyles_unstable(state); - const { useDataGridStyles_unstable: useCustomStyles } = useCustomStyleHooks_unstable(); - useCustomStyles(state); + useCustomStyleHook_unstable('useDataGridStyles_unstable')(state); return renderDataGrid_unstable(state, useDataGridContextValues_unstable(state)); }); diff --git a/packages/react-components/react-table/src/components/DataGrid/index.ts b/packages/react-components/react-table/src/components/DataGrid/index.ts index f421b8aa7c5534..f876576160de74 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 a9ec5e97cb67b0..75ab5dbd14655d 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 d219ba79b52be6..12f54d4f992009 100644 --- a/packages/react-components/react-table/src/components/DataGridBody/DataGridBody.tsx +++ b/packages/react-components/react-table/src/components/DataGridBody/DataGridBody.tsx @@ -1,10 +1,10 @@ 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 { useCustomStyleHooks_unstable } from '@fluentui/react-shared-contexts'; +import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts'; /** * DataGridBody component @@ -15,8 +15,7 @@ export const DataGridBody: ForwardRefComponent & useDataGridBodyStyles_unstable(state); - const { useDataGridBodyStyles_unstable: useCustomStyles } = useCustomStyleHooks_unstable(); - useCustomStyles(state); + useCustomStyleHook_unstable('useDataGridBodyStyles_unstable')(state); return renderDataGridBody_unstable(state); }) as ForwardRefComponent & ((props: DataGridBodyProps) => JSX.Element); diff --git a/packages/react-components/react-table/src/components/DataGridBody/index.ts b/packages/react-components/react-table/src/components/DataGridBody/index.ts index 2cd323b85ed44b..70d2bbdad74936 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 b46f062ae745d0..fd5393204352d9 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 649a9736380bf4..cdb95d92b0924d 100644 --- a/packages/react-components/react-table/src/components/DataGridCell/DataGridCell.tsx +++ b/packages/react-components/react-table/src/components/DataGridCell/DataGridCell.tsx @@ -1,10 +1,10 @@ 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 { useCustomStyleHooks_unstable } from '@fluentui/react-shared-contexts'; +import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts'; /** * DataGridCell component @@ -14,8 +14,7 @@ export const DataGridCell: ForwardRefComponent = React.forwar useDataGridCellStyles_unstable(state); - const { useDataGridCellStyles_unstable: useCustomStyles } = useCustomStyleHooks_unstable(); - useCustomStyles(state); + useCustomStyleHook_unstable('useDataGridCellStyles_unstable')(state); return renderDataGridCell_unstable(state); }); diff --git a/packages/react-components/react-table/src/components/DataGridCell/index.ts b/packages/react-components/react-table/src/components/DataGridCell/index.ts index bb9c252d5b0f2e..acc2e821b8f74d 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 fcb43be6558663..3a0754b803c278 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 29c02f3e62b65e..d70b92843ecd6f 100644 --- a/packages/react-components/react-table/src/components/DataGridHeader/DataGridHeader.tsx +++ b/packages/react-components/react-table/src/components/DataGridHeader/DataGridHeader.tsx @@ -1,10 +1,10 @@ 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 { useCustomStyleHooks_unstable } from '@fluentui/react-shared-contexts'; +import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts'; /** * DataGridHeader component @@ -14,8 +14,7 @@ export const DataGridHeader: ForwardRefComponent = React.fo useDataGridHeaderStyles_unstable(state); - const { useDataGridHeaderStyles_unstable: useCustomStyles } = useCustomStyleHooks_unstable(); - useCustomStyles(state); + useCustomStyleHook_unstable('useDataGridHeaderStyles_unstable')(state); return renderDataGridHeader_unstable(state); }); diff --git a/packages/react-components/react-table/src/components/DataGridHeader/index.ts b/packages/react-components/react-table/src/components/DataGridHeader/index.ts index 477a72f22fc16a..4b2eca977eb04d 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 230b15e8dfee22..9041cbe07e46f2 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 b1c0bb6faaff87..15afdbc2fac352 100644 --- a/packages/react-components/react-table/src/components/DataGridHeaderCell/DataGridHeaderCell.tsx +++ b/packages/react-components/react-table/src/components/DataGridHeaderCell/DataGridHeaderCell.tsx @@ -1,10 +1,10 @@ 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 { useCustomStyleHooks_unstable } from '@fluentui/react-shared-contexts'; +import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts'; /** * DataGridHeaderCell component @@ -14,8 +14,7 @@ export const DataGridHeaderCell: ForwardRefComponent = useDataGridHeaderCellStyles_unstable(state); - const { useDataGridHeaderCellStyles_unstable: useCustomStyles } = useCustomStyleHooks_unstable(); - useCustomStyles(state); + useCustomStyleHook_unstable('useDataGridHeaderCellStyles_unstable')(state); return renderDataGridHeaderCell_unstable(state); }); diff --git a/packages/react-components/react-table/src/components/DataGridHeaderCell/index.ts b/packages/react-components/react-table/src/components/DataGridHeaderCell/index.ts index db9da53f26b38e..2a624c8e3bee3e 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 f5c0d1f9b6e7ec..0942aa206d04ff 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 2561aec9bb3c43..36bfd9647550b5 100644 --- a/packages/react-components/react-table/src/components/DataGridRow/DataGridRow.tsx +++ b/packages/react-components/react-table/src/components/DataGridRow/DataGridRow.tsx @@ -1,10 +1,10 @@ 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 { useCustomStyleHooks_unstable } from '@fluentui/react-shared-contexts'; +import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts'; /** * DataGridRow component @@ -15,8 +15,7 @@ export const DataGridRow: ForwardRefComponent & useDataGridRowStyles_unstable(state); - const { useDataGridRowStyles_unstable: useCustomStyles } = useCustomStyleHooks_unstable(); - useCustomStyles(state); + useCustomStyleHook_unstable('useDataGridRowStyles_unstable')(state); return renderDataGridRow_unstable(state); }) as ForwardRefComponent & ((props: DataGridRowProps) => JSX.Element); diff --git a/packages/react-components/react-table/src/components/DataGridRow/index.ts b/packages/react-components/react-table/src/components/DataGridRow/index.ts index 7f77535e67fcb4..a1f4708efd51b8 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 6fd74d486148ad..a2c73909d9c9e9 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 3d6051ac6b994b..40e22740df127e 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 cb11ce2204168f..eaeca2e3282775 100644 --- a/packages/react-components/react-table/src/components/DataGridSelectionCell/DataGridSelectionCell.tsx +++ b/packages/react-components/react-table/src/components/DataGridSelectionCell/DataGridSelectionCell.tsx @@ -1,10 +1,10 @@ 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 { useCustomStyleHooks_unstable } from '@fluentui/react-shared-contexts'; +import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts'; /** * DataGridSelectionCell component @@ -14,8 +14,7 @@ export const DataGridSelectionCell: ForwardRefComponent = { 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 f4bbdc2f723d1f..351473003d80fa 100644 --- a/packages/react-components/react-table/src/components/Table/Table.tsx +++ b/packages/react-components/react-table/src/components/Table/Table.tsx @@ -1,11 +1,11 @@ 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'; -import { useCustomStyleHooks_unstable } from '@fluentui/react-shared-contexts'; +import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts'; /** * Table component @@ -15,8 +15,7 @@ export const Table: ForwardRefComponent = React.forwardRef((props, r useTableStyles_unstable(state); - const { useTableStyles_unstable: useCustomStyles } = useCustomStyleHooks_unstable(); - useCustomStyles(state); + useCustomStyleHook_unstable('useTableStyles_unstable')(state); return renderTable_unstable(state, useTableContextValues_unstable(state)); }); diff --git a/packages/react-components/react-table/src/components/Table/index.ts b/packages/react-components/react-table/src/components/Table/index.ts index bc41c5a7cc597d..62c03067863ef7 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 125fa17c48545f..3083e1c1afaf2b 100644 --- a/packages/react-components/react-table/src/components/TableBody/TableBody.tsx +++ b/packages/react-components/react-table/src/components/TableBody/TableBody.tsx @@ -1,10 +1,10 @@ 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 { useCustomStyleHooks_unstable } from '@fluentui/react-shared-contexts'; +import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts'; /** * TableBody component @@ -14,8 +14,7 @@ export const TableBody: ForwardRefComponent = React.forwardRef(( useTableBodyStyles_unstable(state); - const { useTableBodyStyles_unstable: useCustomStyles } = useCustomStyleHooks_unstable(); - useCustomStyles(state); + useCustomStyleHook_unstable('useTableBodyStyles_unstable')(state); return renderTableBody_unstable(state); }); diff --git a/packages/react-components/react-table/src/components/TableBody/index.ts b/packages/react-components/react-table/src/components/TableBody/index.ts index 8c4dd6cd1a56c3..6cba4f6068996c 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 df8b4e87d0ad79..96128ee5211b30 100644 --- a/packages/react-components/react-table/src/components/TableCell/TableCell.tsx +++ b/packages/react-components/react-table/src/components/TableCell/TableCell.tsx @@ -1,10 +1,10 @@ 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 { useCustomStyleHooks_unstable } from '@fluentui/react-shared-contexts'; +import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts'; /** * TableCell component @@ -14,8 +14,7 @@ export const TableCell: ForwardRefComponent = React.forwardRef(( useTableCellStyles_unstable(state); - const { useTableCellStyles_unstable: useCustomStyles } = useCustomStyleHooks_unstable(); - useCustomStyles(state); + useCustomStyleHook_unstable('useTableCellStyles_unstable')(state); return renderTableCell_unstable(state); }); diff --git a/packages/react-components/react-table/src/components/TableCell/index.ts b/packages/react-components/react-table/src/components/TableCell/index.ts index f8aff12d06ba7d..b139f3158cae77 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 eef2a743d330d3..61a0e575f70901 100644 --- a/packages/react-components/react-table/src/components/TableCellActions/TableCellActions.tsx +++ b/packages/react-components/react-table/src/components/TableCellActions/TableCellActions.tsx @@ -1,10 +1,10 @@ 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 { useCustomStyleHooks_unstable } from '@fluentui/react-shared-contexts'; +import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts'; /** * TableCellActions component @@ -14,8 +14,7 @@ export const TableCellActions: ForwardRefComponent = Reac useTableCellActionsStyles_unstable(state); - const { useTableCellActionsStyles_unstable: useCustomStyles } = useCustomStyleHooks_unstable(); - useCustomStyles(state); + useCustomStyleHook_unstable('useTableCellActionsStyles_unstable')(state); return renderTableCellActions_unstable(state); }); diff --git a/packages/react-components/react-table/src/components/TableCellActions/index.ts b/packages/react-components/react-table/src/components/TableCellActions/index.ts index 888f8d60a4dbb1..e804786b725dbf 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 2064b20bc40bb1..055d77820fdef3 100644 --- a/packages/react-components/react-table/src/components/TableCellLayout/TableCellLayout.tsx +++ b/packages/react-components/react-table/src/components/TableCellLayout/TableCellLayout.tsx @@ -1,11 +1,11 @@ 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'; -import { useCustomStyleHooks_unstable } from '@fluentui/react-shared-contexts'; +import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts'; /** * TableCellLayout component @@ -15,8 +15,7 @@ export const TableCellLayout: ForwardRefComponent = React. useTableCellLayoutStyles_unstable(state); - const { useTableCellLayoutStyles_unstable: useCustomStyles } = useCustomStyleHooks_unstable(); - useCustomStyles(state); + useCustomStyleHook_unstable('useTableCellLayoutStyles_unstable')(state); return renderTableCellLayout_unstable(state, useTableCellLayoutContextValues_unstable(state)); }); diff --git a/packages/react-components/react-table/src/components/TableCellLayout/index.ts b/packages/react-components/react-table/src/components/TableCellLayout/index.ts index c76976f4a904e3..ed50c859d49c17 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 a6920f9f15ca6c..a4b17c9c5649db 100644 --- a/packages/react-components/react-table/src/components/TableHeader/TableHeader.tsx +++ b/packages/react-components/react-table/src/components/TableHeader/TableHeader.tsx @@ -1,10 +1,10 @@ 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 { useCustomStyleHooks_unstable } from '@fluentui/react-shared-contexts'; +import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts'; /** * TableHeader component @@ -14,8 +14,7 @@ export const TableHeader: ForwardRefComponent = React.forwardR useTableHeaderStyles_unstable(state); - const { useTableHeaderStyles_unstable: useCustomStyles } = useCustomStyleHooks_unstable(); - useCustomStyles(state); + useCustomStyleHook_unstable('useTableHeaderStyles_unstable')(state); return renderTableHeader_unstable(state); }); diff --git a/packages/react-components/react-table/src/components/TableHeader/index.ts b/packages/react-components/react-table/src/components/TableHeader/index.ts index 35201a649691c4..5833e1a2600343 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 c89e413956448f..3fe52ae6e39028 100644 --- a/packages/react-components/react-table/src/components/TableHeaderCell/TableHeaderCell.tsx +++ b/packages/react-components/react-table/src/components/TableHeaderCell/TableHeaderCell.tsx @@ -1,10 +1,10 @@ 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 { useCustomStyleHooks_unstable } from '@fluentui/react-shared-contexts'; +import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts'; /** * TableHeaderCell component @@ -14,8 +14,7 @@ export const TableHeaderCell: ForwardRefComponent = React. useTableHeaderCellStyles_unstable(state); - const { useTableHeaderCellStyles_unstable: useCustomStyles } = useCustomStyleHooks_unstable(); - useCustomStyles(state); + useCustomStyleHook_unstable('useTableHeaderCellStyles_unstable')(state); return renderTableHeaderCell_unstable(state); }); diff --git a/packages/react-components/react-table/src/components/TableHeaderCell/index.ts b/packages/react-components/react-table/src/components/TableHeaderCell/index.ts index 05fc1673fa6eab..f3c47af321ee17 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 67863b2566f585..9e21f4d72d5330 100644 --- a/packages/react-components/react-table/src/components/TableResizeHandle/TableResizeHandle.tsx +++ b/packages/react-components/react-table/src/components/TableResizeHandle/TableResizeHandle.tsx @@ -1,10 +1,10 @@ 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 { useCustomStyleHooks_unstable } from '@fluentui/react-shared-contexts'; +import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts'; /** * TableResizeHandle component - TODO: add more docs @@ -14,8 +14,7 @@ export const TableResizeHandle: ForwardRefComponent = Re useTableResizeHandleStyles_unstable(state); - const { useTableResizeHandleStyles_unstable: useCustomStyles } = useCustomStyleHooks_unstable(); - useCustomStyles(state); + useCustomStyleHook_unstable('useTableResizeHandleStyles_unstable')(state); return renderTableResizeHandle_unstable(state); }); diff --git a/packages/react-components/react-table/src/components/TableResizeHandle/index.ts b/packages/react-components/react-table/src/components/TableResizeHandle/index.ts index 412c6ccf8fc7d5..3d1ea5ea6a7fb9 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 1322f826ea43b0..ef865ec244e947 100644 --- a/packages/react-components/react-table/src/components/TableRow/TableRow.tsx +++ b/packages/react-components/react-table/src/components/TableRow/TableRow.tsx @@ -1,10 +1,10 @@ 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 { useCustomStyleHooks_unstable } from '@fluentui/react-shared-contexts'; +import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts'; /** * TableRow component @@ -14,8 +14,7 @@ export const TableRow: ForwardRefComponent = React.forwardRef((pr useTableRowStyles_unstable(state); - const { useTableRowStyles_unstable: useCustomStyles } = useCustomStyleHooks_unstable(); - useCustomStyles(state); + useCustomStyleHook_unstable('useTableRowStyles_unstable')(state); return renderTableRow_unstable(state); }); diff --git a/packages/react-components/react-table/src/components/TableRow/index.ts b/packages/react-components/react-table/src/components/TableRow/index.ts index 04ac572ad59e7f..2c11c5c63deea1 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 f81165c875e136..5d0428f07fcc6e 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 37bde18504ae1b..8e588344607c06 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 18f86766f4328d..0bee270a7beae3 100644 --- a/packages/react-components/react-table/src/components/TableSelectionCell/TableSelectionCell.tsx +++ b/packages/react-components/react-table/src/components/TableSelectionCell/TableSelectionCell.tsx @@ -1,10 +1,10 @@ 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 { useCustomStyleHooks_unstable } from '@fluentui/react-shared-contexts'; +import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts'; /** * TableSelectionCell component @@ -14,8 +14,7 @@ export const TableSelectionCell: ForwardRefComponent = useTableSelectionCellStyles_unstable(state); - const { useTableSelectionCellStyles_unstable: useCustomStyles } = useCustomStyleHooks_unstable(); - useCustomStyles(state); + useCustomStyleHook_unstable('useTableSelectionCellStyles_unstable')(state); return renderTableSelectionCell_unstable(state); }); diff --git a/packages/react-components/react-table/src/components/TableSelectionCell/index.ts b/packages/react-components/react-table/src/components/TableSelectionCell/index.ts index 25e99a893b9463..d5fabee4714b5d 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 77f88408cbd839..a3d988f29a1728 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/.npmignore b/packages/react-components/react-tabs/.npmignore index f7ce568a6dbf7c..26904cdfffc9bd 100644 --- a/packages/react-components/react-tabs/.npmignore +++ b/packages/react-components/react-tabs/.npmignore @@ -28,3 +28,9 @@ __tests__ .eslint* .git* .prettierignore + +# exclude gitignore patterns explicitly +!lib +!lib-commonjs +!lib-amd +!dist/*.d.ts diff --git a/packages/react-components/react-tabs/CHANGELOG.json b/packages/react-components/react-tabs/CHANGELOG.json index c869a7fc93e584..c4d53093478199 100644 --- a/packages/react-components/react-tabs/CHANGELOG.json +++ b/packages/react-components/react-tabs/CHANGELOG.json @@ -1,6 +1,27 @@ { "name": "@fluentui/react-tabs", "entries": [ + { + "date": "Mon, 24 Apr 2023 08:12:43 GMT", + "tag": "@fluentui/react-tabs_v9.3.11", + "version": "9.3.11", + "comments": { + "patch": [ + { + "author": "bernardo.sunderhus@gmail.com", + "package": "@fluentui/react-tabs", + "commit": "fe299ee315a83fdafe7fb3e3cbd2075cc19867e7", + "comment": "chore: adopts custom JSX pragma" + }, + { + "author": "beachball", + "package": "@fluentui/react-tabs", + "comment": "Bump @fluentui/react-jsx-runtime to v9.0.0-alpha.2", + "commit": "505433ac64f144c9cca456097413d6af4582e5ee" + } + ] + } + }, { "date": "Mon, 17 Apr 2023 17:54:02 GMT", "tag": "@fluentui/react-tabs_v9.3.10", diff --git a/packages/react-components/react-tabs/CHANGELOG.md b/packages/react-components/react-tabs/CHANGELOG.md index 962952a829ba7d..1765d810ed09f6 100644 --- a/packages/react-components/react-tabs/CHANGELOG.md +++ b/packages/react-components/react-tabs/CHANGELOG.md @@ -1,9 +1,19 @@ # Change Log - @fluentui/react-tabs -This log was last generated on Mon, 17 Apr 2023 17:54:02 GMT and should not be manually modified. +This log was last generated on Mon, 24 Apr 2023 08:12:43 GMT and should not be manually modified. +## [9.3.11](https://github.com/microsoft/fluentui/tree/@fluentui/react-tabs_v9.3.11) + +Mon, 24 Apr 2023 08:12:43 GMT +[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tabs_v9.3.10..@fluentui/react-tabs_v9.3.11) + +### Patches + +- chore: adopts custom JSX pragma ([PR #27640](https://github.com/microsoft/fluentui/pull/27640) by bernardo.sunderhus@gmail.com) +- Bump @fluentui/react-jsx-runtime to v9.0.0-alpha.2 ([commit](https://github.com/microsoft/fluentui/commit/505433ac64f144c9cca456097413d6af4582e5ee) by beachball) + ## [9.3.10](https://github.com/microsoft/fluentui/tree/@fluentui/react-tabs_v9.3.10) Mon, 17 Apr 2023 17:54:02 GMT diff --git a/packages/react-components/react-tabs/jest.config.js b/packages/react-components/react-tabs/jest.config.js index 82f3e969dc35f7..2ede66dbfa5c18 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/package.json b/packages/react-components/react-tabs/package.json index 609865be66d04a..18b6ba0c396fe4 100644 --- a/packages/react-components/react-tabs/package.json +++ b/packages/react-components/react-tabs/package.json @@ -1,6 +1,6 @@ { "name": "@fluentui/react-tabs", - "version": "9.3.10", + "version": "9.3.11", "description": "Fluent UI React tabs components", "main": "lib-commonjs/index.js", "module": "lib/index.js", @@ -32,6 +32,7 @@ }, "dependencies": { "@fluentui/react-context-selector": "^9.1.18", + "@fluentui/react-jsx-runtime": "9.0.0-alpha.2", "@fluentui/react-shared-contexts": "^9.3.3", "@fluentui/react-tabster": "^9.6.5", "@fluentui/react-theme": "^9.1.7", diff --git a/packages/react-components/react-tabs/src/components/Tab/Tab.tsx b/packages/react-components/react-tabs/src/components/Tab/Tab.tsx index 764b4f87decbd7..a193d1c82147da 100644 --- a/packages/react-components/react-tabs/src/components/Tab/Tab.tsx +++ b/packages/react-components/react-tabs/src/components/Tab/Tab.tsx @@ -4,7 +4,7 @@ import { renderTab_unstable } from './renderTab'; import { useTabStyles_unstable } from './useTabStyles'; import type { TabProps } from './Tab.types'; import type { ForwardRefComponent } from '@fluentui/react-utilities'; -import { useCustomStyleHooks_unstable } from '@fluentui/react-shared-contexts'; +import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts'; /** * A tab provides a selectable item in a tab list. @@ -14,8 +14,7 @@ export const Tab: ForwardRefComponent = React.forwardRef((props, ref) useTabStyles_unstable(state); - const { useTabStyles_unstable: useCustomStyles } = useCustomStyleHooks_unstable(); - useCustomStyles(state); + useCustomStyleHook_unstable('useTabStyles_unstable')(state); return renderTab_unstable(state); }); diff --git a/packages/react-components/react-tabs/src/components/Tab/renderTab.tsx b/packages/react-components/react-tabs/src/components/Tab/renderTab.tsx index 3d8b88ad1f0c42..69b8fb66dd273d 100644 --- a/packages/react-components/react-tabs/src/components/Tab/renderTab.tsx +++ b/packages/react-components/react-tabs/src/components/Tab/renderTab.tsx @@ -1,12 +1,15 @@ -import * as React from 'react'; -import { getSlots } from '@fluentui/react-utilities'; +/** @jsxRuntime classic */ +/** @jsx createElement */ + +import { createElement } from '@fluentui/react-jsx-runtime'; +import { getSlotsNext } from '@fluentui/react-utilities'; import type { TabState, TabSlots } from './Tab.types'; /** * Render the final JSX of Tab */ export const renderTab_unstable = (state: TabState) => { - const { slots, slotProps } = getSlots(state); + const { slots, slotProps } = getSlotsNext(state); return ( diff --git a/packages/react-components/react-tabs/src/components/TabList/TabList.tsx b/packages/react-components/react-tabs/src/components/TabList/TabList.tsx index 2c938dbb72c498..bd5ce0ae033312 100644 --- a/packages/react-components/react-tabs/src/components/TabList/TabList.tsx +++ b/packages/react-components/react-tabs/src/components/TabList/TabList.tsx @@ -5,7 +5,7 @@ import { useTabListStyles_unstable } from './useTabListStyles'; import type { TabListProps } from './TabList.types'; import type { ForwardRefComponent } from '@fluentui/react-utilities'; import { useTabListContextValues_unstable } from './useTabListContextValues'; -import { useCustomStyleHooks_unstable } from '@fluentui/react-shared-contexts'; +import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts'; /** * A tab list provides single selection from a set of tabs. @@ -16,8 +16,7 @@ export const TabList: ForwardRefComponent = React.forwardRef((prop useTabListStyles_unstable(state); - const { useTabListStyles_unstable: useCustomStyles } = useCustomStyleHooks_unstable(); - useCustomStyles(state); + useCustomStyleHook_unstable('useTabListStyles_unstable')(state); return renderTabList_unstable(state, contextValues); }); diff --git a/packages/react-components/react-tabs/src/components/TabList/renderTabList.tsx b/packages/react-components/react-tabs/src/components/TabList/renderTabList.tsx index ee1358846d6cee..876814d147b188 100644 --- a/packages/react-components/react-tabs/src/components/TabList/renderTabList.tsx +++ b/packages/react-components/react-tabs/src/components/TabList/renderTabList.tsx @@ -1,5 +1,8 @@ -import * as React from 'react'; -import { getSlots } from '@fluentui/react-utilities'; +/** @jsxRuntime classic */ +/** @jsx createElement */ + +import { createElement } from '@fluentui/react-jsx-runtime'; +import { getSlotsNext } from '@fluentui/react-utilities'; import type { TabListState, TabListSlots, TabListContextValues } from './TabList.types'; import { TabListProvider } from './TabListContext'; @@ -7,7 +10,7 @@ import { TabListProvider } from './TabListContext'; * Render the final JSX of TabList */ export const renderTabList_unstable = (state: TabListState, contextValues: TabListContextValues) => { - const { slots, slotProps } = getSlots(state); + const { slots, slotProps } = getSlotsNext(state); return ( diff --git a/packages/react-components/react-tabs/src/testing/isConformant.ts b/packages/react-components/react-tabs/src/testing/isConformant.ts index 77f88408cbd839..a3d988f29a1728 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/.npmignore b/packages/react-components/react-tabster/.npmignore index f7ce568a6dbf7c..26904cdfffc9bd 100644 --- a/packages/react-components/react-tabster/.npmignore +++ b/packages/react-components/react-tabster/.npmignore @@ -28,3 +28,9 @@ __tests__ .eslint* .git* .prettierignore + +# exclude gitignore patterns explicitly +!lib +!lib-commonjs +!lib-amd +!dist/*.d.ts diff --git a/packages/react-components/react-tabster/jest.config.js b/packages/react-components/react-tabster/jest.config.js index 3459449cccb603..5563b6a59af635 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/.npmignore b/packages/react-components/react-tags/.npmignore index f7ce568a6dbf7c..26904cdfffc9bd 100644 --- a/packages/react-components/react-tags/.npmignore +++ b/packages/react-components/react-tags/.npmignore @@ -28,3 +28,9 @@ __tests__ .eslint* .git* .prettierignore + +# exclude gitignore patterns explicitly +!lib +!lib-commonjs +!lib-amd +!dist/*.d.ts diff --git a/packages/react-components/react-tags/etc/react-tags.api.md b/packages/react-components/react-tags/etc/react-tags.api.md index a96f539e01bfc4..659e2b81f72266 100644 --- a/packages/react-components/react-tags/etc/react-tags.api.md +++ b/packages/react-components/react-tags/etc/react-tags.api.md @@ -4,6 +4,9 @@ ```ts +/// + +import { Avatar } from '@fluentui/react-avatar'; import type { ComponentProps } from '@fluentui/react-utilities'; import type { ComponentState } from '@fluentui/react-utilities'; import type { ForwardRefComponent } from '@fluentui/react-utilities'; @@ -27,29 +30,55 @@ export const TagButton: ForwardRefComponent; export const tagButtonClassNames: SlotClassNames; // @public -export type TagButtonProps = ComponentProps & {}; +export type TagButtonProps = ComponentProps & { + size?: 'extra-small' | 'small' | 'medium'; + shape?: 'rounded' | 'circular'; + appearance?: 'filled-darker' | 'filled-lighter' | 'tint' | 'outline'; + disabled?: boolean; + checked?: boolean; + dismissable?: boolean; +}; // @public (undocumented) export type TagButtonSlots = { - root: Slot<'div'>; + root: NonNullable>; + contentButton?: Slot<'button'>; + avatar?: Slot; + icon?: Slot<'span'>; + primaryText?: Slot<'span'>; + secondaryText?: Slot<'span'>; + dismissButton?: NonNullable>; }; // @public -export type TagButtonState = ComponentState; +export type TagButtonState = ComponentState & Required>; // @public (undocumented) export const tagClassNames: SlotClassNames; // @public -export type TagProps = ComponentProps & {}; +export type TagProps = ComponentProps & { + size?: 'extra-small' | 'small' | 'medium'; + shape?: 'rounded' | 'circular'; + appearance?: 'filled-darker' | 'filled-lighter' | 'tint' | 'outline'; + disabled?: boolean; + checked?: boolean; + dismissable?: boolean; +}; // @public (undocumented) export type TagSlots = { - root: Slot<'div'>; + root: NonNullable>; + content?: Slot<'span'>; + avatar?: Slot; + icon?: Slot<'span'>; + primaryText?: Slot<'span'>; + secondaryText?: Slot<'span'>; + dismissButton?: NonNullable>; }; // @public -export type TagState = ComponentState; +export type TagState = ComponentState & Required>; // @public export const useTag_unstable: (props: TagProps, ref: React_2.Ref) => TagState; diff --git a/packages/react-components/react-tags/jest.config.js b/packages/react-components/react-tags/jest.config.js index 9b6d68d2911106..4d18f3a220ad8b 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/package.json b/packages/react-components/react-tags/package.json index 92b53905d76300..6df62172ac1f7f 100644 --- a/packages/react-components/react-tags/package.json +++ b/packages/react-components/react-tags/package.json @@ -32,6 +32,9 @@ "@fluentui/scripts-tasks": "*" }, "dependencies": { + "@fluentui/react-avatar": "^9.4.10", + "@fluentui/react-icons": "^2.0.196", + "@fluentui/react-jsx-runtime": "9.0.0-alpha.2", "@fluentui/react-theme": "^9.1.7", "@fluentui/react-utilities": "^9.8.0", "@griffel/react": "^1.5.2", diff --git a/packages/react-components/react-tags/src/components/Tag/Tag.test.tsx b/packages/react-components/react-tags/src/components/Tag/Tag.test.tsx index 80af2199dba4ba..f883681c531f31 100644 --- a/packages/react-components/react-tags/src/components/Tag/Tag.test.tsx +++ b/packages/react-components/react-tags/src/components/Tag/Tag.test.tsx @@ -3,16 +3,27 @@ import { render } from '@testing-library/react'; import { Tag } from './Tag'; import { isConformant } from '../../testing/isConformant'; +const requiredProps = { + avatar: { + name: 'Katri Athokas', + }, + icon: 'i', + primaryText: 'Primary text', + secondaryText: 'Secondary text', + dismissable: true, +}; + describe('Tag', () => { isConformant({ Component: Tag, displayName: 'Tag', + requiredProps, }); // TODO add more tests here, and create visual regression tests in /apps/vr-tests it('renders a default state', () => { - const result = render(Default Tag); + const result = render(Default Tag); expect(result.container).toMatchSnapshot(); }); }); diff --git a/packages/react-components/react-tags/src/components/Tag/Tag.types.ts b/packages/react-components/react-tags/src/components/Tag/Tag.types.ts index 2bb2b4b3227976..8cffeea46be0d1 100644 --- a/packages/react-components/react-tags/src/components/Tag/Tag.types.ts +++ b/packages/react-components/react-tags/src/components/Tag/Tag.types.ts @@ -1,17 +1,30 @@ import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities'; +import { Avatar } from '@fluentui/react-avatar'; export type TagSlots = { - root: Slot<'div'>; + root: NonNullable>; + content?: Slot<'span'>; + avatar?: Slot; + icon?: Slot<'span'>; + primaryText?: Slot<'span'>; + secondaryText?: Slot<'span'>; + dismissButton?: NonNullable>; }; /** * Tag Props */ -export type TagProps = ComponentProps & {}; +export type TagProps = ComponentProps & { + size?: 'extra-small' | 'small' | 'medium'; + shape?: 'rounded' | 'circular'; + appearance?: 'filled-darker' | 'filled-lighter' | 'tint' | 'outline'; + disabled?: boolean; + checked?: boolean; + dismissable?: boolean; +}; /** * State used in rendering Tag */ -export type TagState = ComponentState; -// TODO: Remove semicolon from previous line, uncomment next line, and provide union of props to pick from TagProps. -// & Required> +export type TagState = ComponentState & + Required>; diff --git a/packages/react-components/react-tags/src/components/Tag/__snapshots__/Tag.test.tsx.snap b/packages/react-components/react-tags/src/components/Tag/__snapshots__/Tag.test.tsx.snap index f2701f46afe480..f66f95a0e95775 100644 --- a/packages/react-components/react-tags/src/components/Tag/__snapshots__/Tag.test.tsx.snap +++ b/packages/react-components/react-tags/src/components/Tag/__snapshots__/Tag.test.tsx.snap @@ -5,7 +5,57 @@ exports[`Tag renders a default state 1`] = `
- Default Tag + + + + KA + + + + i + + + Primary text + + + Secondary text + + +
`; diff --git a/packages/react-components/react-tags/src/components/Tag/renderTag.tsx b/packages/react-components/react-tags/src/components/Tag/renderTag.tsx index 07a4f9804be21b..ab3e1d6e61433b 100644 --- a/packages/react-components/react-tags/src/components/Tag/renderTag.tsx +++ b/packages/react-components/react-tags/src/components/Tag/renderTag.tsx @@ -1,13 +1,29 @@ -import * as React from 'react'; -import { getSlots } from '@fluentui/react-utilities'; +/** @jsxRuntime classic */ +/** @jsx createElement */ + +import { createElement } from '@fluentui/react-jsx-runtime'; + +import { getSlotsNext } from '@fluentui/react-utilities'; import type { TagState, TagSlots } from './Tag.types'; /** * Render the final JSX of Tag */ export const renderTag_unstable = (state: TagState) => { - const { slots, slotProps } = getSlots(state); + const { slots, slotProps } = getSlotsNext(state); // TODO Add additional slots in the appropriate place - return ; + return ( + + {slots.content && ( + + {slots.avatar && } + {slots.icon && } + {slots.primaryText && } + {slots.secondaryText && } + + )} + {slots.dismissButton && state.dismissable && } + + ); }; diff --git a/packages/react-components/react-tags/src/components/Tag/useTag.ts b/packages/react-components/react-tags/src/components/Tag/useTag.ts deleted file mode 100644 index 67bed0af432f4f..00000000000000 --- a/packages/react-components/react-tags/src/components/Tag/useTag.ts +++ /dev/null @@ -1,28 +0,0 @@ -import * as React from 'react'; -import { getNativeElementProps } from '@fluentui/react-utilities'; -import type { TagProps, TagState } from './Tag.types'; - -/** - * Create the state required to render Tag. - * - * The returned state can be modified with hooks such as useTagStyles_unstable, - * before being passed to renderTag_unstable. - * - * @param props - props from this instance of Tag - * @param ref - reference to root HTMLElement of Tag - */ -export const useTag_unstable = (props: TagProps, ref: React.Ref): TagState => { - return { - // TODO add appropriate props/defaults - components: { - // TODO add each slot's element type or component - root: 'div', - }, - // TODO add appropriate slots, for example: - // mySlot: resolveShorthand(props.mySlot), - root: getNativeElementProps('div', { - ref, - ...props, - }), - }; -}; diff --git a/packages/react-components/react-tags/src/components/Tag/useTag.tsx b/packages/react-components/react-tags/src/components/Tag/useTag.tsx new file mode 100644 index 00000000000000..0965e8455d9712 --- /dev/null +++ b/packages/react-components/react-tags/src/components/Tag/useTag.tsx @@ -0,0 +1,60 @@ +import * as React from 'react'; +import { getNativeElementProps, resolveShorthand } from '@fluentui/react-utilities'; +import { Dismiss16Filled } from '@fluentui/react-icons'; +import { Avatar } from '@fluentui/react-avatar'; +import type { TagProps, TagState } from './Tag.types'; + +/** + * Create the state required to render Tag. + * + * The returned state can be modified with hooks such as useTagStyles_unstable, + * before being passed to renderTag_unstable. + * + * @param props - props from this instance of Tag + * @param ref - reference to root HTMLElement of Tag + */ +export const useTag_unstable = (props: TagProps, ref: React.Ref): TagState => { + const { + checked = false, + disabled = false, + dismissable = false, + shape = 'rounded', + size = 'medium', + appearance = 'filled-lighter', + } = props; + + return { + components: { + root: 'div', + content: 'span', + avatar: Avatar, + icon: 'span', + primaryText: 'span', + secondaryText: 'span', + dismissButton: 'button', + }, + checked, + disabled, + dismissable, + shape, + size, + appearance, + root: getNativeElementProps('div', { + ref, + ...props, + }), + content: resolveShorthand(props.content, { required: true }), + avatar: resolveShorthand(props.avatar), + icon: resolveShorthand(props.icon), + primaryText: resolveShorthand(props.primaryText), + secondaryText: resolveShorthand(props.secondaryText), + dismissButton: resolveShorthand(props.dismissButton, { + required: true, + defaultProps: { + disabled, + type: 'button', + children: , + }, + }), + }; +}; diff --git a/packages/react-components/react-tags/src/components/Tag/useTagStyles.ts b/packages/react-components/react-tags/src/components/Tag/useTagStyles.ts index 6faa08d90aaf48..d388013ad1ebeb 100644 --- a/packages/react-components/react-tags/src/components/Tag/useTagStyles.ts +++ b/packages/react-components/react-tags/src/components/Tag/useTagStyles.ts @@ -1,11 +1,15 @@ -import { makeStyles, mergeClasses } from '@griffel/react'; +import { makeStyles, mergeClasses, shorthands } from '@griffel/react'; import type { TagSlots, TagState } from './Tag.types'; import type { SlotClassNames } from '@fluentui/react-utilities'; export const tagClassNames: SlotClassNames = { root: 'fui-Tag', - // TODO: add class names for all slots on TagSlots. - // Should be of the form `: 'fui-Tag__` + content: 'fui-Tag__content', + avatar: 'fui-Tag__avatar', + icon: 'fui-Tag__icon', + primaryText: 'fui-Tag__primaryText', + secondaryText: 'fui-Tag__secondaryText', + dismissButton: 'fui-Tag__dismissButton', }; /** @@ -13,8 +17,30 @@ export const tagClassNames: SlotClassNames = { */ const useStyles = makeStyles({ root: { - // TODO Add default styles for the root element + display: 'inline-flex', }, + content: { + display: 'inline-grid', + gridTemplateColumns: 'auto 8px auto auto 8px auto', + gridTemplateRows: '1fr auto auto 1fr', + gridTemplateAreas: ` + "avatar . icon . ." + "avatar . icon primary ." + "avatar . icon secondary ." + "avatar . icon . ." + `, + }, + avatar: { + alignSelf: 'center', + ...shorthands.gridArea('avatar'), + }, + icon: { + alignSelf: 'center', + ...shorthands.gridArea('icon'), + }, + primaryText: { ...shorthands.gridArea('primary') }, + secondaryText: { ...shorthands.gridArea('secondary') }, + dismissButton: {}, // TODO add additional classes for different states and/or slots }); @@ -25,9 +51,36 @@ const useStyles = makeStyles({ export const useTagStyles_unstable = (state: TagState): TagState => { const styles = useStyles(); state.root.className = mergeClasses(tagClassNames.root, styles.root, state.root.className); - - // TODO Add class names to slots, for example: - // state.mySlot.className = mergeClasses(styles.mySlot, state.mySlot.className); + if (state.content) { + state.content.className = mergeClasses(tagClassNames.content, styles.content, state.content.className); + } + if (state.avatar) { + state.avatar.className = mergeClasses(tagClassNames.avatar, styles.avatar, state.avatar.className); + } + if (state.icon) { + state.icon.className = mergeClasses(tagClassNames.icon, styles.icon, state.icon.className); + } + if (state.primaryText) { + state.primaryText.className = mergeClasses( + tagClassNames.primaryText, + styles.primaryText, + state.primaryText.className, + ); + } + if (state.secondaryText) { + state.secondaryText.className = mergeClasses( + tagClassNames.secondaryText, + styles.secondaryText, + state.secondaryText.className, + ); + } + if (state.dismissButton) { + state.dismissButton.className = mergeClasses( + tagClassNames.dismissButton, + styles.dismissButton, + state.dismissButton.className, + ); + } return state; }; diff --git a/packages/react-components/react-tags/src/components/TagButton/TagButton.test.tsx b/packages/react-components/react-tags/src/components/TagButton/TagButton.test.tsx index a5257d7328b180..00568aabcc30d1 100644 --- a/packages/react-components/react-tags/src/components/TagButton/TagButton.test.tsx +++ b/packages/react-components/react-tags/src/components/TagButton/TagButton.test.tsx @@ -3,16 +3,27 @@ import { render } from '@testing-library/react'; import { TagButton } from './TagButton'; import { isConformant } from '../../testing/isConformant'; +const requiredProps = { + avatar: { + name: 'Katri Athokas', + }, + icon: 'i', + primaryText: 'Primary text', + secondaryText: 'Secondary text', + dismissable: true, +}; + describe('TagButton', () => { isConformant({ Component: TagButton, displayName: 'TagButton', + requiredProps, }); // TODO add more tests here, and create visual regression tests in /apps/vr-tests it('renders a default state', () => { - const result = render(Default TagButton); + const result = render(Default TagButton); expect(result.container).toMatchSnapshot(); }); }); diff --git a/packages/react-components/react-tags/src/components/TagButton/TagButton.types.ts b/packages/react-components/react-tags/src/components/TagButton/TagButton.types.ts index d8590ba8b3d3b4..807800361a382e 100644 --- a/packages/react-components/react-tags/src/components/TagButton/TagButton.types.ts +++ b/packages/react-components/react-tags/src/components/TagButton/TagButton.types.ts @@ -1,17 +1,30 @@ import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities'; +import { Avatar } from '@fluentui/react-avatar'; export type TagButtonSlots = { - root: Slot<'div'>; + root: NonNullable>; + contentButton?: Slot<'button'>; + avatar?: Slot; + icon?: Slot<'span'>; + primaryText?: Slot<'span'>; + secondaryText?: Slot<'span'>; + dismissButton?: NonNullable>; }; /** * TagButton Props */ -export type TagButtonProps = ComponentProps & {}; +export type TagButtonProps = ComponentProps & { + size?: 'extra-small' | 'small' | 'medium'; + shape?: 'rounded' | 'circular'; + appearance?: 'filled-darker' | 'filled-lighter' | 'tint' | 'outline'; + disabled?: boolean; + checked?: boolean; + dismissable?: boolean; +}; /** * State used in rendering TagButton */ -export type TagButtonState = ComponentState; -// TODO: Remove semicolon from previous line, uncomment next line, and provide union of props to pick from TagButtonProps. -// & Required> +export type TagButtonState = ComponentState & + Required>; diff --git a/packages/react-components/react-tags/src/components/TagButton/__snapshots__/TagButton.test.tsx.snap b/packages/react-components/react-tags/src/components/TagButton/__snapshots__/TagButton.test.tsx.snap index 10f50a682bcb66..ad849b8d3f3003 100644 --- a/packages/react-components/react-tags/src/components/TagButton/__snapshots__/TagButton.test.tsx.snap +++ b/packages/react-components/react-tags/src/components/TagButton/__snapshots__/TagButton.test.tsx.snap @@ -5,7 +5,57 @@ exports[`TagButton renders a default state 1`] = `
- Default TagButton + +
`; diff --git a/packages/react-components/react-tags/src/components/TagButton/renderTagButton.tsx b/packages/react-components/react-tags/src/components/TagButton/renderTagButton.tsx index b96dbec44bf5bb..17836bf23f9c6d 100644 --- a/packages/react-components/react-tags/src/components/TagButton/renderTagButton.tsx +++ b/packages/react-components/react-tags/src/components/TagButton/renderTagButton.tsx @@ -1,13 +1,29 @@ -import * as React from 'react'; -import { getSlots } from '@fluentui/react-utilities'; +/** @jsxRuntime classic */ +/** @jsx createElement */ + +import { createElement } from '@fluentui/react-jsx-runtime'; + +import { getSlotsNext } from '@fluentui/react-utilities'; import type { TagButtonState, TagButtonSlots } from './TagButton.types'; /** * Render the final JSX of TagButton */ export const renderTagButton_unstable = (state: TagButtonState) => { - const { slots, slotProps } = getSlots(state); + const { slots, slotProps } = getSlotsNext(state); // TODO Add additional slots in the appropriate place - return ; + return ( + + {slots.contentButton && ( + + {slots.avatar && } + {slots.icon && } + {slots.primaryText && } + {slots.secondaryText && } + + )} + {slots.dismissButton && state.dismissable && } + + ); }; diff --git a/packages/react-components/react-tags/src/components/TagButton/useTagButton.ts b/packages/react-components/react-tags/src/components/TagButton/useTagButton.ts deleted file mode 100644 index 912c9a85cc99f1..00000000000000 --- a/packages/react-components/react-tags/src/components/TagButton/useTagButton.ts +++ /dev/null @@ -1,28 +0,0 @@ -import * as React from 'react'; -import { getNativeElementProps } from '@fluentui/react-utilities'; -import type { TagButtonProps, TagButtonState } from './TagButton.types'; - -/** - * Create the state required to render TagButton. - * - * The returned state can be modified with hooks such as useTagButtonStyles_unstable, - * before being passed to renderTagButton_unstable. - * - * @param props - props from this instance of TagButton - * @param ref - reference to root HTMLElement of TagButton - */ -export const useTagButton_unstable = (props: TagButtonProps, ref: React.Ref): TagButtonState => { - return { - // TODO add appropriate props/defaults - components: { - // TODO add each slot's element type or component - root: 'div', - }, - // TODO add appropriate slots, for example: - // mySlot: resolveShorthand(props.mySlot), - root: getNativeElementProps('div', { - ref, - ...props, - }), - }; -}; diff --git a/packages/react-components/react-tags/src/components/TagButton/useTagButton.tsx b/packages/react-components/react-tags/src/components/TagButton/useTagButton.tsx new file mode 100644 index 00000000000000..5a359ada2eec39 --- /dev/null +++ b/packages/react-components/react-tags/src/components/TagButton/useTagButton.tsx @@ -0,0 +1,60 @@ +import * as React from 'react'; +import { getNativeElementProps, resolveShorthand } from '@fluentui/react-utilities'; +import type { TagButtonProps, TagButtonState } from './TagButton.types'; +import { Dismiss16Filled } from '@fluentui/react-icons'; +import { Avatar } from '@fluentui/react-avatar'; + +/** + * Create the state required to render TagButton. + * + * The returned state can be modified with hooks such as useTagButtonStyles_unstable, + * before being passed to renderTagButton_unstable. + * + * @param props - props from this instance of TagButton + * @param ref - reference to root HTMLElement of TagButton + */ +export const useTagButton_unstable = (props: TagButtonProps, ref: React.Ref): TagButtonState => { + const { + checked = false, + disabled = false, + dismissable = false, + shape = 'rounded', + size = 'medium', + appearance = 'filled-lighter', + } = props; + + return { + components: { + root: 'div', + contentButton: 'button', + avatar: Avatar, + icon: 'span', + primaryText: 'span', + secondaryText: 'span', + dismissButton: 'button', + }, + checked, + disabled, + dismissable, + shape, + size, + appearance, + root: getNativeElementProps('div', { + ref, + ...props, + }), + contentButton: resolveShorthand(props.contentButton, { required: true }), + avatar: resolveShorthand(props.avatar), + icon: resolveShorthand(props.icon), + primaryText: resolveShorthand(props.primaryText), + secondaryText: resolveShorthand(props.secondaryText), + dismissButton: resolveShorthand(props.dismissButton, { + required: true, + defaultProps: { + disabled, + type: 'button', + children: , + }, + }), + }; +}; diff --git a/packages/react-components/react-tags/src/components/TagButton/useTagButtonStyles.ts b/packages/react-components/react-tags/src/components/TagButton/useTagButtonStyles.ts index 64364e62d1d3c8..c03ad488ae53f5 100644 --- a/packages/react-components/react-tags/src/components/TagButton/useTagButtonStyles.ts +++ b/packages/react-components/react-tags/src/components/TagButton/useTagButtonStyles.ts @@ -1,11 +1,15 @@ -import { makeStyles, mergeClasses } from '@griffel/react'; +import { makeStyles, mergeClasses, shorthands } from '@griffel/react'; import type { TagButtonSlots, TagButtonState } from './TagButton.types'; import type { SlotClassNames } from '@fluentui/react-utilities'; export const tagButtonClassNames: SlotClassNames = { root: 'fui-TagButton', - // TODO: add class names for all slots on TagButtonSlots. - // Should be of the form `: 'fui-TagButton__` + contentButton: 'fui-TagButton__contentButton', + avatar: 'fui-TagButton__avatar', + icon: 'fui-TagButton__icon', + primaryText: 'fui-TagButton__primaryText', + secondaryText: 'fui-TagButton__secondaryText', + dismissButton: 'fui-TagButton__dismissButton', }; /** @@ -13,8 +17,30 @@ export const tagButtonClassNames: SlotClassNames = { */ const useStyles = makeStyles({ root: { - // TODO Add default styles for the root element + display: 'inline-flex', }, + contentButton: { + display: 'inline-grid', + gridTemplateColumns: 'auto 8px auto auto 8px auto', + gridTemplateRows: '1fr auto auto 1fr', + gridTemplateAreas: ` + "avatar . icon . ." + "avatar . icon primary ." + "avatar . icon secondary ." + "avatar . icon . ." + `, + }, + avatar: { + alignSelf: 'center', + ...shorthands.gridArea('avatar'), + }, + icon: { + alignSelf: 'center', + ...shorthands.gridArea('icon'), + }, + primaryText: { ...shorthands.gridArea('primary') }, + secondaryText: { ...shorthands.gridArea('secondary') }, + dismissButton: {}, // TODO add additional classes for different states and/or slots }); @@ -25,9 +51,40 @@ const useStyles = makeStyles({ export const useTagButtonStyles_unstable = (state: TagButtonState): TagButtonState => { const styles = useStyles(); state.root.className = mergeClasses(tagButtonClassNames.root, styles.root, state.root.className); - - // TODO Add class names to slots, for example: - // state.mySlot.className = mergeClasses(styles.mySlot, state.mySlot.className); + if (state.contentButton) { + state.contentButton.className = mergeClasses( + tagButtonClassNames.contentButton, + styles.contentButton, + state.contentButton.className, + ); + } + if (state.avatar) { + state.avatar.className = mergeClasses(tagButtonClassNames.avatar, styles.avatar, state.avatar.className); + } + if (state.icon) { + state.icon.className = mergeClasses(tagButtonClassNames.icon, styles.icon, state.icon.className); + } + if (state.primaryText) { + state.primaryText.className = mergeClasses( + tagButtonClassNames.primaryText, + styles.primaryText, + state.primaryText.className, + ); + } + if (state.secondaryText) { + state.secondaryText.className = mergeClasses( + tagButtonClassNames.secondaryText, + styles.secondaryText, + state.secondaryText.className, + ); + } + if (state.dismissButton) { + state.dismissButton.className = mergeClasses( + tagButtonClassNames.dismissButton, + styles.dismissButton, + state.dismissButton.className, + ); + } return state; }; diff --git a/packages/react-components/react-tags/src/testing/isConformant.ts b/packages/react-components/react-tags/src/testing/isConformant.ts index 77f88408cbd839..a3d988f29a1728 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-tags/stories/Tag/TagDefault.stories.tsx b/packages/react-components/react-tags/stories/Tag/TagDefault.stories.tsx index 342622eceed82b..c6639a6746769a 100644 --- a/packages/react-components/react-tags/stories/Tag/TagDefault.stories.tsx +++ b/packages/react-components/react-tags/stories/Tag/TagDefault.stories.tsx @@ -1,4 +1,20 @@ import * as React from 'react'; import { Tag, TagProps } from '@fluentui/react-tags'; +import { Calendar3Day28Regular } from '@fluentui/react-icons'; -export const Default = (props: Partial) => ; +export const Default = (props: Partial) => ( + } + primaryText="Primary text" + secondaryText="Secondary text" + dismissable={true} + {...props} + /> +); diff --git a/packages/react-components/react-tags/stories/TagButton/TagButtonDefault.stories.tsx b/packages/react-components/react-tags/stories/TagButton/TagButtonDefault.stories.tsx index 6956d82a32f358..08c2b41a875738 100644 --- a/packages/react-components/react-tags/stories/TagButton/TagButtonDefault.stories.tsx +++ b/packages/react-components/react-tags/stories/TagButton/TagButtonDefault.stories.tsx @@ -1,4 +1,20 @@ import * as React from 'react'; import { TagButton, TagButtonProps } from '@fluentui/react-tags'; +import { Calendar3Day28Regular } from '@fluentui/react-icons'; -export const Default = (props: Partial) => ; +export const Default = (props: Partial) => ( + } + primaryText="Primary text" + secondaryText="Secondary text" + dismissable={true} + {...props} + /> +); diff --git a/packages/react-components/react-text/.npmignore b/packages/react-components/react-text/.npmignore index f7ce568a6dbf7c..26904cdfffc9bd 100644 --- a/packages/react-components/react-text/.npmignore +++ b/packages/react-components/react-text/.npmignore @@ -28,3 +28,9 @@ __tests__ .eslint* .git* .prettierignore + +# exclude gitignore patterns explicitly +!lib +!lib-commonjs +!lib-amd +!dist/*.d.ts diff --git a/packages/react-components/react-text/CHANGELOG.json b/packages/react-components/react-text/CHANGELOG.json index 29295a3d7c4a32..e38b17ecd674e4 100644 --- a/packages/react-components/react-text/CHANGELOG.json +++ b/packages/react-components/react-text/CHANGELOG.json @@ -1,6 +1,27 @@ { "name": "@fluentui/react-text", "entries": [ + { + "date": "Mon, 24 Apr 2023 08:12:43 GMT", + "tag": "@fluentui/react-text_v9.3.7", + "version": "9.3.7", + "comments": { + "patch": [ + { + "author": "bernardo.sunderhus@gmail.com", + "package": "@fluentui/react-text", + "commit": "8b1ce88b43df03b09d0251921a01c0f0499d1cbe", + "comment": "chore: adopt custom JSX pragma" + }, + { + "author": "beachball", + "package": "@fluentui/react-text", + "comment": "Bump @fluentui/react-jsx-runtime to v9.0.0-alpha.2", + "commit": "505433ac64f144c9cca456097413d6af4582e5ee" + } + ] + } + }, { "date": "Mon, 17 Apr 2023 17:54:02 GMT", "tag": "@fluentui/react-text_v9.3.6", diff --git a/packages/react-components/react-text/CHANGELOG.md b/packages/react-components/react-text/CHANGELOG.md index 95cd9cf4e6768d..4da47916699b41 100644 --- a/packages/react-components/react-text/CHANGELOG.md +++ b/packages/react-components/react-text/CHANGELOG.md @@ -1,9 +1,19 @@ # Change Log - @fluentui/react-text -This log was last generated on Mon, 17 Apr 2023 17:54:02 GMT and should not be manually modified. +This log was last generated on Mon, 24 Apr 2023 08:12:43 GMT and should not be manually modified. +## [9.3.7](https://github.com/microsoft/fluentui/tree/@fluentui/react-text_v9.3.7) + +Mon, 24 Apr 2023 08:12:43 GMT +[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-text_v9.3.6..@fluentui/react-text_v9.3.7) + +### Patches + +- chore: adopt custom JSX pragma ([PR #27626](https://github.com/microsoft/fluentui/pull/27626) by bernardo.sunderhus@gmail.com) +- Bump @fluentui/react-jsx-runtime to v9.0.0-alpha.2 ([commit](https://github.com/microsoft/fluentui/commit/505433ac64f144c9cca456097413d6af4582e5ee) by beachball) + ## [9.3.6](https://github.com/microsoft/fluentui/tree/@fluentui/react-text_v9.3.6) Mon, 17 Apr 2023 17:54:02 GMT diff --git a/packages/react-components/react-text/jest.config.js b/packages/react-components/react-text/jest.config.js index 8e3d3aaf2d53b1..810103ae043c54 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/package.json b/packages/react-components/react-text/package.json index 66b45c402e3701..1a82c7eb52a427 100644 --- a/packages/react-components/react-text/package.json +++ b/packages/react-components/react-text/package.json @@ -1,6 +1,6 @@ { "name": "@fluentui/react-text", - "version": "9.3.6", + "version": "9.3.7", "description": "Text is a typography and styling abstraction component that can be used to ensure the consistency of all text across your application.", "main": "lib-commonjs/index.js", "module": "lib/index.js", @@ -36,6 +36,7 @@ "@fluentui/react-theme": "^9.1.7", "@griffel/react": "^1.5.2", "@fluentui/react-utilities": "^9.8.0", + "@fluentui/react-jsx-runtime": "9.0.0-alpha.2", "@swc/helpers": "^0.4.14" }, "peerDependencies": { 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 f9ca2632f0f947..f88995ee8eadbf 100644 --- a/packages/react-components/react-text/src/components/Text/Text.tsx +++ b/packages/react-components/react-text/src/components/Text/Text.tsx @@ -1,10 +1,10 @@ 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 { useCustomStyleHooks_unstable } from '@fluentui/react-shared-contexts'; +import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts'; /** * Typography and styling abstraction component used to ensure consistency of text. @@ -14,8 +14,7 @@ export const Text: ForwardRefComponent = React.forwardRef((props, ref useTextStyles_unstable(state); - const { useTextStyles_unstable: useCustomStyles } = useCustomStyleHooks_unstable(); - useCustomStyles(state); + useCustomStyleHook_unstable('useTextStyles_unstable')(state); return renderText_unstable(state); // Work around some small mismatches in inferred types which don't matter in practice diff --git a/packages/react-components/react-text/src/components/Text/index.ts b/packages/react-components/react-text/src/components/Text/index.ts index 04fc42f94ff616..d4f8729f99a205 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/renderText.tsx b/packages/react-components/react-text/src/components/Text/renderText.tsx index 3556d909662059..27244293ca4c7b 100644 --- a/packages/react-components/react-text/src/components/Text/renderText.tsx +++ b/packages/react-components/react-text/src/components/Text/renderText.tsx @@ -1,12 +1,16 @@ -import * as React from 'react'; -import { getSlots } from '@fluentui/react-utilities'; +/** @jsxRuntime classic */ +/** @jsx createElement */ + +import { createElement } from '@fluentui/react-jsx-runtime'; + +import { getSlotsNext } from '@fluentui/react-utilities'; import type { TextSlots, TextState } from './Text.types'; /** * Render the final JSX of Text */ export const renderText_unstable = (state: TextState) => { - const { slots, slotProps } = getSlots(state); + const { slots, slotProps } = getSlotsNext(state); return ; }; 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 8e9d350ca58e67..57ebe7173fbecf 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 121209a453aa42..0bf95e904f87a4 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 00000000000000..0df28b21d38ebf --- /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 586c08d518a09f..74df1549998252 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 09d233a0f3c9f4..e434a5b6598529 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 00000000000000..a29f3e9c1702f5 --- /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 d28a061293ba81..fb7efac4e05956 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 df60a4c601787e..2a4f350cf7fc50 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 00000000000000..cb883ab7e08466 --- /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 906a855cdddb41..bed7b51c95c510 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 b334621f5b630a..9afbb9a9a0c733 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 00000000000000..116208d5d38342 --- /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 022527268cde03..c2b403a165652f 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 9884a53b5ce8e8..0d699882e64515 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 00000000000000..cff14d3f686382 --- /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 00df4122aac1f6..781359befa9027 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 5295cf11b13b44..2d1a76c38fd84e 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 00000000000000..0e9512d9753ba5 --- /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 e3ef507ccb122a..a8b27c99c773c5 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 97da77e682c634..bf291a220f6c84 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 00000000000000..57094df4c67676 --- /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 5e47ecf75eadb2..6cc1bdf15a2dbc 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 0b834aa6325c1a..d60c40bdfbd25b 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 00000000000000..3b91b20030bae5 --- /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 aa1d4a5a31acaa..663c4da0ad5f82 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 ea02534c049483..04bab7797e5015 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 00000000000000..7f8770d4255673 --- /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 76715f6a1c2fc0..339e9045eb3418 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 6a069964d8a04d..016778725109ba 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 00000000000000..354c41720f2139 --- /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 a2f8f2062928ff..e7591a75ba23cd 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 7845d85250ad95..e1b89327732a79 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 00000000000000..864703643dcc30 --- /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 63a100459e9d9d..99c2e2ebfb2884 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 3673881ac6ea7a..a3be128b5d24f7 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 00000000000000..06f48757cca049 --- /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 f61e1ef8039bc8..34c1eb80c4e2e2 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 35d7ce8145e880..92a8c98a88cb23 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 00000000000000..9ce5de3a44f6ca --- /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 7b4c7dfc9856b9..391b272a37e545 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 44c03d2ae31aa0..4713f1e4097436 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 00000000000000..a0fbdcfb1b7083 --- /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 d9e9e338d59b9e..5de7152c0f910a 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 b32f898402c89b..acb670600bf467 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 00000000000000..126f5eda5accfa --- /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 33eb812b34897c..9b3dce66f6a85e 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 e6db0795e90e63..0fe89ad1bf5c32 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 00000000000000..0d6a78592c958a --- /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 db0ec281c5bcdb..4144d1239aea83 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 ad1eaed1b185b2..96e536b87a53e5 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 00000000000000..26996a6eb02090 --- /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 55b0ea70534bb3..4e3ee30c5804c2 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/.npmignore b/packages/react-components/react-textarea/.npmignore index f7ce568a6dbf7c..26904cdfffc9bd 100644 --- a/packages/react-components/react-textarea/.npmignore +++ b/packages/react-components/react-textarea/.npmignore @@ -28,3 +28,9 @@ __tests__ .eslint* .git* .prettierignore + +# exclude gitignore patterns explicitly +!lib +!lib-commonjs +!lib-amd +!dist/*.d.ts diff --git a/packages/react-components/react-textarea/CHANGELOG.json b/packages/react-components/react-textarea/CHANGELOG.json index 7e1f04c5492013..59db813c9a9d72 100644 --- a/packages/react-components/react-textarea/CHANGELOG.json +++ b/packages/react-components/react-textarea/CHANGELOG.json @@ -1,6 +1,33 @@ { "name": "@fluentui/react-textarea", "entries": [ + { + "date": "Mon, 24 Apr 2023 08:12:43 GMT", + "tag": "@fluentui/react-textarea_v9.3.11", + "version": "9.3.11", + "comments": { + "patch": [ + { + "author": "bernardo.sunderhus@gmail.com", + "package": "@fluentui/react-textarea", + "commit": "4ca91d59dad4b9ad26955d59db15b81b7dfe6faa", + "comment": "chore: adopt custom JSX pragma" + }, + { + "author": "beachball", + "package": "@fluentui/react-textarea", + "comment": "Bump @fluentui/react-field to v9.1.1", + "commit": "505433ac64f144c9cca456097413d6af4582e5ee" + }, + { + "author": "beachball", + "package": "@fluentui/react-textarea", + "comment": "Bump @fluentui/react-jsx-runtime to v9.0.0-alpha.2", + "commit": "505433ac64f144c9cca456097413d6af4582e5ee" + } + ] + } + }, { "date": "Mon, 17 Apr 2023 17:53:59 GMT", "tag": "@fluentui/react-textarea_v9.3.10", diff --git a/packages/react-components/react-textarea/CHANGELOG.md b/packages/react-components/react-textarea/CHANGELOG.md index ddb56af03094cf..0b14a2d286723a 100644 --- a/packages/react-components/react-textarea/CHANGELOG.md +++ b/packages/react-components/react-textarea/CHANGELOG.md @@ -1,9 +1,20 @@ # Change Log - @fluentui/react-textarea -This log was last generated on Mon, 17 Apr 2023 17:53:59 GMT and should not be manually modified. +This log was last generated on Mon, 24 Apr 2023 08:12:43 GMT and should not be manually modified. +## [9.3.11](https://github.com/microsoft/fluentui/tree/@fluentui/react-textarea_v9.3.11) + +Mon, 24 Apr 2023 08:12:43 GMT +[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-textarea_v9.3.10..@fluentui/react-textarea_v9.3.11) + +### Patches + +- chore: adopt custom JSX pragma ([PR #27631](https://github.com/microsoft/fluentui/pull/27631) by bernardo.sunderhus@gmail.com) +- Bump @fluentui/react-field to v9.1.1 ([commit](https://github.com/microsoft/fluentui/commit/505433ac64f144c9cca456097413d6af4582e5ee) by beachball) +- Bump @fluentui/react-jsx-runtime to v9.0.0-alpha.2 ([commit](https://github.com/microsoft/fluentui/commit/505433ac64f144c9cca456097413d6af4582e5ee) by beachball) + ## [9.3.10](https://github.com/microsoft/fluentui/tree/@fluentui/react-textarea_v9.3.10) Mon, 17 Apr 2023 17:53:59 GMT diff --git a/packages/react-components/react-textarea/jest.config.js b/packages/react-components/react-textarea/jest.config.js index d5255744ad5b2a..01e8d7422ca9b3 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/package.json b/packages/react-components/react-textarea/package.json index 57e93c60bd80a7..8df83d5381bfcd 100644 --- a/packages/react-components/react-textarea/package.json +++ b/packages/react-components/react-textarea/package.json @@ -1,6 +1,6 @@ { "name": "@fluentui/react-textarea", - "version": "9.3.10", + "version": "9.3.11", "description": "Fluent UI TextArea component", "main": "lib-commonjs/index.js", "module": "lib/index.js", @@ -32,10 +32,11 @@ "@fluentui/scripts-tasks": "*" }, "dependencies": { - "@fluentui/react-field": "^9.1.0", + "@fluentui/react-field": "^9.1.1", "@fluentui/react-shared-contexts": "^9.3.3", "@fluentui/react-theme": "^9.1.7", "@fluentui/react-utilities": "^9.8.0", + "@fluentui/react-jsx-runtime": "9.0.0-alpha.2", "@griffel/react": "^1.5.2", "@swc/helpers": "^0.4.14" }, diff --git a/packages/react-components/react-textarea/src/components/Textarea/Textarea.tsx b/packages/react-components/react-textarea/src/components/Textarea/Textarea.tsx index 9f5cbf5d4523e5..67e5150d2153ed 100644 --- a/packages/react-components/react-textarea/src/components/Textarea/Textarea.tsx +++ b/packages/react-components/react-textarea/src/components/Textarea/Textarea.tsx @@ -1,10 +1,10 @@ import * as React from 'react'; import { renderTextarea_unstable } from './renderTextarea'; import { useTextarea_unstable } from './useTextarea'; -import { useTextareaStyles_unstable } from './useTextareaStyles'; +import { useTextareaStyles_unstable } from './useTextareaStyles.styles'; import type { ForwardRefComponent } from '@fluentui/react-utilities'; import type { TextareaProps } from './Textarea.types'; -import { useCustomStyleHooks_unstable } from '@fluentui/react-shared-contexts'; +import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts'; /** * The Textarea component allows the user to enter and edit text in multiple lines. @@ -14,8 +14,7 @@ export const Textarea: ForwardRefComponent = React.forwardRef((pr useTextareaStyles_unstable(state); - const { useTextareaStyles_unstable: useCustomStyles } = useCustomStyleHooks_unstable(); - useCustomStyles(state); + useCustomStyleHook_unstable('useTextareaStyles_unstable')(state); return renderTextarea_unstable(state); }); diff --git a/packages/react-components/react-textarea/src/components/Textarea/index.ts b/packages/react-components/react-textarea/src/components/Textarea/index.ts index a6b850d2794ebc..8ce45658b47c26 100644 --- a/packages/react-components/react-textarea/src/components/Textarea/index.ts +++ b/packages/react-components/react-textarea/src/components/Textarea/index.ts @@ -2,4 +2,4 @@ export * from './Textarea'; export * from './Textarea.types'; export * from './renderTextarea'; export * from './useTextarea'; -export * from './useTextareaStyles'; +export * from './useTextareaStyles.styles'; diff --git a/packages/react-components/react-textarea/src/components/Textarea/renderTextarea.tsx b/packages/react-components/react-textarea/src/components/Textarea/renderTextarea.tsx index 90952d62d6b38a..1b1fc727975844 100644 --- a/packages/react-components/react-textarea/src/components/Textarea/renderTextarea.tsx +++ b/packages/react-components/react-textarea/src/components/Textarea/renderTextarea.tsx @@ -1,12 +1,16 @@ -import * as React from 'react'; -import { getSlots } from '@fluentui/react-utilities'; +/** @jsxRuntime classic */ +/** @jsx createElement */ + +import { createElement } from '@fluentui/react-jsx-runtime'; + +import { getSlotsNext } from '@fluentui/react-utilities'; import type { TextareaState, TextareaSlots } from './Textarea.types'; /** * Render the final JSX of Textarea */ export const renderTextarea_unstable = (state: TextareaState) => { - const { slots, slotProps } = getSlots(state); + const { slots, slotProps } = getSlotsNext(state); return ( diff --git a/packages/react-components/react-textarea/src/components/Textarea/useTextareaStyles.ts b/packages/react-components/react-textarea/src/components/Textarea/useTextareaStyles.styles.ts similarity index 100% rename from packages/react-components/react-textarea/src/components/Textarea/useTextareaStyles.ts rename to packages/react-components/react-textarea/src/components/Textarea/useTextareaStyles.styles.ts diff --git a/packages/react-components/react-textarea/src/testing/isConformant.ts b/packages/react-components/react-textarea/src/testing/isConformant.ts index 77f88408cbd839..a3d988f29a1728 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-textarea/stories/Textarea/TextareaAppearance.stories.tsx b/packages/react-components/react-textarea/stories/Textarea/TextareaAppearance.stories.tsx index 1dcace710fefa8..321e09aeb90a82 100644 --- a/packages/react-components/react-textarea/stories/Textarea/TextareaAppearance.stories.tsx +++ b/packages/react-components/react-textarea/stories/Textarea/TextareaAppearance.stories.tsx @@ -1,58 +1,44 @@ import * as React from 'react'; -import { makeStyles, shorthands, tokens, useId, Label, Textarea } from '@fluentui/react-components'; +import { Field, makeStyles, mergeClasses, shorthands, tokens, Textarea } from '@fluentui/react-components'; const useStyles = makeStyles({ base: { display: 'flex', flexDirection: 'column', - - '> div': { - display: 'flex', - flexDirection: 'column', - marginTop: tokens.spacingVerticalMNudge, - ...shorthands.padding(tokens.spacingHorizontalMNudge), - }, - - '> div > label': { - marginBottom: tokens.spacingHorizontalXXS, - marginLeft: tokens.spacingHorizontalMNudge, - }, + rowGap: tokens.spacingVerticalMNudge, }, - filledLighter: { + inverted: { backgroundColor: tokens.colorNeutralBackgroundInverted, - '> label': { - color: tokens.colorNeutralForegroundInverted2, - }, }, - filledDarker: { - backgroundColor: tokens.colorNeutralBackgroundInverted, - '> label': { - color: tokens.colorNeutralForegroundInverted2, - }, + invertedLabel: { + color: tokens.colorNeutralForegroundInverted2, + }, + fieldWrapper: { + ...shorthands.padding(tokens.spacingVerticalMNudge, tokens.spacingHorizontalMNudge), }, }); export const Appearance = () => { - const outlineId = useId('textarea-outline'); - const filledDarkerId = useId('textarea-filleddarker'); - const filledLighterId = useId('textarea-filledlighter'); const styles = useStyles(); return (
-
- -