Adding Container cpacity to tables and Static Items to Dropdowns

front/components/assistant/conversation/AgentMessage.tsx

@@ -624,11 +624,13 @@ export function AgentMessage({
           </div>
         )}
         {agentMessage.status === "cancelled" && (
-          <Chip
-            label="Message generation was interrupted"
-            size="xs"
-            className="mt-4"
-          />
+          <div>
+            <Chip
+              label="The message generation was interrupted"
+              size="xs"
+              className="mt-4"
+            />
+          </div>
         )}
       </div>
     );

sparkle/.storybook/main.ts

@@ -7,6 +7,7 @@ const config: StorybookConfig = {
     "@storybook/addon-links",
     "@storybook/addon-essentials",
     "@storybook/addon-interactions",
+    "@storybook/addon-viewport",
     "@storybook/addon-themes",
     {
       name: "@storybook/addon-styling",

sparkle/.storybook/preview.ts

@@ -1,9 +1,15 @@
 import { withThemeByClassName } from "@storybook/addon-themes";
 import type { Preview } from "@storybook/react";
+import { INITIAL_VIEWPORTS } from "@storybook/addon-viewport";
 
 const preview: Preview = {
   parameters: {
     actions: { argTypesRegex: "^on[A-Z].*" },
+    viewport: {
+      viewports: INITIAL_VIEWPORTS,
+      defaultViewport: "iphone12",
+      disable: true,
+    },
     controls: {
       matchers: {
         color: /(background|color)$/i,

sparkle/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dust-tt/sparkle",
-  "version": "0.2.372",
+  "version": "0.2.373",
   "scripts": {
     "build": "rm -rf dist && npm run tailwind && npm run build:esm && npm run build:cjs",
     "tailwind": "tailwindcss -i ./src/styles/tailwind.css -o dist/sparkle.css",
@@ -39,6 +39,7 @@
     "@storybook/addon-mdx-gfm": "^7.4.6",
     "@storybook/addon-styling": "^1.3.7",
     "@storybook/addon-themes": "^7.4.6",
+    "@storybook/addon-viewport": "^7.6.20",
     "@storybook/blocks": "^7.4.6",
     "@storybook/react": "^7.4.6",
     "@storybook/react-webpack5": "^7.4.6",

sparkle/src/components/Chip.tsx

@@ -91,6 +91,7 @@ const Chip = React.forwardRef<HTMLDivElement, ChipProps>(
       aria-label={label}
       ref={ref}
     >
+      {children}
       {icon && <Icon visual={icon} size={size as IconProps["size"]} />}
       {label && (
         <span className={cn("s-pointer s-grow s-cursor-default s-truncate")}>
@@ -101,7 +102,6 @@ const Chip = React.forwardRef<HTMLDivElement, ChipProps>(
           )}
         </span>
       )}
-      {children}
     </div>
   )
 );

sparkle/src/components/DataTable.tsx

@@ -257,16 +257,29 @@ export function DataTable<TData extends TBaseData>({
 
 interface DataTableRootProps extends React.HTMLAttributes<HTMLTableElement> {
   children: ReactNode;
+  containerClassName?: string;
+  containerProps?: React.HTMLAttributes<HTMLDivElement>;
 }
 
 DataTable.Root = function DataTableRoot({
   children,
+  className,
+  containerClassName,
+  containerProps,
   ...props
 }: DataTableRootProps) {
   return (
-    <table className="s-w-full s-table-fixed s-border-collapse" {...props}>
-      {children}
-    </table>
+    <div
+      className={cn("s-@container/table", containerClassName)}
+      {...containerProps}
+    >
+      <table
+        className={cn("s-w-full s-table-fixed s-border-collapse", className)}
+        {...props}
+      >
+        {children}
+      </table>
+    </div>
   );
 };
 

sparkle/src/components/Dropdown.tsx

@@ -384,6 +384,33 @@ const DropdownMenuSearchbar = React.forwardRef<
 
 DropdownMenuSearchbar.displayName = "DropdownMenuSearchbar";
 
+interface DropdownMenuStaticItemProps {
+  label: string;
+  value?: string;
+  children?: React.ReactNode;
+  className?: string;
+}
+
+const DropdownMenuStaticItem = React.forwardRef<
+  HTMLDivElement,
+  DropdownMenuStaticItemProps
+>(({ label, value, children, className }, ref) => (
+  <div
+    ref={ref}
+    className={cn(
+      "s-flex s-h-9 s-items-center s-gap-2 s-px-2 s-text-sm s-text-foreground",
+      className
+    )}
+  >
+    <span className="s-grow s-font-medium">{label}</span>
+    {value && (
+      <span className="s-shrink-0 s-text-muted-foreground">{value}</span>
+    )}
+    {children && <div className="s-shrink-0">{children}</div>}
+  </div>
+));
+DropdownMenuStaticItem.displayName = "DropdownMenuStaticItem";
+
 export {
   DropdownMenu,
   DropdownMenuCheckboxItem,
@@ -397,6 +424,7 @@ export {
   DropdownMenuSearchbar,
   DropdownMenuSeparator,
   DropdownMenuShortcut,
+  DropdownMenuStaticItem,
   DropdownMenuSub,
   DropdownMenuSubContent,
   DropdownMenuSubTrigger,