@terraware/web-components 3.0.18 → 3.0.19-rc.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.
- package/components/table/TableCellRenderer.d.ts.map +1 -1
- package/components/table/TableCellRenderer.js +0 -1
- package/components/table/TableHeader.d.ts +2 -1
- package/components/table/TableHeader.d.ts.map +1 -1
- package/components/table/TableHeader.js +11 -4
- package/components/table/density.d.ts +4 -0
- package/components/table/density.d.ts.map +1 -0
- package/components/table/density.js +28 -0
- package/components/table/index.d.ts +3 -2
- package/components/table/index.d.ts.map +1 -1
- package/components/table/index.js +14 -5
- package/components/table/types.d.ts +1 -0
- package/components/table/types.d.ts.map +1 -1
- package/package.json +1 -1
- package/stories/Table.stories.d.ts +8 -0
- package/stories/Table.stories.d.ts.map +1 -1
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"TableCellRenderer.d.ts","sourceRoot":"","sources":["../../../src/components/table/TableCellRenderer.tsx"],"names":[],"mappings":"AACA,OAAO,EAAa,OAAO,EAA0C,MAAM,eAAe,CAAC;AAC3F,OAAc,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACxD,OAAO,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAExC,OAAO,EAAE,aAAa,EAAE,MAAM,GAAG,CAAC;AAElC,MAAM,MAAM,YAAY,GAAG,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;
|
1
|
+
{"version":3,"file":"TableCellRenderer.d.ts","sourceRoot":"","sources":["../../../src/components/table/TableCellRenderer.tsx"],"names":[],"mappings":"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"}
|
@@ -17,7 +17,6 @@ var _react = _interopRequireDefault(require("react"));
|
|
17
17
|
var _utils = require("../../utils");
|
18
18
|
const defaultStyles = theme => ({
|
19
19
|
'&.MuiTableCell-root': {
|
20
|
-
height: '52px',
|
21
20
|
paddingTop: '0px',
|
22
21
|
paddingBottom: '0px',
|
23
22
|
borderBottom: "1px solid ".concat(theme.palette.TwClrBrdrSecondary),
|
@@ -1,6 +1,6 @@
|
|
1
1
|
import React from 'react';
|
2
2
|
import { SortOrder } from './sort';
|
3
|
-
import { TableColumnType } from './types';
|
3
|
+
import { TableColumnType, TableDensityType } from './types';
|
4
4
|
interface Props {
|
5
5
|
onRequestSort: (event: React.MouseEvent<unknown>, property: string) => void;
|
6
6
|
order: SortOrder;
|
@@ -10,6 +10,7 @@ interface Props {
|
|
10
10
|
numSelected?: number;
|
11
11
|
rowCount?: number;
|
12
12
|
onSelectAllClick?: (event: React.ChangeEvent<HTMLInputElement>) => void;
|
13
|
+
density?: TableDensityType;
|
13
14
|
}
|
14
15
|
export default function EnhancedTableHead(props: Props): JSX.Element;
|
15
16
|
export {};
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"TableHeader.d.ts","sourceRoot":"","sources":["../../../src/components/table/TableHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;
|
1
|
+
{"version":3,"file":"TableHeader.d.ts","sourceRoot":"","sources":["../../../src/components/table/TableHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,OAAO,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAC;AACnC,OAAO,EAAE,eAAe,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAM5D,UAAU,KAAK;IACb,aAAa,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,OAAO,CAAC,EAAE,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IAC5E,KAAK,EAAE,SAAS,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,EAAE,eAAe,EAAE,CAAC;IAC3B,YAAY,CAAC,EAAE,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAE,EAAE,GAAG,KAAK,IAAI,CAAC;IACrD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,gBAAgB,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IACxE,OAAO,CAAC,EAAE,gBAAgB,CAAC;CAC5B;AAED,MAAM,CAAC,OAAO,UAAU,iBAAiB,CAAC,KAAK,EAAE,KAAK,GAAG,GAAG,CAAC,OAAO,CA6DnE"}
|
@@ -8,6 +8,7 @@ exports.default = EnhancedTableHead;
|
|
8
8
|
var _react = _interopRequireDefault(require("react"));
|
9
9
|
var _sortable = require("@dnd-kit/sortable");
|
10
10
|
var _material = require("@mui/material");
|
11
|
+
var _density = require("./density");
|
11
12
|
var _TableHeaderItem = _interopRequireDefault(require("./TableHeaderItem"));
|
12
13
|
var _Checkbox = require("../Checkbox");
|
13
14
|
var _text = require("../../utils/text");
|
@@ -19,12 +20,15 @@ function EnhancedTableHead(props) {
|
|
19
20
|
onRequestSort,
|
20
21
|
numSelected,
|
21
22
|
rowCount,
|
22
|
-
onSelectAllClick
|
23
|
+
onSelectAllClick,
|
24
|
+
density = 'comfortable'
|
23
25
|
} = props;
|
24
26
|
const headerCellStyles = {
|
25
27
|
'&.MuiTableCell-root': {
|
26
28
|
borderBottom: "2px solid ".concat(theme.palette.TwClrBrdrSecondary)
|
27
|
-
}
|
29
|
+
},
|
30
|
+
paddingTop: '0px',
|
31
|
+
paddingBottom: '0px'
|
28
32
|
};
|
29
33
|
_react.default.useEffect(() => {
|
30
34
|
setHeadCells(columnsToHeadCells(props.columns));
|
@@ -32,7 +36,7 @@ function EnhancedTableHead(props) {
|
|
32
36
|
function columnsToHeadCells(columns) {
|
33
37
|
return columns.map(c => ({
|
34
38
|
id: c.key,
|
35
|
-
disablePadding:
|
39
|
+
disablePadding: true,
|
36
40
|
className: c.className,
|
37
41
|
label: typeof c.name === 'string' && c.name.length > 0 ? (0, _text.titleCase)(c.name) : c.name,
|
38
42
|
tooltipTitle: c.tooltipTitle,
|
@@ -42,7 +46,10 @@ function EnhancedTableHead(props) {
|
|
42
46
|
}
|
43
47
|
const [headCells, setHeadCells] = _react.default.useState(columnsToHeadCells(props.columns));
|
44
48
|
return /*#__PURE__*/_react.default.createElement(_material.TableHead, null, /*#__PURE__*/_react.default.createElement(_material.TableRow, {
|
45
|
-
id: "table-header"
|
49
|
+
id: "table-header",
|
50
|
+
sx: {
|
51
|
+
height: (0, _density.getTableRowHeight)(density)
|
52
|
+
}
|
46
53
|
}, numSelected !== undefined && rowCount !== undefined && rowCount > 0 && onSelectAllClick && /*#__PURE__*/_react.default.createElement(_material.TableCell, {
|
47
54
|
padding: "checkbox",
|
48
55
|
sx: headerCellStyles
|
@@ -0,0 +1,4 @@
|
|
1
|
+
import { TableDensityType } from './types';
|
2
|
+
export declare const getTableCellPaddingY: (tableDensity: TableDensityType) => "16px" | "12px" | "20px";
|
3
|
+
export declare const getTableRowHeight: (tableDensity: TableDensityType) => "52px" | "36px" | "60px";
|
4
|
+
//# sourceMappingURL=density.d.ts.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"density.d.ts","sourceRoot":"","sources":["../../../src/components/table/density.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAE3C,eAAO,MAAM,oBAAoB,iBAAkB,gBAAgB,6BASlE,CAAC;AAEF,eAAO,MAAM,iBAAiB,iBAAkB,gBAAgB,6BAS/D,CAAC"}
|
@@ -0,0 +1,28 @@
|
|
1
|
+
"use strict";
|
2
|
+
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
4
|
+
value: true
|
5
|
+
});
|
6
|
+
exports.getTableRowHeight = exports.getTableCellPaddingY = void 0;
|
7
|
+
const getTableCellPaddingY = tableDensity => {
|
8
|
+
switch (tableDensity) {
|
9
|
+
case 'comfortable':
|
10
|
+
return '16px';
|
11
|
+
case 'compact':
|
12
|
+
return '12px';
|
13
|
+
case 'roomy':
|
14
|
+
return '20px';
|
15
|
+
}
|
16
|
+
};
|
17
|
+
exports.getTableCellPaddingY = getTableCellPaddingY;
|
18
|
+
const getTableRowHeight = tableDensity => {
|
19
|
+
switch (tableDensity) {
|
20
|
+
case 'comfortable':
|
21
|
+
return '52px';
|
22
|
+
case 'compact':
|
23
|
+
return '36px';
|
24
|
+
case 'roomy':
|
25
|
+
return '60px';
|
26
|
+
}
|
27
|
+
};
|
28
|
+
exports.getTableRowHeight = getTableRowHeight;
|
@@ -2,7 +2,7 @@ import { SxProps, TooltipProps } from '@mui/material';
|
|
2
2
|
import React from 'react';
|
3
3
|
import { SortOrder } from './sort';
|
4
4
|
import { TableRowType } from './TableCellRenderer';
|
5
|
-
import { DetailsRendererProps, RendererProps, TableColumnType } from './types';
|
5
|
+
import { DetailsRendererProps, RendererProps, TableColumnType, TableDensityType } from './types';
|
6
6
|
import { IconName } from '../Icon/icons';
|
7
7
|
export type TextAlignment = 'right' | 'left';
|
8
8
|
export interface HeadCell {
|
@@ -52,6 +52,7 @@ export interface Props<T> extends LocalizationProps {
|
|
52
52
|
stickyHeader?: boolean;
|
53
53
|
hideHeader?: boolean;
|
54
54
|
enhancedTopBarSelectionConfig?: EnhancedTopBarSelectionProps;
|
55
|
+
density?: TableDensityType;
|
55
56
|
}
|
56
57
|
export type TopBarButton = {
|
57
58
|
buttonText?: string;
|
@@ -62,6 +63,6 @@ export type TopBarButton = {
|
|
62
63
|
tooltipTitle?: TooltipProps['title'];
|
63
64
|
};
|
64
65
|
export declare const isTopBarButton: (input: unknown) => input is TopBarButton;
|
65
|
-
export default function EnhancedTable<T extends TableRowType>({ id, columns, rows, order: _order, orderBy: _orderBy, Renderer, onSelect, DetailsRenderer, sortComparator, sortHandler, isInactive, isPresorted, onReorderEnd, isClickable, emptyTableMessage, showCheckbox, showTopBar, topBarButtons, selectedRows, setSelectedRows, controlledOnSelect, reloadData, stickyHeader, hideHeader, booleanFalseText, booleanTrueText, editText, renderNumSelectedText, renderPaginationText, enhancedTopBarSelectionConfig, }: Props<T>): JSX.Element;
|
66
|
+
export default function EnhancedTable<T extends TableRowType>({ id, columns, rows, order: _order, orderBy: _orderBy, Renderer, onSelect, DetailsRenderer, sortComparator, sortHandler, isInactive, isPresorted, onReorderEnd, isClickable, emptyTableMessage, showCheckbox, showTopBar, topBarButtons, selectedRows, setSelectedRows, controlledOnSelect, reloadData, stickyHeader, hideHeader, booleanFalseText, booleanTrueText, editText, renderNumSelectedText, renderPaginationText, enhancedTopBarSelectionConfig, density, }: Props<T>): JSX.Element;
|
66
67
|
export declare function tableSort<T>(ignore: boolean, array: T[], comparator: (a: T, b: T) => number): T[];
|
67
68
|
//# sourceMappingURL=index.d.ts.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/table/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAIL,OAAO,EAMP,YAAY,EAGb,MAAM,eAAe,CAAC;AACvB,OAAO,KAA2C,MAAM,OAAO,CAAC;
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/table/index.tsx"],"names":[],"mappings":"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"}
|
@@ -10,6 +10,7 @@ exports.isTopBarButton = void 0;
|
|
10
10
|
exports.tableSort = tableSort;
|
11
11
|
var _material = require("@mui/material");
|
12
12
|
var _react = _interopRequireWildcard(require("react"));
|
13
|
+
var _density = require("./density");
|
13
14
|
var _EnhancedTableToolbarV = _interopRequireDefault(require("./EnhancedTableToolbarV2"));
|
14
15
|
var _sort = require("./sort");
|
15
16
|
var _TableCellRenderer = _interopRequireDefault(require("./TableCellRenderer"));
|
@@ -56,7 +57,8 @@ function EnhancedTable(_ref) {
|
|
56
57
|
editText,
|
57
58
|
renderNumSelectedText,
|
58
59
|
renderPaginationText,
|
59
|
-
enhancedTopBarSelectionConfig
|
60
|
+
enhancedTopBarSelectionConfig,
|
61
|
+
density = 'comfortable'
|
60
62
|
} = _ref;
|
61
63
|
const theme = (0, _material.useTheme)();
|
62
64
|
const [order, setOrder] = _react.default.useState(_order);
|
@@ -154,9 +156,11 @@ function EnhancedTable(_ref) {
|
|
154
156
|
function columnsToHeadCells(columnsR) {
|
155
157
|
return columnsR.map(c => ({
|
156
158
|
id: c.key,
|
157
|
-
disablePadding:
|
159
|
+
disablePadding: true,
|
158
160
|
label: typeof c.name === 'string' ? c.name.toUpperCase() : c.name,
|
159
|
-
sx:
|
161
|
+
sx: [{
|
162
|
+
paddingY: (0, _density.getTableCellPaddingY)(density)
|
163
|
+
}, ...(Array.isArray(c.sx) ? c.sx : [c.sx])],
|
160
164
|
tooltipTitle: c.tooltipTitle
|
161
165
|
}));
|
162
166
|
}
|
@@ -235,7 +239,8 @@ function EnhancedTable(_ref) {
|
|
235
239
|
onReorderEnd: onReorderEndHandler,
|
236
240
|
numSelected: showCheckbox ? selectedRows === null || selectedRows === void 0 ? void 0 : selectedRows.length : undefined,
|
237
241
|
onSelectAllClick: showCheckbox ? handleSelectAllClick : undefined,
|
238
|
-
rowCount: showCheckbox ? rows === null || rows === void 0 ? void 0 : rows.length : undefined
|
242
|
+
rowCount: showCheckbox ? rows === null || rows === void 0 ? void 0 : rows.length : undefined,
|
243
|
+
density: density
|
239
244
|
}), /*#__PURE__*/_react.default.createElement(_material.TableBody, null, rows.length < 1 && emptyTableMessage && /*#__PURE__*/_react.default.createElement(_material.TableRow, null, /*#__PURE__*/_react.default.createElement(_material.TableCell, {
|
240
245
|
colSpan: columns.length + 1,
|
241
246
|
align: "center"
|
@@ -262,6 +267,7 @@ function EnhancedTable(_ref) {
|
|
262
267
|
...(isInactive && isInactive(row) ? {
|
263
268
|
backgroundColor: theme.palette.neutral[50]
|
264
269
|
} : {}),
|
270
|
+
height: (0, _density.getTableRowHeight)(density),
|
265
271
|
'&.MuiTableRow-root.Mui-selected': {
|
266
272
|
backgroundColor: theme.palette.TwClrBgSelectedTertiary
|
267
273
|
},
|
@@ -295,7 +301,10 @@ function EnhancedTable(_ref) {
|
|
295
301
|
reloadData: reloadData,
|
296
302
|
booleanFalseText: booleanFalseText,
|
297
303
|
booleanTrueText: booleanTrueText,
|
298
|
-
editText: editText
|
304
|
+
editText: editText,
|
305
|
+
sx: {
|
306
|
+
paddingY: (0, _density.getTableCellPaddingY)(density)
|
307
|
+
}
|
299
308
|
}))), DetailsRenderer && /*#__PURE__*/_react.default.createElement(DetailsRenderer, {
|
300
309
|
index: index,
|
301
310
|
row: row
|
@@ -27,6 +27,7 @@ export interface RendererProps<T> {
|
|
27
27
|
export type EnhancedTableDetailsRow = {
|
28
28
|
[x: string]: string | number | [] | undefined;
|
29
29
|
};
|
30
|
+
export type TableDensityType = 'comfortable' | 'compact' | 'roomy';
|
30
31
|
export interface DetailsRendererProps {
|
31
32
|
index: number;
|
32
33
|
row: EnhancedTableDetailsRow;
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/table/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACjD,OAAO,EAAE,OAAO,EAAE,YAAY,EAAE,MAAM,eAAe,CAAC;AACtD,OAAO,EAAE,aAAa,EAAE,MAAM,GAAG,CAAC;AAElC,MAAM,WAAW,eAAe;IAC9B,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,EAAE,MAAM,GAAG,GAAG,CAAC,OAAO,CAAC;IAC3B,IAAI,EAAE,QAAQ,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,GAAG,MAAM,GAAG,SAAS,CAAC;IAClE,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,YAAY,CAAC,EAAE,YAAY,CAAC,OAAO,CAAC,CAAC;IACrC,SAAS,CAAC,EAAE,aAAa,CAAC;IAC1B,EAAE,CAAC,EAAE,OAAO,CAAC;CACd;AAED,MAAM,WAAW,aAAa,CAAC,CAAC;IAC9B,KAAK,EAAE,MAAM,CAAC;IACd,GAAG,EAAE,CAAC,CAAC;IACP,MAAM,EAAE,eAAe,CAAC;IACxB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,OAAO,EAAE,GAAG,SAAS,CAAC;IAChD,UAAU,CAAC,EAAE,CAAC,QAAQ,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IACzC,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,gBAAgB,EAAE,MAAM,CAAC;IACzB,eAAe,EAAE,MAAM,CAAC;IACxB,QAAQ,EAAE,MAAM,CAAC;IACjB,EAAE,CAAC,EAAE,OAAO,CAAC;CACd;AAED,MAAM,MAAM,uBAAuB,GAAG;IACpC,CAAC,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,MAAM,GAAG,EAAE,GAAG,SAAS,CAAC;CAC/C,CAAC;AAEF,MAAM,WAAW,oBAAoB;IACnC,KAAK,EAAE,MAAM,CAAC;IACd,GAAG,EAAE,uBAAuB,CAAC;CAC9B;AAED,MAAM,WAAW,MAAM;IACrB,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,QAAQ,EAAE,OAAO,CAAC;CACnB;AAED,KAAK,wBAAwB,GACzB,oBAAoB,GACpB,kBAAkB,GAClB,QAAQ,GACR,YAAY,GACZ,cAAc,GACd,cAAc,GACd,QAAQ,CAAC;AAEb,MAAM,WAAW,cAAe,SAAQ,IAAI,CAAC,eAAe,EAAE,KAAK,CAAC;IAClE,GAAG,EAAE,MAAM,CAAC;IACZ,cAAc,CAAC,EAAE,MAAM,EAAE,CAAC;IAC1B,MAAM,CAAC,EAAE;QAAE,IAAI,EAAE,wBAAwB,CAAC;QAAC,OAAO,CAAC,EAAE,MAAM,EAAE,CAAA;KAAE,CAAC;IAChE,UAAU,CAAC,EAAE,OAAO,GAAG,cAAc,GAAG,OAAO,CAAC;IAChD,SAAS,CAAC,EAAE,IAAI,GAAG,KAAK,GAAG,OAAO,GAAG,KAAK,CAAC;CAC5C"}
|
1
|
+
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/table/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACjD,OAAO,EAAE,OAAO,EAAE,YAAY,EAAE,MAAM,eAAe,CAAC;AACtD,OAAO,EAAE,aAAa,EAAE,MAAM,GAAG,CAAC;AAElC,MAAM,WAAW,eAAe;IAC9B,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,EAAE,MAAM,GAAG,GAAG,CAAC,OAAO,CAAC;IAC3B,IAAI,EAAE,QAAQ,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,GAAG,MAAM,GAAG,SAAS,CAAC;IAClE,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,YAAY,CAAC,EAAE,YAAY,CAAC,OAAO,CAAC,CAAC;IACrC,SAAS,CAAC,EAAE,aAAa,CAAC;IAC1B,EAAE,CAAC,EAAE,OAAO,CAAC;CACd;AAED,MAAM,WAAW,aAAa,CAAC,CAAC;IAC9B,KAAK,EAAE,MAAM,CAAC;IACd,GAAG,EAAE,CAAC,CAAC;IACP,MAAM,EAAE,eAAe,CAAC;IACxB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,OAAO,EAAE,GAAG,SAAS,CAAC;IAChD,UAAU,CAAC,EAAE,CAAC,QAAQ,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IACzC,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,gBAAgB,EAAE,MAAM,CAAC;IACzB,eAAe,EAAE,MAAM,CAAC;IACxB,QAAQ,EAAE,MAAM,CAAC;IACjB,EAAE,CAAC,EAAE,OAAO,CAAC;CACd;AAED,MAAM,MAAM,uBAAuB,GAAG;IACpC,CAAC,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,MAAM,GAAG,EAAE,GAAG,SAAS,CAAC;CAC/C,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG,aAAa,GAAG,SAAS,GAAG,OAAO,CAAC;AAEnE,MAAM,WAAW,oBAAoB;IACnC,KAAK,EAAE,MAAM,CAAC;IACd,GAAG,EAAE,uBAAuB,CAAC;CAC9B;AAED,MAAM,WAAW,MAAM;IACrB,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,QAAQ,EAAE,OAAO,CAAC;CACnB;AAED,KAAK,wBAAwB,GACzB,oBAAoB,GACpB,kBAAkB,GAClB,QAAQ,GACR,YAAY,GACZ,cAAc,GACd,cAAc,GACd,QAAQ,CAAC;AAEb,MAAM,WAAW,cAAe,SAAQ,IAAI,CAAC,eAAe,EAAE,KAAK,CAAC;IAClE,GAAG,EAAE,MAAM,CAAC;IACZ,cAAc,CAAC,EAAE,MAAM,EAAE,CAAC;IAC1B,MAAM,CAAC,EAAE;QAAE,IAAI,EAAE,wBAAwB,CAAC;QAAC,OAAO,CAAC,EAAE,MAAM,EAAE,CAAA;KAAE,CAAC;IAChE,UAAU,CAAC,EAAE,OAAO,GAAG,cAAc,GAAG,OAAO,CAAC;IAChD,SAAS,CAAC,EAAE,IAAI,GAAG,KAAK,GAAG,OAAO,GAAG,KAAK,CAAC;CAC5C"}
|
package/package.json
CHANGED
@@ -2,6 +2,14 @@ import Table, { Props as TableProps } from '../components/table/index';
|
|
2
2
|
declare const _default: {
|
3
3
|
title: string;
|
4
4
|
component: typeof Table;
|
5
|
+
argTypes: {
|
6
|
+
density: {
|
7
|
+
options: string[];
|
8
|
+
control: {
|
9
|
+
type: string;
|
10
|
+
};
|
11
|
+
};
|
12
|
+
};
|
5
13
|
};
|
6
14
|
export default _default;
|
7
15
|
export declare const Default: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, Omit<TableProps<{
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"Table.stories.d.ts","sourceRoot":"","sources":["../../src/stories/Table.stories.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,EAAgC,KAAK,IAAI,UAAU,EAAE,MAAM,2BAA2B,CAAC
|
1
|
+
{"version":3,"file":"Table.stories.d.ts","sourceRoot":"","sources":["../../src/stories/Table.stories.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,EAAgC,KAAK,IAAI,UAAU,EAAE,MAAM,2BAA2B,CAAC;;;;;;;;;;;;;AAIrG,wBASE;AA4FF,eAAO,MAAM,OAAO;UAhF0B,MAAM;cAAY,MAAM;;cAA2B,MAAM;EAgF/D,CAAC;AACzC,eAAO,MAAM,UAAU;UAjFuB,MAAM;cAAY,MAAM;;cAA2B,MAAM;EAiF5D,CAAC;AAC5C,eAAO,MAAM,SAAS;UAlFwB,MAAM;cAAY,MAAM;;cAA2B,MAAM;EAkF7D,CAAC;AAC3C,eAAO,MAAM,UAAU;UAnFuB,MAAM;cAAY,MAAM;;cAA2B,MAAM;EAmF5D,CAAC;AAC5C,eAAO,MAAM,YAAY;UApFqB,MAAM;cAAY,MAAM;;cAA2B,MAAM;EAoF1D,CAAC"}
|