@tap-payments/os-micro-frontend-shared 0.1.391-test.1 → 0.1.391-test.2

package/build/components/TreeDropdown/TreeDropdown.js

@@ -1,19 +1,24 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { forwardRef, useCallback, useImperativeHandle, useMemo, useState } from 'react';
+import { forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
 import { SelectedState } from './type';
 import TreeNodeList from './TreeNodeList/TreeNodeList';
 import { initializeTreeMapper, promoteSingleChild, TreeManager, updateSelection } from './utils';
 import TreeDropdownProvider from './context/TreeDropdownProvider';
 const TreeDropdown = forwardRef((props, ref) => {
-    const { anchorEl, placement = 'bottom-start', treeDefinition, sx, onChange, multiple = true, exposeOnlySelectedTree = false, IconComponent } = props;
-    const { header, footer, children: menuItems = [], searchProps, levelKey } = treeDefinition;
-    const [internalMapper, setInternalMapper] = useState(() => initializeTreeMapper(menuItems || [], multiple));
+    const { anchorEl, placement = 'bottom-start', treeDefinition, sx, onChange, multiple = true, exposeOnlySelectedTree = false, IconComponent, onMounted, } = props;
+    const { header, footer, children: initialMenuItems = [], searchProps, levelKey } = treeDefinition;
+    /**
+     * Only keep the initial menu items in a ref to avoid re-rendering the component when the menu items change.
+     */
+    const menuItems = useRef(initialMenuItems).current;
+    const [treeMapper, setTreeMapper] = useState({});
+    const initialized = useRef(false);
     const formattedMenuItems = useMemo(() => promoteSingleChild(menuItems || []), [menuItems]);
-    const getFullTree = useCallback(() => TreeManager.denormalizeTree(menuItems, internalMapper), [menuItems, internalMapper]);
+    const getFullTree = useCallback(() => TreeManager.denormalizeTree(menuItems, treeMapper), [menuItems, treeMapper]);
     const getSelectedTree = useCallback(() => TreeManager.extractSelectedBranches(getFullTree()), [getFullTree]);
     const handleSelect = useCallback((isChecked, targetNode) => {
-        const nextInternal = updateSelection(internalMapper, targetNode.id, isChecked, multiple);
-        setInternalMapper(nextInternal);
+        const nextInternal = updateSelection(treeMapper, targetNode.id, isChecked, multiple);
+        setTreeMapper(nextInternal);
         if (onChange) {
             if (exposeOnlySelectedTree) {
                 onChange(TreeManager.extractSelectedBranches(TreeManager.denormalizeTree(menuItems, nextInternal)));
@@ -22,7 +27,7 @@ const TreeDropdown = forwardRef((props, ref) => {
                 onChange(TreeManager.denormalizeTree(menuItems, nextInternal));
             }
         }
-    }, [onChange, menuItems, internalMapper, multiple, exposeOnlySelectedTree]);
+    }, [onChange, menuItems, treeMapper, multiple, exposeOnlySelectedTree]);
     const toggleAll = useCallback((selected) => {
         const setStatus = (tree, isChecked) => {
             const next = Object.assign({}, tree);
@@ -31,8 +36,8 @@ const TreeDropdown = forwardRef((props, ref) => {
             });
             return next;
         };
-        const nextInternal = setStatus(internalMapper, selected);
-        setInternalMapper(nextInternal);
+        const nextInternal = setStatus(treeMapper, selected);
+        setTreeMapper(nextInternal);
         if (onChange) {
             if (exposeOnlySelectedTree) {
                 onChange(TreeManager.extractSelectedBranches(TreeManager.denormalizeTree(menuItems, nextInternal)));
@@ -41,13 +46,27 @@ const TreeDropdown = forwardRef((props, ref) => {
                 onChange(TreeManager.denormalizeTree(menuItems, nextInternal));
             }
         }
-    }, [internalMapper, onChange, menuItems, exposeOnlySelectedTree]);
+    }, [treeMapper, onChange, menuItems, exposeOnlySelectedTree]);
+    useEffect(() => {
+        if (initialized.current)
+            return;
+        initialized.current = true;
+        const intitialMapper = initializeTreeMapper(menuItems || [], multiple);
+        setTreeMapper(intitialMapper);
+        const tree = TreeManager.denormalizeTree(menuItems, intitialMapper);
+        const selectedTree = TreeManager.extractSelectedBranches(tree);
+        onMounted === null || onMounted === void 0 ? void 0 : onMounted({
+            state: intitialMapper,
+            tree,
+            selectedTree,
+        });
+    }, [menuItems, multiple, onMounted]);
     useImperativeHandle(ref, () => ({
-        state: internalMapper,
+        treeMapper,
         getFullTree,
         getSelectedTree,
         toggleAll,
-    }), [internalMapper, getFullTree, getSelectedTree, toggleAll]);
-    return (_jsx(TreeDropdownProvider, Object.assign({ internalMapper: internalMapper, IconComponent: IconComponent, handleSelect: handleSelect, multiple: multiple }, { children: _jsx(TreeNodeList, { anchorEl: anchorEl, sx: sx, header: header, footer: footer, menuItems: formattedMenuItems, levelKey: levelKey, searchProps: searchProps, placement: placement }) })));
+    }), [treeMapper, getFullTree, getSelectedTree, toggleAll]);
+    return (_jsx(TreeDropdownProvider, Object.assign({ treeMapper: treeMapper, IconComponent: IconComponent, handleSelect: handleSelect, multiple: multiple }, { children: _jsx(TreeNodeList, { anchorEl: anchorEl, sx: sx, header: header, footer: footer, menuItems: formattedMenuItems, levelKey: levelKey, searchProps: searchProps, placement: placement }) })));
 });
 export default TreeDropdown;

package/build/components/TreeDropdown/TreeNodeItem/TreeNodeItem.js

@@ -22,7 +22,7 @@ import { ArrowIcon, ChildrenCount, Content, HintText, Label } from './style';
 const TreeNodeItem = (props) => {
     var _a, _b;
     const { renderItem, header, footer } = props, nodeProps = __rest(props, ["renderItem", "header", "footer"]);
-    const { internalMapper, handleSelect, multiple, IconComponent } = useTreeDropdown();
+    const { treeMapper, handleSelect, multiple, IconComponent } = useTreeDropdown();
     const { label, icon, iconComponent, levelIndex = 0, children, nestedMenuSx, hintText, disableHovering, itemProps, searchProps, subLevelKey, } = nodeProps;
     const [anchorEl, setAnchorEl] = useState(null);
     const hasChildren = !!children;
@@ -50,8 +50,8 @@ const TreeNodeItem = (props) => {
             return null;
         return IconComponent ? _jsx(IconComponent, { fileId: icon.fileId, width: (_a = icon.width) !== null && _a !== void 0 ? _a : 20, height: (_b = icon.height) !== null && _b !== void 0 ? _b : 20 }) : null;
     }, [iconComponent, icon, IconComponent]);
-    const checked = ((_a = internalMapper[nodeProps.id]) === null || _a === void 0 ? void 0 : _a.status) === SelectedState.CHECKED;
-    const indeterminate = multiple ? ((_b = internalMapper[nodeProps.id]) === null || _b === void 0 ? void 0 : _b.status) === SelectedState.INDETERMINATE : false;
+    const checked = ((_a = treeMapper[nodeProps.id]) === null || _a === void 0 ? void 0 : _a.status) === SelectedState.CHECKED;
+    const indeterminate = multiple ? ((_b = treeMapper[nodeProps.id]) === null || _b === void 0 ? void 0 : _b.status) === SelectedState.INDETERMINATE : false;
     const showSelectionControl = multiple || !hasChildren;
     const handleSelectInternal = useCallback((e) => {
         e.stopPropagation();

package/build/components/TreeDropdown/context/TreeDropdownProvider.d.ts

@@ -1,7 +1,7 @@
 import { type PropsWithChildren } from 'react';
 import { TreeMapper, TreeNode } from '../type';
 type TreeDropdownContextType = {
-    internalMapper: TreeMapper;
+    treeMapper: TreeMapper;
     handleSelect: (isChecked: boolean, targetNode: TreeNode) => void;
     multiple?: boolean;
     IconComponent?: React.ComponentType<{
@@ -11,5 +11,5 @@ type TreeDropdownContextType = {
     }>;
 };
 export declare const TreeDropdownContext: import("react").Context<TreeDropdownContextType>;
-declare const TreeDropdownProvider: ({ children, internalMapper, handleSelect, multiple, IconComponent }: PropsWithChildren<TreeDropdownContextType>) => import("react/jsx-runtime").JSX.Element;
+declare const TreeDropdownProvider: ({ children, treeMapper, handleSelect, multiple, IconComponent }: PropsWithChildren<TreeDropdownContextType>) => import("react/jsx-runtime").JSX.Element;
 export default TreeDropdownProvider;

package/build/components/TreeDropdown/context/TreeDropdownProvider.js

@@ -2,12 +2,12 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { useMemo, createContext } from 'react';
 // eslint-disable-next-line react-refresh/only-export-components
 export const TreeDropdownContext = createContext({
-    internalMapper: {},
+    treeMapper: {},
     handleSelect: () => { },
     multiple: false,
 });
-const TreeDropdownProvider = ({ children, internalMapper, handleSelect, multiple, IconComponent }) => {
-    const ctxValues = useMemo(() => ({ internalMapper, handleSelect, multiple, IconComponent }), [internalMapper, handleSelect, multiple, IconComponent]);
+const TreeDropdownProvider = ({ children, treeMapper, handleSelect, multiple, IconComponent }) => {
+    const ctxValues = useMemo(() => ({ treeMapper, handleSelect, multiple, IconComponent }), [treeMapper, handleSelect, multiple, IconComponent]);
     return _jsx(TreeDropdownContext.Provider, Object.assign({ value: ctxValues }, { children: children }));
 };
 export default TreeDropdownProvider;

package/build/components/TreeDropdown/hooks/useTreeDropdown.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 declare const useTreeDropdown: () => {
-    internalMapper: import("..").TreeMapper;
+    treeMapper: import("..").TreeMapper;
     handleSelect: (isChecked: boolean, targetNode: import("..").TreeNode) => void;
     multiple?: boolean | undefined;
     IconComponent?: import("react").ComponentType<{

package/build/components/TreeDropdown/type.d.ts

@@ -8,7 +8,13 @@ export type TreeNodeIcon = {
     height?: number | string;
 };
 export type ExtendableObject<T> = T extends Record<string, any> ? T & Record<string, any> : never;
+export type OnTreeMountedParams = {
+    state: TreeMapper;
+    tree: TreeNode[];
+    selectedTree: TreeNode[];
+};
 export type TreeDropdownProps = {
+    onMounted?: (params: OnTreeMountedParams) => void;
     onChange?: (tree: TreeNode[]) => void;
     multiple?: boolean;
     anchorEl: HTMLElement | null;
@@ -23,7 +29,7 @@ export type TreeDropdownProps = {
     }>;
 };
 export type TreeDropdownRef = {
-    state: TreeMapper;
+    treeMapper: TreeMapper;
     getFullTree: () => TreeNode[];
     getSelectedTree: () => TreeNode[];
     toggleAll: (selected: boolean) => void;

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "@tap-payments/os-micro-frontend-shared",
   "description": "Shared components and utilities for Tap Payments micro frontends",
-  "version": "0.1.391-test.1",
-  "testVersion": 1,
+  "version": "0.1.391-test.2",
+  "testVersion": 2,
   "type": "module",
   "main": "build/index.js",
   "module": "build/index.js",