@choice-ui/react 1.9.6 → 1.9.7

package/dist/components/numeric-input/dist/index.d.ts

@@ -51,6 +51,7 @@ interface NumericInputContextValue {
     max?: number;
     min?: number;
     onChange?: (value: NumericInputValue, detail: NumericChangeDetail) => void;
+    onChangeEnd?: (value: NumericInputValue, detail: NumericChangeDetail) => void;
     onEmpty?: () => void;
     onIsEditingChange?: (isEditing: boolean) => void;
     onPressEnd?: PressMoveProps["onPressEnd"];
@@ -74,6 +75,7 @@ interface NumericInputProps extends NumericInputContextValue, Omit<HTMLProps<HTM
     disabled?: boolean;
     id?: string;
     onChange?: (value: NumericInputValue, detail: NumericChangeDetail) => void;
+    onChangeEnd?: (value: NumericInputValue, detail: NumericChangeDetail) => void;
     tooltip?: TooltipProps;
     triggerRef?: React__default.RefObject<HTMLDivElement> | ((el: HTMLDivElement | null) => void);
 }

package/dist/components/numeric-input/dist/index.js

@@ -1,5 +1,5 @@
 import { Tooltip } from "../../tooltip/dist/index.js";
-import { forwardRef, useRef, useState, useMemo, createContext, cloneElement, memo, useEffect, useCallback, Children, isValidElement, useContext } from "react";
+import { forwardRef, useRef, useState, useMemo, createContext, cloneElement, memo, useCallback, useEffect, Children, isValidElement, useContext } from "react";
 import { useEventCallback } from "usehooks-ts";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { IconButton } from "../../icon-button/dist/index.js";
@@ -919,11 +919,15 @@ function useNumericInput(props) {
     step = 1,
     value,
     onChange,
+    onChangeEnd,
     onEmpty,
     onPressEnd,
     onPressStart
   } = props;
   const innerRef = useRef(null);
+  const dragHasChangedRef = useRef(false);
+  const dragEndValueRef = useRef(void 0);
+  const dragEndDetailRef = useRef(void 0);
   const [isFocused, setIsFocused] = useState(false);
   const [displayValue, setDisplayValue] = useState("");
   const { shiftPressed, metaPressed } = useModifierKeys(disabled);
@@ -941,6 +945,10 @@ function useNumericInput(props) {
     defaultValue: defaultValuePre,
     allowEmpty: true
   });
+  const mapResultToOutputValue = useCallback(
+    (result) => typeof value === "string" ? result.string : typeof value === "number" ? result.array[0] : Array.isArray(value) ? result.array : result.object,
+    [value]
+  );
   useEffect(() => {
     if (!innerValue) {
       setDisplayValue("");
@@ -959,7 +967,7 @@ function useNumericInput(props) {
     setDisplayValue(valuePre2.string);
   }, [innerValue, expression, max, min, decimal, setValue]);
   const updateValue = useCallback(
-    (updateFn) => {
+    (updateFn, options) => {
       if (disabled || readOnly) return;
       setValue((prev) => {
         if (!prev) {
@@ -971,10 +979,13 @@ function useNumericInput(props) {
             min,
             decimal
           });
-          onChange == null ? void 0 : onChange(
-            typeof value === "string" ? initialValue.string : typeof value === "number" ? initialValue.array[0] : Array.isArray(value) ? initialValue.array : initialValue.object,
-            initialValue
-          );
+          const nextValue = mapResultToOutputValue(initialValue);
+          onChange == null ? void 0 : onChange(nextValue, initialValue);
+          if ((options == null ? void 0 : options.source) === "drag") {
+            dragHasChangedRef.current = true;
+            dragEndValueRef.current = nextValue;
+            dragEndDetailRef.current = initialValue;
+          }
           return initialValue;
         }
         const valuePre2 = dealWithNumericInputValue({
@@ -998,15 +1009,18 @@ function useNumericInput(props) {
           return true;
         })();
         if (hasChanged) {
-          onChange == null ? void 0 : onChange(
-            typeof value === "string" ? valuePre2.string : typeof value === "number" ? valuePre2.array[0] : Array.isArray(value) ? valuePre2.array : valuePre2.object,
-            valuePre2
-          );
+          const nextValue = mapResultToOutputValue(valuePre2);
+          onChange == null ? void 0 : onChange(nextValue, valuePre2);
+          if ((options == null ? void 0 : options.source) === "drag") {
+            dragHasChangedRef.current = true;
+            dragEndValueRef.current = nextValue;
+            dragEndDetailRef.current = valuePre2;
+          }
         }
         return valuePre2;
       });
     },
-    [disabled, readOnly, setValue, max, min, decimal, onChange, value]
+    [disabled, readOnly, setValue, max, min, decimal, onChange, expressionRef, mapResultToOutputValue]
   );
   const { inputHandlers } = useInputInteractions({
     inputRef: innerRef,
@@ -1031,6 +1045,9 @@ function useNumericInput(props) {
   const { isPressed: handlerPressed, pressMoveProps } = usePressMove({
     disabled,
     onPressStart: (e) => {
+      dragHasChangedRef.current = false;
+      dragEndValueRef.current = void 0;
+      dragEndDetailRef.current = void 0;
       const wasFocused = isFocused;
       if (onPressStart && "nativeEvent" in e) {
         onPressStart(e.nativeEvent);
@@ -1056,12 +1073,18 @@ function useNumericInput(props) {
         onPressEnd(e.nativeEvent);
       }
       onPressEnd == null ? void 0 : onPressEnd(e);
+      if (dragHasChangedRef.current && dragEndValueRef.current !== void 0 && dragEndDetailRef.current !== void 0) {
+        onChangeEnd == null ? void 0 : onChangeEnd(dragEndValueRef.current, dragEndDetailRef.current);
+      }
+      dragHasChangedRef.current = false;
+      dragEndValueRef.current = void 0;
+      dragEndDetailRef.current = void 0;
     },
     onPressMoveLeft: (delta) => {
-      updateValue((value2) => value2 - delta * getCurrentStep());
+      updateValue((value2) => value2 - delta * getCurrentStep(), { source: "drag" });
     },
     onPressMoveRight: (delta) => {
-      updateValue((value2) => value2 + delta * getCurrentStep());
+      updateValue((value2) => value2 + delta * getCurrentStep(), { source: "drag" });
     }
   });
   const inputProps = {
@@ -1104,6 +1127,7 @@ var NumericInputBase = forwardRef((props, ref) => {
     selected = false,
     tooltip,
     onChange,
+    onChangeEnd,
     onEmpty,
     onPressEnd,
     onPressStart,
@@ -1127,6 +1151,7 @@ var NumericInputBase = forwardRef((props, ref) => {
     step,
     value,
     onChange,
+    onChangeEnd,
     onEmpty,
     onPressEnd,
     onPressStart,
@@ -1167,6 +1192,7 @@ var NumericInputBase = forwardRef((props, ref) => {
       expression,
       // Event handling methods
       onChange,
+      onChangeEnd,
       onEmpty,
       onPressStart,
       onPressEnd,
@@ -1191,6 +1217,7 @@ var NumericInputBase = forwardRef((props, ref) => {
       decimal,
       expression,
       onChange,
+      onChangeEnd,
       onEmpty,
       onPressStart,
       onPressEnd,

package/dist/components/numeric-input/src/context/numeric-input-context.d.ts

@@ -11,6 +11,7 @@ export interface NumericInputContextValue {
     max?: number;
     min?: number;
     onChange?: (value: NumericInputValue, detail: NumericChangeDetail) => void;
+    onChangeEnd?: (value: NumericInputValue, detail: NumericChangeDetail) => void;
     onEmpty?: () => void;
     onIsEditingChange?: (isEditing: boolean) => void;
     onPressEnd?: PressMoveProps["onPressEnd"];

package/dist/components/numeric-input/src/hooks/use-input-interactions.d.ts

@@ -17,7 +17,9 @@ interface UseInputInteractionsProps<T extends NumericInputValue> {
     setDisplayValue: (value: string) => void;
     setIsFocused: (focused: boolean) => void;
     setValue: (value: NumberResult | ((prev: NumberResult | undefined) => NumberResult)) => void;
-    updateValue: (updateFn?: (value: number) => number) => void;
+    updateValue: (updateFn?: (value: number) => number, options?: {
+        source?: "drag" | "keyboard";
+    }) => void;
     value?: T;
 }
 /**

package/dist/components/numeric-input/src/hooks/use-numeric-input.d.ts

@@ -10,6 +10,7 @@ interface UseNumericInputProps<T extends NumericInputValue> extends Omit<HTMLPro
     max?: number;
     min?: number;
     onChange?: (value: T, obj: NumberResult) => void;
+    onChangeEnd?: (value: T, obj: NumberResult) => void;
     onEmpty?: () => void;
     onPressEnd?: PressMoveProps["onPressEnd"];
     onPressStart?: PressMoveProps["onPressStart"];

package/dist/components/numeric-input/src/hooks/use-numeric-input.js

@@ -1,4 +1,4 @@
-import { useRef, useState, useEffect, useCallback } from "react";
+import { useRef, useState, useCallback, useEffect } from "react";
 import { dealWithNumericInputValue } from "../utils/numeric-value-processor.js";
 import { useInputInteractions } from "./use-input-interactions.js";
 import { useNumericValueProcessing } from "./use-numeric-value-processing.js";
@@ -21,11 +21,15 @@ function useNumericInput(props) {
     step = 1,
     value,
     onChange,
+    onChangeEnd,
     onEmpty,
     onPressEnd,
     onPressStart
   } = props;
   const innerRef = useRef(null);
+  const dragHasChangedRef = useRef(false);
+  const dragEndValueRef = useRef(void 0);
+  const dragEndDetailRef = useRef(void 0);
   const [isFocused, setIsFocused] = useState(false);
   const [displayValue, setDisplayValue] = useState("");
   const { shiftPressed, metaPressed } = useModifierKeys(disabled);
@@ -43,6 +47,10 @@ function useNumericInput(props) {
     defaultValue: defaultValuePre,
     allowEmpty: true
   });
+  const mapResultToOutputValue = useCallback(
+    (result) => typeof value === "string" ? result.string : typeof value === "number" ? result.array[0] : Array.isArray(value) ? result.array : result.object,
+    [value]
+  );
   useEffect(() => {
     if (!innerValue) {
       setDisplayValue("");
@@ -61,7 +69,7 @@ function useNumericInput(props) {
     setDisplayValue(valuePre2.string);
   }, [innerValue, expression, max, min, decimal, setValue]);
   const updateValue = useCallback(
-    (updateFn) => {
+    (updateFn, options) => {
       if (disabled || readOnly) return;
       setValue((prev) => {
         if (!prev) {
@@ -73,10 +81,13 @@ function useNumericInput(props) {
             min,
             decimal
           });
-          onChange == null ? void 0 : onChange(
-            typeof value === "string" ? initialValue.string : typeof value === "number" ? initialValue.array[0] : Array.isArray(value) ? initialValue.array : initialValue.object,
-            initialValue
-          );
+          const nextValue = mapResultToOutputValue(initialValue);
+          onChange == null ? void 0 : onChange(nextValue, initialValue);
+          if ((options == null ? void 0 : options.source) === "drag") {
+            dragHasChangedRef.current = true;
+            dragEndValueRef.current = nextValue;
+            dragEndDetailRef.current = initialValue;
+          }
           return initialValue;
         }
         const valuePre2 = dealWithNumericInputValue({
@@ -100,15 +111,18 @@ function useNumericInput(props) {
           return true;
         })();
         if (hasChanged) {
-          onChange == null ? void 0 : onChange(
-            typeof value === "string" ? valuePre2.string : typeof value === "number" ? valuePre2.array[0] : Array.isArray(value) ? valuePre2.array : valuePre2.object,
-            valuePre2
-          );
+          const nextValue = mapResultToOutputValue(valuePre2);
+          onChange == null ? void 0 : onChange(nextValue, valuePre2);
+          if ((options == null ? void 0 : options.source) === "drag") {
+            dragHasChangedRef.current = true;
+            dragEndValueRef.current = nextValue;
+            dragEndDetailRef.current = valuePre2;
+          }
         }
         return valuePre2;
       });
     },
-    [disabled, readOnly, setValue, max, min, decimal, onChange, value]
+    [disabled, readOnly, setValue, max, min, decimal, onChange, expressionRef, mapResultToOutputValue]
   );
   const { inputHandlers } = useInputInteractions({
     inputRef: innerRef,
@@ -133,6 +147,9 @@ function useNumericInput(props) {
   const { isPressed: handlerPressed, pressMoveProps } = usePressMove({
     disabled,
     onPressStart: (e) => {
+      dragHasChangedRef.current = false;
+      dragEndValueRef.current = void 0;
+      dragEndDetailRef.current = void 0;
       const wasFocused = isFocused;
       if (onPressStart && "nativeEvent" in e) {
         onPressStart(e.nativeEvent);
@@ -158,12 +175,18 @@ function useNumericInput(props) {
         onPressEnd(e.nativeEvent);
       }
       onPressEnd == null ? void 0 : onPressEnd(e);
+      if (dragHasChangedRef.current && dragEndValueRef.current !== void 0 && dragEndDetailRef.current !== void 0) {
+        onChangeEnd == null ? void 0 : onChangeEnd(dragEndValueRef.current, dragEndDetailRef.current);
+      }
+      dragHasChangedRef.current = false;
+      dragEndValueRef.current = void 0;
+      dragEndDetailRef.current = void 0;
     },
     onPressMoveLeft: (delta) => {
-      updateValue((value2) => value2 - delta * getCurrentStep());
+      updateValue((value2) => value2 - delta * getCurrentStep(), { source: "drag" });
     },
     onPressMoveRight: (delta) => {
-      updateValue((value2) => value2 + delta * getCurrentStep());
+      updateValue((value2) => value2 + delta * getCurrentStep(), { source: "drag" });
     }
   });
   const inputProps = {

package/dist/components/numeric-input/src/numeric-input.d.ts

@@ -13,6 +13,7 @@ export interface NumericInputProps extends NumericInputContextValue, Omit<HTMLPr
     disabled?: boolean;
     id?: string;
     onChange?: (value: NumericInputValue, detail: NumericChangeDetail) => void;
+    onChangeEnd?: (value: NumericInputValue, detail: NumericChangeDetail) => void;
     tooltip?: TooltipProps;
     triggerRef?: React.RefObject<HTMLDivElement> | ((el: HTMLDivElement | null) => void);
 }

package/dist/components/numeric-input/src/numeric-input.js

@@ -35,6 +35,7 @@ const NumericInputBase = forwardRef((props, ref) => {
     selected = false,
     tooltip,
     onChange,
+    onChangeEnd,
     onEmpty,
     onPressEnd,
     onPressStart,
@@ -58,6 +59,7 @@ const NumericInputBase = forwardRef((props, ref) => {
     step,
     value,
     onChange,
+    onChangeEnd,
     onEmpty,
     onPressEnd,
     onPressStart,
@@ -98,6 +100,7 @@ const NumericInputBase = forwardRef((props, ref) => {
       expression,
       // Event handling methods
       onChange,
+      onChangeEnd,
       onEmpty,
       onPressStart,
       onPressEnd,
@@ -122,6 +125,7 @@ const NumericInputBase = forwardRef((props, ref) => {
       decimal,
       expression,
       onChange,
+      onChangeEnd,
       onEmpty,
       onPressStart,
       onPressEnd,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@choice-ui/react",
-  "version": "1.9.6",
+  "version": "1.9.7",
   "description": "A desktop-first React UI component library built for professional desktop applications with comprehensive documentation",
   "sideEffects": false,
   "type": "module",