@dust-tt/sparkle 0.2.203 → 0.2.205

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dust-tt/sparkle",
-  "version": "0.2.203",
+  "version": "0.2.205",
   "scripts": {
     "build": "rm -rf dist && rollup -c",
     "build:with-tw-base": "rollup -c --environment INCLUDE_TW_BASE:true",
@@ -92,4 +92,4 @@
     "tailwind-scrollbar-hide": "^1.1.7"
   },
   "packageManager": "yarn@1.22.22+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e"
-}
+}

package/src/components/DataTable.tsx

@@ -249,6 +249,7 @@ DataTable.Row = function Row({
 interface CellProps extends React.TdHTMLAttributes<HTMLTableCellElement> {
   avatarUrl?: string;
   icon?: React.ComponentType<{ className?: string }>;
+  iconClassName?: string;
   children?: ReactNode;
   description?: string;
 }
@@ -258,6 +259,7 @@ DataTable.Cell = function Cell({
   className,
   avatarUrl,
   icon,
+  iconClassName,
   description,
   ...props
 }: CellProps) {
@@ -274,7 +276,14 @@ DataTable.Cell = function Cell({
           <Avatar visual={avatarUrl} size="xs" className="s-mr-2" />
         )}
         {icon && (
-          <Icon visual={icon} size="sm" className="s-mr-2 s-text-element-600" />
+          <Icon
+            visual={icon}
+            size="sm"
+            className={classNames(
+              "s-mr-2 s-text-element-600",
+              iconClassName || ""
+            )}
+          />
         )}
         <div className="s-flex">
           <span className="s-text-sm s-text-element-800">{children}</span>

package/src/components/Tree.tsx

@@ -58,6 +58,8 @@ interface TreeItemProps {
   className?: string;
   actions?: React.ReactNode;
   areActionsFading?: boolean;
+  isSelected?: boolean;
+  onItemClick?: () => void;
 }
 
 export interface TreeItemPropsWithChildren extends TreeItemProps {
@@ -85,6 +87,8 @@ Tree.Item = function ({
   areActionsFading = true,
   renderTreeItems,
   children,
+  isSelected = false,
+  onItemClick,
 }: TreeItemPropsWithChildren | TreeItemPropsWithRender) {
   const [collapsedState, setCollapsedState] = useState<boolean>(
     defaultCollapsed ?? true
@@ -113,8 +117,13 @@ Tree.Item = function ({
         className={classNames(
           className ? className : "",
           "s-group s-flex s-cursor-default s-flex-row s-items-center s-gap-4",
-          size === "sm" ? "s-py-1" : "s-py-2"
+          size === "sm" ? "s-py-1" : "s-py-2",
+          onItemClick ? "s-cursor-pointer" : "",
+          isSelected
+            ? "s-rounded-md s-border s-border-neutral-200 s-bg-white"
+            : ""
         )}
+        onClick={onItemClick ? onItemClick : undefined}
       >
         {type === "node" && (
           <IconButton
@@ -125,7 +134,12 @@ Tree.Item = function ({
             }
             size="sm"
             variant="secondary"
-            onClick={effectiveOnChevronClick}
+            onClick={(e) => {
+              e.stopPropagation();
+              if (effectiveOnChevronClick) {
+                effectiveOnChevronClick();
+              }
+            }}
           />
         )}
         {type === "leaf" && <div className="s-w-5"></div>}

package/src/stories/Tree.stories.tsx

@@ -1,6 +1,5 @@
 import type { Meta } from "@storybook/react";
 import React from "react";
-import { v4 as uuidv4 } from "uuid";
 
 import { Dust } from "@sparkle/icons/solid";
 
@@ -33,7 +32,7 @@ export const TreeExample = () => {
           <div className="s-text-xl">Tree</div>
           <div>
             <Tree isBoxed>
-              <Tree.Item label="item 1 (no children)" variant="folder" />
+              <Tree.Item label="item 1 (no children)" variant="folder" isSelected={true}/>
               <Tree.Item label="item 2 (loading)" variant="folder">
                 <Tree isLoading />
               </Tree.Item>
@@ -586,11 +585,76 @@ export const TreeExample = () => {
             </Tree>
           </div>
         </div>
+        <DummyNavBar/>
       </div>
     </div>
   );
 };
 
+export const DummyNavBar = () => {
+  return <div className="s-flex s-flex-col s-gap-3">
+    <div className="s-text-xl">Nav bar</div>
+    <div>
+      <Tree isBoxed>
+        <Tree.Item
+          label="Intercom"
+          visual={<IntercomLogo />}
+          onItemClick={() => console.log("Clickable")}
+          isSelected={true}
+        >
+          <Tree>
+            <Tree.Item
+              type="leaf"
+              label="item 1"
+              checkbox={{
+                variant: "checkable",
+                checked: false,
+                onChange: () => {
+                  return;
+                },
+              }}
+            />
+            <Tree.Item
+              label="item 2"
+              type="leaf"
+              checkbox={{
+                variant: "checkable",
+                checked: false,
+                onChange: () => {
+                  return;
+                },
+              }}
+            />
+            <Tree.Item
+              label="item 3"
+              type="leaf"
+              checkbox={{
+                variant: "checkable",
+                checked: false,
+                onChange: () => {
+                  return;
+                },
+              }}
+            />
+          </Tree>
+        </Tree.Item>
+        <Tree.Item
+          label="Notion"
+          visual={<NotionLogo />}
+        />
+        <Tree.Item
+          label="Slack"
+          visual={<SlackLogo />}
+        />
+        <Tree.Item
+          label="Dust"
+          visual={<Dust />}
+        />
+      </Tree>
+    </div>
+  </div>;
+}
+
 export const SelectDataSourceExample = () => {
   return (
     <div className="s-flex s-w-full s-flex-col s-gap-10">
@@ -838,30 +902,4 @@ const createTreeItems = (n = 5, getLabel: () => string) => {
   }
 
   return <Tree>{items}</Tree>;
-};
-
-export const DeeplyNestedTreeWithActions = () => {
-  const getLabel = () =>
-    `${uuidv4()}-${uuidv4()}-${uuidv4()}-${uuidv4()}-${uuidv4()}-${uuidv4()}-${uuidv4()}-${uuidv4()}-${uuidv4()}-${uuidv4()}-${uuidv4()}-${uuidv4()}`;
-  return (
-    <div className="s-mx-auto s-max-w-2xl s-gap-3 s-pt-10">
-      <div className="s-pb-10 s-text-xl">Huge</div>
-      <div>
-        <Tree>{createTreeItems(20, getLabel)}</Tree>
-      </div>
-    </div>
-  );
-};
-
-export const SmallTreeWithActions = () => {
-  const getLabel = () =>
-    `${uuidv4().slice(0, Math.floor(Math.random() * 32) + 3)}`;
-  return (
-    <div className="s-mx-auto s-max-w-2xl s-gap-3 s-pt-10">
-      <div className="s-pb-10 s-text-xl">Huge</div>
-      <div>
-        <Tree>{createTreeItems(5, getLabel)}</Tree>
-      </div>
-    </div>
-  );
-};
+};