diff --git a/apps/perf-test-react-components/package.json b/apps/perf-test-react-components/package.json index 5abb8084ee4da0..f5013b053a5a7c 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 00000000000000..4406ac2fe3a9a5 --- /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 555ce58bd23682..97c72699d3970d 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 00000000000000..fd45bdc75342b1 --- /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 00000000000000..dd5166d0fa2db2 --- /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/stories/SwatchPicker/SwatchPicker.stories.tsx b/apps/vr-tests-react-components/src/stories/SwatchPicker/SwatchPicker.stories.tsx index dea1b91753f6f8..9b91ede32dd3cc 100644 --- a/apps/vr-tests-react-components/src/stories/SwatchPicker/SwatchPicker.stories.tsx +++ b/apps/vr-tests-react-components/src/stories/SwatchPicker/SwatchPicker.stories.tsx @@ -1,13 +1,16 @@ import * as React from 'react'; import type { Meta } from '@storybook/react'; import { SwatchPicker } from '@fluentui/react-swatch-picker'; -import { SampleSwatchPickerColors, SampleSwatchPickerImages, SampleSwatchPickerGrid, steps } from './utils'; +import { SampleSwatchPickerColors, SampleSwatchPickerImages, SampleSwatchPickerGrid } from './utils'; +import { Steps } from 'storywright'; import { DARK_MODE, getStoryVariant, HIGH_CONTRAST, RTL, withStoryWrightSteps } from '../../utilities'; export default { title: 'SwatchPicker Converged', - decorators: [story => withStoryWrightSteps({ story, steps })], + decorators: [ + story => withStoryWrightSteps({ story, steps: new Steps().snapshot('default', { cropTo: '.testWrapper' }).end() }), + ], } satisfies Meta; export const Default = () => ( @@ -20,7 +23,6 @@ export const Default = () => ( ); -Default.storyName = 'default'; export const DefaultDarkMode = getStoryVariant(Default, DARK_MODE); @@ -64,7 +66,7 @@ export const Shape = () => ( ); -Size.storyName = 'shape'; +Shape.storyName = 'shape'; export const Spacing = () => ( <> @@ -79,4 +81,4 @@ export const Spacing = () => ( ); -Size.storyName = 'spacing'; +Spacing.storyName = 'spacing'; diff --git a/apps/vr-tests-react-components/src/stories/SwatchPicker/utils.tsx b/apps/vr-tests-react-components/src/stories/SwatchPicker/utils.tsx index d39f7b8378a07e..67bc8b5cdef187 100644 --- a/apps/vr-tests-react-components/src/stories/SwatchPicker/utils.tsx +++ b/apps/vr-tests-react-components/src/stories/SwatchPicker/utils.tsx @@ -1,25 +1,14 @@ import * as React from 'react'; -import { Steps } from 'storywright'; import { SwatchPicker, ColorSwatch, - SwatchPickerProps, + type SwatchPickerProps, ImageSwatch, EmptySwatch, SwatchPickerRow, } from '@fluentui/react-swatch-picker'; import { HeartRegular } from '@fluentui/react-icons'; -export const steps = new Steps() - .snapshot('default', { cropTo: '.testWrapper' }) - .hover('.breadcrumb-sample') - .snapshot('hover', { cropTo: '.testWrapper' }) - .mouseDown('.breadcrumb-sample') - .snapshot('pressed', { cropTo: '.testWrapper' }) - .focus('.breadcrumb-sample') - .snapshot('focused', { cropTo: '.testWrapper' }) - .end(); - export const SampleSwatchPickerColors = (props: SwatchPickerProps) => ( diff --git a/apps/vr-tests-react-components/src/utilities/index.ts b/apps/vr-tests-react-components/src/utilities/index.ts index 177f1172845a51..4cb4101034aa97 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-eslint-plugin-75e61142-a4e1-4046-9076-316b44c873ca.json b/change/@fluentui-eslint-plugin-75e61142-a4e1-4046-9076-316b44c873ca.json new file mode 100644 index 00000000000000..b6692f2581c7b6 --- /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-6dbae5bf-a46a-4276-a3bf-3629fd5542ec.json b/change/@fluentui-react-charting-4af7cac4-c23c-4357-8a25-914a9dd6f699.json similarity index 65% rename from change/@fluentui-react-charting-6dbae5bf-a46a-4276-a3bf-3629fd5542ec.json rename to change/@fluentui-react-charting-4af7cac4-c23c-4357-8a25-914a9dd6f699.json index a0777944ad418f..70c752febc3c2a 100644 --- a/change/@fluentui-react-charting-6dbae5bf-a46a-4276-a3bf-3629fd5542ec.json +++ b/change/@fluentui-react-charting-4af7cac4-c23c-4357-8a25-914a9dd6f699.json @@ -1,6 +1,6 @@ { "type": "patch", - "comment": "Mode check for declarative area chart ", + "comment": "[Horizontal Bar Chart With Axis] Enable multiple legend selection", "packageName": "@fluentui/react-charting", "email": "120183316+srmukher@users.noreply.github.com", "dependentChangeType": "patch" diff --git a/change/@fluentui-react-charting-4c197bf1-3dca-480d-aa17-d97a170246ff.json b/change/@fluentui-react-charting-4c197bf1-3dca-480d-aa17-d97a170246ff.json deleted file mode 100644 index 34b3c04ac4b889..00000000000000 --- a/change/@fluentui-react-charting-4c197bf1-3dca-480d-aa17-d97a170246ff.json +++ /dev/null @@ -1,7 +0,0 @@ -{ - "type": "patch", - "comment": "Enabled Multi Select behaviour of Controlled legends", - "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 00000000000000..132ef6bac19f53 --- /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-dialog-ce4d9fc2-0bea-4c0a-9683-8e86082cd6ad.json b/change/@fluentui-react-dialog-ce4d9fc2-0bea-4c0a-9683-8e86082cd6ad.json deleted file mode 100644 index e866173062b6b3..00000000000000 --- a/change/@fluentui-react-dialog-ce4d9fc2-0bea-4c0a-9683-8e86082cd6ad.json +++ /dev/null @@ -1,7 +0,0 @@ -{ - "type": "patch", - "comment": "docs(react-dialog): Fix doc-comment links that don't translate to storybook", - "packageName": "@fluentui/react-dialog", - "email": "jiangemma@microsoft.com", - "dependentChangeType": "patch" -} diff --git a/change/@fluentui-react-menu-0feb2146-938a-4fbf-bb2b-2d0d6b7e40b8.json b/change/@fluentui-react-menu-0feb2146-938a-4fbf-bb2b-2d0d6b7e40b8.json deleted file mode 100644 index 894d69d9c5c250..00000000000000 --- a/change/@fluentui-react-menu-0feb2146-938a-4fbf-bb2b-2d0d6b7e40b8.json +++ /dev/null @@ -1,7 +0,0 @@ -{ - "type": "patch", - "comment": "docs(react-menu): Fix doc-comment links that don't translate to storybook", - "packageName": "@fluentui/react-menu", - "email": "jiangemma@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 00000000000000..45370fc286bc2a --- /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-motion-f4f8b668-785c-48d9-9d8f-2410472b12f4.json b/change/@fluentui-react-motion-f4f8b668-785c-48d9-9d8f-2410472b12f4.json new file mode 100644 index 00000000000000..81ed563ea2612c --- /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-react-popover-01148df2-489e-4ed3-8b39-6a65518b17c3.json b/change/@fluentui-react-popover-01148df2-489e-4ed3-8b39-6a65518b17c3.json deleted file mode 100644 index 5d2a8de8d910ac..00000000000000 --- a/change/@fluentui-react-popover-01148df2-489e-4ed3-8b39-6a65518b17c3.json +++ /dev/null @@ -1,7 +0,0 @@ -{ - "type": "patch", - "comment": "docs(react-popover): Fix doc-comment links that don't translate to storybook", - "packageName": "@fluentui/react-popover", - "email": "jiangemma@microsoft.com", - "dependentChangeType": "patch" -} diff --git a/change/@fluentui-react-rating-94e96782-4be8-468e-b1a3-0b2ac9a76c62.json b/change/@fluentui-react-rating-94e96782-4be8-468e-b1a3-0b2ac9a76c62.json deleted file mode 100644 index c8443663d4c0e8..00000000000000 --- a/change/@fluentui-react-rating-94e96782-4be8-468e-b1a3-0b2ac9a76c62.json +++ /dev/null @@ -1,7 +0,0 @@ -{ - "type": "patch", - "comment": "fix: Pass missing Rating's itemLabel prop to its state so RatingItem consumes it from context.", - "packageName": "@fluentui/react-rating", - "email": "derdem@microsoft.com", - "dependentChangeType": "patch" -} diff --git a/package.json b/package.json index 09ff1ee2add855..adb02e985a423c 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 1531d60a3003d0..3fb5393e659339 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 d19131b0787530..ab5bf4a01cf110 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 82aa973589eed8..5c7b2b70804217 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 6a37aaa5d4bd9c..ea187657ec1fe8 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 c1e396d956c668..0cde4fb6d5cfbf 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/azure-themes/CHANGELOG.json b/packages/azure-themes/CHANGELOG.json index 58c63f07e88b32..d669b1e6434963 100644 --- a/packages/azure-themes/CHANGELOG.json +++ b/packages/azure-themes/CHANGELOG.json @@ -1,6 +1,36 @@ { "name": "@fluentui/azure-themes", "entries": [ + { + "date": "Mon, 30 Dec 2024 07:21:29 GMT", + "tag": "@fluentui/azure-themes_v8.6.116", + "version": "8.6.116", + "comments": { + "patch": [ + { + "author": "beachball", + "package": "@fluentui/azure-themes", + "comment": "Bump @fluentui/react to v8.122.3", + "commit": "681a95a732fe385a70b8d4537dc489acbcd1c21e" + } + ] + } + }, + { + "date": "Mon, 23 Dec 2024 07:22:58 GMT", + "tag": "@fluentui/azure-themes_v8.6.115", + "version": "8.6.115", + "comments": { + "patch": [ + { + "author": "beachball", + "package": "@fluentui/azure-themes", + "comment": "Bump @fluentui/react to v8.122.2", + "commit": "7b4a3785c6c1d7c207602cad0a1795e3df9122ee" + } + ] + } + }, { "date": "Fri, 13 Dec 2024 07:23:12 GMT", "tag": "@fluentui/azure-themes_v8.6.114", diff --git a/packages/azure-themes/CHANGELOG.md b/packages/azure-themes/CHANGELOG.md index 024ff14c00d602..5ae2581807834e 100644 --- a/packages/azure-themes/CHANGELOG.md +++ b/packages/azure-themes/CHANGELOG.md @@ -1,9 +1,27 @@ # Change Log - @fluentui/azure-themes -This log was last generated on Fri, 13 Dec 2024 07:23:12 GMT and should not be manually modified. +This log was last generated on Mon, 30 Dec 2024 07:21:29 GMT and should not be manually modified. +## [8.6.116](https://github.com/microsoft/fluentui/tree/@fluentui/azure-themes_v8.6.116) + +Mon, 30 Dec 2024 07:21:29 GMT +[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/azure-themes_v8.6.115..@fluentui/azure-themes_v8.6.116) + +### Patches + +- Bump @fluentui/react to v8.122.3 ([PR #33520](https://github.com/microsoft/fluentui/pull/33520) by beachball) + +## [8.6.115](https://github.com/microsoft/fluentui/tree/@fluentui/azure-themes_v8.6.115) + +Mon, 23 Dec 2024 07:22:58 GMT +[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/azure-themes_v8.6.114..@fluentui/azure-themes_v8.6.115) + +### Patches + +- Bump @fluentui/react to v8.122.2 ([PR #33445](https://github.com/microsoft/fluentui/pull/33445) by beachball) + ## [8.6.114](https://github.com/microsoft/fluentui/tree/@fluentui/azure-themes_v8.6.114) Fri, 13 Dec 2024 07:23:12 GMT diff --git a/packages/azure-themes/package.json b/packages/azure-themes/package.json index 2136423a78502a..86a41b7775cd57 100644 --- a/packages/azure-themes/package.json +++ b/packages/azure-themes/package.json @@ -1,6 +1,6 @@ { "name": "@fluentui/azure-themes", - "version": "8.6.114", + "version": "8.6.116", "description": "Azure themes for Fluent UI React", "main": "lib-commonjs/index.js", "module": "lib/index.js", @@ -27,7 +27,7 @@ "@fluentui/scripts-webpack": "*" }, "dependencies": { - "@fluentui/react": "^8.122.1", + "@fluentui/react": "^8.122.3", "@fluentui/set-version": "^8.2.23", "tslib": "^2.1.0" } diff --git a/packages/charts/react-charting/CHANGELOG.json b/packages/charts/react-charting/CHANGELOG.json index 11453229424e10..5f1b766975cb1a 100644 --- a/packages/charts/react-charting/CHANGELOG.json +++ b/packages/charts/react-charting/CHANGELOG.json @@ -1,6 +1,177 @@ { "name": "@fluentui/react-charting", "entries": [ + { + "date": "Mon, 30 Dec 2024 07:21:28 GMT", + "tag": "@fluentui/react-charting_v5.23.33", + "version": "5.23.33", + "comments": { + "patch": [ + { + "author": "120183316+srmukher@users.noreply.github.com", + "package": "@fluentui/react-charting", + "commit": "a2f70fd8119df5fe5c255d8e23d9b11e589168ad", + "comment": "[Area Chart] Support legend multi selection [Area Chart] Support legend multi selection" + }, + { + "author": "120183316+srmukher@users.noreply.github.com", + "package": "@fluentui/react-charting", + "commit": "fc4f676790e169455da7391a45f086f76abc19a3", + "comment": "Select multiple legends for Vertical bar chart" + }, + { + "author": "beachball", + "package": "@fluentui/react-charting", + "comment": "Bump @fluentui/theme-samples to v8.7.192", + "commit": "681a95a732fe385a70b8d4537dc489acbcd1c21e" + }, + { + "author": "beachball", + "package": "@fluentui/react-charting", + "comment": "Bump @fluentui/react to v8.122.3", + "commit": "681a95a732fe385a70b8d4537dc489acbcd1c21e" + } + ] + } + }, + { + "date": "Fri, 27 Dec 2024 07:20:57 GMT", + "tag": "@fluentui/react-charting_v5.23.32", + "version": "5.23.32", + "comments": { + "patch": [ + { + "author": "atishay.jain@microsoft.com", + "package": "@fluentui/react-charting", + "commit": "6a70a11ddb8bac592c4c9b4c12a2705a9ace6686", + "comment": "Support changing legends programatically at runtime and bug fixes" + }, + { + "author": "74965306+Anush2303@users.noreply.github.com", + "package": "@fluentui/react-charting", + "commit": "3e4cc988ffaad3f5e7b0cfa30fb4ba792a0e01c9", + "comment": "Full Yaxis labels in HeatMap chart" + }, + { + "author": "120183316+srmukher@users.noreply.github.com", + "package": "@fluentui/react-charting", + "commit": "864f029751937946ae89425120483d58f2d0875a", + "comment": "Support for multiple legend selection for Vertical Stacked Bar Chart " + }, + { + "author": "74965306+Anush2303@users.noreply.github.com", + "package": "@fluentui/react-charting", + "commit": "99cbe5c9cc9c298d78e10301b37d314b68ba8c52", + "comment": "plotly examples bug fixes" + }, + { + "author": "120183316+srmukher@users.noreply.github.com", + "package": "@fluentui/react-charting", + "commit": "37e5f0bc0cfef1a57d9bd9659217c0ccaabf1030", + "comment": "Enabling multiple legend selection for Grouped Vertical Bar Chart" + } + ] + } + }, + { + "date": "Thu, 26 Dec 2024 07:21:14 GMT", + "tag": "@fluentui/react-charting_v5.23.31", + "version": "5.23.31", + "comments": { + "patch": [ + { + "author": "110246001+krkshitij@users.noreply.github.com", + "package": "@fluentui/react-charting", + "commit": "0dd9a713b54a6d5b5929ac7febd1c7e44c83efca", + "comment": "fix: remove duplicate legends in vertical bar chart" + } + ] + } + }, + { + "date": "Wed, 25 Dec 2024 07:21:55 GMT", + "tag": "@fluentui/react-charting_v5.23.30", + "version": "5.23.30", + "comments": { + "patch": [ + { + "author": "120183316+srmukher@users.noreply.github.com", + "package": "@fluentui/react-charting", + "commit": "fa08fec97a5bc070e2866633c792f7066f0c86e8", + "comment": "Legends multi selection for Donut Charts" + } + ] + } + }, + { + "date": "Mon, 23 Dec 2024 07:22:57 GMT", + "tag": "@fluentui/react-charting_v5.23.29", + "version": "5.23.29", + "comments": { + "patch": [ + { + "author": "110246001+krkshitij@users.noreply.github.com", + "package": "@fluentui/react-charting", + "commit": "7b4a3785c6c1d7c207602cad0a1795e3df9122ee", + "comment": "feat: add functionality to export chart as image" + }, + { + "author": "beachball", + "package": "@fluentui/react-charting", + "comment": "Bump @fluentui/react-focus to v8.9.20", + "commit": "7b4a3785c6c1d7c207602cad0a1795e3df9122ee" + }, + { + "author": "beachball", + "package": "@fluentui/react-charting", + "comment": "Bump @fluentui/theme-samples to v8.7.191", + "commit": "7b4a3785c6c1d7c207602cad0a1795e3df9122ee" + }, + { + "author": "beachball", + "package": "@fluentui/react-charting", + "comment": "Bump @fluentui/react to v8.122.2", + "commit": "7b4a3785c6c1d7c207602cad0a1795e3df9122ee" + } + ] + } + }, + { + "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", + "version": "5.23.27", + "comments": { + "patch": [ + { + "author": "74965306+Anush2303@users.noreply.github.com", + "package": "@fluentui/react-charting", + "commit": "870fdfd57db59eb0c549c6c12645fc50130970a4", + "comment": "Enabled Multi Select behaviour of Controlled legends" + }, + { + "author": "120183316+srmukher@users.noreply.github.com", + "package": "@fluentui/react-charting", + "commit": "835c01b1fd7bcdf86d28f95963950e0e5285319c", + "comment": "Mode check for declarative area chart " + } + ] + } + }, { "date": "Tue, 17 Dec 2024 07:21:19 GMT", "tag": "@fluentui/react-charting_v5.23.26", diff --git a/packages/charts/react-charting/CHANGELOG.md b/packages/charts/react-charting/CHANGELOG.md index 7388bff98d2af2..16476371d8915f 100644 --- a/packages/charts/react-charting/CHANGELOG.md +++ b/packages/charts/react-charting/CHANGELOG.md @@ -1,9 +1,83 @@ # Change Log - @fluentui/react-charting -This log was last generated on Tue, 17 Dec 2024 07:21:19 GMT and should not be manually modified. +This log was last generated on Mon, 30 Dec 2024 07:21:28 GMT and should not be manually modified. +## [5.23.33](https://github.com/microsoft/fluentui/tree/@fluentui/react-charting_v5.23.33) + +Mon, 30 Dec 2024 07:21:28 GMT +[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-charting_v5.23.32..@fluentui/react-charting_v5.23.33) + +### Patches + +- [Area Chart] Support legend multi selection [Area Chart] Support legend multi selection ([PR #33475](https://github.com/microsoft/fluentui/pull/33475) by 120183316+srmukher@users.noreply.github.com) +- Select multiple legends for Vertical bar chart ([PR #33510](https://github.com/microsoft/fluentui/pull/33510) by 120183316+srmukher@users.noreply.github.com) +- Bump @fluentui/theme-samples to v8.7.192 ([PR #33520](https://github.com/microsoft/fluentui/pull/33520) by beachball) +- Bump @fluentui/react to v8.122.3 ([PR #33520](https://github.com/microsoft/fluentui/pull/33520) by beachball) + +## [5.23.32](https://github.com/microsoft/fluentui/tree/@fluentui/react-charting_v5.23.32) + +Fri, 27 Dec 2024 07:20:57 GMT +[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-charting_v5.23.31..@fluentui/react-charting_v5.23.32) + +### Patches + +- Support changing legends programatically at runtime and bug fixes ([PR #33519](https://github.com/microsoft/fluentui/pull/33519) by atishay.jain@microsoft.com) +- Full Yaxis labels in HeatMap chart ([PR #33509](https://github.com/microsoft/fluentui/pull/33509) by 74965306+Anush2303@users.noreply.github.com) +- Support for multiple legend selection for Vertical Stacked Bar Chart ([PR #33466](https://github.com/microsoft/fluentui/pull/33466) by 120183316+srmukher@users.noreply.github.com) +- plotly examples bug fixes ([PR #33507](https://github.com/microsoft/fluentui/pull/33507) by 74965306+Anush2303@users.noreply.github.com) +- Enabling multiple legend selection for Grouped Vertical Bar Chart ([PR #33511](https://github.com/microsoft/fluentui/pull/33511) by 120183316+srmukher@users.noreply.github.com) + +## [5.23.31](https://github.com/microsoft/fluentui/tree/@fluentui/react-charting_v5.23.31) + +Thu, 26 Dec 2024 07:21:14 GMT +[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-charting_v5.23.30..@fluentui/react-charting_v5.23.31) + +### Patches + +- fix: remove duplicate legends in vertical bar chart ([PR #33518](https://github.com/microsoft/fluentui/pull/33518) by 110246001+krkshitij@users.noreply.github.com) + +## [5.23.30](https://github.com/microsoft/fluentui/tree/@fluentui/react-charting_v5.23.30) + +Wed, 25 Dec 2024 07:21:55 GMT +[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-charting_v5.23.29..@fluentui/react-charting_v5.23.30) + +### Patches + +- Legends multi selection for Donut Charts ([PR #33447](https://github.com/microsoft/fluentui/pull/33447) by 120183316+srmukher@users.noreply.github.com) + +## [5.23.29](https://github.com/microsoft/fluentui/tree/@fluentui/react-charting_v5.23.29) + +Mon, 23 Dec 2024 07:22:57 GMT +[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-charting_v5.23.28..@fluentui/react-charting_v5.23.29) + +### Patches + +- feat: add functionality to export chart as image ([PR #33445](https://github.com/microsoft/fluentui/pull/33445) by 110246001+krkshitij@users.noreply.github.com) +- Bump @fluentui/react-focus to v8.9.20 ([PR #33445](https://github.com/microsoft/fluentui/pull/33445) by beachball) +- Bump @fluentui/theme-samples to v8.7.191 ([PR #33445](https://github.com/microsoft/fluentui/pull/33445) by beachball) +- Bump @fluentui/react to v8.122.2 ([PR #33445](https://github.com/microsoft/fluentui/pull/33445) by beachball) + +## [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 +[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-charting_v5.23.26..@fluentui/react-charting_v5.23.27) + +### Patches + +- Enabled Multi Select behaviour of Controlled legends ([PR #33479](https://github.com/microsoft/fluentui/pull/33479) by 74965306+Anush2303@users.noreply.github.com) +- Mode check for declarative area chart ([PR #33467](https://github.com/microsoft/fluentui/pull/33467) by 120183316+srmukher@users.noreply.github.com) + ## [5.23.26](https://github.com/microsoft/fluentui/tree/@fluentui/react-charting_v5.23.26) Tue, 17 Dec 2024 07:21:19 GMT diff --git a/packages/charts/react-charting/etc/react-charting.api.md b/packages/charts/react-charting/etc/react-charting.api.md index 54135c0d0cea04..aab87b0a2ee122 100644 --- a/packages/charts/react-charting/etc/react-charting.api.md +++ b/packages/charts/react-charting/etc/react-charting.api.md @@ -12,6 +12,7 @@ import { IFocusZoneProps } from '@fluentui/react-focus'; import { IHoverCardStyleProps } from '@fluentui/react/lib/HoverCard'; import { IHoverCardStyles } from '@fluentui/react/lib/HoverCard'; import { IOverflowSetProps } from '@fluentui/react/lib/OverflowSet'; +import { IRefObject } from '@fluentui/react/lib/Utilities'; import { IRenderFunction } from '@fluentui/react/lib/Utilities'; import { IStyle } from '@fluentui/react/lib/Styling'; import { IStyle as IStyle_2 } from '@fluentui/react'; @@ -125,6 +126,7 @@ export const DeclarativeChart: React_2.FunctionComponent; // @public export interface DeclarativeChartProps extends React_2.RefAttributes { chartSchema: Schema; + componentRef?: IRefObject; onSchemaChange?: (eventData: Schema) => void; } @@ -267,6 +269,7 @@ export interface ICartesianChartProps { // @deprecated chartLabel?: string; className?: string; + componentRef?: IRefObject; customDateTimeFormatter?: (dateTime: Date) => string; dateLocalizeOptions?: Intl.DateTimeFormatOptions; enabledLegendsWrapLines?: boolean; @@ -352,6 +355,12 @@ export interface ICartesianChartStyles { yAxis?: IStyle; } +// @public (undocumented) +export interface IChart { + // (undocumented) + chartContainer: HTMLElement | null; +} + // @public (undocumented) export interface IChartDataPoint { callOutAccessibilityData?: IAccessibilityProps; @@ -481,6 +490,12 @@ export interface IDataPoint { y: number; } +// @public (undocumented) +export interface IDeclarativeChart { + // (undocumented) + exportAsImage: (opts?: IImageExportOptions) => Promise; +} + // @public (undocumented) export interface IDonutChart { } @@ -488,6 +503,7 @@ export interface IDonutChart { // @public export interface IDonutChartProps extends ICartesianChartProps { calloutProps?: Partial; + componentRef?: IRefObject; culture?: string; data?: IChartProps; enableGradient?: boolean; @@ -536,6 +552,7 @@ export interface IGaugeChartProps { chartValue: number; chartValueFormat?: GaugeValueFormat | ((sweepFraction: [number, number]) => string); className?: string; + componentRef?: IRefObject; culture?: string; enableGradient?: boolean; height?: number; @@ -704,6 +721,7 @@ export interface IHeatMapChartProps extends Pick; rangeValuesForColorScale: string[]; + showYAxisLables?: boolean; styles?: IStyleFunctionOrObject; xAxisDateFormatString?: string; xAxisNumberFormatString?: string; @@ -832,6 +850,18 @@ export interface IHorizontalDataPoint { y: number; } +// @public (undocumented) +export interface IImageExportOptions { + // (undocumented) + background?: string; + // (undocumented) + height?: number; + // (undocumented) + scale?: number; + // (undocumented) + width?: number; +} + // @public export interface ILegend { action?: VoidFunction; @@ -1068,6 +1098,7 @@ export interface IModifiedCartesianChartProps extends ICartesianChartProps { maxOfYVal?: number; onChartMouseLeave?: () => void; points: any; + ref?: IRefObject; showYAxisLables?: boolean; showYAxisLablesTooltip?: boolean; stringDatasetForYAxisDomain?: string[]; @@ -1198,8 +1229,10 @@ export interface ISankeyChartData { export interface ISankeyChartProps { accessibility?: ISankeyChartAccessibilityProps; borderColorsForNodes?: string[]; + calloutProps?: Partial; className?: string; colorsForNodes?: string[]; + componentRef?: IRefObject; data: IChartProps; enableReflow?: boolean; formatNumberOptions?: Intl.NumberFormatOptions; diff --git a/packages/charts/react-charting/package.json b/packages/charts/react-charting/package.json index e8a8153a40fbe5..215ca048c14c50 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.26", + "version": "5.23.33", "description": "React web charting controls for Microsoft fluentui system.", "main": "lib-commonjs/index.js", "module": "lib/index.js", @@ -39,8 +39,8 @@ "jest-canvas-mock": "2.4.0" }, "dependencies": { - "@fluentui/react-focus": "^8.9.19", - "@fluentui/theme-samples": "^8.7.190", + "@fluentui/react-focus": "^8.9.20", + "@fluentui/theme-samples": "^8.7.192", "@microsoft/load-themed-styles": "^1.10.26", "@types/d3-array": "^3.0.0", "@types/d3-axis": "^3.0.0", @@ -66,7 +66,7 @@ "tslib": "^2.1.0" }, "peerDependencies": { - "@fluentui/react": "^8.122.1", + "@fluentui/react": "^8.122.3", "@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/charts/react-charting/src/DeclarativeChart.ts b/packages/charts/react-charting/src/DeclarativeChart.ts index dadcd454679132..ca97cd8fc995f6 100644 --- a/packages/charts/react-charting/src/DeclarativeChart.ts +++ b/packages/charts/react-charting/src/DeclarativeChart.ts @@ -1 +1 @@ -export * from './components/DeclarativeChart/DeclarativeChart'; +export * from './components/DeclarativeChart/index'; diff --git a/packages/charts/react-charting/src/components/AreaChart/AreaChart.base.tsx b/packages/charts/react-charting/src/components/AreaChart/AreaChart.base.tsx index 686fe0babe863b..300ef5a45656be 100644 --- a/packages/charts/react-charting/src/components/AreaChart/AreaChart.base.tsx +++ b/packages/charts/react-charting/src/components/AreaChart/AreaChart.base.tsx @@ -3,7 +3,13 @@ import { max as d3Max, bisector } from 'd3-array'; import { pointer } from 'd3-selection'; import { select as d3Select } from 'd3-selection'; import { area as d3Area, stack as d3Stack, curveMonotoneX as d3CurveBasis, line as d3Line } from 'd3-shape'; -import { classNamesFunction, find, getId, memoizeFunction } from '@fluentui/react/lib/Utilities'; +import { + classNamesFunction, + find, + getId, + initializeComponentRef, + memoizeFunction, +} from '@fluentui/react/lib/Utilities'; import { IAccessibilityProps, CartesianChart, @@ -35,9 +41,11 @@ import { createStringYAxis, formatDate, getSecureProps, + areArraysEqual, } from '../../utilities/index'; import { ILegend, Legends } from '../Legends/index'; import { DirectionalHint } from '@fluentui/react/lib/Callout'; +import { IChart } from '../../types/index'; const getClassNames = classNamesFunction(); @@ -80,9 +88,10 @@ export interface IAreaChartState extends IBasestate { isShowCalloutPending: boolean; /** focused point */ activePoint: string; + selectedLegends: string[]; } -export class AreaChartBase extends React.Component { +export class AreaChartBase extends React.Component implements IChart { public static defaultProps: Partial = { useUTC: true, }; @@ -119,13 +128,17 @@ export class AreaChartBase extends React.Component; public constructor(props: IAreaChartProps) { super(props); + + initializeComponentRef(this); + this._createSet = memoizeFunction(this._createDataSet); this.state = { - selectedLegend: props.legendProps?.selectedLegend ?? '', - activeLegend: '', + selectedLegends: props.legendProps?.selectedLegends || [], + activeLegend: undefined, hoverXValue: '', isCalloutVisible: false, refSelected: null, @@ -148,9 +161,16 @@ export class AreaChartBase extends React.Component { @@ -249,6 +270,10 @@ export class AreaChartBase extends React.Component 0 + ? found.values.filter((value: { legend: string }) => selectedLegends.includes(value.legend)) + : found.values; this.setState({ nearestCircleToHighlight, isCalloutVisible: false, @@ -345,9 +375,9 @@ export class AreaChartBase extends React.Component { - this._onLegendClick(singleChartData.legend); - }, hoverAction: () => { this._handleChartMouseLeave(); this._onLegendHover(singleChartData.legend); @@ -621,10 +636,26 @@ export class AreaChartBase extends React.Component ); }; + private _onLegendSelectionChange( + selectedLegends: string[], + event: React.MouseEvent, + currentLegend?: ILegend, + ): void { + if (this.props.legendProps?.canSelectMultipleLegends) { + this.setState({ selectedLegends }); + } else { + this.setState({ selectedLegends: selectedLegends.slice(-1) }); + } + if (this.props.legendProps?.onChange) { + this.props.legendProps.onChange(selectedLegends, event, currentLegend); + } + } + private _onDataPointClick = (func: (() => void) | undefined) => { if (func) { func(); @@ -776,6 +807,7 @@ export class AreaChartBase extends React.Component this._handleFocus(index, pointIndex, circleId)} onBlur={this._handleBlur} {...getSecureProps(pointOptions)} - r={this._getCircleRadius(xDataPoint, circleRadius, circleId)} + r={this._getCircleRadius(xDataPoint, circleRadius, circleId, legend)} role="img" aria-label={this._getAriaLabel(index, pointIndex)} /> @@ -807,6 +839,7 @@ export class AreaChartBase extends React.Component, ); } @@ -870,8 +903,14 @@ export class AreaChartBase extends React.Component { + private _getCircleRadius = (xDataPoint: number, circleRadius: number, circleId: string, legend: string): number => { const { isCircleClicked, nearestCircleToHighlight, activePoint } = this.state; + + // Show the circle if no legends are selected or if the point's legend is in the selected legends + if (!this._legendHighlighted(legend)) { + return 0; + } + if (isCircleClicked && nearestCircleToHighlight === xDataPoint) { return 1; } else if (nearestCircleToHighlight === xDataPoint || activePoint === circleId) { @@ -894,18 +933,24 @@ export class AreaChartBase extends React.Component { - return ( - this.state.selectedLegend === legend || (this.state.selectedLegend === '' && this.state.activeLegend === legend) - ); + return this._getHighlightedLegend().includes(legend!); }; /** * This function checks if none of the legends is selected or hovered. */ private _noLegendHighlighted = () => { - return this.state.selectedLegend === '' && this.state.activeLegend === ''; + return this._getHighlightedLegend().length === 0; }; + private _getHighlightedLegend() { + return this.state.selectedLegends.length > 0 + ? this.state.selectedLegends + : this.state.activeLegend + ? [this.state.activeLegend] + : []; + } + private _addDefaultColors = (lineChartData?: ILineChartPoints[]): ILineChartPoints[] => { return lineChartData ? lineChartData.map((item, index) => { @@ -930,18 +975,26 @@ export class AreaChartBase extends React.Component e.x === modifiedXVal); // Show details in the callout for the focused point only found.values = found.values.filter((e: { y: number }) => e.y === y); + const filteredValues = this._getFilteredLegendValues(found.values); this.setState({ refSelected: `#${circleId}`, isCalloutVisible: true, hoverXValue: xAxisCalloutData ? xAxisCalloutData : formattedDate, - YValueHover: found.values, - stackCalloutProps: found, - dataPointCalloutProps: found, + YValueHover: filteredValues!, + stackCalloutProps: { ...found, values: filteredValues }, + dataPointCalloutProps: { ...found, values: filteredValues }, activePoint: circleId, }); }; + // eslint-disable-next-line @typescript-eslint/no-explicit-any + private _getFilteredLegendValues = (values: any) => { + !this._noLegendHighlighted() + ? values.filter((value: { legend: string }) => this._legendHighlighted(value.legend)) + : values; + }; + private _handleBlur = () => { this.setState({ refSelected: null, diff --git a/packages/charts/react-charting/src/components/AreaChart/AreaChartRTL.test.tsx b/packages/charts/react-charting/src/components/AreaChart/AreaChartRTL.test.tsx index 19ddb9e8b50c7b..f054dd4a1ceb71 100644 --- a/packages/charts/react-charting/src/components/AreaChart/AreaChartRTL.test.tsx +++ b/packages/charts/react-charting/src/components/AreaChart/AreaChartRTL.test.tsx @@ -606,6 +606,28 @@ describe('Area chart - Subcomponent legend', () => { expect(firstLegend).toHaveAttribute('aria-selected', 'false'); }, ); + + testWithoutWait( + 'Should select multiple legends on single mouse click on legends', + AreaChart, + { data: chartData, legendProps: { canSelectMultipleLegends: true } }, + container => { + const legend1 = screen.queryByText('legend1')?.closest('button'); + expect(legend1).toBeDefined(); + const legend2 = screen.queryByText('legend2')?.closest('button'); + expect(legend2).toBeDefined(); + + fireEvent.click(legend1!); + fireEvent.click(legend2!); + + // Assert + expect(legend1).toHaveAttribute('aria-selected', 'true'); + expect(legend2).toHaveAttribute('aria-selected', 'true'); + expect(getById(container, /graph-areaChart/i)[0]).toHaveAttribute('fill-opacity', '0.7'); + expect(getById(container, /graph-areaChart/i)[1]).toHaveAttribute('fill-opacity', '0.7'); + expect(getById(container, /graph-areaChart/i)[2]).toHaveAttribute('fill-opacity', '0.1'); + }, + ); }); describe('Area chart - Subcomponent callout', () => { diff --git a/packages/charts/react-charting/src/components/AreaChart/__snapshots__/AreaChart.test.tsx.snap b/packages/charts/react-charting/src/components/AreaChart/__snapshots__/AreaChart.test.tsx.snap index b859fc204700b1..346ed811ff1e27 100644 --- a/packages/charts/react-charting/src/components/AreaChart/__snapshots__/AreaChart.test.tsx.snap +++ b/packages/charts/react-charting/src/components/AreaChart/__snapshots__/AreaChart.test.tsx.snap @@ -176,7 +176,7 @@ exports[`AreaChart - mouse events Should render callout correctly on mouseover 1 onFocus={[Function]} onMouseOut={[Function]} onMouseOver={[Function]} - r={8} + r={0} role="img" stroke="red" strokeWidth={3} @@ -747,7 +747,7 @@ exports[`AreaChart - mouse events Should render customized callout on mouseover onFocus={[Function]} onMouseOut={[Function]} onMouseOver={[Function]} - r={8} + r={0} role="img" stroke="red" strokeWidth={3} @@ -1215,7 +1215,7 @@ exports[`AreaChart - mouse events Should render customized callout per stack on onFocus={[Function]} onMouseOut={[Function]} onMouseOver={[Function]} - r={8} + r={0} role="img" stroke="red" strokeWidth={3} diff --git a/packages/charts/react-charting/src/components/CommonComponents/CartesianChart.base.tsx b/packages/charts/react-charting/src/components/CommonComponents/CartesianChart.base.tsx index abc45a725a5e82..a38917dbbe8cf1 100644 --- a/packages/charts/react-charting/src/components/CommonComponents/CartesianChart.base.tsx +++ b/packages/charts/react-charting/src/components/CommonComponents/CartesianChart.base.tsx @@ -9,6 +9,7 @@ import { IModifiedCartesianChartProps, IYValueHover, IHorizontalBarChartWithAxisDataPoint, + IHeatMapChartDataPoint, } from '../../index'; import { convertToLocaleString } from '../../utilities/locale-util'; import { @@ -32,11 +33,13 @@ import { } from '../../utilities/index'; import { LegendShape, Shape } from '../Legends/index'; import { SVGTooltipText } from '../../utilities/SVGTooltipText'; +import { IChart } from '../../types/index'; const getClassNames = classNamesFunction(); const ChartHoverCard = React.lazy(() => import('../../utilities/ChartHoverCard/ChartHoverCard').then(module => ({ default: module.ChartHoverCard })), ); +const chartTypesToCheck = [ChartTypes.HorizontalBarChartWithAxis, ChartTypes.HeatMapChart]; export interface ICartesianChartState { containerWidth: number; @@ -63,9 +66,12 @@ export interface ICartesianChartState { * 2.Callout * 3.Fit parent Continer */ -export class CartesianChartBase extends React.Component { +export class CartesianChartBase + extends React.Component + implements IChart +{ + public chartContainer: HTMLDivElement; private _classNames: IProcessedStyleSet; - private chartContainer: HTMLDivElement; private legendContainer: HTMLDivElement; private minLegendContainerHeight: number = 32; private xAxisElement: SVGSVGElement | null; @@ -137,14 +143,11 @@ export class CartesianChartBase extends React.Component point.y), - `.${this._classNames.yAxis} text`, + if (chartTypesToCheck.includes(this.props.chartType) && this.props.showYAxisLables && this.yAxisElement) { + const maxYAxisLabelLength = this.calculateMaxYAxisLabelLength( + this.props.chartType, + this.props.points, + this._classNames.yAxis!, ); if (this.state.startFromX !== maxYAxisLabelLength) { this.setState({ @@ -190,14 +193,11 @@ export class CartesianChartBase extends React.Component point.y), - `.${this._classNames.yAxis} text`, + if (chartTypesToCheck.includes(this.props.chartType) && this.props.showYAxisLables && this.yAxisElement) { + const maxYAxisLabelLength = this.calculateMaxYAxisLabelLength( + this.props.chartType, + this.props.points, + this._classNames.yAxis!, ); if (this.state.startFromX !== maxYAxisLabelLength) { this.setState({ @@ -216,6 +216,25 @@ export class CartesianChartBase extends React.Component { + if (chartType === ChartTypes.HeatMapChart) { + return calculateLongestLabelWidth( + points[0].data.map((point: IHeatMapChartDataPoint) => point.y), + `.${className} text`, + ); + } else { + return calculateLongestLabelWidth( + points.map((point: IHorizontalBarChartWithAxisDataPoint) => point.y), + `.${className} text`, + ); + } + }; + public render(): JSX.Element { const { calloutProps, @@ -234,7 +253,7 @@ export class CartesianChartBase extends React.Component ); } + /** * Dedicated function to return the Callout JSX Element , which can further be used to only call this when * only the calloutprops and charthover props changes. diff --git a/packages/charts/react-charting/src/components/CommonComponents/CartesianChart.types.ts b/packages/charts/react-charting/src/components/CommonComponents/CartesianChart.types.ts index 227d38446e64e9..d9363dd636742e 100644 --- a/packages/charts/react-charting/src/components/CommonComponents/CartesianChart.types.ts +++ b/packages/charts/react-charting/src/components/CommonComponents/CartesianChart.types.ts @@ -1,5 +1,5 @@ import * as React from 'react'; -import { IStyleFunctionOrObject } from '@fluentui/react/lib/Utilities'; +import { IRefObject, IStyleFunctionOrObject } from '@fluentui/react/lib/Utilities'; import { ITheme, IStyle } from '@fluentui/react/lib/Styling'; import { IOverflowSetProps } from '@fluentui/react/lib/OverflowSet'; import { IFocusZoneProps, FocusZoneDirection } from '@fluentui/react-focus'; @@ -7,6 +7,7 @@ import { ICalloutProps } from '@fluentui/react/lib/Callout'; import { ILegendsProps } from '../Legends/index'; import { IAccessibilityProps, + IChart, IDataPoint, IGroupedVerticalBarChartData, IHeatMapChartDataPoint, @@ -445,6 +446,12 @@ export interface ICartesianChartProps { * Used for enabling negative values in Y axis. */ supportNegativeData?: boolean; + + /** + * Optional callback to access the IChart interface. Use this instead of ref for accessing + * the public methods and properties of the component. + */ + componentRef?: IRefObject; } export interface IYValueHover { @@ -690,4 +697,9 @@ export interface IModifiedCartesianChartProps extends ICartesianChartProps { isRtl: boolean, barWidth: number | undefined, ) => ScaleBand; + + /** + * Callback to access the public methods and properties of the component. + */ + ref?: IRefObject; } diff --git a/packages/charts/react-charting/src/components/DeclarativeChart/DeclarativeChart.tsx b/packages/charts/react-charting/src/components/DeclarativeChart/DeclarativeChart.tsx index c8f199b72fb03e..f617ad73ae663a 100644 --- a/packages/charts/react-charting/src/components/DeclarativeChart/DeclarativeChart.tsx +++ b/packages/charts/react-charting/src/components/DeclarativeChart/DeclarativeChart.tsx @@ -1,15 +1,21 @@ /* eslint-disable @typescript-eslint/naming-convention */ /* eslint-disable @typescript-eslint/no-explicit-any */ import * as React from 'react'; +import { useTheme } from '@fluentui/react'; +import { IRefObject } from '@fluentui/react/lib/Utilities'; import { DonutChart } from '../DonutChart/index'; import { VerticalStackedBarChart } from '../VerticalStackedBarChart/index'; import { + isArrayOrTypedArray, + isDateArray, + isNumberArray, + isMonthArray, + sanitizeJson, + updateXValues, transformPlotlyJsonToDonutProps, transformPlotlyJsonToVSBCProps, transformPlotlyJsonToScatterChartProps, transformPlotlyJsonToHorizontalBarWithAxisProps, - isDateArray, - isNumberArray, transformPlotlyJsonToHeatmapProps, transformPlotlyJsonToSankeyProps, transformPlotlyJsonToGaugeProps, @@ -24,12 +30,8 @@ import { SankeyChart } from '../SankeyChart/SankeyChart'; import { GaugeChart } from '../GaugeChart/index'; import { GroupedVerticalBarChart } from '../GroupedVerticalBarChart/index'; import { VerticalBarChart } from '../VerticalBarChart/index'; -import { useTheme } from '@fluentui/react/lib/Theme'; - -export const UseIsDarkTheme = (): boolean => { - const theme = useTheme(); - return theme?.isInverted ?? false; -}; +import { IImageExportOptions, toImage } from './imageExporter'; +import { IChart } from '../../types/index'; /** * DeclarativeChart schema. @@ -56,6 +58,19 @@ export interface DeclarativeChartProps extends React.RefAttributes void; + + /** + * Optional callback to access the IDeclarativeChart interface. Use this instead of ref for accessing + * the public methods and properties of the component. + */ + componentRef?: IRefObject; +} + +/** + * {@docCategory DeclarativeChart} + */ +export interface IDeclarativeChart { + exportAsImage: (opts?: IImageExportOptions) => Promise; } const useColorMapping = () => { @@ -71,15 +86,23 @@ export const DeclarativeChart: React.FunctionComponent = HTMLDivElement, DeclarativeChartProps >((props, forwardedRef) => { - const { plotlySchema } = props.chartSchema; - const { data, layout, selectedLegends } = plotlySchema; + const { plotlySchema } = sanitizeJson(props.chartSchema); + const { data, layout } = plotlySchema; + let { selectedLegends } = plotlySchema; const xValues = data[0].x; const isXDate = isDateArray(xValues); const isXNumber = isNumberArray(xValues); + const isXMonth = isMonthArray(xValues); const colorMap = useColorMapping(); - const isDarkTheme = UseIsDarkTheme(); + const theme = useTheme(); + const isDarkTheme = theme?.isInverted ?? false; + const chartRef = React.useRef(null); + + if (!isArrayOrTypedArray(selectedLegends)) { + selectedLegends = []; + } - const [activeLegends, setActiveLegends] = React.useState(selectedLegends ?? []); + const [activeLegends, setActiveLegends] = React.useState(selectedLegends); const onActiveLegendsChange = (keys: string[]) => { setActiveLegends(keys); if (props.onSchemaChange) { @@ -87,10 +110,42 @@ export const DeclarativeChart: React.FunctionComponent = } }; + React.useEffect(() => { + // eslint-disable-next-line @typescript-eslint/no-shadow + const { plotlySchema } = sanitizeJson(props.chartSchema); + // eslint-disable-next-line @typescript-eslint/no-shadow + const { selectedLegends } = plotlySchema; + setActiveLegends(selectedLegends ?? []); + }, [props.chartSchema]); + const legendProps = { canSelectMultipleLegends: false, onChange: onActiveLegendsChange, - ...(activeLegends.length > 0 && { selectedLegend: activeLegends[0] }), + selectedLegend: activeLegends.slice(0, 1)[0], + }; + + const exportAsImage = React.useCallback( + (opts?: IImageExportOptions) => { + return toImage(chartRef.current?.chartContainer, { + background: theme.palette.white, + ...opts, + }); + }, + [theme], + ); + + React.useImperativeHandle( + props.componentRef, + () => ({ + exportAsImage, + }), + [exportAsImage], + ); + + const multiSelectLegendProps = { + ...legendProps, + canSelectMultipleLegends: true, + selectedLegends: activeLegends, }; switch (data[0].type) { @@ -98,7 +153,10 @@ export const DeclarativeChart: React.FunctionComponent = return ( ); case 'bar': @@ -107,7 +165,9 @@ export const DeclarativeChart: React.FunctionComponent = return ( ); } else { @@ -115,55 +175,99 @@ export const DeclarativeChart: React.FunctionComponent = return ( ); } return ( ); } case 'scatter': const isAreaChart = data.some((series: any) => series.fill === 'tonexty' || series.fill === 'tozeroy'); - if (isXDate || isXNumber) { + const renderChart = (chartProps: any) => { if (isAreaChart) { return ( ); } return ( ); + }; + if (isXDate || isXNumber) { + const chartProps = { + ...transformPlotlyJsonToScatterChartProps({ data, layout }, isAreaChart, colorMap, isDarkTheme), + legendProps, + componentRef: chartRef, + calloutProps: { layerProps: { eventBubblingEnabled: true } }, + }; + return renderChart(chartProps); + } else if (isXMonth) { + const updatedData = data.map((dataPoint: any) => ({ + ...dataPoint, + x: updateXValues(dataPoint.x), + })); + const chartProps = { + ...transformPlotlyJsonToScatterChartProps({ data: updatedData, layout }, isAreaChart, colorMap, isDarkTheme), + legendProps, + componentRef: chartRef, + calloutProps: { layerProps: { eventBubblingEnabled: true } }, + }; + return renderChart(chartProps); } return ( ); case 'heatmap': - return ; + return ( + + ); case 'sankey': - return ; + return ( + + ); case 'indicator': if (data?.[0]?.mode?.includes('gauge')) { return ( ); } @@ -172,11 +276,13 @@ export const DeclarativeChart: React.FunctionComponent = return ( ); default: - return
Unsupported Schema
; + throw new Error('Unsupported chart schema'); } }); DeclarativeChart.displayName = 'DeclarativeChart'; diff --git a/packages/charts/react-charting/src/components/DeclarativeChart/PlotlySchemaAdapter.ts b/packages/charts/react-charting/src/components/DeclarativeChart/PlotlySchemaAdapter.ts index 70b9aa4b8dc952..da6c97e12fbdb9 100644 --- a/packages/charts/react-charting/src/components/DeclarativeChart/PlotlySchemaAdapter.ts +++ b/packages/charts/react-charting/src/components/DeclarativeChart/PlotlySchemaAdapter.ts @@ -33,7 +33,38 @@ const isDate = (value: any): boolean => !isNaN(Date.parse(value)); const isNumber = (value: any): boolean => !isNaN(parseFloat(value)) && isFinite(value); export const isDateArray = (array: any[]): boolean => isArrayOrTypedArray(array) && array.every(isDate); export const isNumberArray = (array: any[]): boolean => isArrayOrTypedArray(array) && array.every(isNumber); +export const isMonthArray = (array: any[]): boolean => { + if (array && array.length > 0) { + const presentYear = new Date().getFullYear(); + return array.every(possiblyMonthValue => { + return isDate(`${possiblyMonthValue} 01, ${presentYear}`); + }); + } + return false; +}; +export const updateXValues = (xValues: any[]): any[] => { + const presentYear = new Date().getFullYear(); + const dates = xValues.map(possiblyMonthValue => { + const parsedDate = `${possiblyMonthValue} 01, ${presentYear}`; + return isDate(parsedDate) ? new Date(parsedDate) : null; + }); + for (let i = dates.length - 1; i > 0; i--) { + const currentMonth = dates[i]!.getMonth(); + const previousMonth = dates[i - 1]!.getMonth(); + const currentYear = dates[i]!.getFullYear(); + const previousYear = dates[i - 1]!.getFullYear(); + if (previousMonth >= currentMonth) { + dates[i - 1]!.setFullYear(dates[i]!.getFullYear() - 1); + } else if (previousYear > currentYear) { + dates[i - 1]!.setFullYear(currentYear); + } + } + xValues = xValues.map((month, index) => { + return `${month} 01, ${dates[index]!.getFullYear()}`; + }); + return xValues; +}; export const getColor = ( legendLabel: string, colorMap: React.MutableRefObject>, @@ -65,11 +96,11 @@ export const transformPlotlyJsonToDonutProps = ( }; }); - const width: number = layout?.width || 440; - const height: number = layout?.height || 220; - const hideLabels = firstData.textinfo ? !['value', 'percent'].includes(firstData.textinfo) : false; - const donutMarginHorizontal = hideLabels ? 0 : 80; - const donutMarginVertical = 40 + (hideLabels ? 0 : 40); + const width: number = typeof layout?.width === 'number' ? layout?.width : 440; + const height: number = typeof layout?.height === 'number' ? layout?.height : 220; + const hideLabels: boolean = firstData.textinfo ? !['value', 'percent'].includes(firstData.textinfo) : false; + const donutMarginHorizontal: number = hideLabels ? 0 : 80; + const donutMarginVertical: number = 40 + (hideLabels ? 0 : 40); const innerRadius: number = firstData.hole ? firstData.hole * (Math.min(width - donutMarginHorizontal, height - donutMarginVertical) / 2) : 0; @@ -77,7 +108,7 @@ export const transformPlotlyJsonToDonutProps = ( const styles: IDonutChartProps['styles'] = { root: { '[class^="arcLabel"]': { - fontSize: firstData.textfont?.size, + ...(typeof firstData.textfont?.size === 'number' ? { fontSize: firstData.textfont.size } : {}), }, }, }; @@ -112,7 +143,7 @@ export const transformPlotlyJsonToVSBCProps = ( mapXToDataPoints[x] = { xAxisPoint: x, chartData: [], lineData: [] }; } const legend: string = series.name || `Series ${index1 + 1}`; - if (series.type === 'bar') { + if (series.type === 'bar' || series.type === 'scatter') { const color = getColor(legend, colorMap, isDarkTheme); mapXToDataPoints[x].chartData.push({ legend, @@ -162,6 +193,7 @@ export const transformPlotlyJsonToGVBCProps = ( mapXToDataPoints[x].series.push({ key: legend, data: series.y?.[index2], + xAxisCalloutData: x as string, color, legend, }); @@ -222,8 +254,8 @@ export const transformPlotlyJsonToVBCProps = ( const totalDataPoints = d3Merge(buckets).length; buckets.forEach(bucket => { - const legend = series.name || `Series ${index + 1}`; - const color = getColor(legend, colorMap, isDarkTheme); + const legend: string = series.name || `Series ${index + 1}`; + const color: string = getColor(legend, colorMap, isDarkTheme); let y = bucket.length; if (series.histnorm === 'percent') { @@ -256,10 +288,9 @@ export const transformPlotlyJsonToVBCProps = ( return { data: vbcData, - chartTitle: layout?.title, + chartTitle: typeof layout?.title === 'string' ? layout?.title : '', // width: layout?.width, // height: layout?.height, - hideLegend: true, barWidth: 24, supportNegativeData: true, }; @@ -278,7 +309,7 @@ export const transformPlotlyJsonToScatterChartProps = ( const isString = typeof xValues[0] === 'string'; const isXDate = isDateArray(xValues); const isXNumber = isNumberArray(xValues); - const legend = series.name || `Series ${index + 1}`; + const legend: string = series.name || `Series ${index + 1}`; const lineColor = getColor(legend, colorMap, isDarkTheme); return { @@ -292,7 +323,7 @@ export const transformPlotlyJsonToScatterChartProps = ( }); const chartProps: IChartProps = { - chartTitle: layout.title || '', + chartTitle: typeof layout.title === 'string' ? layout.title : '', lineChartData: chartData, }; @@ -330,10 +361,10 @@ export const transformPlotlyJsonToHorizontalBarWithAxisProps = ( }) .flat(); - const chartHeight = layout.height || 450; - const margin = layout.margin?.l || 0; - const padding = layout.margin?.pad || 0; - const availableHeight = chartHeight - margin - padding; + const chartHeight: number = typeof layout.height === 'number' ? layout.height : 450; + const margin: number = typeof layout.margin?.l === 'number' ? layout.margin?.l : 0; + const padding: number = typeof layout.margin?.pad === 'number' ? layout.margin?.pad : 0; + const availableHeight: number = chartHeight - margin - padding; const numberOfBars = data[0].y.length; const scalingFactor = 0.01; const gapFactor = 1 / (1 + scalingFactor * numberOfBars); @@ -341,13 +372,13 @@ export const transformPlotlyJsonToHorizontalBarWithAxisProps = ( return { data: chartData, - chartTitle: layout.title || '', + chartTitle: typeof layout.title === 'string' ? layout.title : '', barHeight, showYAxisLables: true, styles: { root: { height: chartHeight, - width: layout.width || 600, + width: typeof layout.width === 'number' ? layout.width : 600, }, }, }; @@ -375,7 +406,7 @@ export const transformPlotlyJsonToHeatmapProps = (jsonObj: any): IHeatMapChartPr }); }); const heatmapData: IHeatMapChartData = { - legend: firstData.name || '', + legend: typeof firstData.name === 'string' ? firstData.name : '', data: heatmapDataPoints, value: 0, }; @@ -391,6 +422,7 @@ export const transformPlotlyJsonToHeatmapProps = (jsonObj: any): IHeatMapChartPr domainValuesForColorScale, rangeValuesForColorScale, hideLegend: true, + showYAxisLables: true, }; }; @@ -429,17 +461,17 @@ export const transformPlotlyJsonToSankeyProps = ( }), }; - const width: number = layout?.width || 440; - const height: number = layout?.height || 220; + const width: number = typeof layout?.width === 'number' ? layout?.width : 440; + const height: number = typeof layout?.height === 'number' ? layout?.height : 220; const styles: ISankeyChartProps['styles'] = { root: { - fontSize: layout.font?.size, + ...(typeof layout.font?.size === 'number' ? { fontSize: layout.font?.size } : {}), }, }; const shouldResize: number = width + height; return { data: { - chartTitle: layout?.title, + chartTitle: typeof layout?.title === 'string' ? layout?.title : '', SankeyChartData: sankeyChartData, }, width, @@ -458,15 +490,23 @@ export const transformPlotlyJsonToGaugeProps = ( const { data, layout } = jsonObj; const firstData = data[0]; - const segments = firstData.gauge?.steps?.map((step: any, index: number): IGaugeChartSegment => { - const legend = step.name || `Segment ${index + 1}`; - const color = getColor(legend, colorMap, isDarkTheme); - return { - legend, - size: step.range?.[1] - step.range?.[0], - color, - }; - }); + const segments = firstData.gauge?.steps?.length + ? firstData.gauge.steps.map((step: any, index: number): IGaugeChartSegment => { + const legend = step.name || `Segment ${index + 1}`; + const color = getColor(legend, colorMap, isDarkTheme); + return { + legend, + size: step.range?.[1] - step.range?.[0], + color, + }; + }) + : [ + { + legend: 'Segment 1', + size: (firstData.gauge?.range?.[1] ?? 0) - (firstData.gauge?.range?.[0] ?? 0), + color: getColor('Segment 1', colorMap, isDarkTheme), + }, + ]; let sublabel: string | undefined; let sublabelColor: string | undefined; @@ -491,25 +531,45 @@ export const transformPlotlyJsonToGaugeProps = ( return { segments, - chartValue: firstData.value, - chartTitle: firstData.title?.text, + chartValue: typeof firstData.value === 'number' ? firstData.value : 0, + chartTitle: typeof firstData.title?.text === 'string' ? firstData.title?.text : '', sublabel, // range values can be null - minValue: firstData.gauge?.axis?.range?.[0] ?? undefined, - maxValue: firstData.gauge?.axis?.range?.[1] ?? undefined, + minValue: typeof firstData.gauge?.axis?.range?.[0] === 'number' ? firstData.gauge?.axis?.range?.[0] : undefined, + maxValue: typeof firstData.gauge?.axis?.range?.[1] === 'number' ? firstData.gauge?.axis?.range?.[1] : undefined, chartValueFormat: () => firstData.value, - width: layout?.width, - height: layout?.height, - hideLegend: true, + width: typeof layout?.width === 'number' ? layout?.width : 0, + height: typeof layout?.height === 'number' ? layout?.height : 0, styles, }; }; +const MAX_DEPTH = 8; +export const sanitizeJson = (jsonObject: any, depth: number = 0): any => { + if (depth > MAX_DEPTH) { + throw new Error('Maximum json depth exceeded'); + } + + if (typeof jsonObject === 'object' && jsonObject !== null) { + for (const key in jsonObject) { + if (jsonObject.hasOwnProperty(key)) { + if (typeof jsonObject[key] === 'string') { + jsonObject[key] = jsonObject[key].replace(//g, '>'); + } else { + jsonObject[key] = sanitizeJson(jsonObject[key], depth + 1); + } + } + } + } + + return jsonObject; +}; + function isTypedArray(a: any) { return ArrayBuffer.isView(a) && !(a instanceof DataView); } -function isArrayOrTypedArray(a: any) { +export function isArrayOrTypedArray(a: any) { return Array.isArray(a) || isTypedArray(a); } diff --git a/packages/charts/react-charting/src/components/DeclarativeChart/imageExporter.ts b/packages/charts/react-charting/src/components/DeclarativeChart/imageExporter.ts new file mode 100644 index 00000000000000..3bad277b20a08b --- /dev/null +++ b/packages/charts/react-charting/src/components/DeclarativeChart/imageExporter.ts @@ -0,0 +1,266 @@ +import { create as d3Create, select as d3Select, Selection } from 'd3-selection'; + +/** + * {@docCategory DeclarativeChart} + */ +export interface IImageExportOptions { + width?: number; + height?: number; + scale?: number; + background?: string; +} + +export function toImage(chartContainer?: HTMLElement | null, opts: IImageExportOptions = {}): Promise { + return new Promise((resolve, reject) => { + if (!chartContainer) { + return reject(new Error('Chart container is not defined')); + } + + try { + const background = 'white'; // Background is coming as --var(xxx) when used with v8 wrapper in v9 + const svg = toSVG(chartContainer, background); + + const svgData = new XMLSerializer().serializeToString(svg.node); + const svgDataUrl = 'data:image/svg+xml;base64,' + btoa(unescapePonyfill(encodeURIComponent(svgData))); + + svgToPng(svgDataUrl, { + width: opts.width || svg.width, + height: opts.height || svg.height, + scale: opts.scale, + }) + .then(resolve) + .catch(reject); + } catch (err) { + return reject(err); + } + }); +} + +function toSVG(chartContainer: HTMLElement, background: string) { + const svg = chartContainer.querySelector('svg'); + if (!svg) { + throw new Error('SVG not found'); + } + + const { width: svgWidth, height: svgHeight } = svg.getBoundingClientRect(); + const classNames = new Set(); + const legendGroup = cloneLegendsToSVG(chartContainer, svgWidth, svgHeight, classNames); + const w1 = Math.max(svgWidth, legendGroup.width); + const h1 = svgHeight + legendGroup.height; + const clonedSvg = d3Select(svg.cloneNode(true) as SVGSVGElement) + .attr('width', null) + .attr('height', null) + .attr('viewBox', null); + + if (legendGroup.node) { + clonedSvg.append(() => legendGroup.node); + } + clonedSvg + .insert('rect', ':first-child') + .attr('x', 0) + .attr('y', 0) + .attr('width', w1) + .attr('height', h1) + .attr('fill', background); + + const svgElements = svg.getElementsByTagName('*'); + const styleSheets = document.styleSheets; + const styleRules: string[] = []; + + for (let i = svgElements.length - 1; i--; ) { + svgElements[i].classList.forEach(className => { + classNames.add(`.${className}`); + }); + } + + for (let i = 0; i < styleSheets.length; i++) { + const rules = styleSheets[i].cssRules; + for (let j = 0; j < rules.length; j++) { + if (rules[j].constructor.name === 'CSSStyleRule') { + const selectorText = (rules[j] as CSSStyleRule).selectorText; + const hasClassName = selectorText.split(' ').some(word => classNames.has(word)); + + if (hasClassName) { + styleRules.push(rules[j].cssText); + } + } + } + } + + const xmlDocument = new DOMParser().parseFromString('', 'image/svg+xml'); + const styleNode = xmlDocument.createCDATASection(styleRules.join(' ')); + clonedSvg.insert('defs', ':first-child').append('style').attr('type', 'text/css').node()!.appendChild(styleNode); + + clonedSvg.attr('width', w1).attr('height', h1).attr('viewBox', `0 0 ${w1} ${h1}`); + + return { + node: clonedSvg.node()!, + width: w1, + height: h1, + }; +} + +function cloneLegendsToSVG(chartContainer: HTMLElement, svgWidth: number, svgHeight: number, classNames: Set) { + const legendButtons = chartContainer.querySelectorAll(` + button[class^="legend-"], + [class^="legendContainer-"] div[class^="overflowIndicationTextStyle-"], + [class^="legendsContainer-"] div[class^="overflowIndicationTextStyle-"] + `); + if (legendButtons.length === 0) { + return { + node: null, + width: 0, + height: 0, + }; + } + + const legendGroup = d3Create('svg:g'); + let legendX = 0; + let legendY = 8; + let legendLine: Selection[] = []; + const legendLines: (typeof legendLine)[] = []; + const legendLineWidths: number[] = []; + + for (let i = 0; i < legendButtons.length; i++) { + const { width: legendWidth } = legendButtons[i].getBoundingClientRect(); + const legendItem = legendGroup.append('g'); + + legendLine.push(legendItem); + if (legendX + legendWidth > svgWidth && legendLine.length > 1) { + legendLine.pop(); + legendLines.push(legendLine); + legendLineWidths.push(legendX); + + legendLine = [legendItem]; + legendX = 0; + legendY += 32; + } + + let legendText: HTMLDivElement | null; + let textOffset = 0; + + if (legendButtons[i].tagName.toLowerCase() === 'button') { + const legendRect = legendButtons[i].querySelector('[class^="rect"]'); + const { backgroundColor: legendColor, borderColor: legendBorderColor } = getComputedStyle(legendRect!); + + legendText = legendButtons[i].querySelector('[class^="text"]'); + legendText!.classList.forEach(className => classNames.add(`.${className}`)); + legendItem + .append('rect') + .attr('x', legendX + 8) + .attr('y', svgHeight + legendY + 8) + .attr('width', 12) + .attr('height', 12) + .attr('fill', legendColor) + .attr('stroke-width', 1) + .attr('stroke', legendBorderColor); + textOffset = 28; + } else { + legendText = legendButtons[i] as HTMLDivElement; + legendText.classList.forEach(className => classNames.add(`.${className}`)); + textOffset = 8; + } + + legendItem + .append('text') + .attr('x', legendX + textOffset) + .attr('y', svgHeight + legendY + 8) + .attr('dominant-baseline', 'hanging') + .attr('class', legendText!.getAttribute('class')) + .text(legendText!.textContent); + legendX += legendWidth; + } + + legendLines.push(legendLine); + legendLineWidths.push(legendX); + legendY += 32; + + const centerLegends = true; + if (centerLegends) { + legendLines.forEach((ln, idx) => { + const offsetX = Math.max((svgWidth - legendLineWidths[idx]) / 2, 0); + ln.forEach(item => { + item.attr('transform', `translate(${offsetX}, 0)`); + }); + }); + } + + return { + node: legendGroup.node(), + width: Math.max(...legendLineWidths), + height: legendY, + }; +} + +function svgToPng(svgDataUrl: string, opts: IImageExportOptions = {}): Promise { + return new Promise((resolve, reject) => { + const scale = opts.scale || 1; + const w0 = opts.width || 300; + const h0 = opts.height || 150; + const w1 = scale * w0; + const h1 = scale * h0; + + const canvas = document.createElement('canvas'); + const img = new Image(); + + canvas.width = w1; + canvas.height = h1; + + img.onload = function () { + const ctx = canvas.getContext('2d'); + if (!ctx) { + return reject(new Error('Canvas context is null')); + } + + ctx.clearRect(0, 0, w1, h1); + ctx.drawImage(img, 0, 0, w1, h1); + + const imgData = canvas.toDataURL('image/png'); + resolve(imgData); + }; + + img.onerror = function (err) { + reject(err); + }; + + img.src = svgDataUrl; + }); +} + +const hex2 = /^[\da-f]{2}$/i; +const hex4 = /^[\da-f]{4}$/i; + +/** + * A ponyfill for the deprecated `unescape` method, taken from the `core-js` library. + * + * Source: {@link https://github.com/zloirock/core-js/blob/167136f479d3b8519953f2e4c534ecdd1031d3cf/packages/core-js/modules/es.unescape.js core-js/packages/core-js/modules/es.unescape.js} + */ +function unescapePonyfill(str: string) { + let result = ''; + const length = str.length; + let index = 0; + let chr; + let part; + while (index < length) { + chr = str.charAt(index++); + if (chr === '%') { + if (str.charAt(index) === 'u') { + part = str.slice(index + 1, index + 5); + if (hex4.exec(part)) { + result += String.fromCharCode(parseInt(part, 16)); + index += 5; + continue; + } + } else { + part = str.slice(index, index + 2); + if (hex2.exec(part)) { + result += String.fromCharCode(parseInt(part, 16)); + index += 2; + continue; + } + } + } + result += chr; + } + return result; +} diff --git a/packages/charts/react-charting/src/components/DeclarativeChart/index.ts b/packages/charts/react-charting/src/components/DeclarativeChart/index.ts new file mode 100644 index 00000000000000..64d5b58644526d --- /dev/null +++ b/packages/charts/react-charting/src/components/DeclarativeChart/index.ts @@ -0,0 +1,2 @@ +export * from './DeclarativeChart'; +export type { IImageExportOptions } from './imageExporter'; diff --git a/packages/charts/react-charting/src/components/DonutChart/Arc/Arc.tsx b/packages/charts/react-charting/src/components/DonutChart/Arc/Arc.tsx index 7d7baef9680452..ff1b9a261948b3 100644 --- a/packages/charts/react-charting/src/components/DonutChart/Arc/Arc.tsx +++ b/packages/charts/react-charting/src/components/DonutChart/Arc/Arc.tsx @@ -31,12 +31,11 @@ export class Arc extends React.Component { } public render(): JSX.Element { - const { arc, href, focusedArcId } = this.props; + const { arc, href, focusedArcId, activeArc } = this.props; const getClassNames = classNamesFunction(); const id = this.props.uniqText! + this.props.data!.data.legend!.replace(/\s+/, '') + this.props.data!.data.data; const opacity: number = - this.props.activeArc === this.props.data!.data.legend || this.props.activeArc === '' ? 1 : 0.1; - + activeArc && activeArc.length > 0 ? (activeArc.includes(this.props.data?.data.legend!) ? 1 : 0.1) : 1; const startAngle = this.props.data?.startAngle ?? 0; const endAngle = (this.props.data?.endAngle ?? 0) - startAngle; const cornerRadius = this.props.roundCorners ? 3 : 0; @@ -70,7 +69,9 @@ export class Arc extends React.Component { d={arc.cornerRadius(cornerRadius)(this.props.data)} onFocus={this._onFocus.bind(this, this.props.data!.data, id)} className={classNames.root} - data-is-focusable={this.props.activeArc === this.props.data!.data.legend || this.props.activeArc === ''} + data-is-focusable={ + this._shouldHighlightArc(this.props.data!.data.legend!) || this.props.activeArc?.length === 0 + } onMouseOver={this._hoverOn.bind(this, this.props.data!.data)} onMouseMove={this._hoverOn.bind(this, this.props.data!.data)} onMouseLeave={this._hoverOff} @@ -123,13 +124,18 @@ export class Arc extends React.Component { return point.callOutAccessibilityData?.ariaLabel || (legend ? `${legend}, ` : '') + `${yValue}.`; }; - private _renderArcLabel = (className: string) => { - const { arc, data, innerRadius, outerRadius, showLabelsInPercent, totalValue, hideLabels, activeArc } = this.props; + private _shouldHighlightArc = (legend?: string): boolean => { + const { activeArc } = this.props; + // If no activeArc is provided, highlight all arcs. Otherwise, only highlight the arcs that are active. + return !activeArc || activeArc.length === 0 || legend === undefined || activeArc.includes(legend); + }; + private _renderArcLabel = (className: string) => { + const { arc, data, innerRadius, outerRadius, showLabelsInPercent, totalValue, hideLabels } = this.props; if ( hideLabels || Math.abs(data!.endAngle - data!.startAngle) < Math.PI / 12 || - (activeArc !== data!.data.legend && activeArc !== '') + !this._shouldHighlightArc(data!.data.legend!) ) { return null; } diff --git a/packages/charts/react-charting/src/components/DonutChart/Arc/Arc.types.ts b/packages/charts/react-charting/src/components/DonutChart/Arc/Arc.types.ts index 6de0cdd0afc774..6bff5071cd7e66 100644 --- a/packages/charts/react-charting/src/components/DonutChart/Arc/Arc.types.ts +++ b/packages/charts/react-charting/src/components/DonutChart/Arc/Arc.types.ts @@ -73,7 +73,7 @@ export interface IArcProps { /** * Active Arc for chart */ - activeArc?: string; + activeArc?: string[]; /** * internal prop for href diff --git a/packages/charts/react-charting/src/components/DonutChart/DonutChart.base.tsx b/packages/charts/react-charting/src/components/DonutChart/DonutChart.base.tsx index e531b39dd3fe72..083ea31524ddca 100644 --- a/packages/charts/react-charting/src/components/DonutChart/DonutChart.base.tsx +++ b/packages/charts/react-charting/src/components/DonutChart/DonutChart.base.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import { classNamesFunction, getId } from '@fluentui/react/lib/Utilities'; +import { classNamesFunction, getId, initializeComponentRef } from '@fluentui/react/lib/Utilities'; import { ScaleOrdinal } from 'd3-scale'; import { IProcessedStyleSet } from '@fluentui/react/lib/Styling'; import { Callout, DirectionalHint } from '@fluentui/react/lib/Callout'; @@ -7,8 +7,15 @@ import { FocusZone, FocusZoneDirection, FocusZoneTabbableElements } from '@fluen import { IAccessibilityProps, ChartHoverCard, ILegend, Legends } from '../../index'; import { Pie } from './Pie/index'; import { IChartDataPoint, IDonutChartProps, IDonutChartStyleProps, IDonutChartStyles } from './index'; -import { getAccessibleDataObject, getColorFromToken, getNextColor, getNextGradient } from '../../utilities/index'; +import { + getAccessibleDataObject, + getColorFromToken, + getNextColor, + getNextGradient, + areArraysEqual, +} from '../../utilities/index'; import { convertToLocaleString } from '../../utilities/locale-util'; +import { IChart } from '../../types/index'; const getClassNames = classNamesFunction(); const LEGEND_CONTAINER_HEIGHT = 40; @@ -24,12 +31,12 @@ export interface IDonutChartState { xCalloutValue?: string; yCalloutValue?: string; focusedArcId?: string; - selectedLegend: string; dataPointCalloutProps?: IChartDataPoint; callOutAccessibilityData?: IAccessibilityProps; + selectedLegends: string[]; } -export class DonutChartBase extends React.Component { +export class DonutChartBase extends React.Component implements IChart { public static defaultProps: Partial = { innerRadius: 0, hideLabels: true, @@ -63,18 +70,21 @@ export class DonutChartBase extends React.Component d.data! >= 0)); const valueInsideDonut = this._valueInsideDonut(this.props.valueInsideDonut!, chartData!); - return !this._isChartEmpty() ? (
{ this.setState({ showHover: false, @@ -240,23 +262,17 @@ export class DonutChartBase extends React.Component { - if (this.state.selectedLegend === point.legend) { - this.setState({ selectedLegend: '' }); - } else { - this.setState({ selectedLegend: point.legend! }); - } - }, hoverAction: () => { this._handleChartMouseLeave(); this.setState({ activeLegend: point.legend! }); }, onMouseOutAction: () => { - this.setState({ activeLegend: '' }); + this.setState({ activeLegend: undefined }); }, }; return legend; }); + const legends = ( ); return legends; } + private _onLegendSelectionChange( + selectedLegends: string[], + event: React.MouseEvent, + currentLegend?: ILegend, + ): void { + if (this.props.legendProps && this.props.legendProps?.canSelectMultipleLegends) { + this.setState({ selectedLegends }); + } else { + this.setState({ selectedLegends: selectedLegends.slice(-1) }); + } + if (this.props.legendProps?.onChange) { + this.props.legendProps.onChange(selectedLegends, event, currentLegend); + } + } + private _focusCallback = (data: IChartDataPoint, id: string, element: SVGPathElement): void => { this._currentHoverElement = element; this.setState({ /** Show the callout if highlighted arc is focused and Hide it if unhighlighted arc is focused */ - showHover: this.state.selectedLegend === '' || this.state.selectedLegend === data.legend, + showHover: this._noLegendsHighlighted() || this._isLegendHighlighted(data.legend), value: data.data!.toString(), legend: data.legend, color: data.color!, @@ -299,7 +332,7 @@ export class DonutChartBase extends React.Component { - if (point.legend === highlightedLegend || (this.state.showHover && point.legend === this.state.legend)) { - legendValue = point.yAxisCalloutData ? point.yAxisCalloutData : point.data!; + const highlightedLegends = this._getHighlightedLegend(); + if (valueInsideDonut !== undefined && (highlightedLegends.length === 1 || this.state.showHover)) { + const pointValue = data.find(point => this._isLegendHighlighted(point.legend)); + return pointValue + ? pointValue.yAxisCalloutData + ? pointValue.yAxisCalloutData + : pointValue.data! + : valueInsideDonut; + } else if (highlightedLegends.length > 0) { + let totalValue = 0; + data.forEach(point => { + if (highlightedLegends.includes(point.legend!)) { + totalValue += point.data!; } - return; }); - return legendValue; + return totalValue; } else { return valueInsideDonut; } @@ -351,12 +390,23 @@ export class DonutChartBase extends React.Component 0 + ? this.state.selectedLegends + : this.state.activeLegend + ? [this.state.activeLegend] + : []; } + private _isLegendHighlighted = (legend: string | undefined): boolean => { + return this._getHighlightedLegend().includes(legend!); + }; + + private _noLegendsHighlighted = (): boolean => { + return this._getHighlightedLegend().length === 0; + }; + private _isChartEmpty(): boolean { return !( this.props.data && diff --git a/packages/charts/react-charting/src/components/DonutChart/DonutChart.types.ts b/packages/charts/react-charting/src/components/DonutChart/DonutChart.types.ts index ed1405d2aeca07..4adaaebb045af5 100644 --- a/packages/charts/react-charting/src/components/DonutChart/DonutChart.types.ts +++ b/packages/charts/react-charting/src/components/DonutChart/DonutChart.types.ts @@ -1,8 +1,8 @@ import { IStyle } from '@fluentui/react/lib/Styling'; -import { IRenderFunction, IStyleFunctionOrObject } from '@fluentui/react/lib/Utilities'; +import { IRefObject, IRenderFunction, IStyleFunctionOrObject } from '@fluentui/react/lib/Utilities'; import { ICartesianChartProps, ICartesianChartStyleProps } from '../CommonComponents/index'; import { ICalloutProps } from '@fluentui/react/lib/Callout'; -import { IChartProps, IChartDataPoint } from './index'; +import { IChartProps, IChartDataPoint, IChart } from './index'; export interface IDonutChart {} @@ -69,6 +69,12 @@ export interface IDonutChartProps extends ICartesianChartProps { * @default false */ roundCorners?: boolean; + + /** + * Optional callback to access the IChart interface. Use this instead of ref for accessing + * the public methods and properties of the component. + */ + componentRef?: IRefObject; } /** diff --git a/packages/charts/react-charting/src/components/DonutChart/DonutChartRTL.test.tsx b/packages/charts/react-charting/src/components/DonutChart/DonutChartRTL.test.tsx index db7dcb00b7e582..16bb8f56bc2065 100644 --- a/packages/charts/react-charting/src/components/DonutChart/DonutChartRTL.test.tsx +++ b/packages/charts/react-charting/src/components/DonutChart/DonutChartRTL.test.tsx @@ -18,6 +18,9 @@ describe('Donut chart interactions', () => { beforeEach(() => { sharedBeforeEach(); jest.spyOn(global.Math, 'random').mockReturnValue(0.1); + // 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(() => '20000'); }); afterEach(() => { jest.spyOn(global.Math, 'random').mockRestore(); @@ -70,7 +73,7 @@ describe('Donut chart interactions', () => { test('Should highlight the corresponding Pie on mouse over on legends', () => { // Arrange - const { container } = render(); + const { container } = render(); // Act const legend = screen.queryByText('first'); @@ -157,9 +160,6 @@ describe('Donut chart interactions', () => { }); 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( , @@ -184,6 +184,38 @@ describe('Donut chart interactions', () => { // Assert expect(container).toMatchSnapshot(); }); + + // add test for legend multi select + test('Should select multiple legends on click', () => { + // Arrange + const { container } = render( + , + ); + + // Act + const firstLegend = screen.queryByText('first')?.closest('button'); + const secondLegend = screen.queryByText('second')?.closest('button'); + expect(firstLegend).toBeDefined(); + expect(secondLegend).toBeDefined(); + fireEvent.click(firstLegend!); + fireEvent.click(secondLegend!); + + // Assert + expect(firstLegend).toHaveAttribute('aria-selected', 'true'); + expect(secondLegend).toHaveAttribute('aria-selected', 'true'); + + const getById = queryAllByAttribute.bind(null, 'id'); + expect(getById(container, /Pie.*?first/i)[0]).toHaveStyle('opacity: 1.0'); + expect(getById(container, /Pie.*?second/i)[0]).toHaveStyle('opacity: 1.0'); + expect(getById(container, /Pie.*?third/i)[0]).toHaveStyle('opacity: 0.1'); + }); }); describe('Donut Chart - axe-core', () => { diff --git a/packages/charts/react-charting/src/components/DonutChart/Pie/Pie.types.ts b/packages/charts/react-charting/src/components/DonutChart/Pie/Pie.types.ts index aa9ca9b2dc44a7..f5629edf8aede4 100644 --- a/packages/charts/react-charting/src/components/DonutChart/Pie/Pie.types.ts +++ b/packages/charts/react-charting/src/components/DonutChart/Pie/Pie.types.ts @@ -54,7 +54,7 @@ export interface IPieProps { /** * Active Arc for chart */ - activeArc?: string; + activeArc?: string[]; /** * string for callout id diff --git a/packages/charts/react-charting/src/components/GaugeChart/GaugeChart.base.tsx b/packages/charts/react-charting/src/components/GaugeChart/GaugeChart.base.tsx index 87102b1ebacd3b..238b14273b69a0 100644 --- a/packages/charts/react-charting/src/components/GaugeChart/GaugeChart.base.tsx +++ b/packages/charts/react-charting/src/components/GaugeChart/GaugeChart.base.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; import { arc as d3Arc } from 'd3-shape'; -import { classNamesFunction, getId, getRTL } from '@fluentui/react/lib/Utilities'; +import { classNamesFunction, getId, getRTL, initializeComponentRef } from '@fluentui/react/lib/Utilities'; import { IGaugeChartProps, IGaugeChartSegment, @@ -26,6 +26,7 @@ import { Callout, DirectionalHint } from '@fluentui/react/lib/Callout'; import { IYValueHover } from '../../index'; import { SVGTooltipText } from '../../utilities/SVGTooltipText'; import { select as d3Select } from 'd3-selection'; +import { IChart } from '../../types/index'; const GAUGE_MARGIN = 16; const LABEL_WIDTH = 36; @@ -120,7 +121,7 @@ export interface IExtendedSegment extends IGaugeChartSegment { end: number; } -export class GaugeChartBase extends React.Component { +export class GaugeChartBase extends React.Component implements IChart { private _classNames: IProcessedStyleSet; private _isRTL: boolean; private _innerRadius: number; @@ -136,6 +137,8 @@ export class GaugeChartBase extends React.Component { const { hideMinMax, chartTitle, sublabel } = this.props; diff --git a/packages/charts/react-charting/src/components/GaugeChart/GaugeChart.types.ts b/packages/charts/react-charting/src/components/GaugeChart/GaugeChart.types.ts index 648dc7abeca07d..9374a764dc3cad 100644 --- a/packages/charts/react-charting/src/components/GaugeChart/GaugeChart.types.ts +++ b/packages/charts/react-charting/src/components/GaugeChart/GaugeChart.types.ts @@ -1,7 +1,7 @@ import { IStyle, ITheme } from '@fluentui/react/lib/Styling'; -import { IStyleFunctionOrObject } from '@fluentui/react/lib/Utilities'; +import { IRefObject, IStyleFunctionOrObject } from '@fluentui/react/lib/Utilities'; import { ILegendsProps } from '../Legends/index'; -import { IAccessibilityProps } from '../../types/index'; +import { IAccessibilityProps, IChart } from '../../types/index'; import { ICalloutProps } from '@fluentui/react/lib/Callout'; /** @@ -168,6 +168,12 @@ export interface IGaugeChartProps { * @default false */ roundCorners?: boolean; + + /** + * Optional callback to access the IChart interface. Use this instead of ref for accessing + * the public methods and properties of the component. + */ + componentRef?: IRefObject; } /** diff --git a/packages/charts/react-charting/src/components/GroupedVerticalBarChart/GroupedVerticalBarChart.base.tsx b/packages/charts/react-charting/src/components/GroupedVerticalBarChart/GroupedVerticalBarChart.base.tsx index a35d3ff5b70651..9f45393ea1b222 100644 --- a/packages/charts/react-charting/src/components/GroupedVerticalBarChart/GroupedVerticalBarChart.base.tsx +++ b/packages/charts/react-charting/src/components/GroupedVerticalBarChart/GroupedVerticalBarChart.base.tsx @@ -3,7 +3,14 @@ import { max as d3Max } from 'd3-array'; import { select as d3Select } from 'd3-selection'; import { Axis as D3Axis } from 'd3-axis'; import { scaleBand as d3ScaleBand, scaleLinear as d3ScaleLinear } from 'd3-scale'; -import { classNamesFunction, getId, getRTL, memoizeFunction, warnDeprecations } from '@fluentui/react/lib/Utilities'; +import { + classNamesFunction, + getId, + getRTL, + initializeComponentRef, + memoizeFunction, + warnDeprecations, +} from '@fluentui/react/lib/Utilities'; import { IProcessedStyleSet, IPalette } from '@fluentui/react/lib/Styling'; import { DirectionalHint } from '@fluentui/react/lib/Callout'; import { FocusZoneDirection } from '@fluentui/react-focus'; @@ -24,6 +31,7 @@ import { createStringYAxis, getNextGradient, getNextColor, + areArraysEqual, } from '../../utilities/index'; import { IAccessibilityProps, @@ -39,6 +47,7 @@ import { IRefArrayData, Legends, } from '../../index'; +import { IChart } from '../../types/index'; const COMPONENT_NAME = 'GROUPED VERTICAL BAR CHART'; const getClassNames = classNamesFunction(); @@ -65,12 +74,13 @@ export interface IGroupedVerticalBarChartState extends IBasestate { dataPointCalloutProps?: IGVBarChartSeriesPoint; callOutAccessibilityData?: IAccessibilityProps; calloutLegend: string; + selectedLegends: string[]; } -export class GroupedVerticalBarChartBase extends React.Component< - IGroupedVerticalBarChartProps, - IGroupedVerticalBarChartState -> { +export class GroupedVerticalBarChartBase + extends React.Component + implements IChart +{ public static defaultProps: Partial = { maxBarWidth: 24, }; @@ -100,16 +110,20 @@ export class GroupedVerticalBarChartBase extends React.Component< private _groupWidth: number; private _xAxisInnerPadding: number; private _xAxisOuterPadding: number; + private _cartesianChartRef: React.RefObject; public constructor(props: IGroupedVerticalBarChartProps) { super(props); + + initializeComponentRef(this); + this._createSet = memoizeFunction((data: IGroupedVerticalBarChartData[]) => this._createDataSetOfGVBC(data)); this.state = { color: '', dataForHoverCard: 0, isCalloutVisible: false, refSelected: null, - selectedLegend: props.legendProps?.selectedLegend ?? '', + selectedLegends: props.legendProps?.selectedLegends || [], xCalloutValue: '', yCalloutValue: '', YValueHover: [], @@ -129,6 +143,15 @@ export class GroupedVerticalBarChartBase extends React.Component< this._tooltipId = getId('GVBCTooltipId_'); this._emptyChartId = getId('_GVBC_empty'); this._domainMargin = MIN_DOMAIN_MARGIN; + this._cartesianChartRef = React.createRef(); + } + + public componentDidUpdate(prevProps: IGroupedVerticalBarChartProps): void { + if (!areArraysEqual(prevProps.legendProps?.selectedLegends, this.props.legendProps?.selectedLegends)) { + this.setState({ + selectedLegends: this.props.legendProps?.selectedLegends || [], + }); + } } public render(): React.ReactNode { @@ -203,6 +226,7 @@ export class GroupedVerticalBarChartBase extends React.Component< xAxisOuterPadding: this._xAxisOuterPadding, })} barwidth={this._barWidth} + ref={this._cartesianChartRef} /* eslint-disable react/jsx-no-bind */ children={() => { return {this._groupedVerticalBarGraph}; @@ -218,6 +242,10 @@ export class GroupedVerticalBarChartBase extends React.Component< ); } + public get chartContainer(): HTMLElement | null { + return this._cartesianChartRef.current?.chartContainer || null; + } + private _getMinMaxOfYAxis = () => { return { startValue: 0, endValue: 0 }; }; @@ -307,7 +335,7 @@ export class GroupedVerticalBarChartBase extends React.Component< this.setState({ refSelected: mouseEvent, /** Show the callout if highlighted bar is hovered and Hide it if unhighlighted bar is hovered */ - isCalloutVisible: this.state.selectedLegend === '' || this.state.selectedLegend === pointData.legend, + isCalloutVisible: this._noLegendHighlighted() || this._legendHighlighted(pointData.legend), calloutLegend: pointData.legend, dataForHoverCard: pointData.data, color: pointData.color, @@ -343,7 +371,7 @@ export class GroupedVerticalBarChartBase extends React.Component< this.setState({ refSelected: obj.refElement, /** Show the callout if highlighted bar is focused and Hide it if unhighlighted bar is focused */ - isCalloutVisible: this.state.selectedLegend === '' || this.state.selectedLegend === pointData.legend, + isCalloutVisible: this._noLegendHighlighted() || this._legendHighlighted(pointData.legend), calloutLegend: pointData.legend, dataForHoverCard: pointData.data, color: pointData.color, @@ -555,18 +583,6 @@ export class GroupedVerticalBarChartBase extends React.Component< }); }; - private _onLegendClick(legendTitle: string): void { - if (this.state.selectedLegend === legendTitle) { - this.setState({ - selectedLegend: '', - }); - } else { - this.setState({ - selectedLegend: legendTitle, - }); - } - } - private _onLegendHover(legendTitle: string): void { this.setState({ activeLegend: legendTitle, @@ -598,9 +614,6 @@ export class GroupedVerticalBarChartBase extends React.Component< const legend: ILegend = { title: point.legend, color, - action: () => { - this._onLegendClick(point.legend); - }, hoverAction: () => { this._handleChartMouseLeave(); this._onLegendHover(point.legend); @@ -620,10 +633,26 @@ export class GroupedVerticalBarChartBase extends React.Component< enabledWrapLines={this.props.enabledLegendsWrapLines} focusZonePropsInHoverCard={this.props.focusZonePropsForLegendsInHoverCard} {...this.props.legendProps} + onChange={this._onLegendSelectionChange.bind(this)} /> ); }; + private _onLegendSelectionChange( + selectedLegends: string[], + event: React.MouseEvent, + currentLegend?: ILegend, + ): void { + if (this.props.legendProps?.canSelectMultipleLegends) { + this.setState({ selectedLegends }); + } else { + this.setState({ selectedLegends: selectedLegends.slice(-1) }); + } + if (this.props.legendProps?.onChange) { + this.props.legendProps.onChange(selectedLegends, event, currentLegend); + } + } + private _getAxisData = (yAxisData: IAxisData) => { if (yAxisData && yAxisData.yAxisDomainValues.length) { const { yAxisDomainValues: domainValue } = yAxisData; @@ -638,19 +667,24 @@ export class GroupedVerticalBarChartBase extends React.Component< * 2. hovering: if there is no selected legend and the user hovers over it */ private _legendHighlighted = (legendTitle: string) => { - return ( - this.state.selectedLegend === legendTitle || - (this.state.selectedLegend === '' && this.state.activeLegend === legendTitle) - ); + return this._getHighlightedLegend().includes(legendTitle!); }; /** * This function checks if none of the legends is selected or hovered. */ private _noLegendHighlighted = () => { - return this.state.selectedLegend === '' && this.state.activeLegend === ''; + return this._getHighlightedLegend().length === 0; }; + private _getHighlightedLegend() { + return this.state.selectedLegends.length > 0 + ? this.state.selectedLegends + : this.state.activeLegend + ? [this.state.activeLegend] + : []; + } + private _getAriaLabel = (point: IGVBarChartSeriesPoint, xAxisPoint: string): string => { const xValue = point.xAxisCalloutData || xAxisPoint; const legend = point.legend; diff --git a/packages/charts/react-charting/src/components/GroupedVerticalBarChart/GroupedVerticalBarChartRTL.test.tsx b/packages/charts/react-charting/src/components/GroupedVerticalBarChart/GroupedVerticalBarChartRTL.test.tsx index 5797d95beeb161..b6ed4f6f7ef092 100644 --- a/packages/charts/react-charting/src/components/GroupedVerticalBarChart/GroupedVerticalBarChartRTL.test.tsx +++ b/packages/charts/react-charting/src/components/GroupedVerticalBarChart/GroupedVerticalBarChartRTL.test.tsx @@ -139,6 +139,206 @@ const chartPoints = [ }, ]; +const dataGVBC = [ + { + name: 'Jan - Mar', + series: [ + { + key: 'series1', + data: 33000, + color: DefaultPalette.blue, + legend: '2022', + xAxisCalloutData: '2022/04/30', + yAxisCalloutData: '29%', + callOutAccessibilityData: { + ariaLabel: 'Group Jan - Mar 1 of 4, Bar series 1 of 2 2022, x value 2022/04/30, y value 29%', + }, + }, + { + key: 'series2', + data: 44000, + color: DefaultPalette.green, + legend: '2023', + xAxisCalloutData: '2023/04/30', + yAxisCalloutData: '44%', + callOutAccessibilityData: { + ariaLabel: 'Group Jan - Mar 1 of 4, Bar series 2 of 2 2023, x value 2023/04/30, y value 44%', + }, + }, + { + key: 'series3', + data: 54000, + color: DefaultPalette.red, + legend: '2024', + xAxisCalloutData: '2024/04/30', + yAxisCalloutData: '44%', + callOutAccessibilityData: { + ariaLabel: 'Group Jan - Mar 1 of 4, Bar series 3 of 4 2022, x value 2024/04/30, y value 44%', + }, + }, + { + key: 'series4', + data: 24000, + color: DefaultPalette.yellow, + legend: '2021', + xAxisCalloutData: '2021/04/30', + yAxisCalloutData: '44%', + callOutAccessibilityData: { + ariaLabel: 'Group Jan - Mar 1 of 4, Bar series 4 of 4 2021, x value 2021/04/30, y value 44%', + }, + }, + ], + }, + { + name: 'Apr - Jun', + series: [ + { + key: 'series1', + data: 33000, + color: DefaultPalette.blue, + legend: '2022', + xAxisCalloutData: '2022/05/30', + yAxisCalloutData: '29%', + callOutAccessibilityData: { + ariaLabel: 'Group Apr - Jun 2 of 4, Bar series 1 of 2 2022, x value 2022/05/30, y value 29%', + }, + }, + { + key: 'series2', + data: 3000, + color: DefaultPalette.green, + legend: '2023', + xAxisCalloutData: '2023/05/30', + yAxisCalloutData: '3%', + callOutAccessibilityData: { + ariaLabel: 'Group Apr - Jun 2 of 4, Bar series 2 of 2 2023, x value 2023/05/30, y value 3%', + }, + }, + { + key: 'series3', + data: 9000, + color: DefaultPalette.red, + legend: '2024', + xAxisCalloutData: '2024/05/30', + yAxisCalloutData: '3%', + callOutAccessibilityData: { + ariaLabel: 'Group Apr - Jun 2 of 4, Bar series 3 of 4 2024, x value 2024/05/30, y value 3%', + }, + }, + { + key: 'series4', + data: 12000, + color: DefaultPalette.yellow, + legend: '2021', + xAxisCalloutData: '2021/05/30', + yAxisCalloutData: '3%', + callOutAccessibilityData: { + ariaLabel: 'Group Apr - Jun 2 of 4, Bar series 4 of 4 2021, x value 2021/05/30, y value 3%', + }, + }, + ], + }, + + { + name: 'Jul - Sep', + series: [ + { + key: 'series1', + data: 14000, + color: DefaultPalette.blue, + legend: '2022', + xAxisCalloutData: '2022/06/30', + yAxisCalloutData: '13%', + callOutAccessibilityData: { + ariaLabel: 'Group Jul - Sep 3 of 4, Bar series 1 of 2 2022, x value 2022/06/30, y value 13%', + }, + }, + { + key: 'series2', + data: 50000, + color: DefaultPalette.green, + legend: '2023', + xAxisCalloutData: '2023/06/30', + yAxisCalloutData: '50%', + callOutAccessibilityData: { + ariaLabel: 'Group Jul - Sep 3 of 4, Bar series 2 of 2 2023, x value 2023/06/30, y value 50%', + }, + }, + { + key: 'series3', + data: 60000, + color: DefaultPalette.red, + legend: '2024', + xAxisCalloutData: '2024/06/30', + yAxisCalloutData: '50%', + callOutAccessibilityData: { + ariaLabel: 'Group Jul - Sep 3 of 4, Bar series 3 of 4 2024, x value 2024/06/30, y value 50%', + }, + }, + { + key: 'series4', + data: 10000, + color: DefaultPalette.yellow, + legend: '2021', + xAxisCalloutData: '2021/06/30', + yAxisCalloutData: '50%', + callOutAccessibilityData: { + ariaLabel: 'Group Jul - Sep 3 of 4, Bar series 4 of 4 2021, x value 2021/06/30, y value 50%', + }, + }, + ], + }, + { + name: 'Oct - Dec', + series: [ + { + key: 'series1', + data: 33000, + color: DefaultPalette.blue, + legend: '2022', + xAxisCalloutData: '2022/07/30', + yAxisCalloutData: '29%', + callOutAccessibilityData: { + ariaLabel: 'Group Oct - Dec 4 of 4, Bar series 1 of 2 2022, x value 2022/07/30, y value 29%', + }, + }, + { + key: 'series2', + data: 3000, + color: DefaultPalette.green, + legend: '2023', + xAxisCalloutData: '2023/07/30', + yAxisCalloutData: '3%', + callOutAccessibilityData: { + ariaLabel: 'Group Oct - Dec 4 of 4, Bar series 2 of 2 2023, x value 2023/07/30, y value 3%', + }, + }, + { + key: 'series3', + data: 6000, + color: DefaultPalette.red, + legend: '2024', + xAxisCalloutData: '2024/07/30', + yAxisCalloutData: '3%', + callOutAccessibilityData: { + ariaLabel: 'Group Oct - Dec 4 of 4, Bar series 3 of 4 2024, x value 2024/07/30, y value 3%', + }, + }, + { + key: 'series4', + data: 15000, + color: DefaultPalette.yellow, + legend: '2021', + xAxisCalloutData: '2021/07/30', + yAxisCalloutData: '3%', + callOutAccessibilityData: { + ariaLabel: 'Group Oct - Dec 4 of 4, Bar series 4 of 4 2021, x value 2021/07/30, y value 3%', + }, + }, + ], + }, +]; + describe('Grouped Vertical bar chart rendering', () => { beforeEach(updateChartWidthAndHeight); afterEach(sharedAfterEach); @@ -350,6 +550,40 @@ describe('Grouped vertical bar chart - Subcomponent Legends', () => { expect(bars[5]).toHaveAttribute('opacity', ''); }, ); + + testWithoutWait( + 'Should select multiple legends on click', + GroupedVerticalBarChart, + { data: dataGVBC, legendProps: { canSelectMultipleLegends: true } }, + container => { + const firstLegend = screen.queryByText('2023')?.closest('button'); + const secondLegend = screen.queryByText('2024')?.closest('button'); + + expect(firstLegend).toBeDefined(); + expect(secondLegend).toBeDefined(); + + fireEvent.click(firstLegend!); + fireEvent.click(secondLegend!); + + // Assert + expect(firstLegend).toHaveAttribute('aria-selected', 'true'); + expect(secondLegend).toHaveAttribute('aria-selected', 'true'); + + const bars = screen.getAllByText((content, element) => element!.tagName.toLowerCase() === 'rect'); + expect(bars[0]).toHaveAttribute('opacity', '0.1'); + expect(bars[1]).toHaveAttribute('opacity', ''); + expect(bars[2]).toHaveAttribute('opacity', ''); + expect(bars[3]).toHaveAttribute('opacity', '0.1'); + expect(bars[4]).toHaveAttribute('opacity', '0.1'); + expect(bars[5]).toHaveAttribute('opacity', ''); + expect(bars[6]).toHaveAttribute('opacity', ''); + expect(bars[7]).toHaveAttribute('opacity', '0.1'); + expect(bars[8]).toHaveAttribute('opacity', '0.1'); + expect(bars[9]).toHaveAttribute('opacity', ''); + expect(bars[10]).toHaveAttribute('opacity', ''); + expect(bars[11]).toHaveAttribute('opacity', '0.1'); + }, + ); }); describe('Grouped vertical bar chart - Subcomponent callout', () => { diff --git a/packages/charts/react-charting/src/components/HeatMapChart/HeatMapChart.base.tsx b/packages/charts/react-charting/src/components/HeatMapChart/HeatMapChart.base.tsx index 4aa3d4e2a2377d..d9cb9969c73c70 100644 --- a/packages/charts/react-charting/src/components/HeatMapChart/HeatMapChart.base.tsx +++ b/packages/charts/react-charting/src/components/HeatMapChart/HeatMapChart.base.tsx @@ -1,7 +1,7 @@ import { CartesianChart, IChildProps, IModifiedCartesianChartProps } from '../../components/CommonComponents/index'; -import { IAccessibilityProps, IHeatMapChartData, IHeatMapChartDataPoint } from '../../types/IDataPoint'; +import { IAccessibilityProps, IChart, IHeatMapChartData, IHeatMapChartDataPoint } from '../../types/IDataPoint'; import { scaleLinear as d3ScaleLinear } from 'd3-scale'; -import { classNamesFunction, getId, memoizeFunction } from '@fluentui/react/lib/Utilities'; +import { classNamesFunction, getId, initializeComponentRef, memoizeFunction } from '@fluentui/react/lib/Utilities'; import { FocusZoneDirection } from '@fluentui/react-focus'; import { DirectionalHint } from '@fluentui/react/lib/Callout'; import { IProcessedStyleSet } from '@fluentui/react/lib/Styling'; @@ -87,7 +87,7 @@ export interface IHeatMapChartState { callOutAccessibilityData?: IAccessibilityProps; } const getClassNames = classNamesFunction(); -export class HeatMapChartBase extends React.Component { +export class HeatMapChartBase extends React.Component implements IChart { private _classNames: IProcessedStyleSet; private _stringXAxisDataPoints: string[]; private _stringYAxisDataPoints: string[]; @@ -114,8 +114,14 @@ export class HeatMapChartBase extends React.Component; + public constructor(props: IHeatMapChartProps) { super(props); + + initializeComponentRef(this); + /** * below funciton creates a new data set from the prop * @data and also finds all the unique x-axis datapoints @@ -145,6 +151,15 @@ export class HeatMapChartBase extends React.Component { @@ -231,6 +248,10 @@ export class HeatMapChartBase extends React.Component { return { startValue: 0, endValue: 0 }; }; @@ -250,7 +271,7 @@ export class HeatMapChartBase extends React.Component { + this.margins = margins; + }; + private _getOpacity = (legendTitle: string): string => { const opacity = this._legendHighlighted(legendTitle) || this._noLegendHighlighted() ? '1' : '0.1'; return opacity; diff --git a/packages/charts/react-charting/src/components/HeatMapChart/HeatMapChart.types.ts b/packages/charts/react-charting/src/components/HeatMapChart/HeatMapChart.types.ts index 178f3aa7dfa378..6593212253b7cd 100644 --- a/packages/charts/react-charting/src/components/HeatMapChart/HeatMapChart.types.ts +++ b/packages/charts/react-charting/src/components/HeatMapChart/HeatMapChart.types.ts @@ -108,6 +108,11 @@ export interface IHeatMapChartProps extends Pick - 10 + + + 10 + - 20 + + + 20 + @@ -1334,9 +1360,22 @@ exports[`HeatMapChart snapshot tests should render axis labels correctly When cu - yPoint p1 + + + yPoint p1 + - yPoint p2 + + + yPoint p2 + diff --git a/packages/charts/react-charting/src/components/HorizontalBarChartWithAxis/HorizontalBarChartWithAxis.base.tsx b/packages/charts/react-charting/src/components/HorizontalBarChartWithAxis/HorizontalBarChartWithAxis.base.tsx index 8cb522e55edd42..e43b06521d16a2 100644 --- a/packages/charts/react-charting/src/components/HorizontalBarChartWithAxis/HorizontalBarChartWithAxis.base.tsx +++ b/packages/charts/react-charting/src/components/HorizontalBarChartWithAxis/HorizontalBarChartWithAxis.base.tsx @@ -2,7 +2,7 @@ import * as React from 'react'; import { max as d3Max } from 'd3-array'; import { select as d3Select } from 'd3-selection'; import { scaleLinear as d3ScaleLinear, ScaleLinear as D3ScaleLinear, scaleBand as d3ScaleBand } from 'd3-scale'; -import { classNamesFunction, getId, getRTL } from '@fluentui/react/lib/Utilities'; +import { classNamesFunction, getId, getRTL, initializeComponentRef } from '@fluentui/react/lib/Utilities'; import { IProcessedStyleSet, IPalette } from '@fluentui/react/lib/Styling'; import { DirectionalHint } from '@fluentui/react/lib/Callout'; import { ILegend } from '../../components/Legends/Legends.types'; @@ -13,6 +13,7 @@ import { IHorizontalBarChartWithAxisDataPoint, IRefArrayData, IMargins, + IChart, } from '../../types/IDataPoint'; import { IChildProps, IYValueHover } from '../CommonComponents/CartesianChart.types'; import { CartesianChart } from '../CommonComponents/CartesianChart'; @@ -39,6 +40,7 @@ import { domainRangeOfNumericForHorizontalBarChartWithAxis, createStringYAxisForHorizontalBarChartWithAxis, getNextGradient, + areArraysEqual, } from '../../utilities/index'; const getClassNames = classNamesFunction(); @@ -54,14 +56,15 @@ export interface IHorizontalBarChartWithAxisState extends IBasestate { callOutAccessibilityData?: IAccessibilityProps; // eslint-disable-next-line @typescript-eslint/no-explicit-any tooltipElement?: any; + selectedLegends: string[]; } type ColorScale = (_p?: number) => string; -export class HorizontalBarChartWithAxisBase extends React.Component< - IHorizontalBarChartWithAxisProps, - IHorizontalBarChartWithAxisState -> { +export class HorizontalBarChartWithAxisBase + extends React.Component + implements IChart +{ private _points: IHorizontalBarChartWithAxisDataPoint[]; private _barHeight: number; private _colors: string[]; @@ -77,9 +80,13 @@ export class HorizontalBarChartWithAxisBase extends React.Component< private _xAxisType: XAxisTypes; private _yAxisType: YAxisType; private _calloutAnchorPoint: IHorizontalBarChartWithAxisDataPoint | null; + private _cartesianChartRef: React.RefObject; public constructor(props: IHorizontalBarChartWithAxisProps) { super(props); + + initializeComponentRef(this); + this.state = { color: '', dataForHoverCard: 0, @@ -93,6 +100,7 @@ export class HorizontalBarChartWithAxisBase extends React.Component< activeXdataPoint: null, YValueHover: [], hoverXValue: '', + selectedLegends: [], }; this._calloutId = getId('callout'); this._tooltipId = getId('HBCWATooltipID_'); @@ -105,6 +113,15 @@ export class HorizontalBarChartWithAxisBase extends React.Component< this.props.data! && this.props.data!.length > 0 ? (getTypeOfAxis(this.props.data![0].y, false) as YAxisType) : YAxisType.StringAxis; + this._cartesianChartRef = React.createRef(); + } + + public componentDidUpdate(prevProps: IHorizontalBarChartWithAxisProps): void { + if (!areArraysEqual(prevProps.legendProps?.selectedLegends, this.props.legendProps?.selectedLegends)) { + this.setState({ + selectedLegends: this.props.legendProps?.selectedLegends || [], + }); + } } public render(): JSX.Element { @@ -163,6 +180,7 @@ export class HorizontalBarChartWithAxisBase extends React.Component< getGraphData={this._getGraphData} getAxisData={this._getAxisData} onChartMouseLeave={this._handleChartMouseLeave} + ref={this._cartesianChartRef} /* eslint-disable react/jsx-no-bind */ children={(props: IChildProps) => { return ( @@ -175,6 +193,10 @@ export class HorizontalBarChartWithAxisBase extends React.Component< ); } + public get chartContainer(): HTMLElement | null { + return this._cartesianChartRef.current?.chartContainer || null; + } + private _getDomainNRangeValues = ( points: IHorizontalBarChartWithAxisDataPoint[], margins: IMargins, @@ -336,8 +358,7 @@ export class HorizontalBarChartWithAxisBase extends React.Component< const { YValueHover, hoverXValue } = this._getCalloutContentForBar(point); if ( - (this.state.isLegendSelected === false || - (this.state.isLegendSelected && this.state.selectedLegendTitle === point.legend)) && + (this.state.isLegendSelected === false || this._isLegendHighlighted(point.legend)) && this._calloutAnchorPoint !== point ) { this._calloutAnchorPoint = point; @@ -379,8 +400,8 @@ export class HorizontalBarChartWithAxisBase extends React.Component< color: string, ): void => { if ( - this.state.isLegendSelected === false || - (this.state.isLegendSelected && this.state.selectedLegendTitle === point.legend) + (this.state.isLegendSelected === false || this._isLegendHighlighted(point.legend)) && + this._calloutAnchorPoint !== point ) { const { YValueHover, hoverXValue } = this._getCalloutContentForBar(point); this._refArray.forEach((obj: IRefArrayData, index: number) => { @@ -457,7 +478,7 @@ export class HorizontalBarChartWithAxisBase extends React.Component< const bars = sortedBars.map((point: IHorizontalBarChartWithAxisDataPoint, index: number) => { let shouldHighlight = true; if (this.state.isLegendHovered || this.state.isLegendSelected) { - shouldHighlight = this.state.selectedLegendTitle === point.legend; + shouldHighlight = this._isLegendHighlighted(point.legend); } this._classNames = getClassNames(this.props.styles!, { theme: this.props.theme!, @@ -584,8 +605,8 @@ export class HorizontalBarChartWithAxisBase extends React.Component< const { useSingleColor = false } = this.props; const bars = this._points.map((point: IHorizontalBarChartWithAxisDataPoint, index: number) => { let shouldHighlight = true; - if (this.state.isLegendHovered || this.state.isLegendSelected) { - shouldHighlight = this.state.selectedLegendTitle === point.legend; + if (this._getHighlightedLegend().length > 0) { + shouldHighlight = this._isLegendHighlighted(point.legend); } this._classNames = getClassNames(this.props.styles!, { theme: this.props.theme!, @@ -698,28 +719,8 @@ export class HorizontalBarChartWithAxisBase extends React.Component< }); }; - private _onLegendClick(customMessage: string): void { - if (this.state.isLegendSelected) { - if (this.state.selectedLegendTitle === customMessage) { - this.setState({ - isLegendSelected: false, - selectedLegendTitle: customMessage, - }); - } else { - this.setState({ - selectedLegendTitle: customMessage, - }); - } - } else { - this.setState({ - isLegendSelected: true, - selectedLegendTitle: customMessage, - }); - } - } - private _onLegendHover(customMessage: string): void { - if (this.state.isLegendSelected === false) { + if (!this._isLegendSelected()) { this.setState({ isLegendHovered: true, selectedLegendTitle: customMessage, @@ -728,11 +729,11 @@ export class HorizontalBarChartWithAxisBase extends React.Component< } private _onLegendLeave(isLegendFocused?: boolean): void { - if (!!isLegendFocused || this.state.isLegendSelected === false) { + if (!!isLegendFocused || !this._isLegendSelected()) { this.setState({ isLegendHovered: false, selectedLegendTitle: '', - isLegendSelected: isLegendFocused ? false : this.state.isLegendSelected, + isLegendSelected: isLegendFocused ? false : this._isLegendSelected(), }); } } @@ -759,9 +760,6 @@ export class HorizontalBarChartWithAxisBase extends React.Component< const legend: ILegend = { title: point.legend!, color, - action: () => { - this._onLegendClick(point.legend!); - }, hoverAction: () => { this._handleChartMouseLeave(); this._onLegendHover(point.legend!); @@ -780,11 +778,58 @@ export class HorizontalBarChartWithAxisBase extends React.Component< focusZonePropsInHoverCard={this.props.focusZonePropsForLegendsInHoverCard} overflowText={this.props.legendsOverflowText} {...this.props.legendProps} + onChange={this._onLegendSelectionChange.bind(this)} /> ); return legends; }; + private _isLegendSelected = (): boolean => { + return this.state.isLegendSelected!; + }; + + /** + * This function checks if the given legend is highlighted or not. + * A legend can be highlighted in 2 ways: + * 1. selection: if the user clicks on it + * 2. hovering: if there is no selected legend and the user hovers over it + */ + private _isLegendHighlighted = (legend?: string) => { + return this._getHighlightedLegend().includes(legend!); + }; + + private _getHighlightedLegend() { + return this.state.selectedLegends.length > 0 + ? this.state.selectedLegends + : this.state.selectedLegendTitle + ? [this.state.selectedLegendTitle] + : []; + } + + private _onLegendSelectionChange( + selectedLegends: string[], + event: React.MouseEvent, + currentLegend?: ILegend, + ): void { + if (this.props.legendProps?.canSelectMultipleLegends) { + this.setState({ + selectedLegends, + selectedLegendTitle: currentLegend?.title!, + }); + } else { + this.setState({ + selectedLegends: selectedLegends.slice(-1), + selectedLegendTitle: currentLegend?.title!, + }); + } + this.setState({ + isLegendSelected: selectedLegends.length > 0, + }); + if (this.props.legendProps?.onChange) { + this.props.legendProps.onChange(selectedLegends, event, currentLegend); + } + } + private _getAxisData = (yAxisData: IAxisData) => { if (yAxisData && yAxisData.yAxisDomainValues.length) { // For HBCWA x and y Values are swapped diff --git a/packages/charts/react-charting/src/components/HorizontalBarChartWithAxis/HorizontalBarChartWithAxisRTL.test.tsx b/packages/charts/react-charting/src/components/HorizontalBarChartWithAxis/HorizontalBarChartWithAxisRTL.test.tsx index 6975206a6447ac..f19db37b54b68e 100644 --- a/packages/charts/react-charting/src/components/HorizontalBarChartWithAxis/HorizontalBarChartWithAxisRTL.test.tsx +++ b/packages/charts/react-charting/src/components/HorizontalBarChartWithAxis/HorizontalBarChartWithAxisRTL.test.tsx @@ -169,6 +169,31 @@ describe('Horizontal bar chart with axis- Subcomponent Legends', () => { expect(legendsAfterClickEvent[3]).toHaveAttribute('aria-selected', 'false'); }, ); + + testWithoutWait( + 'Should select multiple legends on multiple mouse click on legends', + HorizontalBarChartWithAxis, + { data: chartPointsHBCWA, legendProps: { canSelectMultipleLegends: true } }, + container => { + // const legends = screen.getAllByText((content, element) => element!.tagName.toLowerCase() === 'button'); + const legend1 = screen.getByText('Grapes')?.closest('button'); + const legend2 = screen.getByText('Apples')?.closest('button'); + + expect(legend1).toBeDefined(); + expect(legend2).toBeDefined(); + + fireEvent.click(legend1!); + fireEvent.click(legend2!); + const legendsAfterClickEvent = screen.getAllByText( + (content, element) => element!.tagName.toLowerCase() === 'button', + ); + // Assert + expect(legendsAfterClickEvent[0]).toHaveAttribute('aria-selected', 'false'); + expect(legendsAfterClickEvent[1]).toHaveAttribute('aria-selected', 'true'); + expect(legendsAfterClickEvent[2]).toHaveAttribute('aria-selected', 'true'); + expect(legendsAfterClickEvent[3]).toHaveAttribute('aria-selected', 'false'); + }, + ); }); describe('Horizontal bar chart with axis - Subcomponent callout', () => { diff --git a/packages/charts/react-charting/src/components/LineChart/LineChart.base.tsx b/packages/charts/react-charting/src/components/LineChart/LineChart.base.tsx index 55c0370d590761..6485b13338fa14 100644 --- a/packages/charts/react-charting/src/components/LineChart/LineChart.base.tsx +++ b/packages/charts/react-charting/src/components/LineChart/LineChart.base.tsx @@ -4,7 +4,14 @@ import { select as d3Select, pointer } from 'd3-selection'; import { bisector } from 'd3-array'; import { ILegend, Legends } from '../Legends/index'; import { line as d3Line, curveLinear as d3curveLinear } from 'd3-shape'; -import { classNamesFunction, getId, find, memoizeFunction, getRTL } from '@fluentui/react/lib/Utilities'; +import { + classNamesFunction, + getId, + find, + memoizeFunction, + getRTL, + initializeComponentRef, +} from '@fluentui/react/lib/Utilities'; import { IAccessibilityProps, CartesianChart, @@ -41,7 +48,9 @@ import { domainRangeOfNumericForAreaChart, createStringYAxis, formatDate, + areArraysEqual, } from '../../utilities/index'; +import { IChart } from '../../types/index'; type NumericAxis = D3Axis; const getClassNames = classNamesFunction(); @@ -146,7 +155,7 @@ export interface ILineChartState extends IBasestate { activeLine: number | null; } -export class LineChartBase extends React.Component { +export class LineChartBase extends React.Component implements IChart { public static defaultProps: Partial = { enableReflow: true, useUTC: true, @@ -178,9 +187,13 @@ export class LineChartBase extends React.Component; constructor(props: ILineChartProps) { super(props); + + initializeComponentRef(this); + this.state = { hoverXValue: '', activeLegend: '', @@ -210,6 +223,7 @@ export class LineChartBase extends React.Component this._createLegends(data)); this._firstRenderOptimization = true; this._emptyChartId = getId('_LineChart_empty'); + this._cartesianChartRef = React.createRef(); props.eventAnnotationProps && props.eventAnnotationProps.labelHeight && @@ -217,8 +231,19 @@ export class LineChartBase extends React.Component 0, + }); + } + /** note that height and width are not used to resize or set as dimesions of the chart, - * fitParentContainer is responisble for setting the height and width or resizing of the svg/chart + * fitParentContainer is responsible for setting the height and width or resizing of the svg/chart */ if ( prevProps.height !== this.props.height || @@ -293,6 +318,7 @@ export class LineChartBase extends React.Component { @@ -349,6 +375,10 @@ export class LineChartBase extends React.Component { +export class SankeyChartBase extends React.Component implements IChart { public static defaultProps: Partial = { enableReflow: true, }; - private chartContainer: HTMLDivElement; + public chartContainer: HTMLDivElement; private _reqID: number; private readonly _calloutId: string; private readonly _linkId: string; @@ -628,6 +629,9 @@ export class SankeyChartBase extends React.Component; + + /** + * props for the callout in the chart + */ + calloutProps?: Partial; } /** diff --git a/packages/charts/react-charting/src/components/VerticalBarChart/VerticalBarChart.base.tsx b/packages/charts/react-charting/src/components/VerticalBarChart/VerticalBarChart.base.tsx index 9e793a25b87c60..1f17a5f43ea113 100644 --- a/packages/charts/react-charting/src/components/VerticalBarChart/VerticalBarChart.base.tsx +++ b/packages/charts/react-charting/src/components/VerticalBarChart/VerticalBarChart.base.tsx @@ -9,7 +9,7 @@ import { scaleUtc as d3ScaleUtc, scaleTime as d3ScaleTime, } from 'd3-scale'; -import { classNamesFunction, getId, getRTL } from '@fluentui/react/lib/Utilities'; +import { classNamesFunction, getId, getRTL, initializeComponentRef } from '@fluentui/react/lib/Utilities'; import { IProcessedStyleSet, IPalette } from '@fluentui/react/lib/Styling'; import { DirectionalHint } from '@fluentui/react/lib/Callout'; import { @@ -52,7 +52,9 @@ import { createStringYAxis, formatDate, getNextGradient, + areArraysEqual, } from '../../utilities/index'; +import { IChart } from '../../types/index'; enum CircleVisbility { show = 'visibility', @@ -72,11 +74,15 @@ export interface IVerticalBarChartState extends IBasestate { hoverXValue?: string | number | null; callOutAccessibilityData?: IAccessibilityProps; calloutLegend: string; + selectedLegends: string[]; } type ColorScale = (_p?: number) => string; -export class VerticalBarChartBase extends React.Component { +export class VerticalBarChartBase + extends React.Component + implements IChart +{ public static defaultProps: Partial = { maxBarWidth: 24, useUTC: true, @@ -102,16 +108,20 @@ export class VerticalBarChartBase extends React.Component; public constructor(props: IVerticalBarChartProps) { super(props); + + initializeComponentRef(this); + this.state = { color: '', dataForHoverCard: 0, isCalloutVisible: false, refSelected: null, - selectedLegend: props.legendProps?.selectedLegend ?? '', - activeLegend: '', + selectedLegends: props.legendProps?.selectedLegends || [], + activeLegend: undefined, xCalloutValue: '', yCalloutValue: '', activeXdataPoint: null, @@ -129,6 +139,15 @@ export class VerticalBarChartBase extends React.Component 1) && { isCalloutForStack: true })} legendBars={legendBars} datasetForXAxisDomain={this._xAxisLabels} barwidth={this._barWidth} @@ -200,6 +220,7 @@ export class VerticalBarChartBase extends React.Component { return ( @@ -230,6 +251,10 @@ export class VerticalBarChartBase extends React.Component { - const { selectedLegend, activeXdataPoint } = this.state; - if (selectedLegend !== '') { - if (xAxisPoint === activeXdataPoint && selectedLegend === legend) { + const { activeXdataPoint } = this.state; + if (!this._noLegendHighlighted()) { + if (xAxisPoint === activeXdataPoint && this._legendHighlighted(legend)) { return { visibility: CircleVisbility.show, radius: 8 }; - } else if (selectedLegend === legend) { + } else if (this._legendHighlighted(legend)) { // Don't hide the circle to keep it focusable. For more information, // see https://fuzzbomb.github.io/accessibility-demos/visually-hidden-focus-test.html return { visibility: CircleVisbility.show, radius: 0.3 }; @@ -517,7 +542,11 @@ export class VerticalBarChartBase extends React.Component = {}; data.forEach((point: IVerticalBarChartDataPoint, _index: number) => { let color: string = !useSingleColor ? point.color! : this._createColors()(1); @@ -1076,16 +1096,16 @@ export class VerticalBarChartBase extends React.Component { // mapping data to the format Legends component needs const legend: ILegend = { - title: point.legend!, + title: legendTitle, color, - action: () => { - this._onLegendClick(point.legend!); - }, hoverAction: () => { this._handleChartMouseLeave(); - this._onLegendHover(point.legend!); + this._onLegendHover(legendTitle); }, onMouseOutAction: () => { this._onLegendLeave(); @@ -1097,9 +1117,6 @@ export class VerticalBarChartBase extends React.Component { - this._onLegendClick(lineLegendText); - }, hoverAction: () => { this._handleChartMouseLeave(); this._onLegendHover(lineLegendText); @@ -1119,11 +1136,27 @@ export class VerticalBarChartBase extends React.Component ); return legends; }; + private _onLegendSelectionChange( + selectedLegends: string[], + event: React.MouseEvent, + currentLegend?: ILegend, + ): void { + if (this.props.legendProps?.canSelectMultipleLegends) { + this.setState({ selectedLegends }); + } else { + this.setState({ selectedLegends: selectedLegends.slice(-1) }); + } + if (this.props.legendProps?.onChange) { + this.props.legendProps.onChange(selectedLegends, event, currentLegend); + } + } + private _getAxisData = (yAxisData: IAxisData) => { if (yAxisData && yAxisData.yAxisDomainValues.length) { const { yAxisDomainValues: domainValue } = yAxisData; @@ -1138,20 +1171,25 @@ export class VerticalBarChartBase extends React.Component { - return ( - this.state.selectedLegend === legendTitle || - (this.state.selectedLegend === '' && this.state.activeLegend === legendTitle) - ); + private _legendHighlighted = (legendTitle: string | undefined) => { + return this._getHighlightedLegend().includes(legendTitle!); }; /** * This function checks if none of the legends is selected or hovered. */ private _noLegendHighlighted = () => { - return this.state.selectedLegend === '' && this.state.activeLegend === ''; + return this._getHighlightedLegend().length === 0; }; + private _getHighlightedLegend() { + return this.state.selectedLegends.length > 0 + ? this.state.selectedLegends + : this.state.activeLegend + ? [this.state.activeLegend] + : []; + } + private _getAriaLabel = (point: IVerticalBarChartDataPoint): string => { const xValue = point.xAxisCalloutData ? point.xAxisCalloutData diff --git a/packages/charts/react-charting/src/components/VerticalBarChart/VerticalBarChartRTL.test.tsx b/packages/charts/react-charting/src/components/VerticalBarChart/VerticalBarChartRTL.test.tsx index c677c11883ab44..7a4c6180deeaf8 100644 --- a/packages/charts/react-charting/src/components/VerticalBarChart/VerticalBarChartRTL.test.tsx +++ b/packages/charts/react-charting/src/components/VerticalBarChart/VerticalBarChartRTL.test.tsx @@ -652,6 +652,87 @@ describe('Vertical bar chart - Subcomponent Legends', () => { expect(bars[7]).toHaveStyle('opacity: 0.1'); }, ); + + testWithWait( + 'Should reduce the opacity of the other bars/lines and their legends on mouse over multiple legends', + VerticalBarChart, + { data: pointsWithLine, lineLegendText: 'just line', legendProps: { canSelectMultipleLegends: true } }, + container => { + const bars = getById(container, /_VBC_bar/i); + const line = getById(container, /_VBC_line/i)[0]; + const legends = screen.getAllByText((content, element) => element!.tagName.toLowerCase() === 'button'); + expect(line).toBeDefined(); + expect(bars).toHaveLength(8); + expect(legends).toHaveLength(9); + fireEvent.click(screen.getByText('just line')); + fireEvent.click(screen.getByText('Oranges')); + expect(line.getAttribute('opacity')).toEqual('1'); + expect(screen.getByText('Oranges')).not.toHaveAttribute('opacity'); + expect(screen.getByText('Dogs')).toHaveStyle('opacity: 0.67'); + expect(screen.getByText('Apples')).toHaveStyle('opacity: 0.67'); + expect(screen.getByText('Bananas')).toHaveStyle('opacity: 0.67'); + expect(screen.getByText('Giraffes')).toHaveStyle('opacity: 0.67'); + expect(screen.getByText('Cats')).toHaveStyle('opacity: 0.67'); + expect(screen.getByText('Elephants')).toHaveStyle('opacity: 0.67'); + expect(screen.getByText('Monkeys')).toHaveStyle('opacity: 0.67'); + expect(line).toBeDefined(); + expect(bars[0]).toBeDefined(); + expect(bars[0]).not.toHaveAttribute('opacity'); + expect(bars[1]).toBeDefined(); + expect(bars[1]).toHaveStyle('opacity: 0.1'); + expect(bars[2]).toBeDefined(); + expect(bars[2]).toHaveStyle('opacity: 0.1'); + expect(bars[3]).toBeDefined(); + expect(bars[3]).toHaveStyle('opacity: 0.1'); + expect(bars[4]).toBeDefined(); + expect(bars[4]).toHaveStyle('opacity: 0.1'); + expect(bars[5]).toBeDefined(); + expect(bars[5]).toHaveStyle('opacity: 0.1'); + expect(bars[6]).toBeDefined(); + expect(bars[6]).toHaveStyle('opacity: 0.1'); + expect(bars[7]).toBeDefined(); + expect(bars[7]).toHaveStyle('opacity: 0.1'); + }, + ); + + testWithWait( + 'Should reduce the opacity of the other bars/lines and their legends on mouse over multiple legends', + VerticalBarChart, + { data: pointsWithLine, lineLegendText: 'just line', legendProps: { canSelectMultipleLegends: true } }, + container => { + const bars = getById(container, /_VBC_bar/i); + const line = getById(container, /_VBC_line/i)[0]; + const legends = screen.getAllByText((content, element) => element!.tagName.toLowerCase() === 'button'); + expect(line).toBeDefined(); + expect(bars).toHaveLength(8); + expect(legends).toHaveLength(9); + fireEvent.click(screen.getByText('just line')); + fireEvent.click(screen.getByText('Oranges')); + expect(line.getAttribute('opacity')).toEqual('1'); + expect(screen.getByText('Dogs')).toHaveStyle('opacity: 0.67'); + expect(screen.getByText('Apples')).toHaveStyle('opacity: 0.67'); + expect(screen.getByText('Bananas')).toHaveStyle('opacity: 0.67'); + expect(screen.getByText('Giraffes')).toHaveStyle('opacity: 0.67'); + expect(screen.getByText('Cats')).toHaveStyle('opacity: 0.67'); + expect(screen.getByText('Elephants')).toHaveStyle('opacity: 0.67'); + expect(screen.getByText('Monkeys')).toHaveStyle('opacity: 0.67'); + expect(line).toBeDefined(); + expect(bars[1]).toBeDefined(); + expect(bars[1]).toHaveStyle('opacity: 0.1'); + expect(bars[2]).toBeDefined(); + expect(bars[2]).toHaveStyle('opacity: 0.1'); + expect(bars[3]).toBeDefined(); + expect(bars[3]).toHaveStyle('opacity: 0.1'); + expect(bars[4]).toBeDefined(); + expect(bars[4]).toHaveStyle('opacity: 0.1'); + expect(bars[5]).toBeDefined(); + expect(bars[5]).toHaveStyle('opacity: 0.1'); + expect(bars[6]).toBeDefined(); + expect(bars[6]).toHaveStyle('opacity: 0.1'); + expect(bars[7]).toBeDefined(); + expect(bars[7]).toHaveStyle('opacity: 0.1'); + }, + ); }); describe('Vertical bar chart - Subcomponent callout', () => { diff --git a/packages/charts/react-charting/src/components/VerticalBarChart/__snapshots__/VerticalBarChartRTL.test.tsx.snap b/packages/charts/react-charting/src/components/VerticalBarChart/__snapshots__/VerticalBarChartRTL.test.tsx.snap index 885b42fed8c1dd..7107331244face 100644 --- a/packages/charts/react-charting/src/components/VerticalBarChart/__snapshots__/VerticalBarChartRTL.test.tsx.snap +++ b/packages/charts/react-charting/src/components/VerticalBarChart/__snapshots__/VerticalBarChartRTL.test.tsx.snap @@ -14400,7 +14400,7 @@ exports[`Vertical bar chart rendering Should render the vertical bar chart with aria-label="undefined" aria-posinset="1" aria-selected="false" - aria-setsize="4" + aria-setsize="1" class= { @@ -14455,300 +14455,6 @@ exports[`Vertical bar chart rendering Should render the vertical bar chart with
-
- -
-
- -
-
- -
-
-
diff --git a/packages/charts/react-charting/src/components/VerticalStackedBarChart/VerticalStackedBarChart.base.tsx b/packages/charts/react-charting/src/components/VerticalStackedBarChart/VerticalStackedBarChart.base.tsx index 7e1dc04719647d..3a45277290bdd2 100644 --- a/packages/charts/react-charting/src/components/VerticalStackedBarChart/VerticalStackedBarChart.base.tsx +++ b/packages/charts/react-charting/src/components/VerticalStackedBarChart/VerticalStackedBarChart.base.tsx @@ -9,7 +9,14 @@ import { scaleUtc as d3ScaleUtc, scaleTime as d3ScaleTime, } from 'd3-scale'; -import { classNamesFunction, getId, getRTL, warnDeprecations, memoizeFunction } from '@fluentui/react/lib/Utilities'; +import { + classNamesFunction, + getId, + getRTL, + warnDeprecations, + memoizeFunction, + initializeComponentRef, +} from '@fluentui/react/lib/Utilities'; import { IPalette, IProcessedStyleSet } from '@fluentui/react/lib/Styling'; import { DirectionalHint } from '@fluentui/react/lib/Callout'; import { ILegend, Legends } from '../Legends/index'; @@ -52,7 +59,9 @@ import { createStringYAxis, formatDate, getNextGradient, + areArraysEqual, } from '../../utilities/index'; +import { IChart } from '../../types/index'; const getClassNames = classNamesFunction(); type NumericAxis = D3Axis; @@ -93,11 +102,12 @@ export interface IVerticalStackedBarChartState extends IBasestate { activeXAxisDataPoint: number | string | Date; callOutAccessibilityData?: IAccessibilityProps; calloutLegend: string; + selectedLegends: string[]; } -export class VerticalStackedBarChartBase extends React.Component< - IVerticalStackedBarChartProps, - IVerticalStackedBarChartState -> { +export class VerticalStackedBarChartBase + extends React.Component + implements IChart +{ public static defaultProps: Partial = { maxBarWidth: 24, useUTC: true, @@ -123,13 +133,17 @@ export class VerticalStackedBarChartBase extends React.Component< private _emptyChartId: string; private _xAxisInnerPadding: number; private _xAxisOuterPadding: number; + private _cartesianChartRef: React.RefObject; public constructor(props: IVerticalStackedBarChartProps) { super(props); + + initializeComponentRef(this); + this.state = { isCalloutVisible: false, - selectedLegend: props.legendProps?.selectedLegend ?? '', - activeLegend: '', + selectedLegends: props.legendProps?.selectedLegends || [], + activeLegend: undefined, refSelected: null, dataForHoverCard: 0, color: '', @@ -154,9 +168,16 @@ export class VerticalStackedBarChartBase extends React.Component< this._createLegendsForLine = memoizeFunction((data: IVerticalStackedChartProps[]) => this._getLineLegends(data)); this._emptyChartId = getId('_VSBC_empty'); this._domainMargin = MIN_DOMAIN_MARGIN; + this._cartesianChartRef = React.createRef(); } public componentDidUpdate(prevProps: IVerticalStackedBarChartProps): void { + if (!areArraysEqual(prevProps.legendProps?.selectedLegends, this.props.legendProps?.selectedLegends)) { + this.setState({ + selectedLegends: this.props.legendProps?.selectedLegends || [], + }); + } + if ( prevProps.height !== this.props.height || prevProps.width !== this.props.width || @@ -238,6 +259,7 @@ export class VerticalStackedBarChartBase extends React.Component< xAxisInnerPadding: this._xAxisInnerPadding, xAxisOuterPadding: this._xAxisOuterPadding, })} + ref={this._cartesianChartRef} /* eslint-disable react/jsx-no-bind */ children={(props: IChildProps) => { return ( @@ -269,6 +291,10 @@ export class VerticalStackedBarChartBase extends React.Component< ); } + public get chartContainer(): HTMLElement | null { + return this._cartesianChartRef.current?.chartContainer || null; + } + /** * This function tells us what to focus either the whole stack as focusable item. * or each individual item in the stack as focusable item. basically it depends @@ -281,7 +307,7 @@ export class VerticalStackedBarChartBase extends React.Component< const { isCalloutForStack = false } = this.props; let shouldFocusStackOnly: boolean = false; if (_isHavingLines) { - if (this.state.selectedLegend !== '') { + if (this._getHighlightedLegend().length === 1) { shouldFocusStackOnly = false; } else { shouldFocusStackOnly = true; @@ -380,7 +406,7 @@ export class VerticalStackedBarChartBase extends React.Component< const xScaleBandwidthTranslate = this._xAxisType !== XAxisTypes.StringAxis ? 0 : xScale.bandwidth() / 2; Object.keys(lineObject).forEach((item: string, index: number) => { - const shouldHighlight = this._legendHighlighted(item) || this._noLegendHighlighted(); // item is legend name + const shouldHighlight = this._isLegendHighlighted(item) || this._noLegendHighlighted(); // item is legend name for (let i = 1; i < lineObject[item].length; i++) { const x1 = xScale(lineObject[item][i - 1].xItem.xAxisPoint); const useSecondaryYScale = @@ -418,7 +444,7 @@ export class VerticalStackedBarChartBase extends React.Component< strokeLinecap="round" stroke={lineObject[item][i].color} transform={`translate(${xScaleBandwidthTranslate}, 0)`} - {...(this.state.selectedLegend === item && { + {...(this._isLegendHighlighted(item) && { onMouseOver: this._lineHover.bind(this, lineObject[item][i - 1]), onMouseLeave: this._lineHoverOut, })} @@ -438,11 +464,11 @@ export class VerticalStackedBarChartBase extends React.Component< circlePoint.useSecondaryYScale && secondaryYScale ? secondaryYScale(circlePoint.y) : yScale(circlePoint.y) } onMouseOver={ - this.state.selectedLegend === item + this._isLegendHighlighted(item) ? this._lineHover.bind(this, circlePoint) : this._onStackHover.bind(this, circlePoint.xItem) } - {...(this.state.selectedLegend === item && { + {...(this._isLegendHighlighted(item) && { onMouseLeave: this._lineHoverOut, })} r={this._getCircleVisibilityAndRadius(circlePoint.xItem.xAxisPoint, circlePoint.legend).radius} @@ -454,7 +480,7 @@ export class VerticalStackedBarChartBase extends React.Component< // When no legend is highlighted: Line points are automatically displayed along with the bars // at the same x-axis point in the stack callout. So to prevent an increase in focusable elements // and avoid conveying duplicate info, make these line points non-focusable. - data-is-focusable={this._legendHighlighted(item)} + data-is-focusable={this._isLegendHighlighted(item)} ref={e => (circleRef.refElement = e)} onFocus={this._lineFocus.bind(this, circlePoint, circleRef)} onBlur={this._lineHoverOut} @@ -475,11 +501,11 @@ export class VerticalStackedBarChartBase extends React.Component< xAxisPoint: string | number | Date, legend: string, ): { visibility: CircleVisbility; radius: number } => { - const { selectedLegend, activeXAxisDataPoint } = this.state; - if (selectedLegend !== '') { - if (xAxisPoint === activeXAxisDataPoint && selectedLegend === legend) { + const { activeXAxisDataPoint } = this.state; + if (!this._noLegendHighlighted()) { + if (xAxisPoint === activeXAxisDataPoint && this._isLegendHighlighted(legend)) { return { visibility: CircleVisbility.show, radius: 8 }; - } else if (selectedLegend === legend) { + } else if (this._isLegendHighlighted(legend)) { return { visibility: CircleVisbility.show, radius: 0.3 }; } else { return { visibility: CircleVisbility.hide, radius: 0 }; @@ -549,18 +575,6 @@ export class VerticalStackedBarChartBase extends React.Component< : null; }; - private _onLegendClick(legendTitle: string): void { - if (this.state.selectedLegend === legendTitle) { - this.setState({ - selectedLegend: '', - }); - } else { - this.setState({ - selectedLegend: legendTitle, - }); - } - } - private _onLegendHover(legendTitle: string): void { this.setState({ activeLegend: legendTitle, @@ -569,7 +583,7 @@ export class VerticalStackedBarChartBase extends React.Component< private _onLegendLeave(): void { this.setState({ - activeLegend: '', + activeLegend: undefined, }); } @@ -604,9 +618,6 @@ export class VerticalStackedBarChartBase extends React.Component< const legend: ILegend = { title: point.legend, color, - action: () => { - this._onLegendClick(point.legend); - }, hoverAction: allowHoverOnLegend ? () => { this._handleChartMouseLeave(); @@ -626,9 +637,6 @@ export class VerticalStackedBarChartBase extends React.Component< title: point.title, color: point.color, isLineLegendInBarChart: true, - action: () => { - this._onLegendClick(point.title); - }, hoverAction: allowHoverOnLegend ? () => { this._handleChartMouseLeave(); @@ -649,10 +657,34 @@ export class VerticalStackedBarChartBase extends React.Component< focusZonePropsInHoverCard={this.props.focusZonePropsForLegendsInHoverCard} overflowText={this.props.legendsOverflowText} {...this.props.legendProps} + onChange={this._onLegendSelectionChange.bind(this)} /> ); } + private _onLegendSelectionChange( + selectedLegends: string[], + event: React.MouseEvent, + currentLegend?: ILegend, + ): void { + if (this.props.legendProps?.canSelectMultipleLegends) { + this.setState({ selectedLegends }); + } else { + this.setState({ selectedLegends: selectedLegends.slice(-1) }); + } + if (this.props.legendProps?.onChange) { + this.props.legendProps.onChange(selectedLegends, event, currentLegend); + } + } + + private _getHighlightedLegend() { + return this.state.selectedLegends.length > 0 + ? this.state.selectedLegends + : this.state.activeLegend + ? [this.state.activeLegend] + : []; + } + private _onRectHover( xAxisPoint: string, point: IVSChartDataPoint, @@ -680,7 +712,7 @@ export class VerticalStackedBarChartBase extends React.Component< * Show the callout if highlighted bar is focused/hovered * and Hide it if unhighlighted bar is focused/hovered */ - isCalloutVisible: this.state.selectedLegend === '' || this.state.selectedLegend === point.legend, + isCalloutVisible: this._noLegendHighlighted() || this._isLegendHighlighted(point.legend), calloutLegend: point.legend, dataForHoverCard: point.data, color, @@ -734,6 +766,13 @@ export class VerticalStackedBarChartBase extends React.Component< stack: IVerticalStackedChartProps, refSelected: React.MouseEvent | SVGGElement, ): void { + if (!this._noLegendHighlighted()) { + stack = { + ...stack, + chartData: stack.chartData.filter(dataPoint => this._isLegendHighlighted(dataPoint.legend)), + lineData: stack.lineData?.filter(dataPoint => this._isLegendHighlighted(dataPoint.legend)), + }; + } const lineData = stack.lineData; const isLinesPresent: boolean = lineData !== undefined && lineData.length > 0; if (isLinesPresent) { @@ -742,9 +781,10 @@ export class VerticalStackedBarChartBase extends React.Component< item.shouldDrawBorderBottom = true; }); } + this.setState({ refSelected, - isCalloutVisible: true, + isCalloutVisible: stack.chartData.length > 0 || (stack.lineData?.length ?? 0) > 0, YValueHover: isLinesPresent ? [...lineData!.sort((a, b) => (a.data! < b.data! ? 1 : -1)), ...stack.chartData.slice().reverse()] : stack.chartData.slice().reverse(), @@ -870,7 +910,7 @@ export class VerticalStackedBarChartBase extends React.Component< const ref: IRefArrayData = {}; - const shouldHighlight = this._legendHighlighted(point.legend) || this._noLegendHighlighted() ? true : false; + const shouldHighlight = this._isLegendHighlighted(point.legend) || this._noLegendHighlighted() ? true : false; this._classNames = getClassNames(this.props.styles!, { theme: this.props.theme!, shouldHighlight, @@ -977,7 +1017,7 @@ export class VerticalStackedBarChartBase extends React.Component< barLabel = barTotalValue; } else { barsToDisplay.forEach(point => { - if (this._legendHighlighted(point.legend)) { + if (this._isLegendHighlighted(point.legend)) { showLabel = true; barLabel += point.data; } @@ -1103,18 +1143,15 @@ export class VerticalStackedBarChartBase extends React.Component< * 1. selection: if the user clicks on it * 2. hovering: if there is no selected legend and the user hovers over it */ - private _legendHighlighted = (legendTitle: string) => { - return ( - this.state.selectedLegend === legendTitle || - (this.state.selectedLegend === '' && this.state.activeLegend === legendTitle) - ); + private _isLegendHighlighted = (legendTitle: string): boolean => { + return this._getHighlightedLegend().includes(legendTitle); }; /** * This function checks if none of the legends is selected or hovered. */ private _noLegendHighlighted = () => { - return this.state.selectedLegend === '' && this.state.activeLegend === ''; + return this._getHighlightedLegend().length === 0; }; private _getAriaLabel = (singleChartData: IVerticalStackedChartProps, point?: IVSChartDataPoint): string => { diff --git a/packages/charts/react-charting/src/components/VerticalStackedBarChart/VerticalStackedBarChartRTL.test.tsx b/packages/charts/react-charting/src/components/VerticalStackedBarChart/VerticalStackedBarChartRTL.test.tsx index d3a36f9ac55d97..025dc39d66596c 100644 --- a/packages/charts/react-charting/src/components/VerticalStackedBarChart/VerticalStackedBarChartRTL.test.tsx +++ b/packages/charts/react-charting/src/components/VerticalStackedBarChart/VerticalStackedBarChartRTL.test.tsx @@ -503,13 +503,30 @@ describe('Vertical stacked bar chart - Subcomponent Legends', () => { { data: simplePointsWithLine, calloutProps: { doNotLayer: true } }, container => { // eslint-disable-next-line - const handleMouseClick = jest.spyOn(VerticalStackedBarChartBase.prototype as any, '_onLegendClick'); + const handleMouseClick = jest.spyOn(VerticalStackedBarChartBase.prototype as any, '_onLegendSelectionChange'); const legends = screen.getAllByText((content, element) => element!.tagName.toLowerCase() === 'button'); fireEvent.click(legends[0]); // Assert expect(handleMouseClick).toHaveBeenCalled(); }, ); + + testWithoutWait( + 'Should select multiple legends on click', + VerticalStackedBarChart, + { data: simplePoints, legendProps: { canSelectMultipleLegends: true }, calloutProps: { doNotLayer: true } }, + container => { + const firstLegend = screen.queryByText('Metadata1')?.closest('button'); + const secondLegend = screen.queryByText('Metadata2')?.closest('button'); + expect(firstLegend).toBeDefined(); + expect(secondLegend).toBeDefined(); + fireEvent.click(firstLegend!); + fireEvent.click(secondLegend!); + //Assert + expect(firstLegend).toHaveAttribute('aria-selected', 'true'); + expect(secondLegend).toHaveAttribute('aria-selected', 'true'); + }, + ); }); describe('Vertical stacked bar chart - Subcomponent callout', () => { diff --git a/packages/charts/react-charting/src/index.ts b/packages/charts/react-charting/src/index.ts index c27c09d1430456..2ae3660ac7f75a 100644 --- a/packages/charts/react-charting/src/index.ts +++ b/packages/charts/react-charting/src/index.ts @@ -97,6 +97,7 @@ export type { IVerticalStackedChartProps, SLink, SNode, + IChart, } from './types/index'; export type { IChartHoverCardProps, @@ -135,7 +136,7 @@ export { DataVizPalette, getColorFromToken, getNextColor } from './utilities/col export { DataVizGradientPalette, getGradientFromToken, getNextGradient } from './utilities/gradients'; export type { IGaugeChartProps, IGaugeChartSegment, IGaugeChartStyleProps, IGaugeChartStyles } from './GaugeChart'; export { GaugeChart, GaugeChartVariant, GaugeValueFormat } from './GaugeChart'; -export type { DeclarativeChartProps, Schema } from './DeclarativeChart'; +export type { DeclarativeChartProps, Schema, IDeclarativeChart, IImageExportOptions } from './DeclarativeChart'; export { DeclarativeChart } from './DeclarativeChart'; import './version'; diff --git a/packages/charts/react-charting/src/types/IDataPoint.ts b/packages/charts/react-charting/src/types/IDataPoint.ts index 7e4127b26f2ee5..dda593a408f4f5 100644 --- a/packages/charts/react-charting/src/types/IDataPoint.ts +++ b/packages/charts/react-charting/src/types/IDataPoint.ts @@ -814,3 +814,10 @@ export interface ICustomizedCalloutData { x: number | string | Date; values: ICustomizedCalloutDataPoint[]; } + +/** + * {@docCategory Chart} + */ +export interface IChart { + chartContainer: HTMLElement | null; +} diff --git a/packages/charts/react-charting/src/utilities/UtilityUnitTests.test.ts b/packages/charts/react-charting/src/utilities/UtilityUnitTests.test.ts index 4f2a6990c36d79..4ba0d27f07ca45 100644 --- a/packages/charts/react-charting/src/utilities/UtilityUnitTests.test.ts +++ b/packages/charts/react-charting/src/utilities/UtilityUnitTests.test.ts @@ -1182,3 +1182,25 @@ describe('getGradientFromToken', () => { expect(result).toEqual(['invalidTokenWithoutDot', 'invalidTokenWithoutDot']); }); }); + +describe('test array equality utility', () => { + it('both arrays are undefined', () => { + expect(utils.areArraysEqual(undefined, undefined) === true); + }); + + it('second array is undefined', () => { + expect(utils.areArraysEqual(['ac', 'bd'], undefined) === true); + }); + + it('first array is undefined', () => { + expect(utils.areArraysEqual(undefined, ['cg', 'df']) === false); + }); + + it('both arrays are unequal', () => { + expect(utils.areArraysEqual(['ae', 'bf'], ['cg', 'dh']) === false); + }); + + it('both arrays are equal', () => { + expect(utils.areArraysEqual(['ab', 'cd', 'ef', 'gh'], ['ab', 'cd', 'ef', 'gh']) === true); + }); +}); diff --git a/packages/charts/react-charting/src/utilities/utilities.ts b/packages/charts/react-charting/src/utilities/utilities.ts index 76105824f4e9c8..735024e852f983 100644 --- a/packages/charts/react-charting/src/utilities/utilities.ts +++ b/packages/charts/react-charting/src/utilities/utilities.ts @@ -1415,3 +1415,21 @@ export function getSecureProps(props: Record = {}): Record +## [0.1.5](https://github.com/microsoft/fluentui/tree/@fluentui/react-charts-preview_v0.1.5) + +Wed, 18 Dec 2024 10:59:37 GMT +[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-charts-preview_v0.1.4..@fluentui/react-charts-preview_v0.1.5) + +### Patches + +- Bump @fluentui/react-overflow to v9.2.5 ([PR #33483](https://github.com/microsoft/fluentui/pull/33483) by beachball) +- Bump @fluentui/react-popover to v9.9.29 ([PR #33483](https://github.com/microsoft/fluentui/pull/33483) by beachball) + ## [0.1.4](https://github.com/microsoft/fluentui/tree/@fluentui/react-charts-preview_v0.1.4) Mon, 16 Dec 2024 16:26:49 GMT diff --git a/packages/charts/react-charts-preview/library/package.json b/packages/charts/react-charts-preview/library/package.json index 250d9e484aad1d..32be5463b027cd 100644 --- a/packages/charts/react-charts-preview/library/package.json +++ b/packages/charts/react-charts-preview/library/package.json @@ -1,6 +1,6 @@ { "name": "@fluentui/react-charts-preview", - "version": "0.1.4", + "version": "0.1.5", "description": "React web chart controls for Microsoft fluentui v9 system.", "main": "lib-commonjs/index.js", "module": "lib/index.js", @@ -39,8 +39,8 @@ "dependencies": { "@fluentui/react-button": "^9.3.98", "@fluentui/react-jsx-runtime": "^9.0.48", - "@fluentui/react-overflow": "^9.2.4", - "@fluentui/react-popover": "^9.9.28", + "@fluentui/react-overflow": "^9.2.5", + "@fluentui/react-popover": "^9.9.29", "@fluentui/react-shared-contexts": "^9.21.2", "@fluentui/react-tabster": "^9.23.2", "@fluentui/react-theme": "^9.1.24", diff --git a/packages/codemods/CHANGELOG.json b/packages/codemods/CHANGELOG.json index 909e250cea9cd3..2056607f1acf2e 100644 --- a/packages/codemods/CHANGELOG.json +++ b/packages/codemods/CHANGELOG.json @@ -1,6 +1,21 @@ { "name": "@fluentui/codemods", "entries": [ + { + "date": "Mon, 23 Dec 2024 07:22:57 GMT", + "tag": "@fluentui/codemods_v8.4.27", + "version": "8.4.27", + "comments": { + "patch": [ + { + "author": "olfedias@microsoft.com", + "package": "@fluentui/codemods", + "commit": "dc7bb663e3d93a19b611cf1892556d69c57b1269", + "comment": "chore: remove usage of \"export *\"" + } + ] + } + }, { "date": "Thu, 11 Jul 2024 07:33:36 GMT", "tag": "@fluentui/codemods_v8.4.26", diff --git a/packages/codemods/CHANGELOG.md b/packages/codemods/CHANGELOG.md index 4a1409ea50e398..6548074ea7a59f 100644 --- a/packages/codemods/CHANGELOG.md +++ b/packages/codemods/CHANGELOG.md @@ -1,9 +1,18 @@ # Change Log - @fluentui/codemods -This log was last generated on Tue, 09 Jul 2024 07:36:39 GMT and should not be manually modified. +This log was last generated on Mon, 23 Dec 2024 07:22:57 GMT and should not be manually modified. +## [8.4.27](https://github.com/microsoft/fluentui/tree/@fluentui/codemods_v8.4.27) + +Mon, 23 Dec 2024 07:22:57 GMT +[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/codemods_v8.4.26..@fluentui/codemods_v8.4.27) + +### Patches + +- chore: remove usage of "export *" ([PR #33448](https://github.com/microsoft/fluentui/pull/33448) by olfedias@microsoft.com) + ## [8.4.26](https://github.com/microsoft/fluentui/tree/@fluentui/codemods_v8.4.26) Tue, 09 Jul 2024 07:36:39 GMT diff --git a/packages/codemods/package.json b/packages/codemods/package.json index 1db4b8f33dea6d..27f6a4cb2f7ab5 100644 --- a/packages/codemods/package.json +++ b/packages/codemods/package.json @@ -1,6 +1,6 @@ { "name": "@fluentui/codemods", - "version": "8.4.26", + "version": "8.4.27", "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/codemods/src/codeMods/tests/mock/compat/mockIndex.ts b/packages/codemods/src/codeMods/tests/mock/compat/mockIndex.ts index 2b56b163693673..69ff37c638f1bf 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 95a9bb3bbafac1..aaf4eede1810ad 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/common-styles/package.json b/packages/common-styles/package.json index f0885441ef4be6..967855f1ddef01 100644 --- a/packages/common-styles/package.json +++ b/packages/common-styles/package.json @@ -1,6 +1,6 @@ { "name": "@fluentui/common-styles", - "version": "1.2.64", + "version": "1.2.65", "description": "Common style definitions for Fluent UI React components", "repository": { "type": "git", diff --git a/packages/cra-template/package.json b/packages/cra-template/package.json index cd7b6017621741..f8f0f880a9adb5 100644 --- a/packages/cra-template/package.json +++ b/packages/cra-template/package.json @@ -1,6 +1,6 @@ { "name": "@fluentui/cra-template", - "version": "8.4.191", + "version": "8.4.193", "description": "Create React App template for Fluent UI React (@fluentui/react)", "repository": { "type": "git", diff --git a/packages/eslint-plugin/src/configs/base.js b/packages/eslint-plugin/src/configs/base.js index 2423f8a7b8b882..cab360135da702 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/fluent2-theme/CHANGELOG.json b/packages/fluent2-theme/CHANGELOG.json index c3eb2672460987..ae248afcfa03fc 100644 --- a/packages/fluent2-theme/CHANGELOG.json +++ b/packages/fluent2-theme/CHANGELOG.json @@ -1,6 +1,36 @@ { "name": "@fluentui/fluent2-theme", "entries": [ + { + "date": "Mon, 30 Dec 2024 07:21:29 GMT", + "tag": "@fluentui/fluent2-theme_v8.107.120", + "version": "8.107.120", + "comments": { + "patch": [ + { + "author": "beachball", + "package": "@fluentui/fluent2-theme", + "comment": "Bump @fluentui/react to v8.122.3", + "commit": "681a95a732fe385a70b8d4537dc489acbcd1c21e" + } + ] + } + }, + { + "date": "Mon, 23 Dec 2024 07:22:58 GMT", + "tag": "@fluentui/fluent2-theme_v8.107.119", + "version": "8.107.119", + "comments": { + "patch": [ + { + "author": "beachball", + "package": "@fluentui/fluent2-theme", + "comment": "Bump @fluentui/react to v8.122.2", + "commit": "7b4a3785c6c1d7c207602cad0a1795e3df9122ee" + } + ] + } + }, { "date": "Fri, 13 Dec 2024 07:23:12 GMT", "tag": "@fluentui/fluent2-theme_v8.107.118", diff --git a/packages/fluent2-theme/CHANGELOG.md b/packages/fluent2-theme/CHANGELOG.md index b12fed6710f4d9..932bc36c4ac3c4 100644 --- a/packages/fluent2-theme/CHANGELOG.md +++ b/packages/fluent2-theme/CHANGELOG.md @@ -1,9 +1,27 @@ # Change Log - @fluentui/fluent2-theme -This log was last generated on Fri, 13 Dec 2024 07:23:12 GMT and should not be manually modified. +This log was last generated on Mon, 30 Dec 2024 07:21:29 GMT and should not be manually modified. +## [8.107.120](https://github.com/microsoft/fluentui/tree/@fluentui/fluent2-theme_v8.107.120) + +Mon, 30 Dec 2024 07:21:29 GMT +[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/fluent2-theme_v8.107.119..@fluentui/fluent2-theme_v8.107.120) + +### Patches + +- Bump @fluentui/react to v8.122.3 ([PR #33520](https://github.com/microsoft/fluentui/pull/33520) by beachball) + +## [8.107.119](https://github.com/microsoft/fluentui/tree/@fluentui/fluent2-theme_v8.107.119) + +Mon, 23 Dec 2024 07:22:58 GMT +[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/fluent2-theme_v8.107.118..@fluentui/fluent2-theme_v8.107.119) + +### Patches + +- Bump @fluentui/react to v8.122.2 ([PR #33445](https://github.com/microsoft/fluentui/pull/33445) by beachball) + ## [8.107.118](https://github.com/microsoft/fluentui/tree/@fluentui/fluent2-theme_v8.107.118) Fri, 13 Dec 2024 07:23:12 GMT diff --git a/packages/fluent2-theme/package.json b/packages/fluent2-theme/package.json index 21281ce32040f2..62698de22d0c25 100644 --- a/packages/fluent2-theme/package.json +++ b/packages/fluent2-theme/package.json @@ -1,6 +1,6 @@ { "name": "@fluentui/fluent2-theme", - "version": "8.107.118", + "version": "8.107.120", "description": "A Fluent2 theme for Fluent UI React 8.x", "main": "lib-commonjs/index.js", "module": "lib/index.js", @@ -27,7 +27,7 @@ "@fluentui/scripts-webpack": "*" }, "dependencies": { - "@fluentui/react": "^8.122.1", + "@fluentui/react": "^8.122.3", "@fluentui/set-version": "^8.2.23", "tslib": "^2.1.0" } diff --git a/packages/font-icons-mdl2/CHANGELOG.json b/packages/font-icons-mdl2/CHANGELOG.json index c3c1f5f6eb79e9..cda94a3050c548 100644 --- a/packages/font-icons-mdl2/CHANGELOG.json +++ b/packages/font-icons-mdl2/CHANGELOG.json @@ -1,6 +1,21 @@ { "name": "@fluentui/font-icons-mdl2", "entries": [ + { + "date": "Mon, 23 Dec 2024 07:22:58 GMT", + "tag": "@fluentui/font-icons-mdl2_v8.5.57", + "version": "8.5.57", + "comments": { + "patch": [ + { + "author": "beachball", + "package": "@fluentui/font-icons-mdl2", + "comment": "Bump @fluentui/style-utilities to v8.11.6", + "commit": "7b4a3785c6c1d7c207602cad0a1795e3df9122ee" + } + ] + } + }, { "date": "Fri, 13 Dec 2024 07:23:12 GMT", "tag": "@fluentui/font-icons-mdl2_v8.5.56", diff --git a/packages/font-icons-mdl2/CHANGELOG.md b/packages/font-icons-mdl2/CHANGELOG.md index c9b879908dd1ea..caae1ea7460073 100644 --- a/packages/font-icons-mdl2/CHANGELOG.md +++ b/packages/font-icons-mdl2/CHANGELOG.md @@ -1,9 +1,18 @@ # Change Log - @fluentui/font-icons-mdl2 -This log was last generated on Fri, 13 Dec 2024 07:23:12 GMT and should not be manually modified. +This log was last generated on Mon, 23 Dec 2024 07:22:58 GMT and should not be manually modified. +## [8.5.57](https://github.com/microsoft/fluentui/tree/@fluentui/font-icons-mdl2_v8.5.57) + +Mon, 23 Dec 2024 07:22:58 GMT +[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/font-icons-mdl2_v8.5.56..@fluentui/font-icons-mdl2_v8.5.57) + +### Patches + +- Bump @fluentui/style-utilities to v8.11.6 ([PR #33445](https://github.com/microsoft/fluentui/pull/33445) by beachball) + ## [8.5.56](https://github.com/microsoft/fluentui/tree/@fluentui/font-icons-mdl2_v8.5.56) Fri, 13 Dec 2024 07:23:12 GMT diff --git a/packages/font-icons-mdl2/package.json b/packages/font-icons-mdl2/package.json index 31cc66ab231aef..c1b5b5a4e4bac4 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.56", + "version": "8.5.57", "description": "Fluent UI React icon set.", "main": "lib-commonjs/index.js", "module": "lib/index.js", @@ -28,7 +28,7 @@ }, "dependencies": { "@fluentui/set-version": "^8.2.23", - "@fluentui/style-utilities": "^8.11.5", + "@fluentui/style-utilities": "^8.11.6", "@fluentui/utilities": "^8.15.19", "tslib": "^2.1.0" }, diff --git a/packages/foundation-legacy/CHANGELOG.json b/packages/foundation-legacy/CHANGELOG.json index e4ea346e5508cd..d7708bd4ff75aa 100644 --- a/packages/foundation-legacy/CHANGELOG.json +++ b/packages/foundation-legacy/CHANGELOG.json @@ -1,6 +1,21 @@ { "name": "@fluentui/foundation-legacy", "entries": [ + { + "date": "Mon, 23 Dec 2024 07:22:58 GMT", + "tag": "@fluentui/foundation-legacy_v8.4.23", + "version": "8.4.23", + "comments": { + "patch": [ + { + "author": "beachball", + "package": "@fluentui/foundation-legacy", + "comment": "Bump @fluentui/style-utilities to v8.11.6", + "commit": "7b4a3785c6c1d7c207602cad0a1795e3df9122ee" + } + ] + } + }, { "date": "Fri, 13 Dec 2024 07:23:12 GMT", "tag": "@fluentui/foundation-legacy_v8.4.22", diff --git a/packages/foundation-legacy/CHANGELOG.md b/packages/foundation-legacy/CHANGELOG.md index c80687b70d060d..ed3c079575ece4 100644 --- a/packages/foundation-legacy/CHANGELOG.md +++ b/packages/foundation-legacy/CHANGELOG.md @@ -1,9 +1,18 @@ # Change Log - @fluentui/foundation-legacy -This log was last generated on Fri, 13 Dec 2024 07:23:12 GMT and should not be manually modified. +This log was last generated on Mon, 23 Dec 2024 07:22:58 GMT and should not be manually modified. +## [8.4.23](https://github.com/microsoft/fluentui/tree/@fluentui/foundation-legacy_v8.4.23) + +Mon, 23 Dec 2024 07:22:58 GMT +[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/foundation-legacy_v8.4.22..@fluentui/foundation-legacy_v8.4.23) + +### Patches + +- Bump @fluentui/style-utilities to v8.11.6 ([PR #33445](https://github.com/microsoft/fluentui/pull/33445) by beachball) + ## [8.4.22](https://github.com/microsoft/fluentui/tree/@fluentui/foundation-legacy_v8.4.22) Fri, 13 Dec 2024 07:23:12 GMT diff --git a/packages/foundation-legacy/package.json b/packages/foundation-legacy/package.json index 947bc28531dd67..f36c7e4806ad9b 100644 --- a/packages/foundation-legacy/package.json +++ b/packages/foundation-legacy/package.json @@ -1,6 +1,6 @@ { "name": "@fluentui/foundation-legacy", - "version": "8.4.22", + "version": "8.4.23", "description": "Legacy utilities for building Fluent UI React components.", "main": "lib-commonjs/index.js", "module": "lib/index.js", @@ -35,7 +35,7 @@ "dependencies": { "@fluentui/merge-styles": "^8.6.13", "@fluentui/set-version": "^8.2.23", - "@fluentui/style-utilities": "^8.11.5", + "@fluentui/style-utilities": "^8.11.6", "@fluentui/utilities": "^8.15.19", "tslib": "^2.1.0" }, diff --git a/packages/react-cards/CHANGELOG.json b/packages/react-cards/CHANGELOG.json index 232b8ff065b872..8a376977a2b641 100644 --- a/packages/react-cards/CHANGELOG.json +++ b/packages/react-cards/CHANGELOG.json @@ -1,6 +1,42 @@ { "name": "@fluentui/react-cards", "entries": [ + { + "date": "Mon, 30 Dec 2024 07:21:29 GMT", + "tag": "@fluentui/react-cards_v0.205.192", + "version": "0.205.192", + "comments": { + "patch": [ + { + "author": "beachball", + "package": "@fluentui/react-cards", + "comment": "Bump @fluentui/react to v8.122.3", + "commit": "681a95a732fe385a70b8d4537dc489acbcd1c21e" + } + ] + } + }, + { + "date": "Mon, 23 Dec 2024 07:22:58 GMT", + "tag": "@fluentui/react-cards_v0.205.191", + "version": "0.205.191", + "comments": { + "patch": [ + { + "author": "beachball", + "package": "@fluentui/react-cards", + "comment": "Bump @fluentui/react to v8.122.2", + "commit": "7b4a3785c6c1d7c207602cad0a1795e3df9122ee" + }, + { + "author": "beachball", + "package": "@fluentui/react-cards", + "comment": "Bump @fluentui/foundation-legacy to v8.4.23", + "commit": "7b4a3785c6c1d7c207602cad0a1795e3df9122ee" + } + ] + } + }, { "date": "Fri, 13 Dec 2024 07:23:12 GMT", "tag": "@fluentui/react-cards_v0.205.190", diff --git a/packages/react-cards/CHANGELOG.md b/packages/react-cards/CHANGELOG.md index cadec79291f3e0..8f880e6c1c67a1 100644 --- a/packages/react-cards/CHANGELOG.md +++ b/packages/react-cards/CHANGELOG.md @@ -1,9 +1,28 @@ # Change Log - @fluentui/react-cards -This log was last generated on Fri, 13 Dec 2024 07:23:12 GMT and should not be manually modified. +This log was last generated on Mon, 30 Dec 2024 07:21:29 GMT and should not be manually modified. +## [0.205.192](https://github.com/microsoft/fluentui/tree/@fluentui/react-cards_v0.205.192) + +Mon, 30 Dec 2024 07:21:29 GMT +[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-cards_v0.205.191..@fluentui/react-cards_v0.205.192) + +### Patches + +- Bump @fluentui/react to v8.122.3 ([PR #33520](https://github.com/microsoft/fluentui/pull/33520) by beachball) + +## [0.205.191](https://github.com/microsoft/fluentui/tree/@fluentui/react-cards_v0.205.191) + +Mon, 23 Dec 2024 07:22:58 GMT +[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-cards_v0.205.190..@fluentui/react-cards_v0.205.191) + +### Patches + +- Bump @fluentui/react to v8.122.2 ([PR #33445](https://github.com/microsoft/fluentui/pull/33445) by beachball) +- Bump @fluentui/foundation-legacy to v8.4.23 ([PR #33445](https://github.com/microsoft/fluentui/pull/33445) by beachball) + ## [0.205.190](https://github.com/microsoft/fluentui/tree/@fluentui/react-cards_v0.205.190) Fri, 13 Dec 2024 07:23:12 GMT diff --git a/packages/react-cards/package.json b/packages/react-cards/package.json index 8c58a51a68bec3..731fe66a202eb3 100644 --- a/packages/react-cards/package.json +++ b/packages/react-cards/package.json @@ -1,6 +1,6 @@ { "name": "@fluentui/react-cards", - "version": "0.205.190", + "version": "0.205.192", "description": "Deprecated experimental Card container components for Fluent UI React.", "main": "lib-commonjs/index.js", "module": "lib/index.js", @@ -33,8 +33,8 @@ "@fluentui/scripts-webpack": "*" }, "dependencies": { - "@fluentui/react": "^8.122.1", - "@fluentui/foundation-legacy": "^8.4.22", + "@fluentui/react": "^8.122.3", + "@fluentui/foundation-legacy": "^8.4.23", "@fluentui/set-version": "^8.2.23", "@microsoft/load-themed-styles": "^1.10.26", "tslib": "^2.1.0" diff --git a/packages/react-components/react-avatar/library/CHANGELOG.json b/packages/react-components/react-avatar/library/CHANGELOG.json index dc4cf46cfc47dc..2566640b7b57e6 100644 --- a/packages/react-components/react-avatar/library/CHANGELOG.json +++ b/packages/react-components/react-avatar/library/CHANGELOG.json @@ -1,6 +1,21 @@ { "name": "@fluentui/react-avatar", "entries": [ + { + "date": "Wed, 18 Dec 2024 10:59:37 GMT", + "tag": "@fluentui/react-avatar_v9.6.47", + "version": "9.6.47", + "comments": { + "patch": [ + { + "author": "beachball", + "package": "@fluentui/react-avatar", + "comment": "Bump @fluentui/react-popover to v9.9.29", + "commit": "54afa8c6ce8f7d200d5241584801899b27baaf1b" + } + ] + } + }, { "date": "Mon, 16 Dec 2024 16:26:49 GMT", "tag": "@fluentui/react-avatar_v9.6.46", diff --git a/packages/react-components/react-avatar/library/CHANGELOG.md b/packages/react-components/react-avatar/library/CHANGELOG.md index 4aa96a7591dc7f..ffe7d5ebb1e270 100644 --- a/packages/react-components/react-avatar/library/CHANGELOG.md +++ b/packages/react-components/react-avatar/library/CHANGELOG.md @@ -1,9 +1,18 @@ # Change Log - @fluentui/react-avatar -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 Wed, 18 Dec 2024 10:59:37 GMT and should not be manually modified. +## [9.6.47](https://github.com/microsoft/fluentui/tree/@fluentui/react-avatar_v9.6.47) + +Wed, 18 Dec 2024 10:59:37 GMT +[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-avatar_v9.6.46..@fluentui/react-avatar_v9.6.47) + +### Patches + +- Bump @fluentui/react-popover to v9.9.29 ([PR #33483](https://github.com/microsoft/fluentui/pull/33483) by beachball) + ## [9.6.46](https://github.com/microsoft/fluentui/tree/@fluentui/react-avatar_v9.6.46) Mon, 16 Dec 2024 16:26:49 GMT diff --git a/packages/react-components/react-avatar/library/package.json b/packages/react-components/react-avatar/library/package.json index c796fa0331c63c..cd07c63f6f0996 100644 --- a/packages/react-components/react-avatar/library/package.json +++ b/packages/react-components/react-avatar/library/package.json @@ -1,6 +1,6 @@ { "name": "@fluentui/react-avatar", - "version": "9.6.46", + "version": "9.6.47", "description": "React components for building Microsoft web experiences.", "main": "lib-commonjs/index.js", "module": "lib/index.js", @@ -24,7 +24,7 @@ "@fluentui/react-badge": "^9.2.48", "@fluentui/react-context-selector": "^9.1.71", "@fluentui/react-icons": "^2.0.245", - "@fluentui/react-popover": "^9.9.28", + "@fluentui/react-popover": "^9.9.29", "@fluentui/react-shared-contexts": "^9.21.2", "@fluentui/react-tabster": "^9.23.2", "@fluentui/react-theme": "^9.1.24", diff --git a/packages/react-components/react-breadcrumb/library/package.json b/packages/react-components/react-breadcrumb/library/package.json index 63b788f1c82e96..acfb5dbf3fe059 100644 --- a/packages/react-components/react-breadcrumb/library/package.json +++ b/packages/react-components/react-breadcrumb/library/package.json @@ -1,6 +1,6 @@ { "name": "@fluentui/react-breadcrumb", - "version": "9.0.46", + "version": "9.0.47", "description": "Breadcrumb component for Fluent UI React.", "main": "lib-commonjs/index.js", "module": "lib/index.js", diff --git a/packages/react-components/react-color-picker-preview/library/bundle-size/ColorArea.fixture.js b/packages/react-components/react-color-picker-preview/library/bundle-size/ColorArea.fixture.js new file mode 100644 index 00000000000000..8a829cb2bf0380 --- /dev/null +++ b/packages/react-components/react-color-picker-preview/library/bundle-size/ColorArea.fixture.js @@ -0,0 +1,7 @@ +import { ColorArea } from '@fluentui/react-color-picker-preview'; + +console.log(ColorArea); + +export default { + name: 'ColorArea', +}; diff --git a/packages/react-components/react-color-picker-preview/library/bundle-size/ColorPicker.fixture.js b/packages/react-components/react-color-picker-preview/library/bundle-size/ColorPicker.fixture.js new file mode 100644 index 00000000000000..7a0b7f9a01cf7b --- /dev/null +++ b/packages/react-components/react-color-picker-preview/library/bundle-size/ColorPicker.fixture.js @@ -0,0 +1,7 @@ +import { ColorPicker } from '@fluentui/react-color-picker-preview'; + +console.log(ColorPicker); + +export default { + name: 'ColorPicker', +}; diff --git a/packages/react-components/react-color-picker-preview/library/bundle-size/ColorSlider.fixture.js b/packages/react-components/react-color-picker-preview/library/bundle-size/ColorSlider.fixture.js new file mode 100644 index 00000000000000..ce8fbc6a055694 --- /dev/null +++ b/packages/react-components/react-color-picker-preview/library/bundle-size/ColorSlider.fixture.js @@ -0,0 +1,7 @@ +import { ColorSlider } from '@fluentui/react-color-picker-preview'; + +console.log(ColorSlider); + +export default { + name: 'ColorSlider', +}; diff --git a/packages/react-components/react-color-picker-preview/stories/src/ColorPicker/ColorPickerDefault.stories.tsx b/packages/react-components/react-color-picker-preview/stories/src/ColorPicker/ColorPickerDefault.stories.tsx index 4ba93f4bbf9392..4902f0cf02eb84 100644 --- a/packages/react-components/react-color-picker-preview/stories/src/ColorPicker/ColorPickerDefault.stories.tsx +++ b/packages/react-components/react-color-picker-preview/stories/src/ColorPicker/ColorPickerDefault.stories.tsx @@ -1,6 +1,16 @@ import * as React from 'react'; import { tinycolor } from '@ctrl/tinycolor'; -import { makeStyles, useId, Input, type InputProps, Label } from '@fluentui/react-components'; +import { + makeStyles, + useId, + Input, + type InputProps, + Label, + SpinButton, + type SpinButtonProps, + type SpinButtonOnChangeData, + type SpinButtonChangeEvent, +} from '@fluentui/react-components'; import { ColorPicker, ColorSlider, @@ -36,21 +46,46 @@ const useStyles = makeStyles({ input: { width: '80px', }, + spinButton: { + width: '50px', + }, }); const HEX_COLOR_REGEX = /^#?([0-9A-Fa-f]{0,6})$/; +const NUMBER_REGEX = /^\d+$/; const DEFAULT_COLOR_HSV = tinycolor('#2be700').toHsv(); +type RgbKey = 'r' | 'g' | 'b'; + export const Default = () => { const hexId = useId('hex-input'); const styles = useStyles(); const [color, setColor] = React.useState(DEFAULT_COLOR_HSV); const [hex, setHex] = React.useState(tinycolor(color).toHexString()); + const [rgb, setRgb] = React.useState(tinycolor(color).toRgb()); const handleChange: ColorPickerProps['onColorChange'] = (_, data) => { setColor({ ...data.color, a: data.color.a ?? 1 }); setHex(tinycolor(data.color).toHexString()); + setRgb(tinycolor(data.color).toRgb()); + }; + + const onRgbChange = (event: SpinButtonChangeEvent, data: SpinButtonOnChangeData) => { + const value = data.value ?? (data.displayValue !== undefined ? parseFloat(data.displayValue) : null); + + if (value === null || Number.isNaN(value) || !NUMBER_REGEX.test(value.toString())) { + return; + } + + const colorKey = (event.target as HTMLInputElement).name as RgbKey; + + const newColor = tinycolor({ ...rgb, [colorKey]: value }); + if (newColor.isValid) { + setColor(newColor.toHsv()); + setHex(newColor.toHex()); + setRgb(newColor.toRgb()); + } }; return ( @@ -74,7 +109,11 @@ export const Default = () => { setHex(oldValue => (HEX_COLOR_REGEX.test(value) ? value : oldValue)); }} /> + + +
+
); }; @@ -99,6 +138,36 @@ const InputHexField = ({ ); }; +const InputRgbField = ({ + value, + onChange, + label, + name, +}: { + value: number; + label: string; + name: RgbKey; + onChange?: SpinButtonProps['onChange']; +}) => { + const id = useId(`${label.toLowerCase()}-input`); + const styles = useStyles(); + + return ( +
+ + +
+ ); +}; + const handleOnBlur = (e: React.FocusEvent) => { const value = tinycolor(e.target.value); if (!value.isValid) { diff --git a/packages/react-components/react-components/CHANGELOG.json b/packages/react-components/react-components/CHANGELOG.json index cfc76e1249d074..d41c76fea81a72 100644 --- a/packages/react-components/react-components/CHANGELOG.json +++ b/packages/react-components/react-components/CHANGELOG.json @@ -1,6 +1,54 @@ { "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", + "version": "9.56.7", + "comments": { + "patch": [ + { + "author": "jiangemma@microsoft.com", + "package": "@fluentui/react-dialog", + "commit": "0eca6fb68963b15b664b8560984f0f742bae280b", + "comment": "docs(react-dialog): Fix doc-comment links that don't translate to storybook" + }, + { + "author": "jiangemma@microsoft.com", + "package": "@fluentui/react-menu", + "commit": "0eca6fb68963b15b664b8560984f0f742bae280b", + "comment": "docs(react-menu): Fix doc-comment links that don't translate to storybook" + }, + { + "author": "jiangemma@microsoft.com", + "package": "@fluentui/react-popover", + "commit": "0eca6fb68963b15b664b8560984f0f742bae280b", + "comment": "docs(react-popover): Fix doc-comment links that don't translate to storybook" + }, + { + "author": "derdem@microsoft.com", + "package": "@fluentui/react-rating", + "commit": "084c76645ce97417b2bdc50203f4c66f5fd27309", + "comment": "fix: Pass missing Rating's itemLabel prop to its state so RatingItem consumes it from context." + } + ] + } + }, { "date": "Mon, 16 Dec 2024 16:26:45 GMT", "tag": "@fluentui/react-components_v9.56.6", diff --git a/packages/react-components/react-components/CHANGELOG.md b/packages/react-components/react-components/CHANGELOG.md index ca9deac15b3627..0d568f05c23fa6 100644 --- a/packages/react-components/react-components/CHANGELOG.md +++ b/packages/react-components/react-components/CHANGELOG.md @@ -1,9 +1,35 @@ # Change Log - @fluentui/react-components -This log was last generated on Mon, 16 Dec 2024 16:26:45 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 +[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-components_v9.56.6..@fluentui/react-components_v9.56.7) + +### Patches + +- `@fluentui/react-dialog` + - docs(react-dialog): Fix doc-comment links that don't translate to storybook ([PR #33471](https://github.com/microsoft/fluentui/pull/33471) by jiangemma@microsoft.com) +- `@fluentui/react-menu` + - docs(react-menu): Fix doc-comment links that don't translate to storybook ([PR #33471](https://github.com/microsoft/fluentui/pull/33471) by jiangemma@microsoft.com) +- `@fluentui/react-popover` + - docs(react-popover): Fix doc-comment links that don't translate to storybook ([PR #33471](https://github.com/microsoft/fluentui/pull/33471) by jiangemma@microsoft.com) +- `@fluentui/react-rating` + - fix: Pass missing Rating's itemLabel prop to its state so RatingItem consumes it from context. ([PR #33361](https://github.com/microsoft/fluentui/pull/33361) by derdem@microsoft.com) + ## [9.56.6](https://github.com/microsoft/fluentui/tree/@fluentui/react-components_v9.56.6) Mon, 16 Dec 2024 16:26:45 GMT diff --git a/packages/react-components/react-components/package.json b/packages/react-components/react-components/package.json index ae1254d837235c..bce0970ab11559 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.6", + "version": "9.56.8", "description": "Suite package for converged React components", "main": "lib-commonjs/index.js", "module": "lib/index.js", @@ -18,27 +18,27 @@ "dependencies": { "@fluentui/react-accordion": "^9.5.12", "@fluentui/react-alert": "9.0.0-beta.124", - "@fluentui/react-avatar": "^9.6.46", + "@fluentui/react-avatar": "^9.6.47", "@fluentui/react-badge": "^9.2.48", "@fluentui/react-button": "^9.3.98", "@fluentui/react-card": "^9.0.100", "@fluentui/react-checkbox": "^9.2.44", "@fluentui/react-combobox": "^9.13.15", - "@fluentui/react-dialog": "^9.11.25", + "@fluentui/react-dialog": "^9.11.26", "@fluentui/react-divider": "^9.2.80", - "@fluentui/react-drawer": "^9.6.5", + "@fluentui/react-drawer": "^9.6.6", "@fluentui/react-field": "^9.1.83", "@fluentui/react-image": "^9.1.78", "@fluentui/react-infobutton": "9.0.0-beta.102", - "@fluentui/react-infolabel": "^9.0.53", + "@fluentui/react-infolabel": "^9.0.54", "@fluentui/react-input": "^9.4.96", "@fluentui/react-label": "^9.1.81", "@fluentui/react-link": "^9.3.5", - "@fluentui/react-menu": "^9.14.23", - "@fluentui/react-overflow": "^9.2.4", - "@fluentui/react-persona": "^9.2.105", + "@fluentui/react-menu": "^9.14.24", + "@fluentui/react-overflow": "^9.2.5", + "@fluentui/react-persona": "^9.2.106", "@fluentui/react-portal": "^9.4.40", - "@fluentui/react-popover": "^9.9.28", + "@fluentui/react-popover": "^9.9.29", "@fluentui/react-positioning": "^9.16.0", "@fluentui/react-progress": "^9.1.94", "@fluentui/react-provider": "^9.18.2", @@ -51,10 +51,10 @@ "@fluentui/react-spinner": "^9.5.5", "@fluentui/react-swatch-picker": "^9.1.17", "@fluentui/react-switch": "^9.1.101", - "@fluentui/react-table": "^9.15.25", + "@fluentui/react-table": "^9.15.26", "@fluentui/react-tabs": "^9.6.5", "@fluentui/react-tabster": "^9.23.2", - "@fluentui/react-tags": "^9.3.26", + "@fluentui/react-tags": "^9.3.27", "@fluentui/react-textarea": "^9.3.95", "@fluentui/react-theme": "^9.1.24", "@fluentui/react-toast": "^9.3.63", @@ -63,16 +63,16 @@ "@fluentui/react-utilities": "^9.18.19", "@fluentui/react-text": "^9.4.30", "@fluentui/react-virtualizer": "9.0.0-alpha.89", - "@fluentui/react-tree": "^9.8.10", + "@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-breadcrumb": "^9.0.46", + "@fluentui/react-message-bar": "^9.2.19", + "@fluentui/react-breadcrumb": "^9.0.47", "@fluentui/react-aria": "^9.13.12", - "@fluentui/react-rating": "^9.0.25", + "@fluentui/react-rating": "^9.0.26", "@fluentui/react-search": "^9.0.26", - "@fluentui/react-teaching-popover": "^9.1.25", - "@fluentui/react-tag-picker": "^9.3.12", + "@fluentui/react-teaching-popover": "^9.1.26", + "@fluentui/react-tag-picker": "^9.3.13", "@fluentui/react-motion": "^9.6.5", "@fluentui/react-carousel": "^9.4.3" }, diff --git a/packages/react-components/react-datepicker-compat/library/CHANGELOG.json b/packages/react-components/react-datepicker-compat/library/CHANGELOG.json index b08354be38bd7d..eee18adda14d6b 100644 --- a/packages/react-components/react-datepicker-compat/library/CHANGELOG.json +++ b/packages/react-components/react-datepicker-compat/library/CHANGELOG.json @@ -1,6 +1,21 @@ { "name": "@fluentui/react-datepicker-compat", "entries": [ + { + "date": "Wed, 18 Dec 2024 10:59:37 GMT", + "tag": "@fluentui/react-datepicker-compat_v0.4.59", + "version": "0.4.59", + "comments": { + "patch": [ + { + "author": "beachball", + "package": "@fluentui/react-datepicker-compat", + "comment": "Bump @fluentui/react-popover to v9.9.29", + "commit": "54afa8c6ce8f7d200d5241584801899b27baaf1b" + } + ] + } + }, { "date": "Mon, 16 Dec 2024 16:26:49 GMT", "tag": "@fluentui/react-datepicker-compat_v0.4.58", diff --git a/packages/react-components/react-datepicker-compat/library/CHANGELOG.md b/packages/react-components/react-datepicker-compat/library/CHANGELOG.md index a54366b0cfd1b2..f430f52192888c 100644 --- a/packages/react-components/react-datepicker-compat/library/CHANGELOG.md +++ b/packages/react-components/react-datepicker-compat/library/CHANGELOG.md @@ -1,9 +1,18 @@ # Change Log - @fluentui/react-datepicker-compat -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 Wed, 18 Dec 2024 10:59:37 GMT and should not be manually modified. +## [0.4.59](https://github.com/microsoft/fluentui/tree/@fluentui/react-datepicker-compat_v0.4.59) + +Wed, 18 Dec 2024 10:59:37 GMT +[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-datepicker-compat_v0.4.58..@fluentui/react-datepicker-compat_v0.4.59) + +### Patches + +- Bump @fluentui/react-popover to v9.9.29 ([PR #33483](https://github.com/microsoft/fluentui/pull/33483) by beachball) + ## [0.4.58](https://github.com/microsoft/fluentui/tree/@fluentui/react-datepicker-compat_v0.4.58) Mon, 16 Dec 2024 16:26:49 GMT diff --git a/packages/react-components/react-datepicker-compat/library/package.json b/packages/react-components/react-datepicker-compat/library/package.json index 2ab4772dba7ad5..8a749c1b98a0f7 100644 --- a/packages/react-components/react-datepicker-compat/library/package.json +++ b/packages/react-components/react-datepicker-compat/library/package.json @@ -1,6 +1,6 @@ { "name": "@fluentui/react-datepicker-compat", - "version": "0.4.58", + "version": "0.4.59", "description": "React components for building web experiences", "main": "lib-commonjs/index.js", "module": "lib/index.js", @@ -26,7 +26,7 @@ "@fluentui/react-icons": "^2.0.245", "@fluentui/react-input": "^9.4.96", "@fluentui/react-jsx-runtime": "^9.0.48", - "@fluentui/react-popover": "^9.9.28", + "@fluentui/react-popover": "^9.9.29", "@fluentui/react-portal": "^9.4.40", "@fluentui/react-positioning": "^9.16.0", "@fluentui/react-shared-contexts": "^9.21.2", diff --git a/packages/react-components/react-dialog/library/CHANGELOG.json b/packages/react-components/react-dialog/library/CHANGELOG.json index 4462eeed5e7b9c..9db09ede386696 100644 --- a/packages/react-components/react-dialog/library/CHANGELOG.json +++ b/packages/react-components/react-dialog/library/CHANGELOG.json @@ -1,6 +1,21 @@ { "name": "@fluentui/react-dialog", "entries": [ + { + "date": "Wed, 18 Dec 2024 10:59:36 GMT", + "tag": "@fluentui/react-dialog_v9.11.26", + "version": "9.11.26", + "comments": { + "patch": [ + { + "author": "jiangemma@microsoft.com", + "package": "@fluentui/react-dialog", + "commit": "0eca6fb68963b15b664b8560984f0f742bae280b", + "comment": "docs(react-dialog): Fix doc-comment links that don't translate to storybook" + } + ] + } + }, { "date": "Mon, 16 Dec 2024 16:26:49 GMT", "tag": "@fluentui/react-dialog_v9.11.25", diff --git a/packages/react-components/react-dialog/library/CHANGELOG.md b/packages/react-components/react-dialog/library/CHANGELOG.md index 5d24473a3f100b..7981ed712d1234 100644 --- a/packages/react-components/react-dialog/library/CHANGELOG.md +++ b/packages/react-components/react-dialog/library/CHANGELOG.md @@ -1,9 +1,18 @@ # Change Log - @fluentui/react-dialog -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 Wed, 18 Dec 2024 10:59:36 GMT and should not be manually modified. +## [9.11.26](https://github.com/microsoft/fluentui/tree/@fluentui/react-dialog_v9.11.26) + +Wed, 18 Dec 2024 10:59:36 GMT +[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-dialog_v9.11.25..@fluentui/react-dialog_v9.11.26) + +### Patches + +- docs(react-dialog): Fix doc-comment links that don't translate to storybook ([PR #33471](https://github.com/microsoft/fluentui/pull/33471) by jiangemma@microsoft.com) + ## [9.11.25](https://github.com/microsoft/fluentui/tree/@fluentui/react-dialog_v9.11.25) Mon, 16 Dec 2024 16:26:49 GMT diff --git a/packages/react-components/react-dialog/library/package.json b/packages/react-components/react-dialog/library/package.json index dbc3d2c9a27a9e..d9690afee5ece9 100644 --- a/packages/react-components/react-dialog/library/package.json +++ b/packages/react-components/react-dialog/library/package.json @@ -1,6 +1,6 @@ { "name": "@fluentui/react-dialog", - "version": "9.11.25", + "version": "9.11.26", "description": "Dialog component for Fluent UI React", "main": "lib-commonjs/index.js", "module": "lib/index.js", diff --git a/packages/react-components/react-drawer/library/CHANGELOG.json b/packages/react-components/react-drawer/library/CHANGELOG.json index 53491f6d9803b8..37f190c2cbecd4 100644 --- a/packages/react-components/react-drawer/library/CHANGELOG.json +++ b/packages/react-components/react-drawer/library/CHANGELOG.json @@ -1,6 +1,21 @@ { "name": "@fluentui/react-drawer", "entries": [ + { + "date": "Wed, 18 Dec 2024 10:59:37 GMT", + "tag": "@fluentui/react-drawer_v9.6.6", + "version": "9.6.6", + "comments": { + "patch": [ + { + "author": "beachball", + "package": "@fluentui/react-drawer", + "comment": "Bump @fluentui/react-dialog to v9.11.26", + "commit": "54afa8c6ce8f7d200d5241584801899b27baaf1b" + } + ] + } + }, { "date": "Mon, 16 Dec 2024 16:26:49 GMT", "tag": "@fluentui/react-drawer_v9.6.5", diff --git a/packages/react-components/react-drawer/library/CHANGELOG.md b/packages/react-components/react-drawer/library/CHANGELOG.md index 77d5b188afaaef..209a903a7db912 100644 --- a/packages/react-components/react-drawer/library/CHANGELOG.md +++ b/packages/react-components/react-drawer/library/CHANGELOG.md @@ -1,9 +1,18 @@ # Change Log - @fluentui/react-drawer -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 Wed, 18 Dec 2024 10:59:37 GMT and should not be manually modified. +## [9.6.6](https://github.com/microsoft/fluentui/tree/@fluentui/react-drawer_v9.6.6) + +Wed, 18 Dec 2024 10:59:37 GMT +[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-drawer_v9.6.5..@fluentui/react-drawer_v9.6.6) + +### Patches + +- Bump @fluentui/react-dialog to v9.11.26 ([PR #33483](https://github.com/microsoft/fluentui/pull/33483) by beachball) + ## [9.6.5](https://github.com/microsoft/fluentui/tree/@fluentui/react-drawer_v9.6.5) Mon, 16 Dec 2024 16:26:49 GMT diff --git a/packages/react-components/react-drawer/library/package.json b/packages/react-components/react-drawer/library/package.json index 04baf54e1ea73b..d475b3e597c2dc 100644 --- a/packages/react-components/react-drawer/library/package.json +++ b/packages/react-components/react-drawer/library/package.json @@ -1,6 +1,6 @@ { "name": "@fluentui/react-drawer", - "version": "9.6.5", + "version": "9.6.6", "description": "Drawer components for Fluent UI React", "main": "lib-commonjs/index.js", "module": "lib/index.js", @@ -20,7 +20,7 @@ "@fluentui/scripts-cypress": "*" }, "dependencies": { - "@fluentui/react-dialog": "^9.11.25", + "@fluentui/react-dialog": "^9.11.26", "@fluentui/react-jsx-runtime": "^9.0.48", "@fluentui/react-motion": "^9.6.5", "@fluentui/react-portal": "^9.4.40", diff --git a/packages/react-components/react-infolabel/library/CHANGELOG.json b/packages/react-components/react-infolabel/library/CHANGELOG.json index 426ca705ea5166..60a99447d46d24 100644 --- a/packages/react-components/react-infolabel/library/CHANGELOG.json +++ b/packages/react-components/react-infolabel/library/CHANGELOG.json @@ -1,6 +1,21 @@ { "name": "@fluentui/react-infolabel", "entries": [ + { + "date": "Wed, 18 Dec 2024 10:59:37 GMT", + "tag": "@fluentui/react-infolabel_v9.0.54", + "version": "9.0.54", + "comments": { + "patch": [ + { + "author": "beachball", + "package": "@fluentui/react-infolabel", + "comment": "Bump @fluentui/react-popover to v9.9.29", + "commit": "54afa8c6ce8f7d200d5241584801899b27baaf1b" + } + ] + } + }, { "date": "Mon, 16 Dec 2024 16:26:49 GMT", "tag": "@fluentui/react-infolabel_v9.0.53", diff --git a/packages/react-components/react-infolabel/library/CHANGELOG.md b/packages/react-components/react-infolabel/library/CHANGELOG.md index 2777833b67e8f4..29f67f2804eeaf 100644 --- a/packages/react-components/react-infolabel/library/CHANGELOG.md +++ b/packages/react-components/react-infolabel/library/CHANGELOG.md @@ -1,9 +1,18 @@ # Change Log - @fluentui/react-infolabel -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 Wed, 18 Dec 2024 10:59:37 GMT and should not be manually modified. +## [9.0.54](https://github.com/microsoft/fluentui/tree/@fluentui/react-infolabel_v9.0.54) + +Wed, 18 Dec 2024 10:59:37 GMT +[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-infolabel_v9.0.53..@fluentui/react-infolabel_v9.0.54) + +### Patches + +- Bump @fluentui/react-popover to v9.9.29 ([PR #33483](https://github.com/microsoft/fluentui/pull/33483) by beachball) + ## [9.0.53](https://github.com/microsoft/fluentui/tree/@fluentui/react-infolabel_v9.0.53) Mon, 16 Dec 2024 16:26:49 GMT diff --git a/packages/react-components/react-infolabel/library/package.json b/packages/react-components/react-infolabel/library/package.json index e7a1f660935434..8401759d0ec358 100644 --- a/packages/react-components/react-infolabel/library/package.json +++ b/packages/react-components/react-infolabel/library/package.json @@ -1,6 +1,6 @@ { "name": "@fluentui/react-infolabel", - "version": "9.0.53", + "version": "9.0.54", "description": "InfoLabel component for Fluent UI v9", "main": "lib-commonjs/index.js", "module": "lib/index.js", @@ -22,7 +22,7 @@ "dependencies": { "@fluentui/react-icons": "^2.0.245", "@fluentui/react-label": "^9.1.81", - "@fluentui/react-popover": "^9.9.28", + "@fluentui/react-popover": "^9.9.29", "@fluentui/react-tabster": "^9.23.2", "@fluentui/react-jsx-runtime": "^9.0.48", "@fluentui/react-theme": "^9.1.24", diff --git a/packages/react-components/react-menu/library/CHANGELOG.json b/packages/react-components/react-menu/library/CHANGELOG.json index b90c3b1e553d35..1fdd22876e8b59 100644 --- a/packages/react-components/react-menu/library/CHANGELOG.json +++ b/packages/react-components/react-menu/library/CHANGELOG.json @@ -1,6 +1,21 @@ { "name": "@fluentui/react-menu", "entries": [ + { + "date": "Wed, 18 Dec 2024 10:59:36 GMT", + "tag": "@fluentui/react-menu_v9.14.24", + "version": "9.14.24", + "comments": { + "patch": [ + { + "author": "jiangemma@microsoft.com", + "package": "@fluentui/react-menu", + "commit": "0eca6fb68963b15b664b8560984f0f742bae280b", + "comment": "docs(react-menu): Fix doc-comment links that don't translate to storybook" + } + ] + } + }, { "date": "Mon, 16 Dec 2024 16:26:49 GMT", "tag": "@fluentui/react-menu_v9.14.23", diff --git a/packages/react-components/react-menu/library/CHANGELOG.md b/packages/react-components/react-menu/library/CHANGELOG.md index 284f045d6fb6d5..21ffdb0f06672c 100644 --- a/packages/react-components/react-menu/library/CHANGELOG.md +++ b/packages/react-components/react-menu/library/CHANGELOG.md @@ -1,9 +1,18 @@ # Change Log - @fluentui/react-menu -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 Wed, 18 Dec 2024 10:59:36 GMT and should not be manually modified. +## [9.14.24](https://github.com/microsoft/fluentui/tree/@fluentui/react-menu_v9.14.24) + +Wed, 18 Dec 2024 10:59:36 GMT +[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-menu_v9.14.23..@fluentui/react-menu_v9.14.24) + +### Patches + +- docs(react-menu): Fix doc-comment links that don't translate to storybook ([PR #33471](https://github.com/microsoft/fluentui/pull/33471) by jiangemma@microsoft.com) + ## [9.14.23](https://github.com/microsoft/fluentui/tree/@fluentui/react-menu_v9.14.23) Mon, 16 Dec 2024 16:26:49 GMT diff --git a/packages/react-components/react-menu/library/package.json b/packages/react-components/react-menu/library/package.json index db635bb4a31661..dd6fdf9899d947 100644 --- a/packages/react-components/react-menu/library/package.json +++ b/packages/react-components/react-menu/library/package.json @@ -1,6 +1,6 @@ { "name": "@fluentui/react-menu", - "version": "9.14.23", + "version": "9.14.24", "description": "Fluent UI menu component", "main": "lib-commonjs/index.js", "module": "lib/index.js", diff --git a/packages/react-components/react-message-bar/library/CHANGELOG.json b/packages/react-components/react-message-bar/library/CHANGELOG.json index 7af96ca5b028a1..76cb7b3b7d04aa 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 a5ade09fda1858..47343bfcb13b62 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 3f5b05fb9c153a..4fd78689ddb5a2 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.5", + "@fluentui/react-motion-components-preview": "^0.4.1", "@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.test.tsx b/packages/react-components/react-message-bar/library/src/components/MessageBar/MessageBar.test.tsx index 2881a0b1a2f548..056dce8a52bfdf 100644 --- a/packages/react-components/react-message-bar/library/src/components/MessageBar/MessageBar.test.tsx +++ b/packages/react-components/react-message-bar/library/src/components/MessageBar/MessageBar.test.tsx @@ -23,6 +23,16 @@ describe('MessageBar', () => { // do nothing } }; + + // @ts-expect-error https://github.com/jsdom/jsdom/issues/2032 + global.IntersectionObserver = class IntersectionObserver { + public observe() { + // do nothing + } + public disconnect() { + // do nothing + } + }; }); beforeEach(() => { 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 ac8dbb62040eee..95b0ee35ccf3db 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 cb2e0e7f1bc256..1c6145749da4fa 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/useMessageBarReflow.ts b/packages/react-components/react-message-bar/library/src/components/MessageBar/useMessageBarReflow.ts index d8a18037f6dfb1..8bbb0ae01843bc 100644 --- a/packages/react-components/react-message-bar/library/src/components/MessageBar/useMessageBarReflow.ts +++ b/packages/react-components/react-message-bar/library/src/components/MessageBar/useMessageBarReflow.ts @@ -1,91 +1,92 @@ import * as React from 'react'; import { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts'; -import { isHTMLElement } from '@fluentui/react-utilities'; +import { useIsomorphicLayoutEffect } from '@fluentui/react-utilities'; export function useMessageBarReflow(enabled: boolean = false) { const { targetDocument } = useFluent(); - const forceUpdate = React.useReducer(() => ({}), {})[1]; - const reflowingRef = React.useRef(false); - // TODO: exclude types from this lint rule: https://github.com/microsoft/fluentui/issues/31286 - - const resizeObserverRef = React.useRef(null); const prevInlineSizeRef = React.useRef(-1); + const messageBarRef = React.useRef(null); - const handleResize: ResizeObserverCallback = React.useCallback( - entries => { - // Resize observer is only owned by this component - one resize observer entry expected - // No need to support multiple fragments - one border box entry expected - if (process.env.NODE_ENV !== 'production' && entries.length > 1) { - // eslint-disable-next-line no-console - console.error( - [ - 'useMessageBarReflow: Resize observer should only have one entry. ', - 'If multiple entries are observed, the first entry will be used.', - 'This is a bug, please report it to the Fluent UI team.', - ].join(' '), - ); - } + const [reflowing, setReflowing] = React.useState(false); - const entry = entries[0]; - // `borderBoxSize` is not supported before Chrome 84, Firefox 92, nor Safari 15.4 - const inlineSize = entry?.borderBoxSize?.[0]?.inlineSize ?? entry?.target.getBoundingClientRect().width; + // This layout effect 'sanity checks' what observers have done + // since DOM has not been flushed when observers run + useIsomorphicLayoutEffect(() => { + if (!messageBarRef.current) { + return; + } - if (inlineSize === undefined || !entry) { - return; + setReflowing(prevReflowing => { + if (!prevReflowing && messageBarRef.current && isReflowing(messageBarRef.current)) { + return true; } - const { target } = entry; + return prevReflowing; + }); + }, [reflowing]); - if (!isHTMLElement(target)) { - return; - } + const handleResize: ResizeObserverCallback = React.useCallback(() => { + if (!messageBarRef.current) { + return; + } - let nextReflowing: boolean | undefined; - - // No easy way to really determine when the single line layout will fit - // Just keep try to set single line layout as long as the size is growing - // Will cause flickering when size is being adjusted gradually (i.e. drag) - but this should not be a common case - if (reflowingRef.current) { - if (prevInlineSizeRef.current < inlineSize) { - nextReflowing = false; - } - } else { - const scrollWidth = target.scrollWidth; - if (inlineSize < scrollWidth) { - nextReflowing = true; - } - } + const inlineSize = messageBarRef.current.getBoundingClientRect().width; + const scrollWidth = messageBarRef.current.scrollWidth; - prevInlineSizeRef.current = inlineSize; - if (typeof nextReflowing !== 'undefined' && reflowingRef.current !== nextReflowing) { - reflowingRef.current = nextReflowing; - forceUpdate(); - } - }, - [forceUpdate], - ); + const expanding = prevInlineSizeRef.current < inlineSize; + const overflowing = inlineSize < scrollWidth; + + setReflowing(!expanding || overflowing); + }, []); + + const handleIntersection: IntersectionObserverCallback = React.useCallback(entries => { + if (entries[0].intersectionRatio < 1) { + setReflowing(true); + } + }, []); + + const ref = React.useMemo(() => { + let resizeObserver: ResizeObserver | null = null; + let intersectionObserer: IntersectionObserver | null = null; - const ref = React.useCallback( - (el: HTMLElement | null) => { + return (el: HTMLElement | null) => { if (!enabled || !el || !targetDocument?.defaultView) { + resizeObserver?.disconnect(); + intersectionObserer?.disconnect(); return; } - resizeObserverRef.current?.disconnect(); + messageBarRef.current = el; const win = targetDocument.defaultView; - const resizeObserver = new win.ResizeObserver(handleResize); - resizeObserverRef.current = resizeObserver; - resizeObserver.observe(el, { box: 'border-box' }); - }, - [targetDocument, handleResize, enabled], - ); + resizeObserver = new win.ResizeObserver(handleResize); + intersectionObserer = new win.IntersectionObserver(handleIntersection, { threshold: 1 }); - React.useEffect(() => { - return () => { - resizeObserverRef.current?.disconnect(); + intersectionObserer.observe(el); + resizeObserver.observe(el, { box: 'border-box' }); }; - }, []); + }, [handleResize, handleIntersection, enabled, targetDocument]); - return { ref, reflowing: reflowingRef.current }; + return { ref, reflowing }; } + +const isReflowing = (el: HTMLElement) => { + return el.scrollWidth > el.offsetWidth || !isFullyInViewport(el); +}; + +const isFullyInViewport = (el: HTMLElement) => { + const rect = el.getBoundingClientRect(); + const doc = el.ownerDocument; + const win = doc.defaultView; + + if (!win) { + return true; + } + + return ( + rect.top >= 0 && + rect.left >= 0 && + rect.bottom <= (win.innerHeight || doc.documentElement.clientHeight) && + rect.right <= (win.innerWidth || doc.documentElement.clientWidth) + ); +}; 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 1a9f754e95e4f2..7a278362508736 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 00000000000000..3df0dab15d1378 --- /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 dc0cbc00b1a751..3892ffb59ac5ce 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 a6e5c4ab95794d..00000000000000 --- 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 ddd4c6d29760d5..70e62632523c60 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 a7054fe773448c..bdc96b5d9e631a 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 0a023b4b0e46ca..5c1dea8f74f588 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 2d78c91eb2e493..192dbf6cdb2303 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,36 @@ { "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", + "version": "9.2.24", + "comments": { + "patch": [ + { + "author": "beachball", + "package": "@fluentui/react-migration-v0-v9", + "comment": "Bump @fluentui/react-components to v9.56.7", + "commit": "54afa8c6ce8f7d200d5241584801899b27baaf1b" + } + ] + } + }, { "date": "Mon, 16 Dec 2024 16:26:48 GMT", "tag": "@fluentui/react-migration-v0-v9_v9.2.23", 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 55911d7d38d7ec..45990059abacff 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,27 @@ # Change Log - @fluentui/react-migration-v0-v9 -This log was last generated on Mon, 16 Dec 2024 16:26:48 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 +[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-migration-v0-v9_v9.2.23..@fluentui/react-migration-v0-v9_v9.2.24) + +### Patches + +- Bump @fluentui/react-components to v9.56.7 ([PR #33483](https://github.com/microsoft/fluentui/pull/33483) by beachball) + ## [9.2.23](https://github.com/microsoft/fluentui/tree/@fluentui/react-migration-v0-v9_v9.2.23) Mon, 16 Dec 2024 16:26:48 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 3ceb490db2fd00..1a9f2e4164c5a9 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.23", + "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.6", + "@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 71f8b1fbe9049e..9e0442e9187172 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,36 @@ { "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", + "version": "9.6.43", + "comments": { + "patch": [ + { + "author": "beachball", + "package": "@fluentui/react-migration-v8-v9", + "comment": "Bump @fluentui/react-components to v9.56.7", + "commit": "54afa8c6ce8f7d200d5241584801899b27baaf1b" + } + ] + } + }, { "date": "Mon, 16 Dec 2024 16:26:49 GMT", "tag": "@fluentui/react-migration-v8-v9_v9.6.42", 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 5d78fc31894816..d3764f2a61d43c 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,27 @@ # Change Log - @fluentui/react-migration-v8-v9 -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.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 +[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-migration-v8-v9_v9.6.42..@fluentui/react-migration-v8-v9_v9.6.43) + +### Patches + +- Bump @fluentui/react-components to v9.56.7 ([PR #33483](https://github.com/microsoft/fluentui/pull/33483) by beachball) + ## [9.6.42](https://github.com/microsoft/fluentui/tree/@fluentui/react-migration-v8-v9_v9.6.42) Mon, 16 Dec 2024 16:26:49 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 facb920700baa2..8e7cf56860f4ba 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.42", + "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", @@ -19,9 +19,9 @@ }, "dependencies": { "@ctrl/tinycolor": "3.3.4", - "@fluentui/fluent2-theme": "^8.107.118", - "@fluentui/react": "^8.122.1", - "@fluentui/react-components": "^9.56.6", + "@fluentui/fluent2-theme": "^8.107.120", + "@fluentui/react": "^8.122.3", + "@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 7106dde0423972..6eb1ad024ae2f9 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 77472e8c855ba3..7d09f1af50647e 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 cb0a03544d3a2c..9bc31e0d2e9cee 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-nav-preview/library/CHANGELOG.json b/packages/react-components/react-nav-preview/library/CHANGELOG.json index 463239a3d35255..f979f9ca6a8609 100644 --- a/packages/react-components/react-nav-preview/library/CHANGELOG.json +++ b/packages/react-components/react-nav-preview/library/CHANGELOG.json @@ -1,6 +1,21 @@ { "name": "@fluentui/react-nav-preview", "entries": [ + { + "date": "Wed, 18 Dec 2024 10:59:37 GMT", + "tag": "@fluentui/react-nav-preview_v0.10.6", + "version": "0.10.6", + "comments": { + "patch": [ + { + "author": "beachball", + "package": "@fluentui/react-nav-preview", + "comment": "Bump @fluentui/react-drawer to v9.6.6", + "commit": "54afa8c6ce8f7d200d5241584801899b27baaf1b" + } + ] + } + }, { "date": "Mon, 16 Dec 2024 16:26:49 GMT", "tag": "@fluentui/react-nav-preview_v0.10.5", diff --git a/packages/react-components/react-nav-preview/library/CHANGELOG.md b/packages/react-components/react-nav-preview/library/CHANGELOG.md index c12369cefa1283..f55721b6c8d25b 100644 --- a/packages/react-components/react-nav-preview/library/CHANGELOG.md +++ b/packages/react-components/react-nav-preview/library/CHANGELOG.md @@ -1,9 +1,18 @@ # Change Log - @fluentui/react-nav-preview -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 Wed, 18 Dec 2024 10:59:37 GMT and should not be manually modified. +## [0.10.6](https://github.com/microsoft/fluentui/tree/@fluentui/react-nav-preview_v0.10.6) + +Wed, 18 Dec 2024 10:59:37 GMT +[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-nav-preview_v0.10.5..@fluentui/react-nav-preview_v0.10.6) + +### Patches + +- Bump @fluentui/react-drawer to v9.6.6 ([PR #33483](https://github.com/microsoft/fluentui/pull/33483) by beachball) + ## [0.10.5](https://github.com/microsoft/fluentui/tree/@fluentui/react-nav-preview_v0.10.5) Mon, 16 Dec 2024 16:26:49 GMT diff --git a/packages/react-components/react-nav-preview/library/package.json b/packages/react-components/react-nav-preview/library/package.json index fa0c6ca4530e34..2a005fbfe34060 100644 --- a/packages/react-components/react-nav-preview/library/package.json +++ b/packages/react-components/react-nav-preview/library/package.json @@ -1,6 +1,6 @@ { "name": "@fluentui/react-nav-preview", - "version": "0.10.5", + "version": "0.10.6", "description": "New fluentui react package", "main": "lib-commonjs/index.js", "module": "lib/index.js", @@ -23,7 +23,7 @@ "@fluentui/react-tooltip": "^9.5.2", "@fluentui/react-context-selector": "^9.1.71", "@fluentui/react-divider": "^9.2.80", - "@fluentui/react-drawer": "^9.6.5", + "@fluentui/react-drawer": "^9.6.6", "@fluentui/react-icons": "^2.0.245", "@fluentui/react-jsx-runtime": "^9.0.48", "@fluentui/react-shared-contexts": "^9.21.2", diff --git a/packages/react-components/react-overflow/library/package.json b/packages/react-components/react-overflow/library/package.json index 827c619fde532d..070258ecb9f299 100644 --- a/packages/react-components/react-overflow/library/package.json +++ b/packages/react-components/react-overflow/library/package.json @@ -1,6 +1,6 @@ { "name": "@fluentui/react-overflow", - "version": "9.2.4", + "version": "9.2.5", "description": "React bindings for @fluentui/priority-overflow", "main": "lib-commonjs/index.js", "module": "lib/index.js", diff --git a/packages/react-components/react-persona/library/CHANGELOG.json b/packages/react-components/react-persona/library/CHANGELOG.json index dca502cd86740e..ed6f87cb9ac87a 100644 --- a/packages/react-components/react-persona/library/CHANGELOG.json +++ b/packages/react-components/react-persona/library/CHANGELOG.json @@ -1,6 +1,21 @@ { "name": "@fluentui/react-persona", "entries": [ + { + "date": "Wed, 18 Dec 2024 10:59:37 GMT", + "tag": "@fluentui/react-persona_v9.2.106", + "version": "9.2.106", + "comments": { + "patch": [ + { + "author": "beachball", + "package": "@fluentui/react-persona", + "comment": "Bump @fluentui/react-avatar to v9.6.47", + "commit": "54afa8c6ce8f7d200d5241584801899b27baaf1b" + } + ] + } + }, { "date": "Mon, 16 Dec 2024 16:26:49 GMT", "tag": "@fluentui/react-persona_v9.2.105", diff --git a/packages/react-components/react-persona/library/CHANGELOG.md b/packages/react-components/react-persona/library/CHANGELOG.md index a9b29ff68770f9..4edfffc9ef1572 100644 --- a/packages/react-components/react-persona/library/CHANGELOG.md +++ b/packages/react-components/react-persona/library/CHANGELOG.md @@ -1,9 +1,18 @@ # Change Log - @fluentui/react-persona -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 Wed, 18 Dec 2024 10:59:37 GMT and should not be manually modified. +## [9.2.106](https://github.com/microsoft/fluentui/tree/@fluentui/react-persona_v9.2.106) + +Wed, 18 Dec 2024 10:59:37 GMT +[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-persona_v9.2.105..@fluentui/react-persona_v9.2.106) + +### Patches + +- Bump @fluentui/react-avatar to v9.6.47 ([PR #33483](https://github.com/microsoft/fluentui/pull/33483) by beachball) + ## [9.2.105](https://github.com/microsoft/fluentui/tree/@fluentui/react-persona_v9.2.105) Mon, 16 Dec 2024 16:26:49 GMT diff --git a/packages/react-components/react-persona/library/package.json b/packages/react-components/react-persona/library/package.json index 1b1b51d358fc69..3d393e34cacd26 100644 --- a/packages/react-components/react-persona/library/package.json +++ b/packages/react-components/react-persona/library/package.json @@ -1,6 +1,6 @@ { "name": "@fluentui/react-persona", - "version": "9.2.105", + "version": "9.2.106", "description": "React components for building web experiences", "main": "lib-commonjs/index.js", "module": "lib/index.js", @@ -18,7 +18,7 @@ "@fluentui/scripts-api-extractor": "*" }, "dependencies": { - "@fluentui/react-avatar": "^9.6.46", + "@fluentui/react-avatar": "^9.6.47", "@fluentui/react-badge": "^9.2.48", "@fluentui/react-shared-contexts": "^9.21.2", "@fluentui/react-theme": "^9.1.24", diff --git a/packages/react-components/react-popover/library/CHANGELOG.json b/packages/react-components/react-popover/library/CHANGELOG.json index 4d4edaaf163172..c94ce03602c922 100644 --- a/packages/react-components/react-popover/library/CHANGELOG.json +++ b/packages/react-components/react-popover/library/CHANGELOG.json @@ -1,6 +1,21 @@ { "name": "@fluentui/react-popover", "entries": [ + { + "date": "Wed, 18 Dec 2024 10:59:37 GMT", + "tag": "@fluentui/react-popover_v9.9.29", + "version": "9.9.29", + "comments": { + "patch": [ + { + "author": "jiangemma@microsoft.com", + "package": "@fluentui/react-popover", + "commit": "0eca6fb68963b15b664b8560984f0f742bae280b", + "comment": "docs(react-popover): Fix doc-comment links that don't translate to storybook" + } + ] + } + }, { "date": "Mon, 16 Dec 2024 16:26:49 GMT", "tag": "@fluentui/react-popover_v9.9.28", diff --git a/packages/react-components/react-popover/library/CHANGELOG.md b/packages/react-components/react-popover/library/CHANGELOG.md index 062b0a7c203f74..a50fe337667ae0 100644 --- a/packages/react-components/react-popover/library/CHANGELOG.md +++ b/packages/react-components/react-popover/library/CHANGELOG.md @@ -1,9 +1,18 @@ # Change Log - @fluentui/react-popover -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 Wed, 18 Dec 2024 10:59:37 GMT and should not be manually modified. +## [9.9.29](https://github.com/microsoft/fluentui/tree/@fluentui/react-popover_v9.9.29) + +Wed, 18 Dec 2024 10:59:37 GMT +[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-popover_v9.9.28..@fluentui/react-popover_v9.9.29) + +### Patches + +- docs(react-popover): Fix doc-comment links that don't translate to storybook ([PR #33471](https://github.com/microsoft/fluentui/pull/33471) by jiangemma@microsoft.com) + ## [9.9.28](https://github.com/microsoft/fluentui/tree/@fluentui/react-popover_v9.9.28) Mon, 16 Dec 2024 16:26:49 GMT diff --git a/packages/react-components/react-popover/library/package.json b/packages/react-components/react-popover/library/package.json index 0a3ce7c752d014..b799df80949d37 100644 --- a/packages/react-components/react-popover/library/package.json +++ b/packages/react-components/react-popover/library/package.json @@ -1,6 +1,6 @@ { "name": "@fluentui/react-popover", - "version": "9.9.28", + "version": "9.9.29", "description": "Popover component for Fluent UI", "main": "lib-commonjs/index.js", "module": "lib/index.js", diff --git a/packages/react-components/react-portal-compat/CHANGELOG.json b/packages/react-components/react-portal-compat/CHANGELOG.json index a5cfcc8e39fc0f..2a97f72c72d312 100644 --- a/packages/react-components/react-portal-compat/CHANGELOG.json +++ b/packages/react-components/react-portal-compat/CHANGELOG.json @@ -1,6 +1,36 @@ { "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", + "version": "9.0.175", + "comments": { + "patch": [ + { + "author": "beachball", + "package": "@fluentui/react-portal-compat", + "comment": "Bump @fluentui/react-components to v9.56.7", + "commit": "54afa8c6ce8f7d200d5241584801899b27baaf1b" + } + ] + } + }, { "date": "Mon, 16 Dec 2024 16:26:49 GMT", "tag": "@fluentui/react-portal-compat_v9.0.174", diff --git a/packages/react-components/react-portal-compat/CHANGELOG.md b/packages/react-components/react-portal-compat/CHANGELOG.md index 98526d11b0f08c..24aec79e8fa1bf 100644 --- a/packages/react-components/react-portal-compat/CHANGELOG.md +++ b/packages/react-components/react-portal-compat/CHANGELOG.md @@ -1,9 +1,27 @@ # Change Log - @fluentui/react-portal-compat -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.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 +[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-portal-compat_v9.0.174..@fluentui/react-portal-compat_v9.0.175) + +### Patches + +- Bump @fluentui/react-components to v9.56.7 ([PR #33483](https://github.com/microsoft/fluentui/pull/33483) by beachball) + ## [9.0.174](https://github.com/microsoft/fluentui/tree/@fluentui/react-portal-compat_v9.0.174) Mon, 16 Dec 2024 16:26:49 GMT diff --git a/packages/react-components/react-portal-compat/package.json b/packages/react-components/react-portal-compat/package.json index fdaed09ad3ac6c..907063c27bb591 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.174", + "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.6", + "@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-rating/library/CHANGELOG.json b/packages/react-components/react-rating/library/CHANGELOG.json index d333777219d6a9..df938bde41798b 100644 --- a/packages/react-components/react-rating/library/CHANGELOG.json +++ b/packages/react-components/react-rating/library/CHANGELOG.json @@ -1,6 +1,21 @@ { "name": "@fluentui/react-rating", "entries": [ + { + "date": "Wed, 18 Dec 2024 10:59:37 GMT", + "tag": "@fluentui/react-rating_v9.0.26", + "version": "9.0.26", + "comments": { + "patch": [ + { + "author": "derdem@microsoft.com", + "package": "@fluentui/react-rating", + "commit": "084c76645ce97417b2bdc50203f4c66f5fd27309", + "comment": "fix: Pass missing Rating's itemLabel prop to its state so RatingItem consumes it from context." + } + ] + } + }, { "date": "Mon, 16 Dec 2024 16:26:49 GMT", "tag": "@fluentui/react-rating_v9.0.25", diff --git a/packages/react-components/react-rating/library/CHANGELOG.md b/packages/react-components/react-rating/library/CHANGELOG.md index e0e7577221be75..40f23176c40902 100644 --- a/packages/react-components/react-rating/library/CHANGELOG.md +++ b/packages/react-components/react-rating/library/CHANGELOG.md @@ -1,9 +1,18 @@ # Change Log - @fluentui/react-rating -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 Wed, 18 Dec 2024 10:59:37 GMT and should not be manually modified. +## [9.0.26](https://github.com/microsoft/fluentui/tree/@fluentui/react-rating_v9.0.26) + +Wed, 18 Dec 2024 10:59:37 GMT +[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-rating_v9.0.25..@fluentui/react-rating_v9.0.26) + +### Patches + +- fix: Pass missing Rating's itemLabel prop to its state so RatingItem consumes it from context. ([PR #33361](https://github.com/microsoft/fluentui/pull/33361) by derdem@microsoft.com) + ## [9.0.25](https://github.com/microsoft/fluentui/tree/@fluentui/react-rating_v9.0.25) Mon, 16 Dec 2024 16:26:49 GMT diff --git a/packages/react-components/react-rating/library/package.json b/packages/react-components/react-rating/library/package.json index f1948b0ad777de..475a9d86c01c11 100644 --- a/packages/react-components/react-rating/library/package.json +++ b/packages/react-components/react-rating/library/package.json @@ -1,6 +1,6 @@ { "name": "@fluentui/react-rating", - "version": "9.0.25", + "version": "9.0.26", "description": "Rating component for building web experiences", "main": "lib-commonjs/index.js", "module": "lib/index.js", diff --git a/packages/react-components/react-table/library/CHANGELOG.json b/packages/react-components/react-table/library/CHANGELOG.json index dd2ad44a7411ec..a886e5816aee6f 100644 --- a/packages/react-components/react-table/library/CHANGELOG.json +++ b/packages/react-components/react-table/library/CHANGELOG.json @@ -1,6 +1,21 @@ { "name": "@fluentui/react-table", "entries": [ + { + "date": "Wed, 18 Dec 2024 10:59:37 GMT", + "tag": "@fluentui/react-table_v9.15.26", + "version": "9.15.26", + "comments": { + "patch": [ + { + "author": "beachball", + "package": "@fluentui/react-table", + "comment": "Bump @fluentui/react-avatar to v9.6.47", + "commit": "54afa8c6ce8f7d200d5241584801899b27baaf1b" + } + ] + } + }, { "date": "Mon, 16 Dec 2024 16:26:49 GMT", "tag": "@fluentui/react-table_v9.15.25", diff --git a/packages/react-components/react-table/library/CHANGELOG.md b/packages/react-components/react-table/library/CHANGELOG.md index c0ef4aa823e7d9..12e5af8af60b18 100644 --- a/packages/react-components/react-table/library/CHANGELOG.md +++ b/packages/react-components/react-table/library/CHANGELOG.md @@ -1,9 +1,18 @@ # Change Log - @fluentui/react-table -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 Wed, 18 Dec 2024 10:59:37 GMT and should not be manually modified. +## [9.15.26](https://github.com/microsoft/fluentui/tree/@fluentui/react-table_v9.15.26) + +Wed, 18 Dec 2024 10:59:37 GMT +[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-table_v9.15.25..@fluentui/react-table_v9.15.26) + +### Patches + +- Bump @fluentui/react-avatar to v9.6.47 ([PR #33483](https://github.com/microsoft/fluentui/pull/33483) by beachball) + ## [9.15.25](https://github.com/microsoft/fluentui/tree/@fluentui/react-table_v9.15.25) Mon, 16 Dec 2024 16:26:49 GMT diff --git a/packages/react-components/react-table/library/package.json b/packages/react-components/react-table/library/package.json index e9f913694791be..64b5817d9c20c5 100644 --- a/packages/react-components/react-table/library/package.json +++ b/packages/react-components/react-table/library/package.json @@ -1,6 +1,6 @@ { "name": "@fluentui/react-table", - "version": "9.15.25", + "version": "9.15.26", "description": "React components for building web experiences", "main": "lib-commonjs/index.js", "module": "lib/index.js", @@ -22,7 +22,7 @@ "dependencies": { "@fluentui/keyboard-keys": "^9.0.8", "@fluentui/react-aria": "^9.13.12", - "@fluentui/react-avatar": "^9.6.46", + "@fluentui/react-avatar": "^9.6.47", "@fluentui/react-checkbox": "^9.2.44", "@fluentui/react-context-selector": "^9.1.71", "@fluentui/react-icons": "^2.0.245", diff --git a/packages/react-components/react-tag-picker/library/CHANGELOG.json b/packages/react-components/react-tag-picker/library/CHANGELOG.json index 7dd6a661f1c2e5..dcdb7e04548c97 100644 --- a/packages/react-components/react-tag-picker/library/CHANGELOG.json +++ b/packages/react-components/react-tag-picker/library/CHANGELOG.json @@ -1,6 +1,21 @@ { "name": "@fluentui/react-tag-picker", "entries": [ + { + "date": "Wed, 18 Dec 2024 10:59:37 GMT", + "tag": "@fluentui/react-tag-picker_v9.3.13", + "version": "9.3.13", + "comments": { + "patch": [ + { + "author": "beachball", + "package": "@fluentui/react-tag-picker", + "comment": "Bump @fluentui/react-tags to v9.3.27", + "commit": "54afa8c6ce8f7d200d5241584801899b27baaf1b" + } + ] + } + }, { "date": "Mon, 16 Dec 2024 16:26:49 GMT", "tag": "@fluentui/react-tag-picker_v9.3.12", diff --git a/packages/react-components/react-tag-picker/library/CHANGELOG.md b/packages/react-components/react-tag-picker/library/CHANGELOG.md index dc65e92dbdafd6..470b1ed2359132 100644 --- a/packages/react-components/react-tag-picker/library/CHANGELOG.md +++ b/packages/react-components/react-tag-picker/library/CHANGELOG.md @@ -1,9 +1,18 @@ # Change Log - @fluentui/react-tag-picker -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 Wed, 18 Dec 2024 10:59:37 GMT and should not be manually modified. +## [9.3.13](https://github.com/microsoft/fluentui/tree/@fluentui/react-tag-picker_v9.3.13) + +Wed, 18 Dec 2024 10:59:37 GMT +[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tag-picker_v9.3.12..@fluentui/react-tag-picker_v9.3.13) + +### Patches + +- Bump @fluentui/react-tags to v9.3.27 ([PR #33483](https://github.com/microsoft/fluentui/pull/33483) by beachball) + ## [9.3.12](https://github.com/microsoft/fluentui/tree/@fluentui/react-tag-picker_v9.3.12) Mon, 16 Dec 2024 16:26:49 GMT diff --git a/packages/react-components/react-tag-picker/library/package.json b/packages/react-components/react-tag-picker/library/package.json index e084aa6d0f01c8..7b986adf517ad8 100644 --- a/packages/react-components/react-tag-picker/library/package.json +++ b/packages/react-components/react-tag-picker/library/package.json @@ -1,6 +1,6 @@ { "name": "@fluentui/react-tag-picker", - "version": "9.3.12", + "version": "9.3.13", "description": "FluentUI TagPicker component", "main": "lib-commonjs/index.js", "module": "lib/index.js", @@ -37,7 +37,7 @@ "@fluentui/react-aria": "^9.13.12", "@fluentui/react-icons": "^2.0.245", "@fluentui/react-combobox": "^9.13.15", - "@fluentui/react-tags": "^9.3.26", + "@fluentui/react-tags": "^9.3.27", "@fluentui/react-context-selector": "^9.1.71", "@fluentui/react-positioning": "^9.16.0", "@fluentui/keyboard-keys": "^9.0.8", diff --git a/packages/react-components/react-tags/library/CHANGELOG.json b/packages/react-components/react-tags/library/CHANGELOG.json index 52d2b46fadd4d0..f56534ae1e173f 100644 --- a/packages/react-components/react-tags/library/CHANGELOG.json +++ b/packages/react-components/react-tags/library/CHANGELOG.json @@ -1,6 +1,21 @@ { "name": "@fluentui/react-tags", "entries": [ + { + "date": "Wed, 18 Dec 2024 10:59:37 GMT", + "tag": "@fluentui/react-tags_v9.3.27", + "version": "9.3.27", + "comments": { + "patch": [ + { + "author": "beachball", + "package": "@fluentui/react-tags", + "comment": "Bump @fluentui/react-avatar to v9.6.47", + "commit": "54afa8c6ce8f7d200d5241584801899b27baaf1b" + } + ] + } + }, { "date": "Mon, 16 Dec 2024 16:26:49 GMT", "tag": "@fluentui/react-tags_v9.3.26", diff --git a/packages/react-components/react-tags/library/CHANGELOG.md b/packages/react-components/react-tags/library/CHANGELOG.md index 869a9e29eec6bd..1e5eca39fc03ac 100644 --- a/packages/react-components/react-tags/library/CHANGELOG.md +++ b/packages/react-components/react-tags/library/CHANGELOG.md @@ -1,9 +1,18 @@ # Change Log - @fluentui/react-tags -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 Wed, 18 Dec 2024 10:59:37 GMT and should not be manually modified. +## [9.3.27](https://github.com/microsoft/fluentui/tree/@fluentui/react-tags_v9.3.27) + +Wed, 18 Dec 2024 10:59:37 GMT +[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tags_v9.3.26..@fluentui/react-tags_v9.3.27) + +### Patches + +- Bump @fluentui/react-avatar to v9.6.47 ([PR #33483](https://github.com/microsoft/fluentui/pull/33483) by beachball) + ## [9.3.26](https://github.com/microsoft/fluentui/tree/@fluentui/react-tags_v9.3.26) Mon, 16 Dec 2024 16:26:49 GMT diff --git a/packages/react-components/react-tags/library/package.json b/packages/react-components/react-tags/library/package.json index f5c184f3f857f5..260179433ba036 100644 --- a/packages/react-components/react-tags/library/package.json +++ b/packages/react-components/react-tags/library/package.json @@ -1,6 +1,6 @@ { "name": "@fluentui/react-tags", - "version": "9.3.26", + "version": "9.3.27", "description": "Fluent UI Tag component", "main": "lib-commonjs/index.js", "module": "lib/index.js", @@ -22,7 +22,7 @@ "dependencies": { "@fluentui/keyboard-keys": "^9.0.8", "@fluentui/react-aria": "^9.13.12", - "@fluentui/react-avatar": "^9.6.46", + "@fluentui/react-avatar": "^9.6.47", "@fluentui/react-icons": "^2.0.245", "@fluentui/react-jsx-runtime": "^9.0.48", "@fluentui/react-shared-contexts": "^9.21.2", diff --git a/packages/react-components/react-teaching-popover/library/CHANGELOG.json b/packages/react-components/react-teaching-popover/library/CHANGELOG.json index 4b51fa8a8584ff..4a3e38967b0e8f 100644 --- a/packages/react-components/react-teaching-popover/library/CHANGELOG.json +++ b/packages/react-components/react-teaching-popover/library/CHANGELOG.json @@ -1,6 +1,21 @@ { "name": "@fluentui/react-teaching-popover", "entries": [ + { + "date": "Wed, 18 Dec 2024 10:59:37 GMT", + "tag": "@fluentui/react-teaching-popover_v9.1.26", + "version": "9.1.26", + "comments": { + "patch": [ + { + "author": "beachball", + "package": "@fluentui/react-teaching-popover", + "comment": "Bump @fluentui/react-popover to v9.9.29", + "commit": "54afa8c6ce8f7d200d5241584801899b27baaf1b" + } + ] + } + }, { "date": "Mon, 16 Dec 2024 16:26:46 GMT", "tag": "@fluentui/react-teaching-popover_v9.1.25", diff --git a/packages/react-components/react-teaching-popover/library/CHANGELOG.md b/packages/react-components/react-teaching-popover/library/CHANGELOG.md index 3f0dfe2063e0b1..c29d691b79d335 100644 --- a/packages/react-components/react-teaching-popover/library/CHANGELOG.md +++ b/packages/react-components/react-teaching-popover/library/CHANGELOG.md @@ -1,9 +1,18 @@ # Change Log - @fluentui/react-teaching-popover -This log was last generated on Mon, 16 Dec 2024 16:26:46 GMT and should not be manually modified. +This log was last generated on Wed, 18 Dec 2024 10:59:37 GMT and should not be manually modified. +## [9.1.26](https://github.com/microsoft/fluentui/tree/@fluentui/react-teaching-popover_v9.1.26) + +Wed, 18 Dec 2024 10:59:37 GMT +[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-teaching-popover_v9.1.25..@fluentui/react-teaching-popover_v9.1.26) + +### Patches + +- Bump @fluentui/react-popover to v9.9.29 ([PR #33483](https://github.com/microsoft/fluentui/pull/33483) by beachball) + ## [9.1.25](https://github.com/microsoft/fluentui/tree/@fluentui/react-teaching-popover_v9.1.25) Mon, 16 Dec 2024 16:26:46 GMT diff --git a/packages/react-components/react-teaching-popover/library/package.json b/packages/react-components/react-teaching-popover/library/package.json index ae95907dee2572..24cda56556d13e 100644 --- a/packages/react-components/react-teaching-popover/library/package.json +++ b/packages/react-components/react-teaching-popover/library/package.json @@ -1,6 +1,6 @@ { "name": "@fluentui/react-teaching-popover", - "version": "9.1.25", + "version": "9.1.26", "description": "New fluentui react package", "main": "lib-commonjs/index.js", "module": "lib/index.js", @@ -30,7 +30,7 @@ "@griffel/react": "^1.5.22", "@swc/helpers": "^0.5.1", "@fluentui/react-shared-contexts": "^9.21.2", - "@fluentui/react-popover": "^9.9.28", + "@fluentui/react-popover": "^9.9.29", "@fluentui/react-button": "^9.3.98", "@fluentui/react-tabster": "^9.23.2", "@fluentui/react-icons": "^2.0.245", diff --git a/packages/react-components/react-timepicker-compat/library/package.json b/packages/react-components/react-timepicker-compat/library/package.json index 962789f7d8a944..0eca335dda8f2e 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.43", + "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/react-toast/stories/src/Toast/DismissAll.stories.tsx b/packages/react-components/react-toast/stories/src/Toast/DismissAll.stories.tsx index a7788ea9cc833e..6bda21d352b60d 100644 --- a/packages/react-components/react-toast/stories/src/Toast/DismissAll.stories.tsx +++ b/packages/react-components/react-toast/stories/src/Toast/DismissAll.stories.tsx @@ -7,7 +7,7 @@ export const DismissAll = () => { const notify = () => dispatchToast( - 'This is a toast + This is a toast , { intent: 'info' }, ); diff --git a/packages/react-components/react-tree/library/CHANGELOG.json b/packages/react-components/react-tree/library/CHANGELOG.json index 34c2b9e0d4f73a..41f3078e613cc9 100644 --- a/packages/react-components/react-tree/library/CHANGELOG.json +++ b/packages/react-components/react-tree/library/CHANGELOG.json @@ -1,6 +1,21 @@ { "name": "@fluentui/react-tree", "entries": [ + { + "date": "Wed, 18 Dec 2024 10:59:37 GMT", + "tag": "@fluentui/react-tree_v9.8.11", + "version": "9.8.11", + "comments": { + "patch": [ + { + "author": "beachball", + "package": "@fluentui/react-tree", + "comment": "Bump @fluentui/react-avatar to v9.6.47", + "commit": "54afa8c6ce8f7d200d5241584801899b27baaf1b" + } + ] + } + }, { "date": "Mon, 16 Dec 2024 16:26:49 GMT", "tag": "@fluentui/react-tree_v9.8.10", diff --git a/packages/react-components/react-tree/library/CHANGELOG.md b/packages/react-components/react-tree/library/CHANGELOG.md index 97d5f175035144..68b0eece97c5e5 100644 --- a/packages/react-components/react-tree/library/CHANGELOG.md +++ b/packages/react-components/react-tree/library/CHANGELOG.md @@ -1,9 +1,18 @@ # Change Log - @fluentui/react-tree -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 Wed, 18 Dec 2024 10:59:37 GMT and should not be manually modified. +## [9.8.11](https://github.com/microsoft/fluentui/tree/@fluentui/react-tree_v9.8.11) + +Wed, 18 Dec 2024 10:59:37 GMT +[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tree_v9.8.10..@fluentui/react-tree_v9.8.11) + +### Patches + +- Bump @fluentui/react-avatar to v9.6.47 ([PR #33483](https://github.com/microsoft/fluentui/pull/33483) by beachball) + ## [9.8.10](https://github.com/microsoft/fluentui/tree/@fluentui/react-tree_v9.8.10) Mon, 16 Dec 2024 16:26:49 GMT diff --git a/packages/react-components/react-tree/library/package.json b/packages/react-components/react-tree/library/package.json index 71e41503b1cd86..96e8d3f78bdbbb 100644 --- a/packages/react-components/react-tree/library/package.json +++ b/packages/react-components/react-tree/library/package.json @@ -1,6 +1,6 @@ { "name": "@fluentui/react-tree", - "version": "9.8.10", + "version": "9.8.11", "description": "Tree component for Fluent UI React", "main": "lib-commonjs/index.js", "module": "lib/index.js", @@ -22,7 +22,7 @@ "dependencies": { "@fluentui/keyboard-keys": "^9.0.8", "@fluentui/react-aria": "^9.13.12", - "@fluentui/react-avatar": "^9.6.46", + "@fluentui/react-avatar": "^9.6.47", "@fluentui/react-button": "^9.3.98", "@fluentui/react-checkbox": "^9.2.44", "@fluentui/react-context-selector": "^9.1.71", diff --git a/packages/react-components/theme-designer/package.json b/packages/react-components/theme-designer/package.json index e481ec9247d6a3..74899a1d5bcf98 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.6", + "@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 7cecca373ae30c..eb71c535281b84 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 417145e92af8c0..e0d5b3bc53c2c3 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-date-time/CHANGELOG.json b/packages/react-date-time/CHANGELOG.json index 4fe366a2523ab8..756c128aab3da1 100644 --- a/packages/react-date-time/CHANGELOG.json +++ b/packages/react-date-time/CHANGELOG.json @@ -1,6 +1,36 @@ { "name": "@fluentui/react-date-time", "entries": [ + { + "date": "Mon, 30 Dec 2024 07:21:29 GMT", + "tag": "@fluentui/react-date-time_v8.7.192", + "version": "8.7.192", + "comments": { + "patch": [ + { + "author": "beachball", + "package": "@fluentui/react-date-time", + "comment": "Bump @fluentui/react to v8.122.3", + "commit": "681a95a732fe385a70b8d4537dc489acbcd1c21e" + } + ] + } + }, + { + "date": "Mon, 23 Dec 2024 07:22:58 GMT", + "tag": "@fluentui/react-date-time_v8.7.191", + "version": "8.7.191", + "comments": { + "patch": [ + { + "author": "beachball", + "package": "@fluentui/react-date-time", + "comment": "Bump @fluentui/react to v8.122.2", + "commit": "7b4a3785c6c1d7c207602cad0a1795e3df9122ee" + } + ] + } + }, { "date": "Fri, 13 Dec 2024 07:23:12 GMT", "tag": "@fluentui/react-date-time_v8.7.190", diff --git a/packages/react-date-time/CHANGELOG.md b/packages/react-date-time/CHANGELOG.md index 39d8f943c02335..5fee4e587244c8 100644 --- a/packages/react-date-time/CHANGELOG.md +++ b/packages/react-date-time/CHANGELOG.md @@ -1,9 +1,27 @@ # Change Log - @fluentui/react-date-time -This log was last generated on Fri, 13 Dec 2024 07:23:12 GMT and should not be manually modified. +This log was last generated on Mon, 30 Dec 2024 07:21:29 GMT and should not be manually modified. +## [8.7.192](https://github.com/microsoft/fluentui/tree/@fluentui/react-date-time_v8.7.192) + +Mon, 30 Dec 2024 07:21:29 GMT +[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-date-time_v8.7.191..@fluentui/react-date-time_v8.7.192) + +### Patches + +- Bump @fluentui/react to v8.122.3 ([PR #33520](https://github.com/microsoft/fluentui/pull/33520) by beachball) + +## [8.7.191](https://github.com/microsoft/fluentui/tree/@fluentui/react-date-time_v8.7.191) + +Mon, 23 Dec 2024 07:22:58 GMT +[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-date-time_v8.7.190..@fluentui/react-date-time_v8.7.191) + +### Patches + +- Bump @fluentui/react to v8.122.2 ([PR #33445](https://github.com/microsoft/fluentui/pull/33445) by beachball) + ## [8.7.190](https://github.com/microsoft/fluentui/tree/@fluentui/react-date-time_v8.7.190) Fri, 13 Dec 2024 07:23:12 GMT diff --git a/packages/react-date-time/package.json b/packages/react-date-time/package.json index 1e887155c4dd5c..e49791b45ed302 100644 --- a/packages/react-date-time/package.json +++ b/packages/react-date-time/package.json @@ -1,6 +1,6 @@ { "name": "@fluentui/react-date-time", - "version": "8.7.190", + "version": "8.7.192", "description": "Date and time related React components for building experiences for Microsoft 365.", "main": "lib-commonjs/index.js", "module": "lib/index.js", @@ -27,7 +27,7 @@ "@fluentui/scripts-webpack": "*" }, "dependencies": { - "@fluentui/react": "^8.122.1", + "@fluentui/react": "^8.122.3", "@fluentui/set-version": "^8.2.23", "tslib": "^2.1.0" }, diff --git a/packages/react-docsite-components/CHANGELOG.json b/packages/react-docsite-components/CHANGELOG.json index 09691d11612a6e..db686dd86fabd2 100644 --- a/packages/react-docsite-components/CHANGELOG.json +++ b/packages/react-docsite-components/CHANGELOG.json @@ -1,6 +1,129 @@ { "name": "@fluentui/react-docsite-components", "entries": [ + { + "date": "Mon, 30 Dec 2024 07:21:29 GMT", + "tag": "@fluentui/react-docsite-components_v8.13.153", + "version": "8.13.153", + "comments": { + "patch": [ + { + "author": "beachball", + "package": "@fluentui/react-docsite-components", + "comment": "Bump @fluentui/react to v8.122.3", + "commit": "681a95a732fe385a70b8d4537dc489acbcd1c21e" + }, + { + "author": "beachball", + "package": "@fluentui/react-docsite-components", + "comment": "Bump @fluentui/react-monaco-editor to v1.7.271", + "commit": "681a95a732fe385a70b8d4537dc489acbcd1c21e" + } + ] + } + }, + { + "date": "Fri, 27 Dec 2024 07:20:59 GMT", + "tag": "@fluentui/react-docsite-components_v8.13.152", + "version": "8.13.152", + "comments": { + "patch": [ + { + "author": "beachball", + "package": "@fluentui/react-docsite-components", + "comment": "Bump @fluentui/react-monaco-editor to v1.7.270", + "commit": "99cbe5c9cc9c298d78e10301b37d314b68ba8c52" + } + ] + } + }, + { + "date": "Thu, 26 Dec 2024 07:21:14 GMT", + "tag": "@fluentui/react-docsite-components_v8.13.151", + "version": "8.13.151", + "comments": { + "patch": [ + { + "author": "beachball", + "package": "@fluentui/react-docsite-components", + "comment": "Bump @fluentui/react-monaco-editor to v1.7.269", + "commit": "0dd9a713b54a6d5b5929ac7febd1c7e44c83efca" + } + ] + } + }, + { + "date": "Wed, 25 Dec 2024 07:21:56 GMT", + "tag": "@fluentui/react-docsite-components_v8.13.150", + "version": "8.13.150", + "comments": { + "patch": [ + { + "author": "beachball", + "package": "@fluentui/react-docsite-components", + "comment": "Bump @fluentui/react-monaco-editor to v1.7.268", + "commit": "fa08fec97a5bc070e2866633c792f7066f0c86e8" + } + ] + } + }, + { + "date": "Mon, 23 Dec 2024 07:22:58 GMT", + "tag": "@fluentui/react-docsite-components_v8.13.149", + "version": "8.13.149", + "comments": { + "patch": [ + { + "author": "beachball", + "package": "@fluentui/react-docsite-components", + "comment": "Bump @fluentui/react to v8.122.2", + "commit": "7b4a3785c6c1d7c207602cad0a1795e3df9122ee" + }, + { + "author": "beachball", + "package": "@fluentui/react-docsite-components", + "comment": "Bump @fluentui/theme to v2.6.64", + "commit": "7b4a3785c6c1d7c207602cad0a1795e3df9122ee" + }, + { + "author": "beachball", + "package": "@fluentui/react-docsite-components", + "comment": "Bump @fluentui/react-monaco-editor to v1.7.267", + "commit": "7b4a3785c6c1d7c207602cad0a1795e3df9122ee" + } + ] + } + }, + { + "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", + "version": "8.13.147", + "comments": { + "patch": [ + { + "author": "beachball", + "package": "@fluentui/react-docsite-components", + "comment": "Bump @fluentui/react-monaco-editor to v1.7.265", + "commit": "6bcbe87a1b1d876c1437a6ae13818f265e5bb5c6" + } + ] + } + }, { "date": "Tue, 17 Dec 2024 07:21:19 GMT", "tag": "@fluentui/react-docsite-components_v8.13.146", diff --git a/packages/react-docsite-components/CHANGELOG.md b/packages/react-docsite-components/CHANGELOG.md index 76711da2c3c316..27d54e8c7fcf4b 100644 --- a/packages/react-docsite-components/CHANGELOG.md +++ b/packages/react-docsite-components/CHANGELOG.md @@ -1,9 +1,75 @@ # Change Log - @fluentui/react-docsite-components -This log was last generated on Tue, 17 Dec 2024 07:21:19 GMT and should not be manually modified. +This log was last generated on Mon, 30 Dec 2024 07:21:29 GMT and should not be manually modified. +## [8.13.153](https://github.com/microsoft/fluentui/tree/@fluentui/react-docsite-components_v8.13.153) + +Mon, 30 Dec 2024 07:21:29 GMT +[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-docsite-components_v8.13.152..@fluentui/react-docsite-components_v8.13.153) + +### Patches + +- Bump @fluentui/react to v8.122.3 ([PR #33520](https://github.com/microsoft/fluentui/pull/33520) by beachball) +- Bump @fluentui/react-monaco-editor to v1.7.271 ([PR #33520](https://github.com/microsoft/fluentui/pull/33520) by beachball) + +## [8.13.152](https://github.com/microsoft/fluentui/tree/@fluentui/react-docsite-components_v8.13.152) + +Fri, 27 Dec 2024 07:20:59 GMT +[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-docsite-components_v8.13.151..@fluentui/react-docsite-components_v8.13.152) + +### Patches + +- Bump @fluentui/react-monaco-editor to v1.7.270 ([PR #33507](https://github.com/microsoft/fluentui/pull/33507) by beachball) + +## [8.13.151](https://github.com/microsoft/fluentui/tree/@fluentui/react-docsite-components_v8.13.151) + +Thu, 26 Dec 2024 07:21:14 GMT +[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-docsite-components_v8.13.150..@fluentui/react-docsite-components_v8.13.151) + +### Patches + +- Bump @fluentui/react-monaco-editor to v1.7.269 ([PR #33518](https://github.com/microsoft/fluentui/pull/33518) by beachball) + +## [8.13.150](https://github.com/microsoft/fluentui/tree/@fluentui/react-docsite-components_v8.13.150) + +Wed, 25 Dec 2024 07:21:56 GMT +[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-docsite-components_v8.13.149..@fluentui/react-docsite-components_v8.13.150) + +### Patches + +- Bump @fluentui/react-monaco-editor to v1.7.268 ([PR #33447](https://github.com/microsoft/fluentui/pull/33447) by beachball) + +## [8.13.149](https://github.com/microsoft/fluentui/tree/@fluentui/react-docsite-components_v8.13.149) + +Mon, 23 Dec 2024 07:22:58 GMT +[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-docsite-components_v8.13.148..@fluentui/react-docsite-components_v8.13.149) + +### Patches + +- Bump @fluentui/react to v8.122.2 ([PR #33445](https://github.com/microsoft/fluentui/pull/33445) by beachball) +- Bump @fluentui/theme to v2.6.64 ([PR #33445](https://github.com/microsoft/fluentui/pull/33445) by beachball) +- Bump @fluentui/react-monaco-editor to v1.7.267 ([PR #33445](https://github.com/microsoft/fluentui/pull/33445) by beachball) + +## [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 +[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-docsite-components_v8.13.146..@fluentui/react-docsite-components_v8.13.147) + +### Patches + +- Bump @fluentui/react-monaco-editor to v1.7.265 ([PR #33440](https://github.com/microsoft/fluentui/pull/33440) by beachball) + ## [8.13.146](https://github.com/microsoft/fluentui/tree/@fluentui/react-docsite-components_v8.13.146) Tue, 17 Dec 2024 07:21:19 GMT diff --git a/packages/react-docsite-components/package.json b/packages/react-docsite-components/package.json index ce73985e3ec1f5..ef03050dd12e36 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.146", + "version": "8.13.153", "description": "Fluent UI React components for building documentation sites.", "main": "lib-commonjs/index.js", "module": "lib/index.js", @@ -35,14 +35,14 @@ "react-dom": ">=16.8.0 <19.0.0" }, "dependencies": { - "@fluentui/react": "^8.122.1", - "@fluentui/theme": "^2.6.63", + "@fluentui/react": "^8.122.3", + "@fluentui/theme": "^2.6.64", "@microsoft/load-themed-styles": "^1.10.26", "@fluentui/example-data": "^8.4.25", "@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.264", + "@fluentui/react-monaco-editor": "^1.7.271", "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 00b9a3e26fb13f..8253cb2e7928a0 100644 --- a/packages/react-examples/package.json +++ b/packages/react-examples/package.json @@ -27,27 +27,27 @@ "@fluentui/scripts-tasks": "*" }, "dependencies": { - "@fluentui/azure-themes": "^8.6.114", + "@fluentui/azure-themes": "^8.6.116", "@fluentui/date-time-utilities": "^8.6.9", "@fluentui/dom-utilities": "^2.3.9", "@fluentui/example-data": "^8.4.25", - "@fluentui/font-icons-mdl2": "^8.5.56", - "@fluentui/foundation-legacy": "^8.4.22", + "@fluentui/font-icons-mdl2": "^8.5.57", + "@fluentui/foundation-legacy": "^8.4.23", "@fluentui/merge-styles": "^8.6.13", - "@fluentui/react": "^8.122.1", - "@fluentui/react-cards": "^0.205.190", - "@fluentui/react-charting": "^5.23.26", - "@fluentui/react-docsite-components": "^8.13.146", - "@fluentui/react-experiments": "^8.14.187", - "@fluentui/react-file-type-icons": "^8.12.6", - "@fluentui/react-focus": "^8.9.19", + "@fluentui/react": "^8.122.3", + "@fluentui/react-cards": "^0.205.192", + "@fluentui/react-charting": "^5.23.33", + "@fluentui/react-docsite-components": "^8.13.153", + "@fluentui/react-experiments": "^8.14.189", + "@fluentui/react-file-type-icons": "^8.12.7", + "@fluentui/react-focus": "^8.9.20", "@fluentui/react-hooks": "^8.8.16", - "@fluentui/react-icons-mdl2": "^1.3.81", + "@fluentui/react-icons-mdl2": "^1.3.82", "@fluentui/react-window-provider": "^2.2.28", - "@fluentui/scheme-utilities": "^8.3.64", - "@fluentui/style-utilities": "^8.11.5", - "@fluentui/theme": "^2.6.63", - "@fluentui/theme-samples": "^8.7.190", + "@fluentui/scheme-utilities": "^8.3.65", + "@fluentui/style-utilities": "^8.11.6", + "@fluentui/theme": "^2.6.64", + "@fluentui/theme-samples": "^8.7.192", "@fluentui/utilities": "^8.15.19", "@microsoft/load-themed-styles": "^1.10.26", "d3-fetch": "3.0.1", diff --git a/packages/react-examples/src/react-charting/AreaChart/AreaChart.Basic.Example.tsx b/packages/react-examples/src/react-charting/AreaChart/AreaChart.Basic.Example.tsx index d2ed2a327f98b2..387535181da0e8 100644 --- a/packages/react-examples/src/react-charting/AreaChart/AreaChart.Basic.Example.tsx +++ b/packages/react-examples/src/react-charting/AreaChart/AreaChart.Basic.Example.tsx @@ -9,6 +9,7 @@ interface IAreaChartBasicState { height: number; isCalloutselected: boolean; showAxisTitles: boolean; + legendMultiSelect: boolean; } const options: IChoiceGroupOption[] = [ @@ -24,6 +25,7 @@ export class AreaChartBasicExample extends React.Component<{}, IAreaChartBasicSt height: 300, isCalloutselected: false, showAxisTitles: true, + legendMultiSelect: false, }; } public componentDidMount(): void { @@ -68,6 +70,11 @@ export class AreaChartBasicExample extends React.Component<{}, IAreaChartBasicSt this.setState({ showAxisTitles: checked }); }; + private _onToggleLegendMultiSelect = (ev: React.MouseEvent, checked: boolean) => { + this.forceUpdate(); + this.setState({ legendMultiSelect: checked }); + }; + private _basicExample(): JSX.Element { const chart1Points = [ { @@ -162,11 +169,37 @@ export class AreaChartBasicExample extends React.Component<{}, IAreaChartBasicSt }, ]; + const chart2Points = chart1Points.map((point, index) => { + return { + x: point.x, + y: point.y + 5000, + xAxisCalloutData: point.xAxisCalloutData, + yAxisCalloutData: point.yAxisCalloutData, + }; + }); + + const chart3Points = chart1Points.map((point, index) => { + return { + x: point.x, + y: point.y - 5000, + xAxisCalloutData: point.xAxisCalloutData, + yAxisCalloutData: point.yAxisCalloutData, + }; + }); + const chartPoints = [ { legend: 'legend1', data: chart1Points, }, + { + legend: 'legend2', + data: chart2Points, + }, + { + legend: 'legend3', + data: chart3Points, + }, ]; const chartData = { @@ -208,6 +241,14 @@ export class AreaChartBasicExample extends React.Component<{}, IAreaChartBasicSt onChange={this._onToggleAxisTitlesCheckChange} styles={{ root: { marginTop: '10px' } }} /> + {this.state.showAxisTitles && (
)} @@ -253,6 +297,9 @@ export class AreaChartBasicExample extends React.Component<{}, IAreaChartBasicSt ) : null } enableReflow={true} + legendProps={{ + canSelectMultipleLegends: this.state.legendMultiSelect, + }} /> )} diff --git a/packages/react-examples/src/react-charting/DeclarativeChart/DeclarativeChart.Basic.Example.tsx b/packages/react-examples/src/react-charting/DeclarativeChart/DeclarativeChart.Basic.Example.tsx index e1e95218a39a98..4009fddcc52871 100644 --- a/packages/react-examples/src/react-charting/DeclarativeChart/DeclarativeChart.Basic.Example.tsx +++ b/packages/react-examples/src/react-charting/DeclarativeChart/DeclarativeChart.Basic.Example.tsx @@ -1,11 +1,39 @@ import * as React from 'react'; import { Dropdown, IDropdownOption } from '@fluentui/react/lib/Dropdown'; -import { Toggle } from '@fluentui/react/lib/Toggle'; -import { DeclarativeChart, DeclarativeChartProps, Schema } from '@fluentui/react-charting'; +import { TextField, ITextFieldStyles } from '@fluentui/react/lib/TextField'; +import { DeclarativeChart, DeclarativeChartProps, IDeclarativeChart, Schema } from '@fluentui/react-charting'; + +interface IErrorBoundaryProps { + children: React.ReactNode; +} + +interface IErrorBoundaryState { + hasError: boolean; + error: string; +} + +class ErrorBoundary extends React.Component { + public static getDerivedStateFromError(error: Error) { + // Update state so the next render will show the fallback UI. + return { hasError: true, error: `${error.message} ${error.stack}` }; + } + + constructor(props: IErrorBoundaryProps) { + super(props); + this.state = { hasError: false, error: '' }; + } + + public render() { + if (this.state.hasError) { + return

${this.state.error}

; + } + + return this.props.children; + } +} interface IDeclarativeChartState { selectedChoice: string; - preSelectLegends: boolean; selectedLegends: string; } @@ -37,14 +65,39 @@ const schemas: any[] = [ const dropdownStyles = { dropdown: { width: 200 } }; +const textFieldStyles: Partial = { root: { maxWidth: 300 } }; + +function fileSaver(url: string) { + const saveLink = document.createElement('a'); + saveLink.href = url; + saveLink.download = 'converted-image.png'; + document.body.appendChild(saveLink); + saveLink.click(); + document.body.removeChild(saveLink); +} + export class DeclarativeChartBasicExample extends React.Component<{}, IDeclarativeChartState> { + private _declarativeChartRef: React.RefObject; + private _lastKnownValidLegends: string[] | undefined; + constructor(props: DeclarativeChartProps) { super(props); + const defaultselection = 'donutchart'; + const selectedPlotlySchema = this._getSchemaByKey(defaultselection); + const { selectedLegends } = selectedPlotlySchema; this.state = { - selectedChoice: 'donutchart', - preSelectLegends: false, - selectedLegends: '', + selectedChoice: defaultselection, + selectedLegends: JSON.stringify(selectedLegends), }; + + this._declarativeChartRef = React.createRef(); + this._lastKnownValidLegends = selectedLegends; + } + + public componentDidMount() { + document.addEventListener('contextmenu', e => { + e.preventDefault(); + }); } public render(): JSX.Element { @@ -52,16 +105,21 @@ export class DeclarativeChartBasicExample extends React.Component<{}, IDeclarati } private _onChange = (ev: React.FormEvent, option: IDropdownOption): void => { - this.setState({ selectedChoice: option.key as string, selectedLegends: '' }); + const selectedPlotlySchema = this._getSchemaByKey(option.key as string); + const { selectedLegends } = selectedPlotlySchema; + this.setState({ selectedChoice: option.key as string, selectedLegends: JSON.stringify(selectedLegends) }); }; - private _onTogglePreselectLegends = (ev: React.MouseEvent, checked: boolean) => { - this.setState({ preSelectLegends: checked }); + private _onSelectedLegendsEdited = ( + event: React.FormEvent, + newValue?: string, + ): void => { + this.setState({ selectedLegends: newValue ?? '' }); }; private _handleChartSchemaChanged = (eventData: Schema) => { const { selectedLegends } = eventData.plotlySchema; - this.setState({ selectedLegends: selectedLegends.join(', ') }); + this.setState({ selectedLegends: JSON.stringify(selectedLegends) }); }; private _getSchemaByKey(key: string): any { @@ -70,17 +128,23 @@ export class DeclarativeChartBasicExample extends React.Component<{}, IDeclarati } private _createDeclarativeChart(): JSX.Element { - const selectedPlotlySchema = this._getSchemaByKey(this.state.selectedChoice); - const uniqueKey = `${this.state.selectedChoice}_${this.state.preSelectLegends}`; - let inputSchema: Schema = { plotlySchema: selectedPlotlySchema }; - - if (this.state.preSelectLegends === false) { - const { data, layout } = selectedPlotlySchema; - inputSchema = { plotlySchema: { data, layout } }; + const uniqueKey = `${this.state.selectedChoice}`; + const currentPlotlySchema = this._getSchemaByKey(this.state.selectedChoice); + const { data, layout } = currentPlotlySchema; + if (this.state.selectedLegends === '') { + this._lastKnownValidLegends = undefined; + } else { + try { + this._lastKnownValidLegends = JSON.parse(this.state.selectedLegends); + } catch (error) { + // Nothing to do here + } } + const plotlySchema = { data, layout, selectedLegends: this._lastKnownValidLegends }; + const inputSchema: Schema = { plotlySchema }; return ( - <> +
    -

+
- +
- Legend selection changed : {this.state.selectedLegends} - + + ); } } diff --git a/packages/react-examples/src/react-charting/DonutChart/DonutChart.Basic.Example.tsx b/packages/react-examples/src/react-charting/DonutChart/DonutChart.Basic.Example.tsx index 71be65bd695da7..ac96c767bef0e6 100644 --- a/packages/react-examples/src/react-charting/DonutChart/DonutChart.Basic.Example.tsx +++ b/packages/react-examples/src/react-charting/DonutChart/DonutChart.Basic.Example.tsx @@ -14,6 +14,7 @@ import { Toggle } from '@fluentui/react/lib/Toggle'; interface IDonutChartState { enableGradient: boolean; roundCorners: boolean; + legendMultiSelect: boolean; } export class DonutChartBasicExample extends React.Component { @@ -22,6 +23,7 @@ export class DonutChartBasicExample extends React.Component +    + ); @@ -92,4 +159,8 @@ export class DonutChartBasicExample extends React.Component, checked: boolean) => { this.setState({ roundCorners: checked }); }; + + private _onToggleLegendMultiSelect = (ev: React.MouseEvent, checked: boolean) => { + this.setState({ legendMultiSelect: checked }); + }; } diff --git a/packages/react-examples/src/react-charting/GroupedVerticalBarChart/GroupedVerticalBarChart.Basic.Example.tsx b/packages/react-examples/src/react-charting/GroupedVerticalBarChart/GroupedVerticalBarChart.Basic.Example.tsx index d514c24099ff2d..be8a4d5999a243 100644 --- a/packages/react-examples/src/react-charting/GroupedVerticalBarChart/GroupedVerticalBarChart.Basic.Example.tsx +++ b/packages/react-examples/src/react-charting/GroupedVerticalBarChart/GroupedVerticalBarChart.Basic.Example.tsx @@ -16,6 +16,7 @@ interface IGroupedBarChartState { hideLabels: boolean; enableGradient: boolean; roundCorners: boolean; + selectMultipleLegends: boolean; } export class GroupedVerticalBarChartBasicExample extends React.Component<{}, IGroupedBarChartState> { @@ -29,6 +30,7 @@ export class GroupedVerticalBarChartBasicExample extends React.Component<{}, IGr hideLabels: false, enableGradient: false, roundCorners: false, + selectMultipleLegends: false, }; } @@ -60,6 +62,10 @@ export class GroupedVerticalBarChartBasicExample extends React.Component<{}, IGr this.setState({ roundCorners: checked }); }; + private _onLegendMultiSelectChange = (ev: React.MouseEvent, checked: boolean) => { + this.setState({ selectMultipleLegends: checked }); + }; + private _basicExample(): JSX.Element { const data = [ { @@ -87,6 +93,28 @@ export class GroupedVerticalBarChartBasicExample extends React.Component<{}, IGr ariaLabel: 'Group Jan - Mar 1 of 4, Bar series 2 of 2 2023, x value 2023/04/30, y value 44%', }, }, + { + key: 'series3', + data: 54000, + color: getColorFromToken(DataVizPalette.color5), + legend: '2024', + xAxisCalloutData: '2024/04/30', + yAxisCalloutData: '44%', + callOutAccessibilityData: { + ariaLabel: 'Group Jan - Mar 1 of 4, Bar series 3 of 4 2022, x value 2024/04/30, y value 44%', + }, + }, + { + key: 'series4', + data: 24000, + color: getColorFromToken(DataVizPalette.color6), + legend: '2021', + xAxisCalloutData: '2021/04/30', + yAxisCalloutData: '44%', + callOutAccessibilityData: { + ariaLabel: 'Group Jan - Mar 1 of 4, Bar series 4 of 4 2021, x value 2021/04/30, y value 44%', + }, + }, ], }, { @@ -114,6 +142,28 @@ export class GroupedVerticalBarChartBasicExample extends React.Component<{}, IGr ariaLabel: 'Group Apr - Jun 2 of 4, Bar series 2 of 2 2023, x value 2023/05/30, y value 3%', }, }, + { + key: 'series3', + data: 9000, + color: getColorFromToken(DataVizPalette.color5), + legend: '2024', + xAxisCalloutData: '2024/05/30', + yAxisCalloutData: '3%', + callOutAccessibilityData: { + ariaLabel: 'Group Apr - Jun 2 of 4, Bar series 3 of 4 2024, x value 2024/05/30, y value 3%', + }, + }, + { + key: 'series4', + data: 12000, + color: getColorFromToken(DataVizPalette.color6), + legend: '2021', + xAxisCalloutData: '2021/05/30', + yAxisCalloutData: '3%', + callOutAccessibilityData: { + ariaLabel: 'Group Apr - Jun 2 of 4, Bar series 4 of 4 2021, x value 2021/05/30, y value 3%', + }, + }, ], }, @@ -142,6 +192,28 @@ export class GroupedVerticalBarChartBasicExample extends React.Component<{}, IGr ariaLabel: 'Group Jul - Sep 3 of 4, Bar series 2 of 2 2023, x value 2023/06/30, y value 50%', }, }, + { + key: 'series3', + data: 60000, + color: getColorFromToken(DataVizPalette.color5), + legend: '2024', + xAxisCalloutData: '2024/06/30', + yAxisCalloutData: '50%', + callOutAccessibilityData: { + ariaLabel: 'Group Jul - Sep 3 of 4, Bar series 3 of 4 2024, x value 2024/06/30, y value 50%', + }, + }, + { + key: 'series4', + data: 10000, + color: getColorFromToken(DataVizPalette.color6), + legend: '2021', + xAxisCalloutData: '2021/06/30', + yAxisCalloutData: '50%', + callOutAccessibilityData: { + ariaLabel: 'Group Jul - Sep 3 of 4, Bar series 4 of 4 2021, x value 2021/06/30, y value 50%', + }, + }, ], }, { @@ -169,6 +241,28 @@ export class GroupedVerticalBarChartBasicExample extends React.Component<{}, IGr ariaLabel: 'Group Oct - Dec 4 of 4, Bar series 2 of 2 2023, x value 2023/07/30, y value 3%', }, }, + { + key: 'series3', + data: 6000, + color: getColorFromToken(DataVizPalette.color5), + legend: '2024', + xAxisCalloutData: '2024/07/30', + yAxisCalloutData: '3%', + callOutAccessibilityData: { + ariaLabel: 'Group Oct - Dec 4 of 4, Bar series 3 of 4 2024, x value 2024/07/30, y value 3%', + }, + }, + { + key: 'series4', + data: 15000, + color: getColorFromToken(DataVizPalette.color6), + legend: '2021', + xAxisCalloutData: '2021/07/30', + yAxisCalloutData: '3%', + callOutAccessibilityData: { + ariaLabel: 'Group Oct - Dec 4 of 4, Bar series 4 of 4 2021, x value 2021/07/30, y value 3%', + }, + }, ], }, ]; @@ -234,6 +328,13 @@ export class GroupedVerticalBarChartBasicExample extends React.Component<{}, IGr    +    +
diff --git a/packages/react-examples/src/react-charting/HorizontalBarChartWithAxis/HorizontalBarChartWithAxis.Basic.Example.tsx b/packages/react-examples/src/react-charting/HorizontalBarChartWithAxis/HorizontalBarChartWithAxis.Basic.Example.tsx index 2aeb08145031c1..47db675033e174 100644 --- a/packages/react-examples/src/react-charting/HorizontalBarChartWithAxis/HorizontalBarChartWithAxis.Basic.Example.tsx +++ b/packages/react-examples/src/react-charting/HorizontalBarChartWithAxis/HorizontalBarChartWithAxis.Basic.Example.tsx @@ -18,6 +18,7 @@ interface IHorizontalBarChartWithAxisState { useSingleColor: boolean; enableGradient: boolean; roundCorners: boolean; + selectMultipleLegends: boolean; } const options: IChoiceGroupOption[] = [ @@ -38,6 +39,7 @@ export class HorizontalBarChartWithAxisBasicExample extends React.Component< useSingleColor: false, enableGradient: false, roundCorners: false, + selectMultipleLegends: false, }; } @@ -71,6 +73,10 @@ export class HorizontalBarChartWithAxisBasicExample extends React.Component< this.setState({ roundCorners: checked }); }; + private _onToggleRoundMultipleLegendSelection = (ev: React.MouseEvent, checked: boolean) => { + this.setState({ selectMultipleLegends: checked }); + }; + private _basicExample(): JSX.Element { const points: IHorizontalBarChartWithAxisDataPoint[] = [ { @@ -148,6 +154,13 @@ export class HorizontalBarChartWithAxisBasicExample extends React.Component<    +    +
@@ -168,6 +181,9 @@ export class HorizontalBarChartWithAxisBasicExample extends React.Component< enableReflow={true} enableGradient={this.state.enableGradient} roundCorners={this.state.roundCorners} + legendProps={{ + canSelectMultipleLegends: this.state.selectMultipleLegends, + }} /> diff --git a/packages/react-examples/src/react-charting/VerticalBarChart/VerticalBarChart.Basic.Example.tsx b/packages/react-examples/src/react-charting/VerticalBarChart/VerticalBarChart.Basic.Example.tsx index e9cbcb71d7828a..045c52bbad61a8 100644 --- a/packages/react-examples/src/react-charting/VerticalBarChart/VerticalBarChart.Basic.Example.tsx +++ b/packages/react-examples/src/react-charting/VerticalBarChart/VerticalBarChart.Basic.Example.tsx @@ -23,6 +23,7 @@ interface IVerticalChartState { showAxisTitles: boolean; enableGradient: boolean; roundCorners: boolean; + selectMultipleLegends: boolean; } const options: IChoiceGroupOption[] = [ @@ -42,6 +43,7 @@ export class VerticalBarChartBasicExample extends React.Component, checked: boolean) => { + this.setState({ selectMultipleLegends: checked }); + }; + private _basicExample(): JSX.Element { const points: IVerticalBarChartDataPoint[] = [ { @@ -234,6 +240,13 @@ export class VerticalBarChartBasicExample extends React.Component    +    + {this.state.showAxisTitles && (
@@ -259,6 +272,9 @@ export class VerticalBarChartBasicExample extends React.Component
)} @@ -284,6 +300,9 @@ export class VerticalBarChartBasicExample extends React.Component )} diff --git a/packages/react-examples/src/react-charting/VerticalStackedBarChart/VerticalStackedBarChart.Basic.Example.tsx b/packages/react-examples/src/react-charting/VerticalStackedBarChart/VerticalStackedBarChart.Basic.Example.tsx index d8c71162218f1a..d90e45872e4888 100644 --- a/packages/react-examples/src/react-charting/VerticalStackedBarChart/VerticalStackedBarChart.Basic.Example.tsx +++ b/packages/react-examples/src/react-charting/VerticalStackedBarChart/VerticalStackedBarChart.Basic.Example.tsx @@ -21,6 +21,7 @@ interface IVerticalStackedBarState { margins: {}; enableGradient: boolean; roundCorners: boolean; + legendMultiSelect: boolean; } export class VerticalStackedBarChartBasicExample extends React.Component<{}, IVerticalStackedBarState> { @@ -41,6 +42,7 @@ export class VerticalStackedBarChartBasicExample extends React.Component<{}, IVe }, enableGradient: false, roundCorners: false, + legendMultiSelect: false, }; } @@ -94,6 +96,10 @@ export class VerticalStackedBarChartBasicExample extends React.Component<{}, IVe this.setState({ roundCorners: checked }); }; + private _onToggleLegendMultiSelect = (ev: React.MouseEvent, checked: boolean) => { + this.setState({ legendMultiSelect: checked }); + }; + private _basicExample(): JSX.Element { const { showLine } = this.state; const firstChartPoints: IVSChartDataPoint[] = [ @@ -307,6 +313,13 @@ export class VerticalStackedBarChartBasicExample extends React.Component<{}, IVe    +    + {this.state.showAxisTitles && (
@@ -321,6 +334,7 @@ export class VerticalStackedBarChartBasicExample extends React.Component<{}, IVe lineOptions={lineOptions} legendProps={{ allowFocusOnLegends: true, + canSelectMultipleLegends: this.state.legendMultiSelect, }} hideLabels={this.state.hideLabels} enableReflow={true} @@ -344,6 +358,7 @@ export class VerticalStackedBarChartBasicExample extends React.Component<{}, IVe lineOptions={lineOptions} legendProps={{ allowFocusOnLegends: true, + canSelectMultipleLegends: this.state.legendMultiSelect, }} hideLabels={this.state.hideLabels} enableReflow={true} diff --git a/packages/react-experiments/CHANGELOG.json b/packages/react-experiments/CHANGELOG.json index 6102a91b988702..94a924d3259e78 100644 --- a/packages/react-experiments/CHANGELOG.json +++ b/packages/react-experiments/CHANGELOG.json @@ -1,6 +1,60 @@ { "name": "@fluentui/react-experiments", "entries": [ + { + "date": "Mon, 30 Dec 2024 07:21:29 GMT", + "tag": "@fluentui/react-experiments_v8.14.189", + "version": "8.14.189", + "comments": { + "patch": [ + { + "author": "beachball", + "package": "@fluentui/react-experiments", + "comment": "Bump @fluentui/react to v8.122.3", + "commit": "681a95a732fe385a70b8d4537dc489acbcd1c21e" + } + ] + } + }, + { + "date": "Mon, 23 Dec 2024 07:22:58 GMT", + "tag": "@fluentui/react-experiments_v8.14.188", + "version": "8.14.188", + "comments": { + "patch": [ + { + "author": "beachball", + "package": "@fluentui/react-experiments", + "comment": "Bump @fluentui/react to v8.122.2", + "commit": "7b4a3785c6c1d7c207602cad0a1795e3df9122ee" + }, + { + "author": "beachball", + "package": "@fluentui/react-experiments", + "comment": "Bump @fluentui/theme to v2.6.64", + "commit": "7b4a3785c6c1d7c207602cad0a1795e3df9122ee" + }, + { + "author": "beachball", + "package": "@fluentui/react-experiments", + "comment": "Bump @fluentui/foundation-legacy to v8.4.23", + "commit": "7b4a3785c6c1d7c207602cad0a1795e3df9122ee" + }, + { + "author": "beachball", + "package": "@fluentui/react-experiments", + "comment": "Bump @fluentui/font-icons-mdl2 to v8.5.57", + "commit": "7b4a3785c6c1d7c207602cad0a1795e3df9122ee" + }, + { + "author": "beachball", + "package": "@fluentui/react-experiments", + "comment": "Bump @fluentui/style-utilities to v8.11.6", + "commit": "7b4a3785c6c1d7c207602cad0a1795e3df9122ee" + } + ] + } + }, { "date": "Fri, 13 Dec 2024 07:23:12 GMT", "tag": "@fluentui/react-experiments_v8.14.187", diff --git a/packages/react-experiments/CHANGELOG.md b/packages/react-experiments/CHANGELOG.md index 6765724d55c64c..6b1ce897bf5d66 100644 --- a/packages/react-experiments/CHANGELOG.md +++ b/packages/react-experiments/CHANGELOG.md @@ -1,9 +1,31 @@ # Change Log - @fluentui/react-experiments -This log was last generated on Fri, 13 Dec 2024 07:23:12 GMT and should not be manually modified. +This log was last generated on Mon, 30 Dec 2024 07:21:29 GMT and should not be manually modified. +## [8.14.189](https://github.com/microsoft/fluentui/tree/@fluentui/react-experiments_v8.14.189) + +Mon, 30 Dec 2024 07:21:29 GMT +[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-experiments_v8.14.188..@fluentui/react-experiments_v8.14.189) + +### Patches + +- Bump @fluentui/react to v8.122.3 ([PR #33520](https://github.com/microsoft/fluentui/pull/33520) by beachball) + +## [8.14.188](https://github.com/microsoft/fluentui/tree/@fluentui/react-experiments_v8.14.188) + +Mon, 23 Dec 2024 07:22:58 GMT +[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-experiments_v8.14.187..@fluentui/react-experiments_v8.14.188) + +### Patches + +- Bump @fluentui/react to v8.122.2 ([PR #33445](https://github.com/microsoft/fluentui/pull/33445) by beachball) +- Bump @fluentui/theme to v2.6.64 ([PR #33445](https://github.com/microsoft/fluentui/pull/33445) by beachball) +- Bump @fluentui/foundation-legacy to v8.4.23 ([PR #33445](https://github.com/microsoft/fluentui/pull/33445) by beachball) +- Bump @fluentui/font-icons-mdl2 to v8.5.57 ([PR #33445](https://github.com/microsoft/fluentui/pull/33445) by beachball) +- Bump @fluentui/style-utilities to v8.11.6 ([PR #33445](https://github.com/microsoft/fluentui/pull/33445) by beachball) + ## [8.14.187](https://github.com/microsoft/fluentui/tree/@fluentui/react-experiments_v8.14.187) Fri, 13 Dec 2024 07:23:12 GMT diff --git a/packages/react-experiments/package.json b/packages/react-experiments/package.json index 82aefbe7f34aea..b39db02f400768 100644 --- a/packages/react-experiments/package.json +++ b/packages/react-experiments/package.json @@ -1,6 +1,6 @@ { "name": "@fluentui/react-experiments", - "version": "8.14.187", + "version": "8.14.189", "description": "Experimental React components for building experiences for Microsoft 365.", "main": "lib-commonjs/index.js", "module": "lib/index.js", @@ -38,16 +38,16 @@ "@fluentui/scripts-webpack": "*" }, "dependencies": { - "@fluentui/react": "^8.122.1", - "@fluentui/theme": "^2.6.63", + "@fluentui/react": "^8.122.3", + "@fluentui/theme": "^2.6.64", "@microsoft/load-themed-styles": "^1.10.26", "@fluentui/example-data": "^8.4.25", - "@fluentui/foundation-legacy": "^8.4.22", - "@fluentui/font-icons-mdl2": "^8.5.56", + "@fluentui/foundation-legacy": "^8.4.23", + "@fluentui/font-icons-mdl2": "^8.5.57", "@fluentui/merge-styles": "^8.6.13", "@fluentui/react-hooks": "^8.8.16", "@fluentui/set-version": "^8.2.23", - "@fluentui/style-utilities": "^8.11.5", + "@fluentui/style-utilities": "^8.11.6", "@fluentui/utilities": "^8.15.19", "deep-assign": "^2.0.0", "prop-types": "^15.7.2", diff --git a/packages/react-file-type-icons/CHANGELOG.json b/packages/react-file-type-icons/CHANGELOG.json index af4fd46f317058..46f5e3ffdc0b26 100644 --- a/packages/react-file-type-icons/CHANGELOG.json +++ b/packages/react-file-type-icons/CHANGELOG.json @@ -1,6 +1,21 @@ { "name": "@fluentui/react-file-type-icons", "entries": [ + { + "date": "Mon, 23 Dec 2024 07:22:58 GMT", + "tag": "@fluentui/react-file-type-icons_v8.12.7", + "version": "8.12.7", + "comments": { + "patch": [ + { + "author": "beachball", + "package": "@fluentui/react-file-type-icons", + "comment": "Bump @fluentui/style-utilities to v8.11.6", + "commit": "7b4a3785c6c1d7c207602cad0a1795e3df9122ee" + } + ] + } + }, { "date": "Fri, 13 Dec 2024 07:23:12 GMT", "tag": "@fluentui/react-file-type-icons_v8.12.6", diff --git a/packages/react-file-type-icons/CHANGELOG.md b/packages/react-file-type-icons/CHANGELOG.md index 818517d7db89a7..9db6c3fde7e9d3 100644 --- a/packages/react-file-type-icons/CHANGELOG.md +++ b/packages/react-file-type-icons/CHANGELOG.md @@ -1,9 +1,18 @@ # Change Log - @fluentui/react-file-type-icons -This log was last generated on Fri, 13 Dec 2024 07:23:12 GMT and should not be manually modified. +This log was last generated on Mon, 23 Dec 2024 07:22:58 GMT and should not be manually modified. +## [8.12.7](https://github.com/microsoft/fluentui/tree/@fluentui/react-file-type-icons_v8.12.7) + +Mon, 23 Dec 2024 07:22:58 GMT +[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-file-type-icons_v8.12.6..@fluentui/react-file-type-icons_v8.12.7) + +### Patches + +- Bump @fluentui/style-utilities to v8.11.6 ([PR #33445](https://github.com/microsoft/fluentui/pull/33445) by beachball) + ## [8.12.6](https://github.com/microsoft/fluentui/tree/@fluentui/react-file-type-icons_v8.12.6) Fri, 13 Dec 2024 07:23:12 GMT diff --git a/packages/react-file-type-icons/package.json b/packages/react-file-type-icons/package.json index 7828077df3dcb6..d6daa5e700488b 100644 --- a/packages/react-file-type-icons/package.json +++ b/packages/react-file-type-icons/package.json @@ -1,6 +1,6 @@ { "name": "@fluentui/react-file-type-icons", - "version": "8.12.6", + "version": "8.12.7", "description": "Fluent UI React file type icon set.", "main": "lib-commonjs/index.js", "module": "lib/index.js", @@ -28,7 +28,7 @@ }, "dependencies": { "@fluentui/set-version": "^8.2.23", - "@fluentui/style-utilities": "^8.11.5", + "@fluentui/style-utilities": "^8.11.6", "tslib": "^2.1.0" }, "peerDependencies": { diff --git a/packages/react-focus/CHANGELOG.json b/packages/react-focus/CHANGELOG.json index b15de9b3c8a50a..151892d1415cdb 100644 --- a/packages/react-focus/CHANGELOG.json +++ b/packages/react-focus/CHANGELOG.json @@ -1,6 +1,21 @@ { "name": "@fluentui/react-focus", "entries": [ + { + "date": "Mon, 23 Dec 2024 07:22:58 GMT", + "tag": "@fluentui/react-focus_v8.9.20", + "version": "8.9.20", + "comments": { + "patch": [ + { + "author": "beachball", + "package": "@fluentui/react-focus", + "comment": "Bump @fluentui/style-utilities to v8.11.6", + "commit": "7b4a3785c6c1d7c207602cad0a1795e3df9122ee" + } + ] + } + }, { "date": "Fri, 13 Dec 2024 07:23:12 GMT", "tag": "@fluentui/react-focus_v8.9.19", diff --git a/packages/react-focus/CHANGELOG.md b/packages/react-focus/CHANGELOG.md index 2d05140c9d56c2..0905a2bebf2606 100644 --- a/packages/react-focus/CHANGELOG.md +++ b/packages/react-focus/CHANGELOG.md @@ -1,9 +1,18 @@ # Change Log - @fluentui/react-focus -This log was last generated on Fri, 13 Dec 2024 07:23:12 GMT and should not be manually modified. +This log was last generated on Mon, 23 Dec 2024 07:22:58 GMT and should not be manually modified. +## [8.9.20](https://github.com/microsoft/fluentui/tree/@fluentui/react-focus_v8.9.20) + +Mon, 23 Dec 2024 07:22:58 GMT +[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-focus_v8.9.19..@fluentui/react-focus_v8.9.20) + +### Patches + +- Bump @fluentui/style-utilities to v8.11.6 ([PR #33445](https://github.com/microsoft/fluentui/pull/33445) by beachball) + ## [8.9.19](https://github.com/microsoft/fluentui/tree/@fluentui/react-focus_v8.9.19) Fri, 13 Dec 2024 07:23:12 GMT diff --git a/packages/react-focus/package.json b/packages/react-focus/package.json index 77e8958bb5eb82..c96fce9f88f019 100644 --- a/packages/react-focus/package.json +++ b/packages/react-focus/package.json @@ -1,6 +1,6 @@ { "name": "@fluentui/react-focus", - "version": "8.9.19", + "version": "8.9.20", "description": "Focus helpers to be used in React applications.", "main": "lib-commonjs/index.js", "module": "lib/index.js", @@ -38,7 +38,7 @@ "@fluentui/keyboard-key": "^0.4.23", "@fluentui/merge-styles": "^8.6.13", "@fluentui/set-version": "^8.2.23", - "@fluentui/style-utilities": "^8.11.5", + "@fluentui/style-utilities": "^8.11.6", "@fluentui/utilities": "^8.15.19", "tslib": "^2.1.0" }, diff --git a/packages/react-icon-provider/CHANGELOG.json b/packages/react-icon-provider/CHANGELOG.json index e56287fc560aff..279b00f9d91cda 100644 --- a/packages/react-icon-provider/CHANGELOG.json +++ b/packages/react-icon-provider/CHANGELOG.json @@ -1,6 +1,27 @@ { "name": "@fluentui/react-icon-provider", "entries": [ + { + "date": "Mon, 23 Dec 2024 07:22:57 GMT", + "tag": "@fluentui/react-icon-provider_v1.3.78", + "version": "1.3.78", + "comments": { + "patch": [ + { + "author": "olfedias@microsoft.com", + "package": "@fluentui/react-icon-provider", + "commit": "dc7bb663e3d93a19b611cf1892556d69c57b1269", + "comment": "chore: remove usage of \"export *\"" + }, + { + "author": "beachball", + "package": "@fluentui/react-icon-provider", + "comment": "Bump @fluentui/style-utilities to v8.11.6", + "commit": "7b4a3785c6c1d7c207602cad0a1795e3df9122ee" + } + ] + } + }, { "date": "Fri, 13 Dec 2024 07:23:12 GMT", "tag": "@fluentui/react-icon-provider_v1.3.77", diff --git a/packages/react-icon-provider/CHANGELOG.md b/packages/react-icon-provider/CHANGELOG.md index d76f29b8bdc463..581fad04ef790b 100644 --- a/packages/react-icon-provider/CHANGELOG.md +++ b/packages/react-icon-provider/CHANGELOG.md @@ -1,9 +1,19 @@ # Change Log - @fluentui/react-icon-provider -This log was last generated on Fri, 13 Dec 2024 07:23:12 GMT and should not be manually modified. +This log was last generated on Mon, 23 Dec 2024 07:22:57 GMT and should not be manually modified. +## [1.3.78](https://github.com/microsoft/fluentui/tree/@fluentui/react-icon-provider_v1.3.78) + +Mon, 23 Dec 2024 07:22:57 GMT +[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-icon-provider_v1.3.77..@fluentui/react-icon-provider_v1.3.78) + +### Patches + +- chore: remove usage of "export *" ([PR #33448](https://github.com/microsoft/fluentui/pull/33448) by olfedias@microsoft.com) +- Bump @fluentui/style-utilities to v8.11.6 ([PR #33445](https://github.com/microsoft/fluentui/pull/33445) by beachball) + ## [1.3.77](https://github.com/microsoft/fluentui/tree/@fluentui/react-icon-provider_v1.3.77) Fri, 13 Dec 2024 07:23:12 GMT diff --git a/packages/react-icon-provider/package.json b/packages/react-icon-provider/package.json index 90170cc79f37cd..1887d0aa9743b4 100644 --- a/packages/react-icon-provider/package.json +++ b/packages/react-icon-provider/package.json @@ -1,6 +1,6 @@ { "name": "@fluentui/react-icon-provider", - "version": "1.3.77", + "version": "1.3.78", "description": "Package for applying icon overrides to Fluent UI React SVG icons", "main": "lib-commonjs/index.js", "module": "lib/index.js", @@ -30,7 +30,7 @@ }, "dependencies": { "@fluentui/set-version": "^8.2.23", - "@fluentui/style-utilities": "^8.11.5", + "@fluentui/style-utilities": "^8.11.6", "tslib": "^2.1.0" }, "peerDependencies": { diff --git a/packages/react-icon-provider/src/index.ts b/packages/react-icon-provider/src/index.ts index b77b5beee663cc..9e6599b016afe5 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-icons-mdl2-branded/CHANGELOG.json b/packages/react-icons-mdl2-branded/CHANGELOG.json index 2e095626b23d99..3b43601e0d564f 100644 --- a/packages/react-icons-mdl2-branded/CHANGELOG.json +++ b/packages/react-icons-mdl2-branded/CHANGELOG.json @@ -1,6 +1,21 @@ { "name": "@fluentui/react-icons-mdl2-branded", "entries": [ + { + "date": "Mon, 23 Dec 2024 07:22:58 GMT", + "tag": "@fluentui/react-icons-mdl2-branded_v1.2.84", + "version": "1.2.84", + "comments": { + "patch": [ + { + "author": "beachball", + "package": "@fluentui/react-icons-mdl2-branded", + "comment": "Bump @fluentui/react-icons-mdl2 to v1.3.82", + "commit": "7b4a3785c6c1d7c207602cad0a1795e3df9122ee" + } + ] + } + }, { "date": "Fri, 13 Dec 2024 07:23:12 GMT", "tag": "@fluentui/react-icons-mdl2-branded_v1.2.83", diff --git a/packages/react-icons-mdl2-branded/CHANGELOG.md b/packages/react-icons-mdl2-branded/CHANGELOG.md index 65be76ca927a4d..ac6983eb3f8dbf 100644 --- a/packages/react-icons-mdl2-branded/CHANGELOG.md +++ b/packages/react-icons-mdl2-branded/CHANGELOG.md @@ -1,9 +1,18 @@ # Change Log - @fluentui/react-icons-mdl2-branded -This log was last generated on Fri, 13 Dec 2024 07:23:12 GMT and should not be manually modified. +This log was last generated on Mon, 23 Dec 2024 07:22:58 GMT and should not be manually modified. +## [1.2.84](https://github.com/microsoft/fluentui/tree/@fluentui/react-icons-mdl2-branded_v1.2.84) + +Mon, 23 Dec 2024 07:22:58 GMT +[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-icons-mdl2-branded_v1.2.83..@fluentui/react-icons-mdl2-branded_v1.2.84) + +### Patches + +- Bump @fluentui/react-icons-mdl2 to v1.3.82 ([PR #33445](https://github.com/microsoft/fluentui/pull/33445) by beachball) + ## [1.2.83](https://github.com/microsoft/fluentui/tree/@fluentui/react-icons-mdl2-branded_v1.2.83) Fri, 13 Dec 2024 07:23:12 GMT diff --git a/packages/react-icons-mdl2-branded/package.json b/packages/react-icons-mdl2-branded/package.json index cc6afcf48e61a0..55901e2cff2b1c 100644 --- a/packages/react-icons-mdl2-branded/package.json +++ b/packages/react-icons-mdl2-branded/package.json @@ -1,6 +1,6 @@ { "name": "@fluentui/react-icons-mdl2-branded", - "version": "1.2.83", + "version": "1.2.84", "description": "Branded SVG icons from the MDL2 icon set", "main": "lib-commonjs/index.js", "module": "lib/index.js", @@ -26,7 +26,7 @@ }, "dependencies": { "@fluentui/set-version": "^8.2.23", - "@fluentui/react-icons-mdl2": "^1.3.81", + "@fluentui/react-icons-mdl2": "^1.3.82", "tslib": "^2.1.0" }, "peerDependencies": { diff --git a/packages/react-icons-mdl2/CHANGELOG.json b/packages/react-icons-mdl2/CHANGELOG.json index 2d0eabf3d45775..c88e85870ebf07 100644 --- a/packages/react-icons-mdl2/CHANGELOG.json +++ b/packages/react-icons-mdl2/CHANGELOG.json @@ -1,6 +1,21 @@ { "name": "@fluentui/react-icons-mdl2", "entries": [ + { + "date": "Mon, 23 Dec 2024 07:22:58 GMT", + "tag": "@fluentui/react-icons-mdl2_v1.3.82", + "version": "1.3.82", + "comments": { + "patch": [ + { + "author": "beachball", + "package": "@fluentui/react-icons-mdl2", + "comment": "Bump @fluentui/react-icon-provider to v1.3.78", + "commit": "7b4a3785c6c1d7c207602cad0a1795e3df9122ee" + } + ] + } + }, { "date": "Fri, 13 Dec 2024 07:23:12 GMT", "tag": "@fluentui/react-icons-mdl2_v1.3.81", diff --git a/packages/react-icons-mdl2/CHANGELOG.md b/packages/react-icons-mdl2/CHANGELOG.md index 922b24ecbf6d22..ffdc164ec27207 100644 --- a/packages/react-icons-mdl2/CHANGELOG.md +++ b/packages/react-icons-mdl2/CHANGELOG.md @@ -1,9 +1,18 @@ # Change Log - @fluentui/react-icons-mdl2 -This log was last generated on Fri, 13 Dec 2024 07:23:12 GMT and should not be manually modified. +This log was last generated on Mon, 23 Dec 2024 07:22:58 GMT and should not be manually modified. +## [1.3.82](https://github.com/microsoft/fluentui/tree/@fluentui/react-icons-mdl2_v1.3.82) + +Mon, 23 Dec 2024 07:22:58 GMT +[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-icons-mdl2_v1.3.81..@fluentui/react-icons-mdl2_v1.3.82) + +### Patches + +- Bump @fluentui/react-icon-provider to v1.3.78 ([PR #33445](https://github.com/microsoft/fluentui/pull/33445) by beachball) + ## [1.3.81](https://github.com/microsoft/fluentui/tree/@fluentui/react-icons-mdl2_v1.3.81) Fri, 13 Dec 2024 07:23:12 GMT diff --git a/packages/react-icons-mdl2/package.json b/packages/react-icons-mdl2/package.json index 95d461669d6d0b..a624f56180a31e 100644 --- a/packages/react-icons-mdl2/package.json +++ b/packages/react-icons-mdl2/package.json @@ -1,6 +1,6 @@ { "name": "@fluentui/react-icons-mdl2", - "version": "1.3.81", + "version": "1.3.82", "description": "SVG icon components for @fluentui/react", "main": "lib-commonjs/index.js", "module": "lib/index.js", @@ -31,7 +31,7 @@ }, "dependencies": { "@microsoft/load-themed-styles": "^1.10.26", - "@fluentui/react-icon-provider": "^1.3.77", + "@fluentui/react-icon-provider": "^1.3.78", "@fluentui/set-version": "^8.2.23", "@fluentui/utilities": "^8.15.19", "tslib": "^2.1.0" diff --git a/packages/react-monaco-editor/CHANGELOG.json b/packages/react-monaco-editor/CHANGELOG.json index e5394f6bb139b4..85a5fae8003144 100644 --- a/packages/react-monaco-editor/CHANGELOG.json +++ b/packages/react-monaco-editor/CHANGELOG.json @@ -1,6 +1,123 @@ { "name": "@fluentui/react-monaco-editor", "entries": [ + { + "date": "Mon, 30 Dec 2024 07:21:29 GMT", + "tag": "@fluentui/react-monaco-editor_v1.7.271", + "version": "1.7.271", + "comments": { + "patch": [ + { + "author": "beachball", + "package": "@fluentui/react-monaco-editor", + "comment": "Bump @fluentui/react to v8.122.3", + "commit": "681a95a732fe385a70b8d4537dc489acbcd1c21e" + }, + { + "author": "beachball", + "package": "@fluentui/react-monaco-editor", + "comment": "Bump @fluentui/react-charting to v5.23.33", + "commit": "681a95a732fe385a70b8d4537dc489acbcd1c21e" + } + ] + } + }, + { + "date": "Fri, 27 Dec 2024 07:20:59 GMT", + "tag": "@fluentui/react-monaco-editor_v1.7.270", + "version": "1.7.270", + "comments": { + "patch": [ + { + "author": "beachball", + "package": "@fluentui/react-monaco-editor", + "comment": "Bump @fluentui/react-charting to v5.23.32", + "commit": "99cbe5c9cc9c298d78e10301b37d314b68ba8c52" + } + ] + } + }, + { + "date": "Thu, 26 Dec 2024 07:21:14 GMT", + "tag": "@fluentui/react-monaco-editor_v1.7.269", + "version": "1.7.269", + "comments": { + "patch": [ + { + "author": "beachball", + "package": "@fluentui/react-monaco-editor", + "comment": "Bump @fluentui/react-charting to v5.23.31", + "commit": "0dd9a713b54a6d5b5929ac7febd1c7e44c83efca" + } + ] + } + }, + { + "date": "Wed, 25 Dec 2024 07:21:56 GMT", + "tag": "@fluentui/react-monaco-editor_v1.7.268", + "version": "1.7.268", + "comments": { + "patch": [ + { + "author": "beachball", + "package": "@fluentui/react-monaco-editor", + "comment": "Bump @fluentui/react-charting to v5.23.30", + "commit": "fa08fec97a5bc070e2866633c792f7066f0c86e8" + } + ] + } + }, + { + "date": "Mon, 23 Dec 2024 07:22:58 GMT", + "tag": "@fluentui/react-monaco-editor_v1.7.267", + "version": "1.7.267", + "comments": { + "patch": [ + { + "author": "beachball", + "package": "@fluentui/react-monaco-editor", + "comment": "Bump @fluentui/react to v8.122.2", + "commit": "7b4a3785c6c1d7c207602cad0a1795e3df9122ee" + }, + { + "author": "beachball", + "package": "@fluentui/react-monaco-editor", + "comment": "Bump @fluentui/react-charting to v5.23.29", + "commit": "7b4a3785c6c1d7c207602cad0a1795e3df9122ee" + } + ] + } + }, + { + "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", + "version": "1.7.265", + "comments": { + "patch": [ + { + "author": "beachball", + "package": "@fluentui/react-monaco-editor", + "comment": "Bump @fluentui/react-charting to v5.23.27", + "commit": "6bcbe87a1b1d876c1437a6ae13818f265e5bb5c6" + } + ] + } + }, { "date": "Tue, 17 Dec 2024 07:21:19 GMT", "tag": "@fluentui/react-monaco-editor_v1.7.264", diff --git a/packages/react-monaco-editor/CHANGELOG.md b/packages/react-monaco-editor/CHANGELOG.md index f69526a416a453..ef26ea7a650215 100644 --- a/packages/react-monaco-editor/CHANGELOG.md +++ b/packages/react-monaco-editor/CHANGELOG.md @@ -1,9 +1,74 @@ # Change Log - @fluentui/react-monaco-editor -This log was last generated on Tue, 17 Dec 2024 07:21:19 GMT and should not be manually modified. +This log was last generated on Mon, 30 Dec 2024 07:21:29 GMT and should not be manually modified. +## [1.7.271](https://github.com/microsoft/fluentui/tree/@fluentui/react-monaco-editor_v1.7.271) + +Mon, 30 Dec 2024 07:21:29 GMT +[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-monaco-editor_v1.7.270..@fluentui/react-monaco-editor_v1.7.271) + +### Patches + +- Bump @fluentui/react to v8.122.3 ([PR #33520](https://github.com/microsoft/fluentui/pull/33520) by beachball) +- Bump @fluentui/react-charting to v5.23.33 ([PR #33520](https://github.com/microsoft/fluentui/pull/33520) by beachball) + +## [1.7.270](https://github.com/microsoft/fluentui/tree/@fluentui/react-monaco-editor_v1.7.270) + +Fri, 27 Dec 2024 07:20:59 GMT +[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-monaco-editor_v1.7.269..@fluentui/react-monaco-editor_v1.7.270) + +### Patches + +- Bump @fluentui/react-charting to v5.23.32 ([PR #33507](https://github.com/microsoft/fluentui/pull/33507) by beachball) + +## [1.7.269](https://github.com/microsoft/fluentui/tree/@fluentui/react-monaco-editor_v1.7.269) + +Thu, 26 Dec 2024 07:21:14 GMT +[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-monaco-editor_v1.7.268..@fluentui/react-monaco-editor_v1.7.269) + +### Patches + +- Bump @fluentui/react-charting to v5.23.31 ([PR #33518](https://github.com/microsoft/fluentui/pull/33518) by beachball) + +## [1.7.268](https://github.com/microsoft/fluentui/tree/@fluentui/react-monaco-editor_v1.7.268) + +Wed, 25 Dec 2024 07:21:56 GMT +[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-monaco-editor_v1.7.267..@fluentui/react-monaco-editor_v1.7.268) + +### Patches + +- Bump @fluentui/react-charting to v5.23.30 ([PR #33447](https://github.com/microsoft/fluentui/pull/33447) by beachball) + +## [1.7.267](https://github.com/microsoft/fluentui/tree/@fluentui/react-monaco-editor_v1.7.267) + +Mon, 23 Dec 2024 07:22:58 GMT +[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-monaco-editor_v1.7.266..@fluentui/react-monaco-editor_v1.7.267) + +### Patches + +- Bump @fluentui/react to v8.122.2 ([PR #33445](https://github.com/microsoft/fluentui/pull/33445) by beachball) +- Bump @fluentui/react-charting to v5.23.29 ([PR #33445](https://github.com/microsoft/fluentui/pull/33445) by beachball) + +## [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 +[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-monaco-editor_v1.7.264..@fluentui/react-monaco-editor_v1.7.265) + +### Patches + +- Bump @fluentui/react-charting to v5.23.27 ([PR #33440](https://github.com/microsoft/fluentui/pull/33440) by beachball) + ## [1.7.264](https://github.com/microsoft/fluentui/tree/@fluentui/react-monaco-editor_v1.7.264) Tue, 17 Dec 2024 07:21:19 GMT diff --git a/packages/react-monaco-editor/package.json b/packages/react-monaco-editor/package.json index 568bc8a25022f9..ec10131910886f 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.264", + "version": "1.7.271", "description": "Live React example editing using monaco", "main": "lib-commonjs/index.js", "module": "lib/index.js", @@ -29,12 +29,12 @@ "@fluentui/scripts-webpack": "*" }, "dependencies": { - "@fluentui/react": "^8.122.1", + "@fluentui/react": "^8.122.3", "@microsoft/load-themed-styles": "^1.10.26", "@fluentui/example-data": "^8.4.25", "@fluentui/monaco-editor": "^1.3.24", "@fluentui/react-hooks": "^8.8.16", - "@fluentui/react-charting": "^5.23.26", + "@fluentui/react-charting": "^5.23.33", "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 ba3ddc75cd7402..b808ff782603de 100644 --- a/packages/react/CHANGELOG.json +++ b/packages/react/CHANGELOG.json @@ -1,6 +1,75 @@ { "name": "@fluentui/react", "entries": [ + { + "date": "Mon, 30 Dec 2024 07:21:29 GMT", + "tag": "@fluentui/react_v8.122.3", + "version": "8.122.3", + "comments": { + "patch": [ + { + "author": "estebanmu@microsoft.com", + "package": "@fluentui/react", + "commit": "681a95a732fe385a70b8d4537dc489acbcd1c21e", + "comment": "fix: Add event listener to Panel in order to update the footer's sticky property correctly when content changes dynamically." + } + ] + } + }, + { + "date": "Mon, 23 Dec 2024 07:22:58 GMT", + "tag": "@fluentui/react_v8.122.2", + "version": "8.122.2", + "comments": { + "patch": [ + { + "author": "beachball", + "package": "@fluentui/react", + "comment": "Bump @fluentui/foundation-legacy to v8.4.23", + "commit": "7b4a3785c6c1d7c207602cad0a1795e3df9122ee" + }, + { + "author": "beachball", + "package": "@fluentui/react", + "comment": "Bump @fluentui/font-icons-mdl2 to v8.5.57", + "commit": "7b4a3785c6c1d7c207602cad0a1795e3df9122ee" + }, + { + "author": "beachball", + "package": "@fluentui/react", + "comment": "Bump @fluentui/react-focus to v8.9.20", + "commit": "7b4a3785c6c1d7c207602cad0a1795e3df9122ee" + }, + { + "author": "beachball", + "package": "@fluentui/react", + "comment": "Bump @fluentui/style-utilities to v8.11.6", + "commit": "7b4a3785c6c1d7c207602cad0a1795e3df9122ee" + }, + { + "author": "beachball", + "package": "@fluentui/react", + "comment": "Bump @fluentui/theme to v2.6.64", + "commit": "7b4a3785c6c1d7c207602cad0a1795e3df9122ee" + } + ] + } + }, + { + "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/CHANGELOG.md b/packages/react/CHANGELOG.md index d1c8e9d03ad91b..8bef47e94b11a7 100644 --- a/packages/react/CHANGELOG.md +++ b/packages/react/CHANGELOG.md @@ -1,9 +1,31 @@ # Change Log - @fluentui/react -This log was last generated on Fri, 13 Dec 2024 07:23:12 GMT and should not be manually modified. +This log was last generated on Mon, 30 Dec 2024 07:21:29 GMT and should not be manually modified. +## [8.122.3](https://github.com/microsoft/fluentui/tree/@fluentui/react_v8.122.3) + +Mon, 30 Dec 2024 07:21:29 GMT +[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react_v8.122.2..@fluentui/react_v8.122.3) + +### Patches + +- fix: Add event listener to Panel in order to update the footer's sticky property correctly when content changes dynamically. ([PR #33520](https://github.com/microsoft/fluentui/pull/33520) by estebanmu@microsoft.com) + +## [8.122.2](https://github.com/microsoft/fluentui/tree/@fluentui/react_v8.122.2) + +Mon, 23 Dec 2024 07:22:58 GMT +[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react_v8.122.1..@fluentui/react_v8.122.2) + +### Patches + +- Bump @fluentui/foundation-legacy to v8.4.23 ([PR #33445](https://github.com/microsoft/fluentui/pull/33445) by beachball) +- Bump @fluentui/font-icons-mdl2 to v8.5.57 ([PR #33445](https://github.com/microsoft/fluentui/pull/33445) by beachball) +- Bump @fluentui/react-focus to v8.9.20 ([PR #33445](https://github.com/microsoft/fluentui/pull/33445) by beachball) +- Bump @fluentui/style-utilities to v8.11.6 ([PR #33445](https://github.com/microsoft/fluentui/pull/33445) by beachball) +- Bump @fluentui/theme to v2.6.64 ([PR #33445](https://github.com/microsoft/fluentui/pull/33445) by beachball) + ## [8.122.1](https://github.com/microsoft/fluentui/tree/@fluentui/react_v8.122.1) Fri, 13 Dec 2024 07:23:12 GMT diff --git a/packages/react/etc/react.api.md b/packages/react/etc/react.api.md index 2cf141de1c40e6..94b006c3695750 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/package.json b/packages/react/package.json index 3f47bf83709271..bc6b15b7a9bc5c 100644 --- a/packages/react/package.json +++ b/packages/react/package.json @@ -1,6 +1,6 @@ { "name": "@fluentui/react", - "version": "8.122.1", + "version": "8.122.3", "description": "Reusable React components for building web experiences.", "main": "lib-commonjs/index.js", "module": "lib/index.js", @@ -49,16 +49,16 @@ }, "dependencies": { "@fluentui/date-time-utilities": "^8.6.9", - "@fluentui/foundation-legacy": "^8.4.22", - "@fluentui/font-icons-mdl2": "^8.5.56", + "@fluentui/foundation-legacy": "^8.4.23", + "@fluentui/font-icons-mdl2": "^8.5.57", "@fluentui/merge-styles": "^8.6.13", - "@fluentui/react-focus": "^8.9.19", + "@fluentui/react-focus": "^8.9.20", "@fluentui/react-hooks": "^8.8.16", "@fluentui/react-portal-compat-context": "^9.0.13", "@fluentui/react-window-provider": "^2.2.28", "@fluentui/set-version": "^8.2.23", - "@fluentui/style-utilities": "^8.11.5", - "@fluentui/theme": "^2.6.63", + "@fluentui/style-utilities": "^8.11.6", + "@fluentui/theme": "^2.6.64", "@fluentui/utilities": "^8.15.19", "@microsoft/load-themed-styles": "^1.10.26", "tslib": "^2.1.0" diff --git a/packages/react/src/components/ContextualMenu/ContextualMenu.base.tsx b/packages/react/src/components/ContextualMenu/ContextualMenu.base.tsx index 945165847f8d70..c457e42be1a7fd 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/react/src/components/Panel/Panel.base.tsx b/packages/react/src/components/Panel/Panel.base.tsx index 329e90467153e8..cf1ab7e072740f 100644 --- a/packages/react/src/components/Panel/Panel.base.tsx +++ b/packages/react/src/components/Panel/Panel.base.tsx @@ -61,6 +61,7 @@ export class PanelBase extends React.Component impleme private _hasCustomNavigation: boolean = !!(this.props.onRenderNavigation || this.props.onRenderNavigationContent); private _headerTextId: string | undefined; private _allowTouchBodyScroll: boolean; + private _resizeObserver: ResizeObserver | null; public static getDerivedStateFromProps( nextProps: Readonly, @@ -149,6 +150,7 @@ export class PanelBase extends React.Component impleme public componentWillUnmount(): void { this._async.dispose(); this._events.dispose(); + this._resizeObserver?.disconnect(); } public render(): JSX.Element | null { @@ -310,9 +312,27 @@ export class PanelBase extends React.Component impleme ); } + private _createResizeObserver(callback: ResizeObserverCallback): ResizeObserver | null { + const doc = getDocumentEx(this.context); + let resizeObserver: ResizeObserver | null = null; + + if (doc?.defaultView?.ResizeObserver) { + resizeObserver = new doc.defaultView.ResizeObserver(callback); + } + + return resizeObserver; + } + // Allow the user to scroll within the panel but not on the body private _allowScrollOnPanel = (elt: HTMLDivElement | null): void => { + this._resizeObserver = this._createResizeObserver(entries => { + if (entries.length > 0 && entries[0].target === elt) { + this._updateFooterPosition(); + } + }); + if (elt) { + this._resizeObserver?.observe(elt); if (this._allowTouchBodyScroll) { allowOverscrollOnElement(elt, this._events); } else { diff --git a/packages/scheme-utilities/CHANGELOG.json b/packages/scheme-utilities/CHANGELOG.json index e32b174e3b4114..286d4a7cce3894 100644 --- a/packages/scheme-utilities/CHANGELOG.json +++ b/packages/scheme-utilities/CHANGELOG.json @@ -1,6 +1,21 @@ { "name": "@fluentui/scheme-utilities", "entries": [ + { + "date": "Mon, 23 Dec 2024 07:22:58 GMT", + "tag": "@fluentui/scheme-utilities_v8.3.65", + "version": "8.3.65", + "comments": { + "patch": [ + { + "author": "beachball", + "package": "@fluentui/scheme-utilities", + "comment": "Bump @fluentui/theme to v2.6.64", + "commit": "7b4a3785c6c1d7c207602cad0a1795e3df9122ee" + } + ] + } + }, { "date": "Fri, 11 Oct 2024 16:51:54 GMT", "tag": "@fluentui/scheme-utilities_v8.3.64", diff --git a/packages/scheme-utilities/CHANGELOG.md b/packages/scheme-utilities/CHANGELOG.md index b29a08fa5eca2c..672ba9930d5931 100644 --- a/packages/scheme-utilities/CHANGELOG.md +++ b/packages/scheme-utilities/CHANGELOG.md @@ -1,9 +1,18 @@ # Change Log - @fluentui/scheme-utilities -This log was last generated on Fri, 11 Oct 2024 16:51:54 GMT and should not be manually modified. +This log was last generated on Mon, 23 Dec 2024 07:22:58 GMT and should not be manually modified. +## [8.3.65](https://github.com/microsoft/fluentui/tree/@fluentui/scheme-utilities_v8.3.65) + +Mon, 23 Dec 2024 07:22:58 GMT +[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/scheme-utilities_v8.3.64..@fluentui/scheme-utilities_v8.3.65) + +### Patches + +- Bump @fluentui/theme to v2.6.64 ([PR #33445](https://github.com/microsoft/fluentui/pull/33445) by beachball) + ## [8.3.64](https://github.com/microsoft/fluentui/tree/@fluentui/scheme-utilities_v8.3.64) Fri, 11 Oct 2024 16:51:54 GMT diff --git a/packages/scheme-utilities/package.json b/packages/scheme-utilities/package.json index 8c4ac73026bed8..6e9000458bf0f4 100644 --- a/packages/scheme-utilities/package.json +++ b/packages/scheme-utilities/package.json @@ -1,6 +1,6 @@ { "name": "@fluentui/scheme-utilities", - "version": "8.3.64", + "version": "8.3.65", "description": "Fluent UI React subtheme generator.", "main": "lib-commonjs/index.js", "module": "lib/index.js", @@ -27,7 +27,7 @@ "@fluentui/scripts-webpack": "*" }, "dependencies": { - "@fluentui/theme": "^2.6.63", + "@fluentui/theme": "^2.6.64", "@fluentui/set-version": "^8.2.23", "tslib": "^2.1.0" }, diff --git a/packages/storybook/package.json b/packages/storybook/package.json index 84dddf49a54ff0..17380fd3719ae5 100644 --- a/packages/storybook/package.json +++ b/packages/storybook/package.json @@ -22,11 +22,11 @@ "@fluentui/scripts-tasks": "*" }, "dependencies": { - "@fluentui/react": "^8.122.1", - "@fluentui/theme": "^2.6.63", + "@fluentui/react": "^8.122.3", + "@fluentui/theme": "^2.6.64", "@storybook/addon-essentials": "7.6.20", - "@fluentui/azure-themes": "^8.6.114", - "@fluentui/theme-samples": "^8.7.190", + "@fluentui/azure-themes": "^8.6.116", + "@fluentui/theme-samples": "^8.7.192", "tslib": "^2.1.0" }, "peerDependencies": { diff --git a/packages/storybook/src/decorators/index.ts b/packages/storybook/src/decorators/index.ts index e3cc4b5aedf728..55f30fc85de537 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/style-utilities/CHANGELOG.json b/packages/style-utilities/CHANGELOG.json index 73a4347b05adc2..bd87297069b25f 100644 --- a/packages/style-utilities/CHANGELOG.json +++ b/packages/style-utilities/CHANGELOG.json @@ -1,6 +1,21 @@ { "name": "@fluentui/style-utilities", "entries": [ + { + "date": "Mon, 23 Dec 2024 07:22:58 GMT", + "tag": "@fluentui/style-utilities_v8.11.6", + "version": "8.11.6", + "comments": { + "patch": [ + { + "author": "beachball", + "package": "@fluentui/style-utilities", + "comment": "Bump @fluentui/theme to v2.6.64", + "commit": "7b4a3785c6c1d7c207602cad0a1795e3df9122ee" + } + ] + } + }, { "date": "Fri, 13 Dec 2024 07:23:12 GMT", "tag": "@fluentui/style-utilities_v8.11.5", diff --git a/packages/style-utilities/CHANGELOG.md b/packages/style-utilities/CHANGELOG.md index 83f44fad2be291..6f6a079756c1b9 100644 --- a/packages/style-utilities/CHANGELOG.md +++ b/packages/style-utilities/CHANGELOG.md @@ -1,9 +1,18 @@ # Change Log - @fluentui/style-utilities -This log was last generated on Fri, 13 Dec 2024 07:23:12 GMT and should not be manually modified. +This log was last generated on Mon, 23 Dec 2024 07:22:58 GMT and should not be manually modified. +## [8.11.6](https://github.com/microsoft/fluentui/tree/@fluentui/style-utilities_v8.11.6) + +Mon, 23 Dec 2024 07:22:58 GMT +[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/style-utilities_v8.11.5..@fluentui/style-utilities_v8.11.6) + +### Patches + +- Bump @fluentui/theme to v2.6.64 ([PR #33445](https://github.com/microsoft/fluentui/pull/33445) by beachball) + ## [8.11.5](https://github.com/microsoft/fluentui/tree/@fluentui/style-utilities_v8.11.5) Fri, 13 Dec 2024 07:23:12 GMT diff --git a/packages/style-utilities/package.json b/packages/style-utilities/package.json index cb3191659822ca..334e74ff563274 100644 --- a/packages/style-utilities/package.json +++ b/packages/style-utilities/package.json @@ -1,6 +1,6 @@ { "name": "@fluentui/style-utilities", - "version": "8.11.5", + "version": "8.11.6", "description": "Styling helpers for Fluent UI React.", "repository": { "type": "git", @@ -32,7 +32,7 @@ }, "dependencies": { "@microsoft/load-themed-styles": "^1.10.26", - "@fluentui/theme": "^2.6.63", + "@fluentui/theme": "^2.6.64", "@fluentui/merge-styles": "^8.6.13", "@fluentui/set-version": "^8.2.23", "@fluentui/utilities": "^8.15.19", diff --git a/packages/theme-samples/CHANGELOG.json b/packages/theme-samples/CHANGELOG.json index f94148ab5eeb53..9e5ccd6edbe880 100644 --- a/packages/theme-samples/CHANGELOG.json +++ b/packages/theme-samples/CHANGELOG.json @@ -1,6 +1,42 @@ { "name": "@fluentui/theme-samples", "entries": [ + { + "date": "Mon, 30 Dec 2024 07:21:29 GMT", + "tag": "@fluentui/theme-samples_v8.7.192", + "version": "8.7.192", + "comments": { + "patch": [ + { + "author": "beachball", + "package": "@fluentui/theme-samples", + "comment": "Bump @fluentui/react to v8.122.3", + "commit": "681a95a732fe385a70b8d4537dc489acbcd1c21e" + } + ] + } + }, + { + "date": "Mon, 23 Dec 2024 07:22:58 GMT", + "tag": "@fluentui/theme-samples_v8.7.191", + "version": "8.7.191", + "comments": { + "patch": [ + { + "author": "beachball", + "package": "@fluentui/theme-samples", + "comment": "Bump @fluentui/react to v8.122.2", + "commit": "7b4a3785c6c1d7c207602cad0a1795e3df9122ee" + }, + { + "author": "beachball", + "package": "@fluentui/theme-samples", + "comment": "Bump @fluentui/scheme-utilities to v8.3.65", + "commit": "7b4a3785c6c1d7c207602cad0a1795e3df9122ee" + } + ] + } + }, { "date": "Fri, 13 Dec 2024 07:23:12 GMT", "tag": "@fluentui/theme-samples_v8.7.190", diff --git a/packages/theme-samples/CHANGELOG.md b/packages/theme-samples/CHANGELOG.md index 065794127c86cd..5e5d31b0542f02 100644 --- a/packages/theme-samples/CHANGELOG.md +++ b/packages/theme-samples/CHANGELOG.md @@ -1,9 +1,28 @@ # Change Log - @fluentui/theme-samples -This log was last generated on Fri, 13 Dec 2024 07:23:12 GMT and should not be manually modified. +This log was last generated on Mon, 30 Dec 2024 07:21:29 GMT and should not be manually modified. +## [8.7.192](https://github.com/microsoft/fluentui/tree/@fluentui/theme-samples_v8.7.192) + +Mon, 30 Dec 2024 07:21:29 GMT +[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/theme-samples_v8.7.191..@fluentui/theme-samples_v8.7.192) + +### Patches + +- Bump @fluentui/react to v8.122.3 ([PR #33520](https://github.com/microsoft/fluentui/pull/33520) by beachball) + +## [8.7.191](https://github.com/microsoft/fluentui/tree/@fluentui/theme-samples_v8.7.191) + +Mon, 23 Dec 2024 07:22:58 GMT +[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/theme-samples_v8.7.190..@fluentui/theme-samples_v8.7.191) + +### Patches + +- Bump @fluentui/react to v8.122.2 ([PR #33445](https://github.com/microsoft/fluentui/pull/33445) by beachball) +- Bump @fluentui/scheme-utilities to v8.3.65 ([PR #33445](https://github.com/microsoft/fluentui/pull/33445) by beachball) + ## [8.7.190](https://github.com/microsoft/fluentui/tree/@fluentui/theme-samples_v8.7.190) Fri, 13 Dec 2024 07:23:12 GMT diff --git a/packages/theme-samples/package.json b/packages/theme-samples/package.json index da948c6ead8017..098b07adad4e2d 100644 --- a/packages/theme-samples/package.json +++ b/packages/theme-samples/package.json @@ -1,6 +1,6 @@ { "name": "@fluentui/theme-samples", - "version": "8.7.190", + "version": "8.7.192", "description": "Sample themes for use with Fabric components.", "main": "lib-commonjs/index.js", "module": "lib/index.js", @@ -26,9 +26,9 @@ "@fluentui/scripts-webpack": "*" }, "dependencies": { - "@fluentui/react": "^8.122.1", + "@fluentui/react": "^8.122.3", "@fluentui/set-version": "^8.2.23", - "@fluentui/scheme-utilities": "^8.3.64", + "@fluentui/scheme-utilities": "^8.3.65", "tslib": "^2.1.0" }, "exports": { diff --git a/packages/theme/CHANGELOG.json b/packages/theme/CHANGELOG.json index 94b391e3427fd0..383c73f51fa8f5 100644 --- a/packages/theme/CHANGELOG.json +++ b/packages/theme/CHANGELOG.json @@ -1,6 +1,21 @@ { "name": "@fluentui/theme", "entries": [ + { + "date": "Mon, 23 Dec 2024 07:22:58 GMT", + "tag": "@fluentui/theme_v2.6.64", + "version": "2.6.64", + "comments": { + "patch": [ + { + "author": "olfedias@microsoft.com", + "package": "@fluentui/theme", + "commit": "dc7bb663e3d93a19b611cf1892556d69c57b1269", + "comment": "chore: remove usage of \"export *\"" + } + ] + } + }, { "date": "Tue, 05 Nov 2024 00:59:52 GMT", "tag": "@fluentui/theme_v2.6.63", diff --git a/packages/theme/CHANGELOG.md b/packages/theme/CHANGELOG.md index 3bc704261e6914..a6e4242eb6dcef 100644 --- a/packages/theme/CHANGELOG.md +++ b/packages/theme/CHANGELOG.md @@ -1,9 +1,18 @@ # Change Log - @fluentui/theme -This log was last generated on Fri, 11 Oct 2024 16:51:54 GMT and should not be manually modified. +This log was last generated on Mon, 23 Dec 2024 07:22:58 GMT and should not be manually modified. +## [2.6.64](https://github.com/microsoft/fluentui/tree/@fluentui/theme_v2.6.64) + +Mon, 23 Dec 2024 07:22:58 GMT +[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/theme_v2.6.63..@fluentui/theme_v2.6.64) + +### Patches + +- chore: remove usage of "export *" ([PR #33448](https://github.com/microsoft/fluentui/pull/33448) by olfedias@microsoft.com) + ## [2.6.63](https://github.com/microsoft/fluentui/tree/@fluentui/theme_v2.6.63) Fri, 11 Oct 2024 16:51:54 GMT diff --git a/packages/theme/package.json b/packages/theme/package.json index f5c8396cf6f5a2..268aac8ec4cfec 100644 --- a/packages/theme/package.json +++ b/packages/theme/package.json @@ -1,6 +1,6 @@ { "name": "@fluentui/theme", - "version": "2.6.63", + "version": "2.6.64", "description": "Basic building blocks for Fluent UI React Component themes", "main": "lib-commonjs/index.js", "module": "lib/index.js", diff --git a/packages/theme/src/colors/index.ts b/packages/theme/src/colors/index.ts index ff7e7f43d24a0d..8afd234044ebaf 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 229c767e57e853..9e31eda4aced83 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 110f20d5a14a22..a0e6ce9e641c0f 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 18bf112b87acc8..d92e4cda944489 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 599be1d8215cb5..59273db9a46360 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 fd97dbeb9b772e..ff707884d5a388 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 97e5a3bad18caa..8e7580a51cb20f 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/CHANGELOG.json b/packages/web-components/CHANGELOG.json index 2265505fd7569a..b815e91343186c 100644 --- a/packages/web-components/CHANGELOG.json +++ b/packages/web-components/CHANGELOG.json @@ -1,6 +1,21 @@ { "name": "@fluentui/web-components", "entries": [ + { + "date": "Mon, 23 Dec 2024 04:07:55 GMT", + "tag": "@fluentui/web-components_v3.0.0-beta.75", + "version": "3.0.0-beta.75", + "comments": { + "prerelease": [ + { + "author": "863023+radium-v@users.noreply.github.com", + "package": "@fluentui/web-components", + "commit": "622c4aacdb5a1ab601287a9adb1064a640388f4f", + "comment": "fix tooltip positioning styles for 'below-end' option" + } + ] + } + }, { "date": "Fri, 06 Dec 2024 04:07:47 GMT", "tag": "@fluentui/web-components_v3.0.0-beta.74", diff --git a/packages/web-components/CHANGELOG.md b/packages/web-components/CHANGELOG.md index 53250ca5894246..c166b3f8f93943 100644 --- a/packages/web-components/CHANGELOG.md +++ b/packages/web-components/CHANGELOG.md @@ -1,9 +1,18 @@ # Change Log - @fluentui/web-components -This log was last generated on Fri, 06 Dec 2024 04:07:47 GMT and should not be manually modified. +This log was last generated on Mon, 23 Dec 2024 04:07:55 GMT and should not be manually modified. +## [3.0.0-beta.75](https://github.com/microsoft/fluentui/tree/@fluentui/web-components_v3.0.0-beta.75) + +Mon, 23 Dec 2024 04:07:55 GMT +[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/web-components_v3.0.0-beta.74..@fluentui/web-components_v3.0.0-beta.75) + +### Changes + +- fix tooltip positioning styles for 'below-end' option ([PR #33494](https://github.com/microsoft/fluentui/pull/33494) by 863023+radium-v@users.noreply.github.com) + ## [3.0.0-beta.74](https://github.com/microsoft/fluentui/tree/@fluentui/web-components_v3.0.0-beta.74) Fri, 06 Dec 2024 04:07:47 GMT diff --git a/packages/web-components/package.json b/packages/web-components/package.json index 7ecb89c6c89e4e..489e639ac1b4bb 100644 --- a/packages/web-components/package.json +++ b/packages/web-components/package.json @@ -1,7 +1,7 @@ { "name": "@fluentui/web-components", "description": "A library of Fluent Web Components", - "version": "3.0.0-beta.74", + "version": "3.0.0-beta.75", "author": { "name": "Microsoft", "url": "https://discord.gg/FcSNfg4" diff --git a/packages/web-components/src/tooltip/tooltip.stories.ts b/packages/web-components/src/tooltip/tooltip.stories.ts index 29040e851e0bda..9a1de32d562e76 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 3b9327aaabd37c..70fc8548ecab6e 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 d216c533aa2688..1705a9e6cab06f 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 2731c4643b3e6b..b184f7ce143e17 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 a45c1abc1acc5b..31f07cb8d3396b 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2486,10 +2486,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" @@ -2502,7 +2502,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" @@ -17480,9 +17480,9 @@ nan@^2.12.1: integrity sha512-8ZtvEnA2c5aYCZYd1cvgdnU6cqwixRoYg70xPLWUws5ORTa/lnw+u4amixRS/Ac5U5mQVgp9pnlSUnbNWFaWZQ== nanoid@^3.3.6, nanoid@^3.3.7: - version "3.3.7" - resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.3.7.tgz#d0c301a691bc8d54efa0a2226ccf3fe2fd656bd8" - integrity sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g== + version "3.3.8" + resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.3.8.tgz#b1be3030bee36aaff18bacb375e5cce521684baf" + integrity sha512-WNLf5Sd8oZxOm+TzppcYk8gVOgP+l58xNy58D0nbUnOxOWRWvlcCV4kUF7ltmI6PsrLl/BgKEyS4mqsGChFN0w== nanomatch@^1.2.9: version "1.2.13" @@ -21571,7 +21571,7 @@ string-length@^5.0.1: char-regex "^2.0.0" strip-ansi "^7.0.1" -"string-width-cjs@npm:string-width@^4.2.0", string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3: +"string-width-cjs@npm:string-width@^4.2.0": version "4.2.3" resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010" integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g== @@ -21606,6 +21606,15 @@ string-width@^3.0.0, string-width@^3.1.0: is-fullwidth-code-point "^2.0.0" strip-ansi "^5.1.0" +string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3: + version "4.2.3" + resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010" + integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g== + dependencies: + emoji-regex "^8.0.0" + is-fullwidth-code-point "^3.0.0" + strip-ansi "^6.0.1" + string-width@^5.0.1, string-width@^5.1.2: version "5.1.2" resolved "https://registry.yarnpkg.com/string-width/-/string-width-5.1.2.tgz#14f8daec6d81e7221d2a357e668cab73bdbca794" @@ -21706,7 +21715,7 @@ stringify-object@^3.3.0: is-obj "^1.0.1" is-regexp "^1.0.0" -"strip-ansi-cjs@npm:strip-ansi@^6.0.1", strip-ansi@^6.0.0, strip-ansi@^6.0.1: +"strip-ansi-cjs@npm:strip-ansi@^6.0.1": version "6.0.1" resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9" integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A== @@ -21741,6 +21750,13 @@ strip-ansi@^5.0.0, strip-ansi@^5.1.0, strip-ansi@^5.2.0: dependencies: ansi-regex "^4.1.0" +strip-ansi@^6.0.0, strip-ansi@^6.0.1: + version "6.0.1" + resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9" + integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A== + dependencies: + ansi-regex "^5.0.1" + strip-ansi@^7.0.1, strip-ansi@^7.1.0: version "7.1.0" resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-7.1.0.tgz#d5b6568ca689d8561370b0707685d22434faff45" @@ -22022,9 +22038,9 @@ syncpack@10.6.1: ts-toolbelt "9.6.0" systeminformation@^5.3.3: - version "5.22.8" - resolved "https://registry.yarnpkg.com/systeminformation/-/systeminformation-5.22.8.tgz#403126772defa1d2a2e4cf039e9f6d57d3f1f3ba" - integrity sha512-F1iWQ+PSfOzvLMGh2UXASaWLDq5o+1h1db13Kddl6ojcQ47rsJhpMtRrmBXfTA5QJgutC4KV67YRmXLuroIxrA== + version "5.23.14" + resolved "https://registry.yarnpkg.com/systeminformation/-/systeminformation-5.23.14.tgz#f8b0064cd62710535375c95f167d99acc5c68854" + integrity sha512-mUHEuDQJJOpphvjcIrTY0iwLnoNo/qotr6SuN7v0ANOO0L3j89mfCrEuIVheS/9S9KGRt4Osqxh9GoF7BX49UA== tabbable@^6.2.0: version "6.2.0" @@ -22617,6 +22633,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" @@ -22805,10 +22840,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" @@ -24039,7 +24074,7 @@ workspace-tools@^0.27.0: js-yaml "^4.1.0" micromatch "^4.0.0" -"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0", wrap-ansi@^7.0.0: +"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0": version "7.0.0" resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43" integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q== @@ -24074,6 +24109,15 @@ wrap-ansi@^6.2.0: string-width "^4.1.0" strip-ansi "^6.0.0" +wrap-ansi@^7.0.0: + version "7.0.0" + resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43" + integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q== + dependencies: + ansi-styles "^4.0.0" + string-width "^4.1.0" + strip-ansi "^6.0.0" + wrap-ansi@^8.1.0: version "8.1.0" resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-8.1.0.tgz#56dc22368ee570face1b49819975d9b9a5ead214"