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

2708
node_modules/@fluentui/react-tree/CHANGELOG.md generated vendored Normal file

File diff suppressed because it is too large Load Diff

15
node_modules/@fluentui/react-tree/LICENSE generated vendored Normal file
View File

@@ -0,0 +1,15 @@
@fluentui/react-tree
Copyright (c) Microsoft Corporation
All rights reserved.
MIT License
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the ""Software""), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED _AS IS_, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
Note: Usage of the fonts and icons referenced in Fluent UI React is subject to the terms listed at https://aka.ms/fluentui-assets-license

5
node_modules/@fluentui/react-tree/README.md generated vendored Normal file
View File

@@ -0,0 +1,5 @@
# @fluentui/react-tree
**React Tree components for [Fluent UI React](https://react.fluentui.dev/)**
These are not production-ready components and **should never be used in product**. This space is useful for testing new components whose APIs might change before final release.

940
node_modules/@fluentui/react-tree/dist/index.d.ts generated vendored Normal file
View File

@@ -0,0 +1,940 @@
import type { ArrowDown } from '@fluentui/keyboard-keys';
import type { ArrowLeft } from '@fluentui/keyboard-keys';
import type { ArrowRight } from '@fluentui/keyboard-keys';
import type { ArrowUp } from '@fluentui/keyboard-keys';
import type { AvatarContextValue } from '@fluentui/react-avatar';
import type { AvatarSize } from '@fluentui/react-avatar';
import { ButtonContextValue } from '@fluentui/react-button';
import { Checkbox } from '@fluentui/react-checkbox';
import { CheckboxProps } from '@fluentui/react-checkbox';
import type { ComponentProps } from '@fluentui/react-utilities';
import type { ComponentState } from '@fluentui/react-utilities';
import { ContextSelector } from '@fluentui/react-context-selector';
import type { DistributiveOmit } from '@fluentui/react-utilities';
import type { End } from '@fluentui/keyboard-keys';
import type { Enter } from '@fluentui/keyboard-keys';
import type { EventData } from '@fluentui/react-utilities';
import type { EventHandler } from '@fluentui/react-utilities';
import type { ExtractSlotProps } from '@fluentui/react-utilities';
import { ForwardRefComponent } from '@fluentui/react-utilities';
import type { Home } from '@fluentui/keyboard-keys';
import type { JSXElement } from '@fluentui/react-utilities';
import type { PresenceMotionSlotProps } from '@fluentui/react-motion';
import { Radio } from '@fluentui/react-radio';
import { RadioProps } from '@fluentui/react-radio';
import * as React_2 from 'react';
import type { SelectionMode as SelectionMode_2 } from '@fluentui/react-utilities';
import type { Slot } from '@fluentui/react-utilities';
import type { SlotClassNames } from '@fluentui/react-utilities';
declare type FlattenedTreeItem<Props extends TreeItemProps> = HeadlessFlatTreeItemProps & Props;
/**
* Converts a nested structure to a flat one which can be consumed by `useFlatTreeItems`
* @example
* ```tsx
* const defaultItems = flattenTree_unstable([
* {
* children: <TreeItemLayout>level 1, item 1</TreeItemLayout>,
* subtree: [
* {
* children: <TreeItemLayout>level 2, item 1</TreeItemLayout>,
* },
* {
* children: <TreeItemLayout>level 2, item 2</TreeItemLayout>,
* },
* {
* children: <TreeItemLayout>level 2, item 3</TreeItemLayout>,
* },
* ],
* },
* {
* children: <TreeItemLayout>level 1, item 2</TreeItemLayout>,
* subtree: [
* {
* children: <TreeItemLayout>level 2, item 1</TreeItemLayout>,
* subtree: [
* {
* children: <TreeItemLayout>level 3, item 1</TreeItemLayout>,
* subtree: [
* {
* children: <TreeItemLayout>level 4, item 1</TreeItemLayout>,
* },
* ],
* },
* ],
* },
* ],
* },
* ]);
* ```
*/
export declare const flattenTree_unstable: <Props extends TreeItemProps>(items: FlattenTreeItem<Props>[]) => FlattenedTreeItem<Props>[];
export declare type FlattenTreeItem<Props extends TreeItemProps> = Omit<Props, 'subtree' | 'itemType'> & {
value: TreeItemValue;
subtree?: FlattenTreeItem<Props>[];
};
/**
* The `FlatTree` component is a variation of the `Tree` component that deals with a flattened data structure.
*
* It should be used on cases where more complex interactions with a Tree is required.
* On simple scenarios it is advised to simply use a nested structure instead.
*/
export declare const FlatTree: ForwardRefComponent<FlatTreeProps>;
export declare const flatTreeClassNames: SlotClassNames<Omit<FlatTreeSlots, 'collapseMotion'>>;
declare type FlatTreeContextValues = {
tree: TreeContextValue;
};
/**
* The `FlatTreeItem` component represents a single item in a flat tree.
*/
export declare const FlatTreeItem: ForwardRefComponent<FlatTreeItemProps>;
/**
* FlatTreeItem Props
*/
export declare type FlatTreeItemProps = TreeItemProps & {
value: TreeItemValue;
'aria-level': number;
'aria-setsize': number;
'aria-posinset': number;
};
export declare type FlatTreeProps = ComponentProps<TreeSlots> & {
/**
* Indicates how navigation between a treeitem and its actions work
* - 'tree' (default): The default navigation, pressing right arrow key navigates inward the first inner children of a branch treeitem
* - 'treegrid': Pressing right arrow key navigate towards the actions of a treeitem
* @default 'tree'
*/
navigationMode?: 'tree' | 'treegrid';
/**
* A tree item can have various appearances:
* - 'subtle' (default): The default tree item styles.
* - 'subtle-alpha': Minimizes emphasis on hovered or focused states.
* - 'transparent': Removes background color.
* @default 'subtle'
*/
appearance?: 'subtle' | 'subtle-alpha' | 'transparent';
/**
* Size of the tree item.
* @default 'medium'
*/
size?: 'small' | 'medium';
/**
* This refers to a list of ids of opened tree items.
* Controls the state of the open tree items.
* These property is ignored for subtrees.
*/
openItems?: Iterable<TreeItemValue>;
/**
* Callback fired when the component changes value from open state.
* These property is ignored for subtrees.
*
* @param event - a React's Synthetic event
* @param data - A data object with relevant information,
* such as open value and type of interaction that created the event.
*/
onOpenChange?(event: TreeOpenChangeEvent, data: TreeOpenChangeData): void;
/**
* Callback fired when navigation happens inside the component.
* These property is ignored for subtrees.
*
* FIXME: This method is not ideal, as navigation should be handled internally by tabster.
*
* @param event - a React's Synthetic event
* @param data - A data object with relevant information,
*/
onNavigation?(event: TreeNavigationEvent_unstable, data: TreeNavigationData_unstable): void;
/**
* This refers to the selection mode of the tree.
* - undefined: No selection can be done.
* - 'single': Only one tree item can be selected, radio buttons are rendered.
* - 'multiselect': Multiple tree items can be selected, checkboxes are rendered.
*
* @default undefined
*/
selectionMode?: SelectionMode_2;
/**
* This refers to a list of ids of checked tree items, or a list of tuples of ids and checked state.
* Controls the state of the checked tree items.
* These property is ignored for subtrees.
*/
checkedItems?: Iterable<TreeItemValue | [TreeItemValue, TreeSelectionValue]>;
/**
* Callback fired when the component changes value from checked state.
* These property is ignored for subtrees.
*
* @param event - a React's Synthetic event
* @param data - A data object with relevant information,
* such as checked value and type of interaction that created the event.
*/
onCheckedChange?(event: TreeCheckedChangeEvent, data: TreeCheckedChangeData): void;
};
export declare type FlatTreeSlots = TreeSlots;
export declare type FlatTreeState = ComponentState<FlatTreeSlots> & TreeContextValue & {
open: boolean;
};
/**
* FlatTree API to manage all required mechanisms to convert a list of items into renderable TreeItems
* in multiple scenarios including virtualization.
*
* !!A flat tree is an unofficial spec for tree!!
*
* It should be used on cases where more complex interactions with a Tree is required.
*
* On simple scenarios it is advised to simply use a nested structure instead.
*/
export declare type HeadlessFlatTree<Props extends HeadlessFlatTreeItemProps> = {
/**
* returns the properties required for the Tree component to work properly.
* That includes:
* `openItems`, `onOpenChange`, `onNavigation_unstable` and `ref`
*/
getTreeProps(): Required<Pick<FlatTreeProps, 'openItems' | 'onOpenChange' | 'onNavigation' | 'checkedItems' | 'onCheckedChange'>> & {
ref: React_2.Ref<HTMLDivElement>;
openItems: ImmutableSet<TreeItemValue>;
};
/**
* internal method used to react to an `onNavigation` event.
* This method ensures proper navigation on keyboard and mouse interaction.
* In case of virtualization it might be required to cancel default provided `onNavigation`
* event and then call this method manually.
*
* @example
* ```ts
* // react-window
* const handleNavigation = (event, data) => {
* event.preventDefault();
* const nextItem = tree.getNextNavigableItem(data);
* // scroll to item using virtualization scroll mechanism
* if (nextItem && tree.getElementFromItem(nextItem)) {
* listRef.current.scrollToItem(nextItem.index);
* }
* // wait for scrolling to happen and then invoke navigate method
* requestAnimationFrame(() => {
* tree.navigate(data);
* });
* };
*```
*/
navigate(data: TreeNavigationData_unstable): void;
/**
* returns next item to be focused on a navigation.
* This method is provided to decouple the element that needs to be focused from
* the action of focusing it itself.
*
* On the case of TypeAhead navigation this method returns the current item.
*/
getNextNavigableItem(visibleItems: HeadlessTreeItem<Props>[], data: TreeNavigationData_unstable): HeadlessTreeItem<Props> | undefined;
/**
* similar to getElementById but for FlatTreeItems
*/
getElementFromItem(item: HeadlessTreeItem<Props>): HTMLElement | null;
/**
* an iterable containing all visually available flat tree items
*/
items(): IterableIterator<HeadlessTreeItem<Props>>;
};
export declare type HeadlessFlatTreeItem<Props extends HeadlessFlatTreeItemProps> = HeadlessTreeItem<Props>;
export declare type HeadlessFlatTreeItemProps = HeadlessTreeItemProps;
export declare type HeadlessFlatTreeOptions = Pick<FlatTreeProps, 'onOpenChange' | 'onNavigation' | 'selectionMode' | 'onCheckedChange'> & Pick<TreeProps, 'defaultOpenItems' | 'openItems' | 'checkedItems'> & {
defaultCheckedItems?: TreeProps['checkedItems'];
};
/**
* @internal
*/
declare type HeadlessFlatTreeReturn<Props extends HeadlessFlatTreeItemProps> = HeadlessFlatTree<Props> & {
getItem(value: TreeItemValue): HeadlessTreeItem<Props> | undefined;
};
/**
* The item that is returned by `createHeadlessTree`, it represents a wrapper around the properties provided to
* `createHeadlessTree` but with extra information that might be useful on virtual tree scenarios
*/
declare type HeadlessTreeItem<Props extends HeadlessTreeItemProps> = {
level: number;
index: number;
position: number;
childrenValues: TreeItemValue[];
value: TreeItemValue;
parentValue: TreeItemValue | undefined;
itemType: TreeItemType;
getTreeItemProps(): Required<Pick<Props, 'value' | 'aria-setsize' | 'aria-level' | 'aria-posinset' | 'itemType'>> & Props;
};
declare type HeadlessTreeItemProps = Omit<TreeItemProps, 'itemType' | 'value'> & {
value: TreeItemValue;
itemType?: TreeItemType;
parentValue?: TreeItemValue;
};
declare class ImmutableMap<Key, Value> implements Iterable<[Key, Value]> {
static empty: ImmutableMap<never, never>;
readonly size: number;
private [internalMapSymbol];
static dangerouslyGetInternalMap<Key, Value>(immutableMap: ImmutableMap<Key, Value>): Map<Key, Value>;
static copy<Key, Value>(immutableMap: ImmutableMap<Key, Value>): ImmutableMap<Key, Value>;
/**
* Creates a new {@link ImmutableMap} from an iterable.
* If the iterable is undefined, {@link ImmutableMap.empty} will be returned.
* If the iterable is already an {@link ImmutableMap}, it will be returned as is no copy will be made.
*/
static from<T extends [unknown, unknown]>(iterable?: Iterable<T>): ImmutableMap<T[0], T[1]>;
/**
* Creates a new {@link ImmutableMap} from an iterable with an auxiliary map function to modify the iterable.
* If the iterable is undefined, {@link ImmutableMap.empty} will be returned.
* If the iterable is already an {@link ImmutableMap}, it will be returned as is no copy will be made.
* The map function will be called for each element in the iterable.
*/
static from<T, U extends [unknown, unknown]>(iterable: Iterable<T> | undefined, mapFn: (value: T) => U): ImmutableMap<U[0], U[1]>;
static [Symbol.hasInstance](instance: unknown): boolean;
/**
* Do not use this constructor directly, use {@link ImmutableMap.from} instead.
* {@link ImmutableMap.from} handles instance verification (which might be problematic on {@link https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/instanceof#instanceof_and_multiple_realms | multiple realms}),
* avoid unnecessary copies, supports iterables and ensures that the internal map is never exposed.
*
*⚠️⚠️ _By using this constructor directly, you might end up with a mutable map, as it is not guaranteed that the internal map is not exposed._ ⚠️⚠️
*/
constructor(internalMap: Map<Key, Value>);
delete(key: Key): ImmutableMap<Key, Value>;
get(key: Key): Value | undefined;
has(key: Key): boolean;
set(key: Key, value: Value): ImmutableMap<Key, Value>;
[Symbol.iterator](): Iterator<[Key, Value]>;
}
/**
* Small immutable wrapper around the native Set implementation.
* Every operation that would modify the set returns a new copy instance.
*
* @public
*/
declare class ImmutableSet<T> implements Iterable<T> {
static empty: ImmutableSet<never>;
readonly size: number;
private [internalSetSymbol];
static dangerouslyGetInternalSet<Value>(set: ImmutableSet<Value>): Set<Value>;
static copy<T>(immutableSet: ImmutableSet<T>): ImmutableSet<T>;
/**
* Creates a new {@link ImmutableSet} from an iterable.
* If the iterable is undefined, {@link ImmutableSet.empty} will be returned.
* If the iterable is already an {@link ImmutableSet}, it will be returned as is no copy will be made.
*/
static from<Value>(iterable?: Iterable<Value>): ImmutableSet<Value>;
static [Symbol.hasInstance](instance: unknown): boolean;
/**
* Do not use this constructor directly, use {@link ImmutableSet.from} instead.
* {@link ImmutableSet.from} handles instance verification (which might be problematic on {@link https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/instanceof#instanceof_and_multiple_realms | multiple realms}),
* avoid unnecessary copies, supports iterables and ensures that the internal set is never exposed.
*
*⚠️⚠️ _By using this constructor directly, you might end up with a mutable set, as it is not guaranteed that the internal set is not exposed._ ⚠️⚠️
*/
constructor(internalSet: Set<T>);
add(value: T): ImmutableSet<T>;
delete(value: T): ImmutableSet<T>;
has(value: T): boolean;
[Symbol.iterator](): Iterator<T>;
}
declare const internalMapSymbol: unique symbol;
declare const internalSetSymbol: unique symbol;
declare type MultiSelectValue = NonNullable<CheckboxProps['checked']>;
export declare const renderFlatTree_unstable: (state: FlatTreeState, contextValues: FlatTreeContextValues) => JSXElement;
export declare const renderTree_unstable: (state: TreeState, contextValues: TreeContextValues) => JSXElement;
/**
* Render the final JSX of TreeItem
*/
export declare const renderTreeItem_unstable: (state: TreeItemState, contextValues: TreeItemContextValues) => JSXElement;
/**
* Render the final JSX of TreeItemLayout
*/
export declare const renderTreeItemLayout_unstable: (state: TreeItemLayoutState) => JSXElement;
/**
* Render the final JSX of TreeItemPersonaLayout
*/
export declare const renderTreeItemPersonaLayout_unstable: (state: TreeItemPersonaLayoutState, contextValues: TreeItemPersonaLayoutContextValues) => JSXElement;
declare type SingleSelectValue = NonNullable<RadioProps['checked']>;
export declare type SubtreeContextValue = {
contextType: 'subtree';
level: number;
};
/**
* The `Tree` component renders nested items in a hierarchical structure.
* Use it with `TreeItem` component and layouts components `TreeItemLayout` or `TreeItemPersonaLayout`.
*/
export declare const Tree: ForwardRefComponent<TreeProps>;
export declare type TreeCheckedChangeData = {
value: TreeItemValue;
checkedItems: Map<TreeItemValue, TreeSelectionValue>;
target: HTMLElement;
event: React_2.ChangeEvent<HTMLElement>;
type: 'Change';
} & ({
selectionMode: 'multiselect';
checked: MultiSelectValue;
} | {
selectionMode: 'single';
checked: SingleSelectValue;
});
export declare type TreeCheckedChangeEvent = TreeCheckedChangeData['event'];
export declare const treeClassNames: SlotClassNames<Omit<TreeSlots, 'collapseMotion'>>;
export declare type TreeContextValue = {
contextType?: 'root';
level: number;
treeType: 'nested' | 'flat';
selectionMode: 'none' | SelectionMode_2;
appearance: 'subtle' | 'subtle-alpha' | 'transparent';
size: 'small' | 'medium';
openItems: ImmutableSet<TreeItemValue>;
checkedItems: ImmutableMap<TreeItemValue, 'mixed' | boolean>;
/**
* requests root Tree component to respond to some tree item event,
*/
requestTreeResponse(request: TreeItemRequest): void;
forceUpdateRovingTabIndex?(): void;
navigationMode?: 'tree' | 'treegrid';
};
export declare type TreeContextValues = {
tree: TreeContextValue | SubtreeContextValue;
};
/**
* The `TreeItem` component represents a single item in a tree.
* It expects a certain order of children to work properly: the first child should be the node itself,
* and the second child should be a nested subtree in the form of another Tree component or a standalone TreeItem.
* This order follows the same order as document traversal for the TreeWalker API in JavaScript:
* https://developer.mozilla.org/en-US/docs/Web/API/TreeWalker.
* The content and layout of a TreeItem can be defined using the TreeItemLayout or TreeItemPersonaLayout component,
* which should be used as a direct child of TreeItem.
*
* When a TreeItem has nested child subtree, an expand/collapse control is displayed,
* allowing the user to show or hide the children.
*/
export declare const TreeItem: ForwardRefComponent<TreeItemProps>;
export declare const treeItemClassNames: SlotClassNames<TreeItemSlots>;
export declare type TreeItemContextValue = {
/**
* @deprecated - this value is irrelevant for the tree item
*/
isActionsVisible: boolean;
/**
* @deprecated - this value is irrelevant for the tree item
*/
isAsideVisible: boolean;
selectionRef: React_2.Ref<HTMLInputElement>;
actionsRef: React_2.Ref<HTMLDivElement>;
expandIconRef: React_2.Ref<HTMLDivElement>;
layoutRef: React_2.Ref<HTMLDivElement>;
subtreeRef: React_2.Ref<HTMLDivElement>;
treeItemRef?: React_2.RefObject<HTMLDivElement | null>;
itemType: TreeItemType;
value: TreeItemValue;
open: boolean;
checked: TreeSelectionValue;
};
declare type TreeItemContextValues = {
treeItem: TreeItemContextValue;
};
export declare type TreeItemCSSProperties = React_2.CSSProperties & {
[treeItemLevelToken]?: string | number;
};
/**
* The `TreeItemLayout` component is used as a child of `TreeItem` to define the content and layout of a tree item.
* It provides a consistent visual structure for tree items in a `Tree` component.
* This component should only be used as a direct child of `TreeItem`.
*/
export declare const TreeItemLayout: ForwardRefComponent<TreeItemLayoutProps>;
declare type TreeItemLayoutActionSlotProps = ExtractSlotProps<Slot<'div'> & {
/**
* Forces visibility of the aside/action content
*/
visible?: boolean;
onVisibilityChange?: EventHandler<TreeItemLayoutActionVisibilityChangeData>;
}>;
declare type TreeItemLayoutActionVisibilityChangeData = (EventData<'mouseover' | 'mouseout', MouseEvent> | EventData<'focus' | 'blur', FocusEvent> | EventData<'blur', React_2.FocusEvent>) & {
visible: boolean;
};
export declare const treeItemLayoutClassNames: SlotClassNames<TreeItemLayoutSlots>;
/**
* TreeItemLayout Props
*/
export declare type TreeItemLayoutProps = ComponentProps<Partial<TreeItemLayoutSlots>>;
export declare type TreeItemLayoutSlots = {
root: Slot<'div'>;
/**
* Content. Children of the root slot are automatically rendered here
*/
main: NonNullable<Slot<'div'>>;
/**
* Icon slot that renders right before main content
*/
iconBefore?: Slot<'div'>;
/**
* Icon slot that renders right after main content
*/
iconAfter?: Slot<'div'>;
/**
* Expand icon slot,
* by default renders a chevron icon to indicate opening and closing
*/
expandIcon?: Slot<'div'>;
/**
* Aside content is normally used to render a badge or other non-actionable content
*/
aside?: Slot<'div'>;
/**
* Actionable elements are normally buttons, menus, or other focusable elements.
* Those elements are only visibly available if the given tree item is currently active.
*
* `actions` and `aside` slots are positioned on the exact same spot,
* so they won't be visible at the same time.
* `aside` slot is visible by default meanwhile `actions` slot are only visible when the tree item is active.
*
* `actions` slot supports a `visible` prop to force visibility of the actions.
*/
actions?: Slot<TreeItemLayoutActionSlotProps>;
selector?: Slot<typeof Checkbox> | Slot<typeof Radio>;
};
/**
* State used in rendering TreeItemLayout
*/
export declare type TreeItemLayoutState = ComponentState<TreeItemLayoutSlots> & {
buttonContextValue: ButtonContextValue;
};
export declare const treeItemLevelToken: "--fluent-TreeItem--level";
export declare type TreeItemOpenChangeData = {
open: boolean;
value: TreeItemValue;
target: HTMLElement;
} & ({
event: React_2.MouseEvent<HTMLElement>;
type: 'ExpandIconClick';
} | {
event: React_2.MouseEvent<HTMLElement>;
type: 'Click';
} | {
event: React_2.KeyboardEvent<HTMLElement>;
type: typeof Enter;
} | {
event: React_2.KeyboardEvent<HTMLElement>;
type: typeof ArrowRight;
} | {
event: React_2.KeyboardEvent<HTMLElement>;
type: typeof ArrowLeft;
});
export declare type TreeItemOpenChangeEvent = TreeItemOpenChangeData['event'];
/**
* The `TreeItemPersonaLayout` component is used as a child of `TreeItem` to display a `TreeItem` with a media (typically an avatar) and a description.
* It provides a more visually appealing representation of a `TreeItem` and is typically used to display a list of people or topics.
* This component should only be used as a direct child of `TreeItem`.
*/
export declare const TreeItemPersonaLayout: ForwardRefComponent<TreeItemPersonaLayoutProps>;
export declare const treeItemPersonaLayoutClassNames: SlotClassNames<TreeItemPersonaLayoutSlots>;
declare type TreeItemPersonaLayoutContextValues = {
avatar: AvatarContextValue;
};
/**
* TreeItemPersonaLayout Props
*/
export declare type TreeItemPersonaLayoutProps = ComponentProps<Partial<TreeItemPersonaLayoutSlots>>;
export declare type TreeItemPersonaLayoutSlots = Pick<TreeItemLayoutSlots, 'actions' | 'aside' | 'expandIcon' | 'selector'> & {
root: NonNullable<Slot<'div'>>;
/**
* Avatar to display.
*/
media: NonNullable<Slot<'div'>>;
/**
* Content. Children of the root slot are automatically rendered here
*/
main: NonNullable<Slot<'div'>>;
/**
* Secondary text that describes or complements the content
*/
description?: Slot<'div'>;
};
/**
* State used in rendering TreeItemPersonaLayout
*/
export declare type TreeItemPersonaLayoutState = ComponentState<TreeItemPersonaLayoutSlots> & {
avatarSize: AvatarSize;
buttonContextValue: ButtonContextValue;
};
/**
* TreeItem Props
*/
export declare type TreeItemProps = ComponentProps<Partial<TreeItemSlots>> & {
/**
* A tree item can be a leaf or a branch
*/
itemType: TreeItemType;
/**
* A tree item should have a well defined value, in case one is not provided by the user by this prop
* one will be inferred internally.
*/
value?: TreeItemValue;
/**
* Whether the tree item is in an open state
*
* This overrides the open value provided by the root tree,
* and ensure control of the visibility of the tree item per tree item.
*
* NOTE: controlling the open state of a tree item will not affect the open state of its children
*/
open?: boolean;
onOpenChange?: (e: TreeItemOpenChangeEvent, data: TreeItemOpenChangeData) => void;
/**
* This property is inferred through context on a nested tree, and required for a flat tree.
*/
parentValue?: TreeItemValue;
};
export declare const TreeItemProvider: React_2.Provider<TreeItemContextValue | undefined> & React_2.FC<React_2.ProviderProps<TreeItemContextValue | undefined>>;
declare type TreeItemRequest = {
itemType: TreeItemType;
} & ((DistributiveOmit<TreeOpenChangeData, 'openItems'> & {
requestType: 'open';
}) | (TreeNavigationData_unstable & {
requestType: 'navigate';
}) | (DistributiveOmit<TreeCheckedChangeData, 'selectionMode' | 'checkedItems'> & {
requestType: 'selection';
}));
export declare type TreeItemSlots = {
root: Slot<ExtractSlotProps<Slot<'div'> & {
style?: TreeItemCSSProperties;
}>>;
};
/**
* State used in rendering TreeItem
*/
export declare type TreeItemState = ComponentState<TreeItemSlots> & TreeItemContextValue & {
level: number;
itemType: TreeItemType;
};
export declare type TreeItemType = 'leaf' | 'branch';
export declare type TreeItemValue = string | number;
export declare type TreeNavigationData_unstable = {
target: HTMLElement;
value: TreeItemValue;
parentValue: TreeItemValue | undefined;
} & ({
event: React_2.MouseEvent<HTMLElement>;
type: 'Click';
} | {
event: React_2.KeyboardEvent<HTMLElement>;
type: 'TypeAhead';
} | {
event: React_2.KeyboardEvent<HTMLElement>;
type: typeof ArrowRight;
} | {
event: React_2.KeyboardEvent<HTMLElement>;
type: typeof ArrowLeft;
} | {
event: React_2.KeyboardEvent<HTMLElement>;
type: typeof ArrowUp;
} | {
event: React_2.KeyboardEvent<HTMLElement>;
type: typeof ArrowDown;
} | {
event: React_2.KeyboardEvent<HTMLElement>;
type: typeof Home;
} | {
event: React_2.KeyboardEvent<HTMLElement>;
type: typeof End;
});
/**
* To avoid breaking changes on TreeNavigationData
* we are creating a new type that extends the old one
* and adds the new methods
*/
export declare type TreeNavigationDataParam = TreeNavigationData_unstable & {
preventScroll(): void;
isScrollPrevented(): boolean;
};
export declare type TreeNavigationEvent_unstable = TreeNavigationData_unstable['event'];
export declare type TreeNavigationMode = 'tree' | 'treegrid';
export declare type TreeOpenChangeData = {
open: boolean;
openItems: Set<TreeItemValue>;
value: TreeItemValue;
target: HTMLElement;
} & ({
event: React_2.MouseEvent<HTMLElement>;
type: 'ExpandIconClick';
} | {
event: React_2.MouseEvent<HTMLElement>;
type: 'Click';
}
/**
* @deprecated
* Use `type: 'Click'` instead of Enter,
* an enter press will trigger a click event, which will trigger an open change,
* so there is no need to have a separate type for it.
*/
| {
event: React_2.KeyboardEvent<HTMLElement>;
type: typeof Enter;
} | {
event: React_2.KeyboardEvent<HTMLElement>;
type: typeof ArrowRight;
} | {
event: React_2.KeyboardEvent<HTMLElement>;
type: typeof ArrowLeft;
});
export declare type TreeOpenChangeEvent = TreeOpenChangeData['event'];
export declare type TreeProps = ComponentProps<TreeSlots> & {
/**
* Indicates how navigation between a treeitem and its actions work
* - 'tree' (default): The default navigation, pressing right arrow key navigates inward the first inner children of a branch treeitem
* - 'treegrid': Pressing right arrow key navigate towards the actions of a treeitem
* @default 'tree'
*/
navigationMode?: TreeNavigationMode;
/**
* A tree item can have various appearances:
* - 'subtle' (default): The default tree item styles.
* - 'subtle-alpha': Minimizes emphasis on hovered or focused states.
* - 'transparent': Removes background color.
* @default 'subtle'
*/
appearance?: 'subtle' | 'subtle-alpha' | 'transparent';
/**
* Size of the tree item.
* @default 'medium'
*/
size?: 'small' | 'medium';
/**
* This refers to a list of ids of opened tree items.
* Controls the state of the open tree items.
* These property is ignored for subtrees.
*/
openItems?: Iterable<TreeItemValue>;
/**
* This refers to a list of ids of default opened items.
* This property is ignored for subtrees.
*/
defaultOpenItems?: Iterable<TreeItemValue>;
/**
* Callback fired when the component changes value from open state.
* These property is ignored for subtrees.
*
* @param event - a React's Synthetic event
* @param data - A data object with relevant information,
* such as open value and type of interaction that created the event.
*/
onOpenChange?(event: TreeOpenChangeEvent, data: TreeOpenChangeData): void;
/**
* Callback fired when navigation happens inside the component.
* These property is ignored for subtrees.
*
* FIXME: This method is not ideal, as navigation should be handled internally by tabster.
*
* @param event - a React's Synthetic event
* @param data - A data object with relevant information,
*/
onNavigation?(event: TreeNavigationEvent_unstable, data: TreeNavigationDataParam): void;
/**
* This refers to the selection mode of the tree.
* - undefined: No selection can be done.
* - 'single': Only one tree item can be selected, radio buttons are rendered.
* - 'multiselect': Multiple tree items can be selected, checkboxes are rendered.
*
* @default undefined
*/
selectionMode?: SelectionMode_2;
/**
* This refers to a list of ids of checked tree items, or a list of tuples of ids and checked state.
* Controls the state of the checked tree items.
* These property is ignored for subtrees.
*/
checkedItems?: Iterable<TreeItemValue | [TreeItemValue, TreeSelectionValue]>;
/**
* Callback fired when the component changes value from checked state.
* These property is ignored for subtrees.
*
* @param event - a React's Synthetic event
* @param data - A data object with relevant information,
* such as checked value and type of interaction that created the event.
*/
onCheckedChange?(event: TreeCheckedChangeEvent, data: TreeCheckedChangeData): void;
};
export declare const TreeProvider: {
(props: React_2.ProviderProps<TreeContextValue | SubtreeContextValue>): JSXElement;
displayName: string;
};
export declare const TreeRootReset: (props: TreeRootResetProps) => JSXElement;
declare type TreeRootResetProps = {
children?: React_2.ReactNode;
};
export declare type TreeSelectionValue = MultiSelectValue | SingleSelectValue;
export declare type TreeSlots = {
root: Slot<'div'>;
collapseMotion?: Slot<PresenceMotionSlotProps>;
};
/**
* State used in rendering Tree
*/
export declare type TreeState = ComponentState<TreeSlots> & {
open: boolean;
} & (TreeContextValue | SubtreeContextValue);
export declare const useFlatTree_unstable: (props: FlatTreeProps, ref: React_2.Ref<HTMLElement>) => FlatTreeState;
export declare const useFlatTreeContextValues_unstable: (state: FlatTreeState) => FlatTreeContextValues;
export declare const useFlatTreeStyles_unstable: (state: FlatTreeState) => FlatTreeState;
/**
* this hook provides FlatTree API to manage all required mechanisms to convert a list of items into renderable TreeItems
* in multiple scenarios including virtualization.
*
* !!A flat tree is an unofficial spec for tree!!
*
* It should be used on cases where more complex interactions with a Tree is required.
* On simple scenarios it is advised to simply use a nested structure instead.
*
* @param props - a list of tree items
* @param options - in case control over the internal openItems is required
*/
export declare function useHeadlessFlatTree_unstable<Props extends HeadlessTreeItemProps>(props: Props[], options?: HeadlessFlatTreeOptions): HeadlessFlatTreeReturn<Props>;
export declare const useSubtreeContext_unstable: () => SubtreeContextValue;
export declare const useTree_unstable: (props: TreeProps, ref: React_2.Ref<HTMLElement>) => TreeState;
export declare const useTreeContext_unstable: <T>(selector: ContextSelector<TreeContextValue, T>) => T;
export declare function useTreeContextValues_unstable(state: TreeState): TreeContextValues;
/**
* Create the state required to render TreeItem.
*
* The returned state can be modified with hooks such as useTreeItemStyles_unstable,
* before being passed to renderTreeItem_unstable.
*
* @param props - props from this instance of TreeItem
* @param ref - reference to root HTMLElement of TreeItem
*/
export declare function useTreeItem_unstable(props: TreeItemProps, ref: React_2.Ref<HTMLDivElement>): TreeItemState;
export declare const useTreeItemContext_unstable: <T>(selector: ContextSelector<TreeItemContextValue, T>) => T;
export declare function useTreeItemContextValues_unstable(state: TreeItemState): TreeItemContextValues;
/**
* Create the state required to render TreeItemLayout.
*
* The returned state can be modified with hooks such as useTreeItemLayoutStyles_unstable,
* before being passed to renderTreeItemLayout_unstable.
*
* @param props - props from this instance of TreeItemLayout
* @param ref - reference to root HTMLElement of TreeItemLayout
*/
export declare const useTreeItemLayout_unstable: (props: TreeItemLayoutProps, ref: React_2.Ref<HTMLElement>) => TreeItemLayoutState;
/**
* Apply styling to the TreeItemLayout slots based on the state
*/
export declare const useTreeItemLayoutStyles_unstable: (state: TreeItemLayoutState) => TreeItemLayoutState;
/**
* Create the state required to render TreeItemPersonaLayout.
*
* The returned state can be modified with hooks such as useTreeItemPersonaLayoutStyles_unstable,
* before being passed to renderTreeItemPersonaLayout_unstable.
*
* @param props - props from this instance of TreeItemPersonaLayout
* @param ref - reference to root HTMLElement of TreeItemPersonaLayout
*/
export declare const useTreeItemPersonaLayout_unstable: (props: TreeItemPersonaLayoutProps, ref: React_2.Ref<HTMLSpanElement>) => TreeItemPersonaLayoutState;
/**
* Apply styling to the TreeItemPersonaLayout slots based on the state
*/
export declare const useTreeItemPersonaLayoutStyles_unstable: (state: TreeItemPersonaLayoutState) => TreeItemPersonaLayoutState;
/**
* Apply styling to the TreeItem slots based on the state
*/
export declare const useTreeItemStyles_unstable: (state: TreeItemState) => TreeItemState;
/***
* Hook used to manage navigation in the tree.
*
* @param navigationMode - the navigation mode of the tree, 'tree' (default) or 'treegrid'
*/
export declare function useTreeNavigation(navigationMode?: TreeNavigationMode): {
navigate: (data: TreeNavigationData_unstable, focusOptions?: FocusOptions) => HTMLElement | null;
treeRef: React_2.RefCallback<HTMLElement>;
forceUpdateRovingTabIndex: () => void;
};
export declare const useTreeStyles_unstable: (state: TreeState) => TreeState;
export { }

View File

@@ -0,0 +1,34 @@
"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 _index.FlatTree;
},
flatTreeClassNames: function() {
return _index.flatTreeClassNames;
},
renderFlatTree_unstable: function() {
return _index.renderFlatTree_unstable;
},
useFlatTreeContextValues_unstable: function() {
return _index.useFlatTreeContextValues_unstable;
},
useFlatTreeStyles_unstable: function() {
return _index.useFlatTreeStyles_unstable;
},
useFlatTree_unstable: function() {
return _index.useFlatTree_unstable;
},
useHeadlessFlatTree_unstable: function() {
return _index.useHeadlessFlatTree_unstable;
}
});
const _index = require("./components/FlatTree/index");

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/FlatTree.ts"],"sourcesContent":["export type {\n FlatTreeContextValues,\n FlatTreeProps,\n FlatTreeSlots,\n FlatTreeState,\n HeadlessFlatTree,\n HeadlessFlatTreeItem,\n HeadlessFlatTreeItemProps,\n HeadlessFlatTreeOptions,\n} from './components/FlatTree/index';\nexport {\n FlatTree,\n flatTreeClassNames,\n renderFlatTree_unstable,\n useFlatTreeContextValues_unstable,\n useFlatTreeStyles_unstable,\n useFlatTree_unstable,\n useHeadlessFlatTree_unstable,\n} from './components/FlatTree/index';\n"],"names":["FlatTree","flatTreeClassNames","renderFlatTree_unstable","useFlatTreeContextValues_unstable","useFlatTreeStyles_unstable","useFlatTree_unstable","useHeadlessFlatTree_unstable"],"mappings":";;;;;;;;;;;;eAWEA,eAAQ;;;eACRC,yBAAkB;;;eAClBC,8BAAuB;;;eACvBC,wCAAiC;;;eACjCC,iCAA0B;;;eAC1BC,2BAAoB;;;eACpBC,mCAA4B;;;uBACvB,8BAA8B"}

View File

@@ -0,0 +1,11 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "FlatTreeItem", {
enumerable: true,
get: function() {
return _index.FlatTreeItem;
}
});
const _index = require("./components/FlatTreeItem/index");

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/FlatTreeItem.ts"],"sourcesContent":["export type { FlatTreeItemProps } from './components/FlatTreeItem/index';\nexport { FlatTreeItem } from './components/FlatTreeItem/index';\n"],"names":["FlatTreeItem"],"mappings":";;;;;;;eACSA,mBAAY;;;uBAAQ,kCAAkC"}

31
node_modules/@fluentui/react-tree/lib-commonjs/Tree.js generated vendored Normal file
View File

@@ -0,0 +1,31 @@
"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, {
Tree: function() {
return _index.Tree;
},
renderTree_unstable: function() {
return _index.renderTree_unstable;
},
treeClassNames: function() {
return _index.treeClassNames;
},
useTreeContextValues_unstable: function() {
return _index.useTreeContextValues_unstable;
},
useTreeStyles_unstable: function() {
return _index.useTreeStyles_unstable;
},
useTree_unstable: function() {
return _index.useTree_unstable;
}
});
const _index = require("./components/Tree/index");

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/Tree.ts"],"sourcesContent":["export type {\n TreeCheckedChangeData,\n TreeCheckedChangeEvent,\n TreeContextValues,\n TreeNavigationData_unstable,\n TreeNavigationEvent_unstable,\n TreeOpenChangeData,\n TreeOpenChangeEvent,\n TreeProps,\n TreeSelectionValue,\n TreeSlots,\n TreeState,\n TreeNavigationMode,\n TreeNavigationDataParam,\n} from './components/Tree/index';\nexport {\n Tree,\n renderTree_unstable,\n treeClassNames,\n useTreeContextValues_unstable,\n useTreeStyles_unstable,\n useTree_unstable,\n} from './components/Tree/index';\n"],"names":["Tree","renderTree_unstable","treeClassNames","useTreeContextValues_unstable","useTreeStyles_unstable","useTree_unstable"],"mappings":";;;;;;;;;;;;eAgBEA,WAAI;;;eACJC,0BAAmB;;;eACnBC,qBAAc;;;eACdC,oCAA6B;;;eAC7BC,6BAAsB;;;eACtBC,uBAAgB;;;uBACX,0BAA0B"}

View File

@@ -0,0 +1,31 @@
"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, {
TreeItem: function() {
return _index.TreeItem;
},
renderTreeItem_unstable: function() {
return _index.renderTreeItem_unstable;
},
treeItemClassNames: function() {
return _index.treeItemClassNames;
},
useTreeItemContextValues_unstable: function() {
return _index.useTreeItemContextValues_unstable;
},
useTreeItemStyles_unstable: function() {
return _index.useTreeItemStyles_unstable;
},
useTreeItem_unstable: function() {
return _index.useTreeItem_unstable;
}
});
const _index = require("./components/TreeItem/index");

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/TreeItem.ts"],"sourcesContent":["export type {\n TreeItemCSSProperties,\n TreeItemContextValues,\n TreeItemOpenChangeData,\n TreeItemOpenChangeEvent,\n TreeItemProps,\n TreeItemSlots,\n TreeItemState,\n TreeItemType,\n TreeItemValue,\n} from './components/TreeItem/index';\nexport {\n TreeItem,\n renderTreeItem_unstable,\n treeItemClassNames,\n useTreeItemContextValues_unstable,\n useTreeItemStyles_unstable,\n useTreeItem_unstable,\n} from './components/TreeItem/index';\n"],"names":["TreeItem","renderTreeItem_unstable","treeItemClassNames","useTreeItemContextValues_unstable","useTreeItemStyles_unstable","useTreeItem_unstable"],"mappings":";;;;;;;;;;;;eAYEA,eAAQ;;;eACRC,8BAAuB;;;eACvBC,yBAAkB;;;eAClBC,wCAAiC;;;eACjCC,iCAA0B;;;eAC1BC,2BAAoB;;;uBACf,8BAA8B"}

View File

@@ -0,0 +1,28 @@
"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, {
TreeItemLayout: function() {
return _index.TreeItemLayout;
},
renderTreeItemLayout_unstable: function() {
return _index.renderTreeItemLayout_unstable;
},
treeItemLayoutClassNames: function() {
return _index.treeItemLayoutClassNames;
},
useTreeItemLayoutStyles_unstable: function() {
return _index.useTreeItemLayoutStyles_unstable;
},
useTreeItemLayout_unstable: function() {
return _index.useTreeItemLayout_unstable;
}
});
const _index = require("./components/TreeItemLayout/index");

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/TreeItemLayout.ts"],"sourcesContent":["export type {\n TreeItemLayoutActionSlotProps,\n TreeItemLayoutActionVisibilityChangeData,\n TreeItemLayoutProps,\n TreeItemLayoutSlots,\n TreeItemLayoutState,\n} from './components/TreeItemLayout/index';\nexport {\n TreeItemLayout,\n renderTreeItemLayout_unstable,\n treeItemLayoutClassNames,\n useTreeItemLayoutStyles_unstable,\n useTreeItemLayout_unstable,\n} from './components/TreeItemLayout/index';\n"],"names":["TreeItemLayout","renderTreeItemLayout_unstable","treeItemLayoutClassNames","useTreeItemLayoutStyles_unstable","useTreeItemLayout_unstable"],"mappings":";;;;;;;;;;;;eAQEA,qBAAc;;;eACdC,oCAA6B;;;eAC7BC,+BAAwB;;;eACxBC,uCAAgC;;;eAChCC,iCAA0B;;;uBACrB,oCAAoC"}

View File

@@ -0,0 +1,28 @@
"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, {
TreeItemPersonaLayout: function() {
return _index.TreeItemPersonaLayout;
},
renderTreeItemPersonaLayout_unstable: function() {
return _index.renderTreeItemPersonaLayout_unstable;
},
treeItemPersonaLayoutClassNames: function() {
return _index.treeItemPersonaLayoutClassNames;
},
useTreeItemPersonaLayoutStyles_unstable: function() {
return _index.useTreeItemPersonaLayoutStyles_unstable;
},
useTreeItemPersonaLayout_unstable: function() {
return _index.useTreeItemPersonaLayout_unstable;
}
});
const _index = require("./components/TreeItemPersonaLayout/index");

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/TreeItemPersonaLayout.ts"],"sourcesContent":["export type {\n TreeItemPersonaLayoutContextValues,\n TreeItemPersonaLayoutProps,\n TreeItemPersonaLayoutSlots,\n TreeItemPersonaLayoutState,\n} from './components/TreeItemPersonaLayout/index';\nexport {\n TreeItemPersonaLayout,\n renderTreeItemPersonaLayout_unstable,\n treeItemPersonaLayoutClassNames,\n useTreeItemPersonaLayoutStyles_unstable,\n useTreeItemPersonaLayout_unstable,\n} from './components/TreeItemPersonaLayout/index';\n"],"names":["TreeItemPersonaLayout","renderTreeItemPersonaLayout_unstable","treeItemPersonaLayoutClassNames","useTreeItemPersonaLayoutStyles_unstable","useTreeItemPersonaLayout_unstable"],"mappings":";;;;;;;;;;;;eAOEA,4BAAqB;;;eACrBC,2CAAoC;;;eACpCC,sCAA+B;;;eAC/BC,8CAAuC;;;eACvCC,wCAAiC;;;uBAC5B,2CAA2C"}

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

View File

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

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/FlatTreeItem/FlatTreeItem.tsx"],"sourcesContent":["import { FlatTreeItemProps } from './FlatTreeItem.types';\nimport { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { TreeItem } from '../TreeItem/TreeItem';\n\n/**\n * The `FlatTreeItem` component represents a single item in a flat tree.\n */\nexport const FlatTreeItem: ForwardRefComponent<FlatTreeItemProps> = TreeItem as ForwardRefComponent<FlatTreeItemProps>;\n"],"names":["TreeItem","FlatTreeItem"],"mappings":";;;;;;;;;;0BAEyB,uBAAuB;AAKzC,MAAMC,eAAuDD,kBAAAA,CAAmD"}

View File

@@ -0,0 +1,6 @@
/**
* FlatTreeItem Props
*/ "use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/FlatTreeItem/FlatTreeItem.types.ts"],"sourcesContent":["import type { TreeItemProps, TreeItemValue } from '../TreeItem/TreeItem.types';\n\n/**\n * FlatTreeItem Props\n */\nexport type FlatTreeItemProps = TreeItemProps & {\n value: TreeItemValue;\n 'aria-level': number;\n 'aria-setsize': number;\n 'aria-posinset': number;\n};\n"],"names":[],"mappings":"AAEA;;CAEC,GACD,WAKE"}

View File

@@ -0,0 +1,11 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "FlatTreeItem", {
enumerable: true,
get: function() {
return _FlatTreeItem.FlatTreeItem;
}
});
const _FlatTreeItem = require("./FlatTreeItem");

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/FlatTreeItem/index.ts"],"sourcesContent":["export { FlatTreeItem } from './FlatTreeItem';\nexport type { FlatTreeItemProps } from './FlatTreeItem.types';\n"],"names":["FlatTreeItem"],"mappings":";;;;;;;eAASA,0BAAY;;;8BAAQ,iBAAiB"}

View File

@@ -0,0 +1,26 @@
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "Tree", {
enumerable: true,
get: function() {
return Tree;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const _useTree = require("./useTree");
const _useTreeContextValues = require("./useTreeContextValues");
const _useTreeStylesstyles = require("./useTreeStyles.styles");
const _renderTree = require("./renderTree");
const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
const Tree = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
const state = (0, _useTree.useTree_unstable)(props, ref);
const contextValues = (0, _useTreeContextValues.useTreeContextValues_unstable)(state);
(0, _useTreeStylesstyles.useTreeStyles_unstable)(state);
(0, _reactsharedcontexts.useCustomStyleHook_unstable)('useTreeStyles_unstable')(state);
return (0, _renderTree.renderTree_unstable)(state, contextValues);
});
Tree.displayName = 'Tree';

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/Tree/Tree.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useTree_unstable } from './useTree';\nimport type { TreeProps } from './Tree.types';\nimport { useTreeContextValues_unstable } from './useTreeContextValues';\nimport { useTreeStyles_unstable } from './useTreeStyles.styles';\nimport { renderTree_unstable } from './renderTree';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * The `Tree` component renders nested items in a hierarchical structure.\n * Use it with `TreeItem` component and layouts components `TreeItemLayout` or `TreeItemPersonaLayout`.\n */\nexport const Tree: ForwardRefComponent<TreeProps> = React.forwardRef((props, ref) => {\n const state = useTree_unstable(props, ref);\n const contextValues = useTreeContextValues_unstable(state);\n useTreeStyles_unstable(state);\n useCustomStyleHook_unstable('useTreeStyles_unstable')(state);\n\n return renderTree_unstable(state, contextValues);\n});\n\nTree.displayName = 'Tree';\n"],"names":["React","useTree_unstable","useTreeContextValues_unstable","useTreeStyles_unstable","renderTree_unstable","useCustomStyleHook_unstable","Tree","forwardRef","props","ref","state","contextValues","displayName"],"mappings":"AAAA;;;;;;;;;;;;iEAEuB,QAAQ;yBAEE,YAAY;sCAEC,yBAAyB;qCAChC,yBAAyB;4BAC5B,eAAe;qCACP,kCAAkC;AAMvE,MAAMM,OAAAA,WAAAA,GAAuCN,OAAMO,UAAU,CAAC,CAACC,OAAOC;IAC3E,MAAMC,YAAQT,yBAAAA,EAAiBO,OAAOC;IACtC,MAAME,oBAAgBT,mDAAAA,EAA8BQ;QACpDP,2CAAAA,EAAuBO;QACvBL,gDAAAA,EAA4B,0BAA0BK;IAEtD,WAAON,+BAAAA,EAAoBM,OAAOC;AACpC,GAAG;AAEHL,KAAKM,WAAW,GAAG"}

View File

@@ -0,0 +1,6 @@
/**
* State used in rendering Tree
*/ "use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,35 @@
"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, {
Tree: function() {
return _Tree.Tree;
},
renderTree_unstable: function() {
return _renderTree.renderTree_unstable;
},
treeClassNames: function() {
return _useTreeStylesstyles.treeClassNames;
},
useTreeContextValues_unstable: function() {
return _useTreeContextValues.useTreeContextValues_unstable;
},
useTreeStyles_unstable: function() {
return _useTreeStylesstyles.useTreeStyles_unstable;
},
useTree_unstable: function() {
return _useTree.useTree_unstable;
}
});
const _Tree = require("./Tree");
const _useTree = require("./useTree");
const _useTreeContextValues = require("./useTreeContextValues");
const _useTreeStylesstyles = require("./useTreeStyles.styles");
const _renderTree = require("./renderTree");

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/Tree/index.ts"],"sourcesContent":["export { Tree } from './Tree';\nexport type {\n TreeCheckedChangeData,\n TreeCheckedChangeEvent,\n TreeContextValues,\n TreeNavigationData_unstable,\n TreeNavigationEvent_unstable,\n TreeOpenChangeData,\n TreeOpenChangeEvent,\n TreeProps,\n TreeSelectionValue,\n TreeSlots,\n TreeState,\n TreeNavigationMode,\n TreeNavigationDataParam,\n} from './Tree.types';\nexport { useTree_unstable } from './useTree';\nexport { useTreeContextValues_unstable } from './useTreeContextValues';\nexport { treeClassNames, useTreeStyles_unstable } from './useTreeStyles.styles';\nexport { renderTree_unstable } from './renderTree';\n"],"names":["Tree","useTree_unstable","useTreeContextValues_unstable","treeClassNames","useTreeStyles_unstable","renderTree_unstable"],"mappings":";;;;;;;;;;;;eAASA,UAAI;;;eAmBJK,+BAAmB;;;eADnBF,mCAAc;;;eADdD,mDAA6B;;;eACbE,2CAAsB;;;eAFtCH,yBAAgB;;;sBAhBJ,SAAS;yBAgBG,YAAY;sCACC,yBAAyB;qCAChB,yBAAyB;4BAC5C,eAAe"}

View File

@@ -0,0 +1,22 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "renderTree_unstable", {
enumerable: true,
get: function() {
return renderTree_unstable;
}
});
const _jsxruntime = require("@fluentui/react-jsx-runtime/jsx-runtime");
const _reactutilities = require("@fluentui/react-utilities");
const _TreeProvider = require("../TreeProvider");
const renderTree_unstable = (state, contextValues)=>{
(0, _reactutilities.assertSlots)(state);
return /*#__PURE__*/ (0, _jsxruntime.jsx)(_TreeProvider.TreeProvider, {
value: contextValues.tree,
children: state.collapseMotion ? /*#__PURE__*/ (0, _jsxruntime.jsx)(state.collapseMotion, {
children: /*#__PURE__*/ (0, _jsxruntime.jsx)(state.root, {})
}) : /*#__PURE__*/ (0, _jsxruntime.jsx)(state.root, {})
});
};

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/Tree/renderTree.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport type { TreeContextValues, TreeSlots, TreeState } from '../Tree/Tree.types';\nimport { TreeProvider } from '../TreeProvider';\n\nexport const renderTree_unstable = (state: TreeState, contextValues: TreeContextValues): JSXElement => {\n assertSlots<TreeSlots>(state);\n return (\n <TreeProvider value={contextValues.tree}>\n {state.collapseMotion ? (\n <state.collapseMotion>\n <state.root />\n </state.collapseMotion>\n ) : (\n <state.root />\n )}\n </TreeProvider>\n );\n};\n"],"names":["assertSlots","TreeProvider","renderTree_unstable","state","contextValues","value","tree","collapseMotion","root"],"mappings":";;;;+BAOaE;;;;;;4BANb,gDAAiD;gCACrB,4BAA4B;8BAG3B,kBAAkB;AAExC,4BAA4B,CAACC,OAAkBC;QACpDJ,2BAAAA,EAAuBG;IACvB,OAAA,WAAA,OACE,eAAA,EAACF,0BAAAA,EAAAA;QAAaI,OAAOD,cAAcE,IAAI;kBACpCH,MAAMI,cAAc,GAAA,WAAA,OACnB,eAAA,EAACJ,MAAMI,cAAc,EAAA;sBACnB,WAAA,OAAA,eAAA,EAACJ,MAAMK,IAAI,EAAA,CAAA;+BAGb,eAAA,EAACL,MAAMK,IAAI,EAAA,CAAA;;AAInB,EAAE"}

View File

@@ -0,0 +1,42 @@
'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, {
createNextNestedCheckedItems: function() {
return createNextNestedCheckedItems;
},
useNestedCheckedItems: function() {
return useNestedCheckedItems;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const _ImmutableMap = require("../../utils/ImmutableMap");
const _createCheckedItems = require("../../utils/createCheckedItems");
function useNestedCheckedItems(props) {
return _react.useMemo(()=>(0, _createCheckedItems.createCheckedItems)(props.checkedItems), [
props.checkedItems
]);
}
function createNextNestedCheckedItems(data, previousCheckedItems) {
if (data.selectionMode === 'single') {
return _ImmutableMap.ImmutableMap.from([
[
data.value,
data.checked
]
]);
}
if (data.selectionMode === 'multiselect') {
return previousCheckedItems.set(data.value, data.checked);
}
return previousCheckedItems;
}

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/Tree/useNestedControllableCheckedItems.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { TreeCheckedChangeData, TreeProps } from './Tree.types';\nimport { ImmutableMap } from '../../utils/ImmutableMap';\nimport { createCheckedItems } from '../../utils/createCheckedItems';\nimport { TreeItemValue } from '../TreeItem/TreeItem.types';\n\nexport function useNestedCheckedItems(\n props: Pick<TreeProps, 'checkedItems'>,\n): ImmutableMap<TreeItemValue, 'mixed' | boolean> {\n return React.useMemo(() => createCheckedItems(props.checkedItems), [props.checkedItems]);\n}\n\nexport function createNextNestedCheckedItems(\n data: Pick<TreeCheckedChangeData, 'selectionMode' | 'value' | 'checked'>,\n previousCheckedItems: ImmutableMap<TreeItemValue, 'mixed' | boolean>,\n): ImmutableMap<TreeItemValue, 'mixed' | boolean> {\n if (data.selectionMode === 'single') {\n return ImmutableMap.from([[data.value, data.checked]]);\n }\n if (data.selectionMode === 'multiselect') {\n return previousCheckedItems.set(data.value, data.checked);\n }\n return previousCheckedItems;\n}\n"],"names":["React","ImmutableMap","createCheckedItems","useNestedCheckedItems","props","useMemo","checkedItems","createNextNestedCheckedItems","data","previousCheckedItems","selectionMode","from","value","checked","set"],"mappings":"AAAA;;;;;;;;;;;;gCAcgBO;eAAAA;;yBANAJ;;;;;iEANO,QAAQ;8BAEF,2BAA2B;oCACrB,iCAAiC;AAG7D,SAASA,sBACdC,KAAsC;IAEtC,OAAOJ,OAAMK,OAAO,CAAC,QAAMH,sCAAAA,EAAmBE,MAAME,YAAY,GAAG;QAACF,MAAME,YAAY;KAAC;AACzF;AAEO,sCACLE,IAAwE,EACxEC,oBAAoE;IAEpE,IAAID,KAAKE,aAAa,KAAK,UAAU;QACnC,OAAOT,0BAAAA,CAAaU,IAAI,CAAC;YAAC;gBAACH,KAAKI,KAAK;gBAAEJ,KAAKK,OAAO;aAAC;SAAC;IACvD;IACA,IAAIL,KAAKE,aAAa,KAAK,eAAe;QACxC,OAAOD,qBAAqBK,GAAG,CAACN,KAAKI,KAAK,EAAEJ,KAAKK,OAAO;IAC1D;IACA,OAAOJ;AACT"}

View File

@@ -0,0 +1,85 @@
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "useTree_unstable", {
enumerable: true,
get: function() {
return useTree_unstable;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const _reactutilities = require("@fluentui/react-utilities");
const _useControllableOpenItems = require("../../hooks/useControllableOpenItems");
const _useNestedControllableCheckedItems = require("./useNestedControllableCheckedItems");
const _subtreeContext = require("../../contexts/subtreeContext");
const _useRootTree = require("../../hooks/useRootTree");
const _useSubtree = require("../../hooks/useSubtree");
const _useTreeNavigation = require("../../hooks/useTreeNavigation");
const _treeContext = require("../../contexts/treeContext");
const _ImmutableSet = require("../../utils/ImmutableSet");
const _ImmutableMap = require("../../utils/ImmutableMap");
const useTree_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 ? useNestedRootTree(props, ref) : useNestedSubtree(props, ref);
};
function useNestedRootTree(props, ref) {
'use no memo';
const [openItems, setOpenItems] = (0, _useControllableOpenItems.useControllableOpenItems)(props);
const checkedItems = (0, _useNestedControllableCheckedItems.useNestedCheckedItems)(props);
const navigation = (0, _useTreeNavigation.useTreeNavigation)(props.navigationMode);
return Object.assign((0, _useRootTree.useRootTree)({
...props,
openItems,
checkedItems,
onOpenChange: (0, _reactutilities.useEventCallback)((event, data)=>{
var _props_onOpenChange;
const nextOpenItems = (0, _useControllableOpenItems.createNextOpenItems)(data, openItems);
(_props_onOpenChange = props.onOpenChange) === null || _props_onOpenChange === void 0 ? void 0 : _props_onOpenChange.call(props, event, {
...data,
openItems: _ImmutableSet.ImmutableSet.dangerouslyGetInternalSet(nextOpenItems)
});
setOpenItems(nextOpenItems);
}),
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, {
preventScroll: data.isScrollPrevented()
});
}
}),
onCheckedChange: (0, _reactutilities.useEventCallback)((event, data)=>{
var _props_onCheckedChange;
const nextCheckedItems = (0, _useNestedControllableCheckedItems.createNextNestedCheckedItems)(data, checkedItems);
(_props_onCheckedChange = props.onCheckedChange) === null || _props_onCheckedChange === void 0 ? void 0 : _props_onCheckedChange.call(props, event, {
...data,
checkedItems: _ImmutableMap.ImmutableMap.dangerouslyGetInternalMap(nextCheckedItems)
});
})
}, (0, _reactutilities.useMergedRefs)(ref, navigation.treeRef)), {
treeType: 'nested',
forceUpdateRovingTabIndex: navigation.forceUpdateRovingTabIndex
});
}
function useNestedSubtree(props, ref) {
'use no memo';
if (process.env.NODE_ENV === 'development') {
// this doesn't break rule of hooks, as environment is a static value
// eslint-disable-next-line react-hooks/rules-of-hooks
const treeType = (0, _treeContext.useTreeContext_unstable)((ctx)=>ctx.treeType);
if (treeType === 'flat') {
throw new Error(`@fluentui/react-tree [useTree]:
Subtrees are not allowed in a FlatTree!
You cannot use a <Tree> component inside of a <FlatTree> component!`);
}
}
return (0, _useSubtree.useSubtree)(props, ref);
}

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,48 @@
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "useTreeContextValues_unstable", {
enumerable: true,
get: function() {
return useTreeContextValues_unstable;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
function useTreeContextValues_unstable(state) {
'use no memo';
if (state.contextType === 'root') {
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
};
}
return {
// contextType is statically determined by the context
// eslint-disable-next-line react-hooks/rules-of-hooks
tree: _react.useMemo(()=>({
level: state.level,
contextType: 'subtree'
}), [
state.level
])
};
}

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/Tree/useTreeContextValues.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { TreeContextValue } from '../../contexts';\nimport { TreeContextValues, TreeState } from './Tree.types';\n\nexport function useTreeContextValues_unstable(state: TreeState): TreeContextValues {\n 'use no memo';\n\n if (state.contextType === 'root') {\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 return {\n // contextType is statically determined by the context\n // eslint-disable-next-line react-hooks/rules-of-hooks\n tree: React.useMemo(() => ({ level: state.level, contextType: 'subtree' }), [state.level]),\n };\n}\n"],"names":["React","useTreeContextValues_unstable","state","contextType","openItems","level","treeType","checkedItems","selectionMode","navigationMode","appearance","size","requestTreeResponse","forceUpdateRovingTabIndex","tree","useMemo"],"mappings":"AAAA;;;;;+BAMgBC;;;;;;;iEAJO,QAAQ;AAIxB,uCAAuCC,KAAgB;IAC5D;IAEA,IAAIA,MAAMC,WAAW,KAAK,QAAQ;QAChC,MAAM,EACJC,SAAS,EACTC,KAAK,EACLF,WAAW,EACXG,QAAQ,EACRC,YAAY,EACZC,aAAa,EACbC,cAAc,EACdC,UAAU,EACVC,IAAI,EACJC,mBAAmB,EACnBC,yBAAyB,EAC1B,GAAGX;QACJ;;;KAGC,GACD,MAAMY,OAAyB;YAC7BR;YACAK;YACAP;YACAM;YACAH;YACAC;YACAC;YACAN;YACAE;YACAO;YACAC;QACF;QAEA,OAAO;YAAEC;QAAK;IAChB;IACA,OAAO;QACL,sDAAsD;QACtD,sDAAsD;QACtDA,MAAMd,OAAMe,OAAO,CAAC,IAAO,CAAA;gBAAEV,OAAOH,MAAMG,KAAK;gBAAEF,aAAa;aAAU,CAAA,EAAI;YAACD,MAAMG,KAAK;SAAC;IAC3F;AACF"}

View File

@@ -0,0 +1,43 @@
'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, {
treeClassNames: function() {
return treeClassNames;
},
useTreeStyles_unstable: function() {
return useTreeStyles_unstable;
}
});
const _react = require("@griffel/react");
const treeClassNames = {
root: 'fui-Tree'
};
const useBaseStyles = /*#__PURE__*/ (0, _react.__resetStyles)("rnv2ez3", null, [
".rnv2ez3{display:flex;flex-direction:column;row-gap:var(--spacingVerticalXXS);}"
]);
const useStyles = /*#__PURE__*/ (0, _react.__styles)({
subtree: {
z8tnut: "fclwglc"
}
}, {
d: [
".fclwglc{padding-top:var(--spacingVerticalXXS);}"
]
});
const useTreeStyles_unstable = (state)=>{
'use no memo';
const baseStyles = useBaseStyles();
const styles = useStyles();
const isSubTree = state.level > 1;
state.root.className = (0, _react.mergeClasses)(treeClassNames.root, baseStyles, isSubTree && styles.subtree, state.root.className);
return state;
};

View File

@@ -0,0 +1 @@
{"version":3,"sources":["useTreeStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nexport const treeClassNames = {\n root: 'fui-Tree'\n};\nconst useBaseStyles = makeResetStyles({\n display: 'flex',\n flexDirection: 'column',\n rowGap: tokens.spacingVerticalXXS\n});\nconst useStyles = makeStyles({\n subtree: {\n paddingTop: tokens.spacingVerticalXXS\n }\n});\nexport const useTreeStyles_unstable = (state)=>{\n 'use no memo';\n const baseStyles = useBaseStyles();\n const styles = useStyles();\n const isSubTree = state.level > 1;\n state.root.className = mergeClasses(treeClassNames.root, baseStyles, isSubTree && styles.subtree, state.root.className);\n return state;\n};\n"],"names":["__resetStyles","__styles","mergeClasses","tokens","treeClassNames","root","useBaseStyles","useStyles","subtree","z8tnut","d","useTreeStyles_unstable","state","baseStyles","styles","isSubTree","level","className"],"mappings":"AAAA,YAAY;;;;;;;;;;;;IAGCI,cAAc;;;0BAaQ;eAAtBO;;;uBAf6C,gBAAgB;AAEnE,uBAAuB;IAC1BN,IAAI,EAAE;AACV,CAAC;AACD,MAAMC,aAAa,GAAA,WAAA,OAAGN,oBAAA,EAAA,WAAA,MAAA;IAAA;CAIrB,CAAC;AACF,MAAMO,SAAS,GAAA,WAAA,OAAGN,eAAA,EAAA;IAAAO,OAAA,EAAA;QAAAC,MAAA,EAAA;IAAA;AAAA,GAAA;IAAAC,CAAA,EAAA;QAAA;KAAA;AAAA,CAIjB,CAAC;AACK,gCAAgCE,KAAK,IAAG;IAC3C,aAAa;IACb,MAAMC,UAAU,GAAGP,aAAa,CAAC,CAAC;IAClC,MAAMQ,MAAM,GAAGP,SAAS,CAAC,CAAC;IAC1B,MAAMQ,SAAS,GAAGH,KAAK,CAACI,KAAK,GAAG,CAAC;IACjCJ,KAAK,CAACP,IAAI,CAACY,SAAS,OAAGf,mBAAY,EAACE,cAAc,CAACC,IAAI,EAAEQ,UAAU,EAAEE,SAAS,IAAID,MAAM,CAACN,OAAO,EAAEI,KAAK,CAACP,IAAI,CAACY,SAAS,CAAC;IACvH,OAAOL,KAAK;AAChB,CAAC"}

View File

@@ -0,0 +1,42 @@
'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, {
treeClassNames: function() {
return treeClassNames;
},
useTreeStyles_unstable: function() {
return useTreeStyles_unstable;
}
});
const _react = require("@griffel/react");
const _reacttheme = require("@fluentui/react-theme");
const treeClassNames = {
root: 'fui-Tree'
};
const useBaseStyles = (0, _react.makeResetStyles)({
display: 'flex',
flexDirection: 'column',
rowGap: _reacttheme.tokens.spacingVerticalXXS
});
const useStyles = (0, _react.makeStyles)({
subtree: {
paddingTop: _reacttheme.tokens.spacingVerticalXXS
}
});
const useTreeStyles_unstable = (state)=>{
'use no memo';
const baseStyles = useBaseStyles();
const styles = useStyles();
const isSubTree = state.level > 1;
state.root.className = (0, _react.mergeClasses)(treeClassNames.root, baseStyles, isSubTree && styles.subtree, state.root.className);
return state;
};

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/Tree/useTreeStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport type { TreeSlots, TreeState } from './Tree.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { tokens } from '@fluentui/react-theme';\n\nexport const treeClassNames: SlotClassNames<Omit<TreeSlots, 'collapseMotion'>> = {\n root: 'fui-Tree',\n};\n\nconst useBaseStyles = makeResetStyles({\n display: 'flex',\n flexDirection: 'column',\n rowGap: tokens.spacingVerticalXXS,\n});\n\nconst useStyles = makeStyles({\n subtree: {\n paddingTop: tokens.spacingVerticalXXS,\n },\n});\n\nexport const useTreeStyles_unstable = (state: TreeState): TreeState => {\n 'use no memo';\n\n const baseStyles = useBaseStyles();\n const styles = useStyles();\n const isSubTree = state.level > 1;\n\n state.root.className = mergeClasses(\n treeClassNames.root,\n baseStyles,\n isSubTree && styles.subtree,\n state.root.className,\n );\n return state;\n};\n"],"names":["makeResetStyles","makeStyles","mergeClasses","tokens","treeClassNames","root","useBaseStyles","display","flexDirection","rowGap","spacingVerticalXXS","useStyles","subtree","paddingTop","useTreeStyles_unstable","state","baseStyles","styles","isSubTree","level","className"],"mappings":"AAAA;;;;;;;;;;;;IAOaI,cAAAA;;;0BAgBAU;eAAAA;;;uBArB6C,iBAAiB;4BAGpD,wBAAwB;AAExC,uBAA0E;IAC/ET,MAAM;AACR,EAAE;AAEF,MAAMC,oBAAgBN,sBAAAA,EAAgB;IACpCO,SAAS;IACTC,eAAe;IACfC,QAAQN,kBAAAA,CAAOO,kBAAkB;AACnC;AAEA,MAAMC,gBAAYV,iBAAAA,EAAW;IAC3BW,SAAS;QACPC,YAAYV,kBAAAA,CAAOO,kBAAkB;IACvC;AACF;AAEO,+BAA+B,CAACK;IACrC;IAEA,MAAMC,aAAaV;IACnB,MAAMW,SAASN;IACf,MAAMO,YAAYH,MAAMI,KAAK,GAAG;IAEhCJ,MAAMV,IAAI,CAACe,SAAS,OAAGlB,mBAAAA,EACrBE,eAAeC,IAAI,EACnBW,YACAE,aAAaD,OAAOL,OAAO,EAC3BG,MAAMV,IAAI,CAACe,SAAS;IAEtB,OAAOL;AACT,EAAE"}

View File

@@ -0,0 +1,26 @@
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "TreeItem", {
enumerable: true,
get: function() {
return TreeItem;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const _useTreeItem = require("./useTreeItem");
const _renderTreeItem = require("./renderTreeItem");
const _useTreeItemStylesstyles = require("./useTreeItemStyles.styles");
const _useTreeItemContextValues = require("./useTreeItemContextValues");
const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
const TreeItem = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
const state = (0, _useTreeItem.useTreeItem_unstable)(props, ref);
(0, _useTreeItemStylesstyles.useTreeItemStyles_unstable)(state);
(0, _reactsharedcontexts.useCustomStyleHook_unstable)('useTreeItemStyles_unstable')(state);
const contextValues = (0, _useTreeItemContextValues.useTreeItemContextValues_unstable)(state);
return (0, _renderTreeItem.renderTreeItem_unstable)(state, contextValues);
});
TreeItem.displayName = 'TreeItem';

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/TreeItem/TreeItem.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useTreeItem_unstable } from './useTreeItem';\nimport { renderTreeItem_unstable } from './renderTreeItem';\nimport { useTreeItemStyles_unstable } from './useTreeItemStyles.styles';\nimport type { TreeItemProps } from './TreeItem.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useTreeItemContextValues_unstable } from './useTreeItemContextValues';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * The `TreeItem` component represents a single item in a tree.\n * It expects a certain order of children to work properly: the first child should be the node itself,\n * and the second child should be a nested subtree in the form of another Tree component or a standalone TreeItem.\n * This order follows the same order as document traversal for the TreeWalker API in JavaScript:\n * https://developer.mozilla.org/en-US/docs/Web/API/TreeWalker.\n * The content and layout of a TreeItem can be defined using the TreeItemLayout or TreeItemPersonaLayout component,\n * which should be used as a direct child of TreeItem.\n *\n * When a TreeItem has nested child subtree, an expand/collapse control is displayed,\n * allowing the user to show or hide the children.\n */\nexport const TreeItem: ForwardRefComponent<TreeItemProps> = React.forwardRef((props, ref) => {\n const state = useTreeItem_unstable(props, ref);\n\n useTreeItemStyles_unstable(state);\n useCustomStyleHook_unstable('useTreeItemStyles_unstable')(state);\n\n const contextValues = useTreeItemContextValues_unstable(state);\n return renderTreeItem_unstable(state, contextValues);\n});\n\nTreeItem.displayName = 'TreeItem';\n"],"names":["React","useTreeItem_unstable","renderTreeItem_unstable","useTreeItemStyles_unstable","useTreeItemContextValues_unstable","useCustomStyleHook_unstable","TreeItem","forwardRef","props","ref","state","contextValues","displayName"],"mappings":"AAAA;;;;;;;;;;;;iEAEuB,QAAQ;6BACM,gBAAgB;gCACb,mBAAmB;yCAChB,6BAA6B;0CAGtB,6BAA6B;qCACnC,kCAAkC;AAcvE,MAAMM,WAAAA,WAAAA,GAA+CN,OAAMO,UAAU,CAAC,CAACC,OAAOC;IACnF,MAAMC,YAAQT,iCAAAA,EAAqBO,OAAOC;QAE1CN,mDAAAA,EAA2BO;QAC3BL,gDAAAA,EAA4B,8BAA8BK;IAE1D,MAAMC,oBAAgBP,2DAAAA,EAAkCM;IACxD,WAAOR,uCAAAA,EAAwBQ,OAAOC;AACxC,GAAG;AAEHL,SAASM,WAAW,GAAG"}

View File

@@ -0,0 +1,6 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/TreeItem/TreeItem.types.ts"],"sourcesContent":["import * as React from 'react';\nimport type { ArrowLeft, ArrowRight, Enter } from '@fluentui/keyboard-keys';\nimport type { ComponentProps, ComponentState, ExtractSlotProps, Slot } from '@fluentui/react-utilities';\nimport type { TreeItemContextValue } from '../../contexts';\nimport type { treeItemLevelToken } from '../../utils/tokens';\n\nexport type TreeItemCSSProperties = React.CSSProperties & { [treeItemLevelToken]?: string | number };\n\nexport type TreeItemType = 'leaf' | 'branch';\n\nexport type TreeItemSlots = {\n root: Slot<ExtractSlotProps<Slot<'div'> & { style?: TreeItemCSSProperties }>>;\n};\n\nexport type TreeItemValue = string | number;\n\nexport type TreeItemContextValues = {\n treeItem: TreeItemContextValue;\n};\n\nexport type TreeItemOpenChangeData = {\n open: boolean;\n value: TreeItemValue;\n target: HTMLElement;\n} & (\n | { event: React.MouseEvent<HTMLElement>; type: 'ExpandIconClick' }\n | { event: React.MouseEvent<HTMLElement>; type: 'Click' }\n | { event: React.KeyboardEvent<HTMLElement>; type: typeof Enter }\n | { event: React.KeyboardEvent<HTMLElement>; type: typeof ArrowRight }\n | { event: React.KeyboardEvent<HTMLElement>; type: typeof ArrowLeft }\n);\n\nexport type TreeItemOpenChangeEvent = TreeItemOpenChangeData['event'];\n\n/**\n * TreeItem Props\n */\nexport type TreeItemProps = ComponentProps<Partial<TreeItemSlots>> & {\n /**\n * A tree item can be a leaf or a branch\n */\n itemType: TreeItemType;\n /**\n * A tree item should have a well defined value, in case one is not provided by the user by this prop\n * one will be inferred internally.\n */\n value?: TreeItemValue;\n /**\n * Whether the tree item is in an open state\n *\n * This overrides the open value provided by the root tree,\n * and ensure control of the visibility of the tree item per tree item.\n *\n * NOTE: controlling the open state of a tree item will not affect the open state of its children\n */\n open?: boolean;\n // eslint-disable-next-line @nx/workspace-consistent-callback-type -- can't change type of existing callback\n onOpenChange?: (e: TreeItemOpenChangeEvent, data: TreeItemOpenChangeData) => void;\n /**\n * This property is inferred through context on a nested tree, and required for a flat tree.\n */\n parentValue?: TreeItemValue;\n};\n\n/**\n * State used in rendering TreeItem\n */\nexport type TreeItemState = ComponentState<TreeItemSlots> &\n TreeItemContextValue & {\n level: number;\n itemType: TreeItemType;\n };\n"],"names":["React"],"mappings":";;;;;iEAAuB,QAAQ"}

View File

@@ -0,0 +1,35 @@
"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, {
TreeItem: function() {
return _TreeItem.TreeItem;
},
renderTreeItem_unstable: function() {
return _renderTreeItem.renderTreeItem_unstable;
},
treeItemClassNames: function() {
return _useTreeItemStylesstyles.treeItemClassNames;
},
useTreeItemContextValues_unstable: function() {
return _useTreeItemContextValues.useTreeItemContextValues_unstable;
},
useTreeItemStyles_unstable: function() {
return _useTreeItemStylesstyles.useTreeItemStyles_unstable;
},
useTreeItem_unstable: function() {
return _useTreeItem.useTreeItem_unstable;
}
});
const _TreeItem = require("./TreeItem");
const _renderTreeItem = require("./renderTreeItem");
const _useTreeItem = require("./useTreeItem");
const _useTreeItemStylesstyles = require("./useTreeItemStyles.styles");
const _useTreeItemContextValues = require("./useTreeItemContextValues");

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/TreeItem/index.ts"],"sourcesContent":["export { TreeItem } from './TreeItem';\nexport type {\n TreeItemCSSProperties,\n TreeItemContextValues,\n TreeItemOpenChangeData,\n TreeItemOpenChangeEvent,\n TreeItemProps,\n TreeItemSlots,\n TreeItemState,\n TreeItemType,\n TreeItemValue,\n} from './TreeItem.types';\nexport { renderTreeItem_unstable } from './renderTreeItem';\nexport { useTreeItem_unstable } from './useTreeItem';\nexport { treeItemClassNames, useTreeItemStyles_unstable } from './useTreeItemStyles.styles';\nexport { useTreeItemContextValues_unstable } from './useTreeItemContextValues';\n"],"names":["TreeItem","renderTreeItem_unstable","useTreeItem_unstable","treeItemClassNames","useTreeItemStyles_unstable","useTreeItemContextValues_unstable"],"mappings":";;;;;;;;;;;;eAASA,kBAAQ;;;eAYRC,uCAAuB;;;eAEvBE,2CAAkB;;;eAClBE,2DAAiC;;;eADbD,mDAA0B;;;eAD9CF,iCAAoB;;;0BAbJ,aAAa;gCAYE,mBAAmB;6BACtB,gBAAgB;yCACU,6BAA6B;0CAC1C,6BAA6B"}

View File

@@ -0,0 +1,22 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "renderTreeItem_unstable", {
enumerable: true,
get: function() {
return renderTreeItem_unstable;
}
});
const _jsxruntime = require("@fluentui/react-jsx-runtime/jsx-runtime");
const _reactutilities = require("@fluentui/react-utilities");
const _contexts = require("../../contexts");
const renderTreeItem_unstable = (state, contextValues)=>{
(0, _reactutilities.assertSlots)(state);
return /*#__PURE__*/ (0, _jsxruntime.jsx)(state.root, {
children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_contexts.TreeItemProvider, {
value: contextValues.treeItem,
children: state.root.children
})
});
};

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/TreeItem/renderTreeItem.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport type { TreeItemState, TreeItemContextValues, TreeItemSlots } from './TreeItem.types';\nimport { TreeItemProvider } from '../../contexts';\n\n/**\n * Render the final JSX of TreeItem\n */\nexport const renderTreeItem_unstable = (state: TreeItemState, contextValues: TreeItemContextValues): JSXElement => {\n assertSlots<TreeItemSlots>(state);\n\n return (\n <state.root>\n <TreeItemProvider value={contextValues.treeItem}>{state.root.children}</TreeItemProvider>\n </state.root>\n );\n};\n"],"names":["assertSlots","TreeItemProvider","renderTreeItem_unstable","state","contextValues","root","value","treeItem","children"],"mappings":";;;;+BAUaE;;;;;;4BATb,gDAAiD;gCACrB,4BAA4B;0BAGvB,iBAAiB;AAK3C,gCAAgC,CAACC,OAAsBC;QAC5DJ,2BAAAA,EAA2BG;IAE3B,OAAA,WAAA,OACE,eAAA,EAACA,MAAME,IAAI,EAAA;kBACT,WAAA,OAAA,eAAA,EAACJ,0BAAAA,EAAAA;YAAiBK,OAAOF,cAAcG,QAAQ;sBAAGJ,MAAME,IAAI,CAACG,QAAQ;;;AAG3E,EAAE"}

View File

@@ -0,0 +1,363 @@
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "useTreeItem_unstable", {
enumerable: true,
get: function() {
return useTreeItem_unstable;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const _reactdom = /*#__PURE__*/ _interop_require_wildcard._(require("react-dom"));
const _reactutilities = require("@fluentui/react-utilities");
const _keyboardkeys = require("@fluentui/keyboard-keys");
const _tokens = require("../../utils/tokens");
const _contexts = require("../../contexts");
const _getTreeItemValueFromElement = require("../../utils/getTreeItemValueFromElement");
const _reactcontextselector = require("@fluentui/react-context-selector");
const _Tree = require("../../Tree");
function useTreeItem_unstable(props, ref) {
'use no memo';
const treeType = (0, _contexts.useTreeContext_unstable)((ctx)=>ctx.treeType);
if (treeType === 'flat') {
warnIfNoProperPropsFlatTreeItem(props);
}
const requestTreeResponse = (0, _contexts.useTreeContext_unstable)((ctx)=>ctx.requestTreeResponse);
const navigationMode = (0, _contexts.useTreeContext_unstable)((ctx)=>{
var _ctx_navigationMode;
return (_ctx_navigationMode = ctx.navigationMode) !== null && _ctx_navigationMode !== void 0 ? _ctx_navigationMode : 'tree';
});
const forceUpdateRovingTabIndex = (0, _contexts.useTreeContext_unstable)((ctx)=>ctx.forceUpdateRovingTabIndex);
const { level: contextLevel } = (0, _contexts.useSubtreeContext_unstable)();
const parentValue = (0, _contexts.useTreeItemContext_unstable)((ctx)=>{
var _props_parentValue;
return (_props_parentValue = props.parentValue) !== null && _props_parentValue !== void 0 ? _props_parentValue : ctx.value;
});
// note, if the value is not externally provided,
// then selection and expansion will not work properly
const internalValue = (0, _reactutilities.useId)('fuiTreeItemValue-');
var _props_value;
const value = (_props_value = props.value) !== null && _props_value !== void 0 ? _props_value : internalValue;
const { onClick, onKeyDown, onChange, as = 'div', itemType = 'leaf', 'aria-level': level = contextLevel, 'aria-selected': ariaSelected, 'aria-expanded': ariaExpanded, ...rest } = props;
const actionsRef = _react.useRef(null);
const expandIconRef = _react.useRef(null);
const layoutRef = _react.useRef(null);
const subtreeRef = _react.useRef(null);
const selectionRef = _react.useRef(null);
const treeItemRef = _react.useRef(null);
if (process.env.NODE_ENV !== 'production') {
// This is acceptable since the NODE_ENV will not change during runtime
// eslint-disable-next-line react-hooks/rules-of-hooks
const hasTreeContext = (0, _reactcontextselector.useHasParentContext)(_contexts.TreeContext);
// eslint-disable-next-line react-hooks/rules-of-hooks
_react.useEffect(()=>{
var _treeItemRef_current;
if (hasTreeContext) {
return;
}
if ((_treeItemRef_current = treeItemRef.current) === null || _treeItemRef_current === void 0 ? void 0 : _treeItemRef_current.querySelector(`.${_Tree.treeClassNames.root}`)) {
// eslint-disable-next-line no-console
console.error(`@fluentui/react-tree [useTreeItem]:
<TreeItem> should be declared inside a <Tree> component.`);
}
}, [
hasTreeContext
]);
}
_react.useEffect(()=>{
// When the tree item is mounted, we might need to update the roving tab index
// in edge cases where the tree is empty and then populated
forceUpdateRovingTabIndex === null || forceUpdateRovingTabIndex === void 0 ? void 0 : forceUpdateRovingTabIndex();
const treeItem = treeItemRef.current;
return ()=>{
// When the tree item is unmounted, we need to update the roving tab index
// if the tree item is the current tab indexed item
if (treeItem && treeItem.tabIndex === 0) {
forceUpdateRovingTabIndex === null || forceUpdateRovingTabIndex === void 0 ? void 0 : forceUpdateRovingTabIndex();
}
};
}, [
forceUpdateRovingTabIndex
]);
const open = (0, _contexts.useTreeContext_unstable)((ctx)=>{
var _props_open;
return (_props_open = props.open) !== null && _props_open !== void 0 ? _props_open : ctx.openItems.has(value);
});
const getNextOpen = ()=>itemType === 'branch' ? !open : open;
const selectionMode = (0, _contexts.useTreeContext_unstable)((ctx)=>ctx.selectionMode);
const checked = (0, _contexts.useTreeContext_unstable)((ctx)=>{
var _ctx_checkedItems_get;
return (_ctx_checkedItems_get = ctx.checkedItems.get(value)) !== null && _ctx_checkedItems_get !== void 0 ? _ctx_checkedItems_get : false;
});
const handleClick = (0, _reactutilities.useEventCallback)((event)=>{
var _expandIconRef_current;
const isEventFromActions = ()=>actionsRef.current && (0, _reactutilities.elementContains)(actionsRef.current, event.target);
const isEventFromSubtree = ()=>subtreeRef.current && (0, _reactutilities.elementContains)(subtreeRef.current, event.target);
const isEventFromSelection = ()=>{
var _selectionRef_current;
return (_selectionRef_current = selectionRef.current) === null || _selectionRef_current === void 0 ? void 0 : _selectionRef_current.contains(event.target);
};
const isEventFromExpandIcon = (_expandIconRef_current = expandIconRef.current) === null || _expandIconRef_current === void 0 ? void 0 : _expandIconRef_current.contains(event.target);
if (isEventFromActions() || isEventFromSubtree() || isEventFromSelection()) {
return;
} else if (!isEventFromExpandIcon) {
onClick === null || onClick === void 0 ? void 0 : onClick(event);
}
if (event.isDefaultPrevented()) {
return;
}
_reactdom.unstable_batchedUpdates(()=>{
const data = {
event,
value,
open: getNextOpen(),
target: event.currentTarget,
type: isEventFromExpandIcon ? _tokens.treeDataTypes.ExpandIconClick : _tokens.treeDataTypes.Click
};
if (itemType !== 'leaf') {
var _props_onOpenChange;
(_props_onOpenChange = props.onOpenChange) === null || _props_onOpenChange === void 0 ? void 0 : _props_onOpenChange.call(props, event, data);
requestTreeResponse({
...data,
itemType,
requestType: 'open'
});
}
requestTreeResponse({
...data,
itemType,
parentValue,
requestType: 'navigate',
type: _tokens.treeDataTypes.Click
});
});
});
const handleKeyDown = (0, _reactutilities.useEventCallback)((event)=>{
onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(event);
if (event.isDefaultPrevented() || !treeItemRef.current) {
return;
}
const isEventFromTreeItem = event.currentTarget === event.target;
const isEventFromActions = actionsRef.current && actionsRef.current.contains(event.target);
switch(event.key){
case _keyboardkeys.Space:
{
if (!isEventFromTreeItem) {
return;
}
if (selectionMode !== 'none') {
var _selectionRef_current;
(_selectionRef_current = selectionRef.current) === null || _selectionRef_current === void 0 ? void 0 : _selectionRef_current.click();
// Prevents the page from scrolling down when the spacebar is pressed
event.preventDefault();
}
return;
}
case _tokens.treeDataTypes.Enter:
{
if (!isEventFromTreeItem) {
return;
}
return event.currentTarget.click();
}
case _tokens.treeDataTypes.End:
case _tokens.treeDataTypes.Home:
case _tokens.treeDataTypes.ArrowUp:
{
if (!isEventFromTreeItem && !isEventFromActions) {
return;
}
return requestTreeResponse({
requestType: 'navigate',
event,
value,
itemType,
parentValue,
type: event.key,
target: event.currentTarget
});
}
case _tokens.treeDataTypes.ArrowDown:
{
if (!isEventFromTreeItem && !isEventFromActions) {
return;
}
if (isEventFromActions && (!(0, _reactutilities.isHTMLElement)(event.target) || event.target.hasAttribute('aria-haspopup'))) {
return;
}
return requestTreeResponse({
requestType: 'navigate',
event,
value,
itemType,
parentValue,
type: event.key,
target: event.currentTarget
});
}
case _tokens.treeDataTypes.ArrowLeft:
{
// arrow left with alt key is reserved for history navigation
if (event.altKey) {
return;
}
const data = {
value,
event,
open: getNextOpen(),
type: event.key,
itemType,
parentValue,
target: event.currentTarget
};
if (isEventFromActions && navigationMode === 'treegrid') {
requestTreeResponse({
...data,
requestType: 'navigate'
});
return;
}
if (!isEventFromTreeItem) {
return;
}
// do not navigate to parent if the item is on the top level
if (level === 1 && !open) {
return;
}
if (open) {
var _props_onOpenChange;
(_props_onOpenChange = props.onOpenChange) === null || _props_onOpenChange === void 0 ? void 0 : _props_onOpenChange.call(props, event, data);
}
requestTreeResponse({
...data,
requestType: open ? 'open' : 'navigate'
});
return;
}
case _tokens.treeDataTypes.ArrowRight:
{
// Ignore keyboard events that do not originate from the current tree item.
if (!isEventFromTreeItem) {
return;
}
// arrow right with alt key is reserved for history navigation
if (event.altKey) {
return;
}
const data = {
value,
event,
open: getNextOpen(),
type: event.key,
target: event.currentTarget
};
if (itemType === 'branch' && !open) {
var _props_onOpenChange1;
(_props_onOpenChange1 = props.onOpenChange) === null || _props_onOpenChange1 === void 0 ? void 0 : _props_onOpenChange1.call(props, event, data);
requestTreeResponse({
...data,
itemType,
requestType: 'open'
});
} else {
requestTreeResponse({
...data,
itemType,
parentValue,
requestType: 'navigate'
});
}
return;
}
}
// Ignore keyboard events that do not originate from the current tree item.
if (!isEventFromTreeItem) {
return;
}
const isTypeAheadCharacter = event.key.length === 1 && event.key.match(/\w/) && !event.altKey && !event.ctrlKey && !event.metaKey;
if (isTypeAheadCharacter) {
requestTreeResponse({
requestType: 'navigate',
event,
target: event.currentTarget,
value,
itemType,
type: _tokens.treeDataTypes.TypeAhead,
parentValue
});
}
});
const handleChange = (0, _reactutilities.useEventCallback)((event)=>{
onChange === null || onChange === void 0 ? void 0 : onChange(event);
if (event.isDefaultPrevented()) {
return;
}
const isEventFromSubtree = subtreeRef.current && (0, _reactutilities.elementContains)(subtreeRef.current, event.target);
if (isEventFromSubtree) {
return;
}
requestTreeResponse({
requestType: 'selection',
event,
value,
itemType,
type: 'Change',
target: event.currentTarget,
checked: checked === 'mixed' ? true : !checked
});
});
return {
value,
open,
checked,
subtreeRef,
layoutRef,
selectionRef,
expandIconRef,
treeItemRef,
actionsRef,
itemType,
level,
components: {
root: 'div'
},
// FIXME: this property is not necessary anymore, but as removing it would be a breaking change, we need to keep it as false
isAsideVisible: false,
// FIXME: this property is not necessary anymore, but as removing it would be a breaking change, we need to keep it as false
isActionsVisible: false,
root: _reactutilities.slot.always((0, _reactutilities.getIntrinsicElementProps)(as, {
tabIndex: -1,
[_getTreeItemValueFromElement.dataTreeItemValueAttrName]: value,
role: 'treeitem',
...rest,
ref: (0, _reactutilities.useMergedRefs)(ref, treeItemRef),
'aria-level': level,
'aria-checked': selectionMode === 'multiselect' ? checked : undefined,
'aria-selected': ariaSelected !== undefined ? ariaSelected : selectionMode === 'single' ? !!checked : undefined,
'aria-expanded': ariaExpanded !== undefined ? ariaExpanded : itemType === 'branch' ? open : undefined,
onClick: handleClick,
onKeyDown: handleKeyDown,
onChange: handleChange
}), {
elementType: 'div'
})
};
}
function warnIfNoProperPropsFlatTreeItem(props) {
if (process.env.NODE_ENV !== 'production') {
if (props['aria-posinset'] === undefined || props['aria-setsize'] === undefined || props['aria-level'] === undefined || props.parentValue === undefined && props['aria-level'] !== 1) {
// eslint-disable-next-line no-console
console.error(`@fluentui/react-tree [${useTreeItem_unstable.name}]:
A flat treeitem must have "aria-posinset", "aria-setsize", "aria-level"
and "parentValue" (if "aria-level" > 1) to ensure a11y and navigation.
- "aria-posinset": the position of this treeitem in the current level of the tree.
- "aria-setsize": the number of siblings in this level of the tree.
- "aria-level": the current level of the treeitem.
- "parentValue": the "value" property of the parent item of this item.`);
}
}
}

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,33 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "useTreeItemContextValues_unstable", {
enumerable: true,
get: function() {
return useTreeItemContextValues_unstable;
}
});
function useTreeItemContextValues_unstable(state) {
const { value, itemType, layoutRef, subtreeRef, open, expandIconRef, actionsRef, treeItemRef, isActionsVisible, isAsideVisible, selectionRef, checked } = state;
/**
* This context is created with "@fluentui/react-context-selector",
* there is no sense to memoize it
*/ const treeItem = {
value,
checked,
itemType,
layoutRef,
subtreeRef,
open,
selectionRef,
isActionsVisible,
isAsideVisible,
actionsRef,
treeItemRef,
expandIconRef
};
return {
treeItem
};
}

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/TreeItem/useTreeItemContextValues.ts"],"sourcesContent":["import type { TreeItemContextValues, TreeItemState } from './TreeItem.types';\nimport type { TreeItemContextValue } from '../../contexts';\n\nexport function useTreeItemContextValues_unstable(state: TreeItemState): TreeItemContextValues {\n const {\n value,\n itemType,\n layoutRef,\n subtreeRef,\n open,\n expandIconRef,\n actionsRef,\n treeItemRef,\n // eslint-disable-next-line @typescript-eslint/no-deprecated\n isActionsVisible,\n // eslint-disable-next-line @typescript-eslint/no-deprecated\n isAsideVisible,\n selectionRef,\n checked,\n } = state;\n\n /**\n * This context is created with \"@fluentui/react-context-selector\",\n * there is no sense to memoize it\n */\n const treeItem: TreeItemContextValue = {\n value,\n checked,\n itemType,\n layoutRef,\n subtreeRef,\n open,\n selectionRef,\n isActionsVisible,\n isAsideVisible,\n actionsRef,\n treeItemRef,\n expandIconRef,\n };\n\n return { treeItem };\n}\n"],"names":["useTreeItemContextValues_unstable","state","value","itemType","layoutRef","subtreeRef","open","expandIconRef","actionsRef","treeItemRef","isActionsVisible","isAsideVisible","selectionRef","checked","treeItem"],"mappings":";;;;+BAGgBA;;;;;;AAAT,2CAA2CC,KAAoB;IACpE,MAAM,EACJC,KAAK,EACLC,QAAQ,EACRC,SAAS,EACTC,UAAU,EACVC,IAAI,EACJC,aAAa,EACbC,UAAU,EACVC,WAAW,EACX,AACAC,gBAAgB,EAEhBC,AADA,cACc,EACdC,YAAY,EACZC,OAAO,EACR,GAN6D,AAM1DZ,kBAJ0D;IAM9D;;;GAGC,GACD,MAAMa,WAAiC;QACrCZ;QACAW;QACAV;QACAC;QACAC;QACAC;QACAM;QACAF;QACAC;QACAH;QACAC;QACAF;IACF;IAEA,OAAO;QAAEO;IAAS;AACpB"}

View File

@@ -0,0 +1,89 @@
'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, {
treeItemClassNames: function() {
return treeItemClassNames;
},
useTreeItemStyles_unstable: function() {
return useTreeItemStyles_unstable;
}
});
const _react = require("@griffel/react");
const treeItemClassNames = {
root: 'fui-TreeItem'
};
const useBaseStyles = /*#__PURE__*/ (0, _react.__resetStyles)("r15xhw3a", "r2f6k57", [
".r15xhw3a{position:relative;cursor:pointer;display:flex;flex-direction:column;box-sizing:border-box;background-color:var(--colorSubtleBackground);color:var(--colorNeutralForeground2);padding-right:var(--spacingHorizontalNone);}",
".r15xhw3a:focus{outline-style:none;}",
".r15xhw3a:focus-visible{outline-style:none;}",
".r15xhw3a[data-fui-focus-visible]>.fui-TreeItemLayout,.r15xhw3a[data-fui-focus-visible]>.fui-TreeItemPersonaLayout{border-radius:var(--borderRadiusMedium);outline-color:var(--colorStrokeFocus2);outline-radius:var(--borderRadiusMedium);outline-width:2px;outline-style:solid;}",
".r2f6k57{position:relative;cursor:pointer;display:flex;flex-direction:column;box-sizing:border-box;background-color:var(--colorSubtleBackground);color:var(--colorNeutralForeground2);padding-left:var(--spacingHorizontalNone);}",
".r2f6k57:focus{outline-style:none;}",
".r2f6k57:focus-visible{outline-style:none;}",
".r2f6k57[data-fui-focus-visible]>.fui-TreeItemLayout,.r2f6k57[data-fui-focus-visible]>.fui-TreeItemPersonaLayout{border-radius:var(--borderRadiusMedium);outline-color:var(--colorStrokeFocus2);outline-radius:var(--borderRadiusMedium);outline-width:2px;outline-style:solid;}"
]);
const useStyles = /*#__PURE__*/ (0, _react.__styles)({
level1: {
iytv0q: "f10bgyvd"
},
level2: {
iytv0q: "f1h0rod3"
},
level3: {
iytv0q: "fgoqafk"
},
level4: {
iytv0q: "f75dvuh"
},
level5: {
iytv0q: "fqk7yw6"
},
level6: {
iytv0q: "f1r3z17b"
},
level7: {
iytv0q: "f1hrpd1h"
},
level8: {
iytv0q: "f1iy65d0"
},
level9: {
iytv0q: "ftg42e5"
},
level10: {
iytv0q: "fyat3t"
}
}, {
d: [
".f10bgyvd{--fluent-TreeItem--level:1;}",
".f1h0rod3{--fluent-TreeItem--level:2;}",
".fgoqafk{--fluent-TreeItem--level:3;}",
".f75dvuh{--fluent-TreeItem--level:4;}",
".fqk7yw6{--fluent-TreeItem--level:5;}",
".f1r3z17b{--fluent-TreeItem--level:6;}",
".f1hrpd1h{--fluent-TreeItem--level:7;}",
".f1iy65d0{--fluent-TreeItem--level:8;}",
".ftg42e5{--fluent-TreeItem--level:9;}",
".fyat3t{--fluent-TreeItem--level:10;}"
]
});
const useTreeItemStyles_unstable = (state)=>{
'use no memo';
const baseStyles = useBaseStyles();
const styles = useStyles();
const { level } = state;
state.root.className = (0, _react.mergeClasses)(treeItemClassNames.root, baseStyles, isStaticallyDefinedLevel(level) && styles[`level${level}`], state.root.className);
return state;
};
function isStaticallyDefinedLevel(level) {
return level >= 1 && level <= 10;
}

View File

@@ -0,0 +1 @@
{"version":3,"sources":["useTreeItemStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport { treeItemLevelToken } from '../../utils/tokens';\nimport { treeItemLayoutClassNames } from '../TreeItemLayout/useTreeItemLayoutStyles.styles';\nimport { treeItemPersonaLayoutClassNames } from '../TreeItemPersonaLayout/useTreeItemPersonaLayoutStyles.styles';\nexport const treeItemClassNames = {\n root: 'fui-TreeItem'\n};\nconst useBaseStyles = makeResetStyles({\n position: 'relative',\n cursor: 'pointer',\n display: 'flex',\n flexDirection: 'column',\n boxSizing: 'border-box',\n backgroundColor: tokens.colorSubtleBackground,\n color: tokens.colorNeutralForeground2,\n paddingRight: tokens.spacingHorizontalNone,\n // if using createCustomFocusIndicatorStyle then we need to remove default outline styles provided by the browser\n ':focus': {\n outlineStyle: 'none'\n },\n ':focus-visible': {\n outlineStyle: 'none'\n },\n // This adds the focus outline for the TreeItemLayout element\n ...createCustomFocusIndicatorStyle({\n borderRadius: tokens.borderRadiusMedium,\n outlineColor: tokens.colorStrokeFocus2,\n outlineRadius: tokens.borderRadiusMedium,\n // FIXME: tokens.strokeWidthThick causes some weird bugs\n outlineWidth: '2px',\n outlineStyle: 'solid'\n }, {\n customizeSelector: (selector)=>`${selector} > .${treeItemLayoutClassNames.root}, ${selector} > .${treeItemPersonaLayoutClassNames.root}`\n })\n});\nconst useStyles = makeStyles({\n ...Object.fromEntries(Array.from({\n length: 10\n }, (_, index)=>[\n `level${index + 1}`,\n {\n [treeItemLevelToken]: index + 1\n }\n ]))\n});\n/**\n * Apply styling to the TreeItem slots based on the state\n */ export const useTreeItemStyles_unstable = (state)=>{\n 'use no memo';\n const baseStyles = useBaseStyles();\n const styles = useStyles();\n const { level } = state;\n state.root.className = mergeClasses(treeItemClassNames.root, baseStyles, isStaticallyDefinedLevel(level) && styles[`level${level}`], state.root.className);\n return state;\n};\nfunction isStaticallyDefinedLevel(level) {\n return level >= 1 && level <= 10;\n}\n"],"names":["__resetStyles","__styles","mergeClasses","tokens","createCustomFocusIndicatorStyle","treeItemLevelToken","treeItemLayoutClassNames","treeItemPersonaLayoutClassNames","treeItemClassNames","root","useBaseStyles","useStyles","level1","iytv0q","level2","level3","level4","level5","level6","level7","level8","level9","level10","d","useTreeItemStyles_unstable","state","baseStyles","styles","level","className","isStaticallyDefinedLevel"],"mappings":"AAAA,YAAY;;;;;;;;;;;;IAOCQ,kBAAkB;;;8BA2CY;;;;uBAjDe,gBAAgB;AAMnE,2BAA2B;IAC9BC,IAAI,EAAE;AACV,CAAC;AACD,MAAMC,aAAa,GAAA,WAAA,OAAGV,oBAAA,EAAA,YAAA,WAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;CA2BrB,CAAC;AACF,MAAMW,SAAS,GAAA,WAAA,OAAGV,eAAA,EAAA;IAAAW,MAAA,EAAA;QAAAC,MAAA,EAAA;IAAA;IAAAC,MAAA,EAAA;QAAAD,MAAA,EAAA;IAAA;IAAAE,MAAA,EAAA;QAAAF,MAAA,EAAA;IAAA;IAAAG,MAAA,EAAA;QAAAH,MAAA,EAAA;IAAA;IAAAI,MAAA,EAAA;QAAAJ,MAAA,EAAA;IAAA;IAAAK,MAAA,EAAA;QAAAL,MAAA,EAAA;IAAA;IAAAM,MAAA,EAAA;QAAAN,MAAA,EAAA;IAAA;IAAAO,MAAA,EAAA;QAAAP,MAAA,EAAA;IAAA;IAAAQ,MAAA,EAAA;QAAAR,MAAA,EAAA;IAAA;IAAAS,OAAA,EAAA;QAAAT,MAAA,EAAA;IAAA;AAAA,GAAA;IAAAU,CAAA,EAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;KAAA;AAAA,CASjB,CAAC;AAGS,MAAMC,8BAA8BC,KAAK,IAAG;IACnD,aAAa;IACb,MAAMC,UAAU,GAAGhB,aAAa,CAAC,CAAC;IAClC,MAAMiB,MAAM,GAAGhB,SAAS,CAAC,CAAC;IAC1B,MAAM,EAAEiB,KAAAA,EAAO,GAAGH,KAAK;IACvBA,KAAK,CAAChB,IAAI,CAACoB,SAAS,OAAG3B,mBAAY,EAACM,kBAAkB,CAACC,IAAI,EAAEiB,UAAU,EAAEI,wBAAwB,CAACF,KAAK,CAAC,IAAID,MAAM,CAAC,CAAA,KAAA,EAAQC,KAAK,EAAE,CAAC,EAAEH,KAAK,CAAChB,IAAI,CAACoB,SAAS,CAAC;IAC1J,OAAOJ,KAAK;AAChB,CAAC;AACD,SAASK,wBAAwBA,CAACF,KAAK,EAAE;IACrC,OAAOA,KAAK,IAAI,CAAC,IAAIA,KAAK,IAAI,EAAE;AACpC"}

View File

@@ -0,0 +1,77 @@
'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, {
treeItemClassNames: function() {
return treeItemClassNames;
},
useTreeItemStyles_unstable: function() {
return useTreeItemStyles_unstable;
}
});
const _react = require("@griffel/react");
const _reacttheme = require("@fluentui/react-theme");
const _reacttabster = require("@fluentui/react-tabster");
const _tokens = require("../../utils/tokens");
const _useTreeItemLayoutStylesstyles = require("../TreeItemLayout/useTreeItemLayoutStyles.styles");
const _useTreeItemPersonaLayoutStylesstyles = require("../TreeItemPersonaLayout/useTreeItemPersonaLayoutStyles.styles");
const treeItemClassNames = {
root: 'fui-TreeItem'
};
const useBaseStyles = (0, _react.makeResetStyles)({
position: 'relative',
cursor: 'pointer',
display: 'flex',
flexDirection: 'column',
boxSizing: 'border-box',
backgroundColor: _reacttheme.tokens.colorSubtleBackground,
color: _reacttheme.tokens.colorNeutralForeground2,
paddingRight: _reacttheme.tokens.spacingHorizontalNone,
// if using createCustomFocusIndicatorStyle then we need to remove default outline styles provided by the browser
':focus': {
outlineStyle: 'none'
},
':focus-visible': {
outlineStyle: 'none'
},
// This adds the focus outline for the TreeItemLayout element
...(0, _reacttabster.createCustomFocusIndicatorStyle)({
borderRadius: _reacttheme.tokens.borderRadiusMedium,
outlineColor: _reacttheme.tokens.colorStrokeFocus2,
outlineRadius: _reacttheme.tokens.borderRadiusMedium,
// FIXME: tokens.strokeWidthThick causes some weird bugs
outlineWidth: '2px',
outlineStyle: 'solid'
}, {
customizeSelector: (selector)=>`${selector} > .${_useTreeItemLayoutStylesstyles.treeItemLayoutClassNames.root}, ${selector} > .${_useTreeItemPersonaLayoutStylesstyles.treeItemPersonaLayoutClassNames.root}`
})
});
const useStyles = (0, _react.makeStyles)({
...Object.fromEntries(Array.from({
length: 10
}, (_, index)=>[
`level${index + 1}`,
{
[_tokens.treeItemLevelToken]: index + 1
}
]))
});
const useTreeItemStyles_unstable = (state)=>{
'use no memo';
const baseStyles = useBaseStyles();
const styles = useStyles();
const { level } = state;
state.root.className = (0, _react.mergeClasses)(treeItemClassNames.root, baseStyles, isStaticallyDefinedLevel(level) && styles[`level${level}`], state.root.className);
return state;
};
function isStaticallyDefinedLevel(level) {
return level >= 1 && level <= 10;
}

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,40 @@
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "TreeItemChevron", {
enumerable: true,
get: function() {
return TreeItemChevron;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
const _reacticons = require("@fluentui/react-icons");
const _reactmotion = require("@fluentui/react-motion");
const _treeItemContext = require("../contexts/treeItemContext");
const TreeItemChevron = /*#__PURE__*/ _react.memo(()=>{
const open = (0, _treeItemContext.useTreeItemContext_unstable)((ctx)=>ctx.open);
const { dir } = (0, _reactsharedcontexts.useFluent_unstable)();
const expandIconRotation = open ? 90 : dir !== 'rtl' ? 0 : 180;
return /*#__PURE__*/ _react.createElement(_reacticons.ChevronRight12Regular, {
style: {
...expandIconInlineStyles[expandIconRotation],
transition: `transform ${_reactmotion.durations.durationNormal}ms ${_reactmotion.curves.curveEasyEaseMax}`
}
});
});
TreeItemChevron.displayName = 'TreeItemChevron';
const expandIconInlineStyles = {
90: {
transform: `rotate(90deg)`
},
0: {
transform: `rotate(0deg)`
},
180: {
transform: `rotate(180deg)`
}
};

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/TreeItemChevron.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useFluent_unstable } from '@fluentui/react-shared-contexts';\nimport { ChevronRight12Regular } from '@fluentui/react-icons';\nimport { durations, curves } from '@fluentui/react-motion';\nimport { useTreeItemContext_unstable } from '../contexts/treeItemContext';\n\nexport const TreeItemChevron = React.memo(() => {\n const open = useTreeItemContext_unstable(ctx => ctx.open);\n\n const { dir } = useFluent_unstable();\n\n const expandIconRotation = open ? 90 : dir !== 'rtl' ? 0 : 180;\n return (\n <ChevronRight12Regular\n style={{\n ...expandIconInlineStyles[expandIconRotation],\n transition: `transform ${durations.durationNormal}ms ${curves.curveEasyEaseMax}`,\n }}\n />\n );\n});\nTreeItemChevron.displayName = 'TreeItemChevron';\n\nconst expandIconInlineStyles = {\n 90: { transform: `rotate(90deg)` },\n 0: { transform: `rotate(0deg)` },\n 180: { transform: `rotate(180deg)` },\n} as const;\n"],"names":["React","useFluent_unstable","ChevronRight12Regular","durations","curves","useTreeItemContext_unstable","TreeItemChevron","memo","open","ctx","dir","expandIconRotation","style","expandIconInlineStyles","transition","durationNormal","curveEasyEaseMax","displayName","transform"],"mappings":"AAAA;;;;;+BAQaM;;;;;;;iEANU,QAAQ;qCACI,kCAAkC;4BAC/B,wBAAwB;6BAC5B,yBAAyB;iCACf,8BAA8B;AAEnE,wBAAMA,WAAAA,GAAkBN,OAAMO,IAAI,CAAC;IACxC,MAAMC,WAAOH,4CAAAA,EAA4BI,CAAAA,MAAOA,IAAID,IAAI;IAExD,MAAM,EAAEE,GAAG,EAAE,OAAGT,uCAAAA;IAEhB,MAAMU,qBAAqBH,OAAO,KAAKE,QAAQ,QAAQ,IAAI;IAC3D,OAAA,WAAA,GACE,OAAA,aAAA,CAACR,iCAAAA,EAAAA;QACCU,OAAO;YACL,GAAGC,sBAAsB,CAACF,mBAAmB;YAC7CG,YAAY,CAAC,UAAU,EAAEX,sBAAAA,CAAUY,cAAc,CAAC,GAAG,EAAEX,mBAAAA,CAAOY,gBAAgB,EAAE;QAClF;;AAGN,GAAG;AACHV,gBAAgBW,WAAW,GAAG;AAE9B,MAAMJ,yBAAyB;IAC7B,IAAI;QAAEK,WAAW,CAAC,aAAa,CAAC;IAAC;IACjC,GAAG;QAAEA,WAAW,CAAC,YAAY,CAAC;IAAC;IAC/B,KAAK;QAAEA,WAAW,CAAC,cAAc,CAAC;IAAC;AACrC"}

View File

@@ -0,0 +1,24 @@
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "TreeItemLayout", {
enumerable: true,
get: function() {
return TreeItemLayout;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const _useTreeItemLayout = require("./useTreeItemLayout");
const _renderTreeItemLayout = require("./renderTreeItemLayout");
const _useTreeItemLayoutStylesstyles = require("./useTreeItemLayoutStyles.styles");
const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
const TreeItemLayout = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
const state = (0, _useTreeItemLayout.useTreeItemLayout_unstable)(props, ref);
(0, _useTreeItemLayoutStylesstyles.useTreeItemLayoutStyles_unstable)(state);
(0, _reactsharedcontexts.useCustomStyleHook_unstable)('useTreeItemLayoutStyles_unstable')(state);
return (0, _renderTreeItemLayout.renderTreeItemLayout_unstable)(state);
});
TreeItemLayout.displayName = 'TreeItemLayout';

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/TreeItemLayout/TreeItemLayout.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useTreeItemLayout_unstable } from './useTreeItemLayout';\nimport { renderTreeItemLayout_unstable } from './renderTreeItemLayout';\nimport { useTreeItemLayoutStyles_unstable } from './useTreeItemLayoutStyles.styles';\nimport type { TreeItemLayoutProps } from './TreeItemLayout.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * The `TreeItemLayout` component is used as a child of `TreeItem` to define the content and layout of a tree item.\n * It provides a consistent visual structure for tree items in a `Tree` component.\n * This component should only be used as a direct child of `TreeItem`.\n */\nexport const TreeItemLayout: ForwardRefComponent<TreeItemLayoutProps> = React.forwardRef((props, ref) => {\n const state = useTreeItemLayout_unstable(props, ref);\n\n useTreeItemLayoutStyles_unstable(state);\n useCustomStyleHook_unstable('useTreeItemLayoutStyles_unstable')(state);\n\n return renderTreeItemLayout_unstable(state);\n});\n\nTreeItemLayout.displayName = 'TreeItemLayout';\n"],"names":["React","useTreeItemLayout_unstable","renderTreeItemLayout_unstable","useTreeItemLayoutStyles_unstable","useCustomStyleHook_unstable","TreeItemLayout","forwardRef","props","ref","state","displayName"],"mappings":"AAAA;;;;;;;;;;;;iEAEuB,QAAQ;mCACY,sBAAsB;sCACnB,yBAAyB;+CACtB,mCAAmC;qCAGxC,kCAAkC;AAOvE,MAAMK,iBAAAA,WAAAA,GAA2DL,OAAMM,UAAU,CAAC,CAACC,OAAOC;IAC/F,MAAMC,YAAQR,6CAAAA,EAA2BM,OAAOC;QAEhDL,+DAAAA,EAAiCM;QACjCL,gDAAAA,EAA4B,oCAAoCK;IAEhE,WAAOP,mDAAAA,EAA8BO;AACvC,GAAG;AAEHJ,eAAeK,WAAW,GAAG"}

View File

@@ -0,0 +1,6 @@
/**
* State used in rendering TreeItemLayout
*/ "use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/TreeItemLayout/TreeItemLayout.types.ts"],"sourcesContent":["import type * as React from 'react';\nimport type {\n Slot,\n ComponentProps,\n ComponentState,\n ExtractSlotProps,\n EventData,\n EventHandler,\n} from '@fluentui/react-utilities';\nimport { ButtonContextValue } from '@fluentui/react-button';\nimport { Checkbox } from '@fluentui/react-checkbox';\nimport { Radio } from '@fluentui/react-radio';\n\nexport type TreeItemLayoutActionVisibilityChangeData = (\n | EventData<'mouseover' | 'mouseout', MouseEvent>\n | EventData<'focus' | 'blur', FocusEvent>\n | EventData<'blur', React.FocusEvent>\n) & { visible: boolean };\n\nexport type TreeItemLayoutActionSlotProps = ExtractSlotProps<\n Slot<'div'> & {\n /**\n * Forces visibility of the aside/action content\n */\n visible?: boolean;\n onVisibilityChange?: EventHandler<TreeItemLayoutActionVisibilityChangeData>;\n }\n>;\n\nexport type TreeItemLayoutSlots = {\n root: Slot<'div'>;\n /**\n * Content. Children of the root slot are automatically rendered here\n */\n main: NonNullable<Slot<'div'>>;\n /**\n * Icon slot that renders right before main content\n */\n iconBefore?: Slot<'div'>;\n /**\n * Icon slot that renders right after main content\n */\n iconAfter?: Slot<'div'>;\n /**\n * Expand icon slot,\n * by default renders a chevron icon to indicate opening and closing\n */\n expandIcon?: Slot<'div'>;\n /**\n * Aside content is normally used to render a badge or other non-actionable content\n */\n aside?: Slot<'div'>;\n /**\n * Actionable elements are normally buttons, menus, or other focusable elements.\n * Those elements are only visibly available if the given tree item is currently active.\n *\n * `actions` and `aside` slots are positioned on the exact same spot,\n * so they won't be visible at the same time.\n * `aside` slot is visible by default meanwhile `actions` slot are only visible when the tree item is active.\n *\n * `actions` slot supports a `visible` prop to force visibility of the actions.\n */\n actions?: Slot<TreeItemLayoutActionSlotProps>;\n selector?: Slot<typeof Checkbox> | Slot<typeof Radio>;\n};\n\n/**\n * TreeItemLayout Props\n */\nexport type TreeItemLayoutProps = ComponentProps<Partial<TreeItemLayoutSlots>>;\n\n/**\n * State used in rendering TreeItemLayout\n */\nexport type TreeItemLayoutState = ComponentState<TreeItemLayoutSlots> & {\n buttonContextValue: ButtonContextValue;\n};\n"],"names":[],"mappings":"AAuEA;;CAEC,GACD,WAEE"}

View File

@@ -0,0 +1,31 @@
"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, {
TreeItemLayout: function() {
return _TreeItemLayout.TreeItemLayout;
},
renderTreeItemLayout_unstable: function() {
return _renderTreeItemLayout.renderTreeItemLayout_unstable;
},
treeItemLayoutClassNames: function() {
return _useTreeItemLayoutStylesstyles.treeItemLayoutClassNames;
},
useTreeItemLayoutStyles_unstable: function() {
return _useTreeItemLayoutStylesstyles.useTreeItemLayoutStyles_unstable;
},
useTreeItemLayout_unstable: function() {
return _useTreeItemLayout.useTreeItemLayout_unstable;
}
});
const _TreeItemLayout = require("./TreeItemLayout");
const _renderTreeItemLayout = require("./renderTreeItemLayout");
const _useTreeItemLayout = require("./useTreeItemLayout");
const _useTreeItemLayoutStylesstyles = require("./useTreeItemLayoutStyles.styles");

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/TreeItemLayout/index.ts"],"sourcesContent":["export { TreeItemLayout } from './TreeItemLayout';\nexport type {\n TreeItemLayoutActionSlotProps,\n TreeItemLayoutActionVisibilityChangeData,\n TreeItemLayoutProps,\n TreeItemLayoutSlots,\n TreeItemLayoutState,\n} from './TreeItemLayout.types';\nexport { renderTreeItemLayout_unstable } from './renderTreeItemLayout';\nexport { useTreeItemLayout_unstable } from './useTreeItemLayout';\nexport { treeItemLayoutClassNames, useTreeItemLayoutStyles_unstable } from './useTreeItemLayoutStyles.styles';\n"],"names":["TreeItemLayout","renderTreeItemLayout_unstable","useTreeItemLayout_unstable","treeItemLayoutClassNames","useTreeItemLayoutStyles_unstable"],"mappings":";;;;;;;;;;;;eAASA,8BAAc;;;eAQdC,mDAA6B;;;eAE7BE,uDAAwB;;;eAAEC,+DAAgC;;;eAD1DF,6CAA0B;;;gCATJ,mBAAmB;sCAQJ,yBAAyB;mCAC5B,sBAAsB;+CACU,mCAAmC"}

View File

@@ -0,0 +1,34 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "renderTreeItemLayout_unstable", {
enumerable: true,
get: function() {
return renderTreeItemLayout_unstable;
}
});
const _jsxruntime = require("@fluentui/react-jsx-runtime/jsx-runtime");
const _reactutilities = require("@fluentui/react-utilities");
const _reactbutton = require("@fluentui/react-button");
const renderTreeItemLayout_unstable = (state)=>{
(0, _reactutilities.assertSlots)(state);
return /*#__PURE__*/ (0, _jsxruntime.jsxs)(state.root, {
children: [
state.expandIcon && /*#__PURE__*/ (0, _jsxruntime.jsx)(state.expandIcon, {}),
state.selector && /*#__PURE__*/ (0, _jsxruntime.jsx)(state.selector, {}),
state.iconBefore && /*#__PURE__*/ (0, _jsxruntime.jsx)(state.iconBefore, {}),
/*#__PURE__*/ (0, _jsxruntime.jsx)(state.main, {
children: state.root.children
}),
state.iconAfter && /*#__PURE__*/ (0, _jsxruntime.jsx)(state.iconAfter, {}),
/*#__PURE__*/ (0, _jsxruntime.jsxs)(_reactbutton.ButtonContextProvider, {
value: state.buttonContextValue,
children: [
state.actions && /*#__PURE__*/ (0, _jsxruntime.jsx)(state.actions, {}),
state.aside && /*#__PURE__*/ (0, _jsxruntime.jsx)(state.aside, {})
]
})
]
});
};

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/TreeItemLayout/renderTreeItemLayout.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport type { TreeItemLayoutState, TreeItemLayoutSlots } from './TreeItemLayout.types';\nimport { ButtonContextProvider } from '@fluentui/react-button';\n\n/**\n * Render the final JSX of TreeItemLayout\n */\nexport const renderTreeItemLayout_unstable = (state: TreeItemLayoutState): JSXElement => {\n assertSlots<TreeItemLayoutSlots>(state);\n\n return (\n <state.root>\n {state.expandIcon && <state.expandIcon />}\n {state.selector && <state.selector />}\n {state.iconBefore && <state.iconBefore />}\n <state.main>{state.root.children}</state.main>\n {state.iconAfter && <state.iconAfter />}\n <ButtonContextProvider value={state.buttonContextValue}>\n {state.actions && <state.actions />}\n {state.aside && <state.aside />}\n </ButtonContextProvider>\n </state.root>\n );\n};\n"],"names":["assertSlots","ButtonContextProvider","renderTreeItemLayout_unstable","state","root","expandIcon","selector","iconBefore","main","children","iconAfter","value","buttonContextValue","actions","aside"],"mappings":";;;;+BAUaE;;;;;;4BATb,iCAAiD;gCACrB,4BAA4B;6BAGlB,yBAAyB;AAKxD,sCAAsC,CAACC;QAC5CH,2BAAAA,EAAiCG;IAEjC,OAAA,WAAA,OACE,gBAAA,EAACA,MAAMC,IAAI,EAAA;;YACRD,MAAME,UAAU,IAAA,WAAA,OAAI,eAAA,EAACF,MAAME,UAAU,EAAA,CAAA;YACrCF,MAAMG,QAAQ,IAAA,WAAA,GAAI,mBAAA,EAACH,MAAMG,QAAQ,EAAA,CAAA;YACjCH,MAAMI,UAAU,IAAA,WAAA,OAAI,eAAA,EAACJ,MAAMI,UAAU,EAAA,CAAA;8BACtC,eAAA,EAACJ,MAAMK,IAAI,EAAA;0BAAEL,MAAMC,IAAI,CAACK,QAAQ;;YAC/BN,MAAMO,SAAS,IAAA,WAAA,OAAI,eAAA,EAACP,MAAMO,SAAS,EAAA,CAAA;8BACpC,gBAAA,EAACT,kCAAAA,EAAAA;gBAAsBU,OAAOR,MAAMS,kBAAkB;;oBACnDT,MAAMU,OAAO,IAAA,WAAA,OAAI,eAAA,EAACV,MAAMU,OAAO,EAAA,CAAA;oBAC/BV,MAAMW,KAAK,IAAA,WAAA,OAAI,eAAA,EAACX,MAAMW,KAAK,EAAA,CAAA;;;;;AAIpC,EAAE"}

View File

@@ -0,0 +1,244 @@
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "useTreeItemLayout_unstable", {
enumerable: true,
get: function() {
return useTreeItemLayout_unstable;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const _reactutilities = require("@fluentui/react-utilities");
const _contexts = require("../../contexts");
const _reactcheckbox = require("@fluentui/react-checkbox");
const _reactradio = require("@fluentui/react-radio");
const _TreeItemChevron = require("../TreeItemChevron");
const _reacttabster = require("@fluentui/react-tabster");
const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
const useTreeItemLayout_unstable = (props, ref)=>{
'use no memo';
const { main, iconAfter, iconBefore } = props;
const layoutRef = (0, _contexts.useTreeItemContext_unstable)((ctx)=>ctx.layoutRef);
const selectionMode = (0, _contexts.useTreeContext_unstable)((ctx)=>ctx.selectionMode);
const navigationMode = (0, _contexts.useTreeContext_unstable)((ctx)=>{
var _ctx_navigationMode;
return (_ctx_navigationMode = ctx.navigationMode) !== null && _ctx_navigationMode !== void 0 ? _ctx_navigationMode : 'tree';
});
const [isActionsVisibleFromProps, onActionVisibilityChange] = (0, _reactutilities.isResolvedShorthand)(props.actions) ? [
props.actions.visible,
props.actions.onVisibilityChange
] : [
undefined,
undefined
];
const [isActionsVisible, setIsActionsVisible] = (0, _reactutilities.useControllableState)({
state: isActionsVisibleFromProps,
initialState: false
});
const selectionRef = (0, _contexts.useTreeItemContext_unstable)((ctx)=>ctx.selectionRef);
const expandIconRef = (0, _contexts.useTreeItemContext_unstable)((ctx)=>ctx.expandIconRef);
const actionsRef = (0, _contexts.useTreeItemContext_unstable)((ctx)=>ctx.actionsRef);
const actionsRefInternal = _react.useRef(null);
const treeItemRef = (0, _contexts.useTreeItemContext_unstable)((ctx)=>ctx.treeItemRef);
const subtreeRef = (0, _contexts.useTreeItemContext_unstable)((ctx)=>ctx.subtreeRef);
const checked = (0, _contexts.useTreeItemContext_unstable)((ctx)=>ctx.checked);
const isBranch = (0, _contexts.useTreeItemContext_unstable)((ctx)=>ctx.itemType === 'branch');
// FIXME: Asserting is required here, as converting this to RefObject on context type would be a breaking change
assertIsRefObject(treeItemRef);
// FIXME: Asserting is required here, as converting this to RefObject on context type would be a breaking change
assertIsRefObject(subtreeRef);
const setActionsVisibleIfNotFromSubtree = _react.useCallback((event)=>{
const isTargetFromSubtree = Boolean(subtreeRef.current && (0, _reactutilities.elementContains)(subtreeRef.current, event.target));
if (!isTargetFromSubtree) {
onActionVisibilityChange === null || onActionVisibilityChange === void 0 ? void 0 : onActionVisibilityChange(event, {
visible: true,
event,
type: event.type
});
if (event.defaultPrevented) {
return;
}
setIsActionsVisible(true);
}
}, [
subtreeRef,
setIsActionsVisible,
onActionVisibilityChange
]);
const { targetDocument } = (0, _reactsharedcontexts.useFluent_unstable)();
const isNavigatingWithKeyboard = (0, _reacttabster.useIsNavigatingWithKeyboard)();
const setActionsInvisibleIfNotFromSubtree = _react.useCallback((event)=>{
const isRelatedTargetFromActions = ()=>Boolean(actionsRefInternal.current && (0, _reactutilities.elementContains)(actionsRefInternal.current, event.relatedTarget));
const isRelatedTargetFromTreeItem = ()=>Boolean(treeItemRef.current && (0, _reactutilities.elementContains)(treeItemRef.current, event.relatedTarget));
const isTargetFromActions = ()=>{
var _actionsRefInternal_current;
return Boolean((_actionsRefInternal_current = actionsRefInternal.current) === null || _actionsRefInternal_current === void 0 ? void 0 : _actionsRefInternal_current.contains(event.target));
};
if (isRelatedTargetFromActions()) {
onActionVisibilityChange === null || onActionVisibilityChange === void 0 ? void 0 : onActionVisibilityChange(event, {
visible: true,
event,
type: event.type
});
if (event.defaultPrevented) {
return;
}
setIsActionsVisible(true);
return;
}
if (isTargetFromActions() && isRelatedTargetFromTreeItem()) {
return;
}
// when a mouseout event happens during keyboard interaction
// we should not hide the actions if the activeElement is the treeitem or an action
// as the focus on the treeitem takes precedence over the mouseout event
if (event.type === 'mouseout' && isNavigatingWithKeyboard() && ((targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.activeElement) === treeItemRef.current || (0, _reactutilities.elementContains)(actionsRefInternal.current, targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.activeElement))) {
return;
}
onActionVisibilityChange === null || onActionVisibilityChange === void 0 ? void 0 : onActionVisibilityChange(event, {
visible: false,
event,
type: event.type
});
if (event.defaultPrevented) {
return;
}
setIsActionsVisible(false);
}, [
setIsActionsVisible,
onActionVisibilityChange,
treeItemRef,
isNavigatingWithKeyboard,
targetDocument
]);
const expandIcon = _reactutilities.slot.optional(props.expandIcon, {
renderByDefault: isBranch,
defaultProps: {
children: /*#__PURE__*/ _react.createElement(_TreeItemChevron.TreeItemChevron, null),
'aria-hidden': true
},
elementType: 'div'
});
const expandIconRefs = (0, _reactutilities.useMergedRefs)(expandIcon === null || expandIcon === void 0 ? void 0 : expandIcon.ref, expandIconRef);
if (expandIcon) {
expandIcon.ref = expandIconRefs;
}
const arrowNavigationProps = (0, _reacttabster.useArrowNavigationGroup)({
circular: navigationMode === 'tree',
axis: 'horizontal'
});
const actions = isActionsVisible ? _reactutilities.slot.optional(props.actions, {
defaultProps: {
...arrowNavigationProps,
role: 'toolbar'
},
elementType: 'div'
}) : undefined;
actions === null || actions === void 0 ? true : delete actions.visible;
actions === null || actions === void 0 ? true : delete actions.onVisibilityChange;
const actionsRefs = (0, _reactutilities.useMergedRefs)(actions === null || actions === void 0 ? void 0 : actions.ref, actionsRef, actionsRefInternal);
const handleActionsBlur = (0, _reactutilities.useEventCallback)((event)=>{
if ((0, _reactutilities.isResolvedShorthand)(props.actions)) {
var _props_actions_onBlur, _props_actions;
(_props_actions_onBlur = (_props_actions = props.actions).onBlur) === null || _props_actions_onBlur === void 0 ? void 0 : _props_actions_onBlur.call(_props_actions, event);
}
const isRelatedTargetFromActions = Boolean((0, _reactutilities.elementContains)(event.currentTarget, event.relatedTarget));
onActionVisibilityChange === null || onActionVisibilityChange === void 0 ? void 0 : onActionVisibilityChange(event, {
visible: isRelatedTargetFromActions,
event,
type: event.type
});
setIsActionsVisible(isRelatedTargetFromActions);
});
if (actions) {
actions.ref = actionsRefs;
actions.onBlur = handleActionsBlur;
}
const hasActions = Boolean(props.actions);
_react.useEffect(()=>{
if (treeItemRef.current && hasActions) {
const treeItemElement = treeItemRef.current;
const handleMouseOver = setActionsVisibleIfNotFromSubtree;
const handleMouseOut = setActionsInvisibleIfNotFromSubtree;
const handleFocus = setActionsVisibleIfNotFromSubtree;
const handleBlur = setActionsInvisibleIfNotFromSubtree;
treeItemElement.addEventListener('mouseover', handleMouseOver);
treeItemElement.addEventListener('mouseout', handleMouseOut);
treeItemElement.addEventListener('focus', handleFocus);
treeItemElement.addEventListener('blur', handleBlur);
return ()=>{
treeItemElement.removeEventListener('mouseover', handleMouseOver);
treeItemElement.removeEventListener('mouseout', handleMouseOut);
treeItemElement.removeEventListener('focus', handleFocus);
treeItemElement.removeEventListener('blur', handleBlur);
};
}
}, [
hasActions,
treeItemRef,
setActionsVisibleIfNotFromSubtree,
setActionsInvisibleIfNotFromSubtree
]);
return {
components: {
root: 'div',
expandIcon: 'div',
iconBefore: 'div',
main: 'div',
iconAfter: 'div',
actions: 'div',
aside: 'div',
// Casting here to a union between checkbox and radio
selector: selectionMode === 'multiselect' ? _reactcheckbox.Checkbox : _reactradio.Radio
},
buttonContextValue: {
size: 'small'
},
root: _reactutilities.slot.always((0, _reactutilities.getIntrinsicElementProps)('div', {
...props,
// FIXME:
// `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`
// but since it would be a breaking change to fix it, we are casting ref to it's proper type
ref: (0, _reactutilities.useMergedRefs)(ref, layoutRef)
}), {
elementType: 'div'
}),
iconBefore: _reactutilities.slot.optional(iconBefore, {
elementType: 'div'
}),
main: _reactutilities.slot.always(main, {
elementType: 'div'
}),
iconAfter: _reactutilities.slot.optional(iconAfter, {
elementType: 'div'
}),
aside: !isActionsVisible ? _reactutilities.slot.optional(props.aside, {
elementType: 'div'
}) : undefined,
actions,
expandIcon,
selector: _reactutilities.slot.optional(props.selector, {
renderByDefault: selectionMode !== 'none',
defaultProps: {
checked,
tabIndex: -1,
'aria-hidden': true,
ref: selectionRef
},
elementType: selectionMode === 'multiselect' ? _reactcheckbox.Checkbox : _reactradio.Radio
})
};
};
function assertIsRefObject(ref) {
if (process.env.NODE_ENV !== 'production') {
if (typeof ref !== 'object' || ref === null || !('current' in ref)) {
throw new Error(`
@fluentui/react-tree [${useTreeItemLayout_unstable.name}]:
Internal Error: contextual ref is not a RefObject! Please report this bug immediately, as contextual refs should be RefObjects.
`);
}
}
}

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,207 @@
'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, {
treeItemLayoutClassNames: function() {
return treeItemLayoutClassNames;
},
useTreeItemLayoutStyles_unstable: function() {
return useTreeItemLayoutStyles_unstable;
}
});
const _react = require("@griffel/react");
const _treeContext = require("../../contexts/treeContext");
const _treeItemContext = require("../../contexts/treeItemContext");
const treeItemLayoutClassNames = {
root: 'fui-TreeItemLayout',
iconBefore: 'fui-TreeItemLayout__iconBefore',
main: 'fui-TreeItemLayout__main',
iconAfter: 'fui-TreeItemLayout__iconAfter',
expandIcon: 'fui-TreeItemLayout__expandIcon',
aside: 'fui-TreeItemLayout__aside',
actions: 'fui-TreeItemLayout__actions',
selector: 'fui-TreeItemLayout__selector'
};
const useRootBaseStyles = /*#__PURE__*/ (0, _react.__resetStyles)("ryb8khq", null, [
".ryb8khq{display:flex;align-items:center;min-height:32px;box-sizing:border-box;grid-area:layout;}",
".ryb8khq:hover{color:var(--colorNeutralForeground2Hover);background-color:var(--colorSubtleBackgroundHover);}",
".ryb8khq:hover .fui-TreeItemLayout__expandIcon{color:var(--colorNeutralForeground3Hover);}",
".ryb8khq:active{color:var(--colorNeutralForeground2Pressed);background-color:var(--colorSubtleBackgroundPressed);}",
".ryb8khq:active .fui-TreeItemLayout__expandIcon{color:var(--colorNeutralForeground3Pressed);}"
]);
/**
* Styles for the root slot
*/ const useRootStyles = /*#__PURE__*/ (0, _react.__styles)({
leaf: {
uwmqm3: [
"f1k1erfc",
"faevyjx"
]
},
branch: {
uwmqm3: [
"fo100m9",
"f6yw3pu"
]
},
medium: {
Bahqtrf: "fk6fouc",
Be2twd7: "fkhj508",
Bhrd7zp: "figsok6",
Bg96gwp: "f1i3iumi"
},
small: {
sshi5w: "f1pha7fy",
Bahqtrf: "fk6fouc",
Be2twd7: "fy9rknc",
Bhrd7zp: "figsok6",
Bg96gwp: "fwrc4pm"
},
subtle: {},
"subtle-alpha": {
Jwef8y: "f146ro5n",
ecr2s2: "fkam630"
},
transparent: {
De3pzq: "f1c21dwh",
Jwef8y: "fjxutwb",
ecr2s2: "fophhak"
}
}, {
d: [
".f1k1erfc{padding-left:calc(var(--fluent-TreeItem--level, 1) * var(--spacingHorizontalXXL));}",
".faevyjx{padding-right:calc(var(--fluent-TreeItem--level, 1) * var(--spacingHorizontalXXL));}",
".fo100m9{padding-left:calc((var(--fluent-TreeItem--level, 1) - 1) * var(--spacingHorizontalXXL));}",
".f6yw3pu{padding-right:calc((var(--fluent-TreeItem--level, 1) - 1) * var(--spacingHorizontalXXL));}",
".fk6fouc{font-family:var(--fontFamilyBase);}",
".fkhj508{font-size:var(--fontSizeBase300);}",
".figsok6{font-weight:var(--fontWeightRegular);}",
".f1i3iumi{line-height:var(--lineHeightBase300);}",
".f1pha7fy{min-height:24px;}",
".fy9rknc{font-size:var(--fontSizeBase200);}",
".fwrc4pm{line-height:var(--lineHeightBase200);}",
".f1c21dwh{background-color:var(--colorTransparentBackground);}"
],
h: [
".f146ro5n:hover{background-color:var(--colorSubtleBackgroundLightAlphaHover);}",
".fjxutwb:hover{background-color:var(--colorTransparentBackgroundHover);}"
],
a: [
".fkam630:active{background-color:var(--colorSubtleBackgroundLightAlphaPressed);}",
".fophhak:active{background-color:var(--colorTransparentBackgroundPressed);}"
]
});
/**
* Styles for the action icon slot
*/ const useActionsBaseStyles = /*#__PURE__*/ (0, _react.__resetStyles)("rzvs2in", "r17h8a29", [
".rzvs2in{display:flex;margin-left:auto;position:relative;z-index:1;grid-area:aside;padding:0 var(--spacingHorizontalS);}",
".r17h8a29{display:flex;margin-right:auto;position:relative;z-index:1;grid-area:aside;padding:0 var(--spacingHorizontalS);}"
]);
/**
* Styles for the action icon slot
*/ const useAsideBaseStyles = /*#__PURE__*/ (0, _react.__resetStyles)("r1825u21", "rezy0yk", [
".r1825u21{display:flex;margin-left:auto;align-items:center;z-index:0;grid-area:aside;padding:0 var(--spacingHorizontalM);gap:var(--spacingHorizontalXS);}",
".rezy0yk{display:flex;margin-right:auto;align-items:center;z-index:0;grid-area:aside;padding:0 var(--spacingHorizontalM);gap:var(--spacingHorizontalXS);}"
]);
/**
* Styles for the expand icon slot
*/ const useExpandIconBaseStyles = /*#__PURE__*/ (0, _react.__resetStyles)("rh4pu5o", null, [
".rh4pu5o{display:flex;align-items:center;justify-content:center;min-width:24px;box-sizing:border-box;color:var(--colorNeutralForeground3);flex:0 0 auto;padding:var(--spacingVerticalXS) 0;}"
]);
/**
* Styles for the content slot
*/ const useMainBaseStyles = /*#__PURE__*/ (0, _react.__resetStyles)("rklbe47", null, [
".rklbe47{padding:0 var(--spacingHorizontalXXS);}"
]);
/**
* Styles for the before/after icon slot
*/ const useIconBaseStyles = /*#__PURE__*/ (0, _react.__resetStyles)("rphzgg1", null, [
".rphzgg1{display:flex;align-items:center;color:var(--colorNeutralForeground2);line-height:var(--lineHeightBase500);font-size:var(--fontSizeBase500);}"
]);
const useIconBeforeStyles = /*#__PURE__*/ (0, _react.__styles)({
medium: {
z189sj: [
"f7x41pl",
"fruq291"
]
},
small: {
z189sj: [
"ffczdla",
"fgiv446"
]
}
}, {
d: [
".f7x41pl{padding-right:var(--spacingHorizontalXS);}",
".fruq291{padding-left:var(--spacingHorizontalXS);}",
".ffczdla{padding-right:var(--spacingHorizontalXXS);}",
".fgiv446{padding-left:var(--spacingHorizontalXXS);}"
]
});
const useIconAfterStyles = /*#__PURE__*/ (0, _react.__styles)({
medium: {
uwmqm3: [
"fruq291",
"f7x41pl"
]
},
small: {
uwmqm3: [
"fgiv446",
"ffczdla"
]
}
}, {
d: [
".fruq291{padding-left:var(--spacingHorizontalXS);}",
".f7x41pl{padding-right:var(--spacingHorizontalXS);}",
".fgiv446{padding-left:var(--spacingHorizontalXXS);}",
".ffczdla{padding-right:var(--spacingHorizontalXXS);}"
]
});
const useTreeItemLayoutStyles_unstable = (state)=>{
'use no memo';
const { main, iconAfter, iconBefore, expandIcon, root, aside, actions, selector } = state;
const rootStyles = useRootStyles();
const rootBaseStyles = useRootBaseStyles();
const actionsBaseStyles = useActionsBaseStyles();
const asideBaseStyles = useAsideBaseStyles();
const mainBaseStyles = useMainBaseStyles();
const expandIconBaseStyles = useExpandIconBaseStyles();
const iconBaseStyles = useIconBaseStyles();
const iconBeforeStyles = useIconBeforeStyles();
const iconAfterStyles = useIconAfterStyles();
const size = (0, _treeContext.useTreeContext_unstable)((ctx)=>ctx.size);
const appearance = (0, _treeContext.useTreeContext_unstable)((ctx)=>ctx.appearance);
const itemType = (0, _treeItemContext.useTreeItemContext_unstable)((ctx)=>ctx.itemType);
root.className = (0, _react.mergeClasses)(treeItemLayoutClassNames.root, rootBaseStyles, rootStyles[appearance], rootStyles[size], rootStyles[itemType], root.className);
main.className = (0, _react.mergeClasses)(treeItemLayoutClassNames.main, mainBaseStyles, main.className);
if (expandIcon) {
expandIcon.className = (0, _react.mergeClasses)(treeItemLayoutClassNames.expandIcon, expandIconBaseStyles, expandIcon.className);
}
if (iconBefore) {
iconBefore.className = (0, _react.mergeClasses)(treeItemLayoutClassNames.iconBefore, iconBaseStyles, iconBeforeStyles[size], iconBefore.className);
}
if (iconAfter) {
iconAfter.className = (0, _react.mergeClasses)(treeItemLayoutClassNames.iconAfter, iconBaseStyles, iconAfterStyles[size], iconAfter.className);
}
if (actions) {
actions.className = (0, _react.mergeClasses)(treeItemLayoutClassNames.actions, actionsBaseStyles, actions.className);
}
if (aside) {
aside.className = (0, _react.mergeClasses)(treeItemLayoutClassNames.aside, asideBaseStyles, aside.className);
}
if (selector) {
selector.className = (0, _react.mergeClasses)(treeItemLayoutClassNames.selector, selector.className);
}
return state;
};

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,193 @@
'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, {
treeItemLayoutClassNames: function() {
return treeItemLayoutClassNames;
},
useTreeItemLayoutStyles_unstable: function() {
return useTreeItemLayoutStyles_unstable;
}
});
const _react = require("@griffel/react");
const _reacttheme = require("@fluentui/react-theme");
const _treeContext = require("../../contexts/treeContext");
const _tokens = require("../../utils/tokens");
const _treeItemContext = require("../../contexts/treeItemContext");
const treeItemLayoutClassNames = {
root: 'fui-TreeItemLayout',
iconBefore: 'fui-TreeItemLayout__iconBefore',
main: 'fui-TreeItemLayout__main',
iconAfter: 'fui-TreeItemLayout__iconAfter',
expandIcon: 'fui-TreeItemLayout__expandIcon',
aside: 'fui-TreeItemLayout__aside',
actions: 'fui-TreeItemLayout__actions',
selector: 'fui-TreeItemLayout__selector'
};
const useRootBaseStyles = (0, _react.makeResetStyles)({
display: 'flex',
alignItems: 'center',
minHeight: '32px',
boxSizing: 'border-box',
gridArea: 'layout',
':hover': {
color: _reacttheme.tokens.colorNeutralForeground2Hover,
backgroundColor: _reacttheme.tokens.colorSubtleBackgroundHover,
// TODO: stop using treeItemLayoutClassNames.expandIcon for styling
[`& .${treeItemLayoutClassNames.expandIcon}`]: {
color: _reacttheme.tokens.colorNeutralForeground3Hover
}
},
':active': {
color: _reacttheme.tokens.colorNeutralForeground2Pressed,
backgroundColor: _reacttheme.tokens.colorSubtleBackgroundPressed,
// TODO: stop using treeItemLayoutClassNames.expandIcon for styling
[`& .${treeItemLayoutClassNames.expandIcon}`]: {
color: _reacttheme.tokens.colorNeutralForeground3Pressed
}
}
});
/**
* Styles for the root slot
*/ const useRootStyles = (0, _react.makeStyles)({
leaf: {
paddingLeft: `calc(var(${_tokens.treeItemLevelToken}, 1) * ${_reacttheme.tokens.spacingHorizontalXXL})`
},
branch: {
paddingLeft: `calc((var(${_tokens.treeItemLevelToken}, 1) - 1) * ${_reacttheme.tokens.spacingHorizontalXXL})`
},
medium: {
..._reacttheme.typographyStyles.body1
},
small: {
minHeight: '24px',
..._reacttheme.typographyStyles.caption1
},
// Appearance variations
subtle: {},
'subtle-alpha': {
':hover': {
backgroundColor: _reacttheme.tokens.colorSubtleBackgroundLightAlphaHover
},
':active': {
backgroundColor: _reacttheme.tokens.colorSubtleBackgroundLightAlphaPressed
}
},
transparent: {
backgroundColor: _reacttheme.tokens.colorTransparentBackground,
':hover': {
backgroundColor: _reacttheme.tokens.colorTransparentBackgroundHover
},
':active': {
backgroundColor: _reacttheme.tokens.colorTransparentBackgroundPressed
}
}
});
/**
* Styles for the action icon slot
*/ const useActionsBaseStyles = (0, _react.makeResetStyles)({
display: 'flex',
marginLeft: 'auto',
position: 'relative',
zIndex: 1,
gridArea: 'aside',
padding: `0 ${_reacttheme.tokens.spacingHorizontalS}`
});
/**
* Styles for the action icon slot
*/ const useAsideBaseStyles = (0, _react.makeResetStyles)({
display: 'flex',
marginLeft: 'auto',
alignItems: 'center',
zIndex: 0,
gridArea: 'aside',
padding: `0 ${_reacttheme.tokens.spacingHorizontalM}`,
gap: _reacttheme.tokens.spacingHorizontalXS
});
/**
* Styles for the expand icon slot
*/ const useExpandIconBaseStyles = (0, _react.makeResetStyles)({
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
minWidth: '24px',
boxSizing: 'border-box',
color: _reacttheme.tokens.colorNeutralForeground3,
flex: `0 0 auto`,
padding: `${_reacttheme.tokens.spacingVerticalXS} 0`
});
/**
* Styles for the content slot
*/ const useMainBaseStyles = (0, _react.makeResetStyles)({
padding: `0 ${_reacttheme.tokens.spacingHorizontalXXS}`
});
/**
* Styles for the before/after icon slot
*/ const useIconBaseStyles = (0, _react.makeResetStyles)({
display: 'flex',
alignItems: 'center',
color: _reacttheme.tokens.colorNeutralForeground2,
lineHeight: _reacttheme.tokens.lineHeightBase500,
fontSize: _reacttheme.tokens.fontSizeBase500
});
const useIconBeforeStyles = (0, _react.makeStyles)({
medium: {
paddingRight: _reacttheme.tokens.spacingHorizontalXS
},
small: {
paddingRight: _reacttheme.tokens.spacingHorizontalXXS
}
});
const useIconAfterStyles = (0, _react.makeStyles)({
medium: {
paddingLeft: _reacttheme.tokens.spacingHorizontalXS
},
small: {
paddingLeft: _reacttheme.tokens.spacingHorizontalXXS
}
});
const useTreeItemLayoutStyles_unstable = (state)=>{
'use no memo';
const { main, iconAfter, iconBefore, expandIcon, root, aside, actions, selector } = state;
const rootStyles = useRootStyles();
const rootBaseStyles = useRootBaseStyles();
const actionsBaseStyles = useActionsBaseStyles();
const asideBaseStyles = useAsideBaseStyles();
const mainBaseStyles = useMainBaseStyles();
const expandIconBaseStyles = useExpandIconBaseStyles();
const iconBaseStyles = useIconBaseStyles();
const iconBeforeStyles = useIconBeforeStyles();
const iconAfterStyles = useIconAfterStyles();
const size = (0, _treeContext.useTreeContext_unstable)((ctx)=>ctx.size);
const appearance = (0, _treeContext.useTreeContext_unstable)((ctx)=>ctx.appearance);
const itemType = (0, _treeItemContext.useTreeItemContext_unstable)((ctx)=>ctx.itemType);
root.className = (0, _react.mergeClasses)(treeItemLayoutClassNames.root, rootBaseStyles, rootStyles[appearance], rootStyles[size], rootStyles[itemType], root.className);
main.className = (0, _react.mergeClasses)(treeItemLayoutClassNames.main, mainBaseStyles, main.className);
if (expandIcon) {
expandIcon.className = (0, _react.mergeClasses)(treeItemLayoutClassNames.expandIcon, expandIconBaseStyles, expandIcon.className);
}
if (iconBefore) {
iconBefore.className = (0, _react.mergeClasses)(treeItemLayoutClassNames.iconBefore, iconBaseStyles, iconBeforeStyles[size], iconBefore.className);
}
if (iconAfter) {
iconAfter.className = (0, _react.mergeClasses)(treeItemLayoutClassNames.iconAfter, iconBaseStyles, iconAfterStyles[size], iconAfter.className);
}
if (actions) {
actions.className = (0, _react.mergeClasses)(treeItemLayoutClassNames.actions, actionsBaseStyles, actions.className);
}
if (aside) {
aside.className = (0, _react.mergeClasses)(treeItemLayoutClassNames.aside, asideBaseStyles, aside.className);
}
if (selector) {
selector.className = (0, _react.mergeClasses)(treeItemLayoutClassNames.selector, selector.className);
}
return state;
};

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,26 @@
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "TreeItemPersonaLayout", {
enumerable: true,
get: function() {
return TreeItemPersonaLayout;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const _useTreeItemPersonaLayout = require("./useTreeItemPersonaLayout");
const _renderTreeItemPersonaLayout = require("./renderTreeItemPersonaLayout");
const _useTreeItemPersonaLayoutStylesstyles = require("./useTreeItemPersonaLayoutStyles.styles");
const _useTreeItemPersonaLayoutContextValues = require("./useTreeItemPersonaLayoutContextValues");
const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
const TreeItemPersonaLayout = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
const state = (0, _useTreeItemPersonaLayout.useTreeItemPersonaLayout_unstable)(props, ref);
(0, _useTreeItemPersonaLayoutStylesstyles.useTreeItemPersonaLayoutStyles_unstable)(state);
(0, _reactsharedcontexts.useCustomStyleHook_unstable)('useTreeItemPersonaLayoutStyles_unstable')(state);
const contextValues = (0, _useTreeItemPersonaLayoutContextValues.useTreeItemPersonaLayoutContextValues_unstable)(state);
return (0, _renderTreeItemPersonaLayout.renderTreeItemPersonaLayout_unstable)(state, contextValues);
});
TreeItemPersonaLayout.displayName = 'TreeItemPersonaLayout';

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/TreeItemPersonaLayout/TreeItemPersonaLayout.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useTreeItemPersonaLayout_unstable } from './useTreeItemPersonaLayout';\nimport { renderTreeItemPersonaLayout_unstable } from './renderTreeItemPersonaLayout';\nimport { useTreeItemPersonaLayoutStyles_unstable } from './useTreeItemPersonaLayoutStyles.styles';\nimport type { TreeItemPersonaLayoutProps } from './TreeItemPersonaLayout.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useTreeItemPersonaLayoutContextValues_unstable } from './useTreeItemPersonaLayoutContextValues';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * The `TreeItemPersonaLayout` component is used as a child of `TreeItem` to display a `TreeItem` with a media (typically an avatar) and a description.\n * It provides a more visually appealing representation of a `TreeItem` and is typically used to display a list of people or topics.\n * This component should only be used as a direct child of `TreeItem`.\n */\nexport const TreeItemPersonaLayout: ForwardRefComponent<TreeItemPersonaLayoutProps> = React.forwardRef((props, ref) => {\n const state = useTreeItemPersonaLayout_unstable(props, ref);\n\n useTreeItemPersonaLayoutStyles_unstable(state);\n useCustomStyleHook_unstable('useTreeItemPersonaLayoutStyles_unstable')(state);\n\n const contextValues = useTreeItemPersonaLayoutContextValues_unstable(state);\n\n return renderTreeItemPersonaLayout_unstable(state, contextValues);\n});\n\nTreeItemPersonaLayout.displayName = 'TreeItemPersonaLayout';\n"],"names":["React","useTreeItemPersonaLayout_unstable","renderTreeItemPersonaLayout_unstable","useTreeItemPersonaLayoutStyles_unstable","useTreeItemPersonaLayoutContextValues_unstable","useCustomStyleHook_unstable","TreeItemPersonaLayout","forwardRef","props","ref","state","contextValues","displayName"],"mappings":"AAAA;;;;;;;;;;;;iEAEuB,QAAQ;0CACmB,6BAA6B;6CAC1B,gCAAgC;sDAC7B,0CAA0C;uDAGnC,0CAA0C;qCAC7D,kCAAkC;AAOvE,MAAMM,wBAAAA,WAAAA,GAAyEN,OAAMO,UAAU,CAAC,CAACC,OAAOC;IAC7G,MAAMC,YAAQT,2DAAAA,EAAkCO,OAAOC;QAEvDN,6EAAAA,EAAwCO;QACxCL,gDAAAA,EAA4B,2CAA2CK;IAEvE,MAAMC,oBAAgBP,qFAAAA,EAA+CM;IAErE,WAAOR,iEAAAA,EAAqCQ,OAAOC;AACrD,GAAG;AAEHL,sBAAsBM,WAAW,GAAG"}

View File

@@ -0,0 +1,6 @@
/**
* State used in rendering TreeItemPersonaLayout
*/ "use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/TreeItemPersonaLayout/TreeItemPersonaLayout.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport type { AvatarContextValue, AvatarSize } from '@fluentui/react-avatar';\nimport { ButtonContextValue } from '@fluentui/react-button';\nimport { TreeItemLayoutSlots } from '../TreeItemLayout/TreeItemLayout.types';\n\nexport type TreeItemPersonaLayoutContextValues = {\n avatar: AvatarContextValue;\n};\n\nexport type TreeItemPersonaLayoutSlots = Pick<TreeItemLayoutSlots, 'actions' | 'aside' | 'expandIcon' | 'selector'> & {\n root: NonNullable<Slot<'div'>>;\n /**\n * Avatar to display.\n */\n media: NonNullable<Slot<'div'>>;\n /**\n * Content. Children of the root slot are automatically rendered here\n */\n main: NonNullable<Slot<'div'>>;\n /**\n * Secondary text that describes or complements the content\n */\n description?: Slot<'div'>;\n};\n\n/**\n * TreeItemPersonaLayout Props\n */\nexport type TreeItemPersonaLayoutProps = ComponentProps<Partial<TreeItemPersonaLayoutSlots>>;\n\n/**\n * State used in rendering TreeItemPersonaLayout\n */\nexport type TreeItemPersonaLayoutState = ComponentState<TreeItemPersonaLayoutSlots> & {\n avatarSize: AvatarSize;\n buttonContextValue: ButtonContextValue;\n};\n"],"names":[],"mappings":"AA8BA;;CAEC,GACD,WAGE"}

View File

@@ -0,0 +1,31 @@
"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, {
TreeItemPersonaLayout: function() {
return _TreeItemPersonaLayout.TreeItemPersonaLayout;
},
renderTreeItemPersonaLayout_unstable: function() {
return _renderTreeItemPersonaLayout.renderTreeItemPersonaLayout_unstable;
},
treeItemPersonaLayoutClassNames: function() {
return _useTreeItemPersonaLayoutStylesstyles.treeItemPersonaLayoutClassNames;
},
useTreeItemPersonaLayoutStyles_unstable: function() {
return _useTreeItemPersonaLayoutStylesstyles.useTreeItemPersonaLayoutStyles_unstable;
},
useTreeItemPersonaLayout_unstable: function() {
return _useTreeItemPersonaLayout.useTreeItemPersonaLayout_unstable;
}
});
const _TreeItemPersonaLayout = require("./TreeItemPersonaLayout");
const _renderTreeItemPersonaLayout = require("./renderTreeItemPersonaLayout");
const _useTreeItemPersonaLayout = require("./useTreeItemPersonaLayout");
const _useTreeItemPersonaLayoutStylesstyles = require("./useTreeItemPersonaLayoutStyles.styles");

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/TreeItemPersonaLayout/index.ts"],"sourcesContent":["export { TreeItemPersonaLayout } from './TreeItemPersonaLayout';\nexport type {\n TreeItemPersonaLayoutContextValues,\n TreeItemPersonaLayoutProps,\n TreeItemPersonaLayoutSlots,\n TreeItemPersonaLayoutState,\n} from './TreeItemPersonaLayout.types';\nexport { renderTreeItemPersonaLayout_unstable } from './renderTreeItemPersonaLayout';\nexport { useTreeItemPersonaLayout_unstable } from './useTreeItemPersonaLayout';\nexport {\n treeItemPersonaLayoutClassNames,\n useTreeItemPersonaLayoutStyles_unstable,\n} from './useTreeItemPersonaLayoutStyles.styles';\n"],"names":["TreeItemPersonaLayout","renderTreeItemPersonaLayout_unstable","useTreeItemPersonaLayout_unstable","treeItemPersonaLayoutClassNames","useTreeItemPersonaLayoutStyles_unstable"],"mappings":";;;;;;;;;;;;eAASA,4CAAqB;;;eAOrBC,iEAAoC;;;eAG3CE,qEAA+B;;;eAC/BC,6EAAuC;;;eAHhCF,2DAAiC;;;uCARJ,0BAA0B;6CAOX,gCAAgC;0CACnC,6BAA6B;sDAIxE,0CAA0C"}

View File

@@ -0,0 +1,36 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "renderTreeItemPersonaLayout_unstable", {
enumerable: true,
get: function() {
return renderTreeItemPersonaLayout_unstable;
}
});
const _jsxruntime = require("@fluentui/react-jsx-runtime/jsx-runtime");
const _reactutilities = require("@fluentui/react-utilities");
const _reactavatar = require("@fluentui/react-avatar");
const _reactbutton = require("@fluentui/react-button");
const renderTreeItemPersonaLayout_unstable = (state, contextValues)=>{
(0, _reactutilities.assertSlots)(state);
return /*#__PURE__*/ (0, _jsxruntime.jsxs)(state.root, {
children: [
state.expandIcon && /*#__PURE__*/ (0, _jsxruntime.jsx)(state.expandIcon, {}),
state.selector && /*#__PURE__*/ (0, _jsxruntime.jsx)(state.selector, {}),
/*#__PURE__*/ (0, _jsxruntime.jsx)(_reactavatar.AvatarContextProvider, {
value: contextValues.avatar,
children: /*#__PURE__*/ (0, _jsxruntime.jsx)(state.media, {})
}),
/*#__PURE__*/ (0, _jsxruntime.jsx)(state.main, {}),
state.description && /*#__PURE__*/ (0, _jsxruntime.jsx)(state.description, {}),
/*#__PURE__*/ (0, _jsxruntime.jsxs)(_reactbutton.ButtonContextProvider, {
value: state.buttonContextValue,
children: [
state.actions && /*#__PURE__*/ (0, _jsxruntime.jsx)(state.actions, {}),
state.aside && /*#__PURE__*/ (0, _jsxruntime.jsx)(state.aside, {})
]
})
]
});
};

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/TreeItemPersonaLayout/renderTreeItemPersonaLayout.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport type {\n TreeItemPersonaLayoutState,\n TreeItemPersonaLayoutContextValues,\n TreeItemPersonaLayoutSlots,\n} from './TreeItemPersonaLayout.types';\nimport { AvatarContextProvider } from '@fluentui/react-avatar';\nimport { ButtonContextProvider } from '@fluentui/react-button';\n\n/**\n * Render the final JSX of TreeItemPersonaLayout\n */\nexport const renderTreeItemPersonaLayout_unstable = (\n state: TreeItemPersonaLayoutState,\n contextValues: TreeItemPersonaLayoutContextValues,\n): JSXElement => {\n assertSlots<TreeItemPersonaLayoutSlots>(state);\n\n return (\n <state.root>\n {state.expandIcon && <state.expandIcon />}\n {state.selector && <state.selector />}\n <AvatarContextProvider value={contextValues.avatar}>\n <state.media />\n </AvatarContextProvider>\n <state.main />\n {state.description && <state.description />}\n <ButtonContextProvider value={state.buttonContextValue}>\n {state.actions && <state.actions />}\n {state.aside && <state.aside />}\n </ButtonContextProvider>\n </state.root>\n );\n};\n"],"names":["assertSlots","AvatarContextProvider","ButtonContextProvider","renderTreeItemPersonaLayout_unstable","state","contextValues","root","expandIcon","selector","value","avatar","media","main","description","buttonContextValue","actions","aside"],"mappings":";;;;+BAeaG;;;;;;4BAdb,iCAAiD;gCACrB,4BAA4B;6BAOlB,yBAAyB;6BACzB,yBAAyB;AAKxD,6CAA6C,CAClDC,OACAC;QAEAL,2BAAAA,EAAwCI;IAExC,OAAA,WAAA,OACE,gBAAA,EAACA,MAAME,IAAI,EAAA;;YACRF,MAAMG,UAAU,IAAA,WAAA,OAAI,eAAA,EAACH,MAAMG,UAAU,EAAA,CAAA;YACrCH,MAAMI,QAAQ,IAAA,WAAA,OAAI,eAAA,EAACJ,MAAMI,QAAQ,EAAA,CAAA;8BAClC,eAAA,EAACP,kCAAAA,EAAAA;gBAAsBQ,OAAOJ,cAAcK,MAAM;0BAChD,WAAA,OAAA,eAAA,EAACN,MAAMO,KAAK,EAAA,CAAA;;0BAEd,mBAAA,EAACP,MAAMQ,IAAI,EAAA,CAAA;YACVR,MAAMS,WAAW,IAAA,WAAA,OAAI,eAAA,EAACT,MAAMS,WAAW,EAAA,CAAA;8BACxC,gBAAA,EAACX,kCAAAA,EAAAA;gBAAsBO,OAAOL,MAAMU,kBAAkB;;oBACnDV,MAAMW,OAAO,IAAA,WAAA,OAAI,eAAA,EAACX,MAAMW,OAAO,EAAA,CAAA;oBAC/BX,MAAMY,KAAK,IAAA,WAAA,OAAI,eAAA,EAACZ,MAAMY,KAAK,EAAA,CAAA;;;;;AAIpC,EAAE"}

Some files were not shown because too many files have changed in this diff Show More