@mmb-digital/design-system-web 0.1.98 → 0.1.100

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import React__default, { ReactNode, FC, PropsWithChildren, RefObject, MouseEvent, ReactElement, HTMLProps, SyntheticEvent, RefAttributes, FocusEvent, ChangeEvent, HTMLInputTypeAttribute, ComponentType, HTMLAttributes } from 'react';
+import React__default, { ReactNode, FC, PropsWithChildren, RefObject, MouseEvent, ReactElement, HTMLProps, SyntheticEvent, RefAttributes, FocusEvent, ChangeEvent, ComponentType, HTMLInputTypeAttribute, ComponentProps, HTMLAttributes } from 'react';
 import { MessageDescriptor } from 'react-intl';
 import { PrimitiveType } from 'intl-messageformat';
 import { ReactDatePickerProps } from 'react-datepicker';
@@ -10,7 +10,7 @@ import * as react_select_dist_declarations_src_Select from 'react-select/dist/de
 import * as react_select from 'react-select';
 import { Options, Props, SelectComponentsConfig, PropsValue, SingleValue as SingleValue$1, GroupBase } from 'react-select';
 import * as react_hook_form from 'react-hook-form';
-import { RegisterOptions, FieldValues, Control, FieldPath } from 'react-hook-form';
+import { FieldValues, Control, FieldPath, RegisterOptions } from 'react-hook-form';
 import { FactoryOpts } from 'imask';
 
 interface AccordionItemType {
@@ -224,7 +224,7 @@ declare enum InfoboxSize {
 }
 interface InfoboxProps {
     children: ReactNode;
-    colorScheme?: ColorScheme;
+    colorScheme: ColorScheme;
     fullWidth?: boolean;
     iconProduct?: IconProductType;
     isWarning?: boolean;
@@ -581,18 +581,6 @@ declare enum InputWeight {
     HEAVY_900 = "heavy",
     ULTRA_950 = "ultra"
 }
-interface FieldWrapperValues {
-    childrenWidth?: Property.Width;
-    colorScheme?: ColorScheme;
-    errorMessage?: ReactNode;
-    hasError?: boolean;
-    hintText?: ReactNode;
-    id?: string;
-    label?: ReactNode;
-    labelSuffix?: ReactNode;
-    layout?: FieldWrapperLayout;
-    tooltip?: TooltipFloatingElement;
-}
 interface InputProps {
     colorInput?: Property.Color | undefined;
     disabled?: boolean;
@@ -605,10 +593,36 @@ interface InputProps {
     value?: string;
 }
 
-interface FieldWrapperProps extends FieldWrapperValues, PropsWithChildren {
+declare const resolveFieldWrapperHasError: (hasErrorProp: boolean | undefined, errorMessage: ReactNode) => boolean;
+interface FieldWrapperProps {
+    children?: ReactNode;
+    /** @deprecated Use `controlAndErrorWidth` instead. */
+    childrenWidth?: Property.Width;
+    colorScheme?: ColorScheme;
+    controlAndErrorWidth?: Property.Width;
+    controlMobileWidth?: Property.Width;
+    controlWidth?: Property.Width;
+    errorMessage?: ReactNode;
+    /** @default isRenderable(errorMessage) */
+    hasError?: boolean;
+    hintText?: ReactNode;
+    id?: string;
+    label?: ReactNode;
+    labelId?: string;
+    labelSuffix?: ReactNode;
+    layout?: FieldWrapperLayout;
+    tooltip?: TooltipFloatingElement;
 }
+declare const FieldWrapperContext: React__default.Context<Pick<FieldWrapperProps, "hasError" | "labelId">>;
+/** @deprecated Use `FieldWrapperProps` or `ComponentProps<typeof YourWrappedComponent>`  instead. */
+type FieldWrapperValues = Omit<FieldWrapperProps, 'children'>;
+declare const FieldWrapper: (props: FieldWrapperProps) => React__default.JSX.Element;
 
-declare const FieldWrapper: FC<FieldWrapperProps>;
+interface FormControlProps {
+    hasError?: boolean;
+    id?: string;
+}
+declare const withFieldWrapper: <TProps extends FormControlProps, TElement extends HTMLElement>(FormControl: ComponentType<TProps>) => React__default.ForwardRefExoticComponent<React__default.PropsWithoutRef<Omit<FieldWrapperProps, "children"> & TProps> & React__default.RefAttributes<TElement>>;
 
 interface RadioGeneralProps extends RefAttributes<HTMLInputElement> {
     readonly checked?: boolean;
@@ -677,6 +691,80 @@ interface RadioButtonsHorizontalProps {
 
 declare const RadioButtonsHorizontal: React__default.FC<RadioButtonsHorizontalProps>;
 
+type SelectProps<T extends FieldValues> = SelectBaseProps & {
+    control: Control<T, any>;
+    defaultValue?: Options<SelectOption> | null;
+    name: FieldPath<T>;
+};
+declare enum SelectType {
+    ASYNC_CREATABLE_SELECT = "AsyncCreatableSelect",
+    ASYNC_SELECT = "AsyncSelect",
+    CREATABLE_SELECT = "CreatableSelect",
+    REACT_SELECT = "ReactSelect"
+}
+type Group = GroupBase<SelectOption>;
+type SelectBaseProps = Props<SelectOption, false> & {
+    readonly customComponents?: SelectComponentsConfig<SelectOption, false, Group>;
+    readonly isError?: boolean;
+    readonly options?: Options<SelectOption>;
+    readonly type?: SelectType;
+    readonly value?: PropsValue<SelectOption>;
+};
+type SelectFieldProps<T extends FieldValues> = FieldWrapperValues & SelectProps<T>;
+interface SelectOption {
+    readonly icon?: ReactNode | string;
+    readonly label: string;
+    readonly value?: string;
+}
+type SingleValue = SingleValue$1<SelectOption>;
+
+declare const SelectBase: React__default.ForwardRefExoticComponent<Omit<react_select_dist_declarations_src_Select.PublicBaseSelectProps<SelectOption, false, react_select.GroupBase<SelectOption>>, "onChange" | "value" | "inputValue" | "menuIsOpen" | "onInputChange" | "onMenuOpen" | "onMenuClose"> & Partial<react_select_dist_declarations_src_Select.PublicBaseSelectProps<SelectOption, false, react_select.GroupBase<SelectOption>>> & react_select_dist_declarations_src_useStateManager.StateManagerAdditionalProps<SelectOption> & {
+    readonly customComponents?: Partial<react_select_dist_declarations_src_components.SelectComponents<SelectOption, false, Group>> | undefined;
+    readonly isError?: boolean | undefined;
+    readonly options?: react_select.Options<SelectOption> | undefined;
+    readonly type?: SelectType | undefined;
+    readonly value?: react_select.PropsValue<SelectOption> | undefined;
+} & React__default.RefAttributes<any>>;
+
+declare const SelectField: <T extends FieldValues>(props: SelectFieldProps<T>) => React__default.JSX.Element;
+
+declare const Select: <T extends FieldValues>(props: SelectProps<T>) => React__default.JSX.Element;
+
+interface AsyncSelectProps extends SelectBaseProps {
+    control: Control;
+    defaultPlaceholder?: string;
+    name: string;
+    optionIcon?: IconSystemProps;
+}
+
+declare const AsyncSelect: React__default.FC<AsyncSelectProps>;
+
+interface ToggleProps {
+    defaultValue?: boolean;
+    disabled?: boolean;
+    id: string | undefined;
+    label?: ReactNode | string;
+    name: string;
+    onChange?: (value: boolean) => void;
+}
+
+/**
+ * Currently not compatible with react-hook-form
+ */
+declare const Toggle: FC<ToggleProps>;
+
+interface TextAreaProps extends RefAttributes<HTMLTextAreaElement>, FieldWrapperValues {
+    disabled?: boolean;
+    hasError?: boolean;
+    onBlur?: ((event: FocusEvent<HTMLTextAreaElement>) => Promise<boolean | void>) | undefined;
+    onChange?: ((event: ChangeEvent<HTMLTextAreaElement>) => Promise<boolean | void>) | undefined;
+    placeholder?: string;
+    rows?: number;
+    value?: string;
+}
+
+declare const TextArea: FC<TextAreaProps>;
+
 interface InputBaseProps extends RefAttributes<HTMLInputElement> {
     button?: ReactNode;
     colorInput?: Property.Color | undefined;
@@ -714,6 +802,7 @@ interface InputLabelProps {
     hasError?: boolean;
     id?: string;
     label?: ReactNode;
+    labelId?: string;
     size?: InputLabelSize;
     suffix?: ReactNode;
     tooltip?: TooltipFloatingElement;
@@ -733,20 +822,20 @@ interface MaskedInputBaseProps extends InputBaseProps {
 }
 declare const MaskedInputBase: React__default.ForwardRefExoticComponent<Omit<MaskedInputBaseProps, "ref"> & React__default.RefAttributes<HTMLInputElement>>;
 
-interface MaskedInputProps extends FieldWrapperValues, MaskedInputBaseProps {
-}
-declare const MaskedInput: React__default.ForwardRefExoticComponent<Omit<MaskedInputProps, "ref"> & React__default.RefAttributes<HTMLInputElement>>;
+declare const MaskedInput: React.ForwardRefExoticComponent<Omit<Omit<FieldWrapperProps, "children"> & MaskedInputBaseProps, "ref"> & React.RefAttributes<HTMLInputElement>>;
+type MaskedInputProps = ComponentProps<typeof MaskedInput>;
 
-type RequiredMaskedInputProps = Pick<MaskedInputProps, 'name'>;
-type ManagedMaskedInputProps = Pick<MaskedInputProps, 'errorMessage' | 'hasError' | 'onAccept' | 'onBlur' | 'value'>;
-declare const withMaskedInputField: <TProps extends object>(component: ComponentType<ManagedMaskedInputProps & RequiredMaskedInputProps & TProps>) => (props: RequiredMaskedInputProps & TProps & {
-    options?: RegisterOptions;
+type ManagedMaskedInputProps = Pick<MaskedInputProps, 'errorMessage' | 'onAccept' | 'onBlur' | 'value'>;
+declare const withMaskedInputField: <TProps extends ManagedMaskedInputProps>(Component: ComponentType<TProps>) => <TFieldValues extends FieldValues>(props: TProps & {
+    name: FieldPath<TFieldValues>;
+    options?: RegisterOptions<TFieldValues>;
 }) => React__default.JSX.Element;
-declare const MaskedInputField: (props: RequiredMaskedInputProps & Omit<MaskedInputProps, "ref"> & React__default.RefAttributes<HTMLInputElement> & {
-    options?: RegisterOptions | undefined;
+declare const MaskedInputField: <TFieldValues extends FieldValues>(props: Omit<Omit<FieldWrapperProps, "children"> & MaskedInputBaseProps, "ref"> & React__default.RefAttributes<HTMLInputElement> & {
+    name: react_hook_form.Path<TFieldValues>;
+    options?: RegisterOptions<TFieldValues> | undefined;
 }) => React__default.JSX.Element;
 
-interface NumberInputProps extends FieldWrapperValues, Omit<MaskedInputBaseProps, 'maskOptions'> {
+interface NumberInputProps extends Omit<MaskedInputProps, 'maskOptions'> {
     allowNegative?: boolean;
     decimalPlaces?: number;
     integerPlaces?: number;
@@ -754,10 +843,9 @@ interface NumberInputProps extends FieldWrapperValues, Omit<MaskedInputBaseProps
 }
 declare const NumberInput: React__default.ForwardRefExoticComponent<Omit<NumberInputProps, "ref"> & React__default.RefAttributes<HTMLInputElement>>;
 
-declare const NumberInputField: (props: {
-    name: string;
-} & Omit<NumberInputProps, "ref"> & React.RefAttributes<HTMLInputElement> & {
-    options?: react_hook_form.RegisterOptions | undefined;
+declare const NumberInputField: <TFieldValues extends react_hook_form.FieldValues>(props: Omit<NumberInputProps, "ref"> & React.RefAttributes<HTMLInputElement> & {
+    name: react_hook_form.Path<TFieldValues>;
+    options?: react_hook_form.RegisterOptions<TFieldValues> | undefined;
 }) => React.JSX.Element;
 
 interface PhoneInputProps extends FieldWrapperValues, InputProps {
@@ -767,16 +855,15 @@ interface PhoneInputProps extends FieldWrapperValues, InputProps {
 
 declare const PhoneInput: FC<PhoneInputProps>;
 
-interface PhoneInputNextProps extends FieldWrapperValues, Omit<MaskedInputBaseProps, 'maskOptions'> {
+interface PhoneInputNextProps extends Omit<MaskedInputProps, 'maskOptions'> {
     maskOptions?: FactoryOpts;
     prefixColor?: Property.Color;
 }
 declare const PhoneInputNext: React__default.ForwardRefExoticComponent<Omit<PhoneInputNextProps, "ref"> & React__default.RefAttributes<HTMLInputElement>>;
 
-declare const PhoneInputField: (props: {
-    name: string;
-} & Omit<PhoneInputNextProps, "ref"> & React.RefAttributes<HTMLInputElement> & {
-    options?: react_hook_form.RegisterOptions | undefined;
+declare const PhoneInputField: <TFieldValues extends react_hook_form.FieldValues>(props: PhoneInputNextProps & {
+    name: react_hook_form.Path<TFieldValues>;
+    options?: react_hook_form.RegisterOptions<TFieldValues> | undefined;
 }) => React.JSX.Element;
 
 interface SearchInputProps extends FieldWrapperValues, InputProps {
@@ -845,80 +932,6 @@ interface TrailingTextInputProps extends InputProps, FieldWrapperValues {
 
 declare const TrailingTextInput: FC<TrailingTextInputProps>;
 
-type SelectProps<T extends FieldValues> = SelectBaseProps & {
-    control: Control<T, any>;
-    defaultValue?: Options<SelectOption> | null;
-    name: FieldPath<T>;
-};
-declare enum SelectType {
-    ASYNC_CREATABLE_SELECT = "AsyncCreatableSelect",
-    ASYNC_SELECT = "AsyncSelect",
-    CREATABLE_SELECT = "CreatableSelect",
-    REACT_SELECT = "ReactSelect"
-}
-type Group = GroupBase<SelectOption>;
-type SelectBaseProps = Props<SelectOption, false> & {
-    readonly customComponents?: SelectComponentsConfig<SelectOption, false, Group>;
-    readonly isError?: boolean;
-    readonly options?: Options<SelectOption>;
-    readonly type?: SelectType;
-    readonly value?: PropsValue<SelectOption>;
-};
-type SelectFieldProps<T extends FieldValues> = FieldWrapperValues & SelectProps<T>;
-interface SelectOption {
-    readonly icon?: ReactNode | string;
-    readonly label: string;
-    readonly value?: string;
-}
-type SingleValue = SingleValue$1<SelectOption>;
-
-declare const SelectBase: React__default.ForwardRefExoticComponent<Omit<react_select_dist_declarations_src_Select.PublicBaseSelectProps<SelectOption, false, react_select.GroupBase<SelectOption>>, "onChange" | "value" | "inputValue" | "menuIsOpen" | "onInputChange" | "onMenuOpen" | "onMenuClose"> & Partial<react_select_dist_declarations_src_Select.PublicBaseSelectProps<SelectOption, false, react_select.GroupBase<SelectOption>>> & react_select_dist_declarations_src_useStateManager.StateManagerAdditionalProps<SelectOption> & {
-    readonly customComponents?: Partial<react_select_dist_declarations_src_components.SelectComponents<SelectOption, false, Group>> | undefined;
-    readonly isError?: boolean | undefined;
-    readonly options?: react_select.Options<SelectOption> | undefined;
-    readonly type?: SelectType | undefined;
-    readonly value?: react_select.PropsValue<SelectOption> | undefined;
-} & React__default.RefAttributes<any>>;
-
-declare const SelectField: <T extends FieldValues>(props: SelectFieldProps<T>) => React__default.JSX.Element;
-
-declare const Select: <T extends FieldValues>(props: SelectProps<T>) => React__default.JSX.Element;
-
-interface AsyncSelectProps extends SelectBaseProps {
-    control: Control;
-    defaultPlaceholder?: string;
-    name: string;
-    optionIcon?: IconSystemProps;
-}
-
-declare const AsyncSelect: React__default.FC<AsyncSelectProps>;
-
-interface ToggleProps {
-    defaultValue?: boolean;
-    disabled?: boolean;
-    id: string | undefined;
-    label?: ReactNode | string;
-    name: string;
-    onChange?: (value: boolean) => void;
-}
-
-/**
- * Currently not compatible with react-hook-form
- */
-declare const Toggle: FC<ToggleProps>;
-
-interface TextAreaProps extends RefAttributes<HTMLTextAreaElement>, FieldWrapperValues {
-    disabled?: boolean;
-    hasError?: boolean;
-    onBlur?: ((event: FocusEvent<HTMLTextAreaElement>) => Promise<boolean | void>) | undefined;
-    onChange?: ((event: ChangeEvent<HTMLTextAreaElement>) => Promise<boolean | void>) | undefined;
-    placeholder?: string;
-    rows?: number;
-    value?: string;
-}
-
-declare const TextArea: FC<TextAreaProps>;
-
 declare enum TypographyVariant {
     H1 = "h1",
     H2 = "h2",
@@ -982,6 +995,8 @@ type StackProps = HTMLAttributes<HTMLDivElement> & {
 
 declare const Stack: React__default.FC<StackProps>;
 
+declare const isRenderable: (node: ReactNode) => node is string | number | React.ReactElement<any, string | React.JSXElementConstructor<any>> | Iterable<ReactNode> | React.ReactPortal;
+
 declare const theme: {
     readonly palette: {
         readonly gold100: "#fffcee";
@@ -1519,4 +1534,4 @@ declare const theme: {
     };
 };
 
-export { Accordion, AccordionContent, AccordionItem, type AccordionItemProps, AccordionKeyValue, type AccordionProps, AsyncSelect, Button, type ButtonProps, ButtonSize, ButtonStyle, ButtonType, CalculatorResult, CalculatorResultBox, type CalculatorResultBoxModal, type CalculatorResultBoxProps, type CalculatorResultProps, Checkbox, type CheckboxLabel, CheckboxPosition, type CheckboxProps, type ChooseColor, ColorScheme, type ColorSchemeObject, DatePicker, type DatePickerProps, EmailInput, type EmailInputProps, ErrorBox, type ErrorBoxItem, type ErrorBoxProps, FieldWrapper, FieldWrapperLayout, type FieldWrapperValues, _default as FormattedAmount, FormattedHtmlMessage, type FormattedHtmlMessageProps, FormattedMessage, type FormattedMessageProps, type FormattedMessageTypes, _default$1 as FormattedPercentage, GapSize, type GetColor, IconProduct, IconProductSize, IconProductType, IconSystem, IconSystemSize, IconSystemType, TooltipInfoConditional as InfoConditional, Infobox, type InfoboxProps, InfoboxSize, InfoboxVariant, InputBase, type InputBaseProps, InputLabel, type InputLabelProps, InputLabelSize, InputSize, InputTextAlign, InputWeight, Loader, LoaderOverlayBox, type LoaderOverlayBoxProps, type LoaderProps, LoaderSize, MaskedInput, MaskedInputBase, type MaskedInputBaseProps, MaskedInputField, type MaskedInputProps, MediaType, Modal, type ModalOnClose, type ModalProps, ModalVerticalPosition, ModalWidthType, NumberInput, NumberInputField, type NumberInputProps, PhoneInput, PhoneInputField, PhoneInputNext, type PhoneInputNextProps, type PhoneInputProps, Radio, type RadioBaseWithLabelProps, RadioButton, type RadioButtonLabel, RadioButtonLayout, type RadioButtonProps, RadioButtonsHorizontal, type RadioButtonsHorizontalItem, type RadioButtonsHorizontalLabel, type RadioButtonsHorizontalProps, type RadioLabel, RadioPosition, ReasonForClosing, SearchInput, type SearchInputProps, Select, SelectBase, SelectField, type SelectOption, type SelectProps, type SingleValue, Slider, type SliderBreakpoint, SliderInput, type SliderInputLabel, type SliderInputMinMax, type SliderInputProps, SliderInputRoundingType, type SliderProps, SliderStepType, type SliderSteps, Stack, StackDirection, type StackProps, type TabItemType, Table, TableBody, TableData, TableHead, TableHeadData, TableRow, TableVariant, Tabs, TabsActiveTabDefaultPosition, TabsItem, type TabsProps, TabsSize, type TabsType, TabsVariant, TextArea, type TextAreaProps, TextInput, type TextInputProps, Toggle, type ToggleProps, type TooltipFloatingElement, TooltipGeneral, type TooltipGeneralProps, TooltipInfo, type TooltipInfoConditionalProps, TooltipInfoDisplayMethod, TooltipInfoDisplayableCheck, type TooltipInfoDisplayableCheckProps, type TooltipInfoProps, TooltipPlacement, type TooltipRenderParent, TrailingTextInput, type TrailingTextInputProps, Typography, type TypographyProps, TypographyTextAlign, TypographyVariant, TypographyWeight, getColor, theme, useColorScheme, useCreateTooltipFloatingElement, useFormatAmount, useFormattedPercentage, useIsMessageDisplayable, withMaskedInputField };
+export { Accordion, AccordionContent, AccordionItem, type AccordionItemProps, AccordionKeyValue, type AccordionProps, AsyncSelect, Button, type ButtonProps, ButtonSize, ButtonStyle, ButtonType, CalculatorResult, CalculatorResultBox, type CalculatorResultBoxModal, type CalculatorResultBoxProps, type CalculatorResultProps, Checkbox, type CheckboxLabel, CheckboxPosition, type CheckboxProps, type ChooseColor, ColorScheme, type ColorSchemeObject, DatePicker, type DatePickerProps, EmailInput, type EmailInputProps, ErrorBox, type ErrorBoxItem, type ErrorBoxProps, FieldWrapper, FieldWrapperContext, FieldWrapperLayout, type FieldWrapperProps, type FieldWrapperValues, _default as FormattedAmount, FormattedHtmlMessage, type FormattedHtmlMessageProps, FormattedMessage, type FormattedMessageProps, type FormattedMessageTypes, _default$1 as FormattedPercentage, GapSize, type GetColor, IconProduct, IconProductSize, IconProductType, IconSystem, IconSystemSize, IconSystemType, TooltipInfoConditional as InfoConditional, Infobox, type InfoboxProps, InfoboxSize, InfoboxVariant, InputBase, type InputBaseProps, InputLabel, type InputLabelProps, InputLabelSize, InputSize, InputTextAlign, InputWeight, Loader, LoaderOverlayBox, type LoaderOverlayBoxProps, type LoaderProps, LoaderSize, MaskedInput, MaskedInputBase, type MaskedInputBaseProps, MaskedInputField, type MaskedInputProps, MediaType, Modal, type ModalOnClose, type ModalProps, ModalVerticalPosition, ModalWidthType, NumberInput, NumberInputField, type NumberInputProps, PhoneInput, PhoneInputField, PhoneInputNext, type PhoneInputNextProps, type PhoneInputProps, Radio, type RadioBaseWithLabelProps, RadioButton, type RadioButtonLabel, RadioButtonLayout, type RadioButtonProps, RadioButtonsHorizontal, type RadioButtonsHorizontalItem, type RadioButtonsHorizontalLabel, type RadioButtonsHorizontalProps, type RadioLabel, RadioPosition, ReasonForClosing, SearchInput, type SearchInputProps, Select, SelectBase, SelectField, type SelectOption, type SelectProps, type SingleValue, Slider, type SliderBreakpoint, SliderInput, type SliderInputLabel, type SliderInputMinMax, type SliderInputProps, SliderInputRoundingType, type SliderProps, SliderStepType, type SliderSteps, Stack, StackDirection, type StackProps, type TabItemType, Table, TableBody, TableData, TableHead, TableHeadData, TableRow, TableVariant, Tabs, TabsActiveTabDefaultPosition, TabsItem, type TabsProps, TabsSize, type TabsType, TabsVariant, TextArea, type TextAreaProps, TextInput, type TextInputProps, Toggle, type ToggleProps, type TooltipFloatingElement, TooltipGeneral, type TooltipGeneralProps, TooltipInfo, type TooltipInfoConditionalProps, TooltipInfoDisplayMethod, TooltipInfoDisplayableCheck, type TooltipInfoDisplayableCheckProps, type TooltipInfoProps, TooltipPlacement, type TooltipRenderParent, TrailingTextInput, type TrailingTextInputProps, Typography, type TypographyProps, TypographyTextAlign, TypographyVariant, TypographyWeight, getColor, isRenderable, resolveFieldWrapperHasError, theme, useColorScheme, useCreateTooltipFloatingElement, useFormatAmount, useFormattedPercentage, useIsMessageDisplayable, withFieldWrapper, withMaskedInputField };