@zealicsolutions/web-ui 0.3.14 → 0.3.15

package/dist/esm/src/atoms/Input/Input.d.ts

@@ -3,6 +3,7 @@ import { InputFieldTypes } from 'fieldsConfiguration/types';
 import React from 'react';
 import { ThemeColors } from 'theme/types';
 import type { Callback, StylesType } from 'typescript';
+import { MaskConfig } from './helpers';
 export declare type InputFieldInternalConfigProps = Partial<{
     textColor: ThemeColors | string;
     textFontSize: number;
@@ -31,5 +32,6 @@ export declare type InputProps = {
     onChange?: (value: string) => void;
     onKeyDown?: (event: React.KeyboardEvent<HTMLInputElement>) => void;
     internalConfig?: InputFieldInternalConfigProps;
+    config?: MaskConfig;
 };
-export declare const Input: ({ value, leftIcon, rightIcon, onChange, onBlur, disabled, isError, placeholder, isEditMode, type, internalConfig, ...rest }: InputProps) => JSX.Element;
+export declare const Input: ({ value, leftIcon, rightIcon, onChange, onBlur, disabled, isError, placeholder, isEditMode, type, internalConfig, config, ...rest }: InputProps) => JSX.Element;

package/dist/esm/src/atoms/Input/Input.stories.d.ts

@@ -3,7 +3,7 @@ import type { StoryFn } from '@storybook/react';
 import { InputProps } from './Input';
 declare const _default: {
     title: string;
-    component: ({ value, leftIcon, rightIcon, onChange, onBlur, disabled, isError, placeholder, isEditMode, type, internalConfig, ...rest }: InputProps) => JSX.Element;
+    component: ({ value, leftIcon, rightIcon, onChange, onBlur, disabled, isError, placeholder, isEditMode, type, internalConfig, config, ...rest }: InputProps) => JSX.Element;
 };
 export default _default;
 export declare const Input: StoryFn<InputProps>;

package/dist/esm/src/atoms/Input/helpers.d.ts

@@ -0,0 +1,18 @@
+import { MaskedInputProps } from 'react-text-mask';
+import { HTMLInputTypeAttribute } from 'react';
+import { ThemeColors } from 'theme';
+import { InputProps } from 'atoms';
+import { InputFieldTypes } from '../../fieldsConfiguration';
+export declare type MaskConfig = Partial<{
+    maskPlaceholder: string;
+    dataModelFieldType: InputFieldTypes;
+    maskPattern: Array<string | RegExp>;
+}>;
+export declare const getSpecificInputProps: (type: InputFieldTypes) => {
+    type?: HTMLInputTypeAttribute | undefined;
+    inputMode?: "text" | "none" | "search" | "tel" | "url" | "email" | "numeric" | "decimal" | undefined;
+};
+export declare const getMaskInputProps: (type?: InputFieldTypes, config?: MaskConfig) => Pick<MaskedInputProps, 'pipe' | 'mask' | 'placeholder' | 'keepCharPositions'>;
+export declare const getInputIconColor: ({ isEditMode, isFocused, isError, disabled, }: Pick<InputProps, "disabled" | "isError" | "isEditMode"> & {
+    isFocused: boolean;
+}) => ThemeColors;

package/dist/esm/src/atoms/Select/Select.d.ts

@@ -1,10 +1,12 @@
 /// <reference types="react" />
 import { ThemeColors } from 'theme';
-import type { Callback, StylesType } from 'typescript';
+import type { AnyObject, Callback, StylesType } from 'typescript';
 import { RefCallBack } from 'react-hook-form/dist/types';
 export declare type SelectOption = {
     id: string;
     label: string;
+    value?: string;
+    config?: AnyObject;
 };
 export declare type SelectInternalConfigurationOptions = {
     placeholderTextColor: ThemeColors | string;

package/dist/esm/src/fieldsConfiguration/types.d.ts

@@ -2,7 +2,7 @@
 import { ControllerProps } from 'react-hook-form';
 import { SelectOption } from 'atoms';
 import { InputFieldProps, SelectFieldProps } from 'molecules';
-export declare type InputFieldTypes = 'phone-number' | 'text' | 'email' | 'password' | 'numerical' | 'any';
+export declare type InputFieldTypes = 'phone-number' | 'text' | 'email' | 'password' | 'numerical' | 'month_year_date' | 'day_month_year_date' | 'month_day_year_date' | 'us_zip_code' | 'any';
 export declare type FieldTypes = 'input' | 'select' | 'checkbox';
 export declare type UIField<T = string> = (UIInputField & UISelectField & UICheckboxField) & {
     name: T;

package/dist/esm/src/helpers/validations.d.ts

@@ -5,4 +5,11 @@ export declare const phoneNumberValidation: RegExp;
 export declare const numberValidation: RegExp;
 export declare const emailValidation: RegExp;
 export declare const textValidation: RegExp;
+export declare const dateValidation: RegExp;
+export declare const usZipCode: RegExp;
 export declare const getInputValidation: (type?: InputFieldTypes) => ValidationRule<RegExp> | undefined;
+export declare const postCodeMask: RegExp[];
+export declare const dayMonthYearDateMask: (string | RegExp)[];
+export declare const monthYearDateMask: (string | RegExp)[];
+export declare const phoneNumberMask: (string | RegExp)[];
+export declare const removeMaskFromString: (inputString: string) => string;

package/dist/index.d.ts

@@ -5,20 +5,22 @@ import * as styled_components from 'styled-components';
 import { CSSProperties, DefaultTheme } from 'styled-components';
 import { ThemeColors as ThemeColors$1, SizesTypes as SizesTypes$1, FontSizesTypes as FontSizesTypes$2 } from 'theme';
 import * as typescript from 'typescript';
-import { StylesType, Callback as Callback$1, OverrideStyles, StyledTransientProps, Nullable, AnyObject, StrictUnion } from 'typescript';
+import { StylesType, AnyObject, Callback as Callback$1, OverrideStyles, StyledTransientProps, Nullable, StrictUnion } from 'typescript';
 import { RefCallBack, Control as Control$1, ControllerProps as ControllerProps$1 } from 'react-hook-form/dist/types';
 import { IconNames as IconNames$1 } from 'atoms/Icon/Icon';
-import { InputFieldTypes as InputFieldTypes$1, FieldTypes as FieldTypes$1, UIFields as UIFields$2 } from 'fieldsConfiguration/types';
+import { FieldTypes as FieldTypes$1, UIFields as UIFields$1, InputFieldTypes as InputFieldTypes$1 } from 'fieldsConfiguration/types';
 import { ThemeColors as ThemeColors$2, FontSizesTypes as FontSizesTypes$1, SizesTypes as SizesTypes$2, BreakpointSizesTypes as BreakpointSizesTypes$1 } from 'theme/types';
-import { BaseButtonProps as BaseButtonProps$1, MenuItem as MenuItem$1, HeroImageProps as HeroImageProps$1, ColumnsProps as ColumnsProps$1, EmphasizedTextProps as EmphasizedTextProps$1, TabGroupProps as TabGroupProps$1, AvatarDropdownProps as AvatarDropdownProps$1, ButtonProps as ButtonProps$1, FeedContentHeaderProps as FeedContentHeaderProps$1, AlertProps as AlertProps$1, BottomNaVBarItemProps as BottomNaVBarItemProps$1, InputFieldProps as InputFieldProps$1, SelectFieldProps as SelectFieldProps$1, FieldSectionProps as FieldSectionProps$1, MenuItemsProps as MenuItemsProps$1, ImageProps as ImageProps$1, TextMoleculeProps as TextMoleculeProps$1, AdditionalTabContainerProps as AdditionalTabContainerProps$1, RadioButtonFieldProps as RadioButtonFieldProps$1, CheckboxFieldProps as CheckboxFieldProps$1 } from 'molecules';
+import * as react_hook_form from 'react-hook-form';
+import { ControllerProps, DeepPartial, FieldValues, FormState, Control, UseFormReturn, ValidationMode } from 'react-hook-form';
+import * as atoms from 'atoms';
+import { SelectOption as SelectOption$1, TextProps as TextProps$1, IconNames as IconNames$2, TouchableOpacityProps as TouchableOpacityProps$1, AvatarProps as AvatarProps$1, TabProps as TabProps$1, RadioButtonsProps as RadioButtonsProps$1, InputProps as InputProps$1, SelectProps as SelectProps$1, RegularImageProps as RegularImageProps$1, TextButtonProps as TextButtonProps$1, TabTheme as TabTheme$1, RadioButtonInternalConfigProps as RadioButtonInternalConfigProps$1, HorizontalButtonsProps as HorizontalButtonsProps$1, IconProps as IconProps$1 } from 'atoms';
+import { InputFieldProps as InputFieldProps$1, SelectFieldProps as SelectFieldProps$1, FieldSectionProps as FieldSectionProps$1, BaseButtonProps as BaseButtonProps$1, MenuItem as MenuItem$1, HeroImageProps as HeroImageProps$1, ColumnsProps as ColumnsProps$1, EmphasizedTextProps as EmphasizedTextProps$1, TabGroupProps as TabGroupProps$1, AvatarDropdownProps as AvatarDropdownProps$1, ButtonProps as ButtonProps$1, FeedContentHeaderProps as FeedContentHeaderProps$1, AlertProps as AlertProps$1, BottomNaVBarItemProps as BottomNaVBarItemProps$1, MenuItemsProps as MenuItemsProps$1, ImageProps as ImageProps$1, TextMoleculeProps as TextMoleculeProps$1, AdditionalTabContainerProps as AdditionalTabContainerProps$1, RadioButtonFieldProps as RadioButtonFieldProps$1, CheckboxFieldProps as CheckboxFieldProps$1 } from 'molecules';
 import { TooltipProps as TooltipProps$1 } from 'rc-tooltip/lib/Tooltip';
 import { WithGoogleMapProps } from 'react-google-maps/lib/withGoogleMap';
 import { WithScriptjsProps } from 'react-google-maps/lib/withScriptjs';
-import * as atoms from 'atoms';
-import { TextProps as TextProps$1, IconNames as IconNames$2, TouchableOpacityProps as TouchableOpacityProps$1, AvatarProps as AvatarProps$1, TabProps as TabProps$1, RadioButtonsProps as RadioButtonsProps$1, SelectOption as SelectOption$1, InputProps as InputProps$1, SelectProps as SelectProps$1, RegularImageProps as RegularImageProps$1, TextButtonProps as TextButtonProps$1, TabTheme as TabTheme$1, RadioButtonInternalConfigProps as RadioButtonInternalConfigProps$1, HorizontalButtonsProps as HorizontalButtonsProps$1, IconProps as IconProps$1 } from 'atoms';
 import { RadioGroup, DrawerProps as DrawerProps$1, ModalProps } from '@mui/material';
-import { UIFields as UIFields$1, UIField as UIField$1 } from 'fieldsConfiguration';
-import { MaxRuleValidation, MinRuleValidation, SetPasswordFields } from 'organisms/SetPasswordForm/types';
+import { UIFields as UIFields$2, UIField as UIField$1 } from 'fieldsConfiguration';
+import { SetPasswordFields, MaxRuleValidation, MinRuleValidation } from 'organisms/SetPasswordForm/types';
 import { ConsentProps as ConsentProps$1, FilteredFeedContentType as FilteredFeedContentType$1, HeroSliderProps as HeroSliderProps$1, ProcessTrackerProps as ProcessTrackerProps$1, ProcessTrackerStatus as ProcessTrackerStatus$1 } from 'organisms';
 import { ConsentProps as ConsentProps$2 } from 'organisms/Consent/Consent';
 import { FooterAProps } from 'organisms/Footer/FooterA';
@@ -30,8 +32,6 @@ import { SubscribePanelProps as SubscribePanelProps$1 } from 'organisms/Subscrib
 import { ISIAProps } from 'organisms/ISI/ISIA';
 import { HeaderAProps as HeaderAProps$1 } from 'organisms/Header/HeaderA';
 import { FeedContentProps as FeedContentProps$1, FeedContentTemplateTypes as FeedContentTemplateTypes$1 } from 'organisms/FeedContent/types';
-import * as react_hook_form from 'react-hook-form';
-import { Control, ControllerProps, DeepPartial, FieldValues, FormState, UseFormReturn, ValidationMode } from 'react-hook-form';
 import { AlertProps as AlertProps$2 } from 'molecules/Alert/Alert';
 import { LoginFields as LoginFields$1 } from 'organisms/LoginForm/types';
 import { AnnotationsList as AnnotationsList$1 } from 'contexts/MlrRichTextViewerContext/types';
@@ -83,6 +83,8 @@ declare const Checkbox: ({ id, onClick, label, isError, disabled, isEditMode, is
 declare type SelectOption = {
     id: string;
     label: string;
+    value?: string;
+    config?: AnyObject;
 };
 declare type SelectInternalConfigurationOptions = {
     placeholderTextColor: ThemeColors$1 | string;
@@ -110,6 +112,53 @@ declare type SelectProps = Partial<{
 }>;
 declare const Select: ({ ref, onBlur, onChange, value, placeholder, options, disabled, optionsPresentation, isError, selectInternalConfig, isRichText, }: SelectProps) => JSX.Element;
 
+declare const getFieldPlaceholder: (type: FieldTypes$1, title?: string) => string;
+
+declare type InputFieldTypes = 'phone-number' | 'text' | 'email' | 'password' | 'numerical' | 'month_year_date' | 'day_month_year_date' | 'month_day_year_date' | 'us_zip_code' | 'any';
+declare type FieldTypes = 'input' | 'select' | 'checkbox';
+declare type UIField<T = string> = (UIInputField & UISelectField & UICheckboxField) & {
+    name: T;
+    type: FieldTypes;
+    value?: string;
+    label?: string;
+    placeholder?: string;
+    required?: boolean;
+    tooltip?: string;
+    rules?: ControllerProps['rules'];
+    order?: number;
+};
+declare type UIInputField = {
+    inputType?: InputFieldTypes;
+    maxLength?: number;
+    onKeyDown?: (event: React.KeyboardEvent<HTMLInputElement>) => void;
+} & InputFieldProps$1;
+declare type UISelectField = {
+    options?: SelectOption$1[];
+} & SelectFieldProps$1;
+declare type UICheckboxField = {
+    checkboxLabel?: string;
+};
+declare type UIFields<T extends object> = UIField<keyof T>[];
+
+declare const getInitialValuesFromFields: <T extends object>(fields: UIFields$1<T>) => DeepPartial<T>;
+declare const isFormValid: <T extends FieldValues>(formState: FormState<T>) => boolean;
+declare const getFieldsFromFieldSections: <T extends object>(sections: Pick<FieldSectionProps$1<T>, "fields">[]) => UIFields$1<T>;
+
+declare const acquisitionFormMockFields: UIFields$1<Record<string, string>>;
+declare const setPasswordMockFields: UIFields$1<SetPasswordFields>;
+declare const loginMockFields: UIFields$1<LoginFields$1>;
+declare const sectionMockFields: UIFields$1<Record<string, string>>;
+declare const profileInformationMockForm: {
+    label: string;
+    fields: UIFields$1<Record<string, string>>;
+}[];
+
+declare type MaskConfig = Partial<{
+    maskPlaceholder: string;
+    dataModelFieldType: InputFieldTypes;
+    maskPattern: Array<string | RegExp>;
+}>;
+
 declare type InputFieldInternalConfigProps = Partial<{
     textColor: ThemeColors$2 | string;
     textFontSize: number;
@@ -138,8 +187,9 @@ declare type InputProps = {
     onChange?: (value: string) => void;
     onKeyDown?: (event: React__default.KeyboardEvent<HTMLInputElement>) => void;
     internalConfig?: InputFieldInternalConfigProps;
+    config?: MaskConfig;
 };
-declare const Input: ({ value, leftIcon, rightIcon, onChange, onBlur, disabled, isError, placeholder, isEditMode, type, internalConfig, ...rest }: InputProps) => JSX.Element;
+declare const Input: ({ value, leftIcon, rightIcon, onChange, onBlur, disabled, isError, placeholder, isEditMode, type, internalConfig, config, ...rest }: InputProps) => JSX.Element;
 
 declare type TextTypes = 'primary' | 'secondary' | 'error' | 'success';
 declare type TextAlign = 'center' | 'right' | 'left';
@@ -473,7 +523,7 @@ declare type SetPasswordRuleValidation = {
     rule: MaxRuleValidation | MinRuleValidation;
 };
 declare type SetPasswordFormProps = {
-    fields: UIFields$1<SetPasswordFields>;
+    fields: UIFields$2<SetPasswordFields>;
     logoUrl: string;
     isLoading?: boolean;
     validations: SetPasswordRuleValidation[];
@@ -484,7 +534,7 @@ declare const SetPasswordForm: ({ logoUrl, fields, validations, onBack, onSubmit
 
 declare const showAcceptToastMessage: () => void | undefined;
 declare type AcquisitionFormProps<T extends object> = {
-    fields: UIFields$1<T>;
+    fields: UIFields$2<T>;
     consents: ConsentProps$1[];
     logoUrl: string;
     isLoading?: boolean;
@@ -520,7 +570,7 @@ declare type LoginFields = {
 };
 
 declare type LoginFormProps = {
-    fields: UIFields$1<LoginFields>;
+    fields: UIFields$2<LoginFields>;
     logoUrl: string;
     isLoading?: boolean;
     twoFactorAuthConfig?: {
@@ -816,47 +866,6 @@ declare const toastStyles: styled_components.FlattenSimpleInterpolation;
 
 declare const useMediaQuery: (breakpointSize: BreakpointSizesTypes$1) => boolean;
 
-declare const getFieldPlaceholder: (type: FieldTypes$1, title?: string) => string;
-
-declare type InputFieldTypes = 'phone-number' | 'text' | 'email' | 'password' | 'numerical' | 'any';
-declare type FieldTypes = 'input' | 'select' | 'checkbox';
-declare type UIField<T = string> = (UIInputField & UISelectField & UICheckboxField) & {
-    name: T;
-    type: FieldTypes;
-    value?: string;
-    label?: string;
-    placeholder?: string;
-    required?: boolean;
-    tooltip?: string;
-    rules?: ControllerProps['rules'];
-    order?: number;
-};
-declare type UIInputField = {
-    inputType?: InputFieldTypes;
-    maxLength?: number;
-    onKeyDown?: (event: React.KeyboardEvent<HTMLInputElement>) => void;
-} & InputFieldProps$1;
-declare type UISelectField = {
-    options?: SelectOption$1[];
-} & SelectFieldProps$1;
-declare type UICheckboxField = {
-    checkboxLabel?: string;
-};
-declare type UIFields<T extends object> = UIField<keyof T>[];
-
-declare const getInitialValuesFromFields: <T extends object>(fields: UIFields$2<T>) => DeepPartial<T>;
-declare const isFormValid: <T extends FieldValues>(formState: FormState<T>) => boolean;
-declare const getFieldsFromFieldSections: <T extends object>(sections: Pick<FieldSectionProps$1<T>, "fields">[]) => UIFields$2<T>;
-
-declare const acquisitionFormMockFields: UIFields$2<Record<string, string>>;
-declare const setPasswordMockFields: UIFields$2<SetPasswordFields>;
-declare const loginMockFields: UIFields$2<LoginFields$1>;
-declare const sectionMockFields: UIFields$2<Record<string, string>>;
-declare const profileInformationMockForm: {
-    label: string;
-    fields: UIFields$2<Record<string, string>>;
-}[];
-
 declare type MlrRichTextViewerProviderProps = PropsWithChildren<{
     annotationsList: AnnotationsList$1;
     isMLRReview: boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zealicsolutions/web-ui",
-  "version": "0.3.14",
+  "version": "0.3.15",
   "repository": {
     "type": "git",
     "url": "git+ssh://git@bitbucket.org/Zealic_Solutions/zeal-ui-web.git"
@@ -57,8 +57,10 @@
     "@types/jest": "^29.0.0",
     "@types/react": "^18.0.18",
     "@types/react-pdf": "^6.2.0",
+    "@types/react-text-mask": "^5.4.11",
     "@types/styled-components": "^5.1.26",
     "@types/styled-system": "^5.1.15",
+    "@types/text-mask-addons": "^3.8.1",
     "@typescript-eslint/eslint-plugin": "^5.36.2",
     "@typescript-eslint/parser": "^5.36.2",
     "babel-loader": "^8.2.5",
@@ -85,8 +87,8 @@
   "peerDependencies": {
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "styled-components": "^5.3.5",
-    "react-pdf": "6.2.2"
+    "react-pdf": "6.2.2",
+    "styled-components": "^5.3.5"
   },
   "dependencies": {
     "@mui/material": "^5.10.4",
@@ -101,9 +103,11 @@
     "react-google-maps": "^9.4.5",
     "react-hook-form": "^7.34.2",
     "react-pdf": "6.2.2",
+    "react-text-mask": "^5.5.0",
     "slate": "^0.85.0",
     "slate-react": "^0.83.2",
-    "styled-components": "^5.3.5"
+    "styled-components": "^5.3.5",
+    "text-mask-addons": "^3.8.0"
   },
   "resolutions": {
     "@mui/styled-engine": "npm:@mui/styled-engine-sc@latest"
@@ -119,4 +123,4 @@
   "homepage": "https://bitbucket.org/Zealic_Solutions/zeal-ui-web#readme",
   "keywords": [],
   "description": ""
-}
+}