sera-components 1.4.6 → 1.5.0

package/dist/data/display/DateTimeDisplay.d.ts

@@ -1,4 +1,6 @@
 import { DisplayInterface } from '.';
+export declare function formatDate(locale: Intl.Locale, value: Date): string;
+export declare function formatDateTime(locale: Intl.Locale, value: Date, withSeconds?: boolean): string;
 export declare const DateTimeDisplay: ({ value }: DisplayInterface<Date>) => import("react/jsx-runtime").JSX.Element;
 export declare const DateDisplay: ({ value }: DisplayInterface<Date>) => import("react/jsx-runtime").JSX.Element;
 export declare const DateTimeHideTimeDisplay: ({ value }: DisplayInterface<Date>) => import("react/jsx-runtime").JSX.Element;

package/dist/data/display/EnumDisplay.d.ts

@@ -1,2 +1,2 @@
 import { DisplayInterface } from '.';
-export declare const EnumDisplay: ({ nestedProperty, property, value, }: DisplayInterface<any>) => import("react/jsx-runtime").JSX.Element;
+export declare const EnumDisplay: ({ property, value }: DisplayInterface<any>) => import("react/jsx-runtime").JSX.Element;

package/dist/data/display/index.d.ts

@@ -4,7 +4,6 @@ export { SingleForeignKeyDisplay, MultiForeignKeyDisplay } from './ForeignKeyDis
 export type DisplayInterface<T> = {
     db: DB;
     property: DataProperty | ObjectProperty;
-    nestedProperty?: DataProperty | ObjectProperty;
     value: T;
 };
 export declare const DataType2DisplayComponent: Partial<Record<DataType, React.ComponentType<DisplayInterface<any>>>>;

package/dist/data/inputs/DateRangeInput.d.ts

@@ -3,3 +3,7 @@ export declare const DateRangeInput: React.FC<InputInterface<{
     start?: Date;
     end?: Date;
 } | undefined>>;
+export declare const DateTimeRangeInput: React.FC<InputInterface<{
+    start?: Date;
+    end?: Date;
+} | undefined>>;

package/dist/data/inputs/EnumInput.d.ts

@@ -0,0 +1,2 @@
+import { InputInterface } from '.';
+export declare const EnumInput: React.FC<InputInterface<any>>;

package/dist/data/inputs/ForeignKeyInput.d.ts

@@ -3,10 +3,10 @@ import { Record } from 'sera-db';
 export declare const SingleForeignKeyInput: (<T>(_props: InputInterface<T>) => import("react/jsx-runtime").JSX.Element) & {
     displayName: string;
 };
-export declare const MultiForeignKeyInput: (<ID extends string | number>({ db, property, value: recordIds, onChange, }: InputInterface<ID[]>) => import("react/jsx-runtime").JSX.Element) & {
+export declare const MultiForeignKeyInput: (<ID extends string | number>({ db, property, value: recordIds, onChange, freeze, }: InputInterface<ID[]>) => import("react/jsx-runtime").JSX.Element) & {
     displayName: string;
 };
-export declare const SearchInput: <ID extends string | number, R extends Record<ID>>({ name, data, onSelect, renderOption, isIdInteger, query, setQuery, }: {
+export declare const SearchInput: <ID extends string | number, R extends Record<ID>>({ name, data, onSelect, renderOption, isIdInteger, query, setQuery, freeze, }: {
     name?: string;
     query: string;
     setQuery: (query: string) => void;
@@ -14,9 +14,11 @@ export declare const SearchInput: <ID extends string | number, R extends Record<
     data: R[];
     renderOption: (record: R) => React.ReactNode;
     isIdInteger?: boolean;
+    freeze?: boolean;
 }) => import("react/jsx-runtime").JSX.Element;
-export declare const CardList: <R>({ items, onDelete, render, }: {
+export declare const CardList: <R>({ items, onDelete, render, freeze, }: {
     items: R[];
     onDelete: (value: R) => void;
     render: (value: R) => React.ReactNode;
+    freeze?: boolean;
 }) => import("react/jsx-runtime").JSX.Element | undefined;

package/dist/data/inputs/PhoneNumberInput.d.ts

@@ -9,5 +9,6 @@ export interface PhoneNumberInputProps {
         };
     }) => void;
     error?: boolean | React.ReactNode;
+    disabled?: boolean;
 }
 export declare const PhoneNumberInput: React.FC<PhoneNumberInputProps>;

package/dist/data/inputs/index.d.ts

@@ -3,8 +3,9 @@ import { BooleanInput } from './BooleanInput';
 import { NumberInput } from './NumberInput';
 import { TextInput } from './TextInput';
 import { DateInput } from './DateInput';
+import { EnumInput } from './EnumInput';
 export { SingleForeignKeyInput, MultiForeignKeyInput } from './ForeignKeyInput';
-export { DateRangeInput } from './DateRangeInput';
+export { DateRangeInput, DateTimeRangeInput } from './DateRangeInput';
 /**
  * Interface for input components in forms
  * @interface InputInterface
@@ -13,6 +14,7 @@ export { DateRangeInput } from './DateRangeInput';
  * @property {any} value - The current value of the input
  * @property {function} onChange - Callback function triggered when input value changes
  * @property {boolean | string} [error] - If the type is boolean it will be error, if there is a string message it should display that message
+ * @property {boolean} [freeze = false] - Whether the input is available for editing
  */
 export type InputInterface<T> = {
     db: DB;
@@ -20,9 +22,10 @@ export type InputInterface<T> = {
     value: T;
     onChange: (value: T) => void;
     error?: boolean | string;
+    freeze?: boolean;
 };
 /**
  * Mapping of data types to their corresponding input components
  */
 export declare const DataType2InputComponent: Partial<Record<DataType, React.FC<InputInterface<any>>>>;
-export { NumberInput, BooleanInput, TextInput, DateInput };
+export { NumberInput, BooleanInput, TextInput, DateInput, EnumInput };

package/dist/form/Form.d.ts

@@ -1,17 +1,26 @@
 import { DraftRecord, GenericRecord, MultiLingualString, Schema, SchemaType, Table } from 'sera-db';
+import { InputInterface } from '../data/inputs';
 import { FormItemLayout } from './FormItem';
 export interface CustomField {
     name: string;
     label: MultiLingualString;
     description?: MultiLingualString;
 }
+interface FieldArgs<DR> {
+    input?: React.ComponentType<InputInterface<any>>;
+    freeze?: boolean;
+    visible?: (record: DR) => boolean;
+}
 export interface FieldGroup<ID extends string | number, R extends GenericRecord<ID, DR>, DR extends DraftRecord<ID>, PF extends keyof R, F extends keyof DR, ST extends SchemaType<ID, R, DR, PF, F>> {
     name?: string;
-    fields: ST["allProperties"][][];
+    fields: (ST["allProperties"] | {
+        prop: ST["allProperties"];
+        args?: FieldArgs<DR>;
+    } | ((store: Table<ID, R, DR>, record: R | DR) => React.ReactNode))[][];
 }
 export interface SeraFormProps<ID extends string | number, R extends GenericRecord<ID, DR>, DR extends DraftRecord<ID>, PF extends keyof R, F extends keyof DR, ST extends SchemaType<ID, R, DR, PF, F>> {
     schema: Schema<ID, R, DR, PF, F, ST>;
-    store: Table<ST["id"], ST["cls"], ST["draftCls"]>;
+    store: Table<ID, R, DR>;
     fieldGroups: FieldGroup<ID, R, DR, PF, F, ST>[];
     layout?: FormItemLayout;
     actions: {
@@ -59,3 +68,4 @@ export interface SeraFormProps<ID extends string | number, R extends GenericReco
  * ```
  */
 export declare const SeraForm: <ID extends string | number, R extends GenericRecord<ID, DR>, DR extends DraftRecord<ID>, PF extends keyof R, F extends keyof DR, ST extends SchemaType<ID, R, DR, PF, F>>(props: SeraFormProps<ID, R, DR, PF, F, ST>) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/form/FormItem.d.ts

@@ -1,4 +1,4 @@
-import { DataProperty, DraftRecord, GenericRecord, ObjectProperty, Table, validators } from 'sera-db';
+import { DataProperty, DB, DraftRecord, GenericRecord, ObjectProperty, Table, validators } from 'sera-db';
 import { InputInterface } from '../data/inputs';
 export interface FormItemHorizontalLayout {
     type: "horizontal";
@@ -18,13 +18,27 @@ export interface FormItemProps<ID extends string | number, R extends GenericReco
     InputComponent: React.FC<InputInterface<any>> | React.ComponentType<InputInterface<any>>;
     validator: validators.ValueValidator;
     layout?: FormItemLayout;
+    freeze?: boolean;
 }
+export declare const DEFAULT_LAYOUT: FormItemVerticalLayout;
 /**
  * FormItem component for creating form elements with labels, tooltips and layout options.
  *
  * Supports both horizontal and vertical layouts. In horizontal layout, the label and input are placed side by side in a grid.
  * In vertical layout, the label is positioned above the input using Mantine's Input.Wrapper.
  */
-export declare const FormItem: (<ID extends string | number, R extends GenericRecord<ID, DR>, DR extends DraftRecord<ID>>({ store, record, property, layout, InputComponent, validator, }: FormItemProps<ID, R, DR>) => import("react/jsx-runtime").JSX.Element) & {
+export declare const FormItem: (<ID extends string | number, R extends GenericRecord<ID, DR>, DR extends DraftRecord<ID>>({ store, record, property, layout, InputComponent, validator, freeze, }: FormItemProps<ID, R, DR>) => import("react/jsx-runtime").JSX.Element) & {
     displayName: string;
 };
+export declare function FormItemInner({ db, layout, property, InputComponent, freeze, value, error, onChange, }: {
+    db: DB;
+    layout: FormItemLayout;
+    property: DataProperty | ObjectProperty;
+    InputComponent: React.FC<InputInterface<any>> | React.ComponentType<InputInterface<any>>;
+    validator: validators.ValueValidator;
+    freeze: boolean;
+    value: any;
+    error: string | undefined;
+    onChange: (value: any) => void;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function isHorizontalLayout(layout: FormItemLayout): layout is FormItemHorizontalLayout;

package/dist/form/FormNestedPropertyItem.d.ts

@@ -0,0 +1,38 @@
+import { DataProperty, DraftRecord, GenericRecord, ObjectProperty, validators, Table } from 'sera-db';
+import { InputInterface } from '../data';
+import { FormItemLayout } from './FormItem';
+export interface FormNestedPropertyItemProps<ID extends string | number, R extends GenericRecord<ID, DR>, DR extends DraftRecord<ID>> {
+    store: Table<ID, R, DR>;
+    record: DR | R;
+    properties: (DataProperty | ObjectProperty)[];
+    InputComponent: React.ComponentType<InputInterface<any>>;
+    validator: validators.ValueValidator;
+    layout?: FormItemLayout;
+    freeze?: boolean;
+}
+/**
+ * A component that renders a nested property input for forms.
+ *
+ * This component traverses through a chain of properties to create input fields
+ * for deeply nested property values in a record. It handles embedded objects
+ * by creating nested form structures.
+ *
+ * @template ID - The type of the record identifier (string or number)
+ * @template R - The type of the generic record extending GenericRecord
+ * @template DR - The type of the draft record extending DraftRecord
+ *
+ * @param props - The component properties
+ * @param props.store - The table store containing the record data
+ * @param props.record - The draft record being edited
+ * @param props.properties - Array of properties defining the path to the nested value
+ * @param props.InputComponent - React component used to render the field input
+ *
+ * @returns A JSX element with input fields for the nested property
+ */
+export declare const FormNestedPropertyItem: (<ID extends string | number, R extends GenericRecord<ID, DR>, DR extends DraftRecord<ID>>({ store, record, properties, layout, InputComponent, validator, freeze, }: FormNestedPropertyItemProps<ID, R, DR>) => import("react/jsx-runtime").JSX.Element) & {
+    displayName: string;
+};
+export declare function makeFieldForm<ID extends string | number, R extends GenericRecord<ID, DR>, DR extends DraftRecord<ID>>(props: (DataProperty | ObjectProperty)[], validators: validators.ValueValidator, args?: {
+    input?: React.ComponentType<InputInterface<any>>;
+    freeze?: boolean;
+}): (store: Table<ID, R, DR>, record: DR) => React.ReactNode;

package/dist/form/index.d.ts

@@ -1,3 +1,4 @@
 export * from './Form';
 export * from './FormItem';
 export * from './FormItemLabel';
+export * from './FormNestedPropertyItem';