@astral/ui 0.37.0 → 0.38.0

package/ActionCell/ActionCell.js

@@ -46,6 +46,6 @@ function ActionCell(_a) {
                 return ((0, jsx_runtime_1.jsx)(MenuItem_1.MenuItem, __assign({ onClick: handleActionClick(onClick) }, { children: name }), name));
             }) }), void 0));
     }, [secondary, handleActionClick]);
-    return ((0, jsx_runtime_1.jsxs)(styles_1.ActionCellWrapper, { children: [main.map(function (action) { return renderMainAction(action); }), renderSecondaryActions] }, void 0));
+    return ((0, jsx_runtime_1.jsxs)(styles_1.ActionCellWrapper, __assign({ onClick: function (event) { return event.stopPropagation(); } }, { children: [main.map(function (action) { return renderMainAction(action); }), renderSecondaryActions] }), void 0));
 }
 exports.ActionCell = ActionCell;

package/ContentState/ContentState.js

@@ -15,10 +15,11 @@ exports.ContentState = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
 var react_1 = require("react");
 var __1 = require("..");
+var styles_1 = require("./styles");
 var ContentState = function (props) {
     var isLoading = props.isLoading, _a = props.loadingContent, LoadingContent = _a === void 0 ? (0, jsx_runtime_1.jsx)(__1.CircularProgress, { color: "primary" }, void 0) : _a, isError = props.isError, errorState = props.errorState, isCustom = props.isCustom, customState = props.customState, children = props.children;
     if (isLoading)
-        return (0, jsx_runtime_1.jsx)(react_1.Fragment, { children: LoadingContent }, void 0);
+        return (0, jsx_runtime_1.jsx)(styles_1.LoadingContainer, { children: LoadingContent }, void 0);
     if (isCustom && customState) {
         return (0, jsx_runtime_1.jsx)(__1.Placeholder, __assign({}, customState), void 0);
     }

package/ContentState/styles.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+export declare const LoadingContainer: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/ContentState/styles.js

@@ -0,0 +1,10 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LoadingContainer = void 0;
+var styles_1 = require("../styles");
+exports.LoadingContainer = styles_1.styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  width: 100%;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n"], ["\n  width: 100%;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n"])));
+var templateObject_1;

package/DataGrid/DataGrid.d.ts

@@ -1,3 +1,3 @@
 /// <reference types="react" />
 import { DataGridProps } from './types';
-export declare function DataGrid<T>({ columns, rows, selectedRows, sorting, maxHeight, minDisplayRows, onSelectRow, Footer, loading, onSort, keyId, }: DataGridProps<T>): JSX.Element;
+export declare function DataGrid<T>({ columns, rows, selectedRows, sorting, maxHeight, minDisplayRows, onRowClick, onSelectRow, Footer, loading, onSort, keyId, }: DataGridProps<T>): JSX.Element;

package/DataGrid/DataGrid.js

@@ -32,7 +32,7 @@ var DataGridBody_1 = require("./DataGridBody");
 var DataGridLoader_1 = __importDefault(require("./DataGridLoader/DataGridLoader"));
 var styled_1 = require("./styled");
 function DataGrid(_a) {
-    var columns = _a.columns, _b = _a.rows, rows = _b === void 0 ? [] : _b, _c = _a.selectedRows, selectedRows = _c === void 0 ? [] : _c, _d = _a.sorting, sorting = _d === void 0 ? [] : _d, maxHeight = _a.maxHeight, _e = _a.minDisplayRows, minDisplayRows = _e === void 0 ? 10 : _e, onSelectRow = _a.onSelectRow, Footer = _a.Footer, loading = _a.loading, onSort = _a.onSort, keyId = _a.keyId;
+    var columns = _a.columns, _b = _a.rows, rows = _b === void 0 ? [] : _b, _c = _a.selectedRows, selectedRows = _c === void 0 ? [] : _c, _d = _a.sorting, sorting = _d === void 0 ? [] : _d, maxHeight = _a.maxHeight, _e = _a.minDisplayRows, minDisplayRows = _e === void 0 ? 10 : _e, onRowClick = _a.onRowClick, onSelectRow = _a.onSelectRow, Footer = _a.Footer, loading = _a.loading, onSort = _a.onSort, keyId = _a.keyId;
     var selectable = Boolean(onSelectRow);
     var handleSelectAllRows = function (event) {
         if (!onSelectRow)
@@ -59,6 +59,6 @@ function DataGrid(_a) {
             return !selectedRows.find(function (selectedRow) { return selectedRow[keyId] === row[keyId]; });
         }).length;
     }, [rows, selectedRows, keyId]);
-    return ((0, jsx_runtime_1.jsxs)(styled_1.DataGridContainer, { children: [(0, jsx_runtime_1.jsxs)(styled_1.StyledTableContainer, __assign({ maxHeight: maxHeight }, { children: [(0, jsx_runtime_1.jsxs)(Table_1.Table, __assign({ stickyHeader: true }, { children: [(0, jsx_runtime_1.jsx)(DataGridHead_1.DataGridHead, { onSort: onSort, rowsCount: rows.length, uncheckedRowsCount: uncheckedRowsCount, onSelectAllRows: handleSelectAllRows, selectable: selectable, sorting: sorting, columns: columns }, void 0), (0, jsx_runtime_1.jsx)(DataGridBody_1.DataGridBody, { keyId: keyId, selectedRows: selectedRows, minDisplayRows: minDisplayRows, onSelectRow: handleSelectRow, selectable: selectable, rows: rows, columns: columns }, void 0)] }), void 0), (0, jsx_runtime_1.jsx)(DataGridLoader_1.default, { loading: loading }, void 0)] }), void 0), Footer] }, void 0));
+    return ((0, jsx_runtime_1.jsxs)(styled_1.DataGridContainer, { children: [(0, jsx_runtime_1.jsxs)(styled_1.StyledTableContainer, __assign({ maxHeight: maxHeight }, { children: [(0, jsx_runtime_1.jsxs)(Table_1.Table, __assign({ stickyHeader: true }, { children: [(0, jsx_runtime_1.jsx)(DataGridHead_1.DataGridHead, { onSort: onSort, rowsCount: rows.length, uncheckedRowsCount: uncheckedRowsCount, onSelectAllRows: handleSelectAllRows, selectable: selectable, sorting: sorting, columns: columns }, void 0), (0, jsx_runtime_1.jsx)(DataGridBody_1.DataGridBody, { keyId: keyId, selectedRows: selectedRows, minDisplayRows: minDisplayRows, onRowClick: onRowClick, onSelectRow: handleSelectRow, selectable: selectable, rows: rows, columns: columns }, void 0)] }), void 0), (0, jsx_runtime_1.jsx)(DataGridLoader_1.default, { loading: loading }, void 0)] }), void 0), Footer] }, void 0));
 }
 exports.DataGrid = DataGrid;

package/DataGrid/DataGridBody/DataGridBody.d.ts

@@ -1,3 +1,3 @@
 /// <reference types="react" />
 import { DataGridBodyProps } from './types';
-export declare function DataGridBody<T>({ rows, columns, selectable, onSelectRow, selectedRows, minDisplayRows, keyId, }: DataGridBodyProps<T>): JSX.Element;
+export declare function DataGridBody<T>({ rows, columns, selectable, onRowClick, onSelectRow, selectedRows, minDisplayRows, keyId, }: DataGridBodyProps<T>): JSX.Element;

package/DataGrid/DataGridBody/DataGridBody.js

@@ -19,21 +19,26 @@ var DataGridCell_1 = require("../DataGridCell");
 var Checkbox_1 = require("../../Checkbox");
 var styled_1 = require("./styled");
 function DataGridBody(_a) {
-    var rows = _a.rows, columns = _a.columns, selectable = _a.selectable, onSelectRow = _a.onSelectRow, _b = _a.selectedRows, selectedRows = _b === void 0 ? [] : _b, minDisplayRows = _a.minDisplayRows, keyId = _a.keyId;
+    var rows = _a.rows, columns = _a.columns, selectable = _a.selectable, onRowClick = _a.onRowClick, onSelectRow = _a.onSelectRow, _b = _a.selectedRows, selectedRows = _b === void 0 ? [] : _b, minDisplayRows = _a.minDisplayRows, keyId = _a.keyId;
     var renderCells = (0, react_1.useCallback)(function (row, rowId) {
         return columns.map(function (cell, index) {
             var cellId = "".concat(rowId, "-").concat(index);
             return (0, jsx_runtime_1.jsx)(DataGridCell_1.DataGridCell, { row: row, cell: cell }, cellId);
         });
     }, [columns]);
+    var handleRowClick = function (row) { return function () {
+        if (onRowClick) {
+            onRowClick(row);
+        }
+    }; };
     var renderedRows = (0, react_1.useMemo)(function () {
         return rows.map(function (row) {
             var rowId = row[keyId];
             var checked = selectable &&
                 Boolean(selectedRows.find(function (selectedRow) { return selectedRow[keyId] === rowId; }));
-            return ((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, onChange: onSelectRow(row) }, void 0) }), void 0)), renderCells(row, rowId)] }, rowId));
+            return ((0, jsx_runtime_1.jsxs)(Table_1.TableRow, __assign({ hover: Boolean(onRowClick), onClick: handleRowClick(row) }, { children: [selectable && ((0, jsx_runtime_1.jsx)(Table_1.TableCell, __assign({ padding: "checkbox", onClick: function (event) { return event.stopPropagation(); } }, { children: (0, jsx_runtime_1.jsx)(Checkbox_1.Checkbox, { checked: checked, onChange: onSelectRow(row) }, void 0) }), void 0)), renderCells(row, rowId)] }), rowId));
         });
-    }, [rows, keyId, selectable, selectedRows, onSelectRow, columns]);
+    }, [rows, keyId, selectable, selectedRows, onSelectRow, onRowClick, columns]);
     return ((0, jsx_runtime_1.jsx)(styled_1.StyledTableBody, __assign({ empty: !rows.length, minDisplayRows: minDisplayRows }, { children: renderedRows }), void 0));
 }
 exports.DataGridBody = DataGridBody;

package/DataGrid/DataGridBody/types.d.ts

@@ -3,6 +3,7 @@ import { DataGridColumns, DataGridRow } from '../types';
 export declare type DataGridBodyProps<T = DataGridRow> = {
     columns: DataGridColumns<T>[];
     keyId: keyof DataGridRow;
+    onRowClick?: (row: T) => void;
     selectable?: boolean;
     selectedRows?: Array<T>;
     rows: T[];

package/DataGrid/types.d.ts

@@ -12,6 +12,7 @@ export declare type DataGridProps<T = DataGridRow> = {
     rows: T[];
     columns: DataGridColumns<T>[];
     keyId: keyof DataGridRow;
+    onRowClick?: (row: T) => void;
     selectedRows?: Array<T>;
     onSelectRow?: (row: T[]) => void;
     sorting?: DataGridSort<T>[];

package/IconDropdownButton/IconDropdownButton.js

@@ -32,5 +32,5 @@ var Menu_1 = require("../Menu");
 exports.IconDropdownButton = (0, react_1.forwardRef)(function (_a, ref) {
     var children = _a.children, icon = _a.icon, props = __rest(_a, ["children", "icon"]);
     var _b = (0, hooks_1.useMenu)(ref), open = _b.open, anchorRef = _b.anchorRef, handleOpenMenu = _b.handleOpenMenu, handleCloseMenu = _b.handleCloseMenu;
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.ClickAwayListener, __assign({ onClickAway: handleCloseMenu }, { children: (0, jsx_runtime_1.jsx)(IconButton_1.IconButton, __assign({}, props, { ref: anchorRef, onClick: handleOpenMenu, selected: open }, { children: icon }), void 0) }), void 0), (0, jsx_runtime_1.jsx)(Menu_1.Menu, __assign({ open: open, anchorEl: anchorRef.current }, { children: children }), void 0)] }, void 0));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.ClickAwayListener, __assign({ onClickAway: handleCloseMenu, mouseEvent: "onMouseDown" }, { children: (0, jsx_runtime_1.jsx)(IconButton_1.IconButton, __assign({}, props, { ref: anchorRef, onClick: handleOpenMenu, selected: open }, { children: icon }), void 0) }), void 0), (0, jsx_runtime_1.jsx)(Menu_1.Menu, __assign({ open: open, anchorEl: anchorRef.current }, { children: children }), void 0)] }, void 0));
 });

package/esm/ActionCell/ActionCell.js

@@ -43,5 +43,5 @@ export function ActionCell(_a) {
                 return (_jsx(MenuItem, __assign({ onClick: handleActionClick(onClick) }, { children: name }), name));
             }) }), void 0));
     }, [secondary, handleActionClick]);
-    return (_jsxs(ActionCellWrapper, { children: [main.map(function (action) { return renderMainAction(action); }), renderSecondaryActions] }, void 0));
+    return (_jsxs(ActionCellWrapper, __assign({ onClick: function (event) { return event.stopPropagation(); } }, { children: [main.map(function (action) { return renderMainAction(action); }), renderSecondaryActions] }), void 0));
 }

package/esm/ContentState/ContentState.js

@@ -12,10 +12,11 @@ var __assign = (this && this.__assign) || function () {
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Fragment } from 'react';
 import { Button, CircularProgress, Placeholder, Typography } from '..';
+import { LoadingContainer } from './styles';
 export var ContentState = function (props) {
     var isLoading = props.isLoading, _a = props.loadingContent, LoadingContent = _a === void 0 ? _jsx(CircularProgress, { color: "primary" }, void 0) : _a, isError = props.isError, errorState = props.errorState, isCustom = props.isCustom, customState = props.customState, children = props.children;
     if (isLoading)
-        return _jsx(Fragment, { children: LoadingContent }, void 0);
+        return _jsx(LoadingContainer, { children: LoadingContent }, void 0);
     if (isCustom && customState) {
         return _jsx(Placeholder, __assign({}, customState), void 0);
     }

package/esm/ContentState/styles.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+export declare const LoadingContainer: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/esm/ContentState/styles.js

@@ -0,0 +1,7 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import { styled } from '../styles';
+export var LoadingContainer = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  width: 100%;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n"], ["\n  width: 100%;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n"])));
+var templateObject_1;

package/esm/DataGrid/DataGrid.d.ts

@@ -1,3 +1,3 @@
 /// <reference types="react" />
 import { DataGridProps } from './types';
-export declare function DataGrid<T>({ columns, rows, selectedRows, sorting, maxHeight, minDisplayRows, onSelectRow, Footer, loading, onSort, keyId, }: DataGridProps<T>): JSX.Element;
+export declare function DataGrid<T>({ columns, rows, selectedRows, sorting, maxHeight, minDisplayRows, onRowClick, onSelectRow, Footer, loading, onSort, keyId, }: DataGridProps<T>): JSX.Element;

package/esm/DataGrid/DataGrid.js

@@ -26,7 +26,7 @@ import { DataGridBody } from './DataGridBody';
 import DataGridLoader from './DataGridLoader/DataGridLoader';
 import { DataGridContainer, StyledTableContainer } from './styled';
 export function DataGrid(_a) {
-    var columns = _a.columns, _b = _a.rows, rows = _b === void 0 ? [] : _b, _c = _a.selectedRows, selectedRows = _c === void 0 ? [] : _c, _d = _a.sorting, sorting = _d === void 0 ? [] : _d, maxHeight = _a.maxHeight, _e = _a.minDisplayRows, minDisplayRows = _e === void 0 ? 10 : _e, onSelectRow = _a.onSelectRow, Footer = _a.Footer, loading = _a.loading, onSort = _a.onSort, keyId = _a.keyId;
+    var columns = _a.columns, _b = _a.rows, rows = _b === void 0 ? [] : _b, _c = _a.selectedRows, selectedRows = _c === void 0 ? [] : _c, _d = _a.sorting, sorting = _d === void 0 ? [] : _d, maxHeight = _a.maxHeight, _e = _a.minDisplayRows, minDisplayRows = _e === void 0 ? 10 : _e, onRowClick = _a.onRowClick, onSelectRow = _a.onSelectRow, Footer = _a.Footer, loading = _a.loading, onSort = _a.onSort, keyId = _a.keyId;
     var selectable = Boolean(onSelectRow);
     var handleSelectAllRows = function (event) {
         if (!onSelectRow)
@@ -53,5 +53,5 @@ export function DataGrid(_a) {
             return !selectedRows.find(function (selectedRow) { return selectedRow[keyId] === row[keyId]; });
         }).length;
     }, [rows, selectedRows, keyId]);
-    return (_jsxs(DataGridContainer, { children: [_jsxs(StyledTableContainer, __assign({ maxHeight: maxHeight }, { children: [_jsxs(Table, __assign({ stickyHeader: true }, { children: [_jsx(DataGridHead, { onSort: onSort, rowsCount: rows.length, uncheckedRowsCount: uncheckedRowsCount, onSelectAllRows: handleSelectAllRows, selectable: selectable, sorting: sorting, columns: columns }, void 0), _jsx(DataGridBody, { keyId: keyId, selectedRows: selectedRows, minDisplayRows: minDisplayRows, onSelectRow: handleSelectRow, selectable: selectable, rows: rows, columns: columns }, void 0)] }), void 0), _jsx(DataGridLoader, { loading: loading }, void 0)] }), void 0), Footer] }, void 0));
+    return (_jsxs(DataGridContainer, { children: [_jsxs(StyledTableContainer, __assign({ maxHeight: maxHeight }, { children: [_jsxs(Table, __assign({ stickyHeader: true }, { children: [_jsx(DataGridHead, { onSort: onSort, rowsCount: rows.length, uncheckedRowsCount: uncheckedRowsCount, onSelectAllRows: handleSelectAllRows, selectable: selectable, sorting: sorting, columns: columns }, void 0), _jsx(DataGridBody, { keyId: keyId, selectedRows: selectedRows, minDisplayRows: minDisplayRows, onRowClick: onRowClick, onSelectRow: handleSelectRow, selectable: selectable, rows: rows, columns: columns }, void 0)] }), void 0), _jsx(DataGridLoader, { loading: loading }, void 0)] }), void 0), Footer] }, void 0));
 }

package/esm/DataGrid/DataGridBody/DataGridBody.d.ts

@@ -1,3 +1,3 @@
 /// <reference types="react" />
 import { DataGridBodyProps } from './types';
-export declare function DataGridBody<T>({ rows, columns, selectable, onSelectRow, selectedRows, minDisplayRows, keyId, }: DataGridBodyProps<T>): JSX.Element;
+export declare function DataGridBody<T>({ rows, columns, selectable, onRowClick, onSelectRow, selectedRows, minDisplayRows, keyId, }: DataGridBodyProps<T>): JSX.Element;

package/esm/DataGrid/DataGridBody/DataGridBody.js

@@ -16,20 +16,25 @@ import { DataGridCell } from '../DataGridCell';
 import { Checkbox } from '../../Checkbox';
 import { StyledTableBody } from './styled';
 export function DataGridBody(_a) {
-    var rows = _a.rows, columns = _a.columns, selectable = _a.selectable, onSelectRow = _a.onSelectRow, _b = _a.selectedRows, selectedRows = _b === void 0 ? [] : _b, minDisplayRows = _a.minDisplayRows, keyId = _a.keyId;
+    var rows = _a.rows, columns = _a.columns, selectable = _a.selectable, onRowClick = _a.onRowClick, onSelectRow = _a.onSelectRow, _b = _a.selectedRows, selectedRows = _b === void 0 ? [] : _b, minDisplayRows = _a.minDisplayRows, keyId = _a.keyId;
     var renderCells = useCallback(function (row, rowId) {
         return columns.map(function (cell, index) {
             var cellId = "".concat(rowId, "-").concat(index);
             return _jsx(DataGridCell, { row: row, cell: cell }, cellId);
         });
     }, [columns]);
+    var handleRowClick = function (row) { return function () {
+        if (onRowClick) {
+            onRowClick(row);
+        }
+    }; };
     var renderedRows = useMemo(function () {
         return rows.map(function (row) {
             var rowId = row[keyId];
             var checked = selectable &&
                 Boolean(selectedRows.find(function (selectedRow) { return selectedRow[keyId] === rowId; }));
-            return (_jsxs(TableRow, { children: [selectable && (_jsx(TableCell, __assign({ padding: "checkbox" }, { children: _jsx(Checkbox, { checked: checked, onChange: onSelectRow(row) }, void 0) }), void 0)), renderCells(row, rowId)] }, rowId));
+            return (_jsxs(TableRow, __assign({ hover: Boolean(onRowClick), onClick: handleRowClick(row) }, { children: [selectable && (_jsx(TableCell, __assign({ padding: "checkbox", onClick: function (event) { return event.stopPropagation(); } }, { children: _jsx(Checkbox, { checked: checked, onChange: onSelectRow(row) }, void 0) }), void 0)), renderCells(row, rowId)] }), rowId));
         });
-    }, [rows, keyId, selectable, selectedRows, onSelectRow, columns]);
+    }, [rows, keyId, selectable, selectedRows, onSelectRow, onRowClick, columns]);
     return (_jsx(StyledTableBody, __assign({ empty: !rows.length, minDisplayRows: minDisplayRows }, { children: renderedRows }), void 0));
 }

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

@@ -3,6 +3,7 @@ import { DataGridColumns, DataGridRow } from '../types';
 export declare type DataGridBodyProps<T = DataGridRow> = {
     columns: DataGridColumns<T>[];
     keyId: keyof DataGridRow;
+    onRowClick?: (row: T) => void;
     selectable?: boolean;
     selectedRows?: Array<T>;
     rows: T[];

package/esm/DataGrid/types.d.ts

@@ -12,6 +12,7 @@ export declare type DataGridProps<T = DataGridRow> = {
     rows: T[];
     columns: DataGridColumns<T>[];
     keyId: keyof DataGridRow;
+    onRowClick?: (row: T) => void;
     selectedRows?: Array<T>;
     onSelectRow?: (row: T[]) => void;
     sorting?: DataGridSort<T>[];

package/esm/IconDropdownButton/IconDropdownButton.js

@@ -29,5 +29,5 @@ import { Menu } from '../Menu';
 export var IconDropdownButton = forwardRef(function (_a, ref) {
     var children = _a.children, icon = _a.icon, props = __rest(_a, ["children", "icon"]);
     var _b = useMenu(ref), open = _b.open, anchorRef = _b.anchorRef, handleOpenMenu = _b.handleOpenMenu, handleCloseMenu = _b.handleCloseMenu;
-    return (_jsxs(_Fragment, { children: [_jsx(ClickAwayListener, __assign({ onClickAway: handleCloseMenu }, { children: _jsx(IconButton, __assign({}, props, { ref: anchorRef, onClick: handleOpenMenu, selected: open }, { children: icon }), void 0) }), void 0), _jsx(Menu, __assign({ open: open, anchorEl: anchorRef.current }, { children: children }), void 0)] }, void 0));
+    return (_jsxs(_Fragment, { children: [_jsx(ClickAwayListener, __assign({ onClickAway: handleCloseMenu, mouseEvent: "onMouseDown" }, { children: _jsx(IconButton, __assign({}, props, { ref: anchorRef, onClick: handleOpenMenu, selected: open }, { children: icon }), void 0) }), void 0), _jsx(Menu, __assign({ open: open, anchorEl: anchorRef.current }, { children: children }), void 0)] }, void 0));
 });

package/esm/theme/components/MuiOutlinedInput.js

@@ -11,8 +11,7 @@ export var MuiOutlinedInput = {
                 color: theme.palette.grey[900],
                 background: theme.palette.background.element,
                 '&:hover': {
-                    // FIXME: to theme
-                    background: '#EEF1F4',
+                    background: theme.palette.background.elementHover,
                     '&.Mui-disabled': {
                         background: theme.palette.background.element,
                     },

package/esm/theme/components/MuiTableRow.d.ts

@@ -0,0 +1,3 @@
+import { Components } from '@mui/material';
+import type { Theme } from '../baseTheme';
+export declare const MuiTableRow: Components<Theme>['MuiTableRow'];

package/esm/theme/components/MuiTableRow.js

@@ -0,0 +1,13 @@
+export var MuiTableRow = {
+    styleOverrides: {
+        root: function (_a) {
+            var theme = _a.theme;
+            return {
+                '&.MuiTableRow-hover:hover': {
+                    backgroundColor: theme.palette.background.elementHover,
+                    cursor: 'pointer',
+                },
+            };
+        },
+    },
+};

package/esm/theme/components/components.js

@@ -15,6 +15,7 @@ import { MuiDialogContent } from './MuiDialogContent';
 import { MuiDialogActions } from './MuiDialogActions';
 import { MuiTableCell } from './MuiTableCell';
 import { MuiTableHead } from './MuiTableHead';
+import { MuiTableRow } from './MuiTableRow';
 import { MuiPickersDay } from './MuiPickersDay';
 import { MuiCalendarPicker } from './MuiCalendarPicker';
 import { MuiYearPicker } from './MuiYearPicker';
@@ -56,6 +57,7 @@ export var getComponents = function (fontUrls) { return ({
     MuiDialogActions: MuiDialogActions,
     MuiTableCell: MuiTableCell,
     MuiTableHead: MuiTableHead,
+    MuiTableRow: MuiTableRow,
     MuiPaginationItem: MuiPaginationItem,
     MuiPickersDay: MuiPickersDay,
     MuiCalendarPicker: MuiCalendarPicker,

package/esm/theme/palette/palette.js

@@ -98,7 +98,7 @@ export var getPalette = function (brand) {
             default: '#FFF',
             paper: '#FFF',
             element: '#FAFBFC',
-            elementHover: '#EBECF0',
+            elementHover: '#EEF1F4',
             modalShadow: '#142A438A',
         },
     };

package/package.json

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

package/theme/components/MuiOutlinedInput.js

@@ -14,8 +14,7 @@ exports.MuiOutlinedInput = {
                 color: theme.palette.grey[900],
                 background: theme.palette.background.element,
                 '&:hover': {
-                    // FIXME: to theme
-                    background: '#EEF1F4',
+                    background: theme.palette.background.elementHover,
                     '&.Mui-disabled': {
                         background: theme.palette.background.element,
                     },

package/theme/components/MuiTableRow.d.ts

@@ -0,0 +1,3 @@
+import { Components } from '@mui/material';
+import type { Theme } from '../baseTheme';
+export declare const MuiTableRow: Components<Theme>['MuiTableRow'];

package/theme/components/MuiTableRow.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MuiTableRow = void 0;
+exports.MuiTableRow = {
+    styleOverrides: {
+        root: function (_a) {
+            var theme = _a.theme;
+            return {
+                '&.MuiTableRow-hover:hover': {
+                    backgroundColor: theme.palette.background.elementHover,
+                    cursor: 'pointer',
+                },
+            };
+        },
+    },
+};

package/theme/components/components.js

@@ -18,6 +18,7 @@ var MuiDialogContent_1 = require("./MuiDialogContent");
 var MuiDialogActions_1 = require("./MuiDialogActions");
 var MuiTableCell_1 = require("./MuiTableCell");
 var MuiTableHead_1 = require("./MuiTableHead");
+var MuiTableRow_1 = require("./MuiTableRow");
 var MuiPickersDay_1 = require("./MuiPickersDay");
 var MuiCalendarPicker_1 = require("./MuiCalendarPicker");
 var MuiYearPicker_1 = require("./MuiYearPicker");
@@ -59,6 +60,7 @@ var getComponents = function (fontUrls) { return ({
     MuiDialogActions: MuiDialogActions_1.MuiDialogActions,
     MuiTableCell: MuiTableCell_1.MuiTableCell,
     MuiTableHead: MuiTableHead_1.MuiTableHead,
+    MuiTableRow: MuiTableRow_1.MuiTableRow,
     MuiPaginationItem: MuiPaginationItem_1.MuiPaginationItem,
     MuiPickersDay: MuiPickersDay_1.MuiPickersDay,
     MuiCalendarPicker: MuiCalendarPicker_1.MuiCalendarPicker,

package/theme/palette/palette.js

@@ -101,7 +101,7 @@ var getPalette = function (brand) {
             default: '#FFF',
             paper: '#FFF',
             element: '#FAFBFC',
-            elementHover: '#EBECF0',
+            elementHover: '#EEF1F4',
             modalShadow: '#142A438A',
         },
     };