@dust-tt/sparkle 0.2.239 → 0.2.241

package/src/components/DropdownMenu.tsx

@@ -1,6 +1,7 @@
 import { Menu, Transition } from "@headlessui/react";
 import React, {
   ComponentType,
+  forwardRef,
   Fragment,
   JSXElementConstructor,
   MouseEvent,
@@ -102,135 +103,164 @@ export interface DropdownButtonProps {
   className?: string;
   disabled?: boolean;
   children?: React.ReactNode;
+  ref?: React.Ref<HTMLButtonElement>;
+  onClick?: () => void;
 }
 
-DropdownMenu.Button = function ({
-  label,
-  type = "menu",
-  size = "sm",
-  tooltip,
-  icon,
-  children,
-  tooltipPosition = "above",
-  className = "",
-  disabled = false,
-}: DropdownButtonProps) {
-  const finalLabelClasses = classNames(
-    labelClasses.base,
-    labelSizeClasses[size],
-    labelClasses.dark.base,
-    !disabled ? labelClasses.active : "",
-    !disabled ? labelClasses.dark.active : "",
-    !disabled ? labelClasses.hover : "",
-    !disabled ? labelClasses.dark.hover : "",
-    disabled ? labelClasses.disabled : ""
-  );
+DropdownMenu.Button = forwardRef<HTMLButtonElement, DropdownButtonProps>(
+  function DropdownMenuButton(
+    {
+      label,
+      type = "menu",
+      size = "sm",
+      tooltip,
+      icon,
+      children,
+      tooltipPosition = "above",
+      className = "",
+      disabled = false,
+      onClick,
+    },
+    forwardedRef
+  ) {
+    const contextRef = useContext(ButtonRefContext);
+
+    const finalLabelClasses = classNames(
+      labelClasses.base,
+      labelSizeClasses[size],
+      labelClasses.dark.base,
+      !disabled ? labelClasses.active : "",
+      !disabled ? labelClasses.dark.active : "",
+      !disabled ? labelClasses.hover : "",
+      !disabled ? labelClasses.dark.hover : "",
+      disabled ? labelClasses.disabled : ""
+    );
 
-  const finalIconClasses = classNames(
-    iconClasses.base,
-    iconClasses.dark.base,
-    !disabled ? iconClasses.hover : "",
-    !disabled ? iconClasses.dark.hover : "",
-    disabled ? iconClasses.disabled : ""
-  );
+    const finalIconClasses = classNames(
+      iconClasses.base,
+      iconClasses.dark.base,
+      !disabled ? iconClasses.hover : "",
+      !disabled ? iconClasses.dark.hover : "",
+      disabled ? iconClasses.disabled : ""
+    );
 
-  const finalChevronClasses = classNames(
-    chevronClasses.base,
-    !disabled ? chevronClasses.hover : "",
-    chevronClasses.dark.base,
-    !disabled ? chevronClasses.dark.hover : "",
-    disabled ? chevronClasses.disabled : ""
-  );
+    const finalChevronClasses = classNames(
+      chevronClasses.base,
+      !disabled ? chevronClasses.hover : "",
+      chevronClasses.dark.base,
+      !disabled ? chevronClasses.dark.hover : "",
+      disabled ? chevronClasses.disabled : ""
+    );
 
-  const buttonRef = useContext(ButtonRefContext);
+    const aggregatedRef = (value: HTMLButtonElement) => {
+      if (contextRef) {
+        contextRef.current = value;
+      }
+      if (typeof forwardedRef === "function") {
+        forwardedRef(value);
+      } else if (forwardedRef) {
+        forwardedRef.current = value;
+      }
+    };
+
+    if (children) {
+      return (
+        <Menu.Button
+          as="div"
+          disabled={disabled}
+          ref={aggregatedRef}
+          className={classNames(
+            disabled ? "s-cursor-default" : "s-cursor-pointer",
+            className,
+            "s-group/dm s-flex s-justify-items-center s-text-sm s-font-medium focus:s-outline-none focus:s-ring-0",
+            label ? "s-gap-1.5" : "s-gap-0"
+          )}
+          onClick={(e) => e.stopPropagation()}
+        >
+          {tooltip ? (
+            <Tooltip position={tooltipPosition} label={tooltip}>
+              {children}
+            </Tooltip>
+          ) : (
+            children
+          )}
+        </Menu.Button>
+      );
+    }
+
+    const chevronIcon =
+      type === "select"
+        ? ChevronUpDownIcon
+        : type === "submenu"
+          ? ChevronRightIcon
+          : ChevronDownIcon;
 
-  if (children) {
     return (
-      <Menu.Button
-        as="div"
-        disabled={disabled}
-        ref={buttonRef}
-        className={classNames(
-          disabled ? "s-cursor-default" : "s-cursor-pointer",
-          className,
-          "s-group/dm s-flex s-justify-items-center s-text-sm s-font-medium focus:s-outline-none focus:s-ring-0",
-          label ? "s-gap-1.5" : "s-gap-0"
-        )}
-        onClick={(e) => e.stopPropagation()}
-      >
+      <>
         {tooltip ? (
-          <Tooltip position={tooltipPosition} label={tooltip}>
-            {children}
+          <Tooltip label={tooltip} position={tooltipPosition}>
+            <Menu.Button
+              disabled={disabled}
+              ref={aggregatedRef}
+              className={classNames(
+                disabled ? "s-cursor-default" : "s-cursor-pointer",
+                className,
+                "s-group/dm s-flex s-justify-items-center s-text-sm s-font-medium focus:s-outline-none focus:s-ring-0",
+                label ? (size === "md" ? "s-gap-2" : "s-gap-1.5") : "s-gap-0.5"
+              )}
+              onClick={(e) => {
+                e.stopPropagation();
+                if (onClick) {
+                  onClick();
+                }
+              }}
+            >
+              <Icon visual={icon} size={size} className={finalIconClasses} />
+              <Icon
+                visual={chevronIcon}
+                size={size === "sm" ? "xs" : "sm"}
+                className={finalChevronClasses}
+              />
+            </Menu.Button>
           </Tooltip>
         ) : (
-          children
-        )}
-      </Menu.Button>
-    );
-  }
-
-  const chevronIcon =
-    type === "select"
-      ? ChevronUpDownIcon
-      : type === "submenu"
-        ? ChevronRightIcon
-        : ChevronDownIcon;
-
-  return (
-    <>
-      {tooltip ? (
-        <Tooltip label={tooltip} position={tooltipPosition}>
           <Menu.Button
             disabled={disabled}
-            ref={buttonRef}
+            ref={aggregatedRef}
             className={classNames(
               disabled ? "s-cursor-default" : "s-cursor-pointer",
               className,
               "s-group/dm s-flex s-justify-items-center s-text-sm s-font-medium focus:s-outline-none focus:s-ring-0",
-              label ? (size === "md" ? "s-gap-2" : "s-gap-1.5") : "s-gap-0.5"
+              label ? (size === "md" ? "s-gap-2" : "s-gap-1.5") : "s-gap-0.5",
+              type === "submenu" ? "s-opacity-50" : ""
             )}
-            onClick={(e) => e.stopPropagation()}
+            onClick={(e) => {
+              e.stopPropagation();
+              if (onClick) {
+                onClick();
+              }
+            }}
           >
             <Icon visual={icon} size={size} className={finalIconClasses} />
+            <span
+              className={classNames(
+                finalLabelClasses,
+                type === "submenu" ? "s-w-full" : ""
+              )}
+            >
+              {label}
+            </span>
             <Icon
               visual={chevronIcon}
               size={size === "sm" ? "xs" : "sm"}
               className={finalChevronClasses}
             />
           </Menu.Button>
-        </Tooltip>
-      ) : (
-        <Menu.Button
-          disabled={disabled}
-          ref={buttonRef}
-          className={classNames(
-            disabled ? "s-cursor-default" : "s-cursor-pointer",
-            className,
-            "s-group/dm s-flex s-justify-items-center s-text-sm s-font-medium focus:s-outline-none focus:s-ring-0",
-            label ? (size === "md" ? "s-gap-2" : "s-gap-1.5") : "s-gap-0.5",
-            type === "submenu" ? "s-opacity-50" : ""
-          )}
-          onClick={(e) => e.stopPropagation()}
-        >
-          <Icon visual={icon} size={size} className={finalIconClasses} />
-          <span
-            className={classNames(
-              finalLabelClasses,
-              type === "submenu" ? "s-w-full" : ""
-            )}
-          >
-            {label}
-          </span>
-          <Icon
-            visual={chevronIcon}
-            size={size === "sm" ? "xs" : "sm"}
-            className={finalChevronClasses}
-          />
-        </Menu.Button>
-      )}
-    </>
-  );
-};
+        )}
+      </>
+    );
+  }
+);
 
 export interface DropdownItemProps {
   children?: React.ReactNode;

package/src/stories/DataTable.stories.tsx

@@ -1,5 +1,5 @@
 import type { Meta } from "@storybook/react";
-import { ColumnDef, PaginationState } from "@tanstack/react-table";
+import { ColumnDef, PaginationState, SortingState } from "@tanstack/react-table";
 import React, { useMemo } from "react";
 
 import { DropdownItemProps } from "@sparkle/components/DropdownMenu";
@@ -206,6 +206,32 @@ export const DataTableExample = () => {
   );
 };
 
+export const DataTableClientSideSortingExample = () => {
+  const [sorting, setSorting] = React.useState<SortingState>([{ id: "name", desc: true }])
+  const [filter, setFilter] = React.useState<string>("");
+
+  return (
+    <div className="s-w-full s-max-w-4xl s-overflow-x-auto">
+      <Input
+        name="filter"
+        placeholder="Filter"
+        value={filter}
+        onChange={(v) => setFilter(v)}
+      />
+      <DataTable
+        className="s-w-full s-max-w-4xl s-overflow-x-auto"
+        data={data}
+        filter={filter}
+        filterColumn="name"
+        columns={columns}
+        columnsBreakpoints={{ lastUpdated: "sm" }}
+        sorting={sorting}
+        setSorting={setSorting}
+      />
+    </div>
+  );
+};
+
 export const DataTablePaginatedExample = () => {
   const [pagination, setPagination] = React.useState<PaginationState>({
     pageIndex: 0,
@@ -229,7 +255,6 @@ export const DataTablePaginatedExample = () => {
         pagination={pagination}
         setPagination={setPagination}
         columns={columns}
-        initialColumnOrder={[{ id: "name", desc: false }]}
         columnsBreakpoints={{ lastUpdated: "sm" }}
       />
     </div>
@@ -241,14 +266,25 @@ export const DataTablePaginatedServerSideExample = () => {
     pageIndex: 0,
     pageSize: 2,
   });
+  const [sorting, setSorting] = React.useState<SortingState>([{ id: "name", desc: true }])
   const [filter, setFilter] = React.useState<string>("");
   const rows = useMemo(() => {
+    if (sorting.length > 0) {
+      const order = sorting[0].desc ? -1: 1;
+      return data.sort(
+        (a: Data, b: Data) => {
+          return a.name.toLowerCase().localeCompare(b.name.toLowerCase()) * order
+        }
+      ).slice(
+        pagination.pageIndex * pagination.pageSize,
+        (pagination.pageIndex + 1) * pagination.pageSize
+      );
+    }
     return data.slice(
       pagination.pageIndex * pagination.pageSize,
       (pagination.pageIndex + 1) * pagination.pageSize
     );
-  }, [data, pagination]);
-
+  }, [data, pagination, sorting]);
   return (
     <div className="s-w-full s-max-w-4xl s-overflow-x-auto">
       <Input
@@ -266,8 +302,10 @@ export const DataTablePaginatedServerSideExample = () => {
         pagination={pagination}
         setPagination={setPagination}
         columns={columns}
-        initialColumnOrder={[{ id: "name", desc: false }]}
+        sorting={sorting}
+        setSorting={setSorting}
         columnsBreakpoints={{ lastUpdated: "sm" }}
+        isServerSideSorting={true}
       />
     </div>
   );

package/src/stories/DropdownMenu.stories.tsx

@@ -48,7 +48,7 @@ export const DropdownExample = () => {
       <div className="s-flex s-gap-6">
         <div className="s-text-sm">Action</div>
         <DropdownMenu>
-          <DropdownMenu.Button label="Action" />
+          <DropdownMenu.Button label="Action" onClick={() => console.log("CLICK")}/>
           <DropdownMenu.Items width={220}>
             <DropdownMenu.SectionHeader label="Edition" />
             <DropdownMenu.Item