npm - @frontify/fondue - Versions diffs - 12.0.0-beta.10 → 12.0.0-beta.12 - Mend

@frontify/fondue 12.0.0-beta.10 → 12.0.0-beta.12

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (41) hide show

package/dist/components/Tree/Node.es.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Node.es.js","sources":["../../../src/components/Tree/Node.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. /\n\nimport React, { ReactElement, useLayoutEffect, useRef, useState } from 'react';\nimport { merge } from '@utilities/merge';\nimport { useDrag } from 'react-dnd';\nimport { DropZone, OnDropCallback } from '@components/DropZone';\nimport { TreeFlatListItem } from '@components/Tree';\nimport { DraggableItem, DropZonePosition } from '@utilities/dnd';\nimport { EditableText } from '../EditableText';\n\nexport type RenderNodeArrayData = Omit<NodeProps, 'isFirst' \| 'strong' \| 'node'> & {\n nodes: DraggableItem<TreeNodeItem>[];\n};\n\nexport const renderNodeArray = ({\n nodes,\n activeIds,\n treeId,\n onClick,\n onDrop,\n onEditableSave,\n parentIds,\n}: RenderNodeArrayData) =>\n nodes.map((node, i) => (\n <Node\n key={node.id}\n node={node}\n nodeIndex={i}\n activeIds={activeIds}\n onClick={onClick}\n isFirst={i === 0}\n onDrop={onDrop}\n onEditableSave={onEditableSave}\n parentIds={parentIds}\n treeId={treeId}\n />\n ));\n\nexport interface TreeNodeItem extends TreeFlatListItem {\n nodes?: DraggableItem<TreeNodeItem>[];\n}\n\ntype NodeProps = {\n node: DraggableItem<TreeNodeItem>;\n strong?: boolean;\n nodeIndex?: number;\n activeIds?: NullableString[];\n parentIds?: string[];\n onClick: (id: NullableString) => void;\n isFirst: boolean;\n treeId: string;\n onDrop?: OnDropCallback<TreeNodeItem>;\n onEditableSave?: (targetItemId: string, value: string) => void;\n};\n\nconst getInitialShowNodesValue = (\n currentNode: DraggableItem<TreeNodeItem>,\n activeNodeIds?: NullableString[],\n): boolean => {\n const hasActiveChildNodes = (node: DraggableItem<TreeNodeItem>, activeIds?: NullableString[]): boolean => {\n if (node.nodes && activeIds) {\n for (const childNode of node.nodes) {\n if (activeIds.includes(childNode.id) \|\| hasActiveChildNodes(childNode, activeIds)) {\n return true;\n }\n }\n }\n return false;\n };\n\n return hasActiveChildNodes(currentNode, activeNodeIds);\n};\n\nexport const Node = ({\n node,\n strong = false,\n activeIds,\n onClick,\n parentIds = [],\n isFirst,\n onDrop,\n onEditableSave,\n treeId,\n}: NodeProps): ReactElement<NodeProps> => {\n const { id, value, name, label, icon, nodes, actions, editable, badge } = node;\n const [{ opacity }, drag] = useDrag({\n item: { id, value, name, label, icon, nodes, actions, editable, badge },\n collect: (monitor) => ({\n opacity: monitor.isDragging() ? 0.4 : 1,\n }),\n type: treeId,\n canDrag: onDrop !== undefined,\n });\n const [showNodes, setShowNodes] = useState(getInitialShowNodesValue(node, activeIds));\n const [isHovered, setIsHovered] = useState(false);\n const selected = activeIds && activeIds.length > 0 && activeIds.includes(id);\n\n const setHoveredTrue = () => setIsHovered(true);\n const setHoveredFalse = () => setIsHovered(false);\n const onNodeClick = () => {\n if (!value) {\n setShowNodes(!showNodes);\n return;\n }\n\n if (onClick) {\n onClick(id);\n }\n };\n const toggleNodesVisibility = (event: React.MouseEvent) => {\n event.stopPropagation();\n setShowNodes(!showNodes);\n };\n\n const insertBadge = () => {\n return (\n <div\n data-test-id=\"node-badge\"\n className={merge([\n 'tw-flex tw-justify-center tw-items-center tw-ml-2 tw-text-text-weak',\n badge?.props.size && 'tw-w-8 tw-h-5 tw-bg-box-neutral tw-rounded-full',\n ])}\n >\n {badge}\n </div>\n );\n };\n\n const nameRef = useRef<HTMLDivElement \| null>(null);\n const [isOverflowing, setIsOverflowing] = useState(false);\n\n useLayoutEffect(() => {\n checkIfOverflowing();\n\n window.addEventListener('resize', checkIfOverflowing);\n return () => {\n window.removeEventListener('resize', checkIfOverflowing);\n };\n }, []);\n\n const checkIfOverflowing = () => {\n if (nameRef.current) {\n const isTextOverflowing = nameRef.current.scrollWidth > nameRef.current.clientWidth;\n setIsOverflowing(isTextOverflowing);\n }\n };\n\n / eslint-disable jsx-a11y/anchor-is-valid,jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions,jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions /\n return (\n <li data-test-id=\"node\" ref={drag} style={{ opacity }}>\n {isFirst && (\n <DropZone\n data={{\n targetItem: node,\n position: DropZonePosition.Before,\n }}\n onDrop={onDrop}\n treeId={treeId}\n />\n )}\n <DropZone\n data={{\n targetItem: node,\n position: DropZonePosition.Within,\n }}\n onDrop={onDrop}\n treeId={treeId}\n >\n <div\n className={merge([\n 'tw-flex tw-py-2 tw-px-2.5 tw-no-underline tw-leading-5 tw-h-10',\n strong && 'tw-font-bold',\n value &&\n !selected &&\n 'tw-text-text hover:tw-bg-box-neutral-hover hover:tw-text-box-neutral-inverse-hover',\n selected &&\n 'tw-font-medium tw-bg-box-selected-strong tw-text-box-selected-strong-inverse hover:tw-bg-box-selected-strong-hover hover:tw-text-box-selected-strong-inverse-hover',\n ])}\n onMouseEnter={setHoveredTrue}\n onMouseLeave={setHoveredFalse}\n >\n <a\n data-test-id=\"node-link\"\n className={merge([\n 'tw-flex tw-items-center tw-flex-grow tw-justify-between tw-cursor-pointer tw-h-6',\n parentIds.length === 1 && 'tw-pl-4',\n parentIds.length > 1 && 'tw-pl-8',\n ])}\n aria-selected={selected}\n onClick={onNodeClick}\n >\n <div className=\"tw-flex tw-flex-1 tw-space-x-1 tw-items-center tw-h-full\">\n <span\n data-test-id=\"toggle\"\n className=\"tw-w-2 tw-h-3 tw-flex tw-items-center tw-justify-center\"\n onClick={toggleNodesVisibility}\n >\n {nodes && (\n <div\n className={merge([\n 'tw-transition-transform tw-w-0 tw-h-0 tw-text-black-100 tw-text-opacity-40 tw-font-normal tw-border-t-4 tw-border-t-transparent tw-border-b-4 tw-border-b-transparent tw-border-l-4 tw-border-l-x-strong',\n showNodes ? 'tw-rotate-90' : '',\n selected && 'tw-text-box-selected-strong-inverse',\n ])}\n ></div>\n )}\n </span>\n {icon && <span className=\"tw-flex tw-justify-center tw-items-center tw-w-5\">{icon}</span>}\n {editable && onEditableSave ? (\n <div\n ref={nameRef}\n className=\"tw-relative tw-top-[0.2rem] tw-w-full tw-flex-1 tw-h-full\"\n >\n <EditableText\n options={{\n additionalValues: node.id,\n enableDoubleClick: true,\n isSlimInputField: true,\n removeBoxPadding: true,\n }}\n onAdditionalValueSave={onEditableSave}\n isOverflowing={true}\n >\n <span\n title={isOverflowing ? name : ''}\n className=\"tw-max-w-full tw-absolute tw-top-[-0.08rem] tw-truncate\"\n >\n {name}\n </span>\n </EditableText>\n </div>\n ) : (\n <span\n className=\"tw-flex tw-items-center tw-flex-1 tw-relative tw-h-10\"\n title={isOverflowing ? name : ''}\n data-test-id=\"node-link-name\"\n >\n <span ref={nameRef} className=\"tw-truncate tw-max-w-full tw-absolute\">\n {name}\n </span>\n </span>\n )}\n <span>{badge && insertBadge()}</span>\n </div>\n <div className=\"tw-px-1.5\">\n <span\n data-test-id=\"node-label\"\n className={merge([\n 'tw-text-black-100 tw-text-opacity-40 tw-text-xs tw-font-normal',\n selected && 'tw-text-box-selected-strong-inverse',\n ])}\n >\n {label}\n </span>\n </div>\n </a>\n\n {actions && (\n <div\n className={merge([\n 'tw-flex tw-items-center',\n isHovered \|\| selected ? 'tw-visible tw-space-x-1.5' : 'tw-invisible tw-w-0',\n ])}\n >\n {actions.map((action) => action)}\n </div>\n )}\n </div>\n </DropZone>\n\n {nodes && showNodes && (\n <ul\n className=\"tw-p-0 tw-m-0 tw-font-sans tw-font-normal tw-list-none tw-text-left\"\n data-test-id=\"sub-tree\"\n >\n {renderNodeArray({\n nodes,\n treeId,\n activeIds,\n onClick,\n onDrop,\n onEditableSave,\n parentIds: [...parentIds, id],\n })}\n </ul>\n )}\n <DropZone\n data={{\n targetItem: node,\n position: DropZonePosition.After,\n }}\n onDrop={onDrop}\n treeId={treeId}\n />\n </li>\n );\n / eslint-enable jsx-a11y/anchor-is-valid,jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions,jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions */\n};\n"],"names":[],"mappings":"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"}
1	+ {"version":3,"file":"Node.es.js","sources":["../../../src/components/Tree/Node.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. /\n\nimport React, { ReactElement, useLayoutEffect, useRef, useState } from 'react';\nimport { merge } from '@utilities/merge';\nimport { useDrag } from 'react-dnd';\nimport { DropZone, OnDropCallback } from '@components/DropZone';\nimport { TreeFlatListItem } from '@components/Tree';\nimport { DraggableItem, DropZonePosition } from '@utilities/dnd';\nimport { EditableText } from '../EditableText';\nimport { Tooltip, TooltipPosition } from '../Tooltip';\n\nexport type RenderNodeArrayData = Omit<NodeProps, 'isFirst' \| 'strong' \| 'node'> & {\n nodes: DraggableItem<TreeNodeItem>[];\n};\n\nexport const renderNodeArray = ({\n nodes,\n activeIds,\n treeId,\n onClick,\n onDrop,\n onEditableSave,\n parentIds,\n}: RenderNodeArrayData) =>\n nodes.map((node, i) => (\n <Node\n key={node.id}\n node={node}\n nodeIndex={i}\n activeIds={activeIds}\n onClick={onClick}\n isFirst={i === 0}\n onDrop={onDrop}\n onEditableSave={onEditableSave}\n parentIds={parentIds}\n treeId={treeId}\n />\n ));\n\nexport interface TreeNodeItem extends TreeFlatListItem {\n nodes?: DraggableItem<TreeNodeItem>[];\n}\n\ntype NodeProps = {\n node: DraggableItem<TreeNodeItem>;\n strong?: boolean;\n nodeIndex?: number;\n activeIds?: NullableString[];\n parentIds?: string[];\n onClick: (id: NullableString) => void;\n isFirst: boolean;\n treeId: string;\n onDrop?: OnDropCallback<TreeNodeItem>;\n onEditableSave?: (targetItemId: string, value: string) => void;\n};\n\nconst getInitialShowNodesValue = (\n currentNode: DraggableItem<TreeNodeItem>,\n activeNodeIds?: NullableString[],\n): boolean => {\n const hasActiveChildNodes = (node: DraggableItem<TreeNodeItem>, activeIds?: NullableString[]): boolean => {\n if (node.nodes && activeIds) {\n for (const childNode of node.nodes) {\n if (activeIds.includes(childNode.id) \|\| hasActiveChildNodes(childNode, activeIds)) {\n return true;\n }\n }\n }\n return false;\n };\n\n return hasActiveChildNodes(currentNode, activeNodeIds);\n};\n\nexport const Node = ({\n node,\n strong = false,\n activeIds,\n onClick,\n parentIds = [],\n isFirst,\n onDrop,\n onEditableSave,\n treeId,\n}: NodeProps): ReactElement<NodeProps> => {\n const { id, value, name, label, icon, nodes, actions, editable, badge, tooltipContent } = node;\n const [{ opacity }, drag] = useDrag({\n item: { id, value, name, label, icon, nodes, actions, editable, badge },\n collect: (monitor) => ({\n opacity: monitor.isDragging() ? 0.4 : 1,\n }),\n type: treeId,\n canDrag: onDrop !== undefined,\n });\n const [showNodes, setShowNodes] = useState(getInitialShowNodesValue(node, activeIds));\n const [isHovered, setIsHovered] = useState(false);\n const selected = activeIds && activeIds.length > 0 && activeIds.includes(id);\n\n const setHoveredTrue = () => setIsHovered(true);\n const setHoveredFalse = () => setIsHovered(false);\n const onNodeClick = () => {\n if (!value) {\n setShowNodes(!showNodes);\n return;\n }\n\n if (onClick) {\n onClick(id);\n }\n };\n const toggleNodesVisibility = (event: React.MouseEvent) => {\n event.stopPropagation();\n setShowNodes(!showNodes);\n };\n\n const insertBadge = () => {\n return (\n <Tooltip\n disabled={!tooltipContent}\n content={tooltipContent}\n position={TooltipPosition.Right}\n withArrow\n triggerElement={\n <div\n data-test-id=\"node-badge\"\n className={merge([\n 'tw-flex tw-justify-center tw-items-center tw-ml-2 tw-text-text-weak',\n badge?.props.size && 'tw-w-8 tw-h-5 tw-bg-box-neutral tw-rounded-full',\n ])}\n >\n {badge}\n </div>\n }\n />\n );\n };\n\n const nameRef = useRef<HTMLDivElement \| null>(null);\n const [isOverflowing, setIsOverflowing] = useState(false);\n\n useLayoutEffect(() => {\n checkIfOverflowing();\n\n window.addEventListener('resize', checkIfOverflowing);\n return () => {\n window.removeEventListener('resize', checkIfOverflowing);\n };\n }, []);\n\n const checkIfOverflowing = () => {\n if (nameRef.current) {\n const isTextOverflowing = nameRef.current.scrollWidth > nameRef.current.clientWidth;\n setIsOverflowing(isTextOverflowing);\n }\n };\n\n / eslint-disable jsx-a11y/anchor-is-valid,jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions,jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions /\n return (\n <li data-test-id=\"node\" ref={drag} style={{ opacity }}>\n {isFirst && (\n <DropZone\n data={{\n targetItem: node,\n position: DropZonePosition.Before,\n }}\n onDrop={onDrop}\n treeId={treeId}\n />\n )}\n <DropZone\n data={{\n targetItem: node,\n position: DropZonePosition.Within,\n }}\n onDrop={onDrop}\n treeId={treeId}\n >\n <div\n className={merge([\n 'tw-flex tw-py-2 tw-px-2.5 tw-no-underline tw-leading-5 tw-h-10',\n strong && 'tw-font-bold',\n value &&\n !selected &&\n 'tw-text-text hover:tw-bg-box-neutral-hover hover:tw-text-box-neutral-inverse-hover',\n selected &&\n 'tw-font-medium tw-bg-box-selected-strong tw-text-box-selected-strong-inverse hover:tw-bg-box-selected-strong-hover hover:tw-text-box-selected-strong-inverse-hover',\n ])}\n onMouseEnter={setHoveredTrue}\n onMouseLeave={setHoveredFalse}\n >\n <a\n data-test-id=\"node-link\"\n className={merge([\n 'tw-flex tw-items-center tw-flex-grow tw-justify-between tw-cursor-pointer tw-h-6',\n parentIds.length === 1 && 'tw-pl-4',\n parentIds.length > 1 && 'tw-pl-8',\n ])}\n aria-selected={selected}\n onClick={onNodeClick}\n >\n <div className=\"tw-flex tw-flex-1 tw-space-x-1 tw-items-center tw-h-full\">\n <span\n data-test-id=\"toggle\"\n className=\"tw-w-2 tw-h-3 tw-flex tw-items-center tw-justify-center\"\n onClick={toggleNodesVisibility}\n >\n {nodes && (\n <div\n className={merge([\n 'tw-transition-transform tw-w-0 tw-h-0 tw-text-black-100 tw-text-opacity-40 tw-font-normal tw-border-t-4 tw-border-t-transparent tw-border-b-4 tw-border-b-transparent tw-border-l-4 tw-border-l-x-strong',\n showNodes ? 'tw-rotate-90' : '',\n selected && 'tw-text-box-selected-strong-inverse',\n ])}\n ></div>\n )}\n </span>\n {icon && <span className=\"tw-flex tw-justify-center tw-items-center tw-w-5\">{icon}</span>}\n {editable && onEditableSave ? (\n <div\n ref={nameRef}\n className=\"tw-relative tw-top-[0.2rem] tw-w-full tw-flex-1 tw-h-full\"\n >\n <EditableText\n options={{\n additionalValues: node.id,\n enableDoubleClick: true,\n isSlimInputField: true,\n removeBoxPadding: true,\n }}\n onAdditionalValueSave={onEditableSave}\n isOverflowing={true}\n >\n <span\n title={isOverflowing ? name : ''}\n className=\"tw-max-w-full tw-absolute tw-top-[-0.08rem] tw-truncate\"\n >\n {name}\n </span>\n </EditableText>\n </div>\n ) : (\n <span\n className=\"tw-flex tw-items-center tw-flex-1 tw-relative tw-h-10\"\n title={isOverflowing ? name : ''}\n data-test-id=\"node-link-name\"\n >\n <span ref={nameRef} className=\"tw-truncate tw-max-w-full tw-absolute\">\n {name}\n </span>\n </span>\n )}\n <span>{badge && insertBadge()}</span>\n </div>\n <div className=\"tw-px-1.5\">\n <span\n data-test-id=\"node-label\"\n className={merge([\n 'tw-text-black-100 tw-text-opacity-40 tw-text-xs tw-font-normal',\n selected && 'tw-text-box-selected-strong-inverse',\n ])}\n >\n {label}\n </span>\n </div>\n </a>\n\n {actions && (\n <div\n className={merge([\n 'tw-flex tw-items-center',\n isHovered \|\| selected ? 'tw-visible tw-space-x-1.5' : 'tw-invisible tw-w-0',\n ])}\n >\n {actions.map((action) => action)}\n </div>\n )}\n </div>\n </DropZone>\n\n {nodes && showNodes && (\n <ul\n className=\"tw-p-0 tw-m-0 tw-font-sans tw-font-normal tw-list-none tw-text-left\"\n data-test-id=\"sub-tree\"\n >\n {renderNodeArray({\n nodes,\n treeId,\n activeIds,\n onClick,\n onDrop,\n onEditableSave,\n parentIds: [...parentIds, id],\n })}\n </ul>\n )}\n <DropZone\n data={{\n targetItem: node,\n position: DropZonePosition.After,\n }}\n onDrop={onDrop}\n treeId={treeId}\n />\n </li>\n );\n / eslint-enable jsx-a11y/anchor-is-valid,jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions,jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions */\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;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"}

package/dist/components/Tree/Tree.d.ts CHANGED Viewed

@@ -1,4 +1,4 @@
-import React, { FC, ReactElement } from 'react';
+import React, { FC, ReactElement, ReactNode } from 'react';
 import { DraggableItem } from '../../utilities/dnd';
 import { IconProps } from '../../foundation/Icon';
 import { BadgeProps } from '..';
@@ -9,6 +9,7 @@ export interface TreeFlatListItem {
     value?: string;
     actions?: React.ReactNode[];
     badge?: ReactElement<IconProps> | ReactElement<BadgeProps>;
+    tooltipContent?: ReactNode;
     parentId: NullableString;
     editable?: boolean;
 }

package/dist/components/Tree/Tree.es.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Tree.es.js","sources":["../../../src/components/Tree/Tree.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport React, { FC, ReactElement, useEffect, useState } from 'react';\nimport { renderNodeArray } from './Node';\nimport { useId } from '@react-aria/utils';\nimport { DndWrapper, DraggableItem, DropZonePosition, draggableItemCompareFn } from '@utilities/dnd';\nimport { listToTree } from '@components/Tree/utils';\nimport { IconProps } from '@foundation/Icon';\nimport { BadgeProps } from '..';\n\nexport interface TreeFlatListItem {\n name: string;\n icon?: ReactElement<IconProps>;\n label?: string;\n value?: string;\n actions?: React.ReactNode[];\n badge?: ReactElement<IconProps> \| ReactElement<BadgeProps>;\n parentId: NullableString;\n editable?: boolean;\n}\n\nexport type TreeProps = {\n nodes: DraggableItem<TreeFlatListItem>[];\n onSelect: (ids: NullableString[]) => void;\n activeNodeIds: NullableString[];\n onDragAndDrop?: (itemId: string, parentId: NullableString, positionBeforeId: NullableString) => void;\n onEditableSave?: (targetItemId: string, value: string) => void;\n};\n\nexport const Tree: FC<TreeProps> = ({\n nodes,\n onSelect,\n activeNodeIds: initialActiveNodeIds,\n onDragAndDrop,\n onEditableSave,\n}) => {\n const [multiSelectMode, setMultiSelectMode] = useState<boolean>(false);\n const [activeIds, setActiveIds] = useState<NullableString[]>(initialActiveNodeIds);\n const [treeNodes, setTreeNodes] = useState<DraggableItem<TreeFlatListItem>[]>([]);\n const treeId = useId();\n\n useEffect(() => {\n const listToTreeNodes = listToTree(nodes);\n setTreeNodes(listToTreeNodes);\n }, [nodes]);\n\n const onNodeClick = (id: NullableString) => {\n if (multiSelectMode) {\n const modifiedSelectedIds: NullableString[] = activeIds.includes(id)\n ? [...activeIds].filter((i) => i !== id)\n : [...activeIds, id];\n\n setActiveIds(modifiedSelectedIds);\n onSelect(modifiedSelectedIds);\n } else {\n setActiveIds([id]);\n onSelect([id]);\n }\n };\n\n const handleDrop = onDragAndDrop\n ? (\n targetItem: DraggableItem<TreeFlatListItem>,\n sourceItem: DraggableItem<TreeFlatListItem>,\n position: DropZonePosition,\n ) => {\n const getPositionBeforeId = () => {\n switch (position) {\n case DropZonePosition.After:\n const sameLevelNodes = nodes.filter((node) => node.parentId === targetItem.parentId);\n sameLevelNodes.sort(draggableItemCompareFn);\n const targetItemIndex = sameLevelNodes.findIndex((item) => item.id === targetItem.id);\n if (targetItemIndex === sameLevelNodes.length - 1) {\n return null;\n } else {\n return sameLevelNodes[targetItemIndex + 1].id;\n }\n case DropZonePosition.Before:\n return targetItem.id;\n case DropZonePosition.Within:\n return null;\n }\n };\n\n const parentId = position === DropZonePosition.Within ? targetItem.id : targetItem.parentId;\n const positionBeforeId = getPositionBeforeId();\n onDragAndDrop(sourceItem.id, parentId, positionBeforeId);\n }\n : undefined;\n\n const handleEditableSave = onEditableSave\n ? (targetItemId: string, value: string) => {\n onEditableSave(targetItemId, value);\n }\n : undefined;\n\n const downKeyHandler = (event: KeyboardEvent) => {\n if (event.key === 'Meta' \|\| event.ctrlKey) {\n setMultiSelectMode(true);\n } else {\n setMultiSelectMode(false);\n }\n };\n\n const upKeyHandler = (event: KeyboardEvent) => {\n if (event.key === 'Meta' \|\| event.ctrlKey) {\n setMultiSelectMode(false);\n }\n };\n\n useEffect(() => {\n window.addEventListener('keydown', downKeyHandler);\n window.addEventListener('keyup', upKeyHandler);\n\n return () => {\n window.removeEventListener('keydown', downKeyHandler);\n window.removeEventListener('keyup', upKeyHandler);\n };\n }, []);\n\n return (\n <ul\n id={treeId}\n data-test-id=\"tree\"\n className=\"tw-p-0 tw-m-0 tw-font-sans tw-font-normal tw-list-none tw-text-left tw-text-sm tw-select-none\"\n >\n <DndWrapper id={treeId}>\n {renderNodeArray({\n nodes: treeNodes,\n treeId,\n activeIds,\n onClick: onNodeClick,\n onDrop: handleDrop,\n onEditableSave: handleEditableSave,\n })}\n </DndWrapper>\n </ul>\n );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~AA6BO~~,MAAM,KAAsB,CAAC;AAAA,EAChC;AAAA,EACA;AAAA,EACA,eAAe;AAAA,EACf;AAAA,EACA;AAAA,MACE;AACF,QAAM,CAAC,GAAiB,KAAsB,EAAkB,EAAK,GAC/D,CAAC,GAAW,KAAgB,EAA2B,CAAoB,GAC3E,CAAC,GAAW,KAAgB,EAA4C,CAAE,CAAA,GAC1E,IAAS;AAEf,IAAU,MAAM;AACN,UAAA,IAAkB,EAAW,CAAK;AACxC,MAAa,CAAe;AAAA,EAAA,GAC7B,CAAC,CAAK,CAAC;AAEJ,QAAA,IAAc,CAAC,MAAuB;AACxC,QAAI,GAAiB;AACjB,YAAM,IAAwC,EAAU,SAAS,CAAE,IAC7D,CAAC,GAAG,CAAS,EAAE,OAAO,CAAC,MAAM,MAAM,CAAE,IACrC,CAAC,GAAG,GAAW,CAAE;AAEvB,QAAa,CAAmB,GAChC,EAAS,CAAmB;AAAA,IAAA;AAEf,QAAA,CAAC,CAAE,CAAC,GACR,EAAA,CAAC,CAAE,CAAC;AAAA,EACjB,GAGE,IAAa,IACb,CACI,GACA,GACA,MACC;AACD,UAAM,IAAsB,MAAM;AACtB,cAAA;AAAA,aACC,EAAiB;AACZ,gBAAA,IAAiB,EAAM,OAAO,CAAC,MAAS,EAAK,aAAa,EAAW,QAAQ;AACnF,YAAe,KAAK,CAAsB;AACpC,gBAAA,IAAkB,EAAe,UAAU,CAAC,MAAS,EAAK,OAAO,EAAW,EAAE;AAChF,iBAAA,MAAoB,EAAe,SAAS,IACrC,OAEA,EAAe,IAAkB,GAAG;AAAA,aAE9C,EAAiB;AAClB,iBAAO,EAAW;AAAA,aACjB,EAAiB;AACX,iBAAA;AAAA;AAAA,IAAA,GAIb,IAAW,MAAa,EAAiB,SAAS,EAAW,KAAK,EAAW,UAC7E,IAAmB;AACX,MAAA,EAAW,IAAI,GAAU,CAAgB;AAAA,EAE3D,IAAA,QAEA,IAAqB,IACrB,CAAC,GAAsB,MAAkB;AACrC,MAAe,GAAc,CAAK;AAAA,EAEtC,IAAA,QAEA,IAAiB,CAAC,MAAyB;AAC7C,IAAI,EAAM,QAAQ,UAAU,EAAM,UAC9B,EAAmB,EAAI,IAEvB,EAAmB,EAAK;AAAA,EAC5B,GAGE,IAAe,CAAC,MAAyB;AAC3C,IAAI,GAAM,QAAQ,UAAU,EAAM,YAC9B,EAAmB,EAAK;AAAA,EAC5B;AAGJ,WAAU,MACC,QAAA,iBAAiB,WAAW,CAAc,GAC1C,OAAA,iBAAiB,SAAS,CAAY,GAEtC,MAAM;AACF,WAAA,oBAAoB,WAAW,CAAc,GAC7C,OAAA,oBAAoB,SAAS,CAAY;AAAA,EAAA,IAErD,CAAE,CAAA,GAGA,kBAAA,cAAA,MAAA;AAAA,IACG,IAAI;AAAA,IACJ,gBAAa;AAAA,IACb,WAAU;AAAA,EAAA,GAET,kBAAA,cAAA,GAAA;AAAA,IAAW,IAAI;AAAA,EAAA,GACX,EAAgB;AAAA,IACb,OAAO;AAAA,IACP;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT,QAAQ;AAAA,IACR,gBAAgB;AAAA,EACnB,CAAA,CACL,CACJ;AAER;"}
1	+ {"version":3,"file":"Tree.es.js","sources":["../../../src/components/Tree/Tree.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport React, { FC, ReactElement, ReactNode, useEffect, useState } from 'react';\nimport { renderNodeArray } from './Node';\nimport { useId } from '@react-aria/utils';\nimport { DndWrapper, DraggableItem, DropZonePosition, draggableItemCompareFn } from '@utilities/dnd';\nimport { listToTree } from '@components/Tree/utils';\nimport { IconProps } from '@foundation/Icon';\nimport { BadgeProps } from '..';\n\nexport interface TreeFlatListItem {\n name: string;\n icon?: ReactElement<IconProps>;\n label?: string;\n value?: string;\n actions?: React.ReactNode[];\n badge?: ReactElement<IconProps> \| ReactElement<BadgeProps>;\n tooltipContent?: ReactNode;\n parentId: NullableString;\n editable?: boolean;\n}\n\nexport type TreeProps = {\n nodes: DraggableItem<TreeFlatListItem>[];\n onSelect: (ids: NullableString[]) => void;\n activeNodeIds: NullableString[];\n onDragAndDrop?: (itemId: string, parentId: NullableString, positionBeforeId: NullableString) => void;\n onEditableSave?: (targetItemId: string, value: string) => void;\n};\n\nexport const Tree: FC<TreeProps> = ({\n nodes,\n onSelect,\n activeNodeIds: initialActiveNodeIds,\n onDragAndDrop,\n onEditableSave,\n}) => {\n const [multiSelectMode, setMultiSelectMode] = useState<boolean>(false);\n const [activeIds, setActiveIds] = useState<NullableString[]>(initialActiveNodeIds);\n const [treeNodes, setTreeNodes] = useState<DraggableItem<TreeFlatListItem>[]>([]);\n const treeId = useId();\n\n useEffect(() => {\n const listToTreeNodes = listToTree(nodes);\n setTreeNodes(listToTreeNodes);\n }, [nodes]);\n\n const onNodeClick = (id: NullableString) => {\n if (multiSelectMode) {\n const modifiedSelectedIds: NullableString[] = activeIds.includes(id)\n ? [...activeIds].filter((i) => i !== id)\n : [...activeIds, id];\n\n setActiveIds(modifiedSelectedIds);\n onSelect(modifiedSelectedIds);\n } else {\n setActiveIds([id]);\n onSelect([id]);\n }\n };\n\n const handleDrop = onDragAndDrop\n ? (\n targetItem: DraggableItem<TreeFlatListItem>,\n sourceItem: DraggableItem<TreeFlatListItem>,\n position: DropZonePosition,\n ) => {\n const getPositionBeforeId = () => {\n switch (position) {\n case DropZonePosition.After:\n const sameLevelNodes = nodes.filter((node) => node.parentId === targetItem.parentId);\n sameLevelNodes.sort(draggableItemCompareFn);\n const targetItemIndex = sameLevelNodes.findIndex((item) => item.id === targetItem.id);\n if (targetItemIndex === sameLevelNodes.length - 1) {\n return null;\n } else {\n return sameLevelNodes[targetItemIndex + 1].id;\n }\n case DropZonePosition.Before:\n return targetItem.id;\n case DropZonePosition.Within:\n return null;\n }\n };\n\n const parentId = position === DropZonePosition.Within ? targetItem.id : targetItem.parentId;\n const positionBeforeId = getPositionBeforeId();\n onDragAndDrop(sourceItem.id, parentId, positionBeforeId);\n }\n : undefined;\n\n const handleEditableSave = onEditableSave\n ? (targetItemId: string, value: string) => {\n onEditableSave(targetItemId, value);\n }\n : undefined;\n\n const downKeyHandler = (event: KeyboardEvent) => {\n if (event.key === 'Meta' \|\| event.ctrlKey) {\n setMultiSelectMode(true);\n } else {\n setMultiSelectMode(false);\n }\n };\n\n const upKeyHandler = (event: KeyboardEvent) => {\n if (event.key === 'Meta' \|\| event.ctrlKey) {\n setMultiSelectMode(false);\n }\n };\n\n useEffect(() => {\n window.addEventListener('keydown', downKeyHandler);\n window.addEventListener('keyup', upKeyHandler);\n\n return () => {\n window.removeEventListener('keydown', downKeyHandler);\n window.removeEventListener('keyup', upKeyHandler);\n };\n }, []);\n\n return (\n <ul\n id={treeId}\n data-test-id=\"tree\"\n className=\"tw-p-0 tw-m-0 tw-font-sans tw-font-normal tw-list-none tw-text-left tw-text-sm tw-select-none\"\n >\n <DndWrapper id={treeId}>\n {renderNodeArray({\n nodes: treeNodes,\n treeId,\n activeIds,\n onClick: onNodeClick,\n onDrop: handleDrop,\n onEditableSave: handleEditableSave,\n })}\n </DndWrapper>\n </ul>\n );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;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"}

package/dist/components/Tree/utils/mocks.es.js CHANGED Viewed

@@ -1736,7 +1736,7 @@ import "../../RichTextEditor/Plugins/index.es.js";
 import "@react-stately/table";
 import "react-textarea-autosize";
 r.Small, r.Small, r.Small, r.Small, r.Small;
-const a = [
+const l = [
   {
     id: "1-1-1",
     parentId: "1-1",
@@ -1771,7 +1771,7 @@ const a = [
     sort: null,
     editable: !0
   }
-], l = [
+], a = [
   {
     id: "1-2-1",
     parentId: "1-2",
@@ -1810,8 +1810,9 @@ const a = [
       size: o.Size16
     }),
     sort: null,
-    badge: /* @__PURE__ */ t.createElement(p, null, "Hello, I am a badge")
+    badge: /* @__PURE__ */ t.createElement(p, null, "Hello, I am a badge"),
+    tooltipContent: "Hello, I am tooltip content"
   }
 ];
-m, o.Size16, m, o.Size16, [...a], m, o.Size16, [...l];
+m, o.Size16, m, o.Size16, [...l], m, o.Size16, [...a];
 //# sourceMappingURL=mocks.es.js.map

package/dist/components/Tree/utils/mocks.es.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"mocks.es.js","sources":["../../../../src/components/Tree/utils/mocks.tsx"],"sourcesContent":["import { MenuItemContentSize } from '@components/MenuItem';\nimport { IconDocument, IconFaceExtraHappy, IconFolder, IconPlus, IconSize } from '@foundation/Icon';\nimport React from 'react';\nimport { TreeFlatListItem, TreeNodeItem } from '@components/Tree';\nimport { DraggableItem } from '@utilities/dnd';\nimport { Badge } from '../../..';\nimport { Button, ButtonSize } from '@components/Button';\n\nexport const mockActionMenuBlocks = [\n {\n id: 'dropdownBlock',\n ariaLabel: 'Dropdown block',\n menuItems: [\n {\n id: 'dropdown',\n size: MenuItemContentSize.Small,\n title: 'Dropdown',\n onClick: () => console.log('dropdown'),\n },\n ],\n },\n {\n id: 'actionsBlock',\n ariaLabel: 'Item Actions',\n menuItems: [\n {\n id: 'rename',\n size: MenuItemContentSize.Small,\n title: 'Rename',\n onClick: () => console.log('rename'),\n },\n {\n id: 'duplicate',\n size: MenuItemContentSize.Small,\n title: 'Duplicate',\n onClick: () => console.log('duplicate'),\n },\n {\n id: 'unpublish',\n size: MenuItemContentSize.Small,\n title: 'Unpublish',\n onClick: () => console.log('unpublish'),\n },\n ],\n },\n {\n id: 'deleteBlock',\n ariaLabel: 'Delete Block',\n menuItems: [\n {\n id: 'delete',\n size: MenuItemContentSize.Small,\n title: 'Delete',\n onClick: () => console.log('delete'),\n },\n ],\n },\n];\n\nconst uncategorizedPagesNodes = [\n {\n id: '1-1-1',\n parentId: '1-1',\n sort: 1,\n name: 'Home',\n label: 'Page',\n value: 'https://weare.frontify.com/page/1',\n icon: <IconDocument size={IconSize.Size16} />,\n },\n {\n id: '1-1-2',\n parentId: '1-1',\n name: 'Members',\n label: 'Page',\n value: 'https://weare.frontify.com/page/2',\n icon: <IconDocument size={IconSize.Size16} />,\n sort: null,\n },\n {\n id: '1-1-3',\n parentId: '1-1',\n name: 'About us',\n label: 'Page',\n value: 'https://weare.frontify.com/page/3',\n icon: <IconDocument size={IconSize.Size16} />,\n sort: null,\n editable: true,\n },\n];\n\nconst testCategoryNodes = [\n {\n id: '1-2-1',\n parentId: '1-2',\n name: 'Home Category Test Category Lorem ipsum dolor sit amet, consectetur adipiscing elit.',\n label: 'Home Page',\n value: 'https://weare.frontify.com/page/4',\n icon: <IconDocument size={IconSize.Size16} />,\n sort: null,\n badge: <Badge icon={<IconFaceExtraHappy size={IconSize.Size16} />}></Badge>,\n editable: true,\n },\n {\n id: '1-2-2',\n parentId: '1-2',\n name: 'Members Category',\n label: 'Members Page',\n value: 'https://weare.frontify.com/page/5',\n icon: <IconDocument size={IconSize.Size16} />,\n sort: null,\n },\n {\n id: '1-2-3',\n parentId: '1-2',\n name: 'About us Category Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed consectetur quis tellus id elementum.',\n label: 'About Us Page',\n value: 'https://weare.frontify.com/page/6',\n icon: <IconDocument size={IconSize.Size16} />,\n sort: null,\n badge: <Badge>Hello, I am a badge</Badge>,\n },\n];\n\ntype mockNodeType = () => DraggableItem<TreeFlatListItem>[];\n\nexport const mockNodesFlat: mockNodeType = () => [\n {\n id: '1',\n name: 'Design System Testing',\n label: 'Document',\n value: 'https://weare.frontify.com/document/1',\n icon: <IconFolder size={IconSize.Size16} />,\n actions: [<Button key={'Design System Testing'} size={ButtonSize.Small} icon={<IconPlus></IconPlus>} />],\n parentId: null,\n sort: 1,\n editable: true,\n },\n {\n id: '1-1',\n name: 'Uncategorizes Pages',\n icon: <IconFolder size={IconSize.Size16} />,\n actions: [\n <Button\n key={'Design System Testing Uncategorizes Pages'}\n size={ButtonSize.Small}\n icon={<IconPlus></IconPlus>}\n />,\n ],\n parentId: '1',\n sort: 1,\n },\n ...uncategorizedPagesNodes,\n {\n id: '1-2',\n parentId: '1',\n name: 'Test Category Lorem ipsum dolor sit amet, consectetur adipiscing elit.',\n label: 'Document',\n icon: <IconFolder size={IconSize.Size16} />,\n actions: [\n <Button\n key={'Design System Testing Uncategorizes Pages Test'}\n size={ButtonSize.Small}\n icon={<IconPlus></IconPlus>}\n />,\n ],\n value: 'https://weare.frontify.com/document/923#/test',\n sort: null,\n badge: <IconFaceExtraHappy size={IconSize.Size16} />,\n },\n ...testCategoryNodes,\n {\n id: '1-3',\n name: 'Category Without Subitems',\n icon: <IconFolder size={IconSize.Size16} />,\n actions: [\n <Button\n key={'Design System Testing Uncategorizes Pages Test Subitems'}\n size={ButtonSize.Small}\n icon={<IconPlus></IconPlus>}\n />,\n ],\n parentId: '1',\n value: 'https://weare.frontify.com/document/923#/test',\n sort: null,\n },\n];\n\nexport const mockNodesTree: DraggableItem<TreeNodeItem>[] = [\n {\n id: '1',\n name: 'Design System Testing',\n label: 'Document',\n value: 'https://weare.frontify.com/document/1',\n icon: <IconFolder size={IconSize.Size16} />,\n parentId: null,\n sort: 1,\n nodes: [\n {\n id: '1-1',\n name: 'Uncategorizes Pages',\n icon: <IconFolder size={IconSize.Size16} />,\n parentId: '1',\n sort: 1,\n nodes: [...uncategorizedPagesNodes],\n },\n {\n id: '1-2',\n parentId: '1',\n name: 'Test Category',\n label: 'Document',\n icon: <IconFolder size={IconSize.Size16} />,\n value: 'https://weare.frontify.com/document/923#/test',\n sort: null,\n nodes: [...testCategoryNodes],\n },\n ],\n },\n];\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAQoC,AAOd,EAAoB,OAYpB,EAAoB,OAMpB,EAAoB,OAMpB,EAAoB,OAYpB,EAAoB;AAQ1C,MAAM,IAA0B;AAAA,EAC5B;AAAA,IACI,IAAI;AAAA,IACJ,UAAU;AAAA,IACV,MAAM;AAAA,IACN,MAAM;AAAA,IACN,OAAO;AAAA,IACP,OAAO;AAAA,IACP,MAAO,kBAAA,cAAA,GAAA;AAAA,MAAa,MAAM,EAAS;AAAA,IAAA,CAAQ;AAAA,EAC/C;AAAA,EACA;AAAA,IACI,IAAI;AAAA,IACJ,UAAU;AAAA,IACV,MAAM;AAAA,IACN,OAAO;AAAA,IACP,OAAO;AAAA,IACP,MAAO,kBAAA,cAAA,GAAA;AAAA,MAAa,MAAM,EAAS;AAAA,IAAA,CAAQ;AAAA,IAC3C,MAAM;AAAA,EACV;AAAA,EACA;AAAA,IACI,IAAI;AAAA,IACJ,UAAU;AAAA,IACV,MAAM;AAAA,IACN,OAAO;AAAA,IACP,OAAO;AAAA,IACP,MAAO,kBAAA,cAAA,GAAA;AAAA,MAAa,MAAM,EAAS;AAAA,IAAA,CAAQ;AAAA,IAC3C,MAAM;AAAA,IACN,UAAU;AAAA,EACd;AACJ,GAEM,IAAoB;AAAA,EACtB;AAAA,IACI,IAAI;AAAA,IACJ,UAAU;AAAA,IACV,MAAM;AAAA,IACN,OAAO;AAAA,IACP,OAAO;AAAA,IACP,MAAO,kBAAA,cAAA,GAAA;AAAA,MAAa,MAAM,EAAS;AAAA,IAAA,CAAQ;AAAA,IAC3C,MAAM;AAAA,IACN,OAAQ,kBAAA,cAAA,GAAA;AAAA,MAAM,MAAO,kBAAA,cAAA,GAAA;AAAA,QAAmB,MAAM,EAAS;AAAA,MAAA,CAAQ;AAAA,IAAA,CAAI;AAAA,IACnE,UAAU;AAAA,EACd;AAAA,EACA;AAAA,IACI,IAAI;AAAA,IACJ,UAAU;AAAA,IACV,MAAM;AAAA,IACN,OAAO;AAAA,IACP,OAAO;AAAA,IACP,MAAO,kBAAA,cAAA,GAAA;AAAA,MAAa,MAAM,EAAS;AAAA,IAAA,CAAQ;AAAA,IAC3C,MAAM;AAAA,EACV;AAAA,EACA;AAAA,IACI,IAAI;AAAA,IACJ,UAAU;AAAA,IACV,MAAM;AAAA,IACN,OAAO;AAAA,IACP,OAAO;AAAA,IACP,MAAO,kBAAA,cAAA,GAAA;AAAA,MAAa,MAAM,EAAS;AAAA,IAAA,CAAQ;AAAA,IAC3C,MAAM;AAAA,IACN,OAAQ,kBAAA,cAAA,GAAA,MAAM,qBAAmB;AAAA,EACrC;AACJ;AAkE4D,AAM7C,GAAiB,EAAS,QAOlB,GAAiB,EAAS,QAG1B,CAAC,GAAG,CAAuB,GAO3B,GAAiB,EAAS,QAG1B,CAAC,GAAG,CAAiB;"}
1	+ {"version":3,"file":"mocks.es.js","sources":["../../../../src/components/Tree/utils/mocks.tsx"],"sourcesContent":["import { MenuItemContentSize } from '@components/MenuItem';\nimport { IconDocument, IconFaceExtraHappy, IconFolder, IconPlus, IconSize } from '@foundation/Icon';\nimport React from 'react';\nimport { TreeFlatListItem, TreeNodeItem } from '@components/Tree';\nimport { DraggableItem } from '@utilities/dnd';\nimport { Badge } from '../../..';\nimport { Button, ButtonSize } from '@components/Button';\n\nexport const mockActionMenuBlocks = [\n {\n id: 'dropdownBlock',\n ariaLabel: 'Dropdown block',\n menuItems: [\n {\n id: 'dropdown',\n size: MenuItemContentSize.Small,\n title: 'Dropdown',\n onClick: () => console.log('dropdown'),\n },\n ],\n },\n {\n id: 'actionsBlock',\n ariaLabel: 'Item Actions',\n menuItems: [\n {\n id: 'rename',\n size: MenuItemContentSize.Small,\n title: 'Rename',\n onClick: () => console.log('rename'),\n },\n {\n id: 'duplicate',\n size: MenuItemContentSize.Small,\n title: 'Duplicate',\n onClick: () => console.log('duplicate'),\n },\n {\n id: 'unpublish',\n size: MenuItemContentSize.Small,\n title: 'Unpublish',\n onClick: () => console.log('unpublish'),\n },\n ],\n },\n {\n id: 'deleteBlock',\n ariaLabel: 'Delete Block',\n menuItems: [\n {\n id: 'delete',\n size: MenuItemContentSize.Small,\n title: 'Delete',\n onClick: () => console.log('delete'),\n },\n ],\n },\n];\n\nconst uncategorizedPagesNodes = [\n {\n id: '1-1-1',\n parentId: '1-1',\n sort: 1,\n name: 'Home',\n label: 'Page',\n value: 'https://weare.frontify.com/page/1',\n icon: <IconDocument size={IconSize.Size16} />,\n },\n {\n id: '1-1-2',\n parentId: '1-1',\n name: 'Members',\n label: 'Page',\n value: 'https://weare.frontify.com/page/2',\n icon: <IconDocument size={IconSize.Size16} />,\n sort: null,\n },\n {\n id: '1-1-3',\n parentId: '1-1',\n name: 'About us',\n label: 'Page',\n value: 'https://weare.frontify.com/page/3',\n icon: <IconDocument size={IconSize.Size16} />,\n sort: null,\n editable: true,\n },\n];\n\nconst testCategoryNodes = [\n {\n id: '1-2-1',\n parentId: '1-2',\n name: 'Home Category Test Category Lorem ipsum dolor sit amet, consectetur adipiscing elit.',\n label: 'Home Page',\n value: 'https://weare.frontify.com/page/4',\n icon: <IconDocument size={IconSize.Size16} />,\n sort: null,\n badge: <Badge icon={<IconFaceExtraHappy size={IconSize.Size16} />}></Badge>,\n editable: true,\n },\n {\n id: '1-2-2',\n parentId: '1-2',\n name: 'Members Category',\n label: 'Members Page',\n value: 'https://weare.frontify.com/page/5',\n icon: <IconDocument size={IconSize.Size16} />,\n sort: null,\n },\n {\n id: '1-2-3',\n parentId: '1-2',\n name: 'About us Category Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed consectetur quis tellus id elementum.',\n label: 'About Us Page',\n value: 'https://weare.frontify.com/page/6',\n icon: <IconDocument size={IconSize.Size16} />,\n sort: null,\n badge: <Badge>Hello, I am a badge</Badge>,\n tooltipContent: 'Hello, I am tooltip content',\n },\n];\n\ntype mockNodeType = () => DraggableItem<TreeFlatListItem>[];\n\nexport const mockNodesFlat: mockNodeType = () => [\n {\n id: '1',\n name: 'Design System Testing',\n label: 'Document',\n value: 'https://weare.frontify.com/document/1',\n icon: <IconFolder size={IconSize.Size16} />,\n actions: [<Button key={'Design System Testing'} size={ButtonSize.Small} icon={<IconPlus></IconPlus>} />],\n parentId: null,\n sort: 1,\n editable: true,\n },\n {\n id: '1-1',\n name: 'Uncategorizes Pages',\n icon: <IconFolder size={IconSize.Size16} />,\n actions: [\n <Button\n key={'Design System Testing Uncategorizes Pages'}\n size={ButtonSize.Small}\n icon={<IconPlus></IconPlus>}\n />,\n ],\n parentId: '1',\n sort: 1,\n },\n ...uncategorizedPagesNodes,\n {\n id: '1-2',\n parentId: '1',\n name: 'Test Category Lorem ipsum dolor sit amet, consectetur adipiscing elit.',\n label: 'Document',\n icon: <IconFolder size={IconSize.Size16} />,\n actions: [\n <Button\n key={'Design System Testing Uncategorizes Pages Test'}\n size={ButtonSize.Small}\n icon={<IconPlus></IconPlus>}\n />,\n ],\n value: 'https://weare.frontify.com/document/923#/test',\n sort: null,\n badge: <IconFaceExtraHappy size={IconSize.Size16} />,\n },\n ...testCategoryNodes,\n {\n id: '1-3',\n name: 'Category Without Subitems',\n icon: <IconFolder size={IconSize.Size16} />,\n actions: [\n <Button\n key={'Design System Testing Uncategorizes Pages Test Subitems'}\n size={ButtonSize.Small}\n icon={<IconPlus></IconPlus>}\n />,\n ],\n parentId: '1',\n value: 'https://weare.frontify.com/document/923#/test',\n sort: null,\n },\n];\n\nexport const mockNodesTree: DraggableItem<TreeNodeItem>[] = [\n {\n id: '1',\n name: 'Design System Testing',\n label: 'Document',\n value: 'https://weare.frontify.com/document/1',\n icon: <IconFolder size={IconSize.Size16} />,\n parentId: null,\n sort: 1,\n nodes: [\n {\n id: '1-1',\n name: 'Uncategorizes Pages',\n icon: <IconFolder size={IconSize.Size16} />,\n parentId: '1',\n sort: 1,\n nodes: [...uncategorizedPagesNodes],\n },\n {\n id: '1-2',\n parentId: '1',\n name: 'Test Category',\n label: 'Document',\n icon: <IconFolder size={IconSize.Size16} />,\n value: 'https://weare.frontify.com/document/923#/test',\n sort: null,\n nodes: [...testCategoryNodes],\n },\n ],\n },\n];\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;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"}