@trackunit/react-form-components 1.6.33 → 1.7.1

package/index.cjs.js

@@ -1129,7 +1129,40 @@ const validateNumber = (number, required = false, min, max) => {
  * NOTE: If shown with a label, please use the `NumberField` component instead.
  */
 const NumberInput = ({ ref, ...rest }) => {
-    return jsxRuntime.jsx(BaseInput, { ref: ref, type: "number", ...rest, value: rest.value });
+    const inputElementRef = react.useRef(null);
+    const preventDefaultWheelEvent = react.useCallback((event) => {
+        const inputElement = inputElementRef.current;
+        const activeElement = document.activeElement;
+        if (inputElement && activeElement === inputElement) {
+            event.preventDefault();
+        }
+    }, []);
+    const forwardAndStoreInputRef = react.useCallback((node) => {
+        const previousNode = inputElementRef.current;
+        if (previousNode) {
+            previousNode.removeEventListener("wheel", preventDefaultWheelEvent);
+        }
+        inputElementRef.current = node;
+        if (node) {
+            // NOTE: Prevent the default browser behavior of changing the value via mouse wheel
+            node.addEventListener("wheel", preventDefaultWheelEvent, { passive: false });
+        }
+        if (typeof ref === "function") {
+            ref(node);
+        }
+        else if (ref && typeof ref === "object") {
+            ref.current = node;
+        }
+    }, [preventDefaultWheelEvent, ref]);
+    react.useEffect(() => {
+        return () => {
+            const element = inputElementRef.current;
+            if (element) {
+                element.removeEventListener("wheel", preventDefaultWheelEvent);
+            }
+        };
+    }, [preventDefaultWheelEvent]);
+    return jsxRuntime.jsx(BaseInput, { ref: forwardAndStoreInputRef, type: "number", ...rest, value: rest.value });
 };
 NumberInput.displayName = "NumberInput";
 
@@ -2159,6 +2192,13 @@ const useCustomComponents = ({ componentsProps, disabled, readOnly, setMenuIsEna
                     const tags = key === PLACEHOLDER_KEY ? [] : values;
                     // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
                     const searchInput = props && props.children && props.children[1];
+                    const placeholderElement = Array.isArray(props.children)
+                        ? props.children.find(child => child && child.key === "placeholder")
+                        : null;
+                    const shouldShowPlaceholder = !!placeholderElement && tags?.length === 0;
+                    if (shouldShowPlaceholder) {
+                        return (jsxRuntime.jsx(ReactSelect.components.ValueContainer, { ...props, isDisabled: props.selectProps.isDisabled, children: props.children }));
+                    }
                     return (jsxRuntime.jsx(ReactSelect.components.ValueContainer, { ...props, isDisabled: props.selectProps.isDisabled, children: maxSelectedDisplayCount === undefined ? (jsxRuntime.jsx(TagsContainer, { disabled: disabled, items: tags
                                 ? tags.map(({ props: tagProps }) => {
                                     return {

package/index.esm.js

@@ -1128,7 +1128,40 @@ const validateNumber = (number, required = false, min, max) => {
  * NOTE: If shown with a label, please use the `NumberField` component instead.
  */
 const NumberInput = ({ ref, ...rest }) => {
-    return jsx(BaseInput, { ref: ref, type: "number", ...rest, value: rest.value });
+    const inputElementRef = useRef(null);
+    const preventDefaultWheelEvent = useCallback((event) => {
+        const inputElement = inputElementRef.current;
+        const activeElement = document.activeElement;
+        if (inputElement && activeElement === inputElement) {
+            event.preventDefault();
+        }
+    }, []);
+    const forwardAndStoreInputRef = useCallback((node) => {
+        const previousNode = inputElementRef.current;
+        if (previousNode) {
+            previousNode.removeEventListener("wheel", preventDefaultWheelEvent);
+        }
+        inputElementRef.current = node;
+        if (node) {
+            // NOTE: Prevent the default browser behavior of changing the value via mouse wheel
+            node.addEventListener("wheel", preventDefaultWheelEvent, { passive: false });
+        }
+        if (typeof ref === "function") {
+            ref(node);
+        }
+        else if (ref && typeof ref === "object") {
+            ref.current = node;
+        }
+    }, [preventDefaultWheelEvent, ref]);
+    useEffect(() => {
+        return () => {
+            const element = inputElementRef.current;
+            if (element) {
+                element.removeEventListener("wheel", preventDefaultWheelEvent);
+            }
+        };
+    }, [preventDefaultWheelEvent]);
+    return jsx(BaseInput, { ref: forwardAndStoreInputRef, type: "number", ...rest, value: rest.value });
 };
 NumberInput.displayName = "NumberInput";
 
@@ -2158,6 +2191,13 @@ const useCustomComponents = ({ componentsProps, disabled, readOnly, setMenuIsEna
                     const tags = key === PLACEHOLDER_KEY ? [] : values;
                     // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
                     const searchInput = props && props.children && props.children[1];
+                    const placeholderElement = Array.isArray(props.children)
+                        ? props.children.find(child => child && child.key === "placeholder")
+                        : null;
+                    const shouldShowPlaceholder = !!placeholderElement && tags?.length === 0;
+                    if (shouldShowPlaceholder) {
+                        return (jsx(components.ValueContainer, { ...props, isDisabled: props.selectProps.isDisabled, children: props.children }));
+                    }
                     return (jsx(components.ValueContainer, { ...props, isDisabled: props.selectProps.isDisabled, children: maxSelectedDisplayCount === undefined ? (jsx(TagsContainer, { disabled: disabled, items: tags
                                 ? tags.map(({ props: tagProps }) => {
                                     return {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-form-components",
-  "version": "1.6.33",
+  "version": "1.7.1",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {
@@ -18,7 +18,7 @@
     "react-hook-form": "7.62.0",
     "tailwind-merge": "^2.0.0",
     "@trackunit/css-class-variance-utilities": "1.6.23",
-    "@trackunit/react-components": "1.7.31",
+    "@trackunit/react-components": "1.7.32",
     "@trackunit/ui-icons": "1.6.22",
     "@trackunit/shared-utils": "1.8.23",
     "@trackunit/ui-design-tokens": "1.6.24",