@officesdk/design 0.2.7 → 0.2.8

package/dist/components/cjs/index.d.ts

@@ -73,6 +73,25 @@ interface ButtonProps extends React$1.ButtonHTMLAttributes<HTMLButtonElement> {
  */
 declare const Button: React$1.FC<ButtonProps>;
 
+/**
+ * Value map utilities for piecewise linear mapping (non-linear slider)
+ */
+interface ValueMapPiece {
+    /** Size of the piece (value range) */
+    size: number;
+    /** Step increment, defaults to 1 */
+    step?: number;
+    /** Visual size (relative), defaults to size/step */
+    visualSize?: number;
+}
+interface ValueMap {
+    type: 'piecewise';
+    /** Starting value */
+    start: number;
+    /** Array of pieces defining the mapping */
+    pieces: ValueMapPiece[];
+}
+
 type LineType$1 = 'outlined' | 'underlined' | 'borderless';
 interface NumberInputProps {
     /**
@@ -152,6 +171,11 @@ interface NumberInputProps {
      * @default false
      */
     useThousandsSeparator?: boolean;
+    /**
+     * Value map for piecewise linear mapping (non-linear stepping)
+     * When provided, min/max/step props are ignored
+     */
+    valueMap?: ValueMap;
     /**
      * Callback when value changes
      * @param fixedValue - The clamped value within min/max range (can be undefined if empty)
@@ -181,6 +205,16 @@ interface NumberInputProps {
      * @param parsedValue - The parsed number value (undefined if invalid)
      */
     onInputChange?: (inputValue: string, parsedValue: number | undefined) => void;
+    /**
+     * Whether to select all text when the input receives focus
+     * @default false
+     */
+    selectAllOnFocus?: boolean;
+    /**
+     * Whether to blur the input when Escape key is pressed
+     * @default true
+     */
+    blurOnEscape?: boolean;
 }
 /**
  * NumberInput Component
@@ -241,6 +275,11 @@ interface SpinButtonProps {
      * Parse the input value
      */
     parser?: (displayValue: string) => number;
+    /**
+     * Value map for piecewise linear mapping (non-linear stepping)
+     * When provided, min/max/step props are ignored in NumberInput and Slider
+     */
+    valueMap?: ValueMap;
     /**
      * Callback when value changes
      */
@@ -257,7 +296,7 @@ interface SpinButtonProps {
      * Additional props passed to the internal NumberInput component
      * Allows customizing unit, placeholder, lineType, showStepButtons, etc.
      */
-    inputProps?: Partial<Omit<NumberInputProps, 'value' | 'defaultValue' | 'min' | 'max' | 'step' | 'size' | 'disabled' | 'alert' | 'precision' | 'formatter' | 'parser' | 'onChange' | 'className' | 'style'>>;
+    inputProps?: Partial<Omit<NumberInputProps, 'value' | 'defaultValue' | 'min' | 'max' | 'step' | 'size' | 'disabled' | 'alert' | 'precision' | 'formatter' | 'parser' | 'valueMap' | 'onChange' | 'className' | 'style'>>;
 }
 /**
  * SpinButton Component - Spin Button
@@ -425,25 +464,6 @@ interface CheckboxProps {
  */
 declare const Checkbox: React$1.FC<CheckboxProps>;
 
-/**
- * Value map utilities for piecewise linear mapping (non-linear slider)
- */
-interface ValueMapPiece {
-    /** Size of the piece (value range) */
-    size: number;
-    /** Step increment, defaults to 1 */
-    step?: number;
-    /** Visual size (relative), defaults to size/step */
-    visualSize?: number;
-}
-interface ValueMap {
-    type: 'piecewise';
-    /** Starting value */
-    start: number;
-    /** Array of pieces defining the mapping */
-    pieces: ValueMapPiece[];
-}
-
 interface SliderProps {
     /**
      * Current value (0-100)

package/dist/components/cjs/index.js

@@ -1620,6 +1620,7 @@ var init_NumberInput = __esm({
     init_styled();
     init_UIConfigProvider2();
     init_numberLocale();
+    init_valueMap();
     getDecimalPlaces = (num) => {
       const str = String(num);
       const decimalIndex = str.indexOf(".");
@@ -1862,12 +1863,15 @@ var init_NumberInput = __esm({
       showStepButtonsTrigger = "normal",
       lineType = "outlined",
       useThousandsSeparator = false,
+      valueMap: valueMapProp,
       onChange,
       className,
       style,
       onFocus: onFocusProp,
       onBlur: onBlurProp,
-      onInputChange
+      onInputChange,
+      selectAllOnFocus = false,
+      blurOnEscape = true
     }) => {
       const config = exports.useUIConfig();
       const locale = config?.locale ?? "en-US";
@@ -1877,6 +1881,12 @@ var init_NumberInput = __esm({
       const [isHovered, setIsHovered] = React3.useState(false);
       const inputRef = React3.useRef(null);
       const value = controlledValue !== void 0 ? controlledValue : internalValue;
+      const extendedValueMap = React3.useMemo(() => {
+        if (!valueMapProp) return void 0;
+        return extendValueMap(valueMapProp);
+      }, [valueMapProp]);
+      const effectiveMin = extendedValueMap ? extendedValueMap.start : min;
+      const effectiveMax = extendedValueMap ? extendedValueMap.end : max;
       const formatValue = React3.useCallback(
         (val) => {
           if (val === void 0) {
@@ -1933,9 +1943,9 @@ var init_NumberInput = __esm({
           if (val === void 0) {
             return void 0;
           }
-          return Math.max(min, Math.min(max, val));
+          return Math.max(effectiveMin, Math.min(effectiveMax, val));
         },
-        [min, max]
+        [effectiveMin, effectiveMax]
       );
       const handleValueChange = React3.useCallback(
         (newValue) => {
@@ -1950,23 +1960,23 @@ var init_NumberInput = __esm({
       const increment = React3.useCallback(() => {
         if (disabled) return;
         const currentValue = value ?? 0;
-        const newValue = precisionAdd(currentValue, step);
+        const newValue = extendedValueMap ? changeByStep(currentValue, 1, extendedValueMap) : precisionAdd(currentValue, step);
         handleValueChange(newValue);
         if (isFocused) {
           const clampedValue = clampValue(newValue);
           setDisplayValue(formatValueForEdit(clampedValue));
         }
-      }, [disabled, value, step, handleValueChange, isFocused, clampValue, formatValueForEdit]);
+      }, [disabled, value, step, handleValueChange, isFocused, clampValue, formatValueForEdit, extendedValueMap]);
       const decrement = React3.useCallback(() => {
         if (disabled) return;
         const currentValue = value ?? 0;
-        const newValue = precisionSubtract(currentValue, step);
+        const newValue = extendedValueMap ? changeByStep(currentValue, -1, extendedValueMap) : precisionSubtract(currentValue, step);
         handleValueChange(newValue);
         if (isFocused) {
           const clampedValue = clampValue(newValue);
           setDisplayValue(formatValueForEdit(clampedValue));
         }
-      }, [disabled, value, step, handleValueChange, isFocused, clampValue, formatValueForEdit]);
+      }, [disabled, value, step, handleValueChange, isFocused, clampValue, formatValueForEdit, extendedValueMap]);
       const handleInputChange = React3.useCallback(
         (e) => {
           const inputValue = e.target.value;
@@ -1988,22 +1998,28 @@ var init_NumberInput = __esm({
             const parsed = parseValue(trimmedValue);
             if (parsed !== null) {
               const preciseValue = applyPrecision(parsed);
-              handleValueChange(preciseValue);
+              const finalValue = extendedValueMap && preciseValue !== void 0 ? snapToStep(preciseValue, extendedValueMap) : preciseValue;
+              handleValueChange(finalValue);
             } else {
               setDisplayValue(formatValue(value));
             }
           }
           onBlurProp?.(e);
         },
-        [displayValue, parseValue, handleValueChange, value, formatValue, applyPrecision, onBlurProp]
+        [displayValue, parseValue, handleValueChange, value, formatValue, applyPrecision, onBlurProp, extendedValueMap]
       );
       const handleFocus = React3.useCallback(
         (e) => {
           setIsFocused(true);
           setDisplayValue(formatValueForEdit(value));
+          if (selectAllOnFocus) {
+            requestAnimationFrame(() => {
+              inputRef.current?.select();
+            });
+          }
           onFocusProp?.(e);
         },
-        [value, formatValueForEdit, onFocusProp]
+        [value, formatValueForEdit, onFocusProp, selectAllOnFocus]
       );
       const handleKeyDown = React3.useCallback(
         (e) => {
@@ -2015,9 +2031,11 @@ var init_NumberInput = __esm({
             decrement();
           } else if (e.key === "Enter") {
             inputRef.current?.blur();
+          } else if (e.key === "Escape" && blurOnEscape) {
+            inputRef.current?.blur();
           }
         },
-        [increment, decrement]
+        [increment, decrement, blurOnEscape]
       );
       const handleMouseEnter = React3.useCallback(() => {
         setIsHovered(true);
@@ -2120,6 +2138,7 @@ var init_SpinButton = __esm({
       precision,
       formatter,
       parser,
+      valueMap,
       onChange,
       className,
       style,
@@ -2149,6 +2168,7 @@ var init_SpinButton = __esm({
           max,
           step,
           disabled,
+          valueMap,
           onChange: handleValueChange
         }
       )), /* @__PURE__ */ React3__default.default.createElement(
@@ -2164,6 +2184,7 @@ var init_SpinButton = __esm({
           precision,
           formatter,
           parser,
+          valueMap,
           ...inputProps,
           onChange: handleValueChange
         }