@officesdk/design 0.2.6 → 0.2.8

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

@@ -73,6 +73,159 @@ 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 {
+    /**
+     * Current value
+     */
+    value?: number;
+    /**
+     * Default value
+     */
+    defaultValue?: number;
+    /**
+     * Minimum value
+     */
+    min?: number;
+    /**
+     * Maximum value
+     */
+    max?: number;
+    /**
+     * Step increment/decrement
+     */
+    step?: number;
+    /**
+     * Size variant
+     */
+    size?: 'small' | 'large';
+    /**
+     * Whether the input is disabled
+     */
+    disabled?: boolean;
+    /**
+     * Whether to show alert state (red border)
+     */
+    alert?: boolean;
+    /**
+     * Number of decimal places
+     */
+    precision?: number;
+    /**
+     * Format the display value
+     */
+    formatter?: (value: number) => string;
+    /**
+     * Parse the input value
+     */
+    parser?: (displayValue: string) => number;
+    /**
+     * Unit text to display after the input
+     */
+    unit?: string;
+    /**
+     * Placeholder text
+     */
+    placeholder?: string;
+    /**
+     * Whether to show step buttons (increment/decrement)
+     * @default true
+     */
+    showStepButtons?: boolean;
+    /**
+     * Trigger mode for showing step buttons
+     * - 'normal': always show (default)
+     * - 'hover': show only on hover
+     * @default 'normal'
+     */
+    showStepButtonsTrigger?: 'hover' | 'normal';
+    /**
+     * Input line type
+     * - 'outlined': with full border (default)
+     * - 'underlined': with bottom border only
+     * - 'borderless': no border
+     * @default 'outlined'
+     */
+    lineType?: LineType$1;
+    /**
+     * Whether to use thousands separator in display
+     * @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)
+     * @param rawValue - The original input value before clamping (can be undefined if empty)
+     */
+    onChange?: (fixedValue: number | undefined, rawValue: number | undefined) => void;
+    /**
+     * Custom className
+     */
+    className?: string;
+    /**
+     * Custom style
+     */
+    style?: React$1.CSSProperties;
+    /**
+     * Callback when input receives focus
+     */
+    onFocus?: (e: React$1.FocusEvent<HTMLInputElement>) => void;
+    /**
+     * Callback when input loses focus
+     */
+    onBlur?: (e: React$1.FocusEvent<HTMLInputElement>) => void;
+    /**
+     * Callback when input value changes during typing
+     * Useful for real-time validation (e.g., check if value is multiple of 3)
+     * @param inputValue - The raw input string
+     * @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
+ *
+ * A numeric input with increment/decrement buttons
+ *
+ * @example
+ * <NumberInput value={35} onChange={(val) => console.log(val)} />
+ */
+declare const NumberInput: React$1.FC<NumberInputProps>;
+
 interface SpinButtonProps {
     /**
      * Current value
@@ -122,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
      */
@@ -134,6 +292,11 @@ interface SpinButtonProps {
      * Custom style
      */
     style?: React$1.CSSProperties;
+    /**
+     * 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' | 'valueMap' | 'onChange' | 'className' | 'style'>>;
 }
 /**
  * SpinButton Component - Spin Button
@@ -301,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)
@@ -386,12 +530,12 @@ interface SliderProps {
 declare const Slider: React$1.FC<SliderProps>;
 
 type InputSize = 'mini' | 'small' | 'medium' | 'large';
-type LineType$1 = 'outlined' | 'underlined' | 'borderless';
+type LineType = 'outlined' | 'underlined' | 'borderless';
 interface InputProps extends Omit<React$1.InputHTMLAttributes<HTMLInputElement>, 'size' | 'prefix'> {
     /**
      * Input line type
      */
-    lineType?: LineType$1;
+    lineType?: LineType;
     /**
      * Input size
      */
@@ -530,110 +674,6 @@ declare const SearchInput: React$1.ForwardRefExoticComponent<SearchInputProps &
  */
 declare const UnderlinedInput: React$1.ForwardRefExoticComponent<Omit<InputProps, "lineType"> & React$1.RefAttributes<HTMLInputElement>>;
 
-type LineType = 'outlined' | 'underlined' | 'borderless';
-interface NumberInputProps {
-    /**
-     * Current value
-     */
-    value?: number;
-    /**
-     * Default value
-     */
-    defaultValue?: number;
-    /**
-     * Minimum value
-     */
-    min?: number;
-    /**
-     * Maximum value
-     */
-    max?: number;
-    /**
-     * Step increment/decrement
-     */
-    step?: number;
-    /**
-     * Size variant
-     */
-    size?: 'small' | 'large';
-    /**
-     * Whether the input is disabled
-     */
-    disabled?: boolean;
-    /**
-     * Whether to show alert state (red border)
-     */
-    alert?: boolean;
-    /**
-     * Number of decimal places
-     */
-    precision?: number;
-    /**
-     * Format the display value
-     */
-    formatter?: (value: number) => string;
-    /**
-     * Parse the input value
-     */
-    parser?: (displayValue: string) => number;
-    /**
-     * Unit text to display after the input
-     */
-    unit?: string;
-    /**
-     * Placeholder text
-     */
-    placeholder?: string;
-    /**
-     * Whether to show step buttons (increment/decrement)
-     * @default true
-     */
-    showStepButtons?: boolean;
-    /**
-     * Trigger mode for showing step buttons
-     * - 'normal': always show (default)
-     * - 'hover': show only on hover
-     * @default 'normal'
-     */
-    showStepButtonsTrigger?: 'hover' | 'normal';
-    /**
-     * Input line type
-     * - 'outlined': with full border (default)
-     * - 'underlined': with bottom border only
-     * - 'borderless': no border
-     * @default 'outlined'
-     */
-    lineType?: LineType;
-    /**
-     * Whether to use thousands separator in display
-     * @default false
-     */
-    useThousandsSeparator?: boolean;
-    /**
-     * Callback when value changes
-     * @param fixedValue - The clamped value within min/max range (can be undefined if empty)
-     * @param rawValue - The original input value before clamping (can be undefined if empty)
-     */
-    onChange?: (fixedValue: number | undefined, rawValue: number | undefined) => void;
-    /**
-     * Custom className
-     */
-    className?: string;
-    /**
-     * Custom style
-     */
-    style?: React$1.CSSProperties;
-}
-/**
- * NumberInput Component
- *
- * A numeric input with increment/decrement buttons
- *
- * @example
- * <NumberInput value={35} onChange={(val) => console.log(val)} />
- */
-declare const NumberInput: React$1.FC<NumberInputProps>;
-
 interface IconSize {
     width: string;
     height: string;

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,9 +1863,15 @@ var init_NumberInput = __esm({
       showStepButtonsTrigger = "normal",
       lineType = "outlined",
       useThousandsSeparator = false,
+      valueMap: valueMapProp,
       onChange,
       className,
-      style
+      style,
+      onFocus: onFocusProp,
+      onBlur: onBlurProp,
+      onInputChange,
+      selectAllOnFocus = false,
+      blurOnEscape = true
     }) => {
       const config = exports.useUIConfig();
       const locale = config?.locale ?? "en-US";
@@ -1874,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) {
@@ -1930,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) => {
@@ -1947,46 +1960,67 @@ 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]);
-      const handleInputChange = React3.useCallback((e) => {
-        setDisplayValue(e.target.value);
-      }, []);
-      const handleBlur = React3.useCallback(() => {
-        setIsFocused(false);
-        const trimmedValue = displayValue.trim();
-        if (trimmedValue === "") {
-          handleValueChange(void 0);
-          setDisplayValue("");
-        } else {
-          const parsed = parseValue(trimmedValue);
-          if (parsed !== null) {
-            const preciseValue = applyPrecision(parsed);
-            handleValueChange(preciseValue);
+      }, [disabled, value, step, handleValueChange, isFocused, clampValue, formatValueForEdit, extendedValueMap]);
+      const handleInputChange = React3.useCallback(
+        (e) => {
+          const inputValue = e.target.value;
+          setDisplayValue(inputValue);
+          const trimmed = inputValue.trim();
+          const parsedValue = trimmed === "" ? void 0 : parseValue(trimmed) ?? void 0;
+          onInputChange?.(inputValue, parsedValue);
+        },
+        [parseValue, onInputChange]
+      );
+      const handleBlur = React3.useCallback(
+        (e) => {
+          setIsFocused(false);
+          const trimmedValue = displayValue.trim();
+          if (trimmedValue === "") {
+            handleValueChange(void 0);
+            setDisplayValue("");
           } else {
-            setDisplayValue(formatValue(value));
+            const parsed = parseValue(trimmedValue);
+            if (parsed !== null) {
+              const preciseValue = applyPrecision(parsed);
+              const finalValue = extendedValueMap && preciseValue !== void 0 ? snapToStep(preciseValue, extendedValueMap) : preciseValue;
+              handleValueChange(finalValue);
+            } else {
+              setDisplayValue(formatValue(value));
+            }
           }
-        }
-      }, [displayValue, parseValue, handleValueChange, value, formatValue, applyPrecision]);
-      const handleFocus = React3.useCallback(() => {
-        setIsFocused(true);
-        setDisplayValue(formatValueForEdit(value));
-      }, [value, formatValueForEdit]);
+          onBlurProp?.(e);
+        },
+        [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, selectAllOnFocus]
+      );
       const handleKeyDown = React3.useCallback(
         (e) => {
           if (e.key === "ArrowUp") {
@@ -1997,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);
@@ -2102,9 +2138,11 @@ var init_SpinButton = __esm({
       precision,
       formatter,
       parser,
+      valueMap,
       onChange,
       className,
-      style
+      style,
+      inputProps
     }) => {
       const [internalValue, setInternalValue] = React3.useState(controlledValue ?? defaultValue);
       const value = controlledValue !== void 0 ? controlledValue : internalValue;
@@ -2130,6 +2168,7 @@ var init_SpinButton = __esm({
           max,
           step,
           disabled,
+          valueMap,
           onChange: handleValueChange
         }
       )), /* @__PURE__ */ React3__default.default.createElement(
@@ -2145,6 +2184,8 @@ var init_SpinButton = __esm({
           precision,
           formatter,
           parser,
+          valueMap,
+          ...inputProps,
           onChange: handleValueChange
         }
       ));
@@ -3675,6 +3716,9 @@ Tooltip.displayName = "Tooltip";
 
 // src/ToolbarButton/ToolbarButton.tsx
 init_styled();
+var ArrowDownIcon = () => {
+  return /* @__PURE__ */ React3__default.default.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none" }, /* @__PURE__ */ React3__default.default.createElement("path", { d: "M8.1858 9.79353C8.08649 9.90387 7.91346 9.90387 7.81415 9.79353L4.77549 6.41724C4.6307 6.25636 4.74487 6 4.96132 6L11.0386 6C11.2551 6 11.3693 6.25636 11.2245 6.41724L8.1858 9.79353Z", fill: "#41464B", fillOpacity: "0.6" }));
+};
 var ToolbarButtonContainer = exports.styled.div`
   display: inline-flex;
   align-items: center;
@@ -3975,7 +4019,7 @@ var ToolbarButton = ({
         },
         renderIcon(),
         renderLabel(),
-        /* @__PURE__ */ React3__default.default.createElement(DropdownArrow, { $disabled: disabled }, /* @__PURE__ */ React3__default.default.createElement(icons.ArrowDownIcon, null))
+        /* @__PURE__ */ React3__default.default.createElement(DropdownArrow, { $disabled: disabled }, /* @__PURE__ */ React3__default.default.createElement(ArrowDownIcon, null))
       )
     );
   }
@@ -4011,7 +4055,7 @@ var ToolbarButton = ({
           onClick: handleDropdownClick,
           disabled
         },
-        /* @__PURE__ */ React3__default.default.createElement(DropdownArrow, { $disabled: disabled }, /* @__PURE__ */ React3__default.default.createElement(icons.ArrowDownIcon, null))
+        /* @__PURE__ */ React3__default.default.createElement(DropdownArrow, { $disabled: disabled }, /* @__PURE__ */ React3__default.default.createElement(ArrowDownIcon, null))
       )
     );
   }