diff --git a/apps/perf-test-react-components/package.json b/apps/perf-test-react-components/package.json index 5abb8084ee4da..f5013b053a5a7 100644 --- a/apps/perf-test-react-components/package.json +++ b/apps/perf-test-react-components/package.json @@ -21,6 +21,7 @@ "@fluentui/scripts-perf-test-flamegrill": "*", "@fluentui/react-avatar": "*", "@fluentui/react-button": "*", + "@fluentui/react-color-picker-preview": "*", "@fluentui/react-components": "*", "@fluentui/react-field": "*", "@fluentui/react-persona": "*", diff --git a/apps/perf-test-react-components/src/scenarios/ColorPicker.tsx b/apps/perf-test-react-components/src/scenarios/ColorPicker.tsx new file mode 100644 index 0000000000000..4406ac2fe3a9a --- /dev/null +++ b/apps/perf-test-react-components/src/scenarios/ColorPicker.tsx @@ -0,0 +1,18 @@ +import * as React from 'react'; +import { ColorPicker, ColorArea, ColorSlider, AlphaSlider } from '@fluentui/react-color-picker-preview'; +import { FluentProvider } from '@fluentui/react-provider'; +import { webLightTheme } from '@fluentui/react-theme'; + +const Scenario = () => ( + + + + + +); + +Scenario.decorator = (props: { children: React.ReactNode }) => ( + {props.children} +); + +export default Scenario; diff --git a/apps/vr-tests-react-components/package.json b/apps/vr-tests-react-components/package.json index 555ce58bd2368..97c72699d3970 100644 --- a/apps/vr-tests-react-components/package.json +++ b/apps/vr-tests-react-components/package.json @@ -27,6 +27,7 @@ "@fluentui/react-card": "*", "@fluentui/react-charts-preview": "*", "@fluentui/react-checkbox": "*", + "@fluentui/react-color-picker-preview": "*", "@fluentui/react-combobox": "*", "@fluentui/react-context-selector": "*", "@fluentui/react-datepicker-compat": "*", diff --git a/apps/vr-tests-react-components/src/stories/ColorPicker/ColorPicker.stories.tsx b/apps/vr-tests-react-components/src/stories/ColorPicker/ColorPicker.stories.tsx new file mode 100644 index 0000000000000..fd45bdc75342b --- /dev/null +++ b/apps/vr-tests-react-components/src/stories/ColorPicker/ColorPicker.stories.tsx @@ -0,0 +1,30 @@ +import * as React from 'react'; +import type { Meta } from '@storybook/react'; +import { ColorPicker } from '@fluentui/react-color-picker-preview'; +import { SampleColorPicker } from './utils'; +import { Steps } from 'storywright'; + +import { DARK_MODE, getStoryVariant, HIGH_CONTRAST, RTL, withStoryWrightSteps } from '../../utilities'; + +export default { + title: 'ColorPicker Converged', + decorators: [ + story => withStoryWrightSteps({ story, steps: new Steps().snapshot('default', { cropTo: '.testWrapper' }).end() }), + ], +} satisfies Meta; + +export const Default = () => ; + +export const DefaultDarkMode = getStoryVariant(Default, DARK_MODE); + +export const DefaultHighContrast = getStoryVariant(Default, HIGH_CONTRAST); + +export const DefaultRTL = getStoryVariant(Default, RTL); + +export const Shape = () => ( + <> + + + +); +Shape.storyName = 'shape'; diff --git a/apps/vr-tests-react-components/src/stories/ColorPicker/utils.tsx b/apps/vr-tests-react-components/src/stories/ColorPicker/utils.tsx new file mode 100644 index 0000000000000..dd5166d0fa2db --- /dev/null +++ b/apps/vr-tests-react-components/src/stories/ColorPicker/utils.tsx @@ -0,0 +1,16 @@ +import * as React from 'react'; +import { + ColorPicker, + ColorArea, + AlphaSlider, + ColorSlider, + type ColorPickerProps, +} from '@fluentui/react-color-picker-preview'; + +export const SampleColorPicker = (props: ColorPickerProps) => ( + + + + + +); diff --git a/apps/vr-tests-react-components/src/utilities/index.ts b/apps/vr-tests-react-components/src/utilities/index.ts index 177f1172845a5..4cb4101034aa9 100644 --- a/apps/vr-tests-react-components/src/utilities/index.ts +++ b/apps/vr-tests-react-components/src/utilities/index.ts @@ -1,3 +1,9 @@ -export * from './TestWrapperDecorator'; -export * from './getStoryVariant'; -export * from './withStoryWrightSteps'; +export { + TestWrapperDecorator, + TestWrapperDecoratorFixedWidth, + TestWrapperDecoratorFullWidth, + TestWrapperDecoratorTall, + TestWrapperDecoratorTallFixedWidth, +} from './TestWrapperDecorator'; +export { DARK_MODE, HIGH_CONTRAST, RTL, getStoryVariant } from './getStoryVariant'; +export { withStoryWrightSteps } from './withStoryWrightSteps'; diff --git a/change/@fluentui-codemods-64d49103-6d6d-4ef0-93f0-2339233931e5.json b/change/@fluentui-codemods-64d49103-6d6d-4ef0-93f0-2339233931e5.json new file mode 100644 index 0000000000000..f67a35684218e --- /dev/null +++ b/change/@fluentui-codemods-64d49103-6d6d-4ef0-93f0-2339233931e5.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "chore: remove usage of \"export *\"", + "packageName": "@fluentui/codemods", + "email": "olfedias@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-eslint-plugin-75e61142-a4e1-4046-9076-316b44c873ca.json b/change/@fluentui-eslint-plugin-75e61142-a4e1-4046-9076-316b44c873ca.json new file mode 100644 index 0000000000000..b6692f2581c7b --- /dev/null +++ b/change/@fluentui-eslint-plugin-75e61142-a4e1-4046-9076-316b44c873ca.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "chore: remove usage of \"export *\"", + "packageName": "@fluentui/eslint-plugin", + "email": "olfedias@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-charting-f56dc096-9891-4d5c-ae30-4d8a6ac5b481.json b/change/@fluentui-react-charting-f56dc096-9891-4d5c-ae30-4d8a6ac5b481.json deleted file mode 100644 index 5a9fd5dcb3232..0000000000000 --- a/change/@fluentui-react-charting-f56dc096-9891-4d5c-ae30-4d8a6ac5b481.json +++ /dev/null @@ -1,7 +0,0 @@ -{ - "type": "patch", - "comment": "Ensure type safety of dependent fields", - "packageName": "@fluentui/react-charting", - "email": "74965306+Anush2303@users.noreply.github.com", - "dependentChangeType": "patch" -} diff --git a/change/@fluentui-react-conformance-33c0a62b-e18c-45a1-9fbd-bfd7089f997c.json b/change/@fluentui-react-conformance-33c0a62b-e18c-45a1-9fbd-bfd7089f997c.json new file mode 100644 index 0000000000000..132ef6bac19f5 --- /dev/null +++ b/change/@fluentui-react-conformance-33c0a62b-e18c-45a1-9fbd-bfd7089f997c.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "chore: remove usage of \"export *\"", + "packageName": "@fluentui/react-conformance", + "email": "olfedias@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-icon-provider-a7f6eac5-5e7c-40b4-ae8c-4b3dab5bc372.json b/change/@fluentui-react-icon-provider-a7f6eac5-5e7c-40b4-ae8c-4b3dab5bc372.json new file mode 100644 index 0000000000000..7949b00332d92 --- /dev/null +++ b/change/@fluentui-react-icon-provider-a7f6eac5-5e7c-40b4-ae8c-4b3dab5bc372.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "chore: remove usage of \"export *\"", + "packageName": "@fluentui/react-icon-provider", + "email": "olfedias@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-message-bar-72abc821-ab32-4cac-8dd2-4c8dce4c810e.json b/change/@fluentui-react-message-bar-72abc821-ab32-4cac-8dd2-4c8dce4c810e.json new file mode 100644 index 0000000000000..45370fc286bc2 --- /dev/null +++ b/change/@fluentui-react-message-bar-72abc821-ab32-4cac-8dd2-4c8dce4c810e.json @@ -0,0 +1,7 @@ +{ + "type": "minor", + "comment": "refactor(MessageBar): migrate slide & fade to motion components", + "packageName": "@fluentui/react-message-bar", + "email": "robertpenner@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-message-bar-a4bb3869-7b64-45f3-9084-cfbbca1c8a1c.json b/change/@fluentui-react-message-bar-a4bb3869-7b64-45f3-9084-cfbbca1c8a1c.json deleted file mode 100644 index 2cc7d9dc06210..0000000000000 --- a/change/@fluentui-react-message-bar-a4bb3869-7b64-45f3-9084-cfbbca1c8a1c.json +++ /dev/null @@ -1,7 +0,0 @@ -{ - "type": "patch", - "comment": "fix: MessageBar auto reflow should handle document reflow with `min-content`", - "packageName": "@fluentui/react-message-bar", - "email": "lingfangao@hotmail.com", - "dependentChangeType": "patch" -} diff --git a/change/@fluentui-react-motion-f4f8b668-785c-48d9-9d8f-2410472b12f4.json b/change/@fluentui-react-motion-f4f8b668-785c-48d9-9d8f-2410472b12f4.json new file mode 100644 index 0000000000000..81ed563ea2612 --- /dev/null +++ b/change/@fluentui-react-motion-f4f8b668-785c-48d9-9d8f-2410472b12f4.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "fix: handle case when Animation.persist() does not exist", + "packageName": "@fluentui/react-motion", + "email": "seanmonahan@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-theme-576e3635-ea2b-48cd-b8bd-f35566e66189.json b/change/@fluentui-theme-576e3635-ea2b-48cd-b8bd-f35566e66189.json new file mode 100644 index 0000000000000..aa1ed0df91a3a --- /dev/null +++ b/change/@fluentui-theme-576e3635-ea2b-48cd-b8bd-f35566e66189.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "chore: remove usage of \"export *\"", + "packageName": "@fluentui/theme", + "email": "olfedias@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-web-components-f87a2b96-d977-4138-8cb9-8cad4b13d8a8.json b/change/@fluentui-web-components-f87a2b96-d977-4138-8cb9-8cad4b13d8a8.json new file mode 100644 index 0000000000000..f9cd17c85f0c5 --- /dev/null +++ b/change/@fluentui-web-components-f87a2b96-d977-4138-8cb9-8cad4b13d8a8.json @@ -0,0 +1,7 @@ +{ + "type": "prerelease", + "comment": "fix tooltip positioning styles for 'below-end' option", + "packageName": "@fluentui/web-components", + "email": "863023+radium-v@users.noreply.github.com", + "dependentChangeType": "patch" +} diff --git a/package.json b/package.json index 21667788a385c..5fb8c55d042bb 100644 --- a/package.json +++ b/package.json @@ -69,7 +69,7 @@ "@griffel/webpack-loader": "2.2.10", "@jest/reporters": "29.7.0", "@mdx-js/loader": "2.3.0", - "@microsoft/api-extractor": "7.38.5", + "@microsoft/api-extractor": "7.39.0", "@microsoft/api-extractor-model": "7.28.3", "@microsoft/eslint-plugin-sdl": "0.1.9", "@microsoft/load-themed-styles": "1.10.26", @@ -336,11 +336,11 @@ "tmp": "0.2.1", "ts-jest": "29.1.1", "ts-loader": "9.4.2", - "ts-node": "10.9.1", + "ts-node": "10.9.2", "tsconfig-paths": "4.2.0", "tsconfig-paths-webpack-plugin": "4.1.0", "tslib": "2.6.3", - "typescript": "5.2.2", + "typescript": "5.3.3", "vinyl": "2.2.0", "webpack": "5.94.0", "webpack-bundle-analyzer": "4.10.1", @@ -379,7 +379,6 @@ "swc-loader": "^0.2.6", "prettier": "2.8.8", "puppeteer": "19.6.0", - "@microsoft/api-extractor/typescript": "5.2.2", "ws": "8.17.1" }, "nx": { diff --git a/packages/a11y-testing/src/definitions/index.ts b/packages/a11y-testing/src/definitions/index.ts index 1531d60a3003d..3fb5393e65933 100644 --- a/packages/a11y-testing/src/definitions/index.ts +++ b/packages/a11y-testing/src/definitions/index.ts @@ -1,12 +1,25 @@ -export * from './Button/buttonBehaviorDefinition'; -export * from './Button/buttonGroupBehaviorDefinition'; -export * from './Button/toggleButtonBehaviorDefinition'; -export * from './Link/linkBehaviorDefinition'; -export * from './MenuButton/menuButtonBehaviorDefinition'; -export * from './Pill/pillActionBehaviorDefinition'; -export * from './Pill/pillBehaviorDefinition'; -export * from './Pill/pillOptionBehaviorDefinition'; -export * from './Pill/pillGroupBehaviorDefinition'; -export * from './Popup/popupBehaviorDefinition'; - -export * from './react-button/buttonAccessibilityBehaviorDefinition'; +export { buttonBehaviorDefinition } from './Button/buttonBehaviorDefinition'; +export { buttonGroupBehaviorDefinition } from './Button/buttonGroupBehaviorDefinition'; +export { toggleButtonBehaviorDefinition } from './Button/toggleButtonBehaviorDefinition'; +export { linkBehaviorDefinition } from './Link/linkBehaviorDefinition'; +export { + menuButtonBehaviorDefinition, + menuButtonBehaviorDefinitionMenuSlot, + menuButtonBehaviorDefinitionMenuSlotWithoutID, + menuButtonBehaviorDefinitionTriggerSlotNotTabbable, + menuButtonBehaviorDefinitionTriggerSlotTabbable, + menuButtonBehaviorDefinitionTriggerSlotWithoutID, + menuButtonBehaviorDefinitionTriggerWithTabIndex, +} from './MenuButton/menuButtonBehaviorDefinition'; +export { pillActionBehaviorDefinition } from './Pill/pillActionBehaviorDefinition'; +export { pillBehaviorDefinition } from './Pill/pillBehaviorDefinition'; +export { pillOptionBehaviorDefinition } from './Pill/pillOptionBehaviorDefinition'; +export { pillGroupBehaviorDefinition } from './Pill/pillGroupBehaviorDefinition'; +export { + popupBehaviorDefinition, + popupBehaviorDefinitionPopupSlot, + popupBehaviorDefinitionTriggerSlotNotTabbable, + popupBehaviorDefinitionTriggerSlotTabbable, + popupBehaviorDefinitionTriggerSlotWithTabIndex, +} from './Popup/popupBehaviorDefinition'; +export { buttonAccessibilityBehaviorDefinition } from './react-button/buttonAccessibilityBehaviorDefinition'; diff --git a/packages/a11y-testing/src/facades/index.ts b/packages/a11y-testing/src/facades/index.ts index d19131b078753..ab5bf4a01cf11 100644 --- a/packages/a11y-testing/src/facades/index.ts +++ b/packages/a11y-testing/src/facades/index.ts @@ -1 +1 @@ -export * from './ComponentTestFacade'; +export { ComponentTestFacade } from './ComponentTestFacade'; diff --git a/packages/a11y-testing/src/index.ts b/packages/a11y-testing/src/index.ts index 82aa973589eed..5c7b2b7080421 100644 --- a/packages/a11y-testing/src/index.ts +++ b/packages/a11y-testing/src/index.ts @@ -1,5 +1,27 @@ -export * from './types'; -export * from './validators/index'; -export * from './facades/index'; -export * from './rules/index'; -export * from './definitions/index'; +export type { AccessibilityBehavior, PropValue, Props, Rule, Slot, TestFacade } from './types'; +export { validateBehavior, validateSlot } from './validators/index'; +export { ComponentTestFacade } from './facades/index'; +export { BehaviorRule, SlotRule } from './rules/index'; +export { + buttonAccessibilityBehaviorDefinition, + buttonBehaviorDefinition, + buttonGroupBehaviorDefinition, + linkBehaviorDefinition, + menuButtonBehaviorDefinition, + menuButtonBehaviorDefinitionMenuSlot, + menuButtonBehaviorDefinitionMenuSlotWithoutID, + menuButtonBehaviorDefinitionTriggerSlotNotTabbable, + menuButtonBehaviorDefinitionTriggerSlotTabbable, + menuButtonBehaviorDefinitionTriggerSlotWithoutID, + menuButtonBehaviorDefinitionTriggerWithTabIndex, + pillActionBehaviorDefinition, + pillBehaviorDefinition, + pillGroupBehaviorDefinition, + pillOptionBehaviorDefinition, + popupBehaviorDefinition, + popupBehaviorDefinitionPopupSlot, + popupBehaviorDefinitionTriggerSlotNotTabbable, + popupBehaviorDefinitionTriggerSlotTabbable, + popupBehaviorDefinitionTriggerSlotWithTabIndex, + toggleButtonBehaviorDefinition, +} from './definitions/index'; diff --git a/packages/a11y-testing/src/rules/index.ts b/packages/a11y-testing/src/rules/index.ts index 6a37aaa5d4bd9..ea187657ec1fe 100644 --- a/packages/a11y-testing/src/rules/index.ts +++ b/packages/a11y-testing/src/rules/index.ts @@ -1 +1 @@ -export * from './rules'; +export { BehaviorRule, SlotRule } from './rules'; diff --git a/packages/a11y-testing/src/validators/index.ts b/packages/a11y-testing/src/validators/index.ts index c1e396d956c66..0cde4fb6d5cfb 100644 --- a/packages/a11y-testing/src/validators/index.ts +++ b/packages/a11y-testing/src/validators/index.ts @@ -1 +1 @@ -export * from './validate'; +export { validateBehavior, validateSlot } from './validate'; diff --git a/packages/charts/react-charting/CHANGELOG.json b/packages/charts/react-charting/CHANGELOG.json index acee1140b5f49..3937b8e683973 100644 --- a/packages/charts/react-charting/CHANGELOG.json +++ b/packages/charts/react-charting/CHANGELOG.json @@ -1,6 +1,21 @@ { "name": "@fluentui/react-charting", "entries": [ + { + "date": "Fri, 20 Dec 2024 07:20:00 GMT", + "tag": "@fluentui/react-charting_v5.23.28", + "version": "5.23.28", + "comments": { + "patch": [ + { + "author": "74965306+Anush2303@users.noreply.github.com", + "package": "@fluentui/react-charting", + "commit": "da882f44f251e7bb80fb969cbe268a942a2df74e", + "comment": "Ensure type safety of dependent fields" + } + ] + } + }, { "date": "Wed, 18 Dec 2024 07:20:30 GMT", "tag": "@fluentui/react-charting_v5.23.27", diff --git a/packages/charts/react-charting/CHANGELOG.md b/packages/charts/react-charting/CHANGELOG.md index 72c5d609b0da2..6c3807c6aee3f 100644 --- a/packages/charts/react-charting/CHANGELOG.md +++ b/packages/charts/react-charting/CHANGELOG.md @@ -1,9 +1,18 @@ # Change Log - @fluentui/react-charting -This log was last generated on Wed, 18 Dec 2024 07:20:30 GMT and should not be manually modified. +This log was last generated on Fri, 20 Dec 2024 07:20:00 GMT and should not be manually modified. +## [5.23.28](https://github.com/microsoft/fluentui/tree/@fluentui/react-charting_v5.23.28) + +Fri, 20 Dec 2024 07:20:00 GMT +[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-charting_v5.23.27..@fluentui/react-charting_v5.23.28) + +### Patches + +- Ensure type safety of dependent fields ([PR #33486](https://github.com/microsoft/fluentui/pull/33486) by 74965306+Anush2303@users.noreply.github.com) + ## [5.23.27](https://github.com/microsoft/fluentui/tree/@fluentui/react-charting_v5.23.27) Wed, 18 Dec 2024 07:20:30 GMT diff --git a/packages/charts/react-charting/package.json b/packages/charts/react-charting/package.json index e78fef53be50f..cb9875c26eff9 100644 --- a/packages/charts/react-charting/package.json +++ b/packages/charts/react-charting/package.json @@ -1,6 +1,6 @@ { "name": "@fluentui/react-charting", - "version": "5.23.27", + "version": "5.23.28", "description": "React web charting controls for Microsoft fluentui system.", "main": "lib-commonjs/index.js", "module": "lib/index.js", diff --git a/packages/codemods/src/codeMods/tests/mock/compat/mockIndex.ts b/packages/codemods/src/codeMods/tests/mock/compat/mockIndex.ts index 2b56b16369367..69ff37c638f1b 100644 --- a/packages/codemods/src/codeMods/tests/mock/compat/mockIndex.ts +++ b/packages/codemods/src/codeMods/tests/mock/compat/mockIndex.ts @@ -1,2 +1,2 @@ -export * from './Button'; -export * from './DefaultButton'; +export { Button, OtherButton } from './Button'; +export { DefaultButton } from './DefaultButton'; diff --git a/packages/codemods/src/codeMods/utilities/index.ts b/packages/codemods/src/codeMods/utilities/index.ts index 95a9bb3bbafac..aaf4eede1810a 100644 --- a/packages/codemods/src/codeMods/utilities/index.ts +++ b/packages/codemods/src/codeMods/utilities/index.ts @@ -1,4 +1,4 @@ -export * from './jsx'; -export * from './imports'; -export * from './props'; -export * from './transforms'; +export { findJsxTag } from './jsx'; +export { appendOrCreateNamedImport, getImportsByPath, renameImport, repathImport } from './imports'; +export { renameProp } from './props'; +export { boolTransform, enumTransform, numberTransform, stringTransform } from './transforms'; diff --git a/packages/eslint-plugin/src/configs/base.js b/packages/eslint-plugin/src/configs/base.js index 2423f8a7b8b88..cab360135da70 100644 --- a/packages/eslint-plugin/src/configs/base.js +++ b/packages/eslint-plugin/src/configs/base.js @@ -19,10 +19,9 @@ module.exports = { }, overrides: [ { - files: '**/src/index.{ts,tsx,js}', + files: '**/src/**/*.{ts,tsx,js}', rules: { - // TODO: propagate to `error` once all packages barrel files have been fixed - '@rnx-kit/no-export-all': ['warn', { expand: 'all' }], + '@rnx-kit/no-export-all': ['error', { expand: 'all' }], }, }, ], diff --git a/packages/react-components/react-components/CHANGELOG.json b/packages/react-components/react-components/CHANGELOG.json index 62cabe937aa29..d41c76fea81a7 100644 --- a/packages/react-components/react-components/CHANGELOG.json +++ b/packages/react-components/react-components/CHANGELOG.json @@ -1,6 +1,21 @@ { "name": "@fluentui/react-components", "entries": [ + { + "date": "Thu, 19 Dec 2024 14:30:56 GMT", + "tag": "@fluentui/react-components_v9.56.8", + "version": "9.56.8", + "comments": { + "patch": [ + { + "author": "lingfangao@hotmail.com", + "package": "@fluentui/react-message-bar", + "commit": "f2523077e9c92fc7f065308efe2081fc86846b5b", + "comment": "fix: MessageBar auto reflow should handle document reflow with `min-content`" + } + ] + } + }, { "date": "Wed, 18 Dec 2024 10:59:36 GMT", "tag": "@fluentui/react-components_v9.56.7", diff --git a/packages/react-components/react-components/CHANGELOG.md b/packages/react-components/react-components/CHANGELOG.md index c54b6eb9a2144..0d568f05c23fa 100644 --- a/packages/react-components/react-components/CHANGELOG.md +++ b/packages/react-components/react-components/CHANGELOG.md @@ -1,9 +1,19 @@ # Change Log - @fluentui/react-components -This log was last generated on Wed, 18 Dec 2024 10:59:36 GMT and should not be manually modified. +This log was last generated on Thu, 19 Dec 2024 14:30:56 GMT and should not be manually modified. +## [9.56.8](https://github.com/microsoft/fluentui/tree/@fluentui/react-components_v9.56.8) + +Thu, 19 Dec 2024 14:30:56 GMT +[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-components_v9.56.7..@fluentui/react-components_v9.56.8) + +### Patches + +- `@fluentui/react-message-bar` + - fix: MessageBar auto reflow should handle document reflow with `min-content` ([PR #33409](https://github.com/microsoft/fluentui/pull/33409) by lingfangao@hotmail.com) + ## [9.56.7](https://github.com/microsoft/fluentui/tree/@fluentui/react-components_v9.56.7) Wed, 18 Dec 2024 10:59:36 GMT diff --git a/packages/react-components/react-components/package.json b/packages/react-components/react-components/package.json index 1a57651aa4516..bce0970ab1155 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.56.7", + "version": "9.56.8", "description": "Suite package for converged React components", "main": "lib-commonjs/index.js", "module": "lib/index.js", @@ -66,7 +66,7 @@ "@fluentui/react-tree": "^9.8.11", "@griffel/react": "^1.5.22", "@swc/helpers": "^0.5.1", - "@fluentui/react-message-bar": "^9.2.18", + "@fluentui/react-message-bar": "^9.2.19", "@fluentui/react-breadcrumb": "^9.0.47", "@fluentui/react-aria": "^9.13.12", "@fluentui/react-rating": "^9.0.26", diff --git a/packages/react-components/react-message-bar/library/CHANGELOG.json b/packages/react-components/react-message-bar/library/CHANGELOG.json index 7af96ca5b028a..76cb7b3b7d04a 100644 --- a/packages/react-components/react-message-bar/library/CHANGELOG.json +++ b/packages/react-components/react-message-bar/library/CHANGELOG.json @@ -1,6 +1,21 @@ { "name": "@fluentui/react-message-bar", "entries": [ + { + "date": "Thu, 19 Dec 2024 14:30:56 GMT", + "tag": "@fluentui/react-message-bar_v9.2.19", + "version": "9.2.19", + "comments": { + "patch": [ + { + "author": "lingfangao@hotmail.com", + "package": "@fluentui/react-message-bar", + "commit": "f2523077e9c92fc7f065308efe2081fc86846b5b", + "comment": "fix: MessageBar auto reflow should handle document reflow with `min-content`" + } + ] + } + }, { "date": "Mon, 16 Dec 2024 16:26:49 GMT", "tag": "@fluentui/react-message-bar_v9.2.18", diff --git a/packages/react-components/react-message-bar/library/CHANGELOG.md b/packages/react-components/react-message-bar/library/CHANGELOG.md index a5ade09fda185..47343bfcb13b6 100644 --- a/packages/react-components/react-message-bar/library/CHANGELOG.md +++ b/packages/react-components/react-message-bar/library/CHANGELOG.md @@ -1,9 +1,18 @@ # Change Log - @fluentui/react-message-bar -This log was last generated on Mon, 16 Dec 2024 16:26:49 GMT and should not be manually modified. +This log was last generated on Thu, 19 Dec 2024 14:30:56 GMT and should not be manually modified. +## [9.2.19](https://github.com/microsoft/fluentui/tree/@fluentui/react-message-bar_v9.2.19) + +Thu, 19 Dec 2024 14:30:56 GMT +[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-message-bar_v9.2.18..@fluentui/react-message-bar_v9.2.19) + +### Patches + +- fix: MessageBar auto reflow should handle document reflow with `min-content` ([PR #33409](https://github.com/microsoft/fluentui/pull/33409) by lingfangao@hotmail.com) + ## [9.2.18](https://github.com/microsoft/fluentui/tree/@fluentui/react-message-bar_v9.2.18) Mon, 16 Dec 2024 16:26:49 GMT diff --git a/packages/react-components/react-message-bar/library/package.json b/packages/react-components/react-message-bar/library/package.json index 3f5b05fb9c153..f4091aa19bfce 100644 --- a/packages/react-components/react-message-bar/library/package.json +++ b/packages/react-components/react-message-bar/library/package.json @@ -1,6 +1,6 @@ { "name": "@fluentui/react-message-bar", - "version": "9.2.18", + "version": "9.2.19", "description": "Fluent UI MessageBar component", "main": "lib-commonjs/index.js", "module": "lib/index.js", @@ -21,13 +21,14 @@ "@fluentui/react-button": "^9.3.98", "@fluentui/react-icons": "^2.0.245", "@fluentui/react-jsx-runtime": "^9.0.48", + "@fluentui/react-motion": "^9.6.4", + "@fluentui/react-motion-components-preview": "^0.4.0", "@fluentui/react-shared-contexts": "^9.21.2", "@fluentui/react-link": "^9.3.5", "@fluentui/react-theme": "^9.1.24", "@fluentui/react-utilities": "^9.18.19", "@griffel/react": "^1.5.22", - "@swc/helpers": "^0.5.1", - "react-transition-group": "^4.4.1" + "@swc/helpers": "^0.5.1" }, "peerDependencies": { "@types/react": ">=16.8.0 <19.0.0", diff --git a/packages/react-components/react-message-bar/library/src/components/MessageBar/MessageBar.types.ts b/packages/react-components/react-message-bar/library/src/components/MessageBar/MessageBar.types.ts index ac8dbb62040ee..95b0ee35ccf3d 100644 --- a/packages/react-components/react-message-bar/library/src/components/MessageBar/MessageBar.types.ts +++ b/packages/react-components/react-message-bar/library/src/components/MessageBar/MessageBar.types.ts @@ -48,5 +48,8 @@ export type MessageBarProps = ComponentProps & export type MessageBarState = ComponentState & Required> & Pick & { + /** + * @deprecated Code is unused, replaced by motion components + */ transitionClassName: string; }; diff --git a/packages/react-components/react-message-bar/library/src/components/MessageBar/useMessageBar.ts b/packages/react-components/react-message-bar/library/src/components/MessageBar/useMessageBar.ts index cb2e0e7f1bc25..1c6145749da4f 100644 --- a/packages/react-components/react-message-bar/library/src/components/MessageBar/useMessageBar.ts +++ b/packages/react-components/react-message-bar/library/src/components/MessageBar/useMessageBar.ts @@ -21,6 +21,7 @@ export const useMessageBar_unstable = (props: MessageBarProps, ref: React.Ref(null); const bodyRef = React.useRef(null); diff --git a/packages/react-components/react-message-bar/library/src/components/MessageBar/useMessageBarStyles.styles.ts b/packages/react-components/react-message-bar/library/src/components/MessageBar/useMessageBarStyles.styles.ts index 1a9f754e95e4f..7a27836250873 100644 --- a/packages/react-components/react-message-bar/library/src/components/MessageBar/useMessageBarStyles.styles.ts +++ b/packages/react-components/react-message-bar/library/src/components/MessageBar/useMessageBarStyles.styles.ts @@ -114,7 +114,6 @@ export const useMessageBarStyles_unstable = (state: MessageBarState): MessageBar state.layout === 'multiline' && styles.rootMultiline, state.shape === 'square' && styles.square, rootIntentStyles[state.intent], - state.transitionClassName, state.root.className, ); diff --git a/packages/react-components/react-message-bar/library/src/components/MessageBarGroup/MessageBarGroup.motions.tsx b/packages/react-components/react-message-bar/library/src/components/MessageBarGroup/MessageBarGroup.motions.tsx new file mode 100644 index 0000000000000..3df0dab15d137 --- /dev/null +++ b/packages/react-components/react-message-bar/library/src/components/MessageBarGroup/MessageBarGroup.motions.tsx @@ -0,0 +1,94 @@ +import { motionTokens, createPresenceComponent, PresenceDirection, AtomMotion } from '@fluentui/react-motion'; +import { MessageBarGroupProps } from './MessageBarGroup.types'; + +// TODO: import these atoms from react-motion-components-preview once they're available there + +interface FadeAtomParams { + direction: PresenceDirection; + duration: number; + easing?: string; + fromValue?: number; +} + +/** + * Generates a motion atom object for a fade in or fade out. + * @param direction - The functional direction of the motion: 'enter' or 'exit'. + * @param duration - The duration of the motion in milliseconds. + * @param easing - The easing curve for the motion. Defaults to `motionTokens.curveLinear`. + * @param fromValue - The starting opacity value. Defaults to 0. + * @returns A motion atom object with opacity keyframes and the supplied duration and easing. + */ +const fadeAtom = ({ + direction, + duration, + easing = motionTokens.curveLinear, + fromValue = 0, +}: FadeAtomParams): AtomMotion => { + const keyframes = [{ opacity: fromValue }, { opacity: 1 }]; + if (direction === 'exit') { + keyframes.reverse(); + } + return { + keyframes, + duration, + easing, + }; +}; + +/** + * Generates a motion atom object for an X or Y translation, from a specified distance to zero. + * @param direction - The functional direction of the motion: 'enter' or 'exit'. + * @param axis - The axis of the translation: 'X' or 'Y'. + * @param fromValue - The starting position of the slide; it can be a percentage or pixels. + * @param duration - The duration of the motion in milliseconds. + * @param easing - The easing curve for the motion. Defaults to `motionTokens.curveDecelerateMid`. + */ +const slideAtom = ({ + direction, + axis, + fromValue, + duration, + easing = motionTokens.curveDecelerateMid, +}: { + direction: PresenceDirection; + axis: 'X' | 'Y'; + fromValue: string; + duration: number; + easing?: string; +}): AtomMotion => { + const keyframes = [{ transform: `translate${axis}(${fromValue})` }, { transform: `translate${axis}(0)` }]; + if (direction === 'exit') { + keyframes.reverse(); + } + return { + keyframes, + duration, + easing, + }; +}; + +/** + * A presence component for a MessageBar to enter and exit from a MessageBarGroup. + * It has an optional enter transition of a slide-in and fade-in, + * when the `animate` prop is set to `'both'`. + * It always has an exit transition of a fade-out. + */ +export const MessageBarMotion = createPresenceComponent<{ animate?: MessageBarGroupProps['animate'] }>( + ({ animate }) => { + const duration = motionTokens.durationGentle; + + return { + enter: + animate === 'both' + ? // enter with slide and fade + [ + fadeAtom({ direction: 'enter', duration }), + slideAtom({ direction: 'enter', axis: 'Y', fromValue: '-100%', duration }), + ] + : [], // no enter motion + + // Always exit with a fade + exit: fadeAtom({ direction: 'exit', duration }), + }; + }, +); diff --git a/packages/react-components/react-message-bar/library/src/components/MessageBarGroup/MessageBarGroup.types.ts b/packages/react-components/react-message-bar/library/src/components/MessageBarGroup/MessageBarGroup.types.ts index dc0cbc00b1a75..3892ffb59ac5c 100644 --- a/packages/react-components/react-message-bar/library/src/components/MessageBarGroup/MessageBarGroup.types.ts +++ b/packages/react-components/react-message-bar/library/src/components/MessageBarGroup/MessageBarGroup.types.ts @@ -18,7 +18,9 @@ export type MessageBarGroupProps = ComponentProps & { */ export type MessageBarGroupState = ComponentState & Pick & { + /** @deprecated property is unused; these CSS animations were replaced by motion components */ enterStyles: string; + /** @deprecated property is unused; these CSS animations were replaced by motion components */ exitStyles: string; children: React.ReactElement[]; }; diff --git a/packages/react-components/react-message-bar/library/src/components/MessageBarGroup/MessageBarTransition.tsx b/packages/react-components/react-message-bar/library/src/components/MessageBarGroup/MessageBarTransition.tsx deleted file mode 100644 index a6e5c4ab95794..0000000000000 --- a/packages/react-components/react-message-bar/library/src/components/MessageBarGroup/MessageBarTransition.tsx +++ /dev/null @@ -1,71 +0,0 @@ -import * as React from 'react'; -import { Transition, TransitionStatus } from 'react-transition-group'; -import { MessageBarTransitionContextProvider } from '../../contexts/messageBarTransitionContext'; -import { MessageBarGroupProps } from './MessageBarGroup.types'; - -const getClassName = ( - status: TransitionStatus, - enterClassName: string, - exitClassName: string, - animate: MessageBarGroupProps['animate'], -) => { - switch (status) { - case 'entering': - case 'entered': - return animate === 'both' ? enterClassName : ''; - case 'exiting': - case 'exited': - return exitClassName; - default: - return ''; - } -}; - -/** - * Internal component that controls the animation transition for MessageBar components - * @internal - */ -export const MessageBarTransition: React.FC<{ - children: React.ReactElement; - enterClassName: string; - exitClassName: string; - animate: MessageBarGroupProps['animate']; -}> = ({ children, enterClassName, exitClassName, animate, ...rest }) => { - const nodeRef = React.useRef(null); - - return ( - - {state => ( - - {children} - - )} - - ); -}; - -const MessageBarTransitionInner: React.FC<{ - children: React.ReactElement; - enterClassName: string; - exitClassName: string; - animate: MessageBarGroupProps['animate']; - nodeRef: React.Ref; - state: TransitionStatus; -}> = ({ children, state, enterClassName, exitClassName, animate, nodeRef }) => { - const className = getClassName(state, enterClassName, exitClassName, animate); - const context = React.useMemo( - () => ({ - className, - nodeRef, - }), - [className, nodeRef], - ); - - return {children}; -}; diff --git a/packages/react-components/react-message-bar/library/src/components/MessageBarGroup/renderMessageBarGroup.tsx b/packages/react-components/react-message-bar/library/src/components/MessageBarGroup/renderMessageBarGroup.tsx index ddd4c6d29760d..70e62632523c6 100644 --- a/packages/react-components/react-message-bar/library/src/components/MessageBarGroup/renderMessageBarGroup.tsx +++ b/packages/react-components/react-message-bar/library/src/components/MessageBarGroup/renderMessageBarGroup.tsx @@ -3,8 +3,8 @@ import { assertSlots } from '@fluentui/react-utilities'; import type { MessageBarGroupState, MessageBarGroupSlots } from './MessageBarGroup.types'; -import { TransitionGroup } from 'react-transition-group'; -import { MessageBarTransition } from './MessageBarTransition'; +import { PresenceGroup } from '@fluentui/react-motion'; +import { MessageBarMotion } from './MessageBarGroup.motions'; /** * Render the final JSX of MessageBarGroup @@ -14,18 +14,13 @@ export const renderMessageBarGroup_unstable = (state: MessageBarGroupState) => { return ( - + {state.children.map(child => ( - + {child} - + ))} - + ); }; diff --git a/packages/react-components/react-message-bar/library/src/components/MessageBarGroup/useMessageBarGroupStyles.styles.ts b/packages/react-components/react-message-bar/library/src/components/MessageBarGroup/useMessageBarGroupStyles.styles.ts index a7054fe773448..bdc96b5d9e631 100644 --- a/packages/react-components/react-message-bar/library/src/components/MessageBarGroup/useMessageBarGroupStyles.styles.ts +++ b/packages/react-components/react-message-bar/library/src/components/MessageBarGroup/useMessageBarGroupStyles.styles.ts @@ -1,5 +1,4 @@ -import { makeStyles, mergeClasses } from '@griffel/react'; -import { tokens } from '@fluentui/react-theme'; +import { mergeClasses } from '@griffel/react'; import type { SlotClassNames } from '@fluentui/react-utilities'; import type { MessageBarGroupSlots, MessageBarGroupState } from './MessageBarGroup.types'; @@ -7,49 +6,12 @@ export const messageBarGroupClassNames: SlotClassNames = { root: 'fui-MessageBarGroup', }; -/** - * Styles for the root slot - */ -const useStyles = makeStyles({ - base: { - animationFillMode: 'forwards', - animationDuration: tokens.durationNormal, - }, - - enter: { - animationName: { - from: { - opacity: 0, - transform: 'translateY(-100%)', - }, - to: { - opacity: 1, - transform: 'translateY(0)', - }, - }, - }, - - exit: { - animationName: { - from: { - opacity: 1, - }, - to: { - opacity: 0, - }, - }, - }, -}); - /** * Apply styling to the MessageBarGroup slots based on the state */ export const useMessageBarGroupStyles_unstable = (state: MessageBarGroupState): MessageBarGroupState => { 'use no memo'; - const styles = useStyles(); state.root.className = mergeClasses(messageBarGroupClassNames.root, state.root.className); - state.enterStyles = mergeClasses(styles.base, styles.enter); - state.exitStyles = mergeClasses(styles.base, styles.exit); return state; }; diff --git a/packages/react-components/react-message-bar/library/src/contexts/messageBarTransitionContext.ts b/packages/react-components/react-message-bar/library/src/contexts/messageBarTransitionContext.ts index 0a023b4b0e46c..5c1dea8f74f58 100644 --- a/packages/react-components/react-message-bar/library/src/contexts/messageBarTransitionContext.ts +++ b/packages/react-components/react-message-bar/library/src/contexts/messageBarTransitionContext.ts @@ -1,6 +1,9 @@ import * as React from 'react'; export type MessageBarTransitionContextValue = { + /** + * @deprecated CSS className is no longer used for this transition, replaced by motion components + */ className: string; nodeRef: React.Ref; }; @@ -16,7 +19,7 @@ export const messageBarTransitionContextDefaultValue: MessageBarTransitionContex }; /** - * Context to pass animation className to MessageBar components + * Context to pass nodeRef for animation to MessageBar components * @internal */ export const MessageBarTransitionContextProvider = messageBarTransitionContext.Provider; diff --git a/packages/react-components/react-migration-v0-v9/library/CHANGELOG.json b/packages/react-components/react-migration-v0-v9/library/CHANGELOG.json index a2dc43d9f290b..192dbf6cdb230 100644 --- a/packages/react-components/react-migration-v0-v9/library/CHANGELOG.json +++ b/packages/react-components/react-migration-v0-v9/library/CHANGELOG.json @@ -1,6 +1,21 @@ { "name": "@fluentui/react-migration-v0-v9", "entries": [ + { + "date": "Thu, 19 Dec 2024 14:30:56 GMT", + "tag": "@fluentui/react-migration-v0-v9_v9.2.25", + "version": "9.2.25", + "comments": { + "patch": [ + { + "author": "beachball", + "package": "@fluentui/react-migration-v0-v9", + "comment": "Bump @fluentui/react-components to v9.56.8", + "commit": "f2523077e9c92fc7f065308efe2081fc86846b5b" + } + ] + } + }, { "date": "Wed, 18 Dec 2024 10:59:37 GMT", "tag": "@fluentui/react-migration-v0-v9_v9.2.24", diff --git a/packages/react-components/react-migration-v0-v9/library/CHANGELOG.md b/packages/react-components/react-migration-v0-v9/library/CHANGELOG.md index 07aeab2fbd235..45990059abacf 100644 --- a/packages/react-components/react-migration-v0-v9/library/CHANGELOG.md +++ b/packages/react-components/react-migration-v0-v9/library/CHANGELOG.md @@ -1,9 +1,18 @@ # Change Log - @fluentui/react-migration-v0-v9 -This log was last generated on Wed, 18 Dec 2024 10:59:37 GMT and should not be manually modified. +This log was last generated on Thu, 19 Dec 2024 14:30:56 GMT and should not be manually modified. +## [9.2.25](https://github.com/microsoft/fluentui/tree/@fluentui/react-migration-v0-v9_v9.2.25) + +Thu, 19 Dec 2024 14:30:56 GMT +[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-migration-v0-v9_v9.2.24..@fluentui/react-migration-v0-v9_v9.2.25) + +### Patches + +- Bump @fluentui/react-components to v9.56.8 ([PR #33409](https://github.com/microsoft/fluentui/pull/33409) by beachball) + ## [9.2.24](https://github.com/microsoft/fluentui/tree/@fluentui/react-migration-v0-v9_v9.2.24) Wed, 18 Dec 2024 10:59:37 GMT diff --git a/packages/react-components/react-migration-v0-v9/library/package.json b/packages/react-components/react-migration-v0-v9/library/package.json index 05776bc1b4edc..1a9f2e4164c5a 100644 --- a/packages/react-components/react-migration-v0-v9/library/package.json +++ b/packages/react-components/react-migration-v0-v9/library/package.json @@ -1,6 +1,6 @@ { "name": "@fluentui/react-migration-v0-v9", - "version": "9.2.24", + "version": "9.2.25", "description": "Migration shim components and methods for hybrid v0/v9 applications building on Fluent UI React.", "main": "lib-commonjs/index.js", "module": "lib/index.js", @@ -21,7 +21,7 @@ }, "dependencies": { "@fluentui/react-aria": "^9.13.12", - "@fluentui/react-components": "^9.56.7", + "@fluentui/react-components": "^9.56.8", "@fluentui/react-context-selector": "^9.1.71", "@fluentui/react-icons": "^2.0.245", "@fluentui/react-jsx-runtime": "^9.0.48", diff --git a/packages/react-components/react-migration-v8-v9/library/CHANGELOG.json b/packages/react-components/react-migration-v8-v9/library/CHANGELOG.json index 92821ecf3ead3..9e0442e918717 100644 --- a/packages/react-components/react-migration-v8-v9/library/CHANGELOG.json +++ b/packages/react-components/react-migration-v8-v9/library/CHANGELOG.json @@ -1,6 +1,21 @@ { "name": "@fluentui/react-migration-v8-v9", "entries": [ + { + "date": "Thu, 19 Dec 2024 14:30:56 GMT", + "tag": "@fluentui/react-migration-v8-v9_v9.6.44", + "version": "9.6.44", + "comments": { + "patch": [ + { + "author": "beachball", + "package": "@fluentui/react-migration-v8-v9", + "comment": "Bump @fluentui/react-components to v9.56.8", + "commit": "f2523077e9c92fc7f065308efe2081fc86846b5b" + } + ] + } + }, { "date": "Wed, 18 Dec 2024 10:59:37 GMT", "tag": "@fluentui/react-migration-v8-v9_v9.6.43", diff --git a/packages/react-components/react-migration-v8-v9/library/CHANGELOG.md b/packages/react-components/react-migration-v8-v9/library/CHANGELOG.md index c2377d3ca7685..d3764f2a61d43 100644 --- a/packages/react-components/react-migration-v8-v9/library/CHANGELOG.md +++ b/packages/react-components/react-migration-v8-v9/library/CHANGELOG.md @@ -1,9 +1,18 @@ # Change Log - @fluentui/react-migration-v8-v9 -This log was last generated on Wed, 18 Dec 2024 10:59:37 GMT and should not be manually modified. +This log was last generated on Thu, 19 Dec 2024 14:30:56 GMT and should not be manually modified. +## [9.6.44](https://github.com/microsoft/fluentui/tree/@fluentui/react-migration-v8-v9_v9.6.44) + +Thu, 19 Dec 2024 14:30:56 GMT +[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-migration-v8-v9_v9.6.43..@fluentui/react-migration-v8-v9_v9.6.44) + +### Patches + +- Bump @fluentui/react-components to v9.56.8 ([PR #33409](https://github.com/microsoft/fluentui/pull/33409) by beachball) + ## [9.6.43](https://github.com/microsoft/fluentui/tree/@fluentui/react-migration-v8-v9_v9.6.43) Wed, 18 Dec 2024 10:59:37 GMT diff --git a/packages/react-components/react-migration-v8-v9/library/package.json b/packages/react-components/react-migration-v8-v9/library/package.json index 358eb4a893d51..05702c7ce4348 100644 --- a/packages/react-components/react-migration-v8-v9/library/package.json +++ b/packages/react-components/react-migration-v8-v9/library/package.json @@ -1,6 +1,6 @@ { "name": "@fluentui/react-migration-v8-v9", - "version": "9.6.43", + "version": "9.6.44", "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", @@ -21,7 +21,7 @@ "@ctrl/tinycolor": "3.3.4", "@fluentui/fluent2-theme": "^8.107.118", "@fluentui/react": "^8.122.1", - "@fluentui/react-components": "^9.56.7", + "@fluentui/react-components": "^9.56.8", "@fluentui/react-icons": "^2.0.245", "@fluentui/react-hooks": "^8.8.16", "@griffel/react": "^1.5.22", diff --git a/packages/react-components/react-motion/library/src/factories/createMotionComponent.test.tsx b/packages/react-components/react-motion/library/src/factories/createMotionComponent.test.tsx index 7106dde042397..6eb1ad024ae2f 100644 --- a/packages/react-components/react-motion/library/src/factories/createMotionComponent.test.tsx +++ b/packages/react-components/react-motion/library/src/factories/createMotionComponent.test.tsx @@ -38,6 +38,27 @@ function createElementMock() { } describe('createMotionComponent', () => { + let hasAnimation: boolean; + beforeEach(() => { + if (!global.Animation) { + hasAnimation = false; + global.Animation = { + // @ts-expect-error mock + prototype: { + persist: jest.fn(), + }, + }; + } else { + hasAnimation = true; + } + }); + + afterEach(() => { + if (!hasAnimation) { + // @ts-expect-error mock + delete global.Animation; + } + }); it('creates a motion and plays it', () => { const TestAtom = createMotionComponent(motion); const { animateMock, ElementMock } = createElementMock(); @@ -54,6 +75,24 @@ describe('createMotionComponent', () => { }); }); + it('creates a motion and plays it (without .persist())', () => { + // @ts-expect-error mock + delete global.Animation.prototype.persist; + const TestAtom = createMotionComponent(motion); + const { animateMock, ElementMock } = createElementMock(); + + render( + + + , + ); + + expect(animateMock).toHaveBeenCalledWith(motion.keyframes, { + duration: 500, + fill: 'forwards', + }); + }); + it('supports functions as motion definitions', () => { const fnMotion = jest.fn().mockImplementation(() => motion); const TestAtom = createMotionComponent(fnMotion); diff --git a/packages/react-components/react-motion/library/src/factories/createPresenceComponent.test.tsx b/packages/react-components/react-motion/library/src/factories/createPresenceComponent.test.tsx index 77472e8c855ba..7d09f1af50647 100644 --- a/packages/react-components/react-motion/library/src/factories/createPresenceComponent.test.tsx +++ b/packages/react-components/react-motion/library/src/factories/createPresenceComponent.test.tsx @@ -44,6 +44,28 @@ function createElementMock() { } describe('createPresenceComponent', () => { + let hasAnimation: boolean; + beforeEach(() => { + if (!global.Animation) { + hasAnimation = false; + global.Animation = { + // @ts-expect-error mock + prototype: { + persist: jest.fn(), + }, + }; + } else { + hasAnimation = true; + } + }); + + afterEach(() => { + if (!hasAnimation) { + // @ts-expect-error mock + delete global.Animation; + } + }); + describe('appear', () => { it('does not animate by default', () => { const TestPresence = createPresenceComponent(motion); @@ -71,6 +93,24 @@ describe('createPresenceComponent', () => { expect(animateMock).toHaveBeenCalledWith(enterKeyframes, options); }); + it('animates when is "true" (without .persist())', () => { + // @ts-expect-error mock + delete window.Animation.prototype.persist; + const TestPresence = createPresenceComponent(motion); + const { animateMock, ElementMock } = createElementMock(); + + render( + + + , + ); + + expect(animateMock).toHaveBeenCalledWith(enterKeyframes, { + ...options, + duration: 500, + }); + }); + it('finishes motion when wrapped in motion behaviour context with skip behaviour', async () => { const TestPresence = createPresenceComponent(motion); const { finishMock, ElementMock } = createElementMock(); diff --git a/packages/react-components/react-motion/library/src/hooks/useAnimateAtoms.ts b/packages/react-components/react-motion/library/src/hooks/useAnimateAtoms.ts index cb0a03544d3a2..9bc31e0d2e9ce 100644 --- a/packages/react-components/react-motion/library/src/hooks/useAnimateAtoms.ts +++ b/packages/react-components/react-motion/library/src/hooks/useAnimateAtoms.ts @@ -2,6 +2,9 @@ import * as React from 'react'; import type { AnimationHandle, AtomMotion } from '../types'; function useAnimateAtomsInSupportedEnvironment() { + // eslint-disable-next-line @nx/workspace-no-restricted-globals + const SUPPORTS_PERSIST = typeof window !== 'undefined' && typeof window.Animation?.prototype.persist === 'function'; + return React.useCallback( ( element: HTMLElement, @@ -22,7 +25,12 @@ function useAnimateAtomsInSupportedEnvironment() { ...(isReducedMotion && { duration: 1 }), }); - animation.persist(); + if (SUPPORTS_PERSIST) { + animation.persist(); + } else { + const resultKeyframe = keyframes[keyframes.length - 1]; + Object.assign(element.style ?? {}, resultKeyframe); + } return animation; }); @@ -75,7 +83,7 @@ function useAnimateAtomsInSupportedEnvironment() { }, }; }, - [], + [SUPPORTS_PERSIST], ); } diff --git a/packages/react-components/react-portal-compat/CHANGELOG.json b/packages/react-components/react-portal-compat/CHANGELOG.json index 288104b2d0402..2a97f72c72d31 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": "Thu, 19 Dec 2024 14:30:56 GMT", + "tag": "@fluentui/react-portal-compat_v9.0.176", + "version": "9.0.176", + "comments": { + "patch": [ + { + "author": "beachball", + "package": "@fluentui/react-portal-compat", + "comment": "Bump @fluentui/react-components to v9.56.8", + "commit": "f2523077e9c92fc7f065308efe2081fc86846b5b" + } + ] + } + }, { "date": "Wed, 18 Dec 2024 10:59:37 GMT", "tag": "@fluentui/react-portal-compat_v9.0.175", diff --git a/packages/react-components/react-portal-compat/CHANGELOG.md b/packages/react-components/react-portal-compat/CHANGELOG.md index 9e541f2a01e3e..24aec79e8fa1b 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 Wed, 18 Dec 2024 10:59:37 GMT and should not be manually modified. +This log was last generated on Thu, 19 Dec 2024 14:30:56 GMT and should not be manually modified. +## [9.0.176](https://github.com/microsoft/fluentui/tree/@fluentui/react-portal-compat_v9.0.176) + +Thu, 19 Dec 2024 14:30:56 GMT +[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-portal-compat_v9.0.175..@fluentui/react-portal-compat_v9.0.176) + +### Patches + +- Bump @fluentui/react-components to v9.56.8 ([PR #33409](https://github.com/microsoft/fluentui/pull/33409) by beachball) + ## [9.0.175](https://github.com/microsoft/fluentui/tree/@fluentui/react-portal-compat_v9.0.175) Wed, 18 Dec 2024 10:59:37 GMT diff --git a/packages/react-components/react-portal-compat/package.json b/packages/react-components/react-portal-compat/package.json index 3eaec090a9746..907063c27bb59 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.175", + "version": "9.0.176", "description": "A package that contains compatibility layer for React Portals", "main": "lib-commonjs/index.js", "module": "lib/index.js", @@ -27,7 +27,7 @@ "@swc/helpers": "^0.5.1" }, "peerDependencies": { - "@fluentui/react-components": "^9.56.7", + "@fluentui/react-components": "^9.56.8", "@types/react": ">=16.14.0 <19.0.0", "react": ">=16.14.0 <19.0.0" }, diff --git a/packages/react-components/react-timepicker-compat/library/package.json b/packages/react-components/react-timepicker-compat/library/package.json index a2d65f02399a8..0eca335dda8f2 100644 --- a/packages/react-components/react-timepicker-compat/library/package.json +++ b/packages/react-components/react-timepicker-compat/library/package.json @@ -1,6 +1,6 @@ { "name": "@fluentui/react-timepicker-compat", - "version": "0.2.44", + "version": "0.2.45", "description": "Fluent UI TimePicker Compat Component", "main": "lib-commonjs/index.js", "module": "lib/index.js", diff --git a/packages/react-components/theme-designer/package.json b/packages/react-components/theme-designer/package.json index 31317e4cc70cb..74899a1d5bcf9 100644 --- a/packages/react-components/theme-designer/package.json +++ b/packages/react-components/theme-designer/package.json @@ -17,7 +17,7 @@ "@fluentui/scripts-api-extractor": "*" }, "dependencies": { - "@fluentui/react-components": "^9.56.7", + "@fluentui/react-components": "^9.56.8", "@fluentui/react-context-selector": "^9.1.71", "@fluentui/react-icons": "^2.0.245", "@fluentui/react-storybook-addon-export-to-sandbox": "^0.1.0", diff --git a/packages/react-components/theme-designer/src/colors/index.ts b/packages/react-components/theme-designer/src/colors/index.ts index 7cecca373ae30..eb71c535281b8 100644 --- a/packages/react-components/theme-designer/src/colors/index.ts +++ b/packages/react-components/theme-designer/src/colors/index.ts @@ -1,5 +1,74 @@ -export * from './csswg'; -export * from './geometry'; -export * from './palettes'; -export * from './templates'; -export * from './types'; +export { + D50_to_D65, + D65_to_D50, + LAB_to_sRGB, + LCH_to_Lab, + LCH_to_P3, + LCH_to_r2020, + LCH_to_sRGB, + Lab_to_LCH, + Lab_to_XYZ, + P3_to_LCH, + XYZ_to_Lab, + XYZ_to_lin_2020, + XYZ_to_lin_P3, + XYZ_to_lin_ProPhoto, + XYZ_to_lin_a98rgb, + XYZ_to_lin_sRGB, + XYZ_to_uv, + XYZ_to_xy, + contrast, + gam_2020, + gam_P3, + gam_ProPhoto, + gam_a98rgb, + gam_sRGB, + hslToRgb, + hueToChannel, + lin_2020, + lin_2020_to_XYZ, + lin_P3, + lin_P3_to_XYZ, + lin_ProPhoto, + lin_ProPhoto_to_XYZ, + lin_a98rgb, + lin_a98rgb_to_XYZ, + lin_sRGB, + lin_sRGB_to_XYZ, + naive_CMYK_to_sRGB, + naive_sRGB_to_CMYK, + r2020_to_LCH, + rgbToHsv, + sRGB_to_LAB, + sRGB_to_LCH, + sRGB_to_luminance, + snap_into_gamut, + xy_to_uv, +} from './csswg'; +export { getPointOnCurvePath, getPointsOnCurvePath } from './geometry'; +export { + Lab_to_hex, + curvePathFromPalette, + hexColorsFromPalette, + hex_to_LCH, + hex_to_sRGB, + paletteShadesFromCurve, + sRGB_to_hex, +} from './palettes'; +export { paletteTemplate, themeTemplate } from './templates'; +export type { + Curve, + CurvePath, + CurvedHelixPath, + NamedPalette, + NamedTheme, + Palette, + PaletteConfig, + Theme, + ThemeCollectionInclude, + TokenPackageConfig, + TokenPackageType, + Vec2, + Vec3, + Vec4, +} from './types'; diff --git a/packages/react-conformance/src/utils/index.ts b/packages/react-conformance/src/utils/index.ts index 417145e92af8c..e0d5b3bc53c2c 100644 --- a/packages/react-conformance/src/utils/index.ts +++ b/packages/react-conformance/src/utils/index.ts @@ -1,4 +1,4 @@ -export * from './errorMessages'; -export * from './getCallbackArguments'; +export { errorMessageColors, getErrorMessage, formatErrors, formatArray } from './errorMessages'; +export { type ArgumentName, getCallbackArguments } from './getCallbackArguments'; export { getPackagePath } from './getPackagePath'; -export * from './validateCallbackArguments'; +export { validateCallbackArguments } from './validateCallbackArguments'; diff --git a/packages/react-docsite-components/CHANGELOG.json b/packages/react-docsite-components/CHANGELOG.json index 8b4cca059f34c..2585b860f11c5 100644 --- a/packages/react-docsite-components/CHANGELOG.json +++ b/packages/react-docsite-components/CHANGELOG.json @@ -1,6 +1,21 @@ { "name": "@fluentui/react-docsite-components", "entries": [ + { + "date": "Fri, 20 Dec 2024 07:20:01 GMT", + "tag": "@fluentui/react-docsite-components_v8.13.148", + "version": "8.13.148", + "comments": { + "patch": [ + { + "author": "beachball", + "package": "@fluentui/react-docsite-components", + "comment": "Bump @fluentui/react-monaco-editor to v1.7.266", + "commit": "7f1647fadcd193c0d16e51b314d299ee19ae5746" + } + ] + } + }, { "date": "Wed, 18 Dec 2024 07:20:30 GMT", "tag": "@fluentui/react-docsite-components_v8.13.147", diff --git a/packages/react-docsite-components/CHANGELOG.md b/packages/react-docsite-components/CHANGELOG.md index 0863e3108f4ec..0d0d9c53d902c 100644 --- a/packages/react-docsite-components/CHANGELOG.md +++ b/packages/react-docsite-components/CHANGELOG.md @@ -1,9 +1,18 @@ # Change Log - @fluentui/react-docsite-components -This log was last generated on Wed, 18 Dec 2024 07:20:30 GMT and should not be manually modified. +This log was last generated on Fri, 20 Dec 2024 07:20:01 GMT and should not be manually modified. +## [8.13.148](https://github.com/microsoft/fluentui/tree/@fluentui/react-docsite-components_v8.13.148) + +Fri, 20 Dec 2024 07:20:01 GMT +[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-docsite-components_v8.13.147..@fluentui/react-docsite-components_v8.13.148) + +### Patches + +- Bump @fluentui/react-monaco-editor to v1.7.266 ([PR #33282](https://github.com/microsoft/fluentui/pull/33282) by beachball) + ## [8.13.147](https://github.com/microsoft/fluentui/tree/@fluentui/react-docsite-components_v8.13.147) Wed, 18 Dec 2024 07:20:30 GMT diff --git a/packages/react-docsite-components/package.json b/packages/react-docsite-components/package.json index 332e0c7d90785..85d4c1e9845d1 100644 --- a/packages/react-docsite-components/package.json +++ b/packages/react-docsite-components/package.json @@ -1,6 +1,6 @@ { "name": "@fluentui/react-docsite-components", - "version": "8.13.147", + "version": "8.13.148", "description": "Fluent UI React components for building documentation sites.", "main": "lib-commonjs/index.js", "module": "lib/index.js", @@ -42,7 +42,7 @@ "@fluentui/public-docsite-setup": "^0.3.34", "@fluentui/react-hooks": "^8.8.16", "@fluentui/set-version": "^8.2.23", - "@fluentui/react-monaco-editor": "^1.7.265", + "@fluentui/react-monaco-editor": "^1.7.266", "color-check": "0.0.2", "markdown-to-jsx": "^7.0.0", "office-ui-fabric-core": "^11.0.0", diff --git a/packages/react-examples/package.json b/packages/react-examples/package.json index 4d66a4561fb57..842f999d0a77c 100644 --- a/packages/react-examples/package.json +++ b/packages/react-examples/package.json @@ -36,8 +36,8 @@ "@fluentui/merge-styles": "^8.6.13", "@fluentui/react": "^8.122.1", "@fluentui/react-cards": "^0.205.190", - "@fluentui/react-charting": "^5.23.27", - "@fluentui/react-docsite-components": "^8.13.147", + "@fluentui/react-charting": "^5.23.28", + "@fluentui/react-docsite-components": "^8.13.148", "@fluentui/react-experiments": "^8.14.187", "@fluentui/react-file-type-icons": "^8.12.6", "@fluentui/react-focus": "^8.9.19", diff --git a/packages/react-icon-provider/src/index.ts b/packages/react-icon-provider/src/index.ts index b77b5beee663c..9e6599b016afe 100644 --- a/packages/react-icon-provider/src/index.ts +++ b/packages/react-icon-provider/src/index.ts @@ -1,4 +1,9 @@ import './version'; -export * from './IconProvider'; -export * from './IconProvider.types'; +export { + // eslint-disable-next-line @fluentui/ban-context-export + IconContext, + IconProvider, + useIconSubset, +} from './IconProvider'; +export type { IconProviderProps } from './IconProvider.types'; diff --git a/packages/react-monaco-editor/CHANGELOG.json b/packages/react-monaco-editor/CHANGELOG.json index 472fd9eb9e149..740f2aa7273fb 100644 --- a/packages/react-monaco-editor/CHANGELOG.json +++ b/packages/react-monaco-editor/CHANGELOG.json @@ -1,6 +1,21 @@ { "name": "@fluentui/react-monaco-editor", "entries": [ + { + "date": "Fri, 20 Dec 2024 07:20:01 GMT", + "tag": "@fluentui/react-monaco-editor_v1.7.266", + "version": "1.7.266", + "comments": { + "patch": [ + { + "author": "beachball", + "package": "@fluentui/react-monaco-editor", + "comment": "Bump @fluentui/react-charting to v5.23.28", + "commit": "7f1647fadcd193c0d16e51b314d299ee19ae5746" + } + ] + } + }, { "date": "Wed, 18 Dec 2024 07:20:30 GMT", "tag": "@fluentui/react-monaco-editor_v1.7.265", diff --git a/packages/react-monaco-editor/CHANGELOG.md b/packages/react-monaco-editor/CHANGELOG.md index a460be88d91fe..5e394b3022200 100644 --- a/packages/react-monaco-editor/CHANGELOG.md +++ b/packages/react-monaco-editor/CHANGELOG.md @@ -1,9 +1,18 @@ # Change Log - @fluentui/react-monaco-editor -This log was last generated on Wed, 18 Dec 2024 07:20:30 GMT and should not be manually modified. +This log was last generated on Fri, 20 Dec 2024 07:20:01 GMT and should not be manually modified. +## [1.7.266](https://github.com/microsoft/fluentui/tree/@fluentui/react-monaco-editor_v1.7.266) + +Fri, 20 Dec 2024 07:20:01 GMT +[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-monaco-editor_v1.7.265..@fluentui/react-monaco-editor_v1.7.266) + +### Patches + +- Bump @fluentui/react-charting to v5.23.28 ([PR #33282](https://github.com/microsoft/fluentui/pull/33282) by beachball) + ## [1.7.265](https://github.com/microsoft/fluentui/tree/@fluentui/react-monaco-editor_v1.7.265) Wed, 18 Dec 2024 07:20:30 GMT diff --git a/packages/react-monaco-editor/package.json b/packages/react-monaco-editor/package.json index 667690e29d7d0..a2341d0e51366 100644 --- a/packages/react-monaco-editor/package.json +++ b/packages/react-monaco-editor/package.json @@ -1,6 +1,6 @@ { "name": "@fluentui/react-monaco-editor", - "version": "1.7.265", + "version": "1.7.266", "description": "Live React example editing using monaco", "main": "lib-commonjs/index.js", "module": "lib/index.js", @@ -34,7 +34,7 @@ "@fluentui/example-data": "^8.4.25", "@fluentui/monaco-editor": "^1.3.24", "@fluentui/react-hooks": "^8.8.16", - "@fluentui/react-charting": "^5.23.27", + "@fluentui/react-charting": "^5.23.28", "raw-loader": "4.0.2", "react-syntax-highlighter": "^10.1.3", "tslib": "^2.1.0" diff --git a/packages/react/CHANGELOG.json b/packages/react/CHANGELOG.json index ba3ddc75cd740..36540852fabb6 100644 --- a/packages/react/CHANGELOG.json +++ b/packages/react/CHANGELOG.json @@ -1,6 +1,21 @@ { "name": "@fluentui/react", "entries": [ + { + "date": "Fri, 20 Dec 2024 07:20:00 GMT", + "tag": "@fluentui/react_v8.122.1", + "version": "8.122.1", + "comments": { + "none": [ + { + "author": "vgenaev@gmail.com", + "package": "@fluentui/react", + "commit": "00fada2af3a290e83ba3812ab3440b5ae8a903cf", + "comment": "chore: update react.api.md" + } + ] + } + }, { "date": "Fri, 13 Dec 2024 07:23:12 GMT", "tag": "@fluentui/react_v8.122.1", diff --git a/packages/react/etc/react.api.md b/packages/react/etc/react.api.md index 2cf141de1c40e..94b006c369575 100644 --- a/packages/react/etc/react.api.md +++ b/packages/react/etc/react.api.md @@ -1604,49 +1604,49 @@ export { FabricPerformance } // @public (undocumented) export enum FabricSlots { // (undocumented) - black = 21, + black = 21,// BaseSlots.primaryColor, Shade[Shade.Unshaded]); // (undocumented) - neutralDark = 20, + neutralDark = 20,// BaseSlots.primaryColor, Shade[Shade.Shade1]); // (undocumented) - neutralLight = 11, + neutralLight = 11,// BaseSlots.primaryColor, Shade[Shade.Shade2]); // (undocumented) - neutralLighter = 10, + neutralLighter = 10,// BaseSlots.primaryColor, Shade[Shade.Shade3]); // (undocumented) - neutralLighterAlt = 9, + neutralLighterAlt = 9,// BaseSlots.primaryColor, Shade[Shade.Shade4]); // (undocumented) - neutralPrimary = 19, + neutralPrimary = 19,// BaseSlots.primaryColor, Shade[Shade.Shade5]); // (undocumented) - neutralPrimaryAlt = 18, + neutralPrimaryAlt = 18,// BaseSlots.primaryColor, Shade[Shade.Shade6]); // (undocumented) - neutralQuaternary = 13, + neutralQuaternary = 13,// BaseSlots.primaryColor, Shade[Shade.Shade7]); // (undocumented) - neutralQuaternaryAlt = 12, + neutralQuaternaryAlt = 12,// BaseSlots.primaryColor, Shade[Shade.Shade8]); // (undocumented) - neutralSecondary = 17, + neutralSecondary = 17,// BaseSlots.backgroundColor, Shade[Shade.Shade1]); // (undocumented) - neutralSecondaryAlt = 16, + neutralSecondaryAlt = 16,// BaseSlots.backgroundColor, Shade[Shade.Shade2]); // (undocumented) - neutralTertiary = 15, + neutralTertiary = 15,// BaseSlots.backgroundColor, Shade[Shade.Shade3]); // (undocumented) - neutralTertiaryAlt = 14, + neutralTertiaryAlt = 14,// BaseSlots.backgroundColor, Shade[Shade.Shade4]); // (undocumented) - themeDark = 7, + themeDark = 7,// BaseSlots.backgroundColor, Shade[Shade.Shade5]); // (undocumented) - themeDarkAlt = 6, + themeDarkAlt = 6,// BaseSlots.backgroundColor, Shade[Shade.Shade6]); // bg6 or fg2 // (undocumented) - themeDarker = 8, + themeDarker = 8,// BaseSlots.foregroundColor, Shade[Shade.Shade3]); // (undocumented) - themeLight = 3, + themeLight = 3,// BaseSlots.foregroundColor, Shade[Shade.Shade4]); // (undocumented) - themeLighter = 2, + themeLighter = 2,// BaseSlots.foregroundColor, Shade[Shade.Shade5]); // (undocumented) - themeLighterAlt = 1, + themeLighterAlt = 1,// BaseSlots.foregroundColor, Shade[Shade.Shade6]); // (undocumented) - themePrimary = 0, + themePrimary = 0,// BaseSlots.foregroundColor, Shade[Shade.Unshaded]); // (undocumented) - themeSecondary = 5, + themeSecondary = 5,// BaseSlots.foregroundColor, Shade[Shade.Shade7]); // (undocumented) - themeTertiary = 4, + themeTertiary = 4,// BaseSlots.foregroundColor, Shade[Shade.Shade8]); // (undocumented) white = 22 } diff --git a/packages/react/src/components/ContextualMenu/ContextualMenu.base.tsx b/packages/react/src/components/ContextualMenu/ContextualMenu.base.tsx index 945165847f8d7..c457e42be1a7f 100644 --- a/packages/react/src/components/ContextualMenu/ContextualMenu.base.tsx +++ b/packages/react/src/components/ContextualMenu/ContextualMenu.base.tsx @@ -149,7 +149,7 @@ const _getMenuItemStylesFunction = memoizeFunction( ...styles: (IStyleFunctionOrObject | undefined)[] ): IStyleFunctionOrObject => { return (styleProps: IContextualMenuItemStyleProps) => - concatStyleSetsWithProps(styleProps, getItemStyles, ...styles); + concatStyleSetsWithProps(styleProps, getItemStyles, ...styles) as IContextualMenuItemStyles; }, ); diff --git a/packages/storybook/src/decorators/index.ts b/packages/storybook/src/decorators/index.ts index e3cc4b5aedf72..55f30fc85de53 100644 --- a/packages/storybook/src/decorators/index.ts +++ b/packages/storybook/src/decorators/index.ts @@ -1,2 +1,2 @@ -export * from './withKeytipLayer'; -export * from './withStrictMode'; +export { KeytipLayerWrapper, withKeytipLayer } from './withKeytipLayer'; +export { withStrictMode } from './withStrictMode'; diff --git a/packages/theme/src/colors/index.ts b/packages/theme/src/colors/index.ts index ff7e7f43d24a0..8afd234044eba 100644 --- a/packages/theme/src/colors/index.ts +++ b/packages/theme/src/colors/index.ts @@ -1,2 +1,2 @@ -export * from './FluentColors'; +export { CommunicationColors, NeutralColors, SharedColors } from './FluentColors'; export { DefaultPalette } from './DefaultPalette'; diff --git a/packages/theme/src/createTheme.test.ts b/packages/theme/src/createTheme.test.ts index 229c767e57e85..9e31eda4aced8 100644 --- a/packages/theme/src/createTheme.test.ts +++ b/packages/theme/src/createTheme.test.ts @@ -17,7 +17,7 @@ describe('createTheme', () => { it('applies defaultFontStyle to fonts and retains all other default values', () => { const defaultFontStyle: IRawStyle = { fontFamily: 'Segoe UI' }; - const userTheme = { defaultFontStyle: defaultFontStyle }; + const userTheme = { defaultFontStyle }; const newTheme = createTheme(userTheme); expect(newTheme.fonts.tiny.fontFamily).toEqual('Segoe UI'); @@ -38,7 +38,7 @@ describe('createTheme', () => { it('applies defaultFontStyle and fonts to theme and retains all other default values', () => { const defaultFontStyle: IRawStyle = { fontFamily: 'Foo', fontSize: '10px' }; - const userTheme = { defaultFontStyle: defaultFontStyle, fonts: { small: { fontSize: '20px' } } }; + const userTheme = { defaultFontStyle, fonts: { small: { fontSize: '20px' } } }; const newTheme = createTheme(userTheme); expect(newTheme.fonts.tiny.fontFamily).toEqual('Foo'); diff --git a/packages/theme/src/fonts/createFontStyles.ts b/packages/theme/src/fonts/createFontStyles.ts index 110f20d5a14a2..a0e6ce9e641c0 100644 --- a/packages/theme/src/fonts/createFontStyles.ts +++ b/packages/theme/src/fonts/createFontStyles.ts @@ -60,7 +60,7 @@ function _getLocalizedFontFamily(language: string | null): string { function _createFont(size: string, weight: IFontWeight, fontFamily: string): IRawStyle { return { - fontFamily: fontFamily, + fontFamily, MozOsxFontSmoothing: 'grayscale', WebkitFontSmoothing: 'antialiased', fontSize: size, diff --git a/packages/theme/src/fonts/index.ts b/packages/theme/src/fonts/index.ts index 18bf112b87acc..d92e4cda94448 100644 --- a/packages/theme/src/fonts/index.ts +++ b/packages/theme/src/fonts/index.ts @@ -1,3 +1,3 @@ -export * from './FluentFonts'; +export { FontSizes, FontWeights, IconFontSizes, LocalizedFontFamilies, LocalizedFontNames } from './FluentFonts'; export { createFontStyles } from './createFontStyles'; export { DefaultFontStyles, registerDefaultFontFaces } from './DefaultFontStyles'; diff --git a/packages/theme/src/index.ts b/packages/theme/src/index.ts index 599be1d8215cb..59273db9a4636 100644 --- a/packages/theme/src/index.ts +++ b/packages/theme/src/index.ts @@ -1,11 +1,37 @@ -export * from './mergeThemes'; -export * from './types/index'; -export * from './colors/index'; -export * from './effects/index'; -export * from './spacing/index'; -export * from './motion/index'; -export * from './fonts/index'; -export * from './createTheme'; +export { mergeThemes } from './mergeThemes'; +export type { + ComponentStyles, + ComponentsStyles, + IAnimationStyles, + IAnimationVariables, + IEffects, + IFontStyles, + IPalette, + IPartialTheme, + IScheme, + ISchemeNames, + ISemanticColors, + ISemanticTextColors, + ISpacing, + ITheme, + PartialTheme, + Theme, +} from './types/index'; +export { CommunicationColors, DefaultPalette, NeutralColors, SharedColors } from './colors/index'; +export { DefaultEffects, Depths } from './effects/index'; +export { DefaultSpacing } from './spacing/index'; +export { AnimationStyles, AnimationVariables, MotionAnimations, MotionDurations, MotionTimings } from './motion/index'; +export { + DefaultFontStyles, + FontSizes, + FontWeights, + IconFontSizes, + LocalizedFontFamilies, + LocalizedFontNames, + createFontStyles, + registerDefaultFontFaces, +} from './fonts/index'; +export { createTheme } from './createTheme'; export { FluentTheme } from './FluentTheme'; import './version'; diff --git a/packages/theme/src/motion/index.ts b/packages/theme/src/motion/index.ts index fd97dbeb9b772..ff707884d5a38 100644 --- a/packages/theme/src/motion/index.ts +++ b/packages/theme/src/motion/index.ts @@ -1,2 +1,2 @@ -export * from './FluentMotion'; -export * from './AnimationStyles'; +export { MotionAnimations, MotionDurations, MotionTimings } from './FluentMotion'; +export { AnimationStyles, AnimationVariables } from './AnimationStyles'; diff --git a/packages/theme/src/types/index.ts b/packages/theme/src/types/index.ts index 97e5a3bad18ca..8e7580a51cb20 100644 --- a/packages/theme/src/types/index.ts +++ b/packages/theme/src/types/index.ts @@ -1,4 +1,4 @@ -export * from './Theme'; +export type { ComponentStyles, ComponentsStyles, PartialTheme, Theme } from './Theme'; export type { IEffects } from './IEffects'; export type { IFontStyles } from './IFontStyles'; export type { IPalette } from './IPalette'; diff --git a/packages/web-components/src/tooltip/tooltip.stories.ts b/packages/web-components/src/tooltip/tooltip.stories.ts index 29040e851e0bd..9a1de32d562e7 100644 --- a/packages/web-components/src/tooltip/tooltip.stories.ts +++ b/packages/web-components/src/tooltip/tooltip.stories.ts @@ -1,27 +1,31 @@ -import { html, render, repeat } from '@microsoft/fast-element'; +import { css, html, repeat } from '@microsoft/fast-element'; import { uniqueId } from '@microsoft/fast-web-utilities'; -import { Meta, renderComponent, Story } from '../helpers.stories.js'; +import { type Meta, renderComponent, type StoryArgs, type StoryObj } from '../helpers.stories.js'; import { definition } from './tooltip.definition.js'; -import { Tooltip } from './tooltip.js'; +import type { Tooltip as FluentTooltip } from './tooltip.js'; import { TooltipPositioningOption } from './tooltip.options.js'; -const storyTemplate = () => { - const id = uniqueId('anchor-'); +type Story = StoryObj; - return html` -
- Hover me - - ${story => story.slottedContent?.()} - -
- `; -}; +const tooltipTemplate = html>` + + ${story => story.slottedContent?.()} + +`; + +const storyTemplate = html>` + Hover me + ${tooltipTemplate} +`; export default { title: 'Components/Tooltip', component: definition.name, - render: renderComponent(storyTemplate()), + render: renderComponent(storyTemplate), argTypes: { anchor: { description: 'The target element for the tooltip to anchor on', @@ -48,105 +52,172 @@ export default { }, }, }, -} as unknown as Meta; - -export const Default: Story = args => { - return renderComponent(html`${render(args, storyTemplate)}`)(args); -}; -Default.args = { - slottedContent: () => html`Really long tooltip content goes here. lorem ipsum dolor sit amet.`, -}; +} as Meta; -const iconArrowRight = (rotation = 0) => html` - -`; - -const iconArrowLeft = (rotation = 0) => html` - -`; +export const Default: Story = { + args: { + slottedContent: () => 'Really long tooltip content goes here. Lorem ipsum dolor sit amet.', + }, + decorators: [ + (Story, { canvasElement }) => { + const story = Story() as DocumentFragment; + const id = uniqueId('anchor-'); + const link = story.querySelector('fluent-link'); + link?.setAttribute('id', link.id || id); -const iconArrowUp = (rotation = 0) => html` - -`; + const tooltip = story.querySelector('fluent-tooltip'); + tooltip?.setAttribute('anchor', tooltip.anchor || id); -const glyphs = { - 'above-start': iconArrowRight(-90), - above: iconArrowUp(), - 'above-end': iconArrowLeft(90), - 'below-start': iconArrowLeft(-90), - below: iconArrowUp(180), - 'below-end': iconArrowRight(90), - 'before-top': iconArrowLeft(0), - before: iconArrowUp(-90), - 'before-bottom': iconArrowRight(180), - 'after-top': iconArrowRight(), - after: iconArrowUp(90), - 'after-bottom': iconArrowLeft(180), + canvasElement.style.textAlign = 'center'; + return story; + }, + ], }; -const positionButtonTemplate = html` - - ${x => glyphs[x.id as keyof typeof glyphs]} - -`; +export const Positioning: Story = { + render: renderComponent(html>` + ${repeat( + [ + { + href: '#arrow-step-back-20-regular', + id: 'above-start', + positioning: 'above-start', + transform: 'rotate(-90deg) scaleX(-1)', + slottedContent: () => 'above-start', + }, + { + href: '#arrow-step-out-20-regular', + id: 'above', + positioning: 'above', + transform: 'rotate(0deg)', + slottedContent: () => 'above', + }, + { + href: '#arrow-step-back-20-regular', + id: 'above-end', + positioning: 'above-end', + transform: 'rotate(90deg)', + slottedContent: () => 'above-end', + }, + { + href: '#arrow-step-back-20-regular', + id: 'before-top', + positioning: 'before-top', + transform: 'rotate(0deg)', + slottedContent: () => 'before-top', + }, + { + href: '#arrow-step-out-20-regular', + id: 'before', + positioning: 'before', + transform: 'rotate(-90deg)', + slottedContent: () => 'before', + }, + { + href: '#arrow-step-back-20-regular', + id: 'before-bottom', + positioning: 'before-bottom', + transform: 'rotate(180deg) scaleX(-1)', + slottedContent: () => 'before-bottom', + }, + { + href: '#arrow-step-back-20-regular', + id: 'after-top', + positioning: 'after-top', + transform: 'rotate(0deg) scaleX(-1)', + slottedContent: () => 'after-top', + }, + { + href: '#arrow-step-out-20-regular', + id: 'after', + positioning: 'after', + transform: 'rotate(90deg)', + slottedContent: () => 'after', + }, + { + href: '#arrow-step-back-20-regular', + id: 'after-bottom', + positioning: 'after-bottom', + transform: 'rotate(180deg)', + slottedContent: () => 'after-bottom', + }, + { + href: '#arrow-step-back-20-regular', + id: 'below-start', + positioning: 'below-start', + transform: 'rotate(-90deg)', + slottedContent: () => 'below-start', + }, + { + href: '#arrow-step-out-20-regular', + id: 'below', + positioning: 'below', + transform: 'rotate(180deg)', + slottedContent: () => 'below', + }, + { + href: '#arrow-step-back-20-regular', + id: 'below-end', + positioning: 'below-end', + transform: 'rotate(90deg) scaleX(-1)', + slottedContent: () => 'below-end', + }, + ], -const positionTooltipTemplate = html` - ${x => x.id} -`; + html` + + + + ${tooltipTemplate} + `, + )} + `), + decorators: [ + (Story, context) => { + const { args, canvasElement } = context; + const story = Story() as DocumentFragment; -export const Positioning: Story = renderComponent(html` -
- -
${repeat(x => x.storyItems, positionButtonTemplate)}
+ const styles = css` + .grid { + display: grid; + margin: auto; + gap: 4px; + width: min-content; + grid-template-areas: + '. above-start above above-end .' + 'before-top . . . after-top' + 'before . . . after' + 'before-bottom . . . after-bottom' + '. below-start below below-end .'; + } + `; + styles.addStylesTo(canvasElement); + canvasElement.classList.add('grid'); - ${repeat(x => x.storyItems, positionTooltipTemplate)} -
-`).bind({}); + // Rendering the sprite sheet here prevents it from being included in the code snippet + html` + + + + + + + + + `.render(args, story); -Positioning.args = { - storyItems: Object.keys(TooltipPositioningOption).map(id => ({ id })), + return story; + }, + ], }; diff --git a/packages/web-components/src/tooltip/tooltip.styles.ts b/packages/web-components/src/tooltip/tooltip.styles.ts index 3b9327aaabd37..70fc8548ecab6 100644 --- a/packages/web-components/src/tooltip/tooltip.styles.ts +++ b/packages/web-components/src/tooltip/tooltip.styles.ts @@ -45,6 +45,7 @@ export const styles = css` line-height: ${lineHeightBase200}; margin: unset; /* Remove browser default for [popover] */ max-width: 240px; + overflow: visible; padding: 4px ${spacingHorizontalMNudge} 6px; position: absolute; position-area: var(--position-area); @@ -85,7 +86,7 @@ export const styles = css` --position-area: ${TooltipPositioningOption.below}; } :host([positioning='below-end']) { - --position-area: ${TooltipPositioningOption.below}; + --position-area: ${TooltipPositioningOption['below-end']}; } :host([positioning='before-top']) { --position-area: ${TooltipPositioningOption['before-top']}; diff --git a/scripts/dangerjs/src/detectNonApprovedDependencies/utils/index.ts b/scripts/dangerjs/src/detectNonApprovedDependencies/utils/index.ts index d216c533aa268..1705a9e6cab06 100644 --- a/scripts/dangerjs/src/detectNonApprovedDependencies/utils/index.ts +++ b/scripts/dangerjs/src/detectNonApprovedDependencies/utils/index.ts @@ -1,5 +1,5 @@ export { default as getVersionConstraints } from './getVersionConstraints'; export { default as getRuntimeDependencies } from './getRuntimeDependencies'; export { default as getFailedPackageVersionConstraints } from './getFailedPackageVersionConstraints'; -export * from './getFailedPackageVersionConstraints'; -export * from './packageNameUtils'; +export type { FailedConstraintsExplanation } from './getFailedPackageVersionConstraints'; +export { getPackageName, getPackageVersion } from './packageNameUtils'; diff --git a/scripts/github/src/index.ts b/scripts/github/src/index.ts index 2731c4643b3e6..b184f7ce143e1 100644 --- a/scripts/github/src/index.ts +++ b/scripts/github/src/index.ts @@ -1,3 +1,4 @@ -export * from './constants'; -export * from './pullRequests'; -export * from './types'; +export { fluentRepoDetails } from './constants'; +export type { IGetPullRequestFromCommitParams } from './pullRequests'; +export { getPullRequestForCommit, processPullRequestApiResponse } from './pullRequests'; +export type { IPullRequest, IRepoDetails, IUser } from './types'; diff --git a/yarn.lock b/yarn.lock index 2e46d32ae3ba1..fd3dbfed34482 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2485,10 +2485,10 @@ "@microsoft/tsdoc-config" "~0.16.1" "@rushstack/node-core-library" "3.62.0" -"@microsoft/api-extractor@7.38.5": - version "7.38.5" - resolved "https://registry.yarnpkg.com/@microsoft/api-extractor/-/api-extractor-7.38.5.tgz#51d4cd917a31fa1a5c6d6a02e446526de763ac32" - integrity sha512-c/w2zfqBcBJxaCzpJNvFoouWewcYrUOfeu5ZkWCCIXTF9a/gXM85RGevEzlMAIEGM/kssAAZSXRJIZ3Q5vLFow== +"@microsoft/api-extractor@7.39.0": + version "7.39.0" + resolved "https://registry.yarnpkg.com/@microsoft/api-extractor/-/api-extractor-7.39.0.tgz#41c25f7f522e8b9376debda07364ff234e602eff" + integrity sha512-PuXxzadgnvp+wdeZFPonssRAj/EW4Gm4s75TXzPk09h3wJ8RS3x7typf95B4vwZRrPTQBGopdUl+/vHvlPdAcg== dependencies: "@microsoft/api-extractor-model" "7.28.3" "@microsoft/tsdoc" "0.14.2" @@ -2501,7 +2501,7 @@ resolve "~1.22.1" semver "~7.5.4" source-map "~0.6.1" - typescript "~5.0.4" + typescript "5.3.3" "@microsoft/applicationinsights-analytics-js@3.3.0": version "3.3.0" @@ -22632,6 +22632,25 @@ ts-node@10.9.1: v8-compile-cache-lib "^3.0.1" yn "3.1.1" +ts-node@10.9.2: + version "10.9.2" + resolved "https://registry.yarnpkg.com/ts-node/-/ts-node-10.9.2.tgz#70f021c9e185bccdca820e26dc413805c101c71f" + integrity sha512-f0FFpIdcHgn8zcPSbf1dRevwt047YMnaiJM3u2w2RewrB+fob/zePZcrOyQoLMMO7aBIddLcQIEK5dYjkLnGrQ== + dependencies: + "@cspotcode/source-map-support" "^0.8.0" + "@tsconfig/node10" "^1.0.7" + "@tsconfig/node12" "^1.0.7" + "@tsconfig/node14" "^1.0.0" + "@tsconfig/node16" "^1.0.2" + acorn "^8.4.1" + acorn-walk "^8.1.1" + arg "^4.1.0" + create-require "^1.1.0" + diff "^4.0.1" + make-error "^1.1.1" + v8-compile-cache-lib "^3.0.1" + yn "3.1.1" + ts-toolbelt@9.6.0: version "9.6.0" resolved "https://registry.yarnpkg.com/ts-toolbelt/-/ts-toolbelt-9.6.0.tgz#50a25426cfed500d4a09bd1b3afb6f28879edfd5" @@ -22820,10 +22839,10 @@ typescript-eslint@^8.0.0: "@typescript-eslint/parser" "8.8.1" "@typescript-eslint/utils" "8.8.1" -typescript@5.2.2, typescript@~5.0.4: - version "5.2.2" - resolved "https://registry.yarnpkg.com/typescript/-/typescript-5.2.2.tgz#5ebb5e5a5b75f085f22bc3f8460fba308310fa78" - integrity sha512-mI4WrpHsbCIcwT9cF4FZvr80QUeKvsUsUvKDoR+X/7XHQH98xYD8YHZg7ANtz2GtZt/CBq2QJ0thkGJMHfqc1w== +typescript@5.3.3: + version "5.3.3" + resolved "https://registry.yarnpkg.com/typescript/-/typescript-5.3.3.tgz#b3ce6ba258e72e6305ba66f5c9b452aaee3ffe37" + integrity sha512-pXWcraxM0uxAS+tN0AG/BF2TyqmHO014Z070UsJ+pFvYuRSq8KH8DmWpnbXe0pEPDHXZV3FcAbJkijJ5oNEnWw== typescript@~5.4.2: version "5.4.5"