feat: remove clamping as a prop

figma-primitives/src/components/ControlInput/ControlInput.tsx

@@ -33,7 +33,6 @@ type ControlInputProps<V> = Omit<InputProps, 'value' | 'onChange'> & {
   bigNudge?: number;
   parse: (input: string, value: V) => ControlInputParserResult<V>;
   format: (value: V) => string;
-  clamp?: (value: V) => V;
   incrementBy?: (value: V, amount: number, incrementTargets: IncrementTargets) => V;
   getIncrementTargets?: (element: HTMLInputElement) => IncrementTargets;
   getIncrementSelection?: () => [start: number, end: number];
@@ -47,7 +46,6 @@ const Field = <V,>(props: ControlInputProps<V>) => {
     onChange,
     format,
     parse,
-    clamp,
     smallNudge = DEFAULT_SMALL_NUDGE,
     bigNudge = DEFAULT_BIG_NUDGE,
     incrementBy,
@@ -61,7 +59,7 @@ const Field = <V,>(props: ControlInputProps<V>) => {
   const inputValue = editingValue ?? format(valueProp);
 
   const submit = (input: string) => {
-    const parserResult = parseInput(input);
+    const parserResult = parse(input, valueProp);
 
     if (input.length === 0 || !parserResult.valid || parserResult.value === valueProp) {
       return revert();
@@ -75,16 +73,6 @@ const Field = <V,>(props: ControlInputProps<V>) => {
     setEditingValue(null);
   };
 
-  const parseInput = (input: string): ControlInputParserResult<V> => {
-    const parserResult = parse(input, valueProp);
-    if (!parserResult.valid) {
-      return parserResult;
-    }
-
-    const value = clamp ? clamp(parserResult.value) : parserResult.value;
-    return { valid: true, value };
-  };
-
   const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
     setEditingValue(event.currentTarget.value);
   };

figma-primitives/src/examples/OpacityControl/OpacityControl.tsx

@@ -20,7 +20,6 @@ const OpacityControl = () => {
           onChange={handleChange}
           format={format}
           parse={parse}
-          clamp={(value) => clamp(value, 0, 100)}
           incrementBy={incrementBy}
         />
       </ControlInput.Root>
@@ -30,22 +29,20 @@ const OpacityControl = () => {
 
 const format = (value: number) => `${value}%`;
 
-const parse = (input: string, value: number): ControlInputParserResult<number> => {
+// @todo Rounding
+// @todo most likely real valueProp for this is 0-1
+const parse = (input: string, currentValue: number): ControlInputParserResult<number> => {
   try {
-    const evaluation = evaluateExpression(input, value);
-    return evaluation === null
-      ? {
-          valid: false,
-        }
-      : { valid: true, value: evaluation };
+    const value = evaluateExpression(input, currentValue);
+    return {
+      valid: true,
+      value: clamp(value, 0, 100),
+    };
   } catch (e) {
     return { valid: false };
   }
 };
 
-// isNumberLike ? -> convert to number -> return
-// isExpressionLike ? try expression
-
 function incrementBy(value: number, amount: number): number {
   return value + amount;
 }

figma-primitives/src/examples/OpacityControl/evaluateExpression.ts

@@ -1,12 +1,18 @@
 import evaluate from '@emmetio/math-expression';
 
 function evaluateExpression(expression: string, value: number) {
-  return evaluate(
+  const result = evaluate(
     expression
       .replace(/%/g, '')
       .replace(/(\d+)x/gi, (match, p1) => `(${value}*${p1})`)
       .replace(/x(\d+)/gi, (match, p1) => `(${value}*${p1})`)
   );
+
+  if (result === null) {
+    throw new Error('Invalid expression:');
+  }
+
+  return result;
 }
 
 export { evaluateExpression };