@trackunit/react-form-components 0.0.447 → 0.0.450

package/index.cjs.js

@@ -579,8 +579,7 @@ const cvaHelpAddon = cssClassVarianceUtilities.cvaMerge(["ml-auto"]);
  * @returns {JSX.Element} FormGroup component
  */
 const FormGroup = ({ isInvalid, helpText, helpAddon, tip, className, dataTestId, label, htmlFor, children, tipIconProps, disabled = false, required = false, }) => {
-    return (jsxRuntime.jsxs("div", { className: cvaFormGroup({ disabled, className }), "data-testid": dataTestId, children: [jsxRuntime.jsxs("div", { className: cvaFormGroupContainerBefore(), children: [label ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Label, { className: "component-formGroup-font", dataTestId: dataTestId && `${dataTestId}-label`, htmlFor: htmlFor, id: htmlFor + "-label", children: label }), jsxRuntime.jsx("span", { className: "required-asterisk", children: "*" })] })) :
-                        null, tip ? (jsxRuntime.jsx(reactComponents.Tooltip, { className: "ml-1", dataTestId: dataTestId && `${dataTestId}-tooltip`, iconProps: tipIconProps, label: tip, placement: "bottom" })) : null] }), children, jsxRuntime.jsxs("div", { className: cvaFormGroupContainerAfter({ invalid: isInvalid }), children: [helpText && jsxRuntime.jsx("span", { "data-testid": dataTestId && `${dataTestId}-helpText`, children: helpText }), helpAddon && (jsxRuntime.jsx("span", { className: cvaHelpAddon(), "data-testid": dataTestId && `${dataTestId}-helpAddon`, children: helpAddon }))] })] }));
+    return (jsxRuntime.jsxs("div", { className: cvaFormGroup({ disabled, className }), "data-testid": dataTestId, children: [jsxRuntime.jsxs("div", { className: cvaFormGroupContainerBefore(), children: [label ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Label, { className: "component-formGroup-font", dataTestId: dataTestId && `${dataTestId}-label`, htmlFor: htmlFor, id: htmlFor + "-label", children: label }), required && jsxRuntime.jsx("span", { className: "required-asterisk", children: "*" })] })) : null, tip ? (jsxRuntime.jsx(reactComponents.Tooltip, { className: "ml-1", dataTestId: dataTestId && `${dataTestId}-tooltip`, iconProps: tipIconProps, label: tip, placement: "bottom" })) : null] }), children, jsxRuntime.jsxs("div", { className: cvaFormGroupContainerAfter({ invalid: isInvalid }), children: [helpText && jsxRuntime.jsx("span", { "data-testid": dataTestId && `${dataTestId}-helpText`, children: helpText }), helpAddon && (jsxRuntime.jsx("span", { className: cvaHelpAddon(), "data-testid": dataTestId && `${dataTestId}-helpAddon`, children: helpAddon }))] })] }));
 };
 
 /**
@@ -1922,6 +1921,7 @@ Select.displayName = "Select";
 
 const FormFieldSelectAdapter = React.forwardRef((_a, ref) => {
     var { className, dataTestId, helpText, helpAddon, tip, label, disabled, isInvalid, errorMessage, name, onBlur, options, value, defaultValue, id, onChange, children } = _a, rest = __rest(_a, ["className", "dataTestId", "helpText", "helpAddon", "tip", "label", "disabled", "isInvalid", "errorMessage", "name", "onBlur", "options", "value", "defaultValue", "id", "onChange", "children"]);
+    const isFirstRender = reactComponents.useIsFirstRender();
     const [innerValue, setInnerValue] = React.useState(value || defaultValue);
     React.useEffect(() => {
         setInnerValue(defaultValue);
@@ -1930,18 +1930,18 @@ const FormFieldSelectAdapter = React.forwardRef((_a, ref) => {
     const htmlFor = React.useMemo(() => (id ? id : "selectField-" + uuid.v4()), [id]);
     const innerRef = React.useRef(null);
     React.useImperativeHandle(ref, () => innerRef.current, []);
-    const handleChange = React.useCallback((newValue) => {
-        setInnerValue(newValue === null || newValue === void 0 ? void 0 : newValue.value);
-    }, []);
     React.useEffect(() => {
         var _a;
-        if (!innerValue) {
+        if (innerValue === undefined) {
             return;
         }
         const event = new Event("change");
+        if (innerValue === "" && innerRef.current) {
+            innerRef.current.value = ""; // Set the desired option value
+        }
         (_a = innerRef.current) === null || _a === void 0 ? void 0 : _a.dispatchEvent(event);
         onChange === null || onChange === void 0 ? void 0 : onChange(event);
-    }, [onChange, innerValue]);
+    }, [onChange, innerValue, isFirstRender]);
     const optionsWithCurrentSelectionBackupOption = [
         // Add the current selection in case there's no options loaded yet (in CreatableSelect)
         // Also _don't_ add it if it's a duplicate
@@ -1961,7 +1961,12 @@ const FormFieldSelectAdapter = React.forwardRef((_a, ref) => {
         label,
         disabled, children: [jsxRuntime.jsx("select", { onChange, ref: innerRef, name, value: innerValue, hidden: true, children: optionsWithCurrentSelectionBackupOption.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: optionsWithCurrentSelectionBackupOption, onChange: handleChange, value: selectedOption, defaultValue: selectedOption }))] }));
+                }) }), children(Object.assign(Object.assign({}, rest), { id, isDisabled: disabled, onBlur, options: optionsWithCurrentSelectionBackupOption, onChange: e => {
+                    // If theres no value, set the inner value to an empty string
+                    // A native select can not have a null value
+                    // So even if react-select sends a null value, we need to convert it to an empty string
+                    setInnerValue(!e ? "" : e.value);
+                }, value: selectedOption, defaultValue: selectedOption }))] }));
 });
 
 /**

package/index.esm.js

@@ -1,6 +1,6 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { registerTranslations, useNamespaceTranslation, NamespaceTrans } from '@trackunit/i18n-library-translation';
-import { IconButton, Icon, Tooltip, Heading, Text, MenuItem, Tag, Spinner } from '@trackunit/react-components';
+import { IconButton, Icon, Tooltip, Heading, Text, MenuItem, Tag, Spinner, useIsFirstRender } from '@trackunit/react-components';
 import { useCopyToClipboard } from 'react-use';
 import { cvaMerge } from '@trackunit/css-class-variance-utilities';
 import * as React from 'react';
@@ -549,8 +549,7 @@ const cvaHelpAddon = cvaMerge(["ml-auto"]);
  * @returns {JSX.Element} FormGroup component
  */
 const FormGroup = ({ isInvalid, helpText, helpAddon, tip, className, dataTestId, label, htmlFor, children, tipIconProps, disabled = false, required = false, }) => {
-    return (jsxs("div", { className: cvaFormGroup({ disabled, className }), "data-testid": dataTestId, children: [jsxs("div", { className: cvaFormGroupContainerBefore(), children: [label ? (jsxs(Fragment, { children: [jsx(Label, { className: "component-formGroup-font", dataTestId: dataTestId && `${dataTestId}-label`, htmlFor: htmlFor, id: htmlFor + "-label", children: label }), jsx("span", { className: "required-asterisk", children: "*" })] })) :
-                        null, tip ? (jsx(Tooltip, { className: "ml-1", dataTestId: dataTestId && `${dataTestId}-tooltip`, iconProps: tipIconProps, label: tip, placement: "bottom" })) : null] }), children, jsxs("div", { className: cvaFormGroupContainerAfter({ invalid: isInvalid }), children: [helpText && jsx("span", { "data-testid": dataTestId && `${dataTestId}-helpText`, children: helpText }), helpAddon && (jsx("span", { className: cvaHelpAddon(), "data-testid": dataTestId && `${dataTestId}-helpAddon`, children: helpAddon }))] })] }));
+    return (jsxs("div", { className: cvaFormGroup({ disabled, className }), "data-testid": dataTestId, children: [jsxs("div", { className: cvaFormGroupContainerBefore(), children: [label ? (jsxs(Fragment, { children: [jsx(Label, { className: "component-formGroup-font", dataTestId: dataTestId && `${dataTestId}-label`, htmlFor: htmlFor, id: htmlFor + "-label", children: label }), required && jsx("span", { className: "required-asterisk", children: "*" })] })) : null, tip ? (jsx(Tooltip, { className: "ml-1", dataTestId: dataTestId && `${dataTestId}-tooltip`, iconProps: tipIconProps, label: tip, placement: "bottom" })) : null] }), children, jsxs("div", { className: cvaFormGroupContainerAfter({ invalid: isInvalid }), children: [helpText && jsx("span", { "data-testid": dataTestId && `${dataTestId}-helpText`, children: helpText }), helpAddon && (jsx("span", { className: cvaHelpAddon(), "data-testid": dataTestId && `${dataTestId}-helpAddon`, children: helpAddon }))] })] }));
 };
 
 /**
@@ -1892,6 +1891,7 @@ Select.displayName = "Select";
 
 const FormFieldSelectAdapter = forwardRef((_a, ref) => {
     var { className, dataTestId, helpText, helpAddon, tip, label, disabled, isInvalid, errorMessage, name, onBlur, options, value, defaultValue, id, onChange, children } = _a, rest = __rest(_a, ["className", "dataTestId", "helpText", "helpAddon", "tip", "label", "disabled", "isInvalid", "errorMessage", "name", "onBlur", "options", "value", "defaultValue", "id", "onChange", "children"]);
+    const isFirstRender = useIsFirstRender();
     const [innerValue, setInnerValue] = useState(value || defaultValue);
     useEffect(() => {
         setInnerValue(defaultValue);
@@ -1900,18 +1900,18 @@ const FormFieldSelectAdapter = forwardRef((_a, ref) => {
     const htmlFor = useMemo(() => (id ? id : "selectField-" + v4()), [id]);
     const innerRef = useRef(null);
     useImperativeHandle(ref, () => innerRef.current, []);
-    const handleChange = useCallback((newValue) => {
-        setInnerValue(newValue === null || newValue === void 0 ? void 0 : newValue.value);
-    }, []);
     useEffect(() => {
         var _a;
-        if (!innerValue) {
+        if (innerValue === undefined) {
             return;
         }
         const event = new Event("change");
+        if (innerValue === "" && innerRef.current) {
+            innerRef.current.value = ""; // Set the desired option value
+        }
         (_a = innerRef.current) === null || _a === void 0 ? void 0 : _a.dispatchEvent(event);
         onChange === null || onChange === void 0 ? void 0 : onChange(event);
-    }, [onChange, innerValue]);
+    }, [onChange, innerValue, isFirstRender]);
     const optionsWithCurrentSelectionBackupOption = [
         // Add the current selection in case there's no options loaded yet (in CreatableSelect)
         // Also _don't_ add it if it's a duplicate
@@ -1931,7 +1931,12 @@ const FormFieldSelectAdapter = forwardRef((_a, ref) => {
         label,
         disabled, children: [jsx("select", { onChange, ref: innerRef, name, value: innerValue, hidden: true, children: optionsWithCurrentSelectionBackupOption.map(option => {
                     return (jsx("option", { value: option.value, children: option.label }, option.value));
-                }) }), children(Object.assign(Object.assign({}, rest), { id, isDisabled: disabled, onBlur, options: optionsWithCurrentSelectionBackupOption, onChange: handleChange, value: selectedOption, defaultValue: selectedOption }))] }));
+                }) }), children(Object.assign(Object.assign({}, rest), { id, isDisabled: disabled, onBlur, options: optionsWithCurrentSelectionBackupOption, onChange: e => {
+                    // If theres no value, set the inner value to an empty string
+                    // A native select can not have a null value
+                    // So even if react-select sends a null value, we need to convert it to an empty string
+                    setInnerValue(!e ? "" : e.value);
+                }, value: selectedOption, defaultValue: selectedOption }))] }));
 });
 
 /**

package/package.json

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