@stack-spot/citric-react 0.32.0 → 0.34.0

package/dist/components/Link.d.ts

@@ -14,6 +14,12 @@ export interface BaseLinkProps extends WithColor {
      * @default false
      */
     metadata?: any;
+    /**
+     * Whether or not to underline the link.
+     *
+     * @default true
+     */
+    underline?: boolean;
 }
 export type LinkProps = React.JSX.IntrinsicElements['a'] & BaseLinkProps;
 /**
@@ -22,5 +28,5 @@ export type LinkProps = React.JSX.IntrinsicElements['a'] & BaseLinkProps;
  * Whenever a link is clicked, the function `onClickLink` of the nearest CitricController is called with the event and the value of the
  * prop `metadata`.
  */
-export declare const Link: ({ appearance, color, style, className, children, onClick, metadata, ...props }: LinkProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Link: ({ appearance, color, style, className, children, onClick, metadata, underline, ...props }: LinkProps) => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=Link.d.ts.map

package/dist/components/Link.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Link.d.ts","sourceRoot":"","sources":["../../src/components/Link.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,UAAU,CAAA;AAKpD,MAAM,WAAW,aAAc,SAAQ,SAAS;IAC9C;;;OAGG;IACH,UAAU,CAAC,EAAE,cAAc,CAAC;IAC5B;;;;;;;OAOG;IACH,QAAQ,CAAC,EAAE,GAAG,CAAC;CAChB;AAED,MAAM,MAAM,SAAS,GAAG,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,GAAG,CAAC,GAAG,aAAa,CAAA;AAExE;;;;;GAKG;AACH,eAAO,MAAM,IAAI,mFAA4F,SAAS,4CAepH,CAAA"}
+{"version":3,"file":"Link.d.ts","sourceRoot":"","sources":["../../src/components/Link.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,UAAU,CAAA;AAKpD,MAAM,WAAW,aAAc,SAAQ,SAAS;IAC9C;;;OAGG;IACH,UAAU,CAAC,EAAE,cAAc,CAAC;IAC5B;;;;;;;OAOG;IACH,QAAQ,CAAC,EAAE,GAAG,CAAC;IACf;;;;OAIG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,MAAM,MAAM,SAAS,GAAG,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,GAAG,CAAC,GAAG,aAAa,CAAA;AAExE;;;;;GAKG;AACH,eAAO,MAAM,IAAI,8FAAuG,SAAS,4CAe/H,CAAA"}

package/dist/components/Link.js

@@ -9,11 +9,11 @@ import { asCitricProps, CitricComponent } from './CitricComponent.js';
  * Whenever a link is clicked, the function `onClickLink` of the nearest CitricController is called with the event and the value of the
  * prop `metadata`.
  */
-export const Link = withRef(({ appearance, color, style, className, children, onClick, metadata, ...props }) => {
+export const Link = withRef(({ appearance, color, style, className, children, onClick, metadata, underline, ...props }) => {
     const citric = useCitricController();
     const linkProps = {
         component: 'link',
-        style: applyColor(style, color),
+        style: applyColor({ ...style, textDecoration: underline ? undefined : 'none' }, color),
         className: applyTextAppearance(className, appearance),
         onClick: (e) => {
             onClick?.(e);

package/dist/components/Link.js.map

@@ -1 +1 @@
-{"version":3,"file":"Link.js","sourceRoot":"","sources":["../../src/components/Link.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAA;AAEtD,OAAO,EAAE,UAAU,EAAE,mBAAmB,EAAE,MAAM,cAAc,CAAA;AAC9D,OAAO,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAA;AACxC,OAAO,EAAE,aAAa,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAA;AAqBlE;;;;;GAKG;AACH,MAAM,CAAC,MAAM,IAAI,GAAG,OAAO,CAAC,CAAC,EAAE,UAAU,EAAE,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,QAAQ,EAAE,OAAO,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAa,EAAE,EAAE;IACxH,MAAM,MAAM,GAAG,mBAAmB,EAAE,CAAA;IACpC,MAAM,SAAS,GAAG;QAChB,SAAS,EAAE,MAAM;QACjB,KAAK,EAAE,UAAU,CAAC,KAAK,EAAE,KAAK,CAAC;QAC/B,SAAS,EAAE,mBAAmB,CAAC,SAAS,EAAE,UAAU,CAAC;QACrD,OAAO,EAAE,CAAC,CAAsC,EAAE,EAAE;YAClD,OAAO,EAAE,CAAC,CAAC,CAAC,CAAA;YACZ,MAAM,EAAE,WAAW,EAAE,CAAC,CAAC,EAAE,QAAQ,IAAI,KAAK,CAAC,CAAA;QAC7C,CAAC;QACD,GAAG,KAAK;KACA,CAAA;IACV,OAAO,MAAM,EAAE,UAAU;QACvB,CAAC,CAAC,MAAM,CAAC,UAAU,CAAC,aAAa,CAAC,EAAE,GAAG,SAAS,EAAE,QAAQ,EAAE,CAAC,CAAC;QAC9D,CAAC,CAAC,KAAC,eAAe,IAAC,GAAG,EAAC,GAAG,KAAK,SAAS,YAAG,QAAQ,GAAmB,CAAA;AAC1E,CAAC,CAAC,CAAA"}
+{"version":3,"file":"Link.js","sourceRoot":"","sources":["../../src/components/Link.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAA;AAEtD,OAAO,EAAE,UAAU,EAAE,mBAAmB,EAAE,MAAM,cAAc,CAAA;AAC9D,OAAO,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAA;AACxC,OAAO,EAAE,aAAa,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAA;AA2BlE;;;;;GAKG;AACH,MAAM,CAAC,MAAM,IAAI,GAAG,OAAO,CAAC,CAAC,EAAE,UAAU,EAAE,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,QAAQ,EAAE,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,KAAK,EAAa,EAAE,EAAE;IACnI,MAAM,MAAM,GAAG,mBAAmB,EAAE,CAAA;IACpC,MAAM,SAAS,GAAG;QAChB,SAAS,EAAE,MAAM;QACjB,KAAK,EAAE,UAAU,CAAC,EAAE,GAAG,KAAK,EAAE,cAAc,EAAE,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,MAAM,EAAE,EAAE,KAAK,CAAC;QACtF,SAAS,EAAE,mBAAmB,CAAC,SAAS,EAAE,UAAU,CAAC;QACrD,OAAO,EAAE,CAAC,CAAsC,EAAE,EAAE;YAClD,OAAO,EAAE,CAAC,CAAC,CAAC,CAAA;YACZ,MAAM,EAAE,WAAW,EAAE,CAAC,CAAC,EAAE,QAAQ,IAAI,KAAK,CAAC,CAAA;QAC7C,CAAC;QACD,GAAG,KAAK;KACA,CAAA;IACV,OAAO,MAAM,EAAE,UAAU;QACvB,CAAC,CAAC,MAAM,CAAC,UAAU,CAAC,aAAa,CAAC,EAAE,GAAG,SAAS,EAAE,QAAQ,EAAE,CAAC,CAAC;QAC9D,CAAC,CAAC,KAAC,eAAe,IAAC,GAAG,EAAC,GAAG,KAAK,SAAS,YAAG,QAAQ,GAAmB,CAAA;AAC1E,CAAC,CAAC,CAAA"}

package/dist/components/SmartTable.d.ts

@@ -86,39 +86,25 @@ interface ExtraSmartTableProps<T extends Record<string, any>> {
      */
     headless?: boolean;
     /**
-     * Adds an action to a click on a row.
+     * Making a row clickable is not accessible, i.e. it creates an unfriendly UI for people who rely on assistive technologies.
      *
-     * If this property is set, then:
-     * 1. the row's cursor becomes "pointer";
-     * 2. the row becomes focusable (tabindex = 0).
+     * Instead you should place the action in an element inside the row, e.g. an anchor or a button.
+     *
+     * For users who don't rely on assistive technologies we may still want the click on the row to mimic the behavior of the element with
+     * the actual action. This property does exactly this!
+     *
+     * The value of this property must be a CSS selector relative to this row, it must refer to the element with the click listener that
+     * should be triggered when this row is clicked.
+     *
+     * When this property is set, the row cursor becomes a pointer.
      *
      * @example
      *
      * ```
-     * rowClick={{
-     *   onClick: item => console.log(item),
-     *   description: 'log the item to the console',
-     * }}
+     * rowClickElement="a" // the first anchor element inside the row will be triggered when the row is clicked.
      * ```
      */
-    rowClick?: {
-        /**
-         * Function to run when the row is clicked. Receives the item corresponding to the row as the first parameter and the click event as the
-         * second.
-         * @param item
-         * @param event
-         */
-        onClick: (item: T, event: React.MouseEvent<HTMLTableRowElement, MouseEvent>) => void;
-        /**
-         * A description of the action clicking the row does. Can be either a static string or a function that receives the item and returns the
-         * description.
-         *
-         * This is required for addressing accessibility.
-         */
-        description: string | ((item: T) => string);
-    };
-    tabIndex?: number;
-    'aria-label'?: string;
+    rowClickElement?: string;
 }
 export type BaseSmartTableProps<T extends Record<string, any>> = BaseTableProps & ExtraSmartTableProps<T>;
 export type SmartTableProps<T extends Record<string, any>> = Omit<TableProps, 'children'> & ExtraSmartTableProps<T>;
@@ -157,6 +143,6 @@ export type SmartTableProps<T extends Record<string, any>> = Omit<TableProps, 'c
  * return <SmartTable data={data} columns={columns} />
  * ```
  */
-export declare const SmartTable: <T extends Record<string, any>>({ data, keygen, columns, renderAccordion, accordionTrigger, accordionMaxHeight, id, rowClick, headless, ...props }: SmartTableProps<T>) => import("react/jsx-runtime").JSX.Element;
+export declare const SmartTable: <T extends Record<string, any>>({ data, keygen, columns, renderAccordion, accordionTrigger, accordionMaxHeight, id, rowClickElement, headless, ...props }: SmartTableProps<T>) => import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=SmartTable.d.ts.map

package/dist/components/SmartTable.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SmartTable.d.ts","sourceRoot":"","sources":["../../src/components/SmartTable.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,cAAc,EAAE,gBAAgB,EAAS,UAAU,EAAU,MAAM,SAAS,CAAA;AAErF,MAAM,MAAM,WAAW,CAAC,CAAC,IAAI;IAC3B;;OAEG;IACH,GAAG,EAAE,MAAM,CAAC;IACZ;;;;OAIG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB;;;;;;;OAOG;IACH,MAAM,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,KAAK,CAAC,SAAS,CAAC;IACtC;;OAEG;IACH,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,gBAAgB,GAAG,SAAS,KAAK,IAAI,CAAC;IACvD;;;;OAIG;IACH,SAAS,CAAC,EAAE,gBAAgB,CAAC;IAC7B;;OAEG;IACH,EAAE,CAAC,EAAE,IAAI,CAAC,GAAG,CAAC,iBAAiB,CAAC,IAAI,CAAC,EAAE,UAAU,CAAC,CAAC;IACnD;;OAEG;IACH,EAAE,CAAC,EAAE,IAAI,CAAC,GAAG,CAAC,iBAAiB,CAAC,IAAI,CAAC,EAAE,UAAU,CAAC,CAAC;CACpD,CAAA;AAED,UAAU,oBAAoB,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC;IAC1D;;OAEG;IACH,IAAI,EAAE,CAAC,EAAE,CAAC;IACV;;;;OAIG;IACH,MAAM,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,KAAK,CAAC,GAAG,CAAC;IAChC;;;;OAIG;IACH,OAAO,EAAE,WAAW,CAAC,CAAC,CAAC,EAAE,CAAC;IAC1B;;;;;;;;OAQG;IACH,eAAe,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,KAAK,CAAC,SAAS,CAAC;IAC/C;;;;;;OAMG;IACH,gBAAgB,CAAC,EAAE,QAAQ,GAAG,KAAK,CAAC;IACpC;;;;OAIG;IACH,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;;;;;;;;;;;;OAeG;IACH,QAAQ,CAAC,EAAE;QACT;;;;;WAKG;QACH,OAAO,EAAE,CAAC,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,mBAAmB,EAAE,UAAU,CAAC,KAAK,IAAI,CAAC;QACrF;;;;;WAKG;QACH,WAAW,EAAE,MAAM,GAAG,CAAC,CAAC,IAAI,EAAE,CAAC,KAAK,MAAM,CAAC,CAAC;KAC7C,CAAC;IACF,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED,MAAM,MAAM,mBAAmB,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,IAAI,cAAc,GAAG,oBAAoB,CAAC,CAAC,CAAC,CAAA;AAEzG,MAAM,MAAM,eAAe,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,IAAI,IAAI,CAAC,UAAU,EAAE,UAAU,CAAC,GAAG,oBAAoB,CAAC,CAAC,CAAC,CAAA;AAEnH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCG;AACH,eAAO,MAAM,UAAU,GACD,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,sHAE9C,eAAe,CAAC,CAAC,CAAC,4CAiEtB,CAAA"}
+{"version":3,"file":"SmartTable.d.ts","sourceRoot":"","sources":["../../src/components/SmartTable.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,cAAc,EAAE,gBAAgB,EAAS,UAAU,EAAU,MAAM,SAAS,CAAA;AAErF,MAAM,MAAM,WAAW,CAAC,CAAC,IAAI;IAC3B;;OAEG;IACH,GAAG,EAAE,MAAM,CAAC;IACZ;;;;OAIG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB;;;;;;;OAOG;IACH,MAAM,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,KAAK,CAAC,SAAS,CAAC;IACtC;;OAEG;IACH,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,gBAAgB,GAAG,SAAS,KAAK,IAAI,CAAC;IACvD;;;;OAIG;IACH,SAAS,CAAC,EAAE,gBAAgB,CAAC;IAC7B;;OAEG;IACH,EAAE,CAAC,EAAE,IAAI,CAAC,GAAG,CAAC,iBAAiB,CAAC,IAAI,CAAC,EAAE,UAAU,CAAC,CAAC;IACnD;;OAEG;IACH,EAAE,CAAC,EAAE,IAAI,CAAC,GAAG,CAAC,iBAAiB,CAAC,IAAI,CAAC,EAAE,UAAU,CAAC,CAAC;CACpD,CAAA;AAED,UAAU,oBAAoB,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC;IAC1D;;OAEG;IACH,IAAI,EAAE,CAAC,EAAE,CAAC;IACV;;;;OAIG;IACH,MAAM,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,KAAK,CAAC,GAAG,CAAC;IAChC;;;;OAIG;IACH,OAAO,EAAE,WAAW,CAAC,CAAC,CAAC,EAAE,CAAC;IAC1B;;;;;;;;OAQG;IACH,eAAe,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,KAAK,CAAC,SAAS,CAAC;IAC/C;;;;;;OAMG;IACH,gBAAgB,CAAC,EAAE,QAAQ,GAAG,KAAK,CAAC;IACpC;;;;OAIG;IACH,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;;;;;;;;;;;;;;;OAkBG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B;AAED,MAAM,MAAM,mBAAmB,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,IAAI,cAAc,GAAG,oBAAoB,CAAC,CAAC,CAAC,CAAA;AAEzG,MAAM,MAAM,eAAe,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,IAAI,IAAI,CAAC,UAAU,EAAE,UAAU,CAAC,GAAG,oBAAoB,CAAC,CAAC,CAAC,CAAA;AAanH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCG;AACH,eAAO,MAAM,UAAU,GACD,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,6HAE9C,eAAe,CAAC,CAAC,CAAC,4CA4DtB,CAAA"}

package/dist/components/SmartTable.js

@@ -3,6 +3,17 @@ import { createElement as _createElement } from "react";
 import { useMemo } from 'react';
 import { withRef } from '../utils/react.js';
 import { Table, Th, Tr } from './Table.js';
+function createRowClickListener(elementQuerySelector) {
+    return (event) => {
+        const target = event.target instanceof HTMLElement ? event.target : undefined;
+        const row = target instanceof HTMLTableRowElement ? target : target?.closest('tr');
+        if (row) {
+            const element = row.querySelector(elementQuerySelector);
+            if (element instanceof HTMLElement)
+                element.click();
+        }
+    };
+}
 /**
  * Renders a table. Always prefer using this component over the raw Table component.
  *
@@ -38,15 +49,13 @@ import { Table, Th, Tr } from './Table.js';
  * return <SmartTable data={data} columns={columns} />
  * ```
  */
-export const SmartTable = withRef(function SmartTable({ data, keygen, columns, renderAccordion, accordionTrigger, accordionMaxHeight, id, rowClick, headless, ...props }) {
+export const SmartTable = withRef(function SmartTable({ data, keygen, columns, renderAccordion, accordionTrigger, accordionMaxHeight, id, rowClickElement, headless, ...props }) {
     id = useMemo(() => id || `${Math.random()}`, [id]);
     const headers = useMemo(() => headless ? [] : columns.map((c) => (_createElement(Th, { ...c.th, key: c.key, onSort: c.onSort, direction: c.direction, tabIndex: c.onSort ? 0 : undefined }, c.label ?? c.key))), [columns, headless]);
     const rows = useMemo(() => data.map((item, index) => {
         const key = keygen ? keygen(item) : index;
         const accordionContent = renderAccordion?.(item);
-        const row = (_jsxs(Tr, { accordionTrigger: accordionContent ? accordionTrigger : undefined, onClick: rowClick ? e => rowClick.onClick(item, e) : undefined, tabIndex: rowClick ? 0 : undefined, "aria-label": rowClick
-                ? (typeof rowClick.description === 'function' ? rowClick.description(item) : rowClick.description)
-                : undefined, children: [columns.map(c => _createElement("td", { ...c.td, key: c.key }, c.render ? c.render(item) : (item[c.key] || ''))), renderAccordion && (_jsx("td", { children: accordionContent && (_jsx("input", { type: "checkbox", "aria-controls": `${id}-${key}`, onKeyDown: e => e.key === 'Enter' && e.target instanceof HTMLElement && e.target.click() })) }))] }, key));
+        const row = (_jsxs(Tr, { accordionTrigger: accordionContent ? accordionTrigger : undefined, onClick: rowClickElement ? createRowClickListener(rowClickElement) : undefined, children: [columns.map(c => _createElement("td", { ...c.td, key: c.key }, c.render ? c.render(item) : (item[c.key] || ''))), renderAccordion && (_jsx("td", { children: accordionContent && (_jsx("input", { type: "checkbox", "aria-controls": `${id}-${key}`, onKeyDown: e => e.key === 'Enter' && e.target instanceof HTMLElement && e.target.click() })) }))] }, key));
         return renderAccordion ? (_jsxs("tbody", { children: [row, _jsx(Tr, { id: `${id}-${key}`, accordion: true, accordionMaxHeight: accordionMaxHeight, children: _jsx("td", { colSpan: columns.length + 1, children: _jsx("div", { children: accordionContent }) }) })] }, `${key}-group`)) : row;
     }), [columns, data, !!renderAccordion, accordionTrigger]);
     return (_jsxs(Table, { id: id, accordionRows: !!renderAccordion, ...props, children: [!headless && _jsx("thead", { children: _jsxs("tr", { children: [headers, renderAccordion && _jsx("th", {})] }) }), renderAccordion ? rows : _jsx("tbody", { children: rows })] }));

package/dist/components/SmartTable.js.map

@@ -1 +1 @@
-{"version":3,"file":"SmartTable.js","sourceRoot":"","sources":["../../src/components/SmartTable.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"SmartTable.js","sourceRoot":"","sources":["../../src/components/SmartTable.tsx"],"names":[],"mappings":";;AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,OAAO,CAAA;AAC/B,OAAO,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAA;AACxC,OAAO,EAAoC,KAAK,EAAc,EAAE,EAAE,EAAE,EAAE,MAAM,SAAS,CAAA;AAmHrF,SAAS,sBAAsB,CAAC,oBAA4B;IAC1D,OAAO,CAAC,KAAuB,EAAE,EAAE;QACjC,MAAM,MAAM,GAAG,KAAK,CAAC,MAAM,YAAY,WAAW,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,CAAA;QAC7E,MAAM,GAAG,GAAG,MAAM,YAAY,mBAAmB,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,EAAE,OAAO,CAAC,IAAI,CAAC,CAAA;QAClF,IAAI,GAAG,EAAE,CAAC;YACR,MAAM,OAAO,GAAG,GAAG,CAAC,aAAa,CAAC,oBAAoB,CAAC,CAAA;YACvD,IAAI,OAAO,YAAY,WAAW;gBAAE,OAAO,CAAC,KAAK,EAAE,CAAA;QACrD,CAAC;IACH,CAAC,CAAA;AACH,CAAC;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG,OAAO,CAC/B,SAAS,UAAU,CAAgC,EACjD,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,eAAe,EAAE,gBAAgB,EAAE,kBAAkB,EAAE,EAAE,EAAE,eAAe,EAAE,QAAQ,EAAE,GAAG,KAAK,EAClG;IACnB,EAAE,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC,MAAM,EAAE,EAAE,EAAE,CAAC,EAAE,CAAC,CAAC,CAAA;IAElD,MAAM,OAAO,GAAG,OAAO,CACrB,GAAG,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CACvC,eAAC,EAAE,OAAK,CAAC,CAAC,EAAE,EAAE,GAAG,EAAE,CAAC,CAAC,GAAG,EAAE,MAAM,EAAE,CAAC,CAAC,MAAM,EAAE,SAAS,EAAE,CAAC,CAAC,SAAS,EAAE,QAAQ,EAAE,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,SAAS,IACnG,CAAC,CAAC,KAAK,IAAI,CAAC,CAAC,GAAG,CACd,CACN,CAAC,EACF,CAAC,OAAO,EAAE,QAAQ,CAAC,CACpB,CAAA;IAED,MAAM,IAAI,GAAG,OAAO,CAClB,GAAG,EAAE,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE;QAC7B,MAAM,GAAG,GAAG,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,KAAK,CAAA;QACzC,MAAM,gBAAgB,GAAG,eAAe,EAAE,CAAC,IAAI,CAAC,CAAA;QAChD,MAAM,GAAG,GAAG,CACV,MAAC,EAAE,IAED,gBAAgB,EAAE,gBAAgB,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,SAAS,EACjE,OAAO,EAAE,eAAe,CAAC,CAAC,CAAC,sBAAsB,CAAC,eAAe,CAAC,CAAC,CAAC,CAAC,SAAS,aAE7E,OAAO,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,0BAAQ,CAAC,CAAC,EAAE,EAAE,GAAG,EAAE,CAAC,CAAC,GAAG,IAAG,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,GAAG,CAAC,IAAI,EAAE,CAAC,CAAM,CAAC,EAClG,eAAe,IAAI,CAClB,uBACG,gBAAgB,IAAI,CACnB,gBACE,IAAI,EAAC,UAAU,mBACA,GAAG,EAAE,IAAI,GAAG,EAAE,EAC7B,SAAS,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,GAAG,KAAK,OAAO,IAAI,CAAC,CAAC,MAAM,YAAY,WAAW,IAAI,CAAC,CAAC,MAAM,CAAC,KAAK,EAAE,GACxF,CACH,GACE,CACN,KAfI,GAAG,CAgBL,CACN,CAAA;QACD,OAAO,eAAe,CAAC,CAAC,CAAC,CACvB,4BACG,GAAG,EACJ,KAAC,EAAE,IAAC,EAAE,EAAE,GAAG,EAAE,IAAI,GAAG,EAAE,EAAE,SAAS,QAAC,kBAAkB,EAAE,kBAAkB,YACtE,aAAI,OAAO,EAAE,OAAO,CAAC,MAAM,GAAG,CAAC,YAAE,wBAAM,gBAAgB,GAAO,GAAK,GAChE,KAJK,GAAG,GAAG,QAAQ,CAKlB,CACT,CAAC,CAAC,CAAC,GAAG,CAAA;IACT,CAAC,CAAC,EACF,CAAC,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC,eAAe,EAAE,gBAAgB,CAAC,CACrD,CAAA;IAED,OAAO,CACL,MAAC,KAAK,IAAC,EAAE,EAAE,EAAE,EAAE,aAAa,EAAE,CAAC,CAAC,eAAe,KAAM,KAAK,aACvD,CAAC,QAAQ,IAAI,0BACZ,yBACG,OAAO,EACP,eAAe,IAAI,cAAS,IAC1B,GACC,EACP,eAAe,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,0BAAQ,IAAI,GAAS,IACzC,CACT,CAAA;AACH,CAAC,CACF,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stack-spot/citric-react",
-  "version": "0.32.0",
+  "version": "0.34.0",
   "author": "StackSpot",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",

package/src/components/Link.tsx

@@ -19,6 +19,12 @@ export interface BaseLinkProps extends WithColor {
    * @default false
    */
   metadata?: any,
+  /**
+   * Whether or not to underline the link.
+   * 
+   * @default true
+   */
+  underline?: boolean,
 }
 
 export type LinkProps = React.JSX.IntrinsicElements['a'] & BaseLinkProps
@@ -29,11 +35,11 @@ export type LinkProps = React.JSX.IntrinsicElements['a'] & BaseLinkProps
  * Whenever a link is clicked, the function `onClickLink` of the nearest CitricController is called with the event and the value of the
  * prop `metadata`.
  */
-export const Link = withRef(({ appearance, color, style, className, children, onClick, metadata, ...props }: LinkProps) => {
+export const Link = withRef(({ appearance, color, style, className, children, onClick, metadata, underline, ...props }: LinkProps) => {
   const citric = useCitricController()
   const linkProps = {
     component: 'link',
-    style: applyColor(style, color),
+    style: applyColor({ ...style, textDecoration: underline ? undefined : 'none' }, color),
     className: applyTextAppearance(className, appearance),
     onClick: (e: React.MouseEvent<HTMLAnchorElement>) => {
       onClick?.(e)

package/src/components/SmartTable.tsx

@@ -90,45 +90,42 @@ interface ExtraSmartTableProps<T extends Record<string, any>> {
    */
   headless?: boolean,
   /**
-   * Adds an action to a click on a row.
+   * Making a row clickable is not accessible, i.e. it creates an unfriendly UI for people who rely on assistive technologies.
    * 
-   * If this property is set, then:
-   * 1. the row's cursor becomes "pointer";
-   * 2. the row becomes focusable (tabindex = 0).
+   * Instead you should place the action in an element inside the row, e.g. an anchor or a button.
+   * 
+   * For users who don't rely on assistive technologies we may still want the click on the row to mimic the behavior of the element with
+   * the actual action. This property does exactly this!
+   * 
+   * The value of this property must be a CSS selector relative to this row, it must refer to the element with the click listener that
+   * should be triggered when this row is clicked.
+   * 
+   * When this property is set, the row cursor becomes a pointer.
    * 
    * @example
    * 
    * ```
-   * rowClick={{
-   *   onClick: item => console.log(item),
-   *   description: 'log the item to the console',
-   * }}
+   * rowClickElement="a" // the first anchor element inside the row will be triggered when the row is clicked.
    * ```
    */
-  rowClick?: {
-    /**
-     * Function to run when the row is clicked. Receives the item corresponding to the row as the first parameter and the click event as the
-     * second.
-     * @param item 
-     * @param event 
-     */
-    onClick: (item: T, event: React.MouseEvent<HTMLTableRowElement, MouseEvent>) => void,
-    /**
-     * A description of the action clicking the row does. Can be either a static string or a function that receives the item and returns the
-     * description.
-     * 
-     * This is required for addressing accessibility.
-     */
-    description: string | ((item: T) => string),
-  },
-  tabIndex?: number,
-  'aria-label'?: string,
+  rowClickElement?: string,
 }
 
 export type BaseSmartTableProps<T extends Record<string, any>> = BaseTableProps & ExtraSmartTableProps<T>
 
 export type SmartTableProps<T extends Record<string, any>> = Omit<TableProps, 'children'> & ExtraSmartTableProps<T>
 
+function createRowClickListener(elementQuerySelector: string) {
+  return (event: React.MouseEvent) => {
+    const target = event.target instanceof HTMLElement ? event.target : undefined
+    const row = target instanceof HTMLTableRowElement ? target : target?.closest('tr')
+    if (row) {
+      const element = row.querySelector(elementQuerySelector)
+      if (element instanceof HTMLElement) element.click()
+    }
+  }
+}
+
 /**
  * Renders a table. Always prefer using this component over the raw Table component.
  * 
@@ -166,7 +163,7 @@ export type SmartTableProps<T extends Record<string, any>> = Omit<TableProps, 'c
  */
 export const SmartTable = withRef(
   function SmartTable<T extends Record<string, any>>({
-    data, keygen, columns, renderAccordion, accordionTrigger, accordionMaxHeight, id, rowClick, headless, ...props
+    data, keygen, columns, renderAccordion, accordionTrigger, accordionMaxHeight, id, rowClickElement, headless, ...props
   }: SmartTableProps<T>) {
     id = useMemo(() => id || `${Math.random()}`, [id])
 
@@ -187,12 +184,7 @@ export const SmartTable = withRef(
           <Tr
             key={key}
             accordionTrigger={accordionContent ? accordionTrigger : undefined}
-            onClick={rowClick ? e => rowClick.onClick(item, e) : undefined}
-            tabIndex={rowClick ? 0 : undefined}
-            aria-label={rowClick
-              ? (typeof rowClick.description === 'function' ? rowClick.description(item): rowClick.description)
-              : undefined
-            }
+            onClick={rowClickElement ? createRowClickListener(rowClickElement) : undefined}
           >
             {columns.map(c => <td {...c.td} key={c.key}>{c.render ? c.render(item) : (item[c.key] || '')}</td>)}
             {renderAccordion && (