sera-components 1.4.7 → 1.6.0

package/dist/misc/Language.d.ts

@@ -46,3 +46,13 @@ export declare const MultiLingualString: ({ value }: {
     value: MLS;
 }) => string;
 export declare const useMultiLingualString: (value: MLS) => string;
+/**
+ * Translates a multilingual string based on the provided locale.
+ *
+ * @param locale - The locale object containing language information.
+ * @param value - The multilingual string (MLS) object, which includes mappings
+ *                of languages to their respective string values.
+ * @returns The translated string corresponding to the locale's language, or
+ *          the default language value if the locale's language is not found.
+ */
+export declare function translateMultiLingualString(locale: Intl.Locale, value: MLS): string;

package/dist/misc/Menu.d.ts

@@ -1,22 +1,23 @@
 import { Trie } from '../utils';
-import { NavigateFunction, Permission, NoArgsRoute } from '../types';
+import { NavigateFunction, Permission, NoArgsRoute, NoURLArgsRoute } from '../types';
 type MenuKey = string;
-export interface MenuRoute<R> {
-    path: NoArgsRoute;
+export interface MenuRoute<Q, R> {
+    path: NoURLArgsRoute<Q> | NoArgsRoute;
     role: R;
+    defaultPathArgs?: Q;
 }
 export interface SeraMenuItem<R> {
     key: MenuKey;
     label: React.ReactElement | string;
     icon?: React.ReactElement;
-    route?: MenuRoute<R>;
+    route?: MenuRoute<any, R>;
     children?: SeraMenuItem<R>[];
 }
-export declare function buildMenuItemIndex<R>(items: SeraMenuItem<R>[]): {
+export declare function buildMenuItemIndex<Q, R>(items: SeraMenuItem<R>[]): {
     key2item: Record<MenuKey, SeraMenuItem<R>>;
     key2fullpath: Record<MenuKey, MenuKey[]>;
     key2route: {
-        [key: MenuKey]: MenuRoute<R>;
+        [key: MenuKey]: MenuRoute<Q, R>;
     };
 };
 export declare function filterAllowedItems<R>(items: SeraMenuItem<R>[], checkPermission: (role: R) => Permission): SeraMenuItem<R>[];

package/dist/search/SearchForm.d.ts

@@ -24,4 +24,12 @@ export interface SearchFormProps {
     onChange: (value: QueryConditions<any>) => void;
     queryConditions: QueryConditions<any>;
 }
+export declare function getNumberOfFilters({ properties, queryConditions, }: {
+    properties: SearchFormProps["properties"];
+    queryConditions: QueryConditions<any>;
+}): number;
+export declare function getReadableFilters({ properties, queryConditions, }: {
+    properties: SearchFormProps["properties"];
+    queryConditions: QueryConditions<any>;
+}): string;
 export declare const SearchForm: ({ db, properties, styles, className, layout, onChange, queryConditions, }: SearchFormProps) => import("react/jsx-runtime").JSX.Element;

package/dist/table/makeColumns.d.ts

@@ -1,4 +1,4 @@
-import { DataProperty, DB, DraftEmbeddedRecord, DraftRecord, EmbeddedSchema, GenericEmbeddedRecord, GenericRecord, ObjectProperty, Schema, SchemaType } from 'sera-db';
+import { DataProperty, DB, DraftEmbeddedRecord, DraftRecord, EmbeddedSchema, GenericEmbeddedRecord, GenericRecord, ObjectProperty, PropertyNames, Schema, SchemaType } from 'sera-db';
 import { DisplayInterface } from '../data/display';
 type DOP = DataProperty | ObjectProperty;
 /**
@@ -43,10 +43,10 @@ export declare function makeTableColumnFromNestedProperty<R>(db: DB, property: D
     nestedKey?: string;
     component?: React.ComponentType<DisplayInterface<any>>;
 }): SeraColumn<R>;
-export declare function makeTableColumns<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>, OR>(db: DB, schema: Schema<ID, R, DR, PF, F, ST> | EmbeddedSchema<R, DR, PF, F>, selectedColumns: (PF | SeraColumn<OR>)[], options?: {
+export declare function makeTableColumns<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>, OR>(db: DB, schema: Schema<ID, R, DR, PF, F, ST> | EmbeddedSchema<R, DR, PF, F>, selectedColumns: (PF | SeraColumn<OR>)[], options?: {
     nestedKey?: string;
 }): SeraColumn<OR>[];
-export declare function makeEmbeddedTableColumns<R extends GenericEmbeddedRecord<DR>, DR extends DraftEmbeddedRecord, PF extends keyof R, F extends keyof DR, OR>(db: DB, schema: EmbeddedSchema<R, DR, PF, F>, selectedColumns?: (PF | SeraColumn<OR>)[], options?: {
+export declare function makeEmbeddedTableColumns<R extends GenericEmbeddedRecord<DR>, DR extends DraftEmbeddedRecord, PF extends PropertyNames<R>, F extends PropertyNames<DR>, OR>(db: DB, schema: EmbeddedSchema<R, DR, PF, F>, selectedColumns?: (PF | SeraColumn<OR>)[], options?: {
     nestedKey?: string;
 }): SeraColumn<OR>[];
 export declare function isSeraColumn<R>(column: SeraColumn<R> | any): column is SeraColumn<R>;

package/dist/types.d.ts

@@ -26,6 +26,18 @@ export interface NoArgsRoute {
         open: (navigate: NavigateFunction) => void;
     };
     getURL(): string;
+    pathDef: string;
+}
+export interface NoURLArgsRoute<Q> {
+    path({ queryArgs }: {
+        queryArgs: Q;
+    }): {
+        open: (navigate: NavigateFunction) => void;
+    };
+    getURL({ queryArgs }: {
+        queryArgs: Q;
+    }): string;
+    pathDef: string;
 }
 export interface EntityRoute {
     path({ urlArgs }: {

package/dist/utils/index.d.ts

@@ -1,2 +1,3 @@
 export * from './utils';
 export * from './trie';
+export * from './propertyUtils';

package/dist/utils/propertyUtils.d.ts

@@ -0,0 +1,33 @@
+import { DataProperty, ObjectProperty, NestedProperty } from 'sera-db';
+/**
+ * Gets the value of a property (regular or nested) from a record.
+ *
+ * @param record - The record to extract the value from
+ * @param property - The property (DataProperty, ObjectProperty, or NestedProperty)
+ * @returns The value of the property
+ *
+ * @example
+ * ```typescript
+ * const value = getPropertyValue(supplier, paymentPolicyProp);
+ * const nestedValue = getPropertyValue(supplier, new NestedProperty(supplier.paymentPolicy, paymentPolicy.type));
+ * ```
+ */
+export declare function getPropertyValue(record: any, property: DataProperty | ObjectProperty | NestedProperty): any;
+/**
+ * Sets the value of a property (regular or nested) in a record.
+ *
+ * For regular properties, calls the updateFuncName method.
+ * For nested properties, uses the setValue method which handles
+ * creating intermediate objects as needed.
+ *
+ * @param record - The record to set the value in (must be a draft record)
+ * @param property - The property (DataProperty, ObjectProperty, or NestedProperty)
+ * @param value - The new value to set
+ *
+ * @example
+ * ```typescript
+ * setPropertyValue(draftSupplier, paymentPolicyProp, newPolicy);
+ * setPropertyValue(draftSupplier, new NestedProperty(supplier.paymentPolicy, paymentPolicy.type), PaymentPolicyType.PaymentBeforeService);
+ * ```
+ */
+export declare function setPropertyValue(record: any, property: DataProperty | ObjectProperty | NestedProperty, value: any): void;

package/dist/view/View.d.ts

@@ -1,13 +1,21 @@
-import { DataProperty, DraftRecord, GenericRecord, ObjectProperty, Schema, SchemaType, Table } from 'sera-db';
+import { DraftRecord, GenericRecord, Schema, SchemaType, Table, NestedProperty, PropertyNames } from 'sera-db';
+import { MantineSpacing } from '@mantine/core';
 import { DisplayInterface } from '../data/display';
-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>> {
+interface FieldArgs<R> {
+    display?: React.ComponentType<DisplayInterface<any>>;
+    visible?: (record: R) => boolean;
+}
+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;
     fields: (ST["allProperties"] | {
         prop: ST["allProperties"];
-        display: React.ComponentType<DisplayInterface<any>>;
+        args?: FieldArgs<R>;
+    } | NestedProperty | {
+        prop: NestedProperty;
+        args?: FieldArgs<R>;
     } | ((store: Table<ID, R, DR>, record: R) => React.ReactNode))[][];
 }
-export interface SeraViewProps<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>> {
+export interface SeraViewProps<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>;
     store: Table<ID, R, DR>;
     fieldGroups: FieldGroup<ID, R, DR, PF, F, ST>[];
@@ -15,5 +23,36 @@ export interface SeraViewProps<ID extends string | number, R extends GenericReco
     styles?: React.CSSProperties;
     className?: string;
 }
-export declare const SeraView: <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: SeraViewProps<ID, R, DR, PF, F, ST>) => import("react/jsx-runtime").JSX.Element;
-export declare function makeFieldDisplay<ID extends string | number, R extends GenericRecord<ID, DR>, DR extends DraftRecord<ID>>(props: (DataProperty | ObjectProperty)[], display?: React.ComponentType<DisplayInterface<any>>): (store: Table<ID, R, DR>, record: R) => React.ReactNode;
+export declare const SeraView: <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: SeraViewProps<ID, R, DR, PF, F, ST>) => import("react/jsx-runtime").JSX.Element;
+/**
+ * Groups multiple fields together in a row layout using SimpleGrid.
+ *
+ * This function creates a renderer that displays multiple fields side-by-side
+ * in a grid 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
+ *
+ * @param fields - Array of field definitions to display in the group
+ *
+ * @returns A function that takes a store and record, returning a React node with grouped fields
+ *
+ * @example
+ * ```tsx
+ * const groupedFields = groupFields([firstNameProperty, lastNameProperty]);
+ * const node = groupedFields(store, record);
+ * ```
+ */
+export declare function groupFields<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>;
+} | NestedProperty | {
+    prop: NestedProperty;
+    args?: FieldArgs<R>;
+} | ((store: Table<ID, R, DR>, record: R) => React.ReactNode))[], args?: {
+    visible?: (record: R) => boolean;
+    flexGrow?: boolean;
+    flexGap?: MantineSpacing;
+}): (store: Table<ID, R, DR>, record: R) => React.ReactNode;
+export {};

package/dist/view/ViewItem.d.ts

@@ -1,11 +1,12 @@
-import { DataProperty, DraftRecord, GenericRecord, ObjectProperty, Table } from 'sera-db';
+import { DataProperty, DraftRecord, GenericRecord, ObjectProperty, Table, NestedProperty } from 'sera-db';
 import { DisplayInterface } from '../data';
 export interface ViewItemProps<ID extends string | number, R extends GenericRecord<ID, DR>, DR extends DraftRecord<ID>> {
     store: Table<ID, R, DR>;
     record: R;
-    property: DataProperty | ObjectProperty;
+    property: DataProperty | ObjectProperty | NestedProperty;
+    visible?: (record: R) => boolean;
     DisplayComponent: React.ComponentType<DisplayInterface<any>>;
 }
-export declare const ViewItem: (<ID extends string | number, R extends GenericRecord<ID, DR>, DR extends DraftRecord<ID>>({ store, record, property, DisplayComponent, }: ViewItemProps<ID, R, DR>) => import("react/jsx-runtime").JSX.Element) & {
+export declare const ViewItem: (<ID extends string | number, R extends GenericRecord<ID, DR>, DR extends DraftRecord<ID>>({ store, record, property, DisplayComponent, visible, }: ViewItemProps<ID, R, DR>) => import("react/jsx-runtime").JSX.Element) & {
     displayName: string;
 };

package/dist/view/ViewTab.d.ts

@@ -1,6 +1,6 @@
-import { DraftRecord, GenericRecord, Schema, SchemaType, Table } from 'sera-db';
+import { DraftRecord, GenericRecord, PropertyNames, Schema, SchemaType, Table } from 'sera-db';
 import { FieldGroup } from './View';
-export interface SeraViewTabProps<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>> {
+export interface SeraViewTabProps<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>;
     store: Table<ID, R, DR>;
     fieldTabs: {
@@ -11,4 +11,4 @@ export interface SeraViewTabProps<ID extends string | number, R extends GenericR
     tabStyles?: React.CSSProperties;
     tabClassName?: string;
 }
-export declare const SeraViewTab: <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: SeraViewTabProps<ID, R, DR, PF, F, ST>) => import("react/jsx-runtime").JSX.Element;
+export declare const SeraViewTab: <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: SeraViewTabProps<ID, R, DR, PF, F, ST>) => import("react/jsx-runtime").JSX.Element;

package/dist/view/index.d.ts

@@ -1,2 +1,2 @@
-export { SeraView, makeFieldDisplay } from './View';
+export { SeraView, groupFields } from './View';
 export { SeraViewTab } from './ViewTab';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "sera-components",
   "private": false,
-  "version": "1.4.7",
+  "version": "1.6.0",
   "type": "module",
   "files": [
     "dist"
@@ -19,13 +19,14 @@
     "dev": "vite",
     "clean": "rimraf dist",
     "build": "tsc -b tsconfig.build.json && vite build",
+    "typecheck": "tsc --noEmit",
     "preview": "vite preview",
     "test": "vitest",
     "prepublishOnly": "npm run clean && npm run build"
   },
   "devDependencies": {
-    "@types/react": "^19.0.12",
-    "@types/react-dom": "^19.0.4",
+    "@types/react": "^19.2.7",
+    "@types/react-dom": "^19.2.3",
     "@types/throttle-debounce": "^5.0.2",
     "rimraf": "^6.0.1",
     "typescript": "~5.7.2",
@@ -35,17 +36,17 @@
   },
   "peerDependencies": {
     "@mantine/core": "^8.1.0",
-    "@mantine/form": "^8.1.0",
     "@mantine/dates": "^8.3.1",
+    "@mantine/form": "^8.1.0",
     "@tabler/icons-react": "^3.31.0",
     "@tanstack/react-table": "^8.21.3",
+    "dayjs": "^1.11.18",
     "mobx-react-lite": "^4.1.0",
-    "react": "^19.0.0",
-    "react-dom": "^19.0.0",
+    "react": "^19.2.3",
+    "react-dom": "^19.2.3",
     "react-imask": "^7.6.1",
     "react-router": "^7.7.1",
-    "sera-db": "^1.12.6",
-    "throttle-debounce": "^5.0.2",
-    "dayjs": "^1.11.18"
+    "sera-db": "^1.13.0",
+    "throttle-debounce": "^5.0.2"
   }
 }

package/dist/view/ViewNestedPropertyItem.d.ts

@@ -1,42 +0,0 @@
-import { DataProperty, DraftRecord, GenericRecord, ObjectProperty, Table } from 'sera-db';
-import { DisplayInterface } from '../data';
-export interface ViewNestedPropertyItemProps<ID extends string | number, R extends GenericRecord<ID, DR>, DR extends DraftRecord<ID>> {
-    store: Table<ID, R, DR>;
-    record: R;
-    properties: (DataProperty | ObjectProperty)[];
-    DisplayComponent: React.ComponentType<DisplayInterface<any>>;
-}
-/**
- * A component that renders a nested property item.
- *
- * This component traverses through a chain of properties to display a deeply nested
- * property value from a record. It shows the last property label and renders the value
- * using the provided DisplayComponent.
- *
- * @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
- * @template PF - The property field type constrained to keys of R
- * @template F - The field type constrained to keys of DR
- *
- * @param props - The component properties
- * @param props.store - The table store containing the record data
- * @param props.record - The record being viewed
- * @param props.properties - Array of properties defining the path to the nested value
- * @param props.DisplayComponent - React component used to render the field value
- *
- * @returns A JSX element displaying the nested property with its label and value
- *
- * @example
- * ```tsx
- * <ViewNestedPropertyItem
- *   store={userStore}
- *   record={user}
- *   properties={[addressProperty, streetProperty]}
- *   DisplayComponent={TextDisplay}
- * />
- * ```
- */
-export declare const ViewNestedPropertyItem: (<ID extends string | number, R extends GenericRecord<ID, DR>, DR extends DraftRecord<ID>>({ store, record, properties, DisplayComponent, }: ViewNestedPropertyItemProps<ID, R, DR>) => import("react/jsx-runtime").JSX.Element) & {
-    displayName: string;
-};