@websolutespa/payload-plugin-bowl 2.0.1 → 3.0.1

package/dist/components/DataTree/DataTree.js

@@ -0,0 +1,281 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Button } from '@payloadcms/ui';
+import { getClassNames } from '@websolutespa/bom-core';
+import React, { useImperativeHandle, useRef } from 'react';
+import { InteractionMode, Tree, UncontrolledTreeEnvironment } from 'react-complex-tree';
+import './DataTree.scss';
+import { DataTreeProvider } from './DataTreeProvider';
+const canRename = false;
+export function getTreeItemClassName(props) {
+    const { context, item, depth, title, arrow, children } = props;
+    return getClassNames('rct-tree-item-title-container', {
+        'rct-tree-item-title-container-isFolder': item.isFolder,
+        'rct-tree-item-title-container-selected': context.isSelected,
+        'rct-tree-item-title-container-expanded': context.isExpanded,
+        'rct-tree-item-title-container-focused': context.isFocused,
+        'rct-tree-item-title-container-dragging-over': context.isDraggingOver,
+        'rct-tree-item-title-container-search-match': context.isSearchMatching
+    });
+}
+export const DataTreeItemLi = (props)=>{
+    const { context, item, depth, title, arrow, children, interactive } = props;
+    return /*#__PURE__*/ _jsxs("li", {
+        className: "rct-tree-item-li",
+        ...context.itemContainerWithChildrenProps,
+        children: [
+            /*#__PURE__*/ _jsx("div", {
+                className: getTreeItemClassName(props),
+                ...context.itemContainerWithoutChildrenProps,
+                children: /*#__PURE__*/ _jsx("div", {
+                    className: "rct-tree-item-content",
+                    children: interactive
+                })
+            }),
+            children
+        ]
+    });
+};
+export const DataTreeDragItem = (props)=>{
+    const { context, item, depth, title, arrow, children } = props;
+    const { extra } = item.data;
+    // console.log('DataTreeDragItem', extra);
+    return /*#__PURE__*/ _jsxs(_Fragment, {
+        children: [
+            item.children && item.children.length > 0 && arrow,
+            /*#__PURE__*/ _jsx("button", {
+                type: "button",
+                className: "rct-tree-item-button",
+                ...context.interactiveElementProps,
+                children: /*#__PURE__*/ _jsxs("span", {
+                    className: "data-tree__item",
+                    style: {
+                        paddingLeft: `${depth * 6}px`
+                    },
+                    children: [
+                        /*#__PURE__*/ _jsx("span", {
+                            className: "data-tree__title",
+                            children: title
+                        }),
+                        extra && /*#__PURE__*/ _jsx("span", {
+                            className: "data-tree__extra",
+                            children: extra
+                        })
+                    ]
+                })
+            }),
+            canRename && /*#__PURE__*/ _jsx(Button, {
+                type: "button",
+                onClick: context.startRenamingItem,
+                children: "Rename"
+            }),
+            /*#__PURE__*/ _jsx(Button, {
+                type: "button",
+                buttonStyle: "pill",
+                size: "small",
+                icon: /*#__PURE__*/ _jsx("svg", {
+                    clipRule: "evenodd",
+                    fillRule: "evenodd",
+                    strokeLinejoin: "round",
+                    strokeMiterlimit: "2",
+                    viewBox: "0 0 24 24",
+                    xmlns: "http://www.w3.org/2000/svg",
+                    children: /*#__PURE__*/ _jsx("path", {
+                        fill: "currentColor",
+                        d: "m19 20.25c0-.402-.356-.75-.75-.75-2.561 0-11.939 0-14.5 0-.394 0-.75.348-.75.75s.356.75.75.75h14.5c.394 0 .75-.348.75-.75zm-7.403-3.398 9.124-9.125c.171-.171.279-.423.279-.684 0-.229-.083-.466-.28-.662l-3.115-3.104c-.185-.185-.429-.277-.672-.277s-.486.092-.672.277l-9.143 9.103c-.569 1.763-1.555 4.823-1.626 5.081-.02.075-.029.15-.029.224 0 .461.349.848.765.848.511 0 .991-.189 5.369-1.681zm-3.27-3.342 2.137 2.137-3.168 1.046zm.955-1.166 7.651-7.616 2.335 2.327-7.637 7.638z",
+                        fillRule: "nonzero"
+                    })
+                }),
+                iconPosition: "left",
+                onClick: context.primaryAction,
+                children: "Edit"
+            })
+        ]
+    });
+};
+export const DataTreeRenameItem = (props)=>{
+    const { context, item, depth, title, arrow, children } = props;
+    const { extra } = item.data;
+    console.log('DataTreeRenameItem', extra);
+    return /*#__PURE__*/ _jsxs(_Fragment, {
+        children: [
+            item.children && item.children.length > 0 && arrow,
+            /*#__PURE__*/ _jsx("div", {
+                className: "rct-tree-item-button",
+                ...context.interactiveElementProps,
+                children: /*#__PURE__*/ _jsxs("span", {
+                    className: "data-tree__item",
+                    style: {
+                        paddingLeft: `${depth * 6}px`
+                    },
+                    children: [
+                        /*#__PURE__*/ _jsx("span", {
+                            className: "data-tree__title",
+                            children: title
+                        }),
+                        extra && /*#__PURE__*/ _jsx("span", {
+                            className: "data-tree__extra",
+                            children: extra
+                        })
+                    ]
+                })
+            })
+        ]
+    });
+};
+export const DataTreeItem = (props)=>{
+    const { context, item, depth, title, arrow, children } = props;
+    return /*#__PURE__*/ _jsx(DataTreeItemLi, {
+        ...props,
+        interactive: context.isRenaming ? /*#__PURE__*/ _jsx(DataTreeRenameItem, {
+            ...props
+        }) : /*#__PURE__*/ _jsx(DataTreeDragItem, {
+            ...props
+        })
+    });
+};
+function DataTree_(props, ref) {
+    const { items, rootItem = '_root', treeId = 'tree', treeLabel = 'Label', onChange, onEdit } = props;
+    const treeEnvironment = useRef(null);
+    const tree = useRef(null);
+    const expandedItem = items[rootItem]?.children ? items[rootItem]?.children[0] : undefined;
+    const viewState = {
+        tree: {
+            expandedItems: expandedItem ? [
+                expandedItem
+            ] : []
+        }
+    };
+    const onSetData = (item, data)=>({
+            ...item,
+            data
+        });
+    useImperativeHandle(ref, ()=>({
+            onSetData
+        }));
+    const dataProvider = new DataTreeProvider(items, onSetData);
+    dataProvider.onItemsDidChange((items)=>{
+        // console.log('onItemsDidChange', items);
+        if (typeof onChange === 'function') {
+            onChange(items);
+        }
+    });
+    /*
+  dataProvider.onDidChangeTreeData(async (changedItemIds: TreeItemIndex[]) => {
+    const item = await dataProvider.getTreeItem(changedItemIds[0]);
+    console.log('onDidChangeTreeData', changedItemIds, item);
+  });
+  */ const getItemTitle = (item)=>item.data.title;
+    /*
+  const onStateDidChange = () => {
+    const currentItems = treeEnvironment.current.items;
+    console.log(
+      'onStateDidChange',
+      'items', Object.keys(items).join(', '),
+      'currentItems', Object.keys(currentItems).join(', '),
+      items === currentItems,
+      JSON.stringify(items) === JSON.stringify(currentItems),
+    );
+  };
+
+  const onDrop = (items: TreeItem<any>[], target: DraggingPosition) => {
+    console.log('onDrop', items, target);
+    console.log(tree.current, treeEnvironment.current);
+    console.log(treeEnvironment.current.items['product_index'].children.join(', '));
+    onStateDidChange();
+  };
+
+  const onRenameItem = (item: TreeItem<any>, name: string, treeId: string) => {
+    console.log('onRenameItem', item, treeId);
+    onStateDidChange();
+  };
+
+  */ const onPrimaryAction = (items, treeId)=>{
+        // console.log('onPrimaryAction', items, treeId);
+        if (typeof onEdit === 'function') {
+            onEdit(items, treeId);
+        }
+    };
+    const onExpandAll = (event)=>{
+        tree.current?.expandAll();
+    };
+    const onCollapseAll = (event)=>{
+        tree.current?.collapseAll();
+    };
+    /*
+  useEffect(() => {
+    tree.current?.collapseAll();
+    tree.current?.expandAll();
+    console.log('useEffect.expandAll');
+  }, [items]);
+  */ const baseClass = 'category-tree';
+    return /*#__PURE__*/ _jsxs(_Fragment, {
+        children: [
+            /*#__PURE__*/ _jsx("div", {
+                className: "list-controls",
+                children: /*#__PURE__*/ _jsx("div", {
+                    className: "list-controls__wrap",
+                    children: /*#__PURE__*/ _jsxs("div", {
+                        className: `${baseClass}__actions`,
+                        children: [
+                            /*#__PURE__*/ _jsx("button", {
+                                type: "button",
+                                onClick: onExpandAll,
+                                children: "Expand"
+                            }),
+                            /*#__PURE__*/ _jsx("button", {
+                                type: "button",
+                                onClick: onCollapseAll,
+                                children: "Collapse"
+                            })
+                        ]
+                    })
+                })
+            }),
+            /*#__PURE__*/ _jsx(UncontrolledTreeEnvironment, {
+                ref: treeEnvironment,
+                dataProvider: dataProvider,
+                getItemTitle: getItemTitle,
+                viewState: viewState,
+                /*
+        renderTreeContainer={({ children, containerProps }) => (
+          <div {...containerProps}>{children}</div>
+        )}
+        renderItemsContainer={({ children, containerProps }) => (
+          <ul {...containerProps}>{children}</ul>
+        )}
+        */ renderItem: DataTreeItem,
+                /*
+        renderItemTitle={({ title }) => <span>{title}</span>}
+        renderItemArrow={({ item, context }) =>
+          item.isFolder ? (
+            context.isExpanded ? (
+              <span>{'>'}</span>
+            ) : (
+              <span>v</span>
+            )
+          ) : null
+        }
+        */ defaultInteractionMode: InteractionMode.ClickArrowToExpand,
+                canDragAndDrop: true,
+                canReorderItems: true,
+                canDropOnFolder: true,
+                canDropOnNonFolder: false,
+                canRename: canRename,
+                /*
+        onDrop={onDrop}
+        onRenameItem={onRenameItem}
+        */ onPrimaryAction: onPrimaryAction,
+                children: /*#__PURE__*/ _jsx(Tree, {
+                    ref: tree,
+                    rootItem: rootItem,
+                    treeId: treeId,
+                    treeLabel: treeLabel
+                })
+            })
+        ]
+    });
+}
+export const DataTree = /*#__PURE__*/ React.forwardRef(DataTree_);
+
+//# sourceMappingURL=DataTree.js.map

package/dist/components/DataTree/DataTree.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/DataTree/DataTree.tsx"],"sourcesContent":["'use client';\r\n\r\nimport { Button } from '@payloadcms/ui';\r\nimport { getClassNames } from '@websolutespa/bom-core';\r\nimport React, { ReactNode, useImperativeHandle, useRef } from 'react';\r\nimport { InteractionMode, Tree, TreeEnvironmentRef, TreeInformation, TreeItem, TreeItemIndex, TreeItemRenderContext, TreeRef, UncontrolledTreeEnvironment } from 'react-complex-tree';\r\nimport './DataTree.scss';\r\n\r\nimport { DataTreeProvider, TreeItemData } from './DataTreeProvider';\r\n\r\nconst canRename = false;\r\n\r\nexport type TreeItems<T extends TreeItemData> = Record<TreeItemIndex, TreeItem<T>>;\r\n\r\nexport type DataTreeItemProps<T extends TreeItemData = TreeItemData, C extends string = never> = {\r\n  item: TreeItem<T>;\r\n  depth: number;\r\n  children: React.ReactNode | null;\r\n  title: React.ReactNode;\r\n  arrow: React.ReactNode;\r\n  context: TreeItemRenderContext<C>;\r\n  info: TreeInformation;\r\n};\r\n\r\nexport function getTreeItemClassName(props: DataTreeItemProps): string {\r\n  const { context, item, depth, title, arrow, children } = props;\r\n  return getClassNames(\r\n    'rct-tree-item-title-container',\r\n    {\r\n      'rct-tree-item-title-container-isFolder': item.isFolder,\r\n      'rct-tree-item-title-container-selected': context.isSelected,\r\n      'rct-tree-item-title-container-expanded': context.isExpanded,\r\n      'rct-tree-item-title-container-focused': context.isFocused,\r\n      'rct-tree-item-title-container-dragging-over': context.isDraggingOver,\r\n      'rct-tree-item-title-container-search-match': context.isSearchMatching,\r\n    }\r\n  );\r\n}\r\n\r\nexport const DataTreeItemLi = (props: DataTreeItemProps & { interactive: ReactNode }): React.ReactElement => {\r\n  const { context, item, depth, title, arrow, children, interactive } = props;\r\n  return (\r\n    <li className=\"rct-tree-item-li\"\r\n      {...(context.itemContainerWithChildrenProps)}\r\n    >\r\n      <div className={getTreeItemClassName(props)}\r\n        {...(context.itemContainerWithoutChildrenProps)}\r\n      >\r\n        <div className=\"rct-tree-item-content\">{interactive}</div>\r\n      </div>\r\n      {children}\r\n    </li>\r\n  );\r\n};\r\n\r\nexport const DataTreeDragItem = (props: DataTreeItemProps): React.ReactElement => {\r\n  const { context, item, depth, title, arrow, children } = props;\r\n  const { extra } = item.data;\r\n  // console.log('DataTreeDragItem', extra);\r\n  return (\r\n    <>\r\n      {item.children && item.children.length > 0 && arrow}\r\n      <button type=\"button\" className=\"rct-tree-item-button\"\r\n        {...(context.interactiveElementProps as any)}\r\n      >\r\n        <span className=\"data-tree__item\" style={{ paddingLeft: `${depth * 6}px` }}>\r\n          <span className=\"data-tree__title\">{title}</span>\r\n          {extra && (<span className=\"data-tree__extra\">{extra}</span>)}\r\n        </span>\r\n      </button>\r\n      {canRename && (\r\n        <Button type=\"button\" onClick={context.startRenamingItem}>\r\n          Rename\r\n        </Button>\r\n      )}\r\n      <Button type=\"button\" buttonStyle=\"pill\" size=\"small\" icon={(\r\n        <svg clipRule=\"evenodd\" fillRule=\"evenodd\" strokeLinejoin=\"round\" strokeMiterlimit=\"2\" viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\">\r\n          <path fill=\"currentColor\" d=\"m19 20.25c0-.402-.356-.75-.75-.75-2.561 0-11.939 0-14.5 0-.394 0-.75.348-.75.75s.356.75.75.75h14.5c.394 0 .75-.348.75-.75zm-7.403-3.398 9.124-9.125c.171-.171.279-.423.279-.684 0-.229-.083-.466-.28-.662l-3.115-3.104c-.185-.185-.429-.277-.672-.277s-.486.092-.672.277l-9.143 9.103c-.569 1.763-1.555 4.823-1.626 5.081-.02.075-.029.15-.029.224 0 .461.349.848.765.848.511 0 .991-.189 5.369-1.681zm-3.27-3.342 2.137 2.137-3.168 1.046zm.955-1.166 7.651-7.616 2.335 2.327-7.637 7.638z\" fillRule=\"nonzero\" />\r\n        </svg>\r\n      )} iconPosition=\"left\" onClick={context.primaryAction}>\r\n        Edit\r\n      </Button>\r\n    </>\r\n  );\r\n};\r\n\r\nexport const DataTreeRenameItem = (props: DataTreeItemProps): React.ReactElement => {\r\n  const { context, item, depth, title, arrow, children } = props;\r\n  const { extra } = item.data;\r\n  console.log('DataTreeRenameItem', extra);\r\n  return (\r\n    <>\r\n      {item.children && item.children.length > 0 && arrow}\r\n      <div className=\"rct-tree-item-button\" {...(context.interactiveElementProps)}>\r\n        <span className=\"data-tree__item\" style={{ paddingLeft: `${depth * 6}px` }}>\r\n          <span className=\"data-tree__title\">{title}</span>\r\n          {extra && (<span className=\"data-tree__extra\">{extra}</span>)}\r\n        </span>\r\n      </div>\r\n    </>\r\n  );\r\n};\r\n\r\nexport const DataTreeItem = (props: DataTreeItemProps): React.ReactElement => {\r\n  const { context, item, depth, title, arrow, children } = props;\r\n  return (\r\n    <DataTreeItemLi {...props} interactive={\r\n      context.isRenaming ?\r\n        <DataTreeRenameItem {...props} /> :\r\n        <DataTreeDragItem {...props} />\r\n    } />\r\n  );\r\n};\r\n\r\nexport type DataTreeInstance<T extends TreeItemData> = {\r\n  onSetData: (item: TreeItem<T>, data: T) => TreeItem<T>;\r\n};\r\n\r\nexport type DataTreeProps<T extends TreeItemData> = {\r\n  items: TreeItems<T>;\r\n  rootItem?: string;\r\n  treeId?: string;\r\n  treeLabel?: string;\r\n  onChange?: (items: TreeItems<T>) => void;\r\n  onEdit?: (items: TreeItem<T>, treeId: string) => void;\r\n};\r\n\r\nfunction DataTree_<T extends TreeItemData>(\r\n  props: DataTreeProps<T>,\r\n  ref: React.ForwardedRef<DataTreeInstance<T>>\r\n) {\r\n\r\n  const { items, rootItem = '_root', treeId = 'tree', treeLabel = 'Label', onChange, onEdit } = props;\r\n\r\n  const treeEnvironment = useRef<TreeEnvironmentRef>(null);\r\n  const tree = useRef<TreeRef>(null);\r\n\r\n  const expandedItem = items[rootItem]?.children ? items[rootItem]?.children[0] : undefined;\r\n\r\n  const viewState = {\r\n    tree: {\r\n      expandedItems: expandedItem ? [expandedItem] : [],\r\n    },\r\n  };\r\n\r\n  const onSetData = (item: TreeItem<T>, data: T) => ({\r\n    ...item,\r\n    data,\r\n  });\r\n\r\n  useImperativeHandle(ref, () => ({\r\n    onSetData,\r\n  }));\r\n\r\n  const dataProvider = new DataTreeProvider(items, onSetData);\r\n\r\n  dataProvider.onItemsDidChange((items) => {\r\n    // console.log('onItemsDidChange', items);\r\n    if (typeof onChange === 'function') {\r\n      onChange(items);\r\n    }\r\n  });\r\n\r\n  /*\r\n  dataProvider.onDidChangeTreeData(async (changedItemIds: TreeItemIndex[]) => {\r\n    const item = await dataProvider.getTreeItem(changedItemIds[0]);\r\n    console.log('onDidChangeTreeData', changedItemIds, item);\r\n  });\r\n  */\r\n\r\n  const getItemTitle = (item: TreeItem<T>) => item.data.title;\r\n\r\n  /*\r\n  const onStateDidChange = () => {\r\n    const currentItems = treeEnvironment.current.items;\r\n    console.log(\r\n      'onStateDidChange',\r\n      'items', Object.keys(items).join(', '),\r\n      'currentItems', Object.keys(currentItems).join(', '),\r\n      items === currentItems,\r\n      JSON.stringify(items) === JSON.stringify(currentItems),\r\n    );\r\n  };\r\n\r\n  const onDrop = (items: TreeItem<any>[], target: DraggingPosition) => {\r\n    console.log('onDrop', items, target);\r\n    console.log(tree.current, treeEnvironment.current);\r\n    console.log(treeEnvironment.current.items['product_index'].children.join(', '));\r\n    onStateDidChange();\r\n  };\r\n\r\n  const onRenameItem = (item: TreeItem<any>, name: string, treeId: string) => {\r\n    console.log('onRenameItem', item, treeId);\r\n    onStateDidChange();\r\n  };\r\n\r\n  */\r\n\r\n  const onPrimaryAction = (items: TreeItem<T>, treeId: string) => {\r\n    // console.log('onPrimaryAction', items, treeId);\r\n    if (typeof onEdit === 'function') {\r\n      onEdit(items, treeId);\r\n    }\r\n  };\r\n\r\n  const onExpandAll = (event: React.MouseEvent) => {\r\n    tree.current?.expandAll();\r\n  };\r\n\r\n  const onCollapseAll = (event: React.MouseEvent) => {\r\n    tree.current?.collapseAll();\r\n  };\r\n\r\n  /*\r\n  useEffect(() => {\r\n    tree.current?.collapseAll();\r\n    tree.current?.expandAll();\r\n    console.log('useEffect.expandAll');\r\n  }, [items]);\r\n  */\r\n\r\n  const baseClass = 'category-tree';\r\n\r\n  return (\r\n    <>\r\n      <div className=\"list-controls\">\r\n        <div className=\"list-controls__wrap\">\r\n          <div className={`${baseClass}__actions`}>\r\n            <button type=\"button\" onClick={onExpandAll}>\r\n              Expand\r\n            </button>\r\n            <button type=\"button\" onClick={onCollapseAll}>\r\n              Collapse\r\n            </button>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <UncontrolledTreeEnvironment<T>\r\n        ref={treeEnvironment}\r\n        dataProvider={dataProvider}\r\n        getItemTitle={getItemTitle}\r\n        viewState={viewState}\r\n        /*\r\n        renderTreeContainer={({ children, containerProps }) => (\r\n          <div {...containerProps}>{children}</div>\r\n        )}\r\n        renderItemsContainer={({ children, containerProps }) => (\r\n          <ul {...containerProps}>{children}</ul>\r\n        )}\r\n        */\r\n        renderItem={DataTreeItem}\r\n        /*\r\n        renderItemTitle={({ title }) => <span>{title}</span>}\r\n        renderItemArrow={({ item, context }) =>\r\n          item.isFolder ? (\r\n            context.isExpanded ? (\r\n              <span>{'>'}</span>\r\n            ) : (\r\n              <span>v</span>\r\n            )\r\n          ) : null\r\n        }\r\n        */\r\n        defaultInteractionMode={InteractionMode.ClickArrowToExpand}\r\n        canDragAndDrop={true}\r\n        canReorderItems={true}\r\n        canDropOnFolder={true}\r\n        canDropOnNonFolder={false}\r\n        canRename={canRename}\r\n        /*\r\n        onDrop={onDrop}\r\n        onRenameItem={onRenameItem}\r\n        */\r\n        onPrimaryAction={onPrimaryAction}\r\n      >\r\n        <Tree ref={tree} rootItem={rootItem} treeId={treeId} treeLabel={treeLabel} />\r\n      </UncontrolledTreeEnvironment>\r\n    </>\r\n  );\r\n}\r\n\r\nexport const DataTree = React.forwardRef(DataTree_) as <T extends TreeItemData>(\r\n  props: DataTreeProps<T> & { ref?: React.ForwardedRef<DataTreeInstance<T>> }\r\n) => ReturnType<typeof DataTree_>;\r\n"],"names":["Button","getClassNames","React","useImperativeHandle","useRef","InteractionMode","Tree","UncontrolledTreeEnvironment","DataTreeProvider","canRename","getTreeItemClassName","props","context","item","depth","title","arrow","children","isFolder","isSelected","isExpanded","isFocused","isDraggingOver","isSearchMatching","DataTreeItemLi","interactive","li","className","itemContainerWithChildrenProps","div","itemContainerWithoutChildrenProps","DataTreeDragItem","extra","data","length","button","type","interactiveElementProps","span","style","paddingLeft","onClick","startRenamingItem","buttonStyle","size","icon","svg","clipRule","fillRule","strokeLinejoin","strokeMiterlimit","viewBox","xmlns","path","fill","d","iconPosition","primaryAction","DataTreeRenameItem","console","log","DataTreeItem","isRenaming","DataTree_","ref","items","rootItem","treeId","treeLabel","onChange","onEdit","treeEnvironment","tree","expandedItem","undefined","viewState","expandedItems","onSetData","dataProvider","onItemsDidChange","getItemTitle","onPrimaryAction","onExpandAll","event","current","expandAll","onCollapseAll","collapseAll","baseClass","renderItem","defaultInteractionMode","ClickArrowToExpand","canDragAndDrop","canReorderItems","canDropOnFolder","canDropOnNonFolder","DataTree","forwardRef"],"mappings":"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"}

package/dist/components/DataTree/DataTree.scss

@@ -0,0 +1,363 @@
+@use "sass:math";
+
+:root {
+  --rct-item-height: 32px;
+  --rct-item-margin: 2px;
+  --rct-item-padding: 6px 0px;
+  --rct-item-gap: 0px;
+  --rct-item-border-radius: 2px;
+  --rct-title-container-gap: 2px;
+  --rct-bar-offset: 6px;
+  --rct-bar-width: 2px;
+  --rct-arrow-size: 10px;
+  --rct-arrow-container-size: 16px;
+  --rct-arrow-padding: 6px;
+  --rct-search-width: 120px;
+  --rct-search-height: 16px;
+  --rct-search-padding: 20px;
+  --rct-search-text-offset: calc(var(--rct-search-padding) * 2 + 16px);
+  --rct-search-container-width: calc(var(--rct-search-width) + var(--rct-search-text-offset) + var(--rct-search-padding) + 2px);
+  --rct-cursor: pointer;
+}
+
+/* light */
+:root {
+  --rct-color-arrow: #373a3f;
+  --rct-color-bar-bg: #0366d6;
+  --rct-color-drag-between-line-bg: #0366d6;
+  --rct-color-focustree-item-active-bg: #e4e6eb;
+  --rct-color-focustree-item-active-text: #4f4f4f;
+  --rct-color-focustree-item-draggingover-bg: #ebf0f4;
+  --rct-color-focustree-item-draggingover-color: inherit;
+  --rct-color-focustree-item-focused-border: #0366d6;
+  --rct-color-focustree-item-hover-bg: #f0f2f5;
+  --rct-color-focustree-item-hover-text: inherit;
+  --rct-color-focustree-item-selected-bg: #f0f2f5;
+  --rct-color-focustree-item-selected-text: inherit;
+  --rct-color-nonfocustree-item-focused-border: #dbdbdb;
+  --rct-color-nonfocustree-item-selected-bg: #e8eaed;
+  --rct-color-nonfocustree-item-selected-text: inherit;
+  --rct-color-renaming-input-submitbutton-bg-active: #095fc1;
+  --rct-color-renaming-input-submitbutton-bg-hover: #0366d6;
+  --rct-color-renaming-input-submitbutton-bg: inherit;
+  --rct-color-renaming-input-submitbutton-text-active: #ffffff;
+  --rct-color-renaming-input-submitbutton-text-hover: #ffffff;
+  --rct-color-renaming-input-submitbutton-text: inherit;
+  --rct-color-search-border-bottom: #0366d6;
+  --rct-color-search-border: #b4b7bd;
+  --rct-color-search-highlight-bg: #acccf1;
+  --rct-color-tree-bg: transparent;
+  --rct-color-tree-focus-outline: transparent;
+  --rct-focus-outline: #000000;
+  --rct-search-bg: #f8f9fa;
+  --rct-search-text: #000000;
+}
+
+/* dark */
+html[data-theme=dark],
+.rct-dark {
+  --rct-color-arrow: #ffffff;
+  --rct-color-bar-bg: var(--color-success-400);
+  --rct-color-drag-between-line-bg: var(--color-success-400);
+  --rct-color-focustree-item-focused-border: var(--color-success-400);
+  --rct-color-focustree-item-active-bg: #313131;
+  --rct-color-focustree-item-active-text: #ffffff;
+  --rct-color-focustree-item-draggingover-bg: #313131;
+  --rct-color-focustree-item-draggingover-color: #ffffff;
+  --rct-color-focustree-item-hover-bg: #373737;
+  --rct-color-focustree-item-hover-text: #ffffff;
+  --rct-color-focustree-item-selected-bg: #373737;
+  --rct-color-focustree-item-selected-text: #ffffff;
+  --rct-color-search-border-bottom: var(--color-success-400);
+  --rct-color-search-border: #4f4f4f;
+  --rct-color-search-highlight-bg: #2f5381;
+  --rct-focus-outline: #ffffff;
+  --rct-search-bg: #373737;
+  --rct-search-text: #ffffff;
+}
+
+.rct-tree-root {
+  font-family: sans-serif;
+  background-color: var(--rct-color-tree-bg);
+  padding: 4px 0;
+
+  &-focus {
+    outline: 1px solid var(--rct-color-tree-focus-outline);
+  }
+
+  &.rct-tree-root-focus {
+    .rct-tree-item-title-container-selected {
+      background-color: var(--rct-color-focustree-item-selected-bg);
+      color: var(--rct-color-focustree-item-selected-text);
+    }
+
+    .rct-tree-item-title-container-focused {
+      outline: none;
+      border-color: var(--rct-color-focustree-item-focused-border);
+    }
+  }
+
+  &:not(.rct-tree-root-focus) {
+    .rct-tree-item-title-container-selected {
+      background-color: var(--rct-color-nonfocustree-item-selected-bg);
+      color: var(--rct-color-nonfocustree-item-selected-text);
+    }
+
+    .rct-tree-item-title-container-focused {
+      outline: none;
+      border-color: var(--rct-color-nonfocustree-item-focused-border);
+    }
+  }
+}
+
+.rct-tree-items-container {
+  margin: 0;
+  padding: 0;
+  outline: 1px solid var(--theme-elevation-100);
+  /*
+  display: flex;
+  flex-direction: column;
+  gap: 0.4rem;
+  // border-top: 1px 0 0 0 solid var(--theme-elevation-100);
+  // box-shadow: 0 -1px 0 var(--theme-elevation-100);
+  */
+}
+
+.rct-tree-item {
+  &-li {
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+    // border-radius: 0.2rem;
+    // outline: 1px solid var(--theme-elevation-100);
+  }
+
+  &-content {
+    display: flex;
+    align-items: center;
+    width: 100%;
+    gap: 0.4rem;
+    padding: 0.3rem;
+    // border-radius: 0.2rem;
+    // border: 1px solid var(--theme-elevation-100);
+
+    .btn {
+      margin: 0;
+      padding: 0;
+      flex: 0 0 60px;
+
+      &__label {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        width: auto;
+        gap: 0.3em;
+
+        svg {
+          flex: 0 0 1.5em;
+          fill: currentColor;
+        }
+      }
+    }
+  }
+
+  &-title-container {
+    display: flex;
+    align-items: center;
+    column-gap: var(--rct-title-container-gap);
+    background-color: unset !important;
+
+    &-dragging-over {
+      background-color: var(--rct-color-focustree-item-draggingover-bg);
+      color: var(--rct-color-focustree-item-draggingover-color);
+      outline: 1px solid var(--color-success-400);
+
+      .rct-tree-item-button {
+        background-color: var(--rct-color-focustree-item-draggingover-bg);
+        color: var(--rct-color-focustree-item-draggingover-color);
+      }
+    }
+
+    &-selected {
+      .rct-tree-item-button {
+        // background-color: var(--rct-color-focustree-item-selected-bg);
+        // color: var(--rct-color-focustree-item-selected-text);
+
+        &::before {
+          content: '';
+          position: absolute;
+          top: calc(var(--rct-bar-offset) + var(--rct-item-margin));
+          /* left: calc(-1 * var(--rct-bar-width));*/
+          left: calc(-0.5 * var(--rct-bar-width));
+          height: calc(var(--rct-item-height) - 2 * var(--rct-bar-offset));
+          width: var(--rct-bar-width);
+          background-color: var(--rct-color-bar-bg);
+          border-radius: 1px;
+        }
+      }
+    }
+  }
+
+  &-arrow {
+    position: absolute;
+    z-index: 1;
+    // margin-right: calc(-1 * var(--rct-arrow-container-size) + var(--rct-arrow-padding));
+    margin-left: 4px;
+    width: var(--rct-arrow-container-size);
+    height: var(--rct-arrow-container-size);
+    display: flex;
+    justify-content: center;
+    align-content: center;
+    border-radius: var(--rct-item-border-radius);
+    cursor: var(--rct-cursor);
+
+    & svg {
+      width: var(--rct-arrow-size);
+    }
+
+    &.rct-tree-item-arrow-isFolder:hover {
+      background-color: var(--rct-color-focustree-item-hover-bg);
+      // background-color: rgba(255, 255, 255, 0.05);
+      color: var(--rct-color-focustree-item-hover-text);
+    }
+  }
+
+  &-arrow-path {
+    fill: var(--rct-color-arrow);
+  }
+
+  &-button {
+    flex-grow: 1;
+    box-sizing: border-box;
+    position: relative;
+    display: flex;
+    align-items: center;
+    width: 100%;
+    height: var(--rct-item-height);
+    // margin-bottom: var(--rct-item-margin);
+    // margin-left: calc(-1 * var(--rct-arrow-size));
+    // margin-top: var(--rct-item-margin);
+    padding: var(--rct-item-padding);
+    padding-left: calc(var(--rct-arrow-container-size) + var(--rct-arrow-padding));
+    // padding: 0 var(--rct-item-gap) 0 calc(var(--rct-item-gap) + var(--rct-arrow-container-size) + var(--rct-arrow-padding));
+    border: none;
+    border-radius: var(--rct-item-border-radius);
+    background-color: transparent;
+    font-family: inherit;
+    font-size: inherit;
+    text-align: left;
+    color: inherit;
+    outline: none;
+    transition: color 100ms ease-out, background-color 100ms ease-out;
+    cursor: var(--rct-cursor);
+
+    &:focus-visible {
+      outline: 2px solid var(--rct-focus-outline);
+    }
+
+    &:hover {
+      background-color: var(--rct-color-focustree-item-hover-bg);
+      // background-color: rgba(255, 255, 255, 0.05);
+      color: var(--rct-color-focustree-item-hover-text);
+    }
+
+    &:active {
+      background-color: var(--rct-color-focustree-item-active-bg);
+      // background-color: rgba(255, 255, 255, 0.05);
+      color: var(--rct-color-focustree-item-active-text);
+    }
+  }
+
+  &-button-search-match {
+    font-style: italic;
+  }
+
+  &-search-highlight {
+    background-color: var(--rct-color-search-highlight-bg);
+  }
+
+  /* TODO see renaming form in multiple tree example, wraps around */
+  &-renaming-form {
+    flex-grow: 1;
+    display: flex;
+  }
+
+  &-renaming-input {
+    flex-grow: 1;
+    background-color: inherit;
+    border: none;
+    color: inherit;
+    outline: none;
+  }
+
+  &-renaming-submit-button {
+    border: none;
+    background-color: var(--rct-color-renaming-input-submitbutton-bg);
+    border-radius: var(--rct-item-border-radius);
+    color: var(--rct-color-renaming-input-submitbutton-text);
+    cursor: pointer;
+    visibility: hidden;
+
+    &:hover {
+      background-color: var(--rct-color-renaming-input-submitbutton-bg-hover);
+      color: var(--rct-color-renaming-input-submitbutton-text-hover);
+    }
+
+    &:active {
+      background-color: var(--rct-color-renaming-input-submitbutton-bg-active);
+      color: var(--rct-color-renaming-input-submitbutton-text-active);
+    }
+  }
+}
+
+.rct-tree-drag-between-line {
+  position: absolute;
+  right: 0;
+  top: -2px;
+  height: 3px;
+  border-radius: 99px;
+  background-color: var(--rct-color-drag-between-line-bg);
+
+  &-top {
+    top: 0px;
+  }
+
+  &-bottom {
+    top: -4px;
+  }
+}
+
+.rct-tree-search-input-container {
+  position: absolute;
+  top: 0;
+  right: 0;
+  width: var(--rct-search-container-width);
+}
+
+.rct-tree-search-input {
+  width: var(--rct-search-width);
+  height: var(--rct-search-height);
+  padding: var(--rct-search-padding);
+  padding-left: var(--rct-search-text-offset);
+  margin: 0;
+  border: 1px solid var(--rct-color-search-border);
+  border-bottom: 2px solid var(--rct-color-search-border-bottom);
+  border-radius: var(--rct-item-border-radius);
+  background-color: var(--rct-search-bg);
+  color: var(--rct-search-text);
+
+  &:focus {
+    outline: none;
+  }
+}
+
+.rct-tree-input-icon {
+  content: url(data:image/svg+xml,%3Csvg%20stroke%3D%22currentColor%22%20fill%3D%22currentColor%22%20stroke-width%3D%220%22%20viewBox%3D%220%200%2016%2016%22%20height%3D%221em%22%20width%3D%221em%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M11.742%2010.344a6.5%206.5%200%201%200-1.397%201.398h-.001c.03.04.062.078.098.115l3.85%203.85a1%201%200%200%200%201.415-1.414l-3.85-3.85a1.007%201.007%200%200%200-.115-.1zM12%206.5a5.5%205.5%200%201%201-11%200%205.5%205.5%200%200%201%2011%200z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E);
+  position: fixed;
+  transform: translateY(var(--rct-search-padding)) translateX(var(--rct-search-padding));
+  z-index: 1;
+
+  .rct-dark & {
+    content: url(data:image/svg+xml,%3Csvg%20stroke%3D%22%23ffffff%22%20fill%3D%22%23ffffff%22%20stroke-width%3D%220%22%20viewBox%3D%220%200%2016%2016%22%20height%3D%221em%22%20width%3D%221em%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M11.742%2010.344a6.5%206.5%200%201%200-1.397%201.398h-.001c.03.04.062.078.098.115l3.85%203.85a1%201%200%200%200%201.415-1.414l-3.85-3.85a1.007%201.007%200%200%200-.115-.1zM12%206.5a5.5%205.5%200%201%201-11%200%205.5%205.5%200%200%201%2011%200z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E);
+  }
+}