@officesdk/design 0.1.24 → 0.1.26

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

@@ -969,7 +969,7 @@ interface TooltipProps extends Omit<Partial<TooltipProps$1>, 'prefixCls'> {
  */
 declare const Tooltip: React$1.FC<TooltipProps>;
 
-interface ToolbarButtonProps extends Omit<React$1.HTMLAttributes<HTMLDivElement>, 'onClick'> {
+interface ToolbarButtonProps extends Omit<React$1.HTMLAttributes<HTMLDivElement>, 'onClick' | 'onDoubleClick'> {
     /**
      * Whether the button is disabled
      */
@@ -977,15 +977,17 @@ interface ToolbarButtonProps extends Omit<React$1.HTMLAttributes<HTMLDivElement>
     /**
      * Whether the button is in active state
      */
-    active?: boolean;
+    isActive?: boolean;
     /**
      * Icon to display
+     * - If string: image URL
+     * - If ReactNode: custom icon component
      */
-    icon?: React$1.ReactNode;
+    icon?: string | React$1.ReactNode;
     /**
-     * Label text
+     * Label text or custom node
      */
-    label?: string;
+    label?: string | React$1.ReactNode;
     /**
      * Whether to show dropdown arrow
      */
@@ -998,6 +1000,10 @@ interface ToolbarButtonProps extends Omit<React$1.HTMLAttributes<HTMLDivElement>
      * Click handler for main button
      */
     onClick?: (e: React$1.MouseEvent<HTMLButtonElement>) => void;
+    /**
+     * Double click handler for main button
+     */
+    onDoubleClick?: (e: React$1.MouseEvent<HTMLButtonElement>) => void;
     /**
      * Click handler for dropdown section
      */
@@ -1017,14 +1023,22 @@ interface ToolbarButtonProps extends Omit<React$1.HTMLAttributes<HTMLDivElement>
  * A toolbar button with optional icon, label, and dropdown functionality
  *
  * @example
- * // Icon only button
+ * // Icon component
  * <ToolbarButton icon={<Icon />} />
  *
  * @example
+ * // Icon from URL
+ * <ToolbarButton icon="https://example.com/icon.png" />
+ *
+ * @example
  * // Button with label and dropdown
  * <ToolbarButton icon={<Icon />} label="Format" hasDropdown />
  *
  * @example
+ * // Button with custom label node
+ * <ToolbarButton icon={<Icon />} label={<CustomLabel />} />
+ *
+ * @example
  * // Button with split dropdown
  * <ToolbarButton
  *   icon={<Icon />}

package/dist/components/esm/index.js

@@ -3195,15 +3195,16 @@ var ToolbarButtonContainer = styled.div`
   border-radius: 2px;
   transition: border-color 0.15s ease;
   box-sizing: border-box;
+  overflow: hidden;
 
-  ${({ $disabled, $active, theme: theme3 }) => {
+  ${({ $disabled, $isActive, theme: theme3 }) => {
   const config = theme3.components.toolbarButton;
   if ($disabled) {
     return `
         border-color: ${config.border.borderColorDisabled};
       `;
   }
-  if ($active) {
+  if ($isActive) {
     return `
         border-color: ${config.border.borderColorActive};
 
@@ -3231,6 +3232,15 @@ var ToolbarButtonContainer = styled.div`
       }
     `;
 }}
+
+  ${({ theme: theme3 }) => {
+  const config = theme3.components.toolbarButton;
+  return `
+      height: ${config.layout.height};
+      padding: ${config.layout.padding};
+      border-radius: ${config.layout.borderRadius};
+    `;
+}}
 `;
 var MainButton = styled.button`
   display: flex;
@@ -3239,17 +3249,17 @@ var MainButton = styled.button`
   border: none;
   cursor: pointer;
   outline: none;
+  height: 100%;
   transition: background-color 0.15s ease;
 
-  ${({ $hasLabel, theme: theme3 }) => {
+  ${({ theme: theme3 }) => {
   const config = theme3.components.toolbarButton;
   return `
-      height: ${config.layout.height};
-      padding: ${$hasLabel ? config.layout.content.padding : config.layout.padding};
+      padding: ${config.layout.content.padding};
     `;
 }}
 
-  ${({ $disabled, $active, theme: theme3 }) => {
+  ${({ $disabled, $isActive, theme: theme3 }) => {
   const config = theme3.components.toolbarButton;
   if ($disabled) {
     return `
@@ -3257,7 +3267,7 @@ var MainButton = styled.button`
         background: ${config.background.backgroundDisabled};
       `;
   }
-  if ($active) {
+  if ($isActive) {
     return `
         background: ${config.background.backgroundActive};
       `;
@@ -3289,13 +3299,8 @@ var IconWrapper4 = styled.span`
     `;
 }}
 
-  ${({ $disabled, theme: theme3 }) => {
-  const config = theme3.components.toolbarButton;
-  return $disabled ? `
-    color: ${config.color.colorDisabled};
-  ` : `
-    color: ${config.color.color};
-  `;
+  ${({ $disabled }) => {
+  return $disabled ? `opacity: 0.3;` : ``;
 }}
 
   svg, img {
@@ -3402,14 +3407,14 @@ var Divider = styled.div`
     `;
 }}
 
-  ${({ $disabled, $active, theme: theme3 }) => {
+  ${({ $disabled, $isActive, theme: theme3 }) => {
   const config = theme3.components.toolbarButton;
   if ($disabled) {
     return `
         background-color: ${config.border.borderColorDisabled};
       `;
   }
-  if ($active) {
+  if ($isActive) {
     return `
         background-color: ${config.border.borderColorActive};
       `;
@@ -3429,12 +3434,13 @@ var ArrowIcon = () => /* @__PURE__ */ React3.createElement("svg", { xmlns: "http
 ));
 var ToolbarButton = ({
   disabled = false,
-  active = false,
+  isActive = false,
   icon,
   label,
   hasDropdown = false,
   splitDropdown = false,
   onClick,
+  onDoubleClick,
   onDropdownClick,
   className,
   style
@@ -3443,11 +3449,29 @@ var ToolbarButton = ({
     if (disabled) return;
     onClick?.(e);
   };
+  const handleMainDoubleClick = (e) => {
+    if (disabled) return;
+    onDoubleClick?.(e);
+  };
   const handleDropdownClick = (e) => {
     if (disabled) return;
     e.stopPropagation();
     onDropdownClick?.(e);
   };
+  const renderIcon = () => {
+    if (!icon) return null;
+    if (typeof icon === "string") {
+      return /* @__PURE__ */ React3.createElement(IconWrapper4, { $disabled: disabled }, /* @__PURE__ */ React3.createElement("img", { src: icon, alt: "icon" }));
+    }
+    return /* @__PURE__ */ React3.createElement(IconWrapper4, { $disabled: disabled }, icon);
+  };
+  const renderLabel = () => {
+    if (!label) return null;
+    if (typeof label === "string") {
+      return /* @__PURE__ */ React3.createElement(LabelText, { $disabled: disabled }, label);
+    }
+    return label;
+  };
   if (!splitDropdown && hasDropdown) {
     return /* @__PURE__ */ React3.createElement(
       ToolbarButtonContainer,
@@ -3455,19 +3479,20 @@ var ToolbarButton = ({
         className,
         style,
         $disabled: disabled,
-        $active: active
+        $isActive: isActive
       },
       /* @__PURE__ */ React3.createElement(
         MainButton,
         {
           $disabled: disabled,
-          $active: active,
+          $isActive: isActive,
           $hasLabel: !!label,
           onClick: handleMainClick,
+          onDoubleClick: handleMainDoubleClick,
           disabled
         },
-        icon && /* @__PURE__ */ React3.createElement(IconWrapper4, { $disabled: disabled }, icon),
-        label && /* @__PURE__ */ React3.createElement(LabelText, { $disabled: disabled }, label),
+        renderIcon(),
+        renderLabel(),
         /* @__PURE__ */ React3.createElement(DropdownArrow, { $disabled: disabled }, /* @__PURE__ */ React3.createElement(ArrowIcon, null))
       )
     );
@@ -3479,26 +3504,27 @@ var ToolbarButton = ({
         className,
         style,
         $disabled: disabled,
-        $active: active
+        $isActive: isActive
       },
       /* @__PURE__ */ React3.createElement(
         MainButton,
         {
           $disabled: disabled,
-          $active: active,
+          $isActive: isActive,
           $hasLabel: !!label,
           onClick: handleMainClick,
+          onDoubleClick: handleMainDoubleClick,
           disabled
         },
-        icon && /* @__PURE__ */ React3.createElement(IconWrapper4, { $disabled: disabled }, icon),
-        label && /* @__PURE__ */ React3.createElement(LabelText, { $disabled: disabled }, label)
+        renderIcon(),
+        renderLabel()
       ),
-      /* @__PURE__ */ React3.createElement(Divider, { $disabled: disabled, $active: active }),
+      /* @__PURE__ */ React3.createElement(Divider, { $disabled: disabled, $isActive: isActive }),
       /* @__PURE__ */ React3.createElement(
         DropdownButton,
         {
           $disabled: disabled,
-          $active: active,
+          $isActive: isActive,
           $split: true,
           onClick: handleDropdownClick,
           disabled
@@ -3513,19 +3539,20 @@ var ToolbarButton = ({
       className,
       style,
       $disabled: disabled,
-      $active: active
+      $isActive: isActive
     },
     /* @__PURE__ */ React3.createElement(
       MainButton,
       {
         $disabled: disabled,
-        $active: active,
+        $isActive: isActive,
         $hasLabel: !!label,
         onClick: handleMainClick,
+        onDoubleClick: handleMainDoubleClick,
         disabled
       },
-      icon && /* @__PURE__ */ React3.createElement(IconWrapper4, { $disabled: disabled }, icon),
-      label && /* @__PURE__ */ React3.createElement(LabelText, { $disabled: disabled }, label)
+      renderIcon(),
+      renderLabel()
     )
   );
 };