@purpurds/quantity-selector 5.27.3 → 5.27.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@purpurds/quantity-selector",
-  "version": "5.27.3",
+  "version": "5.27.4",
   "license": "AGPL-3.0-only",
   "main": "./dist/quantity-selector.cjs.js",
   "types": "./dist/quantity-selector.d.ts",
@@ -15,10 +15,10 @@
   "source": "src/quantity-selector.tsx",
   "dependencies": {
     "classnames": "~2.5.0",
-    "@purpurds/text-field": "5.27.3",
-    "@purpurds/button": "5.27.3",
-    "@purpurds/spinner": "5.27.3",
-    "@purpurds/icon": "5.27.3"
+    "@purpurds/button": "5.27.4",
+    "@purpurds/text-field": "5.27.4",
+    "@purpurds/spinner": "5.27.4",
+    "@purpurds/icon": "5.27.4"
   },
   "devDependencies": {
     "@rushstack/eslint-patch": "~1.10.0",

package/src/quantity-selector.stories.tsx

@@ -43,25 +43,39 @@ const meta = {
       },
     ],
   },
-  render: ({ ...args }) => {
-    const [{ value }, updateArgs] = useArgs(); // eslint-disable-line react-hooks/rules-of-hooks
-
-    const handleOnChange = (value: number) => {
-      updateArgs({ value });
-    };
-
-    return <QuantitySelector {...args} value={value} onChange={handleOnChange} />;
-  },
 } satisfies Meta<typeof QuantitySelector>;
 
 export default meta;
 type Story = StoryObj<typeof QuantitySelector>;
 
-export const Showcase: Story = {
+export const Uncontrolled: Story = {
   args: {
     variant: "attached",
     buttonVariant: "primary",
+    onChange: () => {}, // eslint-disable-line @typescript-eslint/no-empty-function
+  },
+  argTypes: {
+    value: {
+      control: false,
+    },
+  },
+};
+
+export const Controlled: Story = {
+  args: {
+    variant: "attached",
+    buttonVariant: "primary",
+  },
+  render: ({ ...args }) => {
+    const [{ value }, updateArgs] = useArgs(); // eslint-disable-line react-hooks/rules-of-hooks
+
+    const handleOnChange = (value: number) => {
+      updateArgs({ value });
+    };
+
+    return <QuantitySelector {...args} value={value} onChange={handleOnChange} />;
   },
+  tags: ["visual:check"],
 };
 
 export const Seperated: Story = {
@@ -69,4 +83,5 @@ export const Seperated: Story = {
     variant: "separated",
     buttonVariant: "secondary",
   },
+  tags: ["visual:check"],
 };

package/src/quantity-selector.tsx

@@ -20,6 +20,10 @@ export type QuantitySelectorProps = {
   variant: Variant;
   buttonVariant: ButtonVariant;
   onChange: (value: number) => void;
+  defaultValue?: number;
+  /**
+   * Used when the component is controlled
+   */
   value?: number;
   minValue?: number;
   maxValue?: number;
@@ -40,7 +44,8 @@ export const QuantitySelector = forwardRef(
       variant,
       buttonVariant,
       onChange,
-      value: defaultValue,
+      value: controlledValue,
+      defaultValue,
       fullWidth,
       disabled,
       loading,
@@ -50,8 +55,11 @@ export const QuantitySelector = forwardRef(
     }: QuantitySelectorProps,
     ref: ForwardedRef<HTMLInputElement>
   ) => {
-    const [value, setValue] = useState(defaultValue ?? 0);
-    const [debouncedValue, setDebouncedValue] = useState(value);
+    const [uncontrolledValue, setUncontrolledValue] = useState(defaultValue ?? 0);
+    const [debouncedValue, setDebouncedValue] = useState(uncontrolledValue);
+    const isControlled = controlledValue !== undefined;
+    const value = isControlled ? controlledValue : debouncedValue;
+
     const getTestId = (name: string) => (dataTestId ? `${dataTestId}-${name}` : undefined);
     const isDisabled = disabled || loading;
     const min = Math.max(minValue ?? 0, 0);
@@ -60,18 +68,21 @@ export const QuantitySelector = forwardRef(
     const decrementDisabled = value === min;
 
     useEffect(() => {
-      if (debouncedValue === value) {
-        return;
+      if (isControlled) {
+        setUncontrolledValue(controlledValue);
       }
-      const timer = setTimeout(() => {
-        setValue(debouncedValue);
-        onChange(debouncedValue);
-      }, 300);
+    }, [controlledValue, isControlled]);
 
-      return () => {
-        clearTimeout(timer);
-      };
-    }, [debouncedValue, value, onChange]);
+    useEffect(() => {
+      if (!isControlled) {
+        const timer = setTimeout(() => {
+          setUncontrolledValue(debouncedValue);
+        }, 300);
+
+        return () => clearTimeout(timer);
+      }
+      return;
+    }, [debouncedValue, isControlled, onChange]);
 
     const classes = cx([
       className,
@@ -99,7 +110,11 @@ export const QuantitySelector = forwardRef(
       if (val < min || val > max) {
         return;
       }
-      setDebouncedValue(val);
+
+      if (!isControlled) {
+        setDebouncedValue(val);
+      }
+      onChange(val);
     };
 
     const handleOnClick = (adjustmentType: "increment" | "decrement") => {
@@ -107,8 +122,10 @@ export const QuantitySelector = forwardRef(
       if (adjustedValue < 0) {
         return;
       }
-      setValue(adjustedValue);
-      setDebouncedValue(adjustedValue);
+
+      if (!isControlled) {
+        setDebouncedValue(adjustedValue);
+      }
       onChange(adjustedValue);
     };
 
@@ -154,7 +171,7 @@ export const QuantitySelector = forwardRef(
 
     return (
       <TextField
-        value={debouncedValue}
+        value={value}
         type="number"
         ref={ref}
         className={classes}