design-zystem 1.0.449 → 1.0.451

package/dist/ui/index.d.mts

@@ -903,6 +903,7 @@ interface TableCellProps {
     borderLeft?: boolean;
     /** Curseur sur toute la cellule — quand un enfant de la cellule porte sa propre action de clic. */
     cursor?: keyof typeof CURSOR_CLASS;
+    onClick?: () => void;
     className?: string;
     /** Fusionne la cellule sur ce nombre de colonnes — ignore `width` pour laisser le navigateur répartir l'espace fusionné. */
     colSpan?: number;
@@ -911,7 +912,7 @@ interface TableCellProps {
     tooltip?: ReactNode;
     theme?: TableCellTheme;
 }
-declare const TableCell: ({ children, secondary, isExpanded, width, centerContent, sticky, stickyOffset, surface, backgroundColor, accentColor, borderLeft, colSpan, cursor, className, wrap, maxLines, tooltip, theme, }: TableCellProps) => react.JSX.Element;
+declare const TableCell: ({ children, secondary, isExpanded, width, centerContent, sticky, stickyOffset, surface, backgroundColor, accentColor, borderLeft, colSpan, cursor, onClick, className, wrap, maxLines, tooltip, theme, }: TableCellProps) => react.JSX.Element;
 
 interface TableFooterProps {
     children?: ReactNode;

package/dist/ui/index.d.ts

@@ -903,6 +903,7 @@ interface TableCellProps {
     borderLeft?: boolean;
     /** Curseur sur toute la cellule — quand un enfant de la cellule porte sa propre action de clic. */
     cursor?: keyof typeof CURSOR_CLASS;
+    onClick?: () => void;
     className?: string;
     /** Fusionne la cellule sur ce nombre de colonnes — ignore `width` pour laisser le navigateur répartir l'espace fusionné. */
     colSpan?: number;
@@ -911,7 +912,7 @@ interface TableCellProps {
     tooltip?: ReactNode;
     theme?: TableCellTheme;
 }
-declare const TableCell: ({ children, secondary, isExpanded, width, centerContent, sticky, stickyOffset, surface, backgroundColor, accentColor, borderLeft, colSpan, cursor, className, wrap, maxLines, tooltip, theme, }: TableCellProps) => react.JSX.Element;
+declare const TableCell: ({ children, secondary, isExpanded, width, centerContent, sticky, stickyOffset, surface, backgroundColor, accentColor, borderLeft, colSpan, cursor, onClick, className, wrap, maxLines, tooltip, theme, }: TableCellProps) => react.JSX.Element;
 
 interface TableFooterProps {
     children?: ReactNode;

package/dist/ui/index.js

@@ -4259,6 +4259,15 @@ var TableExpandChevron = ({ isExpanded }) => /* @__PURE__ */ (0, import_jsx_runt
   }
 );
 
+// src/ui/components/ui/table/activateFromKeyboard.ts
+var ACTIVATION_KEYS = ["Enter", " "];
+var activateFromKeyboard = (activate) => (event) => {
+  if (event.target !== event.currentTarget) return;
+  if (!ACTIVATION_KEYS.includes(event.key)) return;
+  event.preventDefault();
+  activate();
+};
+
 // src/ui/components/ui/table/tableCellThemeClass.ts
 var TABLE_CELL_THEME_CLASS = {
   "blue-700": "text-blue-700",
@@ -4302,6 +4311,7 @@ var TableCell = ({
   borderLeft = false,
   colSpan,
   cursor,
+  onClick,
   className,
   wrap = false,
   maxLines,
@@ -4339,12 +4349,19 @@ var TableCell = ({
       children: content
     }
   ) : content;
+  const handleClick = onClick ? (event) => {
+    event.stopPropagation();
+    onClick();
+  } : void 0;
   const hoverableText = tooltip ? /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(Tooltip, { content: tooltip, children: text }) : text;
   return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
     "td",
     {
       colSpan,
       "data-sticky": sticky,
+      onClick: handleClick,
+      onKeyDown: onClick && activateFromKeyboard(onClick),
+      tabIndex: onClick ? 0 : void 0,
       className: cn(
         "h-10 px-2 py-2 text-center text-xs font-semibold",
         isWrapping ? "whitespace-normal break-words" : "text-ellipsis whitespace-nowrap",
@@ -4357,6 +4374,7 @@ var TableCell = ({
         sticky && backgroundColor && "z-[2]",
         accentColor && "border-l-4",
         cursor && CURSOR_CLASS[cursor],
+        onClick && "cursor-pointer",
         theme && TABLE_CELL_THEME_CLASS[theme],
         className
       ),
@@ -4414,15 +4432,6 @@ var TableFooterCell = ({
   }
 );
 
-// src/ui/components/ui/table/activateFromKeyboard.ts
-var ACTIVATION_KEYS = ["Enter", " "];
-var activateFromKeyboard = (activate) => (event) => {
-  if (event.target !== event.currentTarget) return;
-  if (!ACTIVATION_KEYS.includes(event.key)) return;
-  event.preventDefault();
-  activate();
-};
-
 // src/ui/components/ui/table/TableGroupLabel.tsx
 var import_jsx_runtime53 = require("react/jsx-runtime");
 var TableGroupLabel = ({
@@ -5037,7 +5046,7 @@ var TableStatusCell = ({
   theme,
   width,
   variant
-}) => /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(TableCell, { width, centerContent: true, children: /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(Badge, { size: "l", theme, variant, children }) });
+}) => /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(TableCell, { width, centerContent: true, children: /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(Badge, { size: "l", theme, variant, fullWidth: true, children }) });
 
 // src/ui/components/ui/Popover.tsx
 var RadixPopover4 = __toESM(require("@radix-ui/react-popover"));

package/dist/ui/index.mjs

@@ -4045,6 +4045,15 @@ var TableExpandChevron = ({ isExpanded }) => /* @__PURE__ */ jsx48(
   }
 );
 
+// src/ui/components/ui/table/activateFromKeyboard.ts
+var ACTIVATION_KEYS = ["Enter", " "];
+var activateFromKeyboard = (activate) => (event) => {
+  if (event.target !== event.currentTarget) return;
+  if (!ACTIVATION_KEYS.includes(event.key)) return;
+  event.preventDefault();
+  activate();
+};
+
 // src/ui/components/ui/table/tableCellThemeClass.ts
 var TABLE_CELL_THEME_CLASS = {
   "blue-700": "text-blue-700",
@@ -4088,6 +4097,7 @@ var TableCell = ({
   borderLeft = false,
   colSpan,
   cursor,
+  onClick,
   className,
   wrap = false,
   maxLines,
@@ -4125,12 +4135,19 @@ var TableCell = ({
       children: content
     }
   ) : content;
+  const handleClick = onClick ? (event) => {
+    event.stopPropagation();
+    onClick();
+  } : void 0;
   const hoverableText = tooltip ? /* @__PURE__ */ jsx49(Tooltip, { content: tooltip, children: text }) : text;
   return /* @__PURE__ */ jsx49(
     "td",
     {
       colSpan,
       "data-sticky": sticky,
+      onClick: handleClick,
+      onKeyDown: onClick && activateFromKeyboard(onClick),
+      tabIndex: onClick ? 0 : void 0,
       className: cn(
         "h-10 px-2 py-2 text-center text-xs font-semibold",
         isWrapping ? "whitespace-normal break-words" : "text-ellipsis whitespace-nowrap",
@@ -4143,6 +4160,7 @@ var TableCell = ({
         sticky && backgroundColor && "z-[2]",
         accentColor && "border-l-4",
         cursor && CURSOR_CLASS[cursor],
+        onClick && "cursor-pointer",
         theme && TABLE_CELL_THEME_CLASS[theme],
         className
       ),
@@ -4200,15 +4218,6 @@ var TableFooterCell = ({
   }
 );
 
-// src/ui/components/ui/table/activateFromKeyboard.ts
-var ACTIVATION_KEYS = ["Enter", " "];
-var activateFromKeyboard = (activate) => (event) => {
-  if (event.target !== event.currentTarget) return;
-  if (!ACTIVATION_KEYS.includes(event.key)) return;
-  event.preventDefault();
-  activate();
-};
-
 // src/ui/components/ui/table/TableGroupLabel.tsx
 import { jsx as jsx53, jsxs as jsxs26 } from "react/jsx-runtime";
 var TableGroupLabel = ({
@@ -4830,7 +4839,7 @@ var TableStatusCell = ({
   theme,
   width,
   variant
-}) => /* @__PURE__ */ jsx63(TableCell, { width, centerContent: true, children: /* @__PURE__ */ jsx63(Badge, { size: "l", theme, variant, children }) });
+}) => /* @__PURE__ */ jsx63(TableCell, { width, centerContent: true, children: /* @__PURE__ */ jsx63(Badge, { size: "l", theme, variant, fullWidth: true, children }) });
 
 // src/ui/components/ui/Popover.tsx
 import * as RadixPopover4 from "@radix-ui/react-popover";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "design-zystem",
-  "version": "1.0.449",
+  "version": "1.0.451",
   "description": "A React design system of importable components",
   "main": "dist/index.js",
   "module": "dist/index.mjs",