@dust-tt/sparkle 0.2.207 → 0.2.209

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dust-tt/sparkle",
-  "version": "0.2.207",
+  "version": "0.2.209",
   "scripts": {
     "build": "rm -rf dist && rollup -c",
     "build:with-tw-base": "rollup -c --environment INCLUDE_TW_BASE:true",

package/src/components/DataTable.tsx

@@ -254,7 +254,26 @@ DataTable.Row = function Row({
     </tr>
   );
 };
-interface CellProps extends React.TdHTMLAttributes<HTMLTableCellElement> {
+
+interface CellProps extends React.HTMLAttributes<HTMLTableCellElement> {
+  children: ReactNode;
+}
+
+DataTable.Cell = function Cell({ children, className, ...props }: CellProps) {
+  return (
+    <td
+      className={classNames(
+        "s-whitespace-nowrap s-py-2 s-pl-0.5 s-text-element-800",
+        className || ""
+      )}
+      {...props}
+    >
+      {children}
+    </td>
+  );
+};
+
+interface CellContentProps extends React.TdHTMLAttributes<HTMLDivElement> {
   avatarUrl?: string;
   icon?: React.ComponentType<{ className?: string }>;
   iconClassName?: string;
@@ -263,7 +282,7 @@ interface CellProps extends React.TdHTMLAttributes<HTMLTableCellElement> {
   description?: string;
 }
 
-DataTable.Cell = function Cell({
+DataTable.CellContent = function CellContent({
   children,
   className,
   avatarUrl,
@@ -272,44 +291,36 @@ DataTable.Cell = function Cell({
   iconClassName,
   description,
   ...props
-}: CellProps) {
+}: CellContentProps) {
   return (
-    <td
-      className={classNames(
-        "s-whitespace-nowrap s-py-2 s-pl-0.5 s-text-element-800",
-        className || ""
+    <div className={classNames("s-flex s-py-2", className || "")} {...props}>
+      {avatarUrl && (
+        <Avatar
+          visual={avatarUrl}
+          size="xs"
+          className="s-mr-2"
+          isRounded={roundedAvatar ?? false}
+        />
+      )}
+      {icon && (
+        <Icon
+          visual={icon}
+          size="sm"
+          className={classNames(
+            "s-mr-2 s-text-element-600",
+            iconClassName || ""
+          )}
+        />
       )}
-      {...props}
-    >
       <div className="s-flex">
-        {avatarUrl && (
-          <Avatar
-            visual={avatarUrl}
-            size="xs"
-            className="s-mr-2"
-            isRounded={roundedAvatar ?? false}
-          />
+        <span className="s-text-sm s-text-element-800">{children}</span>
+        {description && (
+          <span className="s-pl-2 s-text-sm s-text-element-600">
+            {description}
+          </span>
         )}
-        {icon && (
-          <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>
-          {description && (
-            <span className="s-pl-2 s-text-sm s-text-element-600">
-              {description}
-            </span>
-          )}
-        </div>
       </div>
-    </td>
+    </div>
   );
 };
 

package/src/stories/Citation.stories.tsx

@@ -201,6 +201,7 @@ export const CitationsExample = () => (
     <h2>With zoom effect</h2>
     <div className="s-flex s-gap-2">
       <ZoomableImageCitationWrapper
+        size="sm"
         title="With imgSrc"
         // size="xs"
         imgSrc="https://dust.tt/static/droidavatar/Droid_Black_4.jpg"

package/src/stories/DataTable.stories.tsx

@@ -82,42 +82,50 @@ export const DataTableExample = () => {
       accessorKey: "name",
       header: "Name",
       cell: (info) => (
-        <DataTable.Cell
+        <DataTable.CellContent
           avatarUrl={info.row.original.avatarUrl}
           icon={info.row.original.icon}
           description={info.row.original.description}
           roundedAvatar={info.row.original.roundedAvatar}
         >
           {info.row.original.name}
-        </DataTable.Cell>
+        </DataTable.CellContent>
       ),
     },
     {
       accessorKey: "usedBy",
       header: "Used by",
       cell: (info) => (
-        <DataTable.Cell>{info.row.original.usedBy}</DataTable.Cell>
+        <DataTable.CellContent>
+          {info.row.original.usedBy}
+        </DataTable.CellContent>
       ),
     },
     {
       accessorKey: "addedBy",
       header: "Added by",
       cell: (info) => (
-        <DataTable.Cell>{info.row.original.addedBy}</DataTable.Cell>
+        <DataTable.CellContent>
+          {info.row.original.addedBy}
+        </DataTable.CellContent>
       ),
     },
     {
       accessorKey: "lastUpdated",
       header: "Last updated",
       cell: (info) => (
-        <DataTable.Cell>{info.row.original.lastUpdated}</DataTable.Cell>
+        <DataTable.CellContent>
+          {info.row.original.lastUpdated}
+        </DataTable.CellContent>
       ),
       enableSorting: false,
     },
     {
       accessorKey: "size",
       header: "Size",
-      cell: (info) => <DataTable.Cell>{info.row.original.size}</DataTable.Cell>,
+      cell: (info) => (
+        <DataTable.CellContent>{info.row.original.size}</DataTable.CellContent>
+      ),
     },
   ];