@useloops/design-system 1.4.167 → 1.4.169

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.d.ts CHANGED
@@ -1,21 +1,15 @@
1
- import { Icons } from 'BrandCore/Icon';
2
- export { default as Icon, Icons, iconSizeMap, icons } from 'BrandCore/Icon';
3
1
  import * as _mui_material from '@mui/material';
4
- import { SxProps, Theme, AvatarGroupProps as AvatarGroupProps$1, ButtonProps as ButtonProps$1, CheckboxProps as CheckboxProps$1, ContainerProps, MenuProps, MenuItemProps as MenuItemProps$1, FormControlLabelProps as FormControlLabelProps$1, Breakpoint, TooltipProps as TooltipProps$1, IconButtonProps as IconButtonProps$1, ButtonGroupProps, TextFieldProps as TextFieldProps$1, LinkProps as LinkProps$1, PopperProps as PopperProps$1, ClickAwayListenerProps, FadeProps, SelectProps as SelectProps$1, SelectChangeEvent, PaperProps, SwitchProps as SwitchProps$1, TypographyProps as TypographyProps$1, PaletteMode, Direction } from '@mui/material';
5
- import react, { FunctionComponent, ReactNode, PropsWithChildren, ReactElement, ChangeEvent, FC } from 'react';
6
- import { SurfaceProps as SurfaceProps$1 } from 'WebCore/Surface';
7
- import { GenericSizeMap as GenericSizeMap$1 } from 'BrandCore/primitiveVariables';
8
- import * as react_jsx_runtime from 'react/jsx-runtime';
9
- import * as _emotion_styled from '@emotion/styled';
10
- import * as _mui_system from '@mui/system';
2
+ import { SxProps, Theme, PaperProps, AvatarGroupProps as AvatarGroupProps$1, ButtonProps as ButtonProps$1, CheckboxProps as CheckboxProps$1, ContainerProps, MenuProps, MenuItemProps as MenuItemProps$1, FormControlLabelProps as FormControlLabelProps$1, Breakpoint, TooltipProps as TooltipProps$1, IconButtonProps as IconButtonProps$1, ButtonGroupProps, TextFieldProps as TextFieldProps$1, LinkProps as LinkProps$1, PopperProps as PopperProps$1, ClickAwayListenerProps, FadeProps, SelectProps as SelectProps$1, SelectChangeEvent, SwitchProps as SwitchProps$1, TypographyProps as TypographyProps$1, PaletteMode, Direction } from '@mui/material';
3
+ import react, { FunctionComponent, PropsWithChildren, FC, ReactNode, ReactElement, ChangeEvent } from 'react';
4
+ import { SubmitHandler } from 'react-hook-form';
11
5
  import { Theme as Theme$1 } from '@mui/material/styles';
12
- import { NavigationSizing as NavigationSizing$1 } from 'Platform/Navigation';
13
6
  import { NumericFormatProps } from 'react-number-format';
14
- import { InputFieldBaseProps as InputFieldBaseProps$1 } from 'WebCore/InputFieldBase';
15
- import { PopupState } from 'material-ui-popup-state/hooks';
7
+ import * as _emotion_styled from '@emotion/styled';
8
+ import * as _mui_system from '@mui/system';
9
+ import * as react_jsx_runtime from 'react/jsx-runtime';
16
10
  import { UniqueIdentifier } from '@dnd-kit/core';
17
- import { SubmitHandler } from 'react-hook-form';
18
- import { TextFieldProps as TextFieldProps$2, NumberFieldProps as NumberFieldProps$1, TextareaProps as TextareaProps$1, SelectProps as SelectProps$2, CheckboxProps as CheckboxProps$2, CheckboxGroupProps as CheckboxGroupProps$1, SwitchProps as SwitchProps$2, SliderProps as SliderProps$1, DifferentialProps as DifferentialProps$1, LikertProps as LikertProps$1, RadioGroupProps as RadioGroupProps$1, RankProps as RankProps$1, RichTextFieldProps as RichTextFieldProps$1, StarRatingProps as StarRatingProps$1, HtmlProps as HtmlProps$1, CustomFieldProps as CustomFieldProps$1, InputLabelProps as InputLabelProps$1, InputLabelHelpProps as InputLabelHelpProps$1 } from 'WebCore';
11
+ import { LazyLoadImageProps } from 'react-lazy-load-image-component';
12
+ import { PopupState } from 'material-ui-popup-state/hooks';
19
13
 
20
14
  interface ColorRange$1 {
21
15
  0: string;
@@ -499,6 +493,17 @@ declare const fonts: {
499
493
  };
500
494
  };
501
495
 
496
+ declare const iconSizeMap: Record<string, number>;
497
+ interface IconProps {
498
+ color?: string;
499
+ name: IconName;
500
+ size?: number;
501
+ sx?: SxProps;
502
+ }
503
+ declare const Icon: FunctionComponent<IconProps>;
504
+
505
+ type IconName = 'brand-wordmark' | 'brand-logomark' | 'menu' | 'menu-open' | 'chevron-up' | 'chevron-down' | 'chevron-left' | 'chevron-right' | 'arrow-left' | 'arrow-right' | 'search' | 'close' | 'more-horizontal' | 'more-vertical' | 'home' | 'home-filled' | 'settings' | 'controls' | 'help' | 'filter-list' | 'open-in-new' | 'nav-toggle' | 'nav-collapse' | 'nav-expand' | 'play-circle' | 'play-video' | 'email' | 'document' | 'folder' | 'attach-file' | 'photo-add' | 'upload' | 'upload-cloud' | 'time' | 'time-filled' | 'zoom-in' | 'zoom-out' | 'add' | 'remove' | 'test' | 'dashboard' | 'list-view' | 'grid-view' | 'grid-view-filled' | 'eye' | 'eye-off' | 'notification' | 'pound' | 'euro' | 'dollar' | 'send' | 'comment' | 'chat' | 'error' | 'warning' | 'lightbulb' | 'check-circle' | 'thumb-up' | 'info' | 'info-filled' | 'cancel' | 'compress' | 'expand' | 'unfold' | 'drag-handle' | 'focus' | 'lock' | 'copy' | 'edit' | 'delete' | 'check' | 'star' | 'star-half' | 'star-filled' | 'ai' | 'work' | 'gift' | 'social-medium-single-colour' | 'social-linkedin-single-colour' | 'social-youtube-single-colour' | 'social-linkedin-full-colour' | 'social-google-full-colour' | 'badge-tick' | 'badge-tick-in-circle' | 'badge-cross' | 'badge-cross-in-circle' | 'badge-hyphen' | 'badge-hyphen-in-circle' | 'badge-question' | 'badge-question-in-circle';
506
+
502
507
  interface CustomTheme {
503
508
  palette: {
504
509
  black: string;
@@ -637,9 +642,22 @@ interface CustomTheme {
637
642
  };
638
643
  }
639
644
 
640
- interface AuthContainerSurfaceProps extends SurfaceProps$1 {
645
+ type SurfaceVariation = 'default' | 'sunken' | 'raised' | 'overlay';
646
+ type BorderRadius = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
647
+
648
+ interface SurfaceProps extends PropsWithChildren {
649
+ variation?: SurfaceVariation;
650
+ borderradius?: BorderRadius;
651
+ sx?: SxProps<Theme>;
652
+ ref?: PaperProps['ref'];
653
+ component?: PaperProps['component'];
654
+ }
655
+ declare const Surface: FC<SurfaceProps>;
656
+
657
+ interface AuthContainerSurfaceProps extends SurfaceProps {
641
658
  headContent?: ReactNode;
642
659
  sx?: SxProps<Theme>;
660
+ children: ReactNode;
643
661
  }
644
662
  declare const AuthContainerSurface: FunctionComponent<AuthContainerSurfaceProps>;
645
663
 
@@ -661,7 +679,7 @@ interface MenuItemProps {
661
679
  danger?: boolean;
662
680
  fullWidth?: boolean;
663
681
  href?: string;
664
- icon?: Icons;
682
+ icon?: IconName;
665
683
  label: string;
666
684
  onClick?: () => void;
667
685
  selected?: boolean;
@@ -680,6 +698,82 @@ interface NudgeProps$1 extends PropsWithChildren {
680
698
  }
681
699
  declare const Navigation: FunctionComponent<NavigationProps>;
682
700
 
701
+ interface ProjectItemViewType {
702
+ viewType?: 'grid' | 'list';
703
+ }
704
+ interface UserProps {
705
+ id: string;
706
+ email: string;
707
+ firstName: string;
708
+ lastName: string;
709
+ country: string | null;
710
+ city: string | null;
711
+ profileImage: string | null;
712
+ jobTitle: string | null;
713
+ role: string | null;
714
+ }
715
+ interface ProjectItemDataProps {
716
+ id: string;
717
+ postId: string;
718
+ versionId: string;
719
+ thumbnail: string;
720
+ demoSurveyId: string;
721
+ title: string;
722
+ description: string | null;
723
+ demoProjectSummary?: string | null;
724
+ demoSurveySummary?: string | null;
725
+ name: string;
726
+ user: UserProps;
727
+ isAuthor: boolean;
728
+ isDemo: boolean;
729
+ loopCount: number | null;
730
+ testCount: number | null;
731
+ draftCount: number | null;
732
+ updatedAt?: string;
733
+ tags?: string[] | null;
734
+ onClick?: () => void;
735
+ loading?: boolean;
736
+ moreActions?: React.ReactNode;
737
+ }
738
+ interface ProjectItemProps extends ProjectItemDataProps, ProjectItemViewType {
739
+ }
740
+
741
+ declare const ProjectItem: FunctionComponent<ProjectItemProps>;
742
+
743
+ declare const emailValidation: {
744
+ pattern: {
745
+ value: RegExp;
746
+ message: string;
747
+ };
748
+ };
749
+
750
+ declare const chooseArticle: (word: string) => string;
751
+ declare const defaultInputValidation: (inputName?: string, isRequired?: boolean, maxLength?: number) => {
752
+ required?: string | undefined;
753
+ maxLength: {
754
+ value: number;
755
+ message: string;
756
+ };
757
+ };
758
+ declare const DEFAULT_MAX_INPUT_LENGTH: number;
759
+
760
+ declare const passwordValidation: (min?: number) => {
761
+ minLength: {
762
+ value: number;
763
+ message: string;
764
+ };
765
+ equal: {
766
+ value: string;
767
+ message: string;
768
+ };
769
+ };
770
+
771
+ interface BackgroundOptions {
772
+ texture?: 'none' | 'noise1';
773
+ gradient?: 'tone1' | 'tone2' | 'tone3' | 'tone4';
774
+ }
775
+ declare const backgroundCreator: (theme: Theme, options: BackgroundOptions) => string;
776
+
683
777
  interface AuthFormHeaderProps {
684
778
  logo?: ReactElement | false | undefined;
685
779
  headerText?: string;
@@ -703,7 +797,7 @@ interface AvatarGroupProps extends AvatarGroupProps$1 {
703
797
  }
704
798
  declare const AvatarGroup: FunctionComponent<AvatarGroupProps>;
705
799
 
706
- type ButtonSizing = Exclude<GenericSizeMap$1, 'none'>;
800
+ type ButtonSizing = Exclude<GenericSizeMap, 'none'>;
707
801
 
708
802
  interface ButtonBaseProps extends ButtonProps$1 {
709
803
  loading?: boolean;
@@ -844,6 +938,98 @@ interface FormControlLabelProps {
844
938
  }
845
939
  declare const FormControlLabel: FunctionComponent<FormControlLabelProps>;
846
940
 
941
+ /**
942
+ * Form Generator Core Types
943
+ */
944
+ interface FormGeneratorHandler {
945
+ set: () => void;
946
+ reset: () => void;
947
+ submit: () => void;
948
+ values: () => void;
949
+ valid: () => void;
950
+ errors: () => void;
951
+ triggerFormValidation: () => Promise<unknown>;
952
+ }
953
+ type FormGeneratorProps = FunctionComponent<{
954
+ ref?: any;
955
+ formConfig: FormGeneratorConfig;
956
+ onFormSubmit?: SubmitHandler<any>;
957
+ onFormChange?: (formData: any) => void;
958
+ submitButton?: ReactElement;
959
+ secondaryButton?: ReactElement;
960
+ }>;
961
+ interface FormGeneratorConfig {
962
+ fields: FieldTypes[];
963
+ autoComplete?: 'off';
964
+ mode?: 'onSubmit' | 'onBlur' | 'onChange';
965
+ formId?: string;
966
+ reValidateMode?: 'onSubmit' | 'onBlur' | 'onChange';
967
+ styleOverrides?: {
968
+ sxForm?: SxProps<Theme>;
969
+ sxButtons?: SxProps<Theme>;
970
+ sxStack?: SxProps<Theme>;
971
+ };
972
+ }
973
+ /**
974
+ * Field Types
975
+ */
976
+ type FieldTypes = CheckboxType | CheckboxGroupType | SwitchType | TextareaType | SelectType | TextFieldType | SliderType | DifferentialType | RichTextFieldType | LikertType | RadioGroupType | DragAndDropRankingType | NumberFieldType | StarRatingType | HTMLType | CustomFieldType;
977
+ type TextFieldType = CreateFieldType<'textfield', TextFieldProps, string>;
978
+ type NumberFieldType = CreateFieldType<'numberfield', NumberFieldProps, number>;
979
+ type TextareaType = CreateFieldType<'textarea', TextareaProps, string>;
980
+ type SelectType = CreateFieldType<'select', SelectProps, SelectProps['value']>;
981
+ type CheckboxType = CreateFieldType<'checkbox', CheckboxProps, NonNullable<CheckboxProps['value']>>;
982
+ type CheckboxGroupType = CreateFieldType<'checkboxGroup', CheckboxGroupProps, string[]>;
983
+ type SwitchType = CreateFieldType<'switch', SwitchProps, NonNullable<SwitchProps['checked']>>;
984
+ type SliderType = CreateFieldType<'slider', SliderProps, NonNullable<SliderProps['value']>>;
985
+ type DifferentialType = CreateFieldType<'differential', DifferentialProps, NonNullable<DifferentialProps['value']>>;
986
+ type LikertType = CreateFieldType<'likert', LikertProps, LikertProps['value']>;
987
+ type RadioGroupType = CreateFieldType<'radioGroup', RadioGroupProps, RadioGroupProps['value']>;
988
+ type DragAndDropRankingType = CreateFieldType<'ranking', RankProps, NonNullable<RankProps['value']>>;
989
+ type RichTextFieldType = CreateFieldType<'richTextfield', RichTextFieldProps, RichTextFieldProps['value']>;
990
+ type StarRatingType = CreateFieldType<'starRating', StarRatingProps, NonNullable<StarRatingProps['value']>>;
991
+ type HTMLType = {
992
+ fieldType: 'html';
993
+ content: HtmlProps['children'];
994
+ defaultValue?: never;
995
+ } & BaseField;
996
+ type CustomFieldType = {
997
+ fieldType: 'customfield';
998
+ defaultValue?: CustomFieldProps['value'];
999
+ } & BaseField & CustomFieldProps;
1000
+ /**
1001
+ * Field Type Utilities
1002
+ */
1003
+ interface BaseField {
1004
+ name: string;
1005
+ ref?: any;
1006
+ multiline?: boolean;
1007
+ content?: ReactElement;
1008
+ label?: string;
1009
+ labelProps?: InputLabelProps;
1010
+ helperText?: string;
1011
+ hidden?: boolean;
1012
+ type?: string;
1013
+ helpTextProps?: InputLabelHelpProps;
1014
+ validation?: any;
1015
+ valueTransformer?: (valueToTransform: string) => string;
1016
+ disabled?: boolean;
1017
+ strengthIndicator?: boolean;
1018
+ styleOverrides?: {
1019
+ sxInputWrapper?: SxProps<Theme>;
1020
+ sxInputBase?: SxProps<Theme>;
1021
+ sxInputStack?: SxProps<Theme>;
1022
+ };
1023
+ }
1024
+ type CreateFieldType<TFieldType extends string, TProps, TDefaultValue extends any = void> = {
1025
+ fieldType: TFieldType;
1026
+ } & BaseField & Omit<TProps, 'value' | 'defaultValue' | 'onChange' | 'name'> & (TDefaultValue extends void ? unknown : {
1027
+ defaultValue?: TDefaultValue;
1028
+ });
1029
+ type FieldType = FieldTypes['fieldType'];
1030
+
1031
+ declare const FormGenerator: FormGeneratorProps;
1032
+
847
1033
  interface GridOverlayProps {
848
1034
  breakpoint?: Breakpoint;
849
1035
  }
@@ -903,6 +1089,10 @@ interface IconButtonGroupProps extends PropsWithChildren {
903
1089
  }
904
1090
  declare const IconButtonGroup: FunctionComponent<IconButtonGroupProps>;
905
1091
 
1092
+ interface ImageProps extends LazyLoadImageProps {
1093
+ }
1094
+ declare const Image: FunctionComponent<ImageProps>;
1095
+
906
1096
  type InputFieldBaseProps = TextFieldProps$1;
907
1097
  declare const InputFieldBase: _emotion_styled.StyledComponent<{
908
1098
  variant?: _mui_material.TextFieldVariants | undefined;
@@ -979,9 +1169,9 @@ interface MenuButtonProps {
979
1169
  danger?: boolean;
980
1170
  fullWidth?: boolean;
981
1171
  href?: string;
982
- icon?: Icons;
1172
+ icon?: IconName;
983
1173
  label: string;
984
- navigationSizing: NavigationSizing$1;
1174
+ navigationSizing: NavigationSizing;
985
1175
  onClick?: () => void;
986
1176
  sizing?: MenuButtonSizing;
987
1177
  }
@@ -991,11 +1181,11 @@ interface NudgeProps extends PropsWithChildren {
991
1181
  description: string;
992
1182
  notification?: boolean;
993
1183
  title: string;
994
- navigationSizing: NavigationSizing$1;
1184
+ navigationSizing: NavigationSizing;
995
1185
  }
996
1186
  declare const Nudge: FunctionComponent<NudgeProps>;
997
1187
 
998
- type NumberFieldProps = InputFieldBaseProps$1 & {
1188
+ type NumberFieldProps = InputFieldBaseProps & {
999
1189
  hideActionButtons?: boolean;
1000
1190
  max?: number;
1001
1191
  min?: number;
@@ -1022,9 +1212,11 @@ declare const Pill: FunctionComponent<PillProps>;
1022
1212
  type BindOn = 'trigger' | 'contextMenu' | 'toggle' | 'hover' | 'focus' | 'doubleClick';
1023
1213
  interface PopperProps {
1024
1214
  popperProps?: Partial<PopperProps$1>;
1025
- clickAwayListenerProps?: Partial<ClickAwayListenerProps>;
1215
+ clickAwayListenerProps?: Partial<Omit<ClickAwayListenerProps, 'onClickAway'> & {
1216
+ onClickAway?: (event: MouseEvent | TouchEvent, state: PopupState) => void;
1217
+ }>;
1026
1218
  transitionFadeProps?: Pick<FadeProps, 'easing' | 'timeout' | 'appear' | 'enter' | 'exit'>;
1027
- surfaceProps?: SurfaceProps$1;
1219
+ surfaceProps?: SurfaceProps;
1028
1220
  bindOn?: BindOn[];
1029
1221
  trigger: (state: PopupState) => ReactNode;
1030
1222
  children: ReactElement;
@@ -1037,7 +1229,7 @@ declare const Portal: FunctionComponent<PortalProps>;
1037
1229
 
1038
1230
  declare const PoweredByWatermarkLogo: () => react_jsx_runtime.JSX.Element;
1039
1231
 
1040
- type ProgressSizing = Exclude<GenericSizeMap$1, 'none'>;
1232
+ type ProgressSizing = Exclude<GenericSizeMap, 'none'>;
1041
1233
  interface ProgressProps {
1042
1234
  sizing?: ProgressSizing;
1043
1235
  }
@@ -1078,6 +1270,41 @@ interface RadioGroupProps {
1078
1270
  }
1079
1271
  declare const RadioGroup: FunctionComponent<RadioGroupProps>;
1080
1272
 
1273
+ type SelectOption = {
1274
+ label: string;
1275
+ value: string;
1276
+ };
1277
+
1278
+ type SelectOnChange = (event: SelectChangeEvent<any>, child: React.ReactNode) => void;
1279
+ type AutocompleteOnChange = (value: string | string[]) => void;
1280
+ type SelectProps = {
1281
+ selections: SelectOption[];
1282
+ autoComplete?: boolean;
1283
+ autoFocus?: boolean;
1284
+ disabled?: boolean;
1285
+ disablePortal?: boolean;
1286
+ error?: boolean;
1287
+ fullWidth?: boolean;
1288
+ id?: string;
1289
+ inputRef?: SelectProps$1['inputRef'];
1290
+ internalChange?: () => void;
1291
+ MenuProps?: SelectProps$1['MenuProps'];
1292
+ multi?: boolean;
1293
+ name: string;
1294
+ onBlur?: SelectProps$1['onBlur'];
1295
+ onChange?: SelectOnChange | AutocompleteOnChange;
1296
+ placeholder?: string | undefined;
1297
+ readOnly?: boolean;
1298
+ ref?: SelectProps$1['ref'];
1299
+ required?: boolean;
1300
+ selectOptionProps?: MenuItemProps$1;
1301
+ sizing?: 'xs' | 'md' | 'lg';
1302
+ sx?: SelectProps$1['sx'];
1303
+ value?: SelectProps$1['value'];
1304
+ renderListItem?: (value: string, label: string) => ReactElement;
1305
+ };
1306
+ declare const Select: FunctionComponent<SelectProps>;
1307
+
1081
1308
  interface Option {
1082
1309
  label: string;
1083
1310
  value: string;
@@ -1131,41 +1358,6 @@ type RichTextFieldProps = Omit<InputFieldBaseProps, 'value' | 'onChange'> & {
1131
1358
  };
1132
1359
  declare const RichTextField: FunctionComponent<RichTextFieldProps>;
1133
1360
 
1134
- type SelectOption = {
1135
- label: string;
1136
- value: string;
1137
- };
1138
-
1139
- type SelectOnChange = (event: SelectChangeEvent<any>, child: React.ReactNode) => void;
1140
- type AutocompleteOnChange = (value: string | string[]) => void;
1141
- type SelectProps = {
1142
- selections: SelectOption[];
1143
- autoComplete?: boolean;
1144
- autoFocus?: boolean;
1145
- disabled?: boolean;
1146
- disablePortal?: boolean;
1147
- error?: boolean;
1148
- fullWidth?: boolean;
1149
- id?: string;
1150
- inputRef?: SelectProps$1['inputRef'];
1151
- internalChange?: () => void;
1152
- MenuProps?: SelectProps$1['MenuProps'];
1153
- multi?: boolean;
1154
- name: string;
1155
- onBlur?: SelectProps$1['onBlur'];
1156
- onChange?: SelectOnChange | AutocompleteOnChange;
1157
- placeholder?: string | undefined;
1158
- readOnly?: boolean;
1159
- ref?: SelectProps$1['ref'];
1160
- required?: boolean;
1161
- selectOptionProps?: MenuItemProps$1;
1162
- sizing?: 'xs' | 'md' | 'lg';
1163
- sx?: SelectProps$1['sx'];
1164
- value?: SelectProps$1['value'];
1165
- renderListItem?: (value: string, label: string) => ReactElement;
1166
- };
1167
- declare const Select: FunctionComponent<SelectProps>;
1168
-
1169
1361
  interface SliderProps {
1170
1362
  labelLeft: string;
1171
1363
  labelRight: string;
@@ -1194,18 +1386,6 @@ interface StarRatingProps {
1194
1386
  }
1195
1387
  declare const StarRating: FunctionComponent<StarRatingProps>;
1196
1388
 
1197
- type SurfaceVariation = 'default' | 'sunken' | 'raised' | 'overlay';
1198
- type BorderRadius = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
1199
-
1200
- interface SurfaceProps extends PropsWithChildren {
1201
- variation?: SurfaceVariation;
1202
- borderradius?: BorderRadius;
1203
- sx?: SxProps<Theme>;
1204
- ref?: PaperProps['ref'];
1205
- component?: PaperProps['component'];
1206
- }
1207
- declare const Surface: FC<SurfaceProps>;
1208
-
1209
1389
  interface StyledSwitchProps extends SwitchProps$1 {
1210
1390
  sizing?: 'sm' | 'lg';
1211
1391
  }
@@ -1221,7 +1401,7 @@ interface SwitchProps extends StyledSwitchProps {
1221
1401
  }
1222
1402
  declare const Switch: FunctionComponent<SwitchProps>;
1223
1403
 
1224
- type TextareaProps = InputFieldBaseProps$1 & {
1404
+ type TextareaProps = InputFieldBaseProps & {
1225
1405
  startAdornment?: ReactElement;
1226
1406
  endAdornment?: ReactElement;
1227
1407
  internalChange?: () => void;
@@ -1244,7 +1424,7 @@ interface TextBarDividerProps {
1244
1424
  }
1245
1425
  declare const TextBarDivider: FunctionComponent<TextBarDividerProps>;
1246
1426
 
1247
- type TextFieldProps = InputFieldBaseProps$1 & {
1427
+ type TextFieldProps = InputFieldBaseProps & {
1248
1428
  startAdornment?: ReactElement;
1249
1429
  endAdornment?: ReactElement;
1250
1430
  internalChange?: () => void;
@@ -1277,132 +1457,6 @@ interface MenuItem {
1277
1457
  }
1278
1458
  declare const UserMenu: FunctionComponent<UserMenuProps>;
1279
1459
 
1280
- interface BackgroundOptions {
1281
- texture?: 'none' | 'noise1';
1282
- gradient?: 'tone1' | 'tone2' | 'tone3' | 'tone4';
1283
- }
1284
- declare const backgroundCreator: (theme: Theme, options: BackgroundOptions) => string;
1285
-
1286
- /**
1287
- * Form Generator Core Types
1288
- */
1289
- interface FormGeneratorHandler {
1290
- set: () => void;
1291
- reset: () => void;
1292
- submit: () => void;
1293
- values: () => void;
1294
- valid: () => void;
1295
- errors: () => void;
1296
- triggerFormValidation: () => Promise<unknown>;
1297
- }
1298
- type FormGeneratorProps = FunctionComponent<{
1299
- ref?: any;
1300
- formConfig: FormGeneratorConfig;
1301
- onFormSubmit?: SubmitHandler<any>;
1302
- onFormChange?: (formData: any) => void;
1303
- submitButton?: ReactElement;
1304
- secondaryButton?: ReactElement;
1305
- }>;
1306
- interface FormGeneratorConfig {
1307
- fields: FieldTypes[];
1308
- autoComplete?: 'off';
1309
- mode?: 'onSubmit' | 'onBlur' | 'onChange';
1310
- formId?: string;
1311
- reValidateMode?: 'onSubmit' | 'onBlur' | 'onChange';
1312
- styleOverrides?: {
1313
- sxForm?: SxProps<Theme>;
1314
- sxButtons?: SxProps<Theme>;
1315
- sxStack?: SxProps<Theme>;
1316
- };
1317
- }
1318
- /**
1319
- * Field Types
1320
- */
1321
- type FieldTypes = CheckboxType | CheckboxGroupType | SwitchType | TextareaType | SelectType | TextFieldType | SliderType | DifferentialType | RichTextFieldType | LikertType | RadioGroupType | DragAndDropRankingType | NumberFieldType | StarRatingType | HTMLType | CustomFieldType;
1322
- type TextFieldType = CreateFieldType<'textfield', TextFieldProps$2, string>;
1323
- type NumberFieldType = CreateFieldType<'numberfield', NumberFieldProps$1, number>;
1324
- type TextareaType = CreateFieldType<'textarea', TextareaProps$1, string>;
1325
- type SelectType = CreateFieldType<'select', SelectProps$2, SelectProps$2['value']>;
1326
- type CheckboxType = CreateFieldType<'checkbox', CheckboxProps$2, NonNullable<CheckboxProps$2['value']>>;
1327
- type CheckboxGroupType = CreateFieldType<'checkboxGroup', CheckboxGroupProps$1, string[]>;
1328
- type SwitchType = CreateFieldType<'switch', SwitchProps$2, NonNullable<SwitchProps$2['checked']>>;
1329
- type SliderType = CreateFieldType<'slider', SliderProps$1, NonNullable<SliderProps$1['value']>>;
1330
- type DifferentialType = CreateFieldType<'differential', DifferentialProps$1, NonNullable<DifferentialProps$1['value']>>;
1331
- type LikertType = CreateFieldType<'likert', LikertProps$1, LikertProps$1['value']>;
1332
- type RadioGroupType = CreateFieldType<'radioGroup', RadioGroupProps$1, RadioGroupProps$1['value']>;
1333
- type DragAndDropRankingType = CreateFieldType<'ranking', RankProps$1, NonNullable<RankProps$1['value']>>;
1334
- type RichTextFieldType = CreateFieldType<'richTextfield', RichTextFieldProps$1, RichTextFieldProps$1['value']>;
1335
- type StarRatingType = CreateFieldType<'starRating', StarRatingProps$1, NonNullable<StarRatingProps$1['value']>>;
1336
- type HTMLType = {
1337
- fieldType: 'html';
1338
- content: HtmlProps$1['children'];
1339
- defaultValue?: never;
1340
- } & BaseField;
1341
- type CustomFieldType = {
1342
- fieldType: 'customfield';
1343
- defaultValue?: CustomFieldProps$1['value'];
1344
- } & BaseField & CustomFieldProps$1;
1345
- /**
1346
- * Field Type Utilities
1347
- */
1348
- interface BaseField {
1349
- name: string;
1350
- ref?: any;
1351
- multiline?: boolean;
1352
- content?: ReactElement;
1353
- label?: string;
1354
- labelProps?: InputLabelProps$1;
1355
- helperText?: string;
1356
- hidden?: boolean;
1357
- type?: string;
1358
- helpTextProps?: InputLabelHelpProps$1;
1359
- validation?: any;
1360
- valueTransformer?: (valueToTransform: string) => string;
1361
- disabled?: boolean;
1362
- strengthIndicator?: boolean;
1363
- styleOverrides?: {
1364
- sxInputWrapper?: SxProps<Theme>;
1365
- sxInputBase?: SxProps<Theme>;
1366
- sxInputStack?: SxProps<Theme>;
1367
- };
1368
- }
1369
- type CreateFieldType<TFieldType extends string, TProps, TDefaultValue extends any = void> = {
1370
- fieldType: TFieldType;
1371
- } & BaseField & Omit<TProps, 'value' | 'defaultValue' | 'onChange' | 'name'> & (TDefaultValue extends void ? unknown : {
1372
- defaultValue?: TDefaultValue;
1373
- });
1374
- type FieldType = FieldTypes['fieldType'];
1375
-
1376
- declare const FormGenerator: FormGeneratorProps;
1377
-
1378
- declare const emailValidation: {
1379
- pattern: {
1380
- value: RegExp;
1381
- message: string;
1382
- };
1383
- };
1384
-
1385
- declare const chooseArticle: (word: string) => string;
1386
- declare const defaultInputValidation: (inputName?: string, isRequired?: boolean, maxLength?: number) => {
1387
- required?: string | undefined;
1388
- maxLength: {
1389
- value: number;
1390
- message: string;
1391
- };
1392
- };
1393
- declare const DEFAULT_MAX_INPUT_LENGTH: number;
1394
-
1395
- declare const passwordValidation: (min?: number) => {
1396
- minLength: {
1397
- value: number;
1398
- message: string;
1399
- };
1400
- equal: {
1401
- value: string;
1402
- message: string;
1403
- };
1404
- };
1405
-
1406
1460
  type ScreenSize = 'sm' | 'lg';
1407
1461
 
1408
1462
  interface Props extends PropsWithChildren {
@@ -1617,4 +1671,4 @@ declare module '@mui/system' {
1617
1671
  }
1618
1672
  }
1619
1673
 
1620
- export { AuthContainerSurface, AuthFormHeader, type AuthFormHeaderProps, Avatar, AvatarGroup, type AvatarGroupProps, type AvatarProps, Button, type ButtonProps, CheckboxGroup as CheckBoxGroup, Checkbox, type CheckboxGroupProps, type CheckboxProps, ColorBackgroundContainer, type ColorBackgroundContainerProps, type ColorRange$1 as ColorRange, type ColorRangeAlpha$1 as ColorRangeAlpha, CustomField, type CustomFieldProps, DEFAULT_MAX_INPUT_LENGTH, Differential, type DifferentialProps, DropdownMenu, type FieldType, type FieldTypes, FontWeight, FormControlLabel, FormGenerator, type FormGeneratorConfig, type FormGeneratorHandler, type GenericSizeMap, GridOverlay, type GridOverlayProps, Html, type HtmlProps, IconButton, IconButtonGroup, type IconButtonProps, InputFieldBase, type InputFieldBaseProps, InputLabel, InputLabelHelp, type InputLabelHelpProps, type InputLabelProps, Likert, type LikertProps, Link, type LinkProps, Loader, type LoaderProps, Logo, Markdown, MenuButton, type MenuButtonProps, Navigation, type NavigationProps, type NavigationSizing, Nudge, type NudgeProps, NumberField, type NumberFieldProps, Pill, type PillProps, Popper, type PopperProps, Portal, type PortalProps, PoweredByWatermarkLogo, Progress, type ProgressProps, Radio, RadioGroup, type RadioGroupProps, type RadioProps, Rank, type RankProps, RichTextField, type RichTextFieldProps, Select, type SelectProps, type SemanticColor, Slider, type SliderProps, SortableList, type SortableListProps, StarRating, type StarRatingProps, Surface, type SurfaceProps, Switch, type SwitchProps, Textarea as TextArea, TextBarDivider, type TextBarDividerProps, TextField, type TextFieldProps, type TextareaProps, ThemeProvider, Toast, type ToastProps, Tooltip, type TooltipProps, Typography, type TypographyProps, UserMenu, type UserMenuProps, backgroundCreator, base, blue, blueRamp, boxShadow, breakpoints, chooseArticle, darkNeutral, darkNeutralAlpha, defaultInputValidation, easing, elevation, elevationFilter, emailValidation, fonts, generateRamp, green, greenRamp, margin, neutral, neutralAlpha, neutralRamp, padding, passwordValidation, peach, peachRamp, purple, purpleRamp, radius, red, redRamp, semantic, space, useDropdownMenu, yellow, yellowRamp };
1674
+ export { AuthContainerSurface, AuthFormHeader, type AuthFormHeaderProps, Avatar, AvatarGroup, type AvatarGroupProps, type AvatarProps, Button, type ButtonProps, Checkbox, CheckboxGroup, type CheckboxGroupProps, type CheckboxProps, ColorBackgroundContainer, type ColorBackgroundContainerProps, type ColorRange$1 as ColorRange, type ColorRangeAlpha$1 as ColorRangeAlpha, CustomField, type CustomFieldProps, DEFAULT_MAX_INPUT_LENGTH, Differential, type DifferentialProps, DropdownMenu, type FieldType, type FieldTypes, FontWeight, FormControlLabel, FormGenerator, type FormGeneratorConfig, type FormGeneratorHandler, type GenericSizeMap, GridOverlay, type GridOverlayProps, Html, type HtmlProps, Icon, IconButton, IconButtonGroup, type IconButtonProps, type IconName, Image, type ImageProps, InputFieldBase, type InputFieldBaseProps, InputLabel, InputLabelHelp, type InputLabelHelpProps, type InputLabelProps, Likert, type LikertProps, Link, type LinkProps, Loader, type LoaderProps, Logo, Markdown, MenuButton, type MenuButtonProps, Navigation, type NavigationProps, type NavigationSizing, Nudge, type NudgeProps, NumberField, type NumberFieldProps, Pill, type PillProps, Popper, type PopperProps, Portal, type PortalProps, PoweredByWatermarkLogo, Progress, type ProgressProps, ProjectItem, type ProjectItemProps, Radio, RadioGroup, type RadioGroupProps, type RadioProps, Rank, type RankProps, RichTextField, type RichTextFieldProps, Select, type SelectProps, type SemanticColor, Slider, type SliderProps, SortableList, type SortableListProps, StarRating, type StarRatingProps, Surface, type SurfaceProps, Switch, type SwitchProps, TextBarDivider, type TextBarDividerProps, TextField, type TextFieldProps, Textarea, type TextareaProps, ThemeProvider, Toast, type ToastProps, Tooltip, type TooltipProps, Typography, type TypographyProps, UserMenu, type UserMenuProps, backgroundCreator, base, blue, blueRamp, boxShadow, breakpoints, chooseArticle, darkNeutral, darkNeutralAlpha, defaultInputValidation, easing, elevation, elevationFilter, emailValidation, fonts, generateRamp, green, greenRamp, iconSizeMap, margin, neutral, neutralAlpha, neutralRamp, padding, passwordValidation, peach, peachRamp, purple, purpleRamp, radius, red, redRamp, semantic, space, useDropdownMenu, yellow, yellowRamp };