diff --git a/.github/workflows/nextjs.yml b/.github/workflows/nextjs.yml
index d3dbedde..96fed201 100644
--- a/.github/workflows/nextjs.yml
+++ b/.github/workflows/nextjs.yml
@@ -43,7 +43,7 @@ jobs:
node-version: "18.x"
cache: 'pnpm'
- name: Restore cache
- uses: actions/cache@v3
+ uses: actions/cache@v4
with:
path: |
.next/cache
diff --git a/apps/docs/components/ExampleConfirmButton.tsx b/apps/docs/components/ExampleConfirmButton.tsx
index 6601676c..77df1b97 100644
--- a/apps/docs/components/ExampleConfirmButton.tsx
+++ b/apps/docs/components/ExampleConfirmButton.tsx
@@ -4,11 +4,12 @@ export function ExampleConfirmButton() {
return (
// @highlight-start
{ }}>
+ onConfirm={() => { }}
+ header={'Potvrdite brisanje'}
+ message='Jeste li sigurni da želite obrisati ovaj zapis?'
+ >
Obriši
// @highlight-end
diff --git a/apps/docs/components/ExampleConfirmButtonIcon.tsx b/apps/docs/components/ExampleConfirmButtonIcon.tsx
new file mode 100644
index 00000000..1e1eab93
--- /dev/null
+++ b/apps/docs/components/ExampleConfirmButtonIcon.tsx
@@ -0,0 +1,19 @@
+import { ConfirmButton } from '@enterwell/react-ui';
+import { Delete } from '@mui/icons-material';
+
+export function ExampleConfirmButtonIcon() {
+ return (
+ // @highlight-start
+ { }}
+ header={'Potvrdite brisanje'}
+ message='Jeste li sigurni da želite obrisati ovaj zapis?'
+ >
+
+
+ // @highlight-end
+ )
+}
\ No newline at end of file
diff --git a/apps/docs/components/ExampleDropdownButton.tsx b/apps/docs/components/ExampleDropdownButton.tsx
index 512eb568..06dfd0ab 100644
--- a/apps/docs/components/ExampleDropdownButton.tsx
+++ b/apps/docs/components/ExampleDropdownButton.tsx
@@ -20,7 +20,8 @@ export function ExampleDropdownButton() {
options={[
{ label: 'Option 1', value: 'option1' },
{ label: 'Option 2', value: 'option2' },
- ]}>
+ ]}
+ >
Export
{/* // @highlight-end */}
diff --git a/apps/docs/components/ExampleUseDataGrid.tsx b/apps/docs/components/ExampleUseDataGrid.tsx
index c8bbf426..acfb052a 100644
--- a/apps/docs/components/ExampleUseDataGrid.tsx
+++ b/apps/docs/components/ExampleUseDataGrid.tsx
@@ -46,7 +46,7 @@ export function ExampleUseDataGrid() {
});
useEffect(() => {
- dataGrid.filterChanged();
+ dataGrid.refreshTable();
}, []);
return (
diff --git a/apps/docs/package.json b/apps/docs/package.json
index 1e37c2ab..bd32d00a 100644
--- a/apps/docs/package.json
+++ b/apps/docs/package.json
@@ -26,16 +26,16 @@
"@enterwell/react-ui": "workspace:*",
"@mdx-js/mdx": "3.0.0",
"@mdx-js/react": "3.0.0",
- "@mui/icons-material": "5.15.3",
- "@mui/lab": "5.0.0-alpha.159",
- "@mui/material": "5.15.3",
- "@mui/system": "5.15.3",
- "@mui/x-data-grid-pro": "6.18.7",
+ "@mui/icons-material": "5.15.5",
+ "@mui/lab": "5.0.0-alpha.161",
+ "@mui/material": "5.15.5",
+ "@mui/system": "5.15.5",
+ "@mui/x-data-grid-pro": "6.19.1",
"@mui/x-date-pickers": "5.0.20",
"@mui/x-date-pickers-pro": "5.0.20",
"classix": "2.1.35",
"comment-parser": "1.4.1",
- "next": "14.0.4",
+ "next": "14.1.0",
"nextra": "2.13.2",
"nextra-theme-docs": "2.13.2",
"react": "18.2.0",
@@ -43,10 +43,10 @@
"tailwindcss-animate": "1.0.7"
},
"devDependencies": {
- "@types/node": "18.19.6",
- "@types/react": "18.2.47",
+ "@types/node": "18.19.8",
+ "@types/react": "18.2.48",
"@types/react-dom": "18.2.18",
- "autoprefixer": "10.4.16",
+ "autoprefixer": "10.4.17",
"postcss": "8.4.33",
"tailwindcss": "3.4.1",
"typescript": "5.3.3",
diff --git a/apps/docs/pages/react-ui/components/confirm-button.mdx b/apps/docs/pages/react-ui/components/confirm-button.mdx
index 4a216a8d..f97befae 100644
--- a/apps/docs/pages/react-ui/components/confirm-button.mdx
+++ b/apps/docs/pages/react-ui/components/confirm-button.mdx
@@ -5,6 +5,7 @@ title: ConfirmButton
import { ConfirmButton } from '@enterwell/react-ui';
import { ComponentWithSource } from '../../../components/docs/ComponentWithSource.tsx';
import { ExampleConfirmButton } from '../../../components/ExampleConfirmButton.tsx';
+import { ExampleConfirmButtonIcon } from '../../../components/ExampleConfirmButtonIcon.tsx';
import { ComponentDescription, ComponentParameters, ComponentSource } from '../../../components/docs/ComponentDocs';
# ConfirmButton
@@ -21,6 +22,10 @@ import { ComponentDescription, ComponentParameters, ComponentSource } from '../.
+## As icon button
+
+
+
## Inspect
diff --git a/package.json b/package.json
index 96943ff5..e6d717c1 100644
--- a/package.json
+++ b/package.json
@@ -11,6 +11,6 @@
"turbo": "1.11.3",
"@turbo/gen": "1.11.3"
},
- "packageManager": "pnpm@8.14.0",
+ "packageManager": "pnpm@8.14.1",
"name": "ui"
}
diff --git a/packages/react-hooks/package.json b/packages/react-hooks/package.json
index 26a79eb1..b71cec06 100644
--- a/packages/react-hooks/package.json
+++ b/packages/react-hooks/package.json
@@ -24,8 +24,8 @@
},
"devDependencies": {
"@microsoft/api-extractor": "7.39.1",
- "@types/node": "18.19.6",
- "@types/react": "18.2.47",
+ "@types/node": "18.19.8",
+ "@types/react": "18.2.48",
"@types/react-dom": "18.2.18",
"eslint-config-custom": "workspace:*",
"react": "18.2.0",
diff --git a/packages/react-mui-hooks/changes/Changed [useDataGrid] Properly forwarding the ColDef's `cellClassName` property b/packages/react-mui-hooks/changes/Changed [useDataGrid] Properly forwarding the ColDef's `cellClassName` property
new file mode 100644
index 00000000..e69de29b
diff --git a/packages/react-mui-hooks/changes/Changed [useDataGrid] `filterChanged` prop renamed to `refreshTable` b/packages/react-mui-hooks/changes/Changed [useDataGrid] `filterChanged` prop renamed to `refreshTable`
new file mode 100644
index 00000000..e69de29b
diff --git a/packages/react-mui-hooks/changes/Fixed [useDataGrid] Keyboard navigation b/packages/react-mui-hooks/changes/Fixed [useDataGrid] Keyboard navigation
new file mode 100644
index 00000000..e69de29b
diff --git a/packages/react-mui-hooks/changes/Fixed [useDataGrid] Reduced the number of rerenders b/packages/react-mui-hooks/changes/Fixed [useDataGrid] Reduced the number of rerenders
new file mode 100644
index 00000000..e69de29b
diff --git a/packages/react-mui-hooks/hooks/useDataGrid.tsx b/packages/react-mui-hooks/hooks/useDataGrid.tsx
index a1efa001..217c285e 100644
--- a/packages/react-mui-hooks/hooks/useDataGrid.tsx
+++ b/packages/react-mui-hooks/hooks/useDataGrid.tsx
@@ -2,6 +2,7 @@ import {
type ComponentPropsWithRef,
type PropsWithChildren,
isValidElement,
+ KeyboardEvent,
useCallback,
useEffect,
useMemo,
@@ -327,7 +328,7 @@ export type UseDataGridProps = {
*/
export type UseDataGridResponse = {
props: ComponentPropsWithRef,
- filterChanged: (keepPage?: boolean) => void,
+ refreshTable: (keepPage?: boolean) => void,
isSelectAll: boolean,
setIsSelectAll: (value: boolean) => void,
isAnySelected: boolean,
@@ -406,10 +407,11 @@ export function useDataGrid({
}, [pageSize, sortModel, filterModel, onPage, loading]);
/**
- * Handles filter changed. This will go back to first page and request page.
- * @param keepPage - If set to true, when filter is changed, page will remain selected; returns to first page if set to false.
+ * Handles the table refresh. This will go back to the first page and request a new one.
+ *
+ * @param keepPage - If set to true, when table is refreshed, page will remain selected; returns to first page if set to false.
*/
- const handleFilterChanged = (keepPage = false) => {
+ const handleTableRefresh = (keepPage = false) => {
if (!keepPage) setPageIndex(-1);
handleLoadPage(keepPage ? pageIndex : -1, true);
@@ -527,24 +529,24 @@ export function useDataGrid({
}, [customSelectionModel, allRows]);
/**
- * Handles the select all checkbox click.
- * @param {GridCellParams} params The params.
- * @param {MuiEvent>} event The event.
- * @param {GridCallbackDetails} details The details.
- * @returns {void}
+ * Handles action fired when a keydown event comes from a cell element.
+ * @param params Grid cell properties.
+ * @param event The event object.
+ * @param details Additional details for the callback.
*/
- const handleCellKeyDown = (
- params: GridCellParams,
- event: MuiEvent>,
- details: any // NOTE: Workaournd for unavailable API in types
- ) => {
- if (selection
- && !checkboxSelection) {
- const currentRowIndex = allRows.indexOf(params.row);
- const nextRowIndex = Math.min(Math.max(currentRowIndex + (event.key === 'ArrowDown' ? 1 : -1), 0), allRows.length - 1);
- const nextRowId = details.api.getRowIdFromRowIndex(nextRowIndex);
- if (nextRowId) {
- setCustomSelectionModel([nextRowId]);
+ const handleCellKeyDown = (params: GridCellParams, event: MuiEvent>, details: any) => {
+ if (selection && !checkboxSelection) {
+ // Move the selected row index only if the key pressed is either ArrowUp or ArrowDown
+ if (event.key === 'ArrowUp' || event.key === 'ArrowDown') {
+ const currentRowId = details.api.getRowId(params.row);
+ const currentRowIndex = details.api.getRowIndexRelativeToVisibleRows(currentRowId);
+
+ const nextRowIndex = Math.min(Math.max(currentRowIndex + (event.key === 'ArrowDown' ? 1 : -1), 0), allRows.length - 1);
+ const nextRowId = details.api.getRowIdFromRowIndex(nextRowIndex);
+
+ if (nextRowId && nextRowId !== currentRowId) {
+ setCustomSelectionModel([ nextRowId ]);
+ }
}
}
};
@@ -576,7 +578,7 @@ export function useDataGrid({
return {
...c,
- cellClassName: () => 'mui-datagrid-cell-narrow-on-mobile',
+ cellClassName: `${c.cellClassName || ''} mui-datagrid-cell-narrow-on-mobile`,
renderCell: c.renderCell || ((params: ExtendedGridRenderCellParams) => (
0,
diff --git a/packages/react-mui-hooks/package.json b/packages/react-mui-hooks/package.json
index 3998d2a9..3bf4c90a 100644
--- a/packages/react-mui-hooks/package.json
+++ b/packages/react-mui-hooks/package.json
@@ -26,10 +26,10 @@
"@enterwell/react-hooks": "workspace:*",
"@enterwell/react-ui": "workspace:*",
"@microsoft/api-extractor": "7.39.1",
- "@mui/material": "5.15.3",
- "@mui/x-data-grid-pro": "6.18.7",
- "@types/node": "18.19.6",
- "@types/react": "18.2.47",
+ "@mui/material": "5.15.5",
+ "@mui/x-data-grid-pro": "6.19.1",
+ "@types/node": "18.19.8",
+ "@types/react": "18.2.48",
"@types/react-dom": "18.2.18",
"date-fns": "2.30.0",
"eslint-config-custom": "workspace:*",
diff --git a/packages/react-mui-hooks/temp/react-mui-hooks.api.md b/packages/react-mui-hooks/temp/react-mui-hooks.api.md
index 730e65b3..31916df4 100644
--- a/packages/react-mui-hooks/temp/react-mui-hooks.api.md
+++ b/packages/react-mui-hooks/temp/react-mui-hooks.api.md
@@ -74,7 +74,7 @@ export type UseDataGridProps = {
// @public
export type UseDataGridResponse = {
props: ComponentPropsWithRef;
- filterChanged: (keepPage?: boolean) => void;
+ refreshTable: (keepPage?: boolean) => void;
isSelectAll: boolean;
setIsSelectAll: (value: boolean) => void;
isAnySelected: boolean;
diff --git a/packages/react-ui/ConfirmButton/ConfirmButton.tsx b/packages/react-ui/ConfirmButton/ConfirmButton.tsx
index 482ad452..e48b37fd 100644
--- a/packages/react-ui/ConfirmButton/ConfirmButton.tsx
+++ b/packages/react-ui/ConfirmButton/ConfirmButton.tsx
@@ -1,6 +1,6 @@
import { ConfirmDialog, type ConfirmDialogProps } from '../ConfirmDialog';
import { useState } from 'react';
-import { Button, type ButtonProps } from '@mui/material';
+import { Button, IconButton, type ButtonProps } from '@mui/material';
/**
* The keys of the {@link ConfirmDialog} props that are destructured from shared props.
@@ -16,6 +16,10 @@ export type ConfirmButtonProps =
Omit &
Pick &
{
+ /**
+ * @defaultValue `false`
+ */
+ iconButton?: boolean;
onConfirm?: () => void;
slots?: {
// Omit already used props and shared props, re-add color so we can
@@ -31,7 +35,14 @@ export type ConfirmButtonProps =
* @public
*/
export function ConfirmButton({
- header, message, confirmButtonText, color, onConfirm, slots, ...rest
+ header,
+ message,
+ confirmButtonText,
+ color,
+ iconButton = false,
+ onConfirm,
+ slots,
+ ...rest
}: ConfirmButtonProps) {
const [open, setOpen] = useState(false);
@@ -42,7 +53,19 @@ export function ConfirmButton({
return (
<>
-