@officesdk/design 0.2.7 → 0.2.9

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

@@ -1614,28 +1614,12 @@ var init_numberLocale = __esm({
     };
   }
 });
-var getDecimalPlaces, precisionAdd, precisionSubtract, NumberInputContainer, InputWrapper, UnitText, StyledInput, ButtonGroup, StepButton, UpArrow, DownArrow; exports.NumberInput = void 0;
-var init_NumberInput = __esm({
-  "src/NumberInput/NumberInput.tsx"() {
+
+// src/NumberInput/NumberInput.styled.ts
+var NumberInputContainer, InputWrapper, StyledInput, ButtonGroup, StepButton;
+var init_NumberInput_styled = __esm({
+  "src/NumberInput/NumberInput.styled.ts"() {
     init_styled();
-    init_UIConfigProvider2();
-    init_numberLocale();
-    getDecimalPlaces = (num) => {
-      const str = String(num);
-      const decimalIndex = str.indexOf(".");
-      if (decimalIndex === -1) return 0;
-      return str.length - decimalIndex - 1;
-    };
-    precisionAdd = (a, b) => {
-      const precision = Math.max(getDecimalPlaces(a), getDecimalPlaces(b));
-      const multiplier = Math.pow(10, precision);
-      return Math.round(a * multiplier + b * multiplier) / multiplier;
-    };
-    precisionSubtract = (a, b) => {
-      const precision = Math.max(getDecimalPlaces(a), getDecimalPlaces(b));
-      const multiplier = Math.pow(10, precision);
-      return Math.round(a * multiplier - b * multiplier) / multiplier;
-    };
     NumberInputContainer = exports.styled.div`
   display: inline-flex;
   align-items: center;
@@ -1706,25 +1690,6 @@ var init_NumberInput = __esm({
   align-items: center;
   padding: 0 8px;
   min-width: 0;
-  gap: 4px;
-`;
-    UnitText = exports.styled.span`
-  flex-shrink: 0;
-  font-family: 'PingFang SC', sans-serif;
-  font-weight: 400;
-  line-height: 20px;
-
-  ${({ $size }) => $size === "small" ? `
-    font-size: 12px;
-  ` : `
-    font-size: 13px;
-  `}
-
-  ${({ $disabled, theme: theme2 }) => $disabled ? `
-    color: ${theme2.colors.palettes.transparency["30"]};
-  ` : `
-    color: ${theme2.colors.palettes.gray["120"]};
-  `}
 `;
     StyledInput = exports.styled.input`
   width: 100%;
@@ -1842,6 +1807,31 @@ var init_NumberInput = __esm({
     fill: ${({ $disabled, theme: theme2 }) => $disabled ? theme2.colors.palettes.transparency["30"] : theme2.colors.palettes.gray["120"]};
   }
 `;
+  }
+});
+var getDecimalPlaces, precisionAdd, precisionSubtract, UpArrow, DownArrow; exports.NumberInput = void 0;
+var init_NumberInput = __esm({
+  "src/NumberInput/NumberInput.tsx"() {
+    init_UIConfigProvider2();
+    init_numberLocale();
+    init_valueMap();
+    init_NumberInput_styled();
+    getDecimalPlaces = (num) => {
+      const str = String(num);
+      const decimalIndex = str.indexOf(".");
+      if (decimalIndex === -1) return 0;
+      return str.length - decimalIndex - 1;
+    };
+    precisionAdd = (a, b) => {
+      const precision = Math.max(getDecimalPlaces(a), getDecimalPlaces(b));
+      const multiplier = Math.pow(10, precision);
+      return Math.round(a * multiplier + b * multiplier) / multiplier;
+    };
+    precisionSubtract = (a, b) => {
+      const precision = Math.max(getDecimalPlaces(a), getDecimalPlaces(b));
+      const multiplier = Math.pow(10, precision);
+      return Math.round(a * multiplier - b * multiplier) / multiplier;
+    };
     UpArrow = () => /* @__PURE__ */ React3__default.default.createElement("svg", { viewBox: "0 0 14 14", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, /* @__PURE__ */ React3__default.default.createElement("path", { d: "M7 4.5L10.5 8.5H3.5L7 4.5Z", fill: "currentColor" }));
     DownArrow = () => /* @__PURE__ */ React3__default.default.createElement("svg", { viewBox: "0 0 14 14", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, /* @__PURE__ */ React3__default.default.createElement("path", { d: "M7 9.5L3.5 5.5H10.5L7 9.5Z", fill: "currentColor" }));
     exports.NumberInput = ({
@@ -1862,12 +1852,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,20 +1870,31 @@ 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) {
             return "";
           }
+          let formatted;
           if (formatter) {
-            return formatter(val);
+            formatted = formatter(val);
+          } else if (useThousandsSeparator) {
+            formatted = formatNumber(val, locale, precision);
+          } else {
+            formatted = formatNumberForEdit(val, locale, precision);
           }
-          if (useThousandsSeparator) {
-            return formatNumber(val, locale, precision);
+          if (unit) {
+            return formatted + unit;
           }
-          return formatNumberForEdit(val, locale, precision);
+          return formatted;
         },
-        [formatter, precision, locale, useThousandsSeparator]
+        [formatter, precision, locale, useThousandsSeparator, unit]
       );
       const formatValueForEdit = React3.useCallback(
         (val) => {
@@ -1933,9 +1937,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 +1954,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 +1992,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 +2025,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);
@@ -2053,7 +2065,7 @@ var init_NumberInput = __esm({
             $size: size,
             $disabled: disabled
           }
-        ), unit && /* @__PURE__ */ React3__default.default.createElement(UnitText, { $size: size, $disabled: disabled }, unit)),
+        )),
         showStepButtons && (showStepButtonsTrigger !== "hover" || isHovered || isFocused) && /* @__PURE__ */ React3__default.default.createElement(ButtonGroup, { $alert: alert, $disabled: disabled, $lineType: lineType }, /* @__PURE__ */ React3__default.default.createElement(
           StepButton,
           {
@@ -2120,6 +2132,7 @@ var init_SpinButton = __esm({
       precision,
       formatter,
       parser,
+      valueMap,
       onChange,
       className,
       style,
@@ -2149,6 +2162,7 @@ var init_SpinButton = __esm({
           max,
           step,
           disabled,
+          valueMap,
           onChange: handleValueChange
         }
       )), /* @__PURE__ */ React3__default.default.createElement(
@@ -2164,6 +2178,7 @@ var init_SpinButton = __esm({
           precision,
           formatter,
           parser,
+          valueMap,
           ...inputProps,
           onChange: handleValueChange
         }