@zealicsolutions/web-ui 1.1.61 → 1.1.64

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

@@ -0,0 +1,8 @@
+import { FC, PropsWithChildren } from 'react';
+export type ExpandableContainerProps = PropsWithChildren<{
+    defaultExpanded?: boolean;
+    unmountOnExit?: boolean;
+    forceExpanded?: boolean;
+    disableToggle?: boolean;
+}>;
+export declare const ExpandableContainer: FC<ExpandableContainerProps>;

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

@@ -0,0 +1,22 @@
+import { TabsContainerSimpleTabStyles, TabsContainerStateSx, TabsContainerStyles, TabsContainerTabProps, TabsContainerTabStyleContract } from 'containers/types/types';
+import { FC, ReactNode } from 'react';
+type TabsContainerProps = {
+    tabs?: TabsContainerTabProps[];
+    defaultTabKey?: string;
+    activeTabKey?: string;
+    keepMounted?: boolean;
+    orientation?: 'horizontal' | 'vertical';
+    variant?: 'standard' | 'scrollable' | 'fullWidth';
+    scrollButtons?: 'auto' | boolean;
+    allowScrollButtonsMobile?: boolean;
+    tabsStyles?: TabsContainerStyles;
+    onTabChange?: (tabKey: string) => void;
+    children?: ReactNode;
+};
+export declare const TabsContainer: FC<TabsContainerProps>;
+export declare const tabsContainerStyleAdapter: {
+    mapSimpleValueToStateSx: (simpleStyles?: TabsContainerSimpleTabStyles) => TabsContainerStateSx;
+    mergeStateSx: (...styles: (TabsContainerStateSx | undefined)[]) => TabsContainerStateSx;
+    mergeTabStyleContracts: (...contracts: (TabsContainerTabStyleContract | undefined)[]) => TabsContainerStateSx;
+};
+export {};

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

@@ -1,4 +1,6 @@
 export * from './Container';
+export * from './ExpandableContainer';
+export { TabsContainer, tabsContainerStyleAdapter } from './TabsContainer';
 export { FormOrganismItem } from './FormOrganismItem';
 export { OrganismItem } from './OrganismItem';
 export type { HeaderTabs } from './OrganismItem';

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

@@ -37,6 +37,55 @@ export declare const ContainerWrapper: import("@emotion/styled").StyledComponent
         sourceDataPointerId?: string | undefined;
         minInstances?: number | undefined;
         maxInstances?: number | undefined;
+        defaultExpanded?: boolean | undefined;
+        unmountOnExit?: boolean | undefined;
+        disableToggleInConfigurationMode?: boolean | undefined;
+        expandableSlot?: "body" | "title" | undefined;
+        dataGridSlot?: "header" | "list_item" | "table_columns" | undefined;
+        tabs?: import("containers/types/types").TabsContainerTabProps[] | undefined;
+        defaultTabKey?: string | undefined;
+        activeTabKey?: string | undefined;
+        keepMounted?: boolean | undefined;
+        orientation?: "horizontal" | "vertical" | undefined;
+        variant?: "standard" | "fullWidth" | "scrollable" | undefined;
+        scrollButtons?: boolean | "auto" | undefined;
+        allowScrollButtonsMobile?: boolean | undefined;
+        tabsStyles?: Partial<{
+            headerSx: import("@emotion/react").CSSObject;
+            tabsSx: import("@emotion/react").CSSObject;
+            tab: Partial<{
+                simple: Partial<{
+                    textColor: string;
+                    backgroundColor: string;
+                    borderColor: string;
+                    borderStyle: string;
+                    borderWidth: string | number;
+                    borderRadius: string | number;
+                    fontSize: string | number;
+                    fontWeight: string | number;
+                    fontFamily: string;
+                    minHeight: string | number;
+                    minWidth: string | number;
+                    paddingX: string | number;
+                    paddingY: string | number;
+                    activeTextColor: string;
+                    activeBackgroundColor: string;
+                    hoverTextColor: string;
+                    hoverBackgroundColor: string;
+                    disabledTextColor: string;
+                    disabledBackgroundColor: string;
+                    disabledOpacity: number;
+                }>;
+                sx: Partial<{
+                    base: import("@emotion/react").CSSObject;
+                    active: import("@emotion/react").CSSObject;
+                    hover: import("@emotion/react").CSSObject;
+                    disabled: import("@emotion/react").CSSObject;
+                }>;
+            }>;
+            indicatorSx: import("@emotion/react").CSSObject;
+            panelSx: import("@emotion/react").CSSObject;
+        }> | undefined;
     }> | undefined;
     properties?: ContainerProperties | undefined;
 }, React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

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

@@ -1,4 +1,4 @@
-import { AlertMoleculeProps, BadgeMoleculeProps, BasicTextFieldProps, BinaryRadioButtonsProps, ButtonProps, CheckboxProps, ChecklistItem, ChecklistProps, ChipMoleculeProps, DateCalendarProps, DatePickerMoleculeProps, DividerProps, ImageProps, LinkProps, RatingMoleculeProps, SelectMoleculeProps, SliderMoleculeProps, StepperProps, TextProps, VideoProps } from 'molecules';
+import { AlertMoleculeProps, BadgeMoleculeProps, BasicTextFieldProps, BinaryRadioButtonsProps, BreadcrumbsMoleculeProps, ButtonProps, CheckboxProps, ChecklistItem, ChecklistProps, ChipMoleculeProps, DateCalendarProps, DatePickerMoleculeProps, DividerProps, ImageProps, LinkProps, ProgressMoleculeProps, RatingMoleculeProps, SelectMoleculeProps, SliderMoleculeProps, StepperProps, TextProps, VideoProps } from 'molecules';
 /**
  * [ NEW MOLECULE: 2 ] Import new molecule props from the molecule index
  *
@@ -57,13 +57,21 @@ export interface ActionObject {
     navigateToOrganismWithRwoContext?: NavigationConfig;
     navigateToPageWithRwoContext?: NavigationConfig;
 }
+export type NavigationFieldMapEntry = {
+    source: string;
+    destination: string;
+    sourceParent?: string;
+    destinationParent?: string;
+    /**
+     * Destination field type metadata (e.g. "enumerated_list").
+     * Used by prepopulate flow to shape wrapped values correctly.
+     */
+    destinationFieldType?: string;
+};
 export interface NavigationConfig {
     link?: LinkAction;
     targetFormId?: string;
-    fieldMap?: Array<{
-        source: string;
-        destination: string;
-    }>;
+    fieldMap?: NavigationFieldMapEntry[];
     sourceDataModelFieldId?: string;
     targetOrganismIds?: string[];
     inputParams?: Array<{
@@ -196,8 +204,8 @@ export type SpeedDialItemTypes = 'speed_dial_action_item';
 export type MoleculeItemTypes = StepperItemTypes | ChecklistItemTypes | AccordionItemTypes | MenuItemTypes | TabsItemTypes | DrawerItemTypes | SpeedDialItemTypes;
 export type DataCaptureMoleculeTypes = 'basic_text_field' | 'email_input_field' | 'phone_number_input_field' | 'numeric_input_field' | 'currency_input_field' | 'select' | 'date_picker' | 'time_picker' | 'date_calendar' | 'rating' | 'switch' | 'slider' | 'checkbox' | 'checkbox_display' | 'binary_radio_buttons' | 'binary_radio_buttons_display' | 'consent' | 'signup_password_fields' | 'visit';
 export type DataDisplayMoleculeTypes = 'simple_text' | 'text' | 'basic_text_display_field' | 'email_display_field' | 'phone_number_display_field' | 'numeric_display_field' | 'currency_display_field' | 'select_display_field' | 'rating_display_field' | 'switch_display_field' | 'slider_display_field' | 'date_display_field' | 'time_picker_display' | 'date_calendar_display' | 'alert' | 'badge' | 'chip' | 'link' | 'avatar';
-export type ComplexMoleculeTypes = 'stepper' | 'checklist' | 'accordion' | 'menu' | 'drawer' | 'tabs' | 'speed_dial' | 'divider';
-export type SimpleMoleculeTypes = 'button' | 'video' | 'image';
+export type ComplexMoleculeTypes = 'stepper' | 'checklist' | 'accordion' | 'breadcrumbs' | 'menu' | 'drawer' | 'tabs' | 'speed_dial' | 'divider';
+export type SimpleMoleculeTypes = 'button' | 'video' | 'image' | 'progress';
 export type MoleculeTypes = DataCaptureMoleculeTypes | DataDisplayMoleculeTypes | ComplexMoleculeTypes | SimpleMoleculeTypes;
 /**
  * [ NEW MOLECULE: 3 ] Second Step is to add the new molecule name to this list, in snake case format
@@ -304,12 +312,32 @@ export interface TabsMoleculeType extends BaseMoleculeType {
     };
     children: TabsItemDTO[];
 }
+export interface BreadcrumbsMoleculeType extends BaseMoleculeType {
+    type: 'breadcrumbs';
+    config: {
+        props: Omit<BreadcrumbsMoleculeProps, 'items' | 'onNavigate' | 'configurationItemInfo'>;
+    };
+    properties: {
+        text?: TextProperties;
+    };
+    children: TabsItemDTO[];
+}
 export interface DividerMoleculeType extends BaseMoleculeType {
     type: 'divider';
     config: {
         props: DividerProps;
     };
 }
+export interface ProgressMoleculeType extends BaseMoleculeType {
+    type: 'progress';
+    config: {
+        props: Omit<ProgressMoleculeProps, 'configurationItemInfo'>;
+    };
+    properties: {
+        text?: TextProperties;
+        dataCapture?: DataCaptureProperties;
+    };
+}
 export interface LinkMoleculeType extends BaseMoleculeType {
     type: 'link';
     config: {
@@ -628,7 +656,7 @@ export interface BinaryRadioButtonsMoleculeType extends BaseMoleculeType {
         dataCapture: DataCaptureProperties;
     };
 }
-export type Molecule = StrictUnion<SimpleTextMoleculeType | TextMoleculeType | ConsentFieldMoleculeType | PasswordSetupMoleculeType | StepperMoleculeType | ChecklistsMoleculeType | AccordionMoleculeType | MenuMoleculeType | DrawerMoleculeType | TabsMoleculeType | DividerMoleculeType | LinkMoleculeType | VideoMoleculeType | ImageMoleculeType | ButtonMoleculeType | ChipMoleculeType | BadgeMoleculeType | AlertMoleculeType | BasicTextFieldMoleculeType | RatingMoleculeType | SwitchMoleculeType | SliderMoleculeType | SelectMoleculeType | DatePickerMoleculeType | TimePickerMoleculeType | EmailInputFieldMoleculeType | PhoneNumberInputFieldMoleculeType | NumericInputFieldMoleculeType | CurrencyInputFieldMoleculeType | AvatarMoleculeType | VisitMoleculeType | DateCalendarMoleculeType | SpeedDialMoleculeType | CheckboxMoleculeType | BinaryRadioButtonsMoleculeType> & Partial<{
+export type Molecule = StrictUnion<SimpleTextMoleculeType | TextMoleculeType | ConsentFieldMoleculeType | PasswordSetupMoleculeType | StepperMoleculeType | ChecklistsMoleculeType | AccordionMoleculeType | MenuMoleculeType | DrawerMoleculeType | TabsMoleculeType | BreadcrumbsMoleculeType | DividerMoleculeType | ProgressMoleculeType | LinkMoleculeType | VideoMoleculeType | ImageMoleculeType | ButtonMoleculeType | ChipMoleculeType | BadgeMoleculeType | AlertMoleculeType | BasicTextFieldMoleculeType | RatingMoleculeType | SwitchMoleculeType | SliderMoleculeType | SelectMoleculeType | DatePickerMoleculeType | TimePickerMoleculeType | EmailInputFieldMoleculeType | PhoneNumberInputFieldMoleculeType | NumericInputFieldMoleculeType | CurrencyInputFieldMoleculeType | AvatarMoleculeType | VisitMoleculeType | DateCalendarMoleculeType | SpeedDialMoleculeType | CheckboxMoleculeType | BinaryRadioButtonsMoleculeType> & Partial<{
     form: UseFormReturn<Record<string, unknown>>;
     formData: AnyObject;
     setFormData: Dispatch<SetStateAction<AnyObject>>;

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

@@ -4,9 +4,9 @@ import { ValidationMode } from 'react-hook-form';
 import { SizesTypes } from 'theme';
 import type { AnyObject, Nullable, StylesType } from '../../typescript';
 import { Molecule } from './moleculeTypes';
-export type ContainerType = 'default' | 'row' | 'column' | 'slider' | 'form' | 'form_purpose' | 'form_step' | 'dynamic' | 'journey_driven' | 'journey_driven_step' | 'replicator' | 'empty_state';
+export type ContainerType = 'default' | 'row' | 'column' | 'slider' | 'expandable' | 'tabs' | 'form' | 'form_purpose' | 'form_step' | 'dynamic' | 'journey_driven' | 'journey_driven_step' | 'replicator' | 'empty_state';
 export type ContainerTemplateType = 'row_content_container';
-export type WrappedContainerType = Extract<ContainerType, 'form' | 'form_step' | 'filter' | 'replicator'>;
+export type WrappedContainerType = Extract<ContainerType, 'form' | 'form_step' | 'filter' | 'replicator' | 'tabs'>;
 export type DmfId = string;
 export type ContainerPositionType = 'fixed' | 'sticky' | 'static' | 'relative';
 export type ContainerAlignItemsType = 'start' | 'center' | 'end' | 'stretch';
@@ -61,6 +61,61 @@ export type ContainerProperties = {
         value: boolean;
     };
 };
+export type TabsContainerStateSx = Partial<{
+    base: CSSObject;
+    active: CSSObject;
+    hover: CSSObject;
+    disabled: CSSObject;
+}>;
+export type TabsContainerSimpleTabStyles = Partial<{
+    textColor: string;
+    backgroundColor: string;
+    borderColor: string;
+    borderStyle: string;
+    borderWidth: string | number;
+    borderRadius: string | number;
+    fontSize: string | number;
+    fontWeight: string | number;
+    fontFamily: string;
+    minHeight: string | number;
+    minWidth: string | number;
+    paddingX: string | number;
+    paddingY: string | number;
+    activeTextColor: string;
+    activeBackgroundColor: string;
+    hoverTextColor: string;
+    hoverBackgroundColor: string;
+    disabledTextColor: string;
+    disabledBackgroundColor: string;
+    disabledOpacity: number;
+}>;
+export type TabsContainerTabStyleContract = Partial<{
+    simple: TabsContainerSimpleTabStyles;
+    sx: TabsContainerStateSx;
+}>;
+export type TabsContainerStyles = Partial<{
+    headerSx: CSSObject;
+    tabsSx: CSSObject;
+    tab: TabsContainerTabStyleContract;
+    indicatorSx: CSSObject;
+    panelSx: CSSObject;
+}>;
+export type TabsContainerTabProps = {
+    label?: string;
+    iconName?: string;
+    iconColor?: string;
+    iconSize?: number | string;
+    iconPosition?: 'start' | 'end' | 'top' | 'bottom';
+    disabled?: boolean;
+    styles?: Partial<{
+        tab: TabsContainerTabStyleContract;
+        panelSx: CSSObject;
+    }>;
+    /** @deprecated Tab key is derived from child id at runtime */
+    key?: string;
+    /** @deprecated Tab-to-child mapping is derived by child order at runtime */
+    childId?: string;
+};
 export type ContainerPropsType = Partial<{
     position: ContainerPositionType;
     alignItems: ContainerAlignItemsType;
@@ -86,6 +141,20 @@ export type ContainerPropsType = Partial<{
     sourceDataPointerId?: string;
     minInstances?: number;
     maxInstances?: number;
+    defaultExpanded?: boolean;
+    unmountOnExit?: boolean;
+    disableToggleInConfigurationMode?: boolean;
+    expandableSlot?: 'title' | 'body';
+    dataGridSlot?: 'header' | 'list_item' | 'table_columns';
+    tabs?: TabsContainerTabProps[];
+    defaultTabKey?: string;
+    activeTabKey?: string;
+    keepMounted?: boolean;
+    orientation?: 'horizontal' | 'vertical';
+    variant?: 'standard' | 'scrollable' | 'fullWidth';
+    scrollButtons?: 'auto' | boolean;
+    allowScrollButtonsMobile?: boolean;
+    tabsStyles?: TabsContainerStyles;
 }>;
 export type AdditionalContainerProps = Partial<{
     containerStyle: CSSObject;

package/dist/cjs/index.d.ts

@@ -14,6 +14,8 @@ export { toOrganismItem } from './organisms';
 export type { OrganismDTO } from './organisms';
 export { CalendarOrganism } from './organisms/Calendar';
 export { DataGridOrganism } from './organisms/DataGrid';
+export { DataGridListOrganism } from './organisms/DataGridListOrganism';
+export { DataGridCustomOrganism } from './organisms/DataGridCustomOrganism';
 export * from './organisms/organismConfigurators';
 export type { SelectOption } from './components/Select/Select';
 export * from './theme';