@trackunit/react-form-components 1.8.121 → 1.8.123

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

@@ -1,4 +1,4 @@
-import { ReactNode } from "react";
+import { ReactElement, ReactNode } from "react";
 import { BaseInputProps } from "../../BaseInput";
 type BaseInputExposedProps = Omit<BaseInputProps, "actions">;
 export interface PhoneBaseInputProps extends BaseInputExposedProps {
@@ -26,5 +26,5 @@ export interface PhoneBaseInputProps extends BaseInputExposedProps {
  * @param {string} [fieldSize="medium"] - The size of the input field.
  * @param {boolean} [disableAction=false] - Whether the action button is disabled or not.
  */
-export declare const PhoneBaseInput: ({ "data-testid": dataTestId, isInvalid, disabled, value, defaultValue, fieldSize, disableAction, onChange, readOnly, onFocus, onBlur, name, ref, ...rest }: PhoneBaseInputProps) => import("react/jsx-runtime").JSX.Element;
+export declare const PhoneBaseInput: ({ "data-testid": dataTestId, isInvalid, disabled, value, defaultValue, fieldSize, disableAction, onChange, readOnly, onFocus, onBlur, name, ref, ...rest }: PhoneBaseInputProps) => ReactElement;
 export {};

package/src/components/SelectField/CreatableSelectField.d.ts

@@ -1,6 +1,8 @@
-import { CreatableSelectProps } from "../BaseSelect/CreatableSelect";
+import { ReactElement } from "react";
+import { GroupBase } from "react-select";
+import { CreatableSelectExtraProps } from "../BaseSelect/CreatableSelect";
 import { BaseOptionType, SelectFieldProps } from "./FormFieldSelectAdapter";
-interface CreatableSelectFieldProps extends SelectFieldProps<BaseOptionType>, CreatableSelectProps {
+interface CreatableSelectFieldProps<TOption extends BaseOptionType = BaseOptionType, TIsAsync extends boolean = false> extends SelectFieldProps<TOption, TIsAsync>, CreatableSelectExtraProps<TOption, false, GroupBase<TOption>> {
 }
 /**
  * The CreatableSelectField component is a CreatableSelect component wrapped in the FromGroup component.
@@ -12,7 +14,7 @@ interface CreatableSelectFieldProps extends SelectFieldProps<BaseOptionType>, Cr
  * @param {SelectFieldProps & CreatableSelectProps} props - The props for the CreatableSelectField component
  */
 export declare const CreatableSelectField: {
-    ({ allowCreateWhileLoading, onCreateOption, ref, ...props }: CreatableSelectFieldProps): import("react/jsx-runtime").JSX.Element;
+    <TOption extends BaseOptionType = BaseOptionType, TIsAsync extends boolean = false>({ allowCreateWhileLoading, onCreateOption, ref, ...props }: CreatableSelectFieldProps<TOption, TIsAsync>): ReactElement;
     displayName: string;
 };
 export {};

package/src/components/SelectField/FormFieldSelectAdapter.d.ts

@@ -1,6 +1,6 @@
 import { CommonProps } from "@trackunit/react-components";
 import { MappedOmit } from "@trackunit/shared-utils";
-import { FocusEvent, ReactNode, Ref } from "react";
+import { FocusEvent, ReactElement, ReactNode, Ref } from "react";
 import { GroupBase } from "react-select";
 import { SelectProps } from "../BaseSelect/useSelect";
 import { FormGroupProps } from "../FormGroup/FormGroup";
@@ -8,47 +8,51 @@ export type BaseOptionType = {
     label: string;
     value: string | number;
 };
-type SelectExposedProps<TOptionType extends BaseOptionType> = MappedOmit<SelectProps<TOptionType, false, false, GroupBase<TOptionType>>, "value" | "label" | "onChange" | "defaultValue" | "onBlur" | "options">;
+type SelectExposedProps<TOption extends BaseOptionType = BaseOptionType, TIsAsync extends boolean = false> = MappedOmit<SelectProps<TOption, TIsAsync, false, GroupBase<TOption>>, "value" | "label" | "onChange" | "defaultValue" | "onBlur" | "options">;
 type FormGroupExposedProps = Pick<FormGroupProps, "label" | "tip" | "helpText" | "helpAddon" | "isInvalid">;
-export type SelectFieldProps<TOptionType extends BaseOptionType> = CommonProps & FormGroupExposedProps & SelectExposedProps<TOptionType> & {
+export type SelectFieldProps<TOption extends BaseOptionType = BaseOptionType, TIsAsync extends boolean = false> = CommonProps & FormGroupExposedProps & SelectExposedProps<TOption, TIsAsync> & {
     onBlur?: (event: FocusEvent<HTMLInputElement>) => void;
     /**
      * The options available for the SelectField.
      */
-    options: Array<TOptionType>;
+    options: Array<TOption>;
     /**
      * The selected value of the SelectField.
      */
-    value?: TOptionType["value"];
+    value?: TOption["value"];
     /**
      * The default selected value of the SelectField.
      */
-    defaultValue?: TOptionType["value"];
+    defaultValue?: TOption["value"];
     /**
      * The onChange handler for the SelectField.
      */
     onChange?: (event: {
         target: {
-            value?: TOptionType["value"];
+            value?: TOption["value"];
         };
     }) => void;
     /**
      * If a value is set, the field is rendered in its invalid state.
      */
     errorMessage?: string;
+    /**
+     * The htmlFor attribute for the label. If not provided, falls back to id or generates a unique value.
+     */
+    htmlFor?: string;
     /**
      * A ref for the component
      */
     ref?: Ref<HTMLSelectElement>;
 };
-interface FormFieldSelectAdapterProps<TOptionType extends BaseOptionType, TIsAsync extends boolean = false, TIsMulti extends boolean = false> extends SelectFieldProps<TOptionType> {
-    children: (props: SelectProps<TOptionType, TIsAsync, TIsMulti, GroupBase<TOptionType>>) => ReactNode;
+interface FormFieldSelectAdapterProps<TOption extends BaseOptionType = BaseOptionType, TIsAsync extends boolean = false> extends SelectFieldProps<TOption, TIsAsync> {
+    children: (props: SelectProps<TOption, TIsAsync, false, GroupBase<TOption>>) => ReactNode;
 }
 /**
  *
  */
 export declare const FormFieldSelectAdapter: {
-    ({ className, "data-testid": dataTestId, helpText, helpAddon, tip, label, isInvalid, errorMessage, name, onBlur, options, value, defaultValue, id, onChange, children, ref, ...rest }: FormFieldSelectAdapterProps<BaseOptionType>): import("react/jsx-runtime").JSX.Element;
+    <TOption extends BaseOptionType = BaseOptionType, TIsAsync extends boolean = false>({ className, "data-testid": dataTestId, helpText, helpAddon, tip, label, isInvalid, errorMessage, name, onBlur, options, value, defaultValue, id, htmlFor: htmlForProp, onChange, children, ref, required, ...rest }: FormFieldSelectAdapterProps<TOption, TIsAsync>): ReactElement;
     displayName: string;
 };
 export {};

package/src/components/SelectField/SelectField.d.ts

@@ -1,14 +1,11 @@
+import { ReactElement } from "react";
 import { BaseOptionType, SelectFieldProps } from "./FormFieldSelectAdapter";
 /**
- * The SelectField component is a Select component wrapped in the FromGroup component.
- *
- * This means that it can easily be added to any form alongside other Field components.
- *
- * This is done to make the field compatible with the React-hook-form library.
+ * MultiSelect is a custom Select component wrapped in the FormGroup component
  *
  * @param {SelectFieldProps} props - The props for the SelectField component
  */
-export declare const SelectField: {
-    ({ ref, ...props }: SelectFieldProps<BaseOptionType>): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-};
+export declare function SelectField<TOption extends BaseOptionType, TIsAsync extends boolean = false>({ ref, ...props }: SelectFieldProps<TOption, TIsAsync>): ReactElement;
+export declare namespace SelectField {
+    var displayName: string;
+}

package/src/components/UrlField/UrlBaseInput/UrlBaseInput.d.ts

@@ -1,3 +1,4 @@
+import { ReactElement } from "react";
 import { BaseInputProps } from "../../BaseInput";
 type BaseInputExposedProps = Omit<BaseInputProps, "type">;
 export interface UrlBaseInputProps extends BaseInputExposedProps {
@@ -16,5 +17,5 @@ export interface UrlBaseInputProps extends BaseInputExposedProps {
  *
  * NOTE: If shown with a label, please use the `UrlField` component instead.
  */
-export declare const UrlBaseInput: ({ "data-testid": dataTestId, isInvalid, disabled, fieldSize, disableAction, value, defaultValue, ref, ...rest }: UrlBaseInputProps) => import("react/jsx-runtime").JSX.Element;
+export declare const UrlBaseInput: ({ isInvalid, "data-testid": dataTestId, disabled, fieldSize, disableAction, value, defaultValue, ref, ...rest }: UrlBaseInputProps) => ReactElement;
 export {};

package/src/components/storybook-utils/sharedArgTypes.d.ts

@@ -91,24 +91,6 @@ export declare const selectMostImportantArgTypes: {
         };
         readonly description: "Callback fired when the menu is opened.";
     };
-    readonly getOptionLabel: {
-        readonly control: false;
-        readonly table: {
-            readonly type: {
-                readonly summary: "(option: Option) => string";
-            };
-        };
-        readonly description: "Resolves option data to a string to be displayed as the label for that option.";
-    };
-    readonly getOptionValue: {
-        readonly control: false;
-        readonly table: {
-            readonly type: {
-                readonly summary: "(option: Option) => string";
-            };
-        };
-        readonly description: "Resolves option data to a string to compare options and specify value attributes";
-    };
     readonly getOptionLabelDescription: {
         readonly control: false;
         readonly table: {
@@ -229,24 +211,6 @@ export declare const selectArgTypes: {
         };
         readonly description: "Callback fired when the menu is opened.";
     };
-    readonly getOptionLabel: {
-        readonly control: false;
-        readonly table: {
-            readonly type: {
-                readonly summary: "(option: Option) => string";
-            };
-        };
-        readonly description: "Resolves option data to a string to be displayed as the label for that option.";
-    };
-    readonly getOptionValue: {
-        readonly control: false;
-        readonly table: {
-            readonly type: {
-                readonly summary: "(option: Option) => string";
-            };
-        };
-        readonly description: "Resolves option data to a string to compare options and specify value attributes";
-    };
     readonly getOptionLabelDescription: {
         readonly control: false;
         readonly table: {
@@ -285,24 +249,6 @@ export declare const fieldSizeArgType: {
     readonly options: readonly ["small", "medium", "large"];
     readonly description: "Size of the select field.";
 };
-export declare const getOptionLabelArgType: {
-    readonly control: false;
-    readonly table: {
-        readonly type: {
-            readonly summary: "(option: Option) => string";
-        };
-    };
-    readonly description: "Resolves option data to a string to be displayed as the label for that option.";
-};
-export declare const getOptionValueArgType: {
-    readonly control: false;
-    readonly table: {
-        readonly type: {
-            readonly summary: "(option: Option) => string";
-        };
-    };
-    readonly description: "Resolves option data to a string to compare options and specify value attributes";
-};
 export declare const getOptionLabelDescriptionArgType: {
     readonly control: false;
     readonly table: {

package/src/translation.d.ts

@@ -14,8 +14,8 @@ export declare const translations: TranslationResource<TranslationKeys>;
 /**
  *  Local useTranslation for this specific library
  */
-export declare const useTranslation: () => [TransForLibs<"baseInput.copyAction.toolTip" | "clearIndicator.icon.tooltip.clearAll" | "colorField.error.INVALID_HEX_CODE" | "colorField.error.REQUIRED" | "colorField.tooltip" | "dropzone.input.title" | "dropzone.label.default" | "emailField.error.INVALID_EMAIL" | "emailField.error.REQUIRED" | "field.notEditable.tooltip" | "field.required.asterisk.tooltip" | "numberField.error.GREATER_THAN" | "numberField.error.INVALID_NUMBER" | "numberField.error.LESS_THAN" | "numberField.error.NOT_IN_BETWEEN" | "numberField.error.REQUIRED" | "phoneField.error.INVALID_COUNTRY" | "phoneField.error.INVALID_LENGTH" | "phoneField.error.INVALID_NUMBER" | "phoneField.error.NOT_A_NUMBER" | "phoneField.error.REQUIRED" | "phoneField.error.REQUIRED_COUNTRY" | "phoneField.error.TOO_LONG" | "phoneField.error.TOO_SHORT" | "phoneField.error.undefined" | "schedule.label.active" | "schedule.label.allDay" | "schedule.label.day" | "search.placeholder" | "urlField.error.INVALID_URL" | "urlField.error.REQUIRED">, import("i18next").i18n, boolean] & {
-    t: TransForLibs<"baseInput.copyAction.toolTip" | "clearIndicator.icon.tooltip.clearAll" | "colorField.error.INVALID_HEX_CODE" | "colorField.error.REQUIRED" | "colorField.tooltip" | "dropzone.input.title" | "dropzone.label.default" | "emailField.error.INVALID_EMAIL" | "emailField.error.REQUIRED" | "field.notEditable.tooltip" | "field.required.asterisk.tooltip" | "numberField.error.GREATER_THAN" | "numberField.error.INVALID_NUMBER" | "numberField.error.LESS_THAN" | "numberField.error.NOT_IN_BETWEEN" | "numberField.error.REQUIRED" | "phoneField.error.INVALID_COUNTRY" | "phoneField.error.INVALID_LENGTH" | "phoneField.error.INVALID_NUMBER" | "phoneField.error.NOT_A_NUMBER" | "phoneField.error.REQUIRED" | "phoneField.error.REQUIRED_COUNTRY" | "phoneField.error.TOO_LONG" | "phoneField.error.TOO_SHORT" | "phoneField.error.undefined" | "schedule.label.active" | "schedule.label.allDay" | "schedule.label.day" | "search.placeholder" | "urlField.error.INVALID_URL" | "urlField.error.REQUIRED">;
+export declare const useTranslation: () => [TransForLibs<"baseInput.copyAction.toolTip" | "clearIndicator.icon.tooltip.clearAll" | "colorField.error.INVALID_HEX_CODE" | "colorField.error.REQUIRED" | "colorField.tooltip" | "dropzone.input.title" | "dropzone.label.default" | "emailField.error.INVALID_EMAIL" | "emailField.error.REQUIRED" | "field.notEditable.tooltip" | "field.required.asterisk.tooltip" | "numberField.error.GREATER_THAN" | "numberField.error.INVALID_NUMBER" | "numberField.error.LESS_THAN" | "numberField.error.NOT_IN_BETWEEN" | "numberField.error.REQUIRED" | "phoneField.error.INVALID_COUNTRY" | "phoneField.error.INVALID_LENGTH" | "phoneField.error.INVALID_NUMBER" | "phoneField.error.NOT_A_NUMBER" | "phoneField.error.REQUIRED" | "phoneField.error.REQUIRED_COUNTRY" | "phoneField.error.TOO_LONG" | "phoneField.error.TOO_SHORT" | "phoneField.error.undefined" | "schedule.label.active" | "schedule.label.allDay" | "schedule.label.day" | "search.placeholder" | "select.loadingMessage" | "select.noOptionsMessage" | "urlField.error.INVALID_URL" | "urlField.error.REQUIRED">, import("i18next").i18n, boolean] & {
+    t: TransForLibs<"baseInput.copyAction.toolTip" | "clearIndicator.icon.tooltip.clearAll" | "colorField.error.INVALID_HEX_CODE" | "colorField.error.REQUIRED" | "colorField.tooltip" | "dropzone.input.title" | "dropzone.label.default" | "emailField.error.INVALID_EMAIL" | "emailField.error.REQUIRED" | "field.notEditable.tooltip" | "field.required.asterisk.tooltip" | "numberField.error.GREATER_THAN" | "numberField.error.INVALID_NUMBER" | "numberField.error.LESS_THAN" | "numberField.error.NOT_IN_BETWEEN" | "numberField.error.REQUIRED" | "phoneField.error.INVALID_COUNTRY" | "phoneField.error.INVALID_LENGTH" | "phoneField.error.INVALID_NUMBER" | "phoneField.error.NOT_A_NUMBER" | "phoneField.error.REQUIRED" | "phoneField.error.REQUIRED_COUNTRY" | "phoneField.error.TOO_LONG" | "phoneField.error.TOO_SHORT" | "phoneField.error.undefined" | "schedule.label.active" | "schedule.label.allDay" | "schedule.label.day" | "search.placeholder" | "select.loadingMessage" | "select.noOptionsMessage" | "urlField.error.INVALID_URL" | "urlField.error.REQUIRED">;
     i18n: import("i18next").i18n;
     ready: boolean;
 };

package/src/types.d.ts

@@ -1 +1 @@
-export type FormComponentSizes = "small" | "medium" | "large" | undefined | null;
+export type FormComponentSizes = "small" | "medium" | "large";

package/src/components/BaseSelect/TagWithWidth.d.ts

@@ -1,16 +0,0 @@
-import { TagProps } from "@trackunit/react-components";
-type TagsPropsNoRef = Omit<TagProps, "ref">;
-interface TagWithWidthProps extends TagsPropsNoRef {
-    onWidthKnown?: ({ width }: {
-        width: number;
-    }) => void;
-}
-/**
- * Extended Tag component with information about its own width.
- * Used in the select component.
- *
- * @param {TagProps} props - The props for the tag component
- * @returns {ReactElement} TagWithWidth component
- */
-export declare const TagWithWidth: ({ onWidthKnown, children, ...rest }: TagWithWidthProps) => import("react/jsx-runtime").JSX.Element;
-export {};

package/src/components/BaseSelect/TagsContainer.d.ts

@@ -1,51 +0,0 @@
-import { ReactElement, ReactNode } from "react";
-interface TagsContainerItem {
-    /**
-     * A text value to be passed to tags inside container
-     */
-    text: string;
-    /**
-     * OnClick handler for a tags
-     */
-    onClick: () => void;
-    /**
-     * A flag to set tags to readonly mode (without close button)
-     */
-    disabled: boolean;
-    Icon?: ReactNode;
-}
-interface TagsContainerProps {
-    /**
-     * An items to be rendered inside container if they fit available space. If they overlap then the counter will be displayed.
-     */
-    items: Array<TagsContainerItem>;
-    /**
-     * An css property to set a custom width for container
-     * Default behavior is to take 100% width of parent element
-     * You can provide a value with unit (pixels, percents, rem, etc)
-     *
-     * @memberof TagsContainerProps
-     */
-    width?: string;
-    /**
-     * In case you have a gap between items then you can provide it to be used in calculation of available space,
-     * default value is 5, so if you don't need it then provide 0
-     *
-     * @memberof TagsContainerProps
-     */
-    itemsGap?: number;
-    preFix: ReactElement | null;
-    postFix: ReactElement;
-    /**
-     * Is the parent dropdown disabled
-     */
-    disabled?: boolean;
-}
-/**
- * TagsContainer component to display tags in limited space when children can't fit space it displays counter
- *
- * @param {TagsContainerProps} props - The props for the TagContainer
- * @returns {ReactElement} TagsContainer
- */
-export declare const TagsContainer: ({ items, width, itemsGap, postFix, preFix, disabled, }: TagsContainerProps) => import("react/jsx-runtime").JSX.Element;
-export {};

package/src/components/BaseSelect/useCustomStyles.d.ts

@@ -1,20 +0,0 @@
-import { RefObject } from "react";
-import { GroupBase, StylesConfig } from "react-select";
-import { FormComponentSizes } from "../../types";
-/**
- * @template IsMulti
- * @template Group
- * @param {RefObject<HTMLDivElement | null>} refContainer  react ref to container element
- * @param {number | undefined} maxSelectedDisplayCount a number of max display count
- * @param {StylesConfig<Option, IsMulti, Group> | undefined} styles a optional object to override styles of react-select
- * @returns {StylesConfig<Option, boolean>} styles to override in select
- */
-export declare const useCustomStyles: <Option, IsMulti extends boolean = false, Group extends GroupBase<Option> = GroupBase<Option>>({ refContainer, maxSelectedDisplayCount, styles, disabled, fieldSize, }: {
-    refContainer: RefObject<HTMLDivElement | null>;
-    maxSelectedDisplayCount: number | undefined;
-    styles: StylesConfig<Option, IsMulti, Group> | undefined;
-    disabled: boolean | undefined;
-    fieldSize: FormComponentSizes;
-}) => {
-    customStyles: StylesConfig<Option, IsMulti, Group>;
-};