react-magma-dom 4.11.0-next.16 → 4.11.0-next.18

package/dist/components/TreeView/TreeItem.d.ts

@@ -2,4 +2,8 @@ import * as React from 'react';
 import { UseTreeItemProps } from './useTreeItem';
 export interface TreeItemProps extends UseTreeItemProps {
 }
-export declare const TreeItem: React.ForwardRefExoticComponent<TreeItemProps & React.RefAttributes<HTMLLIElement>>;
+/**
+ * Memoized TreeItem component
+ * Only re-renders when relevant props change, improving performance for large trees
+ */
+export declare const TreeItem: React.MemoExoticComponent<React.ForwardRefExoticComponent<TreeItemProps & React.RefAttributes<HTMLLIElement>>>;

package/dist/components/TreeView/TreeItemContext.d.ts

@@ -3,7 +3,6 @@ import { IndeterminateCheckboxStatus } from '../IndeterminateCheckbox';
 interface TreeItemContextInterface {
     itemId?: string;
     expanded: boolean;
-    setExpanded: React.Dispatch<React.SetStateAction<boolean>>;
     checkedStatus: IndeterminateCheckboxStatus;
     checkboxChangeHandler: (event: React.ChangeEvent<HTMLInputElement>) => void;
     hasOwnTreeItems: boolean;

package/dist/components/TreeView/TreeItemHierarchyContext.d.ts

@@ -0,0 +1,14 @@
+import * as React from 'react';
+/**
+ * Context for passing hierarchy information to TreeItems without cloneElement
+ * This reduces the overhead of React.cloneElement by providing depth and position
+ * information through context instead
+ */
+interface TreeItemHierarchyContextInterface {
+    depth: number;
+    parentDepth: number;
+    isTopLevel: boolean;
+    index: number;
+}
+export declare const TreeItemHierarchyContext: React.Context<TreeItemHierarchyContextInterface>;
+export {};

package/dist/components/TreeView/TreeView.d.ts

@@ -1,5 +1,20 @@
 import * as React from 'react';
 import { UseTreeViewProps } from './useTreeView';
 export interface TreeViewProps extends Omit<React.HTMLAttributes<HTMLUListElement>, 'children'>, UseTreeViewProps {
+    /**
+     * Enable virtualization for better performance with large trees.
+     * @default false
+     */
+    enableVirtualization?: boolean;
+    /**
+     * Estimated size of each tree item in pixels (used for virtualization).
+     * @default 40
+     */
+    estimateSize?: number;
+    /**
+     * Number of items to render above and below the visible area (overscan).
+     * @default 5
+     */
+    overscan?: number;
 }
 export declare const TreeView: React.ForwardRefExoticComponent<TreeViewProps & React.RefAttributes<HTMLUListElement>>;

package/dist/components/TreeView/TreeViewConfigContext.d.ts

@@ -0,0 +1,17 @@
+import * as React from 'react';
+import { TreeViewSelectable } from './types';
+export interface ExpandIconInterface {
+    size?: number;
+    color?: string;
+}
+export interface TreeViewConfigContextInterface {
+    hasIcons: boolean;
+    selectable: TreeViewSelectable;
+    checkParents: boolean;
+    checkChildren: boolean;
+    isTopLevelSelectable?: boolean;
+    expandIconStyles?: ExpandIconInterface;
+    registerTreeItem: (itemRefArray: React.MutableRefObject<React.MutableRefObject<Element>[]>, itemRef: React.MutableRefObject<Element>) => void;
+    treeItemRefArray?: React.MutableRefObject<React.MutableRefObject<Element>[]>;
+}
+export declare const TreeViewConfigContext: React.Context<TreeViewConfigContextInterface>;

package/dist/components/TreeView/TreeViewExpansionContext.d.ts

@@ -0,0 +1,8 @@
+import * as React from 'react';
+export interface TreeViewExpansionContextInterface {
+    expandedSet: Set<string>;
+    handleExpandedChange: (event: React.SyntheticEvent, expandedItemId: string) => void;
+    onExpandedChange?: (event: React.SyntheticEvent, expandedItems: Array<string>) => void;
+    initialExpandedItems: Array<string>;
+}
+export declare const TreeViewExpansionContext: React.Context<TreeViewExpansionContextInterface>;

package/dist/components/TreeView/TreeViewSelectionContext.d.ts

@@ -0,0 +1,25 @@
+import * as React from 'react';
+import { TreeViewSelectable } from './types';
+import { IndeterminateCheckboxStatus } from '../IndeterminateCheckbox';
+export interface TreeItemSelectedInterface {
+    itemId?: string;
+    checkedStatus: IndeterminateCheckboxStatus;
+    isDisabled?: boolean;
+}
+export interface TreeViewItemInterface {
+    itemId?: string;
+    parentId?: string | null;
+    icon?: React.ReactNode;
+    checkedStatus: IndeterminateCheckboxStatus;
+    hasOwnTreeItems: boolean;
+    isDisabled?: boolean;
+}
+export interface TreeViewSelectionContextInterface {
+    items: TreeViewItemInterface[];
+    selectedItems: Array<TreeItemSelectedInterface>;
+    selectItem: (data: Pick<TreeViewItemInterface, 'itemId' | 'checkedStatus'>) => void;
+    onSelectedItemChange?: (selectedItems: Array<TreeItemSelectedInterface>) => void;
+    selectable: TreeViewSelectable;
+    itemToFocus?: string;
+}
+export declare const TreeViewSelectionContext: React.Context<TreeViewSelectionContextInterface>;

package/dist/components/TreeView/index.d.ts

@@ -5,3 +5,6 @@ export * from './useTreeView';
 export * from './utils';
 export * from './types';
 export { TreeItemSelectedInterface, TreeViewApi } from './useTreeView';
+export * from './TreeViewSelectionContext';
+export * from './TreeViewExpansionContext';
+export * from './TreeViewConfigContext';

package/dist/components/TreeView/treeViewReducer.d.ts

@@ -0,0 +1,94 @@
+import { IndeterminateCheckboxStatus } from '../IndeterminateCheckbox';
+import { TreeViewItemInterface } from './TreeViewContext';
+/**
+ * TreeView State Shape
+ * Consolidates all state managed by the TreeView component
+ */
+export interface TreeViewState {
+    /** Array of all tree items with their metadata */
+    items: TreeViewItemInterface[];
+    /** Set of expanded item IDs for O(1) lookup */
+    expandedSet: Set<string>;
+    /** Flag indicating if items need to be updated (for showAll functionality) */
+    itemsNeedUpdate: boolean | null;
+}
+/**
+ * TreeView Action Types
+ * Defines all possible state mutations
+ */
+export declare type TreeViewAction = {
+    type: 'SELECT_ITEM';
+    payload: {
+        itemId: string;
+        checkedStatus?: IndeterminateCheckboxStatus;
+        selectable: string;
+        checkChildren: boolean;
+        checkParents: boolean;
+        isTopLevelSelectable: boolean;
+    };
+} | {
+    type: 'SELECT_ALL';
+    payload: {
+        checkChildren: boolean;
+        checkParents: boolean;
+        isTopLevelSelectable: boolean;
+    };
+} | {
+    type: 'CLEAR_ALL';
+    payload: {
+        checkChildren: boolean;
+        checkParents: boolean;
+        isTopLevelSelectable: boolean;
+    };
+} | {
+    type: 'TOGGLE_EXPAND';
+    payload: {
+        itemId: string | string[];
+    };
+} | {
+    type: 'EXPAND_ALL';
+    payload: {
+        expandableIds: string[];
+    };
+} | {
+    type: 'COLLAPSE_ALL';
+} | {
+    type: 'SET_ITEMS';
+    payload: {
+        items: TreeViewItemInterface[];
+    };
+} | {
+    type: 'ADD_ITEM';
+    payload: {
+        newItem: TreeViewItemInterface;
+        checkParents: boolean;
+        selectable: string;
+    };
+} | {
+    type: 'UPDATE_ITEMS_DISABLED_STATE';
+    payload: {
+        updatedItems: TreeViewItemInterface[];
+    };
+} | {
+    type: 'TRIGGER_ITEMS_UPDATE';
+} | {
+    type: 'COMPLETE_ITEMS_UPDATE';
+};
+/**
+ * TreeView Reducer
+ * Pure function that handles all state transitions
+ *
+ * State Transitions:
+ * - SELECT_ITEM: Updates item selection based on selectable mode (single/multi)
+ * - SELECT_ALL: Selects all items in multi-select mode
+ * - CLEAR_ALL: Clears all selections
+ * - TOGGLE_EXPAND: Toggles expansion state of one or more items
+ * - EXPAND_ALL: Expands all expandable items
+ * - COLLAPSE_ALL: Collapses all items
+ * - SET_ITEMS: Replaces entire items array (used for initialization and updates)
+ * - ADD_ITEM: Adds a new item to the tree
+ * - UPDATE_ITEMS_DISABLED_STATE: Updates disabled state of items
+ * - TRIGGER_ITEMS_UPDATE: Flags that items need updating (for showAll)
+ * - COMPLETE_ITEMS_UPDATE: Clears the update flag
+ */
+export declare function treeViewReducer(state: TreeViewState, action: TreeViewAction): TreeViewState;

package/dist/components/TreeView/useTreeItem.d.ts

@@ -15,6 +15,12 @@ export interface UseTreeItemProps extends React.HTMLAttributes<HTMLLIElement> {
      * Icon for the tree item
      */
     icon?: React.ReactElement<IconProps>;
+    /**
+     * Custom height for this item when virtualization is enabled.
+     * If not specified, the TreeView's estimateSize will be used.
+     * @default undefined (uses TreeView's estimateSize)
+     */
+    itemSize?: number;
     /**
      * If true, element is disabled
      * @default false
@@ -74,8 +80,7 @@ export declare function useTreeItem(props: UseTreeItemProps, forwardedRef: any):
         itemId: string;
         parentDepth: number;
         ref: (node: any) => void;
-        selectedItems: import("./TreeViewContext").TreeItemSelectedInterface[];
-        setExpanded: React.Dispatch<React.SetStateAction<boolean>>;
+        selectedItems: import("./TreeViewSelectionContext").TreeItemSelectedInterface[];
         treeItemChildren: (string | number | {} | React.ReactElement<any, string | ((props: any) => React.ReactElement<any, any>) | (new (props: any) => React.Component<any, any, any>)> | Iterable<React.ReactNode> | React.ReactPortal)[];
         isDisabled: boolean;
     };

package/dist/components/TreeView/useTreeView.d.ts

@@ -112,24 +112,29 @@ interface ExpandIconStylesProps {
     color?: string;
 }
 export declare function useTreeView(props: UseTreeViewProps): {
-    contextValue: {
-        hasIcons: any;
-        itemToFocus: any;
+    selectionContextValue: {
+        items: TreeViewItemInterface[];
+        selectedItems: TreeViewItemInterface[];
+        selectItem: ({ itemId, checkedStatus, }: Pick<TreeViewItemInterface, 'itemId'> & Partial<Pick<TreeViewItemInterface, 'checkedStatus'>>) => void;
         onSelectedItemChange: (selectedItems: TreeItemSelectedInterface[]) => void;
-        onExpandedChange: (event: React.SyntheticEvent<Element, Event>, expandedItems: string[]) => void;
         selectable: TreeViewSelectable;
-        selectedItems: any;
+        itemToFocus: string;
+    };
+    expansionContextValue: {
+        expandedSet: Set<string>;
+        handleExpandedChange: (event: React.SyntheticEvent, itemId: string | string[]) => void;
+        onExpandedChange: (event: React.SyntheticEvent<Element, Event>, expandedItems: string[]) => void;
         initialExpandedItems: any[];
-        treeItemRefArray: React.MutableRefObject<React.MutableRefObject<Element>[]>;
-        registerTreeItem: (refArray: React.MutableRefObject<React.MutableRefObject<Element>[]>, ref: React.MutableRefObject<Element>) => void;
-        checkChildren: boolean;
+    };
+    configContextValue: {
+        hasIcons: any;
+        selectable: TreeViewSelectable;
         checkParents: boolean;
-        items: any;
-        selectItem: ({ itemId, checkedStatus, }: Pick<TreeViewItemInterface, 'itemId'> & Partial<Pick<TreeViewItemInterface, 'checkedStatus'>>) => void;
-        handleExpandedChange: (event: React.SyntheticEvent, itemId: string | string[]) => void;
-        expandedSet: Set<string>;
-        expandIconStyles: ExpandIconStylesProps;
+        checkChildren: boolean;
         isTopLevelSelectable: boolean;
+        expandIconStyles: ExpandIconStylesProps;
+        registerTreeItem: (refArray: React.MutableRefObject<React.MutableRefObject<Element>[]>, ref: React.MutableRefObject<Element>) => void;
+        treeItemRefArray: React.MutableRefObject<React.MutableRefObject<Element>[]>;
     };
 };
 export declare type UseTreeViewReturn = ReturnType<typeof useTreeView>;

package/dist/components/TreeView/utils.d.ts

@@ -30,10 +30,11 @@ export declare function filterNullEntries(obj: any): {
 } | {
     current?: undefined;
 };
-export declare const getChildrenIds: ({ items, itemId, }: {
+export declare const getChildrenIds: ({ items, itemId, parentChildMap, }: {
     items: TreeViewItemInterface[];
     itemId: TreeViewItemInterface['itemId'];
-}) => any;
+    parentChildMap?: Map<string, string[]>;
+}) => string[];
 export declare const getInitialItems: ({ children, preselectedItems: rawPreselectedItems, checkParents, checkChildren, selectable, isDisabled: isTreeViewDisabled, isTopLevelSelectable, items, }: Pick<UseTreeViewProps, "isDisabled" | "checkChildren" | "selectable" | "preselectedItems" | "checkParents" | "children" | "isTopLevelSelectable"> & {
     items?: TreeViewItemInterface[];
 }) => any;
@@ -54,11 +55,11 @@ export declare const toggleMulti: ({ items, itemId, checkedStatus: rawCheckedSta
     itemId: TreeViewItemInterface['itemId'];
     checkedStatus: TreeViewItemInterface['checkedStatus'];
     forceCheckedStatus?: boolean;
-} & Pick<UseTreeViewProps, "checkChildren" | "checkParents" | "isTopLevelSelectable">) => any;
+} & Pick<UseTreeViewProps, "checkChildren" | "checkParents" | "isTopLevelSelectable">) => TreeViewItemInterface[];
 export declare const toggleAllMulti: ({ items, checkedStatus, checkChildren, checkParents, isTopLevelSelectable, }: {
     items: TreeViewItemInterface[];
     checkedStatus: TreeViewItemInterface['checkedStatus'];
-} & Pick<UseTreeViewProps, "checkChildren" | "checkParents" | "isTopLevelSelectable">) => any;
+} & Pick<UseTreeViewProps, "checkChildren" | "checkParents" | "isTopLevelSelectable">) => TreeViewItemInterface[];
 export declare const getInitialExpandedIds: ({ items, initialExpandedItems, }: {
     items: TreeViewItemInterface[];
 } & Pick<UseTreeViewProps, "initialExpandedItems">) => any[];