@fluentui/react-tree 9.3.1 → 9.4.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 +58 -1
- package/CHANGELOG.md +18 -2
- package/dist/index.d.ts +36 -18
- package/lib/components/FlatTree/FlatTree.types.js.map +1 -1
- package/lib/components/FlatTree/renderFlatTree.js.map +1 -1
- package/lib/components/FlatTree/useFlatTree.js +16 -2
- package/lib/components/FlatTree/useFlatTree.js.map +1 -1
- package/lib/components/FlatTree/useFlatTreeContextValues.js +20 -2
- package/lib/components/FlatTree/useFlatTreeContextValues.js.map +1 -1
- package/lib/components/Tree/Tree.types.js.map +1 -1
- package/lib/components/Tree/renderTree.js +1 -1
- package/lib/components/Tree/renderTree.js.map +1 -1
- package/lib/components/Tree/useTree.js +4 -7
- package/lib/components/Tree/useTree.js.map +1 -1
- package/lib/components/Tree/useTreeContextValues.js +29 -15
- package/lib/components/Tree/useTreeContextValues.js.map +1 -1
- package/lib/components/TreeItem/useTreeItem.js +2 -2
- package/lib/components/TreeItem/useTreeItem.js.map +1 -1
- package/lib/components/TreeProvider.js +21 -0
- package/lib/components/TreeProvider.js.map +1 -0
- package/lib/contexts/index.js +1 -0
- package/lib/contexts/index.js.map +1 -1
- package/lib/contexts/subtreeContext.js +14 -0
- package/lib/contexts/subtreeContext.js.map +1 -0
- package/lib/contexts/treeContext.js +9 -5
- package/lib/contexts/treeContext.js.map +1 -1
- package/lib/hooks/useRootTree.js +1 -0
- package/lib/hooks/useRootTree.js.map +1 -1
- package/lib/hooks/useSubtree.js +2 -14
- package/lib/hooks/useSubtree.js.map +1 -1
- package/lib/index.js +2 -1
- package/lib/index.js.map +1 -1
- package/lib-commonjs/components/FlatTree/useFlatTree.js +16 -2
- package/lib-commonjs/components/FlatTree/useFlatTree.js.map +1 -1
- package/lib-commonjs/components/FlatTree/useFlatTreeContextValues.js +20 -2
- package/lib-commonjs/components/FlatTree/useFlatTreeContextValues.js.map +1 -1
- package/lib-commonjs/components/Tree/renderTree.js +2 -2
- package/lib-commonjs/components/Tree/renderTree.js.map +1 -1
- package/lib-commonjs/components/Tree/useTree.js +4 -7
- package/lib-commonjs/components/Tree/useTree.js.map +1 -1
- package/lib-commonjs/components/Tree/useTreeContextValues.js +30 -15
- package/lib-commonjs/components/Tree/useTreeContextValues.js.map +1 -1
- package/lib-commonjs/components/TreeItem/useTreeItem.js +8 -8
- package/lib-commonjs/components/TreeItem/useTreeItem.js.map +1 -1
- package/lib-commonjs/components/TreeProvider.js +32 -0
- package/lib-commonjs/components/TreeProvider.js.map +1 -0
- package/lib-commonjs/contexts/index.js +1 -0
- package/lib-commonjs/contexts/index.js.map +1 -1
- package/lib-commonjs/contexts/subtreeContext.js +31 -0
- package/lib-commonjs/contexts/subtreeContext.js.map +1 -0
- package/lib-commonjs/contexts/treeContext.js +6 -7
- package/lib-commonjs/contexts/treeContext.js.map +1 -1
- package/lib-commonjs/hooks/useRootTree.js +1 -0
- package/lib-commonjs/hooks/useRootTree.js.map +1 -1
- package/lib-commonjs/hooks/useSubtree.js +2 -14
- package/lib-commonjs/hooks/useSubtree.js.map +1 -1
- package/lib-commonjs/index.js +7 -3
- package/lib-commonjs/index.js.map +1 -1
- package/package.json +8 -8
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useTreeItem.tsx"],"sourcesContent":["import * as React from 'react';\nimport * as ReactDOM from 'react-dom';\nimport { getNativeElementProps, useId, useMergedRefs, useEventCallback, slot } from '@fluentui/react-utilities';\nimport { elementContains } from '@fluentui/react-portal';\nimport type { TreeItemProps, TreeItemState } from './TreeItem.types';\nimport { Space } from '@fluentui/keyboard-keys';\nimport { treeDataTypes } from '../../utils/tokens';\nimport { useTreeContext_unstable, useTreeItemContext_unstable } from '../../contexts/index';\nimport { dataTreeItemValueAttrName } from '../../utils/getTreeItemValueFromElement';\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(props: TreeItemProps, ref: React.Ref<HTMLDivElement>): TreeItemState {\n const treeType = useTreeContext_unstable(ctx => ctx.treeType);\n if (treeType === 'flat') {\n warnIfNoProperPropsFlatTreeItem(props);\n }\n const requestTreeResponse = useTreeContext_unstable(ctx => ctx.requestTreeResponse);\n const contextLevel = useTreeContext_unstable(ctx => ctx.level);\n const parentValue = useTreeItemContext_unstable(ctx => props.parentValue ?? ctx.value);\n\n // note, if the value is not externally provided,\n // then selection and expansion will not work properly\n const value = useId('fuiTreeItemValue-', props.value?.toString());\n\n const { onClick, onKeyDown, as = 'div', itemType = 'leaf', 'aria-level': level = contextLevel, ...rest } = props;\n\n const [isActionsVisible, setActionsVisible] = React.useState(false);\n const [isAsideVisible, setAsideVisible] = React.useState(true);\n\n const handleActionsRef = React.useCallback((actionsElement: HTMLDivElement | null) => {\n setAsideVisible(actionsElement === null);\n }, []);\n\n const actionsRef = React.useRef<HTMLDivElement>(null);\n const expandIconRef = React.useRef<HTMLDivElement>(null);\n const layoutRef = React.useRef<HTMLDivElement>(null);\n const subtreeRef = React.useRef<HTMLDivElement>(null);\n const selectionRef = React.useRef<HTMLInputElement>(null);\n\n const open = useTreeContext_unstable(ctx => props.open ?? ctx.openItems.has(value));\n const selectionMode = useTreeContext_unstable(ctx => ctx.selectionMode);\n const checked = useTreeContext_unstable(ctx => ctx.checkedItems.get(value) ?? false);\n\n const handleClick = useEventCallback((event: React.MouseEvent<HTMLDivElement>) => {\n onClick?.(event);\n if (event.isDefaultPrevented()) {\n return;\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 isEventFromSelection = selectionRef.current && elementContains(selectionRef.current, event.target as Node);\n if (isEventFromSelection) {\n return;\n }\n const isEventFromExpandIcon = expandIconRef.current && elementContains(expandIconRef.current, event.target as Node);\n\n ReactDOM.unstable_batchedUpdates(() => {\n const data = {\n event,\n value,\n open: !open,\n target: event.currentTarget,\n type: isEventFromExpandIcon ? treeDataTypes.ExpandIconClick : treeDataTypes.Click,\n } as const;\n props.onOpenChange?.(event, data);\n requestTreeResponse({\n ...data,\n itemType,\n requestType: 'open',\n });\n requestTreeResponse({\n ...data,\n itemType,\n parentValue,\n requestType: 'navigate',\n type: treeDataTypes.Click,\n });\n });\n });\n\n const handleKeyDown = useEventCallback((event: React.KeyboardEvent<HTMLDivElement>) => {\n onKeyDown?.(event);\n // Ignore keyboard events that do not originate from the current tree item.\n if (event.isDefaultPrevented() || event.currentTarget !== event.target) {\n return;\n }\n switch (event.key) {\n case Space:\n if (selectionMode !== 'none') {\n selectionRef.current?.click();\n event.preventDefault();\n }\n return;\n case treeDataTypes.Enter: {\n const data = {\n value,\n event,\n open: !open,\n type: event.key,\n target: event.currentTarget,\n } as const;\n props.onOpenChange?.(event, data);\n return requestTreeResponse({\n ...data,\n itemType,\n requestType: 'open',\n });\n }\n case treeDataTypes.End:\n case treeDataTypes.Home:\n case treeDataTypes.ArrowUp:\n case treeDataTypes.ArrowDown:\n return requestTreeResponse({\n requestType: 'navigate',\n event,\n value,\n itemType,\n parentValue,\n type: event.key,\n target: event.currentTarget,\n });\n case treeDataTypes.ArrowLeft: {\n // do not navigate to parent if the item is on the top level\n if (level === 1 && !open) {\n return;\n }\n const data = {\n value,\n event,\n open: !open,\n type: event.key,\n target: event.currentTarget,\n } as const;\n if (open) {\n props.onOpenChange?.(event, data);\n }\n return requestTreeResponse({\n ...data,\n itemType,\n parentValue,\n requestType: open ? 'open' : 'navigate',\n });\n }\n case treeDataTypes.ArrowRight:\n // do not navigate or open if the item is a leaf\n if (itemType === 'leaf') {\n return;\n }\n const data = {\n value,\n event,\n open: !open,\n type: event.key,\n target: event.currentTarget,\n } as const;\n if (!open) {\n props.onOpenChange?.(event, data);\n }\n return requestTreeResponse({\n ...data,\n itemType,\n parentValue,\n requestType: open ? 'navigate' : 'open',\n });\n }\n const isTypeAheadCharacter =\n event.key.length === 1 && event.key.match(/\\w/) && !event.altKey && !event.ctrlKey && !event.metaKey;\n if (isTypeAheadCharacter) {\n requestTreeResponse({\n requestType: 'navigate',\n event,\n target: event.currentTarget,\n value,\n itemType,\n type: treeDataTypes.TypeAhead,\n parentValue,\n });\n }\n });\n\n const handleActionsVisible = useEventCallback((event: React.FocusEvent | React.MouseEvent) => {\n const isTargetFromSubtree = Boolean(\n subtreeRef.current && elementContains(subtreeRef.current, event.target as Node),\n );\n if (!isTargetFromSubtree) {\n setActionsVisible(true);\n }\n });\n\n const handleActionsInvisible = useEventCallback((event: React.FocusEvent | React.MouseEvent) => {\n const isTargetFromSubtree = Boolean(\n subtreeRef.current && elementContains(subtreeRef.current, event.target as Node),\n );\n const isRelatedTargetFromActions = Boolean(\n actionsRef.current && elementContains(actionsRef.current, event.relatedTarget as Node),\n );\n if (isRelatedTargetFromActions) {\n return setActionsVisible(true);\n }\n if (!isTargetFromSubtree) {\n return setActionsVisible(false);\n }\n });\n\n const handleChange = useEventCallback((event: React.ChangeEvent<HTMLInputElement>) => {\n if (event.isDefaultPrevented()) {\n return;\n }\n const isEventFromSubtree = subtreeRef.current && elementContains(subtreeRef.current, event.target as Node);\n if (isEventFromSubtree) {\n return;\n }\n requestTreeResponse({\n requestType: 'selection',\n event,\n value,\n itemType,\n type: 'Change',\n target: event.currentTarget,\n checked: checked === 'mixed' ? true : !checked,\n });\n });\n\n return {\n value,\n open,\n checked,\n subtreeRef,\n layoutRef,\n selectionRef,\n expandIconRef,\n actionsRef: useMergedRefs(handleActionsRef, actionsRef),\n itemType,\n level,\n components: {\n root: 'div',\n },\n isAsideVisible,\n isActionsVisible,\n root: slot.always(\n getNativeElementProps(as, {\n tabIndex: -1,\n [dataTreeItemValueAttrName]: value,\n ...rest,\n ref,\n role: 'treeitem',\n 'aria-level': level,\n 'aria-checked': selectionMode === 'multiselect' ? checked : undefined,\n // aria-selected is required according to WAI-ARIA spec\n // https://www.w3.org/TR/wai-aria-1.1/#treeitem\n // Casting: when selectionMode is 'single', checked is a boolean\n 'aria-selected': selectionMode === 'single' ? (checked as boolean) : 'false',\n 'aria-expanded': itemType === 'branch' ? open : undefined,\n onClick: handleClick,\n onKeyDown: handleKeyDown,\n onMouseOver: handleActionsVisible,\n onFocus: handleActionsVisible,\n onMouseOut: handleActionsInvisible,\n onBlur: handleActionsInvisible,\n onChange: handleChange,\n }),\n { elementType: 'div' },\n ),\n };\n}\n\nfunction warnIfNoProperPropsFlatTreeItem(\n props: Pick<TreeItemProps, 'aria-setsize' | 'aria-posinset' | 'aria-level' | 'parentValue'>,\n) {\n if (process.env.NODE_ENV !== 'production') {\n if (\n props['aria-posinset'] === undefined ||\n props['aria-setsize'] === undefined ||\n props['aria-level'] === undefined ||\n (props.parentValue === undefined && props['aria-level'] !== 1)\n ) {\n // eslint-disable-next-line no-console\n console.error(/** #__DE-INDENT__ */ `\n @fluentui/react-tree [${useTreeItem_unstable.name}]:\n A flat treeitem must have \"aria-posinset\", \"aria-setsize\", \"aria-level\"\n and \"parentValue\" (if \"aria-level\" > 1) to ensure a11y and navigation.\n\n - \"aria-posinset\": the position of this treeitem in the current level of the tree.\n - \"aria-setsize\": the number of siblings in this level of the tree.\n - \"aria-level\": the current level of the treeitem.\n - \"parentValue\": the \"value\" property of the parent item of this item.\n `);\n }\n }\n}\n"],"names":["React","ReactDOM","getNativeElementProps","useId","useMergedRefs","useEventCallback","slot","elementContains","Space","treeDataTypes","useTreeContext_unstable","useTreeItemContext_unstable","dataTreeItemValueAttrName","useTreeItem_unstable","props","ref","treeType","ctx","warnIfNoProperPropsFlatTreeItem","requestTreeResponse","contextLevel","level","parentValue","value","toString","onClick","onKeyDown","as","itemType","rest","isActionsVisible","setActionsVisible","useState","isAsideVisible","setAsideVisible","handleActionsRef","useCallback","actionsElement","actionsRef","useRef","expandIconRef","layoutRef","subtreeRef","selectionRef","open","openItems","has","selectionMode","checked","checkedItems","get","handleClick","event","isDefaultPrevented","isEventFromActions","current","target","isEventFromSubtree","isEventFromSelection","isEventFromExpandIcon","unstable_batchedUpdates","data","currentTarget","type","ExpandIconClick","Click","onOpenChange","requestType","handleKeyDown","key","click","preventDefault","Enter","End","Home","ArrowUp","ArrowDown","ArrowLeft","ArrowRight","isTypeAheadCharacter","length","match","altKey","ctrlKey","metaKey","TypeAhead","handleActionsVisible","isTargetFromSubtree","Boolean","handleActionsInvisible","isRelatedTargetFromActions","relatedTarget","handleChange","components","root","always","tabIndex","role","undefined","onMouseOver","onFocus","onMouseOut","onBlur","onChange","elementType","process","env","NODE_ENV","console","error","name"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,YAAYC,cAAc,YAAY;AACtC,SAASC,qBAAqB,EAAEC,KAAK,EAAEC,aAAa,EAAEC,gBAAgB,EAAEC,IAAI,QAAQ,4BAA4B;AAChH,SAASC,eAAe,QAAQ,yBAAyB;AAEzD,SAASC,KAAK,QAAQ,0BAA0B;AAChD,SAASC,aAAa,QAAQ,qBAAqB;AACnD,SAASC,uBAAuB,EAAEC,2BAA2B,QAAQ,uBAAuB;AAC5F,SAASC,yBAAyB,QAAQ,0CAA0C;AAEpF;;;;;;;;CAQC,GACD,OAAO,SAASC,qBAAqBC,KAAoB,EAAEC,GAA8B;QAW9CD;IAVzC,MAAME,WAAWN,wBAAwBO,CAAAA,MAAOA,IAAID,QAAQ;IAC5D,IAAIA,aAAa,QAAQ;QACvBE,gCAAgCJ;IAClC;IACA,MAAMK,sBAAsBT,wBAAwBO,CAAAA,MAAOA,IAAIE,mBAAmB;IAClF,MAAMC,eAAeV,wBAAwBO,CAAAA,MAAOA,IAAII,KAAK;IAC7D,MAAMC,cAAcX,4BAA4BM,CAAAA;YAAOH;eAAAA,CAAAA,qBAAAA,MAAMQ,WAAW,cAAjBR,gCAAAA,qBAAqBG,IAAIM,KAAK;IAAD;IAEpF,iDAAiD;IACjD,sDAAsD;IACtD,MAAMA,QAAQpB,MAAM,sBAAqBW,eAAAA,MAAMS,KAAK,cAAXT,mCAAAA,aAAaU,QAAQ;IAE9D,MAAM,EAAEC,OAAO,EAAEC,SAAS,EAAEC,KAAK,KAAK,EAAEC,WAAW,MAAM,EAAE,cAAcP,QAAQD,YAAY,EAAE,GAAGS,MAAM,GAAGf;IAE3G,MAAM,CAACgB,kBAAkBC,kBAAkB,GAAG/B,MAAMgC,QAAQ,CAAC;IAC7D,MAAM,CAACC,gBAAgBC,gBAAgB,GAAGlC,MAAMgC,QAAQ,CAAC;IAEzD,MAAMG,mBAAmBnC,MAAMoC,WAAW,CAAC,CAACC;QAC1CH,gBAAgBG,mBAAmB;IACrC,GAAG,EAAE;IAEL,MAAMC,aAAatC,MAAMuC,MAAM,CAAiB;IAChD,MAAMC,gBAAgBxC,MAAMuC,MAAM,CAAiB;IACnD,MAAME,YAAYzC,MAAMuC,MAAM,CAAiB;IAC/C,MAAMG,aAAa1C,MAAMuC,MAAM,CAAiB;IAChD,MAAMI,eAAe3C,MAAMuC,MAAM,CAAmB;IAEpD,MAAMK,OAAOlC,wBAAwBO,CAAAA;YAAOH;eAAAA,CAAAA,cAAAA,MAAM8B,IAAI,cAAV9B,yBAAAA,cAAcG,IAAI4B,SAAS,CAACC,GAAG,CAACvB;IAAK;IACjF,MAAMwB,gBAAgBrC,wBAAwBO,CAAAA,MAAOA,IAAI8B,aAAa;IACtE,MAAMC,UAAUtC,wBAAwBO,CAAAA;YAAOA;eAAAA,CAAAA,wBAAAA,IAAIgC,YAAY,CAACC,GAAG,CAAC3B,oBAArBN,mCAAAA,wBAA+B;IAAI;IAElF,MAAMkC,cAAc9C,iBAAiB,CAAC+C;QACpC3B,oBAAAA,8BAAAA,QAAU2B;QACV,IAAIA,MAAMC,kBAAkB,IAAI;YAC9B;QACF;QACA,MAAMC,qBAAqBhB,WAAWiB,OAAO,IAAIhD,gBAAgB+B,WAAWiB,OAAO,EAAEH,MAAMI,MAAM;QACjG,IAAIF,oBAAoB;YACtB;QACF;QACA,MAAMG,qBAAqBf,WAAWa,OAAO,IAAIhD,gBAAgBmC,WAAWa,OAAO,EAAEH,MAAMI,MAAM;QACjG,IAAIC,oBAAoB;YACtB;QACF;QACA,MAAMC,uBAAuBf,aAAaY,OAAO,IAAIhD,gBAAgBoC,aAAaY,OAAO,EAAEH,MAAMI,MAAM;QACvG,IAAIE,sBAAsB;YACxB;QACF;QACA,MAAMC,wBAAwBnB,cAAce,OAAO,IAAIhD,gBAAgBiC,cAAce,OAAO,EAAEH,MAAMI,MAAM;QAE1GvD,SAAS2D,uBAAuB,CAAC;gBAQ/B9C;YAPA,MAAM+C,OAAO;gBACXT;gBACA7B;gBACAqB,MAAM,CAACA;gBACPY,QAAQJ,MAAMU,aAAa;gBAC3BC,MAAMJ,wBAAwBlD,cAAcuD,eAAe,GAAGvD,cAAcwD,KAAK;YACnF;aACAnD,sBAAAA,MAAMoD,YAAY,cAAlBpD,0CAAAA,yBAAAA,OAAqBsC,OAAOS;YAC5B1C,oBAAoB;gBAClB,GAAG0C,IAAI;gBACPjC;gBACAuC,aAAa;YACf;YACAhD,oBAAoB;gBAClB,GAAG0C,IAAI;gBACPjC;gBACAN;gBACA6C,aAAa;gBACbJ,MAAMtD,cAAcwD,KAAK;YAC3B;QACF;IACF;IAEA,MAAMG,gBAAgB/D,iBAAiB,CAAC+C;QACtC1B,sBAAAA,gCAAAA,UAAY0B;QACZ,2EAA2E;QAC3E,IAAIA,MAAMC,kBAAkB,MAAMD,MAAMU,aAAa,KAAKV,MAAMI,MAAM,EAAE;YACtE;QACF;QACA,OAAQJ,MAAMiB,GAAG;YACf,KAAK7D;gBACH,IAAIuC,kBAAkB,QAAQ;wBAC5BJ;qBAAAA,wBAAAA,aAAaY,OAAO,cAApBZ,4CAAAA,sBAAsB2B,KAAK;oBAC3BlB,MAAMmB,cAAc;gBACtB;gBACA;YACF,KAAK9D,cAAc+D,KAAK;gBAAE;wBAQxB1D;oBAPA,MAAM+C,OAAO;wBACXtC;wBACA6B;wBACAR,MAAM,CAACA;wBACPmB,MAAMX,MAAMiB,GAAG;wBACfb,QAAQJ,MAAMU,aAAa;oBAC7B;qBACAhD,sBAAAA,MAAMoD,YAAY,cAAlBpD,0CAAAA,yBAAAA,OAAqBsC,OAAOS;oBAC5B,OAAO1C,oBAAoB;wBACzB,GAAG0C,IAAI;wBACPjC;wBACAuC,aAAa;oBACf;gBACF;YACA,KAAK1D,cAAcgE,GAAG;YACtB,KAAKhE,cAAciE,IAAI;YACvB,KAAKjE,cAAckE,OAAO;YAC1B,KAAKlE,cAAcmE,SAAS;gBAC1B,OAAOzD,oBAAoB;oBACzBgD,aAAa;oBACbf;oBACA7B;oBACAK;oBACAN;oBACAyC,MAAMX,MAAMiB,GAAG;oBACfb,QAAQJ,MAAMU,aAAa;gBAC7B;YACF,KAAKrD,cAAcoE,SAAS;gBAAE;oBAC5B,4DAA4D;oBAC5D,IAAIxD,UAAU,KAAK,CAACuB,MAAM;wBACxB;oBACF;oBACA,MAAMiB,OAAO;wBACXtC;wBACA6B;wBACAR,MAAM,CAACA;wBACPmB,MAAMX,MAAMiB,GAAG;wBACfb,QAAQJ,MAAMU,aAAa;oBAC7B;oBACA,IAAIlB,MAAM;4BACR9B;yBAAAA,uBAAAA,MAAMoD,YAAY,cAAlBpD,2CAAAA,0BAAAA,OAAqBsC,OAAOS;oBAC9B;oBACA,OAAO1C,oBAAoB;wBACzB,GAAG0C,IAAI;wBACPjC;wBACAN;wBACA6C,aAAavB,OAAO,SAAS;oBAC/B;gBACF;YACA,KAAKnC,cAAcqE,UAAU;gBAC3B,gDAAgD;gBAChD,IAAIlD,aAAa,QAAQ;oBACvB;gBACF;gBACA,MAAMiC,OAAO;oBACXtC;oBACA6B;oBACAR,MAAM,CAACA;oBACPmB,MAAMX,MAAMiB,GAAG;oBACfb,QAAQJ,MAAMU,aAAa;gBAC7B;gBACA,IAAI,CAAClB,MAAM;wBACT9B;qBAAAA,uBAAAA,MAAMoD,YAAY,cAAlBpD,2CAAAA,0BAAAA,OAAqBsC,OAAOS;gBAC9B;gBACA,OAAO1C,oBAAoB;oBACzB,GAAG0C,IAAI;oBACPjC;oBACAN;oBACA6C,aAAavB,OAAO,aAAa;gBACnC;QACJ;QACA,MAAMmC,uBACJ3B,MAAMiB,GAAG,CAACW,MAAM,KAAK,KAAK5B,MAAMiB,GAAG,CAACY,KAAK,CAAC,SAAS,CAAC7B,MAAM8B,MAAM,IAAI,CAAC9B,MAAM+B,OAAO,IAAI,CAAC/B,MAAMgC,OAAO;QACtG,IAAIL,sBAAsB;YACxB5D,oBAAoB;gBAClBgD,aAAa;gBACbf;gBACAI,QAAQJ,MAAMU,aAAa;gBAC3BvC;gBACAK;gBACAmC,MAAMtD,cAAc4E,SAAS;gBAC7B/D;YACF;QACF;IACF;IAEA,MAAMgE,uBAAuBjF,iBAAiB,CAAC+C;QAC7C,MAAMmC,sBAAsBC,QAC1B9C,WAAWa,OAAO,IAAIhD,gBAAgBmC,WAAWa,OAAO,EAAEH,MAAMI,MAAM;QAExE,IAAI,CAAC+B,qBAAqB;YACxBxD,kBAAkB;QACpB;IACF;IAEA,MAAM0D,yBAAyBpF,iBAAiB,CAAC+C;QAC/C,MAAMmC,sBAAsBC,QAC1B9C,WAAWa,OAAO,IAAIhD,gBAAgBmC,WAAWa,OAAO,EAAEH,MAAMI,MAAM;QAExE,MAAMkC,6BAA6BF,QACjClD,WAAWiB,OAAO,IAAIhD,gBAAgB+B,WAAWiB,OAAO,EAAEH,MAAMuC,aAAa;QAE/E,IAAID,4BAA4B;YAC9B,OAAO3D,kBAAkB;QAC3B;QACA,IAAI,CAACwD,qBAAqB;YACxB,OAAOxD,kBAAkB;QAC3B;IACF;IAEA,MAAM6D,eAAevF,iBAAiB,CAAC+C;QACrC,IAAIA,MAAMC,kBAAkB,IAAI;YAC9B;QACF;QACA,MAAMI,qBAAqBf,WAAWa,OAAO,IAAIhD,gBAAgBmC,WAAWa,OAAO,EAAEH,MAAMI,MAAM;QACjG,IAAIC,oBAAoB;YACtB;QACF;QACAtC,oBAAoB;YAClBgD,aAAa;YACbf;YACA7B;YACAK;YACAmC,MAAM;YACNP,QAAQJ,MAAMU,aAAa;YAC3Bd,SAASA,YAAY,UAAU,OAAO,CAACA;QACzC;IACF;IAEA,OAAO;QACLzB;QACAqB;QACAI;QACAN;QACAD;QACAE;QACAH;QACAF,YAAYlC,cAAc+B,kBAAkBG;QAC5CV;QACAP;QACAwE,YAAY;YACVC,MAAM;QACR;QACA7D;QACAH;QACAgE,MAAMxF,KAAKyF,MAAM,CACf7F,sBAAsByB,IAAI;YACxBqE,UAAU,CAAC;YACX,CAACpF,0BAA0B,EAAEW;YAC7B,GAAGM,IAAI;YACPd;YACAkF,MAAM;YACN,cAAc5E;YACd,gBAAgB0B,kBAAkB,gBAAgBC,UAAUkD;YAC5D,uDAAuD;YACvD,+CAA+C;YAC/C,gEAAgE;YAChE,iBAAiBnD,kBAAkB,WAAYC,UAAsB;YACrE,iBAAiBpB,aAAa,WAAWgB,OAAOsD;YAChDzE,SAAS0B;YACTzB,WAAW0C;YACX+B,aAAab;YACbc,SAASd;YACTe,YAAYZ;YACZa,QAAQb;YACRc,UAAUX;QACZ,IACA;YAAEY,aAAa;QAAM;IAEzB;AACF;AAEA,SAAStF,gCACPJ,KAA2F;IAE3F,IAAI2F,QAAQC,GAAG,CAACC,QAAQ,KAAK,cAAc;QACzC,IACE7F,KAAK,CAAC,gBAAgB,KAAKoF,aAC3BpF,KAAK,CAAC,eAAe,KAAKoF,aAC1BpF,KAAK,CAAC,aAAa,KAAKoF,aACvBpF,MAAMQ,WAAW,KAAK4E,aAAapF,KAAK,CAAC,aAAa,KAAK,GAC5D;YACA,sCAAsC;YACtC8F,QAAQC,KAAK,CAAuB,CAAC,sBACb,EAAEhG,qBAAqBiG,IAAI,CAAC;;;;;;;sEAQpD,CAAC;QACH;IACF;AACF"}
|
|
1
|
+
{"version":3,"sources":["useTreeItem.tsx"],"sourcesContent":["import * as React from 'react';\nimport * as ReactDOM from 'react-dom';\nimport { getNativeElementProps, useId, useMergedRefs, useEventCallback, slot } from '@fluentui/react-utilities';\nimport { elementContains } from '@fluentui/react-portal';\nimport type { TreeItemProps, TreeItemState } from './TreeItem.types';\nimport { Space } from '@fluentui/keyboard-keys';\nimport { treeDataTypes } from '../../utils/tokens';\nimport { useTreeContext_unstable, useSubtreeContext_unstable, useTreeItemContext_unstable } from '../../contexts';\nimport { dataTreeItemValueAttrName } from '../../utils/getTreeItemValueFromElement';\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(props: TreeItemProps, ref: React.Ref<HTMLDivElement>): TreeItemState {\n const treeType = useTreeContext_unstable(ctx => ctx.treeType);\n if (treeType === 'flat') {\n warnIfNoProperPropsFlatTreeItem(props);\n }\n const requestTreeResponse = useTreeContext_unstable(ctx => ctx.requestTreeResponse);\n const { level: contextLevel } = useSubtreeContext_unstable();\n const parentValue = useTreeItemContext_unstable(ctx => props.parentValue ?? ctx.value);\n\n // note, if the value is not externally provided,\n // then selection and expansion will not work properly\n const value = useId('fuiTreeItemValue-', props.value?.toString());\n\n const { onClick, onKeyDown, as = 'div', itemType = 'leaf', 'aria-level': level = contextLevel, ...rest } = props;\n\n const [isActionsVisible, setActionsVisible] = React.useState(false);\n const [isAsideVisible, setAsideVisible] = React.useState(true);\n\n const handleActionsRef = React.useCallback((actionsElement: HTMLDivElement | null) => {\n setAsideVisible(actionsElement === null);\n }, []);\n\n const actionsRef = React.useRef<HTMLDivElement>(null);\n const expandIconRef = React.useRef<HTMLDivElement>(null);\n const layoutRef = React.useRef<HTMLDivElement>(null);\n const subtreeRef = React.useRef<HTMLDivElement>(null);\n const selectionRef = React.useRef<HTMLInputElement>(null);\n\n const open = useTreeContext_unstable(ctx => props.open ?? ctx.openItems.has(value));\n const selectionMode = useTreeContext_unstable(ctx => ctx.selectionMode);\n const checked = useTreeContext_unstable(ctx => ctx.checkedItems.get(value) ?? false);\n\n const handleClick = useEventCallback((event: React.MouseEvent<HTMLDivElement>) => {\n onClick?.(event);\n if (event.isDefaultPrevented()) {\n return;\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 isEventFromSelection = selectionRef.current && elementContains(selectionRef.current, event.target as Node);\n if (isEventFromSelection) {\n return;\n }\n const isEventFromExpandIcon = expandIconRef.current && elementContains(expandIconRef.current, event.target as Node);\n\n ReactDOM.unstable_batchedUpdates(() => {\n const data = {\n event,\n value,\n open: !open,\n target: event.currentTarget,\n type: isEventFromExpandIcon ? treeDataTypes.ExpandIconClick : treeDataTypes.Click,\n } as const;\n props.onOpenChange?.(event, data);\n requestTreeResponse({\n ...data,\n itemType,\n requestType: 'open',\n });\n requestTreeResponse({\n ...data,\n itemType,\n parentValue,\n requestType: 'navigate',\n type: treeDataTypes.Click,\n });\n });\n });\n\n const handleKeyDown = useEventCallback((event: React.KeyboardEvent<HTMLDivElement>) => {\n onKeyDown?.(event);\n // Ignore keyboard events that do not originate from the current tree item.\n if (event.isDefaultPrevented() || event.currentTarget !== event.target) {\n return;\n }\n switch (event.key) {\n case Space:\n if (selectionMode !== 'none') {\n selectionRef.current?.click();\n event.preventDefault();\n }\n return;\n case treeDataTypes.Enter: {\n const data = {\n value,\n event,\n open: !open,\n type: event.key,\n target: event.currentTarget,\n } as const;\n props.onOpenChange?.(event, data);\n return requestTreeResponse({\n ...data,\n itemType,\n requestType: 'open',\n });\n }\n case treeDataTypes.End:\n case treeDataTypes.Home:\n case treeDataTypes.ArrowUp:\n case treeDataTypes.ArrowDown:\n return requestTreeResponse({\n requestType: 'navigate',\n event,\n value,\n itemType,\n parentValue,\n type: event.key,\n target: event.currentTarget,\n });\n case treeDataTypes.ArrowLeft: {\n // do not navigate to parent if the item is on the top level\n if (level === 1 && !open) {\n return;\n }\n const data = {\n value,\n event,\n open: !open,\n type: event.key,\n target: event.currentTarget,\n } as const;\n if (open) {\n props.onOpenChange?.(event, data);\n }\n return requestTreeResponse({\n ...data,\n itemType,\n parentValue,\n requestType: open ? 'open' : 'navigate',\n });\n }\n case treeDataTypes.ArrowRight:\n // do not navigate or open if the item is a leaf\n if (itemType === 'leaf') {\n return;\n }\n const data = {\n value,\n event,\n open: !open,\n type: event.key,\n target: event.currentTarget,\n } as const;\n if (!open) {\n props.onOpenChange?.(event, data);\n }\n return requestTreeResponse({\n ...data,\n itemType,\n parentValue,\n requestType: open ? 'navigate' : 'open',\n });\n }\n const isTypeAheadCharacter =\n event.key.length === 1 && event.key.match(/\\w/) && !event.altKey && !event.ctrlKey && !event.metaKey;\n if (isTypeAheadCharacter) {\n requestTreeResponse({\n requestType: 'navigate',\n event,\n target: event.currentTarget,\n value,\n itemType,\n type: treeDataTypes.TypeAhead,\n parentValue,\n });\n }\n });\n\n const handleActionsVisible = useEventCallback((event: React.FocusEvent | React.MouseEvent) => {\n const isTargetFromSubtree = Boolean(\n subtreeRef.current && elementContains(subtreeRef.current, event.target as Node),\n );\n if (!isTargetFromSubtree) {\n setActionsVisible(true);\n }\n });\n\n const handleActionsInvisible = useEventCallback((event: React.FocusEvent | React.MouseEvent) => {\n const isTargetFromSubtree = Boolean(\n subtreeRef.current && elementContains(subtreeRef.current, event.target as Node),\n );\n const isRelatedTargetFromActions = Boolean(\n actionsRef.current && elementContains(actionsRef.current, event.relatedTarget as Node),\n );\n if (isRelatedTargetFromActions) {\n return setActionsVisible(true);\n }\n if (!isTargetFromSubtree) {\n return setActionsVisible(false);\n }\n });\n\n const handleChange = useEventCallback((event: React.ChangeEvent<HTMLInputElement>) => {\n if (event.isDefaultPrevented()) {\n return;\n }\n const isEventFromSubtree = subtreeRef.current && elementContains(subtreeRef.current, event.target as Node);\n if (isEventFromSubtree) {\n return;\n }\n requestTreeResponse({\n requestType: 'selection',\n event,\n value,\n itemType,\n type: 'Change',\n target: event.currentTarget,\n checked: checked === 'mixed' ? true : !checked,\n });\n });\n\n return {\n value,\n open,\n checked,\n subtreeRef,\n layoutRef,\n selectionRef,\n expandIconRef,\n actionsRef: useMergedRefs(handleActionsRef, actionsRef),\n itemType,\n level,\n components: {\n root: 'div',\n },\n isAsideVisible,\n isActionsVisible,\n root: slot.always(\n getNativeElementProps(as, {\n tabIndex: -1,\n [dataTreeItemValueAttrName]: value,\n ...rest,\n ref,\n role: 'treeitem',\n 'aria-level': level,\n 'aria-checked': selectionMode === 'multiselect' ? checked : undefined,\n // aria-selected is required according to WAI-ARIA spec\n // https://www.w3.org/TR/wai-aria-1.1/#treeitem\n // Casting: when selectionMode is 'single', checked is a boolean\n 'aria-selected': selectionMode === 'single' ? (checked as boolean) : 'false',\n 'aria-expanded': itemType === 'branch' ? open : undefined,\n onClick: handleClick,\n onKeyDown: handleKeyDown,\n onMouseOver: handleActionsVisible,\n onFocus: handleActionsVisible,\n onMouseOut: handleActionsInvisible,\n onBlur: handleActionsInvisible,\n onChange: handleChange,\n }),\n { elementType: 'div' },\n ),\n };\n}\n\nfunction warnIfNoProperPropsFlatTreeItem(\n props: Pick<TreeItemProps, 'aria-setsize' | 'aria-posinset' | 'aria-level' | 'parentValue'>,\n) {\n if (process.env.NODE_ENV !== 'production') {\n if (\n props['aria-posinset'] === undefined ||\n props['aria-setsize'] === undefined ||\n props['aria-level'] === undefined ||\n (props.parentValue === undefined && props['aria-level'] !== 1)\n ) {\n // eslint-disable-next-line no-console\n console.error(/** #__DE-INDENT__ */ `\n @fluentui/react-tree [${useTreeItem_unstable.name}]:\n A flat treeitem must have \"aria-posinset\", \"aria-setsize\", \"aria-level\"\n and \"parentValue\" (if \"aria-level\" > 1) to ensure a11y and navigation.\n\n - \"aria-posinset\": the position of this treeitem in the current level of the tree.\n - \"aria-setsize\": the number of siblings in this level of the tree.\n - \"aria-level\": the current level of the treeitem.\n - \"parentValue\": the \"value\" property of the parent item of this item.\n `);\n }\n }\n}\n"],"names":["React","ReactDOM","getNativeElementProps","useId","useMergedRefs","useEventCallback","slot","elementContains","Space","treeDataTypes","useTreeContext_unstable","useSubtreeContext_unstable","useTreeItemContext_unstable","dataTreeItemValueAttrName","useTreeItem_unstable","props","ref","treeType","ctx","warnIfNoProperPropsFlatTreeItem","requestTreeResponse","level","contextLevel","parentValue","value","toString","onClick","onKeyDown","as","itemType","rest","isActionsVisible","setActionsVisible","useState","isAsideVisible","setAsideVisible","handleActionsRef","useCallback","actionsElement","actionsRef","useRef","expandIconRef","layoutRef","subtreeRef","selectionRef","open","openItems","has","selectionMode","checked","checkedItems","get","handleClick","event","isDefaultPrevented","isEventFromActions","current","target","isEventFromSubtree","isEventFromSelection","isEventFromExpandIcon","unstable_batchedUpdates","data","currentTarget","type","ExpandIconClick","Click","onOpenChange","requestType","handleKeyDown","key","click","preventDefault","Enter","End","Home","ArrowUp","ArrowDown","ArrowLeft","ArrowRight","isTypeAheadCharacter","length","match","altKey","ctrlKey","metaKey","TypeAhead","handleActionsVisible","isTargetFromSubtree","Boolean","handleActionsInvisible","isRelatedTargetFromActions","relatedTarget","handleChange","components","root","always","tabIndex","role","undefined","onMouseOver","onFocus","onMouseOut","onBlur","onChange","elementType","process","env","NODE_ENV","console","error","name"],"mappings":"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"}
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
import { SubtreeContext, TreeContext } from '../contexts';
|
|
3
|
+
/**
|
|
4
|
+
* @internal
|
|
5
|
+
*/ const rootSubtreeContextValue = {
|
|
6
|
+
level: 1,
|
|
7
|
+
contextType: 'subtree'
|
|
8
|
+
};
|
|
9
|
+
export const TreeProvider = (props)=>{
|
|
10
|
+
if (props.value.contextType === 'subtree') {
|
|
11
|
+
return /*#__PURE__*/ React.createElement(SubtreeContext.Provider, {
|
|
12
|
+
value: props.value
|
|
13
|
+
}, props.children);
|
|
14
|
+
}
|
|
15
|
+
return /*#__PURE__*/ React.createElement(TreeContext.Provider, {
|
|
16
|
+
value: props.value
|
|
17
|
+
}, /*#__PURE__*/ React.createElement(SubtreeContext.Provider, {
|
|
18
|
+
value: rootSubtreeContextValue
|
|
19
|
+
}, props.children));
|
|
20
|
+
};
|
|
21
|
+
TreeProvider.displayName = 'TreeProvider';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["TreeProvider.tsx"],"sourcesContent":["import * as React from 'react';\nimport { SubtreeContext, SubtreeContextValue, TreeContextValue, TreeContext } from '../contexts';\n\n/**\n * @internal\n */\nconst rootSubtreeContextValue: SubtreeContextValue = {\n level: 1,\n contextType: 'subtree',\n};\n\nexport const TreeProvider = (props: React.ProviderProps<TreeContextValue | SubtreeContextValue>) => {\n if (props.value.contextType === 'subtree') {\n return <SubtreeContext.Provider value={props.value}>{props.children}</SubtreeContext.Provider>;\n }\n return (\n <TreeContext.Provider value={props.value}>\n <SubtreeContext.Provider value={rootSubtreeContextValue}>{props.children}</SubtreeContext.Provider>\n </TreeContext.Provider>\n );\n};\n\nTreeProvider.displayName = 'TreeProvider';\n"],"names":["React","SubtreeContext","TreeContext","rootSubtreeContextValue","level","contextType","TreeProvider","props","value","Provider","children","displayName"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,cAAc,EAAyCC,WAAW,QAAQ,cAAc;AAEjG;;CAEC,GACD,MAAMC,0BAA+C;IACnDC,OAAO;IACPC,aAAa;AACf;AAEA,OAAO,MAAMC,eAAe,CAACC;IAC3B,IAAIA,MAAMC,KAAK,CAACH,WAAW,KAAK,WAAW;QACzC,qBAAO,oBAACJ,eAAeQ,QAAQ;YAACD,OAAOD,MAAMC,KAAK;WAAGD,MAAMG,QAAQ;IACrE;IACA,qBACE,oBAACR,YAAYO,QAAQ;QAACD,OAAOD,MAAMC,KAAK;qBACtC,oBAACP,eAAeQ,QAAQ;QAACD,OAAOL;OAA0BI,MAAMG,QAAQ;AAG9E,EAAE;AAEFJ,aAAaK,WAAW,GAAG"}
|
package/lib/contexts/index.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["index.ts"],"sourcesContent":["export * from './treeContext';\nexport * from './treeItemContext';\n"],"names":[],"mappings":"AAAA,cAAc,gBAAgB;AAC9B,cAAc,oBAAoB"}
|
|
1
|
+
{"version":3,"sources":["index.ts"],"sourcesContent":["export * from './treeContext';\nexport * from './subtreeContext';\nexport * from './treeItemContext';\n"],"names":[],"mappings":"AAAA,cAAc,gBAAgB;AAC9B,cAAc,mBAAmB;AACjC,cAAc,oBAAoB"}
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
/**
|
|
3
|
+
* @internal
|
|
4
|
+
*/ const defaultSubTreeContextValue = {
|
|
5
|
+
level: 0,
|
|
6
|
+
contextType: 'subtree'
|
|
7
|
+
};
|
|
8
|
+
/**
|
|
9
|
+
* @internal
|
|
10
|
+
*/ export const SubtreeContext = React.createContext(undefined);
|
|
11
|
+
export const useSubtreeContext_unstable = ()=>{
|
|
12
|
+
var _React_useContext;
|
|
13
|
+
return (_React_useContext = React.useContext(SubtreeContext)) !== null && _React_useContext !== void 0 ? _React_useContext : defaultSubTreeContextValue;
|
|
14
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["subtreeContext.ts"],"sourcesContent":["import * as React from 'react';\n\nexport type SubtreeContextValue = {\n contextType: 'subtree';\n level: number;\n};\n\n/**\n * @internal\n */\nconst defaultSubTreeContextValue: SubtreeContextValue = {\n level: 0,\n contextType: 'subtree',\n};\n\n/**\n * @internal\n */\nexport const SubtreeContext: React.Context<SubtreeContextValue> = React.createContext<SubtreeContextValue | undefined>(\n undefined,\n) as React.Context<SubtreeContextValue>;\n\nexport const useSubtreeContext_unstable = () => {\n return React.useContext(SubtreeContext) ?? defaultSubTreeContextValue;\n};\n"],"names":["React","defaultSubTreeContextValue","level","contextType","SubtreeContext","createContext","undefined","useSubtreeContext_unstable","useContext"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAO/B;;CAEC,GACD,MAAMC,6BAAkD;IACtDC,OAAO;IACPC,aAAa;AACf;AAEA;;CAEC,GACD,OAAO,MAAMC,iBAAqDJ,MAAMK,aAAa,CACnFC,WACsC;AAExC,OAAO,MAAMC,6BAA6B;QACjCP;IAAP,OAAOA,CAAAA,oBAAAA,MAAMQ,UAAU,CAACJ,6BAAjBJ,+BAAAA,oBAAoCC;AAC7C,EAAE"}
|
|
@@ -1,9 +1,12 @@
|
|
|
1
1
|
import { createContext, useContextSelector } from '@fluentui/react-context-selector';
|
|
2
2
|
import { ImmutableSet } from '../utils/ImmutableSet';
|
|
3
3
|
import { ImmutableMap } from '../utils/ImmutableMap';
|
|
4
|
-
|
|
5
|
-
|
|
4
|
+
/**
|
|
5
|
+
* @internal
|
|
6
|
+
*/ const defaultTreeContextValue = {
|
|
6
7
|
level: 0,
|
|
8
|
+
contextType: 'root',
|
|
9
|
+
treeType: 'nested',
|
|
7
10
|
selectionMode: 'none',
|
|
8
11
|
openItems: ImmutableSet.empty,
|
|
9
12
|
checkedItems: ImmutableMap.empty,
|
|
@@ -13,6 +16,7 @@ const defaultContextValue = {
|
|
|
13
16
|
};
|
|
14
17
|
function noop() {
|
|
15
18
|
/* noop */ }
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
export const
|
|
19
|
+
/**
|
|
20
|
+
* @internal
|
|
21
|
+
*/ export const TreeContext = createContext(undefined);
|
|
22
|
+
export const useTreeContext_unstable = (selector)=>useContextSelector(TreeContext, (ctx = defaultTreeContextValue)=>selector(ctx));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["treeContext.ts"],"sourcesContent":["import { Context, ContextSelector, createContext, useContextSelector } from '@fluentui/react-context-selector';\nimport { TreeItemType, TreeItemValue } from '../TreeItem';\nimport { SelectionMode } from '@fluentui/react-utilities';\nimport { ImmutableSet } from '../utils/ImmutableSet';\nimport { ImmutableMap } from '../utils/ImmutableMap';\nimport { TreeCheckedChangeData, TreeNavigationData_unstable, TreeOpenChangeData } from '../Tree';\n\nexport type TreeContextValue = {\n treeType: 'nested' | 'flat';\n
|
|
1
|
+
{"version":3,"sources":["treeContext.ts"],"sourcesContent":["import { Context, ContextSelector, createContext, useContextSelector } from '@fluentui/react-context-selector';\nimport { TreeItemType, TreeItemValue } from '../TreeItem';\nimport { SelectionMode } from '@fluentui/react-utilities';\nimport { ImmutableSet } from '../utils/ImmutableSet';\nimport { ImmutableMap } from '../utils/ImmutableMap';\nimport { TreeCheckedChangeData, TreeNavigationData_unstable, TreeOpenChangeData } from '../Tree';\n\nexport type TreeContextValue = {\n contextType?: 'root';\n level: number;\n treeType: 'nested' | 'flat';\n selectionMode: 'none' | SelectionMode;\n appearance: 'subtle' | 'subtle-alpha' | 'transparent';\n size: 'small' | 'medium';\n openItems: ImmutableSet<TreeItemValue>;\n checkedItems: ImmutableMap<TreeItemValue, 'mixed' | boolean>;\n /**\n * requests root Tree component to respond to some tree item event,\n */\n requestTreeResponse(request: TreeItemRequest): void;\n};\n\nexport type TreeItemRequest = { itemType: TreeItemType } & (\n | (OmitWithoutExpanding<TreeOpenChangeData, 'open' | 'openItems'> & { requestType: 'open' })\n | (TreeNavigationData_unstable & { requestType: 'navigate' })\n | (OmitWithoutExpanding<TreeCheckedChangeData, 'selectionMode' | 'checkedItems'> & { requestType: 'selection' })\n);\n\n/**\n * helper type that avoids the expansion of unions while inferring it,\n * should work exactly the same as Omit\n */\ntype OmitWithoutExpanding<P, K extends string | number | symbol> = P extends unknown ? Omit<P, K> : P;\n\n/**\n * @internal\n */\nconst defaultTreeContextValue: TreeContextValue = {\n level: 0,\n contextType: 'root',\n treeType: 'nested',\n selectionMode: 'none',\n openItems: ImmutableSet.empty,\n checkedItems: ImmutableMap.empty,\n requestTreeResponse: noop,\n appearance: 'subtle',\n size: 'medium',\n};\n\nfunction noop() {\n /* noop */\n}\n\n/**\n * @internal\n */\nexport const TreeContext: Context<TreeContextValue> = createContext<TreeContextValue | undefined>(\n undefined,\n) as Context<TreeContextValue>;\n\nexport const useTreeContext_unstable = <T>(selector: ContextSelector<TreeContextValue, T>): T =>\n useContextSelector(TreeContext, (ctx = defaultTreeContextValue) => selector(ctx));\n"],"names":["createContext","useContextSelector","ImmutableSet","ImmutableMap","defaultTreeContextValue","level","contextType","treeType","selectionMode","openItems","empty","checkedItems","requestTreeResponse","noop","appearance","size","TreeContext","undefined","useTreeContext_unstable","selector","ctx"],"mappings":"AAAA,SAAmCA,aAAa,EAAEC,kBAAkB,QAAQ,mCAAmC;AAG/G,SAASC,YAAY,QAAQ,wBAAwB;AACrD,SAASC,YAAY,QAAQ,wBAAwB;AA8BrD;;CAEC,GACD,MAAMC,0BAA4C;IAChDC,OAAO;IACPC,aAAa;IACbC,UAAU;IACVC,eAAe;IACfC,WAAWP,aAAaQ,KAAK;IAC7BC,cAAcR,aAAaO,KAAK;IAChCE,qBAAqBC;IACrBC,YAAY;IACZC,MAAM;AACR;AAEA,SAASF;AACP,QAAQ,GACV;AAEA;;CAEC,GACD,OAAO,MAAMG,cAAyChB,cACpDiB,WAC6B;AAE/B,OAAO,MAAMC,0BAA0B,CAAIC,WACzClB,mBAAmBe,aAAa,CAACI,MAAMhB,uBAAuB,GAAKe,SAASC,MAAM"}
|
package/lib/hooks/useRootTree.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useRootTree.ts"],"sourcesContent":["import { SelectionMode, getNativeElementProps, useEventCallback, slot } from '@fluentui/react-utilities';\nimport type {\n TreeCheckedChangeData,\n TreeNavigationData_unstable,\n TreeOpenChangeData,\n TreeProps,\n TreeState,\n} from '../Tree';\nimport * as React from 'react';\nimport { TreeItemRequest } from '../contexts/treeContext';\nimport { createOpenItems } from '../utils/createOpenItems';\nimport { createCheckedItems } from '../utils/createCheckedItems';\nimport { treeDataTypes } from '../utils/tokens';\nimport { createNextOpenItems } from './useControllableOpenItems';\n\n/**\n * Create the state required to render the root level tree.\n *\n * @param props - props from this instance of tree\n * @param ref - reference to root HTMLElement of tree\n */\nexport function useRootTree(\n props: Pick<\n TreeProps,\n | 'selectionMode'\n | 'appearance'\n | 'size'\n | 'openItems'\n | 'checkedItems'\n | 'onOpenChange'\n | 'onCheckedChange'\n | 'onNavigation'\n | 'aria-label'\n | 'aria-labelledby'\n >,\n\n ref: React.Ref<HTMLElement>,\n): Omit<TreeState, 'treeType'> {\n warnIfNoProperPropsRootTree(props);\n\n const { appearance = 'subtle', size = 'medium', selectionMode = 'none' } = props;\n\n const openItems = React.useMemo(() => createOpenItems(props.openItems), [props.openItems]);\n const checkedItems = React.useMemo(() => createCheckedItems(props.checkedItems), [props.checkedItems]);\n const requestOpenChange = (data: TreeOpenChangeData) => {\n const nextOpenItems = createNextOpenItems(data, openItems);\n props.onOpenChange?.(data.event, {\n ...data,\n openItems: nextOpenItems.dangerouslyGetInternalSet_unstable(),\n });\n };\n\n const requestCheckedChange = (data: TreeCheckedChangeData) => props.onCheckedChange?.(data.event, data);\n\n const requestNavigation = (data: TreeNavigationData_unstable) => {\n props.onNavigation?.(data.event, data);\n switch (data.type) {\n case treeDataTypes.ArrowDown:\n case treeDataTypes.ArrowUp:\n case treeDataTypes.Home:\n case treeDataTypes.End:\n // stop the default behavior of the event\n // which is to scroll the page\n data.event.preventDefault();\n }\n };\n\n const requestTreeResponse = useEventCallback((request: TreeItemRequest) => {\n switch (request.requestType) {\n case 'navigate':\n return requestNavigation(request);\n case 'open':\n return requestOpenChange({\n ...request,\n open: request.itemType === 'branch' && !openItems.has(request.value),\n openItems: openItems.dangerouslyGetInternalSet_unstable(),\n });\n case 'selection':\n return requestCheckedChange({\n ...request,\n selectionMode: selectionMode as SelectionMode,\n checkedItems: checkedItems.dangerouslyGetInternalMap_unstable(),\n } as TreeCheckedChangeData);\n }\n });\n\n return {\n components: {\n root: 'div',\n },\n selectionMode,\n open: true,\n appearance,\n size,\n level: 1,\n openItems,\n checkedItems,\n requestTreeResponse,\n root: slot.always(\n getNativeElementProps('div', {\n ref,\n role: 'tree',\n 'aria-multiselectable': selectionMode === 'multiselect' ? true : undefined,\n ...props,\n }),\n { elementType: 'div' },\n ),\n };\n}\n\nfunction warnIfNoProperPropsRootTree(props: Pick<TreeProps, 'aria-label' | 'aria-labelledby'>) {\n if (process.env.NODE_ENV === 'development') {\n if (!props['aria-label'] && !props['aria-labelledby']) {\n // eslint-disable-next-line no-console\n console.warn(/* #__DE-INDENT__ */ `\n @fluentui/react-tree [useRootTree]:\n Tree must have either a \\`aria-label\\` or \\`aria-labelledby\\` property defined\n `);\n }\n }\n}\n"],"names":["getNativeElementProps","useEventCallback","slot","React","createOpenItems","createCheckedItems","treeDataTypes","createNextOpenItems","useRootTree","props","ref","warnIfNoProperPropsRootTree","appearance","size","selectionMode","openItems","useMemo","checkedItems","requestOpenChange","data","nextOpenItems","onOpenChange","event","dangerouslyGetInternalSet_unstable","requestCheckedChange","onCheckedChange","requestNavigation","onNavigation","type","ArrowDown","ArrowUp","Home","End","preventDefault","requestTreeResponse","request","requestType","open","itemType","has","value","dangerouslyGetInternalMap_unstable","components","root","level","always","role","undefined","elementType","process","env","NODE_ENV","console","warn"],"mappings":"AAAA,SAAwBA,qBAAqB,EAAEC,gBAAgB,EAAEC,IAAI,QAAQ,4BAA4B;AAQzG,YAAYC,WAAW,QAAQ;AAE/B,SAASC,eAAe,QAAQ,2BAA2B;AAC3D,SAASC,kBAAkB,QAAQ,8BAA8B;AACjE,SAASC,aAAa,QAAQ,kBAAkB;AAChD,SAASC,mBAAmB,QAAQ,6BAA6B;AAEjE;;;;;CAKC,GACD,OAAO,SAASC,YACdC,KAYC,EAEDC,GAA2B;IAE3BC,4BAA4BF;IAE5B,MAAM,EAAEG,aAAa,QAAQ,EAAEC,OAAO,QAAQ,EAAEC,gBAAgB,MAAM,EAAE,GAAGL;IAE3E,MAAMM,YAAYZ,MAAMa,OAAO,CAAC,IAAMZ,gBAAgBK,MAAMM,SAAS,GAAG;QAACN,MAAMM,SAAS;KAAC;IACzF,MAAME,eAAed,MAAMa,OAAO,CAAC,IAAMX,mBAAmBI,MAAMQ,YAAY,GAAG;QAACR,MAAMQ,YAAY;KAAC;IACrG,MAAMC,oBAAoB,CAACC;YAEzBV;QADA,MAAMW,gBAAgBb,oBAAoBY,MAAMJ;SAChDN,sBAAAA,MAAMY,YAAY,cAAlBZ,0CAAAA,yBAAAA,OAAqBU,KAAKG,KAAK,EAAE;YAC/B,GAAGH,IAAI;YACPJ,WAAWK,cAAcG,kCAAkC;QAC7D;IACF;IAEA,MAAMC,uBAAuB,CAACL;YAAgCV;gBAAAA,yBAAAA,MAAMgB,eAAe,cAArBhB,6CAAAA,4BAAAA,OAAwBU,KAAKG,KAAK,EAAEH;;IAElG,MAAMO,oBAAoB,CAACP;YACzBV;SAAAA,sBAAAA,MAAMkB,YAAY,cAAlBlB,0CAAAA,yBAAAA,OAAqBU,KAAKG,KAAK,EAAEH;QACjC,OAAQA,KAAKS,IAAI;YACf,KAAKtB,cAAcuB,SAAS;YAC5B,KAAKvB,cAAcwB,OAAO;YAC1B,KAAKxB,cAAcyB,IAAI;YACvB,KAAKzB,cAAc0B,GAAG;gBACpB,yCAAyC;gBACzC,8BAA8B;gBAC9Bb,KAAKG,KAAK,CAACW,cAAc;QAC7B;IACF;IAEA,MAAMC,sBAAsBjC,iBAAiB,CAACkC;QAC5C,OAAQA,QAAQC,WAAW;YACzB,KAAK;gBACH,OAAOV,kBAAkBS;YAC3B,KAAK;gBACH,OAAOjB,kBAAkB;oBACvB,GAAGiB,OAAO;oBACVE,MAAMF,QAAQG,QAAQ,KAAK,YAAY,CAACvB,UAAUwB,GAAG,CAACJ,QAAQK,KAAK;oBACnEzB,WAAWA,UAAUQ,kCAAkC;gBACzD;YACF,KAAK;gBACH,OAAOC,qBAAqB;oBAC1B,GAAGW,OAAO;oBACVrB,eAAeA;oBACfG,cAAcA,aAAawB,kCAAkC;gBAC/D;QACJ;IACF;IAEA,OAAO;QACLC,YAAY;YACVC,MAAM;QACR;
|
|
1
|
+
{"version":3,"sources":["useRootTree.ts"],"sourcesContent":["import { SelectionMode, getNativeElementProps, useEventCallback, slot } from '@fluentui/react-utilities';\nimport type {\n TreeCheckedChangeData,\n TreeNavigationData_unstable,\n TreeOpenChangeData,\n TreeProps,\n TreeState,\n} from '../Tree';\nimport * as React from 'react';\nimport { TreeContextValue, TreeItemRequest } from '../contexts/treeContext';\nimport { createOpenItems } from '../utils/createOpenItems';\nimport { createCheckedItems } from '../utils/createCheckedItems';\nimport { treeDataTypes } from '../utils/tokens';\nimport { createNextOpenItems } from './useControllableOpenItems';\n\n/**\n * Create the state required to render the root level tree.\n *\n * @param props - props from this instance of tree\n * @param ref - reference to root HTMLElement of tree\n */\nexport function useRootTree(\n props: Pick<\n TreeProps,\n | 'selectionMode'\n | 'appearance'\n | 'size'\n | 'openItems'\n | 'checkedItems'\n | 'onOpenChange'\n | 'onCheckedChange'\n | 'onNavigation'\n | 'aria-label'\n | 'aria-labelledby'\n >,\n\n ref: React.Ref<HTMLElement>,\n): Omit<TreeState & TreeContextValue, 'treeType'> {\n warnIfNoProperPropsRootTree(props);\n\n const { appearance = 'subtle', size = 'medium', selectionMode = 'none' } = props;\n\n const openItems = React.useMemo(() => createOpenItems(props.openItems), [props.openItems]);\n const checkedItems = React.useMemo(() => createCheckedItems(props.checkedItems), [props.checkedItems]);\n const requestOpenChange = (data: TreeOpenChangeData) => {\n const nextOpenItems = createNextOpenItems(data, openItems);\n props.onOpenChange?.(data.event, {\n ...data,\n openItems: nextOpenItems.dangerouslyGetInternalSet_unstable(),\n });\n };\n\n const requestCheckedChange = (data: TreeCheckedChangeData) => props.onCheckedChange?.(data.event, data);\n\n const requestNavigation = (data: TreeNavigationData_unstable) => {\n props.onNavigation?.(data.event, data);\n switch (data.type) {\n case treeDataTypes.ArrowDown:\n case treeDataTypes.ArrowUp:\n case treeDataTypes.Home:\n case treeDataTypes.End:\n // stop the default behavior of the event\n // which is to scroll the page\n data.event.preventDefault();\n }\n };\n\n const requestTreeResponse = useEventCallback((request: TreeItemRequest) => {\n switch (request.requestType) {\n case 'navigate':\n return requestNavigation(request);\n case 'open':\n return requestOpenChange({\n ...request,\n open: request.itemType === 'branch' && !openItems.has(request.value),\n openItems: openItems.dangerouslyGetInternalSet_unstable(),\n });\n case 'selection':\n return requestCheckedChange({\n ...request,\n selectionMode: selectionMode as SelectionMode,\n checkedItems: checkedItems.dangerouslyGetInternalMap_unstable(),\n } as TreeCheckedChangeData);\n }\n });\n\n return {\n components: {\n root: 'div',\n },\n contextType: 'root',\n selectionMode,\n open: true,\n appearance,\n size,\n level: 1,\n openItems,\n checkedItems,\n requestTreeResponse,\n root: slot.always(\n getNativeElementProps('div', {\n ref,\n role: 'tree',\n 'aria-multiselectable': selectionMode === 'multiselect' ? true : undefined,\n ...props,\n }),\n { elementType: 'div' },\n ),\n };\n}\n\nfunction warnIfNoProperPropsRootTree(props: Pick<TreeProps, 'aria-label' | 'aria-labelledby'>) {\n if (process.env.NODE_ENV === 'development') {\n if (!props['aria-label'] && !props['aria-labelledby']) {\n // eslint-disable-next-line no-console\n console.warn(/* #__DE-INDENT__ */ `\n @fluentui/react-tree [useRootTree]:\n Tree must have either a \\`aria-label\\` or \\`aria-labelledby\\` property defined\n `);\n }\n }\n}\n"],"names":["getNativeElementProps","useEventCallback","slot","React","createOpenItems","createCheckedItems","treeDataTypes","createNextOpenItems","useRootTree","props","ref","warnIfNoProperPropsRootTree","appearance","size","selectionMode","openItems","useMemo","checkedItems","requestOpenChange","data","nextOpenItems","onOpenChange","event","dangerouslyGetInternalSet_unstable","requestCheckedChange","onCheckedChange","requestNavigation","onNavigation","type","ArrowDown","ArrowUp","Home","End","preventDefault","requestTreeResponse","request","requestType","open","itemType","has","value","dangerouslyGetInternalMap_unstable","components","root","contextType","level","always","role","undefined","elementType","process","env","NODE_ENV","console","warn"],"mappings":"AAAA,SAAwBA,qBAAqB,EAAEC,gBAAgB,EAAEC,IAAI,QAAQ,4BAA4B;AAQzG,YAAYC,WAAW,QAAQ;AAE/B,SAASC,eAAe,QAAQ,2BAA2B;AAC3D,SAASC,kBAAkB,QAAQ,8BAA8B;AACjE,SAASC,aAAa,QAAQ,kBAAkB;AAChD,SAASC,mBAAmB,QAAQ,6BAA6B;AAEjE;;;;;CAKC,GACD,OAAO,SAASC,YACdC,KAYC,EAEDC,GAA2B;IAE3BC,4BAA4BF;IAE5B,MAAM,EAAEG,aAAa,QAAQ,EAAEC,OAAO,QAAQ,EAAEC,gBAAgB,MAAM,EAAE,GAAGL;IAE3E,MAAMM,YAAYZ,MAAMa,OAAO,CAAC,IAAMZ,gBAAgBK,MAAMM,SAAS,GAAG;QAACN,MAAMM,SAAS;KAAC;IACzF,MAAME,eAAed,MAAMa,OAAO,CAAC,IAAMX,mBAAmBI,MAAMQ,YAAY,GAAG;QAACR,MAAMQ,YAAY;KAAC;IACrG,MAAMC,oBAAoB,CAACC;YAEzBV;QADA,MAAMW,gBAAgBb,oBAAoBY,MAAMJ;SAChDN,sBAAAA,MAAMY,YAAY,cAAlBZ,0CAAAA,yBAAAA,OAAqBU,KAAKG,KAAK,EAAE;YAC/B,GAAGH,IAAI;YACPJ,WAAWK,cAAcG,kCAAkC;QAC7D;IACF;IAEA,MAAMC,uBAAuB,CAACL;YAAgCV;gBAAAA,yBAAAA,MAAMgB,eAAe,cAArBhB,6CAAAA,4BAAAA,OAAwBU,KAAKG,KAAK,EAAEH;;IAElG,MAAMO,oBAAoB,CAACP;YACzBV;SAAAA,sBAAAA,MAAMkB,YAAY,cAAlBlB,0CAAAA,yBAAAA,OAAqBU,KAAKG,KAAK,EAAEH;QACjC,OAAQA,KAAKS,IAAI;YACf,KAAKtB,cAAcuB,SAAS;YAC5B,KAAKvB,cAAcwB,OAAO;YAC1B,KAAKxB,cAAcyB,IAAI;YACvB,KAAKzB,cAAc0B,GAAG;gBACpB,yCAAyC;gBACzC,8BAA8B;gBAC9Bb,KAAKG,KAAK,CAACW,cAAc;QAC7B;IACF;IAEA,MAAMC,sBAAsBjC,iBAAiB,CAACkC;QAC5C,OAAQA,QAAQC,WAAW;YACzB,KAAK;gBACH,OAAOV,kBAAkBS;YAC3B,KAAK;gBACH,OAAOjB,kBAAkB;oBACvB,GAAGiB,OAAO;oBACVE,MAAMF,QAAQG,QAAQ,KAAK,YAAY,CAACvB,UAAUwB,GAAG,CAACJ,QAAQK,KAAK;oBACnEzB,WAAWA,UAAUQ,kCAAkC;gBACzD;YACF,KAAK;gBACH,OAAOC,qBAAqB;oBAC1B,GAAGW,OAAO;oBACVrB,eAAeA;oBACfG,cAAcA,aAAawB,kCAAkC;gBAC/D;QACJ;IACF;IAEA,OAAO;QACLC,YAAY;YACVC,MAAM;QACR;QACAC,aAAa;QACb9B;QACAuB,MAAM;QACNzB;QACAC;QACAgC,OAAO;QACP9B;QACAE;QACAiB;QACAS,MAAMzC,KAAK4C,MAAM,CACf9C,sBAAsB,OAAO;YAC3BU;YACAqC,MAAM;YACN,wBAAwBjC,kBAAkB,gBAAgB,OAAOkC;YACjE,GAAGvC,KAAK;QACV,IACA;YAAEwC,aAAa;QAAM;IAEzB;AACF;AAEA,SAAStC,4BAA4BF,KAAwD;IAC3F,IAAIyC,QAAQC,GAAG,CAACC,QAAQ,KAAK,eAAe;QAC1C,IAAI,CAAC3C,KAAK,CAAC,aAAa,IAAI,CAACA,KAAK,CAAC,kBAAkB,EAAE;YACrD,sCAAsC;YACtC4C,QAAQC,IAAI,CAAsB,CAAC;8EAGnC,CAAC;QACH;IACF;AACF"}
|
package/lib/hooks/useSubtree.js
CHANGED
|
@@ -7,24 +7,15 @@ import { getNativeElementProps, useMergedRefs, slot } from '@fluentui/react-util
|
|
|
7
7
|
* @param props - props from this instance of tree
|
|
8
8
|
* @param ref - reference to root HTMLElement of tree
|
|
9
9
|
*/ export function useSubtree(props, ref) {
|
|
10
|
-
const contextAppearance = useTreeContext_unstable((ctx)=>ctx.appearance);
|
|
11
|
-
const contextSize = useTreeContext_unstable((ctx)=>ctx.size);
|
|
12
10
|
const subtreeRef = useTreeItemContext_unstable((ctx)=>ctx.subtreeRef);
|
|
13
|
-
const { appearance = contextAppearance !== null && contextAppearance !== void 0 ? contextAppearance : 'subtle', size = contextSize !== null && contextSize !== void 0 ? contextSize : 'medium' } = props;
|
|
14
11
|
const parentLevel = useTreeContext_unstable((ctx)=>ctx.level);
|
|
15
|
-
const selectionMode = useTreeContext_unstable((ctx)=>ctx.selectionMode);
|
|
16
|
-
const openItems = useTreeContext_unstable((ctx)=>ctx.openItems);
|
|
17
|
-
const checkedItems = useTreeContext_unstable((ctx)=>ctx.checkedItems);
|
|
18
|
-
const requestTreeResponse = useTreeContext_unstable((ctx)=>ctx.requestTreeResponse);
|
|
19
12
|
const open = useTreeItemContext_unstable((ctx)=>ctx.open);
|
|
20
13
|
return {
|
|
14
|
+
contextType: 'subtree',
|
|
21
15
|
open,
|
|
22
16
|
components: {
|
|
23
17
|
root: 'div'
|
|
24
18
|
},
|
|
25
|
-
appearance,
|
|
26
|
-
size,
|
|
27
|
-
selectionMode,
|
|
28
19
|
level: parentLevel + 1,
|
|
29
20
|
root: slot.always(getNativeElementProps('div', {
|
|
30
21
|
ref: useMergedRefs(ref, subtreeRef),
|
|
@@ -32,9 +23,6 @@ import { getNativeElementProps, useMergedRefs, slot } from '@fluentui/react-util
|
|
|
32
23
|
...props
|
|
33
24
|
}), {
|
|
34
25
|
elementType: 'div'
|
|
35
|
-
})
|
|
36
|
-
openItems,
|
|
37
|
-
checkedItems,
|
|
38
|
-
requestTreeResponse
|
|
26
|
+
})
|
|
39
27
|
};
|
|
40
28
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useSubtree.ts"],"sourcesContent":["import * as React from 'react';\nimport { TreeProps, TreeState } from '../Tree';\nimport { useTreeContext_unstable, useTreeItemContext_unstable } from '../contexts/index';\nimport { getNativeElementProps, useMergedRefs, slot } from '@fluentui/react-utilities';\n\n/**\n * Create the state required to render a sub-level tree.\n *\n * @param props - props from this instance of tree\n * @param ref - reference to root HTMLElement of tree\n */\nexport function useSubtree(\n props: Pick<TreeProps, 'appearance' | 'size'>,\n ref: React.Ref<HTMLElement>,\n): Omit<TreeState, 'treeType'> {\n const
|
|
1
|
+
{"version":3,"sources":["useSubtree.ts"],"sourcesContent":["import * as React from 'react';\nimport { TreeProps, TreeState } from '../Tree';\nimport { SubtreeContextValue, useTreeContext_unstable, useTreeItemContext_unstable } from '../contexts/index';\nimport { getNativeElementProps, useMergedRefs, slot } from '@fluentui/react-utilities';\n\n/**\n * Create the state required to render a sub-level tree.\n *\n * @param props - props from this instance of tree\n * @param ref - reference to root HTMLElement of tree\n */\nexport function useSubtree(\n props: Pick<TreeProps, 'appearance' | 'size'>,\n ref: React.Ref<HTMLElement>,\n): Omit<TreeState & SubtreeContextValue, 'treeType'> {\n const subtreeRef = useTreeItemContext_unstable(ctx => ctx.subtreeRef);\n\n const parentLevel = useTreeContext_unstable(ctx => ctx.level);\n\n const open = useTreeItemContext_unstable(ctx => ctx.open);\n\n return {\n contextType: 'subtree',\n open,\n components: {\n root: 'div',\n },\n level: parentLevel + 1,\n root: slot.always(\n getNativeElementProps('div', {\n ref: useMergedRefs(ref, subtreeRef),\n role: 'group',\n ...props,\n }),\n { elementType: 'div' },\n ),\n };\n}\n"],"names":["React","useTreeContext_unstable","useTreeItemContext_unstable","getNativeElementProps","useMergedRefs","slot","useSubtree","props","ref","subtreeRef","ctx","parentLevel","level","open","contextType","components","root","always","role","elementType"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAE/B,SAA8BC,uBAAuB,EAAEC,2BAA2B,QAAQ,oBAAoB;AAC9G,SAASC,qBAAqB,EAAEC,aAAa,EAAEC,IAAI,QAAQ,4BAA4B;AAEvF;;;;;CAKC,GACD,OAAO,SAASC,WACdC,KAA6C,EAC7CC,GAA2B;IAE3B,MAAMC,aAAaP,4BAA4BQ,CAAAA,MAAOA,IAAID,UAAU;IAEpE,MAAME,cAAcV,wBAAwBS,CAAAA,MAAOA,IAAIE,KAAK;IAE5D,MAAMC,OAAOX,4BAA4BQ,CAAAA,MAAOA,IAAIG,IAAI;IAExD,OAAO;QACLC,aAAa;QACbD;QACAE,YAAY;YACVC,MAAM;QACR;QACAJ,OAAOD,cAAc;QACrBK,MAAMX,KAAKY,MAAM,CACfd,sBAAsB,OAAO;YAC3BK,KAAKJ,cAAcI,KAAKC;YACxBS,MAAM;YACN,GAAGX,KAAK;QACV,IACA;YAAEY,aAAa;QAAM;IAEzB;AACF"}
|
package/lib/index.js
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
export { Tree, treeClassNames, useTree_unstable, useTreeStyles_unstable, useTreeContextValues_unstable, renderTree_unstable } from './Tree';
|
|
2
2
|
export { FlatTree, flatTreeClassNames, useFlatTree_unstable, useFlatTreeStyles_unstable, useFlatTreeContextValues_unstable, renderFlatTree_unstable } from './FlatTree';
|
|
3
|
-
export {
|
|
3
|
+
export { TreeProvider } from './components/TreeProvider';
|
|
4
|
+
export { useTreeContext_unstable, useTreeItemContext_unstable, useSubtreeContext_unstable, TreeItemProvider } from './contexts';
|
|
4
5
|
export { treeItemLevelToken } from './utils/tokens';
|
|
5
6
|
export { useHeadlessFlatTree_unstable } from './components/FlatTree/useHeadlessFlatTree';
|
|
6
7
|
export { TreeItem, treeItemClassNames, renderTreeItem_unstable, useTreeItemStyles_unstable, useTreeItemContextValues_unstable, useTreeItem_unstable } from './TreeItem';
|
package/lib/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["index.ts"],"sourcesContent":["export {\n Tree,\n treeClassNames,\n useTree_unstable,\n useTreeStyles_unstable,\n useTreeContextValues_unstable,\n renderTree_unstable,\n} from './Tree';\n\nexport type {\n TreeSlots,\n TreeProps,\n TreeState,\n TreeContextValues,\n TreeOpenChangeData,\n TreeSelectionValue,\n TreeOpenChangeEvent,\n TreeCheckedChangeData,\n TreeCheckedChangeEvent,\n TreeNavigationData_unstable,\n TreeNavigationEvent_unstable,\n} from './Tree';\n\nexport {\n FlatTree,\n flatTreeClassNames,\n useFlatTree_unstable,\n useFlatTreeStyles_unstable,\n useFlatTreeContextValues_unstable,\n renderFlatTree_unstable,\n} from './FlatTree';\n\nexport type { FlatTreeSlots, FlatTreeProps, FlatTreeState } from './FlatTree';\n\nexport {
|
|
1
|
+
{"version":3,"sources":["index.ts"],"sourcesContent":["export {\n Tree,\n treeClassNames,\n useTree_unstable,\n useTreeStyles_unstable,\n useTreeContextValues_unstable,\n renderTree_unstable,\n} from './Tree';\n\nexport type {\n TreeSlots,\n TreeProps,\n TreeState,\n TreeContextValues,\n TreeOpenChangeData,\n TreeSelectionValue,\n TreeOpenChangeEvent,\n TreeCheckedChangeData,\n TreeCheckedChangeEvent,\n TreeNavigationData_unstable,\n TreeNavigationEvent_unstable,\n} from './Tree';\n\nexport {\n FlatTree,\n flatTreeClassNames,\n useFlatTree_unstable,\n useFlatTreeStyles_unstable,\n useFlatTreeContextValues_unstable,\n renderFlatTree_unstable,\n} from './FlatTree';\n\nexport type { FlatTreeSlots, FlatTreeProps, FlatTreeState } from './FlatTree';\n\nexport { TreeProvider } from './components/TreeProvider';\n\nexport {\n useTreeContext_unstable,\n useTreeItemContext_unstable,\n useSubtreeContext_unstable,\n TreeItemProvider,\n} from './contexts';\nexport type { TreeContextValue, SubtreeContextValue, TreeItemContextValue } from './contexts';\n\nexport { treeItemLevelToken } from './utils/tokens';\n\nexport { useHeadlessFlatTree_unstable } from './components/FlatTree/useHeadlessFlatTree';\nexport type {\n HeadlessFlatTree,\n HeadlessFlatTreeItem,\n HeadlessFlatTreeItemProps,\n HeadlessFlatTreeOptions,\n} from './components/FlatTree/useHeadlessFlatTree';\n\nexport {\n TreeItem,\n treeItemClassNames,\n renderTreeItem_unstable,\n useTreeItemStyles_unstable,\n useTreeItemContextValues_unstable,\n useTreeItem_unstable,\n} from './TreeItem';\nexport type {\n TreeItemProps,\n TreeItemState,\n TreeItemSlots,\n TreeItemValue,\n TreeItemOpenChangeData,\n TreeItemOpenChangeEvent,\n} from './TreeItem';\n\nexport { FlatTreeItem } from './FlatTreeItem';\nexport type { FlatTreeItemProps } from './FlatTreeItem';\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 { flattenTree_unstable } from './utils/flattenTree';\nexport type { FlattenTreeItem } from './utils/flattenTree';\n"],"names":["Tree","treeClassNames","useTree_unstable","useTreeStyles_unstable","useTreeContextValues_unstable","renderTree_unstable","FlatTree","flatTreeClassNames","useFlatTree_unstable","useFlatTreeStyles_unstable","useFlatTreeContextValues_unstable","renderFlatTree_unstable","TreeProvider","useTreeContext_unstable","useTreeItemContext_unstable","useSubtreeContext_unstable","TreeItemProvider","treeItemLevelToken","useHeadlessFlatTree_unstable","TreeItem","treeItemClassNames","renderTreeItem_unstable","useTreeItemStyles_unstable","useTreeItemContextValues_unstable","useTreeItem_unstable","FlatTreeItem","TreeItemLayout","treeItemLayoutClassNames","renderTreeItemLayout_unstable","useTreeItemLayoutStyles_unstable","useTreeItemLayout_unstable","TreeItemPersonaLayout","treeItemPersonaLayoutClassNames","renderTreeItemPersonaLayout_unstable","useTreeItemPersonaLayoutStyles_unstable","useTreeItemPersonaLayout_unstable","flattenTree_unstable"],"mappings":"AAAA,SACEA,IAAI,EACJC,cAAc,EACdC,gBAAgB,EAChBC,sBAAsB,EACtBC,6BAA6B,EAC7BC,mBAAmB,QACd,SAAS;AAgBhB,SACEC,QAAQ,EACRC,kBAAkB,EAClBC,oBAAoB,EACpBC,0BAA0B,EAC1BC,iCAAiC,EACjCC,uBAAuB,QAClB,aAAa;AAIpB,SAASC,YAAY,QAAQ,4BAA4B;AAEzD,SACEC,uBAAuB,EACvBC,2BAA2B,EAC3BC,0BAA0B,EAC1BC,gBAAgB,QACX,aAAa;AAGpB,SAASC,kBAAkB,QAAQ,iBAAiB;AAEpD,SAASC,4BAA4B,QAAQ,4CAA4C;AAQzF,SACEC,QAAQ,EACRC,kBAAkB,EAClBC,uBAAuB,EACvBC,0BAA0B,EAC1BC,iCAAiC,EACjCC,oBAAoB,QACf,aAAa;AAUpB,SAASC,YAAY,QAAQ,iBAAiB;AAG9C,SACEC,cAAc,EACdC,wBAAwB,EACxBC,6BAA6B,EAC7BC,gCAAgC,EAChCC,0BAA0B,QACrB,mBAAmB;AAG1B,SACEC,qBAAqB,EACrBC,+BAA+B,EAC/BC,oCAAoC,EACpCC,uCAAuC,EACvCC,iCAAiC,QAC5B,0BAA0B;AAOjC,SAASC,oBAAoB,QAAQ,sBAAsB"}
|
|
@@ -18,6 +18,8 @@ const _treeItemFilter = require("../../utils/treeItemFilter");
|
|
|
18
18
|
const _reactutilities = require("@fluentui/react-utilities");
|
|
19
19
|
const _treeContext = require("../../contexts/treeContext");
|
|
20
20
|
const _useSubtree = require("../../hooks/useSubtree");
|
|
21
|
+
const _ImmutableSet = require("../../utils/ImmutableSet");
|
|
22
|
+
const _ImmutableMap = require("../../utils/ImmutableMap");
|
|
21
23
|
const useFlatTree_unstable = (props, ref)=>{
|
|
22
24
|
const level = (0, _treeContext.useTreeContext_unstable)((ctx)=>ctx.level);
|
|
23
25
|
// as level is static, this doesn't break rule of hooks
|
|
@@ -62,13 +64,25 @@ You cannot use a <FlatTree> component inside of another <FlatTree> component.`);
|
|
|
62
64
|
}
|
|
63
65
|
return {
|
|
64
66
|
...(0, _useSubtree.useSubtree)(props, ref),
|
|
67
|
+
// ------ defaultTreeContextValue
|
|
68
|
+
level: 0,
|
|
69
|
+
contextType: 'root',
|
|
70
|
+
treeType: 'nested',
|
|
71
|
+
selectionMode: 'none',
|
|
72
|
+
openItems: _ImmutableSet.ImmutableSet.empty,
|
|
73
|
+
checkedItems: _ImmutableMap.ImmutableMap.empty,
|
|
74
|
+
requestTreeResponse: noop,
|
|
75
|
+
appearance: 'subtle',
|
|
76
|
+
size: 'medium',
|
|
77
|
+
// ------ defaultTreeContextValue
|
|
65
78
|
open: false,
|
|
66
|
-
treeType: 'flat',
|
|
67
79
|
components: {
|
|
68
80
|
root: _react.Fragment
|
|
69
81
|
},
|
|
70
|
-
root: _reactutilities.slot.always(
|
|
82
|
+
root: _reactutilities.slot.always(props, {
|
|
71
83
|
elementType: _react.Fragment
|
|
72
84
|
})
|
|
73
85
|
};
|
|
74
86
|
}
|
|
87
|
+
function noop() {
|
|
88
|
+
/* do nothing */ }
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useFlatTree.js"],"sourcesContent":["import * as React from 'react';\nimport { useRootTree } from '../../hooks/useRootTree';\nimport { useFlatTreeNavigation } from './useFlatTreeNavigation';\nimport { createHTMLElementWalker } from '../../utils/createHTMLElementWalker';\nimport { useFluent_unstable } from '@fluentui/react-shared-contexts';\nimport { treeItemFilter } from '../../utils/treeItemFilter';\nimport { slot, useEventCallback, useMergedRefs } from '@fluentui/react-utilities';\nimport { useTreeContext_unstable } from '../../contexts/treeContext';\nimport { useSubtree } from '../../hooks/useSubtree';\nexport const useFlatTree_unstable = (props, ref)=>{\n const level = useTreeContext_unstable((ctx)=>ctx.level);\n // as level is static, this doesn't break rule of hooks\n // and if this becomes an issue later on, this can be easily converted\n // eslint-disable-next-line react-hooks/rules-of-hooks\n return level > 1 ? useSubFlatTree(props, ref) : useRootFlatTree(props, ref);\n};\nfunction useRootFlatTree(props, ref) {\n const { navigate, initialize } = useFlatTreeNavigation();\n const walkerRef = React.useRef();\n const { targetDocument } = useFluent_unstable();\n const initializeWalker = React.useCallback((root)=>{\n if (root && targetDocument) {\n walkerRef.current = createHTMLElementWalker(root, targetDocument, treeItemFilter);\n initialize(walkerRef.current);\n }\n }, [\n initialize,\n targetDocument\n ]);\n const handleNavigation = useEventCallback((event, data)=>{\n var _props_onNavigation;\n (_props_onNavigation = props.onNavigation) === null || _props_onNavigation === void 0 ? void 0 : _props_onNavigation.call(props, event, data);\n if (walkerRef.current && !event.isDefaultPrevented()) {\n navigate(data, walkerRef.current);\n }\n });\n return {\n treeType: 'flat',\n ...useRootTree({\n ...props,\n onNavigation: handleNavigation\n }, useMergedRefs(ref, initializeWalker))\n };\n}\nfunction useSubFlatTree(props, ref) {\n if (process.env.NODE_ENV === 'development') {\n // eslint-disable-next-line no-console\n console.error(`@fluentui/react-tree [useFlatTree]:\nSubtrees are not allowed in a FlatTree!\nYou cannot use a <FlatTree> component inside of another <FlatTree> component.`);\n }\n return {\n ...useSubtree(props, ref),\n
|
|
1
|
+
{"version":3,"sources":["useFlatTree.js"],"sourcesContent":["import * as React from 'react';\nimport { useRootTree } from '../../hooks/useRootTree';\nimport { useFlatTreeNavigation } from './useFlatTreeNavigation';\nimport { createHTMLElementWalker } from '../../utils/createHTMLElementWalker';\nimport { useFluent_unstable } from '@fluentui/react-shared-contexts';\nimport { treeItemFilter } from '../../utils/treeItemFilter';\nimport { slot, useEventCallback, useMergedRefs } from '@fluentui/react-utilities';\nimport { useTreeContext_unstable } from '../../contexts/treeContext';\nimport { useSubtree } from '../../hooks/useSubtree';\nimport { ImmutableSet } from '../../utils/ImmutableSet';\nimport { ImmutableMap } from '../../utils/ImmutableMap';\nexport const useFlatTree_unstable = (props, ref)=>{\n const level = useTreeContext_unstable((ctx)=>ctx.level);\n // as level is static, this doesn't break rule of hooks\n // and if this becomes an issue later on, this can be easily converted\n // eslint-disable-next-line react-hooks/rules-of-hooks\n return level > 1 ? useSubFlatTree(props, ref) : useRootFlatTree(props, ref);\n};\nfunction useRootFlatTree(props, ref) {\n const { navigate, initialize } = useFlatTreeNavigation();\n const walkerRef = React.useRef();\n const { targetDocument } = useFluent_unstable();\n const initializeWalker = React.useCallback((root)=>{\n if (root && targetDocument) {\n walkerRef.current = createHTMLElementWalker(root, targetDocument, treeItemFilter);\n initialize(walkerRef.current);\n }\n }, [\n initialize,\n targetDocument\n ]);\n const handleNavigation = useEventCallback((event, data)=>{\n var _props_onNavigation;\n (_props_onNavigation = props.onNavigation) === null || _props_onNavigation === void 0 ? void 0 : _props_onNavigation.call(props, event, data);\n if (walkerRef.current && !event.isDefaultPrevented()) {\n navigate(data, walkerRef.current);\n }\n });\n return {\n treeType: 'flat',\n ...useRootTree({\n ...props,\n onNavigation: handleNavigation\n }, useMergedRefs(ref, initializeWalker))\n };\n}\nfunction useSubFlatTree(props, ref) {\n if (process.env.NODE_ENV === 'development') {\n // eslint-disable-next-line no-console\n console.error(`@fluentui/react-tree [useFlatTree]:\nSubtrees are not allowed in a FlatTree!\nYou cannot use a <FlatTree> component inside of another <FlatTree> component.`);\n }\n return {\n ...useSubtree(props, ref),\n // ------ defaultTreeContextValue\n level: 0,\n contextType: 'root',\n treeType: 'nested',\n selectionMode: 'none',\n openItems: ImmutableSet.empty,\n checkedItems: ImmutableMap.empty,\n requestTreeResponse: noop,\n appearance: 'subtle',\n size: 'medium',\n // ------ defaultTreeContextValue\n open: false,\n components: {\n root: React.Fragment\n },\n root: slot.always(props, {\n elementType: React.Fragment\n })\n };\n}\nfunction noop() {\n/* do nothing */ }\n"],"names":["useFlatTree_unstable","props","ref","level","useTreeContext_unstable","ctx","useSubFlatTree","useRootFlatTree","navigate","initialize","useFlatTreeNavigation","walkerRef","React","useRef","targetDocument","useFluent_unstable","initializeWalker","useCallback","root","current","createHTMLElementWalker","treeItemFilter","handleNavigation","useEventCallback","event","data","_props_onNavigation","onNavigation","call","isDefaultPrevented","treeType","useRootTree","useMergedRefs","process","env","NODE_ENV","console","error","useSubtree","contextType","selectionMode","openItems","ImmutableSet","empty","checkedItems","ImmutableMap","requestTreeResponse","noop","appearance","size","open","components","Fragment","slot","always","elementType"],"mappings":";;;;+BAWaA;;;eAAAA;;;;iEAXU;6BACK;uCACU;yCACE;qCACL;gCACJ;gCACuB;6BACd;4BACb;8BACE;8BACA;AACtB,MAAMA,uBAAuB,CAACC,OAAOC;IACxC,MAAMC,QAAQC,IAAAA,oCAAuB,EAAC,CAACC,MAAMA,IAAIF,KAAK;IACtD,uDAAuD;IACvD,sEAAsE;IACtE,sDAAsD;IACtD,OAAOA,QAAQ,IAAIG,eAAeL,OAAOC,OAAOK,gBAAgBN,OAAOC;AAC3E;AACA,SAASK,gBAAgBN,KAAK,EAAEC,GAAG;IAC/B,MAAM,EAAEM,QAAQ,EAAEC,UAAU,EAAE,GAAGC,IAAAA,4CAAqB;IACtD,MAAMC,YAAYC,OAAMC,MAAM;IAC9B,MAAM,EAAEC,cAAc,EAAE,GAAGC,IAAAA,uCAAkB;IAC7C,MAAMC,mBAAmBJ,OAAMK,WAAW,CAAC,CAACC;QACxC,IAAIA,QAAQJ,gBAAgB;YACxBH,UAAUQ,OAAO,GAAGC,IAAAA,gDAAuB,EAACF,MAAMJ,gBAAgBO,8BAAc;YAChFZ,WAAWE,UAAUQ,OAAO;QAChC;IACJ,GAAG;QACCV;QACAK;KACH;IACD,MAAMQ,mBAAmBC,IAAAA,gCAAgB,EAAC,CAACC,OAAOC;QAC9C,IAAIC;QACHA,CAAAA,sBAAsBzB,MAAM0B,YAAY,AAAD,MAAO,QAAQD,wBAAwB,KAAK,IAAI,KAAK,IAAIA,oBAAoBE,IAAI,CAAC3B,OAAOuB,OAAOC;QACxI,IAAId,UAAUQ,OAAO,IAAI,CAACK,MAAMK,kBAAkB,IAAI;YAClDrB,SAASiB,MAAMd,UAAUQ,OAAO;QACpC;IACJ;IACA,OAAO;QACHW,UAAU;QACV,GAAGC,IAAAA,wBAAW,EAAC;YACX,GAAG9B,KAAK;YACR0B,cAAcL;QAClB,GAAGU,IAAAA,6BAAa,EAAC9B,KAAKc,kBAAkB;IAC5C;AACJ;AACA,SAASV,eAAeL,KAAK,EAAEC,GAAG;IAC9B,IAAI+B,QAAQC,GAAG,CAACC,QAAQ,KAAK,eAAe;QACxC,sCAAsC;QACtCC,QAAQC,KAAK,CAAC,CAAC;;6EAEsD,CAAC;IAC1E;IACA,OAAO;QACH,GAAGC,IAAAA,sBAAU,EAACrC,OAAOC,IAAI;QACzB,iCAAiC;QACjCC,OAAO;QACPoC,aAAa;QACbT,UAAU;QACVU,eAAe;QACfC,WAAWC,0BAAY,CAACC,KAAK;QAC7BC,cAAcC,0BAAY,CAACF,KAAK;QAChCG,qBAAqBC;QACrBC,YAAY;QACZC,MAAM;QACN,iCAAiC;QACjCC,MAAM;QACNC,YAAY;YACRjC,MAAMN,OAAMwC,QAAQ;QACxB;QACAlC,MAAMmC,oBAAI,CAACC,MAAM,CAACrD,OAAO;YACrBsD,aAAa3C,OAAMwC,QAAQ;QAC/B;IACJ;AACJ;AACA,SAASL;AACT,cAAc,GAAG"}
|
|
@@ -8,5 +8,23 @@ Object.defineProperty(exports, "useFlatTreeContextValues_unstable", {
|
|
|
8
8
|
return useFlatTreeContextValues_unstable;
|
|
9
9
|
}
|
|
10
10
|
});
|
|
11
|
-
const
|
|
12
|
-
const
|
|
11
|
+
const useFlatTreeContextValues_unstable = (state)=>{
|
|
12
|
+
const { openItems, level, contextType, treeType, checkedItems, selectionMode, appearance, size, requestTreeResponse } = state;
|
|
13
|
+
/**
|
|
14
|
+
* This context is created with "@fluentui/react-context-selector",
|
|
15
|
+
* there is no sense to memoize it
|
|
16
|
+
*/ const tree = {
|
|
17
|
+
treeType,
|
|
18
|
+
size,
|
|
19
|
+
openItems,
|
|
20
|
+
appearance,
|
|
21
|
+
checkedItems,
|
|
22
|
+
selectionMode,
|
|
23
|
+
contextType,
|
|
24
|
+
level,
|
|
25
|
+
requestTreeResponse
|
|
26
|
+
};
|
|
27
|
+
return {
|
|
28
|
+
tree
|
|
29
|
+
};
|
|
30
|
+
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useFlatTreeContextValues.js"],"sourcesContent":["
|
|
1
|
+
{"version":3,"sources":["useFlatTreeContextValues.js"],"sourcesContent":["export const useFlatTreeContextValues_unstable = (state)=>{\n const { openItems, level, contextType, treeType, checkedItems, selectionMode, appearance, size, requestTreeResponse } = state;\n /**\n * This context is created with \"@fluentui/react-context-selector\",\n * there is no sense to memoize it\n */ const tree = {\n treeType,\n size,\n openItems,\n appearance,\n checkedItems,\n selectionMode,\n contextType,\n level,\n requestTreeResponse\n };\n return {\n tree\n };\n};\n"],"names":["useFlatTreeContextValues_unstable","state","openItems","level","contextType","treeType","checkedItems","selectionMode","appearance","size","requestTreeResponse","tree"],"mappings":";;;;+BAAaA;;;eAAAA;;;AAAN,MAAMA,oCAAoC,CAACC;IAC9C,MAAM,EAAEC,SAAS,EAAEC,KAAK,EAAEC,WAAW,EAAEC,QAAQ,EAAEC,YAAY,EAAEC,aAAa,EAAEC,UAAU,EAAEC,IAAI,EAAEC,mBAAmB,EAAE,GAAGT;IACxH;;;GAGD,GAAG,MAAMU,OAAO;QACXN;QACAI;QACAP;QACAM;QACAF;QACAC;QACAH;QACAD;QACAO;IACJ;IACA,OAAO;QACHC;IACJ;AACJ"}
|
|
@@ -10,10 +10,10 @@ Object.defineProperty(exports, "renderTree_unstable", {
|
|
|
10
10
|
});
|
|
11
11
|
const _jsxruntime = require("@fluentui/react-jsx-runtime/jsx-runtime");
|
|
12
12
|
const _reactutilities = require("@fluentui/react-utilities");
|
|
13
|
-
const
|
|
13
|
+
const _TreeProvider = require("../TreeProvider");
|
|
14
14
|
const renderTree_unstable = (state, contextValues)=>{
|
|
15
15
|
(0, _reactutilities.assertSlots)(state);
|
|
16
|
-
return /*#__PURE__*/ (0, _jsxruntime.jsx)(
|
|
16
|
+
return /*#__PURE__*/ (0, _jsxruntime.jsx)(_TreeProvider.TreeProvider, {
|
|
17
17
|
value: contextValues.tree,
|
|
18
18
|
children: state.open && /*#__PURE__*/ (0, _jsxruntime.jsx)(state.root, {
|
|
19
19
|
children: state.root.children
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["renderTree.js"],"sourcesContent":[" import { jsx as _jsx } from \"@fluentui/react-jsx-runtime/jsx-runtime\";\nimport { assertSlots } from '@fluentui/react-utilities';\nimport { TreeProvider } from '
|
|
1
|
+
{"version":3,"sources":["renderTree.js"],"sourcesContent":[" import { jsx as _jsx } from \"@fluentui/react-jsx-runtime/jsx-runtime\";\nimport { assertSlots } from '@fluentui/react-utilities';\nimport { TreeProvider } from '../TreeProvider';\nexport const renderTree_unstable = (state, contextValues)=>{\n assertSlots(state);\n return /*#__PURE__*/ _jsx(TreeProvider, {\n value: contextValues.tree,\n children: state.open && /*#__PURE__*/ _jsx(state.root, {\n children: state.root.children\n })\n });\n};\n"],"names":["renderTree_unstable","state","contextValues","assertSlots","_jsx","TreeProvider","value","tree","children","open","root"],"mappings":";;;;+BAGaA;;;eAAAA;;;4BAHiB;gCACF;8BACC;AACtB,MAAMA,sBAAsB,CAACC,OAAOC;IACvCC,IAAAA,2BAAW,EAACF;IACZ,OAAO,WAAW,GAAGG,IAAAA,eAAI,EAACC,0BAAY,EAAE;QACpCC,OAAOJ,cAAcK,IAAI;QACzBC,UAAUP,MAAMQ,IAAI,IAAI,WAAW,GAAGL,IAAAA,eAAI,EAACH,MAAMS,IAAI,EAAE;YACnDF,UAAUP,MAAMS,IAAI,CAACF,QAAQ;QACjC;IACJ;AACJ"}
|
|
@@ -13,7 +13,7 @@ const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
|
|
|
13
13
|
const _reactutilities = require("@fluentui/react-utilities");
|
|
14
14
|
const _useControllableOpenItems = require("../../hooks/useControllableOpenItems");
|
|
15
15
|
const _useNestedControllableCheckedItems = require("./useNestedControllableCheckedItems");
|
|
16
|
-
const
|
|
16
|
+
const _subtreeContext = require("../../contexts/subtreeContext");
|
|
17
17
|
const _useRootTree = require("../../hooks/useRootTree");
|
|
18
18
|
const _useSubtree = require("../../hooks/useSubtree");
|
|
19
19
|
const _createHTMLElementWalker = require("../../utils/createHTMLElementWalker");
|
|
@@ -21,14 +21,11 @@ const _treeItemFilter = require("../../utils/treeItemFilter");
|
|
|
21
21
|
const _useTreeNavigation = require("./useTreeNavigation");
|
|
22
22
|
const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
|
|
23
23
|
const useTree_unstable = (props, ref)=>{
|
|
24
|
-
const
|
|
25
|
-
// as
|
|
24
|
+
const { level } = (0, _subtreeContext.useSubtreeContext_unstable)();
|
|
25
|
+
// as level is static, this doesn't break rule of hooks
|
|
26
26
|
// and if this becomes an issue later on, this can be easily converted
|
|
27
27
|
// eslint-disable-next-line react-hooks/rules-of-hooks
|
|
28
|
-
return
|
|
29
|
-
...(0, _useSubtree.useSubtree)(props, ref),
|
|
30
|
-
treeType: 'nested'
|
|
31
|
-
} : useNestedRootTree(props, ref);
|
|
28
|
+
return level > 0 ? (0, _useSubtree.useSubtree)(props, ref) : useNestedRootTree(props, ref);
|
|
32
29
|
};
|
|
33
30
|
function useNestedRootTree(props, ref) {
|
|
34
31
|
const [openItems, setOpenItems] = (0, _useControllableOpenItems.useControllableOpenItems)(props);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useTree.js"],"sourcesContent":["import * as React from 'react';\nimport { useEventCallback, useMergedRefs } from '@fluentui/react-utilities';\nimport { createNextOpenItems, useControllableOpenItems } from '../../hooks/useControllableOpenItems';\nimport { createNextNestedCheckedItems, useNestedCheckedItems } from './useNestedControllableCheckedItems';\nimport {
|
|
1
|
+
{"version":3,"sources":["useTree.js"],"sourcesContent":["import * as React from 'react';\nimport { useEventCallback, useMergedRefs } from '@fluentui/react-utilities';\nimport { createNextOpenItems, useControllableOpenItems } from '../../hooks/useControllableOpenItems';\nimport { createNextNestedCheckedItems, useNestedCheckedItems } from './useNestedControllableCheckedItems';\nimport { useSubtreeContext_unstable } from '../../contexts/subtreeContext';\nimport { useRootTree } from '../../hooks/useRootTree';\nimport { useSubtree } from '../../hooks/useSubtree';\nimport { createHTMLElementWalker } from '../../utils/createHTMLElementWalker';\nimport { treeItemFilter } from '../../utils/treeItemFilter';\nimport { useTreeNavigation } from './useTreeNavigation';\nimport { useFluent_unstable } from '@fluentui/react-shared-contexts';\nexport const useTree_unstable = (props, ref)=>{\n const { level } = useSubtreeContext_unstable();\n // as level is static, this doesn't break rule of hooks\n // and if this becomes an issue later on, this can be easily converted\n // eslint-disable-next-line react-hooks/rules-of-hooks\n return level > 0 ? useSubtree(props, ref) : useNestedRootTree(props, ref);\n};\nfunction useNestedRootTree(props, ref) {\n const [openItems, setOpenItems] = useControllableOpenItems(props);\n const checkedItems = useNestedCheckedItems(props);\n const { navigate, initialize } = useTreeNavigation();\n const walkerRef = React.useRef();\n const { targetDocument } = useFluent_unstable();\n const initializeWalker = React.useCallback((root)=>{\n if (root && targetDocument) {\n walkerRef.current = createHTMLElementWalker(root, targetDocument, treeItemFilter);\n initialize(walkerRef.current);\n }\n }, [\n initialize,\n targetDocument\n ]);\n const handleOpenChange = useEventCallback((event, data)=>{\n var _props_onOpenChange;\n const nextOpenItems = createNextOpenItems(data, openItems);\n (_props_onOpenChange = props.onOpenChange) === null || _props_onOpenChange === void 0 ? void 0 : _props_onOpenChange.call(props, event, {\n ...data,\n openItems: nextOpenItems.dangerouslyGetInternalSet_unstable()\n });\n setOpenItems(nextOpenItems);\n });\n const handleCheckedChange = useEventCallback((event, data)=>{\n if (walkerRef.current) {\n var _props_onCheckedChange;\n const nextCheckedItems = createNextNestedCheckedItems(data, checkedItems);\n (_props_onCheckedChange = props.onCheckedChange) === null || _props_onCheckedChange === void 0 ? void 0 : _props_onCheckedChange.call(props, event, {\n ...data,\n checkedItems: nextCheckedItems.dangerouslyGetInternalMap_unstable()\n });\n }\n });\n const handleNavigation = useEventCallback((event, data)=>{\n var _props_onNavigation;\n (_props_onNavigation = props.onNavigation) === null || _props_onNavigation === void 0 ? void 0 : _props_onNavigation.call(props, event, data);\n if (walkerRef.current && !event.isDefaultPrevented()) {\n navigate(data, walkerRef.current);\n }\n });\n return {\n treeType: 'nested',\n ...useRootTree({\n ...props,\n openItems,\n checkedItems,\n onOpenChange: handleOpenChange,\n onNavigation: handleNavigation,\n onCheckedChange: handleCheckedChange\n }, useMergedRefs(ref, initializeWalker))\n };\n}\n"],"names":["useTree_unstable","props","ref","level","useSubtreeContext_unstable","useSubtree","useNestedRootTree","openItems","setOpenItems","useControllableOpenItems","checkedItems","useNestedCheckedItems","navigate","initialize","useTreeNavigation","walkerRef","React","useRef","targetDocument","useFluent_unstable","initializeWalker","useCallback","root","current","createHTMLElementWalker","treeItemFilter","handleOpenChange","useEventCallback","event","data","_props_onOpenChange","nextOpenItems","createNextOpenItems","onOpenChange","call","dangerouslyGetInternalSet_unstable","handleCheckedChange","_props_onCheckedChange","nextCheckedItems","createNextNestedCheckedItems","onCheckedChange","dangerouslyGetInternalMap_unstable","handleNavigation","_props_onNavigation","onNavigation","isDefaultPrevented","treeType","useRootTree","useMergedRefs"],"mappings":";;;;+BAWaA;;;eAAAA;;;;iEAXU;gCACyB;0CACc;mDACM;gCACzB;6BACf;4BACD;yCACa;gCACT;mCACG;qCACC;AAC5B,MAAMA,mBAAmB,CAACC,OAAOC;IACpC,MAAM,EAAEC,KAAK,EAAE,GAAGC,IAAAA,0CAA0B;IAC5C,uDAAuD;IACvD,sEAAsE;IACtE,sDAAsD;IACtD,OAAOD,QAAQ,IAAIE,IAAAA,sBAAU,EAACJ,OAAOC,OAAOI,kBAAkBL,OAAOC;AACzE;AACA,SAASI,kBAAkBL,KAAK,EAAEC,GAAG;IACjC,MAAM,CAACK,WAAWC,aAAa,GAAGC,IAAAA,kDAAwB,EAACR;IAC3D,MAAMS,eAAeC,IAAAA,wDAAqB,EAACV;IAC3C,MAAM,EAAEW,QAAQ,EAAEC,UAAU,EAAE,GAAGC,IAAAA,oCAAiB;IAClD,MAAMC,YAAYC,OAAMC,MAAM;IAC9B,MAAM,EAAEC,cAAc,EAAE,GAAGC,IAAAA,uCAAkB;IAC7C,MAAMC,mBAAmBJ,OAAMK,WAAW,CAAC,CAACC;QACxC,IAAIA,QAAQJ,gBAAgB;YACxBH,UAAUQ,OAAO,GAAGC,IAAAA,gDAAuB,EAACF,MAAMJ,gBAAgBO,8BAAc;YAChFZ,WAAWE,UAAUQ,OAAO;QAChC;IACJ,GAAG;QACCV;QACAK;KACH;IACD,MAAMQ,mBAAmBC,IAAAA,gCAAgB,EAAC,CAACC,OAAOC;QAC9C,IAAIC;QACJ,MAAMC,gBAAgBC,IAAAA,6CAAmB,EAACH,MAAMtB;QAC/CuB,CAAAA,sBAAsB7B,MAAMgC,YAAY,AAAD,MAAO,QAAQH,wBAAwB,KAAK,IAAI,KAAK,IAAIA,oBAAoBI,IAAI,CAACjC,OAAO2B,OAAO;YACpI,GAAGC,IAAI;YACPtB,WAAWwB,cAAcI,kCAAkC;QAC/D;QACA3B,aAAauB;IACjB;IACA,MAAMK,sBAAsBT,IAAAA,gCAAgB,EAAC,CAACC,OAAOC;QACjD,IAAId,UAAUQ,OAAO,EAAE;YACnB,IAAIc;YACJ,MAAMC,mBAAmBC,IAAAA,+DAA4B,EAACV,MAAMnB;YAC3D2B,CAAAA,yBAAyBpC,MAAMuC,eAAe,AAAD,MAAO,QAAQH,2BAA2B,KAAK,IAAI,KAAK,IAAIA,uBAAuBH,IAAI,CAACjC,OAAO2B,OAAO;gBAChJ,GAAGC,IAAI;gBACPnB,cAAc4B,iBAAiBG,kCAAkC;YACrE;QACJ;IACJ;IACA,MAAMC,mBAAmBf,IAAAA,gCAAgB,EAAC,CAACC,OAAOC;QAC9C,IAAIc;QACHA,CAAAA,sBAAsB1C,MAAM2C,YAAY,AAAD,MAAO,QAAQD,wBAAwB,KAAK,IAAI,KAAK,IAAIA,oBAAoBT,IAAI,CAACjC,OAAO2B,OAAOC;QACxI,IAAId,UAAUQ,OAAO,IAAI,CAACK,MAAMiB,kBAAkB,IAAI;YAClDjC,SAASiB,MAAMd,UAAUQ,OAAO;QACpC;IACJ;IACA,OAAO;QACHuB,UAAU;QACV,GAAGC,IAAAA,wBAAW,EAAC;YACX,GAAG9C,KAAK;YACRM;YACAG;YACAuB,cAAcP;YACdkB,cAAcF;YACdF,iBAAiBJ;QACrB,GAAGY,IAAAA,6BAAa,EAAC9C,KAAKkB,kBAAkB;IAC5C;AACJ"}
|
|
@@ -8,22 +8,37 @@ Object.defineProperty(exports, "useTreeContextValues_unstable", {
|
|
|
8
8
|
return useTreeContextValues_unstable;
|
|
9
9
|
}
|
|
10
10
|
});
|
|
11
|
+
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
|
|
12
|
+
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
|
|
11
13
|
function useTreeContextValues_unstable(state) {
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
14
|
+
if (state.contextType === 'root') {
|
|
15
|
+
const { openItems, level, contextType, treeType, checkedItems, selectionMode, appearance, size, requestTreeResponse } = state;
|
|
16
|
+
/**
|
|
17
|
+
* This context is created with "@fluentui/react-context-selector",
|
|
18
|
+
* there is no sense to memoize it
|
|
19
|
+
*/ const tree = {
|
|
20
|
+
treeType,
|
|
21
|
+
size,
|
|
22
|
+
openItems,
|
|
23
|
+
appearance,
|
|
24
|
+
checkedItems,
|
|
25
|
+
selectionMode,
|
|
26
|
+
contextType,
|
|
27
|
+
level,
|
|
28
|
+
requestTreeResponse
|
|
29
|
+
};
|
|
30
|
+
return {
|
|
31
|
+
tree
|
|
32
|
+
};
|
|
33
|
+
}
|
|
26
34
|
return {
|
|
27
|
-
|
|
35
|
+
// contextType is statically determined by the context
|
|
36
|
+
// eslint-disable-next-line react-hooks/rules-of-hooks
|
|
37
|
+
tree: _react.useMemo(()=>({
|
|
38
|
+
level: state.level,
|
|
39
|
+
contextType: 'subtree'
|
|
40
|
+
}), [
|
|
41
|
+
state.level
|
|
42
|
+
])
|
|
28
43
|
};
|
|
29
44
|
}
|