@bsol-oss/react-datatable5 13.0.1-beta.37 → 13.0.1-beta.39

package/dist/index.d.ts

@@ -700,11 +700,6 @@ interface FormRootProps<TData extends FieldValues> {
     setIdMap: Dispatch<SetStateAction<Record<string, unknown>>>;
     form: UseFormReturn<TData, any, TData>;
     children: ReactNode;
-    displayConfig?: {
-        showSubmitButton?: boolean;
-        showResetButton?: boolean;
-        showTitle?: boolean;
-    };
     dateTimePickerLabels?: DateTimePickerLabels;
     idPickerLabels?: IdPickerLabels;
     enumPickerLabels?: EnumPickerLabels;
@@ -720,16 +715,13 @@ interface CustomJSONSchema7Definition extends JSONSchema7 {
     customQueryFn: any;
     children: ReactNode;
 }
-declare const FormRoot: <TData extends FieldValues>({ schema, idMap, setIdMap, form, children, displayConfig, dateTimePickerLabels, idPickerLabels, enumPickerLabels, filePickerLabels, formButtonLabels, timePickerLabels, insideDialog, }: FormRootProps<TData>) => react_jsx_runtime.JSX.Element;
+declare const FormRoot: <TData extends FieldValues>({ schema, idMap, setIdMap, form, children, dateTimePickerLabels, idPickerLabels, enumPickerLabels, filePickerLabels, formButtonLabels, timePickerLabels, insideDialog, }: FormRootProps<TData>) => react_jsx_runtime.JSX.Element;
 
 interface DefaultFormProps<TData extends FieldValues> {
-    formConfig: Omit<FormRootProps<TData>, "children">;
-    showTitle?: boolean;
+    formConfig: Omit<FormRootProps<TData>, 'children'>;
 }
 declare const DefaultForm: <TData extends FieldValues>({ formConfig, }: DefaultFormProps<TData>) => react_jsx_runtime.JSX.Element;
 
-declare const FormTitle: () => react_jsx_runtime.JSX.Element;
-
 declare const FormBody: () => react_jsx_runtime.JSX.Element;
 
 type MediaLibraryBrowserPropsBase = {
@@ -751,7 +743,7 @@ type MediaLibraryBrowserPropsMultiple = MediaLibraryBrowserPropsBase & {
     onSelectedFileChange?: (files: FilePickerMediaFile[]) => void;
 };
 type MediaLibraryBrowserProps = MediaLibraryBrowserPropsSingle | MediaLibraryBrowserPropsMultiple;
-declare const MediaLibraryBrowser: ({ onFetchFiles, filterImageOnly, labels, enabled, multiple, onFileSelect, selectedFile: controlledSelectedFile, onSelectedFileChange, }: MediaLibraryBrowserProps) => react_jsx_runtime.JSX.Element | null;
+declare const MediaLibraryBrowser: ({ onFetchFiles, filterImageOnly, labels, enabled, multiple, onFileSelect, selectedFile: controlledSelectedFile, onSelectedFileChange, }: MediaLibraryBrowserProps) => react_jsx_runtime.JSX.Element;
 
 interface UseFormProps<T> {
     preLoadedValues?: T | undefined;
@@ -1477,4 +1469,4 @@ declare module '@tanstack/react-table' {
     }
 }
 
-export { CalendarDisplay, type CalendarDisplayProps, type CalendarEvent, type CalendarProps, CardHeader, type CardHeaderProps, type CustomJSONSchema7, type CustomJSONSchema7Definition, type CustomQueryFn, type CustomQueryFnParams, type CustomQueryFnResponse, DataDisplay, type DataDisplayProps, type DataResponse, DataTable, type DataTableDefaultState, type DataTableProps, DataTableServer, type DataTableServerProps, DatePickerContext, DatePickerInput, type DatePickerInputProps, type DatePickerLabels, type DatePickerProps, type DateTimePickerLabels, DefaultCardTitle, DefaultForm, type DefaultFormProps, DefaultTable, type DefaultTableProps, DefaultTableServer, type DefaultTableServerProps, DensityToggleButton, type DensityToggleButtonProps, type EditFilterButtonProps, EditSortingButton, type EditSortingButtonProps, type EditViewButtonProps, EmptyState, type EmptyStateProps, type EnumPickerLabels, ErrorAlert, type ErrorAlertProps, type FilePickerLabels, type FilePickerMediaFile, type FilePickerProps, FilterDialog, FormBody, type FormButtonLabels, FormRoot, type FormRootProps, FormTitle, type GetDateColorProps, type GetMultiDatesProps, type GetRangeDatesProps, type GetStyleProps, type GetVariantProps, GlobalFilter, type IdPickerLabels, type LoadInitialValuesParams, type LoadInitialValuesResult, MediaLibraryBrowser, type MediaLibraryBrowserProps, PageSizeControl, type PageSizeControlProps, Pagination, type QueryParams, type RangeCalendarProps, type RangeDatePickerLabels, type RangeDatePickerProps, RecordDisplay, type RecordDisplayProps, ReloadButton, type ReloadButtonProps, ResetFilteringButton, ResetSelectionButton, ResetSortingButton, type Result, RowCountText, SelectAllRowsToggle, type SelectAllRowsToggleProps, Table, TableBody, type TableBodyProps, TableCardContainer, type TableCardContainerProps, TableCards, type TableCardsProps, TableComponent, TableControls, type TableControlsProps, TableDataDisplay, type TableDataDisplayProps, TableFilter, TableFilterTags, type TableFilterTagsProps, TableFooter, type TableFooterProps, TableHeader, type TableHeaderProps, type TableHeaderTexts, TableLoadingComponent, type TableLoadingComponentProps, type TableProps, type TableRendererProps, type TableRowSelectorProps, TableSelector, TableSorter, TableViewer, TextCell, type TextCellProps, type TimePickerLabels, TimeRangeZoom, type TimeRangeZoomLabels, type TimeRangeZoomProps, TimeViewportBlock, type TimeViewportBlockItem, type TimeViewportBlockProps, type TimeViewportBlockRenderArgs, TimeViewportBlocks, type TimeViewportBlocksProps, TimeViewportGrid, type TimeViewportGridProps, TimeViewportHeader, type TimeViewportHeaderProps, type TimeViewportHeaderTick, TimeViewportMarkerLine, type TimeViewportMarkerLineProps, TimeViewportRoot, type TimeViewportRootProps, type TimeViewportTrackRenderArgs, type UseDataTableProps, type UseDataTableReturn, type UseDataTableServerProps, type UseDataTableServerReturn, type UseFormProps, type UseTimeRangeZoomResult, type UseTimeViewportBlockGeometryResult, type UseTimeViewportDerivedResult, type UseTimeViewportTicksResult, type ValidationErrorType, ViewDialog, type ViewableTimeRange, defaultRenderDisplay, getMultiDates, getRangeDates, useDataTable, useDataTableContext, useDataTableServer, useForm, useTimeRangeZoom, useTimeViewport, useTimeViewportBlockGeometry, useTimeViewportHeader, useTimeViewportTicks };
+export { CalendarDisplay, type CalendarDisplayProps, type CalendarEvent, type CalendarProps, CardHeader, type CardHeaderProps, type CustomJSONSchema7, type CustomJSONSchema7Definition, type CustomQueryFn, type CustomQueryFnParams, type CustomQueryFnResponse, DataDisplay, type DataDisplayProps, type DataResponse, DataTable, type DataTableDefaultState, type DataTableProps, DataTableServer, type DataTableServerProps, DatePickerContext, DatePickerInput, type DatePickerInputProps, type DatePickerLabels, type DatePickerProps, type DateTimePickerLabels, DefaultCardTitle, DefaultForm, type DefaultFormProps, DefaultTable, type DefaultTableProps, DefaultTableServer, type DefaultTableServerProps, DensityToggleButton, type DensityToggleButtonProps, type EditFilterButtonProps, EditSortingButton, type EditSortingButtonProps, type EditViewButtonProps, EmptyState, type EmptyStateProps, type EnumPickerLabels, ErrorAlert, type ErrorAlertProps, type FilePickerLabels, type FilePickerMediaFile, type FilePickerProps, FilterDialog, FormBody, type FormButtonLabels, FormRoot, type FormRootProps, type GetDateColorProps, type GetMultiDatesProps, type GetRangeDatesProps, type GetStyleProps, type GetVariantProps, GlobalFilter, type IdPickerLabels, type LoadInitialValuesParams, type LoadInitialValuesResult, MediaLibraryBrowser, type MediaLibraryBrowserProps, PageSizeControl, type PageSizeControlProps, Pagination, type QueryParams, type RangeCalendarProps, type RangeDatePickerLabels, type RangeDatePickerProps, RecordDisplay, type RecordDisplayProps, ReloadButton, type ReloadButtonProps, ResetFilteringButton, ResetSelectionButton, ResetSortingButton, type Result, RowCountText, SelectAllRowsToggle, type SelectAllRowsToggleProps, Table, TableBody, type TableBodyProps, TableCardContainer, type TableCardContainerProps, TableCards, type TableCardsProps, TableComponent, TableControls, type TableControlsProps, TableDataDisplay, type TableDataDisplayProps, TableFilter, TableFilterTags, type TableFilterTagsProps, TableFooter, type TableFooterProps, TableHeader, type TableHeaderProps, type TableHeaderTexts, TableLoadingComponent, type TableLoadingComponentProps, type TableProps, type TableRendererProps, type TableRowSelectorProps, TableSelector, TableSorter, TableViewer, TextCell, type TextCellProps, type TimePickerLabels, TimeRangeZoom, type TimeRangeZoomLabels, type TimeRangeZoomProps, TimeViewportBlock, type TimeViewportBlockItem, type TimeViewportBlockProps, type TimeViewportBlockRenderArgs, TimeViewportBlocks, type TimeViewportBlocksProps, TimeViewportGrid, type TimeViewportGridProps, TimeViewportHeader, type TimeViewportHeaderProps, type TimeViewportHeaderTick, TimeViewportMarkerLine, type TimeViewportMarkerLineProps, TimeViewportRoot, type TimeViewportRootProps, type TimeViewportTrackRenderArgs, type UseDataTableProps, type UseDataTableReturn, type UseDataTableServerProps, type UseDataTableServerReturn, type UseFormProps, type UseTimeRangeZoomResult, type UseTimeViewportBlockGeometryResult, type UseTimeViewportDerivedResult, type UseTimeViewportTicksResult, type ValidationErrorType, ViewDialog, type ViewableTimeRange, defaultRenderDisplay, getMultiDates, getRangeDates, useDataTable, useDataTableContext, useDataTableServer, useForm, useTimeRangeZoom, useTimeViewport, useTimeViewportBlockGeometry, useTimeViewportHeader, useTimeViewportTicks };

package/dist/index.js

@@ -4190,11 +4190,6 @@ const SchemaFormContext = React.createContext({
     schema: {},
     onSubmit: async () => { },
     timezone: 'Asia/Hong_Kong',
-    displayConfig: {
-        showSubmitButton: false,
-        showResetButton: false,
-        showTitle: true,
-    },
 });
 
 const useSchemaContext = () => {
@@ -5386,108 +5381,81 @@ function formatBytes(bytes) {
     return `${parseFloat((bytes / Math.pow(k, i)).toFixed(2))} ${sizes[i]}`;
 }
 
+const IMAGE_EXT = /\.(jpg|jpeg|png|gif|bmp|webp|svg)$/i;
+function filterImageFiles(files) {
+    return files.filter((f) => IMAGE_EXT.test(f.name));
+}
 const MediaLibraryBrowser = ({ onFetchFiles, filterImageOnly = false, labels, enabled = true, multiple = false, onFileSelect, selectedFile: controlledSelectedFile, onSelectedFileChange, }) => {
-    const [searchTerm, setSearchTerm] = React.useState('');
-    const [internalSelectedFile, setInternalSelectedFile] = React.useState(multiple ? [] : undefined);
-    const [failedImageIds, setFailedImageIds] = React.useState(new Set());
-    // Use controlled or internal state for selectedFile
-    const selectedFile = controlledSelectedFile ?? internalSelectedFile;
-    const setSelectedFile = onSelectedFileChange ?? setInternalSelectedFile;
-    const { data: filesData, isLoading, isError, } = reactQuery.useQuery({
-        queryKey: ['file-picker-library', searchTerm],
+    const [search, setSearch] = React.useState('');
+    const query = reactQuery.useQuery({
+        queryKey: ['media-library', search, filterImageOnly],
         queryFn: async () => {
             if (!onFetchFiles)
-                return { data: [] };
-            const files = await onFetchFiles(searchTerm.trim() || '');
-            return { data: files };
+                return [];
+            const list = await onFetchFiles(search);
+            return filterImageOnly ? filterImageFiles(list) : list;
         },
         enabled: enabled && !!onFetchFiles,
     });
-    const files = (filesData?.data || []);
-    const filteredFiles = filterImageOnly
-        ? files.filter((file) => /\.(jpg|jpeg|png|gif|bmp|webp|svg)$/i.test(file.name))
-        : files;
-    const handleFileClick = (file) => {
-        if (multiple) {
-            const currentSelection = Array.isArray(selectedFile) ? selectedFile : [];
-            const isAlreadySelected = currentSelection.some((f) => f.id === file.id);
-            const newSelection = isAlreadySelected
-                ? currentSelection.filter((f) => f.id !== file.id)
-                : [...currentSelection, file];
-            setSelectedFile(newSelection);
-            if (onFileSelect) {
-                onFileSelect(newSelection);
-            }
-        }
-        else {
-            const newFile = selectedFile === file ? undefined : file;
-            setSelectedFile(newFile);
-            if (onFileSelect && newFile) {
-                onFileSelect(newFile);
-            }
+    const files = React.useMemo(() => (query.data ?? []), [query.data]);
+    const selectedIds = React.useMemo(() => {
+        if (multiple && Array.isArray(controlledSelectedFile)) {
+            return new Set(controlledSelectedFile.map((f) => f.id));
+        }
+        if (!multiple &&
+            controlledSelectedFile &&
+            !Array.isArray(controlledSelectedFile)) {
+            return new Set([controlledSelectedFile.id]);
+        }
+        return new Set();
+    }, [multiple, controlledSelectedFile]);
+    const handleSingleSelect = (file) => {
+        if (!multiple) {
+            onSelectedFileChange?.(file);
+            onFileSelect?.(file);
         }
     };
-    const handleImageError = (fileId) => {
-        setFailedImageIds((prev) => new Set(prev).add(fileId));
+    const handleMultipleToggle = (file, checked) => {
+        const current = multiple && Array.isArray(controlledSelectedFile)
+            ? [...controlledSelectedFile]
+            : [];
+        const next = checked
+            ? [...current, file]
+            : current.filter((f) => f.id !== file.id);
+        onSelectedFileChange?.(next);
+        onFileSelect?.(next);
     };
-    if (!onFetchFiles)
-        return null;
-    return (jsxRuntime.jsxs(react.VStack, { align: "stretch", gap: 4, children: [jsxRuntime.jsxs(react.Box, { position: "relative", children: [jsxRuntime.jsx(react.Input, { placeholder: labels?.searchPlaceholder ?? 'Search files...', value: searchTerm, onChange: (e) => setSearchTerm(e.target.value), bg: "bg.panel", border: "1px solid", borderColor: "border.default", colorPalette: "blue", _focus: {
-                            borderColor: 'colorPalette.500',
-                            _dark: {
-                                borderColor: 'colorPalette.400',
-                            },
-                            boxShadow: {
-                                base: '0 0 0 1px var(--chakra-colors-blue-500)',
-                                _dark: '0 0 0 1px var(--chakra-colors-blue-400)',
-                            },
-                        }, pl: 10 }), jsxRuntime.jsx(react.Icon, { as: lu.LuSearch, position: "absolute", left: 3, top: "50%", transform: "translateY(-50%)", color: "fg.muted", boxSize: 4 })] }), isLoading && (jsxRuntime.jsxs(react.Box, { textAlign: "center", py: 8, children: [jsxRuntime.jsx(react.Spinner, { size: "lg", colorPalette: "blue" }), jsxRuntime.jsx(react.Text, { mt: 4, color: "fg.muted", children: labels?.loading ?? 'Loading files...' })] })), isError && (jsxRuntime.jsx(react.Box, { bg: { base: 'colorPalette.50', _dark: 'colorPalette.900/20' }, border: "1px solid", borderColor: {
-                    base: 'colorPalette.200',
-                    _dark: 'colorPalette.800',
-                }, colorPalette: "red", borderRadius: "md", p: 4, children: jsxRuntime.jsx(react.Text, { color: {
-                        base: 'colorPalette.600',
-                        _dark: 'colorPalette.300',
-                    }, children: labels?.loadingFailed ?? 'Failed to load files' }) })), !isLoading && !isError && (jsxRuntime.jsx(react.Box, { maxHeight: "400px", overflowY: "auto", children: filteredFiles.length === 0 ? (jsxRuntime.jsx(react.Box, { textAlign: "center", py: 8, children: jsxRuntime.jsx(react.Text, { color: "fg.muted", children: labels?.noFilesFound ?? 'No files found' }) })) : (jsxRuntime.jsx(react.VStack, { align: "stretch", gap: 2, children: filteredFiles.map((file) => {
-                        const isImage = /\.(jpg|jpeg|png|gif|bmp|webp|svg)$/i.test(file.name);
-                        const isSelected = multiple
-                            ? Array.isArray(selectedFile) &&
-                                selectedFile.some((f) => f.id === file.id)
-                            : selectedFile?.id ===
-                                file.id;
-                        const imageFailed = failedImageIds.has(file.id);
-                        return (jsxRuntime.jsx(react.Box, { p: 3, border: "2px solid", borderColor: isSelected
-                                ? {
-                                    base: 'colorPalette.500',
-                                    _dark: 'colorPalette.400',
-                                }
-                                : 'border.default', borderRadius: "md", bg: isSelected
-                                ? {
-                                    base: 'colorPalette.50',
-                                    _dark: 'colorPalette.900/20',
-                                }
-                                : 'bg.panel', colorPalette: "blue", cursor: "pointer", onClick: () => handleFileClick(file), _hover: {
-                                borderColor: isSelected
-                                    ? {
-                                        base: 'colorPalette.600',
-                                        _dark: 'colorPalette.400',
-                                    }
-                                    : {
-                                        base: 'colorPalette.300',
-                                        _dark: 'colorPalette.400',
-                                    },
-                                bg: isSelected
-                                    ? {
-                                        base: 'colorPalette.100',
-                                        _dark: 'colorPalette.800/30',
-                                    }
-                                    : 'bg.muted',
-                            }, transition: "all 0.2s", children: jsxRuntime.jsxs(react.HStack, { gap: 3, children: [jsxRuntime.jsx(react.Box, { width: "60px", height: "60px", display: "flex", alignItems: "center", justifyContent: "center", bg: "bg.muted", borderRadius: "md", flexShrink: 0, children: isImage && file.url && !imageFailed ? (jsxRuntime.jsx(react.Image, { src: file.url, alt: file.name, boxSize: "60px", objectFit: "cover", borderRadius: "md", onError: () => handleImageError(file.id) })) : isImage && (imageFailed || !file.url) ? (jsxRuntime.jsx(react.Icon, { as: lu.LuImage, boxSize: 6, color: "fg.muted" })) : (jsxRuntime.jsx(react.Icon, { as: lu.LuFile, boxSize: 6, color: "fg.muted" })) }), jsxRuntime.jsxs(react.VStack, { align: "start", flex: 1, gap: 1, children: [jsxRuntime.jsx(react.Text, { fontSize: "sm", fontWeight: "medium", color: "fg.default", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", children: file.name }), jsxRuntime.jsxs(react.HStack, { gap: 2, children: [file.size && (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsx(react.Text, { fontSize: "xs", color: "fg.muted", children: typeof file.size === 'number'
-                                                                ? formatBytes(file.size)
-                                                                : file.size }) })), file.comment && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [file.size && (jsxRuntime.jsx(react.Text, { fontSize: "xs", color: "fg.muted", children: "\u2022" })), jsxRuntime.jsx(react.Text, { fontSize: "xs", color: "fg.muted", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", children: file.comment })] }))] })] }), isSelected && (jsxRuntime.jsx(react.Box, { width: "24px", height: "24px", borderRadius: "full", bg: {
-                                            base: 'colorPalette.500',
-                                            _dark: 'colorPalette.400',
-                                        }, colorPalette: "blue", display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0, children: jsxRuntime.jsx(react.Text, { color: "white", fontSize: "xs", fontWeight: "bold", children: "\u2713" }) }))] }) }, file.id));
-                    }) })) }))] }));
+    const isLoading = query.isPending;
+    const isError = query.isError;
+    const searchPlaceholder = labels?.searchPlaceholder ?? 'Search files...';
+    const loadingText = labels?.loading ?? 'Loading...';
+    const errorText = labels?.loadingFailed ?? 'Failed to load files';
+    const emptyText = labels?.noFilesFound ?? 'No files found';
+    return (jsxRuntime.jsxs(react.VStack, { align: "stretch", gap: 4, children: [jsxRuntime.jsx(InputGroup, { startElement: jsxRuntime.jsx(react.Icon, { as: lu.LuSearch, color: "fg.muted" }), children: jsxRuntime.jsx(react.Input, { placeholder: searchPlaceholder, value: search, onChange: (e) => setSearch(e.target.value), bg: "bg.panel", borderColor: "border.default" }) }), isLoading && (jsxRuntime.jsxs(react.HStack, { gap: 2, py: 6, justify: "center", children: [jsxRuntime.jsx(react.Spinner, { size: "sm", colorPalette: "blue" }), jsxRuntime.jsx(react.Text, { fontSize: "sm", color: "fg.muted", children: loadingText })] })), isError && (jsxRuntime.jsx(react.Box, { py: 4, px: 3, borderRadius: "md", bg: { base: 'red.50', _dark: 'red.900/20' }, borderWidth: "1px", borderColor: { base: 'red.200', _dark: 'red.800' }, children: jsxRuntime.jsx(react.Text, { fontSize: "sm", color: { base: 'red.600', _dark: 'red.300' }, children: errorText }) })), !isLoading && !isError && files.length === 0 && (jsxRuntime.jsx(react.Box, { py: 6, textAlign: "center", children: jsxRuntime.jsx(react.Text, { fontSize: "sm", color: "fg.muted", children: emptyText }) })), !isLoading && !isError && files.length > 0 && (jsxRuntime.jsx(react.SimpleGrid, { columns: { base: 2, sm: 3, md: 4 }, gap: 3, children: files.map((file) => {
+                    const isImage = IMAGE_EXT.test(file.name);
+                    const isSelected = selectedIds.has(file.id);
+                    const fileSize = typeof file.size === 'number'
+                        ? formatBytes(file.size)
+                        : file.size ?? null;
+                    if (multiple) {
+                        return (jsxRuntime.jsxs(CheckboxCard, { checked: isSelected, onCheckedChange: (e) => handleMultipleToggle(file, e.checked === true), variant: "outline", borderColor: "border.default", _hover: { borderColor: 'border.emphasized', bg: 'bg.muted' }, cursor: "pointer", children: [jsxRuntime.jsx(react.Box, { width: "100%", aspectRatio: 1, bg: "bg.muted", borderRadius: "md", overflow: "hidden", mb: 2, display: "flex", alignItems: "center", justifyContent: "center", children: isImage && file.url ? (jsxRuntime.jsx(react.Image, { src: file.url, alt: file.name, width: "100%", height: "100%", objectFit: "cover" })) : isImage ? (jsxRuntime.jsx(react.Icon, { as: lu.LuImage, boxSize: 8, color: "fg.muted" })) : (jsxRuntime.jsx(react.Icon, { as: lu.LuFile, boxSize: 8, color: "fg.muted" })) }), jsxRuntime.jsx(react.Text, { fontSize: "xs", fontWeight: "medium", color: "fg.default", lineClamp: 2, children: file.name }), fileSize && (jsxRuntime.jsx(react.Text, { fontSize: "xs", color: "fg.muted", children: fileSize }))] }, file.id));
+                    }
+                    return (jsxRuntime.jsxs(react.Box, { role: "button", tabIndex: 0, onClick: () => handleSingleSelect(file), onKeyDown: (e) => {
+                            if (e.key === 'Enter' || e.key === ' ') {
+                                e.preventDefault();
+                                handleSingleSelect(file);
+                            }
+                        }, padding: 3, borderRadius: "md", borderWidth: "2px", borderColor: isSelected ? 'colorPalette.500' : 'border.default', bg: isSelected
+                            ? { base: 'colorPalette.50', _dark: 'colorPalette.900/20' }
+                            : 'bg.panel', _hover: {
+                            borderColor: isSelected
+                                ? 'colorPalette.500'
+                                : 'border.emphasized',
+                            bg: isSelected
+                                ? { base: 'colorPalette.50', _dark: 'colorPalette.900/20' }
+                                : 'bg.muted',
+                        }, cursor: "pointer", transition: "all 0.2s", children: [jsxRuntime.jsx(react.Box, { width: "100%", aspectRatio: 1, bg: "bg.muted", borderRadius: "md", overflow: "hidden", mb: 2, display: "flex", alignItems: "center", justifyContent: "center", children: isImage && file.url ? (jsxRuntime.jsx(react.Image, { src: file.url, alt: file.name, width: "100%", height: "100%", objectFit: "cover" })) : isImage ? (jsxRuntime.jsx(react.Icon, { as: lu.LuImage, boxSize: 8, color: "fg.muted" })) : (jsxRuntime.jsx(react.Icon, { as: lu.LuFile, boxSize: 8, color: "fg.muted" })) }), jsxRuntime.jsx(react.Text, { fontSize: "xs", fontWeight: "medium", color: "fg.default", lineClamp: 2, children: file.name }), fileSize && (jsxRuntime.jsx(react.Text, { fontSize: "xs", color: "fg.muted", children: fileSize }))] }, file.id));
+                }) }))] }));
 };
 
 function MediaBrowserDialog({ open, onClose, onSelect, title, filterImageOnly = false, onFetchFiles, onUploadFile, enableUpload = false, labels, }) {
@@ -5655,7 +5623,8 @@ const FormMediaLibraryBrowser = ({ column, schema, prefix, }) => {
     const { required, gridColumn = 'span 12', gridRow = 'span 1', filePicker, type, } = schema;
     const isRequired = required?.some((columnId) => columnId === column);
     const isSingleSelect = type === 'string';
-    const currentValue = watch(column) ?? (isSingleSelect ? '' : []);
+    const colLabel = formI18n.colLabel;
+    const currentValue = watch(colLabel) ?? (isSingleSelect ? '' : []);
     // Handle string IDs only
     const currentFileIds = isSingleSelect
         ? currentValue
@@ -5664,7 +5633,6 @@ const FormMediaLibraryBrowser = ({ column, schema, prefix, }) => {
         : Array.isArray(currentValue)
             ? currentValue
             : [];
-    const colLabel = formI18n.colLabel;
     const fieldError = getNestedError(errors, colLabel);
     const [dialogOpen, setDialogOpen] = React.useState(false);
     const [failedImageIds, setFailedImageIds] = React.useState(new Set());
@@ -5752,7 +5720,7 @@ const FormMediaLibraryBrowser = ({ column, schema, prefix, }) => {
                         : /\.(jpg|jpeg|png|gif|bmp|webp|svg)$/i.test(fileId);
                     const imageFailed = failedImageIds.has(fileId);
                     const displayName = file?.name ?? fileId;
-                    return (jsxRuntime.jsx(react.Card.Root, { variant: 'subtle', colorPalette: "blue", children: jsxRuntime.jsxs(react.Card.Body, { gap: "2", cursor: 'pointer', onClick: () => handleRemove(index), display: 'flex', flexFlow: 'row', alignItems: 'center', padding: '2', border: "2px solid", borderColor: "border.default", borderRadius: "md", _hover: {
+                    return (jsxRuntime.jsx(react.Card.Root, { variant: 'subtle', children: jsxRuntime.jsxs(react.Card.Body, { gap: "2", cursor: 'pointer', onClick: () => handleRemove(index), display: 'flex', flexFlow: 'row', alignItems: 'center', padding: '2', border: "2px solid", borderColor: "border.default", borderRadius: "md", _hover: {
                                 borderColor: 'colorPalette.300',
                                 bg: 'bg.muted',
                             }, transition: "all 0.2s", children: [jsxRuntime.jsx(react.Box, { width: "60px", height: "60px", display: "flex", alignItems: "center", justifyContent: "center", bg: "bg.muted", borderRadius: "md", flexShrink: 0, marginRight: "2", overflow: "hidden", children: isImage && file?.url && !imageFailed ? (jsxRuntime.jsx(react.Image, { src: file.url, alt: displayName, boxSize: "60px", objectFit: "cover", onError: () => handleImageError(fileId) })) : isImage && !imageFailed ? (jsxRuntime.jsx(react.Icon, { as: lu.LuImage, boxSize: 6, color: "fg.muted" })) : (jsxRuntime.jsx(react.Icon, { as: lu.LuFile, boxSize: 6, color: "fg.muted" })) }), jsxRuntime.jsxs(react.VStack, { align: "start", flex: 1, gap: 1, children: [jsxRuntime.jsx(react.Text, { fontSize: "sm", fontWeight: "medium", color: "fg.default", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", children: displayName }), file?.size && (jsxRuntime.jsx(react.Text, { fontSize: "xs", color: "fg.muted", children: typeof file.size === 'number'
@@ -7848,66 +7816,24 @@ const ColumnRenderer = ({ column, properties, prefix, parentRequired, }) => {
     return jsxRuntime.jsx(SchemaRenderer, { schema: schemaWithRequired, prefix, column });
 };
 
-const SubmitButton = () => {
-    const { onSubmit, formButtonLabels } = useSchemaContext();
-    const methods = reactHookForm.useFormContext();
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    const onValid = async (data) => {
-        // Validation is handled by react-hook-form
-        // This function will only be called if validation passes
-        if (onSubmit) {
-            await onSubmit(data);
-        }
-    };
-    return (jsxRuntime.jsx(react.Button, { onClick: () => {
-            methods.handleSubmit(onValid)();
-        }, formNoValidate: true, children: formButtonLabels?.submit ?? 'Submit' }));
-};
-
 const FormBody = () => {
-    const { schema, displayConfig, formButtonLabels } = useSchemaContext();
-    const { showSubmitButton, showResetButton } = displayConfig;
-    const methods = reactHookForm.useFormContext();
-    console.log('errors', methods.formState.errors);
+    const { schema } = useSchemaContext();
     const { properties } = schema;
     const ordered = Object.keys(properties);
-    return (jsxRuntime.jsxs(react.Flex, { flexFlow: 'column', gap: "2", children: [jsxRuntime.jsx(react.Grid, { gap: "4", gridTemplateColumns: 'repeat(12, 1fr)', autoFlow: 'row', children: ordered.map((column) => {
-                    if (!properties) {
-                        console.error('properties is undefined when using FormBody', schema);
-                        return null;
-                    }
-                    return (jsxRuntime.jsx(ColumnRenderer, { properties: properties, prefix: ``, parentRequired: schema.required, column }, `form-input-${column}`));
-                }) }), (showResetButton || showSubmitButton) && (jsxRuntime.jsxs(react.Flex, { justifyContent: 'end', gap: "2", children: [showResetButton && (jsxRuntime.jsx(react.Button, { onClick: () => {
-                            methods.reset();
-                        }, variant: 'subtle', children: formButtonLabels?.reset ?? 'Reset' })), showSubmitButton && jsxRuntime.jsx(SubmitButton, {})] }))] }));
-};
-
-const FormTitle = () => {
-    const { schema } = useSchemaContext();
-    // Debug log when form title is missing
-    if (!schema.title) {
-        console.debug('[Form Title] Missing title in root schema. Add title property to schema.', {
-            schema: {
-                type: schema.type,
-                properties: schema.properties
-                    ? Object.keys(schema.properties)
-                    : undefined,
-            },
-        });
-    }
-    return jsxRuntime.jsx(react.Heading, { children: schema.title ?? 'Form' });
+    return (jsxRuntime.jsx(react.Flex, { flexFlow: 'column', gap: "2", children: jsxRuntime.jsx(react.Grid, { gap: "4", gridTemplateColumns: 'repeat(12, 1fr)', autoFlow: 'row', children: ordered.map((column) => {
+                if (!properties) {
+                    console.error('properties is undefined when using FormBody', schema);
+                    return null;
+                }
+                return (jsxRuntime.jsx(ColumnRenderer, { properties: properties, prefix: ``, parentRequired: schema.required, column }, `form-input-${column}`));
+            }) }) }));
 };
 
-const FormRoot = ({ schema, idMap, setIdMap, form, children, displayConfig = {
-    showSubmitButton: false,
-    showResetButton: false,
-    showTitle: true,
-}, dateTimePickerLabels, idPickerLabels, enumPickerLabels, filePickerLabels, formButtonLabels, timePickerLabels, insideDialog = false, }) => {
+const FormRoot = ({ schema, idMap, setIdMap, form, children, dateTimePickerLabels, idPickerLabels, enumPickerLabels, filePickerLabels, formButtonLabels, timePickerLabels, insideDialog = false, }) => {
     return (jsxRuntime.jsx(SchemaFormContext.Provider, { value: {
             schema,
             idMap,
             setIdMap,
-            displayConfig,
             dateTimePickerLabels,
             idPickerLabels,
             enumPickerLabels,
@@ -7919,8 +7845,7 @@ const FormRoot = ({ schema, idMap, setIdMap, form, children, displayConfig = {
 };
 
 const DefaultForm = ({ formConfig, }) => {
-    const { showTitle } = formConfig.displayConfig ?? {};
-    return (jsxRuntime.jsx(FormRoot, { ...formConfig, children: jsxRuntime.jsxs(react.Grid, { gap: "2", children: [showTitle && jsxRuntime.jsx(FormTitle, {}), jsxRuntime.jsx(FormBody, {})] }) }));
+    return (jsxRuntime.jsx(FormRoot, { ...formConfig, children: jsxRuntime.jsx(react.Grid, { gap: "2", children: jsxRuntime.jsx(FormBody, {}) }) }));
 };
 
 function useForm({ preLoadedValues, schema, }) {
@@ -9500,7 +9425,6 @@ exports.ErrorAlert = ErrorAlert;
 exports.FilterDialog = FilterDialog;
 exports.FormBody = FormBody;
 exports.FormRoot = FormRoot;
-exports.FormTitle = FormTitle;
 exports.GlobalFilter = GlobalFilter;
 exports.MediaLibraryBrowser = MediaLibraryBrowser;
 exports.PageSizeControl = PageSizeControl;

package/dist/index.mjs

@@ -1,5 +1,5 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { Button as Button$1, AbsoluteCenter, Spinner, Span, IconButton, Portal, Dialog, Flex, Text, useDisclosure, DialogBackdrop, RadioGroup as RadioGroup$1, Grid, Box, Slider as Slider$1, HStack, For, CheckboxCard as CheckboxCard$1, Input, Menu, createRecipeContext, createContext as createContext$1, Pagination as Pagination$1, usePaginationContext, Tooltip as Tooltip$1, Group, InputElement, Tag as Tag$1, Checkbox as Checkbox$1, Icon, VStack, Heading, EmptyState as EmptyState$2, List, Table as Table$1, Card, MenuRoot as MenuRoot$1, MenuTrigger as MenuTrigger$1, Clipboard, Badge, Link, Image, Alert, Field as Field$1, Popover, useFilter, useListCollection, Combobox, Tabs, useCombobox, Show, Skeleton, NumberInput, Textarea as Textarea$1, InputGroup as InputGroup$1, Select, Stack } from '@chakra-ui/react';
+import { Button as Button$1, AbsoluteCenter, Spinner, Span, IconButton, Portal, Dialog, Flex, Text, useDisclosure, DialogBackdrop, RadioGroup as RadioGroup$1, Grid, Box, Slider as Slider$1, HStack, For, CheckboxCard as CheckboxCard$1, Input, Menu, createRecipeContext, createContext as createContext$1, Pagination as Pagination$1, usePaginationContext, Tooltip as Tooltip$1, Group, InputElement, Tag as Tag$1, Checkbox as Checkbox$1, Icon, VStack, Heading, EmptyState as EmptyState$2, List, Table as Table$1, Card, MenuRoot as MenuRoot$1, MenuTrigger as MenuTrigger$1, Clipboard, Badge, Link, Image, Alert, Field as Field$1, Popover, useFilter, useListCollection, Combobox, SimpleGrid, Tabs, useCombobox, Show, Skeleton, NumberInput, Textarea as Textarea$1, InputGroup as InputGroup$1, Select, Stack } from '@chakra-ui/react';
 import { AiOutlineColumnWidth } from 'react-icons/ai';
 import * as React from 'react';
 import { createContext, useContext, useState, useMemo, useCallback, useEffect, useRef } from 'react';
@@ -4170,11 +4170,6 @@ const SchemaFormContext = createContext({
     schema: {},
     onSubmit: async () => { },
     timezone: 'Asia/Hong_Kong',
-    displayConfig: {
-        showSubmitButton: false,
-        showResetButton: false,
-        showTitle: true,
-    },
 });
 
 const useSchemaContext = () => {
@@ -5366,108 +5361,81 @@ function formatBytes(bytes) {
     return `${parseFloat((bytes / Math.pow(k, i)).toFixed(2))} ${sizes[i]}`;
 }
 
+const IMAGE_EXT = /\.(jpg|jpeg|png|gif|bmp|webp|svg)$/i;
+function filterImageFiles(files) {
+    return files.filter((f) => IMAGE_EXT.test(f.name));
+}
 const MediaLibraryBrowser = ({ onFetchFiles, filterImageOnly = false, labels, enabled = true, multiple = false, onFileSelect, selectedFile: controlledSelectedFile, onSelectedFileChange, }) => {
-    const [searchTerm, setSearchTerm] = useState('');
-    const [internalSelectedFile, setInternalSelectedFile] = useState(multiple ? [] : undefined);
-    const [failedImageIds, setFailedImageIds] = useState(new Set());
-    // Use controlled or internal state for selectedFile
-    const selectedFile = controlledSelectedFile ?? internalSelectedFile;
-    const setSelectedFile = onSelectedFileChange ?? setInternalSelectedFile;
-    const { data: filesData, isLoading, isError, } = useQuery({
-        queryKey: ['file-picker-library', searchTerm],
+    const [search, setSearch] = useState('');
+    const query = useQuery({
+        queryKey: ['media-library', search, filterImageOnly],
         queryFn: async () => {
             if (!onFetchFiles)
-                return { data: [] };
-            const files = await onFetchFiles(searchTerm.trim() || '');
-            return { data: files };
+                return [];
+            const list = await onFetchFiles(search);
+            return filterImageOnly ? filterImageFiles(list) : list;
         },
         enabled: enabled && !!onFetchFiles,
     });
-    const files = (filesData?.data || []);
-    const filteredFiles = filterImageOnly
-        ? files.filter((file) => /\.(jpg|jpeg|png|gif|bmp|webp|svg)$/i.test(file.name))
-        : files;
-    const handleFileClick = (file) => {
-        if (multiple) {
-            const currentSelection = Array.isArray(selectedFile) ? selectedFile : [];
-            const isAlreadySelected = currentSelection.some((f) => f.id === file.id);
-            const newSelection = isAlreadySelected
-                ? currentSelection.filter((f) => f.id !== file.id)
-                : [...currentSelection, file];
-            setSelectedFile(newSelection);
-            if (onFileSelect) {
-                onFileSelect(newSelection);
-            }
-        }
-        else {
-            const newFile = selectedFile === file ? undefined : file;
-            setSelectedFile(newFile);
-            if (onFileSelect && newFile) {
-                onFileSelect(newFile);
-            }
+    const files = useMemo(() => (query.data ?? []), [query.data]);
+    const selectedIds = useMemo(() => {
+        if (multiple && Array.isArray(controlledSelectedFile)) {
+            return new Set(controlledSelectedFile.map((f) => f.id));
+        }
+        if (!multiple &&
+            controlledSelectedFile &&
+            !Array.isArray(controlledSelectedFile)) {
+            return new Set([controlledSelectedFile.id]);
+        }
+        return new Set();
+    }, [multiple, controlledSelectedFile]);
+    const handleSingleSelect = (file) => {
+        if (!multiple) {
+            onSelectedFileChange?.(file);
+            onFileSelect?.(file);
         }
     };
-    const handleImageError = (fileId) => {
-        setFailedImageIds((prev) => new Set(prev).add(fileId));
+    const handleMultipleToggle = (file, checked) => {
+        const current = multiple && Array.isArray(controlledSelectedFile)
+            ? [...controlledSelectedFile]
+            : [];
+        const next = checked
+            ? [...current, file]
+            : current.filter((f) => f.id !== file.id);
+        onSelectedFileChange?.(next);
+        onFileSelect?.(next);
     };
-    if (!onFetchFiles)
-        return null;
-    return (jsxs(VStack, { align: "stretch", gap: 4, children: [jsxs(Box, { position: "relative", children: [jsx(Input, { placeholder: labels?.searchPlaceholder ?? 'Search files...', value: searchTerm, onChange: (e) => setSearchTerm(e.target.value), bg: "bg.panel", border: "1px solid", borderColor: "border.default", colorPalette: "blue", _focus: {
-                            borderColor: 'colorPalette.500',
-                            _dark: {
-                                borderColor: 'colorPalette.400',
-                            },
-                            boxShadow: {
-                                base: '0 0 0 1px var(--chakra-colors-blue-500)',
-                                _dark: '0 0 0 1px var(--chakra-colors-blue-400)',
-                            },
-                        }, pl: 10 }), jsx(Icon, { as: LuSearch, position: "absolute", left: 3, top: "50%", transform: "translateY(-50%)", color: "fg.muted", boxSize: 4 })] }), isLoading && (jsxs(Box, { textAlign: "center", py: 8, children: [jsx(Spinner, { size: "lg", colorPalette: "blue" }), jsx(Text, { mt: 4, color: "fg.muted", children: labels?.loading ?? 'Loading files...' })] })), isError && (jsx(Box, { bg: { base: 'colorPalette.50', _dark: 'colorPalette.900/20' }, border: "1px solid", borderColor: {
-                    base: 'colorPalette.200',
-                    _dark: 'colorPalette.800',
-                }, colorPalette: "red", borderRadius: "md", p: 4, children: jsx(Text, { color: {
-                        base: 'colorPalette.600',
-                        _dark: 'colorPalette.300',
-                    }, children: labels?.loadingFailed ?? 'Failed to load files' }) })), !isLoading && !isError && (jsx(Box, { maxHeight: "400px", overflowY: "auto", children: filteredFiles.length === 0 ? (jsx(Box, { textAlign: "center", py: 8, children: jsx(Text, { color: "fg.muted", children: labels?.noFilesFound ?? 'No files found' }) })) : (jsx(VStack, { align: "stretch", gap: 2, children: filteredFiles.map((file) => {
-                        const isImage = /\.(jpg|jpeg|png|gif|bmp|webp|svg)$/i.test(file.name);
-                        const isSelected = multiple
-                            ? Array.isArray(selectedFile) &&
-                                selectedFile.some((f) => f.id === file.id)
-                            : selectedFile?.id ===
-                                file.id;
-                        const imageFailed = failedImageIds.has(file.id);
-                        return (jsx(Box, { p: 3, border: "2px solid", borderColor: isSelected
-                                ? {
-                                    base: 'colorPalette.500',
-                                    _dark: 'colorPalette.400',
-                                }
-                                : 'border.default', borderRadius: "md", bg: isSelected
-                                ? {
-                                    base: 'colorPalette.50',
-                                    _dark: 'colorPalette.900/20',
-                                }
-                                : 'bg.panel', colorPalette: "blue", cursor: "pointer", onClick: () => handleFileClick(file), _hover: {
-                                borderColor: isSelected
-                                    ? {
-                                        base: 'colorPalette.600',
-                                        _dark: 'colorPalette.400',
-                                    }
-                                    : {
-                                        base: 'colorPalette.300',
-                                        _dark: 'colorPalette.400',
-                                    },
-                                bg: isSelected
-                                    ? {
-                                        base: 'colorPalette.100',
-                                        _dark: 'colorPalette.800/30',
-                                    }
-                                    : 'bg.muted',
-                            }, transition: "all 0.2s", children: jsxs(HStack, { gap: 3, children: [jsx(Box, { width: "60px", height: "60px", display: "flex", alignItems: "center", justifyContent: "center", bg: "bg.muted", borderRadius: "md", flexShrink: 0, children: isImage && file.url && !imageFailed ? (jsx(Image, { src: file.url, alt: file.name, boxSize: "60px", objectFit: "cover", borderRadius: "md", onError: () => handleImageError(file.id) })) : isImage && (imageFailed || !file.url) ? (jsx(Icon, { as: LuImage, boxSize: 6, color: "fg.muted" })) : (jsx(Icon, { as: LuFile, boxSize: 6, color: "fg.muted" })) }), jsxs(VStack, { align: "start", flex: 1, gap: 1, children: [jsx(Text, { fontSize: "sm", fontWeight: "medium", color: "fg.default", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", children: file.name }), jsxs(HStack, { gap: 2, children: [file.size && (jsx(Fragment, { children: jsx(Text, { fontSize: "xs", color: "fg.muted", children: typeof file.size === 'number'
-                                                                ? formatBytes(file.size)
-                                                                : file.size }) })), file.comment && (jsxs(Fragment, { children: [file.size && (jsx(Text, { fontSize: "xs", color: "fg.muted", children: "\u2022" })), jsx(Text, { fontSize: "xs", color: "fg.muted", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", children: file.comment })] }))] })] }), isSelected && (jsx(Box, { width: "24px", height: "24px", borderRadius: "full", bg: {
-                                            base: 'colorPalette.500',
-                                            _dark: 'colorPalette.400',
-                                        }, colorPalette: "blue", display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0, children: jsx(Text, { color: "white", fontSize: "xs", fontWeight: "bold", children: "\u2713" }) }))] }) }, file.id));
-                    }) })) }))] }));
+    const isLoading = query.isPending;
+    const isError = query.isError;
+    const searchPlaceholder = labels?.searchPlaceholder ?? 'Search files...';
+    const loadingText = labels?.loading ?? 'Loading...';
+    const errorText = labels?.loadingFailed ?? 'Failed to load files';
+    const emptyText = labels?.noFilesFound ?? 'No files found';
+    return (jsxs(VStack, { align: "stretch", gap: 4, children: [jsx(InputGroup, { startElement: jsx(Icon, { as: LuSearch, color: "fg.muted" }), children: jsx(Input, { placeholder: searchPlaceholder, value: search, onChange: (e) => setSearch(e.target.value), bg: "bg.panel", borderColor: "border.default" }) }), isLoading && (jsxs(HStack, { gap: 2, py: 6, justify: "center", children: [jsx(Spinner, { size: "sm", colorPalette: "blue" }), jsx(Text, { fontSize: "sm", color: "fg.muted", children: loadingText })] })), isError && (jsx(Box, { py: 4, px: 3, borderRadius: "md", bg: { base: 'red.50', _dark: 'red.900/20' }, borderWidth: "1px", borderColor: { base: 'red.200', _dark: 'red.800' }, children: jsx(Text, { fontSize: "sm", color: { base: 'red.600', _dark: 'red.300' }, children: errorText }) })), !isLoading && !isError && files.length === 0 && (jsx(Box, { py: 6, textAlign: "center", children: jsx(Text, { fontSize: "sm", color: "fg.muted", children: emptyText }) })), !isLoading && !isError && files.length > 0 && (jsx(SimpleGrid, { columns: { base: 2, sm: 3, md: 4 }, gap: 3, children: files.map((file) => {
+                    const isImage = IMAGE_EXT.test(file.name);
+                    const isSelected = selectedIds.has(file.id);
+                    const fileSize = typeof file.size === 'number'
+                        ? formatBytes(file.size)
+                        : file.size ?? null;
+                    if (multiple) {
+                        return (jsxs(CheckboxCard, { checked: isSelected, onCheckedChange: (e) => handleMultipleToggle(file, e.checked === true), variant: "outline", borderColor: "border.default", _hover: { borderColor: 'border.emphasized', bg: 'bg.muted' }, cursor: "pointer", children: [jsx(Box, { width: "100%", aspectRatio: 1, bg: "bg.muted", borderRadius: "md", overflow: "hidden", mb: 2, display: "flex", alignItems: "center", justifyContent: "center", children: isImage && file.url ? (jsx(Image, { src: file.url, alt: file.name, width: "100%", height: "100%", objectFit: "cover" })) : isImage ? (jsx(Icon, { as: LuImage, boxSize: 8, color: "fg.muted" })) : (jsx(Icon, { as: LuFile, boxSize: 8, color: "fg.muted" })) }), jsx(Text, { fontSize: "xs", fontWeight: "medium", color: "fg.default", lineClamp: 2, children: file.name }), fileSize && (jsx(Text, { fontSize: "xs", color: "fg.muted", children: fileSize }))] }, file.id));
+                    }
+                    return (jsxs(Box, { role: "button", tabIndex: 0, onClick: () => handleSingleSelect(file), onKeyDown: (e) => {
+                            if (e.key === 'Enter' || e.key === ' ') {
+                                e.preventDefault();
+                                handleSingleSelect(file);
+                            }
+                        }, padding: 3, borderRadius: "md", borderWidth: "2px", borderColor: isSelected ? 'colorPalette.500' : 'border.default', bg: isSelected
+                            ? { base: 'colorPalette.50', _dark: 'colorPalette.900/20' }
+                            : 'bg.panel', _hover: {
+                            borderColor: isSelected
+                                ? 'colorPalette.500'
+                                : 'border.emphasized',
+                            bg: isSelected
+                                ? { base: 'colorPalette.50', _dark: 'colorPalette.900/20' }
+                                : 'bg.muted',
+                        }, cursor: "pointer", transition: "all 0.2s", children: [jsx(Box, { width: "100%", aspectRatio: 1, bg: "bg.muted", borderRadius: "md", overflow: "hidden", mb: 2, display: "flex", alignItems: "center", justifyContent: "center", children: isImage && file.url ? (jsx(Image, { src: file.url, alt: file.name, width: "100%", height: "100%", objectFit: "cover" })) : isImage ? (jsx(Icon, { as: LuImage, boxSize: 8, color: "fg.muted" })) : (jsx(Icon, { as: LuFile, boxSize: 8, color: "fg.muted" })) }), jsx(Text, { fontSize: "xs", fontWeight: "medium", color: "fg.default", lineClamp: 2, children: file.name }), fileSize && (jsx(Text, { fontSize: "xs", color: "fg.muted", children: fileSize }))] }, file.id));
+                }) }))] }));
 };
 
 function MediaBrowserDialog({ open, onClose, onSelect, title, filterImageOnly = false, onFetchFiles, onUploadFile, enableUpload = false, labels, }) {
@@ -5635,7 +5603,8 @@ const FormMediaLibraryBrowser = ({ column, schema, prefix, }) => {
     const { required, gridColumn = 'span 12', gridRow = 'span 1', filePicker, type, } = schema;
     const isRequired = required?.some((columnId) => columnId === column);
     const isSingleSelect = type === 'string';
-    const currentValue = watch(column) ?? (isSingleSelect ? '' : []);
+    const colLabel = formI18n.colLabel;
+    const currentValue = watch(colLabel) ?? (isSingleSelect ? '' : []);
     // Handle string IDs only
     const currentFileIds = isSingleSelect
         ? currentValue
@@ -5644,7 +5613,6 @@ const FormMediaLibraryBrowser = ({ column, schema, prefix, }) => {
         : Array.isArray(currentValue)
             ? currentValue
             : [];
-    const colLabel = formI18n.colLabel;
     const fieldError = getNestedError(errors, colLabel);
     const [dialogOpen, setDialogOpen] = useState(false);
     const [failedImageIds, setFailedImageIds] = useState(new Set());
@@ -5732,7 +5700,7 @@ const FormMediaLibraryBrowser = ({ column, schema, prefix, }) => {
                         : /\.(jpg|jpeg|png|gif|bmp|webp|svg)$/i.test(fileId);
                     const imageFailed = failedImageIds.has(fileId);
                     const displayName = file?.name ?? fileId;
-                    return (jsx(Card.Root, { variant: 'subtle', colorPalette: "blue", children: jsxs(Card.Body, { gap: "2", cursor: 'pointer', onClick: () => handleRemove(index), display: 'flex', flexFlow: 'row', alignItems: 'center', padding: '2', border: "2px solid", borderColor: "border.default", borderRadius: "md", _hover: {
+                    return (jsx(Card.Root, { variant: 'subtle', children: jsxs(Card.Body, { gap: "2", cursor: 'pointer', onClick: () => handleRemove(index), display: 'flex', flexFlow: 'row', alignItems: 'center', padding: '2', border: "2px solid", borderColor: "border.default", borderRadius: "md", _hover: {
                                 borderColor: 'colorPalette.300',
                                 bg: 'bg.muted',
                             }, transition: "all 0.2s", children: [jsx(Box, { width: "60px", height: "60px", display: "flex", alignItems: "center", justifyContent: "center", bg: "bg.muted", borderRadius: "md", flexShrink: 0, marginRight: "2", overflow: "hidden", children: isImage && file?.url && !imageFailed ? (jsx(Image, { src: file.url, alt: displayName, boxSize: "60px", objectFit: "cover", onError: () => handleImageError(fileId) })) : isImage && !imageFailed ? (jsx(Icon, { as: LuImage, boxSize: 6, color: "fg.muted" })) : (jsx(Icon, { as: LuFile, boxSize: 6, color: "fg.muted" })) }), jsxs(VStack, { align: "start", flex: 1, gap: 1, children: [jsx(Text, { fontSize: "sm", fontWeight: "medium", color: "fg.default", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", children: displayName }), file?.size && (jsx(Text, { fontSize: "xs", color: "fg.muted", children: typeof file.size === 'number'
@@ -7828,66 +7796,24 @@ const ColumnRenderer = ({ column, properties, prefix, parentRequired, }) => {
     return jsx(SchemaRenderer, { schema: schemaWithRequired, prefix, column });
 };
 
-const SubmitButton = () => {
-    const { onSubmit, formButtonLabels } = useSchemaContext();
-    const methods = useFormContext();
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    const onValid = async (data) => {
-        // Validation is handled by react-hook-form
-        // This function will only be called if validation passes
-        if (onSubmit) {
-            await onSubmit(data);
-        }
-    };
-    return (jsx(Button$1, { onClick: () => {
-            methods.handleSubmit(onValid)();
-        }, formNoValidate: true, children: formButtonLabels?.submit ?? 'Submit' }));
-};
-
 const FormBody = () => {
-    const { schema, displayConfig, formButtonLabels } = useSchemaContext();
-    const { showSubmitButton, showResetButton } = displayConfig;
-    const methods = useFormContext();
-    console.log('errors', methods.formState.errors);
+    const { schema } = useSchemaContext();
     const { properties } = schema;
     const ordered = Object.keys(properties);
-    return (jsxs(Flex, { flexFlow: 'column', gap: "2", children: [jsx(Grid, { gap: "4", gridTemplateColumns: 'repeat(12, 1fr)', autoFlow: 'row', children: ordered.map((column) => {
-                    if (!properties) {
-                        console.error('properties is undefined when using FormBody', schema);
-                        return null;
-                    }
-                    return (jsx(ColumnRenderer, { properties: properties, prefix: ``, parentRequired: schema.required, column }, `form-input-${column}`));
-                }) }), (showResetButton || showSubmitButton) && (jsxs(Flex, { justifyContent: 'end', gap: "2", children: [showResetButton && (jsx(Button$1, { onClick: () => {
-                            methods.reset();
-                        }, variant: 'subtle', children: formButtonLabels?.reset ?? 'Reset' })), showSubmitButton && jsx(SubmitButton, {})] }))] }));
-};
-
-const FormTitle = () => {
-    const { schema } = useSchemaContext();
-    // Debug log when form title is missing
-    if (!schema.title) {
-        console.debug('[Form Title] Missing title in root schema. Add title property to schema.', {
-            schema: {
-                type: schema.type,
-                properties: schema.properties
-                    ? Object.keys(schema.properties)
-                    : undefined,
-            },
-        });
-    }
-    return jsx(Heading, { children: schema.title ?? 'Form' });
+    return (jsx(Flex, { flexFlow: 'column', gap: "2", children: jsx(Grid, { gap: "4", gridTemplateColumns: 'repeat(12, 1fr)', autoFlow: 'row', children: ordered.map((column) => {
+                if (!properties) {
+                    console.error('properties is undefined when using FormBody', schema);
+                    return null;
+                }
+                return (jsx(ColumnRenderer, { properties: properties, prefix: ``, parentRequired: schema.required, column }, `form-input-${column}`));
+            }) }) }));
 };
 
-const FormRoot = ({ schema, idMap, setIdMap, form, children, displayConfig = {
-    showSubmitButton: false,
-    showResetButton: false,
-    showTitle: true,
-}, dateTimePickerLabels, idPickerLabels, enumPickerLabels, filePickerLabels, formButtonLabels, timePickerLabels, insideDialog = false, }) => {
+const FormRoot = ({ schema, idMap, setIdMap, form, children, dateTimePickerLabels, idPickerLabels, enumPickerLabels, filePickerLabels, formButtonLabels, timePickerLabels, insideDialog = false, }) => {
     return (jsx(SchemaFormContext.Provider, { value: {
             schema,
             idMap,
             setIdMap,
-            displayConfig,
             dateTimePickerLabels,
             idPickerLabels,
             enumPickerLabels,
@@ -7899,8 +7825,7 @@ const FormRoot = ({ schema, idMap, setIdMap, form, children, displayConfig = {
 };
 
 const DefaultForm = ({ formConfig, }) => {
-    const { showTitle } = formConfig.displayConfig ?? {};
-    return (jsx(FormRoot, { ...formConfig, children: jsxs(Grid, { gap: "2", children: [showTitle && jsx(FormTitle, {}), jsx(FormBody, {})] }) }));
+    return (jsx(FormRoot, { ...formConfig, children: jsx(Grid, { gap: "2", children: jsx(FormBody, {}) }) }));
 };
 
 function useForm({ preLoadedValues, schema, }) {
@@ -9462,4 +9387,4 @@ function DataTableServer({ columns, enableRowSelection = true, enableMultiRowSel
         }, children: jsx(DataTableServerContext.Provider, { value: { url: url ?? '', query }, children: children }) }));
 }
 
-export { CalendarDisplay, CardHeader, DataDisplay, DataTable, DataTableServer, DatePickerContext, DatePickerInput, DefaultCardTitle, DefaultForm, DefaultTable, DefaultTableServer, DensityToggleButton, EditSortingButton, EmptyState, ErrorAlert, FilterDialog, FormBody, FormRoot, FormTitle, GlobalFilter, MediaLibraryBrowser, PageSizeControl, Pagination, RecordDisplay, ReloadButton, ResetFilteringButton, ResetSelectionButton, ResetSortingButton, RowCountText, SelectAllRowsToggle, Table, TableBody, TableCardContainer, TableCards, TableComponent, TableControls, TableDataDisplay, TableFilter, TableFilterTags, TableFooter, TableHeader, TableLoadingComponent, TableSelector, TableSorter, TableViewer, TextCell, TimeRangeZoom, TimeViewportBlock, TimeViewportBlocks, TimeViewportGrid, TimeViewportHeader, TimeViewportMarkerLine, TimeViewportRoot, ViewDialog, defaultRenderDisplay, getMultiDates, getRangeDates, useDataTable, useDataTableContext, useDataTableServer, useForm, useTimeRangeZoom, useTimeViewport, useTimeViewportBlockGeometry, useTimeViewportHeader, useTimeViewportTicks };
+export { CalendarDisplay, CardHeader, DataDisplay, DataTable, DataTableServer, DatePickerContext, DatePickerInput, DefaultCardTitle, DefaultForm, DefaultTable, DefaultTableServer, DensityToggleButton, EditSortingButton, EmptyState, ErrorAlert, FilterDialog, FormBody, FormRoot, GlobalFilter, MediaLibraryBrowser, PageSizeControl, Pagination, RecordDisplay, ReloadButton, ResetFilteringButton, ResetSelectionButton, ResetSortingButton, RowCountText, SelectAllRowsToggle, Table, TableBody, TableCardContainer, TableCards, TableComponent, TableControls, TableDataDisplay, TableFilter, TableFilterTags, TableFooter, TableHeader, TableLoadingComponent, TableSelector, TableSorter, TableViewer, TextCell, TimeRangeZoom, TimeViewportBlock, TimeViewportBlocks, TimeViewportGrid, TimeViewportHeader, TimeViewportMarkerLine, TimeViewportRoot, ViewDialog, defaultRenderDisplay, getMultiDates, getRangeDates, useDataTable, useDataTableContext, useDataTableServer, useForm, useTimeRangeZoom, useTimeViewport, useTimeViewportBlockGeometry, useTimeViewportHeader, useTimeViewportTicks };

package/dist/types/components/Form/SchemaFormContext.d.ts

@@ -7,11 +7,6 @@ export interface SchemaFormContext<TData extends FieldValues> {
     idMap: Record<string, unknown>;
     setIdMap: Dispatch<SetStateAction<Record<string, unknown>>>;
     timezone?: string;
-    displayConfig: {
-        showSubmitButton?: boolean;
-        showResetButton?: boolean;
-        showTitle?: boolean;
-    };
     dateTimePickerLabels?: DateTimePickerLabels;
     idPickerLabels?: IdPickerLabels;
     enumPickerLabels?: EnumPickerLabels;

package/dist/types/components/Form/components/MediaLibraryBrowser.d.ts

@@ -18,5 +18,5 @@ type MediaLibraryBrowserPropsMultiple = MediaLibraryBrowserPropsBase & {
     onSelectedFileChange?: (files: FilePickerMediaFile[]) => void;
 };
 export type MediaLibraryBrowserProps = MediaLibraryBrowserPropsSingle | MediaLibraryBrowserPropsMultiple;
-export declare const MediaLibraryBrowser: ({ onFetchFiles, filterImageOnly, labels, enabled, multiple, onFileSelect, selectedFile: controlledSelectedFile, onSelectedFileChange, }: MediaLibraryBrowserProps) => import("react/jsx-runtime").JSX.Element | null;
+export declare const MediaLibraryBrowser: ({ onFetchFiles, filterImageOnly, labels, enabled, multiple, onFileSelect, selectedFile: controlledSelectedFile, onSelectedFileChange, }: MediaLibraryBrowserProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/types/components/Form/components/core/DefaultForm.d.ts

@@ -1,7 +1,6 @@
-import { FormRootProps } from "./FormRoot";
-import { FieldValues } from "react-hook-form";
+import { FormRootProps } from './FormRoot';
+import { FieldValues } from 'react-hook-form';
 export interface DefaultFormProps<TData extends FieldValues> {
-    formConfig: Omit<FormRootProps<TData>, "children">;
-    showTitle?: boolean;
+    formConfig: Omit<FormRootProps<TData>, 'children'>;
 }
 export declare const DefaultForm: <TData extends FieldValues>({ formConfig, }: DefaultFormProps<TData>) => import("react/jsx-runtime").JSX.Element;

package/dist/types/components/Form/components/core/FormRoot.d.ts

@@ -33,11 +33,6 @@ export interface FormRootProps<TData extends FieldValues> {
     setIdMap: Dispatch<SetStateAction<Record<string, unknown>>>;
     form: UseFormReturn<TData, any, TData>;
     children: ReactNode;
-    displayConfig?: {
-        showSubmitButton?: boolean;
-        showResetButton?: boolean;
-        showTitle?: boolean;
-    };
     dateTimePickerLabels?: DateTimePickerLabels;
     idPickerLabels?: IdPickerLabels;
     enumPickerLabels?: EnumPickerLabels;
@@ -53,4 +48,4 @@ export interface CustomJSONSchema7Definition extends JSONSchema7 {
     customQueryFn: any;
     children: ReactNode;
 }
-export declare const FormRoot: <TData extends FieldValues>({ schema, idMap, setIdMap, form, children, displayConfig, dateTimePickerLabels, idPickerLabels, enumPickerLabels, filePickerLabels, formButtonLabels, timePickerLabels, insideDialog, }: FormRootProps<TData>) => import("react/jsx-runtime").JSX.Element;
+export declare const FormRoot: <TData extends FieldValues>({ schema, idMap, setIdMap, form, children, dateTimePickerLabels, idPickerLabels, enumPickerLabels, filePickerLabels, formButtonLabels, timePickerLabels, insideDialog, }: FormRootProps<TData>) => import("react/jsx-runtime").JSX.Element;

package/dist/types/index.d.ts

@@ -125,7 +125,6 @@ export * from './components/DataTable/useDataTableServer';
 export * from './components/DataTable/context/useDataTableContext';
 export * from './components/Form/components/core/DefaultForm';
 export * from './components/Form/components/core/FormRoot';
-export * from './components/Form/components/core/FormTitle';
 export * from './components/Form/components/core/FormBody';
 export * from './components/Form/components/types/CustomJSONSchema7';
 export * from './components/Form/components/MediaLibraryBrowser';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bsol-oss/react-datatable5",
-  "version": "13.0.1-beta.37",
+  "version": "13.0.1-beta.39",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.mjs",

package/dist/types/components/Form/components/core/FormTitle.d.ts

@@ -1 +0,0 @@
-export declare const FormTitle: () => import("react/jsx-runtime").JSX.Element;

package/dist/types/components/Form/components/core/SubmitButton.d.ts

@@ -1 +0,0 @@
-export declare const SubmitButton: () => import("react/jsx-runtime").JSX.Element;