@deepnoid/ui 0.1.199 → 0.1.201

package/dist/components/select/select.js

@@ -5198,8 +5198,9 @@ function toVal(mix) {
 
 // src/components/select/select.tsx
 var import_jsx_runtime3 = require("react/jsx-runtime");
+var ALL_OPTION_VALUE = "__ALL__";
 var Select = (0, import_react.forwardRef)((originalProps, ref) => {
-  var _a, _b;
+  var _a, _b, _c;
   const [props, variantProps] = mapPropsVariants(originalProps, select.variantKeys);
   const {
     label,
@@ -5210,6 +5211,7 @@ var Select = (0, import_react.forwardRef)((originalProps, ref) => {
     defaultSelectedOptions,
     onChange,
     multiple,
+    enableSelectAll,
     dropdownIconName = "brace-up",
     optionIconName,
     optionIconPlacement,
@@ -5251,10 +5253,14 @@ var Select = (0, import_react.forwardRef)((originalProps, ref) => {
     };
   };
   const handleChangeOption = (option) => {
-    let nextOptions;
+    let nextOptions = [];
     if (multiple) {
-      const exists = selectedOptions.some((o) => o.value === option.value);
-      nextOptions = exists ? selectedOptions.filter((o) => o.value !== option.value) : [...selectedOptions, option];
+      if (enableSelectAll && option.value === ALL_OPTION_VALUE) {
+        nextOptions = selectedOptions.length === options.length ? [] : [...options];
+      } else {
+        const exists = selectedOptions.some((o) => o.value === option.value);
+        nextOptions = exists ? selectedOptions.filter((o) => o.value !== option.value) : [...selectedOptions, option];
+      }
     } else {
       nextOptions = [option];
       closeSelect();
@@ -5288,10 +5294,26 @@ var Select = (0, import_react.forwardRef)((originalProps, ref) => {
     }
   }, [originalProps.value, defaultSelectedOptions, options]);
   const position = targetRect ? calculatePositionWithScroll(targetRect, optionWrapperHeight) : null;
-  const displayValue = multiple ? selectedOptions.map((opt) => opt.label).join(", ") : ((_a = selectedOptions[0]) == null ? void 0 : _a.label) || "";
-  const selectedValue = multiple ? selectedOptions.map((opt) => opt.value).join(",") : ((_b = selectedOptions[0]) == null ? void 0 : _b.value) || "";
+  let allOptionValue = "";
+  if (multiple) {
+    if (selectedOptions.length === 0) {
+      allOptionValue = "\uC804\uCCB4 \uC120\uD0DD";
+    } else if (selectedOptions.length === options.length) {
+      allOptionValue = `\uC804\uCCB4 (${options.length}) \uC120\uD0DD\uB428`;
+    } else {
+      allOptionValue = `${selectedOptions.length} / ${options.length} \uC120\uD0DD\uB428`;
+    }
+  } else {
+    allOptionValue = ((_a = selectedOptions[0]) == null ? void 0 : _a.label) || "";
+  }
+  const displayValue = multiple ? selectedOptions.map((opt) => opt.label).join(", ") : ((_b = selectedOptions[0]) == null ? void 0 : _b.label) || "";
+  const selectedValue = multiple ? selectedOptions.map((opt) => opt.value).join(",") : ((_c = selectedOptions[0]) == null ? void 0 : _c.value) || "";
   const renderOptions = () => {
     if (!isVisible) return null;
+    const renderedOptions = [...options];
+    if (multiple && enableSelectAll) {
+      renderedOptions.unshift({ label: allOptionValue, value: ALL_OPTION_VALUE });
+    }
     return (0, import_react_dom.createPortal)(
       /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
         "div",
@@ -5309,8 +5331,8 @@ var Select = (0, import_react.forwardRef)((originalProps, ref) => {
             transform: isOpen ? "translateY(0)" : "translateY(-0.25rem)",
             transition: "opacity 150ms ease-out, transform 150ms ease-out"
           },
-          children: options.map((option) => {
-            const isSelected = selectedOptions.some((o) => o.value === option.value);
+          children: renderedOptions.map((option) => {
+            const isSelected = option.value === ALL_OPTION_VALUE ? selectedOptions.length === options.length : selectedOptions.some((o) => o.value === option.value);
             return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
               "div",
               {
@@ -5421,7 +5443,8 @@ var select = tv({
       "placeholder:text-neutral-main",
       "text-body-foreground",
       "group-has-[p.error]/select:text-danger-main",
-      "group-has-[p.error]/select:placeholder:text-danger-main"
+      "group-has-[p.error]/select:placeholder:text-danger-main",
+      "truncate"
     ],
     optionsWrapper: ["bg-body-background", "overflow-auto", "flex", "flex-col", "gap-[10px]"],
     option: [
@@ -5520,7 +5543,7 @@ var select = tv({
         selectWrapper: ["w-[240px]", "h-[50px]", "rounded-xl", "px-[10px]"],
         select: ["text-xl"],
         optionsWrapper: ["shadow-drop-xl", "rounded-xl", "p-[10px]"],
-        option: ["px-[10px]", "py-[11.5px]", , "rounded-xl", "text-xl", "gap-[10px]"],
+        option: ["px-[10px]", "py-[11.5px]", "rounded-xl", "text-xl", "gap-[10px]"],
         helperMessage: ["text-md"],
         errorMessage: ["text-md"]
       }

package/dist/components/select/select.mjs

@@ -1,7 +1,7 @@
 "use client";
 import {
   select_default
-} from "../../chunk-4E5OF43U.mjs";
+} from "../../chunk-75ZDPLJ4.mjs";
 import "../../chunk-ZYIIXWVY.mjs";
 import "../../chunk-YEYUS6DW.mjs";
 import "../../chunk-E3G5QXSH.mjs";

package/dist/components/table/index.mjs

@@ -1,11 +1,11 @@
 "use client";
 import "../../chunk-DX3KXNP6.mjs";
-import {
-  table_default
-} from "../../chunk-KYWCJIXI.mjs";
 import {
   definition_table_default
 } from "../../chunk-DS5CGU2X.mjs";
+import {
+  table_default
+} from "../../chunk-KYWCJIXI.mjs";
 import "../../chunk-7B7LRG5J.mjs";
 import "../../chunk-VVCSY7DG.mjs";
 import "../../chunk-F3HENRVM.mjs";

package/dist/components/toast/index.mjs

@@ -3,11 +3,11 @@ import "../../chunk-LUWGOKLG.mjs";
 import {
   ToastProvider,
   useToast
-} from "../../chunk-SSGCTWWW.mjs";
-import "../../chunk-ZOTHPHXA.mjs";
+} from "../../chunk-L3A3IEKZ.mjs";
 import {
   toast_default
 } from "../../chunk-4F7SIDZB.mjs";
+import "../../chunk-ZOTHPHXA.mjs";
 import "../../chunk-ZYIIXWVY.mjs";
 import "../../chunk-YEYUS6DW.mjs";
 import "../../chunk-E3G5QXSH.mjs";

package/dist/components/toast/use-toast.mjs

@@ -2,9 +2,9 @@
 import {
   ToastProvider,
   useToast
-} from "../../chunk-SSGCTWWW.mjs";
-import "../../chunk-ZOTHPHXA.mjs";
+} from "../../chunk-L3A3IEKZ.mjs";
 import "../../chunk-4F7SIDZB.mjs";
+import "../../chunk-ZOTHPHXA.mjs";
 import "../../chunk-ZYIIXWVY.mjs";
 import "../../chunk-YEYUS6DW.mjs";
 import "../../chunk-E3G5QXSH.mjs";

package/dist/components/tree/index.js

@@ -5179,11 +5179,22 @@ function toVal(mix) {
 
 // src/components/tree/tree.tsx
 var import_jsx_runtime3 = require("react/jsx-runtime");
-var TreeNodeItem = (0, import_react.forwardRef)(
+var TreeNodeItemBase = (0, import_react.forwardRef)(
   ({ node, depth, fileIcon, selectedName, classNames, onExpand }, ref) => {
-    const [isOpen, setIsOpen] = (0, import_react.useState)(false);
-    const [children, setChildren] = (0, import_react.useState)(node.children);
     const slots = (0, import_react.useMemo)(() => treeStyle(), []);
+    const hasSelectedInChildren = (0, import_react.useCallback)(
+      (children2) => {
+        if (!children2 || !selectedName) return false;
+        return children2.some((child) => child.selectedName === selectedName || hasSelectedInChildren(child.children));
+      },
+      [selectedName]
+    );
+    const [children, setChildren] = (0, import_react.useState)(node.children);
+    const [isOpen, setIsOpen] = (0, import_react.useState)(() => {
+      if (!selectedName) return false;
+      return hasSelectedInChildren(node.children);
+    });
+    const hasOpenedInitially = (0, import_react.useRef)(false);
     const hasMore = (0, import_react.useMemo)(() => {
       if (node.isLeaf) return false;
       if (Array.isArray(children)) return children.length > 0;
@@ -5196,7 +5207,6 @@ var TreeNodeItem = (0, import_react.forwardRef)(
           setChildren(result);
         } catch (e) {
           console.error("Failed to load child nodes ", e);
-        } finally {
         }
       }
       setIsOpen((prev) => !prev);
@@ -5211,6 +5221,14 @@ var TreeNodeItem = (0, import_react.forwardRef)(
       e.preventDefault();
       (_a = node.onRightClick) == null ? void 0 : _a.call(node, e);
     };
+    (0, import_react.useEffect)(() => {
+      if (!selectedName) return;
+      if (!hasOpenedInitially.current) {
+        const shouldOpen = hasSelectedInChildren(children);
+        setIsOpen(shouldOpen);
+        hasOpenedInitially.current = true;
+      }
+    }, [selectedName, children, hasSelectedInChildren]);
     return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
       "div",
       {
@@ -5226,7 +5244,7 @@ var TreeNodeItem = (0, import_react.forwardRef)(
               className: clsx(
                 slots.node({ class: classNames == null ? void 0 : classNames.node }),
                 slots.clickable({ class: classNames == null ? void 0 : classNames.clickable }),
-                selectedName == node.selectedName ? "bg-neutral-soft" : ""
+                selectedName === node.selectedName ? "bg-neutral-soft" : ""
               ),
               onClick: handleClick,
               onContextMenu: handleRightClick,
@@ -5263,7 +5281,8 @@ var TreeNodeItem = (0, import_react.forwardRef)(
     );
   }
 );
-TreeNodeItem.displayName = "TreeNodeItem";
+TreeNodeItemBase.displayName = "TreeNodeItem";
+var TreeNodeItem = (0, import_react.memo)(TreeNodeItemBase);
 var Tree = ({ headerContent, group, groupIcon, fileIcon, selectedName, classNames, onExpand }) => {
   const slots = (0, import_react.useMemo)(() => treeStyle(), []);
   const handleClick = (e) => {

package/dist/components/tree/index.mjs

@@ -2,7 +2,7 @@
 import "../../chunk-MBLZYQCN.mjs";
 import {
   tree_default
-} from "../../chunk-STV6EZHD.mjs";
+} from "../../chunk-F6BQCZ54.mjs";
 import "../../chunk-ZYIIXWVY.mjs";
 import "../../chunk-YEYUS6DW.mjs";
 import "../../chunk-5BT37SLM.mjs";

package/dist/components/tree/tree.d.mts

@@ -1,6 +1,7 @@
 import * as tailwind_variants from 'tailwind-variants';
 import * as tailwind_merge from 'tailwind-merge';
 import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as react from 'react';
 import { ReactNode, MouseEvent } from 'react';
 import { SlotsToClasses } from '../../utils/types.mjs';
 
@@ -13,6 +14,15 @@ type TreeNode = {
     onClick?: (event: MouseEvent<HTMLDivElement>) => void;
     onRightClick?: (event: MouseEvent<HTMLDivElement>) => void;
 };
+type Props = {
+    node: TreeNode;
+    depth: number;
+    fileIcon?: ReactNode;
+    selectedName?: string;
+    classNames?: SlotsToClasses<TreeSlots>;
+    onExpand?: (node: TreeNode) => Promise<TreeNode[]>;
+};
+declare const TreeNodeItem: react.NamedExoticComponent<Props & react.RefAttributes<HTMLDivElement>>;
 interface TreeProps {
     headerContent?: ReactNode;
     group: {
@@ -95,4 +105,4 @@ declare const treeStyle: tailwind_variants.TVReturnType<{
 }, undefined, unknown, unknown, undefined>>;
 type TreeSlots = keyof ReturnType<typeof treeStyle>;
 
-export { Tree, type TreeNode, type TreeProps, Tree as default };
+export { Tree, type TreeNode, TreeNodeItem, type TreeProps, Tree as default };

package/dist/components/tree/tree.d.ts

@@ -1,6 +1,7 @@
 import * as tailwind_variants from 'tailwind-variants';
 import * as tailwind_merge from 'tailwind-merge';
 import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as react from 'react';
 import { ReactNode, MouseEvent } from 'react';
 import { SlotsToClasses } from '../../utils/types.js';
 
@@ -13,6 +14,15 @@ type TreeNode = {
     onClick?: (event: MouseEvent<HTMLDivElement>) => void;
     onRightClick?: (event: MouseEvent<HTMLDivElement>) => void;
 };
+type Props = {
+    node: TreeNode;
+    depth: number;
+    fileIcon?: ReactNode;
+    selectedName?: string;
+    classNames?: SlotsToClasses<TreeSlots>;
+    onExpand?: (node: TreeNode) => Promise<TreeNode[]>;
+};
+declare const TreeNodeItem: react.NamedExoticComponent<Props & react.RefAttributes<HTMLDivElement>>;
 interface TreeProps {
     headerContent?: ReactNode;
     group: {
@@ -95,4 +105,4 @@ declare const treeStyle: tailwind_variants.TVReturnType<{
 }, undefined, unknown, unknown, undefined>>;
 type TreeSlots = keyof ReturnType<typeof treeStyle>;
 
-export { Tree, type TreeNode, type TreeProps, Tree as default };
+export { Tree, type TreeNode, TreeNodeItem, type TreeProps, Tree as default };

package/dist/components/tree/tree.js

@@ -103,6 +103,7 @@ var require_plugin = __commonJS({
 var tree_exports = {};
 __export(tree_exports, {
   Tree: () => Tree,
+  TreeNodeItem: () => TreeNodeItem,
   default: () => tree_default
 });
 module.exports = __toCommonJS(tree_exports);
@@ -5178,11 +5179,22 @@ function toVal(mix) {
 
 // src/components/tree/tree.tsx
 var import_jsx_runtime3 = require("react/jsx-runtime");
-var TreeNodeItem = (0, import_react.forwardRef)(
+var TreeNodeItemBase = (0, import_react.forwardRef)(
   ({ node, depth, fileIcon, selectedName, classNames, onExpand }, ref) => {
-    const [isOpen, setIsOpen] = (0, import_react.useState)(false);
-    const [children, setChildren] = (0, import_react.useState)(node.children);
     const slots = (0, import_react.useMemo)(() => treeStyle(), []);
+    const hasSelectedInChildren = (0, import_react.useCallback)(
+      (children2) => {
+        if (!children2 || !selectedName) return false;
+        return children2.some((child) => child.selectedName === selectedName || hasSelectedInChildren(child.children));
+      },
+      [selectedName]
+    );
+    const [children, setChildren] = (0, import_react.useState)(node.children);
+    const [isOpen, setIsOpen] = (0, import_react.useState)(() => {
+      if (!selectedName) return false;
+      return hasSelectedInChildren(node.children);
+    });
+    const hasOpenedInitially = (0, import_react.useRef)(false);
     const hasMore = (0, import_react.useMemo)(() => {
       if (node.isLeaf) return false;
       if (Array.isArray(children)) return children.length > 0;
@@ -5195,7 +5207,6 @@ var TreeNodeItem = (0, import_react.forwardRef)(
           setChildren(result);
         } catch (e) {
           console.error("Failed to load child nodes ", e);
-        } finally {
         }
       }
       setIsOpen((prev) => !prev);
@@ -5210,6 +5221,14 @@ var TreeNodeItem = (0, import_react.forwardRef)(
       e.preventDefault();
       (_a = node.onRightClick) == null ? void 0 : _a.call(node, e);
     };
+    (0, import_react.useEffect)(() => {
+      if (!selectedName) return;
+      if (!hasOpenedInitially.current) {
+        const shouldOpen = hasSelectedInChildren(children);
+        setIsOpen(shouldOpen);
+        hasOpenedInitially.current = true;
+      }
+    }, [selectedName, children, hasSelectedInChildren]);
     return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
       "div",
       {
@@ -5225,7 +5244,7 @@ var TreeNodeItem = (0, import_react.forwardRef)(
               className: clsx(
                 slots.node({ class: classNames == null ? void 0 : classNames.node }),
                 slots.clickable({ class: classNames == null ? void 0 : classNames.clickable }),
-                selectedName == node.selectedName ? "bg-neutral-soft" : ""
+                selectedName === node.selectedName ? "bg-neutral-soft" : ""
               ),
               onClick: handleClick,
               onContextMenu: handleRightClick,
@@ -5262,7 +5281,8 @@ var TreeNodeItem = (0, import_react.forwardRef)(
     );
   }
 );
-TreeNodeItem.displayName = "TreeNodeItem";
+TreeNodeItemBase.displayName = "TreeNodeItem";
+var TreeNodeItem = (0, import_react.memo)(TreeNodeItemBase);
 var Tree = ({ headerContent, group, groupIcon, fileIcon, selectedName, classNames, onExpand }) => {
   const slots = (0, import_react.useMemo)(() => treeStyle(), []);
   const handleClick = (e) => {
@@ -5332,5 +5352,6 @@ var treeStyle = tv({
 });
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
-  Tree
+  Tree,
+  TreeNodeItem
 });

package/dist/components/tree/tree.mjs

@@ -1,8 +1,9 @@
 "use client";
 import {
   Tree,
+  TreeNodeItem,
   tree_default
-} from "../../chunk-STV6EZHD.mjs";
+} from "../../chunk-F6BQCZ54.mjs";
 import "../../chunk-ZYIIXWVY.mjs";
 import "../../chunk-YEYUS6DW.mjs";
 import "../../chunk-5BT37SLM.mjs";
@@ -11,5 +12,6 @@ import "../../chunk-27Y6K5NK.mjs";
 import "../../chunk-AC6TWLRT.mjs";
 export {
   Tree,
+  TreeNodeItem,
   tree_default as default
 };

package/dist/index.d.mts

@@ -12,7 +12,7 @@ export { default as Tabs, TabsDataType } from './components/tabs/tabs.mjs';
 export { default as Textarea, TextareaProps } from './components/textarea/textarea.mjs';
 export { default as Table, TableColumn, TableProps, TableRef, TableRow } from './components/table/table.mjs';
 export { default as DefinitionTable, DefinitionTableRow, DefinitionTableRowCell } from './components/table/definition-table.mjs';
-export { default as Select, SelectOption, SelectProps } from './components/select/select.mjs';
+export { MultiSelectValue, default as Select, SelectOption, SelectOptionValue, SelectProps } from './components/select/select.mjs';
 export { default as CheckBox } from './components/checkbox/checkbox.mjs';
 export { default as Chip } from './components/chip/chip.mjs';
 export { default as Radio, RadioProps } from './components/radio/radio.mjs';

package/dist/index.d.ts

@@ -12,7 +12,7 @@ export { default as Tabs, TabsDataType } from './components/tabs/tabs.js';
 export { default as Textarea, TextareaProps } from './components/textarea/textarea.js';
 export { default as Table, TableColumn, TableProps, TableRef, TableRow } from './components/table/table.js';
 export { default as DefinitionTable, DefinitionTableRow, DefinitionTableRowCell } from './components/table/definition-table.js';
-export { default as Select, SelectOption, SelectProps } from './components/select/select.js';
+export { MultiSelectValue, default as Select, SelectOption, SelectOptionValue, SelectProps } from './components/select/select.js';
 export { default as CheckBox } from './components/checkbox/checkbox.js';
 export { default as Chip } from './components/chip/chip.js';
 export { default as Radio, RadioProps } from './components/radio/radio.js';

package/dist/index.js

@@ -9358,8 +9358,9 @@ var DefinitionTableStyle = tv({
 var import_react21 = require("react");
 var import_react_dom = require("react-dom");
 var import_jsx_runtime23 = require("react/jsx-runtime");
+var ALL_OPTION_VALUE = "__ALL__";
 var Select = (0, import_react21.forwardRef)((originalProps, ref) => {
-  var _a, _b;
+  var _a, _b, _c;
   const [props, variantProps] = mapPropsVariants(originalProps, select.variantKeys);
   const {
     label,
@@ -9370,6 +9371,7 @@ var Select = (0, import_react21.forwardRef)((originalProps, ref) => {
     defaultSelectedOptions,
     onChange,
     multiple,
+    enableSelectAll,
     dropdownIconName = "brace-up",
     optionIconName,
     optionIconPlacement,
@@ -9411,10 +9413,14 @@ var Select = (0, import_react21.forwardRef)((originalProps, ref) => {
     };
   };
   const handleChangeOption = (option) => {
-    let nextOptions;
+    let nextOptions = [];
     if (multiple) {
-      const exists = selectedOptions.some((o) => o.value === option.value);
-      nextOptions = exists ? selectedOptions.filter((o) => o.value !== option.value) : [...selectedOptions, option];
+      if (enableSelectAll && option.value === ALL_OPTION_VALUE) {
+        nextOptions = selectedOptions.length === options.length ? [] : [...options];
+      } else {
+        const exists = selectedOptions.some((o) => o.value === option.value);
+        nextOptions = exists ? selectedOptions.filter((o) => o.value !== option.value) : [...selectedOptions, option];
+      }
     } else {
       nextOptions = [option];
       closeSelect();
@@ -9448,10 +9454,26 @@ var Select = (0, import_react21.forwardRef)((originalProps, ref) => {
     }
   }, [originalProps.value, defaultSelectedOptions, options]);
   const position = targetRect ? calculatePositionWithScroll(targetRect, optionWrapperHeight) : null;
-  const displayValue = multiple ? selectedOptions.map((opt) => opt.label).join(", ") : ((_a = selectedOptions[0]) == null ? void 0 : _a.label) || "";
-  const selectedValue = multiple ? selectedOptions.map((opt) => opt.value).join(",") : ((_b = selectedOptions[0]) == null ? void 0 : _b.value) || "";
+  let allOptionValue = "";
+  if (multiple) {
+    if (selectedOptions.length === 0) {
+      allOptionValue = "\uC804\uCCB4 \uC120\uD0DD";
+    } else if (selectedOptions.length === options.length) {
+      allOptionValue = `\uC804\uCCB4 (${options.length}) \uC120\uD0DD\uB428`;
+    } else {
+      allOptionValue = `${selectedOptions.length} / ${options.length} \uC120\uD0DD\uB428`;
+    }
+  } else {
+    allOptionValue = ((_a = selectedOptions[0]) == null ? void 0 : _a.label) || "";
+  }
+  const displayValue = multiple ? selectedOptions.map((opt) => opt.label).join(", ") : ((_b = selectedOptions[0]) == null ? void 0 : _b.label) || "";
+  const selectedValue = multiple ? selectedOptions.map((opt) => opt.value).join(",") : ((_c = selectedOptions[0]) == null ? void 0 : _c.value) || "";
   const renderOptions = () => {
     if (!isVisible) return null;
+    const renderedOptions = [...options];
+    if (multiple && enableSelectAll) {
+      renderedOptions.unshift({ label: allOptionValue, value: ALL_OPTION_VALUE });
+    }
     return (0, import_react_dom.createPortal)(
       /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
         "div",
@@ -9469,8 +9491,8 @@ var Select = (0, import_react21.forwardRef)((originalProps, ref) => {
             transform: isOpen ? "translateY(0)" : "translateY(-0.25rem)",
             transition: "opacity 150ms ease-out, transform 150ms ease-out"
           },
-          children: options.map((option) => {
-            const isSelected = selectedOptions.some((o) => o.value === option.value);
+          children: renderedOptions.map((option) => {
+            const isSelected = option.value === ALL_OPTION_VALUE ? selectedOptions.length === options.length : selectedOptions.some((o) => o.value === option.value);
             return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
               "div",
               {
@@ -9581,7 +9603,8 @@ var select = tv({
       "placeholder:text-neutral-main",
       "text-body-foreground",
       "group-has-[p.error]/select:text-danger-main",
-      "group-has-[p.error]/select:placeholder:text-danger-main"
+      "group-has-[p.error]/select:placeholder:text-danger-main",
+      "truncate"
     ],
     optionsWrapper: ["bg-body-background", "overflow-auto", "flex", "flex-col", "gap-[10px]"],
     option: [
@@ -9680,7 +9703,7 @@ var select = tv({
         selectWrapper: ["w-[240px]", "h-[50px]", "rounded-xl", "px-[10px]"],
         select: ["text-xl"],
         optionsWrapper: ["shadow-drop-xl", "rounded-xl", "p-[10px]"],
-        option: ["px-[10px]", "py-[11.5px]", , "rounded-xl", "text-xl", "gap-[10px]"],
+        option: ["px-[10px]", "py-[11.5px]", "rounded-xl", "text-xl", "gap-[10px]"],
         helperMessage: ["text-md"],
         errorMessage: ["text-md"]
       }
@@ -12194,11 +12217,22 @@ var timePickerStyle = tv({
 // src/components/tree/tree.tsx
 var import_react36 = require("react");
 var import_jsx_runtime37 = require("react/jsx-runtime");
-var TreeNodeItem = (0, import_react36.forwardRef)(
+var TreeNodeItemBase = (0, import_react36.forwardRef)(
   ({ node, depth, fileIcon, selectedName, classNames, onExpand }, ref) => {
-    const [isOpen, setIsOpen] = (0, import_react36.useState)(false);
-    const [children, setChildren] = (0, import_react36.useState)(node.children);
     const slots = (0, import_react36.useMemo)(() => treeStyle(), []);
+    const hasSelectedInChildren = (0, import_react36.useCallback)(
+      (children2) => {
+        if (!children2 || !selectedName) return false;
+        return children2.some((child) => child.selectedName === selectedName || hasSelectedInChildren(child.children));
+      },
+      [selectedName]
+    );
+    const [children, setChildren] = (0, import_react36.useState)(node.children);
+    const [isOpen, setIsOpen] = (0, import_react36.useState)(() => {
+      if (!selectedName) return false;
+      return hasSelectedInChildren(node.children);
+    });
+    const hasOpenedInitially = (0, import_react36.useRef)(false);
     const hasMore = (0, import_react36.useMemo)(() => {
       if (node.isLeaf) return false;
       if (Array.isArray(children)) return children.length > 0;
@@ -12211,7 +12245,6 @@ var TreeNodeItem = (0, import_react36.forwardRef)(
           setChildren(result);
         } catch (e) {
           console.error("Failed to load child nodes ", e);
-        } finally {
         }
       }
       setIsOpen((prev) => !prev);
@@ -12226,6 +12259,14 @@ var TreeNodeItem = (0, import_react36.forwardRef)(
       e.preventDefault();
       (_a = node.onRightClick) == null ? void 0 : _a.call(node, e);
     };
+    (0, import_react36.useEffect)(() => {
+      if (!selectedName) return;
+      if (!hasOpenedInitially.current) {
+        const shouldOpen = hasSelectedInChildren(children);
+        setIsOpen(shouldOpen);
+        hasOpenedInitially.current = true;
+      }
+    }, [selectedName, children, hasSelectedInChildren]);
     return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
       "div",
       {
@@ -12241,7 +12282,7 @@ var TreeNodeItem = (0, import_react36.forwardRef)(
               className: clsx(
                 slots.node({ class: classNames == null ? void 0 : classNames.node }),
                 slots.clickable({ class: classNames == null ? void 0 : classNames.clickable }),
-                selectedName == node.selectedName ? "bg-neutral-soft" : ""
+                selectedName === node.selectedName ? "bg-neutral-soft" : ""
               ),
               onClick: handleClick,
               onContextMenu: handleRightClick,
@@ -12278,7 +12319,8 @@ var TreeNodeItem = (0, import_react36.forwardRef)(
     );
   }
 );
-TreeNodeItem.displayName = "TreeNodeItem";
+TreeNodeItemBase.displayName = "TreeNodeItem";
+var TreeNodeItem = (0, import_react36.memo)(TreeNodeItemBase);
 var Tree = ({ headerContent, group, groupIcon, fileIcon, selectedName, classNames, onExpand }) => {
   const slots = (0, import_react36.useMemo)(() => treeStyle(), []);
   const handleClick = (e) => {