@movable/ui 3.7.3 → 3.8.0

package/lib/components/InkDataGrid/CustomCells/InkDataGridTextWrapCell.d.ts

@@ -0,0 +1,46 @@
+import { BoxProps } from '@mui/material';
+import { GridRenderCellParams } from '@mui/x-data-grid-premium';
+export interface InkDataGridTextWrapCellProps {
+    /**
+     * Word break behavior for long text
+     * @default 'break-word'
+     */
+    wordBreak?: 'normal' | 'break-all' | 'keep-all' | 'break-word';
+    /**
+     * Text alignment within the cell
+     * @default 'left'
+     */
+    textAlign?: 'left' | 'center' | 'right' | 'justify';
+    /**
+     * Custom styling for the cell content
+     */
+    sx?: BoxProps['sx'];
+}
+/**
+ * A DataGrid cell component that handles long strings with text wrapping functionality.
+ *
+ * Features:
+ * - Wraps text within cell boundaries
+ * - Adjusts row height dynamically based on content (requires getRowHeight={() => 'auto'} on DataGrid)
+ * - Maintains consistent vertical alignment with other cells
+ * - Configurable text alignment and word breaking
+ *
+ * @example
+ * ```tsx
+ * const columns: GridColDef[] = [
+ *   {
+ *     field: 'description',
+ *     headerName: 'Description',
+ *     width: 300,
+ *     renderCell: (params) => <InkDataGridTextWrapCell {...params} />,
+ *   },
+ * ];
+ *
+ * <InkDataGrid
+ *   rows={data}
+ *   columns={columns}
+ *   getRowHeight={() => 'auto'}
+ * />
+ * ```
+ */
+export declare function InkDataGridTextWrapCell({ value, wordBreak, textAlign, sx, }: GridRenderCellParams & InkDataGridTextWrapCellProps): import("react/jsx-runtime").JSX.Element;

package/lib/components/InkDataGrid/CustomCells/createTextWrapColumn.d.ts

@@ -0,0 +1,26 @@
+import { GridColDef } from '@mui/x-data-grid-premium';
+import { BoxProps } from '@mui/material';
+import { InkDataGridTextWrapCellProps } from './InkDataGridTextWrapCell';
+/**
+ * Helper function to create a column definition with text wrapping cell.
+ *
+ * @param field - Column field name
+ * @param headerName - Column header display name
+ * @param options - Additional options for the cell and column
+ * @returns GridColDef with text wrapping cell
+ *
+ * @example
+ * ```tsx
+ * const columns = [
+ *   createTextWrapColumn('description', 'Description', {
+ *     width: 300,
+ *   }),
+ * ];
+ * ```
+ */
+export declare function createTextWrapColumn(field: string, headerName: string, options?: {
+    width?: number;
+    wordBreak?: InkDataGridTextWrapCellProps['wordBreak'];
+    textAlign?: InkDataGridTextWrapCellProps['textAlign'];
+    sx?: BoxProps['sx'];
+} & Partial<GridColDef>): GridColDef;

package/lib/components/InkDataGrid/CustomCells/index.d.ts

@@ -0,0 +1,2 @@
+export { InkDataGridTextWrapCell, type InkDataGridTextWrapCellProps, } from './InkDataGridTextWrapCell';
+export { createTextWrapColumn } from './createTextWrapColumn';

package/lib/components/InkDataGrid/index.d.ts

@@ -1,3 +1,4 @@
 export { InkDataGrid, type InkDataGridProps } from './InkDataGrid';
 export { InkDataGridEmpty, type InkDataGridEmptyProps, } from './InkDataGridEmpty';
 export { createEmptyColumns } from './CreateEmptyColumns';
+export { InkDataGridTextWrapCell, type InkDataGridTextWrapCellProps, createTextWrapColumn, } from './CustomCells';

package/lib/components/index.d.ts

@@ -24,4 +24,4 @@ export { InternalUseOnlyLabel, InternalUseOnlyAlert, } from './InternalUseOnlyIn
 export { InkChart } from './InkChart';
 export { InkCard } from './InkCard';
 export { InkGridToolBar } from './InkGridToolBar';
-export { InkDataGrid, InkDataGridEmpty, createEmptyColumns, type InkDataGridProps, type InkDataGridEmptyProps, } from './InkDataGrid';
+export { InkDataGrid, InkDataGridEmpty, InkDataGridTextWrapCell, createEmptyColumns, createTextWrapColumn, type InkDataGridProps, type InkDataGridEmptyProps, type InkDataGridTextWrapCellProps, } from './InkDataGrid';

package/lib/index.d.ts

@@ -25,6 +25,7 @@ import { ForwardRefExoticComponent } from 'react';
 import { Grid2Props } from '@mui/material/Grid2';
 import { GridColDef } from '@mui/x-data-grid-premium';
 import { GridColumnVisibilityModel } from '@mui/x-data-grid-premium';
+import { GridRenderCellParams } from '@mui/x-data-grid-premium';
 import { JSX as JSX_2 } from 'react/jsx-runtime';
 import { LinkProps } from '@mui/material';
 import { ListItemIconProps } from '@mui/material/ListItemIcon';
@@ -139,6 +140,30 @@ declare type CopyFn = (text: string) => Promise<boolean>;
  */
 export declare function createEmptyColumns(columns: GridColDef[]): GridColDef[];
 
+/**
+ * Helper function to create a column definition with text wrapping cell.
+ *
+ * @param field - Column field name
+ * @param headerName - Column header display name
+ * @param options - Additional options for the cell and column
+ * @returns GridColDef with text wrapping cell
+ *
+ * @example
+ * ```tsx
+ * const columns = [
+ *   createTextWrapColumn('description', 'Description', {
+ *     width: 300,
+ *   }),
+ * ];
+ * ```
+ */
+export declare function createTextWrapColumn(field: string, headerName: string, options?: {
+    width?: number;
+    wordBreak?: InkDataGridTextWrapCellProps['wordBreak'];
+    textAlign?: InkDataGridTextWrapCellProps['textAlign'];
+    sx?: BoxProps['sx'];
+} & Partial<GridColDef>): GridColDef;
+
 declare const defaultDrawerWidths: {
     md: number;
     lg: number;
@@ -409,6 +434,52 @@ export declare interface InkDataGridProps extends DataGridPremiumProps {
     disableColumnReorder?: boolean;
 }
 
+/**
+ * A DataGrid cell component that handles long strings with text wrapping functionality.
+ *
+ * Features:
+ * - Wraps text within cell boundaries
+ * - Adjusts row height dynamically based on content (requires getRowHeight={() => 'auto'} on DataGrid)
+ * - Maintains consistent vertical alignment with other cells
+ * - Configurable text alignment and word breaking
+ *
+ * @example
+ * ```tsx
+ * const columns: GridColDef[] = [
+ *   {
+ *     field: 'description',
+ *     headerName: 'Description',
+ *     width: 300,
+ *     renderCell: (params) => <InkDataGridTextWrapCell {...params} />,
+ *   },
+ * ];
+ *
+ * <InkDataGrid
+ *   rows={data}
+ *   columns={columns}
+ *   getRowHeight={() => 'auto'}
+ * />
+ * ```
+ */
+export declare function InkDataGridTextWrapCell({ value, wordBreak, textAlign, sx, }: GridRenderCellParams & InkDataGridTextWrapCellProps): JSX_2.Element;
+
+export declare interface InkDataGridTextWrapCellProps {
+    /**
+     * Word break behavior for long text
+     * @default 'break-word'
+     */
+    wordBreak?: 'normal' | 'break-all' | 'keep-all' | 'break-word';
+    /**
+     * Text alignment within the cell
+     * @default 'left'
+     */
+    textAlign?: 'left' | 'center' | 'right' | 'justify';
+    /**
+     * Custom styling for the cell content
+     */
+    sx?: BoxProps['sx'];
+}
+
 export declare function InkDialog({ Title, Content, Actions, onClose, hideCloseButton, ActionsProp, ...props }: InkDialogProps): JSX_2.Element;
 
 export declare const inkDialog: InkDialogPageObject;