@trackunit/react-form-components 0.0.67 → 0.0.70

package/src/components/TimeRange/TimeRange.d.ts

@@ -1,52 +1,52 @@
-import { CommonProps } from "@trackunit/react-components";
-import React from "react";
-export interface TimeRangeInput {
-    /**
-     * The starting time of the range.
-     */
-    timeFrom: string;
-    /**
-     * The ending time of the range.
-     */
-    timeTo: string;
-}
-export interface TimeRangeProps extends CommonProps {
-    /**
-     * Unique element identifier.
-     */
-    id?: string;
-    /**
-     * Custom node to separate start time input and end time input.
-     *
-     * @default <div data-testid={`${dataTestId}-separator`}>-</div>
-     */
-    children?: React.ReactNode;
-    /**
-     * Sets start time of the range and end time of the range.
-     *
-     * @default { timeFrom: "", timeTo: "" }
-     */
-    range?: TimeRangeInput;
-    /**
-     * Disables time selectors.
-     */
-    disabled?: boolean;
-    /**
-     * If true the range is rendered in its invalid state.
-     */
-    isInvalid?: boolean;
-    /**
-     * Called when time range changes.
-     *
-     * @param {TimeRangeInput} range - Selected time range.
-     * @returns {void}
-     */
-    onChange: (range: TimeRangeInput) => void;
-}
-/**
- * TimeRange is used to create a time range entry.
- *
- * @param {TimeRangeProps} props - The props for the TimeRange component
- * @returns {JSX.Element} TimeRange component
- */
-export declare const TimeRange: ({ id, className, dataTestId, children, range, onChange, disabled, isInvalid, }: TimeRangeProps) => JSX.Element;
+import { CommonProps } from "@trackunit/react-components";
+import React from "react";
+export interface TimeRangeInput {
+    /**
+     * The starting time of the range.
+     */
+    timeFrom: string;
+    /**
+     * The ending time of the range.
+     */
+    timeTo: string;
+}
+export interface TimeRangeProps extends CommonProps {
+    /**
+     * Unique element identifier.
+     */
+    id?: string;
+    /**
+     * Custom node to separate start time input and end time input.
+     *
+     * @default <div data-testid={`${dataTestId}-separator`}>-</div>
+     */
+    children?: React.ReactNode;
+    /**
+     * Sets start time of the range and end time of the range.
+     *
+     * @default { timeFrom: "", timeTo: "" }
+     */
+    range?: TimeRangeInput;
+    /**
+     * Disables time selectors.
+     */
+    disabled?: boolean;
+    /**
+     * If true the range is rendered in its invalid state.
+     */
+    isInvalid?: boolean;
+    /**
+     * Called when time range changes.
+     *
+     * @param {TimeRangeInput} range - Selected time range.
+     * @returns {void}
+     */
+    onChange: (range: TimeRangeInput) => void;
+}
+/**
+ * TimeRange is used to create a time range entry.
+ *
+ * @param {TimeRangeProps} props - The props for the TimeRange component
+ * @returns {JSX.Element} TimeRange component
+ */
+export declare const TimeRange: ({ id, className, dataTestId, children, range, onChange, disabled, isInvalid, }: TimeRangeProps) => JSX.Element;

package/src/components/TimeRange/TimeRange.variants.d.ts

@@ -1,3 +1 @@
-export declare const cvaTimeRange: (props?: ({
-    isValid?: boolean | null | undefined;
-} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+export declare const cvaTimeRange: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;

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

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

package/src/components/TimeRangeField/TimeRangeField.d.ts

@@ -1,18 +1,18 @@
-/// <reference types="react" />
-import { FormGroupProps } from "../FormGroup/FormGroup";
-import { TimeRangeProps } from "../TimeRange/TimeRange";
-type FormGroupExposedProps = Pick<FormGroupProps, "label" | "tip" | "helpText" | "helpAddon">;
-export interface TimeRangeFieldProps extends TimeRangeProps, FormGroupExposedProps {
-    /**
-     * If a value is set, the field is rendered in its invalid state.
-     */
-    errorMessage?: string;
-}
-/**
- * TimeRangeField Description. <-- Please add a proper Description this is used in Storybook.
- *
- * @param {TimeRangeFieldProps} props - The props for the TimeRangeField component
- * @returns {JSX.Element} TimeRangeField component
- */
-export declare const TimeRangeField: ({ className, dataTestId, onChange, isInvalid, errorMessage, label, tip, disabled, children, helpText, id, ...rest }: TimeRangeFieldProps) => JSX.Element;
-export {};
+/// <reference types="react" />
+import { FormGroupProps } from "../FormGroup/FormGroup";
+import { TimeRangeProps } from "../TimeRange/TimeRange";
+type FormGroupExposedProps = Pick<FormGroupProps, "label" | "tip" | "helpText" | "helpAddon">;
+export interface TimeRangeFieldProps extends TimeRangeProps, FormGroupExposedProps {
+    /**
+     * If a value is set, the field is rendered in its invalid state.
+     */
+    errorMessage?: string;
+}
+/**
+ * TimeRangeField Description. <-- Please add a proper Description this is used in Storybook.
+ *
+ * @param {TimeRangeFieldProps} props - The props for the TimeRangeField component
+ * @returns {JSX.Element} TimeRangeField component
+ */
+export declare const TimeRangeField: ({ className, dataTestId, onChange, isInvalid, errorMessage, label, tip, disabled, children, helpText, id, ...rest }: TimeRangeFieldProps) => JSX.Element;
+export {};

package/src/components/Toggle/Toggle.d.ts

@@ -1,61 +1,61 @@
-import { CommonProps } from "@trackunit/react-components";
-import * as React from "react";
-import "./Toggle.css";
-export type ToggleSize = "small" | "medium";
-export interface ToggleProps extends CommonProps {
-    /**
-     * ID of the toggle.
-     */
-    id: string;
-    /**
-     * Whether the toggle is toggled(active) or not.
-     */
-    toggled: boolean;
-    /**
-     * onChange event handler.
-     */
-    onChange: (toggled: boolean, event?: React.ChangeEvent<HTMLInputElement>) => void;
-    /**
-     * OnClick event handler it is thrown on root element of the component tree.
-     */
-    onClick?: React.MouseEventHandler<HTMLDivElement>;
-    /**
-     * Whether the toggle is disabled or not.
-     */
-    disabled?: boolean;
-    /**
-     * Size of the toggle.
-     */
-    size?: ToggleSize;
-    /**
-     * Tab index specifies the keyboard tab order of the toggle relative to the other controls on the page.
-     */
-    tabIndex?: number;
-    /**
-     * Whether the toggle is required or not.
-     */
-    required?: boolean;
-    /**
-     * Name of the toggle.
-     */
-    name?: string;
-    /**
-     * The description of the toggle.
-     */
-    description?: string;
-    /**
-     * onBlur event handler.
-     */
-    onBlur?: React.FocusEventHandler<HTMLInputElement>;
-}
-/**
- * Use Toggle when you have to only enable/disable a feature.
- *
- * _**Do use** Toggle in forms or settings._
- *
- * _**Do not use** Toggle if a user can select many option from a list, use checkboxes instead of toggle._
- *
- * @param {ToggleProps} props - The props for the Toggle component
- * @returns {JSX.Element} Toggle component
- */
-export declare const Toggle: React.ForwardRefExoticComponent<ToggleProps & React.RefAttributes<HTMLInputElement>>;
+import { CommonProps } from "@trackunit/react-components";
+import * as React from "react";
+import "./Toggle.css";
+export type ToggleSize = "small" | "medium";
+export interface ToggleProps extends CommonProps {
+    /**
+     * ID of the toggle.
+     */
+    id: string;
+    /**
+     * Whether the toggle is toggled(active) or not.
+     */
+    toggled: boolean;
+    /**
+     * onChange event handler.
+     */
+    onChange: (toggled: boolean, event?: React.ChangeEvent<HTMLInputElement>) => void;
+    /**
+     * OnClick event handler it is thrown on root element of the component tree.
+     */
+    onClick?: React.MouseEventHandler<HTMLDivElement>;
+    /**
+     * Whether the toggle is disabled or not.
+     */
+    disabled?: boolean;
+    /**
+     * Size of the toggle.
+     */
+    size?: ToggleSize;
+    /**
+     * Tab index specifies the keyboard tab order of the toggle relative to the other controls on the page.
+     */
+    tabIndex?: number;
+    /**
+     * Whether the toggle is required or not.
+     */
+    required?: boolean;
+    /**
+     * Name of the toggle.
+     */
+    name?: string;
+    /**
+     * The description of the toggle.
+     */
+    description?: string;
+    /**
+     * onBlur event handler.
+     */
+    onBlur?: React.FocusEventHandler<HTMLInputElement>;
+}
+/**
+ * Use Toggle when you have to only enable/disable a feature.
+ *
+ * _**Do use** Toggle in forms or settings._
+ *
+ * _**Do not use** Toggle if a user can select many option from a list, use checkboxes instead of toggle._
+ *
+ * @param {ToggleProps} props - The props for the Toggle component
+ * @returns {JSX.Element} Toggle component
+ */
+export declare const Toggle: React.ForwardRefExoticComponent<ToggleProps & React.RefAttributes<HTMLInputElement>>;

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

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

package/src/components/UploadField/UploadField.d.ts

@@ -1,15 +1,15 @@
-/// <reference types="react" />
-import { FormGroupProps } from "../FormGroup/FormGroup";
-import { UploadInputProps } from "../UploadInput/UploadInput";
-type FormGroupExposedProps = Pick<FormGroupProps, "label" | "tip" | "helpText" | "helpAddon">;
-export interface UploadFieldProps extends UploadInputProps, FormGroupExposedProps {
-    /**
-     * If a value is set, the field is rendered in its invalid state.
-     */
-    errorMessage?: string;
-}
-/**
- * Upload fields enable the user to upload Files.
- */
-export declare const UploadField: import("react").ForwardRefExoticComponent<UploadFieldProps & import("react").RefAttributes<HTMLInputElement>>;
-export {};
+/// <reference types="react" />
+import { FormGroupProps } from "../FormGroup/FormGroup";
+import { UploadInputProps } from "../UploadInput/UploadInput";
+type FormGroupExposedProps = Pick<FormGroupProps, "label" | "tip" | "helpText" | "helpAddon">;
+export interface UploadFieldProps extends UploadInputProps, FormGroupExposedProps {
+    /**
+     * If a value is set, the field is rendered in its invalid state.
+     */
+    errorMessage?: string;
+}
+/**
+ * Upload fields enable the user to upload Files.
+ */
+export declare const UploadField: import("react").ForwardRefExoticComponent<UploadFieldProps & import("react").RefAttributes<HTMLInputElement>>;
+export {};

package/src/components/UploadInput/UploadInput.d.ts

@@ -1,33 +1,33 @@
-/// <reference types="react" />
-import { CommonProps } from "@trackunit/react-components";
-import { BaseInputProps } from "../BaseInput";
-type BaseInputExposedProps = Omit<BaseInputProps, "type" | "suffix" | "prefix" | "addonAfter" | "addonBefore" | "actions" | "placeholder">;
-export interface UploadInputProps extends BaseInputExposedProps, CommonProps {
-    /**
-     * A flag to disable the upload input.
-     */
-    disabled?: boolean;
-    /**
-     * A string to set the file formats, for example '.pdf' or '.pdf, .jgp'.
-     */
-    acceptedTypes?: string;
-    /**
-     * Label for the file selector button,
-     */
-    uploadLabel: string;
-    /**
-     * A flag to allow the upload input to accept multiple files.
-     */
-    multipleFiles?: boolean;
-    /**
-     * A flag to disable interaction with input for example if you want to use input as a child of higher component
-     */
-    nonInteractive?: boolean;
-}
-/**
- * A thin wrapper around the `BaseInput` component for upload input fields.
- *
- * NOTE: If shown with a label, please use the `UploadField` component instead.
- */
-export declare const UploadInput: import("react").ForwardRefExoticComponent<UploadInputProps & import("react").RefAttributes<HTMLInputElement>>;
-export {};
+/// <reference types="react" />
+import { CommonProps } from "@trackunit/react-components";
+import { BaseInputProps } from "../BaseInput";
+type BaseInputExposedProps = Omit<BaseInputProps, "type" | "suffix" | "prefix" | "addonAfter" | "addonBefore" | "actions" | "placeholder">;
+export interface UploadInputProps extends BaseInputExposedProps, CommonProps {
+    /**
+     * A flag to disable the upload input.
+     */
+    disabled?: boolean;
+    /**
+     * A string to set the file formats, for example '.pdf' or '.pdf, .jgp'.
+     */
+    acceptedTypes?: string;
+    /**
+     * Label for the file selector button,
+     */
+    uploadLabel: string;
+    /**
+     * A flag to allow the upload input to accept multiple files.
+     */
+    multipleFiles?: boolean;
+    /**
+     * A flag to disable interaction with input for example if you want to use input as a child of higher component
+     */
+    nonInteractive?: boolean;
+}
+/**
+ * A thin wrapper around the `BaseInput` component for upload input fields.
+ *
+ * NOTE: If shown with a label, please use the `UploadField` component instead.
+ */
+export declare const UploadInput: import("react").ForwardRefExoticComponent<UploadInputProps & import("react").RefAttributes<HTMLInputElement>>;
+export {};

package/src/index.d.ts

@@ -1,28 +1,28 @@
-export * from "./components/ActionButton";
-export * from "./components/BaseInput";
-export * from "./components/Checkbox";
-export * from "./components/DateField/DateField";
-export * from "./components/DateInput/DateInput";
-export * from "./components/DropZone/DropZone";
-export * from "./components/EmailField/EmailField";
-export * from "./components/EmailInput";
-export * from "./components/FormGroup/FormGroup";
-export * from "./components/Label/Label";
-export * from "./components/NumberField/NumberField";
-export * from "./components/NumberInput/NumberInput";
-export * from "./components/OptionCard/OptionCard";
-export * from "./components/PhoneField/PhoneField";
-export * from "./components/PhoneInput/PhoneInput";
-export * from "./components/RadioGroup";
-export * from "./components/Schedule/Schedule";
-export * from "./components/Search";
-export * from "./components/Select";
-export * from "./components/TextArea";
-export * from "./components/TextAreaField";
-export * from "./components/TextField";
-export * from "./components/TextInput/TextInput";
-export * from "./components/TimeRange";
-export * from "./components/TimeRangeField/TimeRangeField";
-export * from "./components/Toggle";
-export * from "./components/UploadField/UploadField";
-export * from "./components/UploadInput/UploadInput";
+export * from "./components/ActionButton";
+export * from "./components/BaseInput";
+export * from "./components/Checkbox";
+export * from "./components/DateField/DateField";
+export * from "./components/DateInput/DateInput";
+export * from "./components/DropZone/DropZone";
+export * from "./components/EmailField/EmailField";
+export * from "./components/EmailInput";
+export * from "./components/FormGroup/FormGroup";
+export * from "./components/Label/Label";
+export * from "./components/NumberField/NumberField";
+export * from "./components/NumberInput/NumberInput";
+export * from "./components/OptionCard/OptionCard";
+export * from "./components/PhoneField/PhoneField";
+export * from "./components/PhoneInput/PhoneInput";
+export * from "./components/RadioGroup";
+export * from "./components/Schedule/Schedule";
+export * from "./components/Search";
+export * from "./components/Select";
+export * from "./components/TextArea";
+export * from "./components/TextAreaField";
+export * from "./components/TextField";
+export * from "./components/TextInput/TextInput";
+export * from "./components/TimeRange";
+export * from "./components/TimeRangeField/TimeRangeField";
+export * from "./components/Toggle";
+export * from "./components/UploadField/UploadField";
+export * from "./components/UploadInput/UploadInput";

package/src/test-utils/hooks.d.ts

@@ -1,4 +1,4 @@
-import { RenderHookOptions } from "@testing-library/react";
-declare const customRenderHook: <T, K>(callback: (props: T) => K, options?: RenderHookOptions<T, typeof import("@testing-library/dom/types/queries"), HTMLElement, HTMLElement> | undefined) => import("@testing-library/react").RenderHookResult<K, T>;
-export * from "@testing-library/react";
-export { customRenderHook as renderHook };
+import { RenderHookOptions } from "@testing-library/react";
+declare const customRenderHook: <T, K>(callback: (props: T) => K, options?: RenderHookOptions<T, typeof import("@testing-library/dom/types/queries"), HTMLElement, HTMLElement> | undefined) => import("@testing-library/react").RenderHookResult<K, T>;
+export * from "@testing-library/react";
+export { customRenderHook as renderHook };

package/src/test-utils/test-utils.d.ts

@@ -1,5 +1,5 @@
-import { RenderOptions } from "@testing-library/react";
-import * as React from "react";
-declare const customRender: (ui: React.ReactElement, options?: Omit<RenderOptions, "queries">) => import("@testing-library/react").RenderResult<typeof import("@testing-library/dom/types/queries"), HTMLElement, HTMLElement>;
-export * from "@testing-library/react";
-export { customRender as render };
+import { RenderOptions } from "@testing-library/react";
+import * as React from "react";
+declare const customRender: (ui: React.ReactElement, options?: Omit<RenderOptions, "queries">) => import("@testing-library/react").RenderResult<typeof import("@testing-library/dom/types/queries"), HTMLElement, HTMLElement>;
+export * from "@testing-library/react";
+export { customRender as render };

package/src/translation.d.ts

@@ -1,34 +1,34 @@
-/// <reference types="react" />
-import { NamespaceTransProps, TransForLibs, TranslationResource } from "@trackunit/i18n-library-translation";
-import defaultTranslations from "./locales/en/translation.json";
-/** A type for all available translation keys in this library */
-export type TranslationKeys = keyof typeof defaultTranslations;
-/** The translation namespace for this library */
-export declare const namespace = "react.form-components";
-/**
- * The TranslationResource for this Library.
- * Holds lazy loaded imports for all languages supported by the library.
- *
- * This is used to register the translations for this library before initializing i18next.
- */
-export declare const translations: TranslationResource<TranslationKeys>;
-/**
- *  Local useTranslation for this specific library
- */
-export declare const useTranslation: () => [TransForLibs<never>, import("i18next").i18n, boolean] & {
-    t: TransForLibs<never>;
-    i18n: import("i18next").i18n;
-    ready: boolean;
-};
-/**
- * Type of the t function for the local useTranslation for this specific library
- */
-export type TranslationFunction = TransForLibs<TranslationKeys>;
-/**
- * Trans for this specific library.
- */
-export declare const Trans: (props: NamespaceTransProps<TranslationKeys>) => JSX.Element;
-/**
- * Registers the translations for this library
- */
-export declare const setupLibraryTranslations: () => void;
+/// <reference types="react" />
+import { NamespaceTransProps, TransForLibs, TranslationResource } from "@trackunit/i18n-library-translation";
+import defaultTranslations from "./locales/en/translation.json";
+/** A type for all available translation keys in this library */
+export type TranslationKeys = keyof typeof defaultTranslations;
+/** The translation namespace for this library */
+export declare const namespace = "react.form-components";
+/**
+ * The TranslationResource for this Library.
+ * Holds lazy loaded imports for all languages supported by the library.
+ *
+ * This is used to register the translations for this library before initializing i18next.
+ */
+export declare const translations: TranslationResource<TranslationKeys>;
+/**
+ *  Local useTranslation for this specific library
+ */
+export declare const useTranslation: () => [TransForLibs<never>, import("i18next").i18n, boolean] & {
+    t: TransForLibs<never>;
+    i18n: import("i18next").i18n;
+    ready: boolean;
+};
+/**
+ * Type of the t function for the local useTranslation for this specific library
+ */
+export type TranslationFunction = TransForLibs<TranslationKeys>;
+/**
+ * Trans for this specific library.
+ */
+export declare const Trans: (props: NamespaceTransProps<TranslationKeys>) => JSX.Element;
+/**
+ * Registers the translations for this library
+ */
+export declare const setupLibraryTranslations: () => void;

package/src/utilities/usePhoneInput.d.ts

@@ -1,56 +1,56 @@
-/// <reference types="react" />
-export interface usePhoneInputProps {
-    /**
-     * The current country code value.
-     */
-    countryCode: string;
-    /**
-     * The current phone number value.
-     */
-    phoneNumber: string;
-    /**
-     * Whether the country code value is invalid.
-     */
-    isCountryCodeInvalid: boolean;
-    /**
-     * Whether the phone number value is invalid.
-     */
-    isPhoneNumberInvalid: boolean;
-    /**
-     * Whether the full phone number value is valid.
-     *
-     * @returns {boolean} Whether the full phone number value is valid.
-     */
-    isCombinedValueInvalid: boolean;
-    /**
-     * A function for handling changes to the country code input.
-     */
-    handleCountryCodeChange: (option: {
-        label: string;
-        value: string;
-    } | null) => void;
-    /**
-     * A function for handling changes to the phone number input.
-     */
-    handlePhoneNumberChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
-    /**
-     * The combined country code and phone number value.
-     *
-     * @example "+123456789"
-     * @returns {string} Combined phone number
-     */
-    combinedValue: string | number | readonly string[] | undefined;
-}
-/**
- * A custom hook for managing phone number input state and validation.
- *
- * @returns {object} - An object containing state values and event handler functions.
- * @property {string} countryCode - The current country code value.
- * @property {string} phoneNumber - The current phone number value.
- * @property {boolean} isCountryCodeInvalid - Whether the country code value is invalid.
- * @property {boolean} isPhoneNumberInvalid - Whether the phone number value is invalid.
- * @property {Function} handleCountryCodeChange - A function for handling changes to the country code input.
- * @property {Function} handlePhoneNumberChange - A function for handling changes to the phone number input.
- * @property {string} combinedValue - The combined country code and phone number value.
- */
-export declare const usePhoneInput: (value: string | number | readonly string[] | undefined) => usePhoneInputProps;
+/// <reference types="react" />
+export interface usePhoneInputProps {
+    /**
+     * The current country code value.
+     */
+    countryCode: string;
+    /**
+     * The current phone number value.
+     */
+    phoneNumber: string;
+    /**
+     * Whether the country code value is invalid.
+     */
+    isCountryCodeInvalid: boolean;
+    /**
+     * Whether the phone number value is invalid.
+     */
+    isPhoneNumberInvalid: boolean;
+    /**
+     * Whether the full phone number value is valid.
+     *
+     * @returns {boolean} Whether the full phone number value is valid.
+     */
+    isCombinedValueInvalid: boolean;
+    /**
+     * A function for handling changes to the country code input.
+     */
+    handleCountryCodeChange: (option: {
+        label: string;
+        value: string;
+    } | null) => void;
+    /**
+     * A function for handling changes to the phone number input.
+     */
+    handlePhoneNumberChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
+    /**
+     * The combined country code and phone number value.
+     *
+     * @example "+123456789"
+     * @returns {string} Combined phone number
+     */
+    combinedValue: string | number | readonly string[] | undefined;
+}
+/**
+ * A custom hook for managing phone number input state and validation.
+ *
+ * @returns {object} - An object containing state values and event handler functions.
+ * @property {string} countryCode - The current country code value.
+ * @property {string} phoneNumber - The current phone number value.
+ * @property {boolean} isCountryCodeInvalid - Whether the country code value is invalid.
+ * @property {boolean} isPhoneNumberInvalid - Whether the phone number value is invalid.
+ * @property {Function} handleCountryCodeChange - A function for handling changes to the country code input.
+ * @property {Function} handlePhoneNumberChange - A function for handling changes to the phone number input.
+ * @property {string} combinedValue - The combined country code and phone number value.
+ */
+export declare const usePhoneInput: (value: string | number | readonly string[] | undefined) => usePhoneInputProps;