@dust-tt/sparkle 0.2.487 → 0.2.488-rc-1

package/src/components/Breadcrumbs.tsx

@@ -11,7 +11,6 @@ import {
 } from "@sparkle/components/Dropdown";
 import { Icon } from "@sparkle/components/Icon";
 import { Tooltip } from "@sparkle/components/Tooltip";
-import { SparkleContext, SparkleContextLinkType } from "@sparkle/context";
 import { ChevronRightIcon } from "@sparkle/icons/app";
 import { cn } from "@sparkle/lib";
 
@@ -19,11 +18,30 @@ const LABEL_TRUNCATE_LENGTH_MIDDLE = 15;
 const LABEL_TRUNCATE_LENGTH_END = 30;
 const ELLIPSIS_STRING = "...";
 
-interface BreadcrumbItem {
+type BaseBreadcrumbItem = {
   icon?: ComponentType<{ className?: string }>;
   label: string;
-  href?: string;
-}
+};
+
+type LinkBreadcrumbItem = BaseBreadcrumbItem & {
+  href: string;
+  onClick?: never;
+};
+
+type ButtonBreadcrumbItem = BaseBreadcrumbItem & {
+  href?: never;
+  onClick: () => void;
+};
+
+type LabelBreadcrumbItem = BaseBreadcrumbItem & {
+  href?: never;
+  onClick?: never;
+};
+
+export type BreadcrumbItem =
+  | LinkBreadcrumbItem
+  | ButtonBreadcrumbItem
+  | LabelBreadcrumbItem;
 
 interface BreadcrumbProps {
   items: BreadcrumbItem[];
@@ -35,11 +53,17 @@ interface BreadcrumbsAccumulator {
   itemsHidden: BreadcrumbItem[];
 }
 
-export function Breadcrumbs({ items, className }: BreadcrumbProps) {
-  const { components } = React.useContext(SparkleContext);
+const isLinkItem = (
+  item: BreadcrumbItem | { label: string }
+): item is LinkBreadcrumbItem =>
+  "href" in item && typeof item.href === "string";
 
-  const Link: SparkleContextLinkType = components.link;
+const isButtonItem = (
+  item: BreadcrumbItem | { label: string }
+): item is ButtonBreadcrumbItem =>
+  "onClick" in item && typeof item.onClick === "function";
 
+export function Breadcrumbs({ items, className }: BreadcrumbProps) {
   const { itemsShown, itemsHidden } = items.reduce(
     (acc: BreadcrumbsAccumulator, item, index) => {
       if (items.length <= 5 || index < 2 || index >= items.length - 2) {
@@ -63,14 +87,14 @@ export function Breadcrumbs({ items, className }: BreadcrumbProps) {
             key={`breadcrumbs-${index}`}
             className="s-flex s-flex-row s-items-center s-gap-1"
           >
-            <Icon
-              visual={item.icon}
-              className="s-text-muted-foreground dark:s-text-muted-foreground-night"
-            />
             {item.label === ELLIPSIS_STRING ? (
               <DropdownMenu>
                 <DropdownMenuTrigger asChild>
-                  <Button variant="ghost" label={ELLIPSIS_STRING} />
+                  <Button
+                    variant="ghost"
+                    label={ELLIPSIS_STRING}
+                    icon={item.icon}
+                  />
                 </DropdownMenuTrigger>
 
                 <DropdownMenuContent align="start">
@@ -78,7 +102,8 @@ export function Breadcrumbs({ items, className }: BreadcrumbProps) {
                     {itemsHidden.map((item, index) => (
                       <DropdownMenuItem
                         key={`breadcrumbs-hidden-${index}`}
-                        href={item.href}
+                        href={isLinkItem(item) ? item.href : undefined}
+                        onClick={isButtonItem(item) ? item.onClick : undefined}
                         icon={item.icon}
                         label={item.label}
                       />
@@ -86,22 +111,52 @@ export function Breadcrumbs({ items, className }: BreadcrumbProps) {
                   </DropdownMenuGroup>
                 </DropdownMenuContent>
               </DropdownMenu>
-            ) : item.href ? (
-              <Link
+            ) : isLinkItem(item) ? (
+              <Button
                 href={item.href}
+                icon={item.icon}
                 className={
                   index === itemsShown.length - 1
                     ? "s-font-medium s-text-foreground dark:s-text-foreground-night"
                     : "s-text-muted-foreground dark:s-text-muted-foreground-night"
                 }
-              >
-                {index === itemsShown.length - 1
-                  ? truncateWithTooltip(item.label, LABEL_TRUNCATE_LENGTH_END)
-                  : truncateWithTooltip(
-                      item.label,
-                      LABEL_TRUNCATE_LENGTH_MIDDLE
-                    )}
-              </Link>
+                variant="ghost"
+                label={
+                  index === itemsShown.length - 1
+                    ? truncateTextToLength(
+                        item.label,
+                        LABEL_TRUNCATE_LENGTH_END
+                      )
+                    : truncateTextToLength(
+                        item.label,
+                        LABEL_TRUNCATE_LENGTH_MIDDLE
+                      )
+                }
+                tooltip={item.label}
+              />
+            ) : isButtonItem(item) ? (
+              <Button
+                variant="ghost"
+                onClick={item.onClick}
+                icon={item.icon}
+                className={
+                  index === itemsShown.length - 1
+                    ? "s-font-medium s-text-foreground dark:s-text-foreground-night"
+                    : "s-text-muted-foreground dark:s-text-muted-foreground-night"
+                }
+                label={
+                  index === itemsShown.length - 1
+                    ? truncateTextToLength(
+                        item.label,
+                        LABEL_TRUNCATE_LENGTH_END
+                      )
+                    : truncateTextToLength(
+                        item.label,
+                        LABEL_TRUNCATE_LENGTH_MIDDLE
+                      )
+                }
+                tooltip={item.label}
+              />
             ) : (
               <div
                 className={
@@ -119,7 +174,7 @@ export function Breadcrumbs({ items, className }: BreadcrumbProps) {
               </div>
             )}
             {index === itemsShown.length - 1 ? null : (
-              <ChevronRightIcon className="s-text-primary-300 dark:s-text-primary-700" />
+              <Icon visual={ChevronRightIcon} />
             )}
           </div>
         );
@@ -130,11 +185,14 @@ export function Breadcrumbs({ items, className }: BreadcrumbProps) {
 
 function truncateWithTooltip(text: string, length: number) {
   return text.length > length ? (
-    <Tooltip
-      trigger={`${text.substring(0, length - 1)}${ELLIPSIS_STRING}`}
-      label={text}
-    />
+    <Tooltip trigger={truncateTextToLength(text, length)} label={text} />
   ) : (
     text
   );
 }
+
+function truncateTextToLength(text: string, length: number) {
+  return text.length > length
+    ? `${text.substring(0, length - 1)}${ELLIPSIS_STRING}`
+    : text;
+}

package/src/components/DataTable.tsx

@@ -98,6 +98,12 @@ interface DataTableProps<TData extends TBaseData> {
   setSorting?: (sorting: SortingState) => void;
   isServerSideSorting?: boolean;
   disablePaginationNumbers?: boolean;
+  getRowId?: (
+    originalRow: TData,
+    index: number,
+    parent?: Row<TData> | undefined
+  ) => string;
+  // row selection props
   rowSelection?: RowSelectionState;
   setRowSelection?: (rowSelection: RowSelectionState) => void;
   enableRowSelection?: boolean | ((row: Row<TData>) => boolean);
@@ -122,6 +128,7 @@ export function DataTable<TData extends TBaseData>({
   rowSelection,
   setRowSelection,
   enableRowSelection = false,
+  getRowId,
 }: DataTableProps<TData>) {
   const windowSize = useWindowSize();
 
@@ -191,6 +198,7 @@ export function DataTable<TData extends TBaseData>({
     },
     onPaginationChange,
     enableRowSelection,
+    getRowId,
   });
 
   useEffect(() => {
@@ -320,6 +328,7 @@ export function ScrollableDataTable<TData extends TBaseData>({
   rowSelection,
   setRowSelection,
   enableRowSelection,
+  getRowId,
 }: ScrollableDataTableProps<TData>) {
   const windowSize = useWindowSize();
   const tableContainerRef = useRef<HTMLDivElement>(null);
@@ -368,6 +377,7 @@ export function ScrollableDataTable<TData extends TBaseData>({
       ...(enableRowSelection && { rowSelection }),
     },
     enableRowSelection,
+    getRowId,
   });
 
   useEffect(() => {

package/src/components/index.ts

@@ -8,6 +8,7 @@ export {
 export { AttachmentChip } from "./AttachmentChip";
 export { Avatar } from "./Avatar";
 export { BarHeader } from "./BarHeader";
+export type { BreadcrumbItem } from "./Breadcrumbs";
 export { Breadcrumbs } from "./Breadcrumbs";
 export type {
   ButtonProps,

package/src/stories/Breadcrumbs.stories.tsx

@@ -18,7 +18,7 @@ export default meta;
 export const BreadcrumbsExample = () => {
   const items1 = [
     { label: "Home", href: "#", icon: HomeIcon },
-    { label: "Spaces", href: ".." },
+    { label: "Spaces", onClick: () => alert("Spaces clicked!") },
     { label: "My Space" },
   ];
   const items2 = [

package/src/stories/DataTable.stories.tsx

@@ -633,6 +633,7 @@ export const DataTableWithRowSelectionExample = () => {
           rowSelection={rowSelection}
           setRowSelection={setRowSelection}
           enableRowSelection={true}
+          getRowId={(row) => row.name}
         />
 
         <div className="s-rounded-md s-border s-bg-muted/50 s-p-2">