@officesdk/design 0.2.3 → 0.2.5

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

@@ -583,6 +583,11 @@ interface NumberInputProps {
      * Placeholder text
      */
     placeholder?: string;
+    /**
+     * Whether to show step buttons (increment/decrement)
+     * @default true
+     */
+    showStepButtons?: boolean;
     /**
      * Callback when value changes
      * @param fixedValue - The clamped value within min/max range (can be undefined if empty)
@@ -927,6 +932,10 @@ interface TabsProps {
      * Tab size
      */
     size?: 'large';
+    /**
+     * Tab items alignment (only works for 'line' variant)
+     */
+    justify?: 'start' | 'center' | 'end';
     /**
      * Callback when tab changes
      */
@@ -1095,7 +1104,7 @@ interface ToolbarButtonProps extends Omit<React$1.HTMLAttributes<HTMLDivElement>
  */
 declare const ToolbarButton: React$1.FC<ToolbarButtonProps>;
 
-type DropdownButtonSize = 'large' | 'medium';
+type DropdownButtonSize = 'large' | 'medium' | 'small';
 type DropdownButtonVariant = 'framed' | 'frameless';
 interface DropdownButtonProps extends Omit<React$1.ButtonHTMLAttributes<HTMLButtonElement>, 'type'> {
     /**
@@ -1148,6 +1157,11 @@ interface DropdownButtonProps extends Omit<React$1.ButtonHTMLAttributes<HTMLButt
      * Custom text style
      */
     textStyle?: React$1.CSSProperties;
+    /**
+     * Custom content to render instead of value/placeholder
+     * When provided, value and placeholder are ignored
+     */
+    children?: React$1.ReactNode;
 }
 /**
  * DropdownButton Component

package/dist/components/esm/index.js

@@ -1,6 +1,6 @@
 import ReactDOM from 'react-dom';
 import React3, { forwardRef, useState, createContext, useEffect, useMemo, useRef, useCallback, useContext } from 'react';
-import { ArrowRightIcon, CloseIcon, SearchIcon, ErrorIcon, WarningIcon, InfoIcon, SuccessIcon, CheckIcon, ChevronDownIcon } from '@officesdk/design/icons';
+import { ArrowRightIcon, CloseIcon, SearchIcon, ErrorIcon, WarningIcon, InfoIcon, SuccessIcon, CheckIcon, ArrowDownIcon } from '@officesdk/design/icons';
 import { lightTheme } from '@officesdk/design/theme';
 import baseStyled, { createGlobalStyle as createGlobalStyle$1 } from 'styled-components';
 import RcTooltip from 'rc-tooltip';
@@ -1278,10 +1278,26 @@ var init_Slider2 = __esm({
     init_valueMap();
   }
 });
-var NumberInputContainer, InputWrapper, UnitText, StyledInput, ButtonGroup, StepButton, UpArrow, DownArrow, NumberInput;
+var getDecimalPlaces, precisionAdd, precisionSubtract, NumberInputContainer, InputWrapper, UnitText, StyledInput, ButtonGroup, StepButton, UpArrow, DownArrow, NumberInput;
 var init_NumberInput = __esm({
   "src/NumberInput/NumberInput.tsx"() {
     init_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;
+    };
     NumberInputContainer = styled.div`
   display: inline-flex;
   align-items: center;
@@ -1471,6 +1487,7 @@ var init_NumberInput = __esm({
       parser,
       unit,
       placeholder,
+      showStepButtons = true,
       onChange,
       className,
       style
@@ -1532,13 +1549,23 @@ var init_NumberInput = __esm({
       const increment = useCallback(() => {
         if (disabled) return;
         const currentValue = value ?? 0;
-        handleValueChange(currentValue + step);
-      }, [disabled, value, step, handleValueChange]);
+        const newValue = precisionAdd(currentValue, step);
+        handleValueChange(newValue);
+        if (isFocused) {
+          const clampedValue = clampValue(newValue);
+          setDisplayValue(formatValue(clampedValue));
+        }
+      }, [disabled, value, step, handleValueChange, isFocused, clampValue, formatValue]);
       const decrement = useCallback(() => {
         if (disabled) return;
         const currentValue = value ?? 0;
-        handleValueChange(currentValue - step);
-      }, [disabled, value, step, handleValueChange]);
+        const newValue = precisionSubtract(currentValue, step);
+        handleValueChange(newValue);
+        if (isFocused) {
+          const clampedValue = clampValue(newValue);
+          setDisplayValue(formatValue(clampedValue));
+        }
+      }, [disabled, value, step, handleValueChange, isFocused, clampValue, formatValue]);
       const handleInputChange = useCallback((e) => {
         setDisplayValue(e.target.value);
       }, []);
@@ -1605,7 +1632,7 @@ var init_NumberInput = __esm({
             $disabled: disabled
           }
         ), unit && /* @__PURE__ */ React3.createElement(UnitText, { $size: size, $disabled: disabled }, unit)),
-        /* @__PURE__ */ React3.createElement(ButtonGroup, { $alert: alert, $disabled: disabled }, /* @__PURE__ */ React3.createElement(
+        showStepButtons && /* @__PURE__ */ React3.createElement(ButtonGroup, { $alert: alert, $disabled: disabled }, /* @__PURE__ */ React3.createElement(
           StepButton,
           {
             type: "button",
@@ -2856,10 +2883,12 @@ var TabList = styled.div`
   height: 100%;
 
 
-  ${({ $variant, theme: theme2 }) => {
+  ${({ $variant, $justify, theme: theme2 }) => {
   const variantConfig = theme2.components.tab[$variant];
+  const justifyContent = $variant === "line" ? $justify === "center" ? "center" : $justify === "end" ? "flex-end" : "flex-start" : "flex-start";
   return `
       gap: ${variantConfig.layout.gap};
+      justify-content: ${justifyContent};
     `;
 }}
 
@@ -2990,6 +3019,7 @@ var Tabs = ({
   variant = "line",
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   size: _size = "large",
+  justify = "start",
   onChange,
   className,
   style,
@@ -3010,7 +3040,7 @@ var Tabs = ({
     },
     [controlledActiveKey, onChange]
   );
-  return /* @__PURE__ */ React3.createElement(TabContainer, { $variant: variant, className, style }, /* @__PURE__ */ React3.createElement(TabList, { $variant: variant, role: "tablist" }, items.map((item) => /* @__PURE__ */ React3.createElement(
+  return /* @__PURE__ */ React3.createElement(TabContainer, { $variant: variant, className, style }, /* @__PURE__ */ React3.createElement(TabList, { $variant: variant, $justify: justify, role: "tablist" }, items.map((item) => /* @__PURE__ */ React3.createElement(
     TabItem,
     {
       key: item.key,
@@ -3225,6 +3255,8 @@ var TooltipGlobalStyles = createGlobalStyle$1`
     line-height: ${() => getGlobalTheme().components.tooltip.black.lineHeight};
     font-weight: ${() => getGlobalTheme().components.tooltip.black.fontWeight};
     max-width: ${() => getGlobalTheme().components.tooltip.black.maxWidth};
+    white-space: normal;
+    word-wrap: break-word;
     text-align: left;
     text-decoration: none;
   }
@@ -3244,6 +3276,9 @@ var TooltipGlobalStyles = createGlobalStyle$1`
     font-size: ${() => getGlobalTheme().components.tooltip.white.small.fontSize};
     line-height: ${() => getGlobalTheme().components.tooltip.white.small.lineHeight};
     font-weight: ${() => getGlobalTheme().components.tooltip.white.small.fontWeight};
+    max-width: ${() => getGlobalTheme().components.tooltip.white.small.maxWidth};
+    white-space: normal;
+    word-wrap: break-word;
     text-align: left;
     text-decoration: none;
   }
@@ -3263,6 +3298,9 @@ var TooltipGlobalStyles = createGlobalStyle$1`
     font-size: ${() => getGlobalTheme().components.tooltip.white.large.fontSize};
     line-height: ${() => getGlobalTheme().components.tooltip.white.large.lineHeight};
     font-weight: ${() => getGlobalTheme().components.tooltip.white.large.fontWeight};
+    max-width: ${() => getGlobalTheme().components.tooltip.white.large.maxWidth};
+    white-space: normal;
+    word-wrap: break-word;
     text-align: left;
     text-decoration: none;
   }
@@ -3654,7 +3692,7 @@ var ToolbarButton = ({
         },
         renderIcon(),
         renderLabel(),
-        /* @__PURE__ */ React3.createElement(DropdownArrow, { $disabled: disabled }, /* @__PURE__ */ React3.createElement(ChevronDownIcon, null))
+        /* @__PURE__ */ React3.createElement(DropdownArrow, { $disabled: disabled }, /* @__PURE__ */ React3.createElement(ArrowDownIcon, null))
       )
     );
   }
@@ -3690,7 +3728,7 @@ var ToolbarButton = ({
           onClick: handleDropdownClick,
           disabled
         },
-        /* @__PURE__ */ React3.createElement(DropdownArrow, { $disabled: disabled }, /* @__PURE__ */ React3.createElement(ChevronDownIcon, null))
+        /* @__PURE__ */ React3.createElement(DropdownArrow, { $disabled: disabled }, /* @__PURE__ */ React3.createElement(ArrowDownIcon, null))
       )
     );
   }
@@ -3883,6 +3921,7 @@ var DropdownButton2 = forwardRef(
     style,
     textStyle,
     onClick,
+    children,
     ...rest
   }, ref) => {
     const effectiveSize = size || (variant === "framed" ? "large" : "medium");
@@ -3912,7 +3951,7 @@ var DropdownButton2 = forwardRef(
         ...rest
       },
       iconElement && /* @__PURE__ */ React3.createElement(IconWrapper5, { $size: effectiveSize }, iconElement),
-      /* @__PURE__ */ React3.createElement(TextContent, { $disabled: disabled, $hasValue: hasValue, style: textStyle }, value || placeholder),
+      children ? children : /* @__PURE__ */ React3.createElement(TextContent, { $disabled: disabled, $hasValue: hasValue, style: textStyle }, value || placeholder),
       /* @__PURE__ */ React3.createElement(IndicatorWrapper, { $size: effectiveSize, $open: open, $disabled: disabled }, indicatorIcon || /* @__PURE__ */ React3.createElement(ArrowRightIcon, null))
     );
   }