@uniformdev/design-system 20.26.2 → 20.26.3-alpha.7

package/dist/esm/index.js

@@ -4621,6 +4621,12 @@ var Fieldset = React7.forwardRef(
 // src/components/Input/Input.tsx
 import * as React8 from "react";
 
+// src/utils/disableMouseWheelEvent.ts
+var disableMouseWheelEvent = (e) => {
+  e.stopPropagation();
+  e.currentTarget.blur();
+};
+
 // src/components/Input/Label.tsx
 import { jsx as jsx36 } from "@emotion/react/jsx-runtime";
 var Label = ({ children, className, testId, ...props }) => {
@@ -4655,8 +4661,10 @@ var Input = React8.forwardRef(
     classNameContainer,
     classNameControl,
     classNameLabel,
+    enableMouseWheel = false,
     ...props
   }, ref) => {
+    const isNumberInputAndMouseWheelDisabled = enableMouseWheel !== true && props.type === "number";
     return /* @__PURE__ */ jsxs22(
       "div",
       {
@@ -4691,6 +4699,7 @@ var Input = React8.forwardRef(
                     ],
                     "aria-label": showLabel || typeof label !== "string" ? void 0 : label,
                     className: typeof classNameControl === "string" ? classNameControl : "",
+                    onWheel: isNumberInputAndMouseWheelDisabled ? disableMouseWheelEvent : void 0,
                     ...props,
                     ref
                   }
@@ -12126,23 +12135,23 @@ var ParameterInput = forwardRef23((props, ref) => {
   const { shellProps, innerProps } = extractParameterProps(props);
   return /* @__PURE__ */ jsx122(ParameterShell, { "data-testid": "parameter-input", ...shellProps, children: /* @__PURE__ */ jsx122(ParameterInputInner, { ref, ...innerProps }) });
 });
-var ParameterInputInner = forwardRef23(
-  ({ ...props }, ref) => {
-    const { id, label, hiddenLabel } = useParameterShell();
-    return /* @__PURE__ */ jsx122(
-      "input",
-      {
-        css: input3,
-        id,
-        type: props.type || "text",
-        "aria-label": hiddenLabel && typeof label === "string" ? label : void 0,
-        autoComplete: "off",
-        ref,
-        ...props
-      }
-    );
-  }
-);
+var ParameterInputInner = forwardRef23(({ enableMouseWheel = false, ...props }, ref) => {
+  const { id, label, hiddenLabel } = useParameterShell();
+  const isNumberInputAndMouseWheelDisabled = enableMouseWheel !== true && props.type === "number";
+  return /* @__PURE__ */ jsx122(
+    "input",
+    {
+      css: input3,
+      id,
+      type: props.type || "text",
+      "aria-label": hiddenLabel && typeof label === "string" ? label : void 0,
+      autoComplete: "off",
+      ref,
+      onWheel: isNumberInputAndMouseWheelDisabled ? disableMouseWheelEvent : void 0,
+      ...props
+    }
+  );
+});
 
 // src/components/ParameterInputs/ParameterLink.tsx
 import { forwardRef as forwardRef24 } from "react";
@@ -12858,7 +12867,9 @@ import { useCallback as useCallback8, useEffect as useEffect17, useRef as useRef
 
 // src/components/ParameterInputs/rich-text/utils.ts
 import { $isAtNodeEnd } from "@lexical/selection";
-import { $isElementNode } from "lexical";
+import {
+  $isElementNode
+} from "lexical";
 var getElementNodesInSelection = (selection) => {
   const nodesInSelection = selection.getNodes();
   if (nodesInSelection.length === 0) {
@@ -12889,6 +12900,27 @@ var getSelectedNode = (selection) => {
     return $isAtNodeEnd(anchor) ? anchorNode : focusNode;
   }
 };
+var walkSerializedEditorState = (node, callback) => {
+  callback(node);
+  for (const child of node.children) {
+    if ("children" in child) {
+      walkSerializedEditorState(child, callback);
+    } else {
+      callback(child);
+    }
+  }
+};
+var normalizeStateForDeepEqualComparison = (editorState) => {
+  walkSerializedEditorState(editorState.root, (node) => {
+    if ("direction" in node) {
+      node.direction = null;
+    }
+    if ("textFormat" in node) {
+      delete node.textFormat;
+    }
+  });
+  return editorState;
+};
 
 // src/components/ParameterInputs/rich-text/LinkNodePlugin.tsx
 import { Fragment as Fragment15, jsx as jsx126, jsxs as jsxs84 } from "@emotion/react/jsx-runtime";
@@ -15122,7 +15154,12 @@ var RichText = ({
   useEffect23(() => {
     const removeUpdateListener = editor.registerUpdateListener(({ editorState, prevEditorState, tags }) => {
       requestAnimationFrame(() => {
-        if (!deepEqual2(editorState.toJSON(), prevEditorState.toJSON())) {
+        const previousEditorState = prevEditorState.toJSON();
+        const currentEditorState = editorState.toJSON();
+        if (!deepEqual2(
+          normalizeStateForDeepEqualComparison(currentEditorState),
+          normalizeStateForDeepEqualComparison(previousEditorState)
+        )) {
           onChange == null ? void 0 : onChange(editorState.toJSON(), tags);
         }
       });

package/dist/index.d.mts

@@ -2045,6 +2045,11 @@ type InputProps = React$1.InputHTMLAttributes<HTMLInputElement> & {
      * (optional) sets an overriding classname on the label element
      * @deprecated */
     classNameLabel?: string | SerializedStyles;
+    /**
+     * If true, the input will allow mouse wheel scrolling to change the value.
+     * @default false
+     */
+    enableMouseWheel?: boolean;
 };
 /**
  * Input Component
@@ -2087,6 +2092,11 @@ declare const Input: React$1.ForwardRefExoticComponent<React$1.InputHTMLAttribut
      * (optional) sets an overriding classname on the label element
      * @deprecated */
     classNameLabel?: string | SerializedStyles;
+    /**
+     * If true, the input will allow mouse wheel scrolling to change the value.
+     * @default false
+     */
+    enableMouseWheel?: boolean;
 } & React$1.RefAttributes<HTMLInputElement>>;
 
 /**
@@ -3207,8 +3217,16 @@ declare function ParameterImagePreview({ imageSrc }: {
     imageSrc: string;
 }): _emotion_react_jsx_runtime.JSX.Element | null;
 
-type ParameterInputProps = CommonParameterInputProps & React.InputHTMLAttributes<HTMLInputElement>;
-/** @example <ParameterInput label="label value" id="my-input" /> */
+type ParameterInputProps = CommonParameterInputProps & React.InputHTMLAttributes<HTMLInputElement> & {
+    /**
+     * If true, the input will allow mouse wheel scrolling to change the value.
+     * @default false
+     */
+    enableMouseWheel?: boolean;
+};
+/** @example <ParameterInput label="label value" id="my-input" />
+ * @example <ParameterInput label="Number input" id="my-number" type="number" enableMouseWheel={false} />
+ */
 declare const ParameterInput: React$1.ForwardRefExoticComponent<CommonParameterProps & {
     caption?: string;
     menuItems?: React$1.ReactNode;
@@ -3216,8 +3234,16 @@ declare const ParameterInput: React$1.ForwardRefExoticComponent<CommonParameterP
     errorTestId?: string;
     captionTestId?: string;
     title?: string;
-} & React$1.InputHTMLAttributes<HTMLInputElement> & React$1.RefAttributes<HTMLInputElement>>;
-declare const ParameterInputInner: React$1.ForwardRefExoticComponent<React$1.InputHTMLAttributes<HTMLInputElement> & React$1.RefAttributes<HTMLInputElement>>;
+} & React$1.InputHTMLAttributes<HTMLInputElement> & {
+    /**
+     * If true, the input will allow mouse wheel scrolling to change the value.
+     * @default false
+     */
+    enableMouseWheel?: boolean;
+} & React$1.RefAttributes<HTMLInputElement>>;
+declare const ParameterInputInner: React$1.ForwardRefExoticComponent<React$1.InputHTMLAttributes<HTMLInputElement> & {
+    enableMouseWheel?: boolean;
+} & React$1.RefAttributes<HTMLInputElement>>;
 
 type ParameterLabelProps = HTMLAttributes<HTMLLabelElement> & {
     /** sets the value for label and id on the input field */

package/dist/index.d.ts

@@ -2045,6 +2045,11 @@ type InputProps = React$1.InputHTMLAttributes<HTMLInputElement> & {
      * (optional) sets an overriding classname on the label element
      * @deprecated */
     classNameLabel?: string | SerializedStyles;
+    /**
+     * If true, the input will allow mouse wheel scrolling to change the value.
+     * @default false
+     */
+    enableMouseWheel?: boolean;
 };
 /**
  * Input Component
@@ -2087,6 +2092,11 @@ declare const Input: React$1.ForwardRefExoticComponent<React$1.InputHTMLAttribut
      * (optional) sets an overriding classname on the label element
      * @deprecated */
     classNameLabel?: string | SerializedStyles;
+    /**
+     * If true, the input will allow mouse wheel scrolling to change the value.
+     * @default false
+     */
+    enableMouseWheel?: boolean;
 } & React$1.RefAttributes<HTMLInputElement>>;
 
 /**
@@ -3207,8 +3217,16 @@ declare function ParameterImagePreview({ imageSrc }: {
     imageSrc: string;
 }): _emotion_react_jsx_runtime.JSX.Element | null;
 
-type ParameterInputProps = CommonParameterInputProps & React.InputHTMLAttributes<HTMLInputElement>;
-/** @example <ParameterInput label="label value" id="my-input" /> */
+type ParameterInputProps = CommonParameterInputProps & React.InputHTMLAttributes<HTMLInputElement> & {
+    /**
+     * If true, the input will allow mouse wheel scrolling to change the value.
+     * @default false
+     */
+    enableMouseWheel?: boolean;
+};
+/** @example <ParameterInput label="label value" id="my-input" />
+ * @example <ParameterInput label="Number input" id="my-number" type="number" enableMouseWheel={false} />
+ */
 declare const ParameterInput: React$1.ForwardRefExoticComponent<CommonParameterProps & {
     caption?: string;
     menuItems?: React$1.ReactNode;
@@ -3216,8 +3234,16 @@ declare const ParameterInput: React$1.ForwardRefExoticComponent<CommonParameterP
     errorTestId?: string;
     captionTestId?: string;
     title?: string;
-} & React$1.InputHTMLAttributes<HTMLInputElement> & React$1.RefAttributes<HTMLInputElement>>;
-declare const ParameterInputInner: React$1.ForwardRefExoticComponent<React$1.InputHTMLAttributes<HTMLInputElement> & React$1.RefAttributes<HTMLInputElement>>;
+} & React$1.InputHTMLAttributes<HTMLInputElement> & {
+    /**
+     * If true, the input will allow mouse wheel scrolling to change the value.
+     * @default false
+     */
+    enableMouseWheel?: boolean;
+} & React$1.RefAttributes<HTMLInputElement>>;
+declare const ParameterInputInner: React$1.ForwardRefExoticComponent<React$1.InputHTMLAttributes<HTMLInputElement> & {
+    enableMouseWheel?: boolean;
+} & React$1.RefAttributes<HTMLInputElement>>;
 
 type ParameterLabelProps = HTMLAttributes<HTMLLabelElement> & {
     /** sets the value for label and id on the input field */

package/dist/index.js

@@ -6368,6 +6368,13 @@ var Fieldset = React7.forwardRef(
 init_emotion_jsx_shim();
 var React8 = __toESM(require("react"));
 
+// src/utils/disableMouseWheelEvent.ts
+init_emotion_jsx_shim();
+var disableMouseWheelEvent = (e) => {
+  e.stopPropagation();
+  e.currentTarget.blur();
+};
+
 // src/components/Input/Label.tsx
 init_emotion_jsx_shim();
 var import_jsx_runtime36 = require("@emotion/react/jsx-runtime");
@@ -6403,8 +6410,10 @@ var Input = React8.forwardRef(
     classNameContainer,
     classNameControl,
     classNameLabel,
+    enableMouseWheel = false,
     ...props
   }, ref) => {
+    const isNumberInputAndMouseWheelDisabled = enableMouseWheel !== true && props.type === "number";
     return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
       "div",
       {
@@ -6439,6 +6448,7 @@ var Input = React8.forwardRef(
                     ],
                     "aria-label": showLabel || typeof label !== "string" ? void 0 : label,
                     className: typeof classNameControl === "string" ? classNameControl : "",
+                    onWheel: isNumberInputAndMouseWheelDisabled ? disableMouseWheelEvent : void 0,
                     ...props,
                     ref
                   }
@@ -14042,23 +14052,23 @@ var ParameterInput = (0, import_react142.forwardRef)((props, ref) => {
   const { shellProps, innerProps } = extractParameterProps(props);
   return /* @__PURE__ */ (0, import_jsx_runtime122.jsx)(ParameterShell, { "data-testid": "parameter-input", ...shellProps, children: /* @__PURE__ */ (0, import_jsx_runtime122.jsx)(ParameterInputInner, { ref, ...innerProps }) });
 });
-var ParameterInputInner = (0, import_react142.forwardRef)(
-  ({ ...props }, ref) => {
-    const { id, label, hiddenLabel } = useParameterShell();
-    return /* @__PURE__ */ (0, import_jsx_runtime122.jsx)(
-      "input",
-      {
-        css: input3,
-        id,
-        type: props.type || "text",
-        "aria-label": hiddenLabel && typeof label === "string" ? label : void 0,
-        autoComplete: "off",
-        ref,
-        ...props
-      }
-    );
-  }
-);
+var ParameterInputInner = (0, import_react142.forwardRef)(({ enableMouseWheel = false, ...props }, ref) => {
+  const { id, label, hiddenLabel } = useParameterShell();
+  const isNumberInputAndMouseWheelDisabled = enableMouseWheel !== true && props.type === "number";
+  return /* @__PURE__ */ (0, import_jsx_runtime122.jsx)(
+    "input",
+    {
+      css: input3,
+      id,
+      type: props.type || "text",
+      "aria-label": hiddenLabel && typeof label === "string" ? label : void 0,
+      autoComplete: "off",
+      ref,
+      onWheel: isNumberInputAndMouseWheelDisabled ? disableMouseWheelEvent : void 0,
+      ...props
+    }
+  );
+});
 
 // src/components/ParameterInputs/ParameterLink.tsx
 init_emotion_jsx_shim();
@@ -14791,6 +14801,27 @@ var getSelectedNode = (selection) => {
     return (0, import_selection.$isAtNodeEnd)(anchor) ? anchorNode : focusNode;
   }
 };
+var walkSerializedEditorState = (node, callback) => {
+  callback(node);
+  for (const child of node.children) {
+    if ("children" in child) {
+      walkSerializedEditorState(child, callback);
+    } else {
+      callback(child);
+    }
+  }
+};
+var normalizeStateForDeepEqualComparison = (editorState) => {
+  walkSerializedEditorState(editorState.root, (node) => {
+    if ("direction" in node) {
+      node.direction = null;
+    }
+    if ("textFormat" in node) {
+      delete node.textFormat;
+    }
+  });
+  return editorState;
+};
 
 // src/components/ParameterInputs/rich-text/LinkNodePlugin.tsx
 var import_jsx_runtime126 = require("@emotion/react/jsx-runtime");
@@ -16972,7 +17003,12 @@ var RichText = ({
   (0, import_react158.useEffect)(() => {
     const removeUpdateListener = editor.registerUpdateListener(({ editorState, prevEditorState, tags }) => {
       requestAnimationFrame(() => {
-        if (!(0, import_fast_equals2.deepEqual)(editorState.toJSON(), prevEditorState.toJSON())) {
+        const previousEditorState = prevEditorState.toJSON();
+        const currentEditorState = editorState.toJSON();
+        if (!(0, import_fast_equals2.deepEqual)(
+          normalizeStateForDeepEqualComparison(currentEditorState),
+          normalizeStateForDeepEqualComparison(previousEditorState)
+        )) {
           onChange == null ? void 0 : onChange(editorState.toJSON(), tags);
         }
       });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uniformdev/design-system",
-  "version": "20.26.2",
+  "version": "20.26.3-alpha.7+2e8db29af3",
   "description": "Uniform design system components",
   "license": "SEE LICENSE IN LICENSE.txt",
   "exports": {
@@ -38,8 +38,8 @@
     "@storybook/theming": "^8.3.3",
     "@types/react": "18.3.11",
     "@types/react-dom": "18.3.1",
-    "@uniformdev/canvas": "^20.26.2",
-    "@uniformdev/richtext": "^20.26.2",
+    "@uniformdev/canvas": "^20.26.3-alpha.7+2e8db29af3",
+    "@uniformdev/richtext": "^20.26.3-alpha.7+2e8db29af3",
     "@vitest/coverage-v8": "^3.1.2",
     "autoprefixer": "10.4.21",
     "hygen": "6.2.11",
@@ -91,5 +91,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "e9f8f8081d816af23d625d40d1a0557979b85feb"
+  "gitHead": "2e8db29af31430de36e78f47cffc374433450419"
 }