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

package/cjs/text-field/TextField.d.ts

@@ -0,0 +1,57 @@
+import React from 'react';
+import { BaseFieldProps, Size } from '../types';
+export declare type TextFieldProps = BaseFieldProps & {
+    autoFocus?: boolean;
+    defaultValue?: string;
+    prefix?: React.ReactNode;
+    suffix?: React.ReactNode;
+    icon?: React.ElementType;
+    /**
+     * Element to be placed after the input element.
+     *
+     * Useful for adding a button next to the TextField.
+     */
+    adornment?: React.ReactNode;
+    className?: string;
+    value?: string;
+    visualSize?: Size;
+    onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+    onFocus?: (event: React.FocusEvent<HTMLInputElement>) => void;
+    onBlur?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+    inputType?: 'email' | 'text' | 'tel' | 'time' | 'url' | 'date' | 'file' | 'number' | 'search' | 'password';
+    autoComplete?: string;
+    minValue?: string;
+    maxValue?: string;
+    maxLength?: number;
+    minLength?: number;
+    readOnly?: boolean;
+    step?: number | 'any';
+};
+export declare const TextField: React.ForwardRefExoticComponent<BaseFieldProps & {
+    autoFocus?: boolean | undefined;
+    defaultValue?: string | undefined;
+    prefix?: React.ReactNode;
+    suffix?: React.ReactNode;
+    icon?: React.ElementType<any> | undefined;
+    /**
+     * Element to be placed after the input element.
+     *
+     * Useful for adding a button next to the TextField.
+     */
+    adornment?: React.ReactNode;
+    className?: string | undefined;
+    value?: string | undefined;
+    visualSize?: Size | undefined;
+    onChange?: ((event: React.ChangeEvent<HTMLInputElement>) => void) | undefined;
+    onFocus?: ((event: React.FocusEvent<HTMLInputElement>) => void) | undefined;
+    onBlur?: ((event: React.ChangeEvent<HTMLInputElement>) => void) | undefined;
+    inputType?: "number" | "search" | "file" | "password" | "url" | "time" | "text" | "tel" | "email" | "date" | undefined;
+    autoComplete?: string | undefined;
+    minValue?: string | undefined;
+    maxValue?: string | undefined;
+    maxLength?: number | undefined;
+    minLength?: number | undefined;
+    readOnly?: boolean | undefined;
+    step?: number | "any" | undefined;
+} & React.RefAttributes<HTMLInputElement>>;
+export default TextField;

package/cjs/textarea-field/TextareaField.d.ts

@@ -0,0 +1,44 @@
+import React, { ChangeEvent } from 'react';
+import { BaseFieldProps, Size } from '../types';
+export declare const inputPaddings: {
+    small: {
+        vertical: number;
+        horizontal: number;
+    };
+    medium: {
+        vertical: number;
+        horizontal: number;
+    };
+};
+declare type FieldSize = Extract<Size, 'small' | 'medium'>;
+export declare type TextareaFieldProps = BaseFieldProps & {
+    defaultValue?: string;
+    size?: FieldSize;
+    /**
+     * Set a limit to the amount of characters the user may add. This number is also displayed on the bottom counter by default.
+     */
+    maxValueLength?: number;
+    /**
+     * Whether to show the length counter at the bottom right
+     */
+    showLengthCounter?: boolean;
+    value?: string;
+    onChange?: (event: React.ChangeEvent<HTMLTextAreaElement>) => void;
+    rows?: number;
+};
+export declare const TextareaField: React.ForwardRefExoticComponent<BaseFieldProps & {
+    defaultValue?: string | undefined;
+    size?: FieldSize | undefined;
+    /**
+     * Set a limit to the amount of characters the user may add. This number is also displayed on the bottom counter by default.
+     */
+    maxValueLength?: number | undefined;
+    /**
+     * Whether to show the length counter at the bottom right
+     */
+    showLengthCounter?: boolean | undefined;
+    value?: string | undefined;
+    onChange?: ((event: React.ChangeEvent<HTMLTextAreaElement>) => void) | undefined;
+    rows?: number | undefined;
+} & React.RefAttributes<HTMLTextAreaElement>>;
+export {};

package/cjs/types/field.d.ts

@@ -0,0 +1,52 @@
+import { ReactNode } from 'react';
+/**
+ * Generic FieldProps
+ */
+export declare type BaseFieldProps = {
+    /**
+     * Assistive text describing the field.
+     *
+     * NB! If space is needed for alignment you can use a space char (' ') here.
+     */
+    assistiveText?: string;
+    /**
+     * Indicates that the field is disabled.
+     */
+    disabled?: boolean;
+    /**
+     * Sets an error message (if assistive text applies it will be replaced by this).
+     */
+    errorMessage?: string;
+    /**
+     * Additional help.
+     *
+     * **This is an experimental prop and the behavior might change.**
+     */
+    help?: string;
+    /**
+     * Controls the placement of the help icon.
+     *
+     * **This is an experimental prop and the behavior might change.**
+     */
+    helpPlacement?: 'top' | 'right';
+    /**
+     * If set to `true` the asterisk will never be shown.
+     */
+    hideAsterisk?: boolean;
+    /**
+     * Field label.
+     */
+    label?: ReactNode;
+    /**
+     * Field name.
+     */
+    name: string;
+    /**
+     * Hint for the field. For Input elements this maps to the `placeholder` attribute.
+     */
+    placeholder?: string;
+    /**
+     * Indicates if the field is required. Will add an asterisk to the label unless `hideAsterisk` is set to `true`.
+     */
+    required?: boolean;
+};

package/cjs/types/index.d.ts

@@ -0,0 +1,2 @@
+export * from './field';
+export * from './size';

package/cjs/types/size.d.ts

@@ -0,0 +1 @@
+export declare type Size = 'small' | 'medium' | 'large';

package/package.json

@@ -3,7 +3,7 @@
   "description": "Form components",
   "license": "MIT",
   "private": false,
-  "version": "2.0.20-alpha.4a92bbb9",
+  "version": "2.0.20-alpha.7dd0f764",
   "sideEffects": false,
   "main": "./cjs/index.js",
   "module": "./index.js",
@@ -17,13 +17,13 @@
     "react-select": "^4.0.0"
   },
   "dependencies": {
-    "@dfds-ui/hooks": "2.0.20-alpha.4a92bbb9",
-    "@dfds-ui/icons": "2.0.20-alpha.4a92bbb9",
-    "@dfds-ui/react-components": "2.0.20-alpha.4a92bbb9",
-    "@dfds-ui/theme": "2.0.20-alpha.4a92bbb9",
-    "@dfds-ui/typography": "2.0.20-alpha.4a92bbb9"
+    "@dfds-ui/hooks": "2.0.20-alpha.7dd0f764",
+    "@dfds-ui/icons": "2.0.20-alpha.7dd0f764",
+    "@dfds-ui/react-components": "2.0.20-alpha.7dd0f764",
+    "@dfds-ui/theme": "2.0.20-alpha.7dd0f764",
+    "@dfds-ui/typography": "2.0.20-alpha.7dd0f764"
   },
-  "gitHead": "4a92bbb9e036654246e7b2eb0698de56bf1e86e9",
+  "gitHead": "7dd0f76447b46c8d71b59011d16aa9aa6cf86ff9",
   "publishConfig": {
     "access": "public"
   }