@zealicsolutions/web-ui 1.0.140-beta.109 → 1.0.140-beta.110

package/dist/cjs/containers/ReplicatorContainer/ReplicatorContainer.d.ts

@@ -1,14 +1,37 @@
 import React from 'react';
 import { DmfId, PathSegment } from '../../contexts/ContainerRuntimeContext/types';
+import { StyleVariantConfig, VariantContainerConfig, VariantContainerProperties } from './types';
+/**
+ * Resolve the active variant from scoped data using the variant field configuration.
+ *
+ * @param styleVariantConfig - The variant configuration from container properties
+ * @param scopedData - The current item's data keyed by DMF ID
+ * @returns The variant key (enum value) or null if not resolvable
+ */
+export declare const resolveActiveVariant: (styleVariantConfig: StyleVariantConfig | undefined, scopedData: Record<string, unknown> | undefined) => string | null;
+/**
+ * Get container styles for the active variant and presentation mode.
+ *
+ * @param config - The container's config object
+ * @param activeVariant - The resolved variant key (or null)
+ * @param presentation - 'wide' or 'compact'
+ * @returns The styles to apply (containerStyle object)
+ */
+export declare const getVariantContainerStyles: (config: VariantContainerConfig | undefined, activeVariant: string | null, presentation: 'wide' | 'compact') => Record<string, unknown>;
 export type ReplicatorContainerProps = {
     replicatorFieldId?: DmfId;
     nestedPathSegments?: PathSegment[];
     children?: React.ReactNode;
+    /** Container properties including styleVariantConfig */
+    properties?: VariantContainerProperties;
+    /** Container config including variant-specific styles */
+    config?: VariantContainerConfig;
     /**
      * Optional render function used by the parent Container to replicate the full
      * container wrapper (styles, configuration handlers, etc.) for each iteration.
      * When not provided, children are rendered directly.
+     * Now receives activeVariant as additional parameter.
      */
-    renderWrapper?: (iterationIndex: number | undefined, children: React.ReactNode) => React.ReactNode;
+    renderWrapper?: (iterationIndex: number | undefined, children: React.ReactNode, activeVariant: string | null) => React.ReactNode;
 };
 export declare const ReplicatorContainer: React.NamedExoticComponent<React.PropsWithChildren<ReplicatorContainerProps>>;

package/dist/cjs/containers/ReplicatorContainer/index.d.ts

@@ -1,2 +1,3 @@
 export * from './ReplicatorContainer';
 export * from './ReplicatorFormSetup';
+export * from './types';

package/dist/cjs/containers/ReplicatorContainer/types.d.ts

@@ -0,0 +1,63 @@
+/**
+ * Style Variants Types for ReplicatorContainer
+ *
+ * These types support the Conditional Style Variants feature that allows
+ * replicator containers to display visually distinct cards based on
+ * backend-provided enumerated field values.
+ */
+/**
+ * Configuration for style variants on a replicator container.
+ * Stored in container's `properties.styleVariantConfig`.
+ */
+export type StyleVariantConfig = {
+    /** Whether style variants are enabled for this container */
+    enabled: boolean;
+    /** DMF ID of the enum field that determines which variant to apply */
+    variantFieldId: string;
+};
+/**
+ * Extended container properties including variant configuration.
+ */
+export type VariantContainerProperties = {
+    styleVariantConfig?: StyleVariantConfig;
+    [key: string]: unknown;
+};
+/**
+ * Extended container config structure supporting variant-specific styles.
+ * Pattern: config.{variant}.{presentation} for container styles
+ *
+ * Example:
+ * {
+ *   wide: { containerStyle: { backgroundColor: '#FFFFFF' } },
+ *   compact: { containerStyle: { backgroundColor: '#F0F0F0' } },
+ *   green: {
+ *     wide: { containerStyle: { backgroundColor: '#E8F5E9' } },
+ *     compact: { containerStyle: { backgroundColor: '#E8F5E9' } }
+ *   }
+ * }
+ */
+export type VariantContainerConfig = {
+    wide?: Record<string, unknown>;
+    compact?: Record<string, unknown>;
+    props?: Record<string, unknown>;
+    [variantKey: string]: {
+        wide?: Record<string, unknown>;
+        compact?: Record<string, unknown>;
+    } | Record<string, unknown> | undefined;
+};
+/**
+ * Extended molecule config structure supporting variant-specific styles.
+ * Pattern: config.{variant}.props for molecule styles
+ *
+ * Example:
+ * {
+ *   props: { color: '#000000', fontWeight: 400 },
+ *   green: { props: { color: '#2E7D32', fontWeight: 600 } }
+ * }
+ */
+export type VariantMoleculeConfig = {
+    props?: Record<string, unknown>;
+    [variantKey: string]: {
+        props?: Record<string, unknown>;
+    } | Record<string, unknown> | undefined;
+};

package/dist/cjs/contexts/ContainerRuntimeContext/types.d.ts

@@ -9,6 +9,8 @@ export type ContainerRuntimeContextValue = {
     itemIndex?: number;
     itemDataByDmfId?: Record<string, unknown>;
     rawItemDataByDmfId?: Record<string, unknown>;
+    /** Current variant key for this container scope (null if no variant active) */
+    activeVariant?: string | null;
 };
 export type ContainerRuntimeContextProviderProps = {
     value: ContainerRuntimeContextValue;