@tap-payments/os-micro-frontend-shared 0.1.396 → 0.1.398-test.1

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

@@ -0,0 +1,89 @@
+/// <reference types="react" />
+import { Input, MenuItem } from '../index.js';
+import { type SxProps, type Theme } from '@mui/material/styles';
+import { PopperProps } from '@mui/material/Popper';
+export type TreeNodeIcon = {
+    fileId: string;
+    width?: number | string;
+    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;
+    placement?: PopperProps['placement'];
+    sx?: SxProps<Theme>;
+    treeDefinition: TreeDefinition;
+    exposeOnlySelectedTree?: boolean;
+    IconComponent?: React.ComponentType<{
+        fileId: string;
+        width?: number | string;
+        height?: number | string;
+    }>;
+};
+export type TreeDropdownRef = {
+    treeMapper: TreeMapper;
+    getFullTree: () => TreeNode[];
+    getSelectedTree: () => TreeNode[];
+    toggleAll: (selected: boolean) => void;
+};
+export type TreeNode = ExtendableObject<{
+    id: string;
+    label?: React.ReactNode;
+    hintText?: React.ReactNode;
+    icon?: TreeNodeIcon;
+    iconComponent?: React.ReactNode;
+    itemProps?: React.ComponentProps<typeof MenuItem>;
+    renderItem?: (params: {
+        nodeProps: TreeNode;
+        checked?: boolean;
+        indeterminate?: boolean;
+        onSelect: (e: React.ChangeEvent<HTMLInputElement>) => void;
+    }) => React.ReactNode;
+}> & TreeDefinition;
+export type TreeDefinition = {
+    header?: React.ReactNode;
+    footer?: React.ReactNode;
+    /**
+     * [Optional] Used to determine the level of the node in the tree
+     * It will appear as data attribute over the list element.
+     * ```
+     * <div ... data-level-key="some-unique-key"> ... </div>
+     * ```
+     */
+    levelKey?: string;
+    searchProps?: {
+        /**
+         * ### [Required For Search]
+         * The function to get the value of the item for the search
+         */
+        getValues: (item: TreeNode) => string[];
+        onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
+        noResultsText?: React.ReactNode;
+        inputProps?: React.ComponentProps<typeof Input>;
+    };
+    children?: TreeNode[];
+    disablePromotion?: boolean;
+    status?: `${SelectedState}`;
+};
+export declare enum SelectedState {
+    CHECKED = "CHECKED",
+    UNCHECKED = "UNCHECKED",
+    INDETERMINATE = "INDETERMINATE"
+}
+export type SelectedItems = {
+    [key: string]: `${SelectedState}`;
+};
+export type TreeMapper = {
+    [nodeKey: string]: {
+        status: `${SelectedState}`;
+        _parents?: string[];
+    };
+};

package/build/components/TreeDropdown/type.js

@@ -0,0 +1,6 @@
+export var SelectedState;
+(function (SelectedState) {
+    SelectedState["CHECKED"] = "CHECKED";
+    SelectedState["UNCHECKED"] = "UNCHECKED";
+    SelectedState["INDETERMINATE"] = "INDETERMINATE";
+})(SelectedState || (SelectedState = {}));

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

@@ -0,0 +1,21 @@
+import { TreeMapper, TreeNode } from './type';
+export declare function promoteSingleChild(items: TreeNode[]): TreeNode[];
+export declare const getAncestorIdsByNodeId: (nodeId: string, nodes: TreeNode[], path?: TreeNode[]) => TreeNode[] | null;
+export declare function collectCheckedIds(nodes: TreeNode[], multiple: boolean, acc?: string[]): string[];
+export declare function normalizeStructure(nodes: TreeNode[], parents?: string[], acc?: TreeMapper, isParentSelected?: boolean): TreeMapper;
+export declare function initializeTreeMapper(nodes: TreeNode[], multiple: boolean): TreeMapper;
+export declare function denormalizeTree(nodes: TreeNode[], state: TreeMapper): TreeNode[];
+export declare function updateTreeSelection(tree: TreeMapper, targetNodeId: string, isChecked: boolean): TreeMapper;
+export declare function extractSelectedBranches(nodes: TreeNode[]): TreeNode[];
+export declare function resetTreeState(tree: TreeMapper): TreeMapper;
+export declare function updateSelection(tree: TreeMapper, targetNode: string, isChecked: boolean, multiple: boolean): TreeMapper;
+export type GetNodesByLevelOptions = {
+    filter?: (node: TreeNode) => boolean;
+    includeChildren?: boolean;
+};
+export declare function filterNodesByLevelKey(nodes: TreeNode[], levelKey: string): TreeNode[];
+export declare const TreeManager: {
+    denormalizeTree: import("memoize-one").MemoizedFn<(tree: TreeNode[], mapper: TreeMapper) => TreeNode[]>;
+    extractSelectedBranches: import("memoize-one").MemoizedFn<(nodes: TreeNode[]) => TreeNode[]>;
+    filterNodesByLevelKey: import("memoize-one").MemoizedFn<(nodes: TreeNode[], levelKey: string) => TreeNode[]>;
+};

package/build/components/TreeDropdown/utils.js

@@ -0,0 +1,161 @@
+import memoizeOne from 'memoize-one';
+import { SelectedState } from './type';
+export function promoteSingleChild(items) {
+    function promote(item) {
+        var _a, _b, _c;
+        let children = item.children ? item.children.map(promote) : undefined;
+        // Promote children if exactly one child exists and it has children
+        if ((children === null || children === void 0 ? void 0 : children.length) === 1 && ((_a = children[0].children) === null || _a === void 0 ? void 0 : _a.length) && !children[0].disablePromotion) {
+            const onlyChild = children[0];
+            children = onlyChild.children;
+            item = Object.assign(Object.assign({}, item), { header: (_b = onlyChild.header) !== null && _b !== void 0 ? _b : item.header, footer: (_c = onlyChild.footer) !== null && _c !== void 0 ? _c : item.footer });
+        }
+        return Object.assign(Object.assign({}, item), { children });
+    }
+    return items.map(promote);
+}
+export const getAncestorIdsByNodeId = (nodeId, nodes, path = []) => {
+    for (const node of nodes) {
+        if (node.id === nodeId) {
+            return [...path, node];
+        }
+        if (node.children) {
+            const found = getAncestorIdsByNodeId(nodeId, node.children, [...path, node]);
+            if (found)
+                return found;
+        }
+    }
+    return null;
+};
+export function collectCheckedIds(nodes, multiple, acc = []) {
+    for (const node of nodes) {
+        if (node.status === SelectedState.CHECKED) {
+            acc.push(node.id);
+        }
+        if (node.children) {
+            collectCheckedIds(node.children, multiple, acc);
+        }
+    }
+    return acc;
+}
+export function normalizeStructure(nodes, parents = [], acc = {}, isParentSelected = false) {
+    var _a;
+    for (const node of nodes) {
+        const status = isParentSelected ? SelectedState.CHECKED : (_a = node.status) !== null && _a !== void 0 ? _a : SelectedState.UNCHECKED;
+        acc[node.id] = Object.assign({ status }, (parents.length ? { _parents: parents } : {}));
+        if (node.children) {
+            normalizeStructure(node.children, [...parents, node.id], acc, status === SelectedState.CHECKED);
+        }
+    }
+    return acc;
+}
+export function initializeTreeMapper(nodes, multiple) {
+    const base = normalizeStructure(nodes);
+    const checkedIds = collectCheckedIds(nodes, multiple);
+    let next = base;
+    for (const id of checkedIds) {
+        next = updateTreeSelection(next, id, true);
+    }
+    return next;
+}
+export function denormalizeTree(nodes, state) {
+    return nodes.map((node) => {
+        var _a, _b;
+        return (Object.assign(Object.assign({}, node), { status: (_b = (_a = state[node.id]) === null || _a === void 0 ? void 0 : _a.status) !== null && _b !== void 0 ? _b : SelectedState.UNCHECKED, children: node.children ? denormalizeTree(node.children, state) : undefined }));
+    });
+}
+function buildChildrenMap(tree) {
+    var _a;
+    const map = {};
+    for (const key of Object.keys(tree)) {
+        const parents = tree[key]._parents;
+        if (!(parents === null || parents === void 0 ? void 0 : parents.length))
+            continue;
+        const parent = parents[parents.length - 1];
+        (_a = map[parent]) !== null && _a !== void 0 ? _a : (map[parent] = []);
+        map[parent].push(key);
+    }
+    return map;
+}
+export function updateTreeSelection(tree, targetNodeId, isChecked) {
+    const next = structuredClone(tree);
+    const childrenMap = buildChildrenMap(tree);
+    const targetStatus = isChecked ? SelectedState.CHECKED : SelectedState.UNCHECKED;
+    function updateDown(node) {
+        var _a;
+        next[node].status = targetStatus;
+        for (const child of (_a = childrenMap[node]) !== null && _a !== void 0 ? _a : []) {
+            updateDown(child);
+        }
+    }
+    function updateUp(node) {
+        var _a;
+        const parents = next[node]._parents;
+        if (!(parents === null || parents === void 0 ? void 0 : parents.length))
+            return;
+        const parent = parents[parents.length - 1];
+        const siblings = (_a = childrenMap[parent]) !== null && _a !== void 0 ? _a : [];
+        const statuses = siblings.map((id) => next[id].status);
+        if (statuses.every((s) => s === SelectedState.CHECKED)) {
+            next[parent].status = SelectedState.CHECKED;
+        }
+        else if (statuses.every((s) => s === SelectedState.UNCHECKED)) {
+            next[parent].status = SelectedState.UNCHECKED;
+        }
+        else {
+            next[parent].status = SelectedState.INDETERMINATE;
+        }
+        updateUp(parent);
+    }
+    updateDown(targetNodeId);
+    updateUp(targetNodeId);
+    return next;
+}
+export function extractSelectedBranches(nodes) {
+    function visit(node) {
+        var _a;
+        const children = (_a = node.children) === null || _a === void 0 ? void 0 : _a.map(visit).filter(Boolean);
+        const isSelected = node.status === SelectedState.CHECKED || node.status === SelectedState.INDETERMINATE;
+        if (isSelected || (children && children.length > 0)) {
+            return Object.assign(Object.assign({}, node), { children });
+        }
+        return null;
+    }
+    return nodes.map(visit).filter(Boolean);
+}
+export function resetTreeState(tree) {
+    const next = {};
+    for (const key in tree) {
+        next[key] = Object.assign({ status: SelectedState.UNCHECKED }, (tree[key]._parents ? { _parents: tree[key]._parents } : {}));
+    }
+    return next;
+}
+export function updateSelection(tree, targetNode, isChecked, multiple) {
+    if (multiple) {
+        return updateTreeSelection(tree, targetNode, isChecked);
+    }
+    // SINGLE SELECT
+    if (!isChecked) {
+        // unchecking in single mode clears everything
+        return resetTreeState(tree);
+    }
+    const cleared = resetTreeState(tree);
+    return updateTreeSelection(cleared, targetNode, true);
+}
+export function filterNodesByLevelKey(nodes, levelKey) {
+    const result = [];
+    function walk(node) {
+        var _a;
+        if (node.levelKey === levelKey) {
+            result.push(node);
+        }
+        (_a = node.children) === null || _a === void 0 ? void 0 : _a.forEach((child) => walk(child));
+    }
+    nodes.forEach(walk);
+    return result;
+}
+export const TreeManager = {
+    denormalizeTree: memoizeOne((tree, mapper) => denormalizeTree(tree, mapper)),
+    extractSelectedBranches: memoizeOne((nodes) => extractSelectedBranches(nodes)),
+    filterNodesByLevelKey: memoizeOne((nodes, levelKey) => filterNodesByLevelKey(nodes, levelKey)),
+};

package/build/components/VirtualTables/components/style.d.ts

@@ -1,5 +1,4 @@
 /// <reference types="react" />
-/// <reference types="react" />
 interface TableWrapperProps {
     showNoDataView?: boolean;
 }

package/build/components/index.d.ts

@@ -153,3 +153,5 @@ export * from './SalesChannelFilter';
 export * from './ReferenceTypeFilter';
 export * from './ListColumnFilter';
 export * from './VerificationIcon';
+export { default as TreeDropdown } from './TreeDropdown';
+export * from './TreeDropdown';

package/build/components/index.js

@@ -153,3 +153,5 @@ export * from './SalesChannelFilter';
 export * from './ReferenceTypeFilter';
 export * from './ListColumnFilter';
 export * from './VerificationIcon';
+export { default as TreeDropdown } from './TreeDropdown';
+export * from './TreeDropdown';

package/build/hooks/index.d.ts

@@ -14,3 +14,4 @@ export * from './useAppEventPublisher';
 export * from './useAppEventListener';
 export * from './useSelectedMerchantDetails';
 export * from './useToast';
+export * from './useScrolledTo';

package/build/hooks/index.js

@@ -14,3 +14,4 @@ export * from './useAppEventPublisher';
 export * from './useAppEventListener';
 export * from './useSelectedMerchantDetails';
 export * from './useToast';
+export * from './useScrolledTo';

package/build/hooks/useScrolledTo.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+type UseScrolledToArgs = {
+    threshold?: number;
+    containerRef?: React.RefObject<HTMLElement>;
+};
+type ScrollSource = HTMLElement | React.UIEvent<HTMLElement, UIEvent>;
+export declare function useScrolledTo({ threshold, containerRef }?: UseScrolledToArgs): {
+    handleScroll: (source: ScrollSource) => void;
+    scrolledToTop: boolean;
+    scrolledToBottom: boolean;
+    scrollable: boolean;
+};
+export {};

package/build/hooks/useScrolledTo.js

@@ -0,0 +1,45 @@
+import { useCallback, useEffect, useState } from 'react';
+const DEFAULT_THRESHOLD = 10;
+export function useScrolledTo({ threshold = DEFAULT_THRESHOLD, containerRef } = {}) {
+    const [scrolledToTop, setScrolledToTop] = useState(true);
+    const [scrolledToBottom, setScrolledToBottom] = useState(false);
+    const [scrollable, setScrollable] = useState(false);
+    const updateFromElement = useCallback((el) => {
+        const { scrollTop, scrollHeight, clientHeight } = el;
+        setScrollable(scrollHeight > clientHeight + threshold);
+        setScrolledToTop(scrollTop <= threshold);
+        setScrolledToBottom(scrollHeight - (scrollTop + clientHeight) <= threshold);
+    }, [threshold]);
+    const handleScroll = useCallback((source) => {
+        if (!source)
+            return;
+        // React onScroll event
+        if ('currentTarget' in source) {
+            updateFromElement(source.currentTarget);
+            return;
+        }
+        // Direct HTMLElement
+        updateFromElement(source);
+    }, [updateFromElement]);
+    useEffect(() => {
+        if (!(containerRef === null || containerRef === void 0 ? void 0 : containerRef.current))
+            return;
+        const element = containerRef.current;
+        // Initial calculation
+        handleScroll(element);
+        // Watch for container size changes
+        const resizeObserver = new ResizeObserver(() => {
+            handleScroll(element);
+        });
+        resizeObserver.observe(element);
+        return () => {
+            resizeObserver.disconnect();
+        };
+    }, [containerRef, handleScroll]);
+    return {
+        handleScroll,
+        scrolledToTop,
+        scrolledToBottom,
+        scrollable,
+    };
+}

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.396",
-  "testVersion": 0,
+  "version": "0.1.398-test.1",
+  "testVersion": 1,
   "type": "module",
   "main": "build/index.js",
   "module": "build/index.js",
@@ -164,4 +164,4 @@
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
   }
-}
+}