@trackunit/react-form-components 2.6.23-alpha-3e7014314a8.0 → 2.6.26

package/index.cjs.js

@@ -4860,7 +4860,6 @@ Search.displayName = "Search";
  *
  */
 const FormFieldSelectAdapter = ({ className, "data-testid": dataTestId, helpText, helpAddon, tip, label, isInvalid = false, errorMessage, name, onBlur, options, value, defaultValue, id, htmlFor: htmlForProp, onChange, children, style, ref, required = false, ...rest }) => {
-    const isFirstRender = reactComponents.useIsFirstRender();
     const [innerValue, setInnerValue] = react.useState(value ?? defaultValue);
     const onChangeRef = react.useRef(onChange);
     react.useEffect(() => {
@@ -4880,17 +4879,42 @@ const FormFieldSelectAdapter = ({ className, "data-testid": dataTestId, helpText
     const innerRef = react.useRef(null);
     // eslint-disable-next-line @trackunit/no-typescript-assertion, @typescript-eslint/no-non-null-assertion
     react.useImperativeHandle(ref, () => innerRef.current, []);
+    // Bridges a react-select pick back to the hidden native <select> so `register`/native form
+    // consumers see a real change event.
+    //
+    // Only picks are bridged. A value arriving from the `value` prop is something the parent already
+    // holds, so reporting it back would be an echo - and through `register(...).onChange` that echo
+    // is indistinguishable from typing, marking the consumer's form dirty with no user interaction.
+    const lastNotifiedValueRef = react.useRef(innerValue);
+    // A box, not a bare value: `null` then unambiguously means "no pick pending", so the origin gate
+    // below cannot be satisfied by a parent-driven change that merely matches the ref's empty state.
+    const pendingUserPickRef = react.useRef(null);
     react.useEffect(() => {
-        if (isFirstRender || innerValue === undefined) {
+        if (lastNotifiedValueRef.current === innerValue) {
             return;
         }
-        const event = new Event("change");
+        lastNotifiedValueRef.current = innerValue;
+        // Keep the hidden select in sync whatever the origin - this is state, not notification.
         if (innerValue === "" && innerRef.current) {
             innerRef.current.value = ""; // Set the desired option value
         }
+        // Keyed to the value the pick expected, not a boolean: react-select reports a re-pick of the
+        // current option, which leaves `innerValue` untouched and so never runs this effect. A boolean
+        // would still be set when the parent's next value arrives, and that value would be reported
+        // back as a user edit.
+        const pendingUserPick = pendingUserPickRef.current;
+        pendingUserPickRef.current = null;
+        const isUserChange = pendingUserPick !== null && pendingUserPick.value === innerValue;
+        // No `undefined` guard needed: a pick is always a string or number (react-select's clear maps
+        // to ""), so matching one narrows `innerValue` away from `undefined`. Only the parent can put
+        // `undefined` there, and the gate above already rejects parent-driven values.
+        if (!isUserChange) {
+            return;
+        }
+        const event = new Event("change");
         innerRef.current?.dispatchEvent(event);
         onChangeRef.current?.(event);
-    }, [innerValue, isFirstRender]);
+    }, [innerValue]);
     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
@@ -4926,7 +4950,9 @@ const FormFieldSelectAdapter = ({ className, "data-testid": dataTestId, helpText
                     // 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);
+                    const nextValue = !e ? "" : e.value;
+                    pendingUserPickRef.current = { value: nextValue };
+                    setInnerValue(nextValue);
                 },
                 "data-testid": dataTestId,
                 value: 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, Button, Popover, PopoverTrigger, PopoverContent, cvaMenu, cvaMenuList, Tag, useIsTextTruncated, ZStack, MenuItem, useMeasure, useDebounce, useMergeRefs, Spinner, useScrollBlock, Text, Heading, useIsFirstRender } from '@trackunit/react-components';
+import { IconButton, Icon, Tooltip, Button, Popover, PopoverTrigger, PopoverContent, cvaMenu, cvaMenuList, Tag, useIsTextTruncated, ZStack, MenuItem, useMeasure, useDebounce, useMergeRefs, Spinner, useScrollBlock, Text, Heading } from '@trackunit/react-components';
 import { useMemo, useRef, useEffect, useImperativeHandle, useState, useCallback, useLayoutEffect, isValidElement, cloneElement, useReducer, createContext, useContext, useId } from 'react';
 import { twMerge } from 'tailwind-merge';
 import { cvaMerge } from '@trackunit/css-class-variance-utilities';
@@ -4859,7 +4859,6 @@ Search.displayName = "Search";
  *
  */
 const FormFieldSelectAdapter = ({ className, "data-testid": dataTestId, helpText, helpAddon, tip, label, isInvalid = false, errorMessage, name, onBlur, options, value, defaultValue, id, htmlFor: htmlForProp, onChange, children, style, ref, required = false, ...rest }) => {
-    const isFirstRender = useIsFirstRender();
     const [innerValue, setInnerValue] = useState(value ?? defaultValue);
     const onChangeRef = useRef(onChange);
     useEffect(() => {
@@ -4879,17 +4878,42 @@ const FormFieldSelectAdapter = ({ className, "data-testid": dataTestId, helpText
     const innerRef = useRef(null);
     // eslint-disable-next-line @trackunit/no-typescript-assertion, @typescript-eslint/no-non-null-assertion
     useImperativeHandle(ref, () => innerRef.current, []);
+    // Bridges a react-select pick back to the hidden native <select> so `register`/native form
+    // consumers see a real change event.
+    //
+    // Only picks are bridged. A value arriving from the `value` prop is something the parent already
+    // holds, so reporting it back would be an echo - and through `register(...).onChange` that echo
+    // is indistinguishable from typing, marking the consumer's form dirty with no user interaction.
+    const lastNotifiedValueRef = useRef(innerValue);
+    // A box, not a bare value: `null` then unambiguously means "no pick pending", so the origin gate
+    // below cannot be satisfied by a parent-driven change that merely matches the ref's empty state.
+    const pendingUserPickRef = useRef(null);
     useEffect(() => {
-        if (isFirstRender || innerValue === undefined) {
+        if (lastNotifiedValueRef.current === innerValue) {
             return;
         }
-        const event = new Event("change");
+        lastNotifiedValueRef.current = innerValue;
+        // Keep the hidden select in sync whatever the origin - this is state, not notification.
         if (innerValue === "" && innerRef.current) {
             innerRef.current.value = ""; // Set the desired option value
         }
+        // Keyed to the value the pick expected, not a boolean: react-select reports a re-pick of the
+        // current option, which leaves `innerValue` untouched and so never runs this effect. A boolean
+        // would still be set when the parent's next value arrives, and that value would be reported
+        // back as a user edit.
+        const pendingUserPick = pendingUserPickRef.current;
+        pendingUserPickRef.current = null;
+        const isUserChange = pendingUserPick !== null && pendingUserPick.value === innerValue;
+        // No `undefined` guard needed: a pick is always a string or number (react-select's clear maps
+        // to ""), so matching one narrows `innerValue` away from `undefined`. Only the parent can put
+        // `undefined` there, and the gate above already rejects parent-driven values.
+        if (!isUserChange) {
+            return;
+        }
+        const event = new Event("change");
         innerRef.current?.dispatchEvent(event);
         onChangeRef.current?.(event);
-    }, [innerValue, isFirstRender]);
+    }, [innerValue]);
     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
@@ -4925,7 +4949,9 @@ const FormFieldSelectAdapter = ({ className, "data-testid": dataTestId, helpText
                     // 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);
+                    const nextValue = !e ? "" : e.value;
+                    pendingUserPickRef.current = { value: nextValue };
+                    setInnerValue(nextValue);
                 },
                 "data-testid": dataTestId,
                 value: selectedOption,

package/migrations/utils/jsx-utils.js

@@ -1,11 +1,41 @@
 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.insertAttributeIntoOpeningTag = exports.logSummary = exports.tsquery = exports.parseTsx = exports.hasSpreadAttribute = exports.findJsxAttribute = exports.findJsxElements = exports.getLocalAliasFor = exports.getImportedAliases = exports.visitTsFiles = exports.visitTsxFiles = void 0;
-const tslib_1 = require("tslib");
+exports.insertAttributeIntoOpeningTag = exports.logSummary = exports.parseTsx = exports.hasSpreadAttribute = exports.findJsxAttribute = exports.findJsxElements = exports.getLocalAliasFor = exports.getImportedAliases = exports.visitTsFiles = exports.visitTsxFiles = void 0;
 const devkit_1 = require("@nx/devkit");
-const tsquery_1 = require("@phenomnomnominal/tsquery");
-Object.defineProperty(exports, "tsquery", { enumerable: true, get: function () { return tsquery_1.tsquery; } });
-const ts = tslib_1.__importStar(require("typescript"));
+const ts = __importStar(require("typescript"));
 const TSX_EXTENSIONS = [".tsx", ".jsx"];
 const TS_EXTENSIONS = [".ts", ".tsx", ".jsx"];
 const isTsxFile = (filePath) => TSX_EXTENSIONS.some(ext => filePath.endsWith(ext));

package/migrations/v2-0-0/actionbutton-add-title.js

@@ -1,9 +1,41 @@
 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.actionButtonAddTitle = void 0;
-const tslib_1 = require("tslib");
 const devkit_1 = require("@nx/devkit");
-const ts = tslib_1.__importStar(require("typescript"));
+const ts = __importStar(require("typescript"));
 const jsx_utils_1 = require("../utils/jsx-utils");
 const PACKAGE_NAME = "@trackunit/react-form-components";
 const COMPONENT_NAME = "ActionButton";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-form-components",
-  "version": "2.6.23-alpha-3e7014314a8.0",
+  "version": "2.6.26",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "migrations": "./migrations.json",
@@ -10,17 +10,17 @@
   "dependencies": {
     "react-calendar": "^6.0.0",
     "react-select": "^5.10.2",
-    "@trackunit/date-and-time-utils": "1.14.21-alpha-3e7014314a8.0",
+    "@trackunit/date-and-time-utils": "1.14.20",
     "usehooks-ts": "^3.1.0",
     "libphonenumber-js": "^1.13.6",
     "zod": "^3.25.76",
     "tailwind-merge": "^2.0.0",
-    "@trackunit/css-class-variance-utilities": "1.14.20-alpha-3e7014314a8.0",
-    "@trackunit/react-components": "2.10.16-alpha-3e7014314a8.0",
-    "@trackunit/ui-icons": "1.14.19-alpha-3e7014314a8.0",
-    "@trackunit/shared-utils": "1.16.23-alpha-3e7014314a8.0",
-    "@trackunit/ui-design-tokens": "1.15.10-alpha-3e7014314a8.0",
-    "@trackunit/i18n-library-translation": "2.4.22-alpha-3e7014314a8.0",
+    "@trackunit/css-class-variance-utilities": "1.14.19",
+    "@trackunit/react-components": "2.10.19",
+    "@trackunit/ui-icons": "1.14.18",
+    "@trackunit/shared-utils": "1.16.22",
+    "@trackunit/ui-design-tokens": "1.15.9",
+    "@trackunit/i18n-library-translation": "2.4.25",
     "string-ts": "^2.0.0",
     "es-toolkit": "^1.39.10"
   },

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

@@ -32,6 +32,11 @@ export interface SelectFieldProps<TOption extends BaseOptionType = BaseOptionTyp
     /**
      * The onChange handler for the SelectField.
      *
+     * Called when the user picks a different option. It is not called when the `value` prop changes,
+     * since that value is one the parent already holds, and not when the user re-picks the option that
+     * is already selected. It is also forwarded to the hidden native `<select>`, so a change event
+     * dispatched on that node invokes it too.
+     *
      * @important
      */
     onChange?: (event: {