@fluentui/react-tree 9.0.0-beta.9 → 9.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.json +1558 -8
- package/CHANGELOG.md +421 -9
- package/LICENSE +1 -1
- package/dist/index.d.ts +367 -132
- package/lib/FlatTree.js +1 -0
- package/lib/FlatTree.js.map +1 -0
- package/lib/Tree.js +0 -1
- package/lib/Tree.js.map +1 -1
- package/lib/TreeItem.js +0 -1
- package/lib/TreeItem.js.map +1 -1
- package/lib/TreeItemLayout.js +0 -1
- package/lib/TreeItemLayout.js.map +1 -1
- package/lib/TreeItemPersonaLayout.js +0 -1
- package/lib/TreeItemPersonaLayout.js.map +1 -1
- package/lib/components/FlatTree/FlatTree.js +17 -0
- package/lib/components/FlatTree/FlatTree.js.map +1 -0
- package/lib/components/FlatTree/FlatTree.types.js +1 -0
- package/lib/components/FlatTree/FlatTree.types.js.map +1 -0
- package/lib/components/FlatTree/index.js +7 -0
- package/lib/components/FlatTree/index.js.map +1 -0
- package/lib/components/FlatTree/renderFlatTree.js +2 -0
- package/lib/components/FlatTree/renderFlatTree.js.map +1 -0
- package/lib/components/FlatTree/useFlatControllableCheckedItems.js +76 -0
- package/lib/components/FlatTree/useFlatControllableCheckedItems.js.map +1 -0
- package/lib/components/FlatTree/useFlatTree.js +3 -0
- package/lib/components/FlatTree/useFlatTree.js.map +1 -0
- package/lib/components/FlatTree/useFlatTreeContextValues.js +2 -0
- package/lib/components/FlatTree/useFlatTreeContextValues.js.map +1 -0
- package/lib/components/FlatTree/useFlatTreeNavigation.js +74 -0
- package/lib/components/FlatTree/useFlatTreeNavigation.js.map +1 -0
- package/lib/components/FlatTree/useFlatTreeStyles.styles.js +20 -0
- package/lib/components/FlatTree/useFlatTreeStyles.styles.js.map +1 -0
- package/lib/components/FlatTree/useHeadlessFlatTree.js +124 -0
- package/lib/components/FlatTree/useHeadlessFlatTree.js.map +1 -0
- package/lib/components/Tree/Tree.js +9 -15
- package/lib/components/Tree/Tree.js.map +1 -1
- package/lib/components/Tree/Tree.types.js +1 -2
- package/lib/components/Tree/Tree.types.js.map +1 -1
- package/lib/components/Tree/index.js +2 -3
- package/lib/components/Tree/index.js.map +1 -1
- package/lib/components/Tree/renderTree.js +7 -11
- package/lib/components/Tree/renderTree.js.map +1 -1
- package/lib/components/Tree/useNestedControllableCheckedItems.js +22 -0
- package/lib/components/Tree/useNestedControllableCheckedItems.js.map +1 -0
- package/lib/components/Tree/useTree.js +63 -111
- package/lib/components/Tree/useTree.js.map +1 -1
- package/lib/components/Tree/useTreeContextValues.js +16 -24
- package/lib/components/Tree/useTreeContextValues.js.map +1 -1
- package/lib/components/Tree/useTreeNavigation.js +52 -0
- package/lib/components/Tree/useTreeNavigation.js.map +1 -0
- package/lib/components/Tree/{useTreeStyles.js → useTreeStyles.styles.js} +7 -3
- package/lib/components/Tree/useTreeStyles.styles.js.map +1 -0
- package/lib/components/TreeItem/TreeItem.js +7 -9
- package/lib/components/TreeItem/TreeItem.js.map +1 -1
- package/lib/components/TreeItem/TreeItem.types.js +0 -1
- package/lib/components/TreeItem/TreeItem.types.js.map +1 -1
- package/lib/components/TreeItem/index.js +2 -2
- package/lib/components/TreeItem/index.js.map +1 -1
- package/lib/components/TreeItem/renderTreeItem.js +7 -15
- package/lib/components/TreeItem/renderTreeItem.js.map +1 -1
- package/lib/components/TreeItem/useTreeItem.js +161 -234
- package/lib/components/TreeItem/useTreeItem.js.map +1 -1
- package/lib/components/TreeItem/useTreeItemContextValues.js +20 -16
- package/lib/components/TreeItem/useTreeItemContextValues.js.map +1 -1
- package/lib/components/TreeItem/useTreeItemStyles.styles.js +100 -0
- package/lib/components/TreeItem/useTreeItemStyles.styles.js.map +1 -0
- package/lib/components/TreeItemChevron.js +24 -0
- package/lib/components/TreeItemChevron.js.map +1 -0
- package/lib/components/TreeItemLayout/TreeItemLayout.js +5 -7
- package/lib/components/TreeItemLayout/TreeItemLayout.js.map +1 -1
- package/lib/components/TreeItemLayout/TreeItemLayout.types.js +1 -2
- package/lib/components/TreeItemLayout/TreeItemLayout.types.js.map +1 -1
- package/lib/components/TreeItemLayout/index.js +1 -2
- package/lib/components/TreeItemLayout/index.js.map +1 -1
- package/lib/components/TreeItemLayout/renderTreeItemLayout.js +8 -13
- package/lib/components/TreeItemLayout/renderTreeItemLayout.js.map +1 -1
- package/lib/components/TreeItemLayout/useTreeItemLayout.js +109 -40
- package/lib/components/TreeItemLayout/useTreeItemLayout.js.map +1 -1
- package/lib/components/TreeItemLayout/useTreeItemLayoutStyles.styles.js +237 -0
- package/lib/components/TreeItemLayout/useTreeItemLayoutStyles.styles.js.map +1 -0
- package/lib/components/TreeItemPersonaLayout/TreeItemPersonaLayout.js +6 -8
- package/lib/components/TreeItemPersonaLayout/TreeItemPersonaLayout.js.map +1 -1
- package/lib/components/TreeItemPersonaLayout/TreeItemPersonaLayout.types.js +1 -2
- package/lib/components/TreeItemPersonaLayout/TreeItemPersonaLayout.types.js.map +1 -1
- package/lib/components/TreeItemPersonaLayout/index.js +1 -2
- package/lib/components/TreeItemPersonaLayout/index.js.map +1 -1
- package/lib/components/TreeItemPersonaLayout/renderTreeItemPersonaLayout.js +10 -15
- package/lib/components/TreeItemPersonaLayout/renderTreeItemPersonaLayout.js.map +1 -1
- package/lib/components/TreeItemPersonaLayout/useTreeItemPersonaLayout.js +41 -48
- package/lib/components/TreeItemPersonaLayout/useTreeItemPersonaLayout.js.map +1 -1
- package/lib/components/TreeItemPersonaLayout/useTreeItemPersonaLayoutContextValues.js +9 -10
- package/lib/components/TreeItemPersonaLayout/useTreeItemPersonaLayoutContextValues.js.map +1 -1
- package/lib/components/TreeItemPersonaLayout/useTreeItemPersonaLayoutStyles.styles.js +210 -0
- package/lib/components/TreeItemPersonaLayout/useTreeItemPersonaLayoutStyles.styles.js.map +1 -0
- package/lib/contexts/index.js +0 -1
- package/lib/contexts/index.js.map +1 -1
- package/lib/contexts/treeContext.js +13 -14
- package/lib/contexts/treeContext.js.map +1 -1
- package/lib/contexts/treeItemContext.js +16 -8
- package/lib/contexts/treeItemContext.js.map +1 -1
- package/lib/hooks/useControllableOpenItems.js +28 -0
- package/lib/hooks/useControllableOpenItems.js.map +1 -0
- package/lib/hooks/useRootTree.js +147 -0
- package/lib/hooks/useRootTree.js.map +1 -0
- package/lib/hooks/useRovingTabIndexes.js +30 -49
- package/lib/hooks/useRovingTabIndexes.js.map +1 -1
- package/lib/hooks/useSubtree.js +41 -0
- package/lib/hooks/useSubtree.js.map +1 -0
- package/lib/index.js +3 -4
- package/lib/index.js.map +1 -1
- package/lib/utils/ImmutableMap.js +41 -0
- package/lib/utils/ImmutableMap.js.map +1 -0
- package/lib/utils/ImmutableSet.js +42 -33
- package/lib/utils/ImmutableSet.js.map +1 -1
- package/lib/utils/assert.js +4 -5
- package/lib/utils/assert.js.map +1 -1
- package/lib/utils/createCheckedItems.js +18 -0
- package/lib/utils/createCheckedItems.js.map +1 -0
- package/lib/utils/createHTMLElementWalker.js +67 -0
- package/lib/utils/createHTMLElementWalker.js.map +1 -0
- package/lib/utils/createHeadlessTree.js +188 -0
- package/lib/utils/createHeadlessTree.js.map +1 -0
- package/lib/utils/createOpenItems.js +10 -0
- package/lib/utils/createOpenItems.js.map +1 -0
- package/lib/utils/flattenTree.js +15 -49
- package/lib/utils/flattenTree.js.map +1 -1
- package/lib/utils/getTreeItemValueFromElement.js +4 -0
- package/lib/utils/getTreeItemValueFromElement.js.map +1 -0
- package/lib/utils/nextTypeAheadElement.js +11 -12
- package/lib/utils/nextTypeAheadElement.js.map +1 -1
- package/lib/utils/normalizeOpenItems.js +6 -5
- package/lib/utils/normalizeOpenItems.js.map +1 -1
- package/lib/utils/tokens.js +14 -14
- package/lib/utils/tokens.js.map +1 -1
- package/lib/utils/treeItemFilter.js +2 -3
- package/lib/utils/treeItemFilter.js.map +1 -1
- package/lib-commonjs/FlatTree.js +6 -0
- package/lib-commonjs/FlatTree.js.map +1 -0
- package/lib-commonjs/Tree.js +0 -3
- package/lib-commonjs/Tree.js.map +1 -1
- package/lib-commonjs/TreeItem.js +0 -3
- package/lib-commonjs/TreeItem.js.map +1 -1
- package/lib-commonjs/TreeItemLayout.js +0 -3
- package/lib-commonjs/TreeItemLayout.js.map +1 -1
- package/lib-commonjs/TreeItemPersonaLayout.js +0 -3
- package/lib-commonjs/TreeItemPersonaLayout.js.map +1 -1
- package/lib-commonjs/components/FlatTree/FlatTree.js +21 -0
- package/lib-commonjs/components/FlatTree/FlatTree.js.map +1 -0
- package/lib-commonjs/components/FlatTree/FlatTree.types.js +4 -0
- package/lib-commonjs/components/FlatTree/FlatTree.types.js.map +1 -0
- package/lib-commonjs/components/FlatTree/index.js +12 -0
- package/lib-commonjs/components/FlatTree/index.js.map +1 -0
- package/lib-commonjs/components/FlatTree/renderFlatTree.js +10 -0
- package/lib-commonjs/components/FlatTree/renderFlatTree.js.map +1 -0
- package/lib-commonjs/components/FlatTree/useFlatControllableCheckedItems.js +91 -0
- package/lib-commonjs/components/FlatTree/useFlatControllableCheckedItems.js.map +1 -0
- package/lib-commonjs/components/FlatTree/useFlatTree.js +12 -0
- package/lib-commonjs/components/FlatTree/useFlatTree.js.map +1 -0
- package/lib-commonjs/components/FlatTree/useFlatTreeContextValues.js +10 -0
- package/lib-commonjs/components/FlatTree/useFlatTreeContextValues.js.map +1 -0
- package/lib-commonjs/components/FlatTree/useFlatTreeNavigation.js +82 -0
- package/lib-commonjs/components/FlatTree/useFlatTreeNavigation.js.map +1 -0
- package/lib-commonjs/components/FlatTree/useFlatTreeStyles.styles.js +36 -0
- package/lib-commonjs/components/FlatTree/useFlatTreeStyles.styles.js.map +1 -0
- package/lib-commonjs/components/FlatTree/useHeadlessFlatTree.js +121 -0
- package/lib-commonjs/components/FlatTree/useHeadlessFlatTree.js.map +1 -0
- package/lib-commonjs/components/Tree/Tree.js +4 -6
- package/lib-commonjs/components/Tree/Tree.js.map +1 -1
- package/lib-commonjs/components/Tree/Tree.types.js +0 -5
- package/lib-commonjs/components/Tree/Tree.types.js.map +1 -1
- package/lib-commonjs/components/Tree/index.js +2 -5
- package/lib-commonjs/components/Tree/index.js.map +1 -1
- package/lib-commonjs/components/Tree/renderTree.js +6 -9
- package/lib-commonjs/components/Tree/renderTree.js.map +1 -1
- package/lib-commonjs/components/Tree/useNestedControllableCheckedItems.js +37 -0
- package/lib-commonjs/components/Tree/useNestedControllableCheckedItems.js.map +1 -0
- package/lib-commonjs/components/Tree/useTree.js +53 -85
- package/lib-commonjs/components/Tree/useTree.js.map +1 -1
- package/lib-commonjs/components/Tree/useTreeContextValues.js +9 -10
- package/lib-commonjs/components/Tree/useTreeContextValues.js.map +1 -1
- package/lib-commonjs/components/Tree/useTreeNavigation.js +60 -0
- package/lib-commonjs/components/Tree/useTreeNavigation.js.map +1 -0
- package/lib-commonjs/components/Tree/{useTreeStyles.js → useTreeStyles.styles.js} +10 -7
- package/lib-commonjs/components/Tree/useTreeStyles.styles.js.map +1 -0
- package/lib-commonjs/components/TreeItem/TreeItem.js +3 -5
- package/lib-commonjs/components/TreeItem/TreeItem.js.map +1 -1
- package/lib-commonjs/components/TreeItem/TreeItem.types.js +0 -3
- package/lib-commonjs/components/TreeItem/TreeItem.types.js.map +1 -1
- package/lib-commonjs/components/TreeItem/index.js +2 -4
- package/lib-commonjs/components/TreeItem/index.js.map +1 -1
- package/lib-commonjs/components/TreeItem/renderTreeItem.js +6 -12
- package/lib-commonjs/components/TreeItem/renderTreeItem.js.map +1 -1
- package/lib-commonjs/components/TreeItem/useTreeItem.js +111 -170
- package/lib-commonjs/components/TreeItem/useTreeItem.js.map +1 -1
- package/lib-commonjs/components/TreeItem/useTreeItemContextValues.js +19 -18
- package/lib-commonjs/components/TreeItem/useTreeItemContextValues.js.map +1 -1
- package/lib-commonjs/components/TreeItem/useTreeItemStyles.styles.js +202 -0
- package/lib-commonjs/components/TreeItem/useTreeItemStyles.styles.js.map +1 -0
- package/lib-commonjs/components/TreeItemChevron.js +33 -0
- package/lib-commonjs/components/TreeItemChevron.js.map +1 -0
- package/lib-commonjs/components/TreeItemLayout/TreeItemLayout.js +3 -5
- package/lib-commonjs/components/TreeItemLayout/TreeItemLayout.js.map +1 -1
- package/lib-commonjs/components/TreeItemLayout/TreeItemLayout.types.js +0 -3
- package/lib-commonjs/components/TreeItemLayout/TreeItemLayout.types.js.map +1 -1
- package/lib-commonjs/components/TreeItemLayout/index.js +1 -4
- package/lib-commonjs/components/TreeItemLayout/index.js.map +1 -1
- package/lib-commonjs/components/TreeItemLayout/renderTreeItemLayout.js +8 -9
- package/lib-commonjs/components/TreeItemLayout/renderTreeItemLayout.js.map +1 -1
- package/lib-commonjs/components/TreeItemLayout/useTreeItemLayout.js +92 -18
- package/lib-commonjs/components/TreeItemLayout/useTreeItemLayout.js.map +1 -1
- package/lib-commonjs/components/TreeItemLayout/useTreeItemLayoutStyles.styles.js +392 -0
- package/lib-commonjs/components/TreeItemLayout/useTreeItemLayoutStyles.styles.js.map +1 -0
- package/lib-commonjs/components/TreeItemPersonaLayout/TreeItemPersonaLayout.js +3 -5
- package/lib-commonjs/components/TreeItemPersonaLayout/TreeItemPersonaLayout.js.map +1 -1
- package/lib-commonjs/components/TreeItemPersonaLayout/TreeItemPersonaLayout.types.js +0 -3
- package/lib-commonjs/components/TreeItemPersonaLayout/TreeItemPersonaLayout.types.js.map +1 -1
- package/lib-commonjs/components/TreeItemPersonaLayout/index.js +1 -4
- package/lib-commonjs/components/TreeItemPersonaLayout/index.js.map +1 -1
- package/lib-commonjs/components/TreeItemPersonaLayout/renderTreeItemPersonaLayout.js +9 -10
- package/lib-commonjs/components/TreeItemPersonaLayout/renderTreeItemPersonaLayout.js.map +1 -1
- package/lib-commonjs/components/TreeItemPersonaLayout/useTreeItemPersonaLayout.js +29 -26
- package/lib-commonjs/components/TreeItemPersonaLayout/useTreeItemPersonaLayout.js.map +1 -1
- package/lib-commonjs/components/TreeItemPersonaLayout/useTreeItemPersonaLayoutContextValues.js +1 -3
- package/lib-commonjs/components/TreeItemPersonaLayout/useTreeItemPersonaLayoutContextValues.js.map +1 -1
- package/lib-commonjs/components/TreeItemPersonaLayout/useTreeItemPersonaLayoutStyles.styles.js +379 -0
- package/lib-commonjs/components/TreeItemPersonaLayout/useTreeItemPersonaLayoutStyles.styles.js.map +1 -0
- package/lib-commonjs/contexts/index.js +0 -3
- package/lib-commonjs/contexts/index.js.map +1 -1
- package/lib-commonjs/contexts/treeContext.js +7 -7
- package/lib-commonjs/contexts/treeContext.js.map +1 -1
- package/lib-commonjs/contexts/treeItemContext.js +15 -6
- package/lib-commonjs/contexts/treeItemContext.js.map +1 -1
- package/lib-commonjs/hooks/useControllableOpenItems.js +39 -0
- package/lib-commonjs/hooks/useControllableOpenItems.js.map +1 -0
- package/lib-commonjs/hooks/useRootTree.js +151 -0
- package/lib-commonjs/hooks/useRootTree.js.map +1 -0
- package/lib-commonjs/hooks/useRovingTabIndexes.js +9 -31
- package/lib-commonjs/hooks/useRovingTabIndexes.js.map +1 -1
- package/lib-commonjs/hooks/useSubtree.js +45 -0
- package/lib-commonjs/hooks/useSubtree.js.map +1 -0
- package/lib-commonjs/index.js +11 -7
- package/lib-commonjs/index.js.map +1 -1
- package/lib-commonjs/utils/ImmutableMap.js +49 -0
- package/lib-commonjs/utils/ImmutableMap.js.map +1 -0
- package/lib-commonjs/utils/ImmutableSet.js +28 -20
- package/lib-commonjs/utils/ImmutableSet.js.map +1 -1
- package/lib-commonjs/utils/assert.js +1 -3
- package/lib-commonjs/utils/assert.js.map +1 -1
- package/lib-commonjs/utils/createCheckedItems.js +26 -0
- package/lib-commonjs/utils/createCheckedItems.js.map +1 -0
- package/lib-commonjs/{hooks/useHTMLElementWalker.js → utils/createHTMLElementWalker.js} +3 -27
- package/lib-commonjs/utils/createHTMLElementWalker.js.map +1 -0
- package/lib-commonjs/utils/createHeadlessTree.js +202 -0
- package/lib-commonjs/utils/createHeadlessTree.js.map +1 -0
- package/lib-commonjs/utils/createOpenItems.js +18 -0
- package/lib-commonjs/utils/createOpenItems.js.map +1 -0
- package/lib-commonjs/utils/flattenTree.js +4 -40
- package/lib-commonjs/utils/flattenTree.js.map +1 -1
- package/lib-commonjs/utils/getTreeItemValueFromElement.js +18 -0
- package/lib-commonjs/utils/getTreeItemValueFromElement.js.map +1 -0
- package/lib-commonjs/utils/nextTypeAheadElement.js +1 -3
- package/lib-commonjs/utils/nextTypeAheadElement.js.map +1 -1
- package/lib-commonjs/utils/normalizeOpenItems.js +1 -3
- package/lib-commonjs/utils/normalizeOpenItems.js.map +1 -1
- package/lib-commonjs/utils/tokens.js +12 -13
- package/lib-commonjs/utils/tokens.js.map +1 -1
- package/lib-commonjs/utils/treeItemFilter.js +1 -3
- package/lib-commonjs/utils/treeItemFilter.js.map +1 -1
- package/package.json +31 -31
- package/.swcrc +0 -30
- package/lib/components/Tree/useTreeStyles.js.map +0 -1
- package/lib/components/TreeItem/useTreeItemStyles.js +0 -203
- package/lib/components/TreeItem/useTreeItemStyles.js.map +0 -1
- package/lib/components/TreeItemLayout/useTreeItemLayoutStyles.js +0 -98
- package/lib/components/TreeItemLayout/useTreeItemLayoutStyles.js.map +0 -1
- package/lib/components/TreeItemPersonaLayout/useTreeItemPersonaLayoutStyles.js +0 -115
- package/lib/components/TreeItemPersonaLayout/useTreeItemPersonaLayoutStyles.js.map +0 -1
- package/lib/hooks/index.js +0 -4
- package/lib/hooks/index.js.map +0 -1
- package/lib/hooks/useFlatTree.js +0 -77
- package/lib/hooks/useFlatTree.js.map +0 -1
- package/lib/hooks/useFlatTreeNavigation.js +0 -74
- package/lib/hooks/useFlatTreeNavigation.js.map +0 -1
- package/lib/hooks/useHTMLElementWalker.js +0 -80
- package/lib/hooks/useHTMLElementWalker.js.map +0 -1
- package/lib/hooks/useNestedTreeNavigation.js +0 -59
- package/lib/hooks/useNestedTreeNavigation.js.map +0 -1
- package/lib/hooks/useOpenItemsState.js +0 -22
- package/lib/hooks/useOpenItemsState.js.map +0 -1
- package/lib/utils/createFlatTreeItems.js +0 -109
- package/lib/utils/createFlatTreeItems.js.map +0 -1
- package/lib-commonjs/components/Tree/useTreeStyles.js.map +0 -1
- package/lib-commonjs/components/TreeItem/useTreeItemStyles.js +0 -375
- package/lib-commonjs/components/TreeItem/useTreeItemStyles.js.map +0 -1
- package/lib-commonjs/components/TreeItemLayout/useTreeItemLayoutStyles.js +0 -143
- package/lib-commonjs/components/TreeItemLayout/useTreeItemLayoutStyles.js.map +0 -1
- package/lib-commonjs/components/TreeItemPersonaLayout/useTreeItemPersonaLayoutStyles.js +0 -186
- package/lib-commonjs/components/TreeItemPersonaLayout/useTreeItemPersonaLayoutStyles.js.map +0 -1
- package/lib-commonjs/hooks/index.js +0 -11
- package/lib-commonjs/hooks/index.js.map +0 -1
- package/lib-commonjs/hooks/useFlatTree.js +0 -86
- package/lib-commonjs/hooks/useFlatTree.js.map +0 -1
- package/lib-commonjs/hooks/useFlatTreeNavigation.js +0 -82
- package/lib-commonjs/hooks/useFlatTreeNavigation.js.map +0 -1
- package/lib-commonjs/hooks/useHTMLElementWalker.js.map +0 -1
- package/lib-commonjs/hooks/useNestedTreeNavigation.js +0 -69
- package/lib-commonjs/hooks/useNestedTreeNavigation.js.map +0 -1
- package/lib-commonjs/hooks/useOpenItemsState.js +0 -39
- package/lib-commonjs/hooks/useOpenItemsState.js.map +0 -1
- package/lib-commonjs/utils/createFlatTreeItems.js +0 -126
- package/lib-commonjs/utils/createFlatTreeItems.js.map +0 -1
|
@@ -1,203 +0,0 @@
|
|
|
1
|
-
import { __styles, mergeClasses, shorthands } from '@griffel/react';
|
|
2
|
-
import { tokens } from '@fluentui/react-theme';
|
|
3
|
-
import { createFocusOutlineStyle } from '@fluentui/react-tabster';
|
|
4
|
-
import { useTreeContext_unstable } from '../../contexts/index';
|
|
5
|
-
import { treeItemLevelToken } from '../../utils/tokens';
|
|
6
|
-
export const treeItemClassNames = {
|
|
7
|
-
root: 'fui-TreeItem',
|
|
8
|
-
content: 'fui-TreeItem__content',
|
|
9
|
-
subtree: 'fui-TreeItem__subtree',
|
|
10
|
-
expandIcon: 'fui-TreeItem__expandIcon',
|
|
11
|
-
actions: 'fui-TreeItem__actions'
|
|
12
|
-
};
|
|
13
|
-
const useRootStyles = /*#__PURE__*/__styles({
|
|
14
|
-
level1: {
|
|
15
|
-
iytv0q: "f10bgyvd"
|
|
16
|
-
},
|
|
17
|
-
level2: {
|
|
18
|
-
iytv0q: "f1h0rod3"
|
|
19
|
-
},
|
|
20
|
-
level3: {
|
|
21
|
-
iytv0q: "fgoqafk"
|
|
22
|
-
},
|
|
23
|
-
level4: {
|
|
24
|
-
iytv0q: "f75dvuh"
|
|
25
|
-
},
|
|
26
|
-
level5: {
|
|
27
|
-
iytv0q: "fqk7yw6"
|
|
28
|
-
},
|
|
29
|
-
level6: {
|
|
30
|
-
iytv0q: "f1r3z17b"
|
|
31
|
-
},
|
|
32
|
-
level7: {
|
|
33
|
-
iytv0q: "f1hrpd1h"
|
|
34
|
-
},
|
|
35
|
-
level8: {
|
|
36
|
-
iytv0q: "f1iy65d0"
|
|
37
|
-
},
|
|
38
|
-
level9: {
|
|
39
|
-
iytv0q: "ftg42e5"
|
|
40
|
-
},
|
|
41
|
-
level10: {
|
|
42
|
-
iytv0q: "fyat3t"
|
|
43
|
-
}
|
|
44
|
-
}, {
|
|
45
|
-
d: [".f10bgyvd{--fluent-TreeItem--level:1;}", ".f1h0rod3{--fluent-TreeItem--level:2;}", ".fgoqafk{--fluent-TreeItem--level:3;}", ".f75dvuh{--fluent-TreeItem--level:4;}", ".fqk7yw6{--fluent-TreeItem--level:5;}", ".f1r3z17b{--fluent-TreeItem--level:6;}", ".f1hrpd1h{--fluent-TreeItem--level:7;}", ".f1iy65d0{--fluent-TreeItem--level:8;}", ".ftg42e5{--fluent-TreeItem--level:9;}", ".fyat3t{--fluent-TreeItem--level:10;}"]
|
|
46
|
-
});
|
|
47
|
-
/**
|
|
48
|
-
* Styles for the content slot
|
|
49
|
-
*/
|
|
50
|
-
const useContentStyles = /*#__PURE__*/__styles({
|
|
51
|
-
base: {
|
|
52
|
-
qhf8xq: "f10pi13n",
|
|
53
|
-
Bceei9c: "f1k6fduh",
|
|
54
|
-
mc9l5x: "f22iagw",
|
|
55
|
-
De3pzq: "fhovq9v",
|
|
56
|
-
sj55zd: "fkfq4zb",
|
|
57
|
-
z189sj: ["flk2ux3", "fkl3uby"],
|
|
58
|
-
uwmqm3: ["fo100m9", "f6yw3pu"],
|
|
59
|
-
Bbmb7ep: ["f1aa9q02", "f16jpd5f"],
|
|
60
|
-
Beyfa6y: ["f16jpd5f", "f1aa9q02"],
|
|
61
|
-
B7oj6ja: ["f1jar5jt", "fyu767a"],
|
|
62
|
-
Btl43ni: ["fyu767a", "f1jar5jt"],
|
|
63
|
-
lj723h: "flvvhsy",
|
|
64
|
-
ecr2s2: "f1wfn5kd",
|
|
65
|
-
Ixpawx: "f1x3s29",
|
|
66
|
-
Bi91k9c: "fnwyq0v",
|
|
67
|
-
Jwef8y: "f1t94bn6",
|
|
68
|
-
B0t702g: "f1kvtbpn"
|
|
69
|
-
},
|
|
70
|
-
focusIndicator: {
|
|
71
|
-
Brovlpu: "ftqa4ok",
|
|
72
|
-
B486eqv: "f2hkw1w",
|
|
73
|
-
B8q5s1w: "f8hki3x",
|
|
74
|
-
Bci5o5g: ["f1d2448m", "ffh67wi"],
|
|
75
|
-
n8qw10: "f1bjia2o",
|
|
76
|
-
Bdrgwmp: ["ffh67wi", "f1d2448m"],
|
|
77
|
-
Bm4h7ae: "f15bsgw9",
|
|
78
|
-
B7ys5i9: "f14e48fq",
|
|
79
|
-
Busjfv9: "f18yb2kv",
|
|
80
|
-
Bhk32uz: "fd6o370",
|
|
81
|
-
Bf4ptjt: "fh1cnn4",
|
|
82
|
-
kclons: ["fy7oxxb", "f184ne2d"],
|
|
83
|
-
Bhdgwq3: "fpukqih",
|
|
84
|
-
Blkhhs4: ["f184ne2d", "fy7oxxb"],
|
|
85
|
-
Bqtpl0w: "frrh606",
|
|
86
|
-
clg4pj: ["f1v5zibi", "fo2hd23"],
|
|
87
|
-
hgwjuy: "ful5kiu",
|
|
88
|
-
Bonggc9: ["fo2hd23", "f1v5zibi"],
|
|
89
|
-
B1tsrr9: ["f1jqcqds", "ftffrms"],
|
|
90
|
-
Dah5zi: ["ftffrms", "f1jqcqds"],
|
|
91
|
-
Bkh64rk: ["f2e7qr6", "fsr1zz6"],
|
|
92
|
-
qqdqy8: ["fsr1zz6", "f2e7qr6"],
|
|
93
|
-
B6dhp37: "f1dvezut",
|
|
94
|
-
i03rao: ["fd0oaoj", "f1cwg4i8"],
|
|
95
|
-
Boxcth7: "fjvm52t",
|
|
96
|
-
Bsom6fd: ["f1cwg4i8", "fd0oaoj"],
|
|
97
|
-
J0r882: "fdiulkx",
|
|
98
|
-
Bjwuhne: "f1yalx80",
|
|
99
|
-
Ghsupd: ["fq22d5a", "f1jw7pan"],
|
|
100
|
-
Bule8hv: ["f1jw7pan", "fq22d5a"]
|
|
101
|
-
},
|
|
102
|
-
subtle: {},
|
|
103
|
-
"subtle-alpha": {
|
|
104
|
-
Jwef8y: "f146ro5n",
|
|
105
|
-
ecr2s2: "fkam630"
|
|
106
|
-
},
|
|
107
|
-
transparent: {
|
|
108
|
-
De3pzq: "f1c21dwh",
|
|
109
|
-
Jwef8y: "fjxutwb",
|
|
110
|
-
ecr2s2: "fophhak"
|
|
111
|
-
},
|
|
112
|
-
leaf: {
|
|
113
|
-
uwmqm3: ["f1k1erfc", "faevyjx"]
|
|
114
|
-
}
|
|
115
|
-
}, {
|
|
116
|
-
d: [".f10pi13n{position:relative;}", ".f1k6fduh{cursor:pointer;}", ".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}", ".fhovq9v{background-color:var(--colorSubtleBackground);}", ".fkfq4zb{color:var(--colorNeutralForeground2);}", ".flk2ux3{padding-right:var(--spacingHorizontalNone);}", ".fkl3uby{padding-left:var(--spacingHorizontalNone);}", ".fo100m9{padding-left:calc((var(--fluent-TreeItem--level, 1) - 1) * var(--spacingHorizontalXXL));}", ".f6yw3pu{padding-right:calc((var(--fluent-TreeItem--level, 1) - 1) * var(--spacingHorizontalXXL));}", ".f1aa9q02{border-bottom-right-radius:var(--borderRadiusMedium);}", ".f16jpd5f{border-bottom-left-radius:var(--borderRadiusMedium);}", ".f1jar5jt{border-top-right-radius:var(--borderRadiusMedium);}", ".fyu767a{border-top-left-radius:var(--borderRadiusMedium);}", ".f8hki3x[data-fui-focus-visible]{border-top-color:transparent;}", ".f1d2448m[data-fui-focus-visible]{border-right-color:transparent;}", ".ffh67wi[data-fui-focus-visible]{border-left-color:transparent;}", ".f1bjia2o[data-fui-focus-visible]{border-bottom-color:transparent;}", ".f15bsgw9[data-fui-focus-visible]::after{content:\"\";}", ".f14e48fq[data-fui-focus-visible]::after{position:absolute;}", ".f18yb2kv[data-fui-focus-visible]::after{pointer-events:none;}", ".fd6o370[data-fui-focus-visible]::after{z-index:1;}", ".fh1cnn4[data-fui-focus-visible]::after{border-top-style:solid;}", ".fy7oxxb[data-fui-focus-visible]::after{border-right-style:solid;}", ".f184ne2d[data-fui-focus-visible]::after{border-left-style:solid;}", ".fpukqih[data-fui-focus-visible]::after{border-bottom-style:solid;}", ".frrh606[data-fui-focus-visible]::after{border-top-width:2px;}", ".f1v5zibi[data-fui-focus-visible]::after{border-right-width:2px;}", ".fo2hd23[data-fui-focus-visible]::after{border-left-width:2px;}", ".ful5kiu[data-fui-focus-visible]::after{border-bottom-width:2px;}", ".f1jqcqds[data-fui-focus-visible]::after{border-bottom-right-radius:var(--borderRadiusMedium);}", ".ftffrms[data-fui-focus-visible]::after{border-bottom-left-radius:var(--borderRadiusMedium);}", ".f2e7qr6[data-fui-focus-visible]::after{border-top-right-radius:var(--borderRadiusMedium);}", ".fsr1zz6[data-fui-focus-visible]::after{border-top-left-radius:var(--borderRadiusMedium);}", ".f1dvezut[data-fui-focus-visible]::after{border-top-color:var(--colorStrokeFocus2);}", ".fd0oaoj[data-fui-focus-visible]::after{border-right-color:var(--colorStrokeFocus2);}", ".f1cwg4i8[data-fui-focus-visible]::after{border-left-color:var(--colorStrokeFocus2);}", ".fjvm52t[data-fui-focus-visible]::after{border-bottom-color:var(--colorStrokeFocus2);}", ".fdiulkx[data-fui-focus-visible]::after{top:-2px;}", ".f1yalx80[data-fui-focus-visible]::after{bottom:-2px;}", ".fq22d5a[data-fui-focus-visible]::after{left:-2px;}", ".f1jw7pan[data-fui-focus-visible]::after{right:-2px;}", ".f1c21dwh{background-color:var(--colorTransparentBackground);}", ".f1k1erfc{padding-left:calc(var(--fluent-TreeItem--level, 1) * var(--spacingHorizontalXXL));}", ".faevyjx{padding-right:calc(var(--fluent-TreeItem--level, 1) * var(--spacingHorizontalXXL));}"],
|
|
117
|
-
a: [".flvvhsy:active{color:var(--colorNeutralForeground2Pressed);}", ".f1wfn5kd:active{background-color:var(--colorSubtleBackgroundPressed);}", ".f1x3s29:active .fui-TreeItem__expandIcon{color:var(--colorNeutralForeground3Pressed);}", ".fkam630:active{background-color:var(--colorSubtleBackgroundLightAlphaPressed);}", ".fophhak:active{background-color:var(--colorTransparentBackgroundPressed);}"],
|
|
118
|
-
h: [".fnwyq0v:hover{color:var(--colorNeutralForeground2Hover);}", ".f1t94bn6:hover{background-color:var(--colorSubtleBackgroundHover);}", ".f1kvtbpn:hover .fui-TreeItem__expandIcon{color:var(--colorNeutralForeground3Hover);}", ".f146ro5n:hover{background-color:var(--colorSubtleBackgroundLightAlphaHover);}", ".fjxutwb:hover{background-color:var(--colorTransparentBackgroundHover);}"],
|
|
119
|
-
f: [".ftqa4ok:focus{outline-style:none;}"],
|
|
120
|
-
i: [".f2hkw1w:focus-visible{outline-style:none;}"]
|
|
121
|
-
});
|
|
122
|
-
/**
|
|
123
|
-
* Styles for the expand icon slot
|
|
124
|
-
*/
|
|
125
|
-
const useExpandIconStyles = /*#__PURE__*/__styles({
|
|
126
|
-
base: {
|
|
127
|
-
mc9l5x: "f22iagw",
|
|
128
|
-
Bt984gj: "f122n59",
|
|
129
|
-
Brf1p80: "f4d9j23",
|
|
130
|
-
Bf4jedk: "f17fgpbq",
|
|
131
|
-
B7ck84d: "f1ewtqcl",
|
|
132
|
-
sj55zd: "f11d4kpn",
|
|
133
|
-
z8tnut: "f1ywm7hm",
|
|
134
|
-
z189sj: ["fhxju0i", "f1cnd47f"],
|
|
135
|
-
Byoj8tv: "f14wxoun",
|
|
136
|
-
uwmqm3: ["f1cnd47f", "fhxju0i"]
|
|
137
|
-
}
|
|
138
|
-
}, {
|
|
139
|
-
d: [".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}", ".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}", ".f4d9j23{-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;}", ".f17fgpbq{min-width:24px;}", ".f1ewtqcl{box-sizing:border-box;}", ".f11d4kpn{color:var(--colorNeutralForeground3);}", ".f1ywm7hm{padding-top:var(--spacingVerticalXS);}", ".fhxju0i{padding-right:0;}", ".f1cnd47f{padding-left:0;}", ".f14wxoun{padding-bottom:var(--spacingVerticalXS);}"]
|
|
140
|
-
});
|
|
141
|
-
/**
|
|
142
|
-
* Styles for the action icon slot
|
|
143
|
-
*/
|
|
144
|
-
const useActionsStyles = /*#__PURE__*/__styles({
|
|
145
|
-
base: {
|
|
146
|
-
mc9l5x: "fjseox",
|
|
147
|
-
Frg6f3: ["fcgxt0o", "f1ujusj6"],
|
|
148
|
-
z8tnut: "f1g0x7ka",
|
|
149
|
-
z189sj: ["f1vdfbxk", "f1f5gg8d"],
|
|
150
|
-
Byoj8tv: "f1qch9an",
|
|
151
|
-
uwmqm3: ["f1f5gg8d", "f1vdfbxk"]
|
|
152
|
-
},
|
|
153
|
-
open: {
|
|
154
|
-
mc9l5x: "f22iagw",
|
|
155
|
-
qhf8xq: "f10pi13n"
|
|
156
|
-
}
|
|
157
|
-
}, {
|
|
158
|
-
d: [".fjseox{display:none;}", ".fcgxt0o{margin-left:auto;}", ".f1ujusj6{margin-right:auto;}", ".f1g0x7ka{padding-top:0;}", ".f1vdfbxk{padding-right:var(--spacingHorizontalS);}", ".f1f5gg8d{padding-left:var(--spacingHorizontalS);}", ".f1qch9an{padding-bottom:0;}", ".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}", ".f10pi13n{position:relative;}"]
|
|
159
|
-
});
|
|
160
|
-
export const expandIconInlineStyles = {
|
|
161
|
-
90: {
|
|
162
|
-
transform: `rotate(90deg)`
|
|
163
|
-
},
|
|
164
|
-
0: {
|
|
165
|
-
transform: `rotate(0deg)`
|
|
166
|
-
},
|
|
167
|
-
180: {
|
|
168
|
-
transform: `rotate(180deg)`
|
|
169
|
-
}
|
|
170
|
-
};
|
|
171
|
-
/**
|
|
172
|
-
* Apply styling to the TreeItem slots based on the state
|
|
173
|
-
*/
|
|
174
|
-
export const useTreeItemStyles_unstable = state => {
|
|
175
|
-
const rootStyles = useRootStyles();
|
|
176
|
-
const contentStyles = useContentStyles();
|
|
177
|
-
const expandIconStyles = useExpandIconStyles();
|
|
178
|
-
const actionsStyles = useActionsStyles();
|
|
179
|
-
const appearance = useTreeContext_unstable(ctx => ctx.appearance);
|
|
180
|
-
const {
|
|
181
|
-
actions,
|
|
182
|
-
subtree,
|
|
183
|
-
expandIcon,
|
|
184
|
-
isActionsVisible: showActions,
|
|
185
|
-
level
|
|
186
|
-
} = state;
|
|
187
|
-
state.root.className = mergeClasses(treeItemClassNames.root, isStaticallyDefinedLevel(level) && rootStyles[`level${level}`], state.root.className);
|
|
188
|
-
state.content.className = mergeClasses(treeItemClassNames.content, contentStyles.base, contentStyles[appearance], contentStyles.focusIndicator, state.isLeaf && contentStyles.leaf, state.content.className);
|
|
189
|
-
if (expandIcon) {
|
|
190
|
-
expandIcon.className = mergeClasses(treeItemClassNames.expandIcon, expandIconStyles.base, expandIcon.className);
|
|
191
|
-
}
|
|
192
|
-
if (actions) {
|
|
193
|
-
actions.className = mergeClasses(treeItemClassNames.actions, actionsStyles.base, showActions && actionsStyles.open, actions.className);
|
|
194
|
-
}
|
|
195
|
-
if (subtree) {
|
|
196
|
-
subtree.className = mergeClasses(treeItemClassNames.subtree, subtree.className);
|
|
197
|
-
}
|
|
198
|
-
return state;
|
|
199
|
-
};
|
|
200
|
-
function isStaticallyDefinedLevel(level) {
|
|
201
|
-
return level >= 1 && level <= 10;
|
|
202
|
-
}
|
|
203
|
-
//# sourceMappingURL=useTreeItemStyles.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"names":["__styles","mergeClasses","shorthands","tokens","createFocusOutlineStyle","useTreeContext_unstable","treeItemLevelToken","treeItemClassNames","root","content","subtree","expandIcon","actions","useRootStyles","level1","iytv0q","level2","level3","level4","level5","level6","level7","level8","level9","level10","d","useContentStyles","base","qhf8xq","Bceei9c","mc9l5x","De3pzq","sj55zd","z189sj","uwmqm3","Bbmb7ep","Beyfa6y","B7oj6ja","Btl43ni","lj723h","ecr2s2","Ixpawx","Bi91k9c","Jwef8y","B0t702g","focusIndicator","Brovlpu","B486eqv","B8q5s1w","Bci5o5g","n8qw10","Bdrgwmp","Bm4h7ae","B7ys5i9","Busjfv9","Bhk32uz","Bf4ptjt","kclons","Bhdgwq3","Blkhhs4","Bqtpl0w","clg4pj","hgwjuy","Bonggc9","B1tsrr9","Dah5zi","Bkh64rk","qqdqy8","B6dhp37","i03rao","Boxcth7","Bsom6fd","J0r882","Bjwuhne","Ghsupd","Bule8hv","subtle","transparent","leaf","a","h","f","i","useExpandIconStyles","Bt984gj","Brf1p80","Bf4jedk","B7ck84d","z8tnut","Byoj8tv","useActionsStyles","Frg6f3","open","expandIconInlineStyles","transform","useTreeItemStyles_unstable","state","rootStyles","contentStyles","expandIconStyles","actionsStyles","appearance","ctx","isActionsVisible","showActions","level","className","isStaticallyDefinedLevel","isLeaf"],"sources":["../../../src/components/TreeItem/useTreeItemStyles.ts"],"sourcesContent":["import { GriffelStyle, makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport type { TreeItemCSSProperties, TreeItemSlots, TreeItemState } from './TreeItem.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { tokens } from '@fluentui/react-theme';\nimport { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport { useTreeContext_unstable } from '../../contexts/index';\nimport { treeItemLevelToken } from '../../utils/tokens';\n\nexport const treeItemClassNames: SlotClassNames<TreeItemSlots> = {\n root: 'fui-TreeItem',\n content: 'fui-TreeItem__content',\n subtree: 'fui-TreeItem__subtree',\n expandIcon: 'fui-TreeItem__expandIcon',\n actions: 'fui-TreeItem__actions',\n};\n\ntype StaticLevel = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10;\ntype StaticLevelProperty = `level${StaticLevel}`;\n\nconst useRootStyles = makeStyles({\n ...(Object.fromEntries(\n Array.from<never, [StaticLevelProperty, TreeItemCSSProperties]>({ length: 10 }, (_, index) => [\n `level${(index + 1) as StaticLevel}`,\n { [treeItemLevelToken]: index + 1 },\n ]),\n ) as Record<StaticLevelProperty, GriffelStyle>),\n});\n\n/**\n * Styles for the content slot\n */\nconst useContentStyles = makeStyles({\n base: {\n position: 'relative',\n cursor: 'pointer',\n display: 'flex',\n backgroundColor: tokens.colorSubtleBackground,\n color: tokens.colorNeutralForeground2,\n paddingRight: tokens.spacingHorizontalNone,\n paddingLeft: `calc((var(${treeItemLevelToken}, 1) - 1) * ${tokens.spacingHorizontalXXL})`,\n ...shorthands.borderRadius(tokens.borderRadiusMedium),\n ':active': {\n color: tokens.colorNeutralForeground2Pressed,\n backgroundColor: tokens.colorSubtleBackgroundPressed,\n // TODO: stop using treeItemClassNames.expandIcon for styling\n [`& .${treeItemClassNames.expandIcon}`]: {\n color: tokens.colorNeutralForeground3Pressed,\n },\n },\n ':hover': {\n color: tokens.colorNeutralForeground2Hover,\n backgroundColor: tokens.colorSubtleBackgroundHover,\n // TODO: stop using treeItemClassNames.expandIcon for styling\n [`& .${treeItemClassNames.expandIcon}`]: {\n color: tokens.colorNeutralForeground3Hover,\n },\n },\n },\n focusIndicator: createFocusOutlineStyle(),\n // Appearance variations\n subtle: {},\n 'subtle-alpha': {\n ':hover': {\n backgroundColor: tokens.colorSubtleBackgroundLightAlphaHover,\n },\n ':active': {\n backgroundColor: tokens.colorSubtleBackgroundLightAlphaPressed,\n },\n },\n transparent: {\n backgroundColor: tokens.colorTransparentBackground,\n ':hover': {\n backgroundColor: tokens.colorTransparentBackgroundHover,\n },\n ':active': {\n backgroundColor: tokens.colorTransparentBackgroundPressed,\n },\n },\n leaf: {\n paddingLeft: `calc(var(${treeItemLevelToken}, 1) * ${tokens.spacingHorizontalXXL})`,\n },\n});\n\n/**\n * Styles for the expand icon slot\n */\nconst useExpandIconStyles = makeStyles({\n base: {\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n minWidth: '24px',\n boxSizing: 'border-box',\n color: tokens.colorNeutralForeground3,\n ...shorthands.padding(tokens.spacingVerticalXS, 0),\n },\n});\n\n/**\n * Styles for the action icon slot\n */\nconst useActionsStyles = makeStyles({\n base: {\n display: 'none',\n marginLeft: 'auto',\n ...shorthands.padding(0, tokens.spacingHorizontalS),\n },\n open: {\n display: 'flex',\n position: 'relative',\n },\n});\n\nexport const expandIconInlineStyles = {\n 90: { transform: `rotate(90deg)` },\n 0: { transform: `rotate(0deg)` },\n 180: { transform: `rotate(180deg)` },\n} as const;\n\n/**\n * Apply styling to the TreeItem slots based on the state\n */\nexport const useTreeItemStyles_unstable = (state: TreeItemState): TreeItemState => {\n const rootStyles = useRootStyles();\n const contentStyles = useContentStyles();\n const expandIconStyles = useExpandIconStyles();\n const actionsStyles = useActionsStyles();\n\n const appearance = useTreeContext_unstable(ctx => ctx.appearance);\n\n const { actions, subtree, expandIcon, isActionsVisible: showActions, level } = state;\n\n state.root.className = mergeClasses(\n treeItemClassNames.root,\n isStaticallyDefinedLevel(level) && rootStyles[`level${level}` as StaticLevelProperty],\n state.root.className,\n );\n\n state.content.className = mergeClasses(\n treeItemClassNames.content,\n contentStyles.base,\n contentStyles[appearance],\n contentStyles.focusIndicator,\n state.isLeaf && contentStyles.leaf,\n state.content.className,\n );\n\n if (expandIcon) {\n expandIcon.className = mergeClasses(treeItemClassNames.expandIcon, expandIconStyles.base, expandIcon.className);\n }\n if (actions) {\n actions.className = mergeClasses(\n treeItemClassNames.actions,\n actionsStyles.base,\n showActions && actionsStyles.open,\n actions.className,\n );\n }\n if (subtree) {\n subtree.className = mergeClasses(treeItemClassNames.subtree, subtree.className);\n }\n\n return state;\n};\n\nfunction isStaticallyDefinedLevel(level: number): level is StaticLevel {\n return level >= 1 && level <= 10;\n}\n"],"mappings":"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"}
|
|
@@ -1,98 +0,0 @@
|
|
|
1
|
-
import { __styles, mergeClasses, shorthands } from '@griffel/react';
|
|
2
|
-
import { tokens, typographyStyles } from '@fluentui/react-theme';
|
|
3
|
-
import { useTreeContext_unstable } from '../../contexts/treeContext';
|
|
4
|
-
export const treeItemLayoutClassNames = {
|
|
5
|
-
root: 'fui-TreeItemLayout',
|
|
6
|
-
aside: 'fui-TreeItemLayout__aside',
|
|
7
|
-
iconAfter: 'fui-TreeItemLayout__iconAfter',
|
|
8
|
-
iconBefore: 'fui-TreeItemLayout__iconBefore'
|
|
9
|
-
};
|
|
10
|
-
/**
|
|
11
|
-
* Styles for the root slot
|
|
12
|
-
*/
|
|
13
|
-
const useRootStyles = /*#__PURE__*/__styles({
|
|
14
|
-
base: {
|
|
15
|
-
mc9l5x: "f22iagw",
|
|
16
|
-
Bt984gj: "f122n59",
|
|
17
|
-
sshi5w: "f1nxs5xn",
|
|
18
|
-
Bh6795r: "fqerorx",
|
|
19
|
-
Bnnss6s: "f1neuvcm",
|
|
20
|
-
xawz: "f1pztt34"
|
|
21
|
-
},
|
|
22
|
-
medium: {
|
|
23
|
-
i8kkvl: "f1rjii52",
|
|
24
|
-
Bahqtrf: "fk6fouc",
|
|
25
|
-
Be2twd7: "fkhj508",
|
|
26
|
-
Bhrd7zp: "figsok6",
|
|
27
|
-
Bg96gwp: "f1i3iumi"
|
|
28
|
-
},
|
|
29
|
-
small: {
|
|
30
|
-
i8kkvl: "f1ufnopg",
|
|
31
|
-
sshi5w: "f1pha7fy",
|
|
32
|
-
Bahqtrf: "fk6fouc",
|
|
33
|
-
Be2twd7: "fy9rknc",
|
|
34
|
-
Bhrd7zp: "figsok6",
|
|
35
|
-
Bg96gwp: "fwrc4pm"
|
|
36
|
-
}
|
|
37
|
-
}, {
|
|
38
|
-
d: [".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}", ".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}", ".f1nxs5xn{min-height:32px;}", ".fqerorx{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;}", ".f1neuvcm{-webkit-flex-shrink:1;-ms-flex-negative:1;flex-shrink:1;}", ".f1pztt34{-webkit-flex-basis:0;-ms-flex-preferred-size:0;flex-basis:0;}", ".f1rjii52{-webkit-column-gap:var(--spacingHorizontalSNudge);column-gap:var(--spacingHorizontalSNudge);}", ".fk6fouc{font-family:var(--fontFamilyBase);}", ".fkhj508{font-size:var(--fontSizeBase300);}", ".figsok6{font-weight:var(--fontWeightRegular);}", ".f1i3iumi{line-height:var(--lineHeightBase300);}", ".f1ufnopg{-webkit-column-gap:var(--spacingHorizontalXS);column-gap:var(--spacingHorizontalXS);}", ".f1pha7fy{min-height:24px;}", ".fy9rknc{font-size:var(--fontSizeBase200);}", ".fwrc4pm{line-height:var(--lineHeightBase200);}"]
|
|
39
|
-
});
|
|
40
|
-
/**
|
|
41
|
-
* Styles for the before/after icon slot
|
|
42
|
-
*/
|
|
43
|
-
const useIconStyles = /*#__PURE__*/__styles({
|
|
44
|
-
base: {
|
|
45
|
-
mc9l5x: "f22iagw",
|
|
46
|
-
Bt984gj: "f122n59",
|
|
47
|
-
sj55zd: "fkfq4zb",
|
|
48
|
-
Bg96gwp: "f106mvju",
|
|
49
|
-
Be2twd7: "f1pp30po"
|
|
50
|
-
}
|
|
51
|
-
}, {
|
|
52
|
-
d: [".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}", ".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}", ".fkfq4zb{color:var(--colorNeutralForeground2);}", ".f106mvju{line-height:var(--lineHeightBase500);}", ".f1pp30po{font-size:var(--fontSizeBase500);}"]
|
|
53
|
-
});
|
|
54
|
-
/**
|
|
55
|
-
* Styles for the action icon slot
|
|
56
|
-
*/
|
|
57
|
-
const useAsideStyles = /*#__PURE__*/__styles({
|
|
58
|
-
base: {
|
|
59
|
-
mc9l5x: "f22iagw",
|
|
60
|
-
Bt984gj: "f122n59",
|
|
61
|
-
Frg6f3: ["fcgxt0o", "f1ujusj6"],
|
|
62
|
-
z8tnut: "f1g0x7ka",
|
|
63
|
-
z189sj: ["fw5db7e", "f1uw59to"],
|
|
64
|
-
Byoj8tv: "f1qch9an",
|
|
65
|
-
uwmqm3: ["f1uw59to", "fw5db7e"],
|
|
66
|
-
i8kkvl: "f1ufnopg",
|
|
67
|
-
Belr9w4: "f14sijuj"
|
|
68
|
-
}
|
|
69
|
-
}, {
|
|
70
|
-
d: [".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}", ".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}", ".fcgxt0o{margin-left:auto;}", ".f1ujusj6{margin-right:auto;}", ".f1g0x7ka{padding-top:0;}", ".fw5db7e{padding-right:var(--spacingHorizontalM);}", ".f1uw59to{padding-left:var(--spacingHorizontalM);}", ".f1qch9an{padding-bottom:0;}", ".f1ufnopg{-webkit-column-gap:var(--spacingHorizontalXS);column-gap:var(--spacingHorizontalXS);}", ".f14sijuj{row-gap:var(--spacingHorizontalXS);}"]
|
|
71
|
-
});
|
|
72
|
-
/**
|
|
73
|
-
* Apply styling to the TreeItemLayout slots based on the state
|
|
74
|
-
*/
|
|
75
|
-
export const useTreeItemLayoutStyles_unstable = state => {
|
|
76
|
-
const {
|
|
77
|
-
iconAfter,
|
|
78
|
-
iconBefore,
|
|
79
|
-
aside,
|
|
80
|
-
root
|
|
81
|
-
} = state;
|
|
82
|
-
const rootStyles = useRootStyles();
|
|
83
|
-
const iconStyles = useIconStyles();
|
|
84
|
-
const asideStyles = useAsideStyles();
|
|
85
|
-
const size = useTreeContext_unstable(ctx => ctx.size);
|
|
86
|
-
root.className = mergeClasses(treeItemLayoutClassNames.root, rootStyles.base, rootStyles[size], root.className);
|
|
87
|
-
if (iconBefore) {
|
|
88
|
-
iconBefore.className = mergeClasses(treeItemLayoutClassNames.iconBefore, iconStyles.base, iconBefore.className);
|
|
89
|
-
}
|
|
90
|
-
if (iconAfter) {
|
|
91
|
-
iconAfter.className = mergeClasses(treeItemLayoutClassNames.iconAfter, iconStyles.base, iconAfter.className);
|
|
92
|
-
}
|
|
93
|
-
if (aside) {
|
|
94
|
-
aside.className = mergeClasses(treeItemLayoutClassNames.aside, asideStyles.base, aside.className);
|
|
95
|
-
}
|
|
96
|
-
return state;
|
|
97
|
-
};
|
|
98
|
-
//# sourceMappingURL=useTreeItemLayoutStyles.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"names":["__styles","mergeClasses","shorthands","tokens","typographyStyles","useTreeContext_unstable","treeItemLayoutClassNames","root","aside","iconAfter","iconBefore","useRootStyles","base","mc9l5x","Bt984gj","sshi5w","Bh6795r","Bnnss6s","xawz","medium","i8kkvl","Bahqtrf","Be2twd7","Bhrd7zp","Bg96gwp","small","d","useIconStyles","sj55zd","useAsideStyles","Frg6f3","z8tnut","z189sj","Byoj8tv","uwmqm3","Belr9w4","useTreeItemLayoutStyles_unstable","state","rootStyles","iconStyles","asideStyles","size","ctx","className"],"sources":["../../../src/components/TreeItemLayout/useTreeItemLayoutStyles.ts"],"sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport type { TreeItemLayoutSlots, TreeItemLayoutState } from './TreeItemLayout.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { useTreeContext_unstable } from '../../contexts/treeContext';\n\nexport const treeItemLayoutClassNames: SlotClassNames<TreeItemLayoutSlots> = {\n root: 'fui-TreeItemLayout',\n aside: 'fui-TreeItemLayout__aside',\n iconAfter: 'fui-TreeItemLayout__iconAfter',\n iconBefore: 'fui-TreeItemLayout__iconBefore',\n};\n\n/**\n * Styles for the root slot\n */\nconst useRootStyles = makeStyles({\n base: {\n display: 'flex',\n alignItems: 'center',\n minHeight: '32px',\n ...shorthands.flex(1),\n },\n medium: {\n columnGap: tokens.spacingHorizontalSNudge,\n ...typographyStyles.body1,\n },\n small: {\n columnGap: tokens.spacingHorizontalXS,\n minHeight: '24px',\n ...typographyStyles.caption1,\n },\n});\n\n/**\n * Styles for the before/after icon slot\n */\nconst useIconStyles = makeStyles({\n base: {\n display: 'flex',\n alignItems: 'center',\n color: tokens.colorNeutralForeground2,\n lineHeight: tokens.lineHeightBase500,\n fontSize: tokens.fontSizeBase500,\n },\n});\n\n/**\n * Styles for the action icon slot\n */\nconst useAsideStyles = makeStyles({\n base: {\n display: 'flex',\n alignItems: 'center',\n marginLeft: 'auto',\n ...shorthands.padding(0, tokens.spacingHorizontalM),\n ...shorthands.gap(tokens.spacingHorizontalXS),\n },\n});\n\n/**\n * Apply styling to the TreeItemLayout slots based on the state\n */\nexport const useTreeItemLayoutStyles_unstable = (state: TreeItemLayoutState): TreeItemLayoutState => {\n const { iconAfter, iconBefore, aside, root } = state;\n const rootStyles = useRootStyles();\n const iconStyles = useIconStyles();\n const asideStyles = useAsideStyles();\n\n const size = useTreeContext_unstable(ctx => ctx.size);\n\n root.className = mergeClasses(treeItemLayoutClassNames.root, rootStyles.base, rootStyles[size], root.className);\n\n if (iconBefore) {\n iconBefore.className = mergeClasses(treeItemLayoutClassNames.iconBefore, iconStyles.base, iconBefore.className);\n }\n\n if (iconAfter) {\n iconAfter.className = mergeClasses(treeItemLayoutClassNames.iconAfter, iconStyles.base, iconAfter.className);\n }\n\n if (aside) {\n aside.className = mergeClasses(treeItemLayoutClassNames.aside, asideStyles.base, aside.className);\n }\n\n return state;\n};\n"],"mappings":"AAAA,SAAAA,QAAA,EAAqBC,YAAY,EAAEC,UAAU,QAAQ;AAGrD,SAASC,MAAM,EAAEC,gBAAgB,QAAQ;AACzC,SAASC,uBAAuB,QAAQ;AAExC,OAAO,MAAMC,wBAAA,GAAgE;EAC3EC,IAAA,EAAM;EACNC,KAAA,EAAO;EACPC,SAAA,EAAW;EACXC,UAAA,EAAY;AACd;AAEA;;;AAGA,MAAMC,aAAA,gBAAgBX,QAAA;EAAAY,IAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,IAAA;EAAA;EAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;EAAA;EAAAC,KAAA;IAAAL,MAAA;IAAAL,MAAA;IAAAM,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;EAAA;AAAA;EAAAE,CAAA;AAAA,EAgBtB;AAEA;;;AAGA,MAAMC,aAAA,gBAAgB3B,QAAA;EAAAY,IAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAc,MAAA;IAAAJ,OAAA;IAAAF,OAAA;EAAA;AAAA;EAAAI,CAAA;AAAA,EAQtB;AAEA;;;AAGA,MAAMG,cAAA,gBAAiB7B,QAAA;EAAAY,IAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAgB,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAd,MAAA;IAAAe,OAAA;EAAA;AAAA;EAAAT,CAAA;AAAA,EAQvB;AAEA;;;AAGA,OAAO,MAAMU,gCAAA,GAAoCC,KAAA,IAAoD;EACnG,MAAM;IAAE5B,SAAA;IAAWC,UAAA;IAAYF,KAAA;IAAOD;EAAI,CAAE,GAAG8B,KAAA;EAC/C,MAAMC,UAAA,GAAa3B,aAAA;EACnB,MAAM4B,UAAA,GAAaZ,aAAA;EACnB,MAAMa,WAAA,GAAcX,cAAA;EAEpB,MAAMY,IAAA,GAAOpC,uBAAA,CAAwBqC,GAAA,IAAOA,GAAA,CAAID,IAAI;EAEpDlC,IAAA,CAAKoC,SAAS,GAAG1C,YAAA,CAAaK,wBAAA,CAAyBC,IAAI,EAAE+B,UAAA,CAAW1B,IAAI,EAAE0B,UAAU,CAACG,IAAA,CAAK,EAAElC,IAAA,CAAKoC,SAAS;EAE9G,IAAIjC,UAAA,EAAY;IACdA,UAAA,CAAWiC,SAAS,GAAG1C,YAAA,CAAaK,wBAAA,CAAyBI,UAAU,EAAE6B,UAAA,CAAW3B,IAAI,EAAEF,UAAA,CAAWiC,SAAS;EAChH;EAEA,IAAIlC,SAAA,EAAW;IACbA,SAAA,CAAUkC,SAAS,GAAG1C,YAAA,CAAaK,wBAAA,CAAyBG,SAAS,EAAE8B,UAAA,CAAW3B,IAAI,EAAEH,SAAA,CAAUkC,SAAS;EAC7G;EAEA,IAAInC,KAAA,EAAO;IACTA,KAAA,CAAMmC,SAAS,GAAG1C,YAAA,CAAaK,wBAAA,CAAyBE,KAAK,EAAEgC,WAAA,CAAY5B,IAAI,EAAEJ,KAAA,CAAMmC,SAAS;EAClG;EAEA,OAAON,KAAA;AACT"}
|
|
@@ -1,115 +0,0 @@
|
|
|
1
|
-
import { __styles, mergeClasses, shorthands } from '@griffel/react';
|
|
2
|
-
import { tokens, typographyStyles } from '@fluentui/react-theme';
|
|
3
|
-
export const treeItemPersonaLayoutClassNames = {
|
|
4
|
-
root: 'fui-TreeItemPersonaLayout',
|
|
5
|
-
media: 'fui-TreeItemPersonaLayout__media',
|
|
6
|
-
content: 'fui-TreeItemPersonaLayout__content',
|
|
7
|
-
description: 'fui-TreeItemPersonaLayout__description',
|
|
8
|
-
aside: 'fui-TreeItemPersonaLayout__aside',
|
|
9
|
-
main: 'fui-TreeItemPersonaLayout__main'
|
|
10
|
-
};
|
|
11
|
-
/**
|
|
12
|
-
* Styles for the root slot
|
|
13
|
-
*/
|
|
14
|
-
const useRootStyles = /*#__PURE__*/__styles({
|
|
15
|
-
base: {
|
|
16
|
-
a9b677: "fly5x3f",
|
|
17
|
-
mc9l5x: "f22iagw",
|
|
18
|
-
Bt984gj: "f122n59"
|
|
19
|
-
}
|
|
20
|
-
}, {
|
|
21
|
-
d: [".fly5x3f{width:100%;}", ".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}", ".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}"]
|
|
22
|
-
});
|
|
23
|
-
/**
|
|
24
|
-
* Styles for the expand icon slot
|
|
25
|
-
*/
|
|
26
|
-
const useMediaStyles = /*#__PURE__*/__styles({
|
|
27
|
-
base: {
|
|
28
|
-
mc9l5x: "f22iagw",
|
|
29
|
-
Bt984gj: "f122n59",
|
|
30
|
-
a9b677: "f1szoe96",
|
|
31
|
-
Bqenvij: "f1d2rq10",
|
|
32
|
-
z8tnut: "f1g0x7ka",
|
|
33
|
-
z189sj: ["f7x41pl", "fruq291"],
|
|
34
|
-
Byoj8tv: "f1qch9an",
|
|
35
|
-
uwmqm3: ["fgiv446", "ffczdla"]
|
|
36
|
-
}
|
|
37
|
-
}, {
|
|
38
|
-
d: [".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}", ".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}", ".f1szoe96{width:32px;}", ".f1d2rq10{height:32px;}", ".f1g0x7ka{padding-top:0;}", ".f7x41pl{padding-right:var(--spacingHorizontalXS);}", ".fruq291{padding-left:var(--spacingHorizontalXS);}", ".f1qch9an{padding-bottom:0;}", ".fgiv446{padding-left:var(--spacingHorizontalXXS);}", ".ffczdla{padding-right:var(--spacingHorizontalXXS);}"]
|
|
39
|
-
});
|
|
40
|
-
const useContentStyles = /*#__PURE__*/__styles({
|
|
41
|
-
base: {
|
|
42
|
-
a9b677: "fly5x3f",
|
|
43
|
-
mc9l5x: "f22iagw",
|
|
44
|
-
Beiy3e4: "f1vx9l62",
|
|
45
|
-
z8tnut: "f1ngh7ph",
|
|
46
|
-
z189sj: ["f7x41pl", "fruq291"],
|
|
47
|
-
Byoj8tv: "f5o476b",
|
|
48
|
-
uwmqm3: ["f1f5gg8d", "f1vdfbxk"],
|
|
49
|
-
i8kkvl: "f1fps8zv",
|
|
50
|
-
Belr9w4: "fws515f"
|
|
51
|
-
}
|
|
52
|
-
}, {
|
|
53
|
-
d: [".fly5x3f{width:100%;}", ".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}", ".f1vx9l62{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}", ".f1ngh7ph{padding-top:var(--spacingVerticalMNudge);}", ".f7x41pl{padding-right:var(--spacingHorizontalXS);}", ".fruq291{padding-left:var(--spacingHorizontalXS);}", ".f5o476b{padding-bottom:var(--spacingVerticalMNudge);}", ".f1f5gg8d{padding-left:var(--spacingHorizontalS);}", ".f1vdfbxk{padding-right:var(--spacingHorizontalS);}", ".f1fps8zv{-webkit-column-gap:var(--spacingVerticalNone);column-gap:var(--spacingVerticalNone);}", ".fws515f{row-gap:var(--spacingHorizontalNone);}"]
|
|
54
|
-
});
|
|
55
|
-
const useMainStyles = /*#__PURE__*/__styles({
|
|
56
|
-
base: {
|
|
57
|
-
Bahqtrf: "fk6fouc",
|
|
58
|
-
Be2twd7: "fkhj508",
|
|
59
|
-
Bhrd7zp: "figsok6",
|
|
60
|
-
Bg96gwp: "f1i3iumi"
|
|
61
|
-
}
|
|
62
|
-
}, {
|
|
63
|
-
d: [".fk6fouc{font-family:var(--fontFamilyBase);}", ".fkhj508{font-size:var(--fontSizeBase300);}", ".figsok6{font-weight:var(--fontWeightRegular);}", ".f1i3iumi{line-height:var(--lineHeightBase300);}"]
|
|
64
|
-
});
|
|
65
|
-
const useDescriptionStyles = /*#__PURE__*/__styles({
|
|
66
|
-
base: {
|
|
67
|
-
Bahqtrf: "fk6fouc",
|
|
68
|
-
Be2twd7: "fy9rknc",
|
|
69
|
-
Bhrd7zp: "figsok6",
|
|
70
|
-
Bg96gwp: "fwrc4pm"
|
|
71
|
-
}
|
|
72
|
-
}, {
|
|
73
|
-
d: [".fk6fouc{font-family:var(--fontFamilyBase);}", ".fy9rknc{font-size:var(--fontSizeBase200);}", ".figsok6{font-weight:var(--fontWeightRegular);}", ".fwrc4pm{line-height:var(--lineHeightBase200);}"]
|
|
74
|
-
});
|
|
75
|
-
const useAsideStyles = /*#__PURE__*/__styles({
|
|
76
|
-
base: {
|
|
77
|
-
mc9l5x: "f22iagw",
|
|
78
|
-
Beiy3e4: "f1vx9l62",
|
|
79
|
-
Huce71: "fz5stix",
|
|
80
|
-
z189sj: ["fw5db7e", "f1uw59to"],
|
|
81
|
-
Bahqtrf: "fk6fouc",
|
|
82
|
-
Be2twd7: "fy9rknc",
|
|
83
|
-
Bhrd7zp: "figsok6",
|
|
84
|
-
Bg96gwp: "fwrc4pm"
|
|
85
|
-
}
|
|
86
|
-
}, {
|
|
87
|
-
d: [".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}", ".f1vx9l62{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}", ".fz5stix{white-space:nowrap;}", ".fw5db7e{padding-right:var(--spacingHorizontalM);}", ".f1uw59to{padding-left:var(--spacingHorizontalM);}", ".fk6fouc{font-family:var(--fontFamilyBase);}", ".fy9rknc{font-size:var(--fontSizeBase200);}", ".figsok6{font-weight:var(--fontWeightRegular);}", ".fwrc4pm{line-height:var(--lineHeightBase200);}"]
|
|
88
|
-
});
|
|
89
|
-
/**
|
|
90
|
-
* Apply styling to the TreeItemPersonaLayout slots based on the state
|
|
91
|
-
*/
|
|
92
|
-
export const useTreeItemPersonaLayoutStyles_unstable = state => {
|
|
93
|
-
const rootStyles = useRootStyles();
|
|
94
|
-
const mediaStyles = useMediaStyles();
|
|
95
|
-
const contentStyles = useContentStyles();
|
|
96
|
-
const mainStyles = useMainStyles();
|
|
97
|
-
const descriptionStyles = useDescriptionStyles();
|
|
98
|
-
const asideStyles = useAsideStyles();
|
|
99
|
-
state.root.className = mergeClasses(treeItemPersonaLayoutClassNames.root, rootStyles.base, state.root.className);
|
|
100
|
-
state.media.className = mergeClasses(treeItemPersonaLayoutClassNames.media, mediaStyles.base, state.media.className);
|
|
101
|
-
if (state.content) {
|
|
102
|
-
state.content.className = mergeClasses(treeItemPersonaLayoutClassNames.content, contentStyles.base, state.content.className);
|
|
103
|
-
}
|
|
104
|
-
if (state.main) {
|
|
105
|
-
state.main.className = mergeClasses(treeItemPersonaLayoutClassNames.main, mainStyles.base, state.main.className);
|
|
106
|
-
}
|
|
107
|
-
if (state.description) {
|
|
108
|
-
state.description.className = mergeClasses(treeItemPersonaLayoutClassNames.description, descriptionStyles.base, state.description.className);
|
|
109
|
-
}
|
|
110
|
-
if (state.aside) {
|
|
111
|
-
state.aside.className = mergeClasses(treeItemPersonaLayoutClassNames.aside, asideStyles.base, state.aside.className);
|
|
112
|
-
}
|
|
113
|
-
return state;
|
|
114
|
-
};
|
|
115
|
-
//# sourceMappingURL=useTreeItemPersonaLayoutStyles.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"names":["__styles","mergeClasses","shorthands","tokens","typographyStyles","treeItemPersonaLayoutClassNames","root","media","content","description","aside","main","useRootStyles","base","a9b677","mc9l5x","Bt984gj","d","useMediaStyles","Bqenvij","z8tnut","z189sj","Byoj8tv","uwmqm3","useContentStyles","Beiy3e4","i8kkvl","Belr9w4","useMainStyles","Bahqtrf","Be2twd7","Bhrd7zp","Bg96gwp","useDescriptionStyles","useAsideStyles","Huce71","useTreeItemPersonaLayoutStyles_unstable","state","rootStyles","mediaStyles","contentStyles","mainStyles","descriptionStyles","asideStyles","className"],"sources":["../../../src/components/TreeItemPersonaLayout/useTreeItemPersonaLayoutStyles.ts"],"sourcesContent":["import type { TreeItemPersonaLayoutSlots, TreeItemPersonaLayoutState } from './TreeItemPersonaLayout.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\n\nexport const treeItemPersonaLayoutClassNames: SlotClassNames<TreeItemPersonaLayoutSlots> = {\n root: 'fui-TreeItemPersonaLayout',\n media: 'fui-TreeItemPersonaLayout__media',\n content: 'fui-TreeItemPersonaLayout__content',\n description: 'fui-TreeItemPersonaLayout__description',\n aside: 'fui-TreeItemPersonaLayout__aside',\n main: 'fui-TreeItemPersonaLayout__main',\n};\n\n/**\n * Styles for the root slot\n */\nconst useRootStyles = makeStyles({\n base: {\n width: '100%',\n display: 'flex',\n alignItems: 'center',\n },\n});\n\n/**\n * Styles for the expand icon slot\n */\nconst useMediaStyles = makeStyles({\n base: {\n display: 'flex',\n alignItems: 'center',\n width: '32px',\n height: '32px',\n ...shorthands.padding(0, tokens.spacingHorizontalXS, 0, tokens.spacingHorizontalXXS),\n },\n});\n\nconst useContentStyles = makeStyles({\n base: {\n width: '100%',\n display: 'flex',\n flexDirection: 'column',\n ...shorthands.padding(\n tokens.spacingVerticalMNudge,\n tokens.spacingHorizontalXS,\n tokens.spacingVerticalMNudge,\n tokens.spacingHorizontalS,\n ),\n ...shorthands.gap(tokens.spacingVerticalNone, tokens.spacingHorizontalNone),\n },\n});\nconst useMainStyles = makeStyles({\n base: {\n ...typographyStyles.body1,\n },\n});\nconst useDescriptionStyles = makeStyles({\n base: {\n ...typographyStyles.caption1,\n },\n});\nconst useAsideStyles = makeStyles({\n base: {\n display: 'flex',\n flexDirection: 'column',\n whiteSpace: 'nowrap',\n paddingRight: tokens.spacingHorizontalM,\n ...typographyStyles.caption1,\n },\n});\n\n/**\n * Apply styling to the TreeItemPersonaLayout slots based on the state\n */\nexport const useTreeItemPersonaLayoutStyles_unstable = (\n state: TreeItemPersonaLayoutState,\n): TreeItemPersonaLayoutState => {\n const rootStyles = useRootStyles();\n const mediaStyles = useMediaStyles();\n const contentStyles = useContentStyles();\n const mainStyles = useMainStyles();\n const descriptionStyles = useDescriptionStyles();\n const asideStyles = useAsideStyles();\n\n state.root.className = mergeClasses(treeItemPersonaLayoutClassNames.root, rootStyles.base, state.root.className);\n\n state.media.className = mergeClasses(treeItemPersonaLayoutClassNames.media, mediaStyles.base, state.media.className);\n\n if (state.content) {\n state.content.className = mergeClasses(\n treeItemPersonaLayoutClassNames.content,\n contentStyles.base,\n state.content.className,\n );\n }\n if (state.main) {\n state.main.className = mergeClasses(treeItemPersonaLayoutClassNames.main, mainStyles.base, state.main.className);\n }\n if (state.description) {\n state.description.className = mergeClasses(\n treeItemPersonaLayoutClassNames.description,\n descriptionStyles.base,\n state.description.className,\n );\n }\n if (state.aside) {\n state.aside.className = mergeClasses(\n treeItemPersonaLayoutClassNames.aside,\n asideStyles.base,\n state.aside.className,\n );\n }\n\n return state;\n};\n"],"mappings":"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"}
|
package/lib/hooks/index.js
DELETED
package/lib/hooks/index.js.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"names":[],"sources":["../../src/hooks/index.ts"],"sourcesContent":["export * from './useFlatTree';\nexport * from './useNestedTreeNavigation';\nexport * from './useOpenItemsState';\n"],"mappings":"AAAA,cAAc;AACd,cAAc;AACd,cAAc"}
|
package/lib/hooks/useFlatTree.js
DELETED
|
@@ -1,77 +0,0 @@
|
|
|
1
|
-
import { useEventCallback } from '@fluentui/react-utilities';
|
|
2
|
-
import * as React from 'react';
|
|
3
|
-
import { createFlatTreeItems, VisibleFlatTreeItemGenerator } from '../utils/createFlatTreeItems';
|
|
4
|
-
import { treeDataTypes } from '../utils/tokens';
|
|
5
|
-
import { useFlatTreeNavigation } from './useFlatTreeNavigation';
|
|
6
|
-
import { useOpenItemsState } from './useOpenItemsState';
|
|
7
|
-
/**
|
|
8
|
-
* this hook provides FlatTree API to manage all required mechanisms to convert a list of items into renderable TreeItems
|
|
9
|
-
* in multiple scenarios including virtualization.
|
|
10
|
-
*
|
|
11
|
-
* !!A flat tree is an unofficial spec for tree!!
|
|
12
|
-
*
|
|
13
|
-
* It should be used on cases where more complex interactions with a Tree is required.
|
|
14
|
-
* On simple scenarios it is advised to simply use a nested structure instead.
|
|
15
|
-
*
|
|
16
|
-
* @param flatTreeItemProps - a list of tree items
|
|
17
|
-
* @param options - in case control over the internal openItems is required
|
|
18
|
-
*/
|
|
19
|
-
export function useFlatTree_unstable(flatTreeItemProps, options = {}) {
|
|
20
|
-
const [openItems, updateOpenItems] = useOpenItemsState(options);
|
|
21
|
-
const flatTreeItems = React.useMemo(() => createFlatTreeItems(flatTreeItemProps), [flatTreeItemProps]);
|
|
22
|
-
const [navigate, navigationRef] = useFlatTreeNavigation(flatTreeItems);
|
|
23
|
-
const handleOpenChange = useEventCallback((event, data) => {
|
|
24
|
-
var _options_onOpenChange;
|
|
25
|
-
(_options_onOpenChange = options.onOpenChange) === null || _options_onOpenChange === void 0 ? void 0 : _options_onOpenChange.call(options, event, data);
|
|
26
|
-
if (!event.isDefaultPrevented()) {
|
|
27
|
-
updateOpenItems(data);
|
|
28
|
-
}
|
|
29
|
-
event.preventDefault();
|
|
30
|
-
});
|
|
31
|
-
const handleNavigation = useEventCallback((event, data) => {
|
|
32
|
-
var _options_onNavigation_unstable;
|
|
33
|
-
(_options_onNavigation_unstable = options.onNavigation_unstable) === null || _options_onNavigation_unstable === void 0 ? void 0 : _options_onNavigation_unstable.call(options, event, data);
|
|
34
|
-
if (!event.isDefaultPrevented()) {
|
|
35
|
-
navigate(data);
|
|
36
|
-
}
|
|
37
|
-
event.preventDefault();
|
|
38
|
-
});
|
|
39
|
-
const getNextNavigableItem = useEventCallback((visibleItems, data) => {
|
|
40
|
-
const item = flatTreeItems.get(data.target.id);
|
|
41
|
-
if (item) {
|
|
42
|
-
switch (data.type) {
|
|
43
|
-
case treeDataTypes.typeAhead:
|
|
44
|
-
return item;
|
|
45
|
-
case treeDataTypes.arrowLeft:
|
|
46
|
-
return flatTreeItems.get(item.parentId);
|
|
47
|
-
case treeDataTypes.arrowRight:
|
|
48
|
-
return visibleItems[item.index + 1];
|
|
49
|
-
case treeDataTypes.end:
|
|
50
|
-
return visibleItems[visibleItems.length - 1];
|
|
51
|
-
case treeDataTypes.home:
|
|
52
|
-
return visibleItems[0];
|
|
53
|
-
case treeDataTypes.arrowDown:
|
|
54
|
-
return visibleItems[item.index + 1];
|
|
55
|
-
case treeDataTypes.arrowUp:
|
|
56
|
-
return visibleItems[item.index - 1];
|
|
57
|
-
}
|
|
58
|
-
}
|
|
59
|
-
});
|
|
60
|
-
const getTreeProps = React.useCallback(() => ({
|
|
61
|
-
ref: navigationRef,
|
|
62
|
-
openItems,
|
|
63
|
-
onOpenChange: handleOpenChange,
|
|
64
|
-
// eslint-disable-next-line @typescript-eslint/naming-convention
|
|
65
|
-
onNavigation_unstable: handleNavigation
|
|
66
|
-
}),
|
|
67
|
-
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
68
|
-
[openItems]);
|
|
69
|
-
const items = React.useCallback(() => VisibleFlatTreeItemGenerator(openItems, flatTreeItems), [openItems, flatTreeItems]);
|
|
70
|
-
return React.useMemo(() => ({
|
|
71
|
-
navigate,
|
|
72
|
-
getTreeProps,
|
|
73
|
-
getNextNavigableItem,
|
|
74
|
-
items
|
|
75
|
-
}), [navigate, getTreeProps, getNextNavigableItem, items]);
|
|
76
|
-
}
|
|
77
|
-
//# sourceMappingURL=useFlatTree.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"names":["useEventCallback","React","createFlatTreeItems","VisibleFlatTreeItemGenerator","treeDataTypes","useFlatTreeNavigation","useOpenItemsState","useFlatTree_unstable","flatTreeItemProps","options","openItems","updateOpenItems","flatTreeItems","useMemo","navigate","navigationRef","handleOpenChange","event","data","_options_onOpenChange","onOpenChange","call","isDefaultPrevented","preventDefault","handleNavigation","_options_onNavigation_unstable","onNavigation_unstable","getNextNavigableItem","visibleItems","item","get","target","id","type","typeAhead","arrowLeft","parentId","arrowRight","index","end","length","home","arrowDown","arrowUp","getTreeProps","useCallback","ref","items"],"sources":["../../src/hooks/useFlatTree.ts"],"sourcesContent":["import { useEventCallback } from '@fluentui/react-utilities';\nimport * as React from 'react';\nimport { createFlatTreeItems, VisibleFlatTreeItemGenerator } from '../utils/createFlatTreeItems';\nimport { treeDataTypes } from '../utils/tokens';\nimport { useFlatTreeNavigation } from './useFlatTreeNavigation';\nimport { useOpenItemsState } from './useOpenItemsState';\nimport type {\n TreeNavigationData_unstable,\n TreeNavigationEvent_unstable,\n TreeOpenChangeData,\n TreeOpenChangeEvent,\n TreeProps,\n} from '../Tree';\nimport type { TreeItemId, TreeItemProps } from '../TreeItem';\n\nexport type FlatTreeItemProps = TreeItemProps & {\n id: TreeItemId;\n parentId?: string;\n};\n\nexport type FlatTreeItem = Readonly<MutableFlatTreeItem>;\n\n/**\n * @internal\n * Used internally on createFlatTreeItems and VisibleFlatTreeItemGenerator\n * to ensure required properties when building a FlatTreeITem\n */\nexport type MutableFlatTreeItem = {\n parentId?: string;\n childrenSize: number;\n index: number;\n id: string;\n level: number;\n getTreeItemProps(): Required<Pick<TreeItemProps, 'id' | 'aria-setsize' | 'aria-level' | 'aria-posinset' | 'leaf'>> &\n TreeItemProps;\n};\n\nexport type FlatTreeProps = Required<\n Pick<TreeProps, 'openItems' | 'onOpenChange' | 'onNavigation_unstable'> & { ref: React.Ref<HTMLDivElement> }\n>;\n\n/**\n * FlatTree API to manage all required mechanisms to convert a list of items into renderable TreeItems\n * in multiple scenarios including virtualization.\n *\n * !!A flat tree is an unofficial spec for tree!!\n *\n * It should be used on cases where more complex interactions with a Tree is required.\n *\n * On simple scenarios it is advised to simply use a nested structure instead.\n */\nexport type FlatTree = {\n /**\n * returns the properties required for the Tree component to work properly.\n * That includes:\n * `openItems`, `onOpenChange`, `onNavigation_unstable` and `ref`\n */\n getTreeProps(): FlatTreeProps;\n /**\n * internal method used to react to an `onNavigation` event.\n * This method ensures proper navigation on keyboard and mouse interaction.\n * In case of virtualization it might be required to cancel default provided `onNavigation`\n * event and then call this method manually.\n *\n * @example\n * ```ts\n * // react-window\n * const handleNavigation = (event, data) => {\n * event.preventDefault();\n * const nextItem = tree.getNextNavigableItem(data);\n * // scroll to item using virtualization scroll mechanism\n * if (nextItem && document.getElementById(nextItem.id)) {\n * listRef.current.scrollToItem(nextItem.index);\n * }\n * // wait for scrolling to happen and then invoke navigate method\n * requestAnimationFrame(() => {\n * tree.navigate(data);\n * });\n * };\n *```\n */\n navigate(data: TreeNavigationData_unstable): void;\n /**\n * returns next item to be focused on a navigation.\n * This method is provided to decouple the element that needs to be focused from\n * the action of focusing it itself.\n *\n * On the case of TypeAhead navigation this method returns the current item.\n */\n getNextNavigableItem(visibleItems: FlatTreeItem[], data: TreeNavigationData_unstable): FlatTreeItem | undefined;\n /**\n * an iterable containing all visually available flat tree items\n */\n items(): IterableIterator<FlatTreeItem>;\n};\n\n/**\n * this hook provides FlatTree API to manage all required mechanisms to convert a list of items into renderable TreeItems\n * in multiple scenarios including virtualization.\n *\n * !!A flat tree is an unofficial spec for tree!!\n *\n * It should be used on cases where more complex interactions with a Tree is required.\n * On simple scenarios it is advised to simply use a nested structure instead.\n *\n * @param flatTreeItemProps - a list of tree items\n * @param options - in case control over the internal openItems is required\n */\nexport function useFlatTree_unstable(\n flatTreeItemProps: FlatTreeItemProps[],\n options: Pick<TreeProps, 'openItems' | 'defaultOpenItems' | 'onOpenChange' | 'onNavigation_unstable'> = {},\n): FlatTree {\n const [openItems, updateOpenItems] = useOpenItemsState(options);\n const flatTreeItems = React.useMemo(() => createFlatTreeItems(flatTreeItemProps), [flatTreeItemProps]);\n const [navigate, navigationRef] = useFlatTreeNavigation(flatTreeItems);\n\n const handleOpenChange = useEventCallback((event: TreeOpenChangeEvent, data: TreeOpenChangeData) => {\n options.onOpenChange?.(event, data);\n if (!event.isDefaultPrevented()) {\n updateOpenItems(data);\n }\n event.preventDefault();\n });\n\n const handleNavigation = useEventCallback(\n (event: TreeNavigationEvent_unstable, data: TreeNavigationData_unstable) => {\n options.onNavigation_unstable?.(event, data);\n if (!event.isDefaultPrevented()) {\n navigate(data);\n }\n event.preventDefault();\n },\n );\n\n const getNextNavigableItem = useEventCallback((visibleItems: FlatTreeItem[], data: TreeNavigationData_unstable) => {\n const item = flatTreeItems.get(data.target.id);\n if (item) {\n switch (data.type) {\n case treeDataTypes.typeAhead:\n return item;\n case treeDataTypes.arrowLeft:\n return flatTreeItems.get(item.parentId!);\n case treeDataTypes.arrowRight:\n return visibleItems[item.index + 1];\n case treeDataTypes.end:\n return visibleItems[visibleItems.length - 1];\n case treeDataTypes.home:\n return visibleItems[0];\n case treeDataTypes.arrowDown:\n return visibleItems[item.index + 1];\n case treeDataTypes.arrowUp:\n return visibleItems[item.index - 1];\n }\n }\n });\n\n const getTreeProps = React.useCallback(\n () => ({\n ref: navigationRef as React.Ref<HTMLDivElement>,\n openItems,\n onOpenChange: handleOpenChange,\n // eslint-disable-next-line @typescript-eslint/naming-convention\n onNavigation_unstable: handleNavigation,\n }),\n // eslint-disable-next-line react-hooks/exhaustive-deps\n [openItems],\n );\n\n const items = React.useCallback(\n () => VisibleFlatTreeItemGenerator(openItems, flatTreeItems),\n [openItems, flatTreeItems],\n );\n\n return React.useMemo(\n () => ({ navigate, getTreeProps, getNextNavigableItem, items }),\n [navigate, getTreeProps, getNextNavigableItem, items],\n );\n}\n"],"mappings":"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"}
|