Private
Public Access
1
0

feat: Fluent UI Outlook Lite + connections mockup

This commit is contained in:
2026-04-14 18:52:25 +00:00
parent 1199eff6c3
commit dfa4010406
34820 changed files with 1003813 additions and 205 deletions

View File

@@ -0,0 +1,26 @@
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "FlatTree", {
enumerable: true,
get: function() {
return FlatTree;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const _useFlatTree = require("./useFlatTree");
const _useFlatTreeStylesstyles = require("./useFlatTreeStyles.styles");
const _useFlatTreeContextValues = require("./useFlatTreeContextValues");
const _renderFlatTree = require("./renderFlatTree");
const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
const FlatTree = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
const state = (0, _useFlatTree.useFlatTree_unstable)(props, ref);
const contextValues = (0, _useFlatTreeContextValues.useFlatTreeContextValues_unstable)(state);
(0, _useFlatTreeStylesstyles.useFlatTreeStyles_unstable)(state);
(0, _reactsharedcontexts.useCustomStyleHook_unstable)('useFlatTreeStyles_unstable')(state);
return (0, _renderFlatTree.renderFlatTree_unstable)(state, contextValues);
});
FlatTree.displayName = 'FlatTree';

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/FlatTree/FlatTree.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport type { FlatTreeProps } from './FlatTree.types';\nimport { useFlatTree_unstable } from './useFlatTree';\nimport { useFlatTreeStyles_unstable } from './useFlatTreeStyles.styles';\nimport { useFlatTreeContextValues_unstable } from './useFlatTreeContextValues';\nimport { renderFlatTree_unstable } from './renderFlatTree';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * The `FlatTree` component is a variation of the `Tree` component that deals with a flattened data structure.\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 */\nexport const FlatTree: ForwardRefComponent<FlatTreeProps> = React.forwardRef((props, ref) => {\n const state = useFlatTree_unstable(props, ref);\n const contextValues = useFlatTreeContextValues_unstable(state);\n useFlatTreeStyles_unstable(state);\n useCustomStyleHook_unstable('useFlatTreeStyles_unstable')(state);\n\n return renderFlatTree_unstable(state, contextValues);\n});\n\nFlatTree.displayName = 'FlatTree';\n"],"names":["React","useFlatTree_unstable","useFlatTreeStyles_unstable","useFlatTreeContextValues_unstable","renderFlatTree_unstable","useCustomStyleHook_unstable","FlatTree","forwardRef","props","ref","state","contextValues","displayName"],"mappings":"AAAA;;;;;;;;;;;;iEAEuB,QAAQ;6BAGM,gBAAgB;yCACV,6BAA6B;0CACtB,6BAA6B;gCACvC,mBAAmB;qCACf,kCAAkC;AAQvE,MAAMM,WAAAA,WAAAA,GAA+CN,OAAMO,UAAU,CAAC,CAACC,OAAOC;IACnF,MAAMC,YAAQT,iCAAAA,EAAqBO,OAAOC;IAC1C,MAAME,oBAAgBR,2DAAAA,EAAkCO;QACxDR,mDAAAA,EAA2BQ;QAC3BL,gDAAAA,EAA4B,8BAA8BK;IAE1D,WAAON,uCAAAA,EAAwBM,OAAOC;AACxC,GAAG;AAEHL,SAASM,WAAW,GAAG"}

View File

@@ -0,0 +1,4 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/FlatTree/FlatTree.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, SelectionMode } from '@fluentui/react-utilities';\nimport type {\n TreeSlots,\n TreeCheckedChangeData,\n TreeCheckedChangeEvent,\n TreeNavigationData_unstable,\n TreeNavigationEvent_unstable,\n TreeOpenChangeData,\n TreeOpenChangeEvent,\n TreeSelectionValue,\n} from '../Tree/index';\nimport type { TreeItemValue } from '../TreeItem/index';\nimport type { TreeContextValue } from '../../contexts';\n\nexport type FlatTreeSlots = TreeSlots;\n\nexport type FlatTreeContextValues = {\n tree: TreeContextValue;\n};\n\nexport type FlatTreeProps = ComponentProps<TreeSlots> & {\n /**\n * Indicates how navigation between a treeitem and its actions work\n * - 'tree' (default): The default navigation, pressing right arrow key navigates inward the first inner children of a branch treeitem\n * - 'treegrid': Pressing right arrow key navigate towards the actions of a treeitem\n * @default 'tree'\n */\n navigationMode?: 'tree' | 'treegrid';\n /**\n * A tree item can have various appearances:\n * - 'subtle' (default): The default tree item styles.\n * - 'subtle-alpha': Minimizes emphasis on hovered or focused states.\n * - 'transparent': Removes background color.\n * @default 'subtle'\n */\n appearance?: 'subtle' | 'subtle-alpha' | 'transparent';\n /**\n * Size of the tree item.\n * @default 'medium'\n */\n size?: 'small' | 'medium';\n /**\n * This refers to a list of ids of opened tree items.\n * Controls the state of the open tree items.\n * These property is ignored for subtrees.\n */\n openItems?: Iterable<TreeItemValue>;\n /**\n * Callback fired when the component changes value from open state.\n * These property is ignored for subtrees.\n *\n * @param event - a React's Synthetic event\n * @param data - A data object with relevant information,\n * such as open value and type of interaction that created the event.\n */\n onOpenChange?(event: TreeOpenChangeEvent, data: TreeOpenChangeData): void;\n\n /**\n * Callback fired when navigation happens inside the component.\n * These property is ignored for subtrees.\n *\n * FIXME: This method is not ideal, as navigation should be handled internally by tabster.\n *\n * @param event - a React's Synthetic event\n * @param data - A data object with relevant information,\n */\n onNavigation?(event: TreeNavigationEvent_unstable, data: TreeNavigationData_unstable): void;\n\n /**\n * This refers to the selection mode of the tree.\n * - undefined: No selection can be done.\n * - 'single': Only one tree item can be selected, radio buttons are rendered.\n * - 'multiselect': Multiple tree items can be selected, checkboxes are rendered.\n *\n * @default undefined\n */\n selectionMode?: SelectionMode;\n /**\n * This refers to a list of ids of checked tree items, or a list of tuples of ids and checked state.\n * Controls the state of the checked tree items.\n * These property is ignored for subtrees.\n */\n checkedItems?: Iterable<TreeItemValue | [TreeItemValue, TreeSelectionValue]>;\n /**\n * Callback fired when the component changes value from checked state.\n * These property is ignored for subtrees.\n *\n * @param event - a React's Synthetic event\n * @param data - A data object with relevant information,\n * such as checked value and type of interaction that created the event.\n */\n onCheckedChange?(event: TreeCheckedChangeEvent, data: TreeCheckedChangeData): void;\n};\n\nexport type FlatTreeState = ComponentState<FlatTreeSlots> &\n TreeContextValue & {\n open: boolean;\n };\n"],"names":[],"mappings":""}

View File

@@ -0,0 +1,39 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
FlatTree: function() {
return _FlatTree.FlatTree;
},
flatTreeClassNames: function() {
return _useFlatTreeStylesstyles.flatTreeClassNames;
},
renderFlatTree_unstable: function() {
return _renderFlatTree.renderFlatTree_unstable;
},
useFlatTreeContextValues_unstable: function() {
return _useFlatTreeContextValues.useFlatTreeContextValues_unstable;
},
useFlatTreeStyles_unstable: function() {
return _useFlatTreeStylesstyles.useFlatTreeStyles_unstable;
},
useFlatTree_unstable: function() {
return _useFlatTree.useFlatTree_unstable;
},
useHeadlessFlatTree_unstable: function() {
return _useHeadlessFlatTree.useHeadlessFlatTree_unstable;
}
});
const _FlatTree = require("./FlatTree");
const _useHeadlessFlatTree = require("./useHeadlessFlatTree");
const _useFlatTree = require("./useFlatTree");
const _useFlatTreeStylesstyles = require("./useFlatTreeStyles.styles");
const _useFlatTreeContextValues = require("./useFlatTreeContextValues");
const _renderFlatTree = require("./renderFlatTree");

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/FlatTree/index.ts"],"sourcesContent":["export { FlatTree } from './FlatTree';\nexport type { FlatTreeContextValues, FlatTreeProps, FlatTreeSlots, FlatTreeState } from './FlatTree.types';\nexport type {\n HeadlessFlatTree,\n HeadlessFlatTreeItem,\n HeadlessFlatTreeItemProps,\n HeadlessFlatTreeOptions,\n} from './useHeadlessFlatTree';\nexport { useHeadlessFlatTree_unstable } from './useHeadlessFlatTree';\nexport { useFlatTree_unstable } from './useFlatTree';\nexport { flatTreeClassNames, useFlatTreeStyles_unstable } from './useFlatTreeStyles.styles';\nexport { useFlatTreeContextValues_unstable } from './useFlatTreeContextValues';\nexport { renderFlatTree_unstable } from './renderFlatTree';\n"],"names":["FlatTree","useHeadlessFlatTree_unstable","useFlatTree_unstable","flatTreeClassNames","useFlatTreeStyles_unstable","useFlatTreeContextValues_unstable","renderFlatTree_unstable"],"mappings":";;;;;;;;;;;IAASA;iCAAQ;;IAURG;0DAAkB;;;eAElBG,uCAAuB;;;eADvBD,2DAAiC;;;eADbD,mDAA0B;;;eAD9CF,iCAAoB;;;eADpBD,iDAA4B;;;0BARZ,aAAa;qCAQO,wBAAwB;6BAChC,gBAAgB;yCACU,6BAA6B;0CAC1C,6BAA6B;gCACvC,mBAAmB"}

View File

@@ -0,0 +1,12 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "renderFlatTree_unstable", {
enumerable: true,
get: function() {
return renderFlatTree_unstable;
}
});
const _Tree = require("../../Tree");
const renderFlatTree_unstable = _Tree.renderTree_unstable;

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/FlatTree/renderFlatTree.ts"],"sourcesContent":["import { renderTree_unstable } from '../../Tree';\nimport type { FlatTreeContextValues, FlatTreeState } from './FlatTree.types';\nimport type { JSXElement } from '@fluentui/react-utilities';\nexport const renderFlatTree_unstable: (state: FlatTreeState, contextValues: FlatTreeContextValues) => JSXElement =\n renderTree_unstable;\n"],"names":["renderTree_unstable","renderFlatTree_unstable"],"mappings":";;;;;;;;;;sBAAoC,aAAa;AAG1C,MAAMC,0BACXD,yBAAAA,CAAoB"}

View File

@@ -0,0 +1,107 @@
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
createNextFlatCheckedItems: function() {
return createNextFlatCheckedItems;
},
useFlatControllableCheckedItems: function() {
return useFlatControllableCheckedItems;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _reactutilities = require("@fluentui/react-utilities");
const _ImmutableMap = require("../../utils/ImmutableMap");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const _createCheckedItems = require("../../utils/createCheckedItems");
function useFlatControllableCheckedItems(props, headlessTree) {
return (0, _reactutilities.useControllableState)({
initialState: _ImmutableMap.ImmutableMap.empty,
state: _react.useMemo(()=>props.selectionMode ? props.checkedItems && (0, _createCheckedItems.createCheckedItems)(props.checkedItems) : undefined, [
props.checkedItems,
props.selectionMode
]),
defaultState: props.defaultCheckedItems ? ()=>initializeCheckedItems(props, headlessTree) : undefined
});
}
function createNextFlatCheckedItems(data, previousCheckedItems, headlessTree) {
if (data.selectionMode === 'single') {
return _ImmutableMap.ImmutableMap.from([
[
data.value,
data.checked
]
]);
}
const treeItem = headlessTree.get(data.value);
if (!treeItem) {
if (process.env.NODE_ENV !== 'production') {
// eslint-disable-next-line no-console
console.error(`@fluentui/react-tree [useHeadlessFlatTree]:
Tree item ${data.value} not found.`);
}
return previousCheckedItems;
}
// Calling `ImmutableMap.set()` creates a new ImmutableMap - avoid this in loops.
// Instead write all updates to a native Map and create a new ImmutableMap at the end.
// Note that all descendants of the toggled item are processed even if they are collapsed,
// making the choice of algorithm more important.
const nextCheckedItemsMap = new Map(_ImmutableMap.ImmutableMap.dangerouslyGetInternalMap(previousCheckedItems));
// The toggled item itself
nextCheckedItemsMap.set(data.value, data.checked);
// Descendant updates
for (const children of headlessTree.subtree(data.value)){
nextCheckedItemsMap.set(children.value, data.checked);
}
// Ancestor updates - must be done after adding descendants and the toggle item.
// If any ancestor is mixed, all ancestors above it are mixed too.
let isAncestorsMixed = false;
for (const ancestor of headlessTree.ancestors(treeItem.value)){
if (isAncestorsMixed) {
nextCheckedItemsMap.set(ancestor.value, 'mixed');
continue;
}
// For each ancestor, if all of its children now have the same checked state as the toggled item,
// set the ancestor to that checked state too. Otherwise it is 'mixed'.
let childrenWithSameState = 0;
for (const child of headlessTree.children(ancestor.value)){
if ((nextCheckedItemsMap.get(child.value) || false) === data.checked) {
childrenWithSameState++;
}
}
if (childrenWithSameState === ancestor.childrenValues.length) {
nextCheckedItemsMap.set(ancestor.value, data.checked);
} else {
nextCheckedItemsMap.set(ancestor.value, 'mixed');
isAncestorsMixed = true;
}
}
const nextCheckedItems = _ImmutableMap.ImmutableMap.from(nextCheckedItemsMap);
return nextCheckedItems;
}
function initializeCheckedItems(props, headlessTree) {
if (!props.selectionMode) {
return _ImmutableMap.ImmutableMap.empty;
}
let state = (0, _createCheckedItems.createCheckedItems)(props.defaultCheckedItems);
// if selectionMode is multiselect, we need to calculate the checked state of all children
// and ancestors of the defaultCheckedItems
if (props.selectionMode === 'multiselect') {
for (const [value, checked] of state){
state = createNextFlatCheckedItems({
value,
checked,
selectionMode: props.selectionMode
}, state, headlessTree);
}
}
return state;
}

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,69 @@
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "useFlatTree_unstable", {
enumerable: true,
get: function() {
return useFlatTree_unstable;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const _useRootTree = require("../../hooks/useRootTree");
const _reactutilities = require("@fluentui/react-utilities");
const _useFlatTreeNavigation = require("../../hooks/useFlatTreeNavigation");
const _useSubtree = require("../../hooks/useSubtree");
const _ImmutableSet = require("../../utils/ImmutableSet");
const _ImmutableMap = require("../../utils/ImmutableMap");
const _subtreeContext = require("../../contexts/subtreeContext");
const useFlatTree_unstable = (props, ref)=>{
'use no memo';
const isRoot = _react.useContext(_subtreeContext.SubtreeContext) === undefined;
// as level is static, this doesn't break rule of hooks
// and if this becomes an issue later on, this can be easily converted
// eslint-disable-next-line react-hooks/rules-of-hooks
return isRoot ? useRootFlatTree(props, ref) : useSubFlatTree(props, ref);
};
function useRootFlatTree(props, ref) {
const navigation = (0, _useFlatTreeNavigation.useFlatTreeNavigation)(props.navigationMode);
return Object.assign((0, _useRootTree.useRootTree)({
...props,
onNavigation: (0, _reactutilities.useEventCallback)((event, data)=>{
var _props_onNavigation;
(_props_onNavigation = props.onNavigation) === null || _props_onNavigation === void 0 ? void 0 : _props_onNavigation.call(props, event, data);
if (!event.isDefaultPrevented()) {
navigation.navigate(data);
}
})
}, (0, _reactutilities.useMergedRefs)(ref, navigation.rootRef)), {
treeType: 'flat',
forceUpdateRovingTabIndex: navigation.forceUpdateRovingTabIndex
});
}
function useSubFlatTree(props, ref) {
if (process.env.NODE_ENV === 'development') {
throw new Error(`@fluentui/react-tree [useFlatTree]:
Subtrees are not allowed in a FlatTree!
You cannot use a <FlatTree> component inside of another <FlatTree> nor a <Tree> component!`);
}
return {
...(0, _useSubtree.useSubtree)(props, ref),
// ------ defaultTreeContextValue
level: 0,
contextType: 'root',
treeType: 'nested',
selectionMode: 'none',
openItems: _ImmutableSet.ImmutableSet.empty,
checkedItems: _ImmutableMap.ImmutableMap.empty,
requestTreeResponse: noop,
forceUpdateRovingTabIndex: noop,
appearance: 'subtle',
size: 'medium',
// ------ defaultTreeContextValue
open: false
};
}
function noop() {
/* do nothing */ }

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/FlatTree/useFlatTree.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useRootTree } from '../../hooks/useRootTree';\nimport { FlatTreeProps, FlatTreeState } from './FlatTree.types';\nimport { useEventCallback, useMergedRefs } from '@fluentui/react-utilities';\nimport { useFlatTreeNavigation } from '../../hooks/useFlatTreeNavigation';\nimport { useSubtree } from '../../hooks/useSubtree';\nimport { ImmutableSet } from '../../utils/ImmutableSet';\nimport { ImmutableMap } from '../../utils/ImmutableMap';\nimport { SubtreeContext } from '../../contexts/subtreeContext';\n\nexport const useFlatTree_unstable: (props: FlatTreeProps, ref: React.Ref<HTMLElement>) => FlatTreeState = (\n props,\n ref,\n) => {\n 'use no memo';\n\n const isRoot = React.useContext(SubtreeContext) === undefined;\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 isRoot ? useRootFlatTree(props, ref) : useSubFlatTree(props, ref);\n};\n\nfunction useRootFlatTree(props: FlatTreeProps, ref: React.Ref<HTMLElement>): FlatTreeState {\n const navigation = useFlatTreeNavigation(props.navigationMode);\n\n return Object.assign(\n useRootTree(\n {\n ...props,\n onNavigation: useEventCallback((event, data) => {\n props.onNavigation?.(event, data);\n if (!event.isDefaultPrevented()) {\n navigation.navigate(data);\n }\n }),\n },\n useMergedRefs(ref, navigation.rootRef),\n ),\n {\n treeType: 'flat',\n forceUpdateRovingTabIndex: navigation.forceUpdateRovingTabIndex,\n } as const,\n );\n}\n\nfunction useSubFlatTree(props: FlatTreeProps, ref: React.Ref<HTMLElement>): FlatTreeState {\n if (process.env.NODE_ENV === 'development') {\n throw new Error(/* #__DE-INDENT__ */ `\n @fluentui/react-tree [useFlatTree]:\n Subtrees are not allowed in a FlatTree!\n You cannot use a <FlatTree> component inside of another <FlatTree> nor a <Tree> component!\n `);\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 forceUpdateRovingTabIndex: noop,\n appearance: 'subtle',\n size: 'medium',\n // ------ defaultTreeContextValue\n open: false,\n };\n}\n\nfunction noop() {\n /* do nothing */\n}\n"],"names":["React","useRootTree","useEventCallback","useMergedRefs","useFlatTreeNavigation","useSubtree","ImmutableSet","ImmutableMap","SubtreeContext","useFlatTree_unstable","props","ref","isRoot","useContext","undefined","useRootFlatTree","useSubFlatTree","navigation","navigationMode","Object","assign","onNavigation","event","data","isDefaultPrevented","navigate","rootRef","treeType","forceUpdateRovingTabIndex","process","env","NODE_ENV","Error","level","contextType","selectionMode","openItems","empty","checkedItems","requestTreeResponse","noop","appearance","size","open"],"mappings":"AAAA;;;;;+BAYaS;;;;;;;iEAVU,QAAQ;6BACH,0BAA0B;gCAEN,4BAA4B;uCACtC,oCAAoC;4BAC/C,yBAAyB;8BACvB,2BAA2B;8BAC3B,2BAA2B;gCACzB,gCAAgC;AAExD,6BAAmG,CACxGC,OACAC;IAEA;IAEA,MAAMC,SAASZ,OAAMa,UAAU,CAACL,8BAAAA,MAAoBM;IACpD,uDAAuD;IACvD,sEAAsE;IACtE,sDAAsD;IACtD,OAAOF,SAASG,gBAAgBL,OAAOC,OAAOK,eAAeN,OAAOC;AACtE,EAAE;AAEF,SAASI,gBAAgBL,KAAoB,EAAEC,GAA2B;IACxE,MAAMM,iBAAab,4CAAAA,EAAsBM,MAAMQ,cAAc;IAE7D,OAAOC,OAAOC,MAAM,KAClBnB,wBAAAA,EACE;QACE,GAAGS,KAAK;QACRW,kBAAcnB,gCAAAA,EAAiB,CAACoB,OAAOC;gBACrCb;YAAAA,uBAAAA,MAAMW,YAAAA,AAAY,MAAA,QAAlBX,wBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,oBAAAA,IAAAA,CAAAA,OAAqBY,OAAOC;YAC5B,IAAI,CAACD,MAAME,kBAAkB,IAAI;gBAC/BP,WAAWQ,QAAQ,CAACF;YACtB;QACF;IACF,OACApB,6BAAAA,EAAcQ,KAAKM,WAAWS,OAAO,IAEvC;QACEC,UAAU;QACVC,2BAA2BX,WAAWW,yBAAyB;IACjE;AAEJ;AAEA,SAASZ,eAAeN,KAAoB,EAAEC,GAA2B;IACvE,IAAIkB,QAAQC,GAAG,CAACC,QAAQ,KAAK,eAAe;QAC1C,MAAM,IAAIC,MAA2B,CAAC;;0FAItC,CAAC;IACH;IACA,OAAO;QACL,OAAG3B,sBAAAA,EAAWK,OAAOC,IAAI;QACzB,iCAAiC;QACjCsB,OAAO;QACPC,aAAa;QACbP,UAAU;QACVQ,eAAe;QACfC,WAAW9B,0BAAAA,CAAa+B,KAAK;QAC7BC,cAAc/B,0BAAAA,CAAa8B,KAAK;QAChCE,qBAAqBC;QACrBZ,2BAA2BY;QAC3BC,YAAY;QACZC,MAAM;QACN,iCAAiC;QACjCC,MAAM;IACR;AACF;AAEA,SAASH;AACP,cAAc,GAChB"}

View File

@@ -0,0 +1,32 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "useFlatTreeContextValues_unstable", {
enumerable: true,
get: function() {
return useFlatTreeContextValues_unstable;
}
});
const useFlatTreeContextValues_unstable = (state)=>{
const { openItems, level, contextType, treeType, checkedItems, selectionMode, navigationMode, appearance, size, requestTreeResponse, forceUpdateRovingTabIndex } = state;
/**
* This context is created with "@fluentui/react-context-selector",
* there is no sense to memoize it
*/ const tree = {
treeType,
size,
openItems,
appearance,
checkedItems,
selectionMode,
navigationMode,
contextType,
level,
requestTreeResponse,
forceUpdateRovingTabIndex
};
return {
tree
};
};

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/FlatTree/useFlatTreeContextValues.ts"],"sourcesContent":["import type { TreeContextValue } from '../../contexts';\nimport type { FlatTreeContextValues, FlatTreeState } from './FlatTree.types';\n\nexport const useFlatTreeContextValues_unstable = (state: FlatTreeState): FlatTreeContextValues => {\n const {\n openItems,\n level,\n contextType,\n treeType,\n checkedItems,\n selectionMode,\n navigationMode,\n appearance,\n size,\n requestTreeResponse,\n forceUpdateRovingTabIndex,\n } = state;\n /**\n * This context is created with \"@fluentui/react-context-selector\",\n * there is no sense to memoize it\n */\n const tree: TreeContextValue = {\n treeType,\n size,\n openItems,\n appearance,\n checkedItems,\n selectionMode,\n navigationMode,\n contextType,\n level,\n requestTreeResponse,\n forceUpdateRovingTabIndex,\n };\n\n return { tree };\n};\n"],"names":["useFlatTreeContextValues_unstable","state","openItems","level","contextType","treeType","checkedItems","selectionMode","navigationMode","appearance","size","requestTreeResponse","forceUpdateRovingTabIndex","tree"],"mappings":";;;;+BAGaA;;;;;;AAAN,0CAA0C,CAACC;IAChD,MAAM,EACJC,SAAS,EACTC,KAAK,EACLC,WAAW,EACXC,QAAQ,EACRC,YAAY,EACZC,aAAa,EACbC,cAAc,EACdC,UAAU,EACVC,IAAI,EACJC,mBAAmB,EACnBC,yBAAyB,EAC1B,GAAGX;IACJ;;;GAGC,GACD,MAAMY,OAAyB;QAC7BR;QACAK;QACAR;QACAO;QACAH;QACAC;QACAC;QACAJ;QACAD;QACAQ;QACAC;IACF;IAEA,OAAO;QAAEC;IAAK;AAChB,EAAE"}

View File

@@ -0,0 +1,32 @@
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
flatTreeClassNames: function() {
return flatTreeClassNames;
},
useFlatTreeStyles_unstable: function() {
return useFlatTreeStyles_unstable;
}
});
const _react = require("@griffel/react");
const flatTreeClassNames = {
root: 'fui-FlatTree'
};
const useBaseStyles = /*#__PURE__*/ (0, _react.__resetStyles)("rnv2ez3", null, [
".rnv2ez3{display:flex;flex-direction:column;row-gap:var(--spacingVerticalXXS);}"
]);
const useFlatTreeStyles_unstable = (state)=>{
'use no memo';
const baseStyles = useBaseStyles();
state.root.className = (0, _react.mergeClasses)(flatTreeClassNames.root, baseStyles, state.root.className);
return state;
};

View File

@@ -0,0 +1 @@
{"version":3,"sources":["useFlatTreeStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeResetStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nexport const flatTreeClassNames = {\n root: 'fui-FlatTree'\n};\nconst useBaseStyles = makeResetStyles({\n display: 'flex',\n flexDirection: 'column',\n rowGap: tokens.spacingVerticalXXS\n});\nexport const useFlatTreeStyles_unstable = (state)=>{\n 'use no memo';\n const baseStyles = useBaseStyles();\n state.root.className = mergeClasses(flatTreeClassNames.root, baseStyles, state.root.className);\n return state;\n};\n"],"names":["__resetStyles","mergeClasses","tokens","flatTreeClassNames","root","useBaseStyles","useFlatTreeStyles_unstable","state","baseStyles","className"],"mappings":"AAAA,YAAY;;;;;;;;;;;;sBAGmB;;;8BAQQ;;;;uBAVO,gBAAgB;AAEvD,MAAMG,qBAAqB;IAC9BC,IAAI,EAAE;AACV,CAAC;AACD,MAAMC,aAAa,GAAA,WAAA,OAAGL,oBAAA,EAAA,WAAA,MAAA;IAAA;CAIrB,CAAC;AACK,MAAMM,8BAA8BC,KAAK,IAAG;IAC/C,aAAa;IACb,MAAMC,UAAU,GAAGH,aAAa,CAAC,CAAC;IAClCE,KAAK,CAACH,IAAI,CAACK,SAAS,OAAGR,mBAAY,EAACE,kBAAkB,CAACC,IAAI,EAAEI,UAAU,EAAED,KAAK,CAACH,IAAI,CAACK,SAAS,CAAC;IAC9F,OAAOF,KAAK;AAChB,CAAC"}

View File

@@ -0,0 +1,35 @@
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
flatTreeClassNames: function() {
return flatTreeClassNames;
},
useFlatTreeStyles_unstable: function() {
return useFlatTreeStyles_unstable;
}
});
const _react = require("@griffel/react");
const _reacttheme = require("@fluentui/react-theme");
const flatTreeClassNames = {
root: 'fui-FlatTree'
};
const useBaseStyles = (0, _react.makeResetStyles)({
display: 'flex',
flexDirection: 'column',
rowGap: _reacttheme.tokens.spacingVerticalXXS
});
const useFlatTreeStyles_unstable = (state)=>{
'use no memo';
const baseStyles = useBaseStyles();
state.root.className = (0, _react.mergeClasses)(flatTreeClassNames.root, baseStyles, state.root.className);
return state;
};

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/FlatTree/useFlatTreeStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeResetStyles, mergeClasses } from '@griffel/react';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { tokens } from '@fluentui/react-theme';\nimport { FlatTreeSlots, FlatTreeState } from './FlatTree.types';\n\nexport const flatTreeClassNames: SlotClassNames<Omit<FlatTreeSlots, 'collapseMotion'>> = {\n root: 'fui-FlatTree',\n};\n\nconst useBaseStyles = makeResetStyles({\n display: 'flex',\n flexDirection: 'column',\n rowGap: tokens.spacingVerticalXXS,\n});\n\nexport const useFlatTreeStyles_unstable = (state: FlatTreeState): FlatTreeState => {\n 'use no memo';\n\n const baseStyles = useBaseStyles();\n state.root.className = mergeClasses(flatTreeClassNames.root, baseStyles, state.root.className);\n return state;\n};\n"],"names":["makeResetStyles","mergeClasses","tokens","flatTreeClassNames","root","useBaseStyles","display","flexDirection","rowGap","spacingVerticalXXS","useFlatTreeStyles_unstable","state","baseStyles","className"],"mappings":"AAAA;;;;;;;;;;;;sBAOaG;;;8BAUAO;;;;uBAfiC,iBAAiB;4BAExC,wBAAwB;AAGxC,MAAMP,qBAA4E;IACvFC,MAAM;AACR,EAAE;AAEF,MAAMC,oBAAgBL,sBAAAA,EAAgB;IACpCM,SAAS;IACTC,eAAe;IACfC,QAAQN,kBAAAA,CAAOO,kBAAkB;AACnC;AAEO,MAAMC,6BAA6B,CAACC;IACzC;IAEA,MAAMC,aAAaP;IACnBM,MAAMP,IAAI,CAACS,SAAS,OAAGZ,mBAAAA,EAAaE,mBAAmBC,IAAI,EAAEQ,YAAYD,MAAMP,IAAI,CAACS,SAAS;IAC7F,OAAOF;AACT,EAAE"}

View File

@@ -0,0 +1,118 @@
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "useHeadlessFlatTree_unstable", {
enumerable: true,
get: function() {
return useHeadlessFlatTree_unstable;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _reactutilities = require("@fluentui/react-utilities");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const _createHeadlessTree = require("../../utils/createHeadlessTree");
const _tokens = require("../../utils/tokens");
const _useFlatTreeNavigation = require("../../hooks/useFlatTreeNavigation");
const _useControllableOpenItems = require("../../hooks/useControllableOpenItems");
const _getTreeItemValueFromElement = require("../../utils/getTreeItemValueFromElement");
const _ImmutableSet = require("../../utils/ImmutableSet");
const _useFlatControllableCheckedItems = require("./useFlatControllableCheckedItems");
const _ImmutableMap = require("../../utils/ImmutableMap");
function useHeadlessFlatTree_unstable(props, options = {}) {
'use no memo';
const headlessTree = _react.useMemo(()=>(0, _createHeadlessTree.createHeadlessTree)(props), [
props
]);
const [openItems, setOpenItems] = (0, _useControllableOpenItems.useControllableOpenItems)(options);
const [checkedItems, setCheckedItems] = (0, _useFlatControllableCheckedItems.useFlatControllableCheckedItems)(options, headlessTree);
const navigation = (0, _useFlatTreeNavigation.useFlatTreeNavigation)();
const treeRef = _react.useRef(null);
const handleOpenChange = (0, _reactutilities.useEventCallback)((event, data)=>{
var _options_onOpenChange;
const nextOpenItems = (0, _useControllableOpenItems.createNextOpenItems)(data, openItems);
(_options_onOpenChange = options.onOpenChange) === null || _options_onOpenChange === void 0 ? void 0 : _options_onOpenChange.call(options, event, {
...data,
openItems: _ImmutableSet.ImmutableSet.dangerouslyGetInternalSet(nextOpenItems)
});
setOpenItems(nextOpenItems);
});
const handleCheckedChange = (0, _reactutilities.useEventCallback)((event, data)=>{
var _options_onCheckedChange;
const nextCheckedItems = (0, _useFlatControllableCheckedItems.createNextFlatCheckedItems)(data, checkedItems, headlessTree);
(_options_onCheckedChange = options.onCheckedChange) === null || _options_onCheckedChange === void 0 ? void 0 : _options_onCheckedChange.call(options, event, {
...data,
checkedItems: _ImmutableMap.ImmutableMap.dangerouslyGetInternalMap(nextCheckedItems)
});
setCheckedItems(nextCheckedItems);
});
const getNextNavigableItem = (0, _reactutilities.useEventCallback)((visibleItems, data)=>{
const item = headlessTree.get(data.value);
if (item) {
switch(data.type){
case _tokens.treeDataTypes.TypeAhead:
return item;
case _tokens.treeDataTypes.ArrowLeft:
return headlessTree.get(item.parentValue);
case _tokens.treeDataTypes.ArrowRight:
return visibleItems[item.index + 1];
case _tokens.treeDataTypes.End:
return visibleItems[visibleItems.length - 1];
case _tokens.treeDataTypes.Home:
return visibleItems[0];
case _tokens.treeDataTypes.ArrowDown:
return visibleItems[item.index + 1];
case _tokens.treeDataTypes.ArrowUp:
return visibleItems[item.index - 1];
}
}
});
const getElementFromItem = _react.useCallback((item)=>{
var _treeRef_current;
return (_treeRef_current = treeRef.current) === null || _treeRef_current === void 0 ? void 0 : _treeRef_current.querySelector(`[${_getTreeItemValueFromElement.dataTreeItemValueAttrName}="${item.value}"]`);
}, []);
const ref = (0, _reactutilities.useMergedRefs)(treeRef, navigation.rootRef);
const getTreeProps = _react.useCallback(()=>{
var _options_onNavigation;
return {
ref,
openItems,
selectionMode: options.selectionMode,
checkedItems,
onOpenChange: handleOpenChange,
onCheckedChange: handleCheckedChange,
onNavigation: (_options_onNavigation = options.onNavigation) !== null && _options_onNavigation !== void 0 ? _options_onNavigation : noop
};
}, // eslint-disable-next-line react-hooks/exhaustive-deps
[
openItems,
checkedItems,
options.selectionMode,
options.onNavigation
]);
const items = _react.useCallback(()=>headlessTree.visibleItems(openItems), [
openItems,
headlessTree
]);
const getItem = _react.useCallback((value)=>headlessTree.get(value), [
headlessTree
]);
return _react.useMemo(()=>({
navigate: navigation.navigate,
getTreeProps,
getNextNavigableItem,
getElementFromItem,
items,
getItem
}), [
navigation.navigate,
getTreeProps,
getNextNavigableItem,
getElementFromItem,
items,
getItem
]);
}
/** @internal */ function noop() {
/* noop */ }

File diff suppressed because one or more lines are too long