@dfds-ui/forms 2.0.20-alpha.4a92bbb9 → 2.0.20-alpha.7dd0f764

package/cjs/select-field/SelectField.d.ts

@@ -0,0 +1,93 @@
+import React from 'react';
+import Select, { ActionMeta, createFilter, GroupBase, OptionsOrGroups, SingleValue } from 'react-select';
+import { BaseFieldProps } from '../types';
+export declare type BaseReactSelectProps = Omit<React.PropsWithRef<Select>, 'size' | 'css'>;
+export declare type Size = 'small' | 'medium' | 'large';
+export declare const ReactSelectWrapper: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: React.ElementType<any> | undefined;
+} & {
+    error?: boolean | undefined;
+    size?: string | undefined;
+    arrow?: boolean | undefined;
+    selected?: boolean | undefined;
+}, React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const Menu: (props: any) => JSX.Element;
+export declare type SelectFieldProps<T = string> = BaseFieldProps & {
+    assistiveText?: string;
+    autoFocus?: boolean;
+    className?: string;
+    components?: any;
+    defaultValue?: SingleValue<T>;
+    errorMessage?: string;
+    /**
+     * Configuration object passed to react-select createFilter function to create [custom filter
+     * logic](https://react-select.com/advanced#custom-filter-logic)
+     * @param ignoreCase - boolean (optional)
+     * @param ignoreAccents - boolean (optional)
+     * @param stringify (obj: any) => string (optional)
+     * @param trim - boolean (optional)
+     * @param matchForm - 'any' | 'start'
+     */
+    filterConfig?: Parameters<typeof createFilter>[0];
+    /**
+     * Indicates that the Select can be cleared after selecting an Option.
+     *
+     * Setting this to true will display a small dismiss cross when a value is selected
+     */
+    isClearable?: boolean;
+    isSearchable?: boolean;
+    menuIsOpen?: boolean;
+    menuPlacement?: 'bottom' | 'auto' | 'top';
+    onBlur?: (value: any) => void;
+    onChange?: (newValue: SingleValue<T>, actionMeta: ActionMeta<T>) => void;
+    onSelect?: (value: SingleValue<T>) => void;
+    options?: OptionsOrGroups<T, GroupBase<T>>;
+    placeholder?: string;
+    prefix?: React.ReactNode;
+    styles?: any;
+    suffix?: React.ReactNode;
+    value?: SingleValue<T>;
+    visualSize?: Size;
+};
+declare function SelectFieldInner<T>({ assistiveText, components, defaultValue, disabled, errorMessage, filterConfig, help, helpPlacement, hideAsterisk, isClearable, isSearchable, label, name, onBlur, onChange, onSelect, options, placeholder, required, styles, value, visualSize, ...rest }: SelectFieldProps<T>, ref: React.ForwardedRef<any>): JSX.Element;
+export declare const SelectField: <T>(props: BaseFieldProps & {
+    assistiveText?: string | undefined;
+    autoFocus?: boolean | undefined;
+    className?: string | undefined;
+    components?: any;
+    defaultValue?: SingleValue<T> | undefined;
+    errorMessage?: string | undefined;
+    /**
+     * Configuration object passed to react-select createFilter function to create [custom filter
+     * logic](https://react-select.com/advanced#custom-filter-logic)
+     * @param ignoreCase - boolean (optional)
+     * @param ignoreAccents - boolean (optional)
+     * @param stringify (obj: any) => string (optional)
+     * @param trim - boolean (optional)
+     * @param matchForm - 'any' | 'start'
+     */
+    filterConfig?: Parameters<typeof createFilter>[0];
+    /**
+     * Indicates that the Select can be cleared after selecting an Option.
+     *
+     * Setting this to true will display a small dismiss cross when a value is selected
+     */
+    isClearable?: boolean | undefined;
+    isSearchable?: boolean | undefined;
+    menuIsOpen?: boolean | undefined;
+    menuPlacement?: "auto" | "top" | "bottom" | undefined;
+    onBlur?: ((value: any) => void) | undefined;
+    onChange?: ((newValue: SingleValue<T>, actionMeta: ActionMeta<T>) => void) | undefined;
+    onSelect?: ((value: SingleValue<T>) => void) | undefined;
+    options?: OptionsOrGroups<T, GroupBase<T>> | undefined;
+    placeholder?: string | undefined;
+    prefix?: React.ReactNode;
+    styles?: any;
+    suffix?: React.ReactNode;
+    value?: SingleValue<T> | undefined;
+    visualSize?: Size | undefined;
+} & {
+    ref?: React.ForwardedRef<any> | undefined;
+}) => ReturnType<typeof SelectFieldInner>;
+export default SelectField;

package/cjs/switch/Switch.d.ts

@@ -0,0 +1,32 @@
+import React, { ChangeEvent } from 'react';
+declare type Size = 'small' | 'medium';
+export declare type SwitchProps = React.PropsWithRef<JSX.IntrinsicElements['label']> & {
+    /**
+     * Name of the input element
+     */
+    name?: string;
+    /**
+     * State of the switch
+     *
+     */
+    checked?: boolean;
+    /**
+     * Controls whether the input is disabled
+     */
+    disabled?: boolean;
+    /**
+     * Callback to fire when the state of the input changes
+     */
+    onChange?: (e: ChangeEvent<HTMLInputElement>) => void;
+    /**
+     * Controls whether the input label should be displayed on the right of the input, displayed on the left by default
+     */
+    right?: boolean;
+    /**
+     * Visual size of the switch
+     */
+    size?: Size;
+    error?: boolean;
+};
+export declare const Switch: React.ForwardRefExoticComponent<Pick<SwitchProps, "error" | "key" | "name" | "right" | "disabled" | "size" | "checked" | "css" | keyof React.LabelHTMLAttributes<HTMLLabelElement>> & React.RefAttributes<HTMLInputElement>>;
+export {};

package/cjs/switch/SwitchContext.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import { SwitchProps } from './Switch';
+declare type SwitchContextProps = Required<Pick<SwitchProps, 'size' | 'error'>> & {
+    children?: React.ReactNode;
+};
+export declare const SwitchContext: React.Context<SwitchContextProps | undefined>;
+export declare const SwitchContextProvider: React.FC<{
+    value: SwitchContextProps;
+}>;
+declare const useSwitchContext: () => SwitchContextProps | undefined;
+export default useSwitchContext;

package/cjs/switch/SwitchGroup.d.ts

@@ -0,0 +1,10 @@
+import { ReactNode } from 'react';
+import { BaseFieldProps } from '../types';
+import { SwitchProps } from './Switch';
+export declare type SwitchGroupProps = Pick<BaseFieldProps, 'label' | 'errorMessage' | 'hideAsterisk' | 'required'> & {
+    /**
+     * JSX enclosed by the group.
+     */
+    children: ReactNode;
+} & Pick<SwitchProps, 'size'>;
+export declare const SwitchGroup: ({ size, label, errorMessage, required, hideAsterisk, children, }: SwitchGroupProps) => JSX.Element;

package/cjs/switch/index.d.ts

@@ -0,0 +1,2 @@
+export * from './Switch';
+export * from './SwitchGroup';

package/cjs/tel-field/TelField.d.ts

@@ -0,0 +1,67 @@
+import React from 'react';
+import { Locale } from '@dfds-ui/react-components';
+import { BaseFieldProps } from '../types';
+export declare type TelFieldProps = BaseFieldProps & {
+    /**
+     * Class name to be added to the TelField.
+     */
+    className?: string;
+    /**
+     * Default value for the phone number
+     */
+    defaultValue?: string;
+    /**
+     * Default locale. Will set the matching country in the dropdown
+     */
+    defaultLocale?: Locale;
+    /**
+     * Show trunk values (the local area code shown in parenthesis)
+     */
+    showTrunkValues?: boolean;
+    /**
+     * Makes value splitted so easier to convert to object
+     */
+    splitValues?: boolean;
+    /**
+     * Callback when value changes
+     */
+    onChange?: (newValue: string) => void;
+    /**
+     * Callback when blur
+     */
+    onBlur?: () => void;
+};
+export declare type TelFieldElement = {
+    focus?: () => void;
+};
+export declare const TelField: React.ForwardRefExoticComponent<BaseFieldProps & {
+    /**
+     * Class name to be added to the TelField.
+     */
+    className?: string | undefined;
+    /**
+     * Default value for the phone number
+     */
+    defaultValue?: string | undefined;
+    /**
+     * Default locale. Will set the matching country in the dropdown
+     */
+    defaultLocale?: "en" | "nl-BE" | "bg-BG" | "pt-BR" | "en-CA" | "zh-CN" | "cs-CZ" | "da-DK" | "et-EE" | "fi-FI" | "fr-BE" | "fr-FR" | "fr-MA" | "de-DE" | "hu-HU" | "it-IT" | "ja-JP" | "lv-LV" | "lt-LT" | "nl-NL" | "nb-NO" | "pl-PL" | "ro-RO" | "ru-RU" | "sk-SK" | "ko-KR" | "es-ES" | "sv-SE" | "tr-TR" | "en-GB" | "en-US" | undefined;
+    /**
+     * Show trunk values (the local area code shown in parenthesis)
+     */
+    showTrunkValues?: boolean | undefined;
+    /**
+     * Makes value splitted so easier to convert to object
+     */
+    splitValues?: boolean | undefined;
+    /**
+     * Callback when value changes
+     */
+    onChange?: ((newValue: string) => void) | undefined;
+    /**
+     * Callback when blur
+     */
+    onBlur?: (() => void) | undefined;
+} & React.RefAttributes<TelFieldElement>>;
+export default TelField;