@frontify/fondue 12.1.11 → 12.1.12

package/dist/components/Tree/TreeItem/TreeItem.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"TreeItem.es.js","sources":["../../../../src/components/Tree/TreeItem/TreeItem.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { useDndContext, useDndMonitor } from '@dnd-kit/core';\nimport { type AnimateLayoutChanges, useSortable } from '@dnd-kit/sortable';\nimport { CSS } from '@dnd-kit/utilities';\nimport { noop } from 'lodash-es';\nimport { Children, type MouseEvent, memo, useCallback, useEffect, useMemo, useRef } from 'react';\n\nimport {\n    type RegisterNodeChildrenPayload,\n    type TreeDragEndEvent,\n    type TreeDragMoveEvent,\n    type TreeDragStartEvent,\n    TreeItemBorderClassMap,\n    TreeItemBorderRadiusClassMap,\n    TreeItemBorderStyleClassMap,\n    TreeItemColorsClassMap,\n    type TreeItemProps,\n    TreeItemShadowClassMap,\n    TreeItemSpacingClassMap,\n    type TreeItemStyling,\n} from '@components/Tree/types';\nimport { useDebounce } from '@hooks/useDebounce';\nimport { FOCUS_VISIBLE_STYLE } from '@utilities/focusStyle';\nimport { merge } from '@utilities/merge';\n\nimport { EXPAND_ONHOVER_DELAY, INDENTATION_WIDTH, type Projection } from '../helpers';\nimport { removeFragmentsAndEnrichChildren, useDeepCompareEffect } from '../utils';\n\nimport { DragHandle } from './DragHandle';\nimport { ExpandButton } from './ExpandButton';\nimport { type Overlay } from './TreeItemOverlay';\nimport { useTreeItem } from './useTreeItem';\n\nconst animateLayoutChanges: AnimateLayoutChanges = ({ isSorting, wasDragging }) =>\n    isSorting || wasDragging ? false : true;\n\n/** @private */\ntype TreeItemPrivateProps = {\n    level?: number;\n    levelConstraint?: Nullable<number>;\n    parentId?: string;\n    isSelected?: boolean;\n    isExpanded?: boolean;\n    /** onSelect is passed by the Tree component when cloning the TreeItem */\n    onSelect?: (id: string) => void;\n    /** onClick is the user defined callback to run after the onSelect */\n    onClick?: (id: string) => void;\n    onExpand?: (id: string) => void;\n    onShrink?: (id: string) => void;\n    projection?: Nullable<Projection>;\n    registerOverlay?: (overlay: Overlay) => void;\n    unregisterNodeChildren?: (payload: string) => void;\n    registerNodeChildren?: (payload: RegisterNodeChildrenPayload) => void;\n};\n\n/** @private */\nexport type InternalTreeItemProps = TreeItemProps & TreeItemPrivateProps;\n\nexport const TreeItem = memo(\n    ({\n        id,\n        type,\n        label,\n        onDrop,\n        accepts,\n        showCaret,\n        children,\n        parentId,\n        level = 0,\n        contentComponent,\n        onClick,\n        onSelect,\n        onExpand,\n        onShrink,\n        registerOverlay,\n        registerNodeChildren,\n        unregisterNodeChildren,\n        draggable = true,\n        expandable = true,\n        showDragHandlerOnHoverOnly = true,\n        dragHandlerPosition = 'left',\n        showContentWhileDragging = true,\n        itemStyle,\n        ignoreItemDoubleClick = false,\n        expandOnSelect = false,\n        'data-test-id': dataTestId = 'fondue-tree-item',\n    }: InternalTreeItemProps) => {\n        const { active, over } = useDndContext();\n        const { isSelected, isExpanded, projection } = useTreeItem(id);\n        const expandDebounced = useRef<Nullable<string> | undefined>();\n\n        const isActive = active?.id === id;\n        const activeProjection = isActive && projection !== null && projection !== undefined ? projection : null;\n\n        const overAccepts =\n            typeof over?.data?.current?.accepts === 'string' ? over.data.current.accepts?.split(', ') : [];\n\n        const parentAccepts =\n            typeof activeProjection?.accepts === 'string' ? activeProjection.accepts?.split(', ') : [];\n\n        const currentType = active?.data.current?.type || '';\n\n        const isWithin =\n            projection?.previousNode?.depth !== undefined && projection?.depth > projection?.previousNode?.depth;\n        const isWithinOneLevel = isWithin && projection.depth - 1 === projection?.previousNode?.depth;\n\n        const canDropWithinAndDeeper =\n            isWithin &&\n            projection?.previousNode?.accepts !== undefined &&\n            (projection?.previousNode?.accepts.includes(`${currentType}-deeper`) ||\n                projection?.previousNode?.accepts.includes(`${currentType}-within`));\n\n        const canDropWithin =\n            (isActive &&\n                isWithinOneLevel &&\n                activeProjection?.previousNode?.accepts !== undefined &&\n                activeProjection?.previousNode?.accepts.includes(`${currentType}-within`)) ||\n            (activeProjection?.isWithinParent && parentAccepts.includes(`${currentType}-within`));\n\n        const canDrop =\n            isActive && active?.data.current && ((overAccepts.includes(currentType) && !isWithin) || canDropWithin);\n\n        const expandProjectionParent = useDebounce((toExpandId: string) => {\n            if (expandDebounced.current === toExpandId) {\n                onExpand?.(toExpandId);\n            }\n        }, EXPAND_ONHOVER_DELAY);\n\n        useEffect(() => {\n            if (isActive) {\n                expandDebounced.current = isWithin ? activeProjection?.previousNode?.id : null;\n            }\n\n            if (\n                isActive &&\n                canDropWithinAndDeeper &&\n                activeProjection?.parentId &&\n                activeProjection.previousNode &&\n                activeProjection.parentId === activeProjection.previousNode.id &&\n                activeProjection.parentId !== active?.data?.current?.parentId\n            ) {\n                expandProjectionParent(activeProjection?.parentId);\n            }\n        }, [\n            active?.data,\n            activeProjection?.parentId,\n            activeProjection?.previousNode,\n            expandProjectionParent,\n            isActive,\n            canDropWithinAndDeeper,\n            isWithin,\n        ]);\n\n        const handleItemDragEnd = useCallback(\n            (event: TreeDragEndEvent) => {\n                const { over, active } = event;\n\n                if (\n                    !isActive ||\n                    !activeProjection ||\n                    (active.id === over?.id && activeProjection?.depth === active.data.current?.level)\n                ) {\n                    return;\n                }\n\n                if (isActive && over && canDrop && onDrop) {\n                    onDrop({\n                        id: active.id,\n                        parentId: activeProjection.parentId,\n                        sort: activeProjection.position,\n                        contentComponent,\n                        parentType: activeProjection.type,\n                    });\n                }\n            },\n            [isActive, activeProjection, canDrop, onDrop, contentComponent],\n        );\n\n        const handleItemDragStart = useCallback(\n            (event: TreeDragStartEvent) => {\n                if (event.active.id !== id) {\n                    return;\n                }\n\n                registerOverlay?.({\n                    contentComponent,\n                    children,\n                    id,\n                    label,\n                    level,\n                    dragHandlerPosition,\n                    showContentWhileDragging,\n                });\n            },\n            [\n                children,\n                contentComponent,\n                dragHandlerPosition,\n                id,\n                label,\n                level,\n                registerOverlay,\n                showContentWhileDragging,\n            ],\n        );\n\n        const handleItemDragMove = useCallback(\n            (event: TreeDragMoveEvent) => {\n                if (event.active.id === id) {\n                    document.body.style.setProperty('cursor', canDrop ? 'grabbing' : 'no-drop');\n                }\n            },\n            [canDrop, id],\n        );\n\n        useDndMonitor({\n            onDragEnd: handleItemDragEnd,\n            onDragStart: handleItemDragStart,\n            onDragMove: handleItemDragMove,\n        });\n\n        const toggleExpand = useCallback(\n            (event?: MouseEvent<HTMLButtonElement>) => {\n                event?.stopPropagation();\n                isExpanded ? onShrink?.(id) : onExpand?.(id);\n            },\n            [id, isExpanded, onExpand, onShrink],\n        );\n\n        const handleItemClick = useDebounce(\n            (event: MouseEvent<HTMLElement>) => {\n                event.stopPropagation();\n                if (ignoreItemDoubleClick && event.detail >= 2) {\n                    return;\n                }\n\n                if (expandOnSelect) {\n                    toggleExpand();\n                }\n\n                onSelect?.(id);\n                onClick?.(id);\n            },\n            ignoreItemDoubleClick ? 300 : 0,\n        );\n\n        const isParentActive = parentId && active?.id === parentId;\n\n        const hasChildren = Children.count(children) > 0;\n\n        const { enrichedChildren, childrenIds } = useMemo(() => {\n            const enrichedChildren = removeFragmentsAndEnrichChildren(children, { parentId: id, level: level + 1 });\n            return {\n                enrichedChildren,\n                childrenIds: enrichedChildren.map((child) => child.props.id),\n            };\n        }, [children, id, level]);\n\n        const {\n            attributes,\n            listeners,\n            transform,\n            transition,\n            setDraggableNodeRef,\n            setDroppableNodeRef,\n            setActivatorNodeRef,\n        } = useSortable({\n            id,\n            disabled: !draggable,\n            data: { type, accepts, parentId, level },\n            animateLayoutChanges,\n            transition: null,\n        });\n\n        useDeepCompareEffect(() => {\n            if (Children.count(enrichedChildren) === 0) {\n                unregisterNodeChildren?.(id);\n                return;\n            }\n\n            if (isActive || isParentActive) {\n                unregisterNodeChildren?.(id);\n                return;\n            }\n\n            if (isExpanded) {\n                registerNodeChildren?.({ id, children: enrichedChildren });\n            } else {\n                unregisterNodeChildren?.(id);\n            }\n        }, [isActive, isExpanded, isParentActive, enrichedChildren, id]);\n\n        const itemStyleProps = useMemo(() => {\n            return {\n                spacingY: 'none',\n                contentHight: 'single-line',\n                shadow: 'none',\n                borderRadius: 'small',\n                borderWidth: 'none',\n                borderStyle: 'none',\n                activeColorStyle: 'neutral',\n                ...itemStyle,\n            } as TreeItemStyling;\n        }, [itemStyle]);\n\n        const styling = TreeItemColorsClassMap[itemStyleProps.activeColorStyle ?? 'neutral'];\n\n        const { liClassName, backgroundClassName } = useMemo(() => {\n            return {\n                liClassName: merge([\n                    FOCUS_VISIBLE_STYLE,\n                    'tw-box-content tw-relative tw-cursor-default tw-transition-colors tw-outline-none tw-ring-inset tw-group tw-no-underline tw-leading-5',\n                    !isActive && isSelected ? styling.selectedTextColor : styling.textColor,\n                    TreeItemSpacingClassMap[itemStyleProps.spacingY ?? 'none'],\n                ]),\n                backgroundClassName: merge([\n                    'tw-block tw-absolute tw-inset-0 tw-transition-colors -tw-z-10',\n                    itemStyleProps.borderWidth !== 'none'\n                        ? TreeItemBorderRadiusClassMap[itemStyleProps.borderRadius ?? 'small']\n                        : '',\n                    !isActive &&\n                        (!isSelected || itemStyleProps.activeColorStyle !== 'neutral') &&\n                        styling.pressedBackgroundColor,\n                    !isActive && isSelected ? styling.selectedBackgroundColor : styling.backgroundColor,\n                ]),\n            };\n        }, [isActive, isSelected, itemStyleProps, styling]);\n\n        const showContent = showContentWhileDragging ? true : !isActive;\n        const wrapperContentClassName = merge([\n            'tw-max-w-full tw-grow tw-overflow-hidden',\n            isActive && showContentWhileDragging ? 'tw-opacity-75 tw-blur-sm tw-grayscale' : '',\n        ]);\n        const showChildren = isExpanded && !isActive;\n        const showDragHandle = draggable && !isActive;\n        const showLabel = label !== undefined && !isActive;\n        const showExpandButton = !isActive && expandable && (showCaret === undefined ? hasChildren : showCaret);\n\n        let previousItemToBeExpandedFeedback = '';\n        if (\n            !isActive &&\n            !isExpanded &&\n            showExpandButton &&\n            canDropWithinAndDeeper &&\n            projection?.previousNode?.id === id &&\n            projection?.depth > projection?.previousNode?.depth\n        ) {\n            previousItemToBeExpandedFeedback = merge([\n                'tw-border-solid tw-border-box-selected-strong',\n                TreeItemBorderRadiusClassMap[itemStyleProps.borderRadius ?? 'small'],\n                TreeItemBorderClassMap.small,\n            ]);\n        }\n\n        const containerBorder =\n            itemStyleProps.borderWidth !== 'none' && previousItemToBeExpandedFeedback === ''\n                ? merge([\n                      TreeItemBorderClassMap[itemStyleProps.borderWidth ?? 'none'],\n                      TreeItemBorderRadiusClassMap[itemStyleProps.borderRadius ?? 'small'],\n                      TreeItemBorderStyleClassMap[itemStyleProps.borderStyle ?? 'none'],\n                  ])\n                : '';\n        const containerHeight = itemStyleProps.contentHight === 'single-line' ? 'tw-h-10' : 'tw-h-fit';\n        const containerActiveHeight = itemStyleProps.contentHight === 'single-line' ? 'tw-h-12' : 'tw-h-fit';\n\n        const containerClassName = merge([\n            'tw-relative tw-z-0 tw-transition-colors tw-flex tw-items-center tw-leading-5 tw-width-fit tw-justify-between',\n            TreeItemShadowClassMap[itemStyleProps.shadow ?? 'none'],\n            isActive ? 'tw-border-dashed tw-border-2 tw-pr-0' : containerBorder,\n            isActive && TreeItemBorderRadiusClassMap[itemStyleProps.borderRadius ?? 'small'],\n            isActive ? containerActiveHeight : containerHeight,\n            isActive &&\n                (canDrop\n                    ? 'tw-border-box-selected-strong tw-bg-box-selected-hover'\n                    : 'tw-bg-box-negative-hover tw-border-box-negative-strong-hover'),\n            previousItemToBeExpandedFeedback,\n        ]);\n\n        const depthPadding = activeProjection?.depth ? activeProjection.depth * INDENTATION_WIDTH : undefined;\n        const levelPadding = isActive ? 0 : level * INDENTATION_WIDTH;\n\n        const liStyle = { paddingLeft: depthPadding ?? levelPadding };\n        const backgroundStyle =\n            itemStyleProps.borderWidth !== 'none' ? {} : { marginLeft: -1 * (depthPadding ?? levelPadding) };\n\n        const style = {\n            transform: CSS.Transform.toString(transform),\n            transition,\n        };\n\n        const handlerProps = { ...listeners, ...attributes };\n        const dragHandlerProps = dragHandlerPosition !== 'none' ? handlerProps : {};\n        const dragHandler =\n            dragHandlerPosition !== 'none' ? (\n                <DragHandle\n                    {...dragHandlerProps}\n                    active={isSelected}\n                    ref={setActivatorNodeRef}\n                    disabled={!showDragHandle}\n                    aria-hidden={!showDragHandle}\n                    showDragHandlerOnHoverOnly={showDragHandlerOnHoverOnly}\n                    activeColorStyle={itemStyleProps.activeColorStyle ?? 'neutral'}\n                />\n            ) : null;\n\n        const itemHandlerProps = dragHandlerPosition === 'none' ? { ...handlerProps } : {};\n\n        return (\n            <li\n                {...itemHandlerProps}\n                id={id}\n                key={id}\n                tabIndex={0}\n                // eslint-disable-next-line jsx-a11y/no-noninteractive-element-to-interactive-role\n                role=\"treeitem\"\n                style={liStyle}\n                onKeyDown={noop}\n                aria-label={label}\n                aria-level={level + 1}\n                onClick={handleItemClick}\n                className={liClassName}\n                ref={setDroppableNodeRef}\n                data-test-id={dataTestId}\n                aria-selected={isSelected}\n                aria-expanded={isExpanded}\n                data-has-children={hasChildren}\n                aria-owns={childrenIds.join(' ')}\n            >\n                <div ref={setDraggableNodeRef} className={containerClassName} style={style}>\n                    <span className={backgroundClassName} style={backgroundStyle} aria-hidden={true} />\n                    {dragHandlerPosition === 'left' && dragHandler}\n\n                    {expandable && (\n                        <ExpandButton\n                            active={transform?.y ? false : isSelected}\n                            onClick={toggleExpand}\n                            expanded={showChildren}\n                            disabled={!showExpandButton}\n                            aria-hidden={!showExpandButton}\n                            className={showExpandButton ? 'tw-visible' : 'tw-invisible tw-pointer-events-none'}\n                        />\n                    )}\n\n                    {showLabel && (\n                        <span className=\"first:tw-ml-3.5 tw-w-full tw-h-full tw-flex tw-items-center\">{label}</span>\n                    )}\n\n                    {showContent && <div className={wrapperContentClassName}>{contentComponent}</div>}\n\n                    {dragHandlerPosition === 'right' && dragHandler}\n                </div>\n            </li>\n        );\n    },\n);\n\nTreeItem.displayName = 'FondueTreeItem';\n"],"names":["animateLayoutChanges","isSorting","wasDragging","TreeItem","memo","id","type","label","onDrop","accepts","showCaret","children","parentId","level","contentComponent","onClick","onSelect","onExpand","onShrink","registerOverlay","registerNodeChildren","unregisterNodeChildren","draggable","expandable","showDragHandlerOnHoverOnly","dragHandlerPosition","showContentWhileDragging","itemStyle","ignoreItemDoubleClick","expandOnSelect","dataTestId","active","over","useDndContext","isSelected","isExpanded","projection","useTreeItem","expandDebounced","useRef","isActive","activeProjection","overAccepts","_b","_a","_c","parentAccepts","_d","currentType","_e","isWithin","_f","_g","isWithinOneLevel","_h","canDropWithinAndDeeper","_i","_j","_k","canDropWithin","_l","_m","canDrop","expandProjectionParent","useDebounce","toExpandId","EXPAND_ONHOVER_DELAY","useEffect","handleItemDragEnd","useCallback","event","handleItemDragStart","handleItemDragMove","useDndMonitor","toggleExpand","handleItemClick","isParentActive","hasChildren","Children","enrichedChildren","childrenIds","useMemo","removeFragmentsAndEnrichChildren","child","attributes","listeners","transform","transition","setDraggableNodeRef","setDroppableNodeRef","setActivatorNodeRef","useSortable","useDeepCompareEffect","itemStyleProps","styling","TreeItemColorsClassMap","liClassName","backgroundClassName","merge","FOCUS_VISIBLE_STYLE","TreeItemSpacingClassMap","TreeItemBorderRadiusClassMap","showContent","wrapperContentClassName","showChildren","showDragHandle","showLabel","showExpandButton","previousItemToBeExpandedFeedback","_n","_o","TreeItemBorderClassMap","containerBorder","TreeItemBorderStyleClassMap","containerHeight","containerActiveHeight","containerClassName","TreeItemShadowClassMap","depthPadding","INDENTATION_WIDTH","levelPadding","liStyle","backgroundStyle","style","CSS","handlerProps","dragHandler","jsx","DragHandle","itemHandlerProps","createElement","noop","ExpandButton"],"mappings":"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"}
+{"version":3,"file":"TreeItem.es.js","sources":["../../../../src/components/Tree/TreeItem/TreeItem.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { useDndContext, useDndMonitor } from '@dnd-kit/core';\nimport { type AnimateLayoutChanges, useSortable } from '@dnd-kit/sortable';\nimport { CSS } from '@dnd-kit/utilities';\nimport noop from 'lodash-es/noop';\nimport { Children, type MouseEvent, memo, useCallback, useEffect, useMemo, useRef } from 'react';\n\nimport {\n    type RegisterNodeChildrenPayload,\n    type TreeDragEndEvent,\n    type TreeDragMoveEvent,\n    type TreeDragStartEvent,\n    TreeItemBorderClassMap,\n    TreeItemBorderRadiusClassMap,\n    TreeItemBorderStyleClassMap,\n    TreeItemColorsClassMap,\n    type TreeItemProps,\n    TreeItemShadowClassMap,\n    TreeItemSpacingClassMap,\n    type TreeItemStyling,\n} from '@components/Tree/types';\nimport { useDebounce } from '@hooks/useDebounce';\nimport { FOCUS_VISIBLE_STYLE } from '@utilities/focusStyle';\nimport { merge } from '@utilities/merge';\n\nimport { EXPAND_ONHOVER_DELAY, INDENTATION_WIDTH, type Projection } from '../helpers';\nimport { removeFragmentsAndEnrichChildren, useDeepCompareEffect } from '../utils';\n\nimport { DragHandle } from './DragHandle';\nimport { ExpandButton } from './ExpandButton';\nimport { type Overlay } from './TreeItemOverlay';\nimport { useTreeItem } from './useTreeItem';\n\nconst animateLayoutChanges: AnimateLayoutChanges = ({ isSorting, wasDragging }) =>\n    isSorting || wasDragging ? false : true;\n\n/** @private */\ntype TreeItemPrivateProps = {\n    level?: number;\n    levelConstraint?: Nullable<number>;\n    parentId?: string;\n    isSelected?: boolean;\n    isExpanded?: boolean;\n    /** onSelect is passed by the Tree component when cloning the TreeItem */\n    onSelect?: (id: string) => void;\n    /** onClick is the user defined callback to run after the onSelect */\n    onClick?: (id: string) => void;\n    onExpand?: (id: string) => void;\n    onShrink?: (id: string) => void;\n    projection?: Nullable<Projection>;\n    registerOverlay?: (overlay: Overlay) => void;\n    unregisterNodeChildren?: (payload: string) => void;\n    registerNodeChildren?: (payload: RegisterNodeChildrenPayload) => void;\n};\n\n/** @private */\nexport type InternalTreeItemProps = TreeItemProps & TreeItemPrivateProps;\n\nexport const TreeItem = memo(\n    ({\n        id,\n        type,\n        label,\n        onDrop,\n        accepts,\n        showCaret,\n        children,\n        parentId,\n        level = 0,\n        contentComponent,\n        onClick,\n        onSelect,\n        onExpand,\n        onShrink,\n        registerOverlay,\n        registerNodeChildren,\n        unregisterNodeChildren,\n        draggable = true,\n        expandable = true,\n        showDragHandlerOnHoverOnly = true,\n        dragHandlerPosition = 'left',\n        showContentWhileDragging = true,\n        itemStyle,\n        ignoreItemDoubleClick = false,\n        expandOnSelect = false,\n        'data-test-id': dataTestId = 'fondue-tree-item',\n    }: InternalTreeItemProps) => {\n        const { active, over } = useDndContext();\n        const { isSelected, isExpanded, projection } = useTreeItem(id);\n        const expandDebounced = useRef<Nullable<string> | undefined>();\n\n        const isActive = active?.id === id;\n        const activeProjection = isActive && projection !== null && projection !== undefined ? projection : null;\n\n        const overAccepts =\n            typeof over?.data?.current?.accepts === 'string' ? over.data.current.accepts?.split(', ') : [];\n\n        const parentAccepts =\n            typeof activeProjection?.accepts === 'string' ? activeProjection.accepts?.split(', ') : [];\n\n        const currentType = active?.data.current?.type || '';\n\n        const isWithin =\n            projection?.previousNode?.depth !== undefined && projection?.depth > projection?.previousNode?.depth;\n        const isWithinOneLevel = isWithin && projection.depth - 1 === projection?.previousNode?.depth;\n\n        const canDropWithinAndDeeper =\n            isWithin &&\n            projection?.previousNode?.accepts !== undefined &&\n            (projection?.previousNode?.accepts.includes(`${currentType}-deeper`) ||\n                projection?.previousNode?.accepts.includes(`${currentType}-within`));\n\n        const canDropWithin =\n            (isActive &&\n                isWithinOneLevel &&\n                activeProjection?.previousNode?.accepts !== undefined &&\n                activeProjection?.previousNode?.accepts.includes(`${currentType}-within`)) ||\n            (activeProjection?.isWithinParent && parentAccepts.includes(`${currentType}-within`));\n\n        const canDrop =\n            isActive && active?.data.current && ((overAccepts.includes(currentType) && !isWithin) || canDropWithin);\n\n        const expandProjectionParent = useDebounce((toExpandId: string) => {\n            if (expandDebounced.current === toExpandId) {\n                onExpand?.(toExpandId);\n            }\n        }, EXPAND_ONHOVER_DELAY);\n\n        useEffect(() => {\n            if (isActive) {\n                expandDebounced.current = isWithin ? activeProjection?.previousNode?.id : null;\n            }\n\n            if (\n                isActive &&\n                canDropWithinAndDeeper &&\n                activeProjection?.parentId &&\n                activeProjection.previousNode &&\n                activeProjection.parentId === activeProjection.previousNode.id &&\n                activeProjection.parentId !== active?.data?.current?.parentId\n            ) {\n                expandProjectionParent(activeProjection?.parentId);\n            }\n        }, [\n            active?.data,\n            activeProjection?.parentId,\n            activeProjection?.previousNode,\n            expandProjectionParent,\n            isActive,\n            canDropWithinAndDeeper,\n            isWithin,\n        ]);\n\n        const handleItemDragEnd = useCallback(\n            (event: TreeDragEndEvent) => {\n                const { over, active } = event;\n\n                if (\n                    !isActive ||\n                    !activeProjection ||\n                    (active.id === over?.id && activeProjection?.depth === active.data.current?.level)\n                ) {\n                    return;\n                }\n\n                if (isActive && over && canDrop && onDrop) {\n                    onDrop({\n                        id: active.id,\n                        parentId: activeProjection.parentId,\n                        sort: activeProjection.position,\n                        contentComponent,\n                        parentType: activeProjection.type,\n                    });\n                }\n            },\n            [isActive, activeProjection, canDrop, onDrop, contentComponent],\n        );\n\n        const handleItemDragStart = useCallback(\n            (event: TreeDragStartEvent) => {\n                if (event.active.id !== id) {\n                    return;\n                }\n\n                registerOverlay?.({\n                    contentComponent,\n                    children,\n                    id,\n                    label,\n                    level,\n                    dragHandlerPosition,\n                    showContentWhileDragging,\n                });\n            },\n            [\n                children,\n                contentComponent,\n                dragHandlerPosition,\n                id,\n                label,\n                level,\n                registerOverlay,\n                showContentWhileDragging,\n            ],\n        );\n\n        const handleItemDragMove = useCallback(\n            (event: TreeDragMoveEvent) => {\n                if (event.active.id === id) {\n                    document.body.style.setProperty('cursor', canDrop ? 'grabbing' : 'no-drop');\n                }\n            },\n            [canDrop, id],\n        );\n\n        useDndMonitor({\n            onDragEnd: handleItemDragEnd,\n            onDragStart: handleItemDragStart,\n            onDragMove: handleItemDragMove,\n        });\n\n        const toggleExpand = useCallback(\n            (event?: MouseEvent<HTMLButtonElement>) => {\n                event?.stopPropagation();\n                isExpanded ? onShrink?.(id) : onExpand?.(id);\n            },\n            [id, isExpanded, onExpand, onShrink],\n        );\n\n        const handleItemClick = useDebounce(\n            (event: MouseEvent<HTMLElement>) => {\n                event.stopPropagation();\n                if (ignoreItemDoubleClick && event.detail >= 2) {\n                    return;\n                }\n\n                if (expandOnSelect) {\n                    toggleExpand();\n                }\n\n                onSelect?.(id);\n                onClick?.(id);\n            },\n            ignoreItemDoubleClick ? 300 : 0,\n        );\n\n        const isParentActive = parentId && active?.id === parentId;\n\n        const hasChildren = Children.count(children) > 0;\n\n        const { enrichedChildren, childrenIds } = useMemo(() => {\n            const enrichedChildren = removeFragmentsAndEnrichChildren(children, { parentId: id, level: level + 1 });\n            return {\n                enrichedChildren,\n                childrenIds: enrichedChildren.map((child) => child.props.id),\n            };\n        }, [children, id, level]);\n\n        const {\n            attributes,\n            listeners,\n            transform,\n            transition,\n            setDraggableNodeRef,\n            setDroppableNodeRef,\n            setActivatorNodeRef,\n        } = useSortable({\n            id,\n            disabled: !draggable,\n            data: { type, accepts, parentId, level },\n            animateLayoutChanges,\n            transition: null,\n        });\n\n        useDeepCompareEffect(() => {\n            if (Children.count(enrichedChildren) === 0) {\n                unregisterNodeChildren?.(id);\n                return;\n            }\n\n            if (isActive || isParentActive) {\n                unregisterNodeChildren?.(id);\n                return;\n            }\n\n            if (isExpanded) {\n                registerNodeChildren?.({ id, children: enrichedChildren });\n            } else {\n                unregisterNodeChildren?.(id);\n            }\n        }, [isActive, isExpanded, isParentActive, enrichedChildren, id]);\n\n        const itemStyleProps = useMemo(() => {\n            return {\n                spacingY: 'none',\n                contentHight: 'single-line',\n                shadow: 'none',\n                borderRadius: 'small',\n                borderWidth: 'none',\n                borderStyle: 'none',\n                activeColorStyle: 'neutral',\n                ...itemStyle,\n            } as TreeItemStyling;\n        }, [itemStyle]);\n\n        const styling = TreeItemColorsClassMap[itemStyleProps.activeColorStyle ?? 'neutral'];\n\n        const { liClassName, backgroundClassName } = useMemo(() => {\n            return {\n                liClassName: merge([\n                    FOCUS_VISIBLE_STYLE,\n                    'tw-box-content tw-relative tw-cursor-default tw-transition-colors tw-outline-none tw-ring-inset tw-group tw-no-underline tw-leading-5',\n                    !isActive && isSelected ? styling.selectedTextColor : styling.textColor,\n                    TreeItemSpacingClassMap[itemStyleProps.spacingY ?? 'none'],\n                ]),\n                backgroundClassName: merge([\n                    'tw-block tw-absolute tw-inset-0 tw-transition-colors -tw-z-10',\n                    itemStyleProps.borderWidth !== 'none'\n                        ? TreeItemBorderRadiusClassMap[itemStyleProps.borderRadius ?? 'small']\n                        : '',\n                    !isActive &&\n                        (!isSelected || itemStyleProps.activeColorStyle !== 'neutral') &&\n                        styling.pressedBackgroundColor,\n                    !isActive && isSelected ? styling.selectedBackgroundColor : styling.backgroundColor,\n                ]),\n            };\n        }, [isActive, isSelected, itemStyleProps, styling]);\n\n        const showContent = showContentWhileDragging ? true : !isActive;\n        const wrapperContentClassName = merge([\n            'tw-max-w-full tw-grow tw-overflow-hidden',\n            isActive && showContentWhileDragging ? 'tw-opacity-75 tw-blur-sm tw-grayscale' : '',\n        ]);\n        const showChildren = isExpanded && !isActive;\n        const showDragHandle = draggable && !isActive;\n        const showLabel = label !== undefined && !isActive;\n        const showExpandButton = !isActive && expandable && (showCaret === undefined ? hasChildren : showCaret);\n\n        let previousItemToBeExpandedFeedback = '';\n        if (\n            !isActive &&\n            !isExpanded &&\n            showExpandButton &&\n            canDropWithinAndDeeper &&\n            projection?.previousNode?.id === id &&\n            projection?.depth > projection?.previousNode?.depth\n        ) {\n            previousItemToBeExpandedFeedback = merge([\n                'tw-border-solid tw-border-box-selected-strong',\n                TreeItemBorderRadiusClassMap[itemStyleProps.borderRadius ?? 'small'],\n                TreeItemBorderClassMap.small,\n            ]);\n        }\n\n        const containerBorder =\n            itemStyleProps.borderWidth !== 'none' && previousItemToBeExpandedFeedback === ''\n                ? merge([\n                      TreeItemBorderClassMap[itemStyleProps.borderWidth ?? 'none'],\n                      TreeItemBorderRadiusClassMap[itemStyleProps.borderRadius ?? 'small'],\n                      TreeItemBorderStyleClassMap[itemStyleProps.borderStyle ?? 'none'],\n                  ])\n                : '';\n        const containerHeight = itemStyleProps.contentHight === 'single-line' ? 'tw-h-10' : 'tw-h-fit';\n        const containerActiveHeight = itemStyleProps.contentHight === 'single-line' ? 'tw-h-12' : 'tw-h-fit';\n\n        const containerClassName = merge([\n            'tw-relative tw-z-0 tw-transition-colors tw-flex tw-items-center tw-leading-5 tw-width-fit tw-justify-between',\n            TreeItemShadowClassMap[itemStyleProps.shadow ?? 'none'],\n            isActive ? 'tw-border-dashed tw-border-2 tw-pr-0' : containerBorder,\n            isActive && TreeItemBorderRadiusClassMap[itemStyleProps.borderRadius ?? 'small'],\n            isActive ? containerActiveHeight : containerHeight,\n            isActive &&\n                (canDrop\n                    ? 'tw-border-box-selected-strong tw-bg-box-selected-hover'\n                    : 'tw-bg-box-negative-hover tw-border-box-negative-strong-hover'),\n            previousItemToBeExpandedFeedback,\n        ]);\n\n        const depthPadding = activeProjection?.depth ? activeProjection.depth * INDENTATION_WIDTH : undefined;\n        const levelPadding = isActive ? 0 : level * INDENTATION_WIDTH;\n\n        const liStyle = { paddingLeft: depthPadding ?? levelPadding };\n        const backgroundStyle =\n            itemStyleProps.borderWidth !== 'none' ? {} : { marginLeft: -1 * (depthPadding ?? levelPadding) };\n\n        const style = {\n            transform: CSS.Transform.toString(transform),\n            transition,\n        };\n\n        const handlerProps = { ...listeners, ...attributes };\n        const dragHandlerProps = dragHandlerPosition !== 'none' ? handlerProps : {};\n        const dragHandler =\n            dragHandlerPosition !== 'none' ? (\n                <DragHandle\n                    {...dragHandlerProps}\n                    active={isSelected}\n                    ref={setActivatorNodeRef}\n                    disabled={!showDragHandle}\n                    aria-hidden={!showDragHandle}\n                    showDragHandlerOnHoverOnly={showDragHandlerOnHoverOnly}\n                    activeColorStyle={itemStyleProps.activeColorStyle ?? 'neutral'}\n                />\n            ) : null;\n\n        const itemHandlerProps = dragHandlerPosition === 'none' ? { ...handlerProps } : {};\n\n        return (\n            <li\n                {...itemHandlerProps}\n                id={id}\n                key={id}\n                tabIndex={0}\n                // eslint-disable-next-line jsx-a11y/no-noninteractive-element-to-interactive-role\n                role=\"treeitem\"\n                style={liStyle}\n                onKeyDown={noop}\n                aria-label={label}\n                aria-level={level + 1}\n                onClick={handleItemClick}\n                className={liClassName}\n                ref={setDroppableNodeRef}\n                data-test-id={dataTestId}\n                aria-selected={isSelected}\n                aria-expanded={isExpanded}\n                data-has-children={hasChildren}\n                aria-owns={childrenIds.join(' ')}\n            >\n                <div ref={setDraggableNodeRef} className={containerClassName} style={style}>\n                    <span className={backgroundClassName} style={backgroundStyle} aria-hidden={true} />\n                    {dragHandlerPosition === 'left' && dragHandler}\n\n                    {expandable && (\n                        <ExpandButton\n                            active={transform?.y ? false : isSelected}\n                            onClick={toggleExpand}\n                            expanded={showChildren}\n                            disabled={!showExpandButton}\n                            aria-hidden={!showExpandButton}\n                            className={showExpandButton ? 'tw-visible' : 'tw-invisible tw-pointer-events-none'}\n                        />\n                    )}\n\n                    {showLabel && (\n                        <span className=\"first:tw-ml-3.5 tw-w-full tw-h-full tw-flex tw-items-center\">{label}</span>\n                    )}\n\n                    {showContent && <div className={wrapperContentClassName}>{contentComponent}</div>}\n\n                    {dragHandlerPosition === 'right' && dragHandler}\n                </div>\n            </li>\n        );\n    },\n);\n\nTreeItem.displayName = 'FondueTreeItem';\n"],"names":["animateLayoutChanges","isSorting","wasDragging","TreeItem","memo","id","type","label","onDrop","accepts","showCaret","children","parentId","level","contentComponent","onClick","onSelect","onExpand","onShrink","registerOverlay","registerNodeChildren","unregisterNodeChildren","draggable","expandable","showDragHandlerOnHoverOnly","dragHandlerPosition","showContentWhileDragging","itemStyle","ignoreItemDoubleClick","expandOnSelect","dataTestId","active","over","useDndContext","isSelected","isExpanded","projection","useTreeItem","expandDebounced","useRef","isActive","activeProjection","overAccepts","_b","_a","_c","parentAccepts","_d","currentType","_e","isWithin","_f","_g","isWithinOneLevel","_h","canDropWithinAndDeeper","_i","_j","_k","canDropWithin","_l","_m","canDrop","expandProjectionParent","useDebounce","toExpandId","EXPAND_ONHOVER_DELAY","useEffect","handleItemDragEnd","useCallback","event","handleItemDragStart","handleItemDragMove","useDndMonitor","toggleExpand","handleItemClick","isParentActive","hasChildren","Children","enrichedChildren","childrenIds","useMemo","removeFragmentsAndEnrichChildren","child","attributes","listeners","transform","transition","setDraggableNodeRef","setDroppableNodeRef","setActivatorNodeRef","useSortable","useDeepCompareEffect","itemStyleProps","styling","TreeItemColorsClassMap","liClassName","backgroundClassName","merge","FOCUS_VISIBLE_STYLE","TreeItemSpacingClassMap","TreeItemBorderRadiusClassMap","showContent","wrapperContentClassName","showChildren","showDragHandle","showLabel","showExpandButton","previousItemToBeExpandedFeedback","_n","_o","TreeItemBorderClassMap","containerBorder","TreeItemBorderStyleClassMap","containerHeight","containerActiveHeight","containerClassName","TreeItemShadowClassMap","depthPadding","INDENTATION_WIDTH","levelPadding","liStyle","backgroundStyle","style","CSS","handlerProps","dragHandler","jsx","DragHandle","itemHandlerProps","createElement","noop","ExpandButton"],"mappings":"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"}

package/dist/components/Tree/TreeItem/TreeItemMultiselect.es.js

@@ -1,16 +1,16 @@
 import { jsx as t, jsxs as $ } from "react/jsx-runtime";
-import { memo as q, useRef as D, useCallback as G, useEffect as J, Children as M, useMemo as x } from "react";
-import { Checkbox as Q, CheckboxEmphasis as V, CheckboxSize as X, CheckboxState as Z } from "../../Checkbox/Checkbox.es.js";
-import { getMultiselectLiClassName as S, getMultiselectBackgroundClassName as ee, getMultiselectContainerClassName as te } from "../helpers/multiselectTreeItemstyling.es.js";
-import { ExpandButton as ae } from "./ExpandButton.es.js";
-import { useMultiselectTreeItem as se } from "./useMultiselectTreeItem.es.js";
-import { Container as oe } from "../../Container/Container.es.js";
-import { getMultiselectCheckBoxState as re } from "../helpers/multiselect.es.js";
-import le from "../../../node_modules/.pnpm/lodash-es@4.17.21/node_modules/lodash-es/noop.es.js";
+import q from "../../../node_modules/.pnpm/lodash-es@4.17.21/node_modules/lodash-es/noop.es.js";
+import { memo as D, useRef as G, useCallback as J, useEffect as Q, Children as M, useMemo as x } from "react";
+import { Checkbox as V, CheckboxEmphasis as X, CheckboxSize as Z, CheckboxState as S } from "../../Checkbox/Checkbox.es.js";
+import { getMultiselectLiClassName as ee, getMultiselectBackgroundClassName as te, getMultiselectContainerClassName as ae } from "../helpers/multiselectTreeItemstyling.es.js";
+import { ExpandButton as se } from "./ExpandButton.es.js";
+import { useMultiselectTreeItem as oe } from "./useMultiselectTreeItem.es.js";
+import { Container as re } from "../../Container/Container.es.js";
+import { getMultiselectCheckBoxState as le } from "../helpers/multiselect.es.js";
 import { removeFragmentsAndEnrichChildren as ne } from "../utils/removeFragmentsAndEnrichChildren.es.js";
 import { useDeepCompareEffect as ce } from "../utils/useDeepCompareEffect.es.js";
 import { INDENTATION_WIDTH as me } from "../helpers/constants.es.js";
-const ie = q(
+const ie = D(
   ({
     id: e,
     label: c,
@@ -30,13 +30,13 @@ const ie = q(
     itemStyle: g,
     "data-test-id": W = "fondue-tree-item"
   }) => {
-    const B = D(null), { isSelected: o, isExpanded: r, isPartialSelected: E, isParentSelected: N } = se(e), j = G(
+    const B = G(null), { isSelected: o, isExpanded: r, isPartialSelected: E, isParentSelected: N } = oe(e), j = J(
       (l) => {
         l == null || l.stopPropagation(), r ? p == null || p(e) : i == null || i(e);
       },
       [e, r, i, p]
     );
-    J(() => {
+    Q(() => {
       N && !o && a && a(e, !0);
     }, [e, a, N, o, L]);
     const I = M.count(u) > 0, { enrichedChildren: C, childrenIds: A } = x(() => {
@@ -66,23 +66,23 @@ const ie = q(
       activeColorStyle: "neutral",
       ...g
     }), [g]), { liClassName: H, backgroundClassName: P } = x(() => ({
-      liClassName: S(n, s),
-      backgroundClassName: ee(n, o, s)
-    }), [n, s, o]), R = "tw-max-w-full	tw-grow", z = r, F = c !== void 0, w = b && (T ?? I), O = te(n), k = m * me, K = { paddingLeft: k }, U = n.borderWidth !== "none" ? {} : { marginLeft: -1 * k }, Y = s ? () => {
-    } : () => a == null ? void 0 : a(e, !1), y = h !== "none" ? /* @__PURE__ */ t(oe, { maxWidth: "16px", maxHeight: "16px", children: /* @__PURE__ */ t(
-      Q,
+      liClassName: ee(n, s),
+      backgroundClassName: te(n, o, s)
+    }), [n, s, o]), R = "tw-max-w-full	tw-grow", z = r, F = c !== void 0, w = b && (T ?? I), O = ae(n), k = m * me, K = { paddingLeft: k }, U = n.borderWidth !== "none" ? {} : { marginLeft: -1 * k }, Y = s ? () => {
+    } : () => a == null ? void 0 : a(e, !1), y = h !== "none" ? /* @__PURE__ */ t(re, { maxWidth: "16px", maxHeight: "16px", children: /* @__PURE__ */ t(
+      V,
       {
         id: `checkbox-${e}`,
         ref: B,
         disabled: s,
         "aria-label": c ?? "",
-        emphasis: V.Weak,
+        emphasis: X.Weak,
         helperText: "",
         hideLabel: !0,
         label: "",
         onChange: Y,
-        size: X.Default,
-        state: s ? Z.Unchecked : re(o, E),
+        size: Z.Default,
+        state: s ? S.Unchecked : le(o, E),
         tooltip: [],
         value: e
       }
@@ -94,7 +94,7 @@ const ie = q(
         tabIndex: 0,
         role: "treeitem",
         style: K,
-        onKeyDown: le,
+        onKeyDown: q,
         "aria-label": c,
         "aria-level": m + 1,
         className: H,
@@ -107,7 +107,7 @@ const ie = q(
           /* @__PURE__ */ t("span", { className: P, style: U, "aria-hidden": !0 }),
           h === "left" && y,
           b && /* @__PURE__ */ t(
-            ae,
+            se,
             {
               onClick: j,
               expanded: z,

package/dist/components/Tree/TreeItem/TreeItemMultiselect.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"TreeItemMultiselect.es.js","sources":["../../../../src/components/Tree/TreeItem/TreeItemMultiselect.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { noop } from 'lodash-es';\nimport { Children, type MouseEvent, memo, useCallback, useEffect, useMemo, useRef } from 'react';\n\nimport { Checkbox, CheckboxEmphasis, CheckboxSize, CheckboxState } from '@components/Checkbox/Checkbox';\nimport { Container } from '@components/Container';\nimport {\n    type RegisterNodeChildrenPayload,\n    type TreeItemMultiselectProps,\n    type TreeItemStyling,\n} from '@components/Tree/types';\n\nimport { INDENTATION_WIDTH, getMultiselectCheckBoxState } from '../helpers';\nimport {\n    getMultiselectBackgroundClassName,\n    getMultiselectContainerClassName,\n    getMultiselectLiClassName,\n} from '../helpers/multiselectTreeItemstyling';\nimport { removeFragmentsAndEnrichChildren, useDeepCompareEffect } from '../utils';\n\nimport { ExpandButton } from './ExpandButton';\nimport { useMultiselectTreeItem } from './useMultiselectTreeItem';\n\n/** @private */\ntype TreeItemPrivateProps = {\n    parentId?: string;\n    level?: number;\n    /** onSelect is passed by the Tree component when cloning the TreeItem */\n    onSelect?: (id: string, ignoreRemoveSelected: boolean) => void;\n    onExpand?: (id: string) => void;\n    onShrink?: (id: string) => void;\n    unregisterNodeChildren?: (payload: string) => void;\n    registerNodeChildren?: (payload: RegisterNodeChildrenPayload) => void;\n};\n\n/** @private */\nexport type InternalTreeItemMultiSelectProps = TreeItemMultiselectProps & TreeItemPrivateProps;\n\nexport const TreeItemMultiselect = memo(\n    ({\n        id,\n        label,\n        showCaret,\n        children,\n        level = 0,\n        contentComponent,\n        parentId,\n        onSelect,\n        onExpand,\n        onShrink,\n        registerNodeChildren,\n        unregisterNodeChildren,\n        isDisabled = false,\n        expandable = true,\n        checkBoxPosition = 'left',\n        itemStyle,\n        'data-test-id': dataTestId = 'fondue-tree-item',\n    }: InternalTreeItemMultiSelectProps) => {\n        const setActiveNodeRef = useRef<HTMLInputElement | null>(null);\n        const { isSelected, isExpanded, isPartialSelected, isParentSelected } = useMultiselectTreeItem(id);\n\n        const toggleExpand = useCallback(\n            (event?: MouseEvent<HTMLButtonElement>) => {\n                event?.stopPropagation();\n                isExpanded ? onShrink?.(id) : onExpand?.(id);\n            },\n            [id, isExpanded, onExpand, onShrink],\n        );\n\n        useEffect(() => {\n            if (isParentSelected && !isSelected && onSelect) {\n                onSelect(id, true);\n            }\n        }, [id, onSelect, isParentSelected, isSelected, parentId]);\n\n        const hasChildren = Children.count(children) > 0;\n\n        const { enrichedChildren, childrenIds } = useMemo(() => {\n            const enrichedChildren = removeFragmentsAndEnrichChildren(children, {\n                parentId: id,\n                level: level + 1,\n            });\n\n            return {\n                enrichedChildren,\n                childrenIds: enrichedChildren.map((child) => child.props.id),\n            };\n        }, [children, id, level]);\n\n        useDeepCompareEffect(() => {\n            if (Children.count(enrichedChildren) === 0 || !isExpanded) {\n                unregisterNodeChildren?.(id);\n                return;\n            }\n\n            registerNodeChildren?.({ id, children: enrichedChildren });\n        }, [isExpanded, enrichedChildren, id]);\n\n        const itemStyleProps = useMemo(() => {\n            return {\n                spacingY: 'none',\n                contentHight: 'single-line',\n                shadow: 'none',\n                borderRadius: 'small',\n                borderWidth: 'none',\n                borderStyle: 'none',\n                activeColorStyle: 'neutral',\n                ...itemStyle,\n            } as TreeItemStyling;\n        }, [itemStyle]);\n\n        const { liClassName, backgroundClassName } = useMemo(() => {\n            return {\n                liClassName: getMultiselectLiClassName(itemStyleProps, isDisabled),\n                backgroundClassName: getMultiselectBackgroundClassName(itemStyleProps, isSelected, isDisabled),\n            };\n        }, [itemStyleProps, isDisabled, isSelected]);\n\n        const wrapperContentClassName = 'tw-max-w-full\ttw-grow';\n        const showChildren = isExpanded;\n        const showLabel = label !== undefined;\n        const showExpandButton = expandable && (showCaret ?? hasChildren);\n\n        const containerClassName = getMultiselectContainerClassName(itemStyleProps);\n\n        const levelPadding = level * INDENTATION_WIDTH;\n        const liStyle = { paddingLeft: levelPadding };\n        const backgroundStyle = itemStyleProps.borderWidth !== 'none' ? {} : { marginLeft: -1 * levelPadding };\n\n        const checkBoxOnSelect = isDisabled ? () => {} : () => onSelect?.(id, false);\n        const checkBox =\n            checkBoxPosition !== 'none' ? (\n                <Container maxWidth=\"16px\" maxHeight=\"16px\">\n                    <Checkbox\n                        id={`checkbox-${id}`}\n                        ref={setActiveNodeRef}\n                        disabled={isDisabled}\n                        aria-label={label ?? ''}\n                        emphasis={CheckboxEmphasis.Weak}\n                        helperText=\"\"\n                        hideLabel\n                        label=\"\"\n                        onChange={checkBoxOnSelect}\n                        size={CheckboxSize.Default}\n                        state={\n                            isDisabled\n                                ? CheckboxState.Unchecked\n                                : getMultiselectCheckBoxState(isSelected, isPartialSelected)\n                        }\n                        tooltip={[]}\n                        value={id}\n                    />\n                </Container>\n            ) : null;\n\n        return (\n            <li\n                id={id}\n                key={id}\n                tabIndex={0}\n                // eslint-disable-next-line jsx-a11y/no-noninteractive-element-to-interactive-role\n                role=\"treeitem\"\n                style={liStyle}\n                onKeyDown={noop}\n                aria-label={label}\n                aria-level={level + 1}\n                className={liClassName}\n                data-test-id={dataTestId}\n                aria-selected={isSelected}\n                aria-expanded={isExpanded}\n                data-has-children={hasChildren}\n                aria-owns={childrenIds.join(' ')}\n            >\n                <div className={containerClassName}>\n                    <span className={backgroundClassName} style={backgroundStyle} aria-hidden={true} />\n                    {checkBoxPosition === 'left' && checkBox}\n\n                    {expandable && (\n                        <ExpandButton\n                            onClick={toggleExpand}\n                            expanded={showChildren}\n                            disabled={!showExpandButton}\n                            aria-hidden={!showExpandButton}\n                            className={showExpandButton ? 'tw-visible' : 'tw-invisible tw-pointer-events-none'}\n                        />\n                    )}\n\n                    {showLabel && <span className=\"first:tw-ml-3.5 tw-h-full tw-flex tw-items-center\">{label}</span>}\n\n                    <div className={wrapperContentClassName}>{contentComponent}</div>\n\n                    {checkBoxPosition === 'right' && checkBox}\n                </div>\n            </li>\n        );\n    },\n);\n\nTreeItemMultiselect.displayName = 'FondueTreeItemMultiselect';\n"],"names":["TreeItemMultiselect","memo","id","label","showCaret","children","level","contentComponent","parentId","onSelect","onExpand","onShrink","registerNodeChildren","unregisterNodeChildren","isDisabled","expandable","checkBoxPosition","itemStyle","dataTestId","setActiveNodeRef","useRef","isSelected","isExpanded","isPartialSelected","isParentSelected","useMultiselectTreeItem","toggleExpand","useCallback","event","useEffect","hasChildren","Children","enrichedChildren","childrenIds","useMemo","removeFragmentsAndEnrichChildren","child","useDeepCompareEffect","itemStyleProps","liClassName","backgroundClassName","getMultiselectLiClassName","getMultiselectBackgroundClassName","wrapperContentClassName","showChildren","showLabel","showExpandButton","containerClassName","getMultiselectContainerClassName","levelPadding","INDENTATION_WIDTH","liStyle","backgroundStyle","checkBoxOnSelect","checkBox","jsx","Container","Checkbox","CheckboxEmphasis","CheckboxSize","CheckboxState","getMultiselectCheckBoxState","noop","jsxs","ExpandButton"],"mappings":"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"}
+{"version":3,"file":"TreeItemMultiselect.es.js","sources":["../../../../src/components/Tree/TreeItem/TreeItemMultiselect.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport noop from 'lodash-es/noop';\nimport { Children, type MouseEvent, memo, useCallback, useEffect, useMemo, useRef } from 'react';\n\nimport { Checkbox, CheckboxEmphasis, CheckboxSize, CheckboxState } from '@components/Checkbox/Checkbox';\nimport { Container } from '@components/Container';\nimport {\n    type RegisterNodeChildrenPayload,\n    type TreeItemMultiselectProps,\n    type TreeItemStyling,\n} from '@components/Tree/types';\n\nimport { INDENTATION_WIDTH, getMultiselectCheckBoxState } from '../helpers';\nimport {\n    getMultiselectBackgroundClassName,\n    getMultiselectContainerClassName,\n    getMultiselectLiClassName,\n} from '../helpers/multiselectTreeItemstyling';\nimport { removeFragmentsAndEnrichChildren, useDeepCompareEffect } from '../utils';\n\nimport { ExpandButton } from './ExpandButton';\nimport { useMultiselectTreeItem } from './useMultiselectTreeItem';\n\n/** @private */\ntype TreeItemPrivateProps = {\n    parentId?: string;\n    level?: number;\n    /** onSelect is passed by the Tree component when cloning the TreeItem */\n    onSelect?: (id: string, ignoreRemoveSelected: boolean) => void;\n    onExpand?: (id: string) => void;\n    onShrink?: (id: string) => void;\n    unregisterNodeChildren?: (payload: string) => void;\n    registerNodeChildren?: (payload: RegisterNodeChildrenPayload) => void;\n};\n\n/** @private */\nexport type InternalTreeItemMultiSelectProps = TreeItemMultiselectProps & TreeItemPrivateProps;\n\nexport const TreeItemMultiselect = memo(\n    ({\n        id,\n        label,\n        showCaret,\n        children,\n        level = 0,\n        contentComponent,\n        parentId,\n        onSelect,\n        onExpand,\n        onShrink,\n        registerNodeChildren,\n        unregisterNodeChildren,\n        isDisabled = false,\n        expandable = true,\n        checkBoxPosition = 'left',\n        itemStyle,\n        'data-test-id': dataTestId = 'fondue-tree-item',\n    }: InternalTreeItemMultiSelectProps) => {\n        const setActiveNodeRef = useRef<HTMLInputElement | null>(null);\n        const { isSelected, isExpanded, isPartialSelected, isParentSelected } = useMultiselectTreeItem(id);\n\n        const toggleExpand = useCallback(\n            (event?: MouseEvent<HTMLButtonElement>) => {\n                event?.stopPropagation();\n                isExpanded ? onShrink?.(id) : onExpand?.(id);\n            },\n            [id, isExpanded, onExpand, onShrink],\n        );\n\n        useEffect(() => {\n            if (isParentSelected && !isSelected && onSelect) {\n                onSelect(id, true);\n            }\n        }, [id, onSelect, isParentSelected, isSelected, parentId]);\n\n        const hasChildren = Children.count(children) > 0;\n\n        const { enrichedChildren, childrenIds } = useMemo(() => {\n            const enrichedChildren = removeFragmentsAndEnrichChildren(children, {\n                parentId: id,\n                level: level + 1,\n            });\n\n            return {\n                enrichedChildren,\n                childrenIds: enrichedChildren.map((child) => child.props.id),\n            };\n        }, [children, id, level]);\n\n        useDeepCompareEffect(() => {\n            if (Children.count(enrichedChildren) === 0 || !isExpanded) {\n                unregisterNodeChildren?.(id);\n                return;\n            }\n\n            registerNodeChildren?.({ id, children: enrichedChildren });\n        }, [isExpanded, enrichedChildren, id]);\n\n        const itemStyleProps = useMemo(() => {\n            return {\n                spacingY: 'none',\n                contentHight: 'single-line',\n                shadow: 'none',\n                borderRadius: 'small',\n                borderWidth: 'none',\n                borderStyle: 'none',\n                activeColorStyle: 'neutral',\n                ...itemStyle,\n            } as TreeItemStyling;\n        }, [itemStyle]);\n\n        const { liClassName, backgroundClassName } = useMemo(() => {\n            return {\n                liClassName: getMultiselectLiClassName(itemStyleProps, isDisabled),\n                backgroundClassName: getMultiselectBackgroundClassName(itemStyleProps, isSelected, isDisabled),\n            };\n        }, [itemStyleProps, isDisabled, isSelected]);\n\n        const wrapperContentClassName = 'tw-max-w-full\ttw-grow';\n        const showChildren = isExpanded;\n        const showLabel = label !== undefined;\n        const showExpandButton = expandable && (showCaret ?? hasChildren);\n\n        const containerClassName = getMultiselectContainerClassName(itemStyleProps);\n\n        const levelPadding = level * INDENTATION_WIDTH;\n        const liStyle = { paddingLeft: levelPadding };\n        const backgroundStyle = itemStyleProps.borderWidth !== 'none' ? {} : { marginLeft: -1 * levelPadding };\n\n        const checkBoxOnSelect = isDisabled ? () => {} : () => onSelect?.(id, false);\n        const checkBox =\n            checkBoxPosition !== 'none' ? (\n                <Container maxWidth=\"16px\" maxHeight=\"16px\">\n                    <Checkbox\n                        id={`checkbox-${id}`}\n                        ref={setActiveNodeRef}\n                        disabled={isDisabled}\n                        aria-label={label ?? ''}\n                        emphasis={CheckboxEmphasis.Weak}\n                        helperText=\"\"\n                        hideLabel\n                        label=\"\"\n                        onChange={checkBoxOnSelect}\n                        size={CheckboxSize.Default}\n                        state={\n                            isDisabled\n                                ? CheckboxState.Unchecked\n                                : getMultiselectCheckBoxState(isSelected, isPartialSelected)\n                        }\n                        tooltip={[]}\n                        value={id}\n                    />\n                </Container>\n            ) : null;\n\n        return (\n            <li\n                id={id}\n                key={id}\n                tabIndex={0}\n                // eslint-disable-next-line jsx-a11y/no-noninteractive-element-to-interactive-role\n                role=\"treeitem\"\n                style={liStyle}\n                onKeyDown={noop}\n                aria-label={label}\n                aria-level={level + 1}\n                className={liClassName}\n                data-test-id={dataTestId}\n                aria-selected={isSelected}\n                aria-expanded={isExpanded}\n                data-has-children={hasChildren}\n                aria-owns={childrenIds.join(' ')}\n            >\n                <div className={containerClassName}>\n                    <span className={backgroundClassName} style={backgroundStyle} aria-hidden={true} />\n                    {checkBoxPosition === 'left' && checkBox}\n\n                    {expandable && (\n                        <ExpandButton\n                            onClick={toggleExpand}\n                            expanded={showChildren}\n                            disabled={!showExpandButton}\n                            aria-hidden={!showExpandButton}\n                            className={showExpandButton ? 'tw-visible' : 'tw-invisible tw-pointer-events-none'}\n                        />\n                    )}\n\n                    {showLabel && <span className=\"first:tw-ml-3.5 tw-h-full tw-flex tw-items-center\">{label}</span>}\n\n                    <div className={wrapperContentClassName}>{contentComponent}</div>\n\n                    {checkBoxPosition === 'right' && checkBox}\n                </div>\n            </li>\n        );\n    },\n);\n\nTreeItemMultiselect.displayName = 'FondueTreeItemMultiselect';\n"],"names":["TreeItemMultiselect","memo","id","label","showCaret","children","level","contentComponent","parentId","onSelect","onExpand","onShrink","registerNodeChildren","unregisterNodeChildren","isDisabled","expandable","checkBoxPosition","itemStyle","dataTestId","setActiveNodeRef","useRef","isSelected","isExpanded","isPartialSelected","isParentSelected","useMultiselectTreeItem","toggleExpand","useCallback","event","useEffect","hasChildren","Children","enrichedChildren","childrenIds","useMemo","removeFragmentsAndEnrichChildren","child","useDeepCompareEffect","itemStyleProps","liClassName","backgroundClassName","getMultiselectLiClassName","getMultiselectBackgroundClassName","wrapperContentClassName","showChildren","showLabel","showExpandButton","containerClassName","getMultiselectContainerClassName","levelPadding","INDENTATION_WIDTH","liStyle","backgroundStyle","checkBoxOnSelect","checkBox","jsx","Container","Checkbox","CheckboxEmphasis","CheckboxSize","CheckboxState","getMultiselectCheckBoxState","noop","jsxs","ExpandButton"],"mappings":"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"}

package/dist/components/Tree/helpers/reducer.es.js

@@ -1,5 +1,5 @@
-import { getReactNodeIdsInFlatArray as l, removeReactNodesFromFlatArray as h, getReactNodesInFlatArray as I } from "./nodes.es.js";
 import a from "../../../node_modules/.pnpm/lodash-es@4.17.21/node_modules/lodash-es/isEqualWith.es.js";
+import { getReactNodeIdsInFlatArray as l, removeReactNodesFromFlatArray as h, getReactNodesInFlatArray as I } from "./nodes.es.js";
 const x = (t, r) => r && (t.key === "Meta" || t.ctrlKey), m = (t, r) => t.findIndex((o) => o.props.id === r), F = (t, r) => t.filter((o) => o.props.parentId === r).map((o) => o.props.id), N = (t, r, o) => {
   const s = l(t, r), e = s.length > 0 ? h(t, s) : t, n = m(e, r);
   return n === -1 ? t : [...e.slice(0, n + 1), ...o, ...e.slice(n + 1)];

package/dist/components/Tree/helpers/reducer.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"reducer.es.js","sources":["../../../../src/components/Tree/helpers/reducer.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { isEqualWith } from 'lodash-es';\nimport { type ReactElement } from 'react';\n\nimport { type InternalTreeItemProps } from '../TreeItem';\n\nimport { getReactNodeIdsInFlatArray, getReactNodesInFlatArray, removeReactNodesFromFlatArray } from './nodes';\n\nexport const shouldUpdateTreeState = (event: globalThis.KeyboardEvent, multiselect: boolean) => {\n    return multiselect && (event.key === 'Meta' || event.ctrlKey);\n};\n\nexport const findIndexById = (nodes: ReactElement<InternalTreeItemProps>[], id: string) => {\n    return nodes.findIndex((node) => node.props.id === id);\n};\n\nexport const getNodeChildrenIds = (nodes: ReactElement<InternalTreeItemProps>[], id: string) => {\n    return nodes.filter((node) => node.props.parentId === id).map((node) => node.props.id);\n};\n\nexport const updateNodeWithNewChildren = (\n    nodes: ReactElement<InternalTreeItemProps>[],\n    parentId: string,\n    children: ReactElement[],\n) => {\n    const nodeIds = getReactNodeIdsInFlatArray(nodes, parentId);\n    const cleanNodes = nodeIds.length > 0 ? removeReactNodesFromFlatArray(nodes, nodeIds) : nodes;\n    const parentIndex = findIndexById(cleanNodes, parentId);\n    if (parentIndex === -1) {\n        return nodes;\n    }\n\n    return [...cleanNodes.slice(0, parentIndex + 1), ...children, ...cleanNodes.slice(parentIndex + 1)];\n};\n\nexport const getCurrentChildrenForNewNodesIfExpanded = (\n    currentNodes: ReactElement[],\n    expandedIds: Set<string>,\n    newNodes: ReactElement[],\n) => {\n    const updatedTreeNode: ReactElement[] = [];\n    for (const node of newNodes) {\n        updatedTreeNode.push(node);\n\n        if (!expandedIds.has(node.props.id)) {\n            continue;\n        }\n\n        for (const child of getReactNodesInFlatArray(currentNodes, node.props.id)) {\n            updatedTreeNode.push(child);\n        }\n    }\n\n    return updatedTreeNode;\n};\n\nexport const currentNodesChanged = (\n    currentChildrenIds: string[],\n    currentNodes: ReactElement<InternalTreeItemProps>[],\n    newNodes: ReactElement<InternalTreeItemProps>[],\n) => {\n    for (const nodeId of currentChildrenIds) {\n        const newNode = newNodes.find((n) => n.props.id === nodeId);\n        const newContentComponent = newNode?.props?.contentComponent as Partial<ReactElement>;\n\n        const currentNode = currentNodes.find((n) => n.props.id === nodeId);\n        const currentContentComponent = currentNode?.props?.contentComponent as Partial<ReactElement>;\n\n        if (\n            (!currentContentComponent || !newContentComponent) &&\n            !isEqualWith(currentNode?.props, newNode?.props, isEqualCustomizer)\n        ) {\n            return true;\n        }\n\n        if (!isEqualWith(currentContentComponent?.props, newContentComponent?.props, isEqualCustomizer)) {\n            return true;\n        }\n    }\n    return false;\n};\n\nconst isEqualCustomizer = (nodeProp: unknown, othernodeProp: unknown): boolean | undefined => {\n    if (typeof nodeProp === 'function' || typeof othernodeProp === 'function') {\n        return true;\n    }\n};\n"],"names":["shouldUpdateTreeState","event","multiselect","findIndexById","nodes","id","node","getNodeChildrenIds","updateNodeWithNewChildren","parentId","children","nodeIds","getReactNodeIdsInFlatArray","cleanNodes","removeReactNodesFromFlatArray","parentIndex","getCurrentChildrenForNewNodesIfExpanded","currentNodes","expandedIds","newNodes","updatedTreeNode","child","getReactNodesInFlatArray","currentNodesChanged","currentChildrenIds","nodeId","newNode","n","newContentComponent","_a","currentNode","currentContentComponent","_b","isEqualWith","isEqualCustomizer","nodeProp","othernodeProp"],"mappings":";;AASa,MAAAA,IAAwB,CAACC,GAAiCC,MAC5DA,MAAgBD,EAAM,QAAQ,UAAUA,EAAM,UAG5CE,IAAgB,CAACC,GAA8CC,MACjED,EAAM,UAAU,CAACE,MAASA,EAAK,MAAM,OAAOD,CAAE,GAG5CE,IAAqB,CAACH,GAA8CC,MACtED,EAAM,OAAO,CAACE,MAASA,EAAK,MAAM,aAAaD,CAAE,EAAE,IAAI,CAACC,MAASA,EAAK,MAAM,EAAE,GAG5EE,IAA4B,CACrCJ,GACAK,GACAC,MACC;AACK,QAAAC,IAAUC,EAA2BR,GAAOK,CAAQ,GACpDI,IAAaF,EAAQ,SAAS,IAAIG,EAA8BV,GAAOO,CAAO,IAAIP,GAClFW,IAAcZ,EAAcU,GAAYJ,CAAQ;AACtD,SAAIM,MAAgB,KACTX,IAGJ,CAAC,GAAGS,EAAW,MAAM,GAAGE,IAAc,CAAC,GAAG,GAAGL,GAAU,GAAGG,EAAW,MAAME,IAAc,CAAC,CAAC;AACtG,GAEaC,IAA0C,CACnDC,GACAC,GACAC,MACC;AACD,QAAMC,IAAkC,CAAA;AACxC,aAAWd,KAAQa;AAGf,QAFAC,EAAgB,KAAKd,CAAI,GAErB,EAACY,EAAY,IAAIZ,EAAK,MAAM,EAAE;AAIlC,iBAAWe,KAASC,EAAyBL,GAAcX,EAAK,MAAM,EAAE;AACpE,QAAAc,EAAgB,KAAKC,CAAK;AAI3B,SAAAD;AACX,GAEaG,IAAsB,CAC/BC,GACAP,GACAE,MACC;;AACD,aAAWM,KAAUD,GAAoB;AAC/B,UAAAE,IAAUP,EAAS,KAAK,CAACQ,MAAMA,EAAE,MAAM,OAAOF,CAAM,GACpDG,KAAsBC,IAAAH,KAAA,gBAAAA,EAAS,UAAT,gBAAAG,EAAgB,kBAEtCC,IAAcb,EAAa,KAAK,CAACU,MAAMA,EAAE,MAAM,OAAOF,CAAM,GAC5DM,KAA0BC,IAAAF,KAAA,gBAAAA,EAAa,UAAb,gBAAAE,EAAoB;AASpD,SANK,CAACD,KAA2B,CAACH,MAC9B,CAACK,EAAYH,KAAA,gBAAAA,EAAa,OAAOJ,KAAA,gBAAAA,EAAS,OAAOQ,CAAiB,KAKlE,CAACD,EAAYF,KAAA,gBAAAA,EAAyB,OAAOH,KAAA,gBAAAA,EAAqB,OAAOM,CAAiB;AACnF,aAAA;AAAA,EAEf;AACO,SAAA;AACX,GAEMA,IAAoB,CAACC,GAAmBC,MAAgD;AAC1F,MAAI,OAAOD,KAAa,cAAc,OAAOC,KAAkB;AACpD,WAAA;AAEf;"}
+{"version":3,"file":"reducer.es.js","sources":["../../../../src/components/Tree/helpers/reducer.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport isEqualWith from 'lodash-es/isEqualWith';\nimport { type ReactElement } from 'react';\n\nimport { type InternalTreeItemProps } from '../TreeItem';\n\nimport { getReactNodeIdsInFlatArray, getReactNodesInFlatArray, removeReactNodesFromFlatArray } from './nodes';\n\nexport const shouldUpdateTreeState = (event: globalThis.KeyboardEvent, multiselect: boolean) => {\n    return multiselect && (event.key === 'Meta' || event.ctrlKey);\n};\n\nexport const findIndexById = (nodes: ReactElement<InternalTreeItemProps>[], id: string) => {\n    return nodes.findIndex((node) => node.props.id === id);\n};\n\nexport const getNodeChildrenIds = (nodes: ReactElement<InternalTreeItemProps>[], id: string) => {\n    return nodes.filter((node) => node.props.parentId === id).map((node) => node.props.id);\n};\n\nexport const updateNodeWithNewChildren = (\n    nodes: ReactElement<InternalTreeItemProps>[],\n    parentId: string,\n    children: ReactElement[],\n) => {\n    const nodeIds = getReactNodeIdsInFlatArray(nodes, parentId);\n    const cleanNodes = nodeIds.length > 0 ? removeReactNodesFromFlatArray(nodes, nodeIds) : nodes;\n    const parentIndex = findIndexById(cleanNodes, parentId);\n    if (parentIndex === -1) {\n        return nodes;\n    }\n\n    return [...cleanNodes.slice(0, parentIndex + 1), ...children, ...cleanNodes.slice(parentIndex + 1)];\n};\n\nexport const getCurrentChildrenForNewNodesIfExpanded = (\n    currentNodes: ReactElement[],\n    expandedIds: Set<string>,\n    newNodes: ReactElement[],\n) => {\n    const updatedTreeNode: ReactElement[] = [];\n    for (const node of newNodes) {\n        updatedTreeNode.push(node);\n\n        if (!expandedIds.has(node.props.id)) {\n            continue;\n        }\n\n        for (const child of getReactNodesInFlatArray(currentNodes, node.props.id)) {\n            updatedTreeNode.push(child);\n        }\n    }\n\n    return updatedTreeNode;\n};\n\nexport const currentNodesChanged = (\n    currentChildrenIds: string[],\n    currentNodes: ReactElement<InternalTreeItemProps>[],\n    newNodes: ReactElement<InternalTreeItemProps>[],\n) => {\n    for (const nodeId of currentChildrenIds) {\n        const newNode = newNodes.find((n) => n.props.id === nodeId);\n        const newContentComponent = newNode?.props?.contentComponent as Partial<ReactElement>;\n\n        const currentNode = currentNodes.find((n) => n.props.id === nodeId);\n        const currentContentComponent = currentNode?.props?.contentComponent as Partial<ReactElement>;\n\n        if (\n            (!currentContentComponent || !newContentComponent) &&\n            !isEqualWith(currentNode?.props, newNode?.props, isEqualCustomizer)\n        ) {\n            return true;\n        }\n\n        if (!isEqualWith(currentContentComponent?.props, newContentComponent?.props, isEqualCustomizer)) {\n            return true;\n        }\n    }\n    return false;\n};\n\nconst isEqualCustomizer = (nodeProp: unknown, othernodeProp: unknown): boolean | undefined => {\n    if (typeof nodeProp === 'function' || typeof othernodeProp === 'function') {\n        return true;\n    }\n};\n"],"names":["shouldUpdateTreeState","event","multiselect","findIndexById","nodes","id","node","getNodeChildrenIds","updateNodeWithNewChildren","parentId","children","nodeIds","getReactNodeIdsInFlatArray","cleanNodes","removeReactNodesFromFlatArray","parentIndex","getCurrentChildrenForNewNodesIfExpanded","currentNodes","expandedIds","newNodes","updatedTreeNode","child","getReactNodesInFlatArray","currentNodesChanged","currentChildrenIds","nodeId","newNode","n","newContentComponent","_a","currentNode","currentContentComponent","_b","isEqualWith","isEqualCustomizer","nodeProp","othernodeProp"],"mappings":";;AASa,MAAAA,IAAwB,CAACC,GAAiCC,MAC5DA,MAAgBD,EAAM,QAAQ,UAAUA,EAAM,UAG5CE,IAAgB,CAACC,GAA8CC,MACjED,EAAM,UAAU,CAACE,MAASA,EAAK,MAAM,OAAOD,CAAE,GAG5CE,IAAqB,CAACH,GAA8CC,MACtED,EAAM,OAAO,CAACE,MAASA,EAAK,MAAM,aAAaD,CAAE,EAAE,IAAI,CAACC,MAASA,EAAK,MAAM,EAAE,GAG5EE,IAA4B,CACrCJ,GACAK,GACAC,MACC;AACK,QAAAC,IAAUC,EAA2BR,GAAOK,CAAQ,GACpDI,IAAaF,EAAQ,SAAS,IAAIG,EAA8BV,GAAOO,CAAO,IAAIP,GAClFW,IAAcZ,EAAcU,GAAYJ,CAAQ;AACtD,SAAIM,MAAgB,KACTX,IAGJ,CAAC,GAAGS,EAAW,MAAM,GAAGE,IAAc,CAAC,GAAG,GAAGL,GAAU,GAAGG,EAAW,MAAME,IAAc,CAAC,CAAC;AACtG,GAEaC,IAA0C,CACnDC,GACAC,GACAC,MACC;AACD,QAAMC,IAAkC,CAAA;AACxC,aAAWd,KAAQa;AAGf,QAFAC,EAAgB,KAAKd,CAAI,GAErB,EAACY,EAAY,IAAIZ,EAAK,MAAM,EAAE;AAIlC,iBAAWe,KAASC,EAAyBL,GAAcX,EAAK,MAAM,EAAE;AACpE,QAAAc,EAAgB,KAAKC,CAAK;AAI3B,SAAAD;AACX,GAEaG,IAAsB,CAC/BC,GACAP,GACAE,MACC;;AACD,aAAWM,KAAUD,GAAoB;AAC/B,UAAAE,IAAUP,EAAS,KAAK,CAACQ,MAAMA,EAAE,MAAM,OAAOF,CAAM,GACpDG,KAAsBC,IAAAH,KAAA,gBAAAA,EAAS,UAAT,gBAAAG,EAAgB,kBAEtCC,IAAcb,EAAa,KAAK,CAACU,MAAMA,EAAE,MAAM,OAAOF,CAAM,GAC5DM,KAA0BC,IAAAF,KAAA,gBAAAA,EAAa,UAAb,gBAAAE,EAAoB;AASpD,SANK,CAACD,KAA2B,CAACH,MAC9B,CAACK,EAAYH,KAAA,gBAAAA,EAAa,OAAOJ,KAAA,gBAAAA,EAAS,OAAOQ,CAAiB,KAKlE,CAACD,EAAYF,KAAA,gBAAAA,EAAyB,OAAOH,KAAA,gBAAAA,EAAqB,OAAOM,CAAiB;AACnF,aAAA;AAAA,EAEf;AACO,SAAA;AACX,GAEMA,IAAoB,CAACC,GAAmBC,MAAgD;AAC1F,MAAI,OAAOD,KAAa,cAAc,OAAOC,KAAkB;AACpD,WAAA;AAEf;"}