diff --git a/change/@fluentui-react-tree-9ce25cd9-37b5-4f07-8832-c69f0b2667b7.json b/change/@fluentui-react-tree-9ce25cd9-37b5-4f07-8832-c69f0b2667b7.json new file mode 100644 index 00000000000000..04645be8cf9eff --- /dev/null +++ b/change/@fluentui-react-tree-9ce25cd9-37b5-4f07-8832-c69f0b2667b7.json @@ -0,0 +1,7 @@ +{ + "type": "minor", + "comment": "chore: deprecate flattenTree", + "packageName": "@fluentui/react-tree", + "email": "bernardo.sunderhus@gmail.com", + "dependentChangeType": "patch" +} diff --git a/packages/react-components/react-tree/library/etc/react-tree.api.md b/packages/react-components/react-tree/library/etc/react-tree.api.md index 210a53b0625064..88f3521446357f 100644 --- a/packages/react-components/react-tree/library/etc/react-tree.api.md +++ b/packages/react-components/react-tree/library/etc/react-tree.api.md @@ -34,10 +34,10 @@ import type { SelectionMode as SelectionMode_2 } from '@fluentui/react-utilities import type { Slot } from '@fluentui/react-utilities'; import type { SlotClassNames } from '@fluentui/react-utilities'; -// @public +// @public @deprecated (undocumented) export const flattenTree_unstable: (items: FlattenTreeItem[]) => FlattenedTreeItem[]; -// @public (undocumented) +// @public @deprecated (undocumented) export type FlattenTreeItem = Omit & { value: TreeItemValue; subtree?: FlattenTreeItem[]; diff --git a/packages/react-components/react-tree/library/src/utils/flattenTree.ts b/packages/react-components/react-tree/library/src/utils/flattenTree.ts index 5812f933601804..84abc37f68238f 100644 --- a/packages/react-components/react-tree/library/src/utils/flattenTree.ts +++ b/packages/react-components/react-tree/library/src/utils/flattenTree.ts @@ -1,18 +1,27 @@ import { HeadlessFlatTreeItemProps } from '../FlatTree'; import { TreeItemProps, TreeItemValue } from '../TreeItem'; +/** + * @deprecated - deprecating in favor of user flattening its custom data structure on its own + */ export type FlattenTreeItem = Omit & { value: TreeItemValue; subtree?: FlattenTreeItem[]; }; +/** + * @deprecated - deprecating in favor of user flattening its custom data structure on its own + */ export type FlattenedTreeItem = HeadlessFlatTreeItemProps & Props; function flattenTreeRecursive( + // eslint-disable-next-line @typescript-eslint/no-deprecated items: FlattenTreeItem[], parent?: HeadlessFlatTreeItemProps & Props, level = 1, + // eslint-disable-next-line @typescript-eslint/no-deprecated ): FlattenedTreeItem[] { + // eslint-disable-next-line @typescript-eslint/no-deprecated return items.reduce[]>((acc, { subtree, ...item }, index) => { const flatTreeItem = { 'aria-level': level, @@ -20,6 +29,7 @@ function flattenTreeRecursive( 'aria-setsize': items.length, parentValue: parent?.value, ...item, + // eslint-disable-next-line @typescript-eslint/no-deprecated } as FlattenedTreeItem; acc.push(flatTreeItem); if (subtree !== undefined) { @@ -30,6 +40,9 @@ function flattenTreeRecursive( } /** + * + * @deprecated - deprecating in favor of user flattening its custom data structure on its own + * * Converts a nested structure to a flat one which can be consumed by `useFlatTreeItems` * @example * ```tsx @@ -71,5 +84,7 @@ function flattenTreeRecursive( */ // eslint-disable-next-line @typescript-eslint/naming-convention export const flattenTree_unstable = ( + // eslint-disable-next-line @typescript-eslint/no-deprecated items: FlattenTreeItem[], + // eslint-disable-next-line @typescript-eslint/no-deprecated ): FlattenedTreeItem[] => flattenTreeRecursive(items); diff --git a/packages/react-components/react-tree/stories/src/Tree/UseHeadlessFlatTree.stories.tsx b/packages/react-components/react-tree/stories/src/Tree/UseHeadlessFlatTree.stories.tsx index d30f4e6b0ecf73..c24cd5a5f68089 100644 --- a/packages/react-components/react-tree/stories/src/Tree/UseHeadlessFlatTree.stories.tsx +++ b/packages/react-components/react-tree/stories/src/Tree/UseHeadlessFlatTree.stories.tsx @@ -32,54 +32,6 @@ const flatTreeItems: FlatItem[] = [ { value: '2-1-1-1', parentValue: '2-1-1', content: 'Level 4, item 1' }, ]; -// // EXAMPLE OF NESTED TREE ITEMS BEING FLATTEN BY `flattenTree`: -// type Item = TreeItemProps & { content: React.ReactNode }; - -// const nestedTreeItems = [ -// { -// value: '1', -// content: <>level 1, item 1, -// subtree: [ -// { -// value: '1-1', -// content: <>level 2, item 1, -// }, -// { -// value: '1-2', -// content: <>level 2, item 2, -// }, -// { -// value: '1-3', -// content: <>level 2, item 3, -// }, -// ], -// }, -// { -// value: '2', -// content: <>level 1, item 2, -// subtree: [ -// { -// value: '2-1', -// content: <>level 2, item 1, -// subtree: [ -// { -// value: '2-1-1', -// content: <>level 3, item 1, -// subtree: [ -// { -// value: '2-1-1-1', -// content: <>level 4, item 1, -// }, -// ], -// }, -// ], -// }, -// ], -// }, -// ]; - -// const flatTreeItems = flattenTree_unstable(nestedTreeItems); - const ActionsExample = () => ( <>