Merge pull request #307 from Enterwell/stage

Stage

.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

apps/docs/components/ExampleConfirmButton.tsx

@@ -4,11 +4,12 @@ export function ExampleConfirmButton() {
     return (
         // @highlight-start
         <ConfirmButton
-            header={'Potvrdite brisanje'}
-            message='Jeste li sigurni da želite obrisati ovaj zapis?'
             color="error"
             variant='contained'
-            onConfirm={() => { }}>
+            onConfirm={() => { }}
+            header={'Potvrdite brisanje'}
+            message='Jeste li sigurni da želite obrisati ovaj zapis?'
+        >
             Obriši
         </ConfirmButton>
         // @highlight-end

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
+        <ConfirmButton
+            iconButton
+            color="error"
+            variant='contained'
+            onConfirm={() => { }}
+            header={'Potvrdite brisanje'}
+            message='Jeste li sigurni da želite obrisati ovaj zapis?'
+        >
+            <Delete />
+        </ConfirmButton>
+        // @highlight-end
+    )
+}

apps/docs/components/ExampleDropdownButton.tsx

@@ -20,7 +20,8 @@ export function ExampleDropdownButton() {
                 options={[
                     { label: 'Option 1', value: 'option1' },
                     { label: 'Option 2', value: 'option2' },
-                ]}>
+                ]}
+            >
                 Export
             </DropdownButton>
             {/* // @highlight-end */}

apps/docs/components/ExampleUseDataGrid.tsx

@@ -46,7 +46,7 @@ export function ExampleUseDataGrid() {
     });
 
     useEffect(() => {
-        dataGrid.filterChanged();
+        dataGrid.refreshTable();
     }, []);
 
     return (

apps/docs/package.json

@@ -26,27 +26,27 @@
     "@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",
     "react-dom": "18.2.0",
     "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",

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 '../.
 
 <ComponentWithSource component={ ExampleConfirmButton } centered />
 
+## As icon button
+
+<ComponentWithSource component={ ExampleConfirmButtonIcon } centered />
+
 ## Inspect
 
 <details>

package.json

@@ -11,6 +11,6 @@
     "turbo": "1.11.3",
     "@turbo/gen": "1.11.3"
   },
-  "packageManager": "[email protected].0",
+  "packageManager": "[email protected].1",
   "name": "ui"
 }

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",

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<typeof DataGridPro>,
-    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<any, unknown, unknown, GridTreeNode>} params The params.
-     * @param {MuiEvent<React.KeyboardEvent<HTMLElement>>} event The event.
-     * @param {GridCallbackDetails<any>} 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<any, unknown, unknown, GridTreeNode>,
-        event: MuiEvent<React.KeyboardEvent<HTMLElement>>,
-        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<KeyboardEvent<HTMLElement>>, 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) => (
                 <CellRenderer
                     customType={params.colDef.customType}
@@ -727,7 +729,7 @@ export function useDataGrid({
             slotProps,
             keepNonExistentRowsSelected
         },
-        filterChanged: handleFilterChanged,
+        refreshTable: handleTableRefresh,
         isSelectAll: isAllItemsSelected,
         setIsSelectAll: setIsAllItemsSelected,
         isAnySelected: customSelectionModel.length > 0,

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:*",

packages/react-mui-hooks/temp/react-mui-hooks.api.md

@@ -74,7 +74,7 @@ export type UseDataGridProps = {
 // @public
 export type UseDataGridResponse = {
     props: ComponentPropsWithRef<typeof DataGridPro>;
-    filterChanged: (keepPage?: boolean) => void;
+    refreshTable: (keepPage?: boolean) => void;
     isSelectAll: boolean;
     setIsSelectAll: (value: boolean) => void;
     isAnySelected: boolean;

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<ButtonProps, "onClick"> &
   Pick<ConfirmDialogProps, DialogDestructuredPropKeys> &
   {
+    /**
+     * @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 (
     <>
-      <Button color={color} {...rest} onClick={() => setOpen(true)} />
+      {iconButton ? (
+        <IconButton
+          color={color}
+          {...rest}
+          onClick={() => setOpen(true)}
+        />
+      ) : (
+        <Button
+          color={color}
+          {...rest}
+          onClick={() => setOpen(true)}
+        />
+      )}
       <ConfirmDialog
         isOpen={open}
         onConfirm={handleConfirm}

packages/react-ui/DropdownButton/DropdownButton.tsx

@@ -14,7 +14,7 @@ export type DropdownButtonOption = {
  * The props of the {@link DropdownButton} component.
  * @public
  */
-export type DropdownButtonProps = ButtonProps & {
+export type DropdownButtonProps = Omit<ButtonProps, 'onClick'> & {
   options?: DropdownButtonOption[];
   icon?: ReactElement;
   onClick?: (event: any, value: any) => void;

packages/react-ui/package.json

@@ -28,13 +28,13 @@
     "@emotion/styled": "11.11.0",
     "@enterwell/react-hooks": "workspace:*",
     "@microsoft/api-extractor": "7.39.1",
-    "@mui/icons-material": "5.15.3",
-    "@mui/material": "5.15.3",
-    "@mui/system": "5.15.3",
+    "@mui/icons-material": "5.15.5",
+    "@mui/material": "5.15.5",
+    "@mui/system": "5.15.5",
     "@mui/x-date-pickers-pro": "5.0.20",
     "@mui/x-date-pickers": "5.0.20",
-    "@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",
     "date-fns": "2.30.0",
     "eslint-config-custom": "workspace:*",

packages/react-ui/temp/react-ui.api.md

@@ -27,10 +27,11 @@ import { TextFieldProps } from '@mui/material';
 import { Variant } from '@mui/material/styles/createTypography';
 
 // @public
-export function ConfirmButton({ header, message, confirmButtonText, color, onConfirm, slots, ...rest }: ConfirmButtonProps): react_jsx_runtime.JSX.Element;
+export function ConfirmButton({ header, message, confirmButtonText, color, iconButton, onConfirm, slots, ...rest }: ConfirmButtonProps): react_jsx_runtime.JSX.Element;
 
 // @public
 export type ConfirmButtonProps = Omit<ButtonProps, "onClick"> & Pick<ConfirmDialogProps, DialogDestructuredPropKeys> & {
+    iconButton?: boolean;
     onConfirm?: () => void;
     slots?: {
         dialog?: Omit<ConfirmDialogProps, "isOpen" | "onCancel" | DialogDestructuredPropKeys> & {
@@ -100,7 +101,7 @@ export type DropdownButtonOption = {
 };
 
 // @public
-export type DropdownButtonProps = ButtonProps & {
+export type DropdownButtonProps = Omit<ButtonProps, 'onClick'> & {
     options?: DropdownButtonOption[];
     icon?: ReactElement;
     onClick?: (event: any, value: any) => void;