@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/esm/index.js +2 -2
- package/dist/index.d.ts +254 -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;
|
|
@@ -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
|
|
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?:
|
|
1172
|
+
icon?: IconName;
|
|
983
1173
|
label: string;
|
|
984
|
-
navigationSizing: NavigationSizing
|
|
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
|
|
1184
|
+
navigationSizing: NavigationSizing;
|
|
995
1185
|
}
|
|
996
1186
|
declare const Nudge: FunctionComponent<NudgeProps>;
|
|
997
1187
|
|
|
998
|
-
type NumberFieldProps = InputFieldBaseProps
|
|
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
|
|
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
|
|
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
|
|
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
|
|
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,
|
|
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 };
|