@trackunit/react-form-components 0.0.67 → 0.0.70

package/src/components/FormGroup/FormGroup.d.ts

@@ -1,39 +1,39 @@
-import { CommonProps } from "@trackunit/react-components";
-import * as React from "react";
-export interface FormGroupProps extends CommonProps {
-    /**
-     * The label for the form group.
-     */
-    label: string | React.ReactNode;
-    /**
-     * Content to display in the tooltip when hovering the ? icon next to the label.
-     */
-    tip?: string | React.ReactNode;
-    htmlFor?: string;
-    /**
-     * A string to display under the input element to help the user understand the input.
-     */
-    helpText?: string | null;
-    /**
-     * An addon element to render to the right under the input element.
-     * Used for displaying maxLength etc.
-     */
-    helpAddon?: string | React.ReactNode;
-    /**
-     * If true the input is rendered in its invalid state.
-     */
-    isInvalid?: boolean;
-    /**
-     * If true interactions are disabled
-     */
-    disabled?: boolean;
-    children?: React.ReactNode;
-}
-/**
- * The FormGroup component should be used to wrap any Input element that needs a label.
- * Besides a label the component supplies an optional Tip, HelpText and HelpAddon support.
- *
- * @param {FormGroupProps} props - The props for the FormGroup component
- * @returns {JSX.Element} FormGroup component
- */
-export declare const FormGroup: ({ isInvalid, helpText, helpAddon, tip, className, dataTestId, label, htmlFor, children, disabled, }: FormGroupProps) => JSX.Element;
+import { CommonProps } from "@trackunit/react-components";
+import * as React from "react";
+export interface FormGroupProps extends CommonProps {
+    /**
+     * The label for the form group.
+     */
+    label: string | React.ReactNode;
+    /**
+     * Content to display in the tooltip when hovering the ? icon next to the label.
+     */
+    tip?: string | React.ReactNode;
+    htmlFor?: string;
+    /**
+     * A string to display under the input element to help the user understand the input.
+     */
+    helpText?: string | null;
+    /**
+     * An addon element to render to the right under the input element.
+     * Used for displaying maxLength etc.
+     */
+    helpAddon?: string | React.ReactNode;
+    /**
+     * If true the input is rendered in its invalid state.
+     */
+    isInvalid?: boolean;
+    /**
+     * If true interactions are disabled
+     */
+    disabled?: boolean;
+    children?: React.ReactNode;
+}
+/**
+ * The FormGroup component should be used to wrap any Input element that needs a label.
+ * Besides a label the component supplies an optional Tip, HelpText and HelpAddon support.
+ *
+ * @param {FormGroupProps} props - The props for the FormGroup component
+ * @returns {JSX.Element} FormGroup component
+ */
+export declare const FormGroup: ({ isInvalid, helpText, helpAddon, tip, className, dataTestId, label, htmlFor, children, disabled, }: FormGroupProps) => JSX.Element;

package/src/components/Label/Label.d.ts

@@ -1,34 +1,34 @@
-import { CommonProps } from "@trackunit/react-components";
-import * as React from "react";
-import "./Label.css";
-export interface LabelProps extends CommonProps {
-    /**
-     * ID of the label.
-     */
-    id?: string;
-    /**
-     * Specifies the element to which the label belongs to.
-     */
-    htmlFor?: string;
-    /**
-     * The label value.
-     */
-    children?: React.ReactNode;
-    /**
-     * Whether the label is disabled or not.
-     */
-    disabled?: boolean;
-    /**
-     * A boolean flag to set invalid mode
-     * can be used for indicating errors
-     */
-    isInvalid?: boolean;
-}
-/**
- * The Label component is used for labels for input fields.
- * This component is **not used directly**, but is part of the FormGroup and Field components.
- *
- * @param {LabelProps} props - The props for the Label component
- * @returns {JSX.Element} Label component
- */
-export declare const Label: ({ id, htmlFor, children, className, dataTestId, disabled, isInvalid, }: LabelProps) => JSX.Element;
+import { CommonProps } from "@trackunit/react-components";
+import * as React from "react";
+import "./Label.css";
+export interface LabelProps extends CommonProps {
+    /**
+     * ID of the label.
+     */
+    id?: string;
+    /**
+     * Specifies the element to which the label belongs to.
+     */
+    htmlFor?: string;
+    /**
+     * The label value.
+     */
+    children?: React.ReactNode;
+    /**
+     * Whether the label is disabled or not.
+     */
+    disabled?: boolean;
+    /**
+     * A boolean flag to set invalid mode
+     * can be used for indicating errors
+     */
+    isInvalid?: boolean;
+}
+/**
+ * The Label component is used for labels for input fields.
+ * This component is **not used directly**, but is part of the FormGroup and Field components.
+ *
+ * @param {LabelProps} props - The props for the Label component
+ * @returns {JSX.Element} Label component
+ */
+export declare const Label: ({ id, htmlFor, children, className, dataTestId, disabled, isInvalid, }: LabelProps) => JSX.Element;

package/src/components/Label/index.d.ts

@@ -1 +1 @@
-export * from "./Label";
+export * from "./Label";

package/src/components/NumberField/NumberField.d.ts

@@ -1,19 +1,19 @@
-/// <reference types="react" />
-import { FormGroupProps } from "../FormGroup/FormGroup";
-import { NumberInputProps } from "../NumberInput/NumberInput";
-type FormGroupExposedProps = Pick<FormGroupProps, "label" | "tip" | "helpText" | "helpAddon">;
-export interface NumberFieldProps extends NumberInputProps, FormGroupExposedProps {
-    /**
-     * If a value is set, the field is rendered in its invalid state.
-     */
-    errorMessage?: string;
-}
-/**
- * The number field component is used for entering numeric values and includes controls for incrementally increasing or decreasing the value.
- *
- * _**Do use**_ the NumberField when the controls to incrementally increase or decrease makes the task easier for the user.
- *
- * _**Do not use**_ this fields for non-serialized numbers. Use TextField instead.
- */
-export declare const NumberField: import("react").ForwardRefExoticComponent<NumberFieldProps & import("react").RefAttributes<HTMLInputElement>>;
-export {};
+/// <reference types="react" />
+import { FormGroupProps } from "../FormGroup/FormGroup";
+import { NumberInputProps } from "../NumberInput/NumberInput";
+type FormGroupExposedProps = Pick<FormGroupProps, "label" | "tip" | "helpText" | "helpAddon">;
+export interface NumberFieldProps extends NumberInputProps, FormGroupExposedProps {
+    /**
+     * If a value is set, the field is rendered in its invalid state.
+     */
+    errorMessage?: string;
+}
+/**
+ * The number field component is used for entering numeric values and includes controls for incrementally increasing or decreasing the value.
+ *
+ * _**Do use**_ the NumberField when the controls to incrementally increase or decrease makes the task easier for the user.
+ *
+ * _**Do not use**_ this fields for non-serialized numbers. Use TextField instead.
+ */
+export declare const NumberField: import("react").ForwardRefExoticComponent<NumberFieldProps & import("react").RefAttributes<HTMLInputElement>>;
+export {};

package/src/components/NumberInput/NumberInput.d.ts

@@ -1,12 +1,12 @@
-/// <reference types="react" />
-import { BaseInputProps } from "../BaseInput";
-type BaseInputExposedProps = Omit<BaseInputProps, "type">;
-export interface NumberInputProps extends BaseInputExposedProps {
-}
-/**
- * A thin wrapper around the `BaseInput` component for number input fields.
- *
- * NOTE: If shown with a label, please use the `NumberField` component instead.
- */
-export declare const NumberInput: import("react").ForwardRefExoticComponent<NumberInputProps & import("react").RefAttributes<HTMLInputElement>>;
-export {};
+/// <reference types="react" />
+import { BaseInputProps } from "../BaseInput";
+type BaseInputExposedProps = Omit<BaseInputProps, "type">;
+export interface NumberInputProps extends BaseInputExposedProps {
+}
+/**
+ * A thin wrapper around the `BaseInput` component for number input fields.
+ *
+ * NOTE: If shown with a label, please use the `NumberField` component instead.
+ */
+export declare const NumberInput: import("react").ForwardRefExoticComponent<NumberInputProps & import("react").RefAttributes<HTMLInputElement>>;
+export {};

package/src/components/OptionCard/OptionCard.d.ts

@@ -1,24 +1,24 @@
-import { CommonProps, IconProps } from "@trackunit/react-components";
-import { InputHTMLAttributes, ReactElement } from "react";
-export interface IOptionCardProps extends InputHTMLAttributes<HTMLInputElement>, CommonProps {
-    /**
-     * Icon displayed at the top inside the OptionCard.
-     */
-    icon?: ReactElement<IconProps>;
-    /**
-     * Heading displayed below the icon.
-     */
-    heading?: string;
-    /**
-     * Subheading displayed above the description.
-     */
-    subheading?: string;
-    /**
-     * Descriptive text displayed inside the OptionCard.
-     */
-    description?: string;
-}
-/**
- * A card version of a radio button that includes an icon, headings and a description.
- */
-export declare const OptionCard: import("react").ForwardRefExoticComponent<IOptionCardProps & import("react").RefAttributes<HTMLInputElement>>;
+import { CommonProps, IconProps } from "@trackunit/react-components";
+import { InputHTMLAttributes, ReactElement } from "react";
+export interface IOptionCardProps extends InputHTMLAttributes<HTMLInputElement>, CommonProps {
+    /**
+     * Icon displayed at the top inside the OptionCard.
+     */
+    icon?: ReactElement<IconProps>;
+    /**
+     * Heading displayed below the icon.
+     */
+    heading?: string;
+    /**
+     * Subheading displayed above the description.
+     */
+    subheading?: string;
+    /**
+     * Descriptive text displayed inside the OptionCard.
+     */
+    description?: string;
+}
+/**
+ * A card version of a radio button that includes an icon, headings and a description.
+ */
+export declare const OptionCard: import("react").ForwardRefExoticComponent<IOptionCardProps & import("react").RefAttributes<HTMLInputElement>>;

package/src/components/PhoneField/PhoneField.d.ts

@@ -1,28 +1,28 @@
-/// <reference types="react" />
-import { FormGroupProps } from "../FormGroup/FormGroup";
-import { PhoneInputProps } from "../PhoneInput/PhoneInput";
-type FormGroupExposedProps = Pick<FormGroupProps, "label" | "tip" | "helpText" | "helpAddon">;
-export interface PhoneFieldProps extends FormGroupExposedProps, PhoneInputProps {
-    /**
-     * If a value is set, the field is rendered in its invalid state.
-     */
-    errorMessage?: string;
-}
-/**
- * The PhoneField component is used to enter phone number.
- * It is a wrapper around the PhoneInput component and the FormGroup component.
- * It is used to render a phone number field with a label, a tip, a help text, a help addon and an error message.
- *
- * @param {string} [label] - The label for the component.
- * @param {string} [tip] - The tip for the component.
- * @param {string} [helpText] - The help text for the component.
- * @param {string} [helpAddon] - The help addon for the component.
- * @param {string} [errorMessage] - The error message for the component.
- * @param {string} [defaultValue] - The default value for the component.
- * @param {boolean} [disabled=false] - Whether the component is disabled or not.
- * @param {string} [fieldSize="medium"] - The size of the input field.
- * @param {boolean} [disableAction=false] - Whether the action button is disabled or not.
- * @returns {JSX.Element} - The PhoneField component.
- */
-export declare const PhoneField: import("react").ForwardRefExoticComponent<PhoneFieldProps & import("react").RefAttributes<HTMLInputElement>>;
-export {};
+/// <reference types="react" />
+import { FormGroupProps } from "../FormGroup/FormGroup";
+import { PhoneInputProps } from "../PhoneInput/PhoneInput";
+type FormGroupExposedProps = Pick<FormGroupProps, "label" | "tip" | "helpText" | "helpAddon">;
+export interface PhoneFieldProps extends FormGroupExposedProps, PhoneInputProps {
+    /**
+     * If a value is set, the field is rendered in its invalid state.
+     */
+    errorMessage?: string;
+}
+/**
+ * The PhoneField component is used to enter phone number.
+ * It is a wrapper around the PhoneInput component and the FormGroup component.
+ * It is used to render a phone number field with a label, a tip, a help text, a help addon and an error message.
+ *
+ * @param {string} [label] - The label for the component.
+ * @param {string} [tip] - The tip for the component.
+ * @param {string} [helpText] - The help text for the component.
+ * @param {string} [helpAddon] - The help addon for the component.
+ * @param {string} [errorMessage] - The error message for the component.
+ * @param {string} [defaultValue] - The default value for the component.
+ * @param {boolean} [disabled=false] - Whether the component is disabled or not.
+ * @param {string} [fieldSize="medium"] - The size of the input field.
+ * @param {boolean} [disableAction=false] - Whether the action button is disabled or not.
+ * @returns {JSX.Element} - The PhoneField component.
+ */
+export declare const PhoneField: import("react").ForwardRefExoticComponent<PhoneFieldProps & import("react").RefAttributes<HTMLInputElement>>;
+export {};

package/src/components/PhoneInput/CountryCodeSelect.d.ts

@@ -1,23 +1,23 @@
-/// <reference types="react" />
-import { CommonProps } from "@trackunit/react-components";
-import { SingleValue } from "react-select";
-import { CountryCode } from "./CountryCodes";
-interface CountryCodeSelectProps extends CommonProps {
-    excludedCountries?: CountryCode;
-    countryCode?: string;
-    isInvalid?: boolean;
-    onChange?: (option: SingleValue<{
-        label: string;
-        value: string;
-    }>) => void;
-    disabled?: boolean;
-    placeholder?: string;
-}
-/**
- * The CountryCodeSelect component is used to select a country code for a phone number.
- *
- * @param {CountryCodeSelectProps} props - The props for the CountryCodeSelect component
- * @returns {JSX.Element} CountryCodeSelect component
- */
-export declare const CountryCodeSelect: ({ excludedCountries, countryCode, isInvalid, onChange, disabled, dataTestId, placeholder, }: CountryCodeSelectProps) => JSX.Element;
-export {};
+/// <reference types="react" />
+import { CommonProps } from "@trackunit/react-components";
+import { SingleValue } from "react-select";
+import { CountryCode } from "./CountryCodes";
+interface CountryCodeSelectProps extends CommonProps {
+    excludedCountries?: CountryCode;
+    countryCode?: string;
+    isInvalid?: boolean;
+    onChange?: (option: SingleValue<{
+        label: string;
+        value: string;
+    }>) => void;
+    disabled?: boolean;
+    placeholder?: string;
+}
+/**
+ * The CountryCodeSelect component is used to select a country code for a phone number.
+ *
+ * @param {CountryCodeSelectProps} props - The props for the CountryCodeSelect component
+ * @returns {JSX.Element} CountryCodeSelect component
+ */
+export declare const CountryCodeSelect: ({ excludedCountries, countryCode, isInvalid, onChange, disabled, dataTestId, placeholder, }: CountryCodeSelectProps) => JSX.Element;
+export {};

package/src/components/PhoneInput/CountryCodes.d.ts

@@ -1,5 +1,5 @@
-export declare const countryCodes: {
-    label: string;
-    value: string;
-}[];
-export type CountryCode = typeof countryCodes;
+export declare const countryCodes: {
+    label: string;
+    value: string;
+}[];
+export type CountryCode = typeof countryCodes;

package/src/components/PhoneInput/PhoneInput.d.ts

@@ -1,34 +1,34 @@
-/// <reference types="react" />
-import { BaseInputProps } from "../BaseInput";
-type BaseInputExposedProps = Omit<BaseInputProps, "actions">;
-interface PhoneNumberProps {
-    countryCode: string;
-    phoneNumber: string;
-}
-export interface PhoneInputProps extends BaseInputExposedProps {
-    /**
-     * To disable the action button.
-     *
-     * @default false
-     * @memberof PhoneInputProps
-     * @example
-     * <PhoneInput disableAction />
-     */
-    disableAction?: boolean;
-    /**
-     * A callback function that gives you the country code and phone number as separate values.
-     */
-    onChangeGetSeparateValues?: (params: PhoneNumberProps) => void;
-}
-/**
- * A component for inputting phone numbers with an optional action button for initiating a phone call.
- *
- * @param {string} [dataTestId] - The data test ID for the component.
- * @param {string|number} [value] - The value of the input field. The value should include the country code as well.
- * @param {boolean} [disabled=false] - Whether the component is disabled or not.
- * @param {string} [fieldSize="medium"] - The size of the input field.
- * @param {boolean} [disableAction=false] - Whether the action button is disabled or not.
- * @returns {JSX.Element} - The PhoneInput component.
- */
-export declare const PhoneInput: import("react").ForwardRefExoticComponent<PhoneInputProps & import("react").RefAttributes<HTMLInputElement>>;
-export {};
+/// <reference types="react" />
+import { BaseInputProps } from "../BaseInput";
+type BaseInputExposedProps = Omit<BaseInputProps, "actions">;
+interface PhoneNumberProps {
+    countryCode: string;
+    phoneNumber: string;
+}
+export interface PhoneInputProps extends BaseInputExposedProps {
+    /**
+     * To disable the action button.
+     *
+     * @default false
+     * @memberof PhoneInputProps
+     * @example
+     * <PhoneInput disableAction />
+     */
+    disableAction?: boolean;
+    /**
+     * A callback function that gives you the country code and phone number as separate values.
+     */
+    onChangeGetSeparateValues?: (params: PhoneNumberProps) => void;
+}
+/**
+ * A component for inputting phone numbers with an optional action button for initiating a phone call.
+ *
+ * @param {string} [dataTestId] - The data test ID for the component.
+ * @param {string|number} [value] - The value of the input field. The value should include the country code as well.
+ * @param {boolean} [disabled=false] - Whether the component is disabled or not.
+ * @param {string} [fieldSize="medium"] - The size of the input field.
+ * @param {boolean} [disableAction=false] - Whether the action button is disabled or not.
+ * @returns {JSX.Element} - The PhoneInput component.
+ */
+export declare const PhoneInput: import("react").ForwardRefExoticComponent<PhoneInputProps & import("react").RefAttributes<HTMLInputElement>>;
+export {};

package/src/components/PhoneInput/PhoneNumberUtilities.d.ts

@@ -1,13 +1,13 @@
-/**
- * @param phoneNumber - a phone number as a string
- * @returns {boolean} true if the phone number starts with a plus sign
- * @example checkIfPhoneNumberHasPlus("123456789") // false
- * checkIfPhoneNumberHasPlus("+123456789") // true
- */
-export declare const checkIfPhoneNumberHasPlus: (phoneNumber: string) => boolean;
-/**
- * @param phoneNumber - a phone number as a string
- * @returns {string|number} the phone number with a plus sign in front of it
- * @example getPhoneNumberWithPlus("123456789") // "+123456789"
- */
-export declare const getPhoneNumberWithPlus: (phoneNumber: string | number | readonly string[]) => string;
+/**
+ * @param phoneNumber - a phone number as a string
+ * @returns {boolean} true if the phone number starts with a plus sign
+ * @example checkIfPhoneNumberHasPlus("123456789") // false
+ * checkIfPhoneNumberHasPlus("+123456789") // true
+ */
+export declare const checkIfPhoneNumberHasPlus: (phoneNumber: string) => boolean;
+/**
+ * @param phoneNumber - a phone number as a string
+ * @returns {string|number} the phone number with a plus sign in front of it
+ * @example getPhoneNumberWithPlus("123456789") // "+123456789"
+ */
+export declare const getPhoneNumberWithPlus: (phoneNumber: string | number | readonly string[]) => string;

package/src/components/PhoneInput/index.d.ts

@@ -1 +1 @@
-export * from "./PhoneInput";
+export * from "./PhoneInput";

package/src/components/RadioGroup/RadioGroup.d.ts

@@ -1,57 +1,57 @@
-import { CommonProps } from "@trackunit/react-components";
-import * as React from "react";
-import "./RadioGroup.css";
-export interface RadioGroupProps<V extends string | number> extends CommonProps, React.InputHTMLAttributes<HTMLInputElement> {
-    /**
-     */
-    children: React.ReactNode;
-    /**
-     * The id of the radio group.
-     */
-    id: string;
-    /**
-     * onChange handler for the radio group.
-     */
-    onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
-    /**
-     * The value of the radio group.
-     */
-    value: V;
-    /**
-     * The name of the radio group.
-     */
-    name?: string;
-    /**
-     * The label of the radio group.
-     */
-    label?: string;
-    /**
-     * Whether the radiogroup is inline or not.
-     */
-    inline?: boolean;
-    /**
-     * Whether the radio group is disabled or not.
-     */
-    disabled?: boolean;
-    /**
-     * A boolean flag to set invalid mode
-     * can be used for indicating errors
-     */
-    isInvalid?: boolean;
-}
-/**
- * Use radio buttons when you have a group of mutually exclusive choices and only one selection from the group is allowed.
- *
- * Radio buttons are used for mutually exclusive choices, not for multiple choices. Only one radio button can be selected at a time. When a user chooses a new item, the previous choice is automatically deselected.
- *
- * _**Do use** Radio buttons in forms, settings, or selections in a list._
- *
- * _**Do not use** Radio buttons if a user can select many option from a list, use checkboxes instead of radio buttons._
- *
- * @param {RadioGroupProps} props - The props for the RadioGroup component
- * @returns {JSX.Element} RadioGroup component
- */
-export declare const RadioGroup: {
-    <V extends string | number = string>({ children, id, name, value, disabled, onChange, label, inline, className, dataTestId, isInvalid, }: RadioGroupProps<V>): JSX.Element;
-    displayName: string;
-};
+import { CommonProps } from "@trackunit/react-components";
+import * as React from "react";
+import "./RadioGroup.css";
+export interface RadioGroupProps<V extends string | number> extends CommonProps, React.InputHTMLAttributes<HTMLInputElement> {
+    /**
+     */
+    children: React.ReactNode;
+    /**
+     * The id of the radio group.
+     */
+    id: string;
+    /**
+     * onChange handler for the radio group.
+     */
+    onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+    /**
+     * The value of the radio group.
+     */
+    value: V;
+    /**
+     * The name of the radio group.
+     */
+    name?: string;
+    /**
+     * The label of the radio group.
+     */
+    label?: string;
+    /**
+     * Whether the radiogroup is inline or not.
+     */
+    inline?: boolean;
+    /**
+     * Whether the radio group is disabled or not.
+     */
+    disabled?: boolean;
+    /**
+     * A boolean flag to set invalid mode
+     * can be used for indicating errors
+     */
+    isInvalid?: boolean;
+}
+/**
+ * Use radio buttons when you have a group of mutually exclusive choices and only one selection from the group is allowed.
+ *
+ * Radio buttons are used for mutually exclusive choices, not for multiple choices. Only one radio button can be selected at a time. When a user chooses a new item, the previous choice is automatically deselected.
+ *
+ * _**Do use** Radio buttons in forms, settings, or selections in a list._
+ *
+ * _**Do not use** Radio buttons if a user can select many option from a list, use checkboxes instead of radio buttons._
+ *
+ * @param {RadioGroupProps} props - The props for the RadioGroup component
+ * @returns {JSX.Element} RadioGroup component
+ */
+export declare const RadioGroup: {
+    <V extends string | number = string>({ children, id, name, value, disabled, onChange, label, inline, className, dataTestId, isInvalid, }: RadioGroupProps<V>): JSX.Element;
+    displayName: string;
+};

package/src/components/RadioGroup/RadioGroupContext.d.ts

@@ -1,11 +1,11 @@
-import * as React from "react";
-interface RadioGroupContextProps {
-    id: string;
-    name: string;
-    value: string | number;
-    disabled?: boolean;
-    isInvalid?: boolean;
-    onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
-}
-export declare const RadioGroupContext: React.Context<RadioGroupContextProps | null>;
-export {};
+import * as React from "react";
+interface RadioGroupContextProps {
+    id: string;
+    name: string;
+    value: string | number;
+    disabled?: boolean;
+    isInvalid?: boolean;
+    onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+}
+export declare const RadioGroupContext: React.Context<RadioGroupContextProps | null>;
+export {};