dinocollab-core 2.2.2 → 2.2.4

package/dist/types/form/modal-wrapper.d.ts

@@ -1,14 +1,21 @@
-import { FC, PropsWithChildren } from 'react';
-import { Breakpoint, PaperProps, SxProps, Theme } from '@mui/material';
+import { FC, PropsWithChildren, ReactNode } from 'react';
+import { Breakpoint } from '@mui/material';
+import type { BoxProps, IconButtonProps, PaperProps } from '@mui/material';
 export interface IFormModalWrapperProps extends PropsWithChildren {
-    title: string;
+    title: ReactNode;
     size?: Breakpoint;
     fullHeight?: boolean;
-    onCloseClick?: () => void;
+    onCloseClick?: IconButtonProps['onClick'];
+    onBackClick?: IconButtonProps['onClick'];
+    enableCloseButton?: boolean;
+    enableBackButton?: boolean;
     slots?: {
         wrapProps?: Partial<PaperProps>;
-        sxTopbarProps?: SxProps<Theme>;
+        topBarProps?: BoxProps;
         beforeTitle?: JSX.Element;
+        iconSize?: 'small' | 'medium' | 'large';
+        iconBackProps?: Partial<IconButtonProps>;
+        iconCloseProps?: Partial<IconButtonProps>;
     };
 }
 declare const FormModalWrapper: FC<IFormModalWrapperProps>;

package/dist/types/lab/data-surface/button-switch.d.ts

@@ -1,11 +1,12 @@
-import React from 'react';
-import type { DataSurfaceViewMode } from './types';
+import { FC } from 'react';
+import { DataSurfaceViewMode } from './types';
 type Props = {
     value?: DataSurfaceViewMode;
     onChange?: (value: DataSurfaceViewMode) => void;
     size?: 'sm' | 'md';
     className?: string;
     onlyIcon?: boolean;
+    reverse?: boolean;
 };
-declare const ButtonSwitch: React.FC<Props>;
+declare const ButtonSwitch: FC<Props>;
 export default ButtonSwitch;

package/dist/types/lab/data-surface/helpers.d.ts

@@ -0,0 +1,26 @@
+import { DataSurfaceViewMode, TPagination } from './types';
+export interface IViewDataQueryParams {
+    mode?: DataSurfaceViewMode;
+}
+export declare function setViewModeToURL(mode?: DataSurfaceViewMode, defaultMode?: DataSurfaceViewMode): void;
+export declare function getViewModeFromURL(defaultMode?: DataSurfaceViewMode): DataSurfaceViewMode | undefined;
+export interface IPaginationQueryParams {
+    page?: string;
+    pageSize?: string;
+}
+/**
+ * @en Synchronize pagination to URL query parameters. If pagination equals defaultPagination, remove from URL to keep it clean.
+ * @vi Dong bo pagination vao URL query parameters. Neu pagination bang defaultPagination, xoa khoi URL de giu URL sach.
+ *
+ * @param pagination - Current pagination to sync
+ * @param defaultPagination - Default pagination (if current equals this, don't save to URL)
+ */
+export declare function setPaginationToURL(pagination?: TPagination, defaultPagination?: TPagination): void;
+/**
+ * @en Retrieve pagination from URL query parameters.
+ * @vi Lay pagination tu URL query parameters.
+ *
+ * @param defaultPagination - Default pagination to return if URL has no pagination
+ * @returns Pagination from URL or defaultPagination
+ */
+export declare function getPaginationFromURL(defaultPagination?: TPagination): TPagination | undefined;

package/dist/types/lab/data-surface/index.create.d.ts

@@ -1,16 +1,26 @@
 import { DataSurfaceViewMode, LoadingModeRule } from './types';
 import type { BoxProps } from '@mui/material';
-import type { ComponentType, FC } from 'react';
+import type { ComponentType, FC, ReactNode } from 'react';
 import type { TPagination, TDataSurfaceState } from './types';
 import type { IViewGridConfig, IViewGridProps } from './view-grid';
 import type { IViewListConfig, IViewListProps } from './view-list';
 export interface IDataSurfaceSlots {
+    footer?: {
+        status?: string | ((currentStatus: string) => ReactNode);
+        range?: string | ((currentRange: string) => ReactNode);
+    };
 }
 export interface IDataSurfaceProps<T> {
     value?: T[];
-    /** Controlled state. When provided, DataSurface becomes fully controlled. */
+    /**
+     * @deprecated No longer used. Use `viewMode` and `loadMode` props directly instead.
+     * Controlled state. When provided, DataSurface becomes fully controlled.
+     */
     state?: TDataSurfaceState;
-    /** Called on any state change (viewMode, loadMode, page, pageSize). */
+    /**
+     * @deprecated No longer used. Component now uses uncontrolled mode with props.
+     * Called on any state change (viewMode, loadMode, page, pageSize).
+     */
     onStateChange?: (state: TDataSurfaceState) => void;
     viewMode?: DataSurfaceViewMode;
     /** Pagination metadata shared by both modes. */
@@ -28,6 +38,12 @@ export interface IDataSurfaceProps<T> {
     loadMode?: LoadingModeRule;
     sx?: BoxProps['sx'];
     slots?: IDataSurfaceSlots;
+    /** Enable row selection with checkboxes (List view only). */
+    selectable?: boolean;
+    /** Array of selected row IDs (controlled). */
+    selectedIds?: (string | number)[];
+    /** Callback when selection changes. */
+    onSelectionChange?: (selectedIds: (string | number)[]) => void;
 }
 export interface IDataSurfaceConfig<T> {
     defaultViewMode?: DataSurfaceViewMode;

package/dist/types/lab/data-surface/index.d.ts

@@ -1,4 +1,5 @@
 export * from './types';
+export * from './helpers';
 export * from './index.create';
 export * from './view-list.types';
 export * from './view-grid.types';

package/dist/types/lab/data-surface/index.dino.d.ts

@@ -1,15 +1,29 @@
 /// <reference types="react" />
+import { setViewModeToURL, getViewModeFromURL, setPaginationToURL, getPaginationFromURL } from './helpers';
 import createViewGrid from './view-grid';
 import createDataSurface from './index.create';
 export declare class DinoDataSurFace {
     createDataSurface: typeof createDataSurface;
     createViewGrid: typeof createViewGrid;
+    ButtonSwitch: import("react").FC<{
+        value?: "grid" | "list" | undefined;
+        onChange?: ((value: "grid" | "list") => void) | undefined;
+        size?: "sm" | "md" | undefined;
+        className?: string | undefined;
+        onlyIcon?: boolean | undefined;
+        reverse?: boolean | undefined;
+    }>;
     createButtonSwitch: () => import("react").FC<{
         value?: "grid" | "list" | undefined;
         onChange?: ((value: "grid" | "list") => void) | undefined;
         size?: "sm" | "md" | undefined;
         className?: string | undefined;
         onlyIcon?: boolean | undefined;
+        reverse?: boolean | undefined;
     }>;
+    setViewModeToURL: typeof setViewModeToURL;
+    getViewModeFromURL: typeof getViewModeFromURL;
+    setPaginationToURL: typeof setPaginationToURL;
+    getPaginationFromURL: typeof getPaginationFromURL;
 }
 export declare const dinoDataSurface: DinoDataSurFace;

package/dist/types/lab/data-surface/ui.units.d.ts

@@ -1,4 +1,4 @@
-import type { FC } from 'react';
+import type { FC, ReactNode } from 'react';
 import type { BoxProps } from '@mui/material';
 export declare const PanelLoading: FC<BoxProps>;
 export declare const PanelError: FC<{
@@ -8,11 +8,16 @@ export declare const PanelNoData: FC;
 export declare const PanelWaiting: FC;
 export declare const PanelMissingConfig: FC;
 export declare const PanelLoadMore: FC;
+export interface IPanelInfiniteScrollFooterSlots {
+    statusText?: string | ((currentStatus: string) => ReactNode);
+    rangeText?: string | ((currentRange: string) => ReactNode);
+}
 export interface IPanelInfiniteScrollFooterProps {
     loading?: boolean;
     hasNext?: boolean;
     currentCount: number;
     total?: number;
+    slots?: IPanelInfiniteScrollFooterSlots;
 }
 export declare const PanelInfiniteScrollFooter: FC<IPanelInfiniteScrollFooterProps>;
 export interface IPanelPaginationFooterProps {

package/dist/types/lab/data-surface/view-list.d.ts

@@ -15,6 +15,12 @@ export interface IViewListBase<T> {
     virtualizedConfig?: TVirtualizedConfig;
     /** Called when user scrolls near the bottom of the list. Use this to trigger pagination or infinity load. */
     onNearEnd?: () => void;
+    /** Enable row selection with checkboxes. */
+    selectable?: boolean;
+    /** Array of selected row IDs (controlled). */
+    selectedIds?: (string | number)[];
+    /** Callback when selection changes. */
+    onSelectionChange?: (selectedIds: (string | number)[]) => void;
 }
 export interface IViewListConfig<T> extends IViewListBase<T> {
     getterId: TGetterId<T>;
@@ -34,6 +40,7 @@ export declare function createViewListLoading<T>(ListComponent: ComponentType<IV
 export default createViewList;
 export declare const viewListClasses: {
     root: string;
+    virtualized: string;
     scrollContainer: string;
     table: string;
     tableHeader: string;

package/dist/types/lab/data-surface/view-list.types.d.ts

@@ -8,6 +8,8 @@ export interface IViewListItemProps<T> {
     value: T;
     /** Zero-based position of this item in the data array. */
     index: number;
+    /** Whether this row is currently selected. */
+    selected?: boolean;
 }
 /** Horizontal alignment for list cell content. */
 export type TListAlign = 'left' | 'right' | 'center';
@@ -38,6 +40,8 @@ export interface TListColumn<T> {
     width?: number | string;
     /** Minimum column width in pixels. */
     minWidth?: number;
+    /** Maximum column width in pixels. */
+    maxWidth?: number;
     /** Flex grow ratio used when no explicit width is set. */
     flex?: number;
     /** Horizontal alignment of the cell content. */

package/dist/types/lab/data-surface/view-list.units.d.ts

@@ -1,4 +1,23 @@
 import { ListDensity } from './view-list.types';
+import type { TGetterId } from './types';
 export declare const LIST_HEADER_HEIGHT = 48;
 export declare const LIST_ROW_HEIGHT_BY_DENSITY: Record<ListDensity, number>;
 export declare const LIST_CELL_PADDING_BY_DENSITY: Record<ListDensity, string>;
+/**
+ * Custom hook to manage list row selection logic.
+ * Handles select all, individual row selection, and indeterminate state.
+ *
+ * @param value - The array of data items
+ * @param getterId - Function to extract unique ID from each row
+ * @param selectable - Whether selection is enabled
+ * @param selectedIds - Controlled array of selected row IDs
+ * @param onSelectionChange - Callback when selection changes
+ * @returns Selection state and handlers
+ */
+export declare function useListSelection<T>(value: T[], getterId: TGetterId<T>, selectable: boolean, selectedIds?: (string | number)[], onSelectionChange?: (selectedIds: (string | number)[]) => void): {
+    selectedIds: (string | number)[];
+    isAllSelected: boolean;
+    isSomeSelected: boolean;
+    handleToggleAll: () => void;
+    handleToggleRow: (rowId: string | number) => void;
+};

package/dist/types/table/toolbar-pannel.d.ts

@@ -1,17 +1,26 @@
 import React, { Component } from 'react';
 import { BoxProps } from '@mui/material';
 import { IBreadcrumbConfig } from '../components';
-export interface IToolbarPannelOptions {
-    searchInclude?: string[];
-    formCreate?: React.ReactNode;
-    afterAction?: React.ReactNode;
-    breadcrumbs?: IBreadcrumbConfig[];
+export interface IToolbarPannelToolbarConfig {
+    columns?: boolean;
+    filters?: boolean;
+    density?: boolean;
+    export?: boolean;
 }
-export interface IToolbarPannelProps extends IToolbarPannelOptions {
+export interface IToolbarPannelProps {
     title?: React.ReactNode;
     titleProps?: BoxProps;
     icon?: React.ReactNode;
     afterTitle?: React.ReactNode;
+    searchInclude?: string[];
+    visibilityToolbar?: IToolbarPannelToolbarConfig;
+    formCreate?: React.ReactNode;
+    breadcrumbs?: IBreadcrumbConfig[];
+    afterAction?: React.ReactNode;
+    belowAction?: React.ReactNode;
+    aboveAction?: React.ReactNode;
+    actionWrapProps?: BoxProps;
+    sx?: BoxProps['sx'];
 }
 declare class ToolbarPannel extends Component<React.PropsWithChildren<IToolbarPannelProps>> {
     render(): import("react/jsx-runtime").JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dinocollab-core",
-  "version": "2.2.2",
+  "version": "2.2.4",
   "description": "Dinocollab core - libraries for building collaborative applications with React 18",
   "main": "dist/index.js",
   "module": "dist/index.js",