@entur/form 8.3.2-beta.3 → 8.3.2-beta.4

package/dist/BaseFormControl.d.ts

@@ -0,0 +1,113 @@
+import React from 'react';
+import { VariantType } from '@entur/utils';
+import { Placement } from '@entur/tooltip';
+import './BaseFormControl.scss';
+/** @deprecated use variant="information" instead */
+declare const info = "info";
+/** @deprecated use variant="negative" instead */
+declare const error = "error";
+export type BaseFormControlProps = React.HTMLAttributes<HTMLDivElement> & {
+    /** Et skjemaelement med `eds-form-control`-klassen */
+    children: React.ReactNode;
+    /** Ekstra klassenavn */
+    className?: string;
+    /** Sett til true om skjema-elementet er disabled */
+    disabled?: boolean;
+    /** Sett til true om skjema-elementet er i read-only modus */
+    readOnly?: boolean;
+    /** Tekst eller ikon som vises foran skjema-elementet */
+    prepend?: React.ReactNode;
+    /** Tekst eller ikon som vises etter skjema-elementet */
+    append?: React.ReactNode;
+    /** Valideringsvariant */
+    variant?: VariantType | typeof error | typeof info;
+    /**Størrelsen på skjemaelementet
+     * @default "medium"
+     */
+    size?: 'medium' | 'large';
+    /** Label til inputfeltet */
+    label: React.ReactNode;
+    /** En tooltip som forklarer labelen til inputfeltet */
+    labelTooltip?: React.ReactNode;
+    /** Forklarende tekst for knappen som åpner labelTooltip */
+    labelTooltipButtonAriaLabel?: string;
+    labelTooltipPlacement?: Placement;
+    /** Illustrerer om inputfeltet er påkrevd eller ikke */
+    required?: boolean;
+    /** ID som settes på labelen til inputfeltet */
+    labelId: string;
+    /** Varselmelding, som vil komme under form-komponenten */
+    feedback?: string;
+    /** Om inputfeltet er fylt med data. Brukes for plassering av label */
+    isFilled?: boolean;
+    /**Ekstra props som sendes til label */
+    labelProps?: {
+        [key: string]: any;
+    };
+    /** Ekstra styling */
+    style?: React.CSSProperties;
+    /** Plasserer labelen statisk på toppen av inputfeltet */
+    disableLabelAnimation?: boolean;
+    /** Setter feedbackText sin rolle til "alert" */
+    onClick?: (event: React.MouseEvent<HTMLElement>) => void;
+    ariaAlertOnFeedback?: boolean;
+    /** Legg til et element etter feltet */
+    after?: React.ReactNode;
+    /** Legg til et element før feltet */
+    before?: React.ReactNode;
+    /** Aria-label som brukes når inputfeltet er i read-only modus */
+    ariaLabelOnReadOnly?: string;
+};
+export declare const BaseFormControl: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
+    /** Et skjemaelement med `eds-form-control`-klassen */
+    children: React.ReactNode;
+    /** Ekstra klassenavn */
+    className?: string;
+    /** Sett til true om skjema-elementet er disabled */
+    disabled?: boolean;
+    /** Sett til true om skjema-elementet er i read-only modus */
+    readOnly?: boolean;
+    /** Tekst eller ikon som vises foran skjema-elementet */
+    prepend?: React.ReactNode;
+    /** Tekst eller ikon som vises etter skjema-elementet */
+    append?: React.ReactNode;
+    /** Valideringsvariant */
+    variant?: VariantType | typeof error | typeof info;
+    /**Størrelsen på skjemaelementet
+     * @default "medium"
+     */
+    size?: "medium" | "large";
+    /** Label til inputfeltet */
+    label: React.ReactNode;
+    /** En tooltip som forklarer labelen til inputfeltet */
+    labelTooltip?: React.ReactNode;
+    /** Forklarende tekst for knappen som åpner labelTooltip */
+    labelTooltipButtonAriaLabel?: string;
+    labelTooltipPlacement?: Placement;
+    /** Illustrerer om inputfeltet er påkrevd eller ikke */
+    required?: boolean;
+    /** ID som settes på labelen til inputfeltet */
+    labelId: string;
+    /** Varselmelding, som vil komme under form-komponenten */
+    feedback?: string;
+    /** Om inputfeltet er fylt med data. Brukes for plassering av label */
+    isFilled?: boolean;
+    /**Ekstra props som sendes til label */
+    labelProps?: {
+        [key: string]: any;
+    };
+    /** Ekstra styling */
+    style?: React.CSSProperties;
+    /** Plasserer labelen statisk på toppen av inputfeltet */
+    disableLabelAnimation?: boolean;
+    /** Setter feedbackText sin rolle til "alert" */
+    onClick?: (event: React.MouseEvent<HTMLElement>) => void;
+    ariaAlertOnFeedback?: boolean;
+    /** Legg til et element etter feltet */
+    after?: React.ReactNode;
+    /** Legg til et element før feltet */
+    before?: React.ReactNode;
+    /** Aria-label som brukes når inputfeltet er i read-only modus */
+    ariaLabelOnReadOnly?: string;
+} & React.RefAttributes<HTMLDivElement>>;
+export {};

package/dist/Checkbox.d.ts

@@ -0,0 +1,58 @@
+import React, { CSSProperties } from 'react';
+import './Checkbox.scss';
+export type CheckboxProps = {
+    /** Ekstra klassenavn */
+    className?: string;
+    /** Label for checkboxen, som vises ved høyre side. */
+    children?: React.ReactNode;
+    /** Om Checkbox er avmerket, eller om den er i en indeterminate state */
+    checked?: 'indeterminate' | boolean;
+    /** Callback for Checkbox */
+    onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
+    /** Om checkboxen er disabled eller ikke
+     * @default false
+     */
+    disabled?: boolean;
+    /** Sett til true om skjema-elementet er i read-only modus
+     * @default false
+     */
+    readOnly?: boolean;
+    /**Ekstra styling til komponenten */
+    style?: CSSProperties;
+    /** Reduserer klikkflaten for Checkbox'en
+     * @default false
+     */
+    reduceClickArea?: boolean;
+    /** Om animasjon skal deaktiveres
+     * @default false
+     */
+    disableAnimation?: boolean;
+} & Omit<React.InputHTMLAttributes<HTMLInputElement>, 'checked'>;
+export declare const Checkbox: React.ForwardRefExoticComponent<{
+    /** Ekstra klassenavn */
+    className?: string;
+    /** Label for checkboxen, som vises ved høyre side. */
+    children?: React.ReactNode;
+    /** Om Checkbox er avmerket, eller om den er i en indeterminate state */
+    checked?: "indeterminate" | boolean;
+    /** Callback for Checkbox */
+    onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
+    /** Om checkboxen er disabled eller ikke
+     * @default false
+     */
+    disabled?: boolean;
+    /** Sett til true om skjema-elementet er i read-only modus
+     * @default false
+     */
+    readOnly?: boolean;
+    /**Ekstra styling til komponenten */
+    style?: CSSProperties;
+    /** Reduserer klikkflaten for Checkbox'en
+     * @default false
+     */
+    reduceClickArea?: boolean;
+    /** Om animasjon skal deaktiveres
+     * @default false
+     */
+    disableAnimation?: boolean;
+} & Omit<React.InputHTMLAttributes<HTMLInputElement>, "checked"> & React.RefAttributes<HTMLInputElement>>;

package/dist/FeedbackText.d.ts

@@ -0,0 +1,20 @@
+import React from 'react';
+import { VariantType } from '@entur/utils';
+import './FeedbackText.scss';
+/** @deprecated use variant="information" instead */
+declare const info = "info";
+/** @deprecated use variant="negative" instead */
+declare const error = "error";
+export type FeedbackTextProps = {
+    /** Teksten som vises */
+    children: React.ReactNode;
+    /** Skjuler ikonet */
+    hideIcon?: boolean;
+    /** Feedbackvarianten*/
+    variant: VariantType | typeof error | typeof info;
+    /** Ekstra klassenavn */
+    className?: string;
+    [key: string]: any;
+};
+export declare const FeedbackText: React.FC<FeedbackTextProps>;
+export {};

package/dist/Fieldset.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import './Fieldset.scss';
+export type FieldsetProps = {
+    /** Innholdet i felt-gruppen. */
+    children: React.ReactNode;
+    /** Ekstra klassenavn */
+    className?: string;
+    /** Labelen til felt-gruppen. */
+    label?: React.ReactNode;
+    [key: string]: any;
+};
+export declare const Fieldset: React.FC<FieldsetProps>;

package/dist/InputGroupContext.d.ts

@@ -0,0 +1,10 @@
+import * as React from 'react';
+type InputGroupContextType = {
+    isFilled: boolean;
+    setFilled: (e: boolean) => void;
+};
+export declare const InputGroupContextProvider: React.FC<{
+    children: React.ReactNode;
+}>;
+export declare const useInputGroupContext: () => InputGroupContextType;
+export {};

package/dist/InputGroupLabel.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import './InputGroupLabel.scss';
+export type InputGroupLabelProps = {
+    label?: React.ReactNode;
+    required?: boolean;
+    labelTooltip?: string;
+    labelId: string;
+    staticAnimation?: boolean;
+} & React.DetailedHTMLProps<React.LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>;
+export declare const InputGroupLabel: React.FC<InputGroupLabelProps>;

package/dist/Radio.d.ts

@@ -0,0 +1,30 @@
+import React from 'react';
+import './Radio.scss';
+export type RadioProps = {
+    /** Ekstra klassenavn */
+    className?: string;
+    /** Label til radio-button. Vises ved høyre side. */
+    children?: React.ReactNode;
+    /** Verdien til radioknappen */
+    value: string;
+    /** Om radiobutton er disabled eller ikke
+     * @default false
+     */
+    disabled?: boolean;
+    /** Beskrivelse som leses opp av skjermlesere når radiobutton er readonly */
+    readOnlyLabelDescription?: string;
+} & React.InputHTMLAttributes<HTMLInputElement>;
+export declare const Radio: React.ForwardRefExoticComponent<{
+    /** Ekstra klassenavn */
+    className?: string;
+    /** Label til radio-button. Vises ved høyre side. */
+    children?: React.ReactNode;
+    /** Verdien til radioknappen */
+    value: string;
+    /** Om radiobutton er disabled eller ikke
+     * @default false
+     */
+    disabled?: boolean;
+    /** Beskrivelse som leses opp av skjermlesere når radiobutton er readonly */
+    readOnlyLabelDescription?: string;
+} & React.InputHTMLAttributes<HTMLInputElement> & React.RefAttributes<HTMLInputElement>>;

package/dist/RadioGroup.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+export type RadioGroupProps = {
+    /** Navnet til radiogruppen. */
+    name: string;
+    /** Overskrift over radiogruppen */
+    label?: string;
+    /** Verdien til den valgte radioknappen */
+    value: string | null;
+    /** Radioknappene sendes inn som children */
+    children: React.ReactNode;
+    /** En callback som blir kalles hver gang en radioknapp klikkes på  */
+    onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+    [key: string]: any;
+    /** Sett radiogruppen i readonly-modus */
+    readOnly?: boolean;
+};
+export declare const RadioGroup: React.FC<RadioGroupProps>;

package/dist/RadioGroupContext.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+type RadioGroupContextProps = {
+    name: string;
+    onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+    value: string | null;
+    readOnly?: boolean;
+};
+export declare const RadioGroupContextProvider: React.Provider<RadioGroupContextProps | null>;
+export declare const useRadioGroupContext: () => RadioGroupContextProps;
+export {};

package/dist/Switch.d.ts

@@ -0,0 +1,66 @@
+import React from 'react';
+import './Switch.scss';
+export type SwitchProps = {
+    /** Ekstra klassenavn */
+    className?: string;
+    /** Label for Switch-en. */
+    children?: React.ReactNode;
+    /** Posisjonen til label for Switch-en.
+     * @default "right"
+     */
+    labelPlacement?: 'right' | 'bottom';
+    /** Om switch-en er checked eller ikke */
+    checked?: boolean;
+    /** Ikonet som skal stå inne i sirkelen på Switch-en */
+    icon?: React.ReactNode;
+    /** Skjul ikonet inne i sikrelen på Switch-en
+     * @default false
+     */
+    hideIcon?: boolean;
+    /** Farge som settes på ikon og bakgrunn når Switch-en er "checked"
+     * @default colors.validation.mint
+     */
+    color?: string;
+    /** Farge på bakgrunn når Switch-en er "checked" og står i en kontrast-seksjon
+     * @default colors.validation.mintContrast
+     */
+    contrastColor?: string;
+    /** Størrelsen på Switch-en
+     * @default "medium"
+     */
+    size?: 'medium' | 'large';
+    /** Callback for når verdien endres */
+    onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
+} & Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'>;
+export declare const Switch: React.ForwardRefExoticComponent<{
+    /** Ekstra klassenavn */
+    className?: string;
+    /** Label for Switch-en. */
+    children?: React.ReactNode;
+    /** Posisjonen til label for Switch-en.
+     * @default "right"
+     */
+    labelPlacement?: "right" | "bottom";
+    /** Om switch-en er checked eller ikke */
+    checked?: boolean;
+    /** Ikonet som skal stå inne i sirkelen på Switch-en */
+    icon?: React.ReactNode;
+    /** Skjul ikonet inne i sikrelen på Switch-en
+     * @default false
+     */
+    hideIcon?: boolean;
+    /** Farge som settes på ikon og bakgrunn når Switch-en er "checked"
+     * @default colors.validation.mint
+     */
+    color?: string;
+    /** Farge på bakgrunn når Switch-en er "checked" og står i en kontrast-seksjon
+     * @default colors.validation.mintContrast
+     */
+    contrastColor?: string;
+    /** Størrelsen på Switch-en
+     * @default "medium"
+     */
+    size?: "medium" | "large";
+    /** Callback for når verdien endres */
+    onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
+} & Omit<React.InputHTMLAttributes<HTMLInputElement>, "size"> & React.RefAttributes<HTMLInputElement>>;

package/dist/TextArea.d.ts

@@ -0,0 +1,57 @@
+import React from 'react';
+import { VariantType } from '@entur/utils';
+import './TextArea.scss';
+import { Placement } from '@entur/tooltip';
+/** @deprecated use variant="information" instead */
+declare const info = "info";
+/** @deprecated use variant="negative" instead */
+declare const error = "error";
+export type TextAreaProps = {
+    /** Ekstra klassenavn */
+    className?: string;
+    /** Valideringsvariant */
+    variant?: VariantType | typeof error | typeof info;
+    /** Deaktiverer tekstområdet */
+    disabled?: boolean;
+    /** Setter tekstområdet i read-only modus */
+    readOnly?: boolean;
+    /** Label over TextArea */
+    label: string;
+    /** En tooltip som forklarer labelen til inputfeltet */
+    labelTooltip?: React.ReactNode;
+    /** Forklarende tekst for knappen som åpner labelTooltip */
+    labelTooltipButtonAriaLabel?: string;
+    /** Plasseringen til tooltip-en relativt til spørsmålstegn-knappen */
+    labelTooltipPlacement?: Placement;
+    /** Varselmelding, som vil komme under TextArea */
+    feedback?: string;
+    /** Plasserer labelen statisk på toppen av inputfeltet
+     * @default false
+     */
+    disableLabelAnimation?: boolean;
+} & React.TextareaHTMLAttributes<HTMLTextAreaElement>;
+export declare const TextArea: React.ForwardRefExoticComponent<{
+    /** Ekstra klassenavn */
+    className?: string;
+    /** Valideringsvariant */
+    variant?: VariantType | typeof error | typeof info;
+    /** Deaktiverer tekstområdet */
+    disabled?: boolean;
+    /** Setter tekstområdet i read-only modus */
+    readOnly?: boolean;
+    /** Label over TextArea */
+    label: string;
+    /** En tooltip som forklarer labelen til inputfeltet */
+    labelTooltip?: React.ReactNode;
+    /** Forklarende tekst for knappen som åpner labelTooltip */
+    labelTooltipButtonAriaLabel?: string;
+    /** Plasseringen til tooltip-en relativt til spørsmålstegn-knappen */
+    labelTooltipPlacement?: Placement;
+    /** Varselmelding, som vil komme under TextArea */
+    feedback?: string;
+    /** Plasserer labelen statisk på toppen av inputfeltet
+     * @default false
+     */
+    disableLabelAnimation?: boolean;
+} & React.TextareaHTMLAttributes<HTMLTextAreaElement> & React.RefAttributes<HTMLTextAreaElement>>;
+export {};

package/dist/TextField.d.ts

@@ -0,0 +1,91 @@
+import React from 'react';
+import { VariantType } from '@entur/utils';
+import './TextField.scss';
+import { Placement } from '@entur/tooltip';
+/** @deprecated use variant="information" instead */
+declare const info = "info";
+/** @deprecated use variant="negative" instead */
+declare const error = "error";
+export type TextFieldProps = {
+    /** Tekst eller ikon som kommer før inputfeltet */
+    prepend?: React.ReactNode;
+    /** Tekst eller ikon som kommer etter inputfeltet */
+    append?: React.ReactNode;
+    /** Ekstra klassenavn */
+    className?: string;
+    /** Label over TextField */
+    label: React.ReactNode;
+    /** En tooltip som forklarer labelen til inputfeltet */
+    labelTooltip?: React.ReactNode;
+    /** Forklarende tekst for knappen som åpner labelTooltip */
+    labelTooltipButtonAriaLabel?: string;
+    /** Plasseringen til tooltip-en relativt til spørsmålstegn-knappen */
+    labelTooltipPlacement?: Placement;
+    /** Varselmelding, som vil komme under TextField */
+    feedback?: string;
+    /** Hvilken valideringsfarge som vises*/
+    variant?: VariantType | typeof error | typeof info;
+    /** Deaktiver inputfeltet */
+    disabled?: boolean;
+    /** Setter inputfeltet i read-only modus */
+    readOnly?: boolean;
+    /** Størrelsen på TextField
+     * @default "medium"
+     */
+    size?: 'medium' | 'large';
+    /** Plasserer labelen statisk på toppen av inputfeltet
+     * @default false
+     */
+    disableLabelAnimation?: boolean;
+    /** Ekstra props som sendes til label-elementet */
+    labelProps?: React.DetailedHTMLProps<React.LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>;
+    /** Om man skal ha muliget for å nullstille TextField. Viser lukkekryss hvis feltet er fylt.
+     * @default false
+     */
+    clearable?: boolean;
+    /** Callback for clearable */
+    onClear?: () => void;
+    ariaAlertOnFeedback?: boolean;
+} & Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' | 'label'>;
+export declare const TextField: React.ForwardRefExoticComponent<{
+    /** Tekst eller ikon som kommer før inputfeltet */
+    prepend?: React.ReactNode;
+    /** Tekst eller ikon som kommer etter inputfeltet */
+    append?: React.ReactNode;
+    /** Ekstra klassenavn */
+    className?: string;
+    /** Label over TextField */
+    label: React.ReactNode;
+    /** En tooltip som forklarer labelen til inputfeltet */
+    labelTooltip?: React.ReactNode;
+    /** Forklarende tekst for knappen som åpner labelTooltip */
+    labelTooltipButtonAriaLabel?: string;
+    /** Plasseringen til tooltip-en relativt til spørsmålstegn-knappen */
+    labelTooltipPlacement?: Placement;
+    /** Varselmelding, som vil komme under TextField */
+    feedback?: string;
+    /** Hvilken valideringsfarge som vises*/
+    variant?: VariantType | typeof error | typeof info;
+    /** Deaktiver inputfeltet */
+    disabled?: boolean;
+    /** Setter inputfeltet i read-only modus */
+    readOnly?: boolean;
+    /** Størrelsen på TextField
+     * @default "medium"
+     */
+    size?: "medium" | "large";
+    /** Plasserer labelen statisk på toppen av inputfeltet
+     * @default false
+     */
+    disableLabelAnimation?: boolean;
+    /** Ekstra props som sendes til label-elementet */
+    labelProps?: React.DetailedHTMLProps<React.LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>;
+    /** Om man skal ha muliget for å nullstille TextField. Viser lukkekryss hvis feltet er fylt.
+     * @default false
+     */
+    clearable?: boolean;
+    /** Callback for clearable */
+    onClear?: () => void;
+    ariaAlertOnFeedback?: boolean;
+} & Omit<React.InputHTMLAttributes<HTMLInputElement>, "size" | "label"> & React.RefAttributes<HTMLInputElement>>;
+export {};

package/dist/VariantProvider.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import { VariantType } from '@entur/utils';
+/** @deprecated use variant="information" instead */
+declare const info = "info";
+/** @deprecated use variant="negative" instead */
+declare const error = "error";
+export type VariantProviderProps = {
+    variant?: VariantType | typeof error | typeof info;
+};
+export declare const VariantProvider: React.FC<VariantProviderProps>;
+export declare const useVariant: () => VariantType | typeof error | typeof info | null;
+export {};