@trackunit/react-form-components 0.0.309 → 0.0.311

package/index.cjs.js

@@ -15,6 +15,7 @@ var ReactSelect = require('react-select');
 var ReactAsyncCreatableSelect = require('react-select/async-creatable');
 var ReactCreatableSelect = require('react-select/creatable');
 var ReactAsyncSelect = require('react-select/async');
+var sharedUtils = require('@trackunit/shared-utils');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -1266,7 +1267,7 @@ const useSelect = (_a) => {
  */
 const CreatableSelect = (props) => {
     const { className } = props, propsNoClassName = __rest(props, ["className"]);
-    const { id, dataTestId = "creatableSelect", prefix, async, maxMenuHeight = 200, label, hasError, disabled, isMulti, value, options, onChange, isLoading, classNamePrefix = dataTestId !== null && dataTestId !== void 0 ? dataTestId : "creatableSelect", onMenuScrollToBottom, filterOption, onInputChange, isSearchable, isClearable = false, readOnly, allowCreateWhileLoading, onCreateOption, } = propsNoClassName;
+    const { id, dataTestId = "creatableSelect", prefix, async, maxMenuHeight = 200, label, hasError, disabled, isMulti, value, options, onChange, isLoading, classNamePrefix = dataTestId !== null && dataTestId !== void 0 ? dataTestId : "creatableSelect", onMenuScrollToBottom, filterOption, onInputChange, isSearchable, isClearable = false, readOnly, openMenuOnClick = !disabled, openMenuOnFocus = !disabled, allowCreateWhileLoading, onCreateOption, } = propsNoClassName;
     const { refContainer, refPrefix, customStyles, menuIsOpen, customComponents, menuPlacement, openMenuHandler, closeMenuHandler, orderedOptions, } = useSelect(props);
     const creatableSelectProps = {
         value,
@@ -1283,9 +1284,9 @@ const CreatableSelect = (props) => {
         isSearchable: disabled || readOnly ? false : isSearchable,
         menuShouldBlockScroll: true,
         menuShouldScrollIntoView: true,
-        openMenuOnFocus: true,
+        openMenuOnFocus,
         menuIsOpen: !readOnly ? menuIsOpen : false,
-        openMenuOnClick: true,
+        openMenuOnClick,
         closeMenuOnSelect: false,
         isMulti,
         classNamePrefix,
@@ -1982,8 +1983,12 @@ const FormFieldSelectAdapter = React.forwardRef((_a, ref) => {
         (_a = innerRef.current) === null || _a === void 0 ? void 0 : _a.dispatchEvent(event);
         onChange === null || onChange === void 0 ? void 0 : onChange(event);
     }, [onChange, innerValue]);
-    const selectedOption = options.find(option => { var _a; return option.value === ((_a = innerRef === null || innerRef === void 0 ? void 0 : innerRef.current) === null || _a === void 0 ? void 0 : _a.value); });
-    const defaultSelectedOption = options.find(option => option.value === defaultValue);
+    const optionsWithCurrentSelectionToEnsureThatItWorks = [
+        innerValue ? { value: innerValue, label: String(innerValue) } : null,
+        ...options,
+    ].filter(sharedUtils.nonNullable);
+    const selectedOption = optionsWithCurrentSelectionToEnsureThatItWorks.find(option => { var _a; return option.value === ((_a = innerRef === null || innerRef === void 0 ? void 0 : innerRef.current) === null || _a === void 0 ? void 0 : _a.value); });
+    const defaultSelectedOption = optionsWithCurrentSelectionToEnsureThatItWorks.find(option => option.value === innerValue);
     return (jsxRuntime.jsxs(FormGroup, { isInvalid: renderAsInvalid,
         htmlFor,
         className,
@@ -1992,10 +1997,10 @@ const FormFieldSelectAdapter = React.forwardRef((_a, ref) => {
         helpAddon,
         tip,
         label,
-        disabled, children: [jsxRuntime.jsx("select", { onChange, ref: innerRef, name, value: innerValue, hidden: true, children: options.map(option => {
-                    return (jsxRuntime.jsx("option", { value: option.value, children: option.label }, option.value));
-                }) }), children(Object.assign({ id, isDisabled: disabled, onBlur,
-                options, onChange: handleChange, value: selectedOption, defaultValue: defaultSelectedOption }, rest))] }));
+        disabled, children: [jsxRuntime.jsxs("select", { onChange, ref: innerRef, name, value: innerValue, hidden: true, children: [jsxRuntime.jsx("option", { value: innerValue, children: innerValue }), options.map(option => {
+                        return (jsxRuntime.jsx("option", { value: option.value, children: option.label }, option.value));
+                    })] }), children(Object.assign(Object.assign({}, rest), { id, isDisabled: disabled, onBlur,
+                options, onChange: handleChange, value: selectedOption, defaultValue: defaultSelectedOption }))] }));
 });
 
 /**
@@ -2008,11 +2013,11 @@ const FormFieldSelectAdapter = React.forwardRef((_a, ref) => {
  * @param {SelectFieldProps & CreatableSelectProps} props - The props for the CreatableSelectField component
  * @returns {JSX.Element} CreatableSelectField component
  */
-const CreatableSelectField = (_a) => {
+const CreatableSelectField = React.forwardRef((_a, ref) => {
     var { allowCreateWhileLoading, onCreateOption } = _a, props = __rest(_a, ["allowCreateWhileLoading", "onCreateOption"]);
     const creatableSelectOnlyProps = { allowCreateWhileLoading, onCreateOption };
-    return (jsxRuntime.jsx(FormFieldSelectAdapter, Object.assign({}, props, { children: convertedProps => jsxRuntime.jsx(CreatableSelect, Object.assign({}, convertedProps, creatableSelectOnlyProps)) })));
-};
+    return (jsxRuntime.jsx(FormFieldSelectAdapter, Object.assign({}, props, { ref: ref, children: convertedProps => jsxRuntime.jsx(CreatableSelect, Object.assign({}, convertedProps, creatableSelectOnlyProps)) })));
+});
 
 /**
  * The SelectField component is a Select component wrapped in the FromGroup component.
@@ -2024,9 +2029,10 @@ const CreatableSelectField = (_a) => {
  * @param {SelectFieldProps} props - The props for the SelectField component
  * @returns {JSX.Element} SelectField component
  */
-const SelectField = (props) => {
-    return jsxRuntime.jsx(FormFieldSelectAdapter, Object.assign({}, props, { children: convertedProps => jsxRuntime.jsx(Select, Object.assign({}, convertedProps)) }));
-};
+const SelectField = React.forwardRef((_a, ref) => {
+    var props = __rest(_a, []);
+    return (jsxRuntime.jsx(FormFieldSelectAdapter, Object.assign({}, props, { ref: ref, children: convertedProps => jsxRuntime.jsx(Select, Object.assign({}, convertedProps)) })));
+});
 
 const cvaTextArea = cssClassVarianceUtilities.cvaMerge([
     cvaInputBase(),
@@ -2314,6 +2320,7 @@ exports.DropZone = DropZone;
 exports.EMAIL_REGEX = EMAIL_REGEX;
 exports.EmailField = EmailField;
 exports.EmailInput = EmailInput;
+exports.FormFieldSelectAdapter = FormFieldSelectAdapter;
 exports.FormGroup = FormGroup;
 exports.Label = Label;
 exports.MultiSelectMenuItem = MultiSelectMenuItem;

package/index.esm.js

@@ -13,6 +13,7 @@ export { default as ValueType } from 'react-select';
 import ReactAsyncCreatableSelect from 'react-select/async-creatable';
 import ReactCreatableSelect from 'react-select/creatable';
 import ReactAsyncSelect from 'react-select/async';
+import { nonNullable } from '@trackunit/shared-utils';
 
 var defaultTranslations = {
 	"clearIndicator.icon.tooltip.clearAll": "Clear all",
@@ -1236,7 +1237,7 @@ const useSelect = (_a) => {
  */
 const CreatableSelect = (props) => {
     const { className } = props, propsNoClassName = __rest(props, ["className"]);
-    const { id, dataTestId = "creatableSelect", prefix, async, maxMenuHeight = 200, label, hasError, disabled, isMulti, value, options, onChange, isLoading, classNamePrefix = dataTestId !== null && dataTestId !== void 0 ? dataTestId : "creatableSelect", onMenuScrollToBottom, filterOption, onInputChange, isSearchable, isClearable = false, readOnly, allowCreateWhileLoading, onCreateOption, } = propsNoClassName;
+    const { id, dataTestId = "creatableSelect", prefix, async, maxMenuHeight = 200, label, hasError, disabled, isMulti, value, options, onChange, isLoading, classNamePrefix = dataTestId !== null && dataTestId !== void 0 ? dataTestId : "creatableSelect", onMenuScrollToBottom, filterOption, onInputChange, isSearchable, isClearable = false, readOnly, openMenuOnClick = !disabled, openMenuOnFocus = !disabled, allowCreateWhileLoading, onCreateOption, } = propsNoClassName;
     const { refContainer, refPrefix, customStyles, menuIsOpen, customComponents, menuPlacement, openMenuHandler, closeMenuHandler, orderedOptions, } = useSelect(props);
     const creatableSelectProps = {
         value,
@@ -1253,9 +1254,9 @@ const CreatableSelect = (props) => {
         isSearchable: disabled || readOnly ? false : isSearchable,
         menuShouldBlockScroll: true,
         menuShouldScrollIntoView: true,
-        openMenuOnFocus: true,
+        openMenuOnFocus,
         menuIsOpen: !readOnly ? menuIsOpen : false,
-        openMenuOnClick: true,
+        openMenuOnClick,
         closeMenuOnSelect: false,
         isMulti,
         classNamePrefix,
@@ -1952,8 +1953,12 @@ const FormFieldSelectAdapter = forwardRef((_a, ref) => {
         (_a = innerRef.current) === null || _a === void 0 ? void 0 : _a.dispatchEvent(event);
         onChange === null || onChange === void 0 ? void 0 : onChange(event);
     }, [onChange, innerValue]);
-    const selectedOption = options.find(option => { var _a; return option.value === ((_a = innerRef === null || innerRef === void 0 ? void 0 : innerRef.current) === null || _a === void 0 ? void 0 : _a.value); });
-    const defaultSelectedOption = options.find(option => option.value === defaultValue);
+    const optionsWithCurrentSelectionToEnsureThatItWorks = [
+        innerValue ? { value: innerValue, label: String(innerValue) } : null,
+        ...options,
+    ].filter(nonNullable);
+    const selectedOption = optionsWithCurrentSelectionToEnsureThatItWorks.find(option => { var _a; return option.value === ((_a = innerRef === null || innerRef === void 0 ? void 0 : innerRef.current) === null || _a === void 0 ? void 0 : _a.value); });
+    const defaultSelectedOption = optionsWithCurrentSelectionToEnsureThatItWorks.find(option => option.value === innerValue);
     return (jsxs(FormGroup, { isInvalid: renderAsInvalid,
         htmlFor,
         className,
@@ -1962,10 +1967,10 @@ const FormFieldSelectAdapter = forwardRef((_a, ref) => {
         helpAddon,
         tip,
         label,
-        disabled, children: [jsx("select", { onChange, ref: innerRef, name, value: innerValue, hidden: true, children: options.map(option => {
-                    return (jsx("option", { value: option.value, children: option.label }, option.value));
-                }) }), children(Object.assign({ id, isDisabled: disabled, onBlur,
-                options, onChange: handleChange, value: selectedOption, defaultValue: defaultSelectedOption }, rest))] }));
+        disabled, children: [jsxs("select", { onChange, ref: innerRef, name, value: innerValue, hidden: true, children: [jsx("option", { value: innerValue, children: innerValue }), options.map(option => {
+                        return (jsx("option", { value: option.value, children: option.label }, option.value));
+                    })] }), children(Object.assign(Object.assign({}, rest), { id, isDisabled: disabled, onBlur,
+                options, onChange: handleChange, value: selectedOption, defaultValue: defaultSelectedOption }))] }));
 });
 
 /**
@@ -1978,11 +1983,11 @@ const FormFieldSelectAdapter = forwardRef((_a, ref) => {
  * @param {SelectFieldProps & CreatableSelectProps} props - The props for the CreatableSelectField component
  * @returns {JSX.Element} CreatableSelectField component
  */
-const CreatableSelectField = (_a) => {
+const CreatableSelectField = forwardRef((_a, ref) => {
     var { allowCreateWhileLoading, onCreateOption } = _a, props = __rest(_a, ["allowCreateWhileLoading", "onCreateOption"]);
     const creatableSelectOnlyProps = { allowCreateWhileLoading, onCreateOption };
-    return (jsx(FormFieldSelectAdapter, Object.assign({}, props, { children: convertedProps => jsx(CreatableSelect, Object.assign({}, convertedProps, creatableSelectOnlyProps)) })));
-};
+    return (jsx(FormFieldSelectAdapter, Object.assign({}, props, { ref: ref, children: convertedProps => jsx(CreatableSelect, Object.assign({}, convertedProps, creatableSelectOnlyProps)) })));
+});
 
 /**
  * The SelectField component is a Select component wrapped in the FromGroup component.
@@ -1994,9 +1999,10 @@ const CreatableSelectField = (_a) => {
  * @param {SelectFieldProps} props - The props for the SelectField component
  * @returns {JSX.Element} SelectField component
  */
-const SelectField = (props) => {
-    return jsx(FormFieldSelectAdapter, Object.assign({}, props, { children: convertedProps => jsx(Select, Object.assign({}, convertedProps)) }));
-};
+const SelectField = forwardRef((_a, ref) => {
+    var props = __rest(_a, []);
+    return (jsx(FormFieldSelectAdapter, Object.assign({}, props, { ref: ref, children: convertedProps => jsx(Select, Object.assign({}, convertedProps)) })));
+});
 
 const cvaTextArea = cvaMerge([
     cvaInputBase(),
@@ -2269,4 +2275,4 @@ const UrlField = forwardRef((_a, ref) => {
  */
 setupLibraryTranslations();
 
-export { ActionButton, BaseInput, Checkbox, CreatableSelect, CreatableSelectField, DateField, DateInput, DropZone, EMAIL_REGEX, EmailField, EmailInput, FormGroup, Label, MultiSelectMenuItem, NumberField, NumberInput, OptionCard, PasswordField, PasswordInput, PhoneField, PhoneInput, RadioGroup, RadioItem, Schedule, ScheduleVariant, Search, Select, SelectField, SingleSelectMenuItem, TextArea, TextAreaField, TextField, TextInput, TimeRange, TimeRangeField, Toggle, UploadField, UploadInput, UrlField, UrlInput, checkIfPhoneNumberHasPlus, countryCodeToFlagEmoji, cvaInput, cvaInputAddon, cvaInputAddonAfter, cvaInputAddonBefore, cvaInputBase, cvaInputBaseDisabled, cvaInputBaseInvalid, cvaInputField, cvaInputPrefix, cvaInputSuffix, cvaSelect, cvaSelectCounter, cvaSelectDynamicTagContainer, cvaSelectIcon, cvaSelectMenu, cvaSelectMenuList, cvaSelectPrefix, cvaSelectXIcon, getCountryAbbreviation, getOrderedOptions, getPhoneNumberWithPlus, isInvalidCountryCode, isInvalidPhoneNumber, isMultiValue, parseSchedule, serializeSchedule, useCustomComponents, usePhoneInput, validateEmailAddress, validatePhoneNumber, weekDay };
+export { ActionButton, BaseInput, Checkbox, CreatableSelect, CreatableSelectField, DateField, DateInput, DropZone, EMAIL_REGEX, EmailField, EmailInput, FormFieldSelectAdapter, FormGroup, Label, MultiSelectMenuItem, NumberField, NumberInput, OptionCard, PasswordField, PasswordInput, PhoneField, PhoneInput, RadioGroup, RadioItem, Schedule, ScheduleVariant, Search, Select, SelectField, SingleSelectMenuItem, TextArea, TextAreaField, TextField, TextInput, TimeRange, TimeRangeField, Toggle, UploadField, UploadInput, UrlField, UrlInput, checkIfPhoneNumberHasPlus, countryCodeToFlagEmoji, cvaInput, cvaInputAddon, cvaInputAddonAfter, cvaInputAddonBefore, cvaInputBase, cvaInputBaseDisabled, cvaInputBaseInvalid, cvaInputField, cvaInputPrefix, cvaInputSuffix, cvaSelect, cvaSelectCounter, cvaSelectDynamicTagContainer, cvaSelectIcon, cvaSelectMenu, cvaSelectMenuList, cvaSelectPrefix, cvaSelectXIcon, getCountryAbbreviation, getOrderedOptions, getPhoneNumberWithPlus, isInvalidCountryCode, isInvalidPhoneNumber, isMultiValue, parseSchedule, serializeSchedule, useCustomComponents, usePhoneInput, validateEmailAddress, validatePhoneNumber, weekDay };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-form-components",
-  "version": "0.0.309",
+  "version": "0.0.311",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {

package/src/components/Select/Select.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 import { GroupBase } from "react-select";
 import { SelectProps } from "./useSelect";
-export interface SelectOption<TValue extends string | number> {
+export interface SelectOption<TValue extends string> {
     label: string;
     value: TValue;
     disabled?: boolean;

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

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { CreatableSelectProps } from "../Select/CreatableSelect";
-import { BaseOptionType, SelectFieldProps } from "./FormFieldSelectAdapter";
+import { BaseOptionType } from "./FormFieldSelectAdapter";
 /**
  * The CreatableSelectField component is a CreatableSelect component wrapped in the FromGroup component.
  *
@@ -11,4 +11,21 @@ import { BaseOptionType, SelectFieldProps } from "./FormFieldSelectAdapter";
  * @param {SelectFieldProps & CreatableSelectProps} props - The props for the CreatableSelectField component
  * @returns {JSX.Element} CreatableSelectField component
  */
-export declare const CreatableSelectField: ({ allowCreateWhileLoading, onCreateOption, ...props }: SelectFieldProps<BaseOptionType> & CreatableSelectProps) => JSX.Element;
+export declare const CreatableSelectField: import("react").ForwardRefExoticComponent<import("dist/libs/react/components/src").CommonProps & {
+    label: import("react").ReactNode;
+    tip?: import("react").ReactNode;
+    helpText?: string | null | undefined;
+    helpAddon?: import("react").ReactNode;
+    isInvalid?: boolean | undefined;
+} & import("dist/libs/shared/utils/src").MappedOmit<import("../Select/useSelect").SelectProps<BaseOptionType, false, false, import("react-select").GroupBase<BaseOptionType>>, "label" | "onBlur" | "onChange" | "options" | "value" | "defaultValue"> & {
+    onBlur?: ((event: import("react").FocusEvent<HTMLInputElement, Element>) => void) | undefined;
+    options: BaseOptionType[];
+    value?: string | number | undefined;
+    defaultValue?: string | number | undefined;
+    onChange?: ((event: {
+        target: {
+            value?: string | number | undefined;
+        };
+    }) => void) | undefined;
+    errorMessage?: string | undefined;
+} & CreatableSelectProps & import("react").RefAttributes<HTMLSelectElement>>;

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

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { BaseOptionType, SelectFieldProps } from "./FormFieldSelectAdapter";
+import { BaseOptionType } from "./FormFieldSelectAdapter";
 /**
  * The SelectField component is a Select component wrapped in the FromGroup component.
  *
@@ -10,4 +10,21 @@ import { BaseOptionType, SelectFieldProps } from "./FormFieldSelectAdapter";
  * @param {SelectFieldProps} props - The props for the SelectField component
  * @returns {JSX.Element} SelectField component
  */
-export declare const SelectField: (props: SelectFieldProps<BaseOptionType>) => JSX.Element;
+export declare const SelectField: import("react").ForwardRefExoticComponent<import("dist/libs/react/components/src").CommonProps & {
+    label: import("react").ReactNode;
+    tip?: import("react").ReactNode;
+    helpText?: string | null | undefined;
+    helpAddon?: import("react").ReactNode;
+    isInvalid?: boolean | undefined;
+} & import("dist/libs/shared/utils/src").MappedOmit<import("../Select/useSelect").SelectProps<BaseOptionType, false, false, import("react-select").GroupBase<BaseOptionType>>, "label" | "onBlur" | "onChange" | "options" | "value" | "defaultValue"> & {
+    onBlur?: ((event: import("react").FocusEvent<HTMLInputElement, Element>) => void) | undefined;
+    options: BaseOptionType[];
+    value?: string | number | undefined;
+    defaultValue?: string | number | undefined;
+    onChange?: ((event: {
+        target: {
+            value?: string | number | undefined;
+        };
+    }) => void) | undefined;
+    errorMessage?: string | undefined;
+} & import("react").RefAttributes<HTMLSelectElement>>;

package/src/index.d.ts

@@ -23,6 +23,7 @@ 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";
 export * from "./components/TextArea";
 export * from "./components/TextAreaField";