@fluentui/react-tree 9.0.0-beta.11 → 9.0.0-beta.12
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 +52 -1
- package/CHANGELOG.md +17 -2
- package/dist/index.d.ts +73 -45
- package/lib/components/Tree/Tree.js.map +1 -1
- package/lib/components/Tree/Tree.types.js.map +1 -1
- package/lib/components/TreeItem/TreeItem.js +1 -1
- package/lib/components/TreeItem/TreeItem.js.map +1 -1
- package/lib/components/TreeItem/TreeItem.types.js.map +1 -1
- package/lib/components/TreeItem/useTreeItem.js +17 -4
- package/lib/components/TreeItem/useTreeItem.js.map +1 -1
- package/lib/components/TreeItemLayout/TreeItemLayout.types.js.map +1 -1
- package/lib/components/TreeItemLayout/useTreeItemLayout.js +2 -2
- package/lib/components/TreeItemLayout/useTreeItemLayout.js.map +1 -1
- package/lib/components/TreeItemPersonaLayout/useTreeItemPersonaLayoutStyles.js +7 -14
- package/lib/components/TreeItemPersonaLayout/useTreeItemPersonaLayoutStyles.js.map +1 -1
- package/lib/contexts/treeContext.js.map +1 -1
- package/lib/hooks/useFlatTree.js +2 -2
- package/lib/hooks/useFlatTree.js.map +1 -1
- package/lib/hooks/useFlatTreeNavigation.js +7 -5
- package/lib/hooks/useFlatTreeNavigation.js.map +1 -1
- package/lib/hooks/useNestedTreeNavigation.js +1 -1
- package/lib/hooks/useNestedTreeNavigation.js.map +1 -1
- package/lib/hooks/useOpenItemsState.js +2 -3
- package/lib/hooks/useOpenItemsState.js.map +1 -1
- package/lib/index.js.map +1 -1
- package/lib/utils/createFlatTreeItems.js +26 -17
- package/lib/utils/createFlatTreeItems.js.map +1 -1
- package/lib/utils/flattenTree.js +8 -4
- package/lib/utils/flattenTree.js.map +1 -1
- package/lib-commonjs/components/TreeItem/TreeItem.js.map +1 -1
- package/lib-commonjs/components/TreeItem/useTreeItem.js +17 -5
- package/lib-commonjs/components/TreeItem/useTreeItem.js.map +1 -1
- package/lib-commonjs/components/TreeItemLayout/useTreeItemLayout.js +2 -2
- package/lib-commonjs/components/TreeItemLayout/useTreeItemLayout.js.map +1 -1
- package/lib-commonjs/components/TreeItemPersonaLayout/useTreeItemPersonaLayoutStyles.js +11 -19
- package/lib-commonjs/components/TreeItemPersonaLayout/useTreeItemPersonaLayoutStyles.js.map +1 -1
- package/lib-commonjs/hooks/useFlatTree.js +2 -2
- package/lib-commonjs/hooks/useFlatTree.js.map +1 -1
- package/lib-commonjs/hooks/useFlatTreeNavigation.js +7 -5
- package/lib-commonjs/hooks/useFlatTreeNavigation.js.map +1 -1
- package/lib-commonjs/hooks/useNestedTreeNavigation.js +1 -1
- package/lib-commonjs/hooks/useNestedTreeNavigation.js.map +1 -1
- package/lib-commonjs/hooks/useOpenItemsState.js +2 -3
- package/lib-commonjs/hooks/useOpenItemsState.js.map +1 -1
- package/lib-commonjs/utils/createFlatTreeItems.js +26 -20
- package/lib-commonjs/utils/createFlatTreeItems.js.map +1 -1
- package/lib-commonjs/utils/flattenTree.js +8 -4
- package/lib-commonjs/utils/flattenTree.js.map +1 -1
- package/package.json +4 -4
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["React","getNativeElementProps","isResolvedShorthand","resolveShorthand","useId","ChevronRight12Regular","useFluent_unstable","useEventCallback","expandIconInlineStyles","ArrowDown","ArrowLeft","ArrowRight","ArrowUp","End","Enter","Home","useMergedRefs","elementContains","useTreeContext_unstable","treeDataTypes","useTreeItem_unstable","props","ref","children","subtreeChildren","Children","toArray","contextLevel","ctx","level","content","subtree","expandIcon","leaf","isLeaf","undefined","actions","as","onClick","onKeyDown","rest","requestOpenChange","requestNavigation","id","isBranch","open","openItems","has","dir","targetDocument","expandIconRotation","actionsRef","useRef","expandIconRef","subtreeRef","handleArrowRight","event","type","arrowRight","target","currentTarget","handleArrowLeft","arrowLeft","handleEnter","enter","handleClick","isEventFromActions","current","isEventFromSubtree","isFromExpandIcon","expandIconClick","click","handleKeyDown","isDefaultPrevented","key","end","home","arrowUp","arrowDown","isTypeAheadCharacter","length","match","altKey","ctrlKey","metaKey","typeAhead","isActionsVisible","setActionsVisible","useState","showActions","hideActions","useEffect","handleFocusOut","relatedTarget","addEventListener","passive","removeEventListener","buttonSize","components","root","required","Boolean","defaultProps","tabIndex","role","onMouseOver","onFocus","onMouseOut","onBlur","createElement","style"],"sources":["../../../src/components/TreeItem/useTreeItem.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, isResolvedShorthand, resolveShorthand, useId } from '@fluentui/react-utilities';\nimport { ChevronRight12Regular } from '@fluentui/react-icons';\nimport { useFluent_unstable } from '@fluentui/react-shared-contexts';\nimport { useEventCallback } from '@fluentui/react-utilities';\nimport { expandIconInlineStyles } from './useTreeItemStyles';\nimport { ArrowDown, ArrowLeft, ArrowRight, ArrowUp, End, Enter, Home } from '@fluentui/keyboard-keys';\nimport { useMergedRefs } from '@fluentui/react-utilities';\nimport { elementContains } from '@fluentui/react-portal';\nimport type { TreeItemProps, TreeItemState } from './TreeItem.types';\nimport { useTreeContext_unstable } from '../../contexts/index';\nimport { treeDataTypes } from '../../utils/tokens';\n\n/**\n * Create the state required to render TreeItem.\n *\n * The returned state can be modified with hooks such as useTreeItemStyles_unstable,\n * before being passed to renderTreeItem_unstable.\n *\n * @param props - props from this instance of TreeItem\n * @param ref - reference to root HTMLElement of TreeItem\n */\nexport const useTreeItem_unstable = (props: TreeItemProps, ref: React.Ref<HTMLDivElement>): TreeItemState => {\n const [children, subtreeChildren] = React.Children.toArray(props.children);\n\n const contextLevel = useTreeContext_unstable(ctx => ctx.level);\n const {\n content,\n subtree,\n expandIcon,\n leaf: isLeaf = subtreeChildren === undefined,\n actions,\n as = 'div',\n onClick,\n onKeyDown,\n ['aria-level']: level = contextLevel,\n ...rest\n } = props;\n\n const requestOpenChange = useTreeContext_unstable(ctx => ctx.requestOpenChange);\n const requestNavigation = useTreeContext_unstable(ctx => ctx.requestNavigation);\n\n const id = useId('fui-TreeItem-', props.id);\n\n const isBranch = !isLeaf;\n\n const open = useTreeContext_unstable(ctx => isBranch && ctx.openItems.has(id));\n const { dir, targetDocument } = useFluent_unstable();\n const expandIconRotation = open ? 90 : dir !== 'rtl' ? 0 : 180;\n\n const actionsRef = React.useRef<HTMLElement>(null);\n const expandIconRef = React.useRef<HTMLElement>(null);\n const subtreeRef = React.useRef<HTMLElement>(null);\n\n const handleArrowRight = (event: React.KeyboardEvent<HTMLDivElement>) => {\n if (!open && isBranch) {\n return requestOpenChange({ event, open: true, type: treeDataTypes.arrowRight, target: event.currentTarget });\n }\n if (open && isBranch) {\n return requestNavigation({ event, type: treeDataTypes.arrowRight, target: event.currentTarget });\n }\n };\n const handleArrowLeft = (event: React.KeyboardEvent<HTMLDivElement>) => {\n if (open && isBranch) {\n return requestOpenChange({ event, open: false, type: treeDataTypes.arrowLeft, target: event.currentTarget });\n }\n if (!open && level > 1) {\n return requestNavigation({ event, target: event.currentTarget, type: treeDataTypes.arrowLeft });\n }\n };\n const handleEnter = (event: React.KeyboardEvent<HTMLDivElement>) => {\n requestOpenChange({ event, open: isLeaf ? open : !open, type: treeDataTypes.enter, target: event.currentTarget });\n };\n\n const handleClick = useEventCallback((event: React.MouseEvent<HTMLDivElement>) => {\n onClick?.(event);\n\n const isEventFromActions = actionsRef.current && elementContains(actionsRef.current, event.target as Node);\n if (isEventFromActions) {\n return;\n }\n const isEventFromSubtree = subtreeRef.current && elementContains(subtreeRef.current, event.target as Node);\n if (isEventFromSubtree) {\n return;\n }\n const isFromExpandIcon = expandIconRef.current && elementContains(expandIconRef.current, event.target as Node);\n requestOpenChange({\n event,\n open: isLeaf ? open : !open,\n type: isFromExpandIcon ? treeDataTypes.expandIconClick : treeDataTypes.click,\n target: event.currentTarget,\n });\n requestNavigation({ event, target: event.currentTarget, type: treeDataTypes.click });\n });\n\n const handleKeyDown = useEventCallback((event: React.KeyboardEvent<HTMLDivElement>) => {\n onKeyDown?.(event);\n if (event.currentTarget !== event.target) {\n return;\n }\n if (event.isDefaultPrevented()) {\n return;\n }\n switch (event.key) {\n case Enter:\n return handleEnter(event);\n case ArrowRight:\n return handleArrowRight(event);\n case ArrowLeft:\n return handleArrowLeft(event);\n case End:\n return requestNavigation({ event, type: treeDataTypes.end, target: event.currentTarget });\n case Home:\n return requestNavigation({ event, type: treeDataTypes.home, target: event.currentTarget });\n case ArrowUp:\n return requestNavigation({ event, type: treeDataTypes.arrowUp, target: event.currentTarget });\n case ArrowDown:\n return requestNavigation({ event, type: treeDataTypes.arrowDown, target: event.currentTarget });\n }\n const isTypeAheadCharacter =\n event.key.length === 1 && event.key.match(/\\w/) && !event.altKey && !event.ctrlKey && !event.metaKey;\n if (isTypeAheadCharacter) {\n return requestNavigation({ event, target: event.currentTarget, type: treeDataTypes.typeAhead });\n }\n });\n\n const [isActionsVisible, setActionsVisible] = React.useState(false);\n const showActions = useEventCallback((event: React.SyntheticEvent) => {\n const isEventFromSubtree = subtreeRef.current && elementContains(subtreeRef.current, event.target as Node);\n if (!isEventFromSubtree) {\n setActionsVisible(true);\n }\n });\n const hideActions = useEventCallback((event: React.SyntheticEvent) => {\n const isEventFromSubtree = subtreeRef.current && elementContains(subtreeRef.current, event.target as Node);\n if (!isEventFromSubtree) {\n setActionsVisible(false);\n }\n });\n\n // Listens to focusout event on the document to ensure treeitem actions visibility on portal scenarios\n // TODO: find a better way to ensure this behavior\n React.useEffect(() => {\n if (actionsRef.current) {\n const handleFocusOut = (event: FocusEvent) => {\n setActionsVisible(elementContains(actionsRef.current, event.relatedTarget as Node));\n };\n targetDocument?.addEventListener('focusout', handleFocusOut, { passive: true });\n return () => {\n targetDocument?.removeEventListener('focusout', handleFocusOut);\n };\n }\n }, [targetDocument]);\n\n return {\n isLeaf,\n open,\n level,\n buttonSize: 'small',\n isActionsVisible: actions ? isActionsVisible : false,\n components: {\n content: 'div',\n root: 'div',\n expandIcon: 'span',\n actions: 'span',\n subtree: 'span',\n },\n subtree: resolveShorthand(subtree, {\n required: Boolean(subtreeChildren),\n defaultProps: {\n children: subtreeChildren,\n ref: useMergedRefs(subtreeRef, isResolvedShorthand(subtree) ? subtree.ref : undefined),\n },\n }),\n content: resolveShorthand(content, {\n required: true,\n defaultProps: {\n children,\n },\n }),\n root: getNativeElementProps(as, {\n tabIndex: -1,\n ...rest,\n id,\n ref,\n children: null,\n 'aria-level': level,\n 'aria-expanded': isBranch ? open : undefined,\n role: 'treeitem',\n onClick: handleClick,\n onKeyDown: handleKeyDown,\n onMouseOver: actions ? showActions : undefined,\n onFocus: actions ? showActions : undefined,\n onMouseOut: actions ? hideActions : undefined,\n onBlur: actions ? hideActions : undefined,\n }),\n expandIcon: resolveShorthand(expandIcon, {\n required: isBranch,\n defaultProps: {\n children: <ChevronRight12Regular style={expandIconInlineStyles[expandIconRotation]} />,\n 'aria-hidden': true,\n ref: useMergedRefs(isResolvedShorthand(expandIcon) ? expandIcon.ref : undefined, expandIconRef),\n },\n }),\n actions: resolveShorthand(actions, {\n defaultProps: {\n ref: useMergedRefs(isResolvedShorthand(actions) ? actions.ref : undefined, actionsRef),\n },\n }),\n };\n};\n"],"mappings":"AAAA,YAAYA,KAAA,MAAW;AACvB,SAASC,qBAAqB,EAAEC,mBAAmB,EAAEC,gBAAgB,EAAEC,KAAK,QAAQ;AACpF,SAASC,qBAAqB,QAAQ;AACtC,SAASC,kBAAkB,QAAQ;AACnC,SAASC,gBAAgB,QAAQ;AACjC,SAASC,sBAAsB,QAAQ;AACvC,SAASC,SAAS,EAAEC,SAAS,EAAEC,UAAU,EAAEC,OAAO,EAAEC,GAAG,EAAEC,KAAK,EAAEC,IAAI,QAAQ;AAC5E,SAASC,aAAa,QAAQ;AAC9B,SAASC,eAAe,QAAQ;AAEhC,SAASC,uBAAuB,QAAQ;AACxC,SAASC,aAAa,QAAQ;AAE9B;;;;;;;;;AASA,OAAO,MAAMC,oBAAA,GAAuBA,CAACC,KAAA,EAAsBC,GAAA,KAAkD;EAC3G,MAAM,CAACC,QAAA,EAAUC,eAAA,CAAgB,GAAGxB,KAAA,CAAMyB,QAAQ,CAACC,OAAO,CAACL,KAAA,CAAME,QAAQ;EAEzE,MAAMI,YAAA,GAAeT,uBAAA,CAAwBU,GAAA,IAAOA,GAAA,CAAIC,KAAK;EAC7D,MAAM;IACJC,OAAA;IACAC,OAAA;IACAC,UAAA;IACAC,IAAA,EAAMC,MAAA,GAASV,eAAA,KAAoBW,SAAS;IAC5CC,OAAA;IACAC,EAAA,GAAK;IACLC,OAAA;IACAC,SAAA;IACA,CAAC,eAAeV,KAAA,GAAQF,YAAY;IACpC,GAAGa;EAAA,CACJ,GAAGnB,KAAA;EAEJ,MAAMoB,iBAAA,GAAoBvB,uBAAA,CAAwBU,GAAA,IAAOA,GAAA,CAAIa,iBAAiB;EAC9E,MAAMC,iBAAA,GAAoBxB,uBAAA,CAAwBU,GAAA,IAAOA,GAAA,CAAIc,iBAAiB;EAE9E,MAAMC,EAAA,GAAKvC,KAAA,CAAM,iBAAiBiB,KAAA,CAAMsB,EAAE;EAE1C,MAAMC,QAAA,GAAW,CAACV,MAAA;EAElB,MAAMW,IAAA,GAAO3B,uBAAA,CAAwBU,GAAA,IAAOgB,QAAA,IAAYhB,GAAA,CAAIkB,SAAS,CAACC,GAAG,CAACJ,EAAA;EAC1E,MAAM;IAAEK,GAAA;IAAKC;EAAc,CAAE,GAAG3C,kBAAA;EAChC,MAAM4C,kBAAA,GAAqBL,IAAA,GAAO,KAAKG,GAAA,KAAQ,QAAQ,IAAI,GAAG;EAE9D,MAAMG,UAAA,GAAanD,KAAA,CAAMoD,MAAM,CAAc,IAAI;EACjD,MAAMC,aAAA,GAAgBrD,KAAA,CAAMoD,MAAM,CAAc,IAAI;EACpD,MAAME,UAAA,GAAatD,KAAA,CAAMoD,MAAM,CAAc,IAAI;EAEjD,MAAMG,gBAAA,GAAoBC,KAAA,IAA+C;IACvE,IAAI,CAACX,IAAA,IAAQD,QAAA,EAAU;MACrB,OAAOH,iBAAA,CAAkB;QAAEe,KAAA;QAAOX,IAAA,EAAM,IAAI;QAAEY,IAAA,EAAMtC,aAAA,CAAcuC,UAAU;QAAEC,MAAA,EAAQH,KAAA,CAAMI;MAAc;IAC5G;IACA,IAAIf,IAAA,IAAQD,QAAA,EAAU;MACpB,OAAOF,iBAAA,CAAkB;QAAEc,KAAA;QAAOC,IAAA,EAAMtC,aAAA,CAAcuC,UAAU;QAAEC,MAAA,EAAQH,KAAA,CAAMI;MAAc;IAChG;EACF;EACA,MAAMC,eAAA,GAAmBL,KAAA,IAA+C;IACtE,IAAIX,IAAA,IAAQD,QAAA,EAAU;MACpB,OAAOH,iBAAA,CAAkB;QAAEe,KAAA;QAAOX,IAAA,EAAM,KAAK;QAAEY,IAAA,EAAMtC,aAAA,CAAc2C,SAAS;QAAEH,MAAA,EAAQH,KAAA,CAAMI;MAAc;IAC5G;IACA,IAAI,CAACf,IAAA,IAAQhB,KAAA,GAAQ,GAAG;MACtB,OAAOa,iBAAA,CAAkB;QAAEc,KAAA;QAAOG,MAAA,EAAQH,KAAA,CAAMI,aAAa;QAAEH,IAAA,EAAMtC,aAAA,CAAc2C;MAAU;IAC/F;EACF;EACA,MAAMC,WAAA,GAAeP,KAAA,IAA+C;IAClEf,iBAAA,CAAkB;MAAEe,KAAA;MAAOX,IAAA,EAAMX,MAAA,GAASW,IAAA,GAAO,CAACA,IAAI;MAAEY,IAAA,EAAMtC,aAAA,CAAc6C,KAAK;MAAEL,MAAA,EAAQH,KAAA,CAAMI;IAAc;EACjH;EAEA,MAAMK,WAAA,GAAc1D,gBAAA,CAAkBiD,KAAA,IAA4C;IAChFlB,OAAA,aAAAA,OAAA,uBAAAA,OAAA,CAAUkB,KAAA;IAEV,MAAMU,kBAAA,GAAqBf,UAAA,CAAWgB,OAAO,IAAIlD,eAAA,CAAgBkC,UAAA,CAAWgB,OAAO,EAAEX,KAAA,CAAMG,MAAM;IACjG,IAAIO,kBAAA,EAAoB;MACtB;IACF;IACA,MAAME,kBAAA,GAAqBd,UAAA,CAAWa,OAAO,IAAIlD,eAAA,CAAgBqC,UAAA,CAAWa,OAAO,EAAEX,KAAA,CAAMG,MAAM;IACjG,IAAIS,kBAAA,EAAoB;MACtB;IACF;IACA,MAAMC,gBAAA,GAAmBhB,aAAA,CAAcc,OAAO,IAAIlD,eAAA,CAAgBoC,aAAA,CAAcc,OAAO,EAAEX,KAAA,CAAMG,MAAM;IACrGlB,iBAAA,CAAkB;MAChBe,KAAA;MACAX,IAAA,EAAMX,MAAA,GAASW,IAAA,GAAO,CAACA,IAAI;MAC3BY,IAAA,EAAMY,gBAAA,GAAmBlD,aAAA,CAAcmD,eAAe,GAAGnD,aAAA,CAAcoD,KAAK;MAC5EZ,MAAA,EAAQH,KAAA,CAAMI;IAChB;IACAlB,iBAAA,CAAkB;MAAEc,KAAA;MAAOG,MAAA,EAAQH,KAAA,CAAMI,aAAa;MAAEH,IAAA,EAAMtC,aAAA,CAAcoD;IAAM;EACpF;EAEA,MAAMC,aAAA,GAAgBjE,gBAAA,CAAkBiD,KAAA,IAA+C;IACrFjB,SAAA,aAAAA,SAAA,uBAAAA,SAAA,CAAYiB,KAAA;IACZ,IAAIA,KAAA,CAAMI,aAAa,KAAKJ,KAAA,CAAMG,MAAM,EAAE;MACxC;IACF;IACA,IAAIH,KAAA,CAAMiB,kBAAkB,IAAI;MAC9B;IACF;IACA,QAAQjB,KAAA,CAAMkB,GAAG;MACf,KAAK5D,KAAA;QACH,OAAOiD,WAAA,CAAYP,KAAA;MACrB,KAAK7C,UAAA;QACH,OAAO4C,gBAAA,CAAiBC,KAAA;MAC1B,KAAK9C,SAAA;QACH,OAAOmD,eAAA,CAAgBL,KAAA;MACzB,KAAK3C,GAAA;QACH,OAAO6B,iBAAA,CAAkB;UAAEc,KAAA;UAAOC,IAAA,EAAMtC,aAAA,CAAcwD,GAAG;UAAEhB,MAAA,EAAQH,KAAA,CAAMI;QAAc;MACzF,KAAK7C,IAAA;QACH,OAAO2B,iBAAA,CAAkB;UAAEc,KAAA;UAAOC,IAAA,EAAMtC,aAAA,CAAcyD,IAAI;UAAEjB,MAAA,EAAQH,KAAA,CAAMI;QAAc;MAC1F,KAAKhD,OAAA;QACH,OAAO8B,iBAAA,CAAkB;UAAEc,KAAA;UAAOC,IAAA,EAAMtC,aAAA,CAAc0D,OAAO;UAAElB,MAAA,EAAQH,KAAA,CAAMI;QAAc;MAC7F,KAAKnD,SAAA;QACH,OAAOiC,iBAAA,CAAkB;UAAEc,KAAA;UAAOC,IAAA,EAAMtC,aAAA,CAAc2D,SAAS;UAAEnB,MAAA,EAAQH,KAAA,CAAMI;QAAc;IAAA;IAEjG,MAAMmB,oBAAA,GACJvB,KAAA,CAAMkB,GAAG,CAACM,MAAM,KAAK,KAAKxB,KAAA,CAAMkB,GAAG,CAACO,KAAK,CAAC,SAAS,CAACzB,KAAA,CAAM0B,MAAM,IAAI,CAAC1B,KAAA,CAAM2B,OAAO,IAAI,CAAC3B,KAAA,CAAM4B,OAAO;IACtG,IAAIL,oBAAA,EAAsB;MACxB,OAAOrC,iBAAA,CAAkB;QAAEc,KAAA;QAAOG,MAAA,EAAQH,KAAA,CAAMI,aAAa;QAAEH,IAAA,EAAMtC,aAAA,CAAckE;MAAU;IAC/F;EACF;EAEA,MAAM,CAACC,gBAAA,EAAkBC,iBAAA,CAAkB,GAAGvF,KAAA,CAAMwF,QAAQ,CAAC,KAAK;EAClE,MAAMC,WAAA,GAAclF,gBAAA,CAAkBiD,KAAA,IAAgC;IACpE,MAAMY,kBAAA,GAAqBd,UAAA,CAAWa,OAAO,IAAIlD,eAAA,CAAgBqC,UAAA,CAAWa,OAAO,EAAEX,KAAA,CAAMG,MAAM;IACjG,IAAI,CAACS,kBAAA,EAAoB;MACvBmB,iBAAA,CAAkB,IAAI;IACxB;EACF;EACA,MAAMG,WAAA,GAAcnF,gBAAA,CAAkBiD,KAAA,IAAgC;IACpE,MAAMY,kBAAA,GAAqBd,UAAA,CAAWa,OAAO,IAAIlD,eAAA,CAAgBqC,UAAA,CAAWa,OAAO,EAAEX,KAAA,CAAMG,MAAM;IACjG,IAAI,CAACS,kBAAA,EAAoB;MACvBmB,iBAAA,CAAkB,KAAK;IACzB;EACF;EAEA;EACA;EACAvF,KAAA,CAAM2F,SAAS,CAAC,MAAM;IACpB,IAAIxC,UAAA,CAAWgB,OAAO,EAAE;MACtB,MAAMyB,cAAA,GAAkBpC,KAAA,IAAsB;QAC5C+B,iBAAA,CAAkBtE,eAAA,CAAgBkC,UAAA,CAAWgB,OAAO,EAAEX,KAAA,CAAMqC,aAAa;MAC3E;MACA5C,cAAA,aAAAA,cAAA,uBAAAA,cAAA,CAAgB6C,gBAAgB,CAAC,YAAYF,cAAA,EAAgB;QAAEG,OAAA,EAAS;MAAK;MAC7E,OAAO,MAAM;QACX9C,cAAA,aAAAA,cAAA,uBAAAA,cAAA,CAAgB+C,mBAAmB,CAAC,YAAYJ,cAAA;MAClD;IACF;EACF,GAAG,CAAC3C,cAAA,CAAe;EAEnB,OAAO;IACLf,MAAA;IACAW,IAAA;IACAhB,KAAA;IACAoE,UAAA,EAAY;IACZX,gBAAA,EAAkBlD,OAAA,GAAUkD,gBAAA,GAAmB,KAAK;IACpDY,UAAA,EAAY;MACVpE,OAAA,EAAS;MACTqE,IAAA,EAAM;MACNnE,UAAA,EAAY;MACZI,OAAA,EAAS;MACTL,OAAA,EAAS;IACX;IACAA,OAAA,EAAS5B,gBAAA,CAAiB4B,OAAA,EAAS;MACjCqE,QAAA,EAAUC,OAAA,CAAQ7E,eAAA;MAClB8E,YAAA,EAAc;QACZ/E,QAAA,EAAUC,eAAA;QACVF,GAAA,EAAKN,aAAA,CAAcsC,UAAA,EAAYpD,mBAAA,CAAoB6B,OAAA,IAAWA,OAAA,CAAQT,GAAG,GAAGa,SAAS;MACvF;IACF;IACAL,OAAA,EAAS3B,gBAAA,CAAiB2B,OAAA,EAAS;MACjCsE,QAAA,EAAU,IAAI;MACdE,YAAA,EAAc;QACZ/E;MACF;IACF;IACA4E,IAAA,EAAMlG,qBAAA,CAAsBoC,EAAA,EAAI;MAC9BkE,QAAA,EAAU,CAAC;MACX,GAAG/D,IAAI;MACPG,EAAA;MACArB,GAAA;MACAC,QAAA,EAAU,IAAI;MACd,cAAcM,KAAA;MACd,iBAAiBe,QAAA,GAAWC,IAAA,GAAOV,SAAS;MAC5CqE,IAAA,EAAM;MACNlE,OAAA,EAAS2B,WAAA;MACT1B,SAAA,EAAWiC,aAAA;MACXiC,WAAA,EAAarE,OAAA,GAAUqD,WAAA,GAActD,SAAS;MAC9CuE,OAAA,EAAStE,OAAA,GAAUqD,WAAA,GAActD,SAAS;MAC1CwE,UAAA,EAAYvE,OAAA,GAAUsD,WAAA,GAAcvD,SAAS;MAC7CyE,MAAA,EAAQxE,OAAA,GAAUsD,WAAA,GAAcvD;IAClC;IACAH,UAAA,EAAY7B,gBAAA,CAAiB6B,UAAA,EAAY;MACvCoE,QAAA,EAAUxD,QAAA;MACV0D,YAAA,EAAc;QACZ/E,QAAA,eAAUvB,KAAA,CAAA6G,aAAA,CAACxG,qBAAA;UAAsByG,KAAA,EAAOtG,sBAAsB,CAAC0C,kBAAA;;QAC/D,eAAe,IAAI;QACnB5B,GAAA,EAAKN,aAAA,CAAcd,mBAAA,CAAoB8B,UAAA,IAAcA,UAAA,CAAWV,GAAG,GAAGa,SAAS,EAAEkB,aAAA;MACnF;IACF;IACAjB,OAAA,EAASjC,gBAAA,CAAiBiC,OAAA,EAAS;MACjCkE,YAAA,EAAc;QACZhF,GAAA,EAAKN,aAAA,CAAcd,mBAAA,CAAoBkC,OAAA,IAAWA,OAAA,CAAQd,GAAG,GAAGa,SAAS,EAAEgB,UAAA;MAC7E;IACF;EACF;AACF"}
|
|
1
|
+
{"version":3,"names":["React","getNativeElementProps","isResolvedShorthand","resolveShorthand","useId","ChevronRight12Regular","useFluent_unstable","useEventCallback","expandIconInlineStyles","ArrowDown","ArrowLeft","ArrowRight","ArrowUp","End","Enter","Home","useMergedRefs","elementContains","useTreeContext_unstable","treeDataTypes","useTreeItem_unstable","props","ref","children","subtreeChildren","Children","toArray","contextLevel","ctx","level","id","content","subtree","expandIcon","leaf","isLeaf","undefined","actions","as","onClick","onKeyDown","value","rest","requestOpenChange","requestNavigation","isBranch","open","openItems","has","dir","targetDocument","expandIconRotation","actionsRef","useRef","expandIconRef","subtreeRef","handleArrowRight","event","type","arrowRight","target","currentTarget","handleArrowLeft","arrowLeft","handleEnter","enter","handleClick","isEventFromActions","current","isEventFromSubtree","isFromExpandIcon","expandIconClick","click","handleKeyDown","isDefaultPrevented","key","end","home","arrowUp","arrowDown","isTypeAheadCharacter","length","match","altKey","ctrlKey","metaKey","typeAhead","isActionsVisible","setActionsVisible","useState","showActions","hideActions","useEffect","handleFocusOut","relatedTarget","addEventListener","passive","removeEventListener","buttonSize","components","root","required","Boolean","defaultProps","tabIndex","role","onMouseOver","onFocus","onMouseOut","onBlur","createElement","style"],"sources":["../../../src/components/TreeItem/useTreeItem.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, isResolvedShorthand, resolveShorthand, useId } from '@fluentui/react-utilities';\nimport { ChevronRight12Regular } from '@fluentui/react-icons';\nimport { useFluent_unstable } from '@fluentui/react-shared-contexts';\nimport { useEventCallback } from '@fluentui/react-utilities';\nimport { expandIconInlineStyles } from './useTreeItemStyles';\nimport { ArrowDown, ArrowLeft, ArrowRight, ArrowUp, End, Enter, Home } from '@fluentui/keyboard-keys';\nimport { useMergedRefs } from '@fluentui/react-utilities';\nimport { elementContains } from '@fluentui/react-portal';\nimport type { TreeItemProps, TreeItemState } from './TreeItem.types';\nimport { useTreeContext_unstable } from '../../contexts/index';\nimport { treeDataTypes } from '../../utils/tokens';\n\n/**\n * Create the state required to render TreeItem.\n *\n * The returned state can be modified with hooks such as useTreeItemStyles_unstable,\n * before being passed to renderTreeItem_unstable.\n *\n * @param props - props from this instance of TreeItem\n * @param ref - reference to root HTMLElement of TreeItem\n */\nexport function useTreeItem_unstable<Value = string>(\n props: TreeItemProps<Value>,\n ref: React.Ref<HTMLDivElement>,\n): TreeItemState {\n const [children, subtreeChildren] = React.Children.toArray(props.children);\n\n const contextLevel = useTreeContext_unstable(ctx => ctx.level);\n\n const id = useId('fui-TreeItem-', props.id);\n\n const {\n content,\n subtree,\n expandIcon,\n leaf: isLeaf = subtreeChildren === undefined,\n actions,\n as = 'div',\n onClick,\n onKeyDown,\n ['aria-level']: level = contextLevel,\n value = id,\n ...rest\n } = props;\n\n const requestOpenChange = useTreeContext_unstable(ctx => ctx.requestOpenChange);\n const requestNavigation = useTreeContext_unstable(ctx => ctx.requestNavigation);\n\n const isBranch = !isLeaf;\n\n const open = useTreeContext_unstable(ctx => isBranch && ctx.openItems.has(value));\n const { dir, targetDocument } = useFluent_unstable();\n const expandIconRotation = open ? 90 : dir !== 'rtl' ? 0 : 180;\n\n const actionsRef = React.useRef<HTMLElement>(null);\n const expandIconRef = React.useRef<HTMLElement>(null);\n const subtreeRef = React.useRef<HTMLElement>(null);\n\n const handleArrowRight = (event: React.KeyboardEvent<HTMLDivElement>) => {\n if (!open && isBranch) {\n return requestOpenChange({\n event,\n value,\n open: true,\n type: treeDataTypes.arrowRight,\n target: event.currentTarget,\n });\n }\n if (open && isBranch) {\n return requestNavigation({ event, value, type: treeDataTypes.arrowRight, target: event.currentTarget });\n }\n };\n const handleArrowLeft = (event: React.KeyboardEvent<HTMLDivElement>) => {\n if (open && isBranch) {\n return requestOpenChange({\n event,\n value,\n open: false,\n type: treeDataTypes.arrowLeft,\n target: event.currentTarget,\n });\n }\n if (!open && level > 1) {\n return requestNavigation({ event, value, target: event.currentTarget, type: treeDataTypes.arrowLeft });\n }\n };\n const handleEnter = (event: React.KeyboardEvent<HTMLDivElement>) => {\n requestOpenChange({\n event,\n value,\n open: isLeaf ? open : !open,\n type: treeDataTypes.enter,\n target: event.currentTarget,\n });\n };\n\n const handleClick = useEventCallback((event: React.MouseEvent<HTMLDivElement>) => {\n onClick?.(event);\n\n const isEventFromActions = actionsRef.current && elementContains(actionsRef.current, event.target as Node);\n if (isEventFromActions) {\n return;\n }\n const isEventFromSubtree = subtreeRef.current && elementContains(subtreeRef.current, event.target as Node);\n if (isEventFromSubtree) {\n return;\n }\n const isFromExpandIcon = expandIconRef.current && elementContains(expandIconRef.current, event.target as Node);\n requestOpenChange({\n event,\n value,\n open: isLeaf ? open : !open,\n type: isFromExpandIcon ? treeDataTypes.expandIconClick : treeDataTypes.click,\n target: event.currentTarget,\n });\n requestNavigation({ event, value, target: event.currentTarget, type: treeDataTypes.click });\n });\n\n const handleKeyDown = useEventCallback((event: React.KeyboardEvent<HTMLDivElement>) => {\n onKeyDown?.(event);\n if (event.currentTarget !== event.target) {\n return;\n }\n if (event.isDefaultPrevented()) {\n return;\n }\n switch (event.key) {\n case Enter:\n return handleEnter(event);\n case ArrowRight:\n return handleArrowRight(event);\n case ArrowLeft:\n return handleArrowLeft(event);\n case End:\n return requestNavigation({ event, value, type: treeDataTypes.end, target: event.currentTarget });\n case Home:\n return requestNavigation({ event, value, type: treeDataTypes.home, target: event.currentTarget });\n case ArrowUp:\n return requestNavigation({ event, value, type: treeDataTypes.arrowUp, target: event.currentTarget });\n case ArrowDown:\n return requestNavigation({ event, value, type: treeDataTypes.arrowDown, target: event.currentTarget });\n }\n const isTypeAheadCharacter =\n event.key.length === 1 && event.key.match(/\\w/) && !event.altKey && !event.ctrlKey && !event.metaKey;\n if (isTypeAheadCharacter) {\n return requestNavigation({ event, value, target: event.currentTarget, type: treeDataTypes.typeAhead });\n }\n });\n\n const [isActionsVisible, setActionsVisible] = React.useState(false);\n const showActions = useEventCallback((event: React.SyntheticEvent) => {\n const isEventFromSubtree = subtreeRef.current && elementContains(subtreeRef.current, event.target as Node);\n if (!isEventFromSubtree) {\n setActionsVisible(true);\n }\n });\n const hideActions = useEventCallback((event: React.SyntheticEvent) => {\n const isEventFromSubtree = subtreeRef.current && elementContains(subtreeRef.current, event.target as Node);\n if (!isEventFromSubtree) {\n setActionsVisible(false);\n }\n });\n\n // Listens to focusout event on the document to ensure treeitem actions visibility on portal scenarios\n // TODO: find a better way to ensure this behavior\n React.useEffect(() => {\n if (actionsRef.current) {\n const handleFocusOut = (event: FocusEvent) => {\n setActionsVisible(elementContains(actionsRef.current, event.relatedTarget as Node));\n };\n targetDocument?.addEventListener('focusout', handleFocusOut, { passive: true });\n return () => {\n targetDocument?.removeEventListener('focusout', handleFocusOut);\n };\n }\n }, [targetDocument]);\n\n return {\n isLeaf,\n open,\n level,\n buttonSize: 'small',\n isActionsVisible: actions ? isActionsVisible : false,\n components: {\n content: 'div',\n root: 'div',\n expandIcon: 'span',\n actions: 'span',\n subtree: 'span',\n },\n subtree: resolveShorthand(subtree, {\n required: Boolean(subtreeChildren),\n defaultProps: {\n children: subtreeChildren,\n ref: useMergedRefs(subtreeRef, isResolvedShorthand(subtree) ? subtree.ref : undefined),\n },\n }),\n content: resolveShorthand(content, {\n required: true,\n defaultProps: {\n children,\n },\n }),\n root: getNativeElementProps(as, {\n tabIndex: -1,\n ...rest,\n id,\n ref,\n children: null,\n 'aria-level': level,\n 'aria-expanded': isBranch ? open : undefined,\n role: 'treeitem',\n onClick: handleClick,\n onKeyDown: handleKeyDown,\n onMouseOver: actions ? showActions : undefined,\n onFocus: actions ? showActions : undefined,\n onMouseOut: actions ? hideActions : undefined,\n onBlur: actions ? hideActions : undefined,\n }),\n expandIcon: resolveShorthand(expandIcon, {\n required: isBranch,\n defaultProps: {\n children: <ChevronRight12Regular style={expandIconInlineStyles[expandIconRotation]} />,\n 'aria-hidden': true,\n ref: useMergedRefs(isResolvedShorthand(expandIcon) ? expandIcon.ref : undefined, expandIconRef),\n },\n }),\n actions: resolveShorthand(actions, {\n defaultProps: {\n ref: useMergedRefs(isResolvedShorthand(actions) ? actions.ref : undefined, actionsRef),\n },\n }),\n };\n}\n"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":[],"sources":["../../../src/components/TreeItemLayout/TreeItemLayout.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport { TreeItemContextValue } from '../../contexts/treeItemContext';\n\nexport type TreeItemLayoutSlots = {\n root: Slot<'
|
|
1
|
+
{"version":3,"names":[],"sources":["../../../src/components/TreeItemLayout/TreeItemLayout.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport { TreeItemContextValue } from '../../contexts/treeItemContext';\n\nexport type TreeItemLayoutSlots = {\n root: Slot<'span'>;\n /**\n * Icon slot that renders right before main content\n */\n iconBefore?: Slot<'span'>;\n /**\n * Icon slot that renders right after main content\n */\n iconAfter?: Slot<'span'>;\n /**\n * slot that render right after main content and iconAfter\n */\n aside?: Slot<'span'>;\n};\n\n/**\n * TreeItemLayout Props\n */\nexport type TreeItemLayoutProps = ComponentProps<Partial<TreeItemLayoutSlots>>;\n\n/**\n * State used in rendering TreeItemLayout\n */\nexport type TreeItemLayoutState = ComponentState<TreeItemLayoutSlots> & TreeItemContextValue;\n"],"mappings":"AAAA"}
|
|
@@ -15,13 +15,13 @@ export const useTreeItemLayout_unstable = (props, ref) => {
|
|
|
15
15
|
iconAfter,
|
|
16
16
|
iconBefore,
|
|
17
17
|
aside,
|
|
18
|
-
as = '
|
|
18
|
+
as = 'span'
|
|
19
19
|
} = props;
|
|
20
20
|
const treeItemContext = useTreeItemContext_unstable();
|
|
21
21
|
return {
|
|
22
22
|
...treeItemContext,
|
|
23
23
|
components: {
|
|
24
|
-
root: '
|
|
24
|
+
root: 'span',
|
|
25
25
|
iconBefore: 'span',
|
|
26
26
|
iconAfter: 'span',
|
|
27
27
|
aside: 'span'
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["React","getNativeElementProps","resolveShorthand","useTreeItemContext_unstable","useTreeItemLayout_unstable","props","ref","iconAfter","iconBefore","aside","as","treeItemContext","components","root","defaultProps"],"sources":["../../../src/components/TreeItemLayout/useTreeItemLayout.ts"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, resolveShorthand } from '@fluentui/react-utilities';\nimport type { TreeItemLayoutProps, TreeItemLayoutState } from './TreeItemLayout.types';\nimport { useTreeItemContext_unstable } from '../../contexts/treeItemContext';\n\n/**\n * Create the state required to render TreeItemLayout.\n *\n * The returned state can be modified with hooks such as useTreeItemLayoutStyles_unstable,\n * before being passed to renderTreeItemLayout_unstable.\n *\n * @param props - props from this instance of TreeItemLayout\n * @param ref - reference to root HTMLElement of TreeItemLayout\n */\nexport const useTreeItemLayout_unstable = (\n props: TreeItemLayoutProps,\n ref: React.Ref<HTMLElement>,\n): TreeItemLayoutState => {\n const { iconAfter, iconBefore, aside, as = '
|
|
1
|
+
{"version":3,"names":["React","getNativeElementProps","resolveShorthand","useTreeItemContext_unstable","useTreeItemLayout_unstable","props","ref","iconAfter","iconBefore","aside","as","treeItemContext","components","root","defaultProps"],"sources":["../../../src/components/TreeItemLayout/useTreeItemLayout.ts"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, resolveShorthand } from '@fluentui/react-utilities';\nimport type { TreeItemLayoutProps, TreeItemLayoutState } from './TreeItemLayout.types';\nimport { useTreeItemContext_unstable } from '../../contexts/treeItemContext';\n\n/**\n * Create the state required to render TreeItemLayout.\n *\n * The returned state can be modified with hooks such as useTreeItemLayoutStyles_unstable,\n * before being passed to renderTreeItemLayout_unstable.\n *\n * @param props - props from this instance of TreeItemLayout\n * @param ref - reference to root HTMLElement of TreeItemLayout\n */\nexport const useTreeItemLayout_unstable = (\n props: TreeItemLayoutProps,\n ref: React.Ref<HTMLElement>,\n): TreeItemLayoutState => {\n const { iconAfter, iconBefore, aside, as = 'span' } = props;\n const treeItemContext = useTreeItemContext_unstable();\n\n return {\n ...treeItemContext,\n components: {\n root: 'span',\n iconBefore: 'span',\n iconAfter: 'span',\n aside: 'span',\n },\n root: getNativeElementProps(as, { ...props, ref }),\n iconBefore: resolveShorthand(iconBefore, { defaultProps: { 'aria-hidden': true } }),\n iconAfter: resolveShorthand(iconAfter, { defaultProps: { 'aria-hidden': true } }),\n aside: resolveShorthand(aside, { defaultProps: { 'aria-hidden': true } }),\n };\n};\n"],"mappings":"AAAA,YAAYA,KAAA,MAAW;AACvB,SAASC,qBAAqB,EAAEC,gBAAgB,QAAQ;AAExD,SAASC,2BAA2B,QAAQ;AAE5C;;;;;;;;;AASA,OAAO,MAAMC,0BAAA,GAA6BA,CACxCC,KAAA,EACAC,GAAA,KACwB;EACxB,MAAM;IAAEC,SAAA;IAAWC,UAAA;IAAYC,KAAA;IAAOC,EAAA,GAAK;EAAM,CAAE,GAAGL,KAAA;EACtD,MAAMM,eAAA,GAAkBR,2BAAA;EAExB,OAAO;IACL,GAAGQ,eAAe;IAClBC,UAAA,EAAY;MACVC,IAAA,EAAM;MACNL,UAAA,EAAY;MACZD,SAAA,EAAW;MACXE,KAAA,EAAO;IACT;IACAI,IAAA,EAAMZ,qBAAA,CAAsBS,EAAA,EAAI;MAAE,GAAGL,KAAK;MAAEC;IAAI;IAChDE,UAAA,EAAYN,gBAAA,CAAiBM,UAAA,EAAY;MAAEM,YAAA,EAAc;QAAE,eAAe;MAAK;IAAE;IACjFP,SAAA,EAAWL,gBAAA,CAAiBK,SAAA,EAAW;MAAEO,YAAA,EAAc;QAAE,eAAe;MAAK;IAAE;IAC/EL,KAAA,EAAOP,gBAAA,CAAiBO,KAAA,EAAO;MAAEK,YAAA,EAAc;QAAE,eAAe;MAAK;IAAE;EACzE;AACF"}
|
|
@@ -15,10 +15,14 @@ const useRootStyles = /*#__PURE__*/__styles({
|
|
|
15
15
|
base: {
|
|
16
16
|
a9b677: "fly5x3f",
|
|
17
17
|
mc9l5x: "f22iagw",
|
|
18
|
-
Bt984gj: "f122n59"
|
|
18
|
+
Bt984gj: "f122n59",
|
|
19
|
+
Bahqtrf: "fk6fouc",
|
|
20
|
+
Be2twd7: "fkhj508",
|
|
21
|
+
Bhrd7zp: "figsok6",
|
|
22
|
+
Bg96gwp: "f1i3iumi"
|
|
19
23
|
}
|
|
20
24
|
}, {
|
|
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;}"]
|
|
25
|
+
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;}", ".fk6fouc{font-family:var(--fontFamilyBase);}", ".fkhj508{font-size:var(--fontSizeBase300);}", ".figsok6{font-weight:var(--fontWeightRegular);}", ".f1i3iumi{line-height:var(--lineHeightBase300);}"]
|
|
22
26
|
});
|
|
23
27
|
/**
|
|
24
28
|
* Styles for the expand icon slot
|
|
@@ -52,16 +56,6 @@ const useContentStyles = /*#__PURE__*/__styles({
|
|
|
52
56
|
}, {
|
|
53
57
|
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
58
|
});
|
|
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
59
|
const useDescriptionStyles = /*#__PURE__*/__styles({
|
|
66
60
|
base: {
|
|
67
61
|
Bahqtrf: "fk6fouc",
|
|
@@ -93,7 +87,6 @@ export const useTreeItemPersonaLayoutStyles_unstable = state => {
|
|
|
93
87
|
const rootStyles = useRootStyles();
|
|
94
88
|
const mediaStyles = useMediaStyles();
|
|
95
89
|
const contentStyles = useContentStyles();
|
|
96
|
-
const mainStyles = useMainStyles();
|
|
97
90
|
const descriptionStyles = useDescriptionStyles();
|
|
98
91
|
const asideStyles = useAsideStyles();
|
|
99
92
|
state.root.className = mergeClasses(treeItemPersonaLayoutClassNames.root, rootStyles.base, state.root.className);
|
|
@@ -102,7 +95,7 @@ export const useTreeItemPersonaLayoutStyles_unstable = state => {
|
|
|
102
95
|
state.content.className = mergeClasses(treeItemPersonaLayoutClassNames.content, contentStyles.base, state.content.className);
|
|
103
96
|
}
|
|
104
97
|
if (state.main) {
|
|
105
|
-
state.main.className = mergeClasses(treeItemPersonaLayoutClassNames.main,
|
|
98
|
+
state.main.className = mergeClasses(treeItemPersonaLayoutClassNames.main, state.main.className);
|
|
106
99
|
}
|
|
107
100
|
if (state.description) {
|
|
108
101
|
state.description.className = mergeClasses(treeItemPersonaLayoutClassNames.description, descriptionStyles.base, state.description.className);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["__styles","mergeClasses","shorthands","tokens","typographyStyles","treeItemPersonaLayoutClassNames","root","media","content","description","aside","main","useRootStyles","base","a9b677","mc9l5x","Bt984gj","
|
|
1
|
+
{"version":3,"names":["__styles","mergeClasses","shorthands","tokens","typographyStyles","treeItemPersonaLayoutClassNames","root","media","content","description","aside","main","useRootStyles","base","a9b677","mc9l5x","Bt984gj","Bahqtrf","Be2twd7","Bhrd7zp","Bg96gwp","d","useMediaStyles","Bqenvij","z8tnut","z189sj","Byoj8tv","uwmqm3","useContentStyles","Beiy3e4","i8kkvl","Belr9w4","useDescriptionStyles","useAsideStyles","Huce71","useTreeItemPersonaLayoutStyles_unstable","state","rootStyles","mediaStyles","contentStyles","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 ...typographyStyles.body1,\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});\n\nconst useDescriptionStyles = makeStyles({\n base: {\n ...typographyStyles.caption1,\n },\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 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, 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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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["createContext","useContextSelector","emptyImmutableSet","defaultContextValue","level","openItems","requestOpenChange","noop","requestNavigation","appearance","size","TreeContext","undefined","Provider","TreeProvider","useTreeContext_unstable","selector","ctx"],"sources":["../../src/contexts/treeContext.ts"],"sourcesContent":["import { Context, ContextSelector, createContext, useContextSelector } from '@fluentui/react-context-selector';\nimport { TreeNavigationData_unstable, TreeOpenChangeData } from '../Tree';\nimport {
|
|
1
|
+
{"version":3,"names":["createContext","useContextSelector","emptyImmutableSet","defaultContextValue","level","openItems","requestOpenChange","noop","requestNavigation","appearance","size","TreeContext","undefined","Provider","TreeProvider","useTreeContext_unstable","selector","ctx"],"sources":["../../src/contexts/treeContext.ts"],"sourcesContent":["import { Context, ContextSelector, createContext, useContextSelector } from '@fluentui/react-context-selector';\nimport { TreeNavigationData_unstable, TreeOpenChangeData } from '../Tree';\nimport { emptyImmutableSet, ImmutableSet } from '../utils/ImmutableSet';\n\nexport type TreeContextValue = {\n level: number;\n appearance: 'subtle' | 'subtle-alpha' | 'transparent';\n size: 'small' | 'medium';\n openItems: ImmutableSet<unknown>;\n /**\n * Requests dialog main component to update it's internal open state\n */\n requestOpenChange(data: TreeOpenChangeData<unknown>): void;\n requestNavigation(data: TreeNavigationData_unstable<unknown>): void;\n};\n\nconst defaultContextValue: TreeContextValue = {\n level: 0,\n openItems: emptyImmutableSet,\n requestOpenChange: noop,\n requestNavigation: noop,\n appearance: 'subtle',\n size: 'medium',\n};\n\nfunction noop() {\n /* noop */\n}\n\nexport const TreeContext: Context<TreeContextValue | undefined> = createContext<TreeContextValue | undefined>(\n undefined,\n);\n\nexport const { Provider: TreeProvider } = TreeContext;\nexport const useTreeContext_unstable = <T>(selector: ContextSelector<TreeContextValue, T>): T =>\n useContextSelector(TreeContext, (ctx = defaultContextValue) => selector(ctx));\n"],"mappings":"AAAA,SAAmCA,aAAa,EAAEC,kBAAkB,QAAQ;AAE5E,SAASC,iBAAiB,QAAsB;AAchD,MAAMC,mBAAA,GAAwC;EAC5CC,KAAA,EAAO;EACPC,SAAA,EAAWH,iBAAA;EACXI,iBAAA,EAAmBC,IAAA;EACnBC,iBAAA,EAAmBD,IAAA;EACnBE,UAAA,EAAY;EACZC,IAAA,EAAM;AACR;AAEA,SAASH,KAAA,EAAO;EACd;AAGF,OAAO,MAAMI,WAAA,gBAAqDX,aAAA,CAChEY,SAAA;AAGF,OAAO,MAAM;EAAEC,QAAA,EAAUC;AAAY,CAAE,GAAGH,WAAA;AAC1C,OAAO,MAAMI,uBAAA,GAA8BC,QAAA,IACzCf,kBAAA,CAAmBU,WAAA,EAAa,CAACM,GAAA,GAAMd,mBAAmB,KAAKa,QAAA,CAASC,GAAA"}
|
package/lib/hooks/useFlatTree.js
CHANGED
|
@@ -37,13 +37,13 @@ export function useFlatTree_unstable(flatTreeItemProps, options = {}) {
|
|
|
37
37
|
event.preventDefault();
|
|
38
38
|
});
|
|
39
39
|
const getNextNavigableItem = useEventCallback((visibleItems, data) => {
|
|
40
|
-
const item = flatTreeItems.get(data.
|
|
40
|
+
const item = flatTreeItems.get(data.value);
|
|
41
41
|
if (item) {
|
|
42
42
|
switch (data.type) {
|
|
43
43
|
case treeDataTypes.typeAhead:
|
|
44
44
|
return item;
|
|
45
45
|
case treeDataTypes.arrowLeft:
|
|
46
|
-
return flatTreeItems.get(item.
|
|
46
|
+
return flatTreeItems.get(item.parentValue);
|
|
47
47
|
case treeDataTypes.arrowRight:
|
|
48
48
|
return visibleItems[item.index + 1];
|
|
49
49
|
case treeDataTypes.end:
|
|
@@ -1 +1 @@
|
|
|
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","
|
|
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","value","type","typeAhead","arrowLeft","parentValue","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 { TreeItemProps } from '../TreeItem';\n\nexport type FlatTreeItemProps<Value = string> = Omit<TreeItemProps, 'value'> & {\n value: Value;\n parentValue?: Value;\n};\n\nexport type FlatTreeItem<Value = string> = Readonly<MutableFlatTreeItem<Value>>;\n\n/**\n * @internal\n * Used internally on createFlatTreeItems and VisibleFlatTreeItemGenerator\n * to ensure required properties when building a FlatTreeITem\n */\nexport type MutableFlatTreeItem<Value = string> = {\n parentValue?: Value;\n childrenSize: number;\n index: number;\n value: Value;\n level: number;\n ref: React.RefObject<HTMLDivElement>;\n getTreeItemProps(): Required<\n Pick<TreeItemProps<Value>, 'value' | 'aria-setsize' | 'aria-level' | 'aria-posinset' | 'leaf'>\n > &\n TreeItemProps<Value>;\n};\n\nexport type FlatTreeProps<Value = string> = Required<\n Pick<TreeProps<Value>, '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<Value = string> = {\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<Value>;\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<Value>): 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(\n visibleItems: FlatTreeItem<Value>[],\n data: TreeNavigationData_unstable<Value>,\n ): FlatTreeItem<Value> | undefined;\n /**\n * an iterable containing all visually available flat tree items\n */\n items(): IterableIterator<FlatTreeItem<Value>>;\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<Value = string>(\n flatTreeItemProps: FlatTreeItemProps<Value>[],\n options: Pick<TreeProps<Value>, 'openItems' | 'defaultOpenItems' | 'onOpenChange' | 'onNavigation_unstable'> = {},\n): FlatTree<Value> {\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<Value>) => {\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<Value>) => {\n options.onNavigation_unstable?.(event, data);\n if (!event.isDefaultPrevented()) {\n navigate(data);\n }\n event.preventDefault();\n },\n );\n\n const getNextNavigableItem = useEventCallback(\n (visibleItems: FlatTreeItem<Value>[], data: TreeNavigationData_unstable<Value>) => {\n const item = flatTreeItems.get(data.value);\n if (item) {\n switch (data.type) {\n case treeDataTypes.typeAhead:\n return item;\n case treeDataTypes.arrowLeft:\n return flatTreeItems.get(item.parentValue!);\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\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<Value>(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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"}
|
|
@@ -25,7 +25,7 @@ export function useFlatTreeNavigation(flatTreeItems) {
|
|
|
25
25
|
treeItemWalker.currentElement = data.target;
|
|
26
26
|
return nextTypeAheadElement(treeItemWalker, data.event.key);
|
|
27
27
|
case treeDataTypes.arrowLeft:
|
|
28
|
-
return parentElement(flatTreeItems, data.
|
|
28
|
+
return parentElement(flatTreeItems, data.value);
|
|
29
29
|
case treeDataTypes.arrowRight:
|
|
30
30
|
treeItemWalker.currentElement = data.target;
|
|
31
31
|
return firstChild(data.target, treeItemWalker);
|
|
@@ -64,10 +64,12 @@ function firstChild(target, treeWalker) {
|
|
|
64
64
|
}
|
|
65
65
|
return null;
|
|
66
66
|
}
|
|
67
|
-
function parentElement(flatTreeItems,
|
|
68
|
-
const flatTreeItem = flatTreeItems.get(
|
|
69
|
-
if (flatTreeItem
|
|
70
|
-
|
|
67
|
+
function parentElement(flatTreeItems, value) {
|
|
68
|
+
const flatTreeItem = flatTreeItems.get(value);
|
|
69
|
+
if (flatTreeItem === null || flatTreeItem === void 0 ? void 0 : flatTreeItem.parentValue) {
|
|
70
|
+
const parentItem = flatTreeItems.get(flatTreeItem.parentValue);
|
|
71
|
+
var _parentItem_ref_current;
|
|
72
|
+
return (_parentItem_ref_current = parentItem === null || parentItem === void 0 ? void 0 : parentItem.ref.current) !== null && _parentItem_ref_current !== void 0 ? _parentItem_ref_current : null;
|
|
71
73
|
}
|
|
72
74
|
return null;
|
|
73
75
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["useFluent_unstable","useEventCallback","useMergedRefs","nextTypeAheadElement","treeDataTypes","treeItemFilter","useHTMLElementWalkerRef","useRovingTabIndex","useFlatTreeNavigation","flatTreeItems","targetDocument","treeItemWalkerRef","treeItemWalkerRootRef","rove","rovingRootRef","getNextElement","data","current","treeItemWalker","type","click","target","typeAhead","currentElement","event","key","arrowLeft","parentElement","arrowRight","firstChild","end","root","lastChild","home","arrowDown","nextElement","arrowUp","previousElement","navigate","treeWalker","nextElementAriaPosInSet","getAttribute","nextElementAriaLevel","targetAriaLevel","Number","
|
|
1
|
+
{"version":3,"names":["useFluent_unstable","useEventCallback","useMergedRefs","nextTypeAheadElement","treeDataTypes","treeItemFilter","useHTMLElementWalkerRef","useRovingTabIndex","useFlatTreeNavigation","flatTreeItems","targetDocument","treeItemWalkerRef","treeItemWalkerRootRef","rove","rovingRootRef","getNextElement","data","current","treeItemWalker","type","click","target","typeAhead","currentElement","event","key","arrowLeft","parentElement","value","arrowRight","firstChild","end","root","lastChild","home","arrowDown","nextElement","arrowUp","previousElement","navigate","treeWalker","nextElementAriaPosInSet","getAttribute","nextElementAriaLevel","targetAriaLevel","Number","flatTreeItem","get","parentValue","parentItem","_parentItem_ref_current","ref"],"sources":["../../src/hooks/useFlatTreeNavigation.ts"],"sourcesContent":["import { useFluent_unstable } from '@fluentui/react-shared-contexts';\nimport { useEventCallback, useMergedRefs } from '@fluentui/react-utilities';\nimport { TreeNavigationData_unstable } from '../Tree';\nimport { FlatTreeItems } from '../utils/createFlatTreeItems';\nimport { nextTypeAheadElement } from '../utils/nextTypeAheadElement';\nimport { treeDataTypes } from '../utils/tokens';\nimport { treeItemFilter } from '../utils/treeItemFilter';\nimport { HTMLElementWalker, useHTMLElementWalkerRef } from './useHTMLElementWalker';\nimport { useRovingTabIndex } from './useRovingTabIndexes';\n\nexport function useFlatTreeNavigation<Value = string>(flatTreeItems: FlatTreeItems<Value>) {\n const { targetDocument } = useFluent_unstable();\n const [treeItemWalkerRef, treeItemWalkerRootRef] = useHTMLElementWalkerRef(treeItemFilter);\n const [{ rove }, rovingRootRef] = useRovingTabIndex(treeItemFilter);\n\n function getNextElement(data: TreeNavigationData_unstable<Value>) {\n if (!targetDocument || !treeItemWalkerRef.current) {\n return null;\n }\n const treeItemWalker = treeItemWalkerRef.current;\n switch (data.type) {\n case treeDataTypes.click:\n return data.target;\n case treeDataTypes.typeAhead:\n treeItemWalker.currentElement = data.target;\n return nextTypeAheadElement(treeItemWalker, data.event.key);\n case treeDataTypes.arrowLeft:\n return parentElement(flatTreeItems, data.value);\n case treeDataTypes.arrowRight:\n treeItemWalker.currentElement = data.target;\n return firstChild(data.target, treeItemWalker);\n case treeDataTypes.end:\n treeItemWalker.currentElement = treeItemWalker.root;\n return treeItemWalker.lastChild();\n case treeDataTypes.home:\n treeItemWalker.currentElement = treeItemWalker.root;\n return treeItemWalker.firstChild();\n case treeDataTypes.arrowDown:\n treeItemWalker.currentElement = data.target;\n return treeItemWalker.nextElement();\n case treeDataTypes.arrowUp:\n treeItemWalker.currentElement = data.target;\n return treeItemWalker.previousElement();\n }\n }\n const navigate = useEventCallback((data: TreeNavigationData_unstable<Value>) => {\n const nextElement = getNextElement(data);\n if (nextElement) {\n rove(nextElement);\n }\n });\n return [navigate, useMergedRefs(treeItemWalkerRootRef, rovingRootRef)] as const;\n}\n\nfunction firstChild(target: HTMLElement, treeWalker: HTMLElementWalker): HTMLElement | null {\n const nextElement = treeWalker.nextElement();\n if (!nextElement) {\n return null;\n }\n const nextElementAriaPosInSet = nextElement.getAttribute('aria-posinset');\n const nextElementAriaLevel = nextElement.getAttribute('aria-level');\n const targetAriaLevel = target.getAttribute('aria-level');\n if (nextElementAriaPosInSet === '1' && Number(nextElementAriaLevel) === Number(targetAriaLevel) + 1) {\n return nextElement;\n }\n return null;\n}\n\nfunction parentElement<Value = string>(flatTreeItems: FlatTreeItems<Value>, value: Value) {\n const flatTreeItem = flatTreeItems.get(value);\n if (flatTreeItem?.parentValue) {\n const parentItem = flatTreeItems.get(flatTreeItem.parentValue);\n return parentItem?.ref.current ?? null;\n }\n return null;\n}\n"],"mappings":"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"}
|
|
@@ -1,9 +1,9 @@
|
|
|
1
|
+
import { useMergedRefs } from '@fluentui/react-utilities';
|
|
1
2
|
import { useHTMLElementWalkerRef } from './useHTMLElementWalker';
|
|
2
3
|
import { nextTypeAheadElement } from '../utils/nextTypeAheadElement';
|
|
3
4
|
import { treeDataTypes } from '../utils/tokens';
|
|
4
5
|
import { treeItemFilter } from '../utils/treeItemFilter';
|
|
5
6
|
import { useRovingTabIndex } from './useRovingTabIndexes';
|
|
6
|
-
import { useMergedRefs } from '@fluentui/react-utilities';
|
|
7
7
|
export function useNestedTreeNavigation() {
|
|
8
8
|
const [{
|
|
9
9
|
rove
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["useHTMLElementWalkerRef","nextTypeAheadElement","treeDataTypes","treeItemFilter","useRovingTabIndex","
|
|
1
|
+
{"version":3,"names":["useMergedRefs","useHTMLElementWalkerRef","nextTypeAheadElement","treeDataTypes","treeItemFilter","useRovingTabIndex","useNestedTreeNavigation","rove","rovingRootRef","walkerRef","rootRef","getNextElement","data","current","treeItemWalker","type","click","target","typeAhead","currentElement","event","key","arrowLeft","parentElement","arrowRight","firstChild","end","root","lastChildRecursive","home","arrowDown","nextElement","arrowUp","previousElement","navigate","walker","lastElement","lastChild"],"sources":["../../src/hooks/useNestedTreeNavigation.ts"],"sourcesContent":["import { useMergedRefs } from '@fluentui/react-utilities';\nimport { TreeNavigationData_unstable } from '../Tree';\nimport { HTMLElementWalker, useHTMLElementWalkerRef } from './useHTMLElementWalker';\nimport { nextTypeAheadElement } from '../utils/nextTypeAheadElement';\nimport { treeDataTypes } from '../utils/tokens';\nimport { treeItemFilter } from '../utils/treeItemFilter';\nimport { useRovingTabIndex } from './useRovingTabIndexes';\n\nexport function useNestedTreeNavigation() {\n const [{ rove }, rovingRootRef] = useRovingTabIndex(treeItemFilter);\n const [walkerRef, rootRef] = useHTMLElementWalkerRef(treeItemFilter);\n\n const getNextElement = (data: TreeNavigationData_unstable) => {\n if (!walkerRef.current) {\n return;\n }\n const treeItemWalker = walkerRef.current;\n switch (data.type) {\n case treeDataTypes.click:\n return data.target;\n case treeDataTypes.typeAhead:\n treeItemWalker.currentElement = data.target;\n return nextTypeAheadElement(treeItemWalker, data.event.key);\n case treeDataTypes.arrowLeft:\n treeItemWalker.currentElement = data.target;\n return treeItemWalker.parentElement();\n case treeDataTypes.arrowRight:\n treeItemWalker.currentElement = data.target;\n return treeItemWalker.firstChild();\n case treeDataTypes.end:\n treeItemWalker.currentElement = treeItemWalker.root;\n return lastChildRecursive(treeItemWalker);\n case treeDataTypes.home:\n treeItemWalker.currentElement = treeItemWalker.root;\n return treeItemWalker.firstChild();\n case treeDataTypes.arrowDown:\n treeItemWalker.currentElement = data.target;\n return treeItemWalker.nextElement();\n case treeDataTypes.arrowUp:\n treeItemWalker.currentElement = data.target;\n return treeItemWalker.previousElement();\n }\n };\n function navigate(data: TreeNavigationData_unstable) {\n const nextElement = getNextElement(data);\n if (nextElement) {\n rove(nextElement);\n }\n }\n return [navigate, useMergedRefs(rootRef, rovingRootRef)] as const;\n}\n\nfunction lastChildRecursive(walker: HTMLElementWalker) {\n let lastElement: HTMLElement | null = null;\n let nextElement: HTMLElement | null = null;\n while ((nextElement = walker.lastChild())) {\n lastElement = nextElement;\n }\n return lastElement;\n}\n"],"mappings":"AAAA,SAASA,aAAa,QAAQ;AAE9B,SAA4BC,uBAAuB,QAAQ;AAC3D,SAASC,oBAAoB,QAAQ;AACrC,SAASC,aAAa,QAAQ;AAC9B,SAASC,cAAc,QAAQ;AAC/B,SAASC,iBAAiB,QAAQ;AAElC,OAAO,SAASC,wBAAA,EAA0B;EACxC,MAAM,CAAC;IAAEC;EAAI,CAAE,EAAEC,aAAA,CAAc,GAAGH,iBAAA,CAAkBD,cAAA;EACpD,MAAM,CAACK,SAAA,EAAWC,OAAA,CAAQ,GAAGT,uBAAA,CAAwBG,cAAA;EAErD,MAAMO,cAAA,GAAkBC,IAAA,IAAsC;IAC5D,IAAI,CAACH,SAAA,CAAUI,OAAO,EAAE;MACtB;IACF;IACA,MAAMC,cAAA,GAAiBL,SAAA,CAAUI,OAAO;IACxC,QAAQD,IAAA,CAAKG,IAAI;MACf,KAAKZ,aAAA,CAAca,KAAK;QACtB,OAAOJ,IAAA,CAAKK,MAAM;MACpB,KAAKd,aAAA,CAAce,SAAS;QAC1BJ,cAAA,CAAeK,cAAc,GAAGP,IAAA,CAAKK,MAAM;QAC3C,OAAOf,oBAAA,CAAqBY,cAAA,EAAgBF,IAAA,CAAKQ,KAAK,CAACC,GAAG;MAC5D,KAAKlB,aAAA,CAAcmB,SAAS;QAC1BR,cAAA,CAAeK,cAAc,GAAGP,IAAA,CAAKK,MAAM;QAC3C,OAAOH,cAAA,CAAeS,aAAa;MACrC,KAAKpB,aAAA,CAAcqB,UAAU;QAC3BV,cAAA,CAAeK,cAAc,GAAGP,IAAA,CAAKK,MAAM;QAC3C,OAAOH,cAAA,CAAeW,UAAU;MAClC,KAAKtB,aAAA,CAAcuB,GAAG;QACpBZ,cAAA,CAAeK,cAAc,GAAGL,cAAA,CAAea,IAAI;QACnD,OAAOC,kBAAA,CAAmBd,cAAA;MAC5B,KAAKX,aAAA,CAAc0B,IAAI;QACrBf,cAAA,CAAeK,cAAc,GAAGL,cAAA,CAAea,IAAI;QACnD,OAAOb,cAAA,CAAeW,UAAU;MAClC,KAAKtB,aAAA,CAAc2B,SAAS;QAC1BhB,cAAA,CAAeK,cAAc,GAAGP,IAAA,CAAKK,MAAM;QAC3C,OAAOH,cAAA,CAAeiB,WAAW;MACnC,KAAK5B,aAAA,CAAc6B,OAAO;QACxBlB,cAAA,CAAeK,cAAc,GAAGP,IAAA,CAAKK,MAAM;QAC3C,OAAOH,cAAA,CAAemB,eAAe;IAAA;EAE3C;EACA,SAASC,SAAStB,IAAiC,EAAE;IACnD,MAAMmB,WAAA,GAAcpB,cAAA,CAAeC,IAAA;IACnC,IAAImB,WAAA,EAAa;MACfxB,IAAA,CAAKwB,WAAA;IACP;EACF;EACA,OAAO,CAACG,QAAA,EAAUlC,aAAA,CAAcU,OAAA,EAASF,aAAA,EAAe;AAC1D;AAEA,SAASoB,mBAAmBO,MAAyB,EAAE;EACrD,IAAIC,WAAA,GAAkC,IAAI;EAC1C,IAAIL,WAAA,GAAkC,IAAI;EAC1C,OAAQA,WAAA,GAAcI,MAAA,CAAOE,SAAS,IAAK;IACzCD,WAAA,GAAcL,WAAA;EAChB;EACA,OAAOK,WAAA;AACT"}
|
|
@@ -11,12 +11,11 @@ export function useOpenItemsState(props) {
|
|
|
11
11
|
return [openItems, updateOpenItems];
|
|
12
12
|
}
|
|
13
13
|
function createNextOpenItems(data, previousOpenItems) {
|
|
14
|
-
const
|
|
15
|
-
const previousOpenItemsHasId = previousOpenItems.has(id);
|
|
14
|
+
const previousOpenItemsHasId = previousOpenItems.has(data.value);
|
|
16
15
|
if (data.open ? previousOpenItemsHasId : !previousOpenItemsHasId) {
|
|
17
16
|
return previousOpenItems;
|
|
18
17
|
}
|
|
19
18
|
const nextOpenItems = createImmutableSet(previousOpenItems);
|
|
20
|
-
return data.open ? nextOpenItems.add(
|
|
19
|
+
return data.open ? nextOpenItems.add(data.value) : nextOpenItems.delete(data.value);
|
|
21
20
|
}
|
|
22
21
|
//# sourceMappingURL=useOpenItemsState.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["useControllableState","useEventCallback","React","createImmutableSet","emptyImmutableSet","useOpenItemsState","props","openItems","setOpenItems","state","useMemo","defaultState","defaultOpenItems","initialState","updateOpenItems","data","currentOpenItems","createNextOpenItems","previousOpenItems","
|
|
1
|
+
{"version":3,"names":["useControllableState","useEventCallback","React","createImmutableSet","emptyImmutableSet","useOpenItemsState","props","openItems","setOpenItems","state","useMemo","defaultState","defaultOpenItems","initialState","updateOpenItems","data","currentOpenItems","createNextOpenItems","previousOpenItems","previousOpenItemsHasId","has","value","open","nextOpenItems","add","delete"],"sources":["../../src/hooks/useOpenItemsState.ts"],"sourcesContent":["import { useControllableState, useEventCallback } from '@fluentui/react-utilities';\nimport * as React from 'react';\nimport { createImmutableSet, emptyImmutableSet, ImmutableSet } from '../utils/ImmutableSet';\nimport type { TreeOpenChangeData, TreeProps } from '../Tree';\n\nexport function useOpenItemsState<Value = string>(props: Pick<TreeProps<Value>, 'openItems' | 'defaultOpenItems'>) {\n const [openItems, setOpenItems] = useControllableState({\n state: React.useMemo(() => props.openItems && createImmutableSet(props.openItems), [props.openItems]),\n defaultState: React.useMemo(\n () => props.defaultOpenItems && createImmutableSet(props.defaultOpenItems),\n [props.defaultOpenItems],\n ),\n initialState: emptyImmutableSet,\n });\n const updateOpenItems = useEventCallback((data: TreeOpenChangeData<Value>) =>\n setOpenItems(currentOpenItems => createNextOpenItems(data, currentOpenItems)),\n );\n return [openItems, updateOpenItems] as const;\n}\n\nfunction createNextOpenItems<Value = string>(\n data: TreeOpenChangeData<Value>,\n previousOpenItems: ImmutableSet<Value>,\n): ImmutableSet<Value> {\n const previousOpenItemsHasId = previousOpenItems.has(data.value);\n if (data.open ? previousOpenItemsHasId : !previousOpenItemsHasId) {\n return previousOpenItems;\n }\n const nextOpenItems = createImmutableSet(previousOpenItems);\n return data.open ? nextOpenItems.add(data.value) : nextOpenItems.delete(data.value);\n}\n"],"mappings":"AAAA,SAASA,oBAAoB,EAAEC,gBAAgB,QAAQ;AACvD,YAAYC,KAAA,MAAW;AACvB,SAASC,kBAAkB,EAAEC,iBAAiB,QAAsB;AAGpE,OAAO,SAASC,kBAAkCC,KAA+D,EAAE;EACjH,MAAM,CAACC,SAAA,EAAWC,YAAA,CAAa,GAAGR,oBAAA,CAAqB;IACrDS,KAAA,EAAOP,KAAA,CAAMQ,OAAO,CAAC,MAAMJ,KAAA,CAAMC,SAAS,IAAIJ,kBAAA,CAAmBG,KAAA,CAAMC,SAAS,GAAG,CAACD,KAAA,CAAMC,SAAS,CAAC;IACpGI,YAAA,EAAcT,KAAA,CAAMQ,OAAO,CACzB,MAAMJ,KAAA,CAAMM,gBAAgB,IAAIT,kBAAA,CAAmBG,KAAA,CAAMM,gBAAgB,GACzE,CAACN,KAAA,CAAMM,gBAAgB,CAAC;IAE1BC,YAAA,EAAcT;EAChB;EACA,MAAMU,eAAA,GAAkBb,gBAAA,CAAkBc,IAAA,IACxCP,YAAA,CAAaQ,gBAAA,IAAoBC,mBAAA,CAAoBF,IAAA,EAAMC,gBAAA;EAE7D,OAAO,CAACT,SAAA,EAAWO,eAAA,CAAgB;AACrC;AAEA,SAASG,oBACPF,IAA+B,EAC/BG,iBAAsC,EACjB;EACrB,MAAMC,sBAAA,GAAyBD,iBAAA,CAAkBE,GAAG,CAACL,IAAA,CAAKM,KAAK;EAC/D,IAAIN,IAAA,CAAKO,IAAI,GAAGH,sBAAA,GAAyB,CAACA,sBAAsB,EAAE;IAChE,OAAOD,iBAAA;EACT;EACA,MAAMK,aAAA,GAAgBpB,kBAAA,CAAmBe,iBAAA;EACzC,OAAOH,IAAA,CAAKO,IAAI,GAAGC,aAAA,CAAcC,GAAG,CAACT,IAAA,CAAKM,KAAK,IAAIE,aAAA,CAAcE,MAAM,CAACV,IAAA,CAAKM,KAAK,CAAC;AACrF"}
|
package/lib/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["Tree","treeClassNames","renderTree_unstable","useTreeStyles_unstable","useTree_unstable","useTreeContextValues_unstable","TreeProvider","useTreeContext_unstable","useTreeItemContext_unstable","TreeItemProvider","treeItemLevelToken","TreeItem","treeItemClassNames","renderTreeItem_unstable","useTreeItemStyles_unstable","useTreeItem_unstable","TreeItemLayout","treeItemLayoutClassNames","renderTreeItemLayout_unstable","useTreeItemLayoutStyles_unstable","useTreeItemLayout_unstable","TreeItemPersonaLayout","treeItemPersonaLayoutClassNames","renderTreeItemPersonaLayout_unstable","useTreeItemPersonaLayoutStyles_unstable","useTreeItemPersonaLayout_unstable","useFlatTree_unstable","flattenTree_unstable"],"sources":["../src/index.ts"],"sourcesContent":["export {\n Tree,\n treeClassNames,\n renderTree_unstable,\n useTreeStyles_unstable,\n useTree_unstable,\n useTreeContextValues_unstable,\n} from './Tree';\nexport type {\n TreeProps,\n TreeState,\n TreeSlots,\n TreeOpenChangeData,\n TreeOpenChangeEvent,\n TreeNavigationEvent_unstable,\n TreeNavigationData_unstable,\n} from './Tree';\n\nexport { TreeProvider, useTreeContext_unstable, useTreeItemContext_unstable, TreeItemProvider } from './contexts';\nexport type { TreeContextValue } from './contexts';\n\nexport { treeItemLevelToken } from './utils/tokens';\n\nexport {\n TreeItem,\n treeItemClassNames,\n renderTreeItem_unstable,\n useTreeItemStyles_unstable,\n useTreeItem_unstable,\n} from './TreeItem';\nexport type {
|
|
1
|
+
{"version":3,"names":["Tree","treeClassNames","renderTree_unstable","useTreeStyles_unstable","useTree_unstable","useTreeContextValues_unstable","TreeProvider","useTreeContext_unstable","useTreeItemContext_unstable","TreeItemProvider","treeItemLevelToken","TreeItem","treeItemClassNames","renderTreeItem_unstable","useTreeItemStyles_unstable","useTreeItem_unstable","TreeItemLayout","treeItemLayoutClassNames","renderTreeItemLayout_unstable","useTreeItemLayoutStyles_unstable","useTreeItemLayout_unstable","TreeItemPersonaLayout","treeItemPersonaLayoutClassNames","renderTreeItemPersonaLayout_unstable","useTreeItemPersonaLayoutStyles_unstable","useTreeItemPersonaLayout_unstable","useFlatTree_unstable","flattenTree_unstable"],"sources":["../src/index.ts"],"sourcesContent":["export {\n Tree,\n treeClassNames,\n renderTree_unstable,\n useTreeStyles_unstable,\n useTree_unstable,\n useTreeContextValues_unstable,\n} from './Tree';\nexport type {\n TreeProps,\n TreeState,\n TreeSlots,\n TreeOpenChangeData,\n TreeOpenChangeEvent,\n TreeNavigationEvent_unstable,\n TreeNavigationData_unstable,\n} from './Tree';\n\nexport { TreeProvider, useTreeContext_unstable, useTreeItemContext_unstable, TreeItemProvider } from './contexts';\nexport type { TreeContextValue } from './contexts';\n\nexport { treeItemLevelToken } from './utils/tokens';\n\nexport {\n TreeItem,\n treeItemClassNames,\n renderTreeItem_unstable,\n useTreeItemStyles_unstable,\n useTreeItem_unstable,\n} from './TreeItem';\nexport type { TreeItemProps, TreeItemState, TreeItemSlots } from './TreeItem';\n\nexport {\n TreeItemLayout,\n treeItemLayoutClassNames,\n renderTreeItemLayout_unstable,\n useTreeItemLayoutStyles_unstable,\n useTreeItemLayout_unstable,\n} from './TreeItemLayout';\nexport type { TreeItemLayoutProps, TreeItemLayoutSlots, TreeItemLayoutState } from './TreeItemLayout';\n\nexport {\n TreeItemPersonaLayout,\n treeItemPersonaLayoutClassNames,\n renderTreeItemPersonaLayout_unstable,\n useTreeItemPersonaLayoutStyles_unstable,\n useTreeItemPersonaLayout_unstable,\n} from './TreeItemPersonaLayout';\nexport type {\n TreeItemPersonaLayoutProps,\n TreeItemPersonaLayoutSlots,\n TreeItemPersonaLayoutState,\n} from './TreeItemPersonaLayout';\n\nexport { useFlatTree_unstable } from './hooks/index';\nexport type { FlatTreeItem, FlatTreeItemProps, FlatTreeProps, FlatTree } from './hooks/index';\n\nexport { flattenTree_unstable } from './utils/flattenTree';\nexport type { NestedTreeItem } from './utils/flattenTree';\n"],"mappings":"AAAA,SACEA,IAAI,EACJC,cAAc,EACdC,mBAAmB,EACnBC,sBAAsB,EACtBC,gBAAgB,EAChBC,6BAA6B,QACxB;AAWP,SAASC,YAAY,EAAEC,uBAAuB,EAAEC,2BAA2B,EAAEC,gBAAgB,QAAQ;AAGrG,SAASC,kBAAkB,QAAQ;AAEnC,SACEC,QAAQ,EACRC,kBAAkB,EAClBC,uBAAuB,EACvBC,0BAA0B,EAC1BC,oBAAoB,QACf;AAGP,SACEC,cAAc,EACdC,wBAAwB,EACxBC,6BAA6B,EAC7BC,gCAAgC,EAChCC,0BAA0B,QACrB;AAGP,SACEC,qBAAqB,EACrBC,+BAA+B,EAC/BC,oCAAoC,EACpCC,uCAAuC,EACvCC,iCAAiC,QAC5B;AAOP,SAASC,oBAAoB,QAAQ;AAGrC,SAASC,oBAAoB,QAAQ"}
|
|
@@ -1,17 +1,19 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
1
2
|
/**
|
|
2
3
|
* creates a list of flat tree items
|
|
3
4
|
* and provides a map to access each item by id
|
|
4
|
-
*/
|
|
5
|
+
*/
|
|
6
|
+
export function createFlatTreeItems(flatTreeItemProps) {
|
|
5
7
|
const root = createFlatTreeRootItem();
|
|
6
|
-
const
|
|
8
|
+
const itemsPerValue = new Map([[flatTreeRootId, root]]);
|
|
7
9
|
const items = [];
|
|
8
10
|
for (let index = 0; index < flatTreeItemProps.length; index++) {
|
|
9
11
|
const {
|
|
10
|
-
|
|
12
|
+
parentValue = flatTreeRootId,
|
|
11
13
|
...treeItemProps
|
|
12
14
|
} = flatTreeItemProps[index];
|
|
13
15
|
const nextItemProps = flatTreeItemProps[index + 1];
|
|
14
|
-
const currentParent =
|
|
16
|
+
const currentParent = itemsPerValue.get(parentValue);
|
|
15
17
|
if (!currentParent) {
|
|
16
18
|
if (process.env.NODE_ENV === 'development') {
|
|
17
19
|
// eslint-disable-next-line no-console
|
|
@@ -19,46 +21,53 @@
|
|
|
19
21
|
}
|
|
20
22
|
break;
|
|
21
23
|
}
|
|
22
|
-
const isLeaf = (nextItemProps === null || nextItemProps === void 0 ? void 0 : nextItemProps.
|
|
24
|
+
const isLeaf = (nextItemProps === null || nextItemProps === void 0 ? void 0 : nextItemProps.parentValue) !== treeItemProps.value;
|
|
23
25
|
var _currentParent_level;
|
|
24
26
|
const currentLevel = ((_currentParent_level = currentParent.level) !== null && _currentParent_level !== void 0 ? _currentParent_level : 0) + 1;
|
|
25
27
|
const currentChildrenSize = ++currentParent.childrenSize;
|
|
28
|
+
const ref = /*#__PURE__*/React.createRef();
|
|
26
29
|
const flatTreeItem = {
|
|
27
|
-
|
|
30
|
+
value: treeItemProps.value,
|
|
28
31
|
getTreeItemProps: () => ({
|
|
29
32
|
...treeItemProps,
|
|
30
33
|
'aria-level': currentLevel,
|
|
31
34
|
'aria-posinset': currentChildrenSize,
|
|
32
35
|
'aria-setsize': currentParent.childrenSize,
|
|
33
|
-
leaf: isLeaf
|
|
36
|
+
leaf: isLeaf,
|
|
37
|
+
// a reference to every parent element is necessary to ensure navigation
|
|
38
|
+
ref: flatTreeItem.childrenSize > 0 ? ref : undefined
|
|
34
39
|
}),
|
|
40
|
+
ref,
|
|
35
41
|
level: currentLevel,
|
|
36
|
-
|
|
42
|
+
parentValue,
|
|
37
43
|
childrenSize: 0,
|
|
38
44
|
index: -1
|
|
39
45
|
};
|
|
40
|
-
|
|
46
|
+
itemsPerValue.set(flatTreeItem.value, flatTreeItem);
|
|
41
47
|
items.push(flatTreeItem);
|
|
42
48
|
}
|
|
43
49
|
return {
|
|
44
50
|
root,
|
|
45
51
|
size: items.length,
|
|
46
52
|
getByIndex: index => items[index],
|
|
47
|
-
get: id =>
|
|
48
|
-
set: (id, value) =>
|
|
53
|
+
get: id => itemsPerValue.get(id),
|
|
54
|
+
set: (id, value) => itemsPerValue.set(id, value)
|
|
49
55
|
};
|
|
50
56
|
}
|
|
51
57
|
export const flatTreeRootId = '__fuiFlatTreeRoot';
|
|
52
58
|
function createFlatTreeRootItem() {
|
|
53
59
|
return {
|
|
54
|
-
|
|
60
|
+
ref: {
|
|
61
|
+
current: null
|
|
62
|
+
},
|
|
63
|
+
value: flatTreeRootId,
|
|
55
64
|
getTreeItemProps: () => {
|
|
56
65
|
if (process.env.NODE_ENV !== 'production') {
|
|
57
66
|
// eslint-disable-next-line no-console
|
|
58
67
|
console.error('useFlatTree: internal error, trying to access treeitem props from invalid root element');
|
|
59
68
|
}
|
|
60
69
|
return {
|
|
61
|
-
|
|
70
|
+
value: flatTreeRootId,
|
|
62
71
|
'aria-setsize': -1,
|
|
63
72
|
'aria-level': -1,
|
|
64
73
|
'aria-posinset': -1,
|
|
@@ -81,7 +90,7 @@ export function* VisibleFlatTreeItemGenerator(openItems, flatTreeItems) {
|
|
|
81
90
|
for (let index = 0, visibleIndex = 0; index < flatTreeItems.size; index++) {
|
|
82
91
|
const item = flatTreeItems.getByIndex(index);
|
|
83
92
|
var _flatTreeItems_get;
|
|
84
|
-
const parent = item.
|
|
93
|
+
const parent = item.parentValue ? (_flatTreeItems_get = flatTreeItems.get(item.parentValue)) !== null && _flatTreeItems_get !== void 0 ? _flatTreeItems_get : flatTreeItems.root : flatTreeItems.root;
|
|
85
94
|
if (isItemVisible(item, openItems, flatTreeItems)) {
|
|
86
95
|
item.index = visibleIndex++;
|
|
87
96
|
yield item;
|
|
@@ -94,11 +103,11 @@ function isItemVisible(item, openItems, flatTreeItems) {
|
|
|
94
103
|
if (item.level === 1) {
|
|
95
104
|
return true;
|
|
96
105
|
}
|
|
97
|
-
while (item.
|
|
98
|
-
if (!openItems.has(item.
|
|
106
|
+
while (item.parentValue && item.parentValue !== flatTreeItems.root.value) {
|
|
107
|
+
if (!openItems.has(item.parentValue)) {
|
|
99
108
|
return false;
|
|
100
109
|
}
|
|
101
|
-
const parent = flatTreeItems.get(item.
|
|
110
|
+
const parent = flatTreeItems.get(item.parentValue);
|
|
102
111
|
if (!parent) {
|
|
103
112
|
return false;
|
|
104
113
|
}
|