@bsol-oss/react-datatable5 12.0.0-beta.75 → 12.0.0-beta.76

package/dist/index.d.ts

@@ -823,6 +823,17 @@ interface EnumPickerLabels {
     emptySearchResult?: string;
     initialResults?: string;
 }
+interface FilePickerLabels {
+    fileDropzone?: string;
+    browseLibrary?: string;
+    dialogTitle?: string;
+    searchPlaceholder?: string;
+    loading?: string;
+    loadingFailed?: string;
+    noFilesFound?: string;
+    cancel?: string;
+    select?: string;
+}
 interface CustomJSONSchema7 extends JSONSchema7 {
     gridColumn?: string;
     gridRow?: string;
@@ -849,12 +860,26 @@ interface CustomJSONSchema7 extends JSONSchema7 {
     formatOptions?: Intl.NumberFormatOptions;
     numberStorageType?: 'string' | 'number';
     errorMessages?: Partial<Record<ValidationErrorType | string, string>>;
+    filePicker?: FilePickerProps;
 }
 interface TagPickerProps {
     column: string;
     schema: CustomJSONSchema7;
     prefix: string;
 }
+interface FilePickerMediaFile {
+    id: string;
+    name: string;
+    url?: string;
+    size?: string | number;
+    comment?: string;
+    type?: string;
+}
+interface FilePickerProps {
+    onFetchFiles?: (search: string) => Promise<FilePickerMediaFile[]>;
+    enableMediaLibrary?: boolean;
+    filterImageOnly?: boolean;
+}
 
 interface FormRootProps<TData extends FieldValues> {
     schema: CustomJSONSchema7;
@@ -883,6 +908,7 @@ interface FormRootProps<TData extends FieldValues> {
     dateTimePickerLabels?: DateTimePickerLabels;
     idPickerLabels?: IdPickerLabels;
     enumPickerLabels?: EnumPickerLabels;
+    filePickerLabels?: FilePickerLabels;
 }
 interface CustomJSONSchema7Definition extends JSONSchema7 {
     variant: string;
@@ -899,7 +925,7 @@ declare const idPickerSanityCheck: (column: string, foreign_key?: {
     column?: string | undefined;
     display_column?: string | undefined;
 } | undefined) => void;
-declare const FormRoot: <TData extends FieldValues>({ schema, idMap, setIdMap, form, serverUrl, translate, children, order, ignore, include, onSubmit, rowNumber, requestOptions, getUpdatedData, customErrorRenderer, customSuccessRenderer, displayConfig, requireConfirmation, dateTimePickerLabels, idPickerLabels, enumPickerLabels, }: FormRootProps<TData>) => react_jsx_runtime.JSX.Element;
+declare const FormRoot: <TData extends FieldValues>({ schema, idMap, setIdMap, form, serverUrl, translate, children, order, ignore, include, onSubmit, rowNumber, requestOptions, getUpdatedData, customErrorRenderer, customSuccessRenderer, displayConfig, requireConfirmation, dateTimePickerLabels, idPickerLabels, enumPickerLabels, filePickerLabels, }: FormRootProps<TData>) => react_jsx_runtime.JSX.Element;
 
 interface DefaultFormProps<TData extends FieldValues> {
     formConfig: Omit<FormRootProps<TData>, "children">;
@@ -1071,4 +1097,4 @@ declare module "@tanstack/react-table" {
     }
 }
 
-export { type CalendarProps, CardHeader, type CardHeaderProps, type CustomJSONSchema7, type CustomJSONSchema7Definition, DataDisplay, type DataDisplayProps, type DataResponse, DataTable, type DataTableDefaultState, type DataTableProps, DataTableServer, type DataTableServerProps, type DatePickerLabels, type DatePickerProps, type DateTimePickerLabels, DefaultCardTitle, DefaultForm, type DefaultFormProps, DefaultTable, type DefaultTableProps, DensityToggleButton, type DensityToggleButtonProps, type EditFilterButtonProps, EditSortingButton, type EditSortingButtonProps, type EditViewButtonProps, EmptyState, type EmptyStateProps, type EnumPickerLabels, ErrorAlert, type ErrorAlertProps, type ErrorMessageConfig, type ErrorMessageResult, type FieldErrorConfig, FilterDialog, FormBody, FormRoot, type FormRootProps, FormTitle, type GetColumnsConfigs, type GetDateColorProps, type GetMultiDatesProps, type GetRangeDatesProps, type GetStyleProps, type GetVariantProps, GlobalFilter, type IdPickerLabels, PageSizeControl, type PageSizeControlProps, Pagination, type QueryParams, type RangeCalendarProps, type RangeDatePickerProps, RecordDisplay, type RecordDisplayProps, ReloadButton, type ReloadButtonProps, ResetFilteringButton, ResetSelectionButton, ResetSortingButton, type Result, RowCountText, Table, TableBody, type TableBodyProps, TableCardContainer, type TableCardContainerProps, TableCards, type TableCardsProps, TableComponent, TableControls, type TableControlsProps, TableDataDisplay, type TableDataDisplayProps, TableFilter, TableFilterTags, TableFooter, type TableFooterProps, TableHeader, type TableHeaderProps, type TableHeaderTexts, TableLoadingComponent, type TableLoadingComponentProps, type TableProps, type TableRendererProps, type TableRowSelectorProps, TableSelector, TableSorter, TableViewer, type TagPickerProps, TextCell, type TextCellProps, type UseDataTableProps, type UseDataTableReturn, type UseDataTableServerProps, type UseDataTableServerReturn, type UseFormProps, type ValidationErrorType, ViewDialog, buildErrorMessages, buildFieldErrors, buildRequiredErrors, convertToAjvErrorsFormat, createErrorMessage, getColumns, getMultiDates, getRangeDates, idPickerSanityCheck, useDataTable, useDataTableContext, useDataTableServer, useForm, widthSanityCheck };
+export { type CalendarProps, CardHeader, type CardHeaderProps, type CustomJSONSchema7, type CustomJSONSchema7Definition, DataDisplay, type DataDisplayProps, type DataResponse, DataTable, type DataTableDefaultState, type DataTableProps, DataTableServer, type DataTableServerProps, type DatePickerLabels, type DatePickerProps, type DateTimePickerLabels, DefaultCardTitle, DefaultForm, type DefaultFormProps, DefaultTable, type DefaultTableProps, DensityToggleButton, type DensityToggleButtonProps, type EditFilterButtonProps, EditSortingButton, type EditSortingButtonProps, type EditViewButtonProps, EmptyState, type EmptyStateProps, type EnumPickerLabels, ErrorAlert, type ErrorAlertProps, type ErrorMessageConfig, type ErrorMessageResult, type FieldErrorConfig, type FilePickerLabels, type FilePickerMediaFile, type FilePickerProps, FilterDialog, FormBody, FormRoot, type FormRootProps, FormTitle, type GetColumnsConfigs, type GetDateColorProps, type GetMultiDatesProps, type GetRangeDatesProps, type GetStyleProps, type GetVariantProps, GlobalFilter, type IdPickerLabels, PageSizeControl, type PageSizeControlProps, Pagination, type QueryParams, type RangeCalendarProps, type RangeDatePickerProps, RecordDisplay, type RecordDisplayProps, ReloadButton, type ReloadButtonProps, ResetFilteringButton, ResetSelectionButton, ResetSortingButton, type Result, RowCountText, Table, TableBody, type TableBodyProps, TableCardContainer, type TableCardContainerProps, TableCards, type TableCardsProps, TableComponent, TableControls, type TableControlsProps, TableDataDisplay, type TableDataDisplayProps, TableFilter, TableFilterTags, TableFooter, type TableFooterProps, TableHeader, type TableHeaderProps, type TableHeaderTexts, TableLoadingComponent, type TableLoadingComponentProps, type TableProps, type TableRendererProps, type TableRowSelectorProps, TableSelector, TableSorter, TableViewer, type TagPickerProps, TextCell, type TextCellProps, type UseDataTableProps, type UseDataTableReturn, type UseDataTableServerProps, type UseDataTableServerReturn, type UseFormProps, type ValidationErrorType, ViewDialog, buildErrorMessages, buildFieldErrors, buildRequiredErrors, convertToAjvErrorsFormat, createErrorMessage, getColumns, getMultiDates, getRangeDates, idPickerSanityCheck, useDataTable, useDataTableContext, useDataTableServer, useForm, widthSanityCheck };

package/dist/index.js

@@ -3908,7 +3908,7 @@ const FormRoot = ({ schema, idMap, setIdMap, form, serverUrl, translate, childre
     showSubmitButton: true,
     showResetButton: true,
     showTitle: true,
-}, requireConfirmation = false, dateTimePickerLabels, idPickerLabels, enumPickerLabels, }) => {
+}, requireConfirmation = false, dateTimePickerLabels, idPickerLabels, enumPickerLabels, filePickerLabels, }) => {
     const [isSuccess, setIsSuccess] = React.useState(false);
     const [isError, setIsError] = React.useState(false);
     const [isSubmiting, setIsSubmiting] = React.useState(false);
@@ -3997,6 +3997,7 @@ const FormRoot = ({ schema, idMap, setIdMap, form, serverUrl, translate, childre
             dateTimePickerLabels,
             idPickerLabels,
             enumPickerLabels,
+            filePickerLabels,
             ajvResolver: ajvResolver(schema),
         }, children: jsxRuntime.jsx(reactHookForm.FormProvider, { ...form, children: children }) }));
 };
@@ -4370,6 +4371,92 @@ const DatePicker = ({ column, schema, prefix }) => {
                                 } })] }) })] }) }));
 };
 
+dayjs.extend(utc);
+dayjs.extend(timezone);
+const DateRangePicker = ({ column, schema, prefix, }) => {
+    const { watch, formState: { errors }, setValue, } = reactHookForm.useFormContext();
+    const { timezone, dateTimePickerLabels } = useSchemaContext();
+    const formI18n = useFormI18n(column, prefix);
+    const { required, gridColumn = 'span 12', gridRow = 'span 1', displayDateFormat = 'YYYY-MM-DD', dateFormat = 'YYYY-MM-DD', } = schema;
+    const isRequired = required?.some((columnId) => columnId === column);
+    const colLabel = formI18n.colLabel;
+    const [open, setOpen] = React.useState(false);
+    const selectedDateRange = watch(colLabel);
+    // Convert string[] to Date[] for the picker
+    const selectedDates = (selectedDateRange ?? [])
+        .map((dateStr) => {
+        if (!dateStr)
+            return null;
+        const parsed = dayjs(dateStr).tz(timezone);
+        return parsed.isValid() ? parsed.toDate() : null;
+    })
+        .filter((date) => date !== null);
+    // Format display string
+    const getDisplayText = () => {
+        if (!selectedDateRange || selectedDateRange.length === 0) {
+            return '';
+        }
+        if (selectedDateRange.length === 1) {
+            const date = dayjs(selectedDateRange[0]).tz(timezone);
+            return date.isValid() ? date.format(displayDateFormat) : '';
+        }
+        if (selectedDateRange.length === 2) {
+            const startDate = dayjs(selectedDateRange[0]).tz(timezone);
+            const endDate = dayjs(selectedDateRange[1]).tz(timezone);
+            if (startDate.isValid() && endDate.isValid()) {
+                return `${startDate.format(displayDateFormat)} - ${endDate.format(displayDateFormat)}`;
+            }
+        }
+        return '';
+    };
+    React.useEffect(() => {
+        try {
+            if (selectedDateRange && selectedDateRange.length > 0) {
+                // Format dates according to dateFormat from schema
+                const formatted = selectedDateRange
+                    .map((dateStr) => {
+                    if (!dateStr)
+                        return null;
+                    const parsed = dayjs(dateStr).tz(timezone);
+                    return parsed.isValid() ? parsed.format(dateFormat) : null;
+                })
+                    .filter((date) => date !== null);
+                // Update the form value only if different to avoid loops
+                // Compare arrays element by element
+                const needsUpdate = formatted.length !== selectedDateRange.length ||
+                    formatted.some((val, idx) => val !== selectedDateRange[idx]);
+                if (needsUpdate && formatted.length > 0) {
+                    setValue(colLabel, formatted, {
+                        shouldValidate: true,
+                        shouldDirty: true,
+                    });
+                }
+            }
+        }
+        catch (e) {
+            console.error(e);
+        }
+    }, [selectedDateRange, dateFormat, colLabel, setValue, timezone]);
+    return (jsxRuntime.jsx(Field, { label: formI18n.label(), required: isRequired, alignItems: 'stretch', gridColumn,
+        gridRow, errorText: errors[`${colLabel}`] ? formI18n.required() : undefined, invalid: !!errors[colLabel], children: jsxRuntime.jsxs(PopoverRoot, { open: open, onOpenChange: (e) => setOpen(e.open), closeOnInteractOutside: true, children: [jsxRuntime.jsx(PopoverTrigger, { asChild: true, children: jsxRuntime.jsxs(Button, { size: "sm", variant: "outline", onClick: () => {
+                            setOpen(true);
+                        }, justifyContent: 'start', children: [jsxRuntime.jsx(md.MdDateRange, {}), getDisplayText()] }) }), jsxRuntime.jsx(PopoverContent, { minW: '600px', children: jsxRuntime.jsxs(PopoverBody, { children: [jsxRuntime.jsx(PopoverTitle, {}), jsxRuntime.jsx(RangeDatePicker, { selected: selectedDates, onDateSelected: ({ selected, selectable, date }) => {
+                                    const newDates = getRangeDates({
+                                        selectable,
+                                        date,
+                                        selectedDates,
+                                    }) ?? [];
+                                    // Convert Date[] to string[]
+                                    const formattedDates = newDates
+                                        .map((dateObj) => dayjs(dateObj).tz(timezone).format(dateFormat))
+                                        .filter((dateStr) => dateStr);
+                                    setValue(colLabel, formattedDates, {
+                                        shouldValidate: true,
+                                        shouldDirty: true,
+                                    });
+                                }, monthsToDisplay: 2 })] }) })] }) }));
+};
+
 function filterArray(array, searchTerm) {
     // Convert the search term to lower case for case-insensitive comparison
     const lowerCaseSearchTerm = searchTerm.toLowerCase();
@@ -4831,24 +4918,161 @@ const FileDropzone = ({ children = undefined, gridProps = {}, onDrop = () => { }
     return (jsxRuntime.jsxs(react.Grid, { ...getColor(isDraggedOver), ref: ref, cursor: "pointer", onClick: handleClick, borderStyle: "dashed", borderColor: "colorPalette.400", alignContent: "center", justifyContent: "center", borderWidth: 1, borderRadius: 4, ...gridProps, children: [children, !!children === false && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(react.Flex, { children: placeholder }), jsxRuntime.jsx(react.Input, { type: "file", multiple: true, style: { display: "none" }, ref: fileInput, onChange: handleChange })] }))] }));
 };
 
+/**
+ * Format bytes to human-readable string
+ * @param bytes - The number of bytes to format
+ * @returns Formatted string (e.g., "1.5 KB", "2.3 MB")
+ */
+function formatBytes(bytes) {
+    if (bytes === 0)
+        return '0 Bytes';
+    const k = 1024;
+    const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB'];
+    const i = Math.floor(Math.log(bytes) / Math.log(k));
+    return `${parseFloat((bytes / Math.pow(k, i)).toFixed(2))} ${sizes[i]}`;
+}
+
+function FilePickerDialog({ open, onClose, onSelect, title, filterImageOnly = false, onFetchFiles, labels, translate, colLabel, }) {
+    const [searchTerm, setSearchTerm] = React.useState('');
+    const [selectedFileId, setSelectedFileId] = React.useState('');
+    const { data: filesData, isLoading, isError, } = reactQuery.useQuery({
+        queryKey: ['file-picker-library', searchTerm],
+        queryFn: async () => {
+            if (!onFetchFiles)
+                return { data: [] };
+            const files = await onFetchFiles(searchTerm.trim() || '');
+            return { data: files };
+        },
+        enabled: open && !!onFetchFiles,
+    });
+    const files = (filesData?.data || []);
+    const filteredFiles = filterImageOnly
+        ? files.filter((file) => /\.(jpg|jpeg|png|gif|bmp|webp|svg)$/i.test(file.name))
+        : files;
+    const handleSelect = () => {
+        if (selectedFileId) {
+            onSelect(selectedFileId);
+            onClose();
+            setSelectedFileId('');
+            setSearchTerm('');
+        }
+    };
+    const handleClose = () => {
+        onClose();
+        setSelectedFileId('');
+        setSearchTerm('');
+    };
+    if (!onFetchFiles)
+        return null;
+    return (jsxRuntime.jsx(DialogRoot, { open: open, onOpenChange: (e) => !e.open && handleClose(), children: jsxRuntime.jsxs(DialogContent, { maxWidth: "800px", maxHeight: "90vh", children: [jsxRuntime.jsxs(DialogHeader, { children: [jsxRuntime.jsx(DialogTitle, { fontSize: "lg", fontWeight: "bold", children: title }), jsxRuntime.jsx(DialogCloseTrigger, {})] }), jsxRuntime.jsx(DialogBody, { children: jsxRuntime.jsxs(react.VStack, { align: "stretch", gap: 4, children: [jsxRuntime.jsxs(react.Box, { position: "relative", children: [jsxRuntime.jsx(react.Input, { placeholder: labels?.searchPlaceholder ??
+                                            translate(removeIndex(`${colLabel}.search_placeholder`)) ??
+                                            'Search files...', value: searchTerm, onChange: (e) => setSearchTerm(e.target.value), bg: "bg.panel", border: "1px solid", borderColor: "border.default", _focus: {
+                                            borderColor: 'blue.500',
+                                            boxShadow: '0 0 0 1px var(--chakra-colors-blue-500)',
+                                        }, 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 ??
+                                            translate(removeIndex(`${colLabel}.loading`)) ??
+                                            'Loading files...' })] })), isError && (jsxRuntime.jsx(react.Box, { bg: "red.50", _dark: { bg: 'red.900/20' }, border: "1px solid", borderColor: "red.200", borderRadius: "md", p: 4, children: jsxRuntime.jsx(react.Text, { color: "red.600", _dark: { color: 'red.300' }, children: labels?.loadingFailed ??
+                                        translate(removeIndex(`${colLabel}.error.loading_failed`)) ??
+                                        '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 ??
+                                            translate(removeIndex(`${colLabel}.no_files_found`)) ??
+                                            '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 = selectedFileId === file.id;
+                                        return (jsxRuntime.jsx(react.Box, { p: 3, border: "2px solid", borderColor: isSelected ? 'blue.500' : 'border.default', borderRadius: "md", bg: isSelected ? 'blue.50' : 'bg.panel', _dark: {
+                                                bg: isSelected ? 'blue.900/20' : 'bg.panel',
+                                            }, cursor: "pointer", onClick: () => setSelectedFileId(file.id), _hover: {
+                                                borderColor: isSelected ? 'blue.600' : 'blue.300',
+                                                bg: isSelected ? 'blue.100' : '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 ? (jsxRuntime.jsx(react.Image, { src: file.url, alt: file.name, boxSize: "60px", objectFit: "cover", borderRadius: "md" })) : (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: "blue.500", display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0, children: jsxRuntime.jsx(react.Text, { color: "white", fontSize: "xs", fontWeight: "bold", children: "\u2713" }) }))] }) }, file.id));
+                                    }) })) }))] }) }), jsxRuntime.jsx(DialogFooter, { children: jsxRuntime.jsxs(react.HStack, { gap: 3, justify: "end", children: [jsxRuntime.jsx(react.Button, { variant: "outline", onClick: handleClose, borderColor: "border.default", bg: "bg.panel", _hover: { bg: 'bg.muted' }, children: labels?.cancel ??
+                                    translate(removeIndex(`${colLabel}.cancel`)) ??
+                                    'Cancel' }), jsxRuntime.jsx(react.Button, { colorPalette: "blue", onClick: handleSelect, disabled: !selectedFileId, children: labels?.select ??
+                                    translate(removeIndex(`${colLabel}.select`)) ??
+                                    'Select' })] }) })] }) }));
+}
 const FilePicker = ({ column, schema, prefix }) => {
     const { setValue, formState: { errors }, watch, } = reactHookForm.useFormContext();
-    const { translate } = useSchemaContext();
-    const { required, gridColumn = 'span 12', gridRow = 'span 1', } = schema;
+    const { filePickerLabels } = useSchemaContext();
+    const formI18n = useFormI18n(column, prefix);
+    const { required, gridColumn = 'span 12', gridRow = 'span 1', filePicker, } = schema;
     const isRequired = required?.some((columnId) => columnId === column);
-    const currentFiles = (watch(column) ?? []);
-    const colLabel = `${prefix}${column}`;
-    return (jsxRuntime.jsxs(Field, { label: `${translate.t(`${colLabel}.field_label`)}`, required: isRequired, gridColumn: gridColumn ?? 'span 4', gridRow: gridRow ?? 'span 1', display: 'grid', gridTemplateRows: 'auto 1fr auto', alignItems: 'stretch', errorText: errors[`${colLabel}`]
-            ? translate.t(removeIndex(`${colLabel}.field_required`))
-            : undefined, invalid: !!errors[colLabel], children: [jsxRuntime.jsx(FileDropzone, { onDrop: ({ files }) => {
-                    const newFiles = files.filter(({ name }) => !currentFiles.some((cur) => cur.name === name));
-                    setValue(colLabel, [...currentFiles, ...newFiles]);
-                }, placeholder: translate.t(removeIndex(`${colLabel}.fileDropzone`)) }), jsxRuntime.jsx(react.Flex, { flexFlow: 'column', gap: 1, children: currentFiles.map((file) => {
-                    return (jsxRuntime.jsx(react.Card.Root, { variant: 'subtle', children: jsxRuntime.jsxs(react.Card.Body, { gap: "2", cursor: 'pointer', onClick: () => {
-                                setValue(column, currentFiles.filter(({ name }) => {
-                                    return name !== file.name;
-                                }));
-                            }, display: 'flex', flexFlow: 'row', alignItems: 'center', padding: '2', children: [file.type.startsWith('image/') && (jsxRuntime.jsx(react.Image, { src: URL.createObjectURL(file), alt: file.name, boxSize: "50px", objectFit: "cover", borderRadius: "md", marginRight: "2" })), jsxRuntime.jsx(react.Box, { children: file.name }), jsxRuntime.jsx(ti.TiDeleteOutline, {})] }) }, file.name));
+    const currentValue = watch(column) ?? [];
+    const currentFiles = Array.isArray(currentValue)
+        ? currentValue
+        : [];
+    const colLabel = formI18n.colLabel;
+    const [dialogOpen, setDialogOpen] = React.useState(false);
+    const { onFetchFiles, enableMediaLibrary = false, filterImageOnly = false, } = filePicker || {};
+    const showMediaLibrary = enableMediaLibrary && !!onFetchFiles;
+    const handleMediaLibrarySelect = (fileId) => {
+        const newFiles = [...currentFiles, fileId];
+        setValue(colLabel, newFiles);
+    };
+    const handleRemove = (index) => {
+        const newFiles = currentFiles.filter((_, i) => i !== index);
+        setValue(colLabel, newFiles);
+    };
+    const isFileObject = (value) => {
+        return value instanceof File;
+    };
+    const getFileIdentifier = (file, index) => {
+        if (isFileObject(file)) {
+            return `${file.name}-${file.size}-${index}`;
+        }
+        return file;
+    };
+    const getFileName = (file) => {
+        if (isFileObject(file)) {
+            return file.name;
+        }
+        return typeof file === 'string' ? file : 'Unknown file';
+    };
+    const getFileSize = (file) => {
+        if (isFileObject(file)) {
+            return file.size;
+        }
+        return undefined;
+    };
+    const isImageFile = (file) => {
+        if (isFileObject(file)) {
+            return file.type.startsWith('image/');
+        }
+        if (typeof file === 'string') {
+            return /\.(jpg|jpeg|png|gif|bmp|webp|svg)$/i.test(file);
+        }
+        return false;
+    };
+    const getImageUrl = (file) => {
+        if (isFileObject(file)) {
+            return URL.createObjectURL(file);
+        }
+        return undefined;
+    };
+    return (jsxRuntime.jsxs(Field, { label: formI18n.label(), required: isRequired, alignItems: 'stretch', gridColumn,
+        gridRow, errorText: errors[`${colLabel}`] ? formI18n.required() : undefined, invalid: !!errors[colLabel], children: [jsxRuntime.jsxs(react.VStack, { align: "stretch", gap: 2, children: [jsxRuntime.jsx(FileDropzone, { onDrop: ({ files }) => {
+                            const newFiles = files.filter(({ name }) => !currentFiles.some((cur) => {
+                                if (isFileObject(cur)) {
+                                    return cur.name === name;
+                                }
+                                return false;
+                            }));
+                            setValue(colLabel, [...currentFiles, ...newFiles]);
+                        }, placeholder: filePickerLabels?.fileDropzone ?? formI18n.t('fileDropzone') }), showMediaLibrary && (jsxRuntime.jsx(react.Button, { variant: "outline", onClick: () => setDialogOpen(true), borderColor: "border.default", bg: "bg.panel", _hover: { bg: 'bg.muted' }, children: filePickerLabels?.browseLibrary ??
+                            formI18n.t('browse_library') ??
+                            'Browse from Library' }))] }), showMediaLibrary && (jsxRuntime.jsx(FilePickerDialog, { open: dialogOpen, onClose: () => setDialogOpen(false), onSelect: handleMediaLibrarySelect, title: filePickerLabels?.dialogTitle ??
+                    formI18n.t('dialog_title') ??
+                    'Select File', filterImageOnly: filterImageOnly, onFetchFiles: onFetchFiles, labels: filePickerLabels, translate: formI18n.t, colLabel: colLabel })), jsxRuntime.jsx(react.Flex, { flexFlow: 'column', gap: 1, children: currentFiles.map((file, index) => {
+                    const fileIdentifier = getFileIdentifier(file, index);
+                    const fileName = getFileName(file);
+                    const fileSize = getFileSize(file);
+                    const isImage = isImageFile(file);
+                    const imageUrl = getImageUrl(file);
+                    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: 'blue.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", children: isImage && imageUrl ? (jsxRuntime.jsx(react.Image, { src: imageUrl, alt: fileName, boxSize: "60px", objectFit: "cover", borderRadius: "md" })) : (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: fileName }), fileSize !== undefined && (jsxRuntime.jsx(react.Text, { fontSize: "xs", color: "fg.muted", children: formatBytes(fileSize) }))] }), jsxRuntime.jsx(react.Icon, { as: ti.TiDeleteOutline, boxSize: 5, color: "fg.muted" })] }) }, fileIdentifier));
                 }) })] }));
 };
 
@@ -5972,59 +6196,62 @@ const DateTimePicker = ({ column, schema, prefix, }) => {
 const SchemaRenderer = ({ schema, prefix, column, }) => {
     const colSchema = schema;
     const { type, variant, properties: innerProperties, foreign_key, format, items, } = schema;
-    if (variant === "custom-input") {
+    if (variant === 'custom-input') {
         return jsxRuntime.jsx(CustomInput, { schema: colSchema, prefix, column });
     }
-    if (type === "string") {
+    if (type === 'string') {
         if ((schema.enum ?? []).length > 0) {
             return jsxRuntime.jsx(EnumPicker, { schema: colSchema, prefix, column });
         }
-        if (variant === "id-picker") {
+        if (variant === 'id-picker') {
             idPickerSanityCheck(column, foreign_key);
             return jsxRuntime.jsx(IdPicker, { schema: colSchema, prefix, column });
         }
-        if (format === "date") {
+        if (format === 'date') {
             return jsxRuntime.jsx(DatePicker, { schema: colSchema, prefix, column });
         }
-        if (format === "time") {
+        if (format === 'time') {
             return jsxRuntime.jsx(TimePicker, { schema: colSchema, prefix, column });
         }
-        if (format === "date-time") {
+        if (format === 'date-time') {
             return jsxRuntime.jsx(DateTimePicker, { schema: colSchema, prefix, column });
         }
-        if (variant === "text-area") {
+        if (variant === 'text-area') {
             return jsxRuntime.jsx(TextAreaInput, { schema: colSchema, prefix, column });
         }
         return jsxRuntime.jsx(StringInputField, { schema: colSchema, prefix, column });
     }
-    if (type === "number" || type === "integer") {
+    if (type === 'number' || type === 'integer') {
         return jsxRuntime.jsx(NumberInputField, { schema: colSchema, prefix, column });
     }
-    if (type === "boolean") {
+    if (type === 'boolean') {
         return jsxRuntime.jsx(BooleanPicker, { schema: colSchema, prefix, column });
     }
-    if (type === "object") {
+    if (type === 'object') {
         if (innerProperties) {
             return jsxRuntime.jsx(ObjectInput, { schema: colSchema, prefix, column });
         }
         return jsxRuntime.jsx(RecordInput$1, { schema: colSchema, prefix, column });
     }
-    if (type === "array") {
-        if (variant === "id-picker") {
+    if (type === 'array') {
+        if (variant === 'id-picker') {
             idPickerSanityCheck(column, foreign_key);
             return (jsxRuntime.jsx(IdPicker, { schema: colSchema, prefix, column, isMultiple: true }));
         }
-        if (variant === "tag-picker") {
+        if (variant === 'tag-picker') {
             return jsxRuntime.jsx(TagPicker, { schema: colSchema, prefix, column });
         }
-        if (variant === "file-picker") {
+        if (variant === 'file-picker') {
             return jsxRuntime.jsx(FilePicker, { schema: colSchema, prefix, column });
         }
-        if (variant === "enum-picker") {
+        if (variant === 'date-range') {
+            return jsxRuntime.jsx(DateRangePicker, { schema: colSchema, prefix, column });
+        }
+        if (variant === 'enum-picker') {
             const { items } = colSchema;
             const { enum: enumItems } = items;
             const enumSchema = {
-                type: "string",
+                type: 'string',
                 enum: enumItems,
             };
             return (jsxRuntime.jsx(EnumPicker, { isMultiple: true, schema: enumSchema, prefix, column }));
@@ -6034,7 +6261,7 @@ const SchemaRenderer = ({ schema, prefix, column, }) => {
         }
         return jsxRuntime.jsx(react.Text, { children: `array ${column}` });
     }
-    if (type === "null") {
+    if (type === 'null') {
         return jsxRuntime.jsx(react.Text, { children: `null ${column}` });
     }
     return jsxRuntime.jsx(react.Text, { children: "missing type" });

package/dist/index.mjs

@@ -3,7 +3,7 @@ import { Button as Button$1, AbsoluteCenter, Spinner, Span, IconButton, Portal,
 import { AiOutlineColumnWidth } from 'react-icons/ai';
 import * as React from 'react';
 import React__default, { createContext, useContext, useState, useEffect, useRef, forwardRef } from 'react';
-import { LuX, LuCheck, LuChevronRight } from 'react-icons/lu';
+import { LuX, LuCheck, LuChevronRight, LuFile, LuSearch } from 'react-icons/lu';
 import { MdOutlineSort, MdFilterAlt, MdSearch, MdOutlineViewColumn, MdFilterListAlt, MdPushPin, MdCancel, MdClear, MdOutlineChecklist, MdDateRange } from 'react-icons/md';
 import { FaUpDown, FaGripLinesVertical, FaTrash } from 'react-icons/fa6';
 import { BiDownArrow, BiUpArrow, BiError } from 'react-icons/bi';
@@ -3888,7 +3888,7 @@ const FormRoot = ({ schema, idMap, setIdMap, form, serverUrl, translate, childre
     showSubmitButton: true,
     showResetButton: true,
     showTitle: true,
-}, requireConfirmation = false, dateTimePickerLabels, idPickerLabels, enumPickerLabels, }) => {
+}, requireConfirmation = false, dateTimePickerLabels, idPickerLabels, enumPickerLabels, filePickerLabels, }) => {
     const [isSuccess, setIsSuccess] = useState(false);
     const [isError, setIsError] = useState(false);
     const [isSubmiting, setIsSubmiting] = useState(false);
@@ -3977,6 +3977,7 @@ const FormRoot = ({ schema, idMap, setIdMap, form, serverUrl, translate, childre
             dateTimePickerLabels,
             idPickerLabels,
             enumPickerLabels,
+            filePickerLabels,
             ajvResolver: ajvResolver(schema),
         }, children: jsx(FormProvider, { ...form, children: children }) }));
 };
@@ -4350,6 +4351,92 @@ const DatePicker = ({ column, schema, prefix }) => {
                                 } })] }) })] }) }));
 };
 
+dayjs.extend(utc);
+dayjs.extend(timezone);
+const DateRangePicker = ({ column, schema, prefix, }) => {
+    const { watch, formState: { errors }, setValue, } = useFormContext();
+    const { timezone, dateTimePickerLabels } = useSchemaContext();
+    const formI18n = useFormI18n(column, prefix);
+    const { required, gridColumn = 'span 12', gridRow = 'span 1', displayDateFormat = 'YYYY-MM-DD', dateFormat = 'YYYY-MM-DD', } = schema;
+    const isRequired = required?.some((columnId) => columnId === column);
+    const colLabel = formI18n.colLabel;
+    const [open, setOpen] = useState(false);
+    const selectedDateRange = watch(colLabel);
+    // Convert string[] to Date[] for the picker
+    const selectedDates = (selectedDateRange ?? [])
+        .map((dateStr) => {
+        if (!dateStr)
+            return null;
+        const parsed = dayjs(dateStr).tz(timezone);
+        return parsed.isValid() ? parsed.toDate() : null;
+    })
+        .filter((date) => date !== null);
+    // Format display string
+    const getDisplayText = () => {
+        if (!selectedDateRange || selectedDateRange.length === 0) {
+            return '';
+        }
+        if (selectedDateRange.length === 1) {
+            const date = dayjs(selectedDateRange[0]).tz(timezone);
+            return date.isValid() ? date.format(displayDateFormat) : '';
+        }
+        if (selectedDateRange.length === 2) {
+            const startDate = dayjs(selectedDateRange[0]).tz(timezone);
+            const endDate = dayjs(selectedDateRange[1]).tz(timezone);
+            if (startDate.isValid() && endDate.isValid()) {
+                return `${startDate.format(displayDateFormat)} - ${endDate.format(displayDateFormat)}`;
+            }
+        }
+        return '';
+    };
+    useEffect(() => {
+        try {
+            if (selectedDateRange && selectedDateRange.length > 0) {
+                // Format dates according to dateFormat from schema
+                const formatted = selectedDateRange
+                    .map((dateStr) => {
+                    if (!dateStr)
+                        return null;
+                    const parsed = dayjs(dateStr).tz(timezone);
+                    return parsed.isValid() ? parsed.format(dateFormat) : null;
+                })
+                    .filter((date) => date !== null);
+                // Update the form value only if different to avoid loops
+                // Compare arrays element by element
+                const needsUpdate = formatted.length !== selectedDateRange.length ||
+                    formatted.some((val, idx) => val !== selectedDateRange[idx]);
+                if (needsUpdate && formatted.length > 0) {
+                    setValue(colLabel, formatted, {
+                        shouldValidate: true,
+                        shouldDirty: true,
+                    });
+                }
+            }
+        }
+        catch (e) {
+            console.error(e);
+        }
+    }, [selectedDateRange, dateFormat, colLabel, setValue, timezone]);
+    return (jsx(Field, { label: formI18n.label(), required: isRequired, alignItems: 'stretch', gridColumn,
+        gridRow, errorText: errors[`${colLabel}`] ? formI18n.required() : undefined, invalid: !!errors[colLabel], children: jsxs(PopoverRoot, { open: open, onOpenChange: (e) => setOpen(e.open), closeOnInteractOutside: true, children: [jsx(PopoverTrigger, { asChild: true, children: jsxs(Button, { size: "sm", variant: "outline", onClick: () => {
+                            setOpen(true);
+                        }, justifyContent: 'start', children: [jsx(MdDateRange, {}), getDisplayText()] }) }), jsx(PopoverContent, { minW: '600px', children: jsxs(PopoverBody, { children: [jsx(PopoverTitle, {}), jsx(RangeDatePicker, { selected: selectedDates, onDateSelected: ({ selected, selectable, date }) => {
+                                    const newDates = getRangeDates({
+                                        selectable,
+                                        date,
+                                        selectedDates,
+                                    }) ?? [];
+                                    // Convert Date[] to string[]
+                                    const formattedDates = newDates
+                                        .map((dateObj) => dayjs(dateObj).tz(timezone).format(dateFormat))
+                                        .filter((dateStr) => dateStr);
+                                    setValue(colLabel, formattedDates, {
+                                        shouldValidate: true,
+                                        shouldDirty: true,
+                                    });
+                                }, monthsToDisplay: 2 })] }) })] }) }));
+};
+
 function filterArray(array, searchTerm) {
     // Convert the search term to lower case for case-insensitive comparison
     const lowerCaseSearchTerm = searchTerm.toLowerCase();
@@ -4811,24 +4898,161 @@ const FileDropzone = ({ children = undefined, gridProps = {}, onDrop = () => { }
     return (jsxs(Grid, { ...getColor(isDraggedOver), ref: ref, cursor: "pointer", onClick: handleClick, borderStyle: "dashed", borderColor: "colorPalette.400", alignContent: "center", justifyContent: "center", borderWidth: 1, borderRadius: 4, ...gridProps, children: [children, !!children === false && (jsxs(Fragment, { children: [jsx(Flex, { children: placeholder }), jsx(Input, { type: "file", multiple: true, style: { display: "none" }, ref: fileInput, onChange: handleChange })] }))] }));
 };
 
+/**
+ * Format bytes to human-readable string
+ * @param bytes - The number of bytes to format
+ * @returns Formatted string (e.g., "1.5 KB", "2.3 MB")
+ */
+function formatBytes(bytes) {
+    if (bytes === 0)
+        return '0 Bytes';
+    const k = 1024;
+    const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB'];
+    const i = Math.floor(Math.log(bytes) / Math.log(k));
+    return `${parseFloat((bytes / Math.pow(k, i)).toFixed(2))} ${sizes[i]}`;
+}
+
+function FilePickerDialog({ open, onClose, onSelect, title, filterImageOnly = false, onFetchFiles, labels, translate, colLabel, }) {
+    const [searchTerm, setSearchTerm] = useState('');
+    const [selectedFileId, setSelectedFileId] = useState('');
+    const { data: filesData, isLoading, isError, } = useQuery({
+        queryKey: ['file-picker-library', searchTerm],
+        queryFn: async () => {
+            if (!onFetchFiles)
+                return { data: [] };
+            const files = await onFetchFiles(searchTerm.trim() || '');
+            return { data: files };
+        },
+        enabled: open && !!onFetchFiles,
+    });
+    const files = (filesData?.data || []);
+    const filteredFiles = filterImageOnly
+        ? files.filter((file) => /\.(jpg|jpeg|png|gif|bmp|webp|svg)$/i.test(file.name))
+        : files;
+    const handleSelect = () => {
+        if (selectedFileId) {
+            onSelect(selectedFileId);
+            onClose();
+            setSelectedFileId('');
+            setSearchTerm('');
+        }
+    };
+    const handleClose = () => {
+        onClose();
+        setSelectedFileId('');
+        setSearchTerm('');
+    };
+    if (!onFetchFiles)
+        return null;
+    return (jsx(DialogRoot, { open: open, onOpenChange: (e) => !e.open && handleClose(), children: jsxs(DialogContent, { maxWidth: "800px", maxHeight: "90vh", children: [jsxs(DialogHeader, { children: [jsx(DialogTitle, { fontSize: "lg", fontWeight: "bold", children: title }), jsx(DialogCloseTrigger, {})] }), jsx(DialogBody, { children: jsxs(VStack, { align: "stretch", gap: 4, children: [jsxs(Box, { position: "relative", children: [jsx(Input, { placeholder: labels?.searchPlaceholder ??
+                                            translate(removeIndex(`${colLabel}.search_placeholder`)) ??
+                                            'Search files...', value: searchTerm, onChange: (e) => setSearchTerm(e.target.value), bg: "bg.panel", border: "1px solid", borderColor: "border.default", _focus: {
+                                            borderColor: 'blue.500',
+                                            boxShadow: '0 0 0 1px var(--chakra-colors-blue-500)',
+                                        }, 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 ??
+                                            translate(removeIndex(`${colLabel}.loading`)) ??
+                                            'Loading files...' })] })), isError && (jsx(Box, { bg: "red.50", _dark: { bg: 'red.900/20' }, border: "1px solid", borderColor: "red.200", borderRadius: "md", p: 4, children: jsx(Text, { color: "red.600", _dark: { color: 'red.300' }, children: labels?.loadingFailed ??
+                                        translate(removeIndex(`${colLabel}.error.loading_failed`)) ??
+                                        '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 ??
+                                            translate(removeIndex(`${colLabel}.no_files_found`)) ??
+                                            '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 = selectedFileId === file.id;
+                                        return (jsx(Box, { p: 3, border: "2px solid", borderColor: isSelected ? 'blue.500' : 'border.default', borderRadius: "md", bg: isSelected ? 'blue.50' : 'bg.panel', _dark: {
+                                                bg: isSelected ? 'blue.900/20' : 'bg.panel',
+                                            }, cursor: "pointer", onClick: () => setSelectedFileId(file.id), _hover: {
+                                                borderColor: isSelected ? 'blue.600' : 'blue.300',
+                                                bg: isSelected ? 'blue.100' : '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 ? (jsx(Image, { src: file.url, alt: file.name, boxSize: "60px", objectFit: "cover", borderRadius: "md" })) : (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: "blue.500", display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0, children: jsx(Text, { color: "white", fontSize: "xs", fontWeight: "bold", children: "\u2713" }) }))] }) }, file.id));
+                                    }) })) }))] }) }), jsx(DialogFooter, { children: jsxs(HStack, { gap: 3, justify: "end", children: [jsx(Button$1, { variant: "outline", onClick: handleClose, borderColor: "border.default", bg: "bg.panel", _hover: { bg: 'bg.muted' }, children: labels?.cancel ??
+                                    translate(removeIndex(`${colLabel}.cancel`)) ??
+                                    'Cancel' }), jsx(Button$1, { colorPalette: "blue", onClick: handleSelect, disabled: !selectedFileId, children: labels?.select ??
+                                    translate(removeIndex(`${colLabel}.select`)) ??
+                                    'Select' })] }) })] }) }));
+}
 const FilePicker = ({ column, schema, prefix }) => {
     const { setValue, formState: { errors }, watch, } = useFormContext();
-    const { translate } = useSchemaContext();
-    const { required, gridColumn = 'span 12', gridRow = 'span 1', } = schema;
+    const { filePickerLabels } = useSchemaContext();
+    const formI18n = useFormI18n(column, prefix);
+    const { required, gridColumn = 'span 12', gridRow = 'span 1', filePicker, } = schema;
     const isRequired = required?.some((columnId) => columnId === column);
-    const currentFiles = (watch(column) ?? []);
-    const colLabel = `${prefix}${column}`;
-    return (jsxs(Field, { label: `${translate.t(`${colLabel}.field_label`)}`, required: isRequired, gridColumn: gridColumn ?? 'span 4', gridRow: gridRow ?? 'span 1', display: 'grid', gridTemplateRows: 'auto 1fr auto', alignItems: 'stretch', errorText: errors[`${colLabel}`]
-            ? translate.t(removeIndex(`${colLabel}.field_required`))
-            : undefined, invalid: !!errors[colLabel], children: [jsx(FileDropzone, { onDrop: ({ files }) => {
-                    const newFiles = files.filter(({ name }) => !currentFiles.some((cur) => cur.name === name));
-                    setValue(colLabel, [...currentFiles, ...newFiles]);
-                }, placeholder: translate.t(removeIndex(`${colLabel}.fileDropzone`)) }), jsx(Flex, { flexFlow: 'column', gap: 1, children: currentFiles.map((file) => {
-                    return (jsx(Card.Root, { variant: 'subtle', children: jsxs(Card.Body, { gap: "2", cursor: 'pointer', onClick: () => {
-                                setValue(column, currentFiles.filter(({ name }) => {
-                                    return name !== file.name;
-                                }));
-                            }, display: 'flex', flexFlow: 'row', alignItems: 'center', padding: '2', children: [file.type.startsWith('image/') && (jsx(Image, { src: URL.createObjectURL(file), alt: file.name, boxSize: "50px", objectFit: "cover", borderRadius: "md", marginRight: "2" })), jsx(Box, { children: file.name }), jsx(TiDeleteOutline, {})] }) }, file.name));
+    const currentValue = watch(column) ?? [];
+    const currentFiles = Array.isArray(currentValue)
+        ? currentValue
+        : [];
+    const colLabel = formI18n.colLabel;
+    const [dialogOpen, setDialogOpen] = useState(false);
+    const { onFetchFiles, enableMediaLibrary = false, filterImageOnly = false, } = filePicker || {};
+    const showMediaLibrary = enableMediaLibrary && !!onFetchFiles;
+    const handleMediaLibrarySelect = (fileId) => {
+        const newFiles = [...currentFiles, fileId];
+        setValue(colLabel, newFiles);
+    };
+    const handleRemove = (index) => {
+        const newFiles = currentFiles.filter((_, i) => i !== index);
+        setValue(colLabel, newFiles);
+    };
+    const isFileObject = (value) => {
+        return value instanceof File;
+    };
+    const getFileIdentifier = (file, index) => {
+        if (isFileObject(file)) {
+            return `${file.name}-${file.size}-${index}`;
+        }
+        return file;
+    };
+    const getFileName = (file) => {
+        if (isFileObject(file)) {
+            return file.name;
+        }
+        return typeof file === 'string' ? file : 'Unknown file';
+    };
+    const getFileSize = (file) => {
+        if (isFileObject(file)) {
+            return file.size;
+        }
+        return undefined;
+    };
+    const isImageFile = (file) => {
+        if (isFileObject(file)) {
+            return file.type.startsWith('image/');
+        }
+        if (typeof file === 'string') {
+            return /\.(jpg|jpeg|png|gif|bmp|webp|svg)$/i.test(file);
+        }
+        return false;
+    };
+    const getImageUrl = (file) => {
+        if (isFileObject(file)) {
+            return URL.createObjectURL(file);
+        }
+        return undefined;
+    };
+    return (jsxs(Field, { label: formI18n.label(), required: isRequired, alignItems: 'stretch', gridColumn,
+        gridRow, errorText: errors[`${colLabel}`] ? formI18n.required() : undefined, invalid: !!errors[colLabel], children: [jsxs(VStack, { align: "stretch", gap: 2, children: [jsx(FileDropzone, { onDrop: ({ files }) => {
+                            const newFiles = files.filter(({ name }) => !currentFiles.some((cur) => {
+                                if (isFileObject(cur)) {
+                                    return cur.name === name;
+                                }
+                                return false;
+                            }));
+                            setValue(colLabel, [...currentFiles, ...newFiles]);
+                        }, placeholder: filePickerLabels?.fileDropzone ?? formI18n.t('fileDropzone') }), showMediaLibrary && (jsx(Button$1, { variant: "outline", onClick: () => setDialogOpen(true), borderColor: "border.default", bg: "bg.panel", _hover: { bg: 'bg.muted' }, children: filePickerLabels?.browseLibrary ??
+                            formI18n.t('browse_library') ??
+                            'Browse from Library' }))] }), showMediaLibrary && (jsx(FilePickerDialog, { open: dialogOpen, onClose: () => setDialogOpen(false), onSelect: handleMediaLibrarySelect, title: filePickerLabels?.dialogTitle ??
+                    formI18n.t('dialog_title') ??
+                    'Select File', filterImageOnly: filterImageOnly, onFetchFiles: onFetchFiles, labels: filePickerLabels, translate: formI18n.t, colLabel: colLabel })), jsx(Flex, { flexFlow: 'column', gap: 1, children: currentFiles.map((file, index) => {
+                    const fileIdentifier = getFileIdentifier(file, index);
+                    const fileName = getFileName(file);
+                    const fileSize = getFileSize(file);
+                    const isImage = isImageFile(file);
+                    const imageUrl = getImageUrl(file);
+                    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: 'blue.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", children: isImage && imageUrl ? (jsx(Image, { src: imageUrl, alt: fileName, boxSize: "60px", objectFit: "cover", borderRadius: "md" })) : (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: fileName }), fileSize !== undefined && (jsx(Text, { fontSize: "xs", color: "fg.muted", children: formatBytes(fileSize) }))] }), jsx(Icon, { as: TiDeleteOutline, boxSize: 5, color: "fg.muted" })] }) }, fileIdentifier));
                 }) })] }));
 };
 
@@ -5952,59 +6176,62 @@ const DateTimePicker = ({ column, schema, prefix, }) => {
 const SchemaRenderer = ({ schema, prefix, column, }) => {
     const colSchema = schema;
     const { type, variant, properties: innerProperties, foreign_key, format, items, } = schema;
-    if (variant === "custom-input") {
+    if (variant === 'custom-input') {
         return jsx(CustomInput, { schema: colSchema, prefix, column });
     }
-    if (type === "string") {
+    if (type === 'string') {
         if ((schema.enum ?? []).length > 0) {
             return jsx(EnumPicker, { schema: colSchema, prefix, column });
         }
-        if (variant === "id-picker") {
+        if (variant === 'id-picker') {
             idPickerSanityCheck(column, foreign_key);
             return jsx(IdPicker, { schema: colSchema, prefix, column });
         }
-        if (format === "date") {
+        if (format === 'date') {
             return jsx(DatePicker, { schema: colSchema, prefix, column });
         }
-        if (format === "time") {
+        if (format === 'time') {
             return jsx(TimePicker, { schema: colSchema, prefix, column });
         }
-        if (format === "date-time") {
+        if (format === 'date-time') {
             return jsx(DateTimePicker, { schema: colSchema, prefix, column });
         }
-        if (variant === "text-area") {
+        if (variant === 'text-area') {
             return jsx(TextAreaInput, { schema: colSchema, prefix, column });
         }
         return jsx(StringInputField, { schema: colSchema, prefix, column });
     }
-    if (type === "number" || type === "integer") {
+    if (type === 'number' || type === 'integer') {
         return jsx(NumberInputField, { schema: colSchema, prefix, column });
     }
-    if (type === "boolean") {
+    if (type === 'boolean') {
         return jsx(BooleanPicker, { schema: colSchema, prefix, column });
     }
-    if (type === "object") {
+    if (type === 'object') {
         if (innerProperties) {
             return jsx(ObjectInput, { schema: colSchema, prefix, column });
         }
         return jsx(RecordInput$1, { schema: colSchema, prefix, column });
     }
-    if (type === "array") {
-        if (variant === "id-picker") {
+    if (type === 'array') {
+        if (variant === 'id-picker') {
             idPickerSanityCheck(column, foreign_key);
             return (jsx(IdPicker, { schema: colSchema, prefix, column, isMultiple: true }));
         }
-        if (variant === "tag-picker") {
+        if (variant === 'tag-picker') {
             return jsx(TagPicker, { schema: colSchema, prefix, column });
         }
-        if (variant === "file-picker") {
+        if (variant === 'file-picker') {
             return jsx(FilePicker, { schema: colSchema, prefix, column });
         }
-        if (variant === "enum-picker") {
+        if (variant === 'date-range') {
+            return jsx(DateRangePicker, { schema: colSchema, prefix, column });
+        }
+        if (variant === 'enum-picker') {
             const { items } = colSchema;
             const { enum: enumItems } = items;
             const enumSchema = {
-                type: "string",
+                type: 'string',
                 enum: enumItems,
             };
             return (jsx(EnumPicker, { isMultiple: true, schema: enumSchema, prefix, column }));
@@ -6014,7 +6241,7 @@ const SchemaRenderer = ({ schema, prefix, column, }) => {
         }
         return jsx(Text, { children: `array ${column}` });
     }
-    if (type === "null") {
+    if (type === 'null') {
         return jsx(Text, { children: `null ${column}` });
     }
     return jsx(Text, { children: "missing type" });

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

@@ -3,7 +3,7 @@ import { JSONSchema7 } from 'json-schema';
 import { Dispatch, ReactNode, SetStateAction } from 'react';
 import { FieldValues, Resolver } from 'react-hook-form';
 import { UseTranslationResponse } from 'react-i18next';
-import { DateTimePickerLabels, IdPickerLabels, EnumPickerLabels } from './components/types/CustomJSONSchema7';
+import { DateTimePickerLabels, IdPickerLabels, EnumPickerLabels, FilePickerLabels } from './components/types/CustomJSONSchema7';
 export interface SchemaFormContext<TData extends FieldValues> {
     schema: JSONSchema7;
     serverUrl: string;
@@ -43,6 +43,7 @@ export interface SchemaFormContext<TData extends FieldValues> {
     dateTimePickerLabels?: DateTimePickerLabels;
     idPickerLabels?: IdPickerLabels;
     enumPickerLabels?: EnumPickerLabels;
+    filePickerLabels?: FilePickerLabels;
     ajvResolver: Resolver<FieldValues>;
 }
 export declare const SchemaFormContext: import("react").Context<SchemaFormContext<unknown>>;

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

@@ -4,7 +4,7 @@ import { JSONSchema7 } from 'json-schema';
 import { Dispatch, ReactNode, SetStateAction } from 'react';
 import { FieldValues, SubmitHandler, UseFormReturn } from 'react-hook-form';
 import { UseTranslationResponse } from 'react-i18next';
-import { CustomJSONSchema7, DateTimePickerLabels, IdPickerLabels, EnumPickerLabels } from '../types/CustomJSONSchema7';
+import { CustomJSONSchema7, DateTimePickerLabels, IdPickerLabels, EnumPickerLabels, FilePickerLabels } from '../types/CustomJSONSchema7';
 export interface FormRootProps<TData extends FieldValues> {
     schema: CustomJSONSchema7;
     serverUrl: string;
@@ -32,6 +32,7 @@ export interface FormRootProps<TData extends FieldValues> {
     dateTimePickerLabels?: DateTimePickerLabels;
     idPickerLabels?: IdPickerLabels;
     enumPickerLabels?: EnumPickerLabels;
+    filePickerLabels?: FilePickerLabels;
 }
 export interface CustomJSONSchema7Definition extends JSONSchema7 {
     variant: string;
@@ -48,4 +49,4 @@ export declare const idPickerSanityCheck: (column: string, foreign_key?: {
     column?: string | undefined;
     display_column?: string | undefined;
 } | undefined) => void;
-export declare const FormRoot: <TData extends FieldValues>({ schema, idMap, setIdMap, form, serverUrl, translate, children, order, ignore, include, onSubmit, rowNumber, requestOptions, getUpdatedData, customErrorRenderer, customSuccessRenderer, displayConfig, requireConfirmation, dateTimePickerLabels, idPickerLabels, enumPickerLabels, }: FormRootProps<TData>) => import("react/jsx-runtime").JSX.Element;
+export declare const FormRoot: <TData extends FieldValues>({ schema, idMap, setIdMap, form, serverUrl, translate, children, order, ignore, include, onSubmit, rowNumber, requestOptions, getUpdatedData, customErrorRenderer, customSuccessRenderer, displayConfig, requireConfirmation, dateTimePickerLabels, idPickerLabels, enumPickerLabels, filePickerLabels, }: FormRootProps<TData>) => import("react/jsx-runtime").JSX.Element;

package/dist/types/components/Form/components/fields/DateRangePicker.d.ts

@@ -0,0 +1,2 @@
+import { InputDefaultProps } from './types';
+export declare const DateRangePicker: ({ column, schema, prefix, }: InputDefaultProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/components/Form/components/fields/SchemaRenderer.d.ts

@@ -1,4 +1,4 @@
-import { CustomJSONSchema7 } from "../types/CustomJSONSchema7";
+import { CustomJSONSchema7 } from '../types/CustomJSONSchema7';
 export interface SchemaRendererProps {
     column: string;
     schema: CustomJSONSchema7;

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

@@ -29,6 +29,17 @@ export interface EnumPickerLabels {
     emptySearchResult?: string;
     initialResults?: string;
 }
+export interface FilePickerLabels {
+    fileDropzone?: string;
+    browseLibrary?: string;
+    dialogTitle?: string;
+    searchPlaceholder?: string;
+    loading?: string;
+    loadingFailed?: string;
+    noFilesFound?: string;
+    cancel?: string;
+    select?: string;
+}
 export interface CustomJSONSchema7 extends JSONSchema7 {
     gridColumn?: string;
     gridRow?: string;
@@ -55,9 +66,23 @@ export interface CustomJSONSchema7 extends JSONSchema7 {
     formatOptions?: Intl.NumberFormatOptions;
     numberStorageType?: 'string' | 'number';
     errorMessages?: Partial<Record<ValidationErrorType | string, string>>;
+    filePicker?: FilePickerProps;
 }
 export interface TagPickerProps {
     column: string;
     schema: CustomJSONSchema7;
     prefix: string;
 }
+export interface FilePickerMediaFile {
+    id: string;
+    name: string;
+    url?: string;
+    size?: string | number;
+    comment?: string;
+    type?: string;
+}
+export interface FilePickerProps {
+    onFetchFiles?: (search: string) => Promise<FilePickerMediaFile[]>;
+    enableMediaLibrary?: boolean;
+    filterImageOnly?: boolean;
+}

package/dist/types/components/Form/utils/formatBytes.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Format bytes to human-readable string
+ * @param bytes - The number of bytes to format
+ * @returns Formatted string (e.g., "1.5 KB", "2.3 MB")
+ */
+export declare function formatBytes(bytes: number): string;

package/package.json

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