@salesforce/webapp-template-feature-react-chart-experimental 1.44.0 → 1.45.1

package/dist/force-app/main/default/webapplications/feature-react-chart/src/components/ui/table.tsx

@@ -1,114 +1,87 @@
 import * as React from "react";
-import { cn } from "../../lib/utils";
 
-/**
- * Shadcn-style Table components
- * These components follow shadcn/ui patterns for consistent styling
- */
+import { cn } from "../../lib/utils";
 
-const Table = React.forwardRef<HTMLTableElement, React.HTMLAttributes<HTMLTableElement>>(
-	({ className, ...props }, ref) => (
-		<div className="relative w-full overflow-auto">
-			<table ref={ref} className={cn("w-full caption-bottom text-sm", className)} {...props} />
+function Table({ className, ...props }: React.ComponentProps<"table">) {
+	return (
+		<div data-slot="table-container" className="relative w-full overflow-x-auto">
+			<table
+				data-slot="table"
+				className={cn("w-full caption-bottom text-sm", className)}
+				{...props}
+			/>
 		</div>
-	),
-);
-Table.displayName = "Table";
-
-const TableHeader = React.forwardRef<
-	HTMLTableSectionElement,
-	React.HTMLAttributes<HTMLTableSectionElement>
->(({ className, ...props }, ref) => (
-	<thead
-		ref={ref}
-		className={cn(
-			// 1. Existing border style
-			"[&_tr]:border-b",
+	);
+}
 
-			// 2. Make headers sticky
-			// We apply this to the 'th' children using the [&_th] selector
-			// This is often more robust across browsers than applying sticky to the <thead> itself
-			"[&_th]:sticky [&_th]:top-0 [&_th]:z-10",
-			// 3. CRITICAL: Add background color
-			// Without this, content scrolls "under" the transparent text
-			"[&_th]:bg-background",
+function TableHeader({ className, ...props }: React.ComponentProps<"thead">) {
+	return <thead data-slot="table-header" className={cn("[&_tr]:border-b", className)} {...props} />;
+}
 
-			// 4. Optional: Add a subtle shadow for better visual separation when scrolling
-			"[&_th]:shadow-[0_1px_0_0_theme(colors.border)]",
-			className,
-		)}
-		{...props}
-	/>
-));
-TableHeader.displayName = "TableHeader";
-
-const TableBody = React.forwardRef<
-	HTMLTableSectionElement,
-	React.HTMLAttributes<HTMLTableSectionElement>
->(({ className, ...props }, ref) => (
-	<tbody ref={ref} className={cn("[&_tr:last-child]:border-0", className)} {...props} />
-));
-TableBody.displayName = "TableBody";
+function TableBody({ className, ...props }: React.ComponentProps<"tbody">) {
+	return (
+		<tbody
+			data-slot="table-body"
+			className={cn("[&_tr:last-child]:border-0", className)}
+			{...props}
+		/>
+	);
+}
 
-const TableFooter = React.forwardRef<
-	HTMLTableSectionElement,
-	React.HTMLAttributes<HTMLTableSectionElement>
->(({ className, ...props }, ref) => (
-	<tfoot
-		ref={ref}
-		className={cn("border-t bg-muted/50 font-medium [&>tr]:last:border-b-0", className)}
-		{...props}
-	/>
-));
-TableFooter.displayName = "TableFooter";
+function TableFooter({ className, ...props }: React.ComponentProps<"tfoot">) {
+	return (
+		<tfoot
+			data-slot="table-footer"
+			className={cn("bg-muted/50 border-t font-medium [&>tr]:last:border-b-0", className)}
+			{...props}
+		/>
+	);
+}
 
-const TableRow = React.forwardRef<HTMLTableRowElement, React.HTMLAttributes<HTMLTableRowElement>>(
-	({ className, ...props }, ref) => (
+function TableRow({ className, ...props }: React.ComponentProps<"tr">) {
+	return (
 		<tr
-			ref={ref}
+			data-slot="table-row"
 			className={cn(
-				"border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted",
+				"hover:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors",
 				className,
 			)}
 			{...props}
 		/>
-	),
-);
-TableRow.displayName = "TableRow";
+	);
+}
 
-const TableHead = React.forwardRef<
-	HTMLTableCellElement,
-	React.ThHTMLAttributes<HTMLTableCellElement>
->(({ className, ...props }, ref) => (
-	<th
-		ref={ref}
-		className={cn(
-			"h-12 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0",
-			className,
-		)}
-		{...props}
-	/>
-));
-TableHead.displayName = "TableHead";
+function TableHead({ className, ...props }: React.ComponentProps<"th">) {
+	return (
+		<th
+			data-slot="table-head"
+			className={cn(
+				"text-foreground h-10 px-2 text-left align-middle font-medium whitespace-nowrap [&:has([role=checkbox])]:pr-0",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
 
-const TableCell = React.forwardRef<
-	HTMLTableCellElement,
-	React.TdHTMLAttributes<HTMLTableCellElement>
->(({ className, ...props }, ref) => (
-	<td
-		ref={ref}
-		className={cn("p-4 align-middle [&:has([role=checkbox])]:pr-0", className)}
-		{...props}
-	/>
-));
-TableCell.displayName = "TableCell";
+function TableCell({ className, ...props }: React.ComponentProps<"td">) {
+	return (
+		<td
+			data-slot="table-cell"
+			className={cn("p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0", className)}
+			{...props}
+		/>
+	);
+}
 
-const TableCaption = React.forwardRef<
-	HTMLTableCaptionElement,
-	React.HTMLAttributes<HTMLTableCaptionElement>
->(({ className, ...props }, ref) => (
-	<caption ref={ref} className={cn("mt-4 text-sm text-muted-foreground", className)} {...props} />
-));
-TableCaption.displayName = "TableCaption";
+function TableCaption({ className, ...props }: React.ComponentProps<"caption">) {
+	return (
+		<caption
+			data-slot="table-caption"
+			className={cn("text-muted-foreground mt-4 text-sm", className)}
+			{...props}
+		/>
+	);
+}
 
 export { Table, TableHeader, TableBody, TableFooter, TableHead, TableRow, TableCell, TableCaption };

package/dist/force-app/main/default/webapplications/feature-react-chart/src/components/ui/tabs.tsx

@@ -1,115 +1,78 @@
 import * as React from "react";
-import { cn } from "../../lib/utils";
-
-interface TabsContextValue {
-	value: string;
-	onValueChange: (value: string) => void;
-}
-
-const TabsContext = React.createContext<TabsContextValue | undefined>(undefined);
-
-interface TabsProps extends React.ComponentProps<"div"> {
-	value?: string;
-	defaultValue?: string;
-	onValueChange?: (value: string) => void;
-}
-
-function Tabs({ value, defaultValue, onValueChange, className, children, ...props }: TabsProps) {
-	const [internalValue, setInternalValue] = React.useState(defaultValue || "");
-	const controlled = value !== undefined;
-	const currentValue = controlled ? value : internalValue;
+import { cva, type VariantProps } from "class-variance-authority";
+import { Tabs as TabsPrimitive } from "radix-ui";
 
-	const handleValueChange = React.useCallback(
-		(newValue: string) => {
-			if (!controlled) {
-				setInternalValue(newValue);
-			}
-			onValueChange?.(newValue);
-		},
-		[controlled, onValueChange],
-	);
+import { cn } from "../../lib/utils";
 
+function Tabs({
+	className,
+	orientation = "horizontal",
+	...props
+}: React.ComponentProps<typeof TabsPrimitive.Root>) {
 	return (
-		<TabsContext.Provider value={{ value: currentValue, onValueChange: handleValueChange }}>
-			<div data-slot="tabs" className={cn("w-full", className)} {...props}>
-				{children}
-			</div>
-		</TabsContext.Provider>
+		<TabsPrimitive.Root
+			data-slot="tabs"
+			data-orientation={orientation}
+			className={cn("gap-2 group/tabs flex data-horizontal:flex-col", className)}
+			{...props}
+		/>
 	);
 }
 
-function useTabsContext() {
-	const context = React.useContext(TabsContext);
-	if (!context) {
-		throw new Error("Tabs components must be used within a Tabs component");
-	}
-	return context;
-}
+const tabsListVariants = cva(
+	"rounded-lg p-[3px] group-data-horizontal/tabs:h-8 data-[variant=line]:rounded-none group/tabs-list text-muted-foreground inline-flex w-fit items-center justify-center group-data-vertical/tabs:h-fit group-data-vertical/tabs:flex-col",
+	{
+		variants: {
+			variant: {
+				default: "bg-muted",
+				line: "gap-1 bg-transparent",
+			},
+		},
+		defaultVariants: {
+			variant: "default",
+		},
+	},
+);
 
-function TabsList({ className, ...props }: React.ComponentProps<"div">) {
+function TabsList({
+	className,
+	variant = "default",
+	...props
+}: React.ComponentProps<typeof TabsPrimitive.List> & VariantProps<typeof tabsListVariants>) {
 	return (
-		<div
+		<TabsPrimitive.List
 			data-slot="tabs-list"
-			className={cn(
-				"inline-flex h-10 items-center justify-center rounded-md bg-muted p-1 text-muted-foreground",
-				className,
-			)}
+			data-variant={variant}
+			className={cn(tabsListVariants({ variant }), className)}
 			{...props}
 		/>
 	);
 }
 
-interface TabsTriggerProps extends React.ComponentProps<"button"> {
-	value: string;
-}
-
-function TabsTrigger({ className, value, ...props }: TabsTriggerProps) {
-	const { value: selectedValue, onValueChange } = useTabsContext();
-	const isSelected = selectedValue === value;
-
+function TabsTrigger({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.Trigger>) {
 	return (
-		<button
+		<TabsPrimitive.Trigger
 			data-slot="tabs-trigger"
-			data-selected={isSelected}
-			type="button"
-			role="tab"
-			aria-selected={isSelected}
 			className={cn(
-				"inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
-				isSelected
-					? "bg-background text-foreground shadow-sm"
-					: "text-muted-foreground hover:bg-background/50",
+				"gap-1.5 rounded-md border border-transparent px-1.5 py-0.5 text-sm font-medium group-data-[variant=default]/tabs-list:data-active:shadow-sm group-data-[variant=line]/tabs-list:data-active:shadow-none [&_svg:not([class*='size-'])]:size-4 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring text-foreground/60 hover:text-foreground dark:text-muted-foreground dark:hover:text-foreground relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center whitespace-nowrap transition-all group-data-vertical/tabs:w-full group-data-vertical/tabs:justify-start focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+				"group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-active:bg-transparent dark:group-data-[variant=line]/tabs-list:data-active:border-transparent dark:group-data-[variant=line]/tabs-list:data-active:bg-transparent",
+				"data-active:bg-background dark:data-active:text-foreground dark:data-active:border-input dark:data-active:bg-input/30 data-active:text-foreground",
+				"after:bg-foreground after:absolute after:opacity-0 after:transition-opacity group-data-horizontal/tabs:after:inset-x-0 group-data-horizontal/tabs:after:bottom-[-5px] group-data-horizontal/tabs:after:h-0.5 group-data-vertical/tabs:after:inset-y-0 group-data-vertical/tabs:after:-right-1 group-data-vertical/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-active:after:opacity-100",
 				className,
 			)}
-			onClick={() => onValueChange(value)}
 			{...props}
 		/>
 	);
 }
 
-interface TabsContentProps extends React.ComponentProps<"div"> {
-	value: string;
-}
-
-function TabsContent({ className, value, children, ...props }: TabsContentProps) {
-	const { value: selectedValue } = useTabsContext();
-	if (selectedValue !== value) {
-		return null;
-	}
-
+function TabsContent({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.Content>) {
 	return (
-		<div
+		<TabsPrimitive.Content
 			data-slot="tabs-content"
-			role="tabpanel"
-			className={cn(
-				"mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
-				className,
-			)}
+			className={cn("text-sm flex-1 outline-none", className)}
 			{...props}
-		>
-			{children}
-		</div>
+		/>
 	);
 }
 
-export { Tabs, TabsList, TabsTrigger, TabsContent };
+export { Tabs, TabsList, TabsTrigger, TabsContent, tabsListVariants };

package/dist/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@salesforce/webapp-template-base-sfdx-project-experimental",
-  "version": "1.44.0",
+  "version": "1.45.1",
   "description": "Base SFDX project template",
   "private": true,
   "files": [

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@salesforce/webapp-template-feature-react-chart-experimental",
-  "version": "1.44.0",
+  "version": "1.45.1",
   "description": "Chart feature with analytics chart components, agent skills, and rules (Recharts)",
   "license": "SEE LICENSE IN LICENSE.txt",
   "author": "",
@@ -27,7 +27,7 @@
     "clean": "rm -rf dist"
   },
   "devDependencies": {
-    "@salesforce/webapp-experimental": "^1.44.0",
+    "@salesforce/webapp-experimental": "^1.45.1",
     "@types/react": "^19.2.7",
     "@types/react-dom": "^19.2.3",
     "react-dom": "^19.2.1",
@@ -51,5 +51,5 @@
       }
     }
   },
-  "gitHead": "00f5b3b58d400b13a1b1130d11f571c2e1366cb4"
+  "gitHead": "091ae5ef0b936a7d51ca59a06c10ae4c301022c4"
 }