@rovula/ui 0.0.73 → 0.0.74

package/dist/esm/types/components/Tree/Tree.stories.d.ts

@@ -16,3 +16,4 @@ export declare const Leaf: StoryObj<typeof Tree>;
 export declare const HideCheckboxMode: StoryObj<typeof Tree>;
 export declare const RadioMode: StoryObj<typeof Tree>;
 export declare const CheckAll: StoryObj<typeof Tree>;
+export declare const LongText: StoryObj<typeof Tree>;

package/dist/src/theme/global.css

@@ -2770,6 +2770,10 @@ input[type=number] {
   min-width: fit-content;
 }
 
+.max-w-\[300px\] {
+  max-width: 300px;
+}
+
 .max-w-full {
   max-width: 100%;
 }
@@ -3064,6 +3068,10 @@ input[type=number] {
   white-space: nowrap;
 }
 
+.break-all {
+  word-break: break-all;
+}
+
 .rounded {
   border-radius: 0.25rem;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rovula/ui",
-  "version": "0.0.73",
+  "version": "0.0.74",
   "main": "dist/cjs/bundle.js",
   "module": "dist/esm/bundle.js",
   "types": "dist/index.d.ts",

package/src/components/Tree/Tree.stories.tsx

@@ -446,3 +446,103 @@ export const CheckAll: StoryObj<typeof Tree> = {
     );
   },
 };
+
+export const LongText: StoryObj<typeof Tree> = {
+  args: {
+    data: [
+      {
+        id: "2699d80b-6772-4878-9639-75e370786e79",
+        title:
+          "Level1 RUNLINE_LV_2_00000000000000000000000000000000000000000000000000000000",
+        children: [
+          {
+            id: "9b4511f4-ad9a-42e0-8376-60d5edbeffb3",
+            title:
+              "Level1 RUNLINE_LV_3_0000000000000000000000000000000000000000000000000000",
+            children: [
+              {
+                id: "c8d5dfb5-6c61-482b-88fe-186eb7685479",
+                title: "2025-07-27_05-25-53",
+                children: [],
+              },
+              {
+                id: "81ff1dd0-b283-4f60-864e-5d814e99d903",
+                title: "2025-07-27_06-05-53",
+                children: [],
+              },
+            ],
+          },
+        ],
+      },
+      {
+        id: "ad79c17b-2861-431a-af0e-3f1c73164508",
+        title: "RUNLINE_LV_2",
+        children: [
+          {
+            id: "46ee87c4-4ea7-48f8-9ed9-14833e4dacc2",
+            title: "2025-07-27_06-25-53",
+            children: [],
+          },
+          {
+            id: "1379b081-9f7f-4d82-8470-8321d9b7de0c",
+            title: "RUNLINE_LV_3",
+            children: [
+              {
+                id: "cf9145d4-ad06-4433-8384-4c10d266a6aa",
+                title: "2025-07-26_19-01-31",
+                children: [],
+              },
+              {
+                id: "f247313c-01cb-4363-a390-a72b889c72d3",
+                title: "2025-07-26_19-11-31",
+                children: [],
+              },
+              {
+                id: "0b7c650a-0d78-4e6e-8399-5dbaeb510751",
+                title: "Lv4",
+                children: [
+                  {
+                    id: "88d89572-462d-46c9-b4d0-4df736117799",
+                    title: "Lv 5",
+                    children: [],
+                  },
+                ],
+              },
+            ],
+          },
+        ],
+      },
+    ],
+  },
+  render: (args) => {
+    const [isCheckedAll, setIsCheckedAll] = useState(false);
+    const [checkedId, onCheckedId] = useState<string[]>([]);
+
+    return (
+      <div className="flex flex-col gap-4 w-full">
+        <div className="flex gap-2">
+          <Button
+            variant="outline"
+            onClick={() => setIsCheckedAll(!isCheckedAll)}
+          >
+            {isCheckedAll ? "Unchecked" : "Checked"} All
+          </Button>
+          <Button variant="outline" onClick={() => onCheckedId([])}>
+            Clear
+          </Button>
+        </div>
+        <div className="w-full max-w-[300px]">
+          <Tree
+            {...args}
+            hierarchicalCheck
+            checkedAll={isCheckedAll}
+            checkedId={checkedId}
+            onCheckedChange={(state) => {
+              onCheckedId(Object.keys(state).filter((key) => state?.[key]));
+            }}
+          />
+        </div>
+      </div>
+    );
+  },
+};

package/src/components/Tree/TreeItem.tsx

@@ -241,7 +241,7 @@ const TreeItem: FC<TreeItemProps> = ({
               {showIcon ? customIcon || defaultIcon : null}
               <div
                 className={cn(
-                  "flex flex-1 cursor-pointer text-subtitle5 text-ellipsis",
+                  "flex flex-1 cursor-pointer text-subtitle5 text-ellipsis overflow-hidden break-all text-left",
                   classes?.title
                 )}
               >