@trackunit/react-form-components 1.8.121 → 1.8.123

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-form-components",
-  "version": "1.8.121",
+  "version": "1.8.123",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {
@@ -8,20 +8,21 @@
   },
   "dependencies": {
     "react": "19.0.0",
-    "react-select": "^5.10.0",
+    "react-select": "^5.10.2",
     "usehooks-ts": "^3.1.0",
     "libphonenumber-js": "^1.12.22",
     "zod": "^3.23.8",
     "react-hook-form": "7.62.0",
     "tailwind-merge": "^2.0.0",
-    "@trackunit/css-class-variance-utilities": "1.7.78",
-    "@trackunit/react-components": "1.10.53",
-    "@trackunit/ui-icons": "1.7.79",
-    "@trackunit/shared-utils": "1.9.78",
-    "@trackunit/ui-design-tokens": "1.7.78",
-    "@trackunit/i18n-library-translation": "1.7.96",
+    "@trackunit/css-class-variance-utilities": "1.7.80",
+    "@trackunit/react-components": "1.10.55",
+    "@trackunit/ui-icons": "1.7.81",
+    "@trackunit/shared-utils": "1.9.80",
+    "@trackunit/ui-design-tokens": "1.7.80",
+    "@trackunit/i18n-library-translation": "1.7.98",
     "string-ts": "^2.0.0",
     "@js-temporal/polyfill": "^0.5.1",
+    "es-toolkit": "^1.39.10",
     "@storybook/react-webpack5": "9.1.13"
   },
   "module": "./index.esm.js",

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

@@ -38,10 +38,6 @@ export interface BaseInputProps extends FilteredInputProps, CommonProps {
      * The Placeholder text for the input.
      */
     placeholder?: string;
-    /**
-     * Flag to disable direct interaction with the input.
-     */
-    nonInteractive?: boolean;
     /**
      * Custom css classes for the inner Input element.
      */
@@ -76,7 +72,7 @@ export interface BaseInputProps extends FilteredInputProps, CommonProps {
  * This is a base used by our other input components such as TextBaseInput, NumberBaseInput, PasswordBaseInput, etc.
  */
 export declare const BaseInput: {
-    ({ className, isInvalid, "data-testid": dataTestId, prefix, suffix, addonBefore, addonAfter, actions, fieldSize, nonInteractive, inputClassName, placeholder, isWarning, type, genericAction, style, ref, required, ...rest }: BaseInputProps): ReactElement;
+    ({ className, isInvalid, "data-testid": dataTestId, prefix, suffix, addonBefore, addonAfter, actions, fieldSize, inputClassName, placeholder, isWarning, type, genericAction, style, ref, required, readOnly, disabled, ...rest }: BaseInputProps): ReactElement;
     displayName: string;
 };
 export {};

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

@@ -7,12 +7,9 @@ export interface SelectOption<TValue extends string> {
     isDisabled?: boolean;
 }
 /**
- * Selects are input components used to choose a value from a set.
+ * BaseSelect are input components used to choose a value from a set.
  *
  * @param {SelectProps} props - The props for the Select component
  * @returns {ReactElement} Select component
  */
-export declare const BaseSelect: {
-    <Option, IsAsync extends boolean = false, IsMulti extends boolean = false, Group extends GroupBase<Option> = GroupBase<Option>>(props: SelectProps<Option, IsAsync, IsMulti, Group>): ReactElement;
-    displayName: string;
-};
+export declare const BaseSelect: <TOption, TIsAsync extends boolean = false, TIsMulti extends boolean = false, TGroup extends GroupBase<TOption> = GroupBase<TOption>>(props: SelectProps<TOption, TIsAsync, TIsMulti, TGroup>) => ReactElement;

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

@@ -1,23 +1,33 @@
-export declare const cvaSelect: (props?: ({
+/**
+ * The container for the select component — with state styling
+ * !This is _the_ place in select styles to manage the aperance of the text and background
+ */
+export declare const cvaSelectContainer: (props?: ({
     fieldSize?: "small" | "medium" | "large" | null | undefined;
-    invalid?: boolean | null | undefined;
     disabled?: boolean | null | undefined;
-} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
-export declare const cvaSelectControl: (props?: ({
-    isDisabled?: boolean | null | undefined;
-    prefix?: boolean | null | undefined;
     invalid?: boolean | null | undefined;
+    focused?: boolean | null | undefined;
+    readOnly?: boolean | null | undefined;
+    defaultVariants?: "fieldSize" | "disabled" | "invalid" | "focused" | "readOnly" | null | undefined;
 } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
-export declare const cvaSelectIcon: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
-export declare const cvaSelectPrefixSuffix: (props?: ({
-    kind?: "prefix" | "suffix" | null | undefined;
-} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
-export declare const cvaSelectXIcon: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
-export declare const cvaSelectMenuList: (props?: ({
+export declare const cvaSelectControl: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
+export declare const cvaSelectLoadingMessage: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
+export declare const cvaSelectNoOptionsMessage: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
+export declare const cvaSelectDropdownIconContainer: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
+export declare const cvaSelectPrefixSuffix: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
+export declare const cvaSelectClearIndicator: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
+export declare const cvaSelectDropdownIndicator: (props?: ({
     menuIsOpen?: boolean | null | undefined;
 } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
-export declare const cvaSelectDynamicTagContainer: (props?: ({
-    visible?: boolean | null | undefined;
+export declare const cvaSelectValueContainer: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
+export declare const cvaSelectSingleValue: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
+export declare const cvaSelectMenu: (props?: ({
+    placement?: "bottom" | "top" | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+export declare const cvaSelectMenuList: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
+export declare const cvaSelectPlaceholder: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
+export declare const cvaSelectIndicatorsContainer: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
+export declare const cvaSelectMultiValue: (props?: ({
+    hidden?: boolean | null | undefined;
+    invisible?: boolean | null | undefined;
 } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
-export declare const cvaSelectCounter: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
-export declare const cvaSelectMenu: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;

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

@@ -1,21 +1,26 @@
+import { ReactElement } from "react";
 import { GroupBase } from "react-select";
+import { CreatableProps as ReactCreatableProps } from "react-select/creatable";
 import { SelectProps } from "./useSelect";
 export interface CreatableSelectOption<TValue extends string | number> {
     label: string;
     value: TValue;
     isDisabled?: boolean;
 }
-export type CreatableSelectProps = {
-    allowCreateWhileLoading?: boolean;
-    onCreateOption?: (inputValue: string) => void;
-};
+export type CreatableSelectExtraProps<TOption, TIsMulti extends boolean, TGroup extends GroupBase<TOption> = GroupBase<TOption>> = Pick<ReactCreatableProps<TOption, TIsMulti, TGroup>, "allowCreateWhileLoading" | "onCreateOption">;
+export interface CreatableSelectProps<TOption, TIsAsync extends boolean, TIsMulti extends boolean, TGroup extends GroupBase<TOption> = GroupBase<TOption>> extends SelectProps<TOption, TIsAsync, TIsMulti, TGroup>, CreatableSelectExtraProps<TOption, TIsMulti, TGroup> {
+}
 /**
  * CreatableSelects are input components used to choose a value from a set.
  *
- * @param {CreatableSelectProps} props - The props for the CreatableSelect component
- * @returns {ReactElement} CreatableSelect component
+/**
+ * CreatableSelect is a component that allows users to select from existing options or create new ones.
+ *
+ * @template TOption - The option type.
+ * @template TIsAsync - Indicates whether the component is asynchronous.
+ * @template TIsMulti - Indicates whether multiple selections are allowed.
+ * @template TGroup - The group base type for options.
+ * @param {CreatableSelectProps} props - The props to configure the CreatableSelect component.
+ * @returns {ReactElement} A ReactElement rendering the CreatableSelect.
  */
-export declare const CreatableSelect: {
-    <Option, IsAsync extends boolean = false, IsMulti extends boolean = false, Group extends GroupBase<Option> = GroupBase<Option>>(props: SelectProps<Option, IsAsync, IsMulti, Group> & CreatableSelectProps): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-};
+export declare const CreatableSelect: <TOption, TIsAsync extends boolean = false, TIsMulti extends boolean = false, TGroup extends GroupBase<TOption> = GroupBase<TOption>>(props: CreatableSelectProps<TOption, TIsAsync, TIsMulti, TGroup>) => ReactElement;

package/src/components/BaseSelect/custom-components/CounterTag.d.ts

@@ -0,0 +1,15 @@
+import { CommonProps } from "@trackunit/react-components";
+import { ReactElement, RefCallback } from "react";
+import { FormComponentSizes } from "../../../types";
+interface CounterTagProps extends CommonProps {
+    fieldSize: FormComponentSizes;
+    hiddenCount: number;
+    totalCount: number;
+    ref: RefCallback<HTMLDivElement>;
+}
+/**
+ * Internal component for displaying a counter badge showing hidden multi-select values.
+ * Used for measurement and display when tags overflow the container.
+ */
+export declare const CounterTag: ({ fieldSize, hiddenCount, totalCount, ref, className, "data-testid": dataTestId, }: CounterTagProps) => ReactElement | null;
+export {};

package/src/components/BaseSelect/custom-components/MultiValue.d.ts

@@ -0,0 +1,18 @@
+import { CommonProps } from "@trackunit/react-components";
+import { MouseEventHandler, ReactElement, ReactNode } from "react";
+import { FormComponentSizes } from "../../../types";
+type MultiValueProps<TOption> = {
+    data: TOption;
+    children: ReactNode;
+    onClose: MouseEventHandler<HTMLDivElement> | undefined;
+    disabled: boolean;
+    fieldSize: FormComponentSizes;
+    getOptionPrefix?: (option: TOption) => ReactNode;
+    ref: (el: HTMLDivElement | null) => void;
+} & CommonProps;
+/**
+ * Internal component for rendering multi-select values with measurement support.
+ * Uses the measurement state to determine if the value should be displayed or hidden based on available width.
+ */
+export declare const MultiValue: <TOption>({ data, children, onClose, className, disabled, fieldSize, getOptionPrefix, ref, "data-testid": dataTestId, }: MultiValueProps<TOption>) => ReactElement | null;
+export {};

package/src/components/BaseSelect/{SelectMenuItem → custom-components/SelectMenuItem}/SelectMenuItem.d.ts

@@ -1,6 +1,6 @@
 import { CommonProps } from "@trackunit/react-components";
 import { MouseEventHandler, ReactElement, ReactNode } from "react";
-import { FormComponentSizes } from "../../../types";
+import { FormComponentSizes } from "../../../../types";
 interface SelectMenuItemProps extends CommonProps {
     /**
      * A string to render as an item label.
@@ -52,12 +52,12 @@ export interface SingleSelectMenuItemProps extends SelectMenuItemProps {
  * @param {SelectMenuItemProps} props - The props for the SingleSelectMenuItem
  * @returns {ReactElement} SingleSelectMenuItem
  */
-export declare const SingleSelectMenuItem: ({ label, icon, onClick, selected, focused, "data-testid": dataTestId, disabled, optionLabelDescription, optionPrefix, fieldSize, }: SingleSelectMenuItemProps) => import("react/jsx-runtime").JSX.Element;
+export declare const SingleSelectMenuItem: ({ label, icon, onClick, selected, focused, disabled, "data-testid": dataTestId, optionLabelDescription, optionPrefix, fieldSize, }: SingleSelectMenuItemProps) => ReactElement;
 /**
  * A multi select menu item is a basic wrapper around Menu item designed to be used as a multi value render in Select list
  *
  * @param {SelectMenuItemProps} props - The props for the MultiSelectMenuItem
  * @returns {ReactElement} multi select menu item
  */
-export declare const MultiSelectMenuItem: ({ label, onClick, selected, focused, "data-testid": dataTestId, disabled, optionLabelDescription, optionPrefix, fieldSize, }: SelectMenuItemProps) => import("react/jsx-runtime").JSX.Element;
+export declare const MultiSelectMenuItem: ({ label, onClick, selected, focused, "data-testid": dataTestId, disabled, optionLabelDescription, optionPrefix, fieldSize, }: SelectMenuItemProps) => ReactElement;
 export {};

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

@@ -2,6 +2,7 @@ import ValueType from "react-select";
 export * from "./BaseSelect";
 export * from "./BaseSelect.variants";
 export * from "./CreatableSelect";
-export * from "./SelectMenuItem/SelectMenuItem";
+export * from "./useCreatableSelect";
 export * from "./useCustomComponents";
+export * from "./useSelect";
 export { ValueType };

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

@@ -0,0 +1,10 @@
+import { GroupBase } from "react-select";
+import { CreatableProps as ReactCreatableProps } from "react-select/creatable";
+import { CreatableSelectProps } from "./CreatableSelect";
+/**
+ * A hook used by creatable selects that extends useSelect with creatable-specific functionality
+ *
+ * @param props - The props for the CreatableSelect component
+ * @returns {ReactCreatableProps} Props for react-select creatable component
+ */
+export declare const useCreatableSelect: <TOption, TIsAsync extends boolean = false, TIsMulti extends boolean = false, TGroup extends GroupBase<TOption> = GroupBase<TOption>>(props: CreatableSelectProps<TOption, TIsAsync, TIsMulti, TGroup>) => ReactCreatableProps<TOption, TIsMulti, TGroup>;

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

@@ -1,32 +1,35 @@
+/**
+ * Disabling react/prop-types as this hook has a lot of guards against runtime errors.
+ * Maybe we can try to refactor this in the future?
+ */
+import { CommonProps } from "@trackunit/react-components";
 import { ReactNode } from "react";
 import { GroupBase } from "react-select";
 import { SelectComponents } from "react-select/dist/declarations/src/components";
 import { FormComponentSizes } from "../../types";
+import { LockedForReasons } from "../BaseInput/InputLockReasonTooltip";
+interface CustomComponentsProps<TOption> extends CommonProps {
+    disabled: boolean | LockedForReasons;
+    className?: string;
+    readOnly: boolean | LockedForReasons;
+    "data-testid": string;
+    prefix?: ReactNode;
+    hasError?: boolean;
+    fieldSize?: FormComponentSizes;
+    getOptionLabelDescription?: (option: TOption) => string | undefined;
+    getOptionPrefix?: (option: TOption) => ReactNode;
+    isMulti: boolean;
+    autoComplete?: "off" | "on" | "no";
+}
 /**
  * A hook to retrieve components override object.
  * This complex object includes all the compositional components that are used in react-select. If you wish to overwrite a component, pass in an object with the appropriate namespace.
  *
- * @template IsMulti
- * @template Group
- * @param {Partial<SelectComponents<Option, IsMulti, Group>> | undefined} componentsProps a custom component prop that you can to override defaults
- * @param {boolean} disabled decide to override disabled variant
- * @param {boolean} menuIsOpen menu is open state
- * @param {string} dataTestId a test id
- * @param {number} maxSelectedDisplayCount a number of max display count
- * @param {boolean} hasError decide to override hasError variant
- * @param {ReactNode} prefix a prefix element
- * @returns {Partial<SelectComponents<Option, boolean, GroupBase<Option>>> | undefined} components object to override react-select default components
+ * @template TOption
+ * @template TIsMulti
+ * @template TGroup
+ * @param {CustomComponentsProps<TOption>} props - The custom components props
+ * @returns {Partial<SelectComponents<TOption, TIsMulti, TGroup>>} components object to override react-select default components
  */
-export declare const useCustomComponents: <Option, IsMulti extends boolean = false, Group extends GroupBase<Option> = GroupBase<Option>>({ componentsProps, disabled, readOnly, setMenuIsEnabled, "data-testid": dataTestId, maxSelectedDisplayCount, prefix, hasError, fieldSize, getOptionLabelDescription, getOptionPrefix, }: {
-    componentsProps: Partial<SelectComponents<Option, IsMulti, Group>> | undefined;
-    disabled: boolean;
-    readOnly: boolean;
-    setMenuIsEnabled: (menuIsEnabled: boolean) => void;
-    "data-testid": string;
-    maxSelectedDisplayCount: number | undefined;
-    prefix?: ReactNode;
-    hasError?: boolean;
-    fieldSize?: FormComponentSizes;
-    getOptionLabelDescription?: (option: Option) => string | undefined;
-    getOptionPrefix?: (option: Option) => ReactNode;
-}) => Partial<SelectComponents<Option, IsMulti, Group>>;
+export declare const useCustomComponents: <TOption, TIsMulti extends boolean = false, TGroup extends GroupBase<TOption> = GroupBase<TOption>>({ disabled, readOnly, "data-testid": dataTestId, prefix, hasError, fieldSize, getOptionLabelDescription, getOptionPrefix, className, isMulti, autoComplete, }: CustomComponentsProps<TOption>) => Partial<SelectComponents<TOption, TIsMulti, TGroup>>;
+export {};

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

@@ -0,0 +1,27 @@
+import { Geometry } from "@trackunit/react-components";
+type UseMultiMeasureOptions = {
+    skip?: boolean;
+    onChange?: (geometries: Map<number, Geometry>) => void;
+};
+type UseMultiMeasureResult = {
+    geometries: Map<number, Geometry>;
+    getRef: (index: number) => (el: HTMLElement | null) => void;
+};
+/**
+ * Custom hook to measure the geometry of multiple elements indexed by number.
+ * Similar to useMeasure but handles multiple elements efficiently with a single ResizeObserver.
+ *
+ * @param {UseMultiMeasureOptions} options - Configuration options
+ * @returns {UseMultiMeasureResult} An object containing `geometries` Map and `getRef` function to create refs
+ * @example
+ * ```tsx
+ * const { geometries, getRef } = useMultiMeasure({
+ *   onChange: (geometries) => console.log('Geometries changed', geometries)
+ * });
+ * return items.map((item, index) => (
+ *   <div key={index} ref={getRef(index)}>Item {index}</div>
+ * ));
+ * ```
+ */
+export declare const useMultiMeasure: ({ skip, onChange }?: UseMultiMeasureOptions) => UseMultiMeasureResult;
+export {};

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

@@ -0,0 +1,21 @@
+import { RefCallback } from "react";
+type UseMultiValueOverflowResult = {
+    setValueContainerRef: RefCallback<HTMLDivElement>;
+    setCounterRef: RefCallback<HTMLDivElement>;
+    setFakeCounterRef: RefCallback<HTMLDivElement>;
+    setGeometryRef: (index: number) => (el: HTMLDivElement | null) => void;
+    setMenuRef: RefCallback<HTMLDivElement>;
+    getVisibleCount: () => number;
+    getTotalCount: () => number;
+    getCounterWidth: () => boolean;
+    getIsComplete: () => boolean;
+};
+type UseMultiValueOverflowProps = {
+    skip?: boolean;
+};
+/**
+ * Hook to manage multi-value overflow detection and rendering.
+ * Measures which values fit in the container and determines when to show a counter.
+ */
+export declare const useMultiValueOverflow: ({ skip }: UseMultiValueOverflowProps) => UseMultiValueOverflowResult;
+export {};

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

@@ -1,16 +1,15 @@
 import { CommonProps } from "@trackunit/react-components";
 import { MappedOmit } from "@trackunit/shared-utils";
 import { ReactNode } from "react";
-import { GroupBase, MenuPlacement, OptionsOrGroups, Props, StylesConfig } from "react-select";
-import { SelectComponents } from "react-select/dist/declarations/src/components";
+import { GroupBase, OptionsOrGroups, Props as ReactSelectProps } from "react-select";
 import { FormComponentSizes } from "../../types";
 import { LockedForReasons } from "../BaseInput/InputLockReasonTooltip";
-export interface AsyncSelect<Option, Group extends GroupBase<Option> = GroupBase<Option>> {
-    loadOptions: (input: string) => void | Promise<OptionsOrGroups<Option, Group>>;
-    defaultOptions?: OptionsOrGroups<Option, Group>;
+export interface AsyncSelect<TOption, TGroup extends GroupBase<TOption> = GroupBase<TOption>> {
+    loadOptions: (input: string) => void | Promise<OptionsOrGroups<TOption, TGroup>>;
+    defaultOptions?: OptionsOrGroups<TOption, TGroup>;
     cacheOptions: boolean;
 }
-export type SelectProps<Option, IsAsync extends boolean, IsMulti extends boolean, GroupType extends GroupBase<Option>> = CommonProps & MappedOmit<Props<Option, IsMulti, GroupType>, "isDisabled"> & {
+export type SelectProps<TOption, TIsAsync extends boolean = false, TIsMulti extends boolean = false, TGroup extends GroupBase<TOption> = GroupBase<TOption>> = CommonProps & MappedOmit<ReactSelectProps<TOption, TIsMulti, TGroup>, "isDisabled" | "styles" | "unstyled" | "components" | "menuIsOpen" | "classNames" | "maxMenuHeight" | "minMenuHeight" | "theme"> & {
     /**
      * An React element to render before the text in the select.
      * This is typically used to render an icon.
@@ -36,7 +35,7 @@ export type SelectProps<Option, IsAsync extends boolean, IsMulti extends boolean
      *
      * @memberof SelectProps
      */
-    readOnly?: boolean;
+    readOnly?: boolean | LockedForReasons;
     /**
      * An field id
      *
@@ -49,7 +48,7 @@ export type SelectProps<Option, IsAsync extends boolean, IsMulti extends boolean
      *
      * @memberof SelectProps
      */
-    async?: AsyncSelect<Option, GroupType>;
+    async?: TIsAsync extends true ? AsyncSelect<TOption, TGroup> : undefined;
     /**
      * A label to be used as a aria-label
      * This is typically used for accessibility
@@ -57,12 +56,6 @@ export type SelectProps<Option, IsAsync extends boolean, IsMulti extends boolean
      * @memberof SelectProps
      */
     label?: string;
-    /**
-     * A number of pixels to limit maximal length of the select menu list
-     *
-     * @memberof SelectProps
-     */
-    maxMenuHeight?: number;
     /**
      * A boolean prop to set select into invalid mode
      * typically used when selected value is not compliant with field requirement
@@ -78,18 +71,19 @@ export type SelectProps<Option, IsAsync extends boolean, IsMulti extends boolean
      */
     isLoading?: boolean;
     /**
-     * A number value to limit amount of visible tags for selected options
+     * A custom handler for menu open event
+     * use if you want to trigger custom logic or fetch data
      *
      * @memberof SelectProps
      */
-    maxSelectedDisplayCount?: number;
+    onMenuOpen?: () => void;
     /**
-     * A custom handler for menu open event
-     * use if you want to trigger custom logic or fetch data
+     * A custom handler for menu close event
+     * use if you want to trigger custom logic
      *
      * @memberof SelectProps
      */
-    onMenuOpen?: () => void;
+    onMenuClose?: () => void;
     /**
      * A flag to allow user to clear value once selected
      * default value is true
@@ -103,12 +97,6 @@ export type SelectProps<Option, IsAsync extends boolean, IsMulti extends boolean
      * @memberof SelectProps
      */
     isSearchable?: boolean;
-    /**
-     * A flag to set select into async mode
-     *
-     * @memberof SelectProps
-     */
-    isAsync?: IsAsync;
     /**
      * A handler for menu close event
      * use if you want to trigger custom logic
@@ -121,34 +109,29 @@ export type SelectProps<Option, IsAsync extends boolean, IsMulti extends boolean
      *
      * @memberof SelectProps
      */
-    getOptionLabelDescription?: (option: Option) => string | undefined;
+    getOptionLabelDescription?: (option: TOption) => string | undefined;
     /**
      * This callback returns
      *
      * @memberof SelectProps
      */
-    getOptionPrefix?: (option: Option) => ReactNode;
+    getOptionPrefix?: (option: TOption) => ReactNode;
     /**
      *  The size of the select component.
      *  Large = 40px, Medium = 32px, Small = 28px.
      *  Default is Medium.
      */
     fieldSize?: FormComponentSizes;
+    /**
+     * The autocomplete attribute value for the input element.
+     * Use "off" or "no" to disable browser autocomplete.
+     */
+    autoComplete?: "off" | "on" | "no";
 };
-interface UseSelectProps<Option, IsMulti extends boolean = false, Group extends GroupBase<Option> = GroupBase<Option>> {
-    customStyles: StylesConfig<Option, IsMulti, Group>;
-    customComponents: Partial<SelectComponents<Option, IsMulti, Group>>;
-    refContainer: React.RefObject<HTMLDivElement>;
-    menuIsOpen: boolean;
-    menuPlacement: MenuPlacement;
-    openMenuHandler: () => Promise<void>;
-    closeMenuHandler: () => void;
-}
 /**
  * A hook used by selects to share the common code
  *
  * @param {SelectProps} props - The props for the Select component
- * @returns {UseSelectProps} Select component
+ * @returns {ReactSelectProps} Props for react-select component
  */
-export declare const useSelect: <Option, IsAsync extends boolean = false, IsMulti extends boolean = false, Group extends GroupBase<Option> = GroupBase<Option>>({ id, className, "data-testid": dataTestId, prefix, async, maxMenuHeight, label, hasError, disabled, isMulti, components, value, options, onChange, isLoading, classNamePrefix, onMenuOpen, onMenuClose, maxSelectedDisplayCount, isClearable, isSearchable, onMenuScrollToBottom, styles, filterOption, onInputChange, getOptionLabelDescription, getOptionPrefix, fieldSize, ...props }: SelectProps<Option, IsAsync, IsMulti, Group>) => UseSelectProps<Option, IsMulti, Group>;
-export {};
+export declare const useSelect: <TOption, TIsAsync extends boolean = false, TIsMulti extends boolean = false, TGroup extends GroupBase<TOption> = GroupBase<TOption>>({ disabled, "data-testid": dataTestId, onMenuOpen, onMenuClose, options, value, onChange, defaultValue, ...restProps }: SelectProps<TOption, TIsAsync, TIsMulti, TGroup>) => ReactSelectProps<TOption, TIsMulti, TGroup>;

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

@@ -1,7 +1,7 @@
 import { CommonProps, Size } from "@trackunit/react-components";
 import { ReactElement, ReactNode } from "react";
 import { BaseInputProps } from "../BaseInput";
-type BaseInputExposedProps = Omit<BaseInputProps, "type" | "suffix" | "prefix" | "addonAfter" | "addonBefore" | "actions" | "placeholder" | "fieldSize" | "size" | "nonInteractive">;
+type BaseInputExposedProps = Omit<BaseInputProps, "type" | "suffix" | "prefix" | "addonAfter" | "addonBefore" | "actions" | "placeholder" | "fieldSize" | "size">;
 export interface DropZoneProps extends BaseInputExposedProps, CommonProps {
     /**
      * A JSX element or a string to set a focusable label in Drop Zone. If not provided, the default label will be used.

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

@@ -1,5 +1,5 @@
 import { CommonProps } from "@trackunit/react-components";
-import { ReactNode } from "react";
+import { ReactElement, ReactNode } from "react";
 export interface FormGroupProps extends CommonProps {
     /**
      * The label for the form group.
@@ -42,4 +42,4 @@ export interface FormGroupProps extends CommonProps {
  * @param {FormGroupProps} props - The props for the FormGroup component
  * @returns {ReactElement} FormGroup component
  */
-export declare const FormGroup: ({ isInvalid, isWarning, helpText, helpAddon, tip, className, "data-testid": dataTestId, label, htmlFor, children, required, }: FormGroupProps) => import("react/jsx-runtime").JSX.Element;
+export declare const FormGroup: ({ isInvalid, isWarning, helpText, helpAddon, tip, className, "data-testid": dataTestId, label, htmlFor, children, required, }: FormGroupProps) => ReactElement;

package/src/components/MultiSelectField/FormFieldSelectAdapterMulti.d.ts

@@ -1,36 +1,39 @@
 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, MultiValue } from "react-select";
 import { SelectProps } from "../BaseSelect/useSelect";
 import { FormGroupProps } from "../FormGroup/FormGroup";
+import { BaseOptionType } from "../SelectField/FormFieldSelectAdapter";
 /**
  * NOTE: Single and multi adapters are intentionally separate.
  * Single uses a primitive value model and a real hidden <select> with <option>s,
  * dispatching native "change" events for RHF/native forms and supporting a backup option.
- * Multi uses MultiValue<Option> and different hidden inputs semantics.
+ * Multi uses MultiValue<TOption> and different hidden inputs semantics.
  * Unifying would increase conditional logic and reduce clarity.
  */
 /**
- * Generic over `Option` to mirror BaseSelect typing.
- * Multi-value uses `MultiValue<Option>` from react-select.
+ * Generic over `TOption` to mirror BaseSelect typing.
+ * Multi-value uses `MultiValue<TOption>` from react-select.
  */
 type FormGroupExposedProps = Pick<FormGroupProps, "label" | "tip" | "helpText" | "helpAddon" | "isInvalid">;
 /** Allow all BaseSelect props except those we adapt/wrap here */
-type SelectExposedProps<Option> = MappedOmit<SelectProps<Option, false, true, GroupBase<Option>>, "label" | "hasError" | "onBlur" | "options" | "value" | "defaultValue" | "onChange" | "isMulti" | "id">;
-export type MultiSelectFieldProps<Option> = CommonProps & FormGroupExposedProps & SelectExposedProps<Option> & {
+type SelectExposedProps<TOption extends BaseOptionType = BaseOptionType, TIsAsync extends boolean = false, TGroup extends GroupBase<TOption> = GroupBase<TOption>> = MappedOmit<SelectProps<TOption, TIsAsync, true, TGroup>, "label" | "hasError" | "onBlur" | "options" | "value" | "defaultValue" | "onChange" | "isMulti" | "id">;
+export type MultiSelectFieldProps<TOption extends BaseOptionType = BaseOptionType, TIsAsync extends boolean = false, TGroup extends GroupBase<TOption> = GroupBase<TOption>> = CommonProps & FormGroupExposedProps & SelectExposedProps<TOption, TIsAsync, TGroup> & {
     /** RHF/native-friendly blur signature */
     onBlur?: (event: FocusEvent<HTMLInputElement>) => void;
     /** Options to render (same shape as BaseSelect) */
-    options: Array<Option>;
+    options: Array<TOption>;
     /** Multi-value from react-select */
-    value?: MultiValue<Option> | null;
+    value?: MultiValue<TOption> | null;
     /** Default selected options (MultiValue) */
-    defaultValue?: MultiValue<Option>;
-    /** onChange passes MultiValue<Option> (or null when cleared) */
-    onChange?: (value: MultiValue<Option> | null) => void;
+    defaultValue?: MultiValue<TOption>;
+    /** onChange passes MultiValue<TOption> (or null when cleared) */
+    onChange?: (value: MultiValue<TOption> | null) => void;
     /** Invalid state message rendered via FormGroup */
     errorMessage?: string;
+    /** The htmlFor attribute for the label. If not provided, falls back to id or generates a unique value. */
+    htmlFor?: string;
     /** External ref target (points to the hidden <select /> below) */
     ref?: Ref<HTMLSelectElement>;
     /** Name used for optional hidden inputs when `getOptionValue` is provided */
@@ -38,22 +41,22 @@ export type MultiSelectFieldProps<Option> = CommonProps & FormGroupExposedProps
     /** Field id; also propagated to BaseSelect via child props */
     id?: string;
 };
-interface FormFieldSelectAdapterMultiProps<Option> extends MultiSelectFieldProps<Option> {
+interface FormFieldSelectAdapterMultiProps<TOption extends BaseOptionType = BaseOptionType, TIsAsync extends boolean = false, TGroup extends GroupBase<TOption> = GroupBase<TOption>> extends MultiSelectFieldProps<TOption, TIsAsync, TGroup> {
     /**
      * Child render-prop receives exact BaseSelect props specialized for multi.
      */
-    children: (props: SelectProps<Option, false, true, GroupBase<Option>>) => ReactNode;
+    children: (props: SelectProps<TOption, TIsAsync, true, TGroup>) => ReactNode;
 }
 /**
  * Multi adapter:
- * - keeps Option[] semantics (via `MultiValue<Option>`)
+ * - keeps TOption[] semantics (via `MultiValue<TOption>`)
  * - renders FormGroup chrome (label, help, error)
  * - exposes a hidden <select> for a stable ref target
  * - optionally renders one hidden <input> per selected option IF `getOptionValue` is provided
  * - passes through all remaining BaseSelect props with isMulti=true
+ *
+ * @param {FormFieldSelectAdapterMultiProps} props - The props for the FormFieldSelectAdapterMulti component
+ * @returns {ReactElement} FormFieldSelectAdapterMulti component
  */
-export declare const FormFieldSelectAdapterMulti: {
-    <Option>(props: FormFieldSelectAdapterMultiProps<Option>): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-};
+export declare const FormFieldSelectAdapterMulti: <TOption extends BaseOptionType = BaseOptionType, TIsAsync extends boolean = false, TGroup extends GroupBase<TOption> = GroupBase<TOption>>(props: FormFieldSelectAdapterMultiProps<TOption, TIsAsync, TGroup>) => ReactElement;
 export {};

package/src/components/MultiSelectField/MultiSelectField.d.ts

@@ -1,10 +1,15 @@
+import { ReactElement } from "react";
+import { GroupBase } from "react-select";
+import { BaseOptionType } from "../SelectField/FormFieldSelectAdapter";
 import { MultiSelectFieldProps } from "./FormFieldSelectAdapterMulti";
 /**
- * MultiSelectField — validated multi-select field.
- * Types mirror BaseSelect: options: Option[], value/defaultValue: Option[], onChange: (Option[] | null) => void
- * Implemented as a generic const component (no forwardRef, no assertions).
+ * MultiSelectField is a custom Select component wrapped in the FormGroup component
+ * that allows you to select multiple options from a list.
+ *
+ * @param {MultiSelectFieldProps} props - The props for the MultiSelectField component
+ * @returns {ReactElement} MultiSelectField component
  */
 export declare const MultiSelectField: {
-    <Option>({ ref, ...props }: MultiSelectFieldProps<Option>): import("react/jsx-runtime").JSX.Element;
+    <TOption extends BaseOptionType = BaseOptionType, TIsAsync extends boolean = false, TGroup extends GroupBase<TOption> = GroupBase<TOption>>({ ref, ...props }: MultiSelectFieldProps<TOption, TIsAsync, TGroup>): ReactElement;
     displayName: string;
 };