@trackunit/react-form-components 1.8.63 → 1.8.65

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-form-components",
-  "version": "1.8.63",
+  "version": "1.8.65",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {
@@ -21,7 +21,7 @@
     "@trackunit/ui-icons": "1.7.44",
     "@trackunit/shared-utils": "1.9.43",
     "@trackunit/ui-design-tokens": "1.7.43",
-    "@trackunit/i18n-library-translation": "1.7.51",
+    "@trackunit/i18n-library-translation": "1.7.52",
     "string-ts": "^2.0.0",
     "@trackunit/react-test-setup": "1.4.43",
     "@js-temporal/polyfill": "^0.5.1"

package/src/components/{Select/Select.d.ts → BaseSelect/BaseSelect.d.ts}

@@ -1,3 +1,4 @@
+import { ReactElement } from "react";
 import { GroupBase } from "react-select";
 import { SelectProps } from "./useSelect";
 export interface SelectOption<TValue extends string> {
@@ -11,7 +12,7 @@ export interface SelectOption<TValue extends string> {
  * @param {SelectProps} props - The props for the Select component
  * @returns {ReactElement} Select component
  */
-export declare const Select: {
-    <Option, IsAsync extends boolean = false, IsMulti extends boolean = false, Group extends GroupBase<Option> = GroupBase<Option>>(props: SelectProps<Option, IsAsync, IsMulti, Group>): import("react/jsx-runtime").JSX.Element;
+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;
 };

package/src/components/{Select → BaseSelect}/index.d.ts

@@ -1,7 +1,7 @@
 import ValueType from "react-select";
+export * from "./BaseSelect";
+export * from "./BaseSelect.variants";
 export * from "./CreatableSelect";
-export * from "./Select";
-export * from "./Select.variants";
 export * from "./SelectMenuItem/SelectMenuItem";
 export * from "./useCustomComponents";
 export { ValueType };

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

@@ -0,0 +1,59 @@
+import { CommonProps } from "@trackunit/react-components";
+import { MappedOmit } from "@trackunit/shared-utils";
+import { FocusEvent, ReactNode, Ref } from "react";
+import { GroupBase, MultiValue } from "react-select";
+import { SelectProps } from "../BaseSelect/useSelect";
+import { FormGroupProps } from "../FormGroup/FormGroup";
+/**
+ * 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.
+ * Unifying would increase conditional logic and reduce clarity.
+ */
+/**
+ * Generic over `Option` to mirror BaseSelect typing.
+ * Multi-value uses `MultiValue<Option>` 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> & {
+    /** RHF/native-friendly blur signature */
+    onBlur?: (event: FocusEvent<HTMLInputElement>) => void;
+    /** Options to render (same shape as BaseSelect) */
+    options: Array<Option>;
+    /** Multi-value from react-select */
+    value?: MultiValue<Option> | null;
+    /** Default selected options (MultiValue) */
+    defaultValue?: MultiValue<Option>;
+    /** onChange passes MultiValue<Option> (or null when cleared) */
+    onChange?: (value: MultiValue<Option> | null) => void;
+    /** Invalid state message rendered via FormGroup */
+    errorMessage?: string;
+    /** External ref target (points to the hidden <select /> below) */
+    ref?: Ref<HTMLSelectElement>;
+    /** Name used for optional hidden inputs when `getOptionValue` is provided */
+    name?: string;
+    /** Field id; also propagated to BaseSelect via child props */
+    id?: string;
+};
+interface FormFieldSelectAdapterMultiProps<Option> extends MultiSelectFieldProps<Option> {
+    /**
+     * Child render-prop receives exact BaseSelect props specialized for multi.
+     */
+    children: (props: SelectProps<Option, false, true, GroupBase<Option>>) => ReactNode;
+}
+/**
+ * Multi adapter:
+ * - keeps Option[] semantics (via `MultiValue<Option>`)
+ * - 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
+ */
+export declare const FormFieldSelectAdapterMulti: {
+    <Option>(props: FormFieldSelectAdapterMultiProps<Option>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export {};

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

@@ -0,0 +1,10 @@
+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).
+ */
+export declare const MultiSelectField: {
+    <Option>({ ref, ...props }: MultiSelectFieldProps<Option>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

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

@@ -0,0 +1 @@
+export * from "./MultiSelectField";

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

@@ -1,4 +1,4 @@
-import { CreatableSelectProps } from "../Select/CreatableSelect";
+import { CreatableSelectProps } from "../BaseSelect/CreatableSelect";
 import { BaseOptionType, SelectFieldProps } from "./FormFieldSelectAdapter";
 interface CreatableSelectFieldProps extends SelectFieldProps<BaseOptionType>, CreatableSelectProps {
 }

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

@@ -2,8 +2,8 @@ import { CommonProps } from "@trackunit/react-components";
 import { MappedOmit } from "@trackunit/shared-utils";
 import { FocusEvent, ReactNode, Ref } from "react";
 import { GroupBase } from "react-select";
+import { SelectProps } from "../BaseSelect/useSelect";
 import { FormGroupProps } from "../FormGroup/FormGroup";
-import { SelectProps } from "../Select/useSelect";
 export type BaseOptionType = {
     label: string;
     value: string | number;

package/src/index.d.ts

@@ -5,6 +5,7 @@ export * from "./components/TextAreaField/TextArea/TextAreaBaseInput";
 export * from "./components/TextField/TextBaseInput/TextBaseInput";
 export * from "./components/ActionButton";
 export * from "./components/BaseInput";
+export * from "./components/BaseSelect";
 export * from "./components/Checkbox";
 export * from "./components/CheckboxField/CheckboxField";
 export * from "./components/ColorField/ColorField";
@@ -14,6 +15,7 @@ export * from "./components/DropZone/DropZoneDefaultLabel";
 export * from "./components/EmailField/EmailField";
 export * from "./components/FormGroup/FormGroup";
 export * from "./components/Label";
+export * from "./components/MultiSelectField";
 export * from "./components/NumberField/NumberField";
 export * from "./components/OptionCard/OptionCard";
 export * from "./components/PasswordField/PasswordBaseInput/PasswordBaseInput";
@@ -26,7 +28,6 @@ export * from "./components/RadioGroup";
 export * from "./components/Schedule/Schedule";
 export * from "./components/Schedule/ScheduleParser";
 export * from "./components/Search";
-export * from "./components/Select";
 export * from "./components/SelectField/CreatableSelectField";
 export * from "./components/SelectField/FormFieldSelectAdapter";
 export * from "./components/SelectField/SelectField";