@trackunit/react-form-components 0.0.66 → 0.0.70

package/package.json

@@ -1,16 +1,16 @@
 {
   "name": "@trackunit/react-form-components",
-  "version": "0.0.66",
+  "version": "0.0.70",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {
     "node": ">=16.x"
   },
   "dependencies": {
-    "@trackunit/css-class-variance-utilities": "0.0.5",
-    "@trackunit/i18n-library-translation": "0.0.58",
-    "@trackunit/react-components": "0.1.116",
-    "@trackunit/tailwind-styled-components": "0.0.57",
+    "@trackunit/css-class-variance-utilities": "0.0.6",
+    "@trackunit/i18n-library-translation": "0.0.59",
+    "@trackunit/react-components": "0.1.119",
+    "@trackunit/tailwind-styled-components": "0.0.58",
     "date-fns": "2.29.3",
     "libphonenumber-js": "1.10.36",
     "react": "18.2.0",

package/src/components/ActionButton/ActionButton.d.ts

@@ -1,26 +1,26 @@
-/// <reference types="react" />
-import { ButtonCommonProps, CommonProps } from "@trackunit/react-components";
-type ActionType = "PHONE_NUMBER" | "WEB_ADDRESS" | "EMAIL";
-type FieldSize = "small" | "medium";
-interface ActionButtonProps extends ButtonCommonProps, CommonProps {
-    /**
-     * The type of action performed when clicking the button.
-     */
-    type: ActionType;
-    /**
-     * The value to be passed into the button.
-     */
-    value?: string | null;
-    /**
-     *  The size of the icon.
-     */
-    iconSize?: FieldSize;
-}
-/**
- * The ActionButton component is a wrapper over IconButton to perform an action when the onClick event is triggered.
- *
- * @param {ActionButtonProps} props - The props for the ActionButton component
- * @returns {JSX.Element} ActionButton component
- */
-export declare const ActionButton: ({ type, value, dataTestId, iconSize, disabled }: ActionButtonProps) => JSX.Element;
-export {};
+/// <reference types="react" />
+import { ButtonCommonProps, CommonProps } from "@trackunit/react-components";
+type ActionType = "PHONE_NUMBER" | "WEB_ADDRESS" | "EMAIL";
+type FieldSize = "small" | "medium";
+interface ActionButtonProps extends ButtonCommonProps, CommonProps {
+    /**
+     * The type of action performed when clicking the button.
+     */
+    type: ActionType;
+    /**
+     * The value to be passed into the button.
+     */
+    value?: string | null;
+    /**
+     *  The size of the icon.
+     */
+    iconSize?: FieldSize;
+}
+/**
+ * The ActionButton component is a wrapper over IconButton to perform an action when the onClick event is triggered.
+ *
+ * @param {ActionButtonProps} props - The props for the ActionButton component
+ * @returns {JSX.Element} ActionButton component
+ */
+export declare const ActionButton: ({ type, value, dataTestId, iconSize, disabled }: ActionButtonProps) => JSX.Element;
+export {};

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

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

package/src/components/BaseInput/BaseInput.d.ts

@@ -1,62 +1,62 @@
-import { CommonProps } from "@trackunit/react-components";
-import * as React from "react";
-type FilteredInputProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, "prefix" | "suffix">;
-type FieldSize = "small" | "medium";
-export interface BaseInputProps extends FilteredInputProps, CommonProps {
-    /**
-     * A React element to render before the text in the input.
-     * This is typically used to render an icon.
-     * For elements other than icons, please consider using the addonBefore prop.
-     */
-    prefix?: React.ReactNode;
-    /**
-     * A React element to render after the text in the input.
-     * This is typically used to render an icon.
-     * For other elements than icons, please consider using the addonAfter prop.
-     */
-    suffix?: React.ReactNode;
-    /**
-     * A React element to render in a separate container before the text in the input.
-     * This is typically used to render text.
-     * For icons, please consider using the prefix prop.
-     */
-    addonBefore?: React.ReactNode;
-    /**
-     * A React element to render in a separate container after the text in the input.
-     * This is typically used to render text.
-     * For icons, please consider using the suffix prop.
-     */
-    addonAfter?: React.ReactNode;
-    /**
-     * A ReactNode to render at the end of the input field before the addonAfter.
-     * Mainly meant for the icon button actions for special input types.
-     */
-    actions?: React.ReactNode;
-    /**
-     *  The size of the input.
-     *  Default == 40px, Small == 32px.
-     */
-    fieldSize?: FieldSize;
-    /**
-     * If true the field is rendered in its invalid state.
-     */
-    isInvalid?: boolean;
-    /**
-     * The Placeholder text for the input.
-     */
-    placeholder?: string;
-    /**
-     * A flag to disable interaction with input for example if you want to use input as a child of higher component
-     */
-    nonInteractive?: boolean;
-}
-/**
- * A base input component that can be used for text inputs, password inputs, etc.
- * A reference to the input element is provided as the `ref` prop.
- * Extends props from [React.InputHTMLAttributes](https://reactjs.org/docs/dom-elements.html#input)
- *
- * For specific input types make sure to use the corresponding input component.
- * This is a base used by our other input components such as TextInput, NumberInput, PasswordInput, etc.
- */
-export declare const BaseInput: React.ForwardRefExoticComponent<BaseInputProps & React.RefAttributes<HTMLInputElement>>;
-export {};
+import { CommonProps } from "@trackunit/react-components";
+import * as React from "react";
+type FilteredInputProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, "prefix" | "suffix">;
+type FieldSize = "small" | "medium";
+export interface BaseInputProps extends FilteredInputProps, CommonProps {
+    /**
+     * A React element to render before the text in the input.
+     * This is typically used to render an icon.
+     * For elements other than icons, please consider using the addonBefore prop.
+     */
+    prefix?: React.ReactNode;
+    /**
+     * A React element to render after the text in the input.
+     * This is typically used to render an icon.
+     * For other elements than icons, please consider using the addonAfter prop.
+     */
+    suffix?: React.ReactNode;
+    /**
+     * A React element to render in a separate container before the text in the input.
+     * This is typically used to render text.
+     * For icons, please consider using the prefix prop.
+     */
+    addonBefore?: React.ReactNode;
+    /**
+     * A React element to render in a separate container after the text in the input.
+     * This is typically used to render text.
+     * For icons, please consider using the suffix prop.
+     */
+    addonAfter?: React.ReactNode;
+    /**
+     * A ReactNode to render at the end of the input field before the addonAfter.
+     * Mainly meant for the icon button actions for special input types.
+     */
+    actions?: React.ReactNode;
+    /**
+     *  The size of the input.
+     *  Default == 40px, Small == 32px.
+     */
+    fieldSize?: FieldSize;
+    /**
+     * If true the field is rendered in its invalid state.
+     */
+    isInvalid?: boolean;
+    /**
+     * The Placeholder text for the input.
+     */
+    placeholder?: string;
+    /**
+     * A flag to disable interaction with input for example if you want to use input as a child of higher component
+     */
+    nonInteractive?: boolean;
+}
+/**
+ * A base input component that can be used for text inputs, password inputs, etc.
+ * A reference to the input element is provided as the `ref` prop.
+ * Extends props from [React.InputHTMLAttributes](https://reactjs.org/docs/dom-elements.html#input)
+ *
+ * For specific input types make sure to use the corresponding input component.
+ * This is a base used by our other input components such as TextInput, NumberInput, PasswordInput, etc.
+ */
+export declare const BaseInput: React.ForwardRefExoticComponent<BaseInputProps & React.RefAttributes<HTMLInputElement>>;
+export {};

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

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

package/src/components/Checkbox/CheckIcon.d.ts

@@ -1,12 +1,12 @@
-/// <reference types="react" />
-import { CommonProps } from "@trackunit/react-components";
-interface CheckIconProps extends CommonProps {
-}
-/**
- * The CheckIcon component is used by the checkbox to display the checked state.
- *
- * @param {CheckIconProps} props - The props for the CheckIcon component
- * @returns {JSX.Element} CheckIcon component
- */
-export declare const CheckIcon: ({ className, dataTestId }: CheckIconProps) => JSX.Element;
-export {};
+/// <reference types="react" />
+import { CommonProps } from "@trackunit/react-components";
+interface CheckIconProps extends CommonProps {
+}
+/**
+ * The CheckIcon component is used by the checkbox to display the checked state.
+ *
+ * @param {CheckIconProps} props - The props for the CheckIcon component
+ * @returns {JSX.Element} CheckIcon component
+ */
+export declare const CheckIcon: ({ className, dataTestId }: CheckIconProps) => JSX.Element;
+export {};

package/src/components/Checkbox/Checkbox.d.ts

@@ -1,48 +1,48 @@
-import { CommonProps } from "@trackunit/react-components";
-import * as React from "react";
-export interface CheckboxProps extends CommonProps, React.InputHTMLAttributes<HTMLInputElement> {
-    /**
-     * A string element to be displayed as a label
-     */
-    label?: React.ReactNode;
-    /**
-     * An element to display after the label
-     */
-    suffix?: React.ReactNode;
-    /**
-     * An boolean flag to set checkbox to checked state
-     */
-    checked?: boolean;
-    /**
-     * An boolean flag to set checkbox to disabled state
-     */
-    disabled?: boolean;
-    /**
-     * An boolean flag to set invalid mode
-     * can be used for indicating errors
-     */
-    isInvalid?: boolean;
-    /**
-     * An boolean flag to set checkbox to readonly mode
-     */
-    readOnly?: boolean;
-    /**
-     * An boolean flag to set checkbox to intermediate state
-     */
-    indeterminate?: boolean;
-}
-/**
- * Checkboxes are used when there are multiple items to select in a list. Users can select zero, one, or any number of items.
- *
- * Checkboxes are used for multiple choices, not for mutually exclusive choices. Each checkbox works independently from other checkboxes in the list, therefore checking an additional box does not affect any other selections.
- *
- * _**Do use** checkboxes to allow selection in a form, for filtering, terms and conditions to indicate agreement, and bulk actions in lists or tables._
- *
- * _**Do not use** checkboxes if the user can only select one option from a list, radio buttons should be used instead of checkboxes._
- *
- * @description A reference to the input element is provided as the `ref` prop.
- * @augments props from [React.InputHTMLAttributes](https://reactjs.org/docs/dom-elements.html#input)
- * @param {CheckboxProps} props - The props for the Checkbox component
- * @returns {JSX.Element} Checkbox component
- */
-export declare const Checkbox: React.ForwardRefExoticComponent<CheckboxProps & React.RefAttributes<HTMLInputElement>>;
+import { CommonProps } from "@trackunit/react-components";
+import * as React from "react";
+export interface CheckboxProps extends CommonProps, React.InputHTMLAttributes<HTMLInputElement> {
+    /**
+     * A string element to be displayed as a label
+     */
+    label?: React.ReactNode;
+    /**
+     * An element to display after the label
+     */
+    suffix?: React.ReactNode;
+    /**
+     * An boolean flag to set checkbox to checked state
+     */
+    checked?: boolean;
+    /**
+     * An boolean flag to set checkbox to disabled state
+     */
+    disabled?: boolean;
+    /**
+     * An boolean flag to set invalid mode
+     * can be used for indicating errors
+     */
+    isInvalid?: boolean;
+    /**
+     * An boolean flag to set checkbox to readonly mode
+     */
+    readOnly?: boolean;
+    /**
+     * An boolean flag to set checkbox to intermediate state
+     */
+    indeterminate?: boolean;
+}
+/**
+ * Checkboxes are used when there are multiple items to select in a list. Users can select zero, one, or any number of items.
+ *
+ * Checkboxes are used for multiple choices, not for mutually exclusive choices. Each checkbox works independently from other checkboxes in the list, therefore checking an additional box does not affect any other selections.
+ *
+ * _**Do use** checkboxes to allow selection in a form, for filtering, terms and conditions to indicate agreement, and bulk actions in lists or tables._
+ *
+ * _**Do not use** checkboxes if the user can only select one option from a list, radio buttons should be used instead of checkboxes._
+ *
+ * @description A reference to the input element is provided as the `ref` prop.
+ * @augments props from [React.InputHTMLAttributes](https://reactjs.org/docs/dom-elements.html#input)
+ * @param {CheckboxProps} props - The props for the Checkbox component
+ * @returns {JSX.Element} Checkbox component
+ */
+export declare const Checkbox: React.ForwardRefExoticComponent<CheckboxProps & React.RefAttributes<HTMLInputElement>>;

package/src/components/Checkbox/IndeterminateIcon.d.ts

@@ -1,10 +1,10 @@
-/// <reference types="react" />
-/**
- * The IndeterminateIcon component is used by the checkbox to display the Indeterminate state.
- *
- * @param {IndeterminateIconProps} props - The props for the IndeterminateIcon component
- * @returns {JSX.Element} IndeterminateIcon component
- */
-export declare const IndeterminateIcon: ({ className }: {
-    className?: string | undefined;
-}) => JSX.Element;
+/// <reference types="react" />
+/**
+ * The IndeterminateIcon component is used by the checkbox to display the Indeterminate state.
+ *
+ * @param {IndeterminateIconProps} props - The props for the IndeterminateIcon component
+ * @returns {JSX.Element} IndeterminateIcon component
+ */
+export declare const IndeterminateIcon: ({ className }: {
+    className?: string | undefined;
+}) => JSX.Element;

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

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

package/src/components/DateField/DateField.d.ts

@@ -1,19 +1,19 @@
-/// <reference types="react" />
-import { DateInputProps } from "../DateInput/DateInput";
-import { FormGroupProps } from "../FormGroup/FormGroup";
-type FormGroupExposedProps = Pick<FormGroupProps, "label" | "tip" | "helpText" | "helpAddon">;
-export interface DateFieldProps extends DateInputProps, FormGroupExposedProps {
-    /**
-     * If a value is set, the field is rendered in its invalid state.
-     */
-    errorMessage?: string;
-}
-/**
- * The date field component is used for entering date values.
- *
- * _**Do use**_ the DateField for date input.
- *
- * _**Do not use**_ this fields for non-serialized dates. Use TextField instead.
- */
-export declare const DateField: import("react").ForwardRefExoticComponent<DateFieldProps & import("react").RefAttributes<HTMLInputElement>>;
-export {};
+/// <reference types="react" />
+import { DateInputProps } from "../DateInput/DateInput";
+import { FormGroupProps } from "../FormGroup/FormGroup";
+type FormGroupExposedProps = Pick<FormGroupProps, "label" | "tip" | "helpText" | "helpAddon">;
+export interface DateFieldProps extends DateInputProps, FormGroupExposedProps {
+    /**
+     * If a value is set, the field is rendered in its invalid state.
+     */
+    errorMessage?: string;
+}
+/**
+ * The date field component is used for entering date values.
+ *
+ * _**Do use**_ the DateField for date input.
+ *
+ * _**Do not use**_ this fields for non-serialized dates. Use TextField instead.
+ */
+export declare const DateField: import("react").ForwardRefExoticComponent<DateFieldProps & import("react").RefAttributes<HTMLInputElement>>;
+export {};

package/src/components/DateInput/DateInput.d.ts

@@ -1,28 +1,28 @@
-/// <reference types="react" />
-import { BaseInputProps } from "../BaseInput";
-type BaseInputExposedProps = Omit<BaseInputProps, "defaultValue" | "min" | "max" | "value">;
-export interface DateInputProps extends BaseInputExposedProps {
-    /**
-     * A min value with type Date added
-     */
-    min?: Date | string | number;
-    /**
-     * A max value with type Date added
-     */
-    max?: Date | string | number;
-    /**
-     * A default value with type Date added
-     */
-    defaultValue?: Date | string | number;
-    /**
-     * A value with type Date added
-     */
-    value?: Date | string | number;
-}
-/**
- * A wrapper around BaseInput with a pop-up day picker.
- *
- * NOTE: If shown with a label, please use the `DateField` component instead.
- */
-export declare const DateInput: import("react").ForwardRefExoticComponent<DateInputProps & import("react").RefAttributes<HTMLInputElement>>;
-export {};
+/// <reference types="react" />
+import { BaseInputProps } from "../BaseInput";
+type BaseInputExposedProps = Omit<BaseInputProps, "defaultValue" | "min" | "max" | "value">;
+export interface DateInputProps extends BaseInputExposedProps {
+    /**
+     * A min value with type Date added
+     */
+    min?: Date | string | number;
+    /**
+     * A max value with type Date added
+     */
+    max?: Date | string | number;
+    /**
+     * A default value with type Date added
+     */
+    defaultValue?: Date | string | number;
+    /**
+     * A value with type Date added
+     */
+    value?: Date | string | number;
+}
+/**
+ * A wrapper around BaseInput with a pop-up day picker.
+ *
+ * NOTE: If shown with a label, please use the `DateField` component instead.
+ */
+export declare const DateInput: import("react").ForwardRefExoticComponent<DateInputProps & import("react").RefAttributes<HTMLInputElement>>;
+export {};

package/src/components/DropZone/DropZone.d.ts

@@ -1,34 +1,34 @@
-/// <reference types="react" />
-import { CommonProps, Size } from "@trackunit/react-components";
-import { BaseInputProps } from "../BaseInput";
-type BaseInputExposedProps = Omit<BaseInputProps, "type" | "suffix" | "prefix" | "addonAfter" | "addonBefore" | "actions" | "placeholder" | "fieldSize" | "size" | "nonInteractive">;
-export interface DropZoneProps extends BaseInputExposedProps, CommonProps {
-    /**
-     * A string to set the label in Drop Zone.
-     */
-    label: string;
-    /**
-     * A flag to disable the drop zone.
-     */
-    disabled?: boolean;
-    /**
-     * The size of the dropZone
-     * small - padding:8px, medium - padding:16px large - padding:32px
-     */
-    size?: Size;
-    /**
-     * The files dropped can be accessed within filesSelected
-     *
-     * @param file
-     * @returns
-     */
-    filesSelected: (file: FileList) => void;
-}
-/**
- * The Drop Zone can be used to drag and drop files
- *
- * @param {DropZoneProps} props - The props for the DropZone component
- * @returns {JSX.Element} DropZone component
- */
-export declare const DropZone: ({ className, dataTestId, filesSelected, label, size, isInvalid, disabled, ...rest }: DropZoneProps) => JSX.Element;
-export {};
+/// <reference types="react" />
+import { CommonProps, Size } from "@trackunit/react-components";
+import { BaseInputProps } from "../BaseInput";
+type BaseInputExposedProps = Omit<BaseInputProps, "type" | "suffix" | "prefix" | "addonAfter" | "addonBefore" | "actions" | "placeholder" | "fieldSize" | "size" | "nonInteractive">;
+export interface DropZoneProps extends BaseInputExposedProps, CommonProps {
+    /**
+     * A string to set the label in Drop Zone.
+     */
+    label: string;
+    /**
+     * A flag to disable the drop zone.
+     */
+    disabled?: boolean;
+    /**
+     * The size of the dropZone
+     * small - padding:8px, medium - padding:16px large - padding:32px
+     */
+    size?: Size;
+    /**
+     * The files dropped can be accessed within filesSelected
+     *
+     * @param file
+     * @returns
+     */
+    filesSelected: (file: FileList) => void;
+}
+/**
+ * The Drop Zone can be used to drag and drop files
+ *
+ * @param {DropZoneProps} props - The props for the DropZone component
+ * @returns {JSX.Element} DropZone component
+ */
+export declare const DropZone: ({ className, dataTestId, filesSelected, label, size, isInvalid, disabled, ...rest }: DropZoneProps) => JSX.Element;
+export {};

package/src/components/EmailField/EmailField.d.ts

@@ -1,17 +1,17 @@
-/// <reference types="react" />
-import { BaseInputProps } from "../BaseInput";
-import { FormGroupProps } from "../FormGroup/FormGroup";
-type FormGroupExposedProps = Pick<FormGroupProps, "label" | "tip" | "helpText" | "helpAddon">;
-export interface EmailFieldProps extends FormGroupExposedProps, BaseInputProps {
-    /**
-     * If a value is set, the field is rendered in its invalid state.
-     */
-    errorMessage?: string;
-}
-/**
- * The EmailField component is used to enter email.
- * EmailField validates that user enters a valid email address.
- *
- */
-export declare const EmailField: import("react").ForwardRefExoticComponent<EmailFieldProps & import("react").RefAttributes<HTMLInputElement>>;
-export {};
+/// <reference types="react" />
+import { BaseInputProps } from "../BaseInput";
+import { FormGroupProps } from "../FormGroup/FormGroup";
+type FormGroupExposedProps = Pick<FormGroupProps, "label" | "tip" | "helpText" | "helpAddon">;
+export interface EmailFieldProps extends FormGroupExposedProps, BaseInputProps {
+    /**
+     * If a value is set, the field is rendered in its invalid state.
+     */
+    errorMessage?: string;
+}
+/**
+ * The EmailField component is used to enter email.
+ * EmailField validates that user enters a valid email address.
+ *
+ */
+export declare const EmailField: import("react").ForwardRefExoticComponent<EmailFieldProps & import("react").RefAttributes<HTMLInputElement>>;
+export {};

package/src/components/EmailInput/EmailInput.d.ts

@@ -1,13 +1,13 @@
-import * as React from "react";
-import { BaseInputProps } from "../BaseInput";
-/**
- * A Email Input component is used for input of the type Email.
- *
- * It has an ActionButton which sends an email to the specified address using "mailto:" link.
- *
- * Extends props of BaseInput.
- *
- * A reference to the input element is provided as the `ref` prop.
- * For specific input types make sure to use the corresponding input component.
- */
-export declare const EmailInput: React.ForwardRefExoticComponent<BaseInputProps & React.RefAttributes<HTMLInputElement>>;
+import * as React from "react";
+import { BaseInputProps } from "../BaseInput";
+/**
+ * A Email Input component is used for input of the type Email.
+ *
+ * It has an ActionButton which sends an email to the specified address using "mailto:" link.
+ *
+ * Extends props of BaseInput.
+ *
+ * A reference to the input element is provided as the `ref` prop.
+ * For specific input types make sure to use the corresponding input component.
+ */
+export declare const EmailInput: React.ForwardRefExoticComponent<BaseInputProps & React.RefAttributes<HTMLInputElement>>;

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

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