@auth0/quantum-product 2.8.3 → 2.9.1

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.
Files changed (8) hide show
  1. package/data-table/data-table-row.d.ts +2 -0
  2. package/data-table/data-table-row.js +17 -3
  3. package/data-table/data-table.d.ts +5 -1
  4. package/data-table/data-table.js +3 -2
  5. package/esm/data-table/data-table-row.js +17 -3
  6. package/esm/data-table/data-table.js +3 -2
  7. package/package.json +2 -2
  8. package/panel/panel/panel.d.ts +1 -1
package/data-table/data-table-row.d.ts CHANGED
@@ -6,6 +6,8 @@ export interface IDataTableRowProps<ItemType extends object = any> extends ITabl
6
6
  item: ItemType;
7
7
  /** index of the item */
8
8
  index: number;
9
+ /** Show row highlight on hover */
10
+ hover?: boolean;
9
11
  /** column information */
10
12
  columns: Array<IDataTableColumn<ItemType> | null | undefined | false>;
11
13
  /** hide the header to the table */
package/data-table/data-table-row.js CHANGED
@@ -83,12 +83,14 @@ var table_1 = require("../table");
83
83
  var box_1 = require("../box");
84
84
  var Row = (0, styled_1.styled)(table_1.TableRow, { name: 'QuantumDataTableRow', slot: 'row' })(function (_a) {
85
85
  var ownerState = _a.ownerState, theme = _a.theme;
86
- return (__assign(__assign({}, (ownerState.expandable && {
86
+ return (__assign(__assign(__assign({}, (ownerState.expandable && {
87
87
  '& > *': {
88
88
  borderBottom: 'none',
89
89
  },
90
90
  })), (ownerState.expanded && {
91
91
  backgroundColor: (0, color_manipulator_1.fade)(theme.tokens.color_bg_interactive_hover, 0.5),
92
+ })), (ownerState.clickable && {
93
+ cursor: 'pointer',
92
94
  })));
93
95
  });
94
96
  var isRenderableColumn = function (column) {
@@ -99,11 +101,20 @@ function DataTableRow(props) {
99
101
  var _a = __read(React.useState(false), 2), isExpanded = _a[0], setIsExpanded = _a[1];
100
102
  var item = props.item, index = props.index, columns = props.columns, onRowClick = props.onRowClick, renderItemDetails = props.renderItemDetails, componentRenderer = props.componentRenderer, hover = props.hover, hideHeader = props.hideHeader, rowProps = __rest(props, ["item", "index", "columns", "onRowClick", "renderItemDetails", "componentRenderer", "hover", "hideHeader"]);
101
103
  var detailsContent = null;
104
+ var isClickable = !!onRowClick;
105
+ // If hover is explicitly passed, respect it. Otherwise, enable hover when clickable.
106
+ var showHover = hover !== undefined ? hover : isClickable;
102
107
  if (renderItemDetails) {
103
108
  detailsContent = renderItemDetails(item);
104
109
  }
110
+ var handleRowClick = function (event) {
111
+ if (onRowClick) {
112
+ onRowClick(event, { item: item, index: index });
113
+ }
114
+ };
115
+ var rowClickProps = isClickable ? { onClick: handleRowClick } : {};
105
116
  return (React.createElement(React.Fragment, null,
106
- React.createElement(Row, __assign({ component: componentRenderer ? componentRenderer(item, index) : 'tr', hover: hover, ownerState: { expandable: !!detailsContent, expanded: isExpanded } }, rowProps),
117
+ React.createElement(Row, __assign({}, rowProps, { component: componentRenderer ? componentRenderer(item, index) : 'tr', hover: showHover, ownerState: { expandable: !!detailsContent, expanded: isExpanded, clickable: isClickable } }, rowClickProps),
107
118
  columns.map(function (column, colIndex) {
108
119
  if (!column) {
109
120
  return null;
@@ -117,7 +128,10 @@ function DataTableRow(props) {
117
128
  }
118
129
  return hideHeader ? (React.createElement(table_1.TableCell, { width: column.width, key: colIndex, align: column.align, padding: column.padding }, content)) : (React.createElement(table_1.TableCell, { key: colIndex, align: column.align, padding: column.padding }, content));
119
130
  }),
120
- !!renderItemDetails && (React.createElement(table_1.TableCell, { padding: "checkbox", align: "right" }, !!detailsContent && (React.createElement(icon_button_1.IconButton, { onClick: function () { return setIsExpanded(!isExpanded); }, variant: "link", label: isExpanded ? 'Collapse' : 'Expand' }, isExpanded ? React.createElement(icon_1.ChevronUpIcon, null) : React.createElement(icon_1.ChevronDownIcon, null)))))),
131
+ !!renderItemDetails && (React.createElement(table_1.TableCell, { padding: "checkbox", align: "right" }, !!detailsContent && (React.createElement(icon_button_1.IconButton, { onClick: function (event) {
132
+ event.stopPropagation();
133
+ setIsExpanded(!isExpanded);
134
+ }, variant: "link", label: isExpanded ? 'Collapse' : 'Expand' }, isExpanded ? React.createElement(icon_1.ChevronUpIcon, null) : React.createElement(icon_1.ChevronDownIcon, null)))))),
121
135
  !!detailsContent && (React.createElement(Row, { ownerState: { expanded: true } },
122
136
  React.createElement(table_1.TableCell, { padding: "none", colSpan: columns.length + 1 },
123
137
  React.createElement(collapse_1.Collapse, { in: isExpanded, timeout: "auto", unmountOnExit: true },
package/data-table/data-table.d.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  import * as React from 'react';
2
- import { ITableContainerProps } from '../table';
2
+ import { ITableContainerProps, ITableRowProps } from '../table';
3
3
  import { IDataTableRowProps } from './data-table-row';
4
4
  import { DataTableSortDirectionType, IDataTableColumn, UnionOrString } from './data-table-types';
5
5
  export interface IDataTableProps<ItemType extends object = any> extends ITableContainerProps, Pick<IDataTableRowProps<ItemType>, 'onRowClick' | 'renderItemDetails' | 'hideHeader'> {
@@ -32,6 +32,10 @@ export interface IDataTableProps<ItemType extends object = any> extends ITableCo
32
32
  * Used to override default row component with custom behavior (drag/drop)
33
33
  */
34
34
  rowRenderer?(item: ItemType, index: number): React.ElementType<HTMLTableRowElement>;
35
+ /**
36
+ * Used to customize row props (style, className, etc.) per item.
37
+ */
38
+ getRowProps?(item: ItemType, index: number): ITableRowProps;
35
39
  }
36
40
  declare const DataTableImpl: <ItemType extends object = any>(props: IDataTableProps<ItemType>, ref: React.Ref<HTMLDivElement>) => React.JSX.Element;
37
41
  export declare const DataTable: typeof DataTableImpl;
package/data-table/data-table.js CHANGED
@@ -64,7 +64,7 @@ var isSortableColumn = function (column) {
64
64
  return !!column.sortable;
65
65
  };
66
66
  var DataTableImpl = function (props, ref) {
67
- var items = props.items, hover = props.hover, columns = props.columns, onRowClick = props.onRowClick, onSort = props.onSort, sortDirection = props.sortDirection, sortOn = props.sortOn, _a = props.emptyMessage, emptyMessage = _a === void 0 ? 'There are no items to display.' : _a, _b = props.isLoading, isLoading = _b === void 0 ? false : _b, _c = props.hideHeader, hideHeader = _c === void 0 ? false : _c, renderItemDetails = props.renderItemDetails, rowRenderer = props.rowRenderer, _d = props.keyExtractor, keyExtractor = _d === void 0 ? function (_item, index) { return index; } : _d, containerProps = __rest(props, ["items", "hover", "columns", "onRowClick", "onSort", "sortDirection", "sortOn", "emptyMessage", "isLoading", "hideHeader", "renderItemDetails", "rowRenderer", "keyExtractor"]);
67
+ var items = props.items, hover = props.hover, columns = props.columns, onRowClick = props.onRowClick, onSort = props.onSort, sortDirection = props.sortDirection, sortOn = props.sortOn, _a = props.emptyMessage, emptyMessage = _a === void 0 ? 'There are no items to display.' : _a, _b = props.isLoading, isLoading = _b === void 0 ? false : _b, _c = props.hideHeader, hideHeader = _c === void 0 ? false : _c, renderItemDetails = props.renderItemDetails, rowRenderer = props.rowRenderer, _d = props.keyExtractor, keyExtractor = _d === void 0 ? function (_item, index) { return index; } : _d, getRowProps = props.getRowProps, containerProps = __rest(props, ["items", "hover", "columns", "onRowClick", "onSort", "sortDirection", "sortOn", "emptyMessage", "isLoading", "hideHeader", "renderItemDetails", "rowRenderer", "keyExtractor", "getRowProps"]);
68
68
  var showEmptyState = !isLoading && !items.length;
69
69
  return (React.createElement(table_1.TableContainer, __assign({}, containerProps, { ref: ref }),
70
70
  React.createElement(table_1.Table, null,
@@ -82,7 +82,8 @@ var DataTableImpl = function (props, ref) {
82
82
  }),
83
83
  !!renderItemDetails && React.createElement(table_1.TableCell, null)))),
84
84
  React.createElement(table_1.TableBody, null, props.items.map(function (item, index) {
85
- return (React.createElement(data_table_row_1.DataTableRow, { hideHeader: hideHeader, hover: hover, columns: columns, key: keyExtractor(item, index), item: item, index: index, componentRenderer: rowRenderer, onRowClick: onRowClick, renderItemDetails: renderItemDetails }));
85
+ var rowProps = getRowProps ? getRowProps(item, index) : undefined;
86
+ return (React.createElement(data_table_row_1.DataTableRow, __assign({ hideHeader: hideHeader, hover: hover, columns: columns, key: keyExtractor(item, index), item: item, index: index, componentRenderer: rowRenderer, onRowClick: onRowClick, renderItemDetails: renderItemDetails }, rowProps)));
86
87
  }))),
87
88
  isLoading && React.createElement(table_1.TableLoadingState, { items: items }),
88
89
  showEmptyState && (React.createElement(table_1.TableEmptyState, null,
package/esm/data-table/data-table-row.js CHANGED
@@ -46,12 +46,14 @@ import { TableCell, TableRow } from '../table';
46
46
  import { Box } from '../box';
47
47
  var Row = styled(TableRow, { name: 'QuantumDataTableRow', slot: 'row' })(function (_a) {
48
48
  var ownerState = _a.ownerState, theme = _a.theme;
49
- return (__assign(__assign({}, (ownerState.expandable && {
49
+ return (__assign(__assign(__assign({}, (ownerState.expandable && {
50
50
  '& > *': {
51
51
  borderBottom: 'none',
52
52
  },
53
53
  })), (ownerState.expanded && {
54
54
  backgroundColor: fade(theme.tokens.color_bg_interactive_hover, 0.5),
55
+ })), (ownerState.clickable && {
56
+ cursor: 'pointer',
55
57
  })));
56
58
  });
57
59
  export var isRenderableColumn = function (column) {
@@ -61,11 +63,20 @@ export function DataTableRow(props) {
61
63
  var _a = __read(React.useState(false), 2), isExpanded = _a[0], setIsExpanded = _a[1];
62
64
  var item = props.item, index = props.index, columns = props.columns, onRowClick = props.onRowClick, renderItemDetails = props.renderItemDetails, componentRenderer = props.componentRenderer, hover = props.hover, hideHeader = props.hideHeader, rowProps = __rest(props, ["item", "index", "columns", "onRowClick", "renderItemDetails", "componentRenderer", "hover", "hideHeader"]);
63
65
  var detailsContent = null;
66
+ var isClickable = !!onRowClick;
67
+ // If hover is explicitly passed, respect it. Otherwise, enable hover when clickable.
68
+ var showHover = hover !== undefined ? hover : isClickable;
64
69
  if (renderItemDetails) {
65
70
  detailsContent = renderItemDetails(item);
66
71
  }
72
+ var handleRowClick = function (event) {
73
+ if (onRowClick) {
74
+ onRowClick(event, { item: item, index: index });
75
+ }
76
+ };
77
+ var rowClickProps = isClickable ? { onClick: handleRowClick } : {};
67
78
  return (React.createElement(React.Fragment, null,
68
- React.createElement(Row, __assign({ component: componentRenderer ? componentRenderer(item, index) : 'tr', hover: hover, ownerState: { expandable: !!detailsContent, expanded: isExpanded } }, rowProps),
79
+ React.createElement(Row, __assign({}, rowProps, { component: componentRenderer ? componentRenderer(item, index) : 'tr', hover: showHover, ownerState: { expandable: !!detailsContent, expanded: isExpanded, clickable: isClickable } }, rowClickProps),
69
80
  columns.map(function (column, colIndex) {
70
81
  if (!column) {
71
82
  return null;
@@ -79,7 +90,10 @@ export function DataTableRow(props) {
79
90
  }
80
91
  return hideHeader ? (React.createElement(TableCell, { width: column.width, key: colIndex, align: column.align, padding: column.padding }, content)) : (React.createElement(TableCell, { key: colIndex, align: column.align, padding: column.padding }, content));
81
92
  }),
82
- !!renderItemDetails && (React.createElement(TableCell, { padding: "checkbox", align: "right" }, !!detailsContent && (React.createElement(IconButton, { onClick: function () { return setIsExpanded(!isExpanded); }, variant: "link", label: isExpanded ? 'Collapse' : 'Expand' }, isExpanded ? React.createElement(ChevronUpIcon, null) : React.createElement(ChevronDownIcon, null)))))),
93
+ !!renderItemDetails && (React.createElement(TableCell, { padding: "checkbox", align: "right" }, !!detailsContent && (React.createElement(IconButton, { onClick: function (event) {
94
+ event.stopPropagation();
95
+ setIsExpanded(!isExpanded);
96
+ }, variant: "link", label: isExpanded ? 'Collapse' : 'Expand' }, isExpanded ? React.createElement(ChevronUpIcon, null) : React.createElement(ChevronDownIcon, null)))))),
83
97
  !!detailsContent && (React.createElement(Row, { ownerState: { expanded: true } },
84
98
  React.createElement(TableCell, { padding: "none", colSpan: columns.length + 1 },
85
99
  React.createElement(Collapse, { in: isExpanded, timeout: "auto", unmountOnExit: true },
package/esm/data-table/data-table.js CHANGED
@@ -28,7 +28,7 @@ var isSortableColumn = function (column) {
28
28
  return !!column.sortable;
29
29
  };
30
30
  var DataTableImpl = function (props, ref) {
31
- var items = props.items, hover = props.hover, columns = props.columns, onRowClick = props.onRowClick, onSort = props.onSort, sortDirection = props.sortDirection, sortOn = props.sortOn, _a = props.emptyMessage, emptyMessage = _a === void 0 ? 'There are no items to display.' : _a, _b = props.isLoading, isLoading = _b === void 0 ? false : _b, _c = props.hideHeader, hideHeader = _c === void 0 ? false : _c, renderItemDetails = props.renderItemDetails, rowRenderer = props.rowRenderer, _d = props.keyExtractor, keyExtractor = _d === void 0 ? function (_item, index) { return index; } : _d, containerProps = __rest(props, ["items", "hover", "columns", "onRowClick", "onSort", "sortDirection", "sortOn", "emptyMessage", "isLoading", "hideHeader", "renderItemDetails", "rowRenderer", "keyExtractor"]);
31
+ var items = props.items, hover = props.hover, columns = props.columns, onRowClick = props.onRowClick, onSort = props.onSort, sortDirection = props.sortDirection, sortOn = props.sortOn, _a = props.emptyMessage, emptyMessage = _a === void 0 ? 'There are no items to display.' : _a, _b = props.isLoading, isLoading = _b === void 0 ? false : _b, _c = props.hideHeader, hideHeader = _c === void 0 ? false : _c, renderItemDetails = props.renderItemDetails, rowRenderer = props.rowRenderer, _d = props.keyExtractor, keyExtractor = _d === void 0 ? function (_item, index) { return index; } : _d, getRowProps = props.getRowProps, containerProps = __rest(props, ["items", "hover", "columns", "onRowClick", "onSort", "sortDirection", "sortOn", "emptyMessage", "isLoading", "hideHeader", "renderItemDetails", "rowRenderer", "keyExtractor", "getRowProps"]);
32
32
  var showEmptyState = !isLoading && !items.length;
33
33
  return (React.createElement(TableContainer, __assign({}, containerProps, { ref: ref }),
34
34
  React.createElement(Table, null,
@@ -46,7 +46,8 @@ var DataTableImpl = function (props, ref) {
46
46
  }),
47
47
  !!renderItemDetails && React.createElement(TableCell, null)))),
48
48
  React.createElement(TableBody, null, props.items.map(function (item, index) {
49
- return (React.createElement(DataTableRow, { hideHeader: hideHeader, hover: hover, columns: columns, key: keyExtractor(item, index), item: item, index: index, componentRenderer: rowRenderer, onRowClick: onRowClick, renderItemDetails: renderItemDetails }));
49
+ var rowProps = getRowProps ? getRowProps(item, index) : undefined;
50
+ return (React.createElement(DataTableRow, __assign({ hideHeader: hideHeader, hover: hover, columns: columns, key: keyExtractor(item, index), item: item, index: index, componentRenderer: rowRenderer, onRowClick: onRowClick, renderItemDetails: renderItemDetails }, rowProps)));
50
51
  }))),
51
52
  isLoading && React.createElement(TableLoadingState, { items: items }),
52
53
  showEmptyState && (React.createElement(TableEmptyState, null,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@auth0/quantum-product",
3
- "version": "2.8.3",
3
+ "version": "2.9.1",
4
4
  "sideEffects": false,
5
5
  "license": "Apache-2.0",
6
6
  "publishConfig": {
@@ -11,7 +11,7 @@
11
11
  "main": "./index.js",
12
12
  "types": "./index.d.ts",
13
13
  "dependencies": {
14
- "@auth0/quantum-icons": "^1.1.0",
14
+ "@auth0/quantum-icons": "^1.2.0",
15
15
  "@auth0/quantum-tokens": "^1.3.0",
16
16
  "@mui/material": "5.15.9",
17
17
  "@mui/system": "5.15.9",
package/panel/panel/panel.d.ts CHANGED
@@ -36,4 +36,4 @@ export declare const Panel: React.ForwardRefExoticComponent<Partial<IPanelOwnerS
36
36
  classes?: Partial<PanelClasses>;
37
37
  closeIconButtonProps?: Partial<IIconButtonProps>;
38
38
  PanelHeaderProps?: Partial<IPanelHeaderProps>;
39
- } & Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "title" | "ref" | "size" | "children" | "onClose" | "classes" | "variant" | "placement" | "offsetTop" | "closeButtonLabel" | "isOpen" | "isFixed" | "closeIconButtonProps" | "PanelHeaderProps"> & import("../../styled").IStyledCommonProps & React.RefAttributes<HTMLDivElement>>;
39
+ } & Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "title" | "ref" | "size" | "children" | "onClose" | "classes" | "variant" | "placement" | "closeButtonLabel" | "isOpen" | "isFixed" | "offsetTop" | "closeIconButtonProps" | "PanelHeaderProps"> & import("../../styled").IStyledCommonProps & React.RefAttributes<HTMLDivElement>>;