From 8abf4d7bbe8a190eac83bc0b89541335a44d9d76 Mon Sep 17 00:00:00 2001 From: Esteban Munoz Date: Tue, 21 Jun 2022 12:35:42 -0600 Subject: [PATCH 1/5] adding Fragment fix --- .../src/components/AvatarGroup/useAvatarGroup.tsx | 13 +++---------- .../AvatarGroupItem/useAvatarGroupItem.ts | 8 +------- 2 files changed, 4 insertions(+), 17 deletions(-) diff --git a/packages/react-components/react-avatar/src/components/AvatarGroup/useAvatarGroup.tsx b/packages/react-components/react-avatar/src/components/AvatarGroup/useAvatarGroup.tsx index 048a3eeffd8ab0..0ece6c95e745a4 100644 --- a/packages/react-components/react-avatar/src/components/AvatarGroup/useAvatarGroup.tsx +++ b/packages/react-components/react-avatar/src/components/AvatarGroup/useAvatarGroup.tsx @@ -1,5 +1,4 @@ import * as React from 'react'; -import { AvatarGroupItem } from '../AvatarGroupItem/AvatarGroupItem'; import { getNativeElementProps, resolveShorthand } from '@fluentui/react-utilities'; import { MoreHorizontalRegular } from '@fluentui/react-icons'; import { PopoverSurface } from '@fluentui/react-popover'; @@ -17,15 +16,9 @@ import type { AvatarGroupProps, AvatarGroupState } from './AvatarGroup.types'; export const useAvatarGroup_unstable = (props: AvatarGroupProps, ref: React.Ref): AvatarGroupState => { const { children, layout = 'spread', maxAvatars = 5, size = defaultAvatarGroupSize } = props; const { overflowIndicator = size < 24 ? 'icon' : 'count' } = props; - const childrenArray = React.Children.toArray(children); - - if ( - process.env.NODE_ENV !== 'production' && - childrenArray.find(child => React.isValidElement(child) && child.type !== AvatarGroupItem) - ) { - // eslint-disable-next-line no-console - console.warn("AvatarGroup's children must be of type AvatarGroupItems."); - } + const childrenArray = React.Children.toArray( + React.isValidElement(children) && children.type === React.Fragment ? children.props.children : children, + ); let rootChildren = childrenArray; let overflowChildren; diff --git a/packages/react-components/react-avatar/src/components/AvatarGroupItem/useAvatarGroupItem.ts b/packages/react-components/react-avatar/src/components/AvatarGroupItem/useAvatarGroupItem.ts index 7c4c4121539877..059de3e01a8d2e 100644 --- a/packages/react-components/react-avatar/src/components/AvatarGroupItem/useAvatarGroupItem.ts +++ b/packages/react-components/react-avatar/src/components/AvatarGroupItem/useAvatarGroupItem.ts @@ -3,7 +3,7 @@ import { Avatar } from '../Avatar/Avatar'; import { AvatarGroupContext } from '../../contexts/AvatarGroupContext'; import { defaultAvatarGroupSize } from '../AvatarGroup/useAvatarGroup'; import { resolveShorthand } from '@fluentui/react-utilities'; -import { useContextSelector, useHasParentContext } from '@fluentui/react-context-selector'; +import { useContextSelector } from '@fluentui/react-context-selector'; import type { AvatarGroupItemProps, AvatarGroupItemState } from './AvatarGroupItem.types'; /** @@ -26,12 +26,6 @@ export const useAvatarGroupItem_unstable = ( // Since the primary slot is not an intrinsic element, getPartitionedNativeProps cannot be used here. const { style, className, ...avatarSlotProps } = props; const size = groupSize ?? defaultAvatarGroupSize; - const hasAvatarGroupContext = useHasParentContext(AvatarGroupContext); - - if (process.env.NODE_ENV !== 'production' && !hasAvatarGroupContext) { - // eslint-disable-next-line no-console - console.warn('AvatarGroupItem must only be used inside an AvatarGroup component.'); - } return { nonOverflowAvatarsCount: nonOverflowAvatarsCount ?? 1, From 19f5010ca64f659b9c0e10514861be080cf4e511 Mon Sep 17 00:00:00 2001 From: Esteban Munoz Date: Tue, 21 Jun 2022 12:39:30 -0600 Subject: [PATCH 2/5] change files --- ...-react-avatar-e3c57ed3-0a50-418f-bcc8-0ce6273ff0b2.json | 7 +++++++ 1 file changed, 7 insertions(+) create mode 100644 change/@fluentui-react-avatar-e3c57ed3-0a50-418f-bcc8-0ce6273ff0b2.json diff --git a/change/@fluentui-react-avatar-e3c57ed3-0a50-418f-bcc8-0ce6273ff0b2.json b/change/@fluentui-react-avatar-e3c57ed3-0a50-418f-bcc8-0ce6273ff0b2.json new file mode 100644 index 00000000000000..ec198509da248e --- /dev/null +++ b/change/@fluentui-react-avatar-e3c57ed3-0a50-418f-bcc8-0ce6273ff0b2.json @@ -0,0 +1,7 @@ +{ + "type": "none", + "comment": "fix: Remove AvatarGroup and AvatarGroupItem warnings since they break the composition pattern and fixed issue when the children in AvatarGroup is a Fragment containing the AvatarGroupItems.", + "packageName": "@fluentui/react-avatar", + "email": "esteban.230@hotmail.com", + "dependentChangeType": "none" +} From e39290043f7a6b4b1db49747c8769365be35ded1 Mon Sep 17 00:00:00 2001 From: Esteban Munoz Date: Tue, 21 Jun 2022 13:16:21 -0600 Subject: [PATCH 3/5] updating yarn.lock --- yarn.lock | 70 +++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 70 insertions(+) diff --git a/yarn.lock b/yarn.lock index 713bd639553e0a..20659734a1441a 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1652,11 +1652,81 @@ "@uifabric/set-version" "^7.0.23" tslib "^1.10.0" +"@fluentui/react-alert@9.0.0-beta.2": + version "9.0.0-beta.2" + resolved "https://registry.yarnpkg.com/@fluentui/react-alert/-/react-alert-9.0.0-beta.2.tgz#ca5ec4dc1c33a4aefe9f0651ce8712c4e7a659f4" + integrity sha512-DoR+kco7T/Jv3tRgl2pcYxP+UHdAOGiH49f3CMN/G5fitdPGi63jTTGI9JAFK9B6GlPFiYNh+OvtHIn3zu47Bw== + dependencies: + "@fluentui/react-button" "9.0.0-rc.13" + "@fluentui/react-icons" "^2.0.166-rc.3" + "@fluentui/react-theme" "9.0.0-rc.9" + "@fluentui/react-utilities" "9.0.0-rc.10" + "@griffel/react" "1.1.0" + tslib "^2.1.0" + +"@fluentui/react-button@9.0.0-rc.13": + version "9.0.0-rc.13" + resolved "https://registry.yarnpkg.com/@fluentui/react-button/-/react-button-9.0.0-rc.13.tgz#8aaaec51c86a5c2f657847d40040a51882ab4e9a" + integrity sha512-PUV9AidZzwFboKD+GHGx0Qfmg6Z2KgZ42dCCjrQVHx6QysHN3vTLY0SwUJIWbeu9RNucZAeqt6ZHOgL2zKqFwQ== + dependencies: + "@fluentui/keyboard-keys" "9.0.0-rc.6" + "@fluentui/react-aria" "9.0.0-rc.10" + "@fluentui/react-icons" "^2.0.166-rc.3" + "@fluentui/react-tabster" "9.0.0-rc.13" + "@fluentui/react-theme" "9.0.0-rc.9" + "@fluentui/react-utilities" "9.0.0-rc.10" + "@griffel/react" "1.1.0" + tslib "^2.1.0" + +"@fluentui/react-icons@^2.0.166-rc.3": + version "2.0.166-rc.3" + resolved "https://registry.yarnpkg.com/@fluentui/react-icons/-/react-icons-2.0.166-rc.3.tgz#6a66d104a4809ca9da1982f895bc24abb624e342" + integrity sha512-mhTti5DcCvG/UxRD+/P5Qjdo/QDOE57eRcRBVooOpfO2N1Q+9sE44NYczOeOHpV2AufNqomX0QYf5iPYZ1lEtg== + "@fluentui/react-icons@^2.0.172-rc.8": version "2.0.172-rc.8" resolved "https://registry.yarnpkg.com/@fluentui/react-icons/-/react-icons-2.0.172-rc.8.tgz#5daa62d1b11df87cdf26cbfd5e3aa7328e367e74" integrity sha512-vXhOcnlsYA/XgiaiPo4Cyp5GeI+CZE2zRVBNLkygemrafKnboLwUh9dLb/qC4YLsQ4DTaYPrvFq4cKujXBhl4w== +"@fluentui/react-select@9.0.0-beta.2": + version "9.0.0-beta.2" + resolved "https://registry.yarnpkg.com/@fluentui/react-select/-/react-select-9.0.0-beta.2.tgz#35458523e77697ce935ef569c95de5d08a1707cf" + integrity sha512-3gs9FmSNj8S7pfQCCosHYQEu2T2uaxw4lgxnEDqVjviAjzf5I8uYgpxxD8uaiWtEeCoCjNFJoeznZxr6qyuWjA== + dependencies: + "@fluentui/react-icons" "^2.0.166-rc.3" + "@fluentui/react-theme" "9.0.0-rc.9" + "@fluentui/react-utilities" "9.0.0-rc.10" + "@griffel/react" "1.1.0" + tslib "^2.1.0" + +"@fluentui/react-shared-contexts@9.0.0-rc.10": + version "9.0.0-rc.10" + resolved "https://registry.yarnpkg.com/@fluentui/react-shared-contexts/-/react-shared-contexts-9.0.0-rc.10.tgz#5646c48364298ba2db7d41d5c39c63aee432e3fb" + integrity sha512-Wy+0sSDhnb2Wcm/NBljbYX9zyy3OonuXxJcBXXWBPh7DyuzR/ziLVdD3VOUJd7IwBZSIVVh7bFY9r7jQDBGemw== + dependencies: + "@fluentui/react-theme" "9.0.0-rc.9" + tslib "^2.1.0" + +"@fluentui/react-tabster@9.0.0-rc.13": + version "9.0.0-rc.13" + resolved "https://registry.yarnpkg.com/@fluentui/react-tabster/-/react-tabster-9.0.0-rc.13.tgz#49e3817e408f13b942fe8e16c9b10fdebe93032a" + integrity sha512-F1IkJd9HFtpE9eU70asSafZ6P+f5dh12sLAw2ck5YJU8KmTpGdG38fSgtukwbjtoK3JTNMHa+5DEuU5HTlJLqA== + dependencies: + "@fluentui/react-shared-contexts" "9.0.0-rc.10" + "@fluentui/react-theme" "9.0.0-rc.9" + "@fluentui/react-utilities" "9.0.0-rc.10" + "@griffel/react" "1.1.0" + keyborg "^1.1.0" + tabster "^1.4.0" + tslib "^2.1.0" + +"@fluentui/react-theme@9.0.0-rc.9": + version "9.0.0-rc.9" + resolved "https://registry.yarnpkg.com/@fluentui/react-theme/-/react-theme-9.0.0-rc.9.tgz#037d5016f6469ed780bca027470463aa76f9dd7c" + integrity sha512-Q7W7oqzB4FtldkALUXFx9lyN8e5mPWIKIqDr2NNtzbKTw+n2mcrA7ipcfUPO+9JsFTZPYMASdmHmwDoVdyCRLg== + dependencies: + tslib "^2.1.0" + "@griffel/babel-preset@1.3.1", "@griffel/babel-preset@^1.3.1": version "1.3.1" resolved "https://registry.yarnpkg.com/@griffel/babel-preset/-/babel-preset-1.3.1.tgz#a3bd339fa32c5df5f72c944cae0960e470c48f10" From 1d5e4ef59f47a3b13366a22f9129d30442abfcb6 Mon Sep 17 00:00:00 2001 From: Esteban Munoz Date: Tue, 21 Jun 2022 13:20:16 -0600 Subject: [PATCH 4/5] updating tabster in react-avatar --- packages/react-components/react-avatar/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-components/react-avatar/package.json b/packages/react-components/react-avatar/package.json index e92bc782949334..0e20f1555fd8dd 100644 --- a/packages/react-components/react-avatar/package.json +++ b/packages/react-components/react-avatar/package.json @@ -37,7 +37,7 @@ "@fluentui/react-context-selector": "9.0.0-rc.10", "@fluentui/react-icons": "^2.0.172-rc.8", "@fluentui/react-popover": "9.0.0-rc.14", - "@fluentui/react-tabster": "9.0.0-rc.13", + "@fluentui/react-tabster": "9.0.0-rc.14", "@fluentui/react-tooltip": "9.0.0-rc.14", "@fluentui/react-theme": "9.0.0-rc.10", "@fluentui/react-shared-contexts": "9.0.0-rc.11", From 292b883176e0aa3d1731c25866efb61962487891 Mon Sep 17 00:00:00 2001 From: Esteban Munoz Date: Wed, 22 Jun 2022 10:19:46 -0600 Subject: [PATCH 5/5] updating yarn lock file --- yarn.lock | 70 ------------------------------------------------------- 1 file changed, 70 deletions(-) diff --git a/yarn.lock b/yarn.lock index 20659734a1441a..713bd639553e0a 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1652,81 +1652,11 @@ "@uifabric/set-version" "^7.0.23" tslib "^1.10.0" -"@fluentui/react-alert@9.0.0-beta.2": - version "9.0.0-beta.2" - resolved "https://registry.yarnpkg.com/@fluentui/react-alert/-/react-alert-9.0.0-beta.2.tgz#ca5ec4dc1c33a4aefe9f0651ce8712c4e7a659f4" - integrity sha512-DoR+kco7T/Jv3tRgl2pcYxP+UHdAOGiH49f3CMN/G5fitdPGi63jTTGI9JAFK9B6GlPFiYNh+OvtHIn3zu47Bw== - dependencies: - "@fluentui/react-button" "9.0.0-rc.13" - "@fluentui/react-icons" "^2.0.166-rc.3" - "@fluentui/react-theme" "9.0.0-rc.9" - "@fluentui/react-utilities" "9.0.0-rc.10" - "@griffel/react" "1.1.0" - tslib "^2.1.0" - -"@fluentui/react-button@9.0.0-rc.13": - version "9.0.0-rc.13" - resolved "https://registry.yarnpkg.com/@fluentui/react-button/-/react-button-9.0.0-rc.13.tgz#8aaaec51c86a5c2f657847d40040a51882ab4e9a" - integrity sha512-PUV9AidZzwFboKD+GHGx0Qfmg6Z2KgZ42dCCjrQVHx6QysHN3vTLY0SwUJIWbeu9RNucZAeqt6ZHOgL2zKqFwQ== - dependencies: - "@fluentui/keyboard-keys" "9.0.0-rc.6" - "@fluentui/react-aria" "9.0.0-rc.10" - "@fluentui/react-icons" "^2.0.166-rc.3" - "@fluentui/react-tabster" "9.0.0-rc.13" - "@fluentui/react-theme" "9.0.0-rc.9" - "@fluentui/react-utilities" "9.0.0-rc.10" - "@griffel/react" "1.1.0" - tslib "^2.1.0" - -"@fluentui/react-icons@^2.0.166-rc.3": - version "2.0.166-rc.3" - resolved "https://registry.yarnpkg.com/@fluentui/react-icons/-/react-icons-2.0.166-rc.3.tgz#6a66d104a4809ca9da1982f895bc24abb624e342" - integrity sha512-mhTti5DcCvG/UxRD+/P5Qjdo/QDOE57eRcRBVooOpfO2N1Q+9sE44NYczOeOHpV2AufNqomX0QYf5iPYZ1lEtg== - "@fluentui/react-icons@^2.0.172-rc.8": version "2.0.172-rc.8" resolved "https://registry.yarnpkg.com/@fluentui/react-icons/-/react-icons-2.0.172-rc.8.tgz#5daa62d1b11df87cdf26cbfd5e3aa7328e367e74" integrity sha512-vXhOcnlsYA/XgiaiPo4Cyp5GeI+CZE2zRVBNLkygemrafKnboLwUh9dLb/qC4YLsQ4DTaYPrvFq4cKujXBhl4w== -"@fluentui/react-select@9.0.0-beta.2": - version "9.0.0-beta.2" - resolved "https://registry.yarnpkg.com/@fluentui/react-select/-/react-select-9.0.0-beta.2.tgz#35458523e77697ce935ef569c95de5d08a1707cf" - integrity sha512-3gs9FmSNj8S7pfQCCosHYQEu2T2uaxw4lgxnEDqVjviAjzf5I8uYgpxxD8uaiWtEeCoCjNFJoeznZxr6qyuWjA== - dependencies: - "@fluentui/react-icons" "^2.0.166-rc.3" - "@fluentui/react-theme" "9.0.0-rc.9" - "@fluentui/react-utilities" "9.0.0-rc.10" - "@griffel/react" "1.1.0" - tslib "^2.1.0" - -"@fluentui/react-shared-contexts@9.0.0-rc.10": - version "9.0.0-rc.10" - resolved "https://registry.yarnpkg.com/@fluentui/react-shared-contexts/-/react-shared-contexts-9.0.0-rc.10.tgz#5646c48364298ba2db7d41d5c39c63aee432e3fb" - integrity sha512-Wy+0sSDhnb2Wcm/NBljbYX9zyy3OonuXxJcBXXWBPh7DyuzR/ziLVdD3VOUJd7IwBZSIVVh7bFY9r7jQDBGemw== - dependencies: - "@fluentui/react-theme" "9.0.0-rc.9" - tslib "^2.1.0" - -"@fluentui/react-tabster@9.0.0-rc.13": - version "9.0.0-rc.13" - resolved "https://registry.yarnpkg.com/@fluentui/react-tabster/-/react-tabster-9.0.0-rc.13.tgz#49e3817e408f13b942fe8e16c9b10fdebe93032a" - integrity sha512-F1IkJd9HFtpE9eU70asSafZ6P+f5dh12sLAw2ck5YJU8KmTpGdG38fSgtukwbjtoK3JTNMHa+5DEuU5HTlJLqA== - dependencies: - "@fluentui/react-shared-contexts" "9.0.0-rc.10" - "@fluentui/react-theme" "9.0.0-rc.9" - "@fluentui/react-utilities" "9.0.0-rc.10" - "@griffel/react" "1.1.0" - keyborg "^1.1.0" - tabster "^1.4.0" - tslib "^2.1.0" - -"@fluentui/react-theme@9.0.0-rc.9": - version "9.0.0-rc.9" - resolved "https://registry.yarnpkg.com/@fluentui/react-theme/-/react-theme-9.0.0-rc.9.tgz#037d5016f6469ed780bca027470463aa76f9dd7c" - integrity sha512-Q7W7oqzB4FtldkALUXFx9lyN8e5mPWIKIqDr2NNtzbKTw+n2mcrA7ipcfUPO+9JsFTZPYMASdmHmwDoVdyCRLg== - dependencies: - tslib "^2.1.0" - "@griffel/babel-preset@1.3.1", "@griffel/babel-preset@^1.3.1": version "1.3.1" resolved "https://registry.yarnpkg.com/@griffel/babel-preset/-/babel-preset-1.3.1.tgz#a3bd339fa32c5df5f72c944cae0960e470c48f10"