react-better-html 1.1.287 → 1.1.289
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.mts +107 -99
- package/dist/index.d.ts +107 -99
- package/dist/index.js +79 -41
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +89 -50
- package/dist/index.mjs.map +1 -1
- package/package.json +1 -1
package/dist/index.d.mts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { OmitProps, IconName, AnyOtherString, AssetName, LoaderName, Country, Color, BetterCoreProviderConfig, DeepPartialRecord, BetterCoreConfig,
|
|
1
|
+
import { OmitProps, IconName, AnyOtherString, AssetName, LoaderName, Country, PartialRecord, Color, BetterCoreProviderConfig, DeepPartialRecord, BetterCoreConfig, PickValue } from 'react-better-core';
|
|
2
2
|
export { API, APIConfigItem, APIEndpointConfig, APIError, APIResponse, AnyOtherString, AssetName, AssetsConfig, Color, ColorName, ColorTheme, Colors, Country, DeepPartialRecord, ExcludeOptions, HttpHeaders as HttpHeader, HttpMethod, IconName, IconsConfig, LoaderConfig, LoaderName, OmitProps, PartialRecord, PickAllRequired, PickValue, Styles, Theme, ThemeConfig, Unsubscribe, UrlQuery, calculateColorContrast, colorThemeControls, countries, darkenColor, desaturateColor, eventPreventDefault, eventPreventStop, eventStopPropagation, formatPhoneNumber, generateApi, generateEventEmitter, generateRandomString, getPluralWord, isApiError, lightenColor, loaderControls, log, saturateColor, useBooleanState, useDebounceState, useLoader, useLoaderControls, useTheme } from 'react-better-core';
|
|
3
3
|
import * as react from 'react';
|
|
4
4
|
import { ComponentProps, ReactNode } from 'react';
|
|
@@ -70,6 +70,7 @@ type ButtonComponent = {
|
|
|
70
70
|
<Value>(props: ButtonProps<Value>): React.ReactElement;
|
|
71
71
|
secondary: <Value>(props: ButtonProps<Value>) => React.ReactElement;
|
|
72
72
|
destructive: <Value>(props: ButtonProps<Value>) => React.ReactElement;
|
|
73
|
+
text: <Value>(props: ButtonProps<Value>) => React.ReactElement;
|
|
73
74
|
icon: <Value>(props: OmitProps<ButtonProps<Value>, "icon" | "width" | "height" | "isSmall"> & {
|
|
74
75
|
icon: IconName | AnyOtherString;
|
|
75
76
|
/** @default 16 */
|
|
@@ -89,6 +90,7 @@ declare const ButtonComponent: ButtonComponent;
|
|
|
89
90
|
declare const Button: typeof ButtonComponent & {
|
|
90
91
|
secondary: typeof ButtonComponent.secondary;
|
|
91
92
|
destructive: typeof ButtonComponent.destructive;
|
|
93
|
+
text: typeof ButtonComponent.text;
|
|
92
94
|
icon: typeof ButtonComponent.icon;
|
|
93
95
|
upload: typeof ButtonComponent.upload;
|
|
94
96
|
};
|
|
@@ -104,6 +106,7 @@ type InputFieldProps = {
|
|
|
104
106
|
labelGap?: React.CSSProperties["gap"];
|
|
105
107
|
errorText?: string;
|
|
106
108
|
infoText?: string;
|
|
109
|
+
infoTextColor?: React.CSSProperties["color"];
|
|
107
110
|
leftIcon?: IconName | AnyOtherString;
|
|
108
111
|
rightIcon?: IconName | AnyOtherString;
|
|
109
112
|
prefix?: React.ReactNode;
|
|
@@ -319,6 +322,7 @@ type DropdownProps<Value = unknown, Data = unknown> = {
|
|
|
319
322
|
labelGap?: React.CSSProperties["gap"];
|
|
320
323
|
errorText?: string;
|
|
321
324
|
infoText?: string;
|
|
325
|
+
infoTextColor?: React.CSSProperties["color"];
|
|
322
326
|
/** @default false */
|
|
323
327
|
required?: boolean;
|
|
324
328
|
name?: string;
|
|
@@ -387,6 +391,7 @@ type InternalToggleInputProps<Value> = {
|
|
|
387
391
|
textAdvanced?: React.ReactNode;
|
|
388
392
|
errorText?: string;
|
|
389
393
|
infoText?: string;
|
|
394
|
+
infoTextColor?: React.CSSProperties["color"];
|
|
390
395
|
/** @default 26 */
|
|
391
396
|
size?: number;
|
|
392
397
|
value?: Value;
|
|
@@ -466,6 +471,102 @@ declare const _default$2: ImageComponent & {
|
|
|
466
471
|
profileImage: typeof Image.profileImage;
|
|
467
472
|
};
|
|
468
473
|
|
|
474
|
+
declare function usePageResize(): {
|
|
475
|
+
width: number;
|
|
476
|
+
height: number;
|
|
477
|
+
};
|
|
478
|
+
declare function usePageScroll(): {
|
|
479
|
+
scrollX: number;
|
|
480
|
+
scrollY: number;
|
|
481
|
+
};
|
|
482
|
+
declare function useMediaQuery(): {
|
|
483
|
+
screenWidth: number;
|
|
484
|
+
size320: boolean;
|
|
485
|
+
size400: boolean;
|
|
486
|
+
size500: boolean;
|
|
487
|
+
size600: boolean;
|
|
488
|
+
size700: boolean;
|
|
489
|
+
size800: boolean;
|
|
490
|
+
size900: boolean;
|
|
491
|
+
size1000: boolean;
|
|
492
|
+
size1100: boolean;
|
|
493
|
+
size1200: boolean;
|
|
494
|
+
size1300: boolean;
|
|
495
|
+
size1400: boolean;
|
|
496
|
+
size1500: boolean;
|
|
497
|
+
size1600: boolean;
|
|
498
|
+
};
|
|
499
|
+
type FormFieldValue = string | number | boolean;
|
|
500
|
+
declare function useForm<FormFields extends Record<string | number, FormFieldValue | FormFieldValue[] | undefined>>(options: {
|
|
501
|
+
defaultValues: FormFields;
|
|
502
|
+
requiredFields?: (keyof FormFields)[];
|
|
503
|
+
onSubmit?: (values: FormFields) => void | Promise<void>;
|
|
504
|
+
validate?: (values: FormFields) => PartialRecord<keyof FormFields, string>;
|
|
505
|
+
}): {
|
|
506
|
+
values: FormFields;
|
|
507
|
+
errors: Partial<Record<keyof FormFields, string>>;
|
|
508
|
+
isSubmitting: boolean;
|
|
509
|
+
setFieldValue: <FieldName extends keyof FormFields>(field: FieldName, value: FormFields[FieldName] | undefined) => void;
|
|
510
|
+
setFieldsValue: (values: Partial<FormFields>) => void;
|
|
511
|
+
getInputFieldProps: <FieldName extends keyof FormFields>(field: FieldName) => ComponentPropWithRef<HTMLInputElement, InputFieldProps>;
|
|
512
|
+
getTextAreaProps: <FieldName extends keyof FormFields>(field: FieldName) => ComponentPropWithRef<HTMLTextAreaElement, TextareaFieldProps>;
|
|
513
|
+
getDropdownFieldProps: <FieldName extends keyof FormFields>(field: FieldName) => any;
|
|
514
|
+
getCheckboxProps: <FieldName extends keyof FormFields>(field: FieldName) => ComponentPropWithRef<ToggleInputRef, ToggleInputProps<FormFields[FieldName]>>;
|
|
515
|
+
getRadioButtonProps: <FieldName extends keyof FormFields>(field: FieldName, value: FormFields[FieldName]) => ComponentPropWithRef<ToggleInputRef, ToggleInputProps<FormFields[FieldName]>>;
|
|
516
|
+
getSwitchProps: <FieldName extends keyof FormFields>(field: FieldName) => ComponentPropWithRef<ToggleInputRef, ToggleInputProps<FormFields[FieldName]>>;
|
|
517
|
+
focusField: (field: keyof FormFields) => void;
|
|
518
|
+
inputFieldRefs: Record<keyof FormFields, HTMLInputElement | undefined>;
|
|
519
|
+
textAreaRefs: Record<keyof FormFields, HTMLTextAreaElement | undefined>;
|
|
520
|
+
dropdownRefs: Record<keyof FormFields, HTMLDivElement | undefined>;
|
|
521
|
+
toggleInputRefs: Record<keyof FormFields, ToggleInputRef | undefined>;
|
|
522
|
+
validate: () => {};
|
|
523
|
+
onSubmit: (event?: React.FormEvent<HTMLFormElement>) => Promise<void>;
|
|
524
|
+
reset: () => void;
|
|
525
|
+
requiredFields: (keyof FormFields)[] | undefined;
|
|
526
|
+
isDirty: boolean;
|
|
527
|
+
isValid: boolean;
|
|
528
|
+
canSubmit: boolean;
|
|
529
|
+
};
|
|
530
|
+
declare function useUrlQuery(): {
|
|
531
|
+
setQuery: (query: Record<string, string | number>, keepHistory?: boolean) => void;
|
|
532
|
+
getQuery: (name: string) => string | null;
|
|
533
|
+
removeQuery: (name: string, keepHistory?: boolean) => void;
|
|
534
|
+
};
|
|
535
|
+
|
|
536
|
+
type FormProps = {
|
|
537
|
+
form?: OmitProps<ReturnType<typeof useForm>, "focusField">;
|
|
538
|
+
name?: string;
|
|
539
|
+
submitButtonText?: string;
|
|
540
|
+
submitButtonLoaderName?: LoaderName | AnyOtherString;
|
|
541
|
+
submitButtonIsLoading?: boolean;
|
|
542
|
+
submitButtonId?: string;
|
|
543
|
+
/** @default false */
|
|
544
|
+
submitButtonIsDisabled?: boolean;
|
|
545
|
+
cancelButtonText?: string;
|
|
546
|
+
cancelButtonLoaderName?: LoaderName | AnyOtherString;
|
|
547
|
+
cancelButtonIsLoading?: boolean;
|
|
548
|
+
cancelButtonId?: string;
|
|
549
|
+
/** @default false */
|
|
550
|
+
cancelButtonIsDisabled?: boolean;
|
|
551
|
+
/** @default "right" */
|
|
552
|
+
actionButtonsLocation?: "left" | "center" | "right";
|
|
553
|
+
gap?: React.CSSProperties["gap"];
|
|
554
|
+
/** @default false */
|
|
555
|
+
isDestructive?: boolean;
|
|
556
|
+
/** @default false */
|
|
557
|
+
withDividers?: boolean;
|
|
558
|
+
renderActionButtons?: React.ReactNode;
|
|
559
|
+
onClickCancel?: () => void;
|
|
560
|
+
onSubmit?: (event: React.FormEvent<HTMLFormElement>) => void;
|
|
561
|
+
id?: React.ComponentProps<"form">["id"];
|
|
562
|
+
children?: React.ReactNode;
|
|
563
|
+
} & ComponentMarginProps;
|
|
564
|
+
type FormComponentType = {
|
|
565
|
+
(props: ComponentPropWithRef<HTMLFormElement, FormProps>): React.ReactElement;
|
|
566
|
+
};
|
|
567
|
+
declare const FormComponent: FormComponentType;
|
|
568
|
+
declare const Form: typeof FormComponent & {};
|
|
569
|
+
|
|
469
570
|
type ComponentStyleConfig<ComponentProps, Subcomponents extends string> = {
|
|
470
571
|
[key in Subcomponents]?: Partial<ComponentProps>;
|
|
471
572
|
};
|
|
@@ -482,7 +583,7 @@ type BetterHtmlConfig = {
|
|
|
482
583
|
language: Language | undefined;
|
|
483
584
|
components: {
|
|
484
585
|
button?: {
|
|
485
|
-
style?: ComponentStyleConfig<ButtonProps, "default" | "secondary" | "destructive" | "icon" | "upload">;
|
|
586
|
+
style?: ComponentStyleConfig<ButtonProps, "default" | "secondary" | "destructive" | "text" | "icon" | "upload">;
|
|
486
587
|
tagReplacement?: ComponentTagReplacementConfig<"buttonComponent" | "linkComponent">;
|
|
487
588
|
};
|
|
488
589
|
inputField?: {
|
|
@@ -515,6 +616,9 @@ type BetterHtmlConfig = {
|
|
|
515
616
|
chip?: {
|
|
516
617
|
style?: ComponentStyleConfig<ChipProps, "default" | "colored">;
|
|
517
618
|
};
|
|
619
|
+
form?: {
|
|
620
|
+
style?: ComponentStyleConfig<FormProps, "default">;
|
|
621
|
+
};
|
|
518
622
|
};
|
|
519
623
|
};
|
|
520
624
|
|
|
@@ -595,68 +699,6 @@ declare const isMobileDevice: boolean;
|
|
|
595
699
|
|
|
596
700
|
type BrowserName = "firefox" | "chrome" | "safari" | "edge" | "opera";
|
|
597
701
|
|
|
598
|
-
declare function usePageResize(): {
|
|
599
|
-
width: number;
|
|
600
|
-
height: number;
|
|
601
|
-
};
|
|
602
|
-
declare function usePageScroll(): {
|
|
603
|
-
scrollX: number;
|
|
604
|
-
scrollY: number;
|
|
605
|
-
};
|
|
606
|
-
declare function useMediaQuery(): {
|
|
607
|
-
screenWidth: number;
|
|
608
|
-
size320: boolean;
|
|
609
|
-
size400: boolean;
|
|
610
|
-
size500: boolean;
|
|
611
|
-
size600: boolean;
|
|
612
|
-
size700: boolean;
|
|
613
|
-
size800: boolean;
|
|
614
|
-
size900: boolean;
|
|
615
|
-
size1000: boolean;
|
|
616
|
-
size1100: boolean;
|
|
617
|
-
size1200: boolean;
|
|
618
|
-
size1300: boolean;
|
|
619
|
-
size1400: boolean;
|
|
620
|
-
size1500: boolean;
|
|
621
|
-
size1600: boolean;
|
|
622
|
-
};
|
|
623
|
-
type FormFieldValue = string | number | boolean;
|
|
624
|
-
declare function useForm<FormFields extends Record<string | number, FormFieldValue | FormFieldValue[] | undefined>>(options: {
|
|
625
|
-
defaultValues: FormFields;
|
|
626
|
-
requiredFields?: (keyof FormFields)[];
|
|
627
|
-
onSubmit?: (values: FormFields) => void | Promise<void>;
|
|
628
|
-
validate?: (values: FormFields) => PartialRecord<keyof FormFields, string>;
|
|
629
|
-
}): {
|
|
630
|
-
values: FormFields;
|
|
631
|
-
errors: Partial<Record<keyof FormFields, string>>;
|
|
632
|
-
isSubmitting: boolean;
|
|
633
|
-
setFieldValue: <FieldName extends keyof FormFields>(field: FieldName, value: FormFields[FieldName] | undefined) => void;
|
|
634
|
-
setFieldsValue: (values: Partial<FormFields>) => void;
|
|
635
|
-
getInputFieldProps: <FieldName extends keyof FormFields>(field: FieldName) => ComponentPropWithRef<HTMLInputElement, InputFieldProps>;
|
|
636
|
-
getTextAreaProps: <FieldName extends keyof FormFields>(field: FieldName) => ComponentPropWithRef<HTMLTextAreaElement, TextareaFieldProps>;
|
|
637
|
-
getDropdownFieldProps: <FieldName extends keyof FormFields>(field: FieldName) => any;
|
|
638
|
-
getCheckboxProps: <FieldName extends keyof FormFields>(field: FieldName) => ComponentPropWithRef<ToggleInputRef, ToggleInputProps<FormFields[FieldName]>>;
|
|
639
|
-
getRadioButtonProps: <FieldName extends keyof FormFields>(field: FieldName, value: FormFields[FieldName]) => ComponentPropWithRef<ToggleInputRef, ToggleInputProps<FormFields[FieldName]>>;
|
|
640
|
-
getSwitchProps: <FieldName extends keyof FormFields>(field: FieldName) => ComponentPropWithRef<ToggleInputRef, ToggleInputProps<FormFields[FieldName]>>;
|
|
641
|
-
focusField: (field: keyof FormFields) => void;
|
|
642
|
-
inputFieldRefs: Record<keyof FormFields, HTMLInputElement | undefined>;
|
|
643
|
-
textAreaRefs: Record<keyof FormFields, HTMLTextAreaElement | undefined>;
|
|
644
|
-
dropdownRefs: Record<keyof FormFields, HTMLDivElement | undefined>;
|
|
645
|
-
toggleInputRefs: Record<keyof FormFields, ToggleInputRef | undefined>;
|
|
646
|
-
validate: () => {};
|
|
647
|
-
onSubmit: (event?: React.FormEvent<HTMLFormElement>) => Promise<void>;
|
|
648
|
-
reset: () => void;
|
|
649
|
-
requiredFields: (keyof FormFields)[] | undefined;
|
|
650
|
-
isDirty: boolean;
|
|
651
|
-
isValid: boolean;
|
|
652
|
-
canSubmit: boolean;
|
|
653
|
-
};
|
|
654
|
-
declare function useUrlQuery(): {
|
|
655
|
-
setQuery: (query: Record<string, string | number>, keepHistory?: boolean) => void;
|
|
656
|
-
getQuery: (name: string) => string | null;
|
|
657
|
-
removeQuery: (name: string, keepHistory?: boolean) => void;
|
|
658
|
-
};
|
|
659
|
-
|
|
660
702
|
declare const getBrowser: () => BrowserName | undefined;
|
|
661
703
|
declare const getFormErrorObject: <FormFields extends ReturnType<typeof useForm>["values"]>(formValues: FormFields) => PartialRecord<keyof FormFields, string>;
|
|
662
704
|
|
|
@@ -672,7 +714,7 @@ declare const sideMenuControls: {
|
|
|
672
714
|
close: () => void;
|
|
673
715
|
toggleOpened: () => void;
|
|
674
716
|
};
|
|
675
|
-
declare const filterHover: () => Record<"z05" | "z1" | "z2" | "z3", React.CSSProperties["filter"]>;
|
|
717
|
+
declare const filterHover: () => Record<"z05" | "z1" | "z2" | "z3" | "b05" | "b1" | "b2" | "b3", React.CSSProperties["filter"]>;
|
|
676
718
|
|
|
677
719
|
declare function generateLocalStorage<LocalStorage extends object>(): {
|
|
678
720
|
setItem: <StorageName extends keyof LocalStorage>(name: StorageName, value: LocalStorage[StorageName]) => void;
|
|
@@ -839,40 +881,6 @@ declare const PageHolder: typeof PageHolderComponent & {
|
|
|
839
881
|
center: typeof PageHolderComponent.center;
|
|
840
882
|
};
|
|
841
883
|
|
|
842
|
-
type FormProps = {
|
|
843
|
-
form?: OmitProps<ReturnType<typeof useForm>, "focusField">;
|
|
844
|
-
name?: string;
|
|
845
|
-
submitButtonText?: string;
|
|
846
|
-
submitButtonLoaderName?: LoaderName | AnyOtherString;
|
|
847
|
-
submitButtonIsLoading?: boolean;
|
|
848
|
-
submitButtonId?: string;
|
|
849
|
-
/** @default false */
|
|
850
|
-
submitButtonIsDisabled?: boolean;
|
|
851
|
-
cancelButtonText?: string;
|
|
852
|
-
cancelButtonLoaderName?: LoaderName | AnyOtherString;
|
|
853
|
-
cancelButtonIsLoading?: boolean;
|
|
854
|
-
cancelButtonId?: string;
|
|
855
|
-
/** @default false */
|
|
856
|
-
cancelButtonIsDisabled?: boolean;
|
|
857
|
-
/** @default "right" */
|
|
858
|
-
actionButtonsLocation?: "left" | "center" | "right";
|
|
859
|
-
gap?: React.CSSProperties["gap"];
|
|
860
|
-
/** @default false */
|
|
861
|
-
isDestructive?: boolean;
|
|
862
|
-
/** @default false */
|
|
863
|
-
withDividers?: boolean;
|
|
864
|
-
renderActionButtons?: React.ReactNode;
|
|
865
|
-
onClickCancel?: () => void;
|
|
866
|
-
onSubmit?: (event: React.FormEvent<HTMLFormElement>) => void;
|
|
867
|
-
id?: React.ComponentProps<"form">["id"];
|
|
868
|
-
children?: React.ReactNode;
|
|
869
|
-
} & ComponentMarginProps;
|
|
870
|
-
type FormComponentType = {
|
|
871
|
-
(props: ComponentPropWithRef<HTMLFormElement, FormProps>): React.ReactElement;
|
|
872
|
-
};
|
|
873
|
-
declare const FormComponent: FormComponentType;
|
|
874
|
-
declare const Form: typeof FormComponent & {};
|
|
875
|
-
|
|
876
884
|
type FormRowProps = {
|
|
877
885
|
oneItemOnly?: boolean;
|
|
878
886
|
/**
|
package/dist/index.d.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { OmitProps, IconName, AnyOtherString, AssetName, LoaderName, Country, Color, BetterCoreProviderConfig, DeepPartialRecord, BetterCoreConfig,
|
|
1
|
+
import { OmitProps, IconName, AnyOtherString, AssetName, LoaderName, Country, PartialRecord, Color, BetterCoreProviderConfig, DeepPartialRecord, BetterCoreConfig, PickValue } from 'react-better-core';
|
|
2
2
|
export { API, APIConfigItem, APIEndpointConfig, APIError, APIResponse, AnyOtherString, AssetName, AssetsConfig, Color, ColorName, ColorTheme, Colors, Country, DeepPartialRecord, ExcludeOptions, HttpHeaders as HttpHeader, HttpMethod, IconName, IconsConfig, LoaderConfig, LoaderName, OmitProps, PartialRecord, PickAllRequired, PickValue, Styles, Theme, ThemeConfig, Unsubscribe, UrlQuery, calculateColorContrast, colorThemeControls, countries, darkenColor, desaturateColor, eventPreventDefault, eventPreventStop, eventStopPropagation, formatPhoneNumber, generateApi, generateEventEmitter, generateRandomString, getPluralWord, isApiError, lightenColor, loaderControls, log, saturateColor, useBooleanState, useDebounceState, useLoader, useLoaderControls, useTheme } from 'react-better-core';
|
|
3
3
|
import * as react from 'react';
|
|
4
4
|
import { ComponentProps, ReactNode } from 'react';
|
|
@@ -70,6 +70,7 @@ type ButtonComponent = {
|
|
|
70
70
|
<Value>(props: ButtonProps<Value>): React.ReactElement;
|
|
71
71
|
secondary: <Value>(props: ButtonProps<Value>) => React.ReactElement;
|
|
72
72
|
destructive: <Value>(props: ButtonProps<Value>) => React.ReactElement;
|
|
73
|
+
text: <Value>(props: ButtonProps<Value>) => React.ReactElement;
|
|
73
74
|
icon: <Value>(props: OmitProps<ButtonProps<Value>, "icon" | "width" | "height" | "isSmall"> & {
|
|
74
75
|
icon: IconName | AnyOtherString;
|
|
75
76
|
/** @default 16 */
|
|
@@ -89,6 +90,7 @@ declare const ButtonComponent: ButtonComponent;
|
|
|
89
90
|
declare const Button: typeof ButtonComponent & {
|
|
90
91
|
secondary: typeof ButtonComponent.secondary;
|
|
91
92
|
destructive: typeof ButtonComponent.destructive;
|
|
93
|
+
text: typeof ButtonComponent.text;
|
|
92
94
|
icon: typeof ButtonComponent.icon;
|
|
93
95
|
upload: typeof ButtonComponent.upload;
|
|
94
96
|
};
|
|
@@ -104,6 +106,7 @@ type InputFieldProps = {
|
|
|
104
106
|
labelGap?: React.CSSProperties["gap"];
|
|
105
107
|
errorText?: string;
|
|
106
108
|
infoText?: string;
|
|
109
|
+
infoTextColor?: React.CSSProperties["color"];
|
|
107
110
|
leftIcon?: IconName | AnyOtherString;
|
|
108
111
|
rightIcon?: IconName | AnyOtherString;
|
|
109
112
|
prefix?: React.ReactNode;
|
|
@@ -319,6 +322,7 @@ type DropdownProps<Value = unknown, Data = unknown> = {
|
|
|
319
322
|
labelGap?: React.CSSProperties["gap"];
|
|
320
323
|
errorText?: string;
|
|
321
324
|
infoText?: string;
|
|
325
|
+
infoTextColor?: React.CSSProperties["color"];
|
|
322
326
|
/** @default false */
|
|
323
327
|
required?: boolean;
|
|
324
328
|
name?: string;
|
|
@@ -387,6 +391,7 @@ type InternalToggleInputProps<Value> = {
|
|
|
387
391
|
textAdvanced?: React.ReactNode;
|
|
388
392
|
errorText?: string;
|
|
389
393
|
infoText?: string;
|
|
394
|
+
infoTextColor?: React.CSSProperties["color"];
|
|
390
395
|
/** @default 26 */
|
|
391
396
|
size?: number;
|
|
392
397
|
value?: Value;
|
|
@@ -466,6 +471,102 @@ declare const _default$2: ImageComponent & {
|
|
|
466
471
|
profileImage: typeof Image.profileImage;
|
|
467
472
|
};
|
|
468
473
|
|
|
474
|
+
declare function usePageResize(): {
|
|
475
|
+
width: number;
|
|
476
|
+
height: number;
|
|
477
|
+
};
|
|
478
|
+
declare function usePageScroll(): {
|
|
479
|
+
scrollX: number;
|
|
480
|
+
scrollY: number;
|
|
481
|
+
};
|
|
482
|
+
declare function useMediaQuery(): {
|
|
483
|
+
screenWidth: number;
|
|
484
|
+
size320: boolean;
|
|
485
|
+
size400: boolean;
|
|
486
|
+
size500: boolean;
|
|
487
|
+
size600: boolean;
|
|
488
|
+
size700: boolean;
|
|
489
|
+
size800: boolean;
|
|
490
|
+
size900: boolean;
|
|
491
|
+
size1000: boolean;
|
|
492
|
+
size1100: boolean;
|
|
493
|
+
size1200: boolean;
|
|
494
|
+
size1300: boolean;
|
|
495
|
+
size1400: boolean;
|
|
496
|
+
size1500: boolean;
|
|
497
|
+
size1600: boolean;
|
|
498
|
+
};
|
|
499
|
+
type FormFieldValue = string | number | boolean;
|
|
500
|
+
declare function useForm<FormFields extends Record<string | number, FormFieldValue | FormFieldValue[] | undefined>>(options: {
|
|
501
|
+
defaultValues: FormFields;
|
|
502
|
+
requiredFields?: (keyof FormFields)[];
|
|
503
|
+
onSubmit?: (values: FormFields) => void | Promise<void>;
|
|
504
|
+
validate?: (values: FormFields) => PartialRecord<keyof FormFields, string>;
|
|
505
|
+
}): {
|
|
506
|
+
values: FormFields;
|
|
507
|
+
errors: Partial<Record<keyof FormFields, string>>;
|
|
508
|
+
isSubmitting: boolean;
|
|
509
|
+
setFieldValue: <FieldName extends keyof FormFields>(field: FieldName, value: FormFields[FieldName] | undefined) => void;
|
|
510
|
+
setFieldsValue: (values: Partial<FormFields>) => void;
|
|
511
|
+
getInputFieldProps: <FieldName extends keyof FormFields>(field: FieldName) => ComponentPropWithRef<HTMLInputElement, InputFieldProps>;
|
|
512
|
+
getTextAreaProps: <FieldName extends keyof FormFields>(field: FieldName) => ComponentPropWithRef<HTMLTextAreaElement, TextareaFieldProps>;
|
|
513
|
+
getDropdownFieldProps: <FieldName extends keyof FormFields>(field: FieldName) => any;
|
|
514
|
+
getCheckboxProps: <FieldName extends keyof FormFields>(field: FieldName) => ComponentPropWithRef<ToggleInputRef, ToggleInputProps<FormFields[FieldName]>>;
|
|
515
|
+
getRadioButtonProps: <FieldName extends keyof FormFields>(field: FieldName, value: FormFields[FieldName]) => ComponentPropWithRef<ToggleInputRef, ToggleInputProps<FormFields[FieldName]>>;
|
|
516
|
+
getSwitchProps: <FieldName extends keyof FormFields>(field: FieldName) => ComponentPropWithRef<ToggleInputRef, ToggleInputProps<FormFields[FieldName]>>;
|
|
517
|
+
focusField: (field: keyof FormFields) => void;
|
|
518
|
+
inputFieldRefs: Record<keyof FormFields, HTMLInputElement | undefined>;
|
|
519
|
+
textAreaRefs: Record<keyof FormFields, HTMLTextAreaElement | undefined>;
|
|
520
|
+
dropdownRefs: Record<keyof FormFields, HTMLDivElement | undefined>;
|
|
521
|
+
toggleInputRefs: Record<keyof FormFields, ToggleInputRef | undefined>;
|
|
522
|
+
validate: () => {};
|
|
523
|
+
onSubmit: (event?: React.FormEvent<HTMLFormElement>) => Promise<void>;
|
|
524
|
+
reset: () => void;
|
|
525
|
+
requiredFields: (keyof FormFields)[] | undefined;
|
|
526
|
+
isDirty: boolean;
|
|
527
|
+
isValid: boolean;
|
|
528
|
+
canSubmit: boolean;
|
|
529
|
+
};
|
|
530
|
+
declare function useUrlQuery(): {
|
|
531
|
+
setQuery: (query: Record<string, string | number>, keepHistory?: boolean) => void;
|
|
532
|
+
getQuery: (name: string) => string | null;
|
|
533
|
+
removeQuery: (name: string, keepHistory?: boolean) => void;
|
|
534
|
+
};
|
|
535
|
+
|
|
536
|
+
type FormProps = {
|
|
537
|
+
form?: OmitProps<ReturnType<typeof useForm>, "focusField">;
|
|
538
|
+
name?: string;
|
|
539
|
+
submitButtonText?: string;
|
|
540
|
+
submitButtonLoaderName?: LoaderName | AnyOtherString;
|
|
541
|
+
submitButtonIsLoading?: boolean;
|
|
542
|
+
submitButtonId?: string;
|
|
543
|
+
/** @default false */
|
|
544
|
+
submitButtonIsDisabled?: boolean;
|
|
545
|
+
cancelButtonText?: string;
|
|
546
|
+
cancelButtonLoaderName?: LoaderName | AnyOtherString;
|
|
547
|
+
cancelButtonIsLoading?: boolean;
|
|
548
|
+
cancelButtonId?: string;
|
|
549
|
+
/** @default false */
|
|
550
|
+
cancelButtonIsDisabled?: boolean;
|
|
551
|
+
/** @default "right" */
|
|
552
|
+
actionButtonsLocation?: "left" | "center" | "right";
|
|
553
|
+
gap?: React.CSSProperties["gap"];
|
|
554
|
+
/** @default false */
|
|
555
|
+
isDestructive?: boolean;
|
|
556
|
+
/** @default false */
|
|
557
|
+
withDividers?: boolean;
|
|
558
|
+
renderActionButtons?: React.ReactNode;
|
|
559
|
+
onClickCancel?: () => void;
|
|
560
|
+
onSubmit?: (event: React.FormEvent<HTMLFormElement>) => void;
|
|
561
|
+
id?: React.ComponentProps<"form">["id"];
|
|
562
|
+
children?: React.ReactNode;
|
|
563
|
+
} & ComponentMarginProps;
|
|
564
|
+
type FormComponentType = {
|
|
565
|
+
(props: ComponentPropWithRef<HTMLFormElement, FormProps>): React.ReactElement;
|
|
566
|
+
};
|
|
567
|
+
declare const FormComponent: FormComponentType;
|
|
568
|
+
declare const Form: typeof FormComponent & {};
|
|
569
|
+
|
|
469
570
|
type ComponentStyleConfig<ComponentProps, Subcomponents extends string> = {
|
|
470
571
|
[key in Subcomponents]?: Partial<ComponentProps>;
|
|
471
572
|
};
|
|
@@ -482,7 +583,7 @@ type BetterHtmlConfig = {
|
|
|
482
583
|
language: Language | undefined;
|
|
483
584
|
components: {
|
|
484
585
|
button?: {
|
|
485
|
-
style?: ComponentStyleConfig<ButtonProps, "default" | "secondary" | "destructive" | "icon" | "upload">;
|
|
586
|
+
style?: ComponentStyleConfig<ButtonProps, "default" | "secondary" | "destructive" | "text" | "icon" | "upload">;
|
|
486
587
|
tagReplacement?: ComponentTagReplacementConfig<"buttonComponent" | "linkComponent">;
|
|
487
588
|
};
|
|
488
589
|
inputField?: {
|
|
@@ -515,6 +616,9 @@ type BetterHtmlConfig = {
|
|
|
515
616
|
chip?: {
|
|
516
617
|
style?: ComponentStyleConfig<ChipProps, "default" | "colored">;
|
|
517
618
|
};
|
|
619
|
+
form?: {
|
|
620
|
+
style?: ComponentStyleConfig<FormProps, "default">;
|
|
621
|
+
};
|
|
518
622
|
};
|
|
519
623
|
};
|
|
520
624
|
|
|
@@ -595,68 +699,6 @@ declare const isMobileDevice: boolean;
|
|
|
595
699
|
|
|
596
700
|
type BrowserName = "firefox" | "chrome" | "safari" | "edge" | "opera";
|
|
597
701
|
|
|
598
|
-
declare function usePageResize(): {
|
|
599
|
-
width: number;
|
|
600
|
-
height: number;
|
|
601
|
-
};
|
|
602
|
-
declare function usePageScroll(): {
|
|
603
|
-
scrollX: number;
|
|
604
|
-
scrollY: number;
|
|
605
|
-
};
|
|
606
|
-
declare function useMediaQuery(): {
|
|
607
|
-
screenWidth: number;
|
|
608
|
-
size320: boolean;
|
|
609
|
-
size400: boolean;
|
|
610
|
-
size500: boolean;
|
|
611
|
-
size600: boolean;
|
|
612
|
-
size700: boolean;
|
|
613
|
-
size800: boolean;
|
|
614
|
-
size900: boolean;
|
|
615
|
-
size1000: boolean;
|
|
616
|
-
size1100: boolean;
|
|
617
|
-
size1200: boolean;
|
|
618
|
-
size1300: boolean;
|
|
619
|
-
size1400: boolean;
|
|
620
|
-
size1500: boolean;
|
|
621
|
-
size1600: boolean;
|
|
622
|
-
};
|
|
623
|
-
type FormFieldValue = string | number | boolean;
|
|
624
|
-
declare function useForm<FormFields extends Record<string | number, FormFieldValue | FormFieldValue[] | undefined>>(options: {
|
|
625
|
-
defaultValues: FormFields;
|
|
626
|
-
requiredFields?: (keyof FormFields)[];
|
|
627
|
-
onSubmit?: (values: FormFields) => void | Promise<void>;
|
|
628
|
-
validate?: (values: FormFields) => PartialRecord<keyof FormFields, string>;
|
|
629
|
-
}): {
|
|
630
|
-
values: FormFields;
|
|
631
|
-
errors: Partial<Record<keyof FormFields, string>>;
|
|
632
|
-
isSubmitting: boolean;
|
|
633
|
-
setFieldValue: <FieldName extends keyof FormFields>(field: FieldName, value: FormFields[FieldName] | undefined) => void;
|
|
634
|
-
setFieldsValue: (values: Partial<FormFields>) => void;
|
|
635
|
-
getInputFieldProps: <FieldName extends keyof FormFields>(field: FieldName) => ComponentPropWithRef<HTMLInputElement, InputFieldProps>;
|
|
636
|
-
getTextAreaProps: <FieldName extends keyof FormFields>(field: FieldName) => ComponentPropWithRef<HTMLTextAreaElement, TextareaFieldProps>;
|
|
637
|
-
getDropdownFieldProps: <FieldName extends keyof FormFields>(field: FieldName) => any;
|
|
638
|
-
getCheckboxProps: <FieldName extends keyof FormFields>(field: FieldName) => ComponentPropWithRef<ToggleInputRef, ToggleInputProps<FormFields[FieldName]>>;
|
|
639
|
-
getRadioButtonProps: <FieldName extends keyof FormFields>(field: FieldName, value: FormFields[FieldName]) => ComponentPropWithRef<ToggleInputRef, ToggleInputProps<FormFields[FieldName]>>;
|
|
640
|
-
getSwitchProps: <FieldName extends keyof FormFields>(field: FieldName) => ComponentPropWithRef<ToggleInputRef, ToggleInputProps<FormFields[FieldName]>>;
|
|
641
|
-
focusField: (field: keyof FormFields) => void;
|
|
642
|
-
inputFieldRefs: Record<keyof FormFields, HTMLInputElement | undefined>;
|
|
643
|
-
textAreaRefs: Record<keyof FormFields, HTMLTextAreaElement | undefined>;
|
|
644
|
-
dropdownRefs: Record<keyof FormFields, HTMLDivElement | undefined>;
|
|
645
|
-
toggleInputRefs: Record<keyof FormFields, ToggleInputRef | undefined>;
|
|
646
|
-
validate: () => {};
|
|
647
|
-
onSubmit: (event?: React.FormEvent<HTMLFormElement>) => Promise<void>;
|
|
648
|
-
reset: () => void;
|
|
649
|
-
requiredFields: (keyof FormFields)[] | undefined;
|
|
650
|
-
isDirty: boolean;
|
|
651
|
-
isValid: boolean;
|
|
652
|
-
canSubmit: boolean;
|
|
653
|
-
};
|
|
654
|
-
declare function useUrlQuery(): {
|
|
655
|
-
setQuery: (query: Record<string, string | number>, keepHistory?: boolean) => void;
|
|
656
|
-
getQuery: (name: string) => string | null;
|
|
657
|
-
removeQuery: (name: string, keepHistory?: boolean) => void;
|
|
658
|
-
};
|
|
659
|
-
|
|
660
702
|
declare const getBrowser: () => BrowserName | undefined;
|
|
661
703
|
declare const getFormErrorObject: <FormFields extends ReturnType<typeof useForm>["values"]>(formValues: FormFields) => PartialRecord<keyof FormFields, string>;
|
|
662
704
|
|
|
@@ -672,7 +714,7 @@ declare const sideMenuControls: {
|
|
|
672
714
|
close: () => void;
|
|
673
715
|
toggleOpened: () => void;
|
|
674
716
|
};
|
|
675
|
-
declare const filterHover: () => Record<"z05" | "z1" | "z2" | "z3", React.CSSProperties["filter"]>;
|
|
717
|
+
declare const filterHover: () => Record<"z05" | "z1" | "z2" | "z3" | "b05" | "b1" | "b2" | "b3", React.CSSProperties["filter"]>;
|
|
676
718
|
|
|
677
719
|
declare function generateLocalStorage<LocalStorage extends object>(): {
|
|
678
720
|
setItem: <StorageName extends keyof LocalStorage>(name: StorageName, value: LocalStorage[StorageName]) => void;
|
|
@@ -839,40 +881,6 @@ declare const PageHolder: typeof PageHolderComponent & {
|
|
|
839
881
|
center: typeof PageHolderComponent.center;
|
|
840
882
|
};
|
|
841
883
|
|
|
842
|
-
type FormProps = {
|
|
843
|
-
form?: OmitProps<ReturnType<typeof useForm>, "focusField">;
|
|
844
|
-
name?: string;
|
|
845
|
-
submitButtonText?: string;
|
|
846
|
-
submitButtonLoaderName?: LoaderName | AnyOtherString;
|
|
847
|
-
submitButtonIsLoading?: boolean;
|
|
848
|
-
submitButtonId?: string;
|
|
849
|
-
/** @default false */
|
|
850
|
-
submitButtonIsDisabled?: boolean;
|
|
851
|
-
cancelButtonText?: string;
|
|
852
|
-
cancelButtonLoaderName?: LoaderName | AnyOtherString;
|
|
853
|
-
cancelButtonIsLoading?: boolean;
|
|
854
|
-
cancelButtonId?: string;
|
|
855
|
-
/** @default false */
|
|
856
|
-
cancelButtonIsDisabled?: boolean;
|
|
857
|
-
/** @default "right" */
|
|
858
|
-
actionButtonsLocation?: "left" | "center" | "right";
|
|
859
|
-
gap?: React.CSSProperties["gap"];
|
|
860
|
-
/** @default false */
|
|
861
|
-
isDestructive?: boolean;
|
|
862
|
-
/** @default false */
|
|
863
|
-
withDividers?: boolean;
|
|
864
|
-
renderActionButtons?: React.ReactNode;
|
|
865
|
-
onClickCancel?: () => void;
|
|
866
|
-
onSubmit?: (event: React.FormEvent<HTMLFormElement>) => void;
|
|
867
|
-
id?: React.ComponentProps<"form">["id"];
|
|
868
|
-
children?: React.ReactNode;
|
|
869
|
-
} & ComponentMarginProps;
|
|
870
|
-
type FormComponentType = {
|
|
871
|
-
(props: ComponentPropWithRef<HTMLFormElement, FormProps>): React.ReactElement;
|
|
872
|
-
};
|
|
873
|
-
declare const FormComponent: FormComponentType;
|
|
874
|
-
declare const Form: typeof FormComponent & {};
|
|
875
|
-
|
|
876
884
|
type FormRowProps = {
|
|
877
885
|
oneItemOnly?: boolean;
|
|
878
886
|
/**
|