@stack-spot/citric-react 0.32.0 → 0.33.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -86,39 +86,25 @@ interface ExtraSmartTableProps<T extends Record<string, any>> {
|
|
|
86
86
|
*/
|
|
87
87
|
headless?: boolean;
|
|
88
88
|
/**
|
|
89
|
-
*
|
|
89
|
+
* Making a row clickable is not accessible, i.e. it creates an unfriendly UI for people who rely on assistive technologies.
|
|
90
90
|
*
|
|
91
|
-
*
|
|
92
|
-
*
|
|
93
|
-
*
|
|
91
|
+
* Instead you should place the action in an element inside the row, e.g. an anchor or a button.
|
|
92
|
+
*
|
|
93
|
+
* 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
|
|
94
|
+
* the actual action. This property does exactly this!
|
|
95
|
+
*
|
|
96
|
+
* 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
|
|
97
|
+
* should be triggered when this row is clicked.
|
|
98
|
+
*
|
|
99
|
+
* When this property is set, the row cursor becomes a pointer.
|
|
94
100
|
*
|
|
95
101
|
* @example
|
|
96
102
|
*
|
|
97
103
|
* ```
|
|
98
|
-
*
|
|
99
|
-
* onClick: item => console.log(item),
|
|
100
|
-
* description: 'log the item to the console',
|
|
101
|
-
* }}
|
|
104
|
+
* rowClickElement="a" // the first anchor element inside the row will be triggered when the row is clicked.
|
|
102
105
|
* ```
|
|
103
106
|
*/
|
|
104
|
-
|
|
105
|
-
/**
|
|
106
|
-
* 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
|
|
107
|
-
* second.
|
|
108
|
-
* @param item
|
|
109
|
-
* @param event
|
|
110
|
-
*/
|
|
111
|
-
onClick: (item: T, event: React.MouseEvent<HTMLTableRowElement, MouseEvent>) => void;
|
|
112
|
-
/**
|
|
113
|
-
* 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
|
|
114
|
-
* description.
|
|
115
|
-
*
|
|
116
|
-
* This is required for addressing accessibility.
|
|
117
|
-
*/
|
|
118
|
-
description: string | ((item: T) => string);
|
|
119
|
-
};
|
|
120
|
-
tabIndex?: number;
|
|
121
|
-
'aria-label'?: string;
|
|
107
|
+
rowClickElement?: string;
|
|
122
108
|
}
|
|
123
109
|
export type BaseSmartTableProps<T extends Record<string, any>> = BaseTableProps & ExtraSmartTableProps<T>;
|
|
124
110
|
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
|
|
|
157
143
|
* return <SmartTable data={data} columns={columns} />
|
|
158
144
|
* ```
|
|
159
145
|
*/
|
|
160
|
-
export declare const SmartTable: <T extends Record<string, any>>({ data, keygen, columns, renderAccordion, accordionTrigger, accordionMaxHeight, id,
|
|
146
|
+
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;
|
|
161
147
|
export {};
|
|
162
148
|
//# sourceMappingURL=SmartTable.d.ts.map
|
|
@@ -1 +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
|
|
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;;;;;;;;;;;;;;;;;;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;AAEnH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCG;AACH,eAAO,MAAM,UAAU,GACD,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,6HAE9C,eAAe,CAAC,CAAC,CAAC,4CA+DtB,CAAA"}
|
|
@@ -38,14 +38,14 @@ import { Table, Th, Tr } from './Table.js';
|
|
|
38
38
|
* return <SmartTable data={data} columns={columns} />
|
|
39
39
|
* ```
|
|
40
40
|
*/
|
|
41
|
-
export const SmartTable = withRef(function SmartTable({ data, keygen, columns, renderAccordion, accordionTrigger, accordionMaxHeight, id,
|
|
41
|
+
export const SmartTable = withRef(function SmartTable({ data, keygen, columns, renderAccordion, accordionTrigger, accordionMaxHeight, id, rowClickElement, headless, ...props }) {
|
|
42
42
|
id = useMemo(() => id || `${Math.random()}`, [id]);
|
|
43
43
|
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]);
|
|
44
44
|
const rows = useMemo(() => data.map((item, index) => {
|
|
45
45
|
const key = keygen ? keygen(item) : index;
|
|
46
46
|
const accordionContent = renderAccordion?.(item);
|
|
47
|
-
const row = (_jsxs(Tr, { accordionTrigger: accordionContent ? accordionTrigger : undefined, onClick:
|
|
48
|
-
?
|
|
47
|
+
const row = (_jsxs(Tr, { accordionTrigger: accordionContent ? accordionTrigger : undefined, onClick: rowClickElement
|
|
48
|
+
? e => e.target.querySelector(rowClickElement)?.click()
|
|
49
49
|
: 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));
|
|
50
50
|
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;
|
|
51
51
|
}), [columns, data, !!renderAccordion, accordionTrigger]);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"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;
|
|
1
|
+
{"version":3,"file":"SmartTable.js","sourceRoot":"","sources":["../../src/components/SmartTable.tsx"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -90,39 +90,25 @@ interface ExtraSmartTableProps<T extends Record<string, any>> {
|
|
|
90
90
|
*/
|
|
91
91
|
headless?: boolean,
|
|
92
92
|
/**
|
|
93
|
-
*
|
|
93
|
+
* Making a row clickable is not accessible, i.e. it creates an unfriendly UI for people who rely on assistive technologies.
|
|
94
94
|
*
|
|
95
|
-
*
|
|
96
|
-
*
|
|
97
|
-
*
|
|
95
|
+
* Instead you should place the action in an element inside the row, e.g. an anchor or a button.
|
|
96
|
+
*
|
|
97
|
+
* 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
|
|
98
|
+
* the actual action. This property does exactly this!
|
|
99
|
+
*
|
|
100
|
+
* 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
|
|
101
|
+
* should be triggered when this row is clicked.
|
|
102
|
+
*
|
|
103
|
+
* When this property is set, the row cursor becomes a pointer.
|
|
98
104
|
*
|
|
99
105
|
* @example
|
|
100
106
|
*
|
|
101
107
|
* ```
|
|
102
|
-
*
|
|
103
|
-
* onClick: item => console.log(item),
|
|
104
|
-
* description: 'log the item to the console',
|
|
105
|
-
* }}
|
|
108
|
+
* rowClickElement="a" // the first anchor element inside the row will be triggered when the row is clicked.
|
|
106
109
|
* ```
|
|
107
110
|
*/
|
|
108
|
-
|
|
109
|
-
/**
|
|
110
|
-
* 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
|
|
111
|
-
* second.
|
|
112
|
-
* @param item
|
|
113
|
-
* @param event
|
|
114
|
-
*/
|
|
115
|
-
onClick: (item: T, event: React.MouseEvent<HTMLTableRowElement, MouseEvent>) => void,
|
|
116
|
-
/**
|
|
117
|
-
* 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
|
|
118
|
-
* description.
|
|
119
|
-
*
|
|
120
|
-
* This is required for addressing accessibility.
|
|
121
|
-
*/
|
|
122
|
-
description: string | ((item: T) => string),
|
|
123
|
-
},
|
|
124
|
-
tabIndex?: number,
|
|
125
|
-
'aria-label'?: string,
|
|
111
|
+
rowClickElement?: string,
|
|
126
112
|
}
|
|
127
113
|
|
|
128
114
|
export type BaseSmartTableProps<T extends Record<string, any>> = BaseTableProps & ExtraSmartTableProps<T>
|
|
@@ -166,7 +152,7 @@ export type SmartTableProps<T extends Record<string, any>> = Omit<TableProps, 'c
|
|
|
166
152
|
*/
|
|
167
153
|
export const SmartTable = withRef(
|
|
168
154
|
function SmartTable<T extends Record<string, any>>({
|
|
169
|
-
data, keygen, columns, renderAccordion, accordionTrigger, accordionMaxHeight, id,
|
|
155
|
+
data, keygen, columns, renderAccordion, accordionTrigger, accordionMaxHeight, id, rowClickElement, headless, ...props
|
|
170
156
|
}: SmartTableProps<T>) {
|
|
171
157
|
id = useMemo(() => id || `${Math.random()}`, [id])
|
|
172
158
|
|
|
@@ -187,10 +173,8 @@ export const SmartTable = withRef(
|
|
|
187
173
|
<Tr
|
|
188
174
|
key={key}
|
|
189
175
|
accordionTrigger={accordionContent ? accordionTrigger : undefined}
|
|
190
|
-
onClick={
|
|
191
|
-
|
|
192
|
-
aria-label={rowClick
|
|
193
|
-
? (typeof rowClick.description === 'function' ? rowClick.description(item): rowClick.description)
|
|
176
|
+
onClick={rowClickElement
|
|
177
|
+
? e => ((e.target as HTMLElement).querySelector(rowClickElement) as HTMLElement | null)?.click()
|
|
194
178
|
: undefined
|
|
195
179
|
}
|
|
196
180
|
>
|