react-better-html 1.1.238 → 1.1.240
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 +441 -404
- package/dist/index.d.ts +441 -404
- package/dist/index.js +448 -211
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +448 -211
- package/dist/index.mjs.map +1 -1
- package/package.json +1 -1
package/dist/index.d.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { IconName, AnyOtherString, AssetName, LoaderName, OmitProps, Country, Color, BetterCoreProviderConfig, DeepPartialRecord, BetterCoreConfig, PartialRecord, PickValue } from 'react-better-core';
|
|
2
2
|
export { API, APIConfigItem, 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';
|
|
@@ -24,8 +24,387 @@ type ComponentPropWithRef<ComponentRef, ComponentProps> = ComponentProps & {
|
|
|
24
24
|
ref?: React.Ref<ComponentRef>;
|
|
25
25
|
};
|
|
26
26
|
|
|
27
|
-
type
|
|
28
|
-
|
|
27
|
+
type ButtonProps<Value = unknown> = {
|
|
28
|
+
text?: string;
|
|
29
|
+
value?: Value;
|
|
30
|
+
href?: string;
|
|
31
|
+
download?: string;
|
|
32
|
+
target?: React.ComponentProps<"a">["target"];
|
|
33
|
+
icon?: IconName | AnyOtherString;
|
|
34
|
+
/** @default "left" */
|
|
35
|
+
iconPosition?: "left" | "right";
|
|
36
|
+
/** @default Same as text color */
|
|
37
|
+
iconColor?: string;
|
|
38
|
+
/** @default 16 */
|
|
39
|
+
iconSize?: number;
|
|
40
|
+
image?: AssetName | AnyOtherString;
|
|
41
|
+
/** @default "left" */
|
|
42
|
+
imagePosition?: "left" | "right";
|
|
43
|
+
/** @default 16 */
|
|
44
|
+
imageWidth?: number;
|
|
45
|
+
/** @default undefined */
|
|
46
|
+
imageHeight?: number;
|
|
47
|
+
loaderName?: LoaderName | AnyOtherString;
|
|
48
|
+
/** @default 16 */
|
|
49
|
+
loaderSize?: number;
|
|
50
|
+
/** @default false */
|
|
51
|
+
isLoading?: boolean;
|
|
52
|
+
/** @default false */
|
|
53
|
+
disabled?: boolean;
|
|
54
|
+
/** @default false */
|
|
55
|
+
isSmall?: boolean;
|
|
56
|
+
/** @default false */
|
|
57
|
+
isSubmit?: boolean;
|
|
58
|
+
onClickWithValue?: (value: Value) => void;
|
|
59
|
+
} & OmitProps<React.ComponentProps<"button">, "style" | "defaultValue" | "translate" | "value"> & ComponentStyle & ComponentHoverStyle;
|
|
60
|
+
type ButtonComponent = {
|
|
61
|
+
<Value>(props: ButtonProps<Value>): React.ReactElement;
|
|
62
|
+
secondary: <Value>(props: ButtonProps<Value>) => React.ReactElement;
|
|
63
|
+
destructive: <Value>(props: ButtonProps<Value>) => React.ReactElement;
|
|
64
|
+
icon: <Value>(props: OmitProps<ButtonProps<Value>, "icon" | "width" | "height" | "isSmall"> & {
|
|
65
|
+
icon: IconName | AnyOtherString;
|
|
66
|
+
/** @default 16 */
|
|
67
|
+
size?: number;
|
|
68
|
+
buttonSize?: number;
|
|
69
|
+
/** @default "#000000" */
|
|
70
|
+
backgroundButtonColor?: string;
|
|
71
|
+
}) => React.ReactElement;
|
|
72
|
+
upload: <Value>(props: OmitProps<ButtonProps<Value>, "onClick"> & {
|
|
73
|
+
accept?: ComponentProps<"input">["accept"];
|
|
74
|
+
/** @default false */
|
|
75
|
+
multiple?: boolean;
|
|
76
|
+
onUpload?: (files: FileList | null) => void;
|
|
77
|
+
}) => React.ReactElement;
|
|
78
|
+
};
|
|
79
|
+
declare const ButtonComponent: ButtonComponent;
|
|
80
|
+
declare const Button: typeof ButtonComponent & {
|
|
81
|
+
secondary: typeof ButtonComponent.secondary;
|
|
82
|
+
destructive: typeof ButtonComponent.destructive;
|
|
83
|
+
icon: typeof ButtonComponent.icon;
|
|
84
|
+
upload: typeof ButtonComponent.upload;
|
|
85
|
+
};
|
|
86
|
+
|
|
87
|
+
type InputFieldProps = {
|
|
88
|
+
label?: string;
|
|
89
|
+
labelFontFamily?: React.CSSProperties["fontFamily"];
|
|
90
|
+
labelLetterSpacing?: React.CSSProperties["letterSpacing"];
|
|
91
|
+
labelTextTransform?: React.CSSProperties["textTransform"];
|
|
92
|
+
labelColor?: React.CSSProperties["color"];
|
|
93
|
+
errorText?: string;
|
|
94
|
+
infoText?: string;
|
|
95
|
+
leftIcon?: IconName | AnyOtherString;
|
|
96
|
+
rightIcon?: IconName | AnyOtherString;
|
|
97
|
+
prefix?: React.ReactNode;
|
|
98
|
+
prefixBackgroundColor?: string;
|
|
99
|
+
suffix?: React.ReactNode;
|
|
100
|
+
suffixBackgroundColor?: string;
|
|
101
|
+
insideInputFieldBeforeComponent?: React.ReactNode;
|
|
102
|
+
insideInputFieldAfterComponent?: React.ReactNode;
|
|
103
|
+
/** @default false */
|
|
104
|
+
withDebounce?: boolean;
|
|
105
|
+
/** @default 0.5s */
|
|
106
|
+
debounceDelay?: number;
|
|
107
|
+
onChangeValue?: (value: string) => void;
|
|
108
|
+
onClickRightIcon?: () => void;
|
|
109
|
+
holderRef?: React.ForwardedRef<HTMLDivElement>;
|
|
110
|
+
} & OmitProps<React.ComponentProps<"input">, "style" | "ref" | "prefix"> & ComponentStyle & ComponentHoverStyle;
|
|
111
|
+
type TextareaFieldProps = OmitProps<InputFieldProps, "type"> & OmitProps<React.ComponentProps<"textarea">, "style" | "ref">;
|
|
112
|
+
type InputFieldDateTimeExcludeProps = Pick<InputFieldProps, "min" | "max" | "minLength" | "maxLength">;
|
|
113
|
+
type InputFieldComponentType = {
|
|
114
|
+
(props: ComponentPropWithRef<HTMLInputElement, InputFieldProps>): React.ReactElement;
|
|
115
|
+
multiline: (props: ComponentPropWithRef<HTMLTextAreaElement, TextareaFieldProps>) => React.ReactElement;
|
|
116
|
+
email: (props: ComponentPropWithRef<HTMLInputElement, InputFieldProps>) => React.ReactElement;
|
|
117
|
+
password: (props: ComponentPropWithRef<HTMLInputElement, OmitProps<InputFieldProps, "autoComplete"> & {
|
|
118
|
+
/** @default "current-password" */
|
|
119
|
+
autoComplete?: React.ComponentProps<"input">["autoComplete"];
|
|
120
|
+
}>) => React.ReactElement;
|
|
121
|
+
search: (props: ComponentPropWithRef<HTMLInputElement, InputFieldProps>) => React.ReactElement;
|
|
122
|
+
phoneNumber: (props: ComponentPropWithRef<HTMLInputElement, OmitProps<InputFieldProps, "type" | "prefix">>) => React.ReactElement;
|
|
123
|
+
date: (props: ComponentPropWithRef<HTMLInputElement, InputFieldProps & {
|
|
124
|
+
minDate?: Date;
|
|
125
|
+
maxDate?: Date;
|
|
126
|
+
}>) => React.ReactElement;
|
|
127
|
+
dateTime: (props: ComponentPropWithRef<HTMLInputElement, OmitProps<InputFieldProps, keyof InputFieldDateTimeExcludeProps> & {
|
|
128
|
+
hoursToRender?: number[];
|
|
129
|
+
minutesToRender?: number[];
|
|
130
|
+
minDate?: Date;
|
|
131
|
+
maxDate?: Date;
|
|
132
|
+
/** @default today */
|
|
133
|
+
defaultDateAfterTimePick?: `${number}-${number}-${number}`;
|
|
134
|
+
/** @default "00:00" */
|
|
135
|
+
defaultTimeAfterDatePick?: `${number}:${number}`;
|
|
136
|
+
}>) => React.ReactElement;
|
|
137
|
+
time: (props: ComponentPropWithRef<HTMLInputElement, OmitProps<InputFieldProps, keyof InputFieldDateTimeExcludeProps>> & {
|
|
138
|
+
hoursToRender?: number[];
|
|
139
|
+
minutesToRender?: number[];
|
|
140
|
+
/** @default 00:00 */
|
|
141
|
+
minTime?: string;
|
|
142
|
+
/** @default 23:59 */
|
|
143
|
+
maxTime?: string;
|
|
144
|
+
}) => React.ReactElement;
|
|
145
|
+
color: (props: ComponentPropWithRef<HTMLInputElement, InputFieldProps>) => React.ReactElement;
|
|
146
|
+
};
|
|
147
|
+
declare const InputFieldComponent: InputFieldComponentType;
|
|
148
|
+
declare const InputField: typeof InputFieldComponent & {
|
|
149
|
+
multiline: typeof InputFieldComponent.multiline;
|
|
150
|
+
email: typeof InputFieldComponent.email;
|
|
151
|
+
password: typeof InputFieldComponent.password;
|
|
152
|
+
search: typeof InputFieldComponent.search;
|
|
153
|
+
phoneNumber: typeof InputFieldComponent.phoneNumber;
|
|
154
|
+
date: typeof InputFieldComponent.date;
|
|
155
|
+
dateTime: typeof InputFieldComponent.dateTime;
|
|
156
|
+
time: typeof InputFieldComponent.time;
|
|
157
|
+
color: typeof InputFieldComponent.color;
|
|
158
|
+
};
|
|
159
|
+
|
|
160
|
+
type TextAs = "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "p" | "span" | "label";
|
|
161
|
+
type TextProps<As extends TextAs = "p"> = {
|
|
162
|
+
/** @default "p" */
|
|
163
|
+
as?: As;
|
|
164
|
+
htmlContentTranslate?: React.ComponentProps<"div">["translate"];
|
|
165
|
+
} & OmitProps<React.ComponentProps<As>, "style"> & ComponentStyle & ComponentHoverStyle;
|
|
166
|
+
type TextComponentType = {
|
|
167
|
+
<As extends TextAs>(props: ComponentPropWithRef<HTMLParagraphElement, TextProps<As>>): React.ReactElement;
|
|
168
|
+
unknown: <As extends TextAs>(props: ComponentPropWithRef<HTMLParagraphElement, TextProps<As>>) => React.ReactElement;
|
|
169
|
+
oneLine: <As extends TextAs>(props: ComponentPropWithRef<HTMLParagraphElement, TextProps<As>>) => React.ReactElement;
|
|
170
|
+
};
|
|
171
|
+
declare const TextComponent: TextComponentType;
|
|
172
|
+
declare const Text: typeof TextComponent & {
|
|
173
|
+
unknown: typeof TextComponent.unknown;
|
|
174
|
+
oneLine: typeof TextComponent.oneLine;
|
|
175
|
+
};
|
|
176
|
+
|
|
177
|
+
type PageHeaderProps = {
|
|
178
|
+
icon?: IconName | AnyOtherString;
|
|
179
|
+
image?: AssetName | AnyOtherString;
|
|
180
|
+
imageUrl?: string;
|
|
181
|
+
imageSize?: number;
|
|
182
|
+
/** @default false */
|
|
183
|
+
imageAzProfileImage?: boolean;
|
|
184
|
+
title?: string | React.ReactNode;
|
|
185
|
+
/** @default "h1" */
|
|
186
|
+
titleAs?: TextAs;
|
|
187
|
+
/** @default textPrimary */
|
|
188
|
+
titleColor?: React.CSSProperties["color"];
|
|
189
|
+
titleRightElement?: React.ReactNode;
|
|
190
|
+
description?: string | React.ReactNode;
|
|
191
|
+
/** @default textSecondary */
|
|
192
|
+
descriptionColor?: React.CSSProperties["color"];
|
|
193
|
+
textAlign?: React.CSSProperties["textAlign"];
|
|
194
|
+
rightElement?: React.ReactNode;
|
|
195
|
+
/** @default false */
|
|
196
|
+
lightMode?: boolean;
|
|
197
|
+
} & Pick<ComponentMarginProps, "marginBottom">;
|
|
198
|
+
type PageHeaderComponentType = {
|
|
199
|
+
(props: ComponentPropWithRef<HTMLDivElement, PageHeaderProps>): React.ReactElement;
|
|
200
|
+
};
|
|
201
|
+
declare const PageHeaderComponent: PageHeaderComponentType;
|
|
202
|
+
declare const PageHeader: typeof PageHeaderComponent & {};
|
|
203
|
+
|
|
204
|
+
type DivProps<Value = unknown> = {
|
|
205
|
+
value?: Value;
|
|
206
|
+
/** @default "div" */
|
|
207
|
+
as?: WebTarget;
|
|
208
|
+
/** @default false */
|
|
209
|
+
isTabAccessed?: boolean;
|
|
210
|
+
htmlContentTranslate?: React.ComponentProps<"div">["translate"];
|
|
211
|
+
onClickWithValue?: (value: Value) => void;
|
|
212
|
+
} & OmitProps<React.ComponentProps<"div">, "style" | "defaultValue" | "translate"> & ComponentStyle & ComponentHoverStyle;
|
|
213
|
+
type DivComponentType = {
|
|
214
|
+
<Value>(props: ComponentPropWithRef<HTMLDivElement, DivProps<Value>>): React.ReactElement;
|
|
215
|
+
row: <Value>(props: ComponentPropWithRef<HTMLDivElement, OmitProps<DivProps<Value>, "display" | "flexDirection"> & {
|
|
216
|
+
flexReverse?: boolean;
|
|
217
|
+
invertFlexDirection?: boolean;
|
|
218
|
+
}>) => React.ReactElement;
|
|
219
|
+
column: <Value>(props: ComponentPropWithRef<HTMLDivElement, OmitProps<DivProps<Value>, "display" | "flexDirection"> & {
|
|
220
|
+
flexReverse?: boolean;
|
|
221
|
+
invertFlexDirection?: boolean;
|
|
222
|
+
}>) => React.ReactElement;
|
|
223
|
+
grid: <Value>(props: ComponentPropWithRef<HTMLDivElement, OmitProps<DivProps<Value>, "display">>) => React.ReactElement;
|
|
224
|
+
box: <Value>(props: ComponentPropWithRef<HTMLDivElement, DivProps<Value> & OmitProps<PageHeaderProps, "marginBottom"> & {
|
|
225
|
+
headerBackgroundColor?: string;
|
|
226
|
+
/** @default theme.colors.primary */
|
|
227
|
+
activeColor?: string;
|
|
228
|
+
isActive?: boolean;
|
|
229
|
+
}>) => React.ReactElement;
|
|
230
|
+
};
|
|
231
|
+
declare const DivComponent: DivComponentType;
|
|
232
|
+
declare const Div: typeof DivComponent & {
|
|
233
|
+
row: typeof DivComponent.row;
|
|
234
|
+
column: typeof DivComponent.column;
|
|
235
|
+
grid: typeof DivComponent.grid;
|
|
236
|
+
box: typeof DivComponent.box;
|
|
237
|
+
};
|
|
238
|
+
|
|
239
|
+
type ChipProps<Value = unknown> = {
|
|
240
|
+
text: string | React.ReactNode;
|
|
241
|
+
beforeText?: React.ReactNode;
|
|
242
|
+
afterText?: React.ReactNode;
|
|
243
|
+
/** @default theme.colors.textPrimary */
|
|
244
|
+
color?: string;
|
|
245
|
+
/** @default backgroundSecondary */
|
|
246
|
+
backgroundColor?: string;
|
|
247
|
+
/** @default theme.styles.borderRadius / 1.3 */
|
|
248
|
+
borderRadius?: number;
|
|
249
|
+
/** @default false */
|
|
250
|
+
isCircle?: boolean;
|
|
251
|
+
value?: Value;
|
|
252
|
+
onClick?: (event: React.MouseEvent<HTMLDivElement, globalThis.MouseEvent>) => void;
|
|
253
|
+
onClickWithValue?: (value: Value) => void;
|
|
254
|
+
} & Pick<DivProps, "border" | "borderColor" | "borderWidth" | "borderStyle" | keyof ComponentPaddingProps | "transition" | "height"> & Pick<TextProps, "fontFamily" | "fontSize" | "fontWeight" | "fontStyle">;
|
|
255
|
+
type ChipComponentType = {
|
|
256
|
+
<Value>(props: ComponentPropWithRef<HTMLDivElement, ChipProps<Value>>): React.ReactElement;
|
|
257
|
+
colored: <Value>(props: ComponentPropWithRef<HTMLDivElement, OmitProps<ChipProps<Value>, "color" | "backgroundColor"> & {
|
|
258
|
+
color?: string;
|
|
259
|
+
/** @default false */
|
|
260
|
+
withWhiteBackground?: boolean;
|
|
261
|
+
}>) => React.ReactElement;
|
|
262
|
+
};
|
|
263
|
+
declare const ChipComponent: ChipComponentType;
|
|
264
|
+
declare const Chip: typeof ChipComponent & {
|
|
265
|
+
colored: typeof ChipComponent.colored;
|
|
266
|
+
};
|
|
267
|
+
|
|
268
|
+
type DropdownOption<Value, Data = unknown> = {
|
|
269
|
+
value: Value;
|
|
270
|
+
label: string;
|
|
271
|
+
/** @default false */
|
|
272
|
+
disabled?: boolean;
|
|
273
|
+
searchValues?: string[];
|
|
274
|
+
data?: Data;
|
|
275
|
+
} & ({
|
|
276
|
+
renderType?: "default";
|
|
277
|
+
} | {
|
|
278
|
+
renderType?: "chip";
|
|
279
|
+
chipProps?: OmitProps<React.ComponentProps<typeof Chip>, "text" | "value" | "onClick" | "onClickWithValue" | "ref">;
|
|
280
|
+
} | {
|
|
281
|
+
renderType?: "chip.colored";
|
|
282
|
+
chipProps?: OmitProps<React.ComponentProps<typeof Chip.colored>, "text" | "value" | "onClick" | "onClickWithValue" | "ref">;
|
|
283
|
+
});
|
|
284
|
+
type DropdownProps<Value = unknown, Data = unknown> = {
|
|
285
|
+
label?: string;
|
|
286
|
+
labelFontFamily?: React.CSSProperties["fontFamily"];
|
|
287
|
+
labelLetterSpacing?: React.CSSProperties["letterSpacing"];
|
|
288
|
+
labelTextTransform?: React.CSSProperties["textTransform"];
|
|
289
|
+
labelColor?: React.CSSProperties["color"];
|
|
290
|
+
errorText?: string;
|
|
291
|
+
infoText?: string;
|
|
292
|
+
/** @default false */
|
|
293
|
+
required?: boolean;
|
|
294
|
+
name?: string;
|
|
295
|
+
/** @default false */
|
|
296
|
+
disabled?: boolean;
|
|
297
|
+
options: DropdownOption<Value, Data>[];
|
|
298
|
+
placeholder?: string;
|
|
299
|
+
leftIcon?: IconName | AnyOtherString;
|
|
300
|
+
inputFieldClassName?: string;
|
|
301
|
+
/** @default false */
|
|
302
|
+
withSearch?: boolean;
|
|
303
|
+
/** @default false */
|
|
304
|
+
withDebounce?: boolean;
|
|
305
|
+
/** @default 0.5s */
|
|
306
|
+
debounceDelay?: number;
|
|
307
|
+
/** @default false */
|
|
308
|
+
debounceIsLoading?: boolean;
|
|
309
|
+
debounceMinimumSymbolsRequired?: number;
|
|
310
|
+
/** @default false */
|
|
311
|
+
withoutClearButton?: boolean;
|
|
312
|
+
/** @default false */
|
|
313
|
+
withoutRenderingOptionsWhenClosed?: boolean;
|
|
314
|
+
onChangeSearch?: (query: string) => void;
|
|
315
|
+
renderOption?: (option: DropdownOption<Value, Data>, index: number, isSelected: boolean) => React.ReactNode;
|
|
316
|
+
renderOptionDivider?: (previousOption: DropdownOption<Value, Data> | undefined, nextOption: DropdownOption<Value, Data> | undefined, previousOptionIndex: number, nextOptionIndex: number) => React.ReactNode;
|
|
317
|
+
} & OmitProps<DivProps, "onChange" | "defaultChecked"> & ({
|
|
318
|
+
withMultiselect?: false;
|
|
319
|
+
value?: Value;
|
|
320
|
+
defaultValue?: Value;
|
|
321
|
+
onChange?: (value: Value | undefined) => void;
|
|
322
|
+
} | {
|
|
323
|
+
withMultiselect: true;
|
|
324
|
+
value?: Value[];
|
|
325
|
+
defaultValue?: Value[];
|
|
326
|
+
onChange?: (value: Value[] | undefined) => void;
|
|
327
|
+
});
|
|
328
|
+
type DropdownComponentType = {
|
|
329
|
+
<Value, Data>(props: ComponentPropWithRef<HTMLDivElement, DropdownProps<Value, Data>>): React.ReactElement;
|
|
330
|
+
countries: (props: ComponentPropWithRef<HTMLDivElement, OmitProps<DropdownProps<string, Country>, "options">>) => React.ReactElement;
|
|
331
|
+
};
|
|
332
|
+
declare const DropdownComponent: DropdownComponentType;
|
|
333
|
+
declare const Dropdown: typeof DropdownComponent & {
|
|
334
|
+
countries: typeof DropdownComponent.countries;
|
|
335
|
+
};
|
|
336
|
+
|
|
337
|
+
type ToggleInputRef = {};
|
|
338
|
+
type InternalToggleInputProps<Value> = {
|
|
339
|
+
label?: string;
|
|
340
|
+
labelFontFamily?: React.CSSProperties["fontFamily"];
|
|
341
|
+
labelLetterSpacing?: React.CSSProperties["letterSpacing"];
|
|
342
|
+
labelTextTransform?: React.CSSProperties["textTransform"];
|
|
343
|
+
labelColor?: React.CSSProperties["color"];
|
|
344
|
+
text?: string;
|
|
345
|
+
textFontFamily?: React.CSSProperties["fontFamily"];
|
|
346
|
+
textLetterSpacing?: React.CSSProperties["letterSpacing"];
|
|
347
|
+
textTextTransform?: React.CSSProperties["textTransform"];
|
|
348
|
+
textAdvanced?: React.ReactNode;
|
|
349
|
+
errorText?: string;
|
|
350
|
+
infoText?: string;
|
|
351
|
+
value?: Value;
|
|
352
|
+
onChange?: (checked: boolean, value?: Value) => void;
|
|
353
|
+
} & OmitProps<React.ComponentProps<"input">, "style" | "value" | "ref" | "onChange"> & ComponentStyle & ComponentHoverStyle;
|
|
354
|
+
type ToggleInputProps<Value = unknown> = ComponentPropWithRef<ToggleInputRef, OmitProps<InternalToggleInputProps<Value>, "type">>;
|
|
355
|
+
type ToggleInputComponentType = <Value>(props: ToggleInputProps<Value>) => React.ReactElement;
|
|
356
|
+
declare const _default$5: {
|
|
357
|
+
checkbox: ToggleInputComponentType;
|
|
358
|
+
radiobutton: ToggleInputComponentType;
|
|
359
|
+
switch: ToggleInputComponentType;
|
|
360
|
+
};
|
|
361
|
+
|
|
362
|
+
type DividerProps = {
|
|
363
|
+
/** @default 1 */
|
|
364
|
+
width?: number;
|
|
365
|
+
/** @default border */
|
|
366
|
+
backgroundColor?: string;
|
|
367
|
+
} & ComponentMarginProps;
|
|
368
|
+
type VerticalDividerProps = DividerProps & {
|
|
369
|
+
/** @default "100%" */
|
|
370
|
+
height?: number;
|
|
371
|
+
};
|
|
372
|
+
type HorizontalDividerProps = DividerProps & {
|
|
373
|
+
text?: string;
|
|
374
|
+
textFontFamily?: React.CSSProperties["fontFamily"];
|
|
375
|
+
textFontSize?: React.CSSProperties["fontSize"];
|
|
376
|
+
textFontWeight?: React.CSSProperties["fontWeight"];
|
|
377
|
+
textTransform?: React.CSSProperties["textTransform"];
|
|
378
|
+
textLetterSpacing?: React.CSSProperties["letterSpacing"];
|
|
379
|
+
/** @default textSecondary */
|
|
380
|
+
textColor?: React.CSSProperties["color"];
|
|
381
|
+
};
|
|
382
|
+
type DividerComponentType = {
|
|
383
|
+
vertical: (props: ComponentPropWithRef<HTMLDivElement, VerticalDividerProps>) => React.ReactElement;
|
|
384
|
+
horizontal: (props: ComponentPropWithRef<HTMLDivElement, HorizontalDividerProps>) => React.ReactElement;
|
|
385
|
+
};
|
|
386
|
+
declare const _default$4: {
|
|
387
|
+
vertical: DividerComponentType["vertical"];
|
|
388
|
+
horizontal: DividerComponentType["horizontal"];
|
|
389
|
+
};
|
|
390
|
+
|
|
391
|
+
type LabelProps = {
|
|
392
|
+
text?: string;
|
|
393
|
+
/** @default false */
|
|
394
|
+
required?: boolean;
|
|
395
|
+
/** @default false */
|
|
396
|
+
isError?: boolean;
|
|
397
|
+
fontFamily?: React.CSSProperties["fontFamily"];
|
|
398
|
+
letterSpacing?: React.CSSProperties["letterSpacing"];
|
|
399
|
+
textTransform?: React.CSSProperties["textTransform"];
|
|
400
|
+
color?: React.CSSProperties["color"];
|
|
401
|
+
htmlFor?: string;
|
|
402
|
+
};
|
|
403
|
+
declare function Label(labelProps: LabelProps): react_jsx_runtime.JSX.Element;
|
|
404
|
+
declare const _default$3: react.MemoExoticComponent<typeof Label>;
|
|
405
|
+
|
|
406
|
+
type ComponentStyleConfig<ComponentProps, Subcomponents extends string> = {
|
|
407
|
+
[key in Subcomponents]?: ComponentProps;
|
|
29
408
|
};
|
|
30
409
|
type ComponentTagReplacementConfig<Subcomponents extends string> = {
|
|
31
410
|
[key in Subcomponents]?: React.ElementType;
|
|
@@ -39,9 +418,27 @@ type BetterHtmlConfig = {
|
|
|
39
418
|
sideMenuIsOpenMobile: boolean;
|
|
40
419
|
components: {
|
|
41
420
|
button?: {
|
|
42
|
-
style?: ComponentStyleConfig<"default" | "secondary" | "destructive" | "icon" | "upload">;
|
|
421
|
+
style?: ComponentStyleConfig<ButtonProps, "default" | "secondary" | "destructive" | "icon" | "upload">;
|
|
43
422
|
tagReplacement?: ComponentTagReplacementConfig<"buttonComponent" | "linkComponent">;
|
|
44
423
|
};
|
|
424
|
+
inputField?: {
|
|
425
|
+
style?: ComponentStyleConfig<InputFieldProps, "default" | "multiline" | "email" | "password" | "search" | "phoneNumber" | "date" | "dateTime" | "time" | "color">;
|
|
426
|
+
};
|
|
427
|
+
dropdown?: {
|
|
428
|
+
style?: ComponentStyleConfig<DropdownProps, "default" | "countries">;
|
|
429
|
+
};
|
|
430
|
+
toggleInput?: {
|
|
431
|
+
style?: ComponentStyleConfig<ToggleInputProps, "checkbox" | "radiobutton" | "switch">;
|
|
432
|
+
};
|
|
433
|
+
label?: {
|
|
434
|
+
style?: ComponentStyleConfig<LabelProps, "default">;
|
|
435
|
+
};
|
|
436
|
+
divider?: {
|
|
437
|
+
style?: {
|
|
438
|
+
vertical?: VerticalDividerProps;
|
|
439
|
+
horizontal?: HorizontalDividerProps;
|
|
440
|
+
};
|
|
441
|
+
};
|
|
45
442
|
sideMenu?: {
|
|
46
443
|
/** @default 300 */
|
|
47
444
|
width?: number;
|
|
@@ -111,101 +508,12 @@ type BetterHtmlProviderProps = BetterProviderCommonProps & {
|
|
|
111
508
|
config?: BetterHtmlProviderConfig;
|
|
112
509
|
};
|
|
113
510
|
declare function BetterHtmlProvider({ config, ...props }: BetterHtmlProviderProps): react_jsx_runtime.JSX.Element;
|
|
114
|
-
declare const _default$
|
|
511
|
+
declare const _default$2: react.MemoExoticComponent<typeof BetterHtmlProvider>;
|
|
115
512
|
|
|
116
513
|
declare const isMobileDevice: boolean;
|
|
117
514
|
|
|
118
515
|
type BrowserName = "firefox" | "chrome" | "safari" | "edge" | "opera";
|
|
119
516
|
|
|
120
|
-
type InputFieldProps = {
|
|
121
|
-
label?: string;
|
|
122
|
-
labelColor?: string;
|
|
123
|
-
errorText?: string;
|
|
124
|
-
infoText?: string;
|
|
125
|
-
leftIcon?: IconName | AnyOtherString;
|
|
126
|
-
rightIcon?: IconName | AnyOtherString;
|
|
127
|
-
prefix?: React.ReactNode;
|
|
128
|
-
prefixBackgroundColor?: string;
|
|
129
|
-
suffix?: React.ReactNode;
|
|
130
|
-
suffixBackgroundColor?: string;
|
|
131
|
-
insideInputFieldBeforeComponent?: React.ReactNode;
|
|
132
|
-
insideInputFieldAfterComponent?: React.ReactNode;
|
|
133
|
-
/** @default false */
|
|
134
|
-
withDebounce?: boolean;
|
|
135
|
-
/** @default 0.5s */
|
|
136
|
-
debounceDelay?: number;
|
|
137
|
-
onChangeValue?: (value: string) => void;
|
|
138
|
-
onClickRightIcon?: () => void;
|
|
139
|
-
holderRef?: React.ForwardedRef<HTMLDivElement>;
|
|
140
|
-
} & OmitProps<React.ComponentProps<"input">, "style" | "ref" | "prefix"> & ComponentStyle & ComponentHoverStyle;
|
|
141
|
-
type TextareaFieldProps = OmitProps<InputFieldProps, "type"> & OmitProps<React.ComponentProps<"textarea">, "style" | "ref">;
|
|
142
|
-
type InputFieldDateTimeExcludeProps = Pick<InputFieldProps, "min" | "max" | "minLength" | "maxLength">;
|
|
143
|
-
type InputFieldComponentType = {
|
|
144
|
-
(props: ComponentPropWithRef<HTMLInputElement, InputFieldProps>): React.ReactElement;
|
|
145
|
-
multiline: (props: ComponentPropWithRef<HTMLTextAreaElement, TextareaFieldProps>) => React.ReactElement;
|
|
146
|
-
email: (props: ComponentPropWithRef<HTMLInputElement, InputFieldProps>) => React.ReactElement;
|
|
147
|
-
password: (props: ComponentPropWithRef<HTMLInputElement, OmitProps<InputFieldProps, "autoComplete"> & {
|
|
148
|
-
/** @default "current-password" */
|
|
149
|
-
autoComplete?: React.ComponentProps<"input">["autoComplete"];
|
|
150
|
-
}>) => React.ReactElement;
|
|
151
|
-
search: (props: ComponentPropWithRef<HTMLInputElement, InputFieldProps>) => React.ReactElement;
|
|
152
|
-
phoneNumber: (props: ComponentPropWithRef<HTMLInputElement, OmitProps<InputFieldProps, "type" | "prefix">>) => React.ReactElement;
|
|
153
|
-
date: (props: ComponentPropWithRef<HTMLInputElement, InputFieldProps & {
|
|
154
|
-
minDate?: Date;
|
|
155
|
-
maxDate?: Date;
|
|
156
|
-
}>) => React.ReactElement;
|
|
157
|
-
dateTime: (props: ComponentPropWithRef<HTMLInputElement, OmitProps<InputFieldProps, keyof InputFieldDateTimeExcludeProps> & {
|
|
158
|
-
hoursToRender?: number[];
|
|
159
|
-
minutesToRender?: number[];
|
|
160
|
-
minDate?: Date;
|
|
161
|
-
maxDate?: Date;
|
|
162
|
-
/** @default today */
|
|
163
|
-
defaultDateAfterTimePick?: `${number}-${number}-${number}`;
|
|
164
|
-
/** @default "00:00" */
|
|
165
|
-
defaultTimeAfterDatePick?: `${number}:${number}`;
|
|
166
|
-
}>) => React.ReactElement;
|
|
167
|
-
time: (props: ComponentPropWithRef<HTMLInputElement, OmitProps<InputFieldProps, keyof InputFieldDateTimeExcludeProps>> & {
|
|
168
|
-
hoursToRender?: number[];
|
|
169
|
-
minutesToRender?: number[];
|
|
170
|
-
/** @default 00:00 */
|
|
171
|
-
minTime?: string;
|
|
172
|
-
/** @default 23:59 */
|
|
173
|
-
maxTime?: string;
|
|
174
|
-
}) => React.ReactElement;
|
|
175
|
-
color: (props: ComponentPropWithRef<HTMLInputElement, InputFieldProps>) => React.ReactElement;
|
|
176
|
-
};
|
|
177
|
-
declare const InputFieldComponent: InputFieldComponentType;
|
|
178
|
-
declare const InputField: typeof InputFieldComponent & {
|
|
179
|
-
multiline: typeof InputFieldComponent.multiline;
|
|
180
|
-
email: typeof InputFieldComponent.email;
|
|
181
|
-
password: typeof InputFieldComponent.password;
|
|
182
|
-
search: typeof InputFieldComponent.search;
|
|
183
|
-
phoneNumber: typeof InputFieldComponent.phoneNumber;
|
|
184
|
-
date: typeof InputFieldComponent.date;
|
|
185
|
-
dateTime: typeof InputFieldComponent.dateTime;
|
|
186
|
-
time: typeof InputFieldComponent.time;
|
|
187
|
-
color: typeof InputFieldComponent.color;
|
|
188
|
-
};
|
|
189
|
-
|
|
190
|
-
type ToggleInputRef = {};
|
|
191
|
-
type InternalToggleInputProps<Value> = {
|
|
192
|
-
label?: string;
|
|
193
|
-
labelColor?: string;
|
|
194
|
-
text?: string;
|
|
195
|
-
textAdvanced?: React.ReactNode;
|
|
196
|
-
errorText?: string;
|
|
197
|
-
infoText?: string;
|
|
198
|
-
value?: Value;
|
|
199
|
-
onChange?: (checked: boolean, value?: Value) => void;
|
|
200
|
-
} & OmitProps<React.ComponentProps<"input">, "style" | "value" | "ref" | "onChange"> & ComponentStyle & ComponentHoverStyle;
|
|
201
|
-
type ToggleInputProps<Value> = ComponentPropWithRef<ToggleInputRef, OmitProps<InternalToggleInputProps<Value>, "type">>;
|
|
202
|
-
type ToggleInputComponentType = <Value>(props: ToggleInputProps<Value>) => React.ReactElement;
|
|
203
|
-
declare const _default$4: {
|
|
204
|
-
checkbox: ToggleInputComponentType;
|
|
205
|
-
radiobutton: ToggleInputComponentType;
|
|
206
|
-
switch: ToggleInputComponentType;
|
|
207
|
-
};
|
|
208
|
-
|
|
209
517
|
declare function usePageResize(): {
|
|
210
518
|
width: number;
|
|
211
519
|
height: number;
|
|
@@ -251,124 +559,45 @@ declare function useForm<FormFields extends Record<string | number, FormFieldVal
|
|
|
251
559
|
getSwitchProps: <FieldName extends keyof FormFields>(field: FieldName) => ComponentPropWithRef<ToggleInputRef, ToggleInputProps<FormFields[FieldName]>>;
|
|
252
560
|
focusField: (field: keyof FormFields) => void;
|
|
253
561
|
inputFieldRefs: Record<keyof FormFields, HTMLInputElement | undefined>;
|
|
254
|
-
textAreaRefs: Record<keyof FormFields, HTMLTextAreaElement | undefined>;
|
|
255
|
-
dropdownRefs: Record<keyof FormFields, HTMLDivElement | undefined>;
|
|
256
|
-
toggleInputRefs: Record<keyof FormFields, ToggleInputRef | undefined>;
|
|
257
|
-
validate: () => {};
|
|
258
|
-
onSubmit: (event?: React.FormEvent<HTMLFormElement>) => Promise<void>;
|
|
259
|
-
reset: () => void;
|
|
260
|
-
requiredFields: (keyof FormFields)[] | undefined;
|
|
261
|
-
isDirty: boolean;
|
|
262
|
-
isValid: boolean;
|
|
263
|
-
canSubmit: boolean;
|
|
264
|
-
};
|
|
265
|
-
declare function useUrlQuery(): {
|
|
266
|
-
setQuery: (query: Record<string, string | number>, keepHistory?: boolean) => void;
|
|
267
|
-
getQuery: (name: string) => string | null;
|
|
268
|
-
removeQuery: (name: string, keepHistory?: boolean) => void;
|
|
269
|
-
};
|
|
270
|
-
|
|
271
|
-
declare const getBrowser: () => BrowserName | undefined;
|
|
272
|
-
declare const getFormErrorObject: <FormFields extends ReturnType<typeof useForm>["values"]>(formValues: FormFields) => PartialRecord<keyof FormFields, string>;
|
|
273
|
-
|
|
274
|
-
declare const alertControls: {
|
|
275
|
-
createAlert: (alert: OmitProps<Alert, "id">) => Alert;
|
|
276
|
-
removeAlert: (alertId: string) => void;
|
|
277
|
-
};
|
|
278
|
-
declare const sideMenuControls: {
|
|
279
|
-
expand: () => void;
|
|
280
|
-
collapse: () => void;
|
|
281
|
-
toggleExpanded: () => void;
|
|
282
|
-
open: () => void;
|
|
283
|
-
close: () => void;
|
|
284
|
-
toggleOpened: () => void;
|
|
285
|
-
};
|
|
286
|
-
declare const filterHover: () => Record<"z05" | "z1" | "z2" | "z3", React.CSSProperties["filter"]>;
|
|
287
|
-
|
|
288
|
-
declare function generateLocalStorage<LocalStorage extends object>(): {
|
|
289
|
-
setItem: <StorageName extends keyof LocalStorage>(name: StorageName, value: LocalStorage[StorageName]) => void;
|
|
290
|
-
getItem: <StorageName extends keyof LocalStorage>(name: StorageName) => LocalStorage[StorageName] | undefined;
|
|
291
|
-
removeItem: (name: keyof LocalStorage) => void;
|
|
292
|
-
removeAllItems: () => void;
|
|
293
|
-
};
|
|
294
|
-
|
|
295
|
-
type TextAs = "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "p" | "span" | "label";
|
|
296
|
-
type TextProps<As extends TextAs = "p"> = {
|
|
297
|
-
/** @default "p" */
|
|
298
|
-
as?: As;
|
|
299
|
-
htmlContentTranslate?: React.ComponentProps<"div">["translate"];
|
|
300
|
-
} & OmitProps<React.ComponentProps<As>, "style"> & ComponentStyle & ComponentHoverStyle;
|
|
301
|
-
type TextComponentType = {
|
|
302
|
-
<As extends TextAs>(props: ComponentPropWithRef<HTMLParagraphElement, TextProps<As>>): React.ReactElement;
|
|
303
|
-
unknown: <As extends TextAs>(props: ComponentPropWithRef<HTMLParagraphElement, TextProps<As>>) => React.ReactElement;
|
|
304
|
-
oneLine: <As extends TextAs>(props: ComponentPropWithRef<HTMLParagraphElement, TextProps<As>>) => React.ReactElement;
|
|
305
|
-
};
|
|
306
|
-
declare const TextComponent: TextComponentType;
|
|
307
|
-
declare const Text: typeof TextComponent & {
|
|
308
|
-
unknown: typeof TextComponent.unknown;
|
|
309
|
-
oneLine: typeof TextComponent.oneLine;
|
|
310
|
-
};
|
|
311
|
-
|
|
312
|
-
type PageHeaderProps = {
|
|
313
|
-
icon?: IconName | AnyOtherString;
|
|
314
|
-
image?: AssetName | AnyOtherString;
|
|
315
|
-
imageUrl?: string;
|
|
316
|
-
imageSize?: number;
|
|
317
|
-
/** @default false */
|
|
318
|
-
imageAzProfileImage?: boolean;
|
|
319
|
-
title?: string | React.ReactNode;
|
|
320
|
-
/** @default "h1" */
|
|
321
|
-
titleAs?: TextAs;
|
|
322
|
-
/** @default textPrimary */
|
|
323
|
-
titleColor?: React.CSSProperties["color"];
|
|
324
|
-
titleRightElement?: React.ReactNode;
|
|
325
|
-
description?: string | React.ReactNode;
|
|
326
|
-
/** @default textSecondary */
|
|
327
|
-
descriptionColor?: React.CSSProperties["color"];
|
|
328
|
-
textAlign?: React.CSSProperties["textAlign"];
|
|
329
|
-
rightElement?: React.ReactNode;
|
|
330
|
-
/** @default false */
|
|
331
|
-
lightMode?: boolean;
|
|
332
|
-
} & Pick<ComponentMarginProps, "marginBottom">;
|
|
333
|
-
type PageHeaderComponentType = {
|
|
334
|
-
(props: ComponentPropWithRef<HTMLDivElement, PageHeaderProps>): React.ReactElement;
|
|
562
|
+
textAreaRefs: Record<keyof FormFields, HTMLTextAreaElement | undefined>;
|
|
563
|
+
dropdownRefs: Record<keyof FormFields, HTMLDivElement | undefined>;
|
|
564
|
+
toggleInputRefs: Record<keyof FormFields, ToggleInputRef | undefined>;
|
|
565
|
+
validate: () => {};
|
|
566
|
+
onSubmit: (event?: React.FormEvent<HTMLFormElement>) => Promise<void>;
|
|
567
|
+
reset: () => void;
|
|
568
|
+
requiredFields: (keyof FormFields)[] | undefined;
|
|
569
|
+
isDirty: boolean;
|
|
570
|
+
isValid: boolean;
|
|
571
|
+
canSubmit: boolean;
|
|
572
|
+
};
|
|
573
|
+
declare function useUrlQuery(): {
|
|
574
|
+
setQuery: (query: Record<string, string | number>, keepHistory?: boolean) => void;
|
|
575
|
+
getQuery: (name: string) => string | null;
|
|
576
|
+
removeQuery: (name: string, keepHistory?: boolean) => void;
|
|
335
577
|
};
|
|
336
|
-
declare const PageHeaderComponent: PageHeaderComponentType;
|
|
337
|
-
declare const PageHeader: typeof PageHeaderComponent & {};
|
|
338
578
|
|
|
339
|
-
|
|
340
|
-
|
|
341
|
-
|
|
342
|
-
|
|
343
|
-
|
|
344
|
-
|
|
345
|
-
htmlContentTranslate?: React.ComponentProps<"div">["translate"];
|
|
346
|
-
onClickWithValue?: (value: Value) => void;
|
|
347
|
-
} & OmitProps<React.ComponentProps<"div">, "style" | "defaultValue" | "translate"> & ComponentStyle & ComponentHoverStyle;
|
|
348
|
-
type DivComponentType = {
|
|
349
|
-
<Value>(props: ComponentPropWithRef<HTMLDivElement, DivProps<Value>>): React.ReactElement;
|
|
350
|
-
row: <Value>(props: ComponentPropWithRef<HTMLDivElement, OmitProps<DivProps<Value>, "display" | "flexDirection"> & {
|
|
351
|
-
flexReverse?: boolean;
|
|
352
|
-
invertFlexDirection?: boolean;
|
|
353
|
-
}>) => React.ReactElement;
|
|
354
|
-
column: <Value>(props: ComponentPropWithRef<HTMLDivElement, OmitProps<DivProps<Value>, "display" | "flexDirection"> & {
|
|
355
|
-
flexReverse?: boolean;
|
|
356
|
-
invertFlexDirection?: boolean;
|
|
357
|
-
}>) => React.ReactElement;
|
|
358
|
-
grid: <Value>(props: ComponentPropWithRef<HTMLDivElement, OmitProps<DivProps<Value>, "display">>) => React.ReactElement;
|
|
359
|
-
box: <Value>(props: ComponentPropWithRef<HTMLDivElement, DivProps<Value> & OmitProps<PageHeaderProps, "marginBottom"> & {
|
|
360
|
-
headerBackgroundColor?: string;
|
|
361
|
-
/** @default theme.colors.primary */
|
|
362
|
-
activeColor?: string;
|
|
363
|
-
isActive?: boolean;
|
|
364
|
-
}>) => React.ReactElement;
|
|
579
|
+
declare const getBrowser: () => BrowserName | undefined;
|
|
580
|
+
declare const getFormErrorObject: <FormFields extends ReturnType<typeof useForm>["values"]>(formValues: FormFields) => PartialRecord<keyof FormFields, string>;
|
|
581
|
+
|
|
582
|
+
declare const alertControls: {
|
|
583
|
+
createAlert: (alert: OmitProps<Alert, "id">) => Alert;
|
|
584
|
+
removeAlert: (alertId: string) => void;
|
|
365
585
|
};
|
|
366
|
-
declare const
|
|
367
|
-
|
|
368
|
-
|
|
369
|
-
|
|
370
|
-
|
|
371
|
-
|
|
586
|
+
declare const sideMenuControls: {
|
|
587
|
+
expand: () => void;
|
|
588
|
+
collapse: () => void;
|
|
589
|
+
toggleExpanded: () => void;
|
|
590
|
+
open: () => void;
|
|
591
|
+
close: () => void;
|
|
592
|
+
toggleOpened: () => void;
|
|
593
|
+
};
|
|
594
|
+
declare const filterHover: () => Record<"z05" | "z1" | "z2" | "z3", React.CSSProperties["filter"]>;
|
|
595
|
+
|
|
596
|
+
declare function generateLocalStorage<LocalStorage extends object>(): {
|
|
597
|
+
setItem: <StorageName extends keyof LocalStorage>(name: StorageName, value: LocalStorage[StorageName]) => void;
|
|
598
|
+
getItem: <StorageName extends keyof LocalStorage>(name: StorageName) => LocalStorage[StorageName] | undefined;
|
|
599
|
+
removeItem: (name: keyof LocalStorage) => void;
|
|
600
|
+
removeAllItems: () => void;
|
|
372
601
|
};
|
|
373
602
|
|
|
374
603
|
type LoaderProps = {
|
|
@@ -410,7 +639,7 @@ type IconProps = {
|
|
|
410
639
|
type IconComponent = {
|
|
411
640
|
(props: ComponentPropWithRef<SVGSVGElement, IconProps>): React.ReactElement;
|
|
412
641
|
};
|
|
413
|
-
declare const _default$
|
|
642
|
+
declare const _default$1: IconComponent;
|
|
414
643
|
|
|
415
644
|
type ImageProps = {
|
|
416
645
|
name?: AssetName | AnyOtherString;
|
|
@@ -426,95 +655,10 @@ type ImageComponent = {
|
|
|
426
655
|
}>) => React.ReactElement;
|
|
427
656
|
};
|
|
428
657
|
declare const Image: ImageComponent;
|
|
429
|
-
declare const _default
|
|
658
|
+
declare const _default: ImageComponent & {
|
|
430
659
|
profileImage: typeof Image.profileImage;
|
|
431
660
|
};
|
|
432
661
|
|
|
433
|
-
type ButtonProps<Value> = {
|
|
434
|
-
text?: string;
|
|
435
|
-
value?: Value;
|
|
436
|
-
href?: string;
|
|
437
|
-
download?: string;
|
|
438
|
-
target?: React.ComponentProps<"a">["target"];
|
|
439
|
-
icon?: IconName | AnyOtherString;
|
|
440
|
-
/** @default "left" */
|
|
441
|
-
iconPosition?: "left" | "right";
|
|
442
|
-
/** @default Same as text color */
|
|
443
|
-
iconColor?: string;
|
|
444
|
-
/** @default 16 */
|
|
445
|
-
iconSize?: number;
|
|
446
|
-
image?: AssetName | AnyOtherString;
|
|
447
|
-
/** @default "left" */
|
|
448
|
-
imagePosition?: "left" | "right";
|
|
449
|
-
/** @default 16 */
|
|
450
|
-
imageWidth?: number;
|
|
451
|
-
/** @default undefined */
|
|
452
|
-
imageHeight?: number;
|
|
453
|
-
loaderName?: LoaderName | AnyOtherString;
|
|
454
|
-
/** @default 16 */
|
|
455
|
-
loaderSize?: number;
|
|
456
|
-
/** @default false */
|
|
457
|
-
isLoading?: boolean;
|
|
458
|
-
/** @default false */
|
|
459
|
-
disabled?: boolean;
|
|
460
|
-
/** @default false */
|
|
461
|
-
isSmall?: boolean;
|
|
462
|
-
/** @default false */
|
|
463
|
-
isSubmit?: boolean;
|
|
464
|
-
onClickWithValue?: (value: Value) => void;
|
|
465
|
-
} & OmitProps<React.ComponentProps<"button">, "style" | "defaultValue" | "translate" | "value"> & ComponentStyle & ComponentHoverStyle;
|
|
466
|
-
type ButtonComponent = {
|
|
467
|
-
<Value>(props: ButtonProps<Value>): React.ReactElement;
|
|
468
|
-
secondary: <Value>(props: ButtonProps<Value>) => React.ReactElement;
|
|
469
|
-
destructive: <Value>(props: ButtonProps<Value>) => React.ReactElement;
|
|
470
|
-
icon: <Value>(props: OmitProps<ButtonProps<Value>, "icon" | "width" | "height" | "isSmall"> & {
|
|
471
|
-
icon: IconName | AnyOtherString;
|
|
472
|
-
/** @default 16 */
|
|
473
|
-
size?: number;
|
|
474
|
-
buttonSize?: number;
|
|
475
|
-
/** @default "#000000" */
|
|
476
|
-
backgroundButtonColor?: string;
|
|
477
|
-
}) => React.ReactElement;
|
|
478
|
-
upload: <Value>(props: OmitProps<ButtonProps<Value>, "onClick"> & {
|
|
479
|
-
accept?: ComponentProps<"input">["accept"];
|
|
480
|
-
/** @default false */
|
|
481
|
-
multiple?: boolean;
|
|
482
|
-
onUpload?: (files: FileList | null) => void;
|
|
483
|
-
}) => React.ReactElement;
|
|
484
|
-
};
|
|
485
|
-
declare const ButtonComponent: ButtonComponent;
|
|
486
|
-
declare const Button: typeof ButtonComponent & {
|
|
487
|
-
secondary: typeof ButtonComponent.secondary;
|
|
488
|
-
destructive: typeof ButtonComponent.destructive;
|
|
489
|
-
icon: typeof ButtonComponent.icon;
|
|
490
|
-
upload: typeof ButtonComponent.upload;
|
|
491
|
-
};
|
|
492
|
-
|
|
493
|
-
type DividerProps = {
|
|
494
|
-
/** @default 1 */
|
|
495
|
-
width?: number;
|
|
496
|
-
/** @default border */
|
|
497
|
-
backgroundColor?: string;
|
|
498
|
-
} & ComponentMarginProps;
|
|
499
|
-
type VerticalDividerProps = DividerProps & {
|
|
500
|
-
/** @default "100%" */
|
|
501
|
-
height?: number;
|
|
502
|
-
};
|
|
503
|
-
type HorizontalDividerProps = DividerProps & {
|
|
504
|
-
text?: string;
|
|
505
|
-
textFontSize?: React.CSSProperties["fontSize"];
|
|
506
|
-
/** @default textSecondary */
|
|
507
|
-
textColor?: React.CSSProperties["color"];
|
|
508
|
-
};
|
|
509
|
-
type DividerComponentType = {
|
|
510
|
-
vertical: (props: ComponentPropWithRef<HTMLDivElement, VerticalDividerProps>) => React.ReactElement;
|
|
511
|
-
horizontal: (props: ComponentPropWithRef<HTMLDivElement, HorizontalDividerProps>) => React.ReactElement;
|
|
512
|
-
};
|
|
513
|
-
declare const _default$1: {
|
|
514
|
-
vertical: DividerComponentType["vertical"];
|
|
515
|
-
horizontal: DividerComponentType["horizontal"];
|
|
516
|
-
};
|
|
517
|
-
|
|
518
662
|
type ModalProps = {
|
|
519
663
|
/**
|
|
520
664
|
* If you want to have a small modal, you can use 660px as it looks good on most screens.
|
|
@@ -599,101 +743,6 @@ declare const PageHolder: typeof PageHolderComponent & {
|
|
|
599
743
|
center: typeof PageHolderComponent.center;
|
|
600
744
|
};
|
|
601
745
|
|
|
602
|
-
type ChipProps<Value = unknown> = {
|
|
603
|
-
text: string | React.ReactNode;
|
|
604
|
-
beforeText?: React.ReactNode;
|
|
605
|
-
afterText?: React.ReactNode;
|
|
606
|
-
/** @default theme.colors.textPrimary */
|
|
607
|
-
color?: string;
|
|
608
|
-
/** @default backgroundSecondary */
|
|
609
|
-
backgroundColor?: string;
|
|
610
|
-
/** @default theme.styles.borderRadius / 1.3 */
|
|
611
|
-
borderRadius?: number;
|
|
612
|
-
/** @default false */
|
|
613
|
-
isCircle?: boolean;
|
|
614
|
-
value?: Value;
|
|
615
|
-
onClick?: (event: React.MouseEvent<HTMLDivElement, globalThis.MouseEvent>) => void;
|
|
616
|
-
onClickWithValue?: (value: Value) => void;
|
|
617
|
-
} & Pick<DivProps, "border" | "borderColor" | "borderWidth" | "borderStyle" | keyof ComponentPaddingProps | "transition" | "height"> & Pick<TextProps, "fontFamily" | "fontSize" | "fontWeight" | "fontStyle">;
|
|
618
|
-
type ChipComponentType = {
|
|
619
|
-
<Value>(props: ComponentPropWithRef<HTMLDivElement, ChipProps<Value>>): React.ReactElement;
|
|
620
|
-
colored: <Value>(props: ComponentPropWithRef<HTMLDivElement, OmitProps<ChipProps<Value>, "color" | "backgroundColor"> & {
|
|
621
|
-
color?: string;
|
|
622
|
-
/** @default false */
|
|
623
|
-
withWhiteBackground?: boolean;
|
|
624
|
-
}>) => React.ReactElement;
|
|
625
|
-
};
|
|
626
|
-
declare const ChipComponent: ChipComponentType;
|
|
627
|
-
declare const Chip: typeof ChipComponent & {
|
|
628
|
-
colored: typeof ChipComponent.colored;
|
|
629
|
-
};
|
|
630
|
-
|
|
631
|
-
type DropdownOption<Value, Data = unknown> = {
|
|
632
|
-
value: Value;
|
|
633
|
-
label: string;
|
|
634
|
-
/** @default false */
|
|
635
|
-
disabled?: boolean;
|
|
636
|
-
searchValues?: string[];
|
|
637
|
-
data?: Data;
|
|
638
|
-
} & ({
|
|
639
|
-
renderType?: "default";
|
|
640
|
-
} | {
|
|
641
|
-
renderType?: "chip";
|
|
642
|
-
chipProps?: OmitProps<React.ComponentProps<typeof Chip>, "text" | "value" | "onClick" | "onClickWithValue" | "ref">;
|
|
643
|
-
} | {
|
|
644
|
-
renderType?: "chip.colored";
|
|
645
|
-
chipProps?: OmitProps<React.ComponentProps<typeof Chip.colored>, "text" | "value" | "onClick" | "onClickWithValue" | "ref">;
|
|
646
|
-
});
|
|
647
|
-
type DropdownProps<Value, Data = unknown> = {
|
|
648
|
-
label?: string;
|
|
649
|
-
labelColor?: string;
|
|
650
|
-
errorText?: string;
|
|
651
|
-
infoText?: string;
|
|
652
|
-
/** @default false */
|
|
653
|
-
required?: boolean;
|
|
654
|
-
name?: string;
|
|
655
|
-
/** @default false */
|
|
656
|
-
disabled?: boolean;
|
|
657
|
-
options: DropdownOption<Value, Data>[];
|
|
658
|
-
placeholder?: string;
|
|
659
|
-
leftIcon?: IconName | AnyOtherString;
|
|
660
|
-
inputFieldClassName?: string;
|
|
661
|
-
/** @default false */
|
|
662
|
-
withSearch?: boolean;
|
|
663
|
-
/** @default false */
|
|
664
|
-
withDebounce?: boolean;
|
|
665
|
-
/** @default 0.5s */
|
|
666
|
-
debounceDelay?: number;
|
|
667
|
-
/** @default false */
|
|
668
|
-
debounceIsLoading?: boolean;
|
|
669
|
-
debounceMinimumSymbolsRequired?: number;
|
|
670
|
-
/** @default false */
|
|
671
|
-
withoutClearButton?: boolean;
|
|
672
|
-
/** @default false */
|
|
673
|
-
withoutRenderingOptionsWhenClosed?: boolean;
|
|
674
|
-
onChangeSearch?: (query: string) => void;
|
|
675
|
-
renderOption?: (option: DropdownOption<Value, Data>, index: number, isSelected: boolean) => React.ReactNode;
|
|
676
|
-
renderOptionDivider?: (previousOption: DropdownOption<Value, Data> | undefined, nextOption: DropdownOption<Value, Data> | undefined, previousOptionIndex: number, nextOptionIndex: number) => React.ReactNode;
|
|
677
|
-
} & OmitProps<DivProps, "onChange" | "defaultChecked"> & ({
|
|
678
|
-
withMultiselect?: false;
|
|
679
|
-
value?: Value;
|
|
680
|
-
defaultValue?: Value;
|
|
681
|
-
onChange?: (value: Value | undefined) => void;
|
|
682
|
-
} | {
|
|
683
|
-
withMultiselect: true;
|
|
684
|
-
value?: Value[];
|
|
685
|
-
defaultValue?: Value[];
|
|
686
|
-
onChange?: (value: Value[] | undefined) => void;
|
|
687
|
-
});
|
|
688
|
-
type DropdownComponentType = {
|
|
689
|
-
<Value, Data>(props: ComponentPropWithRef<HTMLDivElement, DropdownProps<Value, Data>>): React.ReactElement;
|
|
690
|
-
countries: (props: ComponentPropWithRef<HTMLDivElement, OmitProps<DropdownProps<string, Country>, "options">>) => React.ReactElement;
|
|
691
|
-
};
|
|
692
|
-
declare const DropdownComponent: DropdownComponentType;
|
|
693
|
-
declare const Dropdown: typeof DropdownComponent & {
|
|
694
|
-
countries: typeof DropdownComponent.countries;
|
|
695
|
-
};
|
|
696
|
-
|
|
697
746
|
type FormProps = {
|
|
698
747
|
form?: OmitProps<ReturnType<typeof useForm>, "focusField">;
|
|
699
748
|
name?: string;
|
|
@@ -727,18 +776,6 @@ type FormComponentType = {
|
|
|
727
776
|
declare const FormComponent: FormComponentType;
|
|
728
777
|
declare const Form: typeof FormComponent & {};
|
|
729
778
|
|
|
730
|
-
type LabelProps = {
|
|
731
|
-
text?: string;
|
|
732
|
-
/** @default false */
|
|
733
|
-
required?: boolean;
|
|
734
|
-
/** @default false */
|
|
735
|
-
isError?: boolean;
|
|
736
|
-
color?: string;
|
|
737
|
-
htmlFor?: string;
|
|
738
|
-
};
|
|
739
|
-
declare function Label({ text, required, isError, color, htmlFor }: LabelProps): react_jsx_runtime.JSX.Element;
|
|
740
|
-
declare const _default: react.MemoExoticComponent<typeof Label>;
|
|
741
|
-
|
|
742
779
|
type FormRowProps = {
|
|
743
780
|
oneItemOnly?: boolean;
|
|
744
781
|
/**
|
|
@@ -1119,4 +1156,4 @@ type LocalStoragePluginOptions = {
|
|
|
1119
1156
|
declare const defaultLocalStoragePluginOptions: Required<LocalStoragePluginOptions>;
|
|
1120
1157
|
declare const localStoragePlugin: BetterHtmlPluginConstructor<LocalStoragePluginOptions>;
|
|
1121
1158
|
|
|
1122
|
-
export { type Alert, type AlertDisplay, type AlertDuration, type AlertType, type AlertsPluginOptions, type AppConfig, type BetterHtmlConfig, type BetterHtmlPlugin, _default$
|
|
1159
|
+
export { type Alert, type AlertDisplay, type AlertDuration, type AlertType, type AlertsPluginOptions, type AppConfig, type BetterHtmlConfig, type BetterHtmlPlugin, _default$2 as BetterHtmlProvider, type BetterHtmlProviderConfig, type BrowserName, Button, type ButtonProps, Chip, type ChipProps, ColorThemeSwitch, type ColorThemeSwitchProps, type ComponentHoverStyle, type ComponentMarginProps, type ComponentPaddingProps, Div, type DivProps, _default$4 as Divider, Dropdown, type DropdownOption, type DropdownProps, Foldable, type FoldableProps, type FoldableRef, Form, type FormProps, FormRow, type FormRowProps, type HorizontalDividerProps, _default$1 as Icon, type IconProps, _default as Image, type ImageProps, InputField, type InputFieldProps, _default$3 as Label, type LabelProps, Loader, type LoaderProps, type LocalStoragePluginOptions, Modal, type ModalProps, type ModalRef, PageHeader, type PageHeaderProps, PageHolder, type PageHolderProps, Pagination, type PluginName, type ReactRouterDomPluginOptions, SideMenu, type SideMenuItem, type SideMenuProps, type TabGroup, Table, type TableColumn, type TableFilterData, type TableListFilterListItem, type TableProps, type TableRef, Tabs, type TabsProps, type TabsRef, Text, type TextAs, type TextProps, type TextareaFieldProps, _default$5 as ToggleInput, type ToggleInputProps, type ToggleInputRef, Tooltip, type TooltipProps, type TooltipRef, type VerticalDividerProps, alertControls, alertsPlugin, defaultAlertsPluginOptions, defaultLocalStoragePluginOptions, defaultReactRouterDomPluginOptions, filterHover, generateLocalStorage, getBrowser, getFormErrorObject, isMobileDevice, localStoragePlugin, reactRouterDomPlugin, sideMenuControls, useAlertControls, useBetterHtmlContext, useForm, useMediaQuery, usePageResize, usePageScroll, useUrlQuery };
|