sera-components 1.6.2 → 1.6.8

package/dist/data/inputs/foreign-key-input.d.ts

@@ -1,13 +1,13 @@
 import { InputInterface } from '.';
-import { Record } from 'sera-db';
+import { NestedProperty, ObjectProperty, 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, 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, freeze, }: {
-    name?: string;
+export declare const SearchInput: <ID extends string | number, R extends Record<ID>>({ property, data, onSelect, renderOption, isIdInteger, query, setQuery, freeze, }: {
+    property: ObjectProperty | NestedProperty;
     query: string;
     setQuery: (query: string) => void;
     onSelect: (id: ID) => void;

package/dist/data/inputs/phone-number-input.d.ts

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

package/dist/form/embedded-form-item.d.ts

@@ -0,0 +1,23 @@
+import { DataProperty, DB, DraftEmbeddedRecord, ObjectProperty, NestedProperty } from 'sera-db';
+import { InputInterface } from '../data/inputs';
+import { FormItemLayout } from './form-item';
+export interface EmbeddedFormItemProps<DR extends DraftEmbeddedRecord> {
+    db: DB;
+    record: DR;
+    property: DataProperty | ObjectProperty | NestedProperty;
+    InputComponent: React.FC<InputInterface<any>> | React.ComponentType<InputInterface<any>>;
+    layout?: FormItemLayout;
+    freeze?: boolean;
+    label?: React.ReactNode;
+    onChange?: (value: any) => void;
+    visible?: (record: DR) => boolean;
+}
+/**
+ * A form item component for embedded records.
+ *
+ * This is a simplified version of FormItem that doesn't require a store.
+ * It directly updates the draft record's properties using the update functions.
+ */
+export declare const EmbeddedFormItem: (<DR extends DraftEmbeddedRecord>({ db, record, property, layout, InputComponent, freeze, label, onChange, visible, }: EmbeddedFormItemProps<DR>) => import("react/jsx-runtime").JSX.Element) & {
+    displayName: string;
+};

package/dist/form/embedded-form.d.ts

@@ -0,0 +1,60 @@
+import { DB, DraftEmbeddedRecord, GenericEmbeddedRecord, EmbeddedSchema, PropertyNames, NestedProperty } from 'sera-db';
+import { FormItemLayout } from './form-item';
+import { FieldArgs } from './form';
+export interface EmbeddedFieldGroup<R extends GenericEmbeddedRecord<DR>, DR extends DraftEmbeddedRecord, F extends PropertyNames<DR>> {
+    name?: string;
+    fields: (F | {
+        prop: F;
+        args?: FieldArgs<R, DR>;
+    } | NestedProperty | {
+        prop: NestedProperty;
+        args?: FieldArgs<R, DR>;
+    } | ((record: DR) => React.ReactNode))[][];
+}
+export interface SeraEmbeddedFormProps<R extends GenericEmbeddedRecord<DR>, DR extends DraftEmbeddedRecord, PF extends PropertyNames<R>, F extends PropertyNames<DR>> {
+    schema: EmbeddedSchema<R, DR, PF, F>;
+    db: DB;
+    fieldGroups: EmbeddedFieldGroup<R, DR, F>[];
+    layout?: FormItemLayout;
+    actions?: {
+        variant: "filled" | "light" | "outline";
+        label?: React.ReactNode;
+        disabled?: boolean;
+        onClick?: () => void;
+    }[];
+    record: DR;
+    styles?: React.CSSProperties;
+    className?: string;
+    onSubmit?: (record: DR) => void;
+}
+/**
+ * A form component for editing embedded records that don't have their own store.
+ *
+ * This is a lightweight version of SeraForm designed for embedded schemas.
+ * It works directly with draft records and doesn't require a Table store.
+ *
+ * @template R - The record type that extends GenericEmbeddedRecord
+ * @template DR - The draft record type that extends DraftEmbeddedRecord
+ * @template PF - The type of public fields in R
+ * @template F - The type of fields in DR
+ *
+ * @example
+ * ```tsx
+ * <SeraEmbeddedForm
+ *   schema={roomTypeSchema}
+ *   record={draftRoomType}
+ *   fieldGroups={[
+ *     {
+ *       name: "Room Details",
+ *       fields: [["code", "className"], ["bedConfiguration", "occupancyMax"]]
+ *     }
+ *   ]}
+ *   layout={{ type: "vertical" }}
+ *   actions={[
+ *     { variant: "filled", label: "Save", onClick: handleSave },
+ *     { variant: "outline", label: "Cancel", onClick: handleCancel }
+ *   ]}
+ * />
+ * ```
+ */
+export declare const SeraEmbeddedForm: <R extends GenericEmbeddedRecord<DR>, DR extends DraftEmbeddedRecord, PF extends PropertyNames<R>, F extends PropertyNames<DR>>(props: SeraEmbeddedFormProps<R, DR, PF, F>) => import("react/jsx-runtime").JSX.Element;

package/dist/form/form.d.ts

@@ -1,12 +1,15 @@
-import { PropertyNames, DraftRecord, GenericRecord, Schema, SchemaType, Table, NestedProperty } from 'sera-db';
+import { DataProperty, PropertyNames, DraftRecord, GenericRecord, ObjectProperty, Schema, SchemaType, Table, NestedProperty } from 'sera-db';
+import { SeraColProps } from '../misc';
 import { InputInterface } from '../data/inputs';
 import { FormItemLayout } from './form-item';
-interface FieldArgs<R, DR> {
+export declare const SPAN_COL = 12;
+export interface FieldArgs<R, DR> {
     label?: React.ReactNode;
     input?: React.ComponentType<InputInterface<any>>;
     freeze?: boolean;
     visible?: (record: R | DR) => boolean;
     onChange?: (value: any) => void;
+    colsize?: Pick<SeraColProps, "span" | "grow">;
 }
 export interface FieldGroup<ID extends string | number, R extends GenericRecord<ID, DR>, DR extends DraftRecord<ID>, PF extends PropertyNames<R>, F extends PropertyNames<DR>, ST extends SchemaType<ID, R, DR, PF, F>> {
     name?: string;
@@ -68,45 +71,6 @@ 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 PropertyNames<R>, F extends PropertyNames<DR>, ST extends SchemaType<ID, R, DR, PF, F>>(props: SeraFormProps<ID, R, DR, PF, F, ST>) => import("react/jsx-runtime").JSX.Element;
-/**
- * Groups multiple form fields together in a row layout using Mantine's Group component.
- *
- * This function creates a renderer that displays multiple form fields side-by-side
- * in a flexible row layout with equal column widths.
- *
- * @template ID - The type of the record identifier (string or number)
- * @template R - The generic record type extending GenericRecord
- * @template DR - The draft record type extending DraftRecord
- * @template PF - The type of public fields in R
- * @template F - The type of fields in DR
- * @template ST - The schema type that extends SchemaType
- *
- * @param schema - The schema definition containing property information
- * @param fields - Array of field definitions to display in the group
- * @param args - Optional arguments for visibility, layout, and flex properties
- *
- * @returns A function that takes a store and record, returning a React node with grouped form fields
- *
- * @example
- * ```tsx
- * const groupedFields = groupFormFields(
- *   userSchema,
- *   [{ prop: "firstName" }, { prop: "lastName" }]
- * );
- * // Use in fieldGroups:
- * fieldGroups: [{ fields: [[groupedFields]] }]
- * ```
- */
-export declare function groupFormFields<ID extends string | number, R extends GenericRecord<ID, DR>, DR extends DraftRecord<ID>, PF extends PropertyNames<R>, F extends PropertyNames<DR>, ST extends SchemaType<ID, R, DR, PF, F>>(schema: Schema<ID, R, DR, PF, F, ST>, fields: (ST["allProperties"] | {
-    prop: ST["allProperties"];
-    args?: FieldArgs<R, DR>;
-} | NestedProperty | {
-    prop: NestedProperty;
-    args?: FieldArgs<R, DR>;
-} | ((store: Table<ID, R, DR>, record: R | DR) => React.ReactNode))[], args?: {
-    visible?: (record: R | DR) => boolean;
-    layout?: FormItemLayout;
-    flexGrow?: boolean;
-    flexGap?: import('@mantine/core').MantineSpacing;
-}): (store: Table<ID, R, DR>, record: R | DR) => React.ReactNode;
-export {};
+export declare function getInputComponent(property: DataProperty | ObjectProperty | NestedProperty, input?: React.ComponentType<InputInterface<any>>): ((<ID extends string | number>({ db, property, value: recordIds, onChange, freeze, }: InputInterface<ID[]>) => import("react/jsx-runtime").JSX.Element) & {
+    displayName: string;
+}) | import('react').FC<InputInterface<any>> | import('react').ComponentClass<InputInterface<any>, any>;

package/dist/form/index.d.ts

@@ -1,3 +1,5 @@
 export * from './form';
 export * from './form-item';
 export * from './form-item-label';
+export * from './embedded-form';
+export * from './embedded-form-item';