@astral/ui 0.41.1 → 0.41.2

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 (17) hide show
  1. package/DataGrid/DataGrid.d.ts +3 -3
  2. package/DataGrid/DataGridHead/DataGridHead.d.ts +1 -1
  3. package/DataGrid/DataGridHead/DataGridHead.js +25 -24
  4. package/DataGrid/DataGridHeadColumn/DataGridHeadColumn.d.ts +1 -1
  5. package/DataGrid/DataGridHeadColumn/DataGridHeadColumn.js +3 -3
  6. package/DataGrid/DataGridHeadColumn/styled.d.ts +1 -0
  7. package/DataGrid/DataGridHeadColumn/styled.js +10 -1
  8. package/esm/DataGrid/DataGrid.d.ts +3 -3
  9. package/esm/DataGrid/DataGridHead/DataGridHead.d.ts +1 -1
  10. package/esm/DataGrid/DataGridHead/DataGridHead.js +25 -24
  11. package/esm/DataGrid/DataGridHeadColumn/DataGridHeadColumn.d.ts +1 -1
  12. package/esm/DataGrid/DataGridHeadColumn/DataGridHeadColumn.js +3 -3
  13. package/esm/DataGrid/DataGridHeadColumn/styled.d.ts +1 -0
  14. package/esm/DataGrid/DataGridHeadColumn/styled.js +10 -1
  15. package/esm/theme/components/MuiOutlinedInput.js +4 -3
  16. package/package.json +2 -2
  17. package/theme/components/MuiOutlinedInput.js +4 -3
package/DataGrid/DataGrid.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  import { ReactNode } from 'react';
2
2
  import { DataGridColumns, DataGridRow, DataGridSort } from './types';
3
- export declare type DataGridProps<Data = DataGridRow, SortField extends keyof Data = keyof Data> = {
3
+ export declare type DataGridProps<Data extends object = DataGridRow, SortField extends keyof Data = keyof Data> = {
4
4
  /**
5
5
  * @example <DataGrid rows={[{name: 'test'}]} />
6
6
  * Массив данных для таблицы
@@ -41,7 +41,7 @@ export declare type DataGridProps<Data = DataGridRow, SortField extends keyof Da
41
41
  * @example <DataGrid onSort={({fieldId: 'test', sort: 'asc'}) => console.log('sorted')} />
42
42
  * Обработчик сортировки
43
43
  */
44
- onSort: (sorting: DataGridSort<SortField>[]) => void;
44
+ onSort?: (sorting: DataGridSort<SortField>[]) => void;
45
45
  /**
46
46
  * @example <DataGrid Footer={<DataGridPagination />} />
47
47
  * Компонент кастомного футера (н-р Pagination)
@@ -70,4 +70,4 @@ export declare type DataGridProps<Data = DataGridRow, SortField extends keyof Da
70
70
  */
71
71
  minDisplayRows?: number;
72
72
  };
73
- export declare function DataGrid<Data extends object, SortField extends keyof Data>({ columns, rows, selectedRows, sorting, maxHeight, minDisplayRows, onRowClick, onSelectRow, Footer, loading, onSort, keyId, emptyCellValue, }: DataGridProps<Data, SortField>): JSX.Element;
73
+ export declare function DataGrid<Data extends object = DataGridRow, SortField extends keyof Data = keyof Data>({ columns, rows, selectedRows, sorting, maxHeight, minDisplayRows, onRowClick, onSelectRow, Footer, loading, onSort, keyId, emptyCellValue, }: DataGridProps<Data, SortField>): JSX.Element;
package/DataGrid/DataGridHead/DataGridHead.d.ts CHANGED
@@ -5,7 +5,7 @@ export declare type DataGridHeadProps<Data = DataGridRow, SortField extends keyo
5
5
  selectable: boolean;
6
6
  onSelectAllRows: (event: ChangeEvent<HTMLInputElement>) => void;
7
7
  sorting: DataGridSort<SortField>[];
8
- onSort: (sorting: DataGridSort<SortField>[]) => void;
8
+ onSort?: (sorting: DataGridSort<SortField>[]) => void;
9
9
  uncheckedRowsCount: number;
10
10
  rowsCount: number;
11
11
  };
package/DataGrid/DataGridHead/DataGridHead.js CHANGED
@@ -32,33 +32,34 @@ function DataGridHead(_a) {
32
32
  var columns = _a.columns, selectable = _a.selectable, onSelectAllRows = _a.onSelectAllRows, rowsCount = _a.rowsCount, onSort = _a.onSort, _b = _a.sorting, sorting = _b === void 0 ? [] : _b, uncheckedRowsCount = _a.uncheckedRowsCount;
33
33
  var checked = (0, react_1.useMemo)(function () { return !Boolean(uncheckedRowsCount) && rowsCount > 0; }, [uncheckedRowsCount, rowsCount]);
34
34
  var indeterminate = (0, react_1.useMemo)(function () { return uncheckedRowsCount > 0 && uncheckedRowsCount < rowsCount; }, [uncheckedRowsCount, rowsCount]);
35
- var handleSort = (0, react_1.useCallback)(function (field, sortable) {
36
- if (sortable) {
37
- var currentSort = sorting.find(function (_a) {
35
+ var handleSort = (0, react_1.useCallback)(function (field) {
36
+ if (!onSort) {
37
+ return;
38
+ }
39
+ var currentSort = sorting.find(function (_a) {
40
+ var fieldId = _a.fieldId;
41
+ return fieldId === field;
42
+ });
43
+ // если для выбранного столбца текущая сортировка ASC - меняем на DESC
44
+ if (currentSort && currentSort.sort === constants_1.SortStates.ASC) {
45
+ var newSorting = __spreadArray(__spreadArray([], sorting.filter(function (_a) {
46
+ var fieldId = _a.fieldId;
47
+ return fieldId !== field;
48
+ }), true), [
49
+ { fieldId: field, sort: constants_1.SortStates.DESC },
50
+ ], false);
51
+ return onSort(newSorting);
52
+ // если для выбранного столбца текущая сортировка DESC - убираем сортировку
53
+ }
54
+ else if (currentSort && currentSort.sort === constants_1.SortStates.DESC) {
55
+ var newSorting = sorting.filter(function (_a) {
38
56
  var fieldId = _a.fieldId;
39
- return fieldId === field;
57
+ return fieldId !== field;
40
58
  });
41
- // если для выбранного столбца текущая сортировка ASC - меняем на DESC
42
- if (currentSort && currentSort.sort === constants_1.SortStates.ASC) {
43
- var newSorting = __spreadArray(__spreadArray([], sorting.filter(function (_a) {
44
- var fieldId = _a.fieldId;
45
- return fieldId !== field;
46
- }), true), [
47
- { fieldId: field, sort: constants_1.SortStates.DESC },
48
- ], false);
49
- return onSort(newSorting);
50
- // если для выбранного столбца текущая сортировка DESC - убираем сортировку
51
- }
52
- else if (currentSort && currentSort.sort === constants_1.SortStates.DESC) {
53
- var newSorting = sorting.filter(function (_a) {
54
- var fieldId = _a.fieldId;
55
- return fieldId !== field;
56
- });
57
- return onSort(newSorting);
58
- }
59
- // если для выбранного столбца нет сортировки - добавляем сортировку ASC
60
- onSort(__spreadArray(__spreadArray([], sorting, true), [{ fieldId: field, sort: constants_1.SortStates.ASC }], false));
59
+ return onSort(newSorting);
61
60
  }
61
+ // если для выбранного столбца нет сортировки - добавляем сортировку ASC
62
+ onSort(__spreadArray(__spreadArray([], sorting, true), [{ fieldId: field, sort: constants_1.SortStates.ASC }], false));
62
63
  }, [sorting, onSort]);
63
64
  var renderColumns = (0, react_1.useMemo)(function () {
64
65
  return columns.map(function (_a) {
package/DataGrid/DataGridHeadColumn/DataGridHeadColumn.d.ts CHANGED
@@ -2,7 +2,7 @@ import { CSSProperties } from 'react';
2
2
  import { TableCellProps } from '@mui/material';
3
3
  import { DataGridRow, DataGridSort } from '../types';
4
4
  export declare type DataGridHeadColumnProps<Data = DataGridRow, SortField extends keyof Data = keyof Data> = {
5
- onSort: (field: SortField, sortable?: boolean) => void;
5
+ onSort: (field: SortField) => void;
6
6
  sorting: DataGridSort<SortField>[];
7
7
  label?: string;
8
8
  sortable?: boolean;
package/DataGrid/DataGridHeadColumn/DataGridHeadColumn.js CHANGED
@@ -26,10 +26,10 @@ function DataGridHeadColumn(_a) {
26
26
  var hideSortIcon = (0, react_1.useMemo)(function () { return !Boolean(sortParams); }, [sortParams]);
27
27
  var sortDirection = (0, react_1.useMemo)(function () { return (sortParams ? sortParams.sort : constants_1.SortStates.ASC); }, [sortParams]);
28
28
  var handleSortClick = function () {
29
- if (field) {
30
- onSort(field, sortable);
29
+ if (field && sortable) {
30
+ onSort(field);
31
31
  }
32
32
  };
33
- return ((0, jsx_runtime_1.jsxs)(styled_1.StyledTableCell, __assign({ onClick: handleSortClick, align: align, width: width }, { children: [(0, jsx_runtime_1.jsx)(Typography_1.Typography, __assign({ variant: "pointer" }, { children: label })), sortable && ((0, jsx_runtime_1.jsx)(styled_1.StyledTableSortLabel, { hideSortIcon: hideSortIcon, direction: sortDirection, active: true }))] })));
33
+ return ((0, jsx_runtime_1.jsxs)(styled_1.StyledTableCell, __assign({ onClick: handleSortClick, align: align, width: width, sortable: sortable }, { children: [(0, jsx_runtime_1.jsx)(Typography_1.Typography, __assign({ variant: "pointer" }, { children: label })), sortable && ((0, jsx_runtime_1.jsx)(styled_1.StyledTableSortLabel, { hideSortIcon: hideSortIcon, direction: sortDirection, active: true }))] })));
34
34
  }
35
35
  exports.DataGridHeadColumn = DataGridHeadColumn;
package/DataGrid/DataGridHeadColumn/styled.d.ts CHANGED
@@ -35,4 +35,5 @@ export declare const StyledTableCell: import("@emotion/styled").StyledComponent<
35
35
  theme?: import("@emotion/react").Theme | undefined;
36
36
  } & {
37
37
  width?: CSSProperties['width'];
38
+ sortable?: boolean | undefined;
38
39
  }, {}, {}>;
package/DataGrid/DataGridHeadColumn/styled.js CHANGED
@@ -13,8 +13,17 @@ exports.StyledTableSortLabel = (0, styles_1.styled)(Table_1.TableSortLabel)(temp
13
13
  });
14
14
  exports.StyledTableCell = (0, styles_1.styled)(Table_1.TableCell, {
15
15
  shouldForwardProp: function (prop) { return prop !== 'width'; },
16
- })(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n width: ", ";\n\n cursor: pointer;\n\n user-select: none;\n"], ["\n width: ", ";\n\n cursor: pointer;\n\n user-select: none;\n"])), function (_a) {
16
+ })(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n width: ", ";\n\n cursor: ", ";\n padding: ", ";\n color: ", ";\n user-select: none;\n"], ["\n width: ", ";\n\n cursor: ", ";\n padding: ", ";\n color: ", ";\n user-select: none;\n"])), function (_a) {
17
17
  var _b = _a.width, width = _b === void 0 ? 'auto' : _b;
18
18
  return width;
19
+ }, function (_a) {
20
+ var sortable = _a.sortable;
21
+ return (sortable ? 'pointer' : 'initial');
22
+ }, function (_a) {
23
+ var theme = _a.theme;
24
+ return theme.spacing(3, 4);
25
+ }, function (_a) {
26
+ var theme = _a.theme;
27
+ return theme.palette.grey[700];
19
28
  });
20
29
  var templateObject_1, templateObject_2;
package/esm/DataGrid/DataGrid.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  import { ReactNode } from 'react';
2
2
  import { DataGridColumns, DataGridRow, DataGridSort } from './types';
3
- export declare type DataGridProps<Data = DataGridRow, SortField extends keyof Data = keyof Data> = {
3
+ export declare type DataGridProps<Data extends object = DataGridRow, SortField extends keyof Data = keyof Data> = {
4
4
  /**
5
5
  * @example <DataGrid rows={[{name: 'test'}]} />
6
6
  * Массив данных для таблицы
@@ -41,7 +41,7 @@ export declare type DataGridProps<Data = DataGridRow, SortField extends keyof Da
41
41
  * @example <DataGrid onSort={({fieldId: 'test', sort: 'asc'}) => console.log('sorted')} />
42
42
  * Обработчик сортировки
43
43
  */
44
- onSort: (sorting: DataGridSort<SortField>[]) => void;
44
+ onSort?: (sorting: DataGridSort<SortField>[]) => void;
45
45
  /**
46
46
  * @example <DataGrid Footer={<DataGridPagination />} />
47
47
  * Компонент кастомного футера (н-р Pagination)
@@ -70,4 +70,4 @@ export declare type DataGridProps<Data = DataGridRow, SortField extends keyof Da
70
70
  */
71
71
  minDisplayRows?: number;
72
72
  };
73
- export declare function DataGrid<Data extends object, SortField extends keyof Data>({ columns, rows, selectedRows, sorting, maxHeight, minDisplayRows, onRowClick, onSelectRow, Footer, loading, onSort, keyId, emptyCellValue, }: DataGridProps<Data, SortField>): JSX.Element;
73
+ export declare function DataGrid<Data extends object = DataGridRow, SortField extends keyof Data = keyof Data>({ columns, rows, selectedRows, sorting, maxHeight, minDisplayRows, onRowClick, onSelectRow, Footer, loading, onSort, keyId, emptyCellValue, }: DataGridProps<Data, SortField>): JSX.Element;
package/esm/DataGrid/DataGridHead/DataGridHead.d.ts CHANGED
@@ -5,7 +5,7 @@ export declare type DataGridHeadProps<Data = DataGridRow, SortField extends keyo
5
5
  selectable: boolean;
6
6
  onSelectAllRows: (event: ChangeEvent<HTMLInputElement>) => void;
7
7
  sorting: DataGridSort<SortField>[];
8
- onSort: (sorting: DataGridSort<SortField>[]) => void;
8
+ onSort?: (sorting: DataGridSort<SortField>[]) => void;
9
9
  uncheckedRowsCount: number;
10
10
  rowsCount: number;
11
11
  };
package/esm/DataGrid/DataGridHead/DataGridHead.js CHANGED
@@ -29,33 +29,34 @@ export function DataGridHead(_a) {
29
29
  var columns = _a.columns, selectable = _a.selectable, onSelectAllRows = _a.onSelectAllRows, rowsCount = _a.rowsCount, onSort = _a.onSort, _b = _a.sorting, sorting = _b === void 0 ? [] : _b, uncheckedRowsCount = _a.uncheckedRowsCount;
30
30
  var checked = useMemo(function () { return !Boolean(uncheckedRowsCount) && rowsCount > 0; }, [uncheckedRowsCount, rowsCount]);
31
31
  var indeterminate = useMemo(function () { return uncheckedRowsCount > 0 && uncheckedRowsCount < rowsCount; }, [uncheckedRowsCount, rowsCount]);
32
- var handleSort = useCallback(function (field, sortable) {
33
- if (sortable) {
34
- var currentSort = sorting.find(function (_a) {
32
+ var handleSort = useCallback(function (field) {
33
+ if (!onSort) {
34
+ return;
35
+ }
36
+ var currentSort = sorting.find(function (_a) {
37
+ var fieldId = _a.fieldId;
38
+ return fieldId === field;
39
+ });
40
+ // если для выбранного столбца текущая сортировка ASC - меняем на DESC
41
+ if (currentSort && currentSort.sort === SortStates.ASC) {
42
+ var newSorting = __spreadArray(__spreadArray([], sorting.filter(function (_a) {
43
+ var fieldId = _a.fieldId;
44
+ return fieldId !== field;
45
+ }), true), [
46
+ { fieldId: field, sort: SortStates.DESC },
47
+ ], false);
48
+ return onSort(newSorting);
49
+ // если для выбранного столбца текущая сортировка DESC - убираем сортировку
50
+ }
51
+ else if (currentSort && currentSort.sort === SortStates.DESC) {
52
+ var newSorting = sorting.filter(function (_a) {
35
53
  var fieldId = _a.fieldId;
36
- return fieldId === field;
54
+ return fieldId !== field;
37
55
  });
38
- // если для выбранного столбца текущая сортировка ASC - меняем на DESC
39
- if (currentSort && currentSort.sort === SortStates.ASC) {
40
- var newSorting = __spreadArray(__spreadArray([], sorting.filter(function (_a) {
41
- var fieldId = _a.fieldId;
42
- return fieldId !== field;
43
- }), true), [
44
- { fieldId: field, sort: SortStates.DESC },
45
- ], false);
46
- return onSort(newSorting);
47
- // если для выбранного столбца текущая сортировка DESC - убираем сортировку
48
- }
49
- else if (currentSort && currentSort.sort === SortStates.DESC) {
50
- var newSorting = sorting.filter(function (_a) {
51
- var fieldId = _a.fieldId;
52
- return fieldId !== field;
53
- });
54
- return onSort(newSorting);
55
- }
56
- // если для выбранного столбца нет сортировки - добавляем сортировку ASC
57
- onSort(__spreadArray(__spreadArray([], sorting, true), [{ fieldId: field, sort: SortStates.ASC }], false));
56
+ return onSort(newSorting);
58
57
  }
58
+ // если для выбранного столбца нет сортировки - добавляем сортировку ASC
59
+ onSort(__spreadArray(__spreadArray([], sorting, true), [{ fieldId: field, sort: SortStates.ASC }], false));
59
60
  }, [sorting, onSort]);
60
61
  var renderColumns = useMemo(function () {
61
62
  return columns.map(function (_a) {
package/esm/DataGrid/DataGridHeadColumn/DataGridHeadColumn.d.ts CHANGED
@@ -2,7 +2,7 @@ import { CSSProperties } from 'react';
2
2
  import { TableCellProps } from '@mui/material';
3
3
  import { DataGridRow, DataGridSort } from '../types';
4
4
  export declare type DataGridHeadColumnProps<Data = DataGridRow, SortField extends keyof Data = keyof Data> = {
5
- onSort: (field: SortField, sortable?: boolean) => void;
5
+ onSort: (field: SortField) => void;
6
6
  sorting: DataGridSort<SortField>[];
7
7
  label?: string;
8
8
  sortable?: boolean;
package/esm/DataGrid/DataGridHeadColumn/DataGridHeadColumn.js CHANGED
@@ -23,9 +23,9 @@ export function DataGridHeadColumn(_a) {
23
23
  var hideSortIcon = useMemo(function () { return !Boolean(sortParams); }, [sortParams]);
24
24
  var sortDirection = useMemo(function () { return (sortParams ? sortParams.sort : SortStates.ASC); }, [sortParams]);
25
25
  var handleSortClick = function () {
26
- if (field) {
27
- onSort(field, sortable);
26
+ if (field && sortable) {
27
+ onSort(field);
28
28
  }
29
29
  };
30
- return (_jsxs(StyledTableCell, __assign({ onClick: handleSortClick, align: align, width: width }, { children: [_jsx(Typography, __assign({ variant: "pointer" }, { children: label })), sortable && (_jsx(StyledTableSortLabel, { hideSortIcon: hideSortIcon, direction: sortDirection, active: true }))] })));
30
+ return (_jsxs(StyledTableCell, __assign({ onClick: handleSortClick, align: align, width: width, sortable: sortable }, { children: [_jsx(Typography, __assign({ variant: "pointer" }, { children: label })), sortable && (_jsx(StyledTableSortLabel, { hideSortIcon: hideSortIcon, direction: sortDirection, active: true }))] })));
31
31
  }
package/esm/DataGrid/DataGridHeadColumn/styled.d.ts CHANGED
@@ -35,4 +35,5 @@ export declare const StyledTableCell: import("@emotion/styled").StyledComponent<
35
35
  theme?: import("@emotion/react").Theme | undefined;
36
36
  } & {
37
37
  width?: CSSProperties['width'];
38
+ sortable?: boolean | undefined;
38
39
  }, {}, {}>;
package/esm/DataGrid/DataGridHeadColumn/styled.js CHANGED
@@ -10,8 +10,17 @@ export var StyledTableSortLabel = styled(TableSortLabel)(templateObject_1 || (te
10
10
  });
11
11
  export var StyledTableCell = styled(TableCell, {
12
12
  shouldForwardProp: function (prop) { return prop !== 'width'; },
13
- })(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n width: ", ";\n\n cursor: pointer;\n\n user-select: none;\n"], ["\n width: ", ";\n\n cursor: pointer;\n\n user-select: none;\n"])), function (_a) {
13
+ })(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n width: ", ";\n\n cursor: ", ";\n padding: ", ";\n color: ", ";\n user-select: none;\n"], ["\n width: ", ";\n\n cursor: ", ";\n padding: ", ";\n color: ", ";\n user-select: none;\n"])), function (_a) {
14
14
  var _b = _a.width, width = _b === void 0 ? 'auto' : _b;
15
15
  return width;
16
+ }, function (_a) {
17
+ var sortable = _a.sortable;
18
+ return (sortable ? 'pointer' : 'initial');
19
+ }, function (_a) {
20
+ var theme = _a.theme;
21
+ return theme.spacing(3, 4);
22
+ }, function (_a) {
23
+ var theme = _a.theme;
24
+ return theme.palette.grey[700];
16
25
  });
17
26
  var templateObject_1, templateObject_2;
package/esm/theme/components/MuiOutlinedInput.js CHANGED
@@ -33,6 +33,7 @@ export var MuiOutlinedInput = {
33
33
  input: function (_a) {
34
34
  var theme = _a.theme;
35
35
  return {
36
+ height: 20,
36
37
  padding: theme.spacing(2.5, 2),
37
38
  borderRadius: theme.shape.small,
38
39
  '&:disabled': {
@@ -47,14 +48,14 @@ export var MuiOutlinedInput = {
47
48
  inputSizeSmall: function (_a) {
48
49
  var theme = _a.theme;
49
50
  return {
50
- paddingBlock: theme.spacing(2),
51
- paddingInline: theme.spacing(1.5),
51
+ paddingBlock: theme.spacing(1.5),
52
+ paddingInline: theme.spacing(2),
52
53
  };
53
54
  },
54
55
  notchedOutline: function (_a) {
55
56
  var theme = _a.theme;
56
57
  return {
57
- borderWidth: '2px',
58
+ borderWidth: 2,
58
59
  borderColor: theme.palette.grey[300],
59
60
  };
60
61
  },
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@astral/ui",
3
- "version": "0.41.1",
3
+ "version": "0.41.2",
4
4
  "browser": "./src/index.ts",
5
5
  "jest": {
6
6
  "moduleNameMapper": {
@@ -8,7 +8,7 @@
8
8
  }
9
9
  },
10
10
  "dependencies": {
11
- "@astral/icons": "^0.41.1",
11
+ "@astral/icons": "^0.41.2",
12
12
  "@emotion/cache": "11.7.1",
13
13
  "@emotion/react": "11.9.0",
14
14
  "@emotion/server": "11.4.0",
package/theme/components/MuiOutlinedInput.js CHANGED
@@ -36,6 +36,7 @@ exports.MuiOutlinedInput = {
36
36
  input: function (_a) {
37
37
  var theme = _a.theme;
38
38
  return {
39
+ height: 20,
39
40
  padding: theme.spacing(2.5, 2),
40
41
  borderRadius: theme.shape.small,
41
42
  '&:disabled': {
@@ -50,14 +51,14 @@ exports.MuiOutlinedInput = {
50
51
  inputSizeSmall: function (_a) {
51
52
  var theme = _a.theme;
52
53
  return {
53
- paddingBlock: theme.spacing(2),
54
- paddingInline: theme.spacing(1.5),
54
+ paddingBlock: theme.spacing(1.5),
55
+ paddingInline: theme.spacing(2),
55
56
  };
56
57
  },
57
58
  notchedOutline: function (_a) {
58
59
  var theme = _a.theme;
59
60
  return {
60
- borderWidth: '2px',
61
+ borderWidth: 2,
61
62
  borderColor: theme.palette.grey[300],
62
63
  };
63
64
  },