sera-components 1.4.7 → 1.5.0

package/dist/misc/CountryFlag.d.ts

@@ -63,6 +63,10 @@ export declare const countryFlags: {
         svgFlag: string;
         emojiFlag: string;
     };
+    CAM: {
+        svgFlag: string;
+        emojiFlag: string;
+    };
 };
 export declare const SVGCountryFlag: ({ flag }: {
     flag: CountryFlag;

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/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/view/View.d.ts

@@ -1,10 +1,15 @@
 import { DataProperty, DraftRecord, GenericRecord, ObjectProperty, Schema, SchemaType, Table } from 'sera-db';
+import { MantineSpacing } from '@mantine/core';
 import { DisplayInterface } from '../data/display';
+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 keyof R, F extends keyof 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>;
     } | ((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>> {
@@ -16,4 +21,57 @@ export interface SeraViewProps<ID extends string | number, R extends GenericReco
     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;
+/**
+ * Creates a nested field renderer function for displaying nested record properties.
+ *
+ * This function determines the appropriate display component based on the property type
+ * (data property or object property) and cardinality, then returns a function that renders
+ * the property value within a ViewNestedPropertyItem component.
+ *
+ * @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 props - Array of properties defining the nested path to the field
+ * @param display - Optional custom display component for rendering the field value
+ *
+ * @returns A function that takes a store and record, returning a React node to display the nested field
+ *
+ * @throws {Error} When no display component is found for the specified datatype
+ *
+ * @example
+ * ```tsx
+ * const renderField = makeNestedField([userProperty, nameProperty]);
+ * const node = renderField(store, record);
+ * ```
+ */
+export declare function makeNestedField<ID extends string | number, R extends GenericRecord<ID, DR>, DR extends DraftRecord<ID>>(props: (DataProperty | ObjectProperty)[], args?: FieldArgs<R>): (store: Table<ID, R, DR>, record: R) => React.ReactNode;
+/**
+ * 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 keyof R, F extends keyof 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>;
+} | ((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

@@ -4,8 +4,9 @@ export interface ViewItemProps<ID extends string | number, R extends GenericReco
     store: Table<ID, R, DR>;
     record: R;
     property: DataProperty | ObjectProperty;
+    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/ViewNestedPropertyItem.d.ts

@@ -5,6 +5,7 @@ export interface ViewNestedPropertyItemProps<ID extends string | number, R exten
     record: R;
     properties: (DataProperty | ObjectProperty)[];
     DisplayComponent: React.ComponentType<DisplayInterface<any>>;
+    visible?: (record: R) => boolean;
 }
 /**
  * A component that renders a nested property item.
@@ -37,6 +38,6 @@ export interface ViewNestedPropertyItemProps<ID extends string | number, R exten
  * />
  * ```
  */
-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) & {
+export declare const ViewNestedPropertyItem: (<ID extends string | number, R extends GenericRecord<ID, DR>, DR extends DraftRecord<ID>>({ store, record, properties, DisplayComponent, visible, }: ViewNestedPropertyItemProps<ID, R, DR>) => import("react/jsx-runtime").JSX.Element) & {
     displayName: string;
 };

package/dist/view/index.d.ts

@@ -1,2 +1,2 @@
-export { SeraView, makeFieldDisplay } from './View';
+export { SeraView, makeNestedField, 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.5.0",
   "type": "module",
   "files": [
     "dist"
@@ -44,7 +44,7 @@
     "react-dom": "^19.0.0",
     "react-imask": "^7.6.1",
     "react-router": "^7.7.1",
-    "sera-db": "^1.12.6",
+    "sera-db": "^1.12.7",
     "throttle-debounce": "^5.0.2",
     "dayjs": "^1.11.18"
   }