@clevertask/react-sortable-tree 0.0.6 → 0.0.8

package/README.md

@@ -1,6 +1,10 @@
 # @clevertask/react-sortable-tree
 
-A customizable React component for rendering and managing tree structures with drag-and-drop functionality. This is built on top of the [sortable tree Component from the dnd-kit library](https://github.com/clauderic/dnd-kit/blob/master/stories/3%20-%20Examples/Tree/SortableTree.tsx).
+A customizable React component for rendering and managing tree structures with drag-and-drop functionality. Built on top of the [dnd-kit sortable tree example](https://github.com/clauderic/dnd-kit/blob/master/stories/3%20-%20Examples/Tree/SortableTree.tsx).
+
+This library is currently focused on **custom item rendering** and **type-safe tree structures**. A more detailed API and feature set will be released in a future major version with support for virtualization and multi-selection.
+
+---
 
 ## Table of Contents
 
@@ -8,54 +12,210 @@ A customizable React component for rendering and managing tree structures with d
 - [Usage](#usage)
 - [Props](#props)
 - [Types](#types)
-  - [TreeItem](#treeitem)
-  - [TreeItems](#treeitems)
 - [Helper Functions](#helper-functions)
-  - [getItemById](#getItemById)
-  - [removeItemById](#removeitembyid)
-  - [setTreeItemProperties](#settreeitemproperties)
 - [Roadmap](#roadmap)
-- [Release Process](#release-process)
 - [License](#license)
 
+---
+
 ## Installation
 
 ```bash
 npm install @clevertask/react-sortable-tree
 ```
 
+---
+
 ## Usage
 
+### 1. Define your custom tree item type if needed
+
+```ts
+type CustomTreeItem = TreeItem<{
+  metadata?: Record<string, any>;
+  icon?: string;
+}>;
+```
+
+Otherwise, the component will use the default [tree item type](#types).
+
+---
+
+### 2. Create your custom item component
+
+This is the basic structure you can start with:
+
 ```tsx
-import '@clevertask/react-sortable-tree/dist/style.css';
-import React, { useState } from 'react';
-import { SortableTree, TreeItems } from '@clevertask/react-sortable-tree';
+import { RenderItemProps, TreeItemStructure } from '@clevertask/react-sortable-tree';
 
-function App() {
-  const [items, setItems] = useState<TreeItems>([
-    { id: '1', label: 'Item 1', children: [] },
-    { id: '2', label: 'Item 2', children: [{ id: '3', label: 'Item 2.1', children: [] }] },
-  ]);
+export const TreeItem = (props: RenderItemProps) => {
+  const { treeItem, collapsed, onCollapse, dragListeners } = props;
 
   return (
-    <SortableTree
-      items={items}
-      setItems={setItems}
-      isCollapsible
-      isRemovable
-      allowNestedItemAddition
-      // ... other props
-    />
+    <TreeItemStructure {...props}>
+      {/* TreeItemStructure.DragHandler provides a default drag handle with accessible attributes and stable selectors for E2E testing.*/}
+      <TreeItemStructure.DragHandler>Drag me</TreeItemStructure.DragHandler>
+
+      {/* Or if you want to implement your own approach */}
+      <button {...dragListeners}>Drag me</button>
+
+      {onCollapse && <button onClick={onCollapse}>{collapsed ? 'Expand' : 'Collapse'}</button>}
+
+      <h5>{treeItem.label}</h5>
+
+      <button onClick={() => openItemDetailsModal(treeItem.id)}>Show treeItem info</button>
+    </TreeItemStructure>
   );
-}
+};
+```
+
+If you need to change the indicator colors when dragging an item, you can use the `createSortableTreeGlobalStyles` for that:
+
+```tsx
+const useSortableTreeGlobalStyles = createSortableTreeGlobalStyles({
+  indicatorColor: 'var(--orange-7)',
+  indicatorBorderColor: 'var(--orange-7)',
+});
+
+useSortableTreeGlobalStyles();
+```
+
+This is a real-world example using Radix:
+
+```tsx
+import {
+  RenderItemProps,
+  TreeItemStructure,
+  createSortableTreeGlobalStyles,
+  TreeItem as TTreeItem,
+} from '@clevertask/react-sortable-tree';
+import {
+  DragHandleDots2Icon,
+  ChevronRightIcon,
+  ChevronDownIcon,
+  TrashIcon,
+  PlusIcon,
+} from '@radix-ui/react-icons';
+import { Flex, Button, Text, Box } from '@radix-ui/themes';
+import { CustomTreeItem } from '.';
+
+export const TreeItem = (
+  props: RenderItemProps<CustomTreeItem> & {
+    onClickAddNestedItemButton: (id: string) => void;
+    onClickItemRemoveButton: (id: string) => void;
+    onItemClick: (id: string) => void;
+  },
+) => {
+  const {
+    treeItem,
+    onCollapse,
+    collapsed,
+    onClickAddNestedItemButton,
+    onClickItemRemoveButton,
+    onItemClick,
+  } = props;
+
+  const useSortableTreeGlobalStyles = createSortableTreeGlobalStyles({
+    indicatorColor: 'var(--orange-7)',
+    indicatorBorderColor: 'var(--orange-7)',
+  });
+
+  useSortableTreeGlobalStyles();
+
+  return (
+    <TreeItemStructure
+      {...props}
+      asDropZone={Box}
+      asDraggableItem={Box}
+      draggableItemStyle={{
+        display: 'flex',
+        justifyContent: 'space-between',
+        padding: '1rem',
+        border: '1px solid var(--gray-3)',
+        background: 'var(--color-background)',
+      }}
+    >
+      <Flex align="center" gap="5" direction="row">
+        <TreeItemStructure.DragHandler>
+          <DragHandleDots2Icon />
+        </TreeItemStructure.DragHandler>
+
+        {onCollapse && (
+          <Button color="gray" variant="ghost" onClick={onCollapse}>
+            {collapsed ?
+              <ChevronRightIcon />
+            : <ChevronDownIcon />}
+          </Button>
+        )}
+
+        <Text style={{ cursor: 'pointer' }} onClick={() => onItemClick(treeItem.id)}>
+          {treeItem.label} {treeItem.metadata.foo}
+        </Text>
+      </Flex>
+
+      <Flex align="center" gap="3" direction="row">
+        <Button variant="ghost" color="red" onClick={() => onClickItemRemoveButton(treeItem.id)}>
+          <TrashIcon />
+        </Button>
+        <Button
+          variant="ghost"
+          color="gray"
+          onClick={() => onClickAddNestedItemButton(treeItem.id)}
+        >
+          <PlusIcon />
+        </Button>
+      </Flex>
+    </TreeItemStructure>
+  );
+};
+```
+
+The `<TreeItemStructure/>` appends the dataSlots (for CSS styles), dropzone, and drag item container listeners and refs so you don't have to do it from scratch, but it's possible making your custom tree items without that component.
+
+---
+
+### 3. Use the `SortableTree` with your custom item
+
+```tsx
+import React, { useState } from 'react';
+import { TreeItems, SortableTree } from '@clevertask/react-sortable-tree';
+type CustomTreeItem = TreeItem<{ metadata?: Record<string, string> }>;
+
+const [items, setItems] = useState<TreeItems<CustomTreeItem>>([
+  { id: '1', label: 'Item 1', children: [] },
+  {
+    id: '2',
+    label: 'Item 2',
+    children: [{ id: '3', label: 'Item 2.1', children: [] }],
+    metadata: { foo: 'foo' },
+  },
+]);
+
+<SortableTree<CustomTreeItem>
+  isCollapsible
+  showDropIndicator
+  items={items}
+  setItems={setItems}
+  renderItem={(props: RenderItemProps<CustomTreeItem>) => (
+    <TreeItem
+      {...props}
+      onClickAddNestedItemButton={onClickAddNestedItemButton}
+      onClickItemRemoveButton={onClickItemRemoveButton}
+      onItemClick={onItemClick}
+    />
+  )}
+/>;
 ```
 
+---
+
 ## Props
 
 | Prop                      | Type                                                            | Default     | Description                                                                                                          |
 | ------------------------- | --------------------------------------------------------------- | ----------- | -------------------------------------------------------------------------------------------------------------------- |
-| `items`                   | `TreeItems`                                                     | Required    | The array of tree items to be rendered.                                                                              |
-| `setItems`                | `React.Dispatch<React.SetStateAction<TreeItems>>`               | Required    | Callback function called when the tree items array changes.                                                          |
+| `items`                   | `TreeItems<T>`                                                  | Required    | The array of tree items to be rendered.                                                                              |
+| `setItems`                | `(items: TreeItems<T>) => void`                                 | Required    | Callback function called when the tree items array changes.                                                          |
+| `renderItem`              | `(props: RenderItemProps<T>) => React.ReactNode`                | Required    | Function to render each tree item.                                                                                   |
 | `indentationWidth`        | `number`                                                        | `undefined` | The indentation width for children elements.                                                                         |
 | `isCollapsible`           | `boolean`                                                       | `false`     | Determines if tree items can be collapsed/expanded.                                                                  |
 | `onLazyLoadChildren`      | `(id: UniqueIdentifier, isExpanding: boolean) => Promise<void>` | `undefined` | Callback for lazy loading child items when a parent is expanded. Useful for getting child items from an API endpoint |
@@ -67,106 +227,166 @@ function App() {
 | `onDragEnd`               | `(result: DropResult) => void`                                  | `undefined` | Callback function called when a drag operation ends.                                                                 |
 | `onItemClick`             | `(id: UniqueIdentifier) => void`                                | `undefined` | Callback function called when an item in the tree is clicked.                                                        |
 
+---
+
 ## Types
 
 ### TreeItem
 
-```typescript
-type TreeItem = {
+```ts
+type TreeItem<ExtraProps = unknown> = {
   id: UniqueIdentifier;
   label: string;
-  children: TreeItem[];
+  children: TreeItem<ExtraProps>[];
   collapsed?: boolean;
   canFetchChildren?: boolean;
   disableDragging?: boolean;
-  [key: string]: any;
-};
+} & ExtraProps;
 ```
 
 ### TreeItems
 
-```typescript
-type TreeItems = TreeItem[];
+```ts
+type TreeItems<T = TreeItem> = T[];
 ```
 
-## Helper Functions
-
-### getItemById
-
-```typescript
-function getItemById(items: TreeItems, id: UniqueIdentifier): TreeItem | undefined;
+### TreeStructureProps
+
+```ts
+export interface TreeItemStructureProps {
+  dropZoneRef: (element: HTMLElement | null) => void;
+  draggableItemRef: React.Ref<any>;
+  dropZoneStyle?: React.CSSProperties;
+  draggableItemStyle?: React.CSSProperties;
+  classNames?: {
+    dropZone?: string;
+    draggableItem?: string;
+  };
+  asDropZone?: React.ElementType;
+  asDraggableItem?: React.ElementType;
+  draggableItemProps?: Record<string, any>;
+  children?: React.ReactNode;
+  dataSlots: {
+    dropZone: Record<string, string | boolean | undefined>;
+    draggableItem: Record<string, string>;
+  };
+}
 ```
 
-Retrieves a tree item by its unique identifier.
+### RenderItemProps
+
+```ts
+export interface RenderItemProps<T extends TTreeItem = TTreeItem>
+  extends
+    Pick<
+      TreeItemStructureProps,
+      'classNames' | 'dropZoneStyle' | 'dropZoneRef' | 'draggableItemRef'
+    >,
+    Pick<
+      Props,
+      | 'onCollapse'
+      | 'childCount'
+      | 'clone'
+      | 'ghost'
+      | 'indicator'
+      | 'disableSelection'
+      | 'disableInteraction'
+      | 'collapsed'
+    > {
+  dragListeners?: any;
+  treeItem: T;
+  dataSlots: {
+    dropZone: Record<string, string | boolean | undefined>;
+    draggableItem: Record<string, string>;
+  };
+}
+```
 
-Usage example:
+---
 
-```typescript
-const item = getItemById(items, '1');
-```
+## Helper Functions
 
-### removeItemById
+### getItemById
 
-```typescript
-function removeItemById(items: TreeItems, id: UniqueIdentifier): TreeItems;
+```ts
+function getItemById<T extends TreeItem>(items: TreeItems<T>, id: UniqueIdentifier): T | undefined;
 ```
 
-This function removes an item from the tree structure by its ID. It returns a new `TreeItems` array with the item removed. It also handles removing the item from nested children.
-
-Usage example:
+### removeItemById
 
-```typescript
-const updatedItems = removeItemById(items, '123');
-setItems(updatedItems);
+```ts
+function removeItemById<T extends TreeItem>(
+  items: TreeItems<T>,
+  id: UniqueIdentifier,
+): TreeItems<T>;
 ```
 
 ### setTreeItemProperties
 
-```typescript
-function setTreeItemProperties(
-  items: TreeItems,
+```ts
+function setTreeItemProperties<T extends TreeItem>(
+  items: TreeItems<T>,
   id: UniqueIdentifier,
-  setter: (value: TreeItem) => Partial<TreeItem>,
-): TreeItems;
+  setter: (value: T) => Partial<T>,
+): TreeItems<T>;
 ```
 
-This function updates the properties of a specific tree item. It takes a setter function that receives the current item and returns an object with the properties to be updated. It returns a new `TreeItems` array with the updated item.
+---
+
+## E2E Helper Functions
+
+While adding e2e tests for this library, we created some helper functions that makes e2e testing declarative and easy in a way the user would use the UI. Feel free to import these helpers on your e2e tests. Also feel free to see the tests added to this repo on the `e2e` folder to have an idea about using these helpers
+
+### dragItem
+
+Use it whenever you want to drag an item inside, after or before another item. This already knows how to move the item based on this library contract. You need to pass the name of the item you want to drag. There will be support for targeting items by their ID, to prevent getting items with the same name, but naturally, we get items by their name.
 
-Usage example:
+⚠️ So, when using E2E helpers that target items by name, item labels should be unique in the rendered tree.
 
-```typescript
-setItems((items) => {
-  return setTreeItemProperties(items, '123', (item) => ({
-    label: 'New Label',
-    collapsed: !item.collapsed,
-  }));
+```ts
+await dragItem({
+  page,
+  expect,
+  from: { name: 'A' },
+  to: { name: 'C', position: 'inside' },
 });
 ```
 
-## Roadmap
+### expectItemToBeChildOf/expectItemNotToBeChildOf
+
+This helper tells you if the item is a child of a given tree item. There's its opposite helper to assert if the target element is not child of a given item.
+
+```ts
+const taskA = page.getByRole('treeitem', { name: 'A' });
+const taskC = page.getByRole('treeitem', { name: 'C' });
+await expectItemToBeChildOf(expect, taskA, taskC);
+
+// or
 
-We're constantly working to improve @clevertask/react-sortable-tree. Here are some features we're planning to implement:
+await expectItemNotToBeChildOf(expect, taskA, taskC);
+```
+
+### expectItemBefore
 
-- **Virtualization**: Improve performance for large trees by only rendering visible nodes.
-- **Custom item rendering**: Allow users to provide custom components for rendering tree items.
-- **Selection and Multi-selection**: Add support for selecting one or multiple items in the tree.
-- **Drag multiple items**: Enable dragging and dropping multiple selected items at once.
-- **API Example**: Provide a comprehensive example illustrating real-world usage with a backend API.
-- **E2E tests**: It will ensure this component's working as expected.
+This helper tells you if an item is before the "x" item. You don't need a function for after because it's a matter of targeting the items in their proper places.
 
-We're excited about these upcoming features and welcome any feedback or contributions from the community. If you have any suggestions or would like to contribute to any of these features, please open an issue or submit a pull request on our GitHub repository.
+```ts
+await expectItemBefore(page, expect, 'C', 'A');
+```
 
-## Release Process
+---
 
-This package is automatically published to npm when a new release is created on GitHub. To create a new release:
+## Roadmap
 
-1. Update the version in `package.json` according to semantic versioning rules.
-2. Commit the version change: `git commit -am "Bump version to x.x.x"`
-3. Create a new tag: `git tag vx.x.x`
-4. Push the changes and the tag: `git push && git push --tags`
-5. Go to the GitHub repository and create a new release, selecting the tag you just created.
+- ✅ Custom item rendering (done!)
+- ✅ E2E tests: It's partially done. We have yet to add item expanding tests and future tests for the next stuff we plan to add
+- 🔜 Virtualization for large trees
+- 🔜 Multi-selection support
+- 🔜 Drag multiple items
+- 🔜 Keyboard navigation
+- 🔜 API usage example
 
-The GitHub Action will automatically build, test, and publish the new version to npm.
+---
 
 ## License
 

package/dist/e2e/index.js

@@ -0,0 +1,51 @@
+async function f({ page: t, expect: e, from: o, to: a }) {
+  const n = t.getByLabel(`Drag ${o.name}`, { exact: !0 }), m = t.getByRole("treeitem", { name: a.name });
+  await e(n).toBeVisible(), await e(m).toBeVisible();
+  const r = await n.boundingBox(), i = await m.boundingBox();
+  if (!r || !i)
+    throw new Error("Could not determine bounding boxes for drag operation");
+  const c = r.x + r.width / 2, w = r.y + r.height / 2;
+  let u = i.x + 8, d = i.y;
+  const b = 4;
+  switch (a.position) {
+    case "before":
+      d = i.y + b;
+      break;
+    case "after":
+      d = i.y + i.height - b;
+      break;
+    case "inside": {
+      const s = await m.locator("[data-tree-draggable]").boundingBox();
+      if (!s)
+        throw new Error("Could not determine draggable item bounds");
+      u = s.x + s.width * 0.05, d = s.y + s.height * 0.75;
+      break;
+    }
+  }
+  await t.mouse.move(c, w), await t.mouse.down(), await t.mouse.move(c + 1, w + 1), await t.mouse.move(u, d, { steps: 10 }), await t.evaluate(() => new Promise(requestAnimationFrame)), await t.mouse.up();
+}
+async function l(t) {
+  const e = await t.getAttribute("data-tree-item-id");
+  if (!e)
+    throw new Error("Tree item does not have data-tree-item-id");
+  return e;
+}
+async function x(t, e, o, a) {
+  const n = await t.getByRole("treeitem").allTextContents();
+  e(n.indexOf(o)).toBeLessThan(n.indexOf(a));
+}
+async function h(t, e, o) {
+  const a = await l(o);
+  await t(e).toHaveAttribute("data-tree-item-parent-id", a);
+}
+async function B(t, e, o) {
+  const a = await l(o);
+  await t(e).not.toHaveAttribute("data-tree-item-parent-id", a);
+}
+export {
+  f as dragItem,
+  x as expectItemBefore,
+  B as expectItemNotToBeChildOf,
+  h as expectItemToBeChildOf,
+  l as getTreeItemId
+};

package/dist/e2e/utils/drag-item.d.ts

@@ -0,0 +1,15 @@
+import { Page, Expect } from '@playwright/test';
+type DragPosition = 'before' | 'after' | 'inside';
+interface DragItemOptions {
+    page: Page;
+    expect: Expect;
+    from: {
+        name: string;
+    };
+    to: {
+        name: string;
+        position: DragPosition;
+    };
+}
+export declare function dragItem({ page, expect, from, to }: DragItemOptions): Promise<void>;
+export {};

package/dist/e2e/utils/expect-item-before.d.ts

@@ -0,0 +1,2 @@
+import { Expect, Page } from '@playwright/test';
+export declare function expectItemBefore(page: Page, expect: Expect, first: string, second: string): Promise<void>;

package/dist/e2e/utils/expect-item-child-of.d.ts

@@ -0,0 +1,3 @@
+import { Locator, Expect } from '@playwright/test';
+export declare function expectItemToBeChildOf(expect: Expect, child: Locator, parent: Locator): Promise<void>;
+export declare function expectItemNotToBeChildOf(expect: Expect, child: Locator, parent: Locator): Promise<void>;

package/dist/e2e/utils/get-tree-item-id.d.ts

@@ -0,0 +1,2 @@
+import { Locator } from '@playwright/test';
+export declare function getTreeItemId(locator: Locator): Promise<string>;

package/dist/e2e/utils/index.d.ts

@@ -0,0 +1,4 @@
+export * from './drag-item';
+export * from './get-tree-item-id';
+export * from './expect-item-before';
+export * from './expect-item-child-of';

package/dist/{style.css → react-sortable-tree.css}

@@ -1 +1 @@
-._Wrapper_wguit_1{list-style:none;box-sizing:border-box;padding-left:var(--spacing);margin-bottom:-1px}._Wrapper_wguit_1._clone_wguit_8{display:inline-block;pointer-events:none;padding:5px 0 0 10px}._Wrapper_wguit_1._clone_wguit_8 ._TreeItem_wguit_16{--vertical-padding: 5px;padding-right:24px;border-radius:4px;box-shadow:0 15px 15px #2221511a}._Wrapper_wguit_1._ghost_wguit_23._indicator_wguit_23{opacity:1;position:relative;z-index:1;margin-bottom:-1px}._Wrapper_wguit_1._ghost_wguit_23._indicator_wguit_23 ._TreeItem_wguit_16{position:relative;padding:0;height:8px;border-color:#2389ff;background-color:#56a1f8}._Wrapper_wguit_1._ghost_wguit_23._indicator_wguit_23 ._TreeItem_wguit_16:before{position:absolute;left:-8px;top:-4px;display:block;content:"";width:12px;height:12px;border-radius:50%;border:1px solid #2389ff;background-color:#fff}._Wrapper_wguit_1._ghost_wguit_23._indicator_wguit_23 ._TreeItem_wguit_16>*{opacity:0;height:0}._Wrapper_wguit_1._ghost_wguit_23:not(._indicator_wguit_23){opacity:.5}._Wrapper_wguit_1._ghost_wguit_23 ._TreeItem_wguit_16>*{box-shadow:none;background-color:transparent}._TreeItem_wguit_16{--vertical-padding: 10px;position:relative;display:flex;align-items:center;padding:var(--vertical-padding) 10px;background-color:#fff;border:1px solid #dedede;color:#222;box-sizing:border-box}._Text_wguit_78{flex-grow:1;padding-left:.5rem;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;align-self:stretch;display:flex;align-items:center;cursor:pointer}._Count_wguit_90{position:absolute;top:-10px;right:-10px;display:flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:50%;background-color:#2389ff;font-size:.8rem;font-weight:600;color:#fff}._disableInteraction_wguit_106{pointer-events:none}._disableSelection_wguit_110 ._Text_wguit_78,._disableSelection_wguit_110 ._Count_wguit_90,._clone_wguit_8 ._Text_wguit_78,._clone_wguit_8 ._Count_wguit_90{user-select:none;-webkit-user-select:none}._Collapse_wguit_118 svg{transition:transform .25s ease}._Collapse_wguit_118._collapsed_wguit_122 svg{transform:rotate(-90deg)}._Action_7i4a4_1{display:flex;width:12px;padding:15px;align-items:center;justify-content:center;flex:0 0 auto;touch-action:none;cursor:var(--cursor, pointer);border-radius:5px;border:none;outline:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:transparent;-webkit-tap-highlight-color:transparent}@media (hover: hover){._Action_7i4a4_1:hover{background-color:var(--action-background, rgba(0, 0, 0, .05))}._Action_7i4a4_1:hover svg{fill:#6f7b88}}._Action_7i4a4_1 svg{flex:0 0 auto;margin:auto;height:100%;overflow:visible;fill:#919eab}._Action_7i4a4_1:active{background-color:var(--background, rgba(0, 0, 0, .05))}._Action_7i4a4_1:active svg{fill:var(--fill, #788491)}._Action_7i4a4_1:focus-visible{outline:none;box-shadow:0 0 0 2px #fff0,0 0 0 2px #4c9ffe}
+._Wrapper_wguit_1{list-style:none;box-sizing:border-box;padding-left:var(--spacing);margin-bottom:-1px}._Wrapper_wguit_1._clone_wguit_8{display:inline-block;pointer-events:none;padding:5px 0 0 10px}._Wrapper_wguit_1._clone_wguit_8 ._TreeItem_wguit_16{--vertical-padding: 5px;padding-right:24px;border-radius:4px;box-shadow:0 15px 15px #2221511a}._Wrapper_wguit_1._ghost_wguit_23._indicator_wguit_23{opacity:1;position:relative;z-index:1;margin-bottom:-1px}._Wrapper_wguit_1._ghost_wguit_23._indicator_wguit_23 ._TreeItem_wguit_16{position:relative;padding:0;height:8px;border-color:#2389ff;background-color:#56a1f8}._Wrapper_wguit_1._ghost_wguit_23._indicator_wguit_23 ._TreeItem_wguit_16:before{position:absolute;left:-8px;top:-4px;display:block;content:"";width:12px;height:12px;border-radius:50%;border:1px solid #2389ff;background-color:#fff}._Wrapper_wguit_1._ghost_wguit_23._indicator_wguit_23 ._TreeItem_wguit_16>*{opacity:0;height:0}._Wrapper_wguit_1._ghost_wguit_23:not(._indicator_wguit_23){opacity:.5}._Wrapper_wguit_1._ghost_wguit_23 ._TreeItem_wguit_16>*{box-shadow:none;background-color:transparent}._TreeItem_wguit_16{--vertical-padding: 10px;position:relative;display:flex;align-items:center;padding:var(--vertical-padding) 10px;background-color:#fff;border:1px solid #dedede;color:#222;box-sizing:border-box}._Text_wguit_78{flex-grow:1;padding-left:.5rem;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;align-self:stretch;display:flex;align-items:center;cursor:pointer}._Count_wguit_90{position:absolute;top:-10px;right:-10px;display:flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:50%;background-color:#2389ff;font-size:.8rem;font-weight:600;color:#fff}._disableInteraction_wguit_106{pointer-events:none}._disableSelection_wguit_110 ._Text_wguit_78,._disableSelection_wguit_110 ._Count_wguit_90,._clone_wguit_8 ._Text_wguit_78,._clone_wguit_8 ._Count_wguit_90{user-select:none;-webkit-user-select:none}._Collapse_wguit_118 svg{transition:transform .25s ease}._Collapse_wguit_118._collapsed_wguit_122 svg{transform:rotate(-90deg)}._Action_7i4a4_1{display:flex;width:12px;padding:15px;align-items:center;justify-content:center;flex:0 0 auto;touch-action:none;cursor:var(--cursor, pointer);border-radius:5px;border:none;outline:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:transparent;-webkit-tap-highlight-color:transparent}@media(hover:hover){._Action_7i4a4_1:hover{background-color:var(--action-background, rgba(0, 0, 0, .05))}._Action_7i4a4_1:hover svg{fill:#6f7b88}}._Action_7i4a4_1 svg{flex:0 0 auto;margin:auto;height:100%;overflow:visible;fill:#919eab}._Action_7i4a4_1:active{background-color:var(--background, rgba(0, 0, 0, .05))}._Action_7i4a4_1:active svg{fill:var(--fill, #788491)}._Action_7i4a4_1:focus-visible{outline:none;box-shadow:0 0 0 2px #fff0,0 0 0 2px #4c9ffe}