@astral/ui 0.38.0 → 0.39.0

package/DataGrid/DataGridHead/DataGridHead.js

@@ -62,8 +62,8 @@ function DataGridHead(_a) {
     }; }, [sorting]);
     var renderColumns = (0, react_1.useMemo)(function () {
         return columns.map(function (_a) {
-            var field = _a.field, label = _a.label, sortable = _a.sortable, align = _a.align, renderCell = _a.renderCell;
-            return ((0, jsx_runtime_1.jsx)(DataGridHeadColumn_1.DataGridHeadColumn, { sorting: sorting, renderCell: renderCell, field: field, onSort: handleSort, label: label, sortable: sortable, align: align }, field));
+            var field = _a.field, label = _a.label, sortable = _a.sortable, align = _a.align, width = _a.width;
+            return ((0, jsx_runtime_1.jsx)(DataGridHeadColumn_1.DataGridHeadColumn, { sorting: sorting, field: field, onSort: handleSort, label: label, sortable: sortable, align: align, width: width }, field));
         });
     }, [columns, handleSort, sorting]);
     return ((0, jsx_runtime_1.jsx)(TableHead_1.TableHead, { children: (0, jsx_runtime_1.jsxs)(Table_1.TableRow, { children: [selectable && ((0, jsx_runtime_1.jsx)(Table_1.TableCell, __assign({ padding: "checkbox" }, { children: (0, jsx_runtime_1.jsx)(Checkbox_1.Checkbox, { checked: checked, indeterminate: indeterminate, onChange: onSelectAllRows }, void 0) }), void 0)), renderColumns] }, void 0) }, void 0));

package/DataGrid/DataGridHeadColumn/DataGridHeadColumn.d.ts

@@ -1,3 +1,3 @@
 /// <reference types="react" />
 import { DataGridHeadColumnProps } from './types';
-export declare function DataGridHeadColumn<T>({ onSort, field, sortable, align, label, sorting, renderCell, }: DataGridHeadColumnProps<T>): JSX.Element;
+export declare function DataGridHeadColumn<T>({ onSort, field, sortable, align, label, sorting, width, }: DataGridHeadColumnProps<T>): JSX.Element;

package/DataGrid/DataGridHeadColumn/DataGridHeadColumn.js

@@ -17,14 +17,13 @@ var Typography_1 = require("../../Typography/Typography");
 var constants_1 = require("../constants");
 var styled_1 = require("./styled");
 function DataGridHeadColumn(_a) {
-    var onSort = _a.onSort, field = _a.field, sortable = _a.sortable, align = _a.align, label = _a.label, sorting = _a.sorting, renderCell = _a.renderCell;
+    var onSort = _a.onSort, field = _a.field, sortable = _a.sortable, align = _a.align, label = _a.label, sorting = _a.sorting, width = _a.width;
     var sortParams = sorting.find(function (_a) {
         var fieldId = _a.fieldId;
         return field === fieldId;
     });
     var hideSortIcon = !Boolean(sortParams);
     var sortDirection = sortParams ? sortParams.sort : constants_1.SortStates.ASC;
-    var fitContent = Boolean(renderCell);
-    return ((0, jsx_runtime_1.jsxs)(styled_1.StyledTableCell, __assign({ onClick: onSort(field, sortable), fitContent: fitContent, align: align }, { children: [(0, jsx_runtime_1.jsx)(Typography_1.Typography, __assign({ variant: "pointer" }, { children: label }), void 0), sortable && ((0, jsx_runtime_1.jsx)(styled_1.StyledTableSortLabel, { hideSortIcon: hideSortIcon, direction: sortDirection, active: true }, void 0))] }), void 0));
+    return ((0, jsx_runtime_1.jsxs)(styled_1.StyledTableCell, __assign({ onClick: onSort(field, sortable), align: align, width: width }, { children: [(0, jsx_runtime_1.jsx)(Typography_1.Typography, __assign({ variant: "pointer" }, { children: label }), void 0), sortable && ((0, jsx_runtime_1.jsx)(styled_1.StyledTableSortLabel, { hideSortIcon: hideSortIcon, direction: sortDirection, active: true }, void 0))] }), void 0));
 }
 exports.DataGridHeadColumn = DataGridHeadColumn;

package/DataGrid/DataGridHeadColumn/styled.d.ts

@@ -1,5 +1,5 @@
-/// <reference types="react" />
 import { TableCellProps } from '@mui/material';
+import { CSSProperties } from 'react';
 export declare const StyledTableSortLabel: import("@emotion/styled").StyledComponent<{
     active?: boolean | undefined;
     children?: import("react").ReactNode;
@@ -34,5 +34,5 @@ export declare const StyledTableSortLabel: import("@emotion/styled").StyledCompo
 export declare const StyledTableCell: import("@emotion/styled").StyledComponent<TableCellProps & {
     theme?: import("@emotion/react").Theme | undefined;
 } & {
-    fitContent?: boolean | undefined;
+    width?: CSSProperties['width'];
 }, {}, {}>;

package/DataGrid/DataGridHeadColumn/styled.js

@@ -12,9 +12,9 @@ exports.StyledTableSortLabel = (0, styles_1.styled)(Table_1.TableSortLabel)(temp
     return hideSortIcon && 'hidden';
 });
 exports.StyledTableCell = (0, styles_1.styled)(Table_1.TableCell, {
-    shouldForwardProp: function (prop) { return prop !== 'fitContent'; },
+    shouldForwardProp: function (prop) { return prop !== 'width'; },
 })(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) {
-    var fitContent = _a.fitContent;
-    return (fitContent ? '1%' : 'auto');
+    var _b = _a.width, width = _b === void 0 ? 'auto' : _b;
+    return width;
 });
 var templateObject_1, templateObject_2;

package/DataGrid/DataGridHeadColumn/types.d.ts

@@ -1,11 +1,12 @@
 import { TableCellProps } from '@mui/material';
-import { DataGridSort, RenderCell } from '../types';
+import { CSSProperties } from 'react';
+import { DataGridSort } from '../types';
 export declare type DataGridHeadColumnProps<T> = {
     onSort: (field: keyof T, sortable: boolean | undefined) => () => void;
     sorting: DataGridSort<T>[];
-    renderCell?: RenderCell<T>;
     label?: string;
     sortable?: boolean;
     align?: TableCellProps['align'];
     field: keyof T;
+    width?: CSSProperties['width'];
 };

package/DataGrid/types.d.ts

@@ -1,4 +1,4 @@
-import { ReactNode } from 'react';
+import { CSSProperties, ReactNode } from 'react';
 import { SortStates } from './constants';
 export declare type CellValue = string | number | boolean | Date | null | undefined | object;
 export declare type SortState = `${SortStates}`;
@@ -30,4 +30,5 @@ export declare type DataGridColumns<Column extends {}> = {
     renderCell?: RenderCell<Column>;
     format?: (data: Column) => CellValue;
     align?: 'inherit' | 'left' | 'center' | 'right' | 'justify';
+    width?: CSSProperties['width'];
 };

package/esm/DataGrid/DataGridHead/DataGridHead.js

@@ -59,8 +59,8 @@ export function DataGridHead(_a) {
     }; }, [sorting]);
     var renderColumns = useMemo(function () {
         return columns.map(function (_a) {
-            var field = _a.field, label = _a.label, sortable = _a.sortable, align = _a.align, renderCell = _a.renderCell;
-            return (_jsx(DataGridHeadColumn, { sorting: sorting, renderCell: renderCell, field: field, onSort: handleSort, label: label, sortable: sortable, align: align }, field));
+            var field = _a.field, label = _a.label, sortable = _a.sortable, align = _a.align, width = _a.width;
+            return (_jsx(DataGridHeadColumn, { sorting: sorting, field: field, onSort: handleSort, label: label, sortable: sortable, align: align, width: width }, field));
         });
     }, [columns, handleSort, sorting]);
     return (_jsx(TableHead, { children: _jsxs(TableRow, { children: [selectable && (_jsx(TableCell, __assign({ padding: "checkbox" }, { children: _jsx(Checkbox, { checked: checked, indeterminate: indeterminate, onChange: onSelectAllRows }, void 0) }), void 0)), renderColumns] }, void 0) }, void 0));

package/esm/DataGrid/DataGridHeadColumn/DataGridHeadColumn.d.ts

@@ -1,3 +1,3 @@
 /// <reference types="react" />
 import { DataGridHeadColumnProps } from './types';
-export declare function DataGridHeadColumn<T>({ onSort, field, sortable, align, label, sorting, renderCell, }: DataGridHeadColumnProps<T>): JSX.Element;
+export declare function DataGridHeadColumn<T>({ onSort, field, sortable, align, label, sorting, width, }: DataGridHeadColumnProps<T>): JSX.Element;

package/esm/DataGrid/DataGridHeadColumn/DataGridHeadColumn.js

@@ -14,13 +14,12 @@ import { Typography } from '../../Typography/Typography';
 import { SortStates } from '../constants';
 import { StyledTableCell, StyledTableSortLabel } from './styled';
 export function DataGridHeadColumn(_a) {
-    var onSort = _a.onSort, field = _a.field, sortable = _a.sortable, align = _a.align, label = _a.label, sorting = _a.sorting, renderCell = _a.renderCell;
+    var onSort = _a.onSort, field = _a.field, sortable = _a.sortable, align = _a.align, label = _a.label, sorting = _a.sorting, width = _a.width;
     var sortParams = sorting.find(function (_a) {
         var fieldId = _a.fieldId;
         return field === fieldId;
     });
     var hideSortIcon = !Boolean(sortParams);
     var sortDirection = sortParams ? sortParams.sort : SortStates.ASC;
-    var fitContent = Boolean(renderCell);
-    return (_jsxs(StyledTableCell, __assign({ onClick: onSort(field, sortable), fitContent: fitContent, align: align }, { children: [_jsx(Typography, __assign({ variant: "pointer" }, { children: label }), void 0), sortable && (_jsx(StyledTableSortLabel, { hideSortIcon: hideSortIcon, direction: sortDirection, active: true }, void 0))] }), void 0));
+    return (_jsxs(StyledTableCell, __assign({ onClick: onSort(field, sortable), align: align, width: width }, { children: [_jsx(Typography, __assign({ variant: "pointer" }, { children: label }), void 0), sortable && (_jsx(StyledTableSortLabel, { hideSortIcon: hideSortIcon, direction: sortDirection, active: true }, void 0))] }), void 0));
 }

package/esm/DataGrid/DataGridHeadColumn/styled.d.ts

@@ -1,5 +1,5 @@
-/// <reference types="react" />
 import { TableCellProps } from '@mui/material';
+import { CSSProperties } from 'react';
 export declare const StyledTableSortLabel: import("@emotion/styled").StyledComponent<{
     active?: boolean | undefined;
     children?: import("react").ReactNode;
@@ -34,5 +34,5 @@ export declare const StyledTableSortLabel: import("@emotion/styled").StyledCompo
 export declare const StyledTableCell: import("@emotion/styled").StyledComponent<TableCellProps & {
     theme?: import("@emotion/react").Theme | undefined;
 } & {
-    fitContent?: boolean | undefined;
+    width?: CSSProperties['width'];
 }, {}, {}>;

package/esm/DataGrid/DataGridHeadColumn/styled.js

@@ -9,9 +9,9 @@ export var StyledTableSortLabel = styled(TableSortLabel)(templateObject_1 || (te
     return hideSortIcon && 'hidden';
 });
 export var StyledTableCell = styled(TableCell, {
-    shouldForwardProp: function (prop) { return prop !== 'fitContent'; },
+    shouldForwardProp: function (prop) { return prop !== 'width'; },
 })(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) {
-    var fitContent = _a.fitContent;
-    return (fitContent ? '1%' : 'auto');
+    var _b = _a.width, width = _b === void 0 ? 'auto' : _b;
+    return width;
 });
 var templateObject_1, templateObject_2;

package/esm/DataGrid/DataGridHeadColumn/types.d.ts

@@ -1,11 +1,12 @@
 import { TableCellProps } from '@mui/material';
-import { DataGridSort, RenderCell } from '../types';
+import { CSSProperties } from 'react';
+import { DataGridSort } from '../types';
 export declare type DataGridHeadColumnProps<T> = {
     onSort: (field: keyof T, sortable: boolean | undefined) => () => void;
     sorting: DataGridSort<T>[];
-    renderCell?: RenderCell<T>;
     label?: string;
     sortable?: boolean;
     align?: TableCellProps['align'];
     field: keyof T;
+    width?: CSSProperties['width'];
 };

package/esm/DataGrid/types.d.ts

@@ -1,4 +1,4 @@
-import { ReactNode } from 'react';
+import { CSSProperties, ReactNode } from 'react';
 import { SortStates } from './constants';
 export declare type CellValue = string | number | boolean | Date | null | undefined | object;
 export declare type SortState = `${SortStates}`;
@@ -30,4 +30,5 @@ export declare type DataGridColumns<Column extends {}> = {
     renderCell?: RenderCell<Column>;
     format?: (data: Column) => CellValue;
     align?: 'inherit' | 'left' | 'center' | 'right' | 'justify';
+    width?: CSSProperties['width'];
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@astral/ui",
-  "version": "0.38.0",
+  "version": "0.39.0",
   "browser": "./src/index.ts",
   "jest": {
     "moduleNameMapper": {
@@ -8,7 +8,7 @@
     }
   },
   "dependencies": {
-    "@astral/icons": "^0.38.0",
+    "@astral/icons": "^0.39.0",
     "@emotion/cache": "11.7.1",
     "@emotion/react": "11.9.0",
     "@emotion/server": "11.4.0",