@useloops/design-system 1.4.168 → 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/esm/index.js +2 -2
- package/dist/index.d.ts +212 -200
- package/dist/index.js +2 -2
- package/package.json +1 -2
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,
|
|
5
|
-
import react, { FunctionComponent,
|
|
6
|
-
import {
|
|
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
|
|
15
|
-
import
|
|
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 {
|
|
18
|
-
import {
|
|
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
|
-
|
|
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?:
|
|
682
|
+
icon?: IconName;
|
|
665
683
|
label: string;
|
|
666
684
|
onClick?: () => void;
|
|
667
685
|
selected?: boolean;
|
|
@@ -722,6 +740,40 @@ interface ProjectItemProps extends ProjectItemDataProps, ProjectItemViewType {
|
|
|
722
740
|
|
|
723
741
|
declare const ProjectItem: FunctionComponent<ProjectItemProps>;
|
|
724
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
|
+
|
|
725
777
|
interface AuthFormHeaderProps {
|
|
726
778
|
logo?: ReactElement | false | undefined;
|
|
727
779
|
headerText?: string;
|
|
@@ -745,7 +797,7 @@ interface AvatarGroupProps extends AvatarGroupProps$1 {
|
|
|
745
797
|
}
|
|
746
798
|
declare const AvatarGroup: FunctionComponent<AvatarGroupProps>;
|
|
747
799
|
|
|
748
|
-
type ButtonSizing = Exclude<GenericSizeMap
|
|
800
|
+
type ButtonSizing = Exclude<GenericSizeMap, 'none'>;
|
|
749
801
|
|
|
750
802
|
interface ButtonBaseProps extends ButtonProps$1 {
|
|
751
803
|
loading?: boolean;
|
|
@@ -886,6 +938,98 @@ interface FormControlLabelProps {
|
|
|
886
938
|
}
|
|
887
939
|
declare const FormControlLabel: FunctionComponent<FormControlLabelProps>;
|
|
888
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
|
+
|
|
889
1033
|
interface GridOverlayProps {
|
|
890
1034
|
breakpoint?: Breakpoint;
|
|
891
1035
|
}
|
|
@@ -945,6 +1089,10 @@ interface IconButtonGroupProps extends PropsWithChildren {
|
|
|
945
1089
|
}
|
|
946
1090
|
declare const IconButtonGroup: FunctionComponent<IconButtonGroupProps>;
|
|
947
1091
|
|
|
1092
|
+
interface ImageProps extends LazyLoadImageProps {
|
|
1093
|
+
}
|
|
1094
|
+
declare const Image: FunctionComponent<ImageProps>;
|
|
1095
|
+
|
|
948
1096
|
type InputFieldBaseProps = TextFieldProps$1;
|
|
949
1097
|
declare const InputFieldBase: _emotion_styled.StyledComponent<{
|
|
950
1098
|
variant?: _mui_material.TextFieldVariants | undefined;
|
|
@@ -1021,9 +1169,9 @@ interface MenuButtonProps {
|
|
|
1021
1169
|
danger?: boolean;
|
|
1022
1170
|
fullWidth?: boolean;
|
|
1023
1171
|
href?: string;
|
|
1024
|
-
icon?:
|
|
1172
|
+
icon?: IconName;
|
|
1025
1173
|
label: string;
|
|
1026
|
-
navigationSizing: NavigationSizing
|
|
1174
|
+
navigationSizing: NavigationSizing;
|
|
1027
1175
|
onClick?: () => void;
|
|
1028
1176
|
sizing?: MenuButtonSizing;
|
|
1029
1177
|
}
|
|
@@ -1033,11 +1181,11 @@ interface NudgeProps extends PropsWithChildren {
|
|
|
1033
1181
|
description: string;
|
|
1034
1182
|
notification?: boolean;
|
|
1035
1183
|
title: string;
|
|
1036
|
-
navigationSizing: NavigationSizing
|
|
1184
|
+
navigationSizing: NavigationSizing;
|
|
1037
1185
|
}
|
|
1038
1186
|
declare const Nudge: FunctionComponent<NudgeProps>;
|
|
1039
1187
|
|
|
1040
|
-
type NumberFieldProps = InputFieldBaseProps
|
|
1188
|
+
type NumberFieldProps = InputFieldBaseProps & {
|
|
1041
1189
|
hideActionButtons?: boolean;
|
|
1042
1190
|
max?: number;
|
|
1043
1191
|
min?: number;
|
|
@@ -1064,9 +1212,11 @@ declare const Pill: FunctionComponent<PillProps>;
|
|
|
1064
1212
|
type BindOn = 'trigger' | 'contextMenu' | 'toggle' | 'hover' | 'focus' | 'doubleClick';
|
|
1065
1213
|
interface PopperProps {
|
|
1066
1214
|
popperProps?: Partial<PopperProps$1>;
|
|
1067
|
-
clickAwayListenerProps?: Partial<ClickAwayListenerProps
|
|
1215
|
+
clickAwayListenerProps?: Partial<Omit<ClickAwayListenerProps, 'onClickAway'> & {
|
|
1216
|
+
onClickAway?: (event: MouseEvent | TouchEvent, state: PopupState) => void;
|
|
1217
|
+
}>;
|
|
1068
1218
|
transitionFadeProps?: Pick<FadeProps, 'easing' | 'timeout' | 'appear' | 'enter' | 'exit'>;
|
|
1069
|
-
surfaceProps?: SurfaceProps
|
|
1219
|
+
surfaceProps?: SurfaceProps;
|
|
1070
1220
|
bindOn?: BindOn[];
|
|
1071
1221
|
trigger: (state: PopupState) => ReactNode;
|
|
1072
1222
|
children: ReactElement;
|
|
@@ -1079,7 +1229,7 @@ declare const Portal: FunctionComponent<PortalProps>;
|
|
|
1079
1229
|
|
|
1080
1230
|
declare const PoweredByWatermarkLogo: () => react_jsx_runtime.JSX.Element;
|
|
1081
1231
|
|
|
1082
|
-
type ProgressSizing = Exclude<GenericSizeMap
|
|
1232
|
+
type ProgressSizing = Exclude<GenericSizeMap, 'none'>;
|
|
1083
1233
|
interface ProgressProps {
|
|
1084
1234
|
sizing?: ProgressSizing;
|
|
1085
1235
|
}
|
|
@@ -1120,6 +1270,41 @@ interface RadioGroupProps {
|
|
|
1120
1270
|
}
|
|
1121
1271
|
declare const RadioGroup: FunctionComponent<RadioGroupProps>;
|
|
1122
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
|
+
|
|
1123
1308
|
interface Option {
|
|
1124
1309
|
label: string;
|
|
1125
1310
|
value: string;
|
|
@@ -1173,41 +1358,6 @@ type RichTextFieldProps = Omit<InputFieldBaseProps, 'value' | 'onChange'> & {
|
|
|
1173
1358
|
};
|
|
1174
1359
|
declare const RichTextField: FunctionComponent<RichTextFieldProps>;
|
|
1175
1360
|
|
|
1176
|
-
type SelectOption = {
|
|
1177
|
-
label: string;
|
|
1178
|
-
value: string;
|
|
1179
|
-
};
|
|
1180
|
-
|
|
1181
|
-
type SelectOnChange = (event: SelectChangeEvent<any>, child: React.ReactNode) => void;
|
|
1182
|
-
type AutocompleteOnChange = (value: string | string[]) => void;
|
|
1183
|
-
type SelectProps = {
|
|
1184
|
-
selections: SelectOption[];
|
|
1185
|
-
autoComplete?: boolean;
|
|
1186
|
-
autoFocus?: boolean;
|
|
1187
|
-
disabled?: boolean;
|
|
1188
|
-
disablePortal?: boolean;
|
|
1189
|
-
error?: boolean;
|
|
1190
|
-
fullWidth?: boolean;
|
|
1191
|
-
id?: string;
|
|
1192
|
-
inputRef?: SelectProps$1['inputRef'];
|
|
1193
|
-
internalChange?: () => void;
|
|
1194
|
-
MenuProps?: SelectProps$1['MenuProps'];
|
|
1195
|
-
multi?: boolean;
|
|
1196
|
-
name: string;
|
|
1197
|
-
onBlur?: SelectProps$1['onBlur'];
|
|
1198
|
-
onChange?: SelectOnChange | AutocompleteOnChange;
|
|
1199
|
-
placeholder?: string | undefined;
|
|
1200
|
-
readOnly?: boolean;
|
|
1201
|
-
ref?: SelectProps$1['ref'];
|
|
1202
|
-
required?: boolean;
|
|
1203
|
-
selectOptionProps?: MenuItemProps$1;
|
|
1204
|
-
sizing?: 'xs' | 'md' | 'lg';
|
|
1205
|
-
sx?: SelectProps$1['sx'];
|
|
1206
|
-
value?: SelectProps$1['value'];
|
|
1207
|
-
renderListItem?: (value: string, label: string) => ReactElement;
|
|
1208
|
-
};
|
|
1209
|
-
declare const Select: FunctionComponent<SelectProps>;
|
|
1210
|
-
|
|
1211
1361
|
interface SliderProps {
|
|
1212
1362
|
labelLeft: string;
|
|
1213
1363
|
labelRight: string;
|
|
@@ -1236,18 +1386,6 @@ interface StarRatingProps {
|
|
|
1236
1386
|
}
|
|
1237
1387
|
declare const StarRating: FunctionComponent<StarRatingProps>;
|
|
1238
1388
|
|
|
1239
|
-
type SurfaceVariation = 'default' | 'sunken' | 'raised' | 'overlay';
|
|
1240
|
-
type BorderRadius = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
|
|
1241
|
-
|
|
1242
|
-
interface SurfaceProps extends PropsWithChildren {
|
|
1243
|
-
variation?: SurfaceVariation;
|
|
1244
|
-
borderradius?: BorderRadius;
|
|
1245
|
-
sx?: SxProps<Theme>;
|
|
1246
|
-
ref?: PaperProps['ref'];
|
|
1247
|
-
component?: PaperProps['component'];
|
|
1248
|
-
}
|
|
1249
|
-
declare const Surface: FC<SurfaceProps>;
|
|
1250
|
-
|
|
1251
1389
|
interface StyledSwitchProps extends SwitchProps$1 {
|
|
1252
1390
|
sizing?: 'sm' | 'lg';
|
|
1253
1391
|
}
|
|
@@ -1263,7 +1401,7 @@ interface SwitchProps extends StyledSwitchProps {
|
|
|
1263
1401
|
}
|
|
1264
1402
|
declare const Switch: FunctionComponent<SwitchProps>;
|
|
1265
1403
|
|
|
1266
|
-
type TextareaProps = InputFieldBaseProps
|
|
1404
|
+
type TextareaProps = InputFieldBaseProps & {
|
|
1267
1405
|
startAdornment?: ReactElement;
|
|
1268
1406
|
endAdornment?: ReactElement;
|
|
1269
1407
|
internalChange?: () => void;
|
|
@@ -1286,7 +1424,7 @@ interface TextBarDividerProps {
|
|
|
1286
1424
|
}
|
|
1287
1425
|
declare const TextBarDivider: FunctionComponent<TextBarDividerProps>;
|
|
1288
1426
|
|
|
1289
|
-
type TextFieldProps = InputFieldBaseProps
|
|
1427
|
+
type TextFieldProps = InputFieldBaseProps & {
|
|
1290
1428
|
startAdornment?: ReactElement;
|
|
1291
1429
|
endAdornment?: ReactElement;
|
|
1292
1430
|
internalChange?: () => void;
|
|
@@ -1319,132 +1457,6 @@ interface MenuItem {
|
|
|
1319
1457
|
}
|
|
1320
1458
|
declare const UserMenu: FunctionComponent<UserMenuProps>;
|
|
1321
1459
|
|
|
1322
|
-
interface BackgroundOptions {
|
|
1323
|
-
texture?: 'none' | 'noise1';
|
|
1324
|
-
gradient?: 'tone1' | 'tone2' | 'tone3' | 'tone4';
|
|
1325
|
-
}
|
|
1326
|
-
declare const backgroundCreator: (theme: Theme, options: BackgroundOptions) => string;
|
|
1327
|
-
|
|
1328
|
-
/**
|
|
1329
|
-
* Form Generator Core Types
|
|
1330
|
-
*/
|
|
1331
|
-
interface FormGeneratorHandler {
|
|
1332
|
-
set: () => void;
|
|
1333
|
-
reset: () => void;
|
|
1334
|
-
submit: () => void;
|
|
1335
|
-
values: () => void;
|
|
1336
|
-
valid: () => void;
|
|
1337
|
-
errors: () => void;
|
|
1338
|
-
triggerFormValidation: () => Promise<unknown>;
|
|
1339
|
-
}
|
|
1340
|
-
type FormGeneratorProps = FunctionComponent<{
|
|
1341
|
-
ref?: any;
|
|
1342
|
-
formConfig: FormGeneratorConfig;
|
|
1343
|
-
onFormSubmit?: SubmitHandler<any>;
|
|
1344
|
-
onFormChange?: (formData: any) => void;
|
|
1345
|
-
submitButton?: ReactElement;
|
|
1346
|
-
secondaryButton?: ReactElement;
|
|
1347
|
-
}>;
|
|
1348
|
-
interface FormGeneratorConfig {
|
|
1349
|
-
fields: FieldTypes[];
|
|
1350
|
-
autoComplete?: 'off';
|
|
1351
|
-
mode?: 'onSubmit' | 'onBlur' | 'onChange';
|
|
1352
|
-
formId?: string;
|
|
1353
|
-
reValidateMode?: 'onSubmit' | 'onBlur' | 'onChange';
|
|
1354
|
-
styleOverrides?: {
|
|
1355
|
-
sxForm?: SxProps<Theme>;
|
|
1356
|
-
sxButtons?: SxProps<Theme>;
|
|
1357
|
-
sxStack?: SxProps<Theme>;
|
|
1358
|
-
};
|
|
1359
|
-
}
|
|
1360
|
-
/**
|
|
1361
|
-
* Field Types
|
|
1362
|
-
*/
|
|
1363
|
-
type FieldTypes = CheckboxType | CheckboxGroupType | SwitchType | TextareaType | SelectType | TextFieldType | SliderType | DifferentialType | RichTextFieldType | LikertType | RadioGroupType | DragAndDropRankingType | NumberFieldType | StarRatingType | HTMLType | CustomFieldType;
|
|
1364
|
-
type TextFieldType = CreateFieldType<'textfield', TextFieldProps$2, string>;
|
|
1365
|
-
type NumberFieldType = CreateFieldType<'numberfield', NumberFieldProps$1, number>;
|
|
1366
|
-
type TextareaType = CreateFieldType<'textarea', TextareaProps$1, string>;
|
|
1367
|
-
type SelectType = CreateFieldType<'select', SelectProps$2, SelectProps$2['value']>;
|
|
1368
|
-
type CheckboxType = CreateFieldType<'checkbox', CheckboxProps$2, NonNullable<CheckboxProps$2['value']>>;
|
|
1369
|
-
type CheckboxGroupType = CreateFieldType<'checkboxGroup', CheckboxGroupProps$1, string[]>;
|
|
1370
|
-
type SwitchType = CreateFieldType<'switch', SwitchProps$2, NonNullable<SwitchProps$2['checked']>>;
|
|
1371
|
-
type SliderType = CreateFieldType<'slider', SliderProps$1, NonNullable<SliderProps$1['value']>>;
|
|
1372
|
-
type DifferentialType = CreateFieldType<'differential', DifferentialProps$1, NonNullable<DifferentialProps$1['value']>>;
|
|
1373
|
-
type LikertType = CreateFieldType<'likert', LikertProps$1, LikertProps$1['value']>;
|
|
1374
|
-
type RadioGroupType = CreateFieldType<'radioGroup', RadioGroupProps$1, RadioGroupProps$1['value']>;
|
|
1375
|
-
type DragAndDropRankingType = CreateFieldType<'ranking', RankProps$1, NonNullable<RankProps$1['value']>>;
|
|
1376
|
-
type RichTextFieldType = CreateFieldType<'richTextfield', RichTextFieldProps$1, RichTextFieldProps$1['value']>;
|
|
1377
|
-
type StarRatingType = CreateFieldType<'starRating', StarRatingProps$1, NonNullable<StarRatingProps$1['value']>>;
|
|
1378
|
-
type HTMLType = {
|
|
1379
|
-
fieldType: 'html';
|
|
1380
|
-
content: HtmlProps$1['children'];
|
|
1381
|
-
defaultValue?: never;
|
|
1382
|
-
} & BaseField;
|
|
1383
|
-
type CustomFieldType = {
|
|
1384
|
-
fieldType: 'customfield';
|
|
1385
|
-
defaultValue?: CustomFieldProps$1['value'];
|
|
1386
|
-
} & BaseField & CustomFieldProps$1;
|
|
1387
|
-
/**
|
|
1388
|
-
* Field Type Utilities
|
|
1389
|
-
*/
|
|
1390
|
-
interface BaseField {
|
|
1391
|
-
name: string;
|
|
1392
|
-
ref?: any;
|
|
1393
|
-
multiline?: boolean;
|
|
1394
|
-
content?: ReactElement;
|
|
1395
|
-
label?: string;
|
|
1396
|
-
labelProps?: InputLabelProps$1;
|
|
1397
|
-
helperText?: string;
|
|
1398
|
-
hidden?: boolean;
|
|
1399
|
-
type?: string;
|
|
1400
|
-
helpTextProps?: InputLabelHelpProps$1;
|
|
1401
|
-
validation?: any;
|
|
1402
|
-
valueTransformer?: (valueToTransform: string) => string;
|
|
1403
|
-
disabled?: boolean;
|
|
1404
|
-
strengthIndicator?: boolean;
|
|
1405
|
-
styleOverrides?: {
|
|
1406
|
-
sxInputWrapper?: SxProps<Theme>;
|
|
1407
|
-
sxInputBase?: SxProps<Theme>;
|
|
1408
|
-
sxInputStack?: SxProps<Theme>;
|
|
1409
|
-
};
|
|
1410
|
-
}
|
|
1411
|
-
type CreateFieldType<TFieldType extends string, TProps, TDefaultValue extends any = void> = {
|
|
1412
|
-
fieldType: TFieldType;
|
|
1413
|
-
} & BaseField & Omit<TProps, 'value' | 'defaultValue' | 'onChange' | 'name'> & (TDefaultValue extends void ? unknown : {
|
|
1414
|
-
defaultValue?: TDefaultValue;
|
|
1415
|
-
});
|
|
1416
|
-
type FieldType = FieldTypes['fieldType'];
|
|
1417
|
-
|
|
1418
|
-
declare const FormGenerator: FormGeneratorProps;
|
|
1419
|
-
|
|
1420
|
-
declare const emailValidation: {
|
|
1421
|
-
pattern: {
|
|
1422
|
-
value: RegExp;
|
|
1423
|
-
message: string;
|
|
1424
|
-
};
|
|
1425
|
-
};
|
|
1426
|
-
|
|
1427
|
-
declare const chooseArticle: (word: string) => string;
|
|
1428
|
-
declare const defaultInputValidation: (inputName?: string, isRequired?: boolean, maxLength?: number) => {
|
|
1429
|
-
required?: string | undefined;
|
|
1430
|
-
maxLength: {
|
|
1431
|
-
value: number;
|
|
1432
|
-
message: string;
|
|
1433
|
-
};
|
|
1434
|
-
};
|
|
1435
|
-
declare const DEFAULT_MAX_INPUT_LENGTH: number;
|
|
1436
|
-
|
|
1437
|
-
declare const passwordValidation: (min?: number) => {
|
|
1438
|
-
minLength: {
|
|
1439
|
-
value: number;
|
|
1440
|
-
message: string;
|
|
1441
|
-
};
|
|
1442
|
-
equal: {
|
|
1443
|
-
value: string;
|
|
1444
|
-
message: string;
|
|
1445
|
-
};
|
|
1446
|
-
};
|
|
1447
|
-
|
|
1448
1460
|
type ScreenSize = 'sm' | 'lg';
|
|
1449
1461
|
|
|
1450
1462
|
interface Props extends PropsWithChildren {
|
|
@@ -1659,4 +1671,4 @@ declare module '@mui/system' {
|
|
|
1659
1671
|
}
|
|
1660
1672
|
}
|
|
1661
1673
|
|
|
1662
|
-
export { AuthContainerSurface, AuthFormHeader, type AuthFormHeaderProps, Avatar, AvatarGroup, type AvatarGroupProps, type AvatarProps, Button, type ButtonProps,
|
|
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 };
|